:root{--green:#00ac97;--dark:#124d43;--yellow:#ffbf00;--ink:#233e38;--muted:#72837b;--bg:#fafbf6}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--bg);color:var(--ink);font-family:'Segoe UI',Arial,sans-serif}button,input,select{font:inherit}button,a{ -webkit-tap-highlight-color:transparent}button{cursor:pointer}a{color:inherit;text-decoration:none}.ribbon{font-size:10px;text-align:center;padding:8px;background:#e8f4ec;color:#52746b;letter-spacing:.8px}.ribbon span{margin:0 10px}.brand{display:flex;align-items:center;gap:10px;font-size:22px;font-weight:750;letter-spacing:-.6px}.brand img{width:57px;height:57px;object-fit:contain;mix-blend-mode:multiply}.academy{display:block;font-size:9px;letter-spacing:4px;margin-top:2px;font-weight:600}.btn{background:var(--green);color:white;border:1px solid transparent;border-radius:9px;padding:15px 21px;display:inline-flex;align-items:center;justify-content:center;gap:24px;font-size:13px;font-weight:650;cursor:pointer;box-shadow:0 4px 10px #00ac9710}.btn:hover{filter:brightness(.96);transform:translateY(-1px)}.btn:disabled{opacity:.6;cursor:wait}.outline{border-color:#ceded4;background:transparent;color:var(--dark);box-shadow:none}.yellow{background:var(--yellow);color:var(--dark)}.small{padding:12px 18px;font-size:12px}.full{width:100%}header{max-width:1250px;margin:auto;height:100px;padding:0 40px;display:flex;align-items:center;justify-content:space-between}nav{display:flex;align-items:center;gap:29px;font-size:12px}.eyebrow{font-size:10px;font-weight:700;letter-spacing:2px;color:#368976;display:flex;align-items:center;gap:10px}.eyebrow:before{content:'';height:2px;width:23px;background:var(--yellow)}h1,h2,h3,p{margin-top:0}h1,h2{font-family:Georgia,'Times New Roman',serif;font-weight:500}h1{font-size:62px;line-height:1.15;letter-spacing:-2px;margin:24px 0}h1 em{color:var(--green);font-weight:500}h2{font-size:38px;line-height:1.2;letter-spacing:-1px;margin:17px 0}p{font-size:14px;color:var(--muted);line-height:1.85}.hero{max-width:1250px;margin:35px auto 65px;padding:0 40px;display:grid;grid-template-columns:1.08fr 1fr;gap:45px;align-items:center}.hero>div>p{max-width:420px}.actions{display:flex;gap:12px;margin:30px 0}.hero-note{display:flex;align-items:center;gap:12px;font-size:11px;color:var(--muted)}.sun{font-size:28px;color:var(--yellow)}.hero-visual{position:relative;height:490px;background:#e2f3e9;border-radius:48% 48% 30px 30px;display:grid;place-items:center;isolation:isolate}.visual-logo{background:white;width:310px;height:330px;border-radius:44% 44% 23px 23px;display:grid;place-items:center;transform:rotate(-5deg);box-shadow:0 20px 60px #14735c15;z-index:1}.visual-logo img{width:280px;border-radius:30px;transform:rotate(5deg)}.orbit{position:absolute;width:420px;height:420px;border:1px dashed #8fcdb7;border-radius:50%;transform:rotate(-20deg)}.floating{position:absolute;background:white;border:1px solid #edf1e4;box-shadow:0 10px 35px #125d4310;border-radius:12px;padding:15px 18px;z-index:2;font-size:12px;font-weight:600;display:flex;gap:12px;align-items:center}.floating span{font-size:24px;color:var(--yellow)}.f1{left:-22px;top:80px;transform:rotate(-5deg)}.f2{right:-10px;bottom:80px;transform:rotate(5deg)}.visual-caption{position:absolute;bottom:22px;font-size:10px;letter-spacing:1px;color:#4d8873}.spark{position:absolute;color:var(--yellow);font-size:65px;z-index:3}.s1{top:5px;right:40px}.s2{bottom:50px;left:20px;font-size:40px}.values{display:flex;justify-content:center;gap:75px;background:var(--dark);color:#dfefdf;font-size:12px;padding:26px 20px}.section{max-width:1250px;margin:auto;padding:65px 40px}.section-heading{display:flex;align-items:end;justify-content:space-between;margin-bottom:30px}.section-heading p{max-width:290px;font-size:12px}.programs{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}.program{background:#fff;border:1px solid #e0e8df;border-radius:14px;padding:25px;transition:.2s}.program:hover{transform:translateY(-5px);border-color:var(--green)}.program-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:26px}.program-top small{font-size:11px;color:#a0b0a0}.program-icon{font-size:26px;display:grid;place-items:center;background:#e3f5ec;border-radius:15px;width:56px;height:56px;color:var(--green)}.program:nth-child(even) .program-icon{background:#fff4ce;color:#c9a000}.program h3{font-size:22px;margin-bottom:12px}.program p{font-size:12px;min-height:68px}.program-link{display:flex;justify-content:space-between;font-size:11px;color:#398874;border-top:1px solid #edf0e5;padding-top:19px}.about{display:grid;grid-template-columns:1fr 1fr;gap:80px;align-items:center}.about-art{background:#fff0bd;border-radius:150px 150px 15px 15px;padding:45px;text-align:center;min-height:400px;display:flex;flex-direction:column;justify-content:center}.about-art>span{font-size:75px;color:var(--green)}.about-art h2{font-size:37px;color:var(--dark)}.about-art p{font-size:11px;letter-spacing:3px;text-transform:uppercase}.feature{display:flex;gap:20px;margin:22px 0}.feature>b{font-size:12px;color:var(--green);background:#e5f1e7;border-radius:50%;width:33px;height:33px;display:grid;place-items:center;flex-shrink:0}.feature h3{font-size:14px;margin-bottom:5px}.feature p{font-size:12px;margin-bottom:0}.muted{color:var(--muted);font-size:10px}.portal-cta{background:var(--dark);padding:45px 50px;border-radius:20px;display:flex;align-items:center;justify-content:space-between;gap:40px;color:#fff;position:relative;overflow:hidden}.portal-cta .eyebrow{color:#a9dbc6}.portal-cta p{color:#b4cec0;max-width:440px;font-size:12px}.portal-cta h2{font-size:36px}footer{max-width:1170px;margin:auto;border-top:1px solid #e1e7dc;padding:30px 0;display:flex;align-items:center;justify-content:space-between;font-size:11px;color:var(--muted);line-height:1.9}footer .brand{font-size:18px}.auth-layout{display:grid;grid-template-columns:1fr 1fr;min-height:calc(100vh - 28px)}.auth-layout aside{background:var(--dark);color:white;padding:45px 12%;display:flex;flex-direction:column;justify-content:space-between;gap:45px}.auth-layout aside .brand{color:white}.auth-layout aside .brand img{background:white;border-radius:10px;mix-blend-mode:normal}.auth-layout aside h1{font-size:48px}.auth-layout aside h1 em{color:var(--yellow)}.auth-layout aside p{color:#b8d2c6}.auth-layout aside .eyebrow{color:#9cd3bd}.auth-layout aside small{font-size:10px;color:#b0cbbf}.auth-main{padding:40px;display:grid;place-items:center}.auth-box{width:100%;max-width:390px}.back{font-size:12px;color:var(--muted);display:inline-block;margin-bottom:38px}.auth-box h2{margin-bottom:10px;font-size:34px}.auth-box>p{font-size:12px}label{display:block;font-size:12px;font-weight:600;margin:20px 0 8px}input,select{width:100%;border:1px solid #d8e1d7;border-radius:8px;padding:13px 14px;background:#fff;color:var(--ink);outline:none}input:focus,select:focus{border-color:var(--green);box-shadow:0 0 0 3px #00ac9714}form>.btn{margin-top:25px}.password-wrap{position:relative}.password-wrap input{padding-right:60px}.show-pass{position:absolute;right:10px;top:13px;border:0;background:transparent;color:var(--muted);font-size:11px;cursor:pointer}.hint{font-size:11px;line-height:1.8;color:var(--muted);display:block;margin-top:16px}.demo-box{margin-top:25px;padding:16px;border:1px dashed #bdd5c4;border-radius:9px;font-size:11px}.demo-box p{font-size:11px;margin:12px 0 4px}.demo-box small{font-size:10px;color:var(--muted)}.error{color:#b24536;font-size:12px;margin-top:12px}.shell{display:grid;grid-template-columns:235px 1fr;min-height:calc(100vh - 28px);background:#f3f6ef}.sidebar{padding:28px 20px;background:#fffefb;border-right:1px solid #dfe7db;display:flex;flex-direction:column}.sidebar .brand{font-size:19px}.sidebar .brand img{width:44px;height:50px}.sidebar .academy{font-size:8px;letter-spacing:3px}.workspace-label{font-size:9px;letter-spacing:2px;color:#99a395;margin:45px 13px 17px}.side-links{display:flex;flex-direction:column;gap:8px}.side-links button{border:0;background:none;text-align:left;font-size:12px;color:#738475;padding:14px;border-radius:8px;display:flex;align-items:center;gap:12px}.side-links button span{font-size:19px}.side-links button.active{background:#e1f2e8;color:#167762;font-weight:600}.sidebar-note{margin-top:auto;padding:20px 13px;font-size:12px;font-weight:600}.sidebar-note p{font-size:11px;font-weight:400}.sidebar-note a{font-size:11px;color:var(--green)}.workspace{padding:25px 38px;max-width:1450px;width:100%;margin:0 auto}.topbar{display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid #dfe6d8;padding-bottom:23px;margin-bottom:32px;font-size:11px;color:var(--muted)}.profile{display:flex;align-items:center;gap:10px}.avatar{width:33px;height:33px;border-radius:50%;background:#dceade;display:grid;place-items:center;color:var(--dark);font-weight:600}.text-btn{border:0;background:transparent;color:#328b76;font-size:11px;padding:7px;cursor:pointer}.local-badge{margin-left:8px;font-size:9px;border:1px solid #d5dfcf;padding:3px 7px;border-radius:5px}.welcome{display:flex;align-items:center;justify-content:space-between;gap:20px}.welcome h1{font-size:35px;letter-spacing:-1px;margin:14px 0}.welcome p{font-size:12px}.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin:23px 0}.stats>div{border:1px solid #e0e7db;background:#fffefb;padding:23px;border-radius:12px}.stats small{color:var(--muted);font-size:11px}.stats strong{display:block;font-size:31px;margin:12px 0 8px;font-weight:600}.stats span{font-size:10px;color:#92a08c}.panel{background:#fffefc;border:1px solid #e0e7db;border-radius:13px;padding:25px;margin:20px 0}.panel h3{font-size:16px}.panel-head{display:flex;align-items:center;justify-content:space-between;gap:20px;margin-bottom:15px}.panel-head h3{margin:0}.search{max-width:270px;font-size:11px;padding:10px}.badge{display:inline-block;background:#e4f3e6;color:#45885d;font-size:10px;border-radius:20px;padding:5px 10px}table{width:100%;border-collapse:collapse;text-align:left;font-size:12px}th{font-size:9px;text-transform:uppercase;color:var(--muted);font-weight:500;letter-spacing:1px;padding:15px 8px;border-bottom:1px solid #e6eadf}td{padding:18px 8px;border-bottom:1px solid #edf0e7}code{font-size:11px}.notice{font-size:12px;line-height:1.9;padding:20px;background:#fff2c7;border-radius:10px;color:#8c793a;margin-top:25px}.grid2{display:grid;grid-template-columns:1.3fr 1fr;gap:20px}.student-card{display:flex;gap:20px;align-items:center;margin:25px 0}.student-card h3{margin-bottom:8px}.student-card p{font-size:12px;margin-bottom:8px}.student-avatar{width:72px;height:80px;border-radius:35px 35px 12px 12px;background:#e8f0dc;display:grid;place-items:center;font-size:32px}.announcement{background:#e4eee1}.announcement h2{font-size:30px;margin-top:30px}.announcement p{font-size:12px}.empty{text-align:center;padding:35px 15px;background:#f5f8f0;border-radius:10px;font-size:12px}.empty-icon{font-size:40px;color:var(--green);display:block;margin-bottom:15px}.password-panel{max-width:500px;margin:35px auto}.password-panel h2{font-size:30px}.password-panel p{font-size:12px}.modal-wrap{position:fixed;inset:0;background:#123c3280;backdrop-filter:blur(4px);display:grid;place-items:center;padding:20px;z-index:20}.modal{position:relative;background:var(--bg);padding:32px;border-radius:16px;width:100%;max-width:480px;max-height:92vh;overflow:auto;box-shadow:0 20px 80px #123c3333}.modal h2{font-size:29px;padding-right:15px}.modal>p{font-size:12px}.close{position:absolute;top:14px;right:18px;font-size:27px;border:0;background:none;color:var(--dark)}.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:15px}.credentials{background:#e0f1e4;padding:20px;border-radius:10px;font-size:11px;line-height:2}.credentials code{font-size:16px;font-weight:600;overflow-wrap:anywhere}.application{max-width:620px;padding:40px 25px 70px;margin:auto}.application h1{font-size:43px}.application>p{font-size:13px}button:focus-visible,a:focus-visible{outline:3px solid var(--yellow);outline-offset:4px}
@media(max-width:900px){header{padding:0 24px}nav{gap:18px}nav>a:not(.btn){display:none}.hero{padding:0 24px;gap:30px}h1{font-size:48px}.hero-visual{height:420px}.visual-logo{width:240px;height:270px}.visual-logo img{width:225px}.orbit{width:320px;height:320px}.f1{left:-10px}.f2{right:-5px}.floating{padding:12px;font-size:10px}.values{gap:30px;font-size:10px}.section{padding:50px 24px}.programs{gap:12px}.program{padding:20px}.about{gap:35px}.sidebar{padding:20px 12px}.shell{grid-template-columns:205px 1fr}.workspace{padding:25px}.welcome h1{font-size:29px}.welcome .btn{font-size:11px;white-space:nowrap;padding:12px}.grid2{grid-template-columns:1fr}footer{padding:25px}.stats{gap:10px}.stats>div{padding:18px}}
@media(max-width:620px){.ribbon{font-size:8px;letter-spacing:.2px}header{height:85px;padding:0 19px}.brand{font-size:20px}.brand img{width:46px;height:48px}.academy{font-size:8px}.small{font-size:10px;padding:11px 13px;gap:10px}.hero{grid-template-columns:1fr;margin:20px auto 40px;padding:0 23px;gap:35px}h1{font-size:44px;line-height:1.15;letter-spacing:-1.5px}.hero>div>p{font-size:13px}.actions{gap:8px;margin:25px 0}.actions .btn{font-size:11px;padding:14px 13px;gap:10px}.hero-visual{height:365px;max-width:400px;width:100%;margin:auto}.visual-logo{width:250px;height:270px}.visual-logo img{width:230px}.orbit{width:310px;height:310px}.f1{top:50px;left:0}.f2{bottom:60px;right:0}.spark.s1{font-size:49px;right:25px}.visual-caption{font-size:8px;bottom:17px}.values{display:grid;grid-template-columns:1fr 1fr;gap:18px;padding:24px;font-size:10px}.section{padding:40px 23px}.section-heading{display:block}.section-heading h2{font-size:31px}.section-heading p{max-width:100%}.programs{grid-template-columns:1fr 1fr}.program{padding:19px 17px}.program p{font-size:11px;min-height:83px}.program h3{font-size:21px}.program-icon{width:45px;height:45px;font-size:23px}.program-top{margin-bottom:19px}.program-link{font-size:10px}.about{grid-template-columns:1fr;gap:30px}.about-art{min-height:300px}.about-art h2{font-size:32px}.about h2{font-size:32px}.portal-cta{padding:30px 25px;display:block}.portal-cta h2{font-size:29px}.portal-cta .btn{margin-top:15px}.portal-cta .eyebrow{font-size:8px;letter-spacing:1px}footer{flex-wrap:wrap;gap:20px;font-size:10px}footer .brand{font-size:17px}footer>span{font-size:9px}.auth-layout{grid-template-columns:1fr}.auth-layout aside{padding:22px}.auth-layout aside>div,.auth-layout aside>small{display:none}.auth-main{padding:30px 23px}.auth-box{max-width:420px}.back{margin-bottom:28px}.shell{display:block}.sidebar{padding:17px 18px;border-bottom:1px solid #e0e7db}.workspace-label,.sidebar-note{display:none}.side-links{flex-direction:row;gap:2px;overflow:auto;margin-top:18px}.side-links button{white-space:nowrap;padding:10px;font-size:10px;gap:6px}.side-links button span{font-size:15px}.workspace{padding:20px 17px}.topbar{font-size:10px;margin-bottom:24px}.profile>span{display:none}.local-badge{margin-left:4px}.welcome{align-items:start;flex-wrap:wrap;gap:5px}.welcome h1{font-size:29px}.welcome p{font-size:11px}.welcome>.btn{margin:5px 0 10px}.stats{gap:8px;margin:20px 0}.stats>div{padding:16px 12px}.stats small{font-size:9px}.stats strong{font-size:25px}.stats span{font-size:9px}.panel{padding:19px;margin:15px 0}.panel-head{flex-wrap:wrap;gap:15px}.search{max-width:100%}table,tbody,tr,td{display:block}thead{display:none}tr{padding:12px 0;border-bottom:1px solid #e3e8dc}td{border:0;padding:6px 0;font-size:12px}td:before{content:attr(data-label);display:inline-block;min-width:75px;color:var(--muted);font-size:10px}td:not([data-label]):before{display:none}.grid2{gap:0}.notice{font-size:11px;padding:17px}.modal{padding:27px 23px}.application{padding-top:20px}.application h1{font-size:36px}.form-grid{gap:10px}}
.class-toolbar{display:flex;justify-content:space-between;gap:20px;align-items:center;margin:22px 0 30px}.class-filters{display:flex;gap:7px;flex-wrap:wrap}.class-filters button{border:1px solid #dce6da;border-radius:20px;padding:9px 17px;background:white;color:#6b8275;font-size:11px}.class-filters button.active{background:var(--dark);color:white;border-color:var(--dark)}.class-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}.class-card{padding:0;background:white;border:1px solid #dfe8db;border-radius:16px;overflow:hidden;text-align:left;color:var(--ink);transition:transform .2s,box-shadow .2s}.class-card:hover{transform:translateY(-5px);box-shadow:0 16px 35px #125d4312}.class-poster{min-height:260px;padding:28px;display:flex;flex-direction:column;align-items:center;text-align:center;background:#e2f3df;position:relative;overflow:hidden}.class-poster:before{content:'';position:absolute;width:220px;height:220px;border:1px solid #ffffffaa;border-radius:50%;top:35px;pointer-events:none}.class-poster.gold{background:#fff1bc}.class-poster.mint{background:#c8ece3}.class-poster small{font-size:8px;letter-spacing:2px;color:#487960;position:relative}.poster-icon{font-size:53px;margin:23px 0 10px;color:var(--green);z-index:1}.poster-program{font-size:10px;letter-spacing:3px;color:#579175;z-index:1}.class-poster strong{font-family:Georgia,serif;font-size:27px;line-height:1.2;margin:12px 0 18px;z-index:1;overflow-wrap:anywhere}.poster-caption{font-size:9px;color:#709178}.poster-spark{position:absolute;top:35px;right:24px;color:#e6b500;font-size:37px}.class-meta{padding:20px}.class-meta>b{font-size:14px;display:block}.class-meta p{font-size:11px;margin:8px 0 16px}.class-arrow{float:right;font-size:10px;color:var(--green);padding-top:5px}@media(min-width:1500px){.class-grid{grid-template-columns:repeat(4,minmax(0,1fr))}}@media(max-width:1000px){.class-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.class-toolbar{flex-wrap:wrap}}@media(max-width:620px){.class-grid{gap:14px;grid-template-columns:repeat(2,minmax(0,1fr))}.class-poster{min-height:220px;padding:24px 10px}.class-poster strong{font-size:22px}.class-poster small{font-size:6px;letter-spacing:1px}.class-meta{padding:14px}.class-meta>b{font-size:12px}.class-arrow{float:none;display:block;margin-top:10px}.class-filters button{padding:9px 12px;font-size:10px}.class-toolbar{gap:15px}.class-toolbar .search{max-width:none}.class-meta p{line-height:1.5;min-height:32px}}
/* Halaman depan ringkas dan perbaikan layar kecil */
.simple-home{background:#fcfdf9;min-height:100vh}.simple-home header{max-width:1000px;height:88px;padding:0 28px;border-bottom:1px solid #e7ede2}.simple-home main{max-width:850px;margin:auto;padding:0 28px}.simple-intro{text-align:center;padding:60px 0 45px}.simple-label{font-size:10px;letter-spacing:2px;color:#6c8b79}.simple-intro h1{font-size:52px;line-height:1.16;margin:20px 0 18px;letter-spacing:-1.8px}.simple-intro p{font-size:14px;margin-bottom:26px}.simple-intro .btn{padding:15px 26px}.simple-programs{padding:15px 0 30px}.simple-section-title{display:flex;justify-content:space-between;align-items:center;margin-bottom:17px}.simple-section-title h2{font-family:inherit;font-size:18px;letter-spacing:0;font-weight:650;margin:0}.simple-section-title>span{font-size:11px;color:var(--muted)}.simple-program-grid{display:grid;grid-template-columns:1fr 1fr;gap:13px}.simple-program{display:flex;align-items:center;gap:15px;background:white;border:1px solid #dde8dc;border-radius:12px;padding:20px;min-width:0;transition:border-color .15s}.simple-program:hover{border-color:var(--green)}.simple-program-icon{width:46px;height:46px;flex-shrink:0;background:#e7f5e9;border-radius:12px;display:grid;place-items:center;font-size:26px;color:var(--green)}.simple-program:nth-child(2n) .simple-program-icon{background:#fff3c8;color:#bf9800}.simple-program h3{font-size:16px;margin:0 0 5px}.simple-program p{font-size:11px;margin:0;line-height:1.6}.simple-chevron{margin-left:auto;color:#82a28d;font-size:24px}.simple-wali{border-top:1px solid #e1e9dc;padding:24px 0 35px;display:flex;align-items:center;justify-content:space-between;gap:20px}.simple-wali h3{font-size:14px;margin:0 0 6px}.simple-wali p{font-size:11px;margin:0}.simple-wali>a{font-size:12px;color:#168675;font-weight:600;white-space:nowrap}.simple-home footer{max-width:944px;padding:24px 28px;font-size:10px}.sidebar,.workspace,.panel,.topbar,.welcome{min-width:0}input,select{max-width:100%}.side-links button{min-height:44px}.text-btn{min-height:40px}.modal input,.modal select{font-size:16px}
@media(max-width:620px){.simple-home header{height:79px;padding:0 18px}.simple-home header .brand{font-size:18px;gap:7px}.simple-home header .brand img{width:41px;height:45px}.simple-home header .small{min-height:42px;padding:10px 13px;font-size:11px}.simple-home main{padding:0 20px}.simple-intro{padding:35px 0 30px}.simple-label{font-size:9px;letter-spacing:1px}.simple-intro h1{font-size:37px;letter-spacing:-1px;margin:16px 0 13px}.simple-intro p{font-size:12px;max-width:250px;margin:0 auto 22px;line-height:1.7}.simple-intro .btn{min-height:46px;font-size:12px;padding:13px 24px}.simple-programs{padding:10px 0 23px}.simple-section-title h2{font-size:16px}.simple-section-title>span{font-size:10px}.simple-program-grid{grid-template-columns:1fr;gap:10px}.simple-program{padding:13px 15px;gap:13px;min-height:77px}.simple-program-icon{width:43px;height:43px;font-size:24px}.simple-program h3{font-size:15px}.simple-program p{font-size:11px}.simple-wali{padding:20px 0 25px;align-items:start;flex-direction:column;gap:10px}.simple-wali>a{display:inline-flex;align-items:center;min-height:42px}.simple-home footer{padding:20px;gap:10px}.auth-layout aside{padding:15px 20px}.auth-main{padding:25px 20px}.auth-main .back{margin-bottom:24px}.auth-main .eyebrow{font-size:9px}.auth-box h2{font-size:29px}.auth-box input,.application input,.application select,.search{font-size:16px}.sidebar .brand{font-size:17px}.side-links{gap:4px;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));overflow:visible;margin-top:14px}.side-links button{padding:10px 12px;font-size:11px;white-space:normal;line-height:1.4}.side-links button:last-child:nth-child(odd){grid-column:1/-1}.workspace{padding:18px 15px}.topbar{gap:10px;flex-wrap:wrap;margin-bottom:20px;padding-bottom:14px}.welcome h1{font-size:27px;line-height:1.25}.welcome>.btn{width:100%;font-size:12px;min-height:46px}.stats{gap:7px}.stats>div{padding:14px 10px}.stats span{line-height:1.5;display:block}.class-grid{grid-template-columns:1fr;gap:14px}.class-card{display:grid;grid-template-columns:100px 1fr;align-items:stretch}.class-poster{padding:16px 9px;min-height:155px;justify-content:center}.class-poster small,.poster-caption,.poster-spark{display:none}.class-poster:before{width:120px;height:120px;top:16px}.poster-icon{font-size:30px;margin:0 0 9px}.poster-program{font-size:8px;letter-spacing:1px}.class-poster strong{font-size:18px;margin:8px 0 0}.class-meta{padding:18px 15px;align-self:center}.class-meta>b{font-size:14px}.class-meta p{font-size:11px;min-height:0;margin-bottom:12px}.class-arrow{margin-top:8px}.class-toolbar{margin:15px 0 20px}.class-filters{gap:6px}.class-filters button{min-height:42px;padding:10px 13px}.panel-head{gap:12px}.panel-head .search{width:100%}.student-card{gap:12px}.student-card h3{line-height:1.5;overflow-wrap:anywhere}.modal{padding:28px 20px}.form-grid{grid-template-columns:1fr}td{overflow-wrap:anywhere}.credentials code{font-size:15px}.application h1{font-size:32px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none!important}}
button.simple-program{text-align:left;font:inherit;color:inherit;cursor:pointer;width:100%}.program-description{padding-left:20px;color:var(--muted);font-size:13px;line-height:1.9}.program-description li{margin-bottom:10px}
.mobile-title-break{display:none}@media(max-width:620px){.mobile-title-break{display:block}}
/* Glassmorphism: identitas hijau dan kuning */
body{background:#edf6ef;background-image:radial-gradient(ellipse at 5% 5%,#a8e8d880,transparent 45%),radial-gradient(ellipse at 95% 30%,#ffe9a680,transparent 45%),radial-gradient(ellipse at 30% 95%,#c5e8d980,transparent 50%);background-attachment:fixed;color:#163e35}.simple-home{background:transparent}.ribbon{background:#ffffff50;border-bottom:1px solid #ffffffb0;color:#527a6c}.simple-home header{border-bottom:1px solid #ffffffb0;background:#ffffff35;border-radius:0 0 24px 24px;backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px)}.simple-intro{padding-top:48px}.simple-label{display:inline-block;padding:9px 16px;background:#ffffff65;border:1px solid #ffffffd0;border-radius:30px;box-shadow:0 4px 20px #1b735806}.simple-intro h1{font-family:'Segoe UI',Arial,sans-serif;font-weight:750;font-size:47px;letter-spacing:-2px;line-height:1.2}.simple-intro h1 em{font-style:normal;color:#009c83}.simple-intro p{color:#52766b}.btn{background:linear-gradient(135deg,#00ae94,#008873);border:1px solid #ffffff55;box-shadow:0 7px 20px #008f7425,inset 0 1px 0 #ffffff35;border-radius:13px}.outline{background:#ffffff65;color:var(--dark);border-color:#ffffffd0;box-shadow:0 4px 14px #285d3d08}.simple-program-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:15px}.simple-program{display:flex;flex-direction:column;align-items:flex-start;padding:23px;gap:17px;background:#ffffff65;border:1px solid #ffffffee;box-shadow:0 10px 35px #2a705010,inset 0 1px 0 #fff;border-radius:20px;backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);position:relative}.simple-program:hover{background:#ffffffa0;border-color:#9adbc7;box-shadow:0 14px 35px #16866518}.simple-program-icon{background:#c7f0e180;border:1px solid #fff9;border-radius:14px}.simple-program:nth-child(2n) .simple-program-icon{background:#fff0b890}.simple-program h3{font-size:18px}.simple-program p{font-size:11px}.simple-chevron{position:absolute;right:20px;top:27px}.simple-wali{margin:5px 0 28px;background:#ffffff40;border:1px solid #ffffffc0;border-radius:18px;padding:23px;backdrop-filter:blur(15px)}.simple-home footer{border-color:#ffffffb0}.auth-layout{background:transparent}.auth-layout aside{background:linear-gradient(155deg,#075d4eea,#063f39e8);border-right:1px solid #ffffff80;position:relative;overflow:hidden}.auth-layout aside:after{content:'';position:absolute;bottom:-120px;right:-120px;width:340px;height:340px;border:1px solid #ffdd6740;background:radial-gradient(circle,#ffdf5d28,transparent 65%);border-radius:50%;pointer-events:none}.auth-main{background:#ffffff20}.auth-box{padding:30px;background:#ffffff65;border:1px solid #ffffffd0;border-radius:25px;box-shadow:0 20px 70px #296c4c12;backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);max-width:440px}.auth-box h2{font-family:inherit;font-weight:700;font-size:29px;letter-spacing:-1px}.demo-box{background:#ffffff35;border-color:#9bbfaf}.auth-box input,input,select{background:#ffffff95;border-color:#ffffffd9;box-shadow:inset 0 1px 3px #2b644509}.shell{background:transparent}.sidebar{background:#ffffff65;backdrop-filter:blur(18px);border-color:#ffffffb0}.topbar{border-color:#ffffffb0}.panel,.stats>div{background:#ffffff75;border:1px solid #ffffffd0;box-shadow:0 8px 26px #306c4f08;backdrop-filter:blur(16px);border-radius:18px}.class-card{background:#ffffff70;border:1px solid #ffffffeb;box-shadow:0 9px 28px #306c4f0b;border-radius:20px;backdrop-filter:blur(15px)}.class-poster{background:linear-gradient(145deg,#b6e9d990,#ecf8df70)}.class-poster.gold{background:linear-gradient(145deg,#ffe9a8a0,#fff7d870)}.class-poster.mint{background:linear-gradient(145deg,#97dfd1a0,#def4e870)}.modal{background:#f2faf1eF;border:1px solid #fff;box-shadow:0 25px 90px #0a493635;backdrop-filter:blur(25px)}.modal-wrap{background:#123c3250;backdrop-filter:blur(9px)}.notice{background:#fff1bd90;border:1px solid #fff9}.class-filters button{background:#ffffff75;border-color:#ffffffd0}.announcement{background:#d8edd580}.empty{background:#ffffff50}.side-links button.active{background:#d5f1e6b0}.application .panel{background:#ffffff75}
@media(max-width:620px){.simple-home header{border-radius:0 0 18px 18px}.simple-intro{padding:32px 0 28px}.simple-label{font-size:9px;padding:8px 14px}.simple-intro h1{font-size:34px;letter-spacing:-1.2px;line-height:1.22;margin:18px 0 15px}.simple-program-grid{grid-template-columns:1fr;gap:11px}.simple-program{flex-direction:row;align-items:center;padding:16px;gap:14px;border-radius:17px;min-height:83px}.simple-program h3{font-size:16px}.simple-program-icon{width:46px;height:46px}.simple-chevron{position:static;margin-left:auto}.simple-wali{padding:20px;margin-top:0}.auth-main{padding:22px 16px}.auth-box{padding:25px 21px;border-radius:22px}.auth-layout aside{border:0;background:#ffffff50;color:var(--dark);padding:15px 20px}.auth-layout aside .brand{color:var(--dark)}.auth-layout aside:after{display:none}.auth-layout aside .brand img{background:transparent;mix-blend-mode:multiply}.auth-box .back{margin-bottom:25px}.panel{backdrop-filter:blur(10px)}.class-card{backdrop-filter:blur(10px)}}
/* Padukan latar putih gambar logo dengan latar panel kaca. */ .brand{mix-blend-mode:multiply}.brand img,.auth-layout aside .brand img{background:transparent;mix-blend-mode:multiply;border-radius:0}
.brand{mix-blend-mode:normal}.brand img,.auth-layout aside .brand img{filter:url(#logo-transparent);mix-blend-mode:normal;background:transparent}
.remember-device{display:flex;align-items:flex-start;gap:10px;font-size:11px;font-weight:400;line-height:1.7;margin-top:18px;color:var(--muted)}.remember-device input{width:17px;height:17px;flex-shrink:0;margin:2px 0;accent-color:var(--green);box-shadow:none}.auth-divider{display:flex;align-items:center;gap:12px;color:#81988c;font-size:9px;letter-spacing:1px;margin:25px 0 17px}.auth-divider:before,.auth-divider:after{content:'';height:1px;flex:1;background:#c4d9cb}.google-login{display:flex;align-items:center;justify-content:center;gap:12px;width:100%;padding:13px 12px;border:1px solid #d4e1d6;border-radius:12px;background:#ffffff90;color:#718078;font-size:12px}.google-login:disabled{cursor:not-allowed}.google-letter{font-size:20px;font-weight:700;color:#718078}.google-login small{font-size:9px;border-radius:6px;background:#e8eee4;padding:4px 7px}
.simple-program-grid{grid-template-columns:repeat(2,minmax(0,1fr))}@media(max-width:620px){.simple-program-grid{grid-template-columns:1fr}.simple-label{max-width:100%;line-height:1.9;letter-spacing:.6px}}
.unified-actions{display:flex;gap:10px;flex-wrap:wrap}.student-filters{display:grid;grid-template-columns:1.5fr 1fr 1fr;gap:15px;margin-bottom:25px}.student-filters label{margin-top:0}.managed-class{display:flex;align-items:center;justify-content:space-between;text-align:left;gap:15px;width:100%;padding:15px;border:1px solid #dce7d9;border-radius:10px;background:#ffffff70;margin-bottom:10px;color:var(--ink)}.managed-class b{font-size:13px}.managed-class p{font-size:11px;margin:6px 0 0}.managed-class .badge{white-space:nowrap}.managed-classes{max-height:45vh;overflow:auto}#existing-guardian[hidden],#new-guardian[hidden]{display:none}@media(max-width:620px){.student-filters{grid-template-columns:1fr;gap:13px}.student-filters input,.student-filters select{font-size:16px}.unified-actions{width:100%;display:grid;grid-template-columns:1fr 1fr}.unified-actions .btn{padding:12px;font-size:11px;min-height:45px}}


.admin-program-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px;margin:25px 0}.admin-program-card{background:#ffffff70;border:1px solid #ffffffeb;border-radius:20px;padding:25px;text-align:left;color:var(--ink);box-shadow:0 10px 30px #27694d0a;backdrop-filter:blur(15px)}.admin-program-card:hover{border-color:var(--green);background:#ffffffa0}.admin-program-card h2{font-family:inherit;font-size:21px;font-weight:650;letter-spacing:-.5px;margin:20px 0 9px}.admin-program-card p{font-size:12px}.admin-program-card:nth-child(even) .simple-program-icon{background:#fff1bd90}@media(max-width:620px){.admin-program-grid{grid-template-columns:1fr;gap:12px;margin:20px 0}.admin-program-card{padding:20px}.admin-program-card h2{font-size:20px;margin-top:15px}}
.stats:has(>div:nth-child(2):last-child){grid-template-columns:repeat(2,minmax(0,1fr))}
.enrollment-label{display:flex;align-items:center;flex-wrap:wrap;gap:6px;margin:5px 0;font-size:11px;line-height:1.6}.student-enrollments{margin-bottom:10px}.notice .enrollment-label{color:var(--dark)}.add-student-class{white-space:nowrap}
.student-suggestions{max-height:230px;overflow:auto;margin-top:7px;padding:5px;background:#f4faf0;border:1px solid #bcdccc;border-radius:10px;box-shadow:0 8px 20px #164c3010}.student-suggestions[hidden]{display:none}.student-suggestion{display:block;width:100%;text-align:left;border:0;border-bottom:1px solid #dfebdc;background:transparent;padding:12px;color:var(--ink)}.student-suggestion:last-child{border-bottom:0}.student-suggestion:hover,.student-suggestion:focus{background:#ddf1e6}.student-suggestion b{font-size:13px;display:block}.student-suggestion small{display:block;font-size:10px;line-height:1.6;margin-top:4px;color:var(--muted)}.selected-student-info:empty{display:none}
/* Pilihan seragam: dropdown kaca untuk semua formulir */
.choice-control{position:relative;min-width:0;width:100%}.choice-native{position:absolute!important;width:1px!important;height:1px!important;opacity:0!important;padding:0!important;margin:0!important;pointer-events:none;clip-path:inset(50%)}.choice-trigger{display:flex;align-items:center;justify-content:space-between;gap:12px;width:100%;min-height:48px;text-align:left;padding:12px 14px;background:linear-gradient(135deg,#ffffffc9,#ffffff85);border:1px solid #d3e3d8;border-radius:12px;color:#234d40;box-shadow:0 2px 5px #204e3505,inset 0 1px 0 #fff;font:inherit;font-size:13px;cursor:pointer;transition:border-color .15s,box-shadow .15s}.choice-trigger:hover{border-color:#84c8b5;background:#ffffffd9}.choice-trigger:focus-visible,.choice-trigger.is-open{outline:none;border-color:#00ac97;box-shadow:0 0 0 3px #00ac9717}.choice-trigger:disabled{opacity:.55;cursor:not-allowed}.choice-value{min-width:0;white-space:normal;overflow-wrap:anywhere;line-height:1.5}.choice-arrow{flex-shrink:0;width:24px;height:24px;display:grid;place-items:center;border-radius:8px;background:#e0f1e880;color:#298b74;font-size:20px;line-height:1;transition:transform .15s}.choice-trigger.is-open .choice-arrow{transform:rotate(180deg)}.choice-panel{position:fixed;z-index:100;overflow:auto;overscroll-behavior:contain;padding:7px;border-radius:16px;border:1px solid #fff;background:#f2faf3f5;box-shadow:0 16px 45px #174c3929,0 0 0 1px #bbd8c870;backdrop-filter:blur(22px);-webkit-backdrop-filter:blur(22px);scrollbar-width:thin;scrollbar-color:#a2cfb8 transparent}.choice-option{width:100%;display:flex;justify-content:space-between;align-items:center;gap:15px;text-align:left;border:0;border-radius:10px;padding:12px 13px;min-height:45px;background:transparent;font:inherit;font-size:13px;line-height:1.55;color:#315b4c;cursor:pointer}.choice-option>span:first-child{overflow-wrap:anywhere}.choice-option:hover,.choice-option:focus-visible{background:#deeee4;outline:0}.choice-option[aria-selected=true]{color:#007c67;background:#d8f0e5;font-weight:650}.choice-option:disabled{opacity:.45;cursor:not-allowed}.choice-tick{width:20px;flex-shrink:0;color:#00977b;font-size:15px}.choice-empty{padding:16px;font-size:12px;color:var(--muted)}.choice-trigger[aria-invalid=true]{border-color:#b24536}.student-filters>div{min-width:0}@media(max-width:620px){.choice-trigger{font-size:16px;min-height:49px;padding:12px 14px}.choice-panel{padding:6px;border-radius:15px}.choice-option{font-size:15px;min-height:48px;padding:12px}.choice-value{font-size:14px}}

/* Private image library */
#more-media[hidden]{display:none}
.media-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;margin-top:22px}.media-card{min-width:0;overflow:hidden;border:1px solid #ffffffbd;border-radius:22px;background:#ffffff70}.media-preview{width:100%;height:180px;padding:12px;border:0;cursor:pointer;background:#dff2e8aa;display:block}.media-preview img{width:100%;height:100%;object-fit:contain}.media-details{padding:18px}.media-details h3{margin:0 0 10px;overflow-wrap:anywhere;font-size:16px}.media-details p,.media-details small{color:var(--muted,#6e817b);font-size:12px}.media-details .text-btn{display:block;margin-top:14px}.media-full{display:block;max-height:55vh;width:100%;object-fit:contain;border-radius:15px;background:#fff9}#image-file{padding:16px;width:100%;box-sizing:border-box}#media-status{margin:12px 0}#more-media{margin-top:20px}.media-preview:focus-visible{outline:3px solid #00ac97;outline-offset:-3px}
@media(max-width:1100px){.media-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}@media(max-width:520px){.media-grid{grid-template-columns:minmax(0,1fr)}.media-preview{height:220px}.media-details{padding:16px}}