/* BilgeSınıf — giriş / kayıt sayfaları (referans görselden kesilmiş gerçek illüstrasyonlarla) */
:root{--navy:#16306e;--blue:#2f6bff;--pink:#ff3d8b;--muted:#5c6b8f;--ink:#24325a}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body.bs-body{margin:0;min-height:100vh;min-height:100dvh;color:var(--ink);overflow-x:hidden;
  font-family:"Nunito","Baloo 2",system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  background:linear-gradient(180deg,#29adff 0,#a9dcfd 260px,#cdeefd 520px,#d9f5c4 78%,#8fdc66 100%) fixed}
body.bs-reg{background:linear-gradient(180deg,#50b6f8 0,#c9dff0 220px,#ecd2b0 520px,#f8e6c9 80%,#f3cf9c 100%) fixed}
.bs-stage{position:relative;width:100%;max-width:560px;margin:0 auto;padding:0 0 22px}
.bs-hero{display:block;width:100%;height:auto;position:relative;z-index:1;
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 5%,#000 95%,transparent 100%);mask-image:linear-gradient(90deg,transparent 0,#000 5%,#000 95%,transparent 100%)}
@media (max-width:600px){.bs-hero{-webkit-mask-image:none;mask-image:none}}
/* ---------- KART ---------- */
.bs-cardwrap{position:relative;z-index:2;margin:-14px 12px 0}
.bs-card{
  position:relative;z-index:2;background:rgba(255,255,255,.94);border:3px solid #fff;border-radius:36px;
  padding:clamp(20px,5vw,30px) clamp(18px,5vw,30px) 22px;
  box-shadow:0 22px 50px #2a5fb540,inset 0 0 0 2px #e6f1ff;
}
.bs-head{display:flex;align-items:center;gap:14px;margin-bottom:10px}
.bs-badge-ico{flex:none;width:68px;height:68px;border-radius:50%;display:grid;place-items:center;
  box-shadow:0 6px 0 #0002,inset 0 0 0 5px #ffffff88}
.bs-badge-ico.gold{background:radial-gradient(circle at 35% 30%,#ffe680,#ffb400)}
.bs-badge-ico.pinkb{background:radial-gradient(circle at 35% 30%,#ff8fc0,#ff2d84)}
.bs-badge-ico svg{width:36px;height:36px}
.bs-title{margin:0;font-family:"Baloo 2","Nunito",sans-serif;font-weight:800;font-size:clamp(28px,8vw,40px);line-height:1.02;color:var(--navy)}
.bs-title em{font-style:normal;background:linear-gradient(90deg,#ff3d8b,#c23cff);-webkit-background-clip:text;background-clip:text;color:transparent}
.bs-intro{margin:6px 0 18px;text-align:center;font-weight:700;font-size:clamp(14px,3.8vw,16.5px);line-height:1.45;color:var(--navy)}

.bs-error{display:flex;gap:10px;align-items:center;margin:0 0 14px;padding:12px 16px;border-radius:20px;
  background:#fff0f3;border:2.5px dashed #ff7a98;color:#b3173f;font-weight:800;font-size:15px}
.bs-error::before{content:"🙈";font-size:24px}

.bs-field{display:flex;align-items:center;gap:12px;height:58px;margin-bottom:13px;padding:0 16px 0 18px;
  background:linear-gradient(180deg,#f7fbff,#eaf3ff);border:2.5px solid #cfe2ff;border-radius:32px;
  box-shadow:inset 0 3px 6px #7fa8e822;transition:border-color .15s,box-shadow .15s,transform .15s}
.bs-field.pk{background:linear-gradient(180deg,#fff,#fff6fa);border-color:#f3d4e4;box-shadow:inset 0 3px 6px #e88fb622}
.bs-field:focus-within{border-color:var(--blue);box-shadow:0 0 0 5px #2f6bff26,inset 0 3px 6px #7fa8e822;transform:translateY(-1px)}
.bs-field.pk:focus-within{border-color:var(--pink);box-shadow:0 0 0 5px #ff3d8b26}
.bs-field>svg{flex:none;width:26px;height:26px}
.bs-field input{flex:1;min-width:0;height:100%;border:0;background:transparent;outline:0;font:700 17px/1 "Nunito",system-ui,sans-serif;color:var(--navy)}
.bs-field input::placeholder{color:#8aa0c8;font-weight:700}
.bs-field.pk input::placeholder{color:#a99bb0}
.bs-eye{flex:none;border:0;background:transparent;padding:4px;margin:0;cursor:pointer;display:grid;place-items:center;border-radius:50%}
.bs-eye svg{width:28px;height:28px}
.bs-eye:focus-visible{outline:3px solid var(--blue)}
.bs-eye .slash{display:none}
.bs-eye.on .slash{display:block}

.bs-row{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:2px 4px 16px;font-weight:800;font-size:15.5px}
.bs-check{display:flex;align-items:center;gap:10px;cursor:pointer;color:var(--navy)}
.bs-check input{position:absolute;opacity:0;pointer-events:none}
.bs-check i{width:26px;height:26px;border-radius:8px;background:#fff;border:2.5px solid #2f6bff;display:grid;place-items:center;transition:.15s}
.bs-check input:checked+i{background:linear-gradient(180deg,#3d86ff,#1d4fe0)}
.bs-check input:checked+i::after{content:"";width:6px;height:12px;border:solid #fff;border-width:0 3px 3px 0;transform:rotate(45deg) translate(-1px,-1px)}
.bs-check input:focus-visible+i{box-shadow:0 0 0 4px #2f6bff33}
.bs-row a{color:#1d4fe0;text-decoration:none}
.bs-row a:hover{text-decoration:underline}

.bs-btn{
  position:relative;display:flex;align-items:center;justify-content:center;gap:12px;width:100%;height:66px;border:0;cursor:pointer;
  border-radius:40px;color:#fff;font:800 clamp(18px,5vw,22px)/1 "Baloo 2","Nunito",sans-serif;letter-spacing:.2px;
  text-shadow:0 2px 0 #0003;transition:transform .12s,box-shadow .12s;
}
.bs-btn.blue{background:linear-gradient(180deg,#3f8dff 0%,#2459f0 55%,#2a3fe0 100%);box-shadow:0 7px 0 #1a2fa8,0 14px 22px #2f4bff55,inset 0 3px 0 #ffffff55}
.bs-btn.pinkp{background:linear-gradient(90deg,#ff3d8b 0%,#d63df0 55%,#8f3dff 100%);box-shadow:0 7px 0 #8a1fb0,0 14px 22px #c23cff55,inset 0 3px 0 #ffffff55}
.bs-btn .circ{flex:none;width:38px;height:38px;border-radius:50%;display:grid;place-items:center;background:#ffffff30;box-shadow:inset 0 0 0 2px #ffffff55}
.bs-btn .circ svg{width:22px;height:22px}
.bs-btn:hover{transform:translateY(-2px)}
.bs-btn:active{transform:translateY(5px);box-shadow:0 2px 0 #0004}
.bs-btn:focus-visible{outline:4px solid #ffd23a;outline-offset:3px}

.bs-or{display:flex;align-items:center;gap:12px;margin:20px 6px 14px;color:var(--muted);font-weight:800;font-size:15px}
.bs-or::before,.bs-or::after{content:"";flex:1;height:2px;background:linear-gradient(90deg,transparent,#cfdcf3,transparent)}
.bs-alt{display:flex;align-items:center;justify-content:center;gap:10px;width:calc(100% - 28px);margin:0 auto;height:54px;
  border-radius:30px;text-decoration:none;font:800 19px/1 "Baloo 2","Nunito",sans-serif;
  background:linear-gradient(180deg,#f4efff,#e9e2ff);color:#6a2fd6;border:2.5px solid #fff;box-shadow:0 4px 0 #d3c6f5,0 8px 14px #8a5ff022;transition:transform .12s}
.bs-alt.sky{background:linear-gradient(180deg,#f2f8ff,#e4f0ff);color:#1d4fe0;box-shadow:0 4px 0 #c5d9f7,0 8px 14px #2f6bff1a}
.bs-alt svg{width:24px;height:24px}
.bs-alt:hover{transform:translateY(-2px)}
.bs-alt:focus-visible{outline:4px solid #ffd23a;outline-offset:3px}

.bs-icons{display:flex;justify-content:center;gap:clamp(14px,5vw,30px);margin-top:20px}
.bs-icons div{display:flex;flex-direction:column;align-items:center;gap:6px;font-weight:900;font-size:13px;color:var(--navy);letter-spacing:.3px}
.bs-icons b{width:clamp(52px,14vw,64px);height:clamp(52px,14vw,64px);border-radius:50%;display:grid;place-items:center;font-size:clamp(26px,7vw,32px);
  background:radial-gradient(circle at 35% 28%,#fff,#fff6d6);box-shadow:0 0 0 4px var(--rc,#ffd23a),0 6px 12px #0002}
.bs-note{margin:16px auto 0;max-width:420px;text-align:center;font-size:12.5px;font-weight:700;color:#3d567f;background:#ffffffaa;border-radius:20px;padding:8px 14px}

/* ---------- SÜSLER (referanstan kesilmiş görseller) ---------- */
.bs-deco{position:absolute;z-index:3;pointer-events:none;height:auto;filter:drop-shadow(0 6px 6px #0003)}
.d-pencil{left:-6px;top:40%;width:clamp(44px,12vw,64px)}
.d-star{right:-8px;bottom:30%;width:clamp(50px,14vw,72px)}
.d-books{left:-6px;bottom:-22px;width:clamp(82px,22vw,116px)}
.d-board{right:-6px;bottom:-22px;width:clamp(76px,20vw,108px)}
.d-pencil-r{right:-8px;bottom:-24px;width:clamp(48px,13vw,66px)}
@media (min-width:600px){.bs-cardwrap{margin-left:20px;margin-right:20px}}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

/* ---------- BİLGİSAYAR / GENİŞ EKRAN: sayfa ekranı doldursun ---------- */
@media (min-width:700px){
  body.bs-body{display:flex;align-items:center;justify-content:center}
  .bs-stage{margin:0 auto;padding:12px 0 36px}
}
@media (min-width:700px) and (min-height:820px){.bs-stage{zoom:1.15}}
@media (min-width:800px) and (min-height:900px){.bs-stage{zoom:1.3}}
@media (min-width:900px) and (min-height:1000px){.bs-stage{zoom:1.45}}
@media (min-width:1100px) and (min-height:1200px){.bs-stage{zoom:1.7}}
@media (min-width:1300px) and (min-height:1500px){.bs-stage{zoom:2}}

/* ---------- MASAÜSTÜ (yatay ekran): sayfa tüm ekranı kaplar, iki sütun ---------- */
.bs-showcase{display:none}
@media (min-width:1000px) and (min-aspect-ratio:5/4){
  body.bs-body{display:block}
  .bs-stage{zoom:1;max-width:none;width:100%;min-height:100vh;margin:0;padding:2vh 3vw 3vh;
    display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);
    grid-template-areas:"hero card" "show card" "note note";
    align-content:center;align-items:center;column-gap:2vw}
  .bs-hero{grid-area:hero;align-self:end;width:100%;max-width:none}
  .bs-showcase{grid-area:show;display:flex;align-items:flex-end;justify-content:center;gap:2.2vw;padding-top:1.5vh}
  .bs-showcase img{height:auto;filter:drop-shadow(0 8px 8px #0003)}
  .bs-showcase .s-books{width:clamp(150px,13vw,270px)}
  .bs-showcase .s-pencil{width:clamp(70px,6vw,125px)}
  .bs-showcase .s-star{width:clamp(80px,7vw,145px)}
  .bs-showcase .s-board{width:clamp(140px,12vw,245px)}
  .bs-cardwrap{grid-area:card;margin:0 auto;width:560px}
  .bs-note{grid-area:note;margin-top:2vh}
  .bs-deco{display:none}
}

/* ---------- ANA SAYFA BUTONU (küçük, 3D) ---------- */
.bs-home{position:absolute;top:12px;left:12px;z-index:10;display:inline-flex;align-items:center;gap:6px;height:36px;padding:0 14px 0 10px;
  border-radius:20px;text-decoration:none;color:#1d4fe0;font:800 14px/1 "Baloo 2","Nunito",sans-serif;
  background:linear-gradient(180deg,#ffffff 0%,#e3efff 100%);
  box-shadow:0 4px 0 #9db9ec,0 8px 12px #1a2f8a40,inset 0 2px 0 #fff;transition:transform .12s,box-shadow .12s}
.bs-home svg{width:18px;height:18px;flex:none}
.bs-home:hover{transform:translateY(-1px)}
.bs-home:active{transform:translateY(3px);box-shadow:0 1px 0 #9db9ec,0 3px 6px #1a2f8a40,inset 0 2px 0 #fff}
.bs-home:focus-visible{outline:3px solid #ffd23a;outline-offset:2px}
@media (min-width:1000px) and (min-aspect-ratio:5/4){.bs-home{top:18px;left:22px}}