/* ── Kategori: fullscreen vertical scroll ── */

html{scroll-snap-type:y mandatory}

.kat-wrap{position:relative}

.kat-section{
  position:relative;
  height:100vh;height:100svh;min-height:560px;
  scroll-snap-align:start;scroll-snap-stop:always;
  display:flex;align-items:center;justify-content:center;
  overflow:hidden;isolation:isolate;
  color:#fff
}

/* ── Background image with parallax-like scale ── */
.kat-bg{position:absolute;inset:-10% 0;z-index:-2;will-change:transform}
.kat-bg img{width:100%;height:100%;object-fit:cover;transform:scale(1.001);transition:transform 8s cubic-bezier(.22,.61,.36,1)}
.kat-section.in .kat-bg img{transform:scale(1.08)}

/* ── Overlay gradient ── */
.kat-overlay{
  position:absolute;inset:0;z-index:-1;
  background:
    linear-gradient(180deg,rgba(10,18,14,.55) 0%,rgba(10,18,14,.15) 40%,rgba(10,18,14,.7) 100%),
    radial-gradient(ellipse 80% 60% at 50% 40%,transparent 0%,rgba(10,18,14,.3) 100%)
}

/* ── Content ── */
.kat-content{
  text-align:center;
  display:flex;flex-direction:column;align-items:center;gap:0;
  padding:0 24px;
  max-width:640px;
  opacity:0;transform:translateY(40px);
  transition:opacity 1s var(--ease),transform 1s var(--ease);
  transition-delay:.15s
}
.kat-section.in .kat-content{opacity:1;transform:none}

.kat-title{
  font-size:clamp(2.4rem,6vw,4.2rem);
  font-weight:400;
  letter-spacing:-.025em;
  line-height:1.08;
  text-shadow:0 2px 20px rgba(0,0,0,.4);
  margin-bottom:16px
}

.kat-price{
  font-size:clamp(.92rem,1.4vw,1.06rem);
  padding:7px 20px;
  border-radius:999px;
  background:rgba(255,255,255,.12);
  border:1px solid rgba(255,255,255,.25);
  -webkit-backdrop-filter:blur(10px);
  backdrop-filter:blur(10px);
  margin-bottom:28px
}
.kat-price b{color:#f1dfb8;font-weight:500}

.kat-content .btn{max-width:none;width:auto;flex:none;height:40px;padding:0 22px;font-size:.84rem}

/* ── Decorative diagonal line ── */
.kat-deco{
  position:absolute;inset:0;z-index:0;pointer-events:none;
  opacity:0;transition:opacity 1.4s ease .4s
}
.kat-section.in .kat-deco{opacity:1}
.kat-deco svg{width:100%;height:100%}

/* ── Scroll hint ── */
.kat-scroll-hint{
  position:absolute;
  bottom:calc(28px + env(safe-area-inset-bottom,0px));
  left:50%;transform:translateX(-50%);
  display:flex;flex-direction:column;align-items:center;gap:6px;
  font-size:.72rem;font-weight:500;letter-spacing:.12em;text-transform:uppercase;
  opacity:0;
  transition:opacity 1s ease .8s;
  color:rgba(255,255,255,.6)
}
.kat-section.in .kat-scroll-hint{opacity:1}
.kat-scroll-hint svg{animation:kat-bounce 2s ease-in-out infinite}
@keyframes kat-bounce{
  0%,100%{transform:translateY(0)}
  50%{transform:translateY(6px)}
}

/* ── Alternating content alignment for variety ── */
.kat-section[data-index="1"] .kat-content,
.kat-section[data-index="3"] .kat-content{
  align-items:flex-start;text-align:left;
  padding-left:clamp(32px,8vw,120px);
  align-self:center;
  max-width:none;width:100%
}
.kat-section[data-index="1"] .kat-content .btn,
.kat-section[data-index="3"] .kat-content .btn{
  align-self:flex-start
}

/* ── Alternating overlay direction ── */
.kat-section[data-index="1"] .kat-overlay{
  background:
    linear-gradient(90deg,rgba(10,18,14,.72) 0%,rgba(10,18,14,.2) 60%,transparent 100%),
    linear-gradient(180deg,rgba(10,18,14,.3) 0%,transparent 30%,rgba(10,18,14,.5) 100%)
}
.kat-section[data-index="3"] .kat-overlay{
  background:
    linear-gradient(270deg,rgba(10,18,14,.72) 0%,rgba(10,18,14,.2) 60%,transparent 100%),
    linear-gradient(180deg,rgba(10,18,14,.3) 0%,transparent 30%,rgba(10,18,14,.5) 100%)
}
.kat-section[data-index="3"] .kat-content{
  align-items:flex-end;text-align:right;
  padding-left:24px;
  padding-right:clamp(32px,8vw,120px)
}
.kat-section[data-index="3"] .kat-content .btn{
  align-self:flex-end
}

/* ── Mobile ── */
@media(max-width:860px){
  .kat-section[data-index="1"] .kat-content,
  .kat-section[data-index="3"] .kat-content{
    align-items:center;text-align:center;
    padding-left:24px;padding-right:24px
  }
  .kat-section[data-index="1"] .kat-content .btn,
  .kat-section[data-index="3"] .kat-content .btn{
    align-self:center
  }
  .kat-indicator{right:10px;gap:8px}
  .kat-indicator button{width:8px;height:8px}
}

@media(max-height:640px){
  html{scroll-snap-type:none}
  .kat-section{height:auto;min-height:100svh;padding:100px 0 60px}
}

@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .kat-bg img{transition:none}
  .kat-content{opacity:1;transform:none;transition:none}
  .kat-num{opacity:.25;transition:none}
  .kat-deco{opacity:1;transition:none}
  .kat-scroll-hint{opacity:1;transition:none}
  .kat-scroll-hint svg{animation:none}
}