/* ====================================================
   INDEX — Beranda styles
==================================================== */

/* ====================================================== HERO */
.hero {
  position:relative; min-height:100vh;
  display:flex; align-items:center; justify-content:center;
  overflow:hidden; background:transparent;
}
.orb { position:absolute; border-radius:50%; filter:blur(90px); pointer-events:none; }
.orb-1 { width:650px; height:650px; background:radial-gradient(circle,rgba(34,104,200,.3) 0%,transparent 70%); top:-200px; left:-150px; animation:orbDrift 12s ease-in-out infinite alternate; }
.orb-2 { width:500px; height:500px; background:radial-gradient(circle,rgba(58,127,216,.22) 0%,transparent 70%); bottom:-100px; right:-100px; animation:orbDrift 10s ease-in-out infinite alternate-reverse; }
.orb-3 { width:320px; height:320px; background:radial-gradient(circle,rgba(110,176,240,.18) 0%,transparent 70%); top:40%; left:55%; animation:orbDrift 14s ease-in-out infinite alternate; }
@keyframes orbDrift { from{transform:translate(0,0) scale(1);} to{transform:translate(40px,30px) scale(1.08);} }

.hero-content { position:relative; z-index:2; text-align:center; color:#fff; max-width:820px; padding:0 24px; }
.hero-badge { display:inline-flex; align-items:center; gap:8px; background:rgba(255,255,255,.08); backdrop-filter:blur(12px); border:1px solid rgba(255,255,255,.16); color:rgba(255,255,255,.82); font-size:.73rem; font-weight:600; padding:7px 20px; border-radius:50px; letter-spacing:1.4px; text-transform:uppercase; margin-bottom:28px; }
.hero-badge-dot { width:6px; height:6px; border-radius:50%; background:var(--g-shine); box-shadow:0 0 8px rgba(110,176,240,.8); animation:pulseDot 2s ease-in-out infinite; }
@keyframes pulseDot { 0%,100%{opacity:1;transform:scale(1);} 50%{opacity:.5;transform:scale(1.5);} }
.hero-title { font-size:clamp(2.4rem,5.5vw,4rem); font-weight:900; line-height:1.1; margin-bottom:22px; letter-spacing:-.02em; }
.hero-title .accent { background:linear-gradient(135deg,#6EB0F0,#A8D4F8); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; display:block; }
.hero-desc  { font-size:clamp(.95rem,2vw,1.1rem); color:rgba(255,255,255,.65); max-width:560px; margin:0 auto 40px; line-height:1.8; }
.hero-btns  { display:flex; gap:14px; justify-content:center; flex-wrap:wrap; }

/* ====================================================== GALERI */
.gallery-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:12px; margin-bottom:44px; }
.gal-item     { position:relative; border-radius:var(--radius); overflow:hidden; aspect-ratio:1; cursor:pointer; border:1px solid rgba(255,255,255,.07); }
.gal-bg       { width:100%; height:100%; overflow:hidden; transition:transform .4s ease; }
.gal-item:hover .gal-bg { transform:scale(1.1); }
.gal-over     { position:absolute; inset:0; background:linear-gradient(135deg,rgba(4,16,31,.75),rgba(22,82,168,.5)); display:flex; align-items:center; justify-content:center; color:#fff; font-size:1.4rem; opacity:0; transition:var(--tr); }
.gal-item:hover .gal-over { opacity:1; }

/* ====================================================== PETA */
.map-wrap { border-radius:var(--radius-xl); overflow:hidden; border:1px solid rgba(255,255,255,.1); box-shadow:0 8px 40px rgba(4,16,31,.5); position:relative; }
.map-wrap iframe { width:100%; height:420px; border:none; display:block; }
.map-btn { position:absolute; top:16px; right:16px; }

/* ====================================================== KAWE NIA */
.kawe-orb-a { position:absolute; width:520px; height:520px; border-radius:50%; background:radial-gradient(circle,rgba(34,104,200,.15) 0%,transparent 70%); top:-160px; right:-100px; pointer-events:none; }
.kawe-orb-b { position:absolute; width:380px; height:380px; border-radius:50%; background:radial-gradient(circle,rgba(58,127,216,.1) 0%,transparent 70%); bottom:-120px; left:2%; pointer-events:none; }
.kawe-layout { display:grid; grid-template-columns:360px 1fr; gap:44px; align-items:start; position:relative; z-index:1; }

.kawe-info { color:#fff; }
.kawe-badge { display:inline-flex; align-items:center; gap:8px; background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.12); border-radius:50px; padding:6px 16px; font-size:.72rem; font-weight:600; color:rgba(255,255,255,.65); letter-spacing:1.2px; text-transform:uppercase; margin-bottom:22px; }
.kawe-badge-dot { width:7px; height:7px; border-radius:50%; background:#4ade80; box-shadow:0 0 8px rgba(74,222,128,.7); animation:kaPulse 2s ease-in-out infinite; }
@keyframes kaPulse { 0%,100%{opacity:1;transform:scale(1);} 50%{opacity:.5;transform:scale(1.4);} }

.kawe-head-row { display:flex; align-items:center; gap:16px; margin-bottom:18px; }
.kawe-avatar-big { width:64px; height:64px; background:linear-gradient(135deg,#1A52A8,#3A7FD8); border-radius:18px; display:flex; align-items:center; justify-content:center; font-family:'Poppins',sans-serif; font-weight:900; font-size:1rem; color:#fff; flex-shrink:0; border:2px solid rgba(255,255,255,.18); box-shadow:0 8px 28px rgba(26,82,168,.45); position:relative; }
.kawe-av-online { position:absolute; bottom:-2px; right:-2px; width:14px; height:14px; border-radius:50%; background:#4ade80; border:2.5px solid #0A2348; animation:kaPulse 2s ease-in-out infinite; }
.kawe-name { font-family:'Poppins',sans-serif; font-weight:900; font-size:1.7rem; line-height:1; background:linear-gradient(135deg,#fff 0%,#6EB0F0 100%); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; margin-bottom:4px; }
.kawe-sub { font-size:.78rem; color:rgba(255,255,255,.45); letter-spacing:.5px; }
.kawe-desc { font-size:.87rem; color:rgba(255,255,255,.55); line-height:1.82; margin-bottom:28px; border-left:2px solid rgba(58,127,216,.4); padding-left:14px; }
.kawe-topics-lbl { font-size:.7rem; font-weight:700; color:rgba(255,255,255,.3); text-transform:uppercase; letter-spacing:1.2px; margin-bottom:12px; }
.kawe-chips { display:flex; flex-wrap:wrap; gap:8px; margin-bottom:28px; }
.kawe-chip { display:inline-flex; align-items:center; gap:6px; background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.1); border-radius:50px; padding:7px 14px; font-size:.77rem; font-weight:500; color:rgba(255,255,255,.68); cursor:pointer; transition:.2s; }
.kawe-chip:hover { background:var(--g-soft); border-color:transparent; color:#fff; transform:translateY(-1px); box-shadow:0 4px 14px rgba(10,35,72,.3); }
.kawe-stat-row { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.kawe-stat-box { background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.08); border-radius:12px; padding:14px 16px; }
.kawe-stat-box .snum { font-family:'Poppins',sans-serif; font-size:1.25rem; font-weight:800; background:linear-gradient(135deg,#6EB0F0,#A8D4F8); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; }
.kawe-stat-box .slbl { font-size:.68rem; color:rgba(255,255,255,.38); margin-top:2px; }

/* Chat window */
.kawe-chat { border-radius:22px; overflow:hidden; box-shadow:0 28px 80px rgba(4,16,31,.7), 0 0 0 1px rgba(255,255,255,.08); display:flex; flex-direction:column; height:560px; }
.chat-hd { position:relative; padding:18px 20px; display:flex; align-items:center; justify-content:space-between; overflow:hidden; flex-shrink:0; }
.chat-hd-bg { position:absolute; inset:0; background:linear-gradient(135deg,#04101F 0%,#0A2348 55%,#103B80 100%); }
.chat-hd-left { display:flex; align-items:center; gap:12px; position:relative; z-index:1; }
.chat-av { width:40px; height:40px; border-radius:50%; background:linear-gradient(135deg,#1A52A8,#3A7FD8); display:flex; align-items:center; justify-content:center; font-family:'Poppins',sans-serif; font-weight:800; font-size:.72rem; color:#fff; border:2px solid rgba(255,255,255,.2); position:relative; flex-shrink:0; }
.chat-av-dot { position:absolute; bottom:0; right:0; width:10px; height:10px; border-radius:50%; background:#4ade80; border:2px solid #0A2348; animation:kaPulse 2s ease-in-out infinite; }
.chat-title  { font-family:'Poppins',sans-serif; font-weight:800; font-size:.9rem; background:linear-gradient(135deg,#fff,#A8D4F8); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; }
.chat-status { font-size:.68rem; color:rgba(255,255,255,.5); display:flex; align-items:center; gap:5px; margin-top:2px; }
.chat-status i { font-size:.45rem; color:#4ade80; }
.chat-hd-right { position:relative; z-index:1; }
.chat-clear-btn { background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.12); border-radius:8px; padding:7px 12px; color:rgba(255,255,255,.55); cursor:pointer; font-size:.72rem; font-family:'Inter',sans-serif; display:flex; align-items:center; gap:5px; transition:.2s; }
.chat-clear-btn:hover { background:rgba(255,255,255,.14); color:#fff; }

.chat-msgs { flex:1; overflow-y:auto; padding:20px 18px; background:linear-gradient(180deg,#EFF6FF 0%,#E4EFFF 100%); display:flex; flex-direction:column; gap:14px; scroll-behavior:smooth; }
.chat-msgs::-webkit-scrollbar { width:4px; }
.chat-msgs::-webkit-scrollbar-track { background:transparent; }
.chat-msgs::-webkit-scrollbar-thumb { background:#A8D4F8; border-radius:2px; }

.chat-date-sep { display:flex; align-items:center; gap:10px; font-size:.68rem; color:#94a3b8; }
.chat-date-sep::before, .chat-date-sep::after { content:''; flex:1; height:1px; background:rgba(10,35,72,.1); }

.cmsg { display:flex; flex-direction:column; max-width:84%; gap:4px; }
.cmsg.bot  { align-self:flex-start; align-items:flex-start; }
.cmsg.user { align-self:flex-end; align-items:flex-end; }
.cmsg-row  { display:flex; align-items:flex-end; gap:8px; }
.cmsg-row.ur { flex-direction:row-reverse; }
.cmsg-av { width:28px; height:28px; flex-shrink:0; border-radius:50%; background:linear-gradient(135deg,#1A52A8,#3A7FD8); display:flex; align-items:center; justify-content:center; font-size:.57rem; font-weight:800; color:#fff; font-family:'Poppins',sans-serif; }
.cbubble { padding:12px 16px; border-radius:18px; font-size:.84rem; line-height:1.65; }
.bot  .cbubble { background:#fff; color:#0A1830; border:1px solid rgba(10,35,72,.08); box-shadow:0 2px 12px rgba(10,35,72,.07); border-bottom-left-radius:4px; }
.user .cbubble { background:linear-gradient(135deg,#0D2E62,#1A52A8); color:#fff; border-bottom-right-radius:4px; box-shadow:0 3px 14px rgba(10,35,72,.3); }
.ctime { font-size:.62rem; color:#94a3b8; padding:0 4px; }

.c-typing .cbubble { display:flex; align-items:center; gap:5px; padding:14px 18px; }
.cdot { width:7px; height:7px; border-radius:50%; background:linear-gradient(135deg,#1A52A8,#6EB0F0); animation:cTyp .9s ease-in-out infinite; }
.cdot:nth-child(2) { animation-delay:.18s; }
.cdot:nth-child(3) { animation-delay:.36s; }
@keyframes cTyp { 0%,80%,100%{transform:translateY(0);opacity:.5;} 40%{transform:translateY(-6px);opacity:1;} }

.c-quick { display:flex; flex-wrap:wrap; gap:7px; padding-top:2px; }
.c-quick button { background:#fff; border:1.5px solid rgba(26,82,168,.2); border-radius:50px; padding:6px 13px; font-size:.75rem; font-weight:600; color:#0D2E62; cursor:pointer; transition:.2s; font-family:'Inter',sans-serif; }
.c-quick button:hover { background:linear-gradient(135deg,#0D2E62,#1A52A8); color:#fff; border-color:transparent; transform:translateY(-1px); }

.chat-input-row { display:flex; align-items:center; gap:8px; padding:14px 16px; background:#fff; border-top:1px solid rgba(10,35,72,.07); flex-shrink:0; }
.chat-input { flex:1; background:linear-gradient(135deg,#EBF3FF,#D6EAFF); border:1.5px solid rgba(26,82,168,.15); border-radius:50px; padding:11px 18px; font-size:.84rem; font-family:'Inter',sans-serif; color:#0A1830; outline:none; transition:.2s; }
.chat-input::placeholder { color:#94a3b8; }
.chat-input:focus { border-color:#1A52A8; box-shadow:0 0 0 3px rgba(26,82,168,.1); }
.chat-send { width:40px; height:40px; flex-shrink:0; background:linear-gradient(135deg,#0D2E62,#1A52A8); border:none; border-radius:50%; color:#fff; font-size:.82rem; cursor:pointer; display:flex; align-items:center; justify-content:center; transition:.2s; box-shadow:0 3px 14px rgba(10,35,72,.35); }
.chat-send:hover { transform:scale(1.08); }

/* ====================================================== LIGHTBOX */
.lb { position:fixed; inset:0; background:rgba(4,16,31,.95); z-index:9999; display:flex; align-items:center; justify-content:center; opacity:0; pointer-events:none; transition:opacity .3s; }
.lb.open { opacity:1; pointer-events:all; }
.lb-inner { padding:64px; background:rgba(10,35,72,.8); backdrop-filter:blur(24px); border-radius:var(--radius-lg); font-size:5rem; border:1px solid rgba(255,255,255,.1); }
.lb-close { position:absolute; top:20px; right:24px; background:none; border:none; color:rgba(255,255,255,.5); font-size:1.5rem; cursor:pointer; transition:var(--tr); }
.lb-close:hover { color:#fff; transform:rotate(90deg); }

/* ====================================================== RESPONSIVE */
@media (max-width:900px) {
  .gallery-grid { grid-template-columns:repeat(2,1fr); }
  .kawe-layout { grid-template-columns:1fr; }
  .kawe-chat { height:480px; }
}
@media (max-width:640px) {
  .gallery-grid { grid-template-columns:repeat(2,1fr); }
  .hero-btns { flex-direction:column; align-items:center; }
}