@font-face{font-family:ooredoo;src:url('https://s.tykcdn.com/assets/isat/font/OOREDOO-REGULAR.TTF')}@font-face{font-family:ooredoo;src:url('https://s.tykcdn.com/assets/isat/font/OOREDOO-BOLD.TTF');font-weight:700}@font-face{font-family:ooredoo-heavy;src:url('https://s.tykcdn.com/assets/isat/font/OOREDOO-HEAVY.OTF');font-weight:900}
/* Lebar kolom = var(--width-dev). Semua ukuran di bawah ini memakai var(--u):
   1 unit = 1px pada desain asli (lebar 393px), sehingga komposisi tetap sama
   saat kolom melebar. --u / --dev-w / --gutter didefinisikan di site-shell.css. */
:root{--yellow:#ffd51b;--page-bg:#ffda64;--cream:rgba(255,255,255,.51);--ring:#ffe9a1;--ink:#080808;--red:#e7160c;--orange:#fa6203;--green:#13b95b;--purple:#7941ee}
*{box-sizing:border-box}html{scroll-behavior:smooth;background:#f3f3f3}body{margin:0;color:var(--ink);font-family:ooredoo,Arial,sans-serif;font-weight:700}
/* ---------- hero ---------- */
.hero{position:relative;height:calc(746 * var(--u));background:var(--yellow);overflow:hidden}
.hero-rays{position:absolute;z-index:0;left:0;top:0;width:100%;height:calc(705 * var(--u))}
.hero-pattern{position:absolute;z-index:1;top:0;left:0;width:100%;height:calc(705 * var(--u))}
.brand{position:absolute;z-index:2;top:calc(32 * var(--u));left:50%;width:calc(150 * var(--u));height:calc(88 * var(--u));object-fit:contain;transform:translateX(-50%)}
.greeting{position:absolute;z-index:2;top:calc(133 * var(--u));left:0;width:100%;margin:0;text-align:center;font-family:ooredoo-heavy,ooredoo,sans-serif;font-weight:900;font-size:calc(20 * var(--u));line-height:1.2}
.dot{position:absolute;z-index:2;border-radius:50%;border:calc(6 * var(--u)) solid var(--ring);background:radial-gradient(circle closest-side,#ff7601,#ea260c)}
.dot-a{right:calc(30 * var(--u));top:calc(151 * var(--u));width:calc(57 * var(--u));height:calc(57 * var(--u))}
.dot-b{left:calc(14 * var(--u));top:calc(347 * var(--u));width:calc(49 * var(--u));height:calc(49 * var(--u))}
.dot-c{left:calc(45 * var(--u));top:calc(179 * var(--u));width:calc(34 * var(--u));height:calc(34 * var(--u))}
.dot-d{right:calc(18 * var(--u));top:calc(360 * var(--u));width:calc(34 * var(--u));height:calc(34 * var(--u))}
@keyframes dotPulse{0%,100%{transform:scale(1)}50%{transform:scale(1.18)}}
.dot{animation:dotPulse 2.6s ease-in-out infinite;will-change:transform}
.dot-a{animation-delay:0s}
.dot-b{animation-delay:.45s}
.dot-c{animation-delay:.9s}
.dot-d{animation-delay:1.35s}
@media(prefers-reduced-motion:reduce){.dot{animation:none}}
.prize-orbit{position:absolute;z-index:2;top:calc(180 * var(--u));left:50%;width:calc(267 * var(--u));height:calc(267 * var(--u));border:calc(6 * var(--u)) solid var(--ring);border-radius:50%;transform:translateX(-50%);background:radial-gradient(circle closest-side,#fe7400,#e5130e)}
.orbit-line{position:absolute;left:50%;top:50%;border-radius:50%;transform:translate(-50%,-50%)}
.orbit-one{width:calc(201 * var(--u));height:calc(201 * var(--u));border:1px solid #f37f6d}
.orbit-two{width:calc(163 * var(--u));height:calc(163 * var(--u));border:1px solid #f2603a}
.prize-copy{position:absolute;inset:0;color:#fff;text-align:center}
.prize-copy small{position:absolute;left:0;right:0;top:calc(79 * var(--u));font-size:calc(16 * var(--u));line-height:1}
.prize-copy strong{position:absolute;left:0;right:0;top:calc(96 * var(--u));font-family:ooredoo-heavy,ooredoo,sans-serif;font-weight:900;font-size:calc(63 * var(--u));line-height:1;color:#fff7df;text-shadow:0 calc(5 * var(--u)) 0 #792303;-webkit-text-stroke:calc(1 * var(--u)) #fff}
.hero-wave{position:absolute;z-index:3;left:0;top:calc(371 * var(--u));width:100%;height:calc(312 * var(--u));object-fit:fill}
.hero:after{content:"";position:absolute;z-index:3;left:0;right:0;top:calc(682 * var(--u));bottom:0;background:var(--page-bg)}
.hero-cta{position:absolute;z-index:4;top:calc(437 * var(--u));left:0;right:0;padding:0 var(--gutter);text-align:center}
.hero-cta h1{margin:0;color:#df180c;font-family:ooredoo-heavy,ooredoo,sans-serif;font-weight:900;font-size:calc(56 * var(--u));line-height:1}
.hero-cta>p{margin:calc(10 * var(--u)) 0 calc(14 * var(--u));font-family:ooredoo-heavy,ooredoo,sans-serif;font-weight:900;font-size:calc(20 * var(--u));line-height:1.2}
.play-now{display:flex;align-items:center;justify-content:center;width:calc(253 * var(--u));height:calc(64 * var(--u));margin:0 auto calc(31 * var(--u));border:calc(4 * var(--u)) solid #fff;border-radius:calc(34 * var(--u));background:linear-gradient(#ee100e,#d90008);color:#fff;text-decoration:none;font-family:ooredoo,sans-serif;font-weight:700;font-size:calc(20 * var(--u));box-shadow:0 calc(3 * var(--u)) 0 #7f6f38}
.playstore{height:calc(74 * var(--u));width:100%;border-radius:calc(19 * var(--u));background:#fff;display:flex;align-items:center;justify-content:space-between;padding:0 calc(16 * var(--u)) 0 calc(17 * var(--u));color:#153c34;text-decoration:none;box-shadow:0 calc(4 * var(--u)) calc(5 * var(--u)) #947b3338;text-align:left}
.playstore-lead{font-size:calc(15.5 * var(--u));line-height:1.2}
.store-badge{display:block;width:calc(146 * var(--u));height:calc(42 * var(--u));flex:none}
/* ---------- content ---------- */
.content{position:relative;background:var(--page-bg);padding:calc(18 * var(--u)) 0 calc(12 * var(--u));overflow:hidden}
.confetti{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;pointer-events:none}
.content-inner{position:relative;z-index:2}
.content h2{margin:0 0 calc(16 * var(--u));text-align:center;font-family:ooredoo-heavy,ooredoo,sans-serif;font-weight:900;font-size:calc(20 * var(--u))}
.content h3{margin:0 0 calc(12 * var(--u));text-align:center;font-family:ooredoo-heavy,ooredoo,sans-serif;font-weight:900;font-size:calc(16 * var(--u))}
.carousel{display:flex;gap:calc(8 * var(--u));width:100%;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;padding:0 calc(25 * var(--u)) calc(12 * var(--u));scroll-padding:0 calc(25 * var(--u))}
.carousel::-webkit-scrollbar{display:none}
.game-card{--accent:var(--orange);flex:0 0 calc(100% - 50 * var(--u));min-height:calc(279 * var(--u));border-radius:calc(15 * var(--u));background:var(--cream);overflow:hidden;scroll-snap-align:center;box-shadow:0 calc(8 * var(--u)) calc(13 * var(--u)) #a77d242c}
.game-card.green{--accent:var(--green)}.game-card.red{--accent:#ed2d32}.game-card.purple{--accent:var(--purple)}
.game-card header{height:calc(62 * var(--u));display:flex;align-items:center;background:var(--accent);color:#fff;padding:0 calc(16 * var(--u));gap:calc(10 * var(--u))}
.game-icon{width:calc(45 * var(--u));height:calc(45 * var(--u));border-radius:50%;background:#ffffff2b;display:flex;align-items:center;justify-content:center;flex:none}
.game-icon img{width:calc(24 * var(--u));height:calc(24 * var(--u));object-fit:contain}
.game-card header h3{margin:0;font-family:ooredoo-heavy,ooredoo,sans-serif;font-weight:900;font-size:calc(18 * var(--u));line-height:1}
.game-card header p{margin:calc(5 * var(--u)) 0 0;font-size:calc(12.1 * var(--u));line-height:1}
.rules{padding:calc(12 * var(--u)) calc(14 * var(--u)) calc(12 * var(--u)) calc(16 * var(--u))}
.rules h4{margin:0 0 calc(11 * var(--u));font-size:calc(13.6 * var(--u))}
.rules ol{counter-reset:item;list-style:none;margin:0;padding:0}
.rules li{counter-increment:item;position:relative;margin:0 0 calc(8 * var(--u));padding-left:calc(27 * var(--u));font-size:calc(11 * var(--u));line-height:1.3}
.rules li::marker{content:''}
.rules li:before{content:counter(item);position:absolute;left:0;top:0;width:calc(18 * var(--u));height:calc(18 * var(--u));border-radius:50%;background:var(--accent);color:#fff;display:flex;align-items:center;justify-content:center;font-size:calc(10 * var(--u))}
.how-to{padding:calc(17 * var(--u)) calc(25 * var(--u)) 0}
.how-to h2{margin-bottom:calc(16 * var(--u))}
.step{display:flex;align-items:flex-start;gap:calc(12 * var(--u));min-height:calc(56 * var(--u));margin-bottom:calc(8 * var(--u));padding:calc(8 * var(--u)) calc(16 * var(--u));border-radius:calc(15 * var(--u));background:rgba(255,255,255,.51);box-shadow:0 calc(6 * var(--u)) calc(10 * var(--u)) #a77d2433}
.step-icon{display:flex;align-items:center;justify-content:center;width:calc(32 * var(--u));height:calc(32 * var(--u));flex:none;border-radius:50%;background:#000;margin-top:calc(2 * var(--u))}
.step-icon img{width:calc(18 * var(--u));height:calc(18 * var(--u))}
.step p{margin:0;font-size:calc(13 * var(--u));line-height:1.55}
.step a,.help a{color:inherit;text-underline-offset:2px}
.info-links{display:flex;gap:calc(13 * var(--u));padding:calc(21 * var(--u)) calc(25 * var(--u)) 0}
.info-links a{height:calc(52 * var(--u));display:flex;align-items:center;justify-content:center;border:calc(3 * var(--u)) solid #ffedbc;border-radius:calc(29 * var(--u));background:#fff;color:#153c34;text-decoration:none;font-size:calc(16 * var(--u))}
.info-links-a{flex:1 1 auto;min-width:0}
.info-links-b{flex:0 0 calc(80 * var(--u))}
.help{margin:calc(11 * var(--u)) 0 0;text-align:center;font-size:calc(11.9 * var(--u))}
main>footer,.wrapper>footer{position:relative;min-height:calc(60 * var(--u));padding:calc(17 * var(--u)) var(--gutter) calc(14 * var(--u));background:#202020;color:#fff;text-align:center;font-family:ooredoo,Arial,sans-serif;font-size:calc(12.4 * var(--u));line-height:1.13;font-weight:400}

/* ================= halaman dalam (login, hapus akun, legal) ================= */
.wrapper{position:relative;min-height:100vh;display:flex;flex-direction:column;background:var(--page-bg) url('https://ne.tykcdn.com/assets/gabut/playstore/img/pattern_bg.svg') repeat-y top center;background-size:100% auto}
.topbar{position:relative;flex:none;height:calc(170 * var(--u));background:var(--yellow);overflow:hidden}
.topbar-rays{position:absolute;z-index:0;left:0;top:calc(-224 * var(--u));width:100%;height:calc(705 * var(--u))}
.topbar-pattern{position:absolute;z-index:1;left:0;top:calc(-70 * var(--u));width:100%;height:calc(705 * var(--u))}
.topbar .brand{top:calc(26 * var(--u))}
.topbar-wave{position:absolute;z-index:1;left:0;top:calc(104 * var(--u));width:100%;height:calc(312 * var(--u))}
.back{position:absolute;z-index:4;top:calc(22 * var(--u));left:calc(16 * var(--u));width:calc(36 * var(--u));height:calc(36 * var(--u));border-radius:50%;border:calc(2 * var(--u)) solid #fff;background:#ffffff73;display:flex;align-items:center;justify-content:center;color:var(--ink);text-decoration:none;font-family:ooredoo-heavy,ooredoo,sans-serif;font-weight:900;font-size:calc(17 * var(--u));line-height:1}
.page-body{position:relative;z-index:2;flex:1 1 auto;padding:calc(14 * var(--u)) var(--gutter) calc(30 * var(--u))}
.page-body h1{margin:0 0 calc(8 * var(--u));text-align:center;color:#df180c;font-family:ooredoo-heavy,ooredoo,sans-serif;font-weight:900;font-size:calc(28 * var(--u));line-height:1.1}
.page-body .lead{margin:0 0 calc(20 * var(--u));text-align:center;font-size:calc(14 * var(--u));line-height:1.45;font-weight:400}
.panel{padding:calc(18 * var(--u)) calc(16 * var(--u));border-radius:calc(15 * var(--u));background:rgba(255,255,255,.62);box-shadow:0 calc(6 * var(--u)) calc(10 * var(--u)) #a77d2433}
.panel+.panel{margin-top:calc(14 * var(--u))}
/* tombol */
.btn{display:flex;align-items:center;justify-content:center;width:100%;height:calc(58 * var(--u));border:0;border-radius:calc(31 * var(--u));text-decoration:none;font-family:ooredoo,sans-serif;font-weight:700;font-size:calc(18 * var(--u));cursor:pointer;-webkit-appearance:none}
.btn+.btn{margin-top:calc(12 * var(--u))}
.btn-pri{border:calc(4 * var(--u)) solid #fff;background:linear-gradient(#ee100e,#d90008);color:#fff;box-shadow:0 calc(3 * var(--u)) 0 #7f6f38}
.btn-pri:disabled{background:linear-gradient(#e8b0ae,#d8a09e);box-shadow:0 calc(3 * var(--u)) 0 #b6a88a;cursor:not-allowed}
.btn-sec{border:calc(3 * var(--u)) solid #ffedbc;background:#fff;color:#153c34}
/* input */
.field{display:block;margin:0 0 calc(18 * var(--u))}
.field>span{display:block;margin:0 0 calc(7 * var(--u));font-size:calc(13 * var(--u))}
.control{display:flex!important;align-items:center;gap:calc(8 * var(--u));height:calc(56 * var(--u));padding:0 calc(15 * var(--u));border:calc(3 * var(--u)) solid #ffedbc;border-radius:calc(16 * var(--u));background:#fff}
.control:focus-within{border-color:#ee100e}
.control .prefix{color:#153c34;font-size:calc(16 * var(--u))}
.control input{flex:1;min-width:0;border:0;outline:0;background:none;color:var(--ink);font-family:ooredoo,sans-serif;font-weight:700;font-size:calc(16 * var(--u));letter-spacing:.4px}
.control input::placeholder{color:#b7a98a;font-weight:400}
.hint{margin:calc(-8 * var(--u)) 0 calc(18 * var(--u));font-size:calc(12 * var(--u));line-height:1.4;font-weight:400;color:#8a6f2c}
.hint.error{color:#d90008;font-weight:700}
.fineprint{margin:calc(16 * var(--u)) 0 0;text-align:center;font-size:calc(12 * var(--u));line-height:1.5;font-weight:400}
.fineprint a,.legal a,.panel a{color:#c8130a;text-underline-offset:2px}
/* modal / popup */
.modal{position:fixed;inset:0;z-index:20;display:flex;align-items:center;justify-content:center;padding:calc(22 * var(--u));background:#00000094;opacity:0;visibility:hidden;pointer-events:none;transition:opacity .18s ease}
.modal.is-open{opacity:1;visibility:visible;pointer-events:auto}
.modal-card{position:relative;width:100%;max-width:calc(var(--dev-w) - 48 * var(--u));padding:calc(26 * var(--u)) calc(20 * var(--u)) calc(22 * var(--u));border-radius:calc(20 * var(--u));background:#fff;text-align:center;box-shadow:0 calc(14 * var(--u)) calc(28 * var(--u)) #00000040;transform:translateY(calc(14 * var(--u)));transition:transform .18s ease}
.modal.is-open .modal-card{transform:none}
.modal-card h2{margin:0 0 calc(6 * var(--u));font-family:ooredoo-heavy,ooredoo,sans-serif;font-weight:900;font-size:calc(21 * var(--u))}
.modal-card p{margin:0;font-size:calc(13.5 * var(--u));line-height:1.45;font-weight:400}
.modal-close{position:absolute;top:calc(12 * var(--u));right:calc(12 * var(--u));width:calc(30 * var(--u));height:calc(30 * var(--u));border:0;border-radius:50%;background:#ffedbc;color:var(--ink);font-family:ooredoo,sans-serif;font-weight:700;font-size:calc(16 * var(--u));line-height:1;cursor:pointer}
.otp{display:flex;justify-content:center;gap:calc(7 * var(--u));margin:calc(20 * var(--u)) 0 calc(14 * var(--u))}
.otp input{flex:1 1 calc(48 * var(--u));min-width:0;max-width:calc(66 * var(--u));height:calc(56 * var(--u));padding:0;text-align:center;border:calc(3 * var(--u)) solid #ffedbc;border-radius:calc(13 * var(--u));background:#fffaea;color:var(--ink);font-family:ooredoo-heavy,ooredoo,sans-serif;font-weight:900;font-size:calc(22 * var(--u));outline:0;-moz-appearance:textfield}
.otp input::-webkit-outer-spin-button,.otp input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.otp input:focus{border-color:#ee100e;background:#fff}
.resend{margin:0 0 calc(18 * var(--u));font-size:calc(12.5 * var(--u));font-weight:400}
.resend button{border:0;background:none;padding:0;color:#c8130a;font-family:ooredoo,sans-serif;font-weight:700;font-size:calc(12.5 * var(--u));text-decoration:underline;cursor:pointer}
.resend button:disabled{color:#9c8a63;text-decoration:none;cursor:default}
/* halaman legal */
.legal{font-weight:400;font-size:calc(13.5 * var(--u));line-height:1.55}
.legal h2{margin:calc(20 * var(--u)) 0 calc(8 * var(--u));font-family:ooredoo-heavy,ooredoo,sans-serif;font-weight:900;font-size:calc(16 * var(--u))}
.legal h3{margin:calc(20 * var(--u)) 0 calc(8 * var(--u));font-family:ooredoo-heavy,ooredoo,sans-serif;font-weight:900;font-size:calc(14.5 * var(--u))}
.legal h2:first-child{margin-top:0}
.legal p{margin:0 0 calc(10 * var(--u))}
.legal ol,.legal ul{margin:0;padding-left:calc(20 * var(--u))}
.legal li{margin:0 0 calc(10 * var(--u))}
.legal .updated{margin:0 0 calc(14 * var(--u));font-size:calc(12 * var(--u));color:#8a6f2c}
.tbl{margin:calc(12 * var(--u)) 0;overflow-x:auto}
.tbl-title{margin:0 0 calc(6 * var(--u));font-weight:700;font-size:calc(13.5 * var(--u))}
.legal table{width:100%;min-width:calc(270 * var(--u));border-collapse:collapse;font-size:calc(12 * var(--u))}
.legal th,.legal td{border:1px solid #eed79c;padding:calc(6 * var(--u)) calc(8 * var(--u));text-align:left;vertical-align:top}
.legal th{background:#ffe293;font-weight:700}
.legal td{background:#fffaea}
/* peringatan hapus akun */
.warn-icon{width:calc(64 * var(--u));height:calc(64 * var(--u));margin:0 auto calc(14 * var(--u));border-radius:50%;background:linear-gradient(#ee100e,#d90008);color:#fff;display:flex;align-items:center;justify-content:center;font-family:ooredoo-heavy,ooredoo,sans-serif;font-weight:900;font-size:calc(34 * var(--u));line-height:1}
.danger-text{margin:0;text-align:center;font-size:calc(14.5 * var(--u));line-height:1.5;font-weight:400}
.danger-text b{font-weight:700}
.danger-text+.danger-text{margin-top:calc(10 * var(--u))}
/* halaman info */
.info-hero{position:relative;background:var(--yellow);font-size:0}
.info-hero img{display:block;width:100%;height:auto}
.info-topbar{position:relative;z-index:4;display:flex;align-items:center;justify-content:space-between;height:calc(56 * var(--u));padding:0 calc(16 * var(--u));background:var(--yellow)}
.info-topbar .back{position:static;flex:none;background:#fffffff2;box-shadow:0 calc(3 * var(--u)) calc(6 * var(--u)) #a77d2440}
.logout-wrap{margin:calc(20 * var(--u)) 0 0;text-align:center}
.logout{color:var(--ink);font-family:ooredoo,sans-serif;font-weight:700;font-size:calc(15 * var(--u));text-decoration:underline;text-underline-offset:3px}
.logout-wrap+.help{margin-top:calc(30 * var(--u))}
.info-wave{position:relative;z-index:0;display:block;width:100%;height:calc(312 * var(--u));margin:calc(-4 * var(--u)) 0 calc(-308 * var(--u))}
.page-body.pad-top{padding-top:calc(34 * var(--u))}
.menu{display:block}
.menu .btn+.btn{margin-top:calc(12 * var(--u))}
.modal-card.long{max-width:calc(var(--dev-w) - 40 * var(--u));max-height:84vh;overflow-y:auto;padding:calc(22 * var(--u)) calc(18 * var(--u));text-align:left}
.modal-card.long h2{margin:0 0 calc(14 * var(--u));text-align:center}
.modal-card.long h3{margin:calc(16 * var(--u)) 0 calc(6 * var(--u));font-family:ooredoo-heavy,ooredoo,sans-serif;font-weight:900;font-size:calc(15 * var(--u))}
.cra+.cra{margin-top:calc(4 * var(--u))}
.ul-faq{margin:0;padding:0;list-style:none}
.ul-faq>li{margin:0 0 calc(14 * var(--u))}
.ul-faq ul{margin:calc(6 * var(--u)) 0 0;padding-left:calc(18 * var(--u))}
.faq-q{margin:0 0 calc(3 * var(--u));font-weight:700}

ol > li{list-style:decimal}
ol > li > ul > li{list-style:lower-alpha}
ol > li > ul > li ul li{list-style:disc}
ol > li ul li:last-child{margin-bottom:.5rem}
ol > li ul li:not(:last-child){margin-bottom:0}

.playturn{position:absolute;top:.5rem;right:.5rem;z-index:1;display:flex;align-items:center}
.playturn-txt{background:#fffaea;padding:.25rem .5rem .25rem .75rem;border-radius:12px 0 0 12px;margin-right:-.5rem;font-size:.85rem}
.playturn-ico{width:2rem;height:2rem;background:url('https://ne.tykcdn.com/assets/susun/playstore/img/ico_sisa.png') no-repeat center center/60%;background-color:#fffaea;border-radius:50%}