/* [17 Okt 2026] Footer desktop v2 (layout/footer-desktop.blade.php). Mode terang: latar terang lembut; mode gelap
   (body.darkmode-page): latar navy gelap.
   Semua kelas berprefiks dex-ft-. Hanya >= 992px ([17 Okt 2026, tablet] dulu 768); di HP & tablet potret footer lama (.bg-foot-mobile) + tabbar tetap dipakai. */
.dex-ft {
	/* terang (bawaan) */
	--ft-bg: #F1F5F9;
	--ft-bg-2: #FFFFFF;
	--ft-garis: rgba(15, 23, 42, .08);
	--ft-teks: #0F172A;
	--ft-teks-2: #475569;
	--ft-teks-3: #64748B;
	--ft-aksen: #2563EB;
	--ft-naik: #059669;
	--ft-turun: #DC2626;
	--ft-hover: rgba(15, 23, 42, .05);
	--ft-kartu: #FFFFFF;
	--ft-risiko-bg: #FFFBEB;
	--ft-risiko-garis: #FDE68A;
	--ft-risiko-teks: #92400E;
	--ft-risiko-ikon: #D97706;
	display: none;
	margin-top: 32px;
	background: var(--ft-bg);
	color: var(--ft-teks-2);
	font-family: 'Plus Jakarta Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
	font-size: 13px;
	line-height: 1.55;
}
body.darkmode-page .dex-ft {
	--ft-bg: #0B1220;
	--ft-bg-2: #0F172A;
	--ft-garis: rgba(148, 163, 184, .16);
	--ft-teks: #E2E8F0;
	--ft-teks-2: #94A3B8;
	--ft-teks-3: #64748B;
	--ft-aksen: #60A5FA;
	--ft-naik: #34D399;
	--ft-turun: #F87171;
	--ft-hover: rgba(148, 163, 184, .12);
	--ft-kartu: rgba(148, 163, 184, .06);
	--ft-risiko-bg: rgba(251, 191, 36, .06);
	--ft-risiko-garis: rgba(251, 191, 36, .22);
	--ft-risiko-teks: #FDE68A;
	--ft-risiko-ikon: #FCD34D;
}
.dex-ft { border-top: 1px solid var(--ft-garis); }
.dex-ft .dex-ft-gelap, body.darkmode-page .dex-ft .dex-ft-terang { display: none !important; }
body.darkmode-page .dex-ft .dex-ft-gelap { display: block !important; }
@media (min-width: 992px) { /* [17 Okt 2026, tablet] dulu 768: tablet/iPad potret (768-991) kini ikut tampilan HP (footer lama .bg-foot-mobile) */
	.dex-ft { display: block; }
	/* footer lama desktop disembunyikan hanya bila footer baru ada */
	.dex-ft ~ .bg-foot.view-desktop,
	body:has(.dex-ft) .bg-foot.view-desktop { display: none !important; }
	body.dex-ft-aktif .bg-foot.view-desktop { display: none !important; }
	/* tombol scroll-to-top lama digantikan tombol di footer + tombol melayang baru */
	body.dex-ft-aktif .btn-scroll-to-top { display: none !important; }
}
.dex-ft a { color: inherit; text-decoration: none; }
.dex-ft-wadah { max-width: 1440px; margin: 0 auto; padding: 0 32px; }

/* --- pita harga --- */
.dex-ft-pita { background: var(--ft-bg-2); border-bottom: 1px solid var(--ft-garis); }
.dex-ft-pita-isi { display: flex; align-items: center; gap: 18px; min-height: 48px; }
.dex-ft-langsung { display: inline-flex; flex: 0 0 auto; align-items: center; gap: 8px; color: var(--ft-teks); font-weight: 700; white-space: nowrap; }
.dex-ft-titik { position: relative; width: 8px; height: 8px; border-radius: 50%; background: var(--ft-naik); }
.dex-ft-titik::after { content: ''; position: absolute; inset: -4px; border-radius: 50%; border: 2px solid var(--ft-naik); opacity: .5; animation: dex-ft-denyut 2s ease-out infinite; }
@keyframes dex-ft-denyut { from { transform: scale(.6); opacity: .6; } to { transform: scale(1.6); opacity: 0; } }
.dex-ft-ticker { display: flex; flex: 1 1 auto; align-items: center; gap: 6px; min-width: 0; overflow: hidden; -webkit-mask-image: linear-gradient(90deg, #000 92%, transparent); mask-image: linear-gradient(90deg, #000 92%, transparent); }
.dex-ft-ticker-kosong { color: var(--ft-teks-3); }
.dex-ft-tk { display: inline-flex; flex: 0 0 auto; align-items: center; gap: 8px; padding: 6px 10px; border-radius: 10px; color: var(--ft-teks); white-space: nowrap; transition: background .15s ease; }
.dex-ft-tk:hover, .dex-ft-tk:focus-visible { background: var(--ft-hover); outline: none; }
.dex-ft-tk img { width: 18px; height: 18px; border-radius: 50%; background: var(--ft-hover); }
.dex-ft-tk b { font-weight: 700; }
.dex-ft-tk .h { font-variant-numeric: tabular-nums; color: var(--ft-teks); }
.dex-ft-tk .p { font-size: 12px; font-weight: 700; font-variant-numeric: tabular-nums; }
.dex-ft-tk .p.naik { color: var(--ft-naik); }
.dex-ft-tk .p.turun { color: var(--ft-turun); }
.dex-ft-tk .p.datar { color: var(--ft-teks-3); }
.dex-ft-tk.kedip-naik .h { color: var(--ft-naik); }
.dex-ft-tk.kedip-turun .h { color: var(--ft-turun); }
.dex-ft-jam { flex: 0 0 auto; color: var(--ft-teks-3); font-variant-numeric: tabular-nums; white-space: nowrap; }
.dex-ft-pita-link { flex: 0 0 auto; color: var(--ft-aksen) !important; font-weight: 700; white-space: nowrap; }
.dex-ft-pita-link:hover { text-decoration: underline; }

/* --- utama --- */
.dex-ft-utama { display: grid; grid-template-columns: minmax(280px, 1.6fr) repeat(4, minmax(130px, 1fr)); gap: 32px; padding-top: 44px; padding-bottom: 36px; }
.dex-ft-logo img { display: block; height: 40px; width: auto; margin: -4px 0 0 -6px; }
.dex-ft-tagline { max-width: 340px; margin: 12px 0 16px; color: var(--ft-teks-2); }
.dex-ft-alamat { display: flex; flex-direction: column; gap: 2px; margin: 0 0 14px; font-style: normal; color: var(--ft-teks-3); font-size: 12.5px; }
.dex-ft-alamat b { color: var(--ft-teks); font-weight: 700; font-size: 13px; }
.dex-ft-kontak { display: flex; flex-direction: column; gap: 6px; margin-bottom: 18px; }
.dex-ft-kontak a { display: inline-flex; align-items: center; gap: 8px; width: fit-content; color: var(--ft-teks-2); transition: color .15s ease; }
.dex-ft-kontak a:hover { color: var(--ft-teks); }
.dex-ft-kontak i { width: 16px; color: var(--ft-aksen); text-align: center; }
.dex-ft-aplikasi { display: flex; flex-wrap: wrap; gap: 10px; }
.dex-ft-toko { display: inline-flex; align-items: center; gap: 10px; padding: 8px 14px 8px 12px; border: 1px solid var(--ft-garis); border-radius: 12px; background: var(--ft-kartu); color: var(--ft-teks) !important; transition: background .15s ease, border-color .15s ease, transform .15s ease; }
.dex-ft-toko:hover, .dex-ft-toko:focus-visible { border-color: var(--ft-aksen); background: var(--ft-hover); transform: translateY(-1px); outline: none; }
.dex-ft-toko i { font-size: 22px; }
.dex-ft-toko span { display: flex; flex-direction: column; line-height: 1.15; }
.dex-ft-toko small { color: var(--ft-teks-2); font-size: 10.5px; }
.dex-ft-toko b { font-size: 14px; font-weight: 700; }

.dex-ft-kolom { display: flex; flex-direction: column; gap: 10px; }
.dex-ft-kolom h4 { margin: 4px 0 6px; color: var(--ft-teks) !important; font-size: 13px; font-weight: 800; letter-spacing: .02em; text-transform: uppercase; }
.dex-ft-kolom a { position: relative; width: fit-content; color: var(--ft-teks-2); transition: color .15s ease, transform .15s ease; }
.dex-ft-kolom a:hover, .dex-ft-kolom a:focus-visible { color: var(--ft-teks); transform: translateX(2px); outline: none; }
.dex-ft-lencana { display: inline-block; margin-left: 4px; padding: 1px 7px; border-radius: 999px; background: color-mix(in srgb, var(--ft-naik) 14%, transparent); color: var(--ft-naik); font-size: 10.5px; font-weight: 700; vertical-align: 1px; }

/* --- komunitas --- */
.dex-ft-komunitas { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 18px; padding-top: 22px; padding-bottom: 22px; border-top: 1px solid var(--ft-garis); }
.dex-ft-label { margin-right: 12px; color: var(--ft-teks-3); font-size: 12px; font-weight: 600; }
.dex-ft-sosial, .dex-ft-terdaftar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.dex-ft-sosial-ikon { display: flex; gap: 8px; }
.dex-ft-sos { display: inline-grid; place-items: center; width: 36px; height: 36px; border: 1px solid var(--ft-garis); border-radius: 10px; background: var(--ft-kartu); color: var(--ft-teks-2) !important; font-size: 15px; transition: background .15s ease, color .15s ease, border-color .15s ease, transform .15s ease; }
.dex-ft-sos:hover, .dex-ft-sos:focus-visible { transform: translateY(-2px); color: #fff !important; border-color: transparent; outline: none; }
.dex-ft-sos-yt:hover, .dex-ft-sos-yt:focus-visible { background: #FF0000; }
.dex-ft-sos-tg:hover, .dex-ft-sos-tg:focus-visible { background: #229ED9; }
.dex-ft-sos-ig:hover, .dex-ft-sos-ig:focus-visible { background: linear-gradient(45deg, #F58529, #DD2A7B, #8134AF); }
.dex-ft-sos-x:hover, .dex-ft-sos-x:focus-visible { background: #1D9BF0; }
.dex-ft-sos-fb:hover, .dex-ft-sos-fb:focus-visible { background: #1877F2; }
.dex-ft-sos-sp:hover, .dex-ft-sos-sp:focus-visible { background: #1DB954; }
.dex-ft-sos-tt:hover, .dex-ft-sos-tt:focus-visible { background: #111; box-shadow: -2px -2px 0 #25F4EE, 2px 2px 0 #FE2C55; }
.dex-ft-mitra { display: inline-flex; align-items: center; padding: 6px 12px; border: 1px solid var(--ft-garis); border-radius: 10px; background: var(--ft-kartu); opacity: .85; transition: opacity .15s ease, border-color .15s ease; }
.dex-ft-mitra:hover, .dex-ft-mitra:focus-visible { opacity: 1; border-color: var(--ft-aksen); outline: none; }
.dex-ft-mitra img { display: block; height: 20px; width: auto; }

/* --- bawah --- */
.dex-ft-bawah { padding-top: 18px; padding-bottom: 22px; border-top: 1px solid var(--ft-garis); }
.dex-ft-risiko { margin-bottom: 14px; border: 1px solid var(--ft-risiko-garis); border-radius: 12px; background: var(--ft-risiko-bg); }
.dex-ft-risiko summary { display: flex; align-items: center; gap: 10px; padding: 10px 14px; color: var(--ft-risiko-ikon); cursor: pointer; list-style: none; }
.dex-ft-risiko summary::-webkit-details-marker { display: none; }
.dex-ft-risiko summary span:first-of-type { flex: 1 1 auto; color: var(--ft-risiko-teks); }
.dex-ft-risiko-buka { flex: 0 0 auto; color: var(--ft-risiko-ikon); font-weight: 700; font-size: 12px; }
.dex-ft-risiko[open] .dex-ft-risiko-buka { opacity: .6; }
.dex-ft-risiko p { margin: 0; padding: 0 14px 12px 40px; color: var(--ft-teks-2); font-size: 12px; }
.dex-ft-hak { display: flex; align-items: center; justify-content: space-between; gap: 12px; color: var(--ft-teks-3); font-size: 12px; }
.dex-ft-atas { display: inline-flex; align-items: center; gap: 8px; padding: 7px 12px; border: 1px solid var(--ft-garis); border-radius: 999px; background: var(--ft-kartu); color: var(--ft-teks-2); font: inherit; font-weight: 600; cursor: pointer; transition: color .15s ease, border-color .15s ease; }
.dex-ft-atas:hover, .dex-ft-atas:focus-visible { color: var(--ft-teks); border-color: var(--ft-aksen); outline: none; }

/* tombol melayang kembali ke atas (muncul setelah gulir) */
.dex-ft-melayang { position: fixed; right: 24px; bottom: 24px; z-index: 1030; display: none; place-items: center; width: 44px; height: 44px; border: 0; border-radius: 50%; background: #2563EB; color: #fff; box-shadow: 0 8px 24px rgba(37, 99, 235, .35); cursor: pointer; opacity: 0; transform: translateY(8px); transition: opacity .2s ease, transform .2s ease; }
.dex-ft-melayang.tampil { opacity: 1; transform: none; }
@media (min-width: 992px) { .dex-ft-melayang { display: grid; } .dex-ft-melayang:not(.tampil) { pointer-events: none; } }

/* responsif */
@media (max-width: 1199px) {
	.dex-ft-utama { grid-template-columns: repeat(4, minmax(0, 1fr)); }
	.dex-ft-merek { grid-column: 1 / -1; display: grid; grid-template-columns: auto 1fr; column-gap: 32px; align-items: start; }
	.dex-ft-merek .dex-ft-logo, .dex-ft-merek .dex-ft-tagline, .dex-ft-merek .dex-ft-alamat { grid-column: 1; }
	.dex-ft-merek .dex-ft-kontak, .dex-ft-merek .dex-ft-aplikasi { grid-column: 2; }
	.dex-ft-merek .dex-ft-kontak { grid-row: 1 / span 2; align-self: center; }
	.dex-ft-jam { display: none; }
}
@media (max-width: 991px) {
	.dex-ft-wadah { padding: 0 20px; }
	.dex-ft-utama { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.dex-ft-merek { display: block; }
	.dex-ft-langsung span:last-child { display: none; }
}
/* [17 Okt 2026, tablet] 768-991: footer v2 tidak tampil; footer lama halaman (.bg-foot / .bg-foot-mobile) memakai tata
   letak HP: kolom Bootstrap col-md-* (aktif >= 768px) dibuat penuh agar alamat/tautan tidak terjepit di kolom sempit. */
@media (min-width: 768px) and (max-width: 991px) {
	.bg-foot [class*="col-md-"], .bg-foot-mobile [class*="col-md-"] { flex: 0 0 100%; width: 100%; max-width: 100%; }
	/* layout main: tema lama memberi #footer margin-left 220px (ruang sidebar) dan .container 750px (Bootstrap 3) mulai 768px
	   -> footer HP menjorok & membuat halaman bisa digeser ke samping; di HP keduanya tidak berlaku */
	.bg-foot-mobile #footer { margin-left: 0 !important; }
	.bg-foot-mobile .container { width: auto; max-width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
	.dex-ft *, .dex-ft *::after, .dex-ft-melayang { animation: none !important; transition: none !important; }
}