/* onboarding.css — kayıt sihirbazı, rehberli öğretici, ipuçları (js/onboarding.js) */
.obw{margin-bottom:12px}
.obw-top{display:flex;align-items:center;gap:10px;margin-bottom:8px}
.obw-prog{flex:1;height:8px;border-radius:8px;background:var(--line,#ffffff1a);overflow:hidden}
.obw-prog i{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--gold2,#f0c25a),#ffe7a6);transition:width .35s ease}
.obw-lbl{font-size:12px;color:var(--mute,#aab);white-space:nowrap}
.obw-stage{perspective:1100px}
.obw-step{display:none;transform-origin:50% 50%}
.obw-step.on{display:block;animation:obwIn .45s cubic-bezier(.2,.8,.2,1)}
.obw-step.on.back{animation-name:obwInB}
@keyframes obwIn{from{opacity:0;transform:rotateY(-24deg) translateX(40px) translateZ(-60px)}to{opacity:1;transform:none}}
@keyframes obwInB{from{opacity:0;transform:rotateY(24deg) translateX(-40px) translateZ(-60px)}to{opacity:1;transform:none}}
.obw-nav{display:flex;gap:8px;margin-top:10px}
.obw-nav .sp{flex:1}
.obw-nav .btn{min-width:110px;min-height:44px}
.obw-opts{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:10px}
.obw-opt{position:relative;text-align:left;min-height:64px;padding:12px;border-radius:12px;border:1px solid var(--line2,#fff3);background:var(--surf2,#ffffff0d);color:var(--text,#fff);cursor:pointer;font:600 14px var(--sans,sans-serif);transition:transform .25s,box-shadow .25s,border-color .25s;transform-style:preserve-3d}
.obw-opt:hover{transform:translateY(-3px) rotateX(6deg);box-shadow:0 10px 24px #0007}
.obw-opt.on{border-color:var(--gold2,#f0c25a);box-shadow:0 0 0 2px var(--gold2,#f0c25a) inset}
.obw-opt small{display:block;font-weight:400;font-size:12px;color:var(--mute,#aab);margin-top:4px}
.obw-sw{display:inline-block;width:100%;height:18px;border-radius:6px;margin-bottom:6px;border:1px solid #fff3}
@media(max-width:420px){.obw-opts{grid-template-columns:1fr 1fr}}

/* rol tanıtım kartı */
.ob-role{perspective:900px;text-align:center}
.ob-card{margin:4px auto 14px;max-width:320px;padding:22px 16px;border-radius:18px;background:linear-gradient(145deg,var(--c,#3aa8ff),#0b1428);color:#fff;box-shadow:0 18px 40px #000a;animation:obCard 1s cubic-bezier(.2,.8,.2,1);transform-style:preserve-3d}
.ob-card .ic{font-size:0;display:flex;justify-content:center;margin-bottom:6px}
.ob-card .ic svg{width:54px;height:54px}
.ob-card b{display:block;font-size:22px;letter-spacing:.04em}
.ob-card p{margin:8px 0 0;font-size:13.5px;line-height:1.45;opacity:.92}
@keyframes obCard{from{opacity:0;transform:rotateY(90deg) scale(.8)}60%{transform:rotateY(-8deg) scale(1.02)}to{opacity:1;transform:none}}
.ob-go{font-size:16px;padding:14px 18px}
.ob-go .arr{display:inline-block;margin-left:8px;animation:obArr .8s ease-in-out infinite alternate}
@keyframes obArr{from{transform:translateX(0)}to{transform:translateX(6px)}}

/* öğretici katmanı */
#obLayer{position:fixed;inset:0;z-index:99991}
#obHole{position:fixed;border-radius:12px;box-shadow:0 0 0 9999px rgba(3,8,18,.78);outline:3px solid #f2d488;transition:all .3s ease;pointer-events:none}
#obHole.none{width:0!important;height:0!important;left:50%!important;top:40%!important;outline:0}
#obArrow{position:fixed;width:50px;height:50px;pointer-events:none;transition:left .3s,top .3s;color:#f2d488;filter:drop-shadow(0 2px 4px #000a)}
#obArrow svg{width:100%;height:100%;animation:obBob .9s ease-in-out infinite alternate}
@keyframes obBob{from{transform:translateY(-6px)}to{transform:translateY(6px)}}
#obBox{position:fixed;width:min(360px,calc(100vw - 32px));max-height:calc(100vh - 24px);overflow:auto;background:var(--panel,#101b30);color:var(--text,#e8eef8);border:1px solid #f2d48866;border-radius:14px;padding:14px 16px;box-shadow:0 10px 40px #000c;transition:left .3s,top .3s;transform-origin:50% 0}
#obBox.pop{animation:obPop .4s cubic-bezier(.2,.8,.2,1)}
@keyframes obPop{from{opacity:0;transform:perspective(700px) rotateX(-35deg) translateY(-10px)}to{opacity:1;transform:none}}
#obBox h4{margin:0 0 6px;font-size:16px;color:#f2d488}
#obBox p{margin:0 0 10px;font-size:14px;line-height:1.45}
#obBox .ob-more{font-size:13px;color:var(--mute,#c3cbe0);border-left:3px solid #f2d488;padding-left:10px}
#obBox .tr{display:flex;gap:6px;align-items:center;flex-wrap:wrap}
#obBox .tr .sp{flex:1}
#obBox .dots{font-size:12px;color:var(--mute)}
#obBox .btn{min-height:36px}
.ob-enwrap{margin:0 0 12px}
.ob-enwrap .kv{margin-bottom:4px}

/* ipuçları */
[data-tip]{cursor:help}
#obTip{position:fixed;z-index:99995;max-width:min(300px,calc(100vw - 24px));padding:9px 12px;border-radius:10px;background:#0b1428f2;color:#eef3fb;border:1px solid #f2d48866;font:500 12.5px/1.45 var(--sans,sans-serif);box-shadow:0 8px 24px #000a;pointer-events:none;opacity:0;transform:translateY(4px);transition:opacity .15s,transform .15s}
#obTip.on{opacity:1;transform:none}
#obTip b{color:#f2d488}

/* basit arayüz */
.ob-simplebtn{display:none}
html.ui-simple .ob-simplebtn{display:flex;align-items:center;justify-content:center;gap:10px;width:100%;margin:0 0 12px;padding:14px;font-size:16px}
html.ui-simple .ob-adv{display:none}
@media (prefers-reduced-motion:reduce){.obw-step.on,.ob-card,#obBox.pop,#obArrow svg,.ob-go .arr{animation:none}}

/* v62: yeni giriş tasarımı (giris.css) altın düğmelere display:flex!important veriyor → sihirbazın son adımında gizlenmesi
   gereken "İleri" (ve ilk adımda "Geri") görünür kalıyordu. Satır içi display:none'a uy. */
#login-v2 .obw .obw-nav .btn[style*="display: none"],#login-v2 .obw .obw-nav .btn[style*="display:none"]{display:none!important}

/* v46: öğretici katmanı alttaki oyunu kilitlemesin (kayıttan sonra 'sayfalara geçemiyorum' şikâyeti); yalnız kutu tıklanır */
#obLayer{pointer-events:none}#obLayer #obBox,#obBox{pointer-events:auto}