/* ===== beranda.css: tampilan hero baru (ungu gelap, doodle, kartu kaca, ilustrasi guru dan siswa). Hanya dimuat di index.php ===== */
.band{isolation:isolate;overflow:hidden;background:
    radial-gradient(60% 70% at 10% 88%,rgba(168,85,247,.40),transparent 70%),
    radial-gradient(55% 70% at 90% 78%,rgba(139,92,246,.45),transparent 70%),
    radial-gradient(45% 45% at 52% 0%,rgba(124,58,237,.50),transparent 72%),
    linear-gradient(135deg,#1c0946 0%,#31136b 48%,#46208f 100%)}
   .doodle{position:absolute;inset:0;z-index:0;pointer-events:none;overflow:hidden}
   .doodle .dd{position:absolute;inset:0;width:100%;height:100%}
   .doodle .grid{position:absolute;right:0;top:0;width:46%;height:62%;background-image:linear-gradient(rgba(255,255,255,.07) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.07) 1px,transparent 1px);background-size:46px 46px;-webkit-mask-image:radial-gradient(ellipse at 100% 0,#000 10%,transparent 70%);mask-image:radial-gradient(ellipse at 100% 0,#000 10%,transparent 70%)}
   .band .hero{position:relative;z-index:2}.band .side{z-index:1}
   /* header */
   .top nav .btn{background:linear-gradient(135deg,#fb923c,#ea580c);color:#fff;border-radius:99px;box-shadow:0 8px 20px rgba(234,88,12,.4)}
   .top nav .btn:hover{background:linear-gradient(135deg,#fdba74,#f97316);color:#fff}
   /* judul dan teks */
   .band h1 em{font-style:normal;color:#fbbf24}
   .band .lead{color:#efe7ff}
   .badge-g{display:inline-block;vertical-align:middle;background:#fbbf24;color:#3b1a78;font-weight:800;font-size:.78rem;letter-spacing:.07em;padding:.18em .85em;border-radius:99px}
   .cta-row{display:flex;align-items:center;flex-wrap:wrap;gap:1.3rem;margin:1.4rem 0 0}
   .band .btn.acc{background:linear-gradient(135deg,#fb923c,#ea580c);color:#fff;border-radius:14px;font-weight:800;padding:.7em 1.5em;box-shadow:0 12px 26px rgba(234,88,12,.45)}
   .band .btn.acc:hover{background:linear-gradient(135deg,#fdba74,#f97316);transform:translateY(-2px)}
   .band .lnk{color:#fff;font-weight:700;text-underline-offset:4px}
   /* kartu lembar ujian bertumpuk */
   .pwrap{position:relative;width:min(380px,100%);margin-top:2rem}
   .pwrap .paper{position:relative;z-index:1;margin-top:0;width:100%;filter:drop-shadow(0 16px 26px rgba(15,4,40,.4))}
   .pwrap::before,.pwrap::after{content:"";position:absolute;inset:7% 2% 1% 2%;border-radius:20px;background:rgba(255,255,255,.3)}
   .pwrap::before{transform:rotate(-4deg) translateY(-6px)}.pwrap::after{transform:rotate(3.5deg) translateY(-2px);background:rgba(255,255,255,.2)}
   /* kartu masuk ruang ujian: kaca buram */
   .band #masuk{background:rgba(255,255,255,.14);border:1.5px solid rgba(255,255,255,.4);border-radius:26px;padding:1.7rem;color:#fff;-webkit-backdrop-filter:blur(18px) saturate(1.3);backdrop-filter:blur(18px) saturate(1.3);box-shadow:0 26px 60px rgba(14,3,40,.5),inset 0 1px 0 rgba(255,255,255,.45)}
   .band #masuk h2{color:#fff;font-size:1.45rem;margin-bottom:.3em}.band #masuk label{color:#fff}
   .band #masuk input:not([type=hidden]){border:0;border-radius:12px;background-color:#fff;background-repeat:no-repeat;background-position:14px center;background-size:20px;padding-left:2.9rem;color:var(--ink);box-shadow:0 4px 12px rgba(20,5,50,.15)}
   .band #masuk input:not([type=hidden]):focus{box-shadow:0 0 0 4px rgba(251,191,36,.45)}
   .band #masuk input[name=code]{background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237c3aed' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><rect x='3' y='3' width='7' height='7' rx='1'/><rect x='14' y='3' width='7' height='7' rx='1'/><rect x='3' y='14' width='7' height='7' rx='1'/><path d='M14 14h3v3h-3zM20 14v.01M14 20h3M20 17v4'/></svg>")}
   .band #masuk input[name=name]{background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237c3aed' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='8' r='4'/><path d='M4 21c0-4.4 3.6-7 8-7s8 2.6 8 7'/></svg>")}
   .band #masuk input[name=cls]{background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237c3aed' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><rect x='3' y='5' width='18' height='16' rx='2'/><path d='M3 10h18M8 3v4M16 3v4'/></svg>")}
   .band #masuk .btn{background:linear-gradient(135deg,#7c3aed,#6d28d9);color:#fff;border-radius:12px;padding:.7em 1.6em;box-shadow:0 10px 22px rgba(76,29,149,.5)}
   .band #masuk .btn:hover{background:linear-gradient(135deg,#8b5cf6,#7c3aed)}
   .band #masuk .err{background:#fde8e6;color:var(--bad)}
   /* ilustrasi guru dan siswa */
   .side{bottom:64px}.sl{left:1vw}.sr{right:1vw}
   .band{--sw:clamp(260px,21vw,430px)}
   .scn .gl{animation:glp 3.4s ease-in-out infinite}@keyframes glp{50%{opacity:.6}}
   .scn .fl{animation:tbob 4.2s ease-in-out infinite}.scn .fl2{animation-delay:-2s}
   .scn .bar{transform-box:fill-box;transform-origin:50% 100%;animation:grow 5s ease-in-out infinite}.scn .bb2{animation-delay:.25s}.scn .bb3{animation-delay:.5s}.scn .bb4{animation-delay:.75s}
   @keyframes grow{0%{transform:scaleY(.12)}28%,86%{transform:scaleY(1)}100%{transform:scaleY(.12)}}
   .scn .ptr{transform-box:view-box;transform-origin:160px 246px;animation:ptrw 3.2s ease-in-out infinite}@keyframes ptrw{0%,100%{transform:rotate(-4deg)}50%{transform:rotate(6deg)}}
   .scn .mh2{transform-box:fill-box;transform-origin:50% 100%;animation:spin 8s linear infinite}
   .scn .bub2{animation-delay:-3.5s}
   .scn .c2k{fill:none;stroke:#0f766e;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:22;stroke-dashoffset:22;animation:chk2 6s ease-in-out infinite}.scn .c3k{animation-delay:1.2s}
   @keyframes chk2{0%,10%{stroke-dashoffset:22}25%,85%{stroke-dashoffset:0}100%{stroke-dashoffset:22}}
   @media(prefers-reduced-motion:reduce){.scn .c2k{stroke-dashoffset:0}.scn .bub{opacity:1}}
   @media(max-width:1439px){.band .hero{padding-top:7.5rem}}
   
   /* ===== Tampilan HP: lebih kecil, rapat, tidak ngeblok ===== */
   @media(max-width:760px){
    body{font-size:15px}
    .band .hero{padding-top:5.6rem;padding-bottom:1.2rem}
    .band h1{font-size:1.75rem;line-height:1.2}
    .band .lead{font-size:.95rem;line-height:1.55}
    .cta-row{gap:.8rem;margin-top:1rem}
    .band .btn.acc{padding:.6em 1.2em;font-size:.95rem}
    .pwrap{width:min(300px,86%);margin:1.2rem auto 0}
    .band #masuk{padding:1.1rem;border-radius:20px;margin-top:1.2rem}
    .band #masuk h2{font-size:1.2rem}
    .band #masuk input:not([type=hidden]){padding-top:.55em;padding-bottom:.55em}
    .band #masuk .btn{width:100%;padding:.65em 1em}
    .sky .in{padding:0 4vw}
    .ad{margin:1rem auto;min-height:70px}
    /* fitur: 2 kolom kecil */
    .f5{grid-template-columns:1fr 1fr!important;gap:.7rem;padding-bottom:.4rem}
    .f5 div{padding:.85rem .8rem;border-radius:20px!important;margin-top:0!important;box-shadow:0 6px 14px rgba(59,26,120,.08)}
    .f5 div:last-child{grid-column:1/-1}
    .f5 div:hover{transform:none}
    .f5 .ib{width:38px;height:38px;margin-bottom:.5rem}.f5 .ib svg{width:20px;height:20px}
    .f5 b{font-size:.9rem;line-height:1.25}.f5 span{font-size:.78rem;line-height:1.35}
    .sec h2.t{margin:1.6rem 0 .9rem;font-size:1.35rem}
    /* peran: digeser ke samping */
    .pg{display:flex!important;grid-template-columns:none;overflow-x:auto;scroll-snap-type:x mandatory;gap:.8rem;margin:0 -4vw;padding:.3rem 4vw 1rem;-webkit-overflow-scrolling:touch;scrollbar-width:none}
    .pg::-webkit-scrollbar{display:none}
    .pg>div{flex:0 0 74%;scroll-snap-align:center;padding:1.1rem 1rem;border-radius:24px!important;margin-top:0!important;gap:.5rem;box-shadow:0 10px 20px rgba(59,26,120,.14)}
    .pg h3{font-size:1.05rem}.pg p{font-size:.85rem;line-height:1.45}
    .pg .btn.wh{font-size:.82rem;padding:.45em 1em}
    .pg>div:hover{transform:none}
    /* alur dan contoh soal */
    .alur{gap:1.2rem}
    .tl li{padding-bottom:.9rem;padding-left:2.5rem}.tl b{font-size:.95rem}.tl p{font-size:.85rem;margin-top:.1em}
    .mock{border-radius:20px;transform:none}.mock .mb{padding:.9rem}.mock .o{padding:.4em .7em;font-size:.88rem}
    /* format dan ajakan */
    .fmt .card{padding:1rem}.fmt .card h2{font-size:1.15rem}.fmt li,.fmt p{font-size:.85rem}
    .fmt pre{font-size:.78rem;padding:.8rem;overflow-x:auto}
    .cta{border-radius:26px;padding:1.4rem;gap:.9rem}.cta h2{font-size:1.2rem}.cta p{font-size:.85rem}
    .foot{font-size:.88rem}
   }