<Miqdad> voucher

1 files changed, 16 insertions, 13 deletions

diff --git a/src-migrate/modules/promo/styles/voucher.module.css b/src-migrate/modules/promo/styles/voucher.module.css
index 055316ee..ab652a5f 100644
--- a/src-migrate/modules/promo/styles/voucher.module.css
+++ b/src-migrate/modules/promo/styles/voucher.module.css
@@ -2,52 +2,55 @@
     @apply text-h-sm md:text-h-lg font-semibold;
 }
 
+/* beri ruang dari footer */
 .voucher-section {
-    @apply w-full pb-6 md:pb-8; /* beri jarak aman dari footer */
+    @apply w-full pb-6 md:pb-8;
 }
 
+/* biar card bisa full-width tanpa ada gutter ekstra */
 .voucher-section :global(.swiper-slide) {
-    @apply flex items-start; /* bukan items-stretch */
+    @apply flex items-start px-0 md:px-0;
 }
 
 .voucher-card {
-    @apply w-full md:w-11/12 rounded-xl border border-gray-200 shadow-md 
+    /* FULL width (hapus md:w-11/12), tetap horizontal & kompak */
+    @apply w-full rounded-xl border border-gray-200 shadow-md
          p-4 flex items-start gap-x-4 bg-white;
 }
 
 .voucher-image {
-    /* tetap kecil dan proporsional */
-    @apply bg-gray-100 rounded-lg w-4/12 md:w-3/12 h-auto object-contain object-center;
+    /* gambar kecil & stabil */
+    @apply bg-gray-100 rounded-lg w-3/12 md:w-2/12 h-auto object-contain object-center;
 }
 
 .voucher-content {
-    @apply flex-1 flex flex-col justify-between;
+    /* penting: min-w-0 supaya teks bisa wrap/ellipsis dan card memanjang mulus */
+    @apply flex-1 min-w-0 flex flex-col justify-between;
 }
 
 .voucher-title {
     @apply font-medium text-body-1 leading-6 line-clamp-2 mb-1;
 }
-
 .voucher-desc {
     @apply text-gray-800 text-caption-1 line-clamp-1;
 }
 
 .voucher-bottom {
-    /* pisahkan bagian bawah agar tombol tidak nempel */
-    @apply flex flex-col md:flex-row justify-between md:items-center gap-2 md:gap-0 mt-3;
+    /* biar rapih di semua ukuran layar */
+    @apply flex flex-col sm:flex-row justify-between items-start sm:items-center 
+         gap-2 sm:gap-3 mt-3;
 }
 
 .voucher-code-desc {
     @apply text-gray-500 text-caption-1;
 }
-
 .voucher-code {
     @apply text-red-700 font-medium;
 }
 
+/* tombol tetap kecil, tapi lebar penuh di mobile; tidak keluar dari card */
 .voucher-copy {
-    /* tombol tetap kecil, tidak keluar dari card */
-    @apply bg-gray-200 hover:bg-danger-500 text-danger-500 hover:text-white transition-colors 
-         rounded-lg flex items-center justify-center px-5 py-1.5 text-sm whitespace-nowrap 
+    @apply bg-gray-200 hover:bg-danger-500 text-danger-500 hover:text-white transition-colors
+         rounded-lg flex items-center justify-center px-5 py-1.5 text-sm whitespace-nowrap
          w-full md:w-auto;
 }