:root{
    --violet:#8b5cf6; --violet-2:#a855f7; --indigo:#4f46e5; --blue:#3b82f6;
    --silver-1:#f6f6f8; --silver-2:#c4c4cc; --silver-3:#8a8a93; --ink:#06060a;
    --wa:#25D366;
  }
  *{box-sizing:border-box;margin:0;padding:0}
  html,body{height:100%}
  body{background:#000; color:var(--silver-1); font-family:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
    overflow:hidden; display:grid; place-items:center; min-height:100dvh; -webkit-font-smoothing:antialiased}

  .stage{position:relative; width:min(100vw,177.78vh); aspect-ratio:16/9;
    background:radial-gradient(130% 100% at 50% -10%, #15101f 0%, #0a0810 40%, var(--ink) 75%);
    overflow:hidden; container-type:size; container-name:stage; box-shadow:0 0 120px rgba(0,0,0,.8)}

  .aurora{position:absolute; border-radius:50%; filter:blur(60px); opacity:.55; pointer-events:none}
  .aurora.a{width:55cqh;height:55cqh;background:rgba(124,58,237,.5);top:-18cqh;left:30%;animation:drift1 16s ease-in-out infinite}
  .aurora.b{width:50cqh;height:50cqh;background:rgba(59,130,246,.45);bottom:-20cqh;right:14%;animation:drift2 18s ease-in-out infinite}
  @keyframes drift1{0%,100%{transform:translate(0,0)}50%{transform:translate(5cqh,4cqh)}}
  @keyframes drift2{0%,100%{transform:translate(0,0)}50%{transform:translate(-4cqh,-3cqh)}}
  .grain{position:absolute; inset:0; opacity:.05; mix-blend-mode:overlay; pointer-events:none;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
  .podium{position:absolute; left:50%; bottom:-6cqh; width:80cqh; height:30cqh; transform:translateX(-50%);
    background:radial-gradient(60% 100% at 50% 100%, rgba(124,58,237,.32), rgba(59,130,246,.1) 45%, transparent 70%); filter:blur(8px); pointer-events:none}
  canvas#fx{position:absolute; inset:0; z-index:1; pointer-events:none}

  /* address chip (üst orta) */
  .addr{position:absolute; top:3.2cqh; left:50%; transform:translateX(-50%); z-index:8;
    display:flex; align-items:center; gap:1cqh; padding:1cqh 2.4cqh; border-radius:999px;
    background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.1);
    -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px);
    font-size:1.9cqh; letter-spacing:.04em; color:var(--silver-2); opacity:0; animation:addrIn 1s ease .3s both}
  .addr svg{width:1.9cqh;height:1.9cqh;color:#7fe0a0}
  .addr b{color:var(--silver-1); font-weight:600}
  @keyframes addrIn{from{opacity:0;transform:translate(-50%,-1cqh)}to{opacity:.95;transform:translate(-50%,0)}}

  /* ===== screens ===== */
  .screen{position:absolute; inset:0; z-index:3; opacity:0; visibility:hidden; transition:opacity .6s ease, visibility .6s}
  .screen.active{opacity:1; visibility:visible}

  /* ---------- START ---------- */
  #s-start{display:grid; place-items:center; text-align:center}
  .start-inner{display:flex; flex-direction:column; align-items:center; gap:3cqh}
  .start-badge{width:18cqh; filter:drop-shadow(0 0 30px rgba(139,92,246,.5));
    -webkit-mask:radial-gradient(circle at 50% 50%, #000 64%, transparent 78%); mask:radial-gradient(circle at 50% 50%, #000 64%, transparent 78%)}
  .start-title{font-weight:800; font-size:6.6cqh; line-height:1.05; letter-spacing:-.01em}
  .start-title .accent{background:linear-gradient(100deg,var(--violet),var(--violet-2),var(--blue)); -webkit-background-clip:text; background-clip:text; color:transparent}
  .start-sub{font-size:2.4cqh; color:var(--silver-2)}
  .start-btn{margin-top:1cqh; display:flex; align-items:center; gap:1.4cqh; padding:2cqh 4cqh; border:none; cursor:pointer;
    border-radius:999px; font:700 2.6cqh/1 Inter,sans-serif; color:#fff; letter-spacing:.02em;
    background:linear-gradient(100deg,var(--indigo),var(--violet)); box-shadow:0 0 0 rgba(139,92,246,.6);
    animation:pulseBtn 2.2s ease-in-out infinite; transition:transform .15s}
  .start-btn:hover{transform:translateY(-2px)}
  .start-btn svg{width:2.8cqh;height:2.8cqh}
  .start-note{font-size:1.7cqh; color:var(--silver-3); letter-spacing:.04em}
  @keyframes pulseBtn{0%,100%{box-shadow:0 0 0 0 rgba(139,92,246,.45)}50%{box-shadow:0 0 0 1.4cqh rgba(139,92,246,0)}}

  /* ---------- INTRO ---------- */
  .line{position:absolute; left:50%; top:50%; width:42cqh; height:2px; transform:translate(-50%,-50%) scaleX(0);
    background:linear-gradient(90deg,transparent,var(--violet),var(--blue),transparent); box-shadow:0 0 18px rgba(139,92,246,.8); opacity:0}
  #s-intro.play .line{animation:lineDraw 1.6s cubic-bezier(.2,.8,.2,1) .2s both}
  @keyframes lineDraw{0%{transform:translate(-50%,-50%) scaleX(0);opacity:0}35%{opacity:1}55%{transform:translate(-50%,-50%) scaleX(1)}100%{transform:translate(-50%,-50%) scaleX(1);opacity:0}}

  .lockup{position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); z-index:3}
  #s-intro.play .lockup{animation:lockupRise 1.1s cubic-bezier(.5,0,.2,1) 3.45s both}
  @keyframes lockupRise{0%{transform:translate(-50%,-50%) scale(1)}100%{transform:translate(-50%, calc(-50% - 26cqh)) scale(.5)}}

  .logoGlow{width:34cqh; line-height:0}
  #s-intro.play .logoGlow{animation:logoGlow 2.4s ease-out .8s both}
  @keyframes logoGlow{0%{filter:drop-shadow(0 0 0 rgba(124,58,237,0))}22%{filter:drop-shadow(0 0 40px rgba(139,92,246,.95)) drop-shadow(0 0 86px rgba(79,70,229,.5))}100%{filter:drop-shadow(0 0 18px rgba(139,92,246,.42))}}
  .badge{width:100%; height:auto; display:block; opacity:0; transform:scale(.6); filter:blur(8px);
    -webkit-mask:radial-gradient(circle at 50% 50%, #000 63%, transparent 78%); mask:radial-gradient(circle at 50% 50%, #000 63%, transparent 78%)}
  #s-intro.play .badge{animation:ignite 1.6s cubic-bezier(.34,1.4,.5,1) .6s both}
  @keyframes ignite{0%{opacity:0;transform:scale(.6);filter:blur(8px)}55%{opacity:1;transform:scale(1.08);filter:blur(0)}72%{transform:scale(.98)}100%{opacity:1;transform:scale(1);filter:blur(0)}}

  .title{position:absolute; left:50%; top:55%; transform:translate(-50%,-50%); width:88cqw; text-align:center; z-index:3}
  .eyebrow{font-weight:600; font-size:1.9cqh; letter-spacing:.42em; color:var(--violet-2); text-transform:uppercase; opacity:0; transform:translateY(1.4cqh); margin-bottom:2.4cqh}
  #s-intro.play .eyebrow{animation:upFade .7s cubic-bezier(.2,.8,.2,1) 4.05s both}
  h1{font-weight:800; font-size:8.6cqh; line-height:1.02; letter-spacing:-.01em}
  h1 .word{display:inline-block; overflow:hidden; vertical-align:bottom}
  h1 .word > span{display:inline-block; transform:translateY(110%); opacity:0}
  #s-intro.play h1 .word > span{animation:wordRise .85s cubic-bezier(.2,.85,.25,1) both}
  #s-intro.play h1 .word:nth-child(1) > span{animation-delay:4.25s}
  #s-intro.play h1 .word:nth-child(2) > span{animation-delay:4.37s}
  #s-intro.play h1 .word:nth-child(3) > span{animation-delay:4.49s}
  @keyframes wordRise{0%{transform:translateY(110%);opacity:0}100%{transform:translateY(0);opacity:1}}
  .accent{background:linear-gradient(100deg,var(--violet),var(--violet-2),var(--blue)); -webkit-background-clip:text; background-clip:text; color:transparent}
  .uline{height:.5cqh; width:26cqh; margin:2.6cqh auto 0; border-radius:2px; transform-origin:left center; transform:scaleX(0); opacity:0; background:linear-gradient(90deg,var(--violet),var(--blue))}
  #s-intro.play .uline{animation:uline .9s cubic-bezier(.4,0,.1,1) 5.55s both}
  @keyframes uline{0%{transform:scaleX(0);opacity:0}25%{opacity:1}100%{transform:scaleX(1);opacity:1}}
  .subtitle{margin-top:2.6cqh; font-size:2.7cqh; color:var(--silver-2); font-weight:500; opacity:0; transform:translateY(1.4cqh)}
  #s-intro.play .subtitle{animation:upFade .8s cubic-bezier(.2,.8,.2,1) 5.5s both}
  .shine{position:absolute; inset:0; pointer-events:none; overflow:hidden}
  .shine::after{content:""; position:absolute; top:0; left:0; width:40%; height:100%; background:linear-gradient(100deg,transparent, rgba(255,255,255,.22), transparent); transform:translateX(-160%) skewX(-14deg); opacity:0}
  #s-intro.play .shine::after{animation:sweep 1.2s ease 6.4s both}
  @keyframes sweep{0%{transform:translateX(-160%) skewX(-14deg);opacity:0}15%{opacity:1}100%{transform:translateX(260%) skewX(-14deg);opacity:0}}

  .nextbtn{position:absolute; left:50%; bottom:6cqh; transform:translateX(-50%); z-index:5;
    display:flex; align-items:center; gap:1.2cqh; padding:1.8cqh 3.4cqh; border:1px solid rgba(139,92,246,.5); cursor:pointer;
    border-radius:999px; font:700 2.3cqh/1 Inter,sans-serif; color:#fff; letter-spacing:.02em;
    background:linear-gradient(100deg, rgba(79,70,229,.35), rgba(139,92,246,.35)); -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px);
    box-shadow:0 8px 30px rgba(124,58,237,.35); opacity:0; pointer-events:none; transition:transform .15s}
  .nextbtn:hover{transform:translateX(-50%) translateY(-2px)}
  .nextbtn svg{width:2.4cqh;height:2.4cqh}
  #s-intro.play .nextbtn{animation:nextIn .7s cubic-bezier(.2,.8,.2,1) 7s both; pointer-events:auto}
  @keyframes nextIn{0%{opacity:0;transform:translateX(-50%) translateY(2cqh)}100%{opacity:1;transform:translateX(-50%) translateY(0)}}
  .nextbtn.glow{animation:nextGlow 2.2s ease-in-out 7.8s infinite}
  @keyframes nextGlow{0%,100%{box-shadow:0 8px 30px rgba(124,58,237,.3)}50%{box-shadow:0 8px 44px rgba(139,92,246,.7)}}

  @keyframes upFade{0%{opacity:0;transform:translateY(1.6cqh)}100%{opacity:1;transform:translateY(0)}}

  /* ---------- PAKET SEÇİMİ ---------- */
  #s-pkg{display:flex; flex-direction:column; padding:9cqh 5cqw 5cqh}
  .pkg-head{text-align:center}
  .pkg-head .eb{font-weight:600; font-size:1.7cqh; letter-spacing:.4em; color:var(--violet-2); text-transform:uppercase}
  .pkg-head h2{font-weight:800; font-size:5cqh; margin-top:1.4cqh; letter-spacing:-.01em}
  .pkg-head p{font-size:2.2cqh; color:var(--silver-2); margin-top:1cqh}
  .pkgs{flex:1; display:flex; gap:3cqw; justify-content:center; align-items:center; margin:3cqh 0}
  .pkg{position:relative; width:27cqw; min-height:46cqh; padding:3cqh 2.6cqw; cursor:pointer;
    border-radius:2.2cqh; background:linear-gradient(180deg, rgba(255,255,255,.045), rgba(255,255,255,.015));
    border:1px solid rgba(255,255,255,.1); transition:transform .25s, border-color .25s, box-shadow .25s;
    display:flex; flex-direction:column}
  .pkg:hover{transform:translateY(-1cqh); border-color:rgba(139,92,246,.5)}
  .pkg.popular{border-color:rgba(139,92,246,.55); box-shadow:0 0 0 1px rgba(139,92,246,.3), 0 20px 60px rgba(124,58,237,.25)}
  .pkg.sel{border-color:var(--violet); box-shadow:0 0 0 2px var(--violet), 0 24px 70px rgba(124,58,237,.4); transform:translateY(-1cqh)}
  .ribbon{position:absolute; top:-1.6cqh; left:50%; transform:translateX(-50%); padding:.7cqh 2cqw; border-radius:999px;
    font:700 1.5cqh/1 Inter,sans-serif; letter-spacing:.12em; color:#fff; background:linear-gradient(100deg,var(--violet),var(--blue)); white-space:nowrap}
  .pkg .ico{width:8cqh; height:8cqh; border-radius:50%; display:grid; place-items:center; margin-bottom:2cqh;
    background:radial-gradient(circle at 50% 30%, rgba(139,92,246,.3), rgba(139,92,246,.08)); border:1px solid rgba(139,92,246,.4); color:#cbb8ff}
  .pkg.popular .ico{background:radial-gradient(circle at 50% 30%, rgba(139,92,246,.55), rgba(79,70,229,.2)); color:#fff}
  .pkg .ico svg{width:4cqh;height:4cqh}
  .pkg h3{font-size:3cqh; font-weight:800}
  .pkg .tag{font-size:1.9cqh; color:var(--silver-3); margin:.6cqh 0 2cqh}
  .pkg ul{list-style:none; display:flex; flex-direction:column; gap:1.3cqh; margin-top:auto}
  .pkg li{display:flex; align-items:flex-start; gap:1cqh; font-size:1.95cqh; color:var(--silver-2); line-height:1.25}
  .pkg li svg{width:2.1cqh;height:2.1cqh;color:var(--violet-2); flex:none; margin-top:.1cqh}
  .check{position:absolute; top:2cqh; right:2cqw; width:3.4cqh; height:3.4cqh; border-radius:50%; display:grid; place-items:center;
    background:var(--violet); color:#fff; opacity:0; transform:scale(.5); transition:.25s}
  .pkg.sel .check{opacity:1; transform:scale(1)}
  .check svg{width:2cqh;height:2cqh}

  .pkg-foot{display:flex; flex-direction:column; align-items:center; gap:2cqh}
  .support{font-size:2cqh; color:var(--silver-2)}
  .support b{color:#fff}
  .pkgNext{display:flex; align-items:center; gap:1.2cqh; padding:1.8cqh 4cqw; border:none; cursor:pointer; border-radius:999px;
    font:700 2.3cqh/1 Inter,sans-serif; color:#fff; letter-spacing:.02em; background:linear-gradient(100deg,var(--indigo),var(--violet));
    box-shadow:0 8px 30px rgba(124,58,237,.35); transition:transform .15s, opacity .25s}
  .pkgNext:hover{transform:translateY(-2px)}
  .pkgNext:disabled{opacity:.4; cursor:not-allowed; filter:grayscale(.4)}
  .pkgNext svg{width:2.4cqh;height:2.4cqh}

  /* ---------- floating WhatsApp ---------- */
  .wa{position:absolute; right:3cqw; bottom:5cqh; z-index:12; display:flex; align-items:center; gap:0;
    text-decoration:none; opacity:0; transform:translateY(2cqh); transition:opacity .5s, transform .5s, gap .25s, padding .25s}
  .wa.show{opacity:1; transform:translateY(0)}
  .wa-btn{width:8cqh; height:8cqh; border-radius:50%; background:var(--wa); display:grid; place-items:center; color:#fff;
    box-shadow:0 8px 30px rgba(37,211,102,.45); position:relative}
  .wa-btn::before{content:""; position:absolute; inset:0; border-radius:50%; background:var(--wa); opacity:.5; animation:waPulse 2.2s ease-out infinite}
  @keyframes waPulse{0%{transform:scale(1);opacity:.5}100%{transform:scale(1.7);opacity:0}}
  .wa-btn svg{width:4.4cqh;height:4.4cqh; position:relative}
  .wa-label{max-width:0; overflow:hidden; white-space:nowrap; color:#fff; font:700 2cqh/1 Inter,sans-serif;
    background:rgba(10,10,14,.7); -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px); border-radius:999px;
    transition:max-width .3s, padding .3s; padding:0}
  .wa:hover .wa-label{max-width:40cqw; padding:1.6cqh 2.4cqw 1.6cqh 4cqw; margin-left:-3cqw}

  /* toast */
  .toast{position:absolute; left:50%; top:50%; transform:translate(-50%,-50%) scale(.9); z-index:30;
    display:none; flex-direction:column; align-items:center; gap:1.6cqh; text-align:center;
    padding:5cqh 6cqw; border-radius:3cqh; background:rgba(12,10,20,.86); border:1px solid rgba(139,92,246,.4);
    -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px); box-shadow:0 30px 90px rgba(0,0,0,.6)}
  .toast.show{display:flex; animation:toastIn .5s cubic-bezier(.2,1.3,.4,1) both}
  @keyframes toastIn{0%{opacity:0;transform:translate(-50%,-50%) scale(.85)}100%{opacity:1;transform:translate(-50%,-50%) scale(1)}}
  .toast .tcheck{width:9cqh;height:9cqh;border-radius:50%;display:grid;place-items:center;background:linear-gradient(100deg,var(--violet),var(--blue));color:#fff}
  .toast .tcheck svg{width:5cqh;height:5cqh}
  .toast h4{font-size:3.4cqh;font-weight:800}
  .toast p{font-size:2.2cqh;color:var(--silver-2)}

  /* ===== ADIM 03 · SEPET ===== */
  #s-cart,#s-pay{display:grid; grid-template-columns:35% 1fr; gap:3cqw; padding:7cqh 4cqw 6cqh; align-items:center}
  .cart-info{display:flex; flex-direction:column; gap:2.2cqh}
  .cart-info .eb{font-weight:600;font-size:1.6cqh;letter-spacing:.4em;color:var(--violet-2);text-transform:uppercase}
  .cart-info h2{font-weight:800;font-size:4.4cqh;line-height:1.05;letter-spacing:-.01em}
  .cnar{background:linear-gradient(180deg,rgba(255,255,255,.05),rgba(255,255,255,.015));border:1px solid rgba(139,92,246,.25);border-radius:1.8cqh;padding:2.4cqh 2.2cqw;min-height:15cqh}
  .cnar h3{font-size:2.6cqh;font-weight:700;margin-bottom:1cqh;color:#fff}
  .cnar p{font-size:2cqh;line-height:1.5;color:var(--silver-2)}
  .cnar.in{animation:upFade .45s ease both}
  .cdots{display:flex;gap:1cqw}
  .cdot{width:3.2cqw;height:.7cqh;border-radius:2px;background:rgba(255,255,255,.12);transition:.3s}
  .cdot.on{background:linear-gradient(90deg,var(--violet),var(--blue))}
  .cnav{display:flex;gap:1.2cqw;margin-top:.6cqh}
  .cbtn{display:flex;align-items:center;gap:1cqw;padding:1.5cqh 3cqw;border-radius:999px;cursor:pointer;font:700 2cqh/1 Inter,sans-serif;color:#fff;border:none;background:linear-gradient(100deg,var(--indigo),var(--violet));transition:transform .15s}
  .cbtn:hover{transform:translateY(-2px)}
  .cbtn.ghost{background:transparent;border:1px solid rgba(255,255,255,.18);color:var(--silver-2)}
  .cbtn:disabled{opacity:.35;cursor:not-allowed}
  .cbtn svg{width:2.2cqh;height:2.2cqh}

  .bframe{border-radius:2cqh;overflow:hidden;border:1px solid rgba(255,255,255,.1);background:#0d0b14;box-shadow:0 30px 90px rgba(0,0,0,.55);max-height:82cqh;display:flex;flex-direction:column}
  .btop{display:flex;align-items:center;gap:1.4cqw;padding:1.3cqh 1.6cqw;background:rgba(255,255,255,.04);border-bottom:1px solid rgba(255,255,255,.07)}
  .dots{display:flex;gap:.8cqw}
  .dots i{width:1.5cqh;height:1.5cqh;border-radius:50%;display:block}
  .dots i:nth-child(1){background:#ff5f57}.dots i:nth-child(2){background:#febc2e}.dots i:nth-child(3){background:#28c840}
  .baddr{flex:1;display:flex;align-items:center;justify-content:center;gap:1cqw;font-size:1.7cqh;color:var(--silver-2);background:rgba(255,255,255,.05);border-radius:999px;padding:.8cqh 2cqw}
  .baddr svg{width:1.6cqh;height:1.6cqh;color:#7fe0a0}
  .bbody{padding:2.2cqh 2cqw;overflow-y:auto;flex:1 1 auto;min-height:0}
  .bbody::-webkit-scrollbar{width:6px}.bbody::-webkit-scrollbar-thumb{background:rgba(139,92,246,.4);border-radius:3px}
  .steps{display:flex;align-items:center;gap:1cqw;margin-bottom:1.8cqh;font-size:1.7cqh;color:var(--silver-3)}
  .steps .st{display:flex;align-items:center;gap:.8cqw}
  .steps .num{width:2.6cqh;height:2.6cqh;border-radius:50%;display:grid;place-items:center;background:rgba(255,255,255,.08);font-weight:700;font-size:1.5cqh;color:var(--silver-2)}
  .steps .st.on .num{background:linear-gradient(100deg,var(--violet),var(--blue));color:#fff}
  .steps .st.on{color:#fff}
  .steps .ln{flex:1;height:1px;background:rgba(255,255,255,.12)}
  .ctitle{font-size:2.8cqh;font-weight:800}
  .csub{font-size:1.8cqh;color:var(--silver-3);margin:.6cqh 0 2cqh}
  .bgrid{display:grid;grid-template-columns:1.55fr 1fr;gap:1.8cqw;align-items:start}
  .forms{display:flex;flex-direction:column;gap:1.6cqh}

  .csec{border:1px solid rgba(255,255,255,.08);border-radius:1.4cqh;padding:1.8cqh 1.6cqw;background:rgba(255,255,255,.02);opacity:0;transform:translateY(1.4cqh);max-height:0;overflow:hidden;transition:opacity .4s,transform .4s,border-color .3s,box-shadow .3s,padding .3s;pointer-events:none}
  .csec.open{opacity:1;transform:translateY(0);max-height:70cqh;pointer-events:auto}
  .csec.active{border-color:rgba(139,92,246,.6);box-shadow:0 0 0 1px rgba(139,92,246,.3),0 16px 40px rgba(124,58,237,.2)}
  .shead{display:flex;align-items:center;gap:1.2cqw;margin-bottom:1.4cqh}
  .sico{width:4.4cqh;height:4.4cqh;border-radius:1cqh;display:grid;place-items:center;background:rgba(139,92,246,.16);border:1px solid rgba(139,92,246,.35);color:#cbb8ff;flex:none}
  .sico svg{width:2.4cqh;height:2.4cqh}
  .shead b{font-size:2.1cqh;font-weight:700}
  .shead span{display:block;font-size:1.5cqh;color:var(--silver-3)}
  .lbl{font-size:1.6cqh;color:var(--silver-2);margin:.4cqh 0 .8cqh;display:block}
  .inp{width:100%;height:4.6cqh;border-radius:1cqh;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.12);color:#fff;padding:0 1.2cqw;font-size:1.8cqh;outline:none}
  .inp::placeholder{color:var(--silver-3)}
  .inp:focus{border-color:var(--violet)}
  select.inp{appearance:none;-webkit-appearance:none;cursor:pointer;color-scheme:dark;padding-right:3.6cqw;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238a8a93' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 1.2cqw center;background-size:1.7cqh}
  select.inp option{color:#111;background:#fff}
  .loginline{font-size:1.5cqh;color:var(--silver-3);margin:-.2cqh 0 1.4cqh}
  .loginline a{color:#a78bfa;cursor:pointer;font-weight:600}
  .row2{display:grid;grid-template-columns:1fr 1fr;gap:1.2cqw 1.4cqw}
  .choice{display:flex;gap:1.4cqw}
  .opt{flex:1;text-align:left;padding:1.4cqh 1.2cqw;border-radius:1cqh;background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.12);cursor:pointer;transition:.2s}
  .opt b{font-size:1.85cqh;display:block}
  .opt > span{font-size:1.4cqh;color:var(--silver-3)}
  .opt.on{border-color:var(--violet);background:rgba(139,92,246,.14)}
  .helper{margin-top:1.4cqh;font-size:1.6cqh;line-height:1.5;color:var(--silver-2)}
  .helper code{color:#cbb8ff;background:rgba(139,92,246,.12);padding:.2cqh .6cqw;border-radius:.6cqh;font-family:"JetBrains Mono",monospace;font-size:1.5cqh}
  .qrow{display:flex;gap:1cqw;margin-top:1cqh}
  .qrow .inp{flex:1}
  .qbtn{padding:0 1.8cqw;border-radius:1cqh;border:none;cursor:pointer;background:linear-gradient(100deg,var(--indigo),var(--violet));color:#fff;font:700 1.7cqh Inter,sans-serif;white-space:nowrap}
  .dres{display:none;align-items:center;gap:.8cqw;margin-top:1cqh;color:#43d17f;font-size:1.7cqh;font-weight:600}
  .dres svg{width:2cqh;height:2cqh}

  .summary{border:1px solid rgba(255,255,255,.1);border-radius:1.6cqh;padding:2cqh 1.4cqw;background:linear-gradient(180deg,rgba(124,58,237,.08),rgba(255,255,255,.02));transition:box-shadow .3s,border-color .3s;position:sticky;top:0}
  .summary.hot{border-color:rgba(139,92,246,.6);box-shadow:0 0 0 1px rgba(139,92,246,.35),0 20px 50px rgba(124,58,237,.3)}
  .summary .sh{display:flex;align-items:center;gap:1cqw;margin-bottom:1.4cqh}
  .summary .sb{width:4cqh;height:4cqh;border-radius:1cqh;display:grid;place-items:center;background:rgba(139,92,246,.18);color:#cbb8ff;flex:none}
  .summary .sb svg{width:2.2cqh;height:2.2cqh}
  .summary .sh b{font-size:2cqh}
  .summary .sh span{display:block;font-size:1.5cqh;color:var(--silver-3)}
  .amt{display:inline-block;height:1.3cqh;border-radius:3px;background:linear-gradient(90deg,rgba(255,255,255,.2),rgba(255,255,255,.06))}
  .summary > .amt{display:block;margin:.8cqh 0}
  .sline{display:flex;justify-content:space-between;align-items:center;gap:1cqw;font-size:1.6cqh;color:var(--silver-2);margin:.7cqh 0}
  .sline span{flex:1}
  .sline.muted{color:#a78bfa}
  .val{font-variant-numeric:tabular-nums;font-weight:700;color:#fff;min-width:20%;text-align:right;white-space:nowrap}
  .sline.muted .val{color:#a78bfa}
  .lrow .val{min-width:24%;text-align:right;font-weight:600;color:var(--silver-1)}
  .lrow.total .val{font-size:1.9cqh;color:#fff}
  .val .amt{display:inline-block;width:60%;vertical-align:middle}
  .lrow{display:flex;justify-content:space-between;align-items:center;font-size:1.6cqh;color:var(--silver-2);margin:.7cqh 0}
  .lrow .amt{width:24%}
  .lrow.total{font-size:1.9cqh;color:#fff;font-weight:700;border-top:1px solid rgba(255,255,255,.1);padding-top:1cqh;margin-top:1cqh}
  .consent{display:flex;gap:1cqw;align-items:flex-start;font-size:1.4cqh;line-height:1.45;color:var(--silver-2);background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.08);border-radius:1cqh;padding:1.2cqh 1cqw;margin:1.4cqh 0}
  .consent input{margin-top:.3cqh;accent-color:var(--violet);width:1.8cqh;height:1.8cqh;flex:none}
  .consent a{color:#a78bfa}
  #paybtn{width:100%;display:flex;align-items:center;justify-content:center;gap:1cqw;padding:1.7cqh;border:none;cursor:pointer;border-radius:1.2cqh;font:700 2.1cqh Inter,sans-serif;color:#fff;background:linear-gradient(100deg,var(--indigo),var(--violet));transition:box-shadow .3s,transform .15s}
  #paybtn:hover{transform:translateY(-2px)}
  #paybtn.hot{animation:nextGlow 2s ease-in-out infinite}
  #paybtn svg{width:2.2cqh;height:2.2cqh}
  .ssl{text-align:center;font-size:1.4cqh;color:var(--silver-3);margin-top:1cqh}
  .perk{display:flex;align-items:center;gap:.8cqw;font-size:1.5cqh;color:var(--silver-2);margin-top:1cqh}
  .perk svg{width:1.8cqh;height:1.8cqh;color:#43d17f;flex:none}

  .fstrip{position:absolute;left:4cqw;right:4cqw;bottom:2.4cqh;display:flex;justify-content:space-between;gap:2cqw;z-index:4;opacity:0;transition:opacity .5s}
  #s-cart.active .fstrip{opacity:1;transition-delay:.3s}
  .fitem{display:flex;align-items:center;gap:1cqw}
  .fitem .fi{width:3.6cqh;height:3.6cqh;border-radius:1cqh;display:grid;place-items:center;background:rgba(139,92,246,.14);border:1px solid rgba(139,92,246,.3);color:#cbb8ff;flex:none}
  .fitem .fi svg{width:2cqh;height:2cqh}
  .fitem b{color:#fff;font-weight:600;display:block;font-size:1.6cqh}
  .fitem em{font-size:1.35cqh;color:var(--silver-3);font-style:normal}

  /* ===== ADIM 02 · ÖDEME ===== */
  .secassure{display:flex;align-items:flex-start;gap:1cqw;font-size:1.6cqh;line-height:1.45;color:var(--silver-2);background:rgba(67,209,127,.08);border:1px solid rgba(67,209,127,.25);border-radius:1.2cqh;padding:1.4cqh 1.4cqw}
  .secassure svg{width:2.2cqh;height:2.2cqh;color:#43d17f;flex:none;margin-top:.2cqh}
  .backlink{font-size:1.5cqh;color:var(--silver-3);cursor:pointer;display:inline-flex;align-items:center;gap:.6cqw;width:fit-content}
  .backlink:hover{color:#fff}
  .steps .st.done .num{background:linear-gradient(100deg,#16a34a,#22c55e);color:#fff}
  .steps .st.done{color:#fff}
  .steps .st.done .num svg{width:1.5cqh;height:1.5cqh}

  .pmethod{display:flex;align-items:center;gap:1.4cqw;padding:1.8cqh 1.6cqw;border-radius:1.4cqh;border:1px solid rgba(255,255,255,.12);background:rgba(255,255,255,.02);cursor:pointer;transition:.2s;margin-bottom:1.4cqh}
  .pmethod:hover{border-color:rgba(139,92,246,.5)}
  .pmethod.on{border-color:var(--violet);background:rgba(139,92,246,.12);box-shadow:0 0 0 1px rgba(139,92,246,.3)}
  .pmethod .pico{width:5cqh;height:5cqh;border-radius:1.2cqh;display:grid;place-items:center;background:rgba(139,92,246,.16);border:1px solid rgba(139,92,246,.35);color:#cbb8ff;flex:none}
  .pmethod .pico svg{width:2.6cqh;height:2.6cqh}
  .pmethod .ptxt{flex:1}
  .pmethod .ptxt b{font-size:2cqh;display:block}
  .pmethod .ptxt span{font-size:1.5cqh;color:var(--silver-3)}
  .pbadge{font-size:1.35cqh;font-weight:700;color:#fff;padding:.6cqh 1.2cqw;border-radius:999px;background:linear-gradient(100deg,var(--violet),var(--blue));white-space:nowrap}
  .pradio{width:2.6cqh;height:2.6cqh;border-radius:50%;border:2px solid rgba(255,255,255,.25);flex:none;display:grid;place-items:center}
  .pmethod.on .pradio{border-color:var(--violet)}
  .pmethod.on .pradio::after{content:"";width:1.3cqh;height:1.3cqh;border-radius:50%;background:var(--violet)}

  .panelbox{border:1px solid rgba(139,92,246,.3);border-radius:1.4cqh;padding:1.8cqh 1.6cqw;background:rgba(255,255,255,.02);margin-top:.4cqh;animation:upFade .4s ease both}
  .bankrow{display:flex;justify-content:space-between;align-items:center;gap:1cqw;font-size:1.7cqh;padding:.9cqh 0;border-bottom:1px dashed rgba(255,255,255,.1)}
  .bankrow:last-of-type{border-bottom:none}
  .bankrow .k{color:var(--silver-3)}
  .bankrow .v{color:#fff;font-weight:600;font-variant-numeric:tabular-nums}
  .paybtn2{width:100%;display:flex;align-items:center;justify-content:center;gap:1cqw;margin-top:1.6cqh;padding:1.7cqh;border:none;cursor:pointer;border-radius:1.2cqh;font:700 2.1cqh Inter,sans-serif;color:#fff;background:linear-gradient(100deg,var(--indigo),var(--violet));transition:transform .15s}
  .paybtn2:hover{transform:translateY(-2px)}
  .paybtn2.green{background:linear-gradient(100deg,#16a34a,#22c55e)}
  .paybtn2 svg{width:2.2cqh;height:2.2cqh}
  .seclil{display:flex;align-items:center;gap:.8cqw;font-size:1.4cqh;line-height:1.4;color:var(--silver-3);margin-top:1cqh;justify-content:center;text-align:center}
  .seclil svg{width:1.7cqh;height:1.7cqh;color:#43d17f;flex:none}

  .filedrop{display:flex;align-items:center;gap:1.2cqw;padding:1.6cqh 1.4cqw;border:1.5px dashed rgba(139,92,246,.4);border-radius:1.2cqh;background:rgba(139,92,246,.05);cursor:pointer;margin-top:1cqh;transition:.2s}
  .filedrop svg{width:2.6cqh;height:2.6cqh;color:#a78bfa;flex:none}
  .filedrop b{font-size:1.7cqh}.filedrop span{display:block;font-size:1.4cqh;color:var(--silver-3)}
  .filedrop.done{border-color:rgba(67,209,127,.5);background:rgba(67,209,127,.08)}
  .filedrop.done svg{color:#43d17f}

  .psuccess{text-align:center;padding:2cqh 1cqw}
  .psuccess .pcheck{width:8cqh;height:8cqh;border-radius:50%;margin:0 auto 1.4cqh;display:grid;place-items:center;background:linear-gradient(100deg,#16a34a,#22c55e);color:#fff;animation:popIn .5s cubic-bezier(.2,1.4,.4,1) both}
  .psuccess .pcheck svg{width:4.6cqh;height:4.6cqh}
  .psuccess h4{font-size:2.6cqh;font-weight:800}
  .psuccess p{font-size:1.8cqh;color:var(--silver-2);margin-top:.8cqh;line-height:1.45}
  @keyframes popIn{0%{transform:scale(.5);opacity:0}100%{transform:scale(1);opacity:1}}
  .spin{width:5cqh;height:5cqh;border-radius:50%;border:3px solid rgba(255,255,255,.15);border-top-color:var(--violet);animation:spin360 .8s linear infinite;margin:1.4cqh auto}
  @keyframes spin360{to{transform:rotate(360deg)}}

  .paysum{border:1px solid rgba(255,255,255,.1);border-radius:1.6cqh;padding:2cqh 1.4cqw;background:linear-gradient(180deg,rgba(124,58,237,.08),rgba(255,255,255,.02))}
  .paysum .sh{display:flex;align-items:center;gap:1cqw;margin-bottom:1.4cqh}
  .paysum .sb{width:4cqh;height:4cqh;border-radius:1cqh;display:grid;place-items:center;background:rgba(139,92,246,.18);color:#cbb8ff;flex:none}
  .paysum .sb svg{width:2.2cqh;height:2.2cqh}
  .paysum .sh b{font-size:2cqh}.paysum .sh span{display:block;font-size:1.5cqh;color:var(--silver-3)}
  .paysum .pt{display:flex;justify-content:space-between;font-size:1.7cqh;color:var(--silver-2);margin:.7cqh 0}
  .paysum .pt b{font-variant-numeric:tabular-nums;color:#fff}
  .paysum .pt.tot{font-size:2cqh;color:#fff;font-weight:700;border-top:1px solid rgba(255,255,255,.1);padding-top:1cqh;margin-top:1cqh}

  /* ===== ADIM 03 · KURULUM ===== */
  #s-setup{display:flex;flex-direction:column;gap:2cqh;padding:6.5cqh 5cqw 3cqh;overflow-y:auto}
  #s-setup .steps{margin-bottom:0}
  .dombadge{display:flex;justify-content:space-between;align-items:center;gap:2cqw;padding:1.8cqh 2cqw;border-radius:1.6cqh;background:linear-gradient(180deg,rgba(255,255,255,.05),rgba(255,255,255,.015));border:1px solid rgba(255,255,255,.1)}
  .dleft{display:flex;align-items:center;gap:1.4cqw}
  .davatar{width:5.5cqh;height:5.5cqh;border-radius:1.2cqh;display:grid;place-items:center;background:linear-gradient(135deg,var(--violet),var(--indigo));color:#fff;font-weight:800;font-size:2.4cqh;flex:none}
  .dname{display:flex;align-items:center;gap:.8cqw;font-size:2.2cqh;font-weight:700;font-family:"JetBrains Mono",monospace}
  .dname svg{width:1.8cqh;height:1.8cqh;color:#7fe0a0}
  .dmeta{display:flex;gap:.8cqw;margin-top:.8cqh;flex-wrap:wrap}
  .stat{font-size:1.4cqh;font-weight:700;padding:.4cqh 1cqw;border-radius:999px}
  .stat.kurulum{background:rgba(245,158,11,.18);color:#fbbf24}
  .stat.yayinda{background:rgba(34,197,94,.2);color:#4ade80}
  .chip{font-size:1.4cqh;color:var(--silver-2);background:rgba(255,255,255,.06);padding:.4cqh 1cqw;border-radius:999px}
  .visitbtn{display:flex;align-items:center;gap:.8cqw;padding:1.4cqh 2cqw;border:1px solid rgba(139,92,246,.5);border-radius:999px;cursor:pointer;background:rgba(139,92,246,.16);color:#fff;font:700 1.8cqh Inter,sans-serif;transition:.2s;white-space:nowrap}
  .visitbtn.off{opacity:.4;pointer-events:none;filter:grayscale(.4)}
  .visitbtn svg{width:1.8cqh;height:1.8cqh}

  .setup-live{display:flex;align-items:center;gap:1.4cqw;padding:1.8cqh 2cqw;border-radius:1.6cqh;background:linear-gradient(100deg,rgba(34,197,94,.16),rgba(59,130,246,.12));border:1px solid rgba(34,197,94,.4);animation:popIn .5s cubic-bezier(.2,1.4,.4,1) both}
  .setup-live .lcheck{width:6cqh;height:6cqh;border-radius:50%;display:grid;place-items:center;background:linear-gradient(100deg,#16a34a,#22c55e);color:#fff;flex:none}
  .setup-live .lcheck svg{width:3.4cqh;height:3.4cqh}
  .setup-live b{font-size:2.2cqh}.setup-live span{display:block;font-size:1.7cqh;color:var(--silver-2)}

  .setupgrid{display:grid;grid-template-columns:1.7fr 1fr;gap:2cqw;align-items:start}
  .setupmain{border:1px solid rgba(255,255,255,.1);border-radius:1.6cqh;padding:2cqh 1.8cqw;background:rgba(255,255,255,.02)}
  .smhead{display:flex;align-items:center;gap:1.2cqw;flex-wrap:wrap}
  .kbadge{font-size:1.4cqh;font-weight:700;padding:.5cqh 1.2cqw;border-radius:999px;background:rgba(245,158,11,.18);color:#fbbf24;white-space:nowrap}
  .smhead b{font-size:2.3cqh}
  .smdesc{font-size:1.55cqh;line-height:1.5;color:var(--silver-2);margin-top:1cqh}

  .isteps{margin-top:1.4cqh}
  .istep{display:flex;gap:1.4cqw;position:relative;padding-bottom:1.8cqh}
  .istep:last-child{padding-bottom:0}
  .istep:not(:last-child)::before{content:"";position:absolute;left:2cqh;top:4.2cqh;bottom:0;width:2px;background:rgba(255,255,255,.12)}
  .istep.done:not(:last-child)::before{background:rgba(34,197,94,.5)}
  .inum{width:4cqh;height:4cqh;border-radius:50%;display:grid;place-items:center;font-weight:700;font-size:1.8cqh;flex:none;background:rgba(255,255,255,.1);color:var(--silver-2);box-sizing:border-box;position:relative;z-index:1}
  .istep.active .inum{background:linear-gradient(100deg,var(--violet),var(--blue));color:#fff}
  .istep.done .inum{background:linear-gradient(100deg,#16a34a,#22c55e);color:#fff}
  .istep.spin .inum{background:transparent;border:2px solid rgba(255,255,255,.2);border-top-color:#fff;animation:spin360 .8s linear infinite}
  .inum .ck{display:none;width:2.2cqh;height:2.2cqh}
  .istep.done .inum .n{display:none}
  .istep.done .inum .ck{display:block}
  .istep.spin .inum .n,.istep.spin .inum .ck{display:none}
  .ibody{flex:1}
  .ibody b{font-size:2cqh;display:block}
  .ibody > span{font-size:1.5cqh;color:var(--silver-3);display:block;margin-top:.2cqh}
  .istep.pending .ibody b,.istep.pending .ibody > span{opacity:.6}

  .nsblock{margin-top:1.4cqh;border:1px solid rgba(255,255,255,.1);border-radius:1.2cqh;padding:1.4cqh 1.4cqw;background:rgba(255,255,255,.02)}
  .nshead{font-size:1.45cqh;color:var(--silver-3);margin-bottom:1cqh;font-family:"JetBrains Mono",monospace}
  .nsrow{display:flex;justify-content:space-between;align-items:center;padding:.9cqh 1cqw;border-radius:.8cqh;background:rgba(255,255,255,.03);margin-bottom:.8cqh}
  .nsrow code{font-family:"JetBrains Mono",monospace;color:#cbb8ff;font-size:1.7cqh}
  .copyns{font-size:1.5cqh;color:#a78bfa;cursor:pointer;font-weight:600;white-space:nowrap}
  .copyns:hover{color:#fff}
  .nsact{display:flex;align-items:center;gap:1.4cqw;margin-top:1cqh;flex-wrap:wrap}
  .verifybtn{display:flex;align-items:center;gap:.8cqw;padding:1.2cqh 2cqw;border:none;border-radius:1cqh;cursor:pointer;background:linear-gradient(100deg,var(--indigo),var(--violet));color:#fff;font:700 1.7cqh Inter,sans-serif;transition:transform .15s}
  .verifybtn:hover{transform:translateY(-1px)}
  .verifybtn svg{width:1.8cqh;height:1.8cqh}
  .nshint{font-size:1.4cqh;color:var(--silver-3)}
  .nsnote{display:flex;gap:1cqw;align-items:flex-start;margin-top:1.4cqh;font-size:1.45cqh;line-height:1.45;color:#bcb1ea;background:rgba(124,58,237,.1);border:1px solid rgba(139,92,246,.25);border-radius:1cqh;padding:1.2cqh 1.2cqw}
  .nsnote svg{width:1.9cqh;height:1.9cqh;color:#a78bfa;flex:none;margin-top:.1cqh}

  .setupside{display:flex;flex-direction:column;gap:2cqh}
  .sidecard{border:1px solid rgba(255,255,255,.1);border-radius:1.6cqh;padding:1.8cqh 1.4cqw;background:rgba(255,255,255,.02)}
  .sct{font-size:2cqh;display:block;margin-bottom:1.2cqh}
  .srow{display:flex;justify-content:space-between;align-items:center;font-size:1.55cqh;color:var(--silver-3);padding:.7cqh 0;border-bottom:1px solid rgba(255,255,255,.06)}
  .srow:last-child{border-bottom:none}
  .srow b{color:#fff;font-weight:600}
  .dbadge{font-size:1.4cqh;font-weight:700;padding:.4cqh 1cqw;border-radius:999px}
  .dbadge.kurulum{background:rgba(245,158,11,.18);color:#fbbf24}
  .dbadge.yayinda{background:rgba(34,197,94,.2);color:#4ade80}
  .qgrid{display:grid;grid-template-columns:1fr 1fr;gap:1cqw}
  .qbtn2{padding:1.4cqh 1cqw;border:1px solid rgba(255,255,255,.12);border-radius:1cqh;background:rgba(255,255,255,.03);color:var(--silver-2);cursor:pointer;font:600 1.6cqh Inter,sans-serif;transition:.2s}
  .qbtn2:hover{border-color:rgba(139,92,246,.5);color:#fff}

  /* ===== KAPANIŞ · TEBRİKLER / ERİŞİM ===== */
  #s-done{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:6cqh 6cqw;gap:2.2cqh;overflow-y:auto}
  .doneburst{width:9cqh;height:9cqh;border-radius:50%;display:grid;place-items:center;background:linear-gradient(100deg,#16a34a,#22c55e);color:#fff;animation:popIn .5s cubic-bezier(.2,1.4,.4,1) both;box-shadow:0 0 44px rgba(34,197,94,.5)}
  .doneburst svg{width:5cqh;height:5cqh}
  #s-done h2{font-size:5cqh;font-weight:800;letter-spacing:-.01em}
  #s-done .dsub{font-size:2.1cqh;color:var(--silver-2)}
  #s-done .dsub b{color:#fff}
  .accessgrid{display:grid;grid-template-columns:1fr 1fr;gap:2.2cqw;width:92cqw;max-width:150cqh;margin-top:.6cqh}
  .acard{text-align:left;border:1px solid rgba(255,255,255,.1);border-radius:1.8cqh;padding:2.2cqh 1.8cqw;background:linear-gradient(180deg,rgba(255,255,255,.045),rgba(255,255,255,.015));display:flex;flex-direction:column;gap:1.1cqh}
  .acard.feat{border-color:rgba(139,92,246,.5);box-shadow:0 16px 50px rgba(124,58,237,.2)}
  .acard .ah{display:flex;align-items:center;gap:1.2cqw}
  .acard .aico{width:5cqh;height:5cqh;border-radius:1.2cqh;display:grid;place-items:center;background:rgba(139,92,246,.16);border:1px solid rgba(139,92,246,.4);color:#cbb8ff;flex:none}
  .acard .aico svg{width:2.6cqh;height:2.6cqh}
  .acard .aurl{font-family:"JetBrains Mono",monospace;font-size:1.6cqh;color:#cbb8ff}
  .acard h3{font-size:2.3cqh;font-weight:800}
  .acard p{font-size:1.55cqh;color:var(--silver-2);line-height:1.45}
  .acard ul{list-style:none;display:flex;flex-direction:column;gap:.7cqh}
  .acard li{display:flex;align-items:center;gap:.8cqw;font-size:1.55cqh;color:var(--silver-2)}
  .acard li svg{width:1.8cqh;height:1.8cqh;color:var(--violet-2);flex:none}
  .acard .abtn{margin-top:auto;display:flex;align-items:center;justify-content:center;gap:1cqw;padding:1.5cqh;border:none;border-radius:1.2cqh;cursor:pointer;font:700 1.9cqh Inter,sans-serif;color:#fff;background:linear-gradient(100deg,var(--indigo),var(--violet));transition:transform .15s}
  .acard .abtn:hover{transform:translateY(-2px)}
  .acard .abtn.ghost{background:transparent;border:1px solid rgba(139,92,246,.5);color:#fff}
  .acard .abtn svg{width:2cqh;height:2cqh}
  .donenote{font-size:1.5cqh;color:var(--silver-3);max-width:120cqh}
  .donenote b{color:#cbb8ff}

  /* ===== MAĞAZA GİRİŞİ ===== */
  #s-login{display:grid;place-items:center;padding:5cqh;overflow-y:auto}
  .loginwrap{display:flex;flex-direction:column;align-items:center;gap:2.2cqh;width:58cqh;max-width:92cqw}
  .loginbrand{display:flex;align-items:center;gap:1.2cqw}
  .lbico{width:5cqh;height:5cqh;border-radius:1.2cqh;background:linear-gradient(135deg,var(--violet),var(--indigo));display:grid;place-items:center;color:#fff;flex:none}
  .lbico svg{width:2.6cqh;height:2.6cqh}
  .loginbrand b{font-size:2.6cqh;font-weight:700}
  .loginbrand .vv{background:linear-gradient(100deg,var(--violet),var(--blue));-webkit-background-clip:text;background-clip:text;color:transparent}
  .logincard{width:100%;border:1px solid rgba(255,255,255,.1);border-radius:2cqh;padding:2.8cqh 2.2cqw;background:linear-gradient(180deg,rgba(255,255,255,.05),rgba(255,255,255,.015))}
  .logincard h3{font-size:3cqh;font-weight:800}
  .logincard .lsub{font-size:1.65cqh;color:var(--silver-2);margin:.8cqh 0 1.6cqh;line-height:1.45}
  .logincard label{font-size:1.6cqh;color:var(--silver-2);display:block;margin:1.2cqh 0 .7cqh}
  .logincard .hint{font-size:1.4cqh;color:var(--silver-3);margin-top:.8cqh}
  .loginbtn{width:100%;margin-top:1.8cqh;padding:1.7cqh;border:none;border-radius:1.2cqh;cursor:pointer;font:700 2.1cqh Inter,sans-serif;color:#fff;background:linear-gradient(100deg,var(--indigo),var(--violet));transition:transform .15s}
  .loginbtn:hover{transform:translateY(-2px)}
  .loginfoot{font-size:1.6cqh;color:var(--silver-3)}
  .loginfoot b{color:#a78bfa}

  /* ===== MAĞAZA PANELİ (dashboard) ===== */
  #s-store{display:grid;grid-template-columns:18% 1fr;overflow:hidden;padding:0}
  .sb-side{background:rgba(255,255,255,.025);border-right:1px solid rgba(255,255,255,.08);padding:2.4cqh 1.1cqw;overflow-y:auto}
  .sb-brand{display:flex;align-items:center;gap:1cqw;margin-bottom:1.4cqh}
  .sb-brand .sbi{width:4.4cqh;height:4.4cqh;border-radius:1cqh;display:grid;place-items:center;background:linear-gradient(135deg,var(--violet),var(--indigo));color:#fff;font-weight:800;font-size:2cqh;flex:none}
  .sb-brand b{font-size:1.85cqh;display:block;line-height:1.1}.sb-brand span{font-size:1.25cqh;color:var(--silver-3)}
  .sb-group{font-size:1.2cqh;letter-spacing:.16em;color:var(--silver-3);text-transform:uppercase;margin:1.4cqh 0 .6cqh;padding:0 .6cqw}
  .sb-item{display:flex;align-items:center;gap:.9cqw;padding:.9cqh .8cqw;border-radius:.9cqh;font-size:1.55cqh;color:var(--silver-2);cursor:pointer;margin-bottom:.2cqh}
  .sb-item:hover{background:rgba(255,255,255,.04);color:#fff}
  .sb-item.on{background:rgba(139,92,246,.16);color:#fff}
  .sb-item svg{width:1.9cqh;height:1.9cqh;flex:none}
  .sb-item .ibadge{margin-left:auto;background:var(--violet);color:#fff;font-size:1.15cqh;font-weight:700;padding:.05cqh .7cqw;border-radius:999px}

  .sb-main{padding:2.2cqh 1.8cqw;overflow-y:auto}
  .sm-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:1.8cqh;gap:1cqw}
  .sm-bc{font-size:1.45cqh;color:var(--silver-3)}.sm-bc b{color:#fff;display:block;font-size:2.4cqh;margin-top:.2cqh}
  .sm-tr{display:flex;align-items:center;gap:1cqw}
  .sm-addr{display:flex;align-items:center;gap:.7cqw;font-size:1.45cqh;color:var(--silver-2);background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.1);border-radius:999px;padding:.7cqh 1.2cqw}
  .sm-addr svg{width:1.4cqh;height:1.4cqh;color:#7fe0a0}
  .sm-exit{display:flex;align-items:center;gap:.5cqw;font-size:1.45cqh;color:var(--silver-3);cursor:pointer}
  .sm-exit:hover{color:#fff}.sm-exit svg{width:1.6cqh;height:1.6cqh}
  .exitbtn{display:flex;align-items:center;gap:.6cqw;font:700 1.5cqh Inter,sans-serif;color:#fff;background:linear-gradient(100deg,#ef4444,#f87171);border:none;border-radius:999px;padding:.9cqh 1.6cqw;cursor:pointer;transition:transform .15s;white-space:nowrap}
  .exitbtn:hover{transform:translateY(-1px)}
  .exitbtn svg{width:1.6cqh;height:1.6cqh}
  .store-foot{display:flex;justify-content:center;padding:2.6cqh 0 1.2cqh}
  .exitbtn.big{font-size:1.9cqh;padding:1.5cqh 3.2cqw}
  .exitbtn.big svg{width:2cqh;height:2cqh}
  .kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:1.2cqw;margin-bottom:1.6cqh}
  .kpi{border:1px solid rgba(255,255,255,.1);border-radius:1.3cqh;padding:1.4cqh 1cqw;background:rgba(255,255,255,.02)}
  .kpi .kt{display:flex;justify-content:space-between;align-items:center;font-size:1.45cqh;color:var(--silver-3)}
  .kpi .kic{width:3.2cqh;height:3.2cqh;border-radius:.8cqh;display:grid;place-items:center;background:rgba(139,92,246,.16);color:#cbb8ff;flex:none}
  .kpi .kic svg{width:1.8cqh;height:1.8cqh}
  .kpi .kv{font-size:2.8cqh;font-weight:800;margin:.5cqh 0 .3cqh}
  .kpi .kd{font-size:1.3cqh;color:#4ade80;display:flex;align-items:center;gap:.4cqw}
  .panel{border:1px solid rgba(255,255,255,.1);border-radius:1.5cqh;padding:1.6cqh 1.3cqw;background:rgba(255,255,255,.02)}
  .panel h4{font-size:1.9cqh;font-weight:700}.panel .psub{font-size:1.35cqh;color:var(--silver-3);margin-top:.2cqh}
  .dash2{display:grid;grid-template-columns:1.7fr 1fr;gap:1.4cqw;margin-bottom:1.6cqh}
  .chartbox{height:20cqh;margin-top:1cqh}.chartbox svg{width:100%;height:100%;display:block}
  .clegend{display:flex;gap:1.4cqw;font-size:1.35cqh;color:var(--silver-3);margin-top:.6cqh}
  .clegend i{display:inline-block;width:1.2cqh;height:1.2cqh;border-radius:50%;margin-right:.5cqw;vertical-align:middle}
  .traf{display:flex;flex-direction:column;gap:1.2cqh;margin-top:1.2cqh}
  .traf .tr{font-size:1.45cqh;color:var(--silver-2)}
  .traf .trbar{height:.9cqh;border-radius:999px;background:rgba(255,255,255,.08);margin-top:.5cqh;overflow:hidden}
  .traf .trbar i{display:block;height:100%;background:linear-gradient(90deg,var(--violet),var(--blue))}
  .ordtable{width:100%;border-collapse:collapse;font-size:1.45cqh;margin-top:1cqh}
  .ordtable th{text-align:left;color:var(--silver-3);font-weight:600;font-size:1.3cqh;padding:.7cqh .5cqw;border-bottom:1px solid rgba(255,255,255,.08)}
  .ordtable td{padding:.9cqh .5cqw;border-bottom:1px solid rgba(255,255,255,.05);color:var(--silver-2)}
  .ordtable .oid{font-family:"JetBrains Mono",monospace;color:#fff;font-size:1.3cqh}
  .ostat{font-size:1.25cqh;font-weight:700;padding:.3cqh .9cqw;border-radius:999px;white-space:nowrap}
  .ostat.bek{background:rgba(245,158,11,.18);color:#fbbf24}
  .ostat.kar{background:rgba(59,130,246,.18);color:#60a5fa}
  .ostat.ok{background:rgba(34,197,94,.18);color:#4ade80}

  @media (prefers-reduced-motion: reduce){
    .aurora,.podium,.wa-btn::before,.start-btn{animation:none!important}
    #s-intro.play *{animation-duration:.001s!important}
  }