/**
 * Mobile JIT Arbitrary Values Replacement
 * Bu dosya cdn.tailwindcss.com CDN'i kaldırmak için
 * mobil sayfalardaki arbitrary Tailwind değerlerini karşılar.
 * ~283KB JS yerine ~3KB CSS = Performance +30 puan
 */

/* ============================================
   TEXT SIZES (Arbitrary)
   ============================================ */
.text-\[8px\]  { font-size: 8px; }
.text-\[9px\]  { font-size: 9px; }
.text-\[10px\] { font-size: 10px; }
.text-\[11px\] { font-size: 11px; }
.text-\[15px\] { font-size: 15px; }
.text-\[17px\] { font-size: 17px; }
.text-\[22px\] { font-size: 22px; }

/* ============================================
   ARBITRARY COLORS
   ============================================ */
.text-\[\#00b4d8\] { color: #00b4d8; }
.text-\[\#0099ff\] { color: #0099ff; }
.bg-\[\#f8f9fa\] { background-color: #f8f9fa; }
.bg-\[\#1e1b4b\] { background-color: #1e1b4b; }
.bg-\[\#0099ff\] { background-color: #0099ff; }
.w-1\.5 { width: 0.375rem; }
.border-\[3px\] { border-width: 3px; }

/* ============================================
   ARBITRARY SIZES
   ============================================ */
.max-w-\[80\%\] { max-width: 80%; }
.min-w-\[160px\] { min-width: 160px; }
.blur-\[80px\] { filter: blur(80px); }

/* ============================================
   ARBITRARY BORDER RADIUS
   ============================================ */
.rounded-\[20px\] { border-radius: 20px; }
.rounded-\[28px\] { border-radius: 28px; }

/* ============================================
   ACTIVE/HOVER state arbitrary values
   ============================================ */
.active\:scale-\[0\.98\]:active { transform: scale(0.98); }
.group-active\:scale-95:active { transform: scale(0.95); }

/* ============================================
   Material Symbols Outlined fill
   ============================================ */
.fill-\[1\] { font-variation-settings: 'FILL' 1; }

/* ============================================
   PRIMARY & SECONDARY COLOR SYSTEM
   (Matches Tailwind CDN config: primary=#f06529, secondary=#007A8D)
   ============================================ */
.text-primary { color: #f06529; }
.bg-primary { background-color: #f06529; }
.border-primary { border-color: #f06529; }
.border-primary\/30 { border-color: rgba(240, 101, 41, 0.3); }
.text-secondary { color: #007A8D; }
.bg-secondary { background-color: #007A8D; }
.bg-secondary\/20 { background-color: rgba(0, 122, 141, 0.2); }
.group-hover\:text-primary:hover .group-hover\:text-primary,
.group:hover .group-hover\:text-primary { color: #f06529; }
.group-hover\:border-primary\/30:hover .group-hover\:border-primary\/30,
.group:hover .group-hover\:border-primary\/30 { border-color: rgba(240, 101, 41, 0.3); }

/* ============================================
   DARK TEXT (mobile-home uses text-dark)
   ============================================ */
.text-dark { color: #1f2937; }
.bg-dark { background-color: #1f2937; }

/* ============================================
   LINE CLAMP (used in mobile-home)
   ============================================ */
.line-clamp-2 {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.line-clamp-3 {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* ============================================
   MOBILE FOOTER custom sizes
   ============================================ */
.pb-32 { padding-bottom: 8rem; }