/* =========================================================================
   home-3d.css — kedalaman untuk halaman depan
   =========================================================================

   ATURAN TUNGGAL BERKAS INI:

       Kedalaman hanya dipasang pada benda yang MEMANG SUDAH BENDA.

   Artinya: elemen yang sebelum berkas ini ada pun sudah punya latar
   sendiri atau garis tepi sendiri. Kartu produk, kartu flash sale, kartu
   lencana, ubin angka, tab seduh, tombol, kotak isian, foto.

   Yang TIDAK disentuh sama sekali adalah isi yang terbuka — teks yang
   berdiri langsung di atas bidang section tanpa latar dan tanpa tepi:
   tahap-tahap pada "Satu Garis, Satu Perjalanan", panel Asal Usul,
   baris FAQ, panel cara seduh, formulir ajakan di bawah.

   Versi pertama berkas ini melanggar aturan itu: semua yang terbuka saya
   bungkus jadi kotak terangkat. Hasilnya halaman jadi lebih buruk, dan
   paling parah justru mulai dari bagian Perjalanan — teks yang tadinya
   lapang di atas hijau tua berubah jadi deretan kotak abu-abu yang
   mengeruhkan warnanya. Bayangan tidak bisa menambah kedalaman pada
   sesuatu yang bukan benda; ia hanya menggambar kotak di sekelilingnya.

   Yang juga dibuang dari versi pertama, dengan alasan yang sama:

   - Bayangan masuk di tepi atas dan bawah tiap pita section. Niatnya
     membuat tiap section terbaca sebagai lapisan yang ditumpuk. Hasilnya
     kabut gelap di perbatasan, dan warna merek jadi kotor.
   - Garis cahaya setebal 1px di tiap perbatasan section. Terlihat seperti
     templat, bukan seperti halaman yang ditata.
   - Pembulatan sudut yang diubah. Situs ini memakai --radius:2px dengan
     sengaja; mengubahnya jadi 16px bukan menambah kedalaman, itu
     mengganti gaya desainnya.
   - Nomor tahap dibuat jadi bola. "01 — 1.500 MDPL" ternyata label
     selebar kartunya, bukan angka dalam lingkaran, jadi yang muncul pita
     abu-abu mengilap melintang di kepala tiap tahap.

   Yang tersisa di bawah ini semuanya bisa diuji dengan satu pertanyaan:
   "apakah elemen ini sudah berupa benda sebelum saya menyentuhnya?"
   Kalau jawabannya tidak, ia tidak ada di berkas ini.

   Dimuat HANYA di halaman depan (lihat layouts/app.blade.php). Hapus tiga
   baris @if di sana dan halaman depan kembali persis seperti semula.
   ====================================================================== */

:root{
  /* Bayangan di atas permukaan terang (kertas).
     Berlapis, tidak pernah satu: satu garis sentuh setipis rambut, satu
     bayangan pendek, satu lebar. Lapisan pertama itulah yang membuat
     kartu terlihat MENEMPEL di halaman; tanpa dia kartu terlihat
     mengambang beberapa sentimeter di udara. */
  --d3-2:
     0 1px 1px   rgba(33,28,22,.10),
     0 3px 6px   rgba(33,28,22,.08),
     0 10px 20px -8px rgba(33,28,22,.14);
  --d3-3:
     0 1px 2px   rgba(33,28,22,.13),
     0 6px 12px  rgba(33,28,22,.10),
     0 20px 32px -12px rgba(33,28,22,.20);

  /* Bayangan di atas permukaan gelap: hitam lebih pekat, karena bayangan
     tipis di latar gelap tidak terlihat sama sekali. */
  --d3-g2:
     0 1px 1px   rgba(0,0,0,.35),
     0 4px 8px   rgba(0,0,0,.25),
     0 12px 22px -8px rgba(0,0,0,.35);
  --d3-g3:
     0 2px 3px   rgba(0,0,0,.40),
     0 8px 16px  rgba(0,0,0,.30),
     0 22px 36px -12px rgba(0,0,0,.45);

  /* Tepi atas kena cahaya, tepi bawah punya ketebalan. Dua inset ini yang
     sebenarnya membuat sesuatu terbaca "menonjol"; bayangan di luar hanya
     memberi tahu seberapa tinggi. */
  --d3-kilau:   inset 0 1px 0 rgba(255,255,255,.85);
  --d3-kilau-g: inset 0 1px 0 rgba(255,255,255,.12);
  --d3-bibir:   inset 0 -2px 0 rgba(33,28,22,.055);
  --d3-bibir-g: inset 0 -2px 0 rgba(0,0,0,.26);

  /* Cekung — untuk benda yang MENERIMA sesuatu */
  --d3-cekung:
     inset 0 2px 4px rgba(33,28,22,.11),
     inset 0 1px 1px rgba(33,28,22,.08);

  --d3-laju: 220ms cubic-bezier(.22,.61,.36,1);
}

/* =======================================================================
   1. Kartu putih — sudah punya latar dan tepi sendiri

   .product-card, .flash-sale-card, .ig-post berada di atas kertas.
   .badge-card putih tapi berdiri di atas hero gelap, jadi sorotan
   tepinya tetap putih (isinya terang) sementara bayangannya memakai
   versi pekat (dasarnya gelap).

   Pembulatan sudut masing-masing DIBIARKAN apa adanya.
   ===================================================================== */

.section-light .product-card,
.flash-sale .flash-sale-card,
.section-light .ig-post{
  box-shadow: var(--d3-kilau), var(--d3-bibir), var(--d3-2);
  transition: transform var(--d3-laju), box-shadow var(--d3-laju);
}
.section-light .product-card:hover,
.flash-sale .flash-sale-card:hover,
.section-light .ig-post:hover{
  transform: translateY(-6px);
  box-shadow: var(--d3-kilau), var(--d3-bibir), var(--d3-3);
}

.hero .badge-card{
  box-shadow: var(--d3-kilau), var(--d3-bibir), var(--d3-g2);
  transition: transform var(--d3-laju), box-shadow var(--d3-laju);
}
.hero .badge-card:hover{
  transform: translateY(-4px);
  box-shadow: var(--d3-kilau), var(--d3-bibir), var(--d3-g3);
}

/* =======================================================================
   2. Ubin bergaris tepi di atas bidang gelap

   .hero-stat-card dan .stat-kartu latarnya transparan, TAPI keduanya
   sudah punya garis tepi 1px sendiri — jadi keduanya memang sudah benda,
   hanya benda yang tembus pandang. Lapisannya beralfa rendah supaya
   menimpa, bukan menutupi: percobaan pertama memakai putih .95 dan yang
   terjadi adalah kabut putih menutupi seluruh pita hijau.
   ===================================================================== */

.hero .hero-stat-card,
.stat-band .stat-kartu{
  background-image: linear-gradient(180deg,
      rgba(255,255,255,.06), rgba(255,255,255,0) 58%, rgba(0,0,0,.10));
  box-shadow: var(--d3-kilau-g), var(--d3-bibir-g), var(--d3-g2);
  transition: transform var(--d3-laju), box-shadow var(--d3-laju);
}
.hero .hero-stat-card:hover,
.stat-band .stat-kartu:hover{
  transform: translateY(-5px);
  box-shadow: var(--d3-kilau-g), var(--d3-bibir-g), var(--d3-g3);
}

/* Ikon di dalamnya: cakram kecil yang ikut menonjol. Bentuknya memang
   sudah lingkaran; di sini hanya ditambah sorotan dan bayangan. */
.hero .hero-stat-icon,
.stat-band .stat-ikon{
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.26),
    0 2px 4px rgba(0,0,0,.35),
    0 7px 13px -5px rgba(0,0,0,.40);
}

/* Angka besar di atas latar gelap: bayangannya HITAM. Sorotan putih di
   bawah huruf yang juga terang hanya membuatnya terlihat kabur. */
.stat-band .stat-angka{
  text-shadow: 0 1px 2px rgba(0,0,0,.40), 0 3px 8px rgba(0,0,0,.28);
}

/* =======================================================================
   3. Foto — benda yang duduk DI DALAM kartunya

   Kebalikan dari kartu: fotonya tidak menonjol, ia tenggelam. Bedanya
   itu yang membuat kartu terasa punya ruang di dalamnya, bukan sekadar
   gambar yang ditempel di atas persegi putih.
   ===================================================================== */

.section-light .product-card .product-visual,
.flash-sale .fsc-img,
.flash-sale .fsc-img-placeholder{
  position: relative;
  box-shadow:
    inset 0 7px 14px -10px rgba(0,0,0,.45),
    inset 0 -1px 0 rgba(33,28,22,.08);
}

/* Kilau diagonal tipis, seperti cahaya jendela pada plastik kemasan.
   Sengaja sangat samar: begitu ia terlihat sebagai "efek", ia salah. */
.section-light .product-card .product-visual::after{
  content:'';
  position:absolute; inset:0;
  background: linear-gradient(118deg,
      rgba(255,255,255,.10) 0%, rgba(255,255,255,.03) 24%, transparent 50%);
  pointer-events:none;
}

/* Label dan potongan harga melayang sedikit di atas foto */
.product-card .product-tag,
.product-card .pk-potongan,
.flash-sale .fsc-badge{
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.30),
    0 1px 2px rgba(0,0,0,.24),
    0 5px 10px -5px rgba(0,0,0,.26);
}

/* =======================================================================
   4. Tab cara seduh — sudah berupa tombol (latar arang + tepi sendiri)

   Warnanya TIDAK dicat ulang: warna aktif/tidak aktifnya datang dari
   site.css dan itulah yang membedakan keduanya. Di sini hanya ditambah
   tinggi, lalu dicabut lagi saat tab itu aktif — tab terpilih jadi tab
   yang TERTEKAN, bukan sekadar tab yang berganti warna.
   ===================================================================== */

.section-light .brew-tab{
  box-shadow:
    var(--d3-kilau-g),
    0 2px 0 rgba(0,0,0,.22),
    0 5px 10px -5px rgba(0,0,0,.30);
  transition: transform 110ms ease, box-shadow 110ms ease;
}
.section-light .brew-tab:hover{ transform: translateY(-1px); }
.section-light .brew-tab.active,
.section-light .brew-tab[aria-selected="true"]{
  transform: translateY(2px);
  box-shadow: inset 0 2px 5px rgba(0,0,0,.40);
}

/* =======================================================================
   5. Benda kecil yang berdiri sendiri

   Titik penanda pada Perjalanan adalah SATU-SATUNYA hal yang disentuh di
   bagian "Satu Garis, Satu Perjalanan": ia memang benda — bulatan
   berwarna berukuran tetap. Teks tahapnya dibiarkan terbuka seperti
   semula.
   ===================================================================== */

.journey .stage-dot{
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.45),
    0 1px 3px rgba(0,0,0,.45);
}

/* Biji kopi hiasan di Asal Usul: benda, jadi boleh punya bayangan.
   Panel teks di sebelahnya tidak. */
.origin .bean{
  filter: drop-shadow(0 5px 9px rgba(33,28,22,.28));
}

/* Stempel dan stiker hero: benda tipis yang ditempel, jadi bayangannya
   pendek dan rapat — bukan bayangan jauh seperti kartu. */
.hero .hero-stamp,
.hero .hero-sticker{
  filter: drop-shadow(0 2px 3px rgba(0,0,0,.35));
}
.hero .coffee-cup-wrap,
.hero .cup-svg{
  filter: drop-shadow(0 14px 22px rgba(0,0,0,.40));
}

/* =======================================================================
   6. Tombol — bagian yang paling terasa

   Pembulatan sudut tidak diubah: tombol situs ini memang bersudut tajam
   dan itu bagian dari gayanya. Yang ditambah hanya ketinggian.
   ===================================================================== */

.hero .btn,
.section-light .btn,
.flash-sale .btn,
.journey .btn,
.origin .btn,
.testi-strip .btn,
.cta-band .btn,
.product-card .add-btn,
.flash-sale .fsc-add-btn{
  transition: transform 110ms ease, box-shadow 110ms ease;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.22),
    0 3px 0 rgba(33,28,22,.20),        /* ini tinggi tombolnya */
    0 6px 12px -6px rgba(33,28,22,.30);
}
.hero .btn:hover,
.section-light .btn:hover,
.flash-sale .btn:hover,
.journey .btn:hover,
.origin .btn:hover,
.testi-strip .btn:hover,
.cta-band .btn:hover,
.product-card .add-btn:hover,
.flash-sale .fsc-add-btn:hover{
  transform: translateY(-2px);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.26),
    0 5px 0 rgba(33,28,22,.20),
    0 11px 20px -8px rgba(33,28,22,.34);
}
/* Ditekan: dindingnya habis dan tombolnya turun. Jarak turunnya SAMA
   dengan tinggi dinding yang hilang — kalau tidak, tombolnya terlihat
   bergeser, bukan tertekan. */
.hero .btn:active,
.section-light .btn:active,
.flash-sale .btn:active,
.journey .btn:active,
.origin .btn:active,
.testi-strip .btn:active,
.cta-band .btn:active,
.product-card .add-btn:active,
.flash-sale .fsc-add-btn:active{
  transform: translateY(3px);
  box-shadow:
    inset 0 2px 5px rgba(0,0,0,.26),
    0 1px 2px rgba(33,28,22,.18);
}

/* =======================================================================
   7. Kotak isian — pasangan dari tombol

   Satu menonjol karena ditekan, satu cekung karena menerima. Perbedaan
   itu yang membuat halaman terasa punya permukaan. Kotak isian di sini
   sudah punya tepi sendiri; yang ditambah hanya kedalamannya.
   ===================================================================== */

.section-light input[type="text"],
.section-light input[type="search"],
.section-light input[type="email"],
.section-light select,
.cta-band input,
.cta-band select{
  box-shadow: var(--d3-cekung);
  transition: box-shadow var(--d3-laju);
}
.section-light input:focus,
.section-light select:focus,
.cta-band input:focus,
.cta-band select:focus{
  box-shadow: var(--d3-cekung), 0 0 0 3px rgba(207,159,82,.28);
}

/* =======================================================================
   8. Layar kecil dan gerak
   ===================================================================== */

@media (max-width: 767px){
  :root{
    /* Kartu nyaris selebar layar; bayangan sebesar di desktop akan
       terlihat seperti kabut di tepi layar. */
    --d3-2: 0 1px 1px rgba(33,28,22,.10), 0 4px 10px -5px rgba(33,28,22,.14);
    --d3-3: 0 1px 2px rgba(33,28,22,.12), 0 8px 16px -7px rgba(33,28,22,.18);
  }
  /* Tidak ada hover di layar sentuh; yang tersisa hanyalah kartu yang
     melompat sendiri saat disentuh. */
  .section-light .product-card:hover,
  .flash-sale .flash-sale-card:hover,
  .section-light .ig-post:hover,
  .hero .badge-card:hover,
  .hero .hero-stat-card:hover,
  .stat-band .stat-kartu:hover{
    transform: none;
  }
}

@media (prefers-reduced-motion: reduce){
  .product-card, .flash-sale-card, .ig-post, .badge-card, .hero-stat-card,
  .stat-kartu, .brew-tab, .btn, .add-btn, .fsc-add-btn{
    transition: none !important;
  }
  .product-card:hover, .flash-sale-card:hover, .ig-post:hover,
  .badge-card:hover, .hero-stat-card:hover, .stat-kartu:hover,
  .btn:hover, .add-btn:hover, .fsc-add-btn:hover{
    transform: none !important;
  }
}

/* Di atas kertas, bayangan hanya jadi kotor abu-abu. */
@media print{
  *{ box-shadow:none !important; text-shadow:none !important; filter:none !important; }
}