From 579f1c21b5c3a67fd3b606490ef1166fcec68e41 Mon Sep 17 00:00:00 2001
From: ariefabbauftech-ai <arief.abbauftech@gmail.com>
Date: Fri, 24 Oct 2025 15:25:55 +0700
Subject: [PATCH] [Update]

---
 .../templates/KhitanBasic/Event.vue           |  92 ++++++++-
 .../templates/KhitanBasic/Gallery.vue         | 156 ++++++++++++++-
 .../templates/KhitanBasic/GuestBook.vue       | 181 ++++++++++++++----
 .../templates/KhitanBasic/ThankYou.vue        | 140 ++++++++++++--
 4 files changed, 505 insertions(+), 64 deletions(-)

diff --git a/proyek-frontend/app/components/templates/KhitanBasic/Event.vue b/proyek-frontend/app/components/templates/KhitanBasic/Event.vue
index 49cab4e..3704ef7 100644
--- a/proyek-frontend/app/components/templates/KhitanBasic/Event.vue
+++ b/proyek-frontend/app/components/templates/KhitanBasic/Event.vue
@@ -1,22 +1,60 @@
 <template>
-  <section class="text-center space-y-6 p-6">
-    <h2 class="text-3xl font-bold text-blue-700">📅 Waktu & Tempat</h2>
+  <section
+    class="relative min-h-[80vh] flex flex-col items-center justify-center text-center text-white px-6 py-12 overflow-hidden"
+  >
+    <!-- 🌌 Efek Background -->
+    <div class="absolute inset-0 bg-gradient-to-br from-indigo-900 via-purple-900 to-blue-900 opacity-90"></div>
+    <div class="absolute w-[500px] h-[500px] bg-purple-400/20 blur-[180px] rounded-full top-1/3 left-1/2 -translate-x-1/2"></div>
+
+    <!-- 🌙 Judul -->
+    <h2
+      class="relative text-4xl sm:text-5xl font-extrabold text-yellow-300 drop-shadow-[0_0_25px_rgba(255,255,255,0.3)] mb-10 animate-fade-in"
+    >
+      📅 Waktu & Tempat
+    </h2>
+
+    <!-- 💫 Konten utama -->
+    <div
+      class="relative flex flex-col items-center space-y-6 bg-white/10 backdrop-blur-2xl border border-white/20 px-10 py-12 rounded-[3rem] shadow-[0_0_40px_rgba(255,255,255,0.1)] hover:shadow-[0_0_60px_rgba(255,255,255,0.2)] transition-all duration-700 max-w-3xl w-full sm:w-[85%] md:w-[70%] animate-fade-in-slow"
+    >
+      <div class="space-y-5 text-lg sm:text-xl font-medium text-blue-100">
+        <p class="flex flex-col items-center">
+          <span class="text-yellow-300 font-semibold flex items-center gap-2">
+            🗓️ Hari & Tanggal:
+          </span>
+          {{ hari_tanggal_acara }}
+        </p>
+
+        <p class="flex flex-col items-center">
+          <span class="text-yellow-300 font-semibold flex items-center gap-2">
+            ⏰ Waktu:
+          </span>
+          {{ waktu }}
+        </p>
+
+        <p class="flex flex-col items-center">
+          <span class="text-yellow-300 font-semibold flex items-center gap-2">
+            📍 Alamat:
+          </span>
+          {{ alamat }}
+        </p>
+      </div>
 
-    <div class="bg-white/70 rounded-2xl shadow-md p-6 max-w-lg mx-auto space-y-3">
-      <p><strong>Hari & Tanggal:</strong> {{ hari_tanggal_acara }}</p>
-      <p><strong>Waktu:</strong> {{ waktu }}</p>
-      <p><strong>Alamat:</strong> {{ alamat }}</p>
       <a
         v-if="link_gmaps"
         :href="link_gmaps"
         target="_blank"
-        class="text-blue-600 underline"
-        >Lihat di Google Maps</a
+        class="mt-4 inline-flex items-center justify-center gap-2 bg-yellow-400 hover:bg-yellow-500 text-gray-900 font-semibold px-8 py-3 rounded-full shadow-lg transition-transform duration-300 hover:scale-105"
       >
+        🗺️ Lihat di Google Maps
+      </a>
     </div>
 
-    <div v-if="hitung_mundur" class="mt-8">
-      <h3 class="font-semibold text-gray-700 mb-2">Hitung Mundur Menuju Acara:</h3>
+    <!-- ⏳ Hitung Mundur -->
+    <div v-if="hitung_mundur" class="relative mt-12 text-center animate-fade-in-delay">
+      <h3 class="font-semibold text-yellow-300 mb-3 text-lg sm:text-xl">
+        Hitung Mundur Menuju Acara:
+      </h3>
       <CountdownTimer :targetDate="hitung_mundur" />
     </div>
   </section>
@@ -24,6 +62,7 @@
 
 <script setup>
 import CountdownTimer from '~/components/templates/common/CountdownTimer.vue'
+
 defineProps({
   hari_tanggal_acara: String,
   waktu: String,
@@ -32,3 +71,36 @@ defineProps({
   hitung_mundur: String
 })
 </script>
+
+<style scoped>
+@keyframes fade-in {
+  from { opacity: 0; transform: translateY(20px); }
+  to { opacity: 1; transform: translateY(0); }
+}
+.animate-fade-in { animation: fade-in 1s ease-out; }
+
+@keyframes fade-in-slow {
+  from { opacity: 0; transform: scale(0.95); }
+  to { opacity: 1; transform: scale(1); }
+}
+.animate-fade-in-slow { animation: fade-in-slow 1.3s ease-out; }
+
+@keyframes fade-in-delay {
+  from { opacity: 0; transform: translateY(10px); }
+  to { opacity: 1; transform: translateY(0); }
+}
+.animate-fade-in-delay { animation: fade-in-delay 1.8s ease-out; }
+
+@media (max-width: 640px) {
+  section {
+    padding: 3rem 1.2rem;
+  }
+  h2 {
+    font-size: 1.9rem;
+  }
+  .max-w-3xl {
+    padding: 1.5rem;
+    border-radius: 2rem;
+  }
+}
+</style>
diff --git a/proyek-frontend/app/components/templates/KhitanBasic/Gallery.vue b/proyek-frontend/app/components/templates/KhitanBasic/Gallery.vue
index f7193e8..88455b7 100644
--- a/proyek-frontend/app/components/templates/KhitanBasic/Gallery.vue
+++ b/proyek-frontend/app/components/templates/KhitanBasic/Gallery.vue
@@ -1,19 +1,159 @@
 <template>
-  <section class="text-center p-6">
-    <h2 class="text-3xl font-bold text-blue-700 mb-6">📸 Galeri</h2>
+  <section
+    class="relative min-h-screen w-full flex flex-col items-center justify-center text-center text-white overflow-hidden bg-gradient-to-br from-indigo-900 via-purple-900 to-blue-900"
+  >
+    <!-- 🌟 Bintang & Partikel -->
+    <div class="absolute inset-0 overflow-hidden z-0">
+      <div
+        v-for="(star, i) in stars"
+        :key="i"
+        class="absolute bg-white rounded-full animate-twinkle"
+        :style="{
+          top: star.top + '%',
+          left: star.left + '%',
+          width: star.size + 'px',
+          height: star.size + 'px',
+          animationDelay: star.delay + 's',
+          opacity: star.opacity
+        }"
+      ></div>
+    </div>
 
-    <div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-4 max-w-4xl mx-auto">
-      <img
+    <!-- 🌈 Aurora / Cahaya -->
+    <div class="absolute top-0 left-0 w-full h-full bg-gradient-to-br from-blue-500/10 via-purple-600/20 to-pink-500/10 blur-3xl"></div>
+
+    <!-- ☁️ Awan lembut -->
+    <div class="absolute bottom-10 left-[-100px] w-[300px] h-[120px] bg-white/10 rounded-full blur-2xl animate-cloud-slow"></div>
+    <div class="absolute top-20 right-[-120px] w-[350px] h-[150px] bg-white/10 rounded-full blur-3xl animate-cloud-medium"></div>
+
+    <!-- 📸 Judul -->
+    <h2
+      class="relative z-10 text-4xl sm:text-5xl font-extrabold text-yellow-300 drop-shadow-[0_0_25px_rgba(255,255,255,0.3)] mb-10 animate-fade-in"
+    >
+      📸 Galeri
+    </h2>
+
+    <!-- 🖼️ Grid Galeri -->
+    <div
+      class="relative z-10 grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-6 sm:gap-8 max-w-6xl mx-auto px-6 sm:px-8 animate-fade-in-slow"
+    >
+      <div
         v-for="(img, index) in images"
         :key="index"
-        :src="img"
-        class="rounded-xl shadow-md hover:scale-105 transition duration-300"
-        alt="Foto Galeri"
-      />
+        class="group relative overflow-hidden rounded-3xl shadow-[0_0_30px_rgba(255,255,255,0.15)] hover:shadow-[0_0_60px_rgba(255,255,255,0.25)] transition-all duration-700"
+      >
+        <!-- 🌠 Efek cahaya bawah -->
+        <div
+          class="absolute inset-0 bg-gradient-to-t from-black/60 via-transparent to-transparent opacity-60 group-hover:opacity-80 transition duration-500"
+        ></div>
+
+        <!-- 🖼️ Gambar -->
+        <img
+          :src="img"
+          alt="Foto Galeri"
+          class="w-full h-full object-cover rounded-3xl transform group-hover:scale-110 transition-all duration-700"
+        />
+      </div>
     </div>
   </section>
 </template>
 
 <script setup>
+import { ref, onMounted } from 'vue'
 defineProps({ images: Array })
+
+// 🌟 Generate bintang acak
+const stars = ref([])
+
+const generateStars = () => {
+  const count = 70
+  const temp = []
+  for (let i = 0; i < count; i++) {
+    temp.push({
+      top: Math.random() * 100,
+      left: Math.random() * 100,
+      size: Math.random() * 2 + 1,
+      delay: Math.random() * 5,
+      opacity: Math.random() * 0.8 + 0.2
+    })
+  }
+  stars.value = temp
+}
+
+onMounted(() => generateStars())
 </script>
+
+<style scoped>
+/* ✨ Efek Fade In */
+@keyframes fade-in {
+  from {
+    opacity: 0;
+    transform: translateY(30px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+.animate-fade-in {
+  animation: fade-in 1.2s ease-out;
+}
+
+@keyframes fade-in-slow {
+  from {
+    opacity: 0;
+    transform: scale(0.95);
+  }
+  to {
+    opacity: 1;
+    transform: scale(1);
+  }
+}
+.animate-fade-in-slow {
+  animation: fade-in-slow 1.5s ease-out;
+}
+
+/* 🌟 Animasi bintang berkedip */
+@keyframes twinkle {
+  0%, 100% {
+    opacity: 0.3;
+    transform: scale(1);
+  }
+  50% {
+    opacity: 1;
+    transform: scale(1.3);
+  }
+}
+.animate-twinkle {
+  animation: twinkle 3.5s ease-in-out infinite;
+}
+
+/* ☁️ Animasi awan lembut */
+@keyframes cloud-slow {
+  0% { transform: translateX(0); }
+  50% { transform: translateX(40px); }
+  100% { transform: translateX(0); }
+}
+.animate-cloud-slow {
+  animation: cloud-slow 18s ease-in-out infinite;
+}
+
+@keyframes cloud-medium {
+  0% { transform: translateX(0); }
+  50% { transform: translateX(-60px); }
+  100% { transform: translateX(0); }
+}
+.animate-cloud-medium {
+  animation: cloud-medium 22s ease-in-out infinite;
+}
+
+/* 📱 Responsif */
+@media (max-width: 640px) {
+  h2 {
+    font-size: 2rem;
+  }
+  .grid {
+    gap: 1.2rem;
+  }
+}
+</style>
diff --git a/proyek-frontend/app/components/templates/KhitanBasic/GuestBook.vue b/proyek-frontend/app/components/templates/KhitanBasic/GuestBook.vue
index 4641b47..4271e98 100644
--- a/proyek-frontend/app/components/templates/KhitanBasic/GuestBook.vue
+++ b/proyek-frontend/app/components/templates/KhitanBasic/GuestBook.vue
@@ -1,47 +1,87 @@
 <template>
-  <section class="text-center p-6 max-w-lg mx-auto">
-    <h2 class="text-3xl font-bold text-blue-700 mb-6">💬 Buku Tamu</h2>
-
-    <p class="text-gray-600 mb-4">{{ saySomething }}</p>
-
-    <form @submit.prevent="sendMessage" class="space-y-3">
-      <input
-        v-model="guestNameInput"
-        type="text"
-        placeholder="Nama Anda"
-        class="w-full border rounded-lg px-4 py-2"
-        required
-      />
-      <textarea
-        v-model="messageInput"
-        rows="3"
-        placeholder="Tulis ucapan Anda..."
-        class="w-full border rounded-lg px-4 py-2"
-        required
-      ></textarea>
-      <button
-        type="submit"
-        class="bg-blue-600 text-white px-5 py-2 rounded-full shadow hover:bg-blue-700"
-      >
-        Kirim
-      </button>
-    </form>
-
-    <div v-if="messages.length" class="mt-8 text-left space-y-4">
+  <!-- 🌌 Latar belakang fullscreen -->
+  <section
+    class="relative min-h-screen w-full flex flex-col items-center justify-center text-center overflow-hidden bg-gradient-to-br from-indigo-900 via-purple-900 to-blue-900 text-white p-6"
+  >
+    <!-- 🌟 Bintang Berkedip -->
+    <div class="absolute inset-0 overflow-hidden z-0">
       <div
-        v-for="(msg, index) in messages"
-        :key="index"
-        class="bg-white/70 p-4 rounded-lg shadow"
+        v-for="(star, i) in stars"
+        :key="i"
+        class="absolute bg-white rounded-full animate-twinkle"
+        :style="{
+          top: star.top + '%',
+          left: star.left + '%',
+          width: star.size + 'px',
+          height: star.size + 'px',
+          animationDelay: star.delay + 's',
+          opacity: star.opacity
+        }"
+      ></div>
+    </div>
+
+    <!-- 🌈 Cahaya lembut -->
+    <div class="absolute w-[600px] h-[600px] bg-blue-400/10 blur-[200px] rounded-full top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2"></div>
+
+    <!-- 💬 Konten utama -->
+    <div class="relative z-10 max-w-lg w-full space-y-6 animate-fade-in">
+      <h2 class="text-4xl font-extrabold text-yellow-300 drop-shadow-[0_0_20px_rgba(255,255,255,0.3)]">
+        💬 Buku Tamu
+      </h2>
+
+      <p class="text-blue-100">{{ saySomething }}</p>
+
+      <!-- 📝 Form -->
+      <form
+        @submit.prevent="sendMessage"
+        class="bg-white/10 backdrop-blur-md border border-white/20 p-6 rounded-2xl shadow-lg space-y-4"
       >
-        <p class="font-semibold text-blue-700">{{ msg.name }}</p>
-        <p class="text-gray-700">{{ msg.text }}</p>
+        <input
+          v-model="guestNameInput"
+          type="text"
+          placeholder="Nama Anda"
+          class="w-full px-4 py-2 rounded-lg bg-white/20 text-white placeholder-gray-300 focus:ring-2 focus:ring-yellow-400 outline-none"
+          required
+        />
+        <textarea
+          v-model="messageInput"
+          rows="3"
+          placeholder="Tulis ucapan Anda..."
+          class="w-full px-4 py-2 rounded-lg bg-white/20 text-white placeholder-gray-300 focus:ring-2 focus:ring-yellow-400 outline-none"
+          required
+        ></textarea>
+
+        <button
+          type="submit"
+          class="bg-yellow-400 text-gray-900 font-semibold px-6 py-2.5 rounded-full shadow-lg hover:bg-yellow-500 transition-all duration-300 transform hover:scale-105"
+        >
+          Kirim ✨
+        </button>
+      </form>
+
+      <!-- 💌 Pesan -->
+      <div v-if="messages.length" class="mt-10 space-y-4 text-left max-h-[300px] overflow-y-auto">
+        <transition-group name="fade" tag="div">
+          <div
+            v-for="(msg, index) in messages"
+            :key="index"
+            class="bg-white/10 border border-white/10 rounded-xl p-4 shadow-md animate-fade-in"
+          >
+            <p class="font-semibold text-yellow-300">{{ msg.name }}</p>
+            <p class="text-blue-100">{{ msg.text }}</p>
+          </div>
+        </transition-group>
       </div>
     </div>
+
+    <!-- 🌠 Ornamen bawah -->
+    <div class="absolute bottom-0 left-0 right-0 h-[200px] bg-gradient-to-t from-indigo-900 via-purple-800/30 to-transparent"></div>
   </section>
 </template>
 
 <script setup>
-import { ref } from 'vue'
+import { ref, onMounted } from 'vue'
+
 const props = defineProps({
   guestName: String,
   saySomething: String,
@@ -52,9 +92,80 @@ const emit = defineEmits(['addMessage'])
 const guestNameInput = ref(props.guestName || '')
 const messageInput = ref('')
 
+// 🌟 Efek bintang
+const stars = ref([])
+
+const generateStars = () => {
+  const count = 70
+  const temp = []
+  for (let i = 0; i < count; i++) {
+    temp.push({
+      top: Math.random() * 100,
+      left: Math.random() * 100,
+      size: Math.random() * 2 + 1,
+      delay: Math.random() * 5,
+      opacity: Math.random() * 0.8 + 0.2
+    })
+  }
+  stars.value = temp
+}
+
+onMounted(() => generateStars())
+
 const sendMessage = () => {
   if (!guestNameInput.value || !messageInput.value) return
   emit('addMessage', { name: guestNameInput.value, text: messageInput.value })
   messageInput.value = ''
 }
 </script>
+
+<style scoped>
+/* 🌟 Animasi bintang berkedip */
+@keyframes twinkle {
+  0%, 100% {
+    opacity: 0.3;
+    transform: scale(1);
+  }
+  50% {
+    opacity: 1;
+    transform: scale(1.3);
+  }
+}
+.animate-twinkle {
+  animation: twinkle 3.5s ease-in-out infinite;
+}
+
+/* ✨ Fade animasi */
+@keyframes fade-in {
+  from {
+    opacity: 0;
+    transform: translateY(20px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+.animate-fade-in {
+  animation: fade-in 1.2s ease-out;
+}
+
+/* Pesan baru fade */
+.fade-enter-active,
+.fade-leave-active {
+  transition: opacity 0.4s;
+}
+.fade-enter-from,
+.fade-leave-to {
+  opacity: 0;
+}
+
+/* Scrollbar halus */
+::-webkit-scrollbar {
+  width: 6px;
+}
+::-webkit-scrollbar-thumb {
+  background: rgba(255, 255, 255, 0.3);
+  border-radius: 9999px;
+}
+</style>
diff --git a/proyek-frontend/app/components/templates/KhitanBasic/ThankYou.vue b/proyek-frontend/app/components/templates/KhitanBasic/ThankYou.vue
index e2721da..fa468c1 100644
--- a/proyek-frontend/app/components/templates/KhitanBasic/ThankYou.vue
+++ b/proyek-frontend/app/components/templates/KhitanBasic/ThankYou.vue
@@ -1,23 +1,141 @@
 <template>
-  <section class="text-center p-6">
-    <h2 class="text-3xl font-bold text-blue-700">Terima Kasih 💖</h2>
-    <p class="text-gray-700 mt-4">
-      Terima kasih atas doa dan kehadiran Bapak/Ibu/Saudara/i dalam acara khitanan
-      <strong>{{ childName }}</strong>.
-    </p>
-
-    <div v-if="jsonData.rekening_1" class="mt-6">
-      <p class="font-semibold text-gray-800">💳 Rekening Hadiah</p>
-      <p class="text-blue-700">{{ jsonData.rekening_1 }}</p>
+  <!-- 🌌 Latar belakang fullscreen -->
+  <section
+    class="relative min-h-screen w-full flex flex-col items-center justify-center text-center overflow-hidden bg-gradient-to-br from-indigo-900 via-purple-900 to-blue-900 text-white p-6"
+  >
+    <!-- 🌟 Bintang Berkedip -->
+    <div class="absolute inset-0 overflow-hidden z-0">
+      <div
+        v-for="(star, i) in stars"
+        :key="i"
+        class="absolute bg-white rounded-full animate-twinkle"
+        :style="{
+          top: star.top + '%',
+          left: star.left + '%',
+          width: star.size + 'px',
+          height: star.size + 'px',
+          animationDelay: star.delay + 's',
+          opacity: star.opacity
+        }"
+      ></div>
     </div>
 
-    <p class="text-gray-500 mt-8 italic">Wassalamu’alaikum Wr. Wb.</p>
+    <!-- 🌈 Cahaya Aurora -->
+    <div class="absolute top-0 left-0 w-full h-full bg-gradient-to-br from-blue-500/10 via-purple-600/20 to-pink-500/10 blur-3xl"></div>
+
+    <!-- ✨ Cahaya lembut di tengah -->
+    <div class="absolute w-[500px] h-[500px] bg-yellow-200/10 blur-[200px] rounded-full top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2"></div>
+
+    <!-- 💖 Isi konten -->
+    <div class="relative z-10 max-w-2xl mx-auto space-y-6 animate-fade-in">
+      <h2 class="text-4xl sm:text-5xl font-extrabold text-yellow-300 drop-shadow-[0_0_25px_rgba(255,255,255,0.3)]">
+        Terima Kasih 💖
+      </h2>
+
+      <p class="text-blue-100 leading-relaxed text-base sm:text-lg">
+        Terima kasih atas doa dan kehadiran Bapak/Ibu/Saudara/i dalam acara
+        khitanan <br />
+        <span class="text-yellow-300 font-bold text-xl sm:text-2xl">{{ childName }}</span>.
+      </p>
+
+      <!-- 💳 Rekening -->
+      <div
+        v-if="jsonData.rekening_1"
+        class="bg-white/10 border border-white/20 backdrop-blur-md rounded-2xl p-5 sm:p-6 max-w-md mx-auto shadow-[0_0_30px_rgba(255,255,255,0.1)]"
+      >
+        <p class="font-semibold text-yellow-300 text-lg">💳 Rekening Hadiah</p>
+        <p class="text-blue-100 mt-1">{{ jsonData.rekening_1 }}</p>
+      </div>
+
+      <p class="text-blue-200 italic mt-8 animate-fade-in-slow">
+        Wassalamu’alaikum Wr. Wb.
+      </p>
+    </div>
+
+    <!-- 💫 Ornamen bawah -->
+    <div class="absolute bottom-0 left-0 right-0 h-[200px] bg-gradient-to-t from-indigo-900 via-purple-800/20 to-transparent"></div>
   </section>
 </template>
 
 <script setup>
+import { ref, onMounted } from 'vue'
+
 defineProps({
   childName: String,
   jsonData: Object
 })
+
+// 🌟 Bintang acak
+const stars = ref([])
+
+const generateStars = () => {
+  const count = 60
+  const temp = []
+  for (let i = 0; i < count; i++) {
+    temp.push({
+      top: Math.random() * 100,
+      left: Math.random() * 100,
+      size: Math.random() * 2 + 1,
+      delay: Math.random() * 5,
+      opacity: Math.random() * 0.8 + 0.2
+    })
+  }
+  stars.value = temp
+}
+
+onMounted(() => generateStars())
 </script>
+
+<style scoped>
+/* 🌟 Animasi bintang berkedip */
+@keyframes twinkle {
+  0%, 100% {
+    opacity: 0.3;
+    transform: scale(1);
+  }
+  50% {
+    opacity: 1;
+    transform: scale(1.3);
+  }
+}
+.animate-twinkle {
+  animation: twinkle 3.5s ease-in-out infinite;
+}
+
+/* ✨ Fade-in lembut */
+@keyframes fade-in {
+  from {
+    opacity: 0;
+    transform: translateY(25px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+.animate-fade-in {
+  animation: fade-in 1.2s ease-out;
+}
+
+/* ✨ Fade-in slow untuk teks terakhir */
+@keyframes fade-in-slow {
+  from {
+    opacity: 0;
+    transform: scale(0.95);
+  }
+  to {
+    opacity: 1;
+    transform: scale(1);
+  }
+}
+.animate-fade-in-slow {
+  animation: fade-in-slow 1.8s ease-out;
+}
+
+/* 📱 Responsif */
+@media (max-width: 640px) {
+  h2 {
+    font-size: 2rem;
+  }
+}
+</style>