/* =========================================================
   GOKDENIZ OS — THEME: VOID
   Tak-çıkar tema. style.css'den SONRA yükle:
     <link rel="stylesheet" href="style.css">
     <link rel="stylesheet" href="theme-void.css">
   Kaldırmak için ikinci link'i sil, sayfayı yenile.
   ========================================================= */


:root {
  --void-bg:       #000;
  --void-panel:    #0a0a0a;
  --void-line:     #1a1a1a;
  --void-dim:      #1f6b12;
  --void-green:    #39ff14;
  --void-green-soft: rgba(57,255,20,.6);
  --void-gold:     #ffd700;
  --void-red:      #ff4757;
  --void-text:     #e4e4e4;
  --void-muted:    #777;
}

/* ---------- GLOBAL ---------- */
body {
  background-color: var(--void-bg) !important;
  background-image:
    linear-gradient(rgba(0,0,0,.55), rgba(0,0,0,.7)),
    url('resim/bg-gator.png') !important;
  background-repeat: no-repeat, no-repeat !important;
  background-size: auto, cover !important;
  background-position: center, center center !important;
  background-attachment: fixed, fixed !important;
  font-family: 'Segoe UI', sans-serif !important;
  color: var(--void-text) !important;
  position: relative;
}

/* Baby croc fixed decorative sticker — sol üst köşe */
body::before {
  content: "";
  position: fixed;
  top: 80px;
  left: 14px;
  width: 130px;
  height: 130px;
  background: url('resim/bg-baby-croc.png') center/contain no-repeat;
  opacity: 0.85;
  pointer-events: none;
  z-index: 9997;
  filter: drop-shadow(0 0 12px rgba(57,255,20,.35));
  animation: babyBob 3.5s ease-in-out infinite;
}
@keyframes babyBob { 0%,100%{ transform: translateY(0) rotate(-3deg);} 50%{ transform: translateY(-8px) rotate(3deg);} }
@media (max-width: 700px) { body::before { width: 80px; height: 80px; top: 70px; } }
/* CRT scanlines */
body::after {
  content: "";
  position: fixed; inset: 0; pointer-events: none; z-index: 9998;
  background: repeating-linear-gradient(to bottom, rgba(57,255,20,.025) 0 1px, transparent 1px 3px);
  mix-blend-mode: screen;
}

/* ---------- NAVBAR ---------- */
.navbar {
  background: rgba(0,0,0,.94) !important;
  border-bottom: 1px solid var(--void-line) !important;
  box-shadow: 0 0 24px rgba(57,255,20,.08) !important;
}
.nav-logo {
  font-family: 'Courier New', monospace !important;
  font-size: 2rem !important;
  letter-spacing: .06em !important;
  color: #fff !important;
  text-shadow: 0 0 8px rgba(255,255,255,.15) !important;
  position: relative;
  display: inline-block;
  animation: navLogoGlitch 6s infinite steps(1, end);
}
/* RGB-split ghost layers via pseudo */
.nav-logo::before,
.nav-logo::after {
  content: attr(data-text);
  position: absolute; inset: 0;
  pointer-events: none;
  mix-blend-mode: screen;
  opacity: 0;
}
.nav-logo::before {
  color: #ff2a6d; text-shadow: 0 0 6px rgba(255,42,109,.5);
  animation: navLogoGhostL 6s infinite steps(1, end);
}
.nav-logo::after {
  color: #00ffd1; text-shadow: 0 0 6px rgba(0,255,209,.5);
  animation: navLogoGhostR 6s infinite steps(1, end);
}
@keyframes navLogoGlitch {
  0%, 100%       { transform: translate(0,0); clip-path: none; }
  18%            { transform: translate(-1px, 0); clip-path: inset(0 0 45% 0); }
  18.4%          { transform: translate(1px, 0); clip-path: inset(55% 0 0 0); }
  18.8%          { transform: translate(0, 0); clip-path: none; }
  47%            { transform: translate(0, 0); clip-path: inset(25% 0 55% 0); }
  47.3%          { transform: translate(2px, 0); }
  47.6%          { clip-path: none; transform: translate(0,0); }
  78%, 78.3%     { transform: translate(-1px, 1px); }
  78.6%          { transform: translate(0, 0); }
}
@keyframes navLogoGhostL {
  0%, 17.9%, 19%, 46.9%, 47.7%, 77.9%, 78.7%, 100% { opacity: 0; transform: translate(0,0); }
  18%, 18.8%   { opacity: .8; transform: translate(-2px, 0); }
  47%, 47.6%   { opacity: .7; transform: translate(-3px, 1px); }
  78%, 78.6%   { opacity: .6; transform: translate(-2px, 0); }
}
@keyframes navLogoGhostR {
  0%, 17.9%, 19%, 46.9%, 47.7%, 77.9%, 78.7%, 100% { opacity: 0; transform: translate(0,0); }
  18%, 18.8%   { opacity: .8; transform: translate(2px, 0); }
  47%, 47.6%   { opacity: .7; transform: translate(3px, -1px); }
  78%, 78.6%   { opacity: .6; transform: translate(2px, 0); }
}
.nav-logo span {
  color: var(--void-green) !important;
  text-shadow: 0 0 10px var(--void-green-soft), 0 0 24px rgba(57,255,20,.3) !important;
  animation: voidFlicker 5s steps(1,end) infinite;
  position: relative;
  display: inline-block;
}
.nav-logo span::before,
.nav-logo span::after {
  content: attr(data-text);
  position: absolute; inset: 0;
  pointer-events: none;
  mix-blend-mode: screen;
  opacity: 0;
}
.nav-logo span::before {
  color: #ff2a6d; text-shadow: 0 0 6px rgba(255,42,109,.6);
  animation: navLogoGhostL 6s infinite steps(1, end);
}
.nav-logo span::after {
  color: #00ffd1; text-shadow: 0 0 6px rgba(0,255,209,.6);
  animation: navLogoGhostR 6s infinite steps(1, end);
}
@keyframes voidFlicker {
  0%, 92%, 100% { opacity: 1 }
  92.5%, 92.8% { opacity: .45 }
  93%, 99% { opacity: 1 }
  99.2%, 99.4% { opacity: .7 }
}
/* Ekstra: ara sıra yatay scanline band logo üzerinden geçsin */
.nav-logo {
  overflow: visible;
}
.nav-logo::before, .nav-logo::after {
  /* yukarıda tanımlı — sadece data-text için */
}

.nav-tab {
  font-family: 'Segoe UI', sans-serif !important;
  font-size: 1rem !important;
  letter-spacing: .14em !important;
  color: var(--void-muted) !important;
}
.nav-tab:hover { color: #fff !important; background: rgba(57,255,20,.04) !important; }
.nav-tab.active {
  color: var(--void-green) !important;
  border-bottom-color: var(--void-green) !important;
  background: linear-gradient(180deg, transparent 0%, rgba(57,255,20,.06) 100%) !important;
  text-shadow: 0 0 6px var(--void-green-soft);
}
.nav-tab.active .nav-tab-icon { filter: grayscale(0%) drop-shadow(0 0 5px var(--void-green-soft)) !important; }

/* HUD */
.hud-container { background: #000 !important; border: 1px solid var(--void-line) !important; border-radius: 0 !important; }
.hud-item { font-family: 'Segoe UI', sans-serif !important; font-size: 1rem !important; color: var(--void-green) !important; letter-spacing: .1em; }
.hud-val { color: var(--void-red) !important; text-shadow: 0 0 6px rgba(255,71,87,.5) !important; }
.hud-input { color: var(--void-green) !important; }

/* NAVBAR BUTTONS */
.btn-navbar { border-radius: 0 !important; font-family: 'Segoe UI', sans-serif !important; letter-spacing: .14em !important; font-size: .95rem !important; text-transform: uppercase; }
.btn-auth { background: #000 !important; border: 1px solid var(--void-gold) !important; color: var(--void-gold) !important; }
.btn-auth:hover { background: var(--void-gold) !important; color: #000 !important; }
.btn-logout { background: #000 !important; border: 1px solid var(--void-red) !important; color: var(--void-red) !important; }
.btn-logout:hover { background: var(--void-red) !important; color: #000 !important; box-shadow: 0 0 16px rgba(255,71,87,.5) !important; }

/* ---------- MEDIA VIEWER ---------- */
.counter { color: var(--void-dim) !important; letter-spacing: .18em !important; font-family: 'Segoe UI', sans-serif !important; font-size: 1.05rem !important; }
.media-wrapper {
  background: radial-gradient(ellipse at center, #0a0a0a 0%, #000 100%) !important;
  border: 1px solid var(--void-line) !important;
  border-radius: 0 !important;
  position: relative;
}
.media-wrapper::before, .media-wrapper::after {
  content: ""; position: absolute; width: 14px; height: 14px; pointer-events: none;
}
.media-wrapper::before { top: 6px; left: 6px; border-top: 1px solid var(--void-green-soft); border-left: 1px solid var(--void-green-soft); }
.media-wrapper::after  { bottom: 6px; right: 6px; border-bottom: 1px solid var(--void-green-soft); border-right: 1px solid var(--void-green-soft); }
.media-content { border-radius: 0 !important; box-shadow: 0 0 30px rgba(0,0,0,.8), 0 0 0 1px var(--void-line) !important; }

.caption-box {
  background: #000 !important;
  border: 1px solid var(--void-line) !important;
  border-radius: 0 !important;
}
.caption-text {
  color: var(--void-gold) !important;
  font-family: 'Segoe UI', sans-serif !important;
  font-size: 1.25rem !important;
  text-shadow: 0 0 4px rgba(255,215,0,.3) !important;
  font-style: normal !important;
  letter-spacing: .04em;
}

/* PREV / NEXT */
.btn-prev, .btn-next {
  font-family: 'Courier New', monospace !important;
  font-size: 1.2rem !important;
  letter-spacing: .14em !important;
  border-radius: 0 !important;
  border: 1px solid !important;
  transition: all .15s !important;
}
.btn-prev { background: #000 !important; color: var(--void-muted) !important; border-color: var(--void-line) !important; }
.btn-prev:hover { color: #fff !important; border-color: #fff !important; }
.btn-next {
  background: #000 !important;
  color: var(--void-red) !important;
  border-color: var(--void-red) !important;
  box-shadow: 0 0 16px rgba(255,71,87,.2) !important;
}
.btn-next:hover { background: var(--void-red) !important; color: #000 !important; box-shadow: 0 0 28px rgba(255,71,87,.6) !important; }

/* ---------- LIVE FEED ---------- */
.live-feed-container {
  background: #000 !important;
  border: 1px solid var(--void-line) !important;
  border-left: 3px solid var(--void-green) !important;
  border-radius: 0 !important;
}
.feed-header {
  font-family: 'Courier New', monospace !important;
  font-size: 1.6rem !important;
  color: var(--void-green) !important;
  letter-spacing: .18em !important;
  border-bottom: 1px dashed var(--void-dim) !important;
  text-shadow: 0 0 6px var(--void-green-soft) !important;
}
.feed-item { border-bottom: 1px solid var(--void-line) !important; }
.feed-item:hover { background: rgba(57,255,20,.03) !important; border-left: 2px solid var(--void-green) !important; }
.feed-item span { font-family: 'Segoe UI', sans-serif !important; color: var(--void-text) !important; }
.feed-details {
  background: #000 !important;
  border: 1px solid var(--void-line) !important;
  border-radius: 0 !important;
  box-shadow: inset 0 0 20px rgba(57,255,20,.04) !important;
  font-family: 'Segoe UI', sans-serif !important;
}

/* ---------- TTS ---------- */
.tts-container {
  background: #000 !important;
  border: 1px solid var(--void-line) !important;
  border-radius: 0 !important;
  position: relative;
}
.tts-container::before, .tts-container::after {
  content: ""; position: absolute; width: 14px; height: 14px; pointer-events: none;
}
.tts-container::before { top: 6px; left: 6px; border-top: 1px solid var(--void-green-soft); border-left: 1px solid var(--void-green-soft); }
.tts-container::after  { bottom: 6px; right: 6px; border-bottom: 1px solid var(--void-green-soft); border-right: 1px solid var(--void-green-soft); }
.tts-input {
  background: #000 !important;
  border: 1px solid var(--void-line) !important;
  color: var(--void-green) !important;
  font-family: 'Segoe UI', sans-serif !important;
  font-size: 1.15rem !important;
  border-radius: 0 !important;
  letter-spacing: .02em;
}
.tts-input:focus { border-color: var(--void-green) !important; box-shadow: 0 0 12px rgba(57,255,20,.25) !important; }

/* ---------- MODAL ---------- */
.modal-content {
  background: #000 !important;
  border: 1px solid var(--void-line) !important;
  border-left: 3px solid var(--void-gold) !important;
  border-radius: 0 !important;
  font-family: 'Segoe UI', sans-serif !important;
}
.modal-content h2 {
  font-family: 'Courier New', monospace !important;
  letter-spacing: .14em !important;
  text-shadow: 0 0 8px rgba(255,215,0,.3) !important;
}

/* ---------- USER CARDS ---------- */
.user-name { font-family: 'Segoe UI', sans-serif !important; color: #fff !important; font-size: 1.1rem !important; }
.user-id { color: var(--void-dim) !important; font-family: 'Segoe UI', sans-serif !important; }
.user-avatar { border-radius: 0 !important; border: 1px solid var(--void-green) !important; box-shadow: 0 0 10px rgba(57,255,20,.2); }
.owner-badge {
  background: var(--void-gold) !important;
  border-radius: 0 !important;
  font-family: 'Segoe UI', sans-serif !important;
  letter-spacing: .1em;
}

/* ---------- FLOATING SLAP TEXT ---------- */
.floating-text {
  color: var(--void-red) !important;
  font-family: 'Segoe UI', sans-serif !important;
  font-size: 1.5rem !important;
  text-shadow: 0 0 10px rgba(255,71,87,.8) !important;
  letter-spacing: .06em;
}

/* ---------- SELECT DROPDOWNS ---------- */
#sesSecimi {
  background: #000 !important;
  border: 1px solid var(--void-line) !important;
  color: var(--void-green) !important;
  font-family: 'Segoe UI', sans-serif !important;
  font-size: 1.1rem !important;
  border-radius: 0 !important;
  letter-spacing: .04em;
}

/* end */