/* 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;
  --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);
  --f: 'Inter', -apple-system, 'SF Pro Display', 'Segoe UI', system-ui, sans-serif;
  --w: 1180px; --r: 22px;
}
* { 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 rgba(255, 255, 255, .7); 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%); }
@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: rgba(11, 12, 16, .72); -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; }
.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 { display: none; margin-left: auto; width: 42px; height: 42px; border-radius: 50%; border: 0; background: var(--glass); box-shadow: var(--hi), inset 0 0 0 1px var(--line); place-items: center; }
@media (max-width: 940px) {
  .burger { display: grid; }
  .nav ul, .nav .cta { display: none; }
  .nav.open { background: rgba(11, 12, 16, .96); }
  .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: linear-gradient(180deg, #FFFFFF 0%, #E7E8EC 100%); color: #0B0C10; font: 500 15.5px var(--f); letter-spacing: -.01em; text-decoration: none; white-space: nowrap;
  box-shadow: inset 0 -1px 0 rgba(0, 0, 0, .12), 0 14px 30px -14px rgba(255, 255, 255, .35); transition: transform .12s, filter .12s, background .15s; }
.btn:hover { filter: brightness(.95); } .btn:active { transform: scale(.985); }
.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), 0 10px 24px -16px rgba(0, 0, 0, .8); }
.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: linear-gradient(180deg, #fff 30%, rgba(255, 255, 255, .55)); -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: rgba(22, 23, 30, .72); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); box-shadow: var(--hi), inset 0 0 0 1px var(--line-2), 0 24px 50px -20px rgba(0, 0, 0, .9);
  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: 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); }
.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; }
.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 { 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), 0 30px 60px -40px rgba(0, 0, 0, .9);
  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: 0 0 0 1px rgba(255, 255, 255, .1), 0 -10px 60px -20px rgba(255, 255, 255, .12); 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%, rgba(255, 255, 255, .09), 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: #0B0C10; background: #fff; 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: linear-gradient(180deg, rgba(255, 255, 255, .14), rgba(255, 255, 255, .04)); box-shadow: var(--hi), inset 0 0 0 1px var(--line-2), 0 40px 80px -40px rgba(255, 255, 255, .18); }
.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: #fff; color: #0B0C10; }
@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), linear-gradient(180deg, rgba(255, 255, 255, .06), rgba(255, 255, 255, .015)); 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%, rgba(255, 255, 255, .1), 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), 0 60px 120px -60px rgba(0, 0, 0, 1); 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: rgba(255, 255, 255, .14); }
.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: rgba(255, 255, 255, .05); 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 rgba(255, 255, 255, .55); }
.inp::placeholder { color: var(--ink-3); }
.hp { position: absolute; left: -9999px; }
.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: #fff; }
.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 { max-width: 760px; 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; }