/* ============================================
   NETLUN - Custom Styles
   Tailwind ile birlikte çalışır (CDN üzerinden)
   ============================================ */

/* ============================================
   ANTI-FOUC: Lucide ikonların Tailwind yüklenmeden
   default 24×24 boyutuyla taşıp "kırmızı blob" gibi
   görünmesini engelle. Tailwind sonradan w-X/h-X
   sınıflarını uygulayınca otomatik düzelir.
   ============================================ */
svg.lucide,
svg[class*="lucide"] {
  width: 1em;
  height: 1em;
  flex-shrink: 0;
}
/* Lucide henüz render etmediyse <i data-lucide> placeholder'ı görünmesin */
i[data-lucide] {
  display: inline-block;
  width: 1em;
  height: 1em;
  visibility: hidden;
}

/* ============================================
   Başarı Hikayeleri Slider — iOS Safari'de dikey
   scroll jank'ini engelle. overflow-x: auto bir
   2-eksenli scroll container yarattığında dikey
   sayfa scroll'u ile çakışıyor. Aşağıdaki kurallar
   touch davranışını yatay swipe + dikey sayfa
   scroll olarak kesinleştirir.
   ============================================ */
.success-track {
  overflow-y: hidden;
  overscroll-behavior-x: contain;
  overscroll-behavior-y: auto;
  /* iOS'ta yumuşak momentum scroll */
  -webkit-overflow-scrolling: touch;
  /* Yatay swipe + native pinch'i destekle, dikey pan'i sayfaya bırak */
  touch-action: pan-y pinch-zoom;
}
/* Görsel kutusu — blur overlay'in vertical taşmasını engelle */
.success-image-wrapper {
  overflow: hidden;
  border-radius: 1.25rem;
}

/* Custom fonts */
html {
  overflow-x: hidden;
}
body {
  font-family: 'Inter', ui-sans-serif, system-ui, sans-serif;
  background-color: #fafafa;
  color: #0f172a;
  overflow-x: hidden;
  width: 100%;
  max-width: 100vw;
}

.font-sans    { font-family: 'Inter', ui-sans-serif, system-ui, sans-serif; }
.font-display { font-family: 'Space Grotesk', sans-serif; }
.font-outfit  { font-family: 'Outfit', sans-serif; }
.font-mono    { font-family: 'JetBrains Mono', monospace; }

/* Custom scrolling animations */
@keyframes marquee {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

.animate-marquee {
  display: flex;
  width: max-content;
  animation: marquee var(--marquee-duration, 40s) linear infinite;
}
.animate-marquee:hover {
  animation-play-state: paused;
}

/* Overflow gradient mask for beautiful fading effect */
.mask-gradient-marquee {
  mask-image: linear-gradient(to right, transparent, white 8%, white 92%, transparent);
  -webkit-mask-image: linear-gradient(to right, transparent, white 8%, white 92%, transparent);
}

/* Custom scrollbar */
::-webkit-scrollbar { width: 8px; }
::-webkit-scrollbar-track { background: #f1f5f9; }
::-webkit-scrollbar-thumb {
  background: #cbd5e1;
  border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover { background: #be0017; }

.scrollbar-none::-webkit-scrollbar { display: none; }
.scrollbar-none { -ms-overflow-style: none; scrollbar-width: none; }

/* Text stroke for decorative stats */
.text-stroke {
  -webkit-text-stroke: 1px rgba(15, 23, 42, 0.1);
  color: transparent;
}
.text-stroke-dark {
  -webkit-text-stroke: 1px rgba(255, 255, 255, 0.15);
  color: transparent;
}

/* Ambient glow backgrounds adjusted for red theme */
.glow-primary {
  background: radial-gradient(circle at 50% 50%, rgba(190, 0, 23, 0.08) 0%, transparent 70%);
}
.glow-cyan {
  background: radial-gradient(circle at 50% 50%, rgba(6, 182, 212, 0.08) 0%, transparent 70%);
}
.glow-purple {
  background: radial-gradient(circle at 50% 50%, rgba(168, 85, 247, 0.08) 0%, transparent 70%);
}

/* Hover scale utilities (Tailwind doesn't have these exact values) */
.hover\:scale-101:hover { transform: scale(1.01); }
.hover\:scale-102:hover { transform: scale(1.02); }
.hover\:scale-103:hover { transform: scale(1.03); }
.scale-95  { transform: scale(0.95); }
.scale-98  { transform: scale(0.98); }
.scale-102 { transform: scale(1.02); }
.scale-103 { transform: scale(1.03); }
.scale-105 { transform: scale(1.05); }
.scale-110 { transform: scale(1.10); }

/* Page transition fade */
.page-fade-in {
  animation: pageFadeIn 0.45s ease-out;
}
@keyframes pageFadeIn {
  from { opacity: 0; transform: translateY(15px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Loader fade-out */
#netlun-loader.loader-hidden {
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.4s ease-out;
}

/* ============================================
   Mobil alt nav - iOS Chrome/Safari URL bar
   geri çekilirken layout viewport ile visual
   viewport farklı olunca nav "havada kalıp"
   altında sayfa içeriği görünüyor. Nav'a aşağıya
   doğru görünmez bir uzantı (skirt) ekleyerek
   ortaya çıkan boşluğu aynı renkle kapatırız.
   ============================================ */
#mobile-bottom-nav {
  /* GPU compositing — bazı iOS sürümlerinde scroll
     sırasında nav'ın görsel viewport ile senkronize
     kalmasına yardımcı olur. */
  transform: translateZ(0);
  -webkit-transform: translateZ(0);
  will-change: transform;
}
#mobile-bottom-nav::after {
  content: '';
  position: absolute;
  top: 100%;          /* nav'ın hemen altından başlar */
  left: 0;
  right: 0;
  height: 50vh;       /* aşağı doğru bolca uzanır — ekran dışına taşar, problem değil */
  background: rgba(255, 255, 255, 0.95);
  pointer-events: none;
  /* skirt'in üst kenarında küçük bir gölge olmasın diye border yok */
}

/* Mobile drawer */
.mobile-drawer {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.35s ease, opacity 0.3s ease;
  opacity: 0;
}
.mobile-drawer.open {
  /* Header altında kalan tüm görünür alanı (yaklaşık 5rem header için ayrılır) */
  max-height: calc(100vh - 5rem);
  max-height: calc(100dvh - 5rem); /* modern tarayıcılarda mobil toolbar'a göre doğru ölçüm */
  opacity: 1;
}

/* Drawer açıkken sayfa scroll'u kilitlensin (body'ye eklenir) */
body.drawer-open {
  overflow: hidden;
  touch-action: none;
}

/* Mark active nav with underline */
.nav-active-underline {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 2px;
  background-color: #be0017;
  border-radius: 9999px;
}

/* Aspect ratio helper for phone widget */
.aspect-phone {
  aspect-ratio: 340 / 640;
}

/* Range slider (red accent) */
input[type="range"].accent-amber-500 { accent-color: #f59e0b; }
input[type="range"].accent-primary   { accent-color: #be0017; }

/* Custom border-radius helper */
.rounded-2\.5xl { border-radius: 1.25rem; }
.rounded-3\.5xl { border-radius: 1.75rem; }

/* Brand text sizing */
.text-3\.5xl { font-size: 2rem; line-height: 2.25rem; }
.text-4\.5xl { font-size: 2.5rem; line-height: 1; }

/* Line clamp helpers (Tailwind v4 has these but safety net) */
.line-clamp-1 {
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.line-clamp-2 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Bottom safe-area padding for mobile (sadece notch'lu iPhone'larda gerekli kadar) */
.pb-safe {
  padding-bottom: env(safe-area-inset-bottom, 0px);
}

/* ============================================
   MEGA MENU (Desktop)
   ============================================ */
.mega-wrapper {
  position: relative;       /* Tailwind .relative'e güvenmiyoruz */
}

/* Trigger chevron animasyonu */
.mega-trigger .mega-chev {
  transform: rotate(0deg);
  transition: transform .25s ease;
}
.mega-wrapper:hover .mega-trigger .mega-chev,
.mega-wrapper.mega-open .mega-trigger .mega-chev {
  transform: rotate(180deg);
}

/* PANEL - varsayılan: tamamen gizli */
.mega-panel {
  position: absolute;
  top: calc(100% + 14px);
  left: 50%;
  transform: translateX(-50%) translateY(8px);
  width: 720px;
  max-width: calc(100vw - 32px);
  z-index: 60;

  /* GERÇEK GİZLEME — yer kaplamaz */
  display: none;
  opacity: 0;
  pointer-events: none;
  transition: opacity .22s ease, transform .25s ease;
}

/* Açık durum */
.mega-wrapper:hover .mega-panel,
.mega-wrapper:focus-within .mega-panel,
.mega-wrapper.mega-open .mega-panel {
  display: block;
  opacity: 1;
  pointer-events: auto;
  transform: translateX(-50%) translateY(0);
}

/* Buton ile panel arasındaki boşluk için görünmez köprü */
.mega-panel::before {
  content: "";
  position: absolute;
  top: -14px;
  left: 0; right: 0;
  height: 14px;
}

.mega-panel-inner {
  background: #ffffff;
  border: 1px solid rgba(15, 23, 42, 0.06);
  border-radius: 1.5rem;
  box-shadow:
    0 24px 48px -16px rgba(15, 23, 42, 0.18),
    0 8px 20px -8px rgba(15, 23, 42, 0.08);
  overflow: hidden;
  position: relative;
}
.mega-panel-inner::before {
  content: "";
  position: absolute;
  top: -100px; right: -80px;
  width: 260px; height: 260px;
  background: radial-gradient(circle, rgba(190, 0, 23, 0.07), transparent 70%);
  pointer-events: none;
}

.mega-col-title {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: 'Outfit', sans-serif;
  font-weight: 800;
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #be0017;
  background: rgba(190, 0, 23, 0.08);
  padding: 5px 10px;
  border-radius: 999px;
}
.mega-col-title-alt {
  color: #6366f1;
  background: rgba(99, 102, 241, 0.08);
}

.mega-item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 10px 12px;
  border-radius: 12px;
  transition: background-color .18s ease, transform .18s ease;
  cursor: pointer;
  text-decoration: none;
}
.mega-item:hover {
  background: #f8fafc;
  transform: translateX(2px);
}
.mega-item-active {
  background: rgba(190, 0, 23, 0.05);
}

.mega-item-icon {
  width: 36px;
  height: 36px;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  background: linear-gradient(135deg, rgba(190, 0, 23, 0.10), rgba(190, 0, 23, 0.04));
  color: #be0017;
  transition: transform .25s ease, background .25s ease;
}
.mega-item:hover .mega-item-icon {
  transform: scale(1.06) rotate(-3deg);
  background: linear-gradient(135deg, rgba(190, 0, 23, 0.18), rgba(190, 0, 23, 0.08));
}
.mega-item-icon-alt {
  background: linear-gradient(135deg, rgba(99, 102, 241, 0.12), rgba(99, 102, 241, 0.04));
  color: #6366f1;
}
.mega-item:hover .mega-item-icon-alt {
  background: linear-gradient(135deg, rgba(99, 102, 241, 0.22), rgba(99, 102, 241, 0.08));
}

.mega-item-text {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.mega-item-label {
  font-family: 'Inter', sans-serif;
  font-weight: 600;
  font-size: 13.5px;
  line-height: 1.2;
  color: #0f172a;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.mega-item-desc {
  font-size: 11px;
  line-height: 1.35;
  color: #64748b;
  margin-top: 3px;
  font-weight: 500;
}
.mega-item-active .mega-item-label { color: #be0017; }

.mega-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 24px;
  background: linear-gradient(180deg, #f8fafc, #f1f5f9);
  border-top: 1px solid rgba(15, 23, 42, 0.05);
}
.mega-cta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 16px;
  border-radius: 999px;
  background: #be0017;
  color: #fff;
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 0.02em;
  text-decoration: none;
  transition: background-color .2s ease, transform .2s ease;
}
.mega-cta:hover {
  background: #6f0100;
  transform: translateX(2px);
}

/* ============================================
   MEGA MENU (Mobile - accordion)
   ============================================ */
.m-mega-body {
  max-height: 0;
  overflow: hidden;
  transition: max-height .35s ease;
}
.m-mega-open .m-mega-body {
  max-height: 1000px;
}
.m-mega-chev {
  transition: transform .25s ease;
}
.m-mega-open .m-mega-chev {
  transform: rotate(180deg);
}