/* ==========================================================================
   1. BASE.CSS — Temel Değişkenler, Renk Paleti, Tipografi & Scrollbar
   ========================================================================== */

:root,
html.dark {
  --bg-base: #0A0A0A;
  --bg-surface: #121212;
  --bg-surface-elevated: #1A1A1A;
  --border-subtle: #262626;
  --text-primary: #FAFAFA;
  --text-muted: #A1A1AA;
  --accent-contrast: #FFFFFF;
  --accent-contrast-fg: #0A0A0A;
  --accent-crimson: #E11D48;
}

/* AÇIK TEMA (Galeri Beyazı & Kırık Gri — CLW13 Streetwear Kontrastı) */
html.light {
  --bg-base: #FAFAFA;
  --bg-surface: #FFFFFF;
  --bg-surface-elevated: #F4F4F5;
  --border-subtle: #E4E4E7;
  --text-primary: #0A0A0A;
  --text-muted: #71717A;
  --accent-contrast: #0A0A0A;
  --accent-contrast-fg: #FFFFFF;
  --accent-crimson: #E11D48;
}

* {
  box-sizing: border-box;
  -webkit-tap-highlight-color: transparent;
}

html {
  scroll-behavior: smooth;
  background-color: var(--bg-base);
  color: var(--text-primary);
  font-family: 'Outfit', 'Helvetica Neue', Arial, sans-serif;
}

body {
  background-color: var(--bg-base);
  color: var(--text-primary);
  overflow-x: hidden;
}

::selection {
  background: #FFFFFF;
  color: #0A0A0A;
}

[x-cloak] {
  display: none !important;
}

/* Custom Minimal Scrollbars */
::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

::-webkit-scrollbar-track {
  background: #0A0A0A;
}

::-webkit-scrollbar-thumb {
  background: #262626;
}

::-webkit-scrollbar-thumb:hover {
  background: #52525B;
}

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

.no-scrollbar {
  -ms-overflow-style: none;
  scrollbar-width: none;
}

/* ==========================================================================
   AÇIK TEMA (html.light) OTOMATİK MONOKROM RENK & LOGO ADAPTASYONU
   ========================================================================== */

html.light .clw13-brand-logo {
  content: url('/assets/brand/logo-clw13-dark.png');
}

@supports not (content: url('')) {
  html.light .clw13-brand-logo {
    filter: invert(1) brightness(0.08);
  }
}

html.light ::-webkit-scrollbar-track {
  background: #FAFAFA;
}

html.light ::-webkit-scrollbar-thumb {
  background: #D4D4D8;
}

html.light ::selection {
  background: #0A0A0A;
  color: #FFFFFF;
}

/* Ana Yüzeyler (Base & Surface) */
html.light .bg-\[\#0A0A0A\],
html.light .bg-\[\#08080A\],
html.light .bg-\[\#0A0A0E\],
html.light .bg-\[\#0A0A0A\]\/95,
html.light .bg-\[\#0A0A0A\]\/90,
html.light .bg-\[\#0A0A0A\]\/80 {
  background-color: #FAFAFA !important;
}

html.light .bg-\[\#121212\],
html.light .bg-\[\#111115\],
html.light .bg-\[\#121217\],
html.light .bg-\[\#16161D\],
html.light .bg-\[\#18181E\],
html.light .bg-\[\#18181F\],
html.light .bg-\[\#121212\]\/90,
html.light .bg-\[\#121212\]\/60 {
  background-color: #FFFFFF !important;
}

html.light .bg-\[\#0D0D0D\],
html.light .bg-\[\#0E0E0E\],
html.light .bg-\[\#0E0E12\],
html.light .bg-\[\#0E0E14\],
html.light .bg-\[\#14141B\],
html.light .bg-\[\#18181B\],
html.light .bg-\[\#181822\],
html.light .bg-\[\#1A1A1A\],
html.light .bg-\[\#1A1A1E\],
html.light .bg-\[\#1A1A22\],
html.light .hover\:bg-\[\#1A1A1A\]:hover,
html.light .hover\:bg-\[\#262626\]:hover {
  background-color: #F4F4F5 !important;
}

html.light .bg-\[\#262626\],
html.light .bg-\[\#27272A\] {
  background-color: #E4E4E7 !important;
}

html.light .bg-white\/5,
html.light .hover\:bg-white\/5:hover {
  background-color: rgba(10, 10, 10, 0.04) !important;
}

html.light .bg-white\/10,
html.light .hover\:bg-white\/10:hover {
  background-color: rgba(10, 10, 10, 0.07) !important;
}

html.light .bg-white\/20 {
  background-color: rgba(10, 10, 10, 0.12) !important;
}

html.light .bg-black\/80 {
  background-color: rgba(250, 250, 250, 0.88) !important;
}

/* Kenarlıklar (Borders) */
html.light .border-\[\#1F1F1F\],
html.light .border-\[\#1F1F24\],
html.light .border-\[\#262626\],
html.light .border-\[\#27272A\],
html.light .border-\[\#333333\],
html.light .border-\[\#3F3F46\],
html.light .border-\[\#22222A\],
html.light .border-\[\#2E2E38\],
html.light .border-\[\#444\],
html.light .border-\[\#262626\]\/50,
html.light .border-\[\#262626\]\/60,
html.light .border-white\/10,
html.light .border-white\/15,
html.light .border-white\/20,
html.light .border-white\/30 {
  border-color: #E4E4E7 !important;
}

html.light .divide-\[\#22222A\] > :not([hidden]) ~ :not([hidden]),
html.light .divide-\[\#262626\] > :not([hidden]) ~ :not([hidden]) {
  border-color: #E4E4E7 !important;
}

html.light .border-white,
html.light .border-white\/40 {
  border-color: #0A0A0A !important;
}

html.light .text-\[\#8E8E99\],
html.light .text-\[\#A1A1AA\],
html.light .text-\[\#A1A1AA\]\/60,
html.light .text-\[\#71717A\],
html.light .text-\[\#555\],
html.light .text-\[\#D4D4D8\] {
  color: #52525B !important;
}

html.light .hover\:border-white\/20:hover,
html.light .hover\:border-white\/30:hover {
  border-color: #A1A1AA !important;
}

html.light .hover\:border-white\/40:hover,
html.light .hover\:border-white\/45:hover,
html.light .hover\:border-white\/50:hover,
html.light .hover\:border-\[\#52525B\]:hover,
html.light .hover\:border-white:hover,
html.light .focus\:border-white:focus {
  border-color: #0A0A0A !important;
}

/* Metin Renkleri (Foreground & Muted) */
html.light .text-\[\#FAFAFA\],
html.light .text-\[\#F4F4F6\],
html.light .text-\[\#F4F4F6\]\/90,
html.light .text-\[\#E4E4E7\],
html.light .text-white,
html.light .text-white\/80,
html.light .hover\:text-\[\#FAFAFA\]:hover,
html.light .hover\:text-white:hover,
html.light .group:hover .group-hover\:text-white {
  color: #0A0A0A !important;
}

/* Açık Temada Pastel Durum & İstatistik Yazı Kontrastları */
html.light .text-\[\#86EFAC\]:not(.bg-\[\#0F2018\]):not(.bg-\[\#132A20\]),
html.light .text-emerald-300,
html.light .text-emerald-400,
html.light .text-emerald-400\/80,
html.light .text-\[\#10B981\] {
  color: #047857 !important;
}

html.light .bg-\[\#0F2018\].text-\[\#86EFAC\],
html.light .bg-\[\#132A20\].text-\[\#86EFAC\],
html.light .bg-\[\#0F2018\] .text-\[\#86EFAC\],
html.light .bg-\[\#132A20\] .text-\[\#86EFAC\] {
  color: #86EFAC !important;
}

html.light .text-amber-300,
html.light .text-amber-400 {
  color: #B45309 !important;
}

html.light .text-purple-300,
html.light .text-purple-400,
html.light .text-\[\#D8B4FE\]:not(.bg-\[\#1F1728\]):not(.bg-\[\#2B1B3C\]) {
  color: #6D28D9 !important;
}

html.light .bg-\[\#1F1728\].text-\[\#D8B4FE\],
html.light .bg-\[\#2B1B3C\].text-\[\#D8B4FE\],
html.light .bg-\[\#1F1728\] .text-\[\#D8B4FE\],
html.light .bg-\[\#2B1B3C\] .text-\[\#D8B4FE\] {
  color: #D8B4FE !important;
}

html.light .text-rose-400,
html.light .text-\[\#F87171\],
html.light .text-\[\#FCA5A5\],
html.light .text-\[\#FB7185\] {
  color: #BE123C !important;
}

html.light .text-\[\#60A5FA\] {
  color: #1D4ED8 !important;
}

/* Aktif Dönem Sekmeleri & Form Elemanları */
html.light .bg-\[\#18181F\].font-bold,
html.light .bg-\[\#18181F\].font-bold span {
  background-color: #0A0A0A !important;
  color: #FFFFFF !important;
}

html.light input,
html.light select,
html.light textarea {
  color: #0A0A0A;
}

html.light select option {
  background-color: #FFFFFF;
  color: #0A0A0A;
}

html.light input::placeholder,
html.light textarea::placeholder {
  color: #71717A;
}

/* Kontrast Butonlar & Seçili Beden Kutuları (Koyuda Beyaz -> Açıkta Simsiyah) */
html.light .bg-white:not(.jersey-card-media):not(.product-gallery-stage):not(.keep-white-bg) {
  background-color: #0A0A0A !important;
  color: #FFFFFF !important;
  border-color: #0A0A0A !important;
}

html.light .bg-white:not(.jersey-card-media):not(.product-gallery-stage):not(.keep-white-bg) span,
html.light .bg-white:not(.jersey-card-media):not(.product-gallery-stage):not(.keep-white-bg) {
  color: #FFFFFF !important;
}

html.light .hover\:bg-\[\#FAFAFA\]\/90:hover,
html.light .hover\:bg-neutral-200:hover {
  background-color: #27272A !important;
}

/* Yönetim Paneli Kırmızı Vurgu (#E11D48) Üzerindeki Beyaz Yazıyı Koru */
html.light .bg-\[\#E11D48\],
html.light .bg-\[\#E11D48\] span {
  color: #FFFFFF !important;
}

/* Hero Video Üzerindeki Karartma Gradyanlarını Açık Temada Stüdyo Beyazına Çevir */
html.light .hero-overlay-bottom {
  background: linear-gradient(to top, #FAFAFA 0%, rgba(250, 250, 250, 0.25) 50%, rgba(250, 250, 250, 0.35) 100%) !important;
}

html.light .hero-overlay-side {
  background: linear-gradient(to right, rgba(250, 250, 250, 0.82) 0%, transparent 55%, rgba(250, 250, 250, 0.4) 100%) !important;
}

html.light .reel-overlay-bottom {
  background: linear-gradient(to top, #FFFFFF 0%, rgba(255, 255, 255, 0.35) 55%, transparent 100%) !important;
}

/* Ürün Görsel Kutularını Görselin Kendi Stüdyo Arka Plan Rengiyle Eşitle */
.adaptive-img-stage {
  background-color: var(--stage-bg, #F4F4F5);
  transition: background-color 0.18s ease;
}

html.light .jersey-card-media,
html.light .product-gallery-stage {
  background-color: var(--stage-bg, #F4F4F5) !important;
  border: 1px solid #E4E4E7;
}

html.light .adaptive-img-stage {
  background-color: var(--stage-bg, #F4F4F5) !important;
}

/* ==========================================================================
   İMZA ALT SAHNE (FOOTER ATMOSPHERIC WATERMARK & MONOCHROME SPOTLIGHT)
   ========================================================================== */
.clw13-footer {
  position: relative;
  overflow: hidden;
}

.clw13-footer-ambient-layer,
.clw13-footer-spot-layer {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  pointer-events: none;
  user-select: none;
  overflow: hidden;
  z-index: 1;
}

.clw13-footer-wm-logo {
  width: clamp(300px, 60vw, 840px);
  height: clamp(150px, 20.5vw, 285px);
  max-width: none;
  object-fit: fill;
  transform: translateY(16%);
  transform-origin: bottom center;
}

/* Kayan Monokrom Spot Işık Animasyonu (C -> L -> W -> 1 -> 3 -> Tersten Geri) */
@keyframes clw13-spotlight-sweep {
  0% {
    -webkit-mask-position: 85% 0;
    mask-position: 85% 0;
  }
  50% {
    -webkit-mask-position: 15% 0;
    mask-position: 15% 0;
  }
  100% {
    -webkit-mask-position: 85% 0;
    mask-position: 85% 0;
  }
}

/* Atmosferik Taban Katmanı (Fonda Sürekli Kalan İnce Silüet) */
.clw13-footer-ambient-layer .clw13-footer-wm-logo {
  opacity: 0.045;
  filter: blur(6px);
}

@media (max-width: 640px) {
  .clw13-footer-wm-logo {
    width: 92vw;
    height: 215px;
    transform: translateY(4%);
  }
  .clw13-footer-ambient-layer .clw13-footer-wm-logo {
    opacity: 0.052;
    filter: blur(4px);
  }
}

/* Otomatik Kayan Netlik & Parlaklık Katmanı (Masaüstü ve Mobil) */
.clw13-footer-spot-layer {
  opacity: 1;
}

.clw13-footer-spot-layer .clw13-footer-wm-logo {
  opacity: 0.22;
  filter: blur(0.4px);
  -webkit-mask-image: linear-gradient(
    90deg,
    transparent 0%,
    transparent 38%,
    rgba(0, 0, 0, 0.25) 44%,
    #000 50%,
    rgba(0, 0, 0, 0.25) 56%,
    transparent 62%,
    transparent 100%
  );
  mask-image: linear-gradient(
    90deg,
    transparent 0%,
    transparent 38%,
    rgba(0, 0, 0, 0.25) 44%,
    #000 50%,
    rgba(0, 0, 0, 0.25) 56%,
    transparent 62%,
    transparent 100%
  );
  -webkit-mask-size: 300% 100%;
  mask-size: 300% 100%;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  animation: clw13-spotlight-sweep 7.5s cubic-bezier(0.45, 0, 0.55, 1) infinite;
  will-change: mask-position, -webkit-mask-position;
}

.clw13-footer-grain {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 2;
  opacity: 0.032;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 160px 160px;
}

html.light .clw13-footer-ambient-layer .clw13-footer-wm-logo {
  opacity: 0.045;
  filter: blur(6px);
}

html.light .clw13-footer-spot-layer .clw13-footer-wm-logo {
  opacity: 0.17;
}

html.light .clw13-footer-grain {
  opacity: 0.028;
}

/* Tarih Seçici (Date Picker) Takvim İkonu - Koyu Tema Beyazlık */
input[type="date"] {
  color-scheme: dark;
}
input[type="date"]::-webkit-calendar-picker-indicator {
  filter: brightness(0) invert(1);
  opacity: 0.95;
  cursor: pointer;
  transition: opacity 0.15s ease, transform 0.15s ease;
}
input[type="date"]::-webkit-calendar-picker-indicator:hover {
  opacity: 1;
  transform: scale(1.08);
}


/* ==========================================================================
   SOKAK & TRİBÜN BAŞLIK TİPOGRAFİSİ (STREETWEAR DISPLAY HEADINGS)
   ========================================================================== */
.font-street {
  font-family: 'Anton', 'Outfit', sans-serif;
  letter-spacing: 0.025em;
  text-transform: uppercase;
}

/* ==========================================================================
   SABİT MONOKROM WHATSAPP DESTEK BUTONU (PILL)
   ========================================================================== */
.clw13-whatsapp-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.625rem;
  padding: 0.625rem 1rem;
  background-color: rgba(10, 10, 10, 0.94);
  color: #FAFAFA;
  border: 1px solid #262626;
  border-radius: 3px;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.45);
  transition: all 0.22s cubic-bezier(0.16, 1, 0.3, 1);
  text-decoration: none;
}

.clw13-whatsapp-pill svg {
  width: 1.125rem;
  height: 1.125rem;
  color: #FAFAFA;
  fill: currentColor;
  transition: transform 0.2s ease;
}

.clw13-whatsapp-pill:hover {
  border-color: #52525B;
  background-color: #141414;
  transform: translateY(-2px);
}

.clw13-whatsapp-pill:hover svg {
  transform: scale(1.1);
}

/* Açık Tema (Light Mode): Arka plan beyaz, logo ve yazı siyah */
html.light .clw13-whatsapp-pill {
  background-color: rgba(255, 255, 255, 0.96);
  color: #0A0A0A;
  border-color: #E4E4E7;
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.08);
}

html.light .clw13-whatsapp-pill svg {
  color: #0A0A0A;
  fill: currentColor;
}

html.light .clw13-whatsapp-pill:hover {
  border-color: #A1A1AA;
  background-color: #F4F4F5;
}

/* ==========================================================================
   SİPARİŞ TAKİBİ NOKTALI İLERLEME ÇUBUĞU (Tema Uyumlu Monokrom Stepper)
   ========================================================================== */
.clw13-stepper-line-active {
  background-color: var(--accent-contrast);
}

.clw13-stepper-line-idle {
  background-color: var(--border-subtle);
}

.clw13-stepper-node-done {
  background-color: var(--bg-surface);
  border: 2px solid rgba(255, 255, 255, 0.35);
}

.clw13-stepper-node-current {
  background-color: var(--bg-surface);
  border: 2px solid rgba(255, 255, 255, 0.7);
  box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.12);
}

.clw13-stepper-dot {
  background-color: var(--accent-contrast);
}

.clw13-stepper-node-idle {
  background-color: var(--bg-surface);
  border: 2px solid var(--border-subtle);
}

html.light .clw13-stepper-node-done {
  border-color: rgba(10, 10, 10, 0.25);
}

html.light .clw13-stepper-node-current {
  border-color: rgba(10, 10, 10, 0.65);
  box-shadow: 0 0 0 4px rgba(10, 10, 10, 0.08);
}