/* ============================================================
   TikAfrika login + create account
   Left: dark plum brand story. Right: white card on soft pink.
   ============================================================ */
:root{
  --pink:#ff2d6f;
  --pink-dark:#e8195b;
  --pink-soft:#ffe8ef;
  --ink:#13102b;
  --heading-c:#16142e;
  --text:#3a3854;
  --muted:#6e6b88;
  --line:#e9e5f2;
  --violet:#7c4dff;
  --heading:"Plus Jakarta Sans",Inter,system-ui,sans-serif;
  --hand:"Caveat","Comic Sans MS",cursive;
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{min-height:100%}
body{font-family:Inter,ui-sans-serif,system-ui,sans-serif;font-size:16px;line-height:1.55;color:var(--text);background:#fff5f9}
a{color:inherit;text-decoration:none}
img{display:block}
button,input{font:inherit;color:inherit}
:focus-visible{outline:3px solid rgba(255,45,111,.45);outline-offset:2px;border-radius:8px}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
h1,h2{font-family:var(--heading);letter-spacing:-.03em}

.auth{--reach:100px;position:relative;overflow:hidden;background:linear-gradient(160deg,#fff 0%,#fff2f7 55%,#fde7f1 100%);display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);min-height:100vh;min-height:100dvh}

/* ---------- Logo ---------- */
.logo{display:inline-flex;align-items:center;gap:12px;font-family:var(--heading);font-weight:800;font-size:40px;letter-spacing:-.03em;line-height:1}
.logo i{color:var(--pink);font-size:36px}
.logo b{color:var(--pink);font-weight:800}
.logo-light{color:#fff}
.logo-dark{color:var(--heading-c);font-size:34px}
.logo-dark i{font-size:30px}
.tagline{margin-top:8px;font-size:16px;color:rgba(255,255,255,.82)}
.tagline-dark{color:var(--muted);font-size:15px}

/* ---------- Left: promo ---------- */
.promo{position:relative;z-index:1;margin-right:calc(var(--reach) * -1);-webkit-mask:linear-gradient(#000 0 0) left top/calc(100% - 259px) 100% no-repeat,url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 260 1000' preserveAspectRatio='none'%3E%3Cpath d='M0 0H120C70 150 150 260 190 420S150 700 210 840 250 960 260 1000H0Z'/%3E%3C/svg%3E") right top/260px 100% no-repeat;mask:linear-gradient(#000 0 0) left top/calc(100% - 259px) 100% no-repeat,url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 260 1000' preserveAspectRatio='none'%3E%3Cpath d='M0 0H120C70 150 150 260 190 420S150 700 210 840 250 960 260 1000H0Z'/%3E%3C/svg%3E") right top/260px 100% no-repeat;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.9fr);gap:10px;align-items:center;padding:56px calc(var(--reach) + 20px) 48px clamp(28px,5vw,80px);overflow:hidden;color:#fff;background:
  radial-gradient(520px 420px at 92% 18%,rgba(124,77,255,.55),transparent 70%),
  radial-gradient(640px 520px at 70% 95%,rgba(255,45,111,.55),transparent 70%),
  radial-gradient(400px 300px at 0% 100%,rgba(255,45,111,.3),transparent 70%),
  var(--ink)}
.promo-waves{position:absolute;inset:0;pointer-events:none;background:
  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 900 1000' preserveAspectRatio='none' fill='none'%3E%3Cpath d='M620 0C760 160 600 320 760 520S940 820 860 1000H900V0Z' fill='%23ff2d6f' fill-opacity='.14'/%3E%3Cpath d='M700 0C820 200 690 360 820 560S900 860 820 1000H900V0Z' fill='%237c4dff' fill-opacity='.18'/%3E%3Cpath d='M0 860C160 820 260 940 420 1000H0Z' fill='%23ff2d6f' fill-opacity='.2'/%3E%3C/svg%3E") center/100% 100% no-repeat}
.promo-copy{position:relative;z-index:2;max-width:470px}
.promo h1{margin-top:38px;font-size:clamp(40px,4.4vw,64px);font-weight:800;line-height:1.02;color:#fff}
.promo h1 span{color:var(--pink)}
.promo-lede{margin-top:20px;font-size:clamp(17px,1.4vw,20px);line-height:1.5;color:rgba(255,255,255,.88)}
.promo-list{list-style:none;display:grid;gap:22px;margin-top:30px}
.promo-list li{display:flex;align-items:center;gap:18px}
.pl-ico{width:56px;height:56px;flex:0 0 56px;display:grid;place-items:center;border-radius:14px;color:#fff;font-size:22px;box-shadow:0 12px 24px -10px rgba(0,0,0,.6)}
.pl-pink{background:linear-gradient(135deg,#ff5f8f,#ff2d6f)}
.pl-violet{background:linear-gradient(135deg,#9a7bff,#6b46ff)}
.pl-blue{background:linear-gradient(135deg,#5aa8ff,#1f6fff)}
.pl-red{background:linear-gradient(135deg,#ff6b8a,#e11d48)}
.promo-list b{display:block;font-family:var(--heading);font-size:17px}
.promo-list small{display:block;margin-top:2px;font-size:14.5px;line-height:1.4;color:rgba(255,255,255,.78)}

.promo-gifts{display:flex;align-items:center;gap:20px;margin-top:38px}
.gift-dots{display:flex}
.gift-dots span{width:58px;height:58px;display:grid;place-items:center;margin-left:-12px;border-radius:50%;background:#fff;border:3px solid var(--pink);box-shadow:0 8px 18px -6px rgba(0,0,0,.5)}
.gift-dots span:first-child{margin-left:0}
.gift-dots img{width:40px;height:40px;object-fit:contain}
.hand-note{white-space:nowrap;font-family:var(--hand);font-size:24px;line-height:1.05;color:#fff;transform:rotate(-6deg)}

.promo-art{position:relative;z-index:1;height:min(720px,86vh);min-height:520px}
.pa-phone{position:absolute;left:8%;top:2%;width:min(330px,78%);height:auto;transform:rotate(9deg);filter:drop-shadow(0 40px 50px rgba(0,0,0,.6)) drop-shadow(0 0 40px rgba(255,45,111,.35))}
.pa-box{position:absolute;left:-12%;bottom:12%;width:clamp(120px,13vw,200px);height:auto;transform:rotate(-8deg);filter:drop-shadow(0 24px 30px rgba(0,0,0,.55))}
.pa-heart{position:absolute;height:auto;filter:drop-shadow(0 12px 20px rgba(255,45,111,.5))}
.pa-heart-1{left:-6%;top:42%;width:clamp(70px,7vw,110px);transform:rotate(-14deg)}
.pa-heart-2{right:18%;top:10%;width:clamp(56px,6vw,90px);transform:rotate(16deg)}
.pa-heart-3{left:24%;bottom:2%;width:clamp(70px,7vw,104px);transform:rotate(10deg)}
.pa-crown{position:absolute;left:-4%;top:58%;width:clamp(48px,4.5vw,70px);height:auto;opacity:.85;transform:rotate(-16deg)}
.pa-spark{position:absolute;color:#fff;font-size:22px;text-shadow:0 0 12px #ff8fb6}
.pa-spark-1{right:22%;top:44%}
.pa-spark-2{left:8%;top:14%;font-size:16px}

/* ---------- Right: panel + card ---------- */
.panel{position:relative;z-index:2;display:grid;grid-template-columns:minmax(0,1fr);place-items:center;padding:40px clamp(16px,4vw,64px) 40px 0;overflow:visible;background:transparent}
.panel::before{content:"";position:absolute;top:0;bottom:0;left:0;width:300px;pointer-events:none;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 1000' preserveAspectRatio='none' fill='none'%3E%3Cpath d='M20 0C-30 150 50 260 90 420S50 700 110 840 150 960 160 1000H210C190 940 170 860 150 820 100 700 150 560 130 420 105 250 40 140 70 0Z' fill='%2523ff2d6f' fill-opacity='.22'/%3E%3Cpath d='M70 0C40 140 105 250 130 420S100 700 150 820 190 940 210 1000H300C260 930 230 860 210 800 170 690 200 560 185 430 165 260 110 140 140 0Z' fill='%2523c86bff' fill-opacity='.12'/%3E%3C/svg%3E") left top/100% 100% no-repeat}
.panel-waves{position:absolute;inset:0;pointer-events:none;background:
  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 600 1000' preserveAspectRatio='none' fill='none'%3E%3Cpath d='M600 0C470 120 560 260 470 400S560 700 600 760Z' fill='%23ff2d6f' fill-opacity='.07'/%3E%3Cpath d='M0 1000C120 900 260 960 380 880S560 760 600 820V1000Z' fill='%23ff2d6f' fill-opacity='.1'/%3E%3Cpath d='M0 1000C160 940 320 1000 600 900V1000Z' fill='%237c4dff' fill-opacity='.07'/%3E%3C/svg%3E") center/100% 100% no-repeat}
.card{position:relative;z-index:1;width:100%;max-width:500px;padding:44px clamp(22px,4vw,46px) 34px;border-radius:30px;background:#fff;box-shadow:0 30px 70px -30px rgba(70,20,60,.35),0 2px 6px rgba(70,20,60,.05);text-align:center}
.card > *{text-align:left}
.card > .logo,.card > .tagline{display:flex;justify-content:center;text-align:center}

.tabs{display:grid;grid-template-columns:1fr 1fr;gap:4px;margin:30px 0 30px;padding:5px;border-radius:16px;background:#f5f2fa}
.tabs a{display:grid;place-items:center;min-height:46px;border-radius:12px;font-weight:600;color:var(--heading-c);transition:background-color .15s,color .15s}
.tabs a:hover{color:var(--pink)}
.tabs a.active{background:var(--pink);color:#fff;box-shadow:0 8px 18px -8px rgba(255,45,111,.8)}

.card h2{font-size:32px;font-weight:800;color:var(--heading-c);line-height:1.15}
.intro{margin-top:8px;color:var(--muted);font-size:16px;line-height:1.5}

.form{display:grid;grid-template-columns:minmax(0,1fr);gap:14px;margin-top:26px}
.form-alert{display:flex;gap:10px;align-items:flex-start;padding:12px 14px;border-radius:12px;background:#fff0ef;border:1px solid #f6cfca;color:#a1160b;font-size:14px;font-weight:600}
.form-alert i{margin-top:2px}
.form-alert-ok{background:#eafaf2;border-color:#bfead2;color:#12633c}
.input{display:flex;align-items:center;gap:12px;min-width:0;min-height:58px;padding:0 16px;border:1.5px solid var(--line);border-radius:14px;background:#fff;transition:border-color .15s,box-shadow .15s}
.input:focus-within{border-color:var(--pink);box-shadow:0 0 0 4px rgba(255,45,111,.12)}
.input.has-error,.input.has-error:focus-within{border-color:#f04438;box-shadow:0 0 0 4px rgba(240,68,56,.12)}
.input > i{width:20px;color:#8a87a3;font-size:17px;text-align:center}
.input input{flex:1;min-width:0;height:54px;border:0;outline:none;background:transparent;font-size:16px;color:var(--heading-c)}
.input input::placeholder{color:#9b98b2}
.input-prefix{padding-left:0;overflow:hidden}
.prefix{align-self:stretch;display:flex;align-items:center;padding:0 12px 0 16px;background:#faf8fd;border-right:1.5px solid var(--line);color:var(--muted);font-weight:600;font-size:15px;white-space:nowrap}
.eye{display:grid;place-items:center;width:36px;height:36px;border:0;border-radius:10px;background:transparent;color:#8a87a3;cursor:pointer}
.eye:hover{color:var(--pink);background:var(--pink-soft)}
.two{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:12px}
.hint{margin-top:-6px;font-size:13px;color:var(--muted)}

.row-between{display:flex;align-items:center;justify-content:space-between;gap:12px}
.check{display:flex;align-items:center;gap:12px;font-size:15px;color:var(--heading-c);cursor:pointer}
.check input{width:22px;height:22px;flex:0 0 22px;accent-color:var(--pink);cursor:pointer}
.check-error span{color:#d92d20}

.btn-submit{display:flex;align-items:center;justify-content:center;gap:12px;width:100%;min-height:60px;margin-top:6px;border:0;border-radius:14px;background:var(--pink);color:#fff;font-family:var(--heading);font-weight:700;font-size:19px;cursor:pointer;box-shadow:0 14px 28px -12px rgba(255,45,111,.9);transition:background-color .15s,transform .15s}
.btn-submit:hover{background:var(--pink-dark)}
.btn-submit:active{transform:translateY(1px)}

.switch{margin-top:22px;text-align:center !important;color:var(--muted);font-size:15px}
.switch a{color:var(--pink);font-weight:700}
.switch a:hover{text-decoration:underline}
.secure{display:flex;align-items:center;justify-content:center;gap:10px;margin-top:22px;padding-top:20px;border-top:1px solid var(--line);color:var(--muted);font-size:14.5px;text-align:center !important}
.secure i{color:#7c7aa0;font-size:18px}

/* ---------- Sign-up steps ---------- */
.stepper{list-style:none;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));margin-top:24px;counter-reset:s}
.stepper li{position:relative;display:grid;justify-items:center;gap:8px;text-align:center}
.stepper li + li::before{content:"";position:absolute;top:19px;right:calc(50% + 24px);left:calc(-50% + 24px);height:3px;border-radius:3px;background:var(--line);transition:background-color .3s}
.stepper .dot{position:relative;z-index:1;width:40px;height:40px;display:grid;place-items:center;border-radius:50%;background:#f5f2fa;border:2px solid var(--line);color:var(--muted);font-family:var(--heading);font-weight:800;font-size:16px;transition:background-color .3s,border-color .3s,color .3s,box-shadow .3s}
.stepper .dot-label{font-size:13px;font-weight:600;color:var(--muted)}
.stepper li.current .dot{background:var(--pink);border-color:var(--pink);color:#fff;box-shadow:0 0 0 6px rgba(255,45,111,.15)}
.stepper li.current .dot-label{color:var(--heading-c)}
.stepper li.done .dot{background:#fff;border-color:var(--pink);color:var(--pink)}
.stepper li.done .dot::after{content:"\2713";position:absolute;inset:0;display:grid;place-items:center;border-radius:50%;background:var(--pink);color:#fff;font-size:17px}
.stepper li.done + li::before,.stepper li.current::before{background:var(--pink)}
.stepper li.current ~ li::before{background:var(--line)}
.stepper li.current + li::before{background:linear-gradient(90deg,var(--pink),var(--line))}
.stepper:not(:has(li.current)) li{opacity:.5}

.steps-form .step{display:grid;grid-template-columns:minmax(0,1fr);gap:14px;min-width:0;margin:0;padding:0;border:0}
.steps-form .step[hidden]{display:none}
.steps-form .step + .step{margin-top:18px}
.steps-form.is-stepped .step + .step{margin-top:0}
.step-title{padding:0;margin-bottom:2px;font-family:var(--heading);font-weight:700;font-size:18px;color:var(--heading-c)}
.steps-form .step.active{animation:step-in .35s cubic-bezier(.2,.7,.2,1) both}
.link-preview{display:flex;align-items:center;gap:10px;padding:12px 14px;border-radius:12px;background:var(--pink-soft);color:var(--heading-c);font-size:14.5px;overflow-wrap:anywhere}
.link-preview i{color:var(--pink)}
.link-preview b{color:var(--pink)}
.field-error{margin-top:-6px;font-size:13.5px;font-weight:600;color:#d92d20}
.step-actions{display:grid;grid-template-columns:auto minmax(0,1fr);gap:12px;margin-top:6px}
.step-actions .btn-submit{margin-top:0}
.btn-back{display:flex;align-items:center;gap:10px;min-height:60px;padding:0 22px;border:1.5px solid var(--line);border-radius:14px;background:#fff;color:var(--heading-c);font-family:var(--heading);font-weight:700;font-size:16px;cursor:pointer;transition:border-color .15s,color .15s}
.btn-back:hover{border-color:var(--pink);color:var(--pink)}
@keyframes step-in{from{opacity:0;transform:translateX(18px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.steps-form .step.active{animation:none}}

/* ---------- Motion ---------- */
@media (prefers-reduced-motion:no-preference){
  .promo-copy > *{animation:rise .7s cubic-bezier(.2,.7,.2,1) both}
  .promo-copy > :nth-child(2){animation-delay:.06s}
  .promo-copy > :nth-child(3){animation-delay:.14s}
  .promo-copy > :nth-child(4){animation-delay:.22s}
  .promo-copy > :nth-child(5){animation-delay:.3s}
  .promo-copy > :nth-child(6){animation-delay:.4s}
  .pa-phone{animation:fade .9s ease .2s both,float 6s ease-in-out 1.2s infinite}
  .pa-box,.pa-heart,.pa-crown{animation:fade .8s ease .5s both,float 5s ease-in-out 1.4s infinite}
  .pa-heart-2{animation-delay:.6s,2s}
  .pa-heart-3{animation-delay:.7s,2.6s}
  .card{animation:card-in .7s cubic-bezier(.2,.7,.2,1) both}
}
@keyframes rise{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
@keyframes fade{from{opacity:0}to{opacity:1}}
@keyframes float{0%,100%{translate:0 0}50%{translate:0 -10px}}
@keyframes card-in{from{opacity:0;transform:translateY(24px) scale(.98)}to{opacity:1;transform:none}}

/* ---------- Responsive ---------- */
@media (max-width:1280px){
  .promo{grid-template-columns:minmax(0,1fr) minmax(0,.62fr);padding-right:calc(var(--reach) + 10px);padding-left:clamp(28px,4vw,60px)}
  .promo-copy{max-width:min(380px,100%)}
  .promo h1{font-size:clamp(36px,4vw,50px)}
  .promo-list{gap:16px}
  .promo-art{height:min(560px,76vh);min-height:440px}
  .pa-phone{left:0;width:min(250px,100%)}
  .pa-box{left:-22%;width:120px}
  .pa-heart-1{left:-14%;width:70px}
  .pa-heart-2{right:-6%;width:60px}
  .pa-heart-3{left:20%;width:70px}
  .pa-crown{left:-12%;width:48px}
}
@media (max-width:1100px){
  .promo{grid-template-columns:1fr}
  .promo-art{display:none}
}
@media (max-width:960px){
  .auth{grid-template-columns:1fr}
  .promo{display:none}
  .panel{min-height:100vh;min-height:100dvh;padding:28px 16px}
  .panel::before{display:none}
}
@media (max-width:480px){
  .card{padding:32px 20px 26px;border-radius:24px}
  .logo-dark{font-size:30px}
  .card h2{font-size:27px}
  .two{grid-template-columns:minmax(0,1fr)}
  .tabs{margin:24px 0}
}