/* Article Lock - tampilan pembaca (desain kartu hijau). Warna dari pengaturan admin lewat CSS variables pada #twi-lock. */
.twi-lock{position:relative;margin:1.5em 0;color:var(--twi-fg,#1f2937);font-family:inherit}
/* Atribut hidden harus menang atas display:grid/flex di bawah (sebelumnya form tampil sebelum tombol diketuk). */
.twi-lock [hidden]{display:none!important}
.twi-lock__fade{position:relative;height:150px;overflow:hidden;display:flex;flex-direction:column;gap:14px;padding:6px 0;pointer-events:none;
  -webkit-mask-image:linear-gradient(#000,transparent);mask-image:linear-gradient(#000,transparent)}
.twi-lock__fade span{display:block;height:12px;border-radius:6px;background:currentColor;opacity:.12;filter:blur(2px)}

.twi-lock__panel{margin-top:-60px;position:relative;overflow:hidden;isolation:isolate;background:var(--twi-bg,#fff);border:1px var(--twi-bds,solid) var(--twi-bd,#dce5ef);
  border-radius:var(--twi-r,14px);padding:26px 22px 20px;text-align:center;box-shadow:0 18px 44px rgba(15,23,42,.14),0 2px 8px rgba(15,23,42,.05);max-width:640px;margin-left:auto;margin-right:auto}
.twi-lock__panel>*:not(.twi-lock__wave){position:relative;z-index:1}
/* Gelombang dekoratif sudut */
.twi-lock__wave{position:absolute;z-index:0;pointer-events:none;color:var(--twi-btn-bg,#079b63)}
.twi-lock__wave::before,.twi-lock__wave::after{content:"";position:absolute;background:currentColor}
.twi-lock__wave--tl{top:0;left:0;width:46%;height:92px}
.twi-lock__wave--tl::before{inset:-40px auto auto -30px;width:100%;height:100%;border-radius:0 0 100% 0;transform:rotate(-8deg);opacity:.92;background:linear-gradient(135deg,rgba(0,0,0,.28),transparent 70%),currentColor}
.twi-lock__wave--tl::after{inset:-30px auto auto 10%;width:90%;height:100%;border-radius:0 0 100% 20%;transform:rotate(6deg);opacity:.12}
.twi-lock__wave--br{right:0;bottom:0;width:42%;height:70px}
.twi-lock__wave--br::before{inset:auto -24px -34px auto;width:100%;height:100%;border-radius:100% 0 0 0;transform:rotate(-8deg);opacity:.92;background:linear-gradient(315deg,rgba(0,0,0,.25),transparent 70%),currentColor}
.twi-lock__wave--br::after{inset:auto 6% -24px auto;width:90%;height:100%;border-radius:100% 0 20% 0;transform:rotate(4deg);opacity:.14}

.twi-lock__hero{display:block;margin:0 auto 4px;max-width:70%;height:auto;color:var(--twi-btn-bg,#079b63);filter:drop-shadow(0 6px 14px rgba(0,0,0,.18))}
.twi-lock__orbit{filter:drop-shadow(0 0 5px currentColor)}
.twi-lock__title{margin:.1em 0 .25em;font-size:clamp(1.55em,6.4vw,2.15em);line-height:1.18;font-weight:800;letter-spacing:-.02em;color:inherit}
.twi-lock__hl{color:var(--twi-btn-bg,#079b63)}
.twi-lock__rule{display:flex;align-items:center;justify-content:center;gap:10px;margin:.2em auto .9em;max-width:80%}
.twi-lock__rule::before,.twi-lock__rule::after{content:"";height:1px;flex:1;background:linear-gradient(90deg,transparent,var(--twi-btn-bg,#079b63))}
.twi-lock__rule::after{transform:scaleX(-1)}
.twi-lock__rule i{width:9px;height:9px;border-radius:50%;background:var(--twi-btn-bg,#079b63)}
.twi-lock__desc{margin:0 0 1.2em;line-height:1.55;font-size:1.04em;opacity:.92}
.twi-lock__desc .twi-lock__hl{font-weight:800}

/* Tombol utama (pil hijau) */
.twi-lock__open,.twi-lock__btn{appearance:none;border:0;cursor:pointer;color:var(--twi-btn-fg,#fff);font:inherit;font-weight:700;letter-spacing:.1px;max-width:100%;
  background:linear-gradient(180deg,rgba(255,255,255,.2),rgba(0,0,0,.14)),var(--twi-btn-bg,#079b63);
  box-shadow:0 10px 22px -6px var(--twi-btn-bg,#079b63),inset 0 1px 0 rgba(255,255,255,.35);transition:filter .15s,transform .15s}
.twi-lock__open{display:flex;align-items:center;gap:14px;width:100%;box-sizing:border-box;padding:12px 20px 12px 18px;border-radius:999px;min-height:62px;font-size:1.12em}
.twi-lock__btn{padding:14px 26px;border-radius:999px;min-height:48px}
.twi-lock__open:hover,.twi-lock__btn:hover{filter:brightness(1.07)}
.twi-lock__open:active,.twi-lock__btn:active{transform:translateY(1px)}
.twi-lock__wa{flex:none}
.twi-lock__sep{flex:none;width:1px;align-self:stretch;margin:6px 0;background:rgba(255,255,255,.4)}
.twi-lock__btxt{flex:1;text-align:center}
.twi-lock__chev{flex:none}
.twi-lock__open:focus-visible,.twi-lock__btn:focus-visible,.twi-lock input:focus-visible{outline:3px solid #2563eb;outline-offset:2px}
.twi-lock__btn[disabled],.twi-lock__resend[disabled]{opacity:.6;cursor:not-allowed}

/* Tiga fitur */
.twi-lock__feats{list-style:none;margin:16px 0 0;padding:12px 6px;display:grid;grid-template-columns:repeat(3,1fr);position:relative;border-radius:18px;isolation:isolate}
.twi-lock__feats::before{content:"";position:absolute;inset:0;border-radius:inherit;background:var(--twi-btn-bg,#079b63);opacity:.09;z-index:-1}
.twi-lock__feats li{display:flex;flex-direction:column;align-items:center;justify-content:flex-start;gap:6px;padding:2px 8px;font-size:.84em;line-height:1.3;font-weight:600;position:relative}
.twi-lock__feats li+li::before{content:"";position:absolute;left:0;top:8%;bottom:8%;width:1px;background:var(--twi-btn-bg,#079b63);opacity:.35}
.twi-lock__fi{color:var(--twi-btn-bg,#079b63)}
.twi-lock__foot{margin:.9em 0 0;font-size:.85em;opacity:.7}

/* Form & kode */
.twi-lock form{display:grid;gap:12px;text-align:left;margin-top:6px}
.twi-lock label{display:grid;gap:6px;font-weight:600;font-size:.95em}
.twi-lock input[type=text],.twi-lock input[type=email],.twi-lock input[type=tel]{width:100%;box-sizing:border-box;font:inherit;font-size:16px;padding:12px 14px;border:1px solid var(--twi-bd,#cbd5e1);border-radius:12px;background:#fff;color:#111}
.twi-lock__check{grid-template-columns:auto 1fr;align-items:start;font-weight:400!important;gap:10px!important}
.twi-lock__check input{margin-top:.25em;width:18px;height:18px}
.twi-lock__privacy{margin:0;font-size:.85em;opacity:.8;line-height:1.5}
.twi-lock__hp{position:absolute!important;left:-9999px!important;width:1px;height:1px;overflow:hidden}
.twi-lock__btn{width:100%}
.twi-lock__resend{appearance:none;background:none;border:0;color:var(--twi-btn-bg,#079b63);text-decoration:underline;cursor:pointer;font:inherit;padding:8px;justify-self:center}
.twi-lock__msg{min-height:1.2em;margin:12px 0 0;font-size:.92em}
.twi-lock__msg.is-error{color:#b91c1c}.twi-lock__msg.is-ok{color:#047857}
.twi-lock__checking{margin:0;padding:14px;opacity:.8}
.twi-lock__devices{text-align:left;margin-top:8px}
.twi-lock__device{display:flex;gap:10px;align-items:center;justify-content:space-between;border:1px solid var(--twi-bd,#dce5ef);border-radius:10px;padding:10px 12px;margin:8px 0}
.twi-lock__device small{display:block;opacity:.7}
.twi-lock__device button{appearance:none;border:1px solid var(--twi-btn-bg,#079b63);color:var(--twi-btn-bg,#079b63);background:#fff;border-radius:8px;padding:8px 10px;cursor:pointer;font:inherit;font-size:.85em}
.twi-lock.is-checking .twi-lock__cta{display:none}

/* Kredit */
.twi-lock__credit{margin:16px 0 0;display:flex;align-items:center;gap:12px;font-size:.82em;opacity:.8;letter-spacing:.01em}
.twi-lock__credit::before,.twi-lock__credit::after{content:"";height:1px;flex:1;background:currentColor;opacity:.25}
.twi-lock__credit strong{color:var(--twi-btn-bg,#079b63);font-weight:700}

@media (max-width:480px){
  .twi-lock__panel{padding:22px 16px 18px}
  .twi-lock__open{font-size:1.02em;gap:10px;padding:10px 14px;min-height:56px}
  .twi-lock__wa{width:32px;height:32px}
  .twi-lock__feats li{font-size:.78em;padding:2px 4px}
  .twi-lock__credit{font-size:.76em}
}
@media (prefers-reduced-motion:no-preference){.twi-lock__panel{transition:box-shadow .2s}}

/* Beri ruang di bawah gelombang sudut saat form/kode/perangkat tampil */
.twi-lock__form,.twi-lock__codeform,.twi-lock__devices{margin-top:44px!important}
.twi-lock__wave--br{width:36%;height:56px}
.twi-lock__credit{padding-right:6px}

/* Tombol harus selalu menerima ketukan di layar sentuh */
.twi-lock__open,.twi-lock__btn{touch-action:manipulation;-webkit-tap-highlight-color:transparent;position:relative;z-index:2}
.twi-lock__open *{pointer-events:none}