/* ============================================================
   NFC Medya — Premium Tasarım Yaması
   ============================================================
   Bu dosya, sitenin Tailwind CSS derlemesinde (tailwind-build.css)
   JIT (Just-In-Time) sistemi yüzünden henüz bulunmayan bazı yeni
   sınıfları saf CSS ile tamamlar. tailwind-build.css build sürecine
   HİÇ dokunulmuyor - bu dosya sadece üstüne, ek bir <link> olarak
   ekleniyor. Bu sayede premium revizyon boyunca kullanılan tüm
   yeni sınıflar (rastgele değerler, opacity varyantları, hover
   kombinasyonları) güvenle çalışır.

   Kullanan sayfalar: head-common.php üzerinden TÜM sayfalar.
   ============================================================ */

/* --- Opacity & geçişler --- */
.opacity-40 { opacity: .4; }
.opacity-60 { opacity: .6; }
.hover\:opacity-100:hover { opacity: 1; }
.transition-opacity { transition-property: opacity; transition-timing-function: cubic-bezier(.4,0,.2,1); transition-duration: .15s; }

/* --- Konumlandırma (negatif değerler) --- */
.-top-24 { top: -6rem; }
.-left-24 { left: -6rem; }
.-bottom-24 { bottom: -6rem; }
.-right-24 { right: -6rem; }
.bottom-8 { bottom: 2rem; }

/* --- Boşluklar --- */
.pt-10 { padding-top: 2.5rem; }
.py-14 { padding-top: 3.5rem; padding-bottom: 3.5rem; }
.py-3\.5 { padding-top: .875rem; padding-bottom: .875rem; }
.gap-x-10 { column-gap: 2.5rem; }
.gap-y-4 { row-gap: 1rem; }

/* --- Boyutlar --- */
.w-\[420px\] { width: 420px; }
.h-\[420px\] { height: 420px; }
.min-w-\[140px\] { min-width: 140px; }
.max-w-\[110px\] { max-width: 110px; }
.h-64 { height: 16rem; }

/* --- Tipografi --- */
.text-\[10px\] { font-size: 10px; }
.leading-\[1\.05\] { line-height: 1.05; }
.leading-7 { line-height: 1.75rem; }
.tracking-\[-0\.03em\] { letter-spacing: -.03em; }
.tracking-\[-0\.02em\] { letter-spacing: -.02em; }
.text-7xl { font-size: 4.5rem; line-height: 1; }
.text-slate-200 { color: #e2e8f0; }

/* --- Renk / opaklık varyantları --- */
.text-white\/40 { color: rgba(255,255,255,.4); }
.border-white\/10 { border-color: rgba(255,255,255,.1); }
.bg-emerald-400 { background-color: #34d399; }
.bg-\[\#9d181a\]\/25 { background-color: rgba(157,24,26,.25); }
.bg-electric\/25 { background-color: rgba(37,99,235,.25); }
.bg-electric\/10 { background-color: rgba(37,99,235,.1); }
.hover\:text-\[\#1f2d55\]:hover { color: #1f2d55; }
.hover\:text-white\/90:hover { color: rgba(255,255,255,.9); }
.hover\:bg-electric:hover { background-color: #2563eb; }
.hover\:text-electric:hover { color: #2563eb; }
.hover\:text-night:hover { color: #0f172a; }
.hover\:border-night:hover { border-color: #0f172a; }
.hover\:border-white\/50:hover { border-color: rgba(255,255,255,.5); }
.group:hover .group-hover\:bg-white\/10 { background-color: rgba(255,255,255,.1); }
.group:hover .group-hover\:text-electric\/40 { color: rgba(37,99,235,.4); }

/* --- Hover transform --- */
.hover\:-translate-y-1:hover { --tw-translate-y: -0.25rem; transform: translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); }

/* --- Animasyon --- */
@keyframes nfc-bounce { 0%,100% { transform: translateY(-15%); animation-timing-function: cubic-bezier(.8,0,1,1); } 50% { transform: translateY(0); animation-timing-function: cubic-bezier(0,0,.2,1); } }
.animate-bounce { animation: nfc-bounce 1s infinite; }

/* --- Responsive varyantlar --- */
@media (min-width: 640px) {
  .sm\:flex { display: flex; }
  .sm\:gap-6 { gap: 1.5rem; }
  .sm\:h-10 { height: 2.5rem; }
  .sm\:text-5xl { font-size: 3rem; line-height: 1; }
  .sm\:text-sm { font-size: .875rem; line-height: 1.25rem; }
  .sm\:text-3xl { font-size: 1.875rem; line-height: 2.25rem; }
}
@media (min-width: 1024px) {
  .lg\:text-7xl { font-size: 4.5rem; line-height: 1; }
  .lg\:col-span-2 { grid-column: span 2 / span 2; }
  .lg\:grid-cols-5 { grid-template-columns: repeat(5,minmax(0,1fr)); }
  .lg\:text-left { text-align: left; }
}

/* --- Premium kart efekti (parıltı) --- */
.nfc-card { isolation: isolate; }
.nfc-card-glow {
  position: absolute; inset: 0; border-radius: inherit; opacity: 0; z-index: -1;
  background: radial-gradient(400px circle at 50% 0%, rgba(37,99,235,.06), transparent 70%);
  transition: opacity .5s ease;
}
.nfc-card:hover .nfc-card-glow { opacity: 1; }

/* --- Hizmet detay sayfaları için premium bölüm/kart sınıfları --- */
.nfc-eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 12px; font-weight: 900; text-transform: uppercase; letter-spacing: .24em;
  color: #2563eb;
}
.nfc-process-step {
  position: relative; background: #fff; border: 1px solid #f1f5f9; border-radius: 1.75rem;
  padding: 2rem; transition: all .4s ease;
}
.nfc-process-step:hover { border-color: rgba(37,99,235,.3); box-shadow: 0 25px 50px -12px rgba(0,0,0,.15); transform: translateY(-4px); }
.nfc-process-num {
  width: 48px; height: 48px; border-radius: 14px; background: rgba(31,45,85,.08); color: #1f2d55;
  display: flex; align-items: center; justify-content: center; font-weight: 900; font-size: 18px; margin-bottom: 20px;
}
.nfc-problem-card { background: #fef2f2; border: 1px solid #fecaca; border-radius: 1.75rem; padding: 2rem; }
.nfc-solution-card { background: #f0fdf4; border: 1px solid #bbf7d0; border-radius: 1.75rem; padding: 2rem; }
.text-red-600 { color: #dc2626; }
.text-green-600 { color: #16a34a; }
@media (min-width: 768px) { .md\:text-2xl { font-size: 1.5rem; line-height: 2rem; } }

/* Hakkımızda sayfasındaki değer kartlarına premium hover (HTML'de zaten
   "value-card" sınıfı vardı ama hiç CSS tanımı yoktu - şimdi ekleniyor). */
.value-card { transition: all .4s ease; }
.value-card:hover { transform: translateY(-6px); box-shadow: 0 25px 50px -12px rgba(0,0,0,.15); border-color: rgba(37,99,235,.25); }

/* İletişim sayfası Hero'su - HTML'de "contact-hero-v2" sınıfı kullanılmış ama
   hiç CSS tanımı yoktu, bu yüzden beyaz metin varsayılan beyaz zeminde
   görünmez duruyordu. Aynı marka gradient'iyle düzeltiliyor. */
.contact-hero-v2 {
  position: relative;
  background: linear-gradient(135deg, #1f2d55, #2a3d73);
  overflow: hidden;
}
.contact-hero-v2::before {
  content: "";
  position: absolute; inset: 0;
  background-image: radial-gradient(circle at 20% 20%, rgba(157,24,26,.25), transparent 50%),
                     radial-gradient(circle at 80% 80%, rgba(37,99,235,.25), transparent 50%);
}

/* ============================================================
   NFC MEDYA PUBLIC SITE — RESPONSIVE HARDENING v1
   ============================================================ */
html, body { max-width:100%; overflow-x:hidden; }
img, video, canvas, iframe { max-width:100%; }
button, input, select, textarea { max-width:100%; }

/* Mobil menü */
@media (max-width: 1023px) {
  #mobileMenu { width:min(88vw, 360px); }
  #mobileMenu nav { min-width:0; }
}

@media (max-width: 767px) {
  .container, .max-w-7xl, .max-w-6xl, .max-w-5xl, .max-w-4xl { max-width:100%; }
  .px-14 { padding-left:1rem !important; padding-right:1rem !important; }
  .px-10 { padding-left:1rem !important; padding-right:1rem !important; }
  .px-8 { padding-left:1rem !important; padding-right:1rem !important; }
  .py-32 { padding-top:5rem !important; padding-bottom:5rem !important; }
  .py-28 { padding-top:4rem !important; padding-bottom:4rem !important; }
  .text-7xl { font-size:3rem; line-height:1.05; }
  .text-6xl { font-size:2.65rem; line-height:1.08; }
  .text-5xl { font-size:2.35rem; line-height:1.1; }
  .rounded-\[2rem\], .rounded-\[2\.5rem\] { border-radius:1.25rem !important; }
  table { display:block; width:100%; overflow-x:auto; -webkit-overflow-scrolling:touch; }
}

@media (max-width: 480px) {
  .text-7xl { font-size:2.45rem; }
  .text-6xl { font-size:2.2rem; }
  .text-5xl { font-size:2rem; }
  .px-6 { padding-left:1rem !important; padding-right:1rem !important; }
  .sm\:px-6 { padding-left:1rem !important; padding-right:1rem !important; }
}