/* =========================================
BeMatrx — Home Page (v4.2 — real SVG iPhone + 89 pin world)
=========================================
10-section landing page styles.
Scoped under .bm-home-* classes.
Updated 2026-04-24 Part 1:
- iPhone CSS mockup → real SVG frame (iphone.svg 188×388)
- World map → Simplemaps SVG + 89 Mercator-positioned pins
- 12 real careers with gradient cards
- FAQ smooth open+close (both directions)
- Hero stores-note (single line under badges)
========================================= */
/* ===== Section Background Tokens ===== */
:root {
--bm-home-bg-hero: linear-gradient(135deg, #0a0e27 0%, #1a1a2e 40%, #2d1a3a 70%, #4a1a3d 100%);
--bm-home-bg-character: #FFFFFF;
--bm-home-bg-world: linear-gradient(180deg, #FDE8EC 0%, #F0E8FC 100%);
--bm-home-bg-ai: linear-gradient(180deg, #0a0e27 0%, #1a1a2e 100%);
--bm-home-bg-economy: #FAFAFA;
--bm-home-bg-community: #FFF5F8;
--bm-home-bg-reality: linear-gradient(180deg, #0f0f1e 0%, #1a1a2e 100%);
--bm-home-bg-faq: #F5F5FA;
--bm-home-bg-cta: linear-gradient(180deg, #0a0e27 0%, #000000 100%);
}
/* ===== Base ===== */
.bm-home {
position: relative;
padding-block: 0;
overflow: hidden;
/* Anchor scroll offset for fixed header (#hero, #character, #faq, etc.) */
scroll-margin-top: var(--bm-header-height);
}
/* Static sections: remove sticky inset — `top: 72` was offsetting the
sticky child 72px down in natural flow (CSS sticky behaves like
`position: relative` with insets when not yet engaged), creating a
visible gap above each title. With scroll-snap removed, sticky has no
functional purpose for these sections. Community + Screens still need
sticky for their multi-panel scroll showcase — they're excluded.
!important required because the original `position: sticky; top: 72`
declarations are later in the file (per-section blocks). */
.bm-home-hero__sticky {
position: relative !important;
top: auto !important;
height: auto !important;
min-height: 100%;
}
/* CTA section — center content vertically inside its min-height. The
min-height: 100% from the static-section override resolves to 0 because
parent has min-height (not height); explicit min-height matches section
so flex centering actually centers within the section box. */
.bm-home-cta__sticky {
justify-content: center !important;
min-height: calc(100vh + 8px) !important;
}
.bm-home__head {
text-align: center;
margin-bottom: clamp(2rem, 4vw, 3.5rem);
}
.bm-home__title {
font-size: clamp(2rem, 4vw + 0.5rem, 3.75rem);
font-weight: 700;
line-height: 1.1;
letter-spacing: -0.02em;
color: var(--bm-dark);
margin: 0 0 0.5rem;
text-align: center;
}
.bm-home__title--light { color: #FFFFFF; }
.bm-home__subtitle {
font-size: clamp(1rem, 0.5vw + 0.875rem, 1.125rem);
color: var(--bm-text-muted);
margin: 0.75rem auto 0;
max-width: 40ch;
text-align: center;
}
.bm-home__eyebrow {
display: inline-block;
font-size: 0.75rem;
font-weight: 700;
letter-spacing: 0.2em;
text-transform: uppercase;
color: var(--bm-primary);
margin-bottom: 0.75rem;
}
/* Accessibility: reduced motion */
@media (prefers-reduced-motion: reduce) {
.bm-home *,
.bm-home *::before,
.bm-home *::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
}
}
/* =========================================
1. HERO
========================================= */
/* v4 (2026-05-04): 100dvh sabit yükseklik + flex center.
Outer viewport-locked container, content vertical-center'a oturur.
Sticky pattern artık yok (hero ilk bölüm, scroll'a girmeden biter). */
.bm-home-hero {
color: #FFFFFF;
min-height: 100dvh;
max-height: 100dvh;
position: relative;
padding-top: 0;
background: var(--bm-home-bg-hero);
display: flex;
align-items: center;
overflow: hidden;
}
@supports not (height: 100dvh) {
.bm-home-hero { min-height: 100vh; max-height: 100vh; }
}
.bm-home-hero__sticky {
position: relative;
flex: 1;
width: 100%;
display: flex;
flex-direction: column;
justify-content: flex-start;
align-items: center;
padding: 12px 24px 32px;
box-sizing: border-box;
overflow: hidden;
}
.bm-home-hero__bg {
position: absolute;
inset: 0;
pointer-events: none;
background:
radial-gradient(ellipse 40% 30% at 80% 20%, rgba(232,65,90,0.35), transparent 70%),
radial-gradient(ellipse 35% 25% at 15% 80%, rgba(139,92,246,0.25), transparent 70%);
}
.bm-home-hero__inner {
position: relative;
display: grid;
grid-template-columns: 1fr;
gap: 3rem;
align-items: center;
z-index: 1;
}
@media (min-width: 900px) {
.bm-home-hero__inner { grid-template-columns: 1.1fr 1fr; gap: 4rem; }
}
.bm-home-hero__copy { text-align: center; }
@media (min-width: 900px) {
.bm-home-hero__copy { text-align: left; }
/* RTL: Arapça gibi sağdan-sola dillerde hero metni sağa yaslı (2026-05-14). */
[dir="rtl"] .bm-home-hero__copy { text-align: right; }
}
.bm-home-hero__eyebrow {
display: inline-block;
font-size: 0.75rem;
font-weight: 700;
letter-spacing: 0.25em;
color: rgba(255,255,255,0.7);
text-transform: uppercase;
margin-bottom: 1.5rem;
padding: 0.4rem 0.9rem;
border: 1px solid rgba(255,255,255,0.15);
border-radius: 999px;
background: rgba(255,255,255,0.04);
backdrop-filter: blur(4px);
}
.bm-home-hero__title {
font-size: clamp(2rem, 5vw + 0.5rem, 4rem);
font-weight: 800;
line-height: 1.08;
letter-spacing: -0.04em;
color: #FFFFFF;
margin: 0 0 2rem;
padding-bottom: 0.12em;
overflow: visible;
}
.bm-home-hero__title-line {
display: block;
padding-bottom: 0.08em;
}
.bm-home-hero__title-line--accent {
background: linear-gradient(90deg, #FF6B83 0%, #E8415A 100%);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
padding-bottom: 0.15em;
}
/* Forced line break on desktop, hidden on mobile so the title flows
naturally on small screens. The space before
in the i18n string
is preserved when the
is hidden, so words don't collide. */
@media (max-width: 768px) {
.bm-home-hero__title-line br {
display: none;
}
}
/* Hero stores row (no per-badge badge; single note underneath) */
.bm-home-hero__stores {
display: flex;
flex-wrap: wrap;
gap: 0.75rem;
align-items: center;
justify-content: center;
margin-bottom: 0.5rem;
}
@media (min-width: 900px) {
.bm-home-hero__stores { justify-content: flex-start; }
}
.bm-home-hero__store {
display: inline-flex;
opacity: 0.85;
transition: opacity 0.2s ease;
}
.bm-home-hero__store:hover { opacity: 1; }
.bm-home-hero__store img {
height: 48px;
width: auto;
display: block;
}
.bm-home-hero__stores-note {
font-size: 0.8125rem;
color: rgba(255,255,255,0.5);
margin: 0 0 1.25rem;
font-weight: 500;
letter-spacing: 0.01em;
}
@media (max-width: 899px) {
.bm-home-hero__stores-note { text-align: center; }
}
.bm-home-hero__link {
display: inline-flex;
align-items: center;
gap: 0.4rem;
color: #FFFFFF;
font-weight: 600;
font-size: 1rem;
padding: 0.75rem 1.25rem;
border: 1px solid rgba(255,255,255,0.2);
border-radius: 999px;
transition: all 0.2s ease;
}
.bm-home-hero__link:hover {
background: rgba(255,255,255,0.08);
border-color: rgba(255,255,255,0.35);
color: #FFFFFF;
transform: translateY(-2px);
}
/* Hero visual (real BeMatrx UI screenshot + floating badges) */
.bm-home-hero__visual {
position: relative;
display: flex;
justify-content: center;
align-items: center;
}
.bm-home-hero__phone-wrap {
position: relative;
width: 100%;
max-width: 240px;
max-height: 85%;
margin: 0 auto;
aspect-ratio: 1184 / 2525;
z-index: 2;
transform: rotate(-4deg);
}
/* Backlight — single white radial behind phone */
.bm-home-hero__backlight {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 320px;
height: 540px;
background: radial-gradient(
ellipse,
rgba(255, 255, 255, 0.55) 0%,
rgba(255, 255, 255, 0.22) 25%,
rgba(255, 255, 255, 0.08) 50%,
transparent 75%
);
filter: blur(40px);
border-radius: 50%;
pointer-events: none;
z-index: 0;
}
.bm-home-hero__phone {
position: relative;
z-index: 2;
width: 100%;
height: auto;
object-fit: contain;
filter: drop-shadow(0 25px 40px rgba(0, 0, 0, 0.6));
}
.bm-home-hero__badge {
position: absolute;
padding: 10px 16px;
background: rgba(255,255,255,0.95);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
border-radius: 100px;
display: flex;
align-items: center;
gap: 10px;
box-shadow: 0 12px 30px rgba(0,0,0,0.3);
z-index: 3;
font-family: 'Helvetica Neue', sans-serif;
}
.bm-home-hero__badge-icon {
width: 28px;
height: 28px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 14px;
flex-shrink: 0;
color: #FFFFFF;
}
.bm-home-hero__badge--xp .bm-home-hero__badge-icon { background: linear-gradient(135deg, #fbbf24, #f59e0b); }
.bm-home-hero__badge--achievement .bm-home-hero__badge-icon { background: linear-gradient(135deg, #fbbf24, #f59e0b); }
.bm-home-hero__badge--role .bm-home-hero__badge-icon { background: linear-gradient(135deg, #ff5970, #ff3b54); }
.bm-home-hero__badge-content {
display: flex;
flex-direction: column;
}
.bm-home-hero__badge-label {
font-size: 11px;
color: #888;
line-height: 1;
}
.bm-home-hero__badge-text {
font-size: 13px;
color: #2a1810;
font-weight: 700;
line-height: 1.2;
}
/* Badge positions — pozisyonlar phone-wrap'a göre (telefonun edge'inden
negatif % ile dışarı taşacak). Counter-rotate rotate(4deg) phone-wrap'in
-4° tilt'ini iptal eder, badge'ler dik kalır (yere paralel). */
.bm-home-hero__badge--xp { top: 8%; right: -25%; transform: rotate(4deg); }
.bm-home-hero__badge--achievement { top: 50%; left: -35%; transform: rotate(4deg) translateY(-50%); }
.bm-home-hero__badge--role { bottom: 12%; right: -30%; transform: rotate(4deg); }
/* Tablet override — phone-wrap daha az dışarı taşacak şekilde içeri çek */
@media (max-width: 1023px) {
.bm-home-hero__badge--xp { right: -15%; }
.bm-home-hero__badge--achievement { left: -25%; }
.bm-home-hero__badge--role { right: -20%; }
}
/* Badge drift animations — asimetrik, her biri farklı keypoint/süre/offset.
badge-2 mevcut translateY(-50%) ile vertical center'da kalmalı —
keyframe bunu koruyor. */
@keyframes bm-hero-badge-drift-1 {
0% { transform: rotate(4deg) translate(0, 0); }
29% { transform: rotate(4deg) translate(-3px, -8px); }
61% { transform: rotate(4deg) translate(2px, -4px); }
100% { transform: rotate(4deg) translate(0, 0); }
}
@keyframes bm-hero-badge-drift-2 {
0% { transform: rotate(4deg) translateY(-50%) translate(0, 0); }
41% { transform: rotate(4deg) translateY(-50%) translate(4px, -6px); }
76% { transform: rotate(4deg) translateY(-50%) translate(-2px, -10px); }
100% { transform: rotate(4deg) translateY(-50%) translate(0, 0); }
}
@keyframes bm-hero-badge-drift-3 {
0% { transform: rotate(4deg) translate(0, 0); }
33% { transform: rotate(4deg) translate(-5px, -5px); }
68% { transform: rotate(4deg) translate(3px, -8px); }
100% { transform: rotate(4deg) translate(0, 0); }
}
.bm-home-hero__badge--xp { animation: bm-hero-badge-drift-1 5.3s ease-in-out infinite; }
.bm-home-hero__badge--achievement { animation: bm-hero-badge-drift-2 6.7s ease-in-out infinite -1.4s; }
.bm-home-hero__badge--role { animation: bm-hero-badge-drift-3 8.1s ease-in-out infinite -2.7s; }
@media (prefers-reduced-motion: reduce) {
.bm-home-hero__badge { animation: none !important; }
}
/* =========================================
2. CHARACTER — 12 real careers with gradient cards
========================================= */
.bm-home-character {
/* Sticky-pin hold zone: section is 400px taller than viewport, so
when sticky child engages it stays pinned for ~400px of scroll
(~4 wheel clicks) before user can continue down. */
min-height: calc(100vh + 400px);
position: relative;
background: var(--bm-home-bg-character);
/* CRITICAL: overflow must be `visible` (not `hidden` from .bm-home base)
so sticky child engages against viewport, not against this section as
a self-scroll container. With overflow:hidden, sticky never pins. */
overflow: visible;
}
.bm-home-character__sticky {
position: sticky;
top: var(--bm-header-height);
height: var(--bm-section-height);
display: flex;
flex-direction: column;
justify-content: flex-start;
align-items: center;
padding: 12px 24px 32px;
box-sizing: border-box;
overflow: hidden;
}
.bm-home-character .bm-home__title { margin-bottom: clamp(2rem, 4vw + 0.5rem, 4rem); }
.bm-home-character__grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 0.75rem;
max-width: 1000px;
margin: 0 auto;
}
@media (min-width: 600px) {
.bm-home-character__grid { grid-template-columns: repeat(3, 1fr); gap: 1rem; }
}
@media (min-width: 900px) {
.bm-home-character__grid { grid-template-columns: repeat(4, 1fr); gap: 1.25rem; }
}
.bm-career-card {
position: relative;
display: flex;
flex-direction: column;
align-items: center;
gap: 0.625rem;
padding: 1.25rem 0.875rem 1.125rem;
background: linear-gradient(135deg, var(--career-c1, #FAFAFA), var(--career-c2, #F0F0F0));
border: 1.5px solid var(--bm-border);
border-radius: 20px;
cursor: default; /* non-interactive, visual only */
transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
font-family: inherit;
overflow: hidden;
}
.bm-career-card::before {
content: '';
position: absolute;
inset: 0;
background: radial-gradient(ellipse at top, rgba(255,255,255,0.4), transparent 60%);
pointer-events: none;
opacity: 0.6;
}
.bm-career-card:hover {
transform: translateY(-6px) scale(1.03);
box-shadow: 0 20px 40px -10px rgba(232, 65, 90, 0.25);
border-color: var(--bm-primary);
}
.bm-career-card:hover::before { opacity: 1; }
.bm-career-card__icon {
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 40px;
color: var(--bm-dark);
transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
position: relative;
z-index: 1;
}
@media (max-width: 599px) {
.bm-career-card__icon { font-size: 34px; }
}
.bm-career-card:hover .bm-career-card__icon {
transform: scale(1.15) rotate(-5deg);
color: var(--bm-primary);
}
.bm-career-card__name {
font-size: 0.875rem;
font-weight: 700;
color: var(--bm-dark);
letter-spacing: 0.01em;
transition: color 0.3s ease;
position: relative;
z-index: 1;
}
.bm-career-card:hover .bm-career-card__name { color: var(--bm-primary); }
/* =========================================
3. WORLD — Leaflet, no tiles, silhouette continents (v5.1)
========================================= */
.bm-home-world {
/* Sticky-pin hold zone — see .bm-home-character for pattern */
min-height: calc(100vh + 400px);
position: relative;
background: linear-gradient(180deg, #1A2A3E 0%, #2A3A55 100%);
overflow: visible;
}
.bm-home-world__sticky {
position: sticky;
top: var(--bm-header-height);
height: var(--bm-section-height);
display: flex;
flex-direction: column;
justify-content: flex-start;
align-items: center;
padding: 12px 24px 32px;
box-sizing: border-box;
overflow: hidden;
}
/* Heading text scoped to world section (overrides default dark color) */
.bm-home-world .bm-home__title { color: #FFFFFF; }
.bm-home-world .bm-home__subtitle { color: rgba(255, 255, 255, 0.7); }
.bm-home-world__map {
width: 100%;
max-width: 1100px;
height: clamp(320px, 60vh, 560px);
margin: 0 auto;
border-radius: 24px;
overflow: hidden;
/* v6.3: container gets the same gradient as the section so drag/flyTo
never reveals a black "unrendered" edge. Inner Leaflet panes stay
transparent (see pane block below) — only the OUTERMOST container
paints the fallback gradient. */
background: linear-gradient(180deg, #1A2A3E 0%, #2A3A55 100%) !important;
box-shadow: none; /* v5.0: borderless integration with section bg */
contain: layout; /* isolate layout (fixes first-paint crop) */
position: relative; /* anchor for back-card absolute positioning fallback */
touch-action: pan-x pan-y; /* allow Leaflet to handle touch drag on mobile */
-webkit-user-select: none;
user-select: none;
}
@media (max-width: 768px) {
.bm-home-world__map {
border-radius: 16px;
/* Mobile-only height override — desktop clamp(320px, 60vh, 560px) intact.
75vw at 375px = 281px → clamp picks 300px floor. Tighter container
reduces vertical real estate so map doesn't dominate the section. */
height: clamp(300px, 75vw, 380px);
/* Vertical breathing room around the compact map so the section
height stays close to its pre-shrink length (~660px). 8vh at 800px
viewport = 64px each side → adds ~128px total back to the section. */
margin-block: clamp(40px, 8vh, 80px);
}
}
/* === Leaflet panes — fully transparent. The OUTERMOST container
(.bm-home-world__map) paints the gradient fallback; everything inside
stays transparent so country fills, pin markers, and labels are the
only pixels drawn over the gradient. v6.3: + canvas selector for the
Canvas renderer's drawing surface. */
.bm-home-world__map .leaflet-container,
.bm-home-world__map .leaflet-pane,
.bm-home-world__map .leaflet-map-pane,
.bm-home-world__map .leaflet-overlay-pane,
.bm-home-world__map .leaflet-shadow-pane,
.bm-home-world__map .leaflet-marker-pane,
.bm-home-world__map .leaflet-tooltip-pane,
.bm-home-world__map .leaflet-popup-pane,
.bm-home-world__map .leaflet-control-container,
.bm-home-world__map svg,
.bm-home-world__map canvas,
.bm-home-world__map .leaflet-zoom-animated {
background: transparent !important;
background-color: transparent !important;
}
.bm-home-world__map .leaflet-tile-pane { display: none !important; }
/* Container typography + interaction */
.bm-home-world__map .leaflet-container {
font-family: var(--bm-font-sans);
outline: none;
min-height: 340px;
touch-action: pan-x pan-y;
}
/* Attribution hidden — OSM/CARTO credit moved to site footer instead */
.bm-home-world__map .leaflet-control-attribution { display: none !important; }
.bm-home-world__map .leaflet-control-zoom { display: none !important; }
/* Country outlines + hover */
.bm-home-world__map .leaflet-interactive { cursor: pointer; }
.bm-home-world__map .bm-world-country { transition: fill-opacity 0.2s ease, opacity 0.2s ease, stroke-width 0.2s ease; }
/* Custom city pin (v5.3) — small idle, grows + ripple on hover */
.bm-world-pin-wrapper {
position: relative;
display: block;
}
.bm-world-pin {
display: block;
position: relative;
width: 6px;
height: 6px;
background: #FFFFFF;
border: none;
border-radius: 50%;
box-shadow:
0 0 0 1.5px rgba(232, 65, 90, 0.9),
0 0 4px rgba(232, 65, 90, 0.6);
cursor: pointer;
/* v6.2: dropped box-shadow transition so the gap between deselect → select
swap is instant (no flash through idle state during country switch). */
transition:
width 0.3s cubic-bezier(0.4, 0, 0.2, 1),
height 0.3s cubic-bezier(0.4, 0, 0.2, 1),
transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
/* Ripple ring (only visible on hover) */
.bm-world-pin::after {
content: '';
position: absolute;
inset: -4px;
border-radius: 50%;
border: 1.5px solid rgba(232, 65, 90, 0.5);
opacity: 0;
pointer-events: none;
transition: opacity 0.3s;
}
/* v6.1: active pins (pins of the currently selected country) — pulse.
v6.2: transition: none so the box-shadow swap into the active state
is instantaneous (no idle-state flash during country selection). */
.bm-world-pin--active {
width: 10px;
height: 10px;
transition: none;
animation: bm-world-pin-pulse-active 1.8s infinite ease-in-out;
}
@keyframes bm-world-pin-pulse-active {
0%, 100% {
box-shadow:
0 0 0 2px rgba(232, 65, 90, 1),
0 0 8px rgba(232, 65, 90, 0.8),
0 0 16px rgba(255, 255, 255, 0.4);
transform: scale(1);
}
50% {
box-shadow:
0 0 0 4px rgba(232, 65, 90, 0.6),
0 0 16px rgba(232, 65, 90, 1),
0 0 32px rgba(255, 255, 255, 0.6);
transform: scale(1.2);
}
}
@media (prefers-reduced-motion: reduce) {
.bm-world-pin,
.bm-world-pin-wrapper:hover .bm-world-pin,
.bm-world-pin::after,
.bm-world-pin--active {
animation: none;
transition: none;
}
}
/* City name tooltip (hover) */
.leaflet-tooltip.bm-world-tooltip {
background: #FFFFFF;
border: 1px solid rgba(232, 65, 90, 0.2);
color: var(--bm-dark);
font-weight: 600;
font-size: 13px;
padding: 6px 10px;
border-radius: 8px;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}
.leaflet-tooltip.bm-world-tooltip::before { display: none; }
/* v4.8: Permanent labels now use divIcon-based markers (full DOM control).
Tooltip permanent fallback kept for backward compat but not active. */
.bm-city-label-wrapper {
background: transparent !important;
border: none !important;
pointer-events: none !important;
}
.bm-city-label {
display: inline-block;
position: relative;
z-index: 1000; /* above pin/ripple */
/* v6.4: pink BG + white text. Pink halo shadow replaces the dark drop
shadow so the pill blends with selected-country highlight. */
background: #E8415A;
color: #FFFFFF !important;
font-family: var(--bm-font-sans);
font-weight: 700;
font-size: 12px;
padding: 5px 10px;
border-radius: 6px;
border: 1.5px solid rgba(255, 255, 255, 0.4);
box-shadow: 0 6px 16px rgba(232, 65, 90, 0.4);
white-space: nowrap;
/* v6.2: no horizontal centering — divIcon iconAnchor places the pill
to the right of the pin, so it shouldn't shift back over the dot. */
animation: bm-world-label-in 0.3s ease both;
pointer-events: none;
}
@keyframes bm-world-label-in {
from { opacity: 0; transform: translateY(4px); }
to { opacity: 1; transform: translateY(0); }
}
/* v6.2: Country name labels (TURKEY, GREECE...) — divIcon-based marker
layer. Anchored to manually calibrated COUNTRY_VIEW.center so the label
always lands on the landmass (no Spain-on-Balearics bug). Visibility
driven by JS (updateCountryLabels) per zoom tier; CSS handles fade. */
.bm-country-label-wrapper {
background: transparent !important;
border: none !important;
box-shadow: none !important;
pointer-events: none !important;
}
.bm-country-name-label {
display: inline-block;
/* center the pill on the COUNTRY_VIEW.center anchor */
transform: translate(-50%, -50%);
background: transparent;
border: none;
padding: 0;
color: rgba(255, 255, 255, 0.85);
font-family: var(--bm-font-sans);
font-weight: 700;
font-size: 11px;
letter-spacing: 0.15em;
text-transform: uppercase;
text-shadow:
0 0 8px rgba(0, 0, 0, 0.6),
0 1px 2px rgba(0, 0, 0, 0.8);
white-space: nowrap;
opacity: 0; /* JS toggles to 0.85 per tier */
transition: opacity 0.5s ease;
pointer-events: none;
}
/* Back-to-world floating card (top-right, shown when zoomed) */
.bm-world-back-card {
display: none;
align-items: center;
gap: 10px;
background: #FFFFFF;
border: 1px solid rgba(26, 26, 46, 0.08);
border-radius: 12px;
padding: 10px 12px;
box-shadow:
0 10px 28px rgba(0, 0, 0, 0.1),
0 2px 6px rgba(0, 0, 0, 0.06);
font-size: 13px;
font-family: var(--bm-font-sans);
backdrop-filter: blur(8px);
margin: 10px; /* inset from map edge */
}
.bm-world-back-card.is-visible {
display: inline-flex;
animation: bm-back-card-in 0.3s cubic-bezier(0.16, 1, 0.3, 1) both;
}
.bm-world-back-card__label {
color: #6B7280;
font-weight: 500;
font-size: 11px;
text-transform: uppercase;
letter-spacing: 0.06em;
}
.bm-world-back-card__country {
color: var(--bm-dark);
font-weight: 700;
font-size: 14px;
max-width: 180px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.bm-world-back-card__close {
display: inline-flex;
align-items: center;
justify-content: center;
width: 24px;
height: 24px;
padding: 0;
background: #F3F4F6;
border: none;
border-radius: 6px;
color: #6B7280;
cursor: pointer;
transition: background 0.2s ease, color 0.2s ease, transform 0.2s ease;
margin-left: 4px;
}
.bm-world-back-card__close:hover {
background: var(--bm-primary);
color: #FFFFFF;
transform: scale(1.05);
}
@keyframes bm-back-card-in {
from { opacity: 0; transform: translateY(-8px) scale(0.95); }
to { opacity: 1; transform: translateY(0) scale(1); }
}
@media (max-width: 768px) {
.bm-world-back-card {
padding: 8px 10px;
font-size: 12px;
gap: 8px;
margin: 8px;
}
.bm-world-back-card__country { max-width: 120px; font-size: 13px; }
}
/* =========================================
4. AI TRANSFORMATION — beam + sparkles (CSS only, no JS)
========================================= */
.bm-home-ai {
color: #FFFFFF;
/* Sticky-pin hold zone — see .bm-home-character for pattern */
min-height: calc(100vh + 400px);
position: relative;
text-align: center;
background: radial-gradient(ellipse at center, #1A0F2E 0%, #0F0F1A 70%);
overflow: visible;
}
.bm-home-ai__sticky {
position: sticky;
top: var(--bm-header-height);
height: var(--bm-section-height);
display: flex;
flex-direction: column;
justify-content: flex-start;
align-items: center;
padding: 12px 24px 32px;
box-sizing: border-box;
overflow: hidden;
}
.bm-home-ai__inner {
max-width: 1000px;
margin: 0 auto;
}
.bm-home-ai__eyebrow {
color: #E8415A;
font-weight: 700;
font-size: 12px;
letter-spacing: 0.15em;
text-transform: uppercase;
margin: 0 0 16px;
}
.bm-home-ai__title {
color: #FFFFFF;
font-size: clamp(2.5rem, 6vw, 4rem);
font-weight: 800;
line-height: 1.1;
margin: 0 0 20px;
}
.bm-home-ai__subtitle {
color: rgba(255, 255, 255, 0.7);
font-size: 16px;
line-height: 1.5;
max-width: 540px;
margin: 0 auto 32px;
text-align: center;
}
.bm-home-ai__stage {
display: flex;
align-items: center;
justify-content: center;
gap: 40px;
max-width: 900px;
margin: 0 auto;
padding-bottom: 40px;
}
/* Portraits — larger + dramatic (v6.5: 240 → 320)
v6.5.1: overflow moved from container → ![]()
so the ::before shimmer
ring (inset: -6px, painted outside the portrait) isn't clipped. The
container is now overflow:visible with explicit z-index stacking. */
.bm-home-ai__portrait {
position: relative;
width: 320px;
height: 320px;
border-radius: 50%;
overflow: visible;
z-index: 1;
transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
flex-shrink: 0;
}
.bm-home-ai__portrait img {
position: relative;
z-index: 1;
width: 100%;
height: 100%;
border-radius: 50%; /* clips itself round (parent no longer crops) */
object-fit: cover;
display: block;
transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}
/* Before — muted grayscale */
.bm-home-ai__portrait--before {
box-shadow: 0 20px 60px rgba(0,0,0,0.6);
}
.bm-home-ai__portrait--before img {
filter: grayscale(0.7) brightness(0.85);
}
/* After — vivid with pink ring */
.bm-home-ai__portrait--after {
box-shadow:
0 20px 60px rgba(232, 65, 90, 0.5),
0 0 0 4px rgba(232, 65, 90, 0.2);
}
.bm-home-ai__portrait-ring {
position: absolute;
inset: -8px;
border-radius: 50%;
border: 2px solid rgba(232, 65, 90, 0.6);
pointer-events: none;
z-index: 0; /* v6.5.1: behind shimmer ::before */
animation: bm-ring-pulse 3s infinite ease-in-out;
}
@keyframes bm-ring-pulse {
0%, 100% { transform: scale(1); opacity: 0.6; }
50% { transform: scale(1.08); opacity: 0.2; }
}
.bm-home-ai__label {
position: absolute;
bottom: -60px;
left: 50%;
transform: translateX(-50%);
display: flex;
flex-direction: column;
align-items: center;
gap: 2px;
white-space: nowrap;
}
.bm-home-ai__label strong {
color: rgba(255, 255, 255, 0.5);
font-size: 11px;
font-weight: 700;
letter-spacing: 0.12em;
text-transform: uppercase;
}
.bm-home-ai__label em {
color: rgba(255, 255, 255, 0.85);
font-size: 14px;
font-weight: 600;
font-style: normal;
}
.bm-home-ai__portrait--after .bm-home-ai__label strong {
color: #E8415A;
}
/* v6.5: shimmer ring — rotating conic gradient. Replaces the v6.1
:has() cross-sibling blur/dim hover effect (which dimmed the
non-hovered portrait). Now both portraits stay fully visible —
"Real you" stays its statically-grayscaled self, "Tomorrow" stays
vivid, only the ring spins faster on hover. */
.bm-home-ai__portrait::before {
content: '';
position: absolute;
inset: -6px; /* v6.5.1: -3 → -6 (more visible offset) */
border-radius: 50%;
padding: 3px; /* v6.5.1: 2 → 3 (thicker ring) */
z-index: 2; /* v6.5.1: above img + ring */
background: conic-gradient(
from 0deg,
transparent 0%,
transparent 50%, /* v6.5.1: 70 → 50 (segment now ~50% arc) */
#FF5C75 70%,
#E8415A 80%,
#FF5C75 90%,
transparent 100%
);
-webkit-mask:
linear-gradient(#fff 0 0) content-box,
linear-gradient(#fff 0 0);
-webkit-mask-composite: xor;
mask-composite: exclude;
opacity: 0.85; /* v6.5.1: 0.7 → 0.85 */
pointer-events: none;
animation: bm-shimmer-rotate 4s linear infinite;
transition: opacity 0.4s ease;
}
/* Tomorrow ring: white-glint variant + offset start angle */
.bm-home-ai__portrait--after::before {
background: conic-gradient(
from 90deg,
transparent 0%,
transparent 50%, /* v6.5.1: 70 → 50 */
#FF5C75 70%,
#FFFFFF 80%,
#FF5C75 90%,
transparent 100%
);
}
@keyframes bm-shimmer-rotate {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
@media (hover: hover) and (pointer: fine) {
/* Hover: lift + shimmer speeds up + brightens. No blur on the other
side — both portraits stay equally visible. */
.bm-home-ai__portrait:hover {
transform: scale(1.05);
}
.bm-home-ai__portrait:hover::before {
opacity: 1;
animation-duration: 2s;
}
}
/* Beam — gradient line + glow halo + 6 sparkles */
.bm-home-ai__beam {
position: relative;
width: 140px;
height: 140px;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.bm-home-ai__beam-line {
position: absolute;
top: 50%;
left: 10%;
right: 10%;
height: 3px;
transform: translateY(-50%);
background: linear-gradient(
90deg,
transparent 0%,
rgba(232, 65, 90, 0.2) 10%,
rgba(232, 65, 90, 1) 50%,
rgba(232, 65, 90, 0.2) 90%,
transparent 100%
);
box-shadow: 0 0 20px rgba(232, 65, 90, 0.8);
border-radius: 2px;
animation: bm-beam-flow 2s infinite ease-in-out;
}
@keyframes bm-beam-flow {
0%, 100% { opacity: 0.6; transform: translateY(-50%) scaleX(0.9); }
50% { opacity: 1; transform: translateY(-50%) scaleX(1.05); }
}
.bm-home-ai__beam-glow {
position: absolute;
inset: 0;
background: radial-gradient(circle at center, rgba(232, 65, 90, 0.35) 0%, transparent 70%);
filter: blur(16px);
animation: bm-glow-pulse 3s infinite ease-in-out;
pointer-events: none;
}
@keyframes bm-glow-pulse {
0%, 100% { opacity: 0.5; transform: scale(1); }
50% { opacity: 1; transform: scale(1.2); }
}
.bm-home-ai__sparkle {
position: absolute;
width: 5px;
height: 5px;
background: #FFFFFF;
border-radius: 50%;
box-shadow: 0 0 8px #FFFFFF, 0 0 16px rgba(232, 65, 90, 0.8);
opacity: 0;
animation: bm-ai-sparkle 2.5s infinite ease-in-out;
}
.bm-home-ai__sparkle--1 { top: 20%; left: 15%; animation-delay: 0s; }
.bm-home-ai__sparkle--2 { top: 30%; right: 20%; animation-delay: 0.4s; }
.bm-home-ai__sparkle--3 { top: 60%; left: 25%; animation-delay: 0.8s; }
.bm-home-ai__sparkle--4 { bottom: 20%; right: 15%; animation-delay: 1.2s; }
.bm-home-ai__sparkle--5 { top: 45%; left: 50%; animation-delay: 1.6s; }
.bm-home-ai__sparkle--6 { bottom: 30%; left: 40%; animation-delay: 2s; }
@keyframes bm-ai-sparkle {
0%, 100% { opacity: 0; transform: scale(0) rotate(0deg); }
50% { opacity: 1; transform: scale(1.5) rotate(180deg); }
}
/* Mobile — iter4 (2026-05-05): minimal override, web shape preserved.
iter2/iter3 yapısal override'ları (height:auto, display:flex, flex-direction
on portrait, border-radius:0, label position:static) GERİ ALINDI — bunlar
pembe ::before ring'ini bozuyordu. Şimdi sadece sayısal override'lar
(boyut + spacing). Label hala default position:absolute bottom:-60px;
portrait container'a margin-bottom:60px ile altında label için yer açıldı.
Stage gap:0 çünkü margin-bottom zaten boşluğu sağlıyor. */
@media (max-width: 640px) {
.bm-home-ai { padding: 24px 16px; }
.bm-home-ai__eyebrow { margin-bottom: 8px; }
.bm-home-ai__title { margin-bottom: 8px; }
.bm-home-ai__subtitle {
font-size: 14px;
margin: 0 20px 16px;
}
.bm-home-ai__stage {
flex-direction: column;
gap: 0;
}
.bm-home-ai__portrait {
width: 200px;
height: 200px;
margin-bottom: 60px;
}
.bm-home-ai__beam {
width: 64px;
height: 64px;
transform: rotate(90deg);
}
}
/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
.bm-home-ai__portrait-ring,
.bm-home-ai__portrait::before,
.bm-home-ai__beam-line,
.bm-home-ai__beam-glow,
.bm-home-ai__sparkle {
animation: none;
}
}
/* =========================================
5. ECONOMY — 3-iPhone hover spotlight
========================================= */
.bm-home-economy {
/* Sticky-pin hold zone — see .bm-home-character for pattern */
min-height: calc(100vh + 400px);
position: relative;
background: var(--bm-home-bg-economy);
overflow: visible;
}
.bm-home-economy__sticky {
position: sticky;
top: var(--bm-header-height);
height: var(--bm-section-height);
display: flex;
flex-direction: column;
justify-content: flex-start;
align-items: center;
padding: 12px 24px 48px;
box-sizing: border-box;
overflow: hidden;
}
/* =========================================
"Build a life." fan layout (2026-05-01)
=========================================
3 device mockups: left tilted -10°, center front+larger, right
tilted +10°. Each phone bobs at a different tempo via separate
keyframe but using shared CSS custom properties for offset/tilt/
float — so tablet/mobile breakpoints just override the variables,
not the keyframes themselves.
========================================= */
/* polish (2026-05-05): gradient + decorative pink glow removed —
plain white section per Sezgin onay (web + mobile). ::before is now
display:none everywhere (was already display:none on mobile). */
.bm-home-economy {
background: #ffffff;
}
.bm-home-economy::before {
display: none;
}
.bm-home-economy__sticky > .bm-container {
position: relative;
z-index: 1;
}
.bm-home-economy .bm-home__title {
font-size: 48px;
font-weight: 700;
color: #0f0f0f;
text-align: center;
letter-spacing: -0.02em;
}
@media (max-width: 767px) {
.bm-home-economy .bm-home__title {
font-size: 32px;
}
}
.bm-life-stage {
position: relative;
height: 520px;
display: flex;
align-items: center;
justify-content: center;
}
@media (max-width: 1023px) and (min-width: 768px) {
.bm-life-stage { height: 460px; }
}
@media (max-width: 767px) {
.bm-life-stage { height: 400px; }
}
.bm-life-phone {
position: absolute;
top: 50%;
left: 50%;
margin-top: -224px; /* half of frame height (449) — polish 2026-05-05 */
will-change: transform;
}
/* Frame is now a transparent wrapper — PNG screenshots have their own
iPhone bezel + notch baked in (1184×2525). CSS frame would create
a double-bezel; transparent + 0 padding/radius lets the PNG render
1:1. Width/height retained for layout (parent .bm-life-phone uses
absolute positioning + animation which needs concrete dimensions). */
.bm-life-phone__frame {
width: 220px;
height: 449px;
background: transparent;
border-radius: 0;
padding: 0;
position: relative;
box-sizing: border-box;
}
/* Notch + placeholder hidden — PNG provides notch; placeholder unused
once real assets exist. */
.bm-life-phone__notch {
display: none;
}
.bm-life-phone__placeholder {
display: none;
}
.bm-life-phone__screen {
width: 100%;
height: 100%;
background: transparent;
border-radius: 0;
position: relative;
overflow: hidden;
}
.bm-life-phone__screen img {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: contain;
border-radius: 0;
display: block;
}
/* Left phone — tilted -10°, bob 8px, 5.5s tempo */
.bm-life-phone--left {
--offset: -220px;
--tilt: -10deg;
--float: -8px;
z-index: 1;
filter: drop-shadow(0 20px 30px rgba(0,0,0,0.15));
animation: bm-life-float-left 5.5s ease-in-out infinite;
}
/* Right phone — tilted +10°, bob 10px, 6s tempo */
.bm-life-phone--right {
--offset: 220px;
--tilt: 10deg;
--float: -10px;
z-index: 1;
filter: drop-shadow(0 20px 30px rgba(0,0,0,0.15));
animation: bm-life-float-right 6s ease-in-out infinite;
}
/* Center phone — bigger, on top, bob 12px, 5s tempo */
.bm-life-phone--center {
--float: -12px;
z-index: 2;
margin-top: -242px; /* half of 485 — polish 2026-05-05 */
filter: drop-shadow(0 30px 40px rgba(0,0,0,0.2));
animation: bm-life-float-center 5s ease-in-out infinite;
}
.bm-life-phone--center .bm-life-phone__frame {
width: 238px;
height: 485px;
padding: 7px;
border-radius: 44px;
}
.bm-life-phone--center .bm-life-phone__notch {
width: 100px;
height: 28px;
border-radius: 14px;
top: 9px;
}
.bm-life-phone--center .bm-life-phone__screen {
border-radius: 39px;
}
/* Tablet (max-1023): closer offsets */
@media (max-width: 1023px) {
.bm-life-phone--left { --offset: -180px; }
.bm-life-phone--right { --offset: 180px; }
}
/* Mobile (max-767): swipe carousel (CSS-only).
Fan layout disabled — phones become horizontal scroll-snap targets.
Desktop @keyframes bm-life-float-* preserved (unused on mobile because
`animation: none !important` clears it; still applied on desktop ≥768).
!important required because desktop rules use absolute positioning and
per-phone variants (--offset/--tilt/--float) with high specificity. */
@media (max-width: 767px) {
/* Decorative pembe radial glow taşıyor mobile'da (rgba 0.04 çok soluk),
gizle — görsel kayıp minimum, desktop'ta görünür kalır. */
.bm-home-economy::before { display: none; }
/* Stage: horizontal scroll container with snap.
Override desktop height (520) and earlier mobile rule (400). */
.bm-life-stage {
height: auto !important;
display: flex !important;
flex-direction: row !important;
align-items: center;
justify-content: flex-start;
overflow-x: auto !important;
overflow-y: hidden;
scroll-snap-type: x mandatory;
scroll-behavior: smooth;
gap: 16px;
padding: 16px 0;
margin: 0;
scrollbar-width: none;
-ms-overflow-style: none;
}
.bm-life-stage::-webkit-scrollbar { display: none; }
/* Phone: scroll-snap target. Clear fan absolute positioning + animation. */
.bm-life-phone {
position: relative !important;
top: auto !important;
left: auto !important;
margin: 0 !important;
transform: none !important;
animation: none !important;
z-index: auto !important;
flex: 0 0 260px;
scroll-snap-align: center;
}
/* First/last gutters so first/last phone can center under viewport.
calc((100vw - 260px) / 2 - 16px) = side space minus the gap.
max(0, ...) protects against negative margins on very narrow viewports.
iter2: 220→260 phone width bump, formula updated to match. */
.bm-life-phone:first-child { margin-left: max(0px, calc((100vw - 260px) / 2 - 16px)) !important; }
.bm-life-phone:last-child { margin-right: max(0px, calc((100vw - 260px) / 2 - 16px)) !important; }
/* Phone frame: 260×531 wrapper. padding/border-radius zeroed to match
the asset-upload sprint default — PNG has its own bezel; carousel
only needs the dimensions for layout/snap centering. */
.bm-life-phone__frame {
width: 260px;
height: 531px;
padding: 0;
border-radius: 0;
}
.bm-life-phone__screen { border-radius: 0; }
.bm-life-phone__notch {
width: 82px;
height: 24px;
border-radius: 13px;
top: 7px;
}
/* Center phone: same size as siblings in carousel (no fan focus). */
.bm-life-phone--center .bm-life-phone__frame {
width: 260px;
height: 531px;
padding: 0;
border-radius: 0;
}
.bm-life-phone--center .bm-life-phone__screen { border-radius: 0; }
/* shadow-fix (2026-05-05): default-scope drop-shadow yarattığı soluk
gri halka mobile'da telefon alt-üstünde "ince gri şerit" olarak
görünüyordu (Sezgin onayı). Web'de gölge görsel önemli kalır,
mobile'da kaldır. !important çünkü --left/--center/--right rule'ları
filter'i variant-specific tanımlıyor. */
.bm-life-phone--left,
.bm-life-phone--center,
.bm-life-phone--right {
filter: none !important;
}
}
@keyframes bm-life-float-left {
0%, 100% { transform: translateX(-50%) translateX(var(--offset)) rotate(var(--tilt)) translateY(0); }
50% { transform: translateX(-50%) translateX(var(--offset)) rotate(var(--tilt)) translateY(var(--float)); }
}
@keyframes bm-life-float-right {
0%, 100% { transform: translateX(-50%) translateX(var(--offset)) rotate(var(--tilt)) translateY(0); }
50% { transform: translateX(-50%) translateX(var(--offset)) rotate(var(--tilt)) translateY(var(--float)); }
}
@keyframes bm-life-float-center {
0%, 100% { transform: translateX(-50%) translateY(0); }
50% { transform: translateX(-50%) translateY(var(--float)); }
}
/* Reduced motion — pause float, hold static end-position */
@media (prefers-reduced-motion: reduce) {
.bm-life-phone--left,
.bm-life-phone--center,
.bm-life-phone--right { animation: none !important; }
.bm-life-phone--left { transform: translateX(-50%) translateX(var(--offset)) rotate(var(--tilt)); }
.bm-life-phone--right { transform: translateX(-50%) translateX(var(--offset)) rotate(var(--tilt)); }
.bm-life-phone--center{ transform: translateX(-50%); }
}
/* =========================================
6. COMMUNITY — 3-panel scroll showcase (v4.4)
========================================= */
.bm-home-community {
background: var(--bm-home-bg-community);
position: relative;
min-height: calc(100vh + 900px);
padding: 0;
overflow: visible;
}
/* Sticky stage — flex column, vertically-centered head + stage.
v2: top:header-height (header altına yapışır, üstüne taşma yok) +
height:section-height (header çıkarılmış, "üst boşluk fazla" hissi
yok). Padding sadece içerik breathing — header offset artık dış
kapsamda yapılıyor. */
.bm-home-community__sticky {
position: sticky;
top: var(--bm-header-height);
height: var(--bm-section-height);
display: flex;
flex-direction: column;
justify-content: flex-start;
align-items: center;
padding: 12px 24px 32px;
box-sizing: border-box;
gap: clamp(32px, 5vh, 64px);
overflow: hidden;
}
.bm-home-community__head {
flex-shrink: 0;
width: 100%;
max-width: 1200px;
text-align: center;
}
.bm-home-community__stage {
flex: 1 1 auto;
min-height: 0;
width: 100%;
max-width: 1200px;
position: relative;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
.bm-home-community__title {
text-align: center;
margin: 0; /* gap stickyden geliyor */
color: var(--bm-dark);
font-weight: 800;
}
.bm-home-community__panels {
position: relative;
width: 100%;
max-width: 1100px;
margin: 0 auto;
min-height: 440px;
}
.bm-home-community__panel {
position: absolute;
inset: 0;
display: grid;
grid-template-columns: 1fr 1fr;
gap: 3rem;
align-items: center;
opacity: 0;
transform: translateY(20px);
pointer-events: none;
transition:
opacity 0.5s cubic-bezier(0.4, 0, 0.2, 1),
transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}
.bm-home-community__panel.is-active {
opacity: 1;
transform: translateY(0);
pointer-events: auto;
}
.bm-home-community__sub {
font-size: clamp(1.75rem, 3vw + 0.5rem, 3rem);
font-weight: 700;
line-height: 1.1;
letter-spacing: -0.02em;
color: var(--bm-dark);
margin: 0 0 1rem;
}
.bm-home-community__text {
font-size: clamp(1rem, 0.5vw + 0.875rem, 1.125rem);
color: #4B5563;
line-height: 1.6;
margin: 0;
max-width: 34ch;
}
.bm-home-community__visual { display: flex; justify-content: center; }
/* Progress dots — sit below the panel stage in normal flex flow.
Eski layout absolute + bottom:3rem ile sticky'nin bottom kenarına
yapışıyordu; restructure ile dots __stage'in son flex child'ı oldu. */
.bm-home-community__dots {
display: flex;
justify-content: center;
gap: 0.5rem;
margin-top: 1.5rem;
z-index: 2;
}
.bm-home-community__dot {
width: 8px;
height: 8px;
border-radius: 50%;
background: rgba(26, 26, 46, 0.2);
transition: all 0.3s ease;
}
.bm-home-community__dot.is-active {
background: var(--bm-primary);
width: 24px;
border-radius: 4px;
}
/* ---- Chat mock (panel 1) ---- */
.bm-chat-mock {
display: flex;
flex-direction: column;
gap: 12px;
padding: 24px;
background: #FFFFFF;
border: 1px solid rgba(26, 26, 46, 0.08);
border-radius: 24px;
width: 100%;
max-width: 360px;
box-shadow: 0 8px 32px rgba(232, 65, 90, 0.08);
}
.bm-chat-mock__msg {
display: flex;
gap: 8px;
align-items: flex-end;
}
.bm-chat-mock__msg--me { justify-content: flex-end; }
.bm-chat-mock__avatar {
width: 28px;
height: 28px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-weight: 700;
font-size: 12px;
color: #FFFFFF;
flex-shrink: 0;
}
.bm-chat-mock__bubble {
max-width: 220px;
padding: 10px 14px;
background: #F3F4F6;
color: var(--bm-dark);
border-radius: 18px 18px 18px 4px;
font-size: 14px;
line-height: 1.4;
}
.bm-chat-mock__bubble--me {
background: var(--bm-primary);
color: #FFFFFF;
border-radius: 18px 18px 4px 18px;
}
.bm-chat-mock__bubble--typing {
display: inline-flex;
align-items: center;
gap: 4px;
padding: 12px 14px;
background: #F3F4F6;
}
.bm-chat-mock__bubble--typing span {
width: 6px;
height: 6px;
background: var(--bm-text-muted);
border-radius: 50%;
animation: bm-typing-dot 1.4s infinite;
}
.bm-chat-mock__bubble--typing span:nth-child(2) { animation-delay: 0.2s; }
.bm-chat-mock__bubble--typing span:nth-child(3) { animation-delay: 0.4s; }
@keyframes bm-typing-dot {
0%, 60%, 100% { opacity: 0.3; transform: translateY(0); }
30% { opacity: 1; transform: translateY(-3px); }
}
/* ---- Event mock (panel 2) ---- */
.bm-event-mock {
width: 100%;
max-width: 360px;
background: #FFFFFF;
border: 1px solid rgba(26, 26, 46, 0.08);
border-radius: 20px;
overflow: hidden;
box-shadow: 0 8px 32px rgba(232, 65, 90, 0.08);
}
.bm-event-mock__img {
position: relative;
height: 160px;
background: linear-gradient(135deg, #1E3A8A 0%, #4C1D95 50%, #E8415A 100%);
overflow: hidden;
}
.bm-event-mock__img::before {
content: '';
position: absolute;
inset: 0;
background:
radial-gradient(circle at 20% 30%, rgba(255, 215, 0, 0.3), transparent 40%),
radial-gradient(circle at 80% 70%, rgba(232, 65, 90, 0.4), transparent 50%);
}
.bm-event-mock__date {
position: absolute;
top: 16px;
right: 16px;
background: #FFFFFF;
padding: 8px 12px;
border-radius: 10px;
display: flex;
flex-direction: column;
align-items: center;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}
.bm-event-mock__date strong {
font-size: 22px;
font-weight: 800;
color: var(--bm-dark);
letter-spacing: -0.02em;
line-height: 1;
}
.bm-event-mock__date span {
font-size: 10px;
font-weight: 700;
text-transform: uppercase;
color: var(--bm-primary);
letter-spacing: 0.1em;
margin-top: 2px;
}
.bm-event-mock__body { padding: 16px 20px 20px; }
.bm-event-mock__title {
font-size: 20px;
font-weight: 700;
color: var(--bm-dark);
letter-spacing: -0.01em;
margin-bottom: 8px;
}
.bm-event-mock__meta {
display: flex;
gap: 16px;
font-size: 13px;
color: var(--bm-text-muted);
margin-bottom: 14px;
}
.bm-event-mock__meta i { margin-right: 4px; color: var(--bm-primary); }
.bm-event-mock__avatars { display: flex; align-items: center; margin-bottom: 14px; }
.bm-event-mock__avatar {
width: 28px;
height: 28px;
border-radius: 50%;
color: #FFFFFF;
display: flex;
align-items: center;
justify-content: center;
font-size: 11px;
font-weight: 700;
border: 2px solid #FFFFFF;
margin-left: -8px;
}
.bm-event-mock__avatar:first-child { margin-left: 0; }
.bm-event-mock__count {
margin-left: 12px;
font-size: 13px;
color: var(--bm-text-muted);
font-weight: 500;
}
.bm-event-mock__cta {
width: 100%;
padding: 12px;
background: var(--bm-primary);
color: #FFFFFF;
border: none;
border-radius: 10px;
font-weight: 700;
font-size: 14px;
font-family: inherit;
cursor: default;
}
/* ---- Forum mock (panel 3) ---- */
.bm-forum-mock {
width: 100%;
max-width: 380px;
background: #FFFFFF;
border: 1px solid rgba(26, 26, 46, 0.08);
border-radius: 20px;
overflow: hidden;
box-shadow: 0 8px 32px rgba(232, 65, 90, 0.08);
}
.bm-forum-mock__row {
display: flex;
align-items: center;
gap: 12px;
padding: 14px 18px;
border-bottom: 1px solid rgba(0, 0, 0, 0.06);
transition: background 0.2s ease;
}
.bm-forum-mock__row:last-child { border-bottom: none; }
.bm-forum-mock__row:hover { background: rgba(232, 65, 90, 0.04); }
.bm-forum-mock__icon {
width: 42px;
height: 42px;
border-radius: 10px;
display: flex;
align-items: center;
justify-content: center;
font-size: 22px;
flex-shrink: 0;
}
.bm-forum-mock__body { flex: 1; min-width: 0; }
.bm-forum-mock__title {
font-size: 14px;
font-weight: 700;
color: var(--bm-dark);
letter-spacing: -0.01em;
}
.bm-forum-mock__count {
font-size: 12px;
color: var(--bm-text-muted);
margin-top: 2px;
}
.bm-forum-mock__chev {
color: var(--bm-text-subtle);
font-size: 16px;
}
/* Mobile (mega-fix 2026-05-05): yatay swipe carousel (Build a life pattern).
Sticky devre dışı, 3 panel yan yana scroll-snap. JS mobile'da pasif
(initCommunityScroll early-return), kullanıcı parmakla swipe eder.
Dots STATIK indikatör — kullanıcı 3 panel olduğunu görür. */
@media (max-width: 768px) {
.bm-home-community {
min-height: 0;
padding: clamp(3rem, 8vw, 5rem) 0;
}
.bm-home-community__sticky {
position: static;
height: auto;
display: block;
overflow: visible;
padding: 0;
gap: 0;
}
.bm-home-community__head {
padding-bottom: 32px;
}
.bm-home-community__stage {
display: block;
width: auto;
}
/* Panels — horizontal scroll-snap carousel */
.bm-home-community__panels {
position: static;
display: flex !important;
flex-direction: row !important;
overflow-x: auto;
overflow-y: hidden;
scroll-snap-type: x mandatory;
scroll-behavior: smooth;
gap: 16px;
padding: 16px 0;
margin: 0 -16px;
min-height: 0;
scrollbar-width: none;
-ms-overflow-style: none;
}
.bm-home-community__panels::-webkit-scrollbar { display: none; }
/* Each panel — scroll-snap target (default-scope opacity:0/transform/absolute
reset already covered by the static + opacity:1 + transform:none below). */
.bm-home-community__panel {
position: static;
opacity: 1;
transform: none;
pointer-events: auto;
flex: 0 0 85vw !important;
scroll-snap-align: center;
grid-template-columns: 1fr;
gap: 1rem;
}
/* First/last gutters — 7.5vw side margins so the first/last panel can
center under viewport when snapped. (100vw - 85vw) / 2 = 7.5vw. */
.bm-home-community__panel:first-child { margin-left: 7.5vw !important; }
.bm-home-community__panel:last-child { margin-right: 7.5vw !important; }
/* Visual mocks — clip to panel width (default scope sets fixed widths). */
.bm-chat-mock,
.bm-event-mock,
.bm-forum-mock {
width: 100% !important;
max-width: 100% !important;
}
.bm-home-community__visual { width: 100%; }
/* Sub-title compact — clamp() default goes ~38px on narrow viewports,
too dominant inside a 85vw card. */
.bm-home-community__sub {
font-size: 1.5rem;
line-height: 1.2;
}
.bm-home-community__text {
font-size: 0.9375rem;
line-height: 1.5;
}
/* Dots — static visual indicator (JS doesn't toggle .is-active on mobile).
Default scope already styles dot 8×8 / active 24×8 — kept. */
.bm-home-community__dots {
display: flex !important;
justify-content: center;
gap: 8px;
margin-top: 16px;
}
}
/* =========================================
7. TICKET — "Your ticket. Your seat." Boarding Pass Cinema
=========================================
3 vintage-paper tickets in a row (Concert / Football / Theatre):
square photo on top, perforation strip with notches + dashed line,
event details below. Cards slightly tilted (-2°/+1°/+3°), middle
one shifted up 12px for hierarchy. Hover (desktop) lifts and flattens.
========================================= */
.bm-home-ticket {
/* sticky-restore (2026-05-05): pin hold zone GERİ (Çözüm 2 hibrit).
Önceki mega-fix Çözüm 1 sticky'yi tamamen iptal etmişti — yanlış
karar. Asıl sebep overflow:hidden + height bound idi. Şimdi sticky
korunur, sadece overflow:visible + padding daraltma. */
min-height: calc(100vh + 400px);
position: relative;
text-align: center;
background:
radial-gradient(ellipse at top, #26161d 0%, #1f1218 60%, #15090e 100%);
overflow: visible;
}
/* Decorative red radial accents (top-left + bottom-right) */
.bm-home-ticket::before {
content: '';
position: absolute;
inset: 0;
background:
radial-gradient(ellipse 40% 30% at 20% 30%, rgba(220, 38, 60, 0.06) 0%, transparent 60%),
radial-gradient(ellipse 35% 25% at 80% 70%, rgba(220, 38, 60, 0.04) 0%, transparent 60%);
pointer-events: none;
z-index: 0;
}
/* Diagonal scan line texture (subtle paper feel) */
.bm-home-ticket::after {
content: '';
position: absolute;
inset: 0;
background-image: repeating-linear-gradient(
45deg,
transparent 0,
transparent 1px,
rgba(255, 255, 255, 0.04) 1px,
rgba(255, 255, 255, 0.04) 2px
);
pointer-events: none;
z-index: 0;
}
.bm-home-ticket__sticky {
/* sticky-restore (2026-05-05): position:sticky GERİ + overflow:visible
+ padding daraltma (80/100 → 40/60, -80px tasarruf). Eski overflow:
hidden kesimini overflow:visible ile aç + padding küçült → ticket
alt yarı görünür, sticky pin behavior korunur. */
position: sticky;
top: var(--bm-header-height);
height: var(--bm-section-height);
display: flex;
flex-direction: column;
justify-content: flex-start;
align-items: center;
padding: 24px 24px 60px;
box-sizing: border-box;
overflow: visible;
}
.bm-home-ticket__sticky > .bm-container {
position: relative;
z-index: 1;
width: 100%;
}
/* Eyebrow pill */
/* ticket-polish (2026-05-05): eyebrow pill gizlendi (Sezgin onayı).
Visual rule'lar dead-code, korumak için block sadece display:none. */
.bm-ticket-eyebrow { display: none; }
.bm-ticket-eyebrow__dot {
width: 6px;
height: 6px;
background: #ff5970;
border-radius: 50%;
animation: bm-ticket-pulse 1.6s ease-in-out infinite;
}
@keyframes bm-ticket-pulse {
0%, 100% { opacity: 1; transform: scale(1); }
50% { opacity: 0.4; transform: scale(0.8); }
}
/* Title — gradient-italic accent on second half */
.bm-home-ticket .bm-home__title {
font-size: 56px;
font-weight: 700;
color: #fff;
letter-spacing: -0.03em;
line-height: 1.05;
text-align: center;
margin: 0 0 14px;
}
.bm-ticket-title-accent {
font-style: italic;
font-weight: 400;
background: linear-gradient(135deg, #ff5970 0%, #ff8a5c 100%);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
}
.bm-ticket-subtitle {
text-align: center;
font-size: 16px;
color: rgba(255, 255, 255, 0.55);
max-width: 480px;
margin: 0 auto 64px;
}
/* Grid — 3 columns desktop, single column mobile */
.bm-ticket-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 24px;
max-width: 810px;
margin: 0 auto;
}
/* Ticket — outer reset; rotation + middle-lift on .bm-ticket__inner */
.bm-ticket {
position: relative;
cursor: pointer;
transition: transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
transform-origin: bottom center;
}
.bm-ticket--2 { margin-top: -12px; }
.bm-ticket__inner {
background: linear-gradient(135deg, #f4ead5 0%, #e8d9b8 100%);
border-radius: 8px;
overflow: hidden;
box-shadow:
0 25px 50px rgba(0, 0, 0, 0.5),
0 0 0 1px rgba(255, 255, 255, 0.18);
position: relative;
transition: transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.bm-ticket--1 .bm-ticket__inner { transform: rotate(-2deg); }
.bm-ticket--2 .bm-ticket__inner {
transform: rotate(1deg);
box-shadow:
0 30px 60px rgba(0, 0, 0, 0.55),
0 0 0 1px rgba(255, 255, 255, 0.18);
}
.bm-ticket--3 .bm-ticket__inner { transform: rotate(3deg); }
.bm-ticket__paper-grain {
position: absolute;
inset: 0;
opacity: 0.15;
background-image: repeating-linear-gradient(
0deg,
transparent 0,
transparent 2px,
rgba(101, 68, 35, 0.4) 2px,
rgba(101, 68, 35, 0.4) 3px
);
pointer-events: none;
z-index: 5;
}
.bm-ticket__image-wrap {
aspect-ratio: 1 / 1;
position: relative;
overflow: hidden;
background: #2a1810;
}
.bm-ticket__image-placeholder {
position: absolute;
inset: 0;
background: linear-gradient(135deg, #5a4250 0%, #4a3340 100%);
transition: opacity 0.4s ease;
display: flex;
align-items: center;
justify-content: center;
}
.bm-ticket__image {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
transition: opacity 0.4s ease;
}
.bm-ticket__kind-badge {
position: absolute;
top: 14px;
left: 14px;
padding: 5px 9px;
background: rgba(0, 0, 0, 0.55);
-webkit-backdrop-filter: blur(8px);
backdrop-filter: blur(8px);
border: 1px solid rgba(255, 255, 255, 0.15);
border-radius: 4px;
font-family: 'Courier New', monospace;
font-size: 9px;
font-weight: 600;
letter-spacing: 0.12em;
color: #fff;
text-transform: uppercase;
z-index: 4;
}
/* ============ Polaroid (selfie overlay) ============ */
.bm-ticket__polaroid {
position: absolute;
bottom: 14px;
right: 12px;
z-index: 6; /* was 4 — now above .bm-ticket__paper-grain (z-index: 5) so polaroid stays clean */
background: white;
padding: 4px 4px 12px;
transform: rotate(var(--polaroid-rotation, 0deg));
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
border-radius: 2px;
transition: transform 0.4s ease;
}
.bm-ticket__polaroid img {
display: block;
width: 80px;
height: 80px;
object-fit: cover;
}
@media (max-width: 768px) {
.bm-ticket__polaroid {
bottom: 10px;
right: 8px;
padding: 5px 5px 14px;
/* Sürekli rüzgar sallanması — her polaroid'in kendi rotation'ının
üzerine ±2° amplitude. 3 polaroid stagger için negative delays. */
animation: polaroid-sway 4s ease-in-out infinite;
transform-origin: top center;
}
.bm-ticket--1 .bm-ticket__polaroid { animation-delay: 0s; }
.bm-ticket--2 .bm-ticket__polaroid { animation-delay: -1.3s; }
.bm-ticket--3 .bm-ticket__polaroid { animation-delay: -2.6s; }
.bm-ticket__polaroid img {
width: 100px;
height: 100px;
}
}
@media (hover: hover) and (pointer: fine) {
.bm-ticket:hover .bm-ticket__polaroid {
transform: rotate(0deg) scale(1.05);
}
}
/* Polaroid keyframes (top-level — mobile uses sway, tap-bounce on .is-tapped) */
@keyframes polaroid-sway {
0%, 100% {
transform: rotate(var(--polaroid-rotation, 0deg));
}
50% {
transform: rotate(calc(var(--polaroid-rotation, 0deg) + 2deg));
}
}
@keyframes polaroid-tap-bounce {
0% {
transform: rotate(var(--polaroid-rotation, 0deg)) scale(1);
}
20% {
transform: rotate(0deg) scale(1.5);
}
80% {
transform: rotate(0deg) scale(1.5);
}
100% {
transform: rotate(var(--polaroid-rotation, 0deg)) scale(1);
}
}
/* Tap state (JS adds .is-tapped on click). Overrides sway animation
for 2.4s, then JS removes the class and sway resumes. */
.bm-ticket__polaroid.is-tapped {
animation: polaroid-tap-bounce 2.4s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
z-index: 10;
}
/* Reduced-motion respect — kill all polaroid animations for users
who prefer reduced motion (iOS Settings → Accessibility → Motion). */
@media (prefers-reduced-motion: reduce) {
.bm-ticket__polaroid,
.bm-ticket__polaroid.is-tapped {
animation: none !important;
}
}
/* Perforation — notches at edges + dashed line crossing */
.bm-ticket__perforation {
position: relative;
height: 24px;
background: transparent;
}
.bm-ticket__notch {
position: absolute;
top: 2px;
width: 20px;
height: 20px;
background: radial-gradient(ellipse at top, #1a0e12 0%, #0a0606 60%);
border-radius: 50%;
z-index: 6;
}
.bm-ticket__notch--left { left: -10px; }
.bm-ticket__notch--right { right: -10px; }
.bm-ticket__dashed-line {
position: absolute;
top: 11px;
left: 14px;
right: 14px;
border-top: 2px dashed #c9b58e;
z-index: 6;
}
/* Info section — admit/serial, title, venue, details */
.bm-ticket__info {
padding: 12px 18px 18px;
}
.bm-ticket__meta-row {
display: flex;
justify-content: space-between;
align-items: flex-start;
margin-bottom: 10px;
}
.bm-ticket__admit,
.bm-ticket__serial {
font-family: 'Courier New', monospace;
font-size: 9px;
letter-spacing: 0.2em;
color: #4a3318;
}
.bm-ticket__serial { text-align: right; }
.bm-ticket__title {
font-family: Georgia, serif;
font-size: 15px;
font-weight: 700;
color: #2a1810;
margin: 0 0 3px;
letter-spacing: -0.005em;
line-height: 1.2;
}
.bm-ticket__venue {
font-family: 'Courier New', monospace;
font-size: 10px;
font-weight: 600;
color: #3d2a14;
letter-spacing: 0.05em;
margin-bottom: 14px;
}
.bm-ticket__details {
display: flex;
justify-content: space-between;
margin: 0;
font-family: 'Courier New', monospace;
font-size: 10px;
color: #6b4f2a;
}
.bm-ticket__details > div {
display: flex;
flex-direction: column;
}
.bm-ticket__details dt {
opacity: 1;
font-weight: 400;
color: #3d2a14;
}
.bm-ticket__details dd {
color: #2a1810;
font-weight: 700;
margin: 2px 0 0;
}
/* Hover — desktop pointer:fine devices only */
@media (hover: hover) and (pointer: fine) {
.bm-ticket:hover {
transform: translateY(-12px) scale(1.02);
z-index: 10;
}
.bm-ticket--1:hover .bm-ticket__inner { transform: rotate(-1deg); }
.bm-ticket--2:hover .bm-ticket__inner { transform: rotate(0deg); }
.bm-ticket--3:hover .bm-ticket__inner { transform: rotate(1.5deg); }
}
/* Tablet — keep 3-up but tighter */
@media (max-width: 1023px) and (min-width: 768px) {
.bm-home-ticket .bm-home__title { font-size: 44px; }
.bm-ticket-grid { gap: 18px; max-width: 760px; }
}
/* Mobile — single column, flat tickets, no middle lift */
@media (max-width: 767px) {
.bm-home-ticket__sticky { padding: 56px 16px 72px; }
.bm-home-ticket .bm-home__title { font-size: 32px; }
.bm-ticket-subtitle { margin-bottom: 48px; }
.bm-ticket-grid {
grid-template-columns: 1fr;
max-width: 360px;
gap: 32px;
}
.bm-ticket--1 .bm-ticket__inner,
.bm-ticket--2 .bm-ticket__inner,
.bm-ticket--3 .bm-ticket__inner { transform: rotate(0); }
.bm-ticket--2 { margin-top: 0; }
/* mega-fix (2026-05-05): readability — font scale +20-22% + AA contrast.
Default scope values are tuned for desktop reading distance; mobile
needs both larger size and darker tones. dd values already #2a1810
(AAA), only dt + venue + admit/serial need contrast lift. */
.bm-ticket__admit,
.bm-ticket__serial {
font-size: 11px; /* 9 → 11 (+22%) */
color: #6b4f2a; /* taupe #8b6f3a → koyu (kontrast 3.6 → 5.8, AA pass) */
}
.bm-ticket__title { font-size: 18px; } /* 15 → 18 (+20%) */
.bm-ticket__venue {
font-size: 12px; /* 10 → 12 (+20%) */
color: #5b4222; /* daha koyu kahve */
}
.bm-ticket__details { font-size: 12px; } /* 10 → 12 (+20%) */
.bm-ticket__details dt {
opacity: 1; /* 0.6 → 1 (kontrast tam) */
color: #5b4222; /* effective ~#8e7a5c → #5b4222, AA pass */
}
/* dd (DATE values) already #2a1810 / weight 700 → AAA, dokunulmaz */
}
/* Reduced motion — kill all animations and transitions */
@media (prefers-reduced-motion: reduce) {
.bm-ticket,
.bm-ticket__inner,
.bm-ticket__image,
.bm-ticket__image-placeholder { transition: none !important; }
.bm-ticket-eyebrow__dot { animation: none !important; }
}
/* iOS Safari URL bar düzeltmesi — dvh varsa tüm sticky stage'ler
header çıkarılmış dvh kullanır. Eski tarayıcılar vh fallback'inde kalır.
v4: 7 statik bölüm + community = 8 sticky (screens silindi 2026-05-05). */
@supports (height: 100dvh) {
.bm-home-character__sticky,
.bm-home-world__sticky,
.bm-home-ai__sticky,
.bm-home-economy__sticky,
.bm-home-ticket__sticky,
.bm-home-cta__sticky,
.bm-home-faq__sticky,
.bm-home-community__sticky {
height: var(--bm-section-height-dvh);
}
}
@supports (height: 100dvh) {
/* All static sections (except hero) have sticky-pin hold zone.
Hero handles its own 100dvh enforcement in the v4 block at line ~318. */
.bm-home-character,
.bm-home-world,
.bm-home-ai,
.bm-home-economy,
.bm-home-ticket,
.bm-home-cta,
.bm-home-faq {
min-height: calc(100dvh + 400px);
}
}
/* =========================================
9. FAQ — smooth open + close (both directions)
========================================= */
.bm-home-faq {
background: var(--bm-home-bg-faq);
/* Sticky-pin hold zone — see .bm-home-character */
min-height: calc(100vh + 400px);
position: relative;
overflow: visible;
}
.bm-home-faq__sticky {
position: sticky;
top: var(--bm-header-height);
height: var(--bm-section-height);
display: flex;
flex-direction: column;
justify-content: flex-start;
align-items: center;
padding: 12px 24px 32px;
box-sizing: border-box;
overflow: hidden;
width: 100%;
}
.bm-home-faq__grid {
display: grid;
grid-template-columns: 1fr;
gap: 0.75rem 2rem;
max-width: 1100px;
margin: 2rem auto 0;
align-items: start;
}
@media (min-width: 900px) {
.bm-home-faq__grid { grid-template-columns: 1fr 1fr; }
}
.bm-home-faq__item {
background: #FFFFFF;
border: 1px solid var(--bm-border);
border-radius: 12px;
margin-bottom: 0.75rem;
overflow: hidden;
transition: border-color 0.3s ease, box-shadow 0.3s ease;
}
.bm-home-faq__item:hover { border-color: rgba(232,65,90,0.3); }
.bm-home-faq__item[aria-expanded="true"] {
border-color: var(--bm-primary);
box-shadow: 0 8px 24px rgba(232,65,90,0.1);
}
.bm-home-faq__q {
width: 100%;
display: flex;
justify-content: space-between;
align-items: center;
gap: 1rem;
padding: 1rem 1.25rem;
background: none;
border: none;
cursor: pointer;
text-align: left;
font-family: inherit;
font-size: 0.9375rem;
font-weight: 600;
color: var(--bm-dark);
}
/* Plus icon (rotates to X on open) */
.bm-home-faq__icon {
position: relative;
width: 20px;
height: 20px;
flex-shrink: 0;
transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}
.bm-home-faq__icon::before,
.bm-home-faq__icon::after {
content: '';
position: absolute;
top: 50%;
left: 50%;
width: 14px;
height: 2px;
background: var(--bm-primary);
border-radius: 2px;
transform: translate(-50%, -50%);
}
.bm-home-faq__icon::after { transform: translate(-50%, -50%) rotate(90deg); }
.bm-home-faq__item[aria-expanded="true"] .bm-home-faq__icon {
transform: rotate(45deg);
}
/* Answer panel — smooth open+close via grid-template-rows 0fr→1fr.
Old approach used `max-height: 0 → 500px` which animated to a fixed
target regardless of actual content size — browsers couldn't
interpolate the unknown end-height smoothly, causing the choppy
"5 fps" feel. grid-template-rows interpolates between fr units,
which the engine handles natively at 60fps. The inner needs
`min-height: 0` to allow the grid track to collapse below content. */
.bm-home-faq__answer {
display: grid;
grid-template-rows: 0fr;
transition: grid-template-rows 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}
.bm-home-faq__answer > p {
overflow: hidden;
min-height: 0;
margin: 0;
padding: 0 1.25rem;
color: var(--bm-text-muted);
font-size: 0.9375rem;
line-height: 1.65;
transition: padding 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}
.bm-home-faq__item[aria-expanded="true"] .bm-home-faq__answer {
grid-template-rows: 1fr;
}
.bm-home-faq__item[aria-expanded="true"] .bm-home-faq__answer > p {
padding: 0 1.25rem 1.25rem;
}
/* =========================================
10. CTA
========================================= */
.bm-home-cta {
color: #FFFFFF;
text-align: center;
/* Sticky-pin hold zone — see .bm-home-character for pattern */
min-height: calc(100vh + 400px);
position: relative;
background: var(--bm-home-bg-cta);
overflow: visible;
}
.bm-home-cta__sticky {
position: sticky;
top: var(--bm-header-height);
height: var(--bm-section-height);
display: flex;
flex-direction: column;
justify-content: flex-start;
align-items: center;
padding: 12px 24px 32px;
box-sizing: border-box;
overflow: hidden;
}
.bm-home-cta__bg {
position: absolute;
inset: 0;
pointer-events: none;
overflow: hidden;
}
.bm-home-cta__star {
position: absolute;
width: 2px;
height: 2px;
background: #FFFFFF;
border-radius: 50%;
opacity: 0.6;
}
.bm-home-cta__star:nth-child(1) { top: 10%; left: 15%; animation: bm-star-twinkle 3s infinite; }
.bm-home-cta__star:nth-child(2) { top: 20%; left: 70%; animation: bm-star-twinkle 4s infinite 0.5s; }
.bm-home-cta__star:nth-child(3) { top: 35%; left: 30%; animation: bm-star-twinkle 3.5s infinite 1s; }
.bm-home-cta__star:nth-child(4) { top: 50%; left: 85%; animation: bm-star-twinkle 4.5s infinite 1.5s; }
.bm-home-cta__star:nth-child(5) { top: 65%; left: 10%; animation: bm-star-twinkle 3s infinite 0.2s; }
.bm-home-cta__star:nth-child(6) { top: 75%; left: 60%; animation: bm-star-twinkle 5s infinite 0.8s; }
.bm-home-cta__star:nth-child(7) { top: 85%; left: 40%; animation: bm-star-twinkle 3.5s infinite 2s; }
.bm-home-cta__star:nth-child(8) { top: 15%; left: 45%; width: 3px; height: 3px; animation: bm-star-twinkle 4s infinite 0.3s; }
.bm-home-cta__star:nth-child(9) { top: 45%; left: 55%; width: 3px; height: 3px; animation: bm-star-twinkle 3.8s infinite 1.2s; }
.bm-home-cta__star:nth-child(10) { top: 55%; left: 25%; animation: bm-star-twinkle 4.2s infinite 0.6s; }
.bm-home-cta__star:nth-child(11) { top: 25%; left: 80%; width: 3px; height: 3px; animation: bm-star-twinkle 3.3s infinite 1.8s; }
.bm-home-cta__star:nth-child(12) { top: 80%; left: 75%; animation: bm-star-twinkle 4.8s infinite 0.4s; }
@keyframes bm-star-twinkle {
0%, 100% { opacity: 0.2; transform: scale(1); }
50% { opacity: 1; transform: scale(1.8); box-shadow: 0 0 8px rgba(255,255,255,0.8); }
}
.bm-home-cta__inner { position: relative; z-index: 1; max-width: 900px; }
/* CTA title sizing 2026-05-13 (Sprint B3): font shrunk, white-space:nowrap removed,
text-wrap:balance added so longer copies ("We'll knock when the door opens.")
wrap to two lines centered without horizontal overflow. */
.bm-home-cta__title { font-size: clamp(2rem, 5vw, 3.5rem); margin: 0 auto 1rem; max-width: 900px; line-height: 1.15; text-wrap: balance; }
.bm-home-cta__subtitle { font-size: 1.25rem; color: rgba(255,255,255,0.7); margin: 0 0 2.5rem; }
.bm-home-cta__form {
display: flex;
gap: 0.5rem;
padding: 0.5rem;
background: rgba(255,255,255,0.08);
border: 1px solid rgba(255,255,255,0.15);
border-radius: 999px;
backdrop-filter: blur(16px);
max-width: 480px;
margin: 0 auto 1rem;
position: relative;
}
.bm-home-cta__input {
flex: 1;
padding: 0.875rem 1.25rem;
background: transparent;
border: none;
color: #FFFFFF;
font-size: 1rem;
font-family: inherit;
outline: none;
}
.bm-home-cta__input::placeholder { color: rgba(255,255,255,0.4); }
.bm-home-cta__button {
display: inline-flex;
align-items: center;
gap: 0.4rem;
padding: 0.875rem 1.5rem;
background: var(--bm-primary);
color: #FFFFFF;
border: none;
border-radius: 999px;
font-weight: 700;
font-size: 0.9375rem;
white-space: nowrap;
flex-shrink: 0;
cursor: pointer;
transition: all 0.2s ease;
font-family: inherit;
}
.bm-home-cta__button:hover {
background: var(--bm-primary-hover);
transform: translateY(-2px) scale(1.02);
box-shadow: 0 12px 32px rgba(232,65,90,0.4);
}
.bm-home-cta__button-arrow { transition: transform 0.2s ease; }
@keyframes bm-bell-ring {
0%, 100% { transform: rotate(0); }
20% { transform: rotate(-12deg); }
40% { transform: rotate(12deg); }
60% { transform: rotate(-8deg); }
80% { transform: rotate(8deg); }
}
.bm-home-cta__button:hover .bm-home-cta__button-arrow {
animation: bm-bell-ring 0.5s ease;
}
.bm-home-cta__note { font-size: 0.8125rem; color: rgba(255,255,255,0.5); margin-top: 1rem; }
.bm-home-cta__status {
margin-top: 1rem;
padding: 0.75rem 1.25rem;
background: rgba(255,255,255,0.08);
border-radius: 12px;
font-size: 0.9375rem;
color: rgba(255,255,255,0.9);
}
.bm-home-cta__status--success { background: rgba(16,185,129,0.2); border: 1px solid rgba(16,185,129,0.35); }
.bm-home-cta__status--error { background: rgba(239,68,68,0.2); border: 1px solid rgba(239,68,68,0.35); }
@media (max-width: 600px) {
.bm-home-cta__form { flex-direction: column; border-radius: 20px; }
.bm-home-cta__button { width: 100%; justify-content: center; }
}
/* =========================================
Global responsive tweaks
========================================= */
@media (max-width: 768px) {
.bm-home { padding-block: 3rem; }
.bm-home-hero { min-height: auto; max-height: none; padding: 0 16px 60px; }
/* Hero-only sticky padding override — diğer 7 sticky bölüm (character/world/ai/
economy/ticket/cta/faq) home.css:2747'deki ortak rule'a (clamp(3rem, 8vw, 5rem))
dokunulmaz. !important gerek çünkü ortak rule sonra geliyor (1023px @media,
line ~2747) ve specificity eşit. */
.bm-home-hero__sticky {
padding: 24px clamp(1rem, 4vw, 1.5rem) clamp(3rem, 8vw, 5rem) !important;
}
.bm-home-hero__visual { min-height: 480px; }
.bm-home-hero__phone-wrap { max-width: 240px; }
.bm-home-hero__backlight { width: 280px; height: 460px; filter: blur(30px); }
.bm-home-hero__badge { padding: 8px 12px; gap: 8px; }
.bm-home-hero__badge-icon { width: 24px; height: 24px; font-size: 12px; }
.bm-home-hero__badge-text { font-size: 12px; }
.bm-home-hero__badge-label { font-size: 10px; }
.bm-home-hero__badge--xp { right: -5%; top: 5%; }
.bm-home-hero__badge--achievement { left: -8%; top: 50%; }
.bm-home-hero__badge--role { right: -8%; bottom: 10%; }
.bm-home-ai__portrait-wrap { width: 160px; height: 160px; }
.bm-home-world__pin { width: 5px; height: 5px; }
}
/* =========================================
Mobile snap-section heights — v3 sticky disable (2026-04-30)
=========================================
Desktop'ta tüm statik bölümlerin sticky inner pattern var
(.bm-home-X__sticky). Mobile'da içerik dikey stack edildiği için
100vh-72 sığdırma mümkün değil (Economy 3 phone alt alta ~1500px,
Hero copy + phone alt alta ~1000px, vb.).
Mobile çözüm: sticky'leri statik (position:static) yap, height:auto,
overflow:visible — natural flow. Snap-align outer'da kalır, snap
noktası bölüm üstüne hizalanır, içerik aşağı doğru akar.
Community/Screens için sticky zaten mobile'da kapalı (kendi rule'ları). */
@media (max-width: 1023px) {
.bm-home-hero,
.bm-home-character,
.bm-home-world,
.bm-home-ai,
.bm-home-economy,
.bm-home-ticket,
.bm-home-cta {
min-height: auto;
}
.bm-home-hero__sticky,
.bm-home-character__sticky,
.bm-home-world__sticky,
.bm-home-ai__sticky,
.bm-home-economy__sticky,
.bm-home-ticket__sticky,
.bm-home-cta__sticky,
.bm-home-faq__sticky {
position: static;
height: auto;
padding: clamp(3rem, 8vw, 5rem) clamp(1rem, 4vw, 1.5rem);
overflow: visible;
}
}
/* Hero phone mobile büyütme (2026-05-06) — +%10, sadece ≤767px */
@media (max-width: 767px) {
.bm-home-hero__phone-wrap { max-width: 264px; }
.bm-home-hero__backlight { display: none; }
.bm-home-hero__bg { display: none; }
}
/* Landscape mobile (2026-05-06) — phone landscape için özel layout.
Modern iPhone (844×390) ve eski (568×320) hepsi tetiklenir; tablet (h>500)
etkilenmez. Hero fixed-height kaldırılır + scroll'a izin, phone küçültme,
AI transformation yatay row. Portrait orientation etkilenmez. */
@media (orientation: landscape) and (max-height: 500px) {
/* BUG 1+2 — Hero viewport h küçük: fixed height yok, scroll allow */
.bm-home-hero {
min-height: auto;
max-height: none;
overflow: visible;
}
.bm-home-hero__sticky {
padding-block: 24px;
}
.bm-home-hero__visual {
min-height: auto;
}
.bm-home-hero__phone-wrap {
max-width: 200px;
}
/* BUG 3 — AI transformation landscape'te yatay row, küçük portrait */
.bm-home-ai__stage {
flex-direction: row;
gap: 16px;
align-items: center;
justify-content: center;
}
.bm-home-ai__portrait {
width: 140px;
height: 140px;
margin-bottom: 0;
}
.bm-home-ai__beam {
transform: rotate(0deg);
width: 48px;
height: 48px;
}
}
/* Polaroid tap overflow fix (2026-05-06)
.is-tapped JS tarafından polaroid + parent .bm-ticket'a eklenir.
Tap sırasında 1.5x büyüyen polaroid'in inner/image-wrap overflow:hidden
tarafından kesilmemesi için parent overflow'larını visible yap + ticket'i
kardeşleri üstüne çıkar. */
.bm-ticket.is-tapped {
z-index: 100;
}
.bm-ticket.is-tapped .bm-ticket__inner,
.bm-ticket.is-tapped .bm-ticket__image-wrap {
overflow: visible;
}
/* Build a life phones — desktop position fine-tune (2026-05-06)
Head wrapper sonrası stage başlangıcı aşağı kaymıştı; phone'lar drop-shadow
ile alt kesim yapıyordu. Phone center'ı yukarı kaydır → alt drop-shadow
stage altına taşmaz. */
@media (min-width: 1024px) {
.bm-life-phone { top: 44%; }
}
/* Hero bell hover ring animation (2026-05-06) — CTA ile aynı keyframe */
.bm-home-hero__link .ph-bell { transition: transform 0.2s ease; }
.bm-home-hero__link:hover .ph-bell { animation: bm-bell-ring 0.5s ease; }
/* Calibration debug — country label anchor cross (2026-05-06)
CALIBRATION_MODE = true iken her country label anchor pozisyonunda cyan +
işareti gösterir. Sezgin label kayık olanları görsel tespit eder. Aşama B'de
CALIBRATION_MODE kapanınca JS taraf debug marker üretmez, CSS ölü kod kalır
(gelecek calibration sprintleri için). */
.bm-country-label-debug {
pointer-events: none;
}
.bm-country-label-debug__cross {
display: inline-block;
width: 16px;
height: 16px;
line-height: 14px;
text-align: center;
font-family: 'Courier New', monospace;
font-size: 18px;
font-weight: 700;
color: #00ffff;
text-shadow: 0 0 3px #000, 0 0 6px #000;
user-select: none;
}
/* Calibration debug — viewport center crosshair (2026-05-06)
CALIBRATION_MODE = true iken JS container'a .bm-cal-mode class ekler.
::after pseudo-element map'in görsel ortasında sabit + işareti gösterir
(pan/zoom container'a relative — pseudo-element sabit kalır). Sezgin
ülkeyi map ortasına alıp label position'ı crosshair'a oturtur. */
#bm-world-map.bm-cal-mode::after {
content: '+';
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
font-family: 'Courier New', monospace;
font-size: 32px;
font-weight: 700;
line-height: 1;
color: #00ffff;
text-shadow: 0 0 3px #000, 0 0 6px #000;
pointer-events: none;
z-index: 1000;
user-select: none;
}
/* Country hover tooltip (2026-05-06) — zoom-out (world view) only.
Zoom-in'de JS taraf closeTooltip ile gizlenir (city pinleri görünür). */
.leaflet-tooltip.bm-country-hover-tooltip {
background: rgba(15, 8, 14, 0.95);
color: #ffffff;
border: 1px solid rgba(255, 255, 255, 0.15);
border-radius: 4px;
padding: 4px 10px;
font-family: 'Inter', sans-serif;
font-size: 12px;
font-weight: 600;
letter-spacing: 0.04em;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
text-transform: uppercase;
}
.leaflet-tooltip.bm-country-hover-tooltip::before {
display: none;
}
/* Custom zoom controls (2026-05-06) — right-center sticky map override.
Replaces Leaflet default (zoomControl: false). Phosphor plus/minus icons,
BeMatrx accent on hover, disabled state at min/max zoom. */
.bm-world-zoom-controls {
position: absolute;
right: 16px;
top: 50%;
transform: translateY(-50%);
z-index: 500;
display: flex;
flex-direction: column;
gap: 8px;
pointer-events: none;
}
.bm-world-zoom-btn {
pointer-events: auto;
width: 40px;
height: 40px;
border-radius: 8px;
background: rgba(15, 8, 14, 0.85);
color: #ffffff;
border: 1px solid rgba(255, 255, 255, 0.15);
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
font-size: 18px;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
transition: background 0.2s ease, transform 0.2s ease;
font-family: inherit;
padding: 0;
}
.bm-world-zoom-btn:hover {
background: #FF5C75;
transform: scale(1.05);
}
.bm-world-zoom-btn:active {
transform: scale(0.95);
}
.bm-world-zoom-btn:disabled {
opacity: 0.35;
cursor: not-allowed;
}
.bm-world-zoom-btn:disabled:hover {
background: rgba(15, 8, 14, 0.85);
transform: none;
}
@media (max-width: 767px) {
.bm-world-zoom-controls { right: 12px; }
.bm-world-zoom-btn { width: 36px; height: 36px; font-size: 16px; }
}
/* GPU layer promotion for continuously animated elements
(polaroid sway + tap-bounce; hero phone parallax timeline) */
.bm-ticket__polaroid { will-change: transform; }
.bm-home-hero__phone-wrap { will-change: transform; }
/* =========================================
RTL — Mobile RTL fixes (Arapça, 2026-05-14)
- Career kartları: icon + name center force (RTL'de start sağa kayar)
- Community 3-panel yatay scroll-snap: first/last gutter mirror
- "Build a life" mobile carousel: first/last gutter mirror
========================================= */
[dir="rtl"] .bm-career-card { text-align: center; }
@media (max-width: 768px) {
/* Community panels — first/last side gutter swap for RTL flex flow */
[dir="rtl"] .bm-home-community__panel:first-child {
margin-left: 0 !important;
margin-right: 7.5vw !important;
}
[dir="rtl"] .bm-home-community__panel:last-child {
margin-right: 0 !important;
margin-left: 7.5vw !important;
}
/* Life-phone carousel — first/last side gutter swap for RTL flex flow */
[dir="rtl"] .bm-life-phone:first-child {
margin-left: 0 !important;
margin-right: max(0px, calc((100vw - 260px) / 2 - 16px)) !important;
}
[dir="rtl"] .bm-life-phone:last-child {
margin-right: 0 !important;
margin-left: max(0px, calc((100vw - 260px) / 2 - 16px)) !important;
}
}