/* zevzek.org - Neobrutalist Özel Stiller & Animasyonlar */

@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@500;700;800;900&family=Space+Grotesk:wght@600;700;800&display=swap');

:root {
  --zevzek-yellow: #FFE600;
  --bubble-pink: #FF70A6;
  --pistachio-green: #70E000;
  --electric-blue: #3A86FF;
  --dark-black: #121212;
  --cream-bg: #FFFDF0;
}

body {
  font-family: 'Plus Jakarta Sans', sans-serif;
  background-color: var(--cream-bg);
  color: var(--dark-black);
}

h1, h2, h3, h4, .brand-font {
  font-family: 'Space Grotesk', sans-serif;
}

/* Neobrutalist Temel Öğeler */
.brutal-border {
  border: 3px solid #000000;
}

.brutal-border-4 {
  border: 4px solid #000000;
}

.brutal-shadow {
  box-shadow: 4px 4px 0px #000000;
}

.brutal-shadow-lg {
  box-shadow: 6px 6px 0px #000000;
}

.brutal-shadow-sm {
  box-shadow: 2px 2px 0px #000000;
}

/* Tıklama ve Hover Etkileşimleri */
.brutal-btn {
  border: 3px solid #000000;
  box-shadow: 4px 4px 0px #000000;
  transition: all 0.12s ease-in-out;
  cursor: pointer;
  user-select: none;
}

.brutal-btn:hover {
  transform: translate(-2px, -2px);
  box-shadow: 6px 6px 0px #000000;
}

.brutal-btn:active {
  transform: translate(3px, 3px);
  box-shadow: 0px 0px 0px #000000;
}

/* Reaksiyon Butonları */
.reaction-btn {
  border: 2px solid #000000;
  box-shadow: 3px 3px 0px #000000;
  transition: all 0.1s ease;
}

.reaction-btn:hover {
  transform: translate(-1px, -1px);
  box-shadow: 4px 4px 0px #000000;
}

.reaction-btn:active {
  transform: translate(2px, 2px);
  box-shadow: 0px 0px 0px #000000;
}

.reaction-btn.active {
  background-color: #000000 !important;
  color: #FFFFFF !important;
  transform: translate(2px, 2px);
  box-shadow: 1px 1px 0px #000000;
}

/* Mizahi Sansür Vurgulama Etiketi */
.badge-censored {
  display: inline-block;
  background-color: #FF70A6;
  color: #000000;
  font-weight: 900;
  padding: 1px 6px;
  border: 2px solid #000000;
  box-shadow: 2px 2px 0px #000000;
  transform: rotate(-1.5deg);
  margin: 0 2px;
  font-size: 0.9em;
  letter-spacing: 0.02em;
  transition: all 0.12s ease;
}

.badge-censored:hover {
  background-color: #FFE600;
  transform: rotate(1.5deg) scale(1.05);
}

/* Kayan Şerit (Marquee) */
.marquee-container {
  overflow: hidden;
  white-space: nowrap;
}

.marquee-content {
  display: inline-block;
  animation: marquee 22s linear infinite;
}

@keyframes marquee {
  0% { transform: translateX(0%); }
  100% { transform: translateX(-50%); }
}

/* Özel Scrollbar */
::-webkit-scrollbar {
  width: 10px;
}
::-webkit-scrollbar-track {
  background: #FFFDF0;
  border-left: 2px solid #000;
}
::-webkit-scrollbar-thumb {
  background: #FFE600;
  border: 2px solid #000;
}
::-webkit-scrollbar-thumb:hover {
  background: #FF70A6;
}

/* Yeni Eklenen Gönderi İçin Açılış Animasyonu */
@keyframes slideDown {
  0% { opacity: 0; transform: translateY(-16px); }
  100% { opacity: 1; transform: translateY(0); }
}

.animate-slide-down {
  animation: slideDown 0.35s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

/* ==========================================================================
   NEOBRUTALIST DARK MODE ("Ortamı Karart, Bir Şey Deniycez")
   Renk Paleti: #121212 Zemin, #1E1E1E Kartlar, Kalın Beyaz Sınırlar, Zevzek Sarısı Vurgular
   ========================================================================== */

html.dark {
  --cream-bg: #121212;
  --dark-black: #FFFFFF;
}

html.dark body {
  background-color: #121212 !important;
  color: #FFFFFF !important;
}

/* Kartlar ve Zeminler */
html.dark .bg-white {
  background-color: #1E1E1E !important;
  color: #FFFFFF !important;
}

html.dark header {
  background-color: #1E1E1E !important;
  border-bottom-color: #FFFFFF !important;
}

html.dark footer {
  background-color: #121212 !important;
  border-top-color: #FFFFFF !important;
}

/* Sınırlar & Gölgeler */
html.dark .brutal-border,
html.dark .brutal-border-4,
html.dark .brutal-btn,
html.dark .reaction-btn,
html.dark .border-black,
html.dark .border-b-4,
html.dark .border-b-3,
html.dark .border-t-4,
html.dark .border-3 {
  border-color: #FFFFFF !important;
}

html.dark .brutal-shadow {
  box-shadow: 4px 4px 0px #FFFFFF !important;
}

html.dark .brutal-shadow-lg {
  box-shadow: 6px 6px 0px #FFFFFF !important;
}

html.dark .brutal-shadow-sm {
  box-shadow: 2px 2px 0px #FFFFFF !important;
}

/* Metin Renkleri */
html.dark .text-black {
  color: #FFFFFF !important;
}

html.dark .text-gray-600,
html.dark .text-gray-500,
html.dark .text-gray-700,
html.dark .text-gray-400 {
  color: #BBBBBB !important;
}

/* Post ve Yorum Metinleri (Jilet gibi okunabilirlik) */
html.dark .post-content,
html.dark .comment-content,
html.dark [data-post-content],
html.dark .dark\:text-zinc-100 {
  color: #F4F4F5 !important; /* zinc-100 */
}

/* Reaksiyon Butonları ve Sayaçları */
html.dark .reaction-btn {
  background-color: #27272A !important; /* zinc-800 */
  color: #FFFFFF !important;
  border-color: #FFFFFF !important;
}

html.dark .reaction-btn span,
html.dark .reaction-btn span[id^="count_"] {
  color: #FFFFFF !important;
}

html.dark .reaction-btn.active {
  background-color: #FFFFFF !important;
  color: #000000 !important;
}

html.dark .reaction-btn.active span,
html.dark .reaction-btn.active span[id^="count_"] {
  color: #000000 !important;
}

/* Giriş Alanları (Input, Textarea, Select) */
html.dark input,
html.dark textarea,
html.dark select {
  background-color: #27272A !important; /* zinc-800 */
  color: #FFFFFF !important;
  border-color: #FFFFFF !important;
}

html.dark input::placeholder,
html.dark textarea::placeholder {
  color: #A1A1AA !important; /* zinc-400 */
}

/* Sarı, Yeşil ve Pembe Vurgulu Kutuların İç Yazıları Siyah Kalmalıdır */
html.dark .bg-\[\#FFE600\],
html.dark .bg-\[\#70E000\],
html.dark .bg-\[\#FF70A6\],
html.dark #headerSlogan,
html.dark .badge-censored {
  color: #000000 !important;
}

html.dark .bg-\[\#FFE600\] > *:not(form):not(input):not(textarea),
html.dark .bg-\[\#70E000\] > *:not(form):not(input):not(textarea),
html.dark .bg-\[\#FF70A6\] > *:not(form):not(input):not(textarea) {
  color: #000000 !important;
}

/* Modallar */
html.dark .bg-black\/60 {
  background-color: rgba(0, 0, 0, 0.85) !important;
}

/* Gönderi Formu Kartı (SEN DE SAÇMALA) Koyu Mod */
html.dark #createPostSection > div {
  background-color: #18181B !important; /* zinc-900 */
  border-color: #FFFFFF !important;
  color: #FFFFFF !important;
}

html.dark #createPostSection label,
html.dark #createPostSection h2 {
  color: #FFFFFF !important;
}

html.dark #createPostSection p {
  color: #D4D4D8 !important; /* zinc-300 */
}

/* Bana Saçmala Modalı İçerik Kartı Kontrastı */
#randomPostModal .bg-\[\#1E1E1E\],
#randomPostModal .bg-\[\#1E1E1E\] h4,
#randomPostModal .bg-\[\#1E1E1E\] p {
  color: #F4F4F5 !important;
}

#randomPostTitle {
  color: #FFFFFF !important;
}

#randomPostContent {
  color: #F4F4F5 !important;
}

#randomPostModal .badge-censored {
  background-color: #FF70A6 !important;
  color: #000000 !important;
}