/* ===== Kol keluarga: butang header, jalur notifikasi, tetingkap kol masuk, skrin kol ===== */
.btn-kol{display:grid;place-items:center;text-decoration:none;margin-right:6px}
.head-btn{display:flex;align-items:center}

/* jalur "benarkan notifikasi" (kol-asas.js) */
.jalur-notif{position:relative;z-index:6;display:flex;align-items:center;gap:10px;
  margin:12px 14px 0;padding:11px 14px;border-radius:18px;border:2px dashed var(--utama);
  background:var(--kad);color:var(--tinta);font-weight:700;font-size:.86rem;cursor:pointer;
  font-family:inherit;text-align:left;width:calc(100% - 28px);max-width:692px}
@media (min-width:748px){.jalur-notif{margin:12px auto 0}}
.jalur-notif b{color:var(--utama)}
.jalur-notif span:first-child{font-size:1.5rem}

/* tetingkap penuh: kol masuk (semua halaman) */
.kol-masuk{position:fixed;inset:0;z-index:100;display:flex;flex-direction:column;align-items:center;
  justify-content:center;gap:14px;padding:24px;color:#fff;text-align:center;
  background:linear-gradient(160deg,#ff8fc7 0%,#c084fc 55%,#6d5dfc 100%)}
.kol-masuk[hidden]{display:none}
.kol-avatar{width:132px;height:132px;border-radius:50%;display:grid;place-items:center;
  font-size:4rem;background:rgba(255,255,255,.25);border:4px solid rgba(255,255,255,.7);
  animation:kol-denyut 1.4s ease-in-out infinite}
@keyframes kol-denyut{0%,100%{box-shadow:0 0 0 0 rgba(255,255,255,.55)}
  50%{box-shadow:0 0 0 22px rgba(255,255,255,0)}}
.kol-nama{font-family:"Baloo 2","Nunito",sans-serif;font-size:2rem;font-weight:800;line-height:1.1}
.kol-sub{font-size:1rem;font-weight:700;opacity:.95}
.kol-butang{display:flex;gap:42px;margin-top:26px}
.kol-bulat{width:78px;height:78px;border-radius:50%;border:none;color:#fff;font-size:2rem;cursor:pointer;
  display:grid;place-items:center;box-shadow:0 8px 20px rgba(0,0,0,.25);font-family:inherit}
.kol-bulat small{display:block;font-size:.72rem;font-weight:800;margin-top:-6px}
.kol-hijau{background:#22c55e;animation:kol-goyang 1s ease-in-out infinite}
.kol-merah{background:#ef4444}
.kol-label{font-size:.82rem;font-weight:800;margin-top:6px}
@keyframes kol-goyang{0%,100%{transform:rotate(0)}20%{transform:rotate(-12deg)}40%{transform:rotate(12deg)}60%{transform:rotate(-8deg)}}

/* ===== laman /kol ===== */
.kenalan{display:flex;align-items:center;gap:12px;padding:12px 0;border-bottom:2px dashed var(--garis)}
.kenalan:last-child{border-bottom:none}
.kenalan-ikon{width:52px;height:52px;flex:0 0 52px;border-radius:50%;display:grid;place-items:center;
  font-size:1.7rem;background:linear-gradient(160deg,#fff0f8,#f3ecff)}
@media (prefers-color-scheme:dark){.kenalan-ikon{background:#2f2340}}
.kenalan-nama{flex:1;min-width:0;font-family:"Baloo 2","Nunito",sans-serif;font-weight:800;font-size:1.15rem;
  overflow-wrap:anywhere}
.kenalan-btn{width:52px;height:52px;border-radius:50%;border:none;cursor:pointer;font-size:1.4rem;color:#fff;
  box-shadow:0 4px 12px rgba(0,0,0,.15)}
.kenalan-btn.video{background:linear-gradient(135deg,#ff8fc7,#c084fc)}
.kenalan-btn.suara{background:#22c55e}
.kosong-teks{color:var(--lembut);font-size:.88rem;padding:8px 0;line-height:1.5}
.sejarah li{display:flex;gap:10px;align-items:center;padding:8px 0;font-size:.88rem;
  border-bottom:1px solid var(--garis);list-style:none}
.sejarah{padding:0;margin:0}
.sejarah .bila{margin-left:auto;color:var(--lembut);font-size:.76rem;white-space:nowrap}
.sejarah .terlepas{color:#ef4444;font-weight:800}
.notif-status{display:flex;align-items:center;gap:10px;flex-wrap:wrap;font-size:.86rem;font-weight:700}
.btn-kecil{background:var(--kad);border:2px solid var(--garis);border-radius:999px;padding:8px 14px;
  font-weight:800;color:var(--tinta);cursor:pointer;font-family:inherit;font-size:.82rem}
.btn-kecil.utama{background:linear-gradient(135deg,#ff8fc7,#c084fc);color:#fff;border-color:transparent}

/* ===== skrin semasa kol ===== */
html:has(body.dalam-kol),body.dalam-kol{overflow:hidden}
.skrin-kol{position:fixed;inset:0;z-index:90;background:#120c1a;color:#fff;display:flex;flex-direction:column}
.skrin-kol[hidden]{display:none}
.skrin-kol video{background:#000}
#video-jauh{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
#video-saya{position:absolute;right:14px;top:calc(14px + env(safe-area-inset-top));width:28vw;max-width:150px;
  aspect-ratio:3/4;object-fit:cover;border-radius:16px;border:3px solid rgba(255,255,255,.8);z-index:2;
  transform:scaleX(-1);box-shadow:0 6px 18px rgba(0,0,0,.4)}
#video-saya.belakang{transform:none}
.skrin-kol.suara #video-jauh,.skrin-kol.suara #video-saya{display:none}
.kol-tengah{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:12px;background:linear-gradient(160deg,#ff8fc7 0%,#c084fc 55%,#6d5dfc 100%);z-index:1}
.kol-tengah[hidden]{display:none}
.kol-atas{position:absolute;left:0;right:0;top:0;z-index:3;padding:calc(16px + env(safe-area-inset-top)) 16px 30px;
  text-align:left;background:linear-gradient(rgba(0,0,0,.5),transparent);pointer-events:none}
.kol-atas .kol-nama{font-size:1.4rem}
.kol-bawah{position:absolute;left:0;right:0;bottom:0;z-index:3;display:flex;justify-content:center;gap:16px;
  padding:30px 12px calc(28px + env(safe-area-inset-bottom));background:linear-gradient(transparent,rgba(0,0,0,.55))}
.kol-alat{width:60px;height:60px;border-radius:50%;border:none;cursor:pointer;font-size:1.5rem;color:#fff;
  background:rgba(255,255,255,.22);backdrop-filter:blur(6px)}
.kol-alat.mati{background:#fff;color:#111}
.kol-alat.letak{background:#ef4444;width:68px;height:68px;font-size:1.8rem}
.kol-alat[hidden]{display:none}
.kol-ralat{position:absolute;left:16px;right:16px;bottom:130px;z-index:4;background:rgba(239,68,68,.92);
  padding:10px 14px;border-radius:14px;font-weight:700;text-align:center}
.kol-ralat[hidden]{display:none}
.kol-bunyi{position:absolute;left:50%;top:45%;transform:translate(-50%,-50%);z-index:5}