@font-face{font-family:'Plus Jakarta Sans';src:url('fonts/plusjakarta-latin-ext.woff2') format('woff2');font-weight:200 800;font-style:normal;font-display:swap;unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Plus Jakarta Sans';src:url('fonts/plusjakarta-latin.woff2') format('woff2');font-weight:200 800;font-style:normal;font-display:swap;unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
*{box-sizing:border-box}html{scroll-padding-top:24px}body{margin:0;background:#fff;color:#18304e;font:15px/1.65 "Plus Jakarta Sans",sans-serif}a{color:var(--accent,#215bc5);text-decoration:none}a:hover{text-decoration:underline}button,input{font:inherit}button,a,input{-webkit-tap-highlight-color:transparent}:focus-visible{outline:3px solid #c07408;outline-offset:4px}h1,h2,h3,p,dd,a{overflow-wrap:anywhere}h1{font-size:clamp(29px,5vw,42px);line-height:1.2;letter-spacing:-.02em;margin:12px 0 18px}h2{font-size:21px;line-height:1.4}h3{font-size:19px;line-height:1.45;margin:12px 0}p{margin:10px 0 16px}.public-header{background:white;border-bottom:1px solid #e2e9f4;padding:20px max(20px,calc((100% - 920px)/2))}.brand{display:flex;align-items:center;gap:11px;color:#163965;font-size:23px;line-height:1.2;min-height:44px}.brand small{display:block;font-size:8px;font-weight:750;letter-spacing:1.8px;margin-top:5px}.brand-mark{display:grid;place-items:center;width:43px;height:43px;border-radius:14px;background:var(--accent,#235ed1);color:white;font-weight:800;letter-spacing:-.02em;padding-right:3px}main{max-width:960px;margin:auto;padding:24px 20px calc(110px + env(safe-area-inset-bottom))}.intro{padding:8px 0 14px;max-width:640px}.intro p:not(.eyebrow){color:#56677f}.eyebrow{font-size:11px;letter-spacing:2px;font-weight:800;color:var(--accent,#255fc7)}.search{margin:10px 0 30px}.search label,label{display:block;font-weight:700}.search-row{display:flex;gap:10px;margin-top:8px}input{display:block;width:100%;min-width:0;min-height:48px;border:1px solid #b5c4d8;border-radius:12px;background:#fff;color:#18304e;padding:12px;margin:7px 0 16px}.search-row input{margin:0;flex:1;width:0}button,.button{display:inline-flex;justify-content:center;align-items:center;min-height:48px;border:0;border-radius:12px;background:var(--accent,#245dcb);color:white;padding:11px 23px;font-weight:750;cursor:pointer}.secondary{background:white;color:var(--accent,#245dcb);border:1px solid #c5d3e7}.section-heading{display:flex;justify-content:space-between;align-items:center;gap:12px}.section-heading span{color:#63728a;font-size:13px;white-space:nowrap}.event-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px}.event-card,.card{background:white;border:1px solid #e1e8f2;border-radius:20px;overflow:hidden}.card{padding:24px;margin:20px 0}.card-body{padding:21px}.card-body p{font-size:13px;color:#526780;margin:7px 0}.card-poster{display:block;width:100%;height:auto;aspect-ratio:1/1;object-fit:cover;object-position:center center;background:#eaf0f9}.poster-placeholder{aspect-ratio:1/1;display:flex;text-align:center;padding:8px;flex-direction:column;justify-content:center;align-items:center;background:var(--accent-soft,#e8effc);color:#31598f;font-size:24px;font-weight:750}.poster-placeholder span{font-size:12px;font-weight:500;margin-top:4px}.status{display:inline-block;border-radius:7px;background:var(--accent-soft,#edf3ff);color:#2657a4;padding:5px 9px;font-size:12px;font-weight:750}.text-link{display:inline-flex;align-items:center;min-height:44px;gap:12px;font-weight:700}.card-body .text-link{margin-top:10px}.detail-poster{display:block;width:100%;max-height:720px;object-fit:contain;background:#eaf0f9;border-radius:18px;margin:22px 0}.detail-actions{display:flex;gap:12px;position:sticky;top:8px;z-index:2;background:#fff;padding:10px 0}.detail-actions .button{flex:1}.preserve-lines{white-space:pre-wrap}.speaker-photo{width:80px;height:80px;object-fit:cover;border-radius:50%}.check{display:flex;align-items:flex-start;gap:12px;margin:20px 0;font-weight:450;font-size:13px}.check input{width:22px;height:22px;min-height:22px;flex:0 0 22px;margin:2px 0}.honeypot{display:none}.muted,.privacy-note{color:#596b81;font-size:13px}.certificate-form{max-width:640px}.certificate-form button{width:100%}dt{font-size:12px;color:#596b81;margin-top:14px}dd{margin:3px 0}.empty{grid-column:1/-1}.skip{position:absolute;top:-100px}.skip:focus{top:0;background:white;padding:12px;z-index:10}.share-status:empty{display:none}#registration{scroll-margin-top:90px}@media(max-width:600px){.event-grid{gap:12px}.event-grid .card-body{padding:12px}.event-grid .card-body h3{font-size:15px;margin:8px 0}.event-grid .card-body p{font-size:12px}.event-grid .status{font-size:11px}.event-grid .poster-placeholder{font-size:16px}main{padding-left:18px;padding-right:18px}.card{padding:20px}.detail-actions{gap:8px}.detail-actions button{padding:11px 17px}}
/* Form controls take the site font like the rest of the page (the browser default is Arial); the open list of a select follows it on Chrome and Edge for Windows */input,select,textarea,button,option,optgroup{font-family:"Plus Jakarta Sans",sans-serif}

.site-logo{display:block;max-width:100%;width:auto;max-height:48px;object-fit:contain}.brand{max-width:100%}

.event-detail main{padding-bottom:calc(190px + env(safe-area-inset-bottom))}.detail-actions{position:fixed;top:auto;bottom:calc(70px + env(safe-area-inset-bottom));left:50%;transform:translateX(-50%);width:100%;max-width:960px;padding:10px 18px;background:#fff;border-top:1px solid #e1e8f2;z-index:4}#registration{scroll-margin-top:24px}

.pagination{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-top:24px}.card-body h3 a{display:inline-flex;align-items:center;min-height:44px}
.public-header{display:flex;align-items:center;gap:14px}
.brand{flex:none}
.header-search{flex:1;min-width:0;margin:0}
.header-search .search-row{margin-top:0;gap:8px}
.header-search input{margin:0;min-height:44px;border-radius:10px}
.header-search button{min-height:44px;padding:9px 18px;border-radius:10px;flex:none}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
@media(max-width:520px){.brand span:not(.brand-mark){display:none}.brand{gap:8px}.brand .brand-mark{width:44px;height:44px;min-width:44px}.brand img.site-logo{min-height:44px;min-width:44px}.header-search{gap:6px}}
.hero-banner{padding:0;border-radius:20px;overflow:hidden;margin:0 0 14px;background:var(--accent-soft,#e8effc);border:1px solid #e1e8f2}
.hero-banner img{display:block;width:100%;height:auto;aspect-ratio:16/9;object-fit:cover}
.home-chips{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:8px;margin:2px 0 22px}
.chip{overflow-wrap:normal;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;gap:8px;min-height:88px;padding:0;border:0;background:none;color:#3d5470;font-weight:700;font-size:12px;line-height:1.3;text-align:center}
.chip:hover{text-decoration:none}
.chip:hover .chip-icon{border-color:var(--accent-line,#9db8dc)}
.chip.active{color:var(--accent-strong,#1c46a8);font-weight:800}
.chip-icon{display:grid;place-items:center;width:56px;height:56px;border-radius:16px;background:#fff;border:1px solid #e1e8f2;color:var(--accent,#245dcb)}
.chip.active .chip-icon{background:var(--accent-soft,#eaf1ff);border-color:var(--accent,#245dcb)}
.chip-icon .icon{width:24px;height:24px}
@media(min-width:601px){.home-chips{max-width:640px}}
@media(max-width:400px){.chip{font-size:11px;letter-spacing:-.005em}}
@media(max-width:600px){.public-header{padding:16px 18px}.header-search input{padding:9px 12px}.home main{padding-top:14px;padding-bottom:calc(90px + env(safe-area-inset-bottom))}.home .home-chips{margin-bottom:14px}.home .section-heading h2{margin:8px 0}.event-grid .card-body .status{line-height:1.5;padding:3px 8px}.event-grid .card-body h3{margin:6px 0}.event-grid .card-body p{margin:3px 0}.event-grid .card-body .text-link{margin-top:4px}}
.event-card{position:relative;transition:border-color .15s,box-shadow .15s}.event-card h3 a::after{content:"";position:absolute;inset:0;z-index:1}.event-card:hover,.event-card:active{border-color:var(--accent-line,#9db8dc);box-shadow:0 4px 14px #1e3a6018}.event-card:focus-within{outline:3px solid #c07408;outline-offset:3px}.event-card h3 a:focus-visible{outline:0}.event-card{cursor:pointer}.event-card h3 a:hover{text-decoration:none}
@media(max-width:400px){.home-chips{gap:4px}.home .chip-icon{width:48px;height:48px;border-radius:14px}.home .chip-icon .icon{width:22px;height:22px}.home .chip{font-size:10.5px;letter-spacing:-.005em}}
.nav-icon{display:grid;place-items:center;width:28px;height:28px}.nav-icon .icon{width:22px;height:22px}
.section-divider{height:0;margin:22px 0 0}.section-divider h2{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
@media(max-width:600px){.section-divider{margin:4px 0 0}.home .home-chips{margin-bottom:7px}.home main{padding-top:7px}.home .hero-banner{margin-bottom:7px}.home .event-grid{row-gap:7px}}
.card-media{position:relative}.card-tags{position:absolute;left:8px;right:8px;bottom:8px;display:flex;align-items:center;flex-wrap:wrap;gap:6px;pointer-events:none}.tag-cat,.tag-days,.tag-quota{display:inline-block;border-radius:999px;padding:3px 10px;font-size:12px;font-weight:800;line-height:1.4;color:#fff}.tag-cat{background:var(--accent,#245dcb);box-shadow:0 0 0 1.5px #fff}.tag-days{background:#0f1e37c7}.tag-quota{background:#b45309;box-shadow:0 0 0 1.5px #fff}
@media(max-width:600px){.card-tags{left:6px;right:6px;bottom:6px;gap:4px}.tag-cat,.tag-days,.tag-quota{padding:2px 8px;font-size:11px}}
@media(max-width:600px){.tag-cat,.tag-days,.tag-quota{padding:2px 7px;font-size:9px}.event-grid .card-body h3{font-size:12px;line-height:1.45;margin:0 0 4px}.event-grid .card-body h3 a{display:flex;align-items:flex-start;min-height:0;font-weight:700}.event-grid .card-title{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;line-clamp:2;overflow:hidden;text-overflow:ellipsis;overflow-wrap:anywhere}.event-grid .card-body .card-date{font-size:10px;line-height:1.5;margin:0}.event-grid .card-time,.event-grid .card-location{display:none}}
.brand-icon{width:44px;height:44px;min-width:44px;border-radius:12px;object-fit:cover;flex:none}
@media(max-width:600px){.public-header{padding-top:10px;padding-bottom:10px}.public-header .brand{min-height:36px}.public-header .brand-icon,.public-header .brand img.site-logo{width:36px;height:36px;min-width:36px;min-height:36px;border-radius:10px}.header-search input{height:36px;min-height:36px;padding:6px 12px;font-size:12px;line-height:1.2;border-radius:9px}.header-search button{height:36px;min-height:36px;padding:0 16px;font-size:12px;border-radius:9px}}
.hero-banner,.event-card{border-radius:8px}
.public-header{position:sticky;top:0;z-index:10;box-shadow:0 2px 10px #1e3a6014}html{scroll-padding-top:104px}#registration,.event-detail #registration{scroll-margin-top:104px}.skip:focus{z-index:20}
@media(max-width:600px){html{scroll-padding-top:66px}#registration,.event-detail #registration{scroll-margin-top:66px}}
.header-back{display:grid;place-items:center;width:36px;height:36px;flex:none;border:1px solid #c5d3e7;border-radius:10px;background:#fff;color:var(--accent,#245dcb)}.header-back:hover{text-decoration:none;background:var(--accent-soft,#edf3ff)}.header-back .icon{width:20px;height:20px}.header-title{flex:1;min-width:0;font-weight:800;font-size:15px;color:#163965;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.detail-hero{margin:-24px -18px 0}.detail-hero .detail-poster{border-radius:0;margin:0;max-height:80vh}.detail-body{max-width:720px;margin:0 auto}.detail-main{padding:14px 0 4px}.detail-tags{display:flex;flex-wrap:wrap;gap:6px}.detail-tags span{font-size:12px;padding:3px 10px}.detail-main h1{font-size:16px;line-height:1.3;letter-spacing:-.01em;margin:10px 0 8px}
.detail-speakers{list-style:none;margin:10px 0 0;padding:0;display:grid;gap:10px}.detail-speakers li{display:flex;gap:10px;align-items:center}.speaker-thumb{display:grid;place-items:center;flex:none;width:44px;height:44px;border-radius:50%;object-fit:cover;background:var(--accent-soft,#e8effc);color:var(--accent,#245dcb)}.speaker-thumb .icon{width:22px;height:22px}.detail-speakers strong{display:block;font-size:14px;line-height:1.3}.detail-speakers span{font-size:12px;color:#596b81}
.info-rows{margin:0;display:grid;gap:14px}.info-row{display:flex;gap:12px;align-items:flex-start}.info-icon{display:grid;place-items:center;flex:none;width:36px;height:36px;border-radius:10px;background:var(--accent-soft,#edf3ff);color:var(--accent,#245dcb)}.info-icon .icon{width:20px;height:20px}.info-row dt{margin:0;font-size:12px;color:#596b81}.info-row dd{margin:1px 0 0;font-size:12px;font-weight:700;line-height:1.4}
.detail-info,.register-summary{padding:16px}.register-summary h1{font-size:20px;line-height:1.3;letter-spacing:-.01em;margin:0 0 14px}
.event-detail main{padding-bottom:calc(96px + env(safe-area-inset-bottom))}.register-page main{padding-bottom:40px}.detail-actions{bottom:0;padding-bottom:calc(10px + env(safe-area-inset-bottom))}
@media(min-width:601px){.detail-hero{margin:0 auto 8px;max-width:560px}.detail-hero .detail-poster{border-radius:8px}.header-back{width:44px;height:44px}.detail-main h1{font-size:30px}.info-row dd{font-size:15px}}
.event-detail .card{border-radius:8px;padding:18px}.event-detail .card h2{margin:0 0 10px;font-size:18px}.event-detail .card h3{margin:14px 0 4px;font-size:15px}.event-detail .card h3:first-of-type{margin-top:0}.event-detail .register-summary h1{margin-bottom:14px}
@media(max-width:600px){.event-detail .detail-about h2{font-size:14px}.event-detail .detail-about p{font-size:12px}}
.contact-note{display:flex;gap:12px;align-items:center;margin:14px 0;font-size:14px;line-height:1.5;color:#33495f}.contact-note a{font-weight:700}
.success-card{padding:22px}.success-icon{display:grid;place-items:center;width:48px;height:48px;border-radius:50%;background:#e6f6ec;color:#1f8a4c}.success-icon .icon{width:26px;height:26px}.success-card h1{font-size:22px;line-height:1.3;letter-spacing:-.01em;margin:14px 0}
.success-event{display:grid;gap:2px;padding:12px 14px;margin:0 0 14px;border-radius:8px;background:var(--accent-soft,#edf3ff);border:1px solid var(--accent-line,#d5e2f8)}.success-event strong{font-size:15px;line-height:1.4}.success-event span{font-size:13px;color:#33495f}
.success-actions{display:flex;flex-wrap:wrap;gap:10px;margin:16px 0}.success-actions .button{flex:1 1 150px;gap:8px}.success-actions .icon{width:18px;height:18px}
.note-card{margin:0 0 16px;padding:12px 14px;border-radius:8px;background:#fff8e6;border:1px solid #f0d9a0;font-size:14px;line-height:1.5;color:#5a4310}

@media(max-width:600px){.event-detail main{padding:20px 20px calc(96px + env(safe-area-inset-bottom))}.register-page main{padding-bottom:40px}.event-detail .public-header{padding-left:20px;padding-right:20px}.event-detail .detail-actions{padding-left:20px;padding-right:20px}.event-detail .detail-hero{margin:0}.event-detail .detail-hero .detail-poster{border-radius:8px}}
@media(max-width:600px){.register-page #registration label:not(.check) input{margin:8px 0}}
@media(max-width:600px){.register-page #registration label:not(.check) input{height:44px;min-height:44px;padding:0 12px;line-height:1.2}}
.register-footer{position:fixed;left:50%;bottom:0;transform:translateX(-50%);width:100%;max-width:960px;padding:10px 20px calc(10px + env(safe-area-inset-bottom));background:#fff;border-top:1px solid #e1e8f2;z-index:4}.register-footer button{width:100%}body.register-page main{padding-bottom:calc(96px + env(safe-area-inset-bottom))}
html{scroll-padding-bottom:96px}
.category-choice{border:0;padding:0;margin:0 0 8px;min-width:0}.category-choice legend{font-weight:700;padding:0;margin:0 0 8px}
.category-choice input[type=radio]{position:absolute;opacity:0;width:1px;height:1px;min-height:0;margin:0;padding:0}
.category-choice label[for^=cat-]{display:inline-flex;align-items:center;justify-content:center;min-height:44px;min-width:calc(50% - 6px);padding:0 16px;margin:0 6px 8px 0;border:1px solid #b5c4d8;border-radius:8px;background:#fff;font-weight:700;cursor:pointer}
.category-choice input:checked+label{background:var(--accent-soft,#eaf1ff);border-color:var(--accent,#245dcb);color:var(--accent-strong,#1c46a8)}.category-choice input:focus-visible+label{outline:3px solid #c07408;outline-offset:2px}
.category-exclusive{display:none}#cat-eksklusif:checked~.category-exclusive{display:block}
.payment-box{margin:8px 0 12px;padding:14px;border-radius:8px;background:#fff8e6;border:1px solid #f0d9a0}.payment-box h3{margin:0 0 10px;font-size:15px}.qris-image{display:block;width:100%;max-width:320px;height:auto;margin:0 auto 10px;border-radius:8px;background:#fff}
.group-box{margin:16px 0;padding:14px;border-radius:8px;background:#e6f6ec;border:1px solid #b9e3c8}.group-box h2{margin:0 0 6px;font-size:16px}.group-box p{margin:0 0 12px}.group-note{padding:12px 14px;border-radius:8px;background:#fff8e6;border:1px solid #f0d9a0}
.button.wa-join{background:#1faa54}.button.wa-join:hover{background:#188c45}.success-icon.is-wait{background:#fff3d6;color:#a26a00}
.category-options{display:grid;gap:12px;margin:12px 0}.category-option{padding:16px;border:1px solid #c5d3e7;border-radius:8px;background:#fff}.category-option h2{margin:0 0 6px;font-size:17px}.category-option p{margin:0 0 12px;font-size:14px}.category-option button{width:100%}
.proof-form{margin:14px 0}.proof-form input[type=file]{padding:10px;height:auto;min-height:48px;background:#fff}.category-switch{margin:8px 0 14px}.reupload{margin:10px 0}.reupload summary{cursor:pointer;font-weight:700;color:var(--accent,#245dcb);min-height:44px;display:flex;align-items:center}
.proof-form input[type=file]{font-weight:400;font-size:14px}
.steps{display:flex;gap:4px;list-style:none;margin:0 0 14px;padding:0;font-size:11px;color:#596b81}.steps li{flex:1 1 0;min-width:0;text-align:center;display:grid;justify-items:center;gap:3px;line-height:1.2}.steps li span{display:grid;place-items:center;width:24px;height:24px;border-radius:50%;background:#e1e8f2;color:#3d5470;font-weight:800;font-size:12px}
.steps li.done span{background:#1faa54;color:#fff}.steps li.active{color:var(--accent-strong,#1c46a8);font-weight:800}.steps li.active span{background:var(--accent,#245dcb);color:#fff}
.proof-form label{display:block;margin:0 0 12px}.proof-form label .muted{font-weight:400}
.category-switch .quiet{background:#fff;color:var(--accent,#245dcb);border:1px solid #c5d3e7}
.next-box{margin:14px 0;padding:16px;border-radius:8px;background:var(--accent-soft,#edf3ff);border:1px solid var(--accent-line,#d5e2f8)}.next-box h2{margin:0 0 8px;font-size:16px}.next-box p{margin:0 0 12px}.next-box .button{width:100%}
.linklike{background:none;border:0;padding:0;min-height:44px;color:var(--accent,#245dcb);font-weight:700;text-decoration:underline;cursor:pointer}
.steps-card{padding:14px 12px 4px}.steps-card .steps{margin-bottom:8px}
.resume-banner{margin:0 0 14px;padding:14px;border-radius:8px;background:#e6f6ec;border:1px solid #b9e3c8}.resume-banner p{margin:0 0 10px}.resume-banner .button{width:100%}
.register-footer .button{width:100%}
.steps li a{display:grid;justify-items:center;gap:3px;color:inherit;text-decoration:none;min-height:44px;align-content:start}.steps li a:hover{text-decoration:none}
.recap{margin:0 0 12px;display:grid;gap:8px}.recap div{padding:10px 12px;border:1px solid #e1e8f2;border-radius:8px;background:#fff}.recap dt{font-size:12px;color:#596b81;margin:0}.recap dd{margin:2px 0 0;font-weight:700}
.data-form label{display:block;margin:0 0 12px;font-weight:700}.data-form input{font-weight:400}.data-form .recap{margin:4px 0 10px}
.group-box.opened{text-align:center}.group-box.opened .success-icon{margin:0 auto 8px}.group-box.opened p:last-child{margin:8px 0 0}.register-footer .button.quiet{background:#fff;color:#1f6f3e;border:1px solid #1faa54}
.card-cta{position:relative;z-index:2;display:inline-block;margin-top:8px;padding:8px 12px;border-radius:8px;background:var(--accent,#245dcb);color:#fff;font-weight:700;font-size:13px;text-decoration:none}.event-card .tag-days{white-space:nowrap}
.event-card{display:flex;flex-direction:column}.event-card .card-body{flex:1;display:flex;flex-direction:column}.event-card .card-body>p{margin-bottom:8px}.event-card .card-cta{margin-top:auto;align-self:flex-start}
.card-cta.quiet{background:#fff;color:var(--accent,#245dcb);border:1px solid var(--accent-line,#bcd0f2);padding:7px 11px}
.event-done .certificate-form{display:grid;gap:12px;margin:12px 0}.event-done .certificate-form label{display:block;font-weight:700}.event-done .certificate-form input{width:100%}
.register-footer{display:flex;gap:10px;align-items:center}.register-footer button,.register-footer .button{flex:1;min-width:0}.footer-home{display:grid;place-items:center;flex:none;width:48px;height:48px;border:1px solid #c5d3e7;border-radius:12px;background:#fff;color:var(--accent,#245dcb)}.footer-home:hover{text-decoration:none;background:var(--accent-soft,#edf3ff)}.footer-home .icon{width:22px;height:22px}@media(min-width:601px){.footer-home{display:none}}
.proof-link{margin:0 0 6px;font-weight:700}
/* Bottom navigation: Cari, Event, Beranda (centre), Sertifikat and, when set, Telegram. */



@media(min-width:401px){}
/* Certificate verification (QR) page and the certificate release note */
.verify-card{display:grid;gap:14px}.verify-status{display:flex;align-items:center;gap:14px;padding:14px 16px;border-radius:14px}.verify-status h1{margin:0;font-size:22px}.verify-status p{margin:2px 0 0}
.verify-status.is-valid{background:#e8f6ee;color:#14532d}.verify-status.is-revoked{background:#fdecec;color:#7f1d1d}.verify-status .success-icon{flex:0 0 auto}
.verify-facts{display:grid;gap:12px;margin:0}.verify-facts div{padding-bottom:10px;border-bottom:1px solid #e3ebf6}.verify-facts dt{font-size:13px;color:#617188}.verify-facts dd{margin:2px 0 0;font-weight:700;overflow-wrap:anywhere}.verify-name{font-size:22px}
.cert-info{display:grid;gap:8px}.cert-info p{margin:0}
.cert-card{display:flex;gap:10px;align-items:flex-start;padding:12px 14px;border-radius:12px;border:1px solid;font-size:14px;line-height:1.5}.cert-card-icon{flex:none;display:grid;place-items:center;width:24px;height:24px;border-radius:50%}.cert-card-icon .icon{width:16px;height:16px}.cert-card a{color:inherit;font-weight:700;text-decoration:underline}
.cert-card-ok{background:#e9f7ee;border-color:#bfe3cc;color:#14532d}.cert-card-ok .cert-card-icon{background:#cdeedb;color:#1f8a4c}.cert-card-wait{background:#fdecea;border-color:#f0c4be;color:#7a1f14}.cert-card-wait .cert-card-icon{background:#f9d3cd;color:#b3261e}
.cert-info+.note-card{margin-top:12px}
.detail-main .detail-info{margin:14px 0 16px}
/* Narasumber card: title 14px bold; one block per speaker (Materi N 12px bold, photo + name + institution, topic, separator) */
.event-detail .detail-speakers-card h2{font-size:14px;font-weight:800;margin:0 0 10px}
.speaker-blocks{list-style:none;margin:0;padding:0}.speaker-block{padding:12px 0;border-top:1px solid #e3ebf6}.speaker-block:first-child{padding-top:0;border-top:0}.speaker-block:last-child{padding-bottom:0}
.event-detail .speaker-block h3{margin:0 0 8px;font-size:12px;font-weight:800;line-height:1.3;color:#3a4d69}
.speaker-identity{display:flex;gap:12px;align-items:center}.speaker-identity .speaker-thumb{width:56px;height:56px}.speaker-identity .speaker-thumb .icon{width:26px;height:26px}
.speaker-identity div{min-width:0}.speaker-identity strong{display:block;font-size:14px;line-height:1.35}
.speaker-institution{display:flex;align-items:center;gap:6px;font-size:12px;line-height:1.35;color:#596b81;margin-top:2px}.speaker-logo{flex:none;width:18px;height:18px;object-fit:contain;border-radius:3px}
.speaker-topic{margin:8px 0 0;font-size:13px;line-height:1.5;color:#18304e}
.event-done main{padding-bottom:calc(113px + env(safe-area-inset-bottom))}.event-done .register-footer{z-index:5}
.event-done .certificate-form textarea{width:100%}.event-done .request-form{margin:0}.event-done .register-footer .button.quiet{background:#fff;color:var(--accent,#245dcb);border:1px solid #c5d3e7}
.event-done .certificate-form textarea{font:inherit;padding:12px 14px;border:1px solid #c5d3e7;border-radius:12px;background:#fff;color:inherit;resize:vertical;min-height:84px}.event-done .request-form .register-footer a.button{flex:0 0 auto;width:auto;padding-left:18px;padding-right:18px}.event-done .request-form .register-footer button{flex:1 1 0;white-space:nowrap}
.event-done .request-fee p{margin:6px 0 0;white-space:pre-line}.event-done .certificate-form small{display:block;font-weight:400;margin-top:4px}.event-done .certificate-form input[type=file]{padding:10px;border:1px dashed #9db4d8;border-radius:12px;background:#fff}.event-done .certificate-form label.check{display:flex;gap:10px;align-items:flex-start;font-weight:400}.event-done .certificate-form label.check input{width:auto;margin-top:4px}.request-confirm-data{padding:10px 12px;background:#f4f7fc;border-radius:10px}
.event-done .confirm-dialog{border:0;border-radius:16px;padding:22px;width:min(420px,calc(100vw - 32px));box-shadow:0 20px 60px #10203a55}.event-done .confirm-dialog::backdrop{background:#10203a99}.event-done .confirm-dialog h2{margin:0 0 8px;font-size:20px}.event-done .confirm-actions{display:flex;gap:10px;justify-content:flex-end;margin-top:14px}.event-done .confirm-actions button{min-height:44px;padding:0 18px;border:0;border-radius:12px;background:var(--accent,#245dcb);color:#fff;font:inherit;font-weight:700;cursor:pointer}.event-done .confirm-actions button.quiet{background:var(--accent-soft,#e8eefa);color:var(--accent,#245dcb)}
.verify-status.is-revoked .success-icon{background:#fbdcdc;color:#b42318}
/* Payment card (QRIS + account): a compact neutral blue card; amber stays for real warnings. */
.payment-box{margin:8px 0 11px;padding:13px;border-radius:12px;background:#f4f7fc;border:1px solid #dfe7f3;color:#18304e}
.payment-box h3,.event-detail .card .payment-box h3{margin:0 0 2px;font-size:14px;font-weight:700;color:#143d77}
.payment-box .payment-fee{margin:0 0 9px;font-size:18px;line-height:1.2;color:#15803d}.payment-box .payment-fee strong{font-weight:800}
.payment-qris{margin:0 0 10px;text-align:center}.payment-box .qris-link{display:block;width:fit-content;margin:0 auto}.payment-box .qris-image{display:block;width:100%;max-width:190px;height:auto;margin:0;padding:6px;border:1px solid #dfe7f3;border-radius:10px;background:#fff}
.payment-qris figcaption{margin-top:4px;font-size:11.5px;color:#5b6b88}
.payment-account{display:grid;gap:2px}.payment-who{margin:0;font-size:14px;font-weight:600;color:#18304e;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.payment-box .payment-number-row{display:inline-flex;align-items:center;gap:8px;width:fit-content;max-width:100%;min-height:36px;margin:0;padding:0 10px 0 0;border:0;background:transparent;color:#18304e;font:inherit;cursor:pointer;text-align:left}
.payment-number{font-size:16px;font-weight:700;font-variant-numeric:tabular-nums;letter-spacing:.5px}.payment-copy-icon{flex:none;color:var(--accent,#245dcb)}.payment-number-row:active .payment-number{color:var(--accent,#245dcb)}
.payment-hint{font-size:11.5px;color:#5b6b88}.payment-hint.is-done{color:#15803d;font-weight:700}
.payment-box .payment-note{margin:9px 0 0;padding-top:9px;border-top:1px solid #dfe7f3;font-size:13px;color:#3b4f70}
.event-done .register-footer a.button{flex:1 1 0;min-width:0;display:block;height:48px;padding:0 12px;line-height:48px;text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.event-done .register-footer a.button.facility{background:#15803d;color:#fff}.event-done .register-footer a.button.facility:hover{background:#166534}
.cert-download-status{margin:8px 0 0;font-size:13px;color:#15803d;min-height:1em}.cert-download-status.is-bad{color:#b42318}
.group-box.opened .holder-label{margin:0 0 4px;font-size:13px}.group-box.opened .holder-name{margin:0 0 6px;overflow-wrap:anywhere}
/* Wide screens: the two public forms fill their card in two columns instead of one narrow strip; phones stay in one column. */
@media(min-width:720px){
  .field-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 22px}
  .field-grid .f-name{order:1}.field-grid .f-institution{order:2}.field-grid .f-email{order:3}.field-grid .f-phone{order:4}.field-grid .f-province{order:5}.field-grid .f-city{order:6}.field-grid .f-profession{order:7}.field-grid .f-work_status{order:8}
  .event-done .certificate-form.request-submit{max-width:none;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px 22px}
  .event-done .request-submit>*{grid-column:1/-1;order:3}
  .event-done .request-submit>.half{grid-column:auto;order:0}
  .event-done .request-submit>label,.event-done .request-submit>.payment-box{margin:0}
  .event-done .request-submit>.payment-box{order:1}
  .event-done .request-submit>.half.proof{order:2}
  .event-done .certificate-form{max-width:none}      /* the number field is as wide as the release-time box under it */
}

/* Desktop home (Paket P): a shorter banner, header navigation instead of the floating bar, a wider container with three columns. */
.header-nav{display:none}
@media(min-width:900px){.home .hero-banner img{aspect-ratio:18/5}}
@media(min-width:1024px){
  .header-nav{display:flex;gap:4px;margin-left:auto;flex:none}.header-nav a{padding:8px 12px;border-radius:10px;color:#3b4f70;font-weight:600;font-size:14px;white-space:nowrap}
  .header-nav a:hover{background:#eef3fb;text-decoration:none}.header-nav a[aria-current=page]{color:var(--accent,#245dcb);background:var(--accent-soft,#e8f0fc)}
  .home .bottom-nav,.site-page .bottom-nav{display:none}.home main{padding-bottom:48px}
}
/* Event grid on a desktop: 3 columns from 900 px, 4 from 1100 px, 5 from 2200 px. The content grows with the screen (1360 px, 1500 px from 1800 px, 1580 px from 2200 px) so a card stays about 300-355 px wide and a poster stays readable. The banner keeps one height. */
.home-list{--home-w:1160px}
@media(min-width:900px){.home-list .event-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(min-width:1100px){
  .home-list{--home-w:1360px}
  .home-list .public-header{padding-left:max(20px,calc((100% - var(--home-w))/2));padding-right:max(20px,calc((100% - var(--home-w))/2))}
  .home-list main{max-width:calc(var(--home-w) + 40px)}.home-list .event-grid{grid-template-columns:repeat(4,minmax(0,1fr))}
  .home-list .hero-banner img{aspect-ratio:auto;height:320px}
}
@media(min-width:1800px){.home-list{--home-w:1500px}}
@media(min-width:2200px){.home-list{--home-w:1580px}.home-list .event-grid{grid-template-columns:repeat(5,minmax(0,1fr))}}

/* Paket Q: a readable card type scale, one category bar aligned with the grid (sticky on a desktop). */
.event-card .card-body h3{font-size:15px;line-height:1.4}.event-card .card-body .card-date{font-size:13px}.tag-cat,.tag-days,.tag-quota{font-size:12px}
@media(max-width:600px){.event-grid .card-body h3{font-size:12px;line-height:1.4}.event-grid .card-body .card-date{font-size:12px}.tag-cat,.tag-days,.tag-quota{font-size:11px;padding:2px 8px}}
@media(min-width:601px) and (max-width:1023px){.home-chips{margin-left:auto;margin-right:auto}}
@media(min-width:1024px){
  .home-chips{max-width:none;display:flex;flex-wrap:wrap;gap:10px;margin:0 0 14px;padding:10px 0;position:sticky;top:91px;z-index:5;background:#fff}
  .home .chip{flex-direction:row;align-items:center;gap:10px;min-height:0;padding:5px 16px 5px 5px;border-radius:999px;background:#fff;border:1px solid #e1e8f2;font-size:14px;letter-spacing:0}
  .home .chip:hover{border-color:var(--accent-line,#9db8dc)}.home .chip-icon{width:36px;height:36px;border-radius:50%;border:0;background:#eef3fb}.home .chip-icon .icon{width:20px;height:20px}
.home .chip-icon .chip-img{width:20px;height:20px;object-fit:contain}
  .home .chip.active{border-color:var(--accent,#245dcb);background:var(--accent-soft,#eaf1ff)}.home .chip.active .chip-icon{background:#fff}
}
/* Paket CY: on the finished-event page the title and the pick-up hint share the size of the date line, and the release times open in one pop-up card. */
.event-done .meta-line{font-size:13px;line-height:1.55;letter-spacing:0;margin:0 0 6px}
.event-done h1.meta-line{font-weight:700;color:#18304e;margin:6px 0 4px}
.event-done p.meta-line{color:#596b81;font-weight:400}.event-done p.meta-line strong{color:#18304e;font-weight:700}

/* Paket DA: the Safari hint under the download button (iPhone/iPad only, shown after a tap). */
.cert-ios-hint{margin:10px 0 0;font-size:13px}.cert-copy{padding:0;border:0;background:none;color:var(--accent,#245dcb);font:inherit;font-weight:700;text-decoration:underline;cursor:pointer}

/* Paket DB: the "not yet due" page (a yellow card, a dark green administration card) and the speed-up form. */
.group-box.wait-card{background:#fff6d6;border-color:#f0d58a;color:#4a3708}.group-box.wait-card h1{color:#3d2d05}.group-box.wait-card .muted{color:#6b5416}
.admin-card{margin:14px 0 0;padding:16px 18px;border-radius:12px;background:#14532d;color:#fff;font-size:14px;line-height:1.55}.admin-card h2{margin:0 0 8px;font-size:16px;color:#fff}.admin-card p{margin:0 0 8px;color:#e8f6ee}.admin-card p:last-child{margin-bottom:0}.admin-card strong{color:#fff}
.group-box.wait-card .success-icon{background:#fff;color:#a26a00}

/* Paket DF: the public chat page is full page: the sticky header on top, the bottom bar below on a phone and tablet, and the Chatwoot widget filling everything between (only the chat scrolls). */
body.chat-page{display:flex;flex-direction:column;height:100vh;height:100dvh;overflow:hidden}
.chat-page .public-header{flex:none}
.chat-page main{flex:1 1 auto;min-height:0;max-width:none;width:100%;margin:0;padding:0 0 calc(100px + env(safe-area-inset-bottom));display:flex;flex-direction:column}
.chat-frame{position:relative;flex:1 1 auto;min-height:0;width:100%;background:#fff;overflow:hidden}
.chat-frame iframe{position:absolute;top:0;left:0;width:100%;height:100%;border:0;visibility:hidden}.chat-frame.clip-brand iframe{height:calc(100% + 36px)}      /* Chatwoot draws a 36 px 'Powered by' strip at the very bottom of the widget; the frame is taller than its box so that strip falls outside it */.chat-frame iframe.ready{visibility:visible}
.chat-status,.chat-failed{margin:0;padding:24px 20px;text-align:center;color:#526780}.chat-failed .button{margin-left:8px}
@media(min-width:1024px){.chat-page .bottom-nav{display:none}.chat-page main{padding-bottom:0}.chat-frame{max-width:720px;margin:0 auto;border-left:1px solid #d9e3f0;border-right:1px solid #d9e3f0}}

/* Paket DI: the card button is centred, exactly 32 px tall, and keeps a 44 px tap area (an invisible 6 px above and below). */
.event-card .card-cta{align-self:center;display:inline-flex;align-items:center;justify-content:center;box-sizing:border-box;height:40px;padding:0 14px;line-height:1;margin-top:auto}
.event-card .card-cta.quiet{padding:0 13px}
.event-card .card-cta::after{content:"";position:absolute;left:0;right:0;top:-6px;bottom:-6px}
@media(max-width:600px){.event-grid .card-body .card-date{margin-bottom:8px}}      /* the location line is hidden on a phone, so the date line is what the button sits under: keep the 8 px */

/* Paket DM + DN + DO: on the certificate list and the home (every .card-bars grid) the date line starts at the same height in every card of a row, and "Ambil sertifikat" is a 32 px bar flush with the left, right and bottom edges of the card (the card's rounded corners clip it): the words on the left, the certificate icon on the right, 12 px from each edge. */
.card-bars .event-card .card-body h3{min-height:2.8em}
.card-bars .event-card .card-date{margin-bottom:12px}
.card-bars .event-card .card-cta{align-self:stretch;display:flex;align-items:center;justify-content:space-between;gap:6px;margin:auto -21px -21px;padding:0 12px;border-radius:0;text-align:left;white-space:nowrap}
.card-bars .event-card .card-cta .icon{width:16px;height:16px;flex:none}
.card-bars .event-card .card-cta span{min-width:0;overflow:hidden;text-overflow:ellipsis}
@media(max-width:600px){.card-bars .event-card .card-cta{margin:auto -12px -12px;font-size:12px}}      /* a phone card has 12 px of padding (21 px elsewhere); 12 px type keeps the words on one line in a card about 155 px wide */
@media(max-width:349px){.card-bars .event-card .card-cta{justify-content:center}.card-bars .event-card .card-cta .icon{display:none}}      /* a very narrow screen: no room for the icon, the words stay centred */
.card-bars .event-card .card-location{margin-bottom:12px}
.card-bars .event-card .card-cta.quiet{background:var(--accent-soft,#e8f0fc);color:var(--accent,#245dcb);border:0;border-top:1px solid var(--accent-line,#cfdcf3);padding:0 12px}      /* Lihat detail: a quieter blue-tinted bar under a hairline; Daftar and Ambil sertifikat are the solid blue ones */

/* Paket DP: a transparent banner shows the page behind it, so the frame around the banner has no tint and no border of its own. */
.hero-banner{background:transparent;border:0}

/* Paket DS: the icon container of the category menu is a small pebble: 32 px, one shape for every menu, a 20 px icon (the same on a phone and on a desktop, where the pill keeps its own colours and no border). */
.home .chip-icon{width:32px;height:32px;border-radius:58% 42% 52% 48% / 46% 56% 44% 54%}
.home .chip-icon .icon{width:20px;height:20px}
.home .chip{min-height:0}

/* Paket DT: the home category menu can come from the title (4 menus), the Jenis Event (5 menus + Semua) or the Kategori Topik (10 topics in two rows of five, "Semua" as a small link above). */
.home-chips-jenis{grid-template-columns:repeat(6,minmax(0,1fr));gap:4px}
.home-chips-jenis .chip{font-size:10px;letter-spacing:-.01em}
.home-chips-topik{display:block}
.home-chips-topik .chips-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:10px 4px}
.home-chips-topik .chip{font-size:10px;letter-spacing:-.01em;line-height:1.2;min-width:0}
.home-chips-topik .chip{justify-content:flex-start;min-height:61px;overflow-wrap:anywhere}
.chip-abbr{font-size:12px;font-weight:800;letter-spacing:0}
@media(max-width:349px){.home-chips-jenis{display:flex;overflow-x:auto;gap:12px;padding-bottom:4px}.home-chips-jenis .chip{flex:none;width:56px}}
@media(min-width:1024px){
  .home-chips-topik{display:flex;flex-wrap:wrap;gap:10px;align-items:center}.home-chips-topik .chips-grid{display:contents}
  .home-chips-jenis{display:flex}
  .home-chips-topik .chip{min-height:0}
}
.brand-logo-full{display:none;height:44px;width:auto;max-width:220px;object-fit:contain;flex:none}
@media(min-width:521px){.brand-logo-full{display:block}.brand-icon-mobile{display:none}}

.honor-public{max-width:520px;margin:0 auto;padding:16px}
.honor-card{background:#fff;border:1px solid #e1e8f2;border-radius:14px;padding:20px}
.honor-card h1{margin:0 0 2px;font-size:20px;color:#163965}.honor-sub{margin:0 0 12px;color:#5a6b82;font-size:13px}
.honor-summary{background:#f7f9fc;border-radius:10px;padding:10px 12px;font-size:14px;line-height:1.6;margin:0 0 14px}
.honor-form label{display:block;font-size:13px;font-weight:600;margin:0 0 12px}.honor-form input:not([type=checkbox]),.honor-form select{display:block;width:100%;margin-top:5px}
.honor-form .honor-check{display:flex;gap:10px;align-items:flex-start;font-weight:500}.honor-check input{width:auto;margin-top:4px}
.honor-submit{width:100%;min-height:46px;margin-top:6px}
.honor-small{font-size:12.5px;color:#5a6b82;margin:10px 0 0}
.honor-alert{background:#fff1ed;border:1px solid #f0cbc2;color:#883826;border-radius:10px;padding:10px 12px;font-size:14px;margin:0 0 12px}
.honor-ok{background:#e4f5ea;border:1px solid #bfe3cb;color:#1f6b3a;border-radius:10px;padding:10px 12px;font-size:14px}

.detail-poster{height:auto}

.honor-steps{list-style:none;margin:0 0 12px;padding:0;display:grid;gap:6px}.honor-steps li{border:1px solid #e1e8f2;border-radius:10px;padding:8px 12px;font-size:13.5px;background:#f7f9fc}.honor-steps li.done{background:#e6f6ec;color:#14532d;border-color:#c5e8d1}.honor-steps li.cur{border:1.5px solid var(--accent,#215bc5);background:#fff}

/* Homepage, round 1: tidy topic chips on a desktop, a useful empty state, a short band for events without a poster. */
.poster-band{display:none}
.empty-actions{display:flex;gap:10px;flex-wrap:wrap}
.empty-recent-title{margin:20px 0 8px;font-size:12.5px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:#4b5876}
.empty-recent{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.empty-recent a{display:block;height:100%;padding:10px 12px;border:1px solid #e1e8f2;border-radius:10px;background:#fbfcff;color:#18304e;text-decoration:none}.empty-recent a:hover{border-color:var(--accent-line,#9db8dc);text-decoration:none}
.empty-recent strong{display:block;font-size:13.5px;line-height:1.4;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}.empty-recent small{display:block;margin-top:3px;color:#596b81;font-size:12px}
@media(max-width:700px){.empty-recent{grid-template-columns:minmax(0,1fr)}}
@media(min-width:1024px){
  .home-chips{align-items:flex-start;gap:8px 16px}
  .home-chips .chips-grid{display:flex;flex-wrap:wrap;gap:8px;flex:1 1 0;min-width:0;align-items:center}
  .home .chip{padding:7px 15px;font-size:13.5px;min-height:0;gap:8px}
  .home .chip:has(.chip-icon:not(.is-abbr)){padding-left:6px}
  .home .chip-icon.is-abbr{display:none}
  .home .chip-icon{width:24px;height:24px;background:#eef3fb}.home .chip-icon .icon{width:15px;height:15px}.home .chip-icon .chip-img{width:16px;height:16px}
  .card-media.no-poster .poster-placeholder,.card-media.no-poster .card-tags{display:none}
  .poster-band{display:flex;align-items:center;gap:10px;height:58px;padding:0 12px;background:linear-gradient(90deg,var(--accent-soft,#eef3ff),#fff);border-bottom:1px solid #e8edf6;color:var(--accent-strong,#1c46a8);font-weight:800;font-size:13px}
  .band-icon{display:grid;place-items:center;flex:none;width:32px;height:32px;border-radius:50%;background:#fff;border:1px solid var(--accent-line,#d3dcec)}.band-icon .icon{width:17px;height:17px}
  .band-tags{margin-left:auto;display:flex;gap:6px;flex-wrap:nowrap}
}
.empty-actions .button.quiet{background:#fff;color:var(--accent-strong,#1c46a8);border:1px solid var(--accent-line,#b9c9e6)}

/* Event and certificate cards, round 2: the title takes three lines (then "…") so the date and the location sit at the same height in every card of a row; the card button is 40 px tall (was 32 px); the poster frame stays 1:1 and a poster that is not square is cropped from its centre. */
.card-bars .event-card .card-body h3{height:calc(1.4em * 3);min-height:0;margin:0 0 8px;overflow:hidden;line-height:1.4}
.card-bars .event-card .card-body h3 a{display:flex;align-items:flex-start;min-height:0;height:100%}
.card-bars .event-card .card-title{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;overflow:hidden;overflow-wrap:anywhere;line-height:1.4}
.card-bars .event-card .card-date,.card-bars .event-card .card-location{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.card-bars .event-card .card-date{margin-bottom:6px}.card-bars .event-card .card-location{margin-bottom:12px}
.card-bars .event-card .card-cta{height:52px}
.card-bars .event-card .card-cta .icon{width:20px;height:20px}
@media(max-width:600px){.card-bars .event-card .card-date{margin-bottom:8px}}      /* the location line is hidden on a phone: the button sits right under the date */

/* Cards, round 3: a tighter vertical rhythm. Date and location form one group (small icons, 3 px apart); less padding around the text; the button stays 40 px at the foot. */
.card-bars .event-card .card-date .icon,.card-bars .event-card .card-location .icon{display:none}
@media(min-width:601px){
  .card-bars .event-card .card-body{padding:14px 16px 16px}
  .card-bars .event-card .card-body h3{height:calc(1.35em * 3);line-height:1.35;margin:0 0 8px}
  .card-bars .event-card .card-title{line-height:1.35}
  .card-bars .event-card .card-date,.card-bars .event-card .card-location{display:flex;align-items:center;gap:7px;font-size:13px;line-height:1.4;margin:0 0 3px}
  .card-bars .event-card .card-location{margin-bottom:12px}
  .card-bars .event-card .card-date .icon,.card-bars .event-card .card-location .icon{display:block;flex:none;width:14px;height:14px;opacity:.65}
  .card-bars .event-card .card-date>span,.card-bars .event-card .card-location>span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .card-bars .event-card .card-cta{margin:auto -16px -16px}
  .card-bars .event-card .card-date:has(+ .card-cta){margin-bottom:12px}      /* no location line: the button still keeps its distance */
}
@media(max-width:600px){.card-bars .event-card .card-cta{height:44px;font-size:12.5px}.card-bars .event-card .card-cta .icon{width:18px;height:18px}}      /* a phone card is only about 155-175 px wide: a 44 px bar is still an easy tap target, 52 px is too heavy there */
.hero-banner picture{display:block}
.brand picture{display:contents}

/* Beranda tahap 3: banner copy, section headings, pinned tag, footer */
.hero-banner.has-copy{position:relative}
.hero-copy{position:absolute;left:5%;top:50%;transform:translateY(-50%);max-width:46%;background:#0f1e37b8;color:#fff;padding:16px 22px;border-radius:12px}
.hero-title{margin:0;font-size:clamp(20px,2.4vw,32px);font-weight:800;line-height:1.2}.hero-sub{margin:6px 0 0;font-size:clamp(14px,1.4vw,17px);line-height:1.45}
.hero-btn{display:inline-block;margin-top:12px;padding:9px 18px;border-radius:999px;background:#fff;color:var(--accent,#245dcb);font-weight:800;font-size:14px}.hero-btn:hover{text-decoration:none;background:#eef3fb}.hero-btn:focus-visible{outline:3px solid #fff;outline-offset:2px}
@media(max-width:700px){.hero-banner.has-copy .hero-copy{position:static;transform:none;max-width:none;background:transparent;color:#18304e;padding:12px 2px 2px}.hero-btn{background:var(--accent,#245dcb);color:#fff;margin-top:10px}.hero-btn:hover{background:var(--accent,#245dcb);filter:brightness(.92)}.hero-btn:focus-visible{outline-color:var(--accent,#245dcb)}}
.home-section{grid-column:1/-1;margin:12px 0 0;font-size:18px;font-weight:800;color:#18304e;line-height:1.3}.home-section:first-child{margin-top:2px}
.tag-pin{display:inline-block;border-radius:999px;padding:3px 10px;font-size:12px;font-weight:800;line-height:1.4;background:#fef3c7;color:#78350f;box-shadow:0 0 0 1.5px #fff}
@media(max-width:600px){.tag-pin{padding:2px 8px;font-size:11px}}
.site-footer{margin:28px auto 0;padding:22px 20px 26px;background:#fff;border-top:1px solid #e1e8f2}
.site-footer-in{max-width:var(--home-w,960px);margin:0 auto;display:grid;grid-template-columns:minmax(0,2fr) minmax(0,1fr) minmax(0,1fr);gap:18px 40px;font-size:14px;color:#3b4f70}
.sf-about strong{font-size:16px;color:#18304e}.sf-about p{margin:4px 0 0;line-height:1.5}
.sf-col h2{margin:0 0 6px;font-size:12px;letter-spacing:.05em;text-transform:uppercase;color:#596b81}.sf-col ul{list-style:none;margin:0;padding:0;display:grid;gap:4px}.sf-col a{color:#18304e;font-weight:600}
.sf-copy{grid-column:1/-1;margin:6px 0 0;padding-top:12px;border-top:1px solid #e1e8f2;font-size:13px;color:#596b81}
@media(max-width:700px){.site-footer-in{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}.sf-about{grid-column:1/-1}}
@media(max-width:1023px){.site-footer{padding-bottom:calc(86px + env(safe-area-inset-bottom))}}

/* On a phone the bottom bar already holds Hubungi (Chat) and the links, so the footer block is hidden; the bar keeps a spacer where the footer was. */
@media(max-width:600px){.site-footer-in{display:none}.site-footer{margin:0;padding:calc(76px + env(safe-area-inset-bottom)) 0 0;border:0;background:none}.home .site-footer{padding:0}}

/* White pages: the cards of the public pages get the same firmer edge */
.event-card{border-color:#d5dfeb;box-shadow:0 1px 2px rgba(20,35,70,.05)}

/* Bottom bar: a floating white bar. The page you are on is a round button raised in a notch of the bar (plain CSS, no picture needed); the notch and the shadow follow the same shape. */
.bottom-nav{position:fixed;z-index:5;left:50%;bottom:calc(12px + env(safe-area-inset-bottom));transform:translateX(-50%);width:calc(100% - 24px);max-width:520px;height:62px;display:flex;padding:0 16px;background:#fff;border:0;border-radius:22px;filter:drop-shadow(0 3px 10px rgba(20,35,70,.16))}
.bottom-nav a{position:relative;flex:1 1 0;min-width:0;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;gap:2px;padding:0 2px 9px;color:#586274;font-size:11px;font-weight:600;line-height:1.2;white-space:nowrap;text-decoration:none;-webkit-tap-highlight-color:transparent}
.bottom-nav a:hover{text-decoration:none}
.bottom-nav a:focus-visible{outline:2px solid var(--accent,#255fcc);outline-offset:-3px;border-radius:16px}
.bottom-nav .nav-icon{display:flex;align-items:center;justify-content:center;width:24px;height:24px;font:inherit}.bottom-nav .nav-icon .icon{width:22px;height:22px}
.bottom-nav a.on{color:var(--accent-strong,#244c85);font-weight:800}
.bottom-nav a.on .nav-icon{position:absolute;left:50%;top:-13px;z-index:2;width:36px;height:36px;margin-left:-18px;border-radius:50%;background:var(--accent,#255fcc);color:#fff;box-shadow:0 7px 14px color-mix(in srgb,var(--accent,#255fcc) 38%,transparent);animation:nav-pop .22s ease-out}
.bottom-nav a.on .nav-icon .icon{width:17px;height:17px}
.bottom-nav a.on::before{content:"";position:absolute;left:50%;top:-21px;width:52px;height:52px;margin-left:-26px;border-radius:50%;background:#fff}
.bottom-nav a.on::after{content:"";position:absolute;left:50%;top:-11px;width:65.4px;height:13px;margin-left:-32.7px;background:radial-gradient(circle at 0 1px,transparent 10px,#fff 10.6px) left top/9.1px 13px no-repeat,radial-gradient(circle at 100% 1px,transparent 10px,#fff 10.6px) right top/9.1px 13px no-repeat}
.bottom-nav a.on:first-child::after{background:radial-gradient(circle at 100% 1px,transparent 10px,#fff 10.6px) right top/9.1px 13px no-repeat}
.bottom-nav a.on:last-child::after{background:radial-gradient(circle at 0 1px,transparent 10px,#fff 10.6px) left top/9.1px 13px no-repeat}
@keyframes nav-pop{from{transform:translateY(7px) scale(.86);opacity:.5}to{transform:none;opacity:1}}
@media(prefers-reduced-motion:reduce){.bottom-nav a.on .nav-icon{animation:none}}
@media(max-width:1023px){.home main{padding-bottom:calc(104px + env(safe-area-inset-bottom))}html{scroll-padding-bottom:112px}}
/* the certificate guide: a pop-up over the chat */
.chat-guide-chip{flex:none;align-self:flex-start;margin:8px 16px 0;min-height:36px;padding:0 14px;border:1px solid var(--accent-line,#bcd0f2);border-radius:99px;background:var(--accent-soft,#e8f0fc);color:var(--accent-strong,#244c85);font:inherit;font-size:13px;font-weight:700;cursor:pointer}.chat-guide-chip[hidden]{display:none}
.chat-guide-dialog{width:min(92vw,420px);max-height:88vh;overflow:auto;padding:16px 16px 14px;border:0;border-radius:14px;background:#fff;color:#33465f;font-size:14px;line-height:1.55;box-shadow:0 12px 40px rgba(10,16,40,.3)}.chat-guide-dialog::backdrop{background:rgba(10,16,40,.5)}
.chat-guide-head{display:flex;align-items:flex-start;justify-content:space-between;gap:8px}.chat-guide-head h2{margin:0;font-size:18px;color:#18304e}
.chat-guide-x{flex:none;width:40px;height:40px;margin:-6px -8px 0 0;border:0;background:none;font-size:26px;line-height:1;color:#596b81;cursor:pointer}
.chat-guide-event{margin:6px 0 8px;font-weight:700;color:#18304e}.chat-guide-dialog p{margin:0 0 4px}.chat-guide-dialog ol{margin:4px 0 14px;padding-left:20px}
.chat-guide-buttons{display:grid;grid-template-columns:1fr 1fr;gap:10px}.chat-guide-buttons .button{min-height:46px;margin:0;width:100%;justify-content:center}
.chat-guide-status{min-height:20px;margin:8px 0 0;font-size:13px;color:#27500a}
.chat-guide-buttons .button.quiet{background:#fff;color:var(--accent,#255fcc);border:1px solid var(--accent-line,#bcd0f2)}

/* one type scale on the phone for the card pages: the bar text of a certificate card is 13 (as the Shop price), a certificate title keeps 2 lines (as a Shop card), the "Event terakhir" rows are 14 (as an article row) and the topic labels are 11.5 (was 10) */
@media(max-width:600px){
 .card-bars .event-card .card-cta{font-size:13px}
 .card-bars .event-card .card-title{-webkit-line-clamp:2}
 .card-bars .event-card .card-body h3{height:calc(1.4em * 2)}      /* room for two lines, not three */
 .empty-recent strong{font-size:14px}
 .home-chips-topik .chip,.home-chips-jenis .chip{font-size:11.5px}
}
/* the topic labels are as large as the column allows ("Pustakawan" must stay in one piece): 11.5 from 390 px, 11 from 375, 10.5 from 360, 10 below */
@media(max-width:389px){.home-chips-topik .chip,.home-chips-jenis .chip{font-size:11px}}
@media(max-width:374px){.home-chips-topik .chip,.home-chips-jenis .chip{font-size:10.5px}}
@media(max-width:359px){.home-chips-topik .chip,.home-chips-jenis .chip{font-size:10px}}
.register-page #registration select{display:block;width:100%;box-sizing:border-box;height:51px;margin:7px 0 0;padding:0 12px;border:1px solid #c9d9ea;border-radius:8px;color:var(--ink,#14284b);background:#fcfdff;font:inherit;min-width:0}
@media(max-width:600px){.register-page #registration label:not(.check) select{margin:8px 0;height:44px;min-height:44px;padding:0 12px;line-height:1.2}}
.category-points{list-style:none;margin:0;padding:0;display:grid;gap:8px}.category-points li{display:flex;gap:8px;align-items:flex-start;font-size:14px;line-height:1.5}.category-points .icon{flex:none;width:18px;height:18px;margin-top:2px;color:#15803d}
.category-option h2{margin:0 0 10px}
.register-footer.category-footer button{color:#fff;padding-left:8px;padding-right:8px;white-space:nowrap}
.register-footer.category-footer button[form=cat-reguler]{background:var(--accent,#245dcb);border-color:var(--accent,#245dcb)}.register-footer.category-footer button[form=cat-reguler]:hover{background:var(--accent-strong,#1f4fa8)}
.register-footer.category-footer button[form=cat-eksklusif]{background:var(--excl,#15803d);border-color:var(--excl,#15803d)}.register-footer.category-footer button[form=cat-eksklusif]:hover{background:var(--excl-hover,#136f35)}
.category-option.is-eksklusif{background:var(--excl-soft,#ecf7f0);border-color:var(--excl-line,#a9d8bb)}.category-option.is-eksklusif .category-points .icon{color:var(--excl-icon,#15803d)}
.category-option.is-reguler{background:var(--accent-soft,#edf3ff);border-color:var(--accent-line,#d5e2f8)}.category-option.is-reguler .category-points .icon{color:var(--accent-strong,#1f4fa8)}
.payment-hint{display:block;min-height:17px;line-height:17px}
.payment-box.is-eksklusif{background:var(--excl-soft,#ecf7f0);border-color:var(--excl-line,#a9d8bb)}.payment-box.is-eksklusif h3,.event-detail .card .payment-box.is-eksklusif h3{color:var(--excl-icon,#15803d)}.payment-box.is-eksklusif .payment-note{border-top-color:var(--excl-line,#a9d8bb)}.payment-box.is-eksklusif .payment-copy-icon{color:var(--excl-icon,#15803d)}.payment-box.is-eksklusif .payment-hint.is-done{color:var(--excl-icon,#15803d)}
.proof-card{margin:12px 0;padding:12px;border-radius:12px;background:var(--accent-soft,#edf3ff);border:1px solid var(--accent-line,#d5e2f8)}.proof-card .proof-heading{margin:0 0 8px;font-size:15px}.proof-card p{margin:0 0 10px;font-size:14px}.proof-card .proof-link{margin:0 0 10px}.proof-link-hint{font-weight:400}.proof-link a{display:inline-block;padding:3px 0}
.proof-form label.file-pick{position:relative;display:flex;gap:12px;align-items:center;margin:0 0 10px;padding:10px;min-height:76px;background:#fff;border:1px solid #c9d9ea;border-radius:12px;font-size:14px;font-weight:400;cursor:pointer}
.proof-card label.file-pick:last-child,.proof-form>label.file-pick:last-of-type{margin-bottom:0}
.proof-form .file-pick input[type=file]{position:absolute;inset:0;width:100%;height:100%;min-height:0;margin:0;padding:0;opacity:0;cursor:pointer;font-size:0;border:0}
.fp-tile{flex:none;position:relative;display:flex;align-items:center;justify-content:center;width:56px;height:56px;border-radius:10px;border:1.5px dashed var(--accent,#245dcb);background:var(--accent-soft,#edf3ff);color:var(--accent,#245dcb)}.fp-tile .icon{width:22px;height:22px}
.fp-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;border-radius:9px}
.fp-badge{display:none;position:absolute;right:-6px;top:-6px;width:18px;height:18px;border-radius:50%;background:#15803d;color:#fff;border:2px solid #fff;box-sizing:content-box;align-items:center;justify-content:center}.fp-badge .icon{width:12px;height:12px}
.fp-text{flex:1;min-width:0}.fp-title{display:block;font-size:14px;font-weight:600;color:#14284b}.fp-sub{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;font-size:12px;line-height:1.35;color:#5a6b82;overflow:hidden;overflow-wrap:anywhere}
.fp-sub:empty{display:none}
.file-pick:focus-within{outline:2px solid var(--accent,#245dcb);outline-offset:2px}
.file-pick.is-filled .fp-tile{border-style:solid;border-color:transparent}.file-pick.is-filled .fp-tile>.icon{display:none}.file-pick.is-filled .fp-badge{display:flex}
.proof-form label.file-pick.is-invalid{border-color:#b42318}.file-pick.is-invalid .fp-sub{color:#b42318;font-weight:600}
@media(max-width:359px){.proof-form label.file-pick{gap:10px;padding:8px}.fp-tile{width:48px;height:48px}}
.event-done .done-card{margin:0 0 12px}.event-done .done-card h2{margin:0 0 10px;font-size:16px;line-height:1.3}.event-done .done-card h1+p,.event-done .done-card h2+p{margin-top:0}
.event-done .done-card .cert-card{font-size:13px}.event-done .done-card .certificate-form{margin:12px 0 6px}.event-done .done-card .certificate-form input{display:block;font-weight:400;margin:0}.event-done .done-card .register-footer button{font-size:14px}
.event-done .detail-hero{margin-bottom:12px}
/* Home banner as a slider (slides 2 and 3 are set in Pengaturan > Beranda; without them the plain banner above is used). Same sizes as the plain banner; the dots sit in a dark pill because the pictures are anyone's. */
.home-banner{margin:0 0 14px}.home-banner .art-banner-track{border-radius:8px}
.home-banner .art-slide{aspect-ratio:16/9}
.home-banner .art-dots{left:50%;right:auto;bottom:8px;width:auto;transform:translateX(-50%);gap:0;padding:0 4px;border-radius:99px;background:rgba(0,0,0,.42)}
.home-banner .art-dots button{width:32px;height:28px}
.home-copy-below{position:static;transform:none;max-width:none;background:transparent;color:#18304e;padding:0 2px 12px}.home-copy-below .hero-btn{background:var(--accent,#245dcb);color:#fff}
@media(max-width:600px){.home-banner{margin-bottom:7px}}
@media(min-width:900px){.home-banner .art-slide{aspect-ratio:18/5}}
@media(min-width:1100px){.home-list .home-banner .art-slide{aspect-ratio:auto;height:320px}}
.event-done .done-card .note-card{font-size:13px;line-height:1.55;margin:0}.event-done .done-card .group-box{margin:0}
/* The found certificate in the result card: the same row look as the schedule rows (green, icon in a circle on the left, left-aligned 13 px text), not a centred block. */
.event-done .done-card .group-box.opened{display:grid;grid-template-columns:24px minmax(0,1fr);column-gap:10px;align-items:start;text-align:left;padding:12px 14px;border-radius:12px;background:#e9f7ee;border-color:#bfe3cc;color:#14532d;font-size:13px;line-height:1.5}
.event-done .done-card .group-box.opened>*{grid-column:2;margin:0}
.event-done .done-card .group-box.opened .success-icon{grid-column:1;grid-row:1/span 6;width:24px;height:24px;margin:0;background:#cdeedb;color:#1f8a4c}.event-done .done-card .group-box.opened .success-icon .icon{width:14px;height:14px}
.event-done .done-card .group-box.opened .holder-label{font-size:13px;color:#3f6b4f}.event-done .done-card .group-box.opened .holder-name{font-size:15px;line-height:1.35;margin:0 0 2px;color:#14532d}
.event-done .done-card .group-box.opened .muted{color:#3f6b4f}.event-done .done-card .group-box.opened .cert-download-status{font-size:13px}.event-done .done-card .group-box.opened .cert-download-status:empty{display:none}
.event-done .done-card .group-box.opened .holder-name+p+p{margin-top:4px}
/* Presensi: the days (one presence each), and the form with one row per label and field (the label at the left from 270 px of form, above it below that) */
.presence-page main{padding-bottom:calc(96px + env(safe-area-inset-bottom))}
.presence-list{list-style:none;margin:12px 0 0;padding:0;display:grid;gap:8px}
.presence-list .pl-row{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:12px 14px;border:1px solid #e1e8f2;border-radius:12px;background:#fff;color:#18304e;text-decoration:none}
.presence-list a.pl-row:hover{text-decoration:none;border-color:var(--accent-line,#b7cdf3)}
.pl-day{display:grid;min-width:0}.pl-day b{font-size:14px}.pl-day small{color:#596b81;font-size:12px}
.pl-state{font-size:13px;font-weight:700;color:#596b81;text-align:right}.pl-state .icon{width:15px;height:15px;vertical-align:-3px}
.pl-open .pl-row{background:var(--accent-soft,#eaf1ff);border-color:var(--accent-line,#b7cdf3)}.pl-open .pl-state{color:var(--accent-strong,#1c46a8)}
.presence-list .is-chosen .pl-row{box-shadow:0 0 0 2px var(--accent,#245dcb)}
.presence-list .is-done .pl-row{background:#e9f7ee;border-color:#bfe3cc}.presence-list .is-done .pl-state{color:#14532d}
.pl-closed .pl-row{background:#f6f8fb}
.pr-form{container-type:inline-size}.pr-form h2{margin:0 0 4px;font-size:16px}.pr-sub{margin:0 0 10px;font-size:13px}
.pr-row{display:grid;grid-template-columns:minmax(0,1fr);gap:6px;padding:10px 0;border-top:1px solid #edf1f7}
@container (min-width:270px){.pr-row{grid-template-columns:92px minmax(0,1fr);gap:10px;align-items:center}.pr-row.pr-proof{align-items:start}.pr-row.pr-proof .pr-l{padding-top:10px}}
.pr-l{margin:0;font-size:13px;font-weight:700;color:#3a4d69;line-height:1.3}
.pr-c{min-width:0}.pr-c input:not([type=file]){width:100%;margin:0}.pr-hint{margin:6px 0 0;font-size:12px;color:#596b81}.pr-note{margin:10px 0 0;font-size:12px}
.pr-c input[readonly]{background:#f3f6fb;color:#3a4d69}
.presence-done h2{margin:0 0 4px}.presence-done p{margin:4px 0}
.presence-card{border-color:var(--accent-line,#b7cdf3);background:var(--accent-soft,#eaf1ff)}.presence-card h2{margin:0 0 4px;font-size:16px}.presence-card p{margin:0 0 12px}.presence-card .button{margin:0}
.presence-page .register-footer .button{white-space:nowrap}.presence-page .register-footer .button.quiet{flex:0 0 auto;width:auto;padding:0 16px;background:#fff;color:var(--accent,#245dcb);border:1px solid #c5d3e7}.presence-page .register-footer button.button{flex:1 1 auto}
.pr-proof .file-pick{min-width:0}
.cert-card-warn{background:#fff7e0;border-color:#f0d9a0;color:#5c3d00}.cert-card-warn .cert-card-icon{background:#fbe8b4;color:#9a5b06}.cert-card-warn strong{font-weight:700}
/* Poster on phones: a round two-colour gradient behind it (centre ta-N, edge tb-N, hues from the poster itself, see saas.poster_tone); the poster stands at about 3/4 of the width. Wide screens keep the plain poster. */
.detail-hero-tone{--ha:215;--hb:215;--sa:14%;--sb:14%}.ta-0{--ha:5;--sa:80%}.tb-0{--hb:5;--sb:65%}.ta-1{--ha:15;--sa:80%}.tb-1{--hb:15;--sb:65%}.ta-2{--ha:25;--sa:80%}.tb-2{--hb:25;--sb:65%}.ta-3{--ha:35;--sa:80%}.tb-3{--hb:35;--sb:65%}.ta-4{--ha:45;--sa:80%}.tb-4{--hb:45;--sb:65%}.ta-5{--ha:55;--sa:80%}.tb-5{--hb:55;--sb:65%}.ta-6{--ha:65;--sa:80%}.tb-6{--hb:65;--sb:65%}.ta-7{--ha:75;--sa:80%}.tb-7{--hb:75;--sb:65%}.ta-8{--ha:85;--sa:80%}.tb-8{--hb:85;--sb:65%}.ta-9{--ha:95;--sa:80%}.tb-9{--hb:95;--sb:65%}.ta-10{--ha:105;--sa:80%}.tb-10{--hb:105;--sb:65%}.ta-11{--ha:115;--sa:80%}.tb-11{--hb:115;--sb:65%}.ta-12{--ha:125;--sa:80%}.tb-12{--hb:125;--sb:65%}.ta-13{--ha:135;--sa:80%}.tb-13{--hb:135;--sb:65%}.ta-14{--ha:145;--sa:80%}.tb-14{--hb:145;--sb:65%}.ta-15{--ha:155;--sa:80%}.tb-15{--hb:155;--sb:65%}.ta-16{--ha:165;--sa:80%}.tb-16{--hb:165;--sb:65%}.ta-17{--ha:175;--sa:80%}.tb-17{--hb:175;--sb:65%}.ta-18{--ha:185;--sa:80%}.tb-18{--hb:185;--sb:65%}.ta-19{--ha:195;--sa:80%}.tb-19{--hb:195;--sb:65%}.ta-20{--ha:205;--sa:80%}.tb-20{--hb:205;--sb:65%}.ta-21{--ha:215;--sa:80%}.tb-21{--hb:215;--sb:65%}.ta-22{--ha:225;--sa:80%}.tb-22{--hb:225;--sb:65%}.ta-23{--ha:235;--sa:80%}.tb-23{--hb:235;--sb:65%}.ta-24{--ha:245;--sa:80%}.tb-24{--hb:245;--sb:65%}.ta-25{--ha:255;--sa:80%}.tb-25{--hb:255;--sb:65%}.ta-26{--ha:265;--sa:80%}.tb-26{--hb:265;--sb:65%}.ta-27{--ha:275;--sa:80%}.tb-27{--hb:275;--sb:65%}.ta-28{--ha:285;--sa:80%}.tb-28{--hb:285;--sb:65%}.ta-29{--ha:295;--sa:80%}.tb-29{--hb:295;--sb:65%}.ta-30{--ha:305;--sa:80%}.tb-30{--hb:305;--sb:65%}.ta-31{--ha:315;--sa:80%}.tb-31{--hb:315;--sb:65%}.ta-32{--ha:325;--sa:80%}.tb-32{--hb:325;--sb:65%}.ta-33{--ha:335;--sa:80%}.tb-33{--hb:335;--sb:65%}.ta-34{--ha:345;--sa:80%}.tb-34{--hb:345;--sb:65%}.ta-35{--ha:355;--sa:80%}.tb-35{--hb:355;--sb:65%}
@media(max-width:600px){.event-detail .detail-hero-tone{display:flex;justify-content:center;margin:-20px -20px 12px;padding:14px 0;background:radial-gradient(circle at 50% 48%,hsl(var(--ha) var(--sa) 93%) 0%,hsl(var(--hb) var(--sb) 80%) 100%)}
.event-detail .detail-hero-tone picture{display:flex;justify-content:center;max-width:73%}.event-detail .detail-hero-tone>.detail-poster{max-width:73%}
.event-detail .detail-hero-tone .detail-poster{width:auto;height:auto;max-width:100%;max-height:62vh;border-radius:6px;border:1px solid #0000001f}.event-done .detail-hero.detail-hero-tone{margin-bottom:12px}}
/* The page for data that already has a registration (1 Nov 2026). */
.recover-title{margin:14px 0 6px}.recover-steps{margin:0 0 14px;padding-left:20px;font-size:14px;line-height:1.55}.recover-steps li{margin:0 0 6px}
/* The progress 1 to 4 is a card of its own on the registration steps, like on /daftar; the title of the card below it is the page title of the step (1 Nov 2026). */
.success-card h1.step-title{margin:0 0 10px;font-size:18px;font-weight:700;line-height:1.3}      /* wide screens: like the other card titles (18); phones 16 below */
.proof-card .proof-share{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;min-height:44px;height:44px;margin:0 0 12px;padding:0 14px;border-radius:10px;background:#fff;border:1px solid var(--accent,#215bc5);color:var(--accent-strong,var(--accent,#215bc5));font:600 14px/1 "Plus Jakarta Sans",sans-serif;cursor:pointer}
.proof-card .proof-share .icon{width:20px;height:20px;flex:none}
.proof-card .proof-share:hover{background:var(--accent-soft,#edf3ff)}
.proof-card .proof-share-status{margin:-6px 0 10px;font-size:12px;line-height:1.5;color:#5a6b82}
.payment-box .payment-account+.payment-qris{margin:-4px 0 0;padding-top:12px;border-top:1px solid #dfe7f3}.payment-box .payment-qris+.payment-note{margin-top:12px}
.payment-box.is-eksklusif .payment-account+.payment-qris{border-top-color:var(--excl-line,#a9d8bb)}
.payment-box .payment-qris-name{margin:0 0 8px;font-size:14px;font-weight:700;line-height:1.35;color:#18304e;overflow-wrap:anywhere;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.category-hint{margin:0 0 10px;font-size:13px;line-height:1.5;color:#5a6b82}
.category-switch{margin:0 0 6px}.category-switch-btn{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;min-height:44px;height:44px;margin:0;padding:0 14px;border-radius:10px;font:600 14px/1 "Plus Jakarta Sans",sans-serif;cursor:pointer}
.category-switch-btn .icon{width:18px;height:18px;flex:none}.category-switch-btn.is-up .icon{transform:rotate(-90deg)}.category-switch-btn.is-down .icon{transform:rotate(90deg)}
.category-switch-btn.is-up{background:var(--excl-soft,#ecf7f0);border:1px solid var(--excl-line,#a9d8bb);color:var(--excl-icon,#15803d)}
.category-switch-btn.is-down{background:#fff;border:1px solid var(--accent,#215bc5);color:var(--accent-strong,var(--accent,#215bc5))}
.event-grid .event-all{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;min-height:180px;padding:16px 12px;text-align:center;text-decoration:none;color:var(--accent-strong,#244c85);background:var(--accent-soft,#e8effc);border:1.5px dashed var(--accent,#245dcb);border-radius:12px}
.event-all-go{display:flex;align-items:center;justify-content:center;width:36px;height:36px;border-radius:50%;background:var(--accent,#245dcb);color:#fff}
.event-all-go svg{width:18px;height:18px}
.event-all-label{font-size:15px;font-weight:700;line-height:1.3}
.event-all small{font-size:12.5px;color:#4a5a73}
.event-all:hover{border-style:solid}.event-all:focus-visible{outline:3px solid var(--accent,#245dcb);outline-offset:2px}
@media(max-width:600px){.event-grid .event-all{min-height:150px;border-radius:8px}.event-all-label{font-size:12px}.event-all small{font-size:11px}.event-all-go{width:30px;height:30px}}
/* Phone type scale shared by the event pages (1 Nov 2026): page title 20, card title 16, body 14, info label 13 and value 14, buttons 15. Sizes the site already used, now the same on /<kode>, /<kode>/daftar, the registration steps, Kegiatan Selesai, the certificate result and the attendance page. Phones only. */
@media(max-width:600px){
.event-detail .detail-main h1{font-size:20px;line-height:1.3}
.event-detail h2,.event-detail .card h2,.event-detail .detail-about h2,.event-detail .detail-speakers-card h2,.event-detail .group-box h2,.event-detail .done-card h2{font-size:16px;font-weight:700;line-height:1.3}
.event-detail .detail-about p{font-size:14px;line-height:1.55}
.event-detail .info-row dt{font-size:13px}.event-detail .info-row dd{font-size:14px}
.event-detail .proof-card .proof-heading{font-size:14px}.event-detail .payment-box .payment-note{font-size:14px}
.event-done .done-card>p.muted{font-size:13px;line-height:1.5}
.event-done .register-footer .button,.event-done .register-footer button,.event-done .done-card .register-footer button{font-size:15px}
.event-detail .success-card h1{font-size:20px;line-height:1.3}
.event-detail .success-card h1.step-title{font-size:16px;font-weight:700;line-height:1.3}
.event-detail .category-option h2{font-size:14px}
}