/* Makas tanıtım sayfası (site.css'in üstüne). Yalnız CSS: sayfada script yok (CSP). */
:root{--ease:cubic-bezier(.2,.7,.2,1)}
section{padding:110px 0;position:relative}
@media (max-width:760px){section{padding:76px 0}}
.head{max-width:760px;margin:0 0 48px}
.head.center{margin-left:auto;margin-right:auto;text-align:center}
.head h2{font-size:clamp(32px,4.6vw,56px);margin-top:14px}
.head p{margin-top:16px;color:var(--ink-dim);font-size:17.5px}
.head.center .eyebrow{justify-content:center}
.alt{background:linear-gradient(180deg,rgba(255,255,255,0),rgba(138,108,247,.05) 20%,rgba(138,108,247,.05) 80%,rgba(255,255,255,0))}

/* Üst çubuk: daha yoğun gezinme */
.topbar .nav{gap:20px}
.topbar .nav a{font-size:13.5px}
.topbar .cta-mini{font-size:13px;font-weight:800;text-decoration:none;color:#fff;background:var(--grad);padding:9px 16px;border-radius:999px;box-shadow:0 10px 26px -12px rgba(138,108,247,.9);white-space:nowrap}
@media (max-width:1060px){.topbar .nav a.opt{display:none}}

/* Mobil gezinme: yatay kaydırılan çipler */
.subnav{display:none;position:sticky;top:68px;z-index:19;background:rgba(12,11,20,.82);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-bottom:1px solid rgba(174,155,255,.08)}
.subnav div{display:flex;gap:8px;overflow-x:auto;padding:10px 18px;scrollbar-width:none}
.subnav div::-webkit-scrollbar{display:none}
.subnav a{flex:none;font-size:13px;font-weight:700;text-decoration:none;color:var(--ink-dim);padding:7px 13px;border-radius:999px;border:1px solid var(--border)}
@media (max-width:900px){.subnav{display:block}}

/* ================= HERO ================= */
.L-hero{padding:56px 0 40px;overflow:hidden}
.L-hero .wrap{display:grid;grid-template-columns:1.02fr 1fr;gap:30px;align-items:center}
@media (max-width:1000px){.L-hero .wrap{grid-template-columns:1fr}}
.kicker{display:inline-flex;align-items:center;gap:10px;padding:7px 14px 7px 8px;border-radius:999px;background:var(--surface);border:1px solid var(--border);font-size:13px;font-weight:700;color:var(--ink-dim)}
.kicker b{font-size:11px;letter-spacing:.08em;color:#fff;background:var(--grad);padding:4px 9px;border-radius:999px}
.L-hero h1{font-size:clamp(44px,6.4vw,84px);line-height:1.0;letter-spacing:-.035em;margin-top:22px}
.L-hero h1 .grad-text{display:inline-block;padding-bottom:.06em}
.L-hero .lead{margin-top:22px;font-size:clamp(17px,1.6vw,20px);color:var(--ink-dim);max-width:560px}
.L-hero .hero-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:30px}
.links{display:flex;flex-wrap:wrap;gap:18px;margin-top:20px}
.links a{font-size:14.5px;font-weight:700;color:var(--violet-bright);text-decoration:none}
.links a:hover{color:#fff}
.trust{display:flex;flex-wrap:wrap;gap:8px;margin-top:30px}
.trust span{display:inline-flex;align-items:center;gap:7px;font-size:13px;font-weight:700;padding:8px 13px;border-radius:999px;background:var(--surface);border:1px solid var(--border)}
.trust span::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--green);box-shadow:0 0 10px var(--green)}

/* Telefon sahnesi: 3B duruş, süzülen kartlar */
.scene{position:relative;height:720px;perspective:1800px}
@media (max-width:1000px){.scene{height:640px;margin-top:10px}}
@media (max-width:560px){.scene{height:540px}}
.scene .glow{position:absolute;left:50%;top:50%;width:620px;height:620px;transform:translate(-50%,-50%);border-radius:50%;background:radial-gradient(circle,rgba(138,108,247,.45),rgba(91,141,239,.12) 45%,transparent 70%);filter:blur(10px)}
.dev{position:absolute;border-radius:46px;padding:9px;background:linear-gradient(150deg,#4a4858,#141319 38%,#2e2c38 72%,#0c0b10);box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.2),0 50px 100px -30px rgba(0,0,0,.95),0 0 80px -20px rgba(138,108,247,.5)}
.dev img{border-radius:38px;width:100%}
.dev::after{content:"";position:absolute;inset:0;border-radius:46px;background:linear-gradient(115deg,rgba(255,255,255,.16),rgba(255,255,255,0) 30%);pointer-events:none}
.scene .d1{width:300px;left:50%;top:40px;margin-left:-150px;z-index:3;transform:rotateY(-14deg) rotateX(6deg);animation:sway 9s var(--ease) infinite}
.scene .d2{width:250px;left:4%;top:120px;z-index:2;transform:rotateY(24deg) rotateZ(-4deg) translateZ(-120px);opacity:.92;animation:sway2 11s var(--ease) infinite}
.scene .d3{width:250px;right:4%;top:120px;z-index:2;transform:rotateY(-30deg) rotateZ(4deg) translateZ(-120px);opacity:.92;animation:sway3 12s var(--ease) infinite}
@media (max-width:560px){.scene .d1{width:240px;margin-left:-120px}.scene .d2,.scene .d3{width:190px;top:110px}.scene .d2{left:-6%}.scene .d3{right:-6%}}
@keyframes sway{0%,100%{transform:rotateY(-14deg) rotateX(6deg) translateY(0)}50%{transform:rotateY(-4deg) rotateX(4deg) translateY(-14px)}}
@keyframes sway2{0%,100%{transform:rotateY(24deg) rotateZ(-4deg) translateZ(-120px) translateY(0)}50%{transform:rotateY(18deg) rotateZ(-3deg) translateZ(-120px) translateY(12px)}}
@keyframes sway3{0%,100%{transform:rotateY(-30deg) rotateZ(4deg) translateZ(-120px) translateY(0)}50%{transform:rotateY(-22deg) rotateZ(3deg) translateZ(-120px) translateY(-10px)}}
.pop{position:absolute;z-index:5;border-radius:18px;overflow:hidden;box-shadow:0 0 0 1.5px rgba(255,255,255,.75),0 30px 60px -18px rgba(5,3,30,.9),0 0 50px -10px rgba(138,108,247,.7)}
.pop img{width:100%}
.scene .p1{width:330px;left:50%;top:150px;margin-left:-250px;animation:pop1 7s var(--ease) infinite}
.scene .p2{width:300px;right:0;top:40px;animation:pop2 8s var(--ease) infinite}
.scene .p3{width:340px;left:50%;bottom:30px;margin-left:-110px;animation:pop3 9s var(--ease) infinite}
@media (max-width:560px){.scene .p1{width:250px;margin-left:-180px}.scene .p2{width:230px;top:20px}.scene .p3{width:260px;margin-left:-90px}}
@keyframes pop1{0%,100%{transform:translate3d(0,0,0) scale(1)}45%{transform:translate3d(-14px,-10px,0) scale(1.04)}}
@keyframes pop2{0%,100%{transform:translateY(0) rotate(2deg)}50%{transform:translateY(16px) rotate(-1deg)}}
@keyframes pop3{0%,100%{transform:translateY(0)}50%{transform:translateY(-14px) scale(1.03)}}

/* ================= BANT ================= */
.band{padding:22px 0;border-block:1px solid var(--border);background:rgba(255,255,255,.02);overflow:hidden}
.band .track{display:flex;gap:14px;width:max-content;animation:marq 38s linear infinite}
.band:hover .track{animation-play-state:paused}
.band span{flex:none;display:inline-flex;align-items:center;gap:10px;font-weight:800;font-size:15px;padding:10px 18px;border-radius:999px;background:var(--surface);border:1px solid var(--border)}
.band span i{width:8px;height:8px;border-radius:50%;background:var(--grad)}
@keyframes marq{to{transform:translateX(-50%)}}

/* ================= SAYILAR ================= */
.nums{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
@media (max-width:900px){.nums{grid-template-columns:repeat(2,1fr)}}
.num{padding:28px 24px;border-radius:26px;background:var(--surface);border:1px solid var(--border);position:relative;overflow:hidden}
.num::after{content:"";position:absolute;right:-40px;top:-40px;width:140px;height:140px;border-radius:50%;background:radial-gradient(circle,rgba(138,108,247,.35),transparent 70%)}
.num strong{display:block;font-size:clamp(34px,4vw,50px);font-weight:800;letter-spacing:-.03em;line-height:1}
.num span{display:block;margin-top:10px;color:var(--ink-dim);font-size:14.5px;font-weight:600}

/* ================= VİDEO ================= */
.vid{display:grid;grid-template-columns:1fr 420px;gap:60px;align-items:center}
@media (max-width:960px){.vid{grid-template-columns:1fr}}
.vframe{position:relative;border-radius:40px;padding:10px;background:linear-gradient(150deg,#4a4858,#141319 38%,#2e2c38 72%,#0c0b10);box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.2),0 60px 120px -30px rgba(0,0,0,.95),0 0 120px -20px rgba(138,108,247,.6);max-width:420px;margin:0 auto}
.vframe video{display:block;width:100%;aspect-ratio:9/16;border-radius:31px;background:#07061a;object-fit:cover}
.vlist{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:28px}
.vlist li{display:flex;gap:10px;align-items:center;font-weight:700;font-size:14.5px;padding:12px 14px;border-radius:16px;background:var(--surface);border:1px solid var(--border)}
.vlist li b{width:28px;height:28px;flex:none;border-radius:9px;background:var(--grad);display:grid;place-items:center;font-size:12px}

/* ================= BENTO ================= */
.bento{display:grid;grid-template-columns:repeat(6,1fr);gap:16px}
.tile{position:relative;overflow:hidden;border-radius:30px;background:linear-gradient(160deg,rgba(255,255,255,.06),rgba(255,255,255,.02));border:1px solid var(--border);padding:28px;display:flex;flex-direction:column;gap:12px;transition:transform .35s var(--ease),border-color .35s}
.tile:hover{transform:translateY(-5px);border-color:var(--border-strong)}
.tile .eyebrow{font-size:11px}
.tile h3{font-size:clamp(21px,2.1vw,27px)}
.tile p{color:var(--ink-dim);font-size:15px}
.tile .art{margin-top:auto;padding-top:18px}
.tile .art img{border-radius:16px;box-shadow:0 0 0 1.5px rgba(255,255,255,.7),0 26px 50px -20px rgba(0,0,0,.9),0 0 40px -14px rgba(138,108,247,.7)}
.tile .art.stack{display:grid;gap:12px}
.tile .mini{position:absolute;right:-30px;bottom:-60px;width:230px;border-radius:34px;padding:7px;background:#16151d;box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.18),0 40px 80px -20px rgba(0,0,0,.9);transform:rotate(-8deg)}
.tile .mini img{border-radius:28px}
.tile.has-mini{padding-right:230px;min-height:360px}
.s2{grid-column:span 2}.s3{grid-column:span 3}.s4{grid-column:span 4}.s6{grid-column:span 6}
@media (max-width:980px){.bento{grid-template-columns:repeat(2,1fr)}.s2,.s3,.s4,.s6{grid-column:span 2}.tile.has-mini{padding-right:28px;padding-bottom:300px}.tile .mini{right:50%;margin-right:-115px;bottom:-120px;transform:rotate(0)}}
.tile.glow{background:radial-gradient(120% 90% at 100% 0%,rgba(138,108,247,.32),transparent 60%),linear-gradient(160deg,rgba(255,255,255,.07),rgba(255,255,255,.02))}
.chips{display:flex;flex-wrap:wrap;gap:7px}
.chips span{font-size:12.5px;font-weight:700;padding:6px 11px;border-radius:999px;background:rgba(138,108,247,.14);border:1px solid var(--border);color:#d9d1ff}

/* ================= EKRAN EKRAN (yatay galeri) ================= */
.rail{display:flex;gap:22px;overflow-x:auto;scroll-snap-type:x mandatory;padding:10px 28px 30px;margin:0 -28px;scrollbar-width:thin;scrollbar-color:rgba(174,155,255,.35) transparent}
.rail figure{flex:none;width:230px;margin:0;scroll-snap-align:start}
.rail .dev{position:relative;border-radius:36px;padding:7px}
.rail .dev img{border-radius:30px}
.rail .dev::after{border-radius:36px}
.rail figcaption{margin-top:14px;font-weight:800;font-size:15px}
.rail figcaption small{display:block;font-weight:600;color:var(--ink-faint);font-size:13px;margin-top:2px}
.hint-scroll{display:flex;align-items:center;gap:8px;color:var(--ink-faint);font-size:13px;font-weight:700;margin-top:-28px;margin-bottom:22px}

/* ================= MÜŞTERİ ================= */
.cust{display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:center}
@media (max-width:960px){.cust{grid-template-columns:1fr}}
.duo{position:relative;height:620px}
.duo .dev{width:260px}
.duo .dev:first-child{left:4%;top:0;transform:rotate(-5deg)}
.duo .dev:last-child{right:4%;top:70px;transform:rotate(5deg)}
@media (max-width:560px){.duo{height:520px}.duo .dev{width:200px}}
.feat{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:8px}
@media (max-width:560px){.feat{grid-template-columns:1fr}}
.feat div{padding:18px;border-radius:20px;background:var(--surface);border:1px solid var(--border)}
.feat b{display:block;font-size:15.5px}
.feat span{display:block;margin-top:4px;color:var(--ink-dim);font-size:13.5px}

/* ================= WEB LİNK ================= */
.weblink{display:grid;grid-template-columns:1.1fr .9fr;gap:50px;align-items:center;padding:50px;border-radius:40px;background:radial-gradient(90% 120% at 0% 0%,rgba(138,108,247,.28),transparent 60%),radial-gradient(80% 100% at 100% 100%,rgba(91,141,239,.2),transparent 60%),var(--bg-2);border:1px solid var(--border)}
@media (max-width:960px){.weblink{grid-template-columns:1fr;padding:30px}}
.url{display:flex;align-items:center;gap:10px;margin-top:22px;padding:14px 18px;border-radius:18px;background:rgba(0,0,0,.35);border:1px solid var(--border-strong);font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:14px;color:#d9d1ff;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.url::before{content:"";width:10px;height:10px;border-radius:50%;background:var(--green);flex:none;box-shadow:0 0 10px var(--green)}
.weblink .art{display:grid;gap:14px}
.weblink .art img{border-radius:18px;box-shadow:0 0 0 1.5px rgba(255,255,255,.7),0 30px 60px -20px rgba(0,0,0,.9)}

/* ================= FİYAT ================= */
.prices{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;align-items:stretch}
@media (max-width:1000px){.prices{grid-template-columns:repeat(2,1fr)}}
@media (max-width:560px){.prices{grid-template-columns:1fr}}
.price{position:relative;padding:28px 24px;border-radius:28px;background:var(--surface);border:1px solid var(--border);display:flex;flex-direction:column}
.price.best{background:radial-gradient(120% 80% at 50% 0%,rgba(138,108,247,.35),transparent 70%),var(--bg-2);border-color:var(--border-strong);box-shadow:0 30px 80px -30px rgba(138,108,247,.6)}
.price .badge{position:absolute;top:-12px;left:24px;font-size:11.5px;font-weight:800;letter-spacing:.06em;padding:6px 11px;border-radius:999px;background:var(--grad);color:#fff}
.price .badge.g{background:#1d6b4a;color:#c9ffe3}
.price h3{font-size:16px;color:var(--ink-dim);font-weight:700}
.price .amt{margin-top:10px;font-size:44px;font-weight:800;letter-spacing:-.03em;line-height:1}
.price .amt small{font-size:15px;font-weight:700;color:var(--ink-faint);letter-spacing:0}
.price .per{margin-top:6px;color:var(--violet-bright);font-weight:700;font-size:13.5px;min-height:20px}
.price ul{margin-top:18px;display:grid;gap:9px;font-size:14px;color:var(--ink-dim)}
.price li{display:flex;gap:9px}
.price li::before{content:"✓";color:var(--green);font-weight:800}
.pnote{margin-top:22px;text-align:center;color:var(--ink-faint);font-size:13.5px}

/* ================= KİT ================= */
.kit{display:grid;grid-template-columns:.9fr 1.1fr;gap:50px;align-items:start}
@media (max-width:960px){.kit{grid-template-columns:1fr}}
.dl{display:grid;gap:12px;margin-top:26px}
.dl a{display:flex;align-items:center;gap:16px;padding:18px 20px;border-radius:22px;text-decoration:none;background:var(--surface);border:1px solid var(--border);transition:border-color .25s,transform .25s}
.dl a:hover{border-color:var(--border-strong);transform:translateX(4px)}
.dl .fi{width:48px;height:48px;border-radius:14px;background:var(--grad);display:grid;place-items:center;flex:none;font-weight:800;font-size:13px}
.dl b{display:block;font-size:16px}
.dl small{display:block;color:var(--ink-faint);font-size:13px;margin-top:2px}
.dl .go{margin-left:auto;font-weight:800;color:var(--violet-bright);font-size:14px}
.thumbs{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
@media (max-width:560px){.thumbs{grid-template-columns:repeat(3,1fr)}}
.thumbs a{display:block;border-radius:14px;overflow:hidden;border:1px solid var(--border);transition:transform .3s var(--ease),box-shadow .3s}
.thumbs a:hover{transform:translateY(-4px) scale(1.02);box-shadow:0 20px 40px -16px rgba(138,108,247,.7)}

/* Kaydırınca belirme (destekleyen tarayıcılarda) */
@supports (animation-timeline: view()){
  .rv{animation:rv linear both;animation-timeline:view();animation-range:entry 0% entry 38%}
  @keyframes rv{from{opacity:0;transform:translateY(40px) scale(.98)}to{opacity:1;transform:none}}
}
@media (prefers-reduced-motion:reduce){.band .track{animation:none}.rv{animation:none!important}}

/* Taşma önlemleri: ızgara öğeleri içerikleri kadar genişlemesin */
.weblink>*,.vid>*,.cust>*,.kit>*,.L-hero .wrap>*{min-width:0}
@media (max-width:640px){.rail{margin:0 -18px;padding:10px 18px 30px}}