/* Ponsel clay — kulit pengganti untuk bingkai ponsel ajd-* (aj-hero-device.css).
 *
 * Badan iPhone (rim titanium, bezel hitam, Dynamic Island, tombol kiri)
 * diganti ponsel generik dari tanah liat, senada dengan benda 3D di hero
 * (aj-hero-props.css): putih di tema terang, biru-batu cahaya bulan di tema
 * gelap. Berlaku untuk SEMUA bingkai ajd-*: hero beranda, marquee "Halaman
 * booking", etalase Fitur, dan Solusi Kecantikan.
 *
 * Yang tidak disentuh: layarnya. Bilah status, isi layar, home indicator,
 * kilau kaca, dan intro "bangun dari hitam" tetap persis sama. Geometrinya
 * juga sama (badan 466 x 982, layar 440 x 956 satuan --u), jadi rumus ukuran
 * ponsel di aj-polish.css dan aj-hero-props.css tetap berlaku.
 *
 * Berkas ini dimuat PALING AKHIR di setiap halaman, sesudah aj-fitur.css /
 * aj-showcase.css / aj-solusi.css, karena ia juga menimpa bayangan bingkai
 * versi rata di berkas-berkas itu.
 *
 * MEMBATALKAN: hapus baris <link … aj-device-clay.css> di index.html,
 * features.html, dan solusi-kecantikan.html, lalu hapus berkas ini. Tidak
 * ada berkas lain yang diubah.
 */

.ajd-device {
  /* Clay siang, dicocokkan dengan prop-*.webp: sisi terang #ececee–#f6f6f6,
     bayangan #a9aeba–#adb2be. */
  --ajk-hi: #ffffff;
  --ajk-face: #eff0f4;
  --ajk-lo: #dcdfe6;
  --ajk-side: #d3d7df;
  /* rgb tanpa alpha, dipakai dengan alpha di bayangan & kilau */
  --ajk-shade: 110 118 140;
  --ajk-light: 255 255 255;
  --ajk-seam: 39 53 74;
  --ajk-seam-a: 0.16;
  /* Bayangan jatuh: tidak ada di hero (lihat .ajd-device-frame di
     aj-hero-device.css), ada di versi rata — diisi per pemakaian di bawah. */
  --ajk-drop: 0 0 #0000;
}

/* Clay malam, dicocokkan dengan prop-*-dark.webp: sisi terang #6f7c9c–#7380a0,
   tengah #56607a, bayangan #3a4863. */
.uc-dark .ajd-device {
  --ajk-hi: #7b88a9;
  --ajk-face: #5e6986;
  --ajk-lo: #4a5572;
  --ajk-side: #4b5673;
  --ajk-shade: 14 19 32;
  --ajk-light: 150 168 210;
  --ajk-seam: 6 8 14;
  --ajk-seam-a: 0.55;
}

/* Bayangan jatuh versi rata — nilainya sama dengan yang ditimpa di
   aj-fitur.css, aj-showcase.css, dan aj-solusi.css. */
.ajf-phone,
.ajsl-dev {
  --ajk-drop: 0 30px 50px -32px rgba(12, 32, 74, 0.55);
}

.uc-dark .ajf-phone,
.uc-dark .ajsl-dev {
  --ajk-drop: 0 30px 50px -30px rgba(0, 0, 0, 0.9);
}

.ajbp-phone {
  --ajk-drop: 0 26px 40px -30px rgba(12, 32, 74, 0.55);
}

.uc-dark .ajbp-phone {
  --ajk-drop: 0 26px 40px -28px rgba(0, 0, 0, 0.9);
}

/* Badan: satu lempeng clay. Rim 3 + bezel 10 kini sama-sama tanah liat, jadi
   bezelnya dibuat tembus pandang. Cahayanya dari kiri atas seperti benda di
   hero: tepi membulat kiri-atas menangkap cahaya, kanan-bawah membelakanginya.
   Semua bayangannya inset, di dalam kotak bingkai, jadi di hero tetap tidak
   ada yang bisa terpotong dasar seksi. */
.ajd-device-frame,
.ajf-phone .ajd-device-frame,
.ajbp-phone .ajd-device-frame,
.ajsl-dev .ajd-device-frame,
.uc-dark .ajf-phone .ajd-device-frame,
.uc-dark .ajbp-phone .ajd-device-frame,
.uc-dark .ajsl-dev .ajd-device-frame {
  background: linear-gradient(155deg, var(--ajk-hi) 0%, var(--ajk-face) 32%, var(--ajk-face) 64%, var(--ajk-lo) 100%);
  box-shadow:
    inset calc(2.5 * var(--u)) calc(3 * var(--u)) calc(3 * var(--u)) calc(-0.5 * var(--u)) rgb(var(--ajk-light) / 0.95),
    inset calc(-3 * var(--u)) calc(-4 * var(--u)) calc(6 * var(--u)) calc(-1 * var(--u)) rgb(var(--ajk-shade) / 0.42),
    inset 0 0 0 calc(0.75 * var(--u)) rgb(var(--ajk-shade) / 0.34),
    var(--ajk-drop);
}

.ajd-device-bezel {
  background: transparent;
}

/* Layar terbenam sedikit di badan: garis sambungan tipis, lalu dinding
   ceruknya — sisi atas-kiri membelakangi cahaya (gelap), bawah-kanan
   menghadapnya (terang). Semuanya di luar kotak layar, di atas clay. */
.ajd-device-screen {
  box-shadow:
    0 0 0 calc(1.25 * var(--u)) rgb(var(--ajk-seam) / var(--ajk-seam-a)),
    calc(-1 * var(--u)) calc(-1.5 * var(--u)) calc(2 * var(--u)) rgb(var(--ajk-shade) / 0.3),
    calc(1 * var(--u)) calc(1.5 * var(--u)) calc(2 * var(--u)) rgb(var(--ajk-light) / 0.9);
}

/* Tanpa notch: pulau dan lensa kamera depannya (::after) hilang. Bilah
   statusnya dibiarkan apa adanya. */
.ajd-island {
  display: none;
}

/* Tebal badan di hero: lapisan sisinya ikut jadi clay. Gradiennya searah
   cahaya, dan lapisan belakang meredup lebih pelan daripada logam supaya
   sisinya tetap terbaca tanah liat, bukan abu-abu. */
.ajd-device-edge {
  background: linear-gradient(155deg, var(--ajk-face) 0%, var(--ajk-side) 45%, var(--ajk-lo) 100%);
  filter: brightness(calc(1 - var(--i) * 0.03));
}

/* Tombol generik: volume + daya di kanan saja. Tiga tombol di kiri (tombol
   aksi + dua volume) itu ciri iPhone. */
.ajd-device-btn.is-action,
.ajd-device-btn.is-vol-down {
  display: none;
}

.ajd-device-btn.is-vol-up,
.ajd-device-btn.is-power {
  right: calc(-3 * var(--u));
  left: auto;
  border-radius: 0 calc(2 * var(--u)) calc(2 * var(--u)) 0;
  background: linear-gradient(90deg, var(--ajk-side), var(--ajk-lo));
}

.ajd-device-btn.is-vol-up {
  top: calc(230 * var(--u));
  height: calc(118 * var(--u));
}

.ajd-device-btn.is-power {
  top: calc(378 * var(--u));
  height: calc(70 * var(--u));
}