/* =====================================================================
   SOTA - Member Area
   Mobile-first stylesheet (pendamping Bootstrap 5)
   ===================================================================== */

:root {
	--sota-primary: #be185d;
	--sota-primary-dark: #9d174d;
	--sota-primary-soft: #fce7f3;
	--sota-accent: #fb7185;        /* peach lembut, untuk bidang dekoratif */
	--sota-accent-strong: #e11d48; /* varian pekat, dipakai bila ada teks putih di atasnya */
	--sota-dark: #3b2733;
	--sota-muted: #7c6b74;
	--sota-bg: #fff7fa;
	--sota-line: #f2e3e9;
	--sota-radius: 14px;
	--sota-shadow: 0 2px 10px rgba(136, 19, 55, .08);
	--sota-navbar-h: 72px; /* tinggi panel navigasi bawah */
}

* { -webkit-tap-highlight-color: transparent; }

body {
	background: var(--sota-bg);
	color: var(--sota-dark);
	font-family: 'Segoe UI', system-ui, -apple-system, 'Helvetica Neue', Arial, sans-serif;
	font-size: 15px;
	padding-bottom: calc(var(--sota-navbar-h) + 22px); /* ruang untuk bottom nav */
}

/* Pola coretan (doodle) tipis di latar area konten.
   Dipasang pada lapisan tersendiri di belakang seluruh isi halaman agar
   kartu dan teks (yang berlatar putih pekat) tetap terbaca jelas. */
body::before {
	content: '';
	position: fixed;
	inset: 0;
	z-index: -1;
	pointer-events: none;
	background-image: url('../img/doodle-bg.svg');
	background-repeat: repeat;
	background-size: 220px 220px;
	opacity: .45;
}

a { text-decoration: none; }

.container-narrow {
	width: 100%;
	max-width: 540px;
	margin: 0 auto;
	padding-left: 16px;
	padding-right: 16px;
}

/* ---------------------------------------------------------------- HEADER */
.sota-header {
	position: sticky;
	top: 0;
	z-index: 1030;
	background: #fff;
	border-bottom: 1px solid var(--sota-line);
	padding: 10px 0;
}

.sota-brand {
	display: flex;
	align-items: center;
	gap: 8px;
	color: var(--sota-primary);
	font-weight: 700;
	font-size: 17px;
}

.sota-brand i { font-size: 22px; }

.sota-icon-btn {
	width: 36px;
	height: 36px;
	display: grid;
	place-items: center;
	border-radius: 50%;
	background: var(--sota-bg);
	color: var(--sota-dark);
	font-size: 17px;
}

.sota-avatar {
	width: 36px;
	height: 36px;
	border-radius: 50%;
	background: var(--sota-primary);
	color: #fff;
	display: grid;
	place-items: center;
	font-weight: 700;
	overflow: hidden;
}

.sota-avatar img { width: 100%; height: 100%; object-fit: cover; }

.sota-main { padding-top: 14px; }

/* --------------------------------------------------------------- BUTTONS */
.btn-sota {
	background: var(--sota-primary);
	border-color: var(--sota-primary);
	color: #fff;
	font-weight: 600;
	border-radius: 10px;
}

.btn-sota:hover, .btn-sota:focus {
	background: var(--sota-primary-dark);
	border-color: var(--sota-primary-dark);
	color: #fff;
}

.btn-sota-outline {
	border: 1px solid var(--sota-primary);
	color: var(--sota-primary);
	font-weight: 600;
	border-radius: 10px;
	background: #fff;
}

.btn-sota-outline:hover { background: var(--sota-primary-soft); color: var(--sota-primary-dark); }

/* -------------------------------------------------------- SECTION HEADER */
.sota-section {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin: 20px 0 10px;
}

.sota-section h2 {
	font-size: 16px;
	font-weight: 700;
	margin: 0;
}

.sota-section a {
	font-size: 13px;
	color: var(--sota-primary);
	font-weight: 600;
}

/* ----------------------------------------------------------------- BANNER */
.sota-banner img {
	width: 100%;
	border-radius: var(--sota-radius);
	display: block;
}

.sota-hero {
	background: linear-gradient(135deg, var(--sota-primary), var(--sota-accent));
	color: #fff;
	border-radius: var(--sota-radius);
	padding: 18px;
	box-shadow: var(--sota-shadow);
}

.sota-hero h1 { font-size: 19px; font-weight: 700; margin-bottom: 6px; }
.sota-hero p { font-size: 13px; opacity: .92; margin-bottom: 12px; }

/* --------------------------------------------- HERO DENGAN FOTO (BERANDA) */
/* Foto diletakkan di sisi kiri, teks dan tombol menempati sisi kanan. */
.sota-hero-foto {
	display: flex;
	align-items: stretch;
	padding: 0;
	overflow: hidden;
}

.sota-hero-gambar {
	position: relative;
	flex: 0 0 40%;
	max-width: 40%;
	min-height: 158px;
}

.sota-hero-gambar img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center 28%;
	display: block;

	/* tepi kanan foto dibuat memudar agar menyatu dengan gradasi banner */
	-webkit-mask-image: linear-gradient(90deg, #000 62%, rgba(0, 0, 0, 0) 100%);
	mask-image: linear-gradient(90deg, #000 62%, rgba(0, 0, 0, 0) 100%);
}

/* Varian ilustrasi (SVG berlatar transparan): gambar ditampilkan utuh,
   menempel ke dasar banner, tanpa mask supaya tokoh tidak terpotong. */
.sota-hero-gambar--ilustrasi { flex-basis: 43%; max-width: 43%; }

.sota-hero-gambar--ilustrasi img {
	object-fit: contain;
	object-position: left bottom;
	-webkit-mask-image: none;
	mask-image: none;
}

.sota-hero-teks {
	flex: 1 1 auto;
	min-width: 0;
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding: 16px 16px 16px 14px;
}

.sota-hero-teks h1 { font-size: 17px; line-height: 1.25; }
.sota-hero-teks p { font-size: 12.5px; margin-bottom: 11px; }
.sota-hero-teks .btn { align-self: flex-start; }

/* layar sangat sempit: foto dipersempit supaya teks tetap lapang */
@media (max-width: 380px) {
	.sota-hero-gambar { flex-basis: 33%; max-width: 33%; min-height: 148px; }
	.sota-hero-teks { padding: 13px 12px; }
	.sota-hero-teks h1 { font-size: 15px; }
	.sota-hero-teks p { font-size: 11.5px; }
}

/* --------------------------------------------------------- MENU SHORTCUT */
.sota-menu-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 10px;
	margin-top: 14px;
}

.sota-menu-item {
	/* warna bawaan; tiap menu menimpanya lewat kelas modifier di bawah */
	--ikon: var(--sota-primary);
	--ikon-rgb: 190, 24, 93;
	--ikon-soft: #fde7f0;

	background: #fff;
	border: 1px solid var(--sota-line);
	border-radius: var(--sota-radius);
	padding: 11px 6px 10px;
	text-align: center;
	color: var(--sota-dark);
	box-shadow: var(--sota-shadow);
	transition: transform .15s ease, box-shadow .15s ease;
}

/* wadah bulat di belakang ikon: memberi warna sekaligus kedalaman */
.sota-menu-ikon {
	width: 42px;
	height: 42px;
	margin: 0 auto 6px;
	display: grid;
	place-items: center;
	border-radius: 50%;
	background: linear-gradient(145deg, #fff, var(--ikon-soft));
	box-shadow:
		0 3px 9px rgba(var(--ikon-rgb), .30),
		inset 0 1px 0 rgba(255, 255, 255, .85);
}

.sota-menu-ikon i {
	font-size: 20px;
	line-height: 1;
	color: var(--ikon);
	text-shadow: 0 1px 2px rgba(var(--ikon-rgb), .35);
}

.sota-menu-label { font-size: 11px; font-weight: 600; line-height: 1.2; display: block; }

.sota-menu-item:active {
	transform: translateY(1px);
	box-shadow: 0 1px 5px rgba(136, 19, 55, .10);
}

@media (hover: hover) {
	.sota-menu-item:hover {
		border-color: rgba(var(--ikon-rgb), .45);
		box-shadow: 0 5px 14px rgba(var(--ikon-rgb), .22);
	}
}

/* palet menu: cerah namun tetap serasi dengan nuansa rose SOTA */
.sota-menu-item--ecourse    { --ikon: #e11d48; --ikon-rgb: 225,  29,  72; --ikon-soft: #ffe4ec; }
.sota-menu-item--parentalk  { --ikon: #f59e0b; --ikon-rgb: 245, 158,  11; --ikon-soft: #fef1d8; }
.sota-menu-item--webinar    { --ikon: #fb7185; --ikon-rgb: 251, 113, 133; --ikon-soft: #ffe8ec; }
.sota-menu-item--library    { --ikon: #8b5cf6; --ikon-rgb: 139,  92, 246; --ikon-soft: #efe8fe; }
.sota-menu-item--konsultasi { --ikon: #14b8a6; --ikon-rgb:  20, 184, 166; --ikon-soft: #d9f6f2; }
.sota-menu-item--komunitas  { --ikon: #3b82f6; --ikon-rgb:  59, 130, 246; --ikon-soft: #e0ecfe; }
.sota-menu-item--asesmen    { --ikon: #ef4444; --ikon-rgb: 239,  68,  68; --ikon-soft: #ffe5e5; }
.sota-menu-item--member     { --ikon: #d946ef; --ikon-rgb: 217,  70, 239; --ikon-soft: #fbe3ff; }

/* ------------------------------------------------------------ CARD PRODUK */
.sota-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 12px;
}

.sota-card {
	background: #fff;
	border: 1px solid var(--sota-line);
	border-radius: var(--sota-radius);
	overflow: hidden;
	box-shadow: var(--sota-shadow);
	display: flex;
	flex-direction: column;
	height: 100%;
}

.sota-card-img {
	position: relative;
	aspect-ratio: 16 / 10;
	background: var(--sota-primary-soft);
	overflow: hidden;
}

.sota-card-img img { width: 100%; height: 100%; object-fit: cover; display: block; }

.sota-card-badge {
	position: absolute;
	top: 8px;
	left: 8px;
	background: rgba(190, 24, 93, .92);
	color: #fff;
	font-size: 10px;
	font-weight: 700;
	padding: 3px 8px;
	border-radius: 20px;
	text-transform: uppercase;
	letter-spacing: .3px;
}

.sota-card-body { padding: 10px; display: flex; flex-direction: column; flex: 1; }

.sota-card-title {
	font-size: 13px;
	font-weight: 700;
	color: var(--sota-dark);
	line-height: 1.35;
	margin-bottom: 5px;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.sota-card-meta {
	font-size: 11px;
	color: var(--sota-muted);
	margin-bottom: 6px;
	display: flex;
	align-items: center;
	gap: 4px;
}

.sota-card-price {
	margin-top: auto;
	font-size: 14px;
	font-weight: 700;
	color: var(--sota-primary);
}

.sota-card-price del { font-size: 11px; color: var(--sota-muted); font-weight: 400; margin-left: 4px; }

/* -------------------------------------------------------- LIST (1 KOLOM) */
.sota-list-item {
	background: #fff;
	border: 1px solid var(--sota-line);
	border-radius: var(--sota-radius);
	padding: 10px;
	display: flex;
	gap: 10px;
	margin-bottom: 10px;
	box-shadow: var(--sota-shadow);
}

.sota-list-thumb {
	width: 84px;
	min-width: 84px;
	height: 84px;
	border-radius: 10px;
	object-fit: cover;
	background: var(--sota-primary-soft);
}

.sota-list-body { flex: 1; min-width: 0; }

/* ------------------------------------------------------------ DETAIL PAGE */
.sota-detail-img {
	width: 100%;
	border-radius: var(--sota-radius);
	margin-bottom: 14px;
	display: block;
}

.sota-detail-title { font-size: 19px; font-weight: 700; margin-bottom: 8px; }

.sota-info-row {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 9px 0;
	border-bottom: 1px dashed var(--sota-line);
	font-size: 13px;
}

.sota-info-row i { color: var(--sota-primary); font-size: 15px; }

.sota-ratio-video {
	position: relative;
	padding-top: 56.25%;
	border-radius: var(--sota-radius);
	overflow: hidden;
	background: #000;
}

.sota-ratio-video iframe {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
}

/* ------------------------------------------------------------ STICKY BUY */
.sota-buybar {
	position: fixed;
	left: 0;
	right: 0;
	bottom: var(--sota-navbar-h);
	background: #fff;
	border-top: 1px solid var(--sota-line);
	padding: 10px 0;
	z-index: 1020;
	box-shadow: 0 -2px 10px rgba(136, 19, 55, .07);
}

/* --------------------------------------------------------- BOTTOM NAVBAR */
.sota-bottomnav {
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 1040;
	background: #fff;
	display: grid;
	grid-template-columns: repeat(5, 1fr);
	max-width: 540px;
	margin: 0 auto;
	padding: 7px 4px 6px;
	border-radius: 18px 18px 0 0;
	box-shadow: 0 -4px 18px rgba(136, 19, 55, .14);
}

/* garis warna tipis di bibir atas panel agar navigasi lebih menonjol */
.sota-bottomnav::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 3px;
	border-radius: 18px 18px 0 0;
	background: linear-gradient(90deg, var(--sota-primary), var(--sota-accent), #f59e0b);
}

.sota-bottomnav a {
	/* warna bawaan; tiap tautan menimpanya lewat kelas nav--* di bawah */
	--nav: var(--sota-primary);
	--nav-rgb: 190, 24, 93;
	--nav-soft: #fde7f0;

	padding: 4px 2px 2px;
	text-align: center;
	color: var(--sota-dark);
	font-size: 11px;
	font-weight: 700;
}

/* pembungkus ikon: menjadi sorotan berwarna sekaligus wadah badge */
.sota-bottomnav-ikon {
	position: relative;
	display: grid;
	place-items: center;
	width: 44px;
	height: 30px;
	margin: 0 auto 3px;
	border-radius: 12px;
	background: var(--nav-soft);
	transition: box-shadow .15s ease, transform .15s ease;
}

.sota-bottomnav-ikon i {
	font-size: 18px;
	line-height: 1;
	color: var(--nav);
}

/* menu yang sedang dibuka: sorotan pekat dan label sewarna ikon */
.sota-bottomnav a.active .sota-bottomnav-ikon {
	background: var(--nav);
	box-shadow: 0 3px 10px rgba(var(--nav-rgb), .45);
	transform: translateY(-1px);
}

.sota-bottomnav a.active .sota-bottomnav-ikon i { color: #fff; }
.sota-bottomnav a.active { color: var(--nav); }

.sota-cart-badge-nav {
	top: -5px;
	right: -5px;
}

/* label ditahan satu baris supaya tinggi navigasi tetap rata */
.sota-bottomnav-label {
	display: block;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	letter-spacing: .1px;
}

/* sorotan khas untuk tiap menu */
.sota-bottomnav .nav--home    { --nav: #e11d48; --nav-rgb: 225,  29,  72; --nav-soft: #ffe4ec; }
.sota-bottomnav .nav--event   { --nav: #14b8a6; --nav-rgb:  20, 184, 166; --nav-soft: #d9f6f2; }
.sota-bottomnav .nav--myevent { --nav: #3b82f6; --nav-rgb:  59, 130, 246; --nav-soft: #e0ecfe; }
.sota-bottomnav .nav--cart    { --nav: #f59e0b; --nav-rgb: 245, 158,  11; --nav-soft: #fef1d8; }
.sota-bottomnav .nav--akun    { --nav: #8b5cf6; --nav-rgb: 139,  92, 246; --nav-soft: #efe8fe; }

/* ---------------------------------------------------------------- FOOTER */
.sota-footer {
	background: #fff;
	border-top: 1px solid var(--sota-line);
	padding: 22px 0 18px;
	margin-top: 26px;
	text-align: center;
}

.sota-footer-brand {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 7px;
	color: var(--sota-primary);
	font-size: 16px;
	margin-bottom: 4px;
}

.sota-footer-tagline { font-size: 12px; color: var(--sota-muted); margin-bottom: 12px; }

.sota-footer-links {
	list-style: none;
	padding: 0;
	margin: 0 0 12px;
	display: flex;
	flex-direction: column;
	gap: 7px;
}

.sota-footer-links a { font-size: 13px; color: var(--sota-dark); }
.sota-footer-links a:hover { color: var(--sota-primary); }

.sota-footer-social { display: flex; justify-content: center; gap: 14px; margin-bottom: 12px; }

.sota-footer-social a {
	width: 34px;
	height: 34px;
	display: grid;
	place-items: center;
	border-radius: 50%;
	background: var(--sota-bg);
	color: var(--sota-primary);
	font-size: 16px;
}

.sota-copy { font-size: 11px; color: var(--sota-muted); margin: 0; }

/* ------------------------------------------------------------ EMPTY STATE */
.sota-empty { text-align: center; padding: 40px 18px; color: var(--sota-muted); }
.sota-empty i { font-size: 46px; color: var(--sota-line); display: block; margin-bottom: 10px; }
.sota-empty p { font-size: 13px; margin-bottom: 14px; }

/* ------------------------------------------------------------- AKUN MENU */
.sota-akun-menu { background: #fff; border: 1px solid var(--sota-line); border-radius: var(--sota-radius); overflow: hidden; }

.sota-akun-menu a {
	display: flex;
	align-items: center;
	gap: 11px;
	padding: 13px 14px;
	color: var(--sota-dark);
	border-bottom: 1px solid var(--sota-line);
	font-size: 14px;
}

.sota-akun-menu a:last-child { border-bottom: 0; }
.sota-akun-menu a i:first-child { color: var(--sota-primary); font-size: 17px; }
.sota-akun-menu a .ms-auto { color: var(--sota-muted); font-size: 13px; }

/* ------------------------------------------------------------- STAT CARD */
.sota-stat {
	background: #fff;
	border: 1px solid var(--sota-line);
	border-radius: var(--sota-radius);
	padding: 13px;
	text-align: center;
	box-shadow: var(--sota-shadow);
}

.sota-stat .val { font-size: 17px; font-weight: 700; color: var(--sota-primary); }
.sota-stat .lbl { font-size: 11px; color: var(--sota-muted); }

/* ------------------------------------------------------------ DESKTOP UP */
@media (min-width: 768px) {
	.container-narrow { max-width: 720px; }
	.sota-grid { grid-template-columns: repeat(3, 1fr); }
	.sota-menu-grid { grid-template-columns: repeat(6, 1fr); }

	.sota-hero-gambar { flex-basis: 38%; max-width: 38%; min-height: 188px; }
	.sota-hero-teks { padding: 20px 22px 20px 16px; }
	.sota-hero-teks h1 { font-size: 21px; }
	.sota-hero-teks p { font-size: 13.5px; }
}

/* =====================================================================
   KERANJANG & CHECKOUT
   ===================================================================== */

/* -------------------------------------------------- badge pada ikon cart */
.sota-cart-badge {
	position: absolute;
	top: -3px;
	right: -3px;
	min-width: 17px;
	height: 17px;
	padding: 0 4px;
	border-radius: 9px;
	background: var(--sota-accent-strong);
	color: #fff;
	font-size: 10px;
	font-weight: 700;
	line-height: 17px;
	text-align: center;
}

/* -------------------------------------------------- baris item keranjang */
.sota-cart-item {
	display: flex;
	gap: 12px;
	background: #fff;
	border: 1px solid var(--sota-line);
	border-radius: var(--sota-radius);
	padding: 10px;
	margin-bottom: 10px;
	box-shadow: var(--sota-shadow);
}

.sota-cart-item.is-habis { opacity: .6; }

.sota-cart-thumb {
	width: 78px;
	height: 78px;
	border-radius: 10px;
	object-fit: cover;
	flex-shrink: 0;
}

.sota-cart-body {
	flex: 1;
	min-width: 0;
	display: flex;
	flex-direction: column;
}

.sota-cart-judul {
	color: var(--sota-dark);
	font-size: 13px;
	font-weight: 600;
	line-height: 1.35;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.sota-cart-meta {
	color: var(--sota-muted);
	font-size: 11px;
	margin-top: 2px;
}

.sota-cart-alert {
	display: inline-block;
	align-self: flex-start;
	margin-top: 4px;
	padding: 1px 7px;
	border-radius: 20px;
	background: #fee2e2;
	color: #b91c1c;
	font-size: 10px;
	font-weight: 600;
}

.sota-cart-alert.warn {
	background: #fef3c7;
	color: #92400e;
}

.sota-cart-bawah {
	display: flex;
	align-items: center;
	gap: 8px;
	margin-top: auto;
	padding-top: 6px;
}

.sota-cart-bawah .sota-harga {
	color: var(--sota-primary);
	font-size: 14px;
	font-weight: 700;
	margin-right: auto;
}

.sota-cart-hapus {
	color: #dc2626;
	font-size: 15px;
	padding: 2px 4px;
}

/* -------------------------------------------------- pengatur kuantitas */
.sota-qty {
	display: flex;
	align-items: center;
	border: 1px solid var(--sota-line);
	border-radius: 8px;
	overflow: hidden;
}

.sota-qty-btn {
	width: 28px;
	height: 28px;
	border: 0;
	background: var(--sota-primary-soft);
	color: var(--sota-dark);
	font-size: 15px;
	line-height: 1;
}

.sota-qty-btn:active { background: var(--sota-primary-soft); }

.sota-qty-input {
	width: 34px;
	height: 28px;
	border: 0;
	border-left: 1px solid var(--sota-line);
	border-right: 1px solid var(--sota-line);
	text-align: center;
	font-size: 13px;
	font-weight: 600;
}

.sota-qty-input:focus { outline: none; }

.sota-cart-aksi {
	display: flex;
	gap: 10px;
	margin-top: 14px;
}

.sota-link-hapus,
.sota-link-ubah {
	color: var(--sota-muted);
	font-size: 12px;
	font-weight: 600;
}

.sota-link-ubah { color: var(--sota-primary); }

/* -------------------------------------------------- keadaan kosong */
.sota-kosong {
	text-align: center;
	padding: 48px 16px;
}

.sota-kosong i {
	font-size: 46px;
	color: var(--sota-line);
	display: block;
	margin-bottom: 12px;
}

/* -------------------------------------------------- penanda langkah */
.sota-stepper {
	display: flex;
	list-style: none;
	padding: 0;
	margin: 0 0 16px;
	counter-reset: langkah;
}

.sota-stepper li {
	flex: 1;
	position: relative;
	text-align: center;
	color: var(--sota-muted);
	font-size: 11px;
	font-weight: 600;
}

.sota-stepper li span {
	display: block;
	width: 26px;
	height: 26px;
	margin: 0 auto 4px;
	border-radius: 50%;
	background: #fff;
	border: 2px solid var(--sota-line);
	color: var(--sota-muted);
	font-size: 12px;
	line-height: 22px;
}

/* garis penghubung antarlangkah */
.sota-stepper li::before {
	content: '';
	position: absolute;
	top: 13px;
	left: -50%;
	width: 100%;
	height: 2px;
	background: var(--sota-line);
	z-index: 0;
}

.sota-stepper li:first-child::before { display: none; }

.sota-stepper li span { position: relative; z-index: 1; }

.sota-stepper li.done span,
.sota-stepper li.active span {
	background: var(--sota-primary);
	border-color: var(--sota-primary);
	color: #fff;
}

.sota-stepper li.done::before,
.sota-stepper li.active::before { background: var(--sota-primary); }

.sota-stepper li.active { color: var(--sota-primary); }

/* -------------------------------------------------- panel checkout */
.sota-panel {
	background: #fff;
	border: 1px solid var(--sota-line);
	border-radius: var(--sota-radius);
	box-shadow: var(--sota-shadow);
	margin-bottom: 14px;
	overflow: hidden;
}

.sota-panel-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 10px 14px;
	border-bottom: 1px solid var(--sota-line);
	background: #fdf2f6;
	font-size: 13px;
	font-weight: 700;
}

.sota-panel-head i { color: var(--sota-primary); }

.sota-ringkas-item {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 10px 14px;
	border-bottom: 1px solid var(--sota-line);
}

.sota-ringkas-item:last-child { border-bottom: 0; }

.sota-ringkas-item img {
	width: 44px;
	height: 44px;
	border-radius: 8px;
	object-fit: cover;
}

.sota-ringkas-item .judul {
	font-size: 12px;
	font-weight: 600;
	line-height: 1.3;
}

.sota-ringkas-item .meta {
	color: var(--sota-muted);
	font-size: 11px;
}

.sota-ringkas-item .harga {
	margin-left: auto;
	font-size: 12px;
	font-weight: 700;
	white-space: nowrap;
}

.sota-akun-aktif {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 12px 14px;
	font-size: 13px;
}

/* -------------------------------------------------- pilihan cara masuk */
.sota-tab-auth {
	display: flex;
	gap: 6px;
	background: #fbeef3;
	border-radius: 10px;
	padding: 4px;
	margin-bottom: 14px;
}

.sota-tab-auth button {
	flex: 1;
	border: 0;
	background: transparent;
	border-radius: 7px;
	padding: 7px 4px;
	color: var(--sota-muted);
	font-size: 12px;
	font-weight: 600;
}

.sota-tab-auth button.aktif {
	background: #fff;
	color: var(--sota-primary);
	box-shadow: var(--sota-shadow);
}

.sota-pemisah {
	position: relative;
	text-align: center;
	margin: 14px 0;
}

.sota-pemisah::before {
	content: '';
	position: absolute;
	top: 50%;
	left: 0;
	width: 100%;
	height: 1px;
	background: var(--sota-line);
}

.sota-pemisah span {
	position: relative;
	background: #fff;
	padding: 0 10px;
	color: var(--sota-muted);
	font-size: 11px;
}

.sota-input-sandi { position: relative; }

.sota-input-sandi .form-control { padding-right: 42px; }

.sota-lihat-sandi {
	position: absolute;
	top: 50%;
	right: 6px;
	transform: translateY(-50%);
	border: 0;
	background: transparent;
	color: var(--sota-muted);
	padding: 4px 8px;
}

.sota-opsi-kirim {
	border: 1px solid var(--sota-line);
	border-radius: 10px;
	padding: 9px 10px 9px 32px;
	margin-bottom: 8px;
}

.sota-opsi-kirim:has(input:checked) {
	border-color: var(--sota-primary);
	background: var(--sota-primary-soft);
}

/* -------------------------------------------------- bar bayar melekat */
.sota-bayar-bar {
	position: sticky;
	bottom: calc(var(--sota-navbar-h) + 4px);
	z-index: 1020;
	display: flex;
	align-items: center;
	gap: 12px;
	background: #fff;
	border: 1px solid var(--sota-line);
	border-radius: var(--sota-radius);
	box-shadow: 0 -2px 14px rgba(136, 19, 55, .11);
	padding: 10px 14px;
	margin-bottom: 10px;
}

.sota-bayar-bar .label {
	color: var(--sota-muted);
	font-size: 11px;
}

.sota-bayar-bar .nilai {
	color: var(--sota-primary);
	font-size: 16px;
	font-weight: 700;
}

.sota-bayar-bar .btn { margin-left: auto; }

/* -------------------------------------------------- tombol Google */
.btn-google {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	border: 1px solid var(--sota-line);
	background: #fff;
	color: var(--sota-dark);
	font-size: 13px;
	font-weight: 600;
	padding: 9px;
}

.btn-google:hover { background: #fdf2f6; }

/* tombol submit bawaan form checkout: hanya penangkap tombol Enter */
.sota-submit-bawaan {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	border: 0;
	opacity: 0;
	pointer-events: none;
}

/* -------------------------------------------------- tombol garis luar */
.btn-outline-sota {
	border: 1px solid var(--sota-primary);
	color: var(--sota-primary);
	background: #fff;
}

.btn-outline-sota:hover,
.btn-outline-sota:active {
	background: var(--sota-primary);
	color: #fff;
}

/* -------------------------------------------------- notifikasi ringan */
.sota-toast {
	position: fixed;
	left: 50%;
	bottom: calc(var(--sota-navbar-h) + 22px);
	z-index: 1080;
	transform: translate(-50%, 16px);
	max-width: 88vw;
	padding: 9px 16px;
	border-radius: 24px;
	background: var(--sota-dark);
	color: #fff;
	font-size: 12.5px;
	box-shadow: 0 6px 20px rgba(136, 19, 55, .25);
	opacity: 0;
	transition: opacity .25s ease, transform .25s ease;
}

.sota-toast.tampil {
	opacity: 1;
	transform: translate(-50%, 0);
}

.sota-toast.gagal { background: #b91c1c; }

/* =====================================================================
   INTERAKSI — hover, tekan (tap), dan fokus keyboard.
   Berlaku sama di mobile maupun desktop; @media (hover: hover) memastikan
   efek hover hanya aktif pada perangkat berpenunjuk (mouse), sedangkan
   efek :active tetap berjalan di layar sentuh.
   ===================================================================== */

@keyframes sota-fade-in-down {
	from { opacity: 0; transform: translateY(-6px); }
	to   { opacity: 1; transform: translateY(0); }
}

@keyframes sota-pulse {
	0%   { transform: scale(1); }
	45%  { transform: scale(1.35); }
	100% { transform: scale(1); }
}

@keyframes sota-pop-in {
	from { opacity: 0; transform: scale(.85); }
	to   { opacity: 1; transform: scale(1); }
}

/* ---- jejak fokus keyboard yang konsisten pada seluruh elemen dapat-klik */
a:focus-visible,
button:focus-visible,
.btn:focus-visible,
.form-control:focus-visible,
input:focus-visible,
textarea:focus-visible {
	outline: 2px solid var(--sota-primary);
	outline-offset: 2px;
	border-radius: 4px;
}

/* ---- tombol & ikon: bereaksi saat ditekan (mobile) dan di-hover (desktop) */
.btn-sota,
.btn-sota-outline,
.btn-outline-sota,
.btn-google,
.sota-icon-btn,
.sota-avatar,
.sota-qty-btn,
.sota-lihat-sandi,
.sota-cart-hapus {
	transition: transform .15s ease, box-shadow .15s ease,
		background-color .15s ease, color .15s ease;
}

.btn-sota:active,
.btn-sota-outline:active,
.btn-outline-sota:active,
.btn-google:active,
.sota-icon-btn:active,
.sota-avatar:active,
.sota-qty-btn:active,
.sota-cart-hapus:active {
	transform: scale(.94);
}

@media (hover: hover) {
	.btn-sota:hover         { box-shadow: 0 5px 14px rgba(190, 24, 93, .28); }
	.btn-sota-outline:hover,
	.btn-outline-sota:hover { box-shadow: 0 4px 12px rgba(190, 24, 93, .18); }
	.sota-icon-btn:hover    { background: var(--sota-primary-soft); color: var(--sota-primary); }
	.sota-avatar:hover      { box-shadow: 0 3px 10px rgba(190, 24, 93, .35); }
	.sota-cart-hapus:hover  { background: #fee2e2; border-radius: 6px; }
	.sota-opsi-kirim:hover  { border-color: var(--sota-primary); }
}

/* ---- menu akun: seluruh baris bereaksi, bukan hanya ikonnya */
.sota-akun-menu a { transition: background-color .15s ease, padding-left .15s ease; }
.sota-akun-menu a:active { background: var(--sota-bg); }

@media (hover: hover) {
	.sota-akun-menu a:hover { background: var(--sota-primary-soft); padding-left: 18px; }
}

/* ---- navigasi bawah: ikon "melompat" ringan saat disentuh / aktif */
.sota-bottomnav a { transition: color .15s ease; }

.sota-bottomnav-ikon {
	transition: transform .15s cubic-bezier(.34, 1.56, .64, 1),
		background .15s ease, box-shadow .15s ease;
}

.sota-bottomnav a:active .sota-bottomnav-ikon { transform: scale(.88); }
.sota-bottomnav a.active .sota-bottomnav-ikon { animation: sota-pop-in .25s ease; }

/* ---- kartu & baris produk: sedikit terangkat saat di-hover (desktop) */
.sota-card, .sota-list-item, .sota-menu-item {
	transition: transform .15s ease, box-shadow .15s ease;
}

@media (hover: hover) {
	.sota-card:hover      { transform: translateY(-3px); box-shadow: 0 8px 20px rgba(136, 19, 55, .16); }
	.sota-list-item:hover { box-shadow: 0 8px 18px rgba(136, 19, 55, .14); }
}

/* ---- footer sosial: naik & berubah warna saat disentuh */
.sota-footer-social a { transition: transform .15s ease, background-color .15s ease, color .15s ease; }
.sota-footer-social a:active { transform: scale(.9); }

@media (hover: hover) {
	.sota-footer-social a:hover { background: var(--sota-primary-soft); transform: translateY(-2px); }
}

/* ---- badge keranjang: berdenyut singkat setiap kali jumlahnya berubah */
.sota-cart-badge.sota-pulsa,
.sota-cart-badge-nav.sota-pulsa { animation: sota-pulse .4s ease; }

/* ---- alert Bootstrap: animasi masuk + aksen warna di tepi kiri */
.alert {
	animation: sota-fade-in-down .25s ease;
	border-left: 4px solid transparent;
	border-radius: 10px;
}

.alert-success { border-left-color: #198754; }
.alert-danger  { border-left-color: #dc3545; }
.alert-warning { border-left-color: #ffc107; }
.alert-info    { border-left-color: #0dcaf0; }

/* Alert di sini memakai py-2/small (ringkas), sehingga posisi tombol tutup
   bawaan Bootstrap (absolute, padding besar) membuat jaraknya tidak pas.
   Dipakai flex + gap agar teks dan tombol tutup selalu sejajar-rapi. */
.alert.alert-dismissible {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	padding-right: 14px;
}

.alert.alert-dismissible .btn-close {
	position: static;
	flex-shrink: 0;
	margin: 0;
	padding: .4rem;
	transition: transform .15s ease;
}

.alert .btn-close:hover { transform: rotate(90deg); }

/* ---- modal konfirmasi bertema SOTA (dipakai lewat atribut data-confirm) */
.sota-modal .modal-dialog {
	transition: transform .25s cubic-bezier(.34, 1.56, .64, 1), opacity .2s ease;
}

.sota-modal .modal-content {
	border: 0;
	border-radius: var(--sota-radius);
	box-shadow: 0 12px 34px rgba(59, 27, 41, .28);
}

.sota-modal-icon {
	width: 54px;
	height: 54px;
	margin: 0 auto 10px;
	display: grid;
	place-items: center;
	border-radius: 50%;
	background: var(--sota-primary-soft);
	color: var(--sota-primary);
	font-size: 26px;
	animation: sota-pop-in .25s ease;
}

.sota-modal .modal-footer .btn { border-radius: 10px; }

/* ---- skeleton loading & shimmer (lazy loading konten) */
@keyframes sota-shimmer {
	0%   { background-position: -200% 0; }
	100% { background-position: 200% 0; }
}

.sota-skeleton-wrapper {
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.sota-skeleton-card {
	background: #fff;
	border: 1px solid var(--sota-line);
	border-radius: var(--sota-radius);
	padding: 14px;
	box-shadow: var(--sota-shadow);
	pointer-events: none;
}

.sota-skeleton-bar {
	height: 12px;
	border-radius: 6px;
	background: linear-gradient(90deg, #f5eef1 25%, #fce7f3 50%, #f5eef1 75%);
	background-size: 200% 100%;
	animation: sota-shimmer 1.4s infinite ease-in-out;
}