/* ===== Reset & Font ===== */
* { margin: 0; padding: 0; box-sizing: border-box; }

html, body {
  font-family: 'Raleway', sans-serif;
  color: #ffffff;
  overflow-x: hidden;           /* cegah body bikin bar bawah */
  background: transparent;
}

/* ===== Background ===== */
.background{
  position: fixed;
  inset: 0;
  background: linear-gradient(-45deg,#0f172a,#bcc2d0,#d1ae85,#0f172a);
  background-size: 500% 500%;
  animation: gradientShift 18s ease infinite;
  z-index: -10;
}
.background::after{content:'';position:absolute;top:-100px;left:-100px;width:400px;height:400px;background:radial-gradient(circle,rgba(255,255,255,.15) 0%,transparent 70%);filter:blur(50px);pointer-events:none;}
.background::before{content:'';position:absolute;bottom:20%;left:10%;width:2px;height:2px;background:transparent;box-shadow:0 0 2px 1px rgba(255,255,255,.08),40px 10px 3px rgba(255,255,255,.05),80px -10px 2px rgba(255,255,255,.04),120px 20px 4px rgba(255,255,255,.06),160px -20px 2px rgba(255,255,255,.07);filter:blur(1px);pointer-events:none;}
.overlay::before{content:"";position:fixed;inset:0;background:url('particles.svg') center/cover no-repeat;opacity:.15;z-index:-1;pointer-events:none;}
@keyframes gradientShift{0%{background-position:0% 50%}50%{background-position:100% 50%}100%{background-position:0% 50%}}

/* ===== Layout Wrapper ===== */
.overlay{
  min-height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;
  padding:2rem;text-align:center;
}

/* ===== Header ===== */
.site-header .logo{font-size:2rem;font-weight:700;color:#fff;margin-bottom:.5rem;}
.site-header .logo span{color:#fff;}
.welcome-text{font-size:1.5rem;margin-bottom:.25rem;}
.subtitle{font-size:1rem;opacity:.7}

/* ===== Carousel Area ===== */
.card-carousel{
  margin-top:2rem;width:100%;max-width:900px;
  overflow-x:auto;               /* tetap bisa di-scroll */
  overflow-y:hidden;
  scroll-behavior:smooth;
  padding-left:1rem; scroll-padding-left:2rem;

  /* ===== Hide scrollbar cross-browser ===== */
  -webkit-overflow-scrolling: touch; /* momentum on iOS */
  scrollbar-width: none;             /* Firefox hide */
  -ms-overflow-style: none;          /* IE/Edge legacy */
}
.card-carousel::-webkit-scrollbar{ /* Chrome/Safari */
  width:0; height:0; display:none;
}

.card-list{
  display:flex; gap:1.5rem; padding:1rem 0;
  overscroll-behavior-x: contain; /* biar geser tidak ‘mental’ ke body */
  touch-action: pan-x;             /* gesture horizontal nyaman di touch */
}

/* ===== Card Style ===== */
.card{
  min-width:160px;height:180px;background:rgba(255,255,255,.05);
  border-radius:1rem;backdrop-filter:blur(10px);
  box-shadow:0 0 10px rgba(239,213,156,.3);
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  transition:transform .3s ease, box-shadow .3s ease;
  cursor:pointer;text-decoration:none;color:inherit;
}
.card:hover{ transform:scale(1.05); box-shadow:0 0 20px rgba(250,248,212,.6); }
.card-icon{ font-size:2.5rem; margin-bottom:.5rem; }
.card-icon img{ width:72px;height:72px;object-fit:contain;margin-bottom:.75rem;filter:drop-shadow(0 0 6px rgba(255,255,255,.1)); }

.overlay{ padding-top:2rem; padding-bottom:2rem; }
.site-header{ display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;margin-bottom:1.5rem; }
.brand-logo{ width:280px;max-width:100%;margin-bottom:.75rem;object-fit:contain;display:block; }
.card-title{ font-size:1rem;font-weight:500; }

/* ===== Footer Hint ===== */
.footer-hint{ margin-top:2rem;font-size:.85rem;color:#2a1010;opacity:.6; }

/* ===== Breakpoints ===== */
@media (max-width:375px){
  .brand-logo{width:160px}
  .card{min-width:140px;height:160px}
  .card-icon img{width:56px;height:56px}
  .welcome-text,.subtitle{font-size:.95rem}
}
@media (max-width:480px){
  .brand-logo{width:180px}
  .card{min-width:150px;height:170px}
  .card-icon img{width:60px;height:60px}
}
@media (max-width:768px){
  .brand-logo{width:220px}
  .card{min-width:180px;height:180px}
  .card-icon img{width:72px;height:72px}
}