/* stylelint-disable */
@import 'leaflet/dist/leaflet.css';

@tailwind base;
@tailwind components;
@tailwind utilities;

/* Definition of the design system. All colors, gradients, fonts, etc should be defined here.
All colors MUST be HSL.
*/

@layer base {
  :root {
    --background: 0 0% 100%;
    --foreground: 0 0% 25%;
    --card: 0 0% 100%;
    --card-foreground: 0 0% 25%;
    --popover: 0 0% 100%;
    --popover-foreground: 0 0% 25%;
    --primary: 25 95% 53%;
    --primary-foreground: 0 0% 100%;
    --secondary: 177 56% 53%;
    --secondary-foreground: 0 0% 100%;
    --muted: 0 0% 96%;
    --muted-foreground: 0 0% 45%;
    --accent: 177 56% 53%;
    --accent-foreground: 0 0% 100%;
    --destructive: 0 84.2% 60.2%;
    --destructive-foreground: 0 0% 98%;
    --border: 0 0% 90%;
    --input: 0 0% 90%;
    --ring: 25 95% 53%;
    --radius: 0.75rem;
    --chart-1: 12 76% 61%;
    --chart-2: 173 58% 39%;
    --chart-3: 197 37% 24%;
    --chart-4: 43 74% 66%;
    --chart-5: 27 87% 67%;
    --sidebar-background: 0 0% 100%;
    --sidebar-foreground: 0 0% 25%;
    --sidebar-primary: 25 95% 53%;
    --sidebar-primary-foreground: 0 0% 100%;
    --sidebar-accent: 177 56% 53%;
    --sidebar-accent-foreground: 0 0% 100%;
    --sidebar-border: 0 0% 90%;
    --sidebar-ring: 25 95% 53%;
  }

  .dark {
    --background: 0 0% 10%;
    --foreground: 0 0% 95%;
    --card: 0 0% 12%;
    --card-foreground: 0 0% 95%;
    --popover: 0 0% 12%;
    --popover-foreground: 0 0% 95%;
    --primary: 25 95% 53%;
    --primary-foreground: 0 0% 100%;
    --secondary: 177 56% 53%;
    --secondary-foreground: 0 0% 100%;
    --muted: 0 0% 15%;
    --muted-foreground: 0 0% 65%;
    --accent: 177 56% 53%;
    --accent-foreground: 0 0% 100%;
    --destructive: 0 62.8% 30.6%;
    --destructive-foreground: 0 0% 98%;
    --border: 0 0% 20%;
    --input: 0 0% 20%;
    --ring: 25 95% 53%;
    --sidebar-background: 0 0% 10%;
    --sidebar-foreground: 0 0% 95%;
    --sidebar-primary: 25 95% 53%;
    --sidebar-primary-foreground: 0 0% 100%;
    --sidebar-accent: 177 56% 53%;
    --sidebar-accent-foreground: 0 0% 100%;
    --sidebar-border: 0 0% 20%;
    --sidebar-ring: 25 95% 53%;
  }
}

@layer base {
  * {
    @apply border-border;
  }

  body {
    @apply bg-background text-foreground;
  }
}

@layer utilities {
  @keyframes pulse-glow {
    0%, 100% {
      box-shadow: 0 0 0 0 hsl(var(--primary) / 0.4);
    }
    50% {
      box-shadow: 0 0 20px 4px hsl(var(--primary) / 0.6);
    }
  }

  .animate-pulse-glow {
    animation: pulse-glow 1s ease-in-out 2;
  }

  /* Hide scrollbar for horizontal scroll areas */
  .scrollbar-hide {
    -ms-overflow-style: none;
    scrollbar-width: none;
  }
  
  .scrollbar-hide::-webkit-scrollbar {
    display: none;
  }
}

/* ========================================
   MOBİL RESPONSIVE DÜZELTMELER
   iPhone 13 (390x844) ve Android (360-412px)
   ======================================== */

@layer base {
  /* Tüm sayfa için yatay taşma önleme */
  html, body {
    overflow-x: hidden;
    max-width: 100vw;
  }

  /* Tüm container'lar için max-width kontrolü */
  * {
    max-width: 100%;
  }

  /* Box-sizing tüm elementler için */
  *, *::before, *::after {
    box-sizing: border-box;
  }
}

/* Mobil için genel düzeltmeler */
@media (max-width: 768px) {
  /* Container padding ayarları */
  .container {
    padding-left: 1rem !important;
    padding-right: 1rem !important;
  }

  /* Kart ve içerik padding'leri */
  [class*="p-6"] {
    padding: 1rem !important;
  }

  [class*="p-8"] {
    padding: 1.25rem !important;
  }

  [class*="px-6"] {
    padding-left: 1rem !important;
    padding-right: 1rem !important;
  }

  [class*="px-8"] {
    padding-left: 1rem !important;
    padding-right: 1rem !important;
  }

  /* Grid düzeltmeleri */
  [class*="grid-cols-2"],
  [class*="grid-cols-3"],
  [class*="grid-cols-4"] {
    grid-template-columns: repeat(1, minmax(0, 1fr)) !important;
  }

  /* Flex gap düzeltmeleri */
  [class*="gap-6"] {
    gap: 1rem !important;
  }

  [class*="gap-8"] {
    gap: 1.25rem !important;
  }

  /* Text boyutları - çok büyük başlıkları küçült */
  h1, .text-4xl, .text-5xl, .text-6xl {
    font-size: 1.875rem !important; /* 30px */
    line-height: 2.25rem !important;
  }

  h2, .text-3xl {
    font-size: 1.5rem !important; /* 24px */
    line-height: 2rem !important;
  }

  h3, .text-2xl {
    font-size: 1.25rem !important; /* 20px */
    line-height: 1.75rem !important;
  }

  /* Button boyutları - dokunma hedefi minimum 44px */
  button, .btn, [role="button"] {
    min-height: 44px !important;
    min-width: 44px !important;
  }

  /* Input alanları */
  input, textarea, select {
    font-size: 16px !important; /* iOS zoom önleme */
    min-height: 44px !important;
  }

  /* Dialog/Modal genişlikleri */
  [role="dialog"] {
    max-width: calc(100vw - 2rem) !important;
    margin: 1rem !important;
  }

  /* Tablo responsive */
  table {
    display: block;
    overflow-x: auto;
    white-space: nowrap;
    -webkit-overflow-scrolling: touch;
  }

  /* Kart içerikleri */
  .card, [class*="rounded-"] {
    border-radius: 0.75rem !important;
  }

  /* Image responsive */
  img {
    max-width: 100%;
    height: auto;
  }

  /* Fixed width elementleri responsive yap */
  [class*="w-96"],
  [class*="w-80"],
  [class*="w-64"] {
    width: 100% !important;
    max-width: 100% !important;
  }

  /* Scroll area düzeltmeleri */
  [data-radix-scroll-area-viewport] {
    max-width: 100vw !important;
  }
}

/* iPhone 13 ve küçük Android cihazlar için özel düzeltmeler */
@media (max-width: 430px) {
  /* Hero section padding */
  section[class*="py-20"],
  section[class*="py-32"] {
    padding-top: 2.5rem !important;
    padding-bottom: 2.5rem !important;
  }

  /* Çok büyük blur efektleri küçült */
  [class*="blur-"] {
    filter: blur(60px) !important;
  }

  /* Background blob'ları küçült */
  .absolute[class*="w-96"] {
    width: 16rem !important;
    height: 16rem !important;
  }

  /* Flex direction mobilde column yap */
  .flex[class*="gap-4"]:not([class*="flex-col"]) {
    flex-direction: column !important;
  }

  /* Avatar ve icon boyutları */
  [class*="h-10 w-10"],
  [class*="h-12 w-12"] {
    height: 2.5rem !important;
    width: 2.5rem !important;
  }

  /* Badge ve chip'ler */
  [class*="text-xs"] {
    font-size: 0.75rem !important;
  }

  /* Horizontal scroll için container */
  .overflow-x-auto {
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    -ms-overflow-style: none;
  }

  .overflow-x-auto::-webkit-scrollbar {
    display: none;
  }
}

/* TripPlanner özel düzeltmeler */
@media (max-width: 768px) {
  /* Timeline ve Map toggle */
  .lg\:flex-row {
    flex-direction: column !important;
  }

  /* Day selector mobilde horizontal */
  [class*="w-20"][class*="md:w-24"] {
    width: 100% !important;
    height: auto !important;
  }

  /* Place card'ları */
  [class*="rounded-xl"] {
    border-radius: 0.75rem !important;
  }

  /* Map container */
  [class*="h-[500px]"],
  [class*="h-[600px]"] {
    height: 300px !important;
  }

  /* Optimize button ve action buttons */
  [class*="rounded-full"] button {
    padding-left: 1rem !important;
    padding-right: 1rem !important;
  }
}

/* Admin Dashboard düzeltmeleri */
@media (max-width: 768px) {
  /* Stats cards grid */
  .grid[class*="grid-cols-4"] {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  /* Table scroll */
  .table-container {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  /* Sidebar mobilde gizle */
  aside[class*="w-64"] {
    position: fixed;
    z-index: 50;
    transform: translateX(-100%);
    transition: transform 0.3s ease;
  }

  aside[class*="w-64"].open {
    transform: translateX(0);
  }
}

/* Header düzeltmeleri */
@media (max-width: 768px) {
  /* Logo ve site name */
  header [class*="text-xl"] {
    font-size: 1.125rem !important;
  }

  /* Search bar mobilde gizle */
  header .lg\:flex {
    display: none !important;
  }

  /* Navigation items */
  header nav a {
    font-size: 1rem !important;
    padding: 0.75rem 0 !important;
  }
}

/* Footer düzeltmeleri */
@media (max-width: 768px) {
  footer .grid {
    grid-template-columns: repeat(1, minmax(0, 1fr)) !important;
    gap: 2rem !important;
  }

  footer [class*="text-sm"] {
    font-size: 0.875rem !important;
  }
}

/* Explore page düzeltmeleri */
@media (max-width: 768px) {
  /* Category badges horizontal scroll */
  .flex.gap-2.overflow-x-auto {
    padding-bottom: 0.5rem;
    -webkit-overflow-scrolling: touch;
  }

  /* Place cards */
  .grid.grid-cols-1.sm\:grid-cols-2.lg\:grid-cols-4 {
    grid-template-columns: repeat(1, minmax(0, 1fr)) !important;
  }
}

/* Journal page düzeltmeleri */
@media (max-width: 768px) {
  /* Photo grid */
  .grid[class*="grid-cols-3"] {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  /* Entry cards */
  [class*="space-y-6"] {
    gap: 1rem !important;
  }
}

/* Touch target iyileştirmeleri */
@media (hover: none) and (pointer: coarse) {
  /* Tüm tıklanabilir elementler için minimum boyut */
  a, button, [role="button"], [role="link"], 
  input[type="checkbox"], input[type="radio"],
  select, [role="menuitem"], [role="tab"] {
    min-height: 44px;
    min-width: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

  /* Icon button'lar */
  button[class*="size-icon"] {
    padding: 0.75rem !important;
  }

  /* Dropdown ve select */
  [role="combobox"], [role="listbox"] {
    min-height: 48px !important;
  }
}

/* Landscape mode düzeltmeleri (mobil yatay) */
@media (max-height: 500px) and (orientation: landscape) {
  /* Header'ı küçült */
  header {
    height: 3rem !important;
  }

  /* Modal'ları scroll edilebilir yap */
  [role="dialog"] {
    max-height: 90vh !important;
    overflow-y: auto !important;
  }

  /* Hero section'ları küçült */
  section[class*="py-"] {
    padding-top: 1rem !important;
    padding-bottom: 1rem !important;
  }
}

/* Safe area insets (iPhone notch vb.) */
@supports (padding: max(0px)) {
  body {
    padding-left: max(0px, env(safe-area-inset-left));
    padding-right: max(0px, env(safe-area-inset-right));
  }

  header {
    padding-top: max(0px, env(safe-area-inset-top));
  }

  footer {
    padding-bottom: max(0px, env(safe-area-inset-bottom));
  }
}

/* Prevent text size adjustment on orientation change */
html {
  -webkit-text-size-adjust: 100%;
  -moz-text-size-adjust: 100%;
  -ms-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

/* Smooth scrolling */
html {
  scroll-behavior: smooth;
}

/* Prevent horizontal bounce on iOS */
body {
  overscroll-behavior-x: none;
}

/* Custom Leaflet marker styles */
.custom-marker-icon {
  background: transparent !important;
  border: none !important;
}

.custom-marker-icon div {
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Özel marker tooltip stilleri */
.custom-marker-tooltip {
  background-color: white !important;
  border: 2px solid #3B82F6 !important;
  border-radius: 6px !important;
  padding: 4px 8px !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  color: #1f2937 !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15) !important;
  white-space: nowrap !important;
}

.custom-marker-tooltip::before {
  border-top-color: #3B82F6 !important;
}

/* Özel renkli marker stilleri */
.custom-colored-marker {
  background: transparent !important;
  border: none !important;
}

/* Leaflet popup stilleri */
.leaflet-popup-content-wrapper {
  border-radius: 8px !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15) !important;
}

.leaflet-popup-content {
  margin: 12px !important;
}

/* MapTiler Map Styles */
.maptiler-map {
  width: 100%;
  height: 100%;
  touch-action: pan-x pan-y;
}

@media (max-width: 768px) {
  .poi-marker div,
  .route-marker div {
    min-width: 44px !important;
    min-height: 44px !important;
  }
}

.custom-popup .leaflet-popup-content-wrapper {
  border-radius: 12px;
  padding: 0;
}

.custom-popup .leaflet-popup-content {
  margin: 0;
  padding: 12px;
}

.marker-cluster-custom {
  background: transparent !important;
}

/* Selected and hovered marker styles */
.marker-selected {
  z-index: 1000 !important;
  transform: scale(1.25) !important;
  transform-origin: bottom center;
  transition: transform 0.15s ease;
}

.marker-selected svg path {
  filter: drop-shadow(0 0 6px rgba(59, 130, 246, 0.9));
  stroke: #1d4ed8 !important;
  stroke-width: 3 !important;
}

.marker-hovered {
  z-index: 999 !important;
  transform: scale(1.15) !important;
  transform-origin: bottom center;
  transition: transform 0.15s ease;
}
