/* BetMaster Gelişmiş Responsive Sistem - Mobile First, Fluid, Accessible */

/* 1) Gelişmiş CSS Değişkenleri ve Breakpoint'ler */
:root {
  /* Tipografi ve boşluk ölçeği */
  --space-1: 0.25rem;   /* 4px */
  --space-2: 0.5rem;     /* 8px */
  --space-3: 0.75rem;    /* 12px */
  --space-4: 1rem;       /* 16px */
  --space-5: 1.25rem;    /* 20px */
  --space-6: 1.5rem;     /* 24px */
  --space-8: 2rem;       /* 32px */
  --space-10: 2.5rem;     /* 40px */
  --space-12: 3rem;      /* 48px */
  --space-16: 4rem;      /* 64px */
  --space-20: 5rem;      /* 80px */
  --space-24: 6rem;      /* 96px */
  
  --radius: 0.5rem;
  --radius-lg: 0.75rem;
  --radius-xl: 1rem;
  --radius-2xl: 1.5rem;
  
  --tap-target: 44px;
  --container-max: 1280px;
  --container-xl: 1440px;
  --container-2xl: 1600px;
  --reading-width: 72ch;

  /* Güvenli alanlar (iOS notch) */
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-right: env(safe-area-inset-right, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-left: env(safe-area-inset-left, 0px);

  /* Gelişmiş breakpoint'ler */
  --breakpoint-xs: 0;
  --breakpoint-sm: 480px;   /* Küçük telefonlar */
  --breakpoint-md: 768px;   /* Tablet */
  --breakpoint-lg: 1024px;  /* Küçük laptop */
  --breakpoint-xl: 1280px;  /* Desktop */
  --breakpoint-2xl: 1536px; /* Geniş ekranlar */
  --breakpoint-3xl: 1920px; /* 2K ekranlar */
  --breakpoint-4xl: 2560px; /* 4K ekranlar */

  /* Özel cihaz boyutları */
  --device-iphone-12-pro-max: 428px;  /* iPhone 12 Pro Max */
  --device-iphone-12: 390px;          /* iPhone 12 */
  --device-iphone-se: 375px;          /* iPhone SE */
  --device-galaxy-s21: 360px;         /* Samsung Galaxy S21 */
  --device-ipad: 768px;               /* iPad */
  --device-ipad-pro: 1024px;         /* iPad Pro */
}

html { scroll-behavior: smooth; }
/* Varsayılan tarayıcı üst boşluklarını kaldır */
html, body { margin: 0; padding: 0; }
/* Modal açıkken kaydırmayı kapat (body üzerinde modal-open sınıfı) */
body.modal-open { overflow: hidden; }

/* Hero ve header hizalama düzeltmesi: tüm sayfalarda tam üstten başlat */
header { top: 0; }
/* Sabit header (h-14=56px, xs:h-16=64px) altında hero'nun boşluksuz görünmesi için
   kahraman bölümünü yukarı çeker ve yüksekliğini telafi eder. */
:root { --header-height: 56px; }
@media (min-width: 480px) { :root { --header-height: 64px; } }

/* Varsayılan: boşlukları sıfırla */
#hero-section { margin-top: 0 !important; padding-top: 0 !important; border-top: 0 !important; }

/* Tüm kahramanlar header altına tam otursun */
#hero-section,
#home-slider { margin-top: calc(var(--header-height) * -1) !important; }

/* Profil kapak alanı da header altına sıfırdan başlasın */
#profile-cover { 
  margin-top: calc(var(--header-height) * -1) !important; 
  min-height: calc(420px + var(--header-height));
}
@media (min-width: 480px) { 
  #profile-cover { min-height: calc(520px + var(--header-height)); }
}
@media (min-width: 768px) { 
  #profile-cover { min-height: calc(640px + var(--header-height)); }
}

/* Ana sayfa slider'ı: üstte header kadar yukarı çekildiği için yüksekliği
   header yüksekliği kadar artır. Böylece altta boşluk kalmaz. */
#home-slider {
  /* Fallback */
  height: calc(100vh + var(--header-height)) !important;
  min-height: calc(100vh + var(--header-height)) !important;
  overflow: hidden;
}
@supports (height: 100svh) {
  #home-slider {
    height: calc(100svh + var(--header-height)) !important;
    min-height: calc(100svh + var(--header-height)) !important;
  }
}

/* Arka plan medya elemanlarını bölümün tamamına yay */
#hero-section > #hero-image,
#hero-section > #hero-video { top: 0; left: 0; right: 0; bottom: 0; }

/* Erişilebilir odak ve dokunma hedefleri */
:focus-visible { outline: 2px solid #2563eb; outline-offset: 2px; }
button, a[role="button"], .btn { min-height: var(--tap-target); min-width: var(--tap-target); }

/* Görsel tutarlılık ve layout akışı */
img, svg, video, canvas { max-width: 100%; display: block; }
img { height: auto; }

/* 2) Container ve Grid */
.container { width: min(100% - 2rem, var(--container-max)); margin-inline: auto; }
.container.narrow { max-width: var(--reading-width); }

/* Not: Tailwind'in grid-cols-* sınıfları ile çakışmayı önlemek için
   .grid üzerinde kolon tanımı yapılmaz. Sadece layout davranışı verilir. */
.grid { display: grid; gap: 1rem; }

/* Kupon özel grid kaldırıldı; sadece Tailwind grid sınıfları kullanılacak */

/* 3) Kart ve temel bileşenler */
.card { padding: var(--space); border-radius: var(--radius); background: #fff; box-shadow: 0 1px 2px rgba(0,0,0,.06); }
.card img { aspect-ratio: 16/9; object-fit: cover; border-radius: calc(var(--radius) - 2px); }

/* 4) Tipografi (akışkan) */
h1 { font-size: clamp(1.5rem, 2.5vw + 1rem, 2.625rem); line-height: 1.15; }
h2 { font-size: clamp(1.25rem, 1.8vw + 0.9rem, 2rem); line-height: 1.2; }
p  { font-size: clamp(1rem, .5vw + .85rem, 1.125rem); line-height: 1.6; }

.section { padding-block: clamp(1rem, 2vw + .5rem, 3rem); }

/* 5) Gelişmiş Media Query Sistemi - Mobile First */

/* XS: 0px - 479px (Mobil cihazlar) */
@media (min-width: 0px) {
  .container { 
    width: min(100% - var(--space-4), 100%); 
    margin-inline: auto; 
    padding-inline: var(--space-4);
  }

  /* .grid için kolon tanımı Tailwind tarafından yapılır, burada sadece boşluk ayarlanır */
  .grid { gap: var(--space-4); }

  .nav { display: block; }
  .layout { display: block; }
  .sidebar { position: static; }
  
  /* Mobil özel düzenlemeler */
  .profile-cover { height: 300px; }
  .profile-avatar { width: 80px; height: 80px; }
  .hero-content { padding: var(--space-4); }
  .card-grid { grid-template-columns: 1fr; }
}

/* SM: 480px - 767px (Büyük telefonlar) */
@media (min-width: 480px) {
  .container { 
    width: min(100% - var(--space-6), 100%); 
    padding-inline: var(--space-6);
  }
  
  .nav { display: flex; gap: var(--space-4); }
  
  .profile-cover { height: 400px; }
  .profile-avatar { width: 96px; height: 96px; }
  .card-grid { grid-template-columns: repeat(2, 1fr); }
  
  .hero-content { padding: var(--space-6); }
}

/* MD: 768px - 1023px (Tablet) */
@media (min-width: 768px) {
  .container { 
    width: min(100% - var(--space-8), 100%); 
    padding-inline: var(--space-8);
  }
  
  .layout { 
    display: grid; 
    grid-template-columns: 1fr 3fr; 
    gap: var(--space-8); 
  }
  
  .profile-cover { height: 500px; }
  .profile-avatar { width: 112px; height: 112px; }
  .card-grid { grid-template-columns: repeat(3, 1fr); }
  
  .hero-content { padding: var(--space-8); }
}

/* LG: 1024px - 1279px (Küçük laptop) */
@media (min-width: 1024px) {
  .container { 
    width: min(100% - var(--space-10), var(--container-max)); 
    padding-inline: var(--space-10);
  }
  
  .sidebar { position: sticky; top: var(--space-6); }
  .card-grid { grid-template-columns: repeat(4, 1fr); }
  
  .profile-cover { height: 600px; }
  .profile-avatar { width: 128px; height: 128px; }
}

/* XL: 1280px - 1535px (Desktop) */
@media (min-width: 1280px) {
  .container { 
    width: min(100% - var(--space-12), var(--container-xl)); 
    padding-inline: var(--space-12);
  }
  
  .card-grid { grid-template-columns: repeat(5, 1fr); }
}

/* 2XL: 1536px - 1919px (Geniş ekranlar) */
@media (min-width: 1536px) {
  .container { 
    width: min(100% - var(--space-16), var(--container-2xl)); 
    padding-inline: var(--space-16);
  }
  
  .card-grid { grid-template-columns: repeat(6, 1fr); }
}

/* 3XL: 1920px - 2559px (2K ekranlar) */
@media (min-width: 1920px) {
  .container { 
    width: min(100% - var(--space-20), 1800px); 
    padding-inline: var(--space-20);
  }
  
  .card-grid { grid-template-columns: repeat(7, 1fr); }
}

/* 4XL: 2560px+ (4K ekranlar) */
@media (min-width: 2560px) {
  .container { 
    width: min(100% - var(--space-24), 2000px); 
    padding-inline: var(--space-24);
  }
  
  .card-grid { grid-template-columns: repeat(8, 1fr); }
}

/* Özel cihaz optimizasyonları */
@media (min-width: 360px) and (max-width: 428px) {
  /* iPhone 12 Pro Max ve Galaxy S21 arası */
  .profile-cover { height: 350px; }
  .profile-avatar { width: 88px; height: 88px; }
  .hero-content { padding: var(--space-5); }
}

@media (min-width: 375px) and (max-width: 390px) {
  /* iPhone SE ve iPhone 12 arası */
  .profile-cover { height: 320px; }
  .profile-avatar { width: 84px; height: 84px; }
}

/* 6) Container Query ile bileşen temelli responsive */
.card-list { container-type: inline-size; }
@container (min-width: 28rem) {
  .card-list { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
}

/* 7) Görseller ve medya yardımcıları */
.img-cover { width: 100%; height: 100%; object-fit: cover; }
.img-contain { width: 100%; height: auto; object-fit: contain; }
.aspect-16x9 { aspect-ratio: 16 / 9; }
.aspect-1x1 { aspect-ratio: 1 / 1; }

/* Hero medya elemanlarının konteynırı tam kaplaması için ek garanti */
#hero-image, #hero-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* 8) Navigasyon ve etkileşim */
.menu-btn { min-height: var(--tap-target); min-width: var(--tap-target); }
[hidden] { display: none !important; }

/* 9) Tema tercihleri ve hareket azaltma */
@media (prefers-color-scheme: dark) {
  body { background: #0a0a0a; color: #EDEDEC; }
  .card { background: #161615; color: #EDEDEC; box-shadow: inset 0 0 0 1px rgba(255,255,255,0.12); }
}

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}

/* 10) Güvenli alanlar ve çentik */
.page { padding: calc(1rem + var(--safe-top)) 1rem calc(1rem + var(--safe-bottom)); }

/* 11) Gelişmiş Yardımcı Sınıflar */

/* Spacing Utilities */
.space-1 { gap: var(--space-1); }
.space-2 { gap: var(--space-2); }
.space-3 { gap: var(--space-3); }
.space-4 { gap: var(--space-4); }
.space-6 { gap: var(--space-6); }
.space-8 { gap: var(--space-8); }

.p-1 { padding: var(--space-1); }
.p-2 { padding: var(--space-2); }
.p-3 { padding: var(--space-3); }
.p-4 { padding: var(--space-4); }
.p-6 { padding: var(--space-6); }
.p-8 { padding: var(--space-8); }

.m-1 { margin: var(--space-1); }
.m-2 { margin: var(--space-2); }
.m-3 { margin: var(--space-3); }
.m-4 { margin: var(--space-4); }
.m-6 { margin: var(--space-6); }
.m-8 { margin: var(--space-8); }

/* Typography Utilities */
.text-xs { font-size: 0.75rem; line-height: 1rem; }
.text-sm { font-size: 0.875rem; line-height: 1.25rem; }
.text-base { font-size: 1rem; line-height: 1.5rem; }
.text-lg { font-size: 1.125rem; line-height: 1.75rem; }
.text-xl { font-size: 1.25rem; line-height: 1.75rem; }
.text-2xl { font-size: 1.5rem; line-height: 2rem; }
.text-3xl { font-size: 1.875rem; line-height: 2.25rem; }
.text-4xl { font-size: 2.25rem; line-height: 2.5rem; }

/* Responsive Typography */
.text-responsive-xs { font-size: clamp(0.75rem, 2vw, 0.875rem); }
.text-responsive-sm { font-size: clamp(0.875rem, 2.5vw, 1rem); }
.text-responsive-base { font-size: clamp(1rem, 3vw, 1.125rem); }
.text-responsive-lg { font-size: clamp(1.125rem, 3.5vw, 1.25rem); }
.text-responsive-xl { font-size: clamp(1.25rem, 4vw, 1.5rem); }
.text-responsive-2xl { font-size: clamp(1.5rem, 5vw, 2rem); }
.text-responsive-3xl { font-size: clamp(1.875rem, 6vw, 2.5rem); }
.text-responsive-4xl { font-size: clamp(2.25rem, 7vw, 3rem); }

/* Layout Utilities */
.max-w-read { max-width: var(--reading-width); }
.flow > * + * { margin-top: var(--space-4); }
.flow-sm > * + * { margin-top: var(--space-2); }
.flow-lg > * + * { margin-top: var(--space-6); }

/* Grid Utilities */
.grid-1 { grid-template-columns: 1fr; }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }
.grid-5 { grid-template-columns: repeat(5, 1fr); }
.grid-6 { grid-template-columns: repeat(6, 1fr); }

/* Responsive Grid */
.grid-responsive {
  display: grid;
  gap: var(--space-4);
  grid-template-columns: 1fr;
}

@media (min-width: 480px) {
  .grid-responsive { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 768px) {
  .grid-responsive { grid-template-columns: repeat(3, 1fr); }
}

@media (min-width: 1024px) {
  .grid-responsive { grid-template-columns: repeat(4, 1fr); }
}

@media (min-width: 1280px) {
  .grid-responsive { grid-template-columns: repeat(5, 1fr); }
}

@media (min-width: 1536px) {
  .grid-responsive { grid-template-columns: repeat(6, 1fr); }
}

/* Card Utilities */
.card {
  padding: var(--space-4);
  border-radius: var(--radius);
  background: #fff;
  box-shadow: 0 1px 3px rgba(0,0,0,0.1);
  border: 1px solid rgba(0,0,0,0.1);
}

.card-sm { padding: var(--space-3); }
.card-lg { padding: var(--space-6); }
.card-xl { padding: var(--space-8); }

/* Profile Specific Utilities */
.profile-container {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 var(--space-4);
}

.profile-cover {
  position: relative;
  width: 100%;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.profile-avatar {
  border-radius: 50%;
  object-fit: cover;
  border: 3px solid rgba(255,255,255,0.3);
}

.profile-info {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  margin-top: calc(-1 * var(--space-12));
  position: relative;
  z-index: 10;
}

/* Hero Section Utilities */
.hero-section {
  position: relative;
  width: 100%;
  min-height: 50vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.hero-content {
  text-align: center;
  color: white;
  z-index: 10;
  position: relative;
}

.hero-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(45deg, rgba(0,0,0,0.3), rgba(0,0,0,0.1));
  z-index: 1;
}

/* Navigation Utilities */
.nav-mobile {
  display: block;
}

.nav-desktop {
  display: none;
}

@media (min-width: 768px) {
  .nav-mobile { display: none; }
  .nav-desktop { display: block; }
}

/* Button Utilities */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius);
  font-weight: 500;
  text-decoration: none;
  border: none;
  cursor: pointer;
  transition: all 0.2s ease;
  min-height: var(--tap-target);
  min-width: var(--tap-target);
}

.btn-primary {
  background: #4f46e5;
  color: white;
}

/* Date/Time picker indicator visibility and theme color */
input[type="date"], input[type="datetime-local"], input[type="time"] {
  accent-color: #10b981; /* emerald theme */
}
input[type="date"]::-webkit-calendar-picker-indicator,
input[type="datetime-local"]::-webkit-calendar-picker-indicator {
  opacity: 1;
  filter: invert(46%) sepia(67%) saturate(493%) hue-rotate(94deg) brightness(94%) contrast(92%);
}

.btn-primary:hover {
  background: #4338ca;
}

.btn-secondary {
  background: #6b7280;
  color: white;
}

.btn-secondary:hover {
  background: #4b5563;
}

/* Form Utilities */
.form-group {
  margin-bottom: var(--space-4);
}

.form-label {
  display: block;
  margin-bottom: var(--space-2);
  font-weight: 500;
  color: #374151;
}

.form-input {
  width: 100%;
  padding: var(--space-3);
  border: 1px solid #d1d5db;
  border-radius: var(--radius);
  font-size: 1rem;
  transition: border-color 0.2s ease;
}

.form-input:focus {
  outline: none;
  border-color: #4f46e5;
  box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.1);
}

/* 12) Erişilebilirlik ve Performans */
label { cursor: pointer; }
input, select, textarea { font: inherit; }

/* Reduced Motion */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* High Contrast Mode */
@media (prefers-contrast: high) {
  .card {
    border: 2px solid currentColor;
  }
  
  .btn {
    border: 2px solid currentColor;
  }
}

/* Print Styles */
@media print {
  .no-print { display: none !important; }
  
  .card {
    border: 1px solid #000;
    box-shadow: none;
  }
  
  .hero-section {
    background: none !important;
    color: #000 !important;
  }
}

/* Scrollbar utilities */
.scrollbar-hide {
    -ms-overflow-style: none;
    scrollbar-width: none;
}

.scrollbar-hide::-webkit-scrollbar {
    display: none;
}

/* Not: Bu dosya Tailwind CSS ile uyumlu çalışır ve ek responsive özellikler sağlar. */