/* =========================================================================
MARKA DESTEK - KURUMSAL VE YÜKSEK PERFORMANS STİL SAYFASI (style.css)
========================================================================= */

:root {
--brand-red: #f70004;
--brand-red-hover: #d60003;
--brand-red-glow: rgba(247, 0, 4, 0.45);
--bg-deep: #000000;
--bg-surface: rgba(18, 18, 22, 0.7);
--border-subtle: rgba(255, 255, 255, 0.08);
--border-hover: rgba(247, 0, 4, 0.5);
--text-main: #f3f4f6;
--text-muted: #9ca3af;
}

{
box-sizing: border-box;
margin: 0;
padding: 0;
}

html {
scroll-behavior: smooth;
color-scheme: dark;
}

body {
font-family: 'Questrial', sans-serif;
background-color: #000000;
color: #e5e5e5;
overflow-x: hidden;
min-height: 100vh;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}

/* Background Canvas & Ambient WebGL Viewport */
#line-waves-canvas {
position: fixed;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
z-index: 0;
pointer-events: none;
opacity: 0.75;
display: block;
}

/* Glassmorphism Header & Footer */
.glass-header {
background: rgba(7, 7, 9, 0.78);
backdrop-filter: blur(18px);
-webkit-backdrop-filter: blur(18px);
border-bottom: 1px solid rgba(255, 255, 255, 0.07);
}

.glass-footer {
background: rgba(5, 5, 7, 0.92);
backdrop-filter: blur(16px);
-webkit-backdrop-filter: blur(16px);
border-top: 1px solid rgba(255, 255, 255, 0.08);
}

/* True Focus Brand Brackets */
.true-focus-wrapper {
position: relative;
display: inline-flex;
align-items: center;
gap: 0.35rem;
padding: 0.25rem 0.6rem;
user-select: none;
}

.true-focus-word {
font-size: 1.25rem;
font-weight: 700;
letter-spacing: -0.02em;
color: #ffffff;
transition: filter 0.38s ease, opacity 0.38s ease, transform 0.38s ease;
display: inline-block;
}

.true-focus-word.is-focused {
filter: blur(0px);
opacity: 1;
transform: translateY(0);
}

.true-focus-word.is-blurred {
filter: blur(2.5px);
opacity: 0.4;
transform: translateY(0);
}

.true-focus-box {
position: absolute;
pointer-events: none;
transition: all 0.35s cubic-bezier(0.2, 0.8, 0.2, 1);
z-index: 20;
}

.corner-bracket {
position: absolute;
width: 8px;
height: 8px;
border-color: #f70004;
border-style: solid;
}

.corner-bracket.tl {
top: 0;
left: 0;
border-width: 2px 0 0 2px;
}

.corner-bracket.tr {
top: 0;
right: 0;
border-width: 2px 2px 0 0;
}

.corner-bracket.bl {
bottom: 0;
left: 0;
border-width: 0 0 2px 2px;
}

.corner-bracket.br {
bottom: 0;
right: 0;
border-width: 0 2px 2px 0;
}

/* Specular Navigation Buttons */
.specular-btn {
position: relative;
display: inline-flex;
align-items: center;
gap: 0.55rem;
padding: 0.55rem 1.15rem;
border-radius: 0.875rem;
background: rgba(22, 22, 26, 0.65);
border: 1px solid rgba(255, 255, 255, 0.09);
color: #a3a3a3;
font-size: 0.8125rem;
font-weight: 600;
text-decoration: none;
overflow: hidden;
transition: all 0.25s ease;
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
}

.specular-btn svg {
width: 1rem;
height: 1rem;
transition: transform 0.2s ease, color 0.2s ease;
flex-shrink: 0;
}

.specular-btn:hover {
color: #ffffff;
border-color: rgba(247, 0, 4, 0.55);
background: rgba(32, 32, 38, 0.85);
box-shadow: 0 8px 24px -6px rgba(247, 0, 4, 0.35);
transform: translateY(-1px);
}

.specular-btn:hover svg {
color: #f70004;
transform: scale(1.08);
}

.specular-btn.is-active {
color: #ffffff;
background: rgba(247, 0, 4, 0.16);
border-color: rgba(247, 0, 4, 0.85);
box-shadow: 0 0 22px rgba(247, 0, 4, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.25);
}

.specular-btn.is-active svg {
color: #f70004;
}

.specular-btn-edge {
position: absolute;
inset: 0;
border-radius: inherit;
pointer-events: none;
}

.specular-btn-glow {
position: absolute;
inset: 0;
background: radial-gradient(circle at 50% 0%, rgba(247, 0, 4, 0.28), transparent 70%);
opacity: 0;
transition: opacity 0.3s ease;
pointer-events: none;
}

.specular-btn:hover .specular-btn-glow {
opacity: 1;
}

/* 3D Tilted Hero Carousel */
.tilted-hero-viewport {
perspective: 1400px;
perspective-origin: 50% 50%;
overflow: hidden;
mask-image: linear-gradient(to right, transparent 0%, black 5%, black 95%, transparent 100%);
-webkit-mask-image: linear-gradient(to right, transparent 0%, black 5%, black 95%, transparent 100%);
padding: 2.75rem 0;
touch-action: pan-y;
width: 100%;
}

.tilted-hero-track {
display: flex;
gap: 1.5rem;
width: max-content;
transform-style: preserve-3d;
will-change: transform;
cursor: grab;
user-select: none;
}

@media (min-width: 768px) {
.tilted-hero-track {
gap: 2rem;
}
}

.tilted-hero-track.is-dragging {
cursor: grabbing;
}

.tilted-card {
width: 230px;
height: 340px;
flex-shrink: 0;
border-radius: 22px;
overflow: hidden;
border: 1px solid rgba(255, 255, 255, 0.12);
box-shadow: 0 20px 45px rgba(0, 0, 0, 0.7), inset 0 1px 0 rgba(255, 255, 255, 0.2);
transition: border-color 0.3s ease, box-shadow 0.3s ease;
will-change: transform, opacity;
transform-style: preserve-3d;
background: #111114;
position: relative;
}

@media (min-width: 768px) {
.tilted-card {
width: 290px;
height: 430px;
}
}

@media (min-width: 1536px) {
.tilted-card {
width: 310px;
height: 450px;
}
}

/* Infinite Marquee Tickers */
.marquee-container {
width: 100%;
overflow: hidden;
position: relative;
}

.marquee-track-left,
.marquee-track-right {
display: flex;
gap: 1.25rem;
width: max-content;
will-change: transform;
}

.marquee-track-left {
animation: marquee-scroll-left 48s linear infinite;
}

.marquee-track-right {
animation: marquee-scroll-right 48s linear infinite;
}

.marquee-container:hover .marquee-track-left,
.marquee-container:hover .marquee-track-right {
animation-play-state: paused;
}

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

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

/* Client Reference Badges */
.ref-badge {
display: inline-flex;
align-items: center;
gap: 0.65rem;
padding: 0.65rem 1.15rem;
border-radius: 9999px;
background: rgba(18, 18, 22, 0.75);
border: 1px solid rgba(255, 255, 255, 0.08);
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
font-size: 0.8125rem;
white-space: nowrap;
transition: all 0.25s ease;
user-select: none;
}

.ref-badge:hover {
border-color: rgba(247, 0, 4, 0.6);
background: rgba(28, 28, 36, 0.95);
transform: translateY(-2px);
box-shadow: 0 8px 20px -4px rgba(247, 0, 4, 0.3);
}

/* Interactive Border Glow Stats */
.border-glow-card {
position: relative;
border-radius: 1.5rem;
background: rgba(14, 14, 18, 0.7);
backdrop-filter: blur(14px);
-webkit-backdrop-filter: blur(14px);
overflow: hidden;
border: 1px solid rgba(255, 255, 255, 0.08);
transition: transform 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}

.border-glow-card:hover {
transform: translateY(-4px);
border-color: rgba(247, 0, 4, 0.45);
box-shadow: 0 20px 40px -15px rgba(247, 0, 4, 0.25);
}

.edge-light {
position: absolute;
inset: 0;
pointer-events: none;
background: radial-gradient(
circle at var(--pointer-x, 50%) var(--pointer-y, 50%),
rgba(247, 0, 4, calc(var(--edge-proximity, 0) * 0.0035)),
transparent 60%
);
opacity: 1;
transition: opacity 0.25s ease;
}

.border-glow-inner {
position: relative;
z-index: 2;
}

/* Project Slider Track */
#apps-slider-track {
cursor: grab;
scroll-behavior: smooth;
}

#apps-slider-track.is-dragging {
cursor: grabbing;
scroll-behavior: auto;
}

.app-card-item {
transition: transform 0.3s cubic-bezier(0.2, 0.8, 0.2, 1), border-color 0.3s ease, box-shadow 0.3s ease;
}

.app-card-item:hover {
transform: translateY(-5px);
box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.85);
}

/* Utility Classes */
.hide-scrollbar {
scrollbar-width: none;
-ms-overflow-style: none;
}

.hide-scrollbar::-webkit-scrollbar {
display: none;
}

.mask-radial {
mask-image: linear-gradient(to right, transparent 0%, black 5%, black 95%, transparent 100%);
-webkit-mask-image: linear-gradient(to right, transparent 0%, black 5%, black 95%, transparent 100%);
}

@media (max-width: 640px) {
.tilted-hero-viewport {
padding: 1.5rem 0;
}
}