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

/* 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;
}

/* Mobile drawer */
.mobile-drawer {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease, opacity 0.3s ease;
  opacity: 0;
}
.mobile-drawer.open {
  max-height: 500px;
  opacity: 1;
}

/* 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 */
.pb-safe {
  padding-bottom: calc(env(safe-area-inset-bottom) + 0.6rem);
}

/* ============================================
   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);
}