html[data-sn="site"] { --sn-bg:#fff; --sn-line:#e4e6f0; }
:root { --vb:#1c2bff; --vn:#0d1330; --vt:#4ad1b0; --vl:#e1ff7c; --vp:#eef0fc; --vg:#555b70; --vline:#e4e6f0; }
.v-w { max-width:1280px; margin:0 auto; padding:0 40px; box-sizing:border-box; }
.v-hero h1, .v-tour h2, .v-sc h2, .v-who h2, .v-dep h2, .v-cta h2, .v-faq h2 { letter-spacing:-.03em; font-weight:700; color:var(--vn); }
.v-tour h2, .v-sc h2, .v-who h2, .v-dep h2, .v-faq h2 { font-size:clamp(30px,3.2vw,44px); line-height:1.12; margin:0 0 12px; }
.v-lead { font-size:18px; color:var(--vg); margin:0; }
.v-btn { display:inline-flex; align-items:center; height:46px; padding:0 22px; border-radius:4px; background:var(--vb); color:#fff; font-size:15px; font-weight:600; text-decoration:none; border:1px solid var(--vb); box-sizing:border-box; }
.v-btn:hover { background:#1420cc; border-color:#1420cc; }
.v-btn--o { background:transparent; color:var(--vb); }
.v-btn--o:hover { background:#fff; color:#1420cc; }
.v-btn--w { background:#fff; color:var(--vb); border-color:#fff; }
.v-btn--w:hover { background:var(--vl); border-color:var(--vl); color:var(--vn); }
.v-btn--ow { background:transparent; color:#fff; border-color:rgba(255,255,255,.6); }
.v-btn--ow:hover { background:rgba(255,255,255,.12); border-color:#fff; }
.v-act { display:flex; gap:12px; flex-wrap:wrap; }

/* Hero: marka renklerinde alan ve büyük ürün sahnesi */
.v-hero { padding:72px 0 0; background:
  radial-gradient(900px 520px at 88% 8%, rgba(225,255,124,.75), transparent 65%),
  radial-gradient(800px 560px at 62% 34%, rgba(74,209,176,.42), transparent 68%),
  radial-gradient(1000px 620px at 8% 20%, rgba(28,43,255,.20), transparent 70%),
  linear-gradient(180deg,#f3f4ff 0%,#fff 92%); }
.v-hero__top { display:grid; grid-template-columns:minmax(0,1.25fr) minmax(0,1fr); gap:64px; align-items:end; margin-bottom:52px; }
.v-hero h1 { font-size:clamp(42px,5.2vw,74px); line-height:1.03; margin:0; }
.v-sub { font-size:19px; line-height:1.5; color:#2c3147; margin:0 0 24px; }
.v-stage { background:#fff; border-radius:12px; overflow:hidden; box-shadow:0 40px 90px -30px rgba(13,19,48,.42),0 0 0 1px rgba(13,19,48,.08); font-size:15px; color:#201f1e; }
.v-cap { font-size:13px; color:var(--vg); margin:16px 0 0; padding-bottom:30px; }
.o-top { display:flex; align-items:center; gap:10px; height:48px; padding:0 18px; background:#0f6cbd; color:#fff; }
.o-top svg { width:20px; height:20px; }
.o-top b { font-weight:600; }
.o-search { margin-left:auto; margin-right:auto; width:38%; background:rgba(255,255,255,.88); color:#555; border-radius:4px; padding:5px 12px; font-size:13px; }
.o-main { display:grid; grid-template-columns:minmax(0,1fr) 380px; min-height:400px; }
.o-compose { padding:14px 32px 32px; }
.o-ribbon { padding-bottom:12px; border-bottom:1px solid #edebe9; margin-bottom:6px; }
.o-send { display:inline-block; background:#0f6cbd; color:#fff; font-weight:600; padding:7px 22px; border-radius:4px; font-size:14px; transition:background .3s; }
.o-f { display:flex; gap:14px; align-items:center; padding:10px 0; border-bottom:1px solid #edebe9; font-size:14px; }
.o-f b { font-weight:400; color:#616161; width:60px; }
.o-body { font-size:19px; line-height:1.65; margin:26px 0 0; min-height:96px; }
#o-r { transition:background .35s, box-shadow .35s; }
#o-r.is-flag { background:#ffe3e0; box-shadow:0 2px 0 #d13438; }
#o-r.is-ok { background:#e2f8f1; box-shadow:0 2px 0 var(--vt); }
.o-caret { display:inline-block; width:2px; height:1.1em; background:#201f1e; vertical-align:-3px; margin-left:1px; animation:v-bl 1s steps(2) infinite; }
@keyframes v-bl { 50% { opacity:0; } }
.o-pane { background:#fafaff; border-left:1px solid #e6e7f4; padding:20px 22px; }
.m-brand { display:flex; align-items:center; gap:7px; font-weight:700; font-size:15px; color:var(--vn); }
.m-brand svg { width:20px; height:20px; color:var(--vb); flex:none; }
.m-brand small { margin-left:auto; font-weight:500; font-size:12px; color:var(--vg); }
.o-status { display:flex; align-items:center; gap:8px; font-size:13px; color:var(--vg); margin:18px 0 0; }
.o-status i { width:8px; height:8px; border-radius:50%; background:var(--vb); animation:v-pu 1.2s infinite; }
.o-status.is-ok i { background:var(--vt); animation:none; }
.o-status.is-flag i { background:#d13438; animation:none; }
@keyframes v-pu { 50% { opacity:.25; } }
.o-card { margin-top:14px; background:#fff; border:1px solid #e3e5f2; border-radius:8px; padding:16px; opacity:0; transform:translateY(10px); transition:.4s; }
.o-card.is-on { opacity:1; transform:none; }
.m-lvl { display:inline-block; background:#d13438; color:#fff; font-size:12px; font-weight:700; padding:2px 8px; border-radius:3px; }
.m-cat { font-size:13px; font-weight:600; margin-left:8px; color:var(--vn); }
.o-card p, .m-card p { margin:0; }
.m-why { font-size:14px; line-height:1.45; color:#3a3f52; margin-top:10px !important; }
.o-card h5 { font-size:12px; font-weight:700; color:var(--vb); margin:14px 0 4px; }
.o-fix { font-size:14px; line-height:1.45; background:var(--vp); padding:9px 11px; border-radius:4px; color:var(--vn); }
.o-btns { display:flex; gap:8px; margin-top:12px; font-size:13px; font-weight:600; }
.o-use { background:var(--vb); color:#fff; padding:7px 13px; border-radius:4px; transition:transform .15s, background .15s; }
.o-use.is-press { transform:scale(.95); background:#1420cc; }
.o-ign { padding:7px 11px; color:var(--vg); }

/* Şerit */
.v-strip { background:var(--vn); color:#fff; }
.v-strip__g { display:grid; grid-template-columns:repeat(4,1fr); gap:28px; padding-top:26px; padding-bottom:26px; }
.v-strip__g > * { display:flex; gap:12px; align-items:center; color:#fff; text-decoration:none; }
.v-strip svg { width:26px; height:26px; flex:none; color:var(--vl); }
.v-strip svg path[stroke="#fff"], .v-strip svg circle[fill="#fff"] { stroke:var(--vn); }
.v-strip svg circle[fill="#fff"] { fill:var(--vn); }
.v-strip p { margin:0; }
.v-strip strong { display:block; font-size:14.5px; font-weight:600; }
.v-strip span { font-size:13px; color:#b4b9d2; }
a.v-x { color:inherit; }
.v-strip__g > a:hover strong { color:var(--vl); }

/* Ürün turu */
.v-tour { padding:96px 0; background:#fff; }
.v-tour__g { display:grid; grid-template-columns:minmax(0,5fr) minmax(0,7fr); gap:56px; margin-top:44px; align-items:stretch; }
.v-it { position:relative; border-top:1px solid var(--vline); }
.v-it:last-child { border-bottom:1px solid var(--vline); }
.v-it button { all:unset; display:block; box-sizing:border-box; width:100%; padding:19px 0; font-size:20px; font-weight:600; letter-spacing:-.01em; color:#73788d; cursor:pointer; }
.v-it button:hover { color:var(--vn); }
.v-it button:focus-visible { outline:2px solid var(--vb); outline-offset:-2px; }
.v-it.is-on button { color:var(--vn); }
.v-it__b { display:grid; grid-template-rows:0fr; transition:grid-template-rows .35s; }
.v-it__b > * { overflow:hidden; }
.v-it.is-on .v-it__b { display:block; padding-bottom:22px; }
.v-it:not(.is-on) .v-it__b { display:none; }
.v-it__b p { font-size:16px; line-height:1.55; color:var(--vg); margin:0 0 10px; }
.v-it__b a, .v-more, .v-pan a { display:inline-flex; align-items:center; gap:7px; color:var(--vb); font-weight:600; font-size:15px; text-decoration:none; }
.v-it__b a svg, .v-more svg, .v-pan a svg { width:17px; height:17px; transition:transform .2s; }
.v-it__b a:hover svg, .v-more:hover svg, .v-pan a:hover svg { transform:translateX(4px); }
.v-prog { position:absolute; left:0; top:-1px; height:2px; width:0; background:var(--vb); }
.v-it.is-on .v-prog { animation:v-p var(--dur,7s) linear forwards; }
.v-tour.is-held .v-it.is-on .v-prog { animation:none; width:100%; }
@keyframes v-p { to { width:100%; } }
.v-screen { position:relative; min-height:500px; border-radius:12px; overflow:hidden; background:linear-gradient(145deg,#1c2bff 0%,#3a2fe0 45%,#0d1330 100%); }
.v-m { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; padding:36px; opacity:0; transform:translateY(14px); transition:.45s; pointer-events:none; }
.v-m.is-on { opacity:1; transform:none; }
.v-ill { position:absolute; right:16px; bottom:12px; font-size:12px; color:rgba(255,255,255,.65); }
.m-win { width:100%; max-width:600px; background:#fff; border-radius:9px; box-shadow:0 26px 60px -20px rgba(0,0,0,.55); overflow:visible; position:relative; font-size:14px; color:#201f1e; }
.m-bar { display:flex; align-items:center; gap:5px; height:34px; padding:0 13px; background:#f1f2f8; border-radius:9px 9px 0 0; }
.m-bar i { width:9px; height:9px; border-radius:50%; background:#cfd2e2; }
.m-bar span { margin-left:9px; font-size:12px; font-weight:600; color:var(--vg); }
.m-cmp { padding:8px 20px 118px; }
.m-f { display:flex; gap:12px; align-items:center; flex-wrap:wrap; padding:9px 0; border-bottom:1px solid #eeeef3; font-size:13px; }
.m-f b { font-weight:400; color:#70748a; }
.m-chip { background:#e8ebff; color:#16207f; border-radius:12px; padding:2px 10px; font-size:13px; }
.m-warn { font-style:normal; font-size:12px; font-weight:600; color:#b3261e; }
.m-body { font-size:16px; line-height:1.55; margin:16px 0 0; }
.m-body mark { background:#ffe3e0; box-shadow:0 2px 0 #d13438; color:inherit; }
.m-card { position:absolute; right:-14px; bottom:-34px; width:72%; background:#fff; border-radius:8px; padding:14px 16px; box-shadow:0 16px 40px -10px rgba(13,19,48,.45),0 0 0 1px rgba(13,19,48,.07); }
.m-card .m-brand { font-size:13px; margin-bottom:9px; }
.m-src { display:flex; align-items:center; gap:7px; margin-top:9px !important; font-size:12.5px; color:var(--vg); }
.m-src svg { width:15px; height:15px; flex:none; }
.m-pad { padding:20px 22px; }
.m-hd { display:flex; justify-content:space-between; align-items:center; margin-bottom:12px; }
.m-hd h4 { margin:0; font-size:17px; font-weight:700; color:var(--vn); }
.m-hd small { color:var(--vg); }
.m-btn { background:var(--vb); color:#fff; font-size:12.5px; font-weight:600; padding:6px 12px; border-radius:4px; }
.m-list { list-style:none; margin:0; padding:0; }
.m-list li { display:flex; align-items:center; gap:10px; padding:12px 0; border-top:1px solid #eeeef3; }
.m-list svg { width:18px; height:18px; color:var(--vb); flex:none; }
.m-list span { font-weight:600; }
.m-list small { color:var(--vg); }
.m-list u { margin-left:auto; text-decoration:none; font-size:12px; font-weight:600; background:#e2f8f1; color:#0c6b53; padding:2px 8px; border-radius:3px; }
.m-tb { width:100%; border-collapse:collapse; font-size:13.5px; }
.m-tb th { text-align:left; font-size:12px; font-weight:600; color:var(--vg); padding:7px 8px 7px 0; }
.m-tb td { border-top:1px solid #eeeef3; padding:11px 8px 11px 0; }
.m-note { display:flex; align-items:center; gap:7px; font-size:12.5px; color:var(--vg); margin:14px 0 0; }
.m-note svg { width:14px; height:14px; color:var(--vb); }
.m-bars { list-style:none; margin:0; padding:0; }
.m-bars li { display:grid; grid-template-columns:96px 1fr; align-items:center; gap:10px; padding:7px 0; font-size:13.5px; }
.m-bars i { display:block; height:14px; width:var(--v); background:var(--vb); border-radius:2px; }
.m-bars li:nth-child(2) i { background:#5a65ff; }
.m-bars li:nth-child(3) i { background:var(--vt); }
.m-bars li:nth-child(4) i { background:#c9f05a; }
.m-line { width:100%; height:64px; margin-top:12px; border-top:1px solid #eeeef3; padding-top:10px; }

/* Senaryolar */
.v-sc { padding:96px 0; background:var(--vp); }
.v-hd { display:flex; justify-content:space-between; align-items:flex-end; gap:32px; margin-bottom:40px; }
.v-more { flex:none; padding-bottom:6px; }
.v-sc__g { display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
.v-sc article { display:flex; flex-direction:column; min-height:380px; padding:30px; border-radius:10px; background:var(--vb); color:#fff; box-sizing:border-box; }
.v-sc article:nth-child(2) { background:var(--vl); color:var(--vn); }
.v-sc article:nth-child(3) { background:var(--vn); }
.v-sc h3 { margin:0; font-size:16px; font-weight:600; color:inherit; }
.v-sc blockquote { margin:auto 0; padding:22px 0; font-size:26px; line-height:1.28; font-weight:600; letter-spacing:-.015em; }
.v-sc mark { color:inherit; background:rgba(255,255,255,.2); box-shadow:0 2px 0 var(--vl); }
.v-sc article:nth-child(2) mark { background:rgba(13,19,48,.1); box-shadow:0 2px 0 var(--vb); }
.v-sc article:nth-child(3) mark { box-shadow:0 2px 0 var(--vt); }
.v-sc article p { display:flex; gap:9px; margin:0; font-size:14.5px; line-height:1.4; }
.v-sc article p svg { width:15px; height:15px; flex:none; margin-top:2px; }
.v-sc article p svg path { fill:currentColor; }

/* Roller */
.v-who { padding:96px 0; background:#fff; }
.v-seg { display:flex; gap:32px; border-bottom:1px solid var(--vline); margin:28px 0 34px; overflow-x:auto; }
.v-seg button { all:unset; padding:13px 0; font-size:17px; font-weight:600; color:#73788d; cursor:pointer; white-space:nowrap; border-bottom:3px solid transparent; margin-bottom:-1px; }
.v-seg button:hover { color:var(--vn); }
.v-seg button:focus-visible { outline:2px solid var(--vb); }
.v-seg button.is-on { color:var(--vb); border-color:var(--vb); }
.v-pan { display:none; position:relative; }
.v-pan.is-on { display:block; }
.v-pan img { display:block; width:100%; height:460px; object-fit:cover; border-radius:10px; }
.v-pan > div { position:absolute; right:40px; top:40px; bottom:40px; width:400px; background:#fff; border-radius:8px; padding:36px; display:flex; flex-direction:column; justify-content:center; align-items:flex-start; box-sizing:border-box; }
.v-pan h3 { font-size:29px; line-height:1.15; letter-spacing:-.02em; font-weight:700; color:var(--vn); margin:0 0 14px; }
.v-pan p { font-size:16.5px; line-height:1.55; color:var(--vg); margin:0 0 20px; }

/* Kurulum */
.v-dep { padding:0 0 96px; background:#fff; }
.v-rail { position:relative; display:grid; grid-template-columns:repeat(4,1fr); }
.v-rail::before { content:""; position:absolute; left:0; right:0; top:0; height:8px; border-radius:4px; background:linear-gradient(90deg,var(--vl),var(--vt) 34%,var(--vb) 68%,var(--vn)); }
.v-rail > div { padding:30px 26px 0 0; }
.v-rail h3 { font-size:24px; font-weight:700; letter-spacing:-.02em; color:var(--vn); margin:0 0 6px; }
.v-rail p { font-size:15.5px; line-height:1.45; color:var(--vg); margin:0; }

/* CTA, SSS */
.v-cta { background:linear-gradient(110deg,#1c2bff 0%,#1c2bff 55%,#0d1330 130%); padding:60px 0; color:#fff; }
.v-cta .v-w { display:flex; justify-content:space-between; align-items:center; gap:36px; }
.v-cta h2 { color:#fff; font-size:clamp(32px,3.6vw,50px); margin:0 0 8px; }
.v-cta p { margin:0; font-size:17px; }
.v-cta .v-act { flex:none; }
.v-faq { padding:88px 0; background:#fff; }
.v-faq .v-w { display:grid; grid-template-columns:minmax(0,4fr) minmax(0,7fr); gap:56px; }
.v-faq details { border-top:1px solid var(--vline); }
.v-faq details:last-child { border-bottom:1px solid var(--vline); }
.v-faq summary { list-style:none; cursor:pointer; font-size:18px; font-weight:600; color:var(--vn); padding:18px 32px 18px 0; position:relative; }
.v-faq summary::-webkit-details-marker { display:none; }
.v-faq summary::after { content:"+"; position:absolute; right:2px; top:13px; font-size:24px; font-weight:400; color:var(--vb); }
.v-faq details[open] summary::after { content:"\2212"; }
.v-faq details p { font-size:16px; line-height:1.6; color:var(--vg); margin:0 0 20px; }

@media (prefers-reduced-motion:reduce) { .o-caret, .o-status i, .v-it.is-on .v-prog { animation:none; } }
@media (max-width:1000px) {
  .v-w { padding:0 20px; }
  .v-hero { padding-top:44px; }
  .v-hero__top, .v-tour__g, .v-faq .v-w { grid-template-columns:minmax(0,1fr); gap:26px; }
  .o-main { grid-template-columns:minmax(0,1fr); }
  .o-pane { border-left:0; border-top:1px solid #e6e7f4; min-height:310px; }
  .o-compose { padding:12px 18px 22px; }
  .o-body { font-size:16px; min-height:140px; }
  .o-search { display:none; }
  .v-strip__g { grid-template-columns:repeat(2,minmax(0,1fr)); gap:18px; }
  .v-tour, .v-sc, .v-who { padding:60px 0; }
  .v-dep { padding-bottom:60px; }
  .v-screen { min-height:440px; }
  .v-m { padding:18px 20px 34px 14px; }
  .m-card { right:-6px; width:86%; }
  .v-hd, .v-cta .v-w { flex-direction:column; align-items:flex-start; }
  .v-sc__g { grid-template-columns:minmax(0,1fr); }
  .v-sc article { min-height:300px; }
  .v-pan img { height:240px; }
  .v-pan > div { position:static; width:auto; padding:24px 0 0; }
  .v-rail { grid-template-columns:repeat(2,minmax(0,1fr)); row-gap:6px; }
  .m-tb { font-size:12px; }
}
@media (max-width:520px) { .v-strip__g { grid-template-columns:minmax(0,1fr); } .v-rail { grid-template-columns:minmax(0,1fr); } }

/* Mobil katman */
@media (max-width:1000px) {
  *::-webkit-scrollbar { display:none; }
  html { scrollbar-width:none; }
  .v-seg { flex-wrap:wrap; gap:6px 22px; border-bottom:0; margin:20px 0 22px; overflow:visible; }
  .v-seg button { padding:8px 0; font-size:16px; white-space:normal; border-bottom-width:2px; margin:0; }
  .v-tour__g { display:block; margin-top:26px; }
  .v-it .v-screen { min-height:410px; margin:4px 0 22px; }
  .v-it:not(.is-on) .v-screen { display:none; }
  .v-it button { font-size:18px; padding:17px 0; }
  .v-m { padding:16px 18px 30px 12px; }
  .m-body { font-size:15px; }
  /* Outlook sahnesi: panel telefon altından açılır */
  .o-main { display:block; position:relative; height:590px; min-height:0; overflow:hidden; }
  .o-compose { height:100%; box-sizing:border-box; }
  .o-pane { position:absolute; left:0; right:0; bottom:0; border-top:1px solid #dfe2f2; border-radius:14px 14px 0 0; min-height:0; padding:14px 18px 18px; background:#fff; box-shadow:0 -14px 34px -14px rgba(13,19,48,.3); transform:translateY(calc(100% - 58px)); transition:transform .4s ease; }
  .v-stage:has(.o-card.is-on) .o-pane { transform:none; }
  .o-status { position:absolute; right:18px; top:15px; margin:0; }
  .m-brand small { display:none; }
  .o-card { border:0; padding:0; margin-top:14px; transition:opacity .3s; transform:none; }
  .o-fix { font-size:13.5px; }
  .o-card .m-why { font-size:13.5px; }
  .o-btns span { flex:1; text-align:center; }
  .v-strip__g { gap:14px; padding-top:22px; padding-bottom:22px; }
  .v-faq summary { font-size:16.5px; padding:16px 30px 16px 0; }
  .v-faq { padding:60px 0; }
}
@media (max-width:520px) {
  .v-act { flex-direction:column; align-items:stretch; }
  .v-act .v-btn { justify-content:center; width:100%; }
  .v-hero h1 { font-size:39px; letter-spacing:-.025em; }
  .v-sub { font-size:17.5px; }
  .v-hero { padding-top:36px; }
  .v-hero__top { margin-bottom:32px; }
  .v-tour h2, .v-sc h2, .v-who h2, .v-dep h2, .v-faq h2, .v-cta h2 { font-size:29px; }
  .v-lead { font-size:16.5px; }
  .v-sc blockquote { font-size:22px; }
  .v-sc article { min-height:240px; padding:24px; }
  .v-pan h3 { font-size:24px; }
  .v-cap { font-size:12.5px; }
  .v-rail > div { padding:22px 0 0; }
}