/* v1.4.31 — Google Drive school gate background with layered navy overlay */

:root{
  --landing-drive-photo:url("https://drive.google.com/thumbnail?id=1rXL5sWSu7HxR_-suLbNau231ZL3FZEBu&sz=w2400");
}

html,
body.guardrail-landing{
  min-height:100%;
  background:#07162d;
}

body.guardrail-landing{
  position:relative;
  overflow-x:hidden;
}

/* Foto asli ditempatkan sebagai layer tetap di belakang seluruh landing. */
body.guardrail-landing::before{
  content:"";
  position:fixed;
  inset:0;
  z-index:-3;
  background-image:var(--landing-drive-photo);
  background-repeat:no-repeat;
  background-size:cover;
  /* Fokus sedikit dinaikkan agar gerbang dan tulisan SMAN 2 CIREBON tetap berada di area pandang. */
  background-position:50% 42%;
  filter:saturate(.78) contrast(.96) brightness(.82);
  transform:scale(1.015);
  transform-origin:center;
}

/*
 * Overlay utama:
 * - kiri lebih gelap untuk editorial copy,
 * - kanan lebih gelap untuk role cards,
 * - bagian tengah dibuat sedikit lebih transparan agar gerbang/tulisan sekolah masih terlihat.
 */
body.guardrail-landing::after{
  content:"";
  position:fixed;
  inset:0;
  z-index:-2;
  pointer-events:none;
  background:
    radial-gradient(ellipse 34% 55% at 51% 44%, rgba(5,22,48,.42) 0%, rgba(5,22,48,.58) 46%, rgba(5,22,48,0) 78%),
    linear-gradient(90deg,
      rgba(5,18,42,.88) 0%,
      rgba(6,24,52,.80) 29%,
      rgba(7,33,65,.62) 49%,
      rgba(7,31,62,.66) 60%,
      rgba(5,19,44,.84) 82%,
      rgba(4,15,36,.90) 100%),
    linear-gradient(180deg,rgba(5,18,40,.76) 0%,rgba(5,20,45,.62) 45%,rgba(4,14,33,.84) 100%);
}

/* Matikan foto lokal lama agar hanya foto Drive yang menjadi background utama. */
.ef-photo{
  display:none!important;
}

/* Shell/section transparan supaya background foto tetap terbaca. */
.landing-ef,
.ef-shell,
.ef-main,
.ef-editorial,
.ef-access{
  background:transparent!important;
}

/* Tambahkan lapisan tipis di belakang area kiri tanpa menjadi cardbox. */
.ef-editorial::before{
  content:"";
  position:absolute;
  inset:-26px -22px -22px -34px;
  z-index:-1;
  border-radius:30px;
  background:linear-gradient(120deg,rgba(4,18,42,.20),rgba(5,28,59,.07) 64%,rgba(5,28,59,0));
  pointer-events:none;
}

/* Role tetap readable tanpa menutup foto terlalu banyak. */
.ef-role{
  background:linear-gradient(180deg,rgba(16,42,76,.58),rgba(11,31,62,.48))!important;
  border-color:rgba(164,205,244,.22)!important;
  box-shadow:0 9px 24px rgba(0,0,0,.14),inset 0 1px rgba(255,255,255,.04)!important;
  backdrop-filter:blur(5px);
  -webkit-backdrop-filter:blur(5px);
}
.ef-role:hover{
  background:linear-gradient(180deg,rgba(22,58,99,.70),rgba(13,39,74,.58))!important;
}

/* Footer tetap terbaca di atas foto. */
.ef-footer{
  color:rgba(236,245,255,.72)!important;
  text-shadow:0 1px 2px rgba(0,0,0,.22);
}

/* Desktop lebar: beri sedikit ruang visual di tengah agar gerbang lebih terlihat. */
@media (min-width:1180px){
  .ef-main{
    gap:clamp(56px,5.2vw,92px)!important;
  }
}

/* Laptop pendek: fokus foto dinaikkan agar signage tidak turun keluar viewport. */
@media (min-width:981px) and (max-height:760px){
  body.guardrail-landing::before{
    background-position:50% 38%;
  }
}

/* Tablet: fokus sedikit ke atas-tengah. */
@media (max-width:980px){
  body.guardrail-landing::before{
    background-position:50% 36%;
  }
  body.guardrail-landing::after{
    background:
      linear-gradient(180deg,rgba(5,18,42,.82) 0%,rgba(6,28,58,.66) 42%,rgba(4,16,38,.88) 100%),
      linear-gradient(90deg,rgba(5,20,46,.72),rgba(5,24,52,.58));
  }
  .ef-editorial::before{display:none;}
}

/* HP: foto tetap terlihat sebagai ambience; keterbacaan diprioritaskan. */
@media (max-width:640px){
  body.guardrail-landing::before{
    background-position:50% 31%;
    filter:saturate(.72) contrast(.95) brightness(.78);
  }
  body.guardrail-landing::after{
    background:
      linear-gradient(180deg,rgba(4,16,38,.86) 0%,rgba(5,24,51,.72) 36%,rgba(4,16,38,.91) 100%);
  }
  .ef-role{
    backdrop-filter:blur(4px);
    -webkit-backdrop-filter:blur(4px);
  }
}