:root {
  --color-bg: #f9f9f9;
  --color-ink: #111111;
  --color-brand: #ff5e00;
  --color-card: #ffffff;
  --color-tan: #eeddc3;
  --color-shadow: #111111;
}

html.dark {
  --color-bg: #0d0d0d;
  --color-ink: #fdfdfd;
  --color-brand: #ff5e00;
  --color-card: #151515;
  --color-tan: #25201A;
  --color-shadow: #fdfdfd;
}

body {
  background-color: var(--color-bg);
  color: var(--color-ink);
  font-family: 'Inter', sans-serif;
  -webkit-font-smoothing: antialiased;
  transition: background-color 0.4s ease, color 0.4s ease;
  overflow-x: hidden;
}

::selection {
  background-color: var(--color-brand);
  color: #fff;
}

.page {
  animation: fadeIn 0.3s ease-out;
}

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

::-webkit-scrollbar { width: 8px; }
::-webkit-scrollbar-track { background: var(--color-bg); border-left: 2px solid var(--color-ink); }
::-webkit-scrollbar-thumb { background: var(--color-ink); }

.nav-btn { position: relative; }
.nav-btn.active { color: var(--color-brand); }

.brutal-border { border: 2px solid var(--color-ink); }
.brutal-border-t { border-top: 2px solid var(--color-ink); }
.brutal-border-b { border-bottom: 2px solid var(--color-ink); }
.brutal-border-ink { border-color: var(--color-ink) !important; }

.btn-brutal { transition: all 0.1s ease; }
.btn-brutal:hover { transform: translate(2px, 2px); box-shadow: 2px 2px 0px 0px var(--color-shadow) !important; }
.btn-brutal:active { transform: translate(4px, 4px); box-shadow: 0px 0px 0px 0px transparent !important; }

.reveal { opacity: 0; transform: translateY(30px); transition: all 0.8s cubic-bezier(0.16, 1, 0.3, 1); }
.reveal.active { opacity: 1; transform: translateY(0); }

.typewriter { overflow: hidden; border-right: .15em solid #ff5e00; white-space: nowrap; margin: 0 auto; letter-spacing: .15em; animation: typing 3.5s steps(40, end), blink-caret .75s step-end infinite; }
@media (max-width: 768px) { .typewriter { letter-spacing: 0.05em; } }
@keyframes typing { from { width: 0 } to { width: 100% } }
@keyframes blink-caret { from, to { border-color: transparent } 50% { border-color: #ff5e00; } }

.grid-bg { background-image: radial-gradient(#111 0.5px, transparent 0.5px); background-size: 20px 20px; opacity: 0.05; position: fixed; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; z-index: -1; }
.custom-cursor { width: 20px; height: 20px; position: fixed; pointer-events: none; z-index: 99999; margin-left: -10px; margin-top: -10px; transition: transform 0.15s cubic-bezier(0.19, 1, 0.22, 1); display: none; }
@media (min-width: 768px) { .custom-cursor { display: block; } }

.film-grain { position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; pointer-events: none; z-index: 9990; opacity: 0.04; background-image: url('data:image/svg+xml,%3Csvg viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg"%3E%3Cfilter id="noiseFilter"%3E%3CfeTurbulence type="fractalNoise" baseFrequency="0.65" numOctaves="3" stitchTiles="stitch"/%3E%3C/filter%3E%3Crect width="100%25" height="100%25" filter="url(%23noiseFilter)"/%3E%3C/svg%3E'); }

html.theme-hacker { --color-bg: #050505; --color-ink: #00ff41; --color-brand: #008f11; --color-card: #0a140a; --color-tan: #0a140a; --color-shadow: #00ff41; }
html.theme-hacker * { text-shadow: 0 0 2px rgba(0, 255, 65, 0.4); }

html.theme-xray, html.theme-xray body { --color-bg: #000; --color-ink: #0f0; --color-brand: #0f0; --color-card: transparent; --color-tan: transparent; }
html.theme-xray * { border: 1px solid rgba(0, 255, 0, 0.3) !important; background-color: rgba(0, 255, 0, 0.02) !important; color: #0f0 !important; box-shadow: none !important; text-shadow: none !important; border-radius: 0 !important; }
html.theme-xray img { filter: sepia(100%) hue-rotate(90deg) !important; opacity: 0.5 !important; }

html.theme-1998, html.theme-1998 body { --color-bg: #c0c0c0; --color-ink: #000080; --color-brand: #ff0000; --color-card: #c0c0c0; --color-tan: #c0c0c0; font-family: "Comic Sans MS", "Times New Roman", serif !important; }
html.theme-1998 * { font-family: inherit !important; letter-spacing: normal !important; text-transform: none !important; border-radius: 0 !important; }
html.theme-1998 a, html.theme-1998 button { color: #0000ff !important; text-decoration: underline !important; border: 2px outset #ffffff !important; background: #c0c0c0 !important; box-shadow: inset -1px -1px #0a0a0a, inset 1px 1px #dfdfdf, inset -2px -2px grey, inset 2px 2px #fff !important; }
html.theme-1998 h1, html.theme-1998 h2 { color: #ff0000 !important; }

.fall-down { transition: all 1.5s cubic-bezier(0.55, 0.085, 0.68, 0.53) !important; transform: translateY(150vh) rotate(calc(var(--r, 0) * 1deg)) !important; pointer-events: none !important; }
.rgb-glitch-active { animation: rgb-split 0.15s ease-in-out forwards; }
@keyframes rgb-split { 0% { filter: contrast(1.5) hue-rotate(90deg); transform: translate(3px, -3px); } 50% { filter: contrast(1.5) hue-rotate(-90deg); transform: translate(-3px, 3px); } 100% { filter: none; transform: translate(0, 0); } }

.secret-terminal { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0, 0, 0, 0.9); backdrop-filter: blur(5px); z-index: 9999999; display: flex; flex-direction: column; padding: 1.5rem; font-family: 'Space Mono', monospace; color: #00ff41; opacity: 0; pointer-events: none; transition: opacity 0.3s; }
.secret-terminal.open { opacity: 1; pointer-events: auto; }
.secret-terminal input { background: transparent; border: none; outline: none; width: 100%; color: #00ff41; font-family: 'Space Mono', monospace; }

.glitch { position: relative; color: var(--color-ink); display: inline-block; }
.glitch::before, .glitch::after { content: attr(data-text); position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: var(--color-bg); opacity: 0; pointer-events: none; }
.glitch::before { left: 3px; text-shadow: -2px 0 red; clip: rect(24px, 550px, 90px, 0); }
.glitch::after { left: -3px; text-shadow: -2px 0 blue; clip: rect(85px, 550px, 140px, 0); }
.glitch:hover::before { opacity: 1; animation: glitch-anim 0.3s cubic-bezier(.25, .46, .45, .94) both infinite; }
.glitch:hover::after { opacity: 1; animation: glitch-anim-2 0.3s cubic-bezier(.25, .46, .45, .94) both infinite; }

@keyframes glitch-anim { 0% { clip: rect(74px, 9999px, 86px, 0); transform: translate(1px, -1px); } 20% { clip: rect(32px, 9999px, 82px, 0); transform: translate(-1px, 1px); } 40% { clip: rect(4px, 9999px, 46px, 0); transform: translate(1px, -1px); } 60% { clip: rect(54px, 9999px, 12px, 0); transform: translate(-1px, 1px); } 80% { clip: rect(84px, 9999px, 66px, 0); transform: translate(1px, -1px); } 100% { clip: rect(44px, 9999px, 36px, 0); transform: translate(-1px, 1px); } }
@keyframes glitch-anim-2 { 0% { clip: rect(54px, 9999px, 7px, 0); transform: translate(-1px, 1px); } 20% { clip: rect(24px, 9999px, 37px, 0); transform: translate(1px, -1px); } 40% { clip: rect(81px, 9999px, 51px, 0); transform: translate(-1px, 1px); } 60% { clip: rect(12px, 9999px, 2px, 0); transform: translate(1px, -1px); } 80% { clip: rect(94px, 9999px, 99px, 0); transform: translate(-1px, 1px); } 100% { clip: rect(24px, 9999px, 13px, 0); transform: translate(1px, -1px); } }

.marquee-container { width: 100%; overflow: hidden; white-space: nowrap; background: #ff5e00; color: #fff; padding: 0.5rem 0; display: flex; }
.marquee { display: inline-block; white-space: nowrap; padding-left: 100%; animation: marquee 20s linear infinite; }
@keyframes marquee { 0% { transform: translate(0, 0); } 100% { transform: translate(-100%, 0); } }

.palette-backdrop { position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; background: rgba(0, 0, 0, 0.4); backdrop-filter: blur(4px); z-index: 99999; display: flex; justify-content: center; align-items: flex-start; padding-top: 15vh; opacity: 0; pointer-events: none; transition: opacity 0.2s ease; }
.palette-backdrop.open { opacity: 1; pointer-events: auto; }
.palette-modal { width: 90%; max-width: 600px; }

@keyframes hack-spin { 0% { transform: rotate(0) scale(1); filter: invert(0); } 50% { transform: rotate(180deg) scale(0.5); filter: invert(1) hue-rotate(90deg); } 100% { transform: rotate(360deg) scale(1); filter: invert(0); } }
.hack-active { animation: hack-spin 1.5s cubic-bezier(0.68, -0.55, 0.27, 1.55); }
.hack-overlay { position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; background: #ff5e00; color: white; opacity: 0; pointer-events: none; z-index: 100000; display: flex; align-items: center; justify-content: center; font-size: 4rem; font-family: 'Space Grotesk', sans-serif; text-transform: uppercase; font-weight: bold; transition: opacity 0.2s; mix-blend-mode: difference; }
.hack-active .hack-overlay { opacity: 1; animation: blink 0.1s infinite; }
@keyframes blink { 0% { opacity: 1; } 50% { opacity: 0; } 100% { opacity: 1; } }

.crt-overlay { position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; z-index: 9999999; pointer-events: none; opacity: 0; mix-blend-mode: exclusion; }
.crt-active { animation: crt-flash 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards; }
@keyframes crt-flash { 0% { opacity: 0; background: transparent; transform: scale(1); } 20% { opacity: 1; background: repeating-linear-gradient(0deg, var(--color-ink) 0px, var(--color-bg) 5px); transform: scaleY(0.02) scaleX(1.1); filter: invert(1) hue-rotate(90deg); } 40% { opacity: 0.9; background: var(--color-brand); transform: scaleY(1) scaleX(1) skewX(20deg); filter: invert(0); box-shadow: inset 0 0 100px #000; } 60% { opacity: 0.5; background: repeating-linear-gradient(90deg, var(--color-ink) 0px, transparent 2px); transform: skewX(-10deg); } 100% { opacity: 0; background: transparent; transform: scale(1) skewX(0); } }

.preloader { position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; background: #050505; color: var(--color-brand); font-family: 'Space Mono', monospace; z-index: 10000000; padding: 2rem; display: flex; flex-direction: column; justify-content: flex-end; }
.preloader p { margin: 0.3rem 0; text-shadow: 0 0 4px rgba(255, 100, 0, 0.4); font-size: 0.8rem; }
@media (min-width: 768px) { .preloader p { font-size: 1.1rem; } }

.bg-text-marquee { position: absolute; top: 15%; left: 0; white-space: nowrap; font-size: 4rem; font-family: 'Space Grotesk', sans-serif; font-weight: 800; color: transparent; -webkit-text-stroke: 2px var(--color-ink); opacity: 0.04; pointer-events: none; z-index: -1; animation: bg-marquee 60s linear infinite; }
@media (min-width: 768px) { .bg-text-marquee { font-size: 10rem; top: 10%; } }
@media (min-width: 1024px) { .bg-text-marquee { font-size: 18rem; } }
@keyframes bg-marquee { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } }

.tilt-card {
  transition: transform 0.15s cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 0.15s ease-out;
  transform-style: preserve-3d;
  background-color: var(--color-card);
}

.hover-orange:hover {
  background-color: var(--color-brand) !important;
  color: white !important;
  border-color: var(--color-ink) !important;
}
.hover-orange:hover * {
  color: white !important;
}

/* Primary CTA button — turuncu varsayılan, hover'da siyah arka plan, beyaz metin */
.btn-primary {
  background-color: var(--color-brand) !important;
  color: #ffffff !important;
  transition: background-color 0.1s ease, color 0.1s ease;
}
.btn-primary:hover {
  background-color: #111111 !important;
  color: #ffffff !important;
}