/* Lévi Artisan Bakery — landing page. Token dari Design System v1.0 */
:root{
  --gold:#7F6327; --bronze:#8E744D; --taupe:#9A9076;
  --porcelain:#F2F2F2; --white:#FFFFFF;
  --ink:#3A3128; --ink-muted:#7D7467;
  --font-display:'Cormorant Garamond',Georgia,serif;
  --font-text:'EB Garamond',Georgia,serif;
  --radius-pill:999px;
  --track-button:.24em;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--porcelain); color:var(--ink);
  font-family:var(--font-text); -webkit-font-smoothing:antialiased;
}
img{max-width:100%; height:auto; display:block}
a{color:var(--bronze); text-decoration:none}

/* ---------- Split canvas 50/50 ---------- */
.split{
  display:grid; grid-template-columns:1fr 1fr;
  align-items:stretch;
  min-height:100vh; min-height:100svh;
}

.panel{
  background:var(--porcelain);
  display:flex; align-items:center; justify-content:center;
  /* Padding mengecil sendiri di layar pendek supaya kolom menu tidak mendorong
     tinggi halaman melebihi jendela (mis. laptop 1366x680). */
  padding:clamp(20px, 5vh, 56px) 40px;
}
.panel-inner{
  width:100%; max-width:288px;
  display:flex; flex-direction:column; align-items:center;
}

/* Desktop: logo -> recipes+tagline -> pills -> sosial.
   Mobile: logo -> slider -> pills -> recipes+tagline+sosial (lihat @media). */
.brand{order:1; display:flex; justify-content:center; width:100%}
.sign{order:2; display:flex; flex-direction:column; align-items:center; width:100%}
.pills{order:3}
.socials{order:4}

.logo{width:160px; max-width:56%}
.recipes{
  font-family:var(--font-display); font-size:15px; line-height:1.4;
  color:var(--taupe); margin:22px 0 0; text-align:center;
}
/* Tagline sedikit lebih lebar dari kolom pill dan rapat ke baris recipes. */
.tagline{width:296px; max-width:104%; margin-top:2px}

/* ---------- Pills ---------- */
.pills{
  display:flex; flex-direction:column; gap:20px;
  width:100%; margin-top:10px;
}
.pill{
  display:flex; align-items:center; justify-content:center; gap:10px;
  min-height:40px; padding:9px 18px;
  border-radius:var(--radius-pill);
  background:var(--white); color:var(--taupe);
  font-family:var(--font-display); font-weight:600; font-size:13.5px;
  text-transform:uppercase;
  transition:background 200ms,color 200ms;
}
.pill span{letter-spacing:var(--track-button); padding-right:var(--track-button)}
.pill svg{flex:none; fill:currentColor}
.pill-primary{background:var(--taupe); color:var(--white)}
.pill:hover,.pill:focus-visible{background:var(--taupe); color:var(--white); outline:none}
.pill-primary:hover,.pill-primary:focus-visible{background:var(--bronze)}
.pill:focus-visible{box-shadow:0 0 0 2px var(--porcelain),0 0 0 4px var(--bronze)}

/* ---------- Social icons ---------- */
.socials{display:flex; gap:10px; margin-top:22px}
/* Latar putih tanpa outline - sama seperti pill. Lingkaran 34px. */
.soc{
  width:34px; height:34px; border-radius:var(--radius-pill);
  background:var(--white); color:var(--taupe);
  display:flex; align-items:center; justify-content:center;
  transition:background 200ms,color 200ms;
}
/* Glyph 19px di lingkaran 34px = 57%, sesuai proporsi gambar referensi.
   fill dan color dipakai bersama: ikon solid memakai fill, ikon outline
   (Instagram) memakai currentColor lewat stroke. */
.soc svg{fill:currentColor; width:19px; height:19px}
/* Tanpa outline, hover ditandai lewat glyph yang menggelap - bukan latar abu,
   karena abu di atas putih terlihat kotor. */
.soc:hover,.soc:focus-visible{color:var(--gold)}
.soc:focus-visible{outline:none; box-shadow:0 0 0 2px var(--porcelain),0 0 0 4px var(--bronze)}

/* ---------- Slider ---------- */
.stage{
  position:relative; overflow:hidden;
  background:var(--porcelain);
  display:flex; align-items:center; justify-content:center;
}
.stage-empty{width:100%; aspect-ratio:1/1.1; background:var(--porcelain)}

.slide{
  position:absolute; inset:0;
  display:flex; align-items:center; justify-content:center;
  opacity:0; transition:opacity var(--speed,900ms) ease-in-out;
}
.slide.on{opacity:1}
/* Foto mengisi penuh panel tanpa white space, sesuai referensi desain.
   Rasio panel ikut jendela browser sedangkan artwork 1:1.1, jadi contain selalu
   menyisakan bar kosong - cover menghilangkannya dengan memotong tepi.
   object-position:center menjaga produk tetap di tengah bidang yang terlihat. */
.slide img{width:100%; height:100%; object-fit:cover; object-position:center}

/* Slide horizontal: geser, bukan fade */
.stage[data-anim="slide"] .slide{
  opacity:1; transform:translateX(100%);
  transition:transform var(--speed,900ms) cubic-bezier(.4,0,.2,1);
}
.stage[data-anim="slide"] .slide.on{transform:translateX(0)}
.stage[data-anim="slide"] .slide.past{transform:translateX(-100%)}

/* Ken Burns: zoom lambat sambil cross-fade */
.stage[data-anim="zoom"] .slide.on img{animation:kb var(--kb,6s) ease-out both}
@keyframes kb{from{transform:scale(1)}to{transform:scale(1.04)}}

.nav{
  position:absolute; top:50%; transform:translateY(-50%);
  width:44px; height:44px; border:0; border-radius:var(--radius-pill);
  background:rgba(255,255,255,.72); color:var(--bronze);
  display:flex; align-items:center; justify-content:center;
  cursor:pointer; transition:background 200ms;
  -webkit-backdrop-filter:blur(2px); backdrop-filter:blur(2px);
}
.nav svg{width:22px; height:22px}
.nav:hover,.nav:focus-visible{background:var(--white); outline:none}
.nav:focus-visible{box-shadow:0 0 0 2px var(--bronze)}
.prev{left:20px}
.next{right:20px}

.dots{
  position:absolute; left:50%; bottom:22px; transform:translateX(-50%);
  display:flex; gap:9px;
}
.dot{
  width:9px; height:9px; padding:0; border:0; border-radius:var(--radius-pill);
  background:rgba(255,255,255,.55); cursor:pointer;
  transition:background 200ms,transform 200ms;
  box-shadow:0 0 0 1px rgba(58,49,40,.12);
}
.dot.on{background:var(--gold); transform:scale(1.15)}
.dot:focus-visible{outline:none; box-shadow:0 0 0 2px var(--bronze)}

/* ---------- Mobile: logo -> slider -> pills -> tagline + sosmed ---------- */
/* .split jadi flex column dan .panel/.panel-inner "transparan" (display:contents),
   sehingga brand / stage / pills / sign berurutan lewat order. */
/* Nilai mengikuti mockup Levi-Review-v2 pane mobile (390x844).
   Anggaran tinggi di 390x844: logo 104 + slider 250 + konten 442 = 796 <= 844,
   jadi semuanya - termasuk tagline dan sosmed - muat tanpa scroll. */
@media (max-width:900px){
  .split{display:flex; flex-direction:column; min-height:100svh}
  .panel,.panel-inner{display:contents}

  .brand{order:1; padding:18px 0 14px}
  /* Slider tinggi tetap 250px seperti mockup, bukan proporsi layar. */
  .stage{order:2; width:100%; aspect-ratio:auto; height:250px; background:#EDEBE6}
  .stage-empty{aspect-ratio:auto; height:250px}
  .pills{order:3; margin-top:0; padding:15px 22px 0; gap:7px}
  .sign{order:4; padding:28px 22px 0}
  .socials{order:5; margin:12px auto 20px; justify-content:center}

  .pills,.sign,.socials{width:100%; max-width:436px; margin-inline:auto}
  .brand,.pills,.sign,.socials{box-sizing:border-box}

  .logo{width:118px; max-width:46%; margin-inline:auto}
  /* Mockup mobile hanya menampilkan tagline script - baris "Classical Indo"
     dipakai di desktop saja. */
  .recipes{display:none}
  .tagline{width:196px; max-width:100%; margin-top:0; opacity:.9}

  .pill{min-height:44px; padding:0 18px; font-size:14px; color:var(--gold)}
  .pill span{letter-spacing:.22em; padding-right:.22em}
  .pill-primary{font-size:16px; color:var(--white)}
  .pill-primary span{letter-spacing:.24em; padding-right:.24em}

  .soc{width:40px; height:40px}
  .soc svg{width:23px; height:23px}   /* 57% dari 40px, sama seperti desktop */
  .socials{gap:12px}

  /* Mockup memakai cover dengan titik fokus 32% dari atas: bagian atas foto
     (kue utama) tetap terlihat sementara tepi bawah yang dipotong. */
  .slide{padding-bottom:0}
  .slide img{object-fit:cover; object-position:center 32%}

  .prev,.next{display:none}
  .dots{bottom:16px; gap:9px}
  .dot{width:7px; height:7px; background:transparent;
       box-shadow:inset 0 0 0 1px rgba(127,99,39,.65)}
  .dot.on{background:var(--gold); transform:none}
}

@media (max-width:380px){
  .pill{font-size:13px; padding:0 14px}
  .pill span{letter-spacing:.18em; padding-right:.18em}
  .pill-primary{font-size:15px}
}

/* Layar lebih pendek dari mockup (mis. iPhone SE 667px, Android 640px):
   slider mengecil supaya 6 pill tetap muat tanpa scroll seperti di 844px.
   Tagline dan sosmed tetap di bawah lipatan di layar sependek ini. */
@media (max-width:900px) and (max-height:760px){
  .stage,.stage-empty{height:190px}
  .brand{padding:12px 0 10px}
  .pills{padding-top:12px}
}

@media (max-width:900px) and (max-height:660px){
  .stage,.stage-empty{height:158px}
  .pill{min-height:40px}
}

@media (prefers-reduced-motion:reduce){
  .slide{transition:none}
  .stage[data-anim="slide"] .slide{transition:none}
  .stage[data-anim="zoom"] .slide.on img{animation:none}
  .pill,.soc,.nav,.dot{transition:none}
}