/* ==========================================================================
Techmak Studio v3 — AURORA NOIR × GOLDEN COSMOS
Self-hosted typography, 3D orbit vitrine, vinyl stage, 8-language RTL/LTR.
========================================================================== */
@font-face{font-family:'Bricolage Grotesque';src:url('../fonts/bricolage-latin-200_800-normal.woff2') format('woff2');font-weight:200 800;font-style:normal;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Bricolage Grotesque';src:url('../fonts/bricolage-latin-ext-200_800-normal.woff2') format('woff2');font-weight:200 800;font-style:normal;font-display:swap;unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C4,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Instrument Serif';src:url('../fonts/instrument-serif-latin-400-normal.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Instrument Serif';src:url('../fonts/instrument-serif-latin-ext-400-normal.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap;unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C4,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Instrument Serif';src:url('../fonts/instrument-serif-latin-400-italic.woff2') format('woff2');font-weight:400;font-style:italic;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Instrument Serif';src:url('../fonts/instrument-serif-latin-ext-400-italic.woff2') format('woff2');font-weight:400;font-style:italic;font-display:swap;unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C4,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Manrope';src:url('../fonts/manrope-latin-400_800-normal.woff2') format('woff2');font-weight:400 800;font-style:normal;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Manrope';src:url('../fonts/manrope-latin-ext-400_800-normal.woff2') format('woff2');font-weight:400 800;font-style:normal;font-display:swap;unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C4,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Manrope';src:url('../fonts/manrope-cyrillic-400_800-normal.woff2') format('woff2');font-weight:400 800;font-style:normal;font-display:swap;unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:'Space Mono';src:url('../fonts/space-mono-latin-400-normal.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Space Mono';src:url('../fonts/space-mono-latin-ext-400-normal.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap;unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C4,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Space Mono';src:url('../fonts/space-mono-latin-700-normal.woff2') format('woff2');font-weight:700;font-style:normal;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Space Mono';src:url('../fonts/space-mono-latin-ext-700-normal.woff2') format('woff2');font-weight:700;font-style:normal;font-display:swap;unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C4,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Noto Kufi Arabic';src:url('../fonts/noto-kufi-arabic-400_800-normal.woff2') format('woff2');font-weight:400 800;font-style:normal;font-display:swap}
:root {
--bg: #05060d;
--bg-2: #090c1a;
--bg-3: #0f1429;
--panel: rgba(255, 255, 255, 0.045);
--panel-strong: rgba(255, 255, 255, 0.08);
--line: rgba(255, 255, 255, 0.095);
--line-strong: rgba(255, 255, 255, 0.19);
--text: #f3f6ff;
--muted: #a2acc4;
--faint: #6c7793;
--indigo: #6366f1;
--violet: #a855f7;
--cyan: #38bdf8;
--teal: #2dd4bf;
--lime: #c6ff4e;
--gold: #fbbf24;
--coral: #f97316;
--pink: #ec4899;
--display: 'Bricolage Grotesque', 'Segoe UI', system-ui, sans-serif;
--body: 'Manrope', 'Segoe UI', system-ui, sans-serif;
--serif: 'Instrument Serif', Georgia, serif;
--mono: 'Space Mono', Consolas, monospace;
--ease: cubic-bezier(0.22, 0.88, 0.24, 1);
--header-h: 82px;
color-scheme: dark;
}
*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html {
scroll-behavior: smooth;
scroll-padding-top: 96px;
-webkit-text-size-adjust: 100%;
overflow-x: clip;
}
body {
margin: 0;
background: var(--bg);
color: var(--text);
font-family: var(--body);
font-size: 16px;
line-height: 1.62;
overflow-x: clip;
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
}
html[lang="ar"] body {
font-family: 'Noto Kufi Arabic', var(--body);
}
img, video { display: block; max-width: 100%; height: auto; }
button, input { font: inherit; color: inherit; }
button { background: none; border: 0; padding: 0; cursor: pointer; }
a { color: inherit; text-decoration: none; }
h1, h2, h3, h4, p, dl, dd, figure { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
svg { width: 18px; height: 18px; flex: none; display: block; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
:focus-visible { outline: 2px solid var(--cyan); outline-offset: 3px; border-radius: 8px; }
.wrap {
width: min(1320px, calc(100% - 48px));
margin-inline: auto;
}
.section { padding-block: clamp(72px, 8vw, 124px); position: relative; z-index: 2; }
.block { padding-block: clamp(48px, 6vw, 88px); position: relative; z-index: 2; }
/* Scroll progress & subtle ambient backdrop ------------------------------- */
.scroll-progress {
position: fixed;
top: 0;
inset-inline-start: 0;
height: 3px;
width: 100%;
transform: scaleX(0);
transform-origin: left center;
background: linear-gradient(90deg, var(--indigo), var(--cyan), var(--lime));
z-index: 120;
box-shadow: 0 0 14px rgba(56, 189, 248, 0.7);
pointer-events: none;
}
.aurora-backdrop {
position: fixed;
inset: 0;
z-index: 0;
pointer-events: none;
overflow: hidden;
}
.aurora-orb {
position: absolute;
border-radius: 50%;
opacity: 0.42;
}
.orb-1 {
width: 54vw; height: 54vw;
top: -18vw; inset-inline-start: -12vw;
background: radial-gradient(circle, rgba(99, 102, 241, 0.52), transparent 68%);
}
.orb-2 {
width: 48vw; height: 48vw;
bottom: -18vw; inset-inline-end: -10vw;
background: radial-gradient(circle, rgba(45, 212, 191, 0.36), transparent 68%);
}
.orb-3 {
width: 38vw; height: 38vw;
top: 38%; inset-inline-start: 42%;
background: radial-gradient(circle, rgba(168, 85, 247, 0.3), transparent 70%);
}
.cosmos-grid {
position: absolute;
inset: 0;
background-image:
linear-gradient(rgba(255, 255, 255, 0.032) 1px, transparent 1px),
linear-gradient(90deg, rgba(255, 255, 255, 0.032) 1px, transparent 1px);
background-size: 76px 76px;
mask-image: radial-gradient(ellipse 90% 70% at 50% 15%, #000 15%, transparent 80%);
}
.cursor-glow {
position: fixed;
width: 360px; height: 360px;
border-radius: 50%;
pointer-events: none;
z-index: 1;
background: radial-gradient(circle, rgba(99, 102, 241, 0.11), rgba(56, 189, 248, 0.05) 45%, transparent 70%);
transform: translate3d(-680px, -680px, 0);
transition: opacity 0.3s ease;
will-change: transform;
opacity: 0;
}
@media (hover: hover) and (pointer: fine) {
body:hover .cursor-glow { opacity: 1; }
}
.studio-particles {
position: fixed;
inset: 0;
width: 100%;
height: 100%;
z-index: 1;
pointer-events: none;
opacity: 0.72;
}
/* Golden Rising Bubbles (program-oyun homage) ----------------------------- */
.golden-bubbles {
position: fixed;
inset: 0;
z-index: 1;
overflow: hidden;
pointer-events: none;
}
.golden-bubble {
position: absolute;
inset-inline-start: var(--bubble-x, 50%);
bottom: -40px;
width: var(--bubble-size, 5px);
height: var(--bubble-size, 5px);
border-radius: 50%;
opacity: var(--bubble-opacity, 0.34);
pointer-events: none;
background: radial-gradient(circle, #fff8db 0%, #fbbf24 52%, rgba(251, 191, 36, 0) 76%);
box-shadow: 0 0 14px rgba(251, 191, 36, 0.45);
animation: golden-rise var(--bubble-duration, 14s) linear var(--bubble-delay, 0s) infinite;
}
.golden-bubble.is-bokeh {
filter: blur(1px);
background: radial-gradient(circle, rgba(255, 243, 196, 0.75) 0%, rgba(251, 191, 36, 0.28) 54%, transparent 78%);
}
@keyframes golden-rise {
0% { transform: translate3d(0, 10vh, 0) scale(0.75); opacity: 0; }
18% { opacity: var(--bubble-opacity, 0.34); }
82% { opacity: var(--bubble-opacity, 0.34); }
100% { transform: translate3d(var(--bubble-sway, 24px), -112vh, 0) scale(1.18); opacity: 0; }
}
/* Skip link & Header ------------------------------------------------------ */
.skip-link {
position: fixed;
top: 12px;
inset-inline-start: 16px;
z-index: 200;
padding: 10px 18px;
border-radius: 999px;
background: #10162f;
border: 1px solid var(--line-strong);
transform: translateY(-160%);
transition: transform 0.2s var(--ease);
}
.skip-link:focus { transform: translateY(0); }
.site-header {
position: sticky;
top: 0;
z-index: 90;
height: var(--header-h);
background: rgba(5, 6, 13, 0.76);
backdrop-filter: blur(20px) saturate(155%);
border-bottom: 1px solid rgba(255, 255, 255, 0.075);
}
.header-inner {
height: 100%;
display: flex;
align-items: center;
justify-content: space-between;
gap: 18px;
}
.brand {
display: inline-flex;
align-items: center;
gap: 11px;
flex: none;
}
.brand-mark {
width: 38px;
height: 38px;
border-radius: 12px;
display: grid;
place-items: center;
background: linear-gradient(135deg, rgba(99, 102, 241, 0.28), rgba(45, 212, 191, 0.2));
border: 1px solid rgba(255, 255, 255, 0.18);
color: var(--lime);
box-shadow: 0 8px 22px rgba(0, 0, 0, 0.38), inset 0 1px 0 rgba(255, 255, 255, 0.2);
}
.brand-word {
display: flex;
flex-direction: column;
font-family: var(--display);
font-size: 21px;
font-weight: 750;
line-height: 0.88;
letter-spacing: -0.04em;
color: #fff;
}
.brand-word small {
font-family: var(--mono);
font-size: 7.5px;
font-weight: 700;
letter-spacing: 0.38em;
margin-top: 4px;
color: var(--cyan);
}
.main-nav {
display: flex;
align-items: center;
gap: 4px;
padding: 5px;
border-radius: 999px;
background: rgba(255, 255, 255, 0.032);
border: 1px solid rgba(255, 255, 255, 0.075);
}
.main-nav a {
padding: 8px 15px;
border-radius: 999px;
font-size: 14px;
font-weight: 600;
color: var(--muted);
transition: color 0.22s ease, background 0.22s ease;
}
.main-nav a:hover,
.main-nav a.is-active {
color: #fff;
background: rgba(255, 255, 255, 0.08);
}
.header-tools {
display: flex;
align-items: center;
gap: 9px;
}
.sound-toggle {
display: inline-flex;
align-items: center;
gap: 8px;
height: 38px;
padding: 0 13px;
border-radius: 999px;
background: rgba(255, 255, 255, 0.04);
border: 1px solid var(--line);
font-family: var(--mono);
font-size: 11px;
letter-spacing: 0.1em;
color: var(--muted);
transition: border-color 0.25s ease, color 0.25s ease, background 0.25s ease;
}
.sound-toggle:hover,
.sound-toggle[aria-pressed="true"] {
color: #fff;
border-color: rgba(56, 189, 248, 0.55);
background: rgba(56, 189, 248, 0.12);
}
.sound-bars {
display: inline-flex;
align-items: flex-end;
gap: 2.5px;
height: 13px;
}
.sound-bars i {
width: 2.5px;
height: 4px;
border-radius: 2px;
background: var(--cyan);
transition: height 0.2s ease;
}
.sound-toggle[aria-pressed="true"] .sound-bars i {
animation: eq-bounce 0.75s ease-in-out infinite alternate;
}
.sound-toggle[aria-pressed="true"] .sound-bars i:nth-child(2) { animation-delay: 0.15s; }
.sound-toggle[aria-pressed="true"] .sound-bars i:nth-child(3) { animation-delay: 0.3s; }
.sound-toggle[aria-pressed="true"] .sound-bars i:nth-child(4) { animation-delay: 0.45s; }
@keyframes eq-bounce {
0% { height: 3px; }
100% { height: 13px; }
}
.lang-cluster {
display: inline-flex;
align-items: center;
border-radius: 999px;
background: rgba(255, 255, 255, 0.04);
border: 1px solid var(--line);
overflow: hidden;
}
.lang-button {
display: inline-flex;
align-items: center;
gap: 6px;
height: 36px;
padding: 0 11px;
font-family: var(--mono);
font-size: 11.5px;
font-weight: 700;
color: var(--text);
}
.lang-button:hover { background: rgba(255, 255, 255, 0.08); }
.lang-world-btn {
display: inline-flex;
align-items: center;
gap: 5px;
height: 36px;
padding: 0 10px 0 8px;
border-inline-start: 1px solid var(--line);
font-family: var(--mono);
font-size: 10.5px;
color: var(--muted);
}
.lang-world-btn:hover { background: rgba(255, 255, 255, 0.08); color: #fff; }
.flag {
width: 20px;
height: 13.5px;
border-radius: 3px;
overflow: hidden;
display: inline-flex;
box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.18);
}
.flag svg { width: 100%; height: 100%; stroke: none; }
.lang-count-pill {
padding: 1px 5px;
border-radius: 99px;
background: rgba(99, 102, 241, 0.25);
color: #c7d2fe;
font-size: 10px;
}
.header-cta {
display: inline-flex;
align-items: center;
gap: 7px;
height: 38px;
padding: 0 16px;
border-radius: 999px;
background: linear-gradient(120deg, rgba(99, 102, 241, 0.28), rgba(56, 189, 248, 0.22));
border: 1px solid rgba(129, 140, 248, 0.42);
font-size: 13.5px;
font-weight: 700;
color: #fff;
transition: transform 0.22s var(--ease), border-color 0.22s ease, box-shadow 0.22s ease;
}
.header-cta:hover {
transform: translateY(-1px);
border-color: var(--cyan);
box-shadow: 0 8px 24px rgba(56, 189, 248, 0.24);
}
.menu-toggle {
display: none;
width: 40px;
height: 40px;
border-radius: 12px;
place-items: center;
background: rgba(255, 255, 255, 0.05);
border: 1px solid var(--line);
}
/* Common Typography, Buttons & Pills -------------------------------------- */
.eyebrow, .eyebrow-pill {
display: inline-flex;
align-items: center;
gap: 8px;
font-family: var(--mono);
font-size: 11px;
font-weight: 700;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--cyan);
}
.eyebrow-pill {
padding: 7px 14px;
border-radius: 999px;
background: rgba(56, 189, 248, 0.08);
border: 1px solid rgba(56, 189, 248, 0.24);
}
/* Radiant Shimmering Eyebrow Badge (K.I.T.T. sweep: ilk girişte 1 sağa 1 sola gider, sonra sakinleşir) */
.eyebrow-pill.eyebrow-radiant-shimmer {
position: relative;
overflow: hidden;
color: #ffffff;
background: linear-gradient(135deg, rgba(239, 68, 68, 0.22), rgba(59, 130, 246, 0.25), rgba(168, 85, 247, 0.22));
border: 1px solid rgba(255, 255, 255, 0.3);
box-shadow: 0 0 16px rgba(59, 130, 246, 0.35), 0 0 28px rgba(239, 68, 68, 0.2), inset 0 0 10px rgba(255, 255, 255, 0.12);
transition: box-shadow 0.4s ease, border-color 0.4s ease;
}
.eyebrow-radiant-shimmer::before {
content: "";
position: absolute;
top: 0;
left: -120%;
width: 90px;
height: 100%;
background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.95), transparent);
transform: skewX(-20deg);
pointer-events: none;
animation: kittSweep 3s cubic-bezier(0.45, 0.05, 0.55, 0.95) 1 forwards;
}
@keyframes kittSweep {
0% { left: -120%; opacity: 0; }
10% { opacity: 1; }
45% { left: 140%; opacity: 1; }
52% { left: 140%; opacity: 1; }
88% { left: -120%; opacity: 1; }
100% { left: -120%; opacity: 0; }
}
.eyebrow-radiant-shimmer .radiant-sparkle {
display: inline-block;
font-size: 13px;
filter: drop-shadow(0 0 6px #facc15);
animation: sparkleInitial 2.5s ease-out 1 forwards;
}
@keyframes sparkleInitial {
0% { transform: scale(0.9) rotate(-10deg); filter: drop-shadow(0 0 4px #60a5fa); }
50% { transform: scale(1.3) rotate(15deg); filter: drop-shadow(0 0 10px #facc15); }
100% { transform: scale(1) rotate(0deg); filter: drop-shadow(0 0 6px #facc15); }
}
.pulse-dot, .dot-cyan {
width: 7px;
height: 7px;
border-radius: 50%;
background: var(--lime);
box-shadow: 0 0 12px var(--lime);
flex: none;
}
.dot-cyan { background: var(--cyan); box-shadow: 0 0 12px var(--cyan); }
.sec-star { color: var(--gold); font-size: 13px; }
h1, h2 {
font-family: var(--display);
font-weight: 760;
letter-spacing: -0.035em;
line-height: 1.04;
}
h1 em, h2 em {
font-family: var(--serif);
font-style: italic;
font-weight: 400;
letter-spacing: -0.01em;
background: linear-gradient(105deg, #67e8f9 0%, #a78bfa 50%, #f472b6 96%);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
padding-inline-end: 0.06em;
}
.actions {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 12px;
}
.button {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 9px;
padding: 14px 24px;
border-radius: 999px;
font-family: var(--display);
font-size: 15px;
font-weight: 700;
border: 1px solid var(--line-strong);
background: rgba(255, 255, 255, 0.06);
color: #fff;
transition: transform 0.25s var(--ease), box-shadow 0.25s var(--ease), border-color 0.25s ease, background 0.25s ease;
}
.button:hover {
transform: translateY(-2px);
border-color: rgba(255, 255, 255, 0.36);
}
.button--primary {
background: linear-gradient(120deg, #6366f1 0%, #38bdf8 55%, #2dd4bf 100%);
border-color: transparent;
color: #040711;
box-shadow: 0 14px 34px rgba(56, 189, 248, 0.3);
}
.button--primary:hover {
box-shadow: 0 18px 42px rgba(56, 189, 248, 0.44);
}
.button--glass, .button.secondary {
background: rgba(255, 255, 255, 0.045);
backdrop-filter: blur(12px);
}
.text-link {
display: inline-flex;
align-items: center;
gap: 6px;
font-weight: 700;
font-size: 14px;
color: var(--cyan);
}
.text-link:hover { text-decoration: underline; }
/* 01 · HERO UNIVERSE & BRAND PLANET --------------------------------------- */
.hero-universe {
position: relative;
z-index: 2;
padding-top: clamp(28px, 4.5vw, 56px);
padding-bottom: 24px;
overflow: hidden;
}
.universe-aurora {
position: absolute;
inset: -10% -10% auto;
height: 680px;
background:
radial-gradient(circle at 74% 30%, rgba(99, 102, 241, 0.24), transparent 46%),
radial-gradient(circle at 22% 24%, rgba(45, 212, 191, 0.14), transparent 48%);
pointer-events: none;
}
.universe-intro {
display: grid;
grid-template-columns: minmax(0, 1.18fr) minmax(300px, 0.82fr);
align-items: center;
gap: clamp(28px, 4vw, 60px);
position: relative;
}
.universe-copy h1 {
margin-top: 16px;
font-size: clamp(42px, 6.2vw, 84px);
}
.universe-lead {
margin-top: 18px;
max-width: 58ch;
font-size: clamp(16px, 1.35vw, 19px);
color: var(--muted);
}
.hero-actions { margin-top: 26px; }
.hero-stats {
margin-top: 32px;
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 12px;
max-width: 560px;
}
.stat-item {
padding: 12px 14px;
border-radius: 16px;
background: rgba(255, 255, 255, 0.032);
border: 1px solid rgba(255, 255, 255, 0.08);
display: flex;
flex-direction: column-reverse;
gap: 2px;
}
.stat-item dt {
font-family: var(--mono);
font-size: 10.5px;
text-transform: uppercase;
letter-spacing: 0.1em;
color: var(--muted);
}
.stat-item dd {
font-family: var(--display);
font-size: clamp(22px, 2.2vw, 30px);
font-weight: 800;
line-height: 1.05;
color: #fff;
}
/* Brand stage: intro film first, then the TMS logo arrives in a burst of light */
.brand-planet {
position: relative;
width: min(100%, 360px);
margin-inline: auto;
padding-top: 26px;
}
.planet-coordinate {
position: absolute;
top: 0;
inset-inline-start: 6px;
font-family: var(--mono);
font-size: 10.5px;
letter-spacing: 0.28em;
color: var(--muted);
pointer-events: none;
}
.planet-core {
position: relative;
aspect-ratio: 3 / 4;
container-type: inline-size;
border-radius: 30px;
overflow: hidden;
isolation: isolate;
background: radial-gradient(circle at 50% 42%, #1a1f4a 0%, #0a0c20 60%, #05060f 100%);
border: 1px solid rgba(255, 255, 255, 0.14);
box-shadow:
0 30px 80px -20px rgba(0, 0, 0, 0.8),
0 0 70px -10px rgba(99, 102, 241, 0.45);
}
/* rotating light rim — a single compositor-only transform */
.brand-halo {
position: absolute;
inset: -40%;
z-index: -1;
background: conic-gradient(from 0deg, transparent 0 55%, rgba(56, 189, 248, 0.55), rgba(236, 72, 153, 0.55), transparent 85%);
animation: spin-slow 9s linear infinite;
opacity: 0;
transition: opacity 1s var(--ease);
}
.planet-core::after {
content: '';
position: absolute;
inset: 2px;
z-index: -1;
border-radius: 28px;
background: radial-gradient(circle at 50% 42%, #1a1f4a 0%, #0a0c20 60%, #05060f 100%);
}
@keyframes spin-slow { to { transform: rotate(360deg); } }
.planet-nebula {
position: absolute;
inset: 0;
background:
radial-gradient(circle at 50% 40%, rgba(56, 189, 248, 0.32), transparent 50%),
radial-gradient(circle at 25% 72%, rgba(236, 72, 153, 0.24), transparent 50%),
radial-gradient(circle at 78% 70%, rgba(139, 92, 246, 0.28), transparent 50%);
opacity: 0;
transition: opacity 1.2s var(--ease);
pointer-events: none;
}
.brand-stage-logo {
position: absolute;
inset: 0;
margin: auto;
width: 84%;
height: auto;
aspect-ratio: 1;
border-radius: 24px;
opacity: 0;
transform: scale(0.82);
filter: blur(10px) brightness(1.6);
transition: opacity 1s var(--ease), transform 1.2s var(--ease), filter 1.2s var(--ease);
}
.brand-sparkles {
position: absolute;
inset: 0;
z-index: 1;
pointer-events: none;
}
.brand-sparkles i {
position: absolute;
top: 50%;
left: 50%;
width: var(--s);
height: var(--s);
margin: calc(var(--s) / -2);
border-radius: 50%;
background: #fff;
box-shadow: 0 0 10px 2px rgba(125, 211, 252, 0.9);
opacity: 0;
transform: rotate(var(--a)) translateY(0);
}
.brand-film {
position: absolute;
inset: 0;
z-index: 2;
pointer-events: none;
transition: opacity 1s var(--ease);
}
#hero-intro-film {
width: 100%;
height: 100%;
display: block;
object-fit: cover;
}
/* reveal sequence */
.brand-planet.brand-film-revealing .brand-film,
.brand-planet.intro-complete .brand-film { opacity: 0; }
.brand-planet.brand-film-revealing .brand-stage-logo,
.brand-planet.intro-complete .brand-stage-logo {
opacity: 1;
transform: scale(1);
filter: none;
}
.brand-planet.brand-film-revealing .planet-nebula,
.brand-planet.intro-complete .planet-nebula,
.brand-planet.brand-film-revealing .brand-halo,
.brand-planet.intro-complete .brand-halo { opacity: 1; }
.brand-planet.brand-film-revealing .brand-sparkles i {
animation: sparkle-burst 1.6s var(--ease) var(--t) both;
}
.brand-planet.intro-complete .brand-sparkles i {
animation: sparkle-twinkle 3.2s ease-in-out calc(var(--t) * 4) infinite;
transform: rotate(var(--a)) translateY(calc(var(--d) * -1));
}
@keyframes sparkle-burst {
0% { opacity: 0; transform: rotate(var(--a)) translateY(0) scale(0.4); }
25% { opacity: 1; }
100% { opacity: 0.85; transform: rotate(var(--a)) translateY(calc(var(--d) * -1)) scale(1); }
}
@keyframes sparkle-twinkle {
0%, 100% { opacity: 0.2; }
50% { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
.brand-halo, .brand-sparkles i { animation: none !important; }
}
@media (max-width: 760px) {
.brand-planet { width: min(78vw, 300px); }
}
/* 3D Cylindrical 19-App Orbit Vitrine ------------------------------------- */
.universe-vitrine {
margin-top: clamp(26px, 4vw, 48px);
padding-top: 18px;
border-top: 1px solid rgba(255, 255, 255, 0.07);
}
.vitrine-heading {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
font-family: var(--mono);
font-size: 10.5px;
letter-spacing: 0.2em;
color: var(--muted);
}
.vitrine-kicker {
display: inline-flex;
align-items: center;
gap: 8px;
}
.orbit-stage {
position: relative;
height: clamp(270px, 31vw, 350px);
perspective: 1400px;
display: grid;
place-items: center;
overflow: hidden;
cursor: grab;
user-select: none;
touch-action: pan-y;
}
.orbit-stage.is-dragging { cursor: grabbing; }
.orbit-floor {
position: absolute;
bottom: 14px;
width: min(860px, 90vw);
height: 90px;
border-radius: 50%;
background: radial-gradient(ellipse at center, rgba(99, 102, 241, 0.22), rgba(45, 212, 191, 0.08) 48%, transparent 74%);
filter: blur(12px);
pointer-events: none;
}
.orbit-ring {
position: relative;
width: 164px;
height: 196px;
transform-style: preserve-3d;
}
.orbit-item {
position: absolute;
inset: 0;
display: flex;
flex-direction: column;
align-items: center;
gap: 9px;
transform-style: preserve-3d;
backface-visibility: hidden;
transition: filter 0.25s ease;
}
.orbit-frame {
width: 146px;
height: 146px;
border-radius: 30px;
padding: 5px;
background: linear-gradient(145deg, rgba(255, 255, 255, 0.22), rgba(255, 255, 255, 0.04));
border: 1px solid rgba(255, 255, 255, 0.18);
box-shadow:
0 20px 42px rgba(0, 0, 0, 0.58),
0 0 28px color-mix(in srgb, var(--item-color, #6366f1) 36%, transparent);
overflow: hidden;
-webkit-box-reflect: below 8px linear-gradient(transparent 62%, rgba(255, 255, 255, 0.16));
}
.orbit-frame img {
width: 100%;
height: 100%;
border-radius: 24px;
object-fit: cover;
}
.orbit-title {
font-family: var(--display);
font-size: 12.5px;
font-weight: 700;
color: #e2e8f0;
text-shadow: 0 2px 10px rgba(0, 0, 0, 0.85);
white-space: nowrap;
}
.orbit-item.is-front .orbit-frame {
border-color: var(--cyan);
box-shadow:
0 24px 52px rgba(0, 0, 0, 0.72),
0 0 38px color-mix(in srgb, var(--item-color, #38bdf8) 65%, transparent);
}
.vitrine-bottom {
margin-top: 8px;
display: grid;
grid-template-columns: 1fr auto 1fr;
align-items: center;
gap: 16px;
}
.vitrine-count {
font-size: 13.5px;
color: var(--muted);
}
.vitrine-count strong {
font-family: var(--display);
font-size: 20px;
color: #fff;
margin-inline-end: 4px;
}
.orbit-controls {
display: inline-flex;
align-items: center;
gap: 8px;
}
.orbit-controls button {
width: 40px;
height: 40px;
border-radius: 50%;
display: grid;
place-items: center;
background: rgba(255, 255, 255, 0.05);
border: 1px solid var(--line-strong);
transition: background 0.2s ease, transform 0.2s ease, border-color 0.2s ease;
}
.orbit-controls button:hover,
.orbit-controls button[aria-pressed="true"] {
background: rgba(56, 189, 248, 0.16);
border-color: var(--cyan);
transform: translateY(-1px);
}
.orbit-spotlight {
justify-self: end;
display: inline-flex;
align-items: center;
gap: 11px;
padding: 7px 10px 7px 9px;
border-radius: 999px;
background: rgba(255, 255, 255, 0.045);
border: 1px solid color-mix(in srgb, var(--spot-color, #6366f1) 48%, rgba(255, 255, 255, 0.12));
max-width: 390px;
}
.orbit-spotlight img {
width: 36px;
height: 36px;
border-radius: 10px;
flex: none;
}
.orbit-spot-meta {
display: flex;
flex-direction: column;
min-width: 0;
}
.orbit-spot-meta strong {
font-family: var(--display);
font-size: 13px;
line-height: 1.15;
color: #fff;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.orbit-spot-meta span {
font-size: 11.5px;
color: var(--muted);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
max-width: 220px;
}
.orbit-spot-quick,
.orbit-spot-go {
width: 32px;
height: 32px;
border-radius: 50%;
display: grid;
place-items: center;
background: rgba(255, 255, 255, 0.06);
border: 1px solid var(--line);
flex: none;
}
.orbit-spot-quick:hover,
.orbit-spot-go:hover {
border-color: var(--cyan);
color: var(--cyan);
}
/* 02 · AMBIENT WEATHER & APP ICON RIBBON ---------------------------------- */
.studio-ribbon {
position: relative;
z-index: 2;
border-block: 1px solid rgba(255, 255, 255, 0.08);
background: rgba(9, 12, 26, 0.72);
backdrop-filter: blur(14px);
overflow: hidden;
padding-block: 16px;
display: flex;
flex-direction: column;
justify-content: center;
min-height: 84px;
}
.ambient-weather-canvas {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
pointer-events: none;
z-index: 1;
}
.ribbon-watermark {
position: absolute;
inset: 0;
display: flex;
align-items: center;
justify-content: center;
gap: 28px;
pointer-events: none;
z-index: 0;
font-family: var(--display);
font-size: clamp(26px, 4.2vw, 52px);
font-weight: 900;
letter-spacing: 0.16em;
text-transform: uppercase;
color: rgba(255, 255, 255, 0.038);
user-select: none;
white-space: nowrap;
}
.ribbon-watermark .wm-dot {
color: rgba(56, 189, 248, 0.20);
font-size: 0.7em;
}
.ribbon-row {
overflow: hidden;
display: flex;
position: relative;
z-index: 2;
}
.ribbon-track {
display: flex;
align-items: center;
gap: 24px;
width: max-content;
animation: ribbon-scroll 42s linear infinite;
}
.studio-ribbon:hover .ribbon-track { animation-play-state: paused; }
@keyframes ribbon-scroll {
from { transform: translate3d(0, 0, 0); }
to { transform: translate3d(-50%, 0, 0); }
}
.ribbon-app {
display: inline-flex;
align-items: center;
gap: 9px;
padding: 6px 14px 6px 7px;
border-radius: 999px;
background: rgba(15, 23, 42, 0.75);
border: 1px solid rgba(255, 255, 255, 0.12);
backdrop-filter: blur(8px);
font-size: 13px;
font-weight: 600;
color: #f1f5f9;
box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25);
transition: border-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}
.ribbon-app:hover {
border-color: var(--accent, var(--cyan));
transform: translateY(-2px);
box-shadow: 0 6px 20px rgba(56, 189, 248, 0.2);
}
.ribbon-app img { width: 28px; height: 28px; border-radius: 8px; }
/* 03 · 19-APP & GAME CATALOGUE -------------------------------------------- */
.section-top {
display: flex;
align-items: flex-end;
justify-content: space-between;
gap: 24px;
flex-wrap: wrap;
margin-bottom: 28px;
}
.section-top h2 {
margin-top: 10px;
font-size: clamp(32px, 4.4vw, 56px);
}
.section-desc {
max-width: 48ch;
color: var(--muted);
font-size: 16.5px;
}
.catalog-toolbar {
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
flex-wrap: wrap;
margin-bottom: 14px;
}
.filters {
display: inline-flex;
flex-wrap: wrap;
gap: 6px;
padding: 6px;
border-radius: 999px;
background: rgba(255, 255, 255, 0.04);
border: 1px solid var(--line);
}
.filter {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 9px 18px;
border-radius: 999px;
font-family: var(--display);
font-size: 14px;
font-weight: 700;
color: var(--muted);
transition: all 0.22s var(--ease);
}
.filter b {
font-family: var(--mono);
font-size: 11px;
padding: 2px 7px;
border-radius: 999px;
background: rgba(255, 255, 255, 0.08);
color: var(--text);
}
.filter[aria-pressed="true"] {
background: linear-gradient(120deg, var(--indigo), var(--cyan));
color: #040711;
}
.filter[aria-pressed="true"] b {
background: rgba(4, 7, 17, 0.2);
color: #040711;
}
.search {
display: flex;
align-items: center;
gap: 10px;
padding: 10px 18px;
border-radius: 999px;
background: rgba(255, 255, 255, 0.045);
border: 1px solid var(--line);
min-width: min(320px, 100%);
color: var(--muted);
}
.search:focus-within {
border-color: var(--cyan);
box-shadow: 0 0 0 3px rgba(56, 189, 248, 0.15);
}
.search input {
width: 100%;
background: none;
border: 0;
outline: 0;
color: #fff;
font-size: 14.5px;
}
.subfilters {
display: flex;
align-items: center;
gap: 8px;
flex-wrap: wrap;
margin-bottom: 26px;
}
.subchip {
display: inline-flex;
align-items: center;
gap: 7px;
padding: 7px 14px;
border-radius: 999px;
background: rgba(255, 255, 255, 0.03);
border: 1px solid rgba(255, 255, 255, 0.085);
font-size: 12.5px;
font-weight: 600;
color: var(--muted);
transition: all 0.2s ease;
}
.subchip svg { width: 14px; height: 14px; }
.subchip em {
font-style: normal;
font-family: var(--mono);
font-size: 10.5px;
opacity: 0.7;
}
.subchip:hover,
.subchip[aria-pressed="true"] {
color: #fff;
border-color: rgba(56, 189, 248, 0.52);
background: rgba(56, 189, 248, 0.13);
}
.catalog-grid {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 18px;
}
.app-card {
position: relative;
border-radius: 26px;
background:
radial-gradient(380px circle at var(--mx, 50%) var(--my, 0%), color-mix(in srgb, var(--accent, #6366f1) 24%, transparent), transparent 65%),
linear-gradient(180deg, rgba(255, 255, 255, 0.055), rgba(255, 255, 255, 0.025));
border: 1px solid rgba(255, 255, 255, 0.1);
display: flex;
flex-direction: column;
justify-content: space-between;
overflow: hidden;
transition: transform 0.3s var(--ease), border-color 0.3s ease, box-shadow 0.3s ease;
}
.app-card:hover {
transform: translateY(-5px);
border-color: color-mix(in srgb, var(--accent, #38bdf8) 65%, rgba(255, 255, 255, 0.3));
box-shadow: 0 22px 48px rgba(0, 0, 0, 0.48), 0 0 34px color-mix(in srgb, var(--accent, #6366f1) 22%, transparent);
}
.app-card-link {
padding: 20px 20px 14px;
display: flex;
flex-direction: column;
gap: 16px;
flex: 1;
}
.app-art {
position: relative;
display: flex;
align-items: center;
justify-content: center;
padding-top: 26px;
padding-bottom: 6px;
}
.app-kind {
position: absolute;
top: 0;
inset-inline-start: 0;
padding: 4px 10px;
border-radius: 999px;
background: rgba(255, 255, 255, 0.07);
border: 1px solid rgba(255, 255, 255, 0.12);
font-family: var(--mono);
font-size: 10px;
letter-spacing: 0.08em;
text-transform: uppercase;
color: #dbeafe;
}
.app-featured-pill {
position: absolute;
top: 0;
inset-inline-end: 0;
display: inline-flex;
align-items: center;
gap: 4px;
padding: 4px 9px;
border-radius: 999px;
background: rgba(251, 191, 36, 0.15);
border: 1px solid rgba(251, 191, 36, 0.42);
color: #fde68a;
font-family: var(--mono);
font-size: 9.5px;
font-weight: 700;
}
.app-featured-pill svg { width: 11px; height: 11px; }
.app-icon-shell {
width: 124px;
height: 124px;
border-radius: 28px;
padding: 4px;
background: linear-gradient(140deg, rgba(255, 255, 255, 0.24), rgba(255, 255, 255, 0.04));
box-shadow: 0 16px 34px rgba(0, 0, 0, 0.45), 0 0 26px color-mix(in srgb, var(--accent, #6366f1) 32%, transparent);
}
.app-icon-shell img {
width: 100%;
height: 100%;
border-radius: 24px;
object-fit: cover;
}
.app-card-body h3 {
font-family: var(--display);
font-size: 19px;
font-weight: 750;
color: #fff;
margin-bottom: 6px;
}
.app-tagline {
font-size: 13.8px;
line-height: 1.5;
color: var(--muted);
}
.app-card-footer {
padding: 12px 18px 16px;
border-top: 1px solid rgba(255, 255, 255, 0.07);
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
}
.app-quick-trigger {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 6px 11px;
border-radius: 999px;
background: rgba(255, 255, 255, 0.05);
border: 1px solid rgba(255, 255, 255, 0.11);
font-size: 12px;
font-weight: 600;
color: var(--muted);
transition: all 0.2s ease;
}
.app-quick-trigger svg { width: 14px; height: 14px; }
.app-quick-trigger:hover {
color: #fff;
border-color: var(--cyan);
background: rgba(56, 189, 248, 0.14);
}
.app-detail-cta {
display: inline-flex;
align-items: center;
gap: 5px;
font-size: 12.5px;
font-weight: 700;
color: var(--cyan);
}
.app-detail-cta svg { width: 14px; height: 14px; }
.empty-state {
padding: 48px 24px;
text-align: center;
border-radius: 24px;
background: rgba(255, 255, 255, 0.03);
border: 1px dashed var(--line-strong);
display: grid;
justify-items: center;
gap: 12px;
}
.catalog-end {
margin-top: 28px;
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
flex-wrap: wrap;
}
.catalog-count {
font-family: var(--mono);
font-size: 12.5px;
color: var(--muted);
}
/* 04 · MEDIA INTERLUDE ---------------------------------------------------- */
.media-interlude {
position: relative;
z-index: 2;
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 16px;
margin-bottom: 24px;
}
.sound-bite {
display: flex;
align-items: center;
gap: 16px;
padding: 16px 20px;
border-radius: 22px;
background: linear-gradient(125deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.025));
border: 1px solid var(--line);
text-align: start;
transition: transform 0.25s var(--ease), border-color 0.25s ease;
}
.sound-bite:hover {
transform: translateY(-2px);
border-color: var(--cyan);
}
.sound-bite img, .reel-badge-icon {
width: 54px;
height: 54px;
border-radius: 14px;
object-fit: cover;
flex: none;
}
.reel-badge-icon {
display: grid;
place-items: center;
background: linear-gradient(135deg, rgba(249, 115, 22, 0.28), rgba(168, 85, 247, 0.28));
border: 1px solid rgba(249, 115, 22, 0.4);
color: #fdba74;
}
.interlude-meta {
display: flex;
flex-direction: column;
gap: 2px;
flex: 1;
min-width: 0;
}
.interlude-meta small {
font-family: var(--mono);
font-size: 10px;
letter-spacing: 0.16em;
color: var(--cyan);
}
.interlude-meta strong {
font-family: var(--display);
font-size: 16px;
color: #fff;
}
.track-play {
width: 42px;
height: 42px;
border-radius: 50%;
display: grid;
place-items: center;
background: rgba(255, 255, 255, 0.1);
border: 1px solid rgba(255, 255, 255, 0.2);
color: #fff;
flex: none;
}
/* 05 · MİNİK KALPLER DUAL-STORY WORLD ------------------------------------- */
.kids-section { padding-block: clamp(44px, 6vw, 84px); position: relative; z-index: 2; }
.kids-panel {
position: relative;
min-height: 540px;
border-radius: 34px;
overflow: hidden;
border: 1px solid rgba(255, 255, 255, 0.15);
box-shadow: 0 30px 80px rgba(0, 0, 0, 0.55);
display: flex;
align-items: flex-end;
padding: clamp(24px, 4.5vw, 52px);
}
.kids-slide {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
opacity: 0;
transform: scale(1.04);
transition: opacity 0.55s var(--ease), transform 4s ease-out;
pointer-events: none;
}
.kids-slide.is-active {
opacity: 1;
transform: scale(1);
}
.kids-shade {
position: absolute;
inset: 0;
background:
linear-gradient(95deg, rgba(5, 7, 18, 0.92) 0%, rgba(5, 7, 18, 0.76) 46%, rgba(5, 7, 18, 0.22) 100%),
linear-gradient(180deg, rgba(5, 7, 18, 0.15) 0%, rgba(5, 7, 18, 0.82) 100%);
pointer-events: none;
}
.kids-copy {
position: relative;
z-index: 2;
max-width: 540px;
display: flex;
flex-direction: column;
gap: 14px;
}
.kids-title-link h2 {
font-size: clamp(30px, 4vw, 50px);
color: #fff;
transition: color 0.2s ease;
}
.kids-title-link:hover h2 { color: var(--cyan); }
.kids-lead { color: #dbeafe; font-size: 16px; }
.kids-story-card {
padding: 14px 18px;
border-radius: 18px;
background: rgba(8, 12, 28, 0.72);
backdrop-filter: blur(14px);
border: 1px solid rgba(255, 255, 255, 0.15);
display: flex;
flex-direction: column;
gap: 4px;
}
.kids-story-kicker {
font-family: var(--mono);
font-size: 10px;
letter-spacing: 0.16em;
color: var(--gold);
}
.kids-story-heading {
font-family: var(--display);
font-size: 18px;
color: #fff;
}
.kids-story-desc { font-size: 13.8px; color: var(--muted); }
.kids-actions {
margin-top: 6px;
display: flex;
align-items: center;
gap: 16px;
flex-wrap: wrap;
}
.kids-caption {
position: absolute;
top: 22px;
inset-inline-end: 22px;
z-index: 2;
display: inline-flex;
align-items: center;
gap: 8px;
padding: 8px 14px;
border-radius: 999px;
background: rgba(6, 9, 20, 0.72);
backdrop-filter: blur(12px);
border: 1px solid rgba(255, 255, 255, 0.18);
font-family: var(--mono);
font-size: 11px;
color: #fff;
}
.kids-scene-controls {
position: absolute;
bottom: 24px;
inset-inline-end: 24px;
z-index: 2;
display: inline-flex;
align-items: center;
gap: 10px;
padding: 7px 12px;
border-radius: 999px;
background: rgba(6, 9, 20, 0.76);
backdrop-filter: blur(12px);
border: 1px solid rgba(255, 255, 255, 0.18);
}
.kids-scene-dots { display: inline-flex; gap: 6px; }
.kids-scene-dot {
width: 24px;
height: 8px;
border-radius: 99px;
background: rgba(255, 255, 255, 0.25);
transition: all 0.25s ease;
}
.kids-scene-dot[aria-pressed="true"] {
width: 34px;
background: var(--lime);
}
.kids-scene-count {
font-family: var(--mono);
font-size: 11px;
color: var(--muted);
}
.kids-scene-toggle {
width: 28px;
height: 28px;
border-radius: 50%;
display: grid;
place-items: center;
background: rgba(255, 255, 255, 0.1);
}
/* 06 · BİZ TECHMAK STUDIO'YUZ (ABOUT + VIDEO + PRINCIPLES) ---------------- */
.about-video-panel {
position: relative;
z-index: 2;
margin-block: clamp(36px, 5vw, 72px);
padding: clamp(32px, 5vw, 64px);
border-radius: 34px;
overflow: hidden;
border: 1px solid rgba(255, 255, 255, 0.14);
background: #080b18;
}
.about-background-video {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
opacity: 0.72;
pointer-events: none;
}
.about-video-shade {
position: absolute;
inset: 0;
background:
linear-gradient(115deg, rgba(5, 7, 16, 0.65) 0%, rgba(5, 7, 16, 0.28) 50%, rgba(5, 7, 16, 0.68) 100%);
pointer-events: none;
}
.about-inner {
position: relative;
z-index: 2;
display: flex;
flex-direction: column;
gap: 36px;
}
.about-header-grid {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
gap: clamp(24px, 4vw, 56px);
align-items: start;
}
.about-header-grid h2 {
margin-top: 10px;
font-size: clamp(32px, 4.2vw, 54px);
}
.xbox-pride-badge {
margin-top: 22px;
display: inline-flex;
align-items: center;
gap: 12px;
padding: 11px 16px;
border-radius: 16px;
background: rgba(16, 185, 129, 0.12);
border: 1px solid rgba(52, 211, 153, 0.35);
font-size: 13.5px;
font-weight: 600;
color: #d1fae5;
}
.xbox-icon-wrap {
width: 32px;
height: 32px;
border-radius: 10px;
display: grid;
place-items: center;
background: rgba(16, 185, 129, 0.24);
color: #6ee7b7;
flex: none;
}
.about-copy {
display: flex;
flex-direction: column;
gap: 16px;
font-size: 16.5px;
color: #dbeafe;
}
.about-tags {
margin-top: 6px;
display: flex;
flex-wrap: wrap;
gap: 8px;
}
.about-tags > span {
padding: 7px 14px;
border-radius: 999px;
background: rgba(255, 255, 255, 0.07);
border: 1px solid rgba(255, 255, 255, 0.14);
font-size: 13px;
font-weight: 600;
}
.principles-grid {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 14px;
}
.principle-card {
padding: 20px;
border-radius: 22px;
background: rgba(10, 14, 30, 0.68);
backdrop-filter: blur(12px);
border: 1px solid rgba(255, 255, 255, 0.11);
display: flex;
flex-direction: column;
gap: 8px;
}
.principle-index {
font-family: var(--mono);
font-size: 11px;
color: var(--cyan);
}
.principle-card h3 {
font-family: var(--display);
font-size: 19px;
color: #fff;
}
.principle-card p { font-size: 13.8px; color: var(--muted); }
.about-motion-toggle {
position: relative;
z-index: 2;
margin-top: 20px;
display: inline-flex;
align-items: center;
gap: 8px;
padding: 8px 14px;
border-radius: 999px;
background: rgba(6, 9, 20, 0.75);
border: 1px solid rgba(255, 255, 255, 0.18);
font-family: var(--mono);
font-size: 11px;
color: #e2e8f0;
}
/* 07 · TECHMAK MUSIC STAGE & VINYL DECK ----------------------------------- */
.music-experience {
position: relative;
overflow: hidden;
border-top: 1px solid rgba(255, 255, 255, 0.08);
background: radial-gradient(ellipse 90% 60% at 50% 25%, rgba(168, 85, 247, 0.12), transparent 70%);
}
.music-vu-meter {
position: absolute;
inset: auto 0 0 0;
width: 100%;
height: 220px;
opacity: 0.88;
filter: drop-shadow(0 0 8px rgba(34, 197, 94, 0.35));
pointer-events: none;
}
.music-atmosphere {
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
flex-wrap: wrap;
padding: 12px 18px;
border-radius: 999px;
background: rgba(255, 255, 255, 0.035);
border: 1px solid var(--line);
margin-bottom: 28px;
}
.studio-monitors {
display: inline-flex;
align-items: center;
gap: 12px;
}
.monitor-cone {
width: 24px;
height: 24px;
border-radius: 50%;
border: 2px solid rgba(56, 189, 248, 0.5);
display: grid;
place-items: center;
}
.monitor-cone i {
width: 8px;
height: 8px;
border-radius: 50%;
background: var(--cyan);
}
.music-experience.is-playing .monitor-cone {
animation: speaker-thump 0.55s ease-in-out infinite alternate;
}
@keyframes speaker-thump {
from { transform: scale(0.92); }
to { transform: scale(1.12); border-color: var(--lime); }
}
.atmosphere-kicker {
font-family: var(--mono);
font-size: 10.5px;
letter-spacing: 0.2em;
color: var(--muted);
}
.equalizer {
display: flex;
align-items: flex-end;
gap: 3px;
height: 18px;
}
.equalizer i {
width: 3px;
height: calc(var(--level, 0.4) * 18px);
border-radius: 2px;
background: linear-gradient(180deg, var(--cyan), var(--indigo));
opacity: 0.7;
}
.music-experience.is-playing .equalizer i {
animation: eq-wave 0.65s ease-in-out var(--delay, 0s) infinite alternate;
}
@keyframes eq-wave {
from { height: 4px; }
to { height: 18px; }
}
.music-grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 22px;
margin-bottom: 28px;
}
.music-stage-card {
padding: 22px;
border-radius: 28px;
background:
radial-gradient(circle at 50% 0%, color-mix(in srgb, var(--album-color, #a855f7) 24%, transparent), transparent 65%),
rgba(255, 255, 255, 0.04);
border: 1px solid rgba(255, 255, 255, 0.11);
display: flex;
flex-direction: column;
gap: 18px;
transition: transform 0.3s var(--ease), border-color 0.3s ease;
}
.music-stage-card:hover,
.music-stage-card.is-playing {
transform: translateY(-4px);
border-color: var(--album-color, var(--cyan));
}
.record-scene {
position: relative;
aspect-ratio: 1;
display: flex;
align-items: center;
justify-content: center;
}
.vinyl {
position: absolute;
width: 82%;
height: 82%;
border-radius: 50%;
background:
radial-gradient(circle, #111 16%, var(--album-color, #f59e0b) 17% 28%, #0b0c10 29% 100%);
box-shadow: 0 12px 32px rgba(0, 0, 0, 0.65);
transform: translateX(14%);
transition: transform 0.45s var(--ease);
display: grid;
place-items: center;
}
.vinyl i {
width: 14px;
height: 14px;
border-radius: 50%;
background: #05060d;
border: 2px solid rgba(255, 255, 255, 0.4);
}
.music-stage-card:hover .vinyl,
.music-stage-card.is-playing .vinyl {
transform: translateX(24%) rotate(25deg);
}
.music-stage-card.is-playing .vinyl {
animation: vinyl-spin 5s linear infinite;
}
@keyframes vinyl-spin {
from { transform: translateX(24%) rotate(0deg); }
to { transform: translateX(24%) rotate(360deg); }
}
.album-cover {
position: relative;
z-index: 2;
width: 84%;
height: 84%;
border-radius: 20px;
overflow: hidden;
box-shadow: 0 18px 40px rgba(0, 0, 0, 0.6);
border: 1px solid rgba(255, 255, 255, 0.18);
}
.album-cover img { width: 100%; height: 100%; object-fit: cover; }
.album-cover .track-play {
position: absolute;
bottom: 12px;
inset-inline-end: 12px;
background: rgba(5, 7, 18, 0.82);
backdrop-filter: blur(8px);
}
.album-stage-info { display: flex; flex-direction: column; gap: 6px; }
.album-tag {
font-family: var(--mono);
font-size: 10px;
letter-spacing: 0.16em;
color: var(--muted);
}
.album-stage-info h3 {
font-family: var(--display);
font-size: 21px;
color: #fff;
}
.album-links {
margin-top: 4px;
display: flex;
gap: 12px;
font-size: 13px;
font-weight: 700;
color: var(--cyan);
}
.track-list {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 12px;
}
.track {
display: flex;
align-items: center;
gap: 14px;
padding: 14px 18px;
border-radius: 18px;
background: rgba(255, 255, 255, 0.04);
border: 1px solid rgba(255, 255, 255, 0.09);
text-align: start;
transition: all 0.22s ease;
}
.track:hover,
.track.is-active {
background: rgba(255, 255, 255, 0.08);
border-color: var(--track-accent, var(--cyan));
}
.track-number {
font-family: var(--mono);
font-size: 12px;
color: var(--muted);
}
.track-main {
display: flex;
flex-direction: column;
flex: 1;
min-width: 0;
}
.track-title {
font-family: var(--display);
font-size: 15px;
font-weight: 700;
color: #fff;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.track-collection { font-size: 12.5px; color: var(--muted); }
.track-label {
font-family: var(--mono);
font-size: 10.5px;
padding: 4px 10px;
border-radius: 999px;
background: rgba(255, 255, 255, 0.06);
color: var(--muted);
}
.music-footnote {
margin-top: 18px;
font-size: 13px;
color: var(--faint);
text-align: center;
}
/* Floating Now-Playing Deck ----------------------------------------------- */
.player {
position: fixed;
bottom: 18px;
inset-inline: 18px;
max-width: 960px;
margin-inline: auto;
z-index: 95;
padding: 12px 18px;
border-radius: 22px;
background: rgba(8, 11, 24, 0.9);
backdrop-filter: blur(22px) saturate(160%);
border: 1px solid rgba(255, 255, 255, 0.18);
box-shadow: 0 24px 60px rgba(0, 0, 0, 0.72);
display: flex;
align-items: center;
gap: 14px;
}
#player-cover {
width: 46px;
height: 46px;
border-radius: 12px;
object-fit: cover;
flex: none;
}
.player-meta {
display: flex;
flex-direction: column;
min-width: 140px;
max-width: 240px;
flex: 1;
}
.player-kicker {
font-family: var(--mono);
font-size: 9.5px;
text-transform: uppercase;
letter-spacing: 0.14em;
color: var(--cyan);
}
.player-meta strong {
font-size: 14px;
color: #fff;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.player-meta span {
font-size: 12px;
color: var(--muted);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.player-controls-cluster {
display: inline-flex;
align-items: center;
gap: 8px;
}
.player-controls-cluster button,
#player-close {
width: 36px;
height: 36px;
border-radius: 50%;
display: grid;
place-items: center;
background: rgba(255, 255, 255, 0.08);
}
.player-toggle {
background: var(--cyan) !important;
color: #040711 !important;
}
.player-timeline {
display: flex;
align-items: center;
gap: 8px;
flex: 1.2;
}
.player-time {
font-family: var(--mono);
font-size: 11px;
color: var(--muted);
}
.player-progress, .player-volume {
width: 100%;
accent-color: var(--cyan);
cursor: pointer;
}
.player-volume-wrap {
display: inline-flex;
align-items: center;
gap: 6px;
width: 100px;
color: var(--muted);
}
/* 08 · STUDIO SIGNATURE & FOOTER ------------------------------------------ */
.studio-signature {
position: relative;
z-index: 2;
margin-block: 24px 56px;
padding: 28px 34px;
border-radius: 28px;
background: linear-gradient(120deg, rgba(99, 102, 241, 0.14), rgba(45, 212, 191, 0.09));
border: 1px solid rgba(255, 255, 255, 0.14);
display: flex;
align-items: center;
justify-content: space-between;
gap: 20px;
flex-wrap: wrap;
}
.signature-symbol {
font-size: 32px;
color: var(--lime);
}
.studio-signature p {
font-family: var(--mono);
font-size: 10.5px;
letter-spacing: 0.2em;
color: var(--cyan);
}
.studio-signature h2 { font-size: clamp(22px, 3vw, 34px); margin-top: 4px; }
.signature-mail {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 12px 20px;
border-radius: 999px;
background: rgba(255, 255, 255, 0.08);
border: 1px solid rgba(255, 255, 255, 0.18);
font-family: var(--mono);
font-size: 13px;
}
.site-footer {
position: relative;
z-index: 2;
padding-top: 64px;
padding-bottom: 42px;
border-top: 1px solid rgba(255, 255, 255, 0.09);
background: linear-gradient(180deg, rgba(8, 10, 22, 0.6), #04050b);
overflow: hidden;
}
.contact-deck {
display: grid;
grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
gap: 28px;
padding-bottom: 48px;
border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.contact-heading {
margin-top: 12px;
font-size: clamp(30px, 4vw, 48px);
}
.contact-lead { margin-top: 12px; color: var(--muted); max-width: 48ch; }
.availability-pill {
margin-top: 18px;
display: inline-flex;
align-items: center;
gap: 9px;
padding: 8px 15px;
border-radius: 999px;
background: rgba(198, 255, 78, 0.09);
border: 1px solid rgba(198, 255, 78, 0.28);
font-size: 13px;
color: #ecfccb;
}
.contact-cards { display: flex; flex-direction: column; gap: 12px; }
.contact-card {
padding: 20px 22px;
border-radius: 22px;
background: rgba(255, 255, 255, 0.04);
border: 1px solid rgba(255, 255, 255, 0.11);
display: flex;
flex-direction: column;
gap: 8px;
}
.contact-card--primary {
background: linear-gradient(135deg, rgba(99, 102, 241, 0.16), rgba(56, 189, 248, 0.1));
border-color: rgba(129, 140, 248, 0.35);
}
.contact-card-kicker {
font-family: var(--mono);
font-size: 10px;
letter-spacing: 0.16em;
color: var(--cyan);
}
.contact-email-link {
font-family: var(--display);
font-size: clamp(20px, 2.4vw, 28px);
font-weight: 760;
display: inline-flex;
align-items: center;
gap: 8px;
color: #fff;
word-break: break-all;
}
.chip-action {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 6px 12px;
border-radius: 999px;
background: rgba(255, 255, 255, 0.08);
border: 1px solid rgba(255, 255, 255, 0.16);
font-size: 12px;
color: #e2e8f0;
}
.contact-card-row {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 12px;
}
.contact-card strong {
display: inline-flex;
align-items: center;
gap: 8px;
font-size: 15px;
}
/* Footer WhatsApp Button (pure icon, no raw number, no redundant kicker) */
.contact-card--wp {
display: flex;
align-items: center;
justify-content: center;
padding: 16px 20px;
background: rgba(37, 211, 102, 0.08);
border: 1px solid rgba(37, 211, 102, 0.28);
border-radius: 22px;
text-decoration: none;
transition: transform 0.2s ease, background 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}
.contact-card--wp:hover {
background: rgba(37, 211, 102, 0.16);
border-color: rgba(37, 211, 102, 0.6);
transform: translateY(-2px);
box-shadow: 0 8px 24px rgba(37, 211, 102, 0.28);
}
.contact-card--wp .wp-pure-icon {
display: inline-flex;
align-items: center;
justify-content: center;
color: #25d366;
}
.contact-card--wp .wp-pure-icon svg {
width: 28px;
height: 28px;
fill: currentColor;
}
.footer-main {
padding-block: 40px;
display: grid;
grid-template-columns: 1.5fr repeat(3, 1fr);
gap: 28px;
}
.footer-brand p {
margin-top: 14px;
max-width: 38ch;
color: var(--muted);
font-size: 14.5px;
}
.socials {
margin-top: 16px;
display: flex;
gap: 10px;
}
.socials a {
width: 40px;
height: 40px;
border-radius: 12px;
display: grid;
place-items: center;
background: rgba(255, 255, 255, 0.05);
border: 1px solid var(--line);
transition: border-color 0.2s ease, transform 0.2s ease;
}
.socials a:hover { border-color: var(--cyan); transform: translateY(-2px); }
.footer-column {
display: flex;
flex-direction: column;
gap: 10px;
}
.footer-column h3 {
font-family: var(--mono);
font-size: 11px;
text-transform: uppercase;
letter-spacing: 0.16em;
color: #fff;
margin-bottom: 4px;
}
.footer-column a {
font-size: 14px;
color: var(--muted);
}
.footer-column a:hover { color: #fff; }
.footer-lang-bar {
padding-block: 18px;
border-top: 1px solid rgba(255, 255, 255, 0.07);
display: flex;
align-items: center;
gap: 12px;
flex-wrap: wrap;
}
.footer-lang-title {
font-family: var(--mono);
font-size: 11px;
text-transform: uppercase;
letter-spacing: 0.14em;
color: var(--muted);
}
.footer-lang-list { display: flex; flex-wrap: wrap; gap: 8px; }
.footer-lang-pill {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 5px 11px;
border-radius: 999px;
background: rgba(255, 255, 255, 0.04);
border: 1px solid var(--line);
font-family: var(--mono);
font-size: 11px;
color: var(--muted);
}
.footer-lang-pill.is-active,
.footer-lang-pill:hover {
color: #fff;
border-color: var(--cyan);
background: rgba(56, 189, 248, 0.14);
}
.footer-bottom {
padding-top: 22px;
border-top: 1px solid rgba(255, 255, 255, 0.07);
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
flex-wrap: wrap;
font-size: 13.5px;
color: var(--muted);
}
.back-top {
display: inline-flex;
align-items: center;
gap: 6px;
color: #fff;
}
.footer-wordmark {
margin-top: 18px;
font-family: var(--display);
font-size: clamp(56px, 14.5vw, 200px);
font-weight: 800;
line-height: 0.82;
letter-spacing: -0.06em;
text-align: center;
background: linear-gradient(180deg, rgba(255, 255, 255, 0.09), rgba(255, 255, 255, 0.01));
-webkit-background-clip: text;
background-clip: text;
color: transparent;
user-select: none;
pointer-events: none;
}
/* DIALOGS (Video, Quick-Look App, 8-Language Picker) ---------------------- */
dialog {
border: 1px solid rgba(255, 255, 255, 0.18);
border-radius: 28px;
background: #0a0e1f;
color: var(--text);
padding: 0;
max-width: min(880px, calc(100vw - 28px));
width: 100%;
box-shadow: 0 32px 90px rgba(0, 0, 0, 0.85);
}
dialog::backdrop {
background: rgba(3, 5, 12, 0.78);
backdrop-filter: blur(10px);
}
.dialog-bar, .quick-dialog-top {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
padding: 16px 22px;
border-bottom: 1px solid rgba(255, 255, 255, 0.09);
}
.dialog-close {
width: 36px;
height: 36px;
border-radius: 50%;
display: grid;
place-items: center;
background: rgba(255, 255, 255, 0.07);
}
.dialog-content {
padding: 16px;
background: #04060e;
display: grid;
place-items: center;
}
.dialog-content video {
max-height: 76vh;
width: auto;
max-width: 100%;
border-radius: 16px;
}
.quick-dialog { max-width: min(640px, calc(100vw - 28px)); }
.quick-dialog-inner, .lang-dialog-inner { padding: 6px 22px 24px; }
.quick-hero {
margin-top: 18px;
display: flex;
align-items: center;
gap: 18px;
}
.quick-hero img {
width: 96px;
height: 96px;
border-radius: 22px;
flex: none;
}
.quick-hero h3 { font-family: var(--display); font-size: 24px; margin-top: 6px; }
.quick-about { margin-top: 16px; color: var(--muted); font-size: 14.8px; }
.quick-subhead {
margin-top: 18px;
margin-bottom: 10px;
font-family: var(--mono);
font-size: 11px;
text-transform: uppercase;
letter-spacing: 0.14em;
color: var(--cyan);
}
.quick-features {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 10px;
}
.quick-feat-item {
padding: 11px 13px;
border-radius: 14px;
background: rgba(255, 255, 255, 0.04);
border: 1px solid rgba(255, 255, 255, 0.08);
font-size: 13px;
}
.quick-feat-item strong { display: block; color: #fff; margin-bottom: 2px; }
.quick-privacy-note {
margin-top: 16px;
padding: 10px 14px;
border-radius: 14px;
background: rgba(45, 212, 191, 0.09);
border: 1px solid rgba(45, 212, 191, 0.25);
display: flex;
align-items: center;
gap: 10px;
font-size: 12.8px;
color: #ccfbf1;
}
.quick-actions {
margin-top: 20px;
display: flex;
align-items: center;
gap: 12px;
flex-wrap: wrap;
}
.lang-dialog { max-width: min(560px, calc(100vw - 28px)); }
.lang-dialog-sub { font-size: 13.5px; color: var(--muted); }
.lang-choice-grid {
margin-top: 18px;
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 10px;
}
.lang-choice-card {
padding: 12px 14px;
border-radius: 16px;
background: rgba(255, 255, 255, 0.04);
border: 1px solid var(--line);
display: flex;
align-items: center;
gap: 12px;
text-align: start;
}
.lang-choice-card.is-current,
.lang-choice-card:hover {
border-color: var(--cyan);
background: rgba(56, 189, 248, 0.12);
}
.lang-choice-meta { display: flex; flex-direction: column; flex: 1; }
.lang-choice-meta strong { font-size: 14.5px; color: #fff; }
.lang-choice-meta small { font-size: 11.5px; color: var(--muted); }
.lang-choice-check { opacity: 0; color: var(--lime); font-weight: 700; }
.lang-choice-card.is-current .lang-choice-check { opacity: 1; }
.lang-dialog-hint { margin-top: 14px; font-size: 12.5px; color: var(--muted); text-align: center; }
/* SUBPAGES: App Detail & Legal Center ------------------------------------- */
.detail-main { padding-block: clamp(32px, 5vw, 68px); position: relative; z-index: 2; }
.detail-topbar {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
flex-wrap: wrap;
margin-bottom: 24px;
}
.back-link, .back {
display: inline-flex;
align-items: center;
gap: 8px;
font-size: 14px;
font-weight: 600;
color: var(--cyan);
}
.detail-pager { display: inline-flex; gap: 14px; font-size: 13.5px; color: var(--muted); }
.detail-pager a:hover { color: #fff; }
.detail-hero {
padding: clamp(24px, 4vw, 42px);
border-radius: 30px;
background:
radial-gradient(circle at 15% 20%, color-mix(in srgb, var(--accent, #6366f1) 28%, transparent), transparent 58%),
rgba(255, 255, 255, 0.04);
border: 1px solid rgba(255, 255, 255, 0.13);
display: grid;
grid-template-columns: auto 1fr;
gap: clamp(22px, 4vw, 40px);
align-items: center;
}
.detail-icon {
width: clamp(140px, 18vw, 210px);
height: clamp(140px, 18vw, 210px);
border-radius: 38px;
box-shadow: 0 24px 54px rgba(0, 0, 0, 0.55);
}
.detail-badges { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; }
.platform-pill, .store-soon-badge {
padding: 6px 13px;
border-radius: 999px;
background: rgba(255, 255, 255, 0.06);
border: 1px solid var(--line);
font-family: var(--mono);
font-size: 11px;
color: var(--muted);
}
.detail-hero h1 { font-size: clamp(30px, 4.2vw, 50px); }
.detail-tagline { margin-top: 10px; font-size: 18px; color: #dbeafe; }
.detail-store-row { margin-top: 20px; }
.detail-privacy-strip {
margin-top: 18px;
padding: 10px 14px;
border-radius: 14px;
background: rgba(45, 212, 191, 0.08);
border: 1px solid rgba(45, 212, 191, 0.24);
display: inline-flex;
align-items: center;
gap: 10px;
flex-wrap: wrap;
font-size: 13px;
}
.detail-privacy-strip a { color: var(--cyan); font-weight: 700; }
.detail-section { margin-top: 38px; }
.detail-section h2 { font-size: 26px; margin-bottom: 16px; }
.feature-grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 16px;
}
.feature-card {
padding: 22px;
border-radius: 22px;
background: rgba(255, 255, 255, 0.04);
border: 1px solid var(--line);
}
.feature-emoji { font-size: 26px; display: block; margin-bottom: 8px; }
.feature-card h3 { font-family: var(--display); font-size: 18px; margin-bottom: 6px; }
.feature-card p { color: var(--muted); font-size: 14.5px; }
.detail-columns {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 24px;
}
.steps-list { display: flex; flex-direction: column; gap: 10px; }
.steps-list li, .permission-card, .doc-card {
padding: 16px 18px;
border-radius: 18px;
background: rgba(255, 255, 255, 0.038);
border: 1px solid var(--line);
}
.steps-list li { display: flex; align-items: center; gap: 12px; }
.step-num {
font-family: var(--mono);
font-size: 12px;
color: var(--cyan);
padding: 4px 8px;
border-radius: 8px;
background: rgba(56, 189, 248, 0.12);
}
.permissions-stack { display: flex; flex-direction: column; gap: 10px; }
.permission-card p { color: var(--muted); font-size: 14px; margin-top: 4px; }
.faq-list { display: flex; flex-direction: column; gap: 10px; }
details {
padding: 16px 20px;
border-radius: 18px;
background: rgba(255, 255, 255, 0.04);
border: 1px solid var(--line);
}
summary { font-weight: 700; cursor: pointer; }
details p { margin-top: 10px; color: var(--muted); }
details a { color: var(--cyan); }
.related-head {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
flex-wrap: wrap;
margin-bottom: 16px;
}
.related-grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 14px;
}
.related-app-card {
padding: 14px;
border-radius: 20px;
background: rgba(255, 255, 255, 0.04);
border: 1px solid var(--line);
display: flex;
align-items: center;
gap: 14px;
transition: transform 0.2s ease, border-color 0.2s ease;
}
.related-app-card:hover {
transform: translateY(-2px);
border-color: var(--accent, var(--cyan));
}
.related-app-card img { width: 60px; height: 60px; border-radius: 15px; flex: none; }
.related-app-card small { font-family: var(--mono); font-size: 10px; color: var(--cyan); display: block; }
.related-app-card strong { font-family: var(--display); font-size: 15.5px; display: block; }
.related-app-card span {
font-size: 12.5px;
color: var(--muted);
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
/* Legal Center Styles ----------------------------------------------------- */
.legal-hero {
padding-block: 36px 24px;
display: flex;
align-items: center;
gap: 20px;
flex-wrap: wrap;
}
.legal-hero img { width: 80px; height: 80px; border-radius: 20px; }
.legal {
padding-bottom: 64px;
display: grid;
grid-template-columns: 250px minmax(0, 1fr);
gap: 28px;
align-items: start;
}
.toc {
position: sticky;
top: 100px;
padding: 18px;
border-radius: 20px;
background: rgba(255, 255, 255, 0.04);
border: 1px solid var(--line);
display: flex;
flex-direction: column;
gap: 8px;
}
.toc a { font-size: 13.5px; color: var(--muted); }
.toc a:hover { color: #fff; }
.doc {
display: flex;
flex-direction: column;
gap: 22px;
}
.doc section {
padding: 22px;
border-radius: 22px;
background: rgba(255, 255, 255, 0.035);
border: 1px solid var(--line);
}
.doc h2 { font-size: 22px; margin-bottom: 10px; }
.doc h3 { font-size: 17px; margin-top: 14px; margin-bottom: 6px; }
.doc p, .doc li { color: var(--muted); }
.doc a { color: var(--cyan); }
.privacy-summary, .privacy-intro {
padding: 20px;
border-radius: 20px;
background: rgba(45, 212, 191, 0.09);
border: 1px solid rgba(45, 212, 191, 0.28);
display: flex;
align-items: flex-start;
gap: 14px;
margin-block: 14px;
}
.privacy-intro { flex-direction: column; }
.privacy-seal {
width: 32px;
height: 32px;
border-radius: 50%;
display: grid;
place-items: center;
background: var(--teal);
color: #041014;
font-weight: 800;
flex: none;
}
.kv {
width: 100%;
border-collapse: collapse;
margin-top: 12px;
}
.kv th, .kv td {
padding: 10px 12px;
border-bottom: 1px solid var(--line);
text-align: start;
font-size: 14px;
}
.kv th { color: var(--muted); width: 45%; }
.lrows {
margin-top: 22px;
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 12px;
}
.lrow {
padding: 14px 16px;
border-radius: 18px;
background: rgba(255, 255, 255, 0.04);
border: 1px solid var(--line);
display: flex;
align-items: center;
gap: 12px;
}
.lrow:hover { border-color: var(--cyan); }
.lrow img { width: 44px; height: 44px; border-radius: 11px; flex: none; }
.lrow span { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.lrow small { color: var(--muted); font-size: 12px; }
.lrow em { font-style: normal; font-size: 12.5px; color: var(--cyan); white-space: nowrap; }
.toast {
position: fixed;
bottom: 90px;
inset-inline-end: 24px;
z-index: 150;
padding: 12px 18px;
border-radius: 14px;
background: #101835;
border: 1px solid var(--cyan);
color: #fff;
font-size: 13.5px;
box-shadow: 0 14px 36px rgba(0, 0, 0, 0.55);
}
/* Responsive Breakpoints (100% Fit on 390px & 360px) ---------------------- */
@media (max-width: 1100px) {
.catalog-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.principles-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.music-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.related-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 960px) {
.wrap { width: calc(100% - 32px); }
.menu-toggle { display: grid; }
.header-cta { display: none; }
.main-nav {
position: fixed;
top: calc(var(--header-h) + 8px);
inset-inline: 16px;
flex-direction: column;
align-items: stretch;
padding: 14px;
border-radius: 22px;
background: rgba(7, 10, 24, 0.96);
border: 1px solid var(--line-strong);
box-shadow: 0 24px 60px rgba(0, 0, 0, 0.75);
display: none;
}
.main-nav.is-open { display: flex; }
.universe-intro,
.about-header-grid,
.contact-deck,
.detail-hero,
.detail-columns,
.legal {
grid-template-columns: 1fr;
}
.vitrine-bottom {
grid-template-columns: 1fr;
justify-items: center;
text-align: center;
}
.orbit-spotlight { justify-self: center; max-width: 100%; }
.media-interlude,
.track-list,
.footer-main,
.lrows {
grid-template-columns: 1fr;
}
}
@media (max-width: 640px) {
.wrap { width: calc(100% - 24px); }
.sound-caption { display: none; }
.hero-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.catalog-grid,
.music-grid,
.principles-grid,
.feature-grid,
.related-grid,
.quick-features,
.lang-choice-grid,
.contact-card-row {
grid-template-columns: 1fr;
}
.search { min-width: 100%; }
.kids-panel { min-height: 580px; padding: 20px; padding-bottom: 74px; }
.kids-caption { top: 14px; inset-inline-start: 14px; inset-inline-end: auto; font-size: 10px; }
.kids-scene-controls { bottom: 14px; inset-inline-end: 14px; }
.player {
flex-wrap: wrap;
inset-inline: 10px;
bottom: 10px;
padding: 12px;
gap: 10px;
}
.player-volume-wrap { display: none; }
.player-timeline { width: 100%; order: 4; flex: 1 1 100%; }
}
/* Reduced Motion Compliance ----------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after {
animation-duration: 0.001ms !important;
animation-iteration-count: 1 !important;
scroll-behavior: auto !important;
}
.golden-bubbles { display: none !important; }
.kids-slide { transition-duration: 0s !important; }
}
/* =========================================================================
PHASE 2 ENHANCEMENTS — DUAL BRAND LOGOS, PLATFORM STRIPS, PULSING STUDIO
SPEAKERS (CLICK TO MUTE), CUTE CLOSE BUTTON, HOME ICON & RICH APP PREVIEWS
========================================================================= */
/* 1 · Dual Brand Cluster (logo.webp + techmak STUDIO + techmaklogo.png) & Header Platforms */
.brand-cluster {
display: inline-flex;
align-items: center;
gap: 12px;
flex-shrink: 0;
}
.brand {
display: inline-flex;
align-items: center;
gap: 10px;
text-decoration: none;
}
.brand-logo {
width: 38px;
height: 38px;
border-radius: 11px;
object-fit: cover;
box-shadow: 0 4px 14px rgba(0, 0, 0, 0.4);
}
.brand-word {
font-family: var(--display);
font-size: 19px;
font-weight: 800;
letter-spacing: -0.02em;
color: #fff;
display: flex;
align-items: baseline;
gap: 5px;
line-height: 1;
}
.brand-word small {
font-family: var(--mono);
font-size: 9px;
font-weight: 700;
letter-spacing: 0.18em;
color: var(--cyan);
}
.brand-sep {
width: 1px;
height: 22px;
background: rgba(255, 255, 255, 0.16);
flex-shrink: 0;
}
.brand-parent {
display: inline-flex;
align-items: center;
gap: 7px;
padding: 4px 10px 4px 4px;
border-radius: 999px;
background: rgba(255, 255, 255, 0.05);
border: 1px solid rgba(255, 255, 255, 0.12);
text-decoration: none;
transition: background 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}
.brand-parent:hover {
background: rgba(255, 255, 255, 0.09);
border-color: rgba(255, 255, 255, 0.24);
transform: translateY(-1px);
}
.brand-parent img {
width: 24px;
height: 24px;
border-radius: 50%;
object-fit: contain;
background: #fff;
padding: 2px;
}
.brand-parent-text {
display: flex;
flex-direction: column;
line-height: 1.05;
font-family: var(--display);
font-size: 11px;
font-weight: 800;
letter-spacing: 0.04em;
color: #fff;
}
.brand-parent-text small {
font-family: var(--mono);
font-size: 7.5px;
letter-spacing: 0.12em;
color: #fde68a;
}
.header-platform-icons {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 4px 10px;
border-radius: 999px;
background: rgba(255, 255, 255, 0.05);
border: 1px solid rgba(255, 255, 255, 0.14);
}
.header-plat-icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 20px;
height: 20px;
color: #94a3b8;
opacity: 0.85;
transition: opacity 0.2s ease, transform 0.2s ease, filter 0.2s ease, color 0.2s ease;
}
.header-plat-icon.plat-android { color: #3ddc84; }
.header-plat-icon.plat-apple { color: #f5f5f7; }
.header-plat-icon.plat-win98 { color: #38bdf8; }
.header-plat-icon:hover {
opacity: 1;
transform: translateY(-1px) scale(1.15);
}
.header-plat-icon.plat-android:hover { filter: drop-shadow(0 0 6px rgba(61, 220, 132, 0.75)); }
.header-plat-icon.plat-apple:hover { filter: drop-shadow(0 0 6px rgba(255, 255, 255, 0.85)); }
.header-plat-icon.plat-win98:hover { filter: drop-shadow(0 0 6px rgba(56, 189, 248, 0.75)); }
.header-plat-icon .brand-ico {
width: 16px;
height: 16px;
}
.brand-ico {
display: inline-block;
vertical-align: middle;
width: 16px;
height: 16px;
flex-shrink: 0;
fill: currentColor;
}
/* 2 · Hero Dual Company Banner & Platform Strip (Xbox, PC, Android, Mac, Apple, Steam, Windows) */
.hero-company-banner {
display: inline-flex;
align-items: center;
gap: 12px;
flex-wrap: wrap;
padding: 8px 14px;
border-radius: 20px;
background: rgba(12, 17, 36, 0.78);
border: 1px solid rgba(255, 255, 255, 0.15);
box-shadow: 0 14px 36px rgba(0, 0, 0, 0.35);
align-self: flex-start;
}
.company-badge-item {
display: inline-flex;
align-items: center;
gap: 10px;
}
.company-badge-item img {
width: 40px;
height: 40px;
border-radius: 11px;
object-fit: contain;
background: rgba(255, 255, 255, 0.08);
padding: 3px;
}
.company-badge-item--parent img {
background: rgba(255, 255, 255, 0.95);
border-radius: 50%;
}
.company-badge-item small {
display: block;
font-family: var(--mono);
font-size: 9.5px;
letter-spacing: 0.14em;
color: var(--cyan);
}
.company-badge-item--parent small {
color: #fbbf24;
}
.company-badge-item strong {
font-family: var(--display);
font-size: 14.5px;
color: #fff;
}
.company-badge-divider {
color: rgba(255, 255, 255, 0.3);
font-weight: 700;
}
.planet-satellite-badge {
position: absolute;
bottom: 18px;
inset-inline-start: 14px;
z-index: 4;
display: inline-flex;
align-items: center;
gap: 8px;
padding: 6px 12px 6px 6px;
border-radius: 999px;
background: rgba(9, 13, 28, 0.88);
border: 1px solid rgba(245, 158, 11, 0.5);
box-shadow: 0 12px 28px rgba(0, 0, 0, 0.55);
}
.planet-satellite-badge img {
width: 34px;
height: 34px;
border-radius: 50%;
background: #fff;
padding: 2px;
object-fit: contain;
}
.planet-satellite-badge span {
font-family: var(--mono);
font-size: 10.5px;
font-weight: 700;
letter-spacing: 0.14em;
color: #fde68a;
}
.hero-platform-strip {
display: flex;
flex-wrap: wrap;
gap: 8px;
margin-top: 2px;
}
.hero-plat-chip {
display: inline-flex;
align-items: center;
gap: 7px;
padding: 7px 13px;
border-radius: 999px;
background: rgba(255, 255, 255, 0.055);
border: 1px solid rgba(255, 255, 255, 0.15);
font-family: var(--mono);
font-size: 11px;
letter-spacing: 0.08em;
color: #f1f5f9;
transition: transform 0.2s ease, border-color 0.2s ease, background 0.2s ease;
}
.hero-plat-chip:hover {
transform: translateY(-2px);
border-color: var(--cyan);
background: rgba(56, 189, 248, 0.14);
}
.hero-plat-chip svg {
width: 15px;
height: 15px;
}
.hero-plat-chip--xbox {
border-color: rgba(52, 211, 153, 0.42);
background: rgba(16, 185, 129, 0.13);
color: #d1fae5;
}
.hero-plat-chip--xbox svg { color: #34d399; }
.hero-plat-chip--android {
border-color: rgba(163, 230, 53, 0.42);
background: rgba(132, 204, 22, 0.12);
}
.hero-plat-chip--android svg { color: #a3e635; }
.hero-plat-chip--pc svg,
.hero-plat-chip--windows svg { color: #38bdf8; }
.hero-plat-chip--mac svg,
.hero-plat-chip--apple svg { color: #f8fafc; }
.hero-plat-chip--steam svg { color: #a78bfa; }
/* 3 · Platform Badges Next to OYUN · TECHMAK STUDIO (Detail & Quick Preview) */
.platform-badges-cluster {
display: inline-flex;
flex-wrap: wrap;
align-items: center;
gap: 8px;
}
.platform-pill {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 6px 12px;
border-radius: 999px;
background: rgba(255, 255, 255, 0.06);
border: 1px solid rgba(255, 255, 255, 0.16);
font-family: var(--mono);
font-size: 11px;
font-weight: 600;
color: #e2e8f0;
}
.platform-pill svg {
width: 14px;
height: 14px;
flex: none;
}
.platform-pill--android {
background: rgba(16, 185, 129, 0.14);
border-color: rgba(52, 211, 153, 0.4);
color: #d1fae5;
}
.platform-pill--android svg { color: #34d399; }
.platform-pill--apple {
background: rgba(255, 255, 255, 0.08);
border-color: rgba(255, 255, 255, 0.24);
color: #f8fafc;
}
.platform-pill--steam {
background: rgba(99, 102, 241, 0.15);
border-color: rgba(129, 140, 248, 0.4);
color: #e0e7ff;
}
.platform-pill--steam svg { color: #a5b4fc; }
.platform-pill--windows {
background: rgba(56, 189, 248, 0.13);
border-color: rgba(56, 189, 248, 0.38);
color: #e0f2fe;
}
.platform-pill--windows svg { color: #38bdf8; }
/* 4 · Card Mini Platform Icons & Feature Chips on Catalogue Cards */
.card-platform-mini {
position: absolute;
bottom: 10px;
inset-inline-end: 12px;
z-index: 2;
display: inline-flex;
align-items: center;
gap: 5px;
padding: 4px 8px;
border-radius: 999px;
background: rgba(6, 8, 18, 0.76);
border: 1px solid rgba(255, 255, 255, 0.14);
color: #cbd5e1;
}
.card-platform-mini svg {
width: 12px;
height: 12px;
}
.card-feat-chips {
margin-top: 8px;
display: flex;
flex-wrap: wrap;
gap: 6px;
}
.card-feat-chip {
display: inline-flex;
align-items: center;
gap: 5px;
padding: 4px 9px;
border-radius: 999px;
background: rgba(255, 255, 255, 0.055);
border: 1px solid rgba(255, 255, 255, 0.11);
font-size: 11px;
font-weight: 600;
color: #dbeafe;
max-width: 100%;
}
.card-feat-chip i {
font-style: normal;
font-size: 12.5px;
}
.card-feat-chip span {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
/* 5 · Cute Close Button ("Şirin Kapatma Tuşu") & Enriched Quick-Look Modal */
.quick-dialog {
width: min(860px, calc(100vw - 24px));
}
.quick-top-left {
display: inline-flex;
align-items: center;
gap: 10px;
flex-wrap: wrap;
}
.modal-home-btn {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 7px 13px;
border-radius: 999px;
background: rgba(56, 189, 248, 0.15);
border: 1px solid rgba(56, 189, 248, 0.4);
color: #e0f2fe;
font-size: 12.5px;
font-weight: 700;
transition: transform 0.2s ease, background 0.2s ease;
}
.modal-home-btn:hover {
transform: translateY(-1px);
background: rgba(56, 189, 248, 0.28);
}
.modal-home-btn svg {
width: 15px;
height: 15px;
color: var(--cyan);
}
.cute-close-btn {
width: auto !important;
height: auto !important;
padding: 8px 16px !important;
border-radius: 999px !important;
display: inline-flex !important;
align-items: center;
gap: 7px;
background: linear-gradient(135deg, #fb7185, #ec4899, #a855f7) !important;
border: 2px solid rgba(255, 255, 255, 0.45) !important;
color: #fff !important;
font-family: var(--display);
font-size: 13px;
font-weight: 800;
box-shadow: 0 10px 24px rgba(236, 72, 153, 0.42);
transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.25s ease;
}
.cute-close-btn:hover {
transform: scale(1.08) rotate(-3deg);
box-shadow: 0 14px 30px rgba(236, 72, 153, 0.62);
}
.cute-close-face {
font-size: 15px;
line-height: 1;
}
.cute-close-x {
width: 20px;
height: 20px;
border-radius: 50%;
background: rgba(255, 255, 255, 0.24);
display: inline-grid;
place-items: center;
font-size: 11px;
}
.quick-hero-meta {
display: flex;
flex-direction: column;
gap: 8px;
}
.quick-badges-row {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 8px;
}
.quick-dialog .app-kind {
position: static;
display: inline-flex;
align-items: center;
padding: 6px 12px;
border-radius: 999px;
background: rgba(99, 102, 241, 0.16);
border: 1px solid rgba(129, 140, 248, 0.42);
color: #e0e7ff;
font-family: var(--mono);
font-size: 11px;
font-weight: 700;
}
.quick-subhead {
display: inline-flex;
align-items: center;
gap: 7px;
}
.quick-subhead svg {
width: 15px;
height: 15px;
color: var(--lime);
}
.quick-features {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 12px;
}
.quick-feat-item {
padding: 14px;
border-radius: 18px;
background:
radial-gradient(circle at 0% 0%, color-mix(in srgb, var(--accent, #6366f1) 18%, transparent), transparent 70%),
rgba(255, 255, 255, 0.045);
border: 1px solid rgba(255, 255, 255, 0.12);
display: flex;
align-items: flex-start;
gap: 12px;
transition: transform 0.2s ease, border-color 0.2s ease;
}
.quick-feat-item:hover {
transform: translateY(-2px);
border-color: var(--accent, var(--cyan));
}
.quick-feat-emoji {
width: 42px;
height: 42px;
border-radius: 13px;
background: rgba(255, 255, 255, 0.08);
border: 1px solid rgba(255, 255, 255, 0.16);
display: grid;
place-items: center;
font-size: 21px;
flex: none;
}
.quick-feat-copy {
display: flex;
flex-direction: column;
gap: 4px;
min-width: 0;
}
.quick-feat-copy strong {
font-size: 13.8px;
color: #fff;
display: flex;
align-items: center;
gap: 6px;
flex-wrap: wrap;
}
.quick-feat-idx {
font-family: var(--mono);
font-size: 10px;
padding: 2px 6px;
border-radius: 6px;
background: rgba(56, 189, 248, 0.16);
color: var(--cyan);
}
.quick-feat-copy span {
font-size: 12.6px;
color: var(--muted);
line-height: 1.48;
}
/* 6 · Interactive Side Studio Speakers (Ported from websitesi/techmakstudio) */
.speaker-container {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
pointer-events: none;
z-index: 88;
opacity: 0;
visibility: hidden;
transition: opacity 0.4s ease, visibility 0.4s ease;
}
.speaker-container.active {
opacity: 1;
visibility: visible;
}
.speaker-container.is-muted {
opacity: 0.55;
}
.speaker-container.is-muted .speaker:hover { opacity: 1; }
.speaker {
position: fixed;
bottom: 26px;
top: auto;
width: 78px;
height: 152px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
pointer-events: auto;
cursor: pointer;
background: none;
border: none;
padding: 0;
transition: transform 0.25s ease, filter 0.25s ease;
}
.speaker:hover {
transform: translateY(-4px) scale(1.06);
}
.speaker-left {
left: 14px;
}
.speaker-right {
right: 14px;
}
.speaker-body {
width: 68px;
height: 126px;
background: linear-gradient(145deg, #1e1e2e 0%, #12121a 50%, #0a0a12 100%);
border-radius: 16px;
border: 2px solid rgba(168, 85, 247, 0.55);
box-shadow:
0 10px 36px rgba(0, 0, 0, 0.75),
0 0 28px rgba(168, 85, 247, 0.28),
inset 0 2px 4px rgba(255, 255, 255, 0.12);
display: flex;
flex-direction: column;
align-items: center;
justify-content: space-around;
padding: 12px 8px;
position: relative;
overflow: hidden;
}
.speaker-container.is-pumping .speaker-body {
animation: speakerGlow 1.8s ease-in-out infinite;
}
.speaker-tweeter {
width: 22px;
height: 22px;
background: radial-gradient(circle, #38bdf8 0%, #6366f1 55%, #1e1e2e 100%);
border-radius: 50%;
border: 2px solid rgba(56, 189, 248, 0.65);
box-shadow: 0 0 14px rgba(56, 189, 248, 0.55);
}
.speaker-container.is-pumping .speaker-tweeter {
animation: tweeterPulse 0.42s ease-in-out infinite alternate;
}
.speaker-cone {
width: 46px;
height: 46px;
background: radial-gradient(circle, #2a2a3e 0%, #1a1a28 45%, #0f0f18 75%, #252538 100%);
border-radius: 50%;
border: 3px solid rgba(168, 85, 247, 0.6);
display: flex;
align-items: center;
justify-content: center;
box-shadow:
inset 0 4px 12px rgba(0, 0, 0, 0.8),
0 0 18px rgba(168, 85, 247, 0.35);
}
.speaker-container.is-pumping .speaker-cone {
animation: coneBass 0.55s ease-in-out infinite alternate;
}
.speaker-dust-cap {
width: 16px;
height: 16px;
background: radial-gradient(circle at 30% 30%, #c084fc 0%, #6366f1 65%, #3b3b5c 100%);
border-radius: 50%;
box-shadow: 0 2px 8px rgba(168, 85, 247, 0.65);
}
.speaker-container.is-pumping .speaker-dust-cap {
animation: dustCapPump 0.28s ease-in-out infinite alternate;
}
.sound-waves {
position: absolute;
width: 100%;
height: 100%;
display: flex;
align-items: center;
pointer-events: none;
}
.speaker-left .sound-waves {
left: 74px;
justify-content: flex-start;
}
.speaker-right .sound-waves {
right: 74px;
justify-content: flex-end;
}
.wave {
position: absolute;
border: 2px solid transparent;
border-radius: 50%;
opacity: 0;
}
.speaker-container.is-pumping .wave {
animation: soundWave 1.45s ease-out infinite;
}
.speaker-left .wave {
border-right-color: rgba(56, 189, 248, 0.7);
border-top-color: rgba(168, 85, 247, 0.45);
border-bottom-color: rgba(168, 85, 247, 0.45);
}
.speaker-right .wave {
border-left-color: rgba(56, 189, 248, 0.7);
border-top-color: rgba(168, 85, 247, 0.45);
border-bottom-color: rgba(168, 85, 247, 0.45);
}
.wave-1 { width: 28px; height: 56px; animation-delay: 0s !important; }
.wave-2 { width: 46px; height: 84px; animation-delay: 0.32s !important; }
.wave-3 { width: 64px; height: 112px; animation-delay: 0.64s !important; }
.speaker-status-pill {
margin-top: 7px;
padding: 4px 9px;
border-radius: 999px;
background: rgba(8, 12, 26, 0.92);
border: 1px solid rgba(56, 189, 248, 0.45);
font-family: var(--mono);
font-size: 9.5px;
font-weight: 700;
color: #e0f2fe;
white-space: nowrap;
box-shadow: 0 6px 16px rgba(0, 0, 0, 0.5);
}
.speaker-tip {
margin-top: 8px;
padding: 3px 9px;
border-radius: 999px;
background: rgba(15, 23, 42, 0.9);
border: 1px solid rgba(244, 63, 94, 0.5);
color: #fecdd3;
font-family: var(--mono);
font-size: 10px;
font-weight: 700;
letter-spacing: 0.05em;
white-space: nowrap;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
transition: transform 0.2s ease, background 0.2s ease, border-color 0.2s ease;
}
.speaker:hover .speaker-tip {
transform: scale(1.08);
background: rgba(225, 29, 72, 0.9);
color: #fff;
}
.speaker-container.is-muted .speaker-body {
border-color: rgba(148, 163, 184, 0.3);
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5);
opacity: 0.65;
}
.speaker-container.is-muted .speaker-status-pill {
border-color: rgba(244, 63, 94, 0.45);
color: #fecdd3;
}
@keyframes speakerGlow {
0%, 100% {
box-shadow: 0 10px 36px rgba(0, 0, 0, 0.75), 0 0 24px rgba(168, 85, 247, 0.25);
}
50% {
box-shadow: 0 10px 36px rgba(0, 0, 0, 0.75), 0 0 42px rgba(56, 189, 248, 0.55);
}
}
@keyframes tweeterPulse {
from { transform: scale(1); }
to { transform: scale(1.12); box-shadow: 0 0 20px rgba(56, 189, 248, 0.9); }
}
@keyframes coneBass {
from { transform: scale(1); }
to { transform: scale(1.09); border-color: rgba(56, 189, 248, 0.85); }
}
@keyframes dustCapPump {
from { transform: scale(1); }
to { transform: scale(1.22); }
}
@keyframes soundWave {
0% { opacity: 0.85; transform: scale(0.8); }
100% { opacity: 0; transform: scale(1.45); }
}
/* 7 · Minik Kalpler 3s Timer Pill & Techmaksan Gallery (#studyo) ---------- */
.kids-top-badges {
display: flex;
align-items: center;
gap: 10px;
flex-wrap: wrap;
}
.kids-timer-pill {
padding: 4px 10px;
border-radius: 999px;
background: rgba(198, 255, 78, 0.16);
border: 1px solid rgba(198, 255, 78, 0.42);
font-family: var(--mono);
font-size: 10.5px;
font-weight: 700;
color: var(--lime);
}
.techmaksan-corp-card {
margin-top: 18px;
padding: 20px 22px;
border-radius: 24px;
background: linear-gradient(135deg, rgba(245, 158, 11, 0.16), rgba(12, 17, 36, 0.92) 45%, rgba(37, 99, 235, 0.18));
border: 1px solid rgba(245, 158, 11, 0.42);
box-shadow: 0 16px 36px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.08);
display: flex;
flex-direction: column;
gap: 16px;
}
.about-corp-header {
display: flex;
align-items: center;
gap: 14px;
}
.techmaksan-corp-card img {
width: 60px;
height: 60px;
border-radius: 50%;
background: #fff;
padding: 3px;
object-fit: contain;
flex: none;
box-shadow: 0 4px 14px rgba(0, 0, 0, 0.4);
}
.corp-kicker {
font-family: var(--mono);
font-size: 10px;
font-weight: 700;
letter-spacing: 0.16em;
color: #fde68a;
display: block;
}
.techmaksan-corp-card strong {
font-family: var(--display);
font-size: 18px;
color: #fff;
display: block;
margin-top: 2px;
}
.techmaksan-corp-card p {
font-size: 13px;
color: #cbd5e1;
margin-top: 4px;
line-height: 1.45;
}
.corp-sectors {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 10px;
padding-top: 12px;
border-top: 1px solid rgba(255, 255, 255, 0.1);
}
.corp-sector-item {
display: flex;
align-items: flex-start;
gap: 10px;
padding: 11px 12px;
border-radius: 14px;
background: rgba(255, 255, 255, 0.045);
border: 1px solid rgba(255, 255, 255, 0.09);
transition: transform 0.2s ease, border-color 0.2s ease, background 0.2s ease;
}
.corp-sector-item:hover {
transform: translateY(-2px);
background: rgba(255, 255, 255, 0.08);
border-color: rgba(245, 158, 11, 0.45);
}
.sector-icon {
font-size: 18px;
line-height: 1;
flex: none;
margin-top: 2px;
}
.sector-copy {
display: flex;
flex-direction: column;
line-height: 1.3;
}
.sector-copy strong {
font-family: var(--display);
font-size: 12.5px;
font-weight: 700;
color: #fff;
margin-top: 0;
}
.sector-copy span {
font-size: 11px;
color: #94a3b8;
margin-top: 2px;
}
.corp-action-row {
display: flex;
align-items: center;
justify-content: space-between;
gap: 14px;
flex-wrap: wrap;
padding-top: 6px;
}
.corp-visit-btn {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 9px 18px;
font-size: 13px;
font-weight: 700;
border-radius: 999px;
text-decoration: none;
}
.corp-visit-btn svg {
width: 14px;
height: 14px;
}
.corp-url-hint {
font-family: var(--mono);
font-size: 11px;
color: #fde68a;
letter-spacing: 0.06em;
}
.techmaksan-gallery {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 16px;
}
.tm-gallery-card {
margin: 0;
border-radius: 22px;
overflow: hidden;
background: rgba(10, 14, 30, 0.76);
border: 1px solid rgba(255, 255, 255, 0.14);
display: flex;
flex-direction: column;
transition: transform 0.25s ease, border-color 0.25s ease;
}
.tm-gallery-card:hover {
transform: translateY(-4px);
border-color: var(--cyan);
}
.tm-gallery-card img {
width: 100%;
height: 210px;
object-fit: cover;
}
.tm-gallery-card figcaption {
padding: 14px 16px;
display: flex;
flex-direction: column;
gap: 3px;
}
.tm-gallery-card small {
font-family: var(--mono);
font-size: 10px;
letter-spacing: 0.12em;
color: var(--cyan);
}
.tm-gallery-card strong {
font-family: var(--display);
font-size: 16px;
color: #fff;
}
.detail-nav-left {
display: inline-flex;
align-items: center;
gap: 10px;
flex-wrap: wrap;
}
.feature-card-top {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 10px;
}
.feature-card .feature-emoji {
margin-bottom: 0;
width: 48px;
height: 48px;
border-radius: 14px;
background: rgba(255, 255, 255, 0.07);
border: 1px solid rgba(255, 255, 255, 0.15);
display: grid;
place-items: center;
}
.feature-num {
font-family: var(--mono);
font-size: 11px;
color: var(--cyan);
padding: 4px 8px;
border-radius: 999px;
background: rgba(56, 189, 248, 0.12);
}
@media (max-width: 1120px) {
.header-platform-icons { display: none !important; }
.techmaksan-gallery { grid-template-columns: 1fr; }
}
@media (max-width: 960px) {
.speaker-container, .speaker { display: none !important; }
.sound-waves { display: none !important; }
}
@media (max-width: 768px) {
.speaker-container, .speaker { display: none !important; }
.sound-waves { display: none !important; }
.quick-features { grid-template-columns: 1fr; }
.corp-sectors { grid-template-columns: 1fr; }
.corp-action-row { flex-direction: column; align-items: stretch; gap: 8px; }
.corp-visit-btn { justify-content: center; }
.corp-url-hint { text-align: center; }
}
@media (max-width: 640px) {
.brand-parent-text { display: none; }
.brand-sep { display: none; }
.brand-cluster { gap: 8px; }
.brand-parent { padding: 3px; }
}
/* Windows 98 Nostalgic Flying Flag Icon */
.plat-win98-ico {
width: 22px;
height: 22px;
filter: drop-shadow(0 2px 5px rgba(0, 0, 0, 0.45));
}
/* Footer Secret Admin Trigger ("yönetici paneli gizli belli belirsiz olmalı") */
.admin-secret-trigger {
background: transparent;
border: none;
color: var(--muted);
opacity: 0.22;
font-size: 11px;
cursor: pointer;
padding: 4px 6px;
border-radius: 4px;
line-height: 1;
transition: opacity 0.25s ease, transform 0.25s ease, color 0.25s ease;
vertical-align: middle;
}
.admin-secret-trigger:hover,
.admin-secret-trigger:focus-visible {
opacity: 0.85;
transform: scale(1.18);
color: var(--cyan);
}
/* Store Legal WhatsApp & Email Contact Pills */
.contact-wp-pill {
display: inline-flex;
align-items: center;
gap: 8px;
background: #25d366;
color: #0b141a !important;
font-weight: 700;
font-size: 13.5px;
padding: 8px 16px;
border-radius: 999px;
text-decoration: none;
box-shadow: 0 4px 14px rgba(37, 211, 102, 0.35);
transition: transform 0.2s ease, box-shadow 0.2s ease, filter 0.2s ease;
}
.contact-wp-pill:hover {
transform: translateY(-2px);
box-shadow: 0 6px 20px rgba(37, 211, 102, 0.55);
filter: brightness(1.06);
}
.contact-wp-pill svg {
width: 18px;
height: 18px;
fill: currentColor;
flex-shrink: 0;
}
.contact-email-pill {
display: inline-flex;
align-items: center;
gap: 8px;
background: rgba(255, 255, 255, 0.08);
color: #f1f5f9 !important;
font-weight: 600;
font-size: 13px;
padding: 8px 16px;
border-radius: 999px;
border: 1px solid rgba(255, 255, 255, 0.16);
text-decoration: none;
transition: background 0.2s ease, transform 0.2s ease;
}
.contact-email-pill:hover {
background: rgba(255, 255, 255, 0.14);
transform: translateY(-2px);
}
/* ==========================================================================
MAINTENANCE MODE FULL-SCREEN OVERLAY ("Sayfamız Yenileniyor")
========================================================================== */
.maintenance-overlay {
position: fixed;
inset: 0;
z-index: 999999;
display: flex;
align-items: center;
justify-content: center;
padding: 24px;
}
.maintenance-overlay[hidden] {
display: none !important;
}
.maintenance-backdrop {
position: absolute;
inset: 0;
background: radial-gradient(circle at center, rgba(15, 23, 42, 0.96) 0%, rgba(3, 7, 18, 0.98) 100%);
backdrop-filter: blur(28px);
}
.maintenance-card {
position: relative;
z-index: 2;
max-width: 680px;
width: 100%;
background: rgba(15, 23, 42, 0.85);
border: 1px solid rgba(56, 189, 248, 0.25);
border-radius: 24px;
padding: clamp(28px, 5vw, 44px);
box-shadow: 0 25px 60px rgba(0, 0, 0, 0.65), 0 0 40px rgba(56, 189, 248, 0.15);
text-align: center;
}
.maintenance-logos {
display: inline-flex;
align-items: center;
gap: 16px;
margin-bottom: 20px;
padding: 8px 18px;
border-radius: 999px;
background: rgba(255, 255, 255, 0.04);
border: 1px solid rgba(255, 255, 255, 0.1);
}
.maintenance-logos img {
border-radius: 8px;
object-fit: contain;
}
.maint-divider {
color: rgba(255, 255, 255, 0.35);
font-size: 13px;
}
.maintenance-badge {
display: inline-flex;
align-items: center;
gap: 8px;
background: rgba(245, 158, 11, 0.12);
border: 1px solid rgba(245, 158, 11, 0.35);
color: #fbbf24;
font-size: 11.5px;
font-weight: 700;
letter-spacing: 0.12em;
padding: 6px 14px;
border-radius: 999px;
margin-bottom: 16px;
}
.maintenance-badge .pulse-dot {
width: 8px;
height: 8px;
border-radius: 50%;
background: #fbbf24;
box-shadow: 0 0 10px #fbbf24;
animation: pulse-glow 1.5s infinite;
}
@keyframes pulse-glow {
0%, 100% { opacity: 1; transform: scale(1); }
50% { opacity: 0.4; transform: scale(0.85); }
}
.maintenance-card h1, .maintenance-card .maintenance-title {
font-family: var(--display);
font-size: clamp(32px, 5vw, 44px);
font-weight: 800;
color: #f8fafc;
margin-bottom: 14px;
}
.maintenance-lead {
font-size: 15px;
line-height: 1.65;
color: #cbd5e1;
margin-bottom: 10px;
}
.maintenance-lead-en {
font-size: 13.5px;
line-height: 1.6;
color: #94a3b8;
font-style: italic;
margin-bottom: 22px;
}
.maintenance-sectors-row {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 10px;
margin-bottom: 26px;
}
.maintenance-sectors-row span {
font-size: 12.5px;
font-weight: 600;
padding: 6px 14px;
border-radius: 8px;
background: rgba(255, 255, 255, 0.05);
border: 1px solid rgba(255, 255, 255, 0.1);
color: #e2e8f0;
}
.maintenance-channels {
display: flex;
flex-wrap: wrap;
gap: 12px;
justify-content: center;
margin-bottom: 24px;
}
.maintenance-footer {
border-top: 1px solid rgba(255, 255, 255, 0.08);
padding-top: 16px;
}
/* Maintenance Secret Admin Trigger ("admin paneli de belli belirsiz olacak") */
.maintenance-secret-trigger {
background: transparent;
border: none;
color: var(--muted);
opacity: 0.18;
font-size: 11px;
cursor: pointer;
padding: 4px 6px;
border-radius: 4px;
line-height: 1;
transition: opacity 0.25s ease, transform 0.25s ease, color 0.25s ease;
vertical-align: middle;
}
.maintenance-secret-trigger:hover,
.maintenance-secret-trigger:focus-visible {
opacity: 0.85;
transform: scale(1.18);
color: var(--cyan);
}
body.is-maintenance-locked {
overflow: hidden !important;
}
/* ==========================================================================
COOKIE CONSENT FLOATING BANNER ("gecici olarak yazsın sonra gitsin")
========================================================================== */
.cookie-banner {
position: fixed;
bottom: 24px;
left: 50%;
transform: translateX(-50%) translateY(100px);
z-index: 99999;
max-width: 680px;
width: calc(100% - 32px);
background: rgba(15, 23, 42, 0.94);
backdrop-filter: blur(20px);
-webkit-backdrop-filter: blur(20px);
border: 1px solid rgba(255, 255, 255, 0.18);
border-radius: 999px;
padding: 10px 18px;
box-shadow: 0 16px 36px rgba(0, 0, 0, 0.65), 0 0 24px rgba(56, 189, 248, 0.18);
opacity: 0;
pointer-events: none;
transition: transform 0.45s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.45s ease;
}
.cookie-banner.is-visible {
opacity: 1;
pointer-events: auto;
transform: translateX(-50%) translateY(0);
}
.cookie-banner-inner {
display: flex;
align-items: center;
justify-content: space-between;
gap: 14px;
}
.cookie-icon {
font-size: 20px;
flex-shrink: 0;
}
#cookie-text {
margin: 0;
font-size: 12.5px;
color: #e2e8f0;
line-height: 1.4;
flex: 1;
}
.cookie-actions {
display: flex;
align-items: center;
gap: 8px;
flex-shrink: 0;
}
.cookie-actions .button--sm {
padding: 5px 12px;
font-size: 11.5px;
border-radius: 999px;
}
@media (max-width: 580px) {
.cookie-banner {
border-radius: 16px;
bottom: 16px;
padding: 14px;
}
.cookie-banner-inner {
flex-direction: column;
align-items: flex-start;
gap: 10px;
}
.cookie-actions {
width: 100%;
justify-content: flex-end;
}
}
/* ==========================================================================
ADMIN DIALOG (CONTROL CENTER)
========================================================================== */
.admin-dialog {
border: none;
background: transparent;
padding: 0;
max-width: 640px;
width: 92vw;
margin: auto;
border-radius: 20px;
box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.65);
}
.admin-dialog::backdrop {
background: rgba(6, 7, 13, 0.85);
backdrop-filter: blur(16px);
}
.admin-dialog-inner {
background: #0b1022;
border: 1px solid rgba(255, 255, 255, 0.14);
border-radius: 20px;
padding: 24px;
color: #f1f5f9;
}
.admin-dialog-top {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 20px;
border-bottom: 1px solid rgba(255, 255, 255, 0.08);
padding-bottom: 14px;
}
.admin-title-area {
display: flex;
align-items: center;
gap: 12px;
}
.admin-crest {
font-size: 26px;
}
.admin-title-area h3 {
font-size: 18px;
font-weight: 700;
color: #f8fafc;
margin: 0;
}
.admin-dialog-sub {
font-size: 12px;
color: var(--muted);
margin: 0;
}
.admin-auth-hint {
font-size: 13.5px;
color: #cbd5e1;
margin-bottom: 14px;
}
.admin-auth-form {
display: flex;
flex-direction: column;
gap: 12px;
}
.admin-input-wrap {
position: relative;
display: flex;
align-items: center;
}
.admin-input-wrap input {
width: 100%;
background: rgba(255, 255, 255, 0.05);
border: 1px solid rgba(255, 255, 255, 0.16);
border-radius: 10px;
padding: 12px 42px 12px 14px;
color: #fff;
font-size: 15px;
}
.admin-input-wrap input:focus {
outline: none;
border-color: var(--cyan);
}
.btn-toggle-pwd {
position: absolute;
right: 12px;
background: transparent;
border: none;
cursor: pointer;
font-size: 16px;
}
.admin-submit-btn {
width: 100%;
justify-content: center;
padding: 12px;
}
.admin-auth-error {
color: #ef4444;
font-size: 13px;
margin: 0;
}
.admin-card {
background: rgba(255, 255, 255, 0.03);
border: 1px solid rgba(255, 255, 255, 0.08);
border-radius: 12px;
padding: 16px;
margin-bottom: 16px;
}
.admin-card-head {
display: flex;
gap: 12px;
margin-bottom: 14px;
}
.admin-feature-icon {
font-size: 24px;
}
.admin-card-head h4 {
font-size: 15px;
font-weight: 700;
color: #f1f5f9;
margin: 0 0 4px;
}
.admin-card-head p {
font-size: 12.5px;
color: var(--muted);
margin: 0;
line-height: 1.45;
}
.admin-switch-row {
display: flex;
align-items: center;
gap: 14px;
padding-left: 36px;
}
.toggle-switch {
position: relative;
display: inline-block;
width: 48px;
height: 26px;
}
.toggle-switch input {
opacity: 0;
width: 0;
height: 0;
}
.slider {
position: absolute;
cursor: pointer;
inset: 0;
background-color: rgba(255, 255, 255, 0.15);
transition: 0.3s;
border-radius: 26px;
}
.slider:before {
position: absolute;
content: "";
height: 20px;
width: 20px;
left: 3px;
bottom: 3px;
background-color: white;
transition: 0.3s;
border-radius: 50%;
}
input:checked + .slider {
background-color: #22c55e;
}
input:checked + .slider:before {
transform: translateX(22px);
}
.status-indicator {
font-size: 13px;
}
.admin-order-manager {
padding-left: 36px;
}
.admin-order-list {
list-style: none;
padding: 0;
margin: 0 0 14px;
max-height: 220px;
overflow-y: auto;
border: 1px solid rgba(255, 255, 255, 0.08);
border-radius: 8px;
}
.admin-order-item {
display: flex;
align-items: center;
justify-content: space-between;
padding: 6px 10px;
border-bottom: 1px solid rgba(255, 255, 255, 0.04);
font-size: 12.5px;
}
.admin-order-item:last-child {
border-bottom: none;
}
.admin-order-app-info {
display: flex;
align-items: center;
gap: 8px;
}
.admin-order-app-info img {
width: 24px;
height: 24px;
border-radius: 6px;
}
.admin-order-btns {
display: flex;
gap: 4px;
}
.admin-order-btns button {
background: rgba(255, 255, 255, 0.08);
border: 1px solid rgba(255, 255, 255, 0.12);
color: #fff;
border-radius: 4px;
padding: 2px 7px;
font-size: 11px;
cursor: pointer;
}
.admin-order-btns button:hover:not(:disabled) {
background: var(--cyan);
color: #000;
}
.admin-order-btns button:disabled {
opacity: 0.3;
cursor: not-allowed;
}
.admin-order-actions {
display: flex;
gap: 8px;
flex-wrap: wrap;
}
.admin-foot-actions {
display: flex;
justify-content: flex-end;
border-top: 1px solid rgba(255, 255, 255, 0.08);
padding-top: 14px;
margin-top: 14px;
}
/* ==========================================================================
STORE LEGAL & COMPLIANCE PAGES
========================================================================== */
.legal-store-main, .store-hub-main {
padding-top: clamp(80px, 12vw, 120px);
padding-bottom: 80px;
max-width: 1040px;
margin-inline: auto;
}
.legal-store-header {
margin-bottom: 32px;
}
.legal-app-identity {
display: flex;
align-items: center;
gap: 18px;
margin-block: 16px 20px;
}
.legal-app-icon {
border-radius: 16px;
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
}
.legal-url-callout {
background: rgba(15, 23, 42, 0.85);
border: 1px solid rgba(56, 189, 248, 0.3);
border-radius: 12px;
padding: 14px 18px;
margin-bottom: 16px;
}
.legal-url-label {
display: block;
font-size: 12px;
font-weight: 700;
color: var(--cyan);
margin-bottom: 6px;
text-transform: uppercase;
letter-spacing: 0.08em;
}
.legal-url-box {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
}
.legal-url-box code {
font-family: var(--mono);
font-size: 13.5px;
color: #f1f5f9;
word-break: break-all;
}
.btn-copy-url {
background: var(--cyan);
color: #0b1022;
border: none;
padding: 6px 14px;
border-radius: 6px;
font-weight: 700;
font-size: 12.5px;
cursor: pointer;
white-space: nowrap;
}
.legal-cross-links {
display: flex;
gap: 10px;
flex-wrap: wrap;
margin-bottom: 20px;
}
.legal-nav-pill {
font-size: 12.5px;
font-weight: 600;
padding: 6px 14px;
border-radius: 999px;
background: rgba(255, 255, 255, 0.05);
border: 1px solid rgba(255, 255, 255, 0.12);
color: #e2e8f0;
}
.legal-nav-pill:hover {
border-color: var(--cyan);
color: var(--cyan);
}
.legal-lang-nav {
display: flex;
align-items: center;
gap: 12px;
flex-wrap: wrap;
background: rgba(255, 255, 255, 0.03);
border: 1px solid rgba(255, 255, 255, 0.08);
border-radius: 10px;
padding: 10px 14px;
}
.legal-lang-label {
font-size: 12.5px;
font-weight: 700;
color: var(--muted);
}
.legal-lang-pills {
display: flex;
gap: 6px;
flex-wrap: wrap;
}
.legal-lang-tab {
background: transparent;
border: 1px solid rgba(255, 255, 255, 0.1);
color: #cbd5e1;
font-size: 12px;
padding: 4px 10px;
border-radius: 6px;
cursor: pointer;
}
.legal-lang-tab.is-active {
background: var(--cyan);
color: #0b1022;
border-color: var(--cyan);
font-weight: 700;
}
.legal-badge-row {
display: flex;
gap: 8px;
flex-wrap: wrap;
margin-bottom: 18px;
}
.store-badge {
font-size: 11px;
font-weight: 700;
padding: 4px 10px;
border-radius: 4px;
text-transform: uppercase;
}
.store-badge.gplay { background: rgba(34, 197, 94, 0.15); color: #4ade80; border: 1px solid rgba(34, 197, 94, 0.35); }
.store-badge.apple { background: rgba(248, 250, 252, 0.12); color: #ffffff; border: 1px solid rgba(255, 255, 255, 0.3); }
.store-badge.steam { background: rgba(102, 192, 244, 0.15); color: #66c0f4; border: 1px solid rgba(102, 192, 244, 0.35); }
.legal-doc-card {
background: rgba(15, 23, 42, 0.65);
border: 1px solid rgba(255, 255, 255, 0.08);
border-radius: 16px;
padding: clamp(24px, 4vw, 36px);
margin-bottom: 24px;
}
.legal-doc-card h2 {
font-size: 19px;
font-weight: 700;
color: #f1f5f9;
margin-top: 26px;
margin-bottom: 10px;
border-bottom: 1px solid rgba(255, 255, 255, 0.06);
padding-bottom: 8px;
}
.deletion-box {
background: rgba(239, 68, 68, 0.08);
border: 1px solid rgba(239, 68, 68, 0.25);
border-radius: 10px;
padding: 16px;
margin-block: 14px;
}
.deletion-box strong {
color: #f87171;
display: block;
margin-bottom: 8px;
}
.deletion-box ol {
margin: 0;
padding-left: 20px;
}
/* Store Hub Portal */
.compliance-banner {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
gap: 14px;
margin-top: 24px;
}
.comp-item {
display: flex;
gap: 12px;
background: rgba(255, 255, 255, 0.03);
border: 1px solid rgba(255, 255, 255, 0.08);
border-radius: 12px;
padding: 14px;
}
.comp-icon {
font-size: 20px;
}
.comp-item strong {
display: block;
font-size: 13.5px;
color: #f8fafc;
margin-bottom: 4px;
}
.comp-item small {
font-size: 12px;
color: var(--muted);
line-height: 1.4;
display: block;
}
.store-hub-filter-bar {
display: flex;
align-items: center;
justify-content: space-between;
flex-wrap: wrap;
gap: 14px;
margin-block: 36px 20px;
border-bottom: 1px solid rgba(255, 255, 255, 0.08);
padding-bottom: 14px;
}
.store-hub-filter-bar input {
background: rgba(255, 255, 255, 0.06);
border: 1px solid rgba(255, 255, 255, 0.14);
border-radius: 8px;
padding: 8px 14px;
color: #fff;
font-size: 13.5px;
width: 240px;
}
.store-hub-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(310px, 1fr));
gap: 18px;
}
.store-hub-card {
background: rgba(15, 23, 42, 0.7);
border: 1px solid rgba(255, 255, 255, 0.08);
border-radius: 14px;
padding: 18px;
display: flex;
flex-direction: column;
}
.store-card-header {
display: flex;
align-items: center;
gap: 12px;
margin-bottom: 10px;
}
.store-card-header img {
border-radius: 12px;
}
.store-card-header h3 {
font-size: 16px;
margin: 0;
color: #f8fafc;
}
.store-card-cat {
font-size: 11.5px;
color: var(--cyan);
}
.store-card-desc {
font-size: 12.5px;
color: var(--muted);
line-height: 1.45;
margin-bottom: 12px;
flex-grow: 1;
}
.store-card-stores {
display: flex;
gap: 6px;
flex-wrap: wrap;
margin-bottom: 14px;
}
.store-pill {
font-size: 10.5px;
font-weight: 600;
padding: 3px 8px;
border-radius: 4px;
background: rgba(255, 255, 255, 0.05);
border: 1px solid rgba(255, 255, 255, 0.09);
color: #cbd5e1;
}
.store-card-urls {
background: rgba(0, 0, 0, 0.25);
border: 1px solid rgba(255, 255, 255, 0.06);
border-radius: 8px;
padding: 8px 10px;
display: flex;
flex-direction: column;
gap: 6px;
}
.store-url-row {
display: flex;
align-items: center;
gap: 8px;
font-size: 11px;
}
.store-url-row .url-kind {
color: var(--muted);
font-weight: 700;
width: 52px;
}
.store-url-row code {
flex-grow: 1;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
font-family: var(--mono);
color: #e2e8f0;
}
.btn-copy-mini, .btn-open-mini {
background: rgba(255, 255, 255, 0.08);
border: 1px solid rgba(255, 255, 255, 0.12);
color: #fff;
border-radius: 4px;
padding: 2px 6px;
font-size: 11px;
cursor: pointer;
text-decoration: none;
}
.btn-copy-mini:hover, .btn-open-mini:hover {
background: var(--cyan);
color: #000;
}
/* ==========================================================================
v4 · Paired ecosystems — one compact panel, slides rotate in turn
========================================================================== */
.ecosystem-section {
padding-block: clamp(36px, 5vw, 64px);
}
.eco-panel {
--eco-a: #fbbf24;
--eco-b: #f59e0b;
position: relative;
padding: clamp(18px, 2.6vw, 30px);
border-radius: 28px;
background:
radial-gradient(70% 120% at 0% 0%, color-mix(in srgb, var(--eco-a) 12%, transparent), transparent 60%),
radial-gradient(70% 120% at 100% 100%, color-mix(in srgb, var(--eco-b) 12%, transparent), transparent 60%),
linear-gradient(180deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.015));
border: 1px solid var(--line);
transition: background 0.6s var(--ease);
}
.eco-panel-top {
display: flex;
align-items: flex-end;
justify-content: space-between;
gap: 18px;
flex-wrap: wrap;
margin-bottom: 18px;
}
.eco-panel-top h2 {
margin: 8px 0 6px;
font-size: clamp(28px, 3.4vw, 42px);
}
.eco-intro {
margin: 0;
color: var(--muted);
font-size: 14.5px;
max-width: 52ch;
}
.eco-tabs {
display: inline-flex;
gap: 6px;
padding: 5px;
border-radius: 999px;
background: rgba(255, 255, 255, 0.04);
border: 1px solid var(--line);
flex-wrap: wrap;
}
.eco-tab {
position: relative;
display: inline-flex;
align-items: center;
gap: 8px;
padding: 7px 14px 7px 7px;
border-radius: 999px;
border: 0;
background: transparent;
color: var(--muted);
font: 600 13.5px var(--body);
cursor: pointer;
overflow: hidden;
transition: color 0.25s, background 0.25s;
}
.eco-tab img { border-radius: 7px; }
.eco-tab:hover { color: #fff; }
.eco-tab[aria-selected="true"] {
color: #fff;
background: color-mix(in srgb, var(--eco-a) 18%, rgba(255, 255, 255, 0.04));
}
.eco-tab-bar {
position: absolute;
left: 14px;
right: 14px;
bottom: 3px;
height: 2px;
border-radius: 2px;
background: linear-gradient(90deg, var(--eco-a), var(--eco-b));
transform: scaleX(0);
transform-origin: left;
}
.eco-tab[aria-selected="true"] .eco-tab-bar {
animation: eco-progress var(--eco-ms, 5000ms) linear forwards;
}
.eco-panel.is-paused .eco-tab[aria-selected="true"] .eco-tab-bar,
.eco-panel.is-offscreen .eco-tab[aria-selected="true"] .eco-tab-bar {
animation-play-state: paused;
}
@keyframes eco-progress { to { transform: scaleX(1); } }
.eco-stage { position: relative; }
.eco-slide {
display: grid;
grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.3fr);
gap: clamp(16px, 2.6vw, 34px);
align-items: center;
animation: eco-in 0.55s var(--ease);
}
@keyframes eco-in {
from { opacity: 0; transform: translateY(10px); }
to { opacity: 1; transform: none; }
}
.eco-kicker {
font-family: var(--mono);
font-size: 10.5px;
letter-spacing: 0.2em;
color: var(--eco-a);
}
.eco-head h3 {
margin: 8px 0 12px;
font-family: var(--display);
font-size: clamp(20px, 2vw, 26px);
line-height: 1.18;
}
.eco-flow {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-wrap: wrap;
gap: 6px;
counter-reset: eco;
}
.eco-flow li {
counter-increment: eco;
font-family: var(--mono);
font-size: 10.5px;
padding: 5px 10px;
border-radius: 999px;
background: rgba(5, 6, 13, 0.6);
border: 1px solid var(--line-strong);
}
.eco-flow li::before {
content: counter(eco) ' · ';
color: var(--eco-a);
}
.eco-pair {
display: grid;
grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
align-items: center;
gap: 10px;
}
.eco-side {
display: flex;
align-items: center;
gap: 12px;
padding: 12px;
border-radius: 20px;
background: rgba(5, 6, 13, 0.55);
border: 1px solid color-mix(in srgb, var(--accent) 35%, transparent);
transition: transform 0.3s var(--ease), border-color 0.3s, box-shadow 0.3s;
min-width: 0;
}
.eco-side:hover,
.eco-side:focus-visible {
transform: translateY(-3px);
border-color: var(--accent);
box-shadow: 0 16px 40px -18px var(--accent);
}
.eco-side img {
flex: none;
width: 64px;
height: 64px;
border-radius: 16px;
}
.eco-side-copy {
display: flex;
flex-direction: column;
gap: 2px;
min-width: 0;
}
.eco-who {
font-family: var(--mono);
font-size: 9.5px;
letter-spacing: 0.14em;
font-weight: 700;
color: var(--accent);
}
.eco-side strong {
font-family: var(--display);
font-size: 15.5px;
line-height: 1.2;
}
.eco-side small {
color: var(--muted);
font-size: 12px;
}
.eco-open {
margin-inline-start: auto;
color: var(--accent);
flex: none;
}
.eco-open svg { width: 16px; height: 16px; }
.eco-link { display: flex; gap: 5px; }
.eco-link i {
width: 6px;
height: 6px;
border-radius: 50%;
background: var(--eco-a);
animation: companion-dot 1.4s ease-in-out infinite;
}
.eco-link i:nth-child(2) { animation-delay: 0.2s; }
.eco-link i:nth-child(3) { animation-delay: 0.4s; background: var(--eco-b); }
/* Role pill on catalogue cards */
.app-role-pill {
display: inline-flex;
align-self: flex-start;
margin: 2px 0 10px;
padding: 4px 10px;
border-radius: 999px;
font-family: var(--mono);
font-size: 10.5px;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--accent);
background: color-mix(in srgb, var(--accent) 14%, transparent);
border: 1px solid color-mix(in srgb, var(--accent) 40%, transparent);
}
/* Quick-look companion jump */
.quick-companion {
display: flex;
align-items: center;
gap: 12px;
width: 100%;
margin: 4px 0 18px;
padding: 10px 14px;
border-radius: 16px;
text-align: left;
color: var(--text);
font: inherit;
cursor: pointer;
background: color-mix(in srgb, var(--accent, #6366f1) 12%, rgba(255, 255, 255, 0.03));
border: 1px dashed color-mix(in srgb, var(--accent, #6366f1) 55%, transparent);
transition: background 0.25s, transform 0.25s var(--ease);
}
.quick-companion:hover {
transform: translateY(-2px);
background: color-mix(in srgb, var(--accent, #6366f1) 20%, rgba(255, 255, 255, 0.03));
}
.quick-companion img { border-radius: 12px; flex: none; }
.quick-companion span { display: flex; flex-direction: column; gap: 2px; }
.quick-companion small { color: var(--muted); font-size: 12px; }
.quick-companion strong { font-size: 14.5px; }
/* Detail page companion panel */
.companion-panel {
position: relative;
display: grid;
grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
gap: 28px;
align-items: center;
padding: clamp(22px, 3vw, 36px);
border-radius: 28px;
background:
radial-gradient(60% 120% at 0% 0%, color-mix(in srgb, var(--accent) 18%, transparent), transparent 60%),
radial-gradient(60% 120% at 100% 100%, color-mix(in srgb, var(--accent-2) 18%, transparent), transparent 60%),
rgba(255, 255, 255, 0.03);
border: 1px solid color-mix(in srgb, var(--accent) 40%, transparent);
}
.companion-kicker {
display: inline-flex;
align-items: center;
gap: 8px;
font-family: var(--mono);
font-size: 11px;
letter-spacing: 0.18em;
color: var(--accent);
}
.companion-kicker svg { width: 14px; height: 14px; }
.companion-copy h2 { margin: 10px 0 8px; }
.companion-copy p { color: var(--muted); margin: 0 0 18px; line-height: 1.65; }
.companion-pair {
display: flex;
align-items: center;
justify-content: center;
gap: 10px;
}
.companion-chip {
display: flex;
flex-direction: column;
align-items: center;
gap: 6px;
text-align: center;
opacity: 0.75;
}
.companion-chip.is-self { opacity: 1; }
.companion-chip img { border-radius: 22px; box-shadow: 0 14px 34px -14px var(--accent); }
.companion-chip small { color: var(--muted); font-size: 11.5px; }
.companion-link { display: flex; gap: 6px; }
.companion-link i {
width: 8px;
height: 8px;
border-radius: 50%;
background: var(--accent);
animation: companion-dot 1.4s ease-in-out infinite;
}
.companion-link i:nth-child(2) { animation-delay: 0.2s; background: color-mix(in srgb, var(--accent) 50%, var(--accent-2)); }
.companion-link i:nth-child(3) { animation-delay: 0.4s; background: var(--accent-2); }
@keyframes companion-dot {
0%, 100% { transform: translateY(0); opacity: 0.4; }
50% { transform: translateY(-6px); opacity: 1; }
}
@media (max-width: 960px) {
.eco-slide, .companion-panel { grid-template-columns: 1fr; }
}
@media (max-width: 620px) {
.eco-pair { grid-template-columns: 1fr; }
.eco-link { justify-content: center; transform: rotate(90deg); }
.eco-tabs { width: 100%; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-radius: 16px; }
.eco-tab { justify-content: center; padding: 8px 4px; font-size: 12px; border-radius: 12px; }
.eco-tab img { display: none; }
.companion-chip img { width: 72px; height: 72px; }
}
@media (prefers-reduced-motion: reduce) {
.eco-link i, .companion-link i, .eco-slide { animation: none; }
}
/* ==========================================================================
v4 · Layout fixes
========================================================================== */
/* Side speakers live in the gutter beside the 1320px content column
(gutter = (100vw - 1320px) / 2). Full size needs ~92px, so:
≥1520px full size · 1440–1519px scaled down · <1440px hidden (no room). */
@media (min-width: 1280px) and (max-width: 1519.98px) {
.speaker { zoom: 0.62; }
.speaker-left { left: 8px; }
.speaker-right { right: 8px; }
}
/* 1024–1279 (e.g. 1920 screens at 150% scaling): small but always present */
@media (min-width: 961px) and (max-width: 1279.98px) {
.speaker { zoom: 0.5; bottom: 12px; }
.speaker-left { left: 4px; }
.speaker-right { right: 4px; }
}
/* Nav labels wrapped onto two lines ("Ana / Ekran", "Minik / Kalpler") */
.main-nav a { white-space: nowrap; }
@media (max-width: 1280px) {
.main-nav a { padding: 8px 11px; font-size: 13.5px; }
}
/* Phone header: brand + tools overflowed 375px and pushed the menu button off-screen */
@media (max-width: 480px) {
.brand-cluster .brand-sep,
.brand-cluster .brand-parent { display: none; }
.header-tools { gap: 6px; }
.sound-toggle { padding: 0 10px; }
}
/* ==========================================================================
v4 · Store badges (Google Play / App Store / Steam) — driven by admin settings
========================================================================== */
.store-badges {
display: flex;
flex-wrap: wrap;
gap: 8px;
align-items: center;
}
.store-badge {
display: inline-flex;
align-items: center;
gap: 9px;
min-height: 46px;
padding: 7px 14px 7px 11px;
border-radius: 14px;
background: #0b0d18;
border: 1px solid rgba(255, 255, 255, 0.22);
color: #fff;
line-height: 1.05;
font-weight: 700;
font-size: 14.5px;
transition: transform 0.2s var(--ease), border-color 0.2s, box-shadow 0.2s;
}
.store-badge svg { width: 22px; height: 22px; flex: none; }
.store-badge span { display: flex; flex-direction: column; gap: 2px; }
.store-badge small {
font-size: 9.5px;
font-weight: 600;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--muted);
}
a.store-badge.is-active:hover,
a.store-badge.is-active:focus-visible {
transform: translateY(-2px);
border-color: var(--accent, var(--cyan));
box-shadow: 0 10px 26px -12px var(--accent, var(--cyan));
}
.store-badge.is-active small { color: #4ade80; }
.store-badge.is-soon {
position: relative;
border-style: dashed;
color: rgba(255, 255, 255, 0.72);
background: rgba(255, 255, 255, 0.025);
}
.store-badge.is-soon svg { opacity: 0.6; }
.store-badge.is-soon small { color: var(--gold); }
/* compact chips on catalogue cards */
.store-badges--mini { gap: 5px; margin-top: 10px; }
.store-chip {
position: relative;
display: inline-grid;
place-items: center;
width: 26px;
height: 26px;
border-radius: 8px;
background: rgba(255, 255, 255, 0.06);
border: 1px solid rgba(255, 255, 255, 0.12);
color: #fff;
}
.store-chip svg { width: 14px; height: 14px; }
.store-chip.is-soon { opacity: 0.55; border-style: dashed; }
.store-chip.is-soon::after {
content: '';
position: absolute;
top: -2px;
right: -2px;
width: 6px;
height: 6px;
border-radius: 50%;
background: var(--gold);
}
.store-chip.is-active::after {
content: '';
position: absolute;
top: -2px;
right: -2px;
width: 6px;
height: 6px;
border-radius: 50%;
background: #4ade80;
}
.quick-badges-row .store-badge { min-height: 40px; padding-block: 5px; font-size: 13px; }
/* admin: store badge editor */
.admin-store-filter {
width: 100%;
margin: 4px 0 10px;
padding: 9px 12px;
border-radius: 10px;
border: 1px solid var(--line-strong);
background: rgba(255, 255, 255, 0.04);
color: var(--text);
font: inherit;
}
.admin-store-list {
display: grid;
gap: 8px;
max-height: 46vh;
overflow: auto;
padding-right: 4px;
overscroll-behavior: contain;
}
.admin-store-row {
display: grid;
gap: 8px;
padding: 10px;
border-radius: 12px;
background: rgba(255, 255, 255, 0.03);
border: 1px solid var(--line);
}
.admin-store-app { display: flex; align-items: center; gap: 10px; font-size: 14px; }
.admin-store-app img { border-radius: 8px; }
.admin-store-cells {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 6px;
}
.admin-store-cell {
display: grid;
gap: 5px;
padding: 7px;
border-radius: 10px;
border: 1px solid var(--line);
background: rgba(0, 0, 0, 0.25);
}
.admin-store-cell.is-active { border-color: rgba(74, 222, 128, 0.5); }
.admin-store-cell.is-soon { border-color: rgba(251, 191, 36, 0.5); border-style: dashed; }
.admin-store-cell.is-off { opacity: 0.6; }
.admin-store-cell label {
display: flex;
align-items: center;
gap: 6px;
font-size: 12px;
font-weight: 700;
}
.admin-store-cell label svg { width: 14px; height: 14px; flex: none; }
.admin-store-cell select {
margin-inline-start: auto;
padding: 4px 6px;
border-radius: 7px;
border: 1px solid var(--line-strong);
background: #10132a;
color: var(--text);
font: inherit;
font-size: 12px;
}
.admin-store-cell input {
width: 100%;
padding: 5px 7px;
border-radius: 7px;
border: 1px solid var(--line);
background: rgba(255, 255, 255, 0.04);
color: var(--text);
font-size: 11.5px;
}
.admin-store-cell input:invalid { border-color: #ef4444; }
.admin-save-status { font-size: 12.5px; color: var(--muted); align-self: center; }
@media (max-width: 640px) {
.admin-store-cells { grid-template-columns: 1fr; }
}
/* ==========================================================================
v4 · Performance: lighter rendering on phones / touch devices
========================================================================== */
@media (max-width: 760px), (hover: none) {
/* Live blur behind fixed/scrolling layers is the #1 jank source on mobile GPUs */
*, *::before, *::after { -webkit-backdrop-filter: none !important; backdrop-filter: none !important; }
.site-header { background: rgba(6, 7, 13, 0.94); }
.cookie-banner { background: rgba(15, 23, 42, 0.98); }
.cursor-glow { display: none; }
.golden-bubble:nth-child(n + 13) { display: none; }
.golden-bubble { box-shadow: none; }
.aurora-orb.orb-3 { display: none; }
}
/* Below-the-fold sections skip rendering work until they approach the viewport */
#studyo, #muzik, .site-footer {
content-visibility: auto;
contain-intrinsic-size: auto 900px;
}
/* ==========================================================================
v4 · Compact studio section (#studyo) — same content, ~40% less height
========================================================================== */
#studyo.about-video-panel {
max-width: 1120px;
margin-block: clamp(24px, 3.5vw, 48px);
padding: clamp(20px, 3vw, 36px);
border-radius: 28px;
}
#studyo .about-inner { gap: 20px; }
#studyo .about-header-grid { gap: clamp(18px, 3vw, 36px); }
#studyo .about-header-grid h2 { font-size: clamp(26px, 3vw, 38px); margin-top: 6px; }
#studyo .xbox-pride-badge { margin-top: 14px; padding: 8px 12px; font-size: 12.5px; }
#studyo .xbox-icon-wrap { width: 26px; height: 26px; }
#studyo .about-copy { gap: 10px; font-size: 14.5px; }
#studyo .about-tags > span { padding: 5px 11px; font-size: 12px; }
#studyo .techmaksan-corp-card { margin-top: 12px; padding: 14px 16px; }
#studyo .techmaksan-corp-card img { width: 46px; height: 46px; }
#studyo .corp-sectors { gap: 8px; padding-top: 8px; }
#studyo .principles-grid { gap: 10px; }
#studyo .principle-card { padding: 13px 15px; gap: 4px; border-radius: 16px; }
#studyo .principle-card h3 { font-size: 16px; }
#studyo .principle-card p { font-size: 12.5px; }
#studyo .techmaksan-gallery { gap: 12px; grid-template-columns: repeat(3, minmax(0, 1fr)); }
#studyo .tm-gallery-card figcaption { padding: 10px 12px; }
#studyo .tm-gallery-card strong { font-size: 14px; }
@media (max-width: 900px) {
#studyo .principles-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
#studyo .techmaksan-gallery { grid-template-columns: repeat(3, minmax(0, 1fr)); }
#studyo .tm-gallery-card figcaption small { display: none; }
}
@media (max-width: 560px) {
#studyo .techmaksan-gallery { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; }
#studyo .tm-gallery-card { flex: 0 0 72%; scroll-snap-align: start; }
}
/* Light snowfall overlay (canvas injected by scene-effects.js on [data-snow]) */
.snow-layer {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
pointer-events: none;
z-index: 3;
border-radius: inherit;
}
#studyo .corp-sector-item { padding: 8px 10px; gap: 8px; }
#studyo .sector-copy strong { font-size: 12px; }
#studyo .sector-copy span { font-size: 11px; line-height: 1.35; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
#studyo .corp-action-row { padding-top: 2px; }
#studyo .techmaksan-corp-card p { font-size: 12.5px; margin-top: 2px; }
@media (min-width: 961px) {
#studyo .about-header-grid { row-gap: 0; align-items: start; }
#studyo .about-header-grid > div:first-child { display: contents; }
#studyo .about-header-grid > div:first-child > .eyebrow { grid-column: 1; grid-row: 1; }
#studyo .about-header-grid > div:first-child > h2 { grid-column: 1; grid-row: 2; }
#studyo .about-header-grid > div:first-child > .xbox-pride-badge { grid-column: 1; grid-row: 3; justify-self: start; }
#studyo .about-header-grid > .about-copy { grid-column: 2; grid-row: 1 / 4; }
/* corporate card becomes one horizontal strip: identity | sectors | action */
#studyo .techmaksan-corp-card {
grid-column: 1 / -1;
grid-row: 4;
margin-top: 18px;
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr) auto;
align-items: center;
gap: 16px;
}
#studyo .corp-sectors { padding-top: 0; border-top: 0; }
#studyo .corp-action-row { flex-direction: column; align-items: flex-start; gap: 6px; padding-top: 0; }
}
/* ==========================================================================
v4 · Motion & finish layer (pairs with src/fx.js)
========================================================================== */
@media (prefers-reduced-motion: no-preference) {
/* smooth cross-fade between pages (Chromium/Safari 18+; ignored elsewhere) */
@view-transition { navigation: auto; }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: 0.32s; }
/* hero entrance: copy rises in sequence, the logo card lands last */
@keyframes fx-rise {
from { opacity: 0; transform: translate3d(0, 26px, 0); filter: blur(7px); }
}
@keyframes fx-pop {
from { opacity: 0; transform: translate3d(0, 30px, 0) scale(0.94); filter: blur(10px); }
}
.universe-copy > * { animation: fx-rise 0.95s var(--ease) backwards; }
.universe-copy > :nth-child(1) { animation-delay: 0.05s; }
.universe-copy > :nth-child(2) { animation-delay: 0.16s; }
.universe-copy > :nth-child(3) { animation-delay: 0.28s; }
.universe-copy > :nth-child(4) { animation-delay: 0.38s; }
.universe-copy > :nth-child(5) { animation-delay: 0.48s; }
.universe-copy > :nth-child(6) { animation-delay: 0.58s; }
.brand-planet { animation: fx-pop 1.2s var(--ease) 0.25s backwards; }
/* living gradient on the italic half of every headline */
h1 em, h2 em {
background-size: 220% 100%;
animation: fx-gradient 7s ease-in-out infinite alternate;
}
@keyframes fx-gradient { to { background-position: 100% 0; } }
/* scroll reveal (class + attribute are only ever added by fx.js) */
.js-fx [data-reveal] {
opacity: 0;
transform: translate3d(0, 34px, 0) scale(0.985);
filter: blur(6px);
transition:
opacity 0.85s var(--ease) var(--rv-delay, 0ms),
transform 0.85s var(--ease) var(--rv-delay, 0ms),
filter 0.85s var(--ease) var(--rv-delay, 0ms);
}
.js-fx [data-reveal].is-in {
opacity: 1;
transform: none;
filter: none;
}
/* shine sweep across primary buttons */
.button--primary { position: relative; overflow: hidden; isolation: isolate; }
.button--primary::after {
content: '';
position: absolute;
inset: -20% auto -20% -60%;
width: 45%;
background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.55), transparent);
transform: skewX(-20deg) translateX(0);
transition: transform 0.9s var(--ease);
pointer-events: none;
z-index: -1;
}
.button--primary:hover::after { transform: skewX(-20deg) translateX(520%); }
/* catalogue icons float a little when the card is hovered */
.app-card:hover .app-icon-shell { transform: translateY(-4px) scale(1.04); }
.app-icon-shell { transition: transform 0.45s var(--ease); }
}
/* gentle film grain: removes the flat "digital" look of large dark gradients */
body::after {
content: '';
position: fixed;
inset: 0;
z-index: 140;
pointer-events: none;
opacity: 0.045;
background-image: url("data:image/svg+xml;utf8,");
background-size: 160px 160px;
}
/* active section in the main navigation */
.main-nav a.is-active { position: relative; }
.main-nav a.is-active::after {
content: '';
position: absolute;
left: 18%;
right: 18%;
bottom: 3px;
height: 2px;
border-radius: 2px;
background: linear-gradient(90deg, var(--cyan), var(--violet));
}
/* keep hover-tilt crisp: promote only while the pointer is over the card */
.app-card:hover, .eco-side:hover, .related-app-card:hover { will-change: transform; }
/* Gallery artwork: show every image whole (they are landscape, near-square and
portrait). The frame is a fixed 16:10; gaps are filled with a blurred copy. */
.tm-media {
position: relative;
aspect-ratio: 16 / 10;
overflow: hidden;
background: #0a0e1e;
}
.tm-blur {
position: absolute;
inset: -14%;
background-position: center;
background-size: cover;
background-repeat: no-repeat;
filter: blur(16px) saturate(1.25) brightness(0.8);
}
.tm-gallery-card .tm-media img {
position: relative;
display: block;
width: 100%;
height: 100%;
object-fit: contain;
transition: transform 0.6s var(--ease);
}
.tm-gallery-card:hover .tm-media img { transform: scale(1.04); }
@media (max-width: 560px) {
#studyo .tm-gallery-card { flex-basis: 78%; }
}
/* ==========================================================================
v4 · Hero & first screen
========================================================================== */
.universe-copy h1 {
font-size: clamp(46px, 6.9vw, 100px);
line-height: 0.98;
letter-spacing: -0.045em;
}
.universe-copy h1 em { display: inline-block; padding-bottom: 0.06em; }
.universe-lead { font-size: clamp(16px, 1.4vw, 20px); }
.hero-actions .button--primary { padding: 16px 30px; font-size: 16px; }
.hero-actions .button--glass { padding: 16px 26px; font-size: 16px; }
.brand-planet { width: min(100%, 390px); }
/* a slow beam of light turning behind the hero (one transformed layer) */
.hero-sweep {
position: absolute;
inset: 0;
overflow: hidden;
pointer-events: none;
-webkit-mask-image: radial-gradient(ellipse 60% 75% at 66% 38%, #000 0%, transparent 72%);
mask-image: radial-gradient(ellipse 60% 75% at 66% 38%, #000 0%, transparent 72%);
}
.hero-sweep i {
position: absolute;
left: 66%;
top: 38%;
width: 1100px;
height: 1100px;
margin: -550px 0 0 -550px;
background: conic-gradient(
from 0deg,
transparent 0 58%,
rgba(56, 189, 248, 0.16) 66%,
transparent 74%,
rgba(168, 85, 247, 0.15) 88%,
transparent 96%
);
will-change: transform;
animation: fx-sweep 56s linear infinite;
}
@keyframes fx-sweep { to { transform: rotate(360deg); } }
.brand-planet { transition: transform 0.45s var(--ease); }
@media (hover: none), (max-width: 760px) {
.hero-sweep { display: none; }
}
@media (prefers-reduced-motion: reduce) {
.hero-sweep i { animation: none; }
}
/* ==========================================================================
v4 · Studio lower block: principles list + ONE rotating artwork slot
========================================================================== */
@media (min-width: 900px) {
#studyo .studio-lower {
display: grid;
grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
gap: 14px;
align-items: stretch;
}
#studyo .principles-grid {
grid-template-columns: 1fr;
grid-auto-rows: 1fr;
gap: 8px;
}
#studyo .principle-card {
display: grid;
grid-template-columns: 30px minmax(86px, 120px) minmax(0, 1fr);
align-items: center;
column-gap: 12px;
padding: 8px 16px;
}
#studyo .principle-card h3 { font-size: 16px; margin: 0; }
#studyo .principle-card p { font-size: 12.5px; margin: 0; }
}
#studyo .techmaksan-gallery.is-rotator {
position: relative;
display: grid;
grid-template-columns: 1fr;
overflow: visible;
scroll-snap-type: none;
}
.is-rotator .tm-gallery-card {
grid-area: 1 / 1;
flex: none;
opacity: 0;
visibility: hidden;
transform: scale(0.97);
transition: opacity 0.7s var(--ease), transform 0.7s var(--ease), visibility 0s linear 0.7s;
}
.is-rotator .tm-gallery-card.is-active {
opacity: 1;
visibility: visible;
transform: none;
transition: opacity 0.7s var(--ease), transform 0.7s var(--ease);
}
.gallery-dots {
position: absolute;
top: 12px;
right: 12px;
z-index: 3;
display: flex;
gap: 6px;
padding: 6px 8px;
border-radius: 999px;
background: rgba(5, 6, 13, 0.55);
}
.gallery-dots button {
width: 8px;
height: 8px;
padding: 0;
border: 0;
border-radius: 50%;
background: rgba(255, 255, 255, 0.4);
cursor: pointer;
transition: transform 0.25s, background 0.25s;
}
.gallery-dots button[aria-current='true'] { background: var(--cyan); transform: scale(1.35); }
/* ==========================================================================
v4 · Weather engine canvas + switch (see scene-effects.js)
========================================================================== */
.weather-canvas {
position: fixed;
inset: 0;
width: 100%;
height: 100%;
z-index: 84;
pointer-events: none;
}
.weather-toggle {
position: fixed;
top: 94px;
right: 12px;
z-index: 118;
height: 44px;
display: inline-flex;
align-items: center;
gap: 7px;
padding: 0 14px 0 10px;
border-radius: 999px;
border: 1px solid rgba(125, 211, 252, 0.6);
background: linear-gradient(135deg, rgba(14, 116, 144, 0.55), rgba(49, 46, 129, 0.6)), rgba(8, 11, 22, 0.85);
color: #e0f2fe;
font: 700 12.5px var(--body);
cursor: pointer;
box-shadow: 0 0 0 4px rgba(56, 189, 248, 0.1), 0 10px 26px -8px rgba(56, 189, 248, 0.6);
animation: wt-glow 3.2s ease-in-out infinite;
transition: transform 0.25s var(--ease), opacity 0.25s;
}
.weather-toggle:hover, .weather-toggle:focus-visible { transform: translateY(-2px); }
.weather-toggle svg {
width: 24px;
height: 24px;
fill: none;
stroke: currentColor;
stroke-width: 1.8;
stroke-linecap: round;
stroke-linejoin: round;
}
.weather-toggle .wt-bolt { stroke: #fde047; }
.weather-toggle .wt-drop { stroke: #7dd3fc; animation: wt-drop 0.9s linear infinite; }
.weather-toggle .wt-drop:nth-of-type(3) { animation-delay: 0.3s; }
.weather-toggle .wt-drop:nth-of-type(4) { animation-delay: 0.6s; }
@keyframes wt-drop {
0% { transform: translateY(-2px); opacity: 0; }
30% { opacity: 1; }
100% { transform: translateY(3px); opacity: 0; }
}
@keyframes wt-glow {
0%, 100% { box-shadow: 0 0 0 4px rgba(56, 189, 248, 0.1), 0 10px 26px -8px rgba(56, 189, 248, 0.6); }
50% { box-shadow: 0 0 0 7px rgba(56, 189, 248, 0.16), 0 10px 32px -6px rgba(56, 189, 248, 0.85); }
}
.weather-toggle[aria-pressed='false'] {
border-color: var(--line-strong);
background: rgba(8, 11, 22, 0.85);
color: var(--muted);
animation: none;
box-shadow: none;
}
.weather-toggle[aria-pressed='false'] .wt-drop,
.weather-toggle[aria-pressed='false'] .wt-bolt { display: none; }
@media (max-width: 760px) {
.weather-toggle { top: auto; bottom: 86px; right: 10px; height: 40px; padding: 0 10px; }
.weather-toggle .wt-label { display: none; }
}
@media (prefers-reduced-motion: reduce) {
.weather-toggle, .weather-toggle .wt-drop { animation: none; }
}
/* rotating artwork: caption rides on the image, so the slot is as tall as the 4-row list */
@media (min-width: 900px) {
#studyo .studio-lower { grid-template-columns: minmax(0, 1.75fr) minmax(0, 1fr); }
}
.is-rotator .tm-gallery-card { position: relative; }
.is-rotator .tm-gallery-card figcaption {
position: absolute;
inset: auto 0 0 0;
padding: 34px 14px 10px;
background: linear-gradient(to top, rgba(5, 6, 13, 0.92), rgba(5, 6, 13, 0));
}
.is-rotator .tm-gallery-card small { font-size: 9.5px; }
.is-rotator .tm-gallery-card strong { font-size: 14px; }
/* ==========================================================================
v4 · Hologram podium under the hero card (replaces the satellite ring)
========================================================================== */
.brand-planet { container-type: inline-size; isolation: isolate; }
.brand-planet .planet-core { z-index: 2; }
.holo-podium {
position: absolute;
left: -12cqw;
right: -12cqw;
bottom: -9cqw;
height: 26cqw;
pointer-events: none;
}
.hp-base {
position: absolute;
inset: 22% 8%;
border-radius: 50%;
background: radial-gradient(ellipse at center, rgba(125, 211, 252, 0.55), rgba(99, 102, 241, 0.25) 45%, transparent 70%);
z-index: 1;
}
.hp-ring {
position: absolute;
inset: 18% 6%;
border-radius: 50%;
border: 1.5px solid rgba(125, 211, 252, 0.8);
box-shadow: 0 0 18px rgba(56, 189, 248, 0.55), inset 0 0 14px rgba(56, 189, 248, 0.35);
z-index: 3;
animation: hp-ripple 4.2s ease-out infinite;
}
.hp-ring:nth-of-type(2) { animation-delay: 1.4s; }
.hp-ring:nth-of-type(3) { animation-delay: 2.8s; }
@keyframes hp-ripple {
0% { transform: scale(0.55); opacity: 0; }
20% { opacity: 1; }
100% { transform: scale(1.18); opacity: 0; }
}
.hp-beam {
position: absolute;
left: 20%;
right: 20%;
bottom: 45%;
height: 360%;
z-index: 1;
background: linear-gradient(to top, rgba(56, 189, 248, 0.32), rgba(99, 102, 241, 0.1) 45%, transparent 85%);
clip-path: polygon(14% 100%, 86% 100%, 100% 0, 0 0);
filter: blur(6px);
animation: hp-beam 4.2s ease-in-out infinite;
}
@keyframes hp-beam {
0%, 100% { opacity: 0.55; }
50% { opacity: 1; }
}
/* ==========================================================================
v4 · Featured spotlight (replaces the rotating 3D cylinder)
========================================================================== */
.spotlight {
margin-top: clamp(22px, 3.4vw, 42px);
padding-top: 18px;
border-top: 1px solid rgba(255, 255, 255, 0.07);
}
.spot-head {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
margin-bottom: 14px;
font-family: var(--mono);
font-size: 10.5px;
letter-spacing: 0.2em;
color: var(--muted);
}
.spot-count { font-family: var(--body); letter-spacing: 0; font-size: 13px; }
.spot-count strong { color: #fff; font-size: 16px; margin-inline-end: 4px; }
.spot-stage {
position: relative;
border-radius: 28px;
border: 1px solid var(--line);
background:
radial-gradient(60% 120% at 18% 50%, color-mix(in srgb, var(--accent, #6366f1) 22%, transparent), transparent 70%),
linear-gradient(180deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.015));
overflow: hidden;
}
.spot-slide {
display: grid;
grid-template-columns: minmax(180px, 0.75fr) minmax(0, 1.6fr);
align-items: center;
gap: clamp(18px, 3vw, 44px);
padding: clamp(18px, 2.6vw, 32px) clamp(18px, 3vw, 40px);
background: radial-gradient(55% 140% at 14% 50%, color-mix(in srgb, var(--accent) 26%, transparent), transparent 72%);
}
.spot-slide.is-active { animation: spot-in 0.7s var(--ease); }
@keyframes spot-in {
from { opacity: 0; transform: translateY(12px); }
}
.spot-slide.is-active .spot-art img { animation: spot-art 0.9s var(--ease); }
@keyframes spot-art {
from { opacity: 0; transform: scale(0.82) translateY(14px); filter: blur(8px); }
}
.spot-art { position: relative; display: grid; place-items: center; }
.spot-art img {
position: relative;
width: min(100%, 220px);
height: auto;
aspect-ratio: 1;
border-radius: 26%;
border: 1px solid rgba(255, 255, 255, 0.25);
box-shadow: 0 30px 60px -22px rgba(0, 0, 0, 0.85), 0 0 60px -10px color-mix(in srgb, var(--accent) 70%, transparent);
}
.spot-glow {
position: absolute;
width: 78%;
aspect-ratio: 1;
border-radius: 50%;
background: radial-gradient(circle, color-mix(in srgb, var(--accent) 60%, transparent), transparent 70%);
filter: blur(24px);
animation: hp-beam 3.8s ease-in-out infinite;
}
.spot-cat {
display: inline-block;
font-family: var(--mono);
font-size: 10.5px;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--accent);
}
.spot-copy h3 {
margin: 6px 0 8px;
font-family: var(--display);
font-size: clamp(26px, 3vw, 40px);
line-height: 1.05;
}
.spot-tagline { margin: 0 0 14px; color: var(--muted); max-width: 60ch; font-size: 15px; line-height: 1.55; }
.spot-feats { list-style: none; margin: 0 0 18px; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.spot-feats li {
display: inline-flex;
align-items: center;
gap: 7px;
padding: 6px 12px;
border-radius: 999px;
font-size: 12.5px;
font-weight: 600;
background: rgba(5, 6, 13, 0.5);
border: 1px solid color-mix(in srgb, var(--accent) 35%, transparent);
}
.spot-feats i { font-style: normal; }
.spot-actions .button svg { width: 16px; height: 16px; }
.spot-thumbs {
display: flex;
gap: 8px;
margin-top: 12px;
overflow-x: auto;
scrollbar-width: none;
padding-bottom: 2px;
}
.spot-thumbs::-webkit-scrollbar { display: none; }
.spot-thumb {
position: relative;
flex: 1 0 auto;
display: inline-flex;
align-items: center;
gap: 9px;
padding: 7px 14px 7px 7px;
border-radius: 14px;
border: 1px solid var(--line);
background: rgba(255, 255, 255, 0.03);
color: var(--muted);
font: 600 13px var(--body);
cursor: pointer;
overflow: hidden;
transition: color 0.25s, border-color 0.25s, background 0.25s;
}
.spot-thumb img { width: 34px; height: 34px; border-radius: 9px; }
.spot-thumb:hover { color: #fff; }
.spot-thumb[aria-selected='true'] {
color: #fff;
border-color: color-mix(in srgb, var(--accent) 60%, transparent);
background: color-mix(in srgb, var(--accent) 14%, transparent);
}
.spot-bar {
position: absolute;
left: 0;
right: 0;
bottom: 0;
height: 2px;
background: var(--accent);
transform: scaleX(0);
transform-origin: left;
}
.spot-thumb[aria-selected='true'] .spot-bar { animation: eco-progress var(--spot-ms, 5200ms) linear forwards; }
.spotlight.is-paused .spot-thumb[aria-selected='true'] .spot-bar,
.spotlight.is-offscreen .spot-thumb[aria-selected='true'] .spot-bar { animation-play-state: paused; }
@media (max-width: 760px) {
.spot-slide { grid-template-columns: 1fr; text-align: center; }
.spot-art img { width: 150px; }
.spot-feats, .spot-actions { justify-content: center; }
.spot-tagline { margin-inline: auto; }
.spot-thumb { flex: 0 0 auto; }
}
@media (prefers-reduced-motion: reduce) {
.hp-ring, .hp-beam, .spot-glow, .spot-slide.is-active, .spot-slide.is-active .spot-art img { animation: none; }
}
/* ==========================================================================
v4 · Papi the guide parrot (src/parrot.js)
========================================================================== */
.parrot {
--p-size: 116px;
position: fixed;
right: 18px;
bottom: 196px;
z-index: 117;
display: flex;
align-items: flex-end;
gap: 10px;
pointer-events: none;
opacity: 0;
visibility: hidden;
}
.parrot.is-visible { opacity: 1; visibility: visible; }
.parrot-stage { position: relative; pointer-events: auto; }
.parrot-body {
display: block;
width: var(--p-size);
height: calc(var(--p-size) * 1.25);
padding: 0;
border: 0;
background: none;
cursor: pointer;
perspective: 500px;
}
.parrot-3d {
display: block;
width: 100%;
height: 100%;
transform-style: preserve-3d;
filter: drop-shadow(0 10px 14px rgba(0, 0, 0, 0.55)) drop-shadow(0 0 18px rgba(239, 68, 68, 0.25));
animation: p-sway 5.5s ease-in-out infinite;
}
.parrot-svg { width: 100%; height: 100%; overflow: visible; }
@keyframes p-sway {
0%, 100% { transform: rotateY(-16deg) rotateZ(-1deg); }
50% { transform: rotateY(12deg) rotateZ(1.5deg); }
}
/* parts */
.p-head { transform-origin: 62px 60px; animation: p-bob 2.6s ease-in-out infinite; }
.p-wing { transform-origin: 74px 62px; animation: p-wing-idle 3.2s ease-in-out infinite; }
.p-tail { transform-origin: 66px 100px; animation: p-tail 3.2s ease-in-out infinite; }
.p-eye { transform-origin: 50px 40px; animation: p-blink 4.6s infinite; }
.p-jaw { transform-origin: 43px 49px; }
@keyframes p-bob {
0%, 100% { transform: rotate(0deg) translateY(0); }
30% { transform: rotate(-7deg) translateY(-1px); }
60% { transform: rotate(4deg) translateY(1px); }
}
@keyframes p-wing-idle {
0%, 100% { transform: rotate(0deg); }
50% { transform: rotate(-6deg); }
}
@keyframes p-tail {
0%, 100% { transform: rotate(0deg); }
50% { transform: rotate(3deg); }
}
@keyframes p-blink {
0%, 92%, 100% { transform: scaleY(1); }
95% { transform: scaleY(0.1); }
}
@keyframes p-talk {
from { transform: rotate(0deg); }
to { transform: rotate(20deg); }
}
@keyframes p-flap {
from { transform: rotate(8deg); }
to { transform: rotate(-58deg); }
}
.parrot.is-talking .p-jaw { animation: p-talk 0.16s ease-in-out infinite alternate; }
.parrot.is-talking .p-wing { animation: p-flap 0.5s ease-in-out 2 alternate; }
/* flight in / out */
.parrot.is-arriving .parrot-stage { animation: p-arrive 1.7s cubic-bezier(0.22, 0.8, 0.3, 1) both; }
.parrot.is-arriving .p-wing,
.parrot.is-leaving .p-wing { animation: p-flap 0.14s linear infinite alternate; }
.parrot.is-arriving .p-shadow,
.parrot.is-leaving .p-shadow,
.parrot.is-arriving .parrot-svg rect,
.parrot.is-leaving .parrot-svg rect { opacity: 0; }
.parrot.is-leaving .parrot-stage { animation: p-leave 1.3s ease-in both; }
@keyframes p-arrive {
0% { transform: translate(55vw, -70vh) rotate(-24deg) scale(0.55); }
60% { transform: translate(-30px, -40px) rotate(8deg) scale(1.05); }
82% { transform: translate(6px, 6px) rotate(-3deg) scale(0.98); }
100% { transform: none; }
}
@keyframes p-leave {
0% { transform: none; }
25% { transform: translate(-20px, 10px) rotate(-6deg); }
100% { transform: translate(40vw, -90vh) rotate(18deg) scale(0.5); opacity: 0; }
}
/* dismiss button appears on hover/focus */
.parrot-bye {
position: absolute;
top: 2px;
right: 2px;
width: 22px;
height: 22px;
padding: 0;
border-radius: 50%;
border: 1px solid var(--line-strong);
background: rgba(5, 6, 13, 0.85);
color: var(--muted);
font-size: 11px;
line-height: 1;
cursor: pointer;
opacity: 0;
transition: opacity 0.2s;
}
.parrot-stage:hover .parrot-bye,
.parrot-bye:focus-visible { opacity: 1; }
/* speech bubble */
.parrot-bubble {
position: relative;
pointer-events: auto;
max-width: 290px;
margin-bottom: 72px;
padding: 12px 34px 12px 15px;
border-radius: 18px 18px 4px 18px;
background: linear-gradient(160deg, rgba(255, 255, 255, 0.98), rgba(226, 232, 240, 0.96));
color: #0f172a;
font-size: 14px;
font-weight: 600;
line-height: 1.45;
box-shadow: 0 18px 40px -12px rgba(0, 0, 0, 0.7);
animation: p-pop 0.35s var(--ease) both;
}
.parrot-bubble::after {
content: '';
position: absolute;
right: -7px;
bottom: 10px;
border: 8px solid transparent;
border-left-color: rgba(226, 232, 240, 0.96);
border-right: 0;
}
.parrot-text { margin: 0; min-height: 1.45em; }
.parrot-x {
position: absolute;
top: 6px;
right: 8px;
width: 22px;
height: 22px;
padding: 0;
border: 0;
border-radius: 50%;
background: rgba(15, 23, 42, 0.08);
color: #334155;
font-size: 15px;
line-height: 1;
cursor: pointer;
}
.parrot-x:hover { background: rgba(15, 23, 42, 0.16); }
@keyframes p-pop {
from { opacity: 0; transform: translateY(8px) scale(0.92); }
}
[dir='rtl'] .parrot-bubble { border-radius: 18px 18px 18px 4px; }
/* smaller laptops: keep clear of the scaled speakers */
@media (max-width: 1519.98px) { .parrot { bottom: 132px; --p-size: 100px; } }
/* phones: a little parrot bottom-left, bubble above it */
@media (max-width: 760px) {
.parrot {
--p-size: 58px;
right: auto;
left: 8px;
bottom: 78px;
flex-direction: column;
align-items: flex-start;
gap: 4px;
}
.parrot-bubble {
max-width: min(260px, calc(100vw - 24px));
margin: 0;
font-size: 13px;
border-radius: 16px 16px 16px 4px;
}
.parrot-bubble::after {
right: auto;
left: 14px;
bottom: -7px;
border: 8px solid transparent;
border-top-color: rgba(226, 232, 240, 0.96);
border-bottom: 0;
}
.parrot-bye { opacity: 1; width: 18px; height: 18px; font-size: 9px; top: -4px; right: -6px; }
}
@media (prefers-reduced-motion: reduce) {
.parrot *, .parrot-3d { animation: none !important; }
}
@media print { .parrot, .weather-canvas, .weather-toggle { display: none !important; } }
/* Papi v2: real 3D canvas, see-through bubble, edge tab when sent away */
.parrot-3d.is-gl { position: relative; animation: none; transform: none; }
.parrot-3d.is-gl .parrot-svg { display: none; }
.parrot-gl { display: block; width: 100%; height: 100%; }
.parrot { opacity: 0; }
.parrot.is-visible { opacity: 0.94; }
.parrot.is-visible:hover, .parrot.is-visible:focus-within { opacity: 1; }
.parrot-bubble {
background: rgba(248, 250, 252, 0.74);
-webkit-backdrop-filter: blur(8px) saturate(140%);
backdrop-filter: blur(8px) saturate(140%);
border: 1px solid rgba(255, 255, 255, 0.55);
box-shadow: 0 14px 30px -14px rgba(0, 0, 0, 0.6);
}
.parrot-bubble::after { border-left-color: rgba(248, 250, 252, 0.74); }
.parrot-bubble:hover { background: rgba(248, 250, 252, 0.95); }
@media (max-width: 760px) {
.parrot-bubble { background: rgba(248, 250, 252, 0.82); }
.parrot-bubble::after { border-left-color: transparent; border-top-color: rgba(248, 250, 252, 0.82); }
}
.parrot-dock {
position: fixed;
right: 0;
top: 50%;
z-index: 117;
width: 44px;
height: 52px;
display: grid;
place-items: center;
padding: 0 0 0 4px;
border: 1px solid rgba(248, 113, 113, 0.55);
border-right: 0;
border-radius: 16px 0 0 16px;
background: linear-gradient(160deg, rgba(220, 38, 38, 0.55), rgba(37, 99, 235, 0.5)), rgba(8, 11, 22, 0.9);
font-size: 24px;
cursor: pointer;
box-shadow: -6px 8px 22px -10px rgba(0, 0, 0, 0.7);
transition: width 0.25s var(--ease);
}
.parrot-dock:hover, .parrot-dock:focus-visible { width: 54px; }
.parrot-dock span { display: inline-block; animation: dock-peek 3.6s ease-in-out infinite; }
@keyframes dock-peek {
0%, 80%, 100% { transform: rotate(0deg); }
86% { transform: rotate(-14deg); }
92% { transform: rotate(10deg); }
}
@media (max-width: 760px) {
.parrot-dock { top: auto; bottom: 140px; width: 38px; height: 44px; font-size: 20px; }
}
@media (prefers-reduced-motion: reduce) { .parrot-dock span { animation: none; } }
/* 8-language bar at the top of every app page (same pills as the footer) */
.detail-lang-bar {
margin: 4px 0 18px;
padding: 8px 12px;
border-radius: 16px;
border: 1px solid var(--line);
background: rgba(255, 255, 255, 0.03);
display: flex;
align-items: center;
gap: 10px;
flex-wrap: wrap;
}
.detail-lang-bar .footer-lang-list { display: flex; flex-wrap: wrap; gap: 6px; }
/* ==========================================================================
v4 · Minik Kalpler: brighter artwork, readable copy on its own glass card
========================================================================== */
.kids-slide { filter: brightness(1.12) saturate(1.15) contrast(1.04); }
.kids-shade {
background:
linear-gradient(95deg, rgba(5, 7, 18, 0.55) 0%, rgba(5, 7, 18, 0.18) 42%, transparent 70%),
linear-gradient(180deg, transparent 55%, rgba(5, 7, 18, 0.45) 100%);
}
.kids-copy {
padding: clamp(16px, 2vw, 24px);
border-radius: 24px;
background: rgba(6, 9, 22, 0.58);
-webkit-backdrop-filter: blur(10px);
backdrop-filter: blur(10px);
border: 1px solid rgba(255, 255, 255, 0.14);
box-shadow: 0 20px 50px -24px rgba(0, 0, 0, 0.8);
}
@media (max-width: 760px), (hover: none) {
.kids-copy { background: rgba(6, 9, 22, 0.72); }
}
/* ==========================================================================
v4 · Featured spotlight in 3D: the whole stage tilts with the pointer and
its layers sit at different depths; the app icon floats like a 3D tile.
========================================================================== */
.spot-stage { perspective: 1200px; }
.spot-slide { transform-style: preserve-3d; transition: transform 0.5s var(--ease); }
.spot-art { transform: translateZ(70px); transform-style: preserve-3d; }
.spot-copy { transform: translateZ(35px); }
.spot-art img {
animation: spot-float 6s ease-in-out infinite;
box-shadow:
0 2px 0 color-mix(in srgb, var(--accent) 60%, #000),
0 4px 0 color-mix(in srgb, var(--accent) 45%, #000),
0 6px 0 color-mix(in srgb, var(--accent) 30%, #000),
0 34px 60px -20px rgba(0, 0, 0, 0.9),
0 0 70px -10px color-mix(in srgb, var(--accent) 75%, transparent);
}
.spot-art::after {
/* soft floor shadow that breathes with the float */
content: '';
position: absolute;
bottom: -18px;
width: 62%;
height: 18px;
border-radius: 50%;
background: radial-gradient(ellipse, rgba(0, 0, 0, 0.55), transparent 70%);
transform: translateZ(-40px);
animation: spot-shadow 6s ease-in-out infinite;
}
@keyframes spot-float {
0%, 100% { transform: rotateY(-16deg) rotateX(6deg) translateY(0); }
50% { transform: rotateY(16deg) rotateX(-4deg) translateY(-12px); }
}
@keyframes spot-shadow {
0%, 100% { opacity: 0.9; transform: translateZ(-40px) scaleX(1); }
50% { opacity: 0.5; transform: translateZ(-40px) scaleX(0.82); }
}
.spot-slide.is-active .spot-art img { animation: spot-art 0.9s var(--ease), spot-float 6s ease-in-out 0.9s infinite; }
.spot-feats li { transform: translateZ(10px); }
@media (prefers-reduced-motion: reduce) {
.spot-art img, .spot-art::after { animation: none !important; }
}
/* Papi taps the screen: rings spread on the "glass" where the beak hits */
.parrot-tap {
position: fixed;
z-index: 119;
width: 0;
height: 0;
pointer-events: none;
}
.parrot-tap i {
position: absolute;
left: -26px;
top: -26px;
width: 52px;
height: 52px;
border-radius: 50%;
border: 2px solid rgba(255, 255, 255, 0.85);
box-shadow: 0 0 14px rgba(125, 211, 252, 0.8), inset 0 0 10px rgba(125, 211, 252, 0.5);
animation: tap-ring 0.8s ease-out forwards;
}
.parrot-tap i:nth-child(2) { animation-delay: 0.12s; border-color: rgba(125, 211, 252, 0.7); }
.parrot-tap b {
position: absolute;
left: 14px;
top: -40px;
font: 800 13px var(--display);
color: #fff;
text-shadow: 0 2px 8px rgba(0, 0, 0, 0.8);
animation: tap-word 0.9s ease-out forwards;
}
@keyframes tap-ring {
from { transform: scale(0.2); opacity: 1; }
to { transform: scale(1.6); opacity: 0; }
}
@keyframes tap-word {
from { transform: translateY(6px) rotate(-8deg); opacity: 0; }
30% { opacity: 1; }
to { transform: translateY(-14px) rotate(6deg); opacity: 0; }
}
.parrot { --p-size: 132px; }
@media (max-width: 1519.98px) { .parrot { --p-size: 118px; } }
@media (max-width: 760px) { .parrot { --p-size: 68px; } }
/* ==========================================================================
v4 · Compact featured strip: icon | name + one-line tagline | buttons.
Auto-advances through the featured apps; small icon tabs underneath.
========================================================================== */
.spotlight { margin-top: 14px; padding-top: 12px; }
.spot-head { margin-bottom: 8px; }
.spot-stage { border-radius: 22px; }
.spot-slide {
grid-template-columns: 112px minmax(0, 1fr) auto;
gap: 18px;
padding: 14px 22px;
}
.spot-art img { width: 96px; border-radius: 24px; }
.spot-art::after { bottom: -10px; height: 10px; }
.spot-glow { width: 110%; }
.spot-copy h3 { margin: 2px 0 4px; font-size: clamp(20px, 2vw, 26px); }
.spot-tagline {
margin: 0;
font-size: 13.5px;
display: -webkit-box;
-webkit-line-clamp: 1;
-webkit-box-orient: vertical;
overflow: hidden;
}
.spot-feats { display: none; }
.spot-actions { flex-wrap: nowrap; gap: 8px; }
.spot-actions .button { padding: 10px 16px; font-size: 13.5px; }
.spot-thumbs { margin-top: 8px; gap: 6px; justify-content: center; }
.spot-thumb { flex: 0 0 auto; padding: 4px; border-radius: 12px; }
.spot-thumb span { display: none; }
.spot-thumb img { width: 30px; height: 30px; border-radius: 8px; }
/* the catalogue follows right after the strip */
#uygulamalar.section { padding-top: clamp(28px, 3.5vw, 48px); }
@media (max-width: 760px) {
.spot-slide { grid-template-columns: 76px minmax(0, 1fr); text-align: start; padding: 12px 14px; gap: 12px; }
.spot-art img { width: 70px; }
.spot-actions { grid-column: 1 / -1; justify-content: stretch; }
.spot-actions .button { flex: 1; justify-content: center; }
.spot-tagline { margin: 0; }
}
/* Minik Kalpler: artwork slides right so it stays visible; the copy card turns
sideways in 3D and gets narrower, leaving the picture uncovered. */
.kids-panel { perspective: 1400px; }
.kids-slide {
left: 24%;
width: 76%;
-webkit-mask-image: linear-gradient(90deg, transparent 0, #000 16%);
mask-image: linear-gradient(90deg, transparent 0, #000 16%);
}
.kids-shade {
background: linear-gradient(95deg, rgba(5, 7, 18, 0.7) 0%, rgba(5, 7, 18, 0.25) 30%, transparent 48%);
}
.kids-copy {
max-width: 400px;
transform: rotateY(16deg) translateZ(0);
transform-origin: left center;
transition: transform 0.5s var(--ease);
box-shadow: 18px 24px 50px -24px rgba(0, 0, 0, 0.85), inset 1px 0 0 rgba(255, 255, 255, 0.18);
}
.kids-copy:hover, .kids-copy:focus-within { transform: rotateY(4deg); }
@media (max-width: 760px) {
.kids-slide { left: 0; width: 100%; -webkit-mask-image: none; mask-image: none; }
.kids-copy { transform: none; max-width: none; }
}
/* Minik Kalpler: card leans further, artwork shifted further right */
.kids-slide { left: 30%; width: 70%; }
.kids-copy { transform: rotateY(26deg) translateZ(0); max-width: 380px; }
.kids-copy:hover, .kids-copy:focus-within { transform: rotateY(8deg); }
/* Öne Çıkanlar as sketched: one short card; icon tabs sit inside it, top right */
.spotlight { position: relative; }
.spot-slide { grid-template-columns: 96px minmax(0, 1fr); padding: 12px 20px; padding-inline-end: 330px; }
.spot-art img { width: 86px; }
.spot-actions { margin-top: 8px; }
.spot-thumbs {
position: absolute;
top: 60px;
right: 18px;
margin: 0;
padding: 6px;
border-radius: 14px;
background: rgba(5, 6, 13, 0.55);
border: 1px solid var(--line);
z-index: 2;
}
@media (max-width: 900px) {
.spot-slide { padding-inline-end: 20px; }
.spot-thumbs { position: static; margin-top: 8px; background: none; border: 0; padding: 0; }
}
@media (max-width: 760px) {
.kids-slide { left: 0; width: 100%; }
.kids-copy { transform: none; max-width: none; }
}
/* Öne Çıkanlar: keep the spinning icon fully inside the card */
.spot-slide { padding-inline-start: 34px; }
.spot-art { padding-inline-start: 6px; }
/* Minik Kalpler: copy card hugs the left edge and leans further; slower, softer change */
.kids-copy {
translate: -22px 0;
transform: rotateY(34deg) translateZ(0);
}
.kids-copy:hover, .kids-copy:focus-within { transform: rotateY(10deg); }
.kids-slide { transition: opacity 1.1s var(--ease), transform 5s ease-out; }
@media (max-width: 760px) {
.kids-copy { translate: none; transform: none; }
}
/* "Use it in your browser" block on app pages + footer web strip */
.web-access {
border: 1px solid color-mix(in srgb, var(--accent, var(--cyan)) 40%, transparent);
background: linear-gradient(135deg, color-mix(in srgb, var(--accent, #38bdf8) 12%, transparent), rgba(255, 255, 255, 0.02));
border-radius: 22px;
padding: clamp(18px, 2.4vw, 26px);
}
.web-access-head { display: flex; align-items: center; gap: 10px; }
.web-access-head svg { width: 26px; height: 26px; color: var(--accent, var(--cyan)); flex: none; }
.web-access-head h2 { margin: 0; }
.web-access-desc { color: var(--muted); margin: 8px 0 14px; max-width: 70ch; }
.web-links { display: flex; flex-wrap: wrap; gap: 10px; }
.web-link {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 10px 16px;
border-radius: 14px;
background: rgba(5, 6, 13, 0.6);
border: 1px solid var(--line-strong);
font-weight: 700;
color: #fff;
transition: border-color 0.2s, transform 0.2s var(--ease);
}
.web-link:hover { border-color: var(--accent, var(--cyan)); transform: translateY(-2px); }
.web-link svg { width: 17px; height: 17px; color: var(--cyan); }
.web-link em { font-style: normal; font-size: 10.5px; padding: 2px 6px; border-radius: 6px; background: rgba(255, 255, 255, 0.1); color: var(--muted); }
.web-access-note { margin: 14px 0 0; font-size: 13.5px; color: var(--muted); line-height: 1.8; }
.web-access-note a, .footer-web-strip a { color: var(--cyan); font-weight: 700; }
.footer-web-strip {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 6px 8px;
margin: 18px 0 6px;
padding: 10px 14px;
border-radius: 14px;
border: 1px solid var(--line);
background: rgba(255, 255, 255, 0.03);
font-size: 13px;
color: var(--muted);
}
.footer-web-strip svg { width: 16px; height: 16px; color: var(--cyan); }
.fws-sep { margin: 0 4px; opacity: 0.5; }
/* ==========================================================================
v4 · Header fit: the full nav + tools did not fit below ~1240px (and Arabic
labels are longer), pushing the language switch and CTA off-screen.
Collapse to the menu button earlier.
========================================================================== */
@media (min-width: 961px) and (max-width: 1240px) {
.menu-toggle { display: grid; }
.main-nav {
position: fixed;
top: calc(var(--header-h) + 8px);
inset-inline-end: 16px;
width: min(360px, calc(100vw - 32px));
flex-direction: column;
align-items: stretch;
padding: 14px;
border-radius: 22px;
background: rgba(7, 10, 24, 0.97);
border: 1px solid var(--line-strong);
box-shadow: 0 24px 60px rgba(0, 0, 0, 0.75);
display: none;
}
.main-nav.is-open { display: flex; }
}
@media (max-width: 1100px) {
.brand-cluster .brand-sep, .brand-cluster .brand-parent { display: none; }
}
html[dir='rtl'] .main-nav a { white-space: nowrap; }
@media (min-width: 1241px) and (max-width: 1320px) {
html[dir='rtl'] .menu-toggle { display: grid; }
html[dir='rtl'] .main-nav {
position: fixed;
top: calc(var(--header-h) + 8px);
inset-inline-end: 16px;
width: 360px;
flex-direction: column;
align-items: stretch;
padding: 14px;
border-radius: 22px;
background: rgba(7, 10, 24, 0.97);
border: 1px solid var(--line-strong);
display: none;
}
html[dir='rtl'] .main-nav.is-open { display: flex; }
}
/* ==========================================================================
v4 · Arabic / RTL mirroring for the newer layouts
========================================================================== */
html[dir='rtl'] .kids-slide {
left: auto;
right: 30%;
-webkit-mask-image: linear-gradient(270deg, transparent 0, #000 16%);
mask-image: linear-gradient(270deg, transparent 0, #000 16%);
}
html[dir='rtl'] .kids-shade {
background: linear-gradient(265deg, rgba(5, 7, 18, 0.7) 0%, rgba(5, 7, 18, 0.25) 30%, transparent 48%);
}
html[dir='rtl'] .kids-copy { translate: 22px 0; transform: rotateY(-34deg); transform-origin: right center; }
html[dir='rtl'] .kids-copy:hover, html[dir='rtl'] .kids-copy:focus-within { transform: rotateY(-10deg); }
html[dir='rtl'] .spot-thumbs { right: auto; left: 18px; }
html[dir='rtl'] .spot-cat, html[dir='rtl'] .eco-kicker, html[dir='rtl'] .eyebrow { letter-spacing: 0; }
html[dir='rtl'] .parrot-bubble::after { right: auto; left: -7px; border-left: 0; border-right: 8px solid rgba(248, 250, 252, 0.74); }
@media (max-width: 760px) {
html[dir='rtl'] .kids-slide { right: 0; -webkit-mask-image: none; mask-image: none; }
html[dir='rtl'] .kids-copy { translate: none; transform: none; }
}
/* Öne Çıkanlar: the icon used translateZ inside the stage's perspective, which
pushed it past the card's left edge on wide screens. Spin it in its own
perspective instead, with no depth offset, so it never leaves the card. */
.spot-art, .spot-copy { transform: none; }
.spot-art { perspective: 700px; }
.spot-feats li { transform: none; }
/* Minik Kalpler scene 5 (three-panel YouTube artwork): show it whole */
.kids-slide.kids-slide--contain {
object-fit: contain;
object-position: center;
transform: none;
-webkit-mask-image: none;
mask-image: none;
filter: none;
}
.kids-story-links { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.kids-story-links a {
padding: 5px 10px;
border-radius: 999px;
font: 700 12px var(--body);
color: #fff;
background: rgba(239, 68, 68, 0.22);
border: 1px solid rgba(248, 113, 113, 0.55);
direction: ltr;
}
.kids-story-links a:hover { background: rgba(239, 68, 68, 0.4); }
/* web-app portal: always at the very top (sticky bar) and in the footer */
:root { --topbar-h: 30px; }
.top-web-bar {
position: sticky;
top: 0;
z-index: 91;
height: var(--topbar-h);
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
padding: 0 12px;
font-size: 12.5px;
color: #cbd5e1;
background: linear-gradient(90deg, rgba(14, 116, 144, 0.55), rgba(79, 70, 229, 0.55));
border-bottom: 1px solid rgba(125, 211, 252, 0.3);
white-space: nowrap;
overflow: hidden;
}
.top-web-bar svg { width: 15px; height: 15px; color: #7dd3fc; flex: none; }
.top-web-bar a { color: #fff; font-weight: 800; letter-spacing: 0.01em; }
.site-header { top: var(--topbar-h); }
html { scroll-padding-top: calc(96px + var(--topbar-h)); }
@media (max-width: 560px) { .top-web-bar .twb-text { display: none; } }
.fws-mail { font-size: 12px; }
.fws-mail code { font-family: var(--mono); color: #e2e8f0; background: rgba(255, 255, 255, 0.06); padding: 2px 6px; border-radius: 6px; }
.quick-web { display: flex; flex-wrap: wrap; gap: 8px; margin: 2px 0 14px; }
.quick-web a {
padding: 7px 12px;
border-radius: 12px;
font-weight: 700;
font-size: 13.5px;
color: #fff;
background: rgba(56, 189, 248, 0.12);
border: 1px solid rgba(125, 211, 252, 0.45);
}
.quick-web a em { font-style: normal; font-size: 10.5px; color: var(--muted); }
/* Minik Kalpler: every picture is shown whole; a blurred copy fills the frame */
.kids-bgblur {
position: absolute;
inset: -20px;
background-position: center;
background-size: cover;
filter: blur(26px) brightness(0.55) saturate(1.2);
transition: background-image 0.6s ease;
pointer-events: none;
}
.kids-slide { object-fit: contain; object-position: center; }
/* ==========================================================================
v4 · "YouTube'da keşfet" window
========================================================================== */
.yt-dialog { max-width: min(560px, calc(100vw - 24px)); }
.yt-inner h3 { margin: 6px 0 4px; font-family: var(--display); font-size: 26px; }
.yt-sub { margin: 0 0 14px; color: var(--muted); }
.yt-list { display: grid; gap: 8px; }
.yt-row, .yt-album, .yt-shortcut {
display: flex;
align-items: center;
gap: 12px;
padding: 10px 12px;
border-radius: 16px;
border: 1px solid color-mix(in srgb, var(--accent, #ef4444) 40%, transparent);
background: color-mix(in srgb, var(--accent, #ef4444) 10%, rgba(255, 255, 255, 0.02));
color: #fff;
transition: transform 0.2s var(--ease), background 0.2s;
}
.yt-row:hover, .yt-album:hover, .yt-shortcut:hover { transform: translateY(-2px); background: color-mix(in srgb, var(--accent, #ef4444) 18%, rgba(255, 255, 255, 0.03)); }
.yt-logo {
flex: none;
width: 42px;
height: 42px;
border-radius: 12px;
display: grid;
place-items: center;
background: #ff0033;
font-size: 22px;
}
.yt-logo svg { width: 24px; height: 24px; color: #fff; }
.yt-national .yt-logo { background: rgba(227, 10, 23, 0.25); }
.yt-copy { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
.yt-copy strong { font-size: 15px; }
.yt-copy small { color: var(--muted); font-size: 12.5px; }
.yt-go, .yt-play { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; font-weight: 700; color: var(--accent, #fca5a5); white-space: nowrap; }
.yt-go svg, .yt-play svg { width: 14px; height: 14px; }
.yt-album { --accent: #a78bfa; margin-top: 12px; }
.yt-album-disc {
flex: none;
width: 42px;
height: 42px;
border-radius: 50%;
background: radial-gradient(circle, #f5f3ff 0 12%, #111 13% 30%, #2a2a2a 31% 34%, #111 35% 100%);
box-shadow: 0 0 0 2px rgba(167, 139, 250, 0.6);
animation: spin-slow 4s linear infinite;
}
.yt-national { margin-top: 8px; }
.yt-shortcut { --accent: #22d3ee; margin-top: 12px; justify-content: center; font-size: 14px; }
.yt-shortcut svg { width: 16px; height: 16px; color: #22d3ee; }
.yt-shortcut b { color: #67e8f9; }
@media (prefers-reduced-motion: reduce) { .yt-album-disc { animation: none; } }
/* top bar: portal + shortcut, more eye-catching */
:root { --topbar-h: 34px; }
.top-web-bar {
gap: 10px;
font-size: 13px;
background: linear-gradient(90deg, #0e7490, #4f46e5 45%, #9333ea 70%, #0e7490);
background-size: 300% 100%;
animation: twb-flow 14s linear infinite;
position: sticky;
}
.twb-glow {
position: absolute;
inset: 0;
background: linear-gradient(100deg, transparent 30%, rgba(255, 255, 255, 0.22) 50%, transparent 70%);
transform: translateX(-100%);
animation: twb-shine 5s ease-in-out infinite;
pointer-events: none;
}
@keyframes twb-flow { to { background-position: 300% 0; } }
@keyframes twb-shine { 60%, 100% { transform: translateX(100%); } }
.top-web-bar a { position: relative; }
.twb-portal {
padding: 3px 10px;
border-radius: 999px;
background: rgba(255, 255, 255, 0.16);
border: 1px solid rgba(255, 255, 255, 0.4);
box-shadow: 0 0 14px rgba(125, 211, 252, 0.55);
}
.twb-portal i { font-style: normal; margin-inline-start: 4px; }
.twb-sep { width: 1px; height: 16px; background: rgba(255, 255, 255, 0.35); }
.twb-links { display: inline-flex; align-items: center; gap: 5px; color: #e0f2fe; font-weight: 600; }
.twb-links svg { width: 14px; height: 14px; color: #fde047; }
.twb-links b { color: #fff; }
@media (max-width: 700px) { .top-web-bar { gap: 6px; font-size: 12px; } .twb-sep { display: none; } }
@media (prefers-reduced-motion: reduce) { .top-web-bar, .twb-glow { animation: none; } }
.yt-flag { background: none; overflow: hidden; }
.yt-flag svg, .yt-flag .flag { width: 42px; height: 28px; border-radius: 6px; display: block; }
/* ==========================================================================
v4 · Web-app sign hanging from the menu on two ropes.
At the page bottom the ropes snap (left, then right) and it falls; back at
the top it drops in again and swings into place. (State classes from fx.js.)
========================================================================== */
:root { --topbar-h: 0px; --rope: 22px; }
.site-header { top: 0; }
html { scroll-padding-top: 96px; }
.top-web-bar {
position: fixed;
top: calc(var(--header-h) + var(--rope));
left: 0;
right: 0;
z-index: 89;
width: max-content;
max-width: calc(100vw - 16px);
height: auto;
margin-inline: auto;
display: block;
padding: 0;
background: none;
border: 0;
overflow: visible;
animation: none;
pointer-events: none;
transform-origin: 50% calc(-1 * var(--rope));
}
.twb-sign {
position: relative;
pointer-events: auto;
display: flex;
align-items: center;
gap: 10px;
height: 36px;
padding: 0 14px;
border-radius: 12px;
font-size: 13px;
color: #dbeafe;
white-space: nowrap;
background: linear-gradient(90deg, #0e7490, #4f46e5 45%, #9333ea 70%, #0e7490);
background-size: 300% 100%;
border: 1px solid rgba(255, 255, 255, 0.35);
box-shadow: 0 14px 30px -12px rgba(0, 0, 0, 0.8), 0 0 24px -6px rgba(99, 102, 241, 0.7);
overflow: visible;
transform-origin: 50% calc(-1 * var(--rope));
animation: twb-flow 14s linear infinite, twb-swing 4.6s ease-in-out infinite;
}
.twb-sign .twb-glow { border-radius: inherit; overflow: hidden; }
@keyframes twb-swing {
0%, 100% { transform: rotate(-1.4deg); }
50% { transform: rotate(1.4deg); }
}
/* ropes: twisted cord going up into the menu bar, with a little ring on the sign */
.twb-rope {
position: absolute;
bottom: calc(100% - 6px);
width: 3px;
height: calc(var(--rope) + 10px);
border-radius: 2px;
background: repeating-linear-gradient(160deg, #d6b98c 0 3px, #8a6a3e 3px 5px);
box-shadow: 0 0 4px rgba(0, 0, 0, 0.5);
transform-origin: 50% 0;
}
.twb-rope::after {
content: '';
position: absolute;
bottom: -4px;
left: -3px;
width: 9px;
height: 9px;
border-radius: 50%;
border: 2px solid #e2c28f;
background: rgba(0, 0, 0, 0.35);
}
.twb-rope--l { left: 22px; }
.twb-rope--r { right: 22px; }
/* snap & fall */
.top-web-bar.is-falling { animation: twb-fall 1.6s cubic-bezier(0.55, 0, 0.85, 0.35) forwards; transform-origin: 100% 0; }
.top-web-bar.is-falling .twb-sign { animation: twb-flow 14s linear infinite, twb-shake 0.35s ease-in-out 2; }
.top-web-bar.is-falling .twb-rope--l { animation: rope-snap 0.5s ease-out 0.35s forwards; }
.top-web-bar.is-falling .twb-rope--r { animation: rope-snap 0.5s ease-out 0.75s forwards; }
@keyframes twb-shake {
0%, 100% { transform: translateX(0) rotate(0); }
25% { transform: translateX(-3px) rotate(-1.5deg); }
75% { transform: translateX(3px) rotate(1.5deg); }
}
@keyframes rope-snap {
0% { transform: scaleY(1); opacity: 1; }
30% { transform: scaleY(0.35) rotate(18deg); opacity: 1; }
100% { transform: scaleY(0.2) rotate(40deg) translateY(-6px); opacity: 0; }
}
@keyframes twb-fall {
0%, 22% { transform: none; }
45% { transform: rotate(14deg) translateY(4px); } /* left rope gone: hangs from the right */
52% { transform: rotate(10deg); }
100% { transform: translateY(115vh) rotate(42deg); opacity: 0.9; visibility: hidden; }
}
/* drop back in at the top */
.top-web-bar.is-respawn { animation: twb-drop 0.95s cubic-bezier(0.2, 0.9, 0.3, 1.3) both; }
.top-web-bar.is-respawn .twb-rope { animation: rope-grow 0.6s ease-out both; }
@keyframes twb-drop {
0% { transform: translateY(calc(-1 * var(--header-h) - 80px)); }
70% { transform: translateY(6px) rotate(-2deg); }
100% { transform: none; }
}
@keyframes rope-grow {
from { transform: scaleY(0); }
to { transform: scaleY(1); }
}
@media (max-width: 700px) {
:root { --rope: 14px; }
.twb-sign { height: 32px; gap: 6px; padding: 0 10px; font-size: 12px; }
}
@media (prefers-reduced-motion: reduce) {
.twb-sign, .top-web-bar.is-falling, .top-web-bar.is-respawn, .twb-rope { animation: none !important; }
}
/* shine sweeps across the sign without spilling outside it */
.twb-sign .twb-glow {
transform: none;
inset: 0;
background: linear-gradient(100deg, transparent 40%, rgba(255, 255, 255, 0.25) 50%, transparent 60%) no-repeat;
background-size: 250% 100%;
animation: twb-shine-bg 5s ease-in-out infinite;
}
@keyframes twb-shine-bg {
0% { background-position: 150% 0; }
60%, 100% { background-position: -150% 0; }
}
/* sign hangs still (no sway); only shown at the very top — on scroll the ropes
snap and it drops out quickly, so it never sits over the page content */
.twb-sign { animation: twb-flow 14s linear infinite; transform: none; }
.twb-rope { height: calc(var(--rope) + 26px); }
.top-web-bar.is-falling { animation: twb-fall 1.05s cubic-bezier(0.55, 0, 0.85, 0.35) forwards; pointer-events: none; }
.top-web-bar.is-falling .twb-sign { pointer-events: none; animation: twb-flow 14s linear infinite, twb-shake 0.2s ease-in-out 1; }
.top-web-bar.is-falling .twb-rope--l { animation: rope-snap 0.35s ease-out 0.1s forwards; }
.top-web-bar.is-falling .twb-rope--r { animation: rope-snap 0.35s ease-out 0.3s forwards; }
@keyframes twb-fall {
0%, 12% { transform: none; opacity: 1; }
35% { transform: rotate(8deg) translateY(3px); opacity: 1; }
100% { transform: translateY(60vh) rotate(24deg); opacity: 0; visibility: hidden; }
}
.top-web-bar.is-respawn { animation: twb-drop 0.6s cubic-bezier(0.2, 0.8, 0.3, 1.1) both; }
@keyframes twb-drop {
0% { transform: translateY(-24px); opacity: 0; }
100% { transform: none; opacity: 1; }
}
/* narrower screens: drop the long sentence so the sign stays clear of the rain toggle */
@media (max-width: 1280px) {
.twb-sign > .twb-text { display: none; }
}
/* hang closer to the menu + cleaner snap: the left cord springs back up, the sign
pivots on the right cord for a beat, then that one goes too and it drops away */
:root { --rope: 8px; }
@media (max-width: 700px) { :root { --rope: 6px; } }
.top-web-bar.is-falling {
animation: twb-snapfall 1.35s linear forwards;
transform-origin: calc(100% - 23px) calc(-1 * var(--rope));
}
.top-web-bar.is-falling .twb-sign { animation: twb-flow 14s linear infinite; }
.top-web-bar.is-falling .twb-rope { transform-origin: 50% 0; }
.top-web-bar.is-falling .twb-rope--l { animation: rope-recoil 0.32s cubic-bezier(0.3, 1.4, 0.6, 1) 0.12s forwards; }
.top-web-bar.is-falling .twb-rope--r { animation: rope-recoil 0.32s cubic-bezier(0.3, 1.4, 0.6, 1) 0.7s forwards; }
@keyframes rope-recoil {
0% { transform: scaleY(1); opacity: 1; filter: brightness(1.8); }
100% { transform: scaleY(0); opacity: 0; }
}
@keyframes twb-snapfall {
0%, 9% { transform: none; animation-timing-function: cubic-bezier(0.4, 0, 0.6, 1); }
28% { transform: rotate(6deg); animation-timing-function: ease-in-out; }
40% { transform: rotate(3.8deg); animation-timing-function: ease-in-out; }
52% { transform: rotate(5deg); opacity: 1; animation-timing-function: cubic-bezier(0.5, 0, 0.9, 0.4); }
100% { transform: translateY(70vh) rotate(11deg); opacity: 0; visibility: hidden; }
}
/* ==========================================================================
v4 · Footer: deep-navy TECHMAK wordmark with a galaxy drifting through the
letters (and a sparkle now and then); the web-address sign hangs from it.
========================================================================== */
.footer-hang {
position: relative;
display: flex;
flex-direction: column;
align-items: center;
margin-top: 18px;
padding-bottom: 28px;
}
.footer-hang .footer-wordmark {
position: relative;
margin-top: 0;
background:
radial-gradient(1.4px 1.4px at 12% 30%, #fff 50%, transparent 51%),
radial-gradient(1.2px 1.2px at 37% 72%, #cfe3ff 50%, transparent 51%),
radial-gradient(1.6px 1.6px at 63% 22%, #fff 50%, transparent 51%),
radial-gradient(1.1px 1.1px at 81% 64%, #e9d5ff 50%, transparent 51%),
radial-gradient(1.3px 1.3px at 92% 18%, #fff 50%, transparent 51%),
radial-gradient(38% 60% at 25% 45%, rgba(124, 58, 237, 0.55), transparent 70%),
radial-gradient(34% 55% at 70% 60%, rgba(14, 165, 233, 0.45), transparent 70%),
radial-gradient(28% 50% at 50% 30%, rgba(236, 72, 153, 0.3), transparent 70%),
linear-gradient(180deg, #13204a, #0a1233 60%, #070d26);
background-size: 220px 140px, 260px 170px, 300px 150px, 240px 190px, 330px 160px, 120% 100%, 130% 100%, 140% 100%, 100% 100%;
-webkit-background-clip: text;
background-clip: text;
color: transparent;
animation: wm-galaxy 38s linear infinite;
filter: drop-shadow(0 0 1px rgba(120, 150, 255, 0.25));
}
@keyframes wm-galaxy {
from { background-position: 0 0, 0 0, 0 0, 0 0, 0 0, 0% 50%, 100% 50%, 50% 0%, 0 0; }
to { background-position: 440px 0, -520px 0, 600px 0, -480px 0, 660px 0, 100% 50%, 0% 50%, 50% 100%, 0 0; }
}
/* occasional sparkle sweeping across the letters */
.footer-hang .footer-wordmark::after {
content: 'TECHMAK';
position: absolute;
inset: 0;
background: linear-gradient(105deg, transparent 42%, rgba(255, 255, 255, 0.55) 50%, transparent 58%) no-repeat;
background-size: 250% 100%;
-webkit-background-clip: text;
background-clip: text;
color: transparent;
animation: wm-sparkle 7s ease-in-out infinite;
}
@keyframes wm-sparkle {
0%, 70% { background-position: 130% 0; }
88%, 100% { background-position: -30% 0; }
}
/* the sign: still, tied to the bottom of the letters */
.footer-hang .twb-sign {
margin-top: 30px;
max-width: calc(100% - 8px);
animation: twb-flow 14s linear infinite;
}
.footer-hang .twb-rope {
bottom: calc(100% - 6px);
height: 46px;
}
.footer-hang .twb-rope::before {
content: '';
position: absolute;
top: -4px;
left: -3px;
width: 9px;
height: 9px;
border-radius: 50%;
border: 2px solid #e2c28f;
background: rgba(0, 0, 0, 0.35);
}
.footer-hang .twb-rope--l { left: 18%; }
.footer-hang .twb-rope--r { right: 18%; }
@media (max-width: 1280px) { .footer-hang .twb-sign > .twb-text { display: inline; } }
@media (max-width: 900px) {
.footer-hang .twb-sign > .twb-text { display: none; }
.footer-hang .twb-sign { margin-top: 22px; }
.footer-hang .twb-rope { height: 34px; }
}
@media (prefers-reduced-motion: reduce) {
.footer-hang .footer-wordmark, .footer-hang .footer-wordmark::after { animation: none; }
}
/* header platform badges: bigger, full-strength brand marks on small tiles */
.header-platform-icons { gap: 6px; padding: 3px 5px; }
.header-plat-icon {
width: 30px;
height: 30px;
border-radius: 9px;
opacity: 1;
background: rgba(255, 255, 255, 0.06);
box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08);
}
.header-plat-icon .brand-ico { width: 20px; height: 20px; shape-rendering: geometricPrecision; }
.header-plat-icon.plat-android { color: #3ddc84; background: rgba(61, 220, 132, 0.1); }
.header-plat-icon.plat-apple { color: #fff; }
.header-plat-icon.plat-apple .brand-ico { width: 18px; height: 18px; margin-top: -2px; }
.header-plat-icon.plat-win98 { background: rgba(47, 123, 255, 0.1); }
.header-plat-icon.plat-win98 .brand-ico { width: 22px; height: 22px; }
/* the national-team channel is Turkish-only: hidden in every other language */
html:not([lang="tr"]) .yt-national { display: none; }
/* ~10% narrower page, centred */
.wrap { width: min(1188px, calc(100% - 48px)); }
/* a little more compact again */
.wrap { width: min(1120px, calc(100% - 48px)); }
/* ==========================================================================
v4 · Auto-hiding header with an arrow tab (fx.js 5c)
========================================================================== */
.site-header { transition: transform 0.35s cubic-bezier(0.2, 0.8, 0.2, 1), opacity 0.35s ease; }
.header-hidden .site-header { transform: translateY(-105%); opacity: 0; pointer-events: none; }
.header-hidden.header-peeking .site-header { transform: none; opacity: 1; pointer-events: auto; }
.header-peek {
position: fixed;
top: 0;
left: 50%;
z-index: 91;
width: 84px;
height: 26px;
display: grid;
place-items: center;
padding: 0;
border: 1px solid rgba(255, 255, 255, 0.16);
border-top: 0;
border-radius: 0 0 14px 14px;
background: rgba(10, 14, 31, 0.82);
backdrop-filter: blur(12px);
color: #c7d2fe;
cursor: pointer;
transform: translate(-50%, -100%);
transition: transform 0.3s ease, background 0.2s ease;
box-shadow: 0 6px 18px -8px rgba(0, 0, 0, 0.8), 0 0 14px -6px rgba(99, 102, 241, 0.8);
}
.header-peek svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; animation: peek-nudge 2.4s ease-in-out infinite; }
.header-hidden .header-peek { transform: translate(-50%, 0); }
.header-hidden.header-peeking .header-peek { transform: translate(-50%, -100%); }
.header-peek:hover { background: rgba(49, 46, 129, 0.9); }
@keyframes peek-nudge { 0%, 100% { transform: translateY(-1px); } 50% { transform: translateY(2px); } }
@media (max-width: 700px) {
.header-peek { width: 76px; height: 28px; }
}
@media (prefers-reduced-motion: reduce) {
.site-header, .header-peek { transition: none; }
.header-peek svg { animation: none; }
}
/* ==========================================================================
v4 · Phone polish
========================================================================== */
@media (max-width: 700px) {
.wrap { width: calc(100% - 28px); }
/* hero: tighter type, chips on one scrollable line */
.hero-actions { gap: 10px; }
.hero-actions .button { flex: 1 1 100%; justify-content: center; }
/* 3D ring heading: one compact line, hint hidden */
.vitrine-hint { display: none; }
/* app spotlight pill under the ring fits the screen */
.orbit-spotlight { justify-self: stretch; max-width: calc(100vw - 28px); width: auto; min-width: 0; box-sizing: border-box; margin-inline: 0; }
.orbit-spot-meta { min-width: 0; flex: 1; }
/* featured card: copy and buttons stacked, full width */
.spot-slide { grid-template-columns: 1fr !important; text-align: center; }
.spot-copy { min-width: 0; }
.spot-tagline { white-space: normal !important; }
.spot-actions { display: grid !important; grid-template-columns: 1fr 1fr; gap: 8px; width: 100%; }
.spot-actions .button { justify-content: center; padding-inline: 10px; font-size: 13px; white-space: nowrap; min-width: 0; }
/* music list: rows fit the phone */
.track { gap: 10px; padding: 12px 12px; max-width: 100%; box-sizing: border-box; }
.track-number, .track-label { display: none; }
/* section rhythm */
.section { padding-block: 56px; }
/* parrot bubble smaller on phones */
.parrot-bubble { max-width: min(250px, calc(100vw - 110px)); font-size: 12.5px; }
/* footer sign: two short rows instead of one long line */
.footer-hang .twb-sign { flex-wrap: wrap; justify-content: center; height: auto; padding: 8px 12px; row-gap: 6px; white-space: normal; }
.footer-hang .twb-sep { display: none; }
}
/* Minik Kalpler: the picture gets its own box to the right of the card, clear of
the top label and the bottom pager, so every scene is shown whole */
@media (min-width: 761px) {
.kids-slide,
.kids-slide.kids-slide--contain {
top: 70px;
bottom: 76px;
left: calc(min(380px, 34%) + 40px);
right: auto;
bottom: auto;
width: calc(100% - min(380px, 34%) - 68px);
height: calc(100% - 146px);
object-fit: contain;
object-position: center;
-webkit-mask-image: none;
mask-image: none;
border-radius: 18px;
filter: drop-shadow(0 18px 30px rgba(0, 0, 0, 0.55)) brightness(1.08) saturate(1.1);
}
.kids-shade { background: linear-gradient(95deg, rgba(5, 7, 18, 0.55) 0%, transparent 40%); }
}
/* header bar gets more room than the page content so it never spills over */
.site-header .header-inner { width: min(1400px, calc(100% - 32px)); }
/* flags beside the arrow tab once the menu has slid away (4 left · 4 right) */
.peek-langs {
position: fixed;
top: 0;
z-index: 91;
display: flex;
gap: 4px;
padding: 3px 6px;
background: rgba(10, 14, 31, 0.78);
backdrop-filter: blur(12px);
border: 1px solid rgba(255, 255, 255, 0.14);
border-top: 0;
transform: translateY(-110%);
transition: transform 0.3s ease;
}
.peek-langs--l { right: calc(50% + 46px); border-radius: 0 0 0 12px; }
.peek-langs--r { left: calc(50% + 46px); border-radius: 0 0 12px 0; }
.header-hidden .peek-langs { transform: none; }
.header-hidden.header-peeking .peek-langs { transform: translateY(-110%); }
.peek-flag {
display: grid;
place-items: center;
width: 28px;
height: 20px;
padding: 0;
border: 0;
border-radius: 4px;
background: none;
cursor: pointer;
opacity: 0.75;
transition: opacity 0.2s ease, transform 0.2s ease;
}
.peek-flag svg { width: 22px; height: 15px; border-radius: 3px; box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.2); }
.peek-flag:hover, .peek-flag:focus-visible { opacity: 1; transform: translateY(1px) scale(1.12); }
html[lang="tr"] .peek-flag[data-set-lang="tr"], html[lang="en"] .peek-flag[data-set-lang="en"],
html[lang="es"] .peek-flag[data-set-lang="es"], html[lang="de"] .peek-flag[data-set-lang="de"],
html[lang="fr"] .peek-flag[data-set-lang="fr"], html[lang="ar"] .peek-flag[data-set-lang="ar"],
html[lang="ru"] .peek-flag[data-set-lang="ru"], html[lang="ja"] .peek-flag[data-set-lang="ja"] {
opacity: 1;
box-shadow: 0 2px 0 0 #a5b4fc;
}
@media (max-width: 420px) {
.peek-langs { gap: 2px; padding: 3px 4px; }
.peek-flag { width: 24px; }
.peek-flag svg { width: 19px; height: 13px; }
.peek-langs--l { right: calc(50% + 40px); }
.peek-langs--r { left: calc(50% + 40px); }
}
/* gradient italic words: give the clip box head-room so dotted capitals (İ) keep their dot */
h1 em, h2 em { padding-top: 0.16em; }
.universe-copy h1 em { padding-top: 0.18em; margin-top: -0.18em; }
/* "Explore all apps" button: glowing rotating rim, peeking app icons, nudging arrow */
@property --smc-a { syntax: ''; inherits: false; initial-value: 0deg; }
.show-more-cta {
position: relative;
isolation: isolate;
gap: 12px;
padding: 12px 26px 12px 12px;
border: 0;
border-radius: 999px;
color: #fff;
font-weight: 700;
background: linear-gradient(110deg, #4f46e5, #9333ea 45%, #db2777 75%, #f59e0b);
background-size: 220% 100%;
box-shadow: 0 12px 34px -12px rgba(147, 51, 234, 0.9), 0 0 0 1px rgba(255, 255, 255, 0.18) inset;
animation: smc-flow 6s ease-in-out infinite alternate, smc-pulse 2.6s ease-in-out infinite;
overflow: visible;
}
.show-more-cta::before {
content: '';
position: absolute;
inset: -3px;
z-index: -1;
border-radius: inherit;
background: conic-gradient(from var(--smc-a), #67e8f9, #a78bfa, #f472b6, #fbbf24, #67e8f9);
filter: blur(6px);
opacity: 0.85;
animation: smc-spin 4s linear infinite;
}
.show-more-cta::after {
content: '';
position: absolute;
inset: 0;
border-radius: inherit;
background: linear-gradient(105deg, transparent 35%, rgba(255, 255, 255, 0.45) 50%, transparent 65%) no-repeat;
background-size: 250% 100%;
background-position: 130% 0;
animation: smc-shine 3.6s ease-in-out infinite;
pointer-events: none;
}
.smc-peek { display: inline-flex; align-items: center; }
.smc-peek img {
width: 30px;
height: 30px;
border-radius: 50%;
object-fit: cover;
border: 2px solid rgba(255, 255, 255, 0.85);
margin-inline-start: -10px;
box-shadow: 0 3px 8px rgba(0, 0, 0, 0.4);
transition: transform 0.3s var(--ease);
}
.smc-peek img:first-child { margin-inline-start: 0; }
.smc-peek b {
margin-inline-start: -8px;
min-width: 30px;
height: 30px;
padding: 0 6px;
display: inline-grid;
place-items: center;
border-radius: 999px;
font-size: 12px;
background: #0b1026;
border: 2px solid rgba(255, 255, 255, 0.85);
}
.smc-arrow { display: inline-flex; animation: smc-nudge 1.4s ease-in-out infinite; }
.show-more-cta:hover { transform: translateY(-2px) scale(1.03); }
.show-more-cta:hover .smc-peek img:nth-child(1) { transform: translate(-4px, -3px) rotate(-8deg); }
.show-more-cta:hover .smc-peek img:nth-child(3) { transform: translate(4px, -3px) rotate(8deg); }
.show-more-cta:hover .smc-arrow { animation-duration: 0.6s; }
@keyframes smc-spin { to { --smc-a: 360deg; } }
@keyframes smc-flow { to { background-position: 100% 0; } }
@keyframes smc-shine { 0%, 55% { background-position: 130% 0; } 85%, 100% { background-position: -30% 0; } }
@keyframes smc-nudge { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(5px); } }
@keyframes smc-pulse {
0%, 100% { box-shadow: 0 12px 34px -12px rgba(147, 51, 234, 0.9), 0 0 0 1px rgba(255, 255, 255, 0.18) inset; }
50% { box-shadow: 0 16px 44px -10px rgba(219, 39, 119, 0.95), 0 0 0 1px rgba(255, 255, 255, 0.3) inset; }
}
@media (prefers-reduced-motion: reduce) {
.show-more-cta, .show-more-cta::before, .show-more-cta::after, .smc-arrow { animation: none; }
}
/* "Explore all apps": calmer — dark glass pill, thin soft-gradient rim, no glow/pulse */
.show-more-cta {
background: rgba(255, 255, 255, 0.05);
background-size: auto;
border: 1px solid rgba(167, 139, 250, 0.35);
box-shadow: 0 10px 28px -16px rgba(99, 102, 241, 0.55);
animation: none;
color: #e5e7ff;
}
.show-more-cta::before { display: none; }
.show-more-cta::after {
background: linear-gradient(105deg, transparent 40%, rgba(255, 255, 255, 0.08) 50%, transparent 60%) no-repeat;
background-size: 250% 100%;
animation: smc-shine 7s ease-in-out infinite;
}
.show-more-cta:hover {
background: rgba(99, 102, 241, 0.14);
border-color: rgba(167, 139, 250, 0.6);
transform: translateY(-1px);
}
.smc-peek img { border: 2px solid rgba(15, 18, 38, 1); box-shadow: none; }
.smc-peek b { background: rgba(99, 102, 241, 0.25); border: 2px solid rgba(15, 18, 38, 1); color: #c7d2fe; }
.smc-arrow { color: #a5b4fc; animation-duration: 2.4s; }
/* legal shortcuts at the very bottom of every page */
.footer-legal {
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: center;
gap: 6px 18px;
padding: 16px 0 26px;
border-top: 1px solid rgba(255, 255, 255, 0.07);
font-size: 13px;
}
.footer-legal-title {
font-family: var(--mono);
font-size: 11px;
letter-spacing: 0.14em;
text-transform: uppercase;
color: #8b93b8;
}
.footer-legal a { color: #b8c0e0; text-decoration: none; transition: color 0.2s ease; }
.footer-legal a:hover { color: #fff; text-decoration: underline; text-underline-offset: 3px; }
@media (max-width: 700px) {
.footer-legal { gap: 8px 14px; font-size: 12.5px; padding-bottom: 90px; }
.footer-legal-title { flex-basis: 100%; text-align: center; }
}
/* /privacy/ and /terms/ app lists */
.legal-index-list { list-style: none; padding: 0; margin: 22px 0 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 10px; }
.legal-index-list a {
display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 14px;
background: rgba(255, 255, 255, 0.04); border: 1px solid rgba(255, 255, 255, 0.09); color: #e5e7ff; text-decoration: none;
}
.legal-index-list a:hover { border-color: rgba(167, 139, 250, 0.5); background: rgba(99, 102, 241, 0.1); }
.legal-index-list img { border-radius: 9px; }
/* ==========================================================================
v4 · Long-word languages (DE, FR, RU, ES…): let text break inside its box
instead of running into the next one
========================================================================== */
:is(h1, h2, h3, h4, p, li, strong, small, label, figcaption, .eyebrow) { overflow-wrap: break-word; }
html:not([lang="tr"]):not([lang="en"]) :is(h2, h3, h4, strong, p, li, small) { hyphens: auto; -webkit-hyphens: auto; }
.sector-copy { min-width: 0; }
.sector-copy strong, .sector-copy span { overflow-wrap: anywhere; }
.corp-url-hint { min-width: 0; overflow-wrap: anywhere; }
/* maintenance screen: password entry */
.maintenance-entry { margin: 18px auto 4px; max-width: 420px; text-align: center; }
.maintenance-entry label { display: block; margin-bottom: 8px; font-size: 13px; color: #cbd5e1; }
.maintenance-entry-row { display: flex; gap: 8px; }
.maintenance-entry-row input {
flex: 1; min-width: 0; padding: 11px 14px; border-radius: 12px;
border: 1px solid rgba(255, 255, 255, 0.2); background: rgba(255, 255, 255, 0.06);
color: #fff; font-size: 16px; letter-spacing: 0.2em; text-align: center;
}
.maintenance-entry-row input:focus { outline: 2px solid var(--cyan); outline-offset: 1px; }
.maintenance-entry-row .button { white-space: nowrap; }
.maintenance-entry-msg { min-height: 1.3em; margin: 8px 0 0; font-size: 13px; color: #fca5a5; }
@media (max-width: 480px) { .maintenance-entry-row { flex-direction: column; } }
/* admin: apps hidden from the site, featured flags, service accounts */
.is-admin-hidden { display: none !important; }
.app-unavailable { min-height: 50vh; display: grid; place-content: center; gap: 18px; text-align: center; }
.admin-flag { padding: 4px 9px; border-radius: 999px; font-size: 12px; white-space: nowrap; }
.admin-flag.is-on[data-flag="hide"] { background: rgba(239, 68, 68, 0.25); border-color: rgba(239, 68, 68, 0.7); color: #fecaca; }
.admin-flag.is-on[data-flag="feature"] { background: rgba(245, 158, 11, 0.25); border-color: rgba(245, 158, 11, 0.75); color: #fde68a; }
.admin-order-item.is-hidden-app .admin-order-app-info { opacity: 0.45; text-decoration: line-through; }
.admin-order-btns { flex-wrap: wrap; justify-content: flex-end; }
.admin-accounts { display: grid; gap: 8px; margin-bottom: 10px; }
.admin-account-row { display: grid; grid-template-columns: 1fr 1.4fr 1fr 1.4fr auto; gap: 6px; align-items: center; }
.admin-account-row input {
min-width: 0; padding: 8px 10px; border-radius: 10px; border: 1px solid rgba(255, 255, 255, 0.15);
background: rgba(255, 255, 255, 0.05); color: #fff; font-size: 13px;
}
.admin-account-btns { display: flex; gap: 4px; }
.admin-account-btns .button { padding: 7px 10px; font-size: 12px; }
@media (max-width: 760px) { .admin-account-row { grid-template-columns: 1fr 1fr; } .admin-account-btns { grid-column: 1 / -1; } }