/* ========================================================
   BAYKUŞ TAKSİ - STYLESHEET (PURE CODE, MODERN & SLEEK)
   ======================================================== */

:root {
  --color-obsidian: #07090e;
  --color-obsidian-card: #0c101b;
  --color-amber: #ffb800;
  --color-amber-hover: #f59e0b;
  --color-amber-glow: rgba(255, 184, 0, 0.4);
  --color-emerald: #10b981;
}

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

html {
  scroll-behavior: smooth;
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
  background-color: var(--color-obsidian);
  color: #f1f5f9;
}

body {
  overflow-x: hidden;
  min-height: 100vh;
  position: relative;
  letter-spacing: -0.01em;
}

#globalBirdsCanvas {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  pointer-events: none;
  z-index: 0;
}

.font-display {
  font-family: 'Urbanist', sans-serif;
  letter-spacing: -0.025em;
}

.font-mono {
  font-family: 'JetBrains Mono', monospace;
}

/* ========================================================
   TAXI CHECKER PATTERNS (PURE CODE CSS)
   ======================================================== */
.taxi-top-strip {
  width: 100%;
  height: 6px;
  background: repeating-linear-gradient(
    90deg,
    #ffb800 0,
    #ffb800 16px,
    #000000 16px,
    #000000 32px
  );
  position: fixed;
  top: 0;
  left: 0;
  z-index: 100;
}

.taxi-strip-pattern {
  background: repeating-linear-gradient(
    45deg,
    #ffb800 0,
    #ffb800 8px,
    #000000 8px,
    #000000 16px
  );
}

/* Buttons */
.btn-primary-taxi {
  background: linear-gradient(135deg, #ffb800, #f59e0b);
  color: #07090e;
}
.btn-primary-taxi:hover {
  background: linear-gradient(135deg, #fcd34d, #f59e0b);
  transform: translateY(-1px);
}

/* ========================================================
   VIP DISPATCH HUD & AUTOMOTIVE EMBLEM STYLING
   ======================================================== */
.hero-car-pill {
  cursor: pointer;
  user-select: none;
  border-width: 1.5px;
}
.hero-car-pill:hover {
  border-color: rgba(255, 184, 0, 0.4);
}
.hero-car-pill.active {
  border-color: #ffb800 !important;
  background-color: rgba(255, 184, 0, 0.15) !important;
  color: #fde047 !important;
  box-shadow: 0 0 15px rgba(255, 184, 0, 0.2);
}

/* Digital LED Display Glow */
.digital-glow {
  text-shadow: 0 0 12px rgba(255, 184, 0, 0.7), 0 0 25px rgba(255, 184, 0, 0.4);
}

/* ========================================================
   RADAR STYLES
   ======================================================== */
.radar-sweeper {
  background: conic-gradient(
    from 0deg,
    rgba(255, 184, 0, 0) 0deg,
    rgba(255, 184, 0, 0) 300deg,
    rgba(255, 184, 0, 0.2) 345deg,
    rgba(255, 184, 0, 0.7) 360deg
  );
  animation: radarSpin 4s linear infinite;
}

@keyframes radarSpin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

.taxi-blip {
  position: absolute;
  transform: translate(-50%, -50%);
  display: flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  z-index: 20;
}

.blip-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background-color: #ffb800;
  box-shadow: 0 0 10px #ffb800, 0 0 20px #ffb800;
  display: inline-block;
  animation: blipPulse 1.8s ease-in-out infinite;
}

@keyframes blipPulse {
  0%, 100% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.6); opacity: 0.7; }
}

.blip-label {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  font-weight: 700;
  color: #fff;
  background: rgba(15, 23, 42, 0.85);
  padding: 2px 6px;
  border-radius: 4px;
  border: 1px solid rgba(255, 184, 0, 0.3);
  white-space: nowrap;
}

/* Vehicle Selector Tabs */
.vehicle-tab-btn.active {
  border-color: #ffb800 !important;
  background-color: rgba(255, 184, 0, 0.12) !important;
  box-shadow: 0 0 15px rgba(255, 184, 0, 0.15);
}

/* Service Card Hover */
.service-card {
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.service-card:hover {
  box-shadow: 0 12px 30px -10px rgba(255, 184, 0, 0.15);
}

/* FAQ Accordion Transitions */
.faq-item.open .faq-content {
  display: block;
}
.faq-item.open .faq-icon {
  transform: rotate(45deg);
  color: #f59e0b;
}

/* Tailwind-like custom utilities */
.bg-obsidian { background-color: #07090e; }
.text-amber-400 { color: #ffb800; }
.text-amber-300 { color: #fde047; }
.text-amber-500 { color: #f59e0b; }
.border-amber-500\/20 { border-color: rgba(255, 184, 0, 0.2); }
.border-amber-500\/30 { border-color: rgba(255, 184, 0, 0.3); }
.border-amber-500\/40 { border-color: rgba(255, 184, 0, 0.4); }
.border-amber-500\/50 { border-color: rgba(255, 184, 0, 0.5); }
.bg-amber-500\/10 { background-color: rgba(255, 184, 0, 0.1); }
.bg-amber-500\/20 { background-color: rgba(255, 184, 0, 0.2); }
.bg-amber-500\/30 { background-color: rgba(255, 184, 0, 0.3); }

/* Range Slider Styling */
input[type=range]::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #ffb800;
  cursor: pointer;
  box-shadow: 0 0 10px rgba(255, 184, 0, 0.8);
}

/* Responsive adjustments */
@media (max-width: 640px) {
  .road-grid-lines {
    background-size: 16px 16px;
  }
}