@charset "UTF-8";

/* base */

/* GLOBAL TEMA DEĞİŞKENLERİ */

:root {
  --bg: #120e1f;
  --fg: #f3e600;
  --sh: #ff007f;
  --bg-gradient: linear-gradient(135deg, #120e1f 0%, #6f0f6f 52%, #f3e600 100%);
  --surface-gradient: linear-gradient(145deg, rgba(18, 14, 31, 0.98) 0%, rgba(46, 24, 61, 0.94) 100%);
  --fg-gradient: linear-gradient(135deg, #f3e600 0%, #ff007f 100%);
  --sh-gradient: linear-gradient(135deg, #ff007f 0%, #2b102d 100%);
  --bg-gradient-size: 200% 200%;
  --surface-gradient-size: 160% 160%;
  --fg-gradient-size: 180% 180%;
  --theme-gradient-speed: 18s;
  --solid-color-start: #120e1f;
  --solid-color-end: #120e1f;
  --solid-cycle-speed: 18s;
  --base-font-size: 16px;
}

::selection {
  background: var(--fg);
  color: var(--bg);
  text-shadow: none;
}

html {
  font-size: var(--base-font-size);
  background-color: var(--bg);
  background-image: var(--bg-gradient);
  background-size: var(--bg-gradient-size);
  background-position: 0% 50%;
  animation: themeGradientFlow var(--theme-gradient-speed) linear infinite;
  /* iOS Safari: viewport değişimlerinde arkaplan boşluğu olmasın */
  -webkit-background-size: var(--bg-gradient-size);
}

/* Erişilebilirlik - animasyon azalt */

html[data-reduce-motion="1"] *,
html[data-reduce-motion="1"] *::before,
html[data-reduce-motion="1"] *::after {
  animation-duration: 0.001ms !important;
  animation-iteration-count: 1 !important;
  transition-duration: 0.001ms !important;
  scroll-behavior: auto !important;
}

/* Erişilebilirlik - ekstra kontrast */

body.hc-mode {
  filter: contrast(1.25) saturate(1.1);
}

/* 
   NOT: Tüm [data-theme] blokları themes.json dosyasına taşındı. 
   Değişkenler artık JavaScript ile dinamik olarak güncelleniyor.
*/

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: "Courier New", Courier, monospace;
}

body {
  height: 100%; /* Sayfanın tam yüksekliğini kaplamasını sağlar */
  background-color: var(--bg);
  background-image: var(--bg-gradient);
  background-size: var(--bg-gradient-size);
  background-position: 0% 50%;
  animation: themeGradientFlow var(--theme-gradient-speed) linear infinite;
  color: var(--fg);
  display: flex;
  flex-direction: column; /* İçeriklerin dikey olarak yığılmasını sağlar */
  align-items: center; /* İçerikleri yatayda ortalar */
  min-height: 100dvh;
  padding:
    calc(env(safe-area-inset-top, 0px) + 20px)
    calc(env(safe-area-inset-right, 0px) + 20px)
    calc(env(safe-area-inset-bottom, 0px) + 20px)
    calc(env(safe-area-inset-left, 0px) + 20px);
  transition: all 0.3s ease;
}

/* Fade animasyonları */

.fade-out {
  opacity: 0;
  transition: opacity 0.5s ease-out;
}

.fade-in {
  opacity: 1;
  transition: opacity 0.5s ease-in;
}

@keyframes themeGradientFlow {
  0% {
    background-position: 0% 50%;
    background-size: var(--bg-gradient-size);
  }
  25% {
    background-position: 100% 18%;
    background-size: 240% 228%;
  }
  50% {
    background-position: 28% 100%;
    background-size: 274% 246%;
  }
  75% {
    background-position: 86% 72%;
    background-size: 228% 238%;
  }
  100% {
    background-position: 0% 50%;
    background-size: var(--bg-gradient-size);
  }
}

@keyframes solidColorMorph {
  0% {
    background-color: var(--solid-color-start);
  }
  100% {
    background-color: var(--solid-color-end);
  }
}

.divider {
  border-top: 4px dashed var(--fg);
  margin: 10px 0;
  transition: border-color 0.3s ease;
}

.select-wrapper {
  position: relative;
  flex: 1;
  height: 48px;
}

.scroll-arrow {
  width: 100%;
  height: 24px;
  background-color: var(--fg);
  background-image: var(--fg-gradient);
  background-size: var(--fg-gradient-size);
  color: var(--bg);
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 0.9rem;
  cursor: pointer;
  user-select: none;
  z-index: 10;
  flex-shrink: 0;
  transition: all 0.3s ease;
}

.scroll-arrow.disabled {
  opacity: 0.15;
  pointer-events: none;
}

@keyframes scrollText {
  0% {
    transform: translate3d(0, 0, 0);
  }
  100% {
    transform: translate3d(-50%, 0, 0);
  }
}

.wheel {
  width: 40px;
  height: 40px;
  border: 4px solid var(--fg);
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  animation: spinTape 3s linear infinite;
  transition: border-color 0.3s ease;
}

.wheel-spoke {
  width: 100%;
  height: 4px;
  background-color: var(--fg);
  position: absolute;
  transition: background-color 0.3s ease;
}

.wheel-spoke:nth-child(2) {
  transform: rotate(60deg);
}

.wheel-spoke:nth-child(3) {
  transform: rotate(120deg);
}

.wheel-center {
  width: 14px;
  height: 14px;
  background-color: var(--bg);
  border-radius: 50%;
  border: 3px solid var(--fg);
  z-index: 2;
  transition: all 0.3s ease;
}

.c-window {
  width: 70px;
  height: 25px;
  border: 3px solid var(--fg);
  overflow: hidden;
  position: relative;
  background-color: var(--bg);
  transition: all 0.3s ease;
}

.tape-line {
  width: 100%;
  height: 8px;
  background-color: var(--fg);
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  transition: background-color 0.3s ease;
}

.c-bottom {
  position: absolute;
  bottom: -4px;
  left: 50%;
  transform: translateX(-50%);
  width: 60%;
  height: 10px;
  border: 4px solid var(--fg);
  border-bottom: none;
  background-color: var(--bg);
  transition: all 0.3s ease;
}

@keyframes spinTape {
  100% {
    transform: rotate(360deg);
  }
}

.blink-cursor {
  animation: blink 1s infinite;
}

@keyframes blink {
  0%,
  100% {
    opacity: 1;
  }
  50% {
    opacity: 0;
  }
}

@keyframes pet-bounce {
  0% {
    transform: translateY(0) scaleY(1);
  }
  100% {
    transform: translateY(-8px) scaleY(0.9);
  }
}

/* index.html içindeki inline style'ları kaldırmak için yardımcı sınıflar */

/* 12. fikir: rastgele mesaj butonu */

/* 16. fikir: değişim günlüğü */

/* 17. fikir: erişilebilirlik paneli */

html[data-background-mode="animated-solid"] body {
  background-color: var(--solid-color-start);
  background-image: none;
  background-size: auto;
  background-position: center;
  animation: solidColorMorph var(--solid-cycle-speed) linear infinite alternate;
}

.access-toggle-btn {
  width: 100%;
  flex: none;
}

/* Yeni Tema & Ayarlar Paneli - Accordion */

/* Ayarlar paneli içindeki theme-controls ve accessibility-panel için flex düzenlemeleri */

/* 20. fikir: küçük easter egg efekti */

.easter-flash {
  animation: easterFlash 650ms ease-in-out 8;
}

@keyframes easterFlash {
  0% {
    transform: scale(1);
    filter: none;
  }
  20% {
    transform: scale(1.02);
    filter: drop-shadow(0 0 18px var(--sh));
  }
  40% {
    transform: scale(0.99);
    filter: drop-shadow(0 0 26px var(--fg));
  }
  60% {
    transform: scale(1.01);
    filter: drop-shadow(0 0 18px var(--sh));
  }
  100% {
    transform: scale(1);
    filter: none;
  }
}

/* === BLOG HEADER === */

/* === BLOG KUTUSU (BİRLEŞTİRİLMİŞ TERTEMİZ HALİ) === */

/* Kutunun altını biraz açtık ki butonlara yer kalsın */

/* === İÇERİK VE HTML ETİKETLERİ === */

/* === DEVAMINI OKU / KAPAT BUTONLARI === */

/* Butonları kutunun sol altına kalıcı olarak çiviledik */

/* Üstüne gelince parlamaya devam etsin */

/* Metin içi fotoğraflar (KIRPMADAN SIĞDIRAN AYAR) */

/* Üstüne gelince hafif büyüme efekti (opsiyonel) */

/* === SPA SHELL + MOBILE OVERRIDES === */

html,
body {
  max-width: 100%;
  overflow-x: hidden;
}

body {
  padding:
    calc(env(safe-area-inset-top, 0px) + var(--body-pad))
    calc(env(safe-area-inset-right, 0px) + var(--body-pad))
    calc(env(safe-area-inset-bottom, 0px) + var(--body-pad))
    calc(env(safe-area-inset-left, 0px) + var(--body-pad));
}

#main-content {
  min-height: 40vh;
}

/* MARKDOWN EDITOR TOOLBAR */

/* SPY MODE KUTUSU */

/* === ÇİZİM RENK PALETİ (KARE VE KESKİN TEMALI) === */

/* === SİBER KALINLIK KAYDIRMA ÇUBUĞU (SLIDER) === */

/* Kaydırıcı başlık (Thumb) stili */

/* Firefox için kaydırıcı başlık stili */