/* Cek Kebutuhan chatbot (shared by coachingyuk.com and yukacademy.com; keep both copies identical). */
.kk { --kk-teal:#0E6F6C; --kk-teal-deep:#0A4F4D; --kk-teal-tint:#E3EFEE; --kk-gold:#C79B02; --kk-gold-tint:#F5EED4; --kk-ink:#1B2422; --kk-soft:#4B5654; --kk-paper:#FBF8F1; --kk-line:rgba(27,36,34,.12);
  background:var(--kk-paper); border:1px solid var(--kk-line); border-radius:20px; overflow:hidden; display:flex; flex-direction:column; height:min(680px, calc(100vh - 140px)); min-height:460px; color:var(--kk-ink); text-align:left; }
.kk-top { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:12px 18px; border-bottom:1px solid var(--kk-line); background:#fff; }
.kk-top b { font-size:14px; } .kk-top small { display:flex; align-items:center; gap:6px; font-size:11px; color:var(--kk-teal-deep); letter-spacing:.06em; text-transform:uppercase; }
.kk-top small::before { content:""; width:7px; height:7px; border-radius:50%; background:#3FB37F; }
.kk-restart { font:inherit; font-size:12.5px; font-weight:600; color:var(--kk-soft); background:none; border:1.5px solid var(--kk-line); border-radius:999px; padding:6px 14px; cursor:pointer; }
.kk-restart:hover { border-color:var(--kk-teal); color:var(--kk-teal-deep); }
.kk-scroll { flex:1; overflow-y:auto; }
.kk-inner { max-width:640px; margin:0 auto; padding:20px 16px 24px; display:flex; flex-direction:column; gap:12px; }
.kk-row { display:flex; gap:10px; align-items:flex-end; }
.kk-user { justify-content:flex-end; }
.kk-avatar { width:42px; height:42px; border-radius:50%; overflow:hidden; flex-shrink:0; background:var(--kk-teal-tint); border:1.5px solid var(--kk-line); }
.kk-avatar img { width:100%; height:100%; object-fit:cover; }
.kk-bubble { max-width:80%; padding:12px 16px; border-radius:18px; font-size:15px; line-height:1.5; }
.kk-bubble p { margin:0 0 8px; } .kk-bubble p:last-child { margin-bottom:0; }
.kk-bot .kk-bubble { background:#fff; border:1px solid var(--kk-line); border-bottom-left-radius:4px; }
.kk-user .kk-bubble { background:var(--kk-gold-tint); font-weight:600; border-bottom-right-radius:4px; }
.kk-typing .kk-bubble { display:flex; gap:5px; padding:15px 18px; }
.kk-dot { width:6px; height:6px; border-radius:50%; background:var(--kk-soft); opacity:.5; animation:kk-b 1.1s infinite; }
.kk-dot:nth-child(2) { animation-delay:.15s; } .kk-dot:nth-child(3) { animation-delay:.3s; }
@keyframes kk-b { 0%,60%,100% { transform:translateY(0); opacity:.5; } 30% { transform:translateY(-4px); opacity:1; } }
.kk-result .kk-bubble { background:var(--kk-ink); color:#fff; border:2px solid var(--kk-gold); max-width:90%; }
.kk-tag { font-size:10.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--kk-gold); margin-bottom:6px; font-weight:700; }
.kk-result h3 { font-size:18px; font-weight:700; margin:0 0 8px; color:#fff; }
.kk-result p { color:rgba(255,255,255,.8); font-size:14px; }
.kk-disclaimer { font-size:12.5px !important; color:#F5EED4 !important; background:rgba(255,255,255,.08); padding:8px 10px; border-radius:8px; }
.kk-ctas { display:flex; flex-direction:column; gap:9px; margin-top:12px; }
.kk-cta { display:block; text-align:center; font-weight:800; font-size:14px; padding:11px 16px; border-radius:999px; text-decoration:none !important; transition:.15s ease; }
.kk-gold { background:var(--kk-gold); color:var(--kk-ink) !important; } .kk-gold:hover { background:#D9AE1F; }
.kk-teal { background:var(--kk-teal); color:#fff !important; } .kk-teal:hover { background:var(--kk-teal-deep); }
.kk-outline { border:1.5px solid rgba(255,255,255,.4); color:rgba(255,255,255,.9) !important; } .kk-outline:hover { background:rgba(255,255,255,.1); }
.kk-ai { margin-top:14px; padding-top:12px; border-top:1px solid rgba(255,255,255,.15); display:flex; flex-direction:column; gap:6px; }
.kk-ai-h { font-size:10.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--kk-gold); font-weight:700; }
.kk-ai-note { font-size:12px; color:rgba(255,255,255,.6); text-align:center; margin:-1px 0 6px; }
.kk-trail { margin-top:12px; font-size:12.5px; color:rgba(255,255,255,.75); }
.kk-trail summary { cursor:pointer; text-decoration:underline; text-underline-offset:3px; color:rgba(255,255,255,.8) !important; }
.kk-trail-row { display:flex; justify-content:space-between; gap:12px; padding:6px 0; border-top:1px solid rgba(255,255,255,.12); }
.kk-a { font-weight:700; color:#fff; text-align:right; }
.kk-bar { border-top:1px solid var(--kk-line); background:#fff; padding:12px 16px 16px; }
.kk-hint { font-size:11px; letter-spacing:.06em; text-transform:uppercase; color:var(--kk-soft); margin:0 0 8px; max-width:640px; margin-left:auto; margin-right:auto; }
.kk-opts { display:flex; flex-wrap:wrap; gap:8px; max-width:640px; margin:0 auto; }
.kk-opts button { font:inherit; font-weight:700; font-size:14px; color:var(--kk-teal-deep); background:#fff; border:1.5px solid var(--kk-teal); border-radius:999px; padding:10px 16px; cursor:pointer; }
.kk-opts button:hover { background:var(--kk-teal); color:#fff; }
.kk-note { font-size:12.5px; color:var(--kk-soft); text-align:center; margin-top:10px; }
@media (max-width:480px) { .kk { border-radius:14px; height:calc(100vh - 110px); } .kk-bubble { max-width:88%; font-size:14.5px; } .kk-avatar { width:34px; height:34px; } }