:root{--ink:#181715;--cream:#f4eee5;--brown:#68452b;--task:#2d2926;--soft:#fffaf3}
*{box-sizing:border-box}html,body{margin:0;min-height:100%;font-family:Arial,Helvetica,sans-serif;color:var(--ink)}body{background:#221f1d;overflow:hidden}a{text-decoration:none;color:inherit}svg{width:1em;height:1em;display:block}
.desktop-scene{display:flex;min-height:100vh;align-items:center;justify-content:center;background:#1d1b19}.scene-viewport{position:relative;overflow:hidden}.scene-stage{position:absolute;left:0;top:0;width:1619px;height:971px;transform-origin:top left;background-size:100% 100%;background-repeat:no-repeat;overflow:hidden}
.scene-menu{position:absolute;z-index:5;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;transition:transform .22s ease,filter .22s ease}.scene-menu__icon{display:grid;place-items:center;color:white;background:var(--menu-color);box-shadow:0 8px 14px rgba(0,0,0,.28),inset 0 1px 1px rgba(255,255,255,.32);border:1px solid rgba(0,0,0,.12);opacity:0}.scene-menu__icon svg{width:52%;height:52%;stroke-width:2.2}.scene-menu__label{font-size:14px;line-height:1.05;font-weight:700;text-align:center;color:#111;text-shadow:0 1px 2px rgba(255,255,255,.95);white-space:nowrap;background:rgba(236,231,223,.76);padding:1px 4px;border-radius:3px;opacity:0}
.scene-menu--shelf .scene-menu__icon{width:78px;height:78px;border-radius:14px}.scene-menu--shelf .scene-menu__label{margin-top:5px}.scene-menu--bottom .scene-menu__icon{width:72px;height:61px;border-radius:11px}.scene-menu--bottom .scene-menu__label{margin-top:8px;color:#fff;text-shadow:0 1px 2px #000;background:rgba(42,38,35,.75);font-size:13px}.scene-menu:hover{z-index:15}.scene-menu:focus-visible{outline:3px solid rgba(255,255,255,.9);outline-offset:2px;border-radius:16px}.scene-menu.is-active{filter:none}
.login-hotspot{position:absolute;z-index:20;right:35px;bottom:27px;width:38px;height:38px;border:0;background:transparent;color:#fff;display:grid;place-items:center;cursor:pointer}.login-hotspot svg{width:25px;height:25px;opacity:0}.login-hotspot:hover{background:rgba(255,255,255,.12);border-radius:7px}.system-clock{display:none}.system-clock strong{font-size:14px}.system-clock span{font-size:12px;margin-top:5px}.login-popover{position:absolute;z-index:50;right:28px;bottom:92px;width:210px;padding:10px;background:rgba(35,32,29,.96);border:1px solid rgba(255,255,255,.18);border-radius:12px;box-shadow:0 18px 48px rgba(0,0,0,.35)}.login-popover a{display:flex;gap:10px;align-items:center;color:#fff;padding:11px;border-radius:8px;font-weight:700}.login-popover a:hover{background:rgba(255,255,255,.1)}.login-popover svg{width:20px;height:20px}
.board-content{position:absolute;z-index:12;left:889px;top:169px;width:597px;height:264px;padding:23px 25px 18px;background:rgba(252,245,221,.93);border:1px solid rgba(85,55,26,.32);box-shadow:0 6px 18px rgba(77,45,18,.24);transform:rotate(-.25deg);overflow:hidden}.board-content header{display:flex;gap:14px;align-items:flex-start;border-bottom:1px dashed rgba(94,58,24,.35);padding-bottom:10px}.board-content header>span{width:35px;height:35px;border-radius:50%;display:grid;place-items:center;background:#c8432f;color:#fff;box-shadow:0 3px 8px rgba(0,0,0,.2)}.board-content header small{font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:#76573a}.board-content h1{font-family:Georgia,serif;font-size:28px;margin:1px 0 2px;color:#3c2a18}.board-content header p{margin:0;font-size:12px;color:#6e5238}.board-scroll{height:155px;overflow:auto;padding:12px 6px 8px 49px;scrollbar-width:thin}.page-copy{font-size:13px;line-height:1.55;color:#3d2f23}.page-image{max-width:100%;border-radius:10px;object-fit:cover}.board-back{position:absolute;right:18px;top:15px;display:flex;gap:6px;align-items:center;font-size:11px;font-weight:700;color:#6f4a28}.board-back svg{width:15px}.mini-list{display:grid;gap:8px;margin-top:10px}.mini-list article{padding:8px;background:rgba(255,255,255,.53);border-radius:7px}.mini-list b{font-size:12px}.mini-list small{display:block;color:#8a6748;font-size:10px;margin-top:2px}.mini-list p{font-size:11px;margin:4px 0 0}.mini-gallery{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}.mini-gallery figure{margin:0}.mini-gallery img{width:100%;height:65px;object-fit:cover;border-radius:6px}.mini-gallery figcaption{font-size:10px;margin-top:3px}.contact-actions{display:flex;gap:8px;margin-top:12px}.contact-actions a{display:inline-flex;align-items:center;gap:6px;background:#3b7f3b;color:#fff;padding:8px 12px;border-radius:8px;font-weight:700;font-size:12px}.contact-actions a:nth-child(2){background:#2d73b9}
.mobile-site{display:none}.auth-shell{min-height:100vh;display:grid;place-items:center;background-size:cover;background-position:center;position:relative;padding:28px;overflow:auto}.auth-shell:before{content:"";position:absolute;inset:0;background:rgba(35,30,26,.46);backdrop-filter:blur(2px)}.auth-card{position:relative;z-index:1;width:min(440px,100%);padding:35px;border-radius:28px;background:rgba(255,250,243,.96);box-shadow:0 30px 90px rgba(0,0,0,.38);border:1px solid rgba(255,255,255,.7)}.auth-card>small{display:block;text-align:center;letter-spacing:.15em;color:#a7662b;font-size:11px;font-weight:800}.auth-card h1{text-align:center;font-family:Georgia,serif;font-size:34px;margin:8px 0 8px}.auth-card>p{text-align:center;color:#6f665e;line-height:1.5;margin:0 0 22px}.auth-icon{width:72px;height:72px;border-radius:22px;background:#2e73bf;color:white;display:grid;place-items:center;margin:0 auto 18px;box-shadow:0 13px 25px rgba(46,115,191,.28)}.user-card .auth-icon{background:#3c8b43}.auth-icon svg{width:34px;height:34px}.auth-back{display:flex;align-items:center;gap:6px;font-size:13px;font-weight:700;color:#5d554e;margin-bottom:20px}.auth-card form{display:grid;gap:15px}.auth-card label{font-size:13px;font-weight:800;color:#4c443d}.input-wrap{display:flex;align-items:center;gap:10px;background:#f1ebe3;border:1px solid #dfd4c8;border-radius:12px;padding:0 13px;margin-top:7px}.input-wrap svg{width:19px;height:19px;color:#7a6e63}.input-wrap input{width:100%;border:0;background:transparent;padding:14px 0;outline:0;font-size:15px}.auth-card button{border:0;border-radius:12px;background:#2d2926;color:white;padding:14px;display:flex;justify-content:center;align-items:center;gap:9px;font-weight:800;font-size:15px;cursor:pointer}.auth-card button:hover{transform:translateY(-2px);box-shadow:0 10px 22px rgba(0,0,0,.18)}.demo-account{display:flex;justify-content:space-between;margin-top:18px;padding:12px 14px;background:#ede4d7;border-radius:11px;font-size:13px}.switch-auth{display:block;text-align:center;margin-top:16px;color:#2d70b7;font-weight:700;font-size:13px}.alert{padding:12px;border-radius:10px;margin-bottom:14px}.alert.error{background:#ffe4e4;color:#9d2222}
@media(max-width:899px){body{overflow:auto;background:#f4eee5}.desktop-scene{display:none}.mobile-site{display:block;min-height:100vh;background:#f4eee5}.mobile-hero{min-height:430px;background-size:cover;background-position:center;position:relative;padding:20px}.mobile-hero:before,.mobile-page-head:before{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(30,27,24,.38),rgba(30,27,24,.72))}.mobile-topbar,.mobile-welcome,.mobile-page-head>*{position:relative;z-index:1}.mobile-topbar{display:flex;justify-content:space-between;align-items:center;color:white}.mobile-topbar small{font-size:11px;letter-spacing:.12em}.mobile-topbar h1{font-size:18px;margin:3px 0}.mobile-topbar button{width:44px;height:44px;border-radius:13px;border:1px solid rgba(255,255,255,.35);background:rgba(0,0,0,.18);color:white;display:grid;place-items:center}.mobile-welcome{position:absolute;left:20px;right:20px;bottom:28px;color:white}.mobile-badge{display:inline-flex;align-items:center;gap:6px;padding:7px 10px;background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.25);border-radius:999px;font-size:12px;font-weight:800}.mobile-welcome h2{font-family:Georgia,serif;font-size:38px;line-height:1.06;margin:14px 0 8px}.mobile-welcome p{font-size:15px;line-height:1.5;margin:0;max-width:550px}.mobile-actions{display:flex;gap:10px;margin-top:18px}.mobile-actions a{display:flex;align-items:center;gap:8px;padding:12px 15px;border-radius:12px;background:#fff;color:#24211f;font-weight:800;font-size:13px}.mobile-actions a.ghost{background:rgba(255,255,255,.13);color:white;border:1px solid rgba(255,255,255,.3)}.mobile-content{padding:24px 18px 32px}.mobile-content.compact{padding-top:10px}.section-heading{display:flex;justify-content:space-between;align-items:center;margin-bottom:15px}.section-heading small{color:#9d6c3e;font-weight:800;letter-spacing:.12em}.section-heading h2{margin:4px 0 0;font-family:Georgia,serif;font-size:25px}.section-heading>svg{width:28px;height:28px;color:#9c764f}.mobile-menu-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}.mobile-menu-card{min-height:112px;background:#fff;border-radius:18px;padding:14px 8px 11px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;text-align:center;box-shadow:0 10px 24px rgba(77,57,37,.1);transition:transform .2s}.mobile-menu-card:active{transform:scale(.97)}.mobile-menu-card span{width:52px;height:52px;border-radius:14px;background:var(--menu-color);color:white;display:grid;place-items:center;box-shadow:0 7px 13px color-mix(in srgb,var(--menu-color),transparent 65%)}.mobile-menu-card span svg{width:27px;height:27px}.mobile-menu-card b{font-size:12px;line-height:1.2}.mobile-footer{background:#2e2a27;color:#fff;padding:18px;display:flex;justify-content:space-between;align-items:center;font-size:12px}.mobile-footer a{font-weight:800}.mobile-page-head{min-height:270px;background-size:cover;background-position:center;position:relative;padding:24px 20px;color:white;display:flex;gap:16px;align-items:flex-end}.mobile-page-head>a{width:43px;height:43px;border-radius:13px;display:grid;place-items:center;background:rgba(0,0,0,.3);border:1px solid rgba(255,255,255,.3);align-self:flex-start}.mobile-page-head h1{font-family:Georgia,serif;font-size:34px;margin:6px 0}.mobile-page-head p{margin:0;line-height:1.45}.mobile-article{padding:24px 20px;background:#fff}.mobile-article>.page-copy{font-size:15px;line-height:1.7}.mobile-article>.page-image{margin-bottom:18px}.news-grid{display:grid;gap:12px;margin-top:20px}.news-grid article{padding:17px;background:#f4eee5;border-radius:14px}.news-grid small{color:#9d6c3e}.news-grid h3{margin:7px 0}.news-grid p{margin:0;line-height:1.5}.mobile-gallery{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;margin-top:18px}.mobile-gallery figure{margin:0;background:#f3ede5;padding:8px;border-radius:13px}.mobile-gallery img{width:100%;height:130px;object-fit:cover;border-radius:9px}.mobile-gallery figcaption{font-size:12px;font-weight:800;padding:8px 4px 4px}.mobile-contact{display:flex;flex-wrap:wrap;gap:10px;margin-top:20px}.mobile-contact a{display:flex;align-items:center;gap:8px;padding:12px 15px;border-radius:12px;background:#377f3d;color:white;font-weight:800}.auth-shell{padding:18px}.auth-card{padding:26px 20px;border-radius:22px}.auth-card h1{font-size:29px}}
@media(max-width:420px){.mobile-menu-grid{grid-template-columns:repeat(2,1fr)}.mobile-welcome h2{font-size:34px}}

/* Animasi ikon dan bolpoin */
.lucide-animated{transform-origin:center;animation:lucideAlive 3.2s ease-in-out infinite;animation-delay:var(--icon-delay,0s);will-change:transform,filter}
a:hover .lucide-animated,button:hover .lucide-animated{animation:lucideHover .55s ease both}
.scene-menu__icon{opacity:1;overflow:hidden;animation:menuGlow 3.6s ease-in-out infinite;animation-delay:var(--menu-delay,0s)}
.scene-menu__label{opacity:1;background:rgba(239,235,228,.92)}
.scene-menu__icon .lucide-animated{animation-name:menuGlyphAlive;animation-duration:2.7s;animation-delay:var(--menu-delay,0s)}
.scene-menu:hover .scene-menu__icon{filter:brightness(1.12) saturate(1.12);box-shadow:0 10px 22px rgba(0,0,0,.34),0 0 0 4px rgba(255,255,255,.28),inset 0 1px 1px rgba(255,255,255,.45)}
.scene-menu.is-active .scene-menu__icon{box-shadow:0 10px 22px rgba(0,0,0,.34),0 0 0 4px rgba(255,255,255,.72),0 0 24px color-mix(in srgb,var(--menu-color),white 30%)}
.mobile-menu-card span{overflow:hidden;animation:menuGlow 3.6s ease-in-out infinite;animation-delay:var(--menu-delay,0s)}
.mobile-menu-card .lucide-animated{animation-name:menuGlyphAlive;animation-duration:2.7s;animation-delay:var(--menu-delay,0s)}

.board-writing{position:absolute;z-index:11;left:870px;top:145px;width:650px;height:320px;pointer-events:none;overflow:hidden;filter:drop-shadow(0 7px 7px rgba(42,22,6,.16))}
.writing-svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.ink-line,.ink-shadow{fill:none;stroke-linecap:round;stroke-linejoin:round;path-length:1;stroke-dasharray:1050;stroke-dashoffset:1050}
.ink-shadow{stroke:rgba(17,38,69,.24);stroke-width:8;transform:translateY(3px);filter:blur(2px);animation:inkDraw 6.4s linear infinite}
.ink-line{stroke:#154f99;stroke-width:5.2;filter:drop-shadow(0 1px 0 rgba(255,255,255,.25));animation:inkDraw 6.4s linear infinite}
.writing-pen{position:absolute;left:0;top:0;width:178px;height:38px;offset-path:path("M78 186 C116 145 142 211 179 169 C203 143 219 209 255 174 C278 151 299 201 332 177 C357 159 379 198 411 176 C446 151 469 198 510 174 C531 162 548 164 568 171");offset-distance:0%;offset-rotate:auto 0deg;offset-anchor:8px 19px;animation:penTravel 6.4s linear infinite;will-change:offset-distance,opacity,filter}
.pen-tip{position:absolute;left:0;top:12px;width:26px;height:14px;background:linear-gradient(90deg,#2b2e33 0 9%,#b9bec5 10% 69%,#f7f8fa 70% 100%);clip-path:polygon(0 50%,100% 0,100% 100%);filter:drop-shadow(0 2px 1px rgba(0,0,0,.34))}
.pen-grip{position:absolute;left:22px;top:7px;width:48px;height:24px;border-radius:5px 2px 2px 5px;background:linear-gradient(180deg,#153f83,#2366bd 48%,#0b3274);box-shadow:inset 0 2px 2px rgba(255,255,255,.35),0 3px 4px rgba(0,0,0,.26)}
.pen-grip:after{content:"";position:absolute;left:8px;right:8px;bottom:4px;height:3px;border-radius:8px;background:repeating-linear-gradient(90deg,rgba(255,255,255,.36) 0 2px,transparent 2px 5px)}
.pen-barrel{position:absolute;left:66px;top:5px;width:95px;height:28px;border-radius:3px 14px 14px 3px;background:linear-gradient(180deg,#0c2b6b,#1252ad 38%,#1f6ad0 56%,#0a347f);box-shadow:inset 0 3px 3px rgba(255,255,255,.38),0 5px 7px rgba(0,0,0,.28)}
.pen-barrel:before{content:"";position:absolute;left:9px;right:12px;top:4px;height:4px;border-radius:999px;background:rgba(255,255,255,.37)}
.pen-clip{position:absolute;left:105px;top:0;width:52px;height:8px;border:3px solid #d8dde4;border-left:0;border-radius:0 7px 7px 0;transform:skewX(-16deg);filter:drop-shadow(0 2px 1px rgba(0,0,0,.24))}
.pen-clicker{position:absolute;left:157px;top:9px;width:18px;height:20px;border-radius:0 7px 7px 0;background:linear-gradient(180deg,#e9edf1,#858d97);box-shadow:inset 0 2px 2px rgba(255,255,255,.7),0 2px 3px rgba(0,0,0,.24)}
.writing-spark{position:absolute;width:7px;height:7px;border-radius:50%;background:#2766ae;opacity:0;box-shadow:0 0 12px rgba(39,102,174,.9);animation:writingSpark 6.4s linear infinite}
.writing-spark--one{left:557px;top:166px}.writing-spark--two{left:570px;top:180px;animation-delay:.14s}
.board-writing.is-paused *{animation-play-state:paused!important}

@keyframes lucideAlive{0%,100%{transform:translateY(0) rotate(0deg);filter:drop-shadow(0 0 0 transparent)}45%{transform:translateY(-1.5px) rotate(-2.2deg);filter:drop-shadow(0 3px 3px rgba(0,0,0,.16))}70%{transform:translateY(1px) rotate(2deg)}}
@keyframes lucideHover{0%{transform:scale(1) rotate(0)}35%{transform:scale(1.2) rotate(-8deg)}68%{transform:scale(1.1) rotate(7deg)}100%{transform:scale(1.14) rotate(0)}}
@keyframes menuGlyphAlive{0%,100%{transform:translateY(0) rotate(0deg) scale(1)}38%{transform:translateY(-3px) rotate(-4deg) scale(1.05)}66%{transform:translateY(1px) rotate(3deg) scale(1.02)}}
@keyframes menuGlow{0%,100%{filter:brightness(1);box-shadow:0 8px 14px rgba(0,0,0,.28),inset 0 1px 1px rgba(255,255,255,.32)}50%{filter:brightness(1.08);box-shadow:0 9px 18px rgba(0,0,0,.32),0 0 12px color-mix(in srgb,var(--menu-color),transparent 55%),inset 0 1px 1px rgba(255,255,255,.4)}}
@keyframes inkDraw{0%,6%{stroke-dashoffset:1050;opacity:0}10%{opacity:1}74%,84%{stroke-dashoffset:0;opacity:1}86%{stroke-dashoffset:0;opacity:0}86.1%,100%{stroke-dashoffset:1050;opacity:0}}
@keyframes penTravel{0%,5%{offset-distance:0%;opacity:0;filter:blur(1px)}8%{opacity:1;filter:blur(0)}74%{offset-distance:100%;opacity:1;filter:blur(0)}83%{offset-distance:100%;opacity:1}86%,100%{offset-distance:100%;opacity:0;filter:blur(1px)}}
@keyframes writingSpark{0%,72%{transform:scale(.25);opacity:0}76%{transform:scale(1);opacity:.9}82%{transform:translate(12px,-8px) scale(.1);opacity:0}100%{opacity:0}}

@media(max-width:899px){.board-writing{display:none}}
@media(prefers-reduced-motion:reduce){.lucide-animated,.scene-menu__icon,.mobile-menu-card span,.ink-line,.ink-shadow,.writing-pen,.writing-spark{animation:none!important}.ink-line,.ink-shadow{stroke-dashoffset:0}.writing-pen{offset-distance:100%;opacity:1}}

/* Patch v3: taskbar tunggal, halaman konten mandiri, SQLite auto-create */
.home-body .scene-stage::after{content:"";position:absolute;z-index:2;left:0;bottom:0;width:1345px;height:118px;background:linear-gradient(180deg,rgba(47,44,41,.99),rgba(36,33,31,.995));border-top:1px solid rgba(255,255,255,.07);box-shadow:inset 0 1px 0 rgba(0,0,0,.24);pointer-events:none}
.home-body .scene-menu--bottom{z-index:6}
.home-body .scene-menu--bottom .scene-menu__icon{width:70px;height:62px;border-radius:11px}
.home-body .scene-menu--bottom .scene-menu__label{margin-top:7px;background:transparent;padding:0;color:#fff;text-shadow:0 2px 3px #000,0 0 4px #000;font-size:13px}

.content-body{overflow:auto;background:#2b2723}
.content-page-shell{min-height:100vh;background-size:cover;background-position:center;background-attachment:fixed;position:relative;padding:24px 30px 0;color:#282018}
.content-page-shade{position:fixed;inset:0;background:linear-gradient(135deg,rgba(31,27,23,.78),rgba(31,27,23,.42) 42%,rgba(31,27,23,.68));backdrop-filter:blur(2px);pointer-events:none}
.content-topbar{position:relative;z-index:2;max-width:1440px;margin:0 auto 22px;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:18px;color:#fff}
.content-home-link,.content-login-links a{display:inline-flex;align-items:center;gap:9px;border:1px solid rgba(255,255,255,.2);background:rgba(35,31,28,.62);backdrop-filter:blur(8px);border-radius:13px;padding:11px 14px;font-size:13px;font-weight:800;transition:transform .2s,background .2s}
.content-home-link{justify-self:start}.content-home-link:hover,.content-login-links a:hover{transform:translateY(-2px);background:rgba(255,255,255,.16)}
.content-home-link svg,.content-login-links svg{width:19px;height:19px}
.content-school-brand{display:flex;align-items:center;gap:11px;text-align:left}
.content-school-brand>span{width:45px;height:45px;border-radius:14px;background:var(--page-color);display:grid;place-items:center;box-shadow:0 10px 24px rgba(0,0,0,.24)}
.content-school-brand>span svg{width:25px;height:25px}.content-school-brand small{display:block;font-size:9px;letter-spacing:.15em;color:#ded6cd}.content-school-brand b{display:block;margin-top:4px;font-size:14px}
.content-login-links{justify-self:end;display:flex;gap:9px}.content-login-links a{padding:10px 12px}
.content-stage{position:relative;z-index:2;max-width:1440px;margin:0 auto;display:grid;grid-template-columns:minmax(0,1fr) 330px;gap:22px;align-items:start;padding-bottom:34px}
.content-paper{position:relative;background:linear-gradient(145deg,#fffdf8,#f8efdf);border:1px solid rgba(111,73,39,.28);border-radius:7px;padding:38px 42px 30px;box-shadow:0 32px 90px rgba(0,0,0,.42),inset 0 0 45px rgba(128,91,43,.05);min-height:650px;overflow:hidden}
.content-paper:before{content:"";position:absolute;inset:0;pointer-events:none;opacity:.28;background-image:repeating-linear-gradient(0deg,transparent 0 29px,rgba(110,88,60,.06) 30px)}
.paper-pin{position:absolute;z-index:2;top:12px;width:14px;height:14px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#ff7b70 0 18%,#d92727 35% 72%,#881111 100%);box-shadow:0 3px 5px rgba(0,0,0,.35)}.paper-pin--left{left:17px}.paper-pin--right{right:17px}
.content-title-row{position:relative;display:flex;gap:18px;align-items:center;padding-bottom:24px;border-bottom:1px dashed rgba(91,61,32,.3)}
.content-page-icon{width:76px;height:76px;flex:none;border-radius:20px;background:var(--page-color);color:#fff;display:grid;place-items:center;box-shadow:0 13px 25px color-mix(in srgb,var(--page-color),transparent 63%),inset 0 1px 1px rgba(255,255,255,.36)}
.content-page-icon svg{width:38px;height:38px}.content-title-row small{font-size:10px;letter-spacing:.14em;font-weight:900;color:#9b6434}.content-title-row h1{font-family:Georgia,serif;font-size:43px;line-height:1.05;margin:7px 0 8px;color:#382514}.content-title-row p{margin:0;color:#755d47;font-size:16px;line-height:1.5}
.content-cover-image{position:relative;width:100%;max-height:370px;object-fit:cover;border-radius:16px;margin:25px 0 2px;border:1px solid rgba(92,67,42,.16)}
.content-copy{position:relative;padding:24px 0 4px;font-size:16px;line-height:1.75;color:#493b2f}.content-copy h2{font-family:Georgia,serif;font-size:27px;margin:24px 0 9px;color:#412b19}.content-copy h2:first-child{margin-top:0}.content-copy h3{font-size:19px;margin:20px 0 7px}.content-copy p{margin:0 0 15px}.content-copy ul,.content-copy ol{margin:5px 0 18px;padding-left:23px}.content-copy li{padding:3px 0 3px 5px}.content-copy li::marker{color:var(--page-color);font-weight:900}
.content-actions{position:relative;display:flex;flex-wrap:wrap;gap:10px;margin-top:25px;padding-top:20px;border-top:1px dashed rgba(91,61,32,.24)}.content-action{display:inline-flex;align-items:center;gap:9px;padding:12px 16px;border-radius:12px;font-size:13px;font-weight:900;transition:transform .2s,box-shadow .2s}.content-action svg{width:20px;height:20px}.content-action:hover{transform:translateY(-2px)}.content-action--primary{background:var(--page-color);color:#fff;box-shadow:0 10px 20px color-mix(in srgb,var(--page-color),transparent 72%)}.content-action--secondary{background:#eee2d2;color:#503823;border:1px solid #ddccb7}
.content-meta{position:relative;display:flex;justify-content:space-between;gap:15px;flex-wrap:wrap;margin-top:27px;padding-top:14px;border-top:1px solid rgba(91,61,32,.15);font-size:11px;color:#8a735e}.content-meta span{display:flex;align-items:center;gap:6px}.content-meta svg{width:15px;height:15px}
.content-sidebar{display:grid;gap:14px}.mini-cork-card{background:#bd7d3f;background-image:radial-gradient(rgba(75,40,15,.22) .8px,transparent .8px);background-size:5px 5px;border:11px solid #3a2d24;border-radius:5px;padding:15px;color:#fff4e7;box-shadow:0 22px 55px rgba(0,0,0,.38)}.mini-cork-card small{font-size:9px;letter-spacing:.14em;font-weight:900}.mini-cork-card h2{font-family:Georgia,serif;font-size:26px;margin:5px 0}.mini-cork-card p{font-size:12px;line-height:1.5;margin:0;color:#f5dfc8}
.mini-writing-scene{height:120px;position:relative;margin:-2px 0 10px;overflow:hidden}.mini-writing-scene svg{position:absolute;inset:0;width:100%;height:100%}.mini-writing-scene path{fill:none;stroke:#153f83;stroke-width:4;stroke-linecap:round;stroke-dasharray:420;stroke-dashoffset:420;animation:miniInk 5.8s linear infinite}.mini-pen{position:absolute;left:15px;top:66px;width:95px;height:17px;transform-origin:left center;animation:miniPen 5.8s linear infinite}.mini-pen:before{content:"";position:absolute;left:0;top:4px;width:18px;height:9px;background:linear-gradient(90deg,#d9dee4,#6e7580);clip-path:polygon(0 50%,100% 0,100% 100%)}.mini-pen span{position:absolute;left:15px;top:1px;width:77px;height:15px;border-radius:4px 10px 10px 4px;background:linear-gradient(180deg,#174f9d,#092c67);box-shadow:inset 0 2px rgba(255,255,255,.28),0 3px 5px rgba(0,0,0,.25)}
.related-grid{display:grid;gap:9px}.related-grid>a{display:grid;grid-template-columns:43px 1fr 18px;align-items:center;gap:10px;padding:9px 11px;border-radius:13px;background:rgba(255,250,242,.95);border:1px solid rgba(255,255,255,.45);box-shadow:0 10px 24px rgba(0,0,0,.18);transition:transform .2s,background .2s}.related-grid>a:hover{transform:translateX(-4px);background:#fff}.related-grid>a>span{width:43px;height:43px;border-radius:12px;background:var(--related-color);color:#fff;display:grid;place-items:center}.related-grid>a>span svg{width:22px;height:22px}.related-grid b{font-size:13px}.related-grid>a>svg{width:17px;color:#9e8d7d}
.content-news-grid{position:relative;display:grid;gap:15px;margin-top:22px}.content-news-grid>article{display:grid;grid-template-columns:180px 1fr;gap:17px;background:rgba(255,255,255,.64);border:1px solid #eadbc8;border-radius:16px;padding:12px}.content-news-grid img{width:180px;height:150px;object-fit:cover;border-radius:11px}.content-news-grid small{font-size:10px;color:#a46d39;font-weight:900}.content-news-grid h2{font-family:Georgia,serif;font-size:23px;margin:6px 0}.content-news-grid p{margin:0 0 8px;line-height:1.5}.news-full-copy{font-size:13px;line-height:1.55;color:#6f5a46}
.content-gallery-grid{position:relative;display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:22px}.content-gallery-grid figure{margin:0;background:#fff;border:1px solid #eadbc8;border-radius:16px;padding:8px;box-shadow:0 8px 20px rgba(78,55,32,.08)}.content-gallery-grid img{width:100%;height:190px;object-fit:cover;border-radius:11px}.content-gallery-grid figcaption{display:grid;gap:5px;padding:10px 5px 5px}.content-gallery-grid figcaption b{font-size:14px}.content-gallery-grid figcaption span{font-size:11px;line-height:1.4;color:#796653}
.content-footer{position:relative;z-index:2;max-width:1440px;margin:0 auto;color:#eee4da;border-top:1px solid rgba(255,255,255,.16);padding:18px 2px 22px;display:flex;justify-content:space-between;align-items:center;font-size:12px}.content-footer a{display:flex;align-items:center;gap:7px;font-weight:800}.content-footer svg{width:18px;height:18px}
@keyframes miniInk{0%,8%{stroke-dashoffset:420;opacity:0}12%{opacity:1}76%,85%{stroke-dashoffset:0;opacity:1}89%,100%{stroke-dashoffset:0;opacity:0}}
@keyframes miniPen{0%,8%{transform:translate(0,0) rotate(-7deg);opacity:0}12%{opacity:1}76%{transform:translate(235px,-12px) rotate(-4deg);opacity:1}86%{transform:translate(235px,-12px) rotate(-4deg);opacity:1}90%,100%{opacity:0}}
@media(max-width:1100px){.content-stage{grid-template-columns:1fr}.content-sidebar{grid-template-columns:310px 1fr}.related-grid{grid-template-columns:repeat(2,1fr)}.content-gallery-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:899px){.content-page-shell{padding:15px 15px 0;background-attachment:scroll}.content-topbar{grid-template-columns:1fr auto;margin-bottom:15px}.content-school-brand{grid-column:1/-1;grid-row:1;justify-self:center}.content-home-link{grid-column:1;grid-row:2}.content-login-links{grid-column:2;grid-row:2}.content-home-link span,.content-login-links span{display:none}.content-home-link,.content-login-links a{width:44px;height:44px;padding:0;display:grid;place-items:center}.content-paper{padding:32px 21px 24px;min-height:0}.content-title-row{align-items:flex-start}.content-page-icon{width:61px;height:61px;border-radius:17px}.content-page-icon svg{width:30px;height:30px}.content-title-row h1{font-size:34px}.content-title-row p{font-size:14px}.content-copy{font-size:15px}.content-sidebar{grid-template-columns:1fr}.related-grid{grid-template-columns:repeat(2,1fr)}.content-news-grid>article{grid-template-columns:1fr}.content-news-grid img{width:100%;height:210px}.content-gallery-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.content-title-row{display:grid}.content-page-icon{width:58px;height:58px}.content-title-row h1{font-size:31px}.content-news-grid img{height:180px}.content-gallery-grid{grid-template-columns:1fr}.related-grid{grid-template-columns:1fr}.content-meta,.content-footer{display:grid}.content-actions{display:grid}.content-action{justify-content:center}.mini-cork-card{border-width:8px}}
@media(prefers-reduced-motion:reduce){.mini-writing-scene path,.mini-pen{animation:none!important}.mini-writing-scene path{stroke-dashoffset:0}.mini-pen{transform:translate(235px,-12px) rotate(-4deg);opacity:1}}

/* =========================================================
   FINAL MOBILE ROOM EXPERIENCE + ENTRANCE ANIMATIONS
   ========================================================= */
.mobile-portal{display:none}

/* Desktop: icon artwork and labels already exist in the room image.
   The anchors stay interactive while the animation is rendered as a halo,
   so no visual element appears twice. */
.scene-stage{opacity:0;transform-origin:top left;filter:blur(6px);transition:opacity .7s ease,filter .7s ease}
body.page-loaded .scene-stage{opacity:1;filter:blur(0)}
.scene-menu{isolation:isolate;overflow:visible}
.scene-menu__icon{background:transparent!important;border:0!important;box-shadow:none!important;filter:none!important;animation:none!important;opacity:0!important}
.scene-menu__label{display:none!important}
.scene-menu:before{content:"";position:absolute;z-index:-1;left:50%;top:42%;width:78%;height:68%;border-radius:18px;transform:translate(-50%,-50%) scale(.88);border:2px solid rgba(255,255,255,0);box-shadow:0 0 0 rgba(255,255,255,0);animation:desktopIconHalo 3.9s ease-in-out infinite;animation-delay:var(--menu-delay,0s);pointer-events:none}
.scene-menu:after{content:"";position:absolute;right:10%;top:5%;width:7px;height:7px;border-radius:50%;background:#fff;box-shadow:0 0 12px 4px rgba(255,255,255,.72);opacity:0;animation:desktopIconSpark 3.9s ease-in-out infinite;animation-delay:calc(var(--menu-delay,0s) + .35s);pointer-events:none}
.scene-menu:hover:before,.scene-menu:focus-visible:before{border-color:rgba(255,255,255,.9);box-shadow:0 0 20px color-mix(in srgb,var(--menu-color),white 35%);transform:translate(-50%,-50%) scale(1.03)}
.scene-menu:hover:after,.scene-menu:focus-visible:after{opacity:1}
.scene-menu.is-active:before{border-color:rgba(255,255,255,.95);box-shadow:0 0 22px rgba(255,255,255,.62)}

.scene-furniture{position:absolute;z-index:13;pointer-events:none;opacity:0;animation:furnitureEntrance .8s cubic-bezier(.2,.8,.2,1) forwards}
.scene-furniture--desk{left:975px;top:501px;width:380px;height:226px;animation-delay:.72s}
.scene-furniture--trash{left:1294px;top:630px;width:86px;height:95px;animation-delay:.95s}
.scene-furniture span{position:absolute;width:24px;height:3px;border-radius:999px;background:rgba(255,255,255,.78);box-shadow:0 0 10px rgba(255,255,255,.48);animation:furnitureWave 2.6s ease-in-out infinite}
.scene-furniture span:nth-child(1){left:0;top:42%;transform:rotate(-12deg)}
.scene-furniture span:nth-child(2){left:-8px;top:52%;width:18px;animation-delay:.18s}
.scene-furniture span:nth-child(3){right:0;bottom:16%;width:20px;transform:rotate(16deg);animation-delay:.36s}
.scene-furniture--desk:after,.scene-furniture--trash:after{content:"";position:absolute;inset:8% 4%;border-radius:40%;border:2px solid rgba(255,255,255,.12);filter:blur(.2px);animation:furnitureGlow 3.4s ease-in-out infinite}
.scene-furniture--trash:after{inset:0;border-radius:18px}

/* Page entrance animation across public pages, login, admin and user shells. */
.content-topbar,.content-paper,.content-sidebar,.content-footer,.auth-card{opacity:0;transform:translateY(18px)}
body.page-loaded .content-topbar{animation:pageRise .55s ease forwards}
body.page-loaded .content-paper{animation:pageRise .65s .08s ease forwards}
body.page-loaded .content-sidebar{animation:pageRise .65s .18s ease forwards}
body.page-loaded .content-footer{animation:pageRise .55s .26s ease forwards}
body.page-loaded .auth-card{animation:pageRise .65s .08s cubic-bezier(.2,.8,.2,1) forwards}

@keyframes desktopIconHalo{0%,100%{transform:translate(-50%,-50%) scale(.88);border-color:rgba(255,255,255,0);box-shadow:0 0 0 rgba(255,255,255,0)}50%{transform:translate(-50%,-50%) scale(1);border-color:rgba(255,255,255,.24);box-shadow:0 0 16px color-mix(in srgb,var(--menu-color),transparent 56%)}}
@keyframes desktopIconSpark{0%,36%,100%{opacity:0;transform:scale(.4) rotate(0)}45%{opacity:.95;transform:scale(1) rotate(45deg)}56%{opacity:0;transform:scale(1.7) rotate(90deg)}}
@keyframes furnitureEntrance{0%{opacity:0;transform:translateY(22px) scale(.96)}100%{opacity:1;transform:translateY(0) scale(1)}}
@keyframes furnitureWave{0%,100%{opacity:0;transform:translateX(0) scaleX(.6)}45%{opacity:.9;transform:translateX(-9px) scaleX(1)}70%{opacity:0;transform:translateX(-17px) scaleX(.7)}}
@keyframes furnitureGlow{0%,100%{opacity:0;transform:scale(.97)}50%{opacity:.72;transform:scale(1.02)}}
@keyframes pageRise{to{opacity:1;transform:translateY(0)}}

@media(max-width:899px){
  html{width:100%;min-height:100%}
  body.home-page{width:100%;min-height:100%;overflow:hidden;background:#171513}
  .desktop-scene,.mobile-site{display:none!important}
  .mobile-portal{display:block;position:relative;width:100vw;height:100svh;min-height:100vh;overflow:hidden;background:radial-gradient(circle at 50% 15%,#6f6256,#201d1a 70%)}
  .mobile-portal-canvas{position:absolute;left:50%;top:0;height:100svh;min-height:100vh;width:calc(100svh * .562799);min-width:100vw;max-width:none;background-size:100% 100%;background-position:center;background-repeat:no-repeat;transform:translateX(-50%) scale(1.035);transform-origin:center;opacity:0;filter:blur(7px) brightness(.82);transition:opacity .7s ease,filter .7s ease,transform .9s cubic-bezier(.2,.8,.2,1);box-shadow:0 0 38px rgba(0,0,0,.5)}
  body.page-loaded .mobile-portal-canvas{opacity:1;filter:blur(0) brightness(1);transform:translateX(-50%) scale(1)}

  .mobile-drawer-toggle{position:absolute;z-index:20;left:85.8%;top:3.2%;width:8.6%;height:5.4%;border:0;background:transparent;border-radius:18px;cursor:pointer;outline:0}
  .mobile-drawer-toggle:focus-visible{box-shadow:0 0 0 3px rgba(255,255,255,.9),0 0 0 7px rgba(45,115,190,.65)}
  .mobile-drawer-toggle:after{content:"";position:absolute;inset:-6px;border-radius:18px;border:1px solid rgba(255,255,255,.3);animation:mobileHeaderPulse 2.7s ease-in-out infinite}

  .mobile-image-hotspot{position:absolute;z-index:12;left:var(--hx);top:var(--hy);width:var(--hw);height:var(--hh);border-radius:20%;outline:0;opacity:0;transform:translateY(12px) scale(.9);animation:mobileHotspotIn .55s cubic-bezier(.2,.8,.2,1) forwards;animation-delay:calc(.45s + var(--hotspot-delay));}
  .mobile-image-hotspot:before{content:"";position:absolute;inset:8% 8% 23%;border-radius:23%;border:1.6px solid rgba(255,255,255,.16);box-shadow:0 0 0 rgba(255,255,255,0);animation:mobileHotspotGlow 4.2s ease-in-out infinite;animation-delay:calc(var(--hotspot-delay) - 1s)}
  .mobile-image-hotspot:after{content:"";position:absolute;right:9%;top:4%;width:5px;height:5px;border-radius:50%;background:#fff;box-shadow:0 0 10px 4px rgba(255,255,255,.72);opacity:0;animation:mobileSparkle 4.2s ease-in-out infinite;animation-delay:calc(var(--hotspot-delay) - .65s)}
  .mobile-image-hotspot span{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
  .mobile-image-hotspot:active{transform:scale(.94)!important}
  .mobile-image-hotspot:focus-visible:before{border-color:#fff;box-shadow:0 0 18px rgba(255,255,255,.85)}

  .mobile-board-writing{position:absolute;z-index:10;left:57.6%;top:33.3%;width:30.4%;height:9.5%;pointer-events:none;transform:rotate(-2deg);opacity:.85}
  .mobile-board-writing svg{width:100%;height:100%;overflow:visible}
  .mobile-board-writing path{fill:none;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:680;stroke-dashoffset:680;animation:mobileInkDraw 6.2s linear infinite}
  .mobile-ink-shadow{stroke:rgba(92,52,0,.25);stroke-width:7;filter:blur(2px);transform:translateY(3px)}
  .mobile-ink-line{stroke:#fff2b0;stroke-width:4.2;filter:drop-shadow(0 0 5px #ffca4b)}

  .mobile-furniture{position:absolute;z-index:14;pointer-events:none;opacity:0;animation:mobileFurnitureIn .75s cubic-bezier(.2,.8,.2,1) forwards}
  .mobile-furniture--desk{left:50.6%;top:55.0%;width:42%;height:20%;animation-delay:.9s}
  .mobile-furniture--trash{left:84.4%;top:68.0%;width:10.5%;height:8.5%;animation-delay:1.08s}
  .mobile-furniture i{position:absolute;display:block;width:18%;height:2px;border-radius:999px;background:rgba(255,255,255,.85);box-shadow:0 0 9px rgba(255,255,255,.72);animation:mobileFurnitureWave 2.4s ease-in-out infinite}
  .mobile-furniture i:nth-child(1){left:-2%;top:31%;transform:rotate(-8deg)}
  .mobile-furniture i:nth-child(2){left:-5%;top:39%;width:13%;animation-delay:.17s}
  .mobile-furniture i:nth-child(3){right:-2%;bottom:18%;width:14%;transform:rotate(12deg);animation-delay:.32s}
  .mobile-furniture:after{content:"";position:absolute;inset:2%;border-radius:24%;border:1px solid rgba(255,255,255,.14);animation:mobileFurnitureAura 3.3s ease-in-out infinite}

  .mobile-menu-drawer{position:fixed;z-index:100;inset:0;pointer-events:none;visibility:hidden}
  .mobile-menu-drawer.open{pointer-events:auto;visibility:visible}
  .mobile-drawer-backdrop{position:absolute;inset:0;border:0;background:rgba(20,17,15,.62);backdrop-filter:blur(5px);opacity:0;transition:opacity .25s ease}
  .mobile-menu-drawer.open .mobile-drawer-backdrop{opacity:1}
  .mobile-drawer-panel{position:absolute;left:0;right:0;bottom:0;max-height:88svh;background:linear-gradient(180deg,#fffdf9,#f1e8dc);border-radius:28px 28px 0 0;box-shadow:0 -25px 70px rgba(0,0,0,.42);transform:translateY(105%);transition:transform .34s cubic-bezier(.2,.8,.2,1);overflow:hidden}
  .mobile-menu-drawer.open .mobile-drawer-panel{transform:translateY(0)}
  .mobile-drawer-panel header{display:flex;justify-content:space-between;align-items:center;padding:21px 20px 15px;border-bottom:1px solid rgba(92,66,43,.14)}
  .mobile-drawer-panel header small{display:block;font-size:9px;letter-spacing:.16em;color:#9b6533;font-weight:900}
  .mobile-drawer-panel header h2{font-family:Georgia,serif;font-size:27px;margin:4px 0 0;color:#2d2118}
  .mobile-drawer-panel header button{width:42px;height:42px;border:0;border-radius:14px;background:#2f2a26;color:#fff;display:grid;place-items:center;cursor:pointer}
  .mobile-drawer-panel header button svg{width:22px;height:22px}
  .mobile-drawer-scroll{overflow:auto;max-height:calc(88svh - 80px);padding:16px 16px calc(25px + env(safe-area-inset-bottom))}
  .mobile-drawer-panel .mobile-menu-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:11px}
  .mobile-drawer-panel .mobile-menu-card{min-height:105px;padding:12px 6px 10px;border-radius:17px;background:rgba(255,255,255,.9);box-shadow:0 9px 22px rgba(78,54,34,.10);opacity:1;transform:none}
  .mobile-drawer-panel .mobile-menu-card span{width:51px;height:51px;border-radius:15px;animation:drawerIconFloat 3.4s ease-in-out infinite;animation-delay:var(--menu-delay,0s)}
  .mobile-drawer-panel .mobile-menu-card b{font-size:11.5px;line-height:1.15;color:#2d241d}
  .mobile-drawer-auth{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:16px}
  .mobile-drawer-auth a{display:flex;align-items:center;justify-content:center;gap:8px;min-height:48px;border-radius:14px;background:#2f73be;color:#fff;font-weight:800;font-size:13px}
  .mobile-drawer-auth a:last-child{background:#2e2a27}
  body.mobile-menu-open{overflow:hidden}

  .content-page-shell{min-height:100svh;background-attachment:scroll}
  .content-topbar{padding:14px 16px}
  .content-stage{padding:18px 14px 28px}
  .content-paper{border-radius:20px;padding:22px 18px}
  .content-title-row{align-items:flex-start}
  .content-title-row h1{font-size:30px;line-height:1.08}
  .content-sidebar{margin-top:0}
  .content-footer{padding:16px}
}

@media(max-width:430px){
  .mobile-drawer-panel .mobile-menu-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
  .mobile-drawer-panel .mobile-menu-card{min-height:96px;padding:10px 4px 8px}
  .mobile-drawer-panel .mobile-menu-card span{width:46px;height:46px}
  .mobile-drawer-panel .mobile-menu-card b{font-size:10.5px}
}

@media(max-width:899px) and (orientation:landscape){
  .mobile-portal{overflow:auto;background:#efe6dc}
  .mobile-portal-canvas{position:relative;left:0;transform:none!important;width:100%;height:auto;min-height:760px;background-size:cover;background-position:center top}
  .mobile-image-hotspot,.mobile-board-writing,.mobile-furniture{display:none}
  .mobile-drawer-toggle{left:auto;right:22px;top:20px;width:54px;height:54px;background:rgba(35,31,28,.72);border-radius:16px}
}

@keyframes mobileHeaderPulse{0%,100%{opacity:.2;transform:scale(.92)}50%{opacity:.75;transform:scale(1.08)}}
@keyframes mobileHotspotIn{to{opacity:1;transform:translateY(0) scale(1)}}
@keyframes mobileHotspotGlow{0%,100%{border-color:rgba(255,255,255,.08);box-shadow:0 0 0 rgba(255,255,255,0);transform:translateY(0) scale(.94)}50%{border-color:rgba(255,255,255,.32);box-shadow:0 0 13px rgba(255,255,255,.34);transform:translateY(-2px) scale(1)}}
@keyframes mobileSparkle{0%,35%,100%{opacity:0;transform:scale(.35) rotate(0)}44%{opacity:1;transform:scale(1) rotate(45deg)}54%{opacity:0;transform:scale(1.7) rotate(90deg)}}
@keyframes mobileInkDraw{0%,7%{stroke-dashoffset:680;opacity:0}11%{opacity:1}72%,84%{stroke-dashoffset:0;opacity:1}87%,100%{stroke-dashoffset:0;opacity:0}}
@keyframes mobileFurnitureIn{0%{opacity:0;transform:translateY(18px) scale(.96)}100%{opacity:1;transform:translateY(0) scale(1)}}
@keyframes mobileFurnitureWave{0%,100%{opacity:0;transform:translateX(0) scaleX(.5)}42%{opacity:.95;transform:translateX(-8px) scaleX(1)}72%{opacity:0;transform:translateX(-15px) scaleX(.65)}}
@keyframes mobileFurnitureAura{0%,100%{opacity:0;transform:scale(.96)}50%{opacity:.65;transform:scale(1.025)}}
@keyframes drawerIconFloat{0%,100%{transform:translateY(0) rotate(0)}45%{transform:translateY(-3px) rotate(-2deg)}72%{transform:translateY(1px) rotate(2deg)}}

@media(prefers-reduced-motion:reduce){
  .scene-stage,.mobile-portal-canvas,.mobile-image-hotspot,.content-topbar,.content-paper,.content-sidebar,.content-footer,.auth-card{opacity:1!important;filter:none!important;transform:none!important;animation:none!important;transition:none!important}
  .scene-menu:before,.scene-menu:after,.scene-furniture span,.scene-furniture:after,.mobile-image-hotspot:before,.mobile-image-hotspot:after,.mobile-board-writing path,.mobile-furniture i,.mobile-furniture:after,.mobile-drawer-panel .mobile-menu-card span{animation:none!important}
}
@media(max-width:899px){.mobile-portal-canvas{height:100vh;width:56.2799vh}.mobile-portal-canvas{height:100svh;width:calc(100svh * .562799)}}

/* BHB School 2026 visual patch */
.sr-only{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important}
@media(min-width:900px){
  .scene-stage{width:1536px;height:1024px;background-size:1536px 1024px}
  .scene-menu{border-radius:18px;cursor:pointer}
  .scene-menu:before{content:"";position:absolute;left:13%;top:6%;width:74%;height:70%;border-radius:22px;border:2px solid rgba(255,255,255,0);box-shadow:0 0 0 rgba(255,255,255,0);animation:bhbIconHalo 3.1s ease-in-out infinite;animation-delay:var(--menu-delay)}
  .scene-menu:after{content:"✦";position:absolute;right:14px;top:2px;color:#fff;font-size:17px;text-shadow:0 0 7px #fff,0 0 14px rgba(255,208,75,.9);opacity:0;animation:bhbSpark 2.7s ease-in-out infinite;animation-delay:var(--menu-delay)}
  .scene-menu:hover,.scene-menu:focus-visible{transform:translateY(-7px) scale(1.035);filter:drop-shadow(0 12px 14px rgba(0,0,0,.24))}
  .scene-menu:hover:before,.scene-menu:focus-visible:before{border-color:rgba(255,255,255,.75);box-shadow:0 0 24px rgba(255,213,71,.6)}
  .board-writing{left:875px;top:235px;width:495px;height:215px;opacity:.78;mix-blend-mode:screen;filter:drop-shadow(0 0 8px rgba(255,196,55,.45))}
  .writing-svg .ink-line{stroke:#ffd35e!important;stroke-width:4!important}
  .writing-svg .ink-shadow{stroke:rgba(255,255,255,.38)!important;stroke-width:8!important}
  .writing-pen{display:none}
  .scene-furniture--desk{left:800px;top:560px;width:545px;height:250px}
  .scene-furniture--trash{left:1285px;top:735px;width:105px;height:115px}
  .system-clock{display:flex;position:absolute;z-index:30;right:27px;top:21px;width:401px;height:49px;padding:0 18px;border-radius:12px;align-items:center;justify-content:space-between;background:rgba(39,36,32,.96);border:1px solid rgba(255,255,255,.48);color:#fff;box-shadow:0 10px 22px rgba(0,0,0,.24);font-weight:500}
  .system-clock strong{font-size:16px;order:2;letter-spacing:.02em}
  .system-clock span{font-size:14px;margin:0;max-width:285px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-transform:capitalize}
  .system-clock:before{content:"";width:16px;height:16px;border:2px solid #fff;border-radius:50%;margin-right:8px;box-shadow:inset 0 0 0 4px rgba(255,255,255,.12)}
  .login-hotspot{right:22px;bottom:16px;width:48px;height:48px;border-radius:14px;background:rgba(31,29,27,.72);border:1px solid rgba(255,255,255,.25)}
  .login-hotspot svg{opacity:1;width:22px;height:22px}
  .login-popover{right:20px;bottom:74px}
  .desktop-help-chip{position:absolute;z-index:30;right:82px;bottom:18px;height:44px;padding:0 14px;display:flex;align-items:center;gap:8px;border-radius:12px;background:rgba(31,29,27,.75);border:1px solid rgba(255,255,255,.22);color:#fff;font-size:13px;font-weight:800;backdrop-filter:blur(8px);transition:.2s}
  .desktop-help-chip:hover{transform:translateY(-3px);background:rgba(31,29,27,.92)}
  .desktop-help-chip svg{width:18px;height:18px}
}
@keyframes bhbIconHalo{0%,100%{opacity:0;transform:scale(.9)}45%{opacity:.6;transform:scale(1.04)}65%{opacity:0;transform:scale(1.1)}}
@keyframes bhbSpark{0%,35%,100%{opacity:0;transform:scale(.35) rotate(0)}48%{opacity:1;transform:scale(1.08) rotate(25deg)}61%{opacity:0;transform:scale(.35) rotate(60deg)}}

@media(max-width:899px){
  .mobile-portal{background:#211d1a}
  .mobile-portal-canvas{background-image:var(--mobile-bg);}
  .mobile-image-hotspot{border-radius:20px}
  .mobile-image-hotspot:focus-visible{outline:3px solid #ffd133;outline-offset:2px}
  .mobile-drawer-panel header small{color:#d79d16}
}

/* =========================================================
   MOBILE FIT + CLICKABLE CONTENT PATCH 2026-07-14
   Keeps the complete 941 x 1672 artwork visible without side cropping.
   ========================================================= */
@media (max-width:899px){
  html,body{width:100%;max-width:100%;overflow-x:hidden}
  body.home-page{min-height:100dvh;overflow-x:hidden!important;overflow-y:auto!important;background:#211d1a}
  .mobile-portal{
    display:flex;
    position:relative;
    width:100%;
    height:auto;
    min-height:100dvh;
    overflow:visible;
    align-items:flex-start;
    justify-content:center;
    background:linear-gradient(180deg,#5f544b 0,#211d1a 72%,#171513 100%);
  }
  .mobile-portal-canvas{
    position:relative;
    left:auto;
    top:auto;
    width:min(100%,560px)!important;
    min-width:0!important;
    max-width:560px!important;
    height:auto!important;
    min-height:0!important;
    aspect-ratio:941 / 1672;
    flex:0 0 auto;
    background-size:100% 100%!important;
    background-position:center top!important;
    transform:translateY(8px) scale(.992)!important;
    transform-origin:center top;
    overflow:hidden;
    border-radius:clamp(0px,2.1vw,24px);
    box-shadow:0 18px 55px rgba(0,0,0,.48);
  }
  body.page-loaded .mobile-portal-canvas{
    transform:translateY(0) scale(1)!important;
  }
  .mobile-image-hotspot{
    z-index:30;
    display:block;
    cursor:pointer;
    touch-action:manipulation;
    -webkit-tap-highlight-color:transparent;
    background:rgba(255,255,255,.001);
  }
  .mobile-image-hotspot:active:before{
    border-color:rgba(255,211,73,.95)!important;
    box-shadow:0 0 22px rgba(255,196,55,.9)!important;
  }
  .mobile-drawer-toggle{
    z-index:40;
    touch-action:manipulation;
    -webkit-tap-highlight-color:transparent;
    background:rgba(255,255,255,.001);
  }
  .mobile-menu-drawer{z-index:999}
  .mobile-drawer-panel{max-height:min(88dvh,780px)}
  .mobile-drawer-scroll{max-height:calc(min(88dvh,780px) - 80px);overscroll-behavior:contain}

  /* Public content pages must remain readable even when JavaScript or an
     animation is delayed by a slow mobile browser. */
  body.content-body{overflow-x:hidden!important;overflow-y:auto!important;background:#2b2723}
  .content-page-shell{width:100%;min-height:100dvh;padding:10px 10px 0;overflow:visible;background-position:center top}
  .content-page-shade{position:absolute;min-height:100%;height:auto}
  .content-topbar{width:100%;padding:10px 4px;margin-bottom:10px;gap:10px}
  .content-school-brand{max-width:100%;min-width:0}
  .content-school-brand div{min-width:0}
  .content-school-brand b{white-space:normal;overflow-wrap:anywhere}
  .content-stage{display:block;width:100%;padding:8px 0 22px}
  .content-paper,.content-sidebar,.content-footer,.auth-card{opacity:1;transform:none}
  body.page-loaded .content-topbar{animation:mobileContentRise .45s ease both}
  body.page-loaded .content-paper{animation:mobileContentRise .52s .05s ease both}
  body.page-loaded .content-sidebar{animation:mobileContentRise .52s .12s ease both}
  body.page-loaded .content-footer{animation:mobileContentRise .45s .18s ease both}
  body.page-loaded .auth-card{animation:mobileContentRise .52s .05s ease both}
  .content-paper{width:100%;max-width:100%;overflow:hidden;padding:23px 17px 22px}
  .content-title-row{width:100%;min-width:0;gap:13px}
  .content-title-row>div{min-width:0}
  .content-title-row h1,.content-title-row p,.content-copy{overflow-wrap:anywhere;word-break:normal}
  .content-cover-image,.content-copy img,.content-news-grid img,.content-gallery-grid img{max-width:100%;height:auto}
  .content-copy{width:100%;max-width:100%;padding-top:20px}
  .content-copy table{display:block;width:100%;max-width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch}
  .content-copy pre,.content-copy code{max-width:100%;white-space:pre-wrap;overflow-wrap:anywhere}
  .content-actions{display:grid;grid-template-columns:1fr}
  .content-action{width:100%;justify-content:center}
  .content-sidebar{display:grid;width:100%;grid-template-columns:1fr;margin-top:14px}
  .related-grid{grid-template-columns:1fr}
  .content-footer{width:100%;margin-top:0;padding:16px 4px 22px;gap:10px}
}

@media (max-width:390px){
  .content-title-row{display:grid;grid-template-columns:58px minmax(0,1fr)}
  .content-title-row h1{font-size:27px}
  .content-title-row p{font-size:13px}
  .content-page-icon{width:54px;height:54px;border-radius:15px}
  .mobile-drawer-panel .mobile-menu-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
}

@supports not (aspect-ratio:1 / 1){
  @media (max-width:899px){
    .mobile-portal-canvas{height:177.6833vw!important;max-height:995.03px!important}
  }
}

@keyframes mobileContentRise{
  from{opacity:0;transform:translateY(14px)}
  to{opacity:1;transform:translateY(0)}
}

/* =========================================================
   MOBILE CLEAN FULLSCREEN PATCH 2026-07-14
   - removes visible hotspot boxes / animation trails
   - fills the complete browser viewport without a black remainder
   - keeps every menu hotspot clickable
   ========================================================= */
@media (max-width:899px) and (orientation:portrait){
  html,
  body,
  body.home-page{
    width:100%;
    height:var(--bhb-viewport-height,100dvh);
    min-height:var(--bhb-viewport-height,100dvh);
    max-height:var(--bhb-viewport-height,100dvh);
    margin:0;
    overflow:hidden!important;
    background:#211d1a;
  }

  .mobile-portal{
    position:fixed;
    inset:0;
    width:100vw;
    height:var(--bhb-viewport-height,100dvh);
    min-height:var(--bhb-viewport-height,100dvh);
    overflow:hidden;
    display:block;
    background:#211d1a;
  }

  .mobile-portal-canvas{
    position:absolute!important;
    inset:0!important;
    width:100vw!important;
    max-width:none!important;
    min-width:0!important;
    height:var(--bhb-viewport-height,100dvh)!important;
    min-height:var(--bhb-viewport-height,100dvh)!important;
    max-height:none!important;
    aspect-ratio:auto!important;
    margin:0!important;
    border-radius:0!important;
    box-shadow:none!important;
    background-size:100% 100%!important;
    background-position:center center!important;
    background-repeat:no-repeat!important;
    transform:scale(1.006)!important;
    transform-origin:center center!important;
    opacity:0;
    filter:blur(5px) brightness(.9);
    transition:opacity .55s ease,filter .55s ease,transform .7s cubic-bezier(.2,.8,.2,1);
  }

  body.page-loaded .mobile-portal-canvas{
    opacity:1;
    filter:none;
    transform:scale(1)!important;
  }

  /* Clean clickable areas. No visible rectangles or long trailing lines. */
  .mobile-image-hotspot{
    opacity:1!important;
    transform:none!important;
    animation:none!important;
    border:0!important;
    outline:0;
    background:transparent!important;
    box-shadow:none!important;
  }

  .mobile-image-hotspot:before{
    display:block!important;
    content:"";
    position:absolute;
    left:22%;
    top:2%;
    width:56%;
    aspect-ratio:1;
    height:auto;
    inset:auto;
    border:0!important;
    border-radius:50%;
    background:radial-gradient(circle,rgba(255,255,255,.30) 0,rgba(255,211,73,.12) 38%,rgba(255,255,255,0) 72%);
    box-shadow:none!important;
    opacity:0;
    transform:scale(.72);
    animation:bhbCleanIconGlow 4.8s ease-in-out infinite!important;
    animation-delay:calc(.4s + var(--hotspot-delay))!important;
    pointer-events:none;
  }

  .mobile-image-hotspot:after{
    content:"";
    display:block!important;
    position:absolute;
    right:20%;
    top:4%;
    width:4px;
    height:4px;
    border-radius:50%;
    background:#fff;
    box-shadow:0 0 7px 2px rgba(255,255,255,.66);
    opacity:0;
    animation:bhbCleanSpark 4.8s ease-in-out infinite!important;
    animation-delay:calc(.7s + var(--hotspot-delay))!important;
    pointer-events:none;
  }

  .mobile-image-hotspot:active{
    transform:scale(.96)!important;
  }

  .mobile-image-hotspot:focus-visible{
    outline:3px solid rgba(255,211,73,.95)!important;
    outline-offset:-3px;
    border-radius:16px;
  }

  /* The artwork already contains the pen/furniture motion cues. Avoid
     duplicate overlays that looked like leftover white lines. */
  .mobile-board-writing,
  .mobile-furniture{
    display:none!important;
  }

  .mobile-drawer-toggle{
    background:transparent!important;
    border:0!important;
    box-shadow:none!important;
  }

  .mobile-menu-drawer{
    position:fixed;
    inset:0;
  }
}

@keyframes bhbCleanIconGlow{
  0%,58%,100%{opacity:0;transform:scale(.72)}
  66%{opacity:.42;transform:scale(1)}
  76%{opacity:0;transform:scale(1.15)}
}

@keyframes bhbCleanSpark{
  0%,63%,100%{opacity:0;transform:scale(.35)}
  69%{opacity:.9;transform:scale(1)}
  75%{opacity:0;transform:scale(1.8)}
}

/* ===== SEO FULL 2026 ===== */
.breadcrumbs{margin:0 0 18px;padding:0 2px;font-size:13px;color:#7a6b5b}.breadcrumbs ol{display:flex;align-items:center;gap:6px;list-style:none;margin:0;padding:0;flex-wrap:wrap}.breadcrumbs li{display:flex;align-items:center;gap:6px}.breadcrumbs a{color:#665646;text-decoration:none;font-weight:700}.breadcrumbs a:hover{text-decoration:underline}.breadcrumbs svg{width:14px;height:14px}.breadcrumbs span[aria-current=page]{color:#9a3f20}
/* Quick links dipindahkan ke area dinding atas agar tidak menabrak panel informasi. */
.desktop-quick-links{position:absolute;left:470px;right:auto;top:20px;bottom:auto;display:flex;align-items:center;gap:10px;z-index:35;white-space:nowrap}
.desktop-quick-links .desktop-help-chip{position:static;min-width:max-content;height:46px;padding:0 16px;border-radius:13px;box-shadow:0 10px 24px rgba(0,0,0,.22)}
.desktop-help-chip--seo{background:linear-gradient(135deg,rgba(27,103,190,.94),rgba(22,141,147,.94))!important}
.seo-cluster{margin:34px 0 8px;padding:24px;border:1px solid rgba(113,76,44,.14);border-radius:22px;background:linear-gradient(145deg,#fffdf8,#f7efe3);box-shadow:0 15px 38px rgba(88,58,33,.08)}.seo-cluster__head small{display:block;font-size:11px;letter-spacing:1.3px;font-weight:900;color:#aa6e31}.seo-cluster__head h2{margin:5px 0 17px!important;font-size:24px!important}.seo-cluster__grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.seo-cluster__grid>a{display:grid;grid-template-columns:43px minmax(0,1fr) 18px;align-items:center;gap:11px;padding:12px;border-radius:15px;background:#fff;color:#392d24;text-decoration:none;border:1px solid rgba(91,59,36,.1);transition:.22s ease}.seo-cluster__grid>a:hover{transform:translateY(-2px);box-shadow:0 10px 22px rgba(74,49,29,.1);border-color:color-mix(in srgb,var(--seo-color),#fff 55%)}.seo-cluster__grid>a>span{width:43px;height:43px;border-radius:13px;display:grid;place-items:center;background:var(--seo-color);color:#fff;box-shadow:0 7px 16px color-mix(in srgb,var(--seo-color),transparent 65%)}.seo-cluster__grid>a>span svg{width:21px;height:21px}.seo-cluster__grid>a>b{font-size:13px;line-height:1.25}.seo-cluster__grid>a>svg{width:16px;height:16px;color:#8f7965}.seo-cluster--compact{margin:24px 0;padding:18px}.seo-cluster--compact .seo-cluster__head h2{font-size:19px!important}.seo-cluster--compact .seo-cluster__grid{grid-template-columns:1fr}.seo-cluster--compact .seo-cluster__grid>a{grid-template-columns:38px minmax(0,1fr) 16px;padding:9px}.seo-cluster--compact .seo-cluster__grid>a>span{width:38px;height:38px}
.seo-faq{margin:34px 0 10px}.seo-faq>small{display:block;color:#a66428;font-size:11px;font-weight:900;letter-spacing:1.3px}.seo-faq>h2{margin:5px 0 15px!important}.seo-faq-list{display:grid;gap:9px}.seo-faq details{border:1px solid rgba(103,71,45,.14);border-radius:15px;background:#fffaf3;overflow:hidden}.seo-faq summary{list-style:none;cursor:pointer;padding:15px 17px;display:flex;align-items:center;justify-content:space-between;gap:12px;font-weight:800;color:#3c3027}.seo-faq summary::-webkit-details-marker{display:none}.seo-faq summary svg{width:18px;height:18px;transition:transform .2s ease}.seo-faq details[open] summary svg{transform:rotate(180deg)}.seo-faq details p{margin:0;padding:0 17px 17px;line-height:1.72;color:#66584b}
.sidebar-seo-link{display:grid;grid-template-columns:46px minmax(0,1fr) 18px;align-items:center;gap:11px;margin-top:14px;padding:13px;border-radius:18px;text-decoration:none;color:#fff;background:linear-gradient(135deg,#2474c8,#159ca4);box-shadow:0 12px 28px rgba(22,93,143,.2)}.sidebar-seo-link>svg:first-child{width:24px;height:24px}.sidebar-seo-link span{display:grid;gap:2px}.sidebar-seo-link small{font-size:9px;letter-spacing:1px;opacity:.8}.sidebar-seo-link b{font-size:13px}.sidebar-seo-link>svg:last-child{width:16px;height:16px}
.content-news-grid article h2 a{color:inherit;text-decoration:none}.content-news-grid article h2 a:hover{text-decoration:underline}.news-read-more{display:inline-flex;align-items:center;gap:7px;margin-top:12px;color:#b54228;font-weight:800;text-decoration:none}.news-read-more svg{width:16px;height:16px}.news-full-copy{display:none}
.article-header{padding:8px 0 18px}.article-header small{color:#a06129;font-weight:800;letter-spacing:.4px}.article-header h1{font-size:clamp(31px,4vw,52px);line-height:1.08;margin:10px 0 12px;color:#37291f}.article-header p{font-size:18px;line-height:1.65;color:#69594b}.article-cover{max-height:500px;object-fit:cover}.article-copy{font-size:17px}.article-share{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin:28px 0;padding:15px;border-radius:15px;background:#f7efe4}.article-share span{font-weight:800}.article-share a{display:inline-flex;align-items:center;gap:7px;padding:9px 13px;border-radius:11px;background:#1b9d53;color:#fff;text-decoration:none;font-weight:800}.article-share svg{width:18px;height:18px}.content-stage--article{grid-template-columns:minmax(0,1fr) 290px}.simple-error{min-height:100vh;display:grid;place-items:center;padding:20px;background:#eee6db}.simple-error>div{max-width:600px;padding:32px;border-radius:22px;background:#fff;box-shadow:0 20px 50px rgba(50,35,22,.14)}.simple-error a{display:inline-block;margin-top:12px;padding:11px 16px;border-radius:12px;background:#2474c8;color:#fff;text-decoration:none;font-weight:800}
.content-footer nav{display:flex;gap:13px;flex-wrap:wrap}.content-footer nav a{color:#f3d495;text-decoration:none;font-size:12px}.content-footer nav a:hover{text-decoration:underline}

@media(max-width:900px){.desktop-quick-links{display:none}.seo-cluster{padding:18px}.seo-cluster__grid{grid-template-columns:1fr}.content-stage--article{grid-template-columns:1fr}.content-footer nav{display:none}}
@media(max-width:600px){.breadcrumbs{font-size:11px;margin-bottom:13px}.seo-cluster{margin:24px -2px 5px;padding:14px;border-radius:17px}.seo-cluster__head h2{font-size:20px!important}.seo-cluster__grid>a{grid-template-columns:39px minmax(0,1fr) 16px;padding:10px}.seo-cluster__grid>a>span{width:39px;height:39px}.seo-faq{margin-top:25px}.seo-faq summary{padding:13px;font-size:13px}.seo-faq details p{padding:0 13px 14px;font-size:13px}.article-header h1{font-size:30px}.article-header p{font-size:15px}.article-copy{font-size:15px}.content-footer{gap:8px}}

.home-seo-content{position:relative;z-index:5;background:linear-gradient(180deg,#f7f0e7,#fff);padding:70px 24px;color:#382d24}.home-seo-content__inner{max-width:1160px;margin:0 auto;display:grid;grid-template-columns:minmax(0,1.15fr) minmax(300px,.85fr);gap:44px;align-items:start}.home-seo-intro>small{font-size:12px;letter-spacing:1.5px;font-weight:900;color:#a4692e}.home-seo-intro h1{font-size:clamp(34px,5vw,58px);line-height:1.08;margin:10px 0 18px;color:#2f251e}.home-seo-intro p{font-size:17px;line-height:1.8;color:#66584c;max-width:760px}.home-seo-actions{display:flex;gap:11px;flex-wrap:wrap;margin-top:24px}.home-seo-actions a{display:inline-flex;align-items:center;gap:8px;padding:12px 16px;border-radius:13px;background:#2474c8;color:#fff;text-decoration:none;font-weight:850;box-shadow:0 10px 22px rgba(36,116,200,.18)}.home-seo-actions a+ a{background:#fff;color:#3e3229;border:1px solid rgba(74,54,38,.14);box-shadow:none}.home-seo-actions svg{width:19px;height:19px}.home-seo-facts{display:grid;gap:12px}.home-seo-facts article{display:grid;grid-template-columns:52px minmax(0,1fr);gap:13px;align-items:start;padding:16px;border:1px solid rgba(98,69,45,.12);border-radius:18px;background:rgba(255,255,255,.82);box-shadow:0 15px 35px rgba(88,58,33,.07)}.home-seo-facts article>span{width:52px;height:52px;border-radius:15px;display:grid;place-items:center;background:linear-gradient(135deg,#2474c8,#159ca4);color:#fff}.home-seo-facts svg{width:24px;height:24px}.home-seo-facts b{display:block;margin-bottom:4px;font-size:16px}.home-seo-facts p{margin:0;color:#6a5c4f;line-height:1.55;font-size:13px}.home-seo-content>.seo-cluster{max-width:1160px;margin:42px auto 0}
@media(max-width:900px){.home-seo-content{padding:48px 18px}.home-seo-content__inner{grid-template-columns:1fr;gap:28px}.home-seo-intro h1{font-size:38px}.home-seo-content>.seo-cluster{margin-top:30px}}
@media(max-width:600px){.home-seo-content{padding:38px 14px}.home-seo-intro h1{font-size:31px}.home-seo-intro p{font-size:15px}.home-seo-actions a{width:100%;justify-content:center}.home-seo-facts article{grid-template-columns:46px minmax(0,1fr);padding:13px}.home-seo-facts article>span{width:46px;height:46px}}

/* =========================================================
   MOBILE HOME RACK-FIRST FIX 2026-07-14
   Keep the 3D rack portal as the first and only mobile home view.
   SEO landing content remains available on desktop and through
   the dedicated kejar-paket pages linked from the drawer.
   ========================================================= */
@media (max-width:899px){
  body.home-page .desktop-scene{display:none!important}
  body.home-page .mobile-portal{
    display:block!important;
    visibility:visible!important;
    opacity:1!important;
  }
  body.home-page .mobile-portal-canvas{
    display:block!important;
    visibility:visible!important;
    opacity:1!important;
    filter:none!important;
    animation:bhbRackPortalEntry .68s cubic-bezier(.2,.8,.2,1) both;
  }
  body.home-page .home-seo-content{
    display:none!important;
  }
}

@keyframes bhbRackPortalEntry{
  from{opacity:0;filter:blur(5px) brightness(.88);transform:scale(1.025)}
  to{opacity:1;filter:none;transform:scale(1)}
}


/* Testimoni terverifikasi */
.testimonial-section{margin:34px 0 8px}.testimonial-heading{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;margin-bottom:17px}.testimonial-heading small,.testimonial-form-section>div>small{font-size:11px;letter-spacing:1.25px;font-weight:900;color:#a6672f}.testimonial-heading h2,.testimonial-form-section h2{margin:5px 0 0!important}.testimonial-heading>span{display:inline-flex;align-items:center;gap:7px;padding:8px 11px;border-radius:999px;background:#edf7f0;color:#287849;font-size:12px;font-weight:850}.testimonial-heading>span svg{width:17px;height:17px}.testimonial-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}.testimonial-card{padding:19px;border:1px solid rgba(95,66,43,.13);border-radius:18px;background:linear-gradient(145deg,#fff,#fffaf4);box-shadow:0 14px 32px rgba(75,51,31,.07);display:grid;gap:13px}.testimonial-stars{display:flex;gap:3px}.testimonial-stars svg{width:17px;height:17px;color:#d2c1ae}.testimonial-stars svg.filled{color:#e4a817;fill:currentColor}.testimonial-card blockquote{margin:0;color:#4d4036;line-height:1.72;font-size:14px}.testimonial-card footer{display:grid;grid-template-columns:42px minmax(0,1fr) 20px;align-items:center;gap:10px}.testimonial-card footer>span{width:42px;height:42px;border-radius:13px;display:grid;place-items:center;background:linear-gradient(135deg,#ce3974,#7c46b8);color:#fff;font-weight:900}.testimonial-card footer b{display:block;font-size:13px}.testimonial-card footer small{display:block;margin-top:3px;color:#7b6b5c;font-size:11px}.testimonial-card footer>svg{width:19px;height:19px;color:#248a55}.testimonial-pagination{display:flex;gap:7px;flex-wrap:wrap;margin-top:18px}.testimonial-pagination a{min-width:35px;height:35px;padding:0 8px;border-radius:10px;display:grid;place-items:center;text-decoration:none;background:#f4eee7;color:#58483a;font-weight:850}.testimonial-pagination a.active{background:#ce3974;color:#fff}.testimonial-empty{padding:30px;border:1px dashed rgba(98,67,43,.24);border-radius:19px;text-align:center;background:#fffaf4}.testimonial-empty>svg{width:42px;height:42px;color:#ce3974}.testimonial-empty h3{margin:10px 0 7px}.testimonial-empty p{margin:0;color:#756557;line-height:1.65}.testimonial-form-section{margin:34px 0 10px;padding:24px;border-radius:22px;background:linear-gradient(145deg,#f8f0e5,#fff);border:1px solid rgba(100,69,44,.14)}.testimonial-form-section>div>p{color:#756557;line-height:1.65}.testimonial-notice{margin:15px 0;padding:13px 15px;border-radius:13px;background:#edf7f0;color:#246b42;font-weight:750}.testimonial-form{display:grid;gap:14px}.testimonial-form-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.testimonial-form label{display:grid;gap:7px;font-size:12px;font-weight:850;color:#5d5046}.testimonial-form input,.testimonial-form select,.testimonial-form textarea{width:100%;border:1px solid #ddd1c3;border-radius:12px;background:#fff;padding:12px 13px;font:inherit;color:#392f27;outline:0}.testimonial-form input:focus,.testimonial-form select:focus,.testimonial-form textarea:focus{border-color:#ce6b98;box-shadow:0 0 0 3px rgba(206,57,116,.11)}.testimonial-consent{display:flex!important;align-items:flex-start;grid-template-columns:none!important;gap:10px!important;font-weight:650!important;line-height:1.5}.testimonial-consent input{width:19px!important;height:19px;margin-top:1px;accent-color:#ce3974;flex:none}.testimonial-submit{width:max-content;border:0;border-radius:13px;padding:12px 16px;display:inline-flex;align-items:center;gap:8px;background:#ce3974;color:#fff;font-weight:850;cursor:pointer}.testimonial-submit:hover{transform:translateY(-1px);box-shadow:0 10px 20px rgba(206,57,116,.2)}.testimonial-submit svg{width:18px;height:18px}.testimonial-honeypot{position:absolute!important;left:-9999px!important;width:1px!important;height:1px!important;overflow:hidden!important}
@media(max-width:700px){.testimonial-grid,.testimonial-form-grid{grid-template-columns:1fr}.testimonial-heading{align-items:flex-start;flex-direction:column}.testimonial-form-section{padding:16px}.testimonial-submit{width:100%;justify-content:center}}


/* PPDB Online Tahap 1 */
.ppdb-body{margin:0;min-height:100vh;background:linear-gradient(135deg,#f2e8dc,#fff8ed);color:#2d261f;font-family:Arial,Helvetica,sans-serif}.ppdb-shell{max-width:1180px;margin:0 auto;padding:22px 20px 60px}.ppdb-topbar{display:flex;align-items:center;justify-content:space-between;gap:18px;padding:14px 18px;border-radius:20px;background:rgba(42,35,30,.95);color:#fff;box-shadow:0 14px 35px rgba(45,31,20,.18)}.ppdb-brand{display:flex;align-items:center;gap:12px;color:#fff;text-decoration:none}.ppdb-brand img{width:54px;height:54px;object-fit:contain}.ppdb-brand b{font-size:22px;letter-spacing:.05em}.ppdb-brand small{display:block;margin-top:4px;font-size:10px;letter-spacing:.12em;color:#d9cfc6}.ppdb-top-actions{display:flex;gap:9px}.ppdb-top-actions a{display:inline-flex;align-items:center;gap:7px;padding:10px 12px;border-radius:11px;color:#fff;text-decoration:none;background:rgba(255,255,255,.1);font-weight:800;font-size:12px}.ppdb-top-actions svg{width:18px;height:18px}.ppdb-hero{margin:24px 0 18px;padding:34px;border-radius:25px;background:linear-gradient(135deg,#2474c8,#159ca4);color:#fff;display:flex;justify-content:space-between;align-items:center;gap:24px;box-shadow:0 18px 45px rgba(36,116,200,.2)}.ppdb-hero small{font-size:11px;letter-spacing:.16em;font-weight:900}.ppdb-hero h1{margin:8px 0 11px;font-size:clamp(30px,5vw,48px);line-height:1.08}.ppdb-hero p{max-width:760px;margin:0;line-height:1.7}.ppdb-hero>span{width:110px;height:110px;border-radius:30px;background:rgba(255,255,255,.16);display:grid;place-items:center;flex:none}.ppdb-hero>span svg{width:58px;height:58px}.ppdb-layout{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:18px;align-items:start}.ppdb-form,.ppdb-sidebar{background:#fffdf9;border:1px solid rgba(103,73,48,.13);border-radius:22px;box-shadow:0 16px 40px rgba(70,47,28,.08)}.ppdb-form{padding:22px}.ppdb-progress{display:grid;grid-template-columns:repeat(4,1fr);gap:7px;margin-bottom:24px}.ppdb-progress span{display:flex;align-items:center;gap:7px;padding:8px;border-radius:12px;background:#f4efe8;color:#7e7064;font-size:11px;font-weight:850}.ppdb-progress b{width:28px;height:28px;border-radius:9px;background:#e4dbd0;display:grid;place-items:center}.ppdb-progress span.active{background:#e7f1fc;color:#2363a9}.ppdb-progress span.active b{background:#2474c8;color:#fff}.ppdb-step{display:grid;gap:16px}.ppdb-js .ppdb-step{display:none}.ppdb-js .ppdb-step.active{display:grid;animation:ppdbStepIn .3s ease both}@keyframes ppdbStepIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}.ppdb-step-head{display:flex;align-items:center;gap:12px;padding-bottom:14px;border-bottom:1px solid #eee5da}.ppdb-step-head>span{width:48px;height:48px;border-radius:14px;background:linear-gradient(135deg,#2474c8,#159ca4);color:#fff;display:grid;place-items:center}.ppdb-step-head svg{width:24px;height:24px}.ppdb-step-head small{font-size:10px;letter-spacing:.14em;font-weight:900;color:#a36b35}.ppdb-step-head h2{margin:4px 0 0;font-size:23px}.ppdb-form label{display:grid;gap:7px;font-size:12px;font-weight:850;color:#5e5146}.ppdb-form label small{font-weight:500;color:#8a7b6d}.ppdb-form input,.ppdb-form select,.ppdb-form textarea{width:100%;border:1px solid #ddd1c4;border-radius:12px;background:#fff;padding:12px 13px;color:#352c25;font:inherit;outline:0}.ppdb-form input:focus,.ppdb-form select:focus,.ppdb-form textarea:focus{border-color:#5595d3;box-shadow:0 0 0 3px rgba(36,116,200,.12)}.ppdb-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:13px}.ppdb-step-actions{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:5px;padding-top:15px;border-top:1px solid #eee5da}.ppdb-step-actions button,.status-form button{border:0;border-radius:12px;padding:12px 15px;background:#2474c8;color:#fff;font-weight:850;display:inline-flex;align-items:center;gap:8px;cursor:pointer}.ppdb-step-actions button.secondary{background:#f0eae3;color:#51453a}.ppdb-step-actions button.submit{background:#249358}.ppdb-step-actions svg{width:18px;height:18px}.program-choice{display:grid;grid-template-columns:repeat(3,1fr);gap:11px}.program-choice label{display:block}.program-choice input{position:absolute;opacity:0;pointer-events:none}.program-choice label>span{min-height:125px;border:2px solid #eee5dc;border-radius:17px;padding:16px;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:7px;cursor:pointer;background:#fff}.program-choice label>span>svg{width:31px;height:31px;color:#2474c8}.program-choice b{font-size:16px}.program-choice small{font-size:11px}.program-choice input:checked+span{border-color:#2474c8;background:#edf5ff;box-shadow:0 9px 22px rgba(36,116,200,.12)}.mode-choice label>span>svg{color:#159ca4}.upload-note{margin:0;padding:12px 14px;border-radius:12px;background:#fff5df;color:#72531b;font-size:12px;line-height:1.55}.upload-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.upload-grid label{padding:14px;border:1px solid #e2d8cd;border-radius:15px;background:#fff}.upload-grid label>span{display:grid;grid-template-columns:38px 1fr;column-gap:10px;align-items:center;margin-bottom:9px}.upload-grid label>span>svg{grid-row:1/3;width:28px;height:28px;color:#2474c8}.upload-grid label>span b{font-size:13px}.upload-grid label>span small{font-size:10px}.upload-grid input{padding:8px;font-size:11px}.ppdb-confirm{display:flex;gap:12px;padding:15px;border-radius:15px;background:#edf5ff;color:#315375}.ppdb-confirm svg{width:24px;height:24px;flex:none}.ppdb-confirm p{margin:0;line-height:1.65;font-size:13px}.ppdb-consent{display:flex!important;align-items:flex-start;gap:10px!important;padding:15px;border:1px solid #ded3c7;border-radius:14px;background:#faf6f1;line-height:1.6}.ppdb-consent input{width:20px!important;height:20px;flex:none;margin-top:2px;accent-color:#2474c8}.ppdb-sidebar{padding:16px;display:grid;gap:10px;position:sticky;top:18px}.ppdb-sidebar article{display:grid;grid-template-columns:42px minmax(0,1fr);gap:10px;padding:13px;border-radius:14px;background:#f8f3ed}.ppdb-sidebar article>span{width:42px;height:42px;border-radius:12px;background:#e5f0fa;color:#2474c8;display:grid;place-items:center}.ppdb-sidebar article svg{width:21px;height:21px}.ppdb-sidebar b{font-size:13px}.ppdb-sidebar p{font-size:11px;line-height:1.55;color:#74665b;margin:5px 0 0}.ppdb-sidebar>a{display:flex;justify-content:center;align-items:center;gap:8px;padding:12px;border-radius:12px;background:#2d2926;color:#fff;text-decoration:none;font-weight:850;font-size:12px}.ppdb-alert{display:flex;gap:11px;align-items:flex-start;padding:14px 16px;border-radius:14px;margin:14px 0}.ppdb-alert--error{background:#ffe8e5;color:#8a3029;border:1px solid #f1c0ba}.ppdb-alert svg{width:22px;height:22px;flex:none}.ppdb-alert b{display:block}.ppdb-alert ul{margin:7px 0 0;padding-left:18px;line-height:1.55;font-size:12px}.ppdb-honeypot{position:absolute!important;left:-9999px!important;width:1px!important;height:1px!important}.ppdb-result-shell,.ppdb-status-shell{min-height:100vh;display:grid;place-items:center;padding:24px}.ppdb-result-card,.status-card{width:min(720px,100%);padding:30px;border-radius:25px;background:#fff;box-shadow:0 24px 60px rgba(63,42,27,.13);border:1px solid #eadfd3}.ppdb-result-card{text-align:center}.result-icon{width:80px;height:80px;border-radius:24px;background:#e3f6ea;color:#24884e;display:grid;place-items:center;margin:0 auto 17px}.result-icon.error{background:#ffe9e7;color:#b83e35}.result-icon svg{width:42px;height:42px}.ppdb-result-card>small{font-weight:900;letter-spacing:.13em;color:#24884e}.ppdb-result-card h1{font-size:32px;margin:8px 0 10px}.ppdb-result-card>p{line-height:1.65;color:#74665b}.result-codes{display:grid;grid-template-columns:repeat(2,1fr);gap:11px;margin:22px 0}.result-codes>div{padding:16px;border-radius:15px;background:#f4efe9}.result-codes small{display:block;font-size:10px;color:#7b6d61}.result-codes b{display:block;margin-top:7px;font-size:18px;letter-spacing:.06em;word-break:break-all}.result-summary,.status-details,.proof-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:8px;text-align:left}.result-summary p,.status-details p,.proof-grid p{margin:0;padding:11px 12px;border-radius:11px;background:#faf6f1}.result-summary span,.status-details span,.proof-grid span{display:block;font-size:10px;color:#847568}.result-summary b,.status-details b,.proof-grid b{display:block;margin-top:5px;font-size:13px}.result-actions{display:flex;justify-content:center;gap:9px;flex-wrap:wrap;margin-top:20px}.result-actions a{display:inline-flex;align-items:center;gap:7px;padding:11px 14px;border-radius:11px;background:#f0eae3;color:#4b4037;text-decoration:none;font-weight:850;font-size:12px}.result-actions a.primary{background:#2474c8;color:#fff}.result-actions svg{width:17px;height:17px}.status-header{width:min(720px,100%);margin-bottom:12px}.status-header>a{display:flex;align-items:center;gap:11px;text-decoration:none;color:#2d261f}.status-header img{width:57px;height:57px;object-fit:contain}.status-header b{display:block;font-size:22px}.status-header small{font-size:10px;letter-spacing:.1em}.status-intro{display:flex;gap:14px;align-items:center}.status-intro>span{width:62px;height:62px;border-radius:18px;background:#e6f1fc;color:#2474c8;display:grid;place-items:center;flex:none}.status-intro>span svg{width:31px;height:31px}.status-intro small{color:#a66d35;font-weight:900;letter-spacing:.12em}.status-intro h1{margin:5px 0 7px}.status-intro p{margin:0;color:#76685d;line-height:1.55}.status-form{display:grid;grid-template-columns:1fr 180px auto;gap:10px;align-items:end;margin:22px 0}.status-form label{display:grid;gap:7px;font-size:11px;font-weight:850}.status-form input{border:1px solid #ddd1c4;border-radius:11px;padding:12px;font:inherit}.status-result{margin-top:18px;padding:19px;border-radius:18px;background:#f8f4ee;border:1px solid #e4d9cd}.status-result-head{display:flex;gap:11px;align-items:center;margin-bottom:13px}.status-result-head>span{width:48px;height:48px;border-radius:14px;background:#fff;display:grid;place-items:center}.status-result-head h2{margin:4px 0 0}.status-result-head small{font-size:10px;letter-spacing:.12em}.status-green .status-result-head{color:#247d48}.status-blue .status-result-head{color:#276eae}.status-amber .status-result-head{color:#9b671c}.status-orange .status-result-head{color:#b55425}.status-red .status-result-head{color:#a73b34}.admin-note{display:flex;gap:11px;margin-top:13px;padding:14px;border-radius:13px;background:#fff5df;color:#674d1d}.admin-note svg{width:22px;height:22px;flex:none}.admin-note p{margin:5px 0 0;line-height:1.6;font-size:12px}.proof-body{background:#ece7e1}.proof-shell{max-width:820px;margin:0 auto;padding:24px}.proof-paper{background:#fff;min-height:900px;padding:45px;border:1px solid #d9d1c8;box-shadow:0 20px 55px rgba(44,34,25,.14)}.proof-paper>header{display:flex;align-items:center;gap:15px;padding-bottom:18px;border-bottom:3px double #3d352e}.proof-paper>header img{width:80px;height:80px;object-fit:contain}.proof-paper>header h1{margin:0;font-size:29px;letter-spacing:.05em}.proof-paper>header p{margin:4px 0;font-weight:800}.proof-paper>header small{line-height:1.4}.proof-title{text-align:center;margin:32px 0}.proof-title small{letter-spacing:.15em;font-weight:900}.proof-title h2{margin:8px 0 0;font-size:25px}.proof-grid{gap:10px}.proof-grid p{border:1px solid #ece5de;background:#fff}.proof-status{display:flex;align-items:center;gap:11px;margin:24px 0;padding:14px;border-radius:14px;background:#edf5ff}.proof-status>span{width:44px;height:44px;border-radius:12px;background:#2474c8;color:#fff;display:grid;place-items:center}.proof-status small{display:block;font-size:9px}.proof-status b{display:block;margin-top:4px}.proof-note{padding:15px;border:1px dashed #cfc3b8;border-radius:12px;line-height:1.6;font-size:12px}.proof-paper>footer{display:flex;justify-content:space-between;gap:15px;margin-top:50px}.proof-paper>footer small{display:block}.proof-paper>footer b{display:block;margin-top:5px}.proof-actions{display:flex;justify-content:center;gap:10px;margin:18px}.proof-actions button,.proof-actions a{border:0;border-radius:11px;padding:11px 14px;background:#2474c8;color:#fff;text-decoration:none;font-weight:850;display:inline-flex;gap:7px;align-items:center;cursor:pointer}.proof-actions a{background:#4f453d}.proof-actions svg{width:18px;height:18px}
@media(max-width:900px){.ppdb-layout{grid-template-columns:1fr}.ppdb-sidebar{position:static;grid-template-columns:repeat(3,1fr)}.ppdb-sidebar>a{grid-column:1/-1}.status-form{grid-template-columns:1fr 1fr}.status-form button{grid-column:1/-1;justify-content:center}}
@media(max-width:650px){.ppdb-shell{padding:10px 10px 38px}.ppdb-topbar{padding:10px 12px;border-radius:16px}.ppdb-brand img{width:43px;height:43px}.ppdb-brand b{font-size:17px}.ppdb-brand small{font-size:8px}.ppdb-top-actions a{width:42px;height:42px;padding:0;justify-content:center}.ppdb-top-actions a{font-size:0}.ppdb-hero{padding:23px 19px;border-radius:20px}.ppdb-hero h1{font-size:29px}.ppdb-hero p{font-size:14px}.ppdb-hero>span{display:none}.ppdb-form{padding:14px}.ppdb-progress{grid-template-columns:repeat(4,1fr);gap:4px}.ppdb-progress span{justify-content:center;padding:6px;font-size:0}.ppdb-progress b{font-size:11px}.ppdb-grid,.program-choice,.upload-grid,.result-codes,.result-summary,.status-details,.proof-grid{grid-template-columns:1fr}.ppdb-step-head h2{font-size:20px}.program-choice label>span{min-height:105px}.ppdb-sidebar{grid-template-columns:1fr}.ppdb-result-shell,.ppdb-status-shell{padding:12px}.ppdb-result-card,.status-card{padding:20px 15px}.ppdb-result-card h1{font-size:27px}.status-form{grid-template-columns:1fr}.proof-shell{padding:0}.proof-paper{padding:22px 16px;min-height:100vh}.proof-paper>header img{width:62px;height:62px}.proof-paper>header h1{font-size:22px}.proof-paper>footer{flex-direction:column;margin-top:30px}.proof-actions{position:sticky;bottom:8px}.ppdb-sidebar>a{grid-column:auto}}
@media print{.proof-actions{display:none!important}.proof-shell{padding:0}.proof-paper{box-shadow:none;border:0;min-height:auto}.proof-body{background:#fff}}

/* Tahap 2: halaman lokasi Google Maps */
.location-paper{max-width:1180px}.location-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px;margin-top:24px}.location-card{padding:18px;border:1px solid #ddd1c1;border-radius:18px;background:#fffdf8;box-shadow:0 14px 35px rgba(65,43,28,.09)}.location-card-head{display:flex;align-items:center;gap:12px}.location-card-head>span{width:48px;height:48px;border-radius:14px;background:#eee8fb;color:var(--page-color);display:grid;place-items:center}.location-card-head>span svg{width:24px;height:24px}.location-card-head small{display:block;font-size:10px;letter-spacing:.08em;color:#8b7869;font-weight:850}.location-card-head h2{margin:4px 0 0;font:700 22px/1.2 Georgia,serif;color:#382e27}.location-card>p{min-height:48px;margin:15px 0;color:#63564c;line-height:1.6}.location-meta{display:grid;gap:8px;margin-bottom:14px}.location-meta span{display:flex;align-items:center;gap:8px;font-size:12px;color:#665a51}.location-meta svg{width:17px;height:17px;color:var(--page-color)}.location-card iframe{display:block;width:100%;height:285px;border:0;border-radius:14px;background:#eee}.location-direction{display:flex;align-items:center;justify-content:center;gap:8px;margin-top:13px;padding:12px;border-radius:12px;background:var(--page-color);color:#fff;text-decoration:none;font-weight:850}.location-direction:hover{filter:brightness(1.08);transform:translateY(-1px)}.location-direction svg{width:18px;height:18px}.location-help{display:grid;grid-template-columns:auto 1fr auto;gap:13px;align-items:center;margin-top:20px;padding:16px;border-radius:15px;background:#f1ece4;border:1px solid #dcd0c2}.location-help>svg{width:27px;height:27px;color:var(--page-color)}.location-help b{display:block;color:#3f342c}.location-help p{margin:4px 0 0;font-size:12px;line-height:1.6;color:#6f6258}.location-help a{display:inline-flex;align-items:center;gap:7px;padding:11px 13px;border-radius:11px;background:#23944b;color:#fff;text-decoration:none;font-weight:850;white-space:nowrap}.location-help a svg{width:17px;height:17px}
@media(max-width:820px){.location-grid{grid-template-columns:1fr}.location-card iframe{height:240px}.location-help{grid-template-columns:auto 1fr}.location-help a{grid-column:1/-1;justify-content:center}}
@media(max-width:520px){.location-card{padding:14px}.location-card-head h2{font-size:19px}.location-card iframe{height:215px}.location-help{padding:13px}.location-help>svg{display:none}.location-help{grid-template-columns:1fr}}

/* ===== Tahap 3: Artikel SEO, testimoni terverifikasi, dan performa ===== */
.article-index-stage{align-items:start}.article-index-paper{max-width:1120px}.article-index-title{margin-bottom:18px}.article-topic-chips{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 22px}.article-topic-chips a{padding:8px 12px;border-radius:999px;background:#edf4fc;color:#245f9c;text-decoration:none;font-size:12px;font-weight:850;border:1px solid #d5e5f7}.article-list-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}.article-list-card{display:grid;grid-template-columns:145px minmax(0,1fr);gap:15px;border:1px solid #e2d8cc;border-radius:18px;padding:14px;background:#fffdf9;box-shadow:0 12px 30px rgba(67,45,28,.08);transition:transform .22s ease,box-shadow .22s ease}.article-list-card:hover{transform:translateY(-3px);box-shadow:0 18px 38px rgba(67,45,28,.13)}.article-list-card--featured{grid-column:1/-1;grid-template-columns:260px minmax(0,1fr);padding:17px}.article-card-image,.article-card-placeholder{display:flex;min-height:150px;border-radius:14px;overflow:hidden;text-decoration:none}.article-card-image img{width:100%;height:100%;object-fit:cover}.article-card-placeholder{align-items:center;justify-content:center;flex-direction:column;gap:9px;background:linear-gradient(145deg,#dceaf9,#eef5fc);color:#2474c8}.article-card-placeholder svg{width:45px;height:45px}.article-card-placeholder span{font-size:10px;letter-spacing:.16em;font-weight:900}.article-card-copy{min-width:0}.article-card-copy>small{display:block;margin:7px 0;color:#2474c8;font-size:10px;font-weight:900;letter-spacing:.06em;text-transform:uppercase}.article-card-meta{display:flex;flex-wrap:wrap;gap:8px;color:#8a796b;font-size:10px}.article-card-meta span+span:before{content:'•';margin-right:8px}.article-card-copy h2{font:700 21px/1.25 Georgia,serif;margin:7px 0}.article-list-card--featured h2{font-size:29px}.article-card-copy h2 a{color:#362c25;text-decoration:none}.article-card-copy p{margin:0;color:#6f6257;line-height:1.62;font-size:12px}.article-read-link{display:inline-flex;align-items:center;gap:6px;margin-top:12px;color:#2474c8;text-decoration:none;font-weight:900;font-size:12px}.article-read-link svg{width:16px;height:16px}.article-trust-note{display:grid;grid-template-columns:46px 1fr;gap:12px;margin:24px 0;padding:16px;border:1px solid #d8e4ef;border-radius:16px;background:#f2f7fc}.article-trust-note>svg{width:28px;height:28px;color:#2474c8}.article-trust-note b{display:block}.article-trust-note p{margin:5px 0 0;color:#665d55;font-size:12px;line-height:1.6}
.seo-article-header{padding-bottom:17px;border-bottom:1px solid #e2d7cb}.article-kicker{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:10px}.article-kicker span{padding:6px 9px;border-radius:999px;background:#edf4fc;color:#2467a8;font-size:10px;font-weight:900;text-transform:uppercase;letter-spacing:.06em}.article-byline{display:flex;flex-wrap:wrap;gap:12px;margin-top:13px;color:#77695e;font-size:11px}.article-byline span{display:inline-flex;align-items:center;gap:5px}.article-byline svg{width:15px;height:15px;color:#2474c8}.article-toc{margin:20px 0;padding:17px;border-radius:16px;background:#f7f2eb;border:1px solid #e1d6ca}.article-toc>div{display:flex;align-items:center;gap:8px;color:#3b312a}.article-toc>div svg{width:20px;height:20px;color:#2474c8}.article-toc ol{margin:12px 0 0;padding-left:22px;display:grid;gap:7px}.article-toc a{color:#4f443b;text-decoration:none;font-size:12px;line-height:1.45}.article-toc a:hover{color:#2474c8}.article-toc .toc-level-3{margin-left:16px}.seo-article-copy h2,.seo-article-copy h3{scroll-margin-top:28px}.article-cta{display:grid;grid-template-columns:56px minmax(0,1fr) auto;align-items:center;gap:15px;margin:28px 0;padding:18px;border-radius:18px;background:linear-gradient(135deg,#edf5fd,#f9fcff);border:1px solid #d7e7f6}.article-cta>span{width:56px;height:56px;border-radius:16px;background:#2474c8;color:#fff;display:grid;place-items:center}.article-cta>span svg{width:29px;height:29px}.article-cta small{font-size:9px;letter-spacing:.12em;color:#2474c8;font-weight:900}.article-cta h2{margin:4px 0 5px;font:700 20px/1.2 Georgia,serif}.article-cta p{margin:0;color:#6f6258;font-size:12px;line-height:1.55}.article-cta>a{display:inline-flex;align-items:center;gap:7px;padding:11px 13px;border-radius:12px;background:#2474c8;color:#fff;text-decoration:none;font-size:12px;font-weight:900;white-space:nowrap}.article-cta>a svg{width:17px;height:17px}.related-articles{margin:28px 0}.related-articles__head small{color:#2474c8;font-weight:900;letter-spacing:.1em;font-size:9px}.related-articles__head h2{margin:5px 0 12px;font:700 24px/1.2 Georgia,serif}.related-articles__grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.related-articles__grid>a{display:grid;grid-template-columns:42px 1fr 18px;gap:10px;align-items:center;padding:12px;border:1px solid #e2d8cc;border-radius:14px;color:#42372f;text-decoration:none;background:#fffdf9}.related-articles__grid>a>span{width:42px;height:42px;border-radius:12px;background:#edf4fc;color:#2474c8;display:grid;place-items:center}.related-articles__grid svg{width:19px;height:19px}.related-articles__grid small{display:block;color:#807267;font-size:9px;text-transform:uppercase}.related-articles__grid b{display:block;margin-top:4px;font-size:12px;line-height:1.35}.article-faq{margin-top:26px}.testimonial-verified{margin-left:auto;display:inline-flex!important;align-items:center;gap:4px;color:#257a49!important;font-size:9px!important;font-weight:900!important;white-space:nowrap}.testimonial-verified svg{width:16px!important;height:16px!important}.testimonial-form label small{display:block;margin-top:4px;color:#88786b;font-size:9px;line-height:1.4}.home-seo-content,.seo-cluster,.content-sidebar,.article-list-card{content-visibility:auto;contain-intrinsic-size:1px 420px}
.bhb-page-hidden *{animation-play-state:paused!important}.bhb-reduced-motion *,.bhb-save-data .scene-menu,.bhb-save-data .board-writing,.bhb-save-data .mobile-furniture{animation-duration:.001ms!important;animation-iteration-count:1!important;scroll-behavior:auto!important}.bhb-save-data .content-page-shell{background-image:none!important;background-color:#efe8dd!important}
@media(max-width:900px){.article-list-grid{grid-template-columns:1fr}.article-list-card--featured{grid-column:auto}.article-list-card,.article-list-card--featured{grid-template-columns:165px minmax(0,1fr)}.article-list-card--featured h2{font-size:23px}.article-cta{grid-template-columns:48px minmax(0,1fr)}.article-cta>span{width:48px;height:48px}.article-cta>a{grid-column:1/-1;justify-content:center}.related-articles__grid{grid-template-columns:1fr}}
@media(max-width:600px){.article-list-card,.article-list-card--featured{grid-template-columns:1fr;padding:12px}.article-card-image,.article-card-placeholder{min-height:175px}.article-list-card--featured h2,.article-card-copy h2{font-size:21px}.article-topic-chips{overflow:auto;flex-wrap:nowrap;padding-bottom:4px}.article-topic-chips a{white-space:nowrap}.article-kicker{gap:5px}.article-byline{display:grid;gap:6px}.article-toc{padding:14px}.article-cta{grid-template-columns:1fr;text-align:center}.article-cta>span{margin:auto}.article-cta>a{grid-column:auto}.testimonial-verified{margin-left:0;margin-top:5px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.scene-menu,.board-writing,.mobile-board-writing,.scene-furniture,.mobile-furniture{animation:none!important}}
.home-article-strip{max-width:1160px;margin:38px auto 0;padding:22px;border-radius:22px;background:rgba(255,255,255,.86);border:1px solid rgba(87,59,38,.12);box-shadow:0 18px 42px rgba(80,53,31,.07)}.home-article-strip__head{display:flex;justify-content:space-between;gap:15px;align-items:end;margin-bottom:14px}.home-article-strip__head small{font-size:9px;letter-spacing:.12em;color:#2474c8;font-weight:900}.home-article-strip__head h2{margin:4px 0 0;font:700 28px/1.2 Georgia,serif}.home-article-strip__head>a{display:inline-flex;align-items:center;gap:6px;color:#2474c8;text-decoration:none;font-size:12px;font-weight:900}.home-article-strip__head svg{width:16px;height:16px}.home-article-strip__grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:11px}.home-article-strip__grid>a{display:grid;grid-template-columns:42px minmax(0,1fr) 18px;gap:10px;align-items:center;padding:13px;border-radius:14px;background:#f7f3ee;color:#42372f;text-decoration:none;border:1px solid #e7ddd2}.home-article-strip__grid>a>span{width:42px;height:42px;border-radius:12px;display:grid;place-items:center;background:#e6f0fb;color:#2474c8}.home-article-strip__grid svg{width:19px;height:19px}.home-article-strip__grid small{display:block;color:#847568;font-size:9px;text-transform:uppercase}.home-article-strip__grid b{display:block;margin-top:4px;font-size:12px;line-height:1.35}.desktop-help-chip--article{background:linear-gradient(135deg,rgba(90,57,153,.94),rgba(36,116,200,.94))!important}
@media(max-width:900px){.home-article-strip__grid{grid-template-columns:1fr}.home-article-strip{margin-top:28px}}
@media(max-width:600px){.home-article-strip{padding:15px}.home-article-strip__head{align-items:start}.home-article-strip__head h2{font-size:23px}.home-article-strip__head>a span{display:none}}


/* Tampilan testimoni publik dan status verifikasi. */
.testimonial-disclosure{display:grid;grid-template-columns:38px minmax(0,1fr);gap:11px;align-items:start;margin:0 0 17px;padding:13px 14px;border:1px solid #ead9b9;border-radius:15px;background:#fff8e8;color:#5c4932}.testimonial-disclosure>svg{width:22px;height:22px;margin-top:2px;color:#b27317}.testimonial-disclosure b{display:block;font-size:12px}.testimonial-disclosure p{margin:4px 0 0;font-size:11px;line-height:1.55;color:#746048}.testimonial-example{margin-left:auto;display:inline-flex!important;align-items:center;gap:4px;color:#9a6116!important;font-size:9px!important;font-weight:900!important;white-space:nowrap;background:#fff4d8!important;width:auto!important;height:auto!important;padding:5px 7px!important;border-radius:999px!important}.testimonial-example svg{width:14px!important;height:14px!important}.testimonial-card:has(.testimonial-example){border-style:dashed;background:linear-gradient(145deg,#fffdf8,#fff8e9)}
@media(max-width:600px){.testimonial-example{margin-left:0;margin-top:5px}.testimonial-disclosure{grid-template-columns:30px minmax(0,1fr);padding:12px}.testimonial-disclosure>svg{width:19px;height:19px}}

.auth-honeypot{position:absolute!important;left:-9999px!important;top:auto!important;width:1px!important;height:1px!important;opacity:0!important;pointer-events:none!important;overflow:hidden!important}

/* Checklist kelengkapan berkas pada halaman cek status PPDB */
.public-document-checklist{margin:18px 0;padding:16px;border-radius:17px;background:#f8f4ee;border:1px solid #e5d9cc}.public-document-head{display:flex;justify-content:space-between;align-items:end;gap:12px}.public-document-head small{font-size:9px;letter-spacing:.12em;color:#2474c8;font-weight:900}.public-document-head h3{margin:4px 0 0;font:700 21px/1.2 Georgia,serif}.public-document-head>b{font-size:24px;color:#2f8a50}.public-document-progress{height:8px;margin:9px 0 13px;border-radius:999px;background:#ded5cc;overflow:hidden}.public-document-progress span{display:block;height:100%;border-radius:999px;background:linear-gradient(90deg,#2474c8,#3b9560)}.public-document-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px}.public-document-grid article{display:grid;grid-template-columns:36px minmax(0,1fr);gap:9px;align-items:start;padding:10px;border-radius:12px;background:#fff;border:1px solid #e4d9ce}.public-document-grid article>span{width:36px;height:36px;border-radius:10px;display:grid;place-items:center;background:#edf4fc;color:#2474c8}.public-document-grid b{display:block;font-size:11px}.public-document-grid small{display:block;margin-top:3px;font-size:9px;color:#776a60}.public-document-grid p{margin:6px 0 0;font-size:10px;line-height:1.45;color:#6d6056}.public-document-grid .doc-state--success{border-color:#b9dcc7;background:#f2fbf5}.public-document-grid .doc-state--success>span{background:#e2f5e9;color:#2d8652}.public-document-grid .doc-state--danger{border-color:#efc1b7;background:#fff4f1}.public-document-grid .doc-state--danger>span{background:#ffe7e1;color:#b54a30}.public-document-grid .doc-state--warning{border-color:#ead6aa;background:#fffbed}.public-document-grid .doc-state--warning>span{background:#fff0cc;color:#a87016}.public-document-grid .doc-state--muted{opacity:.78}
@media(max-width:600px){.public-document-grid{grid-template-columns:1fr}.public-document-checklist{padding:13px}.public-document-head h3{font-size:18px}}

/* ===== Tahap 8: portal daftar ulang & pembayaran ===== */
.ppdb-alert--success{background:#e7f7ed;color:#246d43;border:1px solid #bfe1cb}.payment-public-body{background:linear-gradient(135deg,#eee5da,#f8f3ea 48%,#edf5fb)}.payment-portal-shell{min-height:100vh;padding:24px;display:flex;flex-direction:column;align-items:center}.payment-portal-shell .status-header{width:min(880px,100%)}.payment-portal-card{width:min(880px,100%);padding:30px;border-radius:25px;background:#fff;box-shadow:0 24px 60px rgba(63,42,27,.13);border:1px solid #eadfd3}.payment-lookup-form{grid-template-columns:1fr 190px auto}.payment-public-result{margin-top:18px;border-radius:20px;background:#faf7f2;border:1px solid #e7ddd2;padding:20px}.payment-public-head{display:flex;justify-content:space-between;gap:18px;align-items:flex-start}.payment-public-head small{font-size:10px;letter-spacing:.1em;color:#9a6a3d;font-weight:900}.payment-public-head h2{margin:5px 0 4px;font-size:26px}.payment-public-head p{margin:0;color:#75685d}.payment-public-status{display:inline-flex;align-items:center;gap:7px;padding:9px 12px;border-radius:999px;font-weight:900;font-size:11px;white-space:nowrap}.payment-public-status--success{background:#e4f7eb;color:#217845}.payment-public-status--warning{background:#fff2d6;color:#97600f}.payment-public-status--info{background:#e5f1ff;color:#2869ab}.payment-public-status--danger{background:#ffe7e3;color:#aa3d34}.payment-public-status--muted{background:#eceae7;color:#6c655e}.payment-public-amount{margin:18px 0;padding:20px;border-radius:17px;background:linear-gradient(135deg,#2c6fb5,#1d9596);color:#fff;text-align:center}.payment-public-amount small{letter-spacing:.16em;font-size:9px;font-weight:900}.payment-public-amount b{display:block;font-size:36px;margin:7px 0}.payment-public-amount p{margin:0;font-size:12px}.payment-public-amount em{display:inline-block;margin-top:9px;padding:6px 9px;border-radius:999px;background:rgba(255,255,255,.15);font-size:10px;font-style:normal}.payment-waiting-box,.payment-paid-box{display:grid;grid-template-columns:52px 1fr;gap:13px;padding:16px;border-radius:16px;background:#fff5df;border:1px solid #ead5a8;color:#73531b}.payment-waiting-box>svg{width:31px;height:31px}.payment-waiting-box h3,.payment-paid-box h3{margin:0 0 6px}.payment-waiting-box p,.payment-paid-box p{margin:4px 0;line-height:1.6;font-size:12px}.payment-waiting-box--pending{background:#eaf3ff;border-color:#c3d9ef;color:#2a5f91}.payment-paid-box{grid-template-columns:62px 1fr;background:#eaf8ef;border-color:#bfe1cb;color:#245e3c}.payment-paid-box>span{width:62px;height:62px;border-radius:18px;background:#fff;display:grid;place-items:center;color:#24814b}.payment-paid-box>span svg{width:34px;height:34px}.bank-information{margin:17px 0;padding:18px;border-radius:17px;background:#fff;border:1px solid #e4d9ce}.bank-information small{font-size:9px;letter-spacing:.13em;color:#9c6a38;font-weight:900}.bank-information h3{margin:5px 0 13px;font-size:22px}.bank-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:9px}.bank-grid p{margin:0;padding:12px;border-radius:12px;background:#f6f1eb}.bank-grid span{display:block;font-size:9px;color:#86786d}.bank-grid b{display:block;margin-top:5px;font-size:15px;word-break:break-all}.bank-note{margin:12px 0 0!important;color:#6f6258;line-height:1.6;font-size:11px}.payment-upload-form{display:grid;gap:13px;padding:18px;border-radius:17px;background:#fff;border:1px solid #e4d9ce}.payment-upload-form .form-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}.payment-upload-form label{display:grid;gap:7px;font-size:11px;font-weight:850;color:#5e5146}.payment-upload-form label small{font-weight:500;color:#8a7b6d}.payment-upload-form input,.payment-upload-form select{width:100%;border:1px solid #ddd1c4;border-radius:11px;background:#fff;padding:11px 12px;font:inherit}.payment-upload-form button{border:0;border-radius:12px;padding:13px 15px;background:#249358;color:#fff;font-weight:900;display:inline-flex;justify-content:center;align-items:center;gap:8px;cursor:pointer}.proof-view-link{display:inline-flex;align-items:center;gap:7px;margin-top:11px;color:#276aa9;font-size:11px;font-weight:850;text-decoration:none}.payment-help-links{display:flex;justify-content:center;gap:9px;flex-wrap:wrap;margin-top:19px}.payment-help-links a{display:inline-flex;align-items:center;gap:7px;padding:10px 12px;border-radius:11px;background:#f2ede7;color:#4c4138;text-decoration:none;font-size:11px;font-weight:850}.status-payment-callout{display:grid;grid-template-columns:48px 1fr;gap:11px;padding:14px;margin-top:16px;border-radius:15px;background:#eaf3ff;border:1px solid #c4daef;color:#2b5d8b}.status-payment-callout>span{width:48px;height:48px;border-radius:13px;background:#fff;display:grid;place-items:center}.status-payment-callout small{font-size:9px;letter-spacing:.12em;font-weight:900}.status-payment-callout h3{margin:4px 0}.status-payment-callout p{margin:0;font-size:11px;line-height:1.55}.payment-receipt-paper{position:relative;overflow:hidden}.receipt-paid-stamp{position:absolute;right:42px;top:145px;border:4px solid #2b8a57;color:#2b8a57;border-radius:10px;padding:8px 16px;font-size:28px;font-weight:900;letter-spacing:.08em;transform:rotate(-8deg);opacity:.88}
@media(max-width:760px){.payment-portal-shell{padding:14px}.payment-portal-card{padding:20px;border-radius:20px}.payment-lookup-form{grid-template-columns:1fr}.payment-public-head{display:grid}.payment-public-status{justify-self:start}.payment-public-amount b{font-size:30px}.payment-upload-form .form-grid,.bank-grid{grid-template-columns:1fr}.payment-waiting-box,.payment-paid-box{grid-template-columns:1fr}.receipt-paid-stamp{position:static;display:inline-block;margin:10px 0;transform:rotate(-4deg)}}
@media(max-width:480px){.payment-public-result{padding:14px}.payment-public-head h2{font-size:22px}.payment-public-amount{padding:16px}.payment-public-amount b{font-size:27px}.payment-portal-card .status-intro{align-items:flex-start}.payment-portal-card .status-intro>span{width:50px;height:50px}.payment-portal-card .status-intro>span svg{width:25px;height:25px}}

/* ==============================================================
   PATCH KONTEN RATA KANAN-KIRI
   Menjaga judul, tombol, label, metadata, angka, dan form tetap rata
   normal. Hanya teks isi/paragraf yang dibuat justify agar rapi.
   ============================================================== */
.content-page-shell :where(.content-paper,.article-paper,.location-paper) :where(p,li,blockquote),
.home-seo-content :where(p,li),
.seo-faq details p,
.article-list-card .article-card-copy p,
.article-trust-note p,
.article-cta p,
.testimonial-card blockquote,
.testimonial-disclosure p,
.ppdb-shell :where(.ppdb-hero,.ppdb-step,.ppdb-confirm,.ppdb-sidebar,.ppdb-alert) :where(p,li),
.ppdb-result-card > p,
.ppdb-status-shell :where(.status-intro,.admin-note,.doc-state,.status-payment-callout) p,
.payment-portal-card :where(.payment-public-head,.payment-waiting-box,.payment-paid-box,.bank-information,.status-payment-callout) p,
.proof-paper .proof-note {
  text-align: justify;
  text-align-last: left;
  text-justify: inter-word;
  -webkit-hyphens: auto;
  hyphens: auto;
  overflow-wrap: break-word;
}

/* Isi yang berasal dari editor admin dapat berisi paragraf, daftar,
   kutipan, dan elemen nested. Semua body copy tetap konsisten. */
.content-copy :where(p,li,blockquote),
.article-copy :where(p,li,blockquote),
.seo-article-copy :where(p,li,blockquote) {
  text-align: justify;
  text-align-last: left;
  text-justify: inter-word;
  -webkit-hyphens: auto;
  hyphens: auto;
  overflow-wrap: break-word;
}

/* Jangan memaksakan justify pada elemen pendek/terstruktur. */
.content-page-shell :where(.content-meta,.article-byline,.article-kicker,.article-share,.article-toc,.related-grid,.related-articles,.content-actions,.content-footer) :where(p,li,blockquote),
.ppdb-shell :where(.program-choice,.ppdb-progress,.ppdb-step-actions,.result-summary,.status-details,.proof-grid) p,
.payment-portal-card :where(.payment-public-amount,.bank-grid,.payment-help-links) p,
.proof-paper :where(header,.proof-grid,footer) p {
  text-align: left;
  text-align-last: auto;
  -webkit-hyphens: none;
  hyphens: none;
}