/* ================================================================
   SparkClean Batumi — Custom CSS
   Tailwind ezme ve scroll animasyonları
================================================================ */

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

html {
  scroll-behavior: smooth;
  -webkit-font-smoothing: antialiased;
}

body {
  font-family: 'Inter', 'Noto Sans Georgian', system-ui, sans-serif;
  overflow-x: hidden;
}

/* ── Scroll-Reveal Animasyonları ─────────────────────────── */
.reveal {
  opacity: 0;
  transform: translateY(32px);
  transition: opacity 0.65s cubic-bezier(.22,1,.36,1),
              transform 0.65s cubic-bezier(.22,1,.36,1);
}

.reveal.reveal-left  { transform: translateX(-32px); }
.reveal.reveal-right { transform: translateX(32px); }
.reveal.reveal-scale { transform: scale(0.93); }

.reveal.visible {
  opacity: 1;
  transform: none;
}

/* Gecikme sınıfları */
.delay-100 { transition-delay: .10s; }
.delay-200 { transition-delay: .20s; }
.delay-300 { transition-delay: .30s; }
.delay-400 { transition-delay: .40s; }
.delay-500 { transition-delay: .50s; }
.delay-600 { transition-delay: .60s; }

/* ── Header ──────────────────────────────────────────────── */
#site-header {
  transition: box-shadow 0.3s ease;
}

#site-header.scrolled #header-inner {
  box-shadow: 0 4px 24px rgba(15,23,42,0.08);
}

/* ── Hamburger Animasyonu ────────────────────────────────── */
#hamburger.open .ham-line:nth-child(1) {
  transform: translateY(8px) rotate(45deg);
}
#hamburger.open .ham-line:nth-child(2) {
  opacity: 0;
  transform: scaleX(0);
}
#hamburger.open .ham-line:nth-child(3) {
  transform: translateY(-8px) rotate(-45deg);
}

/* Ham-line base transitions */
.ham-line {
  transition: transform 0.3s ease, opacity 0.3s ease;
}

/* ── Mobile Nav ──────────────────────────────────────────── */
.mobile-nav {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.35s cubic-bezier(.22,1,.36,1);
}

.mobile-nav.open {
  max-height: 400px;
}

/* ── Language Dropdown ────────────────────────────────────── */
.lang-dropdown.open {
  opacity: 1 !important;
  visibility: visible !important;
  transform: translateY(0) !important;
}

/* ── Hero Section ─────────────────────────────────────────── */
.hero-gradient {
  background: linear-gradient(135deg, #f0fdfa 0%, #ecfdf5 40%, #f8fafc 100%);
}

.hero-blob {
  position: absolute;
  border-radius: 50%;
  filter: blur(80px);
  opacity: 0.35;
  pointer-events: none;
}

.hero-blob-1 {
  width: 520px;
  height: 520px;
  background: radial-gradient(circle, #99f6e4, #10b981);
  top: -160px;
  right: -100px;
  animation: blobFloat1 8s ease-in-out infinite;
}

.hero-blob-2 {
  width: 340px;
  height: 340px;
  background: radial-gradient(circle, #d1fae5, #5eead4);
  bottom: -80px;
  left: -60px;
  animation: blobFloat2 10s ease-in-out infinite;
}

@keyframes blobFloat1 {
  0%, 100% { transform: translateY(0) scale(1); }
  50%       { transform: translateY(20px) scale(1.04); }
}
@keyframes blobFloat2 {
  0%, 100% { transform: translateY(0) scale(1); }
  50%       { transform: translateY(-16px) scale(1.03); }
}

/* ── Stat Counter Animasyonu ──────────────────────────────── */
.stat-number {
  font-variant-numeric: tabular-nums;
}

/* ── Service Card Hover ───────────────────────────────────── */
.service-card {
  transition: transform 0.3s cubic-bezier(.22,1,.36,1),
              box-shadow 0.3s ease,
              border-color 0.3s ease;
}

.service-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 20px 40px rgba(37,99,235,0.12);
  border-color: #99f6e4;
}

.service-card .card-icon {
  transition: background-color 0.3s ease, transform 0.3s ease;
}

.service-card:hover .card-icon {
  background-color: #0d9488;
  transform: scale(1.1) rotate(-3deg);
}

.service-card:hover .card-icon i {
  color: #ffffff !important;
}

/* ── Why Us Feature Card ──────────────────────────────────── */
.feature-card {
  transition: transform 0.3s cubic-bezier(.22,1,.36,1),
              box-shadow 0.3s ease;
}

.feature-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 16px 32px rgba(15,23,42,0.08);
}

/* Camera Feature — special highlight */
.feature-card.highlight {
  background: linear-gradient(135deg, #f0fdfa 0%, #ccfbf1 100%);
  border: 1.5px solid #5eead4;
}

.feature-card.highlight .feature-icon {
  background: linear-gradient(135deg, #0d9488, #0f766e) !important;
}

.feature-card.highlight .feature-icon i {
  color: #fff !important;
}

/* ── Scroll-to-Top Button ─────────────────────────────────── */
#scroll-top {
  transition: opacity 0.3s ease,
              visibility 0.3s ease,
              transform 0.3s cubic-bezier(.22,1,.36,1),
              box-shadow 0.3s ease;
}

#scroll-top.visible {
  opacity: 1 !important;
  visibility: visible !important;
  transform: translateY(0) !important;
}

/* ── Modal ────────────────────────────────────────────────── */
#modal-overlay.open {
  opacity: 1 !important;
  visibility: visible !important;
}

#modal-overlay.open #modal-box {
  opacity: 1 !important;
  transform: translateY(0) !important;
}

/* ── Section Separators ───────────────────────────────────── */
.section-divider {
  width: 48px;
  height: 3px;
  background: linear-gradient(90deg, #0d9488, #2dd4bf);
  border-radius: 99px;
}

/* ── Navigation Active State ──────────────────────────────── */
.nav-link.active {
  color: #0d9488;
  background-color: #f0fdfa;
}

/* ── Gradient Text ────────────────────────────────────────── */
.gradient-text {
  background: linear-gradient(135deg, #0d9488 0%, #84cc16 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* ── Custom Scrollbar ─────────────────────────────────────── */
::-webkit-scrollbar       { width: 6px; }
::-webkit-scrollbar-track { background: #f8fafc; }
::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 99px; }
::-webkit-scrollbar-thumb:hover { background: #94a3b8; }

/* ── Focus Visible ────────────────────────────────────────── */
:focus-visible {
  outline: 2px solid #0d9488;
  outline-offset: 2px;
  border-radius: 4px;
}

/* ── Admin Link in Footer ─────────────────────────────────── */
footer a[href*="admin"] {
  opacity: 0.4;
  transition: opacity 0.2s;
}
footer a[href*="admin"]:hover {
  opacity: 0.7;
}

/* ── Responsive Tweaks ────────────────────────────────────── */
@media (max-width: 640px) {
  .hero-blob-1 { width: 280px; height: 280px; }
  .hero-blob-2 { width: 200px; height: 200px; }
}

/* ── Print ────────────────────────────────────────────────── */
@media print {
  #site-header, #scroll-top, #modal-overlay { display: none !important; }
}