/* =============================================================================
   Corvex Crane — MODERN / YUMUŞAK tasarım sistemi
   Yuvarlak hatlar, yumuşak gölgeler, küçük & okunaklı tipografi.
   ========================================================================== */

:root{
  --brand:#1d3a74; --brand-600:#183162; --brand-700:#122750; --navy:#0b1c3d;
  --blue:#2f6fd0; --gold:#e0a83a; --gold-600:#c8912a; --teal:#0fa3a3;
  --ink:#14213d; --body:#586074; --muted:#8b93a4; --soft:#f3f7fc; --line:#e4ebf5;
}
*{box-sizing:border-box}
html{-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
body{background:#fff;color:var(--body);line-height:1.6}
h1,h2,h3,h4{font-family:'Plus Jakarta Sans',system-ui,sans-serif;color:var(--ink);line-height:1.15;letter-spacing:-.01em}

::selection{background:var(--brand);color:#fff}
::-webkit-scrollbar{width:11px}
::-webkit-scrollbar-track{background:#eef2f8}
::-webkit-scrollbar-thumb{background:#c7d3e2;border-radius:6px;border:2px solid #eef2f8}
::-webkit-scrollbar-thumb:hover{background:#a9b8cc}

/* -----------------------------------------------------------------------------
   Yardımcı bileşen sınıfları
----------------------------------------------------------------------------- */
.container-x{max-width:80rem;margin:0 auto;padding-left:1.25rem;padding-right:1.25rem}
@media(min-width:640px){.container-x{padding-left:2rem;padding-right:2rem}}

.eyebrow{display:inline-flex;align-items:center;gap:.5rem;font-size:.75rem;font-weight:700;
  letter-spacing:.08em;text-transform:uppercase;color:var(--brand);margin-bottom:.5rem}
.eyebrow::before{content:"";width:1.2rem;height:2px;border-radius:2px;background:var(--gold)}
.eyebrow.center{display:flex;align-items:center;justify-content:center;width:100%;margin-left:auto;margin-right:auto}
.eyebrow.center::before,.eyebrow.center::after{content:"";width:1.2rem;height:2px;border-radius:2px;background:var(--gold);display:inline-block}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  font-weight: 600;
  font-size: 0.88rem;
  letter-spacing: -0.01em;
  border-radius: 9999px;
  padding: 0.85rem 1.75rem;
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  cursor: pointer;
  white-space: nowrap;
}
.btn-primary {
  background: linear-gradient(135deg, #1d3a74, #2c5ba7);
  color: #fff;
  box-shadow: 0 10px 24px -8px rgba(29, 58, 116, 0.4);
}
.btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 16px 32px -8px rgba(29, 58, 116, 0.55);
}
.btn-gold {
  background: linear-gradient(135deg, #e8b552, #d99223);
  color: #fff;
  box-shadow: 0 10px 24px -8px rgba(224, 168, 58, 0.35);
}
.btn-gold:hover {
  transform: translateY(-2px);
  box-shadow: 0 16px 32px -8px rgba(224, 168, 58, 0.5);
}
.btn-ghost {
  background: #fff;
  color: var(--brand);
  border: 1px solid var(--line);
}
.btn-ghost:hover {
  border-color: var(--brand);
  background: var(--brand-50, #eef3fb);
  transform: translateY(-1px);
}
.btn-light {
  background: #fff;
  color: var(--brand);
  box-shadow: 0 4px 12px rgba(11, 28, 61, 0.05);
}
.btn-light:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 24px rgba(11, 28, 61, 0.1);
}

.card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 1.5rem;
  box-shadow: 0 10px 30px -15px rgba(29, 58, 116, 0.12);
  transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
  position: relative;
}
.card-hover:hover {
  transform: translateY(-8px);
  box-shadow: 0 30px 60px -20px rgba(29, 58, 116, 0.18), 0 10px 30px -10px rgba(29, 58, 116, 0.05);
  border-color: rgba(29, 58, 116, 0.25);
}

/* Gradyan başlık / vurgu metni */
.text-gradient {
  background: linear-gradient(135deg, #1d3a74, #3b76d6);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* Gradyanlı ikon karosu */
.icon-tile {
  width: 3.25rem;
  height: 3.25rem;
  border-radius: 1rem;
  display: grid;
  place-items: center;
  color: #fff;
  background: linear-gradient(135deg, #1d3a74, #2c5ba7);
  box-shadow: 0 8px 20px -6px rgba(29, 58, 116, 0.4);
}
.icon-tile.soft {
  background: linear-gradient(135deg, #eef3fb, #dbe6f6);
  color: var(--brand);
  box-shadow: none;
}

/* Kartta üst hover vurgu çizgisi */
.card-accent::after{content:"";position:absolute;left:1.25rem;right:1.25rem;top:0;height:3px;border-radius:0 0 3px 3px;
  background:linear-gradient(90deg,#1d3a74,#2f6fd0);transform:scaleX(0);transform-origin:left;transition:transform .35s ease}
.card-accent:hover::after{transform:scaleX(1)}

/* Koyu lacivert bant (istatistik/CTA) */
.band-navy{background:linear-gradient(150deg,#122750,#1d3a74 55%,#255fb5);color:#fff;position:relative;overflow:hidden}
.band-navy .dots{position:absolute;inset:0;opacity:.35;background-image:radial-gradient(rgba(255,255,255,.18) 1px,transparent 1px);background-size:22px 22px;pointer-events:none}

/* Dekoratif üst mesh (hero arkası) */
.mesh{position:absolute;inset:0;z-index:-1;pointer-events:none;overflow:hidden}
.mesh::before,.mesh::after{content:"";position:absolute;border-radius:9999px;filter:blur(70px)}
.mesh::before{width:36rem;height:36rem;top:-14rem;right:-8rem;background:radial-gradient(circle,rgba(47,111,208,.18),transparent 70%)}
.mesh::after{width:30rem;height:30rem;top:-6rem;left:-10rem;background:radial-gradient(circle,rgba(224,168,58,.14),transparent 70%)}

.link-arrow{display:inline-flex;align-items:center;gap:.4rem;font-weight:600;font-size:.9rem;color:var(--brand);transition:gap .25s}
.link-arrow:hover{gap:.7rem}

.chip{display:inline-flex;align-items:center;gap:.35rem;font-size:.72rem;font-weight:700;padding:.3rem .75rem;border-radius:9999px}

/* Yumuşak bölüm arka planı */
.section-soft{background:var(--soft)}

/* Dekoratif yumuşak ışıltı */
.glow{position:absolute;border-radius:9999px;filter:blur(64px);opacity:.5;pointer-events:none;z-index:0}
.glow-brand{background:radial-gradient(circle,rgba(29,58,116,.20),transparent 70%)}
.glow-gold{background:radial-gradient(circle,rgba(224,168,58,.28),transparent 70%)}

/* -----------------------------------------------------------------------------
   Navbar — scroll ile beyaz/blur + gölge
----------------------------------------------------------------------------- */
/* -----------------------------------------------------------------------------
   Navbar — Modern Yüzen Ada (Glassmorphic Floating Island)
----------------------------------------------------------------------------- */
#navbar {
  background: transparent;
  transition: all 0.45s cubic-bezier(0.16, 1, 0.3, 1);
  padding: 0.8rem 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  max-width: 100%;
}
#navbar.scrolled {
  background: rgba(255, 255, 255, 0.82);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  box-shadow: 0 16px 36px -16px rgba(11, 28, 61, 0.16), 0 1px 3px rgba(11, 28, 61, 0.04);
  border: 1px solid rgba(29, 58, 116, 0.08);
  margin-top: 0.75rem;
  border-radius: 9999px;
  width: calc(100% - 2.5rem);
  max-width: 80rem;
  padding: 0.4rem 1.2rem;
}

/* -----------------------------------------------------------------------------
   REVEAL — yumuşak fade-up (IntersectionObserver ".in" ile). Kurşun geçirmez.
----------------------------------------------------------------------------- */
.js [data-reveal]{opacity:0;transform:translateY(20px);transition:opacity .7s cubic-bezier(.22,.7,.25,1),transform .7s cubic-bezier(.22,.7,.25,1)}
.js [data-reveal].in{opacity:1;transform:none}

/* -----------------------------------------------------------------------------
   Çapraz bölünmüş hero (Gemi Üstü / Araç Üstü) — yumuşak & yuvarlak
----------------------------------------------------------------------------- */
.hero-split {
  position: absolute;
  inset: 0;
  overflow: hidden;
  transition: clip-path 0.75s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.75s cubic-bezier(0.16, 1, 0.3, 1);
}
.hero-split .hero-img {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  transition: transform 1.2s cubic-bezier(0.16, 1, 0.3, 1);
}
.hero-split:hover .hero-img{transform:scale(1.06)}
.hero-content{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:flex-end;padding:2rem;z-index:20;transition:opacity 0.4s ease}
@media(min-width:1024px){
  .hero-left, .hero-right {
    transition: clip-path 0.8s cubic-bezier(0.25, 1, 0.5, 1);
  }
  .hero-left{clip-path:polygon(0 0, 56% 0, 44% 100%, 0 100%)}
  .hero-right{clip-path:polygon(56% 0, 100% 0, 100% 100%, 44% 100%)}
  
  /* Constrain split image widths to center within their respective halves */
  .hero-left .hero-img {
    width: 56%;
    left: 0;
    right: auto;
    transition: width 0.8s cubic-bezier(0.25, 1, 0.5, 1), transform 1.2s cubic-bezier(0.16, 1, 0.3, 1);
  }
  .hero-right .hero-img {
    width: 56%;
    right: 0;
    left: auto;
    transition: width 0.8s cubic-bezier(0.25, 1, 0.5, 1), transform 1.2s cubic-bezier(0.16, 1, 0.3, 1);
  }
  
  /* Split Screen Dynamic Hover Expand/Shrink Effect */
  #hero:has(.hero-left:hover) .hero-left {
    clip-path: polygon(0 0, 62% 0, 50% 100%, 0 100%);
  }
  #hero:has(.hero-left:hover) .hero-left .hero-img {
    width: 62%;
  }
  #hero:has(.hero-left:hover) .hero-right {
    clip-path: polygon(62% 0, 100% 0, 100% 100%, 50% 100%);
  }
  #hero:has(.hero-left:hover) .hero-right .hero-img {
    width: 50%;
  }
  #hero:has(.hero-left:hover) .hero-right .hero-content {
    opacity: 0.35;
  }
  
  #hero:has(.hero-right:hover) .hero-left {
    clip-path: polygon(0 0, 50% 0, 38% 100%, 0 100%);
  }
  #hero:has(.hero-right:hover) .hero-left .hero-img {
    width: 50%;
  }
  #hero:has(.hero-right:hover) .hero-right {
    clip-path: polygon(50% 0, 100% 0, 100% 100%, 38% 100%);
  }
  #hero:has(.hero-right:hover) .hero-right .hero-img {
    width: 62%;
  }
  #hero:has(.hero-right:hover) .hero-left .hero-content {
    opacity: 0.35;
  }

  .hero-left .hero-content{align-items:flex-start;padding:0 44% 6vh 4.5rem;justify-content:flex-end}
  .hero-right .hero-content{align-items:flex-end;text-align:right;padding:20vh 4.5rem 0 44%;justify-content:flex-start}
}
@media(max-width:1023px){
  #hero-wrap{height:auto!important}
  .hero-split{position:relative;height:38vh;min-height:280px;clip-path:none!important}
  .hero-content{padding:1.5rem}
}

/* Formlar — yumuşak yuvarlak */
.field{width:100%;background:#fff;border:1px solid var(--line);border-radius:.85rem;padding:.8rem 1rem;color:var(--ink);
  font-size:.95rem;transition:border-color .2s, box-shadow .2s}
.field::placeholder{color:#aab4c2}
.field:focus{outline:none;border-color:var(--brand);box-shadow:0 0 0 4px rgba(29,58,116,.1)}

/* Lightbox / modal */
#lightbox.show,#video-modal.show{display:flex}

/* Prose (blog içeriği) */
.prose-soft p{margin-bottom:1rem}
.prose-soft{color:var(--body)}

@media(prefers-reduced-motion:reduce){
  .js [data-reveal]{opacity:1!important;transform:none!important}
  *{animation:none!important;scroll-behavior:auto!important}
}

/* -----------------------------------------------------------------------------
   Marquee / Sonsuz Kayan Logo Şeridi (Minimalist & Premium)
----------------------------------------------------------------------------- */
.marquee-container {
  display: flex;
  overflow: hidden;
  user-select: none;
  gap: 3rem;
  position: relative;
  width: 100%;
}
.marquee-content {
  display: flex;
  flex-shrink: 0;
  justify-content: space-around;
  min-width: 100%;
  gap: 4rem;
  animation: marquee-scroll 32s linear infinite;
}
.marquee-container:hover .marquee-content {
  animation-play-state: paused;
}
@keyframes marquee-scroll {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}
.ref-logo-item {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 3.5rem;
  opacity: 0.65;
  transition: opacity 0.3s ease, transform 0.3s ease, filter 0.3s ease;
  filter: grayscale(100%) contrast(90%);
}
.ref-logo-item:hover {
  opacity: 1;
  filter: grayscale(0%) contrast(100%);
  transform: scale(1.04);
}