@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Manrope:wght@400;500;600;700;800&display=swap');
:root{--green:#087744;--deep:#064e32;--mint:#eaf8ef;--gold:#f4c84a;--ink:#18352a;--muted:#6b7d75;--line:#e1ebe5;--white:#fff;--shadow:0 24px 70px rgba(9,73,45,.10)}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:#fbfdfb;color:var(--ink);font-family:'DM Sans',Arial,sans-serif;line-height:1.6}a{color:inherit;text-decoration:none}.nav{height:82px;display:flex;align-items:center;justify-content:space-between;padding:0 max(calc((100vw - 1160px)/2),5%);background:rgba(255,255,255,.94);border-bottom:1px solid #e9f0eb;position:relative;z-index:5}.brand{display:flex;gap:11px;align-items:center;font-family:Manrope,sans-serif;font-weight:800;letter-spacing:-.4px}.brand-mark{display:grid;place-items:center;width:43px;height:43px;border-radius:14px;background:linear-gradient(145deg,#0d8b4f,#064e32);color:#ffe16d;font-size:14px;border:2px solid #d7eddf;box-shadow:0 5px 12px #08774420}.brand small{display:block;font:500 11px 'DM Sans',sans-serif;color:#7b8e83;letter-spacing:.4px}.navlinks{display:flex;align-items:center;gap:31px;font-size:13px;font-weight:700;color:#486257}.navlinks a:hover,.back-link:hover{color:var(--green)}.navlinks .nav-admin{padding:10px 17px;border-radius:12px;color:var(--green);background:#eaf7ee}.hero{max-width:1160px;margin:auto;padding:70px 30px 55px;display:grid;grid-template-columns:1.04fr .96fr;align-items:center;gap:35px;min-height:510px}.eyebrow,.section-kicker{font-size:11px;letter-spacing:2px;font-weight:800;color:var(--green)}.hero h1,.section h2,.contact h2,.form-wrap h1,.result-wrap h1,.admin-heading h1{font-family:Manrope,sans-serif;font-weight:800;letter-spacing:-2px;line-height:1.12}.hero h1{font-size:clamp(38px,4.6vw,59px);margin:19px 0}.hero h1 em{font-style:normal;color:var(--green)}.hero-copy>p{max-width:475px;color:var(--muted);font-size:16px;line-height:1.8;margin:0 0 26px}.btn{border:0;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;gap:20px;border-radius:13px;padding:14px 20px;font:700 13px 'DM Sans',sans-serif;transition:transform .2s,box-shadow .2s}.btn:hover{transform:translateY(-2px);box-shadow:0 10px 24px #08774422}.btn-primary{color:white;background:linear-gradient(120deg,#0b8a4f,#06623b);box-shadow:0 9px 20px #08774425}.btn-primary span{font-size:19px}.status-line{margin-top:18px;color:#5d7468;font-size:12px;display:flex;align-items:center;gap:9px}.dot{display:inline-block;width:8px;height:8px;background:#efb93c;border-radius:50%}.dot.open{background:#22a461;box-shadow:0 0 0 4px #22a46120}.notice-card{display:flex;gap:16px;max-width:470px;background:white;border:1px solid #e3eee6;border-radius:17px;padding:18px;box-shadow:0 12px 35px #174d2c0b}.notice-icon{display:grid;place-items:center;flex-shrink:0;width:47px;height:47px;border-radius:14px;background:#fff5d5;color:#9d7813;font-size:27px}.notice-card strong{font-size:15px}.notice-card p{margin:3px 0;color:var(--muted);font-size:12px}.notice-card b{color:var(--green);font-size:13px}.countdown{display:flex;gap:10px;margin-top:16px}.countdown div{min-width:67px;text-align:center;background:#f0f8f2;border:1px solid #dceee1;border-radius:12px;padding:9px 10px}.countdown strong{display:block;color:var(--green);font:800 21px Manrope}.countdown small{font-size:10px;color:#6b8175}.hero-art{height:360px;position:relative;display:grid;place-items:center;isolation:isolate}.hero-art:before{content:'';position:absolute;inset:12px 20px 0;border-radius:48% 52% 48% 52%/48% 45% 55% 52%;background:linear-gradient(145deg,#e6f7e9,#c7ebd1);transform:rotate(-6deg);z-index:-2}.hero-art:after{content:'';position:absolute;width:260px;height:260px;border:1px solid #b9e2c6;border-radius:50%;z-index:-1}.orb{position:absolute;border-radius:50%;filter:blur(1px)}.orb-one{width:105px;height:105px;background:#f7d85e;top:25px;right:35px;opacity:.85}.orb-two{width:62px;height:62px;background:#61c48a;bottom:30px;left:28px}.school-card{width:270px;height:245px;background:linear-gradient(145deg,#0c8048,#064a31);border:8px solid white;border-radius:28px;box-shadow:0 25px 55px #075c3630;display:flex;flex-direction:column;align-items:center;justify-content:center;color:white;transform:rotate(-4deg);position:relative}.school-card:before,.school-card:after{content:'';position:absolute;width:42px;height:42px;border:1px solid #ffffff55;border-radius:12px;transform:rotate(20deg)}.school-card:before{top:18px;left:18px}.school-card:after{bottom:18px;right:18px}.school-icon{width:72px;height:72px;border-radius:50%;display:grid;place-items:center;background:#f5d64e;color:#075936;font-size:36px;margin-bottom:8px;border:6px solid #ffffffaa}.school-card>span{font-size:12px;letter-spacing:3px}.school-card>strong{font:800 28px Manrope;letter-spacing:2px}.school-card>small{font-size:9px;margin-top:9px;color:#e0f5e6}.float-card{position:absolute;display:flex;align-items:center;gap:9px;background:white;padding:12px 16px;border-radius:13px;box-shadow:var(--shadow);font-size:20px;color:#c29a1a}.float-card span{font-size:11px;color:#4b6759;font-weight:700}.float-top{top:42px;left:2px;transform:rotate(-5deg)}.float-bottom{right:-3px;bottom:35px;color:#0d9a59;transform:rotate(4deg)}.quick-stats{max-width:1100px;margin:0 auto 60px;background:#fff;border:1px solid #e6efe8;border-radius:18px;box-shadow:0 15px 40px #1c56300a;display:grid;grid-template-columns:repeat(3,1fr);padding:24px 28px}.quick-stats>div{display:flex;gap:13px;align-items:center;padding:4px 18px;border-right:1px solid #e7eee9}.quick-stats>div:last-child{border:0}.stat-icon{display:grid;place-items:center;min-width:42px;height:42px;border-radius:13px;background:#eaf8ee;color:var(--green);font:800 12px Manrope}.quick-stats b,.quick-stats small{display:block}.quick-stats b{font-size:13px}.quick-stats small{font-size:10px;color:var(--muted);margin-top:3px}.section{max-width:1050px;margin:auto;padding:55px 25px 85px;text-align:center}.section h2,.contact h2{font-size:clamp(30px,3.5vw,42px);margin:13px 0}.section>p{max-width:650px;margin:0 auto;color:var(--muted);font-size:14px;line-height:1.9}.about-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;text-align:left;margin-top:36px}.about-grid article{background:white;border:1px solid #e4eee7;border-radius:17px;padding:25px;box-shadow:0 12px 35px #1d4d2c08}.about-grid article>span{width:43px;height:43px;display:grid;place-items:center;background:#edf8ef;color:var(--green);font-size:22px;border-radius:13px}.about-grid h3{font:800 17px Manrope;margin:16px 0 7px}.about-grid p{color:var(--muted);font-size:12px;line-height:1.8;margin:0 0 10px}.text-link{color:var(--green);font-size:12px;font-weight:800}.muted{color:#7b8b82;font-size:11px}.contact{background:linear-gradient(120deg,#075d39,#0a8049);color:white;max-width:1100px;margin:0 auto 55px;border-radius:25px;padding:42px 48px;display:flex;align-items:center;justify-content:space-between;gap:25px}.section-kicker.light{color:#d9edb2}.contact h2{margin:8px 0;font-size:30px}.contact p{margin:0;color:#d1e9d9;font-size:13px}.contact-pill{background:#ffffff12;border:1px solid #ffffff35;border-radius:17px;padding:16px 20px;display:flex;align-items:center;gap:14px;min-width:275px}.contact-pill>span{display:grid;place-items:center;width:43px;height:43px;background:var(--gold);color:#17492d;border-radius:50%;font-size:22px}.contact-pill small,.contact-pill strong{display:block}.contact-pill small{font-size:10px;color:#d5ebdc}.contact-pill strong{font-size:17px}footer{display:flex;justify-content:space-between;gap:15px;max-width:1160px;margin:auto;padding:22px 30px 27px;border-top:1px solid #e7eee9;color:#7b8d83;font-size:11px}.form-page{min-height:100vh;display:flex;flex-direction:column;background:radial-gradient(ellipse at 50% 0%,#eaf8ee 0,transparent 43%),#fbfdfb}.form-page footer{width:100%;margin-top:auto}.back-link{font-size:12px;font-weight:700;color:var(--green)}.form-wrap{width:min(100% - 32px,490px);margin:52px auto 65px;background:white;border:1px solid #e5eee7;border-radius:24px;padding:36px 38px;box-shadow:var(--shadow);text-align:center}.form-symbol{display:grid;place-items:center;width:62px;height:62px;border-radius:19px;margin:0 auto 21px;background:#eaf8ef;color:var(--green);font-size:34px}.form-wrap h1,.result-wrap h1{font-size:32px;letter-spacing:-1.3px;margin:9px 0}.form-intro{color:var(--muted);font-size:13px;margin:0 0 25px}.check-form{text-align:left;display:flex;flex-direction:column;gap:9px}.check-form label,.admin-form label{font-size:12px;font-weight:800;color:#385548;margin-top:8px}.check-form input,.admin-form input:not([type=checkbox]):not([type=file]),.admin-form select,.admin-form textarea{width:100%;padding:13px 14px;border:1px solid #dce8df;border-radius:11px;background:#fcfefc;color:var(--ink);font:13px 'DM Sans',sans-serif;outline:none}.check-form input:focus,.admin-form input:focus,.admin-form select:focus,.admin-form textarea:focus{border-color:#62b786;box-shadow:0 0 0 3px #16844d12}.check-form .btn{margin-top:15px}.full{width:100%}.privacy-note{display:block;color:#87958c;font-size:10px;margin-top:19px}.alert-error,.alert-success{padding:12px 14px;border-radius:11px;font-size:12px;margin:15px 0;text-align:left}.alert-error{color:#a32929;background:#fff0f0;border:1px solid #ffd7d7}.alert-success{color:#146c3a;background:#ecfbf0;border:1px solid #cdeed6}.result-wrap{width:min(100% - 32px,680px);margin:48px auto 65px;text-align:center}.result-badge{display:grid;place-items:center;width:64px;height:64px;border-radius:20px;font-size:32px;font-weight:800;margin:0 auto 20px}.success.result-badge{background:#dff8e7;color:#138345}.danger.result-badge{background:#ffe5e5;color:#b92d2d}.warning.result-badge{background:#fff2c9;color:#9b740d}.result-card{border-radius:20px;padding:27px 30px;text-align:left;margin:26px 0 16px;border:1px solid}.result-card small{font-size:10px;font-weight:800;letter-spacing:1.6px}.result-card h2{font:800 27px Manrope;margin:8px 0}.result-card p{font-size:13px;line-height:1.8;margin:0}.result-card.success{background:#effbf2;border-color:#c7eed2;color:#126b37}.result-card.danger{background:#fff1f1;border-color:#ffd5d5;color:#a62e2e}.result-card.warning{background:#fff9e5;border-color:#f4e2a3;color:#8b690d}.student-details{display:grid;grid-template-columns:1fr 1fr;text-align:left;background:white;border:1px solid var(--line);border-radius:15px;padding:18px 22px;gap:15px}.student-details small,.student-details strong{display:block}.student-details small{color:#7a8d82;font-size:10px}.student-details strong{font-size:13px;margin-top:4px;overflow-wrap:anywhere}.payment-card{display:flex;align-items:center;gap:14px;text-align:left;background:white;border:1px solid #dcebe0;border-radius:16px;padding:17px;margin-top:17px}.payment-card>span{font-size:25px;color:var(--green)}.payment-card div{flex:1}.payment-card strong{font-size:12px}.payment-card p{font-size:10px;color:var(--muted);margin:3px 0 0}.payment-card .btn{font-size:11px;padding:11px 13px;white-space:nowrap}.note-card{text-align:left;padding:17px 20px;margin-top:17px;border-radius:15px;background:#fff9e5;border:1px solid #f1dfa0;color:#80600b}.note-card strong{font-size:13px}.note-card p{font-size:12px;margin:6px 0 0}.centered{display:block;text-align:center;margin-top:25px}.letter-page{background:#f0f5f1;padding:24px}.print-tools{max-width:800px;margin:0 auto 15px;display:flex;justify-content:space-between;align-items:center}.print-tools a{color:var(--green);font-size:12px;font-weight:700}.print-tools button{border:0;border-radius:10px;padding:12px 16px;background:var(--green);color:white;font-weight:700;cursor:pointer}.letter{max-width:800px;margin:auto;background:white;padding:58px 65px;box-shadow:var(--shadow);min-height:1000px;color:#222;font-family:Arial,sans-serif;font-size:13px;line-height:1.8}.letter-head{display:flex;gap:20px;align-items:center;text-align:center;justify-content:center}.letter-logo{}.letter-head h1{font-size:22px;color:#075d39;margin:0;letter-spacing:1px}.letter-head p{margin:0;font-size:10px}.letter hr{border:0;border-top:3px solid #087744;border-bottom:1px solid #087744;height:5px;margin:23px 0}.letter-date{text-align:right}.letter>h2{text-align:center;font-size:16px;text-decoration:underline;margin:26px 0}.letter-table{width:100%;border-collapse:collapse;margin:16px 0}.letter-table td{padding:4px 6px;vertical-align:top}.letter-table td:first-child{width:190px}.signature{margin:35px 20px 0 auto;width:240px}.letter-foot{margin-top:55px;border-top:1px solid #ddd;padding-top:8px;text-align:center;color:#777;font-size:9px}.admin-page{background:#f7faf8}.admin-greet{font-size:12px;color:#61776a}.admin-wrap{max-width:1160px;margin:38px auto 70px;padding:0 25px}.admin-heading{display:flex;align-items:center;justify-content:space-between;margin-bottom:24px}.admin-heading h1{font-size:35px;margin:7px 0}.admin-heading p{color:var(--muted);font-size:13px;margin:0}.live-state{display:flex;align-items:center;gap:8px;font-size:11px;font-weight:800;border-radius:12px;padding:12px 15px;background:#fff1d0;color:#8e6b12}.live-state.live{background:#e3f8e9;color:#15753c}.admin-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-bottom:20px}.admin-stats>div{background:white;border:1px solid #e5eee7;border-radius:15px;padding:18px 20px}.admin-stats small,.admin-stats strong{display:block}.admin-stats small{font-size:11px;color:var(--muted)}.admin-stats strong{font:800 28px Manrope;color:var(--green);margin-top:6px}.admin-panel{background:white;border:1px solid #e2ece5;border-radius:18px;padding:25px;margin-bottom:20px;box-shadow:0 10px 35px #1a4e2c06}.admin-panel h2{font:800 19px Manrope;margin:0 0 4px}.panel-desc{font-size:11px;color:var(--muted);margin:0 0 20px}.admin-form .toggle-row{display:flex;justify-content:space-between;gap:20px;align-items:center;background:#f5faf6;padding:14px 16px;border-radius:12px;margin:0 0 16px}.toggle-row b,.toggle-row small{display:block}.toggle-row b{font-size:12px}.toggle-row small{font-size:10px;color:var(--muted);font-weight:400;margin-top:3px}.toggle-row input{width:19px;height:19px;accent-color:var(--green)}.admin-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px 18px;margin-bottom:20px}.admin-grid>div{display:flex;flex-direction:column;gap:5px}.admin-grid .span-2{grid-column:span 2}.admin-form input[type=file]{font-size:12px;padding:8px 0}.admin-form small{font-size:10px;color:var(--muted)}.admin-form small a{color:var(--green)}.count-chip{font:700 11px 'DM Sans';background:#eaf8ee;color:var(--green);border-radius:8px;padding:5px 8px;margin-left:5px}.table-scroll{overflow-x:auto;margin-top:17px}.data-table{border-collapse:collapse;width:100%;font-size:11px;white-space:nowrap}.data-table th{text-align:left;background:#f5faf6;color:#61796a;padding:12px 13px;font-size:10px}.data-table td{border-bottom:1px solid #edf2ee;padding:12px 13px}.empty-cell{text-align:center;color:#829187;padding:25px!important}.status-chip{display:inline-block;border-radius:7px;padding:5px 8px;font-size:10px;font-weight:800}.sc-green{background:#e2f8e8;color:#14733b}.sc-red{background:#ffebeb;color:#b12c2c}.sc-yellow{background:#fff4cc;color:#916b09}.btn-delete{border:1px solid #f4d2d2;color:#ad2e2e;background:#fff5f5;border-radius:7px;padding:6px 9px;cursor:pointer;font-size:10px}.admin-login{margin-top:10vh}.login-brand{justify-content:center;margin-bottom:30px}.login-brand .brand-mark{width:52px;height:52px}.admin-login .back-link{margin-top:25px}
@media(max-width:850px){.hero{grid-template-columns:1fr;padding-top:50px}.hero-art{height:310px;max-width:500px;width:100%;margin:auto}.quick-stats{margin:0 20px 45px}.quick-stats>div{padding:4px 10px}.contact{margin:0 20px 40px;padding:30px;flex-direction:column;align-items:flex-start}.contact-pill{width:100%}.nav{padding:0 22px}.navlinks{gap:15px}.hero{padding-left:24px;padding-right:24px}.admin-wrap{padding:0 17px}}@media(max-width:600px){.nav{height:72px;padding:0 15px}.brand{font-size:13px}.brand-mark{width:38px;height:38px}.navlinks{gap:11px;font-size:11px}.navlinks a:nth-child(2),.navlinks a:nth-child(3){display:none}.navlinks .nav-admin{padding:8px 11px}.hero{padding:44px 20px 35px;gap:12px}.hero h1{font-size:39px;letter-spacing:-1.5px}.hero-copy>p{font-size:14px}.hero-art{height:280px}.school-card{width:230px;height:215px}.school-card>strong{font-size:24px}.float-top{left:0;top:25px}.float-bottom{right:0;bottom:25px}.quick-stats{grid-template-columns:1fr;padding:10px 17px;margin:0 15px 35px}.quick-stats>div{border-right:0;border-bottom:1px solid #e7eee9;padding:13px 3px}.quick-stats>div:last-child{border:0}.about-grid{grid-template-columns:1fr}.section{padding:35px 20px 55px}.contact{margin:0 14px 35px;padding:26px 22px}.contact h2{font-size:26px}.contact-pill{min-width:0;padding:13px}.contact-pill strong{font-size:15px}footer{padding:18px 18px;flex-direction:column;gap:5px}.form-wrap{padding:28px 22px;margin:30px auto}.form-wrap h1,.result-wrap h1{font-size:28px}.result-wrap{margin:32px auto 45px}.result-card{padding:22px 20px}.student-details{grid-template-columns:1fr}.payment-card{flex-wrap:wrap}.payment-card .btn{width:100%}.letter-page{padding:10px}.letter{padding:28px 20px;min-height:auto}.letter-head{gap:10px}
.letter-logo {
    width: 25px !important;
    height: 25px !important;
    min-width: 25px !important;
    max-width: 25px !important;
    flex: 0 0 25px !important;
    overflow: hidden;
}

.letter-logo img {
    display: block;
    width: 25px !important;
    height: 25px !important;
    max-width: 25px !important;
    max-height: 25px !important;
    object-fit: contain;
}

/* Ukuran logo pada kop surat pembayaran */
header.letter-head > .letter-logo {
    width: 30px !important;
    height: 30px !important;
    min-width: 30px !important;
    max-width: 30px !important;
    flex: 0 0 30px !important;
    overflow: hidden !important;
    display: flex !important;
    align-items: center;
    justify-content: center;
}

header.letter-head > .letter-logo > img {
    display: block !important;
    width: 30px !important;
    height: 30px !important;
    min-width: 0 !important;
    max-width: 30px !important;
    min-height: 0 !important;
    max-height: 30px !important;
    object-fit: contain !important;
}

.letter-table td:first-child{width:140px}.admin-heading{align-items:flex-start;gap:12px;flex-direction:column}.admin-heading h1{font-size:29px}.admin-stats{grid-template-columns:1fr 1fr}.admin-panel{padding:18px}.admin-grid{grid-template-columns:1fr}.admin-grid .span-2{grid-column:auto}.admin-greet{display:none}.toggle-row{align-items:flex-start!important}.countdown{gap:6px}.countdown div{flex:1;min-width:0;padding:8px 5px}.countdown strong{font-size:18px}}