fix(web): VIN ikonundaki marka logolarını tutarlı 28px kareye sabitle

Tailwind Preflight img'lere height:auto uyguladığından statik-SVG logolar
en-boy oranına göre ölçekleniyordu (Opel ~17px küçük, Renault ~29px taşma).
VinBrandIcon artık sabit 28px kare + object-contain ile hem img hem svg
logolarını aynı boyutta gösteriyor; büyüteç optik denge için biraz küçük.
Playwright ile landing VIN textbox üzerinde doğrulandı.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

apps/web/src/components/ui/vin-brand-icon.tsx

@@ -6,6 +6,7 @@ import { Search } from "lucide-react";
 interface VinBrandIconProps {
   /** Mevcut VIN değeri — ilk 3 karakter (WMI) bilinen bir markaya denk gelirse logo gösterilir. */
   vin: string;
+  /** İkon kutusunun kenar uzunluğu (px). Logolar bu kutu içinde object-contain ile ölçeklenir. */
   size?: number;
   /** Konumlandırma için sarmalayıcıya verilen sınıf (örn. absolute left-4 ...). */
   className?: string;
@@ -15,25 +16,33 @@ interface VinBrandIconProps {
  * VIN textbox'ının solundaki ikon. WMI (ilk 3 karakter) bilinen bir markaya
  * denk gelince büyüteç yerine ilgili marka logosu pop animasyonuyla görünür;
  * WMI silinince tekrar büyüteç olur.
+ *
+ * Logolar sabit bir kareye `object-contain` ile yerleştirilir; böylece dikey
+ * (Renault) veya yatay (Opel) viewBox'lı SVG'ler de tutarlı boyutta görünür
+ * (Tailwind Preflight'ın img'lere uyguladığı height:auto sorununu da çözer).
  */
-export function VinBrandIcon({ vin, size = 20, className }: VinBrandIconProps) {
+export function VinBrandIcon({ vin, size = 28, className }: VinBrandIconProps) {
   const wmi = vin.trim().toUpperCase().slice(0, 3);
   const brand = wmi.length === 3 ? getBrandFromWmi(wmi) : null;
 
   return (
-    <span className={cn("pointer-events-none flex items-center justify-center", className)}>
+    <span
+      style={{ width: size, height: size }}
+      className={cn("pointer-events-none flex items-center justify-center", className)}
+    >
       {brand ? (
         <CarBrandLogo
           // key: marka değiştiğinde yeniden mount edip pop animasyonunu tetikler
           key={`brand:${brand}`}
           brandName={brand}
           size={size}
-          className="animate-icon-pop"
+          className="size-full animate-icon-pop object-contain"
         />
       ) : (
+        // Büyüteç logolardan biraz küçük dursun (optik denge)
         <Search
           key="search"
-          style={{ width: size, height: size }}
+          style={{ width: size * 0.8, height: size * 0.8 }}
           className="animate-icon-pop text-muted-foreground"
         />
       )}

apps/web/src/routes/dashboard/search.tsx

@@ -501,11 +501,7 @@ function SearchPage() {
         <form onSubmit={handleSearch} className="space-y-4">
           {/* Input */}
           <div className="relative">
-            <VinBrandIcon
-              vin={vin}
-              size={22}
-              className="absolute left-4 top-1/2 size-6 -translate-y-1/2"
-            />
+            <VinBrandIcon vin={vin} className="absolute left-4 top-1/2 -translate-y-1/2" />
             <Input
               ref={inputRef}
               placeholder="Şase numarasını girin (17 karakter)"

apps/web/src/routes/index.tsx

@@ -841,11 +841,7 @@ export function HomePage() {
             {/* VIN Input */}
             <div className="mx-auto mt-8 flex max-w-xl flex-col gap-3 sm:flex-row">
               <div className="relative flex-1">
-                <VinBrandIcon
-                  vin={vin}
-                  size={22}
-                  className="absolute left-4 top-1/2 size-6 -translate-y-1/2"
-                />
+                <VinBrandIcon vin={vin} className="absolute left-4 top-1/2 -translate-y-1/2" />
                 <Input
                   value={vin}
                   onChange={(e) => setVin(e.target.value.toUpperCase())}