/* ─────────────────────────────────────────────────────────
   Kampüsten Sektöre — Professional SaaS Landing Page
   Kesinlikle tek ekranlık (100vh, scroll yok). app.css'deki
   gerçek bileşen sınıfları aynen kullanılır — yüksek kaliteli
   modern tasarım ve mikro etkileşimler içerir.
───────────────────────────────────────────────────────── */

:root {
  --lp-accent:      #7c3aed;
  --lp-accent-dark: #6d28d9;
  --lp-accent-light:#a78bfa;
  --lp-text:        #0f172a;
  --lp-muted:       #64748b;
  --lp-border:      #e2e8f0;
}

*, *::before, *::after { box-sizing: border-box; }

html { height: 100%; }

body.lp-body {
  height: 100vh;
  height: 100dvh;
  margin: 0;
  overflow: hidden;
  font-family: 'Inter', 'Plus Jakarta Sans', system-ui, -apple-system, sans-serif;
  color: var(--lp-text);
  display: flex;
  flex-direction: column;
  position: relative;
  background-color: #f8fafc;
}

/* ── Hareketli arka plan gradyanı ── */
.lp-bg {
  position: fixed;
  inset: 0;
  z-index: 0;
  background-image:
    radial-gradient(ellipse 55% 55% at 12% 18%, rgba(124,58,237,.18) 0%, transparent 65%),
    radial-gradient(ellipse 48% 52% at 90% 82%, rgba(139,92,246,.15) 0%, transparent 65%),
    radial-gradient(ellipse 40% 35% at 75% 10%, rgba(167,139,250,.14) 0%, transparent 55%);
  background-size: 140% 140%;
  background-position: 0% 0%;
}

/* ── Navbar (ince/sade) ── */
.lp-navbar {
  position: relative;
  z-index: 5;
  flex-shrink: 0;
  height: 64px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 clamp(20px, 4vw, 48px);
  border-bottom: 1px solid rgba(124,58,237,.08);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  background: rgba(248, 250, 252, 0.75);
  animation: lpFadeUp .6s cubic-bezier(.22,1,.36,1) both;
}
.lp-brand { display: flex; align-items: center; gap: 8px; text-decoration: none; }
.lp-brand .mc-logo { font-size: 21px; }
.lp-brand-sub {
  font-size: 11px;
  font-weight: 600;
  color: var(--lp-muted);
  border-left: 1.5px solid var(--lp-border);
  padding-left: 10px;
  margin-left: 2px;
  line-height: 1.2;
  letter-spacing: -0.01em;
}
.lp-nav-actions { display: flex; align-items: center; gap: 10px; }

.lp-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  font-family: inherit;
  font-weight: 700;
  font-size: .84rem;
  padding: 9px 18px;
  border-radius: 10px;
  text-decoration: none;
  border: 1.5px solid transparent;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: background .2s cubic-bezier(.2,.8,.2,1), transform .2s cubic-bezier(.2,.8,.2,1), box-shadow .25s ease, border-color .2s ease;
}
.lp-btn svg { transition: transform .25s cubic-bezier(.2,.8,.2,1); }
.lp-btn--ghost {
  color: var(--lp-accent);
  border-color: rgba(124,58,237,.22);
  background: rgba(255,255,255,.75);
  backdrop-filter: blur(8px);
}
.lp-btn--ghost:hover { background: rgba(124,58,237,.1); border-color: var(--lp-accent); transform: translateY(-1px); }
.lp-btn--primary {
  color: #fff;
  background: linear-gradient(135deg, var(--lp-accent) 0%, var(--lp-accent-dark) 100%);
  box-shadow: 0 6px 18px -4px rgba(124,58,237,.45);
}
.lp-btn--primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 28px -6px rgba(124,58,237,.6);
}
.lp-btn--primary:hover svg { transform: translateX(3px); }
.lp-btn--primary:active { transform: translateY(0); }
.lp-btn--lg { padding: 13px 26px; font-size: .94rem; border-radius: 12px; }

/* ── Hero ── */
.lp-hero {
  position: relative;
  z-index: 2;
  flex: 1;
  min-height: 0;
  display: grid;
  grid-template-columns: minmax(320px, 620px) 1fr;
  align-items: center;
  gap: clamp(16px, 3vw, 48px);
  max-width: 1400px;
  margin: 0 auto;
  width: 100%;
  padding: 0 clamp(20px, 4vw, 48px);
}

/* ── Giriş animasyonu ── */
@keyframes lpFadeUp {
  from { opacity: 0; transform: translateY(18px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes lpFadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes lpPulseDot {
  0%, 100% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.4); opacity: 0.5; }
}

.lp-pill-wrapper {
  margin-bottom: clamp(10px, 2vh, 18px);
  animation: lpFadeUp .7s cubic-bezier(.22,1,.36,1) .1s both;
}

.lp-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 15px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.85);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(124, 58, 237, 0.22);
  box-shadow: 0 4px 14px -3px rgba(124, 58, 237, 0.12);
  color: var(--lp-accent);
  font-size: .73rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  transition: all .25s ease;
}
.lp-pill:hover {
  border-color: var(--lp-accent);
  box-shadow: 0 6px 20px -4px rgba(124, 58, 237, 0.22);
  transform: translateY(-1px);
}
.lp-pill-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--lp-accent);
  box-shadow: 0 0 8px var(--lp-accent);
  animation: lpPulseDot 2s infinite ease-in-out;
}

.lp-title {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-weight: 800;
  letter-spacing: -0.035em;
  line-height: 1.12;
  font-size: clamp(2rem, 4vw, 3.4rem);
  margin: 0 0 clamp(10px, 2vh, 18px);
  color: var(--lp-text);
  animation: lpFadeUp .7s cubic-bezier(.22,1,.36,1) .2s both;
}
.lp-gradient-text {
  background: linear-gradient(110deg, var(--lp-accent) 0%, #a78bfa 60%, #c026d3 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.lp-desc {
  font-size: clamp(.88rem, 1.1vw, 1.02rem);
  line-height: 1.62;
  color: var(--lp-muted);
  margin: 0 0 clamp(16px, 2.5vh, 24px);
  max-width: 46ch;
  animation: lpFadeUp .7s cubic-bezier(.22,1,.36,1) .32s both;
}

.lp-cta-row {
  display: flex; align-items: center; gap: 16px; margin-bottom: clamp(14px, 2.2vh, 20px);
  animation: lpFadeUp .7s cubic-bezier(.22,1,.36,1) .44s both;
}
.lp-login-hint { font-size: .8rem; color: var(--lp-muted); }
.lp-login-hint a { color: var(--lp-accent); font-weight: 700; text-decoration: none; transition: color .2s; }
.lp-login-hint a:hover { color: var(--lp-accent-dark); text-decoration: underline; }

/* ── Öne Çıkan Özellikler ── */
.lp-features {
  display: flex; flex-wrap: wrap; gap: 8px;
  animation: lpFadeUp .7s cubic-bezier(.22,1,.36,1) .58s both;
}
.lp-feature {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 6px 13px;
  border-radius: 999px;
  background: rgba(255,255,255,.75);
  border: 1px solid var(--lp-border);
  font-size: .73rem;
  font-weight: 600;
  color: #475569;
  transition: transform .2s cubic-bezier(.2,.8,.2,1), border-color .2s ease, box-shadow .2s ease;
}
.lp-feature:hover {
  transform: translateY(-2px);
  border-color: rgba(124,58,237,.35);
  box-shadow: 0 6px 14px -6px rgba(124,58,237,.3);
  background: #fff;
}
.lp-feature svg { width: 14px; height: 14px; color: var(--lp-accent); flex-shrink: 0; transition: transform .2s ease; }
.lp-feature:hover svg { transform: scale(1.2); }

/* ── Sağ: dekoratif SaaS-hero kompozisyonu ── */
.lp-scene {
  position: relative;
  height: 100%;
  min-height: 340px;
  display: flex;
  align-items: center;
  justify-content: center;
  perspective: 1400px;
}
.lp-scene__inner {
  position: relative;
  width: min(88%, 560px);
  height: min(88%, 560px);
  transform-style: preserve-3d;
  will-change: transform;
}

/* Merkezi yumuşak ışıma */
.lp-glow {
  position: absolute;
  inset: 8%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(168,85,247,.25) 0%, rgba(168,85,247,.08) 45%, transparent 72%);
  filter: blur(8px);
  z-index: 0;
}

/* Noktalardan oluşan dünya haritası */
.lp-worldmap {
  position: absolute;
  inset: 0;
  z-index: 1;
  opacity: .35;
  mask-image: radial-gradient(circle, black 45%, transparent 78%);
  -webkit-mask-image: radial-gradient(circle, black 45%, transparent 78%);
}

/* Yörünge halkaları */
.lp-orbit-ring {
  position: absolute;
  top: 50%; left: 50%;
  border: 1px solid rgba(124,58,237,.16);
  border-radius: 50%;
  z-index: 2;
  transform: translate(-50%, -50%);
}
.lp-orbit-ring--1 { width: 62%; height: 62%; }
.lp-orbit-ring--2 { width: 92%; height: 92%; border-style: dashed; border-color: rgba(124,58,237,.12); }

/* Bağlantı rotaları */
.lp-routes {
  position: absolute;
  inset: 0;
  z-index: 2;
  overflow: visible;
}
.lp-routes path {
  fill: none;
  stroke: rgba(124,58,237,.18);
  stroke-width: 1.2;
  stroke-dasharray: 3 6;
}
.lp-route-dot {
  fill: #a855f7;
  filter: drop-shadow(0 0 4px rgba(168,85,247,.85));
}
/* Rota noktaları eskiden GSAP MotionPath ile çizgi üzerinde ilerliyordu; GSAP
   CSP tarafından engellendiği için nokta cx/cy almadan (0,0) konumunda takılı
   kalıyordu. offset-path ile saf CSS'e taşındı: nokta kendi rotasını izler.
   offset-path 'path()' aynı d= değerini kullanır → çizgiden sapma olmaz. */
.lp-route-dot {
  offset-rotate: 0deg;               /* nokta yuvarlak; dönmesine gerek yok */
  animation: lpRouteRun 9s linear infinite;
}
#lpRouteDotA {
  offset-path: path("M40,300 Q140,225 200,200 Q260,175 362,108");
}
#lpRouteDotB {
  offset-path: path("M368,296 Q262,258 200,200 Q138,142 32,92");
  animation-duration: 11s;
  animation-delay: -5s;              /* iki nokta aynı anda başlamasın */
}
/* Yolun iki ucunda sönümlenir → başa sarma görünmez. */
@keyframes lpRouteRun {
  0%        { offset-distance: 0%;   opacity: 0; }
  12%       { opacity: 1; }
  85%       { opacity: 1; }
  100%      { offset-distance: 100%; opacity: 0; }
}

/* Saat Kulesi illüstrasyonu */
.lp-tower-art {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 3;
  width: 54%;
  max-width: 300px;
  height: auto;
  object-fit: contain;
  opacity: .82;
  mix-blend-mode: multiply;
}

/* Floating Glass UI Cards */
.lp-glass-card {
  position: absolute;
  z-index: 5;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 16px;
  background: rgba(255, 255, 255, 0.82);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid rgba(255, 255, 255, 0.9);
  border-radius: 14px;
  box-shadow: 0 12px 30px -10px rgba(124, 58, 237, 0.25);
  transition: transform .3s ease;
}
.lp-glass-card--top {
  top: 14%;
  right: 2%;
}
.lp-glass-card--bottom {
  bottom: 14%;
  left: 2%;
}
.lp-gc-badge {
  width: 34px;
  height: 34px;
  border-radius: 10px;
  background: rgba(124, 58, 237, 0.12);
  color: var(--lp-accent);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.lp-gc-badge svg { width: 18px; height: 18px; }
.lp-gc-badge--accent {
  background: rgba(16, 185, 129, 0.12);
  color: #10b981;
}
.lp-gc-body { display: flex; flex-direction: column; }
.lp-gc-title { font-weight: 700; font-size: .78rem; color: var(--lp-text); line-height: 1.2; }
.lp-gc-sub { font-size: .68rem; font-weight: 600; color: var(--lp-muted); margin-top: 2px; }

/* Yumuşak ışık noktaları */
.lp-pulse {
  position: absolute;
  z-index: 2;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(168,85,247,.6), transparent 72%);
  filter: blur(1px);
}
.lp-pulse--1 { width: 10px; height: 10px; top: 18%; left: 28%; }
.lp-pulse--2 { width: 7px;  height: 7px;  top: 66%; left: 20%; }
.lp-pulse--3 { width: 8px;  height: 8px;  top: 30%; left: 78%; }
.lp-pulse--4 { width: 6px;  height: 6px;  top: 78%; left: 70%; }

/* ── Mor parçacıklar: yavaş, çapraz AŞAĞI süzülme ────────────────────────────
   Hareket GSAP ile yapılıyordu; GSAP CDN'i CSP tarafından engellendiği için
   saf CSS @keyframes'e taşındı (JS animasyon döngüsü yok).

   Döngü ileri-geri (ping-pong) DEĞİL, tek yönlü bir yolculuktur: parçacık
   başlangıç noktasından çapraz olarak aşağı süzülür. Başa dönüş sıçraması
   görünmesin diye parçacık yolun başında fade-in, sonunda fade-out olur;
   konum sıfırlaması opacity 0 iken gerçekleşir → seamless.
   Yön: 1 ve 4 sağ-alt, 2 ve 3 sol-alt → aynı anda aynı yöne gitmezler.
   Hareket linear: doğal, sabit hızlı süzülme (ease sonda yavaşlayıp durur). */
@keyframes lpDriftA {   /* sağ-alt, geniş */
  0%, 100%  { transform: translate3d(0, 0, 0);         opacity: 0;  }
  0.01%     { transform: translate3d(0, 0, 0);         opacity: 0;  }
  18%       { opacity: .95; }
  78%       { opacity: .95; }
  99.99%    { transform: translate3d(20px, 30px, 0);   opacity: 0;  }
}
@keyframes lpDriftB {   /* sol-alt, dar */
  0%, 100%  { transform: translate3d(0, 0, 0);         opacity: 0;  }
  0.01%     { transform: translate3d(0, 0, 0);         opacity: 0;  }
  20%       { opacity: 1;   }
  76%       { opacity: 1;   }
  99.99%    { transform: translate3d(-15px, 24px, 0);  opacity: 0;  }
}
@keyframes lpDriftC {   /* sol-alt, en yavaş ve en uzun yol */
  0%, 100%  { transform: translate3d(0, 0, 0);         opacity: 0;  }
  0.01%     { transform: translate3d(0, 0, 0);         opacity: 0;  }
  16%       { opacity: .9;  }
  80%       { opacity: .9;  }
  99.99%    { transform: translate3d(-22px, 34px, 0);  opacity: 0;  }
}
@keyframes lpDriftD {   /* sağ-alt, kısa */
  0%, 100%  { transform: translate3d(0, 0, 0);         opacity: 0;  }
  0.01%     { transform: translate3d(0, 0, 0);         opacity: 0;  }
  19%       { opacity: 1;   }
  77%       { opacity: 1;   }
  99.99%    { transform: translate3d(16px, 21px, 0);   opacity: 0;  }
}
/* Süreler bilerek asal-benzeri ve farklı: ritimler senkronlanmaz.
   Negatif delay → sayfa açılır açılmaz hepsi yolun farklı yerindedir. */
.lp-pulse--1 { animation: lpDriftA 9s  linear infinite;      }
.lp-pulse--2 { animation: lpDriftB 11s linear infinite -4s;  }
.lp-pulse--3 { animation: lpDriftC 12s linear infinite -8s;  }
.lp-pulse--4 { animation: lpDriftD 8s  linear infinite -3s;  }

/* Cam efektli rozetler */
.lp-chip {
  position: absolute;
  z-index: 4;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: rgba(255,255,255,.65);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255,255,255,.8);
  box-shadow: 0 10px 22px -10px rgba(76,29,149,.35);
  color: var(--lp-accent);
  /* Yalnızca hover'da hareket — sürekli yukarı-aşağı animasyon YOK. */
  transition: transform .22s cubic-bezier(.22,1,.36,1), box-shadow .22s ease-out;
  will-change: transform;
}
/* İkon daireyle birlikte kalkar (svg ayrı animasyon almaz). */
.lp-chip:hover {
  transform: translateY(-5px) scale(1.04);
  box-shadow: 0 18px 32px -12px rgba(76,29,149,.5);
}
.lp-chip svg { width: 42%; height: 42%; }
.lp-chip--plane    { width: 44px; height: 44px; top: 6%;  left: 4%; }
.lp-chip--suitcase { width: 40px; height: 40px; top: 70%; left: 0%; }
.lp-chip--compass  { width: 42px; height: 42px; top: 12%; right: 2%; }
.lp-chip--pin      { width: 38px; height: 38px; top: 76%; right: 8%; }
.lp-chip--utensils { width: 36px; height: 36px; top: 42%; left: -4%; }
.lp-chip--chef     { width: 36px; height: 36px; top: 46%; right: -4%; }

@media (prefers-reduced-motion: reduce) {
  .lp-scene__inner { transform: none !important; }
  /* Sürekli hareket kapatılır; hover geri bildirimi korunur ama anlık olur. */
  .lp-pulse { animation: none !important; }
  .lp-chip  { transition: none !important; }
  /* Rota noktaları durur ama rotanın ortasında görünür kalır (kaybolmasın). */
  .lp-route-dot { animation: none !important; offset-distance: 50%; opacity: 1; }
}

/* ── Footer ── */
.lp-footer {
  position: relative;
  z-index: 5;
  flex-shrink: 0;
  text-align: center;
  padding: 8px 0 12px;
  font-size: .7rem;
  color: var(--lp-muted);
  animation: lpFadeIn 1s ease .9s both;
}
/* Altbilgideki firma baglantisi: tarayicinin mavi/altcizgili varsayilani
   yerine altbilginin kendi tonunu kullanir; tiklanabilir oldugu hover'da
   renk + alt cizgi ile belli olur. */
.lp-footer__link {
  color: inherit;
  font-weight: 600;
  text-decoration: none;
  transition: color .18s ease;
}
.lp-footer__link:hover,
.lp-footer__link:focus-visible {
  color: var(--lp-accent);
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* ── Responsive Medya Sorguları ── */
@media (max-width: 880px) {
  .lp-hero { grid-template-columns: 1fr; }
  .lp-scene { display: none; }
  .lp-brand-sub { display: none; }
}
@media (max-height: 640px) {
  .lp-stats { display: none; }
  .lp-features { display: none; }
}
@media (max-width: 480px) {
  .lp-navbar { padding: 0 14px; }
  .lp-nav-actions { gap: 6px; }
  .lp-navbar .lp-btn { padding: 7px 12px; font-size: .75rem; }
  .lp-brand .mc-logo { font-size: 18px; }
  .lp-title { font-size: 1.8rem; }
  .lp-stats { padding: 8px 12px; gap: 10px; }
}
@media (max-width: 360px) {
  .lp-navbar .lp-btn--ghost { display: none; }
}