/* DIGANTI NAMA 13 Agu 2026: dulu css/common.css. Isi dan urutan pemuatan TIDAK diubah sama sekali — hanya namanya. Catatan: sebagian besar isinya belum benar-benar komponen lintas halaman; pemilahannya menyusul. */ /* ============================================================ skorika.com — css/components.css ATURAN YANG DIPAKAI LEBIH DARI SATU HALAMAN, DITULIS SEKALI. 13 Agustus 2026. 349 aturan di bawah ini tadinya tersalin di berkas gaya tiap halaman. Sekarang satu tempat: satu perubahan berlaku di semua halaman yang memakainya, dan peramban mengunduh berkas ini sekali lalu memakainya ulang di seluruh situs. SYARAT MASUK — pakai lagi kalau menambah aturan ke sini: 1. Tertulis persis sama di lebih dari satu halaman. 2. Selektornya TIDAK cocok dengan elemen mana pun di halaman yang tadinya tidak punya aturan itu, jadi tidak ada halaman yang berubah gara-gara kebagian aturan baru. 3. Di berkas halaman asalnya tidak ada aturan sebelumnya dengan kekhususan sama yang menyentuh properti DAN elemen yang sama, supaya urutan menang-kalah tidak terbalik. Aturan seperti body, .wrap, .brand, .content, dan * TIDAK masuk: nilainya berbeda-beda antar halaman, jadi gagal syarat 2. Dimuat TEPAT SEBELUM berkas gaya halaman. ============================================================ */ .topbar /* Pengecualian yang disepakati, 12 Agu 2026. Badan halaman ini terang, tetapi logo duduk di batang atas yang gelap; logo hitam di sana kontrasnya 1,0:1 alias tidak terlihat. Karena itu halaman ini memakai kelas .logo-putih — warnanya diatur css/logo.css, bukan di sini. */ .brand-sm{font-size:22px;font-weight:900;text-decoration:none;display:flex;align-items:center;gap:9px;font-family:'Outfit',system-ui,-apple-system,'Segoe UI',sans-serif} .nav-in{display:flex;align-items:center;gap:clamp(14px,2vw,30px); height:68px;padding:0 clamp(16px,3vw,44px);max-width:1893px;margin:0 auto} .topbar .right{display:flex;align-items:center;gap:12px} .head-mid{position:absolute;left:50%;top:14px;transform:translateX(-50%);text-align:center;pointer-events:none} .top-in{display:flex;align-items:center;justify-content:space-between;gap:16px;height:74px} .head-mid .hm-quiz{font-size:clamp(20px,2.4vw,32px);font-weight:600;letter-spacing:-.02em;color:var(--pd-cream);max-width:44vw;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;margin-top:3px} .topbar .unm{color:#fff;font-size:13.5px;font-weight:800} .nav-links{display:flex;gap:24px;font-size:17px;font-weight:700;color:var(--cream)} body.stage .brand .dot-id{font-weight:900;font-family:'Outfit',system-ui,-apple-system,'Segoe UI',sans-serif} .top-nav{display:flex;align-items:center;gap:22px;font-size:16px;color:var(--cream-dim)} .topbar .lo{font-size:13px;font-weight:700;color:rgba(255,255,255,.45);background:none;border:none;cursor:pointer;font-family:inherit} .legal-page{padding:46px clamp(16px,3vw,44px) 0} .top-nav a:hover{color:var(--cream)} .tb-btn:hover{filter:brightness(.94);background:var(--pd-cream)} .topbar .lo:hover{color:#FFB4AB} .auth-say h1{font-size:clamp(34px,3.4vw,54px);font-weight:600;line-height:1.1; letter-spacing:-.02em;color:var(--cream);max-width:15ch} @media(max-width:640px){ .top-nav .hide-sm{display:none} } .legal-wrap{max-width:800px;margin:0 auto;background:#F3EFDA;border-radius:8px; padding:60px 64px 64px;color:#3B142A} .pill.pub{background:#D9F5EA;color:#14532d} .tb-btn:active{transform:none} .auth-say h1 mark{background:transparent;color:var(--pink)} .pill.dra{background:#E8F0E5;color:#E22A8C} .legal-wrap h1{font-size:40px;font-weight:700;letter-spacing:-.01em;line-height:1.15; margin:0 0 10px;color:#3B142A} .join{background:linear-gradient(135deg,#951D59,var(--pink));border-radius:18px;padding:22px;display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-bottom:26px} .legal-wrap .upd{font-size:20px;font-weight:400;margin:0} .btn-next:hover{background:var(--pd-pink);filter:brightness(1.06)} .eyebrow{display:inline-block;font-size:14px;letter-spacing:.14em;text-transform:uppercase; color:var(--peach);margin-bottom:18px} .grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(290px,1fr));gap:16px} .btn-next .cnt{background:rgba(0,0,0,.22);border-radius:var(--pd-r);padding:1px 9px;min-width:26px;text-align:center;font-size:14px} .legal-wrap .upd-date{font-size:16px;margin:16px 0 0} .join .t{color:#fff;font-weight:800;font-size:15px;flex:1;min-width:200px} .join .t small{display:block;font-size:12.5px;font-weight:600;color:rgba(255,255,255,.65);margin-top:3px} .legal-wrap h2{font-size:26px;font-weight:700;letter-spacing:-.01em;margin:42px 0 14px} .tb-btn.pulse{animation:sndPulse 1.1s ease-in-out infinite;border-color:rgba(251,191,36,.7)} .cc:hover{box-shadow:0 8px 26px rgba(149,29,89,.1)} .legal-wrap h3{font-size:20px;font-weight:700;margin:26px 0 8px} .join input{border:none;border-radius:12px;padding:12px 16px;font-size:16px;font-weight:700;font-family:'Space Grotesk',monospace;letter-spacing:3px;text-transform:uppercase;width:170px;outline:none} .arena{position:relative;z-index:5;height:calc(100vh - 86px); display:grid;grid-auto-flow:column;justify-content:center;align-content:center;align-items:end; gap:clamp(8px,3vw,42px);padding:0 14px} .chip b{display:block;font-size:22px;font-weight:900;line-height:1.15;color:var(--cream)} .ped{position:relative;display:flex;flex-direction:column;align-items:center;width:clamp(150px,22vw,250px); --pdD:38px;--pdAlas:34px } .legal-wrap p,.legal-wrap li{font-size:16px;line-height:1.75;color:#3B142A} .join button{border:none;border-radius:12px;padding:12px 22px;font-size:14px;font-weight:400;font-family:inherit;background:#FACC15;color:#0F172A;cursor:pointer;box-shadow:0 3px 0 #713F12} .sec h2{font-size:clamp(27px,4vw,38px);font-weight:900;letter-spacing:-.025em} .legal-wrap p{margin:0 0 14px} .ped .who{position:relative;z-index:3;display:flex;flex-direction:column;align-items:center;gap:8px; margin-bottom:calc(var(--pdD) / -2); opacity:0;transform:translateY(-46px) scale(.7)} .ped .ava{background:none;border:none;line-height:0} .cc{background:#fff;border:1px solid #F2E4EB;border-radius:16px;overflow:hidden;display:flex;flex-direction:column;transition:box-shadow .15s} .legal-wrap ul{padding-left:22px;margin:8px 0 16px} .legal-wrap li{margin-bottom:7px} .ped .who.show{animation:dropIn .55s cubic-bezier(.2,1.5,.4,1) forwards} .cc-cover{height:105px;background:linear-gradient(135deg,var(--pink),#F472B6);display:flex;align-items:center;justify-content:center;font-size:40px;color:#fff;background-size:cover;background-position:center} .ntag{background:var(--pd-cream);color:var(--pd-header);font-size:clamp(15px,1.7vw,20px); font-weight:700;padding:7px 16px;border-radius:var(--pd-r);box-shadow:none;max-width:220px; overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .legal-wrap a{color:#A04578} .pill-group{display:flex;gap:8px;flex-wrap:wrap} .tab .d{width:7px;height:7px;border-radius:50%;background:var(--header)} .legal-wrap a:hover{text-decoration:underline;text-underline-offset:3px} .score{background:var(--pd-peach);color:var(--pd-header);font-size:clamp(13px,1.4vw,16px); font-weight:800;border:none;padding:4px 14px;border-radius:var(--pd-r);letter-spacing:0} .cfg-row:last-child{border-bottom:none} .cc-bd{padding:15px 16px 16px;flex:1;display:flex;flex-direction:column;gap:9px} .legal-wrap code{font-size:15px} .cc-ti{font-size:15px;font-weight:800;color:var(--text);line-height:1.35} .spot{position:absolute;left:50%;bottom:-6px;transform:translateX(-50%);width:190%;height:230px;pointer-events:none;z-index:1;opacity:0;transition:opacity .5s; background:linear-gradient(180deg,rgba(243,239,218,.22),rgba(243,239,218,0) 80%); clip-path:polygon(41% 0,59% 0,100% 100%,0 100%);filter:blur(1px)} .form-input::placeholder{color:rgba(59,20,42,.42);font-weight:500} .cc-tr{font-size:12px;color:#6D7B6D;font-weight:700} .legal-wrap .toc{list-style:none;padding:0;margin:18px 0 8px} .ped.lit .spot{opacity:1;animation:spotSway 6s ease-in-out infinite} .tgl input{opacity:0;width:0;height:0} .legal-wrap .toc li{margin:0;line-height:30px} .pbar{height:9px;background:#BECABD;border-radius:999px;overflow:hidden} .ped .ava svg{filter:drop-shadow(0 14px 24px rgba(0,0,0,.5))} .form-input:focus{outline:none;border-color:var(--pink)} /* 14 Agu 2026 — podium "Panggung berundak" 3D (pilihan pemilik dari 5 opsi preview): tutup piringan 82% sebagai pijakan, tiang, lalu alas yang melebar di bawah. Warna medali per peringkat: emas (diambil dari peach merek), perak, perunggu — diatur lewat variabel --m-* di .p1/.p2/.p3. Kedalaman satu variabel --pdD, tinggi total per peringkat --pdH (nilai tinggi lama dipertahankan persis). */ .cyl{position:relative;z-index:2;width:100%; padding-bottom:calc(var(--pdAlas) - var(--pdD)*.575); filter:drop-shadow(0 22px 26px rgba(0,0,0,.36))} .legal-wrap .toc a{font-size:16px} .hint .link{color:#C11B62;font-weight:800;text-decoration:underline;text-underline-offset:3px} .pmeta{display:flex;justify-content:space-between;font-size:12px;font-weight:700;color:#3F4940} .crumb a:hover{color:var(--ink);text-decoration:underline} .cyl .top{position:relative;z-index:4;width:82%;margin:0 auto; height:calc(var(--pdD) * 1.22);border-radius:50%;border:none;box-shadow:none; background:radial-gradient(58% 52% at 50% 46%,rgba(255,255,255,.2) 96%,transparent 100%),var(--m-atas)} .ic-swap{display:inline-flex;align-items:center;justify-content:center; vertical-align:-3px;color:currentColor;margin-right:2px} .pw-wrap{position:relative} .foot-band{background:var(--cream);color:var(--header); padding:clamp(30px,5vh,58px) clamp(16px,3vw,44px) clamp(26px,4vh,48px)} .cyl .top::after{content:'';position:absolute;left:50%;top:50%; transform:translate(-50%,-50%); width:52%;height:calc(var(--pdD) * .5); border-radius:50%;pointer-events:none; /* 2026-08-09 rev2 — nilai dinaikkan setelah diuji di browser pada halaman hidup. Versi pertama (rgba(72,58,70,.32), blur 3px, 46%) posisinya sudah benar tapi praktis tidak terlihat: tutup juara 1 berwarna #FFE7C6 yang terang, jadi ungu-abu setipis itu hilang. Rona diubah ke cokelat hangat dan intinya dinaikkan ke .55. */ background:radial-gradient(ellipse at 50% 50%, rgba(90,58,40,.55) 0%, rgba(90,58,40,.34) 45%, rgba(90,58,40,.12) 72%, rgba(90,58,40,0) 100%); filter:blur(5px); opacity:0;transition:opacity .5s ease .3s} .foot-card{max-width:1120px;margin:0 auto;background:var(--plum);color:var(--cream); clip-path:polygon(0 3.4%,100% 0,100% 100%,0 100%); padding:clamp(40px,5vw,58px) clamp(22px,3.4vw,46px) clamp(22px,2.6vw,30px)} .ped .who.show ~ .cyl .top::after{opacity:1} .btn-go.done{background:var(--green);box-shadow:0 3px 0 var(--green-dark)} .pbar>div{height:100%;background:linear-gradient(90deg,var(--pink),#F472B6);border-radius:999px} .cyl .body{position:relative;z-index:3;width:82%;margin:calc(var(--pdD) * -.65) auto 0; border:none;display:flex;align-items:center;justify-content:center; height:max(var(--pdMin,44px), calc(var(--pdH) - var(--pdAlas) - var(--pdD)*.625)); background:linear-gradient(90deg,var(--m-sisi),var(--m-depan) 24%,var(--m-kilau) 50%,var(--m-depan) 76%,var(--m-sisi))} .cyl::after{content:'';display:block;position:relative;z-index:2; margin-top:calc(var(--pdD) * -.42);height:calc(var(--pdD) * 1.05); border-radius:50%;background:var(--m-alas)} .cyl::before{content:'';position:absolute;left:0;right:0;bottom:0;z-index:1;height:var(--pdAlas); background:var(--m-sisi); border-radius:0 0 50% 50% / 0 0 calc(var(--pdD)*.575) calc(var(--pdD)*.575)} @media(max-width:720px){ .legal-page{padding:22px 14px 0} } .rank{font-family:inherit;font-weight:900;font-style:normal;letter-spacing:-.02em;text-shadow:none} .pw-eye:hover{background:rgba(59,20,42,.07)} @media(max-width:720px){ .legal-wrap{padding:32px 22px 40px} } .pw-eye svg{width:20px;height:20px} .p1{--m-atas:#FFEBCB;--m-depan:#FFD9A6;--m-sisi:#D9AE74;--m-kilau:#FFF4DF;--m-alas:#EFC591} /* EMAS — dari peach merek */ .toast.show{display:block} @media(max-width:720px){ .legal-wrap h1{font-size:32px} .legal-wrap h2{font-size:22px} } .forgot{display:block;margin-top:12px;font-size:15px;font-weight:700;color:#C11B62; text-decoration:underline;text-underline-offset:3px} .p2{--m-atas:#F3F6F9;--m-depan:#D8DFE7;--m-sisi:#A6B1BD;--m-kilau:#FBFCFE;--m-alas:#C2CAD4} /* PERAK */ .link-row{margin-top:18px;text-align:center;font-size:16px;font-weight:600;color:var(--ink-soft)} .p3{--m-atas:#F1C9A2;--m-depan:#D2905C;--m-sisi:#A26840;--m-kilau:#F6D6B4;--m-alas:#BC7F4E} /* PERUNGGU */ .ribbon{background:var(--cream);color:var(--header)} .p1{--pdH:236px} .link-strong{display:block;margin-top:14px;text-align:center;font-size:15px;font-weight:800; color:#C11B62;text-decoration:underline;text-underline-offset:3px} .due{font-size:11.5px;font-weight:700;color:#713F12} .p2{--pdH:164px} @media(max-width:760px){ .ribbon-in{grid-template-columns:1fr} } .pill.done{background:#D9F5EA;color:#14532d} .pill.wait{background:#FEF08A;color:#713F12} .due.overdue{color:#BA1A1A} .p3{--pdH:116px;--pdMin:84px} .foot-note{margin-top:14px;text-align:center;font-size:13.5px;font-weight:600;color:var(--ink-soft)} .foot-note a{color:#C11B62;font-weight:700;text-decoration:underline;text-underline-offset:3px} .ribbon p{margin-top:14px;font-size:17px;color:rgba(59,20,42,.78);max-width:520px} .p1 .rank{font-size:clamp(38px,5.4vw,60px);color:var(--pd-header)} @media(max-width:960px){ .nav-in{height:58px} } .p2 .rank{font-size:clamp(30px,4.2vw,46px);color:var(--pd-header)} .ribbon .btn{background:var(--header);color:var(--cream);margin-top:22px} @media(max-width:960px){ .nav-links{display:none} } .alert.show{display:block} .p3 .rank{font-size:clamp(26px,3.6vw,40px);color:var(--pd-header)} .dl{display:grid;gap:16px;font-size:15px} .dl div{border-top:1px solid rgba(59,20,42,.14);padding-top:13px} .dl b{display:block;font-weight:700;margin-bottom:3px} @media(max-width:560px){ .foot-card{clip-path:polygon(0 2.2%,100% 0,100% 100%,0 100%)} } .dl span{color:rgba(59,20,42,.68)} .alert-success{background:#D8F0E2;color:#0B5B33} .foot-in{padding:44px 0 0;display:flex;flex-wrap:wrap;gap:34px;justify-content:space-between} .playbar{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:12px 16px;max-width:1180px;margin:0 auto;flex-wrap:wrap;position:relative;z-index:10} .ped.empty .cyl{opacity:.42} .chiprow{display:flex;align-items:center;gap:8px;min-width:0;flex-wrap:wrap} .stat-chip{display:inline-flex;align-items:center;gap:6px;background:rgba(0,0,0,.38);border:1px solid rgba(255,255,255,.15);border-radius:10px;padding:6px 12px;font-weight:800;font-size:13px;color:#fff;white-space:nowrap} .foot-col a:hover{color:var(--cream)} .arena .p2{order:1} .arena .p1{order:2} .stat-chip .num{font-family:var(--font-num)} .stat-chip.rank{color:#FEF08A;border-color:rgba(253,230,138,.4)} .arena .p3{order:3} .stat-chip.streak{background:linear-gradient(135deg,rgba(249,115,22,.35),rgba(236,72,153,.3));border-color:rgba(251,146,60,.55);display:none} @media(max-height:860px){ .cyl .top::after{width:45%} } .stat-chip.streak.pop{animation:chipPop .35s ease} @media(max-height:860px){ .ped{transform:scale(.78);transform-origin:bottom center} /* proporsi podium 3D dijaga, cukup diskalakan */ } @media(max-width:960px){ .auth-say h1{font-size:clamp(28px,7vw,40px);max-width:none} } .score-chip{background:rgba(0,0,0,.38);border:1px solid rgba(255,255,255,.15);border-radius:10px;padding:6px 12px;font-weight:800;font-size:13px;display:inline-flex;align-items:center;gap:7px} @media(max-height:860px){ } .score-chip .num{color:var(--gold);font-size:16px;font-family:var(--font-num)} @media(max-height:860px){ } .timer-pill{display:flex;align-items:center;gap:8px;background:rgba(0,0,0,.38);border:1px solid rgba(255,255,255,.15);border-radius:999px;padding:6px 14px;font-weight:800} @media(max-height:860px){ .ped .ava svg{transform:scale(.72);transform-origin:bottom center} } .opt-box{display:flex;flex-direction:column;gap:10px;margin-bottom:22px} @media(max-height:860px){ .arena{height:calc(100vh - 78px)} } .timer-num{font-family:var(--font-num);font-size:20px;font-weight:700;min-width:26px;text-align:center} .opt{display:flex;gap:12px;align-items:flex-start;padding:14px;cursor:pointer; border:1px solid var(--ink-line);border-radius:var(--r);background:#FFFDF6} .timer-pill.timer-urgent{background:var(--a-red);color:#fff;box-shadow:0 3px 0 var(--a-red-d);animation:shake .5s infinite} @media(max-height:720px){ .cyl .top::after{width:36%} } .opt input{position:absolute;opacity:0;width:0;height:0} @media(max-height:720px){ .ped{transform:scale(.6);transform-origin:bottom center} } .menu-btn{width:38px;height:36px;border-radius:10px;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.18);color:#fff;font-size:16px;cursor:pointer} .mark-r{width:18px;height:18px;border-radius:50%;border:2px solid var(--ink-line); flex-shrink:0;margin-top:3px;position:relative;background:#fff} .menu-btn:hover{background:rgba(255,255,255,.18)} @media(max-height:720px){ } .opt input:checked + .mark-r{border-color:var(--pink)} @media(max-height:720px){ } .prog-track{height:6px;background:rgba(255,255,255,.1);border-radius:4px;overflow:hidden;max-width:1180px;margin:0 auto 4px} .opt input:checked + .mark-r::after{content:'';position:absolute;inset:3px; border-radius:50%;background:var(--pink)} @media(max-height:720px){ .ped .ava svg{transform:scale(.7);transform-origin:bottom center} } .prog-fill{height:100%;background:linear-gradient(90deg,var(--brand),var(--pink));border-radius:4px;transition:width .4s} .opt:has(input:checked){border-color:var(--pink);background:#FFF6FB} @media(max-height:720px){ } .opt .txt{display:block} .play-grid{display:grid;grid-template-columns:1fr;gap:16px;align-items:start} @media(max-height:720px){ } .opt .t{display:block;font-size:15px;font-weight:800;color:var(--header)} .play-grid.with-aside{grid-template-columns:minmax(0,1fr) 330px} @media(max-height:720px){ .ped .who{gap:4px} } .opt .d{display:block;font-size:14px;font-weight:600;color:var(--ink-soft)} @media(max-width:920px){ .play-grid.with-aside{grid-template-columns:1fr} } @media(max-width:640px){ .cyl .top::after{width:43%} } .panel{display:none} @media(max-width:640px){ .ped{transform:scale(.66);transform-origin:bottom center} } .panel.on{display:block} #main-col{display:flex;flex-direction:column;justify-content:center;min-height:calc(100vh - 200px)} @media(max-width:640px){ } .callout{border:1px solid var(--ink-line);border-radius:var(--r);background:#FFFDF6; padding:16px 18px;margin-bottom:14px} @media(max-width:920px){ #main-col{min-height:calc(100vh - 230px)} } @media(max-width:640px){ } .callout p{font-size:15px;font-weight:800;color:var(--header);margin-bottom:8px} .q-counter{display:inline-block;background:rgba(0,0,0,.55);border:1px solid rgba(255,255,255,.14);color:#fff;font-family:var(--font-num);font-weight:700;font-size:13px;border-radius:999px;padding:4px 16px;letter-spacing:.06em} @media(max-width:640px){ .ped .ava svg{transform:scale(.76);transform-origin:bottom center} } .callout ol{margin:0;padding-left:20px} .q-card{background:rgba(0,0,0,.35);border:1px solid rgba(255,255,255,.10);border-radius:16px;padding:22px 26px;margin:10px 0 20px;text-align:center;backdrop-filter:blur(3px)} @media(max-width:640px){ .head-mid .hm-quiz{max-width:56vw} } .callout li{font-size:14px;font-weight:600;color:var(--ink-soft);margin-bottom:6px} .q-img{max-width:100%;max-height:280px;border-radius:14px;margin:0 auto 16px;display:block;background:#fff} /* ---- SOAL BERGAMBAR: gambar kiri, teks kanan (16 Agu 2026) ---------- Sebelumnya gambar ditumpuk DI ATAS teks dan dibatasi 280px, sehingga separuh lebar kartu menganggur sementara gambarnya sendiri kecil. Kelas .has-img dipasang dari JS hanya ketika soal benar-benar punya gambar, jadi soal berteks saja tidak tersentuh sama sekali. Gambar soal bisa diklik untuk diperbesar. Ini AMAN di sini — berbeda dengan kartu pilihan jawaban, mengklik gambar soal tidak mengirim jawaban apa pun. */ .q-card.has-img{display:flex;align-items:center;gap:24px;text-align:left} .q-card.has-img .q-img{flex:0 0 46%;max-width:46%;max-height:48vh;margin:0;cursor:zoom-in} .q-card.has-img .q-text{flex:1 1 0;min-width:0} @media(max-width:820px){ .q-card.has-img{flex-direction:column;text-align:center;gap:14px} .q-card.has-img .q-img{flex:none;max-width:100%;max-height:32vh} } /* Lapisan perbesar gambar soal. */ .qz-ov{position:fixed;inset:0;z-index:9500;display:none;align-items:center;justify-content:center; background:rgba(0,0,0,.88);padding:20px;cursor:zoom-out} .qz-ov.show{display:flex} /* Lebar sesungguhnya disetel JS (dua kali ukuran asli, dijepit ke layar) — lihat ukurQImgZoom() di play.php / waiting.php. Dua batas di bawah hanya jaring pengaman bila JS gagal: tanpanya gambar tampil sebesar aslinya. object-fit:contain menjaga perbandingan sisi seandainya max-height sampai memangkas tinggi padahal lebarnya sudah disetel — tanpa itu gambarnya gepeng. */ .qz-ov img{max-width:96vw;max-height:90vh;object-fit:contain;border-radius:12px;background:#fff;box-shadow:0 20px 60px rgba(0,0,0,.6)} .qz-hint{position:absolute;bottom:16px;left:0;right:0;text-align:center;pointer-events:none; color:rgba(255,255,255,.62);font-size:13px;font-weight:600} .ribbons{position:fixed;inset:0;z-index:1;pointer-events:none;overflow:hidden} .emoji-float-layer{position:fixed;inset:0;z-index:210;pointer-events:none;overflow:hidden} .ribbons svg{position:absolute;opacity:.9;animation:rbSway 7s ease-in-out infinite} .q-text.multiline{text-align:left} /* ---- FORMAT KAYA: soal, pilihan jawaban, explanation (16 Agu 2026) --- Editor sudah bisa menghasilkan tebal, miring, garis bawah, warna, ukuran, dan daftar berbutir. Yang belum ada aturannya di sisi peserta: tanpa baris di bawah,