ok

src/Checkout.module.css

@@ -0,0 +1,183 @@
+.checkoutCard {
+  border-radius: 1rem; /* rounded-2xl */
+  box-shadow: 0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -4px rgba(0,0,0,0.1);
+  overflow: hidden;
+  display: flex;
+  flex-direction: column; /* default mobile: vertical stack */
+  max-width: 28rem; /* max-w-md */
+  margin-left: auto;
+  margin-right: auto;
+  flex-grow: 1; /* agar bisa melebar dalam container flex */
+}
+
+.cartSection, .checkoutSection {
+  flex: 1; /* agar keduanya bisa melebar seimbang */
+}
+
+.cartSection {
+  padding: 1.5rem 1.5rem; /* p-6 */
+  background-color: #ececec; /* gray-50 */
+  border-bottom: 1px solid #F3F4F6; /* border-gray-100 */
+}
+
+.cartTitle {
+  font-size: 1.25rem; /* text-xl */
+  font-weight: 600; /* font-semibold */
+  color: #1F2937; /* gray-800 */
+  margin-bottom: 1rem;
+}
+
+.cartList {
+  list-style: none;
+  padding: 0;
+  margin: 0;
+  display: flex;
+  flex-direction: column;
+  gap: 1rem; /* space-y-4 */
+}
+
+.cartItem {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  gap: 1rem;
+}
+
+.itemDetails {
+  display: flex;
+  align-items: center;
+  gap: 1rem;
+}
+
+.productImage {
+  width: 3.5rem; /* 14 */
+  height: 3.5rem;
+  border-radius: 0.5rem;
+  object-fit: cover;
+}
+
+.itemText {
+  font-weight: 500;
+  color: #1F2937;
+  margin: 0;
+}
+
+.itemPrice {
+  font-size: 0.875rem; /* text-sm */
+  color: #6B7280; /* gray-500 */
+  margin: 0;
+}
+
+.removeBtn {
+  font-weight: 700;
+  font-size: 1.25rem;
+  color: #EF4444; /* red-500 */
+  background: none;
+  border: none;
+  cursor: pointer;
+  transition: color 0.2s ease-in-out;
+}
+
+.removeBtn:hover {
+  color: #B91C1C; /* red-700 */
+}
+
+.checkoutSection {
+  padding: 2rem; /* p-8 */
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  flex-grow: 1;
+  background-color: white;
+}
+
+.checkoutTitle {
+  font-size: 1.25rem;
+  font-weight: 600;
+  color: #1F2937;
+  margin-bottom: 1.5rem;
+}
+
+.inputNote {
+  width: 100%; /* tetap full width agar input memenuhi container */
+  padding: 0.75rem 1rem;
+  border: 1px solid #D1D5DB; /* gray-300 */
+  border-radius: 0.5rem;
+  font-size: 1rem;
+  transition: box-shadow 0.2s ease, border-color 0.2s ease;
+  box-sizing: border-box; /* pastikan padding masuk ke width */
+}
+
+.inputNote:focus {
+  outline: none;
+  border-color: #3B82F6; /* blue-500 */
+  box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.5);
+}
+
+.paymentBtn {
+  width: 100%; /* tombol harus full lebar */
+  background-color: #2563EB; /* blue-600 */
+  color: white;
+  font-weight: 700;
+  padding: 0.75rem 0;
+  border-radius: 0.5rem;
+  font-size: 1.125rem; /* text-lg */
+  cursor: pointer;
+  border: none;
+  box-shadow: 0 4px 6px rgba(37, 99, 235, 0.5);
+  transition: background-color 0.2s ease;
+}
+
+.paymentBtn:hover {
+  background-color: #1D4ED8; /* blue-700 */
+}
+
+.footerText {
+  font-size: 0.75rem; /* text-xs */
+  color: #6B7280; /* gray-500 */
+  text-align: center;
+  margin-top: 2rem;
+}
+
+.footerLink {
+  display: inline-block;
+  padding: 0.25rem 0.5rem;
+  border-radius: 0.375rem;
+  color: inherit;
+  text-decoration: none;
+  transition: background-color 0.2s ease;
+}
+
+.footerLink:hover {
+  background-color: #E5E7EB; /* gray-200 */
+}
+
+.footerHighlight {
+  font-weight: 600;
+  color: #374151; /* gray-700 */
+}
+
+/* Responsive layout for desktop */
+@media (min-width: 641px) {
+  .checkoutCard {
+    flex-direction: row; /* dua kolom berdampingan */
+    max-width: 64rem; /* lebar container desktop */
+  }
+
+  .cartSection {
+    border-bottom: none; /* hilangkan border bawah */
+    border-right: 1px solid #F3F4F6; /* border kanan */
+    padding: 2rem;
+  }
+
+  .checkoutSection {
+    padding: 2rem 3rem;
+  }
+}
+
+/* Responsive layout for small screens */
+@media (max-width: 640px) {
+  .checkoutCard {
+    max-width: 100%;
+  }
+}