/* Cendekia One: lapisan hero JERNIH yang cocok untuk foto apa pun.
   Prinsip: foto dijaga tajam dan alami, tidak ada elemen yang bergantung pada posisi objek.
   Dimuat SETELAH site.css. Semua kelas baru berawalan hp-.

   Bawaan (tanpa kelas)  = Jernih : foto sedikit lebih tajam dan hidup + gelembung kaca.
   Tambahan, opsional, taruh pada <header class="hx" id="beranda"> (boleh digabung):
     hx-bingkai   bingkai emas ganda berbentuk gerbang dengan sudut bintang (eksklusif)
     hx-rel       rel vertikal emas di margin kiri yang kosong (layar lebar saja)
     hx-cahaya    kilau emas lembut + sapuan cahaya halus tiap 9 detik
     hx-selaras   sapuan hijau merek agar foto beragam tampak serasi (membuat foto lebih lembut)
     hx-zoom      zoom sinematik pelan (membuat foto sedikit lebih lembut saat bergerak)
   Untuk mencabut semua: hapus <link> hero-premium.css dan blok <div class="hp"> di site.blade.php. */

/* Lapisan diletakkan DI DALAM #ps (wadah foto). isolation membuat #ps satu lapisan sendiri,
   jadi z-index di bawah tidak bocor ke teks, gelembung, dan lapisan gelap (.ov). */
.hx .ps{isolation:isolate}
.hx .ps .hp{position:absolute;inset:0;z-index:5;pointer-events:none;overflow:hidden}
.hp>div{position:absolute;inset:0;display:none}

/* 1. Jernih: sedikit kontras dan warna, tanpa menyentuh ketajaman (tanpa zoom, tanpa kabut) */
.hx .sl2 img{filter:contrast(1.06) saturate(1.10) brightness(1.02)}

/* 2. Gelembung pesan: kaca bening dengan garis tipis emas */
.hx .bub .bi{
  background:linear-gradient(140deg,rgba(255,255,255,.94),rgba(255,251,240,.82));
  -webkit-backdrop-filter:blur(14px) saturate(1.5);backdrop-filter:blur(14px) saturate(1.5);
  border:1px solid rgba(246,196,83,.55);
  box-shadow:0 22px 44px -14px rgba(0,28,10,.55),0 0 0 4px rgba(255,255,255,.07),inset 0 1px 0 rgba(255,255,255,.95)}

/* 4. hx-cahaya */
.hx-cahaya .hp-light{display:block;overflow:hidden}
.hp-light::before{content:"";position:absolute;right:-8%;top:-30%;width:55%;height:80%;border-radius:50%;
  background:radial-gradient(circle,rgba(255,214,120,.22),rgba(255,214,120,0) 65%);filter:blur(8px)}
.hp-light::after{content:"";position:absolute;top:-20%;bottom:-20%;left:-30%;width:16%;
  background:linear-gradient(100deg,rgba(255,255,255,0),rgba(255,236,190,.13),rgba(255,255,255,0));
  transform:skewX(-18deg) translateX(0);animation:hpSweep 9s ease-in-out 2s infinite}
@keyframes hpSweep{0%{transform:skewX(-18deg) translateX(0);opacity:0}8%{opacity:1}
  45%{transform:skewX(-18deg) translateX(1100%);opacity:1}55%,100%{transform:skewX(-18deg) translateX(1100%);opacity:0}}

/* 5. hx-selaras: sapuan hijau + kilau hangat (opsional; membuat foto lebih lembut) */
.hx-selaras .hp-tone{display:block}
.hp-tone::before{content:"";position:absolute;inset:0;background:#0b5a2a;mix-blend-mode:soft-light;opacity:.22}
.hp-tone::after{content:"";position:absolute;inset:0;mix-blend-mode:soft-light;
  background:radial-gradient(60% 80% at 90% 10%,rgba(255,206,110,.45),rgba(255,206,110,0) 65%)}

/* 6. hx-zoom: zoom sinematik (opsional) */
.hx-zoom .sl2 img{transform:scale(1.05)}
.hx-zoom .sl2.on img{animation:hpKen 11s ease-out both}
@keyframes hpKen{from{transform:scale(1)}to{transform:scale(1.05)}}

/* 3. LAPISAN ATAS (.hq): dipasang paling akhir di <header>, di atas semua lapisan, tetapi hanya
   menggambar garis tipis di tepi dan di margin kiri, tidak pernah di belakang teks. */
.hq{position:absolute;inset:0;z-index:6;pointer-events:none}
.hq>*{display:none}

/* 3a. hx-bingkai : bingkai emas ganda berbentuk "gerbang" (terbuka di bawah, memudar), sudut berhias bintang */
.hx-bingkai .hq-frame{display:block;position:absolute;inset:20px 20px 0 20px}
/* garis bingkai ada di ::before / ::after supaya pemudaran (mask) hanya mengenai garis,
   bukan hiasan bintang di sudut yang sedikit keluar dari kotak */
.hx-bingkai .hq-frame::after,.hx-bingkai .hq-frame::before{content:"";position:absolute;
  -webkit-mask-image:linear-gradient(180deg,#000 0,#000 72%,transparent 100%);
          mask-image:linear-gradient(180deg,#000 0,#000 72%,transparent 100%)}
.hx-bingkai .hq-frame::after{inset:0;border:1px solid rgba(246,196,83,.60);border-bottom:0;border-radius:30px 30px 0 0}
.hx-bingkai .hq-frame::before{inset:7px 7px 0 7px;border:1px solid rgba(255,255,255,.10);border-bottom:0;border-radius:24px 24px 0 0}
.hq-frame i{position:absolute;top:-17px;width:34px;height:34px;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 26 26' fill='%230b3d1d' stroke='%23f6c453' stroke-width='1.1'%3E%3Crect x='5' y='5' width='16' height='16'/%3E%3Crect x='5' y='5' width='16' height='16' transform='rotate(45 13 13)'/%3E%3Ccircle cx='13' cy='13' r='2.6' fill='%23f6c453' stroke='none'/%3E%3C/svg%3E") center/contain no-repeat}
.hq-frame i:first-child{left:calc(30px - 17px)}
.hq-frame i:last-child{right:calc(30px - 17px)}

/* 3b. hx-rel : rel vertikal di margin kiri (hanya layar lebar, tempat margin memang kosong) */
@media (min-width:1560px){
  .hx-rel .hq-rail{display:flex;position:absolute;left:clamp(36px,4.2vw,84px);top:17%;bottom:19%;
    flex-direction:column;align-items:center;gap:16px}
  .hq-rail .rs{width:18px;height:18px;flex:none;
    background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 26 26' fill='none' stroke='%23f6c453' stroke-width='1.3'%3E%3Crect x='5' y='5' width='16' height='16'/%3E%3Crect x='5' y='5' width='16' height='16' transform='rotate(45 13 13)'/%3E%3Ccircle cx='13' cy='13' r='2.4' fill='%23f6c453' stroke='none'/%3E%3C/svg%3E") center/contain no-repeat}
  .hq-rail .rl{flex:1;width:1px;background:linear-gradient(180deg,rgba(246,196,83,.9),rgba(246,196,83,.15) 80%,rgba(246,196,83,0))}
  .hq-rail .rt{writing-mode:vertical-rl;transform:rotate(180deg);white-space:nowrap;
    font-family:inherit;font-weight:600;font-size:11px;line-height:1;letter-spacing:.34em;text-transform:uppercase;color:rgba(255,226,150,.85)}
}

@media (max-width:820px){.hx-bingkai .hq-frame{inset:10px 10px 0 10px;border-radius:18px 18px 0 0}.hx-bingkai .hq-frame::before{display:none}}
@media (prefers-reduced-motion:reduce){
  .hp-light::after{display:none}
  .hx-zoom .sl2 img,.hx-zoom .sl2.on img{animation:none;transform:none}
}