/* ============================================================
   Usta Kombi — Premium Glassmorphism & Vibrant Design System
   ============================================================ */

:root {
  --navy:           oklch(0.22 0.06 260);
  --navy-deep:      oklch(0.14 0.05 260);
  --electric:       oklch(0.65 0.22 250);
  --electric-glow:  oklch(0.72 0.20 235);
  --orange:         oklch(0.72 0.20 50);
  --orange-deep:    oklch(0.64 0.22 40);
  --surface:        #f4f7fc;
  --surface-muted:  #eef3f9;
  --border:         rgba(255, 255, 255, 0.7);
  --muted-fg:       oklch(0.45 0.04 260);

  /* Glassmorphism Global Tokens */
  --glass-bg:         rgba(255, 255, 255, 0.65);
  --glass-bg-hover:   rgba(255, 255, 255, 0.88);
  --glass-border:     rgba(255, 255, 255, 0.85);
  --glass-shadow:     0 15px 35px -10px rgba(14, 28, 64, 0.08), inset 0 1px 1px rgba(255, 255, 255, 0.9);
  --glass-shadow-hover: 0 25px 50px -15px rgba(14, 28, 64, 0.16), inset 0 1px 2px rgba(255, 255, 255, 1);

  --gradient-aurora: radial-gradient(1200px 700px at 15% 10%, rgba(99, 102, 241, 0.1), transparent 60%),
                     radial-gradient(1000px 600px at 85% 25%, rgba(14, 165, 233, 0.12), transparent 55%),
                     radial-gradient(900px 500px at 50% 80%, rgba(249, 115, 22, 0.06), transparent 50%),
                     linear-gradient(180deg, #f8fafc 0%, #eef2f7 50%, #f1f5f9 100%);
  --shadow-glow:     0 12px 40px -8px oklch(0.65 0.22 250 / 0.45);
}

/* ── Resets & High-Res Base ────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html {
  scroll-behavior: smooth;
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

@media (min-width: 1920px) {
  html { font-size: 18px; }
}

body {
  font-family: 'Inter', ui-sans-serif, system-ui, sans-serif;
  background: var(--gradient-aurora);
  background-attachment: fixed;
  color: var(--navy);
  overflow-x: hidden;
  position: relative;
}

h1,h2,h3,h4 {
  font-family: 'Plus Jakarta Sans', 'Inter', ui-sans-serif, system-ui, sans-serif;
  letter-spacing: -0.03em;
}

/* ── Color & Utility Classes ───────────────────────────────── */
.text-navy     { color: var(--navy); }
.text-electric { color: var(--electric); }
.text-orange   { color: var(--orange); }
.text-muted    { color: var(--muted-fg); }
.bg-electric   { background-color: var(--electric); }
.bg-navy       { background-color: var(--navy); }
.bg-navy-deep  { background-color: var(--navy-deep); }
.shadow-soft   { box-shadow: 0 10px 30px -10px rgba(14, 28, 64, 0.08); }
.shadow-elevated { box-shadow: 0 25px 50px -15px rgba(14, 28, 64, 0.15); }

/* ── FADE IN UP KEYFRAMES & ANIMATIONS (Guaranteed Visibility) ── */
@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(24px); }
  to   { opacity: 1; transform: translateY(0); }
}

.fade-in-up   { animation: fadeInUp 0.6s ease-out forwards; }
.fade-in-up-1 { animation-delay: 0.05s; }
.fade-in-up-2 { animation-delay: 0.15s; }
.fade-in-up-3 { animation-delay: 0.25s; }
.fade-in-up-4 { animation-delay: 0.35s; }
.fade-in-up-5 { animation-delay: 0.45s; }

/* ── REAL GLASS BUTTONS (Vertical, Round default, Sideways Expand on Hover) ── */
.real-glass-btn {
  width: 52px;
  height: 52px;
  min-width: 52px;
  max-width: 52px;
  border-radius: 9999px;
  background: rgba(255, 255, 255, 0.55);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  border: 1px solid rgba(255, 255, 255, 0.9);
  box-shadow: 0 10px 30px 0 rgba(31, 38, 135, 0.15), inset 0 1px 1px rgba(255, 255, 255, 0.8);
  display: flex;
  align-items: center;
  overflow: hidden;
  padding: 0 14px;
  transition: width 0.45s cubic-bezier(0.16, 1, 0.3, 1),
              max-width 0.45s cubic-bezier(0.16, 1, 0.3, 1),
              background 0.3s ease,
              box-shadow 0.3s ease;
  position: relative;
  cursor: pointer;
  text-decoration: none;
}

.real-glass-btn:hover {
  width: 175px;
  max-width: 175px;
  background: rgba(255, 255, 255, 0.92);
  box-shadow: 0 16px 40px 0 rgba(31, 38, 135, 0.25), inset 0 1px 2px rgba(255, 255, 255, 1);
}

.real-glass-btn .glass-icon {
  width: 24px;
  height: 24px;
  min-width: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: transform 0.3s ease;
}

.real-glass-btn:hover .glass-icon {
  transform: scale(1.18);
}

.real-glass-btn .glass-text {
  opacity: 0;
  white-space: nowrap;
  font-size: 0.875rem;
  font-weight: 800;
  color: var(--navy);
  margin-left: 12px;
  transition: opacity 0.35s ease 0.1s;
  pointer-events: none;
}

.real-glass-btn:hover .glass-text {
  opacity: 1;
}

/* ── SITE-WIDE GLASS CARDS & PANELS ───────────────────────── */
.glass-card {
  background: var(--glass-bg);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid var(--glass-border);
  box-shadow: var(--glass-shadow);
  position: relative;
  overflow: hidden;
  opacity: 1;
}

.glass-card-hover {
  transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}
.glass-card-hover:hover {
  background: var(--glass-bg-hover);
  transform: translateY(-8px);
  box-shadow: var(--glass-shadow-hover);
  border-color: rgba(255, 255, 255, 1);
}

/* ── SERVICE CARDS (Yanarlı Dönerli Logo Renkleri İnce Çizgi) ── */
@keyframes serviceBorderRotate {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

.service-card {
  position: relative !important;
  z-index: 1 !important;
  border: none !important;
  border-radius: 1.25rem !important; /* 20px */
  overflow: hidden !important;
  background: transparent !important;
  box-shadow: var(--glass-shadow) !important;
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.4s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

/* Rotating Logo-Color Shimmering Gradient Border */
.service-card::before {
  content: "" !important;
  position: absolute !important;
  inset: -65% !important;
  z-index: -2 !important;
  background: conic-gradient(
    from 0deg at 50% 50%,
    #0ea5e9 0%,
    #38bdf8 20%,
    #f97316 42%,
    #ff6b00 58%,
    #1e3a8a 78%,
    #0ea5e9 100%
  ) !important;
  animation: serviceBorderRotate 5.5s linear infinite !important;
}

/* Inner Glass Background Creating a Thin 1.75px Shimmering Line (`ince şık bir çizgi`) */
.service-card::after {
  content: "" !important;
  position: absolute !important;
  inset: 1.75px !important;
  z-index: -1 !important;
  border-radius: calc(1.25rem - 1.75px) !important;
  background: rgba(255, 255, 255, 0.95) !important;
  backdrop-filter: blur(24px) !important;
  -webkit-backdrop-filter: blur(24px) !important;
  transition: background 0.4s ease !important;
}

.service-card:hover {
  transform: translateY(-8px) !important;
  box-shadow: 0 20px 40px -15px rgba(14, 165, 233, 0.28), 0 10px 25px -10px rgba(249, 115, 22, 0.25) !important;
}

.service-card:hover::before {
  animation-duration: 2.8s !important;
}

.service-card:hover::after {
  background: rgba(255, 255, 255, 0.99) !important;
}

/* ── NAVBAR GLASS ──────────────────────────────────────────── */
#navbar {
  transition: background 0.4s, backdrop-filter 0.4s, box-shadow 0.4s, border-color 0.4s;
}
#navbar.scrolled {
  background: rgba(255, 255, 255, 0.78);
  backdrop-filter: blur(28px);
  -webkit-backdrop-filter: blur(28px);
  box-shadow: 0 10px 30px -10px rgba(14, 28, 64, 0.12);
  border-bottom: 1px solid rgba(255, 255, 255, 0.7);
}

/* ── VIBRANT GRADIENT BUTTONS ──────────────────────────────── */
.btn-cta {
  transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.25s ease;
  position: relative;
  overflow: hidden;
}
.btn-cta:hover  { transform: scale(1.05); box-shadow: var(--shadow-elevated); }
.btn-cta:active { transform: scale(0.97); }

/* ── MARQUEE & GALLERY ─────────────────────────────────────── */
@keyframes marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
.brands-track,
.gallery-track { animation: marquee 35s linear infinite; }
.gallery-track:hover { animation-play-state: paused; }

.gallery-item {
  transition: width 0.5s cubic-bezier(0.16, 1, 0.3, 1), border-radius 0.5s ease-out, box-shadow 0.5s ease-out;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 2px solid rgba(255, 255, 255, 0.7);
}
.gallery-item:hover {
  width: 360px !important;
  border-radius: 1.25rem !important;
  box-shadow: var(--glass-shadow-hover);
  border-color: rgba(255, 255, 255, 1);
}
.gallery-caption {
  transform: translateY(100%);
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}
.gallery-item:hover .gallery-caption { transform: translateY(0); }

/* ── FLOAT & ANIMATIONS ────────────────────────────────────── */
@keyframes float {
  0%, 100% { transform: translateY(0); }
  50%       { transform: translateY(-12px); }
}
.float-slow   { animation: float 6s ease-in-out infinite; }
.float-medium { animation: float 5s ease-in-out infinite; animation-delay: -2s; }
.float-fast   { animation: float 4s ease-in-out infinite; animation-delay: -1s; }

@keyframes breathe {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  25%       { transform: translateY(-4px) rotate(0.3deg); }
  50%       { transform: translateY(-7px) rotate(0.5deg); }
  75%       { transform: translateY(-4px) rotate(-0.3deg); }
}
.breathe { animation: breathe 3.6s ease-in-out infinite; }

@keyframes glow-pulse {
  0%, 100% { opacity: 0.55; transform: translate(-50%, -50%) scale(1); }
  50%       { opacity: 0.85; transform: translate(-50%, -50%) scale(1.15); }
}
.glow-pulse { animation: glow-pulse 4.5s ease-in-out infinite; }

/* ── ANIMATE SECTION (Fully Visible Fallback) ──────────────── */
.animate-section {
  opacity: 1;
  transition: opacity 0.65s ease-out, transform 0.65s ease-out;
}

/* ── FORM FIELDS GLASS ─────────────────────────────────────── */
.form-field {
  background: rgba(255, 255, 255, 0.75) !important;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.85) !important;
  transition: all 0.25s ease;
}
.form-field:focus {
  border-color: var(--electric) !important;
  background: rgba(255, 255, 255, 0.95) !important;
  box-shadow: 0 0 0 4px rgba(14, 165, 233, 0.15) !important;
  outline: none;
}

.font-display { font-family: 'Plus Jakarta Sans', 'Inter', ui-sans-serif, system-ui, sans-serif; }

/* ============================================================
   MOBILE & TABLET RESPONSIVE OVERHAUL (< 1024px)
   ============================================================ */
@media (max-width: 1023px) {
  html, body {
    overflow-x: hidden !important;
    width: 100% !important;
    position: relative !important;
  }

  /* Hero Section Right Area on Mobile (Balanced Stage filling middle space) */
  .hero-right {
    height: 310px !important;
    max-width: 350px !important;
    margin: 0.5rem auto !important;
    position: relative !important;
    overflow: visible !important;
  }

  .hero-technician-wrap {
    width: 195px !important;
    left: 50% !important;
    right: auto !important;
    transform: translateX(-42%) !important;
    bottom: 0 !important;
  }

  .hero-technician-wrap img {
    max-height: 300px !important;
  }

  /* Compact Floating Cards around Centered Technician */
  .hero-card-klima {
    width: 126px !important;
    padding: 0.55rem !important;
    top: 4px !important;
    left: 0px !important;
    border-radius: 0.95rem !important;
    z-index: 30 !important;
  }
  .hero-card-klima img {
    height: 50px !important;
  }

  .hero-card-kombi {
    width: 120px !important;
    padding: 0.55rem !important;
    top: 38px !important;
    right: 0px !important;
    left: auto !important;
    border-radius: 0.95rem !important;
    z-index: 30 !important;
  }
  .hero-card-kombi img {
    height: 52px !important;
  }

  .hero-card-beyaz {
    width: 128px !important;
    padding: 0.55rem !important;
    bottom: 8px !important;
    right: 4px !important;
    left: auto !important;
    border-radius: 0.95rem !important;
    z-index: 30 !important;
  }
  .hero-card-beyaz img {
    height: 52px !important;
  }

  .glass-card .text-xs {
    font-size: 0.7rem !important;
  }

  /* Mobile side-by-side buttons */
  .hero-mobile-buttons {
    max-width: 440px !important;
    margin: 0.25rem auto 0 auto !important;
  }

  /* Social Bar on Mobile (< 1024px) positioned lower-left above bottom CTA buttons */
  #social-bar {
    left: 8px !important;
    bottom: 82px !important;
    top: auto !important;
    transform: none !important;
    gap: 8px !important;
  }

  .real-glass-btn {
    width: 40px !important;
    height: 40px !important;
    min-width: 40px !important;
    max-width: 40px !important;
    padding: 0 8px !important;
    box-shadow: 0 6px 20px rgba(31, 38, 135, 0.18), inset 0 1px 1px rgba(255, 255, 255, 0.9) !important;
  }

  .real-glass-btn:hover,
  .real-glass-btn:active {
    width: 130px !important;
    max-width: 130px !important;
  }

  .real-glass-btn .glass-icon {
    width: 20px !important;
    height: 20px !important;
    min-width: 20px !important;
  }

  .real-glass-btn .glass-text {
    font-size: 0.74rem !important;
    margin-left: 6px !important;
  }

  /* Gallery Items on Mobile */
  .gallery-item {
    width: 155px !important;
    height: 290px !important;
  }
  .gallery-item:hover,
  .gallery-item:active {
    width: 250px !important;
    border-radius: 1.5rem !important;
  }
}