/* Seri Tema — vitrin, sepet ve müşteri paneli */
@font-face { font-family: "Poppins"; src: url("../fonts/Poppins-SemiBold.ttf") format("truetype"); font-weight: 600; font-display: swap; }
@font-face { font-family: "Poppins"; src: url("../fonts/Poppins-Bold.ttf") format("truetype"); font-weight: 700 800; font-display: swap; }

:root {
	--ink: #070912; --ink-2: #1b2133; --ink-3: #0e1222; --muted: #5d6680; --line: #e7e9f0; --bg: #f5f6fa; --card: #fff;
	--rose: #ff2e63; --rose-2: #e0144d; --violet: #7c5cff; --cyan: #22d3ee; --lime: #a3e635;
	--red: var(--rose); --red-2: var(--rose-2); --red-soft: #fff0f4; --ok: #0f9f6e; --warn: #b45309;
	--grad: linear-gradient(120deg, #ff2e63 0%, #ff5a8a 35%, #7c5cff 100%);
	--grad-soft: linear-gradient(120deg, rgba(255,46,99,.12), rgba(124,92,255,.12));
	--r: 20px; --r-sm: 12px;
	--shadow: 0 1px 2px rgba(16,24,40,.04), 0 12px 32px -14px rgba(16,24,40,.18);
	--shadow-lg: 0 40px 80px -30px rgba(7,9,18,.45);
	--head: "Poppins", system-ui, -apple-system, "Segoe UI", sans-serif;
	--body: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
	--wrap: 1200px;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 90px; }
body { margin: 0; font: 16px/1.6 var(--body); color: var(--ink); background: var(--card); -webkit-font-smoothing: antialiased; }
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
h1, h2, h3, h4 { font-family: var(--head); line-height: 1.12; letter-spacing: -.025em; margin: 0 0 .5em; }
p { margin: 0 0 1em; }
.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 24px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
[hidden] { display: none !important; }
.ic { width: 20px; height: 20px; flex: none; }
.grad-text { background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.muted { color: var(--muted); }

/* Düğmeler */
.btn { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 14px 24px; border-radius: 999px; border: 1.5px solid transparent; font: 600 15px/1 var(--head); cursor: pointer; transition: transform .18s, box-shadow .25s, background .2s, border-color .2s, color .2s; white-space: nowrap; overflow: hidden; }
.btn:hover { transform: translateY(-2px); }
.btn .ic { width: 18px; height: 18px; transition: transform .2s; }
.btn:hover .ic { transform: translateX(3px); }
.btn--red, .btn--grad { background: var(--grad); color: #fff; box-shadow: 0 12px 30px -12px rgba(255,46,99,.75); background-size: 160% 100%; background-position: 0 0; }
.btn--red:hover, .btn--grad:hover { background-position: 100% 0; box-shadow: 0 16px 36px -12px rgba(124,92,255,.7); }
.btn--dark { background: var(--ink); color: #fff; }
.btn--dark:hover { background: #1a1f33; }
.btn--ghost { background: transparent; border-color: var(--line); color: var(--ink); }
.btn--ghost:hover { border-color: var(--ink); }
.btn--glass { background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.18); color: #fff; backdrop-filter: blur(10px); }
.btn--glass:hover { background: rgba(255,255,255,.16); }
.btn--light { background: #fff; color: var(--ink); }
.btn--sm { padding: 10px 18px; font-size: 14px; }
.btn--block { width: 100%; }
.btn[disabled] { opacity: .5; cursor: not-allowed; transform: none; }
.link { color: var(--rose-2); font-weight: 600; }
.link:hover { text-decoration: underline; }

/* Duyuru şeridi */
.topbar { background: var(--ink); color: #c9cfe0; font-size: 13.5px; }
.topbar .wrap { display: flex; align-items: center; justify-content: center; gap: 12px; min-height: 40px; padding-top: 6px; padding-bottom: 6px; text-align: center; }
.topbar__tag { background: var(--grad); color: #fff; font: 700 11px/1 var(--head); letter-spacing: .06em; text-transform: uppercase; padding: 5px 9px; border-radius: 999px; }
.topbar a { color: #fff; font-weight: 600; display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; }
.topbar a .ic { width: 15px; height: 15px; }
@media (max-width: 700px) { .topbar span:not(.topbar__tag) { display: none; } }

/* Üst menü */
.nav { position: sticky; top: 0; z-index: 60; padding: 12px 0; transition: padding .2s; }
.nav__in { display: flex; align-items: center; gap: 22px; height: 64px; padding: 0 12px 0 20px !important; max-width: calc(var(--wrap) - 24px); background: rgba(255,255,255,.82); backdrop-filter: saturate(1.6) blur(18px); -webkit-backdrop-filter: saturate(1.6) blur(18px); border: 1px solid rgba(231,233,240,.9); border-radius: 999px; box-shadow: 0 10px 40px -20px rgba(7,9,18,.35); }
.logo { display: flex; align-items: center; gap: 10px; font: 800 21px/1 var(--head); letter-spacing: -.035em; color: var(--ink); }
.logo__mark { width: 34px; height: 34px; border-radius: 11px; background: var(--ink); position: relative; overflow: hidden; flex: none; }
.logo__mark::before, .logo__mark::after { content: ""; position: absolute; left: 7px; right: 7px; height: 3.5px; border-radius: 3px; background: #fff; transform: skewX(-22deg); }
.logo__mark::before { top: 11px; }
.logo__mark::after { top: 19px; right: 13px; background: var(--grad); }
.logo b { font-weight: 800; background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.nav__links { display: flex; align-items: center; gap: 4px; margin-left: 12px; font: 600 15px var(--head); color: var(--ink-2); }
.nav__links > a, .dd__btn { padding: 9px 14px; border-radius: 999px; transition: background .2s, color .2s; }
.nav__links > a:hover, .nav__links > a.on, .dd:hover .dd__btn, .dd:focus-within .dd__btn { background: var(--bg); color: var(--ink); }
.nav__right { margin-left: auto; display: flex; align-items: center; gap: 8px; }
.icon-btn { position: relative; width: 44px; height: 44px; border-radius: 999px; display: grid; place-items: center; border: 1px solid var(--line); background: #fff; color: var(--ink); cursor: pointer; transition: border-color .2s, transform .2s; }
.icon-btn:hover { border-color: var(--ink); }
.icon-btn__count { position: absolute; top: -4px; right: -4px; min-width: 20px; height: 20px; padding: 0 5px; border-radius: 999px; background: var(--grad); color: #fff; font: 700 11px/20px var(--head); text-align: center; box-shadow: 0 0 0 2px #fff; }
.nav__burger { display: none; }
.only-m { display: none; }

/* Açılır menü */
.dd { position: relative; }
.dd__btn { display: inline-flex; align-items: center; gap: 4px; background: none; border: 0; font: inherit; color: inherit; cursor: pointer; }
.dd__btn .ic { width: 16px; height: 16px; transition: transform .2s; }
.dd:hover .dd__btn .ic, .dd:focus-within .dd__btn .ic { transform: rotate(180deg); }
.dd__panel { position: absolute; top: calc(100% + 14px); left: -20px; width: 680px; display: grid; grid-template-columns: 1fr 220px; gap: 10px; padding: 10px; background: #fff; border: 1px solid var(--line); border-radius: 24px; box-shadow: 0 30px 70px -25px rgba(7,9,18,.4); opacity: 0; visibility: hidden; transform: translateY(8px); transition: opacity .2s, transform .2s, visibility .2s; }
.dd__panel::before { content: ""; position: absolute; top: -16px; left: 0; right: 0; height: 16px; }
.dd:hover .dd__panel, .dd:focus-within .dd__panel { opacity: 1; visibility: visible; transform: none; }
.dd__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; }
.dd__item { display: flex; gap: 12px; padding: 14px; border-radius: 16px; transition: background .2s; }
.dd__item:hover { background: var(--bg); }
.dd__item b { display: block; font: 600 14.5px var(--head); color: var(--ink); }
.dd__item small { display: block; color: var(--muted); font: 13px/1.4 var(--body); margin-top: 2px; }
.dd__ic { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; background: var(--grad-soft); color: var(--rose-2); flex: none; }
.dd__feature { position: relative; border-radius: 18px; overflow: hidden; background: var(--ink); color: #fff; min-height: 200px; display: flex; align-items: flex-end; }
.dd__feature img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: top; opacity: .55; transition: transform 4s ease, opacity .3s; }
.dd__feature:hover img { transform: translateY(-15%); opacity: .7; }
.dd__feature::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 30%, rgba(7,9,18,.92)); }
.dd__feature span { position: relative; z-index: 1; padding: 16px; display: grid; gap: 2px; }
.dd__feature small { font: 600 11px var(--head); text-transform: uppercase; letter-spacing: .1em; color: #ff8fb0; }
.dd__feature b { font: 700 18px var(--head); }
.dd__feature em { font-style: normal; font-size: 13px; color: #c9cfe0; }

@media (max-width: 980px) {
	.nav { padding: 8px 0; }
	.nav__in { border-radius: 22px; }
	.nav__links { display: none; position: absolute; top: calc(100% + 6px); left: 12px; right: 12px; margin: 0; flex-direction: column; align-items: stretch; gap: 0; background: #fff; border: 1px solid var(--line); border-radius: 22px; padding: 10px; box-shadow: var(--shadow-lg); max-height: calc(100vh - 140px); overflow: auto; }
	.nav__links.open { display: flex; }
	.nav__links > a, .dd__btn { padding: 13px 14px; border-radius: 12px; width: 100%; text-align: left; }
	.dd__btn .ic { display: none; }
	.dd__panel { position: static; width: auto; opacity: 1; visibility: visible; transform: none; box-shadow: none; border: 0; padding: 0 0 6px; grid-template-columns: 1fr; }
	.dd__grid { grid-template-columns: 1fr; }
	.dd__feature { display: none; }
	.nav__burger { display: grid; }
	.hide-m { display: none; }
	.only-m { display: block; color: var(--rose-2); }
}

/* Uyarılar */
.flashes { margin-top: 6px; position: relative; z-index: 5; }
.flash { margin: 8px 0 0; padding: 13px 18px; border-radius: 14px; font-weight: 600; font-size: 15px; }
.flash--ok { background: #e7f8f1; color: var(--ok); }
.flash--err { background: var(--red-soft); color: var(--rose-2); }
.flash--info { background: #eef0ff; color: #4338ca; }

/* Kahraman alanı (koyu) */
.hero { position: relative; overflow: hidden; margin-top: -88px; padding: 150px 0 0; background: var(--ink); color: #fff; isolation: isolate; }
.hero::before { content: ""; position: absolute; inset: -20%; z-index: -2; background:
	radial-gradient(40% 35% at 20% 20%, rgba(255,46,99,.45), transparent 70%),
	radial-gradient(35% 40% at 80% 10%, rgba(124,92,255,.5), transparent 70%),
	radial-gradient(30% 30% at 60% 70%, rgba(34,211,238,.22), transparent 70%);
	filter: blur(20px); animation: drift 18s ease-in-out infinite alternate; }
.hero::after { content: ""; position: absolute; inset: 0; z-index: -1; background-image: linear-gradient(rgba(255,255,255,.05) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px); background-size: 56px 56px; -webkit-mask-image: radial-gradient(70% 60% at 50% 30%, #000 30%, transparent 80%); mask-image: radial-gradient(70% 60% at 50% 30%, #000 30%, transparent 80%); }
@keyframes drift { 0% { transform: translate3d(0,0,0) rotate(0); } 100% { transform: translate3d(-4%,3%,0) rotate(8deg); } }
.hero__copy { text-align: center; max-width: 900px; margin: 0 auto; }
.eyebrow { display: inline-flex; align-items: center; gap: 10px; padding: 7px 14px 7px 8px; border-radius: 999px; background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.14); font: 600 13px/1 var(--head); color: #dfe3f0; margin-bottom: 26px; backdrop-filter: blur(8px); }
.eyebrow i { width: 8px; height: 8px; border-radius: 50%; background: var(--lime); box-shadow: 0 0 0 4px rgba(163,230,53,.2); animation: pulse 1.8s infinite; }
@keyframes pulse { 50% { box-shadow: 0 0 0 9px rgba(163,230,53,0); } }
.hero h1 { font-size: clamp(40px, 6.6vw, 80px); font-weight: 800; letter-spacing: -.045em; line-height: 1.02; margin-bottom: 22px; }
.hero__lead { font-size: clamp(17px, 1.6vw, 20px); color: #b8bfd4; max-width: 640px; margin: 0 auto 34px; }
.hero__cta { display: flex; gap: 12px; flex-wrap: wrap; justify-content: center; margin-bottom: 34px; }
.hero__trust { display: flex; gap: 10px 26px; flex-wrap: wrap; justify-content: center; color: #aeb6cc; font-size: 14px; font-weight: 600; }
.hero__trust span { display: inline-flex; align-items: center; gap: 7px; }
.hero__trust .ic { width: 17px; height: 17px; color: var(--lime); }

/* Kahraman görseli: kartlar */
.stage { position: relative; margin: 64px auto 0; max-width: 1060px; height: 460px; perspective: 1800px; }
.stage__win { position: absolute; border-radius: 16px; overflow: hidden; background: #fff; box-shadow: var(--shadow-lg), 0 0 0 1px rgba(255,255,255,.1); }
.stage__win img { width: 100%; height: 100%; object-fit: cover; object-position: top; }
.stage__bar { height: 30px; display: flex; align-items: center; gap: 6px; padding: 0 12px; background: #eef0f5; }
.stage__bar i { width: 9px; height: 9px; border-radius: 50%; background: #d7dbe3; }
.stage__bar i:nth-child(1) { background: #ff5f57; } .stage__bar i:nth-child(2) { background: #febc2e; } .stage__bar i:nth-child(3) { background: #28c840; }
.stage__bar span { margin-left: 10px; height: 18px; flex: 1; max-width: 240px; border-radius: 5px; background: #fff; font: 11px/18px var(--body); color: var(--muted); padding: 0 8px; }
.stage__main { left: 50%; top: 0; width: 70%; height: 520px; transform: translateX(-50%) rotateX(14deg); transform-origin: 50% 0; z-index: 2; }
.stage__main .stage__shot { height: calc(100% - 30px); }
.stage__side { width: 34%; height: 300px; top: 70px; z-index: 1; opacity: .75; }
.stage__side .stage__shot { height: calc(100% - 30px); }
.stage__l { left: 0; transform: rotateY(18deg) rotateX(10deg); }
.stage__r { right: 0; transform: rotateY(-18deg) rotateX(10deg); }
.chip { position: absolute; z-index: 3; display: flex; align-items: center; gap: 10px; padding: 11px 16px 11px 11px; border-radius: 16px; background: rgba(15,18,34,.78); border: 1px solid rgba(255,255,255,.14); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); color: #fff; font: 600 14px/1.25 var(--head); box-shadow: 0 20px 40px -18px rgba(0,0,0,.6); animation: float 6s ease-in-out infinite; }
.chip small { display: block; font: 500 12px var(--body); color: #aeb6cc; }
.chip__ic { width: 36px; height: 36px; border-radius: 11px; display: grid; place-items: center; }
.chip__ic .ic { width: 19px; height: 19px; }
.chip--a { left: 4%; top: 250px; } .chip--a .chip__ic { background: rgba(163,230,53,.18); color: var(--lime); }
.chip--b { right: 3%; top: 200px; animation-delay: -2s; } .chip--b .chip__ic { background: rgba(255,46,99,.2); color: #ff7fa2; }
.chip--c { left: 22%; top: 30px; animation-delay: -4s; } .chip--c .chip__ic { background: rgba(34,211,238,.18); color: var(--cyan); }
.chip--d { right: 16%; top: 380px; animation-delay: -3s; } .chip--d .chip__ic { background: rgba(124,92,255,.25); color: #b5a4ff; }
@keyframes float { 50% { transform: translateY(-10px); } }
.hero__fade { position: absolute; left: 0; right: 0; bottom: 0; height: 160px; background: linear-gradient(180deg, transparent, var(--ink)); z-index: 2; pointer-events: none; }
@media (max-width: 900px) { .stage { height: 300px; } .stage__main { width: 92%; height: 340px; } .stage__side { display: none; } .chip--c, .chip--d { display: none; } .chip--a { left: 0; top: 200px; } .chip--b { right: 0; top: 120px; } }
@media (max-width: 560px) { .chip { font-size: 12.5px; padding: 8px 12px 8px 8px; } .chip__ic { width: 30px; height: 30px; } }

/* Kayan şerit */
.marquee { background: var(--ink); color: #dfe3f0; border-top: 1px solid rgba(255,255,255,.08); overflow: hidden; padding: 22px 0; }
.marquee__track { display: flex; gap: 46px; width: max-content; animation: scroll 38s linear infinite; }
.marquee__track span { display: inline-flex; align-items: center; gap: 12px; font: 600 17px var(--head); white-space: nowrap; color: #8c95ad; }
.marquee__track span::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--grad); }
@keyframes scroll { to { transform: translateX(-50%); } }

/* Bölümler */
.section { padding: 110px 0; position: relative; }
.section--tint { background: var(--bg); }
.section--dark { background: var(--ink); color: #fff; overflow: hidden; }
.section__head { max-width: 720px; margin: 0 auto 56px; text-align: center; }
.section__head--left { text-align: left; margin-left: 0; }
.section__head h2 { font-size: clamp(32px, 4.2vw, 52px); font-weight: 800; }
.section__head p { color: var(--muted); font-size: 18px; }
.section--dark .section__head p { color: #aeb6cc; }
.kicker { display: inline-flex; align-items: center; gap: 8px; font: 700 12.5px/1 var(--head); letter-spacing: .14em; text-transform: uppercase; color: var(--rose-2); margin-bottom: 16px; padding: 7px 12px; border-radius: 999px; background: var(--red-soft); }
.section--dark .kicker { background: rgba(255,46,99,.14); color: #ff8fb0; }

/* Hizmetler: bento */
.bento { display: grid; grid-template-columns: repeat(6, 1fr); grid-auto-rows: minmax(220px, auto); gap: 18px; }
.tile { position: relative; overflow: hidden; border-radius: 26px; padding: 30px; background: var(--card); border: 1px solid var(--line); display: flex; flex-direction: column; transition: transform .3s, box-shadow .3s; }
.tile:hover { transform: translateY(-4px); box-shadow: var(--shadow); }
.tile h3 { font-size: 22px; margin: 0 0 8px; }
.tile p { color: var(--muted); margin: 0; font-size: 15.5px; }
.tile__ic { width: 50px; height: 50px; border-radius: 15px; display: grid; place-items: center; background: var(--grad-soft); color: var(--rose-2); margin-bottom: 22px; }
.tile__ic .ic { width: 24px; height: 24px; }
.tile--wide { grid-column: span 4; }
.tile--half { grid-column: span 3; }
.tile--third { grid-column: span 2; }
.tile--dark { background: var(--ink); color: #fff; border-color: transparent; }
.tile--dark p { color: #aeb6cc; }
.tile--dark .tile__ic { background: rgba(255,255,255,.08); color: #ff8fb0; }
.tile--grad { background: var(--grad); color: #fff; border: 0; }
.tile--grad p { color: rgba(255,255,255,.85); }
.tile--grad .tile__ic { background: rgba(255,255,255,.18); color: #fff; }
.tile__more { margin-top: auto; padding-top: 22px; display: inline-flex; align-items: center; gap: 6px; font: 600 15px var(--head); }
.tile__more .ic { width: 17px; height: 17px; transition: transform .2s; }
.tile:hover .tile__more .ic { transform: translateX(4px); }
.tile--wide.tile--dark::after { content: ""; position: absolute; right: -120px; bottom: -120px; width: 380px; height: 380px; border-radius: 50%; background: radial-gradient(circle, rgba(124,92,255,.45), transparent 65%); }
.ticks { list-style: none; padding: 0; margin: 20px 0 0; display: grid; grid-template-columns: 1fr 1fr; gap: 10px 18px; position: relative; z-index: 1; }
.ticks li { display: flex; gap: 9px; align-items: flex-start; font-size: 15px; }
.ticks .ic { width: 18px; height: 18px; color: var(--lime); margin-top: 2px; }
.tile:not(.tile--dark) .ticks .ic { color: var(--ok); }
.meter { margin-top: auto; padding-top: 22px; }
.meter__row { display: flex; justify-content: space-between; font: 600 13px var(--head); color: var(--muted); margin-bottom: 7px; }
.meter__bar { height: 10px; border-radius: 99px; background: var(--bg); overflow: hidden; margin-bottom: 12px; }
.meter__bar i { display: block; height: 100%; border-radius: 99px; background: var(--grad); width: 0; transition: width 1.4s cubic-bezier(.2,.8,.2,1); }
.reveal.in .meter__bar i { width: var(--w); }
@media (max-width: 980px) { .tile--wide, .tile--half { grid-column: span 6; } .tile--third { grid-column: span 3; } }
@media (max-width: 640px) { .tile--third { grid-column: span 6; } .ticks { grid-template-columns: 1fr; } .tile { padding: 24px; } }

/* Süreç */
.steps-h { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; counter-reset: st; position: relative; }
.steps-h::before { content: ""; position: absolute; top: 27px; left: 12%; right: 12%; height: 2px; background: repeating-linear-gradient(90deg, var(--line) 0 8px, transparent 8px 16px); }
.step { position: relative; text-align: center; padding: 0 8px; counter-increment: st; }
.step__n { width: 56px; height: 56px; margin: 0 auto 20px; border-radius: 18px; display: grid; place-items: center; background: #fff; border: 1px solid var(--line); box-shadow: var(--shadow); position: relative; z-index: 1; color: var(--rose-2); }
.step__n::after { content: counter(st); position: absolute; top: -8px; right: -8px; width: 22px; height: 22px; border-radius: 50%; background: var(--ink); color: #fff; font: 700 11px/22px var(--head); }
.step h3 { font-size: 18px; margin-bottom: 6px; }
.step p { color: var(--muted); font-size: 15px; margin: 0; }
@media (max-width: 860px) { .steps-h { grid-template-columns: 1fr 1fr; gap: 34px 18px; } .steps-h::before { display: none; } }
@media (max-width: 520px) { .steps-h { grid-template-columns: 1fr; } }

/* Güvenlik (koyu) */
.sec { display: grid; grid-template-columns: 1fr 1.1fr; gap: 60px; align-items: center; }
.sec__list { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.sec__item { padding: 20px; border-radius: 20px; background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.09); transition: background .25s, border-color .25s; }
.sec__item:hover { background: rgba(255,255,255,.07); border-color: rgba(255,46,99,.4); }
.sec__item .ic { width: 22px; height: 22px; color: #ff8fb0; margin-bottom: 12px; }
.sec__item b { display: block; font: 600 16px var(--head); margin-bottom: 4px; }
.sec__item span { color: #9ea7bf; font-size: 14px; }
.sec__badge { display: inline-flex; align-items: center; gap: 10px; padding: 14px 18px; border-radius: 18px; background: rgba(163,230,53,.1); border: 1px solid rgba(163,230,53,.3); color: #d9f99d; font: 600 15px var(--head); margin-top: 10px; }
.sec__badge .ic { color: var(--lime); }
.section--dark::before { content: ""; position: absolute; left: -200px; top: -200px; width: 600px; height: 600px; border-radius: 50%; background: radial-gradient(circle, rgba(255,46,99,.22), transparent 65%); }
.section--dark > .wrap { position: relative; }
@media (max-width: 900px) { .sec { grid-template-columns: 1fr; gap: 36px; } }
@media (max-width: 520px) { .sec__list { grid-template-columns: 1fr; } }

/* Temalar / demolar */
.demos { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; }
.demo { background: var(--card); border: 1px solid var(--line); border-radius: 24px; overflow: hidden; display: flex; flex-direction: column; transition: transform .3s, box-shadow .3s; }
.demo:hover { transform: translateY(-5px); box-shadow: var(--shadow); }
.demo__img { position: relative; aspect-ratio: 16 / 10; overflow: hidden; background: linear-gradient(135deg, #1b2133, #070912); margin: 10px 10px 0; border-radius: 16px; }
.demo__img img { width: 100%; height: 100%; object-fit: cover; object-position: top; transition: transform 7s ease; }
.demo:hover .demo__img img { transform: translateY(-14%); }
.demo__img--empty { display: grid; place-items: center; color: #fff; font: 700 28px var(--head); }
.demo__body { padding: 18px 22px 22px; display: flex; flex-direction: column; gap: 6px; flex: 1; }
.demo__body h3 { font-size: 20px; margin: 0; }
.demo__body p { color: var(--muted); font-size: 15px; margin: 0 0 12px; }
.demo__body .btn { align-self: flex-start; margin-top: auto; }
.badge-soon { display: inline-block; align-self: flex-start; margin-top: auto; padding: 6px 12px; border-radius: 999px; background: var(--bg); color: var(--muted); font: 600 12.5px var(--head); }
.soon-tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-top: 24px; }
.soon-tile { border: 1.5px dashed #d4d8e3; border-radius: 22px; padding: 22px; display: flex; align-items: center; gap: 14px; color: var(--muted); }
.soon-tile b { display: block; color: var(--ink); font: 600 16px var(--head); }
.soon-tile .tile__ic { margin: 0; width: 44px; height: 44px; }
@media (max-width: 760px) { .demos, .soon-tiles { grid-template-columns: 1fr; } }

/* Paketler */
.plans { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 22px; align-items: stretch; }
.plan { position: relative; background: var(--card); border: 1px solid var(--line); border-radius: 28px; padding: 34px 30px; display: flex; flex-direction: column; }
.plan--featured { background: var(--ink); color: #fff; border-color: transparent; box-shadow: 0 40px 80px -30px rgba(124,92,255,.55); }
.plan--featured::before { content: ""; position: absolute; inset: -1.5px; border-radius: 29px; padding: 1.5px; background: var(--grad); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; pointer-events: none; }
.plan__badge { position: absolute; top: -14px; left: 30px; padding: 6px 14px; border-radius: 999px; background: var(--grad); color: #fff; font: 700 12px/1.2 var(--head); box-shadow: 0 8px 20px -8px rgba(255,46,99,.8); }
.plan h3 { font-size: 23px; margin-bottom: 6px; }
.plan__tag { color: var(--muted); font-size: 15px; margin-bottom: 22px; min-height: 48px; }
.plan--featured .plan__tag, .plan--featured .plan__vat, .plan--featured .plan__renew { color: #aeb6cc; }
.plan__price { display: flex; align-items: baseline; gap: 10px; margin-bottom: 4px; flex-wrap: wrap; }
.plan__price b { font: 800 46px/1 var(--head); letter-spacing: -.04em; }
.plan__price s { color: var(--muted); font-size: 17px; }
.plan__vat { color: var(--muted); font-size: 13px; margin-bottom: 24px; }
.plan ul { list-style: none; padding: 22px 0 0; margin: 0 0 28px; display: grid; gap: 12px; border-top: 1px solid var(--line); }
.plan--featured ul { border-color: rgba(255,255,255,.12); }
.plan li { padding-left: 30px; position: relative; font-size: 15px; }
.plan li::before { content: ""; position: absolute; left: 0; top: 2px; width: 20px; height: 20px; border-radius: 50%; background: #e7f8f1 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230f9f6e' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / 11px no-repeat; }
.plan--featured li::before { background-color: rgba(163,230,53,.16); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23a3e635' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E"); }
.plan form, .plan > .btn { margin-top: auto; }
.plan__renew { margin: 14px 0 0; text-align: center; color: var(--muted); font-size: 13px; }
.plan h3 a:hover { text-decoration: underline; }
.plan--quote { background: var(--bg); border-style: dashed; }

/* Karşılaştırma */
.compare { margin-top: 56px; background: var(--card); border: 1px solid var(--line); border-radius: 26px; overflow: hidden; }
.compare table { width: 100%; border-collapse: collapse; }
.compare th, .compare td { padding: 16px 22px; text-align: left; border-bottom: 1px solid var(--line); font-size: 15px; }
.compare tr:last-child td { border-bottom: 0; }
.compare thead th { font: 700 15px var(--head); background: var(--bg); }
.compare th:not(:first-child), .compare td:not(:first-child) { text-align: center; width: 180px; }
.compare .ic { width: 20px; height: 20px; margin: 0 auto; display: block; }
.compare .yes { color: var(--ok); } .compare .no { color: #c4c9d6; }
.compare td.col-hi, .compare th.col-hi { background: rgba(124,92,255,.05); }
@media (max-width: 640px) { .compare th, .compare td { padding: 12px 12px; font-size: 14px; } .compare th:not(:first-child), .compare td:not(:first-child) { width: 76px; } }

/* SSS */
.faq-wrap { display: grid; grid-template-columns: .8fr 1.2fr; gap: 50px; align-items: start; }
.faq { display: grid; gap: 12px; }
.faq details { background: var(--card); border: 1px solid var(--line); border-radius: 18px; padding: 4px 22px; transition: border-color .2s; }
.faq details[open] { border-color: var(--ink); }
.faq summary { cursor: pointer; list-style: none; padding: 18px 0; font: 600 16.5px var(--head); display: flex; justify-content: space-between; gap: 16px; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; flex: none; width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; background: var(--bg); font-size: 20px; line-height: 1; color: var(--ink); transition: transform .25s, background .2s; }
.faq details[open] summary::after { transform: rotate(45deg); background: var(--grad); color: #fff; }
.faq details p { color: var(--muted); padding-bottom: 8px; }
@media (max-width: 860px) { .faq-wrap { grid-template-columns: 1fr; gap: 10px; } }

/* Çağrı bandı */
.cta { position: relative; overflow: hidden; border-radius: 34px; padding: 70px 50px; background: var(--ink); color: #fff; text-align: center; isolation: isolate; }
.cta::before { content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(50% 80% at 15% 0%, rgba(255,46,99,.55), transparent 70%), radial-gradient(50% 80% at 85% 100%, rgba(124,92,255,.6), transparent 70%); }
.cta h2 { font-size: clamp(30px, 4vw, 50px); font-weight: 800; margin: 0 auto 12px; max-width: 760px; }
.cta p { color: #c6cde0; margin: 0 auto 30px; max-width: 560px; font-size: 18px; }
.cta .hero__cta { margin: 0; }

/* Alt bilgi */
.footer { background: var(--ink); color: #9ea7bf; padding: 80px 0 30px; font-size: 15px; overflow: hidden; }
.footer__top { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1fr; gap: 36px; }
.footer .logo { color: #fff; margin-bottom: 16px; }
.footer .logo__mark { background: #1a1f33; }
.footer__brand p { max-width: 340px; }
.footer__mail { display: inline-flex; align-items: center; gap: 8px; color: #fff; font-weight: 600; }
.footer__mail .ic { width: 18px; height: 18px; color: #ff8fb0; }
.footer h4 { color: #fff; font-size: 15px; margin-bottom: 16px; }
.footer ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }
.footer a:hover { color: #fff; }
.footer__word { font: 800 clamp(70px, 17vw, 230px)/.9 var(--head); letter-spacing: -.06em; text-align: center; margin: 60px 0 10px; background: linear-gradient(180deg, rgba(255,255,255,.12), rgba(255,255,255,0)); -webkit-background-clip: text; background-clip: text; color: transparent; user-select: none; }
.footer__bottom { border-top: 1px solid #1b2133; padding-top: 22px; display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; font-size: 13px; }
@media (max-width: 860px) { .footer__top { grid-template-columns: 1fr 1fr; } .footer__brand { grid-column: 1 / -1; } }

/* İç sayfa başlığı */
.page-hero { padding: 40px 0 10px; }
.page-hero h1 { font-size: clamp(34px, 5vw, 56px); font-weight: 800; }

/* Ürün sayfası */
.pdp { padding: 34px 0 90px; }
.pdp .wrap { display: grid; grid-template-columns: 1.35fr 1fr; gap: 50px; align-items: start; }
.pdp__crumb { color: var(--muted); font-size: 14px; margin-bottom: 16px; }
.pdp__crumb a:hover { color: var(--rose-2); }
.pdp h1 { font-size: clamp(34px, 4.6vw, 54px); font-weight: 800; }
.pdp__desc { color: var(--ink-2); font-size: 17px; }
.pdp .plan { border: 0; padding: 0; background: none; }
.pdp .plan ul { border: 0; padding: 0; }
.shot__browser { border-radius: 18px; background: #fff; box-shadow: var(--shadow-lg), 0 0 0 1px rgba(7,9,18,.06); overflow: hidden; }
.shot__bar { display: flex; align-items: center; gap: 6px; padding: 10px 12px; background: #eef0f5; }
.shot__bar i { width: 10px; height: 10px; border-radius: 50%; background: #d7dbe3; }
.shot__bar i:first-child { background: #ff5f57; } .shot__bar i:nth-child(2) { background: #febc2e; } .shot__bar i:nth-child(3) { background: #28c840; }
.shot__bar span { margin-left: 10px; flex: 1; max-width: 300px; height: 22px; border-radius: 6px; background: #fff; font: 12px/22px var(--body); color: var(--muted); padding: 0 10px; }
.buybox { position: sticky; top: 100px; background: var(--card); border: 1px solid var(--line); border-radius: 28px; padding: 30px; box-shadow: var(--shadow); }
.buybox .plan__price b { font-size: 50px; }
@media (max-width: 900px) { .pdp .wrap { grid-template-columns: 1fr; } .buybox { position: static; } }

/* Formlar */
.field { margin-bottom: 16px; }
.field label { display: block; font: 600 14px var(--head); margin-bottom: 7px; }
.field input, .field select, .field textarea { width: 100%; padding: 13px 15px; border: 1.5px solid var(--line); border-radius: 14px; font: 16px var(--body); background: #fff; color: var(--ink); transition: border-color .2s, box-shadow .2s; }
.field input:focus, .field textarea:focus, .field select:focus { outline: none; border-color: var(--violet); box-shadow: 0 0 0 4px rgba(124,92,255,.15); }
.field .err { color: var(--rose-2); font-size: 13px; margin-top: 6px; font-weight: 600; }
.check { display: flex; gap: 10px; align-items: flex-start; font-size: 14px; color: var(--ink-2); margin-bottom: 16px; }
.check input { margin-top: 3px; width: 18px; height: 18px; accent-color: var(--rose); flex: none; }

/* Giriş / kayıt */
.auth { min-height: calc(100vh - 128px); display: grid; place-items: center; padding: 30px 22px 70px; background: radial-gradient(700px 400px at 100% 0, rgba(255,46,99,.12), transparent 60%), radial-gradient(700px 400px at 0 100%, rgba(124,92,255,.12), transparent 60%), var(--bg); }
.auth__box { width: min(450px, 100%); background: var(--card); border-radius: 28px; padding: 38px 34px; box-shadow: var(--shadow-lg); border: 1px solid var(--line); }
.auth__box h1 { font-size: 28px; font-weight: 800; margin-bottom: 6px; }
.auth__box > p { color: var(--muted); margin-bottom: 24px; }
.auth__alt { text-align: center; margin-top: 20px; font-size: 15px; color: var(--muted); }
.auth__row { display: flex; justify-content: space-between; align-items: center; margin-bottom: 18px; font-size: 14px; }

/* Sepet */
.cart { padding: 34px 0 90px; }
.cart .wrap { display: grid; grid-template-columns: 1fr 380px; gap: 30px; align-items: start; }
.cart h1 { grid-column: 1 / -1; font-size: clamp(32px, 4vw, 46px); font-weight: 800; margin: 0; }
.line { display: grid; grid-template-columns: 1fr auto auto auto; gap: 18px; align-items: center; padding: 20px 22px; background: var(--card); border: 1px solid var(--line); border-radius: 20px; margin-bottom: 12px; }
.line h3 { font-size: 17px; margin: 0 0 3px; }
.line p { margin: 0; color: var(--muted); font-size: 14px; }
.line form { margin: 0; }
.line select { padding: 9px 12px; border: 1.5px solid var(--line); border-radius: 12px; font: inherit; background: #fff; }
.line__price { font: 700 18px var(--head); min-width: 110px; text-align: right; }
.line__x { background: none; border: 0; color: var(--muted); cursor: pointer; font-size: 22px; width: 36px; height: 36px; border-radius: 50%; }
.line__x:hover { background: var(--red-soft); color: var(--rose); }
.summary { background: var(--ink); color: #fff; border-radius: 26px; padding: 28px; position: sticky; top: 100px; }
.summary h2 { font-size: 20px; }
.summary dl { margin: 0 0 20px; display: grid; gap: 12px; }
.summary dl div { display: flex; justify-content: space-between; color: #aeb6cc; font-size: 15px; }
.summary dd { margin: 0; }
.summary dl div.total { color: #fff; font: 700 22px var(--head); border-top: 1px solid rgba(255,255,255,.12); padding-top: 14px; }
.summary .plan__renew { color: #aeb6cc; }
.summary .link { color: #ff8fb0; }
.empty { text-align: center; padding: 80px 22px; border: 2px dashed var(--line); border-radius: 28px; grid-column: 1 / -1; }
.empty p { color: var(--muted); }
@media (max-width: 900px) { .cart .wrap { grid-template-columns: 1fr; } .summary { position: static; } .line { grid-template-columns: 1fr auto; } .line__price { text-align: left; } }

/* Müşteri paneli */
.acc { padding: 34px 0 90px; background: var(--bg); min-height: calc(100vh - 128px); }
.acc .wrap { display: grid; grid-template-columns: 250px 1fr; gap: 28px; align-items: start; }
.acc__nav { background: var(--ink); color: #c9cfe0; border-radius: 24px; padding: 10px; position: sticky; top: 100px; }
.acc__nav a, .acc__nav button { display: flex; align-items: center; gap: 10px; width: 100%; padding: 12px 14px; border-radius: 14px; font: 600 15px var(--head); color: #c9cfe0; background: none; border: 0; cursor: pointer; text-align: left; }
.acc__nav .ic { width: 18px; height: 18px; }
.acc__nav a:hover, .acc__nav button:hover { background: rgba(255,255,255,.06); color: #fff; }
.acc__nav a.on { background: var(--grad); color: #fff; }
.acc__hello { padding: 14px 14px 16px; border-bottom: 1px solid rgba(255,255,255,.1); margin-bottom: 8px; }
.acc__hello b { display: block; font: 700 16px var(--head); color: #fff; }
.acc__hello small { color: #8c95ad; word-break: break-all; }
.acc h1 { font-size: 30px; font-weight: 800; margin-bottom: 20px; }
.card { background: var(--card); border: 1px solid var(--line); border-radius: 22px; padding: 24px 26px; margin-bottom: 18px; }
.card h2 { font-size: 18px; margin-bottom: 14px; }
.lic { display: grid; grid-template-columns: 1fr auto; gap: 14px; align-items: center; padding: 20px 22px; border: 1px solid var(--line); border-radius: 20px; background: var(--card); margin-bottom: 12px; transition: border-color .2s, transform .2s; }
.lic:hover { border-color: var(--ink); transform: translateY(-2px); }
.lic h3 { font-size: 17px; margin: 0 0 4px; }
.lic p { margin: 0; color: var(--muted); font-size: 14px; }
.pill { display: inline-block; vertical-align: middle; padding: 3px 10px; border-radius: 999px; font: 700 12px/1.5 var(--head); background: #eef0f5; color: var(--ink-2); }
.pill--active { background: #e7f8f1; color: var(--ok); } .pill--suspended { background: #fef3c7; color: var(--warn); } .pill--revoked, .pill--expired { background: var(--red-soft); color: var(--rose-2); }
.keyrow { display: flex; gap: 10px; align-items: stretch; flex-wrap: wrap; }
.keyrow code { flex: 1; min-width: 260px; padding: 15px 18px; border-radius: 14px; background: var(--ink); color: #fff; font: 600 18px/1.3 ui-monospace, Menlo, Consolas, monospace; letter-spacing: .06em; word-break: break-all; }
.facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 12px; }
.facts div { padding: 16px 18px; border-radius: 16px; background: var(--bg); }
.facts small { display: block; color: var(--muted); font-size: 13px; font-weight: 600; }
.facts b { font: 700 16px var(--head); }
.acc .facts div { background: var(--card); border: 1px solid var(--line); }
.tbl { width: 100%; border-collapse: collapse; }
.tbl th, .tbl td { text-align: left; padding: 12px 8px; border-bottom: 1px solid var(--line); font-size: 15px; }
.tbl th { color: var(--muted); font-size: 12.5px; text-transform: uppercase; letter-spacing: .04em; }
.steps { counter-reset: s; list-style: none; padding: 0; margin: 0; display: grid; gap: 12px; }
.steps li { counter-increment: s; padding-left: 40px; position: relative; color: var(--ink-2); }
.steps li::before { content: counter(s); position: absolute; left: 0; top: 0; width: 27px; height: 27px; border-radius: 9px; background: var(--grad); color: #fff; display: grid; place-items: center; font: 700 13px var(--head); }
@media (max-width: 860px) { .acc .wrap { grid-template-columns: 1fr; } .acc__nav { position: static; display: flex; overflow-x: auto; gap: 4px; } .acc__hello { display: none; } .acc__nav a, .acc__nav button { white-space: nowrap; width: auto; } .acc__nav form { display: flex; } }

/* Metin sayfaları */
.prose { padding: 30px 0 90px; }
.prose .wrap { max-width: 820px; }
.prose h1 { font-size: clamp(34px, 4.6vw, 50px); font-weight: 800; }
.prose h2 { font-size: 22px; margin-top: 34px; }
.prose p, .prose li { color: var(--ink-2); }
.note { padding: 14px 18px; border-radius: 14px; background: #fff7ed; color: #9a3412; font-size: 14px; margin-bottom: 24px; }

/* Çok yakında */
.soon { min-height: 100vh; display: grid; place-items: center; text-align: center; padding: 40px 22px; background: var(--ink); color: #fff; position: relative; overflow: hidden; isolation: isolate; }
.soon::before { content: ""; position: absolute; inset: -20%; z-index: -1; background: radial-gradient(40% 35% at 25% 25%, rgba(255,46,99,.45), transparent 70%), radial-gradient(35% 40% at 75% 70%, rgba(124,92,255,.5), transparent 70%); filter: blur(20px); animation: drift 18s ease-in-out infinite alternate; }
.soon .logo { justify-content: center; margin-bottom: 34px; font-size: 28px; color: #fff; }
.soon .logo__mark { background: #1a1f33; }
.soon h1 { font-size: clamp(38px, 6vw, 70px); font-weight: 800; letter-spacing: -.045em; max-width: 860px; margin: 0 auto 18px; }
.soon p { color: #b8bfd4; font-size: 19px; max-width: 560px; margin: 0 auto 30px; }

/* Belirme animasyonu */
.reveal { opacity: 0; transform: translateY(22px); transition: opacity .8s ease, transform .8s cubic-bezier(.2,.8,.2,1); }
.reveal.in { opacity: 1; transform: none; }
.reveal.d1 { transition-delay: .08s; } .reveal.d2 { transition-delay: .16s; } .reveal.d3 { transition-delay: .24s; }
@media (prefers-reduced-motion: reduce) { .reveal { opacity: 1; transform: none; } *, *::before, *::after { animation: none !important; transition: none !important; } .meter__bar i { width: var(--w); } }
body.tint { background: var(--bg); }

/* Tema kartları (katalog ve ana sayfa) */
.tcards { display: grid; gap: 24px; }
.tcard { display: grid; grid-template-columns: 1.15fr 1fr; gap: 0; background: var(--card); border: 1px solid var(--line); border-radius: 30px; overflow: hidden; transition: box-shadow .3s, transform .3s; }
.tcard:hover { box-shadow: var(--shadow-lg); transform: translateY(-4px); }
.tcard__media { position: relative; display: block; padding: 34px 0 0 34px; background: radial-gradient(80% 90% at 0% 0%, rgba(255,46,99,.35), transparent 60%), radial-gradient(70% 80% at 100% 100%, rgba(124,92,255,.45), transparent 60%), var(--ink); overflow: hidden; min-height: 340px; }
.tcard__win { position: absolute; left: 34px; right: -40px; top: 34px; bottom: -30px; border-radius: 14px 0 0 0; overflow: hidden; background: #fff; box-shadow: var(--shadow-lg); }
.tcard__shot { height: calc(100% - 30px); overflow: hidden; }
.tcard__shot img { width: 100%; object-fit: cover; object-position: top; transition: transform 8s ease; }
.tcard:hover .tcard__shot img { transform: translateY(-30%); }
.tcard__body { padding: 40px 40px 36px; display: flex; flex-direction: column; }
.tcard__body .kicker { align-self: flex-start; }
.tcard__body h3 { font-size: clamp(34px, 4vw, 48px); font-weight: 800; letter-spacing: -.04em; margin-bottom: 10px; }
.tcard__body > p { color: var(--muted); font-size: 17px; }
.tcard__chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 4px 0 6px; }
.tcard__chips span { display: inline-flex; align-items: center; gap: 7px; padding: 7px 12px; border-radius: 999px; background: var(--bg); font: 600 13px var(--head); color: var(--ink-2); }
.tcard__chips .ic { width: 16px; height: 16px; color: var(--rose-2); }
.tcard__ticks { margin-bottom: 26px; }
.tcard__cta { margin-top: auto; display: flex; gap: 10px; flex-wrap: wrap; }
@media (max-width: 900px) { .tcard { grid-template-columns: 1fr; } .tcard__media { min-height: 260px; } .tcard__body { padding: 28px 24px; } }

/* Tema detay: kahraman */
.th-hero { padding: 130px 0 90px; }
.th-hero__in { display: grid; grid-template-columns: 1fr 1.1fr; gap: 50px; align-items: center; }
.th-hero__copy { text-align: left; }
.th-hero h1 { font-size: clamp(60px, 9vw, 120px); line-height: .95; margin-bottom: 18px; }
.th-hero .hero__lead { margin: 0 0 30px; }
.th-hero .hero__cta, .th-hero .hero__trust { justify-content: flex-start; }
.th-crumb { color: #8c95ad; font: 600 14px var(--head); margin-bottom: 20px; }
.th-crumb a:hover { color: #fff; }
.th-crumb span { margin: 0 6px; opacity: .5; }
.th-hero__art { position: relative; height: 470px; }
.th-win { left: 0; right: 40px; top: 0; height: 430px; transform: perspective(1600px) rotateY(-10deg) rotateX(4deg); transition: transform .6s; }
.th-hero__art:hover .th-win { transform: perspective(1600px) rotateY(-3deg) rotateX(1deg); }
.th-win__shot { height: calc(100% - 30px); overflow: hidden; }
.th-win__shot img { width: 100%; object-fit: cover; object-position: top; }
.th-phone { position: absolute; right: 0; bottom: 0; width: 170px; border-radius: 26px; border: 7px solid #1a1f33; overflow: hidden; box-shadow: 0 30px 60px -20px rgba(0,0,0,.7); background: #1a1f33; animation: float 7s ease-in-out infinite; }
@media (max-width: 960px) { .th-hero__in { grid-template-columns: 1fr; } .th-hero__art { height: 340px; } .th-win { height: 320px; right: 30px; transform: none; } .th-phone { width: 120px; } }

/* Tema detay: tanıtım */
.th-intro__in { display: grid; grid-template-columns: .9fr 1.1fr; gap: 60px; align-items: start; }
.th-intro__text p { font-size: 18px; color: var(--ink-2); line-height: 1.75; }
.th-intro__text p:first-child::first-letter { font: 800 3.4em/0.8 var(--head); float: left; margin: 6px 10px 0 0; background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
@media (max-width: 860px) { .th-intro__in { grid-template-columns: 1fr; gap: 10px; } }
.demos--3 { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 980px) { .demos--3 { grid-template-columns: 1fr 1fr; } }
@media (max-width: 640px) { .demos--3 { grid-template-columns: 1fr; } }

/* Tema detay: koyu mod */
.dm { display: grid; grid-template-columns: 1.1fr 1fr; gap: 60px; align-items: center; }
.dm__art { position: relative; height: 440px; }
.dm__shot { position: absolute; width: 74%; aspect-ratio: 16 / 11; border-radius: 16px; overflow: hidden; box-shadow: var(--shadow-lg), 0 0 0 1px rgba(255,255,255,.08); }
.dm__shot img { width: 100%; height: 100%; object-fit: cover; object-position: top; }
.dm__shot--light { left: 0; top: 0; opacity: .55; transform: rotate(-3deg); }
.dm__shot--dark { right: 0; bottom: 20px; }
.dm__toggle { position: absolute; left: 50%; bottom: 0; transform: translateX(-50%); display: flex; gap: 4px; padding: 5px; border-radius: 999px; background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.18); backdrop-filter: blur(12px); z-index: 2; }
.dm__toggle span { display: inline-flex; align-items: center; gap: 7px; padding: 9px 16px; border-radius: 999px; font: 600 14px var(--head); color: #aeb6cc; }
.dm__toggle span.on { background: #fff; color: var(--ink); }
.dm__toggle .ic { width: 16px; height: 16px; }
@media (max-width: 900px) { .dm { grid-template-columns: 1fr; gap: 30px; } .dm__art { height: 320px; } }

/* Tema detay: özellik grupları */
.fgroups { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.fgroup { background: var(--card); border: 1px solid var(--line); border-radius: 26px; padding: 28px; transition: box-shadow .3s, border-color .3s; }
.fgroup:hover { box-shadow: var(--shadow); border-color: #d9dce6; }
.fgroup__head { display: flex; align-items: center; gap: 14px; margin-bottom: 18px; }
.fgroup__head .tile__ic { margin: 0; width: 46px; height: 46px; }
.fgroup__head h3 { margin: 0; font-size: 19px; }
.fgroup ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 11px; }
.fgroup li { display: flex; gap: 10px; align-items: flex-start; font-size: 15px; color: var(--ink-2); }
.fgroup li .ic { width: 18px; height: 18px; color: var(--ok); margin-top: 2px; }
@media (max-width: 980px) { .fgroups { grid-template-columns: 1fr 1fr; } }
@media (max-width: 640px) { .fgroups { grid-template-columns: 1fr; } }

/* Tema detay: teknik bilgiler */
.th-specs { display: grid; grid-template-columns: 1.2fr 1fr; gap: 40px; align-items: start; }
.specs { margin: 20px 0 0; background: var(--card); border: 1px solid var(--line); border-radius: 22px; overflow: hidden; }
.specs div { display: grid; grid-template-columns: 200px 1fr; gap: 16px; padding: 15px 22px; border-bottom: 1px solid var(--line); font-size: 15px; }
.specs div:last-child { border-bottom: 0; }
.specs dt { font: 600 14.5px var(--head); color: var(--muted); }
.specs dd { margin: 0; }
.th-callout { background: var(--ink); color: #fff; border-radius: 28px; padding: 34px; position: relative; overflow: hidden; isolation: isolate; }
.th-callout::before { content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(70% 80% at 100% 0, rgba(124,92,255,.5), transparent 70%), radial-gradient(60% 70% at 0 100%, rgba(255,46,99,.35), transparent 70%); }
.th-callout .tile__ic { background: rgba(255,255,255,.1); color: #ff8fb0; }
.th-callout h3 { font-size: 24px; }
.th-callout p { color: #c6cde0; margin-bottom: 24px; }
@media (max-width: 900px) { .th-specs { grid-template-columns: 1fr; } .specs div { grid-template-columns: 1fr; gap: 2px; } }
.plans--2 { max-width: 900px; margin: 0 auto; }

/* Fiyat yapısı ve hizmetler */
.plan__per { font: 600 16px var(--head); color: var(--muted); }
.plan--featured .plan__per { color: #aeb6cc; }
.plan__save { margin: -14px 0 20px; font-size: 13.5px; color: var(--ok); }
.plan--featured .plan__save { color: var(--lime); }
.plan--care .tile__ic { margin-bottom: 16px; }
.plan--care ul li b { font-family: var(--head); }
.plans--3 { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 980px) { .plans--3 { grid-template-columns: 1fr; max-width: 520px; margin: 0 auto; } }
.svcs { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 20px; }
.svc { background: var(--card); border: 1px solid var(--line); border-radius: 26px; padding: 28px; display: flex; flex-direction: column; transition: transform .3s, box-shadow .3s; }
.svc:hover { transform: translateY(-4px); box-shadow: var(--shadow); }
.svc__top { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 18px; }
.svc__top .tile__ic { margin: 0; }
.svc__price { text-align: right; }
.svc__price b { display: block; font: 800 28px/1 var(--head); letter-spacing: -.03em; }
.svc__price small { color: var(--muted); font-size: 12.5px; }
.svc h3 { font-size: 21px; margin-bottom: 6px; }
.svc h3 a:hover { text-decoration: underline; }
.svc > p { color: var(--muted); font-size: 15px; }
.svc__list { list-style: none; padding: 16px 0 0; margin: 0 0 24px; display: grid; gap: 9px; border-top: 1px solid var(--line); }
.svc__list li { display: flex; gap: 9px; font-size: 14.5px; color: var(--ink-2); }
.svc__list .ic { width: 17px; height: 17px; color: var(--ok); margin-top: 2px; }
.svc form { margin-top: auto; }
.sv-hero { padding-bottom: 110px; }
.sv-hero .hero__copy { text-align: center; }
.sv-hero .hero__cta, .sv-hero .hero__trust { justify-content: center; }
.sv-hero h1 { font-size: clamp(42px, 6.4vw, 78px); }
.sv-hero .hero__lead { margin: 0 auto 32px; }
.cta--split { display: flex; justify-content: space-between; align-items: center; gap: 30px; text-align: left; flex-wrap: wrap; }
.cta--split h2, .cta--split p { margin-left: 0; }
.cta--split .kicker { background: rgba(255,46,99,.14); color: #ff8fb0; }
.pdp__badge { display: flex; align-items: center; gap: 16px; padding: 22px; margin: 22px 0 30px; border-radius: 22px; background: var(--bg); }
.pdp__badge .tile__ic { margin: 0; }
.pdp__badge b { display: block; font: 700 17px var(--head); }
.pdp__badge span:last-child { color: var(--muted); font-size: 14.5px; }

/* Ödeme */
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0 16px; }
@media (max-width: 640px) { .grid-2 { grid-template-columns: 1fr; } }
.pay { display: grid; gap: 10px; }
.pay__opt { display: flex; gap: 14px; align-items: flex-start; padding: 16px 18px; border: 1.5px solid var(--line); border-radius: 16px; cursor: pointer; transition: border-color .2s, background .2s; }
.pay__opt:has(input:checked) { border-color: var(--violet); background: rgba(124,92,255,.05); }
.pay__opt input { margin-top: 4px; accent-color: var(--violet); }
.pay__opt b { display: block; font: 600 16px var(--head); }
.pay__opt small { color: var(--muted); font-size: 14px; }
.pay__opt.is-off { opacity: .55; cursor: not-allowed; }
.field textarea { resize: vertical; }

/* Siparişler (müşteri) */
.ord { display: grid; grid-template-columns: 1fr auto auto; gap: 16px; align-items: center; padding: 18px 22px; border: 1px solid var(--line); border-radius: 18px; background: var(--card); margin-bottom: 10px; transition: border-color .2s; }
.ord:hover { border-color: var(--ink); }
.ord b { font: 700 16px var(--head); }
.ord small { display: block; color: var(--muted); font-size: 13.5px; }
.pill--pending, .pill--info, .pill--waiting { background: #fef3c7; color: var(--warn); }
.pill--paid, .pill--done { background: #e7f8f1; color: var(--ok); }
.pill--cancelled { background: var(--red-soft); color: var(--rose-2); }
.pill--working { background: #eef0ff; color: #4338ca; }
.bank { display: grid; gap: 10px; margin: 14px 0 6px; }
.bank div { display: flex; justify-content: space-between; gap: 12px; align-items: center; padding: 13px 16px; border-radius: 14px; background: var(--bg); flex-wrap: wrap; }
.bank small { color: var(--muted); font-weight: 600; font-size: 13px; }
.bank b { font: 700 16px var(--head); }
.bank code { font: 700 16px ui-monospace, Menlo, monospace; letter-spacing: .03em; }
.timeline { display: flex; gap: 0; margin: 4px 0 20px; }
.timeline span { flex: 1; text-align: center; font: 600 13px var(--head); color: var(--muted); position: relative; padding-top: 30px; }
.timeline span::before { content: ""; position: absolute; top: 6px; left: 50%; transform: translateX(-50%); width: 18px; height: 18px; border-radius: 50%; background: var(--line); border: 3px solid #fff; box-shadow: 0 0 0 1px var(--line); z-index: 1; }
.timeline span::after { content: ""; position: absolute; top: 14px; left: -50%; width: 100%; height: 3px; background: var(--line); }
.timeline span:first-child::after { display: none; }
.timeline span.on { color: var(--ink); }
.timeline span.on::before { background: var(--grad); box-shadow: 0 0 0 1px transparent; }
.timeline span.on::after { background: var(--violet); }
.item { border: 1px solid var(--line); border-radius: 18px; padding: 18px 20px; margin-bottom: 12px; }
.item__head { display: flex; justify-content: space-between; gap: 12px; align-items: center; flex-wrap: wrap; }
.item__head b { font: 700 16px var(--head); }
.item form { margin-top: 14px; padding-top: 14px; border-top: 1px dashed var(--line); }
.cta--split h2 .grad-text { white-space: nowrap; }