/* form/style.css — ponytail: reuse ZeroSec vars, responsive tidy */
#workshopForm input[type="text"],#workshopForm input[type="email"],#workshopForm input[type="tel"],#workshopForm textarea,select#sesi,select#sumber{
  width:100%;padding:10px 14px;border-radius:10px;border:1px solid var(--line);
  background:rgba(255,255,255,.06);backdrop-filter:blur(8px);color:var(--white);
  font-size:14px;line-height:20px;min-height:44px;outline:0;transition:border-color .15s;
}
#workshopForm input::placeholder,#workshopForm textarea::placeholder{color:rgba(244,247,245,.6)}
#workshopForm input:focus,#workshopForm textarea:focus,select#sesi:focus,select#sumber:focus{border-color:var(--white);box-shadow:none}
select#sesi,select#sumber{cursor:pointer;-webkit-appearance:none;appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath fill='%23fff' d='M1 1l5 5 5-5'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 14px center;padding-right:36px}
select#sesi option,select#sumber option{background:#1a1a1a;color:#fff}
#workshopForm input:invalid{border-color:rgba(255,59,48,.5)}
#workshopForm fieldset{margin-bottom:14px}
#workshopForm .label-text{margin-bottom:6px;display:block}
#stickyCta{transition:transform .2s,opacity .2s}
@media(min-width:992px){#stickyCta{display:none !important}}

/* --- responsive tidy --- */
html{overflow-x:hidden;scroll-padding-top:84px}
#jadwal,#daftar,#tentang,#faq{scroll-margin-top:84px}
img{max-width:100%;height:auto}
#wrapper{overflow-x:hidden}

/* hero title already clamp inline, ensure no overflow */
.s-title{word-break:break-word;overflow-wrap:anywhere}
.s-sub_title{overflow-wrap:anywhere}

/* grid spacing fix: prevent cramped on mobile */
@media(max-width:575px){
  .grid-box_icon.tf-grid-layout{grid-template-columns:1fr !important;gap:12px !important}
  .tf-grid-layout.sm-col-2{grid-template-columns:1fr !important;gap:12px !important}
  .section-hero .sect-main .container,.section-feature .container,.section-how-to .container{padding-left:12px;padding-right:12px}
  .px-16{padding-left:12px !important;padding-right:12px !important}
  #workshopForm{padding-left:0 !important;padding-right:0 !important}
  .info-us-list{margin-bottom:16px}
  .wg-plan .content{padding:14px !important}
  .flat-spacing-3{padding-top:32px !important;padding-bottom:32px !important}
  .s-title.only-title{font-size:24px !important}
  .w-sm-auto{width:100% !important}
}
/* tablet: 2 col for icon grid */
@media(min-width:576px) and (max-width:767px){
  .grid-box_icon.tf-grid-layout{grid-template-columns:1fr 1fr !important}
}
/* header: prevent overflow on small */
@media(max-width:420px){
  #header .tf-header .container{padding-left:10px;padding-right:10px}
  #header .logo-site img{width:84px !important}
  #header .tf-btn{font-size:12px !important;padding:6px 10px !important}
}
/* form: ensure full width on mobile, prevent horizontal scroll */
.form-get_in{max-width:100%;overflow:hidden}
.form-content-2{max-width:100%}
#workshopForm .tf-grid-layout{row-gap:0}
#workshopForm .tf-grid-layout fieldset{margin-bottom:14px}
/* stickyCTA safe area + don't cover submit */
@media(max-width:991px){
  #daftar{padding-bottom:72px}
  #stickyCta a{font-size:13px;padding:12px}
}
/* faq spacing tidy */
@media(max-width:767px){
  .faq-list{margin-top:16px}
  .faq-item{padding:0}
  .section-faq .sect-main .container{padding-left:12px;padding-right:12px}
}
/* textarea prevent resize overflow */
#workshopForm textarea{resize:vertical;max-width:100%}
/* checkbox alignment tidy */
#workshopForm input[type="checkbox"]{flex-shrink:0}

/* --- custom tidy dropdown (sumber) --- */
.custom-select-wrap{position:relative}
.custom-select-trigger{user-select:none}
.custom-select-trigger:focus{outline:none;border-bottom-color:rgba(255,255,255,.35) !important}
.custom-select-trigger[aria-expanded="true"]{border-bottom-color:#fff !important}
.custom-select-dropdown{scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.14) transparent}
.custom-select-option{transition:background .12s, color .12s}
.custom-select-option:hover,.custom-select-option:focus{background:rgba(255,255,255,.08) !important;color:#fff !important;outline:none}
.custom-select-option.is-selected{background:#fff !important;color:#000 !important}
.custom-select-option.is-selected span{opacity:1 !important}
.custom-select-wrap.is-open .custom-select-trigger{border-bottom-color:#fff !important}
.custom-select-wrap.is-open .enter-hint{opacity:0}
@media(max-width:575px){
  .custom-select-dropdown{max-height:180px !important}
}

/* --- minimal full-screen 1-field (ala gambar) --- */
.minimal-wrap{position:relative;display:flex;align-items:center;border-bottom:1px solid rgba(255,255,255,.18);padding-right:90px}
.minimal-input{flex:1;background:transparent !important;border:none !important;box-shadow:none !important;color:#fff !important;font-size:clamp(22px,4.5vw,34px) !important;line-height:1.2 !important;padding:14px 0 !important;min-height:56px !important;border-radius:0 !important;caret-color:#0a84ff}
.minimal-input::placeholder{color:rgba(255,255,255,.28) !important}
.minimal-input:focus{outline:none !important;box-shadow:none !important}
.enter-hint{position:absolute;right:0;top:50%;transform:translateY(-50%);font:12px ui-monospace,monospace;color:rgba(255,255,255,.38);letter-spacing:.02em;white-space:nowrap;pointer-events:none}
.minimal-q{color:rgba(255,255,255,.72)}
.minimal-choice{transition:border-color .15s, background .15s}
.minimal-choice:hover{border-color:rgba(255,255,255,.28) !important;background:rgba(255,255,255,.04) !important}
.minimal-choice:has(input:checked){border-color:#fff !important;background:rgba(255,255,255,.06) !important}
.sesi-card{transition:border-color .15s, background .15s, box-shadow .15s, transform .12s;border-color:rgba(255,255,255,.14) !important}
.sesi-card:hover{border-color:var(--primary) !important;background:rgba(255,255,255,.035) !important;transform:translateY(-1px);box-shadow:0 6px 20px rgba(0,0,0,.25) !important}
.sesi-card:has(input:checked){border-color:var(--primary) !important;background:rgba(175,0,0,.08) !important;box-shadow:0 8px 24px rgba(0,0,0,.3), 0 0 0 1px rgba(175,0,0,.35) inset !important}
.sesi-card:has(input:checked) .sesi-overlay{opacity:1 !important;pointer-events:auto !important}
.sesi-grid-chat{grid-template-columns:1fr}
@media(min-width:768px){ .sesi-grid-chat{grid-template-columns:1fr 1fr} }
@media(max-width:767px){ .sesi-grid-chat{grid-template-columns:1fr} }
/* desktop viewport fix: sesi cards jangan ketutup header */
#jadwal .wg-plan{scroll-margin-top:90px}
@media(min-width:992px){
  #jadwal .row.g-3{row-gap:16px}
  #jadwal .wg-plan .content{padding:16px !important}
  #jadwal .timeline-8 li .t-card{padding:6px 8px}
}
@media(max-height:800px) and (min-width:992px){
  #jadwal .sect-main{padding-top:12px !important}
  #jadwal .wg-plan{font-size:.95em}
  #jadwal .timeline-8 li{padding:4px 0}
}
#chatModal{background:#000 !important}
#chatModal #chatForm{scroll-padding-top:12px;overscroll-behavior:contain}
@media(min-width:768px){
  #chatModal #chatForm{padding-top:8px}
}
#chatModal ::-webkit-scrollbar{width:6px}
#chatModal ::-webkit-scrollbar-thumb{background:rgba(255,255,255,.14);border-radius:999px}
@media(max-width:575px){
  .minimal-input{font-size:clamp(18px,6vw,26px) !important}
  .enter-hint{font-size:11px}
}

/* --- timeline rapih (sesi A/B) --- */
.timeline-8{list-style:none;margin:0;padding:0;position:relative}
.timeline-8::before{content:"";position:absolute;left:34px;top:8px;bottom:8px;width:1px;background:var(--line);opacity:.9}
.timeline-8 li{position:relative;display:flex;gap:10px;padding:6px 0}
.timeline-8 li .t-time{width:32px;flex-shrink:0;font:600 11px/1.2 ui-monospace,monospace;color:var(--text-3);text-align:right;padding-top:2px}
.timeline-8 li .t-dot{width:9px;height:9px;border-radius:999px;background:var(--primary);border:2px solid var(--white);flex-shrink:0;margin-top:4px;position:relative;z-index:1;box-shadow:0 0 0 3px rgba(175,0,0,.18)}
.timeline-8 li:nth-child(even) .t-dot{background:#3a86ff;box-shadow:0 0 0 3px rgba(58,134,255,.18)}
.timeline-8 li .t-card{flex:1;min-width:0;background:rgba(255,255,255,.035);border:1px solid var(--line);border-radius:10px;padding:8px 10px}
.timeline-8 li .t-card p{margin:0}
@media(max-width:575px){
  .timeline-8::before{left:32px}
  .timeline-8 li .t-time{width:30px;font-size:10px}
  .timeline-8 li .t-card{padding:7px 9px}
  .wg-plan{margin-bottom:2px}
}