/* ============================================================
Dijitarya - Ana Stil
Beyaz zemin + sky mavi (#1FA7E8) brand + pink aksan
============================================================ */
:root {
--c-primary: #0a0e1a; /* metin / ink — siyaha yakın koyu */
--c-primary-2: #141a2e;
--c-accent: #1FA7E8; /* DİJİTARYA brand mavi (kurumsal vurgu) */
--c-accent-2: #0E8FCF; /* hover/koyu mavi */
--c-accent-soft: #E1F3FB; /* mavi pastel zemin */
--c-pink: #EF4A5B; /* sıcak aksan (DM kartı, vurgu) */
--c-pink-soft: #FDE7EA;
--c-yellow: #FFD23F; /* aksan: acc-yellow */
--c-lilac: #C9B6FF; /* aksan: acc-lilac */
--c-mint: #9BE7C4; /* aksan: acc-mint */
--c-text: #0a0e1a;
--c-muted: #6b7280;
--c-bg: #F6FBFE; /* hafif mavi-tinted tek zemin */
--c-bg-soft: #EEF6FB;
--c-border: #e5e7eb;
--c-success: #2ECC71;
--c-danger: #ef4444;
--shadow-sm: 0 2px 8px rgba(10, 14, 26, 0.05);
--shadow-md: 0 8px 24px rgba(10, 14, 26, 0.07);
--shadow-lg: 0 20px 60px rgba(10, 14, 26, 0.12);
--radius-sm: 6px;
--radius: 10px;
--radius-lg: 18px;
--container: 1240px;
--header-h: 84px;
--transition: 0.3s cubic-bezier(.2,.7,.3,1);
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
font-family: 'Urbanist', 'Outfit', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
color: var(--c-text);
background: var(--c-bg);
line-height: 1.6;
font-size: 16px;
overflow-x: hidden;
}
img { max-width: 100%; height: auto; display: block; }
a { color: var(--c-accent); text-decoration: none; transition: color var(--transition); }
a:hover { color: var(--c-primary); }
button { font-family: inherit; cursor: pointer; }
h1, h2, h3, h4, h5, h6 {
font-family: 'Urbanist', 'Outfit', 'DM Sans', -apple-system, BlinkMacSystemFont, sans-serif;
font-weight: 700;
line-height: 1.12;
color: var(--c-primary);
/* Outfit DM Sans'tan dolgun render eder; menü başlığı ayarına yaklaştırıldı (-0.008em) */
letter-spacing: -0.012em;
}
h1 { font-size: clamp(2.5rem, 6vw, 5rem); font-weight: 800; }
h2 { font-size: clamp(2rem, 4.2vw, 3.2rem); font-weight: 700; }
h3 { font-size: clamp(1.25rem, 2vw, 1.6rem); font-weight: 700; }
p { margin-bottom: 1rem; color: var(--c-muted); }
.container {
max-width: var(--container);
margin: 0 auto;
padding: 0 24px;
}
.section { padding: 96px 0; }
.section-sm { padding: 64px 0; }
.section-bg { background: transparent; }
.section-dark { background: var(--c-primary); color: #fff; }
.section-dark h1, .section-dark h2, .section-dark h3 { color: #fff; }
.section-dark p { color: rgba(255,255,255,.75); }
.section-title {
text-align: center;
margin-bottom: 56px;
}
.section-title .eyebrow {
display: inline-block;
padding: 6px 14px;
background: rgba(255, 107, 53, 0.1);
color: var(--c-accent);
font-size: 0.85rem;
font-weight: 600;
border-radius: 999px;
text-transform: uppercase;
letter-spacing: 0.08em;
margin-bottom: 16px;
}
.section-title h2 { margin-bottom: 12px; }
.section-title p { max-width: 640px; margin: 0 auto; font-size: 1.05rem; }
/* Buttons */
.btn {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 14px 28px;
border-radius: 999px;
font-weight: 600;
font-size: 0.95rem;
transition: all var(--transition);
border: 2px solid transparent;
cursor: pointer;
white-space: nowrap;
}
.btn-primary {
background: var(--c-primary);
color: #fff;
box-shadow: none;
}
.btn-primary:hover {
background: var(--c-primary-2);
color: #fff;
transform: translateY(-2px);
box-shadow: none;
}
.btn-dark {
background: var(--c-primary);
color: #fff;
}
.btn-dark:hover { background: var(--c-primary-2); color: #fff; transform: translateY(-2px); }
.hero-actions .btn-dark { transition: all .25s ease; }
.hero-actions .btn-dark:hover {
background: var(--c-primary-2);
color: #fff;
transform: translateY(-2px);
box-shadow: none;
}
.hero-actions .btn-dark i { transition: transform .25s ease; }
.hero-actions .btn-dark:hover i { transform: translateX(4px); }
.btn-outline {
background: transparent;
color: var(--c-primary);
border-color: var(--c-border);
}
.btn-outline:hover { border-color: var(--c-primary); color: var(--c-primary); }
.btn-light {
background: #fff;
color: var(--c-primary);
}
.btn-light:hover { background: var(--c-primary); color: #fff; }
.btn-ghost {
background: transparent;
color: var(--c-accent);
padding: 0;
}
.btn-ghost:hover { color: var(--c-primary); transform: translateX(4px); }
/* ====================================================================
HEADER — Floating pill + magnetic underline + iconified mega panel
(header'ın kendisi transparan, içindeki container = floating pill bar)
==================================================================== */
.site-header {
position: fixed;
top: 0; left: 0; right: 0;
height: var(--header-h);
padding: 14px 0;
background: transparent;
z-index: 1000;
pointer-events: none; /* sadece içerideki pill etkileşsin */
transition: padding .28s cubic-bezier(.2,.7,.3,1), height .28s cubic-bezier(.2,.7,.3,1);
}
.site-header .container {
height: 100%;
display: flex;
align-items: center;
gap: 24px;
padding: 0 24px;
position: relative;
background: rgba(255,255,255,.86);
backdrop-filter: blur(18px) saturate(180%);
-webkit-backdrop-filter: blur(18px) saturate(180%);
border: 1px solid rgba(10,14,26,.06);
border-radius: 999px;
box-shadow: 0 10px 32px rgba(10,14,26,.06), 0 1px 0 rgba(255,255,255,.6) inset;
pointer-events: auto;
transition: box-shadow .28s cubic-bezier(.2,.7,.3,1),
background .28s cubic-bezier(.2,.7,.3,1),
padding .28s cubic-bezier(.2,.7,.3,1);
}
.site-header.scrolled {
padding: 8px 0;
height: 68px;
}
.site-header.scrolled .container {
padding: 0 20px;
background: rgba(255,255,255,.96);
backdrop-filter: blur(22px) saturate(200%);
-webkit-backdrop-filter: blur(22px) saturate(200%);
box-shadow: 0 16px 40px rgba(10,14,26,.12), 0 1px 0 rgba(255,255,255,.7) inset;
}
.site-header.scrolled .logo img { max-height: 28px; transition: max-height .28s ease; }
.site-header.scrolled .main-nav > ul > li > a { padding: 8px 12px; font-size: 0.9rem; }
.site-header.scrolled .btn-cta-pill { padding: 8px 16px; font-size: 0.88rem; }
/* İlk yüklemede geçişleri bastır — scroll state'i anlık otursun, morph animasyonu görünmesin */
.site-header.preload,
.site-header.preload .container,
.site-header.preload .logo img,
.site-header.preload .btn-cta-pill,
.site-header.preload .main-nav > ul > li > a { transition: none !important; }
.header-right {
display: inline-flex;
align-items: center;
gap: 10px;
flex-shrink: 0;
}
/* Focus visible — klavye erişimi */
.main-nav a:focus-visible,
.btn-cta-pill:focus-visible {
outline: 2px solid var(--c-accent);
outline-offset: 3px;
border-radius: 10px;
}
/* ---------- LOGO ---------- */
.logo {
display: inline-flex;
align-items: center;
flex-shrink: 0;
font-family: 'Urbanist', 'Outfit', sans-serif;
font-weight: 800;
letter-spacing: -0.018em;
color: var(--c-primary);
font-size: 1.4rem;
line-height: 1;
text-decoration: none;
}
.logo img { max-height: 34px; width: auto; mix-blend-mode: multiply; }
.logo .dj-name { color: var(--c-primary); }
/* ---------- ANA NAV (desktop) — magnetic underline ---------- */
.main-nav {
flex: 1;
display: flex;
justify-content: center;
align-items: center;
gap: 16px;
}
.main-nav > ul {
list-style: none;
margin: 0;
padding: 0;
display: flex;
align-items: center;
gap: 4px;
}
.main-nav > ul > li {
position: static;
}
.main-nav > ul > li > a {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 10px 14px;
font-size: 0.92rem;
font-weight: 500;
color: var(--c-primary);
text-decoration: none;
letter-spacing: -0.005em;
position: relative;
transition: color .2s ease;
}
/* Magnetic underline — center'dan açılan kısa renkli çizgi */
.main-nav > ul > li > a::after {
content: '';
position: absolute;
left: 50%;
bottom: 4px;
width: 22px;
height: 2px;
border-radius: 2px;
background: var(--c-accent);
transform: translateX(-50%) scaleX(0);
transform-origin: center;
transition: transform .28s cubic-bezier(.2,.7,.3,1);
}
.main-nav > ul > li > a:hover,
.main-nav > ul > li.has-dropdown:hover > a {
color: var(--c-accent-2);
}
.main-nav > ul > li > a:hover::after,
.main-nav > ul > li.has-dropdown:hover > a::after,
.main-nav > ul > li > a.active::after {
transform: translateX(-50%) scaleX(1);
}
.main-nav > ul > li > a.active {
color: var(--c-accent-2);
font-weight: 600;
}
/* Active parent: underline yerine tonal dot prefix (Linear-style "şu an buradasın") */
.main-nav > ul > li > a.active::after { display: none; }
.main-nav > ul > li > a.active::before {
content: "";
width: 6px;
height: 6px;
border-radius: 50%;
background: var(--c-accent);
margin-right: 8px;
box-shadow: 0 0 0 3px rgba(31,167,232,.14);
flex-shrink: 0;
}
/* Caret */
.main-nav .caret {
font-size: 0.62rem;
opacity: 0.5;
transition: transform .25s ease, opacity .2s ease;
margin-left: 1px;
}
.main-nav .has-dropdown:hover > a .caret {
transform: rotate(180deg);
opacity: 1;
}
/* ---------- MEGA PANEL — rounded floating pill, container-width ---------- */
.mega-panel {
position: absolute;
top: calc(100% + 10px);
left: 0;
right: 0;
opacity: 0;
visibility: hidden;
transform-origin: top center;
/* 3D rotateX kaldırıldı: eğik düzlem + backdrop-filter açılışta bulanıklık yapıyordu.
Temiz aşağı-kayma + fade — net açılır. */
transform: translateY(-8px);
transition:
opacity .2s ease-out,
transform .3s cubic-bezier(.22,.61,.36,1),
visibility .2s ease-out;
pointer-events: none;
backface-visibility: hidden;
-webkit-backface-visibility: hidden;
will-change: transform, opacity;
z-index: 90;
}
/* Hover bridge — link ile panel arasındaki boşluğu doldurur (compact panellerde
panel zaten dar, köprü de dar olur — sorun yok). */
.mega-panel::before {
content: "";
position: absolute;
top: -14px;
left: 0;
right: 0;
height: 14px;
background: transparent;
}
/* Full-width (non-compact = Hizmetler / Çözüm) panellerde köprü tüm navbar
genişliğinde uzanıp mouse sağa kayınca paneli açık tutuyordu → KAPAT.
Yerine linkin altına link genişliğinde DAR köprü (.mp-bridge) konur. */
.main-nav > ul > li.has-dropdown:not(.has-dropdown--compact) > .mega-panel::before {
content: none;
}
.main-nav .mp-bridge { display: none; }
.main-nav > ul > li.has-dropdown:not(.has-dropdown--compact) > a .mp-bridge {
display: block;
position: absolute;
left: 0;
right: 0;
top: 100%;
height: 16px;
background: transparent;
}
.main-nav > ul > li.has-dropdown:hover > .mega-panel,
.main-nav > ul > li.has-dropdown:focus-within > .mega-panel {
opacity: 1;
visibility: visible;
transform: translateY(0);
pointer-events: auto;
}
.mp-inner {
background: rgba(255,255,255,.96);
backdrop-filter: blur(18px) saturate(180%);
-webkit-backdrop-filter: blur(18px) saturate(180%);
border: 1px solid rgba(10,14,26,.06);
border-radius: 24px;
box-shadow: 0 24px 60px rgba(10,14,26,.10), 0 1px 0 rgba(255,255,255,.6) inset;
padding: 22px 22px 18px;
}
.mp-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 6px 8px;
}
/* Solutions mega panel — 3 item, dar ortalanmış */
/* Ajans mega panel — 2 item, sola sabit dar panel */
.mp-grid--2 { grid-template-columns: repeat(2, 1fr); }
/* ============================================================
RICH MEGA PANEL — kurumsal layout v2 (mono icons + tone identity)
============================================================ */
/* ---- Compact dropdown variant (az item için dar panel, nav link'e anchored) ---- */
/* Yüksek specificity — base `.main-nav > ul > li { position: static }` kuralını ez */
.main-nav > ul > li.has-dropdown.has-dropdown--compact { position: relative; }
.main-nav > ul > li.has-dropdown.has-dropdown--compact > .mega-panel--compact {
left: -10px;
right: auto;
width: max-content;
max-width: calc(100vw - 32px);
}
/* dar panelde lead boğuyor */
/* Mobile collapse → compact da single column olur */
@media (max-width: 720px) {
.mega-panel--compact { left: 0; right: 0; width: auto; }
}
/* ============================================================
EDITORIAL DROPDOWN — Stripe/Linear-style profesyonel liste
============================================================ */
.mp-inner--editorial {
--menu-tone: var(--c-accent);
--menu-tone-soft: var(--c-accent-soft);
position: relative;
max-width: 900px;
margin: 0 auto;
padding: 28px 36px 26px;
overflow: hidden;
}
/* Sol kenar tonal accent strip — referans sadeliği için gizli */
.mp-inner--editorial::before { content: none; }
/* Köşede panel tonunda yumuşak ışıltı + ince dokulu zemin — düz beyazı kırar */
.mp-inner--editorial {
background-image:
radial-gradient(120% 90% at 100% 0%,
color-mix(in srgb, var(--menu-tone) 7%, transparent) 0%,
transparent 42%),
radial-gradient(rgba(10,14,26,.028) 1px, transparent 1px);
background-size: 100% 100%, 22px 22px;
background-position: 0 0, 0 0;
}
/* ===== Hizmetler — Piksel referansı: sade nötr ikon, kompakt-rafine ===== */
.mp-inner--clean { max-width: 980px; padding: 30px 36px 26px; }
.mp-inner--clean .mp-head { margin-bottom: 20px; }
.mp-inner--clean .mp-head-title { font-size: 1.26rem; }
.mp-inner--clean .mp-grid--2 { gap: 18px 44px; }
.mp-inner--clean .mp-row {
align-items: center;
gap: 16px;
padding: 14px 16px;
border-radius: 20px;
}
.mp-inner--clean .mp-row-icon {
width: 54px;
height: 54px;
font-size: 1.3rem;
}
.mp-inner--clean .mp-row-title { font-size: 1rem; margin-bottom: 1px; }
.mp-inner--clean .mp-row-desc { font-size: 0.85rem; line-height: 1.55; }
/* Hizmetler hover — referans: düz yumuşak MAVİ dolgu kart (gölgesiz) + solid mavi ikon dairesi */
.mp-inner--clean .mp-row:hover,
.mp-inner--clean .mp-row.is-current {
background: color-mix(in srgb, var(--c-accent) 11%, #fff);
box-shadow: none;
border-color: transparent;
}
.mp-inner--clean .mp-row:hover .mp-row-icon,
.mp-inner--clean .mp-row.is-current .mp-row-icon {
background: var(--c-accent);
color: #fff;
border-color: transparent;
box-shadow: 0 8px 18px -8px color-mix(in srgb, var(--c-accent) 55%, transparent);
}
.mp-inner--clean .mp-row:hover .mp-row-desc,
.mp-inner--clean .mp-row.is-current .mp-row-desc { color: #5a6473; }
.mp-inner--editorial.is-lilac { --menu-tone: #6D5BD8; --menu-tone-soft: rgba(201,182,255,.18); }
.mp-inner--editorial.is-pink { --menu-tone: var(--c-pink); --menu-tone-soft: var(--c-pink-soft); }
.mp-inner--editorial.is-yellow { --menu-tone: #B58900; --menu-tone-soft: rgba(255,210,63,.16); }
.mp-inner--editorial.is-mint { --menu-tone: #18A86B; --menu-tone-soft: rgba(155,231,196,.20); }
/* Compact (1-col) variant — Biz, Reklam için */
.mp-inner--col1 { max-width: 432px; padding: 26px 28px 22px; }
.mp-inner--col1 .mp-grid--1 { min-width: 372px; gap: 4px; }
.mp-inner--col1 .mp-row { padding: 12px 14px; }
/* Header bar */
.mp-head {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 16px;
margin-bottom: 18px;
padding-bottom: 13px;
border-bottom: 1px solid rgba(10,14,26,.07);
}
/* referans sadeliği: eyebrow + count gizli, tek sade başlık */
.mp-head-eyebrow { display: none; }
.mp-head-count { display: none; }
.mp-head-title {
position: relative;
font-family: 'Urbanist', 'Outfit', 'DM Sans', sans-serif;
font-size: 1.24rem;
font-weight: 700;
color: var(--c-primary);
line-height: 1.15;
letter-spacing: -0.02em;
margin: 0;
padding-left: 14px;
}
/* küçük renkli marka çizgisi — panel tonunda */
.mp-head-title::before {
content: "";
position: absolute;
left: 0;
top: 2px;
bottom: 2px;
width: 4px;
border-radius: 3px;
background: var(--menu-tone);
}
/* Grid */
.mp-grid {
display: grid;
gap: 2px;
}
.mp-grid--1 { grid-template-columns: 1fr; }
.mp-grid--2 { grid-template-columns: repeat(2, 1fr); gap: 18px 44px; }
/* Row */
.mp-row {
position: relative;
display: flex;
align-items: center;
gap: 15px;
padding: 12px 14px;
border-radius: 18px;
border: 1px solid transparent;
text-decoration: none;
color: var(--c-primary);
opacity: 0;
transform: translateY(4px);
/* Sıra önemli — transition-delay multi-value bu sıraya eşlenir */
transition:
background-color .18s ease,
box-shadow .26s ease,
border-color .2s ease,
opacity .24s ease,
transform .28s cubic-bezier(.2,.7,.3,1);
transition-delay: 0s, 0s, 0s, 0s, 0s;
}
.main-nav > ul > li.has-dropdown:hover .mp-row,
.main-nav > ul > li.has-dropdown:focus-within .mp-row {
opacity: 1;
transform: translateY(0);
/* bg/shadow/border = 0 (hover anında); opacity/transform = stagger (4-5. sıra) */
transition-delay:
0s,
0s,
0s,
calc(var(--i, 0) * 22ms + 40ms),
calc(var(--i, 0) * 22ms + 40ms);
}
.mp-row.is-current {
background: var(--menu-tone-soft);
}
.mp-row.is-current::before {
content: "";
position: absolute;
left: 3px;
top: 14px;
bottom: 14px;
width: 3px;
border-radius: 2px;
background: var(--menu-tone);
}
.mp-row-icon {
position: relative;
flex-shrink: 0;
width: 54px;
height: 54px;
border-radius: 50%;
border: 1px solid rgba(10,14,26,.05);
background:
var(--rt-grad, linear-gradient(150deg, #f7f8fb 0%, #eceef3 100%));
color: var(--rt-fg, #2f3540);
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 1.3rem;
margin-top: 0;
box-shadow:
0 1px 2px rgba(10,14,26,.05),
inset 0 1px 0 rgba(255,255,255,.85);
transition: color .22s ease, background .22s ease, box-shadow .25s ease, transform .3s cubic-bezier(.34,1.4,.5,1), border-color .22s ease;
}
.mp-row:hover .mp-row-icon,
.mp-row.is-current .mp-row-icon {
color: #fff;
border-color: transparent;
/* referans: solid dolu renkli daire (gradyan/halo yok) */
background: var(--rt-fg, var(--menu-tone));
box-shadow: 0 8px 16px -7px color-mix(in srgb, var(--rt-fg, var(--menu-tone)) 60%, transparent);
}
.mp-row:hover .mp-row-icon { transform: scale(1.04); }
/* Hizmet renk tonları — soft zemin + dolgun aksan */
/* hover'da satır = yumuşak tonlu dolgu kart (referans: lila tint blok) */
.mp-row:hover,
.mp-row.is-current {
background: linear-gradient(145deg,
color-mix(in srgb, var(--rt-fg, var(--menu-tone)) 9%, #fff) 0%,
color-mix(in srgb, var(--rt-fg, var(--menu-tone)) 16%, #fff) 100%);
border-color: transparent;
box-shadow: 0 10px 26px -16px color-mix(in srgb, var(--rt-fg, var(--menu-tone)) 50%, transparent);
}
.mp-row:hover .mp-row-title,
.mp-row.is-current .mp-row-title { color: var(--c-primary); }
/* Kategori eyebrow — referans sadeliği için gizli */
.mp-row-cat { display: none; }
.mp-row-body {
flex: 1;
display: flex;
flex-direction: column;
gap: 4px;
min-width: 0;
}
.mp-row-title {
display: inline-flex;
align-items: center;
gap: 8px;
font-family: 'Urbanist', 'Outfit', 'DM Sans', sans-serif;
font-weight: 700;
font-size: 1rem;
color: var(--c-primary);
line-height: 1.28;
letter-spacing: -0.008em;
margin-bottom: 1px;
transition: color .2s ease;
}
/* referans: hover'da başlık KOYU kalır (tonlu değil) */
.mp-row:hover .mp-row-title,
.mp-row.is-current .mp-row-title { color: var(--c-primary); }
.mp-row-desc {
font-family: 'Urbanist', 'Outfit', 'DM Sans', sans-serif;
font-weight: 400;
font-size: 0.85rem;
line-height: 1.55;
color: #8a909e;
letter-spacing: -0.002em;
}
.mp-row-badge {
display: none;
font-family: 'Urbanist', 'Outfit', sans-serif;
font-size: 0.56rem;
font-weight: 700;
letter-spacing: 0.07em;
text-transform: uppercase;
padding: 2px 7px;
border-radius: 999px;
line-height: 1.5;
flex-shrink: 0;
}
.mp-row-badge--mint { background: #d6f5e7; color: #0e7148; }
.mp-row-badge--yellow { background: #fef4d9; color: #8a6700; }
.mp-row-badge--pink { background: #ffe2e6; color: #b8253a; }
.mp-row-badge--lilac { background: #e8e3ff; color: #5841c7; }
/* Hover'da sağdan kayıp gelen ok */
.mp-row-arrow { display: none; }
/* Footer — tasarlanmış tonlu CTA şeridi (3. bölge) */
/* Footer CTA — küçük dolu pill buton */
/* Trust line — sosyal kanıt */
/* ===== Hizmetler paneli: sol liste + sağ öne çıkan kart ===== */
/* sağ öne çıkan kart — canlı gradient, marka karakteri */
/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
.mp-row { opacity: 1; transform: none; transition: background .18s ease; }
.mega-panel { transition: opacity .15s ease, visibility .15s ease; transform: none; }
}
/* Mobile — editorial 1-col fallback */
@media (max-width: 720px) {
.mp-inner--editorial { max-width: 100%; padding: 16px 14px 14px; }
.mp-grid--2 { grid-template-columns: 1fr; }
}
/* Sol panel çocuklarına stagger reveal */
/* Clean list (sağ kolon) — mono icons, tone reveal on hover */
/* Aktif item — şu an bulunduğun hizmet sayfası dropdown'da işaretli */
/* "Yeni" / "Popüler" rozet (item içinde, başlığın sağında) */
/* Dropdown footer CTA (panel altı eylem linki) */
/* Mobile: rich panel zaten ana CSS'te display:none olur */
/* Nav badge — "Uzmanlık" pill rozet */
.nav-badge {
display: inline-flex;
align-items: center;
padding: 2px 7px;
background: var(--c-pink-soft);
color: var(--c-pink);
border-radius: 999px;
font-size: 0.62rem;
font-weight: 700;
letter-spacing: 0.06em;
text-transform: uppercase;
line-height: 1.4;
margin-left: 2px;
}
/* ---------- SAĞ TARAF: dil + CTA ---------- */
.header-right {
display: inline-flex;
align-items: center;
gap: 10px;
flex-shrink: 0;
}
/* Dil segmented mini-pill */
.header-lang {
display: inline-flex;
align-items: center;
padding: 3px;
border-radius: 999px;
background: rgba(10,14,26,.05);
border: 1px solid rgba(10,14,26,.04);
}
.header-lang-opt {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 28px;
height: 24px;
padding: 0 8px;
border-radius: 999px;
font-size: 0.72rem;
font-weight: 700;
letter-spacing: 0.06em;
color: var(--c-muted);
transition: color .2s ease, background .2s ease;
line-height: 1;
text-decoration: none;
}
.header-lang-opt:hover { color: var(--c-primary); }
.header-lang-opt.is-active {
background: var(--c-primary);
color: #fff;
pointer-events: none;
}
/* CTA pill — solid primary, hover'da brand mavi */
.btn-cta-pill {
background: var(--c-primary);
color: #fff;
padding: 10px 18px;
border-radius: 999px;
font-weight: 600;
font-size: 0.86rem;
display: inline-flex;
align-items: center;
gap: 7px;
border: 1px solid var(--c-primary);
transition: background .22s ease, border-color .22s ease, transform .22s ease, box-shadow .22s ease;
flex-shrink: 0;
white-space: nowrap;
line-height: 1;
text-decoration: none;
letter-spacing: -.005em;
}
.btn-cta-pill i {
font-size: 0.92rem;
transition: transform .22s ease;
}
/* Masaüstü: uzun etiket; mobilde kısa etiketle değişir */
.btn-cta-pill .cta-label-short { display: none; }
.btn-cta-pill:hover {
background: var(--c-primary-2);
border-color: var(--c-primary-2);
color: #fff;
transform: translateY(-1px);
box-shadow: none;
}
.btn-cta-pill:hover i { transform: translate(3px,-3px); }
/* Hamburger (mobile only) */
.nav-toggle {
display: none;
background: transparent;
border: 0;
padding: 8px;
color: var(--c-primary);
}
.nav-toggle span {
display: block;
width: 26px;
height: 2px;
background: currentColor;
margin: 5px 0;
transition: all var(--transition);
}
/* Mega panel'i mobilde gizle (mobil drawer ayrı çalışıyor 12000+ media query'lerinde) */
@media (max-width: 1024px) {
.mega-panel { display: none; }
}
/* ==================== HERO + SLIDER ORTAK ALAN ==================== */
.hero-block {
background: transparent;
position: relative;
overflow: hidden;
}
/* ==================== HERO PRO ==================== */
.hero {
padding: calc(var(--header-h) + 56px) 0 80px;
background: transparent;
position: relative;
}
.hero-grid {
display: grid;
grid-template-columns: 1fr;
justify-items: center;
}
/* METİN — tek kolon, ortalı */
.hero-text {
position: relative;
z-index: 3;
max-width: 800px;
margin: 0 auto;
text-align: center;
}
.hero-eyebrow {
display: inline-flex;
align-items: center;
gap: 10px;
font-family: 'Urbanist', 'Outfit', sans-serif;
font-size: 0.74rem;
letter-spacing: 0.14em;
text-transform: uppercase;
font-weight: 700;
color: var(--c-muted);
margin-bottom: 22px;
justify-content: center;
}
.he-dot {
width: 7px; height: 7px;
border-radius: 50%;
background: var(--c-accent);
box-shadow: 0 0 0 4px rgba(31, 167, 232, .14);
flex-shrink: 0;
}
.he-pin {
font-size: .92rem;
color: var(--c-accent);
margin-right: -4px;
}
.hero-text h1 {
font-family: 'Urbanist', 'Outfit', sans-serif;
margin-bottom: 22px;
line-height: 1.06;
letter-spacing: -0.018em;
font-size: clamp(2.25rem, 4.6vw, 4rem);
font-weight: 900;
}
.hero-text h1 .highlight {
color: var(--c-accent);
font-weight: 900;
position: relative;
white-space: nowrap;
display: inline-block;
padding-bottom: .18em;
}
.hero-text h1 .highlight::after {
content: '';
position: absolute;
left: -3%;
right: -3%;
bottom: -.08em;
height: .32em;
background-image: url("data:image/svg+xml;utf8,");
background-repeat: no-repeat;
background-size: 100% 100%;
}
.hero-text p.lead {
font-size: 1.05rem;
margin: 0 auto 28px;
max-width: 680px;
color: var(--c-muted);
line-height: 1.6;
}
.hero-trust {
display: inline-flex;
flex-wrap: wrap;
gap: 0;
padding: 16px 0;
margin: 0 0 28px;
border-top: 1px solid var(--c-border);
border-bottom: 1px solid var(--c-border);
justify-content: center;
}
.ht-item {
display: flex;
flex-direction: column;
gap: 4px;
padding: 2px 22px;
border-left: 1px solid var(--c-border);
}
.ht-item:first-child {
padding-left: 0;
border-left: 0;
}
.ht-lbl {
font-family: 'Urbanist', 'Outfit', sans-serif;
font-size: 0.6rem;
letter-spacing: 0.18em;
text-transform: uppercase;
font-weight: 700;
color: var(--c-muted);
}
.ht-val {
display: inline-flex;
align-items: center;
gap: 6px;
font-family: 'Urbanist', 'Outfit', sans-serif;
font-size: 0.88rem;
font-weight: 700;
color: #1f2937;
letter-spacing: -0.005em;
}
.ht-val i {
color: var(--c-accent);
font-size: 1rem;
}
.hero-actions {
display: flex;
gap: 12px;
flex-wrap: wrap;
justify-content: center;
}
.btn-lg {
padding: 16px 30px;
font-size: 1rem;
border-radius: 999px;
}
.btn-ghost-lg {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 15px 26px;
border-radius: 999px;
border: 1.5px solid var(--c-border);
background: #fff;
color: var(--c-primary);
font-family: 'Urbanist', 'Outfit', sans-serif;
font-weight: 700;
font-size: 0.95rem;
text-decoration: none;
transition: all .22s ease;
}
.btn-ghost-lg:hover {
border-color: var(--c-primary);
color: var(--c-primary);
transform: translateY(-2px);
}
/* SAĞ — KART KOMPOZİSYONU */
.hero-stage {
position: relative;
min-height: 520px;
z-index: 2;
}
.hs-card {
background: #fff;
border: 1px solid var(--c-border);
border-radius: 18px;
box-shadow:
0 30px 70px -28px rgba(15, 28, 77, .22),
0 8px 18px -10px rgba(15, 28, 77, .06);
position: absolute;
}
/* Arka plan glow — sahnenin altında yumuşak ışıltı */
.hs-glow {
position: absolute;
top: 12%;
right: -8%;
width: 60%;
aspect-ratio: 1 / 1;
background: radial-gradient(circle at center, rgba(109, 91, 216, .12) 0%, rgba(109, 91, 216, 0) 65%);
filter: blur(8px);
z-index: 0;
pointer-events: none;
}
/* Ana dashboard kart */
.hs-dash {
--menu-tone: #6D5BD8;
--menu-tone-soft: rgba(201, 182, 255, .18);
top: 30px;
right: 0;
width: 94%;
max-width: 440px;
padding: 22px 24px 18px;
overflow: hidden;
z-index: 2;
}
/* Sol kenar accent — biraz daha kalın ve gradient sona kadar */
.hs-dash::before {
content: "";
position: absolute;
left: 0; top: 0; bottom: 0;
width: 4px;
background: linear-gradient(to bottom, var(--menu-tone) 0%, rgba(109,91,216,.45) 55%, transparent 100%);
}
.hs-dash-head {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 12px;
margin-bottom: 16px;
}
.hs-dash-meta { display: flex; flex-direction: column; gap: 6px; }
.hs-eyebrow {
display: inline-flex;
align-items: center;
gap: 8px;
font-family: 'Urbanist', 'Outfit', sans-serif;
font-size: 0.66rem;
font-weight: 700;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--menu-tone);
}
.hs-live-dot {
width: 7px; height: 7px;
border-radius: 50%;
background: #10b981;
box-shadow: 0 0 0 3px rgba(16, 185, 129, .22);
animation: hsPulse 1.8s ease-in-out infinite;
}
@keyframes hsPulse {
0%, 100% { box-shadow: 0 0 0 3px rgba(16, 185, 129, .22); }
50% { box-shadow: 0 0 0 7px rgba(16, 185, 129, .04); }
}
.hs-dash-title {
font-family: 'Urbanist', 'Outfit', sans-serif;
font-size: 1.05rem;
font-weight: 700;
letter-spacing: -0.01em;
color: var(--c-primary);
margin: 0;
}
.hs-status {
display: inline-flex;
align-items: center;
gap: 5px;
padding: 5px 10px;
border-radius: 999px;
font-family: 'Urbanist', 'Outfit', sans-serif;
font-size: 0.72rem;
font-weight: 700;
background: rgba(16, 185, 129, .12);
color: #047857;
border: 1px solid rgba(16, 185, 129, .25);
flex-shrink: 0;
}
.hs-status i { font-size: .82rem; }
/* Chart */
.hs-chart {
position: relative;
margin: 4px 0 14px;
padding: 10px 6px 6px;
background: linear-gradient(180deg, #fafaff 0%, #ffffff 100%);
border: 1px solid #eef0f4;
border-radius: 12px;
}
.hs-chart svg {
display: block;
width: 100%;
height: 90px;
}
.hs-chart-line {
stroke-dasharray: 600;
stroke-dashoffset: 600;
animation: hsDraw 1.6s cubic-bezier(.2, .7, .3, 1) forwards;
animation-delay: .3s;
}
.hs-chart-area {
opacity: 0;
animation: hsFadeIn .7s ease forwards;
animation-delay: 1.1s;
}
.hs-chart-dot {
opacity: 0;
animation: hsFadeIn .4s ease forwards, hsDotPulse 1.8s ease-in-out infinite 2.2s;
animation-delay: 1.7s, 2.2s;
}
@keyframes hsDraw { to { stroke-dashoffset: 0; } }
@keyframes hsFadeIn { to { opacity: 1; } }
@keyframes hsDotPulse {
0%, 100% { r: 4; }
50% { r: 5.5; }
}
.hs-chart-tag {
position: absolute;
top: 6px;
left: calc(34% + 4px);
font-family: 'Urbanist', 'Outfit', sans-serif;
font-size: 0.56rem;
letter-spacing: 0.12em;
text-transform: uppercase;
font-weight: 700;
color: var(--menu-tone);
background: #fff;
padding: 2px 6px;
border-radius: 4px;
opacity: 0;
animation: hsFadeIn .5s ease forwards .9s;
}
.hs-chart-axis {
display: flex;
justify-content: space-between;
padding: 6px 4px 2px;
font-family: 'Urbanist', 'Outfit', sans-serif;
font-size: 0.58rem;
font-weight: 600;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--c-muted);
}
/* KPI grid */
.hs-kpis {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 8px;
margin-bottom: 14px;
}
.hs-kpi {
background: #fafafa;
border: 1px solid var(--c-border);
border-radius: 10px;
padding: 11px 12px 12px;
display: flex;
flex-direction: column;
gap: 5px;
opacity: 0;
transform: translateY(6px);
animation: hsRise .5s cubic-bezier(.2, .7, .3, 1) forwards;
}
.hs-kpi:nth-child(1) { animation-delay: 1.4s; }
.hs-kpi:nth-child(2) { animation-delay: 1.55s; }
.hs-kpi:nth-child(3) { animation-delay: 1.7s; }
@keyframes hsRise { to { opacity: 1; transform: translateY(0); } }
.hs-kpi-lbl {
font-family: 'Urbanist', 'Outfit', sans-serif;
font-size: 0.58rem;
letter-spacing: 0.14em;
text-transform: uppercase;
font-weight: 700;
color: var(--c-muted);
}
.hs-kpi-val {
font-family: 'Urbanist', 'Outfit', sans-serif;
font-size: 1rem;
font-weight: 800;
color: var(--c-primary);
letter-spacing: -0.015em;
display: inline-flex;
align-items: center;
gap: 5px;
line-height: 1.1;
}
.hs-kpi-pos { color: #047857; }
.hs-kpi-pos i { font-size: .82rem; color: #10b981; }
/* Dashboard foot */
.hs-dash-foot {
padding-top: 12px;
border-top: 1px dashed var(--c-border);
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
}
.hs-foot-trust {
display: inline-flex;
align-items: center;
gap: 6px;
font-family: 'Urbanist', 'Outfit', sans-serif;
font-size: 0.74rem;
color: var(--c-muted);
font-weight: 500;
}
.hs-foot-trust i { color: var(--menu-tone); font-size: .92rem; }
.hs-foot-meta {
font-family: 'Urbanist', 'Outfit', sans-serif;
font-size: 0.7rem;
color: var(--c-muted);
font-weight: 500;
}
/* Toast notification — sağ üst */
.hs-toast {
position: absolute;
top: -14px;
right: -14px;
display: flex;
align-items: center;
gap: 11px;
padding: 11px 16px 11px 11px;
background: #fff;
border: 1px solid var(--c-border);
border-radius: 14px;
box-shadow:
0 22px 44px -16px rgba(15, 28, 77, .28),
0 6px 14px -6px rgba(15, 28, 77, .10);
z-index: 4;
max-width: 240px;
opacity: 0;
transform: translateX(20px) scale(.92);
animation: hsToastIn .6s cubic-bezier(.2, .7, .3, 1) forwards;
animation-delay: 1.9s;
}
@keyframes hsToastIn {
to { opacity: 1; transform: translateX(0) scale(1); }
}
.hs-toast-ic {
width: 32px; height: 32px;
border-radius: 50%;
background: #10b981;
color: #fff;
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 1rem;
flex-shrink: 0;
}
.hs-toast-body { display: flex; flex-direction: column; line-height: 1.2; }
.hs-toast-title {
font-family: 'Urbanist', 'Outfit', sans-serif;
font-size: 0.82rem;
font-weight: 700;
color: var(--c-primary);
}
.hs-toast-sub {
font-family: 'Urbanist', 'Outfit', sans-serif;
font-size: 0.68rem;
color: var(--c-muted);
margin-top: 1px;
}
/* Müşteri notu — sarı post-it, Caveat (dashboard'ın alt-sol köşesine "yapıştırılmış") */
.hs-card-note {
bottom: 8px;
left: -22px;
top: auto;
width: 210px;
padding: 14px 16px 12px;
transform: rotate(-3.5deg);
background: #FFFBEA;
border-color: rgba(234, 179, 8, .25);
box-shadow:
0 22px 44px -16px rgba(180, 83, 9, .35),
0 6px 14px -4px rgba(180, 83, 9, .14);
z-index: 3;
transition: transform .35s ease;
}
.hs-card-note:hover {
transform: rotate(-1.5deg) translateY(-3px);
}
.hs-note-tag {
display: inline-block;
font-family: 'Urbanist', 'Outfit', sans-serif;
font-size: 0.56rem;
letter-spacing: 0.16em;
text-transform: uppercase;
font-weight: 700;
color: #b45309;
margin-bottom: 4px;
}
.hs-card-note p {
font-family: 'Caveat', cursive;
font-size: 1.3rem;
line-height: 1.18;
color: #1f2937;
margin: 0 0 4px;
}
.hs-note-from {
font-family: 'Urbanist', 'Outfit', sans-serif;
font-size: 0.72rem;
color: #92400e;
font-weight: 500;
}
/* RESPONSIVE */
@media (max-width: 720px) {
.hero-trust { gap: 10px 0; }
.ht-item { padding: 6px 16px; }
}
@media (max-width: 600px) {
.hero { padding: calc(var(--header-h) + 32px) 0 64px; }
.hero-actions .btn-lg,
.hero-actions .btn-ghost-lg { width: 100%; justify-content: center; }
}
@media (prefers-reduced-motion: reduce) {
.hs-chart-line { animation: none; stroke-dashoffset: 0; }
.hs-chart-area,
.hs-chart-dot,
.hs-chart-tag,
.hs-kpi,
.hs-toast { animation: none; opacity: 1; transform: none; }
.hs-live-dot,
.hs-glow { animation: none; }
}
/* ==================== HAKKIMIZDA SAYFASI ==================== */
.about-crumb {
margin-top: var(--header-h);
padding: 36px 0 24px;
border-bottom: 1px solid var(--c-border);
font-family: 'Urbanist', 'Outfit', sans-serif;
}
.about-crumb .container {
display: flex;
align-items: center;
justify-content: center;
gap: 16px;
font-size: 1rem;
}
.ab-crumb-home {
color: var(--c-muted);
font-weight: 500;
text-decoration: none;
letter-spacing: .005em;
transition: color .2s ease;
}
.ab-crumb-home:hover { color: var(--c-accent); }
.ab-crumb-dot {
width: 6px;
height: 6px;
border-radius: 50%;
background: var(--c-accent);
box-shadow: 0 0 0 4px rgba(156, 163, 175,.15);
font-size: 0;
line-height: 0;
}
.ab-crumb-current {
color: var(--c-primary);
font-weight: 700;
letter-spacing: -0.01em;
}
.about-page-head {
padding: 40px 0 10px;
text-align: center;
}
.ab-pill {
display: inline-flex;
align-items: center;
gap: 10px;
padding: 10px 22px 10px 18px;
border-radius: 999px;
background: linear-gradient(135deg, rgba(156, 163, 175,0.10), rgba(156, 163, 175,0.04));
border: 1px solid rgba(156, 163, 175,0.25);
font-family: 'Urbanist', 'Outfit', sans-serif;
font-weight: 600;
font-size: .92rem;
color: var(--c-primary);
box-shadow: 0 6px 20px rgba(156, 163, 175,0.12);
backdrop-filter: blur(6px);
transition: transform .25s ease, box-shadow .25s ease;
}
.ab-pill:hover {
transform: translateY(-2px);
box-shadow: 0 12px 28px rgba(156, 163, 175,0.18);
}
.ab-pill-dot {
width: 8px; height: 8px;
border-radius: 50%;
background: var(--c-accent);
box-shadow: 0 0 0 4px rgba(156, 163, 175,0.18);
animation: ab-pulse 2s infinite;
}
@keyframes ab-pulse {
0%, 100% { box-shadow: 0 0 0 4px rgba(156, 163, 175,0.18); }
50% { box-shadow: 0 0 0 7px rgba(156, 163, 175,0.06); }
}
.ab-pill-text {
letter-spacing: 0.02em;
}
.ab-pill-emoji {
font-size: 1.05rem;
line-height: 1;
margin-left: 2px;
transform: translateY(-1px);
}
.about-hero { padding: 50px 0 0; }
.about-hero-banner {
position: relative;
border-radius: 16px;
overflow: hidden;
background:
linear-gradient(rgba(28,18,12,0.55), rgba(28,18,12,0.6)),
url('https://images.unsplash.com/photo-1531973576160-7125cd663d86?w=1600&q=70&auto=format&fit=crop') center/cover no-repeat;
min-height: 460px;
display: flex;
align-items: flex-start;
justify-content: center;
padding: 60px 60px 120px;
}
.about-hero-content {
position: relative;
z-index: 2;
max-width: 900px;
text-align: center;
color: #fff;
}
.about-hero-title {
font-family: 'Urbanist', 'Outfit', sans-serif;
font-size: clamp(2.4rem, 5vw, 4rem);
font-weight: 800;
margin-bottom: 22px;
letter-spacing: -0.02em;
color: #fff;
}
.about-hero-text {
font-size: 1rem;
line-height: 1.8;
color: rgba(255,255,255,0.92);
max-width: 800px;
margin: 0 auto;
}
.about-card-section {
padding: 0 0 80px;
margin-top: -120px;
position: relative;
z-index: 3;
}
.about-card {
background: #fff;
border-radius: 16px;
padding: 70px 80px;
box-shadow: 0 30px 60px rgba(10,14,26,0.06);
}
.ab-stats {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 30px;
margin-bottom: 60px;
padding-bottom: 50px;
border-bottom: 1px solid var(--c-border);
}
.ab-stat { text-align: center; }
.ab-stat-num {
font-family: 'Bricolage Grotesque', 'DM Sans', sans-serif;
font-size: clamp(2.2rem, 3.4vw, 3rem);
font-weight: 700;
color: var(--c-accent);
letter-spacing: -0.025em;
line-height: 1;
margin-bottom: 12px;
}
.ab-stat-lbl {
font-size: 0.78rem;
font-weight: 700;
color: var(--c-muted);
letter-spacing: 0.1em;
text-transform: uppercase;
}
.ab-body {
text-align: center;
max-width: 880px;
margin: 0 auto;
}
.ab-body p {
font-size: 1rem;
line-height: 1.85;
color: var(--c-muted);
margin-bottom: 22px;
}
.ab-body p:last-child { margin-bottom: 0; }
@media (max-width: 880px) {
.about-hero-banner { padding: 70px 28px; min-height: 380px; }
.about-card { padding: 50px 28px; }
.ab-stats { grid-template-columns: repeat(2, 1fr); gap: 28px; }
.about-card-section { margin-top: -80px; }
}
/* ==================== TRAFİK & SATIŞ BÖLÜMÜ ==================== */
.traffic-section {
padding: 0 0 100px;
position: relative;
}
.traffic-grid {
display: grid;
grid-template-columns: 1fr 1.35fr;
gap: 60px;
align-items: center;
}
.traffic-title {
font-family: 'Bricolage Grotesque', 'DM Sans', sans-serif;
font-size: clamp(2.1rem, 4.6vw, 3.6rem);
font-weight: 700;
font-stretch: 90%;
line-height: 1.05;
letter-spacing: -0.025em;
margin-bottom: 22px;
color: var(--c-primary);
}
.traffic-title .highlight {
color: var(--c-accent);
font-weight: 800;
position: relative;
white-space: nowrap;
display: inline-block;
padding-bottom: .12em;
}
.traffic-title .highlight::after {
content: '';
position: absolute;
left: -3%; right: -3%;
bottom: -.05em;
height: .28em;
background-image: url("data:image/svg+xml;utf8,");
background-repeat: no-repeat;
background-size: 100% 100%;
}
.traffic-lead {
font-size: 1.05rem;
color: var(--c-muted);
margin-bottom: 44px;
max-width: 460px;
}
.traffic-stats {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 36px 48px;
max-width: 480px;
}
.ts-num {
font-family: 'Bricolage Grotesque', 'DM Sans', sans-serif;
font-size: clamp(2.4rem, 3.2vw, 3rem);
font-weight: 700;
color: var(--c-accent);
letter-spacing: -0.025em;
line-height: 1;
margin-bottom: 8px;
}
.ts-lbl {
font-size: 0.78rem;
font-weight: 600;
color: var(--c-muted);
letter-spacing: 0.08em;
text-transform: uppercase;
}
.traffic-visual {
position: relative;
}
.traffic-visual img {
width: 110%;
max-width: 880px;
height: auto;
margin-left: auto;
margin-right: -8%;
margin-top: -300px;
display: block;
transform: translateY(165px);
}
@media (max-width: 980px) {
.traffic-grid { grid-template-columns: 1fr; gap: 40px; }
.traffic-visual img {
max-width: 600px;
margin: 0 auto;
margin-top: 0;
margin-right: auto;
transform: none;
width: 100%;
}
}
@media (max-width: 540px) {
.traffic-stats { gap: 28px; }
.traffic-section { padding: 60px 0 80px; }
}
/* ==================== GOOGLE PARTNER BÖLÜMÜ ==================== */
.partner-section {
padding: 60px 0 100px;
position: relative;
}
.partner-grid {
display: grid;
grid-template-columns: 1fr 1.15fr;
gap: 70px;
align-items: center;
}
.partner-text {
min-width: 0;
padding-left: 40px;
}
.partner-visual {
position: relative;
}
.partner-visual img {
width: 145%;
max-width: 1080px;
height: auto;
margin-left: -32%;
display: block;
}
.partner-title {
font-family: 'Bricolage Grotesque', 'DM Sans', sans-serif;
font-size: clamp(2.1rem, 4.4vw, 3.4rem);
font-weight: 700;
font-stretch: 90%;
line-height: 1.1;
letter-spacing: -0.025em;
margin-bottom: 24px;
color: var(--c-primary);
width: max-content;
max-width: none;
white-space: normal;
}
.partner-lead { max-width: 600px; }
.partner-title .highlight {
color: var(--c-accent);
font-weight: 800;
position: relative;
white-space: nowrap;
display: inline-block;
padding-bottom: .12em;
}
.partner-title .highlight::after {
content: '';
position: absolute;
left: -3%; right: -3%;
bottom: -.05em;
height: .28em;
background-image: url("data:image/svg+xml;utf8,");
background-repeat: no-repeat;
background-size: 100% 100%;
}
.partner-lead {
font-size: 1rem;
color: var(--c-muted);
line-height: 1.75;
margin-bottom: 36px;
}
.partner-actions { display: flex; gap: 16px; }
.btn-partner {
display: inline-flex;
align-items: center;
gap: 14px;
padding: 16px 32px;
background: var(--c-primary);
color: #fff;
border-radius: 999px;
font-family: 'Urbanist', 'Outfit', sans-serif;
font-weight: 600;
font-size: 1rem;
text-decoration: none;
border: 1px solid var(--c-primary);
transition: all .25s ease;
}
.btn-partner:hover {
background: var(--c-accent);
color: #fff;
border-color: var(--c-accent);
transform: translateY(-2px);
box-shadow: 0 14px 32px rgba(156, 163, 175, 0.28);
}
.btn-partner i {
transition: transform .25s ease;
}
.btn-partner:hover i {
transform: translateX(4px);
}
/* Reverse: text on left, image on right (Meta Partner) */
.partner-grid-reverse {
grid-template-columns: 1.15fr 1fr;
}
.partner-grid-reverse .partner-text { padding-left: 0; padding-right: 40px; margin-left: -100px; }
.partner-visual-right img {
width: 145%;
max-width: 1080px;
margin-left: -20%;
margin-right: -12%;
}
/* Masaüstünde Google Partner: görsel solda, metin sağda (orijinal layout) */
@media (min-width: 981px) {
.partner-grid:not(.partner-grid-reverse) > .partner-visual { order: 1; }
.partner-grid:not(.partner-grid-reverse) > .partner-text { order: 2; }
}
@media (max-width: 980px) {
.partner-grid {
display: flex !important;
flex-direction: column !important;
gap: 16px;
}
.partner-grid > .partner-text,
.partner-grid > .partner-visual,
.partner-grid > .partner-visual-right {
order: unset !important;
}
.partner-text { padding-left: 0; }
.partner-visual,
.partner-visual-right { width: 100%; display: flex; justify-content: center; }
.partner-visual img,
.partner-visual-right img {
width: 100%;
max-width: 560px;
margin: 0 auto;
display: block;
}
.partner-grid-reverse .partner-text { padding-right: 0; margin-left: 0; }
}
@media (max-width: 600px) {
.partner-section {
padding: 28px 0 56px;
}
.partner-grid {
gap: 32px;
}
.partner-title {
font-size: clamp(1.8rem, 7.4vw, 2.3rem);
letter-spacing: -0.012em;
line-height: 1.12;
margin-bottom: 18px;
width: 100%;
}
.partner-title .highlight::after {
height: .24em;
}
.partner-lead {
font-size: .98rem;
line-height: 1.65;
margin-bottom: 24px;
max-width: 100%;
}
.partner-lead + .partner-lead {
margin-top: -10px;
}
.partner-actions {
gap: 10px;
}
.btn-partner {
padding: 13px 24px;
font-size: .92rem;
gap: 10px;
}
.partner-visual,
.partner-visual-right {
margin-top: 8px;
overflow: hidden;
}
.partner-visual img,
.partner-visual-right img {
max-width: 360px;
transform: none !important;
margin: 0 auto !important;
}
}
@media (max-width: 380px) {
.partner-title {
font-size: 1.7rem;
}
.partner-lead {
font-size: .92rem;
}
.btn-partner {
padding: 12px 22px;
font-size: .88rem;
}
.partner-visual img,
.partner-visual-right img {
max-width: 300px;
}
}
/* ==================== BLOG BÖLÜMÜ ==================== */
.blog-section {
padding: 60px 0 100px;
position: relative;
}
.blog-grid {
display: grid;
grid-template-columns: 1fr 1.45fr;
gap: 60px;
align-items: center;
}
.blog-intro { padding-right: 30px; }
.blog-title {
font-family: 'Bricolage Grotesque', 'DM Sans', sans-serif;
font-size: clamp(2.4rem, 4.4vw, 3.6rem);
font-weight: 700;
font-stretch: 90%;
color: var(--c-primary);
margin-bottom: 22px;
letter-spacing: -0.025em;
}
.blog-lead {
font-size: 1rem;
color: var(--c-muted);
line-height: 1.75;
margin-bottom: 36px;
max-width: 460px;
}
.blog-slider-wrap {
min-width: 0;
position: relative;
width: calc(100% + 80px);
}
.blog-swiper {
overflow: visible;
padding-bottom: 8px;
clip-path: inset(-200px -200vw -200px 0);
}
.blog-card {
display: block;
background: #fff;
border-radius: 18px;
overflow: hidden;
border: 1px solid var(--c-border);
text-decoration: none;
color: inherit;
transition: transform .3s ease, box-shadow .3s ease;
height: 100%;
}
.blog-card:hover {
transform: translateY(-4px);
box-shadow: 0 24px 48px rgba(10,14,26,0.08);
}
.blog-card-img {
aspect-ratio: 16 / 11;
background: #f4f6fa;
overflow: hidden;
display: flex;
align-items: center;
justify-content: center;
}
.blog-card-img img {
width: 100%; height: 100%;
object-fit: cover;
display: block;
transition: transform .5s ease;
}
.blog-card:hover .blog-card-img img { transform: scale(1.04); }
.blog-card-icon {
font-size: 4.5rem;
color: rgba(10,14,26,0.85);
line-height: 1;
}
.blog-tone-green { background: #9ca3af; }
.blog-tone-green .blog-card-icon { color: #0a3a23; }
.blog-tone-peach { background: #fde2c4; }
.blog-tone-peach .blog-card-icon { color: #b06a32; }
.blog-tone-blue { background: #d4e6ff; }
.blog-tone-blue .blog-card-icon { color: #1e3a8a; }
.blog-tone-pink { background: #ffd6e0; }
.blog-tone-pink .blog-card-icon { color: #9d174d; }
.blog-tone-yellow { background: #fff3b0; }
.blog-tone-yellow .blog-card-icon { color: #854d0e; }
.blog-tone-mint { background: #c7f0d8; }
.blog-tone-mint .blog-card-icon { color: #14532d; }
.blog-card-body { padding: 30px 32px 34px; }
.blog-card-title {
font-family: 'Urbanist', 'Outfit', sans-serif;
font-size: 1.25rem;
font-weight: 700;
color: var(--c-primary);
margin-bottom: 14px;
line-height: 1.35;
}
.blog-card-excerpt {
font-size: .92rem;
color: var(--c-muted);
line-height: 1.65;
margin: 0;
}
.blog-pagination {
position: static;
margin-top: 28px;
text-align: center;
}
.blog-pagination .swiper-pagination-bullet {
width: 8px; height: 8px;
background: var(--c-primary);
opacity: .25;
margin: 0 5px !important;
transition: all .25s ease;
}
.blog-pagination .swiper-pagination-bullet-active {
width: 26px; opacity: 1;
background: var(--c-primary);
border-radius: 999px;
}
@media (max-width: 980px) {
.blog-grid { grid-template-columns: 1fr; gap: 40px; }
.blog-intro { padding-right: 0; }
}
/* ==================== SECTION BRIDGE MARQUEE — dev kelime şeridi (slider tarzı) ==================== */
.dx-marquee {
position: relative;
width: 100%;
overflow: hidden;
padding: clamp(10px, 1.5vw, 20px) 0;
margin: clamp(-130px, -9vw, -70px) 0;
display: flex;
align-items: center;
pointer-events: none;
z-index: 2;
background: var(--c-bg);
-webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.dx-marquee-track {
display: flex;
align-items: center;
gap: clamp(28px, 4vw, 52px);
white-space: nowrap;
width: max-content;
animation: dxMarqueeScroll 50s linear infinite;
}
.dx-marquee-word {
font-family: 'Bricolage Grotesque', 'DM Sans', sans-serif;
font-size: clamp(4rem, 11vw, 9.5rem);
font-weight: 900;
color: rgba(31, 167, 232, 0.10);
letter-spacing: -0.018em;
line-height: 1;
text-transform: lowercase;
}
.dx-marquee-word:nth-of-type(3n+1) { color: rgba(10, 14, 26, 0.06); }
.dx-marquee-dot {
color: rgba(31, 167, 232, 0.22);
font-size: clamp(1.6rem, 4vw, 3rem);
line-height: 1;
display: inline-block;
transform: translateY(-0.18em);
}
@keyframes dxMarqueeScroll {
from { transform: translateX(0); }
to { transform: translateX(-50%); }
}
/* bölüm arası varyant — komşu bölüm boşluğuna binerek kompakt durur */
.dx-marquee-sec { margin: clamp(-56px, -4.5vw, -28px) 0; padding: clamp(2px, 0.6vw, 6px) 0; }
.dx-marquee-sec .dx-marquee-word { font-size: clamp(3rem, 7.5vw, 6rem); }
.dx-marquee-sec .dx-marquee-dot { width: clamp(10px, 1vw, 16px); height: clamp(10px, 1vw, 16px); }
.dx-marquee-up { margin-top: clamp(-120px, -10vw, -65px); margin-bottom: clamp(28px, 3.5vw, 48px); }
/* sağa kayan varyant */
.dx-marquee-rev .dx-marquee-track { animation-direction: reverse; }
@media (max-width: 720px) {
.dx-marquee-track { gap: 24px; animation-duration: 32s; }
}
/* Mobilde TÜM bölüm-arası kayan yazılar TEK TİP: aynı boyut + aynı dar boşluk
(önce düz=2.4rem/sec=2.1rem farklıydı, dot'lar da farklı stildeydi → karmaşa) */
@media (max-width: 720px) {
.dx-marquee,
.dx-marquee-sec { margin: 4px 0; padding: 4px 0; }
.dx-marquee-up { margin-top: 4px; margin-bottom: 12px; }
/* hepsi aynı kelime boyutu */
.dx-marquee-word,
.dx-marquee-sec .dx-marquee-word { font-size: 2.1rem; }
/* hepsi aynı dot (sec'in width/height kutusunu da ez) */
.dx-marquee-dot,
.dx-marquee-sec .dx-marquee-dot {
font-size: 1.1rem;
width: auto;
height: auto;
border-radius: 0;
background: none;
}
/* hepsinde aynı dar boşluk */
.dx-marquee-track { gap: 14px; }
}
/* ==================== HERO BACKGROUND MARQUEE — hero içine absolute, sadece sliderde görünür ==================== */
.hero-block { position: relative; overflow: hidden; }
.hero-bg-marquee {
position: absolute;
inset: 0;
display: flex;
align-items: center;
pointer-events: none;
z-index: 0;
-webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.hbm-track {
display: flex;
align-items: center;
gap: 48px;
white-space: nowrap;
width: max-content;
animation: hbmScroll 40s linear infinite;
}
.hbm-word {
font-family: 'Bricolage Grotesque', 'DM Sans', sans-serif;
font-size: clamp(5rem, 14vw, 12rem);
font-weight: 900;
color: rgba(31, 167, 232, 0.08); /* brand mavi, çok soluk */
letter-spacing: -0.018em;
line-height: 1;
text-transform: lowercase;
}
.hbm-word:nth-of-type(3n+1) { color: rgba(10, 14, 26, 0.05); } /* arada koyu silüet */
.hbm-dot {
color: rgba(31, 167, 232, 0.18);
font-size: clamp(2rem, 5vw, 4rem);
line-height: 1;
display: inline-block;
transform: translateY(-0.18em);
}
/* Hero içeriği marquee'nin önünde durmalı */
.hero.hero-pro { position: relative; z-index: 2; }
@keyframes hbmScroll {
from { transform: translate(0, 0); }
to { transform: translate(-50%, 0); }
}
@media (max-width: 720px) {
.hbm-track { gap: 28px; animation-duration: 26s; }
}
/* ==================== HOME CONTACT — klasik 2 kolon (info + form) ==================== */
.home-contact {
padding: 90px 0 100px;
position: relative;
background: var(--c-bg);
}
.home-contact-head {
text-align: center;
max-width: 760px;
margin: 0 auto 56px;
}
.home-contact-title {
font-family: 'Bricolage Grotesque', 'DM Sans', sans-serif;
font-size: clamp(2rem, 4vw, 2.8rem);
font-weight: 700;
color: var(--c-primary);
line-height: 1.15;
letter-spacing: -0.025em;
margin: 0 0 18px;
}
.home-contact-title .highlight {
color: var(--c-accent);
font-weight: 800;
}
.home-contact-lead {
font-size: 1rem;
color: var(--c-muted);
line-height: 1.7;
margin: 0;
}
.home-contact-grid {
display: grid;
grid-template-columns: 0.85fr 1.4fr;
gap: 32px;
align-items: stretch;
}
/* Sol bilgi kartı */
.hc-info {
background: #fff;
border: 1px solid var(--c-border);
border-radius: 18px;
padding: 32px 30px;
display: flex;
flex-direction: column;
gap: 22px;
box-shadow: var(--shadow-sm);
position: relative;
}
.hc-info::before {
content: '';
position: absolute;
top: 0; left: 0; right: 0;
height: 4px;
background: var(--c-accent);
border-radius: 18px 18px 0 0;
}
.hc-info-item {
display: flex;
align-items: flex-start;
gap: 14px;
}
.hc-info-ic {
width: 42px;
height: 42px;
border-radius: 12px;
background: var(--c-accent-soft);
color: var(--c-accent);
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 1.05rem;
flex-shrink: 0;
}
.hc-info-body {
display: flex;
flex-direction: column;
gap: 4px;
min-width: 0;
}
.hc-info-label {
font-size: 0.78rem;
font-weight: 700;
color: var(--c-muted);
text-transform: uppercase;
letter-spacing: 0.08em;
}
.hc-info-val {
font-size: 0.96rem;
color: var(--c-primary);
font-weight: 600;
line-height: 1.5;
word-break: break-word;
}
a.hc-info-val { transition: color .2s ease; }
a.hc-info-val:hover { color: var(--c-accent); }
/* Sağ form kartı */
.hc-form {
background: #fff;
border: 1px solid var(--c-border);
border-radius: 18px;
padding: 36px 36px 32px;
box-shadow: var(--shadow-sm);
position: relative;
}
.hc-form::before {
content: '';
position: absolute;
top: 0; left: 0; right: 0;
height: 4px;
background: var(--c-accent);
border-radius: 18px 18px 0 0;
}
.hc-hp {
position: absolute;
left: -9999px;
width: 1px;
height: 1px;
opacity: 0;
}
.hc-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 18px 20px;
}
.hc-field {
display: flex;
flex-direction: column;
gap: 6px;
position: relative;
}
.hc-field-full { grid-column: 1 / -1; }
.hc-label {
font-size: 0.82rem;
font-weight: 600;
color: var(--c-primary);
letter-spacing: 0.01em;
}
.hc-field input,
.hc-field textarea {
width: 100%;
background: #fff;
border: 1.5px solid var(--c-border);
border-radius: 10px;
padding: 12px 14px;
font-family: 'Urbanist', 'Outfit', sans-serif;
font-size: 0.95rem;
color: var(--c-primary);
transition: border-color .2s ease, box-shadow .2s ease;
resize: vertical;
}
.hc-field textarea { min-height: 130px; }
.hc-field input:focus,
.hc-field textarea:focus {
outline: none;
border-color: var(--c-accent);
box-shadow: 0 0 0 3px var(--c-accent-soft);
}
.hc-field.is-invalid input,
.hc-field.is-invalid textarea {
border-color: var(--c-danger);
background: #fff5f5;
}
.hc-field .hc-err {
color: #b91c1c;
font-size: 0.78rem;
font-weight: 600;
margin-top: 2px;
}
.hc-kvkk {
display: flex;
align-items: flex-start;
gap: 10px;
margin: 22px 0 0;
font-size: 0.86rem;
color: var(--c-muted);
line-height: 1.55;
cursor: pointer;
}
.hc-kvkk input {
appearance: none;
-webkit-appearance: none;
width: 18px;
height: 18px;
border: 1.5px solid var(--c-border);
border-radius: 4px;
background: #fff;
margin: 2px 0 0;
cursor: pointer;
flex-shrink: 0;
display: inline-grid;
place-content: center;
transition: border-color .15s ease, background .15s ease;
}
.hc-kvkk input::before {
content: "";
width: 10px;
height: 10px;
transform: scale(0);
transition: transform .15s ease;
background: var(--c-accent);
border-radius: 2px;
}
.hc-kvkk input:checked {
border-color: var(--c-accent);
}
.hc-kvkk input:checked::before { transform: scale(1); }
.hc-kvkk strong { color: var(--c-primary); font-weight: 700; }
.hc-kvkk.is-invalid input { border-color: var(--c-danger); }
.hc-kvkk.is-invalid span { color: #b91c1c; }
.hc-err-kvkk {
display: block;
margin-top: 6px;
color: #b91c1c;
font-size: 0.78rem;
font-weight: 600;
}
.hc-actions {
margin-top: 22px;
display: flex;
justify-content: flex-end;
}
.hc-submit {
display: inline-flex;
align-items: center;
gap: 8px;
}
.hc-submit i { font-size: 1.05rem; transition: transform .2s ease; }
.hc-submit:hover i { transform: translateX(3px); }
.hc-submit:disabled { opacity: 0.7; cursor: not-allowed; }
.hc-alert {
margin-top: 16px;
padding: 12px 14px;
background: #fef2f2;
border: 1px solid #fecaca;
border-radius: 10px;
color: #991b1b;
display: flex;
align-items: center;
gap: 10px;
font-size: 0.9rem;
font-weight: 600;
}
.hc-alert[hidden] { display: none !important; }
.hc-alert i { font-size: 1.1rem; }
/* Success state */
.hc-success {
grid-column: 1 / -1;
display: flex;
align-items: center;
gap: 18px;
padding: 22px 26px;
background: #fff;
border: 1px solid var(--c-border);
border-left: 4px solid var(--c-success);
border-radius: 14px;
box-shadow: var(--shadow-sm);
}
.hc-success[hidden] { display: none !important; }
.hc-suc-ic {
width: 48px;
height: 48px;
border-radius: 50%;
background: var(--c-success);
color: #fff;
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 1.4rem;
flex-shrink: 0;
}
.hc-suc-text { flex: 1; }
.hc-suc-text strong {
display: block;
font-size: 1.02rem;
color: var(--c-primary);
font-weight: 800;
margin-bottom: 2px;
}
.hc-suc-text p {
margin: 0;
font-size: 0.9rem;
color: var(--c-muted);
}
.hc-suc-reset {
background: transparent;
border: 1.5px solid var(--c-accent);
color: var(--c-accent);
border-radius: 999px;
padding: 8px 18px;
font-family: inherit;
font-weight: 700;
font-size: 0.82rem;
cursor: pointer;
transition: all .2s ease;
}
.hc-suc-reset:hover {
background: var(--c-accent);
color: #fff;
}
@media (max-width: 960px) {
.home-contact { padding: 70px 0 80px; }
.home-contact-grid { grid-template-columns: 1fr; gap: 22px; }
.hc-form { padding: 28px 24px; }
.hc-info { padding: 26px 22px; }
}
@media (max-width: 560px) {
.home-contact { padding: 54px 0 60px; }
.home-contact-head { margin-bottom: 36px; }
.hc-grid { grid-template-columns: 1fr; gap: 14px; }
.hc-form { padding: 22px 18px; }
.hc-info { padding: 22px 18px; gap: 18px; }
.hc-actions { justify-content: stretch; }
.hc-submit { width: 100%; justify-content: center; }
.hc-success { flex-direction: column; align-items: flex-start; padding: 20px 22px; }
}
/* ==================== CONTACT PAGE MAP ==================== */
.contact-map-section {
padding: 20px 0 90px;
}
.contact-map-wide {
width: 100%;
max-width: 1680px;
margin: 0 auto;
padding: 0 24px;
}
.contact-map {
border-radius: 18px;
overflow: hidden;
box-shadow: 0 24px 50px rgba(10, 14, 26, 0.10);
border: 1px solid var(--c-border);
line-height: 0;
background: #fff;
}
.contact-map iframe {
width: 100%;
height: 520px;
display: block;
border: 0;
}
.contact-page-section {
padding-top: 40px;
}
@media (max-width: 768px) {
.contact-map-section { padding: 10px 0 60px; }
.contact-map-wide { padding: 0 16px; }
.contact-map iframe { height: 360px; }
}
/* ==================== PARTNERS LOGO STRIP ==================== */
.partners-strip {
padding: 40px 0 80px;
position: relative;
}
.partners-row {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
gap: 40px 60px;
padding: 36px 0;
border-top: 1px solid var(--c-border);
border-bottom: 1px solid var(--c-border);
}
.partner-logo {
flex: 1 1 0;
display: flex;
align-items: center;
justify-content: center;
min-width: 110px;
opacity: .85;
transition: opacity .3s ease, transform .3s ease;
}
.partner-logo:hover { opacity: 1; transform: translateY(-2px); }
.partner-logo img {
max-width: 140px;
max-height: 44px;
width: auto;
height: auto;
display: block;
}
@media (max-width: 768px) {
.partners-row { gap: 28px 32px; }
.partner-logo { flex: 1 1 28%; min-width: 100px; }
.partner-logo img { max-height: 36px; }
}
@media (max-width: 600px) {
.partners-strip { padding: 24px 0 56px; }
.partners-row {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 28px 16px;
padding: 28px 0;
justify-items: center;
}
.partner-logo {
flex: unset;
min-width: 0;
width: 100%;
max-width: 160px;
}
.partner-logo:last-child:nth-child(odd) {
grid-column: 1 / -1;
}
.partner-logo img {
max-height: 32px;
max-width: 130px;
}
}
@media (max-width: 380px) {
.partners-row { gap: 24px 12px; }
.partner-logo img { max-height: 28px; max-width: 110px; }
}
/* ==================== SERVICES SLIDER (hero altı, hero ile birleşik) ==================== */
.services-slider-section {
padding: 100px 0 120px;
background: transparent;
position: relative;
z-index: 4;
}
.services-swiper {
position: relative;
padding: 12px 0;
overflow: visible;
}
.services-swiper .swiper-wrapper { align-items: stretch; }
.services-swiper .swiper-slide { height: auto; }
.ss-card {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
background: #fff;
border: 1px solid var(--c-border);
border-radius: 22px;
padding: 32px 28px;
height: 100%;
transition: all var(--transition);
text-decoration: none;
color: var(--c-text);
overflow: hidden;
position: relative;
}
.ss-card:hover {
transform: translateY(-6px);
box-shadow: 0 22px 50px rgba(10, 14, 26, .08);
border-color: rgba(156, 163, 175, .35);
}
.ss-card.tone-0 { background: linear-gradient(160deg, #fff 0%, #fff5f0 100%); }
.ss-card.tone-1 { background: linear-gradient(160deg, #fff 0%, #f0fbf6 100%); }
.ss-card.tone-2 { background: linear-gradient(160deg, #fff 0%, #f0f6fb 100%); }
/* Optivenue referans tasarımı — birebir ölçüler */
.services-slider-section .ss-card {
border: 1px solid #EBEBEB;
border-radius: 2px;
padding: 30px;
box-shadow: none;
justify-content: flex-start;
}
.services-slider-section .ss-card:hover {
transform: none;
box-shadow: none;
border-color: #EBEBEB;
}
.services-slider-section .ss-illu {
margin-bottom: 22px;
}
.services-slider-section .ss-illu-img {
max-width: 320px;
}
.services-slider-section .ss-title {
font-family: 'Urbanist', 'Outfit', 'DM Sans', sans-serif;
font-size: 18px;
font-weight: 700;
margin-bottom: 0;
line-height: 1.35;
}
.services-slider-section .ss-link {
font-family: 'Urbanist', 'Outfit', 'DM Sans', sans-serif;
font-size: 14px;
font-weight: 500;
color: var(--c-muted);
margin-top: 20px;
letter-spacing: .01em;
}
.services-slider-section .ss-card:hover .ss-link {
gap: 6px;
color: var(--c-primary);
}
/* /hizmetler sayfasındaki tonlar entegre — pembe-krem, mint, mavi */
.services-slider-section .ss-card.tone-0 { background: linear-gradient(160deg, #fff 0%, #fff5f0 100%); }
.services-slider-section .ss-card.tone-1 { background: linear-gradient(160deg, #fff 0%, #f0fbf6 100%); }
.services-slider-section .ss-card.tone-2 { background: linear-gradient(160deg, #fff 0%, #f0f6fb 100%); }
/* Hover — idle tonu korunur (renk değişmez), sadece border vurgusu */
.services-slider-section .ss-card.tone-0:hover { background: linear-gradient(160deg, #fff 0%, #fff5f0 100%); }
.services-slider-section .ss-card.tone-1:hover { background: linear-gradient(160deg, #fff 0%, #f0fbf6 100%); }
.services-slider-section .ss-card.tone-2:hover { background: linear-gradient(160deg, #fff 0%, #f0f6fb 100%); }
.ss-illu {
width: 100%;
aspect-ratio: 1 / 1;
display: grid;
place-items: center;
margin-bottom: 24px;
background: transparent;
}
.ss-illu i {
font-size: clamp(4.2rem, 8vw, 6rem);
color: var(--c-primary);
opacity: .85;
transition: all var(--transition);
}
.ss-illu-img {
width: 100%;
max-width: 360px;
height: 100%;
object-fit: contain;
transition: transform var(--transition);
}
/* Beyaz arka planlı raster illüstrasyonlar — multiply ile karta karışsın */
.ss-illu-img[src$=".png"],
.ss-illu-img[src$=".jpg"],
.ss-illu-img[src$=".jpeg"],
.ss-illu-img[src$=".webp"] {
mix-blend-mode: multiply;
}
.ss-card:hover .ss-illu i {
color: var(--c-accent);
transform: scale(1.06);
}
.ss-title {
font-size: 1.15rem;
font-weight: 700;
color: var(--c-primary);
margin: 0 0 12px;
line-height: 1.3;
}
.ss-link {
color: var(--c-muted);
font-size: .95rem;
font-weight: 500;
display: inline-flex;
align-items: center;
gap: 6px;
transition: color var(--transition), gap var(--transition);
}
.ss-card:hover .ss-link {
color: var(--c-accent);
gap: 10px;
}
/* Swiper navigation arrows */
.services-swiper .swiper-button-prev,
.services-swiper .swiper-button-next {
width: 44px;
height: 44px;
border-radius: 50%;
background: #fff;
border: 1px solid var(--c-border);
color: var(--c-primary);
box-shadow: var(--shadow-sm);
margin-top: -22px;
transition: all var(--transition);
cursor: pointer;
}
.services-swiper .swiper-button-prev::after,
.services-swiper .swiper-button-next::after { display: none; }
.services-swiper .swiper-button-prev i,
.services-swiper .swiper-button-next i {
font-size: 1.1rem;
}
.services-swiper .swiper-button-prev:hover,
.services-swiper .swiper-button-next:hover {
background: var(--c-accent);
color: #fff;
border-color: var(--c-accent);
}
.services-swiper .swiper-button-prev { left: -8px; }
.services-swiper .swiper-button-next { right: -8px; }
/* Pagination dots — kart dışında, en altta */
.services-pagination {
position: static !important;
margin-top: 36px;
text-align: center;
}
.services-pagination .swiper-pagination-bullet {
width: 8px;
height: 8px;
background: var(--c-border);
opacity: 1;
transition: all var(--transition);
margin: 0 4px;
}
.services-pagination .swiper-pagination-bullet-active {
background: var(--c-accent);
width: 24px;
border-radius: 4px;
}
@media (max-width: 768px) {
.services-slider-section { padding: 40px 0 60px; margin-top: 0; }
.services-swiper .swiper-button-prev,
.services-swiper .swiper-button-next { display: none; }
}
/* ==================== SERVICES TABS (Bayigram tarzı — üstte pill, altta kart) ==================== */
.services-tabs-section {
padding: 100px 0 110px;
background: transparent;
position: relative;
z-index: 4;
}
.st-head {
max-width: 760px;
margin: 0 auto 36px;
text-align: center;
}
.st-eyebrow {
display: inline-flex;
align-items: center;
gap: 6px;
font-family: 'Urbanist', 'Outfit', sans-serif;
font-size: 0.74rem;
letter-spacing: 0.18em;
text-transform: uppercase;
font-weight: 700;
color: var(--c-muted);
margin-bottom: 14px;
}
.st-eyebrow-no {
font-family: 'Urbanist', 'Outfit', sans-serif;
font-weight: 800;
color: var(--c-accent);
font-size: 0.9rem;
letter-spacing: 0;
}
.st-title {
font-family: 'Urbanist', 'Outfit', sans-serif;
font-size: clamp(1.7rem, 3.2vw, 2.6rem);
font-weight: 800;
line-height: 1.15;
letter-spacing: -0.025em;
margin: 0;
color: var(--c-primary);
}
.st-title .highlight { color: var(--c-accent); }
/* PILL TABS — yatay, ortalı */
.st-pills {
list-style: none;
padding: 0;
margin: 0 0 28px;
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 12px;
}
.st-pill {
display: inline-flex;
align-items: center;
gap: 10px;
padding: 10px 16px 10px 10px;
background: #fff;
border: 1.5px solid var(--c-border);
border-radius: 999px;
cursor: pointer;
transition: all .22s ease;
user-select: none;
box-shadow: 0 4px 12px -8px rgba(15, 28, 77, .12);
}
.st-pill:hover {
border-color: rgba(31, 167, 232, .35);
transform: translateY(-1px);
}
.st-pill:focus-visible {
outline: 2px solid var(--c-accent);
outline-offset: 2px;
}
.st-pill-ic {
width: 34px;
height: 34px;
border-radius: 50%;
background: #f3f4f8;
color: #6b7280;
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 1rem;
transition: all .22s ease;
flex-shrink: 0;
}
.st-pill-lbl {
font-family: 'Urbanist', 'Outfit', sans-serif;
font-size: 0.92rem;
font-weight: 600;
color: var(--c-primary);
letter-spacing: -0.005em;
white-space: nowrap;
}
.st-pill-chev {
font-size: 0.82rem;
color: var(--c-muted);
margin-left: 2px;
transition: transform .22s ease;
}
.st-pill.is-active {
border-color: var(--c-accent);
background: rgba(31, 167, 232, .04);
box-shadow: 0 8px 22px -10px rgba(31, 167, 232, .35);
}
.st-pill.is-active .st-pill-ic {
background: var(--c-accent);
color: #fff;
box-shadow: 0 0 0 4px rgba(31, 167, 232, .14);
}
.st-pill.is-active .st-pill-chev {
transform: rotate(180deg);
color: var(--c-accent);
}
/* DECK — arkadaki istifli kart gölgesi */
.st-deck {
position: relative;
padding-top: 14px;
}
.st-deck-bg {
position: absolute;
left: 50%;
border-radius: 22px;
background: #fff;
border: 1px solid var(--c-border);
box-shadow: 0 8px 24px -14px rgba(15, 28, 77, .12);
z-index: 0;
pointer-events: none;
}
.st-deck-bg-1 {
top: 7px;
width: calc(100% - 36px);
height: 28px;
transform: translateX(-50%);
}
.st-deck-bg-2 {
top: 0;
width: calc(100% - 72px);
height: 22px;
transform: translateX(-50%);
opacity: .65;
}
/* CARD — dış kart (visual + panels'ı saran) */
.st-card {
background: #fff;
border: 1px solid var(--c-border);
border-radius: 22px;
padding: 40px 44px 36px;
box-shadow: 0 30px 70px -32px rgba(15, 28, 77, .22);
position: relative;
z-index: 2;
}
.st-main {
display: block;
}
/* PANELS */
.st-panels {
position: relative;
z-index: 2;
}
.st-panel {
display: none;
}
.st-panel.is-active {
display: flex;
flex-direction: column;
animation: stFadeUp .35s cubic-bezier(.2, .7, .3, 1);
}
@keyframes stFadeUp {
from { opacity: 0; transform: translateY(8px); }
to { opacity: 1; transform: translateY(0); }
}
.st-panel-ic {
width: 56px;
height: 56px;
border-radius: 14px;
background: linear-gradient(135deg, #5B66E8 0%, #6D5BD8 100%);
color: #fff;
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 1.5rem;
box-shadow: 0 10px 22px -10px rgba(91, 102, 232, .55);
margin-bottom: 22px;
flex-shrink: 0;
}
.st-panel-title {
font-family: 'Urbanist', 'Outfit', sans-serif;
font-size: clamp(1.4rem, 2vw, 1.8rem);
font-weight: 800;
color: var(--c-primary);
letter-spacing: -0.02em;
line-height: 1.18;
margin: 0 0 12px;
}
.st-panel-lead {
font-size: 0.98rem;
color: var(--c-muted);
line-height: 1.6;
margin: 0 0 26px;
max-width: 640px;
}
.st-stats {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 12px 22px;
margin-bottom: 22px;
}
.st-stat {
display: flex;
align-items: center;
gap: 12px;
}
.st-stat-ic {
width: 38px;
height: 38px;
border-radius: 10px;
background: #f3f4f8;
color: var(--c-accent);
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 1rem;
flex-shrink: 0;
}
.st-stat-text { display: flex; flex-direction: column; line-height: 1.2; }
.st-stat-val {
font-family: 'Urbanist', 'Outfit', sans-serif;
font-size: 1.02rem;
font-weight: 800;
color: var(--c-primary);
letter-spacing: -0.01em;
}
.st-stat-lbl {
font-family: 'Urbanist', 'Outfit', sans-serif;
font-size: 0.78rem;
color: var(--c-muted);
font-weight: 500;
margin-top: 2px;
}
.st-trustline {
display: flex;
align-items: flex-start;
gap: 10px;
padding-top: 8px;
font-family: 'Urbanist', 'Outfit', sans-serif;
font-size: 0.82rem;
color: var(--c-muted);
line-height: 1.5;
max-width: 480px;
}
.st-trustline-ic {
color: #10b981;
font-size: 1rem;
flex-shrink: 0;
margin-top: 1px;
}
/* SCOPE GRID */
.st-scope {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 12px;
margin-bottom: 18px;
}
.st-scope-item {
display: flex;
flex-direction: row;
align-items: center;
text-align: left;
gap: 12px;
padding: 12px 14px;
background: #fff;
border: 1px solid var(--c-border);
border-radius: 12px;
transition: all .22s ease;
min-height: 0;
}
.st-scope-item:hover {
border-color: rgba(31, 167, 232, .4);
transform: translateY(-2px);
box-shadow: 0 12px 24px -16px rgba(15, 28, 77, .2);
}
.st-scope-ic {
width: 38px;
height: 38px;
border-radius: 10px;
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 1rem;
flex-shrink: 0;
}
/* Pastel tone variants — Bayigram tarzı */
.st-scope-item.tone-0 .st-scope-ic { background: #ffeae2; color: #e85d3e; }
.st-scope-item.tone-1 .st-scope-ic { background: #e3f6ec; color: #15a25a; }
.st-scope-item.tone-2 .st-scope-ic { background: #e4eefb; color: #2a6df4; }
.st-scope-item.tone-3 .st-scope-ic { background: #f3ecff; color: #6d4ce6; }
.st-scope-lbl {
font-family: 'Urbanist', 'Outfit', sans-serif;
font-size: 0.84rem;
font-weight: 600;
color: var(--c-primary);
line-height: 1.3;
letter-spacing: -0.005em;
}
/* CTA — Bayigram'daki "TÜM HİZMETLERİ GÖRÜNTÜLE" tarzı full-width pill */
.st-cta {
display: flex;
align-items: center;
justify-content: center;
gap: 10px;
padding: 16px 24px;
background: rgba(31, 167, 232, .08);
border: 1px solid rgba(31, 167, 232, .18);
border-radius: 12px;
font-family: 'Urbanist', 'Outfit', sans-serif;
font-size: 0.82rem;
font-weight: 700;
letter-spacing: 0.1em;
color: var(--c-accent);
text-decoration: none;
transition: all .22s ease;
}
.st-cta:hover {
background: var(--c-accent);
color: #fff;
border-color: var(--c-accent);
transform: translateY(-1px);
}
.st-cta i {
font-size: 0.95rem;
transition: transform .22s ease;
}
.st-cta:hover i { transform: translateX(3px); }
/* RESPONSIVE */
@media (max-width: 980px) {
.st-card { padding: 30px 26px 26px; }
.st-deck-bg-1 { width: calc(100% - 24px); }
.st-deck-bg-2 { width: calc(100% - 48px); }
}
@media (max-width: 720px) {
.st-pills {
flex-wrap: nowrap;
overflow-x: auto;
justify-content: flex-start;
scroll-snap-type: x mandatory;
padding-bottom: 4px;
-webkit-overflow-scrolling: touch;
margin-left: -20px;
margin-right: -20px;
padding-left: 20px;
padding-right: 20px;
}
.st-pills::-webkit-scrollbar { display: none; }
.st-pill {
flex-shrink: 0;
scroll-snap-align: start;
}
.st-pill-chev { display: none; }
.st-scope { grid-template-columns: repeat(2, 1fr); gap: 10px; }
}
@media (max-width: 480px) {
.services-tabs-section { padding: 64px 0 72px; }
.st-head { margin-bottom: 28px; }
.st-pill { padding: 8px 14px 8px 8px; }
.st-pill-ic { width: 28px; height: 28px; font-size: 0.88rem; }
.st-pill-lbl { font-size: 0.84rem; }
.st-panel { padding: 24px 18px 20px; border-radius: 18px; }
.st-stats { grid-template-columns: 1fr; }
.st-scope { grid-template-columns: repeat(2, 1fr); }
}
@media (prefers-reduced-motion: reduce) {
.st-panel.is-active { animation: none; }
}
@media (max-width: 1100px) {
.svg-roas { top: 2%; left: 0; width: 150px; }
.svg-mutlu { bottom: 2%; left: 0; width: 150px; }
.svg-donusum { bottom: 4%; right: 0; width: 160px; }
.svg-arrow { width: 80px; left: 4%; top: 44%; }
}
@media (max-width: 1100px) {
.hero-rings { width: 380px; }
}
@media (max-width: 768px) {
.hero.hero-svg .container { min-height: auto; }
.hero-text { margin-top: 0; }
/* Büyük floating kartları gizle — metni ezerlerdi */
.svg-card { display: none; }
/* Küçük dekoratif SVG'ler kalsın — arka plana hava katar */
.svg-arrow {
display: block;
width: 70px;
top: 10%;
left: 4%;
opacity: .55;
}
.svg-hear {
display: block;
width: 80px;
top: 6%;
right: 4%;
opacity: .55;
}
.hero-rings { width: 320px; opacity: 1; }
.hero-rings .ring { background: rgba(156, 163, 175, 0.09); }
.hero-rings .ring-2 { background: rgba(156, 163, 175, 0.13); }
.hero-rings .ring-3 { background: rgba(156, 163, 175, 0.17); }
}
/* ==================== SERVICES ==================== */
.services-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 24px;
}
.service-card {
background: #fff;
border: 1px solid var(--c-border);
border-radius: var(--radius);
padding: 40px 32px;
transition: all var(--transition);
position: relative;
overflow: hidden;
text-decoration: none;
display: block;
}
.service-card::before {
content: '';
position: absolute;
inset: 0;
background: var(--c-primary);
transform: translateY(101%);
transition: transform .5s cubic-bezier(.7,0,.2,1);
z-index: 0;
}
.service-card > * { position: relative; z-index: 1; }
.service-card:hover { border-color: transparent; }
.service-card:hover::before { transform: translateY(0); }
.service-card:hover h3, .service-card:hover .more { color: #fff; }
.service-card:hover p { color: rgba(255,255,255,.65); }
.service-card:hover .icon { background: var(--c-accent); color: var(--c-primary); }
.service-card .icon {
width: 52px; height: 52px;
border-radius: 50%;
background: var(--c-bg-soft);
color: var(--c-primary);
display: grid;
place-items: center;
font-size: 1.4rem;
margin-bottom: 24px;
transition: all var(--transition);
}
.service-card h3 { margin-bottom: 10px; font-size: 1.25rem; }
.service-card p { font-size: 0.95rem; margin-bottom: 16px; }
.service-card .more {
color: var(--c-accent);
font-weight: 600;
font-size: 0.9rem;
display: inline-flex;
align-items: center;
gap: 4px;
transition: gap var(--transition);
}
.service-card:hover .more { gap: 10px; }
/* ==================== STATS ==================== */
.stats {
background: var(--c-primary);
color: #fff;
position: relative;
overflow: hidden;
}
.stats::before {
content: '';
position: absolute;
top: -50%; right: -10%;
width: 600px; height: 600px;
background: radial-gradient(circle, rgba(255,107,53,.15), transparent 70%);
border-radius: 50%;
}
.stats-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 24px;
position: relative;
z-index: 2;
}
.stat-item {
text-align: center;
padding: 32px 16px;
}
.stat-item .icon {
width: 64px; height: 64px;
margin: 0 auto 16px;
border-radius: 50%;
background: rgba(255,255,255,.08);
display: grid;
place-items: center;
font-size: 1.6rem;
color: var(--c-accent);
}
.stat-item .num {
font-size: 3rem;
font-weight: 800;
line-height: 1;
color: #fff;
margin-bottom: 8px;
display: flex;
align-items: baseline;
justify-content: center;
gap: 4px;
}
.stat-item .num .suffix { font-size: 1.5rem; color: var(--c-accent); }
.stat-item .lbl { color: rgba(255,255,255,.7); font-size: 0.95rem; }
/* ==================== ABOUT ==================== */
.about-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 64px;
align-items: center;
}
.about-image {
position: relative;
aspect-ratio: 4/5;
border-radius: var(--radius-lg);
overflow: hidden;
background: linear-gradient(135deg, var(--c-primary), var(--c-primary-2));
}
.about-image::after {
content: '';
position: absolute;
bottom: -40px; right: -40px;
width: 200px; height: 200px;
background: var(--c-accent);
border-radius: 50%;
filter: blur(60px);
opacity: 0.5;
}
.about h2 { margin-bottom: 20px; }
.about p { font-size: 1.05rem; margin-bottom: 16px; }
.about-features {
list-style: none;
margin: 24px 0 32px;
display: grid;
gap: 12px;
}
.about-features li {
display: flex;
align-items: flex-start;
gap: 12px;
color: var(--c-text);
font-weight: 500;
}
.about-features .check {
flex: 0 0 24px;
width: 24px; height: 24px;
background: var(--c-accent);
color: #fff;
border-radius: 50%;
display: grid;
place-items: center;
font-size: 0.75rem;
}
/* ==================== PARTNERS ==================== */
.partners-grid {
display: grid;
grid-template-columns: repeat(6, 1fr);
gap: 24px;
align-items: center;
}
.partner-item {
background: #fff;
border: 1px solid var(--c-border);
border-radius: var(--radius);
aspect-ratio: 16/9;
display: grid;
place-items: center;
padding: 20px;
transition: all var(--transition);
filter: grayscale(1);
opacity: 0.6;
}
.partner-item:hover {
filter: none;
opacity: 1;
transform: translateY(-4px);
box-shadow: var(--shadow-md);
border-color: transparent;
}
.partner-item img { max-height: 50px; max-width: 100%; }
.partner-item .text-fallback {
font-weight: 700;
color: var(--c-muted);
font-size: 0.95rem;
}
/* ==================== BLOG ==================== */
.blog-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 28px;
}
.post-card {
background: #fff;
border-radius: var(--radius);
overflow: hidden;
border: 1px solid var(--c-border);
transition: all var(--transition);
}
.post-card:hover {
transform: translateY(-6px);
box-shadow: var(--shadow-lg);
border-color: transparent;
}
.post-card .cover {
aspect-ratio: 16/10;
overflow: hidden;
background: linear-gradient(135deg, var(--c-primary), var(--c-accent));
}
.post-card .cover img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.6s ease;
}
.post-card:hover .cover img { transform: scale(1.06); }
.post-card .body { padding: 24px; }
.post-card .meta {
display: flex;
gap: 12px;
font-size: 0.82rem;
color: var(--c-muted);
margin-bottom: 12px;
align-items: center;
}
.post-card .meta .cat {
background: rgba(255,107,53,.1);
color: var(--c-accent);
padding: 4px 10px;
border-radius: 999px;
font-weight: 600;
}
.post-card h3 { font-size: 1.15rem; margin-bottom: 10px; transition: color var(--transition); }
.post-card:hover h3 { color: var(--c-accent); }
.post-card p { font-size: 0.92rem; margin-bottom: 16px; }
/* ==================== CTA ==================== */
.cta-band {
background: linear-gradient(135deg, var(--c-primary), var(--c-primary-2));
color: #fff;
border-radius: var(--radius-lg);
padding: 64px 56px;
display: grid;
grid-template-columns: 1.5fr 1fr;
gap: 32px;
align-items: center;
position: relative;
overflow: hidden;
}
.cta-band::before {
content: '';
position: absolute;
top: -50%; right: -10%;
width: 500px; height: 500px;
background: radial-gradient(circle, rgba(255,107,53,.25), transparent 70%);
}
.cta-band > * { position: relative; z-index: 2; }
.cta-band h2 { color: #fff; margin-bottom: 12px; }
.cta-band p { color: rgba(255,255,255,.8); font-size: 1.05rem; margin: 0; }
.cta-band .actions { text-align: right; }
/* ==================== CONTACT ==================== */
.contact-grid {
display: grid;
grid-template-columns: 1fr 1.2fr;
gap: 56px;
align-items: start;
}
.contact-info {
background: var(--c-primary);
color: #fff;
padding: 48px 40px;
border-radius: var(--radius-lg);
position: relative;
overflow: hidden;
}
.contact-info::before {
content: '';
position: absolute;
bottom: -100px; right: -100px;
width: 300px; height: 300px;
background: radial-gradient(circle, var(--c-accent), transparent 70%);
border-radius: 50%;
opacity: 0.3;
}
.contact-info h3 { color: #fff; margin-bottom: 12px; }
.contact-info p { color: rgba(255,255,255,.75); margin-bottom: 32px; }
.contact-info .info-list { list-style: none; display: grid; gap: 20px; }
.contact-info .info-list li { display: flex; gap: 16px; align-items: flex-start; }
.contact-info .info-list .icon {
width: 44px; height: 44px;
border-radius: 12px;
background: rgba(255,255,255,.1);
color: var(--c-accent);
display: grid; place-items: center;
flex: 0 0 44px;
font-size: 1.1rem;
}
.contact-info .info-list .lbl { color: rgba(255,255,255,.6); font-size: 0.85rem; margin-bottom: 2px; }
.contact-info .info-list .val { color: #fff; font-weight: 500; }
.contact-info .socials {
display: flex;
gap: 12px;
margin-top: 36px;
padding-top: 28px;
border-top: 1px solid rgba(255,255,255,.1);
}
.contact-info .socials a {
width: 42px; height: 42px;
border-radius: 50%;
background: rgba(255,255,255,.08);
color: #fff;
display: grid; place-items: center;
transition: all var(--transition);
}
.contact-info .socials a:hover { background: var(--c-accent); transform: translateY(-3px); }
.contact-form {
background: #fff;
border: 1px solid var(--c-border);
border-radius: var(--radius-lg);
padding: 40px;
}
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 16px; }
.form-group { display: flex; flex-direction: column; margin-bottom: 16px; }
.form-group label {
font-size: 0.88rem;
font-weight: 600;
color: var(--c-primary);
margin-bottom: 6px;
}
.form-control {
padding: 14px 16px;
border: 1px solid var(--c-border);
border-radius: var(--radius-sm);
font-size: 0.95rem;
font-family: inherit;
background: #fff;
color: var(--c-text);
transition: border-color var(--transition), box-shadow var(--transition);
width: 100%;
}
.form-control:focus {
outline: none;
border-color: var(--c-accent);
box-shadow: 0 0 0 3px rgba(255,107,53,.1);
}
textarea.form-control { resize: vertical; min-height: 120px; }
.checkbox-row {
display: flex;
gap: 10px;
align-items: flex-start;
font-size: 0.85rem;
color: var(--c-muted);
margin-bottom: 20px;
}
.checkbox-row input { margin-top: 4px; }
.checkbox-row a { color: var(--c-accent); }
/* Alerts */
.alert {
padding: 14px 18px;
border-radius: var(--radius-sm);
margin-bottom: 20px;
font-size: 0.95rem;
border: 1px solid transparent;
}
.alert-success { background: #f9fafb; color: #065f46; border-color: #a7f3d0; }
.alert-danger { background: #fef2f2; color: #991b1b; border-color: #fecaca; }
/* ==================== HOME PARTNERLERİMİZ ==================== */
.home-partners { padding: 0 0 clamp(56px, 8vw, 96px); }
.home-partners-head { text-align: center; max-width: 720px; margin: 0 auto clamp(36px, 4vw, 56px); }
.home-partners-meta {
display: inline-flex; align-items: center; gap: 14px; margin-bottom: 22px;
}
.home-partners-num {
font-family: 'JetBrains Mono', ui-monospace, monospace;
font-size: 11px; font-weight: 600;
color: var(--c-accent); letter-spacing: 0.14em;
}
.home-partners-mline { width: 36px; height: 1px; background: var(--c-text); opacity: 0.25; }
.home-partners-eyebrow {
font-family: 'JetBrains Mono', ui-monospace, monospace;
font-size: 11px; font-weight: 600;
color: var(--c-text); letter-spacing: 0.2em; text-transform: uppercase;
}
.home-partners-title {
font-family: 'Urbanist', 'Outfit', sans-serif;
font-size: clamp(2.4rem, 5.4vw, 5rem); /* diğer bölüm başlıklarıyla (.ar-hero-title) eşit */
font-weight: 900; line-height: 1.0; letter-spacing: -0.02em;
color: var(--c-text); margin: 0 auto; max-width: 18ch;
}
.home-partners-title .w {
display: inline-block;
color: rgba(10, 14, 26, 0.18);
transition: color .5s ease;
}
.home-partners-title .w.is-on { color: var(--c-text); }
.home-partners-title .w.is-on.hl { color: var(--c-accent); }
.home-partners-lead {
font-family: 'Urbanist', 'Outfit', sans-serif;
font-size: clamp(15px, 1.15vw, 17.5px);
line-height: 1.65; color: var(--c-muted);
max-width: 60ch; margin: 22px auto 0;
}
.home-partners-row {
display: flex; flex-wrap: nowrap; align-items: stretch; justify-content: center;
gap: clamp(12px, 1.6vw, 22px);
}
.home-partner {
flex: 1 1 0; min-width: 0;
display: flex; align-items: center; justify-content: center;
background: #fff;
border: 1px solid var(--c-border);
border-radius: 16px;
padding: clamp(16px, 2vw, 26px) clamp(14px, 1.6vw, 22px);
box-shadow: var(--shadow-sm);
transition: transform .3s var(--transition), box-shadow .3s ease, border-color .3s ease;
}
.home-partner img {
width: 100%; height: auto; max-height: clamp(56px, 6vw, 78px); display: block;
object-fit: contain;
filter: grayscale(1); opacity: .72;
transition: filter .35s ease, opacity .35s ease;
}
.home-partner:hover {
transform: translateY(-4px);
box-shadow: var(--shadow-md);
border-color: color-mix(in srgb, var(--c-accent) 35%, var(--c-border));
}
.home-partner:hover img { filter: grayscale(0); opacity: 1; }
@media (max-width: 640px) {
.home-partners-row { flex-wrap: wrap; gap: 12px; }
.home-partner { flex: 1 1 40%; padding: 16px 18px; }
.home-partner img { max-height: 56px; }
}
/* ==================== FOOTER (sade çok-kolonlu — açık palet + brand süsleme) ==================== */
.site-footer {
background: var(--c-bg);
color: var(--c-text);
padding: clamp(48px, 6vw, 90px) 0 clamp(26px, 3vw, 40px);
margin-top: 0;
position: relative;
overflow: hidden;
/* üst kenarda brand mavi vurgulu hairline */
border-top: 1px solid var(--c-border);
}
/* üst kenara ince accent uzantısı (sol köşeden başlayan kısa mavi çizgi) */
.site-footer::before {
content: "";
position: absolute;
top: -1px; left: 0;
width: clamp(120px, 18vw, 260px); height: 2px;
background: linear-gradient(90deg, var(--c-accent), transparent);
}
/* sağ üstte çok hafif noktalı doku (AI-blob değil, brand dot-grid) */
.site-footer::after {
content: "";
position: absolute;
top: clamp(28px, 4vw, 56px); right: clamp(-30px, -2vw, -10px);
width: 220px; height: 220px;
background-image: radial-gradient(var(--c-accent) 1.3px, transparent 1.4px);
background-size: 16px 16px;
opacity: .10;
pointer-events: none;
-webkit-mask-image: radial-gradient(circle at 70% 30%, #000 0%, transparent 70%);
mask-image: radial-gradient(circle at 70% 30%, #000 0%, transparent 70%);
}
/* ---- Üst: marka + kolonlar (sade) ---- */
.footer-top {
display: grid;
grid-template-columns: 1.1fr 1fr 1fr 1.15fr;
gap: clamp(28px, 4vw, 56px);
padding-bottom: clamp(36px, 4vw, 56px);
position: relative;
counter-reset: fcol;
}
.footer-brand .footer-logo {
position: relative;
display: inline-flex;
align-items: center;
line-height: 1;
text-decoration: none;
font-family: 'Playfair Display', 'Times New Roman', serif;
font-size: 2.2rem;
font-weight: 500;
letter-spacing: -.005em;
color: var(--c-primary);
margin: 0 0 18px;
padding-left: 16px;
}
/* logo solunda dikey accent vurgu */
.footer-brand .footer-logo::before {
content: "";
position: absolute;
left: 0; top: 50%;
transform: translateY(-50%);
width: 3px; height: 70%;
border-radius: 3px;
background: linear-gradient(180deg, var(--c-accent), color-mix(in srgb, var(--c-accent) 35%, transparent));
}
.footer-brand .footer-logo img { display: block; height: 44px; width: auto; max-width: 100%; object-fit: contain; }
.footer-brand .footer-logo .dj-mark,
.footer-brand .footer-logo .dj-dot { color: var(--c-accent); }
.footer-brand .footer-logo .dj-mark {
display: inline-block;
transform-origin: 50% 55%;
transition: transform .5s cubic-bezier(.34,1.56,.64,1);
}
.footer-brand .footer-logo:hover .dj-mark { transform: rotate(90deg); }
.footer-brand p {
color: var(--c-muted);
font-size: 0.95rem;
line-height: 1.7;
max-width: 290px;
margin: 0;
}
.footer-cols {
display: contents;
}
.footer-col {
position: relative;
}
/* kolonlar arası uçları kaybolan yumuşak dikey ayraç (desktop) */
.footer-col::before {
content: "";
position: absolute;
top: 2px; bottom: 8px;
left: calc(clamp(28px, 4vw, 56px) / -2);
width: 1px;
background: linear-gradient(180deg, transparent, var(--c-border) 22%, var(--c-border) 78%, transparent);
}
.footer-col {
counter-increment: fcol;
}
.footer-col h4 {
display: flex;
align-items: baseline;
gap: 8px;
color: var(--c-primary);
font-size: .8rem;
margin: 0 0 18px;
padding-bottom: 12px;
text-transform: uppercase;
letter-spacing: 0.1em;
font-weight: 700;
position: relative;
}
/* editorial indeks numarası (01 / 02 / 03) */
.footer-col h4::before {
content: "0" counter(fcol);
font-family: 'JetBrains Mono', 'SFMono-Regular', ui-monospace, monospace;
font-size: .68rem;
font-weight: 600;
letter-spacing: 0;
color: var(--c-accent);
opacity: .75;
}
/* başlık altı kısa accent çizgi — kolona hover'da uzar */
.footer-col h4::after {
content: "";
position: absolute;
bottom: 0; left: 0;
width: 22px; height: 2px;
background: var(--c-accent);
transition: width .35s cubic-bezier(.4,0,.2,1);
}
.footer-col:hover h4::after { width: 44px; }
.footer-col ul { list-style: none; display: grid; gap: 13px; padding: 0; margin: 0; }
.footer-col ul a {
position: relative;
display: inline-flex;
align-items: center;
color: var(--c-muted);
font-size: 0.95rem;
text-decoration: none;
transition: color var(--transition), padding-left var(--transition);
}
/* hover'da kayan ok işareti */
.footer-col ul a::before {
content: "→";
position: absolute;
left: 1px;
color: var(--c-accent);
opacity: 0;
transform: translateX(-4px);
transition: opacity var(--transition), transform var(--transition);
}
.footer-col ul a:hover { color: var(--c-accent); padding-left: 18px; }
.footer-col ul a:hover::before { opacity: 1; transform: translateX(0); }
/* İletişim kolonu — ikonlu satırlar */
.footer-col-contact ul { gap: 16px; }
.footer-col-contact li,
.footer-col-contact a {
display: flex;
align-items: center;
gap: 11px;
color: var(--c-muted);
font-size: 0.95rem;
line-height: 1.5;
}
.footer-col-contact .footer-col-addr { align-items: flex-start; }
.footer-col-contact a { transition: color var(--transition); }
.footer-col-contact a:hover { color: var(--c-accent); padding-left: 0; }
/* ikonlar → brand pastel daire zemin */
.footer-col-contact i {
flex-shrink: 0;
width: 32px; height: 32px;
border-radius: 50%;
background: var(--c-accent-soft);
color: var(--c-accent);
display: grid; place-items: center;
font-size: .95rem;
transition: background .25s ease, color .25s ease, transform .25s ease;
}
.footer-col-contact a:hover i {
background: var(--c-accent);
color: #fff;
transform: translateY(-1px);
}
.footer-col-addr { color: var(--c-muted); }
/* ---- Alt bar ---- */
.footer-bottom {
position: relative;
padding-top: clamp(22px, 3vw, 32px);
border-top: 1px solid var(--c-border);
display: flex;
justify-content: center;
align-items: center;
flex-wrap: wrap;
gap: 16px;
font-size: 0.86rem;
color: var(--c-muted);
text-align: center;
}
/* copyright ortada, yukarı-çık butonu sağda sabit */
.footer-bottom .footer-totop {
position: absolute;
right: 0;
top: 50%;
transform: translateY(-50%);
}
.footer-bottom .footer-totop:hover { transform: translateY(-50%) translateY(-3px); }
/* ayıracın ortasında brand ✳ damgası */
.footer-bottom::before {
content: "✳";
position: absolute;
top: -1px; left: 50%;
transform: translate(-50%, -50%);
width: 30px; height: 22px;
display: grid; place-items: center;
background: var(--c-bg);
color: var(--c-accent);
font-size: .8rem;
line-height: 1;
}
.footer-brand .footer-socials { margin-top: 24px; }
.footer-socials { display: flex; gap: 8px; }
.footer-socials a {
position: relative;
overflow: hidden;
isolation: isolate;
width: 38px; height: 38px;
border-radius: 50%;
background: #fff;
border: 1px solid var(--c-border);
color: var(--c-primary);
display: grid; place-items: center;
font-size: .95rem;
text-decoration: none;
transition: color .25s ease, border-color .25s ease, transform .25s ease;
}
/* alttan dolan accent hover */
.footer-socials a::before {
content: "";
position: absolute;
inset: 0;
z-index: -1;
background: var(--c-accent);
transform: translateY(101%);
transition: transform .3s cubic-bezier(.4,0,.2,1);
}
.footer-socials a:hover {
border-color: var(--c-accent);
color: #fff;
transform: translateY(-2px);
}
.footer-socials a:hover::before { transform: translateY(0); }
.footer-totop {
position: relative;
overflow: hidden;
isolation: isolate;
width: 42px; height: 42px;
border-radius: 50%;
border: 1px solid var(--c-border);
background: #fff;
color: var(--c-primary);
display: grid; place-items: center;
font-size: 1rem;
text-decoration: none;
transition: border-color .25s ease, color .25s ease, transform .25s ease;
}
.footer-totop::before {
content: "";
position: absolute;
inset: 0;
z-index: -1;
background: var(--c-accent);
transform: translateY(101%);
transition: transform .3s cubic-bezier(.4,0,.2,1);
}
.footer-totop i { transition: transform .25s ease; }
.footer-totop:hover { border-color: var(--c-accent); color: #fff; transform: translateY(-3px); }
.footer-totop:hover::before { transform: translateY(0); }
.footer-totop:hover i { transform: translateY(-2px); }
/* ==================== PAGE HEADER ==================== */
.page-header {
padding: calc(var(--header-h) + 60px) 0 60px;
background: linear-gradient(135deg, var(--c-primary), var(--c-primary-2));
color: #fff;
text-align: center;
position: relative;
overflow: hidden;
}
.page-header::before {
content: '';
position: absolute;
top: 0; right: -10%;
width: 500px; height: 500px;
background: radial-gradient(circle, rgba(255,107,53,.2), transparent 70%);
border-radius: 50%;
}
.page-header h1 { color: #fff; margin-bottom: 12px; }
.page-header .breadcrumb {
display: flex;
justify-content: center;
gap: 10px;
list-style: none;
color: rgba(255,255,255,.7);
font-size: 0.9rem;
}
.page-header .breadcrumb a { color: var(--c-accent); }
.page-header .breadcrumb li:not(:last-child)::after {
content: '/';
margin-left: 10px;
color: rgba(255,255,255,.4);
}
/* ==================== ARTICLE / CONTENT ==================== */
.article-body {
max-width: 760px;
margin: 0 auto;
font-size: 1.08rem;
line-height: 1.85;
color: #2a3344;
font-family: 'Urbanist', 'Outfit', sans-serif;
}
.article-body > p:first-of-type,
.article-body p.lead {
font-size: 1.22rem;
line-height: 1.7;
color: var(--c-primary);
font-weight: 500;
margin-bottom: 28px;
letter-spacing: -0.005em;
}
.article-body p.lead {
padding-left: 22px;
border-left: 3px solid var(--c-accent);
}
.article-body h2 {
position: relative;
font-family: 'Urbanist', 'Outfit', sans-serif;
font-size: clamp(1.5rem, 2.4vw, 1.85rem);
font-weight: 800;
line-height: 1.3;
letter-spacing: -0.02em;
color: var(--c-primary);
margin: 56px 0 18px;
padding-top: 12px;
counter-increment: ab-h2;
}
.article-body h2::before {
content: '';
position: absolute;
top: -8px; left: 0;
width: 44px;
height: 4px;
border-radius: 4px;
background: linear-gradient(90deg, var(--c-accent), #6b7280);
}
.article-body h3 {
font-family: 'Urbanist', 'Outfit', sans-serif;
font-size: 1.18rem;
font-weight: 700;
line-height: 1.35;
letter-spacing: -0.01em;
color: var(--c-primary);
margin: 36px 0 14px;
}
.article-body p {
margin: 0 0 20px;
color: #2a3344;
}
.article-body strong { color: var(--c-primary); font-weight: 700; }
.article-body em { color: var(--c-primary); }
.article-body a {
color: var(--c-accent);
text-decoration: none;
background-image: linear-gradient(transparent 90%, rgba(255, 210, 63,0.55) 0);
background-size: 100% 100%;
transition: background-size .3s ease, color .25s ease;
}
.article-body a:hover {
color: var(--c-primary);
background-size: 100% 60%;
}
.article-body img {
border-radius: var(--radius);
margin: 28px 0;
max-width: 100%;
height: auto;
display: block;
}
.article-body figure {
margin: 40px 0;
padding: 0;
}
.article-body figure img {
width: 100%;
margin: 0;
border-radius: var(--radius-lg, 18px);
box-shadow: 0 14px 32px rgba(10,14,26,0.10);
}
.article-body figcaption {
margin-top: 14px;
font-size: .88rem;
line-height: 1.55;
color: var(--c-muted);
text-align: center;
font-style: italic;
}
.article-body ul, .article-body ol {
margin: 0 0 22px;
padding: 0 0 0 4px;
list-style: none;
counter-reset: ab-ol;
}
.article-body ul li, .article-body ol li {
position: relative;
padding: 4px 0 4px 36px;
margin-bottom: 8px;
line-height: 1.7;
}
.article-body ul li::before {
content: '';
position: absolute;
left: 8px;
top: 16px;
width: 8px; height: 8px;
border-radius: 50%;
background: var(--c-accent);
box-shadow: 0 0 0 4px rgba(156, 163, 175,0.15);
}
.article-body ol { counter-reset: ab-ol; }
.article-body ol li {
counter-increment: ab-ol;
}
.article-body ol li::before {
content: counter(ab-ol);
position: absolute;
left: -2px; top: 4px;
width: 26px; height: 26px;
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 50%;
background: var(--c-primary);
color: #fff;
font-family: 'Urbanist', 'Outfit', sans-serif;
font-size: .78rem;
font-weight: 700;
}
.article-body blockquote {
position: relative;
margin: 36px 0;
padding: 26px 30px 26px 64px;
background: linear-gradient(135deg, rgba(156, 163, 175,0.08) 0%, rgba(10,14,26,0.03) 100%);
border-left: 4px solid var(--c-accent);
border-radius: 16px;
font-family: 'Urbanist', 'Outfit', sans-serif;
font-size: 1.1rem;
line-height: 1.65;
font-style: italic;
color: var(--c-primary);
font-weight: 500;
}
.article-body blockquote::before {
content: '\201C';
position: absolute;
top: 4px; left: 18px;
font-family: Georgia, serif;
font-size: 4.5rem;
line-height: 1;
color: var(--c-accent);
opacity: .35;
}
/* ── TABLO (şablon — tüm yazılarda otomatik) ── */
.article-table { /* JS ile her bu kaba sarılır */
margin: 32px 0;
border: 1px solid var(--c-border);
border-radius: 14px;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
background: #fff;
box-shadow: 0 6px 20px rgba(10,14,26,.05);
}
.article-body table {
width: 100%;
min-width: 460px; /* dar ekranda kaydırılır, ezilmez */
border-collapse: collapse;
margin: 0;
font-family: 'Urbanist', 'Outfit', sans-serif;
font-size: .96rem;
line-height: 1.55;
}
.article-body thead th {
background: var(--c-bg-soft);
color: var(--c-primary);
font-weight: 700;
text-align: left;
padding: 14px 18px;
border-bottom: 1px solid var(--c-border);
white-space: nowrap;
}
.article-body tbody td {
padding: 13px 18px;
border-bottom: 1px solid var(--c-border);
color: #2a3344;
vertical-align: top;
}
.article-body tbody tr:last-child td { border-bottom: 0; }
.article-body tbody tr:nth-child(even) { background: color-mix(in srgb, var(--c-bg-soft) 50%, #fff); }
.article-body tbody tr:hover { background: color-mix(in srgb, var(--c-accent) 7%, #fff); }
.article-body tbody td:first-child { font-weight: 600; color: var(--c-primary); }
/* hücre içi marker link/strong tabloda sade kalsın */
.article-body table a { background-image: none; }
.article-cover {
aspect-ratio: 21/9;
overflow: hidden;
border-radius: var(--radius-lg);
margin-bottom: 40px;
background: var(--c-bg); /* sayfa zemini ile birebir → multiply sonrası beyaz tamamen kaybolur, kutu kalmaz */
}
.article-cover img { width: 100%; height: 100%; object-fit: cover; }
/* Beyaz-zeminli üretilmiş kapak grafiklerini (.png) sayfa tonuna kaynaştır.
multiply: beyaz piksel kabın yumuşak-mavi zeminine karışır, metin kalır.
Gerçek fotoğraflar (.jpg/.webp) etkilenmez. */
.article-cover,
.blog-card-cover,
.bf-cover,
.may-card-cover { isolation: isolate; }
.article-cover img[src$=".png"],
.blog-card-cover img[src$=".png"],
.bf-cover img[src$=".png"],
.may-card-cover img[src$=".png"] { mix-blend-mode: multiply; }
/* Makale (hero) kapağında beyaz grafik PNG'leri KIRPMA — tam göster (beyaz zemine karışır) */
.article-cover img[src$=".png"] { object-fit: contain; }
/* ==================== AOS-LITE animations ==================== */
[data-anim] {
opacity: 0;
transform: translateY(30px);
transition: all 0.7s cubic-bezier(.2,.7,.3,1);
}
[data-anim].visible {
opacity: 1;
transform: translateY(0);
}
/* MOBİL: scroll-reveal içeriği gizlemesin — IntersectionObserver hızlı scroll'da
bazı bölümleri kaçırıp opacity:0'da bırakıyordu (içerik boş kalıyordu). Mobilde
tüm içerik baştan görünür; reveal sadece masaüstünde. */
@media (max-width: 720px) {
[data-anim] { opacity: 1; transform: none; transition: none; }
}
/* ==================== RESPONSIVE ==================== */
@media (max-width: 992px) {
.hero { padding: calc(var(--header-h) + 40px) 0 60px; }
.hero .container { grid-template-columns: 1fr; }
.hero-visual { max-width: 360px; margin: 0 auto; }
.services-grid { grid-template-columns: repeat(2, 1fr); }
.stats-grid { grid-template-columns: repeat(2, 1fr); }
.about-grid { grid-template-columns: 1fr; gap: 40px; }
.blog-grid { grid-template-columns: repeat(2, 1fr); }
.partners-grid { grid-template-columns: repeat(4, 1fr); }
.cta-band { grid-template-columns: 1fr; padding: 40px 32px; text-align: center; }
.cta-band .actions { text-align: center; }
.contact-grid { grid-template-columns: 1fr; }
.footer-top { grid-template-columns: 1fr 1fr; }
.footer-brand { grid-column: 1 / -1; }
.footer-col::before { display: none; }
}
@media (max-width: 720px) {
:root { --header-h: 72px; }
.section { padding: 64px 0; }
.nav-toggle { display: block; }
.main-nav {
position: fixed;
top: var(--header-h);
right: 0;
width: 86%;
max-width: 360px;
height: calc(100vh - var(--header-h));
background: #fff;
flex-direction: column;
align-items: flex-start;
padding: 32px 28px;
gap: 0;
border-left: 1px solid var(--c-border);
transform: translateX(100%);
transition: transform var(--transition);
box-shadow: var(--shadow-lg);
}
.main-nav.open { transform: translateX(0); }
.main-nav > ul {
flex-direction: column;
gap: 0;
width: 100%;
align-items: stretch;
}
.main-nav li { width: 100%; border-bottom: 1px solid var(--c-border); }
.main-nav a {
display: block;
padding: 16px 0;
font-size: 1rem;
}
.main-nav .submenu {
position: static;
opacity: 1;
visibility: visible;
transform: none;
background: transparent;
border: 0;
box-shadow: none;
padding: 0 0 8px 16px;
min-width: 0;
}
.main-nav .submenu a { padding: 10px 0; font-size: 0.95rem; }
.main-nav .caret { display: none; }
.btn-cta-pill {
display: none;
}
.site-header .container .btn-cta-pill {
display: none;
}
.header-lang {
padding: 3px;
margin-right: 8px;
}
.header-lang-opt {
min-width: 30px;
height: 26px;
padding: 0 8px;
font-size: 0.72rem;
}
.services-grid, .stats-grid, .blog-grid, .partners-grid {
grid-template-columns: 1fr;
}
.partners-grid { grid-template-columns: repeat(2, 1fr); }
.form-row { grid-template-columns: 1fr; }
.contact-form { padding: 28px 20px; }
.contact-info { padding: 32px 24px; }
.footer-top { grid-template-columns: 1fr 1fr; gap: 32px; }
.footer-brand { grid-column: 1 / -1; }
.footer-col::before { display: none; }
.footer-bottom { flex-direction: column; text-align: center; }
}
/* ============================================================
BLOG PAGE
============================================================ */
.blog-intro {
padding: 70px 0 50px;
text-align: center;
}
.blog-intro-eyebrow {
display: inline-block;
font-family: 'Urbanist', 'Outfit', sans-serif;
font-size: .78rem;
font-weight: 600;
color: var(--c-accent);
letter-spacing: .22em;
text-transform: uppercase;
margin-bottom: 18px;
padding: 6px 16px;
border-radius: 999px;
background: rgba(156, 163, 175,0.08);
border: 1px solid rgba(156, 163, 175,0.2);
}
.blog-intro-title {
font-family: 'Urbanist', 'Outfit', sans-serif;
font-size: clamp(2.2rem, 4.6vw, 3.6rem);
font-weight: 800;
line-height: 1.18;
letter-spacing: -0.025em;
color: var(--c-primary);
margin: 0 auto 22px;
max-width: 980px;
}
.blog-intro-title .highlight {
color: var(--c-accent);
font-weight: 800;
position: relative;
white-space: nowrap;
display: inline-block;
padding-bottom: .12em;
}
.blog-intro-title .highlight::after {
content: '';
position: absolute;
left: -2%; right: -2%;
bottom: -.05em;
height: .28em;
background-image: url("data:image/svg+xml;utf8,");
background-repeat: no-repeat;
background-size: 100% 100%;
}
.blog-intro-lead {
font-size: 1rem;
line-height: 1.85;
color: var(--c-muted);
max-width: 760px;
margin: 0 auto;
}
/* BLOG - INTRO (ar-hero dili) — crumb yok, header offset'i abx-first verir */
.blog-abx { overflow: visible; }
.blog-abx .abx-first { padding-top: calc(var(--header-h) + clamp(36px, 4vw, 56px)); padding-bottom: clamp(40px, 5vw, 70px); }
/* mobilde hero üst boşluğu (dijital-pazarlama hero'su ile aynı nefes payı) */
@media (max-width: 600px) {
.blog-abx .abx-first { padding-top: calc(var(--header-h) + 76px); }
}
.blog-abx .ar-hero-intro { margin-bottom: clamp(36px, 4.5vw, 60px); }
.blog-abx .ar-hero-title { overflow-wrap: break-word; }
/* BLOG - FEATURED (öne çıkan büyük kart) */
.blog-featured { padding: 6px 0 30px; }
.bf-card {
position: relative;
display: grid;
grid-template-columns: 1.12fr 1fr;
background: #fff;
border: 1px solid var(--c-border);
border-radius: var(--radius-lg);
overflow: hidden;
box-shadow: var(--shadow-md);
transition: transform .35s cubic-bezier(.2,.7,.3,1), box-shadow .35s ease;
}
.bf-card:hover {
transform: translateY(-4px);
box-shadow: var(--shadow-lg);
}
.bf-cover {
position: relative;
display: block;
overflow: hidden;
background: #fff; /* kart zemini ile aynı → multiply sonrası beyaz kapak kaynaşır */
min-height: 360px;
}
.bf-cover img {
position: absolute; inset: 0;
width: 100%; height: 100%;
object-fit: cover;
transition: transform .9s cubic-bezier(.2,.7,.3,1);
}
.bf-card:hover .bf-cover img { transform: scale(1.045); }
.bf-flag {
position: absolute;
top: 18px; left: 18px;
z-index: 2;
display: inline-flex;
align-items: center;
gap: 7px;
padding: 8px 15px;
border-radius: 999px;
background: var(--c-accent);
color: #fff;
font-family: 'Urbanist', 'Outfit', sans-serif;
font-size: .76rem;
font-weight: 700;
letter-spacing: .04em;
box-shadow: 0 6px 16px rgba(31,167,232,0.32);
}
.bf-flag i { font-size: .95em; }
/* L-bracket crop mark — dekor imzası */
.bf-corner {
position: absolute;
top: 16px; right: 16px;
width: 26px; height: 26px;
border-top: 2px solid rgba(255,255,255,.9);
border-right: 2px solid rgba(255,255,255,.9);
z-index: 2;
pointer-events: none;
}
.bf-body {
position: relative;
padding: clamp(28px, 3.4vw, 52px);
display: flex;
flex-direction: column;
justify-content: center;
gap: 16px;
}
/* hairline ayraç + alt-sağ crop mark */
.bf-body::after {
content: '';
position: absolute;
right: 22px; bottom: 22px;
width: 22px; height: 22px;
border-bottom: 2px solid var(--c-border);
border-right: 2px solid var(--c-border);
pointer-events: none;
}
.bf-cat {
align-self: flex-start;
font-family: 'Urbanist', 'Outfit', sans-serif;
font-size: .74rem;
font-weight: 700;
letter-spacing: .16em;
text-transform: uppercase;
color: var(--c-accent);
}
.bf-title {
font-family: 'Urbanist', 'Outfit', sans-serif;
font-size: clamp(1.5rem, 2.5vw, 2.25rem);
font-weight: 800;
line-height: 1.18;
letter-spacing: -0.02em;
color: var(--c-primary);
margin: 0;
transition: color .25s ease;
}
.bf-title a { color: inherit; }
.bf-title a:hover { color: inherit; }
.bf-excerpt {
font-size: 1.02rem;
line-height: 1.78;
color: var(--c-muted);
margin: 0;
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
}
.bf-meta {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 8px 20px;
font-family: 'Urbanist', 'Outfit', sans-serif;
font-size: .82rem;
font-weight: 500;
color: var(--c-muted);
}
.bf-meta span { display: inline-flex; align-items: center; gap: 7px; }
.bf-meta i { font-size: .92em; color: var(--c-accent); opacity: .9; }
.bf-readmore {
margin-top: 6px;
align-self: flex-start;
display: inline-flex;
align-items: center;
gap: 9px;
padding: 12px 24px;
border-radius: 999px;
background: var(--c-primary);
color: #fff;
font-family: 'Urbanist', 'Outfit', sans-serif;
font-size: .9rem;
font-weight: 600;
transition: background .25s ease, gap .25s ease, transform .25s ease;
}
.bf-readmore:hover { background: var(--c-accent); gap: 13px; color: #fff; transform: translateY(-2px); }
.bf-readmore i { transition: transform .25s ease; }
.bf-card:hover .bf-readmore i { transform: translateX(3px); }
@media (max-width: 860px) {
.bf-card { grid-template-columns: 1fr; }
.bf-cover { min-height: 0; aspect-ratio: 16 / 9; }
.bf-body::after { display: none; }
}
.blog-list { padding: 20px 0 100px; }
.blog-list-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 32px 28px;
}
.blog-card {
display: flex;
flex-direction: column;
background: #fff;
border-radius: 14px;
overflow: hidden;
box-shadow: 0 4px 18px rgba(10,14,26,0.06);
transition: transform .3s ease, box-shadow .3s ease;
}
.blog-card:hover {
transform: translateY(-4px);
box-shadow: 0 14px 32px rgba(10,14,26,0.10);
}
.blog-card-cover {
position: relative;
aspect-ratio: 16 / 10;
overflow: hidden;
background: #fff; /* kart zemini ile aynı → multiply sonrası beyaz kapak kaynaşır */
display: block;
}
.blog-card-cover img {
position: absolute; inset: 0;
width: 100%; height: 100%;
object-fit: cover;
transition: transform .8s cubic-bezier(.2,.7,.3,1);
}
.blog-card:hover .blog-card-cover img { transform: scale(1.04); }
.blog-card-date,
.blog-card-time {
position: absolute;
z-index: 2;
display: inline-flex;
align-items: center;
gap: 6px;
padding: 7px 12px;
border-radius: 999px;
background: rgba(255,255,255,0.96);
backdrop-filter: blur(8px);
color: var(--c-primary);
font-family: 'Urbanist', 'Outfit', sans-serif;
font-size: .76rem;
font-weight: 600;
letter-spacing: .02em;
box-shadow: 0 4px 12px rgba(10,14,26,0.10);
}
.blog-card-date { top: 14px; left: 14px; }
.blog-card-time {
top: 14px; right: 14px;
background: var(--c-primary);
color: #fff;
}
.blog-card-date i, .blog-card-time i { font-size: .85em; opacity: .85; }
.blog-card-body {
flex: 1 1 auto;
padding: 26px 28px 30px;
display: flex;
flex-direction: column;
gap: 14px;
}
.blog-card-readmore {
margin-top: auto;
padding-top: 4px;
display: inline-flex;
align-items: center;
gap: 8px;
align-self: flex-start;
font-family: 'Urbanist', 'Outfit', sans-serif;
font-size: .88rem;
font-weight: 600;
color: var(--c-primary);
transition: color .25s ease, gap .25s ease;
}
.blog-card-readmore i { transition: transform .25s ease; }
.blog-card:hover .blog-card-readmore {
color: var(--c-accent);
gap: 12px;
}
.blog-card:hover .blog-card-readmore i { transform: translateX(3px); }
.blog-card-title {
font-family: 'Urbanist', 'Outfit', sans-serif;
font-size: 1.08rem;
font-weight: 700;
line-height: 1.35;
letter-spacing: -0.012em;
color: var(--c-primary);
margin: 0;
transition: color .25s ease;
}
.blog-card-title a { color: inherit; }
.blog-card-title a:hover { color: inherit; }
.blog-card-excerpt {
font-size: .92rem;
line-height: 1.65;
color: var(--c-muted);
margin: 0;
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
}
/* Pagination */
.blog-pager {
display: flex;
align-items: center;
justify-content: center;
gap: 6px;
margin-top: 72px;
}
.blog-pager a, .blog-pager span {
min-width: 42px;
height: 42px;
padding: 0 14px;
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 10px;
font-family: 'Urbanist', 'Outfit', sans-serif;
font-weight: 600;
font-size: .9rem;
color: var(--c-primary);
background: transparent;
transition: all .25s ease;
}
.blog-pager a:hover { background: var(--c-bg-soft); color: var(--c-accent); }
.blog-pager .is-active { background: var(--c-primary); color: #fff; }
/* BLOG - EMPTY STATE */
.blog-empty {
max-width: 560px;
margin: 30px auto 80px;
padding: 50px 24px 60px;
text-align: center;
}
.blog-empty-eyebrow {
display: inline-block;
font-size: .72rem;
font-weight: 600;
letter-spacing: .14em;
text-transform: uppercase;
color: var(--c-accent);
padding: 6px 14px;
border: 1px solid rgba(156, 163, 175,.3);
border-radius: 999px;
background: rgba(156, 163, 175,.06);
margin-bottom: 22px;
}
.blog-empty-title {
font-size: clamp(1.6rem, 3vw, 2.2rem);
font-weight: 700;
letter-spacing: -.02em;
color: var(--c-primary);
line-height: 1.2;
margin: 0 0 14px;
}
.blog-empty-title .highlight {
color: var(--c-accent);
font-weight: 800;
position: relative;
display: inline-block;
}
.blog-empty-title .highlight::after {
content: '';
position: absolute;
left: 0; right: 0; bottom: -2px;
height: 8px;
background: url("data:image/svg+xml;utf8,") repeat-x left bottom / auto 8px;
opacity: .85;
}
.blog-empty-lead {
font-size: 1rem;
line-height: 1.65;
color: var(--c-muted, #5b6478);
margin: 0 0 26px;
}
.blog-empty-link {
display: inline-flex; align-items: center; gap: 8px;
font-size: .95rem; font-weight: 600;
color: var(--c-primary);
text-decoration: none;
padding-bottom: 3px;
border-bottom: 1.5px solid var(--c-primary);
transition: gap .2s ease, color .2s ease, border-color .2s ease;
}
.blog-empty-link:hover {
gap: 12px;
color: var(--c-accent);
border-bottom-color: var(--c-accent);
}
.blog-empty-link i { font-size: .9rem; }
@media (max-width: 992px) {
.blog-list-grid { grid-template-columns: repeat(2, 1fr); gap: 40px 24px; }
}
@media (max-width: 640px) {
.blog-head { padding: 40px 0 30px; }
.blog-list-grid { grid-template-columns: 1fr; gap: 40px; }
}
/* ============================================================
ARTICLE / SINGLE POST (yazi.php)
============================================================ */
.article-progress {
position: fixed;
top: 0; left: 0;
height: 3px;
width: 0;
background: linear-gradient(90deg, var(--c-accent), #6b7280);
z-index: 1000;
transition: width .12s linear;
}
.article-hero {
padding: 56px 0 32px;
text-align: center;
}
.article-hero .container { max-width: 880px; }
.article-cat {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 7px 16px;
border-radius: 999px;
background: rgba(156, 163, 175,0.10);
border: 1px solid rgba(156, 163, 175,0.22);
color: var(--c-accent);
font-family: 'Urbanist', 'Outfit', sans-serif;
font-size: .78rem;
font-weight: 600;
letter-spacing: .14em;
text-transform: uppercase;
margin-bottom: 22px;
transition: background .25s ease, transform .25s ease;
}
.article-cat:hover { background: rgba(156, 163, 175,0.18); transform: translateY(-1px); color: var(--c-accent); }
.article-cat i { font-size: .9em; }
.article-title {
font-family: 'Urbanist', 'Outfit', sans-serif;
font-size: clamp(1.9rem, 3.8vw, 2.9rem);
font-weight: 800;
line-height: 1.2;
letter-spacing: -0.022em;
color: var(--c-primary);
margin: 0 auto 18px;
max-width: 820px;
}
.article-lead {
font-size: 1.05rem;
line-height: 1.7;
color: var(--c-muted);
max-width: 720px;
margin: 0 auto 26px;
}
.article-meta {
display: inline-flex;
flex-wrap: wrap;
align-items: center;
justify-content: center;
gap: 10px 14px;
padding: 10px 22px;
border-radius: 999px;
background: var(--c-bg-soft);
color: var(--c-muted);
font-family: 'Urbanist', 'Outfit', sans-serif;
font-size: .86rem;
font-weight: 500;
}
.article-meta-item { display: inline-flex; align-items: center; gap: 6px; }
.article-meta-item i { color: var(--c-accent); font-size: .95em; }
.article-meta-sep {
width: 4px; height: 4px; border-radius: 50%;
background: var(--c-border);
font-size: 0; line-height: 0;
}
/* ── YAZI: ar-hero (crumb yok, header offset abx-first'te) ── */
.article-abx { overflow: visible; }
.article-abx .abx-first {
padding-top: calc(var(--header-h) + clamp(28px, 4vw, 50px));
padding-bottom: clamp(6px, 1.5vw, 16px);
}
/* mobilde hero üst boşluğu (dijital-pazarlama hero'su ile aynı nefes payı) */
@media (max-width: 600px) {
.article-abx .abx-first { padding-top: calc(var(--header-h) + 76px); }
}
.article-abx .ar-hero-intro { margin-bottom: 0; max-width: 940px; }
.article-abx .ar-hero-title {
font-size: clamp(2rem, 4vw, 3.15rem);
font-weight: 800;
letter-spacing: -0.012em;
line-height: 1.12;
max-width: 24ch;
overflow-wrap: break-word;
}
.article-abx .ar-hero-meta { flex-wrap: wrap; justify-content: center; gap: 10px 14px; }
.ar-hero-eyebrow-link { color: var(--c-accent); transition: color .2s ease; }
.ar-hero-eyebrow-link:hover { color: var(--c-accent-2); }
.ar-hero-eyebrow-muted { color: var(--c-muted); text-transform: none; letter-spacing: .03em; }
.ar-hero-eyebrow-muted i { font-size: .95em; opacity: .8; margin-right: 1px; }
.article-section { padding: 16px 0 60px; }
.article-body h2 { scroll-margin-top: 100px; }
/* İÇİNDEKİLER (TOC) — JS ile üretilir */
.article-toc {
max-width: 760px;
margin: 6px auto 40px;
background: linear-gradient(165deg, #fbfdff 0%, var(--c-bg-soft) 100%);
border: 1px solid var(--c-border);
border-radius: 16px;
padding: 22px 26px;
position: relative;
}
.article-toc-head {
display: flex;
align-items: center;
gap: 9px;
font-family: 'Urbanist', 'Outfit', sans-serif;
font-size: .72rem;
font-weight: 700;
letter-spacing: .14em;
text-transform: uppercase;
color: var(--c-accent);
margin-bottom: 14px;
}
.article-toc-head i { font-size: 1em; }
.article-toc ol {
list-style: none;
counter-reset: toc;
margin: 0; padding: 0;
display: grid;
gap: 9px;
}
.article-toc li { counter-increment: toc; }
.article-toc a {
display: flex;
gap: 11px;
align-items: baseline;
font-family: 'Urbanist', 'Outfit', sans-serif;
font-size: .96rem;
line-height: 1.45;
color: var(--c-primary);
text-decoration: none;
transition: color .2s ease;
}
.article-toc a::before {
content: counter(toc, decimal-leading-zero);
font-family: 'JetBrains Mono', ui-monospace, monospace;
font-size: .76rem;
font-weight: 600;
color: var(--c-accent);
flex-shrink: 0;
}
.article-toc a:hover { color: var(--c-accent); }
/* BACK TO TOP */
.to-top {
position: fixed;
right: clamp(16px, 2.5vw, 32px);
bottom: clamp(16px, 2.5vw, 32px);
width: 46px; height: 46px;
display: flex; align-items: center; justify-content: center;
background: var(--c-primary);
color: #fff;
border: 0;
border-radius: 50%;
font-size: 1.15rem;
cursor: pointer;
opacity: 0;
visibility: hidden;
transform: translateY(12px);
transition: opacity .3s ease, transform .3s ease, visibility .3s, background .25s ease;
z-index: 90;
box-shadow: 0 10px 26px rgba(10,14,26,.22);
}
.to-top.is-on { opacity: 1; visibility: visible; transform: translateY(0); }
.to-top:hover { background: var(--c-accent); transform: translateY(-2px); }
.article-section .article-cover { max-width: 1080px; margin: 0 auto 48px; }
.article-share {
max-width: 760px;
margin: 56px auto 0;
padding: 28px 0 0;
border-top: 1px solid var(--c-border);
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
gap: 16px;
}
.article-share-label {
font-family: 'Urbanist', 'Outfit', sans-serif;
font-weight: 700;
color: var(--c-primary);
font-size: .95rem;
}
.article-share-list {
display: flex;
flex-wrap: wrap;
gap: 8px;
}
.article-share-btn {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 9px 16px;
border-radius: 999px;
background: #fff;
border: 1px solid var(--c-border);
color: var(--c-primary);
font-family: 'Urbanist', 'Outfit', sans-serif;
font-size: .82rem;
font-weight: 600;
cursor: pointer;
transition: all .25s ease;
}
.article-share-btn i { font-size: 1em; }
.article-share-btn:hover {
transform: translateY(-2px);
box-shadow: 0 8px 18px rgba(10,14,26,0.10);
color: #fff;
}
.article-share-btn.is-tw:hover { background: #0a0a0a; border-color: #0a0a0a; }
.article-share-btn.is-fb:hover { background: #1877f2; border-color: #1877f2; }
.article-share-btn.is-li:hover { background: #0a66c2; border-color: #0a66c2; }
.article-share-btn.is-wa:hover { background: #25d366; border-color: #25d366; }
.article-share-btn.is-copy:hover { background: var(--c-primary); border-color: var(--c-primary); }
.article-share-btn.is-copied { background: var(--c-accent); border-color: var(--c-accent); color: #fff; }
.related-posts {
padding: 70px 0 40px;
background: transparent;
}
.related-head {
text-align: center;
margin-bottom: 40px;
}
.related-head .eyebrow {
display: inline-block;
font-family: 'Urbanist', 'Outfit', sans-serif;
font-size: .76rem;
font-weight: 600;
color: var(--c-accent);
letter-spacing: .22em;
text-transform: uppercase;
margin-bottom: 12px;
padding: 6px 16px;
border-radius: 999px;
background: rgba(156, 163, 175,0.08);
border: 1px solid rgba(156, 163, 175,0.2);
}
.related-head h2 {
font-family: 'Urbanist', 'Outfit', sans-serif;
font-size: clamp(1.6rem, 3vw, 2.2rem);
font-weight: 800;
color: var(--c-primary);
letter-spacing: -0.02em;
margin: 0 0 10px;
}
.related-sub {
color: var(--c-muted);
font-size: .98rem;
margin: 0;
}
/* "Bunlar da ilginizi çekebilir" */
.may-like {
padding: 60px 0 100px;
background: transparent;
}
.may-like-head {
text-align: center;
max-width: 720px;
margin: 0 auto 48px;
}
.may-like-head .eyebrow {
display: inline-flex;
align-items: center;
gap: 8px;
font-family: 'Urbanist', 'Outfit', sans-serif;
font-size: .76rem;
font-weight: 700;
color: var(--c-accent);
letter-spacing: .22em;
text-transform: uppercase;
margin-bottom: 14px;
padding: 7px 18px;
border-radius: 999px;
background: rgba(156, 163, 175,0.10);
border: 1px solid rgba(156, 163, 175,0.22);
}
.may-like-head .eyebrow i { font-size: .95em; }
.may-like-head h2 {
font-family: 'Urbanist', 'Outfit', sans-serif;
font-size: clamp(1.7rem, 3.2vw, 2.4rem);
font-weight: 800;
color: var(--c-primary);
letter-spacing: -0.024em;
line-height: 1.2;
margin: 0 0 10px;
}
.may-like-sub {
color: var(--c-muted);
font-size: 1rem;
margin: 0;
line-height: 1.55;
}
.may-like-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 24px;
margin-bottom: 48px;
}
.may-card {
display: flex;
flex-direction: column;
background: #fff;
border-radius: 18px;
overflow: hidden;
border: 1px solid var(--c-border);
transition: transform .35s ease, box-shadow .35s ease, border-color .35s ease;
}
.may-card:hover {
transform: translateY(-6px);
box-shadow: 0 20px 40px rgba(10,14,26,0.10);
border-color: rgba(156, 163, 175,0.25);
}
.may-card-cover {
position: relative;
aspect-ratio: 16 / 10;
overflow: hidden;
background: #fff; /* kart zemini ile aynı → multiply sonrası beyaz kapak kaynaşır */
display: block;
}
.may-card-cover img {
position: absolute; inset: 0;
width: 100%; height: 100%;
object-fit: cover;
transition: transform .8s cubic-bezier(.2,.7,.3,1);
}
.may-card:hover .may-card-cover img { transform: scale(1.06); }
.may-card-placeholder {
position: absolute; inset: 0;
display: flex;
align-items: center;
justify-content: center;
font-size: 3rem;
color: rgba(10,14,26,0.18);
background: linear-gradient(135deg, var(--c-bg-soft), #eef2f7);
}
.may-card-body {
padding: 22px 24px 26px;
display: flex;
flex-direction: column;
gap: 12px;
flex: 1;
}
.may-card-meta {
display: flex;
align-items: center;
gap: 10px;
font-family: 'Urbanist', 'Outfit', sans-serif;
font-size: .76rem;
font-weight: 600;
color: var(--c-muted);
}
.may-card-cat {
display: inline-block;
padding: 4px 10px;
border-radius: 999px;
background: rgba(156, 163, 175,0.10);
color: var(--c-accent);
letter-spacing: .04em;
text-transform: uppercase;
font-size: .68rem;
}
.may-card-time {
display: inline-flex;
align-items: center;
gap: 5px;
}
.may-card-time i { font-size: .9em; }
.may-card-title {
font-family: 'Urbanist', 'Outfit', sans-serif;
font-size: 1.08rem;
font-weight: 700;
line-height: 1.35;
letter-spacing: -0.012em;
color: var(--c-primary);
margin: 0;
transition: color .25s ease;
}
.may-card-title a { color: inherit; }
.may-card:hover .may-card-title { color: var(--c-accent); }
.may-card-excerpt {
font-size: .9rem;
line-height: 1.6;
color: var(--c-muted);
margin: 0;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
.may-card-go {
margin-top: auto;
display: inline-flex;
align-items: center;
gap: 8px;
font-family: 'Urbanist', 'Outfit', sans-serif;
font-size: .85rem;
font-weight: 600;
color: var(--c-primary);
transition: gap .25s ease, color .25s ease;
align-self: flex-start;
}
.may-card-go i { transition: transform .25s ease; }
.may-card:hover .may-card-go {
color: var(--c-accent);
gap: 12px;
}
.may-card:hover .may-card-go i { transform: translate(2px, -2px); }
.may-like-foot {
text-align: center;
}
.may-like-foot .btn {
display: inline-flex;
align-items: center;
gap: 10px;
background: var(--c-primary);
color: #fff;
border: 1px solid var(--c-primary);
box-shadow: none;
transition: all .25s ease;
}
.may-like-foot .btn:hover {
background: var(--c-primary-2);
color: #fff;
border-color: var(--c-primary-2);
transform: translateY(-2px);
box-shadow: none;
}
.may-like-foot .btn i { transition: transform .25s ease; }
.may-like-foot .btn:hover i { transform: translateX(4px); }
@media (max-width: 992px) {
.may-like-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
.may-like-grid { grid-template-columns: 1fr; }
.may-like { padding: 60px 0 80px; }
}
@media (max-width: 720px) {
.article-hero { padding: 40px 0 24px; }
.article-share { flex-direction: column; align-items: flex-start; }
.article-meta { padding: 10px 16px; font-size: .82rem; }
}
/* ============================================================
BRANDS PAGE
============================================================ */
.brands-intro {
padding: 70px 0 30px;
text-align: center;
}
.brands-page-title {
font-family: 'Urbanist', 'Outfit', sans-serif;
font-size: clamp(2.2rem, 4.6vw, 3.6rem);
font-weight: 800;
line-height: 1.18;
letter-spacing: -0.025em;
color: var(--c-primary);
margin: 0 auto 26px;
max-width: 1000px;
}
.brands-page-title .highlight {
color: var(--c-accent);
font-weight: 800;
position: relative;
white-space: nowrap;
display: inline-block;
padding-bottom: .12em;
}
.brands-page-title .highlight::after {
content: '';
position: absolute;
left: -2%; right: -2%;
bottom: -.05em;
height: .28em;
background-image: url("data:image/svg+xml;utf8,");
background-repeat: no-repeat;
background-size: 100% 100%;
}
.brands-page-lead {
font-size: 1rem;
line-height: 1.85;
color: var(--c-muted);
max-width: 980px;
margin: 0 auto;
}
.brands-lead-link {
color: var(--c-primary);
text-decoration: underline;
text-decoration-thickness: 1px;
text-underline-offset: 4px;
font-weight: 500;
}
.brands-lead-link:hover {
color: var(--c-accent);
}
.brands-list-section {
padding: 70px 0 100px;
text-align: center;
}
.brands-sub-title {
font-family: 'Urbanist', 'Outfit', sans-serif;
font-size: clamp(1.7rem, 3vw, 2.4rem);
font-weight: 800;
letter-spacing: -0.02em;
color: var(--c-primary);
margin: 0 0 18px;
}
.brands-sub-title .highlight {
color: var(--c-accent);
font-weight: 800;
position: relative;
white-space: nowrap;
display: inline-block;
padding-bottom: .12em;
}
.brands-sub-title .highlight::after {
content: '';
position: absolute;
left: -3%; right: -3%;
bottom: -.05em;
height: .3em;
background-image: url("data:image/svg+xml;utf8,");
background-repeat: no-repeat;
background-size: 100% 100%;
}
.brands-sub-lead {
font-size: .98rem;
line-height: 1.7;
color: var(--c-muted);
max-width: 760px;
margin: 0 auto 50px;
}
.brands-grid {
display: grid;
grid-template-columns: repeat(5, 1fr);
gap: 20px;
}
.brand-card {
background: #fff;
border: 1px solid var(--c-border);
border-radius: 14px;
aspect-ratio: 4 / 3;
display: grid;
place-items: center;
padding: 8px 8px;
transition: transform .25s ease, box-shadow .3s ease, border-color .25s ease;
text-decoration: none;
}
.brand-card:hover {
transform: translateY(-6px);
border-color: transparent;
box-shadow: 0 18px 38px rgba(10,14,26,0.10);
}
.brand-card img {
max-height: 150px;
max-width: 100%;
width: auto;
object-fit: contain;
image-rendering: -webkit-optimize-contrast;
}
.brand-fallback {
font-family: 'Urbanist', 'Outfit', sans-serif;
font-weight: 700;
color: var(--c-muted);
font-size: 1rem;
text-align: center;
}
@media (max-width: 1100px) {
.brands-grid { grid-template-columns: repeat(4, 1fr); }
}
@media (max-width: 820px) {
.brands-grid { grid-template-columns: repeat(3, 1fr); }
.brands-intro { padding: 50px 0 20px; }
.brands-list-section { padding: 50px 0 70px; }
}
@media (max-width: 540px) {
.brands-grid { grid-template-columns: repeat(2, 1fr); gap: 14px; }
.brand-card { padding: 8px 8px; }
.brand-card img { max-height: 108px; }
}
/* ============================================================
SERVICES PAGE
============================================================ */
/* HİZMETLER — ar-hero (crumb yok, header offset abx-first'te) */
.services-abx { overflow: visible; }
.services-abx .abx-first {
padding-top: calc(var(--header-h) + clamp(36px, 4vw, 56px));
padding-bottom: clamp(18px, 2.5vw, 34px);
}
.services-abx .ar-hero-intro { margin-bottom: 0; max-width: 900px; }
.services-abx .ar-hero-title { overflow-wrap: break-word; }
/* mobilde hero üst nefes payı (diğer şablonlarla aynı standart) */
@media (max-width: 600px) {
.services-abx .abx-first { padding-top: calc(var(--header-h) + 76px); }
}
.services-intro {
padding: 70px 0 30px;
text-align: center;
}
.services-page-title {
font-family: 'Urbanist', 'Outfit', sans-serif;
font-size: clamp(2.2rem, 4.6vw, 3.6rem);
font-weight: 800;
line-height: 1.18;
letter-spacing: -0.025em;
color: var(--c-primary);
margin: 0 auto 26px;
max-width: 1000px;
}
.services-page-title .highlight {
color: var(--c-accent);
font-weight: 800;
position: relative;
white-space: nowrap;
display: inline-block;
padding-bottom: .12em;
}
.services-page-title .highlight::after {
content: '';
position: absolute;
left: -2%; right: -2%;
bottom: -.05em;
height: .28em;
background-image: url("data:image/svg+xml;utf8,");
background-repeat: no-repeat;
background-size: 100% 100%;
}
.services-page-lead {
font-size: 1rem;
line-height: 1.85;
color: var(--c-muted);
max-width: 880px;
margin: 0 auto;
}
.services-page-section {
padding: 24px 0 90px;
}
.services-page-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 26px;
}
/* Hizmetler kartları — görselsiz: ikon çipi + sıra no + hairline footer link */
.services-page-grid .ss-card {
align-items: stretch;
text-align: left;
padding: 30px 30px 26px;
--ic: var(--c-accent);
}
.services-page-grid .ss-card.tone-0 { --ic: #e85d3e; }
.services-page-grid .ss-card.tone-1 { --ic: #15a25a; }
.services-page-grid .ss-card.tone-2 { --ic: #2a6df4; }
.ss-card-top {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 24px;
}
.ss-ic {
width: 54px; height: 54px;
flex-shrink: 0;
display: flex; align-items: center; justify-content: center;
background: color-mix(in srgb, var(--ic) 13%, #fff);
color: var(--ic);
border-radius: 15px;
font-size: 1.5rem;
transition: transform .3s cubic-bezier(.2,.7,.3,1);
}
.ss-card:hover .ss-ic { transform: scale(1.08) rotate(-4deg); }
.ss-cat {
font-family: 'Urbanist', 'Outfit', sans-serif;
font-size: .68rem;
font-weight: 700;
letter-spacing: .12em;
text-transform: uppercase;
color: var(--ic);
background: color-mix(in srgb, var(--ic) 12%, #fff);
padding: 5px 12px;
border-radius: 999px;
}
.ss-badge {
display: inline-block;
vertical-align: middle;
margin-left: 8px;
font-family: 'Urbanist', 'Outfit', sans-serif;
font-size: .6rem;
font-weight: 700;
letter-spacing: .06em;
text-transform: uppercase;
color: #fff;
background: var(--ic);
padding: 3px 9px;
border-radius: 999px;
transform: translateY(-2px);
}
.services-page-grid .ss-title {
font-size: 1.18rem;
margin-bottom: 10px;
text-align: left;
}
.services-page-grid .ss-summary { text-align: left; margin-bottom: 22px; }
.services-page-grid .ss-link {
margin-top: auto;
width: 100%;
padding-top: 16px;
border-top: 1px solid var(--c-border);
justify-content: space-between;
color: var(--c-primary);
font-weight: 600;
}
.services-page-grid .ss-card:hover .ss-link { color: var(--ic); gap: 6px; }
.services-page-grid .ss-link i { transition: transform .25s ease; }
.services-page-grid .ss-card:hover .ss-link i { transform: translateX(4px); }
.ss-summary {
font-size: .94rem;
line-height: 1.65;
color: var(--c-muted);
margin: 0 0 20px;
flex-grow: 1;
}
@media (max-width: 980px) {
.services-page-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
.services-intro { padding: 50px 0 20px; }
.services-page-section { padding: 16px 0 64px; }
.services-page-grid { grid-template-columns: 1fr; gap: 16px; }
.services-page-grid .ss-card { padding: 22px 20px 20px; }
}
/* Services — boş durum (henüz hizmet eklenmemiş) */
.services-empty {
max-width: 520px;
margin: 20px auto 0;
padding: 56px 36px 48px;
text-align: center;
background: #fff;
border: 1px solid var(--c-border, #e7eaf0);
border-radius: 22px;
box-shadow: 0 12px 40px rgba(11, 29, 62, .06);
}
.services-empty-illu {
width: 84px;
height: 84px;
margin: 0 auto 22px;
border-radius: 22px;
background: linear-gradient(140deg, #f9fafb 0%, #f9fafb 100%);
border: 1px solid rgba(156, 163, 175, .2);
display: grid;
place-items: center;
color: var(--c-accent, #9ca3af);
font-size: 2.05rem;
}
.services-empty-title {
font-family: var(--c-font-heading, 'DM Sans', sans-serif);
font-size: 1.28rem;
font-weight: 700;
color: var(--c-primary, #0a0e1a);
margin: 0 0 10px;
letter-spacing: -.015em;
}
.services-empty-lead {
font-size: .95rem;
line-height: 1.6;
color: var(--c-muted, #5b6478);
margin: 0 0 26px;
}
.services-empty-btn {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 12px 24px;
background: var(--c-primary, #0a0e1a);
color: #fff;
border-radius: 999px;
font-family: var(--c-font-heading, 'DM Sans', sans-serif);
font-size: .9rem;
font-weight: 600;
text-decoration: none;
transition: all .2s ease;
}
.services-empty-btn:hover {
background: var(--c-accent, #9ca3af);
color: #fff;
text-decoration: none;
transform: translateY(-1px);
}
@media (max-width: 600px) {
.services-empty { padding: 44px 24px 36px; border-radius: 18px; }
.services-empty-illu { width: 72px; height: 72px; font-size: 1.75rem; }
.services-empty-title { font-size: 1.14rem; }
}
/* Services CTA — sade, açık */
.services-cta-section {
padding: 20px 0 100px;
}
.services-cta {
background: #fff;
border: 1px solid var(--c-border);
border-radius: 24px;
padding: 64px 40px;
text-align: center;
box-shadow: 0 18px 50px rgba(10,14,26,0.05);
max-width: 880px;
margin: 0 auto;
position: relative;
overflow: hidden;
}
.services-cta::before {
content: '';
position: absolute;
inset: 0;
background:
radial-gradient(ellipse 60% 50% at 0% 0%, rgba(156, 163, 175,0.06), transparent 60%),
radial-gradient(ellipse 60% 50% at 100% 100%, rgba(156, 163, 175,0.05), transparent 60%);
pointer-events: none;
}
.services-cta > * { position: relative; z-index: 1; }
.services-cta-eyebrow {
display: inline-block;
font-family: 'Urbanist', 'Outfit', sans-serif;
font-size: .78rem;
font-weight: 600;
color: var(--c-accent);
letter-spacing: .22em;
text-transform: uppercase;
margin-bottom: 18px;
}
.services-cta-title {
font-family: 'Urbanist', 'Outfit', sans-serif;
font-size: clamp(1.7rem, 3.2vw, 2.4rem);
font-weight: 800;
line-height: 1.2;
letter-spacing: -0.02em;
color: var(--c-primary);
margin: 0 0 18px;
max-width: 720px;
margin-left: auto;
margin-right: auto;
}
.services-cta-title .highlight {
color: var(--c-accent);
font-weight: 800;
position: relative;
white-space: nowrap;
display: inline-block;
padding-bottom: .12em;
}
.services-cta-title .highlight::after {
content: '';
position: absolute;
left: -2%; right: -2%;
bottom: -.05em;
height: .26em;
background-image: url("data:image/svg+xml;utf8,");
background-repeat: no-repeat;
background-size: 100% 100%;
}
.services-cta-lead {
font-size: 1rem;
line-height: 1.75;
color: var(--c-muted);
max-width: 600px;
margin: 0 auto 30px;
}
.services-cta-btn {
display: inline-flex;
align-items: center;
gap: 10px;
padding: 16px 32px;
background: var(--c-primary);
color: #fff;
border-radius: 999px;
font-family: 'Urbanist', 'Outfit', sans-serif;
font-weight: 600;
font-size: 1rem;
transition: all .3s ease;
}
.services-cta-btn:hover {
background: var(--c-accent);
color: #fff;
transform: translateY(-2px);
box-shadow: 0 14px 32px rgba(156, 163, 175,0.28);
}
.services-cta-btn i { transition: transform .3s ease; }
.services-cta-btn:hover i { transform: translateX(4px); }
@media (max-width: 600px) {
.services-cta-section { padding: 10px 0 70px; }
.services-cta { padding: 44px 24px; }
}
/* ============================================================
SERVICE DETAIL — Web & Mobil (sd-*)
============================================================ */
.sd-eyebrow {
display: inline-block;
font-family: 'Urbanist', 'Outfit', sans-serif;
font-size: .76rem;
font-weight: 600;
color: var(--c-accent);
letter-spacing: .22em;
text-transform: uppercase;
margin-bottom: 18px;
}
.sd-h2 {
font-family: 'Urbanist', 'Outfit', sans-serif;
font-size: clamp(1.8rem, 3.4vw, 2.6rem);
font-weight: 800;
line-height: 1.2;
letter-spacing: -0.025em;
color: var(--c-primary);
margin: 0 0 14px;
}
.sd-h2 .highlight {
color: var(--c-accent);
position: relative;
white-space: nowrap;
display: inline-block;
padding-bottom: .12em;
}
.sd-h2 .highlight::after {
content: '';
position: absolute;
left: -2%; right: -2%;
bottom: -.05em;
height: .26em;
background-image: url("data:image/svg+xml;utf8,");
background-repeat: no-repeat;
background-size: 100% 100%;
}
.sd-h2-lead {
font-size: 1rem;
line-height: 1.8;
color: var(--c-muted);
max-width: 720px;
}
.sd-section-head { margin-bottom: 50px; }
.sd-section-head.center { text-align: center; }
.sd-section-head.center .sd-h2-lead { margin-left: auto; margin-right: auto; }
/* Hero */
.sd-hero {
padding: 50px 0 80px;
position: relative;
overflow: hidden;
}
.sd-hero-wrap {
display: grid;
grid-template-columns: 1fr 1.05fr;
gap: 60px;
align-items: center;
}
.sd-title {
font-family: 'Urbanist', 'Outfit', sans-serif;
font-size: clamp(2.2rem, 4.4vw, 3.4rem);
font-weight: 800;
line-height: 1.12;
letter-spacing: -0.012em;
color: var(--c-primary);
margin: 0 0 22px;
}
.sd-title .highlight {
color: var(--c-accent);
position: relative;
white-space: nowrap;
display: inline-block;
padding-bottom: .12em;
}
.sd-title .highlight::after {
content: '';
position: absolute;
left: -2%; right: -2%;
bottom: -.05em;
height: .28em;
background-image: url("data:image/svg+xml;utf8,");
background-repeat: no-repeat;
background-size: 100% 100%;
}
.sd-lead {
font-size: 1.04rem;
line-height: 1.85;
color: var(--c-muted);
margin: 0 0 30px;
max-width: 520px;
}
.sd-cta-row {
display: flex;
gap: 14px;
flex-wrap: wrap;
margin-bottom: 40px;
}
.sd-btn {
display: inline-flex;
align-items: center;
gap: 10px;
padding: 14px 26px;
border-radius: 999px;
font-family: 'Urbanist', 'Outfit', sans-serif;
font-weight: 600;
font-size: .98rem;
transition: all .25s ease;
border: 1px solid transparent;
}
.sd-btn-primary {
background: var(--c-primary);
color: #fff;
}
.sd-btn-primary:hover {
background: var(--c-accent);
color: #fff;
transform: translateY(-2px);
box-shadow: 0 14px 32px rgba(156, 163, 175,0.28);
}
.sd-btn-primary i { transition: transform .25s ease; }
.sd-btn-primary:hover i { transform: translateX(4px); }
.sd-btn-ghost {
background: transparent;
color: var(--c-primary);
border-color: var(--c-border);
}
.sd-btn-ghost:hover {
border-color: var(--c-primary);
transform: translateY(-2px);
}
.sd-stats {
display: flex;
gap: 36px;
flex-wrap: wrap;
padding-top: 26px;
border-top: 1px solid var(--c-border);
}
.sd-stat strong {
display: block;
font-family: 'Urbanist', 'Outfit', sans-serif;
font-size: 1.6rem;
font-weight: 800;
color: var(--c-primary);
letter-spacing: -0.02em;
line-height: 1;
margin-bottom: 6px;
}
.sd-stat span {
font-size: .82rem;
color: var(--c-muted);
letter-spacing: .02em;
}
/* Hero visual area */
.sd-hero-visual {
position: relative;
min-height: 500px;
display: flex;
align-items: center;
justify-content: center;
}
.sd-hero-blob {
position: absolute;
inset: 8% 8% 8% 8%;
background: radial-gradient(ellipse at 30% 30%, rgba(156, 163, 175,0.12), transparent 60%),
radial-gradient(ellipse at 80% 70%, rgba(10,14,26,0.05), transparent 60%);
filter: blur(20px);
z-index: 0;
pointer-events: none;
}
/* MacBook */
.device-mac {
width: 100%;
max-width: 620px;
position: relative;
z-index: 1;
filter: drop-shadow(0 30px 50px rgba(10,14,26,0.18));
}
.device-mac-screen {
background: #1a1d2b;
border-radius: 16px 16px 4px 4px;
padding: 14px 12px 12px;
border: 1px solid #2a2f3f;
}
.device-mac-bezel {
height: 8px;
text-align: center;
margin-bottom: 6px;
}
.device-mac-cam {
display: inline-block;
width: 5px; height: 5px;
background: #3a3f52;
border-radius: 50%;
margin-top: 1px;
}
.device-mac-display {
background: #fff;
border-radius: 4px;
aspect-ratio: 16/10;
overflow: hidden;
position: relative;
}
.device-mac-base {
height: 14px;
background: linear-gradient(180deg, #d2d5dd 0%, #aeb2bd 50%, #8d909a 100%);
border-radius: 0 0 18px 18px;
margin: 0 -16px;
position: relative;
box-shadow: inset 0 1px 0 rgba(255,255,255,0.4);
}
.device-mac-notch {
position: absolute;
top: 0;
left: 50%;
transform: translateX(-50%);
width: 100px;
height: 7px;
background: #1a1d2b;
border-radius: 0 0 10px 10px;
}
/* Mock site inside MacBook */
.mk-site {
height: 100%;
display: flex;
flex-direction: column;
background: #fafbfc;
font-family: 'Urbanist', 'Outfit', sans-serif;
font-size: 10px;
color: #0a0e1a;
overflow: hidden;
}
.mk-browser {
display: flex;
align-items: center;
gap: 6px;
padding: 6px 10px;
background: #f1f3f5;
border-bottom: 1px solid #e6e8eb;
}
.mk-dot { width: 7px; height: 7px; border-radius: 50%; }
.mk-r { background: #ff5f57; }
.mk-y { background: #febc2e; }
.mk-g { background: #28c840; }
.mk-url {
flex: 1;
margin: 0 6px 0 8px;
background: #fff;
border-radius: 5px;
padding: 3px 10px;
font-size: 8.5px;
color: #6b7280;
text-align: center;
border: 1px solid #e6e8eb;
}
.mk-url i { font-size: 7px; margin-right: 4px; color: #9ca3af; }
.mk-browser-ic { color: #9aa1ad; font-size: 9px; padding: 0 2px; }
.mk-nav {
display: flex;
align-items: center;
gap: 12px;
padding: 9px 16px;
background: #fff;
border-bottom: 1px solid #eef0f3;
}
.mk-logo {
font-weight: 800;
font-size: 11px;
color: #0a0e1a;
letter-spacing: -0.012em;
position: relative;
}
.mk-logo b { color: #9ca3af; font-weight: 800; }
.mk-logo sup {
font-size: 5px;
color: #9aa1ad;
margin-left: 1px;
top: -3px;
position: relative;
}
.mk-links {
display: flex;
gap: 14px;
margin: 0 auto;
list-style: none;
padding: 0;
}
.mk-links li {
font-size: 9px;
font-weight: 500;
color: #4b5363;
position: relative;
padding-bottom: 2px;
}
.mk-links li.on { color: #0a0e1a; font-weight: 700; }
.mk-links li.on::after {
content: '';
position: absolute;
left: 0; right: 0;
bottom: -1px;
height: 2px;
background: #9ca3af;
border-radius: 2px;
}
.mk-lang {
font-size: 8px;
font-weight: 700;
color: #6b7280;
border: 1px solid #e6e8eb;
border-radius: 4px;
padding: 2px 5px;
letter-spacing: .04em;
}
.mk-cta {
background: #0a0e1a;
color: #fff;
padding: 5px 10px;
border-radius: 999px;
font-size: 8.5px;
font-weight: 600;
display: inline-flex;
align-items: center;
gap: 3px;
}
.mk-cta i { font-size: 8px; }
/* Hero split */
.mk-hero {
flex: 1;
display: grid;
grid-template-columns: 1.05fr 1fr;
gap: 16px;
padding: 18px 16px 14px;
background: linear-gradient(180deg, #fff 0%, #f6f8fa 100%);
align-items: center;
}
.mk-hero-l { display: flex; flex-direction: column; }
.mk-tag {
display: inline-flex;
align-items: center;
gap: 5px;
font-size: 7.5px;
font-weight: 600;
color: #4b5363;
background: #fff;
border: 1px solid #e6e8eb;
border-radius: 999px;
padding: 3px 8px;
margin-bottom: 8px;
align-self: flex-start;
}
.mk-tag-dot {
width: 5px; height: 5px;
background: #9ca3af;
border-radius: 50%;
box-shadow: 0 0 0 2px rgba(156, 163, 175,0.18);
}
.mk-h {
font-family: 'Urbanist', 'Outfit', sans-serif;
font-size: 17px;
font-weight: 800;
letter-spacing: -0.012em;
line-height: 1.08;
color: #0a0e1a;
margin: 0 0 8px;
}
.mk-h em {
font-style: italic;
font-weight: 500;
color: #4b5363;
font-family: 'Urbanist', 'Outfit', serif;
}
.mk-p {
font-size: 8.5px;
color: #6b7280;
line-height: 1.55;
margin: 0 0 10px;
}
.mk-actions { display: flex; gap: 6px; margin-bottom: 12px; }
.mk-btn-p, .mk-btn-g {
font-size: 8.5px;
font-weight: 600;
padding: 6px 11px;
border-radius: 999px;
display: inline-flex;
align-items: center;
gap: 4px;
}
.mk-btn-p { background: #0a0e1a; color: #fff; }
.mk-btn-p i { font-size: 7.5px; }
.mk-btn-g { background: #fff; color: #0a0e1a; border: 1px solid #e6e8eb; }
.mk-trust {
display: flex;
align-items: center;
gap: 8px;
margin-top: auto;
}
.mk-avas { display: flex; }
.mk-ava {
width: 16px; height: 16px;
border-radius: 50%;
border: 1.5px solid #fff;
margin-left: -5px;
}
.mk-ava:first-child { margin-left: 0; }
.mk-ava-1 { background: linear-gradient(135deg, #fbbf77, #f97316); }
.mk-ava-2 { background: linear-gradient(135deg, #93c5fd, #3b82f6); }
.mk-ava-3 { background: linear-gradient(135deg, #c4b5fd, #8b5cf6); }
.mk-trust-txt {
font-size: 8px;
color: #6b7280;
line-height: 1;
}
.mk-trust-txt strong { color: #0a0e1a; font-weight: 700; }
/* Hero right — abstract art */
.mk-hero-r { position: relative; height: 100%; min-height: 130px; }
.mk-art {
position: absolute;
inset: 0;
background: #0a0e1a;
border-radius: 12px;
overflow: hidden;
}
.mk-art-grid {
position: absolute;
inset: 0;
background-image:
linear-gradient(rgba(255,255,255,0.05) 1px, transparent 1px),
linear-gradient(90deg, rgba(255,255,255,0.05) 1px, transparent 1px);
background-size: 18px 18px;
}
.mk-art-circle {
position: absolute;
top: -20px; right: -20px;
width: 90px; height: 90px;
background: radial-gradient(circle at 30% 30%, #9ca3af, #6b7280 60%, transparent 70%);
border-radius: 50%;
filter: blur(2px);
opacity: .85;
}
.mk-art-square {
position: absolute;
bottom: 14px; left: 14px;
width: 50px; height: 50px;
background: linear-gradient(135deg, #fbbf77 0%, #f97316 100%);
border-radius: 10px;
transform: rotate(-8deg);
}
.mk-art-pill {
position: absolute;
top: 18px; left: 16px;
width: 38px; height: 8px;
background: #fff;
border-radius: 999px;
opacity: .9;
}
.mk-art-line {
position: absolute;
top: 32px; left: 16px;
width: 60px; height: 2px;
background: rgba(255,255,255,0.4);
border-radius: 2px;
}
.mk-art-badge {
position: absolute;
top: 12px; right: 12px;
background: rgba(255,255,255,0.95);
color: #0a0e1a;
font-size: 7.5px;
font-weight: 700;
padding: 3px 7px;
border-radius: 999px;
letter-spacing: -0.01em;
}
.mk-art-card {
position: absolute;
bottom: 12px; right: 12px;
background: rgba(255,255,255,0.97);
border-radius: 8px;
padding: 7px 10px;
backdrop-filter: blur(6px);
min-width: 76px;
}
.mk-art-card-num {
display: block;
font-size: 11px;
font-weight: 800;
color: #0a0e1a;
letter-spacing: -0.02em;
line-height: 1;
}
.mk-art-card-lbl {
display: block;
font-size: 7px;
color: #6b7280;
margin-top: 2px;
margin-bottom: 4px;
letter-spacing: .02em;
}
.mk-art-card-bar {
display: block;
height: 3px;
background: #f0f2f5;
border-radius: 2px;
overflow: hidden;
}
.mk-art-card-bar i {
display: block;
width: 78%;
height: 100%;
background: linear-gradient(90deg, #9ca3af, #6b7280);
border-radius: 2px;
}
/* Trusted-by strip */
.mk-trustbar {
border-top: 1px solid #eef0f3;
background: #fff;
padding: 8px 16px 10px;
display: flex;
align-items: center;
gap: 12px;
}
.mk-trustbar-lbl {
font-size: 7.5px;
font-weight: 600;
letter-spacing: .12em;
text-transform: uppercase;
color: #9aa1ad;
flex-shrink: 0;
}
.mk-trustbar-logos {
display: flex;
align-items: center;
gap: 14px;
flex: 1;
justify-content: space-between;
}
.mk-trustbar-logos span {
font-family: 'Urbanist', 'Outfit', sans-serif;
font-size: 10px;
font-weight: 800;
color: #c2c8d2;
letter-spacing: -0.02em;
text-transform: uppercase;
}
.mk-trustbar-logos span i {
color: #9ca3af;
font-style: normal;
font-weight: 800;
}
/* iPhone */
.device-phone {
position: absolute;
right: -10px;
bottom: -30px;
width: 200px;
aspect-ratio: 9/19.5;
background: #0a0e1a;
border-radius: 32px;
padding: 8px;
box-shadow:
0 0 0 1px #2a2f3f inset,
0 30px 60px rgba(10,14,26,0.28),
0 12px 24px rgba(10,14,26,0.18);
z-index: 2;
}
.device-phone-frame {
background: #fff;
border-radius: 24px;
overflow: hidden;
height: 100%;
position: relative;
}
.device-phone-island {
position: absolute;
top: 8px;
left: 50%;
transform: translateX(-50%);
width: 76px; height: 20px;
background: #0a0e1a;
border-radius: 999px;
z-index: 5;
}
.device-phone-display {
height: 100%;
overflow: hidden;
}
/* Mock app inside iPhone */
.ph-app {
height: 100%;
display: flex;
flex-direction: column;
background: #f5f7fa;
font-family: 'Urbanist', 'Outfit', sans-serif;
color: #0a0e1a;
}
.ph-status {
display: flex;
justify-content: space-between;
align-items: center;
padding: 10px 16px 4px;
font-size: 10px;
font-weight: 600;
}
.ph-status .ph-icons {
display: inline-flex;
gap: 4px;
font-size: 9px;
}
.ph-header {
display: flex;
align-items: center;
gap: 8px;
padding: 22px 14px 12px;
background: #fff;
}
.ph-avatar {
width: 30px; height: 30px;
border-radius: 50%;
background: linear-gradient(135deg, #9ca3af, #6b7280);
color: #fff;
font-size: 10px;
font-weight: 700;
display: flex; align-items: center; justify-content: center;
letter-spacing: -0.02em;
}
.ph-greet { flex: 1; line-height: 1.1; }
.ph-greet-sm {
display: block;
font-size: 8.5px;
color: #6b7280;
margin-bottom: 1px;
}
.ph-greet strong {
font-size: 11px;
font-weight: 700;
color: #0a0e1a;
letter-spacing: -0.01em;
}
.ph-bell { font-size: 12px; color: #4b5363; }
.ph-balance {
margin: 10px 12px 0;
background: linear-gradient(135deg, #0a0e1a 0%, #161b2e 100%);
color: #fff;
border-radius: 14px;
padding: 14px 14px 12px;
position: relative;
overflow: hidden;
}
.ph-balance::before {
content: '';
position: absolute;
top: -30px; right: -30px;
width: 80px; height: 80px;
background: radial-gradient(circle, rgba(156, 163, 175,0.35), transparent 70%);
border-radius: 50%;
}
.ph-balance-lbl {
display: block;
font-size: 8px;
letter-spacing: .12em;
text-transform: uppercase;
color: rgba(255,255,255,0.55);
margin-bottom: 4px;
}
.ph-balance-num {
display: block;
font-family: 'Urbanist', 'Outfit', sans-serif;
font-size: 17px;
font-weight: 800;
letter-spacing: -0.02em;
margin-bottom: 8px;
}
.ph-balance-num small {
font-size: 11px;
font-weight: 600;
color: rgba(255,255,255,0.7);
}
.ph-balance-row {
display: flex;
justify-content: space-between;
align-items: center;
font-size: 8.5px;
color: rgba(255,255,255,0.7);
}
.ph-balance-row span:first-child i { color: #9ca3af; }
.ph-eye {
width: 18px; height: 18px;
border-radius: 50%;
background: rgba(255,255,255,0.1);
display: flex; align-items: center; justify-content: center;
color: #fff;
font-size: 9px;
}
.ph-quick {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 6px;
padding: 14px 12px;
}
.ph-quick-item {
background: #fff;
border-radius: 10px;
padding: 10px 4px 8px;
display: flex;
flex-direction: column;
align-items: center;
gap: 4px;
border: 1px solid #eef0f3;
}
.ph-quick-item i {
font-size: 13px;
color: #9ca3af;
}
.ph-quick-item span {
font-size: 7.5px;
font-weight: 600;
color: #4b5363;
}
.ph-list {
flex: 1;
background: #fff;
margin: 0 12px;
border-radius: 14px 14px 0 0;
padding: 12px 12px 4px;
overflow: hidden;
}
.ph-list-head {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 8px;
}
.ph-list-head strong {
font-size: 10px;
letter-spacing: -0.01em;
}
.ph-list-head span {
font-size: 8px;
color: #9ca3af;
font-weight: 600;
}
.ph-tx {
display: flex;
align-items: center;
gap: 8px;
padding: 7px 0;
border-bottom: 1px solid #f0f2f5;
}
.ph-tx:last-child { border-bottom: 0; }
.ph-tx-ic {
width: 26px; height: 26px;
border-radius: 8px;
display: flex; align-items: center; justify-content: center;
font-size: 11px;
}
.ph-tx-1 { background: #fef0e6; color: #f97316; }
.ph-tx-2 { background: #fff5e6; color: #d97706; }
.ph-tx-3 { background: #e6faf1; color: #6b7280; }
.ph-tx-body { flex: 1; line-height: 1.15; }
.ph-tx-body strong { display: block; font-size: 9.5px; }
.ph-tx-body span { font-size: 7.5px; color: #9aa1ad; }
.ph-tx-amt {
font-size: 9px;
font-weight: 700;
letter-spacing: -0.01em;
}
.ph-tx-amt.out { color: #0a0e1a; }
.ph-tx-amt.in { color: #6b7280; }
.ph-tabs {
display: flex;
justify-content: space-around;
align-items: center;
padding: 8px 12px 14px;
background: #fff;
border-top: 1px solid #f0f2f5;
}
.ph-tab {
width: 28px; height: 28px;
display: flex; align-items: center; justify-content: center;
font-size: 13px;
color: #c2c8d2;
border-radius: 8px;
}
.ph-tab.on {
color: #9ca3af;
background: #e6faf1;
}
/* ===========================
Facebook Page Mock (.fb-*)
sosyal-medya MacBook ekranı
=========================== */
.fb-page {
width: 100%;
height: 100%;
background: #f0f2f5;
display: flex;
flex-direction: column;
font-family: 'Urbanist', 'Outfit', 'DM Sans', sans-serif;
color: #050505;
overflow: hidden;
}
.fb-topbar {
display: flex;
align-items: center;
gap: 10px;
padding: 6px 14px;
background: #fff;
border-bottom: 1px solid #dadde1;
height: 38px;
flex-shrink: 0;
}
.fb-logo {
width: 26px;
height: 26px;
background: #1877f2;
color: #fff;
border-radius: 50%;
display: inline-flex;
align-items: center;
justify-content: center;
font-family: 'Urbanist', 'Outfit', sans-serif;
font-weight: 800;
font-size: 1.05rem;
letter-spacing: -0.018em;
flex-shrink: 0;
}
.fb-search {
background: #f0f2f5;
border-radius: 999px;
padding: 5px 12px;
font-size: .65rem;
color: #65676b;
flex: 0 0 auto;
min-width: 140px;
display: inline-flex;
align-items: center;
gap: 6px;
}
.fb-icons {
display: flex;
gap: 22px;
margin: 0 auto;
color: #65676b;
font-size: .9rem;
}
.fb-icons i {
padding: 5px 18px;
border-radius: 8px;
}
.fb-icons i:first-child { color: #1877f2; box-shadow: inset 0 -2px 0 #1877f2; }
.fb-actions {
display: flex;
align-items: center;
gap: 6px;
}
.fb-act {
width: 26px;
height: 26px;
background: #e4e6eb;
border-radius: 50%;
display: inline-flex;
align-items: center;
justify-content: center;
color: #050505;
font-size: .68rem;
}
.fb-ava {
width: 26px;
height: 26px;
background: linear-gradient(135deg, #0a0e1a, #1f2937);
color: #fff;
border-radius: 50%;
display: inline-flex;
align-items: center;
justify-content: center;
font-family: 'Urbanist', 'Outfit', sans-serif;
font-weight: 700;
font-size: .65rem;
}
.fb-cover {
flex-shrink: 0;
height: 90px;
background:
linear-gradient(135deg, #0a0e1a 0%, #1a2240 50%, #0f3d2e 100%);
position: relative;
overflow: hidden;
}
.fb-cover::before {
content: '';
position: absolute;
inset: 0;
background:
radial-gradient(circle at 80% 30%, rgba(156, 163, 175,0.25), transparent 40%),
radial-gradient(circle at 20% 70%, rgba(255,255,255,0.06), transparent 50%);
}
.fb-profile {
background: #fff;
padding: 0 18px 12px;
display: flex;
align-items: flex-end;
gap: 14px;
flex-shrink: 0;
border-bottom: 1px solid #dadde1;
position: relative;
}
.fb-avatar {
width: 64px;
height: 64px;
background: #fff;
border: 4px solid #fff;
border-radius: 50%;
margin-top: -28px;
display: inline-flex;
align-items: center;
justify-content: center;
font-family: 'Urbanist', 'Outfit', sans-serif;
font-weight: 800;
font-size: 1.5rem;
color: #0a0e1a;
background-color: #f3ede2;
box-shadow: 0 2px 4px rgba(0,0,0,0.06);
flex-shrink: 0;
}
.fb-avatar sup { font-size: .6em; vertical-align: super; }
.fb-pname {
flex: 1;
display: flex;
flex-direction: column;
padding-bottom: 4px;
}
.fb-pname strong {
font-family: 'Urbanist', 'Outfit', sans-serif;
font-weight: 800;
font-size: 1rem;
color: #050505;
display: inline-flex;
align-items: center;
gap: 4px;
}
.fb-pname strong i { color: #1877f2; font-size: .8em; }
.fb-pname span {
font-size: .68rem;
color: #65676b;
margin-top: 2px;
}
.fb-pbtns {
display: flex;
gap: 6px;
padding-bottom: 4px;
}
.fb-btn-p, .fb-btn-g {
font-size: .68rem;
font-weight: 600;
padding: 6px 10px;
border-radius: 6px;
display: inline-flex;
align-items: center;
gap: 4px;
}
.fb-btn-p {
background: #1877f2;
color: #fff;
}
.fb-btn-g {
background: #e4e6eb;
color: #050505;
}
.fb-tabs {
background: #fff;
display: flex;
gap: 0;
padding: 0 18px;
border-bottom: 1px solid #dadde1;
flex-shrink: 0;
}
.fb-tabs span {
padding: 10px 14px;
font-size: .7rem;
font-weight: 600;
color: #65676b;
}
.fb-tabs span.on {
color: #1877f2;
box-shadow: inset 0 -3px 0 #1877f2;
}
.fb-body {
display: grid;
grid-template-columns: 0.85fr 1.4fr;
gap: 12px;
padding: 12px;
flex: 1;
min-height: 0;
}
.fb-side {
display: flex;
flex-direction: column;
gap: 10px;
}
.fb-side-card {
background: #fff;
border-radius: 8px;
padding: 10px 12px;
box-shadow: 0 1px 2px rgba(0,0,0,0.05);
display: flex;
flex-direction: column;
gap: 6px;
}
.fb-side-card strong {
font-size: .75rem;
font-weight: 700;
margin-bottom: 2px;
}
.fb-side-card span {
font-size: .62rem;
color: #65676b;
display: inline-flex;
align-items: center;
gap: 6px;
}
.fb-side-card span i { color: #65676b; font-size: .8em; }
.fb-side-stat {
background: linear-gradient(135deg, #0a0e1a, #1a2240);
color: #fff;
}
.fb-side-stat-num {
font-family: 'Urbanist', 'Outfit', sans-serif;
font-weight: 800;
font-size: 1.35rem;
color: #9ca3af;
letter-spacing: -0.02em;
}
.fb-side-stat-lbl {
font-size: .62rem !important;
color: rgba(255,255,255,0.7) !important;
letter-spacing: .04em;
}
.fb-feed {
display: flex;
flex-direction: column;
gap: 10px;
}
.fb-post {
background: #fff;
border-radius: 8px;
padding: 12px;
box-shadow: 0 1px 2px rgba(0,0,0,0.05);
display: flex;
flex-direction: column;
gap: 8px;
}
.fb-post-head {
display: flex;
align-items: center;
gap: 8px;
}
.fb-post-ava {
width: 32px;
height: 32px;
background: #f3ede2;
color: #0a0e1a;
border-radius: 50%;
display: inline-flex;
align-items: center;
justify-content: center;
font-family: 'Urbanist', 'Outfit', sans-serif;
font-weight: 800;
font-size: .75rem;
flex-shrink: 0;
}
.fb-post-ava sup { font-size: .6em; }
.fb-post-head > div {
flex: 1;
display: flex;
flex-direction: column;
}
.fb-post-head > div strong {
font-size: .72rem;
font-weight: 700;
color: #050505;
}
.fb-post-head > div span {
font-size: .58rem;
color: #65676b;
}
.fb-post-more {
color: #65676b;
font-size: .9rem;
}
.fb-post-text {
font-size: .68rem;
color: #050505;
margin: 0;
line-height: 1.4;
}
.fb-post-img {
height: 110px;
border-radius: 8px;
background: #f7f8fa;
border: 1px solid #e5e7eb;
position: relative;
overflow: hidden;
display: flex;
align-items: center;
justify-content: center;
}
.fb-post-img-tag {
position: absolute;
top: 10px;
left: 12px;
color: var(--c-muted);
background: #ffffff;
border: 1px solid #e5e7eb;
border-radius: 6px;
padding: 3px 8px;
font-size: .56rem;
letter-spacing: .14em;
text-transform: uppercase;
font-weight: 600;
z-index: 2;
}
.fb-post-img-grid {
position: absolute;
inset: 0;
background-image: radial-gradient(circle, rgba(10,14,26,0.08) 1px, transparent 1px);
background-size: 14px 14px;
mask-image: radial-gradient(ellipse at center, #000 40%, transparent 80%);
-webkit-mask-image: radial-gradient(ellipse at center, #000 40%, transparent 80%);
}
.fb-post-img::after {
content: 'Fil360';
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
font-family: 'Urbanist', 'Outfit', sans-serif;
font-weight: 800;
font-size: 1.4rem;
letter-spacing: -0.012em;
color: var(--c-primary);
z-index: 1;
}
.fb-post-img::before {
content: '';
position: absolute;
width: 8px;
height: 8px;
border-radius: 50%;
background: var(--c-accent);
box-shadow: 0 0 0 4px rgba(156, 163, 175,0.18);
left: calc(50% + 36px);
top: calc(50% - 8px);
z-index: 2;
}
.fb-post-stats {
display: flex;
justify-content: space-between;
font-size: .58rem;
color: #65676b;
padding: 4px 0;
border-bottom: 1px solid #f0f2f5;
}
.fb-post-stats span:first-child i:first-child { color: #1877f2; }
.fb-post-stats span:first-child i:last-child { color: #f33e58; }
.fb-post-actions {
display: flex;
justify-content: space-around;
padding: 4px 0 0;
}
.fb-post-actions span {
font-size: .68rem;
color: #65676b;
font-weight: 600;
display: inline-flex;
align-items: center;
gap: 5px;
}
/* ===========================
Instagram Feed Mock (.ig-*)
sosyal-medya iPhone ekranı
=========================== */
.ig-app {
width: 100%;
height: 100%;
background: #fff;
display: flex;
flex-direction: column;
font-family: 'Urbanist', 'Outfit', 'DM Sans', sans-serif;
color: #0a0e1a;
overflow: hidden;
}
.ig-status {
display: flex;
justify-content: space-between;
align-items: center;
padding: 7px 18px 4px;
flex-shrink: 0;
}
.ig-time {
font-family: 'Urbanist', 'Outfit', sans-serif;
font-size: .72rem;
font-weight: 700;
color: #0a0e1a;
}
.ig-icons {
display: flex;
gap: 4px;
color: #0a0e1a;
font-size: .68rem;
}
.ig-topbar {
display: flex;
justify-content: space-between;
align-items: center;
padding: 8px 14px 10px;
border-bottom: 1px solid #efefef;
flex-shrink: 0;
}
.ig-brand {
font-family: 'Urbanist', 'Outfit', 'DM Sans', sans-serif;
font-weight: 700;
font-size: 1.05rem;
background: linear-gradient(45deg, #f09433, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
letter-spacing: -0.02em;
}
.ig-tb-icons {
display: flex;
gap: 12px;
color: #0a0e1a;
font-size: 1rem;
}
.ig-stories {
display: flex;
gap: 10px;
padding: 10px 12px;
overflow: hidden;
border-bottom: 1px solid #efefef;
flex-shrink: 0;
}
.ig-story {
display: flex;
flex-direction: column;
align-items: center;
gap: 4px;
flex-shrink: 0;
width: 50px;
}
.ig-story-ring {
width: 48px;
height: 48px;
border-radius: 50%;
padding: 2px;
background: #efefef;
display: inline-flex;
align-items: center;
justify-content: center;
}
.ig-story-ring.on {
background: linear-gradient(45deg, #f09433, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888);
}
.ig-story-ring.small {
width: 32px;
height: 32px;
padding: 1.5px;
}
.ig-story-ava {
width: 100%;
height: 100%;
border-radius: 50%;
background: #fff;
display: inline-flex;
align-items: center;
justify-content: center;
font-family: 'Urbanist', 'Outfit', sans-serif;
font-weight: 700;
font-size: .8rem;
color: #0a0e1a;
border: 2px solid #fff;
box-sizing: border-box;
overflow: hidden;
}
.ig-story-ava sup { font-size: .6em; }
.ig-ava-1 { background: linear-gradient(135deg, #ffc7a8, #f5a484); }
.ig-ava-2 { background: linear-gradient(135deg, #c4d4ff, #8ba8e8); }
.ig-ava-3 { background: linear-gradient(135deg, #ffe5b4, #f4c87a); }
.ig-ava-4 { background: linear-gradient(135deg, #d8b9ff, #b389e8); }
.ig-ava-brand {
background: #f3ede2;
color: #0a0e1a;
}
.ig-story small {
font-size: .58rem;
color: #0a0e1a;
font-weight: 500;
max-width: 50px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.ig-post {
flex: 1;
display: flex;
flex-direction: column;
min-height: 0;
}
.ig-post-head {
display: flex;
align-items: center;
gap: 8px;
padding: 8px 12px;
flex-shrink: 0;
}
.ig-post-meta {
flex: 1;
display: flex;
flex-direction: column;
}
.ig-post-meta strong {
font-size: .68rem;
font-weight: 700;
display: inline-flex;
align-items: center;
gap: 4px;
}
.ig-post-meta strong i { color: #1877f2; font-size: .85em; }
.ig-post-meta span {
font-size: .58rem;
color: #65676b;
}
.ig-more {
font-size: .9rem;
color: #0a0e1a;
}
.ig-post-img {
flex: 1;
background:
linear-gradient(135deg, #0a0e1a 0%, #1a2240 50%, #0f3d2e 100%);
position: relative;
overflow: hidden;
min-height: 130px;
}
.ig-post-tag {
position: absolute;
top: 8px;
right: 10px;
background: rgba(0,0,0,0.6);
color: #fff;
border-radius: 999px;
padding: 3px 8px;
font-size: .54rem;
font-weight: 600;
z-index: 3;
backdrop-filter: blur(4px);
}
.ig-post-art {
position: absolute;
inset: 0;
display: flex;
align-items: center;
justify-content: center;
}
.ig-art-h {
position: absolute;
top: 14px;
left: 14px;
color: rgba(255,255,255,0.85);
font-size: .58rem;
letter-spacing: .14em;
text-transform: uppercase;
font-weight: 600;
}
.ig-art-shape {
position: absolute;
border-radius: 50%;
}
.ig-art-shape-1 {
width: 80px;
height: 80px;
border: 2px solid rgba(156, 163, 175,0.6);
left: 50%; top: 50%;
transform: translate(-50%, -50%);
}
.ig-art-shape-2 {
width: 50px;
height: 50px;
background: rgba(156, 163, 175,0.30);
left: 38%; top: 42%;
border-radius: 6px;
}
.ig-art-shape-3 {
width: 30px;
height: 30px;
background: rgba(255,255,255,0.18);
right: 22%; bottom: 28%;
border-radius: 50%;
}
.ig-post-actions {
display: flex;
justify-content: space-between;
padding: 8px 12px 4px;
flex-shrink: 0;
}
.ig-act-l, .ig-act-r {
display: flex;
gap: 12px;
font-size: 1.05rem;
color: #0a0e1a;
}
.ig-act-l i:first-child { color: #ed4956; }
.ig-post-likes {
padding: 0 12px 2px;
font-size: .68rem;
flex-shrink: 0;
}
.ig-post-likes strong { font-weight: 700; }
.ig-post-cap {
padding: 2px 12px 6px;
font-size: .64rem;
line-height: 1.4;
color: #0a0e1a;
flex-shrink: 0;
}
.ig-post-cap strong { font-weight: 700; }
.ig-tabs {
display: flex;
justify-content: space-around;
padding: 8px 0 10px;
border-top: 1px solid #efefef;
flex-shrink: 0;
background: #fff;
}
.ig-tab {
color: #0a0e1a;
font-size: 1.1rem;
}
.ig-tab.on {
color: #0a0e1a;
}
/* ===========================
Ads Dashboard Mock (.ad-*)
dijital-reklam MacBook ekranı
=========================== */
.ad-dash {
width: 100%;
height: 100%;
background: #fafbfc;
display: flex;
flex-direction: column;
font-family: 'Urbanist', 'Outfit', 'DM Sans', sans-serif;
color: var(--c-primary);
overflow: hidden;
}
.ad-topbar {
display: flex;
align-items: center;
gap: 16px;
padding: 8px 14px;
background: #fff;
border-bottom: 1px solid var(--c-border);
height: 40px;
flex-shrink: 0;
}
.ad-brand {
font-family: 'Urbanist', 'Outfit', sans-serif;
font-weight: 700;
font-size: .78rem;
color: var(--c-primary);
display: inline-flex;
align-items: center;
gap: 7px;
letter-spacing: -0.01em;
}
.ad-brand-mark {
width: 14px;
height: 14px;
border-radius: 4px;
background: linear-gradient(135deg, var(--c-primary), var(--c-accent));
display: inline-block;
}
.ad-nav {
display: flex;
gap: 0;
list-style: none;
margin: 0;
padding: 0;
}
.ad-nav li {
padding: 6px 12px;
font-size: .68rem;
font-weight: 500;
color: var(--c-muted);
border-radius: 6px;
}
.ad-nav li.on {
background: rgba(156, 163, 175,0.10);
color: var(--c-primary);
font-weight: 600;
}
.ad-period {
margin-left: auto;
font-size: .65rem;
color: var(--c-muted);
background: #f3f4f6;
border-radius: 6px;
padding: 5px 9px;
display: inline-flex;
align-items: center;
gap: 5px;
}
.ad-user {
width: 26px;
height: 26px;
background: linear-gradient(135deg, var(--c-primary), #1a2240);
color: #fff;
border-radius: 50%;
display: inline-flex;
align-items: center;
justify-content: center;
font-family: 'Urbanist', 'Outfit', sans-serif;
font-weight: 700;
font-size: .7rem;
}
.ad-body {
flex: 1;
display: grid;
grid-template-columns: 130px 1fr;
min-height: 0;
}
.ad-side {
background: #fff;
border-right: 1px solid var(--c-border);
padding: 10px;
display: flex;
flex-direction: column;
gap: 4px;
overflow: hidden;
}
.ad-side-lbl {
font-size: .58rem;
letter-spacing: .14em;
text-transform: uppercase;
color: var(--c-muted);
font-weight: 600;
padding: 4px 6px 8px;
}
.ad-acc {
display: flex;
align-items: center;
gap: 8px;
padding: 6px 7px;
border-radius: 6px;
cursor: default;
}
.ad-acc.on { background: rgba(156, 163, 175,0.08); }
.ad-acc-ic {
width: 22px;
height: 22px;
border-radius: 5px;
color: #fff;
font-family: 'Urbanist', 'Outfit', sans-serif;
font-weight: 700;
font-size: .62rem;
display: inline-flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.ad-acc-ic.g { background: #4285f4; }
.ad-acc-ic.m { background: #1877f2; }
.ad-acc-ic.t { background: #0a0e1a; }
.ad-acc-ic.l { background: #0a66c2; font-style: italic; }
.ad-acc > div { display: flex; flex-direction: column; min-width: 0; }
.ad-acc strong {
font-size: .65rem;
font-weight: 600;
color: var(--c-primary);
line-height: 1.1;
}
.ad-acc small {
font-size: .54rem;
color: var(--c-muted);
margin-top: 1px;
}
.ad-main {
padding: 12px;
display: flex;
flex-direction: column;
gap: 12px;
min-width: 0;
overflow: hidden;
}
.ad-stats {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 8px;
}
.ad-stat {
background: #fff;
border: 1px solid var(--c-border);
border-radius: 8px;
padding: 9px 10px;
display: flex;
flex-direction: column;
gap: 3px;
position: relative;
}
.ad-stat-lbl {
font-size: .56rem;
letter-spacing: .1em;
text-transform: uppercase;
color: var(--c-muted);
font-weight: 600;
}
.ad-stat strong {
font-family: 'Urbanist', 'Outfit', sans-serif;
font-weight: 700;
font-size: 1rem;
color: var(--c-primary);
letter-spacing: -0.02em;
line-height: 1;
}
.ad-stat-trend {
font-size: .55rem;
color: var(--c-muted);
display: inline-flex;
align-items: center;
gap: 1px;
font-weight: 600;
}
.ad-stat-trend.up { color: var(--c-accent); }
.ad-stat-hl {
background: linear-gradient(135deg, var(--c-primary), #1a2240);
border-color: var(--c-primary);
}
.ad-stat-hl .ad-stat-lbl { color: rgba(255,255,255,0.6); }
.ad-stat-hl strong { color: #fff; }
.ad-stat-hl .ad-stat-trend.up { color: var(--c-accent); }
.ad-chart {
background: #fff;
border: 1px solid var(--c-border);
border-radius: 8px;
padding: 10px 12px 4px;
display: flex;
flex-direction: column;
gap: 4px;
height: 96px;
}
.ad-chart-lbl {
font-size: .58rem;
letter-spacing: .12em;
text-transform: uppercase;
color: var(--c-muted);
font-weight: 600;
}
.ad-chart svg {
flex: 1;
width: 100%;
height: 100%;
display: block;
}
.ad-table {
background: #fff;
border: 1px solid var(--c-border);
border-radius: 8px;
padding: 4px 0;
overflow: hidden;
}
.ad-table-row {
display: grid;
grid-template-columns: 1.6fr 0.8fr 0.9fr 0.6fr;
gap: 8px;
padding: 7px 12px;
align-items: center;
font-size: .62rem;
color: var(--c-primary);
border-bottom: 1px solid #f3f4f6;
}
.ad-table-row:last-child { border-bottom: 0; }
.ad-table-head {
font-size: .54rem;
letter-spacing: .12em;
text-transform: uppercase;
color: var(--c-muted);
font-weight: 600;
background: #fafbfc;
}
.ad-camp {
display: inline-flex;
align-items: center;
gap: 7px;
font-weight: 500;
}
.ad-camp-ic {
width: 14px;
height: 14px;
border-radius: 3px;
flex-shrink: 0;
font-style: normal;
}
.ad-camp-ic.g { background: #4285f4; }
.ad-camp-ic.m { background: #1877f2; }
.ad-camp-ic.t { background: #0a0e1a; }
.ad-status {
font-size: .54rem;
letter-spacing: .08em;
color: var(--c-muted);
text-transform: uppercase;
font-weight: 600;
}
.ad-status.on {
color: var(--c-accent);
background: rgba(156, 163, 175,0.10);
border-radius: 999px;
padding: 2px 8px;
width: fit-content;
}
.ad-roas {
color: var(--c-accent);
font-weight: 700;
}
/* ===========================
Mobile Search Result Mock (.gs-*)
dijital-reklam iPhone ekranı
=========================== */
.gs-app {
width: 100%;
height: 100%;
background: #fff;
display: flex;
flex-direction: column;
font-family: 'Urbanist', 'Outfit', 'DM Sans', sans-serif;
color: #202124;
overflow: hidden;
}
.gs-status {
display: flex;
justify-content: space-between;
align-items: center;
padding: 7px 18px 4px;
flex-shrink: 0;
}
.gs-time {
font-family: 'Urbanist', 'Outfit', sans-serif;
font-size: .72rem;
font-weight: 700;
color: #202124;
}
.gs-icons {
display: flex;
gap: 4px;
color: #202124;
font-size: .68rem;
}
.gs-search {
padding: 8px 12px 10px;
flex-shrink: 0;
}
.gs-search-bar {
background: #fff;
border: 1px solid #dadce0;
border-radius: 999px;
box-shadow: 0 1px 3px rgba(0,0,0,0.06);
padding: 8px 14px;
display: flex;
align-items: center;
gap: 10px;
font-size: .72rem;
color: #202124;
}
.gs-search-bar > i:first-child { color: #4285f4; }
.gs-search-bar > i:last-child { color: #4285f4; margin-left: auto; }
.gs-search-bar > span { flex: 1; }
.gs-tabs {
display: flex;
gap: 0;
padding: 0 8px;
border-bottom: 1px solid #dadce0;
flex-shrink: 0;
overflow: hidden;
}
.gs-tabs span {
padding: 8px 10px;
font-size: .62rem;
color: #5f6368;
font-weight: 500;
}
.gs-tabs span.on {
color: #1a73e8;
box-shadow: inset 0 -2px 0 #1a73e8;
font-weight: 600;
}
.gs-results {
flex: 1;
overflow: hidden;
padding: 10px 12px;
display: flex;
flex-direction: column;
gap: 12px;
min-height: 0;
}
.gs-ad {
display: flex;
flex-direction: column;
gap: 4px;
padding-bottom: 8px;
border-bottom: 1px solid #f1f3f4;
}
.gs-ad-tag {
font-size: .54rem;
font-weight: 700;
color: #202124;
letter-spacing: .04em;
margin-bottom: 2px;
}
.gs-ad-url {
display: flex;
align-items: center;
gap: 6px;
}
.gs-ad-fav {
width: 18px;
height: 18px;
border-radius: 50%;
background: var(--c-primary);
color: #fff;
font-family: 'Urbanist', 'Outfit', sans-serif;
font-weight: 800;
font-size: .56rem;
display: inline-flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.gs-ad-url > div {
display: flex;
flex-direction: column;
line-height: 1.1;
}
.gs-ad-url strong {
font-size: .62rem;
font-weight: 600;
color: #202124;
}
.gs-ad-url small {
font-size: .54rem;
color: #5f6368;
}
.gs-ad-title {
font-family: 'Urbanist', 'Outfit', sans-serif;
font-size: .82rem;
font-weight: 500;
color: #1a0dab;
margin: 4px 0 0;
line-height: 1.25;
letter-spacing: -0.01em;
}
.gs-ad-desc {
font-size: .62rem;
color: #4d5156;
margin: 0;
line-height: 1.4;
}
.gs-ad-desc strong { color: #202124; font-weight: 600; }
.gs-ad-extras {
display: flex;
gap: 14px;
margin-top: 4px;
}
.gs-ad-extras span {
font-size: .58rem;
color: #1a73e8;
font-weight: 500;
}
.gs-result {
display: flex;
flex-direction: column;
gap: 4px;
}
.gs-res-url {
display: flex;
align-items: center;
gap: 6px;
}
.gs-res-fav {
width: 16px;
height: 16px;
border-radius: 50%;
background: linear-gradient(135deg, #ffc7a8, #f5a484);
flex-shrink: 0;
}
.gs-res-fav.alt {
background: linear-gradient(135deg, #c4d4ff, #8ba8e8);
}
.gs-res-url small {
font-size: .56rem;
color: #5f6368;
}
.gs-res-title {
font-family: 'Urbanist', 'Outfit', sans-serif;
font-size: .8rem;
font-weight: 500;
color: #1a0dab;
margin: 2px 0 0;
line-height: 1.25;
letter-spacing: -0.01em;
}
.gs-res-desc {
font-size: .58rem;
color: #4d5156;
margin: 0;
line-height: 1.35;
}
/* Capabilities */
.sd-caps {
padding: 60px 0 70px;
}
.sd-caps-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 22px;
}
.sd-cap-card {
background: #fff;
border: 1px solid var(--c-border);
border-radius: 16px;
padding: 26px 24px 24px;
transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.sd-cap-card:hover {
transform: translateY(-4px);
box-shadow: 0 18px 40px rgba(10,14,26,0.07);
border-color: rgba(156, 163, 175,0.35);
}
.sd-cap-ic {
width: 44px; height: 44px;
border-radius: 12px;
background: rgba(156, 163, 175,0.10);
color: var(--c-accent);
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 1.3rem;
margin-bottom: 16px;
}
.sd-cap-card h3 {
font-family: 'Urbanist', 'Outfit', sans-serif;
font-size: 1.08rem;
font-weight: 700;
letter-spacing: -0.015em;
color: var(--c-primary);
margin: 0 0 10px;
}
.sd-cap-card p {
font-size: .92rem;
line-height: 1.65;
color: var(--c-muted);
margin: 0;
}
/* Process */
.sd-process {
padding: 80px 0 90px;
}
.sd-steps {
list-style: none;
margin: 0;
padding: 0;
display: grid;
grid-template-columns: repeat(5, 1fr);
gap: 18px;
counter-reset: sd;
position: relative;
}
.sd-steps::before {
content: '';
position: absolute;
top: 28px;
left: 8%;
right: 8%;
height: 1px;
background: linear-gradient(90deg, transparent, var(--c-border) 10%, var(--c-border) 90%, transparent);
z-index: 0;
}
.sd-step {
background: #fff;
border: 1px solid var(--c-border);
border-radius: 14px;
padding: 20px 18px 22px;
position: relative;
z-index: 1;
}
.sd-step-num {
display: inline-block;
font-family: 'Urbanist', 'Outfit', sans-serif;
font-size: .82rem;
font-weight: 700;
color: var(--c-accent);
background: rgba(156, 163, 175,0.10);
padding: 5px 10px;
border-radius: 999px;
letter-spacing: .04em;
margin-bottom: 14px;
}
.sd-step h4 {
font-family: 'Urbanist', 'Outfit', sans-serif;
font-size: 1rem;
font-weight: 700;
letter-spacing: -0.015em;
color: var(--c-primary);
margin: 0 0 8px;
}
.sd-step p {
font-size: .86rem;
line-height: 1.6;
color: var(--c-muted);
margin: 0;
}
/* Others wrapper */
.sd-others {
padding: 70px 0 30px;
}
/* Logo bar */
.sd-logos {
padding: 40px 0 50px;
border-bottom: 1px solid var(--c-border);
}
.sd-logos-lbl {
display: block;
text-align: center;
font-family: 'Urbanist', 'Outfit', sans-serif;
font-size: .76rem;
font-weight: 600;
color: var(--c-muted);
letter-spacing: .22em;
text-transform: uppercase;
margin-bottom: 26px;
}
.sd-logos-row {
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: center;
gap: 50px;
max-width: 1100px;
margin: 0 auto;
}
.sd-logo-item {
height: 44px;
display: flex;
align-items: center;
}
.sd-logo-item img {
max-height: 44px;
max-width: 140px;
width: auto;
height: auto;
object-fit: contain;
filter: grayscale(1) opacity(.55);
transition: filter .25s ease, transform .25s ease;
}
.sd-logo-item:hover img {
filter: grayscale(0) opacity(1);
transform: translateY(-2px);
}
@media (max-width: 600px) {
.sd-logos-row { gap: 30px; }
.sd-logo-item { height: 36px; }
.sd-logo-item img { max-height: 36px; max-width: 110px; }
}
/* Case study */
.sd-case {
padding: 80px 0 30px;
}
.sd-case-card {
background: #fff;
border: 1px solid var(--c-border);
border-radius: 24px;
overflow: hidden;
display: grid;
grid-template-columns: 1.05fr 1fr;
gap: 0;
box-shadow: 0 18px 50px rgba(10,14,26,0.05);
}
.sd-case-visual {
background: linear-gradient(160deg, #0a0e1a 0%, #161b2e 100%);
padding: 40px 36px;
position: relative;
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
min-height: 380px;
}
.sd-case-visual::before {
content: '';
position: absolute;
top: -60px; right: -60px;
width: 220px; height: 220px;
background: radial-gradient(circle, rgba(156, 163, 175,0.25), transparent 70%);
border-radius: 50%;
}
.sd-case-visual::after {
content: '';
position: absolute;
bottom: -40px; left: -40px;
width: 180px; height: 180px;
background: radial-gradient(circle, rgba(251,191,119,0.12), transparent 70%);
border-radius: 50%;
}
.sd-case-mock {
position: relative;
z-index: 1;
width: 100%;
max-width: 360px;
background: #fff;
border-radius: 12px;
overflow: hidden;
box-shadow: 0 30px 60px rgba(0,0,0,0.4);
transform: rotate(-1.5deg);
}
.sd-case-mock-bar {
background: #f1f3f5;
padding: 8px 12px;
display: flex;
gap: 5px;
border-bottom: 1px solid #e6e8eb;
}
.sd-case-mock-bar span {
width: 8px; height: 8px;
border-radius: 50%;
background: #d4d7de;
}
.sd-case-mock-bar span:nth-child(1) { background: #ff5f57; }
.sd-case-mock-bar span:nth-child(2) { background: #febc2e; }
.sd-case-mock-bar span:nth-child(3) { background: #28c840; }
.sd-case-mock-body {
padding: 18px 20px 20px;
background: #fff;
}
.sd-case-mock-nav {
height: 8px;
width: 100%;
background: linear-gradient(90deg, #0a0e1a 30%, #f0f2f5 30%, #f0f2f5 100%);
border-radius: 4px;
margin-bottom: 18px;
}
.sd-case-mock-h {
height: 14px;
background: #0a0e1a;
border-radius: 4px;
margin-bottom: 6px;
width: 92%;
}
.sd-case-mock-h-sm {
width: 60%;
background: #c2c8d2;
margin-bottom: 14px;
}
.sd-case-mock-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 6px;
margin-bottom: 12px;
}
.sd-case-mock-grid div {
height: 36px;
border-radius: 6px;
background: #f6f8fa;
border: 1px solid #eaecef;
}
.sd-case-mock-grid div:nth-child(2) { background: rgba(156, 163, 175,0.14); border-color: rgba(156, 163, 175,0.3); }
.sd-case-mock-img {
height: 60px;
border-radius: 8px;
background:
radial-gradient(circle at 30% 50%, rgba(251,191,119,0.5), transparent 60%),
radial-gradient(circle at 70% 60%, rgba(156, 163, 175,0.4), transparent 60%),
linear-gradient(135deg, #161b2e, #0a0e1a);
}
.sd-case-tag {
position: absolute;
top: 22px;
left: 22px;
background: rgba(255,255,255,0.1);
border: 1px solid rgba(255,255,255,0.18);
color: #fff;
font-size: .72rem;
font-weight: 600;
letter-spacing: .12em;
padding: 6px 12px;
border-radius: 999px;
z-index: 2;
text-transform: uppercase;
backdrop-filter: blur(6px);
}
.sd-case-body {
padding: 44px 40px;
display: flex;
flex-direction: column;
justify-content: center;
}
.sd-case-title {
font-family: 'Urbanist', 'Outfit', sans-serif;
font-size: clamp(1.4rem, 2.4vw, 1.75rem);
font-weight: 800;
letter-spacing: -0.025em;
line-height: 1.22;
color: var(--c-primary);
margin: 6px 0 14px;
}
.sd-case-title .highlight {
color: var(--c-accent);
position: relative;
display: inline-block;
padding-bottom: .12em;
}
.sd-case-title .highlight::after {
content: '';
position: absolute;
left: -2%; right: -2%;
bottom: -.05em;
height: .26em;
background-image: url("data:image/svg+xml;utf8,");
background-repeat: no-repeat;
background-size: 100% 100%;
}
.sd-case-lead {
font-size: .98rem;
line-height: 1.75;
color: var(--c-muted);
margin: 0 0 24px;
}
.sd-case-stats {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 14px;
padding: 18px 0;
border-top: 1px solid var(--c-border);
border-bottom: 1px solid var(--c-border);
margin-bottom: 22px;
}
.sd-case-stat strong {
display: block;
font-family: 'Urbanist', 'Outfit', sans-serif;
font-size: 1.45rem;
font-weight: 800;
letter-spacing: -0.025em;
color: var(--c-primary);
line-height: 1;
margin-bottom: 4px;
}
.sd-case-stat span {
font-size: .78rem;
color: var(--c-muted);
}
.sd-case-deliv {
list-style: none;
margin: 0;
padding: 0;
}
.sd-case-deliv li {
font-size: .92rem;
color: var(--c-primary);
line-height: 1.5;
padding: 5px 0;
display: flex;
align-items: center;
gap: 10px;
}
.sd-case-deliv li i {
color: var(--c-accent);
font-size: 1rem;
font-weight: 700;
}
@media (max-width: 980px) {
.sd-case-card { grid-template-columns: 1fr; }
.sd-case-visual { min-height: 280px; padding: 36px 24px; }
.sd-case-mock { max-width: 280px; }
.sd-case-body { padding: 36px 28px; }
}
/* FAQ */
.sd-faq {
padding: 80px 0 90px;
}
.sd-faq-wrap {
display: grid;
grid-template-columns: 1fr 1.3fr;
gap: 60px;
align-items: start;
}
.sd-faq-head { position: sticky; top: 100px; }
.sd-faq-list {
display: flex;
flex-direction: column;
gap: 12px;
}
.sd-faq-item {
background: #fff;
border: 1px solid var(--c-border);
border-radius: 14px;
padding: 0;
overflow: hidden;
transition: border-color .25s ease, box-shadow .25s ease;
}
.sd-faq-item[open] {
border-color: rgba(156, 163, 175,0.4);
box-shadow: 0 10px 30px rgba(10,14,26,0.06);
}
.sd-faq-item summary {
list-style: none;
cursor: pointer;
padding: 22px 26px;
font-family: 'Urbanist', 'Outfit', sans-serif;
font-size: 1rem;
font-weight: 600;
color: var(--c-primary);
letter-spacing: -0.01em;
display: flex;
align-items: center;
justify-content: space-between;
gap: 14px;
}
.sd-faq-item summary::-webkit-details-marker { display: none; }
.sd-faq-ic {
flex-shrink: 0;
width: 30px; height: 30px;
border-radius: 50%;
background: rgba(156, 163, 175,0.10);
color: var(--c-accent);
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 1.1rem;
transition: transform .25s ease, background .25s ease;
}
.sd-faq-item[open] .sd-faq-ic {
transform: rotate(45deg);
background: var(--c-accent);
color: #fff;
}
.sd-faq-item p {
margin: 0;
padding: 0 26px 22px;
font-size: .95rem;
line-height: 1.75;
color: var(--c-muted);
}
@media (max-width: 980px) {
.sd-faq-wrap { grid-template-columns: 1fr; gap: 36px; }
.sd-faq-head { position: static; }
}
@media (max-width: 600px) {
.sd-faq { padding: 60px 0 70px; }
.sd-faq-item summary { padding: 18px 20px; font-size: .96rem; }
.sd-faq-item p { padding: 0 20px 18px; }
.sd-case { padding: 60px 0 20px; }
}
/* Stats strip */
.sd-stats-strip {
padding: 0 0 30px;
}
.sd-stats-card {
background: #fff;
border: 1px solid var(--c-border);
border-radius: 22px;
padding: 36px 48px;
color: var(--c-primary);
display: grid;
grid-template-columns: 1fr auto 1fr auto 1fr auto 1fr;
align-items: center;
gap: 16px;
position: relative;
overflow: hidden;
box-shadow: 0 18px 50px rgba(10,14,26,0.05);
}
.sd-stats-card::before {
content: '';
position: absolute;
top: -80px; right: -60px;
width: 240px; height: 240px;
background: radial-gradient(circle, rgba(156, 163, 175,0.10), transparent 65%);
border-radius: 50%;
pointer-events: none;
}
.sd-stats-card::after {
content: '';
position: absolute;
bottom: -80px; left: 30%;
width: 200px; height: 200px;
background: radial-gradient(circle, rgba(156, 163, 175,0.05), transparent 70%);
border-radius: 50%;
pointer-events: none;
}
.sd-stats-item {
text-align: center;
position: relative;
z-index: 1;
}
.sd-stats-item strong {
display: block;
font-family: 'Urbanist', 'Outfit', sans-serif;
font-size: clamp(2rem, 3.6vw, 2.8rem);
font-weight: 800;
letter-spacing: -0.012em;
color: var(--c-primary);
line-height: 1;
margin-bottom: 8px;
}
.sd-stats-item strong span {
font-size: .55em;
color: var(--c-accent);
font-weight: 700;
margin-left: 3px;
letter-spacing: -0.01em;
}
.sd-stats-lbl {
font-size: .82rem;
color: var(--c-muted);
letter-spacing: .04em;
}
.sd-stats-divider {
width: 1px;
height: 50px;
background: linear-gradient(180deg, transparent, var(--c-border) 30%, var(--c-border) 70%, transparent);
position: relative;
z-index: 1;
}
@media (max-width: 880px) {
.sd-stats-card {
grid-template-columns: 1fr 1fr;
gap: 28px 12px;
padding: 28px 24px;
}
.sd-stats-divider { display: none; }
}
@media (max-width: 480px) {
.sd-stats-card { grid-template-columns: 1fr; gap: 22px; }
}
/* Comparison table */
.sd-compare {
padding: 80px 0 30px;
}
.sd-compare-table {
background: #fff;
border: 1px solid var(--c-border);
border-radius: 20px;
overflow: hidden;
box-shadow: 0 18px 40px rgba(10,14,26,0.04);
max-width: 1000px;
margin: 0 auto;
}
.sd-compare-head,
.sd-compare-row {
display: grid;
grid-template-columns: 1.2fr 1fr 1fr;
align-items: stretch;
}
.sd-compare-head {
background: #fafbfc;
border-bottom: 1px solid var(--c-border);
}
.sd-compare-cell {
padding: 18px 24px;
font-size: .95rem;
color: var(--c-primary);
display: flex;
align-items: center;
gap: 8px;
line-height: 1.4;
}
.sd-compare-feat {
font-weight: 600;
background: #fafbfc;
border-right: 1px solid var(--c-border);
}
.sd-compare-other {
color: #8b94a3;
font-size: .92rem;
border-right: 1px solid var(--c-border);
}
.sd-compare-other i {
flex-shrink: 0;
width: 22px; height: 22px;
border-radius: 50%;
background: #f0f2f5;
color: #c2c8d2;
display: inline-flex;
align-items: center;
justify-content: center;
font-size: .68rem;
}
.sd-compare-us {
background: rgba(156, 163, 175,0.04);
font-weight: 600;
font-size: .95rem;
color: var(--c-primary);
position: relative;
}
.sd-compare-us i {
flex-shrink: 0;
width: 22px; height: 22px;
border-radius: 50%;
background: var(--c-accent);
color: #fff;
display: inline-flex;
align-items: center;
justify-content: center;
font-size: .82rem;
font-weight: 700;
}
.sd-compare-head .sd-compare-feat { color: #6b7280; font-size: .8rem; letter-spacing: .12em; text-transform: uppercase; font-weight: 700; }
.sd-compare-head .sd-compare-other { color: #6b7280; font-size: .82rem; letter-spacing: .04em; font-weight: 600; }
.sd-compare-head .sd-compare-us {
color: var(--c-primary);
font-size: .82rem;
letter-spacing: .04em;
font-weight: 700;
background: rgba(156, 163, 175,0.08);
}
.sd-compare-us-tag {
display: inline-flex;
align-items: center;
gap: 6px;
background: var(--c-primary);
color: #fff;
font-size: .72rem;
font-weight: 700;
padding: 5px 12px;
border-radius: 999px;
letter-spacing: .04em;
}
.sd-compare-us-tag::before {
content: '';
width: 6px; height: 6px;
background: var(--c-accent);
border-radius: 50%;
}
.sd-compare-row {
border-bottom: 1px solid var(--c-border);
transition: background .2s ease;
}
.sd-compare-row:last-child { border-bottom: 0; }
.sd-compare-row:hover { background: #fafbfc; }
.sd-compare-row:hover .sd-compare-feat { background: #f5f7fa; }
@media (max-width: 720px) {
.sd-compare-head,
.sd-compare-row { grid-template-columns: 1fr 1fr; }
.sd-compare-feat {
grid-column: 1 / -1;
background: #fafbfc;
font-size: .85rem;
padding: 12px 18px;
border-right: 0;
border-bottom: 1px solid var(--c-border);
}
.sd-compare-cell { padding: 14px 18px; font-size: .88rem; }
}
/* Guarantees */
.sd-guard {
padding: 80px 0 90px;
}
.sd-guard-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 22px;
max-width: 1100px;
margin: 0 auto;
}
.sd-guard-card {
background: #fff;
border: 1px solid var(--c-border);
border-radius: 16px;
padding: 28px 26px 26px;
transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.sd-guard-card:hover {
transform: translateY(-4px);
border-color: rgba(156, 163, 175,0.35);
box-shadow: 0 18px 40px rgba(10,14,26,0.07);
}
.sd-guard-ic {
width: 46px; height: 46px;
border-radius: 12px;
background: rgba(156, 163, 175,0.10);
color: var(--c-accent);
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 1.35rem;
margin-bottom: 18px;
}
.sd-guard-card h4 {
font-family: 'Urbanist', 'Outfit', sans-serif;
font-size: 1.05rem;
font-weight: 700;
letter-spacing: -0.015em;
color: var(--c-primary);
margin: 0 0 8px;
}
.sd-guard-card p {
font-size: .92rem;
line-height: 1.65;
color: var(--c-muted);
margin: 0;
}
@media (max-width: 980px) {
.sd-guard-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
.sd-guard-grid { grid-template-columns: 1fr; }
.sd-guard { padding: 60px 0 70px; }
.sd-stats-strip { padding-bottom: 20px; }
.sd-compare { padding: 60px 0 20px; }
}
/* Sticky CTA — aşağı kaydırınca sağ-alttan kayarak gelen temiz kart */
/* ===================== AI SOHBET ASİSTANI (dqx) ===================== */
/* --- Launcher (sol-alt) --- */
.dqx-fab {
position: fixed;
left: 24px; bottom: 24px;
z-index: 1001;
width: 62px; height: 62px;
border: 0; border-radius: 20px;
background: linear-gradient(145deg, var(--c-accent) 0%, var(--c-accent-2) 100%);
color: #fff; cursor: pointer;
display: grid; place-items: center;
box-shadow: 0 6px 16px rgba(10,14,26,0.14);
transition: transform .3s cubic-bezier(.34,1.4,.5,1), box-shadow .3s ease, border-radius .3s ease;
animation: dqxFloat 5s ease-in-out infinite;
}
.dqx-fab:hover { transform: translateY(-4px) scale(1.05); box-shadow: 0 10px 22px rgba(10,14,26,0.18); border-radius: 24px; }
.dqx-fab:active { transform: scale(.95); }
.dqx-fab.is-open { border-radius: 50%; animation: none; }
@keyframes dqxFloat { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-5px); } }
.dqx-fab-pulse { display: none; }
@keyframes dqxPulse { 0% { box-shadow: 0 0 0 0 rgba(31,167,232,0.5); } 70%,100% { box-shadow: 0 0 0 16px rgba(31,167,232,0); } }
.dqx-fab .dqx-ic { position: absolute; font-size: 1.5rem; transition: opacity .25s ease, transform .35s cubic-bezier(.34,1.4,.5,1); }
.dqx-ic-close { opacity: 0; transform: rotate(-90deg) scale(.5); font-size: 1.25rem; }
.dqx-fab.is-open .dqx-ic-open { opacity: 0; transform: rotate(90deg) scale(.5); }
.dqx-fab.is-open .dqx-ic-close { opacity: 1; transform: rotate(0) scale(1); }
.dqx-fab.is-open .dqx-fab-pulse { display: none; }
.dqx-badge[hidden] { display: none; }
.dqx-badge {
position: absolute; top: -4px; right: -4px;
min-width: 21px; height: 21px; padding: 0 5px;
border-radius: 999px; background: var(--c-pink); color: #fff;
font-family: 'Urbanist', 'Outfit', sans-serif; font-size: .72rem; font-weight: 700;
display: grid; place-items: center; border: 2.5px solid #fff;
box-shadow: 0 3px 8px rgba(239,74,91,0.5);
animation: dqxPop .3s cubic-bezier(.34,1.6,.5,1);
}
@keyframes dqxPop { from { transform: scale(0); } to { transform: scale(1); } }
/* --- Davet kartı (launcher'ın üstünden çıkar): başlık + yazıyor… + baloncuk + buton --- */
.dqx-peek {
position: fixed;
left: 24px; bottom: 102px;
z-index: 1000;
width: 322px;
max-width: calc(100vw - 28px);
background: #fff;
border: 1px solid rgba(14,40,70,0.10);
border-radius: 20px;
padding: 15px 16px 14px;
box-shadow: 0 26px 56px -10px rgba(10,14,26,0.20), 0 6px 16px rgba(10,14,26,0.07);
transform: translateY(18px) scale(.9);
transform-origin: 38px 110%;
opacity: 0; pointer-events: none;
transition: transform .5s cubic-bezier(.3,1.3,.4,1), opacity .3s ease;
}
.dqx-peek.on { opacity: 1; transform: translateY(0) scale(1); pointer-events: auto; }
/* sohbet paneli açıkken davet kartı gizli */
body.dqx-open .dqx-peek { opacity: 0 !important; transform: translateY(14px) scale(.95) !important; pointer-events: none !important; }
/* üst aksan şeridi */
.dqx-peek::before {
content: '';
position: absolute;
left: 20px; right: 22px; top: 0;
height: 3px;
border-radius: 0 0 4px 4px;
background: linear-gradient(90deg, var(--c-accent), var(--c-mint));
}
.dqx-peek-close {
position: absolute;
top: 9px; right: 10px;
width: 25px; height: 25px;
display: grid; place-items: center;
background: rgba(10,14,26,0.04); border: 0;
color: #9aa3af; cursor: pointer;
font-size: .68rem; border-radius: 50%;
z-index: 2;
transition: color .2s ease, background .2s ease, transform .2s ease;
}
.dqx-peek-close:hover { color: var(--c-text); background: rgba(10,14,26,0.09); transform: rotate(90deg); }
/* başlık: maskot avatar + isim + çevrimiçi — altında kesik hairline */
.dqx-peek-head {
display: flex; align-items: center; gap: 11px;
padding-bottom: 12px; margin-bottom: 12px;
border-bottom: 1px dashed rgba(14,40,70,0.12);
}
.dqx-peek-ava {
position: relative; flex-shrink: 0; width: 44px; height: 44px; border-radius: 50%;
background: var(--c-accent-soft);
display: grid; place-items: center;
}
.dqx-peek-ava .dqx-mascot { width: 27px; height: 27px; }
.dqx-peek-online {
position: absolute; right: -1px; bottom: -1px; width: 13px; height: 13px;
border-radius: 50%; background: #2ECC71; border: 2.5px solid #fff;
}
.dqx-peek-who { min-width: 0; }
.dqx-peek-who strong { display: block; font-family: 'Urbanist', 'Outfit', sans-serif; font-size: .95rem; font-weight: 700; color: var(--c-text); letter-spacing: -.01em; }
.dqx-peek-who span {
display: inline-flex; align-items: center; gap: 5px; margin-top: 2px;
font-family: 'Urbanist', 'Outfit', sans-serif; font-size: .75rem; font-weight: 600; color: #1f9d6b;
}
.dqx-peek-dot { width: 6px; height: 6px; border-radius: 50%; background: #2ECC71; animation: dqxPeekOnline 2s infinite; }
@keyframes dqxPeekOnline { 0% { box-shadow: 0 0 0 0 rgba(46,204,113,.5); } 70%,100% { box-shadow: 0 0 0 5px rgba(46,204,113,0); } }
/* mesaj alanı: önce yazıyor…, sonra baloncuk */
.dqx-peek-msg { position: relative; margin-bottom: 13px; }
.dqx-peek-typing {
position: absolute; top: 0; left: 0; display: inline-flex; gap: 4px; align-items: center;
background: #F3F6FA;
border-radius: 4px 14px 14px 14px; padding: 13px 14px; opacity: 0;
}
.dqx-peek-typing i { width: 6px; height: 6px; border-radius: 50%; background: #8fb3c9; animation: dqxPeekBlink 1s ease-in-out infinite; }
.dqx-peek-typing i:nth-child(2) { animation-delay: .15s; }
.dqx-peek-typing i:nth-child(3) { animation-delay: .3s; }
@keyframes dqxPeekBlink { 0%, 60%, 100% { opacity: .35; transform: translateY(0); } 30% { opacity: 1; transform: translateY(-3px); } }
.dqx-peek.on .dqx-peek-typing { animation: dqxPeekShow .2s ease .3s both, dqxPeekHide .18s ease 1.5s forwards; }
@keyframes dqxPeekShow { from { opacity: 0; } to { opacity: 1; } }
@keyframes dqxPeekHide { to { opacity: 0; visibility: hidden; } }
.dqx-peek-bubble {
margin: 0;
background: #F3F6FA;
border-radius: 4px 14px 14px 14px;
padding: 12px 14px;
font-family: 'Urbanist', 'Outfit', sans-serif; font-size: .89rem; line-height: 1.6; color: #2b3340;
opacity: 0;
}
/* hizmet adı — sarı marker vurgusu (sitenin onaylı süsleme formülü) */
.dqx-peek-bubble b {
font-weight: 700; color: var(--c-text);
background: linear-gradient(104deg, rgba(255,210,63,0) 0.5%, rgba(255,210,63,.6) 3%, rgba(255,210,63,.42) 97%, rgba(255,210,63,0) 99.5%);
padding: 1px 5px 2px 4px;
border-radius: 5px;
box-decoration-break: clone;
-webkit-box-decoration-break: clone;
}
.dqx-peek.on .dqx-peek-bubble { animation: dqxPeekMsgIn .4s cubic-bezier(.25,1.2,.35,1) 1.6s both; }
@keyframes dqxPeekMsgIn { from { opacity: 0; transform: translateY(8px) scale(.95); } to { opacity: 1; transform: translateY(0) scale(1); } }
/* buton — gradient + hover'da parlama süpürmesi */
.dqx-peek-btn {
position: relative;
overflow: hidden;
display: inline-flex;
align-items: center;
justify-content: center;
width: 100%;
gap: 8px;
background: var(--c-accent);
color: #fff;
padding: 11px 18px;
border: 0;
border-radius: 999px;
cursor: pointer;
font-family: 'Urbanist', 'Outfit', sans-serif;
font-weight: 700;
font-size: .88rem;
box-shadow: 0 8px 18px rgba(31,167,232,0.32);
transition: transform .2s ease, box-shadow .2s ease, background .2s ease;
opacity: 0;
}
.dqx-peek-btn::after {
content: '';
position: absolute; top: 0; bottom: 0; left: -70%;
width: 45%;
background: linear-gradient(100deg, transparent, rgba(255,255,255,0.38), transparent);
transform: skewX(-20deg);
transition: left .55s ease;
}
.dqx-peek-btn:hover::after { left: 130%; }
.dqx-peek.on .dqx-peek-btn { animation: dqxPeekMsgIn .35s ease 1.85s both; }
.dqx-peek-btn:hover {
background: var(--c-accent-2);
transform: translateY(-2px);
box-shadow: 0 12px 24px rgba(31,167,232,0.42);
}
.dqx-peek-btn i { font-size: .85rem; }
.dqx-peek-btn .dqx-peek-btn-arr { transition: transform .2s ease; font-size: .8rem; }
.dqx-peek-btn:hover .dqx-peek-btn-arr { transform: translateX(3px); }
@media (prefers-reduced-motion: reduce) {
.dqx-peek { transition: opacity .3s ease; transform: none; }
.dqx-peek.on .dqx-peek-typing { animation: none; opacity: 0; visibility: hidden; }
.dqx-peek.on .dqx-peek-bubble, .dqx-peek.on .dqx-peek-btn { animation: none; opacity: 1; }
.dqx-peek-dot, .dqx-peek-typing i, .dqx-peek-btn::after { animation: none; transition: none; }
}
/* --- Panel --- */
.dqx-panel {
position: fixed;
left: 24px; bottom: 100px;
z-index: 1001;
width: 384px; max-width: calc(100vw - 28px);
height: 596px; max-height: calc(100dvh - 130px);
display: flex; flex-direction: column;
background: #fff; border-radius: 24px; overflow: hidden;
box-shadow: 0 36px 80px rgba(10,14,26,0.30), 0 10px 24px rgba(10,14,26,0.12);
border: 1px solid rgba(31,167,232,0.12);
transform: translateY(24px) scale(.95); transform-origin: bottom left;
opacity: 0; pointer-events: none;
transition: transform .38s cubic-bezier(.22,.95,.3,1.05), opacity .28s ease;
}
.dqx-panel.on { transform: translateY(0) scale(1); opacity: 1; pointer-events: auto; }
/* --- Başlık --- */
.dqx-head {
position: relative; flex-shrink: 0;
display: flex; align-items: center; gap: 13px;
padding: 16px 14px 16px 17px;
background: linear-gradient(135deg, var(--c-accent) 0%, var(--c-accent-2) 78%);
color: #fff; overflow: hidden;
}
.dqx-head::after { /* tatlı ışık süzülmesi */
content: ''; position: absolute; top: -60%; left: -20%;
width: 60%; height: 200%; transform: rotate(20deg);
background: linear-gradient(90deg, transparent, rgba(255,255,255,0.14), transparent);
}
.dqx-head::before { /* noktalı doku */
content: ''; position: absolute; inset: 0;
background-image: radial-gradient(rgba(255,255,255,0.16) 1px, transparent 1px);
background-size: 13px 13px; opacity: .6; pointer-events: none;
}
.dqx-head > * { position: relative; z-index: 1; }
.dqx-head-ava {
position: relative; flex-shrink: 0;
width: 44px; height: 44px; border-radius: 14px;
background: rgba(255,255,255,0.2); backdrop-filter: blur(4px);
display: grid; place-items: center; font-size: 1.3rem;
box-shadow: 0 0 0 0 rgba(255,255,255,0.4), inset 0 1px 0 rgba(255,255,255,0.3);
animation: dqxAvaGlow 3s ease-in-out infinite;
}
@keyframes dqxAvaGlow { 0%,100% { box-shadow: 0 6px 16px rgba(0,0,0,0.12), inset 0 1px 0 rgba(255,255,255,0.3); } 50% { box-shadow: 0 6px 22px rgba(255,255,255,0.35), inset 0 1px 0 rgba(255,255,255,0.4); } }
.dqx-head-ring {
position: absolute; inset: -3px; border-radius: 16px;
border: 2px solid rgba(255,255,255,0.55);
animation: dqxRing 2.4s ease-in-out infinite;
}
@keyframes dqxRing { 0%,100% { opacity: .4; transform: scale(1); } 50% { opacity: 1; transform: scale(1.06); } }
.dqx-head-txt { flex: 1; min-width: 0; line-height: 1.25; }
.dqx-head-txt strong {
display: block; font-family: 'Bricolage Grotesque', 'DM Sans', sans-serif;
font-size: 1.05rem; font-weight: 700; letter-spacing: -0.02em;
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.dqx-head-txt strong span { font-weight: 400; opacity: .85; }
.dqx-head-status { display: flex; align-items: center; gap: 6px; font-size: .76rem; color: rgba(255,255,255,0.85); margin-top: 1px; }
.dqx-livedot { width: 8px; height: 8px; border-radius: 50%; background: var(--c-mint); box-shadow: 0 0 0 0 rgba(155,231,196,0.8); animation: dqxLive 2s ease-out infinite; }
@keyframes dqxLive { 0% { box-shadow: 0 0 0 0 rgba(155,231,196,0.7); } 70%,100% { box-shadow: 0 0 0 7px rgba(155,231,196,0); } }
.dqx-min {
flex-shrink: 0; width: 34px; height: 34px; border: 0;
background: rgba(255,255,255,0.16); color: #fff; border-radius: 11px;
cursor: pointer; display: grid; place-items: center; font-size: .95rem;
transition: background .2s ease, transform .2s ease;
}
.dqx-min:hover { background: rgba(255,255,255,0.3); transform: translateY(1px); }
/* --- Mesaj alanı --- */
.dqx-scroll {
flex: 1; overflow-y: auto; overscroll-behavior: contain;
padding: 18px 16px 10px;
background: var(--c-bg);
background-image: radial-gradient(rgba(31,167,232,0.05) 1.2px, transparent 1.2px);
background-size: 20px 20px;
display: flex; flex-direction: column; gap: 12px;
}
.dqx-scroll::-webkit-scrollbar { width: 8px; }
.dqx-scroll::-webkit-scrollbar-thumb { background: rgba(10,14,26,0.14); border-radius: 4px; border: 2px solid transparent; background-clip: padding-box; }
.dqx-scroll::-webkit-scrollbar-thumb:hover { background: rgba(10,14,26,0.24); background-clip: padding-box; }
/* --- Hızlı başlangıç çipleri --- */
.dqx-starters { animation: dqxFade .4s ease both; }
.dqx-starters[hidden] { display: none; }
.dqx-starters-h {
font-family: 'Caveat', cursive; font-size: 1.25rem; color: var(--c-accent-2);
transform: rotate(-2deg); margin: 2px 0 8px 4px; display: inline-block;
}
.dqx-chips { display: flex; flex-direction: column; gap: 8px; }
.dqx-chip {
text-align: left; cursor: pointer;
background: #fff; border: 1px solid rgba(31,167,232,0.22); color: var(--c-text);
padding: 11px 14px; border-radius: 14px;
font-family: 'Urbanist', 'Outfit', sans-serif; font-size: .88rem; font-weight: 500;
box-shadow: 0 2px 8px rgba(10,14,26,0.04);
transition: transform .18s ease, box-shadow .18s ease, background .18s ease, border-color .18s ease;
}
.dqx-chip:hover { background: var(--c-accent-soft); border-color: var(--c-accent); transform: translateX(3px); box-shadow: 0 6px 16px rgba(31,167,232,0.16); }
.dqx-chip-emoji { margin-right: 5px; }
/* --- Mesajlar --- */
.dqx-msg { display: flex; align-items: flex-end; gap: 8px; max-width: 88%; animation: dqxMsgIn .32s cubic-bezier(.22,.95,.3,1.05) both; }
@keyframes dqxMsgIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
.dqx-bot { align-self: flex-start; }
.dqx-me { align-self: flex-end; flex-direction: row-reverse; }
.dqx-msg-ava {
flex-shrink: 0; width: 30px; height: 30px; border-radius: 10px;
background: linear-gradient(140deg, var(--c-accent), var(--c-accent-2));
display: grid; place-items: center; margin-bottom: 2px;
box-shadow: 0 3px 8px rgba(31,167,232,0.28);
}
.dqx-msg-wrap { display: flex; flex-direction: column; min-width: 0; }
.dqx-me .dqx-msg-wrap { align-items: flex-end; }
.dqx-bubble {
padding: 10px 14px; border-radius: 16px;
font-family: 'Urbanist', 'Outfit', sans-serif; font-size: .9rem; line-height: 1.5;
word-wrap: break-word; white-space: pre-wrap;
}
.dqx-bot .dqx-bubble {
background: #fff; color: var(--c-text);
border: 1px solid rgba(10,14,26,0.06); border-bottom-left-radius: 5px;
box-shadow: 0 3px 10px rgba(10,14,26,0.05);
}
.dqx-me .dqx-bubble {
background: linear-gradient(140deg, var(--c-accent), var(--c-accent-2));
color: #fff; border-bottom-right-radius: 5px;
box-shadow: 0 5px 14px rgba(31,167,232,0.30);
}
/* --- bot mesajında zengin biçim (liste / vurgu, hafif renk) --- */
.dqx-bubble.dqx-rich { white-space: normal; }
.dqx-bubble.dqx-rich > :first-child { margin-top: 0; }
.dqx-bubble.dqx-rich > :last-child { margin-bottom: 0; }
.dqx-bubble.dqx-rich p { margin: 0 0 .55em; }
.dqx-bubble.dqx-rich strong { color: var(--c-accent-2); font-weight: 600; }
.dqx-bubble.dqx-rich .dqx-bh { font-weight: 700; color: var(--c-text); margin: .6em 0 .3em; font-size: .94em; }
.dqx-bubble.dqx-rich .dqx-bh:first-child { margin-top: 0; }
.dqx-bubble.dqx-rich .dqx-li {
list-style: none; margin: .5em 0; padding: 0;
display: flex; flex-direction: column; gap: 7px;
}
.dqx-bubble.dqx-rich .dqx-li li {
position: relative; padding: 7px 11px 7px 28px; border-radius: 11px;
background: var(--c-bg); border: 1px solid rgba(10,14,26,0.05);
line-height: 1.4;
}
.dqx-bubble.dqx-rich .dqx-li li::before {
content: ''; position: absolute; left: 11px; top: 50%; margin-top: -3.5px;
width: 7px; height: 7px; border-radius: 3px; background: var(--c-accent);
}
.dqx-bubble.dqx-rich .dqx-li li:nth-child(4n+2)::before { background: var(--c-pink); }
.dqx-bubble.dqx-rich .dqx-li li:nth-child(4n+3)::before { background: #25b285; }
.dqx-bubble.dqx-rich .dqx-li li:nth-child(4n+4)::before { background: #7c5cff; }
.dqx-time { font-size: .66rem; color: #9aa6b2; margin: 4px 5px 0; }
.dqx-temp { opacity: .6; }
.dqx-failed .dqx-bubble { background: var(--c-pink); color: #fff; }
.dqx-failed { cursor: pointer; }
.dqx-failed .dqx-time { color: var(--c-pink); font-weight: 600; }
/* --- Yazıyor balonu --- */
.dqx-typing-row[hidden] { display: none; }
.dqx-typing { display: flex; gap: 4px; padding: 13px 14px; }
.dqx-typing span { width: 7px; height: 7px; border-radius: 50%; background: var(--c-accent); opacity: .5; animation: dqxDots 1.3s infinite ease-in-out; }
.dqx-typing span:nth-child(2) { animation-delay: .18s; }
.dqx-typing span:nth-child(3) { animation-delay: .36s; }
@keyframes dqxDots { 0%,60%,100% { transform: translateY(0); opacity: .4; } 30% { transform: translateY(-5px); opacity: 1; } }
/* --- Giriş --- */
.dqx-form { flex-shrink: 0; padding: 12px 14px 6px; background: #fff; }
.dqx-hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.dqx-input {
display: flex; align-items: flex-end; gap: 6px;
background: var(--c-bg); border: 1.5px solid rgba(10,14,26,0.07);
border-radius: 18px; padding: 6px 6px 6px 8px;
transition: border-color .2s ease, box-shadow .2s ease, background .2s ease;
}
/* sürükle-bırak katmanı */
.dqx-drop {
position: absolute; inset: 0; z-index: 5;
background: rgba(244, 250, 254, 0.94); backdrop-filter: blur(2px);
display: grid; place-items: center; padding: 16px;
animation: dqxFade .15s ease both;
}
.dqx-drop[hidden] { display: none; }
.dqx-drop-inner {
width: 100%; height: 100%; border: 2.5px dashed var(--c-accent); border-radius: 18px;
display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px;
color: var(--c-accent); text-align: center; pointer-events: none;
}
.dqx-drop-inner i { font-size: 2.6rem; animation: dqxFloat 2.4s ease-in-out infinite; }
.dqx-drop-inner span { font-family: 'Urbanist', 'Outfit', sans-serif; font-size: .95rem; font-weight: 600; color: var(--c-text); max-width: 220px; }
.dqx-attach {
flex-shrink: 0; width: 36px; height: 38px; border: 0; background: transparent;
color: #9aa6b2; cursor: pointer; display: grid; place-items: center; font-size: 1.1rem;
border-radius: 12px; transition: color .15s ease, background .15s ease;
}
.dqx-attach:hover { color: var(--c-accent); background: var(--c-accent-soft); }
/* görsel ek balonu */
.dqx-bubble.dqx-has-img { padding: 4px; background: var(--c-bg); border: 1px solid rgba(10,14,26,0.06); }
.dqx-me .dqx-bubble.dqx-has-img { background: rgba(255,255,255,0.18); border-color: rgba(255,255,255,0.25); }
.dqx-att { display: block; max-width: 200px; max-height: 240px; width: auto; height: auto; border-radius: 12px; cursor: zoom-in; }
.dqx-att-cap { padding: 6px 6px 2px; font-size: .86rem; line-height: 1.4; }
.dqx-input:focus-within { border-color: var(--c-accent); background: #fff; box-shadow: 0 0 0 4px var(--c-accent-soft); }
.dqx-input textarea {
flex: 1; resize: none; border: 0; background: transparent;
font-family: 'Urbanist', 'Outfit', sans-serif; font-size: .92rem; line-height: 1.4;
color: var(--c-text); max-height: 108px; padding: 7px 0;
}
.dqx-input textarea:focus { outline: 0; }
.dqx-send {
flex-shrink: 0; width: 38px; height: 38px; border: 0; border-radius: 13px;
background: linear-gradient(140deg, var(--c-accent), var(--c-accent-2)); color: #fff;
cursor: pointer; display: grid; place-items: center; font-size: 1.05rem;
box-shadow: 0 5px 13px rgba(31,167,232,0.34);
transition: transform .2s ease, box-shadow .2s ease, opacity .2s ease;
}
.dqx-send:hover { transform: translateY(-2px) scale(1.05); box-shadow: 0 9px 20px rgba(31,167,232,0.45); }
.dqx-send:active { transform: scale(.9); }
/* --- Alt bilgi --- */
.dqx-foot { flex-shrink: 0; text-align: center; font-size: .68rem; color: #aab2bd; padding: 4px 0 10px; background: #fff; }
.dqx-foot i { color: var(--c-accent); }
/* --- header butonları (yeni sohbet + kapat) --- */
.dqx-hbtn {
flex-shrink: 0; width: 34px; height: 34px; border: 0;
background: rgba(255,255,255,0.16); color: #fff; border-radius: 11px;
cursor: pointer; display: grid; place-items: center; font-size: .95rem;
transition: background .2s ease, transform .2s ease;
}
.dqx-hbtn:hover { background: rgba(255,255,255,0.3); }
#dqChatRestart:hover i { animation: dqxSpin .5s ease; }
@keyframes dqxSpin { to { transform: rotate(-360deg); } }
/* --- karşılama hero'su --- */
.dqx-welcome { text-align: center; padding: 14px 6px 8px; animation: dqxFade .45s ease both; }
.dqx-welcome[hidden] { display: none; }
.dqx-welcome-ava {
display: inline-grid; place-items: center; width: 58px; height: 58px;
border-radius: 19px; background: linear-gradient(140deg, var(--c-accent), var(--c-accent-2));
color: #fff; font-size: 1.65rem; box-shadow: 0 12px 26px rgba(31,167,232,0.38);
margin-bottom: 12px; animation: dqxFloat 5s ease-in-out infinite;
}
.dqx-welcome-h { font-family: 'Bricolage Grotesque','DM Sans',sans-serif; font-size: 1.32rem; font-weight: 700; letter-spacing: -0.02em; margin: 0 0 5px; color: var(--c-text); }
.dqx-welcome-p { font-family: 'Urbanist', 'Outfit',sans-serif; font-size: .92rem; line-height: 1.55; color: #5a6472; margin: 0 10px; }
.dqx-welcome-p strong { color: var(--c-text); font-weight: 600; }
/* el sallama */
.dqx-wave { display: inline-block; transform-origin: 70% 80%; animation: dqxWaveHand 2.6s ease-in-out infinite; }
@keyframes dqxWaveHand { 0%,55%,100%{transform:rotate(0)} 62%{transform:rotate(16deg)} 70%{transform:rotate(-10deg)} 78%{transform:rotate(13deg)} 86%{transform:rotate(-6deg)} }
/* --- zorunlu iletişim kapısı (Ad Soyad + Telefon) --- */
/* kapı moddayken: scroll'u ortala, mesaj kutusu/alt notu/scroll-down gizle */
.dqx-needlead .dqx-scroll { justify-content: center; align-items: center; overflow: hidden; padding: 18px 16px; }
.dqx-needlead .dqx-form,
.dqx-needlead .dqx-foot,
.dqx-needlead #dqChatScrollDown { display: none !important; }
.dqx-gate { width: 100%; max-width: 312px; margin: 0 auto; text-align: center;
display: flex; flex-direction: column; align-items: stretch;
animation: dqxFade .42s ease both; }
.dqx-gate[hidden] { display: none; }
.dqx-gate-ava { display: inline-grid; place-items: center; width: 56px; height: 56px; margin: 0 auto 10px;
border-radius: 18px; background: linear-gradient(140deg, var(--c-accent), var(--c-accent-2));
box-shadow: 0 12px 26px rgba(31,167,232,0.36); animation: dqxFloat 5s ease-in-out infinite; }
.dqx-gate-ava .dqx-mascot { width: 34px; height: 34px; }
.dqx-gate-h { font-family: 'Bricolage Grotesque','DM Sans',sans-serif; font-size: 1.24rem; font-weight: 700;
letter-spacing: -0.02em; margin: 0 0 5px; color: var(--c-text); }
.dqx-gate-lead { font-family: 'Urbanist', 'Outfit',sans-serif; font-size: .88rem; line-height: 1.5;
color: #5a6472; margin: 0 0 15px; }
.dqx-gate-field { position: relative; margin-bottom: 9px; text-align: left; }
.dqx-gate-field i { position: absolute; left: 14px; top: 50%; transform: translateY(-50%);
color: var(--c-accent); font-size: .95rem; pointer-events: none; }
.dqx-gate-field input { width: 100%; box-sizing: border-box; padding: 13px 14px 13px 40px;
border: 1.5px solid var(--c-line, #e3eaf0); border-radius: 13px; background: #f6fafc;
font-family: 'Urbanist', 'Outfit',sans-serif; font-size: .94rem; color: var(--c-text);
transition: border-color .18s ease, background .18s ease, box-shadow .18s ease; }
.dqx-gate-field input::placeholder { color: #9aa6b2; }
.dqx-gate-field input:focus { outline: 0; border-color: var(--c-accent); background: #fff;
box-shadow: 0 0 0 4px var(--c-accent-soft); }
.dqx-gate-err { margin: 1px 2px 7px; font-size: .8rem; color: #e0506a; font-weight: 600; text-align: left; }
.dqx-gate-err[hidden] { display: none; }
.dqx-gate-btn { width: 100%; border: 0; cursor: pointer; margin-top: 4px; padding: 13px 16px; border-radius: 13px;
background: linear-gradient(135deg, var(--c-accent), var(--c-accent-2));
color: #fff; font-family: 'Urbanist', 'Outfit',sans-serif; font-weight: 700; font-size: .96rem;
display: inline-flex; align-items: center; justify-content: center; gap: 8px;
box-shadow: none; transition: transform .15s ease, box-shadow .15s ease, opacity .15s ease; }
.dqx-gate-btn:hover { transform: translateY(-1px); box-shadow: none; }
.dqx-gate-btn:disabled { opacity: .6; cursor: default; transform: none; }
.dqx-gate-btn i { transition: transform .2s ease; }
.dqx-gate-btn:hover i { transform: translateX(3px); }
.dqx-gate-note { display: flex; align-items: center; justify-content: center; gap: 6px;
margin-top: 12px; font-size: .72rem; color: #97a2ae; }
.dqx-gate-note i { color: var(--c-mint, #4fd1ad); }
/* --- gün ayıracı --- */
.dqx-day { text-align: center; margin: 2px 0; }
.dqx-day[hidden] { display: none; }
.dqx-day span { font-family:'DM Sans',sans-serif; font-size: .68rem; font-weight: 600; color: #8b97a4; background: rgba(10,14,26,0.05); padding: 3px 11px; border-radius: 999px; }
/* --- iletildi tiki --- */
.dqx-tick { font-size: .72rem; vertical-align: -1px; color: rgba(255,255,255,0.85); }
/* --- aşağı in butonu --- */
.dqx-scrolldown {
position: absolute; left: 50%; transform: translateX(-50%);
bottom: 156px; z-index: 4;
width: 36px; height: 36px; border-radius: 50%; border: 1px solid rgba(31,167,232,0.2);
background: #fff; color: var(--c-accent); cursor: pointer;
display: grid; place-items: center; font-size: 1rem;
box-shadow: 0 8px 20px rgba(10,14,26,0.18); animation: dqxFade .25s ease;
}
.dqx-scrolldown[hidden] { display: none; }
.dqx-scrolldown:hover { background: var(--c-accent-soft); transform: translateX(-50%) translateY(-2px); }
/* --- maskot karakter --- */
.dqx-mascot { display: block; width: 100%; height: 100%; overflow: visible; }
.dqx-mascot-eyes { transform-box: fill-box; transform-origin: center; animation: dqxBlink 4.5s infinite; }
.dqx-msg-ava .dqx-mascot { width: 21px; height: 21px; }
@keyframes dqxBlink { 0%, 93%, 100% { transform: scaleY(1); } 96% { transform: scaleY(.12); } }
.dqx-mascot-dot { transform-box: fill-box; transform-origin: center; animation: dqxDot 2s ease-in-out infinite; }
@keyframes dqxDot { 0%, 100% { opacity: .55; transform: scale(.82); } 50% { opacity: 1; transform: scale(1.18); } }
/* yerleşim renkleri + boyut */
.dqx-fab { --mascot-face: var(--c-accent); }
.dqx-fab .dqx-ic-open { width: 36px; height: 36px; }
.dqx-head-ava { color: #fff; --mascot-face: var(--c-accent); }
.dqx-head-ava .dqx-mascot { width: 31px; height: 31px; }
.dqx-welcome-ava { --mascot-face: var(--c-accent); }
.dqx-welcome-ava .dqx-mascot { width: 40px; height: 40px; }
.dqx-msg-ava { --mascot-face: #fff; }
.dqx-msg-ava .dqx-mascot { width: 20px; height: 20px; }
/* maskot tıklanınca/hover'da zıplama */
.dqx-fab:hover .dqx-mascot { animation: dqxHop .5s ease; }
@keyframes dqxHop { 0%,100%{transform:translateY(0)} 40%{transform:translateY(-4px) rotate(-4deg)} }
/* --- canlı açılış (staggered) --- */
.dqx-panel.on .dqx-head { animation: dqxSlideDown .42s cubic-bezier(.22,.95,.3,1.05) both; }
.dqx-panel.on .dqx-form { animation: dqxSlideUp .42s cubic-bezier(.22,.95,.3,1.05) .13s both; }
@keyframes dqxSlideDown { from { opacity: 0; transform: translateY(-14px); } to { opacity: 1; transform: translateY(0); } }
@keyframes dqxSlideUp { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: translateY(0); } }
.dqx-send i { transition: transform .2s ease; }
.dqx-send:hover i { transform: translateY(-2px); }
@media (prefers-reduced-motion: reduce) {
.dqx-mascot-eyes, .dqx-mascot-dot, .dqx-fab:hover .dqx-mascot,
.dqx-panel.on .dqx-head, .dqx-panel.on .dqx-form { animation: none !important; }
}
@keyframes dqxFade { from { opacity: 0; } to { opacity: 1; } }
@media (max-width: 600px) {
.dqx-fab { left: 16px; bottom: 16px; width: 56px; height: 56px; }
.dqx-peek { left: 12px; bottom: 84px; width: calc(100vw - 24px); padding: 15px 16px; }
/* Mobil: ALTTAN yukarı kayar. JS (fitToViewport) paneli TAM görünür alana (visualViewport)
oturtur → kompozer klavyenin hemen üstünde, mesajlar tüm alanı kullanır, boşluk kalmaz.
Panel altında kalan chrome bölgesi: sayfa içeriği gizlendiği için beyaz görünür (sızma yok).
height:100dvh = visualViewport desteklemeyen tarayıcılar için fallback. */
.dqx-panel {
left: 0; right: 0; top: 0; bottom: auto; width: 100%; max-width: 100%;
height: 100dvh; max-height: 100dvh; border-radius: 0;
box-sizing: border-box;
/* Kapalı: 100vh aşağıda → panel KÜÇÜK boyutta olsa (klavye açıkken) bile tam gizlenir.
Böylece kapanırken büyütmeye gerek kalmaz; mevcut boyutuyla düz aşağı kayar (kasma yok). */
transform: translateY(100vh);
/* height/top'a GEÇİŞ YOK: klavye kapanınca panel ANINDA tam boya snap'lesin. Geçiş
olursa panel küçük kalıp .25s'de büyüyor → o sırada altta gri boşluk görünüp
"yavaşça normale dönme" efekti oluşuyordu. Anında snap = gri hiç görünmez. */
transition: transform .4s cubic-bezier(.22, .9, .3, 1), opacity .2s ease;
}
.dqx-panel.on { transform: translateY(0); }
body.dqx-open .dqx-fab { opacity: 0; pointer-events: none; }
/* iOS odakta otomatik zoom yapmasın diye input'lar ≥16px olmalı */
.dqx-gate-field input,
.dqx-input textarea { font-size: 16px; }
/* iOS yüzen URL çubuğu + klavye quirk'i: fixed elemanlar görünür alana KIRPILIYOR,
panel altındaki chrome bölgesine hiçbir web elemanı (backdrop dahil) ulaşamıyor →
orada arkadaki sayfa sızıyordu. KESİN ÇÖZÜM: örtme değil — sohbet açıkken SAYFA İÇERİĞİNİ
GİZLE. Sızacak içerik kalmaz, arkada sadece beyaz body zemini görünür. */
body.dqx-open { background: #fff; }
body.dqx-open > *:not(#dqChatPanel):not(#dqChatLauncher):not(#dqChatPeek):not(script):not(style):not(noscript) {
visibility: hidden !important;
}
}
@media (prefers-reduced-motion: reduce) {
.dqx-fab, .dqx-fab-pulse, .dqx-head-ring, .dqx-livedot, .dqx-typing span, .dqx-msg, .dqx-starters { animation: none !important; }
}
/* Quick Message Modal */
.qm-overlay {
position: fixed;
inset: 0;
background: rgba(10,14,26,0.55);
backdrop-filter: blur(6px);
-webkit-backdrop-filter: blur(6px);
z-index: 1000;
display: flex;
align-items: center;
justify-content: center;
padding: 20px;
opacity: 0;
pointer-events: none;
transition: opacity .25s ease;
}
.qm-overlay.on {
opacity: 1;
pointer-events: auto;
}
/* Teklif Al modalı açıkken yüzen butonlar (chat / whatsapp / dil / davet) gizlensin */
body.qm-open .dqx-fab,
body.qm-open .wa-fab,
body.qm-open .dqx-peek,
body.qm-open .lang-fab {
opacity: 0 !important;
pointer-events: none !important;
transition: opacity .2s ease;
}
.qm-modal {
background: #fff;
border-radius: 22px;
width: 100%;
max-width: 520px;
max-height: calc(100vh - 40px);
overflow-y: auto;
padding: 36px 36px 28px;
position: relative;
box-shadow: 0 30px 70px rgba(10,14,26,0.4);
transform: translateY(20px) scale(.98);
transition: transform .35s cubic-bezier(.22,.84,.46,1);
}
.qm-overlay.on .qm-modal { transform: translateY(0) scale(1); }
.qm-close {
position: absolute;
top: 14px; right: 14px;
width: 34px; height: 34px;
border-radius: 50%;
background: #f5f7fa;
border: 1px solid var(--c-border);
color: var(--c-muted);
cursor: pointer;
display: inline-flex;
align-items: center;
justify-content: center;
font-size: .85rem;
transition: background .2s ease, color .2s ease;
}
.qm-close:hover {
background: var(--c-primary);
color: #fff;
border-color: var(--c-primary);
}
.qm-head {
margin-bottom: 22px;
padding-right: 36px;
}
.qm-eyebrow {
display: inline-flex;
align-items: center;
gap: 6px;
font-family: 'Urbanist', 'Outfit', sans-serif;
font-size: .72rem;
font-weight: 600;
color: var(--c-accent);
letter-spacing: .18em;
text-transform: uppercase;
margin-bottom: 12px;
}
.qm-dot {
width: 6px; height: 6px;
background: var(--c-accent);
border-radius: 50%;
box-shadow: 0 0 0 3px rgba(156, 163, 175,0.18);
}
.qm-title {
font-family: 'Urbanist', 'Outfit', sans-serif;
font-size: 1.55rem;
font-weight: 800;
letter-spacing: -0.025em;
line-height: 1.2;
color: var(--c-primary);
margin: 0 0 10px;
}
.qm-title .highlight {
color: var(--c-accent);
position: relative;
display: inline-block;
padding-bottom: .12em;
}
.qm-title .highlight::after {
content: '';
position: absolute;
left: -2%; right: -2%;
bottom: -.05em;
height: .26em;
background-image: url("data:image/svg+xml;utf8,");
background-repeat: no-repeat;
background-size: 100% 100%;
}
.qm-lead {
font-size: .92rem;
line-height: 1.6;
color: var(--c-muted);
margin: 0;
}
.qm-form { display: flex; flex-direction: column; gap: 14px; }
.qm-form[hidden],
.qm-success[hidden],
.qm-success-pos[hidden] { display: none !important; }
/* Success state'te üstteki form başlığı/lead'i gizle (çakışmasın) */
.qm-modal:has(.qm-success:not([hidden])) .qm-head { display: none; }
/* ============================================================
SPLIT MODAL — sol mavi marka paneli + sağ form (premium)
============================================================ */
.qm-modal--split {
max-width: 760px;
padding: 0;
overflow: hidden; /* köşeler temiz; iç scroll qm-main'de */
display: grid;
grid-template-columns: 0.82fr 1.08fr;
align-items: stretch;
}
.qm-modal--split .qm-close { z-index: 3; }
/* ---- SOL panel (açık mavi tint — havadar) ---- */
.qm-aside {
position: relative;
overflow: hidden;
padding: 38px 32px;
background: linear-gradient(170deg, #f7fbff 0%, #eaf4fb 100%);
border-right: 1px solid var(--c-border);
color: var(--c-primary);
display: flex;
flex-direction: column;
justify-content: center;
}
.qm-aside-deco {
position: absolute;
right: -52px; top: -52px;
width: 150px; height: 150px;
border-radius: 50%;
border: 1.5px solid rgba(31,167,232,.14);
box-shadow: 0 0 0 24px rgba(31,167,232,.05);
pointer-events: none;
}
.qm-aside .qm-head { margin: 0; padding: 0; }
.qm-aside .qm-title { font-size: 1.6rem; }
.qm-aside-points {
list-style: none;
margin: 26px 0 0;
padding: 0;
display: flex;
flex-direction: column;
gap: 13px;
}
.qm-aside-points li {
display: flex;
align-items: center;
gap: 11px;
font-family: 'Urbanist', 'Outfit', sans-serif;
font-size: .92rem;
font-weight: 600;
color: var(--c-primary);
}
.qm-pt-short { display: none; }
.qm-aside-points i {
flex-shrink: 0;
width: 30px; height: 30px;
border-radius: 9px;
display: grid;
place-items: center;
background: #e1f3fb;
color: var(--c-accent);
font-size: 1rem;
}
/* ---- SAĞ form alanı ---- */
.qm-main {
padding: 40px 34px 26px;
overflow-y: auto;
max-height: calc(100vh - 40px);
}
/* ---- Başarı: sol panel gizlenir, sağ tam genişlik ---- */
.qm-modal--split.is-success { grid-template-columns: 1fr; }
.qm-modal--split.is-success .qm-aside { display: none; }
/* ---- Mobil: alt alta; başlık + güven sinyalleri, forma yumuşak geçiş ---- */
@media (max-width: 640px) {
.qm-modal--split {
grid-template-columns: 1fr;
max-width: 460px;
overflow-y: auto;
}
/* başlık: ağır mavi blok KALDIRILDI → beyaz, kompakt, forma akan tek parça */
.qm-aside {
padding: 22px 22px 0;
background: #fff;
border-right: 0;
}
.qm-aside-deco { display: none; }
.qm-aside .qm-lead { display: none; }
.qm-aside .qm-title { font-size: 1.34rem; margin-bottom: 0; }
.qm-aside .qm-eyebrow { margin-bottom: 10px; }
/* güven sinyalleri: tek satır mikro çip şeridi (3 yığın satır yerine) */
.qm-aside-points {
display: flex;
flex-direction: row;
flex-wrap: wrap;
gap: 6px;
margin-top: 16px;
}
.qm-aside-points li {
font-size: .7rem;
font-weight: 600;
gap: 5px;
padding: 5px 9px;
background: var(--c-bg-soft, #f1f7fb);
border-radius: 999px;
color: var(--c-primary);
}
.qm-aside-points i {
width: auto; height: auto;
background: none;
border-radius: 0;
font-size: .78rem;
}
.qm-aside-points .qm-pt-full { display: none; }
.qm-aside-points .qm-pt-short { display: inline; }
.qm-modal--split { border-radius: 24px; }
.qm-main { padding: 14px 20px 20px; max-height: none; overflow: visible; }
/* ---- Mobilde ALTTAN açılan sheet: alta yapışık, üst köşeler yuvarlak, aşağıdan yukarı kayar ---- */
.qm-overlay { padding: 0; align-items: flex-end; }
.qm-modal,
.qm-modal--split {
width: 100%;
max-width: none;
max-height: 92dvh;
border-radius: 22px 22px 0 0;
transform: translateY(100%); /* kapalıyken ekranın altında bekler */
transition: transform .4s cubic-bezier(.22, .9, .3, 1);
}
.qm-overlay.on .qm-modal,
.qm-overlay.on .qm-modal--split { transform: translateY(0); } /* açılınca yukarı süzülür */
/* başlık kompakt */
.qm-aside { padding: 18px 20px 0; }
.qm-aside .qm-title { font-size: 1.22rem; }
.qm-aside .qm-eyebrow { margin-bottom: 8px; font-size: .68rem; }
.qm-aside-points { margin-top: 12px; }
/* form: daha sıkı boşluk + daha küçük alanlar */
.qm-form { gap: 11px; }
.qm-row { gap: 10px; }
.qm-field { gap: 5px; }
.qm-field input,
.qm-field textarea,
.qm-field select,
.qm-dd-trigger { padding: 9px 13px; font-size: 16px; } /* iOS zoom önleme */
.qm-input-wrap input { padding-left: 40px; }
.qm-field textarea { min-height: 66px; }
.qm-kvkk { font-size: .82rem; }
.qm-submit { padding: 13px 20px; }
}
/* Çok dar / kısa ekranlar: bir tık daha sıkı */
@media (max-width: 380px) {
.qm-aside-points li { padding: 4px 8px; font-size: .66rem; }
.qm-form { gap: 9px; }
.qm-field textarea { min-height: 58px; }
}
.qm-row {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 12px;
}
.qm-field {
display: flex;
flex-direction: column;
gap: 6px;
}
.qm-fl {
font-family: 'Urbanist', 'Outfit', sans-serif;
font-size: .78rem;
font-weight: 600;
color: var(--c-primary);
letter-spacing: .02em;
}
.qm-field input,
.qm-field textarea,
.qm-field select {
width: 100%;
border: 1px solid var(--c-border);
border-radius: 10px;
padding: 11px 14px;
font-family: 'Urbanist', 'Outfit', 'Inter', sans-serif;
font-size: .95rem;
color: var(--c-primary);
background: #fff;
transition: border-color .2s ease, box-shadow .2s ease;
resize: vertical;
}
.qm-field input:focus,
.qm-field textarea:focus,
.qm-field select:focus {
outline: 0;
border-color: var(--c-accent);
box-shadow: 0 0 0 3px rgba(31, 167, 232, 0.16);
}
.qm-field textarea { min-height: 90px; }
/* Alan içi leading ikon (ad / e-posta / telefon) */
.qm-input-wrap { position: relative; display: block; }
.qm-input-wrap .qm-fi {
position: absolute;
left: 14px; top: 50%;
transform: translateY(-50%);
color: #9aa6b6;
font-size: .98rem;
pointer-events: none;
transition: color .2s ease;
}
.qm-input-wrap input { padding-left: 44px; }
.qm-input-wrap:focus-within .qm-fi { color: var(--c-accent); }
/* Hizmet seçim dropdown */
.qm-field-select { position: relative; }
.qm-field-select select {
appearance: none;
-webkit-appearance: none;
padding-right: 40px;
cursor: pointer;
}
.qm-select-caret {
position: absolute;
right: 14px;
bottom: 14px;
font-size: .8rem;
color: var(--c-muted);
pointer-events: none;
transition: transform .2s ease;
}
.qm-field-select select:focus ~ .qm-select-caret { color: var(--c-accent); }
/* ---- Mobil özel hizmet açılır listesi (native select yerine, şık + animasyonlu) ---- */
.qm-dd { display: none; }
.qm-dd-trigger {
width: 100%;
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
padding: 11px 14px;
border: 1px solid var(--c-border);
border-radius: 10px;
background: #fafbfc;
font-family: 'Urbanist', 'Outfit', sans-serif;
font-size: .92rem;
color: var(--c-primary);
text-align: left;
cursor: pointer;
transition: border-color .2s ease, box-shadow .2s ease, background .2s ease;
}
.qm-dd.on .qm-dd-trigger {
border-color: var(--c-accent);
box-shadow: 0 0 0 3px rgba(31,167,232,.16);
background: #fff;
}
.qm-dd-val { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.qm-dd-val.is-placeholder { color: #9aa6b6; }
.qm-dd-caret { flex-shrink: 0; font-size: .8rem; color: #9aa6b6; transition: transform .25s ease, color .2s ease; }
.qm-dd.on .qm-dd-caret { transform: rotate(180deg); color: var(--c-accent); }
.qm-dd-panel {
position: absolute;
left: 0; right: 0;
top: calc(100% + 6px);
z-index: 6;
background: #fff;
border: 1px solid var(--c-border);
border-radius: 12px;
box-shadow: 0 18px 44px -12px rgba(10,14,26,.30);
padding: 6px;
max-height: 244px;
overflow-y: auto;
-webkit-overflow-scrolling: touch;
opacity: 0;
transform: translateY(-6px) scale(.98);
transform-origin: top center;
pointer-events: none;
transition: opacity .18s ease, transform .22s cubic-bezier(.2,.8,.3,1);
}
.qm-dd.on .qm-dd-panel { opacity: 1; transform: translateY(0) scale(1); pointer-events: auto; }
.qm-dd-opt {
display: block;
width: 100%;
text-align: left;
padding: 11px 12px;
border: 0;
background: none;
border-radius: 8px;
font-family: 'Urbanist', 'Outfit', sans-serif;
font-size: .9rem;
color: var(--c-primary);
cursor: pointer;
transition: background .15s ease, color .15s ease;
}
.qm-dd-opt:active { background: var(--c-bg-soft, #f1f7fb); }
.qm-dd-opt.is-sel { background: rgba(31,167,232,.10); color: var(--c-accent); font-weight: 600; }
@media (max-width: 640px) {
.qm-field-select select,
.qm-field-select .qm-select-caret { display: none; }
.qm-dd { display: block; }
}
.qm-kvkk {
display: flex;
align-items: flex-start;
gap: 10px;
font-size: .85rem;
color: var(--c-muted);
line-height: 1.5;
cursor: pointer;
}
.qm-kvkk input {
accent-color: var(--c-accent);
margin-top: 3px;
flex-shrink: 0;
}
.qm-kvkk a { color: var(--c-primary); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
/* FILE UPLOAD (CV) */
.qm-fl-hint {
font-weight: 400;
font-size: .72rem;
color: var(--c-muted);
margin-left: 4px;
letter-spacing: 0;
}
.qm-file-field { display: flex; flex-direction: column; gap: 6px; }
.qm-file {
position: relative;
display: flex;
align-items: center;
gap: 14px;
padding: 18px 18px;
border: 1.5px dashed var(--c-border);
border-radius: 12px;
background: #fafbfc;
cursor: pointer;
transition: border-color .2s ease, background .2s ease, transform .15s ease;
}
.qm-file:hover {
border-color: var(--c-accent);
background: #f6fffb;
}
.qm-file.drag-over {
border-color: var(--c-accent);
background: #f9fafb;
transform: scale(1.01);
box-shadow: 0 0 0 3px rgba(156, 163, 175,0.15);
}
.qm-file input[type=file] {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
opacity: 0;
cursor: pointer;
}
.qm-file-ic {
flex-shrink: 0;
width: 40px;
height: 40px;
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 10px;
background: rgba(156, 163, 175,0.12);
color: var(--c-accent);
font-size: 1.2rem;
}
.qm-file-text {
display: flex;
flex-direction: column;
gap: 2px;
line-height: 1.3;
}
.qm-file-strong {
font-family: 'Urbanist', 'Outfit', sans-serif;
font-size: .92rem;
font-weight: 600;
color: var(--c-primary);
}
.qm-file-sub {
font-family: 'Urbanist', 'Outfit', sans-serif;
font-size: .76rem;
color: var(--c-muted);
}
.qm-file.has-file {
display: none;
}
.qm-file-chip {
display: inline-flex;
align-items: center;
gap: 10px;
padding: 10px 12px 10px 14px;
background: linear-gradient(135deg, #f9fafb 0%, #f9fafb 100%);
border: 1px solid rgba(156, 163, 175,0.35);
border-radius: 10px;
color: var(--c-primary);
font-family: 'Urbanist', 'Outfit', sans-serif;
font-size: .88rem;
font-weight: 500;
max-width: 100%;
animation: qmErrIn .2s ease both;
}
.qm-file-chip[hidden] { display: none !important; }
.qm-file-chip > i {
color: var(--c-accent);
font-size: 1.05rem;
flex-shrink: 0;
}
.qm-file-chip-name {
flex: 1;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
min-width: 0;
}
.qm-file-chip-x {
flex-shrink: 0;
width: 24px;
height: 24px;
border: 0;
border-radius: 50%;
background: rgba(10,14,26,0.06);
color: var(--c-primary);
cursor: pointer;
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 1rem;
line-height: 1;
transition: background .15s ease, color .15s ease;
}
.qm-file-chip-x:hover {
background: #ef4444;
color: #fff;
}
.qm-file-field.is-invalid .qm-file {
border-color: #ef4444;
background: #fffafa;
box-shadow: 0 0 0 3px rgba(239, 68, 68, .12);
animation: qmShake .35s ease;
}
.qm-file-field.is-invalid .qm-fl { color: #dc2626; }
/* INLINE FIELD ERRORS */
.qm-field.is-invalid input,
.qm-field.is-invalid textarea,
.cp-field.is-invalid input,
.cp-field.is-invalid textarea {
border-color: #ef4444;
background: #fffafa;
box-shadow: 0 0 0 3px rgba(239, 68, 68, .12);
animation: qmShake .35s ease;
}
.qm-field.is-invalid .qm-fl,
.cp-field.is-invalid .cp-fl { color: #dc2626; }
.qm-kvkk.is-invalid,
.cp-kvkk.is-invalid {
color: #dc2626;
}
.qm-kvkk.is-invalid input,
.cp-kvkk.is-invalid input {
accent-color: #dc2626;
outline: 2px solid rgba(239, 68, 68, .25);
outline-offset: 2px;
border-radius: 3px;
animation: qmShake .35s ease;
}
.qm-err,
.cp-err {
display: inline-flex;
align-items: center;
gap: 6px;
font-family: 'Urbanist', 'Outfit', sans-serif;
font-size: .8rem;
font-weight: 500;
color: #dc2626;
line-height: 1.4;
margin-top: 2px;
animation: qmErrIn .25s ease both;
}
.qm-err[hidden],
.cp-err[hidden] { display: none !important; }
.qm-err::before,
.cp-err::before {
content: '';
display: inline-block;
width: 14px;
height: 14px;
flex-shrink: 0;
background-color: #dc2626;
-webkit-mask: url("data:image/svg+xml;utf8,") no-repeat center / contain;
mask: url("data:image/svg+xml;utf8,") no-repeat center / contain;
}
.qm-err-kvkk,
.cp-err-kvkk { margin-top: -4px; }
@keyframes qmErrIn {
from { opacity: 0; transform: translateY(-4px); }
to { opacity: 1; transform: translateY(0); }
}
@keyframes qmShake {
0%, 100% { transform: translateX(0); }
20% { transform: translateX(-4px); }
40% { transform: translateX(4px); }
60% { transform: translateX(-3px); }
80% { transform: translateX(2px); }
}
/* GENERAL ALERT — modern card */
.qm-alert {
display: flex;
align-items: flex-start;
gap: 10px;
background: linear-gradient(135deg, #fff5f5 0%, #fef2f2 100%);
border: 1px solid #fecaca;
border-left: 3px solid #ef4444;
color: #b91c1c;
border-radius: 12px;
padding: 12px 14px;
font-family: 'Urbanist', 'Outfit', sans-serif;
font-size: .88rem;
line-height: 1.5;
animation: qmErrIn .25s ease both;
}
.qm-alert[hidden] { display: none !important; }
.qm-alert-ic {
color: #ef4444;
font-size: 1.05rem;
line-height: 1.4;
flex-shrink: 0;
}
.qm-alert-text {
color: #b91c1c;
font-weight: 500;
}
.qm-submit {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 10px;
background: var(--c-primary);
color: #fff;
border: 0;
border-radius: 999px;
padding: 14px 24px;
font-family: 'Urbanist', 'Outfit', sans-serif;
font-weight: 600;
font-size: .98rem;
cursor: pointer;
transition: background .2s ease, transform .2s ease, box-shadow .2s ease;
margin-top: 4px;
}
.qm-submit:hover:not(:disabled) {
background: var(--c-accent);
transform: translateY(-2px);
box-shadow: 0 14px 32px rgba(156, 163, 175,0.28);
}
.qm-submit:hover:not(:disabled) i { transform: translateX(4px); }
.qm-submit i { transition: transform .2s ease; }
.qm-submit:disabled { opacity: .65; cursor: wait; }
.qm-foot {
margin: 4px 0 0;
text-align: center;
font-size: .78rem;
color: var(--c-muted);
}
.qm-foot i { color: var(--c-accent); margin-right: 4px; }
/* Success state */
.qm-success {
text-align: center;
padding: 6px 4px 6px;
}
/* Animasyonlu çek artwork */
.qm-success-art {
position: relative;
width: 96px;
height: 96px;
margin: 4px auto 18px;
}
.qm-success-art::before {
content: '';
position: absolute;
inset: 9px;
border-radius: 50%;
background: linear-gradient(145deg, #36bdf6 0%, #1FA7E8 50%, #0f86c6 100%);
box-shadow: 0 14px 30px -8px rgba(31,167,232,.55);
z-index: 0;
}
.qm-success-svg {
width: 96px;
height: 96px;
color: #fff;
display: block;
position: relative;
z-index: 2;
}
.qm-success-circle {
stroke-dasharray: 145;
stroke-dashoffset: 145;
transition: none;
}
.qm-success-check {
stroke-dasharray: 60;
stroke-dashoffset: 60;
transition: none;
}
.qm-success.is-on .qm-success-circle {
animation: qm-draw-circle .55s .05s ease-out forwards;
}
.qm-success.is-on .qm-success-check {
animation: qm-draw-check .35s .55s ease-out forwards;
}
@keyframes qm-draw-circle {
to { stroke-dashoffset: 0; }
}
@keyframes qm-draw-check {
to { stroke-dashoffset: 0; }
}
.qm-success-ring {
position: absolute;
inset: 0;
border-radius: 50%;
border: 2px solid rgba(31,167,232,.45);
opacity: 0;
transform: scale(.5);
pointer-events: none;
z-index: 1;
}
.qm-success.is-on .qm-success-ring-1 { animation: qm-ring 1.2s .9s ease-out forwards; }
.qm-success.is-on .qm-success-ring-2 { animation: qm-ring 1.2s 1.15s ease-out forwards; }
@keyframes qm-ring {
0% { opacity: .55; transform: scale(.65); }
100% { opacity: 0; transform: scale(1.35); }
}
.qm-success-title {
font-family: 'Urbanist', 'Outfit', sans-serif;
font-size: clamp(1.45rem, 2.8vw, 1.75rem);
font-weight: 800;
color: var(--c-primary, #0A0E1A);
margin: 0 0 12px;
letter-spacing: -0.02em;
line-height: 1.2;
opacity: 0;
transform: translateY(8px);
}
.qm-success.is-on .qm-success-title { animation: qm-fade-up .45s .9s ease-out forwards; }
.qm-success-title .highlight {
color: var(--c-accent, #9ca3af);
text-decoration: underline wavy var(--c-accent, #9ca3af);
text-underline-offset: 6px;
text-decoration-thickness: 2px;
}
.qm-success-pos {
display: inline-flex;
align-items: center;
gap: 7px;
padding: 6px 14px;
background: rgba(156, 163, 175,.10);
color: #057a54;
border-radius: 999px;
font-size: .85rem;
font-weight: 500;
margin: 0 0 14px;
opacity: 0;
}
.qm-success-pos i { font-size: .92rem; }
.qm-success-pos strong { font-weight: 700; color: var(--c-primary, #0A0E1A); }
.qm-success.is-on .qm-success-pos:not([hidden]) { animation: qm-fade-up .45s 1.05s ease-out forwards; }
.qm-success-lead {
font-size: .94rem;
color: var(--c-muted, #5a6072);
line-height: 1.65;
margin: 0 auto 20px;
max-width: 380px;
opacity: 0;
}
.qm-success.is-on .qm-success-lead { animation: qm-fade-up .45s 1.15s ease-out forwards; }
/* Adımlar — bağlantılı timeline */
.qm-success-steps {
list-style: none;
margin: 0 auto 22px;
padding: 22px 22px;
text-align: left;
background: #fff;
border: 1px solid #e8eef5;
border-radius: 18px;
max-width: 420px;
display: flex;
flex-direction: column;
gap: 18px;
opacity: 0;
box-shadow: 0 18px 40px -22px rgba(10,14,26,.22);
}
.qm-success.is-on .qm-success-steps { animation: qm-fade-up .5s 1.25s ease-out forwards; }
.qm-success-steps li {
position: relative;
display: flex;
gap: 13px;
align-items: flex-start;
padding-bottom: 0;
}
/* dikey bağlantı çizgisi (son hariç) */
.qm-success-steps li:not(:last-child)::before {
content: '';
position: absolute;
left: 16px;
top: 36px;
bottom: -20px;
width: 2px;
background: #d3e5f2;
border-radius: 2px;
}
.qm-step-ic {
position: relative;
z-index: 1;
flex: 0 0 auto;
width: 34px; height: 34px;
border-radius: 50%;
display: grid; place-items: center;
background: var(--c-accent, #9ca3af);
color: #fff;
font-size: .95rem;
box-shadow: 0 4px 10px -3px rgba(31,167,232,.5);
}
.qm-step-ic-soft {
background: #fff;
color: var(--c-accent, #1FA7E8);
border: 1.5px solid #d3e5f2;
box-shadow: none;
}
.qm-step-tx {
display: flex;
flex-direction: column;
gap: 2px;
font-size: .9rem;
line-height: 1.45;
}
.qm-step-tx strong {
font-family: 'Urbanist', 'Outfit', sans-serif;
font-weight: 700;
color: var(--c-primary, #0A0E1A);
font-size: .92rem;
}
.qm-step-tx small {
font-size: .8rem;
color: var(--c-muted, #5a6072);
}
/* Aksiyonlar */
.qm-success-actions {
display: flex;
gap: 10px;
justify-content: center;
flex-wrap: wrap;
opacity: 0;
}
.qm-success.is-on .qm-success-actions { animation: qm-fade-up .45s 1.4s ease-out forwards; }
.qm-success-btn {
background: var(--c-primary, #0A0E1A);
color: #fff;
border: 0;
border-radius: 999px;
padding: 12px 28px;
font-family: 'Urbanist', 'Outfit', sans-serif;
font-weight: 600;
font-size: .92rem;
cursor: pointer;
transition: all .2s ease;
display: inline-flex; align-items: center; gap: 7px;
text-decoration: none;
}
.qm-success-btn:hover {
background: var(--c-accent, #9ca3af);
transform: translateY(-1px);
box-shadow: 0 10px 24px rgba(156, 163, 175, .24);
}
.qm-success-btn-ghost {
background: #fff;
color: var(--c-primary, #0A0E1A);
border: 1.5px solid #e5e7eb;
border-radius: 999px;
padding: 11px 22px;
font-family: 'Urbanist', 'Outfit', sans-serif;
font-weight: 600;
font-size: .9rem;
cursor: pointer;
transition: all .2s ease;
display: inline-flex; align-items: center; gap: 7px;
text-decoration: none;
}
.qm-success-btn-ghost:hover {
border-color: var(--c-primary, #0A0E1A);
color: var(--c-primary, #0A0E1A);
text-decoration: none;
}
.qm-success-btn-ghost i { transition: transform .2s ease; }
.qm-success-btn-ghost:hover i { transform: translateX(3px); }
@keyframes qm-fade-up {
from { opacity: 0; transform: translateY(8px); }
to { opacity: 1; transform: translateY(0); }
}
@media (max-width: 600px) {
.qm-success-art { width: 84px; height: 84px; }
.qm-success-svg { width: 84px; height: 84px; }
.qm-success-actions { flex-direction: column; align-items: stretch; }
.qm-success-btn,
.qm-success-btn-ghost { justify-content: center; }
}
@media (max-width: 600px) {
/* ALTTAN açılan sheet: alta yapışık, sadece üst köşeler yuvarlak, aşağıdan yukarı kayar */
.qm-overlay {
padding: 0;
align-items: flex-end;
}
.qm-modal,
.qm-modal--split {
max-height: 92dvh;
width: 100%;
max-width: 100%;
border-radius: 20px 20px 0 0;
transform: translateY(100%);
transition: transform .4s cubic-bezier(.22, .9, .3, 1);
}
.qm-modal { padding: 22px 18px 20px; }
.qm-modal--split { padding: 0; } /* split: iç boşluk aside/main'de, modalın kendi padding'i yok */
.qm-overlay.on .qm-modal,
.qm-overlay.on .qm-modal--split { transform: translateY(0); }
/* Header */
.qm-close {
top: 12px; right: 12px;
width: 32px; height: 32px;
font-size: .8rem;
}
.qm-head {
margin-bottom: 18px;
padding-right: 40px;
}
.qm-eyebrow {
font-size: .66rem;
letter-spacing: .14em;
margin-bottom: 10px;
}
.qm-title {
font-size: 1.35rem;
letter-spacing: -.02em;
margin: 0 0 8px;
}
.qm-title .highlight::after { height: .22em; }
.qm-lead {
font-size: .88rem;
line-height: 1.55;
}
/* Form fields */
.qm-form { gap: 12px; }
.qm-row { grid-template-columns: 1fr; gap: 12px; }
.qm-field { gap: 6px; }
.qm-fl { font-size: .72rem; letter-spacing: .03em; }
.qm-field input,
.qm-field textarea,
.qm-field select,
.qm-dd-trigger {
padding: 11px 13px;
font-size: 16px; /* iOS odakta zoom yapmasın (≥16px) */
background: #fafbfc;
border-radius: 10px;
}
/* ikonlu alanlarda sol boşluk korunsun (shorthand padding'i ez) */
.qm-input-wrap input { padding-left: 44px; }
.qm-field input:focus,
.qm-field textarea:focus {
background: #fff;
}
.qm-field textarea { min-height: 84px; }
/* CV uploader */
.qm-file {
padding: 16px 16px;
gap: 12px;
border-radius: 12px;
}
.qm-file-ic {
width: 36px; height: 36px;
font-size: 1.05rem;
border-radius: 9px;
}
.qm-file-strong { font-size: .88rem; }
.qm-file-sub { font-size: .72rem; }
.qm-fl-hint {
display: block;
margin-left: 0;
margin-top: 2px;
}
/* KVKK */
.qm-kvkk {
font-size: .82rem;
line-height: 1.5;
gap: 9px;
}
.qm-kvkk input {
width: 16px; height: 16px;
}
/* Submit + foot */
.qm-submit {
padding: 14px 22px;
font-size: .94rem;
margin-top: 6px;
}
.qm-foot {
font-size: .74rem;
margin-top: 8px;
}
/* Alert */
.qm-alert {
padding: 11px 13px;
font-size: .84rem;
gap: 9px;
}
}
@media (max-width: 380px) {
.qm-modal { padding: 22px 16px 18px; }
.qm-title { font-size: 1.22rem; }
.qm-file { padding: 14px; gap: 10px; }
.qm-file-ic { width: 32px; height: 32px; font-size: .95rem; }
.qm-submit { padding: 13px 20px; font-size: .9rem; }
}
/* ===========================
Brand Identity Construction Blueprint (.bp-*)
Service detail hero — slug=marka-kimligi
=========================== */
.bp-blueprint {
position: relative;
width: 100%;
max-width: 540px;
aspect-ratio: 1 / 1.18;
background: #ffffff;
border-radius: 22px;
border: 1px solid var(--c-border);
box-shadow:
0 35px 70px -28px rgba(10,14,26,0.18),
0 12px 28px -12px rgba(10,14,26,0.08);
padding: 28px 28px 22px;
display: flex;
flex-direction: column;
overflow: hidden;
color: var(--c-primary);
}
/* Subtle dot grid background */
.bp-bg-grid {
position: absolute;
inset: 0;
background-image: radial-gradient(circle, rgba(10,14,26,0.10) 1px, transparent 1px);
background-size: 16px 16px;
background-position: 0 0;
opacity: .55;
pointer-events: none;
z-index: 0;
mask-image: radial-gradient(ellipse at center, #000 60%, transparent 95%);
-webkit-mask-image: radial-gradient(ellipse at center, #000 60%, transparent 95%);
}
/* Corner meta labels */
.bp-meta {
position: absolute;
z-index: 5;
font-family: 'Urbanist', 'Outfit', sans-serif;
font-size: .6rem;
letter-spacing: .18em;
text-transform: uppercase;
color: var(--c-muted);
font-weight: 600;
display: inline-flex;
align-items: center;
gap: 8px;
}
.bp-meta-tl { top: 18px; left: 22px; }
.bp-meta-tr { top: 18px; right: 22px; }
.bp-meta-bl { bottom: 16px; left: 22px; }
.bp-meta-br { bottom: 16px; right: 22px; }
.bp-meta-dot {
width: 7px;
height: 7px;
border-radius: 50%;
background: var(--c-accent);
box-shadow: 0 0 0 4px rgba(156, 163, 175,0.18);
flex-shrink: 0;
}
/* Construction stage */
.bp-stage {
position: relative;
flex: 1;
margin: 28px 8px 14px;
display: flex;
align-items: center;
justify-content: center;
z-index: 1;
}
/* Construction circles */
.bp-circle {
position: absolute;
border-radius: 50%;
border: 1px dashed rgba(10,14,26,0.18);
pointer-events: none;
}
.bp-circle-out {
width: 78%;
aspect-ratio: 1;
top: 50%; left: 50%;
transform: translate(-50%, -50%);
}
.bp-circle-in {
width: 50%;
aspect-ratio: 1;
top: 50%; left: 50%;
transform: translate(-50%, -50%);
border-style: dotted;
border-color: rgba(10,14,26,0.22);
}
/* Crosshair axes */
.bp-axis {
position: absolute;
background: rgba(10,14,26,0.10);
pointer-events: none;
}
.bp-axis-h {
height: 1px;
width: 86%;
top: 50%;
left: 7%;
}
.bp-axis-v {
width: 1px;
height: 86%;
left: 50%;
top: 7%;
}
/* Dimension brackets */
.bp-dim {
position: absolute;
z-index: 3;
display: flex;
align-items: center;
gap: 6px;
pointer-events: none;
}
.bp-dim-line {
background: var(--c-accent);
display: block;
}
.bp-dim-lbl {
font-family: 'Urbanist', 'Outfit', sans-serif;
font-size: .58rem;
letter-spacing: .12em;
color: var(--c-accent);
font-weight: 700;
background: #fff;
padding: 2px 6px;
border-radius: 4px;
border: 1px solid rgba(156, 163, 175,0.25);
}
.bp-dim-top {
top: 14px;
left: 50%;
transform: translateX(-50%);
flex-direction: column;
gap: 4px;
}
.bp-dim-top .bp-dim-line {
width: 60%;
height: 2px;
position: relative;
}
.bp-dim-top .bp-dim-line::before,
.bp-dim-top .bp-dim-line::after {
content: '';
position: absolute;
top: -4px;
width: 2px;
height: 10px;
background: var(--c-accent);
}
.bp-dim-top .bp-dim-line::before { left: 0; }
.bp-dim-top .bp-dim-line::after { right: 0; }
.bp-dim-side {
top: 50%;
left: 14px;
transform: translateY(-50%);
flex-direction: row;
gap: 4px;
}
.bp-dim-side .bp-dim-line {
height: 60%;
width: 2px;
min-height: 80px;
position: relative;
}
.bp-dim-side .bp-dim-line::before,
.bp-dim-side .bp-dim-line::after {
content: '';
position: absolute;
left: -4px;
width: 10px;
height: 2px;
background: var(--c-accent);
}
.bp-dim-side .bp-dim-line::before { top: 0; }
.bp-dim-side .bp-dim-line::after { bottom: 0; }
/* Center mark */
.bp-mark {
position: relative;
width: 36%;
aspect-ratio: 1;
color: var(--c-primary);
z-index: 4;
}
.bp-mark svg {
width: 100%;
height: 100%;
display: block;
}
.bp-mark-pulse {
position: absolute;
bottom: 8%;
right: 6%;
width: 16px;
height: 16px;
border-radius: 50%;
background: var(--c-accent);
border: 4px solid #fff;
box-shadow: 0 0 0 4px rgba(156, 163, 175,0.20);
}
/* Corner registration ticks */
.bp-tick {
position: absolute;
width: 14px;
height: 14px;
pointer-events: none;
}
.bp-tick::before,
.bp-tick::after {
content: '';
position: absolute;
background: var(--c-primary);
}
.bp-tick::before { top: 0; left: 0; width: 14px; height: 1.5px; }
.bp-tick::after { top: 0; left: 0; width: 1.5px; height: 14px; }
.bp-tick-tl { top: 6px; left: 6px; }
.bp-tick-tr { top: 6px; right: 6px; transform: scaleX(-1); }
.bp-tick-bl { bottom: 6px; left: 6px; transform: scaleY(-1); }
.bp-tick-br { bottom: 6px; right: 6px; transform: scale(-1, -1); }
/* Bottom: scale variants */
.bp-scale {
position: relative;
z-index: 2;
border-top: 1px solid var(--c-border);
padding-top: 16px;
margin-top: 12px;
display: flex;
flex-direction: column;
gap: 10px;
}
.bp-scale-lbl {
font-family: 'Urbanist', 'Outfit', sans-serif;
font-size: .58rem;
letter-spacing: .18em;
text-transform: uppercase;
color: var(--c-muted);
font-weight: 600;
}
.bp-scale-row {
display: flex;
align-items: center;
gap: 14px;
}
.bp-var {
color: var(--c-primary);
display: inline-flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.bp-var svg { width: 100%; height: 100%; display: block; }
.bp-var-1 { width: 16px; height: 16px; }
.bp-var-2 { width: 24px; height: 24px; }
.bp-var-3 { width: 36px; height: 36px; }
.bp-var-4 { width: 52px; height: 52px; }
.bp-scale-tag {
margin-left: auto;
font-family: 'Urbanist', 'Outfit', sans-serif;
font-size: .58rem;
letter-spacing: .14em;
color: var(--c-muted);
font-weight: 500;
}
@media (max-width: 600px) {
.bp-blueprint { padding: 24px 22px 18px; aspect-ratio: 1 / 1.22; }
.bp-meta { font-size: .54rem; }
.bp-meta-tl, .bp-meta-tr { top: 14px; }
.bp-meta-tl, .bp-meta-bl { left: 18px; }
.bp-meta-tr, .bp-meta-br { right: 18px; }
.bp-meta-bl, .bp-meta-br { bottom: 12px; }
.bp-stage { margin: 22px 4px 10px; }
.bp-mark { width: 38%; }
.bp-dim-lbl { font-size: .52rem; padding: 2px 5px; }
.bp-var-1 { width: 14px; height: 14px; }
.bp-var-2 { width: 20px; height: 20px; }
.bp-var-3 { width: 28px; height: 28px; }
.bp-var-4 { width: 40px; height: 40px; }
.bp-scale-tag { font-size: .52rem; }
.bp-tick { width: 10px; height: 10px; }
.bp-tick::before { width: 10px; }
.bp-tick::after { height: 10px; }
}
/* ===========================
Brand Stats — editorial (.bs-*)
marka-kimligi sayfasındaki stats şeridi
=========================== */
.bs-strip {
padding: 56px 0 48px;
}
.bs-head {
margin-bottom: 36px;
}
.bs-eyebrow {
display: inline-flex;
align-items: center;
gap: 12px;
font-family: 'Urbanist', 'Outfit', sans-serif;
font-size: .72rem;
letter-spacing: .22em;
text-transform: uppercase;
color: var(--c-muted);
font-weight: 600;
}
.bs-eyebrow-line {
width: 36px;
height: 1px;
background: var(--c-accent);
display: inline-block;
}
.bs-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 0;
}
.bs-item {
position: relative;
padding: 4px 28px 4px 0;
display: flex;
flex-direction: column;
gap: 0;
}
.bs-item + .bs-item {
padding-left: 28px;
border-left: 1px solid var(--c-border);
}
.bs-idx {
font-family: 'Urbanist', 'Outfit', sans-serif;
font-size: .68rem;
letter-spacing: .18em;
color: var(--c-accent);
font-weight: 700;
margin-bottom: 14px;
display: inline-flex;
align-items: center;
gap: 8px;
}
.bs-idx::after {
content: '';
flex: 1;
height: 1px;
background: var(--c-border);
display: inline-block;
}
.bs-num {
font-family: 'Urbanist', 'Outfit', sans-serif;
font-weight: 800;
font-size: 3.4rem;
letter-spacing: -0.018em;
color: var(--c-primary);
line-height: 1;
margin: 0 0 10px;
display: inline-flex;
align-items: baseline;
gap: 4px;
}
.bs-num sup {
font-family: 'Urbanist', 'Outfit', sans-serif;
font-size: .85rem;
font-weight: 600;
letter-spacing: 0.02em;
color: var(--c-muted);
top: -1.4em;
text-transform: lowercase;
}
.bs-lbl {
font-family: 'Urbanist', 'Outfit', sans-serif;
font-weight: 600;
font-size: .92rem;
color: var(--c-primary);
letter-spacing: -0.01em;
margin-bottom: 4px;
}
.bs-sub {
font-family: 'Urbanist', 'Outfit', sans-serif;
font-size: .78rem;
color: var(--c-muted);
font-weight: 400;
line-height: 1.4;
}
@media (max-width: 880px) {
.bs-grid { grid-template-columns: repeat(2, 1fr); gap: 32px 0; }
.bs-item { padding: 0 16px; }
.bs-item:nth-child(odd) { padding-left: 0; border-left: 0; }
.bs-item:nth-child(even) { border-left: 1px solid var(--c-border); padding-left: 24px; }
.bs-item + .bs-item { padding-left: 16px; border-left: 0; }
.bs-item:nth-child(even) + .bs-item { padding-left: 0; }
.bs-num { font-size: 2.6rem; }
}
@media (max-width: 540px) {
.bs-strip { padding: 44px 0 36px; }
.bs-head { margin-bottom: 26px; }
.bs-grid { grid-template-columns: 1fr; gap: 24px; }
.bs-item, .bs-item + .bs-item, .bs-item:nth-child(even) {
padding: 0 0 24px;
border-left: 0;
border-bottom: 1px solid var(--c-border);
}
.bs-grid .bs-item:last-child { border-bottom: 0; padding-bottom: 0; }
.bs-num { font-size: 2.4rem; }
}
/* === Eski .mb-* (kullanılmıyor — bırakıyoruz, kaldırılabilir) === */
.mb-board {
position: relative;
width: 100%;
max-width: 540px;
aspect-ratio: 1 / 1.05;
background: #f3ede2;
border-radius: 22px;
border: 1px solid rgba(10,14,26,0.08);
box-shadow:
0 30px 60px -25px rgba(10,14,26,0.25),
0 10px 25px -10px rgba(10,14,26,0.10);
padding: 28px;
display: grid;
grid-template-columns: 1.15fr 1fr;
grid-template-rows: 1fr 1fr;
gap: 18px;
overflow: hidden;
}
.mb-board-noise {
position: absolute;
inset: 0;
pointer-events: none;
background:
radial-gradient(circle at 20% 18%, rgba(196,69,54,0.06), transparent 45%),
radial-gradient(circle at 85% 82%, rgba(122,132,113,0.07), transparent 45%);
z-index: 0;
}
.mb-board-tag,
.mb-board-corner {
position: absolute;
z-index: 4;
font-family: 'Urbanist', 'Outfit', sans-serif;
font-size: .68rem;
letter-spacing: .12em;
text-transform: uppercase;
color: rgba(26,29,43,0.55);
font-weight: 600;
}
.mb-board-tag { top: 14px; left: 18px; }
.mb-board-corner { top: 14px; right: 18px; }
/* Logo card — top left, larger */
.mb-logo-card {
position: relative;
z-index: 2;
grid-column: 1;
grid-row: 1;
background: #ffffff;
border: 1px solid rgba(10,14,26,0.06);
border-radius: 14px;
padding: 22px 20px 18px;
display: flex;
flex-direction: column;
align-items: flex-start;
justify-content: center;
gap: 14px;
box-shadow: 0 4px 14px -8px rgba(10,14,26,0.18);
}
.mb-logo-mark {
width: 54px;
height: 54px;
color: #1a1d2b;
}
.mb-logo-mark svg { width: 100%; height: 100%; display: block; }
.mb-logo-wordmark {
display: flex;
flex-direction: column;
gap: 2px;
}
.mb-logo-name {
font-family: 'Urbanist', 'Outfit', sans-serif;
font-weight: 800;
font-size: 1.6rem;
letter-spacing: -0.02em;
color: #1a1d2b;
line-height: 1;
position: relative;
}
.mb-logo-name sup {
font-size: .5em;
font-weight: 500;
margin-left: 2px;
top: -0.8em;
color: rgba(26,29,43,0.55);
}
.mb-logo-sub {
font-family: 'Urbanist', 'Outfit', sans-serif;
font-size: .7rem;
letter-spacing: .14em;
text-transform: uppercase;
color: rgba(26,29,43,0.5);
font-weight: 500;
}
/* Palette — top right */
.mb-palette {
position: relative;
z-index: 2;
grid-column: 2;
grid-row: 1;
background: #ffffff;
border: 1px solid rgba(10,14,26,0.06);
border-radius: 14px;
padding: 18px 16px;
display: flex;
flex-direction: column;
gap: 12px;
box-shadow: 0 4px 14px -8px rgba(10,14,26,0.18);
}
.mb-pal-lbl {
font-family: 'Urbanist', 'Outfit', sans-serif;
font-size: .68rem;
letter-spacing: .14em;
text-transform: uppercase;
color: rgba(26,29,43,0.5);
font-weight: 600;
}
.mb-palette-row {
display: grid;
grid-template-columns: repeat(5, 1fr);
gap: 6px;
flex: 1;
min-height: 90px;
}
.mb-pal {
border-radius: 8px;
position: relative;
overflow: hidden;
display: flex;
align-items: flex-end;
padding: 6px 4px;
}
.mb-pal i {
font-style: normal;
font-family: 'Urbanist', 'Outfit', sans-serif;
font-size: .52rem;
letter-spacing: .04em;
color: #ffffff;
opacity: 0;
transition: opacity .25s ease;
font-weight: 600;
}
.mb-pal:hover i { opacity: .9; }
.mb-pal-1 { background: #1a1d2b; }
.mb-pal-2 { background: #f3ede2; border: 1px solid rgba(10,14,26,0.08); }
.mb-pal-2 i { color: #1a1d2b; }
.mb-pal-3 { background: #d4a574; }
.mb-pal-4 { background: #7a8471; }
.mb-pal-5 { background: #c44536; }
/* Typography card — bottom left */
.mb-type {
position: relative;
z-index: 2;
grid-column: 1;
grid-row: 2;
background: #1a1d2b;
color: #f3ede2;
border-radius: 14px;
padding: 18px 20px;
display: flex;
align-items: center;
gap: 16px;
box-shadow: 0 4px 14px -8px rgba(10,14,26,0.25);
}
.mb-type-aa {
font-family: 'Urbanist', 'Outfit', sans-serif;
font-weight: 700;
font-size: 3rem;
line-height: 1;
letter-spacing: -0.018em;
color: #f3ede2;
}
.mb-type-meta {
display: flex;
flex-direction: column;
gap: 4px;
}
.mb-type-name {
font-family: 'Urbanist', 'Outfit', sans-serif;
font-weight: 700;
font-size: .95rem;
letter-spacing: -0.01em;
color: #f3ede2;
}
.mb-type-grade {
font-family: 'Urbanist', 'Outfit', sans-serif;
font-size: .68rem;
letter-spacing: .12em;
text-transform: uppercase;
color: rgba(243,237,226,0.55);
font-weight: 500;
}
/* Business card mockup — bottom right (front + back stacked) */
.mb-card {
position: relative;
z-index: 2;
grid-column: 2;
grid-row: 2;
display: grid;
grid-template-columns: 1fr;
grid-template-rows: 1fr 1fr;
gap: 8px;
}
.mb-card-front,
.mb-card-back {
border-radius: 10px;
padding: 12px 14px;
display: flex;
flex-direction: column;
justify-content: center;
box-shadow: 0 4px 12px -6px rgba(10,14,26,0.20);
overflow: hidden;
}
.mb-card-front {
background: #ffffff;
border: 1px solid rgba(10,14,26,0.06);
align-items: flex-start;
gap: 6px;
}
.mb-card-logo {
width: 22px;
height: 22px;
color: #1a1d2b;
}
.mb-card-logo svg { width: 100%; height: 100%; display: block; }
.mb-card-name {
font-family: 'Urbanist', 'Outfit', sans-serif;
font-weight: 700;
font-size: .82rem;
color: #1a1d2b;
letter-spacing: -0.01em;
line-height: 1.1;
}
.mb-card-tag {
font-family: 'Urbanist', 'Outfit', sans-serif;
font-size: .58rem;
letter-spacing: .12em;
text-transform: uppercase;
color: rgba(26,29,43,0.5);
font-weight: 500;
}
.mb-card-back {
background: #1a1d2b;
color: #f3ede2;
gap: 2px;
}
.mb-card-back span {
font-family: 'Urbanist', 'Outfit', sans-serif;
font-weight: 700;
font-size: .78rem;
color: #f3ede2;
letter-spacing: -0.01em;
}
.mb-card-back small {
font-family: 'Urbanist', 'Outfit', sans-serif;
font-size: .58rem;
letter-spacing: .1em;
text-transform: uppercase;
color: rgba(243,237,226,0.55);
font-weight: 500;
}
.mb-card-back em {
font-style: normal;
font-family: 'Urbanist', 'Outfit', sans-serif;
font-size: .58rem;
color: rgba(243,237,226,0.7);
margin-top: 4px;
font-weight: 400;
letter-spacing: 0.01em;
}
@media (max-width: 600px) {
.mb-board { padding: 22px 18px; gap: 12px; aspect-ratio: 1 / 1.1; }
.mb-board-tag, .mb-board-corner { font-size: .6rem; top: 10px; }
.mb-board-tag { left: 14px; }
.mb-board-corner { right: 14px; }
.mb-logo-card { padding: 16px 14px; gap: 10px; }
.mb-logo-mark { width: 42px; height: 42px; }
.mb-logo-name { font-size: 1.25rem; }
.mb-logo-sub { font-size: .6rem; }
.mb-palette { padding: 14px 12px; gap: 10px; }
.mb-pal-lbl { font-size: .6rem; }
.mb-palette-row { min-height: 60px; gap: 4px; }
.mb-type { padding: 14px 16px; gap: 12px; }
.mb-type-aa { font-size: 2.2rem; }
.mb-type-name { font-size: .82rem; }
.mb-type-grade { font-size: .58rem; }
.mb-card-front, .mb-card-back { padding: 10px 12px; }
.mb-card-name { font-size: .72rem; }
.mb-card-tag, .mb-card-back small, .mb-card-back em { font-size: .52rem; }
.mb-card-back span { font-size: .7rem; }
}
/* Responsive */
@media (max-width: 1080px) {
.sd-hero-wrap { grid-template-columns: 1fr; gap: 40px; }
.sd-hero-visual { min-height: 460px; }
.device-mac { max-width: 540px; }
.device-phone { right: 10%; bottom: -10px; }
.sd-caps-grid { grid-template-columns: repeat(2, 1fr); }
.sd-steps { grid-template-columns: repeat(2, 1fr); }
.sd-steps::before { display: none; }
}
@media (max-width: 600px) {
.sd-hero { padding: 30px 0 60px; }
.sd-stats { gap: 22px; }
.sd-stat strong { font-size: 1.35rem; }
.device-mac { max-width: 100%; }
.device-phone { width: 150px; right: 0; bottom: -20px; }
.sd-caps-grid { grid-template-columns: 1fr; }
.sd-steps { grid-template-columns: 1fr; gap: 14px; }
.sd-process { padding: 60px 0 70px; }
}
/* ============================================
LEGAL PAGES (sayfa.php — KVKK, Gizlilik, Çerez)
============================================ */
.lp-hero {
padding: calc(var(--header-h) + clamp(28px, 3.5vw, 48px)) 0 26px;
position: relative;
background:
radial-gradient(120% 140% at 100% -10%, color-mix(in srgb, var(--c-accent) 9%, transparent) 0%, transparent 50%);
}
/* mobilde hero üst boşluğu (diğer şablonlarla aynı nefes payı) */
@media (max-width: 600px) {
.lp-hero { padding-top: calc(var(--header-h) + 76px); }
}
.lp-title {
font-family: 'Urbanist', 'Outfit', sans-serif;
font-size: clamp(2rem, 4.4vw, 3rem);
font-weight: 700;
color: var(--c-primary, #0A0E1A);
letter-spacing: -.02em;
line-height: 1.1;
margin: 0 0 18px;
max-width: 820px;
}
.lp-lead {
font-family: 'Urbanist', 'Outfit', sans-serif;
font-size: 1.05rem;
line-height: 1.65;
color: #4b5563;
max-width: 760px;
margin: 0 0 22px;
}
.lp-meta {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 8px;
font-family: 'Urbanist', 'Outfit', sans-serif;
font-size: .82rem;
color: #4b5563;
padding-top: 18px;
border-top: 1px solid #eef0f4;
}
.lp-meta-item {
display: inline-flex;
align-items: center;
gap: 7px;
padding: 7px 13px;
background: #f7f8fb;
border: 1px solid #eef0f4;
border-radius: 999px;
font-weight: 500;
line-height: 1;
transition: all .2s ease;
}
.lp-meta-item:hover {
background: #fff;
border-color: #d1d5db;
}
.lp-meta-item i {
color: var(--c-accent, #9ca3af);
font-size: .95rem;
line-height: 1;
}
.lp-meta-sep { display: none; }
/* Inter-page nav */
.lp-nav-section { padding: 28px 0 8px; }
.lp-nav {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 12px;
background: transparent;
border: 0;
padding: 0;
}
.lp-nav-item {
position: relative;
display: flex;
align-items: center;
justify-content: flex-start;
gap: 13px;
padding: 15px 18px;
border-radius: 15px;
background: #fff;
border: 1px solid var(--c-border);
box-shadow: none;
font-family: 'Urbanist', 'Outfit', sans-serif;
font-size: .92rem;
font-weight: 600;
color: var(--c-primary, #0A0E1A);
text-decoration: none;
transition: transform .25s cubic-bezier(.2,.7,.3,1), box-shadow .25s ease, border-color .25s ease, background .25s ease;
}
.lp-nav-item i {
flex-shrink: 0;
width: 36px; height: 36px;
display: grid; place-items: center;
border-radius: 11px;
background: var(--c-accent-soft);
color: var(--c-accent);
font-size: 1.05rem;
transition: background .25s ease, color .25s ease;
}
.lp-nav-item span { line-height: 1.25; }
.lp-nav-item:hover {
transform: translateY(-3px);
border-color: color-mix(in srgb, var(--c-accent) 45%, var(--c-border));
box-shadow: none;
}
.lp-nav-item.active {
background: linear-gradient(150deg, var(--c-accent) 0%, var(--c-accent-2) 100%);
border-color: transparent;
color: #fff;
box-shadow: none;
}
.lp-nav-item.active i { background: rgba(255,255,255,.22); color: #fff; }
/* Content layout */
.lp-section { padding: 50px 0 70px; }
.lp-grid {
display: grid;
grid-template-columns: 280px 1fr;
gap: 50px;
align-items: flex-start;
}
.lp-side {
position: sticky;
top: 100px;
display: flex;
flex-direction: column;
gap: 20px;
}
.lp-side-card {
background: #fff;
border: 1px solid var(--c-border);
border-radius: 16px;
padding: 22px 20px;
box-shadow: 0 18px 40px -30px rgba(10,14,26,.2);
}
.lp-side-eyebrow {
display: block;
font-family: 'Urbanist', 'Outfit', sans-serif;
font-size: .72rem;
font-weight: 700;
color: var(--c-accent, #9ca3af);
letter-spacing: .08em;
text-transform: uppercase;
margin-bottom: 14px;
}
.lp-side-list {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
gap: 4px;
counter-reset: lpsec;
}
.lp-side-list li { margin: 0; }
.lp-side-list li a {
display: flex;
align-items: flex-start;
gap: 10px;
padding: 8px 10px;
border-radius: 8px;
font-family: 'Urbanist', 'Outfit', sans-serif;
font-size: .88rem;
line-height: 1.4;
color: #4b5563;
text-decoration: none;
border-left: 2px solid transparent;
transition: all .2s ease;
}
.lp-side-list li a:hover {
color: var(--c-primary, #0A0E1A);
background: var(--c-bg-soft);
border-left-color: var(--c-accent, #9ca3af);
}
.lp-side-list li a.is-active {
color: var(--c-accent);
background: var(--c-accent-soft);
border-left-color: var(--c-accent);
font-weight: 600;
}
.lp-side-list li a.is-active .lp-side-num { color: var(--c-accent); }
.lp-side-num {
font-family: 'Urbanist', 'Outfit', sans-serif;
font-size: .72rem;
font-weight: 700;
color: var(--c-accent, #9ca3af);
letter-spacing: .04em;
flex-shrink: 0;
padding-top: 1px;
}
.lp-side-help {
background: linear-gradient(135deg, #f7f8fb 0%, #eef5f1 100%);
border: 1px solid #e7ebf0;
border-radius: 14px;
padding: 24px 22px;
color: var(--c-primary, #0A0E1A);
position: relative;
overflow: hidden;
}
.lp-side-help::before {
content: '';
position: absolute;
top: -30px; right: -30px;
width: 100px; height: 100px;
background: radial-gradient(circle, rgba(156, 163, 175, .2), transparent 70%);
border-radius: 50%;
}
.lp-side-help h4 {
font-family: 'Urbanist', 'Outfit', sans-serif;
font-size: 1.05rem;
font-weight: 700;
color: var(--c-primary, #0A0E1A);
margin: 0 0 8px;
position: relative;
}
.lp-side-help p {
font-family: 'Urbanist', 'Outfit', sans-serif;
font-size: .87rem;
line-height: 1.55;
color: #4b5563;
margin: 0 0 14px;
position: relative;
}
.lp-side-link {
display: inline-flex;
align-items: center;
gap: 6px;
font-family: 'Urbanist', 'Outfit', sans-serif;
font-size: .88rem;
font-weight: 600;
color: var(--c-primary, #0A0E1A);
text-decoration: none;
border-bottom: 1.5px solid var(--c-accent, #9ca3af);
padding-bottom: 2px;
position: relative;
}
.lp-side-link i {
color: var(--c-accent, #9ca3af);
transition: transform .25s ease;
}
.lp-side-link:hover i { transform: translateX(4px); }
/* Article content */
.lp-article { min-width: 0; }
.lp-content {
font-family: 'Urbanist', 'Outfit', sans-serif;
font-size: 1rem;
line-height: 1.8;
color: #374151;
}
.lp-content p { margin: 0 0 18px; }
.lp-content br + br { display: none; }
.lp-content strong { color: var(--c-primary, #0A0E1A); font-weight: 600; }
.lp-content a {
color: var(--c-primary, #0A0E1A);
text-decoration: underline;
text-underline-offset: 3px;
text-decoration-thickness: 1.5px;
text-decoration-color: var(--c-accent, #9ca3af);
}
.lp-content a:hover { color: var(--c-accent, #9ca3af); }
/* Admin Summernote çıktısı için (yasal sayfalarda) — structured render ile aynı görünüm */
.lp-content-custom { counter-reset: lp-sec; }
.lp-content-custom h2 {
counter-increment: lp-sec;
font-family: 'Urbanist', 'Outfit', sans-serif;
font-size: 1.35rem;
font-weight: 700;
color: var(--c-primary, #0A0E1A);
letter-spacing: -.01em;
line-height: 1.3;
margin: 0 0 16px;
padding: 28px 0 0;
border-top: 1px solid #eef0f4;
display: flex;
align-items: baseline;
gap: 14px;
scroll-margin-top: 100px;
}
.lp-content-custom h2:first-child { border-top: none; padding-top: 0; }
.lp-content-custom h2::before {
content: counter(lp-sec, decimal-leading-zero);
font-family: 'Urbanist', 'Outfit', sans-serif;
font-size: .82rem;
font-weight: 800;
color: #fff;
letter-spacing: .06em;
background: linear-gradient(150deg, var(--c-accent), var(--c-accent-2));
padding: 5px 11px;
border-radius: 8px;
flex-shrink: 0;
line-height: 1.4;
box-shadow: 0 6px 14px -6px color-mix(in srgb, var(--c-accent) 60%, transparent);
}
.lp-content-custom h2 + h2 { margin-top: 28px; }
.lp-content-custom h3 {
font-family: 'Urbanist', 'Outfit', sans-serif;
font-size: 1.1rem;
font-weight: 700;
color: var(--c-primary, #0A0E1A);
margin: 22px 0 10px;
}
.lp-content-custom h4 {
font-family: 'Urbanist', 'Outfit', sans-serif;
font-size: 1rem;
font-weight: 700;
color: var(--c-primary, #0A0E1A);
margin: 18px 0 8px;
}
.lp-content-custom ul,
.lp-content-custom ol {
list-style: none;
margin: 0 0 18px;
padding: 0;
display: flex;
flex-direction: column;
gap: 10px;
}
.lp-content-custom ul li,
.lp-content-custom ol li {
position: relative;
padding: 10px 14px 10px 36px;
background: #f7f8fb;
border-left: 3px solid var(--c-accent, #9ca3af);
border-radius: 0 8px 8px 0;
font-size: .96rem;
line-height: 1.6;
color: #374151;
}
.lp-content-custom ul li::before {
content: '';
position: absolute;
left: 14px;
top: 18px;
width: 6px;
height: 6px;
background: var(--c-accent, #9ca3af);
border-radius: 50%;
}
.lp-content-custom ol { counter-reset: lp-ol; }
.lp-content-custom ol li {
counter-increment: lp-ol;
}
.lp-content-custom ol li::before {
content: counter(lp-ol);
position: absolute;
left: 10px;
top: 50%;
transform: translateY(-50%);
width: 18px;
height: 18px;
background: var(--c-accent, #9ca3af);
color: #fff;
border-radius: 50%;
font-size: .7rem;
font-weight: 700;
display: grid;
place-items: center;
}
.lp-content-custom blockquote {
margin: 0 0 18px;
padding: 16px 20px;
background: #f7f8fb;
border-left: 3px solid var(--c-accent, #9ca3af);
border-radius: 0 8px 8px 0;
color: #374151;
font-style: italic;
}
.lp-content-custom hr {
border: 0;
border-top: 1px solid #eef0f4;
margin: 32px 0;
}
.lp-content-custom img {
max-width: 100%;
height: auto;
border-radius: 10px;
margin: 14px 0;
}
.lp-content-custom table {
width: 100%;
border-collapse: collapse;
margin: 0 0 18px;
border-radius: 8px;
overflow: hidden;
}
.lp-content-custom th,
.lp-content-custom td {
border: 1px solid #e5e7eb;
padding: 12px 14px;
text-align: left;
font-size: .94rem;
}
.lp-content-custom th { background: #f7f8fb; font-weight: 600; color: var(--c-primary, #0A0E1A); }
/* Son paragrafta iletişim bloğu (default seed'in üretttiği) — kart görünümü */
.lp-content-custom > p:last-child:has(strong:first-child) {
margin-top: 24px;
padding: 22px 24px;
background: linear-gradient(160deg, #f7f8fb 0%, #f9fafb 100%);
border: 1px solid #e5e7eb;
border-radius: 14px;
line-height: 2;
}
.lp-content-custom > p:last-child:has(strong:first-child) strong {
display: inline-block;
min-width: 130px;
color: var(--c-primary, #0A0E1A);
font-weight: 600;
}
@media (max-width: 768px) {
.lp-content-custom h2 { font-size: 1.15rem; gap: 10px; padding-top: 22px; }
.lp-content-custom ul li,
.lp-content-custom ol li { font-size: .9rem; padding: 10px 12px 10px 32px; }
}
/* Structured sections */
.lp-sec {
padding: 28px 0;
border-top: 1px solid #eef0f4;
scroll-margin-top: 100px;
}
.lp-sec:first-child { padding-top: 0; border-top: none; }
.lp-sec-head {
display: flex;
align-items: baseline;
gap: 14px;
margin-bottom: 16px;
}
.lp-sec-num {
font-family: 'Urbanist', 'Outfit', sans-serif;
font-size: .82rem;
font-weight: 800;
color: #fff;
letter-spacing: .06em;
background: linear-gradient(150deg, var(--c-accent), var(--c-accent-2));
padding: 5px 11px;
border-radius: 8px;
flex-shrink: 0;
box-shadow: 0 6px 14px -6px color-mix(in srgb, var(--c-accent) 60%, transparent);
}
.lp-sec-title {
font-family: 'Urbanist', 'Outfit', sans-serif;
font-size: 1.35rem;
font-weight: 700;
color: var(--c-primary, #0A0E1A);
letter-spacing: -.01em;
margin: 0;
line-height: 1.3;
}
.lp-list {
list-style: none;
margin: 0 0 18px;
padding: 0;
display: flex;
flex-direction: column;
gap: 10px;
}
.lp-list li {
position: relative;
padding: 10px 14px 10px 36px;
background: #f7f8fb;
border-left: 3px solid var(--c-accent, #9ca3af);
border-radius: 0 8px 8px 0;
font-size: .96rem;
line-height: 1.6;
color: #374151;
}
.lp-list li::before {
content: '';
position: absolute;
left: 14px;
top: 18px;
width: 6px;
height: 6px;
background: var(--c-accent, #9ca3af);
border-radius: 50%;
}
/* Contact card inside content */
.lp-contact-card {
margin-top: 16px;
background: linear-gradient(135deg, #f7f8fb 0%, #eef5f1 100%);
border: 1px solid #e7ebf0;
border-radius: 14px;
padding: 24px 26px;
}
.lp-contact-row {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 22px;
}
.lp-contact-block {
display: flex;
flex-direction: column;
gap: 4px;
}
.lp-contact-block i {
font-size: 1.1rem;
color: var(--c-accent, #9ca3af);
margin-bottom: 4px;
}
.lp-contact-lbl {
font-family: 'Urbanist', 'Outfit', sans-serif;
font-size: .7rem;
font-weight: 600;
color: #6b7280;
letter-spacing: .08em;
text-transform: uppercase;
}
.lp-contact-block strong {
font-family: 'Urbanist', 'Outfit', sans-serif;
font-size: .92rem;
color: var(--c-primary, #0A0E1A);
font-weight: 600;
}
.lp-contact-block strong a {
color: inherit;
text-decoration: none;
border-bottom: 1.5px solid var(--c-accent, #9ca3af);
}
.lp-contact-block strong a:hover { color: var(--c-accent, #9ca3af); }
/* Empty state */
.lp-empty {
text-align: center;
padding: 60px 30px;
background: #f7f8fb;
border: 1px dashed #d1d5db;
border-radius: 14px;
}
.lp-empty i {
font-size: 3rem;
color: #9ca3af;
margin-bottom: 14px;
display: block;
}
.lp-empty h3 {
font-family: 'Urbanist', 'Outfit', sans-serif;
font-size: 1.2rem;
color: var(--c-primary, #0A0E1A);
margin: 0 0 8px;
}
.lp-empty p {
color: #6b7280;
font-size: .95rem;
margin: 0 0 20px;
}
.lp-empty-btn {
display: inline-flex;
align-items: center;
gap: 6px;
font-family: 'Urbanist', 'Outfit', sans-serif;
font-weight: 600;
color: var(--c-primary, #0A0E1A);
border: 1.5px solid var(--c-primary, #0A0E1A);
padding: 10px 18px;
border-radius: 999px;
text-decoration: none;
transition: all .25s ease;
}
.lp-empty-btn:hover {
background: var(--c-primary, #0A0E1A);
color: #fff;
}
/* Footer info card */
.lp-footer-info {
margin-top: 50px;
background: #f7f8fb;
border: 1px solid #eef0f4;
border-radius: 14px;
padding: 26px 28px;
}
.lp-footer-row {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 24px;
}
.lp-footer-block { display: flex; flex-direction: column; gap: 4px; }
.lp-footer-lbl {
font-family: 'Urbanist', 'Outfit', sans-serif;
font-size: .72rem;
font-weight: 600;
color: #9ca3af;
letter-spacing: .08em;
text-transform: uppercase;
}
.lp-footer-block strong {
font-family: 'Urbanist', 'Outfit', sans-serif;
font-size: .92rem;
color: var(--c-primary, #0A0E1A);
font-weight: 600;
}
/* Responsive */
/* Genel wrap + overflow güvenliği (Summernote içeriği için) */
.lp-content-custom { overflow-wrap: anywhere; word-break: break-word; }
.lp-content-custom h2 { min-width: 0; }
.lp-content-custom img,
.lp-content-custom iframe { max-width: 100%; height: auto; }
.lp-content-custom pre { overflow-x: auto; max-width: 100%; }
.lp-content-custom table {
display: block;
overflow-x: auto;
max-width: 100%;
-webkit-overflow-scrolling: touch;
}
@media (max-width: 960px) {
.lp-grid { grid-template-columns: 1fr; gap: 30px; }
.lp-side { position: static; }
.lp-side-card,
.lp-side-help { display: none; }
.lp-footer-row { grid-template-columns: 1fr; gap: 18px; }
}
@media (max-width: 720px) {
/* Yasal sayfa nav — mobilde 2-kolon kompakt ızgara: hepsi tek ekranda
görünür, kaydırma yok, gölge yok (kullanımı kolay) */
.lp-nav-section { padding: 14px 0 4px; }
.lp-nav {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 8px;
}
.lp-nav-item {
justify-content: flex-start;
gap: 9px;
padding: 11px 12px;
border-radius: 13px;
font-size: .8rem;
line-height: 1.2;
box-shadow: none;
}
.lp-nav-item.active { box-shadow: none; }
.lp-nav-item i {
width: 30px; height: 30px;
border-radius: 9px;
font-size: .95rem;
}
.lp-meta { font-size: .8rem; }
.lp-meta-sep { display: none; }
.lp-contact-row { grid-template-columns: 1fr; gap: 16px; }
.lp-sec-title { font-size: 1.15rem; }
.lp-sec-head { gap: 10px; }
/* Custom content (admin Summernote) — uzun başlıklar mobilde */
.lp-content-custom h2 {
flex-wrap: wrap;
gap: 10px;
font-size: 1.2rem;
padding-top: 24px;
line-height: 1.3;
}
.lp-content-custom h2::before { font-size: .72rem; padding: 3px 8px; }
.lp-content-custom h3 { font-size: 1.05rem; }
.lp-content-custom ul li,
.lp-content-custom ol li { font-size: .94rem; }
.lp-content-custom ol li { padding-left: 8px; }
.lp-content-custom blockquote { padding: 16px 18px; }
}
@media (max-width: 480px) {
/* üst boşluk header-açıklığını KORUMALI (yoksa badge+eyebrow header'ın altında kalır) */
.lp-hero { padding: calc(var(--header-h) + 72px) 0 14px; }
.lp-title { font-size: 1.55rem; line-height: 1.2; margin-bottom: 14px; }
.lp-lead { font-size: .95rem; line-height: 1.6; margin-bottom: 18px; }
/* meta — mobilde tam-genişlik düzgün satırlar (pill+tek-satır kötü sarıyordu) */
.lp-meta {
flex-direction: column;
align-items: stretch;
gap: 8px;
font-size: .8rem;
padding-top: 14px;
}
.lp-meta-item {
align-items: flex-start;
gap: 9px;
padding: 11px 13px;
border-radius: 12px;
line-height: 1.35;
}
.lp-meta-item i { font-size: .9rem; margin-top: 1px; }
.lp-nav-section { padding: 12px 0 4px; }
.lp-nav { gap: 7px; }
.lp-nav-item { font-size: .76rem; padding: 10px 11px; gap: 8px; }
.lp-nav-item i { width: 27px; height: 27px; font-size: .88rem; }
.lp-section { padding: 30px 0 44px; }
.lp-content { font-size: .95rem; line-height: 1.75; }
.lp-list li { font-size: .9rem; padding: 10px 12px 10px 32px; }
.lp-contact-card { padding: 20px 18px; }
/* Custom content (Summernote) — en küçük ekran */
.lp-content-custom { font-size: .94rem; line-height: 1.75; }
.lp-content-custom h2 { font-size: 1.1rem; padding: 22px 0 0; gap: 8px; }
.lp-content-custom h2::before { font-size: .68rem; padding: 3px 7px; }
.lp-content-custom h3 { font-size: 1rem; }
.lp-content-custom h4 { font-size: .92rem; }
.lp-content-custom blockquote { padding: 14px 16px; font-size: .9rem; }
.lp-content-custom > p:last-child:has(strong:first-child) { padding: 18px 16px; }
/* CTA mobilde sıkışmasın */
}
/* ============================================
CONTACT PAGE (iletisim.php — .cp-*)
============================================ */
.cp-hero { padding: 36px 0 30px; }
.cp-eyebrow {
display: inline-flex;
align-items: center;
gap: 8px;
font-family: 'Urbanist', 'Outfit', sans-serif;
font-size: .78rem;
font-weight: 600;
color: var(--c-accent, #9ca3af);
background: rgba(156, 163, 175, .08);
padding: 7px 14px;
border-radius: 999px;
letter-spacing: .04em;
text-transform: uppercase;
margin-bottom: 22px;
}
.cp-eyebrow-dot {
width: 8px; height: 8px;
background: var(--c-accent, #9ca3af);
border-radius: 50%;
animation: cpPing 1.8s ease-in-out infinite;
}
@keyframes cpPing {
0%, 100% { transform: scale(1); opacity: 1; }
50% { transform: scale(1.4); opacity: .5; }
}
.cp-title {
font-family: 'Urbanist', 'Outfit', sans-serif;
font-size: clamp(2.1rem, 5vw, 3.4rem);
font-weight: 700;
color: var(--c-primary, #0A0E1A);
letter-spacing: -.025em;
line-height: 1.1;
margin: 0 0 20px;
max-width: 820px;
}
.cp-lead {
font-family: 'Urbanist', 'Outfit', sans-serif;
font-size: 1.08rem;
line-height: 1.65;
color: #4b5563;
max-width: 720px;
margin: 0 0 24px;
}
.cp-meta {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 10px;
font-family: 'Urbanist', 'Outfit', sans-serif;
font-size: .88rem;
color: #6b7280;
padding-top: 20px;
border-top: 1px solid #eef0f4;
}
.cp-meta-item { display: inline-flex; align-items: center; gap: 6px; }
.cp-meta-item i { color: var(--c-accent, #9ca3af); font-size: 1rem; }
.cp-meta-sep { color: #d1d5db; }
/* İLETİŞİM — ar-hero (crumb yok, header offset abx-first'te) */
.contact-abx { overflow: visible; }
.contact-abx .abx-first { padding-top: calc(var(--header-h) + clamp(36px, 4vw, 56px)); padding-bottom: clamp(28px, 3.5vw, 44px); }
.contact-abx .ar-hero-intro { margin-bottom: 0; }
.contact-abx .ar-hero-title { overflow-wrap: break-word; }
/* ---- HERO (sol yaslı metin + hızlı kanallar) ---- */
.cp-hero-grid { display: block; }
.cp-hero-text { max-width: 760px; }
@media (max-width: 900px) {
.cp-hero-text { max-width: none; }
}
.cp-meta-center {
justify-content: center;
margin: clamp(26px, 3vw, 38px) auto 0;
padding-top: clamp(20px, 2.4vw, 28px);
max-width: 740px;
border-top: 1px solid var(--c-border);
}
/* Quick channels */
.cp-channels-section { padding: 24px 0 16px; }
.cp-channels {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 16px;
}
.cp-ch {
--ch: var(--c-accent);
position: relative;
display: flex;
flex-direction: column;
gap: 9px;
min-height: 208px;
padding: 28px 28px 22px;
background: #fff;
border: 1px solid #eef0f4;
border-radius: 18px;
text-decoration: none;
transition: transform .3s cubic-bezier(.2,.7,.3,1), box-shadow .3s ease, border-color .3s ease;
overflow: hidden;
}
/* üstte ince renk şeridi — hover'da açılır */
.cp-ch::before {
content: '';
position: absolute;
top: 0; left: 0; right: 0;
height: 3px;
background: var(--ch);
transform: scaleX(0);
transform-origin: left;
transition: transform .35s cubic-bezier(.2,.7,.3,1);
}
.cp-ch:hover {
border-color: color-mix(in srgb, var(--ch) 45%, #eef0f4);
transform: translateY(-4px);
box-shadow: 0 16px 34px rgba(10, 14, 26, .10);
}
.cp-ch:hover::before { transform: scaleX(1); }
/* L-bracket köşe imzası */
.cp-ch-corner {
position: absolute;
top: 16px; right: 16px;
width: 18px; height: 18px;
border-top: 2px solid #e5e7eb;
border-right: 2px solid #e5e7eb;
transition: border-color .3s ease;
pointer-events: none;
}
.cp-ch:hover .cp-ch-corner { border-color: var(--ch); }
.cp-ch-ic {
width: 52px; height: 52px;
background: color-mix(in srgb, var(--ch) 12%, #fff);
color: var(--ch);
border-radius: 14px;
display: flex;
align-items: center;
justify-content: center;
font-size: 1.4rem;
margin-bottom: 6px;
position: relative;
transition: transform .3s cubic-bezier(.2,.7,.3,1);
}
.cp-ch:hover .cp-ch-ic { transform: scale(1.06) rotate(-3deg); }
.cp-ch-lbl {
font-family: 'Urbanist', 'Outfit', sans-serif;
font-size: .74rem;
font-weight: 600;
color: #9ca3af;
letter-spacing: .1em;
text-transform: uppercase;
position: relative;
}
.cp-ch-val {
font-family: 'Urbanist', 'Outfit', sans-serif;
font-size: 1.12rem;
font-weight: 700;
color: var(--c-primary, #0A0E1A);
letter-spacing: -.01em;
position: relative;
}
.cp-ch-go {
margin-top: auto;
padding-top: 16px;
border-top: 1px solid #eef0f4;
display: flex;
align-items: center;
justify-content: space-between;
font-family: 'Urbanist', 'Outfit', sans-serif;
font-size: .86rem;
font-weight: 600;
color: var(--ch);
position: relative;
transition: border-color .3s ease;
}
.cp-ch:hover .cp-ch-go { border-top-color: color-mix(in srgb, var(--ch) 30%, #eef0f4); }
.cp-ch-go i { transition: transform .25s ease; }
.cp-ch:hover .cp-ch-go i { transform: translateX(4px); }
/* kanal-bazlı aksan */
.cp-ch-tel { --ch: #1FA7E8; }
.cp-ch-mail { --ch: #6366F1; }
.cp-ch-wa { --ch: #25D366; }
/* premium beyaz: Ara/E-posta nötr mürekkep ikon, tek yeşil aksan WhatsApp */
.cp-card-info .cp-ch-tel,
.cp-card-info .cp-ch-mail { --ch: var(--c-primary); }
.cp-card-info .cp-ch-tel .cp-chl-ic,
.cp-card-info .cp-ch-mail .cp-chl-ic {
background: #f3f5f9;
color: var(--c-primary);
box-shadow: none;
}
.cp-card-info .cp-ch-tel:hover .cp-chl-ic,
.cp-card-info .cp-ch-mail:hover .cp-chl-ic {
background: var(--c-primary);
color: #fff;
}
/* ============================================================
İLETİŞİM — TEK BÜYÜK KART (sol kanallar/bilgi · sağ form)
============================================================ */
.cp-card {
position: relative;
display: grid;
grid-template-columns: 0.92fr 1.08fr;
background: #fff;
border: 1px solid var(--c-border);
border-radius: 28px;
overflow: hidden;
box-shadow: 0 34px 80px -32px rgba(10,14,26,.26), 0 8px 24px rgba(10,14,26,.05);
}
/* kart L-bracket köşe imzası */
.cp-card-corner {
position: absolute;
top: 20px; right: 20px;
width: 26px; height: 26px;
border-top: 2px solid color-mix(in srgb, var(--c-accent) 38%, transparent);
border-right: 2px solid color-mix(in srgb, var(--c-accent) 38%, transparent);
z-index: 3;
pointer-events: none;
}
/* SOL PANE — premium beyaz bilgi paneli (hava + tipografi) */
.cp-card-info {
position: relative;
display: flex;
flex-direction: column;
padding: clamp(34px, 3.4vw, 56px);
background: #fff;
border-right: 1px solid var(--c-border);
}
/* kanal satırları (kart içi) */
.cp-ch-list {
display: flex;
flex-direction: column;
gap: 10px;
margin: 22px 0 4px;
}
.cp-chl {
--ch: var(--c-accent);
display: flex;
align-items: center;
gap: 14px;
padding: 13px 15px;
background: #fff;
border: 1px solid var(--c-border);
border-radius: 14px;
text-decoration: none;
transition: transform .25s cubic-bezier(.2,.7,.3,1), box-shadow .25s ease, border-color .25s ease;
}
.cp-chl::before {
content: "";
position: absolute;
left: 0; top: 12px; bottom: 12px;
width: 3px;
border-radius: 0 3px 3px 0;
background: var(--ch);
opacity: 0;
transition: opacity .25s ease;
}
.cp-chl { position: relative; overflow: hidden; }
.cp-chl:hover {
border-color: color-mix(in srgb, var(--ch) 55%, var(--c-border));
transform: translateY(-3px);
box-shadow: 0 18px 34px -18px color-mix(in srgb, var(--ch) 48%, transparent), 0 4px 10px rgba(10,14,26,.05);
}
.cp-chl:hover::before { opacity: 1; }
.cp-chl-ic {
position: relative;
flex-shrink: 0;
width: 46px; height: 46px;
display: flex; align-items: center; justify-content: center;
background: var(--ch);
color: #fff;
border-radius: 13px;
font-size: 1.3rem;
box-shadow: 0 8px 18px -7px color-mix(in srgb, var(--ch) 65%, transparent);
transition: transform .25s cubic-bezier(.2,.7,.3,1);
}
.cp-chl:hover .cp-chl-ic { transform: scale(1.08) rotate(-4deg); }
/* WhatsApp — öne çıkan "canlı" kanal */
.cp-ch-wa {
background: linear-gradient(120deg, color-mix(in srgb, #25D366 9%, #fff), #fff 70%);
border-color: color-mix(in srgb, #25D366 32%, var(--c-border));
}
.cp-ch-wa .cp-chl-ic::after {
content: "";
position: absolute;
top: -2px; right: -2px;
width: 11px; height: 11px;
border-radius: 50%;
background: #25D366;
border: 2px solid #fff;
box-shadow: 0 0 0 0 color-mix(in srgb, #25D366 70%, transparent);
animation: cp-wa-ping 1.8s ease-out infinite;
}
@keyframes cp-wa-ping {
0% { box-shadow: 0 0 0 0 color-mix(in srgb, #25D366 65%, transparent); }
70% { box-shadow: 0 0 0 7px transparent; }
100% { box-shadow: 0 0 0 0 transparent; }
}
@media (prefers-reduced-motion: reduce) { .cp-ch-wa .cp-chl-ic::after { animation: none; } }
.cp-chl-tx { display: flex; flex-direction: column; gap: 1px; min-width: 0; flex: 1; }
.cp-chl-lbl {
font-family: 'Urbanist', 'Outfit', sans-serif;
font-size: .68rem;
font-weight: 600;
color: #9ca3af;
letter-spacing: .1em;
text-transform: uppercase;
}
.cp-chl-val {
font-family: 'Urbanist', 'Outfit', sans-serif;
font-size: 1rem;
font-weight: 700;
color: var(--c-primary);
letter-spacing: -.01em;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.cp-chl-arrow {
flex-shrink: 0;
color: var(--ch);
font-size: .95rem;
transition: transform .25s ease;
}
.cp-chl:hover .cp-chl-arrow { transform: translateX(4px); }
/* SAĞ PANE: form-wrap'i kart paneline çevir */
.cp-card .cp-form-wrap {
border: 0;
border-radius: 0;
overflow: visible;
padding: clamp(30px, 3vw, 48px);
}
.cp-card .cp-form-wrap::before { display: none; }
/* SOL pane içeriği — dikey dengeyi koru */
.cp-card-info .cp-info-divider { margin: 28px 0; }
/* premium: eyebrow nötr ince çip, büyük başlık, ferah lead */
.cp-card-info .cp-info-eyebrow {
background: transparent;
color: #9aa3b2;
padding: 0;
border-radius: 0;
letter-spacing: .14em;
margin-bottom: 14px;
}
.cp-card-info .cp-info-title {
font-size: clamp(1.6rem, 2.8vw, 2.15rem);
line-height: 1.18;
margin-bottom: 16px;
}
.cp-card-info .cp-info-lead { font-size: 1rem; line-height: 1.7; margin-bottom: 30px; }
.cp-card-info .cp-info-social { margin-top: auto; }
/* adres + çalışma saatleri — ikon-çipli düzgün satırlar */
.cp-card-info .cp-info-row {
display: flex;
flex-direction: column;
gap: 14px;
}
.cp-card-info .cp-info-block {
display: flex;
flex-direction: row;
align-items: center;
gap: 13px;
padding: 13px 15px;
background: #fff;
border: 1px solid var(--c-border);
border-radius: 14px;
}
.cp-info-chip {
flex-shrink: 0;
width: 40px; height: 40px;
display: flex; align-items: center; justify-content: center;
background: color-mix(in srgb, var(--c-accent) 10%, #fff);
color: var(--c-accent);
border-radius: 11px;
font-size: 1.05rem;
}
.cp-info-bx { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.cp-card-info .cp-info-lbl { font-size: .68rem; }
.cp-card-info .cp-info-val { line-height: 1.45; }
/* İletişim — "Nasıl çalışır" 3 adımlık süreç şeridi (hero altı) */
.cp-process {
margin-top: clamp(34px, 4vw, 56px);
display: grid;
grid-template-columns: 1fr clamp(20px, 4vw, 60px) 1fr clamp(20px, 4vw, 60px) 1fr;
align-items: start;
}
.cp-step {
padding: 26px 24px 24px;
background: #fff;
border: 1px solid var(--c-border);
border-radius: 18px;
box-shadow: 0 18px 40px -28px rgba(10,14,26,.18);
opacity: 0; transform: translateY(18px);
transition: opacity .6s ease var(--d, 0ms), transform .6s cubic-bezier(.2,.7,.3,1) var(--d, 0ms), box-shadow .3s ease, border-color .3s ease;
}
.cp-step:hover {
border-color: color-mix(in srgb, var(--c-accent) 38%, var(--c-border));
box-shadow: 0 24px 48px -24px rgba(10,14,26,.24);
}
[data-anim].visible.cp-process .cp-step { opacity: 1; transform: none; }
.cp-step-top { display: flex; align-items: center; gap: 13px; margin-bottom: 15px; }
.cp-step-num {
font-family: 'Urbanist', 'Outfit', sans-serif;
font-size: clamp(2.3rem, 3.6vw, 3.1rem);
font-weight: 800; line-height: 1; letter-spacing: -.05em;
color: rgba(10,14,26,.13);
}
.cp-step-ic {
width: 46px; height: 46px; flex-shrink: 0;
display: grid; place-items: center;
border-radius: 13px;
background: color-mix(in srgb, var(--c-accent) 12%, #fff);
color: var(--c-accent);
font-size: 1.3rem;
}
.cp-step-h {
font-family: 'Urbanist', 'Outfit', sans-serif;
font-size: 1.1rem; font-weight: 700; letter-spacing: -.01em;
color: var(--c-primary); margin: 0 0 6px;
}
.cp-step-p { font-size: .94rem; line-height: 1.55; color: var(--c-muted); margin: 0; max-width: 30ch; }
.cp-step-link {
align-self: start; width: 100%; height: 2px; margin-top: 49px;
background-image: linear-gradient(90deg, color-mix(in srgb, var(--c-accent) 45%, transparent) 50%, transparent 50%);
background-size: 9px 2px; background-repeat: repeat-x;
}
@media (max-width: 760px) {
.cp-process { grid-template-columns: 1fr; gap: 24px; }
.cp-step-link { display: none; }
}
@media (max-width: 860px) {
.cp-card { grid-template-columns: 1fr; }
.cp-card-info { border-right: 0; border-bottom: 1px solid var(--c-border); }
}
/* Form section */
.cp-form-section { padding: 50px 0 70px; }
.cp-grid {
display: grid;
grid-template-columns: 1fr 1.2fr;
gap: 40px;
align-items: stretch;
}
/* Info panel (light) */
.cp-info {
background: linear-gradient(160deg, #fbfdff 0%, var(--c-bg-soft) 100%);
border: 1px solid var(--c-border);
border-radius: 22px;
padding: 44px 38px;
color: var(--c-primary, #0A0E1A);
position: relative;
overflow: hidden;
}
/* L-bracket köşe imzası (blob yerine — dekor formülü) */
.cp-info::before {
content: '';
position: absolute;
top: 22px; right: 22px;
width: 30px; height: 30px;
border-top: 2px solid color-mix(in srgb, var(--c-accent) 45%, transparent);
border-right: 2px solid color-mix(in srgb, var(--c-accent) 45%, transparent);
pointer-events: none;
}
.cp-info-eyebrow {
display: inline-block;
font-family: 'Urbanist', 'Outfit', sans-serif;
font-size: .76rem;
font-weight: 600;
color: var(--c-accent, #9ca3af);
background: rgba(156, 163, 175, .12);
padding: 6px 12px;
border-radius: 999px;
letter-spacing: .08em;
text-transform: uppercase;
margin-bottom: 18px;
position: relative;
}
.cp-info-title {
font-family: 'Urbanist', 'Outfit', sans-serif;
font-size: clamp(1.4rem, 2.4vw, 1.8rem);
font-weight: 700;
line-height: 1.25;
color: var(--c-primary, #0A0E1A);
margin: 0 0 14px;
letter-spacing: -.01em;
position: relative;
}
.cp-info-title .highlight {
color: var(--c-primary, #0A0E1A);
background-image: linear-gradient(transparent 82%, rgba(255, 210, 63, .6) 82%);
background-repeat: no-repeat;
background-size: 100% 100%;
}
.cp-info-lead {
font-family: 'Urbanist', 'Outfit', sans-serif;
font-size: .96rem;
line-height: 1.65;
color: #4b5563;
margin: 0 0 28px;
position: relative;
}
.cp-info-list {
display: flex;
flex-direction: column;
gap: 16px;
position: relative;
}
.cp-info-item {
display: flex;
align-items: flex-start;
gap: 12px;
}
.cp-info-ic {
color: var(--c-accent, #9ca3af);
font-size: 1.4rem;
line-height: 1;
flex-shrink: 0;
margin-top: 2px;
}
.cp-info-item strong {
display: block;
font-family: 'Urbanist', 'Outfit', sans-serif;
font-size: .98rem;
font-weight: 600;
color: var(--c-primary, #0A0E1A);
margin-bottom: 2px;
}
.cp-info-item span {
display: block;
font-family: 'Urbanist', 'Outfit', sans-serif;
font-size: .87rem;
line-height: 1.55;
color: #6b7280;
}
.cp-info-divider {
height: 1px;
background: var(--c-border);
margin: 28px 0;
position: relative;
}
.cp-info-row {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 20px;
position: relative;
}
.cp-info-block { display: flex; flex-direction: column; gap: 6px; }
.cp-info-lbl {
display: inline-flex;
align-items: center;
gap: 6px;
font-family: 'Urbanist', 'Outfit', sans-serif;
font-size: .72rem;
font-weight: 600;
color: #9ca3af;
letter-spacing: .08em;
text-transform: uppercase;
}
.cp-info-lbl i { color: var(--c-accent, #9ca3af); font-size: .9rem; }
.cp-info-val {
font-family: 'Urbanist', 'Outfit', sans-serif;
font-size: .92rem;
font-weight: 600;
color: var(--c-primary, #0A0E1A);
line-height: 1.5;
}
.cp-info-social {
margin-top: 26px;
padding-top: 22px;
border-top: 1px solid var(--c-border);
position: relative;
}
.cp-info-social-lbl {
display: block;
font-family: 'Urbanist', 'Outfit', sans-serif;
font-size: .72rem;
font-weight: 600;
color: #9ca3af;
letter-spacing: .08em;
text-transform: uppercase;
margin-bottom: 12px;
}
.cp-social-icons {
display: flex;
gap: 8px;
flex-wrap: wrap;
}
.cp-social-icons a {
width: 38px; height: 38px;
display: flex;
align-items: center;
justify-content: center;
background: #fff;
border: 1px solid #e5e7eb;
border-radius: 10px;
color: var(--c-primary, #0A0E1A);
font-size: 1rem;
text-decoration: none;
transition: all .25s ease;
}
.cp-social-icons a:hover {
background: var(--c-accent, #9ca3af);
border-color: var(--c-accent, #9ca3af);
color: #fff;
transform: translateY(-2px);
box-shadow: 0 8px 18px color-mix(in srgb, var(--c-accent) 30%, transparent);
}
/* Form */
.cp-form-wrap {
position: relative;
background: #fff;
border: 1px solid #eef0f4;
border-radius: 22px;
padding: 40px 38px;
overflow: hidden;
}
/* L-bracket köşe imzası */
.cp-form-wrap::before {
content: '';
position: absolute;
top: 22px; right: 22px;
width: 30px; height: 30px;
border-top: 2px solid color-mix(in srgb, var(--c-accent) 38%, transparent);
border-right: 2px solid color-mix(in srgb, var(--c-accent) 38%, transparent);
pointer-events: none;
}
.cp-form-head { margin-bottom: 24px; }
.cp-form-eyebrow {
display: inline-flex;
align-items: center;
gap: 6px;
font-family: 'Urbanist', 'Outfit', sans-serif;
font-size: .78rem;
font-weight: 600;
color: var(--c-accent, #9ca3af);
background: rgba(156, 163, 175, .08);
padding: 6px 12px;
border-radius: 999px;
letter-spacing: .04em;
text-transform: uppercase;
margin-bottom: 14px;
}
.cp-form-title {
font-family: 'Urbanist', 'Outfit', sans-serif;
font-size: 1.5rem;
font-weight: 700;
color: var(--c-primary, #0A0E1A);
margin: 0 0 6px;
letter-spacing: -.01em;
}
.cp-form-lead {
font-family: 'Urbanist', 'Outfit', sans-serif;
font-size: .94rem;
color: #6b7280;
margin: 0;
}
.cp-alert {
display: flex;
align-items: flex-start;
gap: 12px;
padding: 14px 16px;
border-radius: 12px;
margin-bottom: 16px;
font-family: 'Urbanist', 'Outfit', sans-serif;
font-size: .92rem;
}
.cp-alert[hidden] { display: none !important; }
.cp-alert i { font-size: 1.2rem; line-height: 1.4; flex-shrink: 0; }
.cp-alert-success {
background: rgba(156, 163, 175, .08);
border: 1px solid rgba(156, 163, 175, .25);
color: #047a4a;
}
.cp-alert-success i { color: var(--c-accent, #9ca3af); }
.cp-alert-success strong { display: block; color: #034e30; font-family: 'Urbanist', 'Outfit', sans-serif; }
.cp-alert-success span { display: block; font-size: .88rem; color: #4b6e5d; }
.cp-alert-danger {
background: linear-gradient(135deg, #fff5f5 0%, #fef2f2 100%);
border: 1px solid #fecaca;
border-left: 3px solid #ef4444;
color: #b91c1c;
animation: qmErrIn .25s ease both;
}
.cp-alert-danger i,
.cp-alert-danger .cp-alert-ic { color: #ef4444; font-size: 1.05rem; }
.cp-alert-danger .cp-alert-text { color: #b91c1c; font-weight: 500; }
/* Inline success card after AJAX submit */
.cp-success-card {
text-align: center;
padding: 40px 28px 32px;
background: linear-gradient(135deg, rgba(156, 163, 175, .08) 0%, rgba(156, 163, 175, .02) 100%);
border: 1px solid rgba(156, 163, 175, .25);
border-radius: 16px;
animation: qmErrIn .3s ease both;
}
.cp-success-card[hidden] { display: none !important; }
.cp-success-ic {
display: inline-flex;
width: 64px; height: 64px;
border-radius: 50%;
background: rgba(156, 163, 175, .15);
color: var(--c-accent, #9ca3af);
align-items: center;
justify-content: center;
font-size: 1.8rem;
margin-bottom: 16px;
}
.cp-success-card h4 {
font-family: 'Urbanist', 'Outfit', sans-serif;
font-size: 1.25rem;
font-weight: 700;
color: var(--c-primary, #0A0E1A);
letter-spacing: -.015em;
margin: 0 0 8px;
}
.cp-success-card p {
font-family: 'Urbanist', 'Outfit', sans-serif;
font-size: .95rem;
color: #4b5563;
line-height: 1.65;
margin: 0 0 22px;
max-width: 420px;
margin-inline: auto;
}
.cp-success-btn {
display: inline-flex;
align-items: center;
gap: 8px;
background: var(--c-primary, #0A0E1A);
color: #fff;
border: 0;
border-radius: 999px;
padding: 12px 22px;
font-family: 'Urbanist', 'Outfit', sans-serif;
font-weight: 600;
font-size: .92rem;
cursor: pointer;
transition: all .2s ease;
}
.cp-success-btn:hover {
background: var(--c-accent, #9ca3af);
transform: translateY(-2px);
box-shadow: 0 12px 28px rgba(156, 163, 175, .28);
}
.cp-form { display: flex; flex-direction: column; gap: 14px; }
.cp-row {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 14px;
}
.cp-field { display: flex; flex-direction: column; gap: 6px; }
.cp-fl {
font-family: 'Urbanist', 'Outfit', sans-serif;
font-size: .82rem;
font-weight: 600;
color: var(--c-primary, #0A0E1A);
letter-spacing: .01em;
}
/* ikon-önekli input sarmalayıcı */
.cp-iw { position: relative; display: block; }
.cp-fic {
position: absolute; left: 15px; top: 50%; transform: translateY(-50%);
color: #9ca3af; font-size: 1.05rem; pointer-events: none;
transition: color .2s ease, transform .2s ease;
}
.cp-iw--area .cp-fic { top: 16px; transform: none; }
.cp-field input,
.cp-field textarea {
font-family: 'Urbanist', 'Outfit', sans-serif;
font-size: .95rem;
padding: 14px 14px 14px 42px;
border: 1.5px solid #e3e7ee;
border-radius: 13px;
background: #f7f9fc;
color: var(--c-primary, #0A0E1A);
transition: border-color .2s ease, background .2s ease, box-shadow .2s ease;
outline: none;
width: 100%;
resize: vertical;
}
.cp-field input:hover,
.cp-field textarea:hover { border-color: #cfd6e2; }
.cp-field input::placeholder,
.cp-field textarea::placeholder { color: #9ca3af; }
.cp-field input:focus,
.cp-field textarea:focus {
border-color: var(--c-accent);
background: #fff;
box-shadow: 0 0 0 4px color-mix(in srgb, var(--c-accent) 14%, transparent);
}
/* focus'ta ikon + etiket aksan rengine döner */
.cp-field:focus-within .cp-fic { color: var(--c-accent); }
.cp-field:focus-within .cp-fl { color: var(--c-accent); }
.cp-field.is-invalid .cp-fic { color: #dc2626; }
.cp-kvkk {
display: flex;
align-items: flex-start;
gap: 10px;
margin: 6px 0;
font-family: 'Urbanist', 'Outfit', sans-serif;
font-size: .88rem;
color: #4b5563;
cursor: pointer;
}
.cp-kvkk input {
width: 16px; height: 16px;
margin-top: 2px;
accent-color: var(--c-accent, #9ca3af);
flex-shrink: 0;
}
.cp-kvkk a {
color: var(--c-primary, #0A0E1A);
text-decoration: underline;
text-underline-offset: 2px;
text-decoration-color: var(--c-accent, #9ca3af);
}
.cp-submit {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
width: 100%;
padding: 15px 28px;
background: var(--c-primary, #0A0E1A);
color: #fff;
border: none;
border-radius: 999px;
font-family: 'Urbanist', 'Outfit', sans-serif;
font-size: .98rem;
font-weight: 600;
cursor: pointer;
transition: all .25s ease;
margin-top: 6px;
}
.cp-submit:hover {
background: var(--c-accent, #9ca3af);
color: #fff;
transform: translateY(-2px);
box-shadow: 0 14px 32px rgba(156, 163, 175, .28);
}
.cp-submit i { transition: transform .25s ease; }
.cp-submit:hover i { transform: translateX(4px); }
/* ============================================================
İLETİŞİM — SIFIRDAN TASARIM: renkli mavi panel + beyaz form (.ctc)
============================================================ */
.ctc { padding: clamp(40px, 5vw, 72px) 0 clamp(56px, 6vw, 90px); }
.ctc-card {
display: grid;
grid-template-columns: 0.86fr 1.14fr;
border-radius: 30px;
overflow: hidden;
background: #fff;
border: 1px solid var(--c-border);
box-shadow: 0 40px 90px -40px rgba(10,14,26,.34), 0 10px 28px rgba(10,14,26,.05);
}
/* ---- SOL: açık premium bilgi listesi ---- */
/* güzel listeleme — hairline ayrılmış satırlar + renkli ikon çipleri */
/* kanal renkleri (ikon çipleri) */
/* sosyal */
/* ---- SAĞ: beyaz form paneli ---- */
.ctc-form { padding: clamp(34px, 3.4vw, 56px); background: #fff; }
.ctc-form-head { margin-bottom: 26px; }
.ctc-form-eyebrow {
display: inline-flex; align-items: center; gap: 7px;
font-family: 'Urbanist', 'Outfit', sans-serif; font-size: .74rem; font-weight: 700;
letter-spacing: .06em; text-transform: uppercase; color: var(--c-accent);
background: var(--c-accent-soft); padding: 6px 13px; border-radius: 999px; margin-bottom: 14px;
}
.ctc-form-title { font-family: 'Urbanist', 'Outfit', sans-serif; font-size: clamp(1.4rem, 2.2vw, 1.75rem); font-weight: 800; letter-spacing: -.02em; color: var(--c-primary); margin: 0 0 7px; }
.ctc-form-lead { font-family: 'Urbanist', 'Outfit', sans-serif; font-size: .96rem; color: var(--c-muted); margin: 0; }
/* form alanları — taze görünüm (cp-* yapısı/JS korunur) */
.ctc-form .cp-form { gap: 16px; }
.ctc-form .cp-fl { font-size: .8rem; color: #374151; }
.ctc-form .cp-field input,
.ctc-form .cp-field textarea { border: 1.5px solid #e3e7ee; border-radius: 13px; background: #f7f9fc; padding: 14px 14px 14px 44px; }
.ctc-form .cp-field input:focus,
.ctc-form .cp-field textarea:focus { border-color: var(--c-accent); background: #fff; box-shadow: 0 0 0 4px color-mix(in srgb, var(--c-accent) 14%, transparent); }
/* gönder — mavi gradient pill */
.ctc-form .cp-submit { background: linear-gradient(135deg, #2bb6f2, var(--c-accent) 55%, #0f86c6); box-shadow: none; margin-top: 4px; }
.ctc-form .cp-submit:hover { background: linear-gradient(135deg, #34bdf6, #1a9ee0 55%, #0c7bb8); transform: translateY(-2px); box-shadow: none; }
@media (max-width: 880px) {
.ctc-card { grid-template-columns: 1fr; }
}
/* ===== İletişim — referans 2-kolon (sol ikna metni · sağ form kartı) ===== */
.ctc2 { padding-top: clamp(72px, 9vw, 130px); }
/* mobilde hero üst boşluğu (dijital-pazarlama hero'su ile aynı nefes payı) */
@media (max-width: 600px) {
.ctc2 { padding-top: calc(var(--header-h) + 76px); }
}
.ctc2 .ctc-card.ctc2-grid {
grid-template-columns: 1fr 1.02fr;
gap: clamp(30px, 4.5vw, 72px);
background: transparent;
border: 0;
border-radius: 0;
overflow: visible;
box-shadow: none;
align-items: center;
}
.ctc2-left { padding: clamp(2px, 1vw, 10px) 0; }
.ctc2-left .ar-hero-meta { margin-bottom: 16px; }
.ctc2-title {
font-family: 'Urbanist', 'Outfit', sans-serif; font-weight: 800;
font-size: clamp(1.95rem, 3.5vw, 2.75rem); line-height: 1.12; letter-spacing: -.025em;
color: var(--c-primary); margin: 0 0 16px;
}
.ctc2-title .highlight {
color: var(--c-primary);
background-image: linear-gradient(transparent 76%, rgba(31,167,232,.42) 76%);
background-repeat: no-repeat; background-size: 100% 100%;
}
.ctc2-lead { font-size: 1.02rem; line-height: 1.7; color: var(--c-muted); margin: 0 0 13px; max-width: 44ch; }
.ctc2-checks { list-style: none; margin: 24px 0 0; padding: 0; display: flex; flex-direction: column; gap: 13px; }
.ctc2-checks li { display: flex; align-items: center; gap: 12px; font-size: 1rem; font-weight: 600; color: var(--c-primary); }
.ctc2-checks i { color: var(--c-accent); font-size: 1.18rem; flex-shrink: 0; }
.ctc2-note { font-size: .95rem; line-height: 1.65; color: var(--c-muted); margin: 20px 0 0; max-width: 48ch; }
.ctc2-rule { border: 0; border-top: 1px solid var(--c-border); margin: 28px 0; }
.ctc2-stats-title {
font-family: 'Urbanist', 'Outfit', sans-serif; font-weight: 800;
font-size: clamp(1.3rem, 2vw, 1.6rem); letter-spacing: -.02em; color: var(--c-primary); margin: 0 0 22px;
}
.ctc2-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 26px 34px; }
.ctc2-stat { display: flex; flex-direction: column; gap: 5px; }
.ctc2-stat-num {
font-family: 'Urbanist', 'Outfit', sans-serif; font-weight: 800;
font-size: clamp(2.1rem, 3.6vw, 2.75rem); line-height: 1; letter-spacing: -.03em; color: var(--c-accent);
}
.ctc2-stat-lbl { font-size: .9rem; line-height: 1.45; color: var(--c-muted); }
.ctc2-channels { display: flex; flex-wrap: wrap; gap: 11px 24px; margin-top: 30px; }
.ctc2-chan { display: inline-flex; align-items: center; gap: 8px; font-size: .92rem; font-weight: 600; color: var(--c-primary); transition: color .2s ease; }
.ctc2-chan i { color: var(--c-accent); font-size: 1rem; }
.ctc2-chan:hover { color: var(--c-accent); }
/* sağ: form kendi beyaz kartı */
.ctc2 .ctc-form {
background: #fff;
border: 1px solid var(--c-border);
border-radius: 26px;
box-shadow: 0 40px 90px -45px rgba(10,14,26,.32), 0 10px 28px rgba(10,14,26,.05);
}
.ctc2 .ctc-form-head { text-align: center; }
.ctc2 .ctc-form-eyebrow { margin-left: auto; margin-right: auto; }
/* --- İletişim formu: rafine uyarılar (yumuşak çip + marka pembesi) --- */
.ctc2 .cp-field.is-invalid input,
.ctc2 .cp-field.is-invalid textarea {
border-color: #f4869a;
background: #fff;
box-shadow: 0 0 0 4px rgba(239,74,91,.10);
}
.ctc2 .cp-field.is-invalid .cp-fl,
.ctc2 .cp-field.is-invalid .cp-fic { color: #e23b56; }
/* Stripe tarzı: hata etiketin sağında, aynı satırda — şık, yer kaplamaz, üstüne binmez */
.ctc2 .cp-field { position: relative; }
.ctc2 .cp-field > .cp-err {
position: absolute;
top: 1px;
right: 1px;
margin: 0;
padding: 0;
gap: 5px;
background: none;
border: 0;
border-radius: 0;
font-size: .74rem;
font-weight: 600;
letter-spacing: .01em;
color: #e23b56;
line-height: 1.25;
}
.ctc2 .cp-field > .cp-err::before { background-color: #e23b56; width: 12px; height: 12px; }
.ctc2 .cp-field > .cp-err:not([hidden]) { animation: cpErrSlide .3s cubic-bezier(.34,1.4,.5,1) both; }
@keyframes cpErrSlide { from { opacity: 0; transform: translateX(7px); } to { opacity: 1; transform: none; } }
/* KVKK alan-tipi değil — küçük satır olarak checkbox altında kalır */
.ctc2 .cp-err-kvkk {
position: static;
margin-top: -8px;
padding: 0;
gap: 6px;
background: none;
border: 0;
font-size: .76rem;
font-weight: 600;
color: #e23b56;
}
.ctc2 .cp-err-kvkk::before { background-color: #e23b56; width: 12px; height: 12px; }
/* --- İletişim başarı kartı: bağlantılı timeline + rafine kart + mavi buton --- */
.ctc2 .cp-success-wrap .qm-success-art::after {
content: '';
position: absolute;
inset: -14px;
border-radius: 50%;
background: radial-gradient(circle, color-mix(in srgb, var(--c-accent) 16%, transparent) 0%, transparent 68%);
z-index: -1;
}
.ctc2 .cp-success-wrap .qm-success-steps {
background: #fff;
border: 1px solid var(--c-border);
border-radius: 18px;
box-shadow: 0 20px 46px -30px rgba(10,14,26,.28);
padding: 22px 24px;
gap: 0;
max-width: 440px;
}
.ctc2 .cp-success-wrap .qm-success-steps li {
position: relative;
align-items: flex-start;
gap: 14px;
padding-bottom: 20px;
}
.ctc2 .cp-success-wrap .qm-success-steps li:last-child { padding-bottom: 0; }
/* dikey bağlantı çizgisi (ikon merkezinden bir sonrakine) */
.ctc2 .cp-success-wrap .qm-success-steps li:not(:last-child)::before {
content: '';
position: absolute;
left: 16px;
top: 38px;
bottom: 2px;
width: 2px;
background: linear-gradient(180deg, color-mix(in srgb, var(--c-accent) 45%, transparent), rgba(10,14,26,.07));
border-radius: 2px;
}
.ctc2 .cp-success-wrap .qm-step-ic {
position: relative;
z-index: 1;
width: 34px;
height: 34px;
margin-top: 0;
font-size: 1rem;
box-shadow: 0 6px 14px -6px color-mix(in srgb, var(--c-accent) 60%, transparent);
}
.ctc2 .cp-success-wrap .qm-step-ic-soft {
background: #eef2f7;
color: #8a93a3;
box-shadow: none;
}
.ctc2 .cp-success-wrap .qm-step-tx { padding-top: 5px; }
.ctc2 .cp-success-wrap .qm-step-tx strong { font-size: .96rem; }
/* yeni mesaj — marka mavisi pill */
.ctc2 .cp-success-wrap .qm-success-btn {
background: linear-gradient(135deg, #2bb6f2, var(--c-accent) 55%, #0f86c6);
box-shadow: 0 14px 30px -12px color-mix(in srgb, var(--c-accent) 65%, transparent);
padding: 13px 30px;
}
.ctc2 .cp-success-wrap .qm-success-btn:hover {
background: linear-gradient(135deg, #34bdf6, #1a9ee0 55%, #0c7bb8);
transform: translateY(-2px);
box-shadow: 0 20px 40px -12px color-mix(in srgb, var(--c-accent) 78%, transparent);
}
.ctc2 .cp-kvkk.is-invalid input {
outline-color: rgba(239,74,91,.30);
accent-color: #e23b56;
}
.ctc2 .cp-alert-danger {
background: #fff5f6;
border: 1px solid #fbd3da;
border-left: 3px solid #e23b56;
border-radius: 14px;
color: #c01f38;
}
.ctc2 .cp-alert-danger i,
.ctc2 .cp-alert-danger .cp-alert-ic { color: #e23b56; }
.ctc2 .cp-alert-danger .cp-alert-text { color: #c01f38; font-weight: 600; }
@media (max-width: 880px) {
.ctc2 .ctc-card.ctc2-grid { grid-template-columns: 1fr; gap: 36px; }
.ctc2-stats { gap: 22px 28px; }
}
@media (max-width: 600px) {
/* iletişim kanalları — mobilde çıplak metin yerine tam-genişlik buton-çipler */
.ctc2-channels {
flex-direction: column;
align-items: stretch;
gap: 9px;
margin-top: 22px;
}
/* daha belirgin: güçlü kenar + gölge + kalın metin + renkli ikon çipi */
.ctc2-chan {
gap: 13px;
padding: 15px 16px;
background: #fff;
border: 1px solid rgba(10,14,26,.10);
border-radius: 14px;
box-shadow: 0 6px 18px rgba(10,14,26,.07);
font-size: 1rem;
font-weight: 700;
color: var(--c-primary);
}
.ctc2-chan i {
display: inline-grid;
place-items: center;
width: 36px;
height: 36px;
border-radius: 11px;
background: color-mix(in srgb, var(--c-accent) 13%, #fff);
color: var(--c-accent);
font-size: 1.1rem;
flex-shrink: 0;
}
.ctc2-chan:active { border-color: var(--c-accent); box-shadow: 0 2px 8px rgba(10,14,26,.10); }
}
/* Map */
.cp-map-section { padding: 0 0 90px; }
.cp-map-wrap {
position: relative;
border-radius: 22px;
overflow: hidden;
border: 1px solid #eef0f4;
box-shadow: 0 18px 40px rgba(10, 14, 26, .06);
}
.cp-map-overlay {
position: absolute;
top: 30px; left: 30px;
background: #fff;
border-radius: 16px;
padding: 26px 28px;
max-width: 320px;
z-index: 2;
box-shadow: 0 12px 32px rgba(10, 14, 26, .12);
}
.cp-map-eyebrow {
display: inline-flex;
align-items: center;
gap: 6px;
font-family: 'Urbanist', 'Outfit', sans-serif;
font-size: .76rem;
font-weight: 600;
color: var(--c-accent, #9ca3af);
background: rgba(156, 163, 175, .1);
padding: 5px 12px;
border-radius: 999px;
letter-spacing: .04em;
text-transform: uppercase;
margin-bottom: 12px;
}
.cp-map-title {
font-family: 'Urbanist', 'Outfit', sans-serif;
font-size: 1.25rem;
font-weight: 700;
color: var(--c-primary, #0A0E1A);
margin: 0 0 6px;
}
.cp-map-addr {
font-family: 'Urbanist', 'Outfit', sans-serif;
font-size: .92rem;
color: #4b5563;
margin: 0 0 16px;
line-height: 1.5;
}
.cp-map-btn {
display: inline-flex;
align-items: center;
gap: 7px;
font-family: 'Urbanist', 'Outfit', sans-serif;
font-size: .9rem;
font-weight: 600;
color: #fff;
background: var(--c-accent);
padding: 11px 20px;
border-radius: 999px;
text-decoration: none;
transition: background .25s ease, transform .25s ease, box-shadow .25s ease, gap .25s ease;
}
.cp-map-btn:hover {
background: var(--c-accent-2);
color: #fff;
transform: translateY(-2px);
gap: 10px;
box-shadow: 0 10px 24px color-mix(in srgb, var(--c-accent) 32%, transparent);
}
.cp-map-btn i { transition: transform .25s ease; }
.cp-map-btn:hover i { transform: translate(2px, -2px); }
/* L-bracket crop mark imzası — dekor formülü */
.cp-map-crop {
position: absolute;
width: 26px; height: 26px;
z-index: 3;
pointer-events: none;
filter: drop-shadow(0 1px 2px rgba(10, 14, 26, .25));
}
.cp-map-crop-tr {
top: 20px; right: 20px;
border-top: 2px solid #fff;
border-right: 2px solid #fff;
}
.cp-map-crop-bl {
left: 20px; bottom: 20px;
border-bottom: 2px solid #fff;
border-left: 2px solid #fff;
}
.cp-map { line-height: 0; }
.cp-map iframe { display: block; width: 100%; min-height: 520px; }
@media (max-width: 720px) {
.cp-map iframe { min-height: 420px; }
.cp-map-overlay { top: 16px; left: 16px; right: 16px; max-width: none; padding: 20px 22px; }
}
/* Responsive */
@media (max-width: 960px) {
.cp-channels { grid-template-columns: 1fr; gap: 12px; }
.cp-grid { grid-template-columns: 1fr; gap: 24px; }
.cp-info { padding: 36px 30px; }
.cp-form-wrap { padding: 32px 28px; }
}
@media (max-width: 720px) {
.cp-row { grid-template-columns: 1fr; }
.cp-info-row { grid-template-columns: 1fr; gap: 16px; }
.cp-meta { font-size: .8rem; }
.cp-meta-sep { display: none; }
}
@media (max-width: 480px) {
.cp-hero { padding: 26px 0 20px; }
.cp-form-section { padding: 36px 0 50px; }
.cp-info { padding: 30px 22px; border-radius: 16px; }
.cp-form-wrap { padding: 26px 20px; border-radius: 16px; }
.cp-ch { padding: 22px 20px; }
.cp-form-title { font-size: 1.25rem; }
}
/* ============================================
ABOUT PAGE (hakkimizda.php — .ap-*)
============================================ */
.ap-hero { padding: 30px 0 50px; }
.ap-eyebrow {
display: inline-flex;
align-items: center;
gap: 10px;
font-family: 'Urbanist', 'Outfit', sans-serif;
font-size: .78rem;
font-weight: 600;
color: var(--c-accent, #9ca3af);
letter-spacing: .08em;
text-transform: uppercase;
margin-bottom: 18px;
}
.ap-eye-line {
width: 28px;
height: 1.5px;
background: var(--c-accent, #9ca3af);
display: inline-block;
}
.ap-title {
font-family: 'Urbanist', 'Outfit', sans-serif;
font-size: clamp(2.1rem, 5vw, 3.4rem);
font-weight: 700;
color: var(--c-primary, #0A0E1A);
letter-spacing: -.025em;
line-height: 1.1;
margin: 0 0 18px;
max-width: 880px;
}
.ap-title .highlight {
color: var(--c-primary, #0A0E1A);
background-image: linear-gradient(transparent 78%, rgba(46, 204, 113, .35) 78%);
background-repeat: no-repeat;
background-size: 100% 100%;
}
.ap-lead {
font-family: 'Urbanist', 'Outfit', sans-serif;
font-size: 1.08rem;
line-height: 1.65;
color: #4b5563;
max-width: 760px;
margin: 0 0 22px;
}
.ap-meta {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 10px;
font-family: 'Urbanist', 'Outfit', sans-serif;
font-size: .85rem;
color: #6b7280;
padding-top: 18px;
border-top: 1px solid rgba(10, 14, 26, .08);
}
.ap-meta-item { display: inline-flex; align-items: center; gap: 6px; }
.ap-meta-item i { color: var(--c-accent, #9ca3af); font-size: 1rem; }
.ap-meta-sep { color: #d1d5db; }
/* Section heads (shared) */
.ap-section-head {
text-align: center;
max-width: 760px;
margin: 0 auto 50px;
}
.ap-section-head .ap-eyebrow { justify-content: center; }
.ap-h2 {
font-family: 'Urbanist', 'Outfit', sans-serif;
font-size: clamp(1.7rem, 3.2vw, 2.4rem);
font-weight: 700;
color: var(--c-primary, #0A0E1A);
letter-spacing: -.02em;
line-height: 1.2;
margin: 0 0 14px;
}
.ap-h2 .highlight {
color: var(--c-primary, #0A0E1A);
background-image: linear-gradient(transparent 80%, rgba(46, 204, 113, .35) 80%);
background-repeat: no-repeat;
background-size: 100% 100%;
}
.ap-h2-lead {
font-family: 'Urbanist', 'Outfit', sans-serif;
font-size: 1rem;
line-height: 1.65;
color: #4b5563;
margin: 0;
}
/* Values */
.ap-values-section { padding: 70px 0 60px; }
.ap-values {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 18px;
}
.ap-value {
position: relative;
background: #fff;
border: 1px solid #eef0f4;
border-radius: 16px;
padding: 30px 26px 26px;
transition: all .3s ease;
overflow: hidden;
}
.ap-value::before {
content: '';
position: absolute;
top: 0; left: 0;
width: 0%;
height: 3px;
background: var(--c-accent, #9ca3af);
transition: width .35s ease;
}
.ap-value:hover {
border-color: rgba(156, 163, 175, .35);
transform: translateY(-3px);
box-shadow: 0 14px 30px rgba(10, 14, 26, .08);
}
.ap-value:hover::before { width: 100%; }
.ap-value-num {
position: absolute;
top: 22px; right: 24px;
font-family: 'Urbanist', 'Outfit', sans-serif;
font-size: .82rem;
font-weight: 700;
color: #d1d5db;
letter-spacing: .12em;
}
.ap-value-ic {
font-size: 1.6rem;
color: var(--c-accent, #9ca3af);
margin-bottom: 14px;
display: inline-block;
}
.ap-value h3 {
font-family: 'Urbanist', 'Outfit', sans-serif;
font-size: 1.1rem;
font-weight: 700;
color: var(--c-primary, #0A0E1A);
margin: 0 0 8px;
letter-spacing: -.01em;
}
.ap-value p {
font-family: 'Urbanist', 'Outfit', sans-serif;
font-size: .92rem;
line-height: 1.6;
color: #6b7280;
margin: 0;
}
/* Approach pillars */
.ap-approach-section { padding: 60px 0 70px; }
.ap-pillars {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 22px;
counter-reset: pillar;
}
.ap-pillar {
position: relative;
background: #fff;
border: 1px solid #eef0f4;
border-radius: 18px;
padding: 32px 28px 28px;
transition: all .3s ease;
}
.ap-pillar:hover {
border-color: rgba(156, 163, 175, .3);
transform: translateY(-3px);
box-shadow: 0 14px 30px rgba(10, 14, 26, .08);
}
.ap-pillar-step {
display: inline-block;
font-family: 'Urbanist', 'Outfit', sans-serif;
font-size: .72rem;
font-weight: 700;
color: var(--c-accent, #9ca3af);
background: rgba(156, 163, 175, .1);
padding: 5px 11px;
border-radius: 999px;
letter-spacing: .08em;
text-transform: uppercase;
margin-bottom: 14px;
}
.ap-pillar h3 {
font-family: 'Urbanist', 'Outfit', sans-serif;
font-size: 1.4rem;
font-weight: 700;
color: var(--c-primary, #0A0E1A);
margin: 0 0 8px;
letter-spacing: -.01em;
}
.ap-pillar p {
font-family: 'Urbanist', 'Outfit', sans-serif;
font-size: .94rem;
line-height: 1.6;
color: #4b5563;
margin: 0 0 16px;
}
.ap-pillar ul {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
gap: 8px;
border-top: 1px solid #eef0f4;
padding-top: 14px;
}
.ap-pillar ul li {
display: flex;
align-items: center;
gap: 8px;
font-family: 'Urbanist', 'Outfit', sans-serif;
font-size: .88rem;
color: var(--c-primary, #0A0E1A);
}
.ap-pillar ul li i {
color: var(--c-accent, #9ca3af);
font-size: 1rem;
font-weight: 700;
flex-shrink: 0;
}
/* Why us */
.ap-why-section { padding: 60px 0 70px; }
.ap-why {
display: grid;
grid-template-columns: 1fr 1.1fr;
gap: 50px;
align-items: flex-start;
}
.ap-why-side .ap-eyebrow { margin-bottom: 14px; }
.ap-why-side .ap-h2 { margin-bottom: 16px; }
.ap-why-side p {
font-family: 'Urbanist', 'Outfit', sans-serif;
font-size: 1rem;
line-height: 1.7;
color: #4b5563;
margin: 0 0 24px;
max-width: 460px;
}
.ap-why-btn {
display: inline-flex;
align-items: center;
gap: 8px;
font-family: 'Urbanist', 'Outfit', sans-serif;
font-weight: 600;
font-size: .95rem;
color: #fff;
background: var(--c-primary, #0A0E1A);
padding: 13px 22px;
border-radius: 999px;
text-decoration: none;
transition: all .25s ease;
}
.ap-why-btn:hover {
transform: translateY(-2px);
box-shadow: 0 12px 28px rgba(10, 14, 26, .25);
}
.ap-why-btn i { transition: transform .25s ease; }
.ap-why-btn:hover i { transform: translateX(3px); }
.ap-why-list {
list-style: none;
margin: 0;
padding: 0;
display: grid;
grid-template-columns: 1fr 1fr;
gap: 16px;
}
.ap-why-list li {
display: flex;
align-items: flex-start;
gap: 12px;
background: #fff;
border: 1px solid #eef0f4;
border-radius: 14px;
padding: 18px 18px;
transition: all .25s ease;
}
.ap-why-list li:hover {
border-color: rgba(156, 163, 175, .3);
transform: translateY(-2px);
}
.ap-why-ic {
width: 38px; height: 38px;
background: rgba(156, 163, 175, .1);
color: var(--c-accent, #9ca3af);
border-radius: 10px;
display: flex;
align-items: center;
justify-content: center;
font-size: 1.05rem;
flex-shrink: 0;
}
.ap-why-list li strong {
display: block;
font-family: 'Urbanist', 'Outfit', sans-serif;
font-size: .96rem;
font-weight: 700;
color: var(--c-primary, #0A0E1A);
margin-bottom: 2px;
}
.ap-why-list li span {
display: block;
font-family: 'Urbanist', 'Outfit', sans-serif;
font-size: .84rem;
line-height: 1.5;
color: #6b7280;
}
/* ============================================
ABOUT — EDITORIAL HERO
============================================ */
.ap-hero-grid {
display: grid;
grid-template-columns: 1fr;
gap: 28px;
padding: 30px 0 24px;
border-bottom: 1px solid rgba(10, 14, 26, .08);
}
.ap-hero-meta {
display: flex;
flex-wrap: wrap;
gap: 8px;
align-items: center;
}
.ap-tag {
display: inline-flex;
align-items: center;
font-family: 'Urbanist', 'Outfit', sans-serif;
font-size: .72rem;
font-weight: 700;
letter-spacing: .14em;
text-transform: uppercase;
color: var(--c-primary, #0A0E1A);
background: rgba(156, 163, 175, .14);
padding: 7px 13px;
border-radius: 999px;
border: 1px solid rgba(156, 163, 175, .25);
}
.ap-tag-light {
display: inline-flex;
align-items: center;
font-family: 'Urbanist', 'Outfit', sans-serif;
font-size: .72rem;
font-weight: 600;
letter-spacing: .12em;
text-transform: uppercase;
color: #6b7280;
padding: 7px 13px;
border-radius: 999px;
border: 1px solid rgba(10, 14, 26, .12);
background: rgba(255, 255, 255, .65);
backdrop-filter: blur(4px);
}
.ap-display {
font-family: 'Urbanist', 'Outfit', sans-serif;
font-size: clamp(2.4rem, 7vw, 5.4rem);
font-weight: 700;
color: var(--c-primary, #0A0E1A);
letter-spacing: -.035em;
line-height: .98;
margin: 0;
display: block;
}
.ap-display-l1,
.ap-display-l2 {
display: block;
}
.ap-display-l1 {
color: #6b7280;
font-weight: 500;
font-style: italic;
}
.ap-display-l2 {
color: var(--c-primary, #0A0E1A);
margin-top: 4px;
}
.ap-display-l2 em {
font-style: italic;
background-image: linear-gradient(transparent 76%, rgba(46, 204, 113, .42) 76%);
background-repeat: no-repeat;
background-size: 100% 100%;
padding: 0 4px;
}
.ap-hero-foot {
display: grid;
grid-template-columns: 1fr auto;
gap: 36px;
align-items: end;
padding-top: 8px;
}
.ap-hero-kicker {
font-family: 'Urbanist', 'Outfit', sans-serif;
font-size: 1.05rem;
line-height: 1.7;
color: #4b5563;
max-width: 620px;
margin: 0;
}
.ap-hero-kicker strong {
color: var(--c-primary, #0A0E1A);
font-weight: 700;
}
.ap-hero-mark {
display: flex;
flex-direction: column;
align-items: flex-end;
gap: 2px;
text-align: right;
border-left: 2px solid rgba(156, 163, 175, .5);
padding-left: 18px;
}
.ap-hero-mark-num {
font-family: 'Urbanist', 'Outfit', sans-serif;
font-size: clamp(2.4rem, 4vw, 3rem);
font-weight: 700;
color: var(--c-primary, #0A0E1A);
letter-spacing: -.02em;
line-height: 1;
}
.ap-hero-mark-lbl {
font-family: 'Urbanist', 'Outfit', sans-serif;
font-size: .8rem;
color: #6b7280;
letter-spacing: .02em;
}
/* ============================================
ABOUT — MANIFESTO STRIP
============================================ */
.ap-manifesto { padding: 64px 0 24px; }
.ap-manifesto-list {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 28px;
border-top: 1px solid rgba(10, 14, 26, .08);
padding-top: 36px;
}
.ap-mani {
position: relative;
padding: 4px 0 4px 0;
}
.ap-mani-no {
display: inline-block;
font-family: 'Urbanist', 'Outfit', sans-serif;
font-size: .8rem;
font-weight: 600;
color: var(--c-accent, #9ca3af);
letter-spacing: .12em;
margin-bottom: 14px;
}
.ap-mani h3 {
font-family: 'Urbanist', 'Outfit', sans-serif;
font-size: clamp(1.25rem, 2vw, 1.55rem);
font-weight: 700;
color: var(--c-primary, #0A0E1A);
letter-spacing: -.015em;
line-height: 1.25;
margin: 0 0 12px;
}
.ap-mani h3 span {
color: var(--c-primary, #0A0E1A);
background-image: linear-gradient(transparent 78%, rgba(46, 204, 113, .38) 78%);
background-repeat: no-repeat;
background-size: 100% 100%;
padding: 0 2px;
}
.ap-mani p {
font-family: 'Urbanist', 'Outfit', sans-serif;
font-size: .95rem;
line-height: 1.65;
color: #6b7280;
margin: 0;
max-width: 320px;
}
/* ============================================
ABOUT — MILESTONES
============================================ */
.ap-milestones { padding: 70px 0 60px; }
.ap-mile-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 16px;
}
.ap-mile {
background: rgba(255, 255, 255, .72);
backdrop-filter: blur(8px);
border: 1px solid rgba(10, 14, 26, .08);
border-radius: 18px;
padding: 30px 24px 26px;
transition: all .3s ease;
position: relative;
overflow: hidden;
}
.ap-mile::before {
content: '';
position: absolute;
top: 0; left: 0;
width: 36px;
height: 3px;
background: var(--c-accent, #9ca3af);
border-radius: 0 0 4px 0;
transition: width .35s ease;
}
.ap-mile:hover { transform: translateY(-3px); border-color: rgba(156, 163, 175, .3); }
.ap-mile:hover::before { width: 64px; }
.ap-mile-num {
display: block;
font-family: 'Urbanist', 'Outfit', sans-serif;
font-size: clamp(2rem, 3.6vw, 2.8rem);
font-weight: 700;
color: var(--c-primary, #0A0E1A);
letter-spacing: -.03em;
line-height: 1;
margin: 0 0 14px;
}
.ap-mile-num sup {
font-size: .42em;
font-weight: 600;
color: #6b7280;
margin-left: 4px;
vertical-align: super;
letter-spacing: 0;
}
.ap-mile-lbl {
display: block;
font-family: 'Urbanist', 'Outfit', sans-serif;
font-size: .9rem;
font-weight: 600;
color: var(--c-primary, #0A0E1A);
margin-bottom: 6px;
}
.ap-mile-sub {
display: block;
font-family: 'Urbanist', 'Outfit', sans-serif;
font-size: .82rem;
line-height: 1.55;
color: #6b7280;
}
/* ============================================
ABOUT — STORY TIMELINE
============================================ */
.ap-story { padding: 70px 0 60px; }
.ap-story-head {
max-width: 720px;
margin: 0 auto 50px;
text-align: center;
}
.ap-story-head .ap-eyebrow { justify-content: center; }
.ap-timeline {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 0;
position: relative;
}
.ap-timeline::before {
content: '';
position: absolute;
top: 38px;
left: 8%;
right: 8%;
height: 1px;
background: linear-gradient(to right, transparent, rgba(10, 14, 26, .15), transparent);
z-index: 0;
}
.ap-tl-item {
position: relative;
padding: 0 18px;
text-align: center;
z-index: 1;
}
.ap-tl-item::before {
content: '';
display: block;
width: 14px;
height: 14px;
margin: 32px auto 22px;
border-radius: 50%;
background: #fff;
border: 2.5px solid var(--c-accent, #9ca3af);
box-shadow: 0 0 0 5px rgba(156, 163, 175, .12);
position: relative;
z-index: 2;
}
.ap-tl-year {
display: block;
font-family: 'Urbanist', 'Outfit', sans-serif;
font-size: .85rem;
font-weight: 700;
color: var(--c-accent, #9ca3af);
letter-spacing: .08em;
text-transform: uppercase;
margin-bottom: 6px;
}
.ap-tl-item h4 {
font-family: 'Urbanist', 'Outfit', sans-serif;
font-size: 1.1rem;
font-weight: 700;
color: var(--c-primary, #0A0E1A);
margin: 0 0 8px;
letter-spacing: -.01em;
}
.ap-tl-item p {
font-family: 'Urbanist', 'Outfit', sans-serif;
font-size: .88rem;
line-height: 1.6;
color: #6b7280;
margin: 0;
max-width: 240px;
margin-inline: auto;
}
/* ============================================
ABOUT — BENTO VALUES
============================================ */
.ap-bento-section { padding: 70px 0 60px; }
.ap-bento {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-auto-rows: minmax(220px, auto);
gap: 16px;
}
.ap-b {
position: relative;
background: rgba(255, 255, 255, .8);
backdrop-filter: blur(8px);
border: 1px solid rgba(10, 14, 26, .08);
border-radius: 20px;
padding: 28px 26px 26px;
transition: all .3s ease;
overflow: hidden;
display: flex;
flex-direction: column;
}
.ap-b:hover {
transform: translateY(-3px);
border-color: rgba(156, 163, 175, .3);
box-shadow: 0 14px 32px rgba(10, 14, 26, .08);
}
.ap-b-num {
display: inline-block;
font-family: 'Urbanist', 'Outfit', sans-serif;
font-size: .75rem;
font-weight: 700;
color: var(--c-accent, #9ca3af);
letter-spacing: .14em;
margin-bottom: 14px;
}
.ap-b-ic {
font-size: 1.6rem;
color: var(--c-primary, #0A0E1A);
margin-bottom: 14px;
}
.ap-b h3 {
font-family: 'Urbanist', 'Outfit', sans-serif;
font-size: 1.1rem;
font-weight: 700;
color: var(--c-primary, #0A0E1A);
letter-spacing: -.01em;
line-height: 1.25;
margin: 0 0 10px;
}
.ap-b h3 em {
font-style: italic;
color: var(--c-primary, #0A0E1A);
background-image: linear-gradient(transparent 80%, rgba(46, 204, 113, .35) 80%);
background-repeat: no-repeat;
background-size: 100% 100%;
padding: 0 2px;
}
.ap-b p {
font-family: 'Urbanist', 'Outfit', sans-serif;
font-size: .92rem;
line-height: 1.6;
color: #6b7280;
margin: 0;
}
.ap-b-feat {
grid-column: span 2;
background: linear-gradient(135deg, #f7f8fb 0%, #eef5f1 100%);
}
.ap-b-feat .ap-b-ic { font-size: 2.1rem; color: var(--c-accent, #9ca3af); }
.ap-b-feat h3 { font-size: 1.5rem; }
.ap-b-feat p { font-size: 1rem; max-width: 520px; }
.ap-b-dark {
background: linear-gradient(135deg, #0f1426 0%, #0A0E1A 100%);
border-color: transparent;
color: #fff;
}
.ap-b-dark .ap-b-num { color: var(--c-accent, #9ca3af); }
.ap-b-dark .ap-b-ic { color: var(--c-accent, #9ca3af); }
.ap-b-dark h3 { color: #fff; }
.ap-b-dark h3 em {
color: #fff;
background-image: linear-gradient(transparent 80%, rgba(46, 204, 113, .55) 80%);
}
.ap-b-dark p { color: #c8cdd6; }
.ap-b-dark:hover { border-color: rgba(156, 163, 175, .4); }
/* ============================================
ABOUT — BIG PROMISE
============================================ */
.ap-promise { padding: 70px 0 50px; }
.ap-promise-card {
position: relative;
background: linear-gradient(135deg, #f7f8fb 0%, #eef5f1 100%);
border: 1px solid rgba(10, 14, 26, .08);
border-radius: 24px;
padding: 70px 56px 56px;
text-align: center;
overflow: hidden;
}
.ap-promise-card::before {
content: '';
position: absolute;
width: 320px;
height: 320px;
border-radius: 50%;
background: radial-gradient(circle, rgba(156, 163, 175, .14), transparent 70%);
top: -140px; left: -100px;
pointer-events: none;
}
.ap-promise-card::after {
content: '';
position: absolute;
width: 260px;
height: 260px;
border-radius: 50%;
background: radial-gradient(circle, rgba(156, 163, 175, .1), transparent 70%);
bottom: -120px; right: -80px;
pointer-events: none;
}
.ap-promise-mark {
position: absolute;
top: 14px;
left: 50%;
transform: translateX(-50%);
font-family: 'Urbanist', 'Outfit', serif;
font-size: 7rem;
line-height: 1;
color: rgba(156, 163, 175, .25);
font-weight: 700;
pointer-events: none;
}
.ap-promise-text {
position: relative;
font-family: 'Urbanist', 'Outfit', sans-serif;
font-size: clamp(1.5rem, 3.2vw, 2.4rem);
font-weight: 600;
color: var(--c-primary, #0A0E1A);
letter-spacing: -.02em;
line-height: 1.3;
max-width: 720px;
margin: 0 auto 18px;
}
.ap-promise-text .highlight {
color: var(--c-primary, #0A0E1A);
background-image: linear-gradient(transparent 78%, rgba(46, 204, 113, .42) 78%);
background-repeat: no-repeat;
background-size: 100% 100%;
padding: 0 4px;
}
.ap-promise-sign {
position: relative;
display: inline-block;
font-family: 'Urbanist', 'Outfit', sans-serif;
font-size: .9rem;
font-weight: 600;
color: #6b7280;
letter-spacing: .04em;
}
/* ============================================
ABOUT — MAGAZINE EDITORIAL (.ed-*)
============================================ */
/* MASTHEAD HERO */
.ed-mast { padding: 24px 0 56px; }
.ed-mast-bar {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 12px;
font-family: 'Urbanist', 'Outfit', sans-serif;
font-size: .76rem;
font-weight: 600;
letter-spacing: .14em;
text-transform: uppercase;
color: #6b7280;
padding: 14px 0;
border-top: 1px solid rgba(10, 14, 26, .12);
border-bottom: 1px solid rgba(10, 14, 26, .12);
margin-bottom: 56px;
}
.ed-mast-issue { color: var(--c-primary, #0A0E1A); font-weight: 700; }
.ed-mast-dot { color: #d1d5db; }
.ed-mast-pulse {
margin-left: auto;
display: inline-flex;
align-items: center;
gap: 8px;
color: var(--c-primary, #0A0E1A);
}
.ed-pulse-dot {
width: 8px; height: 8px;
border-radius: 50%;
background: var(--c-accent, #9ca3af);
box-shadow: 0 0 0 0 rgba(156, 163, 175, .55);
animation: edPulse 2s ease-out infinite;
}
@keyframes edPulse {
0% { box-shadow: 0 0 0 0 rgba(156, 163, 175, .55); }
70% { box-shadow: 0 0 0 9px rgba(156, 163, 175, 0); }
100% { box-shadow: 0 0 0 0 rgba(156, 163, 175, 0); }
}
.ed-mast-title {
font-family: 'Urbanist', 'Outfit', sans-serif;
font-size: clamp(2.6rem, 8vw, 6.4rem);
font-weight: 700;
color: var(--c-primary, #0A0E1A);
letter-spacing: -.04em;
line-height: 1;
margin: 0 0 38px;
}
.ed-mast-line {
display: block;
color: #6b7280;
font-weight: 500;
font-style: italic;
}
.ed-mast-rotate {
display: block;
position: relative;
height: 1em;
overflow: visible;
}
.ed-rot-word {
position: absolute;
top: 0; left: 0;
color: var(--c-primary, #0A0E1A);
background-image: linear-gradient(transparent 78%, rgba(46, 204, 113, .42) 78%);
background-repeat: no-repeat;
background-size: 100% 100%;
padding: 0 6px;
margin-left: -6px;
white-space: nowrap;
opacity: 0;
animation: edRotate 9s infinite;
}
.ed-rot-word:nth-child(1) { animation-delay: 0s; }
.ed-rot-word:nth-child(2) { animation-delay: 3s; }
.ed-rot-word:nth-child(3) { animation-delay: 6s; }
@keyframes edRotate {
0% { opacity: 0; transform: translateY(28%); }
4% { opacity: 1; transform: translateY(0); }
30% { opacity: 1; transform: translateY(0); }
34% { opacity: 0; transform: translateY(-28%); }
100% { opacity: 0; transform: translateY(-28%); }
}
.ed-mast-foot {
display: grid;
grid-template-columns: 1fr auto;
gap: 36px;
align-items: end;
border-top: 1px solid rgba(10, 14, 26, .08);
padding-top: 30px;
}
.ed-mast-lead {
font-family: 'Urbanist', 'Outfit', sans-serif;
font-size: 1.05rem;
line-height: 1.7;
color: #4b5563;
margin: 0;
max-width: 640px;
}
.ed-mast-lead em {
font-style: italic;
color: var(--c-primary, #0A0E1A);
font-weight: 500;
}
.ed-scroll {
display: inline-flex;
align-items: center;
gap: 10px;
text-decoration: none;
font-family: 'Urbanist', 'Outfit', sans-serif;
font-size: .85rem;
font-weight: 600;
color: var(--c-primary, #0A0E1A);
letter-spacing: .04em;
border: 1px solid rgba(10, 14, 26, .15);
padding: 14px 22px;
border-radius: 999px;
transition: all .25s ease;
flex-shrink: 0;
background: rgba(255, 255, 255, .55);
backdrop-filter: blur(4px);
}
.ed-scroll:hover { border-color: var(--c-accent, #9ca3af); color: var(--c-accent, #9ca3af); }
.ed-scroll i { transition: transform .25s ease; }
.ed-scroll:hover i { transform: translateY(3px); }
/* INFINITE MARQUEE */
.ed-marquee {
overflow: hidden;
border-block: 1px solid rgba(10, 14, 26, .1);
background: rgba(255, 255, 255, .45);
backdrop-filter: blur(6px);
padding: 18px 0;
margin: 10px 0 0;
}
.ed-marquee-track {
display: flex;
gap: 32px;
align-items: center;
width: max-content;
animation: edMarquee 36s linear infinite;
font-family: 'Urbanist', 'Outfit', sans-serif;
font-size: clamp(1.3rem, 2.6vw, 2rem);
font-weight: 600;
color: var(--c-primary, #0A0E1A);
letter-spacing: -.01em;
white-space: nowrap;
}
.ed-mq-sep { color: var(--c-accent, #9ca3af); font-size: .7em; }
@keyframes edMarquee {
from { transform: translateX(0); }
to { transform: translateX(-50%); }
}
/* CHAPTER LABEL */
.ed-chapter {
display: inline-block;
font-family: 'Urbanist', 'Outfit', sans-serif;
font-size: .78rem;
font-weight: 700;
letter-spacing: .14em;
text-transform: uppercase;
color: var(--c-accent, #9ca3af);
margin-bottom: 22px;
padding: 7px 14px;
background: rgba(156, 163, 175, .12);
border-radius: 999px;
border: 1px solid rgba(156, 163, 175, .2);
}
/* SHARED H2 (editorial) */
.ed-h2 {
font-family: 'Urbanist', 'Outfit', sans-serif;
font-size: clamp(1.8rem, 4vw, 3rem);
font-weight: 700;
color: var(--c-primary, #0A0E1A);
letter-spacing: -.025em;
line-height: 1.15;
margin: 0 0 22px;
}
.ed-h2 .highlight {
color: var(--c-primary, #0A0E1A);
background-image: linear-gradient(transparent 80%, rgba(46, 204, 113, .4) 80%);
background-repeat: no-repeat;
background-size: 100% 100%;
padding: 0 4px;
}
/* BIG QUOTE / MANIFESTO */
.ed-quote {
padding: 80px 0 54px;
text-align: center;
}
.ed-blockquote {
font-family: 'Urbanist', 'Outfit', sans-serif;
font-size: clamp(1.7rem, 4vw, 3rem);
font-weight: 600;
color: var(--c-primary, #0A0E1A);
letter-spacing: -.02em;
line-height: 1.25;
margin: 0 auto 24px;
max-width: 920px;
position: relative;
padding: 8px 0;
}
.ed-blockquote em {
font-style: italic;
color: var(--c-primary, #0A0E1A);
background-image: linear-gradient(transparent 76%, rgba(46, 204, 113, .42) 76%);
background-repeat: no-repeat;
background-size: 100% 100%;
padding: 0 4px;
}
.ed-bq-mark {
display: block;
font-family: 'Urbanist', 'Outfit', serif;
font-size: clamp(4rem, 8vw, 6rem);
line-height: .8;
color: rgba(156, 163, 175, .35);
margin-bottom: 6px;
font-weight: 700;
}
.ed-bq-meta {
display: inline-flex;
align-items: center;
gap: 14px;
margin-top: 14px;
}
.ed-bq-line {
display: inline-block;
width: 50px;
height: 1px;
background: var(--c-accent, #9ca3af);
}
.ed-bq-sign {
font-family: 'Urbanist', 'Outfit', sans-serif;
font-size: .85rem;
font-weight: 600;
color: #6b7280;
letter-spacing: .04em;
}
/* BIG STAT ROWS — alternating */
.ed-stats { padding: 60px 0 40px; }
.ed-stats .ed-h2 { margin-bottom: 50px; max-width: 720px; }
.ed-stat-row {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 60px;
align-items: center;
padding: 50px 0;
border-top: 1px solid rgba(10, 14, 26, .08);
}
.ed-stat-row:last-child { border-bottom: 1px solid rgba(10, 14, 26, .08); }
.ed-stat-flip { direction: rtl; }
.ed-stat-flip > * { direction: ltr; }
.ed-stat-flip .ed-stat-num { text-align: right; }
.ed-stat-num {
font-family: 'Urbanist', 'Outfit', sans-serif;
font-size: clamp(5rem, 14vw, 11rem);
font-weight: 700;
color: var(--c-primary, #0A0E1A);
letter-spacing: -.05em;
line-height: .85;
position: relative;
}
.ed-stat-num sup {
font-size: .2em;
font-weight: 700;
color: var(--c-accent, #9ca3af);
text-transform: uppercase;
letter-spacing: .12em;
margin-left: 6px;
vertical-align: super;
top: -2.2em;
position: relative;
}
.ed-stat-body h3 {
font-family: 'Urbanist', 'Outfit', sans-serif;
font-size: clamp(1.3rem, 2.2vw, 1.7rem);
font-weight: 700;
color: var(--c-primary, #0A0E1A);
line-height: 1.25;
letter-spacing: -.015em;
margin: 0 0 14px;
}
.ed-stat-body h3 em {
font-style: italic;
background-image: linear-gradient(transparent 78%, rgba(46, 204, 113, .38) 78%);
background-repeat: no-repeat;
background-size: 100% 100%;
padding: 0 3px;
}
.ed-stat-body p {
font-family: 'Urbanist', 'Outfit', sans-serif;
font-size: 1rem;
line-height: 1.7;
color: #4b5563;
margin: 0;
max-width: 480px;
}
/* VS COMPARISON */
.ed-vs { padding: 70px 0 60px; }
.ed-vs .ed-h2 { margin-bottom: 50px; max-width: 720px; }
.ed-vs-grid {
display: grid;
grid-template-columns: 1fr 1fr;
border-radius: 22px;
overflow: hidden;
border: 1px solid rgba(10, 14, 26, .1);
background: rgba(255, 255, 255, .65);
backdrop-filter: blur(8px);
}
.ed-vs-col {
padding: 36px 32px 32px;
position: relative;
}
.ed-vs-them {
background: rgba(255, 255, 255, .35);
border-right: 1px solid rgba(10, 14, 26, .08);
}
.ed-vs-us {
background: linear-gradient(135deg, rgba(156, 163, 175, .1), rgba(156, 163, 175, .02));
}
.ed-vs-tag {
display: inline-block;
font-family: 'Urbanist', 'Outfit', sans-serif;
font-size: .78rem;
font-weight: 700;
letter-spacing: .14em;
text-transform: uppercase;
margin-bottom: 22px;
}
.ed-vs-them .ed-vs-tag { color: #9ca3af; }
.ed-vs-us .ed-vs-tag { color: var(--c-accent, #9ca3af); }
.ed-vs-col ul {
list-style: none;
margin: 0; padding: 0;
}
.ed-vs-col li {
display: flex;
gap: 12px;
align-items: flex-start;
padding: 13px 0;
border-top: 1px dashed rgba(10, 14, 26, .1);
font-family: 'Urbanist', 'Outfit', sans-serif;
font-size: .96rem;
line-height: 1.5;
}
.ed-vs-col li:first-child { border-top: none; }
.ed-vs-col li i {
width: 22px; height: 22px;
flex-shrink: 0;
border-radius: 50%;
display: inline-flex;
align-items: center;
justify-content: center;
margin-top: 1px;
font-size: .9rem;
}
.ed-vs-them li {
color: #9ca3af;
text-decoration: line-through;
text-decoration-color: rgba(220, 38, 38, .35);
text-decoration-thickness: 1px;
}
.ed-vs-them li i {
color: #dc2626;
background: rgba(220, 38, 38, .08);
}
.ed-vs-us li {
color: var(--c-primary, #0A0E1A);
font-weight: 500;
}
.ed-vs-us li i {
color: var(--c-accent, #9ca3af);
background: rgba(156, 163, 175, .14);
}
/* STORY CHAPTERS */
.ed-story { padding: 70px 0 50px; }
.ed-story .ed-h2 { margin-bottom: 50px; max-width: 720px; }
.ed-chapters { display: grid; }
.ed-ch {
display: grid;
grid-template-columns: 200px 1fr;
gap: 60px;
padding: 36px 0;
border-top: 1px solid rgba(10, 14, 26, .08);
align-items: start;
}
.ed-ch:last-child { border-bottom: 1px solid rgba(10, 14, 26, .08); }
.ed-ch-yr {
font-family: 'Urbanist', 'Outfit', sans-serif;
font-size: clamp(2.2rem, 4vw, 3.2rem);
font-weight: 700;
color: var(--c-accent, #9ca3af);
letter-spacing: -.025em;
line-height: 1;
}
.ed-ch-body h3 {
font-family: 'Urbanist', 'Outfit', sans-serif;
font-size: clamp(1.3rem, 2.4vw, 1.8rem);
font-weight: 700;
color: var(--c-primary, #0A0E1A);
letter-spacing: -.015em;
line-height: 1.25;
margin: 0 0 12px;
}
.ed-ch-body p {
font-family: 'Urbanist', 'Outfit', sans-serif;
font-size: 1rem;
line-height: 1.7;
color: #4b5563;
margin: 0;
max-width: 620px;
}
.ed-ch-body p em {
font-style: italic;
background-image: linear-gradient(transparent 80%, rgba(46, 204, 113, .35) 80%);
background-repeat: no-repeat;
background-size: 100% 100%;
padding: 0 3px;
}
/* ANTI LIST */
.ed-anti { padding: 70px 0 50px; }
.ed-anti .ed-h2 { margin-bottom: 50px; max-width: 720px; }
.ed-anti-list {
list-style: none;
margin: 0; padding: 0;
counter-reset: anti;
}
.ed-anti-list li {
counter-increment: anti;
display: flex;
align-items: baseline;
gap: 28px;
padding: 22px 4px;
border-top: 1px solid rgba(10, 14, 26, .08);
font-family: 'Urbanist', 'Outfit', sans-serif;
font-size: clamp(1.1rem, 2vw, 1.4rem);
font-weight: 500;
color: var(--c-primary, #0A0E1A);
line-height: 1.4;
transition: padding-left .25s ease;
position: relative;
}
.ed-anti-list li:last-child { border-bottom: 1px solid rgba(10, 14, 26, .08); }
.ed-anti-list li:hover { padding-left: 18px; }
.ed-anti-list li:hover .ed-anti-no { color: var(--c-accent, #9ca3af); }
.ed-anti-no {
font-family: 'Urbanist', 'Outfit', sans-serif;
font-size: .85rem;
font-weight: 700;
color: #d1d5db;
letter-spacing: .12em;
flex-shrink: 0;
width: 60px;
text-transform: uppercase;
transition: color .25s ease;
}
.ed-anti-no::after { content: " 0" counter(anti); }
.ed-anti-list li strong {
font-weight: 700;
color: var(--c-primary, #0A0E1A);
background-image: linear-gradient(transparent 80%, rgba(46, 204, 113, .32) 80%);
background-repeat: no-repeat;
background-size: 100% 100%;
padding: 0 3px;
margin-right: 4px;
}
/* FOUNDER SIGN */
.ed-sign { padding: 50px 0 40px; }
.ed-sign-card {
background: linear-gradient(135deg, #f7f8fb 0%, #eef5f1 100%);
border: 1px solid rgba(10, 14, 26, .08);
border-radius: 24px;
padding: 64px 50px 44px;
position: relative;
overflow: hidden;
}
.ed-sign-card::before {
content: '';
position: absolute;
width: 320px; height: 320px;
border-radius: 50%;
background: radial-gradient(circle, rgba(156, 163, 175, .18), transparent 70%);
top: -150px; right: -110px;
pointer-events: none;
}
.ed-sign-card::after {
content: '';
position: absolute;
width: 240px; height: 240px;
border-radius: 50%;
background: radial-gradient(circle, rgba(156, 163, 175, .1), transparent 70%);
bottom: -120px; left: -80px;
pointer-events: none;
}
.ed-sign-mark {
position: absolute;
top: -10px; left: 30px;
font-family: 'Urbanist', 'Outfit', serif;
font-size: 8rem;
line-height: 1;
color: rgba(156, 163, 175, .4);
font-weight: 700;
pointer-events: none;
z-index: 1;
}
.ed-sign-text {
position: relative;
z-index: 2;
font-family: 'Urbanist', 'Outfit', sans-serif;
font-size: clamp(1.3rem, 2.6vw, 2rem);
font-weight: 600;
color: var(--c-primary, #0A0E1A);
letter-spacing: -.015em;
line-height: 1.4;
margin: 0 0 28px;
max-width: 820px;
}
.ed-sign-text .highlight {
color: var(--c-primary, #0A0E1A);
background-image: linear-gradient(transparent 78%, rgba(46, 204, 113, .42) 78%);
background-repeat: no-repeat;
background-size: 100% 100%;
padding: 0 4px;
}
.ed-sign-meta {
position: relative;
z-index: 2;
display: flex;
align-items: center;
gap: 14px;
flex-wrap: wrap;
}
.ed-sign-name {
font-family: 'Urbanist', 'Outfit', sans-serif;
font-size: 1rem;
font-weight: 700;
color: var(--c-primary, #0A0E1A);
}
.ed-sign-loc {
font-family: 'Urbanist', 'Outfit', sans-serif;
font-size: .85rem;
color: #6b7280;
letter-spacing: .04em;
}
/* NE İŞ YAPARIZ — hizmet grupları */
.ed-services { padding: 70px 0 60px; }
.ed-services .ed-h2 { margin-bottom: 22px; max-width: 760px; }
.ed-services-lead {
font-family: 'Urbanist', 'Outfit', sans-serif;
font-size: clamp(1rem, 1.3vw, 1.12rem);
line-height: 1.7; color: #4b5563;
max-width: 720px; margin: 0 0 50px;
}
.ed-svc-groups {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 1px;
background: rgba(10, 14, 26, .08);
border: 1px solid rgba(10, 14, 26, .08);
border-radius: 22px;
overflow: hidden;
}
.ed-svc-group {
background: var(--c-bg, #F6FBFE);
padding: 30px 30px 26px;
transition: background .3s ease;
}
.ed-svc-group:hover { background: #fff; }
.ed-svc-group.is-feature {
grid-column: 1 / -1;
background: linear-gradient(135deg, var(--c-accent-soft) 0%, #fff 100%);
}
.ed-svc-group-head {
display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap;
padding-bottom: 16px; margin-bottom: 8px;
border-bottom: 1px dashed rgba(10, 14, 26, .12);
}
.ed-svc-group-note {
font-family: 'JetBrains Mono', ui-monospace, monospace;
font-size: 10.5px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase;
color: var(--c-accent);
}
.ed-svc-group.is-feature .ed-svc-group-note { color: var(--c-pink); }
.ed-svc-group-title {
font-family: 'Urbanist', 'Outfit', sans-serif;
font-size: clamp(1.15rem, 1.8vw, 1.45rem); font-weight: 800;
letter-spacing: -.02em; color: var(--c-primary); margin: 0;
}
.ed-svc-list { list-style: none; margin: 0; padding: 0; }
.ed-svc-group.is-feature .ed-svc-list {
display: grid; grid-template-columns: repeat(2, 1fr); gap: 0 28px;
}
.ed-svc-list li { border-bottom: 1px solid rgba(10, 14, 26, .07); }
.ed-svc-list li:last-child { border-bottom: none; }
.ed-svc-list a {
display: flex; align-items: center; justify-content: space-between; gap: 12px;
padding: 13px 2px;
text-decoration: none; color: var(--c-primary);
transition: padding .25s ease, color .25s ease;
}
.ed-svc-name {
font-family: 'Urbanist', 'Outfit', sans-serif; font-size: .98rem; font-weight: 500;
line-height: 1.35;
}
.ed-svc-list a i {
flex-shrink: 0; font-size: 1rem; color: #c5cbd3;
transition: color .25s ease, transform .25s ease;
}
.ed-svc-list a:hover { padding-left: 10px; color: var(--c-accent); }
.ed-svc-list a:hover i { color: var(--c-accent); transform: translate(2px, -2px); }
.ed-services-all { margin-top: 40px; }
.ed-services-all .btn-primary i { transition: transform .25s ease; }
.ed-services-all .btn-primary:hover i { transform: translateX(4px); }
/* NEREDEYIZ */
.ed-where { padding: 70px 0 50px; }
.ed-where-grid {
display: grid; grid-template-columns: 1.1fr .9fr;
gap: clamp(32px, 5vw, 72px); align-items: center;
}
.ed-where-tx .ed-h2 { margin-bottom: 18px; }
.ed-where-lead {
font-family: 'Urbanist', 'Outfit', sans-serif;
font-size: clamp(1rem, 1.3vw, 1.1rem); line-height: 1.7; color: #4b5563;
max-width: 52ch; margin: 0;
}
.ed-where-card {
background: #fff;
border: 1px solid rgba(10, 14, 26, .1);
border-radius: 22px;
padding: clamp(26px, 3vw, 38px);
box-shadow: var(--shadow-md);
}
.ed-where-item {
display: flex; align-items: flex-start; gap: 16px;
padding: 16px 0; border-bottom: 1px solid rgba(10, 14, 26, .07);
}
.ed-where-item i {
flex-shrink: 0; width: 40px; height: 40px; border-radius: 12px;
display: inline-flex; align-items: center; justify-content: center;
background: var(--c-accent-soft); color: var(--c-accent); font-size: 1.05rem;
}
.ed-where-item > div { display: flex; flex-direction: column; gap: 3px; }
.ed-where-lbl {
font-family: 'JetBrains Mono', ui-monospace, monospace;
font-size: 10px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase;
color: #9ca3af;
}
.ed-where-val {
font-family: 'Urbanist', 'Outfit', sans-serif; font-size: 1rem; font-weight: 600;
color: var(--c-primary); text-decoration: none; line-height: 1.45;
transition: color .25s ease;
}
a.ed-where-val:hover { color: var(--c-accent); }
.ed-where-btn { margin-top: 24px; width: 100%; justify-content: center; }
.ed-where-btn i { transition: transform .25s ease; }
.ed-where-btn:hover i { transform: translateX(4px); }
/* EDITORIAL — RESPONSIVE */
@media (max-width: 960px) {
.ed-svc-groups { grid-template-columns: 1fr; }
.ed-svc-group.is-feature .ed-svc-list { grid-template-columns: 1fr; }
.ed-where-grid { grid-template-columns: 1fr; gap: 32px; }
.ed-mast-bar { font-size: .68rem; gap: 8px; padding: 10px 0; }
.ed-mast-pulse { margin-left: 0; }
.ed-mast-foot { grid-template-columns: 1fr; gap: 22px; }
.ed-stat-row { grid-template-columns: 1fr; gap: 24px; padding: 36px 0; }
.ed-stat-flip { direction: ltr; }
.ed-stat-flip .ed-stat-num { text-align: left; }
.ed-vs-grid { grid-template-columns: 1fr; }
.ed-vs-them { border-right: none; border-bottom: 1px solid rgba(10, 14, 26, .08); }
.ed-ch { grid-template-columns: 1fr; gap: 14px; }
.ed-anti-list li { gap: 16px; }
.ed-anti-no { width: 50px; font-size: .76rem; }
.ed-sign-card { padding: 56px 28px 36px; }
.ed-sign-mark { font-size: 6rem; top: -4px; left: 16px; }
.ed-quote { padding: 60px 0 36px; }
}
@media (max-width: 600px) {
/* Breadcrumb */
.about-crumb { padding: 20px 0 16px; }
.about-crumb .container { gap: 10px; font-size: .88rem; }
/* Masthead hero */
.ed-mast { padding: 14px 0 32px; }
.ed-mast-bar {
font-size: .62rem;
gap: 6px 10px;
padding: 10px 0;
margin-bottom: 28px;
letter-spacing: .1em;
}
.ed-mast-pulse { margin-left: 0; flex-basis: 100%; }
.ed-mast-title {
font-size: clamp(2.4rem, 11vw, 3.4rem);
margin: 0 0 24px;
letter-spacing: -.045em;
}
.ed-mast-foot { gap: 18px; padding-top: 20px; }
.ed-mast-lead { font-size: .98rem; line-height: 1.6; }
.ed-scroll { font-size: .8rem; padding: 11px 18px; }
/* Marquee */
.ed-marquee { padding: 14px 0; }
.ed-marquee-track { font-size: 1.15rem; gap: 20px; }
/* Shared */
.ed-chapter {
font-size: .68rem;
margin-bottom: 16px;
padding: 6px 12px;
letter-spacing: .12em;
}
.ed-h2 {
font-size: clamp(1.7rem, 7vw, 2.2rem);
line-height: 1.15;
margin-bottom: 18px;
}
/* Quote */
.ed-quote { padding: 48px 0 32px; }
.ed-blockquote {
font-size: clamp(1.4rem, 5.6vw, 1.85rem);
line-height: 1.3;
}
.ed-bq-mark { font-size: 4rem; }
.ed-bq-line { width: 32px; }
/* Stats */
.ed-stats { padding: 40px 0 28px; }
.ed-stats .ed-h2 { margin-bottom: 28px; }
.ed-stat-row { gap: 18px; padding: 28px 0; }
.ed-stat-num {
font-size: clamp(4rem, 22vw, 6rem);
line-height: .9;
}
.ed-stat-num sup {
font-size: .22em;
top: -2.4em;
margin-left: 4px;
}
.ed-stat-body h3 { font-size: 1.2rem; margin: 0 0 10px; }
.ed-stat-body p { font-size: .94rem; line-height: 1.6; }
/* VS */
.ed-vs { padding: 48px 0 40px; }
.ed-vs .ed-h2 { margin-bottom: 28px; }
.ed-vs-grid { border-radius: 16px; }
.ed-vs-col { padding: 28px 22px; }
.ed-vs-tag { font-size: .7rem; margin-bottom: 16px; }
.ed-vs-col li {
gap: 10px;
padding: 11px 0;
font-size: .92rem;
}
.ed-vs-col li i {
width: 20px; height: 20px;
font-size: .8rem;
}
/* Story */
.ed-story { padding: 48px 0 36px; }
.ed-story .ed-h2 { margin-bottom: 28px; }
.ed-ch { gap: 8px; padding: 26px 0; }
.ed-ch-yr { font-size: clamp(1.7rem, 7vw, 2.2rem); }
.ed-ch-body h3 { font-size: 1.15rem; margin: 0 0 8px; }
.ed-ch-body p { font-size: .94rem; line-height: 1.6; }
/* Anti list */
.ed-anti { padding: 48px 0 36px; }
.ed-anti .ed-h2 { margin-bottom: 28px; }
.ed-anti-no { display: none; }
.ed-anti-list li {
font-size: 1.02rem;
padding: 18px 4px;
gap: 12px;
line-height: 1.4;
}
.ed-anti-list li:hover { padding-left: 4px; }
/* Sign */
.ed-sign { padding: 36px 0 28px; }
.ed-sign-card {
padding: 50px 22px 32px;
border-radius: 18px;
}
.ed-sign-mark { font-size: 5rem; top: -2px; left: 14px; }
.ed-sign-text {
font-size: 1.15rem;
line-height: 1.45;
margin: 0 0 20px;
}
.ed-sign-meta { gap: 8px; }
.ed-sign-name { font-size: .94rem; }
.ed-sign-loc { font-size: .8rem; }
.ed-sign-card::before {
width: 200px; height: 200px;
top: -90px; right: -70px;
}
.ed-sign-card::after {
width: 160px; height: 160px;
bottom: -80px; left: -60px;
}
}
@media (max-width: 380px) {
.ed-mast-title { font-size: 2.1rem; }
.ed-stat-num { font-size: 3.4rem; }
.ed-blockquote { font-size: 1.3rem; }
.ed-anti-list li { font-size: .95rem; }
.ed-vs-col { padding: 24px 18px; }
}
/* ============================================
KARİYER (kariyer.php — .kr-*)
============================================ */
.kr-hero { padding: 30px 0 50px; }
.kr-eyebrow {
display: inline-flex;
align-items: center;
gap: 10px;
font-family: 'Urbanist', 'Outfit', sans-serif;
font-size: .78rem;
font-weight: 600;
color: var(--c-accent, #9ca3af);
letter-spacing: .08em;
text-transform: uppercase;
margin-bottom: 18px;
}
.kr-eyebrow-line {
width: 28px; height: 1.5px;
background: var(--c-accent, #9ca3af);
display: inline-block;
}
.kr-title {
font-family: 'Urbanist', 'Outfit', sans-serif;
font-size: clamp(2.1rem, 5vw, 3.4rem);
font-weight: 700;
color: var(--c-primary, #0A0E1A);
letter-spacing: -.025em;
line-height: 1.12;
margin: 0 0 20px;
max-width: 880px;
}
.kr-title .highlight {
color: var(--c-primary, #0A0E1A);
background-image: linear-gradient(transparent 78%, rgba(46, 204, 113, .4) 78%);
background-repeat: no-repeat;
background-size: 100% 100%;
padding: 0 4px;
}
.kr-lead {
font-family: 'Urbanist', 'Outfit', sans-serif;
font-size: 1.05rem;
line-height: 1.7;
color: #4b5563;
max-width: 760px;
margin: 0 0 24px;
}
.kr-meta {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 10px;
font-family: 'Urbanist', 'Outfit', sans-serif;
font-size: .85rem;
color: #6b7280;
padding-top: 18px;
border-top: 1px solid rgba(10, 14, 26, .08);
}
.kr-meta-item { display: inline-flex; align-items: center; gap: 6px; }
.kr-meta-item i { color: var(--c-accent, #9ca3af); font-size: 1rem; }
.kr-meta-sep { color: #d1d5db; }
.kr-section-head {
max-width: 760px;
margin: 0 auto 40px;
text-align: center;
}
.kr-section-head .kr-eyebrow { justify-content: center; }
.kr-h2 {
font-family: 'Urbanist', 'Outfit', sans-serif;
font-size: clamp(1.7rem, 3.2vw, 2.4rem);
font-weight: 700;
color: var(--c-primary, #0A0E1A);
letter-spacing: -.02em;
line-height: 1.2;
margin: 0 0 14px;
}
.kr-h2 .highlight {
color: var(--c-primary, #0A0E1A);
background-image: linear-gradient(transparent 80%, rgba(46, 204, 113, .38) 80%);
background-repeat: no-repeat;
background-size: 100% 100%;
padding: 0 3px;
}
.kr-h2-lead {
font-family: 'Urbanist', 'Outfit', sans-serif;
font-size: 1rem;
line-height: 1.65;
color: #4b5563;
margin: 0;
}
/* CULTURE */
.kr-culture { padding: 60px 0 50px; }
.kr-culture-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 16px;
}
.kr-c {
background: rgba(255, 255, 255, .72);
backdrop-filter: blur(8px);
border: 1px solid rgba(10, 14, 26, .08);
border-radius: 16px;
padding: 26px 22px 22px;
transition: all .3s ease;
position: relative;
overflow: hidden;
}
.kr-c::before {
content: '';
position: absolute;
top: 0; left: 0;
width: 30px; height: 3px;
background: var(--c-accent, #9ca3af);
border-radius: 0 0 4px 0;
transition: width .35s ease;
}
.kr-c:hover {
transform: translateY(-3px);
border-color: rgba(156, 163, 175, .3);
box-shadow: 0 12px 28px rgba(10, 14, 26, .06);
}
.kr-c:hover::before { width: 60px; }
.kr-c-ic {
font-size: 1.6rem;
color: var(--c-accent, #9ca3af);
margin-bottom: 14px;
display: block;
}
.kr-c h3 {
font-family: 'Urbanist', 'Outfit', sans-serif;
font-size: 1.08rem;
font-weight: 700;
color: var(--c-primary, #0A0E1A);
letter-spacing: -.01em;
line-height: 1.3;
margin: 0 0 8px;
}
.kr-c p {
font-family: 'Urbanist', 'Outfit', sans-serif;
font-size: .9rem;
line-height: 1.6;
color: #6b7280;
margin: 0;
}
/* JOBS */
.kr-jobs { padding: 60px 0; }
.kr-job-list {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 16px;
}
.kr-job {
background: rgba(255, 255, 255, .8);
backdrop-filter: blur(8px);
border: 1px solid rgba(10, 14, 26, .08);
border-radius: 18px;
padding: 26px 26px 22px;
transition: all .3s ease;
display: flex;
flex-direction: column;
}
.kr-job:hover {
transform: translateY(-3px);
border-color: rgba(156, 163, 175, .3);
box-shadow: 0 14px 32px rgba(10, 14, 26, .07);
}
.kr-job-head {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 10px;
margin-bottom: 14px;
}
.kr-job-tag {
display: inline-flex;
align-items: center;
font-family: 'Urbanist', 'Outfit', sans-serif;
font-size: .72rem;
font-weight: 700;
color: var(--c-accent, #9ca3af);
background: rgba(156, 163, 175, .12);
padding: 5px 11px;
border-radius: 999px;
letter-spacing: .06em;
text-transform: uppercase;
}
.kr-job-meta {
display: inline-flex;
align-items: center;
gap: 5px;
font-family: 'Urbanist', 'Outfit', sans-serif;
font-size: .78rem;
color: #6b7280;
}
.kr-job-meta i { color: #9ca3af; font-size: .9rem; }
.kr-job-title {
font-family: 'Urbanist', 'Outfit', sans-serif;
font-size: 1.2rem;
font-weight: 700;
color: var(--c-primary, #0A0E1A);
letter-spacing: -.01em;
line-height: 1.25;
margin: 0 0 10px;
}
.kr-job-desc {
font-family: 'Urbanist', 'Outfit', sans-serif;
font-size: .92rem;
line-height: 1.6;
color: #4b5563;
margin: 0 0 18px;
flex-grow: 1;
}
.kr-job-btn {
display: inline-flex;
align-items: center;
gap: 8px;
align-self: flex-start;
background: var(--c-primary, #0A0E1A);
color: #fff;
text-decoration: none;
font-family: 'Urbanist', 'Outfit', sans-serif;
font-weight: 600;
font-size: .88rem;
padding: 10px 18px;
border-radius: 999px;
transition: all .25s ease;
}
.kr-job-btn:hover {
background: var(--c-primary-2);
transform: translateY(-2px);
box-shadow: none;
}
.kr-job-btn i { transition: transform .25s ease; }
.kr-job-btn:hover i { transform: translateX(3px); }
/* CTA */
.kr-cta-section { padding: 30px 0 90px; }
.kr-cta {
background: linear-gradient(135deg, #f7f8fb 0%, #eef5f1 100%);
border: 1px solid #e7ebf0;
border-radius: 22px;
padding: 56px 44px;
text-align: center;
position: relative;
overflow: hidden;
}
.kr-cta::before,
.kr-cta::after {
content: '';
position: absolute;
border-radius: 50%;
pointer-events: none;
}
.kr-cta::before {
width: 280px; height: 280px;
top: -120px; left: -80px;
background: radial-gradient(circle, rgba(156, 163, 175, .18), transparent 70%);
}
.kr-cta::after {
width: 240px; height: 240px;
bottom: -100px; right: -60px;
background: radial-gradient(circle, rgba(156, 163, 175, .12), transparent 70%);
}
.kr-cta-eyebrow {
display: inline-block;
font-family: 'Urbanist', 'Outfit', sans-serif;
font-size: .78rem;
font-weight: 600;
color: var(--c-accent, #9ca3af);
background: rgba(156, 163, 175, .1);
padding: 6px 14px;
border-radius: 999px;
letter-spacing: .08em;
text-transform: uppercase;
margin-bottom: 16px;
position: relative;
}
.kr-cta-title {
font-family: 'Urbanist', 'Outfit', sans-serif;
font-size: clamp(1.5rem, 3vw, 2.1rem);
font-weight: 700;
line-height: 1.2;
color: var(--c-primary, #0A0E1A);
margin: 0 auto 14px;
max-width: 660px;
letter-spacing: -.01em;
position: relative;
}
.kr-cta-title .highlight {
color: var(--c-primary, #0A0E1A);
background-image: linear-gradient(transparent 78%, rgba(46, 204, 113, .4) 78%);
background-repeat: no-repeat;
background-size: 100% 100%;
padding: 0 4px;
}
.kr-cta-lead {
font-family: 'Urbanist', 'Outfit', sans-serif;
font-size: 1rem;
line-height: 1.65;
color: #4b5563;
max-width: 580px;
margin: 0 auto 26px;
position: relative;
}
.kr-cta-actions {
display: inline-flex;
align-items: center;
gap: 12px;
flex-wrap: wrap;
justify-content: center;
position: relative;
}
.kr-cta-btn-primary,
.kr-cta-btn-ghost {
display: inline-flex;
align-items: center;
gap: 8px;
font-family: 'Urbanist', 'Outfit', sans-serif;
font-weight: 600;
font-size: .95rem;
padding: 14px 24px;
border-radius: 999px;
text-decoration: none;
transition: all .25s ease;
}
.kr-cta-btn-primary { background: var(--c-primary, #0A0E1A); color: #fff; }
.kr-cta-btn-primary:hover {
transform: translateY(-2px);
box-shadow: 0 12px 28px rgba(10, 14, 26, .25);
}
.kr-cta-btn-ghost {
background: #fff;
color: var(--c-primary, #0A0E1A);
border: 1.5px solid #e5e7eb;
}
.kr-cta-btn-ghost:hover { border-color: var(--c-primary, #0A0E1A); }
/* AÇIK POZİSYON YOK — boş durum */
/* ── kariyer · boş durum: sade, ortalı ── */
.kr-empty {
max-width: 540px;
margin: clamp(10px, 2vw, 24px) auto 0;
padding: clamp(36px, 4vw, 56px) clamp(28px, 4vw, 44px);
text-align: center;
}
.kr-empty-title {
margin: 0 0 12px;
font-family: 'Urbanist', 'Outfit', sans-serif;
font-size: clamp(1.5rem, 2.8vw, 2rem);
font-weight: 800;
color: var(--c-text);
letter-spacing: -.025em;
line-height: 1.18;
}
.kr-empty-title .highlight { color: var(--c-accent); }
.kr-empty-lead {
margin: 0 auto 28px;
max-width: 440px;
font-size: 1rem;
color: var(--c-muted);
line-height: 1.68;
}
.kr-empty-btn {
display: inline-flex;
align-items: center;
gap: 9px;
padding: 14px 28px;
background: var(--c-accent);
color: #fff;
border: none;
border-radius: 999px;
font-family: 'Urbanist', 'Outfit', sans-serif;
font-size: .96rem;
font-weight: 600;
cursor: pointer;
transition: background var(--transition), transform var(--transition), box-shadow var(--transition);
letter-spacing: -.005em;
box-shadow: none;
}
.kr-empty-btn {
background: var(--c-primary);
}
.kr-empty-btn:hover {
background: var(--c-primary-2);
transform: translateY(-2px);
box-shadow: none;
}
.kr-empty-btn i { font-size: 1rem; transition: transform .25s ease; }
.kr-empty-btn:hover i { transform: translateX(3px); }
/* RESPONSIVE */
@media (max-width: 960px) {
.kr-culture-grid { grid-template-columns: repeat(2, 1fr); }
.kr-job-list { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
/* Hero */
.kr-hero { padding: 14px 0 36px; }
.kr-eyebrow {
font-size: .68rem;
gap: 8px;
margin-bottom: 14px;
letter-spacing: .1em;
}
.kr-eyebrow-line { width: 22px; }
.kr-title {
font-size: clamp(1.85rem, 8vw, 2.4rem);
line-height: 1.15;
letter-spacing: -.03em;
margin: 0 0 14px;
}
.kr-title .highlight { padding: 0 3px; }
.kr-lead {
font-size: .98rem;
line-height: 1.65;
margin: 0 0 18px;
}
.kr-meta {
font-size: .8rem;
padding-top: 14px;
gap: 8px;
}
.kr-meta-sep { display: none; }
.kr-meta-item { flex-basis: auto; }
.kr-meta-item i { font-size: .92rem; }
/* Section head */
.kr-section-head { margin: 0 auto 26px; }
.kr-h2 {
font-size: clamp(1.55rem, 7vw, 2rem);
line-height: 1.18;
margin: 0 0 12px;
}
.kr-h2-lead { font-size: .94rem; line-height: 1.6; }
/* Jobs */
.kr-jobs { padding: 36px 0 44px; }
.kr-job {
padding: 22px 20px 20px;
border-radius: 14px;
}
.kr-job-head { gap: 8px; margin-bottom: 12px; }
.kr-job-tag {
font-size: .66rem;
padding: 4px 10px;
}
.kr-job-meta { font-size: .74rem; }
.kr-job-meta i { font-size: .85rem; }
.kr-job-title {
font-size: 1.1rem;
margin: 0 0 8px;
}
.kr-job-desc {
font-size: .9rem;
line-height: 1.55;
margin: 0 0 16px;
}
.kr-job-btn {
padding: 11px 20px;
font-size: .85rem;
align-self: stretch;
justify-content: center;
}
/* Culture (varsa) */
.kr-culture { padding: 36px 0 32px; }
.kr-culture-grid { grid-template-columns: 1fr; }
.kr-c { padding: 22px 20px 18px; }
.kr-c-ic { font-size: 1.4rem; margin-bottom: 10px; }
.kr-c h3 { font-size: 1.02rem; }
.kr-c p { font-size: .88rem; }
/* CTA */
.kr-cta-section { padding: 20px 0 56px; }
.kr-cta { padding: 36px 22px; border-radius: 16px; }
.kr-cta-actions { flex-direction: column; align-items: stretch; width: 100%; }
.kr-cta-btn-primary,
.kr-cta-btn-ghost { justify-content: center; }
/* Empty state */
.kr-empty {
padding: clamp(28px, 5vw, 38px) clamp(22px, 4vw, 30px);
border-radius: 18px;
margin: 12px 0 0;
}
.kr-empty-lead {
font-size: .96rem;
line-height: 1.6;
}
.kr-empty-btn {
padding: 13px 24px;
font-size: .92rem;
}
}
@media (max-width: 380px) {
.kr-title { font-size: 1.7rem; }
.kr-h2 { font-size: 1.45rem; }
.kr-job-title { font-size: 1.04rem; }
}
/* Bottom CTA */
.ap-cta-section { padding: 0 0 90px; }
.ap-cta {
background: linear-gradient(135deg, #f7f8fb 0%, #eef5f1 100%);
border: 1px solid #e7ebf0;
border-radius: 22px;
padding: 56px 44px;
text-align: center;
position: relative;
overflow: hidden;
}
.ap-cta::before,
.ap-cta::after {
content: '';
position: absolute;
border-radius: 50%;
pointer-events: none;
}
.ap-cta::before {
width: 280px; height: 280px;
top: -120px; left: -80px;
background: radial-gradient(circle, rgba(156, 163, 175, .18), transparent 70%);
}
.ap-cta::after {
width: 240px; height: 240px;
bottom: -100px; right: -60px;
background: radial-gradient(circle, rgba(156, 163, 175, .12), transparent 70%);
}
.ap-cta-eyebrow {
display: inline-block;
font-family: 'Urbanist', 'Outfit', sans-serif;
font-size: .78rem;
font-weight: 600;
color: var(--c-accent, #9ca3af);
background: rgba(156, 163, 175, .1);
padding: 6px 14px;
border-radius: 999px;
letter-spacing: .08em;
text-transform: uppercase;
margin-bottom: 16px;
position: relative;
}
.ap-cta-title {
font-family: 'Urbanist', 'Outfit', sans-serif;
font-size: clamp(1.5rem, 3vw, 2.1rem);
font-weight: 700;
line-height: 1.2;
color: var(--c-primary, #0A0E1A);
margin: 0 0 16px;
max-width: 660px;
margin-inline: auto;
letter-spacing: -.01em;
position: relative;
}
.ap-cta-title .highlight {
color: var(--c-primary, #0A0E1A);
background-image: linear-gradient(transparent 78%, rgba(46, 204, 113, .35) 78%);
background-repeat: no-repeat;
background-size: 100% 100%;
}
.ap-cta-lead {
font-family: 'Urbanist', 'Outfit', sans-serif;
font-size: 1rem;
line-height: 1.65;
color: #4b5563;
max-width: 600px;
margin: 0 auto 28px;
position: relative;
}
.ap-cta-actions {
display: inline-flex;
align-items: center;
gap: 12px;
flex-wrap: wrap;
justify-content: center;
position: relative;
}
.ap-cta-btn-primary,
.ap-cta-btn-ghost {
display: inline-flex;
align-items: center;
gap: 8px;
font-family: 'Urbanist', 'Outfit', sans-serif;
font-weight: 600;
font-size: .95rem;
padding: 14px 24px;
border-radius: 999px;
text-decoration: none;
transition: all .25s ease;
}
.ap-cta-btn-primary {
background: var(--c-primary, #0A0E1A);
color: #fff;
}
.ap-cta-btn-primary:hover {
transform: translateY(-2px);
box-shadow: 0 12px 28px rgba(10, 14, 26, .25);
}
.ap-cta-btn-ghost {
background: #fff;
color: var(--c-primary, #0A0E1A);
border: 1.5px solid #e5e7eb;
}
.ap-cta-btn-ghost:hover {
border-color: var(--c-primary, #0A0E1A);
}
/* Responsive */
@media (max-width: 960px) {
.ap-values { grid-template-columns: repeat(2, 1fr); }
.ap-pillars { grid-template-columns: 1fr; }
.ap-why { grid-template-columns: 1fr; gap: 30px; }
.ap-why-list { grid-template-columns: 1fr; }
.ap-hero-foot { grid-template-columns: 1fr; gap: 24px; }
.ap-hero-mark {
align-items: flex-start;
text-align: left;
border-left: none;
border-top: 2px solid rgba(156, 163, 175, .5);
padding-left: 0;
padding-top: 14px;
}
.ap-manifesto-list { grid-template-columns: 1fr; gap: 24px; }
.ap-mile-grid { grid-template-columns: repeat(2, 1fr); }
.ap-timeline { grid-template-columns: repeat(2, 1fr); row-gap: 36px; }
.ap-timeline::before { display: none; }
.ap-bento { grid-template-columns: repeat(2, 1fr); grid-auto-rows: minmax(200px, auto); }
.ap-b-feat { grid-column: span 2; }
.ap-promise-card { padding: 60px 32px 44px; }
}
@media (max-width: 600px) {
.ap-values { grid-template-columns: 1fr; }
.ap-meta-sep { display: none; }
.ap-cta { padding: 40px 22px; border-radius: 18px; }
.ap-cta-actions { flex-direction: column; align-items: stretch; width: 100%; }
.ap-cta-btn-primary,
.ap-cta-btn-ghost { justify-content: center; }
.ap-section-head { margin-bottom: 36px; }
.ap-display { font-size: clamp(2rem, 9vw, 2.8rem); }
.ap-mile-grid { grid-template-columns: 1fr; }
.ap-timeline { grid-template-columns: 1fr; }
.ap-bento { grid-template-columns: 1fr; }
.ap-b-feat { grid-column: span 1; }
.ap-promise-card { padding: 56px 22px 38px; border-radius: 18px; }
.ap-promise-mark { font-size: 5rem; top: 8px; }
.ap-hero-meta { gap: 6px; }
}
/* ==================== MOBILE — HERO (iPhone 375-430px) ==================== */
@media (max-width: 600px) {
.hero {
padding: calc(var(--header-h) + 60px) 0 36px;
}
.hero.hero-svg .container {
min-height: auto;
padding-left: 18px;
padding-right: 18px;
}
.hero-text {
max-width: 100%;
}
.hero-text h1 {
font-size: clamp(2rem, 9vw, 2.6rem);
letter-spacing: -0.015em;
margin-bottom: 18px;
line-height: 1.08;
}
.hero-text h1 .highlight::after {
height: .26em;
}
.hero-text p.lead {
font-size: .98rem;
line-height: 1.6;
margin-bottom: 24px;
max-width: 100%;
}
.hero-actions {
gap: 10px;
}
.hero-actions .btn-lg {
padding: 14px 26px;
font-size: .95rem;
}
.hero-rings {
width: 280px;
opacity: 1;
}
.svg-arrow { width: 56px; top: 9%; left: 3%; opacity: .5; }
.svg-hear { width: 64px; top: 5%; right: 3%; opacity: .5; }
}
@media (max-width: 380px) {
.hero {
padding: calc(var(--header-h) + 50px) 0 30px;
}
.hero-text h1 {
font-size: 1.85rem;
}
.hero-text p.lead {
font-size: .92rem;
}
.hero-rings {
width: 230px;
}
.svg-arrow { width: 46px; }
.svg-hear { width: 54px; }
}
/* ==================== MOBILE — HİZMETLER SLIDER ==================== */
@media (max-width: 600px) {
.services-slider-section {
padding: 24px 0 56px;
}
.services-swiper {
padding: 6px 0;
}
.ss-card {
padding: 24px 22px 26px;
border-radius: 18px;
}
.services-slider-section .ss-card {
padding: 32px 24px 28px;
border-radius: 22px;
}
.services-slider-section .ss-illu {
margin-bottom: 22px;
}
.services-slider-section .ss-title {
font-size: 1.08rem;
margin-bottom: 16px;
}
.ss-illu {
aspect-ratio: 4 / 3;
margin-bottom: 18px;
}
.ss-illu-img {
max-width: 280px;
}
.ss-illu i {
font-size: 3.6rem;
}
.ss-title {
font-size: 1.05rem;
margin-bottom: 10px;
}
.ss-link {
font-size: .9rem;
}
.services-pagination {
margin-top: 22px;
}
.services-pagination .swiper-pagination-bullet {
width: 7px;
height: 7px;
}
.services-pagination .swiper-pagination-bullet-active {
width: 20px;
}
}
/* ==================== MOBILE — TRAFİK & SATIŞ ==================== */
@media (max-width: 600px) {
.traffic-section {
padding: 8px 0 56px;
}
.traffic-grid {
gap: 40px;
}
.traffic-title {
font-size: clamp(1.8rem, 7.6vw, 2.3rem);
letter-spacing: -0.012em;
line-height: 1.1;
margin-bottom: 16px;
}
.traffic-title .highlight::after {
height: .24em;
}
.traffic-lead {
font-size: .98rem;
line-height: 1.6;
margin-bottom: 28px;
max-width: 100%;
}
.traffic-stats {
gap: 24px 28px;
max-width: 100%;
}
.ts-num {
font-size: clamp(1.9rem, 8vw, 2.4rem);
margin-bottom: 4px;
}
.ts-lbl {
font-size: .7rem;
letter-spacing: .06em;
line-height: 1.35;
}
.traffic-visual img {
max-width: 420px;
width: 100%;
}
}
@media (max-width: 380px) {
.traffic-stats {
gap: 20px 18px;
}
.ts-num {
font-size: 1.75rem;
}
.ts-lbl {
font-size: .65rem;
}
}
/* ==================== MOBILE — FOOTER (ortalı) ==================== */
@media (max-width: 720px) {
.site-footer { padding: 40px 0 28px; text-align: center; }
/* tek kolon, her şey ortalı */
.footer-top {
grid-template-columns: 1fr;
gap: 32px;
padding-bottom: 30px;
justify-items: center;
}
.footer-brand {
grid-column: 1 / -1;
display: flex;
flex-direction: column;
align-items: center;
}
/* logo: sol accent çubuğu + padding kaldır, ortala */
.footer-brand .footer-logo { padding-left: 0; margin: 0 0 16px; justify-content: center; }
.footer-brand .footer-logo::before { display: none; }
.footer-brand p { max-width: 330px; margin: 0 auto; }
.footer-socials { justify-content: center; margin-top: 18px; }
/* kolonlar — başlık + linkler ortalı */
.footer-col { text-align: center; width: 100%; }
.footer-col::before { display: none; }
.footer-col h4 { margin-bottom: 14px; justify-content: center; }
.footer-col h4::after { left: 50%; transform: translateX(-50%); }
.footer-col ul { justify-items: center; }
.footer-col ul a { padding-left: 0 !important; }
.footer-col ul a::before { display: none; } /* hover kayan ok ortalamayı bozmasın */
/* iletişim satırları (ikon + metin) ortalı */
.footer-col-contact li,
.footer-col-contact a { justify-content: center; }
/* adres de diğerleri gibi: ikon solda satır içi, grup ortalı (metin dar sarılır) */
.footer-col-contact .footer-col-addr {
flex-direction: row;
align-items: center;
gap: 11px;
text-align: left;
padding-left: 28px; /* sadece adres hafif sağa */
}
.footer-col-contact .footer-col-addr span { display: inline-block; max-width: 280px; }
.site-footer::after { display: none; }
.footer-bottom {
flex-direction: column;
gap: 14px;
text-align: center;
font-size: .8rem;
}
.footer-bottom .footer-totop { position: static; transform: none; }
.footer-bottom .footer-totop:hover { transform: translateY(-3px); }
}
/* ============================================
HİZMET DETAY (hizmet.php) — mobile pass
============================================ */
@media (max-width: 600px) {
/* Breadcrumb — uzun servis adları tek satıra sığsın */
.about-crumb { padding: 20px 0 14px; }
.about-crumb .container { gap: 8px; font-size: .74rem; flex-wrap: nowrap; }
.ab-crumb-dot { width: 5px; height: 5px; box-shadow: 0 0 0 3px rgba(156, 163, 175,.15); flex-shrink: 0; }
.ab-crumb-home { flex-shrink: 0; }
.ab-crumb-current { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Hero */
.sd-hero { padding: 24px 0 50px; }
.sd-hero-wrap { gap: 28px; }
/* Grid item'ların min-width: auto'sunu kır — mockup içeriği grid'i taşırmasın */
.sd-hero-text, .sd-hero-visual { min-width: 0; }
.sd-title { font-size: clamp(1.85rem, 8vw, 2.3rem); margin-bottom: 16px; word-break: break-word; }
.sd-lead { font-size: .96rem; line-height: 1.7; margin-bottom: 22px; max-width: 100%; overflow-wrap: anywhere; }
.sd-cta-row { gap: 8px; margin-bottom: 28px; justify-content: flex-start; flex-wrap: nowrap; }
.sd-btn { padding: 11px 16px; font-size: .88rem; white-space: nowrap; gap: 6px; }
.sd-btn i { font-size: .9rem; }
.sd-stats { gap: 18px 24px; padding-top: 20px; }
.sd-stat { flex: 1 1 calc(50% - 12px); min-width: 0; }
.sd-stat strong { font-size: 1.3rem; margin-bottom: 4px; }
.sd-stat span { font-size: .76rem; }
/* Hero visual — mac + phone birlikte, mobil ölçekte */
.sd-hero-visual { min-height: 340px; max-width: 100%; }
.device-mac { max-width: 100%; min-width: 0; width: 100%; }
.device-phone { width: 160px; right: -6px; bottom: -14px; padding: 4px; border-radius: 22px; }
.device-phone-frame { border-radius: 18px; }
.device-phone-island { width: 52px; height: 13px; top: 5px; }
.sd-hero-blob { display: none; }
/* Mockup içeriklerini desktop oranlarında render et + scale ile sığdır
(yazılar küçük + yoğun = gerçek ekran görüntüsü hissi) */
.device-mac-display > div {
transform-origin: top left;
transform: scale(0.45);
width: 222.22%; /* 100 / 0.45 */
height: 222.22%;
}
.device-phone-display > div {
transform-origin: top left;
transform: scale(0.62);
width: 161.29%; /* 100 / 0.62 */
height: 161.29%;
}
/* Section head ortak */
.sd-h2 { font-size: clamp(1.55rem, 6.5vw, 1.95rem); margin-bottom: 12px; }
.sd-h2-lead { font-size: .94rem; line-height: 1.7; }
.sd-section-head { margin-bottom: 32px; }
/* Caps */
.sd-caps { padding: 50px 0 56px; }
.sd-caps-grid { gap: 14px; }
.sd-cap-card { padding: 22px 20px 20px; }
.sd-cap-ic { width: 40px; height: 40px; font-size: 1.2rem; margin-bottom: 12px; }
.sd-cap-card h3 { font-size: 1.02rem; margin-bottom: 8px; }
.sd-cap-card p { font-size: .9rem; line-height: 1.6; }
/* Compare — 720px breakpoint zaten çalışıyor, sadece padding sıkıştır */
.sd-compare { padding: 50px 0 16px; }
.sd-compare-table { border-radius: 16px; }
.sd-compare-cell { padding: 12px 16px; font-size: .86rem; }
.sd-compare-feat { font-size: .82rem !important; padding: 10px 16px !important; }
.sd-compare-us-tag { font-size: .68rem; padding: 4px 10px; }
.sd-compare-other i, .sd-compare-us i { width: 20px; height: 20px; font-size: .62rem; }
/* Process */
.sd-process { padding: 50px 0 56px; }
.sd-steps { gap: 12px; }
.sd-step { padding: 18px 16px 20px; }
.sd-step-num { font-size: .76rem; padding: 4px 10px; margin-bottom: 12px; }
.sd-step h4 { font-size: .98rem; }
.sd-step p { font-size: .85rem; }
/* Guard */
.sd-guard { padding: 50px 0 56px; }
.sd-guard-grid { gap: 14px; }
.sd-guard-card { padding: 22px 22px 20px; }
.sd-guard-ic { width: 42px; height: 42px; font-size: 1.25rem; margin-bottom: 14px; }
.sd-guard-card h4 { font-size: 1rem; }
.sd-guard-card p { font-size: .9rem; line-height: 1.6; }
/* FAQ — zaten mevcut 600px var, ek tweak'ler */
.sd-faq-wrap { gap: 24px; }
.sd-faq-list { gap: 10px; }
.sd-faq-item summary { gap: 10px; }
.sd-faq-item p { font-size: .92rem; line-height: 1.7; }
.sd-faq-ic { width: 26px; height: 26px; font-size: 1rem; }
/* bs-strip — zaten 540px var ama 600px'te boşluğu azalt */
.bs-strip { padding: 40px 0 32px; }
}
@media (max-width: 380px) {
.sd-title { font-size: 1.7rem; }
.sd-h2 { font-size: 1.45rem; }
.sd-cta-row .sd-btn { font-size: .82rem; padding: 10px 12px; }
.sd-cta-row { gap: 6px; }
.sd-stat strong { font-size: 1.2rem; }
.device-phone { width: 140px; bottom: -8px; }
.sd-hero-visual { min-height: 300px; }
.sd-compare-cell { padding: 10px 12px; font-size: .82rem; }
.sd-compare-us-tag { font-size: .64rem; padding: 3px 8px; }
}
/* ============================================
MARKALARIMIZ (markalarimiz.php) — mobile pass
============================================ */
@media (max-width: 600px) {
.brands-intro { padding: 36px 0 16px; }
.brands-page-title {
font-size: clamp(1.7rem, 7.5vw, 2.2rem);
line-height: 1.2;
margin-bottom: 18px;
}
.brands-page-lead { font-size: .94rem; line-height: 1.7; }
.brands-list-section { padding: 40px 0 60px; }
.brands-sub-title { font-size: clamp(1.5rem, 6.5vw, 1.9rem); margin-bottom: 12px; }
.brands-sub-lead { font-size: .92rem; line-height: 1.65; margin-bottom: 32px; }
/* Grid — 600px altında 2 sütun (mevcut 540 breakpoint'i 600'e çıkar) */
.brands-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; }
.brand-card { padding: 8px 6px; border-radius: 12px; }
.brand-card img { max-height: 104px; }
.brand-fallback { font-size: .9rem; }
/* Boş durum */
.blog-empty { padding: 50px 24px; }
.blog-empty-title { font-size: 1.6rem; }
.blog-empty-lead { font-size: .94rem; }
}
@media (max-width: 380px) {
.brands-page-title { font-size: 1.55rem; }
.brands-sub-title { font-size: 1.4rem; }
.brand-card { padding: 6px 4px; }
.brand-card img { max-height: 90px; }
}
/* ============================================
BLOG (blog.php) — mobile pass
============================================ */
@media (max-width: 600px) {
/* Intro */
.blog-intro { padding: 36px 0 28px; }
.blog-intro-title {
font-size: clamp(1.7rem, 7.5vw, 2.2rem);
line-height: 1.2;
margin-bottom: 16px;
}
.blog-intro-lead { font-size: .94rem; line-height: 1.7; }
/* List */
.blog-list { padding: 8px 0 60px; }
.blog-list-grid { gap: 24px; }
/* Card */
.blog-card { border-radius: 12px; }
.blog-card-body { padding: 20px 20px 22px; gap: 10px; }
.blog-card-title { font-size: 1.04rem; line-height: 1.32; }
.blog-card-excerpt { font-size: .9rem; line-height: 1.6; -webkit-line-clamp: 3; }
.blog-card-readmore { font-size: .86rem; }
.blog-card-date,
.blog-card-time {
font-size: .7rem;
padding: 5px 10px;
}
.blog-card-date { top: 10px; left: 10px; }
.blog-card-time { top: 10px; right: 10px; }
/* Pagination — küçük gap, küçük buton, wrap'a izin ver */
.blog-pager { margin-top: 44px; gap: 4px; flex-wrap: wrap; }
.blog-pager a, .blog-pager span {
min-width: 36px;
height: 36px;
padding: 0 10px;
font-size: .85rem;
border-radius: 8px;
}
}
@media (max-width: 380px) {
.blog-intro-title { font-size: 1.55rem; }
.blog-card-body { padding: 18px 16px 20px; }
.blog-card-title { font-size: 1rem; }
.blog-pager a, .blog-pager span { min-width: 32px; height: 32px; padding: 0 8px; font-size: .8rem; }
}
/* ============================================
İLETİŞİM (iletisim.php) — mobile pass
============================================ */
@media (max-width: 600px) {
/* Hero */
.cp-hero { padding: 24px 0 18px; }
.cp-eyebrow { font-size: .72rem; padding: 5px 12px; margin-bottom: 14px; }
.cp-title { font-size: clamp(1.7rem, 7.5vw, 2.2rem); margin-bottom: 14px; line-height: 1.18; }
.cp-lead { font-size: .96rem; line-height: 1.6; margin-bottom: 18px; }
.cp-meta {
gap: 8px 14px;
font-size: .78rem;
padding-top: 14px;
flex-direction: column;
align-items: flex-start;
}
.cp-meta-sep { display: none; }
/* Channels */
.cp-channels-section { padding: 16px 0 8px; }
.cp-ch { padding: 18px 18px; border-radius: 14px; }
.cp-ch-ic { width: 38px; height: 38px; font-size: 1.05rem; margin-bottom: 10px; }
.cp-ch-lbl { font-size: .72rem; }
.cp-ch-val { font-size: .96rem; }
.cp-ch-go { font-size: .82rem; }
/* Form section */
.cp-form-section { padding: 30px 0 50px; }
.cp-grid { gap: 18px; }
/* Info panel */
.cp-info { padding: 26px 20px; border-radius: 14px; }
.cp-info-eyebrow { font-size: .68rem; margin-bottom: 12px; }
.cp-info-title { font-size: 1.3rem; margin-bottom: 10px; }
.cp-info-lead { font-size: .92rem; line-height: 1.6; margin-bottom: 22px; }
.cp-info-list { gap: 14px; }
.cp-info-item strong { font-size: .96rem; }
.cp-info-item span { font-size: .85rem; }
.cp-info-ic { width: 28px; height: 28px; font-size: 1rem; }
.cp-info-divider { margin: 22px 0; }
.cp-info-row { gap: 14px; }
.cp-info-lbl { font-size: .76rem; }
.cp-info-val { font-size: .9rem; }
.cp-info-social { margin-top: 22px; padding-top: 22px; }
.cp-social-icons a { width: 36px; height: 36px; font-size: 1rem; }
/* Form */
.cp-form-wrap { padding: 24px 18px; border-radius: 14px; }
.cp-form-head { margin-bottom: 18px; }
.cp-form-eyebrow { font-size: .72rem; }
.cp-form-title { font-size: 1.18rem; }
.cp-form-lead { font-size: .9rem; line-height: 1.55; }
.cp-form { gap: 12px; }
.cp-row { grid-template-columns: 1fr; gap: 12px; }
.cp-fl { font-size: .82rem; }
.cp-field input, .cp-field textarea {
font-size: 16px; /* iOS zoom önle */
padding: 11px 14px;
}
.cp-kvkk { align-items: flex-start; gap: 10px; }
.cp-kvkk input { margin-top: 2px; flex-shrink: 0; }
.cp-kvkk span { font-size: .85rem; line-height: 1.5; }
.cp-submit { padding: 13px 22px; font-size: .94rem; }
.cp-alert { padding: 12px 14px; font-size: .88rem; }
/* Map */
.cp-map-section { padding: 0 0 60px; }
.cp-map iframe, .cp-map-wrap iframe { min-height: 320px !important; }
}
@media (max-width: 380px) {
.cp-title { font-size: 1.55rem; }
.cp-info-title { font-size: 1.18rem; }
.cp-form-title { font-size: 1.08rem; }
.cp-ch { padding: 16px 14px; }
.cp-info { padding: 22px 16px; }
.cp-form-wrap { padding: 20px 14px; }
}
/* ==================== HEADER MOBILE PASS ==================== */
@media (max-width: 600px) {
:root { --header-h: 64px; }
/* Container: logo sol — sağda [Teklif Al][hamburger] (piksel mantığı) */
.site-header .container {
justify-content: flex-start;
align-items: center;
position: relative;
gap: 8px;
padding-left: 16px;
padding-right: 12px;
}
/* İlk girişte (scroll yokken): beyaz kapsülü kaldır, sayfayla kaynaş */
.site-header:not(.scrolled) .container {
background: transparent;
border-color: transparent;
box-shadow: none;
backdrop-filter: none;
-webkit-backdrop-filter: none;
}
/* Scroll edince: yüzen YUVARLAK kapsül değil → tam-genişlik KÖŞELİ bar, üste yapışık
(piksel.agency mantığı — mobilde yuvarlak kapsül kötü duruyordu) */
.site-header.scrolled { padding: 0; height: var(--header-h); }
.site-header.scrolled .container {
border-radius: 0;
border-left: 0; border-right: 0; border-top: 0;
/* DÜZ beyaz bar — rakip (piksel) gibi: gölge YOK, status bar'ın beyazıyla tek parça akar.
Ayıran kalın gölge "yüzen ayrı çubuk" hissi veriyordu; sadece ince saç-çizgisi kaldı. */
border-bottom: 1px solid rgba(10,14,26,.05);
box-shadow: none;
background: #fff;
backdrop-filter: none;
-webkit-backdrop-filter: none;
}
/* Logo sola yaslı, kalanı sağa iter */
.site-header .header-logo {
font-size: 1.65rem;
margin: 0;
line-height: 1;
order: 0;
margin-right: auto;
}
.site-header .logo img { max-height: 28px; }
/* Teklif Al butonu görünür (mobilde gizliydi) */
.header-right { order: 1; display: inline-flex; }
.site-header .container .btn-cta-pill {
display: inline-flex;
padding: 9px 15px;
font-size: 0.82rem;
}
.btn-cta-pill .cta-label-full { display: none; }
.btn-cta-pill .cta-label-short { display: inline; }
/* Teklif Al: baştan accent dolgulu (ilk girişte de dolu görünsün) */
.site-header .btn-cta-pill,
.site-header.scrolled .btn-cta-pill {
background: var(--c-accent);
border-color: var(--c-accent);
color: #fff;
padding: 9px 15px;
font-size: 0.82rem;
}
.site-header .btn-cta-pill i { color: #fff; }
/* Menü açıkken: HEADER SABİT/OPAK kalır, panelin üstünde durur (panel altından kayar).
KAPANIRKEN DE (.closing) aynı durum sürer: panel yukarı kayma animasyonu (0.3s)
bitene kadar üst kısım sabit/opak kalsın → yoksa açıkken örtmeyen panel,
kapanış animasyonu boyunca logo+Teklif Al'ı geçici örter ("üst kaymıyor" hissi bozulur). */
.site-header:has(.main-nav.open),
.site-header:has(.main-nav.closing) { z-index: 1200; }
.site-header:has(.main-nav.open) .container,
.site-header:has(.main-nav.closing) .container {
background: var(--c-bg, #fff);
/* Köşeli/tam-genişlik bar (scrolled bar ile aynı) — yoksa sayfa tepesinde (scroll yokken)
menü açılınca container'ın varsayılan YUVARLAK köşeleri ortaya çıkıp panel kenarıyla
uyuşmuyor; kapanırken "yuvarlak olup düzeliyor" yanıp-sönmesi bundandı. */
border-radius: 0;
border-left: 0; border-right: 0; border-top: 0;
border-bottom: 1px solid rgba(10, 14, 26, .08);
box-shadow: 0 4px 18px rgba(10, 14, 26, .07);
}
/* ÖNEMLİ: panel (.main-nav z:1100), logo & Teklif Al ile AYNI container içinde kardeş.
Açıkken VE kapanırken panelin üstünde kalsınlar diye z-index ver (yoksa panel onları örter). */
.site-header:has(.main-nav.open) .header-logo,
.site-header:has(.main-nav.open) .header-right,
.site-header:has(.main-nav.closing) .header-logo,
.site-header:has(.main-nav.closing) .header-right {
position: relative;
z-index: 1102;
}
/* Hamburger: en sağda, akışta, temiz */
.nav-toggle {
position: static;
order: 2;
transform: none;
margin: 0;
padding: 8px;
display: flex;
flex-direction: column;
justify-content: center;
width: 42px;
height: 42px;
border-radius: 11px;
z-index: 1101;
transition: background .2s ease;
}
.nav-toggle:active { background: var(--c-bg-soft, #f4f8fb); }
.nav-toggle span {
width: 22px;
height: 2px;
margin: 2.5px 0;
border-radius: 2px;
transition: transform .25s ease, opacity .2s ease;
transform-origin: center;
}
/* Menü açıkken hamburger X'e döner (header'da kalır, tekrar basınca kapatır) */
.site-header:has(.main-nav.open) .nav-toggle span:nth-child(1) {
transform: translateY(6.5px) rotate(45deg);
}
.site-header:has(.main-nav.open) .nav-toggle span:nth-child(2) {
opacity: 0;
}
.site-header:has(.main-nav.open) .nav-toggle span:nth-child(3) {
transform: translateY(-6.5px) rotate(-45deg);
}
/* Panel sağ üst köşede X close butonu */
.main-nav .nav-close {
position: absolute;
top: 14px;
right: 14px;
width: 40px;
height: 40px;
display: flex;
align-items: center;
justify-content: center;
background: transparent;
border: 1px solid var(--c-border);
border-radius: 50%;
color: var(--c-primary);
font-size: 1rem;
cursor: pointer;
z-index: 2;
transition: background .2s ease, border-color .2s ease, transform .2s ease;
}
.main-nav .nav-close:hover {
background: var(--c-bg-soft);
border-color: var(--c-accent);
}
.main-nav .nav-close:active {
transform: scale(.92);
}
/* Mobil panel: header SABİT kalır, panel onun ALTINDAN aşağı kayar.
top:0 + padding-top:header → içerik header'ın ALTINDA başlar; translateY(-100%)
(tam 100dvh) panelin alt kenarını tam y=0'a oturtur → kapalıyken HİÇ sızmaz. */
.main-nav {
left: 0;
right: 0;
top: 0;
height: 100vh;
height: 100dvh;
width: 100%;
max-width: none;
padding: var(--header-h) 0 0; /* içerik header'ın altından başlasın */
background: var(--c-bg, #fff);
border-left: 0;
border-right: 0;
box-shadow: none;
transform: translateY(-100%); /* header'ın arkasından aşağı doğru açılır, kapalıyken tam dışarıda */
transition: transform .34s cubic-bezier(.5, 0, .2, 1); /* KAPANIŞ: temiz, hafif hızlanarak yukarı toplanır */
overflow-y: auto;
overscroll-behavior: contain;
z-index: 1100; /* header (1200) altında kalır */
display: flex;
flex-direction: column;
justify-content: flex-start;
align-items: stretch;
}
.main-nav.open {
transform: translateY(0);
/* AÇILIŞ: daha uzun + yumuşak iniş (easeOutExpo benzeri) → tatlı, süzülerek oturur */
transition: transform .5s cubic-bezier(.16, 1, .3, 1);
}
/* Tatlı içerik belirişi: panel inerken maddeler hafifçe yükselerek yumuşak belirir.
Per-item stagger YOK (kasma sebebiydi) — tüm grup birlikte, ufak gecikmeyle → katmanlı his. */
.main-nav > ul > li,
.main-nav .nav-panel-foot {
opacity: 0;
transform: translateY(12px);
transition: opacity .3s ease, transform .4s cubic-bezier(.16, 1, .3, 1);
}
.main-nav.open > ul > li {
opacity: 1;
transform: none;
transition-delay: .1s; /* panel hareketi başladıktan hemen sonra belirir */
}
/* Alt footer (telefon + Teklif Al) en son, en yumuşak belirir → animasyon sırasında
"pat" diye göze batmaz; kapanırken de ilk o solar. */
.main-nav.open .nav-panel-foot {
opacity: 1;
transform: none;
transition-delay: .2s;
}
@media (prefers-reduced-motion: reduce) {
.main-nav,
.main-nav.open,
.main-nav > ul > li,
.main-nav .nav-panel-foot { transition: none; }
.main-nav > ul > li,
.main-nav .nav-panel-foot { opacity: 1; transform: none; }
}
/* Panel içi logo + X KALDIRILDI — header sabit durduğu için gereksiz */
.main-nav .nav-panel-logo,
.main-nav .nav-close { display: none !important; }
.main-nav > ul { flex: 0 0 auto; }
/* Panel içi logo bölümü */
.main-nav .nav-panel-logo {
display: flex;
align-items: baseline;
text-decoration: none;
font-family: 'Playfair Display', 'Times New Roman', serif;
font-size: 1.85rem;
font-weight: 500;
letter-spacing: -.005em;
line-height: 1;
margin: 0;
padding: 18px 24px 16px;
width: 100%;
position: relative;
}
.main-nav .nav-panel-logo .bl-fil { color: var(--c-primary); }
.main-nav .nav-panel-logo .bl-brace { color: var(--c-primary); font-weight: 400; }
.main-nav .nav-panel-logo .bl-360 { color: var(--c-accent); }
.main-nav .nav-panel-logo img {
display: block;
height: 32px;
width: auto;
max-width: 100%;
object-fit: contain;
}
.main-nav .nav-panel-logo .bl-fil {
color: #0a0e1a;
font-style: normal;
}
.main-nav .nav-panel-logo .bl-brace {
color: #0a0e1a;
font-weight: 400;
font-size: 1.6em;
line-height: .8;
margin: 0 .04em 0 .02em;
transform: translateY(-.02em);
}
.main-nav .nav-panel-logo .bl-360 {
color: #9ca3af;
font-style: normal;
}
.main-nav > ul {
padding: 12px 20px 24px;
gap: 2px;
counter-reset: navi;
}
.main-nav li { border-bottom: 0; }
/* Üst seviye dropdown başlığı = tutarlı tıklanır satır + chevron */
.main-nav .has-dropdown > a {
display: flex !important;
align-items: center;
gap: 12px;
font-size: 1.28rem;
font-weight: 600;
letter-spacing: -.01em;
text-transform: none;
color: var(--c-primary);
padding: 18px 4px;
background: transparent !important;
border-bottom: 1px solid rgba(10, 14, 26, .07);
cursor: pointer;
min-height: 58px;
}
/* İkon çiplerini gizle — sade metin menü (piksel mantığı) */
.main-nav .nav-ico { display: none !important; }
/* Chevron yerine + indikatör; açılınca × (45° döner) */
.main-nav .has-dropdown > a .caret { display: none; }
.main-nav .has-dropdown > a::after {
content: '+' !important;
position: static !important; /* masaüstü underline absolute'undan kurtar */
transform: none !important;
left: auto; right: auto; bottom: auto;
width: auto !important; height: auto !important;
background: none !important;
display: block !important;
margin-left: auto;
margin-right: 0;
font-size: 1.6rem;
font-weight: 300;
line-height: 1;
color: #9aa3b2;
transition: transform .25s ease, color .2s ease;
}
.main-nav .has-dropdown.is-expanded > a { color: var(--c-accent); }
.main-nav .has-dropdown.is-expanded > a::after { transform: rotate(45deg) !important; color: var(--c-accent); }
.main-nav .has-dropdown > a.active { background: transparent !important; }
.main-nav .has-dropdown > a.active::before { display: none; }
/* Submenu + standalone — ortak nav item dili */
.main-nav .submenu {
padding: 4px 0 6px;
margin: 0;
border-left: 0;
}
.main-nav .submenu li,
.main-nav > ul > li:not(.has-dropdown) {
counter-increment: navi;
}
.main-nav .submenu a,
.main-nav > ul > li:not(.has-dropdown) > a {
display: flex;
align-items: center;
gap: 12px;
padding: 18px 4px;
font-size: 1.28rem;
font-weight: 600;
letter-spacing: -.01em;
color: var(--c-primary);
border-radius: 0;
border-bottom: 1px solid rgba(10, 14, 26, .07);
position: relative;
min-height: 58px;
transition: color .2s ease;
}
/* Top-level standalone (Blog/İletişim): sade — sağ ok yok (piksel) */
.main-nav > ul > li:not(.has-dropdown) > a::after { content: none !important; }
/* numara kaldırıldı — tutarlı sade satır */
.main-nav .submenu a::before,
.main-nav > ul > li:not(.has-dropdown) > a::before { content: none; }
/* Sağda kalıcı ok */
.main-nav .submenu a::after,
.main-nav > ul > li:not(.has-dropdown) > a::after {
content: "→";
margin-left: auto;
font-size: 1rem;
color: #9aa3b2;
opacity: 1;
transition: transform .2s ease, color .2s ease;
}
.main-nav .submenu a:active,
.main-nav > ul > li:not(.has-dropdown) > a:active { color: var(--c-accent); }
.main-nav .submenu a:active::after,
.main-nav > ul > li:not(.has-dropdown) > a:active::after { color: var(--c-accent); transform: translateX(3px); }
/* eski ekstra ayraç gereksiz — her öğede zaten hairline var */
.main-nav > ul > li.has-dropdown + li:not(.has-dropdown) {
margin-top: 0;
padding-top: 0;
border-top: 0;
}
/* Aktif sayfa — accent renk + sağdaki ok accent */
.main-nav > ul > li:not(.has-dropdown) > a.active,
.main-nav .has-dropdown > a.active {
background: transparent;
color: var(--c-accent);
}
.main-nav > ul > li:not(.has-dropdown) > a.active::after { color: var(--c-accent); }
/* Menü açıkken header'ı backdrop'un üstüne çıkar (stacking context fix) */
.site-header:has(.main-nav.open) {
z-index: 1101;
}
/* Backdrop (görünmez click-catcher — kararma yok, sadece dış tıkla kapansın) */
.nav-backdrop {
position: fixed;
inset: 0;
background: transparent;
z-index: 1099;
visibility: hidden;
cursor: pointer;
}
.nav-backdrop.show {
visibility: visible;
}
/* Stagger fade-in KALDIRILDI — maddeler panelle birlikte anında gelir (kasma yok) */
/* Panel footer: telefon/email + sosyal ikonlar (sade) */
.main-nav .nav-panel-footer {
margin-top: auto;
padding: 22px 28px 26px;
border-top: 1px solid var(--c-border);
}
.main-nav .npf-contact {
display: flex;
flex-direction: column;
gap: 8px;
margin-bottom: 16px;
}
.main-nav .npf-contact a {
display: flex !important;
align-items: center;
gap: 10px;
font-family: 'Urbanist', 'Outfit', system-ui, sans-serif !important;
font-size: .85rem !important;
font-weight: 500 !important;
letter-spacing: 0 !important;
color: var(--c-primary) !important;
padding: 0 !important;
transform: none !important;
}
.main-nav .npf-contact a:hover {
color: var(--c-accent-2) !important;
transform: none !important;
}
.main-nav .npf-contact i {
width: 14px;
font-size: .85rem;
color: var(--c-accent);
}
.main-nav .npf-socials {
display: flex;
gap: 8px;
justify-content: space-between;
width: 100%;
}
.main-nav .npf-socials a {
width: 32px !important;
height: 32px !important;
display: flex !important;
align-items: center;
justify-content: center;
border-radius: 50%;
border: 1px solid var(--c-border);
background: #fff;
color: var(--c-primary) !important;
font-size: .85rem !important;
padding: 0 !important;
transform: none !important;
transition: background .18s ease, color .18s ease, border-color .18s ease;
}
.main-nav .npf-socials a:hover {
background: var(--c-primary) !important;
color: #fff !important;
border-color: var(--c-primary);
transform: none !important;
}
/* Panel scroll yapısı — footer her zaman altta */
.main-nav {
display: flex;
flex-direction: column;
}
.main-nav > ul { flex: 1 0 auto; }
}
@keyframes navLinkIn {
from { opacity: 0; transform: translateX(-8px); }
to { opacity: 1; transform: translateX(0); }
}
/* Backdrop default: hidden on desktop */
.nav-backdrop { display: none; }
@media (max-width: 600px) {
.nav-backdrop { display: block; }
}
/* Panel logosu sadece mobilde görünür */
.main-nav .nav-panel-logo { display: none; }
@media (max-width: 600px) {
.main-nav .nav-panel-logo { display: inline-flex; }
}
/* Panel footer (contact + social) sadece mobilde görünür */
.main-nav .nav-panel-footer { display: none; }
@media (max-width: 600px) {
.main-nav .nav-panel-footer { display: block; }
}
/* Panel TR/EN switcher — sadece mobilde görünür */
.main-nav .nav-panel-lang { display: none; }
@media (max-width: 600px) {
.main-nav .nav-panel-lang {
display: flex;
gap: 6px;
padding: 5px;
margin: 32px auto 12px;
background: #f5f6f8;
border: 1px solid var(--c-border);
border-radius: 999px;
align-self: center;
width: fit-content;
}
.main-nav .nav-panel-lang-opt {
min-width: 64px;
height: 38px;
padding: 0 18px;
font-size: .9rem;
font-weight: 600;
color: var(--c-muted);
text-decoration: none;
letter-spacing: .04em;
border-radius: 999px;
display: inline-flex;
align-items: center;
justify-content: center;
transition: all .2s ease;
}
.main-nav .nav-panel-lang-opt.is-active {
background: var(--c-primary);
color: #fff;
box-shadow: 0 4px 12px rgba(10, 14, 26, .15);
}
/* Mobilde header'daki TR/EN pill'i gizle — menü içinde göstereceğiz */
.header-lang { display: none !important; }
}
/* Close butonu sadece mobilde görünür */
.main-nav .nav-close { display: none; }
@media (max-width: 600px) {
.main-nav .nav-close { display: flex; }
}
@keyframes navBackdropIn {
from { opacity: 0; }
to { opacity: 1; }
}
@media (max-width: 380px) {
.site-header .header-logo { font-size: 1.5rem; }
.site-header .logo img { max-height: 32px; }
.nav-toggle { left: 4px; padding: 8px; }
.nav-toggle span { width: 20px; }
}
/* ============================================================
ARTICLE / SINGLE POST (yazi.php) — MOBILE PASS
============================================================ */
@media (max-width: 600px) {
/* Hero */
.article-hero { padding: 24px 0 16px; }
.article-title {
font-size: clamp(1.55rem, 6.6vw, 2rem);
line-height: 1.22;
margin: 0 auto 14px;
max-width: 100%;
}
.article-lead {
font-size: .98rem;
line-height: 1.6;
margin: 0 auto 18px;
max-width: 100%;
}
.article-meta {
padding: 8px 14px;
font-size: .76rem;
gap: 5px 10px;
max-width: 100%;
}
.article-meta-item { font-size: .76rem; }
.article-meta-sep { width: 3px; height: 3px; }
/* Cover */
.article-section { padding: 14px 0 36px; }
.article-section .article-cover {
margin: 0 auto 26px;
border-radius: 14px;
}
.article-cover { aspect-ratio: 16 / 10; }
/* Body */
.article-body {
font-size: 1rem;
line-height: 1.75;
max-width: 100%;
}
.article-body > p:first-of-type,
.article-body p.lead {
font-size: 1.05rem;
line-height: 1.55;
margin-bottom: 20px;
}
.article-body p.lead { padding-left: 14px; }
.article-body h2 {
font-size: 1.35rem;
margin: 32px 0 12px;
padding-top: 10px;
line-height: 1.28;
}
.article-body h2::before {
width: 36px;
height: 3px;
top: -6px;
}
.article-body h3 {
font-size: 1.08rem;
margin: 24px 0 10px;
line-height: 1.32;
}
.article-body p { margin: 0 0 16px; }
.article-body img,
.article-body figure img {
margin: 20px 0;
border-radius: 12px;
}
.article-body figure { margin: 26px 0; }
.article-body ul, .article-body ol { margin: 0 0 18px; }
.article-body ul li,
.article-body ol li {
padding: 3px 0 3px 30px;
line-height: 1.62;
margin-bottom: 6px;
}
.article-body ul li::before {
left: 6px;
top: 13px;
width: 7px;
height: 7px;
box-shadow: 0 0 0 3px rgba(156, 163, 175,0.15);
}
.article-body ol li::before {
width: 22px;
height: 22px;
font-size: .72rem;
left: 0;
top: 4px;
}
.article-body blockquote {
margin: 26px 0;
padding: 18px 18px 18px 48px;
font-size: .98rem;
line-height: 1.55;
border-radius: 12px;
}
.article-body blockquote::before {
font-size: 3rem;
top: 6px;
left: 12px;
}
/* Share */
.article-share {
margin: 32px auto 0;
padding: 20px 0 0;
gap: 12px;
flex-direction: column;
align-items: stretch;
}
.article-share-label {
font-size: .88rem;
text-align: left;
}
.article-share-list {
gap: 8px;
width: 100%;
flex-wrap: wrap;
}
.article-share-btn {
padding: 10px 12px;
font-size: .8rem;
gap: 6px;
flex: 1 1 calc(50% - 4px);
justify-content: center;
min-width: 0;
}
.article-share-btn span { white-space: nowrap; }
.article-share-btn:hover {
transform: none;
box-shadow: none;
}
/* Reading progress (daha ince) */
.article-progress { height: 2px; }
/* Related posts (kategoride benzerler) */
.related-posts { padding: 40px 0 24px; }
.related-head { margin-bottom: 24px; }
.related-head .eyebrow {
font-size: .68rem;
letter-spacing: .18em;
padding: 5px 12px;
margin-bottom: 10px;
}
.related-head h2 {
font-size: 1.45rem;
line-height: 1.25;
}
.related-sub { font-size: .9rem; line-height: 1.5; }
/* May like (rastgele derleme) */
.may-like { padding: 40px 0 56px; }
.may-like-head { margin-bottom: 26px; }
.may-like-head .eyebrow {
font-size: .68rem;
letter-spacing: .18em;
padding: 5px 14px;
margin-bottom: 10px;
}
.may-like-head h2 {
font-size: 1.5rem;
line-height: 1.25;
}
.may-like-sub { font-size: .9rem; line-height: 1.5; }
/* Yatay kaydırmalı (swipe) — alt alta yığma yerine */
.may-like-grid {
display: flex;
grid-template-columns: none;
gap: 14px;
margin: 0 -16px 28px;
padding: 4px 16px 16px;
overflow-x: auto;
overflow-y: hidden;
scroll-snap-type: x mandatory;
scroll-padding-left: 16px;
-webkit-overflow-scrolling: touch;
scrollbar-width: none;
}
.may-like-grid::-webkit-scrollbar { display: none; }
.may-like-grid > .may-card {
flex: 0 0 82%;
max-width: 82%;
scroll-snap-align: start;
}
.may-card-body { padding: 18px 18px 22px; gap: 10px; }
.may-card-title { font-size: 1rem; line-height: 1.32; }
.may-card-excerpt { font-size: .87rem; line-height: 1.55; }
.may-card-go { font-size: .82rem; }
.may-card:hover {
transform: none;
box-shadow: 0 6px 14px rgba(10,14,26,0.06);
}
}
@media (max-width: 380px) {
.article-title { font-size: 1.4rem; }
.article-lead { font-size: .94rem; }
.article-meta {
font-size: .72rem;
padding: 7px 12px;
gap: 4px 8px;
}
.article-body { font-size: .96rem; line-height: 1.7; }
.article-body > p:first-of-type,
.article-body p.lead { font-size: 1rem; }
.article-body h2 { font-size: 1.25rem; margin: 26px 0 10px; }
.article-body h3 { font-size: 1rem; }
.article-body blockquote {
padding: 16px 14px 16px 42px;
font-size: .94rem;
}
.article-body blockquote::before {
font-size: 2.6rem;
left: 10px;
top: 4px;
}
/* Daha dar ekranda paylaş butonları tek sütun */
.article-share-btn {
flex: 1 1 100%;
}
.related-head h2 { font-size: 1.3rem; }
.may-like-head h2 { font-size: 1.35rem; }
}
/* ============================================
Kariyer "Başvur" butonu — mobil revize
diğer mobil CTA'larla aynı dil:
full-width, dolgun lacivert, ok nudge,
tap-friendly padding + soft shadow
============================================ */
@media (max-width: 600px) {
.kr-job {
padding: 22px 20px 18px;
}
.kr-job-btn {
margin-top: 4px;
align-self: stretch;
justify-content: center;
gap: 10px;
padding: 14px 22px;
font-size: .95rem;
font-weight: 600;
letter-spacing: .01em;
border-radius: 14px;
background: var(--c-primary, #0A0E1A);
color: #fff;
box-shadow: 0 8px 18px rgba(10, 14, 26, .18);
position: relative;
overflow: hidden;
}
.kr-job-btn::after {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(135deg, rgba(255, 255, 255, .08) 0%, rgba(255, 255, 255, 0) 60%);
pointer-events: none;
}
.kr-job-btn i {
font-size: 1rem;
transition: transform .25s ease;
}
.kr-job-btn:active {
transform: translateY(1px);
box-shadow: 0 4px 10px rgba(10, 14, 26, .2);
}
.kr-job-btn:active i {
transform: translateX(4px);
}
/* Empty state başvur butonu da aynı dile uysun */
.kr-empty-btn {
align-self: stretch;
width: 100%;
justify-content: center;
gap: 10px;
padding: 14px 22px;
font-size: .95rem;
border-radius: 14px;
box-shadow: 0 8px 18px rgba(10, 14, 26, .18);
}
.kr-empty-btn:active {
transform: translateY(1px);
box-shadow: 0 4px 10px rgba(10, 14, 26, .2);
}
}
/* ==========================================================
BİZ KİMİZ? — SuperART tarzı scroll-reveal text
========================================================== */
.who-section {
position: relative;
padding: clamp(56px, 8vw, 110px) 0 clamp(48px, 6vw, 80px);
background: var(--c-bg);
overflow: hidden;
isolation: isolate;
}
.who-section::before { display: none; }
.who-section .container { position: relative; z-index: 2; }
.who-section .ar-hero { margin-bottom: clamp(20px, 2.5vw, 36px); }
.who-body-c {
position: relative;
max-width: 820px;
margin: clamp(8px, 1.2vw, 18px) auto 0;
padding: 0 clamp(20px, 3vw, 48px) clamp(24px, 3vw, 40px);
display: flex;
flex-direction: column;
gap: clamp(16px, 2vw, 28px);
isolation: isolate;
}
/* Numaralı paragraf bloku */
.who-para {
position: relative;
display: grid;
grid-template-columns: clamp(56px, 6vw, 84px) 1fr;
gap: clamp(20px, 2.5vw, 36px);
padding: clamp(16px, 2vw, 24px) clamp(0px, 2vw, 24px);
align-items: start;
z-index: 1;
}
/* A) Hairline draw-in — soldan sağa çizilir */
.who-para::before {
content: "";
position: absolute;
top: 0;
left: 0;
right: 0;
height: 1px;
background: rgba(10, 14, 26, 0.12);
transform: scaleX(0);
transform-origin: left center;
transition: transform 1.1s cubic-bezier(.2, .7, .2, 1) .1s;
}
.who-para.visible::before { transform: scaleX(1); }
.who-para:last-of-type::after {
content: "";
position: absolute;
bottom: 0;
left: 0;
right: 0;
height: 1px;
background: rgba(10, 14, 26, 0.12);
transform: scaleX(0);
transform-origin: right center;
transition: transform 1.1s cubic-bezier(.2, .7, .2, 1) .45s;
}
.who-para:last-of-type.visible::after { transform: scaleX(1); }
/* B) Blueprint köşe işaretleri — L-bracket crop marks */
.who-corner {
position: absolute;
width: 22px;
height: 22px;
color: transparent;
opacity: 0;
transform: scale(0.6);
transition: opacity .7s ease .6s, transform .7s cubic-bezier(.34, 1.56, .64, 1) .6s;
pointer-events: none;
z-index: 2;
}
.who-corner::before,
.who-corner::after {
content: "";
position: absolute;
background: var(--c-accent);
}
.who-corner::before { width: 100%; height: 2px; }
.who-corner::after { width: 2px; height: 100%; }
.who-body-c.visible .who-corner {
opacity: 1;
transform: scale(1);
}
.who-corner-tl { top: -2px; left: -2px; }
.who-corner-tl::before { top: 0; left: 0; }
.who-corner-tl::after { top: 0; left: 0; }
.who-corner-tr { top: -2px; right: -2px; }
.who-corner-tr::before { top: 0; right: 0; }
.who-corner-tr::after { top: 0; right: 0; }
.who-corner-bl { bottom: -2px; left: -2px; }
.who-corner-bl::before { bottom: 0; left: 0; }
.who-corner-bl::after { bottom: 0; left: 0; }
.who-corner-br { bottom: -2px; right: -2px; }
.who-corner-br::before { bottom: 0; right: 0; }
.who-corner-br::after { bottom: 0; right: 0; }
/* =============================================================
DX — generic decoration system (reusable crop-marks)
============================================================= */
.dx-frame { position: relative; }
.dx-corner {
position: absolute;
width: 22px;
height: 22px;
color: transparent;
opacity: 0;
transform: scale(0.6);
transition: opacity .7s ease .6s, transform .7s cubic-bezier(.34, 1.56, .64, 1) .6s;
pointer-events: none;
z-index: 5;
}
.dx-corner::before,
.dx-corner::after {
content: "";
position: absolute;
background: var(--c-accent);
}
.dx-corner::before { width: 100%; height: 2px; }
.dx-corner::after { width: 2px; height: 100%; }
.dx-frame.visible .dx-corner { opacity: 1; transform: scale(1); }
.dx-corner-tl { top: -2px; left: -2px; }
.dx-corner-tl::before, .dx-corner-tl::after { top: 0; left: 0; }
.dx-corner-tr { top: -2px; right: -2px; }
.dx-corner-tr::before, .dx-corner-tr::after { top: 0; right: 0; }
.dx-corner-bl { bottom: -2px; left: -2px; }
.dx-corner-bl::before, .dx-corner-bl::after { bottom: 0; left: 0; }
.dx-corner-br { bottom: -2px; right: -2px; }
.dx-corner-br::before, .dx-corner-br::after { bottom: 0; right: 0; }
/* DX hairline — sol-sağ çizilen ince çizgi */
.dx-hair {
position: relative;
height: 1px;
background: rgba(10, 14, 26, 0.12);
transform: scaleX(0);
transform-origin: left center;
transition: transform 1.1s cubic-bezier(.2, .7, .2, 1) .1s;
}
.dx-frame.visible .dx-hair,
.dx-hair.visible { transform: scaleX(1); }
/* DX number eyebrow stamp — sol üst köşede mono kodlama etiketi */
.dx-stamp {
position: absolute;
top: -14px;
left: 12px;
background: #fff;
padding: 0 10px;
font-family: 'JetBrains Mono', ui-monospace, monospace;
font-size: 10px;
font-weight: 700;
letter-spacing: 0.22em;
text-transform: uppercase;
color: var(--c-muted);
z-index: 6;
opacity: 0;
transform: translateY(4px);
transition: opacity .6s ease .9s, transform .6s ease .9s;
}
.dx-stamp .dx-stamp-dot {
display: inline-block;
width: 6px;
height: 6px;
background: var(--c-accent);
border-radius: 50%;
margin-right: 6px;
vertical-align: middle;
transform: translateY(-1px);
}
.dx-frame.visible .dx-stamp { opacity: 1; transform: translateY(0); }
/* ar-block içinde stamp, ar-block-num "01"/"02" ile aynı X'e hizalansın */
.ar-block .dx-stamp {
left: 0;
padding: 0 12px 0 0;
}
/* =============================================================
DX TICKER — section bridge mono scrolling strip
============================================================= */
.dx-ticker {
overflow: hidden;
border-top: 1px solid rgba(10, 14, 26, 0.08);
border-bottom: 1px solid rgba(10, 14, 26, 0.08);
padding: 14px 0;
background: var(--c-bg);
-webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 8%, #000 92%, transparent 100%);
mask-image: linear-gradient(90deg, transparent 0%, #000 8%, #000 92%, transparent 100%);
}
.dx-ticker-track {
display: inline-flex;
align-items: center;
gap: 28px;
white-space: nowrap;
will-change: transform;
animation: dx-ticker-roll 36s linear infinite;
}
.dx-ticker-track > span {
font-family: 'JetBrains Mono', ui-monospace, monospace;
font-size: 12px;
font-weight: 700;
letter-spacing: 0.22em;
text-transform: uppercase;
color: var(--c-muted);
flex-shrink: 0;
}
.dx-ticker-dot { color: var(--c-accent) !important; font-size: 14px !important; }
.dx-ticker-dia { color: var(--c-accent) !important; font-size: 11px !important; opacity: 0.7; }
@keyframes dx-ticker-roll {
from { transform: translateX(0); }
to { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
.dx-ticker-track { animation: none; }
}
/* =============================================================
DX STATUS — fixed bottom-right live pill
============================================================= */
/* Sağ kenar dil değiştirici (TR/EN) */
.lang-fab {
position: fixed;
right: 0;
top: 50%;
transform: translateY(-50%);
z-index: 60;
display: flex;
flex-direction: column;
align-items: center;
gap: 3px;
padding: 7px 6px;
background: #fff;
border: 1px solid var(--c-border);
border-right: 0;
border-radius: 14px 0 0 14px;
box-shadow: -10px 12px 32px -14px rgba(10,14,26,.28), 0 2px 6px rgba(10,14,26,.04);
}
.lang-fab-opt {
display: grid;
place-items: center;
width: 36px; height: 33px;
border-radius: 10px;
font-family: 'Urbanist', 'Outfit', sans-serif;
font-size: .82rem; font-weight: 800; letter-spacing: .03em;
color: var(--c-muted);
text-decoration: none;
transition: background .2s ease, color .2s ease, transform .2s ease;
}
a.lang-fab-opt:hover { background: var(--c-bg-soft); color: var(--c-primary); transform: translateX(-2px); }
.lang-fab-opt.is-active {
background: linear-gradient(150deg, var(--c-accent), var(--c-accent-2));
color: #fff;
box-shadow: 0 6px 14px -6px color-mix(in srgb, var(--c-accent) 60%, transparent);
}
.lang-fab-sep { width: 18px; height: 1px; background: var(--c-border); }
@media (max-width: 600px) {
/* sağ kenar dikey ortada (alt köşeden çekildi) */
.lang-fab { top: 50%; bottom: auto; transform: translateY(-50%); gap: 2px; padding: 6px 5px; }
.lang-fab-opt { width: 32px; height: 30px; font-size: .78rem; }
}
/* ============================================================
WHATSAPP yüzen buton — sağ-alt (chatbot sol-alt ile simetrik)
============================================================ */
.wa-fab {
position: fixed;
right: 24px; bottom: 24px;
z-index: 1000;
width: 60px; height: 60px;
border-radius: 20px;
background: linear-gradient(145deg, #2bd06f 0%, #128C7E 100%);
color: #fff;
display: grid; place-items: center;
text-decoration: none;
box-shadow: 0 6px 16px rgba(10,14,26,0.14);
transition: transform .3s cubic-bezier(.34,1.4,.5,1), box-shadow .3s ease, border-radius .3s ease;
animation: waFloat 5s ease-in-out infinite;
}
.wa-fab i { font-size: 1.85rem; position: relative; z-index: 2; line-height: 1; }
.wa-fab:hover { transform: translateY(-4px) scale(1.05); box-shadow: 0 10px 22px rgba(10,14,26,0.18); border-radius: 24px; }
.wa-fab:active { transform: scale(.95); }
.wa-fab-pulse { display: none; }
.wa-fab-label {
position: absolute;
right: 72px;
background: #128C7E;
color: #fff;
font-family: 'Urbanist', 'Outfit', sans-serif;
font-size: .82rem; font-weight: 600;
padding: 8px 13px;
border-radius: 10px;
white-space: nowrap;
opacity: 0;
transform: translateX(8px);
pointer-events: none;
box-shadow: 0 8px 20px rgba(10,14,26,.18);
transition: opacity .25s ease, transform .25s ease;
}
.wa-fab-label::after {
content: '';
position: absolute;
right: -5px; top: 50%;
transform: translateY(-50%) rotate(45deg);
width: 9px; height: 9px;
background: #128C7E;
border-radius: 2px;
}
.wa-fab:hover .wa-fab-label { opacity: 1; transform: translateX(0); }
@keyframes waPulse {
0% { opacity: .5; transform: scale(1); }
70%,100% { opacity: 0; transform: scale(1.5); }
}
@keyframes waFloat {
0%,100% { transform: translateY(0); }
50% { transform: translateY(-5px); }
}
@media (prefers-reduced-motion: reduce) {
.wa-fab, .wa-fab-pulse { animation: none; }
}
@media (max-width: 600px) {
.wa-fab { width: 54px; height: 54px; right: 16px; bottom: 16px; }
.wa-fab i { font-size: 1.62rem; }
.wa-fab-label { display: none; }
}
.dx-status {
position: fixed;
bottom: 22px;
right: 22px;
display: inline-flex;
align-items: center;
gap: 10px;
padding: 9px 16px 9px 14px;
background: #fff;
border: 1px solid rgba(10, 14, 26, 0.10);
border-radius: 100px;
box-shadow: 0 8px 24px rgba(10, 14, 26, 0.08), 0 2px 6px rgba(10, 14, 26, 0.04);
font-family: 'JetBrains Mono', ui-monospace, monospace;
font-size: 10.5px;
font-weight: 700;
letter-spacing: 0.2em;
text-transform: uppercase;
color: var(--c-text);
z-index: 50;
pointer-events: none;
user-select: none;
opacity: 0;
transform: translateY(8px);
animation: dx-status-in .6s cubic-bezier(.2, .7, .2, 1) 1s forwards;
}
.dx-status-dot {
width: 8px;
height: 8px;
background: var(--c-accent);
border-radius: 50%;
box-shadow: 0 0 0 3px rgba(31, 167, 232, 0.22);
animation: dx-status-pulse 1.8s ease-in-out infinite;
}
@keyframes dx-status-in {
to { opacity: 1; transform: translateY(0); }
}
@keyframes dx-status-pulse {
0%, 100% { box-shadow: 0 0 0 3px rgba(31, 167, 232, 0.22); }
50% { box-shadow: 0 0 0 7px rgba(31, 167, 232, 0); }
}
@media (max-width: 720px) {
.dx-status { display: none; }
}
.who-para-h {
display: flex;
flex-direction: column;
gap: 6px;
position: sticky;
top: 100px;
}
.who-para-n {
font-family: 'Urbanist', 'Outfit', sans-serif;
font-size: clamp(2.2rem, 3.5vw, 3.4rem);
font-weight: 900;
line-height: 0.9;
letter-spacing: -0.02em;
color: var(--c-accent);
display: block;
}
.who-para:nth-of-type(2) .who-para-n { color: var(--c-text); }
.who-para:nth-of-type(2) .who-para-n::after {
content: "";
display: block;
width: 24px;
height: 3px;
background: var(--c-accent);
margin-top: 6px;
border-radius: 2px;
}
.who-para:nth-of-type(1) .who-para-n::after {
content: "";
display: block;
width: 24px;
height: 3px;
background: var(--c-lilac);
margin-top: 6px;
border-radius: 2px;
}
.who-para-l {
font-family: 'JetBrains Mono', ui-monospace, monospace;
font-size: 10.5px;
font-weight: 700;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--c-muted);
max-width: 14ch;
line-height: 1.3;
}
.who-body-c .who-intro {
font-family: 'Urbanist', 'Outfit', sans-serif;
font-size: clamp(15.5px, 1.1vw, 17.5px);
line-height: 1.75;
color: var(--c-muted);
margin: 0;
text-align: left;
}
.who-body-c .who-intro strong {
color: var(--c-text);
font-weight: 700;
background-image: linear-gradient(180deg, transparent 62%, rgba(31, 167, 232, 0.32) 62%, rgba(31, 167, 232, 0.32) 92%, transparent 92%);
background-repeat: no-repeat;
background-position: 0 0;
background-size: 0% 100%;
padding: 0 2px;
transition: background-size 1s cubic-bezier(.2, .7, .2, 1) .55s;
}
.who-para.visible .who-intro strong { background-size: 100% 100%; }
.who-body-c .who-intro .hl {
color: var(--c-accent);
font-weight: 700;
position: relative;
}
.who-body-c .who-intro .hl::after {
content: "";
position: absolute;
left: 0;
right: 0;
bottom: -2px;
height: 2px;
background: var(--c-accent);
opacity: 0.4;
border-radius: 2px;
}
.who-intro sup {
color: var(--c-accent);
font-weight: 700;
font-size: 0.7em;
margin-left: 1px;
}
/* Tooltip — "700'ü aşkın vakada*" üzerine gelince açıklama balonu */
.who-tip {
position: relative;
cursor: help;
outline: none;
}
.who-tip-box {
position: absolute;
bottom: calc(100% + 16px);
left: 50%;
transform: translateX(-50%) translateY(8px) scale(.96);
transform-origin: 50% calc(100% + 8px);
width: 280px;
background: #fff;
color: var(--c-muted);
padding: 14px 16px 14px 20px;
border-radius: 12px;
border: 1px solid rgba(10, 14, 26, 0.08);
font-family: 'Urbanist', 'Outfit', 'Inter', sans-serif;
font-size: 0.78rem;
font-weight: 400;
line-height: 1.55;
letter-spacing: 0.005em;
text-align: left;
opacity: 0;
visibility: hidden;
pointer-events: none;
transition: opacity .22s cubic-bezier(.2,.7,.3,1), transform .22s cubic-bezier(.2,.7,.3,1), visibility .22s;
z-index: 20;
box-shadow: 0 20px 50px rgba(10, 14, 26, .10), 0 4px 12px rgba(10, 14, 26, .05);
text-decoration: none;
white-space: normal;
}
/* Sol kenar accent şerit */
.who-tip-box::before {
content: "";
position: absolute;
left: 0;
top: 14px;
bottom: 14px;
width: 3px;
background: var(--c-accent);
border-radius: 0 3px 3px 0;
}
/* Aşağı bakan ok (rotated kare + border) */
.who-tip-box::after {
content: "";
position: absolute;
top: 100%;
left: 50%;
margin-top: -6px;
transform: translateX(-50%) rotate(45deg);
width: 12px;
height: 12px;
background: #fff;
border-right: 1px solid rgba(10, 14, 26, 0.08);
border-bottom: 1px solid rgba(10, 14, 26, 0.08);
border-bottom-right-radius: 2px;
}
.who-tip:hover .who-tip-box,
.who-tip:focus-visible .who-tip-box {
opacity: 1;
visibility: visible;
transform: translateX(-50%) translateY(0) scale(1);
}
/* sup * işareti tooltip aktifken accent rengini koyulaştır */
.who-tip:hover sup,
.who-tip:focus-visible sup {
color: var(--c-accent-2, var(--c-accent));
}
/* Footer: Caveat scribble + button */
.who-foot {
display: flex;
align-items: center;
justify-content: center;
gap: 24px;
flex-wrap: wrap;
margin-top: clamp(8px, 1.5vw, 20px);
padding: 0 clamp(0px, 2vw, 24px);
position: relative;
z-index: 1;
}
.who-foot-scribble {
font-family: 'Caveat', cursive;
font-size: clamp(28px, 2.8vw, 38px);
font-weight: 600;
color: var(--c-accent);
line-height: 1;
transform: rotate(-3deg);
transform-origin: left center;
display: inline-flex;
align-items: center;
gap: 10px;
}
.who-foot-scribble::before {
content: "—";
font-family: 'Urbanist', 'Outfit', sans-serif;
font-size: 0.55em;
color: var(--c-text);
opacity: 0.4;
transform: rotate(3deg);
}
@media (max-width: 720px) {
.who-para {
grid-template-columns: 1fr;
gap: 12px;
}
.who-para-h {
position: static;
flex-direction: row;
align-items: baseline;
gap: 16px;
}
.who-foot { flex-direction: column; align-items: flex-start; }
.who-stamp { display: none; }
}
.who-grid {
display: grid;
grid-template-columns: minmax(180px, 260px) 1fr;
gap: clamp(32px, 6vw, 96px);
align-items: start;
}
.who-side {
position: sticky;
top: 120px;
}
.who-label {
display: inline-flex;
align-items: center;
gap: 10px;
font-size: 12px;
font-weight: 700;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--c-text);
}
.who-label::before {
content: '';
width: 24px;
height: 2px;
background: var(--c-accent);
border-radius: 2px;
}
.who-content {
max-width: 920px;
}
.who-reveal {
font-family: 'Urbanist', 'Outfit', sans-serif;
font-size: clamp(2rem, 4.2vw, 3.6rem);
font-weight: 900;
line-height: 1.08;
letter-spacing: -0.015em;
color: rgba(10, 14, 26, 0.18);
margin: 0 0 32px;
}
.who-reveal .w {
display: inline-block;
color: rgba(10, 14, 26, 0.18);
transition: color 0.5s ease;
}
.who-reveal .w.is-on {
color: var(--c-text);
}
.who-reveal .w.is-on.hl {
color: var(--c-accent);
}
/* who-body: pure typography, no cards */
.who-body {
display: flex;
flex-direction: column;
gap: 26px;
max-width: 70ch;
}
.who-intro {
font-size: clamp(15px, 1.05vw, 17px);
line-height: 1.85;
color: var(--c-muted);
margin: 0;
}
.who-intro strong {
color: var(--c-text);
font-weight: 700;
}
.who-intro .hl {
color: var(--c-accent);
font-weight: 600;
}
/* paragraph scroll reveal — kelime kelime griden açılma */
.who-intro[data-reveal-prose] .w {
color: rgba(10, 14, 26, 0.16);
transition: color .45s ease;
}
.who-intro[data-reveal-prose] .w.is-on {
color: var(--c-muted);
}
.who-intro[data-reveal-prose] strong .w.is-on {
color: var(--c-text);
}
.who-intro[data-reveal-prose] .hl .w.is-on {
color: var(--c-accent);
}
.who-more {
display: inline-flex;
align-items: center;
gap: 10px;
margin-top: 12px;
padding: 14px 22px;
background: var(--c-text);
color: #fff;
border-radius: 999px;
font-family: 'Urbanist', 'Outfit', sans-serif;
font-size: 14.5px;
font-weight: 700;
letter-spacing: -0.005em;
text-decoration: none;
transition: background .25s ease, transform .25s ease, box-shadow .25s ease;
align-self: flex-start;
}
.who-more:hover {
background: var(--c-primary-2);
transform: translateY(-2px);
box-shadow: none;
color: #fff;
}
.who-more-arrow {
display: inline-flex;
align-items: center;
justify-content: center;
width: 22px;
height: 22px;
border-radius: 50%;
background: rgba(255, 255, 255, 0.18);
font-size: 12px;
transition: transform .25s ease, background .25s ease;
}
.who-more:hover .who-more-arrow {
transform: translateX(4px);
background: rgba(255, 255, 255, 0.28);
}
/* Mobilde "Daha fazlası" hero butonu gibi: tam genişlik + ortalı + sade ok */
@media (max-width: 720px) {
.who-foot { align-items: stretch; }
.who-more {
width: 100%;
justify-content: center;
align-self: stretch;
padding: 15px 24px;
gap: 8px;
}
.who-more-arrow {
width: auto;
height: auto;
background: transparent;
font-size: 1rem;
}
.who-more:hover .who-more-arrow { background: transparent; }
}
@media (max-width: 860px) {
.who-grid {
grid-template-columns: 1fr;
gap: 24px;
}
.who-side {
position: static;
display: flex;
align-items: center;
gap: 20px;
}
.who-asterisk {
margin-top: 0;
}
.who-ast-svg {
width: 64px;
height: 64px;
}
}
/* ==========================================================
HİZMETLER — Biz Kimiz ile aynı pastel zemin + label sistemi
========================================================== */
.sv-section {
position: relative;
padding: clamp(56px, 7vw, 96px) 0 clamp(80px, 12vw, 160px);
background: var(--c-bg);
overflow: hidden;
isolation: isolate;
}
.sv-section::before { display: none; }
.sv-section .container { position: relative; z-index: 2; }
/* Head: Biz Kimiz ile aynı 2-col yapı (sol sticky label + sağ büyük başlık) */
.sv-head-grid {
display: grid;
grid-template-columns: minmax(180px, 260px) 1fr;
gap: clamp(32px, 6vw, 96px);
align-items: start;
margin-bottom: clamp(40px, 5vw, 72px);
}
.sv-side {
position: sticky;
top: 120px;
}
.sv-label {
display: inline-flex;
align-items: center;
gap: 10px;
font-size: 12px;
font-weight: 700;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--c-text);
}
.sv-label::before {
content: '';
width: 24px;
height: 2px;
background: var(--c-accent);
border-radius: 2px;
}
.sv-head-content {
max-width: 920px;
}
.sv-lead {
margin: clamp(20px, 2.6vw, 32px) 0 0;
max-width: 720px;
font-family: 'Urbanist', 'Outfit', sans-serif;
font-size: clamp(1rem, 1.2vw, 1.15rem);
font-weight: 400;
line-height: 1.65;
color: var(--c-muted);
letter-spacing: 0.005em;
}
.sv-title {
font-family: 'Urbanist', 'Outfit', sans-serif;
font-size: clamp(2rem, 4.2vw, 3.6rem);
font-weight: 900;
line-height: 1.08;
letter-spacing: -0.015em;
color: rgba(10, 14, 26, 0.18);
margin: 0;
}
.sv-title .w {
display: inline-block;
color: rgba(10, 14, 26, 0.18);
transition: color 0.5s ease;
}
.sv-title .w.is-on {
color: var(--c-text);
}
.sv-title .w.is-on.hl {
color: var(--c-accent);
}
.sv-title .hl {
color: var(--c-accent);
}
.sv-lead .hl {
color: var(--c-accent);
font-weight: 600;
}
.sv-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: clamp(32px, 5vw, 72px);
align-items: center;
}
/* === sahne — sabit yüksekliğe kilitlenmiş "ekran önizlemesi" sahnesi === */
.sv-stage {
position: relative;
display: grid;
grid-template-columns: 1fr;
grid-template-rows: 1fr;
background: transparent;
height: clamp(480px, 56vh, 600px);
overflow: hidden;
border-radius: 18px;
}
.sv-mock {
grid-column: 1 / 2;
grid-row: 1 / 2;
display: flex;
align-items: flex-start;
justify-content: center;
padding: clamp(14px, 2vw, 24px) clamp(14px, 2vw, 24px) 0;
overflow: hidden;
-webkit-mask-image: linear-gradient(180deg, #000 0%, #000 78%, rgba(0, 0, 0, 0.35) 94%, transparent 100%);
mask-image: linear-gradient(180deg, #000 0%, #000 78%, rgba(0, 0, 0, 0.35) 94%, transparent 100%);
opacity: 0;
transform: translateY(16px) scale(0.985);
transition: opacity .45s ease, transform .55s cubic-bezier(.2, .7, .2, 1);
pointer-events: none;
}
.sv-mock > * {
flex: 0 0 auto;
max-width: 460px;
width: 100%;
}
.sv-mock.is-active {
opacity: 1;
transform: translateY(0) scale(1);
pointer-events: auto;
}
/* === mockup çerçeve rafinesi — 6 sahneye tutarlı, gerçekçi katmanlı derinlik ===
Tek-katman düz gölge yerine çok-katmanlı (kontakt + orta + ambient) yumuşak gölge
+ yumuşatılmış hairline + camsı üst kenar. Premium "ürün ekran görüntüsü" hissi. */
.sv-stage .svm-browser,
.sv-stage .svm-shop,
.sv-stage .svm-dash,
.sv-stage .svm-serp,
.sv-stage .svm-brand {
border-radius: 16px;
border-color: rgba(10, 14, 26, 0.07);
box-shadow:
0 1px 1px rgba(10, 14, 26, 0.04),
0 4px 8px -3px rgba(10, 14, 26, 0.08),
0 16px 28px -14px rgba(10, 14, 26, 0.15),
0 44px 72px -36px rgba(10, 14, 26, 0.22),
inset 0 1px 0 rgba(255, 255, 255, 0.9);
}
.sv-stage .svm-ig {
box-shadow:
0 0 0 8px #0a0e1a,
0 8px 18px -6px rgba(10, 14, 26, 0.26),
0 30px 56px -20px rgba(10, 14, 26, 0.34),
0 62px 90px -52px rgba(10, 14, 26, 0.30);
}
/* === sağ kolon: numaralı hizmet listesi === */
.sv-list {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
gap: 0;
border-top: 1px solid var(--c-border);
}
.sv-row {
position: relative;
border-bottom: 1px solid var(--c-border);
cursor: pointer;
transition: background .35s ease, padding .35s ease;
}
.sv-row::before {
content: "";
position: absolute;
left: 0;
top: 0;
bottom: 0;
width: 3px;
background: var(--c-accent);
transform: scaleY(0);
transform-origin: top;
transition: transform .45s cubic-bezier(.2, .7, .2, 1);
}
.sv-row-main {
display: grid;
grid-template-columns: auto 1fr auto;
align-items: center;
gap: clamp(14px, 2vw, 22px);
padding: clamp(18px, 2.4vw, 24px) clamp(8px, 1.6vw, 16px) clamp(18px, 2.4vw, 24px) clamp(14px, 2vw, 20px);
}
.sv-num {
font-family: 'JetBrains Mono', ui-monospace, monospace;
font-size: 13px;
font-weight: 500;
color: #94a3b8;
letter-spacing: 0.04em;
transition: color .35s ease;
}
.sv-name {
font-family: 'Bricolage Grotesque', 'DM Sans', sans-serif;
font-size: clamp(20px, 2.2vw, 26px);
font-weight: 500;
color: var(--c-text);
letter-spacing: -0.01em;
line-height: 1.2;
transition: color .35s ease, transform .35s ease;
}
.sv-arrow {
display: inline-flex;
align-items: center;
justify-content: center;
width: 38px;
height: 38px;
border-radius: 50%;
background: transparent;
color: #94a3b8;
font-size: 16px;
transition: background .35s ease, color .35s ease, transform .45s cubic-bezier(.2, .7, .2, 1);
}
.sv-row:hover .sv-num {
color: var(--c-accent);
}
.sv-row:hover .sv-name {
color: var(--c-accent);
transform: translateX(6px);
}
.sv-row:hover .sv-arrow {
background: var(--c-accent-soft);
color: var(--c-accent);
transform: rotate(-8deg);
}
.sv-row.is-active::before {
transform: scaleY(1);
}
.sv-row.is-active .sv-num {
color: var(--c-accent);
}
.sv-row.is-active .sv-name {
color: var(--c-text);
font-weight: 600;
}
.sv-row.is-active .sv-arrow {
background: var(--c-accent);
color: #fff;
transform: rotate(0deg);
}
.sv-row.is-active .sv-row-main {
padding-left: clamp(20px, 2.4vw, 28px);
}
@media (max-width: 860px) {
.sv-name {
font-size: 19px;
}
.sv-arrow {
width: 34px;
height: 34px;
}
}
/* ==========================================================
MOCKUP DETAY: 01 Web Tasarım
========================================================== */
.svm-browser {
width: 100%;
max-width: 500px;
background: #fff;
border-radius: 14px;
box-shadow: 0 28px 60px -24px rgba(10, 14, 26, 0.28);
overflow: hidden;
border: 1px solid var(--c-border);
}
.svm-bar {
display: flex;
align-items: center;
gap: 8px;
padding: 10px 14px 9px;
background: linear-gradient(180deg, #f8fafc, #eef2f7);
border-bottom: 1px solid var(--c-border);
}
.svm-dot {
width: 10px; height: 10px;
border-radius: 50%;
box-shadow: inset 0 0 0 0.5px rgba(0,0,0,0.08);
}
.svm-dot.r { background: #ff5f57; }
.svm-dot.y { background: #ffbd2e; }
.svm-dot.g { background: #28c941; }
.svm-url {
flex: 1;
margin-left: 8px;
display: inline-flex;
align-items: center;
gap: 6px;
padding: 5px 12px;
background: #fff;
border-radius: 999px;
font-size: 10px;
color: var(--c-text);
font-family: 'JetBrains Mono', monospace;
border: 1px solid var(--c-border);
}
.svm-lock {
display: inline-block;
width: 7px; height: 6px;
border: 1.5px solid var(--c-muted);
border-radius: 1.5px;
position: relative;
margin-top: 3px;
}
.svm-lock::before {
content: '';
position: absolute;
top: -4px;
left: 50%;
transform: translateX(-50%);
width: 5px; height: 5px;
border: 1.5px solid var(--c-muted);
border-bottom: 0;
border-radius: 50% 50% 0 0;
box-sizing: border-box;
}
.svm-url-text {
font-weight: 600;
letter-spacing: 0.02em;
}
.svm-tab-actions { display: inline-flex; gap: 4px; align-items: center; }
.svm-tab-actions i {
display: block;
width: 4px; height: 4px;
background: var(--c-muted);
border-radius: 50%;
opacity: 0.5;
}
.svm-loadbar {
height: 2px;
background: var(--c-border);
overflow: hidden;
position: relative;
}
.svm-loadbar span {
display: block;
width: 35%;
height: 100%;
background: linear-gradient(90deg, transparent, var(--c-accent), transparent);
animation: svmLoad 2.4s ease-in-out infinite;
}
@keyframes svmLoad {
0% { transform: translateX(-100%); }
100% { transform: translateX(380%); }
}
.svm-canvas {
padding: 16px 18px 18px;
background: linear-gradient(180deg, #fff 0%, #fafbfd 100%);
}
.svm-nav {
display: flex;
align-items: center;
gap: 14px;
margin-bottom: 16px;
padding-bottom: 12px;
border-bottom: 1px solid var(--c-border);
}
.svm-logo {
font-family: 'Urbanist', 'Outfit', sans-serif;
font-size: 18px;
font-weight: 900;
letter-spacing: -0.018em;
color: var(--c-text);
line-height: 1;
}
.svm-logo span { color: var(--c-accent); }
.svm-links {
flex: 1;
display: flex;
gap: 14px;
justify-content: center;
font-family: 'Urbanist', 'Outfit', sans-serif;
font-size: 9.5px;
font-weight: 600;
color: var(--c-muted);
}
.svm-links span { letter-spacing: 0.01em; }
.svm-cta {
padding: 6px 12px;
background: var(--c-text);
color: #fff;
border-radius: 999px;
font-family: 'Urbanist', 'Outfit', sans-serif;
font-size: 9.5px;
font-weight: 700;
letter-spacing: 0.01em;
}
.svm-hero-wrap {
padding: 4px 0 14px;
border-bottom: 1px dashed var(--c-border);
margin-bottom: 14px;
}
.svm-hero-badge {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 3px 9px 3px 7px;
background: var(--c-accent-soft);
color: var(--c-accent-2);
border-radius: 999px;
font-family: 'JetBrains Mono', monospace;
font-size: 8.5px;
font-weight: 700;
letter-spacing: 0.08em;
margin-bottom: 10px;
text-transform: uppercase;
}
.svm-pulse {
width: 5px; height: 5px;
border-radius: 50%;
background: var(--c-accent);
box-shadow: 0 0 0 0 rgba(31, 167, 232, 0.55);
animation: svmPulse 2s ease-out infinite;
}
@keyframes svmPulse {
0% { box-shadow: 0 0 0 0 rgba(31, 167, 232, 0.55); }
70% { box-shadow: 0 0 0 8px rgba(31, 167, 232, 0); }
100% { box-shadow: 0 0 0 0 rgba(31, 167, 232, 0); }
}
.svm-hero-title {
font-family: 'Urbanist', 'Outfit', sans-serif;
font-size: 26px;
font-weight: 900;
line-height: 1.02;
letter-spacing: -0.018em;
color: var(--c-text);
margin-bottom: 8px;
}
.svm-hero-title em {
font-style: normal;
color: var(--c-accent);
}
.svm-hero-sub {
font-size: 10.5px;
line-height: 1.5;
color: var(--c-muted);
margin-bottom: 12px;
}
.svm-hero-actions {
display: flex;
gap: 8px;
}
.svm-btn {
padding: 7px 14px;
border-radius: 7px;
font-family: 'Urbanist', 'Outfit', sans-serif;
font-size: 10px;
font-weight: 700;
letter-spacing: 0.01em;
}
.svm-btn.primary {
background: var(--c-accent);
color: #fff;
box-shadow: 0 6px 14px -4px rgba(31, 167, 232, 0.55);
}
.svm-btn.ghost {
background: transparent;
color: var(--c-text);
border: 1px solid var(--c-border);
}
.svm-grid3 {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 8px;
}
.svm-card {
padding: 12px 8px 10px;
background: #fff;
border: 1px solid var(--c-border);
border-radius: 9px;
text-align: center;
transition: transform .35s ease, box-shadow .35s ease, border-color .35s ease;
}
.svm-card:hover {
transform: translateY(-3px);
box-shadow: 0 10px 18px -10px rgba(10, 14, 26, 0.18);
border-color: rgba(31, 167, 232, 0.3);
}
.svm-card-icon {
width: 28px; height: 28px;
margin: 0 auto 7px;
border-radius: 8px;
position: relative;
}
.svm-card-icon.i1 {
background: var(--c-accent-soft);
}
.svm-card-icon.i1::before {
content: '';
position: absolute;
inset: 7px;
border: 2px solid var(--c-accent);
border-radius: 50%;
}
.svm-card-icon.i1::after {
content: '';
position: absolute;
bottom: 4px; right: 4px;
width: 6px; height: 6px;
background: var(--c-accent);
border-radius: 50%;
box-shadow: 0 0 0 1.5px #fff;
}
.svm-card-icon.i2 {
background: linear-gradient(135deg, #fff7e1, #ffe9b3);
}
.svm-card-icon.i2::before {
content: '';
position: absolute;
inset: 6px 6px 8px 6px;
background: #F5C518;
clip-path: polygon(50% 0, 0 100%, 100% 100%);
}
.svm-card-icon.i2::after {
content: '';
position: absolute;
top: 4px; right: 4px;
width: 5px; height: 5px;
background: #F5C518;
border-radius: 50%;
box-shadow: 0 0 0 1.5px #fff;
}
.svm-card-icon.i3 {
background: #f0f7ec;
}
.svm-card-icon.i3::before {
content: '';
position: absolute;
inset: 7px;
background:
linear-gradient(0deg, #34a853 2px, transparent 2px 4px, #34a853 4px 6px, transparent 6px 8px, #34a853 8px 10px, transparent 10px);
border-radius: 1px;
}
.svm-card-title {
font-family: 'Urbanist', 'Outfit', sans-serif;
font-size: 10.5px;
font-weight: 700;
color: var(--c-text);
letter-spacing: -0.015em;
margin-bottom: 4px;
}
.svm-card-desc {
font-size: 8.5px;
line-height: 1.35;
color: var(--c-muted);
letter-spacing: 0.005em;
}
.svm-card.is-feat {
position: relative;
border-color: rgba(31, 167, 232, 0.4);
background: linear-gradient(180deg, #fff, #f4fbff);
box-shadow: 0 8px 20px -12px rgba(31, 167, 232, 0.35);
}
.svm-card-tag {
position: absolute;
top: -7px;
left: 50%;
transform: translateX(-50%);
background: var(--c-accent);
color: #fff;
font-family: 'JetBrains Mono', monospace;
font-size: 7px;
font-weight: 800;
letter-spacing: 0.12em;
padding: 2px 7px;
border-radius: 999px;
white-space: nowrap;
}
/* Web mockup: announcement bar */
.svm-announce {
margin: -16px -18px 14px;
padding: 7px 14px;
background: linear-gradient(90deg, #0a0e1a, #1a2236);
color: #fff;
font-family: 'Urbanist', 'Outfit', sans-serif;
font-size: 9px;
font-weight: 600;
letter-spacing: 0.02em;
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
}
.svm-announce-dot {
width: 5px; height: 5px;
border-radius: 50%;
background: #34d399;
box-shadow: 0 0 6px rgba(52, 211, 153, 0.7);
}
.svm-announce-arrow {
color: var(--c-accent);
font-weight: 800;
}
/* Web mockup: hero row (text + art) */
.svm-hero-row {
display: grid;
grid-template-columns: 1.4fr 1fr;
gap: 14px;
align-items: start;
padding: 4px 0 14px;
border-bottom: 1px dashed var(--c-border);
margin-bottom: 12px;
}
.svm-hero-row .svm-hero-wrap {
padding: 0;
border-bottom: 0;
margin-bottom: 0;
}
.svm-hero-row .svm-hero-title { font-size: 22px; }
.svm-hero-row .svm-hero-sub { font-size: 9.5px; margin-bottom: 10px; }
.svm-hero-row .svm-btn { padding: 6px 11px; font-size: 9px; }
/* Stats strip under CTA */
.svm-stats {
display: flex;
align-items: center;
gap: 8px;
margin-top: 12px;
padding-top: 10px;
border-top: 1px dashed var(--c-border);
}
.svm-stat {
display: inline-flex;
flex-direction: column;
gap: 1px;
}
.svm-stat b {
font-family: 'Urbanist', 'Outfit', sans-serif;
font-size: 10.5px;
font-weight: 800;
color: var(--c-text);
letter-spacing: -0.02em;
line-height: 1;
}
.svm-stat i {
font-style: normal;
font-size: 7.5px;
font-weight: 600;
color: var(--c-muted);
text-transform: uppercase;
letter-spacing: 0.08em;
line-height: 1;
}
.svm-stat-sep {
width: 1px;
height: 18px;
background: var(--c-border);
}
/* ============================================================
WEB MOCKUP v3 — Kurumsal ajans landing page kompozisyonu
(Sıfırdan yazıldı: 2026-05-27)
============================================================ */
/* --- Browser bar v2: tabs + adres bar iki satır halinde --- */
.svm-bar {
padding: 8px 12px 6px;
}
.svm-tabs {
flex: 1;
display: inline-flex;
align-items: flex-end;
gap: 3px;
margin-left: 8px;
min-width: 0;
}
.svm-tab {
display: inline-flex;
align-items: center;
gap: 6px;
max-width: 180px;
padding: 4px 9px 5px;
background: rgba(255,255,255,0.55);
border: 1px solid transparent;
border-bottom: 0;
border-radius: 7px 7px 0 0;
font-family: 'Urbanist', 'Outfit', sans-serif;
font-size: 8.5px;
font-weight: 600;
color: var(--c-muted);
letter-spacing: 0.01em;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.svm-tab.is-on {
background: #fff;
border-color: var(--c-border);
color: var(--c-text);
font-weight: 700;
box-shadow: 0 -2px 0 var(--c-accent) inset;
}
.svm-tab-fav {
width: 10px; height: 10px;
border-radius: 3px;
background: linear-gradient(135deg, var(--c-accent), var(--c-accent-2));
flex-shrink: 0;
}
.svm-tab-t {
overflow: hidden;
text-overflow: ellipsis;
flex: 1;
min-width: 0;
}
.svm-tab-x {
width: 11px; height: 11px;
border-radius: 50%;
background: rgba(10,14,26,0.06);
color: var(--c-muted);
font-size: 10px;
font-weight: 700;
display: inline-grid;
place-items: center;
line-height: 1;
}
.svm-tab-new {
width: 16px; height: 16px;
margin-left: 2px;
border-radius: 5px;
color: var(--c-muted);
font-size: 13px;
font-weight: 600;
display: inline-grid;
place-items: center;
line-height: 1;
background: rgba(10,14,26,0.04);
}
.svm-bar-icons {
display: inline-flex;
gap: 5px;
margin-left: 8px;
}
.svm-bar-icons i {
width: 9px; height: 2px;
background: var(--c-muted);
opacity: 0.5;
border-radius: 1px;
}
.svm-bar-addr {
display: flex;
align-items: center;
gap: 8px;
padding: 6px 14px 8px;
background: linear-gradient(180deg, #fff, #fbfcfe);
border-bottom: 1px solid var(--c-border);
}
.svm-addr-nav, .svm-addr-act {
display: inline-flex;
align-items: center;
gap: 4px;
}
.svm-addr-nav i, .svm-addr-act i {
width: 16px; height: 16px;
border-radius: 4px;
color: var(--c-muted);
font-style: normal;
font-size: 11px;
font-weight: 700;
display: inline-grid;
place-items: center;
line-height: 1;
}
.svm-addr-nav i:hover, .svm-addr-act i:hover { background: rgba(10,14,26,0.05); }
.svm-bar-addr .svm-url {
flex: 1;
margin-left: 0;
padding: 4px 12px;
background: #f4f7fb;
border-color: transparent;
font-size: 9.5px;
}
/* --- Marquee announcement bar (.svm-marquee) --- */
.svm-marquee {
margin: -16px -18px 14px;
padding: 7px 14px;
background: linear-gradient(90deg, #0a0e1a 0%, #1a2238 60%, #1FA7E8 100%);
color: #fff;
font-family: 'Urbanist', 'Outfit', sans-serif;
font-size: 9px;
font-weight: 600;
letter-spacing: 0.01em;
display: flex;
align-items: center;
justify-content: center;
gap: 9px;
}
.svm-marquee-tag {
padding: 1px 6px;
border-radius: 999px;
background: rgba(255,255,255,0.18);
font-family: 'JetBrains Mono', monospace;
font-size: 7.5px;
font-weight: 800;
letter-spacing: 0.12em;
}
.svm-marquee-text { opacity: 0.92; }
.svm-marquee-link {
color: #7dd3fc;
font-weight: 700;
text-decoration: underline;
text-underline-offset: 2px;
text-decoration-color: rgba(125,211,252,0.5);
}
/* --- Top nav v2: brand + links + right cluster --- */
.svm-nav {
margin-bottom: 18px;
padding-bottom: 13px;
}
.svm-nav .svm-brand {
display: inline-flex;
align-items: center;
gap: 6px;
line-height: 1;
width: auto;
max-width: none;
background: transparent;
border: 0;
padding: 0;
border-radius: 0;
box-shadow: none;
}
.svm-nav .svm-brand-mark {
width: 18px; height: 18px;
border-radius: 5px;
background:
linear-gradient(135deg, var(--c-accent) 0%, var(--c-accent-2) 100%);
position: relative;
box-shadow: 0 4px 10px -3px rgba(31,167,232,0.45);
}
.svm-nav .svm-brand-mark::after {
content: '';
position: absolute;
inset: 4px;
border-radius: 50%;
background: #fff;
}
.svm-nav .svm-brand-name {
font-family: 'Bricolage Grotesque', 'DM Sans', sans-serif;
font-size: 14px;
font-weight: 800;
letter-spacing: -0.012em;
color: var(--c-text);
}
.svm-nav .svm-brand-name em {
font-style: normal;
color: var(--c-accent);
}
.svm-links {
gap: 16px;
font-size: 10px;
font-weight: 600;
}
.svm-links span {
display: inline-flex;
align-items: center;
gap: 3px;
color: var(--c-muted);
transition: color .2s ease;
}
.svm-links span:hover { color: var(--c-text); }
.svm-caret {
font-style: normal;
font-size: 7px;
opacity: 0.6;
}
.svm-nav-right {
display: inline-flex;
align-items: center;
gap: 10px;
}
.svm-lang {
font-family: 'JetBrains Mono', monospace;
font-size: 8.5px;
font-weight: 700;
color: var(--c-muted);
letter-spacing: 0.08em;
padding: 4px 8px;
border-radius: 5px;
background: rgba(10,14,26,0.04);
}
.svm-lang i {
font-style: normal;
opacity: 0.45;
margin: 0 1px;
}
.svm-nav-search i {
font-style: normal;
width: 24px; height: 24px;
border-radius: 50%;
background: rgba(10,14,26,0.04);
color: var(--c-text);
font-size: 12px;
font-weight: 700;
display: inline-grid;
place-items: center;
line-height: 1;
}
.svm-cta {
display: inline-flex;
align-items: center;
gap: 5px;
padding: 7px 12px 7px 13px;
background: var(--c-text);
color: #fff;
border-radius: 7px;
font-family: 'Urbanist', 'Outfit', sans-serif;
font-size: 10px;
font-weight: 700;
letter-spacing: -0.005em;
box-shadow: 0 8px 18px -8px rgba(10,14,26,0.55);
}
.svm-cta span {
font-weight: 800;
color: var(--c-accent);
}
/* --- Hero text-side refinements --- */
.svm-hero-row {
grid-template-columns: 1.25fr 1fr;
gap: 18px;
align-items: center;
padding: 6px 0 16px;
}
.svm-hero-row .svm-hero-title {
font-family: 'Bricolage Grotesque', 'DM Sans', sans-serif;
font-size: 26px;
line-height: 1.0;
letter-spacing: -0.018em;
margin-bottom: 9px;
}
.svm-hero-row .svm-hero-title em {
font-style: italic;
background: linear-gradient(135deg, var(--c-accent) 0%, var(--c-accent-2) 100%);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
}
.svm-hero-row .svm-hero-sub {
font-size: 10px;
line-height: 1.55;
margin-bottom: 13px;
}
.svm-hero-row .svm-btn { padding: 8px 13px; font-size: 9.5px; }
.svm-btn.primary {
display: inline-flex;
align-items: center;
gap: 6px;
background: linear-gradient(180deg, var(--c-accent) 0%, var(--c-accent-2) 100%);
box-shadow: 0 10px 22px -8px rgba(31,167,232,0.65), inset 0 1px 0 rgba(255,255,255,0.22);
}
.svm-btn-arr { font-weight: 800; }
.svm-btn-play {
display: inline-grid;
place-items: center;
width: 14px; height: 14px;
border-radius: 50%;
background: var(--c-accent);
color: #fff;
font-size: 6px;
margin-right: 2px;
}
/* Eyebrow */
.svm-eyebrow {
display: inline-flex;
align-items: center;
gap: 8px;
margin-bottom: 12px;
}
.svm-eyebrow-bar {
width: 18px; height: 2px;
background: var(--c-accent);
border-radius: 1px;
}
.svm-eyebrow-t {
font-family: 'JetBrains Mono', monospace;
font-size: 8px;
font-weight: 800;
color: var(--c-muted);
letter-spacing: 0.14em;
}
/* Trust row: avatar stack + stars */
.svm-trust {
display: flex;
align-items: center;
gap: 10px;
margin-top: 14px;
padding-top: 12px;
border-top: 1px dashed var(--c-border);
}
.svm-trust-avs {
display: inline-flex;
align-items: center;
}
.svm-trust-av {
width: 22px; height: 22px;
border-radius: 50%;
border: 2px solid #fff;
box-shadow: 0 2px 4px rgba(10,14,26,0.12);
margin-left: -7px;
flex-shrink: 0;
}
.svm-trust-av:first-child { margin-left: 0; }
.svm-trust-av.av1 { background: linear-gradient(135deg, #fa7e1e, #d62976); }
.svm-trust-av.av2 { background: linear-gradient(135deg, #1FA7E8, #0E5B8C); }
.svm-trust-av.av3 { background: linear-gradient(135deg, #34d399, #047857); }
.svm-trust-av.av4 { background: linear-gradient(135deg, #F5C518, #b07803); }
.svm-trust-av.av-more {
width: auto;
padding: 0 7px;
height: 22px;
background: var(--c-text);
color: #fff;
border-radius: 999px;
font-family: 'Urbanist', 'Outfit', sans-serif;
font-size: 8px;
font-weight: 800;
letter-spacing: -0.01em;
display: inline-grid;
place-items: center;
line-height: 1;
}
.svm-trust-body {
display: flex;
flex-direction: column;
line-height: 1.2;
}
.svm-trust-stars {
color: #F5C518;
font-size: 11px;
font-weight: 800;
letter-spacing: -0.01em;
display: inline-flex;
align-items: center;
gap: 5px;
}
.svm-trust-stars b {
color: var(--c-text);
font-family: 'Urbanist', 'Outfit', sans-serif;
font-size: 10px;
}
.svm-trust-stars i {
font-style: normal;
color: var(--c-muted);
font-size: 8px;
font-weight: 600;
letter-spacing: 0;
}
.svm-trust-text {
font-family: 'Urbanist', 'Outfit', sans-serif;
font-size: 8.5px;
font-weight: 500;
color: var(--c-muted);
margin-top: 2px;
}
/* ============================================================
HERO VISUAL — dashboard window + 1 floating partner badge
============================================================ */
.svm-hero-vis {
position: relative;
aspect-ratio: 5 / 5;
min-height: 240px;
isolation: isolate;
}
.svm-vis-glow {
position: absolute;
inset: 8% 4% 14% 6%;
background:
radial-gradient(circle at 30% 28%, rgba(31,167,232,0.36) 0%, rgba(31,167,232,0.12) 50%, transparent 75%),
radial-gradient(circle at 78% 70%, rgba(150,47,191,0.18) 0%, transparent 60%);
filter: blur(14px);
z-index: 0;
}
.svm-vis-grid {
position: absolute;
inset: 0;
background-image:
linear-gradient(to right, rgba(10,14,26,0.06) 1px, transparent 1px),
linear-gradient(to bottom, rgba(10,14,26,0.06) 1px, transparent 1px);
background-size: 22px 22px;
mask-image: radial-gradient(circle at 50% 50%, #000 0%, transparent 75%);
-webkit-mask-image: radial-gradient(circle at 50% 50%, #000 0%, transparent 75%);
opacity: 0.5;
z-index: 0;
}
/* Window mockup */
.svm-vis-win {
position: absolute;
top: 8%;
left: 4%;
right: 4%;
background: #fff;
border-radius: 12px;
border: 1px solid var(--c-border);
box-shadow:
0 30px 60px -22px rgba(10, 14, 26, 0.32),
0 4px 10px -4px rgba(10,14,26,0.10);
overflow: hidden;
z-index: 2;
transform: rotate(-0.6deg);
}
.svm-vis-win-bar {
display: flex;
align-items: center;
gap: 5px;
padding: 7px 10px;
background: linear-gradient(180deg, #fafbfd, #eef2f7);
border-bottom: 1px solid var(--c-border);
}
.svm-vis-win-bar i {
width: 6px; height: 6px;
border-radius: 50%;
}
.svm-vis-win-bar i:nth-child(1) { background: #ff5f57; }
.svm-vis-win-bar i:nth-child(2) { background: #ffbd2e; }
.svm-vis-win-bar i:nth-child(3) { background: #28c941; }
.svm-vis-win-url {
margin-left: auto;
font-family: 'JetBrains Mono', monospace;
font-size: 7.5px;
font-weight: 700;
color: var(--c-muted);
letter-spacing: 0.02em;
}
.svm-vis-win-body {
padding: 11px 13px 13px;
background: linear-gradient(180deg, #fff 0%, #fafbfd 100%);
}
.svm-vis-row {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 9px;
}
.svm-vis-eyebrow {
font-family: 'JetBrains Mono', monospace;
font-size: 7px;
font-weight: 800;
color: var(--c-muted);
letter-spacing: 0.12em;
}
.svm-vis-live {
display: inline-flex;
align-items: center;
gap: 4px;
padding: 2px 7px;
background: rgba(22,163,74,0.10);
border-radius: 999px;
color: #16a34a;
font-family: 'JetBrains Mono', monospace;
font-size: 7px;
font-weight: 800;
letter-spacing: 0.1em;
}
.svm-vis-live i {
width: 5px; height: 5px;
border-radius: 50%;
background: #16a34a;
box-shadow: 0 0 0 2px rgba(22,163,74,0.18);
animation: svmVisPulse 1.6s ease-in-out infinite;
}
@keyframes svmVisPulse {
0%, 100% { box-shadow: 0 0 0 2px rgba(22,163,74,0.18); }
50% { box-shadow: 0 0 0 4px rgba(22,163,74,0.05); }
}
.svm-vis-metrics {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 7px;
margin-bottom: 10px;
}
.svm-vis-m {
padding: 7px 8px;
background: #f8fbfd;
border-radius: 7px;
border: 1px solid rgba(31,167,232,0.10);
display: flex;
flex-direction: column;
gap: 2px;
}
.svm-vis-m-lbl {
font-family: 'JetBrains Mono', monospace;
font-size: 6.5px;
font-weight: 800;
color: var(--c-muted);
letter-spacing: 0.12em;
text-transform: uppercase;
}
.svm-vis-m-val {
font-family: 'Bricolage Grotesque', 'DM Sans', sans-serif;
font-size: 14px;
font-weight: 900;
color: var(--c-text);
letter-spacing: -0.012em;
line-height: 1;
}
.svm-vis-m-val.acc {
background: linear-gradient(135deg, var(--c-accent), var(--c-accent-2));
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
}
.svm-vis-m-delta {
font-family: 'Urbanist', 'Outfit', sans-serif;
font-size: 7px;
font-weight: 800;
letter-spacing: 0;
line-height: 1;
}
.svm-vis-m-delta.up { color: #16a34a; }
.svm-vis-m-delta.down { color: #16a34a; }
.svm-vis-chart {
width: 100%;
height: 60px;
display: block;
margin-bottom: 4px;
}
.svm-vis-grid-lines line {
stroke: rgba(10,14,26,0.06);
stroke-width: 0.5;
stroke-dasharray: 2 2;
}
.svm-vis-stroke {
fill: none;
stroke: var(--c-accent);
stroke-width: 1.6;
stroke-linecap: round;
stroke-linejoin: round;
stroke-dasharray: 320;
stroke-dashoffset: 320;
animation: svmVisDraw 2.6s ease-out forwards;
animation-delay: 0.4s;
}
@keyframes svmVisDraw { to { stroke-dashoffset: 0; } }
.svm-vis-dot {
fill: var(--c-accent);
stroke: #fff;
stroke-width: 1.5;
opacity: 0;
animation: svmVisDotIn 0.4s ease-out forwards;
animation-delay: 2.9s;
}
@keyframes svmVisDotIn { to { opacity: 1; } }
.svm-vis-foot {
display: flex;
justify-content: space-between;
padding: 0 2px;
}
.svm-vis-foot-lbl {
font-family: 'JetBrains Mono', monospace;
font-size: 6.5px;
font-weight: 700;
color: var(--c-muted);
letter-spacing: 0.06em;
}
/* TEK floating partner badge */
.svm-vis-badge {
position: absolute;
bottom: 4%;
right: -2%;
background: #fff;
border-radius: 12px;
border: 1px solid var(--c-border);
box-shadow: 0 20px 38px -14px rgba(10, 14, 26, 0.32);
padding: 8px 12px 8px 9px;
display: inline-flex;
align-items: center;
gap: 9px;
z-index: 3;
animation: svmVisFloat 5.6s ease-in-out infinite;
}
@keyframes svmVisFloat {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(-5px); }
}
.svm-vis-badge-mark {
width: 22px; height: 22px;
border-radius: 7px;
background: linear-gradient(135deg, #1877F2 0%, #0a4dbc 100%);
color: #fff;
font-size: 11px;
font-weight: 900;
display: inline-grid;
place-items: center;
line-height: 1;
flex-shrink: 0;
box-shadow: 0 6px 14px -4px rgba(24, 119, 242, 0.55);
}
.svm-vis-badge-body {
display: inline-flex;
flex-direction: column;
line-height: 1.15;
}
.svm-vis-badge-t {
font-family: 'Urbanist', 'Outfit', sans-serif;
font-size: 8.5px;
font-weight: 800;
color: var(--c-text);
letter-spacing: -0.005em;
}
.svm-vis-badge-s {
font-family: 'JetBrains Mono', monospace;
font-size: 6.5px;
font-weight: 700;
color: var(--c-muted);
letter-spacing: 0.06em;
}
/* Legacy yer tutucu — eski isimli elementler artık HTML'de yok ama orphan kurallar varsa gizle */
.svm-hero-art,
.svm-art-blob,
.svm-art-card,
.svm-art-roas,
.svm-art-rank,
.svm-art-phone,
.svm-art-laptop,
.svm-art-roaschip,
.svm-art-dash,
.svm-art-notif,
.svm-stats,
.svm-hero-badge,
.svm-announce { display: none !important; }
/* ============================================================
HERO-ART v2 — Laptop + Phone + ROAS chip kompozisyon
============================================================ */
/* SAĞ büyük: Telefon mockup'ı (dijitarya IG profili) */
.svm-art-phone {
position: absolute;
top: 4%;
right: 0;
width: 54%;
aspect-ratio: 9 / 18;
background: #1a1f2e;
border-radius: 22px;
padding: 4px;
box-shadow:
0 40px 80px -28px rgba(10, 14, 26, 0.50),
0 0 0 2px rgba(255,255,255,0.5),
inset 0 0 0 1px rgba(0,0,0,0.6);
z-index: 3;
}
.svm-art-ph-notch {
position: absolute;
top: 8px;
left: 50%;
transform: translateX(-50%);
width: 38%;
height: 8px;
background: #0a0e1a;
border-radius: 0 0 8px 8px;
z-index: 2;
}
.svm-art-ph-screen {
width: 100%;
height: 100%;
background: #fff;
border-radius: 18px;
overflow: hidden;
display: flex;
flex-direction: column;
}
.svm-art-ph-status {
display: flex;
align-items: center;
justify-content: space-between;
padding: 4px 10px 2px;
font-family: 'Urbanist', 'Outfit', sans-serif;
font-size: 6.5px;
font-weight: 800;
color: var(--c-text);
}
.svm-art-ph-st-ic {
display: inline-flex;
gap: 2px;
}
.svm-art-ph-st-ic i {
width: 4px; height: 4px;
border-radius: 1px;
background: var(--c-text);
}
.svm-art-ph-igtop {
display: flex;
align-items: center;
justify-content: space-between;
padding: 4px 8px 6px;
border-bottom: 1px solid var(--c-border);
}
.svm-art-ph-back, .svm-art-ph-more {
font-size: 10px;
font-weight: 800;
color: var(--c-text);
line-height: 1;
}
.svm-art-ph-title {
font-family: 'Urbanist', 'Outfit', sans-serif;
font-size: 8px;
font-weight: 800;
color: var(--c-text);
letter-spacing: -0.005em;
display: inline-flex;
align-items: center;
gap: 2px;
}
.svm-art-ph-verif {
color: #fff;
background: var(--c-accent);
border-radius: 50%;
width: 7px; height: 7px;
font-size: 5px;
display: inline-grid;
place-items: center;
line-height: 1;
}
.svm-art-ph-profile {
display: flex;
align-items: center;
gap: 7px;
padding: 7px 9px 4px;
}
.svm-art-ph-avatar {
width: 26px; height: 26px;
border-radius: 50%;
background:
conic-gradient(from 140deg, #feda75, #fa7e1e, #d62976, #962fbf, #4f5bd5, #feda75);
padding: 1.5px;
box-shadow: inset 0 0 0 1.5px #fff;
position: relative;
}
.svm-art-ph-avatar::after {
content: 'n';
position: absolute;
inset: 3px;
border-radius: 50%;
background: linear-gradient(135deg, #0a0e1a 0%, #1a2238 100%);
color: #fff;
font-family: 'Bricolage Grotesque', serif;
font-weight: 900;
font-size: 11px;
display: grid;
place-items: center;
line-height: 1;
}
.svm-art-ph-stats {
flex: 1;
display: flex;
justify-content: space-around;
font-family: 'Urbanist', 'Outfit', sans-serif;
text-align: center;
}
.svm-art-ph-stats span {
display: flex;
flex-direction: column;
line-height: 1.1;
}
.svm-art-ph-stats b {
font-size: 8px;
font-weight: 800;
color: var(--c-text);
letter-spacing: -0.01em;
}
.svm-art-ph-stats i {
font-style: normal;
font-size: 5.5px;
font-weight: 500;
color: var(--c-muted);
}
.svm-art-ph-bio {
padding: 0 9px 6px;
border-bottom: 1px solid var(--c-border);
}
.svm-art-ph-name {
font-family: 'Urbanist', 'Outfit', sans-serif;
font-size: 7.5px;
font-weight: 800;
color: var(--c-text);
}
.svm-art-ph-cat {
font-family: 'Urbanist', 'Outfit', sans-serif;
font-size: 6px;
font-weight: 500;
color: var(--c-muted);
margin-top: 1px;
}
.svm-art-ph-feed {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 1.5px;
padding: 1.5px;
flex: 1;
}
.svm-art-ph-tile {
aspect-ratio: 1;
border-radius: 2px;
position: relative;
overflow: hidden;
}
.svm-art-ph-tile::after {
content: '';
position: absolute;
inset: 0;
background:
radial-gradient(120% 80% at 30% 20%, rgba(255,255,255,0.22) 0%, rgba(255,255,255,0) 50%),
radial-gradient(140% 100% at 80% 110%, rgba(0,0,0,0.32) 0%, rgba(0,0,0,0) 55%);
mix-blend-mode: overlay;
}
.svm-art-ph-tile.g1 { background: linear-gradient(135deg, #1FA7E8, #0E5B8C); }
.svm-art-ph-tile.g2 { background: linear-gradient(135deg, #fa7e1e, #d62976); }
.svm-art-ph-tile.g3 { background: linear-gradient(135deg, #0a0e1a, #2a2f48); }
.svm-art-ph-tile.g4 { background: linear-gradient(135deg, #F5C518, #c79502); }
.svm-art-ph-tile.g5 { background: linear-gradient(135deg, #E1F3FB, #1FA7E8); }
.svm-art-ph-tile.g6 { background: linear-gradient(135deg, #34d399, #047857); }
/* SOL altta: Laptop ekran parçası (analytics view) */
.svm-art-laptop {
position: absolute;
bottom: 8%;
left: -2%;
width: 56%;
z-index: 2;
transform: rotate(-2.5deg);
transform-origin: bottom right;
}
.svm-art-lt-frame {
background: #fff;
border-radius: 8px 8px 2px 2px;
border: 1px solid var(--c-border);
box-shadow:
0 30px 60px -22px rgba(10, 14, 26, 0.35),
0 2px 6px -2px rgba(10,14,26,0.08);
overflow: hidden;
position: relative;
}
.svm-art-lt-bar {
display: flex;
align-items: center;
gap: 4px;
padding: 5px 8px;
background: linear-gradient(180deg, #f8fafc, #eef2f7);
border-bottom: 1px solid var(--c-border);
}
.svm-art-lt-bar i {
width: 5px; height: 5px;
border-radius: 50%;
}
.svm-art-lt-bar i:nth-child(1) { background: #ff5f57; }
.svm-art-lt-bar i:nth-child(2) { background: #ffbd2e; }
.svm-art-lt-bar i:nth-child(3) { background: #28c941; }
.svm-art-lt-tab {
margin-left: auto;
font-family: 'JetBrains Mono', monospace;
font-size: 6px;
font-weight: 700;
color: var(--c-muted);
letter-spacing: 0.02em;
}
.svm-art-lt-body {
padding: 8px 10px 9px;
}
.svm-art-lt-row {
display: flex;
align-items: center;
justify-content: space-between;
}
.svm-art-lt-eyebrow {
font-family: 'JetBrains Mono', monospace;
font-size: 6px;
font-weight: 800;
color: var(--c-muted);
letter-spacing: 0.1em;
}
.svm-art-lt-grow {
font-family: 'Urbanist', 'Outfit', sans-serif;
font-size: 7px;
font-weight: 800;
color: #16a34a;
}
.svm-art-lt-big {
font-family: 'Bricolage Grotesque', 'DM Sans', sans-serif;
font-size: 16px;
font-weight: 900;
color: var(--c-text);
letter-spacing: -0.012em;
line-height: 1;
margin: 2px 0 6px;
}
.svm-art-lt-chart {
width: 100%;
height: 38px;
display: block;
}
.svm-art-lt-grid line {
stroke: var(--c-border);
stroke-width: 0.4;
stroke-dasharray: 1.5 1.5;
}
.svm-art-lt-stroke {
fill: none;
stroke: var(--c-accent);
stroke-width: 1.4;
stroke-linecap: round;
stroke-linejoin: round;
stroke-dasharray: 280;
stroke-dashoffset: 280;
animation: svmArtDraw 2.8s ease-out forwards;
animation-delay: 0.4s;
}
@keyframes svmArtDraw {
to { stroke-dashoffset: 0; }
}
.svm-art-lt-base {
height: 4px;
background: linear-gradient(180deg, #c8d0dc, #a8b2c2);
border-radius: 0 0 4px 4px;
margin: 0 -8% 0 -8%;
box-shadow: 0 1px 0 rgba(10,14,26,0.1);
}
/* ROAS chip (tek floating, telefon kenarına yapışık) */
.svm-art-roaschip {
position: absolute;
top: 38%;
right: 38%;
background: #fff;
border-radius: 999px;
border: 1px solid var(--c-border);
box-shadow: 0 18px 32px -12px rgba(10, 14, 26, 0.32);
padding: 7px 11px 7px 9px;
display: inline-flex;
align-items: center;
gap: 8px;
z-index: 4;
animation: svmArtFloat 5s ease-in-out infinite;
}
.svm-art-roaschip-pulse {
width: 8px; height: 8px;
border-radius: 50%;
background: var(--c-accent);
box-shadow: 0 0 0 3px rgba(31,167,232,0.18);
animation: svmPulseDot 1.6s ease-in-out infinite;
flex-shrink: 0;
}
@keyframes svmPulseDot {
0%, 100% { box-shadow: 0 0 0 3px rgba(31,167,232,0.18); }
50% { box-shadow: 0 0 0 5px rgba(31,167,232,0.05); }
}
.svm-art-roaschip-body {
display: flex;
flex-direction: column;
line-height: 1.1;
}
.svm-art-roaschip-lbl {
font-family: 'JetBrains Mono', monospace;
font-size: 6px;
font-weight: 800;
color: var(--c-muted);
letter-spacing: 0.1em;
}
.svm-art-roaschip-val {
font-family: 'Bricolage Grotesque', 'DM Sans', sans-serif;
font-size: 13px;
font-weight: 900;
color: var(--c-text);
letter-spacing: -0.012em;
}
.svm-art-roaschip-val small {
font-size: 9px;
color: var(--c-accent);
margin-left: 1px;
}
.svm-art-roaschip-delta {
font-family: 'Urbanist', 'Outfit', sans-serif;
font-size: 9px;
font-weight: 900;
color: #16a34a;
letter-spacing: -0.01em;
}
/* (Legacy — eski .svm-art-dash bileşeni HTML'den kaldırıldı, alttaki kurallar artık no-op) */
.svm-art-dash,
.svm-art-notif { display: none !important; }
.svm-art-dash-head {
display: flex;
align-items: center;
gap: 6px;
}
.svm-art-dash-bar {
display: inline-flex;
gap: 3px;
}
.svm-art-dash-bar i {
width: 5px; height: 5px;
border-radius: 50%;
background: var(--c-border);
}
.svm-art-dash-bar i:nth-child(1) { background: #ff5f57; }
.svm-art-dash-bar i:nth-child(2) { background: #ffbd2e; }
.svm-art-dash-bar i:nth-child(3) { background: #28c941; }
.svm-art-dash-title {
font-family: 'Urbanist', 'Outfit', sans-serif;
font-size: 7.5px;
font-weight: 700;
color: var(--c-text);
letter-spacing: -0.005em;
}
.svm-art-dash-live {
margin-left: auto;
display: inline-flex;
align-items: center;
gap: 3px;
font-family: 'JetBrains Mono', monospace;
font-size: 6.5px;
font-weight: 800;
color: #16a34a;
letter-spacing: 0.08em;
}
.svm-art-dash-live i {
width: 4px; height: 4px;
border-radius: 50%;
background: #16a34a;
box-shadow: 0 0 0 2px rgba(22,163,74,0.18);
animation: svmPulseDot 1.6s ease-in-out infinite;
}
@keyframes svmPulseDot {
0%, 100% { box-shadow: 0 0 0 2px rgba(22,163,74,0.18); }
50% { box-shadow: 0 0 0 4px rgba(22,163,74,0.06); }
}
.svm-art-dash-tabs {
display: inline-flex;
gap: 4px;
}
.svm-art-dash-tabs span {
font-family: 'Urbanist', 'Outfit', sans-serif;
font-size: 6.5px;
font-weight: 700;
padding: 2px 6px;
border-radius: 5px;
background: #f4f7fb;
color: var(--c-muted);
}
.svm-art-dash-tabs .is-on {
background: var(--c-accent-soft);
color: var(--c-accent-2);
}
.svm-art-dash-chart {
width: 100%;
height: clamp(36px, 7vw, 56px);
display: block;
}
.svm-art-dash-stroke {
fill: none;
stroke: var(--c-accent);
stroke-width: 1.6;
stroke-linecap: round;
stroke-linejoin: round;
stroke-dasharray: 200;
stroke-dashoffset: 200;
animation: svmArtDraw 2.8s ease-out forwards;
animation-delay: 0.6s;
}
@keyframes svmArtDraw {
to { stroke-dashoffset: 0; }
}
.svm-art-dash-dot {
fill: var(--c-accent);
opacity: 0;
animation: svmArtDotIn 0.4s ease-out forwards;
animation-delay: 3.3s;
}
@keyframes svmArtDotIn {
to { opacity: 1; }
}
.svm-art-dash-kpis {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 6px;
}
.svm-art-dash-kpi {
background: #f8fbfd;
border-radius: 6px;
padding: 5px 7px;
display: flex;
flex-direction: column;
gap: 1px;
}
.svm-art-dash-kpi-lbl {
font-family: 'JetBrains Mono', monospace;
font-size: 6.5px;
font-weight: 800;
color: var(--c-muted);
letter-spacing: 0.1em;
text-transform: uppercase;
}
.svm-art-dash-kpi-val {
font-family: 'Urbanist', 'Outfit', sans-serif;
font-size: 11px;
font-weight: 900;
color: var(--c-text);
letter-spacing: -0.02em;
line-height: 1;
}
.svm-art-dash-kpi-delta {
font-size: 6.5px;
font-weight: 800;
letter-spacing: 0.02em;
line-height: 1.25;
}
.svm-art-dash-kpi-delta.up { color: #16a34a; }
/* CPA için aşağı düşmek iyi → yeşil, çünkü hedef altına düşürüldü */
.svm-art-dash-kpi-delta.down { color: #16a34a; }
/* === Hero-art: canlı bildirim balonu === */
.svm-art-notif {
position: absolute;
top: 44%;
right: -2%;
background: #fff;
border-radius: 10px;
border: 1px solid var(--c-border);
box-shadow: 0 14px 28px -10px rgba(10, 14, 26, 0.28);
padding: 6px 9px 6px 7px;
display: flex;
align-items: center;
gap: 7px;
z-index: 3;
animation: svmArtFloat 5.4s ease-in-out infinite -3s;
transform-origin: 50% 50%;
}
.svm-art-notif-ic {
width: 18px; height: 18px;
border-radius: 50%;
background: linear-gradient(135deg, #34d399, #047857);
color: #fff;
display: grid;
place-items: center;
font-size: 10px;
font-weight: 900;
flex-shrink: 0;
box-shadow: 0 4px 10px -3px rgba(4, 120, 87, 0.45);
}
.svm-art-notif-body {
display: flex;
flex-direction: column;
line-height: 1.15;
}
.svm-art-notif-title {
font-family: 'Urbanist', 'Outfit', sans-serif;
font-size: 8px;
font-weight: 800;
color: var(--c-text);
letter-spacing: -0.005em;
}
.svm-art-notif-sub {
font-family: 'JetBrains Mono', monospace;
font-size: 6.5px;
font-weight: 700;
color: var(--c-muted);
letter-spacing: 0.04em;
}
/* Client logo strip */
.svm-logos {
margin: 0 -2px 14px;
padding: 10px 2px 12px;
border-top: 1px solid var(--c-border);
border-bottom: 1px solid var(--c-border);
}
.svm-logo-strip-label {
display: block;
font-family: 'JetBrains Mono', monospace;
font-size: 7px;
font-weight: 700;
color: var(--c-muted);
letter-spacing: 0.14em;
text-transform: uppercase;
text-align: center;
margin-bottom: 6px;
}
.svm-logo-strip {
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
opacity: 0.7;
}
.svm-cl-logo {
font-family: 'Urbanist', 'Outfit', sans-serif;
font-size: 10px;
font-weight: 900;
color: var(--c-text);
letter-spacing: -0.02em;
line-height: 1;
}
.svm-cl-logo.l1 { font-family: 'Bricolage Grotesque', serif; font-style: italic; font-weight: 700; }
.svm-cl-logo.l2 { letter-spacing: 0.18em; font-weight: 800; }
.svm-cl-logo.l2 i { font-style: normal; color: var(--c-accent); }
.svm-cl-logo.l3 { letter-spacing: 0.02em; }
.svm-cl-logo.l4 { font-family: 'Caveat', cursive; font-size: 16px; font-weight: 700; }
.svm-cl-logo.l5 { font-family: 'JetBrains Mono', monospace; letter-spacing: 0.15em; font-weight: 700; font-size: 9px; }
/* Mini testimonial card */
.svm-testi {
margin-top: 12px;
padding: 10px 12px;
background: linear-gradient(180deg, #f7fbfd, #eef6fb);
border: 1px solid rgba(31, 167, 232, 0.2);
border-radius: 10px;
display: flex;
gap: 10px;
align-items: flex-start;
}
.svm-testi-avatar {
flex: 0 0 26px;
width: 26px; height: 26px;
border-radius: 50%;
background: linear-gradient(135deg, var(--c-accent), var(--c-accent-2));
color: #fff;
display: inline-flex;
align-items: center;
justify-content: center;
font-family: 'Urbanist', 'Outfit', sans-serif;
font-size: 9px;
font-weight: 800;
letter-spacing: 0.02em;
}
.svm-testi-body { flex: 1; min-width: 0; }
.svm-testi-stars {
color: #F5C518;
font-size: 9px;
line-height: 1;
margin-bottom: 3px;
letter-spacing: 0.05em;
}
.svm-testi-text {
font-size: 9.5px;
line-height: 1.4;
color: var(--c-text);
font-weight: 500;
margin-bottom: 3px;
}
.svm-testi-author {
font-size: 7.5px;
font-weight: 600;
color: var(--c-muted);
letter-spacing: 0.02em;
}
/* ==========================================================
MOCKUP DETAY: 02 E-Ticaret v3 — sıfırdan yazıldı 2026-05-27
========================================================== */
.svm-shop {
width: 100%;
max-width: 480px;
background: #fff;
border-radius: 16px;
padding: 0;
box-shadow: 0 28px 60px -24px rgba(10, 14, 26, 0.28);
border: 1px solid var(--c-border);
position: relative;
overflow: hidden;
}
/* --- UTILITY STRIP (en üst slim bar) --- */
.svm-util {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
padding: 6px 14px;
background: #0a0e1a;
color: #fff;
font-family: 'Urbanist', 'Outfit', sans-serif;
font-size: 8.5px;
font-weight: 500;
letter-spacing: 0.01em;
}
.svm-util-l {
display: inline-flex;
align-items: center;
gap: 7px;
}
.svm-util-l b { color: #F5C518; font-weight: 800; }
.svm-util-pulse {
width: 6px; height: 6px;
border-radius: 50%;
background: #34d399;
box-shadow: 0 0 0 0 rgba(52,211,153,0.55);
animation: svmShopPulse 1.8s ease-out infinite;
}
@keyframes svmShopPulse {
0% { box-shadow: 0 0 0 0 rgba(52,211,153,0.55); }
70% { box-shadow: 0 0 0 6px rgba(52,211,153,0); }
100% { box-shadow: 0 0 0 0 rgba(52,211,153,0); }
}
.svm-util-r {
display: inline-flex;
align-items: center;
gap: 9px;
}
.svm-util-link {
color: rgba(255,255,255,0.78);
letter-spacing: 0.02em;
}
.svm-util-link.active {
color: #fff;
font-weight: 700;
}
.svm-util-link i {
font-style: normal;
opacity: 0.55;
margin: 0 2px;
}
.svm-util-sep {
width: 1px; height: 9px;
background: rgba(255,255,255,0.15);
}
/* --- MAIN HEADER --- */
.svm-shop-top {
display: flex;
align-items: center;
gap: 14px;
padding: 14px 16px 12px;
}
.svm-shop-logo {
font-family: 'Bricolage Grotesque', 'DM Sans', sans-serif;
font-size: 22px;
font-weight: 800;
color: var(--c-text);
letter-spacing: -0.02em;
line-height: 1;
flex-shrink: 0;
display: inline-flex;
align-items: baseline;
}
.svm-shop-logo i {
font-style: normal;
color: var(--c-accent);
}
.svm-shop-logo-co {
margin-left: 1px;
font-family: 'JetBrains Mono', monospace;
font-size: 9px;
font-weight: 700;
color: var(--c-muted);
letter-spacing: 0.05em;
text-transform: lowercase;
align-self: flex-end;
padding-bottom: 3px;
}
/* Mega search */
.svm-shop-search {
flex: 1;
display: inline-flex;
align-items: center;
height: 36px;
padding: 0 4px 0 0;
background: #fff;
border-radius: 8px;
border: 1.5px solid var(--c-text);
font-family: 'Urbanist', 'Outfit', sans-serif;
font-size: 11px;
color: var(--c-text);
overflow: hidden;
box-shadow: 0 4px 10px -6px rgba(10,14,26,0.18);
}
.svm-shop-search-cat {
display: inline-flex;
align-items: center;
gap: 5px;
padding: 0 10px;
height: 100%;
font-family: 'Urbanist', 'Outfit', sans-serif;
font-size: 9.5px;
font-weight: 700;
color: var(--c-text);
letter-spacing: -0.005em;
white-space: nowrap;
background: #fafbfd;
}
.svm-shop-search-cat i {
font-style: normal;
opacity: 0.55;
font-size: 7px;
}
.svm-shop-search-sep {
width: 1px; height: 18px;
background: var(--c-border);
}
.svm-shop-search-icon {
width: 12px; height: 12px;
border: 2px solid var(--c-muted);
border-radius: 50%;
position: relative;
flex-shrink: 0;
margin-left: 10px;
}
.svm-shop-search-icon::after {
content: '';
position: absolute;
right: -3px; bottom: -3px;
width: 5px; height: 2px;
background: var(--c-muted);
transform: rotate(45deg);
border-radius: 1px;
}
.svm-shop-search-text {
flex: 1;
margin-left: 8px;
font-weight: 500;
color: var(--c-text);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.svm-shop-search-btn {
padding: 0 14px;
height: 28px;
background: var(--c-accent);
color: #fff;
border-radius: 6px;
font-family: 'Urbanist', 'Outfit', sans-serif;
font-size: 10px;
font-weight: 800;
letter-spacing: 0.02em;
display: inline-grid;
place-items: center;
box-shadow: 0 4px 10px -3px rgba(31,167,232,0.5);
}
@keyframes svmBlink { 50% { opacity: 0; } }
.svm-shop-search .svm-cursor {
display: inline-block;
width: 1.5px;
height: 11px;
background: var(--c-accent);
animation: svmBlink 1s steps(2) infinite;
margin-right: 8px;
}
/* Icons cluster */
.svm-shop-icons {
display: inline-flex;
align-items: center;
gap: 14px;
flex-shrink: 0;
}
.svm-shop-ico-w {
display: inline-flex;
flex-direction: column;
align-items: center;
gap: 1px;
font-family: 'Urbanist', 'Outfit', sans-serif;
font-size: 7.5px;
font-weight: 600;
color: var(--c-muted);
letter-spacing: 0.01em;
}
.svm-shop-ico-glyph {
font-size: 14px;
color: var(--c-text);
line-height: 1;
}
.svm-shop-ico-lbl { line-height: 1; }
.svm-cart-w {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 6px 10px 6px 9px;
background: var(--c-text);
border-radius: 10px;
box-shadow: 0 8px 16px -8px rgba(10,14,26,0.45);
}
.svm-cart-ico {
position: relative;
width: 22px; height: 22px;
flex-shrink: 0;
}
.svm-cart-ico::before {
content: '';
position: absolute;
left: 4px; right: 4px;
top: 9px; bottom: 3px;
border: 1.5px solid #fff;
border-top: 0;
border-radius: 0 0 3px 3px;
}
.svm-cart-ico::after {
content: '';
position: absolute;
top: 5px;
left: 50%;
transform: translateX(-50%);
width: 9px; height: 4px;
border: 1.5px solid #fff;
border-bottom: 0;
border-radius: 50% 50% 0 0;
}
.svm-cart-badge {
position: absolute;
top: -5px; right: -6px;
width: 14px; height: 14px;
background: var(--c-accent);
color: #fff;
font-size: 8px;
font-weight: 800;
display: grid;
place-items: center;
border-radius: 50%;
border: 1.5px solid var(--c-text);
font-family: 'Urbanist', 'Outfit', sans-serif;
line-height: 1;
}
.svm-cart-meta {
display: inline-flex;
flex-direction: column;
line-height: 1.15;
color: #fff;
}
.svm-cart-lbl {
font-family: 'JetBrains Mono', monospace;
font-size: 7px;
font-weight: 700;
color: rgba(255,255,255,0.65);
letter-spacing: 0.1em;
text-transform: uppercase;
}
.svm-cart-amt {
font-family: 'Urbanist', 'Outfit', sans-serif;
font-size: 11px;
font-weight: 800;
letter-spacing: -0.02em;
}
/* --- CATEGORY NAV --- */
.svm-catnav {
display: flex;
align-items: center;
gap: 16px;
padding: 9px 16px 11px;
border-top: 1px solid var(--c-border);
border-bottom: 1px solid var(--c-border);
background: linear-gradient(180deg, #fafbfd 0%, #fff 100%);
overflow: hidden;
position: relative;
}
.svm-catlink {
position: relative;
font-family: 'Urbanist', 'Outfit', sans-serif;
font-size: 10px;
font-weight: 700;
color: var(--c-muted);
letter-spacing: 0.005em;
display: inline-flex;
align-items: center;
gap: 4px;
white-space: nowrap;
}
.svm-catlink.is-on { color: var(--c-text); }
.svm-catlink.is-on::after {
content: '';
position: absolute;
left: 0; right: 0;
bottom: -12px;
height: 2px;
background: var(--c-accent);
border-radius: 2px;
}
.svm-catlink-c {
font-style: normal;
font-size: 7px;
opacity: 0.5;
}
.svm-catlink.sale { color: #ef4444; font-weight: 800; }
.svm-catlink.new { color: var(--c-accent); }
.svm-cat-dot {
width: 5px; height: 5px;
border-radius: 50%;
background: var(--c-accent);
display: inline-block;
box-shadow: 0 0 0 2px rgba(31,167,232,0.18);
}
.svm-cat-spacer { flex: 1; }
.svm-cat-track {
font-family: 'JetBrains Mono', monospace;
font-size: 8px;
font-weight: 700;
color: var(--c-muted);
letter-spacing: 0.05em;
padding: 3px 9px;
border: 1px dashed var(--c-border);
border-radius: 999px;
}
/* --- HERO BANNER --- */
.svm-hero-banner {
position: relative;
background:
radial-gradient(circle at 80% 30%, rgba(245,197,24,0.10), transparent 65%),
linear-gradient(120deg, var(--c-text) 0%, #1a2236 60%, #20355c 100%);
border-radius: 0;
padding: 16px 18px;
margin: 0;
overflow: hidden;
display: flex;
align-items: center;
gap: 14px;
min-height: 110px;
}
.svm-hb-text { flex: 1; position: relative; z-index: 2; }
.svm-hb-tag {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 3px 9px 3px 7px;
background: rgba(245,197,24,0.16);
border-radius: 999px;
font-family: 'JetBrains Mono', monospace;
font-size: 7.5px;
font-weight: 800;
color: #F5C518;
letter-spacing: 0.14em;
margin-bottom: 8px;
}
.svm-hb-tag i {
width: 5px; height: 5px;
border-radius: 50%;
background: #F5C518;
box-shadow: 0 0 6px rgba(245,197,24,0.7);
}
.svm-hb-title {
font-family: 'Bricolage Grotesque', 'DM Sans', sans-serif;
font-size: 22px;
font-weight: 900;
color: #fff;
line-height: 0.98;
letter-spacing: -0.018em;
margin-bottom: 6px;
}
.svm-hb-title em {
font-style: italic;
background: linear-gradient(135deg, #F5C518 0%, #fa7e1e 100%);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
}
.svm-hb-sub {
display: block;
font-family: 'Urbanist', 'Outfit', sans-serif;
font-size: 9.5px;
font-weight: 500;
color: rgba(255,255,255,0.7);
letter-spacing: 0.005em;
margin-bottom: 10px;
}
.svm-hb-actions {
display: inline-flex;
align-items: center;
gap: 10px;
}
.svm-hb-cta {
display: inline-flex;
align-items: center;
gap: 5px;
background: #fff;
color: var(--c-text);
padding: 7px 12px 7px 14px;
border-radius: 7px;
font-family: 'Urbanist', 'Outfit', sans-serif;
font-size: 10px;
font-weight: 800;
letter-spacing: -0.005em;
white-space: nowrap;
box-shadow: 0 8px 16px -6px rgba(0,0,0,0.35);
}
.svm-hb-cta i {
font-style: normal;
color: var(--c-accent);
font-weight: 900;
}
.svm-hb-timer {
display: inline-flex;
flex-direction: column;
line-height: 1.1;
}
.svm-hb-timer-lbl {
font-family: 'JetBrains Mono', monospace;
font-size: 6.5px;
font-weight: 800;
color: #F5C518;
letter-spacing: 0.16em;
}
.svm-hb-timer-val {
font-family: 'JetBrains Mono', monospace;
font-size: 11px;
font-weight: 800;
color: #fff;
letter-spacing: 0.04em;
}
.svm-hb-timer-val i {
font-style: normal;
color: rgba(255,255,255,0.5);
animation: svmBlink 1s steps(2) infinite;
}
.svm-hb-vis {
position: relative;
width: 110px;
height: 86px;
flex-shrink: 0;
}
.svm-hb-shape {
position: absolute;
inset: -6px;
background:
radial-gradient(circle at 35% 35%, rgba(31,167,232,0.55) 0%, transparent 60%),
radial-gradient(circle at 70% 70%, rgba(245,197,24,0.42) 0%, transparent 60%);
border-radius: 50%;
filter: blur(4px);
z-index: 1;
}
.svm-hb-disc {
position: absolute;
top: -8px; left: -10px;
width: 46px; height: 46px;
background: #F5C518;
color: var(--c-text);
border-radius: 50%;
font-family: 'Bricolage Grotesque', 'DM Sans', sans-serif;
font-size: 15px;
font-weight: 900;
letter-spacing: -0.018em;
display: grid;
place-items: center;
line-height: 0.9;
transform: rotate(-12deg);
box-shadow: 0 8px 18px -4px rgba(245,197,24,0.6);
z-index: 3;
text-align: center;
}
.svm-hb-disc small {
display: block;
font-family: 'JetBrains Mono', monospace;
font-size: 5px;
font-weight: 800;
letter-spacing: 0.15em;
text-transform: uppercase;
color: var(--c-text);
opacity: 0.7;
margin-top: 1px;
}
.svm-hb-prod {
position: absolute;
inset: 14% 8%;
background:
radial-gradient(ellipse 65% 25% at 50% 95%, rgba(0,0,0,0.4) 0%, transparent 60%),
linear-gradient(160deg, #fff 0%, #E1F3FB 60%, #1FA7E8 100%);
border-radius: 56% 44% 50% 50% / 60% 60% 40% 40%;
z-index: 2;
box-shadow:
inset -8px -10px 14px rgba(10,14,26,0.18),
inset 8px 8px 14px rgba(255,255,255,0.5);
}
/* --- FREE SHIPPING PROGRESS --- */
.svm-ship-bar {
display: flex;
align-items: center;
gap: 11px;
padding: 10px 16px;
background: linear-gradient(180deg, #f8fbfd, #eef6fb);
border-bottom: 1px solid var(--c-border);
}
.svm-ship-bar-ic {
font-size: 14px;
line-height: 1;
}
.svm-ship-bar-meta { flex: 1; }
.svm-ship-bar-t {
display: block;
font-family: 'Urbanist', 'Outfit', sans-serif;
font-size: 9.5px;
font-weight: 600;
color: var(--c-text);
letter-spacing: -0.005em;
margin-bottom: 4px;
}
.svm-ship-bar-t b {
color: var(--c-accent);
font-weight: 800;
}
.svm-ship-bar-track {
height: 5px;
background: rgba(31,167,232,0.14);
border-radius: 999px;
overflow: hidden;
position: relative;
}
.svm-ship-bar-track span {
display: block;
width: 71%;
height: 100%;
background: linear-gradient(90deg, var(--c-accent), var(--c-accent-2));
border-radius: 999px;
animation: svmShipFill 2s ease-out forwards;
transform-origin: left;
}
@keyframes svmShipFill {
from { transform: scaleX(0.1); }
to { transform: scaleX(1); }
}
.svm-ship-bar-amt {
font-family: 'JetBrains Mono', monospace;
font-size: 9px;
font-weight: 800;
color: var(--c-text);
letter-spacing: 0.02em;
white-space: nowrap;
}
.svm-ship-bar-amt i {
font-style: normal;
color: var(--c-muted);
margin: 0 2px;
}
/* --- FILTER / SORT STRIP --- */
.svm-filter {
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
padding: 11px 16px 10px;
border-bottom: 1px solid var(--c-border);
}
.svm-filter-chips {
display: inline-flex;
gap: 6px;
}
.svm-chip {
padding: 4px 11px;
border-radius: 999px;
background: #f5f7fa;
color: var(--c-muted);
font-family: 'Urbanist', 'Outfit', sans-serif;
font-size: 9.5px;
font-weight: 700;
letter-spacing: 0.005em;
white-space: nowrap;
}
.svm-chip.is-on {
background: var(--c-text);
color: #fff;
}
.svm-chip.discount {
background: #fff;
color: #ef4444;
border: 1px solid rgba(239,68,68,0.25);
display: inline-flex;
align-items: center;
gap: 3px;
}
.svm-chip.discount i {
font-style: normal;
background: #ef4444;
color: #fff;
border-radius: 3px;
padding: 0 3px;
font-size: 7.5px;
font-weight: 900;
line-height: 1.4;
}
.svm-filter-right {
display: inline-flex;
align-items: center;
gap: 10px;
}
.svm-filter-count {
font-family: 'JetBrains Mono', monospace;
font-size: 8.5px;
font-weight: 700;
color: var(--c-muted);
letter-spacing: 0.04em;
white-space: nowrap;
}
.svm-filter-count b {
color: var(--c-text);
font-weight: 800;
}
.svm-filter-sort {
display: inline-flex;
align-items: center;
gap: 4px;
font-family: 'Urbanist', 'Outfit', sans-serif;
font-size: 9px;
font-weight: 500;
color: var(--c-muted);
}
.svm-filter-sort b {
color: var(--c-text);
font-weight: 700;
}
.svm-filter-sort i {
font-style: normal;
font-size: 7.5px;
opacity: 0.6;
}
.svm-filter-view {
display: inline-flex;
border: 1px solid var(--c-border);
border-radius: 6px;
overflow: hidden;
}
.svm-filter-view .vw {
width: 22px; height: 22px;
display: inline-block;
position: relative;
font-style: normal;
background: #fff;
}
.svm-filter-view .vw.is-on { background: var(--c-text); }
.svm-filter-view .vw-grid::before {
content: '';
position: absolute;
inset: 5px;
background:
linear-gradient(var(--c-muted), var(--c-muted)) 0 0 / 5px 5px no-repeat,
linear-gradient(var(--c-muted), var(--c-muted)) 7px 0 / 5px 5px no-repeat,
linear-gradient(var(--c-muted), var(--c-muted)) 0 7px / 5px 5px no-repeat,
linear-gradient(var(--c-muted), var(--c-muted)) 7px 7px / 5px 5px no-repeat;
}
.svm-filter-view .vw-grid.is-on::before {
background-color: transparent;
background-image:
linear-gradient(#fff, #fff) , linear-gradient(#fff,#fff),
linear-gradient(#fff,#fff), linear-gradient(#fff,#fff);
background-position: 0 0, 7px 0, 0 7px, 7px 7px;
background-size: 5px 5px;
background-repeat: no-repeat;
}
.svm-filter-view .vw-list::before {
content: '';
position: absolute;
inset: 5px;
background:
linear-gradient(var(--c-muted), var(--c-muted)) 0 0 / 12px 1.5px no-repeat,
linear-gradient(var(--c-muted), var(--c-muted)) 0 5px / 12px 1.5px no-repeat,
linear-gradient(var(--c-muted), var(--c-muted)) 0 10px / 12px 1.5px no-repeat;
}
/* --- PRODUCT GRID --- */
.svm-prod-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 10px;
padding: 14px 16px;
}
.svm-prod {
background: #fff;
border-radius: 11px;
overflow: hidden;
border: 1px solid var(--c-border);
transition: transform .35s ease, box-shadow .35s ease, border-color .35s ease;
}
.svm-prod:hover {
transform: translateY(-3px);
box-shadow: 0 14px 24px -12px rgba(10, 14, 26, 0.22);
border-color: rgba(31, 167, 232, 0.35);
}
.svm-prod-img {
aspect-ratio: 4 / 3;
position: relative;
overflow: hidden;
display: flex;
align-items: center;
justify-content: center;
}
/* === ÜRÜN GÖRSELLERİ — çok parçalı gerçekçi CSS illüstrasyon (stüdyo zemin) === */
.svm-prod-img.p1 { background: radial-gradient(125% 100% at 50% 14%, #ffffff 0%, #eef6fb 68%, #dfeaf3 100%); }
.svm-prod-img.p2 { background: radial-gradient(125% 100% at 50% 14%, #fffdf6 0%, #fcf2dd 70%, #f4e6cb 100%); }
.svm-prod-img.p3 { background: radial-gradient(125% 100% at 50% 14%, #fcf7f1 0%, #f1e5d4 70%, #e6d5bd 100%); }
.svm-prod-img.p4 { background: radial-gradient(125% 100% at 50% 14%, #fbf7fd 0%, #efe3f5 70%, #e4d2ec 100%); }
/* ortak art kapsayıcı + zemin gölgesi */
.svm-pr {
position: relative;
display: block;
width: 70%;
aspect-ratio: 4 / 3;
}
.svm-pr i { position: absolute; display: block; }
.svm-pr::after {
content: "";
position: absolute;
left: 50%; bottom: 2%;
width: 76%; height: 11%;
transform: translateX(-50%);
background: radial-gradient(ellipse at center, rgba(10,14,26,0.26) 0%, transparent 68%);
filter: blur(2.5px);
}
/* ---- 1) PARFÜM ŞİŞESİ (cam gövde + amber sıvı + kapak) ---- */
.pr-perfume { width: 44%; aspect-ratio: 3 / 4; }
.pr-perfume .pf-cap {
left: 50%; top: 0;
width: 34%; height: 19%;
transform: translateX(-50%);
background: linear-gradient(180deg, #2c3756 0%, #0a0e1a 100%);
border-radius: 5px 5px 3px 3px;
box-shadow: inset 0 2px 2px rgba(255,255,255,0.2), 0 3px 6px -2px rgba(10,14,26,0.4);
z-index: 4;
}
.pr-perfume .pf-neck {
left: 50%; top: 17%;
width: 23%; height: 9%;
transform: translateX(-50%);
background: linear-gradient(180deg, #e3ebf2 0%, #b6c2d1 100%);
border-radius: 2px 2px 0 0;
z-index: 2;
}
.pr-perfume .pf-body {
left: 50%; top: 24%;
width: 76%; height: 74%;
transform: translateX(-50%);
background: linear-gradient(158deg, rgba(255,255,255,0.92) 0%, rgba(224,238,250,0.62) 48%, rgba(255,255,255,0.5) 100%);
border: 1px solid rgba(255,255,255,0.75);
border-radius: 16px 16px 20px 20px;
box-shadow: inset 0 0 0 1px rgba(255,255,255,0.4), inset -7px -7px 14px rgba(10,14,26,0.10), 0 10px 18px -7px rgba(10,14,26,0.3);
z-index: 1;
}
.pr-perfume .pf-liquid {
left: 50%; bottom: 2%;
width: 72%; height: 48%;
transform: translateX(-50%);
background: linear-gradient(180deg, #f7cd7a 0%, #e3a64a 60%, #cd8c33 100%);
border-radius: 7px 7px 18px 18px;
box-shadow: inset 0 6px 8px rgba(255,255,255,0.35), inset 0 -4px 8px rgba(120,70,10,0.3);
z-index: 2;
}
.pr-perfume .pf-label {
left: 50%; top: 50%;
width: 48%; height: 24%;
transform: translateX(-50%);
background: linear-gradient(180deg, #ffffff 0%, #f1f5f9 100%);
border-radius: 3px;
box-shadow: 0 1px 3px rgba(10,14,26,0.16), inset 0 0 0 1px rgba(10,14,26,0.05);
z-index: 3;
}
.pr-perfume .pf-shine {
left: 26%; top: 30%;
width: 7%; height: 52%;
background: linear-gradient(180deg, rgba(255,255,255,0.85) 0%, rgba(255,255,255,0) 100%);
border-radius: 8px;
z-index: 3;
}
/* ---- 2) AKILLI SAAT (önden) ---- */
.pr-watch { width: 48%; }
.pr-watch .wt-strap {
left: 50%; width: 30%;
transform: translateX(-50%);
background: linear-gradient(90deg, #1c2336, #2c3756, #1c2336);
z-index: 1;
}
.pr-watch .wt-strap.up { top: 2%; height: 40%; border-radius: 12px 12px 4px 4px; }
.pr-watch .wt-strap.dn { bottom: 8%; height: 40%; border-radius: 4px 4px 12px 12px; }
.pr-watch .wt-case {
left: 50%; top: 50%;
width: 62%; aspect-ratio: 1 / 1.12;
transform: translate(-50%, -50%);
background: linear-gradient(150deg, #39455f 0%, #11182a 100%);
border-radius: 30%;
box-shadow: 0 8px 16px -5px rgba(10,14,26,0.4), inset 0 2px 3px rgba(255,255,255,0.18);
z-index: 2;
}
.pr-watch .wt-screen {
left: 50%; top: 50%;
width: 50%; aspect-ratio: 1 / 1.12;
transform: translate(-50%, -50%);
background: radial-gradient(120% 90% at 35% 25%, #1b2a52 0%, #060b18 75%);
border-radius: 26%;
box-shadow: inset 0 0 0 1px rgba(255,255,255,0.06);
z-index: 3;
}
.pr-watch .wt-dial {
left: 50%; top: 42%;
width: 30%; height: 4px;
transform: translateX(-50%);
background: var(--c-accent);
border-radius: 4px;
box-shadow: 0 7px 0 -1px rgba(255,255,255,0.85), 0 13px 0 -2px rgba(255,255,255,0.5);
z-index: 4;
}
.pr-watch .wt-crown {
right: 14%; top: 47%;
width: 7%; height: 9%;
background: #2c3756;
border-radius: 2px;
z-index: 2;
}
/* ---- 3) DERİ OMUZ ÇANTASI ---- */
.pr-bag { width: 56%; }
.pr-bag .bg-handle {
left: 50%; top: 4%;
width: 56%; height: 38%;
transform: translateX(-50%);
border: 6px solid #7a5536;
border-bottom: 0;
border-radius: 50% 50% 0 0;
background: transparent;
z-index: 1;
}
.pr-bag .bg-body {
left: 12%; right: 12%; bottom: 6%;
height: 56%;
background: linear-gradient(168deg, #b07f50 0%, #855c38 55%, #6c4827 100%);
border-radius: 12px 12px 16px 16px;
box-shadow: inset 0 -6px 10px rgba(0,0,0,0.22), inset 0 4px 6px rgba(255,255,255,0.12), 0 8px 14px -5px rgba(10,14,26,0.3);
z-index: 2;
}
.pr-bag .bg-flap {
left: 12%; right: 12%; top: 30%;
height: 30%;
background: linear-gradient(180deg, #a9774a 0%, #8a5f3a 100%);
border-radius: 12px 12px 18px 18px;
box-shadow: 0 5px 8px -3px rgba(10,14,26,0.28), inset 0 2px 4px rgba(255,255,255,0.14);
z-index: 3;
}
.pr-bag .bg-strap {
left: 50%; top: 44%;
width: 13%; height: 26%;
transform: translateX(-50%);
background: #6c4827;
border-radius: 3px;
z-index: 4;
}
.pr-bag .bg-buckle {
left: 50%; top: 56%;
width: 9%; height: 7%;
transform: translateX(-50%);
background: linear-gradient(180deg, #f1dcae, #c6a25f);
border-radius: 2px;
box-shadow: 0 1px 2px rgba(0,0,0,0.35);
z-index: 5;
}
/* ---- 4) KABLOSUZ KULAKLIK ---- */
.pr-hp { width: 56%; }
.pr-hp .hp-band {
left: 11%; right: 11%; top: 8%;
height: 52%;
border: 11px solid #20283c;
border-bottom: 0;
border-radius: 50% 50% 0 0;
background: transparent;
box-shadow: inset 0 6px 0 rgba(255,255,255,0.06);
z-index: 1;
}
.pr-hp .hp-cup {
bottom: 14%;
width: 27%; height: 40%;
background: linear-gradient(158deg, #2b3650 0%, #0c1120 100%);
border-radius: 38% 38% 44% 44%;
box-shadow: 0 8px 14px -5px rgba(10,14,26,0.4), inset 0 3px 4px rgba(255,255,255,0.12);
z-index: 2;
}
.pr-hp .hp-cup.l { left: 8%; }
.pr-hp .hp-cup.r { right: 8%; }
.pr-hp .hp-cush {
bottom: 20%;
width: 13%; height: 26%;
background: radial-gradient(circle at 40% 35%, #3a4565, #0a0e1a);
border-radius: 50%;
z-index: 3;
}
.pr-hp .hp-cush.l { left: 15%; }
.pr-hp .hp-cush.r { right: 15%; }
.svm-prod-badge {
position: absolute;
top: 7px; left: 7px;
padding: 3px 7px;
background: var(--c-accent);
color: #fff;
font-family: 'Urbanist', 'Outfit', sans-serif;
font-size: 9px;
font-weight: 800;
border-radius: 5px;
letter-spacing: 0.02em;
z-index: 2;
box-shadow: 0 4px 8px -3px rgba(31,167,232,0.5);
}
.svm-prod-badge.sale {
background: linear-gradient(135deg, #ef4444 0%, #b91c1c 100%);
box-shadow: 0 4px 8px -3px rgba(239,68,68,0.55);
}
.svm-prod-badge.new {
background: linear-gradient(135deg, var(--c-text) 0%, #2a3550 100%);
}
.svm-prod-badge.urgent {
background: #F5C518;
color: var(--c-text);
box-shadow: 0 4px 8px -3px rgba(245,197,24,0.6);
}
.svm-prod-fav {
position: absolute;
top: 7px; right: 7px;
width: 22px; height: 22px;
background: rgba(255,255,255,0.95);
backdrop-filter: blur(2px);
border-radius: 50%;
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 12px;
color: var(--c-text);
line-height: 1;
z-index: 2;
box-shadow: 0 3px 7px rgba(10,14,26,0.16);
}
.svm-prod-trust {
position: absolute;
left: 7px;
bottom: 30px;
padding: 2px 7px;
background: rgba(255,255,255,0.95);
color: var(--c-text);
border-radius: 999px;
font-family: 'JetBrains Mono', monospace;
font-size: 7.5px;
font-weight: 700;
letter-spacing: 0.02em;
box-shadow: 0 3px 6px -2px rgba(10,14,26,0.14);
z-index: 2;
}
.svm-prod-qv {
position: absolute;
left: 7px; right: 7px;
bottom: 7px;
background: rgba(10, 14, 26, 0.9);
color: #fff;
text-align: center;
padding: 5px 0;
border-radius: 7px;
font-family: 'Urbanist', 'Outfit', sans-serif;
font-size: 9px;
font-weight: 700;
letter-spacing: 0.04em;
opacity: 0;
transform: translateY(4px);
transition: opacity .3s ease, transform .3s ease;
z-index: 2;
}
.svm-prod:hover .svm-prod-qv {
opacity: 1;
transform: translateY(0);
}
.svm-prod-info {
padding: 9px 11px 11px;
}
.svm-prod-meta {
display: flex;
align-items: center;
justify-content: space-between;
gap: 6px;
margin-bottom: 3px;
}
.svm-prod-brand {
font-family: 'JetBrains Mono', monospace;
font-size: 7.5px;
font-weight: 800;
color: var(--c-muted);
text-transform: uppercase;
letter-spacing: 0.12em;
}
.svm-prod-vendor {
font-family: 'Urbanist', 'Outfit', sans-serif;
font-size: 7px;
font-weight: 700;
color: #16a34a;
letter-spacing: 0;
}
.svm-prod-name {
font-family: 'Urbanist', 'Outfit', sans-serif;
font-size: 10.5px;
font-weight: 700;
color: var(--c-text);
margin-bottom: 5px;
letter-spacing: -0.015em;
line-height: 1.25;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
.svm-prod-stars {
display: inline-flex;
align-items: center;
gap: 5px;
margin-bottom: 6px;
line-height: 1;
}
.svm-prod-st {
font-size: 10px;
color: #F5C518;
letter-spacing: 0.04em;
}
.svm-prod-st .dim { color: var(--c-border); }
.svm-prod-rc {
color: var(--c-muted);
font-family: 'Urbanist', 'Outfit', sans-serif;
font-weight: 600;
font-size: 8.5px;
letter-spacing: 0;
}
.svm-prod-sizes {
display: inline-flex;
gap: 3px;
margin-bottom: 6px;
}
.svm-prod-sizes span {
width: 19px;
height: 19px;
border-radius: 5px;
background: #fff;
border: 1px solid var(--c-border);
font-family: 'Urbanist', 'Outfit', sans-serif;
font-size: 8.5px;
font-weight: 700;
color: var(--c-text);
display: inline-grid;
place-items: center;
line-height: 1;
}
.svm-prod-sizes span.is-on {
background: var(--c-text);
color: #fff;
border-color: var(--c-text);
}
.svm-prod-sizes span.oos {
color: var(--c-muted);
background: #f5f7fa;
text-decoration: line-through;
text-decoration-thickness: 1px;
}
.svm-prod-colors {
display: inline-flex;
gap: 4px;
margin-bottom: 6px;
}
.svm-prod-colors i {
width: 12px; height: 12px;
border-radius: 50%;
border: 2px solid #fff;
box-shadow: 0 0 0 1px var(--c-border);
}
.svm-prod-colors i.is-on {
box-shadow: 0 0 0 1.5px var(--c-text);
}
.svm-prod-stock-bar {
position: relative;
height: 14px;
margin-bottom: 7px;
background: #fff5f5;
border: 1px solid rgba(239,68,68,0.15);
border-radius: 4px;
overflow: hidden;
display: flex;
align-items: center;
}
.svm-prod-stock-fill {
position: absolute;
left: 0; top: 0; bottom: 0;
width: 85%;
background: linear-gradient(90deg, #fbbf24, #ef4444);
}
.svm-prod-stock-lbl {
position: relative;
z-index: 2;
font-family: 'JetBrains Mono', monospace;
font-size: 7.5px;
font-weight: 800;
color: var(--c-text);
letter-spacing: 0.02em;
padding: 0 6px;
}
.svm-prod-feat {
display: inline-flex;
gap: 4px;
margin-bottom: 6px;
}
.svm-prod-feat span {
display: inline-flex;
align-items: center;
gap: 2px;
padding: 2px 6px;
background: rgba(31,167,232,0.08);
color: var(--c-accent-2);
border-radius: 4px;
font-family: 'Urbanist', 'Outfit', sans-serif;
font-size: 7.5px;
font-weight: 700;
letter-spacing: 0.005em;
}
.svm-prod-feat i {
font-style: normal;
font-weight: 900;
}
.svm-prod-bottom {
display: flex;
align-items: flex-end;
justify-content: space-between;
gap: 6px;
}
.svm-prod-prices {
display: inline-flex;
flex-direction: column;
gap: 1px;
}
.svm-prod-price {
font-family: 'Bricolage Grotesque', 'DM Sans', sans-serif;
font-size: 13.5px;
font-weight: 800;
color: var(--c-text);
letter-spacing: -0.025em;
line-height: 1;
}
.svm-prod-old {
font-family: 'Urbanist', 'Outfit', sans-serif;
font-size: 9.5px;
color: var(--c-muted);
text-decoration: line-through;
text-decoration-thickness: 1px;
line-height: 1;
}
.svm-prod-install {
font-family: 'Urbanist', 'Outfit', sans-serif;
font-size: 8px;
color: var(--c-muted);
line-height: 1.2;
}
.svm-prod-install b {
color: #16a34a;
font-weight: 800;
}
.svm-prod-add {
display: inline-grid;
place-items: center;
width: 28px; height: 28px;
background: var(--c-text);
color: #fff;
border-radius: 7px;
font-family: 'Urbanist', 'Outfit', sans-serif;
font-size: 17px;
font-weight: 600;
line-height: 1;
box-shadow: 0 6px 12px -5px rgba(10,14,26,0.45);
flex-shrink: 0;
}
.svm-prod-social {
margin-top: 7px;
padding-top: 6px;
border-top: 1px dashed var(--c-border);
display: inline-flex;
align-items: center;
gap: 5px;
font-family: 'Urbanist', 'Outfit', sans-serif;
font-size: 8px;
font-weight: 500;
color: var(--c-muted);
letter-spacing: 0;
}
.svm-prod-social b {
color: var(--c-text);
font-weight: 800;
}
.svm-prod-eye {
width: 11px; height: 7px;
border-radius: 50% / 60% 60% 40% 40%;
background: var(--c-text);
position: relative;
display: inline-block;
}
.svm-prod-eye::after {
content: '';
position: absolute;
inset: 2px 3.5px;
background: #fff;
border-radius: 50%;
}
/* --- TRUST FOOTER --- */
.svm-trust-foot {
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
padding: 10px 16px;
background: linear-gradient(180deg, #fff, #fafbfd);
border-top: 1px solid var(--c-border);
}
.svm-trust-foot-l {
display: inline-flex;
align-items: center;
gap: 7px;
}
.svm-trust-foot-ic { font-size: 12px; line-height: 1; }
.svm-trust-foot-t {
font-family: 'Urbanist', 'Outfit', sans-serif;
font-size: 8.5px;
font-weight: 700;
color: var(--c-text);
letter-spacing: 0;
}
.svm-trust-foot-pay {
display: inline-flex;
gap: 4px;
}
.svm-pay {
padding: 2px 6px;
border: 1px solid var(--c-border);
border-radius: 3px;
background: #fff;
font-family: 'Urbanist', 'Outfit', sans-serif;
font-size: 7.5px;
font-weight: 800;
letter-spacing: 0.04em;
color: var(--c-muted);
}
.svm-pay.visa { color: #1a1f71; border-color: rgba(26,31,113,0.25); }
.svm-pay.mc { color: #eb001b; border-color: rgba(235,0,27,0.22); }
.svm-pay.amex { color: #2e77bb; border-color: rgba(46,119,187,0.25); }
.svm-pay.iyz { color: #1FA7E8; border-color: rgba(31,167,232,0.25); font-style: italic; }
.svm-pay.tro { color: #00a651; border-color: rgba(0,166,81,0.22); }
/* --- LIVE SOCIAL PROOF TOAST --- */
.svm-toast {
position: absolute;
left: 14px;
bottom: 14px;
display: inline-flex;
align-items: center;
gap: 9px;
padding: 9px 14px 9px 9px;
background: var(--c-text);
color: #fff;
border-radius: 11px;
font-family: 'Urbanist', 'Outfit', sans-serif;
box-shadow: 0 16px 30px -10px rgba(10, 14, 26, 0.55);
animation: svmToast 6.5s ease-in-out infinite;
white-space: nowrap;
pointer-events: none;
z-index: 5;
}
@keyframes svmToast {
0%, 100% { opacity: 0; transform: translateX(-14px); }
10%, 60% { opacity: 1; transform: translateX(0); }
}
.svm-toast-av {
width: 26px; height: 26px;
border-radius: 50%;
background: linear-gradient(135deg, var(--c-accent), var(--c-accent-2));
color: #fff;
font-family: 'Urbanist', 'Outfit', sans-serif;
font-size: 10px;
font-weight: 800;
letter-spacing: 0;
display: inline-grid;
place-items: center;
line-height: 1;
flex-shrink: 0;
}
.svm-toast-body {
display: inline-flex;
flex-direction: column;
line-height: 1.2;
}
.svm-toast-l {
font-size: 9.5px;
font-weight: 500;
color: rgba(255,255,255,0.8);
letter-spacing: 0;
}
.svm-toast-l b { color: #fff; font-weight: 800; }
.svm-toast-s {
font-size: 9px;
font-weight: 700;
color: #fff;
letter-spacing: -0.005em;
}
.svm-toast-time {
margin-left: 4px;
padding-left: 8px;
border-left: 1px solid rgba(255,255,255,0.18);
font-family: 'JetBrains Mono', monospace;
font-size: 7.5px;
font-weight: 700;
color: rgba(255,255,255,0.55);
letter-spacing: 0.04em;
}
/* ==========================================================
MOCKUP DETAY: 03 Performans Pazarlama Dashboard v3 — sıfırdan 2026-05-27
========================================================== */
.svm-dash {
width: 100%;
max-width: 620px;
background: #fff;
border-radius: 16px;
box-shadow: 0 28px 60px -24px rgba(10, 14, 26, 0.28);
border: 1px solid var(--c-border);
overflow: hidden;
display: flex;
flex-direction: column;
font-family: 'Urbanist', 'Outfit', sans-serif;
}
/* Top app bar */
.svm-dbar {
display: flex;
align-items: center;
justify-content: space-between;
padding: 10px 14px;
background: #fff;
border-bottom: 1px solid var(--c-border);
gap: 12px;
}
.svm-dbar-l { display: inline-flex; align-items: center; gap: 12px; min-width: 0; }
.svm-dbar-r { display: inline-flex; align-items: center; gap: 10px; flex-shrink: 0; }
.svm-dbar-logo {
font-family: 'Bricolage Grotesque', serif;
font-size: 14px;
font-weight: 800;
color: var(--c-text);
letter-spacing: -0.015em;
display: inline-flex;
align-items: center;
gap: 4px;
line-height: 1;
}
.svm-dbar-logo-dot {
width: 5px; height: 5px;
background: var(--c-accent);
border-radius: 50%;
display: inline-block;
}
.svm-dbar-logo i {
font-family: 'JetBrains Mono', monospace;
font-size: 8px;
font-weight: 700;
color: var(--c-muted);
letter-spacing: 0.1em;
font-style: normal;
text-transform: uppercase;
padding: 2px 5px;
background: #f1f5f9;
border-radius: 4px;
margin-left: 4px;
}
.svm-dbar-ws {
display: inline-flex;
align-items: center;
gap: 5px;
padding: 4px 8px 4px 4px;
background: #f5f7fa;
border: 1px solid var(--c-border);
border-radius: 7px;
}
.svm-dbar-ws-mark {
width: 16px; height: 16px;
background: linear-gradient(135deg, #0a0e1a, #2a3354);
color: #fff;
border-radius: 4px;
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 8px;
font-weight: 800;
}
.svm-dbar-ws-name {
font-size: 9.5px;
font-weight: 700;
color: var(--c-text);
letter-spacing: -0.01em;
}
.svm-dbar-ws-caret {
width: 0; height: 0;
border-left: 3px solid transparent;
border-right: 3px solid transparent;
border-top: 4px solid var(--c-muted);
}
.svm-dbar-crumb {
display: inline-flex;
align-items: center;
gap: 4px;
font-family: 'JetBrains Mono', monospace;
font-size: 8.5px;
font-weight: 600;
color: var(--c-muted);
letter-spacing: 0.04em;
}
.svm-dbar-crumb i { font-style: normal; color: var(--c-muted-soft, #cbd5e1); opacity: 0.6; }
.svm-dbar-crumb .on { color: var(--c-text); font-weight: 700; }
.svm-dbar-search {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 5px 7px 5px 8px;
background: #f5f7fa;
border: 1px solid var(--c-border);
border-radius: 7px;
min-width: 180px;
}
.svm-dbar-search-ic {
width: 9px; height: 9px;
border: 1.4px solid var(--c-muted);
border-radius: 50%;
position: relative;
flex-shrink: 0;
}
.svm-dbar-search-ic::after {
content: '';
position: absolute;
right: -3px;
bottom: -3px;
width: 4px; height: 1.4px;
background: var(--c-muted);
transform: rotate(45deg);
border-radius: 1px;
}
.svm-dbar-search-text {
font-size: 9px;
font-weight: 500;
color: var(--c-muted);
flex: 1;
letter-spacing: -0.005em;
}
.svm-dbar-search-k {
font-family: 'JetBrains Mono', monospace;
font-size: 7.5px;
font-weight: 700;
color: var(--c-muted);
padding: 2px 5px;
background: #fff;
border: 1px solid var(--c-border);
border-radius: 4px;
letter-spacing: 0.04em;
}
.svm-dbar-bell {
position: relative;
width: 24px; height: 24px;
background: #f5f7fa;
border: 1px solid var(--c-border);
border-radius: 7px;
display: inline-flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.svm-dbar-bell-ic {
width: 10px; height: 10px;
background:
radial-gradient(circle at 50% 35%, var(--c-text) 0 28%, transparent 30%),
linear-gradient(180deg, transparent 0 30%, var(--c-text) 30% 70%, transparent 70%);
clip-path: polygon(20% 70%, 80% 70%, 75% 40%, 50% 15%, 25% 40%);
background: var(--c-text);
-webkit-mask: linear-gradient(180deg, transparent 0 5%, #000 5% 75%, transparent 75%) center/8px 8px no-repeat;
}
.svm-dbar-bell-badge {
position: absolute;
top: -4px;
right: -4px;
min-width: 13px; height: 13px;
padding: 0 3px;
background: #ef4444;
color: #fff;
border-radius: 999px;
font-size: 7.5px;
font-weight: 800;
display: inline-flex;
align-items: center;
justify-content: center;
border: 1.5px solid #fff;
line-height: 1;
}
.svm-dbar-avatar {
position: relative;
width: 24px; height: 24px;
background: linear-gradient(135deg, var(--c-accent), var(--c-accent-2));
color: #fff;
border-radius: 50%;
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 8px;
font-weight: 800;
letter-spacing: 0.02em;
flex-shrink: 0;
}
.svm-dbar-avatar-on {
position: absolute;
right: -1px;
bottom: -1px;
width: 7px; height: 7px;
background: #16a34a;
border: 1.5px solid #fff;
border-radius: 50%;
}
/* Page header */
.svm-dpg {
display: flex;
align-items: center;
justify-content: space-between;
padding: 14px 16px 12px;
border-bottom: 1px dashed var(--c-border);
gap: 12px;
}
.svm-dpg-l { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.svm-dpg-r { display: inline-flex; align-items: center; gap: 8px; flex-shrink: 0; }
.svm-dpg-title-row { display: inline-flex; align-items: center; gap: 8px; }
.svm-dpg-title {
font-family: 'Bricolage Grotesque', serif;
font-size: 18px;
font-weight: 800;
color: var(--c-text);
letter-spacing: -0.015em;
line-height: 1;
}
.svm-dpg-live {
display: inline-flex;
align-items: center;
gap: 4px;
padding: 3px 7px 3px 5px;
background: rgba(22, 163, 74, 0.1);
color: #16a34a;
border-radius: 999px;
font-size: 8px;
font-weight: 800;
letter-spacing: 0.1em;
}
.svm-dpg-live i {
width: 5px; height: 5px;
background: #16a34a;
border-radius: 50%;
box-shadow: 0 0 0 0 rgba(22,163,74,0.6);
animation: svmAdsPulse 1.8s ease-out infinite;
}
@keyframes svmAdsPulse {
0% { box-shadow: 0 0 0 0 rgba(22,163,74,0.55); }
70% { box-shadow: 0 0 0 7px rgba(22,163,74,0); }
100% { box-shadow: 0 0 0 0 rgba(22,163,74,0); }
}
.svm-dpg-sub {
font-size: 9px;
font-weight: 500;
color: var(--c-muted);
letter-spacing: -0.005em;
}
.svm-dpg-seg {
display: inline-flex;
padding: 2px;
background: #f5f7fa;
border: 1px solid var(--c-border);
border-radius: 7px;
gap: 1px;
}
.svm-dpg-seg-i {
padding: 4px 8px;
font-size: 9px;
font-weight: 700;
color: var(--c-muted);
letter-spacing: 0.01em;
border-radius: 5px;
}
.svm-dpg-seg-i.on {
background: #fff;
color: var(--c-text);
box-shadow: 0 1px 2px rgba(10,14,26,0.08);
}
.svm-dpg-date {
display: inline-flex;
align-items: center;
gap: 5px;
padding: 5px 8px;
background: #f5f7fa;
border: 1px solid var(--c-border);
border-radius: 7px;
font-size: 9px;
font-weight: 700;
color: var(--c-text);
letter-spacing: -0.005em;
}
.svm-dpg-date-ic {
width: 10px; height: 10px;
border: 1.4px solid var(--c-text);
border-radius: 2px;
position: relative;
}
.svm-dpg-date-ic::before {
content: '';
position: absolute;
top: -2px;
left: 2px;
width: 1.4px;
height: 3px;
background: var(--c-text);
box-shadow: 4px 0 0 var(--c-text);
}
.svm-dpg-date-caret {
width: 0; height: 0;
border-left: 3px solid transparent;
border-right: 3px solid transparent;
border-top: 4px solid var(--c-muted);
margin-left: 1px;
}
.svm-dpg-export {
padding: 5px 10px;
background: var(--c-text);
color: #fff;
border-radius: 7px;
font-size: 9px;
font-weight: 800;
letter-spacing: -0.005em;
}
/* KPI row */
.svm-dk {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 8px;
padding: 14px 16px 4px;
}
.svm-dk-c {
position: relative;
padding: 10px 12px 10px;
background: #fafbfd;
border: 1px solid var(--c-border);
border-radius: 10px;
display: flex;
flex-direction: column;
gap: 3px;
overflow: hidden;
}
.svm-dk-c.on {
background: linear-gradient(135deg, rgba(31,167,232,0.08), #fff);
border-color: rgba(31,167,232,0.32);
box-shadow: 0 4px 12px -6px rgba(31,167,232,0.4);
}
.svm-dk-c.on::after {
content: '';
position: absolute;
top: 0; left: 0;
width: 3px; height: 100%;
background: var(--c-accent);
}
.svm-dk-label {
font-family: 'JetBrains Mono', monospace;
font-size: 7.5px;
font-weight: 800;
color: var(--c-muted);
letter-spacing: 0.14em;
text-transform: uppercase;
}
.svm-dk-val {
font-family: 'Urbanist', 'Outfit', sans-serif;
font-size: 18px;
font-weight: 900;
color: var(--c-text);
letter-spacing: -0.015em;
line-height: 1;
}
.svm-dk-val small {
font-size: 11px;
font-weight: 700;
color: var(--c-muted);
margin-right: 1px;
}
.svm-dk-c.on .svm-dk-val { color: var(--c-accent-2); }
.svm-dk-c.on .svm-dk-val small { color: rgba(14, 143, 207, 0.55); }
.svm-dk-delta {
font-size: 8.5px;
font-weight: 700;
letter-spacing: 0.01em;
}
.svm-dk-delta.up { color: #16a34a; }
.svm-dk-delta.down { color: #ef4444; }
.svm-dk-spark {
width: 100%;
height: 14px;
margin-top: 2px;
opacity: 0.85;
}
/* Chart + donut grid */
.svm-dgrid {
display: grid;
grid-template-columns: 1.5fr 1fr;
gap: 10px;
padding: 10px 16px 14px;
}
.svm-dchart {
position: relative;
padding: 10px 12px 6px;
background: linear-gradient(180deg, #fafbfd, #fff);
border: 1px solid var(--c-border);
border-radius: 10px;
min-width: 0;
}
.svm-dchart-head {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 4px;
}
.svm-dchart-title {
font-size: 10px;
font-weight: 800;
color: var(--c-text);
letter-spacing: -0.015em;
}
.svm-dchart-leg {
display: inline-flex;
gap: 8px;
}
.svm-dchart-leg span {
display: inline-flex;
align-items: center;
gap: 3px;
font-size: 8px;
font-weight: 700;
color: var(--c-muted);
}
.svm-dchart-leg i {
width: 7px; height: 2px;
border-radius: 2px;
display: inline-block;
}
.svm-dchart-svg {
width: 100%;
height: 80px;
display: block;
}
.svm-dchart-grid line {
stroke: var(--c-border);
stroke-width: 0.5;
stroke-dasharray: 1.5 1.5;
}
.svm-dchart-area {
opacity: 0;
animation: svmDChartFade 0.6s ease 1.6s forwards;
}
@keyframes svmDChartFade { to { opacity: 1; } }
.svm-dchart-line {
fill: none;
stroke: var(--c-accent);
stroke-width: 1.8;
stroke-linejoin: round;
stroke-linecap: round;
stroke-dasharray: 400;
stroke-dashoffset: 400;
animation: svmDChartDraw 2.4s ease-out forwards;
filter: drop-shadow(0 2px 4px rgba(31,167,232,0.35));
}
.svm-dchart-line.org {
stroke: var(--c-text);
stroke-width: 1.2;
opacity: 0.45;
stroke-dasharray: 3 3;
animation: none;
filter: none;
}
@keyframes svmDChartDraw { to { stroke-dashoffset: 0; } }
.svm-dchart-pt {
fill: #fff;
stroke: var(--c-accent);
stroke-width: 1.8;
filter: drop-shadow(0 1px 3px rgba(31,167,232,0.6));
}
.svm-dchart-tip {
position: absolute;
top: 12px;
transform: translateX(-50%);
background: var(--c-text);
color: #fff;
border-radius: 6px;
padding: 4px 7px;
display: flex;
flex-direction: column;
align-items: center;
pointer-events: none;
box-shadow: 0 6px 12px -4px rgba(10,14,26,0.4);
white-space: nowrap;
}
.svm-dchart-tip::after {
content: '';
position: absolute;
bottom: -3px; left: 50%;
transform: translateX(-50%) rotate(45deg);
width: 6px; height: 6px;
background: var(--c-text);
}
.svm-dchart-tip span {
font-size: 7px;
font-weight: 600;
color: rgba(255,255,255,0.7);
letter-spacing: 0.06em;
}
.svm-dchart-tip b {
font-size: 9.5px;
font-weight: 900;
letter-spacing: -0.02em;
line-height: 1.1;
}
.svm-dchart-axis {
display: flex;
justify-content: space-between;
margin-top: 2px;
font-family: 'JetBrains Mono', monospace;
font-size: 7px;
font-weight: 700;
color: var(--c-muted);
}
/* Donut */
.svm-ddonut {
padding: 10px 12px;
background: #fafbfd;
border: 1px solid var(--c-border);
border-radius: 10px;
display: flex;
flex-direction: column;
gap: 6px;
min-width: 0;
}
.svm-ddonut-head span {
font-size: 10px;
font-weight: 800;
color: var(--c-text);
letter-spacing: -0.015em;
}
.svm-ddonut-stage {
position: relative;
width: 78px;
height: 78px;
margin: 2px auto;
}
.svm-ddonut-svg {
width: 100%;
height: 100%;
transform: rotate(-90deg);
}
.svm-ddonut-bg {
fill: none;
stroke: #eef1f5;
stroke-width: 5;
}
.svm-ddonut-seg {
fill: none;
stroke-width: 5;
stroke-linecap: butt;
animation: svmDonutDraw 1.6s ease-out forwards;
transform-origin: center;
}
@keyframes svmDonutDraw {
from { stroke-dasharray: 0 100 !important; }
}
.svm-ddonut-seg.s1 { stroke: #1FA7E8; }
.svm-ddonut-seg.s2 { stroke: #0a0e1a; }
.svm-ddonut-seg.s3 { stroke: #f5c518; }
.svm-ddonut-seg.s4 { stroke: #cbd5e1; }
.svm-ddonut-center {
position: absolute;
inset: 0;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 0;
}
.svm-ddonut-num {
font-size: 14px;
font-weight: 900;
color: var(--c-text);
letter-spacing: -0.015em;
line-height: 1;
}
.svm-ddonut-lbl {
font-family: 'JetBrains Mono', monospace;
font-size: 6.5px;
font-weight: 700;
color: var(--c-muted);
letter-spacing: 0.1em;
text-transform: uppercase;
}
.svm-ddonut-leg {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
gap: 3px;
}
.svm-ddonut-leg li {
display: flex;
align-items: center;
gap: 5px;
font-size: 8.5px;
}
.svm-ddonut-leg li i {
width: 7px; height: 7px;
border-radius: 2px;
flex-shrink: 0;
}
.svm-ddonut-leg li i.s1 { background: #1FA7E8; }
.svm-ddonut-leg li i.s2 { background: #0a0e1a; }
.svm-ddonut-leg li i.s3 { background: #f5c518; }
.svm-ddonut-leg li i.s4 { background: #cbd5e1; }
.svm-ddonut-leg li b {
font-weight: 700;
color: var(--c-text);
flex: 1;
letter-spacing: -0.005em;
}
.svm-ddonut-leg li span {
font-family: 'JetBrains Mono', monospace;
font-weight: 700;
color: var(--c-muted);
letter-spacing: 0.02em;
}
/* Campaign table */
.svm-dtable {
margin: 0 16px 12px;
border: 1px solid var(--c-border);
border-radius: 10px;
overflow: hidden;
}
.svm-dtable-head {
display: flex;
align-items: center;
justify-content: space-between;
padding: 8px 12px;
background: #fafbfd;
border-bottom: 1px solid var(--c-border);
}
.svm-dtable-title {
font-size: 10px;
font-weight: 800;
color: var(--c-text);
letter-spacing: -0.015em;
}
.svm-dtable-link {
font-family: 'JetBrains Mono', monospace;
font-size: 8px;
font-weight: 700;
color: var(--c-accent);
letter-spacing: 0.04em;
}
.svm-dtr {
display: grid;
grid-template-columns: 1.6fr 1.1fr 0.8fr 0.7fr 0.6fr;
gap: 8px;
padding: 8px 12px;
align-items: center;
font-size: 9px;
border-top: 1px solid var(--c-border);
}
.svm-dtr:first-of-type { border-top: 0; }
.svm-dth {
background: #fff;
font-family: 'JetBrains Mono', monospace;
font-size: 7.5px;
font-weight: 800;
color: var(--c-muted);
text-transform: uppercase;
letter-spacing: 0.1em;
padding-top: 6px; padding-bottom: 6px;
}
.svm-dtc-name {
display: inline-flex;
align-items: center;
gap: 7px;
min-width: 0;
}
.svm-dch {
width: 16px; height: 16px;
border-radius: 5px;
flex-shrink: 0;
display: inline-flex;
align-items: center;
justify-content: center;
color: #fff;
font-size: 8px;
font-weight: 900;
}
.svm-dch.meta { background: linear-gradient(135deg, #0866ff, #1877f2); }
.svm-dch.meta::before { content: 'f'; font-family: Georgia, serif; }
.svm-dch.google { background: #fff; border: 1px solid var(--c-border); }
.svm-dch.google::before {
content: '';
width: 8px; height: 8px;
background: conic-gradient(from 0deg, #ea4335 0 25%, #fbbc05 25% 50%, #34a853 50% 75%, #4285f4 75% 100%);
border-radius: 50%;
}
.svm-dch.tiktok { background: #0a0e1a; }
.svm-dch.tiktok::before { content: '♪'; color: #25f4ee; }
.svm-dtc-col { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.svm-dtc-col b {
font-weight: 700;
color: var(--c-text);
letter-spacing: -0.005em;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.svm-dtc-col em {
font-style: normal;
font-size: 7.5px;
font-weight: 600;
color: var(--c-muted);
letter-spacing: 0.02em;
display: inline-flex;
align-items: center;
gap: 4px;
}
.svm-dst {
width: 5px; height: 5px;
border-radius: 50%;
display: inline-block;
}
.svm-dst.on { background: #16a34a; box-shadow: 0 0 0 2px rgba(22,163,74,0.18); }
.svm-dst.warn { background: #f59e0b; box-shadow: 0 0 0 2px rgba(245,158,11,0.18); }
.svm-dtc-bar {
display: flex;
flex-direction: column;
gap: 3px;
min-width: 0;
}
.svm-dtc-bar-track {
height: 4px;
background: #eef1f5;
border-radius: 999px;
overflow: hidden;
width: 100%;
position: relative;
}
.svm-dtc-bar-fill {
height: 100%;
background: linear-gradient(90deg, var(--c-accent), var(--c-accent-2));
border-radius: 999px;
animation: svmDBarGrow 1.6s ease-out forwards;
width: 0;
}
.svm-dtc-bar-fill.warn { background: linear-gradient(90deg, #f59e0b, #ef4444); }
@keyframes svmDBarGrow {
from { width: 0; }
}
.svm-dtc-bar em {
font-style: normal;
font-family: 'JetBrains Mono', monospace;
font-size: 7.5px;
font-weight: 700;
color: var(--c-muted);
letter-spacing: 0.02em;
}
.svm-dtc-num {
font-weight: 800;
color: var(--c-text);
letter-spacing: -0.01em;
font-variant-numeric: tabular-nums;
}
.svm-dtc-roas {
font-weight: 800;
text-align: right;
letter-spacing: -0.01em;
font-variant-numeric: tabular-nums;
}
.svm-dtc-roas.up { color: #16a34a; }
.svm-dtc-roas.down { color: #ef4444; }
/* Insight banner */
.svm-dinsight {
display: flex;
align-items: center;
gap: 10px;
margin: 0 16px 14px;
padding: 10px 14px;
background: linear-gradient(135deg, rgba(31,167,232,0.08), rgba(245,197,24,0.08));
border: 1px solid rgba(31,167,232,0.24);
border-radius: 10px;
}
.svm-dinsight-ic {
width: 22px; height: 22px;
background: linear-gradient(135deg, var(--c-accent), var(--c-accent-2));
color: #fff;
border-radius: 7px;
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 12px;
font-weight: 900;
flex-shrink: 0;
}
.svm-dinsight-text {
flex: 1;
font-size: 9.5px;
color: var(--c-text);
letter-spacing: -0.005em;
line-height: 1.45;
}
.svm-dinsight-text b { font-weight: 800; color: var(--c-accent-2); }
.svm-dinsight-text b:first-of-type { color: var(--c-text); }
.svm-dinsight-btn {
padding: 5px 10px;
background: var(--c-text);
color: #fff;
border-radius: 6px;
font-size: 8.5px;
font-weight: 800;
letter-spacing: 0.02em;
flex-shrink: 0;
}
/* ==========================================================
MOCKUP DETAY: 04 SEO / SERP v3 — sıfırdan 2026-05-27
========================================================== */
.svm-serp {
width: 100%;
max-width: 620px;
background: #fff;
border-radius: 16px;
padding: 0;
box-shadow: 0 28px 60px -24px rgba(10, 14, 26, 0.28);
border: 1px solid var(--c-border);
overflow: hidden;
font-family: 'Urbanist', 'Outfit', sans-serif;
}
/* Top bar — Google header with logo + search + grid + profile */
.svm-serp-topbar {
display: flex;
align-items: center;
gap: 12px;
padding: 12px 16px 12px;
border-bottom: 1px solid var(--c-border);
}
.svm-serp-logo {
font-size: 22px;
font-weight: 700;
letter-spacing: -0.012em;
line-height: 1;
flex-shrink: 0;
}
.svm-serp-logo .g { display: inline-block; }
.svm-serp-logo .g-b { color: #4285f4; }
.svm-serp-logo .g-r { color: #ea4335; }
.svm-serp-logo .g-y { color: #fbbc05; }
.svm-serp-logo .g-g { color: #34a853; }
.svm-serp-sbar {
flex: 1;
display: inline-flex;
align-items: center;
gap: 10px;
background: #fff;
border: 1px solid var(--c-border);
border-radius: 999px;
padding: 8px 16px;
box-shadow: 0 2px 5px -3px rgba(10,14,26,0.08);
min-width: 0;
}
.svm-serp-sbar-q {
flex: 1;
font-size: 11px;
font-weight: 500;
color: var(--c-text);
line-height: 1;
letter-spacing: -0.005em;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.svm-serp-sbar-clear {
font-size: 11px;
font-weight: 400;
color: var(--c-muted);
flex-shrink: 0;
padding: 0 4px;
border-right: 1px solid var(--c-border);
}
.svm-serp-sbar-mic {
display: inline-grid;
grid-template-columns: 1fr 1fr;
gap: 2px;
width: 11px;
flex-shrink: 0;
}
.svm-serp-sbar-mic span {
width: 4.5px; height: 4.5px;
border-radius: 1px;
}
.svm-serp-sbar-mic .g-r { background: #ea4335; }
.svm-serp-sbar-mic .g-y { background: #fbbc05; }
.svm-serp-sbar-mic .g-g { background: #34a853; }
.svm-serp-sbar-mic .g-b { background: #4285f4; }
.svm-serp-sbar-cam {
width: 12px; height: 9px;
border: 1.4px solid var(--c-muted);
border-radius: 2px;
position: relative;
flex-shrink: 0;
}
.svm-serp-sbar-cam::before {
content: '';
position: absolute;
inset: 1.5px;
background:
radial-gradient(circle at center, transparent 0 30%, var(--c-muted) 31% 38%, transparent 39%);
}
.svm-serp-sbar-glass {
width: 13px; height: 13px;
border: 2px solid #4285f4;
border-radius: 50%;
position: relative;
flex-shrink: 0;
}
.svm-serp-sbar-glass::after {
content: '';
position: absolute;
right: -3px; bottom: -3px;
width: 5px; height: 2px;
background: #4285f4;
transform: rotate(45deg);
border-radius: 1px;
}
.svm-serp-grid {
width: 18px; height: 18px;
background:
radial-gradient(circle at 25% 25%, var(--c-muted) 0 22%, transparent 23%),
radial-gradient(circle at 50% 25%, var(--c-muted) 0 22%, transparent 23%),
radial-gradient(circle at 75% 25%, var(--c-muted) 0 22%, transparent 23%),
radial-gradient(circle at 25% 50%, var(--c-muted) 0 22%, transparent 23%),
radial-gradient(circle at 50% 50%, var(--c-muted) 0 22%, transparent 23%),
radial-gradient(circle at 75% 50%, var(--c-muted) 0 22%, transparent 23%),
radial-gradient(circle at 25% 75%, var(--c-muted) 0 22%, transparent 23%),
radial-gradient(circle at 50% 75%, var(--c-muted) 0 22%, transparent 23%),
radial-gradient(circle at 75% 75%, var(--c-muted) 0 22%, transparent 23%);
flex-shrink: 0;
}
.svm-serp-pp {
width: 22px; height: 22px;
background: linear-gradient(135deg, var(--c-accent), var(--c-accent-2));
color: #fff;
border-radius: 50%;
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 8px;
font-weight: 800;
flex-shrink: 0;
}
/* Filter tabs */
.svm-serp-tabs {
display: flex;
align-items: center;
gap: 4px;
padding: 6px 16px 0;
border-bottom: 1px solid var(--c-border);
}
.svm-serp-tab {
display: inline-flex;
align-items: center;
gap: 5px;
padding: 8px 10px;
font-size: 9.5px;
font-weight: 500;
color: var(--c-muted);
position: relative;
letter-spacing: -0.005em;
}
.svm-serp-tab i {
width: 11px; height: 11px;
display: inline-block;
background: currentColor;
-webkit-mask-position: center;
mask-position: center;
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
-webkit-mask-size: contain;
mask-size: contain;
opacity: 0.7;
}
.svm-serp-tab .ic-all { background: currentColor; -webkit-mask: linear-gradient(currentColor, currentColor) center/4px 4px no-repeat, linear-gradient(currentColor, currentColor) 0 0/4px 4px no-repeat, linear-gradient(currentColor, currentColor) 100% 0/4px 4px no-repeat, linear-gradient(currentColor, currentColor) 0 100%/4px 4px no-repeat, linear-gradient(currentColor, currentColor) 100% 100%/4px 4px no-repeat; mask: linear-gradient(currentColor, currentColor) center/4px 4px no-repeat; }
.svm-serp-tab .ic-img { border: 1.4px solid currentColor; background: transparent; border-radius: 2px; position: relative; }
.svm-serp-tab .ic-img::after { content: ''; position: absolute; bottom: 1px; left: 1px; right: 1px; height: 5px; background: currentColor; clip-path: polygon(0 100%, 30% 50%, 55% 80%, 80% 30%, 100% 100%); border-radius: 1px; }
.svm-serp-tab .ic-map { border: 1.4px solid currentColor; background: transparent; border-radius: 50%; position: relative; }
.svm-serp-tab .ic-map::after { content: ''; position: absolute; left: 50%; top: 60%; width: 3px; height: 3px; background: currentColor; border-radius: 50%; transform: translate(-50%, -50%); }
.svm-serp-tab .ic-vid { border: 1.4px solid currentColor; background: transparent; border-radius: 2px; position: relative; }
.svm-serp-tab .ic-vid::after { content: ''; position: absolute; left: 3px; top: 50%; transform: translateY(-50%); width: 0; height: 0; border-left: 4px solid currentColor; border-top: 3px solid transparent; border-bottom: 3px solid transparent; }
.svm-serp-tab .ic-news { background: transparent; border: 1.4px solid currentColor; border-radius: 1.5px; position: relative; }
.svm-serp-tab .ic-news::after { content: ''; position: absolute; inset: 2px; background: linear-gradient(currentColor, currentColor) 0 0/100% 1px no-repeat, linear-gradient(currentColor, currentColor) 0 50%/100% 1px no-repeat, linear-gradient(currentColor, currentColor) 0 100%/60% 1px no-repeat; }
.svm-serp-tab .ic-shop { background: transparent; border: 1.4px solid currentColor; border-top: 0; border-radius: 1.5px; position: relative; }
.svm-serp-tab .ic-shop::after { content: ''; position: absolute; left: 1px; right: 1px; top: -3px; height: 3px; border: 1.4px solid currentColor; border-bottom: 0; border-radius: 50% 50% 0 0; }
.svm-serp-tab.is-active {
color: #1a73e8;
font-weight: 700;
}
.svm-serp-tab.is-active::after {
content: '';
position: absolute;
left: 8px; right: 8px;
bottom: -1px;
height: 3px;
background: #1a73e8;
border-radius: 2px 2px 0 0;
}
.svm-serp-tab.more {
color: var(--c-muted);
font-size: 13px;
padding: 6px 8px;
}
.svm-serp-meta-row {
display: flex;
align-items: center;
justify-content: space-between;
padding: 8px 16px;
font-size: 9px;
color: var(--c-muted);
border-bottom: 1px solid var(--c-border);
}
.svm-serp-results { letter-spacing: -0.005em; }
.svm-serp-tools { font-weight: 600; color: var(--c-text); }
/* Body grid */
.svm-serp-body {
display: grid;
grid-template-columns: 1fr 200px;
gap: 16px;
padding: 14px 16px 16px;
align-items: start;
}
.svm-serp-col-main {
display: flex;
flex-direction: column;
gap: 14px;
min-width: 0;
}
/* Sponsored ad block */
.svm-serp-ad { display: flex; flex-direction: column; gap: 4px; padding: 0; }
.svm-serp-ad-head {
display: inline-flex;
align-items: center;
gap: 8px;
}
.svm-serp-fav {
width: 18px; height: 18px;
border-radius: 50%;
background: #f1f5f9;
border: 1px solid var(--c-border);
display: inline-flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
color: transparent;
font-size: 9px;
font-weight: 800;
}
.svm-serp-fav.d {
background: linear-gradient(135deg, var(--c-accent), var(--c-accent-2));
color: #fff;
border: 0;
}
.svm-serp-fav.small { width: 14px; height: 14px; font-size: 7px; }
.svm-serp-fav.g1 { background: linear-gradient(135deg, #34a853, #1e7e34); border: 0; }
.svm-serp-ad-urlcol {
display: inline-flex;
align-items: center;
flex-wrap: wrap;
gap: 4px 6px;
min-width: 0;
}
.svm-serp-ad-tag {
font-size: 9.5px;
font-weight: 800;
color: var(--c-text);
letter-spacing: 0.01em;
line-height: 1;
}
.svm-serp-ad-site {
font-size: 10px;
font-weight: 700;
color: var(--c-text);
letter-spacing: -0.005em;
}
.svm-serp-ad-url {
font-size: 9px;
color: var(--c-muted);
}
.svm-serp-ad-dots {
margin-left: auto;
color: var(--c-muted);
font-size: 11px;
line-height: 1;
align-self: flex-start;
}
.svm-serp-h {
font-size: 14px;
font-weight: 600;
color: #1a0dab;
letter-spacing: -0.015em;
line-height: 1.25;
margin: 2px 0 1px;
}
.svm-serp-h.alt { font-size: 13px; }
.svm-serp-snippet {
font-size: 9.5px;
color: #4d5156;
letter-spacing: -0.005em;
line-height: 1.5;
}
.svm-serp-snippet b { font-weight: 700; color: var(--c-text); }
.svm-serp-ad-extensions {
display: flex;
flex-wrap: wrap;
gap: 12px;
margin-top: 4px;
padding-top: 4px;
}
.svm-serp-ad-extensions span {
font-size: 9.5px;
font-weight: 600;
color: #1a73e8;
letter-spacing: -0.005em;
}
/* Local pack */
.svm-serp-local {
border: 1px solid var(--c-border);
border-radius: 12px;
overflow: hidden;
background: #fff;
display: flex;
flex-direction: column;
}
.svm-serp-local-map {
position: relative;
height: 90px;
background: linear-gradient(135deg, #e6f0fd 0%, #d8eaf9 50%, #cee3f5 100%);
overflow: hidden;
}
.svm-serp-local-map-grid {
position: absolute;
inset: 0;
background:
linear-gradient(rgba(31,167,232,0.12) 1px, transparent 1px) 0 0/100% 18px,
linear-gradient(90deg, rgba(31,167,232,0.12) 1px, transparent 1px) 0 0/22px 100%;
}
.svm-serp-local-streets {
position: absolute;
background: rgba(255,255,255,0.7);
height: 4px;
border-radius: 2px;
}
.svm-serp-local-streets.s1 { left: 8%; top: 28%; width: 75%; transform: rotate(-3deg); }
.svm-serp-local-streets.s2 { left: 14%; top: 70%; width: 60%; height: 3px; transform: rotate(2deg); }
.svm-serp-local-streets.s3 { left: 42%; top: 5%; width: 3px; height: 90%; transform: rotate(8deg); background: rgba(255,255,255,0.55); }
.svm-serp-local-pin {
position: absolute;
width: 18px; height: 18px;
background: #ea4335;
border-radius: 50% 50% 50% 0;
transform: rotate(-45deg);
box-shadow: 0 4px 10px -3px rgba(234,67,53,0.55), 0 0 0 2px #fff;
display: inline-flex;
align-items: center;
justify-content: center;
}
.svm-serp-local-pin b {
transform: rotate(45deg);
color: #fff;
font-size: 9px;
font-weight: 900;
line-height: 1;
}
.svm-serp-local-pin.p1 { left: 22%; top: 28%; background: #1a73e8; box-shadow: 0 4px 10px -3px rgba(26,115,232,0.55), 0 0 0 2px #fff; }
.svm-serp-local-pin.p2 { left: 56%; top: 50%; }
.svm-serp-local-pin.p3 { left: 38%; top: 70%; background: #94a3b8; box-shadow: 0 4px 10px -3px rgba(148,163,184,0.55), 0 0 0 2px #fff; }
.svm-serp-local-list {
display: flex;
flex-direction: column;
}
.svm-serp-local-item {
display: grid;
grid-template-columns: 16px 1fr 40px;
align-items: start;
gap: 8px;
padding: 10px 12px;
border-top: 1px solid var(--c-border);
}
.svm-serp-local-item:first-child { border-top: 0; }
.svm-serp-local-item.on { background: #f7fbfe; }
.svm-serp-local-num {
font-family: 'JetBrains Mono', monospace;
font-size: 11px;
font-weight: 800;
color: #1a73e8;
line-height: 1.2;
}
.svm-serp-local-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.svm-serp-local-name {
font-size: 11px;
font-weight: 700;
color: #1a0dab;
letter-spacing: -0.015em;
line-height: 1.2;
}
.svm-serp-local-rate {
display: inline-flex;
align-items: center;
gap: 4px;
font-size: 9px;
color: #4d5156;
}
.svm-serp-local-rate b { font-weight: 700; color: var(--c-text); }
.svm-serp-local-rate i {
color: #fbbc05;
font-style: normal;
font-size: 9px;
letter-spacing: 0.04em;
}
.svm-serp-local-status {
font-size: 9px;
color: #4d5156;
}
.svm-serp-local-status em {
font-style: normal;
font-weight: 700;
}
.svm-serp-local-status em.open { color: #16a34a; }
.svm-serp-local-status em.closed { color: #ef4444; }
.svm-serp-local-feat {
display: flex;
flex-wrap: wrap;
gap: 4px;
margin-top: 3px;
}
.svm-serp-local-feat span {
font-size: 8px;
font-weight: 700;
color: var(--c-text);
padding: 1.5px 6px;
background: #f1f5f9;
border-radius: 4px;
letter-spacing: 0.005em;
}
.svm-serp-local-thumb {
width: 40px;
aspect-ratio: 1;
border-radius: 6px;
flex-shrink: 0;
}
.svm-serp-local-thumb.t1 { background: linear-gradient(135deg, var(--c-accent), var(--c-accent-2)); }
.svm-serp-local-thumb.t2 { background: linear-gradient(135deg, #1e293b, #475569); }
.svm-serp-local-thumb.t3 { background: linear-gradient(135deg, #f59e0b, #d97706); }
.svm-serp-local-more {
padding: 9px 12px;
text-align: center;
font-size: 10px;
font-weight: 600;
color: #1a73e8;
border-top: 1px solid var(--c-border);
background: #fafbfd;
letter-spacing: -0.005em;
}
/* Featured snippet */
.svm-serp-feat {
border: 1px solid var(--c-border);
border-radius: 12px;
padding: 12px 14px;
background: #fff;
display: flex;
flex-direction: column;
gap: 6px;
}
.svm-serp-feat-eyebrow {
font-family: 'JetBrains Mono', monospace;
font-size: 8px;
font-weight: 800;
color: var(--c-muted);
letter-spacing: 0.14em;
text-transform: uppercase;
}
.svm-serp-feat-body {
display: grid;
grid-template-columns: 1fr 70px;
gap: 12px;
align-items: start;
}
.svm-serp-feat-text { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.svm-serp-feat-h {
font-size: 13px;
font-weight: 700;
color: var(--c-text);
letter-spacing: -0.025em;
line-height: 1.2;
}
.svm-serp-feat-p {
font-size: 9.5px;
color: #4d5156;
line-height: 1.5;
letter-spacing: -0.005em;
}
.svm-serp-feat-p b { font-weight: 700; color: var(--c-text); }
.svm-serp-feat-src {
display: inline-flex;
align-items: center;
gap: 5px;
margin-top: 2px;
font-size: 9px;
color: var(--c-muted);
}
.svm-serp-feat-src i {
width: 14px; height: 14px;
border-radius: 50%;
background: linear-gradient(135deg, var(--c-accent), var(--c-accent-2));
color: #fff;
font-style: normal;
font-weight: 800;
font-size: 8px;
display: inline-flex;
align-items: center;
justify-content: center;
}
.svm-serp-feat-src span { color: #1a73e8; font-weight: 600; }
.svm-serp-feat-img {
aspect-ratio: 1;
border-radius: 8px;
background:
radial-gradient(circle at 30% 30%, rgba(255,255,255,0.4) 0 18%, transparent 22%),
linear-gradient(135deg, var(--c-accent), var(--c-accent-2));
display: block;
position: relative;
}
.svm-serp-feat-img::after {
content: '';
position: absolute;
inset: 30% 30% 18% 18%;
background: #fff;
border-radius: 3px;
box-shadow:
0 5px 0 -2px #fff,
0 9px 0 -2px rgba(255,255,255,0.6);
}
/* Organic results */
.svm-serp-org { display: flex; flex-direction: column; gap: 2px; padding: 0; position: relative; }
.svm-serp-org.top::before {
content: '#1 organik';
position: absolute;
top: -8px;
right: 0;
padding: 2px 6px;
background: var(--c-accent);
color: #fff;
border-radius: 4px;
font-family: 'JetBrains Mono', monospace;
font-size: 7px;
font-weight: 800;
letter-spacing: 0.06em;
text-transform: uppercase;
}
.svm-serp-org-head {
display: inline-flex;
align-items: center;
gap: 8px;
min-width: 0;
}
.svm-serp-org-urlcol {
display: inline-flex;
flex-direction: column;
line-height: 1.2;
min-width: 0;
}
.svm-serp-org-site {
font-size: 10px;
font-weight: 700;
color: var(--c-text);
letter-spacing: -0.005em;
}
.svm-serp-org-url {
font-size: 9px;
color: var(--c-muted);
}
.svm-serp-org-dots {
margin-left: auto;
color: var(--c-muted);
font-size: 11px;
line-height: 1;
align-self: flex-start;
}
.svm-serp-crumb { color: var(--c-muted); }
.svm-serp-org-rich {
display: inline-flex;
align-items: center;
flex-wrap: wrap;
gap: 4px;
font-size: 9px;
color: #4d5156;
margin-top: 2px;
}
.svm-serp-org-rich-stars {
color: #fbbc05;
font-size: 10px;
letter-spacing: 0.04em;
}
.svm-serp-org-rich-num { font-weight: 700; color: var(--c-text); }
.svm-serp-org-rich-sep { color: var(--c-border); }
.svm-serp-org-rich-tx { letter-spacing: -0.005em; }
.svm-serp-sitelinks {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 6px 14px;
margin-top: 8px;
padding-top: 6px;
border-top: 1px dashed var(--c-border);
}
.svm-serp-sitelinks span {
font-size: 10px;
font-weight: 600;
color: #1a0dab;
letter-spacing: -0.005em;
padding-bottom: 1px;
border-bottom: 1px dotted #1a0dab;
}
/* People Also Ask */
.svm-serp-paa {
border: 1px solid var(--c-border);
border-radius: 12px;
overflow: hidden;
background: #fff;
}
.svm-serp-paa-head {
display: flex;
align-items: center;
gap: 5px;
padding: 10px 14px;
font-size: 11px;
font-weight: 700;
color: var(--c-text);
letter-spacing: -0.015em;
border-bottom: 1px solid var(--c-border);
}
.svm-serp-paa-head span { color: var(--c-border); }
.svm-serp-paa-head i {
font-family: 'JetBrains Mono', monospace;
font-style: normal;
font-size: 9px;
font-weight: 700;
color: var(--c-muted);
background: #f1f5f9;
padding: 2px 6px;
border-radius: 4px;
letter-spacing: 0.04em;
margin-left: auto;
}
.svm-serp-paa-q {
display: flex;
align-items: center;
justify-content: space-between;
padding: 10px 14px;
border-top: 1px solid var(--c-border);
font-size: 10.5px;
font-weight: 500;
color: var(--c-text);
letter-spacing: -0.005em;
}
.svm-serp-paa-q:first-of-type { border-top: 0; }
.svm-serp-paa-q.open { background: #fafbfd; }
.svm-serp-paa-text { line-height: 1.3; }
.svm-serp-paa-arrow {
width: 7px; height: 7px;
border-right: 1.5px solid var(--c-muted);
border-bottom: 1.5px solid var(--c-muted);
transform: rotate(45deg);
flex-shrink: 0;
transition: transform .3s ease;
}
.svm-serp-paa-q.open .svm-serp-paa-arrow {
transform: rotate(-135deg);
margin-top: 3px;
border-color: #1a73e8;
}
/* Video pack */
.svm-serp-vid {
border: 1px solid var(--c-border);
border-radius: 12px;
padding: 12px 14px 14px;
background: #fff;
}
.svm-serp-vid-head {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 8px;
}
.svm-serp-vid-head span:first-child {
font-size: 11px;
font-weight: 700;
color: var(--c-text);
letter-spacing: -0.015em;
}
.svm-serp-vid-more {
font-size: 9.5px;
font-weight: 600;
color: #1a73e8;
}
.svm-serp-vid-row {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 8px;
}
.svm-serp-vid-card {
position: relative;
display: flex;
flex-direction: column;
gap: 3px;
min-width: 0;
}
.svm-serp-vid-thumb {
aspect-ratio: 16 / 10;
border-radius: 8px;
display: block;
position: relative;
overflow: hidden;
}
.svm-serp-vid-card.v1 .svm-serp-vid-thumb { background: linear-gradient(135deg, #ef4444, #b91c1c); }
.svm-serp-vid-card.v2 .svm-serp-vid-thumb { background: linear-gradient(135deg, var(--c-accent), var(--c-accent-2)); }
.svm-serp-vid-card.v3 .svm-serp-vid-thumb { background: linear-gradient(135deg, #0a0e1a, #2a3354); }
.svm-serp-vid-thumb::after {
content: '';
position: absolute;
inset: 35% 25% 25% 35%;
background:
radial-gradient(circle at 30% 30%, rgba(255,255,255,0.5) 0 25%, transparent 28%);
border-radius: 50%;
opacity: 0.6;
}
.svm-serp-vid-play {
position: absolute;
left: 50%; top: 35%;
transform: translate(-50%, -50%);
width: 22px; height: 22px;
background: rgba(0,0,0,0.7);
color: #fff;
border-radius: 50%;
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 9px;
padding-left: 2px;
}
.svm-serp-vid-len {
position: absolute;
right: 5px;
top: calc(56% - 14px);
transform: translateY(-100%);
padding: 1px 4px;
background: rgba(0,0,0,0.8);
color: #fff;
font-family: 'JetBrains Mono', monospace;
font-size: 7.5px;
font-weight: 700;
border-radius: 3px;
letter-spacing: 0.02em;
}
.svm-serp-vid-title {
font-size: 9.5px;
font-weight: 600;
color: var(--c-text);
letter-spacing: -0.005em;
line-height: 1.3;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
.svm-serp-vid-meta {
font-size: 8.5px;
color: var(--c-muted);
letter-spacing: -0.005em;
}
/* Related searches */
.svm-serp-related {
border-top: 1px solid var(--c-border);
padding-top: 14px;
display: flex;
flex-direction: column;
gap: 8px;
}
.svm-serp-related-head {
font-size: 12px;
font-weight: 700;
color: var(--c-text);
letter-spacing: -0.02em;
}
.svm-serp-related-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 6px 10px;
}
.svm-serp-related-i {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 7px 10px;
background: #fafbfd;
border: 1px solid var(--c-border);
border-radius: 999px;
font-size: 10px;
font-weight: 500;
color: var(--c-text);
letter-spacing: -0.005em;
}
.svm-serp-glass-sm {
width: 9px; height: 9px;
border: 1.4px solid var(--c-muted);
border-radius: 50%;
position: relative;
flex-shrink: 0;
}
.svm-serp-glass-sm::after {
content: '';
position: absolute;
right: -2px; bottom: -2px;
width: 4px; height: 1.4px;
background: var(--c-muted);
transform: rotate(45deg);
border-radius: 1px;
}
/* Knowledge panel (right rail) */
.svm-serp-kp {
background: #fff;
border: 1px solid var(--c-border);
border-radius: 12px;
overflow: hidden;
box-shadow: 0 4px 10px -6px rgba(10,14,26,0.1);
}
.svm-serp-kp-cover {
aspect-ratio: 16 / 9;
position: relative;
overflow: hidden;
background: linear-gradient(180deg, #41b6f0 0%, #2c81d2 48%, #1c3f73 100%);
}
/* yumuşak gün ışığı (kapak fotoğrafı hissi) */
.svm-serp-kp-cover::before {
content: "";
position: absolute;
top: -16%; left: 6%;
width: 40%; aspect-ratio: 1;
border-radius: 50%;
background: radial-gradient(circle, rgba(255,255,255,0.55) 0%, transparent 62%);
}
/* şehir silüeti */
.svm-serp-kp-cover .kc-sky { position: absolute; left: 0; right: 0; bottom: 0; height: 64%; }
.svm-serp-kp-cover .kc-sky i {
position: absolute;
bottom: 0;
background:
repeating-linear-gradient(90deg, rgba(150,192,240,0) 0 2px, rgba(150,192,240,0.26) 2px 3.5px, rgba(150,192,240,0) 3.5px 7px),
linear-gradient(180deg, #1c3760 0%, #0e1f3c 100%);
border-radius: 1px 1px 0 0;
box-shadow: -1px 0 0 rgba(0,0,0,0.15);
}
.svm-serp-kp-cover .kc-b1 { left: 1%; width: 13%; height: 58%; }
.svm-serp-kp-cover .kc-b2 { left: 14%; width: 16%; height: 88%; }
.svm-serp-kp-cover .kc-b3 { left: 31%; width: 12%; height: 68%; }
.svm-serp-kp-cover .kc-b4 { left: 44%; width: 19%; height: 100%; }
.svm-serp-kp-cover .kc-b5 { left: 64%; width: 13%; height: 74%; }
.svm-serp-kp-cover .kc-b6 { left: 78%; width: 21%; height: 92%; }
/* marka logosu (sol üst) */
.svm-serp-kp-cover .kc-logo {
position: absolute;
top: 7px; left: 9px;
z-index: 2;
font-family: 'Bricolage Grotesque', 'DM Sans', sans-serif;
font-size: 13px;
font-weight: 800;
letter-spacing: -0.02em;
color: #fff;
text-shadow: 0 1px 4px rgba(10,20,40,0.4);
}
.svm-serp-kp-cover .kc-logo i { color: #F5C518; font-style: normal; }
.svm-serp-kp-body {
padding: 10px 12px 12px;
display: flex;
flex-direction: column;
gap: 4px;
}
.svm-serp-kp-name {
display: inline-flex;
align-items: center;
gap: 4px;
font-size: 14px;
font-weight: 800;
color: var(--c-text);
letter-spacing: -0.012em;
line-height: 1;
}
.svm-serp-kp-ver {
color: #1a73e8;
font-size: 10px;
font-weight: 900;
background: rgba(26,115,232,0.12);
width: 14px; height: 14px;
border-radius: 50%;
display: inline-flex;
align-items: center;
justify-content: center;
}
.svm-serp-kp-sub {
font-size: 9px;
font-weight: 500;
color: var(--c-muted);
letter-spacing: -0.005em;
}
.svm-serp-kp-rate {
display: inline-flex;
align-items: center;
gap: 4px;
padding: 5px 0;
border-top: 1px dashed var(--c-border);
border-bottom: 1px dashed var(--c-border);
margin: 3px 0 2px;
}
.svm-serp-kp-rate b { font-weight: 800; color: var(--c-text); font-size: 11px; }
.svm-serp-kp-stars {
color: #fbbc05;
font-size: 10px;
letter-spacing: 0.04em;
line-height: 1;
}
.svm-serp-kp-rate i {
font-style: normal;
font-size: 8px;
color: var(--c-muted);
margin-left: 2px;
}
.svm-serp-kp-rows { display: flex; flex-direction: column; gap: 4px; }
.svm-serp-kp-row {
display: flex;
align-items: center;
gap: 6px;
font-size: 9px;
color: var(--c-text);
letter-spacing: -0.005em;
}
.svm-serp-kp-row span { color: var(--c-muted); min-width: 38px; }
.svm-serp-kp-row b { font-weight: 700; color: var(--c-text); }
.svm-serp-kp-row em { font-style: normal; font-weight: 700; }
.svm-serp-kp-row em.open { color: #16a34a; }
.svm-serp-kp-cta {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 5px;
margin-top: 7px;
}
.svm-serp-kp-btn {
padding: 5px 8px;
border: 1px solid var(--c-border);
border-radius: 6px;
font-size: 9px;
font-weight: 700;
color: var(--c-text);
text-align: center;
letter-spacing: -0.005em;
}
.svm-serp-kp-btn.primary {
background: var(--c-text);
color: #fff;
border-color: var(--c-text);
}
/* Legacy display:none for orphaned classes from v2 */
.svm-serp-google, .svm-serp-search, .svm-serp-glass, .svm-serp-q, .svm-serp .svm-cursor,
.svm-serp-mic, .svm-serp-results-old, .svm-serp-row, .svm-serp-imgpack, .svm-serp-imgpack-row,
.svm-serp-thumb, .svm-serp-h.short, .svm-serp-p, .svm-serp-rank, .svm-serp-meta, .svm-serp-url,
.svm-serp-site, .svm-serp-urlcol, .svm-serp-adtag, .svm-serp-kp-img { display: none !important; }
/* Re-enable .svm-serp-fav and .svm-serp-h since we use them in v3 — override above */
.svm-serp .svm-serp-fav { display: inline-flex !important; }
.svm-serp .svm-serp-h { display: block !important; }
.svm-serp .svm-serp-url { display: inline !important; }
.svm-serp .svm-serp-site { display: inline !important; }
.svm-serp .svm-serp-urlcol { display: inline-flex !important; }
/* ==========================================================
MOCKUP DETAY: 05 Sosyal Medya / Instagram v3 — sıfırdan 2026-05-27
========================================================== */
.svm-ig {
width: 100%;
max-width: 380px;
background: #fff;
border-radius: 32px;
padding: 0;
box-shadow: 0 30px 60px -22px rgba(10, 14, 26, 0.32), 0 0 0 8px #0a0e1a;
border: 1px solid #1a1f2e;
overflow: hidden;
font-family: 'Urbanist', 'Outfit', sans-serif;
position: relative;
}
/* iOS status bar */
.svm-ig-sb {
display: flex;
align-items: center;
justify-content: space-between;
padding: 9px 22px 4px;
position: relative;
}
.svm-ig-sb-time {
font-size: 11px;
font-weight: 700;
color: var(--c-text);
letter-spacing: 0;
}
.svm-ig-sb-notch {
position: absolute;
left: 50%;
top: 2px;
transform: translateX(-50%);
width: 56px;
height: 18px;
background: #0a0e1a;
border-radius: 0 0 14px 14px;
}
.svm-ig-sb-r {
display: inline-flex;
align-items: center;
gap: 5px;
}
.svm-ig-sb-sig {
width: 14px; height: 9px;
background:
linear-gradient(var(--c-text), var(--c-text)) 0 100%/2.5px 30% no-repeat,
linear-gradient(var(--c-text), var(--c-text)) 4px 100%/2.5px 55% no-repeat,
linear-gradient(var(--c-text), var(--c-text)) 8px 100%/2.5px 80% no-repeat,
linear-gradient(var(--c-text), var(--c-text)) 12px 100%/2.5px 100% no-repeat;
}
.svm-ig-sb-net {
font-family: 'JetBrains Mono', monospace;
font-size: 9px;
font-weight: 800;
color: var(--c-text);
letter-spacing: 0.02em;
}
.svm-ig-sb-batt {
width: 22px; height: 10px;
background: var(--c-text);
border-radius: 3px;
position: relative;
-webkit-mask:
linear-gradient(#000, #000) 0 0/85% 100% no-repeat,
linear-gradient(#000, #000) 95% 50%/3px 50% no-repeat;
mask:
linear-gradient(#000, #000) 0 0/85% 100% no-repeat,
linear-gradient(#000, #000) 95% 50%/3px 50% no-repeat;
}
/* Top app bar */
.svm-ig-tab-top {
display: flex;
align-items: center;
justify-content: space-between;
padding: 6px 14px 10px;
border-bottom: 1px solid var(--c-border);
gap: 8px;
}
.svm-ig-tt-back {
font-size: 24px;
font-weight: 300;
color: var(--c-text);
line-height: 1;
width: 22px;
}
.svm-ig-tt-h {
flex: 1;
display: inline-flex;
align-items: center;
gap: 5px;
font-family: 'Bricolage Grotesque', serif;
}
.svm-ig-tt-handle {
font-size: 17px;
font-weight: 700;
color: var(--c-text);
letter-spacing: -0.012em;
line-height: 1;
}
.svm-ig-tt-caret {
width: 0; height: 0;
border-left: 4px solid transparent;
border-right: 4px solid transparent;
border-top: 5px solid var(--c-text);
}
.svm-ig-tt-actions { display: inline-flex; align-items: center; gap: 12px; }
.svm-ig-tt-add {
width: 18px; height: 18px;
border: 1.6px solid var(--c-text);
border-radius: 4px;
position: relative;
}
.svm-ig-tt-add::before,
.svm-ig-tt-add::after {
content: '';
position: absolute;
background: var(--c-text);
left: 50%; top: 50%;
transform: translate(-50%, -50%);
}
.svm-ig-tt-add::before { width: 8px; height: 1.6px; }
.svm-ig-tt-add::after { width: 1.6px; height: 8px; }
.svm-ig-tt-bell {
position: relative;
width: 18px; height: 18px;
background: var(--c-text);
-webkit-mask:
linear-gradient(#000, #000) center 18%/9px 9px no-repeat,
radial-gradient(circle at 50% 30%, #000 0 22%, transparent 23%);
mask:
linear-gradient(#000, #000) center 18%/9px 9px no-repeat,
radial-gradient(circle at 50% 30%, #000 0 22%, transparent 23%);
clip-path: polygon(15% 78%, 85% 78%, 80% 50%, 75% 30%, 50% 10%, 25% 30%, 20% 50%);
}
.svm-ig-tt-bell-dot {
position: absolute;
top: -2px; right: -3px;
width: 8px; height: 8px;
background: #fb3958;
border: 1.5px solid #fff;
border-radius: 50%;
z-index: 2;
}
.svm-ig-tt-menu {
font-size: 22px;
font-weight: 300;
color: var(--c-text);
line-height: 1;
width: 16px;
text-align: right;
letter-spacing: -0.02em;
}
/* Profile header */
.svm-ig-prof {
display: flex;
align-items: center;
gap: 18px;
padding: 14px 16px 6px;
}
.svm-ig-prof-av {
position: relative;
width: 76px;
height: 76px;
flex-shrink: 0;
}
.svm-ig-prof-av-ring {
position: absolute;
inset: 0;
border-radius: 50%;
background: conic-gradient(from 0deg, #feda75, #fa7e1e, #d62976, #962fbf, #4f5bd5, #feda75);
padding: 2.5px;
-webkit-mask: linear-gradient(#000, #000) content-box, linear-gradient(#000, #000);
mask: linear-gradient(#000, #000) content-box, linear-gradient(#000, #000);
-webkit-mask-composite: xor;
mask-composite: exclude;
animation: svmIgRingSpin 8s linear infinite;
}
@keyframes svmIgRingSpin { to { transform: rotate(360deg); } }
.svm-ig-prof-av-inner {
position: absolute;
inset: 4px;
background: linear-gradient(135deg, var(--c-accent), var(--c-accent-2));
color: #fff;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-family: 'Bricolage Grotesque', serif;
font-size: 32px;
font-weight: 800;
letter-spacing: -0.02em;
border: 2.5px solid #fff;
}
.svm-ig-prof-av-live {
position: absolute;
bottom: -3px;
left: 50%;
transform: translateX(-50%);
padding: 2px 6px;
background: linear-gradient(90deg, #fb3958, #d62976);
color: #fff;
font-family: 'JetBrains Mono', monospace;
font-size: 7.5px;
font-weight: 900;
letter-spacing: 0.08em;
border-radius: 4px;
border: 1.5px solid #fff;
z-index: 2;
}
.svm-ig-prof-stats {
flex: 1;
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 4px;
}
.svm-ig-stat {
display: flex;
flex-direction: column;
align-items: center;
gap: 2px;
}
.svm-ig-stat b {
font-size: 16px;
font-weight: 800;
color: var(--c-text);
letter-spacing: -0.025em;
line-height: 1;
font-variant-numeric: tabular-nums;
}
.svm-ig-stat i {
font-style: normal;
font-size: 10px;
color: var(--c-text);
letter-spacing: -0.005em;
}
/* Bio */
.svm-ig-bio {
padding: 0 16px 8px;
display: flex;
flex-direction: column;
gap: 1px;
}
.svm-ig-bio-name {
display: inline-flex;
align-items: center;
gap: 5px;
font-size: 13px;
font-weight: 800;
color: var(--c-text);
letter-spacing: -0.015em;
line-height: 1.2;
}
.svm-ig-bio-ver {
color: #fff;
background: linear-gradient(135deg, #4f5bd5, #962fbf);
width: 14px; height: 14px;
border-radius: 50%;
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 9px;
font-weight: 900;
}
.svm-ig-bio-cat {
font-size: 11px;
color: var(--c-muted);
line-height: 1.3;
letter-spacing: -0.005em;
}
.svm-ig-bio-txt {
margin-top: 3px;
font-size: 12px;
color: var(--c-text);
line-height: 1.4;
letter-spacing: -0.005em;
}
.svm-ig-bio-txt b { font-weight: 700; color: var(--c-text); }
.svm-ig-bio-link {
display: inline-flex;
align-items: center;
gap: 4px;
margin-top: 3px;
font-size: 12px;
font-weight: 600;
color: #00376b;
letter-spacing: -0.005em;
}
.svm-ig-bio-link em {
font-style: normal;
font-size: 10px;
color: var(--c-muted);
padding: 1px 5px;
background: #f1f5f9;
border-radius: 4px;
font-weight: 700;
margin-left: 2px;
}
.svm-ig-bio-link-ic { font-size: 10px; }
.svm-ig-bio-mut {
margin-top: 6px;
display: inline-flex;
align-items: center;
gap: 6px;
}
.svm-ig-bio-mut-stack {
display: inline-flex;
}
.svm-ig-bio-mut-stack i {
width: 16px; height: 16px;
border-radius: 50%;
border: 2px solid #fff;
background: linear-gradient(135deg, var(--c-accent), var(--c-accent-2));
margin-right: -7px;
display: inline-block;
}
.svm-ig-bio-mut-stack i:nth-child(2) { background: linear-gradient(135deg, #f59e0b, #d97706); }
.svm-ig-bio-mut-stack i:nth-child(3) { background: linear-gradient(135deg, #0a0e1a, #2a3354); margin-right: 0; }
.svm-ig-bio-mut-tx {
font-size: 10.5px;
color: var(--c-muted);
letter-spacing: -0.005em;
}
.svm-ig-bio-mut-tx b { font-weight: 700; color: var(--c-text); }
/* Actions */
.svm-ig-act {
display: grid;
grid-template-columns: 1fr 1fr 1fr 32px;
gap: 5px;
padding: 0 16px 12px;
}
.svm-ig-act-btn {
padding: 7px 4px;
background: #efefef;
border-radius: 8px;
font-size: 11px;
font-weight: 700;
color: var(--c-text);
text-align: center;
letter-spacing: -0.01em;
line-height: 1.1;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 3px;
}
.svm-ig-act-btn.primary { background: #efefef; }
.svm-ig-act-btn em { font-style: normal; font-size: 9px; }
.svm-ig-act-btn.ic { font-size: 12px; }
/* Pro dashboard card */
.svm-ig-pro {
margin: 0 16px 14px;
border: 1px solid var(--c-border);
border-radius: 12px;
padding: 10px 12px;
background: linear-gradient(135deg, rgba(31,167,232,0.04), #fff);
}
.svm-ig-pro-head {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 8px;
}
.svm-ig-pro-h {
font-size: 11px;
font-weight: 800;
color: var(--c-text);
letter-spacing: -0.015em;
}
.svm-ig-pro-h-arr {
color: var(--c-muted);
font-size: 14px;
line-height: 1;
}
.svm-ig-pro-stats {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 6px;
}
.svm-ig-pro-stat {
display: flex;
flex-direction: column;
gap: 2px;
padding: 6px 8px;
background: #fff;
border: 1px solid var(--c-border);
border-radius: 8px;
}
.svm-ig-pro-stat-lbl {
font-family: 'JetBrains Mono', monospace;
font-size: 7px;
font-weight: 800;
color: var(--c-muted);
letter-spacing: 0.14em;
text-transform: uppercase;
}
.svm-ig-pro-stat-val {
font-size: 15px;
font-weight: 900;
color: var(--c-text);
letter-spacing: -0.012em;
line-height: 1;
}
.svm-ig-pro-stat-val small {
font-size: 10px;
font-weight: 700;
color: var(--c-muted);
}
.svm-ig-pro-stat-delta {
font-size: 8.5px;
font-weight: 700;
letter-spacing: 0.01em;
}
.svm-ig-pro-stat-delta.up { color: #16a34a; }
/* Highlights */
.svm-ig-hl {
display: flex;
gap: 12px;
padding: 4px 16px 12px;
overflow-x: hidden;
border-bottom: 1px solid var(--c-border);
}
.svm-ig-hl-i {
display: flex;
flex-direction: column;
align-items: center;
gap: 4px;
flex-shrink: 0;
position: relative;
}
.svm-ig-hl-ring {
width: 56px; height: 56px;
border-radius: 50%;
background: #fff;
color: #fff;
display: inline-flex;
align-items: center;
justify-content: center;
font-family: 'Urbanist', 'Outfit', sans-serif;
font-size: 16px;
font-weight: 900;
border: 1.5px solid var(--c-border);
padding: 3px;
box-sizing: border-box;
position: relative;
}
.svm-ig-hl-ring::before {
content: '';
position: absolute;
inset: 3px;
border-radius: 50%;
z-index: 0;
}
.svm-ig-hl-ring.r1::before { background: linear-gradient(135deg, var(--c-accent), var(--c-accent-2)); }
.svm-ig-hl-ring.r2::before { background: linear-gradient(135deg, #f59e0b, #d97706); }
.svm-ig-hl-ring.r3::before { background: linear-gradient(135deg, #0a0e1a, #2a3354); }
.svm-ig-hl-ring.r4::before { background: linear-gradient(135deg, #ef4444, #b91c1c); }
.svm-ig-hl-ring.r5::before { background: linear-gradient(135deg, #16a34a, #15803d); }
.svm-ig-hl-ring.r6::before { background: linear-gradient(135deg, #f3f6f9, #e6ebf1); }
.svm-ig-hl-ring.r6 { color: var(--c-muted); font-size: 24px; font-weight: 300; }
/* kapak ikonları (net bi) + cam parlaması */
.svm-ig-hl-ring .bi { position: relative; z-index: 1; color: #fff; font-size: 20px; line-height: 1; }
.svm-ig-hl-ring.r6 .bi { color: #9aa6b6; font-size: 21px; }
.svm-ig-hl-ring::before { box-shadow: inset 0 3px 5px rgba(255,255,255,0.30), inset 0 -5px 8px rgba(0,0,0,0.16); }
.svm-ig-hl-ring > * { position: relative; z-index: 1; }
.svm-ig-hl-ring { line-height: 0; }
.svm-ig-hl-ring::after {
content: attr(data-g);
}
.svm-ig-hl-i.live .svm-ig-hl-ring {
border-color: transparent;
background: conic-gradient(from 0deg, #fb3958, #d62976, #962fbf, #fb3958);
animation: svmIgHlSpin 4s linear infinite;
}
@keyframes svmIgHlSpin { to { transform: rotate(360deg); } }
.svm-ig-hl-i.live .svm-ig-hl-ring::before {
background: linear-gradient(135deg, var(--c-accent), var(--c-accent-2));
inset: 2.5px;
border: 2px solid #fff;
}
.svm-ig-hl-lbl {
font-size: 10px;
font-weight: 500;
color: var(--c-text);
letter-spacing: -0.005em;
line-height: 1;
}
.svm-ig-hl-live {
position: absolute;
bottom: 18px;
left: 50%;
transform: translateX(-50%);
padding: 1.5px 5px;
background: linear-gradient(90deg, #fb3958, #d62976);
color: #fff;
font-family: 'JetBrains Mono', monospace;
font-size: 6.5px;
font-weight: 900;
border-radius: 3px;
border: 1px solid #fff;
letter-spacing: 0.06em;
z-index: 3;
white-space: nowrap;
}
.svm-ig-hl-i.new .svm-ig-hl-lbl { color: var(--c-muted); }
/* Suggested follows */
.svm-ig-sug {
padding: 12px 16px;
border-bottom: 1px solid var(--c-border);
}
.svm-ig-sug-head {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 8px;
}
.svm-ig-sug-head > span:first-child {
font-size: 12px;
font-weight: 700;
color: var(--c-text);
letter-spacing: -0.015em;
}
.svm-ig-sug-all {
font-size: 10px;
color: #00376b;
font-weight: 600;
}
.svm-ig-sug-row {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 6px;
}
.svm-ig-sug-c {
position: relative;
padding: 14px 6px 8px;
background: #fff;
border: 1px solid var(--c-border);
border-radius: 10px;
display: flex;
flex-direction: column;
align-items: center;
gap: 3px;
}
.svm-ig-sug-x {
position: absolute;
top: 4px;
right: 5px;
color: var(--c-muted);
font-size: 9px;
line-height: 1;
}
.svm-ig-sug-av {
width: 44px; height: 44px;
border-radius: 50%;
color: #fff;
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 14px;
font-weight: 800;
letter-spacing: -0.02em;
}
.svm-ig-sug-av.a1 { background: linear-gradient(135deg, var(--c-accent), var(--c-accent-2)); }
.svm-ig-sug-av.a2 { background: linear-gradient(135deg, #0a0e1a, #2a3354); }
.svm-ig-sug-av.a3 { background: linear-gradient(135deg, #f59e0b, #d97706); }
.svm-ig-sug-n {
font-size: 10.5px;
font-weight: 700;
color: var(--c-text);
letter-spacing: -0.01em;
text-align: center;
line-height: 1;
display: inline-flex;
align-items: center;
gap: 3px;
}
.svm-ig-sug-n b {
color: #4f5bd5;
font-weight: 900;
font-size: 9px;
}
.svm-ig-sug-sub {
font-size: 8.5px;
color: var(--c-muted);
text-align: center;
line-height: 1.2;
letter-spacing: -0.005em;
padding: 0 4px;
}
.svm-ig-sug-btn {
margin-top: 4px;
padding: 5px 10px;
background: #1a73e8;
color: #fff;
border-radius: 6px;
font-size: 10px;
font-weight: 700;
letter-spacing: -0.005em;
width: 100%;
text-align: center;
}
/* Tabs */
.svm-ig-tabs2 {
display: grid;
grid-template-columns: repeat(3, 1fr);
border-bottom: 1px solid var(--c-border);
border-top: 1px solid var(--c-border);
}
.svm-ig-tab2 {
padding: 8px 0;
display: inline-flex;
align-items: center;
justify-content: center;
position: relative;
color: var(--c-muted);
}
.svm-ig-tab2 i {
width: 16px; height: 16px;
display: inline-block;
color: currentColor;
}
.svm-ig-tab2.is-on { color: var(--c-text); }
.svm-ig-tab2.is-on::after {
content: '';
position: absolute;
left: 0; right: 0;
bottom: -1px;
height: 1.5px;
background: var(--c-text);
}
.svm-ig-tab2 .ic-grid {
background:
linear-gradient(currentColor, currentColor) 0 0/4.5px 4.5px no-repeat,
linear-gradient(currentColor, currentColor) 50% 0/4.5px 4.5px no-repeat,
linear-gradient(currentColor, currentColor) 100% 0/4.5px 4.5px no-repeat,
linear-gradient(currentColor, currentColor) 0 50%/4.5px 4.5px no-repeat,
linear-gradient(currentColor, currentColor) 50% 50%/4.5px 4.5px no-repeat,
linear-gradient(currentColor, currentColor) 100% 50%/4.5px 4.5px no-repeat,
linear-gradient(currentColor, currentColor) 0 100%/4.5px 4.5px no-repeat,
linear-gradient(currentColor, currentColor) 50% 100%/4.5px 4.5px no-repeat,
linear-gradient(currentColor, currentColor) 100% 100%/4.5px 4.5px no-repeat;
}
.svm-ig-tab2 .ic-reel {
border: 1.5px solid currentColor;
border-radius: 3px;
position: relative;
}
.svm-ig-tab2 .ic-reel::after {
content: '';
position: absolute;
left: 50%; top: 50%;
transform: translate(-40%, -50%);
width: 0; height: 0;
border-left: 6px solid currentColor;
border-top: 4px solid transparent;
border-bottom: 4px solid transparent;
}
.svm-ig-tab2 .ic-tag {
background: transparent;
border: 1.5px solid currentColor;
border-radius: 1px;
position: relative;
}
.svm-ig-tab2 .ic-tag::after {
content: '';
position: absolute;
left: 50%; top: 30%;
transform: translateX(-50%);
width: 4px; height: 4px;
background: currentColor;
border-radius: 50%;
}
/* Grid 2 */
.svm-ig-grid2 {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 2px;
background: var(--c-border);
}
.svm-ig-tile2 {
position: relative;
aspect-ratio: 1;
overflow: hidden;
background: #fff;
}
.svm-ig-tile2.reel { aspect-ratio: 9 / 16; }
.svm-ig-tile2-ic {
position: absolute;
top: 6px;
right: 6px;
width: 13px; height: 13px;
z-index: 3;
background: rgba(255,255,255,0.95);
border-radius: 3px;
-webkit-filter: drop-shadow(0 1px 2px rgba(0,0,0,0.25));
filter: drop-shadow(0 1px 2px rgba(0,0,0,0.25));
}
.svm-ig-tile2-ic.carousel {
background:
linear-gradient(#fff, #fff) 100% 0/9px 9px no-repeat,
linear-gradient(#fff, #fff) 0 100%/9px 9px no-repeat;
background-color: transparent;
border: 0;
box-shadow:
0 0 0 1.4px rgba(255,255,255,0.95);
-webkit-mask: linear-gradient(#000, #000) 100% 0/9px 9px no-repeat, linear-gradient(#000, #000) 0 100%/9px 9px no-repeat;
mask: linear-gradient(#000, #000) 100% 0/9px 9px no-repeat, linear-gradient(#000, #000) 0 100%/9px 9px no-repeat;
}
.svm-ig-tile2-ic.reel-ic {
background: transparent;
border-radius: 0;
width: 14px; height: 14px;
-webkit-filter: drop-shadow(0 1px 2px rgba(0,0,0,0.4));
filter: drop-shadow(0 1px 2px rgba(0,0,0,0.4));
}
.svm-ig-tile2-ic.reel-ic::before {
content: '';
display: block;
width: 0; height: 0;
border-left: 9px solid #fff;
border-top: 6px solid transparent;
border-bottom: 6px solid transparent;
}
.svm-ig-tp {
position: absolute;
inset: 0;
padding: 12px;
display: flex;
flex-direction: column;
overflow: hidden;
}
/* ROAS tile */
.svm-ig-tp.tp-roas {
background:
radial-gradient(circle at 80% 20%, rgba(255,255,255,0.18) 0 25%, transparent 28%),
linear-gradient(135deg, var(--c-accent), var(--c-accent-2));
color: #fff;
justify-content: space-between;
}
.svm-ig-tp-eb {
font-family: 'JetBrains Mono', monospace;
font-size: 7.5px;
font-weight: 800;
letter-spacing: 0.14em;
opacity: 0.85;
}
.svm-ig-tp-big {
font-family: 'Bricolage Grotesque', serif;
font-size: 38px;
font-weight: 800;
letter-spacing: -0.018em;
line-height: 1;
}
.svm-ig-tp-big small {
font-size: 18px;
font-weight: 700;
opacity: 0.8;
}
.svm-ig-tp-lbl {
font-size: 9.5px;
font-weight: 700;
letter-spacing: 0.01em;
}
.svm-ig-tp-ft {
font-family: 'JetBrains Mono', monospace;
font-size: 7.5px;
font-weight: 700;
letter-spacing: 0.06em;
opacity: 0.8;
}
/* Reel tile */
.svm-ig-tp.tp-reel {
background: linear-gradient(160deg, #1e293b, #0a0e1a);
color: #fff;
}
.svm-ig-tp-reel-face {
position: absolute;
inset: 0;
background:
radial-gradient(circle at 70% 22%, rgba(251,57,88,0.4) 0 28%, transparent 30%),
radial-gradient(circle at 30% 55%, rgba(31,167,232,0.35) 0 25%, transparent 28%),
radial-gradient(circle at 80% 80%, rgba(245,197,24,0.3) 0 22%, transparent 25%);
}
.svm-ig-tp-reel-glow {
position: absolute;
inset: 0;
background: radial-gradient(circle at center, transparent 40%, rgba(0,0,0,0.4) 100%);
}
.svm-ig-tp-reel-cap {
position: relative;
z-index: 2;
margin-top: auto;
display: flex;
flex-direction: column;
gap: 4px;
}
.svm-ig-tp-reel-tag {
align-self: flex-start;
padding: 2px 6px;
background: #f5c518;
color: #0a0e1a;
font-family: 'JetBrains Mono', monospace;
font-size: 7px;
font-weight: 900;
letter-spacing: 0.08em;
border-radius: 3px;
}
.svm-ig-tp-reel-tt {
font-family: 'Bricolage Grotesque', serif;
font-size: 17px;
font-weight: 800;
letter-spacing: -0.012em;
line-height: 1.05;
}
.svm-ig-tp-reel-views {
position: absolute;
left: 8px;
bottom: 8px;
z-index: 4;
font-family: 'JetBrains Mono', monospace;
font-size: 8.5px;
font-weight: 700;
color: #fff;
letter-spacing: 0.02em;
text-shadow: 0 1px 3px rgba(0,0,0,0.5);
}
/* Typo tile */
.svm-ig-tp.tp-typo {
background: #0a0e1a;
color: #fff;
justify-content: space-between;
padding: 14px 12px;
}
.svm-ig-tp-typo-l {
font-family: 'Bricolage Grotesque', serif;
font-size: 22px;
font-weight: 800;
letter-spacing: -0.018em;
line-height: 1;
}
.svm-ig-tp-typo-l.accent {
background: linear-gradient(90deg, var(--c-accent), var(--c-accent-2));
-webkit-background-clip: text;
background-clip: text;
color: transparent;
}
.svm-ig-tp-typo-arr {
font-size: 18px;
font-weight: 900;
color: var(--c-accent);
line-height: 1;
}
.svm-ig-tp-typo-ft {
font-family: 'JetBrains Mono', monospace;
font-size: 7.5px;
font-weight: 700;
letter-spacing: 0.08em;
opacity: 0.55;
}
/* Before/After tile */
.svm-ig-tp.tp-ba {
background: #fff;
border: 0;
padding: 10px;
}
.svm-ig-tp-ba-row {
display: grid;
grid-template-columns: 1fr 16px 1fr;
gap: 6px;
align-items: center;
flex: 1;
}
.svm-ig-tp-ba-side {
display: flex;
flex-direction: column;
gap: 3px;
padding: 8px 4px;
background: #fafbfd;
border: 1px solid var(--c-border);
border-radius: 6px;
align-items: center;
}
.svm-ig-tp-ba-side.a { background: linear-gradient(180deg, rgba(22,163,74,0.08), #fff); border-color: rgba(22,163,74,0.3); }
.svm-ig-tp-ba-lbl {
font-family: 'JetBrains Mono', monospace;
font-size: 6.5px;
font-weight: 800;
color: var(--c-muted);
letter-spacing: 0.14em;
}
.svm-ig-tp-ba-bar {
width: 100%;
height: 16px;
background: #ef4444;
border-radius: 2px;
opacity: 0.25;
}
.svm-ig-tp-ba-bar.r { background: #ef4444; opacity: 0.18; }
.svm-ig-tp-ba-bar.g { background: #16a34a; height: 28px; }
.svm-ig-tp-ba-n {
font-family: 'Bricolage Grotesque', serif;
font-size: 14px;
font-weight: 800;
color: var(--c-text);
letter-spacing: -0.025em;
line-height: 1;
}
.svm-ig-tp-ba-arr {
color: var(--c-accent);
font-size: 14px;
font-weight: 900;
text-align: center;
}
.svm-ig-tp-ba-cap {
margin-top: 6px;
font-size: 8.5px;
font-weight: 700;
color: var(--c-text);
text-align: center;
letter-spacing: -0.005em;
}
.svm-ig-tile2.t4 .svm-ig-tp-reel-views { color: var(--c-text); text-shadow: none; }
/* Quote tile */
.svm-ig-tp.tp-quote {
background:
radial-gradient(circle at 90% 10%, rgba(255,255,255,0.3) 0 25%, transparent 28%),
linear-gradient(135deg, #f5c518, #f59f0b);
color: #0a0e1a;
justify-content: space-between;
}
.svm-ig-tp-q-mark {
font-family: 'Bricolage Grotesque', serif;
font-size: 36px;
font-weight: 800;
line-height: 0.7;
opacity: 0.5;
}
.svm-ig-tp-q-tt {
font-family: 'Bricolage Grotesque', serif;
font-size: 14px;
font-weight: 800;
letter-spacing: -0.025em;
line-height: 1.1;
}
.svm-ig-tp-q-ft {
display: inline-flex;
align-items: center;
gap: 6px;
}
.svm-ig-tp-q-av {
width: 22px; height: 22px;
background: #0a0e1a;
color: #fff;
border-radius: 50%;
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 9px;
font-weight: 800;
}
.svm-ig-tp-q-n {
font-size: 9px;
font-weight: 800;
color: #0a0e1a;
line-height: 1.15;
}
.svm-ig-tp-q-n i {
font-style: normal;
font-size: 7.5px;
font-weight: 600;
opacity: 0.6;
}
/* Stat tile */
.svm-ig-tp.tp-stat {
background:
radial-gradient(circle at 50% 20%, rgba(34,197,94,0.25) 0 25%, transparent 30%),
linear-gradient(135deg, #052e16, #064e3b);
color: #fff;
justify-content: center;
align-items: center;
text-align: center;
gap: 3px;
}
.svm-ig-tp-stat-stars {
color: #f5c518;
font-size: 11px;
letter-spacing: 0.06em;
line-height: 1;
}
.svm-ig-tp-stat-n {
font-family: 'Bricolage Grotesque', serif;
font-size: 28px;
font-weight: 800;
letter-spacing: -0.018em;
line-height: 1;
}
.svm-ig-tp-stat-lbl {
font-family: 'JetBrains Mono', monospace;
font-size: 7px;
font-weight: 800;
letter-spacing: 0.16em;
opacity: 0.85;
}
.svm-ig-tp-stat-ft {
font-family: 'JetBrains Mono', monospace;
font-size: 6.5px;
font-weight: 700;
letter-spacing: 0.04em;
opacity: 0.5;
margin-top: 2px;
}
/* Bottom nav */
.svm-ig-bn {
display: grid;
grid-template-columns: repeat(5, 1fr);
padding: 10px 12px 12px;
border-top: 1px solid var(--c-border);
background: #fff;
}
.svm-ig-bn-i {
display: inline-flex;
align-items: center;
justify-content: center;
color: var(--c-text);
}
.svm-ig-bn-i i { display: inline-block; width: 18px; height: 18px; }
.svm-ig-bn-i .ic-home {
background: var(--c-text);
clip-path: polygon(50% 0, 100% 45%, 100% 100%, 0 100%, 0 45%);
-webkit-mask: linear-gradient(#000, #000);
mask: linear-gradient(#000, #000);
border: 0;
background: transparent;
border: 1.6px solid var(--c-text);
border-radius: 1px;
}
.svm-ig-bn-i .ic-search {
width: 16px; height: 16px;
border: 1.6px solid var(--c-text);
border-radius: 50%;
position: relative;
}
.svm-ig-bn-i .ic-search::after {
content: '';
position: absolute;
right: -4px; bottom: -4px;
width: 6px; height: 1.8px;
background: var(--c-text);
transform: rotate(45deg);
border-radius: 1px;
}
.svm-ig-bn-i .ic-reel {
width: 16px; height: 16px;
border: 1.6px solid var(--c-text);
border-radius: 3px;
position: relative;
}
.svm-ig-bn-i .ic-reel::after {
content: '';
position: absolute;
left: 50%; top: 50%;
transform: translate(-40%, -50%);
width: 0; height: 0;
border-left: 6px solid var(--c-text);
border-top: 4px solid transparent;
border-bottom: 4px solid transparent;
}
.svm-ig-bn-i .ic-shop {
width: 16px; height: 14px;
border: 1.6px solid var(--c-text);
border-top: 0;
border-radius: 0 0 3px 3px;
position: relative;
}
.svm-ig-bn-i .ic-shop::before {
content: '';
position: absolute;
top: -4px; left: 1px; right: 1px;
height: 4px;
border: 1.6px solid var(--c-text);
border-bottom: 0;
border-radius: 50% 50% 0 0;
}
.svm-ig-bn-i.is-on .ic-prof {
width: 22px; height: 22px;
border-radius: 50%;
background: linear-gradient(135deg, var(--c-accent), var(--c-accent-2));
color: #fff;
display: inline-flex;
align-items: center;
justify-content: center;
font-family: 'Bricolage Grotesque', serif;
font-size: 12px;
font-weight: 800;
border: 2px solid var(--c-text);
font-style: normal;
}
/* Floating notification toast */
.svm-ig-noti {
position: absolute;
top: 70px;
left: 14px;
right: 14px;
display: flex;
align-items: center;
gap: 8px;
padding: 8px 10px;
background: rgba(255,255,255,0.95);
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
border: 1px solid var(--c-border);
border-radius: 12px;
box-shadow: 0 8px 20px -8px rgba(10,14,26,0.25);
animation: svmIgNotiIn 0.6s ease-out 1.2s both, svmIgNotiOut 0.6s ease-in 5s both;
z-index: 10;
}
@keyframes svmIgNotiIn {
from { transform: translateY(-20px); opacity: 0; }
to { transform: translateY(0); opacity: 1; }
}
@keyframes svmIgNotiOut {
0%, 80% { transform: translateY(0); opacity: 1; }
100% { transform: translateY(-30px); opacity: 0; }
}
.svm-ig-noti-av {
width: 32px; height: 32px;
background: linear-gradient(135deg, var(--c-accent), var(--c-accent-2));
color: #fff;
border-radius: 50%;
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 11px;
font-weight: 800;
letter-spacing: 0;
flex-shrink: 0;
}
.svm-ig-noti-body {
display: flex;
flex-direction: column;
gap: 1px;
min-width: 0;
flex: 1;
}
.svm-ig-noti-h {
font-size: 11px;
color: var(--c-text);
letter-spacing: -0.01em;
line-height: 1.2;
}
.svm-ig-noti-h b { font-weight: 800; }
.svm-ig-noti-tx {
font-size: 10px;
color: var(--c-muted);
letter-spacing: -0.005em;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.svm-ig-noti-time {
font-size: 9px;
font-weight: 600;
color: var(--c-muted);
flex-shrink: 0;
}
/* ==========================================================
MOCKUP DETAY: 06 Grafik Tasarım / Brand Guidelines v3 — sıfırdan 2026-05-27
========================================================== */
.svm-brand {
width: 100%;
max-width: 560px;
background: #fff;
border-radius: 16px;
padding: 0;
box-shadow: 0 28px 60px -24px rgba(10, 14, 26, 0.28);
border: 1px solid var(--c-border);
overflow: hidden;
font-family: 'Urbanist', 'Outfit', sans-serif;
}
/* Top doc bar */
.svm-bg-bar {
display: flex;
align-items: center;
justify-content: space-between;
padding: 10px 16px;
background: linear-gradient(180deg, #fafbfd, #fff);
border-bottom: 1px solid var(--c-border);
gap: 12px;
}
.svm-bg-bar-l, .svm-bg-bar-r { display: inline-flex; align-items: center; gap: 8px; }
.svm-bg-doctag {
font-family: 'JetBrains Mono', monospace;
font-size: 8.5px;
font-weight: 800;
color: var(--c-text);
letter-spacing: 0.18em;
text-transform: uppercase;
padding: 3px 7px;
background: #f1f5f9;
border-radius: 4px;
}
.svm-bg-doc-sep {
width: 1px;
height: 14px;
background: var(--c-border);
display: inline-block;
}
.svm-bg-doc-name {
font-family: 'Bricolage Grotesque', serif;
font-size: 12px;
font-weight: 800;
color: var(--c-text);
letter-spacing: -0.012em;
display: inline-flex;
align-items: baseline;
gap: 2px;
}
.svm-bg-doc-name i {
font-family: 'JetBrains Mono', monospace;
font-size: 7px;
font-weight: 800;
color: var(--c-muted);
letter-spacing: 0.1em;
font-style: normal;
text-transform: uppercase;
background: #f1f5f9;
padding: 2px 4px;
border-radius: 3px;
}
.svm-bg-ver {
font-family: 'JetBrains Mono', monospace;
font-size: 9px;
font-weight: 800;
color: var(--c-text);
letter-spacing: 0.04em;
padding: 3px 7px;
background: var(--c-accent-soft);
border-radius: 4px;
}
.svm-bg-rev, .svm-bg-pg {
font-family: 'JetBrains Mono', monospace;
font-size: 8.5px;
font-weight: 700;
color: var(--c-muted);
letter-spacing: 0.1em;
}
.svm-bg-pg { color: var(--c-text); }
/* Section wrapper */
.svm-bg-sec {
padding: 16px 16px 18px;
border-bottom: 1px solid var(--c-border);
}
.svm-bg-sec.last { border-bottom: 0; }
.svm-bg-sec-head {
display: flex;
align-items: baseline;
gap: 8px;
margin-bottom: 12px;
}
.svm-bg-sec-num {
font-family: 'JetBrains Mono', monospace;
font-size: 9px;
font-weight: 800;
color: var(--c-accent);
letter-spacing: 0.06em;
background: var(--c-accent-soft);
padding: 2px 6px;
border-radius: 4px;
flex-shrink: 0;
align-self: center;
}
.svm-bg-sec-h {
font-family: 'Bricolage Grotesque', serif;
font-size: 16px;
font-weight: 800;
color: var(--c-text);
letter-spacing: -0.012em;
line-height: 1;
}
.svm-bg-sec-sub {
font-family: 'JetBrains Mono', monospace;
font-size: 8px;
font-weight: 700;
color: var(--c-muted);
letter-spacing: 0.08em;
text-transform: uppercase;
margin-left: auto;
align-self: center;
}
/* Logo variants */
.svm-bg-logos {
display: grid;
grid-template-columns: 1.4fr 1fr 1fr;
gap: 8px;
margin-bottom: 12px;
}
.svm-bg-logo {
background: #fafbfd;
border: 1px solid var(--c-border);
border-radius: 10px;
padding: 14px 12px 10px;
display: flex;
flex-direction: column;
gap: 10px;
aspect-ratio: 1.3 / 1;
position: relative;
}
.svm-bg-logo.dark { background: var(--c-text); border-color: var(--c-text); }
.svm-bg-logo-lbl {
font-family: 'JetBrains Mono', monospace;
font-size: 7px;
font-weight: 800;
color: var(--c-muted);
letter-spacing: 0.12em;
text-transform: uppercase;
}
.svm-bg-logo.dark .svm-bg-logo-lbl { color: rgba(255,255,255,0.6); }
.svm-bg-logo-art {
flex: 1;
display: flex;
align-items: center;
gap: 7px;
justify-content: center;
}
.svm-bg-logo-art.vert {
flex-direction: column;
gap: 6px;
}
.svm-bg-mark {
width: 22px; height: 22px;
background: var(--c-text);
border-radius: 5px;
flex-shrink: 0;
display: inline-flex;
align-items: center;
justify-content: center;
position: relative;
}
.svm-bg-mark span {
width: 10px; height: 10px;
background: var(--c-accent);
border-radius: 50%;
}
.svm-bg-mark.sm { width: 18px; height: 18px; border-radius: 4px; }
.svm-bg-mark.sm span { width: 8px; height: 8px; }
.svm-bg-mark.xs { width: 14px; height: 14px; border-radius: 3px; }
.svm-bg-mark.xs span { width: 6px; height: 6px; }
.svm-bg-mark.xxs { width: 11px; height: 11px; border-radius: 2.5px; }
.svm-bg-mark.xxs span { width: 5px; height: 5px; }
.svm-bg-mark.inv { background: #fff; }
.svm-bg-mark.inv span { background: var(--c-accent); }
.svm-bg-name {
font-family: 'Bricolage Grotesque', serif;
font-size: 20px;
font-weight: 800;
color: var(--c-text);
letter-spacing: -0.018em;
line-height: 1;
}
.svm-bg-name.sm { font-size: 16px; }
.svm-bg-name.xs { font-size: 12px; }
.svm-bg-name.inv { color: #fff; }
.svm-bg-name-col {
display: flex;
flex-direction: column;
gap: 0;
}
.svm-bg-tag {
font-family: 'JetBrains Mono', monospace;
font-size: 7px;
font-weight: 700;
color: var(--c-muted);
letter-spacing: 0.1em;
text-transform: uppercase;
margin-top: 1px;
}
/* Do's & Don'ts */
.svm-bg-dod {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 6px;
}
.svm-bg-dod-c {
position: relative;
padding: 10px 6px 6px;
border: 1px solid var(--c-border);
border-radius: 8px;
display: flex;
flex-direction: column;
align-items: center;
gap: 5px;
background: #fff;
}
.svm-bg-dod-c.yes { background: rgba(22,163,74,0.06); border-color: rgba(22,163,74,0.32); }
.svm-bg-dod-c.no { background: rgba(239,68,68,0.04); border-color: rgba(239,68,68,0.22); }
.svm-bg-dod-tag {
position: absolute;
top: -7px;
left: 50%;
transform: translateX(-50%);
width: 14px; height: 14px;
border-radius: 50%;
background: #fff;
border: 1.5px solid currentColor;
color: #16a34a;
font-size: 8px;
font-weight: 900;
display: inline-flex;
align-items: center;
justify-content: center;
line-height: 1;
}
.svm-bg-dod-c.no .svm-bg-dod-tag { color: #ef4444; }
.svm-bg-dod-art {
flex: 1;
display: inline-flex;
align-items: center;
gap: 4px;
padding: 4px;
}
.svm-bg-dod-art.skew { transform: skewX(-12deg); }
.svm-bg-dod-art.recolor .svm-bg-mark { background: #f5c518; }
.svm-bg-dod-art.recolor .svm-bg-mark span { background: #fb3958; }
.svm-bg-dod-art.crowd {
position: relative;
}
.svm-bg-dod-art.crowd::before, .svm-bg-dod-art.crowd::after {
content: '';
position: absolute;
background: rgba(239,68,68,0.4);
border-radius: 1px;
}
.svm-bg-dod-art.crowd::before { left: 0; top: 50%; width: 12px; height: 1.5px; transform: translateY(-50%); }
.svm-bg-dod-art.crowd::after { right: 0; top: 50%; width: 12px; height: 1.5px; transform: translateY(-50%); }
.svm-bg-dod-lbl {
font-family: 'JetBrains Mono', monospace;
font-size: 7px;
font-weight: 800;
color: var(--c-text);
letter-spacing: 0.06em;
text-transform: uppercase;
text-align: center;
}
/* Color palette */
.svm-bg-pal-primary {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 8px;
margin-bottom: 8px;
}
.svm-bg-pal-c {
padding: 12px 12px 10px;
border-radius: 10px;
background: var(--c);
color: #fff;
aspect-ratio: 2 / 1;
display: flex;
flex-direction: column;
justify-content: flex-end;
gap: 2px;
position: relative;
}
.svm-bg-pal-c[style*="#E1F3FB"], .svm-bg-pal-c[style*="#F5C518"] { color: var(--c-text); }
.svm-bg-pal-sw {
position: absolute;
top: 8px;
right: 8px;
width: 16px; height: 16px;
background: rgba(255,255,255,0.25);
border-radius: 50%;
border: 1.5px solid rgba(255,255,255,0.5);
}
.svm-bg-pal-c[style*="#E1F3FB"] .svm-bg-pal-sw,
.svm-bg-pal-c[style*="#F5C518"] .svm-bg-pal-sw {
background: rgba(0,0,0,0.1);
border-color: rgba(0,0,0,0.2);
}
.svm-bg-pal-name {
font-family: 'Bricolage Grotesque', serif;
font-size: 16px;
font-weight: 800;
letter-spacing: -0.015em;
line-height: 1;
}
.svm-bg-pal-hex {
font-family: 'JetBrains Mono', monospace;
font-size: 9px;
font-weight: 800;
letter-spacing: 0.04em;
}
.svm-bg-pal-meta {
font-family: 'JetBrains Mono', monospace;
font-size: 7.5px;
font-weight: 700;
opacity: 0.7;
letter-spacing: 0.04em;
}
.svm-bg-pal-row {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 6px;
}
.svm-bg-pal-mini {
padding: 7px 8px 8px;
border-radius: 8px;
background: var(--c);
color: #fff;
aspect-ratio: 1.4 / 1;
display: flex;
flex-direction: column;
justify-content: flex-end;
gap: 1px;
}
.svm-bg-pal-mini[style*="#E1F3FB"], .svm-bg-pal-mini[style*="#F5C518"] { color: var(--c-text); }
.svm-bg-pal-mini .svm-bg-pal-name {
font-size: 11px;
font-weight: 800;
letter-spacing: -0.025em;
}
.svm-bg-pal-mini .svm-bg-pal-hex {
font-size: 7.5px;
opacity: 0.85;
}
/* Typography */
.svm-bg-type {
display: flex;
flex-direction: column;
gap: 14px;
}
.svm-bg-type-big {
display: flex;
align-items: flex-end;
gap: 14px;
padding: 14px 16px;
background: linear-gradient(135deg, var(--c-accent-soft), #fff);
border: 1px solid var(--c-border);
border-radius: 10px;
}
.svm-bg-type-aa {
font-family: 'Urbanist', 'Outfit', sans-serif;
font-size: 72px;
font-weight: 900;
color: var(--c-text);
letter-spacing: -0.02em;
line-height: 0.85;
}
.svm-bg-type-meta {
display: flex;
flex-direction: column;
gap: 1px;
padding-bottom: 6px;
}
.svm-bg-type-family {
font-family: 'Urbanist', 'Outfit', sans-serif;
font-size: 16px;
font-weight: 900;
color: var(--c-text);
letter-spacing: -0.018em;
line-height: 1;
}
.svm-bg-type-style {
font-family: 'JetBrains Mono', monospace;
font-size: 8.5px;
font-weight: 700;
color: var(--c-muted);
letter-spacing: 0.1em;
text-transform: uppercase;
}
.svm-bg-type-weights {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 6px;
}
.svm-bg-type-w {
font-family: 'Urbanist', 'Outfit', sans-serif;
font-size: 11px;
color: var(--c-text);
padding: 7px 10px;
background: #fafbfd;
border: 1px solid var(--c-border);
border-radius: 6px;
text-align: center;
letter-spacing: -0.01em;
}
.svm-bg-type-scale {
display: flex;
flex-direction: column;
gap: 4px;
padding: 4px 0 0;
border-top: 1px dashed var(--c-border);
padding-top: 10px;
}
.svm-bg-type-row {
display: grid;
grid-template-columns: 70px 1fr;
gap: 10px;
align-items: baseline;
}
.svm-bg-type-sz {
font-family: 'JetBrains Mono', monospace;
font-size: 8px;
font-weight: 800;
color: var(--c-muted);
letter-spacing: 0.1em;
text-transform: uppercase;
padding-top: 6px;
}
.svm-bg-type-sp {
font-family: 'Bricolage Grotesque', serif;
font-size: 22px;
font-weight: 800;
color: var(--c-text);
letter-spacing: -0.015em;
line-height: 1;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.svm-bg-type-sp.h2 { font-size: 17px; }
.svm-bg-type-sp.h3 { font-size: 13px; font-weight: 700; }
.svm-bg-type-sp.body {
font-family: 'Urbanist', 'Outfit', sans-serif;
font-size: 11px;
font-weight: 500;
letter-spacing: -0.005em;
white-space: normal;
line-height: 1.4;
}
/* Applications */
.svm-bg-apps {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 10px;
}
.svm-bg-app {
display: flex;
flex-direction: column;
gap: 5px;
}
.svm-bg-app-lbl {
font-family: 'JetBrains Mono', monospace;
font-size: 7.5px;
font-weight: 800;
color: var(--c-muted);
letter-spacing: 0.1em;
text-transform: uppercase;
}
.svm-bg-app-art {
aspect-ratio: 1.6 / 1;
background: #fff;
border: 1px solid var(--c-border);
border-radius: 8px;
overflow: hidden;
position: relative;
}
/* Business card */
.svm-bg-app-art.bcard {
display: grid;
grid-template-columns: 1fr 1.4fr;
gap: 4px;
padding: 4px;
background: #f1f5f9;
}
.svm-bg-bcard-f, .svm-bg-bcard-b {
border-radius: 5px;
padding: 10px 9px;
box-shadow: 0 2px 5px -2px rgba(10,14,26,0.18);
}
.svm-bg-bcard-f {
background: var(--c-text);
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 5px;
}
.svm-bg-bcard-f .svm-bg-mark { background: var(--c-accent); }
.svm-bg-bcard-f .svm-bg-mark span { background: #fff; }
.svm-bg-bcard-f .svm-bg-name { color: #fff; }
.svm-bg-bcard-b {
background: #fff;
display: flex;
flex-direction: column;
justify-content: center;
gap: 2px;
}
.svm-bg-bc-name {
font-family: 'Bricolage Grotesque', serif;
font-size: 11px;
font-weight: 800;
color: var(--c-text);
letter-spacing: -0.012em;
line-height: 1;
}
.svm-bg-bc-role {
font-size: 7.5px;
font-weight: 600;
color: var(--c-muted);
letter-spacing: -0.005em;
}
.svm-bg-bc-contact {
font-family: 'JetBrains Mono', monospace;
font-size: 6.5px;
font-weight: 700;
color: var(--c-text);
letter-spacing: 0.02em;
margin-top: 4px;
}
/* Packaging */
.svm-bg-app-art.pack {
background:
radial-gradient(ellipse at center, transparent 0 35%, rgba(10,14,26,0.04) 60%, rgba(10,14,26,0.1) 100%);
display: flex;
align-items: center;
justify-content: center;
padding: 8px;
}
.svm-bg-pack-box {
aspect-ratio: 0.7 / 1;
height: 100%;
max-height: 100%;
background: linear-gradient(180deg, #f1f5f9 0%, #fff 50%, #f1f5f9 100%);
border: 1px solid #cbd5e1;
border-radius: 4px;
box-shadow: 0 8px 16px -8px rgba(10,14,26,0.2);
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 5px;
padding: 8px 6px;
position: relative;
}
.svm-bg-pack-box::after {
content: '';
position: absolute;
left: 50%;
bottom: -4px;
transform: translateX(-50%);
width: 70%;
height: 6px;
background: radial-gradient(ellipse at center, rgba(10,14,26,0.25) 0%, transparent 70%);
border-radius: 50%;
}
.svm-bg-pack-n {
font-family: 'Bricolage Grotesque', serif;
font-size: 11px;
font-weight: 800;
color: var(--c-text);
letter-spacing: -0.015em;
line-height: 1;
}
.svm-bg-pack-tag {
font-family: 'JetBrains Mono', monospace;
font-size: 5.5px;
font-weight: 700;
color: var(--c-muted);
letter-spacing: 0.16em;
text-align: center;
text-transform: uppercase;
}
.svm-bg-pack-vol {
font-family: 'JetBrains Mono', monospace;
font-size: 7px;
font-weight: 800;
color: var(--c-accent);
letter-spacing: 0.06em;
margin-top: 4px;
}
/* Poster */
.svm-bg-app-art.poster {
background:
radial-gradient(circle at 20% 90%, rgba(245,197,24,0.4) 0 30%, transparent 35%),
linear-gradient(135deg, var(--c-text) 0%, #1a1f2e 100%);
color: #fff;
padding: 12px;
display: flex;
flex-direction: column;
justify-content: space-between;
position: relative;
}
.svm-bg-poster-eb {
font-family: 'JetBrains Mono', monospace;
font-size: 7px;
font-weight: 800;
color: rgba(255,255,255,0.6);
letter-spacing: 0.14em;
text-transform: uppercase;
}
.svm-bg-poster-h {
font-family: 'Bricolage Grotesque', serif;
font-size: 26px;
font-weight: 800;
letter-spacing: -0.02em;
line-height: 0.9;
margin: auto 0;
}
.svm-bg-poster-mark {
position: absolute;
top: 12px; right: 12px;
width: 14px; height: 14px;
background: var(--c-accent);
border-radius: 3px;
display: inline-flex;
align-items: center;
justify-content: center;
}
.svm-bg-poster-mark span {
width: 6px; height: 6px;
background: #fff;
border-radius: 50%;
}
.svm-bg-poster-ft {
font-family: 'JetBrains Mono', monospace;
font-size: 6.5px;
font-weight: 800;
color: rgba(255,255,255,0.5);
letter-spacing: 0.1em;
text-transform: uppercase;
}
/* Social template */
.svm-bg-app-art.social {
background:
radial-gradient(circle at 85% 15%, rgba(255,255,255,0.18) 0 25%, transparent 30%),
linear-gradient(135deg, var(--c-accent), var(--c-accent-2));
color: #fff;
padding: 10px 12px;
display: flex;
flex-direction: column;
justify-content: space-between;
}
.svm-bg-social-eb {
font-family: 'JetBrains Mono', monospace;
font-size: 7px;
font-weight: 800;
letter-spacing: 0.14em;
opacity: 0.9;
}
.svm-bg-social-big {
font-family: 'Bricolage Grotesque', serif;
font-size: 36px;
font-weight: 800;
letter-spacing: -0.018em;
line-height: 1;
margin: auto 0 0;
}
.svm-bg-social-big small {
font-size: 18px;
font-weight: 700;
opacity: 0.8;
}
.svm-bg-social-lbl {
font-size: 9px;
font-weight: 700;
letter-spacing: 0.04em;
margin-bottom: 4px;
}
.svm-bg-social-ft {
display: inline-flex;
align-items: center;
gap: 4px;
font-family: 'JetBrains Mono', monospace;
font-size: 7px;
font-weight: 800;
letter-spacing: 0.06em;
opacity: 0.9;
margin-top: 4px;
}
.svm-bg-social-ft .svm-bg-mark { background: rgba(255,255,255,0.18); }
.svm-bg-social-ft .svm-bg-mark span { background: #fff; }
/* Photography moodboard */
.svm-bg-mood {
display: grid;
grid-template-columns: 1.4fr 1fr 1fr 1fr;
grid-template-rows: 1fr 1fr;
gap: 5px;
aspect-ratio: 2.2 / 1;
}
.svm-bg-mood-i {
border-radius: 6px;
overflow: hidden;
position: relative;
}
.svm-bg-mood-i.m1 {
grid-row: span 2;
background:
radial-gradient(circle at 30% 30%, rgba(255,236,200,0.6) 0 25%, transparent 30%),
linear-gradient(135deg, #f59e0b 0%, #d97706 50%, #92400e 100%);
}
.svm-bg-mood-i.m1::after {
content: '';
position: absolute;
inset: 30% 25% 25% 35%;
background: radial-gradient(circle, rgba(255,255,255,0.35) 0%, transparent 60%);
border-radius: 50%;
}
.svm-bg-mood-i.m2 {
background:
linear-gradient(180deg, #e0f2fe 0%, #bae6fd 50%, #7dd3fc 100%);
}
.svm-bg-mood-i.m2::after {
content: '';
position: absolute;
inset: 60% 0 0 0;
background: linear-gradient(180deg, transparent, rgba(31,167,232,0.2));
}
.svm-bg-mood-i.m3 {
background:
linear-gradient(135deg, #fef3c7 0%, #fcd34d 60%, #f59e0b 100%);
}
.svm-bg-mood-i.m4 {
background:
radial-gradient(circle at 70% 30%, rgba(255,255,255,0.4) 0 20%, transparent 25%),
linear-gradient(135deg, #1e293b 0%, #0f172a 100%);
}
/* Footer */
.svm-bg-foot {
display: flex;
align-items: center;
justify-content: space-between;
padding: 10px 16px;
background: #fafbfd;
gap: 12px;
}
.svm-bg-foot-c, .svm-bg-foot-r {
font-family: 'JetBrains Mono', monospace;
font-size: 7.5px;
font-weight: 700;
color: var(--c-muted);
letter-spacing: 0.1em;
text-transform: uppercase;
}
@media (max-width: 860px) {
.sv-head-grid {
grid-template-columns: 1fr;
gap: 20px;
margin-bottom: 40px;
}
.sv-side {
position: static;
}
.sv-grid {
grid-template-columns: 1fr;
gap: 32px;
}
.sv-stage {
min-height: 380px;
}
.sv-name {
font-size: 1.25rem;
}
.sv-arrow {
width: 36px;
height: 36px;
font-size: 14px;
}
}
/* ==========================================================
HESAP KISITLAMA ÇÖZÜMLERİ — v4 editorial
Pentagram-class minimal, typography-driven, hairline grid
========================================================== */
.acc-rescue {
position: relative;
padding: clamp(112px, 13vw, 176px) 0 clamp(96px, 12vw, 160px);
background: var(--c-bg);
overflow: hidden;
isolation: isolate;
}
.acc-rescue::before { display: none; }
.acc-rescue .container { position: relative; z-index: 2; }
/* ────────────── HERO ────────────── */
.ar-hero {
max-width: 880px;
margin: 0 auto clamp(80px, 10vw, 132px);
text-align: center;
}
.ar-hero-meta {
display: inline-flex;
align-items: center;
gap: 14px;
margin-bottom: 32px;
}
.ar-hero-num {
font-family: 'JetBrains Mono', ui-monospace, monospace;
font-size: 11px;
font-weight: 600;
color: var(--c-accent);
letter-spacing: 0.14em;
}
.ar-hero-line {
width: 36px;
height: 1px;
background: var(--c-text);
opacity: 0.25;
}
.ar-hero-eyebrow {
font-family: 'JetBrains Mono', ui-monospace, monospace;
font-size: 11px;
font-weight: 600;
color: var(--c-text);
letter-spacing: 0.2em;
text-transform: uppercase;
}
.ar-hero-title {
font-family: 'Urbanist', 'Outfit', sans-serif;
font-size: clamp(2.4rem, 5.4vw, 5rem);
font-weight: 900;
line-height: 1.0;
letter-spacing: -0.02em;
color: rgba(10, 14, 26, 0.18);
margin: 0 0 28px;
max-width: 18ch;
margin-left: auto;
margin-right: auto;
}
/* FOUC guard: JS kelimeleri sarana (data-reveal-wrapped) kadar ham == işaretlerini gizle */
[data-reveal]:not([data-reveal-wrapped]),
[data-reveal-prose]:not([data-reveal-wrapped]) { color: transparent; }
.ar-hero-title .w {
display: inline-block;
color: rgba(10, 14, 26, 0.18);
transition: color .5s ease;
}
/* tek başına noktalama (. , ! ?) inline-block baseline'dan kaymasın → düz inline */
.ar-hero-title .w.wp { display: inline; }
.ar-hero-title .w.is-on { color: var(--c-text); }
.ar-hero-title .w.is-on.hl { color: var(--c-accent); }
.ar-hero-lead {
font-family: 'Urbanist', 'Outfit', sans-serif;
font-size: clamp(16px, 1.2vw, 18.5px);
line-height: 1.65;
color: var(--c-muted);
max-width: 56ch;
margin: 0 auto;
}
/* ────────────── BLOCK HEADER (process / platforms) ────────────── */
.ar-block {
margin-bottom: clamp(80px, 10vw, 132px);
position: relative;
}
.acc-rescue .ar-block:last-child { margin-bottom: 0; }
/* ar-block-process köşelerini 01/SÜREÇ label'lardan uzaklaştır */
.ar-block-process > .dx-corner-tl { top: -18px; left: -18px; }
.ar-block-process > .dx-corner-tr { top: -18px; right: -18px; }
.ar-block-process > .dx-corner-bl { bottom: -18px; left: -18px; }
.ar-block-process > .dx-corner-br { bottom: -18px; right: -18px; }
.ar-block-h {
display: flex;
align-items: center;
gap: 16px;
padding-bottom: 22px;
margin-bottom: clamp(36px, 4vw, 56px);
border-bottom: 1px solid rgba(10, 14, 26, 0.1);
}
.ar-block-num {
font-family: 'JetBrains Mono', ui-monospace, monospace;
font-size: 11px;
font-weight: 600;
color: var(--c-accent);
letter-spacing: 0.14em;
}
.ar-block-line {
flex: 1;
height: 1px;
background: transparent;
}
.ar-block-l {
font-family: 'JetBrains Mono', ui-monospace, monospace;
font-size: 11px;
font-weight: 600;
color: var(--c-text);
letter-spacing: 0.22em;
text-transform: uppercase;
}
/* ────────────── PROCESS (3 columns, hairline dividers) ────────────── */
.ar-steps {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
gap: 0;
}
.ar-step {
padding: clamp(12px, 1.6vw, 24px) clamp(28px, 3vw, 40px) clamp(28px, 3.2vw, 44px);
border-right: 1px solid rgba(10, 14, 26, 0.08);
display: flex;
flex-direction: column;
gap: 18px;
position: relative;
}
.ar-step:first-child { padding-left: 0; }
.ar-step:last-child { border-right: none; padding-right: 0; }
.ar-step::before {
content: "";
position: absolute;
left: 0;
top: 0;
width: 32px;
height: 2px;
background: var(--c-accent);
}
.ar-step:first-child::before { left: 0; }
.ar-step:nth-child(2)::before { left: clamp(28px, 3vw, 40px); }
.ar-step:last-child::before { left: clamp(28px, 3vw, 40px); }
/* ── kariyer · başvuru süreci yolculuğu (renkli numaralı node + bağlantı çizgisi) ── */
.kr-flow {
list-style: none;
margin: clamp(34px, 4vw, 48px) 0 0;
padding: 0;
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: clamp(18px, 2.4vw, 34px);
position: relative;
}
/* node hizasında soluk kesik bağlantı hattı (hairline draw-in dili) */
.kr-flow::before {
content: "";
position: absolute;
top: 28px;
left: 8%; right: 8%;
height: 2px;
background: repeating-linear-gradient(90deg, var(--c-border) 0 6px, transparent 6px 13px);
z-index: 0;
}
.kr-flow-step { position: relative; z-index: 1; }
.kr-flow-node {
display: inline-grid;
place-items: center;
width: 56px; height: 56px;
border-radius: 17px;
background: var(--tone-soft);
color: var(--tone);
font-size: 1.4rem;
margin-bottom: 20px;
border: 1px solid color-mix(in srgb, var(--tone) 28%, #fff);
box-shadow: 0 8px 20px color-mix(in srgb, var(--tone) 24%, transparent);
transition: transform var(--transition);
}
.kr-flow-step:hover .kr-flow-node { transform: translateY(-3px) rotate(-3deg); }
.kr-flow-tag {
display: block;
font-family: 'JetBrains Mono', ui-monospace, monospace;
font-size: 11px; font-weight: 600;
letter-spacing: 0.12em; text-transform: uppercase;
color: #94a3b8;
margin-bottom: 7px;
}
.kr-flow-t {
font-family: 'Urbanist', 'Outfit', 'Bricolage Grotesque', sans-serif;
font-weight: 800;
font-size: clamp(1.18rem, 1.7vw, 1.45rem);
line-height: 1.08;
letter-spacing: -0.025em;
color: var(--c-text);
margin: 0 0 9px;
}
.kr-flow-d { font-size: 14.5px; line-height: 1.6; color: var(--c-muted); margin: 0; }
.kr-flow--pink { --tone: var(--c-pink); --tone-soft: var(--c-pink-soft); }
.kr-flow--mint { --tone: #1f9d6b; --tone-soft: color-mix(in srgb, var(--c-mint) 42%, #fff); }
.kr-flow--lilac { --tone: #7c5cd6; --tone-soft: color-mix(in srgb, var(--c-lilac) 46%, #fff); }
.kr-flow--yellow { --tone: #b07d00; --tone-soft: color-mix(in srgb, var(--c-yellow) 46%, #fff); }
@media (max-width: 900px) {
.kr-flow { grid-template-columns: 1fr 1fr; gap: clamp(20px, 4vw, 30px); }
.kr-flow::before { display: none; }
}
@media (max-width: 540px) {
.kr-flow { grid-template-columns: 1fr; }
}
/* ============================================================
DİJİTAL PAZARLAMA hizmet sayfası (.dpz) — özgün CSS tarayıcı + büyüme paneli
============================================================ */
.dpz-hero-wrap {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
align-items: center;
gap: clamp(36px, 5vw, 72px);
}
.dpz-hero .ar-hero-title { margin-bottom: 18px; }
.dpz-cta-row { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 30px; }
/* mobilde hero CTA tam-genişlik + ortalı (anasayfa hero deseniyle aynı) */
@media (max-width: 600px) {
.dpz-cta-row { width: 100%; }
.dpz-cta-row .btn { width: 100%; justify-content: center; }
/* hero üstüne fazladan nefes payı (header ile eyebrow arası) */
.dpz-hero.abx-first { padding-top: calc(var(--header-h) + 76px); }
}
/* görsel sahne */
.dpz-visual {
position: relative;
opacity: 0;
transform: translateY(18px);
transition: opacity .8s ease, transform .8s cubic-bezier(.2,.7,.3,1);
}
.dpz-visual.visible, [data-anim].visible.dpz-visual { opacity: 1; transform: none; }
/* === Pazarlama Komuta Merkezi === */
.dpz-cc {
background: linear-gradient(180deg, #ffffff, #f7fbfe);
border: 1px solid var(--c-border);
border-radius: 20px;
box-shadow: 0 34px 80px -34px color-mix(in srgb, var(--c-accent) 42%, transparent), 0 10px 28px rgba(10,14,26,.06);
overflow: hidden;
}
.dpz-cc-bar {
display: flex;
align-items: center;
gap: 12px;
padding: 12px 16px;
background: #fff;
border-bottom: 1px solid var(--c-border);
}
.dpz-cc-live {
display: inline-flex;
align-items: center;
gap: 6px;
font-family: 'JetBrains Mono', ui-monospace, monospace;
font-size: 10.5px;
font-weight: 700;
letter-spacing: .14em;
color: var(--c-pink);
}
.dpz-cc-livedot {
width: 7px; height: 7px;
border-radius: 50%;
background: var(--c-pink);
box-shadow: 0 0 0 0 color-mix(in srgb, var(--c-pink) 60%, transparent);
animation: dpz-pulse 1.8s ease-out infinite;
}
@keyframes dpz-pulse {
0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--c-pink) 55%, transparent); }
70% { box-shadow: 0 0 0 7px transparent; }
100% { box-shadow: 0 0 0 0 transparent; }
}
.dpz-cc-name {
font-size: 12.5px;
font-weight: 600;
color: var(--c-text);
flex: 1;
}
.dpz-cc-clock {
font-family: 'JetBrains Mono', ui-monospace, monospace;
font-size: 12px;
color: var(--c-muted);
}
.dpz-cc-grid {
display: grid;
grid-template-columns: 1.5fr 1fr;
grid-template-areas:
"main mini1"
"main mini2"
"chan log";
gap: 12px;
padding: 14px;
}
.dpz-cc-panel {
background: #fff;
border: 1px solid var(--c-border);
border-radius: 14px;
padding: 16px;
position: relative;
}
.dpz-cc-lbl {
display: block;
font-size: 11px;
color: var(--c-muted);
margin-bottom: 7px;
letter-spacing: .01em;
}
.dpz-cc-main { grid-area: main; display: flex; flex-direction: column; }
.dpz-cc-big {
font-family: 'Urbanist', 'Outfit', sans-serif;
font-size: clamp(1.9rem, 3.2vw, 2.7rem);
font-weight: 800;
letter-spacing: -.03em;
color: var(--c-text);
line-height: 1;
}
.dpz-cc-trend {
display: inline-flex; align-items: center; gap: 5px;
margin-top: 8px;
font-size: 12.5px; font-weight: 700;
color: #1f9d6b;
}
.dpz-cc-trend small { color: var(--c-muted); font-weight: 500; }
.dpz-cc-spark { width: 100%; height: 54px; margin-top: auto; display: block; }
.dpz-cc-spark-line { stroke-dasharray: 520; stroke-dashoffset: 520; }
.dpz-visual.visible .dpz-cc-spark-line { animation: dpz-draw 1.6s ease .3s forwards; }
@keyframes dpz-draw { to { stroke-dashoffset: 0; } }
.dpz-cc-spark-area { opacity: 0; transition: opacity .8s ease 1.1s; }
.dpz-visual.visible .dpz-cc-spark-area { opacity: 1; }
.dpz-cc-mini { display: flex; flex-direction: column; justify-content: center; }
.dpz-cc-mini-1 { grid-area: mini1; }
.dpz-cc-mini-2 { grid-area: mini2; }
.dpz-cc-mini strong {
font-family: 'Urbanist', 'Outfit', sans-serif;
font-size: 1.5rem; font-weight: 800; letter-spacing: -.02em;
color: var(--c-text); line-height: 1;
}
.dpz-cc-up {
display: inline-flex; align-items: center; gap: 2px;
margin-top: 6px; font-size: 11.5px; font-weight: 700; color: #1f9d6b;
}
.dpz-cc-channels { grid-area: chan; }
.dpz-cc-chan { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; }
.dpz-cc-chan li {
display: grid;
grid-template-columns: 84px 1fr 34px;
align-items: center;
gap: 10px;
font-size: 11.5px;
color: var(--c-muted);
}
.dpz-cc-chan b { color: var(--c-text); font-weight: 700; text-align: right; }
.dpz-cc-track {
height: 7px;
border-radius: 4px;
background: color-mix(in srgb, var(--c-text) 7%, transparent);
overflow: hidden;
}
.dpz-cc-track i {
display: block;
height: 100%;
width: 0;
border-radius: 4px;
transition: width 1s cubic-bezier(.2,.8,.3,1) .4s;
}
.dpz-visual.visible .dpz-cc-track i { width: var(--w); }
.dpz-cc-track i.p { background: var(--c-pink); }
.dpz-cc-track i.m { background: #1f9d6b; }
.dpz-cc-track i.l { background: #7c5cd6; }
.dpz-cc-track i.y { background: var(--c-yellow); }
.dpz-cc-log { grid-area: log; background: var(--c-accent-soft); border-color: color-mix(in srgb, var(--c-accent) 18%, var(--c-border)); }
.dpz-cc-log .dpz-cc-lbl { color: var(--c-accent-2); display: flex; align-items: center; gap: 6px; }
.dpz-cc-log .dpz-cc-livedot { background: #1f9d6b; box-shadow: 0 0 0 0 color-mix(in srgb, #1f9d6b 60%, transparent); }
.dpz-cc-log-line {
margin: 0;
font-family: 'JetBrains Mono', ui-monospace, monospace;
font-size: 11.5px;
line-height: 1.5;
color: #1f7a55;
min-height: 2.4em;
}
.dpz-cc-caret {
display: inline-block;
width: 7px; height: 13px;
margin-left: 2px;
background: #1f9d6b;
vertical-align: -2px;
animation: dpz-blink 1s steps(1) infinite;
}
@keyframes dpz-blink { 50% { opacity: 0; } }
/* === Mağaza Yönetim Paneli (CRM · e-ticaret hero) === */
.dpz-crm {
display: grid;
grid-template-columns: clamp(120px, 14vw, 168px) 1fr;
background: #fff;
border: 1px solid var(--c-border);
border-radius: 18px;
box-shadow: 0 34px 80px -34px color-mix(in srgb, var(--c-accent) 42%, transparent), 0 10px 28px rgba(10,14,26,.06);
overflow: hidden;
min-height: 360px;
}
.dpz-crm-side {
background: linear-gradient(180deg, #f7fbfe, #eef5fb);
border-right: 1px solid var(--c-border);
padding: 16px 12px;
display: flex;
flex-direction: column;
gap: 6px;
}
.dpz-crm-brand {
display: flex; align-items: center; gap: 8px;
font-family: 'Urbanist', 'Outfit', sans-serif; font-weight: 800; font-size: .95rem;
color: var(--c-text); letter-spacing: -.02em;
padding: 4px 8px 14px;
}
.dpz-crm-logo { width: 18px; height: 18px; border-radius: 6px; background: linear-gradient(135deg, var(--c-accent), #7c5cd6); flex: none; }
.dpz-crm-nav { display: flex; flex-direction: column; gap: 2px; }
.dpz-crm-navitem {
display: flex; align-items: center; gap: 9px;
width: 100%;
padding: 9px 10px;
border: none; background: none; text-align: left;
border-radius: 9px;
font-family: inherit;
font-size: 12.5px; font-weight: 500; color: var(--c-muted);
cursor: pointer;
transition: background .18s ease, color .18s ease;
}
.dpz-crm-navitem i { font-size: 1rem; }
.dpz-crm-navitem em {
margin-left: auto;
font-style: normal; font-size: 10px; font-weight: 700;
background: var(--c-pink); color: #fff;
border-radius: 999px; padding: 1px 7px;
}
.dpz-crm-navitem:hover { background: rgba(255,255,255,.6); color: var(--c-text); }
.dpz-crm-navitem.on { background: #fff; color: var(--c-accent-2); font-weight: 700; box-shadow: 0 4px 12px rgba(10,14,26,.06); }
.dpz-crm-navitem.on i { color: var(--c-accent); }
.dpz-crm-plan {
margin-top: auto;
display: flex; align-items: center; gap: 7px;
font-size: 11px; color: #1f9d6b; font-weight: 600;
padding: 9px 10px;
background: color-mix(in srgb, var(--c-mint) 30%, #fff);
border-radius: 9px;
}
.dpz-crm-main { padding: 14px 16px 16px; min-width: 0; }
.dpz-crm-top {
display: flex; align-items: center; gap: 10px;
padding-bottom: 14px; border-bottom: 1px solid var(--c-border);
}
.dpz-crm-search {
flex: 1;
display: inline-flex; align-items: center; gap: 8px;
background: #f4f8fc; border: 1px solid var(--c-border); border-radius: 9px;
padding: 8px 12px; font-size: 12px; color: #9aa3b2;
}
.dpz-crm-chip {
display: inline-flex; align-items: center; gap: 6px;
font-size: 11.5px; color: var(--c-muted);
border: 1px solid var(--c-border); border-radius: 9px; padding: 7px 11px;
white-space: nowrap;
}
.dpz-crm-bell { position: relative; color: var(--c-muted); font-size: 1.05rem; }
.dpz-crm-bell::after { content: ""; position: absolute; top: 0; right: 0; width: 6px; height: 6px; border-radius: 50%; background: var(--c-pink); }
.dpz-crm-ava {
width: 30px; height: 30px; border-radius: 50%;
display: grid; place-items: center;
background: linear-gradient(135deg, var(--c-accent), #7c5cd6);
color: #fff; font-weight: 700; font-size: 12px; flex: none;
}
.dpz-crm-kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin: 14px 0; align-items: stretch; }
.dpz-crm-kpi { background: #fff; border: 1px solid var(--c-border); border-radius: 12px; padding: 12px; display: flex; flex-direction: column; }
.dpz-crm-kpi > span { display: block; font-size: 10.5px; color: var(--c-muted); margin-bottom: 5px; }
.dpz-crm-kpi strong { display: block; font-family: 'Urbanist', 'Outfit', sans-serif; font-size: 1.12rem; font-weight: 800; letter-spacing: -.02em; color: var(--c-text); line-height: 1; white-space: nowrap; }
.dpz-crm-kpi em { display: inline-flex; align-items: center; font-style: normal; font-size: 10.5px; font-weight: 700; margin-top: auto; padding-top: 8px; }
.dpz-crm-kpi em.up { color: #1f9d6b; }
.dpz-crm-orders-head {
display: flex; align-items: center; justify-content: space-between;
margin-bottom: 10px;
}
.dpz-crm-orders-head strong { font-family: 'Urbanist', 'Outfit', sans-serif; font-size: .95rem; font-weight: 700; color: var(--c-text); }
.dpz-crm-orders-head span { font-size: 11.5px; color: var(--c-accent-2); display: inline-flex; align-items: center; gap: 3px; }
.dpz-crm-table { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.dpz-crm-row {
display: grid;
grid-template-columns: 62px 1fr 1fr auto auto;
align-items: center;
gap: 10px;
padding: 9px 10px;
border: 1px solid var(--c-border);
border-radius: 10px;
background: #fff;
font-size: 12px;
}
.dpz-crm-row.is-new { animation: dpz-order-in .5s cubic-bezier(.2,.8,.3,1); }
@keyframes dpz-order-in { 0% { opacity: 0; transform: translateY(-12px); } 100% { opacity: 1; transform: none; } }
.dpz-crm-id { font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 11px; color: var(--c-muted); }
.dpz-crm-cust { display: inline-flex; align-items: center; gap: 7px; color: var(--c-text); font-weight: 600; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dpz-crm-cav {
width: 22px; height: 22px; border-radius: 50%; flex: none;
display: grid; place-items: center;
background: var(--c-accent-soft); color: var(--c-accent-2);
font-size: 10px; font-weight: 700;
}
.dpz-crm-prod { color: var(--c-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dpz-crm-tot { font-family: 'Urbanist', 'Outfit', sans-serif; font-weight: 700; color: var(--c-text); white-space: nowrap; }
.dpz-crm-badge {
font-size: 10px; font-weight: 700; letter-spacing: .01em;
padding: 3px 9px; border-radius: 999px; white-space: nowrap;
}
.dpz-crm-badge.new { background: var(--c-accent-soft); color: var(--c-accent-2); }
.dpz-crm-badge.prep { background: color-mix(in srgb, var(--c-yellow) 38%, #fff); color: #9a6b00; }
.dpz-crm-badge.ship { background: color-mix(in srgb, var(--c-lilac) 42%, #fff); color: #6b4fc4; }
.dpz-crm-badge.done { background: color-mix(in srgb, var(--c-mint) 40%, #fff); color: #1f8a5f; }
.dpz-crm-badge.out { background: var(--c-pink-soft); color: var(--c-pink); }
/* sekme panelleri */
.dpz-crm-pane { animation: dpz-pane-in .35s ease; }
@keyframes dpz-pane-in { 0% { opacity: 0; transform: translateY(6px); } 100% { opacity: 1; transform: none; } }
.dpz-crm-pane[data-pane="customers"] .dpz-crm-row { grid-template-columns: 1.5fr 1fr auto auto; }
.dpz-crm-cav i { font-size: .8rem; }
/* orders filtre çipleri */
.dpz-crm-filters { display: inline-flex; gap: 6px; }
.dpz-crm-filters b {
font-weight: 600; font-size: 11px; color: var(--c-muted);
border: 1px solid var(--c-border); border-radius: 999px; padding: 3px 10px;
}
.dpz-crm-filters b.on { background: var(--c-accent); color: #fff; border-color: var(--c-accent); }
.dpz-crm-up { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; font-weight: 700; color: #1f9d6b; }
/* rapor çubukları */
.dpz-crm-rep-bars {
display: grid; grid-template-columns: repeat(7, 1fr);
align-items: end; gap: 8px;
height: 150px; margin: 6px 0 4px;
}
.dpz-crm-rep-bar { display: flex; flex-direction: column; align-items: center; justify-content: flex-end; height: 100%; gap: 6px; }
.dpz-crm-rep-bar i {
display: block; width: 100%; max-width: 26px;
height: var(--h);
border-radius: 6px 6px 0 0;
background: linear-gradient(180deg, var(--c-accent), color-mix(in srgb, var(--c-accent) 55%, #fff));
transform: scaleY(0); transform-origin: bottom;
transition: transform .6s cubic-bezier(.2,.8,.3,1);
}
.dpz-crm-rep-bar:nth-child(6) i, .dpz-crm-rep-bar:nth-child(7) i { background: linear-gradient(180deg, var(--c-accent-2), var(--c-accent)); }
.dpz-crm-rep-bar small { font-size: 10px; color: var(--c-muted); }
.dpz-crm-pane[data-pane="reports"]:not([hidden]) .dpz-crm-rep-bar i { transform: scaleY(1); }
.dpz-crm-rep-bar:nth-child(2) i { transition-delay: .05s; }
.dpz-crm-rep-bar:nth-child(3) i { transition-delay: .1s; }
.dpz-crm-rep-bar:nth-child(4) i { transition-delay: .15s; }
.dpz-crm-rep-bar:nth-child(5) i { transition-delay: .2s; }
.dpz-crm-rep-bar:nth-child(6) i { transition-delay: .25s; }
.dpz-crm-rep-bar:nth-child(7) i { transition-delay: .3s; }
.dpz-crm-rep-foot { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-top: 12px; }
.dpz-crm-rep-foot div { background: #fff; border: 1px solid var(--c-border); border-radius: 10px; padding: 10px 12px; }
.dpz-crm-rep-foot span { display: block; font-size: 10.5px; color: var(--c-muted); margin-bottom: 4px; }
.dpz-crm-rep-foot strong { font-family: 'Urbanist', 'Outfit', sans-serif; font-size: .95rem; font-weight: 700; color: var(--c-text); }
.dpz-crm-toast {
position: absolute;
bottom: 18px; right: 18px;
display: inline-flex; align-items: center; gap: 9px;
background: #fff;
border: 1px solid color-mix(in srgb, #1f9d6b 26%, var(--c-border));
border-radius: 13px;
padding: 11px 15px;
font-size: 12.5px; font-weight: 700; color: var(--c-text);
box-shadow: 0 18px 40px -12px rgba(10,14,26,.22);
opacity: 0; transform: translateY(14px) scale(.96); pointer-events: none;
}
.dpz-crm-toast i {
width: 26px; height: 26px; flex: none;
display: grid; place-items: center;
border-radius: 8px;
background: color-mix(in srgb, #1f9d6b 16%, #fff);
color: #1f9d6b; font-size: .95rem;
}
.dpz-crm-toast.show { animation: dpz-toast 3s cubic-bezier(.2,.8,.3,1) both; }
@keyframes dpz-toast {
0% { opacity: 0; transform: translateY(14px) scale(.96); }
10% { opacity: 1; transform: translateY(0) scale(1); }
85% { opacity: 1; transform: translateY(0) scale(1); }
100% { opacity: 0; transform: translateY(10px) scale(.98); }
}
@media (max-width: 600px) {
.dpz-crm { grid-template-columns: 1fr; }
.dpz-crm-side { flex-direction: row; align-items: center; overflow-x: auto; gap: 4px; padding: 10px 12px; border-right: none; border-bottom: 1px solid var(--c-border); }
.dpz-crm-brand { padding: 0 8px 0 0; white-space: nowrap; }
.dpz-crm-nav { flex-direction: row; }
.dpz-crm-navitem em, .dpz-crm-plan { display: none; }
.dpz-crm-navitem { white-space: nowrap; }
.dpz-crm-kpis { grid-template-columns: repeat(2, 1fr); }
.dpz-crm-row { grid-template-columns: 1fr auto auto; }
.dpz-crm-id, .dpz-crm-prod { display: none; }
}
@media (prefers-reduced-motion: reduce) {
.dpz-crm-row.is-new { animation: none; }
.dpz-crm-toast { display: none; }
}
/* === hizmet panelleri (dashboard modülü kartları) === */
.dpz-svc-grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: clamp(14px, 1.6vw, 20px);
margin-top: clamp(28px, 3vw, 40px);
}
.dpz-svc {
--tone: var(--c-accent);
--tone-soft: var(--c-accent-soft);
--tone-ink: var(--c-accent-2);
position: relative;
display: flex;
flex-direction: column;
background: #fff;
border: 1px solid var(--c-border);
border-radius: 16px;
padding: 24px 22px 18px;
overflow: hidden;
opacity: 0;
transform: translateY(16px);
transition: opacity .6s ease, transform .6s cubic-bezier(.2,.7,.3,1), border-color .25s ease, box-shadow .25s ease;
}
[data-anim].visible.dpz-svc { opacity: 1; transform: none; }
.dpz-svc::before {
content: "";
position: absolute;
left: 0; top: 22px; bottom: 22px;
width: 3px;
border-radius: 0 3px 3px 0;
background: var(--tone);
opacity: .55;
transition: opacity .25s ease, top .25s ease, bottom .25s ease;
}
.dpz-svc:hover {
border-color: color-mix(in srgb, var(--c-text) 16%, var(--c-border));
box-shadow: 0 20px 44px -24px rgba(10, 14, 26, .20);
transform: translateY(-4px);
}
.dpz-svc:hover::before { top: 14px; bottom: 14px; opacity: 1; }
.dpz-svc-idx {
position: absolute;
top: 16px; right: 18px;
font-family: 'Urbanist', 'Outfit', sans-serif;
font-size: 2.4rem;
font-weight: 800;
line-height: 1;
color: transparent;
-webkit-text-stroke: 1.4px color-mix(in srgb, var(--tone) 26%, transparent);
pointer-events: none;
}
.dpz-svc-ic {
display: inline-grid;
place-items: center;
width: 48px; height: 48px;
border-radius: 13px;
background: var(--tone-soft);
color: var(--tone-ink);
font-size: 1.3rem;
margin-bottom: 16px;
transition: transform .3s cubic-bezier(.2,.8,.3,1);
}
.dpz-svc:hover .dpz-svc-ic { transform: translateY(-2px) rotate(-6deg); }
.dpz-svc h3 {
font-family: 'Urbanist', 'Outfit', 'Bricolage Grotesque', sans-serif;
font-size: 1.16rem;
font-weight: 700;
letter-spacing: -.02em;
color: var(--c-text);
margin: 0 0 8px;
}
.dpz-svc p { font-size: .95rem; line-height: 1.62; color: var(--c-muted); margin: 0 0 18px; }
.dpz-svc-foot {
margin-top: auto;
padding-top: 14px;
border-top: 1px dashed var(--c-border);
display: flex;
align-items: flex-end;
justify-content: space-between;
gap: 12px;
}
.dpz-svc-tag {
font-family: 'JetBrains Mono', ui-monospace, monospace;
font-size: 10.5px;
font-weight: 600;
letter-spacing: .08em;
text-transform: uppercase;
color: var(--tone-ink);
background: var(--tone-soft);
border-radius: 6px;
padding: 5px 9px;
}
.dpz-svc-bars { display: inline-flex; align-items: flex-end; gap: 3px; height: 24px; }
.dpz-svc-bars i {
width: 5px;
height: var(--h);
border-radius: 2px;
background: var(--tone);
opacity: .35;
transform: scaleY(0);
transform-origin: bottom;
transition: transform .6s cubic-bezier(.2,.8,.3,1), opacity .3s ease;
}
[data-anim].visible.dpz-svc .dpz-svc-bars i { transform: scaleY(1); }
.dpz-svc-bars i:nth-child(2) { transition-delay: .08s; }
.dpz-svc-bars i:nth-child(3) { transition-delay: .16s; }
.dpz-svc-bars i:nth-child(4) { transition-delay: .24s; }
.dpz-svc:hover .dpz-svc-bars i { opacity: .9; }
.dpz-svc--pink { --tone: var(--c-pink); --tone-soft: var(--c-pink-soft); --tone-ink: var(--c-pink); }
.dpz-svc--mint { --tone: #1f9d6b; --tone-soft: color-mix(in srgb, var(--c-mint) 42%, #fff); --tone-ink: #1f9d6b; }
.dpz-svc--lilac { --tone: #7c5cd6; --tone-soft: color-mix(in srgb, var(--c-lilac) 46%, #fff); --tone-ink: #7c5cd6; }
.dpz-svc--yellow { --tone: #b07d00; --tone-soft: color-mix(in srgb, var(--c-yellow) 46%, #fff); --tone-ink: #b07d00; }
/* === logo & kurumsal kimlik · marka panosu === */
.dpz-brand {
--brand: var(--c-accent);
background: #fff;
border: 1px solid var(--c-border);
border-radius: 20px;
box-shadow: 0 34px 80px -34px color-mix(in srgb, var(--c-accent) 42%, transparent), 0 10px 28px rgba(10,14,26,.06);
padding: clamp(20px, 2.4vw, 30px);
}
.dpz-brand-bar { display: flex; align-items: center; justify-content: space-between; margin-bottom: 18px; }
.dpz-brand-kicker { font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 10px; font-weight: 700; letter-spacing: .2em; color: #94a3b8; }
.dpz-brand-ver { font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 10px; color: var(--c-muted); border: 1px solid var(--c-border); border-radius: 6px; padding: 2px 7px; }
/* logo lockup */
.dpz-brand-logo {
position: relative;
display: flex; align-items: center; gap: 14px;
padding: 20px;
border: 1px solid var(--c-border); border-radius: 14px;
background: linear-gradient(180deg, #fbfdff, #f4f8fc);
margin-bottom: 14px;
overflow: hidden;
}
/* tasarım kılavuz çizgileri (construction) */
.dpz-brand-cons {
position: absolute;
left: 8px; top: 50%;
width: 76px; height: 76px;
transform: translateY(-50%);
color: color-mix(in srgb, var(--brand) 42%, transparent);
z-index: 0;
pointer-events: none;
}
.dpz-brand-cons * { stroke-dasharray: 320; stroke-dashoffset: 320; }
.dpz-visual.visible .dpz-brand-cons * { animation: dpz-draw 1.5s ease .25s forwards; }
.dpz-brand-cons :nth-child(2){ animation-delay:.4s } .dpz-brand-cons :nth-child(3){ animation-delay:.55s }
.dpz-brand-cons :nth-child(4){ animation-delay:.7s } .dpz-brand-cons :nth-child(5){ animation-delay:.8s }
.dpz-bm {
position: relative; z-index: 1; flex: none;
width: 46px; height: 46px; border-radius: 14px;
background: linear-gradient(140deg, var(--brand), color-mix(in srgb, var(--brand) 60%, #14203c));
overflow: hidden;
transition: background .35s ease;
}
.dpz-bm::after {
content: ""; position: absolute; right: 7px; bottom: 7px;
width: 18px; height: 18px; border-radius: 50%;
background: #fff;
}
.dpz-bm-sm { width: 30px; height: 30px; border-radius: 9px; }
.dpz-bm-sm::after { right: 5px; bottom: 5px; width: 12px; height: 12px; }
.dpz-bm-xs { width: 20px; height: 20px; border-radius: 6px; }
.dpz-bm-xs::after { right: 3px; bottom: 3px; width: 8px; height: 8px; }
.dpz-bm-light { background: #fff; }
.dpz-bm-light::after { background: var(--brand); }
.dpz-bm-mono { background: #cbd5e1; }
.dpz-bm-mono::after { background: #fff; }
.dpz-brand-word { position: relative; z-index: 1; font-family: 'Urbanist', 'Outfit', sans-serif; font-weight: 800; font-size: 1.5rem; letter-spacing: -.03em; color: var(--c-text); line-height: 1; }
.dpz-brand-word small { display: block; font-size: 9px; font-weight: 600; letter-spacing: .42em; color: var(--c-muted); margin-top: 4px; }
.dpz-brand-caret { display: inline-block; width: 3px; height: .95em; margin-left: 3px; border-radius: 1px; background: var(--brand); vertical-align: -1px; animation: dpz-blink 1s steps(1) infinite; }
/* palet + tipografi */
.dpz-brand-grid { display: grid; grid-template-columns: 1.25fr 1fr; gap: 12px; margin-bottom: 14px; }
.dpz-brand-cell { border: 1px solid var(--c-border); border-radius: 12px; padding: 13px; }
.dpz-brand-cl { display: block; font-size: 10px; color: var(--c-muted); letter-spacing: .04em; margin-bottom: 10px; }
.dpz-brand-swatches { display: flex; gap: 6px; }
.dpz-brand-sw {
flex: 1; height: 44px; border-radius: 8px; position: relative;
background: var(--sw);
border: none; padding: 0; cursor: pointer;
box-shadow: inset 0 0 0 1px rgba(10,14,26,.06);
transform: scaleY(.5); transform-origin: bottom; opacity: 0;
transition: transform .5s cubic-bezier(.2,.8,.3,1), opacity .4s ease, box-shadow .2s ease;
}
.dpz-visual.visible .dpz-brand-sw { transform: scaleY(1); opacity: 1; }
.dpz-brand-sw:nth-child(2){ transition-delay:.06s } .dpz-brand-sw:nth-child(3){ transition-delay:.12s }
.dpz-brand-sw:nth-child(4){ transition-delay:.18s } .dpz-brand-sw:nth-child(5){ transition-delay:.24s }
.dpz-brand-sw:hover { box-shadow: inset 0 0 0 1px rgba(10,14,26,.06), 0 4px 12px color-mix(in srgb, var(--sw) 45%, transparent); }
.dpz-brand-sw.is-on { box-shadow: inset 0 0 0 1px rgba(10,14,26,.06), 0 0 0 2px #fff, 0 0 0 4px var(--sw); }
.dpz-brand-sw b { position: absolute; left: 0; right: 0; bottom: -15px; font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 7.5px; color: #9aa3b2; text-align: center; }
.dpz-brand-cell:has(.dpz-brand-swatches) { padding-bottom: 26px; }
.dpz-brand-type { display: flex; align-items: center; gap: 12px; }
.dpz-brand-type strong { font-family: 'Urbanist', 'Outfit', sans-serif; font-size: 2.2rem; font-weight: 800; color: var(--c-text); line-height: 1; }
.dpz-brand-type b { display: block; font-size: 12.5px; color: var(--c-text); }
.dpz-brand-type small { font-size: 10.5px; color: var(--c-muted); }
/* logo kanvası — çizilen SVG işaret */
.dpz-brand-canvas {
flex-direction: column;
text-align: center;
gap: 4px;
padding: clamp(24px, 3vw, 38px) 20px;
}
.dpz-brand-canvas .dpz-brand-cons {
left: 50%; top: clamp(20px, 2.6vw, 30px);
transform: translateX(-50%);
width: clamp(118px, 15vw, 158px); height: clamp(118px, 15vw, 158px);
}
.dpz-mark-svg {
position: relative; z-index: 1;
width: clamp(94px, 12vw, 126px); height: clamp(94px, 12vw, 126px);
color: var(--brand);
overflow: visible;
margin-bottom: 8px;
}
.dpz-mark-svg .dl-stroke {
fill: none; stroke: currentColor; stroke-width: 7;
stroke-linecap: round; stroke-linejoin: round;
stroke-dasharray: 480; stroke-dashoffset: 480;
animation: dpz-draw 1.1s ease forwards;
}
.dpz-mark-svg .dl-stroke:nth-of-type(2) { animation-delay: .5s; }
.dpz-mark-svg .dl-fill {
fill: currentColor; opacity: 0;
transform: scale(.3); transform-origin: center; transform-box: fill-box;
animation: dpz-pop .5s cubic-bezier(.2,1.5,.4,1) 1.05s forwards;
}
@keyframes dpz-pop { to { opacity: 1; transform: none; } }
.dpz-brand-word { z-index: 1; }
/* mini işaretler (varyasyon kutuları) */
.dpz-mini-mark { width: 30px; height: 30px; color: var(--brand); overflow: visible; }
.dpz-mini-mark .dl-stroke { fill: none; stroke: currentColor; stroke-width: 9; stroke-linecap: round; stroke-linejoin: round; }
.dpz-mini-mark .dl-fill { fill: currentColor; }
.dpz-brand-var.is-dark .dpz-mini-mark { color: #fff; }
.dpz-mini-mark.mono { color: #9aa6b5; }
.dpz-brand-var.is-card .dpz-mini-mark { width: 22px; height: 22px; }
/* logo atölyesi — interaktif kontroller */
.dpz-lab-name {
position: relative; z-index: 1;
width: min(100%, 280px);
border: none; background: transparent; text-align: center;
font-family: 'Urbanist', 'Outfit', sans-serif; font-weight: 800;
font-size: clamp(1.4rem, 2.4vw, 1.9rem); letter-spacing: -.03em;
color: var(--c-text);
padding: 5px 8px; border-radius: 9px; outline: none;
caret-color: var(--brand);
transition: box-shadow .2s ease;
}
.dpz-lab-name:hover { box-shadow: inset 0 0 0 1px var(--c-border); }
.dpz-lab-name:focus { box-shadow: 0 0 0 2px color-mix(in srgb, var(--brand) 40%, transparent); }
.dpz-lab-name::selection { background: color-mix(in srgb, var(--brand) 25%, transparent); }
.dpz-lab-name.f-geo { font-family: 'Bricolage Grotesque', 'DM Sans', sans-serif; text-transform: uppercase; letter-spacing: .02em; }
.dpz-lab-name.f-hand { font-family: 'Caveat', cursive; font-weight: 700; font-size: clamp(1.9rem, 3.2vw, 2.6rem); letter-spacing: 0; }
.dpz-lab-name.f-serif { font-family: Georgia, 'Times New Roman', serif; font-weight: 700; letter-spacing: -.01em; }
.dpz-lab-controls { display: grid; gap: 12px; margin-bottom: 14px; }
.dpz-lab-row { display: grid; grid-template-columns: 48px 1fr; align-items: center; gap: 12px; }
.dpz-lab-lbl { font-size: 11px; font-weight: 600; color: var(--c-muted); letter-spacing: .02em; }
.dpz-lab-opts { display: flex; gap: 8px; }
.dpz-lab-opt {
flex: 1; max-width: 50px; aspect-ratio: 1;
border: 1px solid var(--c-border); border-radius: 11px; background: #fff;
cursor: pointer; padding: 9px; color: #b4bccb;
transition: border-color .2s ease, color .2s ease, transform .15s ease, box-shadow .2s ease;
}
.dpz-lab-opt svg { width: 100%; height: 100%; display: block; }
.dpz-lab-opt:hover { transform: translateY(-2px); color: var(--c-muted); }
.dpz-lab-opt.is-on { border-color: var(--brand); color: var(--brand); box-shadow: 0 0 0 1px var(--brand); }
.dpz-lab-font {
flex: 1; max-width: 50px; height: 40px;
border: 1px solid var(--c-border); border-radius: 11px; background: #fff;
cursor: pointer; font-size: 1.05rem; font-weight: 700; color: var(--c-text); line-height: 1;
transition: border-color .2s ease, transform .15s ease, box-shadow .2s ease;
}
.dpz-lab-font:hover { transform: translateY(-2px); }
.dpz-lab-font.is-on { border-color: var(--brand); color: var(--brand); box-shadow: 0 0 0 1px var(--brand); }
.dpz-lab-font.f-geo { font-family: 'Bricolage Grotesque', sans-serif; }
.dpz-lab-font.f-hand { font-family: 'Caveat', cursive; font-size: 1.45rem; }
.dpz-lab-font.f-serif { font-family: Georgia, serif; }
/* logo varyasyonları */
.dpz-brand-vars { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.dpz-brand-var {
display: grid; place-items: center;
aspect-ratio: 1.2;
border: 1px solid var(--c-border); border-radius: 11px;
background: #fff;
}
.dpz-brand-var.is-dark { background: #0e1830; border-color: #0e1830; }
.dpz-brand-var.is-card { gap: 5px; align-content: center; background: linear-gradient(135deg, #fbfdff, #eef5fb); }
.dpz-brand-card-lines { display: grid; gap: 3px; width: 60%; }
.dpz-brand-card-lines i { height: 3px; border-radius: 2px; background: color-mix(in srgb, var(--brand) 38%, var(--c-border)); }
.dpz-brand-card-lines i:last-child { width: 60%; }
/* === logo & kurumsal kimlik · akan logo duvarı === */
.dpz-visual--wall { position: relative; }
.dpz-wall {
display: grid;
gap: clamp(10px, 1.3vw, 16px);
overflow: hidden;
-webkit-mask-image: linear-gradient(90deg, transparent, #000 11%, #000 89%, transparent);
mask-image: linear-gradient(90deg, transparent, #000 11%, #000 89%, transparent);
}
.dpz-wall-row { overflow: hidden; }
.dpz-wall-track {
display: flex;
gap: clamp(10px, 1.3vw, 16px);
width: max-content;
animation: dpz-wall 36s linear infinite;
will-change: transform;
}
.dpz-wall-row.rev .dpz-wall-track { animation-direction: reverse; }
.dpz-wall-row:nth-child(1) .dpz-wall-track { animation-duration: 39s; }
.dpz-wall-row:nth-child(2) .dpz-wall-track { animation-duration: 31s; }
.dpz-wall-row:nth-child(3) .dpz-wall-track { animation-duration: 45s; }
.dpz-wall-row:nth-child(4) .dpz-wall-track { animation-duration: 35s; }
@keyframes dpz-wall { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.dpz-wall-chip {
flex: none;
width: clamp(56px, 7vw, 78px);
aspect-ratio: 1;
display: grid; place-items: center;
background: #fff;
border: 1px solid var(--c-border);
border-radius: 18px;
color: var(--c);
box-shadow: 0 12px 26px -16px color-mix(in srgb, var(--c) 55%, transparent);
}
.dpz-wall-chip svg { width: 52%; height: 52%; display: block; }
.dpz-wall-chip.is-solid { background: var(--c); color: #fff; border-color: var(--c); }
.dpz-wall-badge {
position: absolute; left: 50%; bottom: -16px; transform: translateX(-50%);
display: inline-flex; align-items: center; gap: 7px;
background: #fff; border: 1px solid var(--c-border); border-radius: 999px;
padding: 9px 16px; font-size: 12.5px; font-weight: 700; color: var(--c-text);
box-shadow: 0 14px 32px -12px rgba(10,14,26,.22);
white-space: nowrap;
}
.dpz-wall-badge i { color: var(--c-accent); }
@media (prefers-reduced-motion: reduce) { .dpz-wall-track { animation: none; } }
/* === organik trafik · canlı ziyaretçi akışı === */
.dpz-geo {
background: linear-gradient(180deg, #fff, #f7fbfe);
border: 1px solid var(--c-border);
border-radius: 20px;
box-shadow: 0 34px 80px -34px color-mix(in srgb, var(--c-accent) 42%, transparent), 0 10px 28px rgba(10,14,26,.06);
padding: clamp(16px, 2vw, 22px);
}
.dpz-geo-bar { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
.dpz-geo-live { display: inline-flex; align-items: center; gap: 6px; font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 10.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--c-pink); }
.dpz-geo-clock { font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 12px; color: var(--c-muted); }
.dpz-geo-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; padding-bottom: 14px; border-bottom: 1px solid var(--c-border); }
.dpz-geo-lbl { display: block; font-size: 12px; color: var(--c-muted); margin-bottom: 5px; }
.dpz-geo-big { font-family: 'Urbanist', 'Outfit', sans-serif; font-size: clamp(2rem, 3.4vw, 2.8rem); font-weight: 800; letter-spacing: -.03em; color: var(--c-text); line-height: 1; }
.dpz-geo-trend { display: inline-flex; align-items: center; gap: 5px; margin-top: 7px; font-size: 12px; font-weight: 700; color: #1f9d6b; }
.dpz-geo-src { text-align: right; }
.dpz-geo-src b { display: block; font-family: 'Urbanist', 'Outfit', sans-serif; font-size: 1.4rem; font-weight: 800; color: var(--c-accent-2); letter-spacing: -.02em; }
.dpz-geo-src small { font-size: 10.5px; color: var(--c-muted); }
.dpz-geo-map {
position: relative;
aspect-ratio: 1000 / 422;
margin: 14px 0;
border-radius: 14px;
background-color: #f4f9fd;
overflow: hidden;
}
.dpz-geo-tr {
position: absolute; inset: 0;
width: 100%; height: 100%;
object-fit: contain;
opacity: .9;
pointer-events: none;
}
.dpz-geo-ping { position: absolute; left: var(--x); top: var(--y); width: 10px; height: 10px; }
.dpz-geo-ping::before, .dpz-geo-ping::after { content: ""; position: absolute; left: 50%; top: 50%; border-radius: 50%; }
/* parlayıp sönen şehir noktası */
.dpz-geo-ping::before {
width: 9px; height: 9px;
background: var(--c-accent);
box-shadow: 0 0 0 2.5px #fff, 0 0 10px 2px color-mix(in srgb, var(--c-accent) 75%, transparent);
z-index: 1;
opacity: .12;
transform: translate(-50%, -50%) scale(.7);
animation: dpz-geo-glow 3s ease-in-out infinite;
animation-delay: var(--d);
}
@keyframes dpz-geo-glow {
0%, 100% { opacity: .12; transform: translate(-50%, -50%) scale(.7); }
45% { opacity: 1; transform: translate(-50%, -50%) scale(1.15); }
}
/* yanan şehirden yayılan halka */
.dpz-geo-ping::after {
width: 9px; height: 9px;
background: color-mix(in srgb, var(--c-accent) 50%, transparent);
transform: translate(-50%, -50%);
opacity: 0;
animation: dpz-geo-ripple 3s ease-out infinite;
animation-delay: var(--d);
}
@keyframes dpz-geo-ripple {
0% { width: 9px; height: 9px; opacity: .6; }
40% { opacity: .35; }
70% { width: 42px; height: 42px; opacity: 0; }
100% { opacity: 0; }
}
.dpz-geo-feed { display: flex; align-items: center; gap: 7px; font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 11.5px; color: #1f7a55; min-height: 1.5em; }
.dpz-geo-feed .dpz-cc-livedot { background: #1f9d6b; box-shadow: none; animation: none; }
@media (prefers-reduced-motion: reduce) {
.dpz-geo-ping::after { animation: none; opacity: 0; }
.dpz-geo-ping::before { animation: none; opacity: .85; transform: translate(-50%, -50%); }
}
/* === kurumsal web · responsive site önizleme === */
.dpz-visual--web { display: flex; align-items: center; justify-content: center; }
.dpz-web {
width: 100%; margin: 0 auto;
background: #fff;
border: 1px solid var(--c-border);
border-radius: 16px;
overflow: hidden;
box-shadow: 0 34px 80px -34px color-mix(in srgb, var(--c-accent) 42%, transparent), 0 10px 28px rgba(10,14,26,.06);
transition: width .65s cubic-bezier(.5,0,.2,1);
}
.dpz-web.is-tablet { width: 64%; }
.dpz-web.is-mobile { width: 40%; }
.dpz-web-bar { display: flex; align-items: center; gap: 10px; padding: 10px 13px; background: linear-gradient(180deg,#fbfdff,#f2f7fb); border-bottom: 1px solid var(--c-border); }
.dpz-web-dots { display: flex; gap: 5px; flex: none; }
.dpz-web-dots i { width: 9px; height: 9px; border-radius: 50%; background: var(--c-border); }
.dpz-web-dots i:nth-child(1){ background:#ff6058 } .dpz-web-dots i:nth-child(2){ background:#ffbd2e } .dpz-web-dots i:nth-child(3){ background:#29c940 }
.dpz-web-url { flex: 1; display: inline-flex; align-items: center; gap: 6px; background: #fff; border: 1px solid var(--c-border); border-radius: 7px; padding: 5px 10px; font-size: 11px; color: var(--c-muted); font-family: 'JetBrains Mono', ui-monospace, monospace; white-space: nowrap; overflow: hidden; }
.dpz-web-url i { color: #29c940; font-size: 10px; }
.dpz-web-dev { display: flex; gap: 8px; flex: none; }
.dpz-web-dev i { font-size: .95rem; color: var(--c-muted); opacity: .35; transition: color .3s, opacity .3s; }
.dpz-web.is-desktop .dpz-web-dev .bi-laptop,
.dpz-web.is-tablet .dpz-web-dev .bi-tablet,
.dpz-web.is-mobile .dpz-web-dev .bi-phone { color: var(--c-accent); opacity: 1; }
.dpz-web-frame { padding: 14px; background: #f4f9fd; }
.dpz-web-page { background: #fff; border: 1px solid var(--c-border); border-radius: 10px; padding: 14px; display: flex; flex-direction: column; gap: 13px; min-height: 240px; }
.dpz-web-nav { display: flex; align-items: center; gap: 12px; }
.dpz-web-logo { display: inline-flex; align-items: center; gap: 5px; }
.dpz-web-logo i { width: 16px; height: 16px; border-radius: 5px; background: linear-gradient(135deg, var(--c-accent), #7c5cd6); }
.dpz-web-logo u { width: 34px; height: 8px; border-radius: 3px; background: color-mix(in srgb, var(--c-text) 30%, transparent); }
.dpz-web-menu { display: flex; gap: 10px; margin-left: auto; }
.dpz-web-menu i { width: 22px; height: 6px; border-radius: 3px; background: var(--c-border); }
.dpz-web-navcta { width: 38px; height: 16px; border-radius: 6px; background: var(--c-accent-soft); border: 1px solid color-mix(in srgb, var(--c-accent) 30%, transparent); }
.dpz-web-burger { display: none; margin-left: auto; flex-direction: column; gap: 3px; }
.dpz-web-burger i { width: 18px; height: 2.5px; border-radius: 2px; background: var(--c-muted); }
/* hero (iki kolon) */
.dpz-web-hero { display: grid; grid-template-columns: 1fr .85fr; gap: 14px; align-items: center; padding: 4px 0; }
.dpz-web-hero-txt { display: flex; flex-direction: column; gap: 7px; }
.dpz-web-h1 { width: 88%; height: 13px; border-radius: 5px; background: color-mix(in srgb, var(--c-text) 22%, transparent); }
.dpz-web-h1.sh { width: 60%; }
.dpz-web-h2 { width: 78%; height: 7px; border-radius: 4px; background: color-mix(in srgb, var(--c-text) 10%, transparent); margin-top: 2px; }
.dpz-web-cta { width: 62px; height: 19px; border-radius: 6px; background: var(--c-accent); margin-top: 6px; box-shadow: 0 4px 10px color-mix(in srgb, var(--c-accent) 35%, transparent); }
.dpz-web-hero-art { height: 78px; border-radius: 10px; background: linear-gradient(135deg, var(--c-accent-soft), color-mix(in srgb, var(--c-lilac) 32%, #fff)); display: grid; place-items: center; color: var(--c-accent-2); font-size: 1.7rem; }
/* özellik kartları */
.dpz-web-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 9px; }
.dpz-web-card { background: #fff; border: 1px solid var(--c-border); border-radius: 9px; padding: 10px; display: flex; flex-direction: column; gap: 6px; }
.dpz-web-card i { width: 20px; height: 20px; border-radius: 6px; background: var(--c-accent-soft); }
.dpz-web-card:nth-child(2) i { background: color-mix(in srgb, var(--c-mint) 42%, #fff); }
.dpz-web-card:nth-child(3) i { background: color-mix(in srgb, var(--c-lilac) 42%, #fff); }
.dpz-web-card u { height: 6px; border-radius: 3px; background: color-mix(in srgb, var(--c-text) 13%, transparent); }
.dpz-web-card u.sh { width: 70%; background: var(--c-border); }
/* istatistik şeridi */
.dpz-web-strip { display: flex; gap: 8px; background: var(--c-accent-soft); border-radius: 9px; padding: 10px; }
.dpz-web-strip b { flex: 1; height: 20px; border-radius: 6px; background: #fff; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--c-accent) 18%, transparent); }
/* footer */
.dpz-web-foot { background: #0e1830; border-radius: 8px; padding: 11px 12px; display: flex; align-items: center; gap: 12px; }
.dpz-web-foot .ft-logo { width: 28px; height: 9px; border-radius: 3px; background: rgba(255,255,255,.85); }
.dpz-web-foot .ft-col { width: 30px; height: 5px; border-radius: 3px; background: rgba(255,255,255,.25); }
.dpz-web-foot .ft-col:last-child { margin-left: auto; }
/* responsive durumlar */
.dpz-web.is-tablet .dpz-web-cards { grid-template-columns: repeat(2, 1fr); }
.dpz-web.is-tablet .dpz-web-cards span:nth-child(3),
.dpz-web.is-tablet .dpz-web-card:nth-child(3) { display: none; }
.dpz-web.is-mobile .dpz-web-cards { grid-template-columns: 1fr; }
.dpz-web.is-mobile .dpz-web-card:nth-child(3) { display: flex; }
.dpz-web.is-mobile .dpz-web-menu, .dpz-web.is-mobile .dpz-web-navcta { display: none; }
.dpz-web.is-mobile .dpz-web-burger { display: flex; }
.dpz-web.is-mobile .dpz-web-hero { grid-template-columns: 1fr; }
.dpz-web.is-mobile .dpz-web-hero-art { display: none; }
.dpz-web.is-mobile .dpz-web-h1 { width: 96%; }
@media (prefers-reduced-motion: reduce) { .dpz-web { transition: none; } }
/* Hero görsel çerçevesi — L-bracket köşe crop işaretleri (dx-corner reuse) */
.dpz-visual--web.dx-frame { position: relative; }
.dpz-visual--web > .dx-corner-tl { top: -12px; left: -12px; }
.dpz-visual--web > .dx-corner-tr { top: -12px; right: -12px; }
.dpz-visual--web > .dx-corner-bl { bottom: -12px; left: -12px; }
.dpz-visual--web > .dx-corner-br { bottom: -12px; right: -12px; }
/* ====================================================================
WPX — web projesi SÜREÇ timeline (Keşif→Tasarım→Geliştirme→Yayın→Bakım)
==================================================================== */
.wpx { margin-top: 34px; }
.wpx-track {
display: grid;
grid-auto-flow: column;
grid-auto-columns: 1fr; /* adım sayısına göre eşit dağıt (4 ya da 5 fark etmez) */
gap: 14px;
position: relative;
}
.wpx-track::before,
.wpx-track::after {
content: ''; position: absolute; top: 28px; height: 3px; border-radius: 3px; pointer-events: none;
z-index: 0; /* çizgi node'ların ARKASINDA kalsın (ikon üstüne binmesin) */
}
.wpx-track::before { left: 10%; right: 10%; background: var(--c-border); }
.wpx-track::after {
left: 10%; width: 0;
background: linear-gradient(90deg, var(--c-accent), #7c5cd6);
transition: width 1.3s cubic-bezier(.5,0,.2,1) .25s;
}
.wpx.visible .wpx-track::after { width: 80%; }
.wpx-step {
position: relative; z-index: 1; /* node + metin çizginin ÜSTÜNDE kalsın */
text-align: center; padding: 0 4px;
opacity: 0; transform: translateY(14px);
transition: opacity .55s ease, transform .55s ease;
transition-delay: calc(var(--si, 0) * .12s);
}
.wpx.visible .wpx-step { opacity: 1; transform: none; }
.wpx-node {
position: relative; z-index: 1;
width: 58px; height: 58px; margin: 0 auto 16px;
border-radius: 50%; background: #fff; border: 2px solid var(--c-border);
display: grid; place-items: center;
font-size: 1.4rem; color: var(--c-accent);
transition: border-color .3s ease, transform .3s ease;
}
.wpx-step:hover .wpx-node {
border-color: var(--c-accent); transform: translateY(-4px);
}
.wpx-num {
position: absolute; top: -7px; right: -9px;
min-width: 22px; height: 22px; padding: 0 5px; border-radius: 11px;
background: var(--c-accent); color: #fff;
font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: .62rem; font-weight: 700;
display: grid; place-items: center;
}
.wpx-step-t { font-family: 'Urbanist','Outfit',sans-serif; font-weight: 700; font-size: 1rem; color: var(--c-primary); margin: 0 0 5px; letter-spacing: -.01em; }
.wpx-step-d { font-size: .86rem; line-height: 1.5; color: var(--c-muted); margin: 0; }
@media (max-width: 760px) {
.wpx-track { grid-auto-flow: row; grid-auto-columns: auto; gap: 0; }
.wpx-track::before { left: 28px; right: auto; top: 6px; bottom: 6px; width: 3px; height: auto; }
.wpx-track::after {
left: 28px; top: 6px; width: 3px; height: 0;
background: linear-gradient(180deg, var(--c-accent), #7c5cd6);
transition: height 1.3s cubic-bezier(.5,0,.2,1) .25s;
}
.wpx.visible .wpx-track::after { width: 3px; height: 88%; }
/* node sol rayda, içerik sağda beyaz kart (SaaS-kart timeline) */
.wpx-step { display: grid; grid-template-columns: 56px 1fr; column-gap: 14px; text-align: left; align-items: start; padding: 7px 0; }
.wpx-node { margin: 0; align-self: start; }
.wpx-step-body {
background: #fff;
border: 1px solid var(--c-border);
border-radius: 16px;
padding: 13px 16px 14px;
box-shadow: 0 12px 26px -18px rgba(10,14,26,.28);
}
.wpx-step-t { margin: 0 0 3px; }
}
@media (prefers-reduced-motion: reduce) {
.wpx-step { opacity: 1; transform: none; transition: none; }
.wpx-track::after { transition: none; }
}
/* mini site (bento featured) */
.dpz-mini-site {
width: 100%; max-width: 210px;
background: #fff; border: 1px solid var(--c-border); border-radius: 12px;
padding: 9px; display: flex; flex-direction: column; gap: 7px;
box-shadow: 0 20px 44px -22px color-mix(in srgb, var(--c-accent) 45%, transparent);
transform: rotate(2deg); transition: transform .35s ease;
}
.dpz-bento-feat:hover .dpz-mini-site { transform: rotate(0); }
.dpz-mini-site .ms-bar { display: flex; gap: 4px; }
.dpz-mini-site .ms-bar i { width: 6px; height: 6px; border-radius: 50%; background: var(--c-border); }
.dpz-mini-site .ms-nav { display: flex; align-items: center; justify-content: space-between; }
.dpz-mini-site .ms-nav b { width: 30px; height: 8px; border-radius: 3px; background: var(--c-pink); }
.dpz-mini-site .ms-nav u { width: 44px; height: 5px; border-radius: 3px; background: var(--c-border); }
.dpz-mini-site .ms-hero { height: 40px; border-radius: 8px; background: var(--c-pink-soft); }
.dpz-mini-site .ms-row { display: grid; grid-template-columns: repeat(3,1fr); gap: 5px; }
.dpz-mini-site .ms-row i { height: 22px; border-radius: 6px; background: #eef2f7; }
.dpz-mini-site .ms-foot { height: 10px; border-radius: 5px; background: #0e1830; opacity: .8; }
/* === QR menü · telefonda canlı menü === */
.dpz-visual--qr { display: flex; align-items: center; justify-content: center; position: relative; }
.dpz-qr { position: relative; }
.dpz-qr-phone {
width: clamp(216px, 26vw, 280px);
background: #fff; border: 1px solid var(--c-border); border-radius: 30px; padding: 11px;
box-shadow: 0 34px 80px -30px color-mix(in srgb, var(--c-accent) 42%, transparent), 0 10px 28px rgba(10,14,26,.08);
position: relative;
}
.dpz-qr-notch { position: absolute; top: 11px; left: 50%; transform: translateX(-50%); width: 78px; height: 6px; border-radius: 4px; background: rgba(255,255,255,.5); z-index: 2; }
.dpz-qr-screen { background: #f7fbfe; border-radius: 22px; overflow: hidden; }
/* durum çubuğu */
.dpz-qr-status { display: flex; align-items: center; justify-content: space-between; padding: 9px 16px 4px; font-size: 11px; font-weight: 700; color: var(--c-text); }
.dpz-qr-status .dpz-qr-stat-ic { display: inline-flex; gap: 5px; font-size: 10px; color: var(--c-text); }
/* kapak */
.dpz-qr-cover { position: relative; display: flex; align-items: center; gap: 11px; padding: 18px 16px 16px; background: linear-gradient(135deg, var(--c-accent), #7c5cd6); color: #fff; }
.dpz-qr-cover::after { content: ""; position: absolute; inset: 0; background: radial-gradient(120% 80% at 85% 0%, rgba(255,255,255,.18), transparent 60%); pointer-events: none; }
.dpz-qr-open { position: absolute; top: 12px; right: 14px; display: inline-flex; align-items: center; gap: 5px; font-size: 9.5px; font-weight: 700; background: rgba(255,255,255,.2); border-radius: 999px; padding: 3px 8px; backdrop-filter: blur(4px); }
.dpz-qr-open .dpz-cc-livedot { width: 6px; height: 6px; background: #6affb0; box-shadow: none; animation: none; }
.dpz-qr-logo { width: 40px; height: 40px; border-radius: 12px; background: rgba(255,255,255,.22); border: 1.5px solid rgba(255,255,255,.4); flex: none; display: grid; place-items: center; font-family: 'Urbanist', 'Outfit', sans-serif; font-weight: 800; font-size: 1.15rem; }
.dpz-qr-rest b { display: block; font-family: 'Urbanist', 'Outfit', sans-serif; font-weight: 800; font-size: 1.05rem; letter-spacing: -.01em; }
.dpz-qr-rest small { display: inline-flex; align-items: center; gap: 4px; font-size: 10.5px; opacity: .92; margin-top: 2px; }
.dpz-qr-rest small .bi-star-fill { color: var(--c-yellow); }
/* arama */
.dpz-qr-search { margin: 12px 14px 2px; display: flex; align-items: center; gap: 7px; background: #fff; border: 1px solid var(--c-border); border-radius: 9px; padding: 8px 11px; font-size: 11px; color: #9aa3b2; }
.dpz-qr-tabs { display: flex; gap: 6px; padding: 12px 14px 8px; overflow: hidden; }
.dpz-qr-tabs span { font-size: 10.5px; font-weight: 600; color: var(--c-muted); white-space: nowrap; padding: 6px 11px; border-radius: 999px; background: #fff; border: 1px solid var(--c-border); transition: background .25s, color .25s, border-color .25s, box-shadow .25s; }
.dpz-qr-tabs span.on { background: var(--c-accent); color: #fff; border-color: var(--c-accent); box-shadow: 0 6px 14px -6px color-mix(in srgb, var(--c-accent) 60%, transparent); }
.dpz-qr-list { list-style: none; margin: 0; padding: 6px 14px 10px; display: flex; flex-direction: column; gap: 8px; transition: opacity .25s ease, transform .25s ease; }
.dpz-qr-list.swap { opacity: 0; transform: translateY(6px); }
.dpz-qr-list li { display: flex; align-items: center; gap: 11px; background: #fff; border: 1px solid var(--c-border); border-radius: 13px; padding: 9px 11px; box-shadow: 0 4px 12px -8px rgba(10,14,26,.12); animation: dpz-qr-item .4s cubic-bezier(.2,.8,.3,1) both; }
.dpz-qr-list li:nth-child(2) { animation-delay: .07s; }
.dpz-qr-list li:nth-child(3) { animation-delay: .14s; }
@keyframes dpz-qr-item { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.dpz-qr-list li.pop { border-color: color-mix(in srgb, var(--c-accent) 45%, var(--c-border)); background: linear-gradient(180deg, color-mix(in srgb, var(--c-accent) 7%, #fff), #fff); box-shadow: 0 10px 24px -12px color-mix(in srgb, var(--c-accent) 50%, transparent); }
.dpz-qr-list .ic { width: 40px; height: 40px; border-radius: 11px; background: linear-gradient(140deg, var(--c-accent-soft), color-mix(in srgb, var(--c-lilac) 26%, #fff)); display: grid; place-items: center; font-size: 1.3rem; flex: none; }
.dpz-qr-list .txt { flex: 1; min-width: 0; }
.dpz-qr-list .txt b { display: flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 700; color: var(--c-text); }
.dpz-qr-list .txt b em { font-style: normal; font-size: 8.5px; font-weight: 700; color: var(--c-pink); background: var(--c-pink-soft); border-radius: 999px; padding: 1px 6px; }
.dpz-qr-list .txt small { display: block; font-size: 10px; color: var(--c-muted); margin-top: 1px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dpz-qr-list .pr { font-family: 'Urbanist', 'Outfit', sans-serif; font-weight: 800; font-size: 12.5px; color: var(--c-accent-2); flex: none; }
.dpz-qr-list .add { width: 22px; height: 22px; border-radius: 7px; background: var(--c-accent); color: #fff; display: grid; place-items: center; font-size: .8rem; flex: none; }
/* sepet çubuğu */
.dpz-qr-cart { display: flex; align-items: center; gap: 10px; margin: 4px 12px 0; padding: 10px 12px; border-radius: 13px; background: #0e1830; color: #fff; }
.dpz-qr-cart-ic { position: relative; font-size: 1.05rem; color: #fff; }
.dpz-qr-cart-ic em { position: absolute; top: -6px; right: -7px; font-style: normal; font-size: 8px; font-weight: 800; background: var(--c-pink); color: #fff; border-radius: 999px; min-width: 13px; height: 13px; display: grid; place-items: center; padding: 0 3px; border: 1.5px solid #0e1830; }
.dpz-qr-cart-txt { flex: 1; line-height: 1.1; }
.dpz-qr-cart-txt b { font-size: 12px; font-weight: 700; }
.dpz-qr-cart-txt small { display: block; font-size: 9.5px; opacity: .6; }
.dpz-qr-cart-tot { font-family: 'Urbanist', 'Outfit', sans-serif; font-weight: 800; font-size: 13px; }
.dpz-qr-cart-btn { display: inline-flex; align-items: center; gap: 4px; font-size: 10.5px; font-weight: 700; background: var(--c-accent); border-radius: 8px; padding: 6px 10px; }
.dpz-qr-home { width: 36%; height: 4px; border-radius: 3px; background: var(--c-border); margin: 10px auto 10px; }
.dpz-qr-badge { position: absolute; bottom: 26px; right: -16px; display: flex; flex-direction: column; align-items: center; gap: 6px; background: #fff; border: 1px solid var(--c-border); border-radius: 16px; padding: 11px; box-shadow: 0 16px 38px -14px rgba(10,14,26,.28); }
.dpz-qr-code { position: relative; width: 52px; height: 52px; display: grid; place-items: center; color: var(--c-text); font-size: 3rem; overflow: hidden; border-radius: 8px; }
.dpz-qr-code i { line-height: 1; }
.dpz-qr-scan { position: absolute; left: 3px; right: 3px; top: 2px; height: 3px; border-radius: 2px; background: var(--c-accent); box-shadow: 0 0 8px 1px color-mix(in srgb, var(--c-accent) 70%, transparent); animation: dpz-qr-scan 2.2s ease-in-out infinite; }
@keyframes dpz-qr-scan { 0%, 100% { top: 2px; } 50% { top: 46px; } }
.dpz-qr-badge b { font-size: 10.5px; font-weight: 700; color: var(--c-text); }
@media (max-width: 900px) { .dpz-qr-badge { right: 4px; } }
@media (prefers-reduced-motion: reduce) { .dpz-qr-scan { animation: none; } }
/* === Google Maps · işletme kartı === */
.dpz-visual--map { display: flex; align-items: center; justify-content: center; }
.dpz-map {
width: 100%; max-width: 420px;
background: #fff; border: 1px solid var(--c-border); border-radius: 20px; overflow: hidden;
box-shadow: 0 34px 80px -34px color-mix(in srgb, var(--c-accent) 42%, transparent), 0 10px 28px rgba(10,14,26,.06);
}
.dpz-map-canvas { position: relative; height: clamp(170px, 22vw, 210px); background: #e8eef0; overflow: hidden; }
.dpz-map-rd { position: absolute; background: #fff; box-shadow: 0 0 0 1px rgba(10,14,26,.04); }
.dpz-map-rd.rd1 { left: -10%; right: -10%; top: 38%; height: 14px; transform: rotate(-7deg); }
.dpz-map-rd.rd2 { top: -10%; bottom: -10%; left: 40%; width: 12px; transform: rotate(6deg); }
.dpz-map-rd.rd3 { left: -10%; right: -10%; bottom: 20%; height: 9px; transform: rotate(4deg); }
.dpz-map-blk { position: absolute; border-radius: 10px; }
.dpz-map-blk.park { left: 8%; top: 8%; width: 26%; height: 30%; background: color-mix(in srgb, var(--c-mint) 50%, #fff); }
.dpz-map-blk.water { right: 6%; bottom: 8%; width: 30%; height: 34%; background: color-mix(in srgb, var(--c-accent) 22%, #fff); }
.dpz-map-search { position: absolute; top: 12px; left: 12px; right: 12px; display: inline-flex; align-items: center; gap: 7px; background: #fff; border-radius: 9px; padding: 8px 12px; font-size: 11.5px; color: var(--c-muted); box-shadow: 0 4px 12px rgba(10,14,26,.12); z-index: 3; }
.dpz-map-pin { position: absolute; left: var(--x); top: var(--y); width: 12px; height: 12px; transform: translate(-50%, -50%); }
.dpz-map-pin.sm::before { content: ""; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 10px; height: 10px; border-radius: 50%; background: var(--c-muted); box-shadow: 0 0 0 2px #fff; opacity: .5; }
.dpz-map-pin.sm::after { content: ""; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 10px; height: 10px; border-radius: 50%; background: color-mix(in srgb, var(--c-muted) 50%, transparent); animation: dpz-geo-pulse 2.6s ease-out infinite; animation-delay: var(--d); }
.dpz-map-pin.main { left: 50%; top: 48%; width: auto; height: auto; z-index: 2; color: var(--c-accent); font-size: 2.4rem; filter: drop-shadow(0 6px 8px color-mix(in srgb, var(--c-accent) 45%, transparent)); }
.dpz-map-pin.main::after { content: ""; position: absolute; left: 50%; top: 62%; transform: translate(-50%, -50%); width: 14px; height: 14px; border-radius: 50%; background: color-mix(in srgb, var(--c-accent) 45%, transparent); animation: dpz-geo-pulse 2.4s ease-out infinite; z-index: -1; }
.dpz-map-rank { position: absolute; bottom: 12px; left: 12px; display: inline-flex; align-items: center; gap: 6px; background: #fff; border-radius: 999px; padding: 6px 12px; font-size: 11px; font-weight: 700; color: var(--c-text); box-shadow: 0 6px 16px rgba(10,14,26,.16); z-index: 3; }
.dpz-map-rank i { color: var(--c-yellow); }
/* işletme paneli */
.dpz-map-panel { padding: 16px; display: grid; grid-template-columns: auto 1fr; gap: 12px; }
.dpz-map-logo { width: 46px; height: 46px; border-radius: 13px; background: linear-gradient(135deg, var(--c-accent), #7c5cd6); color: #fff; display: grid; place-items: center; font-family: 'Urbanist', 'Outfit', sans-serif; font-weight: 800; font-size: 1.3rem; }
.dpz-map-info b { display: block; font-family: 'Urbanist', 'Outfit', sans-serif; font-weight: 800; font-size: 1.1rem; letter-spacing: -.01em; color: var(--c-text); }
.dpz-map-rate { display: inline-flex; align-items: center; gap: 5px; font-size: 11.5px; color: var(--c-muted); margin-top: 3px; }
.dpz-map-rate .bi-star-fill { color: var(--c-yellow); }
.dpz-map-rate em { font-style: normal; color: #1f9d6b; font-weight: 700; }
.dpz-map-addr { display: inline-flex; align-items: center; gap: 5px; font-size: 11px; color: var(--c-muted); margin-top: 3px; }
.dpz-map-actions { grid-column: 1 / -1; display: flex; gap: 8px; margin-top: 4px; }
.dpz-map-actions .act { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 9px 4px; border: 1px solid var(--c-border); border-radius: 11px; font-size: 9.5px; font-weight: 600; color: var(--c-muted); }
.dpz-map-actions .act i { font-size: 1rem; color: var(--c-accent); }
.dpz-map-actions .act.on { background: var(--c-accent-soft); border-color: color-mix(in srgb, var(--c-accent) 30%, transparent); color: var(--c-accent-2); }
@media (prefers-reduced-motion: reduce) { .dpz-map-pin.sm::after, .dpz-map-pin.main::after { animation: none; } }
/* === sosyal medya · telefonda canlı akış === */
.dpz-visual--soc { display: flex; align-items: center; justify-content: center; position: relative; }
.dpz-soc { position: relative; }
.dpz-soc-screen { width: clamp(216px, 26vw, 280px); background: #fff; border: 1px solid var(--c-border); border-radius: 30px; padding: 0; overflow: hidden; box-shadow: 0 34px 80px -30px color-mix(in srgb, var(--c-accent) 42%, transparent), 0 10px 28px rgba(10,14,26,.08); }
.dpz-soc-status { display: flex; align-items: center; justify-content: space-between; padding: 9px 16px 4px; font-size: 11px; font-weight: 700; color: var(--c-text); }
.dpz-soc-top { display: flex; align-items: center; justify-content: space-between; padding: 6px 14px 10px; border-bottom: 1px solid var(--c-border); }
.dpz-soc-top b { font-family: 'Caveat', cursive; font-size: 1.5rem; font-weight: 700; color: var(--c-text); line-height: 1; }
.dpz-soc-top-ic { display: inline-flex; gap: 12px; color: var(--c-text); font-size: 1rem; }
.dpz-soc-stories { display: flex; gap: 9px; padding: 12px 14px; overflow: hidden; }
.dpz-soc-stories i { width: 34px; height: 34px; border-radius: 50%; flex: none; padding: 2px; background: linear-gradient(135deg, var(--c-pink), var(--c-yellow)); }
.dpz-soc-stories i::after { content: ""; display: block; width: 100%; height: 100%; border-radius: 50%; background: #eef2f7; border: 2px solid #fff; box-sizing: border-box; }
.dpz-soc-stories i.me { background: #eef2f7; position: relative; }
.dpz-soc-stories i.me::before { content: "+"; position: absolute; right: -2px; bottom: -2px; width: 14px; height: 14px; border-radius: 50%; background: var(--c-accent); color: #fff; font-size: 11px; font-weight: 700; display: grid; place-items: center; border: 2px solid #fff; z-index: 1; }
.dpz-soc-stories i.s2 { background: linear-gradient(135deg, var(--c-accent), #7c5cd6); }
.dpz-soc-stories i.s3 { background: linear-gradient(135deg, #1f9d6b, var(--c-accent)); }
.dpz-soc-stories i.s4 { background: linear-gradient(135deg, var(--c-lilac), var(--c-pink)); }
.dpz-soc-stories i.s5 { background: linear-gradient(135deg, var(--c-yellow), var(--c-pink)); }
.dpz-soc-ph { display: flex; align-items: center; gap: 9px; padding: 6px 14px 9px; }
.dpz-soc-av { width: 30px; height: 30px; border-radius: 50%; background: linear-gradient(135deg, var(--c-pink), var(--c-yellow)); flex: none; box-shadow: 0 0 0 2px #fff, 0 0 0 3.5px var(--c-pink); }
.dpz-soc-nm { flex: 1; line-height: 1.15; }
.dpz-soc-nm b { display: inline-flex; align-items: center; gap: 4px; font-size: 12.5px; font-weight: 700; color: var(--c-text); }
.dpz-soc-nm b .bi-patch-check-fill { color: var(--c-accent); font-size: .8rem; }
.dpz-soc-nm small { display: block; font-size: 10px; color: var(--c-muted); }
.dpz-soc-ph .bi-three-dots { color: var(--c-muted); }
.dpz-soc-img { position: relative; height: 132px; display: grid; place-items: center; font-size: 3.4rem; background: radial-gradient(120% 90% at 30% 20%, color-mix(in srgb, var(--c-yellow) 30%, #fff), color-mix(in srgb, var(--c-accent-soft) 90%, #fff) 55%, color-mix(in srgb, var(--c-lilac) 32%, #fff)); }
.dpz-soc-dots { position: absolute; bottom: 8px; left: 0; right: 0; display: flex; justify-content: center; gap: 4px; }
.dpz-soc-dots u { width: 5px; height: 5px; border-radius: 50%; background: rgba(255,255,255,.6); }
.dpz-soc-dots u.on { background: #fff; }
.dpz-soc-heart { position: absolute; inset: 0; display: grid; place-items: center; color: #fff; font-size: 3rem; opacity: 0; transform: scale(.4); }
.dpz-soc-heart i { filter: drop-shadow(0 4px 10px rgba(0,0,0,.3)); }
.dpz-soc.is-liked .dpz-soc-heart { animation: dpz-soc-heart 1.1s ease; }
@keyframes dpz-soc-heart { 0% { opacity: 0; transform: scale(.4); } 25% { opacity: .95; transform: scale(1.1); } 60% { opacity: .95; transform: scale(1); } 100% { opacity: 0; transform: scale(1); } }
.dpz-soc-acts { display: flex; align-items: center; gap: 14px; padding: 11px 14px 6px; font-size: 1.15rem; color: var(--c-text); }
.dpz-soc-acts .liked { color: var(--c-pink); }
.dpz-soc-acts .dpz-soc-save { margin-left: auto; }
.dpz-soc-likes { padding: 0 14px; font-size: 12.5px; color: var(--c-text); }
.dpz-soc-likes b { font-weight: 700; }
.dpz-soc-cap { padding: 5px 14px 0; font-size: 12px; line-height: 1.45; color: var(--c-text); }
.dpz-soc-cap b { font-weight: 700; }
.dpz-soc-tags { color: var(--c-accent-2); }
.dpz-soc-cmt { padding: 5px 14px 0; font-size: 11.5px; color: var(--c-muted); }
.dpz-soc-time { padding: 4px 14px 12px; font-size: 9px; letter-spacing: .04em; color: #aab2bf; text-transform: uppercase; }
.dpz-soc-nav { display: flex; align-items: center; justify-content: space-between; padding: 11px 20px; border-top: 1px solid var(--c-border); font-size: 1.15rem; color: var(--c-text); }
.dpz-soc-nav .on { color: var(--c-accent); }
.dpz-soc-nav-av { width: 20px; height: 20px; border-radius: 50%; background: linear-gradient(135deg, var(--c-accent), #7c5cd6); border: 1.5px solid var(--c-text); }
.dpz-soc-grow { position: absolute; bottom: 22px; right: -16px; display: inline-flex; align-items: center; gap: 7px; background: #fff; border: 1px solid var(--c-border); border-radius: 13px; padding: 9px 13px; font-family: 'Urbanist', 'Outfit', sans-serif; font-weight: 800; font-size: 14px; color: #1f9d6b; box-shadow: 0 16px 38px -14px rgba(10,14,26,.26); }
.dpz-soc-grow small { font-family: 'Urbanist', 'Outfit', sans-serif; font-weight: 500; font-size: 10px; color: var(--c-muted); }
.dpz-soc-grow i { color: #1f9d6b; }
@media (max-width: 900px) { .dpz-soc-grow { right: 2px; } }
/* sosyal medya mini görselleri (§01) */
.dvf-grid { display: flex; gap: 5px; }
.dvf-grid i { width: 30px; height: 30px; border-radius: 8px; background: var(--tone-soft); display: grid; place-items: center; font-size: 1rem; }
.dvf-cal { display: flex; flex-direction: column; gap: 5px; }
.dvf-cal span { display: flex; gap: 5px; }
.dvf-cal i { width: 16px; height: 16px; border-radius: 5px; background: color-mix(in srgb, var(--c-text) 8%, transparent); }
.dvf-cal i.on { background: var(--tone); }
.dvf-dm { display: flex; flex-direction: column; gap: 6px; width: 84px; }
.dvf-dm i { height: 14px; border-radius: 10px; background: var(--tone-soft); }
.dvf-dm i:nth-child(1) { width: 70%; }
.dvf-dm i.r { width: 80%; align-self: flex-end; background: var(--tone); }
.dvf-dm i:nth-child(3) { width: 55%; }
.dvf-reel { width: 52px; height: 52px; border-radius: 14px; background: linear-gradient(140deg, var(--tone), color-mix(in srgb, var(--tone) 55%, #7c5cd6)); display: grid; place-items: center; color: #fff; font-size: 1.5rem; box-shadow: 0 10px 22px -10px color-mix(in srgb, var(--tone) 55%, transparent); }
.dvf-collab { position: relative; display: flex; align-items: center; }
.dvf-collab .av { width: 34px; height: 34px; border-radius: 50%; border: 2px solid #fff; }
.dvf-collab .av.a { background: linear-gradient(135deg, var(--tone), #7c5cd6); }
.dvf-collab .av.b { background: linear-gradient(135deg, var(--c-yellow), var(--c-pink)); margin-left: -10px; }
.dvf-collab .bi-heart-fill { color: var(--c-pink); font-size: .85rem; margin-left: 6px; }
.dvf-growth { display: flex; align-items: flex-end; gap: 7px; height: 56px; }
.dvf-growth i { width: 12px; height: var(--h); border-radius: 4px 4px 0 0; background: linear-gradient(180deg, var(--tone), color-mix(in srgb, var(--tone) 55%, #fff)); }
.dvf-growth i:last-child { background: linear-gradient(180deg, var(--tone-ink), var(--tone)); }
/* === Instagram reklam · sponsorlu + performans === */
/* gerçek IG reklam CTA barı (açık zemin, koyu yazı, kenardan kenara) */
.dpz-ig-cta { display: flex; align-items: center; justify-content: space-between; padding: 11px 14px; background: #fafafa; border-top: 1px solid var(--c-border); border-bottom: 1px solid var(--c-border); color: var(--c-text); font-size: 12.5px; font-weight: 600; }
.dpz-ig-cta span { display: inline-flex; align-items: center; gap: 7px; }
.dpz-ig-cta span .bi-bag { color: var(--c-accent); }
.dpz-ig-cta > .bi-chevron-right { color: #9aa3b2; font-size: .85rem; }
.dpz-ig .dpz-soc-acts { padding-top: 12px; }
/* IG feed görseli biraz daha yüksek/kare — gerçek post hissi */
.dpz-ig .dpz-soc-img { height: 178px; font-size: 4rem; }
/* telefon + performans kartı yan yana, üst üste binmeden */
.dpz-ig { display: flex; align-items: center; gap: 22px; transform: translateX(52px); }
/* Reklam Yöneticisi performans paneli */
.dpz-ig-perf { flex: none; align-self: center; min-width: 184px; display: flex; flex-direction: column; gap: 9px; background: #fff; border: 1px solid var(--c-border); border-radius: 16px; padding: 14px 16px; box-shadow: 0 24px 50px -18px rgba(10,14,26,.30), 0 4px 12px rgba(10,14,26,.06); }
.dpz-ig-perf-head { display: inline-flex; align-items: center; gap: 6px; font-size: 9.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: #94a3b8; padding-bottom: 9px; border-bottom: 1px solid var(--c-border); }
.dpz-ig-perf-head .bi-meta { color: #1f7af0; font-size: .95rem; }
.dpz-ig-perf-row { display: grid; grid-template-columns: 1fr auto auto; align-items: baseline; gap: 8px; }
.dpz-ig-perf-row small { font-size: 10.5px; color: var(--c-muted); }
.dpz-ig-perf-row b { font-family: 'Urbanist', 'Outfit', sans-serif; font-weight: 800; font-size: 15px; color: var(--c-text); text-align: right; }
.dpz-ig-perf-row em { display: inline-flex; align-items: center; font-style: normal; font-size: 10px; font-weight: 700; color: #1f9d6b; }
.dpz-ig-perf-row.hl { margin-top: 2px; padding-top: 9px; border-top: 1px solid var(--c-border); }
.dpz-ig-perf-row.hl b { color: #1f9d6b; font-size: 1.05rem; }
@media (max-width: 1100px) { .dpz-ig { transform: none; } }
@media (max-width: 560px) { .dpz-ig { flex-direction: column; gap: 16px; } .dpz-ig-perf { align-self: stretch; } }
/* === Kısıtlı reklam hesabı kurtarma · hesap durumu paneli (pro) === */
.dpz-visual--rec { display: flex; align-items: center; justify-content: center; position: relative; }
.dpz-rec { position: relative; width: clamp(308px, 31vw, 392px); background: #fff; border: 1px solid var(--c-border); border-radius: 22px; padding: 0 0 6px; overflow: hidden; box-shadow: 0 30px 70px -32px rgba(10,14,26,.20), 0 12px 30px rgba(10,14,26,.09); }
/* ürün çubuğu */
.dpz-rec-bar { display: flex; align-items: center; justify-content: space-between; padding: 13px 18px; background: linear-gradient(180deg, #fbfdff, #fff); border-bottom: 1px solid var(--c-border); }
.dpz-rec-bar-l { display: inline-flex; align-items: center; gap: 8px; font-family: 'Urbanist', 'Outfit', sans-serif; font-weight: 800; font-size: 13px; color: var(--c-text); letter-spacing: -.01em; }
.dpz-rec-bar-l .bi-meta { color: #1f7af0; font-size: 1.15rem; }
.dpz-rec-bar-dots { display: inline-flex; gap: 5px; }
.dpz-rec-bar-dots i { width: 7px; height: 7px; border-radius: 50%; background: #e3e8ef; }
/* hesap başlığı */
.dpz-rec-head { display: flex; align-items: center; gap: 12px; padding: 16px 18px 14px; }
.dpz-rec-av { width: 42px; height: 42px; border-radius: 12px; flex: none; background: linear-gradient(135deg, var(--c-pink), var(--c-yellow)); box-shadow: inset 0 0 0 1px rgba(10,14,26,.06); }
.dpz-rec-acct-nm { flex: 1; min-width: 0; line-height: 1.3; }
.dpz-rec-eyebrow { display: block; font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 9.5px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: #94a3b8; }
.dpz-rec-acct-nm b { display: block; font-size: 14px; font-weight: 700; color: var(--c-text); letter-spacing: -.01em; }
.dpz-rec-acct-nm small { font-size: 10.5px; color: var(--c-muted); font-family: 'JetBrains Mono', ui-monospace, monospace; letter-spacing: .02em; }
.dpz-rec-badge { position: relative; display: inline-grid; flex: none; }
.dpz-rec-badge span { grid-area: 1 / 1; display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; padding: 6px 11px; border-radius: 999px; font-size: 11px; font-weight: 800; }
.dpz-rec-badge .b-off { background: color-mix(in srgb, #e5484d 12%, #fff); color: #e5484d; box-shadow: inset 0 0 0 1px color-mix(in srgb, #e5484d 22%, transparent); animation: dpz-rec-off 6s ease-in-out infinite; }
.dpz-rec-badge .b-on { background: color-mix(in srgb, #1f9d6b 13%, #fff); color: #1f9d6b; box-shadow: inset 0 0 0 1px color-mix(in srgb, #1f9d6b 24%, transparent); opacity: 0; animation: dpz-rec-on 6s ease-in-out infinite; }
/* ilerleme çubuğu */
.dpz-rec-meter { padding: 0 18px 4px; }
.dpz-rec-meter-lbl { display: block; font-size: 10.5px; font-weight: 600; color: var(--c-muted); margin-bottom: 7px; }
.dpz-rec-meter-track { display: block; height: 6px; border-radius: 999px; background: #eef2f7; overflow: hidden; }
.dpz-rec-meter-fill { display: block; height: 100%; width: 0; border-radius: 999px; background: linear-gradient(90deg, #2bb37e, #1f9d6b); animation: dpz-rec-meter 6s ease-in-out infinite; }
/* zaman çizelgesi */
.dpz-rec-steps { position: relative; display: flex; flex-direction: column; gap: 14px; margin: 14px 18px 0; padding-top: 16px; border-top: 1px solid var(--c-border); }
.dpz-rec-steps::before, .dpz-rec-steps::after { content: ""; position: absolute; left: 12px; top: 30px; bottom: 30px; width: 2px; }
.dpz-rec-steps::before { background: var(--c-border); }
.dpz-rec-steps::after { background: linear-gradient(180deg, #2bb37e, #1f9d6b); transform: scaleY(0); transform-origin: top; animation: dpz-rec-line 6s ease-in-out infinite; }
.dpz-rec-step { position: relative; z-index: 1; display: flex; align-items: center; gap: 12px; }
.dpz-rec-dot { width: 26px; height: 26px; flex: none; border-radius: 50%; display: grid; place-items: center; background: #eef2f7; border: 1px solid var(--c-border); color: #c2cad6; font-size: .85rem; }
.dpz-rec-step:nth-child(1) .dpz-rec-dot { animation: dpz-rec-d1 6s ease-in-out infinite; }
.dpz-rec-step:nth-child(2) .dpz-rec-dot { animation: dpz-rec-d2 6s ease-in-out infinite; }
.dpz-rec-step:nth-child(3) .dpz-rec-dot { animation: dpz-rec-d3 6s ease-in-out infinite; }
.dpz-rec-step:nth-child(4) .dpz-rec-dot { animation: dpz-rec-d4 6s ease-in-out infinite; }
.dpz-rec-tx { flex: 1; min-width: 0; line-height: 1.25; }
.dpz-rec-tx b { display: block; font-size: 12.5px; font-weight: 700; color: var(--c-text); }
.dpz-rec-tx small { font-size: 10.5px; color: var(--c-muted); }
.dpz-rec-step.is-final .dpz-rec-tx b { color: #1f9d6b; }
.dpz-rec-st { flex: none; font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 9px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; color: #1f9d6b; opacity: 0; }
.dpz-rec-step:nth-child(1) .dpz-rec-st { animation: dpz-rec-c1 6s ease-in-out infinite; }
.dpz-rec-step:nth-child(2) .dpz-rec-st { animation: dpz-rec-c2 6s ease-in-out infinite; }
.dpz-rec-step:nth-child(3) .dpz-rec-st { animation: dpz-rec-c3 6s ease-in-out infinite; }
.dpz-rec-step:nth-child(4) .dpz-rec-st { animation: dpz-rec-c4 6s ease-in-out infinite; }
/* sonuç şeridi */
.dpz-rec-foot { display: flex; align-items: center; gap: 8px; margin: 16px 14px 8px; padding: 11px 14px; border-radius: 13px; background: color-mix(in srgb, #1f9d6b 9%, #fff); color: #1f9d6b; font-size: 12.5px; font-weight: 700; box-shadow: inset 0 0 0 1px color-mix(in srgb, #1f9d6b 18%, transparent); opacity: 0; transform: translateY(6px); animation: dpz-rec-footin 6s ease-in-out infinite; }
.dpz-rec-foot .bi-shield-check { font-size: 1.05rem; }
/* §01 ikon rozeti */
.dpz-rec-ic { width: 54px; height: 54px; border-radius: 15px; display: grid; place-items: center; font-size: 1.55rem; color: var(--tone-ink); background: color-mix(in srgb, var(--tone) 15%, #fff); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--tone) 24%, transparent); }
@keyframes dpz-rec-off { 0%, 42% { opacity: 1; } 49%, 92% { opacity: 0; } 98%, 100% { opacity: 1; } }
@keyframes dpz-rec-on { 0%, 42% { opacity: 0; } 49%, 92% { opacity: 1; } 98%, 100% { opacity: 0; } }
@keyframes dpz-rec-footin { 0%, 44% { opacity: 0; transform: translateY(6px); } 52%, 92% { opacity: 1; transform: translateY(0); } 98%, 100% { opacity: 0; transform: translateY(6px); } }
@keyframes dpz-rec-meter { 0%, 8% { width: 0; } 15% { width: 26%; } 25% { width: 52%; } 35% { width: 78%; } 44%, 90% { width: 100%; } 97%, 100% { width: 0; } }
@keyframes dpz-rec-line { 0%, 8% { transform: scaleY(0); } 42%, 90% { transform: scaleY(1); } 97%, 100% { transform: scaleY(0); } }
@keyframes dpz-rec-d1 { 0%, 6% { background: #eef2f7; border-color: var(--c-border); color: #c2cad6; } 12%, 92% { background: #1f9d6b; border-color: #1f9d6b; color: #fff; } 98%, 100% { background: #eef2f7; border-color: var(--c-border); color: #c2cad6; } }
@keyframes dpz-rec-d2 { 0%, 16% { background: #eef2f7; border-color: var(--c-border); color: #c2cad6; } 22%, 92% { background: #1f9d6b; border-color: #1f9d6b; color: #fff; } 98%, 100% { background: #eef2f7; border-color: var(--c-border); color: #c2cad6; } }
@keyframes dpz-rec-d3 { 0%, 26% { background: #eef2f7; border-color: var(--c-border); color: #c2cad6; } 32%, 92% { background: #1f9d6b; border-color: #1f9d6b; color: #fff; } 98%, 100% { background: #eef2f7; border-color: var(--c-border); color: #c2cad6; } }
@keyframes dpz-rec-d4 { 0%, 36% { background: #eef2f7; border-color: var(--c-border); color: #c2cad6; } 42%, 92% { background: #1f9d6b; border-color: #1f9d6b; color: #fff; } 98%, 100% { background: #eef2f7; border-color: var(--c-border); color: #c2cad6; } }
@keyframes dpz-rec-c1 { 0%, 8% { opacity: 0; } 13%, 92% { opacity: 1; } 97%, 100% { opacity: 0; } }
@keyframes dpz-rec-c2 { 0%, 18% { opacity: 0; } 23%, 92% { opacity: 1; } 97%, 100% { opacity: 0; } }
@keyframes dpz-rec-c3 { 0%, 28% { opacity: 0; } 33%, 92% { opacity: 1; } 97%, 100% { opacity: 0; } }
@keyframes dpz-rec-c4 { 0%, 38% { opacity: 0; } 43%, 92% { opacity: 1; } 97%, 100% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
.dpz-rec-badge .b-off { opacity: 0; animation: none; }
.dpz-rec-badge .b-on { opacity: 1; animation: none; }
.dpz-rec-foot { opacity: 1; transform: none; animation: none; }
.dpz-rec-meter-fill { width: 100%; animation: none; }
.dpz-rec-steps::after { transform: scaleY(1); animation: none; }
.dpz-rec-dot { background: #1f9d6b; border-color: #1f9d6b; color: #fff; }
.dpz-rec-step:nth-child(n) .dpz-rec-dot { animation: none; }
.dpz-rec-step:nth-child(n) .dpz-rec-st { opacity: 1; animation: none; }
}
/* === Kapatılan reklam hesabı · "canlanma" sahnesi (devre dışı pano → reklam grafiği canlanır) === */
.dpz-visual--rev { display: flex; align-items: center; justify-content: center; position: relative; }
.dpz-rev { position: relative; width: clamp(350px, 35vw, 446px); background: #fff; border: 1px solid var(--c-border); border-radius: 24px; padding: 0 0 18px; box-shadow: 0 44px 100px -34px color-mix(in srgb, var(--c-accent) 46%, transparent), 0 14px 34px rgba(10,14,26,.10); }
.dpz-rev-bar { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 15px 20px; background: linear-gradient(180deg, #fbfdff, #fff); border-bottom: 1px solid var(--c-border); border-radius: 24px 24px 0 0; }
.dpz-rev-bar-l { display: inline-flex; align-items: center; gap: 9px; font-family: 'Urbanist', 'Outfit', sans-serif; font-weight: 800; font-size: 14.5px; color: var(--c-text); }
.dpz-rev-bar-l .bi-meta { color: #1f7af0; font-size: 1.3rem; }
.dpz-rev-badge { position: relative; display: inline-grid; flex: none; }
.dpz-rev-badge span { grid-area: 1 / 1; display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; padding: 6px 11px; border-radius: 999px; font-size: 11px; font-weight: 800; }
.dpz-rev-badge .b-off { background: color-mix(in srgb, #e5484d 12%, #fff); color: #e5484d; box-shadow: inset 0 0 0 1px color-mix(in srgb, #e5484d 22%, transparent); animation: dpz-mq-boff 6s ease-in-out infinite; }
.dpz-rev-badge .b-on { background: color-mix(in srgb, #1f9d6b 13%, #fff); color: #1f9d6b; box-shadow: inset 0 0 0 1px color-mix(in srgb, #1f9d6b 24%, transparent); opacity: 0; animation: dpz-mq-bon 6s ease-in-out infinite; }
.dpz-rev-acct { display: flex; align-items: center; gap: 12px; padding: 17px 20px 14px; }
.dpz-rev-av { width: 44px; height: 44px; border-radius: 13px; flex: none; background: linear-gradient(135deg, var(--c-pink), var(--c-yellow)); box-shadow: inset 0 0 0 1px rgba(10,14,26,.06); }
.dpz-rev-acct-tx { line-height: 1.32; min-width: 0; }
.dpz-rev-acct-tx b { display: block; font-size: 14.5px; font-weight: 700; color: var(--c-text); letter-spacing: -.01em; }
.dpz-rev-verif { color: #1f7af0; font-size: .76em; vertical-align: 1px; }
.dpz-rev-acct-tx small { font-size: 11px; color: var(--c-muted); font-family: 'JetBrains Mono', ui-monospace, monospace; }
/* gerçek Meta "Hesap Kalitesi" durum ekranı: gönderildi → inceleniyor → yeniden aktif */
.dpz-mq-screen { position: relative; margin: 0 18px; height: 162px; border-radius: 18px; background: #f8fafc; border: 1px solid var(--c-border); overflow: hidden; }
.dpz-mq-state { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; padding: 16px; text-align: center; opacity: 0; }
.dpz-mq-s1 { animation: dpz-mq-s1 6s ease-in-out infinite; }
.dpz-mq-s2 { animation: dpz-mq-s2 6s ease-in-out infinite; }
.dpz-mq-s3 { animation: dpz-mq-s3 6s ease-in-out infinite; }
.dpz-mq-ic { width: 52px; height: 52px; border-radius: 50%; display: grid; place-items: center; font-size: 1.45rem; }
.dpz-mq-red { background: color-mix(in srgb, #e5484d 12%, #fff); color: #e5484d; box-shadow: inset 0 0 0 1px color-mix(in srgb, #e5484d 22%, transparent); }
.dpz-mq-blue { background: color-mix(in srgb, #1f7af0 11%, #fff); color: #1f7af0; box-shadow: inset 0 0 0 1px color-mix(in srgb, #1f7af0 22%, transparent); animation: dpz-mq-pulse 1.4s ease-in-out infinite; }
.dpz-mq-green { background: color-mix(in srgb, #1f9d6b 13%, #fff); color: #1f9d6b; box-shadow: inset 0 0 0 1px color-mix(in srgb, #1f9d6b 24%, transparent); }
.dpz-mq-state b { font-family: 'Urbanist', 'Outfit', sans-serif; font-size: 15px; font-weight: 800; color: var(--c-text); letter-spacing: -.01em; }
.dpz-mq-state small { font-size: 11.5px; color: var(--c-muted); margin-top: -3px; }
.dpz-mq-tag { display: inline-flex; align-items: center; gap: 5px; margin-top: 4px; padding: 6px 13px; border-radius: 999px; font-size: 11.5px; font-weight: 800; }
.dpz-mq-tag-send { background: color-mix(in srgb, #e5484d 11%, #fff); color: #e5484d; }
.dpz-mq-tag-send .bi-send-fill { animation: dpz-mq-fly 1.5s ease-in-out infinite; }
.dpz-mq-tag-live { background: color-mix(in srgb, #1f9d6b 13%, #fff); color: #1f9d6b; }
.dpz-mq-prog { width: 154px; height: 6px; margin-top: 6px; border-radius: 999px; background: #e6ebf1; overflow: hidden; }
.dpz-mq-prog span { display: block; width: 40%; height: 100%; border-radius: 999px; background: linear-gradient(90deg, #1f7af0, #5aa2f7); animation: dpz-mq-indet 1.5s ease-in-out infinite; }
/* alt mini stepper */
.dpz-mq-steps { display: flex; align-items: center; justify-content: center; gap: 9px; margin: 16px 18px 2px; }
.dpz-mq-step { display: inline-flex; align-items: center; gap: 5px; font-size: 10.5px; font-weight: 700; letter-spacing: .02em; color: #b3bcc9; }
.dpz-mq-step .bi-check-lg { font-size: .95rem; }
.dpz-mq-sep { flex: 1; max-width: 30px; height: 2px; border-radius: 2px; background: #e3e8ef; }
.dpz-mq-p1 { animation: dpz-mq-p1 6s ease-in-out infinite; }
.dpz-mq-p2 { animation: dpz-mq-p2 6s ease-in-out infinite; }
.dpz-mq-p3 { animation: dpz-mq-p3 6s ease-in-out infinite; }
@keyframes dpz-mq-boff { 0%, 66% { opacity: 1; } 73%, 94% { opacity: 0; } 99%, 100% { opacity: 1; } }
@keyframes dpz-mq-bon { 0%, 66% { opacity: 0; } 73%, 94% { opacity: 1; } 99%, 100% { opacity: 0; } }
@keyframes dpz-mq-s1 { 0% { opacity: 0; } 6%, 30% { opacity: 1; } 36%, 100% { opacity: 0; } }
@keyframes dpz-mq-s2 { 0%, 36% { opacity: 0; } 42%, 62% { opacity: 1; } 68%, 100% { opacity: 0; } }
@keyframes dpz-mq-s3 { 0%, 68% { opacity: 0; } 74%, 94% { opacity: 1; } 99%, 100% { opacity: 0; } }
@keyframes dpz-mq-p1 { 0%, 30% { color: #b3bcc9; } 34%, 96% { color: #1f9d6b; } 99%, 100% { color: #b3bcc9; } }
@keyframes dpz-mq-p2 { 0%, 40% { color: #b3bcc9; } 44%, 96% { color: #1f9d6b; } 99%, 100% { color: #b3bcc9; } }
@keyframes dpz-mq-p3 { 0%, 72% { color: #b3bcc9; } 76%, 96% { color: #1f9d6b; } 99%, 100% { color: #b3bcc9; } }
@keyframes dpz-mq-pulse { 0%, 100% { box-shadow: inset 0 0 0 1px color-mix(in srgb, #1f7af0 22%, transparent), 0 0 0 0 color-mix(in srgb, #1f7af0 30%, transparent); } 50% { box-shadow: inset 0 0 0 1px color-mix(in srgb, #1f7af0 22%, transparent), 0 0 0 7px transparent; } }
@keyframes dpz-mq-indet { 0% { transform: translateX(-130%); } 100% { transform: translateX(360%); } }
@keyframes dpz-mq-fly { 0%, 100% { transform: translate(0, 0); } 50% { transform: translate(3px, -2px); } }
@media (prefers-reduced-motion: reduce) {
.dpz-rev-badge .b-off { opacity: 0; animation: none; }
.dpz-rev-badge .b-on { opacity: 1; animation: none; }
.dpz-mq-s1, .dpz-mq-s2 { opacity: 0; animation: none; }
.dpz-mq-s3 { opacity: 1; animation: none; }
.dpz-mq-blue, .dpz-mq-prog span, .dpz-mq-tag-send .bi-send-fill { animation: none; }
.dpz-mq-step { color: #1f9d6b; animation: none; }
}
/* === Kapatılan Instagram hesabı geri açma · IG telefon kurtarma akışı === */
.dpz-visual--acr { display: flex; align-items: center; justify-content: center; position: relative; }
.dpz-acr { position: relative; }
.dpz-acr-phone { width: clamp(298px, 31vw, 374px); background: #fff; border: 1px solid var(--c-border); border-radius: 34px; padding: 0; overflow: hidden; box-shadow: 0 48px 110px -34px color-mix(in srgb, var(--c-accent) 48%, transparent), 0 16px 38px rgba(10,14,26,.11); }
.dpz-acr-status { display: flex; align-items: center; justify-content: space-between; padding: 11px 20px 5px; font-size: 11px; font-weight: 700; color: var(--c-text); }
.dpz-acr-status-ic { display: inline-flex; gap: 6px; font-size: .72rem; }
.dpz-acr-top { display: flex; align-items: center; gap: 9px; padding: 5px 18px 12px; border-bottom: 1px solid var(--c-border); }
.dpz-acr-top .bi-instagram { font-size: 1.35rem; background: linear-gradient(45deg, #f9ce34, #ee2a7b 45%, #6228d7); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.dpz-acr-top b { flex: 1; font-family: 'Urbanist', 'Outfit', sans-serif; font-weight: 800; font-size: 18px; color: var(--c-text); letter-spacing: -.02em; }
.dpz-acr-top-r { color: var(--c-text); font-size: 1.15rem; }
.dpz-acr-screen { position: relative; height: 330px; }
.dpz-acr-state { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; padding: 18px; text-align: center; opacity: 0; }
.dpz-acr-s1 { animation: dpz-mq-s1 6s ease-in-out infinite; }
.dpz-acr-s2 { animation: dpz-mq-s2 6s ease-in-out infinite; }
.dpz-acr-s3 { animation: dpz-mq-s3 6s ease-in-out infinite; }
.dpz-acr-ic { width: 70px; height: 70px; border-radius: 50%; display: grid; place-items: center; font-size: 1.9rem; }
.dpz-acr-red { background: color-mix(in srgb, #e5484d 12%, #fff); color: #e5484d; box-shadow: inset 0 0 0 1px color-mix(in srgb, #e5484d 22%, transparent); }
.dpz-acr-blue { background: color-mix(in srgb, #1f7af0 11%, #fff); color: #1f7af0; box-shadow: inset 0 0 0 1px color-mix(in srgb, #1f7af0 22%, transparent); animation: dpz-mq-pulse 1.4s ease-in-out infinite; }
.dpz-acr-state b { font-family: 'Urbanist', 'Outfit', sans-serif; font-size: 16px; font-weight: 800; color: var(--c-text); }
.dpz-acr-state small { font-size: 12px; color: var(--c-muted); margin-top: -4px; }
.dpz-acr-btn { margin-top: 7px; padding: 8px 20px; border-radius: 10px; font-size: 12px; font-weight: 800; color: #fff; background: #0095f6; }
.dpz-acr-prog { width: 152px; height: 6px; margin-top: 7px; border-radius: 999px; background: #e6ebf1; overflow: hidden; }
.dpz-acr-prog span { display: block; width: 40%; height: 100%; border-radius: 999px; background: linear-gradient(90deg, #1f7af0, #5aa2f7); animation: dpz-mq-indet 1.5s ease-in-out infinite; }
/* geri açılan profil (gerçek IG profil düzeni) */
.dpz-acr-s3 { justify-content: flex-start; align-items: stretch; gap: 11px; padding: 18px 16px 14px; text-align: left; }
.dpz-acr-phead { display: flex; align-items: center; gap: 18px; }
.dpz-acr-av { flex: none; width: 60px; height: 60px; border-radius: 50%; background: linear-gradient(135deg, var(--c-pink), var(--c-yellow)); box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--c-pink); }
.dpz-acr-stats { display: flex; flex: 1; justify-content: space-around; }
.dpz-acr-stats > span { display: flex; flex-direction: column; align-items: center; line-height: 1.15; }
.dpz-acr-stats b { font-family: 'Urbanist', 'Outfit', sans-serif; font-size: 16px; font-weight: 800; color: var(--c-text); }
.dpz-acr-stats small { font-size: 10.5px; color: var(--c-muted); }
.dpz-acr-user { display: inline-flex; align-items: center; gap: 5px; font-family: 'Urbanist', 'Outfit', sans-serif; font-size: 14px; font-weight: 800; color: var(--c-text); }
.dpz-acr-user .bi-patch-check-fill { color: #1f7af0; font-size: .78em; }
.dpz-acr-ok { display: inline-flex; align-items: center; gap: 5px; font-size: 11.5px; font-weight: 700; color: #1f9d6b; }
.dpz-acr-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 3px; width: 100%; margin-top: 1px; }
.dpz-acr-grid i:nth-child(n+7) { display: none; }
.dpz-acr-grid i { aspect-ratio: 1; border-radius: 5px; background: linear-gradient(135deg, color-mix(in srgb, var(--c-accent) 28%, #fff), color-mix(in srgb, var(--c-lilac) 30%, #fff)); }
.dpz-acr-grid i:nth-child(2) { background: linear-gradient(135deg, color-mix(in srgb, var(--c-pink) 34%, #fff), color-mix(in srgb, var(--c-yellow) 30%, #fff)); }
.dpz-acr-grid i:nth-child(5) { background: linear-gradient(135deg, color-mix(in srgb, var(--c-mint) 42%, #fff), color-mix(in srgb, var(--c-accent) 24%, #fff)); }
.dpz-acr-grid i:nth-child(7) { background: linear-gradient(135deg, color-mix(in srgb, var(--c-yellow) 34%, #fff), color-mix(in srgb, var(--c-pink) 28%, #fff)); }
.dpz-acr-grid i:nth-child(9) { background: linear-gradient(135deg, color-mix(in srgb, var(--c-lilac) 36%, #fff), color-mix(in srgb, var(--c-accent) 24%, #fff)); }
.dpz-acr-nav { display: flex; align-items: center; justify-content: space-around; padding: 12px 20px; border-top: 1px solid var(--c-border); font-size: 1.4rem; color: var(--c-text); }
.dpz-acr-nav .bi-plus-square { font-size: 1.5rem; }
.dpz-acr-nav-av { width: 25px; height: 25px; border-radius: 50%; background: linear-gradient(135deg, var(--c-accent), #7c5cd6); border: 1.5px solid var(--c-text); }
.dpz-acr-toast { position: absolute; bottom: 92px; right: -26px; display: inline-flex; align-items: center; gap: 8px; background: #fff; border: 1px solid var(--c-border); border-radius: 14px; padding: 10px 15px; font-family: 'Urbanist', 'Outfit', sans-serif; font-weight: 800; font-size: 13px; color: #1f9d6b; box-shadow: 0 22px 46px -16px rgba(10,14,26,.3), 0 4px 12px rgba(10,14,26,.06); opacity: 0; animation: dpz-mq-s3 6s ease-in-out infinite; }
.dpz-acr-toast .bi-check-circle-fill { color: #1f9d6b; }
@media (max-width: 1100px) { .dpz-acr-toast { right: 2px; } }
@media (prefers-reduced-motion: reduce) {
.dpz-acr-s1, .dpz-acr-s2 { opacity: 0; animation: none; }
.dpz-acr-s3, .dpz-acr-toast { opacity: 1; animation: none; }
.dpz-acr-blue, .dpz-acr-prog span { animation: none; }
}
/* === Google Ads · arama sonucu + sponsorlu reklam onayı === */
.dpz-visual--gad { display: flex; align-items: center; justify-content: center; position: relative; }
.dpz-gad { position: relative; width: clamp(322px, 33vw, 432px); background: #fff; border: 1px solid var(--c-border); border-radius: 22px; padding: 20px; box-shadow: 0 46px 104px -34px color-mix(in srgb, var(--c-accent) 48%, transparent), 0 16px 38px rgba(10,14,26,.11); }
.dpz-gad-bar { display: flex; align-items: center; gap: 12px; padding: 12px 17px; border: 1px solid var(--c-border); border-radius: 999px; box-shadow: 0 1px 3px rgba(10,14,26,.05); }
.dpz-gad-mag { color: #9aa3b2; font-size: 1rem; }
.dpz-gad-q { flex: 1; font-size: 13.5px; color: var(--c-text); }
.dpz-gad-glogo { font-size: 1.2rem; color: #4285F4; }
.dpz-gad-result { position: relative; margin-top: 17px; padding: 14px 15px; border: 1px solid var(--c-border); border-radius: 14px; animation: dpz-gad-approve 6s ease-in-out infinite; }
.dpz-gad-rtop { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 9px; }
.dpz-gad-spon { font-size: 11px; font-weight: 800; color: var(--c-text); }
.dpz-gad-status { position: relative; display: inline-grid; }
.dpz-gad-status span { grid-area: 1 / 1; display: inline-flex; align-items: center; gap: 5px; padding: 4px 10px; border-radius: 999px; font-size: 10px; font-weight: 800; white-space: nowrap; }
.dpz-gad-status .b-off { background: color-mix(in srgb, #f4b400 18%, #fff); color: #b07d00; animation: dpz-rec-off 6s ease-in-out infinite; }
.dpz-gad-status .b-on { background: color-mix(in srgb, #34A853 14%, #fff); color: #34A853; opacity: 0; animation: dpz-rec-on 6s ease-in-out infinite; }
.dpz-gad-url { display: flex; align-items: center; gap: 8px; font-size: 12px; color: #3c4043; }
.dpz-gad-fav { width: 18px; height: 18px; border-radius: 50%; flex: none; background: linear-gradient(135deg, #4285F4, #34A853); }
.dpz-gad-title { display: block; margin-top: 4px; font-family: 'Urbanist', 'Outfit', sans-serif; font-size: 16.5px; font-weight: 700; color: #1a0dab; letter-spacing: -.01em; }
.dpz-gad-desc { display: block; margin-top: 4px; font-size: 12px; line-height: 1.5; color: #4d5156; }
.dpz-gad-org { display: flex; flex-direction: column; gap: 13px; margin-top: 17px; }
.dpz-gad-org span { display: block; height: 9px; border-radius: 5px; background: #eef2f7; }
.dpz-gad-org span:nth-child(1) { width: 58%; }
.dpz-gad-org span:nth-child(2) { width: 88%; }
.dpz-gad-org span:nth-child(3) { width: 72%; }
.dpz-gad-perf { position: absolute; bottom: -24px; right: -26px; display: flex; gap: 18px; background: #fff; border: 1px solid var(--c-border); border-radius: 14px; padding: 12px 17px; box-shadow: 0 22px 46px -16px rgba(10,14,26,.3), 0 4px 12px rgba(10,14,26,.06); opacity: 0; animation: dpz-rec-on 6s ease-in-out infinite; }
.dpz-gad-perf-row { display: grid; grid-template-columns: auto auto; grid-template-areas: 'l l' 'v a'; align-items: center; column-gap: 3px; }
.dpz-gad-perf-row small { grid-area: l; font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 9px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: #94a3b8; margin-bottom: 1px; }
.dpz-gad-perf-row b { grid-area: v; font-family: 'Urbanist', 'Outfit', sans-serif; font-size: 16px; font-weight: 800; color: var(--c-text); }
.dpz-gad-perf-row em { grid-area: a; display: inline-flex; color: #34A853; font-style: normal; font-size: 1rem; }
@keyframes dpz-gad-approve {
0%, 44% { border-color: var(--c-border); box-shadow: none; opacity: .6; }
52%, 92% { border-color: color-mix(in srgb, #34A853 42%, var(--c-border)); box-shadow: 0 0 0 3px color-mix(in srgb, #34A853 11%, transparent); opacity: 1; }
98%, 100% { border-color: var(--c-border); box-shadow: none; opacity: .6; }
}
@media (max-width: 1100px) { .dpz-gad-perf { right: 2px; } }
@media (prefers-reduced-motion: reduce) {
.dpz-gad-status .b-off { opacity: 0; animation: none; }
.dpz-gad-status .b-on, .dpz-gad-perf { opacity: 1; animation: none; }
.dpz-gad-result { opacity: 1; border-color: color-mix(in srgb, #34A853 42%, var(--c-border)); animation: none; }
}
/* === Meta Reklam Yöneticisi paneli (meta-reklam-yonetimi hero) === */
.dpz-meta { width: clamp(300px, 33vw, 360px); background: #fff; border: 1px solid var(--c-border); border-radius: 22px; padding: 16px; box-shadow: 0 38px 86px -32px color-mix(in srgb, var(--c-accent) 44%, transparent), 0 10px 28px rgba(10,14,26,.08); }
.dpz-meta-bar { display: flex; align-items: center; justify-content: space-between; margin-bottom: 13px; }
.dpz-meta-brand { display: inline-flex; align-items: center; gap: 7px; font-family: 'Urbanist', 'Outfit', sans-serif; font-weight: 800; font-size: 14px; color: var(--c-text); }
.dpz-meta-brand .bi-meta { color: #0866ff; font-size: 1.15rem; }
.dpz-meta-live { display: inline-flex; align-items: center; gap: 5px; font-size: 10px; font-weight: 700; letter-spacing: .06em; color: #1f9d6b; }
.dpz-meta-kpis { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-bottom: 12px; }
.dpz-meta-kpi { display: flex; flex-direction: column; gap: 2px; padding: 9px 10px; border-radius: 12px; background: color-mix(in srgb, var(--c-accent) 7%, #fff); border: 1px solid var(--c-border); }
.dpz-meta-kpi small { font-size: 9px; font-weight: 600; letter-spacing: .03em; text-transform: uppercase; color: var(--c-muted); }
.dpz-meta-kpi b { font-family: 'Urbanist', 'Outfit', sans-serif; font-size: 15px; font-weight: 800; color: var(--c-text); }
.dpz-meta-kpi.hl { background: color-mix(in srgb, var(--c-mint) 24%, #fff); border-color: color-mix(in srgb, var(--c-mint) 42%, transparent); }
.dpz-meta-camps { display: flex; flex-direction: column; gap: 7px; margin-bottom: 12px; }
.dpz-meta-camp { display: grid; grid-template-columns: auto 1fr auto; grid-template-areas: "ic name res" "ic track res"; align-items: center; column-gap: 9px; row-gap: 5px; padding: 8px 10px; border-radius: 12px; border: 1px solid var(--c-border); }
.dpz-meta-camp.on { border-color: color-mix(in srgb, #0866ff 40%, transparent); background: color-mix(in srgb, #0866ff 5%, #fff); }
.dpz-meta-cic { grid-area: ic; width: 30px; height: 30px; border-radius: 9px; display: grid; place-items: center; font-size: .95rem; color: #0866ff; background: color-mix(in srgb, #0866ff 12%, #fff); }
.dpz-meta-cname { grid-area: name; display: flex; flex-direction: column; line-height: 1.2; min-width: 0; }
.dpz-meta-cname b { font-size: 12.5px; font-weight: 700; color: var(--c-text); white-space: nowrap; }
.dpz-meta-cname small { font-size: 10px; color: var(--c-muted); }
.dpz-meta-track { grid-area: track; height: 5px; border-radius: 999px; background: #eef2f7; overflow: hidden; }
.dpz-meta-track i { display: block; height: 100%; width: var(--w); border-radius: 999px; background: linear-gradient(90deg, #0866ff, #5aa2f7); transform-origin: left; transform: scaleX(0); animation: dpz-meta-fill 3.6s ease-in-out infinite alternate; }
.dpz-meta-camp:nth-child(2) .dpz-meta-track i { animation-delay: .4s; }
.dpz-meta-camp:nth-child(3) .dpz-meta-track i { animation-delay: .8s; }
.dpz-meta-res { grid-area: res; font-family: 'Urbanist', 'Outfit', sans-serif; font-weight: 800; font-size: 14px; color: var(--c-text); }
.dpz-meta-split { border-top: 1px solid var(--c-border); padding-top: 11px; }
.dpz-meta-split-lbl { display: block; font-size: 9.5px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--c-muted); margin-bottom: 8px; }
.dpz-meta-split-row { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 9px; margin-bottom: 6px; }
.dpz-meta-split-row i { font-size: 1rem; }
.dpz-meta-split-row .bi-facebook { color: #0866ff; }
.dpz-meta-split-row .bi-instagram { color: #e1306c; }
.dpz-meta-split-row .bi-messenger { color: #a033ff; }
.dpz-meta-bar2 { height: 6px; border-radius: 999px; background: #eef2f7; overflow: hidden; }
.dpz-meta-bar2 b { display: block; height: 100%; width: var(--w); border-radius: 999px; background: linear-gradient(90deg, var(--c-accent), color-mix(in srgb, var(--c-accent) 55%, #fff)); transform-origin: left; transform: scaleX(0); animation: dpz-meta-fill 4s ease-in-out infinite alternate; }
.dpz-meta-split-row:nth-child(3) .dpz-meta-bar2 b { animation-delay: .3s; }
.dpz-meta-split-row:nth-child(4) .dpz-meta-bar2 b { animation-delay: .6s; }
.dpz-meta-split-row em { font-style: normal; font-size: 11.5px; font-weight: 700; color: var(--c-text); min-width: 30px; text-align: right; }
@keyframes dpz-meta-fill { from { transform: scaleX(.06); } to { transform: scaleX(1); } }
@media (prefers-reduced-motion: reduce) {
.dpz-meta-track i, .dpz-meta-bar2 b { animation: none; transform: scaleX(1); }
}
/* === TikTok telefon ekranı (tiktok-reklam-yonetimi hero) — .dpz-soc kabuğunu yeniden kullanır === */
.dpz-tt { display: flex; align-items: center; gap: 22px; transform: translateX(40px); }
.dpz-tt-screen { background: #000; border-color: #000; color: #fff; position: relative; }
.dpz-tt-tabs { position: absolute; top: 16px; left: 0; right: 0; z-index: 4; display: flex; justify-content: center; gap: 20px; font-size: 13px; font-weight: 700; color: rgba(255,255,255,.55); }
.dpz-tt-tabs .on { color: #fff; position: relative; }
.dpz-tt-tabs .on::after { content: ""; position: absolute; left: 50%; bottom: -7px; transform: translateX(-50%); width: 18px; height: 2px; background: #fff; border-radius: 2px; }
.dpz-tt-video { position: relative; height: clamp(380px, 46vw, 470px); background: linear-gradient(165deg, #25f4ee 0%, #0b0b0f 46%, #fe2c55 100%); overflow: hidden; }
.dpz-tt-play { position: absolute; inset: 0; display: grid; place-items: center; font-size: 3.6rem; filter: drop-shadow(0 8px 20px rgba(0,0,0,.4)); animation: dpz-tt-pulse 3s ease-in-out infinite; }
.dpz-tt-spon { position: absolute; top: 46px; left: 12px; z-index: 4; font-size: 9px; font-weight: 700; padding: 3px 7px; border-radius: 6px; background: rgba(0,0,0,.42); color: rgba(255,255,255,.85); }
.dpz-tt-rail { position: absolute; right: 9px; bottom: 96px; z-index: 4; display: flex; flex-direction: column; align-items: center; gap: 15px; }
.dpz-tt-av { width: 38px; height: 38px; border-radius: 50%; background: linear-gradient(135deg, #25f4ee, #fe2c55); border: 2px solid #fff; }
.dpz-tt-act { display: flex; flex-direction: column; align-items: center; gap: 3px; font-size: 1.45rem; color: #fff; }
.dpz-tt-act b { font-size: 10.5px; font-weight: 700; }
.dpz-tt-act .bi-heart-fill { color: #fe2c55; animation: dpz-tt-beat 2.6s ease-in-out infinite; }
.dpz-tt-disc { width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; font-size: 1.05rem; background: #1a1a1f; border: 3px solid #3a3a42; animation: dpz-tt-spin 3.6s linear infinite; }
.dpz-tt-cap { position: absolute; left: 12px; right: 62px; bottom: 62px; z-index: 4; display: flex; flex-direction: column; gap: 3px; }
.dpz-tt-cap b { font-size: 13px; font-weight: 700; }
.dpz-tt-cap small { font-size: 11px; color: rgba(255,255,255,.85); line-height: 1.3; }
.dpz-tt-ctabtn { position: absolute; left: 12px; right: 12px; bottom: 14px; z-index: 4; display: inline-flex; align-items: center; justify-content: center; gap: 7px; height: 34px; border-radius: 9px; background: #fe2c55; color: #fff; font-size: 12.5px; font-weight: 700; box-shadow: 0 8px 20px -8px rgba(254,44,85,.7); }
.dpz-tt-perf .dpz-ig-perf-head .bi-tiktok { color: #010101; font-size: 1rem; }
@media (max-width: 1100px) { .dpz-tt { transform: none; } }
@media (max-width: 560px) { .dpz-tt { flex-direction: column; gap: 16px; } .dpz-tt-perf { align-self: stretch; } }
@keyframes dpz-tt-spin { to { transform: rotate(360deg); } }
@keyframes dpz-tt-pulse { 0%, 100% { transform: scale(1); opacity: .92; } 50% { transform: scale(1.08); opacity: 1; } }
@keyframes dpz-tt-beat { 0%, 100% { transform: scale(1); } 18% { transform: scale(1.25); } 32% { transform: scale(1); } }
@media (prefers-reduced-motion: reduce) {
.dpz-tt-disc, .dpz-tt-play, .dpz-tt-act .bi-heart-fill { animation: none; }
}
/* === LinkedIn sponsorlu gönderi + B2B hedef kitle (linkedin-reklam-yonetimi hero) === */
.dpz-li { position: relative; display: flex; align-items: center; gap: 18px; transform: translateX(24px); }
.dpz-li-card { flex: none; width: clamp(266px, 28vw, 312px); background: #fff; border: 1px solid var(--c-border); border-radius: 16px; padding: 15px; box-shadow: 0 38px 86px -32px color-mix(in srgb, var(--c-accent) 40%, transparent), 0 10px 28px rgba(10,14,26,.08); }
.dpz-li-head { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 10px; margin-bottom: 11px; }
.dpz-li-logo { width: 42px; height: 42px; border-radius: 10px; display: grid; place-items: center; font-size: 1.2rem; color: #fff; background: #0a66c2; }
.dpz-li-co { min-width: 0; line-height: 1.2; }
.dpz-li-co b { display: flex; align-items: center; gap: 4px; font-size: 13px; font-weight: 700; color: var(--c-text); }
.dpz-li-co b .bi-patch-check-fill { color: #0a66c2; font-size: .76em; }
.dpz-li-co small { font-size: 10.5px; color: var(--c-muted); }
.dpz-li-in { color: #0a66c2; font-size: 1.3rem; }
.dpz-li-text { font-size: 12.5px; color: var(--c-text); line-height: 1.4; margin-bottom: 10px; }
.dpz-li-media { height: 84px; border-radius: 10px; display: grid; place-items: center; font-size: 2.1rem; color: #0a66c2; background: linear-gradient(140deg, color-mix(in srgb, #0a66c2 15%, #fff), color-mix(in srgb, var(--c-lilac) 24%, #fff)); margin-bottom: 11px; }
.dpz-li-form { border: 1px solid color-mix(in srgb, #0a66c2 26%, var(--c-border)); border-radius: 11px; padding: 11px; display: flex; flex-direction: column; gap: 7px; background: color-mix(in srgb, #0a66c2 4%, #fff); }
.dpz-li-form-lbl { display: inline-flex; align-items: center; gap: 5px; font-size: 9.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: #0a66c2; }
.dpz-li-field { height: 12px; border-radius: 5px; background: #eef2f7; }
.dpz-li-field.sm { width: 62%; }
.dpz-li-btn { align-self: flex-start; margin-top: 2px; padding: 6px 17px; border-radius: 999px; background: #0a66c2; color: #fff; font-size: 11.5px; font-weight: 700; }
.dpz-li-react { display: flex; gap: 14px; margin-top: 11px; padding-top: 10px; border-top: 1px solid var(--c-border); font-size: 11px; color: var(--c-muted); }
.dpz-li-react span { display: inline-flex; align-items: center; gap: 4px; }
.dpz-li-react .bi-hand-thumbs-up-fill { color: #0a66c2; }
.dpz-li-aud { flex: none; align-self: center; width: 168px; background: #fff; border: 1px solid var(--c-border); border-radius: 14px; padding: 13px; display: flex; flex-direction: column; gap: 6px; box-shadow: 0 24px 50px -18px rgba(10,14,26,.3), 0 4px 12px rgba(10,14,26,.06); }
.dpz-li-aud-h { display: inline-flex; align-items: center; gap: 6px; font-size: 10.5px; font-weight: 800; color: var(--c-text); margin-bottom: 3px; }
.dpz-li-aud-h .bi-bullseye { color: var(--c-pink); }
.dpz-li-chip { font-size: 10px; font-weight: 600; color: var(--c-text); padding: 5px 9px; border-radius: 8px; background: color-mix(in srgb, var(--c-accent) 8%, #fff); border: 1px solid var(--c-border); opacity: 0; transform: translateX(-7px); animation: dpz-li-chip .5s ease-out both; }
.dpz-li-aud .dpz-li-chip:nth-child(2) { animation-delay: .25s; }
.dpz-li-aud .dpz-li-chip:nth-child(3) { animation-delay: .45s; }
.dpz-li-aud .dpz-li-chip:nth-child(4) { animation-delay: .65s; }
.dpz-li-aud .dpz-li-chip:nth-child(5) { animation-delay: .85s; }
.dpz-li-toast { position: absolute; left: 50%; bottom: -18px; transform: translateX(-50%); display: inline-flex; align-items: center; gap: 7px; background: #fff; border: 1px solid var(--c-border); border-radius: 12px; padding: 9px 14px; font-family: 'Urbanist', 'Outfit', sans-serif; font-size: 12px; font-weight: 800; color: #1f9d6b; box-shadow: 0 22px 46px -16px rgba(10,14,26,.3), 0 4px 12px rgba(10,14,26,.06); opacity: 0; animation: dpz-li-toast 6s ease-in-out infinite; }
.dpz-li-toast .bi-person-check-fill { color: #1f9d6b; }
@media (max-width: 1100px) { .dpz-li { transform: none; } }
@media (max-width: 560px) { .dpz-li { flex-direction: column; gap: 14px; } .dpz-li-aud { align-self: stretch; width: auto; } }
@keyframes dpz-li-chip { from { opacity: 0; transform: translateX(-7px); } to { opacity: 1; transform: translateX(0); } }
@keyframes dpz-li-toast { 0%, 16% { opacity: 0; transform: translateX(-50%) translateY(8px); } 30%, 80% { opacity: 1; transform: translateX(-50%) translateY(0); } 100% { opacity: 0; transform: translateX(-50%) translateY(8px); } }
@media (prefers-reduced-motion: reduce) {
.dpz-li-chip, .dpz-li-toast { animation: none; opacity: 1; transform: translateX(-50%); }
.dpz-li-chip { transform: none; }
}
/* IG reklam mini görselleri (§01) */
.dvi-target { position: relative; width: 56px; height: 56px; display: grid; place-items: center; }
.dvi-target i { position: absolute; border: 2px solid color-mix(in srgb, var(--tone) 35%, transparent); border-radius: 50%; }
.dvi-target i:nth-child(1) { width: 56px; height: 56px; }
.dvi-target i:nth-child(2) { width: 38px; height: 38px; }
.dvi-target i:nth-child(3) { width: 22px; height: 22px; }
.dvi-target b { width: 22px; height: 22px; border-radius: 50%; background: var(--tone); color: #fff; display: grid; place-items: center; font-size: .7rem; z-index: 1; }
.dvi-creative { width: 60px; display: flex; flex-direction: column; gap: 5px; }
.dvi-creative-img { height: 42px; border-radius: 9px; background: linear-gradient(140deg, var(--tone-soft), color-mix(in srgb, var(--c-lilac) 26%, #fff)); display: grid; place-items: center; font-size: 1.3rem; }
.dvi-creative-cta { height: 12px; border-radius: 5px; background: var(--tone); }
.dvi-formats { display: flex; gap: 8px; color: var(--tone-ink); font-size: 1.4rem; }
.dvi-ab { display: flex; gap: 8px; }
.dvi-ab span { width: 34px; height: 40px; border-radius: 10px; display: grid; place-items: center; font-family: 'Urbanist', 'Outfit', sans-serif; font-weight: 800; font-size: 1.05rem; }
.dvi-ab .a { background: var(--tone-soft); color: var(--tone-ink); border: 1px solid color-mix(in srgb, var(--tone) 30%, transparent); }
.dvi-ab .b { background: var(--tone); color: #fff; box-shadow: 0 6px 14px -6px color-mix(in srgb, var(--tone) 55%, transparent); }
.dvi-retarget { width: 52px; height: 52px; border-radius: 50%; background: var(--tone-soft); color: var(--tone-ink); display: grid; place-items: center; font-size: 1.7rem; }
.dvi-roas { display: flex; align-items: flex-end; gap: 7px; height: 56px; }
.dvi-roas i { width: 12px; height: var(--h); border-radius: 4px 4px 0 0; background: linear-gradient(180deg, var(--tone), color-mix(in srgb, var(--tone) 55%, #fff)); }
.dvi-roas i:last-child { background: linear-gradient(180deg, var(--tone-ink), var(--tone)); }
/* === e-ticaret · paket özellikleri (bento) === */
.dpz-bento {
--tone: var(--c-accent); --tone-soft: var(--c-accent-soft); --tone-ink: var(--c-accent-2);
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-auto-rows: 1fr;
gap: clamp(12px, 1.4vw, 18px);
margin-top: clamp(28px, 3vw, 40px);
}
.dpz-bento-feat, .dpz-bento-card {
background: #fff;
border: 1px solid var(--c-border);
border-radius: 18px;
opacity: 0; transform: translateY(16px);
transition: opacity .6s ease, transform .6s cubic-bezier(.2,.7,.3,1), border-color .25s ease, box-shadow .25s ease;
}
[data-anim].visible.dpz-bento-feat, [data-anim].visible.dpz-bento-card { opacity: 1; transform: none; }
.dpz-bento-feat:hover, .dpz-bento-card:hover {
border-color: color-mix(in srgb, var(--c-text) 16%, var(--c-border));
box-shadow: 0 20px 44px -24px rgba(10, 14, 26, .20);
transform: translateY(-4px);
}
.dpz-bento-ic {
display: inline-grid; place-items: center;
width: 46px; height: 46px;
border-radius: 13px;
background: var(--tone-soft); color: var(--tone-ink);
font-size: 1.3rem; margin-bottom: 15px;
transition: transform .3s cubic-bezier(.2,.8,.3,1);
}
.dpz-bento-feat:hover .dpz-bento-ic, .dpz-bento-card:hover .dpz-bento-ic { transform: translateY(-2px) rotate(-6deg); }
.dpz-bento h3 {
font-family: 'Urbanist', 'Outfit', 'Bricolage Grotesque', sans-serif;
font-weight: 700; letter-spacing: -.02em; color: var(--c-text);
margin: 0 0 8px;
}
.dpz-bento p { color: var(--c-muted); margin: 0; }
/* öne çıkan büyük kart */
.dpz-bento-feat {
grid-column: 1 / 3; grid-row: 1 / 3;
display: grid; grid-template-columns: 1.05fr .95fr;
gap: clamp(18px, 2.4vw, 32px);
align-items: center;
padding: clamp(22px, 2.6vw, 34px);
}
.dpz-bento-feat .dpz-bento-ic { width: 52px; height: 52px; font-size: 1.5rem; }
.dpz-bento-feat h3 { font-size: clamp(1.3rem, 2vw, 1.7rem); }
.dpz-bento-feat p { font-size: 1rem; line-height: 1.65; margin-bottom: 16px; }
.dpz-bento-checks { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; }
.dpz-bento-checks li { display: flex; align-items: center; gap: 9px; font-size: .95rem; font-weight: 600; color: var(--c-text); }
.dpz-bento-checks i {
flex: none; width: 20px; height: 20px; border-radius: 50%;
display: grid; place-items: center; font-size: .7rem;
background: color-mix(in srgb, var(--c-mint) 40%, #fff); color: #1f8a5f;
}
/* mini mağaza görseli */
.dpz-bento-feat-art { display: grid; place-items: center; }
.dpz-mini-store {
width: 100%; max-width: 220px;
background: #fff; border: 1px solid var(--c-border); border-radius: 16px;
overflow: hidden;
box-shadow: 0 22px 50px -24px color-mix(in srgb, var(--c-accent) 45%, transparent);
transform: rotate(2deg);
transition: transform .35s ease;
}
.dpz-bento-feat:hover .dpz-mini-store { transform: rotate(0); }
.dpz-mini-img {
position: relative;
height: 96px;
display: grid; place-items: center;
background: linear-gradient(135deg, var(--c-accent-soft), color-mix(in srgb, var(--c-lilac) 30%, #fff));
color: var(--c-accent-2); font-size: 2.2rem;
}
.dpz-mini-off {
position: absolute; top: 10px; left: 10px;
background: var(--c-pink); color: #fff;
font-size: 11px; font-weight: 800; border-radius: 7px; padding: 3px 8px;
}
.dpz-mini-body { padding: 12px 13px 14px; }
.dpz-mini-name { font-size: 12.5px; font-weight: 600; color: var(--c-text); }
.dpz-mini-stars { color: var(--c-yellow); font-size: 10px; margin: 5px 0 6px; letter-spacing: 1px; }
.dpz-mini-price { font-family: 'Urbanist', 'Outfit', sans-serif; font-weight: 800; color: var(--c-text); font-size: 1.05rem; }
.dpz-mini-price small { font-weight: 500; font-size: .8rem; color: #9aa3b2; text-decoration: line-through; margin-left: 4px; }
.dpz-mini-btn {
display: flex; align-items: center; justify-content: center; gap: 7px;
margin-top: 10px; padding: 9px;
background: var(--c-accent); color: #fff;
border-radius: 9px; font-size: 12.5px; font-weight: 700;
}
/* küçük özellik kartları */
.dpz-bento-card { padding: 20px; display: flex; flex-direction: column; }
.dpz-bento-card h3 { font-size: 1.06rem; }
.dpz-bento-card p { font-size: .92rem; line-height: 1.55; }
.dpz-bento-incl {
margin-top: auto; padding-top: 14px;
display: inline-flex; align-items: center; gap: 6px;
font-family: 'JetBrains Mono', ui-monospace, monospace;
font-size: 10.5px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase;
color: #1f9d6b;
}
.dpz-bento-incl i { font-size: .9rem; }
@media (max-width: 900px) {
.dpz-bento { grid-template-columns: repeat(2, 1fr); grid-auto-rows: auto; }
.dpz-bento-feat { grid-column: 1 / 3; grid-row: auto; }
}
@media (max-width: 600px) {
.dpz-bento { grid-template-columns: 1fr; }
.dpz-bento-feat { grid-column: 1; grid-template-columns: 1fr; }
.dpz-bento-feat-art { order: -1; }
.dpz-mini-store { transform: none; max-width: 200px; }
}
@media (prefers-reduced-motion: reduce) {
.dpz-bento-feat, .dpz-bento-card { opacity: 1; transform: none; }
}
/* === logo · teslimat kartları (mini önizlemeli) === */
.dpz-deliv-grid {
--tone: var(--c-accent); --tone-soft: var(--c-accent-soft); --tone-ink: var(--c-accent-2);
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: clamp(14px, 1.6vw, 20px);
margin-top: clamp(28px, 3vw, 40px);
}
.dpz-deliv {
display: flex; flex-direction: column;
background: #fff;
border: 1px solid var(--c-border);
border-radius: 18px;
overflow: hidden;
opacity: 0; transform: translateY(16px);
transition: opacity .6s ease, transform .6s cubic-bezier(.2,.7,.3,1), border-color .25s ease, box-shadow .25s ease;
}
[data-anim].visible.dpz-deliv { opacity: 1; transform: none; }
.dpz-deliv:hover {
border-color: color-mix(in srgb, var(--c-text) 16%, var(--c-border));
box-shadow: 0 22px 46px -24px rgba(10, 14, 26, .20);
transform: translateY(-4px);
}
.dpz-deliv-art {
height: 118px;
display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 9px;
background: linear-gradient(160deg, var(--tone-soft), #fff 90%);
color: var(--tone-ink);
border-bottom: 1px solid var(--c-border);
}
.dpz-deliv-body { padding: 18px 20px 18px; display: flex; flex-direction: column; flex: 1; }
.dpz-deliv-body h3 { font-family: 'Urbanist', 'Outfit','Bricolage Grotesque',sans-serif; font-size: 1.08rem; font-weight: 700; letter-spacing: -.02em; color: var(--c-text); margin: 0 0 7px; }
.dpz-deliv-body p { font-size: .92rem; line-height: 1.55; color: var(--c-muted); margin: 0; }
.dpz-deliv-incl {
margin-top: auto; padding-top: 14px;
display: inline-flex; align-items: center; gap: 6px;
font-family: 'JetBrains Mono', ui-monospace, monospace;
font-size: 10.5px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase;
color: #1f9d6b;
}
.dpz-deliv-incl i { font-size: .9rem; }
/* mini önizlemeler */
.dvm-mk { width: 48px; height: 48px; }
.dvm-tags { display: flex; gap: 5px; }
.dvm-tags i { width: 20px; height: 9px; border-radius: 3px; background: color-mix(in srgb, var(--tone) 28%, #fff); }
.dvm-tags i:first-child { background: var(--tone); width: 26px; }
.dvm-ct { display: flex; gap: 5px; }
.dvm-sw { width: 17px; height: 32px; border-radius: 5px; box-shadow: inset 0 0 0 1px rgba(10,14,26,.05); }
.dvm-sw.s1 { background: var(--tone); }
.dvm-sw.s2 { background: var(--tone-soft); }
.dvm-sw.s3 { background: #0e1830; }
.dvm-sw.s4 { background: #e7eef5; }
.dvm-aa { font-family: 'Urbanist', 'Outfit', sans-serif; font-weight: 800; font-size: 1.35rem; color: var(--c-text); letter-spacing: -.02em; }
.dvm-doc { width: 60px; height: 76px; background: #fff; border: 1px solid var(--c-border); border-radius: 8px; padding: 9px; display: flex; flex-direction: column; gap: 6px; box-shadow: 0 8px 18px -10px rgba(10,14,26,.18); }
.dvm-doc-h { height: 15px; width: 62%; border-radius: 4px; background: var(--tone); }
.dvm-doc i { height: 5px; border-radius: 3px; background: var(--c-border); }
.dvm-doc i.sh { width: 60%; }
.dvm-bc { width: 88px; height: 54px; background: #fff; border: 1px solid var(--c-border); border-radius: 8px; padding: 11px; display: flex; flex-direction: column; gap: 7px; transform: rotate(-5deg); box-shadow: 0 10px 22px -10px rgba(10,14,26,.2); }
.dvm-bc-mk { width: 16px; height: 16px; border-radius: 5px; background: var(--tone); }
.dvm-bc i { height: 5px; border-radius: 3px; background: var(--c-border); }
.dvm-bc i.sh { width: 50%; }
.dvm-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 5px; width: 68px; }
.dvm-grid b { aspect-ratio: 1; border-radius: 5px; background: var(--tone-soft); }
.dvm-grid b:nth-child(1), .dvm-grid b:nth-child(5), .dvm-grid b:nth-child(9) { background: var(--tone); }
.dvm-grid b:nth-child(3), .dvm-grid b:nth-child(7) { background: color-mix(in srgb, var(--tone) 45%, #fff); }
.dvm-shirt { width: 64px; height: 64px; }
/* SEO mini görselleri (organik trafik §01) */
.dvs-audit { display: flex; flex-direction: column; gap: 8px; width: 118px; }
.dvs-row { display: flex; align-items: center; gap: 9px; }
.dvs-row i { color: #1f9d6b; font-size: 1rem; flex: none; }
.dvs-row b { height: 7px; border-radius: 4px; background: color-mix(in srgb, var(--tone) 28%, var(--c-border)); flex: 1; }
.dvs-row b.sh { flex: .6; }
.dvs-search { display: inline-flex; align-items: center; gap: 8px; background: #fff; border: 1px solid var(--c-border); border-radius: 999px; padding: 9px 15px; box-shadow: 0 6px 16px -8px rgba(10,14,26,.18); }
.dvs-search i { color: var(--c-muted); font-size: .9rem; }
.dvs-kw { font-size: 13px; font-weight: 600; color: var(--c-text); }
.dvs-cur { width: 2px; height: 15px; background: var(--tone); border-radius: 1px; animation: dpz-blink 1s steps(1) infinite; }
.dvs-rank { margin-top: 9px; font-family: 'Urbanist', 'Outfit', sans-serif; font-weight: 800; font-size: 12px; color: #fff; background: var(--tone-ink); border-radius: 6px; padding: 2px 8px; }
.dvs-net { width: 110px; height: 58px; }
.dvs-net line { stroke: color-mix(in srgb, var(--tone) 40%, transparent); stroke-width: 2.5; }
.dvs-net circle { fill: var(--tone-ink); }
.dvs-gauge { position: relative; display: grid; place-items: center; }
.dvs-gauge svg { width: 96px; height: 56px; }
.dvs-gauge .bg { fill: none; stroke: color-mix(in srgb, var(--c-text) 9%, transparent); stroke-width: 9; stroke-linecap: round; }
.dvs-gauge .fg { fill: none; stroke: #1f9d6b; stroke-width: 9; stroke-linecap: round; }
.dvs-gauge b { position: absolute; bottom: 0; font-family: 'Urbanist', 'Outfit', sans-serif; font-weight: 800; font-size: 1.05rem; color: var(--c-text); }
.dvs-gauge b small { font-size: .7rem; font-weight: 600; color: var(--c-muted); }
.dvs-map { position: relative; width: 92px; height: 70px; border-radius: 10px; background: #eef5fb; background-image: linear-gradient(90deg, transparent 47%, rgba(10,14,26,.07) 47% 53%, transparent 53%), linear-gradient(0deg, transparent 60%, rgba(10,14,26,.07) 60% 66%, transparent 66%); display: grid; place-items: center; overflow: hidden; }
.dvs-map i { font-size: 1.9rem; color: var(--tone-ink); filter: drop-shadow(0 4px 6px color-mix(in srgb, var(--tone) 45%, transparent)); }
.dvs-chart { display: flex; align-items: flex-end; gap: 7px; height: 56px; }
.dvs-chart i { width: 12px; height: var(--h); border-radius: 4px 4px 0 0; background: linear-gradient(180deg, var(--tone), color-mix(in srgb, var(--tone) 55%, #fff)); }
.dvs-chart i:last-child { background: linear-gradient(180deg, var(--tone-ink), var(--tone)); }
/* QR menü mini görselleri (§01) */
.dvq-price { display: inline-flex; align-items: center; gap: 8px; }
.dvq-price b { font-family: 'Urbanist', 'Outfit', sans-serif; font-weight: 800; font-size: 1.25rem; color: var(--c-muted); text-decoration: line-through; text-decoration-color: color-mix(in srgb, var(--c-muted) 60%, transparent); }
.dvq-price i { color: var(--tone-ink); font-size: 1.2rem; }
.dvq-price b.up { color: var(--tone-ink); text-decoration: none; }
.dvq-dish { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.dvq-photo { width: 52px; height: 52px; border-radius: 13px; background: var(--tone-soft); display: grid; place-items: center; font-size: 1.7rem; }
.dvq-langs { display: flex; gap: 5px; }
.dvq-langs i { font-style: normal; font-size: 9px; font-weight: 700; color: var(--tone-ink); background: var(--tone-soft); border-radius: 5px; padding: 2px 6px; }
.dvq-tap { position: relative; display: grid; place-items: center; color: var(--tone-ink); }
.dvq-tap > .bi-phone { font-size: 2.6rem; }
.dvq-tap-qr { position: absolute; right: -10px; bottom: -4px; font-size: 1.1rem; background: #fff; border-radius: 6px; padding: 2px; box-shadow: 0 4px 10px rgba(10,14,26,.12); }
.dvq-promo { position: relative; width: 96px; display: flex; flex-direction: column; gap: 7px; background: #fff; border: 1px solid var(--c-border); border-radius: 10px; padding: 12px; box-shadow: 0 8px 18px -10px rgba(10,14,26,.16); }
.dvq-promo u { height: 7px; border-radius: 4px; background: color-mix(in srgb, var(--c-text) 12%, transparent); }
.dvq-promo u.sh { width: 60%; }
.dvq-promo-badge { position: absolute; top: -9px; right: -9px; font-size: 11px; font-weight: 800; color: #fff; background: var(--c-pink); border-radius: 999px; padding: 3px 8px; box-shadow: 0 4px 10px color-mix(in srgb, var(--c-pink) 40%, transparent); }
.dvq-table { display: flex; flex-direction: column; align-items: center; gap: 6px; color: var(--c-text); }
.dvq-table i { font-size: 2.5rem; color: var(--tone-ink); }
.dvq-table b { font-size: 11px; font-weight: 700; background: var(--tone-soft); color: var(--tone-ink); border-radius: 6px; padding: 2px 9px; }
.dvq-chart { display: flex; align-items: flex-end; gap: 7px; height: 56px; }
.dvq-chart i { width: 12px; height: var(--h); border-radius: 4px 4px 0 0; background: linear-gradient(180deg, var(--tone), color-mix(in srgb, var(--tone) 55%, #fff)); }
.dvq-chart i:nth-child(4) { background: linear-gradient(180deg, var(--tone-ink), var(--tone)); }
/* Google Maps mini görselleri (§01) */
.dvg-prof { display: flex; align-items: center; gap: 9px; background: #fff; border: 1px solid var(--c-border); border-radius: 12px; padding: 11px 13px; box-shadow: 0 8px 18px -10px rgba(10,14,26,.16); }
.dvg-prof-logo { width: 32px; height: 32px; border-radius: 9px; background: linear-gradient(135deg, var(--tone), color-mix(in srgb, var(--tone) 55%, #7c5cd6)); color: #fff; display: grid; place-items: center; font-family: 'Urbanist', 'Outfit', sans-serif; font-weight: 800; font-size: .95rem; }
.dvg-prof-lines { display: flex; flex-direction: column; gap: 4px; }
.dvg-prof-lines b { width: 54px; height: 7px; border-radius: 4px; background: color-mix(in srgb, var(--c-text) 16%, transparent); }
.dvg-prof-stars { font-size: 9px; color: var(--c-yellow); letter-spacing: 1px; }
.dvg-prof-ok { color: var(--tone-ink); font-size: 1rem; }
.dvg-rank { display: flex; flex-direction: column; gap: 5px; width: 116px; }
.dvg-rank span { display: flex; align-items: center; gap: 8px; background: #fff; border: 1px solid var(--c-border); border-radius: 8px; padding: 6px 8px; }
.dvg-rank span b { width: 16px; height: 16px; border-radius: 5px; background: color-mix(in srgb, var(--c-text) 8%, transparent); color: var(--c-muted); font-size: 9px; font-weight: 800; display: grid; place-items: center; flex: none; }
.dvg-rank span u { flex: 1; height: 5px; border-radius: 3px; background: var(--c-border); }
.dvg-rank span .bi-geo-alt-fill { color: var(--tone-ink); font-size: .8rem; margin-left: auto; }
.dvg-rank span.on { border-color: color-mix(in srgb, var(--tone) 45%, var(--c-border)); background: var(--tone-soft); }
.dvg-rank span.on b { background: var(--tone); color: #fff; }
.dvg-rank span.on u { background: color-mix(in srgb, var(--tone) 35%, #fff); }
.dvg-rev { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.dvg-stars { font-size: 1.1rem; color: var(--c-yellow); letter-spacing: 2px; }
.dvg-bubble { width: 88px; background: #fff; border: 1px solid var(--c-border); border-radius: 10px 10px 10px 2px; padding: 9px; display: flex; flex-direction: column; gap: 5px; box-shadow: 0 6px 14px -8px rgba(10,14,26,.16); }
.dvg-bubble i { height: 5px; border-radius: 3px; background: color-mix(in srgb, var(--tone) 30%, var(--c-border)); }
.dvg-bubble i.sh { width: 60%; }
.dvg-photos { display: grid; grid-template-columns: repeat(2, 1fr); gap: 5px; }
.dvg-photos i { width: 28px; height: 28px; border-radius: 8px; background: var(--tone-soft); display: grid; place-items: center; font-size: .95rem; }
.dvg-multi { position: relative; width: 100px; height: 64px; border-radius: 10px; background: #e8eef0; overflow: hidden; }
.dvg-multi::before { content: ""; position: absolute; left: -10%; right: -10%; top: 50%; height: 8px; background: #fff; transform: rotate(-8deg); }
.dvg-multi i { position: absolute; left: var(--x); top: var(--y); transform: translate(-50%, -100%); color: var(--tone-ink); font-size: 1.2rem; filter: drop-shadow(0 3px 4px color-mix(in srgb, var(--tone) 40%, transparent)); }
.dvg-calls { display: flex; align-items: flex-end; gap: 7px; height: 56px; }
.dvg-calls i { width: 12px; height: var(--h); border-radius: 4px 4px 0 0; background: linear-gradient(180deg, var(--tone), color-mix(in srgb, var(--tone) 55%, #fff)); }
.dvg-calls i:last-child { background: linear-gradient(180deg, var(--tone-ink), var(--tone)); }
@media (max-width: 900px) { .dpz-deliv-grid { grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (max-width: 560px) { .dpz-deliv-grid { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: reduce) { .dpz-deliv { opacity: 1; transform: none; } }
/* === süreç boru hattı (pipeline) === */
.dpz-pipe {
list-style: none;
margin: clamp(34px, 4vw, 52px) 0 6px;
padding: 0;
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: clamp(16px, 2vw, 30px);
position: relative;
}
.dpz-pipe::before {
content: "";
position: absolute;
top: 27px;
left: 8%; right: 8%;
height: 3px;
border-radius: 3px;
background: var(--c-border);
}
.dpz-pipe::after {
content: "";
position: absolute;
top: 27px;
left: 8%;
height: 3px;
width: 0;
border-radius: 3px;
background: linear-gradient(90deg, var(--c-pink), #7c5cd6 55%, var(--c-accent));
transition: width 1.6s cubic-bezier(.3,.7,.3,1) .2s;
}
.dpz-pipe.visible::after, .abx-sec .ar-block.visible .dpz-pipe::after { width: 84%; }
.dpz-pipe-step {
--tone: var(--c-accent);
--tone-soft: var(--c-accent-soft);
position: relative;
z-index: 1;
text-align: center;
opacity: 0;
transform: translateY(16px);
transition: opacity .6s ease, transform .6s cubic-bezier(.2,.7,.3,1);
}
[data-anim].visible.dpz-pipe-step { opacity: 1; transform: none; }
.dpz-pipe-node {
position: relative;
display: grid;
place-items: center;
width: 56px; height: 56px;
margin: 0 auto 18px;
border-radius: 17px;
background: #fff;
border: 2px solid var(--tone);
color: var(--tone-ink);
font-size: 1.35rem;
box-shadow: 0 10px 24px -10px color-mix(in srgb, var(--tone) 60%, transparent);
}
.dpz-pipe-num {
position: absolute;
top: -9px; right: -9px;
min-width: 22px; height: 22px;
padding: 0 5px;
border-radius: 11px;
background: var(--tone);
color: #fff;
font-family: 'JetBrains Mono', ui-monospace, monospace;
font-size: 10px;
font-weight: 700;
display: grid;
place-items: center;
border: 2px solid #fff;
}
.dpz-pipe-card {
background: #fff;
border: 1px solid var(--c-border);
border-radius: 14px;
padding: 18px 18px 20px;
text-align: left;
height: 100%;
transition: border-color .25s ease, box-shadow .25s ease, transform .25s ease;
}
.dpz-pipe-step:hover .dpz-pipe-card {
border-color: color-mix(in srgb, var(--tone) 40%, var(--c-border));
box-shadow: 0 18px 40px -22px color-mix(in srgb, var(--tone) 55%, transparent);
transform: translateY(-3px);
}
.dpz-pipe-tag {
display: inline-block;
font-family: 'JetBrains Mono', ui-monospace, monospace;
font-size: 10.5px;
font-weight: 600;
letter-spacing: .1em;
text-transform: uppercase;
color: var(--tone-ink);
margin-bottom: 8px;
}
.dpz-pipe-card h3 {
font-family: 'Urbanist', 'Outfit', sans-serif;
font-size: 1.08rem;
font-weight: 700;
letter-spacing: -.02em;
color: var(--c-text);
margin: 0 0 8px;
line-height: 1.2;
}
.dpz-pipe-card p { font-size: .9rem; line-height: 1.6; color: var(--c-muted); margin: 0; }
.dpz-pipe--pink { --tone: var(--c-pink); --tone-ink: var(--c-pink); }
.dpz-pipe--mint { --tone: #1f9d6b; --tone-ink: #1f9d6b; }
.dpz-pipe--lilac { --tone: #7c5cd6; --tone-ink: #7c5cd6; }
.dpz-pipe--yellow { --tone: #b07d00; --tone-ink: #b07d00; }
/* SEO prose + faq */
/* Uzun SEO içerik bloğu scroll-reveal'a bağlı KALMASIN — sayfaya girer girmez görünür
(opacity:0 ile gizlenip aşağı kaydırınca gelmesi okuma + SEO için kötüydü) */
.dpz-prose-frame[data-anim] { opacity: 1; transform: none; }
.dpz-prose-frame .dx-corner { opacity: 1; transform: scale(1); }
.dpz-prose-frame { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(260px, 1fr); gap: clamp(32px, 4vw, 64px); align-items: start; }
.dpz-prose { min-width: 0; }
.dpz-prose > h3 {
font-family: 'Urbanist', 'Outfit', 'Bricolage Grotesque', sans-serif;
font-size: clamp(1.25rem, 2vw, 1.55rem);
font-weight: 700;
letter-spacing: -.02em;
color: var(--c-text);
margin: 34px 0 11px;
scroll-margin-top: 90px;
}
.dpz-prose > h3:first-child { margin-top: 0; }
.dpz-prose p { font-size: 1.02rem; line-height: 1.78; color: var(--c-muted); margin: 0 0 15px; }
.dpz-prose .dpz-prose-lead { font-size: 1.12rem; line-height: 1.7; color: var(--c-text); margin: 0 0 22px; padding-bottom: 20px; border-bottom: 1px solid var(--c-border); }
.dpz-prose strong { color: var(--c-text); font-weight: 600; }
.dpz-prose a { color: var(--c-accent-2); font-weight: 600; text-decoration: underline; text-underline-offset: 2px; text-decoration-thickness: 1px; text-decoration-color: color-mix(in srgb, var(--c-accent-2) 40%, transparent); transition: text-decoration-color .2s ease; }
.dpz-prose a:hover { text-decoration-color: var(--c-accent-2); }
.dpz-list { list-style: none; margin: 4px 0 0; padding: 0; display: grid; gap: 10px; }
.dpz-list li {
position: relative;
padding-left: 28px;
font-size: .98rem;
line-height: 1.55;
color: var(--c-muted);
}
.dpz-list li::before {
content: "\F26E";
font-family: "bootstrap-icons";
position: absolute;
left: 0; top: 1px;
color: var(--c-accent);
font-size: 1.05rem;
}
.dpz-faq {
position: sticky;
top: calc(var(--header-h, 72px) + 20px);
}
.dpz-faq-title {
font-family: 'Urbanist', 'Outfit', sans-serif;
font-size: clamp(1.25rem, 2vw, 1.55rem);
font-weight: 700;
color: var(--c-text);
margin: 0 0 18px;
letter-spacing: -.02em;
}
.dpz-faq-item {
border: 1px solid var(--c-border);
border-radius: 14px;
background: #fff;
padding: 0 18px;
margin-bottom: 10px;
transition: border-color var(--transition);
}
.dpz-faq-item[open] { border-color: color-mix(in srgb, var(--c-accent) 40%, var(--c-border)); }
.dpz-faq-item summary {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
padding: 15px 0;
cursor: pointer;
list-style: none;
font-weight: 600;
font-size: .98rem;
color: var(--c-text);
}
.dpz-faq-item summary::-webkit-details-marker { display: none; }
.dpz-faq-item summary i {
flex: none;
color: var(--c-accent);
transition: transform .3s ease;
}
.dpz-faq-item[open] summary i { transform: rotate(45deg); }
.dpz-faq-item p {
margin: 0;
padding: 0 0 16px;
font-size: .95rem;
line-height: 1.65;
color: var(--c-muted);
}
@media (max-width: 980px) {
.dpz-pipe { grid-template-columns: 1fr 1fr; gap: clamp(24px, 4vw, 32px); }
.dpz-pipe::before, .dpz-pipe::after { display: none; }
}
@media (max-width: 900px) {
.dpz-hero-wrap { grid-template-columns: 1fr; gap: clamp(36px, 8vw, 52px); }
.dpz-visual { max-width: 560px; }
.dpz-svc-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.dpz-prose-frame { grid-template-columns: 1fr; }
.dpz-faq {
position: static;
margin-top: clamp(34px, 5vw, 48px);
padding-top: clamp(28px, 4vw, 40px);
border-top: 1px solid var(--c-border);
}
}
@media (max-width: 560px) {
.dpz-svc-grid { grid-template-columns: 1fr; }
.dpz-pipe { grid-template-columns: 1fr; }
.dpz-cc-grid {
grid-template-columns: 1fr 1fr;
grid-template-areas:
"main main"
"mini1 mini2"
"chan chan"
"log log";
}
}
@media (prefers-reduced-motion: reduce) {
.dpz-visual, .dpz-svc, .dpz-pipe-step { opacity: 1; transform: none; }
.dpz-cc-spark-line { stroke-dashoffset: 0; animation: none; }
.dpz-cc-spark-area { opacity: 1; }
.dpz-cc-track i, .dpz-svc-bars i { transition: none; transform: scaleY(1); }
.dpz-pipe::after { width: 84%; transition: none; }
.dpz-cc-livedot, .dpz-cc-caret { animation: none; }
}
.ar-step-tag {
font-family: 'JetBrains Mono', ui-monospace, monospace;
font-size: 11px;
font-weight: 600;
color: #94a3b8;
letter-spacing: 0.12em;
text-transform: uppercase;
margin-top: 0;
}
.ar-step-t {
font-family: 'Urbanist', 'Outfit', 'Bricolage Grotesque', sans-serif;
font-size: clamp(1.6rem, 2.4vw, 2.2rem);
font-weight: 800;
line-height: 1.0;
letter-spacing: -0.015em;
color: var(--c-text);
margin: 0;
}
/* Masaüstü: başlıkta zorla satır kır (eski 2-satır editöryal görünüm) */
.ar-step-t .ar-stbr { display: block; }
.ar-step-d {
font-family: 'Urbanist', 'Outfit', sans-serif;
font-size: 14.5px;
line-height: 1.6;
color: var(--c-muted);
margin: 0;
max-width: 36ch;
}
/* ────────────── PLATFORMS — yan yana, evidence board ────────────── */
.ar-plats {
display: grid;
grid-template-columns: 1fr 1fr;
gap: clamp(32px, 4vw, 64px);
align-items: start;
}
.ar-plat {
position: relative;
display: flex;
flex-direction: column;
gap: clamp(24px, 3vw, 40px);
min-width: 0;
}
/* HEAD: minik etiket + DEV başlık + lead */
.ar-plat-head {
display: flex;
flex-direction: column;
gap: 14px;
max-width: 880px;
}
.ar-plat-label {
font-family: 'JetBrains Mono', ui-monospace, monospace;
font-size: 11px;
font-weight: 700;
letter-spacing: 0.22em;
text-transform: uppercase;
color: var(--c-accent);
display: inline-flex;
align-items: center;
gap: 12px;
align-self: flex-start;
}
.ar-plat-label::before {
content: "";
width: 28px;
height: 2px;
background: var(--c-accent);
}
.ar-plat-meta .ar-plat-label { color: #7d5fc3; }
.ar-plat-meta .ar-plat-label::before { background: var(--c-lilac); }
.ar-plat-google .ar-plat-label { color: #2f9b73; }
.ar-plat-google .ar-plat-label::before { background: var(--c-mint); }
.ar-plat-title {
font-family: 'Urbanist', 'Outfit', sans-serif;
font-size: clamp(2.2rem, 4vw, 3.6rem);
font-weight: 900;
letter-spacing: -0.018em;
line-height: 0.95;
color: var(--c-text);
margin: 0;
text-wrap: balance;
}
.ar-plat-title em {
font-style: italic;
font-weight: 400;
color: var(--c-accent);
font-family: 'Bricolage Grotesque', 'DM Sans', sans-serif;
}
.ar-plat-meta .ar-plat-title em { color: #7d5fc3; }
.ar-plat-google .ar-plat-title em { color: #2f9b73; }
.ar-plat-lead {
font-family: 'Urbanist', 'Outfit', sans-serif;
font-size: clamp(16px, 1.2vw, 19px);
line-height: 1.55;
color: var(--c-muted);
margin: 0;
max-width: 64ch;
}
/* =============================================================
AR-CASES — flat editorial chronicle (yeni tasarım)
============================================================= */
.ar-cases {
list-style: none;
margin: clamp(24px, 3vw, 40px) 0 0;
padding: 0;
border-top: 1px solid rgba(10, 14, 26, 0.12);
}
.ar-case {
display: grid;
grid-template-columns: 84px 1fr auto;
gap: clamp(20px, 2.5vw, 36px);
align-items: start;
padding: clamp(22px, 2.6vw, 32px) clamp(8px, 1vw, 16px);
border-bottom: 1px solid rgba(10, 14, 26, 0.12);
position: relative;
transition: background 0.35s ease, padding-left 0.35s ease;
}
.ar-case::before {
content: "";
position: absolute;
top: 0;
bottom: 0;
left: 0;
width: 0;
background: var(--c-accent);
transition: width 0.35s cubic-bezier(.2, .7, .2, 1);
}
.ar-case:hover {
background: linear-gradient(90deg, rgba(225, 243, 251, 0.55) 0%, transparent 80%);
}
.ar-case:hover::before { width: 3px; }
.ar-case:hover .ar-case-no { color: var(--c-text); }
.ar-case-no {
font-family: 'JetBrains Mono', ui-monospace, monospace;
font-size: 13px;
font-weight: 700;
letter-spacing: 0.16em;
color: var(--c-accent);
padding-top: 5px;
transition: color 0.35s ease;
}
.ar-case-body { min-width: 0; }
.ar-case-t {
font-family: 'Urbanist', 'Outfit', sans-serif;
font-size: clamp(17px, 1.3vw, 20px);
font-weight: 700;
letter-spacing: -0.015em;
color: var(--c-text);
margin: 0 0 8px;
line-height: 1.25;
}
.ar-case-d {
font-family: 'Urbanist', 'Outfit', sans-serif;
font-size: 14.5px;
line-height: 1.65;
color: var(--c-muted);
margin: 0;
max-width: 62ch;
}
.ar-case-status {
display: inline-flex;
align-items: center;
gap: 7px;
padding: 6px 12px 6px 10px;
background: rgba(155, 231, 196, 0.16);
border: 1px solid rgba(31, 125, 86, 0.22);
border-radius: 100px;
font-family: 'JetBrains Mono', ui-monospace, monospace;
font-size: 10px;
font-weight: 700;
letter-spacing: 0.2em;
text-transform: uppercase;
color: #1f7d56;
align-self: center;
white-space: nowrap;
user-select: none;
}
.ar-case-status-dot {
width: 6px;
height: 6px;
background: #1f7d56;
border-radius: 50%;
flex-shrink: 0;
}
@media (max-width: 720px) {
.ar-case {
grid-template-columns: 1fr;
gap: 10px;
padding: 18px 12px;
}
.ar-case-status { justify-self: start; }
.ar-case-no { padding-top: 0; }
}
/* BOARD — eski eğik kasa dosyası kartları (kullanılmıyor) */
.ar-board {
display: flex;
flex-direction: column;
gap: clamp(18px, 2vw, 28px);
padding: clamp(16px, 2vw, 32px) 0;
position: relative;
}
.ar-board::before {
/* arkada nokta pattern — duvar hissi */
content: "";
position: absolute;
inset: -20px;
background-image: radial-gradient(rgba(10, 14, 26, 0.08) 1px, transparent 1px);
background-size: 18px 18px;
-webkit-mask-image: radial-gradient(ellipse at center, #000 30%, transparent 75%);
mask-image: radial-gradient(ellipse at center, #000 30%, transparent 75%);
opacity: 0.4;
z-index: -1;
pointer-events: none;
}
.ar-note {
position: relative;
padding: clamp(24px, 2.4vw, 36px);
background: #ffffff;
border-radius: 4px;
display: flex;
flex-direction: column;
gap: 12px;
box-shadow:
0 1px 1px rgba(10, 14, 26, 0.04),
0 18px 32px -16px rgba(10, 14, 26, 0.14),
0 28px 60px -28px rgba(10, 14, 26, 0.10);
cursor: default;
isolation: isolate;
transition: transform .55s cubic-bezier(.2,.7,.2,1), box-shadow .45s ease;
transform-origin: center;
}
/* Köşe pin/zımba — sahte tahta hissi */
.ar-note::before {
content: "";
position: absolute;
top: -6px;
left: 50%;
transform: translateX(-50%);
width: 14px;
height: 14px;
border-radius: 50%;
background: radial-gradient(circle at 35% 35%, #ffd23f, #c79a18 80%);
box-shadow:
0 1px 0 rgba(0,0,0,0.18),
0 4px 8px rgba(10,14,26,0.18);
z-index: 2;
}
/* Kart renkleri — pastel rotasyon */
.ar-note-c1 {
background: var(--c-lilac);
transform: rotate(-1.8deg);
}
.ar-note-c2 {
background: #ffffff;
transform: rotate(1.4deg);
}
.ar-note-c3 {
background: var(--c-mint);
transform: rotate(-0.8deg);
}
.ar-note-c4 {
background: var(--c-yellow);
transform: rotate(2deg);
}
.ar-note:hover {
transform: rotate(0deg) translateY(-6px) scale(1.02);
box-shadow:
0 1px 1px rgba(10, 14, 26, 0.06),
0 28px 52px -16px rgba(10, 14, 26, 0.22),
0 48px 96px -32px rgba(10, 14, 26, 0.18);
z-index: 5;
}
.ar-note-tag {
font-family: 'JetBrains Mono', ui-monospace, monospace;
font-size: 10.5px;
font-weight: 700;
letter-spacing: 0.18em;
text-transform: uppercase;
color: rgba(10, 14, 26, 0.55);
display: inline-flex;
align-items: center;
gap: 8px;
align-self: flex-start;
}
.ar-note-tag::after {
content: "";
width: 24px;
height: 1px;
background: rgba(10, 14, 26, 0.30);
}
.ar-note-t {
font-family: 'Urbanist', 'Outfit', sans-serif;
font-size: clamp(18px, 1.4vw, 22px);
font-weight: 800;
letter-spacing: -0.022em;
line-height: 1.15;
color: var(--c-text);
margin: 0;
max-width: 22ch;
}
.ar-note-d {
font-family: 'Urbanist', 'Outfit', sans-serif;
font-size: clamp(13px, 0.95vw, 14.5px);
line-height: 1.55;
color: rgba(10, 14, 26, 0.72);
margin: 0;
}
/* Caveat el yazısı damga — köşede */
.ar-note-stamp {
position: absolute;
bottom: 14px;
right: 16px;
font-family: 'Caveat', cursive;
font-size: clamp(28px, 2.6vw, 38px);
font-weight: 700;
line-height: 1;
color: var(--c-accent);
transform: rotate(-8deg);
opacity: 0.65;
pointer-events: none;
text-shadow: 0 1px 0 rgba(255,255,255,0.4);
transition: opacity .35s ease, transform .45s cubic-bezier(.2,.7,.2,1);
user-select: none;
}
.ar-note-stamp::before {
content: "» ";
font-size: 0.7em;
color: inherit;
margin-right: 2px;
}
.ar-note-stamp::after {
content: " ✓";
font-family: 'Urbanist', 'Outfit', sans-serif;
font-size: 0.55em;
font-weight: 700;
color: inherit;
margin-left: 2px;
}
.ar-note:hover .ar-note-stamp {
opacity: 1;
transform: rotate(-12deg) scale(1.1);
}
.ar-note-c2 .ar-note-stamp { color: var(--c-accent); }
.ar-note-c1 .ar-note-stamp { color: #5a3fa8; }
.ar-note-c3 .ar-note-stamp { color: #1f7d56; }
.ar-note-c4 .ar-note-stamp { color: #a86e0a; }
/* ────────────── CTA STRIP ────────────── */
.ar-cta-strip {
display: grid;
grid-template-columns: auto 1fr;
align-items: center;
gap: clamp(40px, 5vw, 80px);
padding: clamp(48px, 5vw, 72px) clamp(40px, 4vw, 64px);
background:
radial-gradient(700px 360px at 100% 100%, rgba(31, 167, 232, 0.08), transparent 70%),
linear-gradient(135deg, #ffffff 0%, #f6fbfe 100%);
border: 1px solid rgba(10, 14, 26, 0.08);
border-radius: 28px;
position: relative;
overflow: hidden;
box-shadow: 0 30px 80px -42px rgba(10, 14, 26, 0.18);
}
.ar-cta-strip::before {
content: "";
position: absolute;
inset: 0;
background-image: radial-gradient(rgba(10, 14, 26, 0.04) 1px, transparent 1px);
background-size: 20px 20px;
opacity: 0.5;
pointer-events: none;
-webkit-mask-image: linear-gradient(135deg, transparent 30%, #000 70%);
mask-image: linear-gradient(135deg, transparent 30%, #000 70%);
}
.ar-cta-stat {
display: flex;
flex-direction: column;
gap: 8px;
position: relative;
z-index: 1;
}
.ar-cta-stat-n {
font-family: 'Urbanist', 'Outfit', sans-serif;
font-size: clamp(5rem, 9vw, 8rem);
font-weight: 900;
line-height: 0.85;
letter-spacing: -0.02em;
color: var(--c-text);
display: inline-flex;
align-items: flex-start;
}
.ar-cta-stat-n i {
font-style: normal;
color: var(--c-accent);
font-size: 0.5em;
line-height: 1;
}
.ar-cta-stat-l {
font-family: 'JetBrains Mono', ui-monospace, monospace;
font-size: 11px;
font-weight: 600;
letter-spacing: 0.18em;
text-transform: uppercase;
color: #94a3b8;
}
.ar-cta-side {
display: flex;
flex-direction: column;
gap: 18px;
align-items: flex-start;
position: relative;
z-index: 1;
}
.ar-cta-t {
font-family: 'Urbanist', 'Outfit', sans-serif;
font-size: clamp(16px, 1.3vw, 19px);
line-height: 1.45;
color: var(--c-muted);
margin: 0;
max-width: 44ch;
}
.ar-cta-t strong {
color: var(--c-text);
font-weight: 700;
}
.ar-cta-btn {
display: inline-flex;
align-items: center;
gap: 14px;
padding: 14px 14px 14px 24px;
border-radius: 999px;
background: var(--c-text);
color: #fff;
font-family: 'Urbanist', 'Outfit', sans-serif;
font-size: 15.5px;
font-weight: 600;
letter-spacing: -0.01em;
text-decoration: none;
box-shadow: 0 14px 30px -14px rgba(10, 14, 26, 0.38);
transition: background .35s ease, transform .35s cubic-bezier(.2,.7,.2,1), box-shadow .35s ease;
position: relative;
overflow: hidden;
isolation: isolate;
}
.ar-cta-btn::before {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(105deg, transparent 30%, rgba(255, 255, 255, 0.18) 45%, transparent 60%);
transform: translateX(-100%);
transition: transform .9s cubic-bezier(.2,.7,.2,1);
z-index: -1;
}
.ar-cta-btn:hover {
background: var(--c-accent);
transform: translateY(-3px);
box-shadow: 0 18px 36px -12px rgba(31, 167, 232, 0.55);
}
.ar-cta-btn:hover::before { transform: translateX(140%); }
.ar-cta-btn-ar {
display: inline-flex;
align-items: center;
justify-content: center;
width: 32px; height: 32px;
border-radius: 50%;
background: var(--c-accent);
color: #fff;
font-size: 14px;
transition: transform .4s cubic-bezier(.2,.7,.2,1), background .35s ease;
}
.ar-cta-btn:hover .ar-cta-btn-ar {
background: #fff;
color: var(--c-text);
transform: translateX(4px) rotate(-12deg);
}
.ar-cta-note {
font-family: 'JetBrains Mono', ui-monospace, monospace;
font-size: 11px;
color: #94a3b8;
letter-spacing: 0.1em;
text-transform: uppercase;
}
/* ────────────── RESPONSIVE ────────────── */
@media (max-width: 980px) {
.ar-steps {
grid-template-columns: 1fr;
}
.ar-step {
border-right: none;
border-bottom: 1px solid rgba(10, 14, 26, 0.08);
padding: clamp(28px, 4vw, 36px) 0;
}
.ar-step::before { left: 0 !important; }
.ar-step:last-child { border-bottom: none; }
/* Açıklama metni sağa kadar uzasın (erken sarmasın) → max-width sınırını kaldır */
.ar-step-d { max-width: none; }
/* Başlık da sağa kadar aksın: zorla satır kırma boşluğa dönsün (mobilde tam genişlik) */
.ar-step-t .ar-stbr { display: inline; }
.ar-plats {
grid-template-columns: 1fr;
gap: clamp(48px, 6vw, 80px);
}
.ar-board { gap: 20px; }
.ar-note { padding: 24px; }
}
@media (max-width: 560px) {
.ar-hero-title,
.home-partners-title {
font-size: clamp(2rem, 11vw, 3rem);
}
.ar-plat-title { font-size: clamp(2.5rem, 11vw, 4rem); }
.ar-board {
grid-template-columns: 1fr;
gap: 24px;
}
.ar-note { transform: rotate(0) !important; }
}
/* ============================================================
HAKKIMIZDA — yatay sahne (exhibition deck)
Tam ekran, yana kayan sahneler. hx- namespace.
============================================================ */
.hx {
position: relative;
background: var(--c-bg);
}
/* ---- dikey akış ---- */
.hx-track {
display: block;
}
/* ---- sahne (dikey blok) ---- */
.hx-scene {
width: 100%;
display: block;
overflow: hidden;
position: relative;
padding: clamp(76px, 9vw, 124px) clamp(20px, 6vw, 96px);
}
.hx-scene:first-child { padding-top: calc(var(--header-h) + 56px); }
.hx-scene::-webkit-scrollbar { width: 0; }
/* sahne zemin — rafine, sade. Beyazdan çok hafif soğuk yıkamaya. */
.hx-scene.s-intro { background: linear-gradient(165deg, #ffffff 0%, #F4FAFE 100%); }
.hx-scene.s-soz { background: #ffffff; }
.hx-scene.s-hikaye { background: linear-gradient(165deg, #ffffff 0%, var(--c-bg-soft) 100%); }
.hx-scene.s-is { background: #ffffff; }
.hx-scene.s-iletisim { background: linear-gradient(165deg, #ffffff 0%, #F4FAFE 100%); }
/* sahneler arası ince ayraç (zemin değişimini yumuşatır) */
.hx-scene + .hx-scene { border-top: 1px solid rgba(10,14,26,0.05); }
/* dekoratif sahne numarası — çok hafif, köşede rafine */
.hx-scene::after {
content: "№ " attr(data-bg);
position: absolute;
top: clamp(28px, 4vw, 44px);
right: clamp(20px, 6vw, 96px);
font-family: 'JetBrains Mono', ui-monospace, monospace;
font-weight: 500;
font-size: 0.74rem;
letter-spacing: 0.16em;
color: rgba(10,14,26,0.22);
pointer-events: none;
z-index: 1;
user-select: none;
}
.hx-scene:first-child::after { top: calc(var(--header-h) + 28px); }
.hx-inner {
position: relative;
z-index: 1;
width: 100%;
max-width: 1080px;
margin: auto;
}
/* ---- ortak tipografi ---- */
.hx-num {
display: inline-flex;
align-items: center;
gap: 8px;
font-family: 'JetBrains Mono', ui-monospace, monospace;
font-size: 0.8rem;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--c-muted);
margin-bottom: 22px;
}
.hx-num b {
font-weight: 700;
color: var(--c-accent);
font-size: 0.95rem;
}
.hx-h {
font-family: 'Bricolage Grotesque', 'Outfit', sans-serif;
font-weight: 700;
line-height: 1.02;
letter-spacing: -0.012em;
color: var(--c-text);
font-size: clamp(2.3rem, 5.8vw, 4.1rem);
max-width: 16ch;
text-wrap: balance;
}
.hx-h.hx-h-xl { font-size: clamp(2.7rem, 7vw, 5.2rem); max-width: 14ch; font-weight: 800; }
.hx-h em {
font-style: normal;
color: var(--c-accent);
}
.hx-lead {
font-size: clamp(1.08rem, 1.5vw, 1.28rem);
color: var(--c-muted);
line-height: 1.7;
max-width: 52ch;
margin-top: 28px;
font-weight: 400;
}
.hx-lead strong { color: var(--c-text); font-weight: 600; }
.hx-hand {
display: inline-block;
font-family: 'Caveat', cursive;
font-size: clamp(1.35rem, 2.2vw, 1.75rem);
color: var(--c-accent-2);
margin-top: 20px;
padding-left: 26px;
position: relative;
}
.hx-hand::before {
content: "";
position: absolute;
left: 0; top: 50%;
width: 16px; height: 1.5px;
background: var(--c-accent);
}
/* ---- 01 · editöryel kompozisyon ---- */
.hx-intro {
display: grid;
grid-template-columns: minmax(0, 1.55fr) minmax(260px, 0.85fr);
gap: clamp(36px, 5vw, 80px);
align-items: center;
}
.hx-intro-main { min-width: 0; }
/* facts — intro içinde dikey panel */
.hx-facts {
display: grid;
gap: 0;
padding: 4px 0 4px 26px;
border-left: 2px solid var(--c-accent);
}
.hx-fact {
display: flex;
flex-direction: column;
gap: 5px;
padding: 18px 0;
}
.hx-fact + .hx-fact { border-top: 1px solid var(--c-border); }
.hx-fact b {
font-family: 'Bricolage Grotesque', 'Outfit', sans-serif;
font-weight: 700;
font-size: clamp(1.9rem, 3.4vw, 2.7rem);
line-height: 1;
color: var(--c-text);
letter-spacing: -0.012em;
}
.hx-fact span {
font-size: 0.84rem;
color: var(--c-muted);
letter-spacing: 0.01em;
}
/* ---- 02 · sözler ---- */
.hx-promises {
display: grid;
grid-template-columns: repeat(2, minmax(0,1fr));
gap: clamp(16px, 1.8vw, 24px);
margin-top: 38px;
}
.hx-promise {
background: #fff;
border: 1px solid var(--c-border);
border-radius: var(--radius-lg);
padding: 30px 30px 28px;
position: relative;
transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition);
}
.hx-promise:hover {
transform: translateY(-3px);
box-shadow: var(--shadow-md);
border-color: color-mix(in srgb, var(--c-accent) 35%, var(--c-border));
}
.hx-promise-ic {
display: inline-grid;
place-items: center;
width: 44px; height: 44px;
border-radius: 11px;
background: var(--c-accent-soft);
color: var(--c-accent-2);
font-size: 1.18rem;
margin-bottom: 18px;
}
/* tek küçük renk dokunuşu: kart başına ikon tonu (restraint) */
.hx-promise--pink .hx-promise-ic { background: var(--c-pink-soft); color: var(--c-pink); }
.hx-promise--mint .hx-promise-ic { background: color-mix(in srgb, var(--c-mint) 42%, #fff); color: #1f9d6b; }
.hx-promise--lilac .hx-promise-ic { background: color-mix(in srgb, var(--c-lilac) 46%, #fff); color: #7c5cd6; }
.hx-promise--yellow .hx-promise-ic { background: color-mix(in srgb, var(--c-yellow) 46%, #fff); color: #b07d00; }
.hx-promise--mint:hover { border-color: color-mix(in srgb, #1f9d6b 35%, var(--c-border)); }
.hx-promise--lilac:hover { border-color: color-mix(in srgb, #7c5cd6 35%, var(--c-border)); }
.hx-promise--yellow:hover { border-color: color-mix(in srgb, var(--c-yellow) 55%, var(--c-border)); }
.hx-promise--pink:hover { border-color: color-mix(in srgb, var(--c-pink) 35%, var(--c-border)); }
.hx-promise h3 {
font-family: 'Bricolage Grotesque', 'Outfit', sans-serif;
font-size: 1.2rem;
font-weight: 600;
color: var(--c-text);
margin-bottom: 9px;
letter-spacing: -0.015em;
}
.hx-promise p { font-size: 0.96rem; color: var(--c-muted); line-height: 1.62; }
/* ---- 02 · hub düzeni: merkez görsel + 2 sol / 2 sağ söz + bağlayıcı oklar ---- */
.hx-hub {
display: grid;
grid-template-columns: minmax(0, 1fr) clamp(210px, 24vw, 330px) minmax(0, 1fr);
gap: clamp(36px, 4.5vw, 64px);
align-items: center;
}
.hx-hub-col { display: grid; gap: clamp(16px, 1.8vw, 24px); }
.hx-hub .hx-promise { position: relative; }
/* merkez görsel */
.hx-hub-center {
position: relative;
margin: 0;
display: grid;
place-items: center;
opacity: 0;
transform: scale(.92);
transition: opacity .8s ease, transform .8s cubic-bezier(.2,.7,.3,1);
}
.hx-hub-center.visible { opacity: 1; transform: none; }
.hx-hub-center img {
position: relative;
z-index: 1;
display: block;
width: 100%;
height: auto;
-webkit-mask-image: radial-gradient(closest-side, #000 78%, transparent 100%);
mask-image: radial-gradient(closest-side, #000 78%, transparent 100%);
}
.hx-hub-pulse {
position: absolute;
z-index: 0;
width: 84%;
aspect-ratio: 1;
border-radius: 50%;
background: radial-gradient(circle, color-mix(in srgb, var(--c-accent) 14%, transparent) 0%, transparent 68%);
}
@media (prefers-reduced-motion: reduce) {
.hx-hub-center { opacity: 1; transform: none; }
}
@media (max-width: 900px) {
.hx-hub { grid-template-columns: 1fr; gap: clamp(20px, 4vw, 30px); }
.hx-hub-center { order: -1; max-width: 280px; margin: 0 auto; }
}
/* ---- 03 · hikaye (yatay timeline) ---- */
.hx-steps {
display: grid;
grid-template-columns: repeat(4, minmax(0,1fr));
gap: clamp(18px, 2.4vw, 40px);
margin-top: 48px;
position: relative;
}
.hx-steps::before {
content: "";
position: absolute;
top: 7px; left: 7px; right: 7px;
height: 2px;
background: repeating-linear-gradient(90deg, var(--c-border) 0 8px, transparent 8px 16px);
}
.hx-step { position: relative; padding-top: 30px; }
.hx-step-dot {
position: absolute;
top: 0; left: 0;
width: 15px; height: 15px;
border-radius: 50%;
background: #fff;
border: 3px solid var(--c-accent);
box-shadow: 0 0 0 4px var(--c-bg);
}
.hx-step-yr {
display: inline-block;
font-family: 'JetBrains Mono', ui-monospace, monospace;
font-size: 0.72rem;
font-weight: 700;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--c-accent);
margin-bottom: 12px;
}
.hx-step h3 {
font-family: 'Bricolage Grotesque', 'Outfit', sans-serif;
font-size: 1.14rem;
font-weight: 600;
color: var(--c-text);
margin-bottom: 8px;
line-height: 1.22;
letter-spacing: -0.01em;
}
.hx-step p { font-size: 0.9rem; color: var(--c-muted); line-height: 1.6; }
/* ---- 04 · ne iş yaparız ---- */
.hx-work {
display: grid;
grid-template-columns: 1.05fr 1fr;
gap: clamp(20px, 2.6vw, 40px);
margin-top: 36px;
align-items: start;
}
.hx-work-feature {
background: var(--c-accent-soft);
border: 1px solid color-mix(in srgb, var(--c-accent) 22%, transparent);
color: var(--c-text);
border-radius: var(--radius-lg);
padding: 32px 32px 28px;
position: relative;
overflow: hidden;
}
.hx-work-feature::before {
content: "";
position: absolute;
top: 0; left: 0;
width: 100%; height: 3px;
background: var(--c-accent);
}
.hx-work-tag {
position: relative;
display: inline-flex;
align-items: center;
gap: 8px;
font-family: 'JetBrains Mono', ui-monospace, monospace;
font-size: 0.72rem;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--c-accent-2);
margin-bottom: 16px;
}
.hx-work-pulse {
width: 8px; height: 8px;
border-radius: 50%;
background: var(--c-accent);
box-shadow: 0 0 0 0 rgba(31,167,232,0.5);
animation: hxPulse 2.2s infinite;
}
@keyframes hxPulse {
0% { box-shadow: 0 0 0 0 rgba(31,167,232,0.45); }
70% { box-shadow: 0 0 0 9px rgba(31,167,232,0); }
100% { box-shadow: 0 0 0 0 rgba(31,167,232,0); }
}
.hx-work-feature h3 {
position: relative;
font-family: 'Bricolage Grotesque', 'Outfit', sans-serif;
font-size: clamp(1.45rem, 2.2vw, 1.95rem);
font-weight: 700;
letter-spacing: -0.02em;
margin-bottom: 12px;
color: var(--c-text);
}
.hx-work-feature > p {
position: relative;
font-size: 0.96rem;
line-height: 1.65;
color: var(--c-muted);
margin-bottom: 22px;
}
.hx-work-rescue {
position: relative;
list-style: none;
display: grid;
gap: 8px;
}
.hx-work-rescue a {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
padding: 12px 16px;
border-radius: 11px;
background: #fff;
border: 1px solid color-mix(in srgb, var(--c-accent) 14%, transparent);
color: var(--c-text);
font-size: 0.93rem;
font-weight: 500;
transition: border-color var(--transition), transform var(--transition), box-shadow var(--transition);
}
.hx-work-rescue a:hover {
border-color: var(--c-accent);
transform: translateX(3px);
box-shadow: var(--shadow-sm);
}
.hx-work-rescue i { color: var(--c-accent); flex-shrink: 0; }
.hx-work-cats {
display: grid;
grid-template-columns: repeat(2, minmax(0,1fr));
gap: 22px 26px;
}
.hx-work-col h4 {
font-family: 'Bricolage Grotesque', 'Outfit', sans-serif;
font-size: 0.78rem;
font-weight: 700;
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--c-accent);
margin-bottom: 12px;
padding-bottom: 8px;
border-bottom: 1px solid var(--c-border);
}
.hx-work-col ul { list-style: none; display: grid; gap: 7px; }
.hx-work-col a {
font-size: 0.93rem;
color: var(--c-text);
font-weight: 500;
display: inline-flex;
transition: color var(--transition), padding-left var(--transition);
}
.hx-work-col a:hover { color: var(--c-accent); padding-left: 4px; }
.hx-work-all { margin-top: 30px; }
/* ---- 05 · iletişim ---- */
.hx-inner-end .btn-lg { margin-top: 28px; }
.hx-contact {
list-style: none;
display: flex;
flex-wrap: wrap;
gap: 14px 30px;
margin-top: 34px;
padding-top: 26px;
border-top: 1px solid var(--c-border);
}
.hx-contact a, .hx-contact span {
display: inline-flex;
align-items: center;
gap: 9px;
font-size: 0.98rem;
font-weight: 500;
color: var(--c-text);
}
.hx-contact a { transition: color var(--transition); }
.hx-contact a:hover { color: var(--c-accent); }
.hx-contact i { color: var(--c-accent); font-size: 1.05rem; }
.hx-contact span { color: var(--c-muted); }
.hx-partners {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: clamp(20px, 3.5vw, 48px);
margin-top: 30px;
}
.hx-partner img {
height: clamp(46px, 5vw, 62px);
width: auto;
opacity: 0.5;
filter: grayscale(1);
transition: opacity var(--transition), filter var(--transition);
}
.hx-partner:hover img { opacity: 1; filter: grayscale(0); }
/* ============================================================
DECK navigasyon (alt sabit bar)
============================================================ */
.hx-nav {
position: absolute;
left: 0; right: 0; bottom: 0;
z-index: 7;
display: flex;
align-items: center;
justify-content: space-between;
gap: 20px;
padding: 18px clamp(20px, 5vw, 64px) 22px;
background: linear-gradient(0deg, var(--c-bg) 40%, transparent);
}
.hx-nav-l { display: flex; align-items: center; gap: 22px; }
.hx-index {
font-family: 'JetBrains Mono', ui-monospace, monospace;
font-size: 0.82rem;
letter-spacing: 0.06em;
color: var(--c-muted);
}
.hx-index-cur { color: var(--c-accent); font-weight: 700; font-size: 0.95rem; }
.hx-dots { display: flex; gap: 10px; }
.hx-dot {
width: 10px; height: 10px;
border-radius: 50%;
border: none;
background: var(--c-border);
cursor: pointer;
padding: 0;
transition: background var(--transition), width var(--transition), transform var(--transition);
}
.hx-dot:hover { background: var(--c-muted); transform: scale(1.2); }
.hx-dot.is-on { background: var(--c-accent); width: 26px; border-radius: 6px; }
.hx-hint {
display: inline-flex;
align-items: center;
gap: 8px;
font-family: 'Caveat', cursive;
font-size: 1.25rem;
color: var(--c-accent-2);
}
.hx-hint i { animation: hxNudge 1.6s ease-in-out infinite; }
@keyframes hxNudge {
0%, 100% { transform: translateX(0); }
50% { transform: translateX(5px); }
}
.hx-arrows { display: flex; gap: 10px; }
.hx-prev, .hx-next {
width: 46px; height: 46px;
border-radius: 50%;
border: 1px solid var(--c-border);
background: #fff;
color: var(--c-text);
font-size: 1.1rem;
cursor: pointer;
display: grid;
place-items: center;
box-shadow: var(--shadow-sm);
transition: background var(--transition), color var(--transition), border-color var(--transition), transform var(--transition);
}
.hx-prev:hover:not(:disabled), .hx-next:hover:not(:disabled) {
background: var(--c-accent);
color: #fff;
border-color: var(--c-accent);
transform: scale(1.06);
}
.hx-prev:disabled, .hx-next:disabled { opacity: 0.35; cursor: default; }
.hx-progress {
position: absolute;
left: 0; right: 0; bottom: 0;
height: 3px;
background: var(--c-border);
z-index: 8;
}
.hx-progress-bar {
display: block;
height: 100%;
width: 20%;
background: linear-gradient(90deg, var(--c-accent), var(--c-mint));
transition: width 0.35s cubic-bezier(.2,.7,.3,1);
}
/* ============================================================
YARATICI KATMAN — dev gölge rakam (parallax), sahne reveal, marker
============================================================ */
/* dev editöryel gölge rakam — sahne zemininde, yatay kaydırırken kayar */
.hx-scene::before {
content: attr(data-bg);
position: absolute;
top: 50%;
right: clamp(-1.5rem, 1vw, 2.5rem);
transform: translate(var(--px, 0px), -50%);
font-family: 'Bricolage Grotesque', 'Outfit', sans-serif;
font-weight: 800;
font-size: clamp(13rem, 27vw, 27rem);
line-height: 0.8;
letter-spacing: -0.02em;
color: transparent;
-webkit-text-stroke: 1.5px rgba(31,167,232,0.10);
pointer-events: none;
user-select: none;
z-index: 0;
will-change: transform;
}
/* sahne-aktif sahneleme: içerik kademeli belirir */
.hx-inner > *,
.hx-intro > * {
opacity: 0;
transform: translateY(26px);
transition: opacity 0.65s ease, transform 0.65s cubic-bezier(.2,.7,.3,1);
}
.hx-scene.is-active .hx-inner > *,
.hx-scene.is-active .hx-intro > * {
opacity: 1;
transform: none;
}
/* stagger gecikmeleri (hem hx-inner doğrudan çocukları hem hx-intro kolonları) */
.hx-scene.is-active .hx-inner > *:nth-child(1),
.hx-scene.is-active .hx-intro > *:nth-child(1) { transition-delay: 0.06s; }
.hx-scene.is-active .hx-inner > *:nth-child(2),
.hx-scene.is-active .hx-intro > *:nth-child(2) { transition-delay: 0.16s; }
.hx-scene.is-active .hx-inner > *:nth-child(3) { transition-delay: 0.26s; }
.hx-scene.is-active .hx-inner > *:nth-child(4) { transition-delay: 0.36s; }
.hx-scene.is-active .hx-inner > *:nth-child(5) { transition-delay: 0.46s; }
.hx-scene.is-active .hx-inner > *:nth-child(6) { transition-delay: 0.56s; }
/* başlık vurgusunun altına soldan çizilen sarı marker */
.hx-h em { position: relative; }
.hx-h em::after {
content: "";
position: absolute;
left: 0; right: 0;
bottom: -0.04em;
height: 0.16em;
background: var(--c-yellow);
border-radius: 3px;
transform: scaleX(0);
transform-origin: left;
transition: transform 0.7s cubic-bezier(.2,.7,.3,1) 0.45s;
}
.hx-scene.is-active .hx-h em::after { transform: scaleX(1); }
/* ---- responsive ---- */
@media (max-width: 1000px) {
.hx-intro {
grid-template-columns: 1fr;
gap: 34px;
align-items: start;
}
.hx-facts {
grid-template-columns: 1fr 1fr;
column-gap: 32px;
border-left: none;
padding: 28px 0 0;
border-top: 1px solid var(--c-border);
}
.hx-fact { padding: 8px 0; }
.hx-fact + .hx-fact { border-top: none; }
}
@media (max-width: 900px) {
.hx-promises { grid-template-columns: 1fr; }
.hx-work { grid-template-columns: 1fr; }
.hx-steps { grid-template-columns: 1fr 1fr; gap: 28px 22px; }
.hx-steps::before { display: none; }
.hx-hint { display: none; }
}
@media (max-width: 600px) {
.hx { height: auto; overflow: visible; }
.hx-track {
display: block;
overflow: visible;
scroll-snap-type: none;
height: auto;
}
.hx-scene {
width: 100%;
height: auto;
min-height: auto;
padding: 64px clamp(18px, 6vw, 28px) 56px;
}
.hx-scene:first-child { padding-top: calc(var(--header-h) + 40px); }
.hx-scene::after { top: 22px; right: clamp(18px, 6vw, 28px); }
.hx-brand-tag { display: none; }
.hx-nav, .hx-progress { display: none; }
.hx-work-cats { grid-template-columns: 1fr 1fr; }
.hx-steps { grid-template-columns: 1fr; }
/* mobil dikey akışta JS reveal yok — içerik baştan görünür */
.hx-scene::before { display: none; }
.hx-inner > *, .hx-intro > * { opacity: 1; transform: none; transition: none; }
.hx-h em::after { transform: scaleX(1); }
}
@media (prefers-reduced-motion: reduce) {
.hx-track { scroll-behavior: auto; }
.hx-work-pulse, .hx-hint i { animation: none; }
/* hareket azaltıldığında: kademeli belirme yerine anında göster */
.hx-inner > *, .hx-intro > * { transition: opacity 0.3s ease; transform: none; }
.hx-scene::before { transform: translateY(-50%); }
.hx-h em::after { transition: none; }
}
/* ============================================================
HAKKIMIZDA — deck altı dikey bölümler (süreç + istatistik)
============================================================ */
.hxb {
position: relative;
background: linear-gradient(180deg, #ffffff 0%, var(--c-bg-soft) 100%);
padding: clamp(72px, 9vw, 128px) 0 clamp(64px, 8vw, 112px);
}
/* bölüm başlığı */
.hxb-head {
max-width: 760px;
margin: 0 auto clamp(44px, 5vw, 70px);
text-align: center;
}
.hxb-eyebrow {
display: inline-flex;
align-items: center;
gap: 10px;
font-family: 'JetBrains Mono', ui-monospace, monospace;
font-size: 0.78rem;
font-weight: 700;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--c-accent);
margin-bottom: 18px;
}
.hxb-eyebrow::before,
.hxb-eyebrow::after {
content: "";
width: 26px; height: 1px;
background: color-mix(in srgb, var(--c-accent) 50%, transparent);
}
.hxb-title {
font-family: 'Bricolage Grotesque', 'Outfit', sans-serif;
font-weight: 700;
font-size: clamp(2rem, 4vw, 3rem);
line-height: 1.08;
letter-spacing: -0.025em;
color: var(--c-text);
text-wrap: balance;
}
.hxb-title em {
font-style: normal;
color: var(--c-accent);
position: relative;
}
.hxb-title em::after {
content: "";
position: absolute;
left: 0; right: 0;
bottom: -0.02em;
height: 0.16em;
background: var(--c-yellow);
border-radius: 3px;
}
.hxb-intro {
margin-top: 20px;
font-size: clamp(1.02rem, 1.4vw, 1.18rem);
color: var(--c-muted);
line-height: 1.7;
}
/* 3 temel adım */
.hxb-steps {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: clamp(20px, 2.4vw, 32px);
}
.hxb-step {
position: relative;
background: #fff;
border: 1px solid var(--c-border);
border-radius: var(--radius-lg);
padding: clamp(28px, 3vw, 42px) clamp(26px, 2.6vw, 34px) clamp(26px, 3vw, 36px);
overflow: hidden;
transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition), opacity 0.7s cubic-bezier(.2,.7,.3,1);
}
.hxb-step:hover {
transform: translateY(-4px);
box-shadow: var(--shadow-md);
border-color: color-mix(in srgb, var(--c-accent) 30%, var(--c-border));
}
.hxb-step::before {
content: "";
position: absolute;
top: 0; left: 0;
width: 100%; height: 3px;
background: linear-gradient(90deg, var(--c-accent), var(--c-mint));
transform: scaleX(0);
transform-origin: left;
transition: transform 0.6s cubic-bezier(.2,.7,.3,1) 0.15s;
}
.hxb-step.visible::before { transform: scaleX(1); }
.hxb-step-no {
position: absolute;
top: 12px; right: 20px;
font-family: 'Bricolage Grotesque', 'Outfit', sans-serif;
font-weight: 800;
font-size: clamp(3.4rem, 6vw, 5rem);
line-height: 1;
color: transparent;
-webkit-text-stroke: 1.5px color-mix(in srgb, var(--c-accent) 17%, transparent);
pointer-events: none;
user-select: none;
}
.hxb-step-ic {
display: inline-grid;
place-items: center;
width: 52px; height: 52px;
border-radius: 14px;
background: var(--c-accent-soft);
color: var(--c-accent-2);
font-size: 1.4rem;
margin-bottom: 22px;
}
.hxb-step h3 {
font-family: 'Bricolage Grotesque', 'Outfit', sans-serif;
font-size: 1.28rem;
font-weight: 600;
letter-spacing: -0.015em;
color: var(--c-text);
margin-bottom: 11px;
line-height: 1.25;
}
.hxb-step p { font-size: 0.97rem; color: var(--c-muted); line-height: 1.65; }
.hxb-step:nth-child(2) { transition-delay: 0.08s; }
.hxb-step:nth-child(3) { transition-delay: 0.16s; }
/* istatistik bandı */
.hxb-stats {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: clamp(16px, 2vw, 26px);
margin-top: clamp(40px, 5vw, 64px);
}
.hxb-stat {
display: flex;
flex-direction: column;
align-items: center;
gap: 10px;
text-align: center;
background: #fff;
border: 1px solid var(--c-border);
border-radius: var(--radius-lg);
padding: clamp(26px, 2.6vw, 34px) 24px;
transition: transform var(--transition), box-shadow var(--transition), opacity 0.7s cubic-bezier(.2,.7,.3,1);
}
.hxb-stat:hover { transform: translateY(-3px); box-shadow: var(--shadow-sm); }
.hxb-stat-ic {
display: grid;
place-items: center;
width: 46px; height: 46px;
border-radius: 50%;
background: var(--c-accent-soft);
color: var(--c-accent);
font-size: 1.25rem;
}
.hxb-stat-num b {
font-family: 'Bricolage Grotesque', 'Outfit', sans-serif;
font-weight: 800;
font-size: clamp(2.1rem, 3.6vw, 2.9rem);
line-height: 1;
letter-spacing: -0.012em;
color: var(--c-text);
}
.hxb-stat-label { font-size: 0.9rem; color: var(--c-muted); line-height: 1.4; }
.hxb-stat:nth-child(2) { transition-delay: 0.07s; }
.hxb-stat:nth-child(3) { transition-delay: 0.14s; }
.hxb-stat:nth-child(4) { transition-delay: 0.21s; }
@media (max-width: 900px) {
.hxb-steps { grid-template-columns: 1fr; }
.hxb-stats { grid-template-columns: repeat(2, 1fr); }
.hxb-step:nth-child(2), .hxb-step:nth-child(3) { transition-delay: 0s; }
}
@media (max-width: 480px) {
.hxb-stats { grid-template-columns: 1fr; }
}
/* ============================================================
HAKKIMIZDA — anasayfa dekor dili (ar-hero + dx-frame + marquee)
============================================================ */
.abx { position: relative; background: var(--c-bg); }
.abx-sec { padding: clamp(58px, 7vw, 100px) 0; }
.abx-sec .ar-block { margin-bottom: 0; }
.abx-sec .ar-block-h { border-bottom: none; padding-bottom: 0; }
.abx-first { padding-top: calc(var(--header-h) + 48px); }
.abx-sec > .container > .ar-hero { margin-bottom: clamp(40px, 5vw, 68px); }
/* 01 — kimlik görseli (split içinde, offset renk paneli ile) */
/* görsel: arka katman, zemine kaynaşık */
.abx-id-fig {
position: relative;
margin: 0;
width: 64%;
opacity: 0;
transform: translateY(16px);
transition: opacity .8s ease, transform .8s cubic-bezier(.2,.7,.3,1);
}
.ar-block.visible .abx-id-fig { opacity: 1; transform: none; }
.abx-id-fig-media { display: block; line-height: 0; }
.abx-id-fig-media img {
display: block;
width: 100%;
height: auto;
-webkit-mask-image: radial-gradient(150% 150% at 50% 50%, #000 82%, transparent 100%);
mask-image: radial-gradient(150% 150% at 50% 50%, #000 82%, transparent 100%);
}
/* metin: önde binen beyaz kart */
.abx-id-txt {
position: absolute;
top: 50%;
right: 0;
width: clamp(300px, 42%, 460px);
transform: translateY(-50%) translateX(0);
background: #fff;
border: 1px solid var(--c-border);
border-radius: var(--radius-lg);
box-shadow: var(--shadow-md);
padding: clamp(28px, 3vw, 40px);
opacity: 0;
transition: opacity .7s ease .2s, transform .7s cubic-bezier(.2,.7,.3,1) .2s;
}
.ar-block.visible .abx-id-txt { opacity: 1; }
.abx-id-txt { transform: translateY(-50%) translateX(24px); }
.ar-block.visible .abx-id-txt { transform: translateY(-50%) translateX(0); }
@media (prefers-reduced-motion: reduce) {
.abx-id-fig, .abx-id-txt { opacity: 1; transform: none; }
.ar-block.visible .abx-id-txt { transform: translateY(-50%); }
}
@media (max-width: 980px) {
.abx-id { display: flex; flex-direction: column; gap: clamp(20px, 4vw, 32px); }
.abx-id-fig { width: 100%; }
.abx-id-txt {
position: static;
width: 100%;
transform: none;
margin-top: -8%;
}
.ar-block.visible .abx-id-txt { transform: none; }
}
/* MOBİL reveal güvenliği: §01 görsel+metin kartı [data-anim] değil, .ar-block.visible'a
bağlı; mobilde JS observer hızlı scroll'da kaçırırsa görünmez kalıyordu. Diğer reveal
öğeleri gibi mobilde baştan görünür yap (bkz. [data-anim] mobil kuralı). */
@media (max-width: 720px) {
.abx-id-fig, .abx-id-txt,
.ar-block.visible .abx-id-fig, .ar-block.visible .abx-id-txt { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
.abx-id-fig-media { opacity: 1; transform: none; }
}
/* rakam şeridi — blok altında tam genişlik 4'lü */
.abx-facts-row {
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 0;
margin-top: clamp(30px, 4vw, 50px);
padding: clamp(26px, 3vw, 38px) 0 0;
border-left: none;
border-top: 1px solid var(--c-border);
}
.abx-facts-row li {
padding: 0 clamp(18px, 2.4vw, 34px);
border-left: 1px solid var(--c-border);
}
.abx-facts-row li:first-child { padding-left: 0; border-left: none; }
.abx-facts-row li + li { border-top: none; }
@media (max-width: 760px) {
.abx-facts-row {
grid-template-columns: 1fr 1fr;
row-gap: clamp(20px, 4vw, 28px);
}
.abx-facts-row li { padding: 0 0 0 clamp(16px, 4vw, 22px); }
.abx-facts-row li:nth-child(odd) { padding-left: 0; border-left: none; }
}
/* 01 — kimlik paneli (dx-frame içinde) */
.abx-id { position: relative; }
.abx-id-txt p {
font-family: 'Urbanist', 'Outfit', sans-serif;
font-size: clamp(1.02rem, 1.3vw, 1.18rem);
line-height: 1.72;
color: var(--c-muted);
margin: 0;
}
.abx-id-txt strong {
color: var(--c-text);
font-weight: 600;
background: linear-gradient(180deg, transparent 60%, rgba(255,210,63,0.5) 60%, rgba(255,210,63,0.5) 90%, transparent 90%);
}
.abx-id-txt .hx-hand { margin-top: 22px; }
.abx-facts {
list-style: none;
display: grid;
gap: 0;
padding-left: 26px;
border-left: 2px solid var(--c-accent);
}
.abx-facts li {
display: flex;
flex-direction: column;
gap: 4px;
padding: 16px 0;
}
.abx-facts li + li { border-top: 1px solid var(--c-border); }
.abx-facts b {
font-family: 'Bricolage Grotesque', 'Outfit', sans-serif;
font-weight: 800;
font-size: clamp(1.8rem, 3vw, 2.5rem);
line-height: 1;
letter-spacing: -0.012em;
color: var(--c-text);
}
.abx-facts span { font-size: 0.86rem; color: var(--c-muted); }
/* kapanış CTA */
.abx-cta { text-align: center; }
.abx-cta .ar-hero { margin-bottom: 0; }
.abx-cta .btn { margin-top: 30px; }
.abx-cta .hx-contact { justify-content: center; margin-top: 38px; }
.abx-cta .hx-partners { justify-content: center; }
@media (max-width: 900px) {
.abx-id { grid-template-columns: 1fr; gap: 30px; align-items: start; }
.abx-facts {
display: grid;
grid-template-columns: 1fr 1fr;
column-gap: 30px;
border-left: none;
padding-left: 0;
padding-top: 24px;
border-top: 1px solid var(--c-border);
}
.abx-facts li { padding: 10px 0; }
.abx-facts li + li { border-top: none; }
}
/* ════════════════════════════════════════════════════════════
ARP — anasayfa "süreç" sekmeleri (acc-rescue içi, Ultegra dili)
Solda yuvarlak ikon + büyük başlık + ✓ listesi; sağda BÜYÜK
uygulama penceresi mockup'ı (sidebar + içerik); altta üst
hairline'lı sekme barı — tıklayınca panel değişir.
════════════════════════════════════════════════════════════ */
.arp { display: flex; flex-direction: column; }
/* paneller */
.arp-panel { display: none; }
.arp-panel.is-on {
display: grid; grid-template-columns: minmax(0, .88fr) minmax(0, 1.12fr); align-items: center;
gap: clamp(36px, 4.5vw, 72px); padding: clamp(10px, 1.4vw, 22px) clamp(4px, 1vw, 16px) clamp(34px, 3.6vw, 54px);
animation: arpIn .45s cubic-bezier(.2,.7,.3,1) both;
}
@keyframes arpIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
/* sol: ikon + başlık + ✓ listesi */
.arp-copy { display: flex; flex-direction: column; align-items: flex-start; gap: 18px; }
.arp-badge {
width: 52px; height: 52px; border-radius: 50%; display: grid; place-items: center;
background: #fff; color: var(--c-accent); font-size: 1.25rem;
border: 1px solid var(--c-border); box-shadow: 0 12px 28px -14px rgba(10,14,26,.25);
}
.arp-badge-pink { color: var(--c-pink); }
.arp-badge-mint { color: #1f9d6b; }
.arp-t {
font-family: 'Urbanist', 'Outfit', 'Bricolage Grotesque', sans-serif; font-size: clamp(1.5rem, 2.2vw, 2rem);
font-weight: 800; line-height: 1.12; letter-spacing: -.03em; color: var(--c-text); margin: 0; max-width: 20ch;
}
.arp-d { font-family: 'Urbanist', 'Outfit', sans-serif; font-size: 15px; line-height: 1.65; color: var(--c-muted); margin: 0; max-width: 46ch; }
.arp-checks { list-style: none; margin: 4px 0 0; padding: 0; display: flex; flex-direction: column; gap: 13px; }
.arp-checks li { display: flex; align-items: flex-start; gap: 11px; font-family: 'Urbanist', 'Outfit', sans-serif; font-size: 14.5px; font-weight: 500; line-height: 1.5; color: #3b4350; }
.arp-checks li i { flex-shrink: 0; color: var(--c-accent); font-size: 1.02rem; line-height: 1.4; }
/* sağ: büyük uygulama penceresi */
.arp-shot { position: relative; min-width: 0; }
.arp-win {
background: #fff; border: 1px solid var(--c-border); border-radius: 18px; overflow: hidden;
box-shadow: 0 18px 44px -24px rgba(10,14,26,.12), 0 4px 14px rgba(10,14,26,.04);
}
.arp-win-top {
position: relative; display: flex; align-items: center; gap: 12px; padding: 12px 16px;
background: linear-gradient(180deg, #fbfdff, #fff); border-bottom: 1px solid var(--c-border); overflow: hidden;
}
.arp-win-top b { font-family: 'Urbanist', 'Outfit', sans-serif; font-size: 12.5px; font-weight: 800; color: var(--c-text); letter-spacing: -.01em; }
.arp-dots { display: inline-flex; gap: 5px; }
.arp-dots i { width: 9px; height: 9px; border-radius: 50%; background: #e6e9f0; }
.arp-dots i:nth-child(1) { background: #fca5a5; }
.arp-dots i:nth-child(2) { background: #fcd34d; }
.arp-dots i:nth-child(3) { background: #86efac; }
.arp-scanline { position: absolute; left: 0; bottom: -1px; height: 2px; width: 36%; border-radius: 2px; background: linear-gradient(90deg, transparent, var(--c-accent), transparent); animation: arpScan 2.4s ease-in-out infinite; }
@keyframes arpScan { 0% { left: -36%; } 100% { left: 100%; } }
.arp-win-body { display: grid; grid-template-columns: 152px 1fr; min-height: 330px; }
.arp-side { display: flex; flex-direction: column; gap: 13px; padding: 16px 14px; background: #fafcfe; border-right: 1px solid var(--c-border); }
.arp-side-logo { width: 26px; height: 26px; border-radius: 8px; background: linear-gradient(135deg, var(--c-accent), var(--c-accent-2)); margin-bottom: 6px; }
.arp-side-logo-pink { background: linear-gradient(135deg, var(--c-pink), #d63a4d); }
.arp-side-logo-mint { background: linear-gradient(135deg, #2ECC71, #1f9d6b); }
.arp-side i { display: block; height: 8px; border-radius: 4px; background: #e9edf3; width: var(--w, 80%); }
.arp-side i.on { background: color-mix(in srgb, var(--c-accent) 35%, #e9edf3); width: 92%; position: relative; }
.arp-main { padding: 16px 20px 18px; display: flex; flex-direction: column; }
.arp-main-h { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; padding-bottom: 12px; margin-bottom: 4px; border-bottom: 1px solid var(--c-border); }
.arp-main-h b { font-family: 'Urbanist', 'Outfit', sans-serif; font-size: 13.5px; font-weight: 800; color: var(--c-text); }
.arp-main-h small { font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 9.5px; font-weight: 600; letter-spacing: .06em; color: #94a3b8; text-transform: uppercase; }
/* satırlar (denetim & kampanya) */
.arp-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 11px 2px; border-bottom: 1px dashed color-mix(in srgb, var(--c-border) 75%, transparent); }
.arp-row small { font-family: 'Urbanist', 'Outfit', sans-serif; font-size: 13px; font-weight: 600; color: var(--c-muted); }
.arp-row em { display: inline-flex; align-items: center; gap: 6px; font-style: normal; font-family: 'Urbanist', 'Outfit', sans-serif; font-size: 11.5px; font-weight: 700; padding: 4px 11px; border-radius: 999px; }
.arp-row em.ok { background: #e3f7ef; color: #1f9d6b; }
.arp-row em.warn { background: color-mix(in srgb, var(--c-yellow) 32%, #fff); color: #b07d00; }
.arp-row em.bad { background: var(--c-pink-soft); color: var(--c-pink); }
.arp-row.is-flag { background: color-mix(in srgb, var(--c-pink-soft) 45%, transparent); border-radius: 10px; padding-left: 10px; padding-right: 10px; border-bottom-color: transparent; }
.arp-panel.is-on .arp-row { opacity: 0; animation: arpRow .4s ease both; }
.arp-panel.is-on .arp-row:nth-of-type(1) { animation-delay: .1s; }
.arp-panel.is-on .arp-row:nth-of-type(2) { animation-delay: .2s; }
.arp-panel.is-on .arp-row:nth-of-type(3) { animation-delay: .3s; }
.arp-panel.is-on .arp-row:nth-of-type(4) { animation-delay: .4s; }
.arp-panel.is-on .arp-row:nth-of-type(5) { animation-delay: .5s; }
@keyframes arpRow { from { opacity: 0; transform: translateX(-8px); } to { opacity: 1; transform: translateX(0); } }
/* itiraz: belge satırları + ek çipleri */
.arp-doclines { display: flex; flex-direction: column; gap: 11px; padding: 16px 2px 8px; }
.arp-doclines i { display: block; height: 8px; border-radius: 4px; width: var(--w, 70%); background: #eef1f6; }
.arp-panel.is-on .arp-doclines i { transform-origin: left; animation: arpLine .5s cubic-bezier(.2,.7,.3,1) both; }
.arp-panel.is-on .arp-doclines i:nth-child(2) { animation-delay: .1s; }
.arp-panel.is-on .arp-doclines i:nth-child(3) { animation-delay: .2s; }
.arp-panel.is-on .arp-doclines i:nth-child(4) { animation-delay: .3s; }
.arp-panel.is-on .arp-doclines i:nth-child(5) { animation-delay: .4s; }
@keyframes arpLine { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.arp-attach { display: flex; flex-wrap: wrap; gap: 8px; padding: 10px 2px 14px; }
.arp-attach span { display: inline-flex; align-items: center; gap: 6px; font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 10px; font-weight: 600; color: var(--c-accent-2); background: var(--c-accent-soft); padding: 6px 11px; border-radius: 8px; }
/* aktivasyon: AKTİF rozeti + yükselen barlar */
.arp-live { display: inline-flex; align-items: center; gap: 6px; margin-left: auto; font-family: 'JetBrains Mono', ui-monospace, monospace; font-style: normal; font-size: 9.5px; font-weight: 700; letter-spacing: .1em; color: #1f9d6b; background: #e3f7ef; padding: 4px 10px; border-radius: 999px; }
.arp-live span { width: 7px; height: 7px; border-radius: 50%; background: #2ECC71; animation: arpLivePulse 1.8s infinite; }
@keyframes arpLivePulse { 0% { box-shadow: 0 0 0 0 rgba(46,204,113,.5); } 70%,100% { box-shadow: 0 0 0 7px rgba(46,204,113,0); } }
.arp-bars { display: flex; align-items: flex-end; gap: 8px; height: 86px; padding: 16px 2px 8px; }
.arp-bars i { flex: 1; height: var(--h, 40%); border-radius: 6px 6px 2px 2px; background: linear-gradient(180deg, color-mix(in srgb, var(--c-accent) 75%, #fff), var(--c-accent)); }
.arp-panel.is-on .arp-bars i { transform-origin: bottom; animation: arpBar .6s cubic-bezier(.2,.7,.3,1) both; }
.arp-panel.is-on .arp-bars i:nth-child(2) { animation-delay: .07s; }
.arp-panel.is-on .arp-bars i:nth-child(3) { animation-delay: .14s; }
.arp-panel.is-on .arp-bars i:nth-child(4) { animation-delay: .21s; }
.arp-panel.is-on .arp-bars i:nth-child(5) { animation-delay: .28s; }
.arp-panel.is-on .arp-bars i:nth-child(6) { animation-delay: .35s; }
.arp-panel.is-on .arp-bars i:nth-child(7) { animation-delay: .42s; }
@keyframes arpBar { from { transform: scaleY(0); } to { transform: scaleY(1); } }
/* alt bilgi bandı */
.arp-card-foot { display: flex; align-items: center; gap: 8px; margin-top: auto; padding: 11px 13px; border-radius: 11px; font-family: 'Urbanist', 'Outfit', sans-serif; font-size: 12.5px; font-weight: 700; }
.arp-foot-accent { background: var(--c-accent-soft); color: var(--c-accent-2); }
.arp-foot-send { background: #e3f7ef; color: #1f9d6b; }
.arp-senddot { width: 7px; height: 7px; border-radius: 50%; background: #2ECC71; margin-left: auto; animation: arpLivePulse 1.8s infinite; }
/* sekmeler — üst hairline, aktifte renkli kalın çizgi (Ultegra) */
.arp-tabs { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid rgba(10,14,26,.1); }
.arp-tab {
position: relative; display: flex; flex-direction: column; align-items: center; gap: 4px;
padding: 20px 14px 16px; background: none; border: none; cursor: pointer;
}
.arp-tab span { font-family: 'Urbanist', 'Outfit', sans-serif; font-size: 15.5px; font-weight: 700; color: var(--c-muted); letter-spacing: -.01em; transition: color .2s ease; }
.arp-tab small { font-family: 'Urbanist', 'Outfit', sans-serif; font-size: 12px; font-weight: 500; color: #b6bec9; transition: color .2s ease; }
.arp-tab::after { content: ''; position: absolute; top: -1px; left: 12%; right: 12%; height: 3px; border-radius: 0 0 3px 3px; background: linear-gradient(90deg, var(--c-accent), #7C5CE6); transform: scaleX(0); transform-origin: left; transition: transform .3s cubic-bezier(.2,.7,.3,1); }
.arp-tab:hover span { color: var(--c-text); }
.arp-tab.is-on::after { transform: scaleX(1); }
.arp-tab.is-on span { color: var(--c-accent); }
.arp-tab.is-on small { color: var(--c-muted); }
@media (prefers-reduced-motion: reduce) {
.arp-panel.is-on, .arp-panel.is-on .arp-row, .arp-panel.is-on .arp-doclines i, .arp-panel.is-on .arp-bars i { animation: none; opacity: 1; }
.arp-scanline, .arp-live span, .arp-senddot { animation: none; }
}
@media (max-width: 900px) {
.arp-panel.is-on { grid-template-columns: 1fr; gap: 26px; padding: 8px 4px 28px; }
.arp-win-body { grid-template-columns: 1fr; min-height: 0; }
.arp-side { flex-direction: row; align-items: center; padding: 12px 14px; border-right: none; border-bottom: 1px solid var(--c-border); }
.arp-side-logo { margin-bottom: 0; }
.arp-side i { width: 44px !important; }
.arp-side i:nth-child(n+5) { display: none; }
.arp-tabs { grid-template-columns: 1fr; border-top: none; }
.arp-tab { flex-direction: row; align-items: baseline; justify-content: flex-start; gap: 10px; border-top: 1px solid rgba(10,14,26,.08); padding: 14px 6px; }
.arp-tab::after { left: 0; right: auto; width: 44px; }
.arp-tab small { margin-left: auto; }
}
/* ARP — hizmet sayfası varyantı (6 sekme) */
.arp-badge-lilac { color: #7c5cd6; }
.arp-badge-yellow { color: #b07d00; }
.arp-side-logo-lilac { background: linear-gradient(135deg, var(--c-lilac), #7c5cd6); }
.arp-side-logo-yellow { background: linear-gradient(135deg, var(--c-yellow), #e0a800); }
.arp-row em.inf { background: var(--c-accent-soft); color: var(--c-accent-2); }
.arp-tabs--6 { grid-template-columns: repeat(6, 1fr); }
.arp-tabs--6 .arp-tab { padding: 18px 8px 14px; }
.arp-tabs--6 .arp-tab span { font-size: 14px; }
.arp-tabs--6 .arp-tab small { font-size: 11px; }
@media (max-width: 900px) {
.arp-tabs--6 { grid-template-columns: 1fr 1fr; }
.arp-tabs--6 .arp-tab { flex-direction: column; align-items: flex-start; gap: 2px; padding: 12px 10px; }
.arp-tabs--6 .arp-tab small { margin-left: 0; }
}
/* — Meta Business denetim paneli: gerçek konsol nav + Account Quality ekranı — */
.arp-nav { gap: 3px !important; padding-top: 14px !important; }
.arp-nav-brand { display: flex; align-items: baseline; gap: 6px; margin-bottom: 9px; padding: 0 7px 11px; border-bottom: 1px solid var(--c-border); }
.arp-nav-logo { width: 22px; height: 22px; border-radius: 7px; flex: none; align-self: center; background: linear-gradient(135deg, #1c8aff, #0050d4); box-shadow: inset 0 0 0 1.5px rgba(255,255,255,.45); }
.arp-nav-brand b { font-family: 'Urbanist', 'Outfit', sans-serif; font-size: 12.5px; font-weight: 800; color: var(--c-text); letter-spacing: -.02em; }
.arp-nav-brand small { font-family: 'Urbanist', 'Outfit', sans-serif; font-size: 11px; font-weight: 600; color: #9aa6b6; letter-spacing: -.01em; }
.arp-nav-item { display: flex; align-items: center; gap: 8px; font-family: 'Urbanist', 'Outfit', sans-serif; font-size: 11px; font-weight: 600; color: #9aa6b6; padding: 7px 9px; border-radius: 8px; white-space: nowrap; min-width: 0; }
.arp-nav-item i { display: inline-flex; width: auto; height: auto; background: none; border-radius: 0; font-size: 13px; opacity: .85; flex: none; }
.arp-nav-item.is-on { background: var(--c-accent-soft); color: var(--c-accent-2); font-weight: 700; }
.arp-nav-item.is-on i { opacity: 1; }
.arp-win-meta .arp-main { gap: 10px; }
.arp-acct { display: flex; align-items: center; gap: 10px; padding-bottom: 12px; border-bottom: 1px solid var(--c-border); }
.arp-acct-av { width: 34px; height: 34px; border-radius: 9px; flex: none; position: relative; background: linear-gradient(135deg, #c7d2fe, #a5b4fc); }
.arp-acct-av::after { content: ''; position: absolute; right: -3px; bottom: -3px; width: 13px; height: 13px; border-radius: 50%; background: var(--c-pink); border: 2.5px solid #fff; }
.arp-acct-id { display: flex; flex-direction: column; gap: 1px; min-width: 0; margin-right: auto; }
.arp-acct-id b { font-family: 'Urbanist', 'Outfit', sans-serif; font-size: 13.5px; font-weight: 800; color: var(--c-text); letter-spacing: -.01em; }
.arp-acct-id small { font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 9px; font-weight: 500; letter-spacing: .02em; color: #94a3b8; }
.arp-acct-badge { flex: none; display: inline-flex; align-items: center; gap: 5px; font-family: 'Urbanist', 'Outfit', sans-serif; font-size: 10px; font-weight: 700; color: var(--c-accent-2); background: var(--c-accent-soft); padding: 5px 10px; border-radius: 999px; white-space: nowrap; }
.arp-acct-badge i { font-size: 11px; }
.arp-status { display: flex; align-items: center; gap: 11px; padding: 12px 13px; border-radius: 12px; background: var(--c-pink-soft); border: 1px solid color-mix(in srgb, var(--c-pink) 20%, transparent); }
.arp-status-ic { width: 30px; height: 30px; border-radius: 9px; flex: none; display: grid; place-items: center; background: var(--c-pink); color: #fff; font-size: 15px; }
.arp-status-tx { display: flex; flex-direction: column; gap: 1px; }
.arp-status-tx b { font-family: 'Urbanist', 'Outfit', sans-serif; font-size: 13.5px; font-weight: 800; color: var(--c-pink); letter-spacing: -.01em; }
.arp-status-tx small { font-family: 'Urbanist', 'Outfit', sans-serif; font-size: 11px; font-weight: 600; color: color-mix(in srgb, var(--c-pink) 78%, #1a1a1a); }
.arp-status--ok { background: #e3f7ef; border-color: color-mix(in srgb, #2ECC71 30%, transparent); }
.arp-status--ok .arp-status-ic { background: #1f9d6b; }
.arp-status--ok .arp-status-tx b { color: #1f9d6b; }
.arp-status--ok .arp-status-tx small { color: color-mix(in srgb, #1f9d6b 76%, #1a1a1a); }
.arp-status--info { background: var(--c-accent-soft); border-color: color-mix(in srgb, var(--c-accent) 28%, transparent); }
.arp-status--info .arp-status-ic { background: var(--c-accent); }
.arp-status--info .arp-status-tx b { color: var(--c-accent-2); }
.arp-status--info .arp-status-tx small { color: color-mix(in srgb, var(--c-accent-2) 80%, #1a1a1a); }
.arp-viol { display: flex; align-items: center; gap: 10px; padding: 9px 11px; border-radius: 11px; border: 1px solid var(--c-border); background: #fff; }
.arp-viol-ic { width: 27px; height: 27px; border-radius: 8px; flex: none; display: grid; place-items: center; background: color-mix(in srgb, var(--c-yellow) 32%, #fff); color: #b07d00; font-size: 12.5px; }
.arp-viol-tx { display: flex; flex-direction: column; gap: 1px; flex: 1 1 auto; min-width: 0; }
.arp-viol-tx b { font-family: 'Urbanist', 'Outfit', sans-serif; font-size: 12.5px; font-weight: 700; color: var(--c-text); }
.arp-viol-tx small { font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 8.5px; font-weight: 500; letter-spacing: .02em; color: #94a3b8; }
.arp-viol-tag { flex: none; font-family: 'JetBrains Mono', ui-monospace, monospace; font-style: normal; font-size: 8.5px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--c-muted); background: #f1f5f9; padding: 4px 8px; border-radius: 6px; }
.arp-win-meta .arp-row { padding: 9px 2px; }
.arp-win-meta .arp-acct, .arp-win-meta .arp-status, .arp-win-meta .arp-viol { opacity: 0; }
.arp-panel.is-on .arp-win-meta .arp-acct { animation: arpRow .42s ease both; animation-delay: .06s; }
.arp-panel.is-on .arp-win-meta .arp-status { animation: arpRow .42s ease both; animation-delay: .16s; }
.arp-panel.is-on .arp-win-meta .arp-viol { animation: arpRow .42s ease both; animation-delay: .26s; }
.arp-win-meta .arp-row { opacity: 0; }
.arp-panel.is-on .arp-win-meta .arp-row:nth-of-type(1) { animation-delay: .36s; }
.arp-panel.is-on .arp-win-meta .arp-row:nth-of-type(2) { animation-delay: .44s; }
@media (prefers-reduced-motion: reduce) {
.arp-win-meta .arp-acct, .arp-win-meta .arp-status, .arp-win-meta .arp-viol, .arp-win-meta .arp-row { animation: none !important; opacity: 1 !important; }
}
@media (max-width: 900px) {
.arp-nav { flex-direction: row !important; flex-wrap: wrap; gap: 6px !important; padding: 12px 14px !important; }
.arp-nav-brand { width: 100%; margin-bottom: 2px; padding: 0 0 9px; }
.arp-nav-item { padding: 6px 9px; font-size: 11px; }
.arp-acct-badge { display: none; }
}
/* ════════════════════════════════════════════════════════════
SVX — hizmet sayfası yetenekler: profesyonel bölünmüş grid
Tek çerçeve içinde hairline ile bölünmüş hücreler; rafine
ikon çipi + mono numara + hover'da üstten ton çizgisi.
════════════════════════════════════════════════════════════ */
.svx-grid {
display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px;
background: var(--c-border); border: 1px solid var(--c-border); border-radius: 20px; overflow: hidden;
margin-top: clamp(28px, 3vw, 44px);
box-shadow: 0 24px 60px -40px rgba(10,14,26,.18);
}
.svx-cell {
position: relative; background: #fff; padding: clamp(28px, 2.8vw, 40px) clamp(24px, 2.4vw, 34px);
display: flex; flex-direction: column; align-items: flex-start; gap: 14px;
transition: background .25s ease;
}
.svx-cell::before { /* hover: üstten ton çizgisi çizilir */
content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px;
background: var(--tone); transform: scaleX(0); transform-origin: left;
transition: transform .35s cubic-bezier(.2,.7,.3,1);
}
.svx-cell:hover { background: #fbfdff; }
.svx-cell:hover::before { transform: scaleX(1); }
.svx-num {
position: absolute; top: 24px; right: 24px;
font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 11px; font-weight: 600;
letter-spacing: .1em; color: #c3ccd8; transition: color .25s ease;
}
.svx-cell:hover .svx-num { color: var(--tone-ink); }
.svx-ic {
width: 44px; height: 44px; border-radius: 13px; display: grid; place-items: center;
background: var(--tone-soft); color: var(--tone-ink); font-size: 1.18rem;
transition: transform .25s cubic-bezier(.2,.7,.3,1);
}
.svx-cell:hover .svx-ic { transform: scale(1.07); }
.svx-cell h3 { font-family: 'Urbanist', 'Outfit', sans-serif; font-size: 1.07rem; font-weight: 700; letter-spacing: -.015em; color: var(--c-text); margin: 0; }
.svx-cell p { font-family: 'Urbanist', 'Outfit', sans-serif; font-size: 14px; line-height: 1.65; color: var(--c-muted); margin: 0; }
.svx-incl {
display: inline-flex; align-items: center; gap: 6px; margin-top: auto; padding-top: 4px;
font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 10px; font-weight: 700;
letter-spacing: .12em; text-transform: uppercase; color: #1f9d6b;
}
.svx-incl i { font-size: .85rem; }
@media (max-width: 980px) { .svx-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 620px) { .svx-grid { grid-template-columns: 1fr; border-radius: 16px; } .svx-cell { padding: 24px 22px; } }
/* ════════════════════════════════════════════════════════════
SVB — hizmet yetenekleri: BENTO grid (svx'in yaratıcı hali)
Aynı premium tek çerçeve + hairline bölme; köşegen geniş
hücreler (01 ve 06 span 2) + hücre başına mini görsel artifact:
huni / kesişen kitleler / kreatif destesi / katalog / A-B / sparkline.
════════════════════════════════════════════════════════════ */
.svb-grid {
display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px;
background: var(--c-border); border: 1px solid var(--c-border); border-radius: 20px; overflow: hidden;
margin-top: clamp(28px, 3vw, 44px);
box-shadow: 0 24px 60px -40px rgba(10,14,26,.18);
}
.svb-cell {
position: relative; background: #fff; padding: clamp(26px, 2.6vw, 36px) clamp(22px, 2.2vw, 32px);
display: flex; flex-direction: column; align-items: flex-start; gap: 16px;
transition: background .25s ease;
}
.svb-wide { grid-column: span 2; flex-direction: row; align-items: center; gap: clamp(20px, 2.4vw, 40px); }
.svb-wide .svb-body { flex: 1; }
.svb-cell::before { /* hover: üstten ton çizgisi */
content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px;
background: var(--tone); transform: scaleX(0); transform-origin: left;
transition: transform .35s cubic-bezier(.2,.7,.3,1);
}
.svb-cell:hover { background: #fbfdff; }
.svb-cell:hover::before { transform: scaleX(1); }
.svb-num {
position: absolute; top: 22px; right: 22px; z-index: 1;
font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 11px; font-weight: 600;
letter-spacing: .1em; color: #c3ccd8; transition: color .25s ease;
}
.svb-cell:hover .svb-num { color: var(--tone-ink); }
.svb-body { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; }
.svb-cell h3 { font-family: 'Urbanist', 'Outfit', sans-serif; font-size: 1.07rem; font-weight: 700; letter-spacing: -.015em; color: var(--c-text); margin: 0; }
.svb-cell p { font-family: 'Urbanist', 'Outfit', sans-serif; font-size: 14px; line-height: 1.65; color: var(--c-muted); margin: 0; }
.svb-cell .svx-incl { margin-top: 6px; }
.svb-art { flex-shrink: 0; display: flex; align-items: center; }
/* 01 — huni: daralan ton barları */
.svb-funnel { display: flex; flex-direction: column; gap: 8px; width: clamp(170px, 16vw, 230px); }
.svb-funnel i {
display: flex; align-items: center; height: 30px; width: var(--w, 100%); padding: 0 12px;
border-radius: 8px; background: linear-gradient(90deg, var(--tone-soft), color-mix(in srgb, var(--tone) 26%, #fff));
border: 1px solid color-mix(in srgb, var(--tone) 22%, transparent);
transform-origin: left; transition: transform .3s ease;
}
.svb-funnel i:last-child { background: linear-gradient(90deg, color-mix(in srgb, var(--tone) 30%, #fff), color-mix(in srgb, var(--tone) 55%, #fff)); }
.svb-funnel b { font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 9px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--tone-ink); white-space: nowrap; }
.svb-grid.visible .svb-funnel i { animation: svbLine .55s cubic-bezier(.2,.7,.3,1) both; }
.svb-grid.visible .svb-funnel i:nth-child(2) { animation-delay: .12s; }
.svb-grid.visible .svb-funnel i:nth-child(3) { animation-delay: .24s; }
@keyframes svbLine { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.svb-cell:hover .svb-funnel i { transform: scaleX(1.03); }
/* 02 — kesişen kitle daireleri + gerçek alıcı */
.svb-venn { position: relative; width: 92px; height: 56px; }
.svb-venn i { position: absolute; top: 0; width: 56px; height: 56px; border-radius: 50%; border: 1.5px solid color-mix(in srgb, var(--tone) 38%, transparent); background: color-mix(in srgb, var(--tone-soft) 55%, transparent); }
.svb-venn i:nth-child(1) { left: 0; }
.svb-venn i:nth-child(2) { right: 0; }
.svb-venn b {
position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 1;
width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center;
background: var(--tone); color: #fff; font-size: .72rem; border: 2px solid #fff;
box-shadow: 0 6px 14px -6px var(--tone);
}
.svb-cell:hover .svb-venn b { animation: svbPop .4s cubic-bezier(.2,.7,.3,1); }
@keyframes svbPop { 50% { transform: translate(-50%, -50%) scale(1.18); } }
/* 03 — kreatif destesi: yelpaze kartlar */
.svb-deck { position: relative; width: 84px; height: 58px; }
.svb-deck i, .svb-deck b { position: absolute; inset: 0; border-radius: 10px; border: 1px solid color-mix(in srgb, var(--tone) 30%, transparent); background: #fff; }
.svb-deck i:nth-child(1) { transform: rotate(-7deg) translateX(-7px); background: var(--tone-soft); }
.svb-deck i:nth-child(2) { transform: rotate(-2deg); background: color-mix(in srgb, var(--tone-soft) 55%, #fff); }
.svb-deck b { transform: rotate(4deg) translateX(7px); display: grid; place-items: center; color: var(--tone-ink); font-size: 1.05rem; transition: transform .3s ease; }
.svb-cell:hover .svb-deck b { transform: rotate(7deg) translateX(11px) translateY(-3px); }
.svb-cell:hover .svb-deck i:nth-child(1) { transform: rotate(-10deg) translateX(-11px); }
.svb-deck i { transition: transform .3s ease; }
/* 04 — katalog: 2x2 ürün karoları + şimşek */
.svb-cat { position: relative; display: grid; grid-template-columns: 30px 30px; grid-auto-rows: 26px; gap: 6px; }
.svb-cat i { border-radius: 7px; background: color-mix(in srgb, var(--tone-soft) 70%, #fff); border: 1px solid color-mix(in srgb, var(--tone) 24%, transparent); }
.svb-cat b {
border-radius: 7px; display: grid; place-items: center; font-size: .72rem;
background: var(--tone); color: #fff; box-shadow: 0 6px 14px -6px var(--tone);
}
.svb-cell:hover .svb-cat b { animation: svbPulse 1s ease-in-out infinite; }
@keyframes svbPulse { 50% { transform: scale(1.12); } }
/* 05 — A/B kapsülü: kazanan A */
.svb-ab { display: flex; gap: 8px; align-items: center; }
.svb-ab span { display: inline-flex; align-items: center; gap: 5px; font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 12px; font-weight: 700; padding: 9px 14px; border-radius: 999px; }
.svb-ab .a { background: var(--tone); color: #fff; box-shadow: 0 8px 18px -8px var(--tone); }
.svb-ab .b { background: #fff; color: #94a3b8; border: 1.5px dashed #d4dbe4; }
.svb-cell:hover .svb-ab .a { animation: svbPop2 .4s cubic-bezier(.2,.7,.3,1); }
@keyframes svbPop2 { 50% { transform: scale(1.1); } }
/* 06 — sparkline: yükselen barlar + ROAS etiketi */
.svb-spark { position: relative; display: flex; align-items: flex-end; gap: 6px; height: 64px; width: clamp(150px, 14vw, 210px); padding-top: 14px; }
.svb-spark i { flex: 1; height: var(--h, 40%); border-radius: 4px 4px 2px 2px; background: linear-gradient(180deg, color-mix(in srgb, var(--tone) 65%, #fff), var(--tone)); transform-origin: bottom; }
.svb-spark-tag { position: absolute; top: -6px; right: 0; font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 9px; font-weight: 700; letter-spacing: .12em; color: var(--tone-ink); background: var(--tone-soft); padding: 3px 8px; border-radius: 6px; }
.svb-grid.visible .svb-spark i { animation: svbBar .6s cubic-bezier(.2,.7,.3,1) both; }
.svb-grid.visible .svb-spark i:nth-child(3) { animation-delay: .07s; }
.svb-grid.visible .svb-spark i:nth-child(4) { animation-delay: .14s; }
.svb-grid.visible .svb-spark i:nth-child(5) { animation-delay: .21s; }
.svb-grid.visible .svb-spark i:nth-child(6) { animation-delay: .28s; }
.svb-grid.visible .svb-spark i:nth-child(7) { animation-delay: .35s; }
.svb-grid.visible .svb-spark i:nth-child(8) { animation-delay: .42s; }
@keyframes svbBar { from { transform: scaleY(0); } to { transform: scaleY(1); } }
@media (prefers-reduced-motion: reduce) {
.svb-grid.visible .svb-funnel i, .svb-grid.visible .svb-spark i { animation: none; }
.svb-cell:hover .svb-venn b, .svb-cell:hover .svb-cat b, .svb-cell:hover .svb-ab .a { animation: none; }
}
@media (max-width: 980px) {
.svb-grid { grid-template-columns: 1fr 1fr; }
.svb-wide { grid-column: span 2; }
}
@media (max-width: 620px) {
.svb-grid { grid-template-columns: 1fr; border-radius: 16px; }
.svb-wide { grid-column: span 1; flex-direction: column; align-items: flex-start; }
.svb-cell { padding: 24px 22px; }
}
/* ===== DİJİTAL ÇÖZÜMLER — web/e-ticaret showcase (sol metin / sağ cihaz mockup + 3 özellik) ===== */
.dsx-section { position: relative; padding: clamp(56px,8vw,110px) 0 clamp(130px,14vw,190px); background: var(--c-bg); overflow: hidden; }
.dsx-top { display: grid; grid-template-columns: 1fr 1.08fr; gap: clamp(32px,5vw,76px); align-items: center; }
/* SOL — metin */
.dsx-meta { display: flex; align-items: center; gap: 12px; margin-bottom: clamp(16px,2vw,24px); }
.dsx-num { font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 12px; font-weight: 700; letter-spacing: .1em; color: var(--c-accent); }
.dsx-mline { width: 36px; height: 1px; background: var(--c-border); }
.dsx-eyebrow { font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 11px; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: var(--c-muted); }
.dsx-title { font-family: 'Urbanist', 'Outfit', sans-serif; font-weight: 800; font-size: clamp(30px,4vw,52px); line-height: 1.08; letter-spacing: -.03em; color: var(--c-text); margin: 0 0 clamp(16px,2vw,22px); }
.dsx-title em { font-style: normal; color: var(--c-accent); }
.dsx-text { font-family: 'Urbanist', 'Outfit', sans-serif; font-size: clamp(15px,1.2vw,17px); line-height: 1.75; color: var(--c-muted); margin: 0 0 clamp(24px,3vw,34px); max-width: 48ch; }
.dsx-cta { padding: 15px 32px; font-size: 1rem; }
.dsx-cta i { transition: transform .25s ease; }
.dsx-cta:hover i { transform: translateX(4px); }
/* SAĞ — cihaz showcase */
.dsx-show { position: relative; }
/* hazır cihaz sahnesi görseli (laptop + telefon + yüzen kartlar) — kenarları feather mask ile zemine eritilir */
.dsx-scene {
width: 100%; height: auto; display: block;
-webkit-mask:
linear-gradient(to right, transparent 0, #000 7%, #000 93%, transparent 100%),
linear-gradient(to bottom, transparent 0, #000 6%, #000 94%, transparent 100%);
mask:
linear-gradient(to right, transparent 0, #000 7%, #000 93%, transparent 100%),
linear-gradient(to bottom, transparent 0, #000 6%, #000 94%, transparent 100%);
-webkit-mask-composite: source-in;
mask-composite: intersect;
}
/* 3 özellik kutusu */
.dsx-feats { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(22px,3.5vw,48px); margin-top: clamp(52px,7vw,96px); }
.dsx-ico { display: inline-grid; place-items: center; width: 54px; height: 54px; border-radius: 15px; font-size: 23px; margin-bottom: 18px; }
.dsx-ico-blue { background: color-mix(in srgb, var(--c-accent) 14%, #fff); color: var(--c-accent); }
.dsx-ico-pink { background: var(--c-pink-soft); color: var(--c-pink); }
.dsx-ico-mint { background: color-mix(in srgb, var(--c-mint) 32%, #fff); color: color-mix(in srgb, var(--c-mint) 32%, var(--c-text)); }
.dsx-feat-t { font-family: 'Urbanist', 'Outfit', sans-serif; font-weight: 700; font-size: clamp(16px,1.5vw,19px); letter-spacing: -.01em; color: var(--c-text); margin: 0 0 8px; }
.dsx-feat-d { font-family: 'Urbanist', 'Outfit', sans-serif; font-size: clamp(13px,1.1vw,15px); line-height: 1.65; color: var(--c-muted); margin: 0; max-width: 34ch; }
@media (max-width: 920px) {
.dsx-top { grid-template-columns: 1fr; gap: clamp(36px,7vw,56px); }
/* Mobil: 3 özellik → beyaz kart + ikon-solda yatay düzen (sade liste yerine derli toplu, markaya uygun) */
.dsx-feats { grid-template-columns: 1fr; gap: 14px; margin-top: clamp(32px,8vw,52px); }
.dsx-feat {
max-width: 520px;
display: grid;
grid-template-columns: auto 1fr;
column-gap: 15px;
row-gap: 5px;
align-items: start;
background: #fff;
border: 1px solid rgba(10,14,26,.07);
border-radius: 16px;
padding: 18px 18px;
box-shadow: 0 6px 20px rgba(10,14,26,.05);
}
.dsx-feat .dsx-ico { grid-row: 1 / 3; align-self: start; margin-bottom: 0; width: 46px; height: 46px; font-size: 20px; border-radius: 13px; }
.dsx-feat-t { grid-column: 2; align-self: center; margin: 0; }
.dsx-feat-d { grid-column: 2; max-width: none; }
.dsx-scene { max-width: 560px; margin: 0 auto; }
}
/* Mobilde bölüm alt padding'leri marquee üstünde dev boşluk yaratıyordu → eşit kıs (base'den SONRA) */
@media (max-width: 720px) {
.dsx-section { padding-bottom: 16px; padding-top: 32px; }
.sv-section { padding-bottom: 16px; padding-top: 32px; }
.who-section { padding-bottom: 16px; }
}
/* Mobilde Teklif Al butonu tam genişlik + ortalı (diğer CTA'larla aynı dil) */
@media (max-width: 720px) {
.dsx-cta { width: 100%; justify-content: center; }
}
/* ===== BİZ KİMİZ — 2 kolon: solda ikonlu bloklar / sağda görsel kart ===== */
.wkx { display: grid; grid-template-columns: .92fr 1.08fr; gap: clamp(30px,4.5vw,68px); align-items: start; max-width: 1120px; margin: clamp(26px,3.5vw,48px) auto 0; }
/* SOL — ikonlu özellik blokları */
.wkx-list { display: flex; flex-direction: column; }
.wkx-item { padding: clamp(22px,2.6vw,32px) 0; border-bottom: 1px solid var(--c-border); }
.wkx-item:first-child { padding-top: 4px; }
.wkx-item:last-child { border-bottom: 0; }
.wkx-ico { display: inline-grid; place-items: center; width: 50px; height: 50px; border-radius: 14px; font-size: 22px; margin-bottom: 15px; }
.wkx-ico-blue { background: color-mix(in srgb, var(--c-accent) 14%, #fff); color: var(--c-accent); }
.wkx-ico-pink { background: var(--c-pink-soft); color: var(--c-pink); }
.wkx-ico-mint { background: color-mix(in srgb, var(--c-mint) 32%, #fff); color: color-mix(in srgb, var(--c-mint) 32%, var(--c-text)); }
.wkx-item-t { font-family: 'Urbanist', 'Outfit', sans-serif; font-weight: 700; font-size: clamp(17px,1.6vw,20px); letter-spacing: -.01em; color: var(--c-text); margin: 0 0 9px; }
.wkx-item-d { font-family: 'Urbanist', 'Outfit', sans-serif; font-size: clamp(14px,1.1vw,15.5px); line-height: 1.7; color: var(--c-muted); margin: 0; }
/* SAĞ — görsel kart */
/* kutu YOK: başlık + paragraf + sahne doğrudan sayfa zemininde, görsel kendi sahnesini içeriyor */
.wkx-card { background: none; border: 0; box-shadow: none; padding: 0; }
.wkx-card-t { font-family: 'Urbanist', 'Outfit', sans-serif; font-weight: 800; font-size: clamp(22px,2.4vw,30px); line-height: 1.18; letter-spacing: -.02em; color: var(--c-text); margin: 0 0 12px; }
.wkx-card-t em { font-style: normal; color: var(--c-accent); }
.wkx-card-p { font-family: 'Urbanist', 'Outfit', sans-serif; font-size: clamp(14px,1.15vw,16px); line-height: 1.7; color: var(--c-muted); margin: 0 0 clamp(8px,1.5vw,16px); max-width: 46ch; }
/* canlı mini-UI kart kolajı — üst üste binen, hafif yüzen kartlar */
.wkx-card-media { margin-top: clamp(10px,1.6vw,18px); }
.wkx-collage {
display: grid;
grid-template-columns: 1fr 1fr;
gap: clamp(13px,1.5vw,19px);
align-items: start;
/* alt kenarı zemine kaynaştır — referanstaki gibi sönen kolaj */
-webkit-mask-image: linear-gradient(180deg, #000 0%, #000 88%, transparent 100%);
mask-image: linear-gradient(180deg, #000 0%, #000 88%, transparent 100%);
}
/* ikinci sütun aşağı kaysın → masonry / şaşırtmalı his */
.wkx-collage > .wkc:nth-child(even) { margin-top: clamp(26px,3.4vw,46px); }
.wkc {
position: relative;
background:
linear-gradient(#fff, #fff) padding-box,
linear-gradient(180deg, rgba(255,255,255,.9), rgba(231,238,246,.9)) border-box;
border: 1px solid transparent;
border-radius: 18px;
padding: 15px 16px 16px;
/* katmanlı gölge: yakın temas + derin yumuşak */
box-shadow:
0 1px 2px rgba(10,14,26,.05),
0 2px 6px rgba(10,14,26,.04),
0 26px 46px -26px rgba(15,32,56,.34);
font-family: 'Urbanist', 'Outfit', sans-serif;
font-feature-settings: 'tnum' 1, 'cv01' 1;
--rot: -1.4deg;
transform: rotate(var(--rot));
animation: wkc-float 6.5s ease-in-out infinite;
animation-delay: var(--d, 0s);
will-change: transform;
}
/* cam üst-highlight */
.wkc::before {
content: ""; position: absolute; inset: 1px 1px auto 1px; height: 40%;
border-radius: 17px 17px 40% 40%;
background: linear-gradient(180deg, rgba(255,255,255,.7), transparent);
pointer-events: none;
}
.wkx-collage > .wkc:nth-child(even) { --rot: 1.4deg; }
@keyframes wkc-float {
0%, 100% { transform: rotate(var(--rot)) translateY(0); }
50% { transform: rotate(var(--rot)) translateY(-8px); }
}
/* kart başlığı */
.wkc-h { display: flex; align-items: center; gap: 9px; position: relative; }
.wkc-ico { display: inline-grid; place-items: center; width: 32px; height: 32px; border-radius: 10px; font-size: 16px; flex: none; box-shadow: inset 0 0 0 1px rgba(10,14,26,.04); }
.wkc-h-t { font-weight: 700; font-size: 13px; letter-spacing: -.01em; color: var(--c-text); }
/* canlı rozet */
.wkc-live { margin-left: auto; display: inline-flex; align-items: center; gap: 5px; font-size: 10.5px; font-weight: 700; letter-spacing: .02em; color: #1f9d57; text-transform: uppercase; }
.wkc-live i { width: 6px; height: 6px; border-radius: 50%; background: #2bbd6e; box-shadow: 0 0 0 0 rgba(43,189,110,.5); animation: wkc-pulse 1.8s ease-out infinite; }
@keyframes wkc-pulse { 0% { box-shadow: 0 0 0 0 rgba(43,189,110,.5); } 70% { box-shadow: 0 0 0 7px rgba(43,189,110,0); } 100% { box-shadow: 0 0 0 0 rgba(43,189,110,0); } }
/* büyük KPI satırı */
.wkc-kpi { display: flex; align-items: baseline; gap: 9px; margin-top: 13px; }
.wkc-kpi strong { font-size: 25px; font-weight: 800; letter-spacing: -.025em; color: var(--c-text); }
.wkc-delta { display: inline-flex; align-items: center; gap: 1px; font-size: 12px; font-weight: 800; padding: 2px 7px 2px 4px; border-radius: 999px; }
.wkc-delta i { font-size: 16px; margin-right: -2px; }
.wkc-up { color: #1f9d57; background: color-mix(in srgb, var(--c-mint) 42%, #fff); }
/* alan grafiği */
.wkc-spark { width: 100%; height: 56px; margin-top: 8px; display: block; overflow: visible; }
.wkc-stroke { fill: none; stroke: var(--c-accent); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.wkc-node { fill: #fff; stroke: var(--c-accent); stroke-width: 2.4; }
.wkc-foot { margin: 9px 0 0; font-size: 11.5px; color: var(--c-muted); }
/* durum satırı */
.wkc-status { display: flex; align-items: center; gap: 7px; margin: 12px 0 0; font-size: 12.5px; font-weight: 600; color: var(--c-text); }
.wkc-dot-on { width: 7px; height: 7px; border-radius: 50%; background: #2bbd6e; flex: none; box-shadow: 0 0 0 3px color-mix(in srgb, var(--c-mint) 45%, #fff); }
/* çift metrik */
.wkc-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 12px; }
.wkc-stats > div { background: color-mix(in srgb, var(--c-accent) 5%, #fff); border-radius: 11px; padding: 8px 10px; }
.wkc-stats small { display: block; font-size: 10.5px; color: var(--c-muted); margin-bottom: 2px; }
.wkc-stats b { font-size: 16px; font-weight: 800; letter-spacing: -.02em; color: var(--c-text); }
/* renk kimlikleri (ikon zemini) */
.wkc-blue .wkc-ico { background: color-mix(in srgb, var(--c-accent) 14%, #fff); color: var(--c-accent); }
.wkc-blue2 .wkc-ico { background: color-mix(in srgb, var(--c-accent) 14%, #fff); color: var(--c-accent); }
.wkc-pink .wkc-ico { background: var(--c-pink-soft); color: var(--c-pink); }
.wkc-mint .wkc-ico { background: color-mix(in srgb, var(--c-mint) 34%, #fff); color: #1f9d57; }
.wkc-yellow .wkc-ico { background: color-mix(in srgb, var(--c-yellow) 34%, #fff); color: #b07d00; }
.wkc-lilac .wkc-ico { background: color-mix(in srgb, var(--c-lilac) 40%, #fff); color: #6b4fc4; }
/* toggle */
.wkc-toggle { margin-left: auto; width: 36px; height: 20px; border-radius: 999px; background: linear-gradient(135deg, var(--c-pink), #ff7a88); position: relative; flex: none; box-shadow: inset 0 1px 2px rgba(120,10,30,.25); }
.wkc-toggle i { position: absolute; top: 2px; right: 2px; width: 16px; height: 16px; border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgba(0,0,0,.2); }
/* SEO arama + sıra */
.wkc-search { display: flex; align-items: center; gap: 7px; padding: 9px 12px; background: color-mix(in srgb, var(--c-mint) 8%, #fff); border: 1px solid color-mix(in srgb, var(--c-mint) 35%, #fff); border-radius: 999px; font-size: 11.5px; color: var(--c-muted); }
.wkc-search i { font-size: 11px; color: #1f9d57; }
.wkc-rank { display: flex; align-items: center; gap: 9px; margin-top: 12px; font-weight: 700; font-size: 12.5px; color: var(--c-text); }
.wkc-rank-no { display: inline-grid; place-items: center; width: 24px; height: 24px; border-radius: 8px; background: linear-gradient(135deg, #2bbd6e, #1f9d57); color: #fff; font-size: 12px; font-weight: 800; flex: none; box-shadow: 0 4px 10px -3px rgba(31,157,87,.55); }
.wkc-rank-t { flex: 1; }
.wkc-rank-up { display: inline-flex; align-items: center; font-size: 11px; font-weight: 800; color: #1f9d57; }
.wkc-rank-up i { font-size: 14px; margin-right: -3px; }
/* e-ticaret siparişi */
.wkc-paid { margin-left: auto; display: inline-grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; background: #2bbd6e; color: #fff; font-size: 11px; }
.wkc-order { display: flex; align-items: center; gap: 11px; margin-top: 13px; }
.wkc-thumb { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 11px; flex: none; color: #b07d00; font-size: 18px; background: linear-gradient(135deg, color-mix(in srgb, var(--c-yellow) 55%, #fff), color-mix(in srgb, var(--c-yellow) 24%, #fff)); box-shadow: inset 0 0 0 1px rgba(176,125,0,.12); }
.wkc-order-info { display: flex; flex-direction: column; gap: 2px; line-height: 1.2; }
.wkc-order-info b { font-size: 13px; color: var(--c-text); }
.wkc-order-info small { font-size: 14px; font-weight: 800; letter-spacing: -.01em; color: #b07d00; }
/* sosyal — avatar yığını (yüz YOK, renk diskleri) */
.wkc-avatars { display: flex; align-items: center; margin-top: 13px; }
.wkc-avatars i { width: 28px; height: 28px; border-radius: 50%; border: 2.5px solid #fff; margin-left: -9px; box-shadow: 0 2px 5px -2px rgba(10,14,26,.3); }
.wkc-avatars i:first-child { margin-left: 0; background: linear-gradient(135deg, var(--c-pink), #ff8a96); }
.wkc-avatars i:nth-child(2) { background: linear-gradient(135deg, var(--c-accent), #5cc6f5); }
.wkc-avatars i:nth-child(3) { background: linear-gradient(135deg, var(--c-lilac), #b6a0f5); }
.wkc-avatars span { margin-left: 9px; font-size: 12.5px; font-weight: 800; color: var(--c-text); }
/* destek — yıldız puan */
.wkc-stars { display: flex; align-items: center; gap: 2px; margin-top: 11px; color: var(--c-yellow); font-size: 12px; }
.wkc-stars b { margin-left: 6px; font-size: 12.5px; font-weight: 800; color: var(--c-text); }
@media (prefers-reduced-motion: reduce) {
.wkc, .wkc-live i { animation: none; }
}
@media (max-width: 920px) {
.wkx { grid-template-columns: 1fr; gap: clamp(28px,5vw,42px); }
.wkx-list { max-width: 560px; display: flex; flex-direction: column; gap: 14px; }
.wkx-card { max-width: 560px; }
/* Mobil: ayraç-çizgili liste → beyaz kart + ikon-solda yatay düzen (dsx ile tutarlı, derli toplu) */
.wkx-item {
padding: 18px 18px;
border-bottom: 0;
display: grid;
grid-template-columns: auto 1fr;
column-gap: 15px;
row-gap: 5px;
align-items: start;
background: #fff;
border: 1px solid rgba(10,14,26,.07);
border-radius: 16px;
box-shadow: 0 6px 20px rgba(10,14,26,.05);
}
.wkx-item:first-child { padding-top: 18px; }
.wkx-item .wkx-ico { grid-row: 1 / 3; align-self: start; margin-bottom: 0; width: 46px; height: 46px; font-size: 20px; border-radius: 13px; }
.wkx-item-t { grid-column: 2; align-self: center; margin: 0; }
.wkx-item-d { grid-column: 2; }
}
@media (max-width: 460px) {
.wkx-collage { grid-template-columns: 1fr; }
.wkx-collage > .wkc:nth-child(even) { margin-top: 0; }
}
/* ============================================================
MOBİL CİLA — 2026-06-21
1) Açılır akordeon menü 2) Dokunma hedefleri 3) Köşe çakışması
============================================================ */
/* ---- 1) Mobil menü: dropdown'ları akordeon yap ---- */
@media (max-width: 720px) {
/* Üst başlık tıklanır toggle (caret/satır stili yukarıdaki blokta) */
.main-nav .has-dropdown > a {
pointer-events: auto !important;
cursor: pointer;
-webkit-tap-highlight-color: transparent;
}
.main-nav .has-dropdown > a .caret { display: none !important; } /* chevron yerine + (a::after) */
/* mega-panel → akordeon gövdesi: grid-rows 0fr→1fr ile pürüzsüz aç/kapa */
.main-nav .has-dropdown > .mega-panel {
display: grid !important;
grid-template-rows: 0fr;
grid-template-columns: 1fr !important;
justify-items: stretch !important;
position: static !important;
opacity: 1 !important;
visibility: visible !important;
transform: none !important;
pointer-events: auto !important;
width: auto !important;
min-width: 0 !important;
max-width: none !important;
left: auto !important;
right: auto !important;
margin: 0 !important;
background: transparent !important;
border: 0 !important;
box-shadow: none !important;
overflow: hidden;
transition: grid-template-rows .3s cubic-bezier(.4, 0, .2, 1);
will-change: grid-template-rows;
}
.main-nav .has-dropdown.is-expanded > .mega-panel { grid-template-rows: 1fr; }
/* iç dekoratif kabuğu sıfırla + grid item (overflow gizli, min-height:0) */
.main-nav .mega-panel .mp-inner {
padding: 0 !important;
background: transparent !important;
backdrop-filter: none !important;
-webkit-backdrop-filter: none !important;
border: 0 !important;
box-shadow: none !important;
border-radius: 0 !important;
display: block !important;
width: 100% !important;
overflow: hidden;
min-height: 0;
}
.main-nav .has-dropdown.is-expanded > .mega-panel .mp-inner { padding: 2px 0 8px !important; }
.main-nav .mega-panel .mp-grid { width: 100% !important; }
.main-nav .mega-panel .mp-head { display: none !important; }
.main-nav .mega-panel .mp-grid {
display: flex !important;
flex-direction: column !important;
gap: 0 !important;
padding: 0 !important;
margin: 0 !important;
grid-template-columns: none !important;
}
/* alt madde = SADE girintili metin link (ikon çipi/kart zemini YOK — piksel) */
.main-nav .mega-panel .mp-row {
display: flex !important;
align-items: center;
gap: 0;
min-height: 50px;
padding: 12px 4px 12px 18px;
border-radius: 0;
border: 0 !important;
border-bottom: 1px solid rgba(10, 14, 26, .05) !important;
background: transparent !important;
opacity: 1 !important;
transform: none !important;
transition: color .18s ease !important;
transition-delay: 0s !important;
}
.main-nav .mega-panel .mp-grid > .mp-row:last-child { border-bottom: 0 !important; }
.main-nav .mega-panel .mp-row-icon { display: none !important; }
.main-nav .mega-panel .mp-row-body { min-width: 0; flex: 1 1 auto; }
.main-nav .mega-panel .mp-row-title {
font-size: 1.02rem; font-weight: 500;
color: #4b5563; line-height: 1.3;
}
.main-nav .mega-panel .mp-row-desc { display: none !important; }
.main-nav .mega-panel .mp-row-arrow { display: none !important; }
.main-nav .mega-panel .mp-row.is-current { background: transparent !important; box-shadow: none !important; }
.main-nav .mega-panel .mp-row.is-current .mp-row-title,
.main-nav .mega-panel .mp-row:active .mp-row-title { color: var(--c-accent); font-weight: 600; }
}
/* ---- 2) Dokunma hedefleri: footer + dil sekmesi ---- */
@media (max-width: 720px) {
.footer-col ul { gap: 0; }
.footer-col ul a { padding: 6px 0; min-height: 0; }
.footer-col-contact ul { gap: 4px; }
.footer-col-contact li,
.footer-col-contact a { min-height: 0; }
.lang-fab { padding: 9px 7px; gap: 5px; }
.lang-fab-opt { min-width: 40px; min-height: 36px; }
}
/* ---- 3) Köşe çakışması: davet kartı WhatsApp butonuna binmesin ---- */
@media (max-width: 720px) {
.dqx-peek { max-width: calc(100vw - 96px); }
}
/* ============================================================
MOBİL MENÜ PANEL FOOTER — ortalı iletişim + tam-genişlik CTA (piksel)
============================================================ */
.nav-panel-foot { display: none; }
@media (max-width: 720px) {
.main-nav .nav-panel-foot {
display: block;
width: 100%;
box-sizing: border-box;
margin-top: auto;
padding: 22px 16px calc(22px + env(safe-area-inset-bottom, 0px));
border-top: 1px solid rgba(10, 14, 26, .07);
background: transparent;
}
/* İletişim — ortalı, ikonsuz */
.main-nav .np-contact {
display: flex;
flex-direction: column;
align-items: center;
gap: 6px;
margin-bottom: 16px;
text-align: center;
}
.main-nav .np-contact a {
display: block;
padding: 0;
min-height: 0;
font-family: 'Urbanist', 'Outfit', sans-serif;
font-size: 1.05rem;
font-weight: 600;
letter-spacing: -.01em;
color: var(--c-primary);
text-decoration: none;
}
/* Tam-genişlik CTA */
.main-nav .np-cta {
display: flex;
align-items: center;
justify-content: center;
width: 100%;
padding: 15px 18px;
background: var(--c-accent);
color: #fff;
border: 0;
border-radius: 14px;
font-family: 'Urbanist', 'Outfit', sans-serif;
font-size: 1rem;
font-weight: 700;
letter-spacing: -.01em;
cursor: pointer;
box-shadow: 0 8px 20px -8px rgba(31, 167, 232, .55);
transition: transform .15s ease;
}
.main-nav .np-cta:active { transform: scale(.98); }
}
/* ============================================================
MOBİL MENÜ — üst öğe depth ikonları (renkli tonlu kareler)
Masaüstünde gizli; mobilde menüye canlılık katar
============================================================ */
.nav-ico { display: none; }
@media (max-width: 720px) {
.main-nav .nav-ico { display: none !important; } /* sade metin menü — renkli ikon çipleri kaldırıldı (piksel) */
/* marka paleti — her bölüme ayrı yumuşak ton */
.main-nav .nav-ico.bi-buildings { background: #efeafe; color: #7c5cff; }
.main-nav .nav-ico.bi-grid-1x2 { background: #e6f4fd; color: var(--c-accent); }
.main-nav .nav-ico.bi-megaphone { background: #fff3df; color: #e0931a; }
.main-nav .nav-ico.bi-life-preserver { background: #e3f7ee; color: #16a86a; }
.main-nav .nav-ico.bi-journal-text { background: #ffeaf0; color: #e8567f; }
.main-nav .nav-ico.bi-chat-dots { background: #e6f4fd; color: var(--c-accent); }
/* aktif/açık öğede ikon biraz vurgulansın */
.main-nav .has-dropdown.is-expanded > a .nav-ico { box-shadow: 0 0 0 3px rgba(31,167,232,.12); }
}
/* ============================================================
404 — Sayfa bulunamadı (on-brand, açık palet)
============================================================ */
.nf-section {
padding: calc(var(--header-h) + clamp(48px, 6vw, 96px)) 0 clamp(70px, 9vw, 130px);
text-align: center;
position: relative;
background: radial-gradient(120% 120% at 50% -10%, color-mix(in srgb, var(--c-accent) 9%, transparent) 0%, transparent 55%);
}
.nf-wrap { max-width: 620px; margin: 0 auto; }
.nf-eyebrow {
display: inline-flex; align-items: center; gap: 8px;
font-family: 'Urbanist','Outfit',sans-serif;
font-size: .78rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
color: var(--c-accent);
background: var(--c-accent-soft);
padding: 7px 15px; border-radius: 999px; margin-bottom: 22px;
}
.nf-code {
font-family: 'Urbanist','Outfit',sans-serif;
font-weight: 900; line-height: .92; letter-spacing: -.03em;
font-size: clamp(6rem, 22vw, 12rem);
background: linear-gradient(150deg, var(--c-accent) 0%, var(--c-accent-2) 100%);
-webkit-background-clip: text; background-clip: text;
-webkit-text-fill-color: transparent; color: transparent;
margin: 0;
}
.nf-title {
font-family: 'Urbanist','Outfit',sans-serif;
font-size: clamp(1.6rem, 3.4vw, 2.4rem); font-weight: 800; letter-spacing: -.01em;
color: var(--c-primary, #0A0E1A); margin: 4px 0 14px;
}
.nf-lead {
font-family: 'Urbanist','Outfit',sans-serif;
font-size: clamp(1rem, 1.3vw, 1.1rem); line-height: 1.65; color: #4b5563;
max-width: 460px; margin: 0 auto 34px;
}
.nf-actions {
display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; margin-bottom: 38px;
}
.nf-btn-primary, .nf-btn-ghost {
display: inline-flex; align-items: center; gap: 8px;
font-family: 'Urbanist','Outfit',sans-serif; font-weight: 600; font-size: .98rem;
padding: 14px 26px; border-radius: 999px; text-decoration: none;
transition: transform .2s ease, box-shadow .2s ease, background .2s ease, border-color .2s ease;
}
.nf-btn-primary {
background: linear-gradient(150deg, var(--c-accent), var(--c-accent-2)); color: #fff;
}
.nf-btn-primary:hover { transform: translateY(-2px); }
.nf-btn-ghost {
background: #fff; color: var(--c-primary, #0A0E1A); border: 1.5px solid var(--c-border);
}
.nf-btn-ghost:hover { border-color: var(--c-accent); color: var(--c-accent); }
.nf-btn-ghost i { transition: transform .2s ease; }
.nf-btn-ghost:hover i { transform: translateX(3px); }
.nf-links {
display: flex; flex-wrap: wrap; gap: 8px 18px; justify-content: center; align-items: center;
font-family: 'Urbanist','Outfit',sans-serif; font-size: .92rem;
padding-top: 26px; border-top: 1px solid #eef0f4;
}
.nf-links-lbl { color: #9aa3af; font-weight: 600; }
.nf-links a { color: var(--c-primary, #0A0E1A); font-weight: 600; text-decoration: none; transition: color .2s ease; }
.nf-links a:hover { color: var(--c-accent); }
@media (max-width: 600px) {
.nf-section { padding-top: calc(var(--header-h) + 76px); }
.nf-actions { flex-direction: column; align-items: stretch; }
.nf-btn-primary, .nf-btn-ghost { justify-content: center; }
}
/* ============================================================
İÇERİK KAYDIRMADAN GÖRÜNÜR — scroll-reveal artık içeriği GİZLEMEZ.
Önceden [data-anim] blokları ve [data-reveal] başlık kelimeleri (.w)
masaüstünde scroll'a kadar opacity:0 / soluk kalıyordu → "sayfanın
yarısı kaydırmadan yüklenmiyor". Artık her şey anında tam görünür.
(Mobilde zaten böyleydi; tüm ekranlara taşındı.)
============================================================ */
[data-anim] { opacity: 1 !important; transform: none !important; }
.w { color: var(--c-text) !important; }
.w.hl { color: var(--c-accent) !important; }