/* =====================================================================
   Tampilan mobile bergaya aplikasi  --  [MOBILE 10 Sep 2026]

   Menyalin bahasa desain aplikasi React Native di APP-DEX-NEW (dex-pro
   1.3.42) ke web, dan HANYA berlaku di bawah 768px. Di atas itu tidak
   satu pun aturan di berkas ini menyala, jadi tampilan desktop yang ada
   sekarang tidak tersentuh sama sekali.

   Nilai di bawah bukan tebakan -- diambil dari:
     APP-DEX-NEW/assets/Colors.js      (palet)
     APP-DEX-NEW/config/Styles.js      (skala teks, radius, bayangan)
     APP-DEX-NEW/components/AppTabs.js (tab bar bawah)
     APP-DEX-NEW/screens/Screen1.js    (gradien header beranda)

   Fontnya sudah sama sejak plus-jakarta-sans.css dipasang: aplikasi
   memanggil custom-font / custom-medium / custom-regular, dan ketiga
   alias itu kini juga ada di web.
   ===================================================================== */

:root {
	/* -- palet, dari assets/Colors.js -- */
	--dexapp-blue: #2563EB;
	--dexapp-blue-2: #3B82F6;
	--dexapp-blue-light: #60A5FA;
	--dexapp-blue-soft: #EFF6FF;
	--dexapp-navy: #0F172A;
	--dexapp-navy-2: #1E293B;
	--dexapp-navy-mid: #1E3A8A;
	--dexapp-text: #0F172A;
	--dexapp-text-2: #64748B;
	--dexapp-muted: #94A3B8;
	--dexapp-border: #E2E8F0;
	--dexapp-border-subtle: rgba(0, 0, 0, .04);
	--dexapp-page-bg: #F8FAFC;
	--dexapp-fill: #F0F2F5;
	--dexapp-surface: #fff;
	--dexapp-green: #10B981;
	--dexapp-red: #EF4444;
	--dexapp-yellow: #F59E0B;

	/* -- bentuk, dari config/Styles.js -- */
	--dexapp-radius-card: 16px;
	--dexapp-radius-tile: 12px;
	--dexapp-shadow-card: 0 2px 12px rgba(15, 23, 42, .06);

	/* Tinggi tab bar. Aplikasi memakai 10% tinggi layar; di web dipatok
	   piksel supaya tidak ikut berubah saat bilah alamat peramban
	   muncul-hilang -- itu yang bikin layout "melompat" saat digulir. */
	--dexapp-tabbar-h: 60px;
}

/* Tab bar hanya untuk layar sempit. Aturan ini WAJIB di luar @media:
   tanpa display:none di sini, <nav> tetap elemen block biasa dan ikut
   tampil di desktop -- tertangkap saat pengujian di 1440px. */
#dexapp-tabbar {
	display: none;
}

@media (max-width: 767px) {

	/* --- 1. Dasar halaman ------------------------------------------- */
	body {
		background: var(--dexapp-page-bg);
	}
	.darkmode body {
		background: var(--dexapp-navy);
	}
	/* design-v2.css paints .content with --canvas, which covers the body background. */
	#page-container:not(.darkmode) #content.content {
		background: var(--dexapp-page-bg);
	}

	/* Ruang di bawah konten supaya baris terakhir tidak tertutup tab bar.
	   env(safe-area-inset-bottom) menambah jatah untuk garis gestur
	   iPhone; peramban yang tidak mengenalnya memakai 0px. */
	#content.content {
		padding-bottom: calc(var(--dexapp-tabbar-h) + env(safe-area-inset-bottom, 0px) + 16px);
	}

	/* --- 2. Tab bar bawah ------------------------------------------- */
	#dexapp-tabbar {
		display: flex;
		position: fixed;
		z-index: 1030;          /* di atas konten, di bawah modal Bootstrap (1040) */
		right: 0;
		bottom: 0;
		left: 0;
		align-items: flex-end;
		justify-content: space-around;
		height: calc(var(--dexapp-tabbar-h) + env(safe-area-inset-bottom, 0px));
		padding-bottom: env(safe-area-inset-bottom, 0px);
		border-top: 1px solid var(--dexapp-border-subtle);
		background: rgba(255, 255, 255, .97);
		box-shadow: 0 -2px 8px rgba(0, 0, 0, .04);
	}
	.darkmode #dexapp-tabbar {
		border-top-color: rgba(255, 255, 255, .06);
		background: var(--dexapp-navy);
	}

	#dexapp-tabbar .dexapp-tab {
		display: flex;
		flex: 1 1 0;
		min-width: 0;           /* tanpa ini label panjang memaksa tab melebar */
		height: var(--dexapp-tabbar-h);
		flex-direction: column;
		align-items: center;
		justify-content: center;
		gap: 3px;
		padding: 0 2px;
		color: var(--dexapp-muted);
		text-decoration: none;
	}
	#dexapp-tabbar .dexapp-tab:hover,
	#dexapp-tabbar .dexapp-tab:focus {
		color: var(--dexapp-muted);
		text-decoration: none;
	}
	#dexapp-tabbar .dexapp-tab i {
		font-size: 19px;
		line-height: 1;
	}
	#dexapp-tabbar .dexapp-tab span {
		overflow: hidden;
		max-width: 100%;
		font-family: 'custom-medium', 'Plus Jakarta Sans', sans-serif;
		font-size: 10px;
		line-height: 1.2;
		text-overflow: ellipsis;
		white-space: nowrap;
	}
	#dexapp-tabbar .dexapp-tab.is-active,
	#dexapp-tabbar .dexapp-tab.is-active:hover,
	#dexapp-tabbar .dexapp-tab.is-active:focus {
		color: var(--dexapp-blue);
	}

	/* Tab tengah (Trade) menonjol ke atas, persis seperti di aplikasi:
	   kotak membulat berisi logo, terangkat, dengan bayangan biru. */
	/* Badge tab Trade: kotak membulat PUTIH bergaris biru, sesuai tangkapan
	   layar aplikasi -- bukan tile biru pekat seperti versi pertama saya. */
	#dexapp-tabbar .dexapp-tab-trade .dexapp-trade-badge {
		display: flex;
		width: 46px;
		height: 46px;
		align-items: center;
		justify-content: center;
		margin-top: -18px;
		padding: 6px;
		border: 1px solid rgba(37, 99, 235, .45);
		border-radius: 14px;
		background: #fff;
		box-shadow: 0 4px 12px rgba(37, 99, 235, .28);
		overflow: hidden;
	}
	.darkmode #dexapp-tabbar .dexapp-tab-trade .dexapp-trade-badge {
		background: #fff;
	}
	#dexapp-tabbar .dexapp-tab-trade.is-active .dexapp-trade-badge {
		border-width: 2px;
		border-color: var(--dexapp-blue-light);
		box-shadow: 0 6px 14px rgba(37, 99, 235, .55);
	}
	#dexapp-tabbar .dexapp-tab-trade .dexapp-trade-badge img {
		width: 100%;
		height: 100%;
		/* contain, bukan cover: logo ini bujur sangkar dan harus utuh.
		   cover akan memotong tepinya. */
		object-fit: contain;
	}

	/* --- 3. Primitif bergaya aplikasi -------------------------------- */
	/* Dipakai bertahap oleh tiap halaman; tidak ada yang berubah sampai
	   kelasnya benar-benar dipasang di markup. */
	.dexapp-card {
		padding: 16px;
		border: 0 none;
		border-radius: var(--dexapp-radius-card);
		background: var(--dexapp-surface);
		box-shadow: var(--dexapp-shadow-card);
	}
	.darkmode .dexapp-card {
		background: var(--dexapp-navy-2);
	}

	.dexapp-hero {
		padding: 18px 16px 22px;
		border-radius: 0 0 20px 20px;
		background: linear-gradient(180deg, var(--dexapp-navy) 0%, var(--dexapp-navy-mid) 50%, var(--dexapp-blue) 100%);
		color: #fff;
	}

	.dexapp-quick {
		display: flex;
		justify-content: space-between;
		gap: 8px;
	}
	.dexapp-quick > a {
		display: flex;
		flex: 1 1 0;
		min-width: 0;
		flex-direction: column;
		align-items: center;
		gap: 6px;
		color: inherit;
		text-decoration: none;
	}
	.dexapp-quick .dexapp-quick-tile {
		display: flex;
		width: 48px;
		height: 48px;
		align-items: center;
		justify-content: center;
		border-radius: var(--dexapp-radius-card);
		background: rgba(255, 255, 255, .1);
		font-size: 22px;
	}
	.dexapp-quick span {
		font-family: 'custom-medium', 'Plus Jakarta Sans', sans-serif;
		font-size: 11px;
		text-align: center;
	}
}

/* Layar sangat sempit: label tab dikecilkan sedikit supaya tetap satu
   baris dan tidak terpotong elipsis. */
@media (max-width: 359px) {
	#dexapp-tabbar .dexapp-tab span {
		font-size: 9px;
	}
	#dexapp-tabbar .dexapp-tab i {
		font-size: 17px;
	}
}


/* =====================================================================
   TAHAP 1-4  --  penerapan per halaman
   [MOBILE 10 Sep 2026]

   Semua selektor di bawah diawali #page-container. Itu bukan hiasan:
   @yield('style') milik tiap halaman dirender SETELAH </head>, jadi blok
   <style> halaman dimuat belakangan dan menang atas berkas ini pada
   spesifisitas yang sama. Satu id di depan (1,x,y) mengalahkan aturan
   halaman yang hanya memakai class -- tanpa perlu !important sama sekali.
   ===================================================================== */

@media (max-width: 767px) {

	/* --- Umum: panel jadi kartu ala aplikasi ------------------------ */
	#page-container .panel,
	#page-container .widget.widget-stats {
		border: 0 none;
		border-radius: var(--dexapp-radius-card);
		box-shadow: var(--dexapp-shadow-card);
	}

	/* =================================================================
	   TAHAP 1  --  Beranda
	   Kartu saldo jadi hero gradien, tombolnya jadi baris aksi cepat.
	   ================================================================= */
	/* .widget ikut ditulis supaya spesifisitasnya (1,2,0) menyamai aturan
	   umum '#page-container .widget.widget-stats' di atas -- kalau hanya
	   .dexapp-balance-widget (1,1,0), radius 16px milik aturan umum yang
	   menang dan hero kehilangan sudut 20px-nya. Tertangkap saat uji. */
	#page-container .widget.dexapp-balance-widget {
		padding: 18px 16px 14px;
		border: 0 none;
		border-radius: 20px;
		background: linear-gradient(180deg, var(--dexapp-navy) 0%, var(--dexapp-navy-mid) 50%, var(--dexapp-blue) 100%);
		box-shadow: 0 8px 20px rgba(15, 23, 42, .18);
		color: #fff;
	}
	#page-container .widget.dexapp-balance-widget .widget-title,
	#page-container .widget.dexapp-balance-widget .widget-title span,
	#page-container .widget.dexapp-balance-widget .small-est,
	#page-container .widget.dexapp-balance-widget .balance,
	#page-container .widget.dexapp-balance-widget .currency {
		color: #fff;
	}
	#page-container .widget.dexapp-balance-widget .small-est {
		opacity: .75;
	}
	#page-container .widget.dexapp-balance-widget .balance {
		font-family: 'custom-font', 'Plus Jakarta Sans', sans-serif;
		font-size: 26px;
	}

	/* Tombol Show Balance jadi pil kaca, seperti tile di header gradien
	   aplikasi (rgba putih 0.1 di Screen1.js). */
	#page-container .widget.dexapp-balance-widget #balance-visibility {
		padding: 6px 14px;
		border: 1px solid rgba(255, 255, 255, .18);
		border-radius: 999px;
		background: rgba(255, 255, 255, .12);
		color: #fff;
		font-size: 12px;
	}

	/* Deposit / Tarik / Riwayat jadi tiga aksi cepat sejajar.
	   #wd-button memuat dua tautan, saudaranya satu -- flex 2:1 membuat
	   ketiganya berakhir sama lebar. */
	#page-container .widget.dexapp-balance-widget #wd-button-row {
		display: flex;
		align-items: stretch;
		margin: 14px 0 0;
		gap: 0;
	}
	#page-container .widget.dexapp-balance-widget #wd-button {
		display: flex;
		flex: 2 1 0;
		min-width: 0;
		gap: 0;
	}
	#page-container .widget.dexapp-balance-widget #wd-button-row > div:last-child {
		display: flex;
		flex: 1 1 0;
		min-width: 0;
	}
	#page-container .widget.dexapp-balance-widget #wd-button-row a {
		display: flex;
		flex: 1 1 0;
		min-width: 0;
		flex-direction: column;
		align-items: center;
		justify-content: flex-start;
		gap: 6px;
		padding: 4px 2px;
		border: 0 none;
		background: none;
		box-shadow: none;
		color: #fff;
		font-family: 'custom-medium', 'Plus Jakarta Sans', sans-serif;
		font-size: 11px;
		line-height: 1.25;
		text-align: center;
		white-space: normal;
	}
	/* Tile ikon dibuat lewat ::before supaya markup tidak perlu diubah.
	   FontAwesome sengaja TIDAK ikut dibajak plus-jakarta-sans.css, jadi
	   glifnya tetap keluar sebagai ikon, bukan huruf. */
	#page-container .widget.dexapp-balance-widget #wd-button-row a::before {
		display: flex;
		width: 42px;
		height: 42px;
		align-items: center;
		justify-content: center;
		border-radius: var(--dexapp-radius-card);
		background: rgba(255, 255, 255, .12);
		font-family: FontAwesome;
		font-size: 17px;
		font-weight: normal;
	}
	#page-container .widget.dexapp-balance-widget #wd-button > a:first-child::before  { content: "\f063"; }
	#page-container .widget.dexapp-balance-widget #wd-button > a:nth-child(2)::before { content: "\f062"; }
	#page-container .widget.dexapp-balance-widget #wd-button-row > div:last-child a::before { content: "\f1da"; }

	/* pull-right milik Bootstrap tidak berlaku di dalam flex, tapi
	   float-nya tetap ada di markup -- dinolkan supaya tidak menyisakan
	   perilaku aneh bila kelasnya kelak dipakai ulang. */
	#page-container .widget.dexapp-balance-widget #wd-button-row .pull-right {
		float: none;
	}

	/* [MOBILE 11 Sep 2026] Blok TAHAP 2 lama dibuang; digantikan blok
	   Market baru di bawah yang menyusun barisnya dengan grid. */

		/* [MOBILE 11 Sep 2026] Blok TAHAP 3 yang lama dibuang dari sini.
	   Isinya menyembunyikan kolom 2, 3, dan 4 dari #assets-table. Kolom 2
	   adalah JUMLAH aset -- justru angka utama yang harus tampil di layar
	   Wallet aplikasi. Aturan itu tetap berlaku diam-diam setelah tata
	   letak grid dipasang, sehingga jumlahnya hilang sementara estimasi
	   rupiahnya tetap ada. Penggantinya ada di blok Wallet di bawah, yang
	   menyembunyikan kolom 3, 4, dan 6 saja. */

	/* =================================================================
	   TAHAP 4  --  Akun
	   profile adalah halaman formulir, bukan daftar menu seperti tab
	   Account di aplikasi. Yang bisa disamakan tanpa membongkar markup
	   adalah bahasa visualnya: panel jadi kartu, judul memakai skala teks
	   aplikasi, input dibulatkan.
	   ================================================================= */
	#page-container .panel > .panel-heading {
		border-radius: var(--dexapp-radius-card) var(--dexapp-radius-card) 0 0;
		font-family: 'custom-medium', 'Plus Jakarta Sans', sans-serif;
	}
	#page-container .form-control {
		height: auto;
		padding: 10px 12px;
		border-color: var(--dexapp-border);
		border-radius: 10px;
	}
	/*  bootstrap-select menyalin kelas <select> aslinya -- termasuk
	    .form-control -- ke <div> pembungkus yang dibuatnya, padahal kontrol
	    yang sebenarnya adalah <button> di dalamnya. Aturan di atas karena itu
	    memberi padding pada pembungkusnya: pembungkus menjadi 54px sementara
	    tombolnya tetap 34px dan duduk masuk ke dalam, sehingga tingginya tidak
	    sejajar dengan kolom isian lain dan barisnya saling bertindih.

	    Padding-nya dipindahkan ke tombolnya. Selektor ini (1,2,0) lebih kuat
	    dari aturan di atas (1,1,0), sekaligus lebih kuat dari
	    .bootstrap-select.form-control { padding: 0 } milik pluginnya.  */
	#page-container .bootstrap-select.form-control {
		height: auto;
		padding: 0;
		border: 0;
	}
	#page-container .bootstrap-select.form-control > .btn {
		height: auto;
		padding: 10px 12px;
		border-color: var(--dexapp-border);
		border-radius: 10px;
	}
	#page-container .btn {
		border-radius: 10px;
	}
	#page-container .widget.dexapp-balance-widget .btn,
	#page-container #dexapp-tabbar .btn {
		border-radius: inherit;
	}
}


/* =====================================================================
   TAHAP 5  --  Navigasi persis aplikasi
   [MOBILE 10 Sep 2026]

   Di bawah 768px header atas dan sidebar disembunyikan seluruhnya.
   Navigasi sepenuhnya pindah ke tab bar bawah, seperti di aplikasi.

   Tab Account menuju halaman /account yang hanya memuat menu sesuai
   desain aplikasi; tautan header/sidebar lain tidak punya jalan masuk
   dari tab bar.
   ===================================================================== */

@media (max-width: 767px) {

	#page-container > #header.header,
	#page-container > #sidebar.sidebar,
	#page-container > .sidebar-bg {
		display: none;
	}

	/* Kelas page-header-fixed milik template menyisipkan padding-top
	   setinggi header. Headernya sudah tidak ada, jadi padding itu ikut
	   dinolkan -- kalau tidak, ada pita kosong di puncak tiap halaman. */
	/* [FIX 11 Sep 2026] Nol, bukan 16px. Header disembunyikan di SEMUA
	   halaman mobile, jadi tidak ada satu pun yang perlu jarak atas untuk
	   memberi ruang baginya. Sisa 16px itu tampil sebagai pita abu di
	   puncak layar -- kecil, tapi konsisten muncul di tiap halaman yang
	   belum punya kait tata letak sendiri (Trade, Akun, Setor, Riwayat,
	   dan seterusnya). Halaman yang isinya butuh jarak atas mengaturnya
	   sendiri lewat kartunya. */
	/*  [FIX] !important di sini bukan pilihan gaya melainkan keharusan.
	    layout/main.blade.php baris 967 menyetel, di dalam
	    @media (max-width: 990px):

	        #content { padding-top: 5vh !important; }

	    Deklarasi !important menang tanpa memandang kekhususan, jadi aturan
	    penihil ini -- yang kekhususannya jauh lebih tinggi (dua id, dua
	    kelas) -- selalu kalah. Akibatnya setiap halaman ber-layout.main
	    tetap menyisakan pita kosong setinggi 5vh (sekitar 42px pada layar
	    844px) di puncak layar, padahal headernya sudah disembunyikan. */
	#page-container.page-header-fixed > #content.content {
		padding-top: 0 !important;
	}
	/* [FIX 11 Sep 2026] Tiga halaman berkerangka aplikasi dimulai dengan
	   bidangnya sendiri yang harus menempel ke puncak layar: Beranda dengan
	   bilah putih, Wallet dengan kartu gradien, Market dengan area
	   pencarian. Padding 16px di atas menyisakan pita abu/putih di atas
	   bidang itu -- terlihat seperti strip nyasar sebelum kartunya mulai.

	   Pembungkus di antara #content dan kartu (.row, .col-md-*, .panel)
	   juga dinolkan: masing-masing membawa margin/padding sendiri yang
	   menambah tinggi pita itu. */
	/* Sumber pita itu sendiri: tema memberi .page-header-fixed
	   padding-top 54px (40px di style-responsive) untuk memberi ruang bagi
	   header yang position:fixed. Headernya sudah disembunyikan di mobile,
	   jadi ruang itu tinggal pita kosong di puncak layar -- persis strip
	   abu/putih di atas kartu gradien Wallet.

	   Dinolkan menyeluruh, bukan per halaman: header disembunyikan di
	   SEMUA halaman mobile, jadi tidak ada satu pun yang masih perlu ruang
	   itu. Aturan ini ada di dalam @media, sehingga desktop -- yang
	   headernya tetap tampil -- tidak tersentuh. */
	#page-container.page-header-fixed {
		padding-top: 0;
	}
	/* Sisi kiri-kanan ikut dinolkan supaya bidang gradien menempel penuh
	   ke tepi layar, bukan menyisakan 10px putih di kedua sisi. */
	#content.dexapp-market > .row,
	#content.dexapp-market > .row > [class*="col-md-"],
	#content.dexapp-market > .row > [class*="col-md-"] > .panel,
	#content.dexapp-market > .panel {
		margin-top: 0;
		padding-top: 0;
		border-top: 0 none;
		padding-right: 0;
		padding-left: 0;
		margin-right: 0;
		margin-left: 0;
	}
	/* Sidebar juga menyisipkan margin kiri untuk memberi ruang dirinya. */
	#page-container.page-sidebar-fixed > #content.content {
		margin-left: 0;
		padding-right: 12px;
		padding-left: 12px;
	}
}


/* =====================================================================
   TAHAP 6  --  Tata letak Beranda benar-benar disusun ulang
   [MOBILE 11 Sep 2026]

   Tahap 1-4 hanya merapikan tampilan kartu; kerangkanya masih tata letak
   desktop -- tiap kartu terkubur di .row > .col-md-* > .panel >
   .panel-body, jadi ada tiga lapis padding dan kotak putih membungkus
   kartu. Hasilnya masih terbaca sebagai halaman web yang dikecilkan.

   Di aplikasi (APP-DEX-NEW/screens/Screen1.js) kerangkanya rata: satu
   kolom, hero gradien menempel penuh ke tepi atas, lalu tumpukan kartu
   dengan jarak seragam di atas latar abu.

   Caranya: semua bungkus struktural diberi display:contents -- kotaknya
   hilang, anaknya naik jadi anak langsung #content. Semua kartu jadi
   bersaudara dalam satu flex column sehingga bisa diurutkan bebas dengan
   order, mustahil selama mereka terpisah di wadah masing-masing.

   Versi pertama aturan ini menyebut jalur sarang secara eksplisit
   (#content > .row > .col-md-12 > .panel > ...). Itu gagal: blok KYC
   punya kedalaman berbeda sehingga tidak ikut larut, urutannya kacau, dan
   .row yang tidak larut menyisakan margin negatif -15px yang membuat
   halaman bisa digeser menyamping. Versi ini tidak menyebut jalur sama
   sekali -- melarutkan semua bungkus, lalu MENGEMBALIKAN yang ada di
   dalam kartu. Jadi berapa pun dalamnya sarang, hasilnya sama.

   Seluruhnya dilingkupi .dexapp-home, jadi 70 view lain yang memakai
   layout ini tidak tersentuh sama sekali.
   ===================================================================== */

@media (max-width: 767px) {

	#page-container.page-sidebar-fixed > #content.dexapp-home {
		display: flex;
		flex-direction: column;
		padding-right: 0;
		padding-left: 0;
		overflow-x: hidden;
	}
	/* Jarak antar kartu memakai margin, bukan gap milik wadah. Gap akan
	   menyisipkan sela di antara tiga bagian hero juga, padahal ketiganya
	   harus menyatu jadi satu bidang gradien. */
	#content.dexapp-home > * {
		margin-bottom: 12px;
	}

	/* 1. Larutkan setiap bungkus struktural, tanpa peduli kedalaman. */
	#content.dexapp-home .row,
	#content.dexapp-home .panel,
	#content.dexapp-home .panel-body,
	#content.dexapp-home .panel-heading,
	#content.dexapp-home [class*="col-md-"],
	#content.dexapp-home [class*="col-sm-"] {
		display: contents;
	}

	/* 2. Kembalikan yang berada DI DALAM kartu -- isi kartu tetap butuh
	      kerangkanya sendiri. Selektor ini (1,3,0) menang atas aturan
	      pelarut di atas (1,2,0), jadi urutannya tidak jadi soal. */
	#content.dexapp-home .widget .row,
	#content.dexapp-home .widget [class*="col-md-"],
	#content.dexapp-home .widget [class*="col-sm-"],
	#content.dexapp-home .kyc-bar [class*="col-md-"] {
		display: block;
		margin-right: 0;
		margin-left: 0;
		width: auto;
		float: none;
		padding-right: 0;
		padding-left: 0;
	}
	/* Baris di dalam kartu yang memang harus flex. */
	#content.dexapp-home .widget .row.d-flex,
	#content.dexapp-home .widget #wd-button-row {
		display: flex;
	}
	#content.dexapp-home .kyc-bar {
		display: flex;
		align-items: center;
		gap: 10px;
	}
	/* .alert di Beranda ditulis <div class="row alert ...">, jadi aturan
	   pelarut .row ikut mengenainya dan order-nya jadi diabaikan --
	   elemen display:contents bukan flex item. Dikembalikan jadi blok. */
	#content.dexapp-home .alert {
		display: block;
	}

	/* 3. Kartu: satu kolom, sela tepi seragam. Hero dikecualikan. */
	#content.dexapp-home > .widget,
	#content.dexapp-home .widget.widget-stats,
	#content.dexapp-home .kyc-bar,
	#content.dexapp-home .alert {
		width: auto;
		margin: 0 12px;
		float: none;
	}

	/* 4. Urutan, mengikuti alur layar Home aplikasi.

	      Ditulis dari yang PALING UMUM ke paling khusus. Spesifisitas
	      keempat aturan ini sama (1,3,0), jadi yang menang adalah yang
	      ditulis belakangan. Versi pertama menaruh aturan umum
	      '.widget.widget-stats { order: 5 }' di bawah aturan hero, dan
	      hero -- yang juga .widget.widget-stats -- ikut kena order 5
	      sehingga tenggelam di bawah Portfolio. Urutan penulisan di sini
	      bukan selera, ia yang menentukan hasilnya. */
	#content.dexapp-home .widget.widget-stats          { order: 5; }
	/* Portfolio & Top Market naik di atas kartu kelengkapan akun: di
	   aplikasi, isi seperti kelengkapan akun ada di layar Account, bukan
	   menyita layar utama. */
	#content.dexapp-home .portfolio-investment-box .widget,
	#content.dexapp-home .row.dash-bottom-block .widget { order: 4; }
	#content.dexapp-home .alert                        { order: 3; }
	#content.dexapp-home .kyc-bar                      { order: 2; }
	#content.dexapp-home .widget.dexapp-balance-widget { order: 1; }

	/* 5. Hero menempel penuh ke tepi, seperti header gradien aplikasi. */
	#content.dexapp-home .widget.dexapp-balance-widget {
		margin: 0;
		padding: 20px 16px 16px;
		border-radius: 0 0 22px 22px;
		box-shadow: 0 6px 18px rgba(15, 23, 42, .16);
	}

	/* 6. Kartu selain hero. */
	#content.dexapp-home .widget.widget-stats:not(.dexapp-balance-widget) {
		padding: 14px;
		border: 0 none;
		border-radius: var(--dexapp-radius-card);
		background: var(--dexapp-surface);
		box-shadow: var(--dexapp-shadow-card);
	}
	.darkmode #content.dexapp-home .widget.widget-stats:not(.dexapp-balance-widget) {
		background: var(--dexapp-navy-2);
	}
	#content.dexapp-home .widget-title {
		margin-bottom: 10px;
		font-family: 'custom-font', 'Plus Jakarta Sans', sans-serif;
		font-size: 14px;
	}

	/* 7. Bilah KYC jadi kartu peringatan ala aplikasi. */
	#content.dexapp-home .kyc-bar.m-0 {
		margin: 0 12px 16px !important;
	}
	#content.dexapp-home .kyc-bar {
		align-items: center;
		gap: 12px;
		padding: 12px 14px;
		border: 1px solid #FDE68A;
		border-radius: var(--dexapp-radius-card);
		background: #FFFBEB;
		box-shadow: none;
		color: #92400E;
	}
	.darkmode #content.dexapp-home .kyc-bar {
		border-color: rgba(245, 158, 11, .25);
		background: rgba(245, 158, 11, .08);
		color: #FCD34D;
	}
	#content.dexapp-home .kyc-bar .kyc-bar-icon {
		display: flex;
		flex: 0 0 auto;
		align-items: center;
		justify-content: center;
	}
	#content.dexapp-home .kyc-bar .kyc-bar-icon .icon-img {
		width: 44px;
		height: auto;
	}
	#content.dexapp-home .kyc-bar .kyc-bar-icon .fa-chevron-right {
		color: #CBD5E1;
		font-size: 13px;
	}
	#content.dexapp-home .kyc-bar .kyc-bar-text {
		display: flex;
		flex: 1 1 auto;
		min-width: 0;
		flex-direction: column;
		align-items: flex-start;
		gap: 2px;
	}
	#content.dexapp-home .kyc-bar .kyc-bar-text .row {
		line-height: 1.4;
	}
	#content.dexapp-home .kyc-bar .kyc-bar-title {
		font-family: 'custom-medium', 'Plus Jakarta Sans', sans-serif;
		font-size: 13px;
	}
	#content.dexapp-home .kyc-bar .kyc-bar-sub-title {
		color: var(--dexapp-blue);
		font-size: 11.5px;
	}
}


/* =====================================================================
   TAHAP 7  --  Footer disembunyikan + daftar Market dirapikan
   [MOBILE 11 Sep 2026]
   ===================================================================== */

@media (max-width: 767px) {

	/* --- Footer -----------------------------------------------------
	   Aplikasi tidak punya footer; navigasi ada di tab bar bawah, dan
	   footer web di sini justru tertutup tab bar itu.

	   Sengaja menyasar #footer, BUKAN elemen <footer>. Di main.blade.php
	   ada <footer> ketiga setelah </body> yang bukan footer sama sekali:
	   isinya modal "Open With". Menyembunyikan <footer> secara buta akan
	   ikut mematikan modal itu.

	   Catatan: dua footer asli sama-sama memakai id="footer" dan
	   ter-render bersamaan tanpa kondisi. Selektor id menyasar keduanya,
	   jadi keduanya tersembunyi. Id ganda itu bug lama yang tidak
	   disentuh di sini karena memperbaikinya menyentuh desktop. */
	#footer {
		display: none;
	}

}


/* =====================================================================
   TAHAP 8  --  Beranda disesuaikan dengan tangkapan layar aplikasi
   [MOBILE 11 Sep 2026]

   KOREKSI. Versi sebelumnya membuat hero gradien di Beranda berdasarkan
   pembacaan GradientBackground di Screen1.js. Tangkapan layar aplikasi
   menunjukkan itu keliru: Beranda berlatar TERANG -- bilah putih di atas,
   lalu kartu putih di atas abu. Gradien birunya dipakai layar Wallet dan
   Account, bukan Home. Blok gradien itu dibuang seluruhnya.
   ===================================================================== */

.dexapp-topbar,
.dexapp-sec,
.dexapp-saldo,
.dexapp-aksi,
.dexapp-home-dca,
.dexapp-sec-head,
.dexapp-strip,
.dexapp-artikel {
	display: none;
}

@media (max-width: 767px) {

	/* --- Bilah atas putih -------------------------------------------- */
	#content.dexapp-home .dexapp-topbar {
		display: flex;
		order: 0;
		align-items: center;
		justify-content: space-between;
		margin: 0 0 16px;
		padding: 12px 16px;
		background: var(--dexapp-surface);
	}
	.darkmode #content.dexapp-home .dexapp-topbar {
		background: transparent;
	}
	/* Width is fixed, not height: the blue and white logo PNGs have different ratios. */
	#content.dexapp-home .dexapp-topbar-logo {
		display: block;
		width: 196px;
		max-width: calc(100% - 110px);
		height: auto;
	}
	#content.dexapp-home .dexapp-topbar-logo--dark,
	.darkmode #content.dexapp-home .dexapp-topbar-logo--light {
		display: none;
	}
	.darkmode #content.dexapp-home .dexapp-topbar-logo--dark {
		display: block;
	}
	#content.dexapp-home .dexapp-topbar-act {
		display: flex;
		flex-shrink: 0;
		gap: 10px;
	}
	#content.dexapp-home .dexapp-topbar-act > a {
		display: flex;
		position: relative;
		width: 40px;
		height: 40px;
		align-items: center;
		justify-content: center;
		border-radius: 50%;
		background: var(--dexapp-fill);
		color: var(--dexapp-text);
		font-size: 19px;
	}
	.darkmode #content.dexapp-home .dexapp-topbar-act > a {
		background: var(--dexapp-navy-2);
		color: #fff;
	}
	#content.dexapp-home .dexapp-dot {
		position: absolute;
		top: 9px;
		right: 10px;
		width: 8px;
		height: 8px;
		border-radius: 50%;
		background: var(--dexapp-red);
	}

	#content.dexapp-home {
		--dexapp-shadow-card: 0 1px 3px rgba(15, 23, 42, .03);
	}

	/* --- Kartu bersama ----------------------------------------------- */
	#content.dexapp-home .dexapp-card {
		display: block;
		margin: 0 12px 12px;
		padding: 16px;
		border-radius: var(--dexapp-radius-card);
		background: var(--dexapp-surface);
		box-shadow: var(--dexapp-shadow-card);
	}
	.darkmode #content.dexapp-home .dexapp-card {
		background: var(--dexapp-navy-2);
		color: #fff;
	}

	/* --- Kartu saldo -------------------------------------------------- */
	#content.dexapp-home .dexapp-saldo { order: 1; }
	#content.dexapp-home .dexapp-saldo-head {
		display: flex;
		align-items: flex-start;
		justify-content: space-between;
		gap: 10px;
		color: var(--dexapp-text-2);
		font-size: 12.5px;
	}
	#content.dexapp-home .dexapp-eye {
		display: flex;
		width: 34px;
		height: 34px;
		flex: 0 0 34px;
		align-items: center;
		justify-content: center;
		border: 0 none;
		border-radius: 10px;
		background: var(--dexapp-fill);
		color: var(--dexapp-text-2);
		font-size: 14px;
	}
	.darkmode #content.dexapp-home .dexapp-eye {
		background: rgba(255, 255, 255, .08);
		color: #fff;
	}
	#content.dexapp-home .dexapp-saldo-nilai {
		margin-top: 6px;
		font-family: 'custom-font', 'Plus Jakarta Sans', sans-serif;
		font-size: 28px;
		font-variant-numeric: tabular-nums;
		line-height: 1.15;
	}

	/* --- Kartu 4 aksi, bersekat -------------------------------------- */
	/* The desktop "Account & security complete" badge is not part of the mobile home. */
	#content.dexapp-home .dex-lengkap {
		display: none !important;
	}

	#content.dexapp-home .dexapp-home-dca {
		display: flex;
		position: relative;
		order: 2;
		align-items: center;
		gap: 14px;
		padding: 16px;
		color: var(--dexapp-text);
		text-decoration: none;
		-webkit-tap-highlight-color: transparent;
	}
	#content.dexapp-home .dexapp-home-dca:hover,
	#content.dexapp-home .dexapp-home-dca:focus {
		color: var(--dexapp-text);
		text-decoration: none;
	}
	.dexapp-home-dca-icon {
		display: flex;
		position: relative;
		flex: 0 0 56px;
		align-items: center;
		justify-content: center;
		width: 56px;
		height: 56px;
		border-radius: 16px;
		background: var(--dexapp-fill);
		color: var(--dexapp-blue);
	}
	.dexapp-home-dca-icon > svg {
		width: 24px;
		height: 24px;
	}
	.dexapp-home-dca-new {
		position: absolute;
		top: -8px;
		left: -6px;
		padding: 1px 7px;
		border: 2px solid var(--dexapp-surface);
		border-radius: 999px;
		background: var(--dexapp-blue);
		color: #fff;
		font-size: 10px;
		font-weight: 700;
		line-height: 1.4;
	}
	.dexapp-home-dca-body {
		display: flex;
		flex: 1 1 auto;
		flex-direction: column;
		gap: 3px;
		min-width: 0;
	}
	.dexapp-home-dca-body > b {
		font-size: 15px;
		font-weight: 700;
		line-height: 1.3;
	}
	.dexapp-home-dca-body > small {
		color: var(--dexapp-text-2);
		font-size: 12px;
		line-height: 1.4;
	}
	.dexapp-home-dca-cta {
		margin-top: 4px;
		color: var(--dexapp-blue);
		font-size: 13px;
		font-weight: 600;
	}
	.dexapp-home-dca-art {
		flex: 0 0 60px;
		width: 60px;
		height: 52px;
	}

	#content.dexapp-home .dexapp-aksi {
		display: flex;
		order: 2;
		padding: 14px 0;
	}
	#content.dexapp-home .dexapp-aksi > a {
		display: flex;
		flex: 1 1 0;
		min-width: 0;
		flex-direction: column;
		align-items: center;
		gap: 8px;
		color: var(--dexapp-text);
		text-decoration: none;
	}
	.darkmode #content.dexapp-home .dexapp-aksi > a {
		color: #fff;
	}
	/* Sekat vertikal tipis antar aksi, persis seperti di aplikasi. */
	#content.dexapp-home .dexapp-aksi > a + a {
		border-left: 1px solid var(--dexapp-border);
	}
	.darkmode #content.dexapp-home .dexapp-aksi > a + a {
		border-left-color: rgba(255, 255, 255, .08);
	}
	#content.dexapp-home .dexapp-aksi i {
		font-size: 21px;
	}
	#content.dexapp-home .dexapp-aksi span {
		overflow: hidden;
		max-width: 100%;
		font-family: 'custom-medium', 'Plus Jakarta Sans', sans-serif;
		font-size: 11.5px;
		text-overflow: ellipsis;
		white-space: nowrap;
	}

	/* --- Judul bagian + View All ------------------------------------- */
	#content.dexapp-home .dexapp-sec-head {
		display: flex;
		align-items: baseline;
		justify-content: space-between;
		margin: 4px 12px 8px;
	}
	#content.dexapp-home .dexapp-sec-head h2 {
		margin: 0;
		font-family: 'custom-font', 'Plus Jakarta Sans', sans-serif;
		font-size: 16px;
	}
	.darkmode #content.dexapp-home .dexapp-sec-head h2 {
		color: #fff;
	}
	#content.dexapp-home .dexapp-sec-head > a {
		color: var(--dexapp-blue);
		font-family: 'custom-medium', 'Plus Jakarta Sans', sans-serif;
		font-size: 12.5px;
	}

	#content.dexapp-home .dexapp-promo {
		display: flex;
		margin: 0 0 16px;
		padding: 2px 12px 4px;
		gap: 10px;
		overflow-x: auto;
		scroll-snap-type: x mandatory;
		scroll-padding: 0 12px;
		-webkit-overflow-scrolling: touch;
		scrollbar-width: none;
	}
	#content.dexapp-home .dexapp-promo::-webkit-scrollbar {
		display: none;
	}
	#content.dexapp-home .dexapp-promo-item {
		display: block;
		flex: 0 0 86%;
		scroll-snap-align: start;
		overflow: hidden;
		border-radius: var(--dexapp-radius-card);
		background: var(--dexapp-fill);
		aspect-ratio: 2 / 1;
	}
	.darkmode #content.dexapp-home .dexapp-promo-item {
		background: var(--dexapp-navy-2);
	}
	#content.dexapp-home .dexapp-promo-item img {
		display: block;
		width: 100%;
		height: 100%;
		object-fit: cover;
	}

	/* --- Top Volume: kartu bergulir mendatar ------------------------- */
	#content.dexapp-home .dexapp-strip {
		display: flex;
		margin: 0 0 12px;
		padding: 2px 12px 4px;
		gap: 10px;
		overflow-x: auto;
		scroll-snap-type: x mandatory;
		scroll-padding: 0 12px;
		-webkit-overflow-scrolling: touch;
		scrollbar-width: none;
	}
	#content.dexapp-home .dexapp-strip::-webkit-scrollbar {
		display: none;
	}
	#content.dexapp-home .dexapp-strip-card {
		display: block;
		flex: 0 0 auto;
		scroll-snap-align: start;
		min-width: 170px;
		padding: 12px 14px;
		border-radius: var(--dexapp-radius-card);
		background: var(--dexapp-surface);
		box-shadow: var(--dexapp-shadow-card);
		color: var(--dexapp-text);
		text-decoration: none;
	}
	.darkmode #content.dexapp-home .dexapp-strip-card {
		background: var(--dexapp-navy-2);
		color: #fff;
	}
	#content.dexapp-home .dexapp-strip-pair {
		display: flex;
		align-items: center;
		gap: 8px;
		font-family: 'custom-font', 'Plus Jakarta Sans', sans-serif;
		font-size: 14px;
	}
	#content.dexapp-home .dexapp-coin {
		display: flex;
		flex-shrink: 0;
		width: 32px;
		height: 32px;
		align-items: center;
		justify-content: center;
		border-radius: 10px;
		background: var(--dexapp-fill);
	}
	.darkmode #content.dexapp-home .dexapp-coin {
		background: rgba(255, 255, 255, .08);
	}
	#content.dexapp-home .dexapp-coin img {
		width: 22px;
		height: 22px;
		border-radius: 50%;
		object-fit: contain;
	}
	#content.dexapp-home .dexapp-coin--empty::before {
		content: attr(data-initial);
		color: var(--dexapp-blue);
		font-family: 'custom-font', 'Plus Jakarta Sans', sans-serif;
		font-size: 13px;
	}
	#content.dexapp-home .dexapp-strip-pair small {
		color: var(--dexapp-muted);
		font-family: 'custom-regular', 'Plus Jakarta Sans', sans-serif;
		font-size: 13px;
	}
	#content.dexapp-home .dexapp-strip-harga {
		display: flex;
		align-items: center;
		gap: 6px;
		margin-top: 8px;
		font-family: 'custom-medium', 'Plus Jakarta Sans', sans-serif;
		font-size: 13px;
		font-variant-numeric: tabular-nums;
	}
	#content.dexapp-home .dexapp-strip-harga em {
		padding: 2px 6px;
		border-radius: 6px;
		font-size: 11.5px;
		font-style: normal;
	}
	#content.dexapp-home .dexapp-strip-harga em.naik {
		background: #ECFDF5;
		color: var(--dexapp-green);
	}
	#content.dexapp-home .dexapp-strip-harga em.turun {
		background: #FEF2F2;
		color: var(--dexapp-red);
	}
	#content.dexapp-home .dexapp-strip-harga em.is-neutral {
		background: var(--dexapp-fill);
		color: var(--dexapp-text-2);
	}
	.darkmode #content.dexapp-home .dexapp-strip-harga em.is-neutral {
		background: rgba(255, 255, 255, .08);
		color: var(--dexapp-muted);
	}
	#content.dexapp-home .dexapp-strip-vol {
		margin-top: 6px;
		color: var(--dexapp-muted);
		font-size: 11.5px;
	}

	#content.dexapp-home .dexapp-market-tabs {
		display: flex;
		margin: 0 12px 12px;
		padding: 2px;
		gap: 2px;
		border-radius: 12px;
		background: #F1F5F9;
	}
	.darkmode #content.dexapp-home .dexapp-market-tabs {
		background: var(--dexapp-navy-2);
	}
	#content.dexapp-home .dexapp-market-tabs > button {
		flex: 1 1 0;
		padding: 9px 4px;
		border: 0 none;
		border-radius: 10px;
		background: transparent;
		color: var(--dexapp-text-2);
		font-family: 'custom-medium', 'Plus Jakarta Sans', sans-serif;
		font-size: 13px;
		white-space: nowrap;
	}
	#content.dexapp-home .dexapp-market-tabs > button.is-active {
		background: var(--dexapp-surface);
		box-shadow: 0 1px 4px rgba(15, 23, 42, .08);
		color: var(--dexapp-text);
	}
	.darkmode #content.dexapp-home .dexapp-market-tabs > button {
		color: var(--dexapp-muted);
	}
	.darkmode #content.dexapp-home .dexapp-market-tabs > button.is-active {
		background: rgba(255, 255, 255, .1);
		color: #fff;
	}
	#content.dexapp-home .dexapp-market-cols {
		display: flex;
		justify-content: space-between;
		margin: 0 16px 8px;
		color: var(--dexapp-text-2);
		font-size: 12px;
	}
	.darkmode #content.dexapp-home .dexapp-market-cols {
		color: var(--dexapp-muted);
	}
	#content.dexapp-home .dexapp-market-list {
		padding: 0 14px;
	}
	/* .dexapp-card forces display:block, which overrides the hidden attribute. */
	#content.dexapp-home .dexapp-market-list[hidden] {
		display: none;
	}
	#content.dexapp-home .dexapp-market-row {
		display: flex;
		align-items: center;
		gap: 10px;
		padding: 12px 0;
		border-top: 1px solid #F1F4F8;
		color: var(--dexapp-text);
		text-decoration: none;
	}
	#content.dexapp-home .dexapp-market-row:first-child {
		border-top: 0 none;
	}
	.darkmode #content.dexapp-home .dexapp-market-row {
		border-top-color: rgba(255, 255, 255, .06);
		color: #fff;
	}
	#content.dexapp-home .dexapp-coin--lg {
		width: 40px;
		height: 40px;
		border-radius: 12px;
	}
	#content.dexapp-home .dexapp-coin--lg img {
		width: 28px;
		height: 28px;
	}
	#content.dexapp-home .dexapp-market-name {
		display: flex;
		flex: 1 1 auto;
		min-width: 0;
		flex-direction: column;
		gap: 2px;
	}
	#content.dexapp-home .dexapp-market-name b {
		font-family: 'custom-font', 'Plus Jakarta Sans', sans-serif;
		font-size: 14px;
		font-weight: normal;
	}
	#content.dexapp-home .dexapp-market-name b small {
		color: var(--dexapp-muted);
		font-size: 13px;
	}
	#content.dexapp-home .dexapp-market-name > small {
		overflow: hidden;
		color: var(--dexapp-text-2);
		font-size: 11.5px;
		text-overflow: ellipsis;
		white-space: nowrap;
	}
	.darkmode #content.dexapp-home .dexapp-market-name > small {
		color: var(--dexapp-muted);
	}
	#content.dexapp-home .dexapp-market-price {
		display: flex;
		flex-shrink: 0;
		flex-direction: column;
		align-items: flex-end;
		gap: 4px;
		font-variant-numeric: tabular-nums;
	}
	#content.dexapp-home .dexapp-market-price b {
		font-family: 'custom-medium', 'Plus Jakarta Sans', sans-serif;
		font-size: 14px;
		font-weight: normal;
	}
	#content.dexapp-home .dexapp-market-price em {
		padding: 3px 10px;
		border-radius: 8px;
		font-size: 12px;
		font-style: normal;
	}
	#content.dexapp-home .dexapp-market-price em.is-up {
		background: #ECFDF5;
		color: var(--dexapp-green);
	}
	#content.dexapp-home .dexapp-market-price em.is-down {
		background: #FEF2F2;
		color: var(--dexapp-red);
	}
	#content.dexapp-home .dexapp-market-price em.is-neutral {
		background: var(--dexapp-fill);
		color: var(--dexapp-text-2);
	}
	.darkmode #content.dexapp-home .dexapp-market-price em.is-up {
		background: rgba(16, 185, 129, .15);
	}
	.darkmode #content.dexapp-home .dexapp-market-price em.is-down {
		background: rgba(239, 68, 68, .15);
	}
	.darkmode #content.dexapp-home .dexapp-market-price em.is-neutral {
		background: rgba(255, 255, 255, .08);
		color: var(--dexapp-muted);
	}
	#content.dexapp-home .dexapp-market-empty {
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: 6px;
		padding: 22px 0;
		color: var(--dexapp-text-2);
		font-size: 12.5px;
		text-align: center;
	}
	#content.dexapp-home .dexapp-market-empty a {
		color: var(--dexapp-blue);
		font-family: 'custom-medium', 'Plus Jakarta Sans', sans-serif;
	}

	#content.dexapp-home .dexapp-article-tabs {
		display: flex;
		margin: 0 12px 12px;
		padding: 2px;
		gap: 2px;
		overflow-x: auto;
		border-radius: 12px;
		background: #F1F5F9;
		scrollbar-width: none;
	}
	#content.dexapp-home .dexapp-article-tabs::-webkit-scrollbar {
		display: none;
	}
	.darkmode #content.dexapp-home .dexapp-article-tabs {
		background: var(--dexapp-navy-2);
	}
	#content.dexapp-home .dexapp-article-tabs > button {
		flex: 0 0 auto;
		padding: 9px 14px;
		border: 0 none;
		border-radius: 10px;
		background: transparent;
		color: var(--dexapp-text-2);
		font-family: 'custom-medium', 'Plus Jakarta Sans', sans-serif;
		font-size: 13px;
		white-space: nowrap;
	}
	#content.dexapp-home .dexapp-article-tabs > button.is-active {
		background: var(--dexapp-surface);
		box-shadow: 0 1px 4px rgba(15, 23, 42, .08);
		color: var(--dexapp-text);
	}
	.darkmode #content.dexapp-home .dexapp-article-tabs > button {
		color: var(--dexapp-muted);
	}
	.darkmode #content.dexapp-home .dexapp-article-tabs > button.is-active {
		background: rgba(255, 255, 255, .1);
		color: #fff;
	}
	#content.dexapp-home .dexapp-artikel {
		padding: 0 14px;
	}
	#content.dexapp-home .dexapp-article-row {
		display: flex;
		align-items: center;
		gap: 12px;
		padding: 14px 0;
		border-top: 1px solid #F1F4F8;
		color: var(--dexapp-text);
		text-decoration: none;
	}
	#content.dexapp-home .dexapp-article-row:first-child {
		border-top: 0 none;
	}
	.darkmode #content.dexapp-home .dexapp-article-row {
		border-top-color: rgba(255, 255, 255, .06);
		color: #fff;
	}
	/* Ratio matches the WordPress "medium" size (300x171). */
	#content.dexapp-home .dexapp-article-thumb {
		flex: 0 0 116px;
		height: 66px;
		overflow: hidden;
		border-radius: 10px;
		background: var(--dexapp-fill);
	}
	.darkmode #content.dexapp-home .dexapp-article-thumb {
		background: rgba(255, 255, 255, .08);
	}
	#content.dexapp-home .dexapp-article-thumb img {
		display: block;
		width: 100%;
		height: 100%;
		object-fit: cover;
	}
	#content.dexapp-home .dexapp-article-body {
		display: flex;
		flex: 1 1 auto;
		min-width: 0;
		flex-direction: column;
		gap: 3px;
	}
	#content.dexapp-home .dexapp-article-body > b,
	#content.dexapp-home .dexapp-article-body > span {
		display: -webkit-box;
		overflow: hidden;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 2;
	}
	#content.dexapp-home .dexapp-article-body > b {
		font-family: 'custom-medium', 'Plus Jakarta Sans', sans-serif;
		font-size: 13.5px;
		font-weight: normal;
		line-height: 1.35;
	}
	#content.dexapp-home .dexapp-article-body > span {
		color: var(--dexapp-text-2);
		font-size: 12px;
		line-height: 1.4;
	}
	.darkmode #content.dexapp-home .dexapp-article-body > span {
		color: var(--dexapp-muted);
	}
	#content.dexapp-home .dexapp-article-body > small {
		color: var(--dexapp-muted);
		font-size: 11px;
	}
	#content.dexapp-home .dexapp-article-arrow {
		display: flex;
		flex-shrink: 0;
		color: #CBD5E1;
	}
	.darkmode #content.dexapp-home .dexapp-article-arrow {
		color: #475569;
	}
	#content.dexapp-home .dexapp-article-status {
		padding: 22px 0;
		color: var(--dexapp-text-2);
		font-size: 12.5px;
		text-align: center;
	}
	#content.dexapp-home .dexapp-article-status[hidden],
	#content.dexapp-home .dexapp-article-status [hidden] {
		display: none;
	}

	/* --- Urutan menyeluruh -------------------------------------------
	   Ditulis eksplisit dan berbeda-beda. Memberi order yang sama pada
	   dua elemen membuat urutannya jatuh ke urutan DOM, dan di situlah
	   kartu bawaan dashboard bisa menyelip di tengah sebuah bagian. */
	#content.dexapp-home .dexapp-topbar   { order: 0; }
	#content.dexapp-home .dexapp-saldo    { order: 1; }
	#content.dexapp-home .dexapp-aksi     { order: 2; }
	#content.dexapp-home .kyc-bar         { order: 3; }
	#content.dexapp-home .alert           { order: 4; }
	#content.dexapp-home .dexapp-sec-promo { order: 5; }
	#content.dexapp-home .dexapp-sec-vol  { order: 6; }
	#content.dexapp-home .dexapp-sec-market { order: 7; }
	#content.dexapp-home .portfolio-investment-box .widget,
	#content.dexapp-home .row.dash-bottom-block .widget { order: 8; }
	#content.dexapp-home .dexapp-sec-news { order: 9; }
	#content.dexapp-home .widget.widget-stats { order: 10; }

	#content.dexapp-home .dexapp-sec {
		display: block;
		margin: 0;
	}
	/* Elemen di dalam pembungkus bagian tidak lagi jadi flex item, jadi
	   order-nya tidak berlaku -- dan memang tidak perlu. */
	#content.dexapp-home .dexapp-sec > .dexapp-sec-head,
	#content.dexapp-home .dexapp-sec > .dexapp-strip,
	#content.dexapp-home .dexapp-sec > .dexapp-promo,
	#content.dexapp-home .dexapp-sec > .dexapp-artikel {
		order: 0;
	}

	/* Widget saldo lama disembunyikan: kartu saldo baru menggantikannya,
	   dan menampilkan keduanya berarti dua angka saldo di satu layar. */
	#content.dexapp-home .widget.dexapp-balance-widget {
		display: none;
	}
}


/* =====================================================================
   TAHAP 9  --  Wallet, Account, Market disesuaikan tangkapan layar
   [MOBILE 11 Sep 2026]

   Beda dengan Beranda yang berlatar terang, layar Wallet dan Account di
   aplikasi memakai header gradien biru. Itu sebabnya gradien dipindah ke
   sini, bukan di Home.
   ===================================================================== */

.dexapp-wallet-tiles,
.dexapp-assets-head {
	display: none;
}

@media (max-width: 767px) {

	#content.dexapp-market .row {
		margin-right: 0;
		margin-left: 0;
	}
	/* Dikecualikan: baris di dalam sel tabel memang dipakai untuk menata
	   ikon + nama koin, dan padding kolomnya sudah pas. */
	#content.dexapp-market .market-list .row {
		margin-right: 0;
		margin-left: 0;
	}
	/* Bootstrap 3 memasang clearfix ::before/::after pada .row. Begitu .row
	   dijadikan flex atau grid, kedua pseudo itu ikut jadi ITEM dan gap
	   menyisipkan jarak sebelum ikon koin. */
	#content.dexapp-market .market-list > tbody > tr > td:nth-child(2) > .row::before,
	#content.dexapp-market .market-list > tbody > tr > td:nth-child(2) > .row::after {
		display: none;
	}
}


/* =====================================================================
   TAHAP 10  --  Bagian Beranda yang tidak ada di aplikasi disembunyikan
   [MOBILE 11 Sep 2026]

   Penyisiran seluruh @section('content') Beranda menemukan bagian-bagian
   ini masih tampil di mobile padahal tidak ada di layar Home aplikasi:

     "Dashboard" (judul panel)  -> aplikasi tidak punya judul halaman;
                                   bilah atas berlogo sudah menggantikannya
     Account Completeness       -> di aplikasi ada di layar Account
     Security Completeness      -> di aplikasi ada di layar Account
     Portfolio Investment       -> tidak ada di Home; nilainya sudah
                                   terwakili kartu Est. Portfolio Value
     Top Market                 -> sudah digantikan strip Top Volume 24h,
                                   menampilkan keduanya berarti dobel

   Active Order dan News Update tidak perlu disentuh: blok itu sudah
   berada di dalam komentar Blade sejak sebelumnya, jadi memang tidak
   pernah dirender.

   YANG SENGAJA DIPERTAHANKAN: bilah KYC dan alert verifikasi. Keduanya
   bukan "isi halaman" melainkan peringatan yang bisa ditindaklanjuti --
   menyembunyikannya bisa membuat pengguna tidak sadar akunnya belum bisa
   menarik dana. Di aplikasi statusnya memang ada di layar Account, tapi
   di sana ia tetap terlihat; di web, tab Account hanya membuka lembar
   menu. Bilang saja kalau tetap ingin disembunyikan.
   ===================================================================== */

@media (max-width: 767px) {

	#content.dexapp-home .panel > .panel-heading,
	#content.dexapp-home .row.d-flex .widget.widget-stats:not(.dexapp-balance-widget),
	#content.dexapp-home .row.dash-bottom-block .widget.widget-stats {
		display: none;
	}
}


/* =====================================================================
   TAHAP 11  --  Blok footer besar (#cta) disembunyikan di mobile
   [MOBILE 11 Sep 2026]

   Blok "Ikuti Kami di / Terdaftar di / alamat PT / Privacy Policy / AML"
   bukan elemen <footer>, melainkan <section id="cta" class="cta-2">, jadi
   aturan #footer di Tahap 7 tidak menjangkaunya.

   Seperti footer, di aplikasi tidak ada bagian ini. Halaman /account
   punya footer ringkasnya sendiri (sosial, CMC/CoinGecko, lisensi).

   Pelingkupan: berkas ini HANYA dimuat layout/main.blade.php, jadi halaman
   publik (index, privacy-policy, term-of-services) yang juga punya
   section#cta tidak ikut terpengaruh -- sudah diperiksa, bukan asumsi.

   Catatan: seperti #footer, section#cta juga muncul DUA KALI dengan id
   yang sama dan ter-render bersamaan tanpa kondisi. Selektor id menyasar
   keduanya. Id ganda itu bug lama yang tidak disentuh di sini.
   ===================================================================== */

@media (max-width: 767px) {

	#cta,
	.cta-2 {
		display: none;
	}
}