/* PATCH LANDING KLIK - violet, gambar mojok kanan bawah, tanpa frame, shimmer gradasi */
:root{
  --klik-violet-900:#200035;
  --klik-violet-800:#330060;
  --klik-violet-700:#5811a6;
  --klik-violet-600:#7b2cff;
  --klik-violet-500:#a855f7;
  --klik-violet-300:#d8b4fe;
  --klik-cyan:#38d5ff;
  --klik-white:#ffffff;
}

body.optima-landing-page.optima-violet-page{
  min-height:100vh;
  margin:0;
  overflow-x:hidden;
  color:#fff;
  background:
    radial-gradient(circle at 84% 20%, rgba(216,180,254,.28), transparent 30%),
    radial-gradient(circle at 15% 15%, rgba(56,213,255,.16), transparent 24%),
    linear-gradient(135deg,#1b0033 0%,#36006a 36%,#7427e6 72%,#9a4dff 100%);
}

.optima-hero-shell{
  position:relative;
  min-height:100vh;
  overflow:hidden;
  isolation:isolate;
  padding:18px 5.8vw 0;
  display:flex;
  flex-direction:column;
}

.optima-shimmer-layer{
  position:absolute;
  inset:-20%;
  z-index:-2;
  opacity:.72;
  background:
    linear-gradient(115deg,transparent 0%,rgba(255,255,255,.12) 18%,transparent 31%),
    linear-gradient(140deg,rgba(56,213,255,.14),transparent 38%,rgba(216,180,254,.18) 68%,transparent 100%);
  background-size:180% 180%, 160% 160%;
  animation:klikShimmerGradient 8s ease-in-out infinite alternate;
  pointer-events:none;
}

.optima-bg-orb{
  position:absolute;
  border-radius:999px;
  filter:blur(1px);
  opacity:.55;
  z-index:-1;
  pointer-events:none;
}
.optima-bg-orb-one{width:340px;height:340px;left:-120px;top:-110px;background:rgba(56,213,255,.18);animation:klikFloatOrb 9s ease-in-out infinite}
.optima-bg-orb-two{width:430px;height:430px;right:-170px;bottom:-150px;background:rgba(216,180,254,.22);animation:klikFloatOrb 11s ease-in-out infinite reverse}

.optima-navbar{
  width:100%;
  min-height:70px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px;
  position:relative;
  z-index:8;
  animation:klikSlideDown .7s ease both;
}

.optima-logo-stack{
  display:flex;
  align-items:center;
  gap:8px;
  text-decoration:none;
  flex:0 0 auto;
}
.optima-logo-badge{
  width:34px;
  height:34px;
  border-radius:12px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  color:#fff;
  background:rgba(255,255,255,.13);
  border:1px solid rgba(255,255,255,.18);
  box-shadow:0 12px 25px rgba(20,0,40,.18);
  backdrop-filter:blur(10px);
  font-weight:900;
}
.optima-logo-badge-main{
  width:42px;
  height:42px;
  border-radius:15px;
  background:rgba(255,255,255,.24);
  color:#fff;
  font-size:1.24rem;
}

.optima-menu-toggle{
  display:none;
  border:0;
  width:44px;
  height:44px;
  border-radius:15px;
  color:#fff;
  background:rgba(255,255,255,.16);
  box-shadow:0 12px 30px rgba(20,0,40,.18);
}

.optima-menu-collapse{
  flex:1 1 auto;
  display:flex!important;
  justify-content:flex-end;
}
.optima-menu{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:clamp(14px,2vw,28px);
  width:100%;
}
.optima-menu a{
  position:relative;
  display:inline-flex;
  align-items:center;
  gap:6px;
  color:rgba(255,255,255,.82);
  text-decoration:none;
  font-weight:800;
  font-size:.94rem;
  white-space:nowrap;
  letter-spacing:.01em;
  transition:.22s ease;
}
.optima-menu a:hover,.optima-menu a.active{color:#fff;transform:translateY(-1px)}
.optima-menu a.active::after{
  content:"";
  position:absolute;
  left:0;
  right:0;
  bottom:-8px;
  height:3px;
  border-radius:99px;
  background:linear-gradient(90deg,#fff,var(--klik-cyan),var(--klik-violet-300));
  animation:klikMenuLine 2.6s ease-in-out infinite;
}
.optima-about-btn{
  min-width:126px;
  justify-content:center;
  border-radius:999px;
  padding:11px 18px;
  background:rgba(255,255,255,.17);
  border:1px solid rgba(255,255,255,.20);
  box-shadow:0 16px 35px rgba(20,0,40,.15);
  backdrop-filter:blur(14px);
}
.optima-new{
  margin-left:2px;
  transform:rotate(-12deg);
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:30px;
  height:18px;
  padding:0 6px;
  border-radius:999px;
  background:#ff6a00;
  color:#fff;
  font-size:.62rem;
  font-weight:900;
  box-shadow:0 8px 18px rgba(255,106,0,.35);
}

.optima-hero-grid{
  position:relative;
  flex:1;
  min-height:calc(100vh - 88px);
  display:grid;
  grid-template-columns:minmax(320px,.78fr) minmax(420px,1.22fr);
  align-items:center;
  gap:24px;
  z-index:2;
}

.optima-hero-copy{
  position:relative;
  z-index:5;
  max-width:560px;
  padding-top:0;
  margin-top:-2vh;
  animation:klikFadeUp .85s ease both .08s;
}
.optima-kicker{
  display:inline-flex;
  margin:0 0 8px;
  color:rgba(255,255,255,.9);
  font-size:clamp(1.35rem,2vw,2rem);
  font-weight:800;
  letter-spacing:-.02em;
}
.optima-hero-copy h1{
  margin:0 0 12px;
  font-size:clamp(2.7rem,5.1vw,5.15rem);
  line-height:.96;
  font-weight:950;
  letter-spacing:-.055em;
  color:#fff;
  text-shadow:0 20px 50px rgba(20,0,40,.24);
}
.optima-hero-copy p{
  margin:0;
  max-width:620px;
  font-size:clamp(1.02rem,1.6vw,1.45rem);
  line-height:1.32;
  color:rgba(255,255,255,.78);
  font-weight:650;
}
.optima-actions{
  margin-top:30px;
  display:flex;
  align-items:center;
  gap:18px;
  flex-wrap:wrap;
}
.optima-primary{
  border:0;
  text-decoration:none;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:54px;
  min-width:170px;
  padding:13px 26px;
  border-radius:999px;
  color:#fff;
  font-weight:900;
  background:linear-gradient(115deg,#38d5ff,#a855f7,#ffffff,#7b2cff,#38d5ff);
  background-size:250% 250%;
  box-shadow:0 20px 40px rgba(56,213,255,.25),0 14px 38px rgba(90,20,180,.34);
  animation:klikButtonGradient 4.2s ease infinite;
  transition:.22s ease;
}
.optima-primary:hover{color:#fff;transform:translateY(-3px) scale(1.02)}
.optima-play{
  text-decoration:none;
  display:inline-flex;
  align-items:center;
  gap:12px;
  color:#fff;
  font-weight:900;
}
.optima-play span{
  width:48px;
  height:48px;
  border-radius:999px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border:3px solid rgba(255,255,255,.9);
  box-shadow:0 12px 28px rgba(20,0,40,.22);
}

.optima-hero-visual{
  position:absolute;
  right:0;
  bottom:0;
  top:70px;
  width:min(68vw,980px);
  display:flex;
  align-items:flex-end;
  justify-content:flex-end;
  z-index:1;
  pointer-events:none;
}
.optima-merged-illustration{
  position:absolute;
  right:-5.8vw;
  bottom:0;
  width:min(68vw,960px);
  height:min(74vh,650px);
  display:flex;
  align-items:flex-end;
  justify-content:flex-end;
  background:transparent!important;
  border:0!important;
  outline:0!important;
  box-shadow:none!important;
  overflow:visible!important;
  border-radius:0!important;
  padding:0!important;
  margin:0!important;
  animation:klikVisualIn .9s ease both .2s;
}
.optima-merged-illustration::before{
  content:"";
  position:absolute;
  inset:8% -5% -10% 10%;
  z-index:0;
  border-radius:45% 0 0 45%;
  background:radial-gradient(circle at 55% 45%, rgba(255,255,255,.22), transparent 40%), linear-gradient(135deg,rgba(216,180,254,.20),rgba(56,213,255,.08));
  filter:blur(4px);
  opacity:.82;
  animation:klikGlowPulse 4.8s ease-in-out infinite;
}
.optima-illustration-glow{
  position:absolute;
  right:4%;
  bottom:4%;
  width:58%;
  height:58%;
  border-radius:50%;
  background:radial-gradient(circle,rgba(255,255,255,.22),transparent 66%);
  filter:blur(12px);
  z-index:0;
}
.optima-merged-illustration img{
  position:relative;
  z-index:1;
  display:block;
  width:150%;
  height:150%;
  object-fit:contain;
  object-position:right bottom;
  border:0!important;
  outline:0!important;
  box-shadow:none!important;
  border-radius:0!important;
  background:transparent!important;
  filter:drop-shadow(0 28px 42px rgba(20,0,40,.26));
  animation:klikFloatVisual 5.6s ease-in-out infinite;
}

@keyframes klikShimmerGradient{0%{transform:translate3d(-3%,0,0) rotate(0deg);background-position:0% 50%,0% 50%}100%{transform:translate3d(3%,0,0) rotate(.6deg);background-position:100% 50%,100% 50%}}
@keyframes klikButtonGradient{0%,100%{background-position:0% 50%}50%{background-position:100% 50%}}
@keyframes klikMenuLine{0%,100%{opacity:.7;transform:scaleX(.72)}50%{opacity:1;transform:scaleX(1)}}
@keyframes klikFadeUp{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:translateY(0)}}
@keyframes klikSlideDown{from{opacity:0;transform:translateY(-16px)}to{opacity:1;transform:translateY(0)}}
@keyframes klikVisualIn{from{opacity:0;transform:translate(30px,18px) scale(.97)}to{opacity:1;transform:translate(0,0) scale(1)}}
@keyframes klikFloatVisual{0%,100%{transform:translate3d(0,0,0)}50%{transform:translate3d(0,-12px,0)}}
@keyframes klikFloatOrb{0%,100%{transform:translate3d(0,0,0) scale(1)}50%{transform:translate3d(18px,-16px,0) scale(1.05)}}
@keyframes klikGlowPulse{0%,100%{opacity:.58;transform:scale(.98)}50%{opacity:1;transform:scale(1.04)}}

@media (min-width: 992px){
  .optima-menu-visible-page .optima-menu-collapse.collapse:not(.show){display:flex!important;height:auto!important;visibility:visible!important}
  .optima-menu-visible-page .optima-menu-toggle{display:none!important}
}

@media (max-width: 991.98px){
  .optima-hero-shell{padding:14px 18px 0;min-height:100vh}
  .optima-navbar{min-height:58px;align-items:flex-start;flex-wrap:wrap}
  .optima-menu-toggle{display:inline-flex;align-items:center;justify-content:center;margin-left:auto}
  .optima-menu-collapse{display:none!important;flex-basis:100%;width:100%}
  .optima-menu-collapse.show{display:block!important}
  .optima-menu{width:100%;align-items:stretch;gap:8px;flex-direction:column;margin-top:10px;padding:12px;border-radius:24px;background:rgba(38,0,70,.78);border:1px solid rgba(255,255,255,.18);backdrop-filter:blur(18px)}
  .optima-menu a{width:100%;padding:10px 12px;border-radius:14px}.optima-menu a.active::after{display:none}.optima-about-btn{justify-content:center;width:100%}
  .optima-hero-grid{min-height:auto;display:flex;flex-direction:column;align-items:flex-start;padding-top:22px;padding-bottom:0;gap:0}
  .optima-hero-copy{max-width:100%;margin-top:0;padding-bottom:24px}.optima-actions{margin-top:22px}.optima-primary{min-width:150px;min-height:48px}
  .optima-hero-visual{position:relative;inset:auto;width:calc(100% + 36px);height:48vh;min-height:310px;margin:0 -18px;align-self:stretch;display:flex;justify-content:flex-end;align-items:flex-end}
  .optima-merged-illustration{position:absolute;right:0;bottom:0;width:100%;height:100%}
  .optima-merged-illustration img{width:100%;height:100%;object-position:right bottom}
}

@media (max-width:575.98px){
  .optima-logo-badge:not(.optima-logo-badge-main){display:none}.optima-hero-copy h1{font-size:2.55rem}.optima-hero-copy p{font-size:.98rem}.optima-actions{gap:12px}.optima-play span{width:42px;height:42px}.optima-hero-visual{height:40vh;min-height:260px}
}


/* === PATCH ANIMASI V14: paksa animasi gradasi/shimmer berjalan === */
.optima-violet-page .optima-hero-shell{
  background:
    radial-gradient(circle at 82% 18%, rgba(255,255,255,.16), transparent 22%),
    linear-gradient(120deg,#260044 0%,#5b13c6 28%,#8f3dff 52%,#3a0a75 78%,#260044 100%) !important;
  background-size: 220% 220%, 260% 260% !important;
  animation: klikHeroGradientRun 10s ease-in-out infinite alternate !important;
  -webkit-animation: klikHeroGradientRun 10s ease-in-out infinite alternate !important;
}

.optima-violet-page .optima-shimmer-layer{
  z-index:1 !important;
  mix-blend-mode:screen;
  opacity:.55 !important;
  background:
    linear-gradient(110deg, transparent 0%, rgba(255,255,255,0) 35%, rgba(255,255,255,.28) 48%, rgba(216,180,254,.22) 52%, rgba(255,255,255,0) 66%, transparent 100%),
    radial-gradient(circle at 30% 30%, rgba(56,213,255,.15), transparent 34%),
    radial-gradient(circle at 80% 70%, rgba(216,180,254,.20), transparent 36%) !important;
  background-size: 260% 100%, 170% 170%, 190% 190% !important;
  transform: translateX(-55%);
  animation: klikShimmerSweepRun 3.8s linear infinite, klikSoftGradientRun 9s ease-in-out infinite alternate !important;
  -webkit-animation: klikShimmerSweepRun 3.8s linear infinite, klikSoftGradientRun 9s ease-in-out infinite alternate !important;
}

.optima-violet-page .optima-bg-orb-one,
.optima-violet-page .optima-bg-orb-two{
  animation-duration:7s !important;
  animation-timing-function:ease-in-out !important;
  animation-iteration-count:infinite !important;
}

.optima-violet-page .optima-hero-copy,
.optima-violet-page .optima-navbar,
.optima-violet-page .optima-merged-illustration{
  will-change: transform, opacity;
}

.optima-violet-page .optima-merged-illustration img{
  animation: klikFloatVisualRun 4.4s ease-in-out infinite !important;
  -webkit-animation: klikFloatVisualRun 4.4s ease-in-out infinite !important;
}

.optima-violet-page .optima-illustration-glow,
.optima-violet-page .optima-merged-illustration::before{
  animation: klikGlowPulseRun 3.2s ease-in-out infinite !important;
  -webkit-animation: klikGlowPulseRun 3.2s ease-in-out infinite !important;
}

.optima-violet-page .optima-primary{
  background:linear-gradient(115deg,#38d5ff,#a855f7,#ffffff,#7b2cff,#38d5ff) !important;
  background-size:280% 280% !important;
  animation: klikButtonGradientRun 2.8s ease infinite !important;
  -webkit-animation: klikButtonGradientRun 2.8s ease infinite !important;
}

.optima-violet-page .optima-logo-badge-main{
  animation: klikLogoPulseRun 2.4s ease-in-out infinite !important;
  -webkit-animation: klikLogoPulseRun 2.4s ease-in-out infinite !important;
}

@keyframes klikHeroGradientRun{
  0%{background-position:0% 50%, 0% 50%;}
  50%{background-position:55% 46%, 100% 50%;}
  100%{background-position:100% 54%, 0% 50%;}
}
@-webkit-keyframes klikHeroGradientRun{
  0%{background-position:0% 50%, 0% 50%;}
  50%{background-position:55% 46%, 100% 50%;}
  100%{background-position:100% 54%, 0% 50%;}
}
@keyframes klikShimmerSweepRun{
  0%{transform:translateX(-62%) skewX(-8deg); background-position:0% 50%, 0% 0%, 100% 100%;}
  100%{transform:translateX(62%) skewX(-8deg); background-position:100% 50%, 100% 100%, 0% 0%;}
}
@-webkit-keyframes klikShimmerSweepRun{
  0%{-webkit-transform:translateX(-62%) skewX(-8deg); background-position:0% 50%, 0% 0%, 100% 100%;}
  100%{-webkit-transform:translateX(62%) skewX(-8deg); background-position:100% 50%, 100% 100%, 0% 0%;}
}
@keyframes klikSoftGradientRun{
  0%,100%{opacity:.42;}
  50%{opacity:.72;}
}
@keyframes klikFloatVisualRun{
  0%,100%{transform:translate3d(0,0,0) scale(1);}
  50%{transform:translate3d(-10px,-14px,0) scale(1.012);}
}
@-webkit-keyframes klikFloatVisualRun{
  0%,100%{-webkit-transform:translate3d(0,0,0) scale(1);}
  50%{-webkit-transform:translate3d(-10px,-14px,0) scale(1.012);}
}
@keyframes klikGlowPulseRun{
  0%,100%{opacity:.52;transform:scale(.96);filter:blur(12px);}
  50%{opacity:1;transform:scale(1.08);filter:blur(16px);}
}
@keyframes klikButtonGradientRun{
  0%,100%{background-position:0% 50%; box-shadow:0 18px 38px rgba(56,213,255,.24),0 12px 32px rgba(90,20,180,.28);}
  50%{background-position:100% 50%; box-shadow:0 24px 48px rgba(168,85,247,.36),0 16px 38px rgba(56,213,255,.24);}
}
@keyframes klikLogoPulseRun{
  0%,100%{transform:translateY(0) scale(1); box-shadow:0 12px 25px rgba(20,0,40,.18);}
  50%{transform:translateY(-2px) scale(1.05); box-shadow:0 18px 34px rgba(216,180,254,.34);}
}

@media (prefers-reduced-motion: reduce){
  .optima-violet-page .optima-hero-shell,
  .optima-violet-page .optima-shimmer-layer,
  .optima-violet-page .optima-merged-illustration img,
  .optima-violet-page .optima-primary,
  .optima-violet-page .optima-logo-badge-main{
    animation-duration: 8s !important;
    animation-iteration-count: infinite !important;
  }
}


/* === PATCH V15: gambar tidak berdenyut, hanya berpendar; judul berpendar; shimmer gradasi smooth === */
.optima-violet-page.optima-soft-glow-page .optima-hero-shell{
  background:
    radial-gradient(circle at 78% 20%, rgba(236,212,255,.22), transparent 26%),
    radial-gradient(circle at 17% 18%, rgba(167,139,250,.20), transparent 28%),
    linear-gradient(120deg,#220038 0%,#4c0a8f 25%,#7427e6 52%,#9f5bff 73%,#350061 100%) !important;
  background-size: 160% 160%, 180% 180%, 260% 260% !important;
  animation: klikSmoothVioletGradient 18s ease-in-out infinite alternate !important;
  -webkit-animation: klikSmoothVioletGradient 18s ease-in-out infinite alternate !important;
}

.optima-violet-page.optima-soft-glow-page .optima-shimmer-layer{
  z-index:1 !important;
  opacity:.46 !important;
  mix-blend-mode:screen;
  background:
    linear-gradient(105deg, transparent 0%, rgba(255,255,255,0) 38%, rgba(243,232,255,.24) 49%, rgba(196,181,253,.16) 55%, rgba(255,255,255,0) 68%, transparent 100%),
    radial-gradient(circle at 28% 24%, rgba(216,180,254,.18), transparent 34%),
    radial-gradient(circle at 84% 76%, rgba(167,139,250,.22), transparent 38%) !important;
  background-size: 320% 100%, 170% 170%, 190% 190% !important;
  transform:translateX(-50%);
  animation: klikSmoothShimmerSweep 8s linear infinite, klikSmoothShimmerBreath 12s ease-in-out infinite alternate !important;
  -webkit-animation: klikSmoothShimmerSweep 8s linear infinite, klikSmoothShimmerBreath 12s ease-in-out infinite alternate !important;
}

/* Gambar tidak naik-turun/berdenyut: dibuat stabil, hanya glow di belakangnya yang berpendar lembut. */
.optima-violet-page.optima-soft-glow-page .optima-merged-illustration img{
  animation:none !important;
  -webkit-animation:none !important;
  transform:none !important;
  filter:drop-shadow(0 30px 44px rgba(31,0,54,.30)) drop-shadow(0 0 22px rgba(216,180,254,.18));
}

.optima-violet-page.optima-soft-glow-page .optima-illustration-glow,
.optima-violet-page.optima-soft-glow-page .optima-merged-illustration::before{
  animation: klikSoftGlowOnly 5.8s ease-in-out infinite !important;
  -webkit-animation: klikSoftGlowOnly 5.8s ease-in-out infinite !important;
}

/* Judul Klik UNIPAR App berpendar, bukan bergerak. */
.optima-violet-page.optima-soft-glow-page .optima-hero-copy h1{
  color:#fff;
  text-shadow:
    0 0 10px rgba(255,255,255,.20),
    0 0 26px rgba(216,180,254,.28),
    0 18px 44px rgba(20,0,40,.26);
  animation: klikTitleSoftGlow 4.8s ease-in-out infinite !important;
  -webkit-animation: klikTitleSoftGlow 4.8s ease-in-out infinite !important;
}

/* Logo utama tidak berdenyut besar; cukup glow halus agar stabil. */
.optima-violet-page.optima-soft-glow-page .optima-logo-badge-main{
  animation: klikLogoSoftGlow 5.2s ease-in-out infinite !important;
  -webkit-animation: klikLogoSoftGlow 5.2s ease-in-out infinite !important;
}

@keyframes klikSmoothVioletGradient{
  0%{background-position:18% 48%, 10% 42%, 0% 50%;}
  50%{background-position:44% 54%, 55% 48%, 100% 52%;}
  100%{background-position:70% 46%, 90% 58%, 0% 50%;}
}
@-webkit-keyframes klikSmoothVioletGradient{
  0%{background-position:18% 48%, 10% 42%, 0% 50%;}
  50%{background-position:44% 54%, 55% 48%, 100% 52%;}
  100%{background-position:70% 46%, 90% 58%, 0% 50%;}
}
@keyframes klikSmoothShimmerSweep{
  0%{transform:translateX(-58%) skewX(-7deg);background-position:0% 50%, 8% 14%, 92% 86%;}
  100%{transform:translateX(58%) skewX(-7deg);background-position:100% 50%, 92% 86%, 8% 14%;}
}
@-webkit-keyframes klikSmoothShimmerSweep{
  0%{-webkit-transform:translateX(-58%) skewX(-7deg);background-position:0% 50%, 8% 14%, 92% 86%;}
  100%{-webkit-transform:translateX(58%) skewX(-7deg);background-position:100% 50%, 92% 86%, 8% 14%;}
}
@keyframes klikSmoothShimmerBreath{
  0%,100%{opacity:.32;}
  50%{opacity:.56;}
}
@keyframes klikSoftGlowOnly{
  0%,100%{opacity:.44;filter:blur(14px);}
  50%{opacity:.95;filter:blur(18px);}
}
@keyframes klikTitleSoftGlow{
  0%,100%{
    text-shadow:0 0 10px rgba(255,255,255,.18),0 0 24px rgba(216,180,254,.26),0 18px 44px rgba(20,0,40,.26);
  }
  50%{
    text-shadow:0 0 14px rgba(255,255,255,.32),0 0 38px rgba(216,180,254,.52),0 0 62px rgba(168,85,247,.22),0 18px 44px rgba(20,0,40,.26);
  }
}
@-webkit-keyframes klikTitleSoftGlow{
  0%,100%{
    text-shadow:0 0 10px rgba(255,255,255,.18),0 0 24px rgba(216,180,254,.26),0 18px 44px rgba(20,0,40,.26);
  }
  50%{
    text-shadow:0 0 14px rgba(255,255,255,.32),0 0 38px rgba(216,180,254,.52),0 0 62px rgba(168,85,247,.22),0 18px 44px rgba(20,0,40,.26);
  }
}
@keyframes klikLogoSoftGlow{
  0%,100%{box-shadow:0 12px 25px rgba(20,0,40,.18),0 0 0 rgba(216,180,254,0);}
  50%{box-shadow:0 14px 30px rgba(20,0,40,.20),0 0 26px rgba(216,180,254,.42);}
}
@-webkit-keyframes klikLogoSoftGlow{
  0%,100%{box-shadow:0 12px 25px rgba(20,0,40,.18),0 0 0 rgba(216,180,254,0);}
  50%{box-shadow:0 14px 30px rgba(20,0,40,.20),0 0 26px rgba(216,180,254,.42);}
}

/* =========================================================
   KLIK HEADER LOGO - WHITE GLOW
   Efek berpendar putih lembut pada logo header
   ========================================================= */

.optima-header-logo {
    display: block;
    width: clamp(150px, 18vw, 245px);
    height: auto;
    max-height: 58px;
    object-fit: contain;
    object-position: left center;

    filter:
        drop-shadow(0 0 5px rgba(255, 255, 255, 0.95))
        drop-shadow(0 0 12px rgba(255, 255, 255, 0.72))
        drop-shadow(0 0 22px rgba(255, 255, 255, 0.48))
        drop-shadow(0 10px 22px rgba(78, 35, 170, 0.20));

    animation: klikLogoWhiteGlow 3.2s ease-in-out infinite;
}

@keyframes klikLogoWhiteGlow {
    0%, 100% {
        filter:
            drop-shadow(0 0 4px rgba(255, 255, 255, 0.75))
            drop-shadow(0 0 10px rgba(255, 255, 255, 0.55))
            drop-shadow(0 0 18px rgba(255, 255, 255, 0.35))
            drop-shadow(0 10px 22px rgba(78, 35, 170, 0.18));
    }

    50% {
        filter:
            drop-shadow(0 0 8px rgba(255, 255, 255, 1))
            drop-shadow(0 0 18px rgba(255, 255, 255, 0.85))
            drop-shadow(0 0 32px rgba(255, 255, 255, 0.58))
            drop-shadow(0 12px 28px rgba(78, 35, 170, 0.26));
    }
}

@media (max-width: 768px) {
    .optima-header-logo {
        width: clamp(130px, 42vw, 190px);
        max-height: 50px;
    }
}

@media (max-width: 420px) {
    .optima-header-logo {
        width: 145px;
        max-height: 44px;
    }
}