/* ============================================================
   winter.css — otomatik kış teması (ay tee el)
   Sadece html[data-season="winter"] iken devreye girer.
   Sezonu winter.js belirler (1 Aralık – 1 Mart).
   style.css'ten SONRA yüklenmelidir.
   ============================================================ */

/* ---------- Renk paleti: KIŞ / koyu tema ---------- */
html[data-season="winter"] {
  --bg: #051a2e;
  --bg-elevated: #0a2540;
  --bg-card: #0e2f4d;
  --bg-hover: #16415e;
  --border: rgba(155, 220, 255, 0.18);
  --text: #eef9ff;
  --text-muted: #a3c9e4;
  --primary: #4fc3f7;
  --primary-hover: #7ad6fb;
  --accent: #9fe3ff;
  --accent-dim: rgba(159, 227, 255, 0.15);
  --snow: rgba(255, 255, 255, 0.92);

  /* Organik kar maskeleri — winter.js üretir (SVG filtresi YOK,
     bu yüzden şeffaf-siyah artefakt oluşamaz). JS çalışmazsa
     mask-none kalır ve düz, yumuşak bir buz şeridi görünür. */
  --snow-mask: none;
  --snow-drift-mask: none;
}

/* ---------- Renk paleti: KIŞ / açık tema ---------- */
html[data-season="winter"][data-theme="light"] {
  --bg: #eaf5fc;
  --bg-elevated: #ffffff;
  --bg-card: #ffffff;
  --bg-hover: #dceefb;
  --border: rgba(80, 155, 205, 0.28);
  --text: #0d2b45;
  --text-muted: #4d7fa5;
  --primary: #2196d6;
  --primary-hover: #3aabee;
  --accent: #1f8fd6;
  --accent-dim: rgba(33, 150, 214, 0.14);
  --snow: rgba(255, 255, 255, 0.95);
}

/* ---------- Arka plan ışığı: soğuk kış tonları ---------- */
html[data-season="winter"] #bg-glow {
  background:
    radial-gradient(ellipse 80% 50% at 50% -20%, rgba(120, 200, 255, 0.26), transparent 55%),
    radial-gradient(ellipse 50% 40% at 90% 20%, rgba(235, 248, 255, 0.09), transparent 50%),
    radial-gradient(ellipse 40% 30% at 10% 60%, rgba(140, 210, 255, 0.12), transparent 50%);
}
html[data-season="winter"] #bg-glow::after {
  background: repeating-linear-gradient(
    105deg,
    transparent 0 90px,
    rgba(215, 240, 255, 0.05) 90px 170px,
    transparent 170px 340px
  );
}
html[data-season="winter"][data-theme="light"] #bg-glow {
  background:
    radial-gradient(ellipse 80% 50% at 50% -20%, rgba(120, 200, 255, 0.35), transparent 55%),
    radial-gradient(ellipse 50% 40% at 90% 20%, rgba(255, 255, 255, 0.6), transparent 50%),
    radial-gradient(ellipse 40% 30% at 10% 60%, rgba(140, 210, 255, 0.2), transparent 50%);
}

/* ---------- Başlık: buz gradyanı ---------- */
html[data-season="winter"] .gradient {
  background: linear-gradient(135deg, #f2fbff 0%, #9fe3ff 45%, #4fc3f7 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* ---------- Navbar: üst kenar ince buz parıltısı ---------- */
html[data-season="winter"] .topnav {
  box-shadow:
    inset 0 1px 0 rgba(220, 245, 255, 0.35),
    0 10px 30px rgba(2, 12, 24, 0.35);
}
html[data-season="winter"][data-theme="light"] .topnav {
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.95),
    0 10px 30px rgba(30, 90, 140, 0.12);
}

/* ============================================================
   BUTONLAR — üst kenarda biriken kar + buz kenarlığı
   ============================================================ */
html[data-season="winter"] .btn {
  position: relative;
  overflow: hidden;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.35),
    0 0 0 1px rgba(160, 225, 255, 0.14);
}
/* Kar tabakası: opak üst yüzey + winter.js'in ürettirdiği organik
   alt kenar maskesi (beyaz SVG şekilleri, filtre yok). */
html[data-season="winter"] .btn::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 15px;
  background: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.98) 0%,
    rgba(247, 252, 255, 0.93) 42%,
    rgba(214, 232, 248, 0.55) 100%
  );
  -webkit-mask-image: var(--snow-mask);
  mask-image: var(--snow-mask);
  -webkit-mask-size: auto 100%;
  mask-size: auto 100%;
  -webkit-mask-repeat: repeat-x;
  mask-repeat: repeat-x;
  -webkit-mask-position: 0 0;
  mask-position: 0 0;
  opacity: 0.95;
  pointer-events: none;
  transform-origin: top center;
  transition: transform 0.45s ease, opacity 0.45s ease, filter 0.45s ease;
  animation: snowGlisten 7s ease-in-out infinite;
}
/* üzerine gelince kar erir (yukarı doğru çekilir, incelir) */
html[data-season="winter"] .btn:hover::before {
  transform: scaleY(0.55);
  opacity: 0.62;
}
/* soğuk cam parıltısı — hover'da hafif buz parlaklığı */
html[data-season="winter"] .btn::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.16) 0%,
    rgba(174, 222, 255, 0.07) 40%,
    rgba(174, 222, 255, 0) 100%
  );
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.35s ease;
}
html[data-season="winter"] .btn:hover::after { opacity: 1; }

/* ışıltı — ışık kar yüzeyinde çok hafif dalgalanır */
@keyframes snowGlisten {
  0%, 100% { filter: brightness(1); }
  50%      { filter: brightness(1.06); }
}

html[data-season="winter"] .btn-primary {
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.45),
    0 0 0 1px rgba(160, 225, 255, 0.3),
    0 6px 18px rgba(79, 195, 247, 0.25);
}
html[data-season="winter"] .btn-primary:hover {
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.55),
    0 0 0 1px rgba(190, 238, 255, 0.45),
    0 8px 26px rgba(79, 195, 247, 0.4);
}
html[data-season="winter"] .btn-ghost {
  background: rgba(160, 225, 255, 0.06);
  border-color: rgba(160, 225, 255, 0.3);
  backdrop-filter: blur(2px);
}
html[data-season="winter"] .btn-ghost:hover {
  background: rgba(160, 225, 255, 0.14);
  border-color: rgba(190, 238, 255, 0.55);
}

/* ============================================================
   KARTLAR — üst kenarda biriken kar bankı
   ============================================================ */
html[data-season="winter"] .stat-card,
html[data-season="winter"] .feature,
html[data-season="winter"] .how-step,
html[data-season="winter"] .card,
html[data-season="winter"] .cta-band,
html[data-season="winter"] .premium-plan {
  position: relative;
  overflow: hidden;
  border-color: rgba(160, 225, 255, 0.28);
}
html[data-season="winter"] .stat-card::after,
html[data-season="winter"] .feature::after,
html[data-season="winter"] .how-step::after,
html[data-season="winter"] .card::after,
html[data-season="winter"] .cta-band::after,
html[data-season="winter"] .premium-plan::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 22px;
  background: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.95) 0%,
    rgba(244, 251, 255, 0.88) 45%,
    rgba(206, 228, 246, 0.5) 100%
  );
  -webkit-mask-image: var(--snow-mask);
  mask-image: var(--snow-mask);
  -webkit-mask-size: auto 100%;
  mask-size: auto 100%;
  -webkit-mask-repeat: repeat-x;
  mask-repeat: repeat-x;
  -webkit-mask-position: 0 0;
  mask-position: 0 0;
  opacity: 0.8;
  pointer-events: none;
  transform-origin: top center;
  transition: transform 0.5s ease, opacity 0.5s ease, filter 0.5s ease;
  animation: snowGlisten 9s ease-in-out infinite;
}
html[data-season="winter"] .stat-card:hover::after,
html[data-season="winter"] .feature:hover::after,
html[data-season="winter"] .how-step:hover::after,
html[data-season="winter"] .cta-band:hover::after {
  transform: scaleY(0.6);
  opacity: 0.5;
}

/* karta buz kenarlığı + soğuk gölge */
html[data-season="winter"] .feature:hover,
html[data-season="winter"] .how-step:hover {
  box-shadow:
    0 16px 40px rgba(0, 0, 0, 0.3),
    0 0 0 1px rgba(160, 225, 255, 0.25),
    inset 0 1px 0 rgba(255, 255, 255, 0.3);
}
html[data-season="winter"] .cta-band {
  background:
    radial-gradient(ellipse 80% 80% at 50% 100%, rgba(79, 195, 247, 0.18), transparent 60%),
    var(--bg-card);
}

/* ============================================================
   DASHBOARD (#app-shell) — ID seçicileri daha güçlü olduğu
   için kış kurallarını burada tekrar kazanıyoruz
   ============================================================ */
html[data-season="winter"] #app-shell {
  --dash-glow-accent: 0 0 24px rgba(159, 227, 255, 0.16);
  --dash-glow-primary: 0 0 28px rgba(79, 195, 247, 0.26);
  --dash-ring: 0 0 0 3px rgba(79, 195, 247, 0.3);
  background:
    radial-gradient(ellipse 90% 50% at 0% 0%, rgba(79, 195, 247, 0.09), transparent 50%),
    radial-gradient(ellipse 60% 40% at 100% 100%, rgba(200, 235, 255, 0.06), transparent 45%),
    var(--bg);
}
html[data-season="winter"][data-theme="light"] #app-shell {
  background:
    radial-gradient(ellipse 90% 50% at 0% 0%, rgba(79, 195, 247, 0.1), transparent 50%),
    var(--bg);
}

/* sidebar: soğuk kış tonu */
html[data-season="winter"] #app-shell .sidebar {
  background: linear-gradient(180deg, rgba(7, 32, 54, 0.98) 0%, rgba(3, 18, 34, 0.98) 100%);
}
html[data-season="winter"][data-theme="light"] #app-shell .sidebar {
  background: linear-gradient(180deg, #ffffff 0%, #eef8ff 100%);
  box-shadow: 4px 0 32px rgba(30, 110, 170, 0.1);
}

/* kart & istatistik kartı: buz tonu + üstte kar bankı */
html[data-season="winter"] #app-shell .stat-card,
html[data-season="winter"] #app-shell .card {
  border-color: rgba(160, 225, 255, 0.28);
  background:
    linear-gradient(165deg, rgba(17, 58, 92, 0.95), rgba(8, 34, 58, 0.92));
}
html[data-season="winter"][data-theme="light"] #app-shell .stat-card,
html[data-season="winter"][data-theme="light"] #app-shell .card {
  background: #ffffff;
}
/* app-shell'daki altın çizgi yerine gerçekçi kar bankı */
html[data-season="winter"] #app-shell .stat-card::after {
  left: 0;
  right: 0;
  top: 0;
  height: 22px;
  background: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.95) 0%,
    rgba(244, 251, 255, 0.88) 45%,
    rgba(206, 228, 246, 0.5) 100%
  );
  -webkit-mask-image: var(--snow-mask);
  mask-image: var(--snow-mask);
  -webkit-mask-size: auto 100%;
  mask-size: auto 100%;
  -webkit-mask-repeat: repeat-x;
  mask-repeat: repeat-x;
  -webkit-mask-position: 0 0;
  mask-position: 0 0;
  opacity: 0.8;
  transform-origin: top center;
  transition: transform 0.5s ease, opacity 0.5s ease, filter 0.5s ease;
  animation: snowGlisten 9s ease-in-out infinite;
}
html[data-season="winter"] #app-shell .stat-card:hover::after {
  transform: scaleY(0.6);
  opacity: 0.5;
}

/* app-shell butonları: buz mavisi + üstte kar */
html[data-season="winter"] #app-shell .btn-primary {
  background: linear-gradient(135deg, #2f9fd8, #4fc3f7);
}
html[data-season="winter"] #app-shell .btn-primary:hover {
  background: linear-gradient(135deg, #4fc3f7, #7ad6fb);
}
html[data-season="winter"] #app-shell .btn {
  position: relative;
  overflow: hidden;
}
html[data-season="winter"] #app-shell .btn::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 15px;
  background: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.98) 0%,
    rgba(247, 252, 255, 0.93) 42%,
    rgba(214, 232, 248, 0.55) 100%
  );
  -webkit-mask-image: var(--snow-mask);
  mask-image: var(--snow-mask);
  -webkit-mask-size: auto 100%;
  mask-size: auto 100%;
  -webkit-mask-repeat: repeat-x;
  mask-repeat: repeat-x;
  -webkit-mask-position: 0 0;
  mask-position: 0 0;
  opacity: 0.95;
  pointer-events: none;
  transform-origin: top center;
  transition: transform 0.45s ease, opacity 0.45s ease, filter 0.45s ease;
  animation: snowGlisten 7s ease-in-out infinite;
}
html[data-season="winter"] #app-shell .btn:hover::before {
  transform: scaleY(0.55);
  opacity: 0.62;
}
/* hover'da açılan menüsü olan butonlarda kesmesin */
html[data-season="winter"] #app-shell .user-dashboard-button,
html[data-season="winter"] .user-dashboard-button {
  overflow: visible !important;
}
/* avatar/resimli butonda kar şeridi olmaz — fotoğrafı kapatmasın */
html[data-season="winter"] .user-dashboard-button::before,
html[data-season="winter"] #app-shell .user-dashboard-button::before {
  content: none !important;
}

/* ---------- Form alanları: odakta buz parıltısı ---------- */
html[data-season="winter"] label input:focus,
html[data-season="winter"] label select:focus,
html[data-season="winter"] label textarea:focus,
html[data-season="winter"] .row-flex input:focus {
  border-color: rgba(159, 227, 255, 0.7);
  box-shadow: 0 0 0 3px rgba(79, 195, 247, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.25);
}

/* ---------- Sayfanın altında biriken kar yığını ---------- */
html[data-season="winter"] body::after {
  content: "";
  position: fixed;
  left: 0;
  right: 0;
  bottom: -8px;
  height: 96px;
  z-index: 4;
  pointer-events: none;
  opacity: 0.95;
  background: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0) 0%,
    rgba(244, 251, 255, 0.7) 52%,
    rgba(255, 255, 255, 0.97) 100%
  );
  -webkit-mask-image: var(--snow-drift-mask);
  mask-image: var(--snow-drift-mask);
  -webkit-mask-size: auto 100%;
  mask-size: auto 100%;
  -webkit-mask-repeat: repeat-x;
  mask-repeat: repeat-x;
  -webkit-mask-position: 0 100%;
  mask-position: 0 100%;
}
html[data-season="winter"][data-theme="light"] body::after {
  opacity: 1;
  filter: drop-shadow(0 -3px 8px rgba(90, 160, 210, 0.28));
}

/* ---------- Kar animasyonu katmanı (winter.js oluşturur) ---------- */
#winter-snow {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 250;
  pointer-events: none;
}

/* ============================================================
   ATLANTIS (kış dışı 9 ay) — aşağıdan yukarı yükselen baloncuklar
   Mevsimi winter.js belirler; bu dosya yalnızca renkleri ve
   canvas katmanını tanımlar. Tema (açık/koyu) renkleri değiştirir,
   winter.js renkleri okuyup canvas'a uygular.
   ============================================================ */

/* ---------- Baloncuk paleti: ATLANTIS / koyu tema ---------- */
html[data-season="atlantis"] {
  /* gövde: içten dışa parlayan yarı saydam dolgu */
  --bubble-core: rgba(31, 182, 201, 0.16);
  --bubble-rim: rgba(125, 211, 252, 0.5);
  /* kenar halkası + üst parıltı */
  --bubble-edge: rgba(160, 232, 255, 0.62);
  --bubble-hl: rgba(234, 246, 255, 0.9);
  /* Atlantis altın çakırı (bazı baloncuklarda küçük vurgu) */
  --bubble-glint: rgba(244, 193, 78, 0.65);
  /* arka planda süzülen plankton tanecikleri */
  --bubble-mote: rgba(125, 211, 252, 0.3);
}

/* ---------- Baloncuk paleti: ATLANTIS / açık tema ---------- */
html[data-season="atlantis"][data-theme="light"] {
  --bubble-core: rgba(23, 153, 184, 0.14);
  --bubble-rim: rgba(14, 143, 158, 0.4);
  --bubble-edge: rgba(14, 143, 158, 0.5);
  --bubble-hl: rgba(255, 255, 255, 0.95);
  --bubble-glint: rgba(14, 143, 158, 0.5);
  --bubble-mote: rgba(14, 143, 158, 0.25);
}

/* ---------- Baloncuk animasyonu katmanı (winter.js oluşturur) ----------
   z-index 0: #bg-glow (0) ile içerik (.page / #app-shell, z-index 1)
   ARASINA oturur. Yani baloncuklar kartların, butonların ve navbar'ın
   arkasında süzülür — içerik önde, su ve baloncuklar arkada kalır.
   Canvas pointer-events:none + vuruş testi document üzerinde yapıldığı
   için tıklanabilirlik bu katta da çalışır. */
#atlantis-bubbles {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  pointer-events: none;
}

/* ---------- Hareket azaltma tercihi ---------- */
@media (prefers-reduced-motion: reduce) {
  html[data-season="winter"] .btn::before,
  html[data-season="winter"] .btn::after,
  html[data-season="winter"] .stat-card::after,
  html[data-season="winter"] .feature::after,
  html[data-season="winter"] .how-step::after,
  html[data-season="winter"] .card::after,
  html[data-season="winter"] .cta-band::after,
  html[data-season="winter"] .premium-plan::after,
  html[data-season="winter"] #app-shell .btn::before,
  html[data-season="winter"] #app-shell .stat-card::after {
    transition: none !important;
    animation: none !important;
    transform: none !important;
  }
  #winter-snow { display: none; }
  #atlantis-bubbles { display: none; }
}