From b06419624be8afe90f3ff5e2abd2b202df0fdf96 Mon Sep 17 00:00:00 2001
From: Novy San87 <novysan87@smkn1-wonorejo.sch.id>
Date: Wed, 5 Aug 2026 18:29:26 +0700
Subject: [PATCH] =?UTF-8?q?Fix=20viewfinder=20hilang:=20aspect-[3/4]=20tid?=
 =?UTF-8?q?ak=20di-generate=20Tailwind=20v4=20=E2=86=92=20CSS=20manual=20.?=
 =?UTF-8?q?face-viewfinder=20(3:4=20HP,=204:3=20desktop)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 resources/views/face/scan.blade.php | 8 +++++++-
 1 file changed, 7 insertions(+), 1 deletion(-)

diff --git a/resources/views/face/scan.blade.php b/resources/views/face/scan.blade.php
index b625996..ba65cd5 100644
--- a/resources/views/face/scan.blade.php
+++ b/resources/views/face/scan.blade.php
@@ -3,6 +3,12 @@
 @section('title', 'Scan Wajah')
 
 @section('content')
+<style>
+    /* Viewfinder: lebih lega di HP (potret 3:4), desktop 4:3 — pakai CSS manual
+       karena Tailwind v4 tidak generate arbitrary aspect-[3/4] (slash diabaikan). */
+    .face-viewfinder { aspect-ratio: 3 / 4; }
+    @media (min-width: 640px) { .face-viewfinder { aspect-ratio: 4 / 3; } }
+</style>
 <div class="max-w-3xl mx-auto pb-10">
     {{-- ===== HEADER PREMIUM ===== --}}
     <div class="relative overflow-hidden rounded-3xl bg-gradient-to-r from-blue-600 via-indigo-500 to-cyan-400 shadow-xl shadow-blue-500/20 px-6 py-6 mb-6">
@@ -46,7 +52,7 @@
     <div class="space-y-6" x-data="faceScan()">
         {{-- ===== VIEWFINDER KAMERA ===== --}}
         <div class="relative">
-            <div class="relative aspect-[3/4] sm:aspect-[4/3] rounded-3xl overflow-hidden bg-gradient-to-br from-gray-900 to-gray-950 shadow-2xl shadow-gray-900/30 ring-1 ring-gray-800/60"
+            <div class="face-viewfinder relative rounded-3xl overflow-hidden bg-gradient-to-br from-gray-900 to-gray-950 shadow-2xl shadow-gray-900/30 ring-1 ring-gray-800/60"
                 :class="autoScanning ? 'ring-2 ring-cyan-400/70 shadow-cyan-500/10' : ''">
                 {{-- Grid rule-of-thirds --}}
                 <div class="absolute inset-0 pointer-events-none opacity-20">