/* Nasıl Kullanılır sayfası (/nasil-kullanilir). Sitenin tasarım jetonları: zemin #111 / iç #161616 / çizgi #1f1f1f, vurgu #635bff. */
.ht-page{--ht-card:#111111;--ht-in:#161616;--ht-deep:#0c0c0c;--ht-bd:#1f1f1f;--ht-bd2:#2a2a2a;--ht-tx:#fafafa;--ht-mt:#a1a1aa;--ht-mt2:#71717a;--ht-ac:#635bff;--ht-ac2:#a5a0ff;
  max-width:1120px;margin:0 auto;color:var(--ht-tx);font-family:Inter,'Segoe UI',sans-serif}
.ht-page *{box-sizing:border-box}
.ht-page svg{width:1em;height:1em;flex:none;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.ht-page h1,.ht-page h2,.ht-page h3,.ht-page h4{margin:0;color:#fff;letter-spacing:-.02em}
.ht-page p{margin:0;color:var(--ht-mt);line-height:1.7}
.ht-page b{color:#e4e4e7;font-weight:600}
.ht-page [id]{scroll-margin-top:120px}

/* —— Hero —— */
.ht-hero{position:relative;text-align:center;padding:34px 0 10px}
.ht-hero::before{content:"";position:absolute;inset:-60px 10% auto;height:340px;background:radial-gradient(closest-side,rgba(99,91,255,.20),transparent);filter:blur(10px);z-index:-1;pointer-events:none}
.ht-pill,.ht-eyebrow{display:inline-flex;align-items:center;gap:7px;font-size:11px;font-weight:700;letter-spacing:.12em;color:var(--ht-ac2);background:rgba(99,91,255,.10);border:1px solid rgba(99,91,255,.25);padding:6px 12px;border-radius:99px}
.ht-pill svg{font-size:14px}
.live-section .ht-title{margin:20px 0 16px;font-size:clamp(34px,5.6vw,58px);font-weight:800;line-height:1.05}
.ht-grad{background:linear-gradient(90deg,#8d86ff,#c4b5fd 55%,#7dd3fc);-webkit-background-clip:text;background-clip:text;color:transparent}
.live-section .ht-lead{max-width:640px;margin:0 auto;font-size:16px}
.ht-cta{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin-top:26px}
.ht-btn{display:inline-flex;align-items:center;gap:8px;height:44px;padding:0 20px;border-radius:10px;font-size:14px;font-weight:600;transition:background .15s,border-color .15s,transform .15s}
.ht-btn--primary{background:var(--ht-ac);color:#fff;box-shadow:0 6px 24px rgba(99,91,255,.35)}
.ht-btn--primary:hover{background:#7a73ff;transform:translateY(-1px)}
.ht-btn--ghost{border:1px solid var(--ht-bd2);background:var(--ht-card);color:#e4e4e7}
.ht-btn--ghost:hover{border-color:#3a3a3a;background:var(--ht-in)}

/* —— Bölüm başlığı —— */
.ht-sec{margin-top:96px}
.ht-sec-head{max-width:660px;margin-bottom:34px}
.ht-sec-head h2{margin:14px 0 10px;font-size:clamp(26px,3.4vw,36px);font-weight:800;line-height:1.15}
.ht-sec-head p{font-size:15px}
.ht-more{display:inline-flex;align-items:center;gap:6px;margin-top:16px;font-size:13px;font-weight:600;color:var(--ht-ac2)}
.ht-more svg{transition:transform .15s}
.ht-more:hover svg,.ht-extra:hover .ht-more svg{transform:translateX(3px)}
.ht-small{margin-top:12px!important;font-size:12.5px}

/* —— 4 adım —— */
.ht-steps{list-style:none;margin:0;padding:0;display:grid;gap:22px;counter-reset:none}
.ht-step{display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:center;padding:34px;border:1px solid var(--ht-bd);border-radius:20px;background:linear-gradient(180deg,var(--ht-card),#0d0d0d)}
.ht-step:nth-child(even) .ht-step-text{order:2}
.ht-num{display:grid;place-items:center;width:36px;height:36px;margin-bottom:18px;border-radius:10px;background:rgba(99,91,255,.12);border:1px solid rgba(99,91,255,.3);color:var(--ht-ac2);font-weight:800;font-size:15px}
.ht-step h3{font-size:22px;font-weight:700;margin-bottom:10px}
.ht-step-text>p{font-size:14.5px}
.ht-ticks{list-style:none;margin:14px 0 0;padding:0;display:grid;gap:9px}
.ht-ticks li{display:flex;gap:10px;font-size:14px;color:var(--ht-mt);line-height:1.6}
.ht-ticks li>svg{margin-top:4px;color:#4ade80}

/* Mockup pencere */
.ht-mock{border:1px solid var(--ht-bd2);border-radius:14px;background:var(--ht-deep);overflow:hidden;box-shadow:0 24px 60px rgba(0,0,0,.45)}
.ht-mock-bar{display:flex;align-items:center;gap:6px;height:34px;padding:0 12px;border-bottom:1px solid var(--ht-bd);background:#121212}
.ht-mock-bar i{width:9px;height:9px;border-radius:50%;background:#2a2a2a}
.ht-mock-bar span{margin-left:10px;font-size:11px;color:var(--ht-mt2);font-family:ui-monospace,Consolas,monospace}
.ht-mock-body{padding:22px}
.m-label{font-size:11px;color:var(--ht-mt2);margin:0 0 6px}
.m-input{display:flex;align-items:center;gap:8px;height:38px;padding:0 12px;margin-bottom:14px;border:1px solid var(--ht-bd2);border-radius:8px;background:#111;font-size:13px;color:#e4e4e7}
.m-input--key{border-color:rgba(99,91,255,.5);box-shadow:0 0 0 3px rgba(99,91,255,.12)}
.m-input--key svg{color:var(--ht-ac2)}
.m-btn{display:grid;place-items:center;height:38px;border-radius:8px;background:var(--ht-ac);color:#fff;font-size:13px;font-weight:600}
.ht-mock-games{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.m-game{padding:8px;border:1px solid var(--ht-bd);border-radius:10px;background:#111;opacity:.55}
.m-game.is-on{opacity:1;border-color:rgba(99,91,255,.55);box-shadow:0 0 0 3px rgba(99,91,255,.12)}
.m-cover{aspect-ratio:3/4;border-radius:7px;margin-bottom:8px}
.m-cover.c1{background:linear-gradient(150deg,#1e3a8a,#0f172a 70%)}
.m-cover.c2{background:linear-gradient(150deg,#7c2d12,#b45309 45%,#111 90%)}
.m-cover.c3{background:linear-gradient(150deg,#14532d,#0f172a 75%)}
.m-game b{display:block;font-size:11.5px;color:#fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.m-game small{font-size:10px;color:var(--ht-mt2)}
.m-card-banner{position:relative;height:74px;margin:-22px -22px 16px;padding:12px 16px;display:flex;flex-direction:column;justify-content:space-between;background:linear-gradient(120deg,#312e81,#111 80%)}
.m-card-banner span{align-self:flex-start;font-size:9px;font-weight:800;letter-spacing:.1em;padding:3px 7px;border-radius:5px;background:rgba(0,0,0,.45);color:#c7d2fe}
.m-card-banner b{font-size:15px;color:#fff}
.m-field{display:flex;justify-content:space-between;align-items:center;padding:9px 12px;margin-bottom:8px;border:1px solid var(--ht-bd);border-radius:8px;background:#111;font-size:12.5px}
.m-field small{color:var(--ht-mt2);font-size:11px}
.m-field span{color:#e4e4e7;font-family:ui-monospace,Consolas,monospace}
.ht-mock-body .m-btn{margin-top:4px}
.m-code{margin-top:12px;padding:12px 14px;border:1px solid rgba(99,91,255,.35);border-radius:10px;background:rgba(99,91,255,.06)}
.m-code small{display:block;font-size:11px;color:var(--ht-ac2)}
.m-code b{display:block;margin-top:2px;font-size:26px;letter-spacing:6px;color:#fff;font-family:ui-monospace,Consolas,monospace}
.m-code b i{display:inline-block;font-style:normal}

/* Mockup hareketli parçaları — durağan (varsayılan) hâl = son kare */
.ht-mock{position:relative}
.ht-mock-body{position:relative}
.m-input{font-family:ui-monospace,Consolas,monospace}
.m-type{display:inline-block;overflow:hidden;white-space:nowrap;vertical-align:bottom}
.m-caret{display:none;width:2px;height:15px;margin-left:1px;background:var(--ht-ac2)}
.m-toast{position:absolute;top:44px;right:12px;display:flex;align-items:center;gap:7px;padding:8px 12px;border:1px solid rgba(34,197,94,.35);border-radius:10px;background:#0f1a14;color:#bbf7d0;font-size:12px;font-weight:600;box-shadow:0 10px 30px rgba(0,0,0,.5);opacity:0;pointer-events:none}
.m-toast svg{color:#4ade80}
.m-toast2{border-color:rgba(99,91,255,.4);background:#15132b;color:#d4cffc}
.m-toast2 svg{color:var(--ht-ac2)}
/* Oyun seçimi onayı: ekranı kaplayan yeşil tik */
.m-done{position:absolute;inset:34px 0 0 0;z-index:3;display:grid;place-content:center;justify-items:center;gap:16px;background:rgba(10,10,10,.86);backdrop-filter:blur(3px);opacity:0;pointer-events:none}
.m-done-ic{position:relative;display:grid;place-items:center;width:84px;height:84px;border-radius:50%;background:rgba(34,197,94,.12)}
.m-done-ic::after{content:"";position:absolute;inset:0;border-radius:50%;border:2px solid #22c55e;opacity:0}
.m-done-ic svg{width:84px;height:84px;fill:none;stroke:#22c55e;stroke-width:3;stroke-linecap:round;stroke-linejoin:round;overflow:visible}
.m-done-ring{stroke-dasharray:151;stroke-dashoffset:0;transform:rotate(-90deg);transform-origin:center}
.m-done-tick{stroke-dasharray:40;stroke-dashoffset:0;stroke-width:4}
.m-done b{font-size:15px;color:#bbf7d0;letter-spacing:-.01em}
.m-cursor{position:absolute;left:50%;top:86%;width:20px;height:20px;color:#fff;opacity:0;pointer-events:none;filter:drop-shadow(0 2px 4px rgba(0,0,0,.6))}
.m-cover{position:relative}
.m-sel{position:absolute;top:6px;right:6px;display:grid;place-items:center;width:20px;height:20px;border-radius:50%;background:var(--ht-ac);color:#fff;box-shadow:0 2px 8px rgba(0,0,0,.45)}
.m-sel svg{width:12px;height:12px;stroke-width:3}
.m-pick{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:14px;padding-top:12px;border-top:1px solid var(--ht-bd)}
.m-count{font-size:12px;color:var(--ht-mt);white-space:nowrap}
.m-nums{display:inline-grid;color:#fff;font-weight:700}
.m-nums b{grid-area:1/1}
.m-n0,.m-n1{opacity:0}
.m-btn--inline{display:inline-grid;height:32px;padding:0 14px;font-size:12px;white-space:nowrap}
.m-hint{display:flex;align-items:center;gap:7px;margin-top:12px;font-size:11.5px;color:var(--ht-ac2)}
.m-hint svg{color:#4ade80}
.m-cursor svg{width:20px;height:20px;fill:#fff;stroke:#111;stroke-width:1.2}
.m-out{display:grid;margin-top:12px}
.m-out>*{grid-area:1/1}
.m-out .m-code{margin-top:0}
.m-wait{display:flex;align-items:center;gap:12px;padding:12px 14px;border:1px solid var(--ht-bd2);border-radius:10px;background:#111;opacity:0}
.m-wait>div{flex:1}
.m-wait small{display:block;font-size:11px;color:var(--ht-mt);margin-bottom:8px}
.m-spin{width:18px;height:18px;flex:none;border-radius:50%;border:2px solid rgba(99,91,255,.25);border-top-color:var(--ht-ac2)}
.m-bar{height:4px;border-radius:9px;background:#1f1f1f;overflow:hidden}
.m-bar i{display:block;height:100%;width:100%;border-radius:inherit;background:linear-gradient(90deg,var(--ht-ac),#7dd3fc)}

/* Hero yüzen kartlar */
.ht-float{position:absolute;display:flex;align-items:center;gap:10px;padding:10px 14px 10px 10px;border:1px solid var(--ht-bd2);border-radius:14px;background:rgba(17,17,17,.85);backdrop-filter:blur(8px);box-shadow:0 18px 40px rgba(0,0,0,.5);text-align:left;pointer-events:none}
.ht-float small{display:block;font-size:10.5px;color:var(--ht-mt2)}
.ht-float b{font-size:14px;color:#fff;font-family:ui-monospace,Consolas,monospace;letter-spacing:.06em}
.ht-float--r b{font-family:inherit;letter-spacing:0;font-size:13px}
.ht-float--l{--r:-4deg;left:0;top:150px;transform:rotate(var(--r))}
.ht-float--r{--r:3deg;right:0;top:250px;transform:rotate(var(--r))}
.ht-float-ic{display:grid;place-items:center;width:34px;height:34px;border-radius:10px;background:rgba(99,91,255,.14);color:var(--ht-ac2);font-size:16px}
.ht-float-ic--ok{background:rgba(34,197,94,.12);color:#4ade80}

/* —— Giriş kodu akışı —— */
.ht-flow{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,1fr);gap:14px;position:relative}
.ht-flow::before{content:"";position:absolute;top:46px;left:12%;right:12%;height:1px;background:linear-gradient(90deg,transparent,rgba(99,91,255,.5),transparent);z-index:0}
.ht-flow li{position:relative;z-index:1;padding:24px 20px;border:1px solid var(--ht-bd);border-radius:16px;background:var(--ht-card)}
.ht-flow-ic{display:grid;place-items:center;width:44px;height:44px;margin-bottom:16px;border-radius:12px;background:#15132b;border:1px solid rgba(99,91,255,.35);color:var(--ht-ac2);font-size:19px}
.ht-flow li>b{display:block;font-size:15px;color:#fff;margin-bottom:6px}
.ht-flow li>p{font-size:13px}
.ht-notes{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:14px}
.ht-note{display:flex;gap:12px;padding:18px;border:1px dashed var(--ht-bd2);border-radius:14px}
.ht-note>svg{margin-top:3px;font-size:17px;color:var(--ht-ac2)}
.ht-note b{display:block;font-size:13.5px;color:#fff;margin-bottom:4px}
.ht-note p{font-size:12.5px}

/* —— Ekstralar —— */

/* —— SSS —— */
.ht-faq{display:grid;gap:10px;max-width:860px}
.ht-faq details{border:1px solid var(--ht-bd);border-radius:14px;background:var(--ht-card);transition:border-color .15s}
.ht-faq details[open]{border-color:var(--ht-bd2);background:var(--ht-in)}
.ht-faq summary{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:18px 22px;font-size:15px;font-weight:600;color:#fff;cursor:pointer;list-style:none}
.ht-faq summary::-webkit-details-marker{display:none}
.ht-faq summary svg{color:var(--ht-mt2);transition:transform .2s}
.ht-faq details[open] summary svg{transform:rotate(180deg)}
.ht-faq summary:focus-visible{outline:2px solid var(--ht-ac2);outline-offset:-2px;border-radius:14px}
.ht-faq details p{padding:0 22px 20px;font-size:14px}

/* —— Son CTA —— */
.ht-final{position:relative;isolation:isolate;overflow:hidden;margin:100px 0 20px;padding:56px 24px;text-align:center;border-radius:24px;background:rgba(99,91,255,.25)}
.ht-final::before{content:"";position:absolute;left:50%;top:50%;width:1600px;height:1600px;margin:-800px 0 0 -800px;background:conic-gradient(from 0deg,transparent 0 62%,#635bff 76%,#7dd3fc 84%,transparent 92%);z-index:-2}
.ht-final::after{content:"";position:absolute;inset:1px;border-radius:23px;background:radial-gradient(ellipse at top,rgba(99,91,255,.18),transparent 70%),#111;z-index:-1}
.ht-final h2{font-size:clamp(26px,3.4vw,36px);font-weight:800}
.live-section .ht-final p{margin-top:10px;font-size:15px}

/* —— Mobil —— */
@media(max-width:960px){
  .ht-step{grid-template-columns:1fr;gap:28px;padding:24px}
  .ht-step:nth-child(even) .ht-step-text{order:0}
  .ht-flow,.ht-extras{grid-template-columns:1fr 1fr}
  .ht-flow::before,.ht-flow::after{display:none}
  .ht-float{display:none}
  .ht-notes{grid-template-columns:1fr}
}
@media(max-width:600px){
  .ht-sec{margin-top:70px}
  .ht-flow,.ht-extras{grid-template-columns:1fr}
  .m-toast{top:40px;right:8px;font-size:11px}
  .ht-mock-body{padding:16px}
  .m-card-banner{margin:-16px -16px 14px}
  .ht-faq summary{padding:16px 18px;font-size:14px}
  .ht-faq details p{padding:0 18px 18px}
}
/* =====================================================================
   ANİMASYONLAR — yalnızca hareket azaltma kapalıyken.
   Mockup döngüleri .is-play (ekrandayken) ile başlar; kaydırma belirmesi .ht-js + .is-in ile çalışır.
   ===================================================================== */
@media(prefers-reduced-motion:no-preference){
  /* Hero açılışı */
  .ht-hero>.ht-pill,.ht-hero>.ht-title,.ht-hero>.ht-lead,.ht-hero>.ht-cta{animation:htUp .8s cubic-bezier(.2,.7,.2,1) both}
  .ht-hero>.ht-title{animation-delay:.12s}
  .ht-hero>.ht-lead{animation-delay:.24s}
  .ht-hero>.ht-cta{animation-delay:.36s}
  .ht-hero::before{animation:htGlow 9s ease-in-out infinite alternate}
  .ht-grad{background-image:linear-gradient(90deg,#8d86ff,#c4b5fd,#7dd3fc,#8d86ff);background-size:200% auto;animation:htShine 5s linear infinite}
  .ht-float--l{animation:htFloatIn .9s .7s cubic-bezier(.2,.7,.2,1) both,htBob 6s 1.6s ease-in-out infinite}
  .ht-float--r{animation:htFloatIn .9s .9s cubic-bezier(.2,.7,.2,1) both,htBob 7s 1.8s ease-in-out infinite}
  .ht-hero .ht-btn--primary{animation:htBtnGlow 2.8s 1.4s ease-in-out infinite}

  /* Düğme parıltısı */
  .ht-btn{position:relative;overflow:hidden}
  .ht-btn--primary::after{content:"";position:absolute;inset:0;background:linear-gradient(110deg,transparent 30%,rgba(255,255,255,.35) 50%,transparent 70%);transform:translateX(-120%);pointer-events:none}
  .ht-btn--primary:hover::after{transform:translateX(120%);transition:transform .7s ease}

  /* Kaydırınca belirme */
  .ht-js [data-ht]{transition:opacity .7s ease,transform .7s cubic-bezier(.2,.7,.2,1),border-color .15s;transition-delay:calc(var(--i,0)*90ms)}
  .ht-js [data-ht]:not(.is-in){opacity:0;transform:translateY(26px)}
  .ht-js .ht-step .ht-mock{transition:transform .9s cubic-bezier(.2,.7,.2,1) .15s,opacity .9s ease .15s}
  .ht-js .ht-step:not(.is-in) .ht-mock{opacity:0;transform:translateX(40px) rotate(1.5deg)}
  .ht-js .ht-step:nth-child(even):not(.is-in) .ht-mock{transform:translateX(-40px) rotate(-1.5deg)}
  .ht-step.is-in .ht-num{animation:htPop .55s .25s cubic-bezier(.3,1.5,.5,1) both}

  /* Mockup başlangıç kareleri (ekrana girmeden önce) */
  .ht-js .ht-mock:not(.is-play) .m-type{width:0}
  .ht-js .ht-mock:not(.is-play) .m-code{opacity:0}
  .ht-mock.is-play .m-caret{display:inline-block}

  /* 1 — kayıt formu (7 sn) */
  .is-play .m-t1a{animation:htType1a 7s steps(var(--n)) infinite}
  .is-play .m-c1a{animation:htBlink .8s step-end infinite,htCaret1a 7s infinite}
  .is-play .m-t1b{animation:htType1b 7s steps(var(--n)) infinite}
  .is-play .m-c1b{animation:htBlink .8s step-end infinite,htCaret1b 7s infinite}
  .is-play .m-p1{animation:htPress1 7s infinite}
  .is-play .m-toast1{animation:htToast1 7s infinite}

  /* 2 — key doğrulama (7 sn) */
  .ht-js .ht-mock:not(.is-play) .m-hint{opacity:0}
  .is-play .m-t2{animation:htType2 7s steps(var(--n)) infinite}
  .is-play .m-c2{animation:htBlink .8s step-end infinite,htCaret2 7s infinite}
  .is-play .m-p2{animation:htPress2 7s infinite}
  .is-play .m-hint{animation:htHint 7s infinite}
  .is-play .m-toast2{animation:htToast2 7s infinite}

  /* 3 — oyun seçimi (8 sn) */
  .ht-js .ht-mock:not(.is-play) .m-s1,.ht-js .ht-mock:not(.is-play) .m-s3{opacity:.55;border-color:var(--ht-bd);box-shadow:none}
  .ht-js .ht-mock:not(.is-play) .m-sel{transform:scale(0)}
  .ht-js .ht-mock:not(.is-play) .m-n0{opacity:1}
  .ht-js .ht-mock:not(.is-play) .m-n2{opacity:0}
  .is-play .m-cursor{animation:htCursor 8s cubic-bezier(.5,0,.3,1) infinite}
  .is-play .m-s1{animation:htSel1 8s infinite}
  .is-play .m-s1 .m-sel{animation:htBadge1 8s cubic-bezier(.3,1.6,.5,1) infinite}
  .is-play .m-s3{animation:htSel3 8s infinite}
  .is-play .m-s3 .m-sel{animation:htBadge3 8s cubic-bezier(.3,1.6,.5,1) infinite}
  .is-play .m-n0{animation:htN0 8s infinite}
  .is-play .m-n1{animation:htN1 8s infinite}
  .is-play .m-n2{animation:htN2 8s infinite}
  .is-play .m-p3{animation:htPress3 8s infinite}
  .is-play .m-done{animation:htDone 8s infinite}
  .is-play .m-done-ic{animation:htDonePop 8s infinite}
  .is-play .m-done-ic::after{animation:htHalo 8s infinite}
  .is-play .m-done-ring{animation:htRing 8s infinite}
  .is-play .m-done-tick{animation:htDrawTick 8s infinite}
  .is-play .m-done b{animation:htDoneText 8s infinite}

  /* 4 — Guard kodu (9 sn) */
  .is-play .m-p4{animation:htPress4 9s infinite}
  .is-play .m-wait{animation:htWait 9s infinite}
  .is-play .m-bar i{animation:htBar 9s linear infinite}
  .is-play .m-spin{animation:htSpin .8s linear infinite}
  .is-play .m-code{animation:htCode 9s infinite}
  .is-play .m-code b i{animation:htLetter 9s cubic-bezier(.3,1.5,.5,1) infinite}
  .is-play .m-code b i:nth-child(2){animation-delay:.1s}.is-play .m-code b i:nth-child(3){animation-delay:.2s}.is-play .m-code b i:nth-child(4){animation-delay:.3s}.is-play .m-code b i:nth-child(5){animation-delay:.4s}


  /* Giriş kodu akışı: adımlar sırayla yanar */
  .ht-flow li{animation:htActive 8s infinite}
  .ht-flow li .ht-flow-ic{animation:htIcon 8s infinite}
  .ht-flow li:nth-child(2),.ht-flow li:nth-child(2) .ht-flow-ic{animation-delay:2s}
  .ht-flow li:nth-child(3),.ht-flow li:nth-child(3) .ht-flow-ic{animation-delay:4s}
  .ht-flow li:nth-child(4),.ht-flow li:nth-child(4) .ht-flow-ic{animation-delay:6s}
  .ht-flow::before{background:linear-gradient(90deg,transparent,rgba(99,91,255,.7),transparent);background-size:200% 100%;animation:htShine 3s linear infinite}

  /* Ekstralar ve SSS */
  .ht-faq details[open] p{animation:htFaq .35s ease both}
  .ht-faq summary{transition:color .15s}
  .ht-faq summary:hover{color:var(--ht-ac2)}

  /* Son CTA: dönen kenar ışığı */
  .ht-final::before{animation:htSpin 7s linear infinite}
}

@keyframes htUp{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
@keyframes htPop{from{opacity:0;transform:scale(.4)}to{opacity:1;transform:none}}
@keyframes htGlow{from{transform:translate(-8%,0) scale(1)}to{transform:translate(8%,24px) scale(1.15)}}
@keyframes htShine{from{background-position:0% 0}to{background-position:200% 0}}
@keyframes htFloatIn{from{opacity:0;transform:translateY(24px) rotate(var(--r)) scale(.9)}to{opacity:1;transform:rotate(var(--r))}}
@keyframes htBob{0%,100%{transform:translateY(0) rotate(var(--r))}50%{transform:translateY(-12px) rotate(calc(var(--r) * .4))}}
@keyframes htBtnGlow{0%,100%{box-shadow:0 6px 24px rgba(99,91,255,.35)}50%{box-shadow:0 6px 34px rgba(99,91,255,.6),0 0 0 5px rgba(99,91,255,.12)}}
@keyframes htSpin{to{transform:rotate(360deg)}}
@keyframes htBlink{50%{opacity:0}}
@keyframes htFaq{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
@keyframes htWiggle{0%,100%{transform:none}30%{transform:rotate(-12deg) scale(1.12)}60%{transform:rotate(10deg) scale(1.12)}}
@keyframes htActive{0%,22%{border-color:rgba(99,91,255,.55);box-shadow:0 0 0 1px rgba(99,91,255,.2),0 14px 40px rgba(99,91,255,.14)}30%,100%{border-color:#1f1f1f;box-shadow:none}}
@keyframes htIcon{0%,22%{background:#635bff;color:#fff;transform:scale(1.08)}30%,100%{background:#15132b;color:#a5a0ff;transform:none}}

@keyframes htType1a{0%,6%{width:0}26%,92%{width:calc(var(--n) * 1ch)}100%{width:0}}
@keyframes htType1b{0%,32%{width:0}50%,92%{width:calc(var(--n) * 1ch)}100%{width:0}}
@keyframes htCaret1a{0%,28%{visibility:visible}29%,100%{visibility:hidden}}
@keyframes htCaret1b{0%,29%{visibility:hidden}30%,54%{visibility:visible}55%,100%{visibility:hidden}}
@keyframes htPress1{0%,56%,64%,100%{transform:none;filter:none}60%{transform:scale(.95);filter:brightness(1.3)}}
@keyframes htToast1{0%,62%{opacity:0;transform:translateY(-8px) scale(.96)}67%,90%{opacity:1;transform:none}96%,100%{opacity:0;transform:translateY(-8px)}}


@keyframes htType2{0%,5%{width:0}35%,93%{width:calc(var(--n) * 1ch)}100%{width:0}}
@keyframes htCaret2{0%,37%{visibility:visible}38%,100%{visibility:hidden}}
@keyframes htPress2{0%,44%,52%,100%{transform:none;filter:none}48%{transform:scale(.95);filter:brightness(1.3)}}
@keyframes htHint{0%,52%{opacity:0;transform:translateY(-4px)}57%,93%{opacity:1;transform:none}100%{opacity:0}}
@keyframes htToast2{0%,52%{opacity:0;transform:translateY(-8px) scale(.96)}57%,88%{opacity:1;transform:none}94%,100%{opacity:0;transform:translateY(-8px)}}

@keyframes htCursor{0%{left:55%;top:6%;opacity:0;transform:none}6%{opacity:1}20%{left:17%;top:36%;transform:none}23%{transform:scale(.78)}26%{transform:none}42%{left:83%;top:36%;transform:none}45%{transform:scale(.78)}48%{transform:none}63%{left:84%;top:89%;transform:none}66%{transform:scale(.78)}69%{transform:none}84%{left:84%;top:89%;opacity:1}92%,100%{left:84%;top:89%;opacity:0}}
@keyframes htSel1{0%,22%,100%{opacity:.55;border-color:#1f1f1f;box-shadow:none}24%,94%{opacity:1;border-color:rgba(99,91,255,.55);box-shadow:0 0 0 3px rgba(99,91,255,.12)}}
@keyframes htSel3{0%,44%,100%{opacity:.55;border-color:#1f1f1f;box-shadow:none}46%,94%{opacity:1;border-color:rgba(99,91,255,.55);box-shadow:0 0 0 3px rgba(99,91,255,.12)}}
@keyframes htBadge1{0%,22%,97%,100%{transform:scale(0)}27%,94%{transform:scale(1)}}
@keyframes htBadge3{0%,44%,97%,100%{transform:scale(0)}49%,94%{transform:scale(1)}}
@keyframes htN0{0%,23%{opacity:1}24%,95%{opacity:0}97%,100%{opacity:1}}
@keyframes htN1{0%,23%{opacity:0}24%,45%{opacity:1}46%,100%{opacity:0}}
@keyframes htN2{0%,45%{opacity:0}46%,94%{opacity:1}96%,100%{opacity:0}}
@keyframes htPress3{0%,63%,70%,100%{transform:none;filter:none}66%{transform:scale(.93);filter:brightness(1.3)}}

@keyframes htDone{0%,70%{opacity:0}74%,91%{opacity:1}96%,100%{opacity:0}}
@keyframes htDonePop{0%,71%{transform:scale(.5)}77%{transform:scale(1.14)}81%,100%{transform:scale(1)}}
@keyframes htRing{0%,71%{stroke-dashoffset:151}79%,100%{stroke-dashoffset:0}}
@keyframes htDrawTick{0%,77%{stroke-dashoffset:40}84%,100%{stroke-dashoffset:0}}
@keyframes htHalo{0%,81%{transform:scale(1);opacity:0}82%{transform:scale(1);opacity:.6}92%,100%{transform:scale(1.7);opacity:0}}
@keyframes htDoneText{0%,81%{opacity:0;transform:translateY(8px)}87%,100%{opacity:1;transform:none}}

@keyframes htPress4{0%,5%,13%,100%{transform:none;filter:none}9%{transform:scale(.95);filter:brightness(1.3)}}
@keyframes htWait{0%,10%{opacity:0;transform:translateY(6px)}14%,53%{opacity:1;transform:none}57%,100%{opacity:0;transform:none}}
@keyframes htBar{0%,14%{width:0}52%,100%{width:100%}}
@keyframes htCode{0%,55%{opacity:0;transform:scale(.96);box-shadow:none}60%{opacity:1;transform:none;box-shadow:0 0 0 4px rgba(99,91,255,.18),0 0 40px rgba(99,91,255,.3)}70%,93%{opacity:1;transform:none;box-shadow:none}100%{opacity:0}}
@keyframes htLetter{0%,57%{opacity:0;transform:translateY(10px) scale(.6)}62%,93%{opacity:1;transform:none}100%{opacity:0}}

@media(prefers-reduced-motion:reduce){.ht-page *,.ht-page *::before,.ht-page *::after{animation:none!important;transition:none!important}}

/* SSS bölümü ortalı */
#sss .ht-sec-head{margin-left:auto;margin-right:auto;text-align:center}
#sss .ht-faq{margin:0 auto}