/* ==========================================
   TEMA VISUAL: BLUE EYES & DEEP BLUE
   ========================================== */
:root {
  --bg-primary: #eef6ff;
  --bg-card: rgba(255, 255, 255, 0.85);
  --bg-card-hover: #ffffff;
  --border-color: rgba(186, 230, 253, 0.8);
  --text-main: #0f172a;
  --text-muted: #475569;
  --accent-blue: #2563eb;
  --glow-color: rgba(56, 189, 248, 0.4);
  --nav-bg: rgba(238, 246, 255, 0.88);
}

.dark {
  --bg-primary: #0a0f1d;
  --bg-card: rgba(15, 23, 42, 0.8);
  --bg-card-hover: rgba(30, 41, 59, 0.95);
  --border-color: rgba(30, 58, 138, 0.6);
  --text-main: #f8fafc;
  --text-muted: #94a3b8;
  --accent-blue: #38bdf8;
  --glow-color: rgba(37, 99, 235, 0.5);
  --nav-bg: rgba(10, 15, 29, 0.88);
}

body {
  background-color: var(--bg-primary);
  color: var(--text-main);
  font-family: 'Plus Jakarta Sans', sans-serif;
  transition: background-color 0.4s ease, color 0.4s ease;
  overflow-x: hidden;
}

.hero-bg-container {
  background-image: url('bg-hero.jpeg');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.glass-card {
  background: var(--bg-card);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid var(--border-color);
  box-shadow: 0 10px 30px -10px rgba(37, 99, 235, 0.12);
}

.glass-nav {
  background: var(--nav-bg);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-bottom: 1px solid var(--border-color);
}

.blue-eye-gradient {
  background: linear-gradient(135deg, #1d4ed8 0%, #2563eb 50%, #0284c7 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.dark .blue-eye-gradient {
  background: linear-gradient(135deg, #ffffff 0%, #7dd3fc 50%, #38bdf8 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.card-hover {
  transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.card-hover:hover {
  transform: translateY(-8px) scale(1.01);
  background: var(--bg-card-hover);
  border-color: var(--accent-blue);
  box-shadow: 0 22px 40px -10px var(--glow-color);
}

@keyframes floatSmooth {
  0%, 100% { transform: translateY(0px) rotate(0deg); }
  50% { transform: translateY(-10px) rotate(0.5deg); }
}

.animate-float {
  animation: floatSmooth 4s ease-in-out infinite;
}

/* ==========================================
   ANIMASI MASUK (SCROLL REVEAL & STAGGER)
   ========================================== */
.scroll-reveal {
  opacity: 1;
  transform: none;
  transition: opacity 0.9s cubic-bezier(0.16, 1, 0.3, 1), transform 0.9s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: opacity, transform;
}

html.js-enabled .scroll-reveal { opacity: 0; transform: translateY(28px) scale(.99); }
html.js-enabled .scroll-reveal.reveal-active { opacity: 1; transform: translateY(0) scale(1); }

.stat-number {
  font-size: 1.5rem;
  font-weight: 800;
  color: var(--accent-blue);
  line-height: 1.2;
}

.stat-label {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--text-muted);
}

/* Polesan motion dan feedback UI tambahan */
.flash-toast { animation: toastIn .42s cubic-bezier(.2,.8,.2,1) both; }
.flash-toast-hide { animation: toastOut .4s ease forwards; pointer-events:none; }
@keyframes toastIn { from { opacity:0; transform:translate3d(0,-14px,0) scale(.98); } to { opacity:1; transform:translate3d(0,0,0) scale(1); } }
@keyframes toastOut { to { opacity:0; transform:translate3d(0,-10px,0) scale(.98); visibility:hidden; } }
#page-progress { position:fixed; z-index:9999; top:0; left:0; height:3px; width:0; opacity:0; background:linear-gradient(90deg,#2563eb,#38bdf8,#a5f3fc); box-shadow:0 0 12px rgba(56,189,248,.75); transition:width .25s ease,opacity .2s ease; }
#page-progress.page-progress-active { width:82%; opacity:1; animation:progressPulse 1.2s ease-in-out infinite alternate; }
@keyframes progressPulse { from { filter:brightness(.95); } to { filter:brightness(1.4); } }
.inline-spinner { display:inline-block; width:14px; height:14px; margin-right:8px; vertical-align:-2px; border:2px solid currentColor; border-right-color:transparent; border-radius:50%; animation:spin .7s linear infinite; }
@keyframes spin { to { transform:rotate(360deg); } }
.is-submitting { opacity:.8; cursor:wait; }
.back-to-top { position:fixed; right:1.25rem; bottom:1.25rem; z-index:80; width:44px; height:44px; border:1px solid rgba(56,189,248,.5); border-radius:15px; color:#fff; background:linear-gradient(135deg,#2563eb,#0284c7); box-shadow:0 10px 28px rgba(37,99,235,.3); opacity:0; visibility:hidden; transform:translateY(12px); transition:all .25s ease; }
.back-to-top-visible { opacity:1; visibility:visible; transform:translateY(0); }
.back-to-top:hover { transform:translateY(-4px); box-shadow:0 14px 34px rgba(37,99,235,.45); }
.reduce-motion *, .reduce-motion *::before, .reduce-motion *::after { animation-duration:.01ms !important; animation-iteration-count:1 !important; scroll-behavior:auto !important; transition-duration:.01ms !important; }


/* Accessibility, stable media sizing, and graceful animation fallback */
img, video { max-width: 100%; }
img { height: auto; }
img[width][height] { height: auto; }
:where(a, button, input, textarea, select):focus-visible { outline: 3px solid #38bdf8; outline-offset: 3px; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto !important; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
  .scroll-reveal { opacity: 1 !important; transform: none !important; }
}
@media (max-width: 640px) { html.js-enabled .scroll-reveal { transform: translateY(18px); } .card-hover:hover { transform: none; } }


/* Premium motion polish: restrained, performant, and accessible */
:root { scroll-behavior:smooth; scroll-padding-top:90px; }
::selection { background:rgba(56,189,248,.28); }
.glass-card, .card-hover, .glass-nav, button, a { -webkit-tap-highlight-color:transparent; }
.card-hover { transition:transform .32s cubic-bezier(.2,.7,.2,1), box-shadow .32s ease, border-color .32s ease, background-color .32s ease; }
.card-hover:hover { transform:translate3d(0,-6px,0); }
button, a { transition-property:color,background-color,border-color,box-shadow,transform,opacity; transition-duration:.22s; transition-timing-function:cubic-bezier(.2,.7,.2,1); }
img { transition:opacity .28s ease; }
img.media-failed { object-fit:contain; background:linear-gradient(135deg,rgba(37,99,235,.08),rgba(56,189,248,.13)); }

/* Floating DKV Q&A assistant */
.dkv-chat-root{position:fixed;right:max(18px,env(safe-area-inset-right));bottom:max(18px,env(safe-area-inset-bottom));z-index:9990;font-family:'Plus Jakarta Sans',sans-serif}
.dkv-chat-toggle{position:relative;display:flex;align-items:center;gap:10px;padding:10px 18px 10px 10px;border:1px solid rgba(255,255,255,.35);border-radius:999px;color:#fff;background:linear-gradient(135deg,#1d4ed8,#0284c7 70%,#06b6d4);box-shadow:0 12px 34px rgba(2,132,199,.38);font-weight:800;letter-spacing:-.01em;isolation:isolate}
.dkv-chat-toggle:hover{transform:translateY(-3px);box-shadow:0 17px 40px rgba(2,132,199,.48)}
.dkv-chat-toggle-icon{display:grid;place-items:center;width:38px;height:38px;border-radius:50%;background:rgba(255,255,255,.17);font-size:17px}
.dkv-chat-pulse{position:absolute;right:5px;top:4px;width:9px;height:9px;border-radius:50%;background:#86efac;box-shadow:0 0 0 4px rgba(134,239,172,.17)}
.dkv-chat-panel{position:absolute;right:0;bottom:72px;display:flex;flex-direction:column;width:min(390px,calc(100vw - 28px));height:min(570px,calc(100dvh - 115px));min-height:380px;overflow:hidden;border:1px solid rgba(148,163,184,.28);border-radius:24px;background:#f8fbff;color:#0f172a;box-shadow:0 25px 80px rgba(15,23,42,.28);transform-origin:bottom right;opacity:0;visibility:hidden;transform:translateY(14px) scale(.97);transition:opacity .22s ease,transform .28s cubic-bezier(.2,.8,.2,1),visibility .22s}
.dkv-chat-panel.is-open{opacity:1;visibility:visible;transform:translateY(0) scale(1)}
.dkv-chat-header{display:flex;align-items:center;gap:11px;padding:16px;background:linear-gradient(120deg,#0f172a,#123b69);color:#fff}
.dkv-chat-avatar{display:grid;place-items:center;flex:0 0 42px;height:42px;border-radius:15px;background:linear-gradient(135deg,#38bdf8,#6366f1);box-shadow:0 5px 20px #38bdf844}
.dkv-chat-heading{display:flex;flex:1;flex-direction:column;gap:3px}.dkv-chat-heading strong{font-size:15px}.dkv-chat-heading span{font-size:11px;color:#cbd5e1}.dkv-online-dot{display:inline-block;width:7px;height:7px;margin-right:4px;border-radius:50%;background:#4ade80}
.dkv-chat-icon-btn{display:grid;place-items:center;width:34px;height:34px;border-radius:11px;color:#e2e8f0;background:rgba(255,255,255,.1)}.dkv-chat-icon-btn:hover{background:rgba(255,255,255,.2)}
.dkv-chat-messages{display:flex;flex:1;flex-direction:column;gap:12px;overflow-y:auto;padding:16px;overscroll-behavior:contain;background:radial-gradient(ellipse at top right,rgba(186,230,253,.35),transparent 55%),#f8fbff}
.dkv-chat-message{max-width:92%;padding:12px 14px;border:1px solid #e2e8f0;border-radius:5px 17px 17px 17px;background:#fff;color:#334155;font-size:13px;line-height:1.65;white-space:pre-wrap;overflow-wrap:anywhere;box-shadow:0 3px 12px rgba(15,23,42,.035);animation:dkvMessageIn .25s ease both}
.dkv-chat-message.user{align-self:flex-end;border-color:#bfdbfe;border-radius:17px 5px 17px 17px;background:linear-gradient(135deg,#dbeafe,#e0f2fe);color:#0f2d50}
.dkv-message-label{display:block;margin-bottom:4px;color:#0284c7;font-size:9px;font-weight:900;letter-spacing:.13em}
.dkv-chat-suggestions{display:flex;flex-wrap:wrap;gap:7px}.dkv-chat-suggestions button{padding:7px 10px;border:1px solid #bae6fd;border-radius:999px;background:#effaff;color:#075985;font-size:11px;font-weight:700}.dkv-chat-suggestions button:hover{background:#dff5ff;transform:translateY(-1px)}
.dkv-chat-form{display:flex;gap:8px;padding:12px;border-top:1px solid #e2e8f0;background:#fff}.dkv-chat-form input{min-width:0;flex:1;border:1px solid #dbe4ef;border-radius:14px;padding:12px 13px;background:#f8fafc;color:#0f172a;font-size:13px;outline:none}.dkv-chat-form input:focus{border-color:#38bdf8;box-shadow:0 0 0 3px #38bdf833}.dkv-chat-form button{flex:0 0 44px;border-radius:14px;background:linear-gradient(135deg,#2563eb,#0891b2);color:white}.dkv-chat-form button:hover{transform:translateY(-1px)}.dkv-chat-form button:disabled{opacity:.55;cursor:wait}
.dkv-chat-note{margin:0;padding:0 14px 10px;text-align:center;background:#fff;color:#94a3b8;font-size:10px}.dkv-chat-typing{display:flex;align-items:center;gap:4px;width:max-content;padding:12px 14px;border-radius:5px 15px 15px;background:#fff;border:1px solid #e2e8f0}.dkv-chat-typing i{width:5px;height:5px;border-radius:50%;background:#38bdf8;animation:dkvTyping .9s infinite ease-in-out}.dkv-chat-typing i:nth-child(2){animation-delay:.12s}.dkv-chat-typing i:nth-child(3){animation-delay:.24s}.dkv-chat-typing-text{margin-left:6px;font-size:11px;color:#64748b}.dkv-chat-spinner{display:inline-block;width:16px;height:16px;border:2px solid #ffffff88;border-top-color:#fff;border-radius:50%;animation:dkvSpin .7s linear infinite;vertical-align:middle}@keyframes dkvSpin{to{transform:rotate(360deg)}}
@keyframes dkvMessageIn{from{opacity:0;transform:translateY(5px)}to{opacity:1;transform:translateY(0)}}@keyframes dkvTyping{0%,60%,100%{transform:translateY(0);opacity:.45}30%{transform:translateY(-4px);opacity:1}}
@media(max-width:480px){.dkv-chat-root{right:max(10px,env(safe-area-inset-right));bottom:max(10px,env(safe-area-inset-bottom))}.dkv-chat-panel{right:-2px;bottom:64px;width:calc(100vw - 24px);height:min(72dvh,570px);min-height:360px;border-radius:20px}.dkv-chat-toggle{padding-right:14px}.dkv-chat-toggle-text{font-size:13px}}
@media(prefers-reduced-motion:reduce){html.js-enabled .scroll-reveal{opacity:1!important;transform:none!important}:root{scroll-behavior:auto}.dkv-chat-panel,.dkv-chat-message,.dkv-chat-typing i{animation:none!important;transition:none!important}.dkv-chat-toggle:hover,.card-hover:hover{transform:none}}

/* Prevent widget overflow on short screens and provide strong keyboard focus. */
.dkv-chat-panel[aria-hidden="true"] { pointer-events:none; }
.dkv-chat-toggle:focus-visible,.dkv-chat-icon-btn:focus-visible,.dkv-chat-form button:focus-visible,.dkv-chat-suggestions button:focus-visible { outline:3px solid #7dd3fc; outline-offset:3px; }
@media(max-height:520px) and (min-width:481px){.dkv-chat-panel{height:calc(100dvh - 105px);min-height:260px}.dkv-chat-messages{padding:10px;gap:8px}}