/* ══════════════════════════════════════════════════════════════════ SKEUMORPHIC THEME — gam.onl-inspired vintage hardware aesthetic ══════════════════════════════════════════════════════════════════ AKTİVASYON: Hiçbir kural bu attribute olmadan uygulanmaz → mevcut synthwave estetik bozulmadan koexist eder. Kapatmak için body'den attribute silinir; rollback 5 sn'lik iş. ASSET'LER: - assets/skeumorphic/bricks.webp (tileable arcade hall bg) - assets/skeumorphic/tv-bezel.svg (vintage CRT, inline'lanır) - assets/skeumorphic/console-.webp (per-system bg) - assets/skeumorphic/controller-.svg (decorative corner) - assets/skeumorphic/marquee.svg (homepage top sign) ARCHITECTURE: - Faz 1: per-system page bg + theme tint (bu dosyada) - Faz 2: homepage cabinet layout (bu dosyada, alt section) - Faz 3: game page TV bezel (bu dosyada, alt section) ══════════════════════════════════════════════════════════════════ */ /* ── Theme variables (per-system override aşağıda) ────────────────── */ [data-theme="skeumorphic"] { --sk-bg-base: #1a1a22; /* dark hardware surface */ --sk-bg-vignette: rgba(0, 0, 0, .55); --sk-panel-bg: linear-gradient(180deg, rgba(20, 18, 32, .96), rgba(8, 6, 18, .98)); --sk-panel-border: rgba(180, 180, 200, .15); --sk-text: #ece8ff; --sk-text-dim: #a8a4c4; --sk-accent: #ff7be8; /* default tint, sistem override eder */ --sk-glow: 0 0 24px rgba(255, 123, 232, .25); --sk-shadow-card: 0 8px 32px rgba(0, 0, 0, .45), inset 0 1px 0 rgba(255, 255, 255, .04); } /* ── Per-system tint (renderSystemPage'in body'ye data-system koyduğunda) ─ */ [data-theme="skeumorphic"][data-system="snes"] { --sk-accent: #c0a4ff; } [data-theme="skeumorphic"][data-system="nes"] { --sk-accent: #ff5959; } [data-theme="skeumorphic"][data-system="n64"] { --sk-accent: #56e899; } [data-theme="skeumorphic"][data-system="gba"] { --sk-accent: #6ab4ff; } [data-theme="skeumorphic"][data-system="genesis"] { --sk-accent: #5298ff; } [data-theme="skeumorphic"][data-system="arcade"] { --sk-accent: #ffb547; } /* ══════════════════════════════════════════════════════════════════ FAZ 1 — PER-SYSTEM THEMED BACKGROUNDS ══════════════════════════════════════════════════════════════════ Her sistem sayfası kendi konsol görselini bg olarak alır + tint overlay + atmospheric vignette. Mevcut layout (system-hero, grid) üstünde durur, dokunulmaz. */ [data-theme="skeumorphic"] body, [data-theme="skeumorphic"].sk-page { background-color: var(--sk-bg-base); } /* Synthwave atmospheric layer'ı kalın opak tabakayla baskıla, sonra console image'ı arkaplan olarak göster */ [data-theme="skeumorphic"] .atmosphere, [data-theme="skeumorphic"] .grid-floor, [data-theme="skeumorphic"] .sun-glow, [data-theme="skeumorphic"] .stars, [data-theme="skeumorphic"] .city-silhouette { opacity: .08 !important; /* görsel olarak yok say, ama DOM'da kalır */ filter: hue-rotate(0deg) saturate(.4) brightness(.5); } /* Per-system bg image — body'nin kendisine ::before pseudo-element. ÖNEMLI: `[attr] body::before` yanlış (body INSIDE body arar). Doğrusu `body[attr]::before` — body'nin kendisi. */ body[data-theme="skeumorphic"][data-system]::before { content: ""; position: fixed; inset: 0; z-index: -1; /* arka katman */ background-color: var(--sk-bg-base); background-position: center center; background-repeat: no-repeat; background-size: cover; opacity: .35; /* read'lik için tone'lu */ pointer-events: none; /* Vignette: content area parlak, kenarlar koyu */ mask-image: radial-gradient(ellipse 100% 80% at center, #000 40%, transparent 100%); -webkit-mask-image: radial-gradient(ellipse 100% 80% at center, #000 40%, transparent 100%); } body[data-theme="skeumorphic"][data-system="snes"]::before { background-image: url(/assets/skeumorphic/console-snes.webp); } body[data-theme="skeumorphic"][data-system="nes"]::before { background-image: url(/assets/skeumorphic/console-nes.webp); } body[data-theme="skeumorphic"][data-system="n64"]::before { background-image: url(/assets/skeumorphic/console-n64.webp); } body[data-theme="skeumorphic"][data-system="gba"]::before { background-image: url(/assets/skeumorphic/console-gba.webp); } body[data-theme="skeumorphic"][data-system="genesis"]::before { background-image: url(/assets/skeumorphic/console-genesis.webp); } body[data-theme="skeumorphic"][data-system="arcade"]::before { background-image: url(/assets/skeumorphic/console-arcade.webp); } /* System hero — skeumorphic panel look */ [data-theme="skeumorphic"] .system-hero { background: var(--sk-panel-bg); border: 1px solid var(--sk-panel-border); border-radius: 10px; padding: 28px 32px 22px; margin: 18px auto 22px; max-width: 920px; box-shadow: var(--sk-shadow-card); position: relative; z-index: 5; } [data-theme="skeumorphic"] .system-hero::after { /* tint glow strip altında */ content: ""; position: absolute; left: 8%; right: 8%; bottom: -2px; height: 2px; background: linear-gradient(90deg, transparent, var(--sk-accent), transparent); box-shadow: 0 0 18px var(--sk-accent); } [data-theme="skeumorphic"] .system-hero-title { color: var(--sk-text); text-shadow: 0 0 18px var(--sk-accent), 0 2px 0 rgba(0, 0, 0, .8); } [data-theme="skeumorphic"] .system-hero-tagline { color: var(--sk-text-dim); } /* System description — corner-accent panel */ [data-theme="skeumorphic"] .system-desc { background: var(--sk-panel-bg); border-left: 3px solid var(--sk-accent); border-right: 3px solid var(--sk-accent); border-radius: 6px; box-shadow: var(--sk-shadow-card); } [data-theme="skeumorphic"] .system-desc-title { color: var(--sk-accent); text-shadow: 0 0 14px var(--sk-accent), 0 1px 0 rgba(0, 0, 0, .8); } [data-theme="skeumorphic"] .games-grid-title { color: var(--sk-accent); text-shadow: 0 0 16px var(--sk-accent), 0 1px 0 rgba(0, 0, 0, .8); } /* Game cards — solid backdrop, accent border */ [data-theme="skeumorphic"] .game-card { background: linear-gradient(180deg, rgba(28, 24, 44, .98), rgba(8, 6, 18, .98)); border: 1px solid var(--sk-panel-border); box-shadow: var(--sk-shadow-card); transition: border-color .2s ease, transform .2s ease, box-shadow .2s ease; } [data-theme="skeumorphic"] .game-card:hover { border-color: var(--sk-accent); transform: translateY(-2px); box-shadow: 0 12px 36px rgba(0, 0, 0, .55), 0 0 22px var(--sk-accent), inset 0 1px 0 rgba(255, 255, 255, .06); } /* Other systems nav — skeumorphic chip look */ [data-theme="skeumorphic"] .other-system-link { background: linear-gradient(180deg, rgba(35, 30, 55, .9), rgba(15, 12, 28, .95)); border: 1px solid var(--sk-panel-border); box-shadow: 0 2px 8px rgba(0, 0, 0, .4), inset 0 1px 0 rgba(255, 255, 255, .06); } [data-theme="skeumorphic"] .other-system-link:hover { border-color: var(--sk-accent); box-shadow: 0 0 14px var(--sk-accent); } /* Footer — daha sönük */ [data-theme="skeumorphic"] .site-footer { background: linear-gradient(180deg, transparent, rgba(0, 0, 0, .6)); } /* ══════════════════════════════════════════════════════════════════ MOBİL — skeumorphic'in dekoratif yüklerini kapat (LCP koruması) ══════════════════════════════════════════════════════════════════ Plan'a göre: <900px'de cabinet/bezel display:none, sadece tint kalır */ @media (max-width: 900px) { body[data-theme="skeumorphic"]::before { opacity: .18; /* daha sönük + daha az distract */ } } /* ══════════════════════════════════════════════════════════════════ FAZ 2 — HOMEPAGE CABINET REDESIGN ══════════════════════════════════════════════════════════════════ Hedef: gam.onl-tarzı arcade cabinet hissi. Mevcut DOM (header, hero, filter-bar, search, game-grid) re-skin edilir; structural değişiklik yok. Mobile'da (<900px) dekoratif chrome devre dışı, vertical stack davranışı korunur. Visual katmanlar (alttan üste): 1. Brick wall fixed pattern (body::after, 100% viewport, repeating) 2. Vignette gradient (radial mask) 3. Marquee header (site-header re-skin) 4. Cabinet "screen panel" (home-hero — CRT bezel + scan-lines) 5. Joystick panel (filter-bar — chunky 3D buttons) 6. CRT input (search-wrap) 7. Library shelf below (game-grid'in üst sınırına accent strip) */ /* ── HOMEPAGE arcade-cabinet kullanım kaldırıldı (2026-05-05 user feedback). Cabinet sadece game page'de görünmeli (gam.onl pattern). Bu eski rule'lar match etmeyecek artık (.arcade-cabinet div kaldırıldı index.html'den) ama defensive olarak duruyor — ileride homepage'de tekrar denersek hazır. */ body[data-theme="skeumorphic"]:not([data-system]) .arcade-cabinet { position: relative; margin: 60px auto 90px; /* alt 90px = legs için yer */ max-width: 760px; /* PORTRAIT — gam.onl gibi kabin formu */ padding: 130px 80px 150px; /* üst marquee + side panel + alt coin */ /* Real wood-grain via SVG noise filter — repeating diagonal pattern */ background: /* Subtle vertical wood grain stripes */ repeating-linear-gradient(90deg, rgba(0, 0, 0, .08) 0px, transparent 1px, transparent 3px, rgba(255, 220, 160, .03) 4px, transparent 5px, transparent 12px), /* Deep wood color base */ linear-gradient(180deg, #3d2818 0%, #2a1a0d 35%, #1f1108 70%, #1a0d05 100%); /* Chunky 14px chrome trim */ border: 14px solid; border-image: linear-gradient(180deg, #b8a880 0%, #6a5028 30%, #3a2818 70%, #1a0e08 100%) 1; border-radius: 22px 22px 8px 8px; /* MASSIVE 3D body depth — multi-layer drop shadows */ box-shadow: /* Cabinet body thickness — stacked dark layers */ 0 4px 0 #0d0703, 0 8px 0 #080502, 0 14px 0 #050301, /* Hard floor shadow */ 0 28px 50px rgba(0, 0, 0, .85), 0 16px 28px rgba(0, 0, 0, .55), /* Chrome top highlight */ inset 0 4px 0 rgba(255, 220, 160, .18), /* Inner cabinet darkness pool */ inset 0 -8px 28px rgba(0, 0, 0, .8), /* Magenta accent halo */ 0 0 64px rgba(255, 43, 214, .25); } /* MARQUEE — top section INSIDE cabinet (90px), backlit, with LOGO */ body[data-theme="skeumorphic"]:not([data-system]) .arcade-cabinet::before { content: "ARCADE BONUS"; position: absolute; top: 0; left: 0; right: 0; height: 90px; /* Backlit gradient with bright center */ background: /* Inner glow center */ radial-gradient(ellipse 50% 80% at center, rgba(255, 255, 255, .35), transparent 70%), /* Pink → cyan diagonal */ linear-gradient(135deg, #ff2bd6 0%, #ff5050 30%, #ffaa00 50%, #00f0ff 75%, #ff2bd6 100%); /* Speaker grille pattern on left + right edges via repeating dots */ border-bottom: 6px solid #1a0e08; /* Big arcade logo text — display center */ display: flex; align-items: center; justify-content: center; font-family: var(--font-pixel, 'Press Start 2P', monospace); font-size: 2rem; font-weight: bold; color: #fff; letter-spacing: .15em; text-shadow: 0 0 8px #fff, 0 0 24px rgba(255, 43, 214, .9), 0 0 48px rgba(0, 240, 255, .7), 0 3px 0 rgba(0, 0, 0, .8), 0 -1px 0 rgba(255, 255, 255, .4); /* Outer glow halo */ box-shadow: inset 0 1px 0 rgba(255, 255, 255, .35), inset 0 -3px 0 rgba(0, 0, 0, .35), inset 0 0 60px rgba(255, 255, 255, .15), 0 0 48px rgba(255, 43, 214, .55); } /* Speaker grilles — left + right of marquee (dotted texture overlay) */ body[data-theme="skeumorphic"]:not([data-system]) .arcade-cabinet > .home-hero::before { content: ""; position: absolute; top: -84px; left: -34px; width: 60px; height: 60px; background-image: radial-gradient(circle, rgba(0, 0, 0, .55) 25%, transparent 26%); background-size: 8px 8px; border: 3px solid #2a1a0d; border-radius: 6px; box-shadow: inset 0 0 8px rgba(0, 0, 0, .8), 0 1px 2px rgba(0, 0, 0, .5); z-index: 2; } body[data-theme="skeumorphic"]:not([data-system]) .arcade-cabinet > .home-hero::after { content: ""; position: absolute; top: -84px; right: -34px; width: 60px; height: 60px; background-image: radial-gradient(circle, rgba(0, 0, 0, .55) 25%, transparent 26%); background-size: 8px 8px; border: 3px solid #2a1a0d; border-radius: 6px; box-shadow: inset 0 0 8px rgba(0, 0, 0, .8), 0 1px 2px rgba(0, 0, 0, .5); z-index: 2; } /* Bottom plate / coin slot — physical metal plate with PLAYER 1/2 */ body[data-theme="skeumorphic"]:not([data-system]) .arcade-cabinet::after { content: "PLAYER 1 ◆ INSERT COIN ◆ PLAYER 2"; position: absolute; bottom: 70px; /* legs üstünde, cabinet alt body'sinde */ left: 50%; transform: translateX(-50%); padding: 16px 40px; /* Physical metal plate with 2 dark slot grooves */ background: linear-gradient(90deg, transparent 38%, rgba(0, 0, 0, .85) 39%, rgba(0, 0, 0, .9) 41%, rgba(0, 0, 0, .85) 43%, transparent 44%, transparent 56%, rgba(0, 0, 0, .85) 57%, rgba(0, 0, 0, .9) 59%, rgba(0, 0, 0, .85) 61%, transparent 62% ), linear-gradient(180deg, #4a4a55 0%, #2a2a32 50%, #14141a 100%); border: 3px solid #1a1a20; border-radius: 6px; font-family: var(--font-pixel, 'Press Start 2P', monospace); font-size: .6rem; letter-spacing: .2em; color: #ffd24a; text-shadow: 0 0 12px rgba(255, 210, 74, .6), 0 -1px 0 rgba(0, 0, 0, .9), 0 1px 0 rgba(0, 0, 0, .9); box-shadow: inset 0 2px 0 rgba(255, 255, 255, .18), inset 0 -2px 0 rgba(0, 0, 0, .55), 0 4px 14px rgba(0, 0, 0, .7); pointer-events: none; z-index: 3; } /* CABINET LEGS — search-wrap'in ::after pseudo'sundan iki ayak yarat */ body[data-theme="skeumorphic"]:not([data-system]) .arcade-cabinet .search-wrap::before, body[data-theme="skeumorphic"]:not([data-system]) .arcade-cabinet .search-wrap::after { content: ""; position: absolute; bottom: -150px; /* cabinet alt body'sinin altında */ width: 90px; height: 80px; background: linear-gradient(180deg, #2a1a0d 0%, #1a0d05 60%, #0d0703 100%); border: 3px solid #4a3520; border-top: none; border-radius: 0 0 8px 8px; box-shadow: inset 0 -3px 6px rgba(0, 0, 0, .85), inset 1px 0 0 rgba(255, 220, 160, .08), 0 8px 18px rgba(0, 0, 0, .6); pointer-events: none; z-index: -1; } body[data-theme="skeumorphic"]:not([data-system]) .arcade-cabinet .search-wrap::before { left: -40px; /* sol ayak — cabinet sol kenarından çıkıntı */ } body[data-theme="skeumorphic"]:not([data-system]) .arcade-cabinet .search-wrap::after { right: -40px; /* sağ ayak */ } body[data-theme="skeumorphic"]:not([data-system]) .arcade-cabinet .search-wrap { position: relative; /* legs için anchor */ } /* SIDE PANEL RIVETS — cabinet'in iki yanına 4 chrome rivet (köşe vidaları) */ body[data-theme="skeumorphic"]:not([data-system]) .arcade-cabinet .filter-bar::before, body[data-theme="skeumorphic"]:not([data-system]) .arcade-cabinet .filter-bar::after { content: ""; position: absolute; width: 14px; height: 14px; background: radial-gradient(circle at 30% 30%, #d8d0b8 0%, #8a7a55 40%, #3a2818 100%); border-radius: 50%; box-shadow: 0 0 4px rgba(0, 0, 0, .8), inset -1px -1px 2px rgba(0, 0, 0, .5), inset 1px 1px 1px rgba(255, 255, 255, .4); } body[data-theme="skeumorphic"]:not([data-system]) .arcade-cabinet .filter-bar::before { top: -106px; /* marquee altı sol köşe */ left: -52px; } body[data-theme="skeumorphic"]:not([data-system]) .arcade-cabinet .filter-bar::after { top: -106px; right: -52px; } body[data-theme="skeumorphic"]:not([data-system]) .arcade-cabinet .filter-bar { position: relative; /* rivets için anchor */ } /* CABINET LEGS — outside the chassis, two columns at the bottom */ body[data-theme="skeumorphic"]:not([data-system]) .arcade-cabinet, body[data-theme="skeumorphic"]:not([data-system]) .arcade-cabinet * { /* keep legs decoration accessible to layout */ } /* Adjust child elements: now they're inside cabinet body, padded around marquee/coin */ body[data-theme="skeumorphic"]:not([data-system]) .arcade-cabinet .home-hero { position: relative; /* speaker grille pseudos için */ margin: 12px auto 18px; max-width: none; /* Cabinet'in iç kısmında "ekran" olduğu için CRT bezel'i daha belirgin */ border-width: 8px; } body[data-theme="skeumorphic"]:not([data-system]) .arcade-cabinet .filter-bar { margin: 0 auto 16px; max-width: none; } body[data-theme="skeumorphic"]:not([data-system]) .arcade-cabinet .search-wrap { margin: 0 auto; max-width: none; } /* Mobile: simplified but still recognizable as cabinet */ @media (max-width: 900px) { body[data-theme="skeumorphic"]:not([data-system]) .arcade-cabinet { margin: 24px 6px 30px; padding: 60px 12px 60px; border-width: 6px; border-radius: 16px 16px 6px 6px; box-shadow: 0 2px 0 #0d0703, 0 4px 0 #080502, 0 12px 24px rgba(0, 0, 0, .7), inset 0 2px 0 rgba(255, 220, 160, .12); } body[data-theme="skeumorphic"]:not([data-system]) .arcade-cabinet::before { height: 50px; font-size: 1rem; letter-spacing: .1em; } body[data-theme="skeumorphic"]:not([data-system]) .arcade-cabinet > .home-hero::before, body[data-theme="skeumorphic"]:not([data-system]) .arcade-cabinet > .home-hero::after { display: none; /* speaker grilles tight space */ } body[data-theme="skeumorphic"]:not([data-system]) .arcade-cabinet::after { font-size: .35rem; padding: 8px 16px; bottom: 10px; letter-spacing: .12em; } } /* ── Homepage backdrop: Pac-Man arcade cabinet photo + brick wall. gam.onl'in "arcade hall" hissini vermek için iki katman: ::before (z:-1) = real arcade cabinet photo, faded 30% ::after (z:-2) = brick wall pattern, opacity 35% (önceki 10% → çok subtle) İkisi de fixed, content layout etkilenmez. */ body[data-theme="skeumorphic"]:not([data-system])::before { content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none; background-image: url(/assets/skeumorphic/console-arcade.webp); background-position: center center; background-size: cover; background-repeat: no-repeat; opacity: .30; /* arcade hall hissi, content okunabilir */ /* Vignette: content area daha açık */ mask-image: radial-gradient(ellipse 80% 70% at center, transparent 25%, #000 80%); -webkit-mask-image: radial-gradient(ellipse 80% 70% at center, transparent 25%, #000 80%); } body[data-theme="skeumorphic"]:not([data-system])::after { content: ""; position: fixed; inset: 0; z-index: -2; pointer-events: none; opacity: .35; /* önceki 0.10 — şimdi belirgin brick */ background-image: url("data:image/svg+xml;utf8,"); background-size: 240px 120px; } /* ── Marquee header ────────────────────────────────────────────────── site-header: logo bölümü "arcade marquee" hissi. Top inset glow strip alt sınırda, neon tube vibe. Lang toggle'a daha kalın bezel. */ body[data-theme="skeumorphic"]:not([data-system]) .site-header { position: relative; background: linear-gradient(180deg, rgba(20, 12, 40, .85), rgba(8, 4, 18, .95)); border-bottom: 2px solid rgba(255, 43, 214, .25); padding: 12px 24px 14px; box-shadow: inset 0 -1px 0 rgba(255, 43, 214, .35), 0 6px 18px rgba(0, 0, 0, .4); } body[data-theme="skeumorphic"]:not([data-system]) .site-header::after { content: ""; position: absolute; left: 5%; right: 5%; bottom: -1px; height: 2px; background: linear-gradient(90deg, transparent, rgba(255, 43, 214, .9) 30%, rgba(0, 240, 255, .9) 70%, transparent); filter: blur(.5px); box-shadow: 0 0 12px rgba(255, 43, 214, .6), 0 0 22px rgba(0, 240, 255, .35); } /* ── Home hero — TV/CRT screen bezel ───────────────────────────────── Mevcut .home-hero panel'ini "vintage TV" hissinde sarmala: outer chrome border, rounded radius, inset shadow, scan-line overlay. */ body[data-theme="skeumorphic"]:not([data-system]) .home-hero { position: relative; background: linear-gradient(180deg, rgba(8, 4, 18, .98), rgba(14, 8, 28, .98)); border: 6px solid #2a2a32; /* TV bezel chrome */ border-radius: 18px; padding: 36px 38px 28px; margin: 22px auto 18px; max-width: 920px; box-shadow: 0 10px 36px rgba(0, 0, 0, .65), inset 0 0 0 1px rgba(255, 255, 255, .04), inset 0 0 28px rgba(0, 240, 255, .06), 0 0 28px rgba(255, 43, 214, .15); /* Bezel screws — 4 corner */ background-clip: padding-box; } body[data-theme="skeumorphic"]:not([data-system]) .home-hero::before { /* Scan lines overlay — CRT effect */ content: ""; position: absolute; inset: 6px; /* bezel kalınlığı kadar */ border-radius: 12px; pointer-events: none; background: repeating-linear-gradient( 180deg, transparent 0, transparent 3px, rgba(0, 0, 0, .12) 3px, rgba(0, 0, 0, .12) 4px ); z-index: 1; opacity: .55; } body[data-theme="skeumorphic"]:not([data-system]) .home-hero::after { /* Soft glow inside the screen */ content: ""; position: absolute; inset: 6px; border-radius: 12px; pointer-events: none; background: radial-gradient( ellipse 80% 60% at center, rgba(0, 240, 255, .08), transparent 70% ); z-index: 0; } body[data-theme="skeumorphic"]:not([data-system]) .home-hero > * { position: relative; z-index: 2; /* content scan line üstünde */ } /* ── Joystick / control panel — filter-bar ─────────────────────────── Mevcut filter butonları "chunky 3D physical buttons" gibi. Buton üzerinde hover'da o sistemin tint'i parlasın. */ body[data-theme="skeumorphic"]:not([data-system]) .filter-bar { position: relative; background: linear-gradient(180deg, #1a1424 0%, #0c0820 60%, #050310 100%); border: 3px solid #2a2030; border-radius: 14px; padding: 16px 20px; margin: 18px auto; max-width: 920px; box-shadow: 0 8px 24px rgba(0, 0, 0, .55), inset 0 1px 0 rgba(255, 255, 255, .05), inset 0 -2px 0 rgba(0, 0, 0, .35); display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; } body[data-theme="skeumorphic"]:not([data-system]) .filter-btn { background: linear-gradient(180deg, #2a1850 0%, #160a32 50%, #0a0420 100%); border: 2px solid #3a2a4a; border-radius: 10px; padding: 12px 18px; font-weight: 700; color: #d4ccff; box-shadow: 0 3px 0 rgba(0, 0, 0, .55), inset 0 1px 0 rgba(255, 255, 255, .15), inset 0 -1px 0 rgba(0, 0, 0, .2); transition: transform .08s ease, box-shadow .15s ease, color .15s ease; } body[data-theme="skeumorphic"]:not([data-system]) .filter-btn:hover { color: #fff; border-color: rgba(255, 43, 214, .55); box-shadow: 0 3px 0 rgba(0, 0, 0, .55), 0 0 18px rgba(255, 43, 214, .4), inset 0 1px 0 rgba(255, 255, 255, .25); } body[data-theme="skeumorphic"]:not([data-system]) .filter-btn.active { background: linear-gradient(180deg, #ff2bd6 0%, #b41ea6 60%, #7a0d70 100%); border-color: #ff7be8; color: #fff; text-shadow: 0 1px 0 rgba(0, 0, 0, .5); transform: translateY(2px); box-shadow: 0 1px 0 rgba(0, 0, 0, .55), 0 0 22px rgba(255, 43, 214, .55), inset 0 -1px 0 rgba(0, 0, 0, .35), inset 0 1px 0 rgba(255, 255, 255, .2); } body[data-theme="skeumorphic"]:not([data-system]) .filter-btn:active { transform: translateY(2px); box-shadow: 0 1px 0 rgba(0, 0, 0, .55), inset 0 -1px 0 rgba(0, 0, 0, .35); } /* ── CRT search input ──────────────────────────────────────────────── .search-wrap'i terminal hissi: chunky bezel, scanned text efekti, focus'ta cyan glow. */ body[data-theme="skeumorphic"]:not([data-system]) .search-wrap { position: relative; margin: 14px auto 24px; max-width: 920px; text-align: center; } body[data-theme="skeumorphic"]:not([data-system]) .search-box { background: linear-gradient(180deg, rgba(0, 12, 18, .98), rgba(0, 6, 12, .98)); border: 3px solid #1a3438; color: #b6f0ff; border-radius: 8px; font-family: var(--font-crt, 'VT323', monospace); font-size: 1.15rem; padding: 12px 18px 12px 46px; box-shadow: inset 0 0 14px rgba(0, 240, 255, .15), inset 0 1px 0 rgba(255, 255, 255, .04), 0 4px 12px rgba(0, 0, 0, .5); letter-spacing: .04em; caret-color: #00f0ff; } body[data-theme="skeumorphic"]:not([data-system]) .search-box:focus, body[data-theme="skeumorphic"]:not([data-system]) .search-box:focus-visible { border-color: #00f0ff; box-shadow: inset 0 0 22px rgba(0, 240, 255, .3), inset 0 1px 0 rgba(255, 255, 255, .08), 0 0 26px rgba(0, 240, 255, .4), 0 4px 12px rgba(0, 0, 0, .55); outline: none; } body[data-theme="skeumorphic"]:not([data-system]) .search-box::placeholder { color: #4a8090; } body[data-theme="skeumorphic"]:not([data-system]) .game-count { color: var(--gold); font-family: var(--font-crt, 'VT323', monospace); text-shadow: 0 0 8px rgba(255, 210, 74, .35); margin-top: 8px; } /* ── Library shelf — game grid section divider ─────────────────────── Game grid'in üstüne accent strip + "37 OYUN" tarzı section heading (mevcut .game-count'a ek görsel). */ body[data-theme="skeumorphic"]:not([data-system]) .game-grid { position: relative; padding-top: 26px; margin-top: 20px; } body[data-theme="skeumorphic"]:not([data-system]) .game-grid::before { content: ""; position: absolute; left: 50%; top: 0; transform: translateX(-50%); width: min(80%, 720px); height: 2px; background: linear-gradient(90deg, transparent, rgba(255, 43, 214, .8), rgba(0, 240, 255, .8), transparent); filter: blur(.4px); box-shadow: 0 0 14px rgba(255, 43, 214, .35), 0 0 24px rgba(0, 240, 255, .25); } /* ── Mobile: faz 2 chrome'u devre dışı (LCP + UX) ───────────────────── */ @media (max-width: 900px) { body[data-theme="skeumorphic"]:not([data-system])::after { display: none; } body[data-theme="skeumorphic"]:not([data-system]) .home-hero { border-width: 3px; padding: 22px 18px 16px; margin: 14px 12px; } body[data-theme="skeumorphic"]:not([data-system]) .home-hero::before { display: none; } body[data-theme="skeumorphic"]:not([data-system]) .filter-bar { border-width: 2px; padding: 10px 12px; margin: 12px; } body[data-theme="skeumorphic"]:not([data-system]) .filter-btn { padding: 8px 12px; font-size: .55rem; } } /* ── prefers-reduced-motion: scan lines + glow animation kapat ──────── */ @media (prefers-reduced-motion: reduce) { body[data-theme="skeumorphic"] .home-hero::after, body[data-theme="skeumorphic"] .home-hero::before { display: none; } } /* ══════════════════════════════════════════════════════════════════ FAZ 3 — GAME PAGE TV BEZEL (emulator inside vintage CRT chrome) ══════════════════════════════════════════════════════════════════ Selector: body[data-game-id] — sadece /game// sayfalarında. System pages (/snes/) data-game-id'siz, dokunulmaz. Visual katmanlar: 1. Power/Reset chunky physical buttons (ekran üstünde) 2. Emulator-wrap = CRT TV chrome bezel (kalın chrome border, dome shadow) 3. Scan lines overlay (subtle, EJS canvas üstünde) 4. Inner glow (cyan/magenta soft halo) 5. Brand label "ARCADIA" altta sağda 6. Mobile (<900px): bezel komple kaldırılır, raw iframe (gameplay UX) */ /* ── TV controls (Power + Reset chunky buttons) ───────────────────── */ body[data-theme="skeumorphic"][data-game-id] .tv-controls { display: flex; gap: 14px; justify-content: center; margin: 8px auto 14px; max-width: 800px; } body[data-theme="skeumorphic"][data-game-id] .tv-btn { appearance: none; background: linear-gradient(180deg, #4a3a2a 0%, #2a1f15 60%, #15100a 100%); border: 2px solid #5a4530; border-radius: 22px; padding: 10px 28px; font-family: var(--font-pixel, 'Press Start 2P', monospace); font-size: .55rem; letter-spacing: .12em; color: #ffd24a; text-decoration: none; text-shadow: 0 -1px 0 rgba(0, 0, 0, .8); cursor: pointer; display: inline-flex; align-items: center; gap: 10px; box-shadow: 0 4px 0 rgba(0, 0, 0, .55), inset 0 1px 0 rgba(255, 255, 255, .15), inset 0 -2px 0 rgba(0, 0, 0, .35); transition: transform .08s ease, box-shadow .15s ease; } body[data-theme="skeumorphic"][data-game-id] .tv-btn:hover { color: #fff5cc; box-shadow: 0 4px 0 rgba(0, 0, 0, .55), 0 0 20px rgba(255, 210, 74, .35), inset 0 1px 0 rgba(255, 255, 255, .25); } body[data-theme="skeumorphic"][data-game-id] .tv-btn:active { transform: translateY(3px); box-shadow: 0 1px 0 rgba(0, 0, 0, .55), inset 0 -1px 0 rgba(0, 0, 0, .35); } body[data-theme="skeumorphic"][data-game-id] .tv-btn:focus-visible { outline: 3px solid var(--cyan, #00f0ff); outline-offset: 3px; } body[data-theme="skeumorphic"][data-game-id] .tv-btn-led { width: 8px; height: 8px; border-radius: 50%; background: radial-gradient(circle, #ff5050 0%, #aa1010 70%); box-shadow: 0 0 8px rgba(255, 80, 80, .8), inset 0 1px 0 rgba(255, 255, 255, .4); } body[data-theme="skeumorphic"][data-game-id] .tv-power { /* POWER farklı: amber/red LED */ background: linear-gradient(180deg, #5a3025 0%, #2a1510 60%, #15080a 100%); border-color: #6a4035; } body[data-theme="skeumorphic"][data-game-id] .tv-reset { /* RESET: sadece label, no LED */ background: linear-gradient(180deg, #3a3a4a 0%, #1f1f2c 60%, #0a0a15 100%); border-color: #4a4a5a; color: #d8d4ff; } body[data-theme="skeumorphic"][data-game-id] .tv-fullscreen { /* FULLSCREEN: cyan LED + cyan label (genişlet "view" hissi) */ background: linear-gradient(180deg, #1a3a4a 0%, #0d2438 60%, #051018 100%); border-color: #2a5a6a; color: #b6f0ff; text-shadow: 0 -1px 0 rgba(0, 0, 0, .8), 0 0 6px rgba(0, 240, 255, .35); } body[data-theme="skeumorphic"][data-game-id] .tv-mute { /* MUTE: amber LED + amber label (audio-warning vibe) */ background: linear-gradient(180deg, #3a3520 0%, #2a2515 60%, #15110a 100%); border-color: #5a5030; color: #ffd24a; text-shadow: 0 -1px 0 rgba(0, 0, 0, .8), 0 0 6px rgba(255, 210, 74, .35); } /* LED color variants (extends .tv-btn-led red default) */ body[data-theme="skeumorphic"][data-game-id] .tv-led-cyan { background: radial-gradient(circle, #00f0ff 0%, #0080a0 70%); box-shadow: 0 0 8px rgba(0, 240, 255, .8), inset 0 1px 0 rgba(255, 255, 255, .4); } body[data-theme="skeumorphic"][data-game-id] .tv-led-gold { background: radial-gradient(circle, #ffd24a 0%, #aa8010 70%); box-shadow: 0 0 8px rgba(255, 210, 74, .8), inset 0 1px 0 rgba(255, 255, 255, .4); transition: opacity .15s ease; /* mute toggle dimming smooth */ } /* Active state visuals */ body[data-theme="skeumorphic"][data-game-id] .tv-fullscreen[aria-pressed="true"] { background: linear-gradient(180deg, #2a5a6a 0%, #1a4458 60%, #0a2030 100%); color: #fff; box-shadow: 0 4px 0 rgba(0, 0, 0, .55), 0 0 22px rgba(0, 240, 255, .55), inset 0 1px 0 rgba(255, 255, 255, .25); } body[data-theme="skeumorphic"][data-game-id] .tv-mute[aria-pressed="true"] { background: linear-gradient(180deg, #2a2520 0%, #1a1510 60%, #0a0805 100%); color: #aaa090; } /* ── Emulator-wrap = CRT TV chrome ────────────────────────────────── */ body[data-theme="skeumorphic"][data-game-id] .emulator-wrap { position: relative; border: 14px solid; border-image: linear-gradient(180deg, #3a3a3f 0%, #1a1a1f 100%) 1; border-radius: 18px; background: #000; box-shadow: 0 16px 48px rgba(0, 0, 0, .75), inset 0 0 0 2px rgba(255, 255, 255, .04), inset 0 0 60px rgba(0, 0, 0, .85), 0 0 32px rgba(0, 0, 0, .35); /* Hardware "screen sunken" effect */ padding: 0; overflow: hidden; } body[data-theme="skeumorphic"][data-game-id] .emulator-wrap::before { /* Soft inner glow halo on screen */ content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient( ellipse 90% 70% at center, rgba(0, 240, 255, .04), transparent 70% ); z-index: 5; } body[data-theme="skeumorphic"][data-game-id] .emulator-wrap::after { /* Scan lines — subtle, EJS canvas üstünde */ content: ""; position: absolute; inset: 0; pointer-events: none; background: repeating-linear-gradient( 180deg, transparent 0, transparent 2px, rgba(0, 0, 0, .15) 2px, rgba(0, 0, 0, .15) 3px ); z-index: 6; opacity: .35; mix-blend-mode: multiply; } /* ── Brand label (alt sağ köşe, "ARCADIA" tarzı) ───────────────────── */ body[data-theme="skeumorphic"][data-game-id] .player-layout::after { content: "ARCADEBONUS · CRT-MODE"; position: absolute; right: 26px; bottom: 14px; font-family: var(--font-pixel, 'Press Start 2P', monospace); font-size: .42rem; letter-spacing: .15em; color: rgba(255, 210, 74, .35); pointer-events: none; z-index: 0; } body[data-theme="skeumorphic"][data-game-id] .player-layout { position: relative; } /* ── Save state controls — bezel chrome aksent ───────────────────── */ body[data-theme="skeumorphic"][data-game-id] .save-state-controls { z-index: 10; /* scan lines üstünde kalsın */ } /* ── Mobile (<900px): bezel komple kaldır — gameplay UX ────────────── */ @media (max-width: 900px) { body[data-theme="skeumorphic"][data-game-id] .tv-controls { display: none; } body[data-theme="skeumorphic"][data-game-id] .emulator-wrap { border-width: 0; border-radius: 0; box-shadow: none; } body[data-theme="skeumorphic"][data-game-id] .emulator-wrap::before, body[data-theme="skeumorphic"][data-game-id] .emulator-wrap::after { display: none; } body[data-theme="skeumorphic"][data-game-id] .player-layout::after { display: none; } } /* prefers-reduced-motion: scan lines kapat */ @media (prefers-reduced-motion: reduce) { body[data-theme="skeumorphic"][data-game-id] .emulator-wrap::after, body[data-theme="skeumorphic"][data-game-id] .emulator-wrap::before { display: none; } } /* ══════════════════════════════════════════════════════════════════ GAME PAGE FULL ARCADE CABINET — gam.onl pattern (2026-05-05 fix) ══════════════════════════════════════════════════════════════════ .arcade-machine div, emulator-wrap'in HEMEN ÖNCESİNDE absolute positioned. Vintage TV/cabinet body decoration: chunky wood-grain outer cabinet, big bezel chrome, brand label, side speaker grilles, power LED. Behind emulator-wrap (z-index -1), iframe gameplay önde görünür. Mobile <900px: display:none. */ body[data-theme="skeumorphic"][data-game-id] .arcade-machine { position: relative; display: block; margin: 0 auto -16px; /* emulator-wrap ile overlap */ max-width: 1200px; height: 96px; /* cabinet "üst kısmı" — kalın chrome trim + brand label */ /* Chunky wood + chrome cabinet hood */ background: /* Vertical wood-grain stripes */ repeating-linear-gradient(90deg, rgba(0, 0, 0, .12) 0px, transparent 1px, transparent 4px, rgba(255, 220, 160, .04) 5px, transparent 6px, transparent 14px), linear-gradient(180deg, #5a4225 0%, #3d2818 30%, #2a1a0d 70%, #1a0d05 100%); border: 8px solid; border-image: linear-gradient(180deg, #d8c08c 0%, #6a5028 30%, #3a2818 70%, #1a0e08 100%) 1; border-radius: 18px 18px 0 0; border-bottom: none; /* emulator-wrap üstüne oturur */ box-shadow: inset 0 4px 0 rgba(255, 220, 160, .25), inset 0 -2px 0 rgba(0, 0, 0, .55), 0 4px 14px rgba(0, 0, 0, .6); } /* Brand label "ARCADIA" / "ARCADEBONUS" big pixel logo at top */ body[data-theme="skeumorphic"][data-game-id] .arcade-machine::before { content: "ARCADE BONUS"; position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-family: var(--font-pixel, 'Press Start 2P', monospace); font-size: 1.6rem; letter-spacing: .15em; color: #fff; text-shadow: 0 0 12px #fff, 0 0 28px rgba(255, 43, 214, .9), 0 0 48px rgba(0, 240, 255, .6), 0 3px 0 rgba(0, 0, 0, .85); /* Backlit gradient strip behind text */ background: radial-gradient(ellipse 70% 90% at center, rgba(255, 43, 214, .35), transparent 70%); } /* Speaker grilles — left + right of brand label */ body[data-theme="skeumorphic"][data-game-id] .arcade-machine-bezel { position: absolute; inset: 16px 24px 16px auto; width: 56px; height: 56px; background-image: radial-gradient(circle, rgba(0, 0, 0, .55) 25%, transparent 26%); background-size: 8px 8px; border: 3px solid #1a0e08; border-radius: 6px; box-shadow: inset 0 0 8px rgba(0, 0, 0, .85), 0 1px 2px rgba(0, 0, 0, .55); pointer-events: none; } body[data-theme="skeumorphic"][data-game-id] .arcade-machine-bezel::before { /* Mirror copy on left side */ content: ""; position: absolute; width: 56px; height: 56px; inset: -3px auto -3px auto; /* same height as parent */ left: calc(-100vw + 24px); /* tighter: positioned via transform */ transform: translateX(calc(-1200px + 100% + 56px)); background-image: inherit; background-size: inherit; border: inherit; border-radius: inherit; box-shadow: inherit; } /* WOOD CABINET BODY — extends below the emulator-wrap, visible on left+right of the iframe like cabinet side panels. Achieved via player-layout::before (full-width wood frame behind) */ body[data-theme="skeumorphic"][data-game-id] .player-layout { position: relative; padding: 0 32px 80px; /* side rails + bottom legs */ } body[data-theme="skeumorphic"][data-game-id] .player-layout::before { /* Wood cabinet body — extends behind .emulator-wrap */ content: ""; position: absolute; top: 64px; /* under arcade-machine hood */ left: 0; right: 0; bottom: 60px; /* above legs */ z-index: -1; background: /* Wood-grain texture */ repeating-linear-gradient(90deg, rgba(0, 0, 0, .14) 0px, transparent 1px, transparent 5px, rgba(255, 220, 160, .04) 6px, transparent 7px, transparent 16px), linear-gradient(180deg, #2a1a0d 0%, #1a0d05 50%, #0d0703 100%); border-left: 6px solid #5a4225; border-right: 6px solid #5a4225; box-shadow: inset 0 4px 18px rgba(0, 0, 0, .6), 0 0 36px rgba(255, 43, 214, .15); } /* Cabinet legs — bottom of player-layout */ body[data-theme="skeumorphic"][data-game-id] .player-layout::after { content: "PLAYER 1 ◆ PLAYER 2"; position: absolute; bottom: 0; left: 0; right: 0; height: 60px; background: linear-gradient(180deg, #2a1a0d 0%, #1a0d05 100%); border: 8px solid; border-image: linear-gradient(180deg, #5a4225 0%, #2a1a0d 100%) 1; border-radius: 0 0 18px 18px; border-top: none; display: flex; align-items: center; justify-content: center; font-family: var(--font-pixel, 'Press Start 2P', monospace); font-size: .6rem; letter-spacing: .18em; color: #ffd24a; text-shadow: 0 0 10px rgba(255, 210, 74, .5), 0 -1px 0 rgba(0, 0, 0, .9); box-shadow: inset 0 2px 0 rgba(255, 220, 160, .15), inset 0 -3px 0 rgba(0, 0, 0, .55), 0 8px 18px rgba(0, 0, 0, .7); z-index: 0; } /* TV controls (Power/Reset) — keep above cabinet, more prominent */ body[data-theme="skeumorphic"][data-game-id] .tv-controls { position: relative; z-index: 5; margin-bottom: -2px; } /* Mobile <900px: cabinet body kaldır, raw iframe kalsın (gameplay UX) */ @media (max-width: 900px) { body[data-theme="skeumorphic"][data-game-id] .arcade-machine, body[data-theme="skeumorphic"][data-game-id] .arcade-machine-bezel { display: none; } body[data-theme="skeumorphic"][data-game-id] .player-layout { padding: 0; } body[data-theme="skeumorphic"][data-game-id] .player-layout::before, body[data-theme="skeumorphic"][data-game-id] .player-layout::after { display: none; } }