/* ==========================================================================
Vera Sustinera — tema stilleri (çok sayfalı). Renkler TEK yerde: :root.
========================================================================== */
/* --- Montserrat, yerel dosyalardan (Google'a bağlanılmaz) ---------------- */
@font-face {
font-family: "Montserrat"; font-style: normal; font-weight: 400 700; font-display: swap;
src: url("../fonts/montserrat-latin-ext.woff2") format("woff2");
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
font-family: "Montserrat"; font-style: normal; font-weight: 400 700; font-display: swap;
src: url("../fonts/montserrat-latin.woff2") format("woff2");
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
:root {
--c-primary: #1A0044; /* lacivert — ana renk */
--c-primary-2: #3A0099; /* koyu gradyanın mor ucu */
--c-accent: #5E0E0E; /* bordo — dozunda vurgu */
--c-link: #0A1E78; /* alt başlık ve bağlantı */
--c-tint: #F5E9EB; /* pudra zemin */
--c-text: #4A4A4A; /* gövde */
--c-footer: #12002E; /* footer: çok koyu lacivert (v3 E) */
--c-header-2: #26005F; /* üst bar gradyanının sağ ucu */
--c-white: #FFFFFF;
--c-neutral: #5C5C5C; --c-neutral-bg: #E9E9E9;
--c-lilac: #DCD2F1; /* koyu zeminde açık lila yazı/ikon */
--c-lilac-2: #C4AED4; /* koyu zeminde ikincil lila */
--c-lilac-3: #E4DCF4; /* koyu zeminde pasif etiket */
--c-line: #E5DCE0;
--c-line-soft: #F0E9F2; /* kart içi ince ayraç */
--c-tint-soft: #FAF3F4; /* pudra gradyanın açık ucu */
--c-mock-bg: #FAF8FA; /* temsili arayüz içerik zemini */
--c-muted: #7A7280; /* küçük açıklama/not */
--c-track: #EFE7F2; /* ilerleme çubuğu yuvası */
--grad-dark: linear-gradient(135deg, var(--c-primary) 0%, var(--c-primary-2) 100%);
--font: "Montserrat", "Helvetica Neue", Arial, sans-serif;
--header-h: 72px; /* masaüstünde 86px */
--radius: 8px;
--container: 1160px;
}
/* --- Sıfırlama --------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: reduce) {
html { scroll-behavior: auto; }
*, *::before, *::after { transition: none !important; animation: none !important; }
}
body { margin: 0; font-family: var(--font); font-weight: 500; font-size: 1rem; line-height: 1.65; color: var(--c-text); background: var(--c-white); }
img, svg { max-width: 100%; height: auto; display: block; }
a { color: var(--c-link); text-decoration: underline; text-underline-offset: 3px; }
a:hover, a:focus-visible { color: var(--c-accent); }
:focus-visible { outline: 3px solid var(--c-link); outline-offset: 3px; }
h1, h2, h3, h4 { color: var(--c-primary); line-height: 1.2; margin: 0 0 .6em; }
h1 { font-weight: 700; font-size: clamp(1.9rem, 4.5vw, 3rem); }
h2 { font-weight: 700; font-size: clamp(1.5rem, 3.2vw, 2.2rem); }
h3, .h3 { font-weight: 600; font-size: 1.12rem; color: var(--c-link); }
p { margin: 0 0 1em; }
ul, ol { margin: 0; padding: 0; list-style: none; }
em { font-style: italic; }
.screen-reader-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(1px, 1px, 1px, 1px); white-space: nowrap; }
.icon { width: 24px; height: 24px; flex-shrink: 0; }
.art { width: 100%; }
/* --- Düzen ---------------------------------------------------------------------- */
.container { width: min(100% - 2.5rem, var(--container)); margin-inline: auto; }
.container--narrow { max-width: 46rem; }
.section { padding: 3.5rem 0; scroll-margin-top: var(--header-h); }
.section--tint { background: var(--c-tint); }
.section--dark { background: var(--grad-dark); color: var(--c-white); }
.section--dark h2, .section--dark h3, .section--dark p, .section--dark a { color: var(--c-white); }
.section-head { max-width: 48rem; margin-bottom: 2rem; }
.section-head--center { margin-inline: auto; text-align: center; }
.eyebrow { display: inline-flex; align-items: center; gap: .6rem; font-size: .78rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--c-accent); margin-bottom: .9rem; }
.eyebrow::before { content: ""; width: 1.6rem; height: 2px; background: currentColor; }
.eyebrow--light { color: #DCD2F1; }
.lead { font-size: 1.08rem; }
.note { font-size: .88rem; opacity: .85; }
.note--center { text-align: center; }
.grid { display: grid; gap: 1.25rem; }
.grid > * { min-width: 0; }
@media (min-width: 768px) {
.section { padding: 5rem 0; }
.grid--2 { grid-template-columns: repeat(2, 1fr); }
.grid--3, .grid--4 { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1100px) { .grid--3 { grid-template-columns: repeat(3, 1fr); } .grid--4 { grid-template-columns: repeat(4, 1fr); } }
/* --- Butonlar ------------------------------------------------------------------ */
.btn { display: inline-flex; align-items: center; gap: .5rem; padding: .8rem 1.5rem; border-radius: var(--radius); font-weight: 600; font-size: .95rem; text-decoration: none; line-height: 1.2; border: 2px solid var(--c-primary); transition: background .15s, color .15s, border-color .15s; }
.btn .icon { width: 18px; height: 18px; }
.btn--primary { background: var(--c-primary); color: var(--c-white); }
.btn--primary:hover, .btn--primary:focus-visible { background: var(--c-link); border-color: var(--c-link); color: var(--c-white); }
.btn--outline { background: transparent; color: var(--c-primary); }
.btn--outline:hover, .btn--outline:focus-visible { background: var(--c-primary); color: var(--c-white); }
.btn--light { background: var(--c-white); color: var(--c-primary); border-color: var(--c-white); }
.btn--light:hover, .btn--light:focus-visible { background: var(--c-tint); border-color: var(--c-tint); color: var(--c-primary); }
.btn--ghost { background: transparent; color: var(--c-white); border-color: rgba(255,255,255,.7); }
.btn--ghost:hover, .btn--ghost:focus-visible { background: rgba(255,255,255,.12); color: var(--c-white); }
.section--dark .btn--light, .section--dark .btn--light:hover { color: var(--c-primary); }
.btn--tint { background: var(--c-tint); color: var(--c-primary); border-color: var(--c-tint); }
.btn--tint::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--c-accent); }
.btn--tint:hover, .btn--tint:focus-visible { background: var(--c-white); border-color: var(--c-white); color: var(--c-primary); }
.btn--ghost.is-disabled { opacity: .7; cursor: default; }
.btn--small { padding: .55rem 1rem; font-size: .86rem; }
.btn-row { display: flex; flex-wrap: wrap; align-items: center; gap: .8rem; }
.btn-row--center { justify-content: center; }
.link-arrow { display: inline-flex; align-items: center; gap: .35rem; font-weight: 600; text-decoration: none; }
.link-arrow .icon { width: 18px; height: 18px; transition: transform .15s; }
.link-arrow:hover .icon { transform: translateX(3px); }
/* --- Rozetler ve etiketler ------------------------------------------------- */
.badge { display: inline-block; padding: .3rem .7rem; border-radius: 999px; font-size: .72rem; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; line-height: 1.2; white-space: nowrap; }
.badge--live { background: var(--c-accent); color: var(--c-white); } /* Yayında */
.badge--testing { background: var(--c-tint); color: var(--c-accent); border: 1px solid var(--c-accent); } /* Son testlerde */
.badge--dev { background: var(--c-primary); color: var(--c-white); }
.badge--planned { background: var(--c-neutral-bg); color: var(--c-neutral); }
.badge--soon { background: var(--c-neutral-bg); color: var(--c-neutral); text-transform: none; font-size: .8rem; padding: .5rem .9rem; }
.section--dark .badge--planned { background: rgba(255,255,255,.18); color: var(--c-white); }
h2 .badge { vertical-align: middle; margin-left: .5rem; }
.pills { display: flex; flex-wrap: wrap; gap: .5rem; }
.pills li { padding: .4rem .9rem; border: 1px solid var(--c-primary); border-radius: 999px; font-size: .82rem; font-weight: 600; color: var(--c-primary); background: var(--c-white); }
.pills__title { margin: 1.5rem 0 .75rem; font-size: .95rem; }
.tags { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: .75rem; }
.tags li { font-size: .72rem; font-weight: 600; padding: .25rem .6rem; border-radius: 4px; background: var(--c-white); color: var(--c-link); border: 1px solid var(--c-line); }
/* --- Kutu dili ---------------------------------------------------------------- */
.box { background: var(--c-tint); border-top: 3px solid var(--c-primary); border-radius: 0 0 var(--radius) var(--radius); padding: 1.5rem; }
.box--accent { border-top-color: var(--c-accent); }
.box h3 { margin-bottom: .5rem; }
.box p:last-child { margin-bottom: 0; }
.section--tint .box { background: var(--c-white); }
.glass { background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.28); border-radius: var(--radius); padding: 1.5rem; backdrop-filter: blur(6px); }
.glass p:last-child { margin-bottom: 0; }
.glass__icon { width: 32px; height: 32px; margin-bottom: .75rem; color: #DCD2F1; }
.glass--big { padding: 2rem; }
.glass__lead { font-size: 1.25rem; font-weight: 600; line-height: 1.4; }
.card { display: flex; flex-direction: column; }
.card__icon { display: inline-flex; width: 44px; height: 44px; align-items: center; justify-content: center; border-radius: 10px; background: var(--c-white); color: var(--c-primary); margin-bottom: .9rem; border: 1px solid var(--c-line); }
.section--tint .card__icon { background: var(--c-tint); }
.card__num { display: inline-flex; width: 36px; height: 36px; align-items: center; justify-content: center; border-radius: 50%; background: var(--c-primary); color: var(--c-white); font-weight: 700; margin-bottom: .9rem; }
.card__cite { margin-top: auto; padding-top: .75rem; font-size: .8rem; font-style: italic; color: var(--c-neutral); }
.quote-box { margin: 2rem 0 0; font-style: italic; font-size: 1.1rem; color: var(--c-primary); }
.quote-box p { margin: 0; }
.checklist li { display: flex; gap: .6rem; align-items: flex-start; margin-bottom: .6rem; }
.checklist .icon { width: 18px; height: 18px; margin-top: .25rem; color: var(--c-accent); }
.checklist--grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: .25rem 2rem; }
.list-cards { display: grid; gap: .75rem; margin-bottom: .5rem; }
.list-cards li { display: flex; gap: .9rem; align-items: center; padding: 1rem 1.25rem; font-weight: 600; color: var(--c-primary); }
.list-cards .icon { color: var(--c-accent); }
.split { display: grid; gap: 2rem; align-items: center; }
.split--top { align-items: start; }
@media (min-width: 768px) { .split { grid-template-columns: 1fr 1fr; gap: 3rem; } }
.prose h1 { margin-bottom: 1rem; }
.prose ul, .prose ol { list-style: disc; padding-left: 1.5rem; margin-bottom: 1em; }
/* --- Üst bar (v3 A): koyu gradyan tek bar --------------------------------- */
.site-header { position: sticky; top: 0; z-index: 50; background: linear-gradient(90deg, var(--c-primary) 0%, var(--c-header-2) 100%); border-bottom: 1px solid rgba(255,255,255,.12); }
.site-header .container { --container: 1260px; }
.site-header__inner { display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: var(--header-h); }
.site-logo { display: block; flex-shrink: 0; }
.site-logo img { height: 34px; width: auto; }
.nav-toggle { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; background: none; border: 1px solid rgba(255,255,255,.35); border-radius: var(--radius); cursor: pointer; color: var(--c-white); }
.nav-toggle__close, .nav-toggle[aria-expanded="true"] .nav-toggle__open { display: none; }
.nav-toggle[aria-expanded="true"] .nav-toggle__close { display: block; }
.site-nav { display: none; position: absolute; left: 0; right: 0; top: 100%; background: var(--c-header-2); border-bottom: 1px solid rgba(255,255,255,.15); padding: .5rem 1.25rem 1.25rem; max-height: calc(100vh - var(--header-h)); overflow-y: auto; }
.site-nav.is-open { display: block; }
.menu__item { position: relative; }
.menu__link { display: inline-flex; align-items: center; gap: .35rem; width: 100%; padding: .6rem .9rem; border-radius: 999px; font: inherit; font-weight: 600; color: #DCD2F1; text-decoration: none; background: none; border: 0; cursor: pointer; text-align: left; }
.menu__link:hover, .menu__link:focus-visible { color: var(--c-white); background: rgba(255,255,255,.08); }
.menu__link.is-active { color: var(--c-white); background: rgba(255,255,255,.16); }
.menu__btn .icon { width: 16px; height: 16px; margin-left: auto; transition: transform .15s; }
.has-sub.is-open .menu__btn .icon { transform: rotate(180deg); }
.sub-menu { display: none; margin: .25rem 0 .5rem 1rem; padding-left: .75rem; border-left: 2px solid rgba(255,255,255,.25); }
.has-sub.is-open .sub-menu { display: block; }
.sub-menu a { display: block; padding: .5rem .5rem; text-decoration: none; font-weight: 500; color: #DCD2F1; border-radius: 6px; }
.sub-menu a:hover, .sub-menu a:focus-visible { color: var(--c-white); background: rgba(255,255,255,.08); }
/* Sayfası henüz olmayan alt kalem: tıklanamaz, durumu yanında yazar. */
.sub-menu__disabled { display: flex; align-items: center; justify-content: space-between; gap: .75rem; padding: .5rem; color: rgba(220, 210, 241, .7); cursor: default; }
.sub-menu__status { font-size: .66rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; white-space: nowrap; color: var(--c-lilac-2); }
.site-nav__actions { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem; margin-top: 1rem; padding-top: 1rem; border-top: 1px solid rgba(255,255,255,.15); }
.site-nav__actions .btn { white-space: nowrap; }
@media (min-width: 1200px) {
:root { --header-h: 86px; }
.site-logo img { height: 40px; }
.nav-toggle { display: none; }
.site-nav { display: flex; align-items: center; gap: .5rem; position: static; border: 0; padding: 0; background: none; max-height: none; overflow: visible; }
.menu { display: flex; align-items: center; gap: .15rem; }
.menu__link { width: auto; padding: .5rem .7rem; font-size: .85rem; white-space: nowrap; }
.menu__btn .icon { margin-left: 0; }
.has-sub:hover .menu__btn .icon, .has-sub:focus-within .menu__btn .icon { transform: rotate(180deg); }
.sub-menu { display: none; position: absolute; top: calc(100% + .35rem); left: 0; min-width: 19rem; margin: 0; padding: .5rem; background: var(--c-white); border: 1px solid var(--c-line); border-top: 3px solid var(--c-primary); border-radius: 0 0 var(--radius) var(--radius); box-shadow: 0 12px 30px rgba(26,0,68,.18); }
.sub-menu::before { content: ""; position: absolute; left: 0; right: 0; top: -.6rem; height: .6rem; } /* hover boşluğu köprüsü */
.has-sub:hover .sub-menu, .has-sub:focus-within .sub-menu, .has-sub.is-open .sub-menu { display: block; }
.sub-menu a { padding: .5rem .75rem; color: var(--c-primary); }
.sub-menu__disabled { padding: .5rem .75rem; color: var(--c-neutral); }
.sub-menu__status { color: var(--c-primary-2); }
.sub-menu a:hover, .sub-menu a:focus-visible { background: var(--c-tint); color: var(--c-accent); }
.site-nav__actions { margin: 0; padding: 0 0 0 .9rem; gap: .5rem; border: 0; border-left: 1px solid rgba(255,255,255,.28); flex-wrap: nowrap; }
}
/* --- Sayfa başı (hero) ---------------------------------------------------- */
/* Üst çubuk koyu; hero'nun üst boşluğu dar tutulur ki pudra alan başlıkla bar arasında genişlemesin. */
.hero { padding: 1.75rem 0 3.5rem; background: linear-gradient(180deg, var(--c-tint) 0%, var(--c-white) 100%); }
.hero__inner { display: grid; gap: 2.5rem; align-items: center; }
.hero__text { max-width: 44rem; }
.hero__text .lead { margin-bottom: 1.5rem; }
.hero__logo { height: 56px; width: auto; margin-bottom: 1.25rem; }
.hero__quote { margin: 2rem 0 0; padding: .8rem 1.1rem; font-style: italic; font-size: .95rem; border-left: 3px solid var(--c-accent); color: var(--c-primary); background: var(--c-white); display: inline-block; }
.hero__art { max-width: 34rem; margin-inline: auto; width: 100%; }
.hero__art-title { font-size: .92rem; font-weight: 600; color: var(--c-link); text-align: center; margin-bottom: 1rem; }
@media (min-width: 768px) {
.hero { padding: 2.5rem 0 5rem; }
.hero--split .hero__inner { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 3rem; }
}
/* --- El çizimi tek çizgi aksanlar ---------------------------------------- */
/* Varsayılan: çizgi tam görünür (JS yokken de eksiksiz). JS varsa gizlenip
görünür olunca bir kez çizilir; prefers-reduced-motion'da animasyon yok. Yalnızca
pathLength taşıyan çizgiler animasyonludur (kesikli/kalın yardımcı çizgiler sabit kalır). */
.ink { display: block; }
.ink path[pathLength] { stroke-dashoffset: 0; }
.js .ink path[pathLength] { stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset .9s ease-out; }
.js .ink.is-drawn path[pathLength] { stroke-dashoffset: 0; }
@media (prefers-reduced-motion: reduce) {
.js .ink path[pathLength], .js .ink.is-drawn path[pathLength] { stroke-dashoffset: 0; transition: none; }
}
/* --- Ana sayfa hero'su (B1) ---------------------------------------------- */
.formula { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; margin-bottom: .5rem; }
.formula__group { display: inline-flex; align-items: center; gap: .4rem; white-space: nowrap; } /* işaret + hap birlikte kaydırılır */
.formula__op { font-weight: 700; color: var(--c-accent); }
.formula__pill { font-size: .72rem; font-weight: 600; padding: .32rem .8rem; border-radius: 999px; border: 1px solid var(--c-primary); color: var(--c-primary); background: var(--c-white); }
.formula__pill--result { background: var(--c-primary); color: var(--c-white); border-color: var(--c-primary); }
.formula__sub { font-size: .68rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--c-accent); margin-bottom: 1.25rem; }
.hero--home .hero__text { display: flex; flex-direction: column; align-items: flex-start; }
.hero--home .hero__title { display: flex; flex-direction: column; align-items: flex-start; gap: .1rem; margin-bottom: 1.25rem; }
.hero--home .hero__title h1 { margin: 0; font-size: 2rem; line-height: 1.15; letter-spacing: -.02em; text-wrap: balance; }
.hero__underline { width: 11.25rem; height: 11px; color: var(--c-accent); }
.hero--home .lead { font-size: 1rem; line-height: 1.65; max-width: 52ch; margin-bottom: 1.5rem; text-wrap: pretty; }
.hero--home .lead strong { color: var(--c-primary); font-weight: 700; }
.hero--home .btn-row { gap: .65rem; width: 100%; }
.btn__ink { width: 2.6rem; height: 1rem; flex-shrink: 0; }
.hero__quote--brackets { display: flex; align-items: center; gap: .6rem; margin: 1.25rem 0 0; padding: 0; border: 0; background: none; font-size: .95rem; }
.hero__quote--brackets .ink { width: 12px; height: 40px; color: var(--c-lilac-2); flex-shrink: 0; }
.hero__quote--brackets span { font-style: italic; line-height: 1.5; color: var(--c-primary); }
@media (max-width: 767px) {
.hero--home .btn-row .btn { width: 100%; justify-content: center; min-height: 44px; }
.journey__band span:last-child { flex: 1 0 100%; } /* mobilde açıklama kendi satırında */
}
@media (min-width: 768px) {
.hero--home .hero__title h1 { font-size: 2.875rem; line-height: 1.12; letter-spacing: -.025em; max-width: 17ch; }
.hero__underline { width: 14.375rem; height: 12px; }
.hero--home .lead { font-size: 1.0625rem; line-height: 1.7; }
.hero--home .btn-row { gap: .875rem; width: auto; }
.hero__quote--brackets { gap: .75rem; font-size: 1rem; }
.hero__quote--brackets .ink { width: 13px; height: 44px; }
}
/* --- Platform sayfası P1 (hero): vaat + temsili platform ekranı ----------- */
/* Mobil önce. 680 px'ten itibaren ekran sol panelli masaüstü düzenine geçer (604 px sabit);
1200 px'ten itibaren iki kolon ve ekran metin kolonu boyunca uzar. */
.phero { padding: 1.75rem 0 2rem; background: linear-gradient(180deg, var(--c-tint) 0%, var(--c-tint-soft) 100%); }
.phero__inner { display: grid; gap: 1.375rem; }
.phero__inner > * { min-width: 0; }
.phero__text { display: flex; flex-direction: column; align-items: flex-start; gap: .875rem; }
.phero__text h1 { margin: 0; font-size: 1.75rem; line-height: 1.18; letter-spacing: -.025em; text-wrap: balance; }
.phero__accent { width: 126px; height: 10px; color: var(--c-accent); }
.phero__lead { margin: 0; font-size: .90625rem; line-height: 1.68; text-wrap: pretty; }
.phero__points { display: flex; flex-direction: column; gap: .625rem; }
.phero__points li { display: grid; grid-template-columns: 20px minmax(0, 1fr); column-gap: .625rem; align-items: start; font-size: .875rem; line-height: 1.5; font-weight: 600; color: var(--c-primary); }
.phero__points .ink { width: 20px; height: 20px; color: var(--c-accent); }
.pmock { margin: 0; display: flex; flex-direction: column; gap: 9px; width: 100%; }
.pmock__screen { display: flex; flex-direction: column; background: var(--c-white); border: 1px solid var(--c-line); border-radius: 12px; overflow: hidden; box-shadow: 0 18px 40px rgba(26, 0, 68, .18); }
.pmock__side { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 12px 14px; background: linear-gradient(135deg, var(--c-primary), var(--c-primary-2)); }
.pmock__logo { width: 104px; height: auto; }
.pmock__mode { font-size: 8.5px; font-weight: 700; letter-spacing: .08em; color: rgba(220, 210, 241, .85); }
.pmock__nav, .pmock__user, .pmock__head, .pmock__ok { display: none; }
.pmock__main { display: flex; flex-direction: column; gap: 10px; padding: 14px; background: var(--c-mock-bg); line-height: 1.3; }
.pmock__card { display: flex; flex-direction: column; gap: 8px; padding: 12px; background: var(--c-white); border: 1px solid var(--c-line); border-radius: 10px; }
.pmock__card--tight { gap: 7px; }
.pmock__title { font-size: 9px; font-weight: 700; letter-spacing: .08em; color: var(--c-accent); }
.pmock__row { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.pmock__meta { font-size: 9px; color: var(--c-muted); }
.pmock__figure { display: flex; align-items: flex-end; gap: 8px; }
.pmock__figure .pmock__meta { padding-bottom: 4px; }
.pmock__figure--sm { gap: 6px; }
.pmock__figure--sm .pmock__meta { padding-bottom: 3px; }
.pmock__big { font-size: 28px; font-weight: 700; line-height: 1; letter-spacing: -.02em; color: var(--c-primary); }
.pmock__big--sm { font-size: 24px; }
.pmock__track { display: flex; height: 7px; border-radius: 999px; overflow: hidden; background: var(--c-track); }
.pmock__fill { width: 68%; border-radius: 999px; background: linear-gradient(90deg, var(--c-primary), var(--c-primary-2)); }
.pmock__track--split { height: 6px; }
.pmock__seg { width: 68%; background: var(--c-primary); }
.pmock__seg--rest { width: 32%; background: var(--c-lilac-2); }
.pmock__grid { display: grid; gap: 10px; }
.pmock__bars { display: flex; align-items: flex-end; gap: 10px; }
.pmock__bar { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 3px; font-size: 8px; color: var(--c-muted); }
.pmock__bar b { font-size: 10px; font-weight: 700; color: var(--c-primary); }
.pmock__col { width: 100%; border-radius: 4px 4px 0 0; }
.pmock__col--k1 { height: 26px; background: var(--c-primary); }
.pmock__col--k2 { height: 15px; background: var(--c-primary-2); }
.pmock__col--k3 { height: 44px; background: var(--c-lilac-2); }
.pmock__foot { font-size: 8.5px; color: var(--c-muted); }
.pmock__ok { font-size: 8.5px; color: var(--c-text); }
.pmock__wait { font-size: 9px; font-weight: 600; color: var(--c-accent); }
.pmock__kpi { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 8px; align-items: center; padding-top: 6px; border-top: 1px solid var(--c-line-soft); }
.pmock__kpi-title { font-size: 10px; font-weight: 600; color: var(--c-primary); }
.pmock__state { font-size: 8px; font-weight: 700; letter-spacing: .06em; border-radius: 999px; padding: 2px 6px; }
.pmock__state--done { color: var(--c-white); background: var(--c-primary); }
.pmock__state--doing { color: var(--c-primary); background: var(--c-lilac); }
.pmock__state--wait { color: var(--c-accent); background: var(--c-tint); }
.pmock__kpi-note { grid-column: 1 / -1; font-size: 9px; color: var(--c-muted); }
.pmock__note { font-size: 11.5px; line-height: 1.4; color: var(--c-muted); }
@media (min-width: 680px) {
.pmock { width: 604px; max-width: 100%; margin-inline: auto; }
.pmock__screen { flex: 1; display: grid; grid-template-columns: 136px minmax(0, 1fr); border-radius: 14px; box-shadow: 0 28px 64px rgba(26, 0, 68, .22); }
.pmock__side { flex-direction: column; align-items: stretch; justify-content: flex-start; gap: 14px; padding: 15px 12px; background: linear-gradient(160deg, var(--c-primary), var(--c-primary-2)); }
.pmock__logo { width: 98px; }
.pmock__mode { display: none; }
.pmock__nav { display: flex; flex-direction: column; gap: 3px; }
.pmock__nav ul { display: flex; flex-direction: column; gap: 3px; }
.pmock__navtitle { margin-bottom: 2px; font-size: 7.5px; font-weight: 700; letter-spacing: .16em; color: rgba(220, 210, 241, .6); }
.pmock__nav li { display: flex; align-items: center; gap: 7px; padding: 6px 8px; border-radius: 7px; font-size: 9.5px; font-weight: 600; line-height: 1.2; color: rgba(220, 210, 241, .85); }
.pmock__nav li.is-active { background: rgba(220, 210, 241, .18); color: var(--c-white); }
.pmock__nav .icon { width: 12px; height: 12px; }
.pmock__user { display: flex; align-items: center; gap: 7px; margin-top: auto; padding-top: 12px; border-top: 1px solid rgba(220, 210, 241, .2); font-size: 8.5px; color: rgba(220, 210, 241, .85); }
.pmock__avatar { display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; border-radius: 999px; background: rgba(220, 210, 241, .24); color: var(--c-white); font-size: 8px; font-weight: 700; }
.pmock__main { gap: 9px; padding: 15px 16px 16px; }
.pmock__head { display: flex; align-items: flex-end; justify-content: space-between; gap: 10px; }
.pmock__head-title { display: block; font-size: 12.5px; font-weight: 700; color: var(--c-primary); }
.pmock__head-sub { display: block; margin-top: 2px; font-size: 9px; color: var(--c-muted); }
.pmock__pill { padding: 3px 8px; border: 1px solid var(--c-line); border-radius: 999px; background: var(--c-white); font-size: 8px; font-weight: 600; white-space: nowrap; color: var(--c-primary); }
.pmock__card { padding: 11px 12px; }
.pmock__meta, .pmock__wait { font-size: 8.5px; }
.pmock__big { font-size: 27px; }
.pmock__big--sm { font-size: 22px; }
.pmock__track { height: 6px; }
.pmock__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 9px; }
.pmock__bars { gap: 7px; }
.pmock__bar { font-size: 7.5px; }
.pmock__bar b { font-size: 9px; }
.pmock__col--k1 { height: 22px; }
.pmock__col--k2 { height: 13px; }
.pmock__col--k3 { height: 38px; }
.pmock__foot { font-size: 8px; }
.pmock__ok { display: block; }
.pmock__kpis { flex: 1; }
.pmock__note { text-align: right; }
}
@media (min-width: 768px) {
.phero { padding: 2.75rem 0 2.875rem; }
.phero__text { gap: 1.125rem; }
.phero__text h1 { font-size: 2.5rem; line-height: 1.14; }
.phero__line { display: block; }
.phero__accent { width: 168px; height: 11px; }
.phero__lead { font-size: 1rem; line-height: 1.72; max-width: 52ch; }
.phero__points { gap: .6875rem; margin-top: 2px; }
.phero__points li { grid-template-columns: 22px minmax(0, 1fr); column-gap: .6875rem; font-size: .9375rem; line-height: 1.55; }
.phero__points .ink { width: 22px; height: 22px; }
}
@media (min-width: 1200px) {
.phero__inner { grid-template-columns: minmax(0, 1fr) 604px; gap: 44px; align-items: stretch; max-width: 1168px; }
.phero .pmock { width: 604px; margin: 0; }
}
/* --- Platform sayfası P2: modüller (koyu bant) ----------------------------- */
/* Not: .num yardımcısı dosyada daha aşağıda tanımlı; rakam değişkenleri .pmods ile öncelik kazanır. */
/* Mobil önce: akordeon. 1100 px+ ve JS varken dizin + tek künye paneli. JS yoksa tüm
modüller açık liste. Durum rengi (--st*) rakam konturunu, başlık altı çizgisini ve
durum kutusunu birlikte sürer. Bordo yalnızca pudra gövdede. */
.pmods { padding: 2.125rem 0 2.375rem; background: linear-gradient(160deg, var(--c-primary) 0%, var(--c-primary-2) 100%); color: var(--c-lilac); }
.pmods :focus-visible { outline-color: var(--c-lilac); }
.pmods .pmods__body :focus-visible { outline-color: var(--c-link); }
.pmods__head { display: grid; gap: .875rem; margin-bottom: 1.5rem; }
.pmods__head-title { display: flex; flex-direction: column; align-items: flex-start; gap: .875rem; }
.pmods__head h2 { margin: 0; font-size: 1.875rem; line-height: 1.14; letter-spacing: -.025em; color: var(--c-white); }
.pmods__accent { width: 132px; height: 10px; color: var(--c-lilac); }
.pmods__intro { margin: 0; font-size: .90625rem; line-height: 1.68; color: var(--c-lilac); text-wrap: pretty; }
.pmods__item { --st: rgba(196, 174, 212, .7); --st-box-bg: rgba(196, 174, 212, .14); --st-box-text: var(--c-lilac); --st-box-border: rgba(196, 174, 212, .7); } /* Planlandı */
.pmods--testing, .pmods--live { --st: var(--c-tint); --st-box-bg: var(--c-tint); --st-box-text: var(--c-accent); --st-box-border: var(--c-tint); }
.pmods--dev { --st: var(--c-lilac); --st-box-bg: var(--c-lilac); --st-box-text: var(--c-primary); --st-box-border: var(--c-lilac); }
.pmods__grid { display: flex; flex-direction: column; gap: 10px; }
.pmods__grid, .pmods__item, .pmods__panel { scroll-margin-top: calc(var(--header-h) + 1rem); }
.pmods__item { border: 1px solid rgba(196, 174, 212, .22); border-radius: 11px; overflow: hidden; background: rgba(220, 210, 241, .07); }
.pmods__heading { margin: 0; font-size: inherit; line-height: inherit; color: inherit; }
.pmods__tab { display: grid; grid-template-columns: 38px minmax(0, 1fr) 20px; column-gap: 12px; align-items: center; width: 100%; min-height: 56px; padding: 13px 14px; border: 0; background: none; font: inherit; color: inherit; text-align: left; cursor: pointer; }
.pmods .pmods__num { --num-size: 26px; --num-stroke-w: 1.1px; --num-stroke: rgba(196, 174, 212, .55); line-height: 1; letter-spacing: -.04em; text-align: right; }
.pmods__tab-text { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; min-width: 0; }
.pmods__title { font-size: .90625rem; font-weight: 700; line-height: 1.28; color: var(--c-white); }
.pmods__box { display: inline-block; padding: 3px 7px; border: 1px solid rgba(196, 174, 212, .45); border-radius: 3px; background: transparent; font-size: 8px; font-weight: 700; line-height: 1.3; letter-spacing: .1em; text-transform: uppercase; white-space: nowrap; color: var(--c-lilac); }
.pmods__chev { width: 18px; height: 18px; color: var(--c-lilac); transition: transform .15s; }
.pmods__phead { display: none; }
.pmods__body { display: flex; flex-direction: column; gap: 13px; padding: 18px 16px 20px; background: var(--c-tint); }
.pmods__lead { margin: 0; font-size: .9375rem; line-height: 1.55; font-weight: 700; color: var(--c-primary); text-wrap: pretty; }
.pmods__points { display: flex; flex-direction: column; gap: 10px; }
.pmods__points li { display: grid; grid-template-columns: 19px minmax(0, 1fr); column-gap: 10px; align-items: start; font-size: .875rem; line-height: 1.6; color: var(--c-text); }
.pmods__points .ink { width: 19px; height: 19px; margin-top: 2px; color: var(--c-accent); }
.pmods__note { margin: 0; font-size: .8125rem; line-height: 1.6; font-style: italic; color: var(--c-accent); }
.pmods__cta { align-self: flex-start; display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 12px 19px; border-radius: 999px; background: var(--c-accent); font-size: .84375rem; font-weight: 700; line-height: 1.2; text-decoration: none; color: var(--c-white); }
.pmods__cta:hover, .pmods__cta:focus-visible { background: var(--c-primary); color: var(--c-white); }
.pmods__cta-ink { width: 22px; height: 9px; flex-shrink: 0; }
.pmods__foot { margin: 1.5rem 0 0; font-size: .875rem; line-height: 1.6; color: var(--c-lilac); }
/* Açık kart: JS yokken hepsi, mobilde yalnızca aktif olan */
html:not(.js) .pmods__item { border-color: rgba(196, 174, 212, .55); background: rgba(10, 0, 34, .42); }
html:not(.js) .pmods__tab { border-bottom: 2px solid var(--st); }
html:not(.js) .pmods__num { --num-stroke: var(--st); }
html:not(.js) .pmods__tab .pmods__box { color: var(--st-box-text); background: var(--st-box-bg); border-color: var(--st-box-border); }
html:not(.js) .pmods__chev { display: none; }
@media (max-width: 1099px) {
.js .pmods__item.is-active { border-color: rgba(196, 174, 212, .55); background: rgba(10, 0, 34, .42); }
.js .pmods__item.is-active .pmods__tab { border-bottom: 2px solid var(--st); }
.js .pmods__item.is-active .pmods__num { --num-stroke: var(--st); }
.js .pmods__item.is-active .pmods__tab .pmods__box { color: var(--st-box-text); background: var(--st-box-bg); border-color: var(--st-box-border); }
.js .pmods__item.is-active .pmods__chev { transform: rotate(180deg); }
.js .pmods__item:not(.is-active) .pmods__panel { display: none; }
}
@media (min-width: 1100px) {
.pmods { padding: 3.5rem 0 3.625rem; background: linear-gradient(135deg, var(--c-primary) 0%, var(--c-primary-2) 100%); }
.pmods .container { max-width: 1168px; }
.pmods__head { grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: 56px; align-items: end; margin-bottom: 36px; }
.pmods__head-title { gap: 1rem; }
.pmods__head h2 { font-size: 2.625rem; line-height: 1.12; }
.pmods__accent { width: 176px; height: 11px; }
.pmods__intro { font-size: 1.03125rem; line-height: 1.7; }
/* Dizin: sekiz satır; panel ikinci kolonda tüm satırları kaplar. Paneller aynı hücrede
üst üste durur (pasifler visibility:hidden), hücre en uzun panelin boyunu alır:
modül değişince bölüm zıplamaz. Son 1fr satır fazla yüksekliği dizin aralarına dağıtmaz. */
.js .pmods__grid { display: grid; grid-template-columns: 398px minmax(0, 1fr); grid-template-rows: repeat(8, auto) 1fr; column-gap: 44px; row-gap: 8px; align-items: start; }
.js .pmods__item { display: contents; }
.js .pmods__heading { grid-column: 1; }
.js .pmods__item:nth-child(1) .pmods__heading { grid-row: 1; }
.js .pmods__item:nth-child(2) .pmods__heading { grid-row: 2; }
.js .pmods__item:nth-child(3) .pmods__heading { grid-row: 3; }
.js .pmods__item:nth-child(4) .pmods__heading { grid-row: 4; }
.js .pmods__item:nth-child(5) .pmods__heading { grid-row: 5; }
.js .pmods__item:nth-child(6) .pmods__heading { grid-row: 6; }
.js .pmods__item:nth-child(7) .pmods__heading { grid-row: 7; }
.js .pmods__item:nth-child(8) .pmods__heading { grid-row: 8; }
.js .pmods__tab { grid-template-columns: 44px minmax(0, 1fr); column-gap: 13px; min-height: 0; padding: 12px 14px; border: 1px solid rgba(196, 174, 212, .2); border-radius: 9px; background: transparent; transition: background .15s, border-color .15s; }
.js .pmods__tab:hover { border-color: rgba(196, 174, 212, .4); }
.js .pmods__num { --num-size: 27px; --num-stroke: rgba(196, 174, 212, .5); }
.js .pmods__tab-text { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 10px; align-items: center; }
.js .pmods__title { font-size: .9375rem; line-height: 1.25; color: var(--c-lilac); }
.js .pmods__box { padding: 4px 7px; }
.js .pmods__chev { display: none; }
.js .pmods__item.is-active .pmods__tab { background: rgba(220, 210, 241, .12); border-color: rgba(196, 174, 212, .55); }
.js .pmods__item.is-active .pmods__num { --num-stroke: var(--st); }
.js .pmods__item.is-active .pmods__title { color: var(--c-white); }
.js .pmods__item.is-active .pmods__tab .pmods__box { color: var(--st-box-text); background: var(--st-box-bg); border-color: var(--st-box-border); }
.js .pmods__panel { grid-column: 2; grid-row: 1 / -1; align-self: stretch; display: flex; flex-direction: column; min-width: 0; min-height: 556px; border-radius: 14px; overflow: hidden; box-shadow: 0 26px 60px rgba(10, 0, 30, .34); visibility: hidden; }
.js .pmods__item.is-active .pmods__panel { visibility: visible; }
.js .pmods__phead { position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 11px; padding: 26px 30px 24px; overflow: hidden; background: rgba(10, 0, 34, .42); border-bottom: 2px solid var(--st); }
.pmods .pmods__bignum { position: absolute; top: 6px; right: 22px; --num-size: 96px; --num-stroke-w: 2.2px; --num-stroke: var(--st); line-height: 1; letter-spacing: -.04em; opacity: .55; pointer-events: none; }
.pmods__box--lg { padding: 5px 10px; font-size: 9.5px; letter-spacing: .12em; color: var(--st-box-text); background: var(--st-box-bg); border-color: var(--st-box-border); }
.pmods__ptitle { position: relative; max-width: 74%; font-size: 1.875rem; line-height: 1.16; font-weight: 700; letter-spacing: -.02em; color: var(--c-white); }
.js .pmods__body { flex: 1; gap: 14px; padding: 26px 30px 28px; }
.js .pmods__lead { font-size: 1.0625rem; }
.js .pmods__points li { grid-template-columns: 20px minmax(0, 1fr); column-gap: 11px; font-size: .9375rem; line-height: 1.62; }
.js .pmods__points .ink { width: 20px; height: 20px; }
.js .pmods__note { font-size: .84375rem; }
.js .pmods__cta { margin-top: auto; min-height: 0; padding: 11px 19px; }
.pmods__foot { margin-top: 1.75rem; font-size: .9375rem; }
}
/* --- Platform sayfası P3: kuruma ve sektöre uygun ekranlar (beyaz zemin) ----- */
/* Dikey boşluklar bilinçli olarak dar. Mobil önce: tek kolon, kartlar alt alta; 768 px+ iki
kart yan yana; 1200 px+ metin solda, 668 px kart alanı sağda. */
.pprof { padding: 1.625rem 0 1.875rem; background: var(--c-white); }
.pprof__inner { display: grid; gap: 18px; }
.pprof__inner > * { min-width: 0; }
.pprof__text { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; }
.pprof__text h2 { margin: 0; font-size: 1.6875rem; line-height: 1.18; letter-spacing: -.025em; text-wrap: balance; color: var(--c-primary); }
.pprof__accent { width: 126px; height: 10px; color: var(--c-accent); }
.pprof__lead, .pprof__promise { margin: 0; font-size: .90625rem; line-height: 1.68; text-wrap: pretty; }
.pprof__promise { font-weight: 600; color: var(--c-primary); }
.pprof__demo { margin: 0; display: flex; flex-direction: column; gap: 12px; }
.pprof__cards { display: grid; gap: 12px; }
.pprof__card { display: flex; flex-direction: column; overflow: hidden; background: var(--c-white); border: 1px solid var(--c-line); border-radius: 12px; box-shadow: 0 14px 32px rgba(26, 0, 68, .1); }
.pprof__card-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 12px 14px; background: linear-gradient(135deg, var(--c-primary), var(--c-primary-2)); }
.pprof__card-title { font-size: 12.5px; font-weight: 700; line-height: 1.3; color: var(--c-white); }
.pprof__tag { padding: 4px 7px; border-radius: 3px; background: var(--c-lilac); font-size: 8.5px; font-weight: 700; line-height: 1.3; letter-spacing: .1em; white-space: nowrap; color: var(--c-primary); }
.pprof__tag--dark { background: var(--c-primary); color: var(--c-white); }
.pprof__card-body { flex: 1; display: flex; flex-direction: column; gap: 13px; padding: 15px 14px 17px; }
.pprof__group { display: flex; flex-direction: column; gap: 10px; }
.pprof__group-head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.pprof__step { font-size: 8.5px; font-weight: 700; line-height: 1.3; letter-spacing: .12em; color: var(--c-accent); }
.pprof__q { display: flex; flex-direction: column; gap: 6px; }
.pprof__q-head { display: flex; flex-wrap: wrap; align-items: center; gap: 7px; }
.pprof__label { font-size: 11.5px; line-height: 1.35; color: var(--c-text); }
.pprof__scope { padding: 3px 6px; border-radius: 3px; background: var(--c-lilac); font-size: 8px; font-weight: 700; line-height: 1.3; letter-spacing: .08em; color: var(--c-primary); }
.pprof__chips { display: flex; flex-wrap: wrap; gap: 6px; }
.pprof__chip { display: inline-flex; align-items: center; gap: 6px; padding: 7px 10px; border: 1px solid var(--c-line); border-radius: 5px; background: var(--c-tint); font-size: 12px; font-weight: 700; line-height: 1.25; color: var(--c-primary); }
.pprof__tick { width: 10px; height: 10px; stroke-width: 3.4; color: var(--c-accent); }
.pprof__divider { width: 100%; height: 11px; color: var(--c-lilac-2); }
.pprof__note { display: grid; grid-template-columns: 20px minmax(0, 1fr); column-gap: 11px; align-items: start; padding: 14px 15px; border-radius: 10px; background: var(--c-tint); }
.pprof__note .ink { width: 20px; height: 20px; margin-top: 2px; color: var(--c-accent); }
.pprof__note p { margin: 0; }
.pprof__note-title { display: block; font-size: 13px; font-weight: 700; line-height: 1.45; color: var(--c-primary); }
.pprof__note-text { display: block; margin-top: 6px; font-size: 12.5px; line-height: 1.6; color: var(--c-text); }
.pprof__caption { font-size: 11.5px; line-height: 1.4; color: var(--c-text); }
@media (min-width: 768px) {
.pprof { padding: 30px 0 34px; }
.pprof__text { gap: 14px; }
.pprof__text h2 { font-size: 2.375rem; line-height: 1.15; }
.pprof__accent { width: 168px; height: 11px; }
.pprof__lead, .pprof__promise { max-width: 46ch; font-size: 1.03125rem; line-height: 1.72; }
.pprof__demo { gap: 16px; }
.pprof__cards { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; align-items: stretch; }
.pprof__card { box-shadow: 0 20px 46px rgba(26, 0, 68, .11); }
.pprof__card-head { padding: 13px 16px; }
.pprof__card-body { gap: 14px; padding: 16px 16px 18px; }
.pprof__group { gap: 11px; }
.pprof__label { font-size: 11px; }
.pprof__chip { padding: 6px 9px; font-size: 11.5px; }
.pprof__note { grid-template-columns: 22px minmax(0, 1fr); column-gap: 12px; padding: 16px 18px; }
.pprof__note .ink { width: 22px; height: 22px; }
.pprof__note-title { font-size: 13.5px; }
.pprof__note-text { font-size: 13px; }
.pprof__caption { text-align: right; }
}
@media (min-width: 1200px) {
.pprof__inner { grid-template-columns: minmax(0, 1fr) 668px; gap: 44px; align-items: center; max-width: 1168px; }
}
/* --- Platform sayfası P4: yönetim ve güvenlik (koyu bant) + ölçek / erişim (pudra şerit) --- */
/* Mobil önce. 768 px+ masaüstü ölçüleri (tablette alt alta), 1100 px+ iki kolon ve yan yana
paneller. Köşeler yalnızca dıştan yuvarlanır. Koyu bantta bordo yok. */
.pgov__band { padding: 30px 0 32px; border-radius: 12px 12px 0 0; background: linear-gradient(160deg, var(--c-primary) 0%, var(--c-primary-2) 100%); color: var(--c-lilac); }
.pgov__grid { display: flex; flex-direction: column; gap: 20px; }
.pgov__grid > * { min-width: 0; }
.pgov__text { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; }
.pgov__text h2 { margin: 0; font-size: 1.6875rem; line-height: 1.16; letter-spacing: -.025em; color: var(--c-white); }
.pgov__accent { width: 126px; height: 10px; color: var(--c-lilac); }
.pgov__lead { margin: 0; font-size: .90625rem; line-height: 1.68; color: var(--c-lilac); text-wrap: pretty; }
.pgov__list { display: flex; flex-direction: column; gap: 12px; margin-top: 8px; }
.pgov__list li { display: grid; grid-template-columns: 20px minmax(0, 1fr); column-gap: 11px; align-items: start; font-size: .90625rem; line-height: 1.55; font-weight: 600; color: var(--c-white); }
.pgov__list .ink { width: 20px; height: 20px; margin-top: 2px; color: var(--c-lilac); }
.pgov__list-desc { font-weight: 500; color: var(--c-lilac); }
.pgov__scheme { margin: 0; display: flex; flex-direction: column; gap: 8px; padding-top: 16px; border-top: 1px solid rgba(196, 174, 212, .32); }
.pgov__level { display: flex; flex-direction: column; gap: 5px; }
.pgov__level-label { margin: 0; display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 8px; color: var(--c-lilac); }
.pgov__level-k { font-size: 11px; font-weight: 700; line-height: 1.4; letter-spacing: .1em; }
.pgov__level-v { font-size: 12px; line-height: 1.45; }
.pgov__level-art { width: 100%; stroke-width: 2.4; }
.pgov__stem { stroke: rgba(196, 174, 212, .5); stroke-dasharray: 5 6; }
.pgov__bar { stroke: rgba(196, 174, 212, .8); stroke-width: 5; }
.pgov__dot { fill: var(--c-tint); stroke: none; r: 4.5px; }
.pgov__lock { margin: 6px 0 0; display: grid; grid-template-columns: 20px minmax(0, 1fr); column-gap: 11px; align-items: center; padding-top: 12px; border-top: 1px dashed rgba(196, 174, 212, .45); font-size: 12.5px; line-height: 1.5; color: var(--c-lilac); }
.pgov__lock svg { width: 19px; height: 19px; }
.pgov__caption { font-size: 11.5px; line-height: 1.4; color: rgba(220, 210, 241, .8); }
.pgov__strip { padding: 26px 0 30px; border-radius: 0 0 12px 12px; background: linear-gradient(180deg, var(--c-tint) 0%, var(--c-tint-soft) 100%); }
.pgov__panels { display: flex; flex-direction: column; gap: 18px; }
.pgov__panel { display: grid; grid-template-columns: 112px minmax(0, 1fr); gap: 16px; align-items: center; }
.pgov__panel .art-mono { width: 112px; height: 78px; }
.pgov__panel h3 { margin: 0 0 6px; font-size: 1.125rem; line-height: 1.26; font-weight: 700; letter-spacing: -.015em; color: var(--c-primary); }
.pgov__panel p { margin: 0; font-size: .875rem; line-height: 1.6; color: var(--c-text); text-wrap: pretty; }
.pgov__divider--h { display: block; width: 100%; height: 11px; }
.pgov__divider--v { display: none; }
@media (min-width: 768px) {
.pgov__band { padding: 46px 0 48px; background: linear-gradient(135deg, var(--c-primary) 0%, var(--c-primary-2) 100%); }
.pgov__grid { gap: 28px; }
.pgov__text { gap: 16px; }
.pgov__text h2 { font-size: 2.375rem; line-height: 1.14; }
.pgov__accent { width: 162px; height: 11px; }
.pgov__lead { max-width: 48ch; font-size: 1.03125rem; line-height: 1.7; }
.pgov__list { margin-top: 4px; }
.pgov__list li { grid-template-columns: 22px minmax(0, 1fr); column-gap: 12px; font-size: .96875rem; }
.pgov__list .ink { width: 22px; height: 22px; }
.pgov__scheme { gap: 12px; }
.pgov__level { display: grid; grid-template-columns: 126px minmax(0, 1fr); column-gap: 16px; align-items: center; }
.pgov__level-label { flex-direction: column; align-items: flex-end; gap: 3px; text-align: right; }
.pgov__level-art { stroke-width: 2; }
.pgov__bar { stroke-width: 4.5; }
.pgov__dot { r: 4px; }
.pgov__lock { margin-top: 0; grid-template-columns: 22px minmax(0, 1fr); }
.pgov__lock svg { width: 20px; height: 20px; }
.pgov__strip { padding: 34px 0 36px; }
.pgov__panel { grid-template-columns: 150px minmax(0, 1fr); gap: 22px; }
.pgov__panel .art-mono { width: 150px; height: 104px; }
.pgov__panel h3 { margin-bottom: 7px; font-size: 1.25rem; line-height: 1.25; }
.pgov__panel p { font-size: .90625rem; }
}
@media (min-width: 1100px) {
.pgov__grid { display: grid; grid-template-columns: minmax(0, 1fr) 500px; gap: 52px; align-items: center; max-width: 1168px; }
.pgov__scheme { padding-top: 0; border-top: 0; }
.pgov__panels { display: grid; grid-template-columns: minmax(0, 1fr) 14px minmax(0, 1fr); gap: 34px; align-items: center; max-width: 1168px; }
.pgov__divider--h { display: none; }
.pgov__divider--v { display: block; width: 14px; height: 220px; }
}
/* --- Platform sayfası P5: SSS (beyaz) + uzman desteği ara çağrısı (bordo) -------- */
/* Mobil önce; 768 px+ masaüstü ölçüleri, 1100 px+ SSS iki kolon. Köşeler yalnızca dıştan
yuvarlanır. Akordeon details/summary (JS yok); + / − tek çizgi işaret. Bordo bantta
yalnızca beyaz/pudra metin ve pudra dolgulu buton. */
.psup__faq { padding: 28px 0 30px; border-radius: 12px 12px 0 0; background: var(--c-white); }
.psup__grid { display: flex; flex-direction: column; gap: 18px; }
.psup__grid > * { min-width: 0; }
.psup__head { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; }
.psup__head h2 { margin: 0; font-size: 1.625rem; line-height: 1.18; letter-spacing: -.025em; color: var(--c-primary); }
.psup__accent { width: 122px; height: 10px; color: var(--c-accent); }
.psup__intro { margin: 0; font-size: .90625rem; line-height: 1.66; color: var(--c-text); text-wrap: pretty; }
.psup__list { border-bottom: 1px solid var(--c-line); }
.psup__item { border-top: 1px solid var(--c-line); }
.psup__item[open] { border-top-color: var(--c-lilac-2); }
.psup__q { display: grid; grid-template-columns: minmax(0, 1fr) 22px; column-gap: 14px; align-items: center; min-height: 56px; padding: 15px 2px; list-style: none; cursor: pointer; font-size: .9375rem; line-height: 1.42; font-weight: 700; color: var(--c-primary); }
.psup__q::-webkit-details-marker { display: none; }
.psup__q::marker { content: ""; }
.psup__sign { width: 20px; height: 20px; stroke-width: 2.3; color: var(--c-lilac-2); }
.psup__item[open] .psup__sign { color: var(--c-accent); }
.psup__item[open] .psup__sign-v { display: none; }
.psup__a { display: grid; grid-template-columns: 19px minmax(0, 1fr); column-gap: 11px; align-items: start; padding: 0 2px 18px; }
.psup__a .ink { width: 19px; height: 19px; margin-top: 3px; color: var(--c-accent); }
.psup__a-body { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; }
.psup__a p { margin: 0; max-width: 62ch; font-size: .90625rem; line-height: 1.66; color: var(--c-text); text-wrap: pretty; }
.psup__link { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; font-size: .875rem; font-weight: 700; text-decoration: none; color: var(--c-accent); }
.psup__link:hover, .psup__link:focus-visible { color: var(--c-primary); }
.psup__arrow { width: 20px; height: 12px; flex-shrink: 0; }
.psup__cta { padding: 26px 0 28px; border-radius: 0 0 12px 12px; background: var(--c-accent); color: var(--c-tint); }
.psup__cta :focus-visible { outline-color: var(--c-tint); }
.psup__cta-inner { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; }
.psup__cta-text { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; min-width: 0; }
.psup__cta h2 { margin: 0; font-size: 1.5rem; line-height: 1.22; letter-spacing: -.02em; color: var(--c-white); }
.psup__cta-accent { width: 114px; height: 10px; color: var(--c-tint); }
.psup__cta p { margin: 0; font-size: .9375rem; line-height: 1.6; color: var(--c-tint); text-wrap: pretty; }
.psup__btn { display: inline-flex; align-items: center; gap: 9px; min-height: 44px; padding: 13px 22px; border-radius: 999px; background: var(--c-tint); font-size: .90625rem; font-weight: 700; line-height: 1.2; text-decoration: none; color: var(--c-accent); }
.psup__btn:hover, .psup__btn:focus-visible { background: var(--c-white); color: var(--c-accent); }
.psup__btn .psup__arrow { width: 21px; height: 13px; }
@media (min-width: 768px) {
.psup__faq { padding: 44px 0 46px; }
.psup__head { gap: 14px; }
.psup__head h2 { font-size: 2.125rem; line-height: 1.16; }
.psup__accent { width: 146px; height: 11px; }
.psup__intro { font-size: .9375rem; line-height: 1.68; }
.psup__q { grid-template-columns: minmax(0, 1fr) 26px; column-gap: 20px; min-height: 0; padding: 17px 2px; font-size: 1.03125rem; line-height: 1.45; }
.psup__sign { width: 22px; height: 22px; stroke-width: 2.2; }
.psup__a { grid-template-columns: 20px minmax(0, 1fr); column-gap: 12px; padding-bottom: 20px; }
.psup__a .ink { width: 20px; height: 20px; }
.psup__a p { font-size: .96875rem; line-height: 1.68; }
.psup__link { min-height: 0; }
.psup__cta { padding: 34px 0 36px; }
.psup__cta-inner { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 40px; align-items: center; }
.psup__cta-text { gap: 11px; }
.psup__cta h2 { font-size: 1.75rem; line-height: 1.2; }
.psup__cta-accent { width: 132px; height: 10px; }
.psup__cta p { max-width: 56ch; font-size: 1rem; line-height: 1.65; }
.psup__btn { min-height: 0; }
}
@media (min-width: 1100px) {
.psup__grid { display: grid; grid-template-columns: 312px minmax(0, 1fr); gap: 56px; align-items: start; max-width: 1168px; }
.psup__cta-inner { max-width: 1168px; }
}
/* --- Hero sağ kartı: üç faz, yedi adım ----------------------------------- */
.journey { position: relative; overflow: hidden; background: var(--c-white); border-radius: 12px; padding: 1.5rem 1.25rem; box-shadow: 0 14px 34px rgba(26, 0, 68, .08); }
.journey__blob { position: absolute; right: -30px; top: 16px; width: 126px; height: 98px; border-radius: 50%; background: var(--c-lilac-2); opacity: .24; }
.journey__title { position: relative; z-index: 1; margin: 0 0 1.125rem; font-size: .875rem; line-height: 1.45; font-weight: 600; color: var(--c-link); text-wrap: pretty; }
.journey__phases { position: relative; z-index: 1; display: flex; flex-direction: column; gap: 1rem; }
.journey__phase { display: grid; grid-template-columns: minmax(0, 1fr); }
.journey__wave { grid-column: 1 / -1; width: 100%; height: 11px; margin-bottom: .5rem; }
.journey__phase--one { color: var(--c-accent); }
.journey__phase--two { color: var(--c-primary-2); }
.journey__phase--three { color: var(--c-primary); }
.journey__label { display: flex; flex-wrap: wrap; align-items: baseline; gap: .3rem; margin-bottom: .25rem; }
.journey__faz { font-size: .75rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: inherit; }
.journey__name { font-size: .75rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: inherit; line-height: 1.3; }
.journey__name::before { content: "· "; } /* mobilde faz adı etiketin yanında */
.journey__steps { display: flex; flex-direction: column; gap: .25rem; }
.journey__step { display: flex; align-items: baseline; gap: .625rem; }
.journey__num { font-size: .75rem; font-weight: 700; color: var(--c-lilac-2); min-width: 20px; }
.journey__step-name { font-size: 1rem; font-weight: 700; color: var(--c-primary); }
.journey__band { position: relative; z-index: 1; margin: 1.125rem 0 0; background: var(--grad-dark); border-radius: 6px; padding: .75rem .875rem; display: flex; flex-wrap: wrap; align-items: center; gap: .25rem .875rem; }
.journey__band strong { font-size: .78rem; font-weight: 700; color: var(--c-white); white-space: nowrap; }
.journey__band span:last-child { font-size: .72rem; font-weight: 500; color: var(--c-lilac); line-height: 1.45; }
.journey__band-sep { display: none; }
@media (min-width: 768px) {
.journey { padding: 1.875rem 2rem 1.625rem; border-radius: 12px; box-shadow: 0 18px 46px rgba(26, 0, 68, .08); }
.journey__blob { right: -26px; top: 22px; width: 168px; height: 128px; opacity: .26; }
.journey__title { margin-bottom: 1.375rem; font-size: .9375rem; }
.journey__phases { gap: 1.125rem; }
.journey__phase { grid-template-columns: 96px minmax(0, 1fr); column-gap: 1.125rem; }
.journey__wave { height: 12px; margin-bottom: .625rem; }
.journey__label { flex-direction: column; gap: .375rem; margin-bottom: 0; }
.journey__faz { font-size: .9375rem; }
.journey__name { font-size: .8125rem; letter-spacing: normal; text-transform: none; }
.journey__name::before { content: none; }
.journey__steps { gap: .125rem; padding-top: .375rem; }
.journey__step { padding: .3125rem 0; gap: .75rem; }
.journey__num { font-size: .8125rem; min-width: 22px; }
.journey__step-name { font-size: 1.0625rem; }
.journey__band { margin-top: 1.375rem; border-radius: 10px; padding: .9375rem; flex-wrap: nowrap; gap: .875rem; }
.journey__band strong { font-size: .875rem; letter-spacing: .02em; }
.journey__band span:last-child { font-size: .8125rem; }
.journey__band-sep { display: block; width: 1px; height: 20px; background: rgba(220, 210, 241, .5); }
}
/* --- Kontur rakam (.num) — site geneli yardımcı ---------------------------
Numaralı listelerde, adım/faz başlıklarında ve sıralı bölümlerde kullanılır.
Rakam GERÇEK METİNDİR (görsel değil): dolgu saydam, yalnızca kontur görünür.
Kullanım:
01
3 (tek başına anlamlıysa aria-hidden verme)
01
(sabit genişlikte numara sütunu)
7
Kontur rengi ASLA currentColor olmaz: elemanın kendi rengi saydam olduğu için
rakam tamamen kaybolur. Renk --num-stroke ile verilir.
-------------------------------------------------------------------------- */
.num {
--num-size: 3.75rem; /* 60px */
--num-stroke-w: calc(var(--num-size) / 45); /* punto/45 yaklaşımı; boy sınıfları bunu ezer */
--num-stroke: var(--c-lilac-2); /* açık zemin */
display: inline-block;
font-family: var(--font);
font-weight: 700;
font-size: var(--num-size);
line-height: 1;
color: transparent;
-webkit-text-stroke: var(--num-stroke-w) var(--num-stroke);
}
/* Boy basamakları — kontur kalınlıkları tasarımdaki tablodan. */
.num--96 { --num-size: 6rem; --num-stroke-w: 2px; }
.num--72 { --num-size: 4.5rem; --num-stroke-w: 1.6px; }
.num--60 { --num-size: 3.75rem; --num-stroke-w: 1.5px; }
.num--42 { --num-size: 2.625rem; --num-stroke-w: 1.3px; }
.num--34 { --num-size: 2.125rem; --num-stroke-w: 1.1px; }
/* Çift hanede rakamlar arası boşluk kapatılır. */
.num--two { letter-spacing: -.04em; }
/* Renk çeşitleri. */
.num--dark { --num-stroke: rgba(196, 174, 212, .75); } /* koyu bant üzerinde */
.num--accent { --num-stroke: var(--c-accent); }
/* Konturu desteklemeyen tarayıcıda rakam dolu ve soluk gösterilir. */
@supports not (-webkit-text-stroke: 1px #000) {
.num { color: var(--num-stroke); opacity: .35; }
}
/* Sabit genişlikte numara sütunu. */
.num-col { flex: 0 0 auto; width: 66px; }
@media (min-width: 768px) { .num-col { width: 104px; } }
/* İsteğe bağlı köşe aksanı — sayfa başına en fazla bir iki kez. */
.num-wrap { position: relative; display: inline-block; }
/* Varsayılan konum rakamın DIŞINDA durur: dar rakamların (1, 7) üstüne binerse
glif yanlış okunur. Gerekirse kullanıldığı yerde top/right ezilir. */
.num__accent { position: absolute; top: -.5rem; right: -1.75rem; width: 24px; height: 24px; color: var(--c-accent); }
/* --- Standart / çerçeve şeridi (B2) --------------------------------------- */
.strip { padding: 1.5rem 0; border-bottom: 1px solid var(--c-line); }
.strip__inner { display: flex; flex-direction: column; gap: .75rem; }
.strip__title { font-size: .85rem; font-weight: 600; letter-spacing: .04em; margin: 0; color: var(--c-neutral); }
@media (min-width: 1024px) { .strip__inner { flex-direction: row; align-items: center; gap: 1.5rem; } .strip__title { flex-shrink: 0; } }
/* Koyu varyant: hero'nun hemen altında tam genişlik bant; köşe yuvarlaması yok,
geçiş kasıtlı olarak sert. Rozet/kutu yok, standart adları düz metin. */
.strip--dark { background: var(--grad-dark); border-bottom: 0; padding: 1.75rem 0; }
.strip--dark .container { --container: 1160px; }
.strip--dark .strip__inner { display: grid; flex-direction: initial; gap: 1rem; }
.strip__intro { display: flex; flex-direction: column; align-items: flex-start; gap: .375rem; }
.strip__eyebrow { margin: 0; font-size: .6875rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--c-lilac-2); }
.strip--dark .strip__title { margin: 0; font-size: 1.0625rem; line-height: 1.45; font-weight: 600; letter-spacing: normal; color: var(--c-white); text-wrap: pretty; }
/* Koyu zeminde aksan çizgisi daima açık lila; bordo burada okunmuyor. */
.strip__accent { width: 150px; height: 10px; color: var(--c-lilac); }
.strip__list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .625rem 1rem; }
.strip__list li { font-size: .9375rem; font-weight: 700; color: var(--c-white); }
.strip__list li:last-child { grid-column: 1 / -1; }
@media (min-width: 768px) {
.strip--dark { padding: 2.375rem 0; }
.strip--dark .strip__inner { grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr); gap: 3rem; align-items: center; }
.strip--dark .strip__title { font-size: 1.1875rem; }
.strip__accent { width: 180px; height: 11px; }
.strip__list { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: .875rem 1.125rem; }
.strip__list li { display: flex; align-items: center; font-size: 1.0625rem; letter-spacing: .01em; }
.strip__list li:last-child { grid-column: auto; }
/* Ayırıcılar yalnızca masaüstünde; mobilde iki sütun ızgara kullanılır. */
.strip__list li + li::before { content: ""; width: 1px; height: 18px; margin-right: 1.125rem; background: rgba(196, 174, 212, .5); }
}
/* --- Yol haritası bandı (B3) ---------------------------------------------- */
.section--roadmap { padding: 2rem 0; }
.section--roadmap .container { --container: 1260px; }
.section--roadmap .section-head { margin: 0 auto 1.5rem; max-width: 820px; }
.section--roadmap h2 { font-size: 1.5625rem; line-height: 1.25; margin-bottom: .625rem; text-wrap: pretty; }
.section--roadmap .lead { font-size: .9375rem; line-height: 1.6; color: var(--c-lilac); margin-bottom: 0; text-wrap: pretty; }
.section--roadmap .btn-row { margin-top: 1.25rem; }
.section--roadmap .btn--light { width: 100%; justify-content: center; min-height: 44px; }
.roadmap { position: relative; }
.roadmap__wave { display: none; }
.roadmap__stops { display: flex; flex-direction: column; gap: .25rem; }
/* --- Mobil ve JS'siz düzen: dikey liste ----------------------------------- */
.roadmap__stop { position: relative; display: grid; grid-template-columns: 44px minmax(0, 1fr); column-gap: .875rem; padding-bottom: .875rem; }
/* Omurga rakamların SOLUNDA; son adımda biter. */
.roadmap__spine { position: absolute; left: 7px; top: 0; bottom: -.875rem; border-left: 2px dashed rgba(220, 210, 241, .45); }
.roadmap__stop:last-child .roadmap__spine { display: none; }
.roadmap__num { --num-size: 1.75rem; --num-stroke-w: 1.05px; --num-stroke: rgba(196, 174, 212, .75); position: relative; z-index: 2; display: inline-flex; align-items: center; justify-content: flex-end; align-self: start; width: 44px; height: 44px; padding: 0; border: 0; background: none; cursor: pointer; transition: -webkit-text-stroke .18s ease, transform .18s ease; }
.roadmap__stop.is-active .roadmap__num { --num-stroke-w: 1.4px; --num-stroke: var(--c-white); }
.roadmap__body { display: flex; flex-direction: column; gap: .625rem; min-width: 0; }
.roadmap__head { display: flex; align-items: center; gap: .625rem; width: 100%; min-height: 44px; padding: 0; background: none; border: 0; cursor: pointer; font: inherit; text-align: left; color: var(--c-lilac); }
.roadmap__icon { display: inline-flex; flex: 0 0 auto; }
.roadmap__icon .icon { width: 26px; height: 26px; }
.roadmap__label { flex: 1 1 auto; font-size: 1rem; font-weight: 600; line-height: 1.3; color: var(--c-lilac-3); }
.roadmap__stop.is-active .roadmap__label { color: var(--c-white); font-weight: 700; }
.roadmap__chev { display: inline-flex; color: var(--c-lilac-2); transition: transform .18s ease; }
.roadmap__chev .icon { width: 18px; height: 18px; }
.roadmap__stop.is-active .roadmap__chev { transform: rotate(180deg); }
.roadmap__card { position: relative; background: var(--c-white); border-radius: var(--radius); border-top: 3px solid var(--c-accent); padding: 1rem 1rem 1.125rem; text-align: left; }
.roadmap__card h3 { margin: 0 0 .5rem; font-size: 1.0625rem; font-weight: 700; line-height: 1.3; color: var(--c-primary); }
.roadmap__card p { margin: 0; font-size: .875rem; line-height: 1.6; color: var(--c-text); }
.roadmap__arrow { display: none; }
/* JS varsa yalnızca seçili kart açık; JS yoksa hepsi açık kalır (metin erişilebilir). */
.js .roadmap__stop:not(.is-active) .roadmap__card { display: none; }
.js .roadmap__card { animation: vs-fade .18s ease both; }
/* --- Masaüstü: yatay ray -------------------------------------------------- */
@media (min-width: 1024px) {
.section--roadmap { padding: 2.75rem 0 2.125rem; }
.section--roadmap .section-head { margin-bottom: 1.5rem; text-align: center; }
.section--roadmap h2 { font-size: 2.125rem; line-height: 1.2; letter-spacing: -.01em; text-wrap: balance; }
.section--roadmap .lead { font-size: 1rem; }
.section--roadmap .btn-row { margin-top: .75rem; }
.section--roadmap .btn--light { width: auto; }
/* Üstteki 150 px açılan kart için ayrılır. */
.js .roadmap { padding-top: 150px; }
/* Dalgalı çizgi rakamların ALTINDA: üzerlerinden geçmez. */
.js .roadmap__wave { display: block; position: absolute; left: 22px; width: calc(100% - 44px); top: 206px; height: 14px; color: rgba(196, 174, 212, .6); pointer-events: none; }
.js .roadmap__stops { flex-direction: row; align-items: flex-start; justify-content: space-between; gap: .375rem; }
.js .roadmap__stop { display: flex; flex-direction: column; align-items: center; flex: 1 1 0; min-width: 0; padding: 0; }
.js .roadmap__spine { display: none; }
.js .roadmap__num { --num-size: 2.875rem; --num-stroke-w: 1.3px; position: relative; z-index: 2; align-self: auto; width: auto; min-width: 56px; height: 52px; justify-content: center; }
.js .roadmap__stop.is-active .roadmap__num { --num-stroke-w: 1.8px; transform: scale(1.04); }
.js .roadmap__body { align-items: center; gap: 0; width: 100%; }
.js .roadmap__head { flex-direction: column; gap: 0; width: 100%; min-height: 0; margin-top: 2rem; }
.js .roadmap__icon .icon { width: 34px; height: 34px; }
.js .roadmap__icon { color: var(--c-lilac); }
.js .roadmap__label { flex: 0 0 auto; margin-top: .625rem; text-align: center; font-size: .96875rem; max-width: 150px; transition: color .18s ease; }
.js .roadmap__chev { display: none; }
/* Kart rayın üstünde; left/width JS'ten gelir, bandın dışına taşmaz.
Ölçüm gelmeden görünmez (is-placed). */
.js .roadmap__card { position: absolute; bottom: calc(100% + 20px); left: 0; width: 400px; max-width: none; box-sizing: border-box; padding: .875rem 1.25rem 1rem; box-shadow: 0 18px 44px rgba(26, 0, 68, .45); z-index: 5; visibility: hidden; animation: vs-pop .18s ease both; }
.js .roadmap__card.is-placed { visibility: visible; }
.js .roadmap__stop { position: relative; }
.js .roadmap__card h3 { font-size: 1.125rem; }
.js .roadmap__card p { font-size: .875rem; line-height: 1.55; }
.js .roadmap__arrow { display: block; position: absolute; top: 100%; left: 50%; margin-top: -7px; width: 14px; height: 14px; background: var(--c-white); transform: rotate(45deg); }
}
@media (prefers-reduced-motion: reduce) {
.roadmap__card, .roadmap__chev, .roadmap__num { animation: none !important; transition: none !important; }
}
/* --- Sorun / Çözüm (B4) --------------------------------------------------- */
/* Sorun tarafı pudra zeminde, çözüm tarafı tek parça beyaz panelde. */
.compare-section { background: linear-gradient(180deg, var(--c-tint) 0%, #FAF3F4 100%); padding: 2rem 0 2.125rem; }
.compare-section .container { --container: 1160px; }
.compare__head { display: grid; gap: 1rem; margin-bottom: 1.5rem; }
.compare__head-text { display: flex; flex-direction: column; align-items: flex-start; gap: .5rem; }
.compare__head-text .eyebrow { margin: 0; }
.compare__head-text h2 { margin: 0; font-size: 1.625rem; line-height: 1.2; letter-spacing: -.02em; text-wrap: pretty; }
.compare__accent { width: 160px; height: 10px; color: var(--c-accent); }
.compare__intro { margin: 0; font-size: .9375rem; line-height: 1.65; text-wrap: pretty; }
.compare__intro strong { color: var(--c-primary); font-weight: 700; }
.compare { position: relative; }
.compare__panel { display: none; }
.compare__grid { position: relative; display: grid; grid-template-columns: 52px minmax(0, 1fr); column-gap: .75rem; row-gap: .1875rem; }
.compare__label { font-size: .6875rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.compare__label--today { grid-column: 2; color: var(--c-neutral); }
.compare__label--vs { display: none; }
.compare__rule, .compare__rule-right, .compare__arrow { display: none; }
.compare__num { --num-size: 2.125rem; --num-stroke-w: 1.1px; --num-stroke: var(--c-lilac-2); grid-column: 1; align-self: start; }
.compare__problem { grid-column: 2; display: flex; flex-direction: column; gap: .1875rem; }
.compare__title { font-size: 1rem; font-weight: 700; color: var(--c-primary); line-height: 1.3; }
.compare__desc { font-size: .84375rem; line-height: 1.55; color: var(--c-text); }
/* Mobilde çözüm, filiz işaretli beyaz kart. */
.compare__solution { grid-column: 1 / -1; display: flex; align-items: flex-start; gap: .75rem; margin: .625rem 0 1.125rem; padding: 1rem 1rem 1rem .875rem; background: var(--c-white); border-radius: var(--radius); }
.compare__sprout { width: 20px; height: 17px; flex: 0 0 auto; margin-top: .125rem; color: var(--c-accent); }
.compare__solution-text { display: flex; flex-direction: column; gap: .1875rem; min-width: 0; }
.compare__solution .compare__title { color: var(--c-accent); }
@media (min-width: 768px) {
.compare-section { padding: 3.5rem 0 3.25rem; }
.compare__head { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 3rem; align-items: start; margin-bottom: 2rem; }
.compare__head-text h2 { font-size: 2.125rem; line-height: 1.18; text-wrap: balance; }
.compare__accent { width: 200px; height: 11px; }
.compare__intro { font-size: 1rem; line-height: 1.7; text-align: justify; }
/* Tek parça beyaz panel — her satıra ayrı kutu verilmez. */
.compare__panel { display: block; position: absolute; right: 0; top: 0; bottom: 0; width: 46%; background: var(--c-white); border-radius: 10px; box-shadow: 0 14px 34px rgba(26, 0, 68, .06); }
.compare__grid { grid-template-columns: 60px minmax(0, 1fr) 52px minmax(0, 1.02fr); column-gap: 1.375rem; row-gap: 0; align-items: center; padding-right: 28px; }
.compare__label--today { padding-bottom: 0; }
.compare__label--vs { display: block; grid-column: 4; color: var(--c-accent); padding-top: 1.375rem; }
/* Dalgalı ayırıcı yalnızca sol üç sütun boyunca: rakamların üzerinden geçmez. */
.compare__rule { display: block; grid-column: 1 / 4; width: 100%; height: 12px; margin: .25rem 0; color: rgba(196, 174, 212, .65); }
.compare__rule--first { margin: .625rem 0 .25rem; color: var(--c-lilac-2); }
.compare__rule-right { display: block; grid-column: 4; border-top: 1px solid #EFE7EA; }
.compare__rule--first + .compare__rule-right { border-top: 0; }
.compare__num { --num-size: 2.75rem; --num-stroke-w: 1.2px; align-self: center; }
.compare__problem { padding: 1rem 0; gap: .25rem; }
.compare__arrow { display: block; grid-column: 3; width: 36px; height: 15px; color: var(--c-accent); }
.compare__solution { grid-column: 4; margin: 0; padding: 1rem 0; background: none; border-radius: 0; gap: .25rem; flex-direction: column; }
.compare__sprout { display: none; }
.compare__title { font-size: 1.0625rem; }
.compare__desc { font-size: .90625rem; line-height: 1.6; }
}
/* --- Modül kartı (Platform sayfası, uzun metinli) ------------------------- */
.module { display: flex; flex-direction: column; }
.module p { flex-grow: 1; }
.module .badge { white-space: normal; }
.module__note { font-size: .85rem; font-style: italic; color: var(--c-neutral); }
.module__foot { display: flex; flex-direction: column; align-items: flex-start; gap: .6rem; margin-top: .85rem; } /* rozet kendi satırında, altında bağlantı */
/* --- Ana sayfa modül vitrini (B5) ----------------------------------------- */
/* Kaşe çizgisinin rengi durumu kodlar; rozet/pill, ikon ve kontur rakam yok. */
.modules-section { background: linear-gradient(180deg, var(--c-tint) 0%, #FAF3F4 100%); padding: 1.875rem 0 2rem; }
.modules-section .container { --container: 1168px; }
.modules__head { display: flex; flex-direction: column; align-items: flex-start; gap: .5rem; margin-bottom: 1.5rem; max-width: 56rem; }
.modules__head .eyebrow { margin: 0; }
.modules__head h2 { margin: 0; font-size: 1.5625rem; line-height: 1.2; text-wrap: pretty; }
.modules__intro { margin: .25rem 0 0; font-size: .96875rem; line-height: 1.7; text-wrap: pretty; }
.modules__intro strong { color: var(--c-primary); font-weight: 700; }
.modules__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 1.375rem; }
.modules__grid > li { display: flex; }
.modules__note { margin: 1.375rem 0 1.125rem; max-width: 52rem; }
.module-card {
--rule: var(--c-lilac-2);
--status: var(--c-neutral);
position: relative; display: flex; flex-direction: column; width: 100%;
padding: 1.625rem 1.5rem 1.375rem; background: var(--c-white);
border-radius: 10px; box-shadow: 0 10px 26px rgba(26, 0, 68, .06);
overflow: hidden; text-decoration: none; color: inherit;
transition: transform .18s ease, box-shadow .18s ease;
}
.module-card:hover, .module-card:focus-visible { transform: translateY(-3px); box-shadow: 0 18px 38px rgba(26, 0, 68, .12); color: inherit; }
/* Kaşe çizgisi kartın üst kenarına oturur, tam genişlikte. */
.module-card__rule { position: absolute; left: 0; top: 0; width: 100%; height: 11px; stroke-width: 3; color: var(--rule); }
.module-card__title { display: block; margin-top: .25rem; font-size: 1.0625rem; font-weight: 700; line-height: 1.3; color: var(--c-primary); }
.module-card__desc { display: block; margin-top: .5rem; font-size: .90625rem; line-height: 1.55; color: var(--c-text); }
.module-card__foot { display: grid; grid-template-columns: 1fr auto; align-items: baseline; gap: .35rem .75rem; margin-top: auto; padding-top: .875rem; border-top: 1px solid var(--c-tint); }
.module-card__status { font-size: .6875rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--status); }
.module-card__more { display: inline-flex; align-items: center; gap: .35rem; font-size: .84375rem; font-weight: 600; color: var(--c-link); white-space: nowrap; }
.module-card__more .icon { width: 16px; height: 16px; transition: transform .18s ease; }
.module-card:hover .module-card__more .icon { transform: translateX(3px); }
/* Durum → kaşe ve metin rengi. Planlandıda lila metin kullanılmaz (kontrast yetersiz). */
.module-card--live, .module-card--testing { --rule: var(--c-accent); --status: var(--c-accent); }
.module-card--dev { --rule: var(--c-primary-2); --status: var(--c-primary-2); }
.module-card--planned { --rule: var(--c-lilac-2); --status: var(--c-neutral); }
@media (prefers-reduced-motion: reduce) {
.module-card, .module-card__more .icon { transition: none; }
.module-card:hover { transform: none; }
}
@media (min-width: 768px) {
.modules-section { padding: 3.25rem 0 3rem; }
.modules__head { gap: .625rem; margin-bottom: 1.75rem; }
.modules__head h2 { font-size: 2rem; }
.modules__intro { font-size: .96875rem; }
.module-card__rule { height: 12px; }
.module-card__title { font-size: 1.25rem; }
.module-card__desc { font-size: .90625rem; }
}
/* --- Neden Vera Sustinera? (B6) ------------------------------------------- */
/* Koyu bant; kart, ikon, rozet ve kontur rakam yok. Anahtar kelime kontur metindir. */
.why-section { padding: 2rem 0 2.125rem; overflow: hidden; }
.why-section .container { --container: 1160px; }
.why__head { display: grid; gap: 1.25rem; margin-bottom: 1.5rem; }
.why__head-text { display: flex; flex-direction: column; align-items: flex-start; gap: .5625rem; }
.why__head-text .eyebrow { margin: 0; }
.why__head-text h2 { margin: 0; font-size: 1.6875rem; line-height: 1.18; letter-spacing: -.02em; }
.why__accent { width: 160px; height: 10px; color: var(--c-lilac); }
/* İri tipografik tırnak: çizgi parantez yerine, metnin solunda, aria-hidden. */
.why__promise { display: flex; align-items: flex-start; gap: .6875rem; margin: .375rem 0 0; }
.why__quote { flex: 0 0 auto; font-size: 3.75rem; line-height: .8; font-weight: 700; color: rgba(196, 174, 212, .75); }
.why__promise span:last-child { font-size: 1rem; line-height: 1.5; font-weight: 600; color: var(--c-white); padding-top: .25rem; }
.why__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); column-gap: 2.75rem; row-gap: .625rem; }
.why__item { display: flex; flex-direction: column; gap: .5625rem; min-width: 0; padding: 1.125rem 0 1.25rem; border-top: 1px solid rgba(220, 210, 241, .28); }
/* Kontur anahtar kelime — kontur rengi sabit, currentColor değil (.num yedeği geçerli). */
.why__key { --num-size: 1.5rem; --num-stroke-w: 1px; --num-stroke: rgba(196, 174, 212, .85); letter-spacing: .04em; text-transform: uppercase; }
.why__body { display: flex; flex-direction: column; gap: .3125rem; }
.why__title { font-size: 1.0625rem; font-weight: 700; line-height: 1.3; color: var(--c-white); }
.why__text { font-size: .84375rem; line-height: 1.6; color: var(--c-lilac); }
@media (min-width: 768px) {
.why-section { padding: 3.5rem 0 3.375rem; }
.why__head { grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: 3rem; align-items: end; margin-bottom: 2.125rem; }
.why__head-text { gap: .625rem; }
.why__head-text h2 { font-size: 2.25rem; line-height: 1.15; }
.why__accent { width: 190px; height: 11px; }
.why__promise { gap: .875rem; margin: 0; }
.why__quote { font-size: 4.75rem; }
.why__promise span:last-child { font-size: 1.125rem; line-height: 1.55; padding-top: .375rem; }
.why__item { gap: .75rem; padding: 1.5rem 0 1.625rem; }
/* Kademe: çift sıradaki hücreler biraz aşağıdan başlar. */
.why__item:nth-child(even) { margin-top: 26px; }
.why__key { --num-size: 1.875rem; --num-stroke-w: 1.1px; }
.why__title { font-size: 1.125rem; }
.why__text { font-size: .90625rem; line-height: 1.65; }
}
/* --- Kimler için? (B7) ----------------------------------------------------- */
/* Kutu, kart, ikon rozeti ve kontur rakam yok. Çizimler bu bölüme özeldir. */
.audience-section { background: linear-gradient(180deg, var(--c-tint) 0%, #FAF3F4 100%); padding: 2.125rem 0 2.375rem; }
.audience-section .container { --container: 1168px; }
.audience__head { display: flex; flex-direction: column; align-items: flex-start; gap: .5rem; margin-bottom: 1.375rem; }
.audience__head .eyebrow { margin: 0; font-size: .65625rem; }
.audience__head h2 { margin: 0; font-size: 1.5625rem; line-height: 1.2; letter-spacing: -.02em; }
.audience__accent { width: 118px; height: 10px; color: var(--c-accent); }
.audience__intro { margin: .375rem 0 0; font-size: .90625rem; line-height: 1.65; text-wrap: pretty; }
.audience__intro strong { color: var(--c-primary); font-weight: 700; }
.audience__grid { display: flex; flex-direction: column; gap: 1.125rem; }
/* Mobilde: ayırıcı üstte, altında solda çizim, sağda metin. */
.audience__item { display: grid; grid-template-columns: 74px minmax(0, 1fr); column-gap: 1rem; align-items: start; min-width: 0; }
.audience__rule { grid-column: 1 / -1; width: 100%; height: 11px; margin-bottom: .625rem; color: var(--c-lilac-2); }
.audience__art { width: 74px; height: 56px; stroke-width: 2.4; color: var(--c-primary); }
/* Üç çizgi sırayla çizilir. */
.js .audience__art path:nth-child(2) { transition-delay: .15s; }
.js .audience__art path:nth-child(3) { transition-delay: .3s; }
.audience__body { display: flex; flex-direction: column; gap: .375rem; min-width: 0; }
.audience__title { font-size: 1.0625rem; font-weight: 700; line-height: 1.28; color: var(--c-primary); }
.audience__text { font-size: .84375rem; line-height: 1.6; color: var(--c-text); }
@media (min-width: 481px) {
.audience-section { padding: 3.375rem 0 3.125rem; }
.audience__head { display: grid; grid-template-columns: minmax(0, .72fr) minmax(0, 1.28fr); gap: 1.625rem; align-items: end; margin-bottom: 2rem; }
.audience__head-text { display: flex; flex-direction: column; align-items: flex-start; gap: .625rem; }
.audience__head .eyebrow { font-size: .71875rem; }
.audience__head h2 { font-size: 2.125rem; line-height: 1.18; }
.audience__accent { width: 150px; height: 11px; }
.audience__intro { margin: 0; max-width: 60ch; font-size: .96875rem; line-height: 1.7; }
.audience__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(330px, 1fr)); column-gap: 2.25rem; row-gap: 2.125rem; }
/* Masaüstünde: çizim üstte, altında ayırıcı, sonra başlık ve metin. */
.audience__item { display: flex; flex-direction: column; gap: .875rem; }
.audience__rule { order: 2; margin-bottom: 0; }
.audience__art { order: 1; width: 118px; height: 88px; stroke-width: 2; }
.audience__body { order: 3; gap: .5rem; }
.audience__title { font-size: 1.1875rem; line-height: 1.3; }
.audience__text { font-size: .90625rem; line-height: 1.65; }
}
/* --- İkiz dönüşüm ------------------------------------------------------------- */
.twin__row { display: grid; gap: .75rem; }
.twin__box h2 { font-size: 1.15rem; margin-bottom: .4rem; }
.twin__box p { font-size: .92rem; }
.twin__icon { width: 30px; height: 30px; margin-bottom: .6rem; color: #DCD2F1; }
.twin__box--result { border-color: rgba(255,255,255,.7); background: rgba(255,255,255,.18); }
.twin__op { font-size: 2rem; font-weight: 700; text-align: center; line-height: 1; }
.twin__note { margin: 1.5rem auto 0; max-width: 46rem; text-align: center; font-size: .9rem; opacity: .9; }
@media (min-width: 768px) { .twin__row { grid-template-columns: 1fr auto 1fr auto 1fr; align-items: center; gap: 1rem; } }
/* --- Akordiyonlar (SSS ve Karbon sütunları) ------------------------------ */
.faq__item { border-top: 1px solid var(--c-line); background: var(--c-white); }
.faq__item:last-child { border-bottom: 1px solid var(--c-line); }
.faq__item summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: 1rem .25rem; font-weight: 600; color: var(--c-primary); }
.faq__item summary::-webkit-details-marker { display: none; }
.faq__chev { transition: transform .15s; }
details[open] > summary .faq__chev { transform: rotate(180deg); }
.faq__body { padding: 0 .25rem 1.1rem; }
.acc-col summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: .75rem; }
.acc-col summary::-webkit-details-marker { display: none; }
.acc-col summary h3 { margin: 0; flex: 1; }
.acc-col summary .card__icon { margin: 0; }
.acc-col .checklist { margin-top: 1rem; }
@media (min-width: 768px) {
.acc-col summary { pointer-events: none; }
.acc-col summary .faq__chev { display: none; }
}
/* --- Danışmanlık: adım şeridi ------------------------------------------------ */
.steps { display: grid; gap: 1.25rem; counter-reset: step; }
.steps__item { position: relative; padding: 1.5rem 1.5rem 1.5rem 1.5rem; background: var(--c-tint); border-top: 3px solid var(--c-primary); border-radius: 0 0 var(--radius) var(--radius); }
.steps__num { position: absolute; top: 1.25rem; right: 1.25rem; font-size: 2rem; font-weight: 700; color: var(--c-accent); opacity: .35; line-height: 1; }
@media (min-width: 768px) { .steps { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1100px) { .steps { grid-template-columns: repeat(4, 1fr); } }
/* --- Özellik kartları (ölçek / cihaz) ------------------------------------- */
.device { max-width: 26rem; margin-inline: auto; padding-inline: 4%; }
.device__screen { border: 6px solid var(--c-primary); border-radius: 12px 12px 4px 4px; overflow: hidden; background: var(--c-white); }
.device__base { height: 10px; margin: 0 -4%; background: var(--c-primary); border-radius: 0 0 10px 10px; }
/* --- Kapsam listesi ---------------------------------------------------------- */
.scopes li { padding-left: 1.25rem; position: relative; margin-bottom: .9rem; }
.scopes li::before { content: ""; position: absolute; left: 0; top: .65rem; width: .6rem; height: 2px; background: var(--c-accent); }
.scopes strong { color: var(--c-primary); }
/* --- Çapraz bağlantı ve kapanış bandı ------------------------------------- */
.cross { padding: 2.5rem 0; }
.cross__inner { display: flex; flex-direction: column; gap: 1rem; }
.cross__title { font-size: 1.25rem; margin-bottom: .25rem; }
.cross p { margin: 0; }
@media (min-width: 768px) { .cross__inner { flex-direction: row; align-items: center; justify-content: space-between; gap: 2rem; } .cross .btn { flex-shrink: 0; } }
.cta-band__inner { text-align: center; max-width: 44rem; }
.cta-band .lead { margin-bottom: 1.75rem; }
/* Marka adı satır sonunda bölünmez. */
.brand-lock { white-space: nowrap; }
.brand-vera { color: #C4AED4; }
.brand-sust { color: var(--c-white); }
/* --- İletişim ----------------------------------------------------------------- */
.contact-card { display: grid; gap: 2rem; background: var(--c-white); border: 1px solid var(--c-line); border-radius: 16px; padding: 2rem; box-shadow: 0 16px 40px rgba(26,0,68,.08); }
.contact-card__art { max-width: 22rem; margin-inline: auto; }
.contact-card__title .accent { color: var(--c-accent); }
.contact-card__title em { font-style: normal; }
.contact-list { margin: 1rem 0 1.5rem; }
.contact-list li { display: flex; gap: .75rem; align-items: flex-start; margin-bottom: .75rem; }
.contact-list .icon { color: var(--c-accent); margin-top: .1rem; }
.contact-list a { word-break: break-all; }
@media (min-width: 768px) { .contact-card { grid-template-columns: 1fr 1.2fr; align-items: center; padding: 3rem; } }
.form-wrap input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]), .form-wrap textarea, .form-wrap select { width: 100%; font: inherit; padding: .7rem .9rem; border: 1px solid #C9BFC4; border-radius: var(--radius); color: var(--c-text); background: var(--c-white); }
.form-wrap input:focus, .form-wrap textarea:focus, .form-wrap select:focus { outline: 2px solid var(--c-link); outline-offset: 1px; border-color: var(--c-link); }
.form-wrap label { font-weight: 600; color: var(--c-primary); }
.form-wrap .wpcf7-form p { margin-bottom: 1rem; }
.form-wrap fieldset { border: 1px solid var(--c-line); border-radius: var(--radius); padding: 1rem 1.25rem; margin: 0 0 1.5rem; background: var(--c-white); }
.form-wrap legend { font-weight: 700; color: var(--c-primary); padding: 0 .5rem; }
.form-wrap .wpcf7-submit, .form-wrap input[type="submit"] { width: auto; cursor: pointer; background: var(--c-primary); color: var(--c-white); border: 2px solid var(--c-primary); border-radius: var(--radius); font: inherit; font-weight: 600; padding: .8rem 1.5rem; }
.form-wrap .wpcf7-submit:hover, .form-wrap input[type="submit"]:hover { background: var(--c-link); border-color: var(--c-link); }
.form-wrap .btn { word-break: break-all; }
/* --- Footer --------------------------------------------------------------------- */
.site-footer { background: var(--c-footer); color: #FFF3F7; padding: 3.5rem 0 2rem; font-size: .92rem; }
.site-footer a { color: #FFF3F7; text-decoration: none; }
.site-footer a:hover, .site-footer a:focus-visible { color: #C4AED4; text-decoration: underline; }
.footer-grid { display: grid; gap: 2.25rem; }
.footer-brand img { height: 36px; width: auto; margin-bottom: 1rem; }
.footer-brand p { color: #DCD2F1; max-width: 26rem; margin: 0; }
.footer-col__title { font-size: .95rem; color: #FFF3F7; margin-bottom: .9rem; }
.footer-col li { margin-bottom: .5rem; }
.footer-contact li { display: flex; gap: .6rem; align-items: flex-start; }
.footer-contact .icon { width: 18px; height: 18px; margin-top: .2rem; color: #C4AED4; }
.footer-contact a, .footer-contact span { word-break: break-word; overflow-wrap: anywhere; }
.footer-bottom { margin-top: 2.5rem; padding-top: 1.25rem; border-top: 1px solid rgba(255,243,247,.18); display: flex; flex-direction: column; gap: .9rem; }
.footer-social { display: flex; gap: .75rem; }
.footer-social a { display: inline-flex; width: 38px; height: 38px; align-items: center; justify-content: center; border: 1px solid rgba(255,243,247,.35); border-radius: 50%; }
.footer-social .icon { width: 18px; height: 18px; }
.footer-legal { display: flex; flex-wrap: wrap; gap: 1.25rem; }
.footer-copy { margin: 0; color: #C4AED4; }
@media (min-width: 768px) {
.footer-grid { grid-template-columns: 1.3fr 1fr 1fr; gap: 3rem; }
.footer-bottom { flex-direction: row; align-items: center; justify-content: space-between; }
}