/* otoflow+ web sitesi — uygulamanın "spot ışığı" dili: kömür siyahı zemin, üstten vuran ışık huzmeleri,
   süzülen toz zerreleri, buzlu grafit cam kartlar, beyaz ana buton, Inter. Logo mavisi yalnızca küçük vurgularda. */
@import url('../fonts/inter.css');
:root {
  color-scheme: dark;
  --bg: #0B0C10; --solid: #14151B; --solid-2: #1B1C23;
  --surface: rgba(255, 255, 255, .045); --surface-2: rgba(255, 255, 255, .07);
  --glass: linear-gradient(180deg, rgba(255, 255, 255, .085) 0%, rgba(255, 255, 255, .03) 100%);
  --glass-2: linear-gradient(180deg, rgba(255, 255, 255, .12) 0%, rgba(255, 255, 255, .05) 100%);
  --hi: inset 0 1px 0 rgba(255, 255, 255, .13);
  --line: rgba(255, 255, 255, .08); --line-2: rgba(255, 255, 255, .15);
  --ink: #F4F5F7; --ink-2: #A3A6B0; --ink-3: #62656F;
  --brand-1: #004DF2; --brand-2: #08F2FE; --brand: linear-gradient(135deg, #004DF2, #08F2FE);
  --ok: #4ADE80; --warn: #FACC15; --bad: #F87171; --info: #A5C8FF;
  --spot: radial-gradient(70% 38% at 50% -6%, rgba(255, 255, 255, .26) 0%, rgba(255, 255, 255, .07) 45%, transparent 75%);
  --rays: conic-gradient(from 150deg at 50% -18%, transparent 0deg, rgba(255, 255, 255, .06) 6deg, transparent 13deg, rgba(255, 255, 255, .045) 21deg,
    transparent 27deg, rgba(255, 255, 255, .07) 33deg, transparent 41deg, rgba(255, 255, 255, .04) 48deg, transparent 56deg, transparent 360deg);
  --nav: rgba(11, 12, 16, .72); --nav-open: rgba(11, 12, 16, .96);
  --btn: linear-gradient(180deg, #FFFFFF 0%, #E7E8EC 100%); --btn-ink: #0B0C10;
  --sh-btn: inset 0 -1px 0 rgba(0, 0, 0, .12), 0 14px 30px -14px rgba(255, 255, 255, .35);
  --sh-soft: 0 10px 24px -16px rgba(0, 0, 0, .8); --sh-tile: 0 30px 60px -40px rgba(0, 0, 0, .9);
  --grad-t: linear-gradient(180deg, #fff 30%, rgba(255, 255, 255, .55));
  --float: rgba(22, 23, 30, .72); --sh-float: 0 24px 50px -20px rgba(0, 0, 0, .9);
  --sh-phone: 0 0 0 1px rgba(255, 255, 255, .12), inset 0 0 0 1px rgba(255, 255, 255, .05), 0 60px 120px -50px rgba(0, 0, 0, 1), 0 0 90px -30px rgba(255, 255, 255, .12);
  --sh-shot: 0 0 0 1px rgba(255, 255, 255, .1), 0 -10px 60px -20px rgba(255, 255, 255, .12);
  --sh-frame: 0 60px 120px -60px rgba(0, 0, 0, 1); --glow: rgba(255, 255, 255, .1);
  --plan-hl: linear-gradient(180deg, rgba(255, 255, 255, .14), rgba(255, 255, 255, .04)); --sh-plan: 0 40px 80px -40px rgba(255, 255, 255, .18);
  --band: linear-gradient(180deg, rgba(255, 255, 255, .06), rgba(255, 255, 255, .015));
  --on: #fff; --on-ink: #0B0C10; --dot: rgba(255, 255, 255, .14);
  --field: rgba(255, 255, 255, .05); --field-on: rgba(255, 255, 255, .55); --focus: rgba(255, 255, 255, .7);
  --f: 'Inter', -apple-system, 'SF Pro Display', 'Segoe UI', system-ui, sans-serif;
  --w: 1180px; --r: 22px;
}
/* açık tema: aynı spot ışığı dili, gri-beyaz zemin üzerinde beyaz kartlar ve koyu ana buton */
:root[data-theme="light"] {
  color-scheme: light;
  --bg: #F1F2F5; --solid: #FFFFFF; --solid-2: #E9EAEF;
  --surface: rgba(11, 12, 16, .04); --surface-2: rgba(11, 12, 16, .07);
  --glass: linear-gradient(180deg, #FFFFFF 0%, rgba(255, 255, 255, .72) 100%);
  --glass-2: linear-gradient(180deg, #FFFFFF 0%, rgba(255, 255, 255, .94) 100%);
  --hi: inset 0 1px 0 rgba(255, 255, 255, .9);
  --line: rgba(11, 12, 16, .09); --line-2: rgba(11, 12, 16, .17);
  --ink: #0B0C10; --ink-2: #4C4F59; --ink-3: #676A75;
  --ok: #15803D; --warn: #A16207; --bad: #DC2626; --info: #1D4ED8;
  --spot: radial-gradient(70% 38% at 50% -6%, #FFFFFF 0%, rgba(255, 255, 255, .65) 45%, transparent 75%);
  --rays: conic-gradient(from 150deg at 50% -18%, transparent 0deg, rgba(255, 255, 255, .8) 6deg, transparent 13deg, rgba(255, 255, 255, .6) 21deg,
    transparent 27deg, rgba(255, 255, 255, .9) 33deg, transparent 41deg, rgba(255, 255, 255, .55) 48deg, transparent 56deg, transparent 360deg);
  --nav: rgba(241, 242, 245, .8); --nav-open: rgba(241, 242, 245, .98);
  --btn: linear-gradient(180deg, #2B2D36 0%, #0B0C10 100%); --btn-ink: #FFFFFF;
  --sh-btn: inset 0 1px 0 rgba(255, 255, 255, .14), 0 14px 28px -14px rgba(11, 12, 16, .5);
  --sh-soft: 0 10px 24px -18px rgba(11, 12, 16, .35); --sh-tile: 0 30px 60px -44px rgba(11, 12, 16, .28);
  --grad-t: linear-gradient(180deg, #0B0C10 30%, rgba(11, 12, 16, .58));
  --float: rgba(255, 255, 255, .82); --sh-float: 0 24px 50px -24px rgba(11, 12, 16, .35);
  --sh-phone: 0 0 0 1px rgba(11, 12, 16, .14), inset 0 0 0 1px rgba(255, 255, 255, .06), 0 50px 90px -50px rgba(11, 12, 16, .55);
  --sh-shot: 0 0 0 1px rgba(11, 12, 16, .12), 0 -10px 50px -24px rgba(11, 12, 16, .3);
  --sh-frame: 0 50px 100px -60px rgba(11, 12, 16, .45); --glow: rgba(255, 255, 255, .9);
  --plan-hl: linear-gradient(180deg, #FFFFFF, #FFFFFF); --sh-plan: 0 40px 80px -44px rgba(11, 12, 16, .35);
  --band: linear-gradient(180deg, #FFFFFF, rgba(255, 255, 255, .6));
  --on: #0B0C10; --on-ink: #FFFFFF; --dot: rgba(11, 12, 16, .16);
  --field: #FFFFFF; --field-on: rgba(11, 12, 16, .6); --focus: rgba(11, 12, 16, .7);
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; background: var(--bg); }
body { margin: 0; background: var(--bg); color: var(--ink); font: 400 16px/1.6 var(--f); -webkit-font-smoothing: antialiased; font-feature-settings: 'cv11', 'ss01'; overflow-x: hidden; }
img { max-width: 100%; display: block; }
a { color: inherit; }
button, input, select, textarea { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; }
.ic { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.wrap { width: min(var(--w), 100% - 32px); margin-inline: auto; }

/* ---------- arka plan: uygulamadaki spot + huzme + toz ---------- */
.bg { position: absolute; inset: 0 0 auto 0; height: 1100px; pointer-events: none; z-index: 0; overflow: hidden; background: var(--spot); }
.bg::before { content: ""; position: absolute; left: -30%; right: -30%; top: -6%; height: 90%; background: var(--rays); filter: blur(7px);
  transform-origin: 50% 0; animation: rays 16s ease-in-out infinite alternate, breathe 7s ease-in-out infinite;
  -webkit-mask-image: linear-gradient(180deg, #000 0%, transparent 100%); mask-image: linear-gradient(180deg, #000 0%, transparent 100%); }
.bg::after { content: ""; position: absolute; inset: 0;
  background-image: radial-gradient(1px 1px at 12% 18%, #fff 50%, transparent 51%), radial-gradient(1px 1px at 78% 9%, #fff 50%, transparent 51%),
    radial-gradient(1px 1px at 63% 57%, rgba(255, 255, 255, .7) 50%, transparent 51%), radial-gradient(1px 1px at 31% 76%, rgba(255, 255, 255, .6) 50%, transparent 51%),
    radial-gradient(1px 1px at 88% 41%, rgba(255, 255, 255, .5) 50%, transparent 51%), radial-gradient(1.5px 1.5px at 45% 32%, rgba(255, 255, 255, .85) 50%, transparent 51%),
    radial-gradient(1px 1px at 22% 63%, rgba(255, 255, 255, .55) 50%, transparent 51%), radial-gradient(1.5px 1.5px at 70% 84%, rgba(255, 255, 255, .7) 50%, transparent 51%);
  background-size: 210px 260px, 210px 260px, 210px 260px, 210px 260px, 210px 260px, 290px 350px, 290px 350px, 290px 350px;
  animation: dust 40s linear infinite, twinkle 4.5s ease-in-out infinite;
  -webkit-mask-image: linear-gradient(180deg, #000 20%, transparent 95%); mask-image: linear-gradient(180deg, #000 20%, transparent 95%); }
[data-theme="light"] .bg::after { display: none; }
@keyframes rays { from { transform: rotate(-5deg); } to { transform: rotate(5deg); } }
@keyframes breathe { 0%, 100% { opacity: .75; } 50% { opacity: 1; } }
@keyframes dust { to { background-position: 30px -260px, 30px -260px, 30px -260px, 30px -260px, 30px -260px, -20px -350px, -20px -350px, -20px -350px; } }
@keyframes twinkle { 0%, 100% { opacity: .4; } 50% { opacity: .75; } }
.bg.soft { height: 640px; }
main, header, footer { position: relative; z-index: 1; }
@media (prefers-reduced-motion: reduce) { .bg::before, .bg::after, .float, .reveal { animation: none !important; transition: none !important; } }

/* ---------- üst menü ---------- */
.nav { position: sticky; top: 0; z-index: 50; transition: background .25s, box-shadow .25s; }
.nav.scrolled { background: var(--nav); -webkit-backdrop-filter: blur(16px) saturate(140%); backdrop-filter: blur(16px) saturate(140%); box-shadow: inset 0 -1px 0 var(--line); }
.nav .wrap { display: flex; align-items: center; gap: 28px; height: 72px; }
.logo img { height: 26px; width: auto; }
.logo-l, [data-theme="light"] .logo-d { display: none; }
[data-theme="light"] .logo-l { display: block; }
.nav ul { display: flex; gap: 4px; list-style: none; margin: 0 0 0 auto; padding: 0; }
.nav ul a { display: block; padding: 8px 14px; border-radius: 99px; text-decoration: none; font-size: 14.5px; color: var(--ink-2); transition: color .15s, background .15s; }
.nav ul a:hover, .nav ul a[aria-current] { color: var(--ink); background: var(--surface-2); }
.nav .cta { display: flex; gap: 8px; }
.burger, .tema { width: 42px; height: 42px; flex: none; border-radius: 50%; border: 0; background: var(--glass); box-shadow: var(--hi), inset 0 0 0 1px var(--line); place-items: center; cursor: pointer; }
.burger { display: none; }
.tema { display: grid; color: var(--ink); }
.tema:hover { background: var(--glass-2); }
.tema .ay, [data-theme="light"] .tema .gunes { display: none; }
[data-theme="light"] .tema .ay { display: block; }
.no-js .tema { display: none; }
@media (max-width: 1040px) {
  .burger { display: grid; order: 2; }
  .tema { order: 1; margin-left: auto; }
  .nav .wrap { gap: 10px; }
  .nav ul, .nav .cta { display: none; order: 3; }
  .nav .logo { margin-right: 0; }
  .nav.open { background: var(--nav-open); }
  .nav.open .wrap { flex-wrap: wrap; height: auto; padding: 15px 0 22px; row-gap: 14px; }
  .nav.open ul, .nav.open .cta { display: flex; flex-direction: column; width: 100%; margin: 0; }
  .nav.open ul a { font-size: 17px; padding: 12px 14px; }
  .nav.open .cta .btn { width: 100%; }
}

/* ---------- butonlar, rozetler ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 9px; height: 52px; padding: 0 24px; border: 0; border-radius: 15px; cursor: pointer;
  background: var(--btn); color: var(--btn-ink); font: 500 15.5px var(--f); letter-spacing: -.01em; text-decoration: none; white-space: nowrap;
  box-shadow: var(--sh-btn); transition: transform .12s, filter .12s, background .15s; }
.btn:hover { filter: brightness(.95); } .btn:active { transform: scale(.985); }
[data-theme="light"] .btn:hover { filter: brightness(1.45); }
.btn .ic { width: 18px; height: 18px; }
.btn.ghost { background: var(--glass); color: var(--ink); box-shadow: var(--hi), inset 0 0 0 1px var(--line-2), var(--sh-soft); }
.btn.ghost:hover, [data-theme="light"] .btn.ghost:hover { background: var(--glass-2); filter: none; }
.btn.sm { height: 40px; padding: 0 16px; font-size: 14px; border-radius: 12px; }
.btn.block { width: 100%; }
.eyebrow { display: inline-flex; align-items: center; gap: 8px; padding: 6px 13px 6px 8px; border-radius: 99px; font-size: 13px; color: var(--ink-2);
  background: var(--surface); box-shadow: inset 0 0 0 1px var(--line); }
.eyebrow b { font-weight: 500; color: var(--ink); padding: 2px 8px; border-radius: 99px; background: var(--surface-2); }
.plus { display: inline-grid; place-items: center; width: 18px; height: 18px; border-radius: 6px; background: var(--brand); color: #fff; font-weight: 600; font-size: 14px; line-height: 1; }

/* ---------- tipografi ---------- */
h1, h2, h3 { font-weight: 400; letter-spacing: -.03em; margin: 0; text-wrap: balance; }
.h-xl { font-size: clamp(42px, 6.4vw, 84px); line-height: 1.02; letter-spacing: -.045em; }
.h-l { font-size: clamp(32px, 4.4vw, 56px); line-height: 1.06; letter-spacing: -.04em; }
.h-m { font-size: clamp(24px, 2.6vw, 32px); line-height: 1.15; }
.h-s { font-size: 19px; line-height: 1.3; letter-spacing: -.015em; font-weight: 500; }
.lead { font-size: clamp(17px, 1.5vw, 19px); line-height: 1.6; color: var(--ink-2); margin: 0; text-wrap: pretty; }
.muted { color: var(--ink-2); } .faint { color: var(--ink-3); } .center { text-align: center; }
.grad-t { background: var(--grad-t); -webkit-background-clip: text; background-clip: text; color: transparent; }
p { margin: 0; }

/* ---------- bölümler ---------- */
section { padding: 120px 0; position: relative; }
.sec-head { max-width: 760px; margin: 0 auto 60px; text-align: center; display: grid; gap: 18px; justify-items: center; }
.sec-head.left { margin-inline: 0; text-align: left; justify-items: start; }
.divider { height: 1px; background: linear-gradient(90deg, transparent, var(--line-2), transparent); border: 0; margin: 0; }
@media (max-width: 720px) { section { padding: 80px 0; } .sec-head { margin-bottom: 40px; } }

/* ---------- hero ---------- */
.hero { padding: 70px 0 40px; text-align: center; }
.hero .wrap { display: grid; justify-items: center; gap: 26px; }
.hero .lead { max-width: 640px; }
.hero-ctas { display: flex; gap: 12px; flex-wrap: wrap; justify-content: center; }
.hero-note { font-size: 13px; color: var(--ink-3); }
.hero-stage { position: relative; margin-top: 50px; width: 100%; height: 720px; display: flex; justify-content: center; align-items: flex-start; }
.hero-stage .phone { position: absolute; top: 0; }
.hero-stage .phone.c { z-index: 3; left: 50%; transform: translateX(-50%); }
.hero-stage .phone.l { z-index: 2; left: 50%; transform: translateX(-118%) translateY(70px) scale(.86); opacity: .75; }
.hero-stage .phone.r { z-index: 2; left: 50%; transform: translateX(18%) translateY(70px) scale(.86); opacity: .75; }
.hero-stage::after { content: ""; position: absolute; left: 0; right: 0; bottom: -2px; height: 280px; background: linear-gradient(180deg, transparent, var(--bg) 85%); z-index: 5; pointer-events: none; }
.float { position: absolute; z-index: 4; display: flex; align-items: center; gap: 12px; padding: 12px 16px 12px 12px; border-radius: 18px; text-align: left;
  background: var(--float); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); box-shadow: var(--hi), inset 0 0 0 1px var(--line-2), var(--sh-float);
  font-size: 13.5px; line-height: 1.35; animation: bob 7s ease-in-out infinite; }
.float b { display: block; font-weight: 500; font-size: 14px; }
.float span { color: var(--ink-2); }
.float.f1 { left: calc(50% - 470px); top: 120px; }
.float.f2 { right: calc(50% - 480px); top: 260px; animation-delay: -2.5s; }
.float.f3 { left: calc(50% - 440px); top: 420px; animation-delay: -4.5s; }
@keyframes bob { 50% { translate: 0 -10px; } }
@media (max-width: 980px) { .float { display: none; } .hero-stage .phone.l, .hero-stage .phone.r { display: none; } .hero-stage { height: 640px; } }

/* ---------- telefon çerçevesi (uygulamadaki .phone ile aynı ölçüler) ---------- */
.phone { width: 300px; aspect-ratio: 390 / 844; background: #0E0F13; border-radius: 46px; padding: 8px; position: relative; flex: none;
  box-shadow: var(--sh-phone); }
.phone img { width: 100%; height: 100%; object-fit: cover; border-radius: 38px; }
.phone::before { content: ""; position: absolute; top: 17px; left: 50%; transform: translateX(-50%); width: 84px; height: 24px; border-radius: 14px; background: #000; z-index: 2; }
.phone.lg { width: 340px; border-radius: 52px; } .phone.lg img { border-radius: 44px; }
.phone.sm { width: 240px; border-radius: 38px; padding: 7px; } .phone.sm img { border-radius: 31px; } .phone.sm::before { top: 14px; width: 68px; height: 20px; }

/* ---------- akış (servis yolculuğu) ---------- */
.flow { display: grid; grid-template-columns: repeat(6, 1fr); gap: 12px; counter-reset: s; }
.flow.u3 { grid-template-columns: repeat(3, 1fr); }
.step { padding: 22px 18px; border-radius: var(--r); background: var(--glass); box-shadow: var(--hi), inset 0 0 0 1px var(--line); position: relative; display: grid; gap: 12px; align-content: start; }
.step::before { counter-increment: s; content: "0" counter(s); font-size: 12px; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.step .mi { margin-bottom: 4px; }
.step h3 { font-size: 16.5px; font-weight: 500; letter-spacing: -.01em; }
.step p { font-size: 14px; color: var(--ink-2); line-height: 1.5; }
@media (max-width: 1080px) { .flow { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 620px) { .flow, .flow.u3 { grid-template-columns: 1fr 1fr; } }

/* ---------- ikon karosu (uygulamadaki .mi) ---------- */
.mi { display: grid; place-items: center; width: 48px; height: 48px; flex: none; border-radius: 15px; color: var(--ink); background: var(--surface); box-shadow: inset 0 0 0 1px var(--line-2); }
.mi .ic { width: 21px; height: 21px; stroke-width: 1.5; }
.mi.sm { width: 38px; height: 38px; border-radius: 12px; } .mi.sm .ic { width: 17px; height: 17px; }
.mi.ok { color: var(--ok); } .mi.brand { color: #fff; background: var(--brand); box-shadow: none; }

/* ---------- bento özellik ızgarası ---------- */
.bento { display: grid; grid-template-columns: repeat(12, 1fr); gap: 14px; }
.tile { grid-column: span 4; border-radius: 26px; padding: 28px; background: var(--glass); box-shadow: var(--hi), inset 0 0 0 1px var(--line), var(--sh-tile);
  display: flex; flex-direction: column; gap: 14px; overflow: hidden; position: relative; min-height: 260px; }
.tile h3 { font-size: 21px; letter-spacing: -.02em; }
.tile p { color: var(--ink-2); font-size: 15px; line-height: 1.55; }
.tile.w6 { grid-column: span 6; } .tile.w8 { grid-column: span 8; } .tile.w12 { grid-column: span 12; }
.tile .shot { margin-top: auto; align-self: center; width: 78%; max-width: 330px; border-radius: 22px 22px 0 0; margin-bottom: -28px;
  box-shadow: var(--sh-shot); overflow: hidden; aspect-ratio: 390 / 420; }
.tile .shot img { width: 100%; object-fit: cover; object-position: top; }
.tile.split { flex-direction: row; align-items: stretch; gap: 30px; }
.tile.split > div:first-child { display: flex; flex-direction: column; gap: 14px; flex: 1; justify-content: center; }
.tile.split .shot { width: 300px; flex: none; margin: 0 0 -28px; align-self: flex-end; }
.tile .spot-in { position: absolute; inset: 0; background: radial-gradient(60% 50% at 50% 0%, var(--glow), transparent 70%); pointer-events: none; }
.tags { display: flex; flex-wrap: wrap; gap: 8px; }
.tag { font-size: 12.5px; padding: 5px 11px; border-radius: 99px; color: var(--ink-2); background: var(--surface); box-shadow: inset 0 0 0 1px var(--line); }
@media (max-width: 980px) { .tile, .tile.w6, .tile.w8 { grid-column: span 12; } .tile.split { flex-direction: column; } .tile.split .shot { width: 78%; align-self: center; } }

/* ---------- galeri ---------- */
.gallery-tabs { display: flex; justify-content: center; gap: 8px; flex-wrap: wrap; margin-bottom: 40px; }
.chip { border: 0; border-radius: 99px; padding: 9px 16px; font: 500 14px var(--f); color: var(--ink-2); background: var(--surface); box-shadow: inset 0 0 0 1px var(--line); cursor: pointer; }
.chip:hover { color: var(--ink); }
.chip.on { color: var(--on-ink); background: var(--on); box-shadow: none; }
.rail { display: flex; gap: 26px; overflow-x: auto; padding: 10px max(16px, calc((100vw - var(--w)) / 2)) 40px; scroll-snap-type: x mandatory; scrollbar-width: none; }
.rail::-webkit-scrollbar { display: none; }
.rail figure { margin: 0; scroll-snap-align: center; display: grid; gap: 16px; justify-items: center; }
.rail figcaption { font-size: 14px; color: var(--ink-2); text-align: center; max-width: 240px; }
.rail figcaption b { display: block; color: var(--ink); font-weight: 500; font-size: 15px; }
.rail-nav { display: flex; justify-content: center; gap: 10px; }
.ib { width: 46px; height: 46px; border-radius: 50%; border: 0; background: var(--glass); display: grid; place-items: center; cursor: pointer; box-shadow: var(--hi), inset 0 0 0 1px var(--line); }
.ib:hover { background: var(--glass-2); }

/* ---------- müşteri tarafı / iki sütun ---------- */
.duo { display: grid; grid-template-columns: 1fr 1fr; gap: 70px; align-items: center; }
.duo.rev > :first-child { order: 2; }
.duo .phones { display: flex; justify-content: center; gap: 22px; position: relative; }
.duo .phones .phone:nth-child(2) { margin-top: 70px; }
.checks { list-style: none; padding: 0; margin: 10px 0 0; display: grid; gap: 14px; }
.checks li { display: flex; gap: 13px; align-items: flex-start; color: var(--ink-2); font-size: 15.5px; }
.checks li b { color: var(--ink); font-weight: 500; }
.checks .ic { width: 20px; height: 20px; margin-top: 2px; color: var(--ink); }
@media (max-width: 940px) { .duo { grid-template-columns: 1fr; gap: 50px; } .duo.rev > :first-child { order: 0; } .duo .phones .phone { width: 46%; max-width: 260px; } }

/* ---------- paketler ---------- */
.plans { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.plan { border-radius: 26px; padding: 30px; background: var(--glass); box-shadow: var(--hi), inset 0 0 0 1px var(--line); display: flex; flex-direction: column; gap: 18px; }
.plan.hl { background: var(--plan-hl); box-shadow: var(--hi), inset 0 0 0 1px var(--line-2), var(--sh-plan); }
.plan h3 { font-size: 22px; }
.plan .for { color: var(--ink-2); font-size: 14.5px; }
.plan .price { font-size: 15px; color: var(--ink-2); padding: 14px 0; border-block: 1px solid var(--line); }
.plan .price b { color: var(--ink); font-weight: 500; font-size: 20px; letter-spacing: -.02em; }
.plan ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 11px; font-size: 14.5px; color: var(--ink-2); }
.plan li { display: flex; gap: 10px; } .plan li .ic { width: 18px; height: 18px; color: var(--ink); margin-top: 2px; }
.plan .btn { margin-top: auto; }
.badge { align-self: flex-start; font-size: 12px; font-weight: 500; padding: 5px 10px; border-radius: 99px; background: var(--on); color: var(--on-ink); }
@media (max-width: 940px) { .plans { grid-template-columns: 1fr; } }

/* ---------- SSS ---------- */
.faq { max-width: 820px; margin: 0 auto; display: grid; gap: 10px; }
.faq details { border-radius: 18px; background: var(--glass); box-shadow: var(--hi), inset 0 0 0 1px var(--line); }
.faq summary { list-style: none; cursor: pointer; padding: 20px 24px; display: flex; justify-content: space-between; gap: 16px; font-size: 16.5px; font-weight: 500; letter-spacing: -.01em; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; font-weight: 300; font-size: 24px; line-height: 1; color: var(--ink-2); transition: transform .2s; }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details p { padding: 0 24px 22px; color: var(--ink-2); font-size: 15.5px; }

/* ---------- CTA bandı ---------- */
.cta-band { border-radius: 34px; padding: 80px 30px; text-align: center; display: grid; gap: 22px; justify-items: center; position: relative; overflow: hidden;
  background: var(--spot), var(--band); box-shadow: var(--hi), inset 0 0 0 1px var(--line); }
.cta-band::before { content: ""; position: absolute; left: -20%; right: -20%; top: -10%; height: 120%; background: var(--rays); filter: blur(6px); transform-origin: 50% 0;
  animation: rays 16s ease-in-out infinite alternate; -webkit-mask-image: linear-gradient(180deg, #000, transparent); mask-image: linear-gradient(180deg, #000, transparent); pointer-events: none; }
.cta-band > * { position: relative; }

/* ---------- alt bilgi ---------- */
footer { padding: 70px 0 40px; border-top: 1px solid var(--line); margin-top: 60px; }
.foot { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 40px; }
.foot h4 { margin: 0 0 14px; font-size: 13px; font-weight: 500; color: var(--ink-3); letter-spacing: .08em; text-transform: uppercase; }
.foot ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; font-size: 14.5px; }
.foot a { text-decoration: none; color: var(--ink-2); } .foot a:hover { color: var(--ink); }
.foot .logo img { height: 24px; margin-bottom: 16px; }
.foot-b { margin-top: 50px; padding-top: 24px; border-top: 1px solid var(--line); display: flex; justify-content: space-between; gap: 20px; flex-wrap: wrap; font-size: 13px; color: var(--ink-3); }
@media (max-width: 820px) { .foot { grid-template-columns: 1fr 1fr; } }

/* ---------- sayfa başlığı (alt sayfalar) ---------- */
.page-h { padding: 80px 0 30px; text-align: center; }
.page-h .wrap { display: grid; gap: 20px; justify-items: center; }
.page-h .lead { max-width: 660px; }

/* ---------- özellik detay satırları ---------- */
.feat { display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: center; padding: 70px 0; }
.feat + .feat { border-top: 1px solid var(--line); }
.feat:nth-child(even) > .media { order: -1; }
.feat .txt { display: grid; gap: 18px; }
.feat .media { display: flex; justify-content: center; gap: 22px; position: relative; }
.feat .media::before { content: ""; position: absolute; inset: -10% 10%; background: radial-gradient(50% 50% at 50% 40%, var(--glow), transparent 70%); pointer-events: none; }
.feat .media .phone:nth-child(2) { margin-top: 60px; }
@media (max-width: 940px) { .feat { grid-template-columns: 1fr; gap: 40px; padding: 50px 0; } .feat:nth-child(even) > .media { order: 0; } .feat .media .phone { width: 46%; max-width: 270px; } }

/* ---------- web uygulaması önizleme ---------- */
.app-frame { border-radius: 26px; overflow: hidden; box-shadow: var(--hi), inset 0 0 0 1px var(--line-2), var(--sh-frame); background: var(--solid); }
.app-frame .bar { display: flex; align-items: center; gap: 8px; padding: 12px 16px; border-bottom: 1px solid var(--line); font-size: 13px; color: var(--ink-3); }
.app-frame .bar i { width: 11px; height: 11px; border-radius: 50%; background: var(--dot); }
.app-frame .bar span { margin-left: 12px; padding: 4px 14px; border-radius: 99px; background: var(--surface); }
.app-frame img { width: 100%; height: auto; }
.cards3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.card { border-radius: var(--r); padding: 26px; background: var(--glass); box-shadow: var(--hi), inset 0 0 0 1px var(--line); display: grid; gap: 12px; align-content: start; }
.card h3 { font-size: 18px; font-weight: 500; letter-spacing: -.015em; }
.card p { color: var(--ink-2); font-size: 15px; }
@media (max-width: 860px) { .cards3 { grid-template-columns: 1fr; } }

/* ---------- formlar ---------- */
.form { display: grid; gap: 14px; }
.form .row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.form label { display: grid; gap: 7px; font-size: 13.5px; color: var(--ink-2); }
.inp { width: 100%; height: 50px; padding: 0 16px; border-radius: 14px; border: 0; background: var(--field); box-shadow: inset 0 0 0 1px var(--line-2); color: var(--ink); font-size: 15px; }
textarea.inp { height: 130px; padding: 14px 16px; resize: vertical; }
select.inp { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' fill='none' stroke='%23A3A6B0' stroke-width='1.6'%3E%3Cpath d='M1 1.5l5 5 5-5'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 16px center; }
select.inp option { background: var(--solid); }
.inp:focus { outline: none; box-shadow: inset 0 0 0 1px var(--field-on); }
.inp::placeholder { color: var(--ink-3); }
.hp { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); opacity: 0; pointer-events: none; }
.consent { display: flex !important; grid-template-columns: none; gap: 10px !important; align-items: flex-start; font-size: 13.5px; }
.consent input { margin-top: 3px; accent-color: var(--ink); }
.alert { padding: 14px 18px; border-radius: 14px; font-size: 14.5px; }
.alert.ok { background: rgba(74, 222, 128, .1); color: var(--ok); box-shadow: inset 0 0 0 1px rgba(74, 222, 128, .25); }
.alert.err { background: rgba(248, 113, 113, .1); color: var(--bad); box-shadow: inset 0 0 0 1px rgba(248, 113, 113, .25); }
@media (max-width: 620px) { .form .row { grid-template-columns: 1fr; } }

/* ---------- metin sayfası ---------- */
.prose { width: min(760px, 100% - 32px); margin: 0 auto; display: grid; gap: 16px; color: var(--ink-2); font-size: 16px; }
.prose h2 { color: var(--ink); font-size: 24px; margin-top: 24px; }
.prose ul { margin: 0; padding-left: 20px; display: grid; gap: 6px; }

/* ---------- giriş animasyonu ---------- */
.reveal { opacity: 0; transform: translateY(26px); transition: opacity .8s cubic-bezier(.2, .7, .2, 1), transform .8s cubic-bezier(.2, .7, .2, 1); }
.reveal.in { opacity: 1; transform: none; }
.no-js .reveal { opacity: 1; transform: none; }

/* ---------- dar telefon ---------- */
@media (max-width: 480px) {
  .hero-ctas { width: 100%; flex-direction: column; }
  .hero-ctas .btn { width: 100%; }
  .hero-stage .phone.lg { width: min(340px, 100vw - 32px); }
  .page-h { padding-top: 48px; }
  .card, .plan, .tile { padding: 22px; }
  .faq summary { padding: 18px 20px; font-size: 16px; }
  .faq details p { padding: 0 20px 20px; }
  .cta-band { padding: 56px 20px; border-radius: 26px; }
}