/*
Theme Name: KerasusWEB
Theme URI: https://kerasusweb.com/
Author: Gemini
Author URI: https://gemini.google.com/
Description: KerasusWEB v13.5 için hazırlanmış özel siberpunk WordPress teması. Tüm içerik admin panelinden yönetilebilir.
Version: 1.2
Requires at least: 5.8
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: kerasusweb
Tags: custom-background, custom-logo, custom-menu, post-formats, threaded-comments, translation-ready
*/

/* ==========================================================================
CYBERPUNK THEME & VARIABLE DEFINITIONS
==========================================================================
*/
:root {
    --primary-cyber-magenta: #FF00FF;
    --primary-cyber-magenta-rgb: 255, 0, 255;
    --secondary-cyber-cyan: #00FFFF;
    --secondary-cyber-cyan-rgb: 0, 255, 255;
    --bg-deep-space: #0A0A1E;
    --bg-void: #050510;
    --text-neon-white: #F0F0FF;
    --text-glitch-gray: #A0A0B0;
    --border-cyber: rgba(0, 255, 255, 0.3);
    --scan-line-color: rgba(0, 255, 255, 0.1);
    --modal-bg: rgba(10, 10, 30, 0.95);
}

/* ==========================================================================
BASE STYLES
==========================================================================
*/
html { scroll-behavior: smooth; }
body {
    font-family: 'Rajdhani', sans-serif;
    background-color: var(--bg-deep-space);
    color: var(--text-neon-white);
    overflow-x: hidden;
}

.font-tech-mono {
    font-family: 'Share Tech Mono', monospace;
}

/* ==========================================================================
WORDPRESS CORE STYLES
==========================================================================
*/
.aligncenter { display: block; margin-left: auto; margin-right: auto; }
.alignleft { float: left; margin-right: 1.5em; }
.alignright { float: right; margin-left: 1.5em; }
.screen-reader-text { border: 0; clip: rect(1px, 1px, 1px, 1px); clip-path: inset(50%); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute !important; width: 1px; word-wrap: normal !important; }
.prose { max-width: 65ch; } /* Basic prose styling for content from WP editor */
.prose a { color: var(--secondary-cyber-cyan); text-decoration: underline; }
.prose h1, .prose h2, .prose h3, .prose h4, .prose h5, .prose h6 { color: var(--text-neon-white); }
.max-w-none { max-width: none; }


/* ==========================================================================
PRELOADER STYLES
==========================================================================
*/
.preloader { position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 9999; display: flex; align-items: center; justify-content: center; overflow: hidden; }
.preloader-panel { width: 50.5%; height: 100%; background-color: var(--bg-void); position: absolute; transition: transform 0.9s cubic-bezier(0.68, -0.6, 0.265, 1.55); z-index: 1; }
.preloader-panel-left { left: 0; transform-origin: left; clip-path: polygon(0 0, 100% 0, 100% 8%, calc(100% - 4vw) 18%, 100% 28%, calc(100% - 2.5vw) 38%, 100% 48%, calc(100% - 5vw) 58%, 100% 68%, calc(100% - 1.5vw) 78%, 100% 88%, calc(100% - 3vw) 98%, 100% 100%, 0 100%); }
.preloader-panel-right { right: 0; transform-origin: right; clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%, 0 98%, 3vw 88%, 0 78%, 1.5vw 68%, 0 58%, 5vw 48%, 0 38%, 2.5vw 28%, 0 18%, 4vw 8%); }
.preloader-text { font-family: 'Share Tech Mono', monospace; font-size: 2rem; color: var(--primary-cyber-magenta); text-transform: uppercase; letter-spacing: 2px; position: relative; z-index: 3; opacity: 1; transition: opacity 0.5s ease-out 0.5s; text-shadow: 0 0 10px var(--primary-cyber-magenta), 0 0 20px var(--secondary-cyber-cyan); }
.preloader-text::after { content: '_'; animation: blinkCursor 0.7s infinite; }
@keyframes blinkCursor { 0%, 100% { opacity: 1; } 50% { opacity: 0; } }
.preloader::before { content: ''; position: absolute; left: 50%; top: 0; width: 3px; height: 100%; background: linear-gradient(transparent, rgba(var(--primary-cyber-magenta-rgb), 0.9) 10%, rgba(var(--secondary-cyber-cyan-rgb), 0.9) 50%, rgba(var(--primary-cyber-magenta-rgb), 0.9) 90%, transparent); box-shadow: 0 0 8px rgba(var(--primary-cyber-magenta-rgb), 0.8), 0 0 15px rgba(var(--secondary-cyber-cyan-rgb), 0.8); transform: translateX(-50%); z-index: 2; opacity: 0; animation: crackAppear 0.4s ease-out 0.7s forwards, crackle 0.15s linear infinite alternate; animation-delay: 0.7s, 1.1s; }
@keyframes crackAppear { to { opacity: 1; } }
@keyframes crackle { 0% { filter: brightness(1.1) saturate(1.1); transform: translateX(-50%) scaleY(1.01) skewX(-0.5deg); } 50% { filter: brightness(1.8) saturate(1.5); transform: translateX(-50%) scaleY(1) skewX(0.5deg); } 100% { filter: brightness(1.1) saturate(1.1); transform: translateX(-50%) scaleY(1.01) skewX(-0.5deg); } }
.preloader.loaded .preloader-panel-left { transform: translateX(-101%) rotate(-3deg); }
.preloader.loaded .preloader-panel-right { transform: translateX(101%) rotate(3deg); }
.preloader.loaded .preloader-text { opacity: 0; transition-delay: 0s; }
.preloader.loaded .preloader::before { animation: crackFadeOut 0.3s ease-out forwards; }
@keyframes crackFadeOut { to { opacity: 0; transform: translateX(-50%) scale(1.8); } }
.preloader.hidden { display: none; }

/* ==========================================================================
HEADER & NAVIGATION
==========================================================================
*/
.header-v10 { background-color: rgba(5, 5, 16, 0.75); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-bottom: 1px solid var(--border-cyber); position: sticky; top: 0; z-index: 100; transition: top 0.3s; }
.header-hidden { top: -100px; }
.header-v10 .menu { display: flex; space-x-8; align-items: center; }
.header-v10 .menu-item a { font-family: 'Share Tech Mono', monospace; font-size: 0.875rem; color: #d1d5db; transition: color 0.3s; letter-spacing: 0.05em; }
.header-v10 .menu-item a:hover { color: var(--primary-cyber-magenta); }
.header-v10 .custom-logo { max-height: 40px; width: auto; }
.header-v10 .custom-logo-link .site-title { font-family: 'Share Tech Mono', monospace; font-size: 1.875rem; line-height: 2.25rem; color: white; }
.header-v10 .custom-logo-link .site-title .highlight-magenta { color: var(--primary-cyber-magenta); }
.header-v10 .custom-logo-link .site-title .highlight-cyan { color: var(--secondary-cyber-cyan); }
.social-icons-header a svg { transition: color 0.3s, transform 0.3s; }
.social-icons-header a:hover svg { color: var(--secondary-cyber-cyan); transform: scale(1.2); }
#mobile-menu .menu { display: block; }
#mobile-menu .menu-item a { display: block; font-family: 'Share Tech Mono', monospace; padding: 0.75rem 1.5rem; color: #d1d5db; }
#mobile-menu .menu-item a:hover { background-color: var(--primary-cyber-magenta); color: black; }

/* ==========================================================================
HERO & BACKGROUND EFFECTS
==========================================================================
*/
.hero-v10 { min-height: 100vh; display: flex; align-items: center; justify-content: center; position: relative; overflow: hidden; background: radial-gradient(ellipse at center, rgba(var(--primary-cyber-magenta-rgb), 0.1) 0%, transparent 60%), linear-gradient(170deg, var(--bg-deep-space) 40%, var(--bg-void) 100%); }
.digital-rain-container { position: absolute; top: 0; left: 0; width: 100%; height: 100%; overflow: hidden; z-index: 0; pointer-events: none; }
.rain-char { position: absolute; font-family: 'Share Tech Mono', monospace; color: rgba(var(--secondary-cyber-cyan-rgb), 0.3); animation: fall linear infinite; user-select: none; }
@keyframes fall { to { transform: translateY(105vh); opacity: 0; } }
#hero-canvas { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; opacity: 0.5; }
.hero-content-v10 { position: relative; z-index: 1; text-align: center; padding: 0 1.5rem; }
.hero-title-glitch { font-family: 'Share Tech Mono', monospace; font-size: clamp(2.8rem, 12vw, 6rem); color: var(--text-neon-white); text-transform: uppercase; position: relative; animation: mainGlitch 3s linear infinite; }
.hero-title-glitch span { display: block; }
.hero-title-glitch::before, .hero-title-glitch::after { content: attr(data-text); position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: var(--bg-deep-space); overflow: hidden; clip-path: inset(50% 0 50% 0); }
.hero-title-glitch::before { left: -3px; text-shadow: 3px 0 var(--primary-cyber-magenta); animation: glitchSkewBefore 4s linear infinite alternate-reverse; }
.hero-title-glitch::after { left: 3px; text-shadow: -3px 0 var(--secondary-cyber-cyan); animation: glitchSkewAfter 4s linear infinite alternate-reverse; }
@keyframes mainGlitch { 0%, 100% { transform: skewX(0deg); } 5% { transform: skewX(1.5deg); } 10% { transform: skewX(-1.5deg); } 15%, 100% { transform: skewX(0deg); } }
@keyframes glitchSkewBefore { 0% { clip-path: inset(80% 0 10% 0); transform: skewX(10deg); } 10% { clip-path: inset(10% 0 75% 0); transform: skewX(-5deg); } 30% { clip-path: inset(40% 0 40% 0); transform: skewX(0deg); } 50% { clip-path: inset(90% 0 5% 0); transform: skewX(8deg); } 70% { clip-path: inset(20% 0 60% 0); transform: skewX(-10deg); } 100% { clip-path: inset(40% 0 40% 0); transform: skewX(0deg); } }
@keyframes glitchSkewAfter { 0% { clip-path: inset(15% 0 70% 0); transform: skewX(-8deg); } 10% { clip-path: inset(70% 0 5% 0); transform: skewX(6deg); } 30% { clip-path: inset(55% 0 25% 0); transform: skewX(0deg); } 50% { clip-path: inset(5% 0 90% 0); transform: skewX(-7deg); } 70% { clip-path: inset(65% 0 15% 0); transform: skewX(9deg); } 100% { clip-path: inset(55% 0 25% 0); transform: skewX(0deg); } }
.typing-cursor { display: inline-block; width: 10px; height: 1.2rem; background-color: var(--secondary-cyber-cyan); animation: blink 0.8s infinite; margin-left: 4px; }
@keyframes blink { 50% { opacity: 0; } }
.scroll-down-indicator { position: absolute; bottom: 2rem; left: 50%; transform: translateX(-50%); z-index: 5; width: 24px; height: 40px; border: 2px solid var(--secondary-cyber-cyan); border-radius: 20px; }
.scroll-down-indicator::before { content: ''; position: absolute; top: 6px; left: 50%; transform: translateX(-50%); width: 4px; height: 8px; background-color: var(--secondary-cyber-cyan); border-radius: 2px; animation: scroll-anim 2s infinite; }
@keyframes scroll-anim { 0% { transform: translate(-50%, 0); opacity: 1; } 50% { transform: translate(-50%, 15px); opacity: 0; } 100% { transform: translate(-50%, 0); opacity: 1; } }

/* ==========================================================================
General Component & Section Styles
==========================================================================
*/
.btn-cyberpunk { font-family: 'Share Tech Mono', monospace; clip-path: polygon(0 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%); background-color: transparent; border: 2px solid var(--primary-cyber-magenta); color: var(--primary-cyber-magenta); padding: 12px 28px; text-transform: uppercase; position: relative; overflow: hidden; transition: color 0.4s, text-shadow 0.4s; z-index: 1; }
.btn-cyberpunk::before { content: ''; position: absolute; top: 0; left: -100%; width: 100%; height: 100%; background: var(--primary-cyber-magenta); transition: left 0.4s ease-in-out; z-index: -1; }
.btn-cyberpunk:hover { color: var(--bg-deep-space); text-shadow: 0 0 5px var(--bg-deep-space); }
.btn-cyberpunk:hover::before { left: 0; }
.btn-cyberpunk.secondary { border-color: var(--secondary-cyber-cyan); color: var(--secondary-cyber-cyan); }
.btn-cyberpunk.secondary::before { background-color: var(--secondary-cyber-cyan); }
.btn-cyberpunk.secondary:hover { color: var(--bg-deep-space); }
.btn-cyberpunk:disabled { cursor: not-allowed; filter: grayscale(0.8); border-color: var(--text-glitch-gray); color: var(--text-glitch-gray); pointer-events: none; }

.cyber-card { background-color: rgba(10, 10, 30, 0.6); border: 1px solid var(--border-cyber); padding: 2rem; position: relative; overflow: hidden; transition: transform 0.3s ease, box-shadow 0.3s ease; clip-path: polygon(0 15px, 15px 0, 100% 0, 100% calc(100% - 15px), calc(100% - 15px) 100%, 0 100%); display: flex; flex-direction: column; height: 100%; }
.cyber-card::after { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: repeating-linear-gradient(0deg, var(--scan-line-color), var(--scan-line-color) 1px, transparent 1px, transparent 4px); animation: scan 4s linear infinite; opacity: 0; transition: opacity 0.4s; pointer-events: none; }
@keyframes scan { to { background-position-y: -100px; } }
.cyber-card:hover { transform: translateY(-10px); box-shadow: 0 0 25px rgba(var(--secondary-cyber-cyan-rgb), 0.3), 0 0 35px rgba(var(--primary-cyber-magenta-rgb), 0.2); }
.cyber-card:hover::after { opacity: 1; }
.cyber-card .card-content { flex-grow: 1; }
.cyber-card .icon-slot { width: 50px; height: 50px; border: 2px solid var(--primary-cyber-magenta); display: flex; align-items: center; justify-content: center; margin-bottom: 1rem; color: var(--primary-cyber-magenta); clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%); transition: background-color 0.3s, color 0.3s; }
.cyber-card:hover .icon-slot { background-color: var(--primary-cyber-magenta); color: var(--bg-deep-space); }

.section-v10 { padding: 6rem 1.5rem; position: relative; overflow: hidden; }
.section-v10.bg-darker { background-color: var(--bg-void); }
.section-title-v10 { font-family: 'Share Tech Mono', monospace; font-size: 2.5rem; }
.reveal-on-scroll { opacity: 0; filter: blur(5px); transform: translateY(40px); transition: opacity 0.7s ease-out, transform 0.7s ease-out, filter 0.7s ease-out; transition-delay: var(--reveal-delay, 0s); }
.reveal-on-scroll.visible { opacity: 1; filter: blur(0); transform: translateY(0); }

/* ==========================================================================
PROJECTS & MODAL
==========================================================================
*/
.project-card-container { perspective: 1500px; }
.project-card { width: 100%; height: 250px; position: relative; transform-style: preserve-3d; transition: transform 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.275); cursor: pointer; }
.project-card-container:hover .project-card { transform: rotateY(180deg); }
.project-card-face { position: absolute; width: 100%; height: 100%; backface-visibility: hidden; -webkit-backface-visibility: hidden; overflow: hidden; border: 1px solid var(--border-cyber); }
.project-card-front { background-color: var(--bg-void); }
.project-card-front img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.4s; }
.project-card-container:hover .project-card-front img { transform: scale(1.1); filter: saturate(1.2); }
.project-card-overlay { position: absolute; bottom: 0; left: 0; right: 0; background: linear-gradient(to top, rgba(5,5,16,0.95) 20%, transparent 100%); padding: 1rem; }
.project-card-back { background: linear-gradient(135deg, var(--bg-void) 0%, #1a1a3d 100%); transform: rotateY(180deg); display: flex; flex-direction: column; justify-content: center; align-items: center; padding: 1.5rem; text-align: center; }
.project-card-back .tech-stack { font-family: 'Share Tech Mono', monospace; font-size: 0.75rem; color: var(--secondary-cyber-cyan); margin-top: 1rem; letter-spacing: 1px; }

.modal-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(5, 5, 16, 0.85); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); display: none; align-items: center; justify-content: center; z-index: 200; opacity: 0; transition: opacity 0.3s ease-in-out; }
.modal-overlay.active { display: flex; opacity: 1; }
.modal-container { background-color: var(--modal-bg); border: 2px solid var(--border-cyber); padding: 2rem; width: 90%; max-width: 900px; max-height: 90vh; overflow-y: auto; position: relative; clip-path: polygon(0 15px, 15px 0, calc(100% - 15px) 0, 100% 15px, 100% calc(100% - 15px), calc(100% - 15px) 100%, 15px 100%, 0 calc(100% - 15px)); box-shadow: 0 0 30px rgba(var(--primary-cyber-magenta-rgb), 0.3), 0 0 40px rgba(var(--secondary-cyber-cyan-rgb), 0.2); transform: scale(0.95); transition: transform 0.3s ease-in-out; }
.modal-overlay.active .modal-container { transform: scale(1); }
.modal-close-btn { position: absolute; top: 1rem; right: 1rem; background: transparent; border: 1px solid var(--primary-cyber-magenta); color: var(--primary-cyber-magenta); font-family: 'Share Tech Mono', monospace; font-size: 1.2rem; padding: 0.3rem 0.7rem; cursor: pointer; transition: background-color 0.3s, color 0.3s; z-index: 10; }
.modal-close-btn:hover { background-color: var(--primary-cyber-magenta); color: var(--bg-deep-space); }
.modal-title { font-family: 'Share Tech Mono', monospace; font-size: 2rem; color: var(--primary-cyber-magenta); text-transform: uppercase; margin-bottom: 1rem; border-bottom: 1px dashed var(--border-cyber); padding-bottom: 0.5rem; }
.gallery-slider { position: relative; width: 100%; overflow: hidden; }
.slider-wrapper { display: flex; transition: transform 0.5s ease-in-out; }
.slide { min-width: 100%; box-sizing: border-box; }
.slide img, .slide video { width: 100%; max-height: 450px; object-fit: contain; display: block; background-color: rgba(var(--secondary-cyber-cyan-rgb), 0.05); }
.slider-nav { position: absolute; top: 50%; transform: translateY(-50%); width: 100%; display: flex; justify-content: space-between; padding: 0 1rem; pointer-events: none; }
.slider-nav button { pointer-events: all; background-color: rgba(10, 10, 30, 0.5); border: 1px solid var(--border-cyber); color: var(--secondary-cyber-cyan); padding: 0.5rem; transition: background-color 0.3s; }
.slider-nav button:hover { background-color: var(--secondary-cyber-cyan); color: var(--bg-void); }
.modal-footer { border-top: 1px dashed var(--border-cyber); margin-top: 1.5rem; padding-top: 1rem; display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.modal-share-buttons { display: flex; align-items: center; gap: 0.5rem; }
.modal-share-btn { display: flex; align-items: center; gap: 0.5rem; background-color: transparent; border: 1px solid var(--border-cyber); padding: 0.5rem 1rem; color: var(--text-glitch-gray); transition: color 0.3s, border-color 0.3s; }
.modal-share-btn:hover { color: var(--primary-cyber-magenta); border-color: var(--primary-cyber-magenta); }
.modal-share-btn svg { width: 1rem; height: 1rem; }
.demo-modal-content { width: 90%; height: 90%; display: flex; flex-direction: column; background-color: var(--bg-void); border: 1px solid var(--border-cyber); }
.demo-modal-header { padding: 0.5rem 1rem; background-color: var(--bg-void); border-bottom: 1px solid var(--border-cyber); display: flex; justify-content: flex-end; align-items: center; flex-shrink: 0; }
.demo-modal-header button { background: transparent; border: 1px solid var(--primary-cyber-magenta); color: var(--primary-cyber-magenta); font-family: 'Share Tech Mono', monospace; font-size: 1rem; padding: 0.3rem 0.7rem; cursor: pointer; transition: background-color 0.3s, color 0.3s; }
.demo-modal-header button:hover { background-color: var(--primary-cyber-magenta); color: var(--bg-deep-space); }
#demoModal iframe { width: 100%; height: 100%; border: none; }

/* ==========================================================================
AI CHAT WIDGET
==========================================================================
*/
.ai-chat-launcher { position: fixed; bottom: 2rem; right: 2rem; z-index: 150; width: 60px; height: 60px; background: var(--primary-cyber-magenta); border-radius: 50%; display: flex; align-items: center; justify-content: center; cursor: pointer; transition: transform 0.3s, box-shadow 0.3s; box-shadow: 0 0 20px rgba(var(--primary-cyber-magenta-rgb), 0.7); }
.ai-chat-launcher:hover { transform: scale(1.1); }
.ai-chat-launcher svg { transition: transform 0.5s; }
.ai-chat-launcher.open svg { transform: rotate(90deg); }
.ai-chat-window { position: fixed; bottom: 6.5rem; right: 2rem; z-index: 140; width: 90vw; max-width: 400px; height: 70vh; max-height: 500px; background-color: var(--modal-bg); border: 1px solid var(--border-cyber); clip-path: polygon(0 15px, 15px 0, 100% 0, 100% 100%, 0 100%); display: flex; flex-direction: column; transform: translateY(20px) scale(0.95); opacity: 0; pointer-events: none; transition: transform 0.3s ease, opacity 0.3s ease; }
.ai-chat-window.open { transform: translateY(0) scale(1); opacity: 1; pointer-events: auto; }
.ai-chat-header { padding: 0.75rem 1rem; border-bottom: 1px solid var(--border-cyber); display: flex; justify-content: space-between; align-items: center; flex-shrink: 0; }
#ai-chat-output { overflow-y: auto; flex-grow: 1; padding: 1rem; white-space: pre-wrap; }
.processing-animation span { animation: pulse 1.5s infinite; display: inline-block; }
@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.5; } }

/* ==========================================================================
   CONTACT FORM 7 - KERASUSWEB THEME STYLES
   ========================================================================== */
.wpcf7-form .space-y-6 > * + * { margin-top: 1.5rem; }
.wpcf7-form-control.wpcf7-text, .wpcf7-form-control.wpcf7-email, .wpcf7-form-control.wpcf7-textarea { background-color: transparent !important; font-family: 'Share Tech Mono', monospace !important; color: var(--text-neon-white) !important; border: 1px solid var(--border-cyber) !important; padding: 0.75rem !important; width: 100% !important; transition: border-color 0.3s ease-in-out !important; outline: none !important; box-shadow: none !important; border-radius: 0 !important; }
.wpcf7-form-control::placeholder { color: var(--text-glitch-gray); opacity: 1; }
.wpcf7-form-control.wpcf7-text:focus, .wpcf7-form-control.wpcf7-email:focus, .wpcf7-form-control.wpcf7-textarea:focus { border-color: var(--primary-cyber-magenta) !important; }
.wpcf7-form-control.wpcf7-submit.btn-cyberpunk { font-family: 'Share Tech Mono', monospace !important; clip-path: polygon(0 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%); background-color: transparent !important; text-transform: uppercase !important; position: relative; overflow: hidden; transition: color 0.4s, text-shadow 0.4s; z-index: 1; cursor: pointer; display: inline-block !important; border-radius: 0 !important; }
.wpcf7-form-control.wpcf7-submit.btn-cyberpunk.secondary { border: 2px solid var(--secondary-cyber-cyan) !important; color: var(--secondary-cyber-cyan) !important; }
.wpcf7-form-control.wpcf7-submit.btn-cyberpunk.secondary::before { content: ''; position: absolute; top: 0; left: -100%; width: 100%; height: 100%; background: var(--secondary-cyber-cyan); transition: left 0.4s ease-in-out; z-index: -1; }
.wpcf7-form-control.wpcf7-submit.btn-cyberpunk.secondary:hover { color: var(--bg-deep-space) !important; text-shadow: 0 0 5px var(--bg-deep-space); }
.wpcf7-form-control.wpcf7-submit.btn-cyberpunk.secondary:hover::before { left: 0; }
.wpcf7-response-output { font-family: 'Share Tech Mono', monospace; padding: 1.5rem !important; margin: 2rem 0 0 0 !important; border-width: 1px !important; border-style: solid; clip-path: polygon(0 15px, 15px 0, 100% 0, 100% 100%, 0 100%); }
.wpcf7-mail-sent-ok { border-color: var(--secondary-cyber-cyan) !important; background-color: rgba(var(--secondary-cyan-rgb), 0.1) !important; color: var(--secondary-cyan) !important; }
.wpcf7-validation-errors, .wpcf7-spam-blocked, .wpcf7-mail-sent-ng { border-color: var(--primary-cyber-magenta) !important; background-color: rgba(var(--primary-cyber-magenta-rgb), 0.1) !important; color: var(--primary-cyber-magenta) !important; }
span.wpcf7-not-valid-tip { font-family: 'Share Tech Mono', monospace !important; color: var(--primary-cyber-magenta) !important; font-size: 0.8rem !important; margin-top: 0.25rem; }
.wpcf7-not-valid { border-color: var(--primary-cyber-magenta) !important; }

/* ==========================================================================
   SINGLE POST & COMMENTS STYLES
   ========================================================================== */
.entry-title {
    font-size: clamp(2rem, 8vw, 3.5rem);
    text-shadow: 0 0 15px rgba(var(--primary-cyber-magenta-rgb), 0.5);
}

.entry-meta .meta-item {
    display: inline-block;
    margin: 0 1rem;
}

.prose-cyber p { margin-bottom: 1.5em; line-height: 1.7; }
.prose-cyber a { color: var(--secondary-cyber-cyan); text-decoration: underline; transition: color 0.3s; }
.prose-cyber a:hover { color: var(--primary-cyber-magenta); }
.prose-cyber strong, .prose-cyber b { color: var(--text-neon-white); }
.prose-cyber blockquote { border-left: 2px solid var(--primary-cyber-magenta); padding-left: 1em; margin-left: 0; color: var(--text-glitch-gray); font-style: italic; }
.prose-cyber ul, .prose-cyber ol { padding-left: 1.5em; }
.prose-cyber li::marker { color: var(--secondary-cyber-cyan); }
.prose-cyber img { border: 1px solid var(--border-cyber); }

.clip-path-cyber-small {
    clip-path: polygon(0 10px, 10px 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%);
}

/* Comments Area */
.comments-area {
    background: rgba(var(--bg-void-rgb), 0.5);
    padding: 2rem;
    clip-path: polygon(0 15px, 15px 0, 100% 0, 100% calc(100% - 15px), calc(100% - 15px) 100%, 0 100%);
}
.comment-list {
    list-style: none;
    padding: 0;
}
.comment-body .avatar {
    border-radius: 0;
    clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
}

/* Comment Form */
#commentform input[type="text"],
#commentform input[type="email"],
#commentform input[type="url"],
#commentform textarea {
    background-color: transparent !important;
    font-family: 'Share Tech Mono', monospace !important;
    color: var(--text-neon-white) !important;
    border: 1px solid var(--border-cyber) !important;
    padding: 0.75rem !important;
    width: 100% !important;
    transition: border-color 0.3s ease-in-out !important;
    outline: none !important;
    box-shadow: none !important;
}
#commentform input:focus,
#commentform textarea:focus {
    border-color: var(--primary-cyber-magenta) !important;
}
#commentform .form-submit input.submit {
    width: auto;
    padding: 12px 28px;
    display: inline-block;
}
#commentform .logged-in-as,
#commentform .comment-notes {
    font-family: 'Share Tech Mono', monospace;
    font-size: 0.8rem;
    color: var(--text-glitch-gray);
}
#commentform .logged-in-as a,
#commentform .comment-notes a {
    color: var(--secondary-cyber-cyan);
}