/* KolayPR – Premium dijital ajans stili */
/* Aydınlık mod: yumuşak arka plan (Tailwind config’te background-light / surface-light) */

/* Logo: mobilde 110px, desktop 165px; koyu modda invert (CSS’de → flash yok) */
.logo-kolaypr { width: 110px; max-width: 100%; height: auto; }
.dark .logo-kolaypr, html.dark .logo-kolaypr { filter: invert(1); }
@media (min-width: 640px) { .logo-kolaypr { width: 165px; } }

/* Material Symbols: font-variation-settings standardı + FOUT önleme */
.material-symbols-outlined {
  font-variation-settings: ‘FILL’ 0, ‘wght’ 400, ‘GRAD’ 0, ‘opsz’ 24;
  font-size: 24px;
  /* İkon fontu yüklenene kadar "light_mode" gibi yazıları gizle */
  overflow: hidden;
  display: inline-block;
  width: 1em;
  height: 1em;
  vertical-align: middle;
  line-height: 1;
}

/* Global: mobilde yatay scroll’u engelle (atmospheric glow vb. taşan elementler) */
html, body { overflow-x: hidden; width: 100%; }
body { overflow-wrap: break-word; word-break: break-word; }
/* Dashboard: zoom değişince layout bozulmasın (100vh yerine visual viewport yüksekliği) */
.dashboard-layout {
  height: var(--viewport-height, 100vh);
  min-height: 0;
}

/* Mobil: dokunma hedefleri en az 44px (erişilebilirlik) */
.touch-manual,
.menu-toggle,
#nav-menu-toggle {
  min-height: 44px;
  min-width: 44px;
}

/* Görsel maskesi: metin okunabilirliği + 24px yuvarlak köşe */
.hero-image-wrap,
.sector-card-image {
  border-radius: 24px;
  overflow: hidden;
  position: relative;
}

.hero-image-wrap {
  aspect-ratio: 16 / 9;
  width: 100%;
}

.hero-image-wrap::after,
.sector-card-image::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, transparent, rgba(0, 0, 0, 0.8));
  pointer-events: none;
}

.hero-image-wrap img,
.sector-card-image img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 24px;
}

.sector-card-image {
  height: 180px;
}

.sector-card-image img {
  height: 100%;
}

/* ===== Aşama 2: Atmosfer arka plan (sadece dark mode) ===== */
.atmospheric-bg {
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  overflow: hidden;
}

/* Koyu lacivert–siyah gradyan: merkezden dışa */
.dark .atmospheric-bg {
  background: radial-gradient(
    ellipse 120% 100% at 50% 50%,
    #0f172a 0%,
    #0c1222 35%,
    #020617 65%,
    #000000 100%
  );
}

/* Yüzen ışık küreleri: 600px, blur 120px, %8 opaklık, mor/mavi */
.atmospheric-glow {
  position: absolute;
  width: 600px;
  height: 600px;
  border-radius: 50%;
  filter: blur(120px);
  opacity: 0.08;
  pointer-events: none;
}

.dark .atmospheric-glow-1 {
  background: #6366f1; /* indigo */
  top: -15%;
  left: -10%;
}

.dark .atmospheric-glow-2 {
  background: #3b82f6; /* blue */
  top: 20%;
  right: -15%;
}

.dark .atmospheric-glow-3 {
  background: #7c3aed; /* mor */
  bottom: -20%;
  left: 30%;
}

/* ===== Aşama 3: Glassmorphism (cam efekti) – Kimin İçin?, Avantajlar, Fiyatlandırma ===== */
.glass-card {
  transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1),
              box-shadow 0.4s cubic-bezier(0.4, 0, 0.2, 1),
              border-color 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Hover hareketi: hem light hem dark modda */
.glass-card:hover {
  transform: translateY(-8px);
}
.glass-card:hover {
  box-shadow: 0 20px 40px -12px rgba(0, 0, 0, 0.15);
}

.dark .glass-card {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(15px);
  -webkit-backdrop-filter: blur(15px);
}

.dark .glass-card:hover {
  transform: translateY(-10px);
  box-shadow: inset 0 0 60px rgba(255, 255, 255, 0.04),
              0 20px 40px rgba(0, 0, 0, 0.3);
}

/* ===== Aşama 4: Tipografi ve etkileşim ===== */
/* Başlıklar: font 800, letter-spacing -0.02em */
.headline {
  font-weight: 800;
  letter-spacing: -0.02em;
}

/* Akıcı geçiş: buton ve kartlar */
.transition-smooth {
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Scroll fade-in-up: başlangıç gizli */
.reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.6s cubic-bezier(0.4, 0, 0.2, 1),
              transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

.reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}