.elementor-kit-7{--e-global-color-primary:#6EC1E4;--e-global-color-secondary:#54595F;--e-global-color-text:#7A7A7A;--e-global-color-accent:#61CE70;--e-global-typography-primary-font-family:"Outfit";--e-global-typography-primary-font-weight:600;--e-global-typography-secondary-font-family:"Outfit";--e-global-typography-secondary-font-weight:400;--e-global-typography-text-font-family:"Outfit";--e-global-typography-text-font-weight:400;--e-global-typography-accent-font-family:"Outfit";--e-global-typography-accent-font-weight:500;font-family:"Outfit", Sans-serif;}.elementor-kit-7 e-page-transition{background-color:#FFBC7D;}.elementor-kit-7 a{font-family:"Outfit", Sans-serif;}.elementor-kit-7 h1{font-family:"Outfit", Sans-serif;}.elementor-kit-7 h2{font-family:"Outfit", Sans-serif;}.elementor-kit-7 h3{font-family:"Outfit", Sans-serif;}.elementor-kit-7 h4{font-family:"Outfit", Sans-serif;}.elementor-kit-7 h5{font-family:"Outfit", Sans-serif;}.elementor-kit-7 h6{font-family:"Outfit", Sans-serif;}.elementor-section.elementor-section-boxed > .elementor-container{max-width:50%;}.e-con{--container-max-width:50%;}.elementor-widget:not(:last-child){--kit-widget-spacing:20px;}.elementor-element{--widgets-spacing:20px 20px;--widgets-spacing-row:20px;--widgets-spacing-column:20px;}{}h1.entry-title{display:var(--page-title-display);}@media(max-width:1024px){.elementor-section.elementor-section-boxed > .elementor-container{max-width:1024px;}.e-con{--container-max-width:1024px;}}@media(max-width:767px){.elementor-section.elementor-section-boxed > .elementor-container{max-width:767px;}.e-con{--container-max-width:767px;}}/* Start custom CSS */:root{
  --glass-bg: rgba(255,255,255,0.10);
  --glass-border: rgba(255,255,255,0.25);
  --glass-blur: 16px;
  --glass-radius: 18px;
  --glass-shadow: 0 10px 30px rgba(0,0,0,0.25);

  /* Kawal margin video global */
  --yt-margin-block: clamp(12px, 2vw, 24px);
}

/* ===================== GLASS CARD ===================== */
.glass{
  position: relative;
  isolation: isolate;                     /* elak pseudo overlap pelik */
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  border-radius: var(--glass-radius);
  box-shadow: var(--glass-shadow);
  backdrop-filter: blur(var(--glass-blur)) saturate(160%);
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(160%);
  color: #111;
  overflow: hidden;
  transition: transform .2s ease, box-shadow .3s ease, background .2s ease;
  will-change: transform, box-shadow;
}

/* Highlight tepi premium */
.glass::before{
  content:"";
  position:absolute; inset:0; border-radius:inherit; padding:1px;
  background: linear-gradient(135deg, rgba(255,255,255,.65), rgba(255,255,255,.08));
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  pointer-events:none;
}

.glass:hover{
  transform: translateY(-2px);
  box-shadow: 0 20px 50px rgba(0,0,0,0.30);
  background: rgba(255,255,255,0.14);
}

/* Versi gelap */
.dark .glass{
  background: rgba(17,25,40,0.55);
  border-color: rgba(255,255,255,0.18);
  color: #eaeaea;
}

/* Fallback bila tiada backdrop-filter */
@supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))){
  .glass{ background: rgba(255,255,255,0.85); }
}

/* ===================== HERO BG ===================== */
.hero-bg{
  min-height: 80vh;
  display: grid;
  place-items: center;
  padding: 40px 20px;
  /* Guna image-set untuk format moden; tukar path ke fail anda */
  background:
    radial-gradient(1000px 600px at 10% 10%, rgba(255,255,255,.12), transparent 60%),
    radial-gradient(800px 500px at 90% 80%, rgba(255,255,255,.10), transparent 60%),
    image-set(
      url('/wp-content/uploads/hero.avif') type('image/avif'),
      url('/wp-content/uploads/hero.webp') type('image/webp'),
      url('/wp-content/uploads/hero.jpg')  type('image/jpeg')
    ) center/cover no-repeat;
}

/* ===================== FONTS & FOIT GUARD ===================== */
/* Self-host satu family saja (contoh 'Outfit'). Tukar path sebenar. */
@font-face{
  font-family: 'Outfit';
  src: url('/wp-content/themes/child/fonts/outfit-regular.woff2') format('woff2');
  font-display: swap;
}

html.wf-loading body{ visibility: visible !important; opacity: 1 !important; }

/* Kill preloader/FOIT selepas 2s kalau JS lambat */
html:not(.e-loaded) body,
body.preloader,
body.page-transition{
  animation: forceShow 0s 2s forwards;
}
@keyframes forceShow{ to{ opacity:1 !important; visibility:visible !important; } }

/* ===================== LITE YOUTUBE ===================== */
/* Base – sesuai untuk widget HTML Elementor */
lite-youtube{
  display:block;
  width:100%;
  max-width:100%;
  margin: var(--yt-margin-block) auto;
  border-radius:12px;
  overflow:hidden;
}

/* 16:9 */
lite-youtube.normal{ aspect-ratio:16/9; }

/* 9:16 (Shorts) – responsive & tak kecil sangat */
lite-youtube.short{
  aspect-ratio:9/16;
  /* Lebar fleksibel: minimum 260px, ikut viewport, hadkan ke 560px */
  width: clamp(260px, 32vw, 560px);
  max-height: 90vh;               /* elak terlalu tinggi di desktop */
}

/* Fallback browser lama (tiada aspect-ratio) */
@supports not (aspect-ratio: 1/1){
  lite-youtube.normal,
  lite-youtube.short{ position:relative; height:auto; }
  lite-youtube.normal::before{ content:""; display:block; padding-top:56.25%; }
  lite-youtube.short::before{ content:""; display:block; padding-top:177.77%; }
  lite-youtube.normal > *,
  lite-youtube.short > *{ position:absolute; inset:0; width:100%; height:100%; }
}

/* Elementor spacing hygiene – buang margin berlapis dalam kad */
.glass .elementor-widget-container > *:last-child{ margin-bottom:0; }

/* Kurangkan motion jika pengguna set reduce motion */
@media (prefers-reduced-motion: reduce){
  .glass{ transition:none; }
  .glass:hover{ transform:none; box-shadow: var(--glass-shadow); }
}
/* Pastikan widget HTML & lite-youtube 9:16 sentiasa penuh column */
.elementor .elementor-widget-html,
.elementor .elementor-widget-html lite-youtube.short{
  width:100% !important;
  max-width:none !important;
}

/* Elak poster jadi 'contain' di mana-mana stylesheet luar */
lite-youtube.short{
  background-position:center !important;
  background-size:cover !important;
}/* End custom CSS */