*{margin:0;padding:0;box-sizing:border-box}html{scroll-behavior:smooth}body{background:#080808;color:#f5f5f5;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;line-height:1.65;overflow-x:hidden}a{color:inherit;text-decoration:none}button{font:inherit}.site-header{position:sticky;top:0;z-index:1000;background:rgba(8,8,8,.82);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-bottom:1px solid rgba(255,255,255,.05)}.navbar{width:min(1120px,90%);height:70px;margin:auto;display:flex;align-items:center;justify-content:space-between;gap:28px}.logo{font-size:13px;font-weight:750;letter-spacing:.13em;white-space:nowrap}.nav-right{display:flex;align-items:center;gap:28px}.nav-links{display:flex;gap:26px;color:#999;font-size:13px}.nav-links a,.lang-btn{transition:.2s}.nav-links a:hover,.nav-links a:focus-visible{color:#fff}.lang-switch{display:flex;border:1px solid #272727;border-radius:999px;padding:3px}.lang-btn{border:0;background:transparent;color:#777;padding:4px 7px;border-radius:999px;font-size:10px;font-weight:700;cursor:pointer}.lang-btn.active{background:#f0f0f0;color:#111}.ambient-background{position:fixed;inset:0;z-index:-1;overflow:hidden;pointer-events:none;contain:strict}.ambient{position:absolute;border-radius:50%;filter:blur(100px);will-change:transform;transition:transform 1.6s cubic-bezier(.22,1,.36,1),opacity 1.2s}.ambient-one{width:540px;height:540px;background:#e5484d;top:-190px;right:-100px;opacity:.12}.ambient-two{width:440px;height:440px;background:#663399;bottom:-170px;left:-180px;opacity:.075}.ambient-three{width:340px;height:340px;background:#2d5bff;top:45%;left:45%;opacity:.04}.shell{width:min(1120px,90%);margin:auto}.hero{min-height:calc(100vh - 70px);display:flex;flex-direction:column;justify-content:center}.hero-content{max-width:900px}.eyebrow{color:#e5484d;font-size:10px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;margin-bottom:16px}.hero h1,.page-title{max-width:880px;font-size:clamp(42px,5.1vw,72px);line-height:1.03;letter-spacing:-.055em;font-weight:620}.hero h1 span{display:block;color:#686868}.lead{max-width:650px;margin-top:23px;color:#999;font-size:16px}.actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:28px}.button{display:inline-flex;align-items:center;padding:10px 16px;border:1px solid #2a2a2a;border-radius:8px;font-size:13px;transition:.22s}.button.primary{background:#f3f3f3;color:#0a0a0a}.button:hover{transform:translateY(-2px);border-color:#555}.hero-tags,.tags,.skill-cloud{display:flex;flex-wrap:wrap;gap:8px}.hero-tags{margin-top:42px}.tech-tag{display:inline-flex;padding:6px 10px;border:1px solid #252525;border-radius:999px;color:#777;background:rgba(255,255,255,.012);font-size:11px;cursor:default;transition:.25s}.tech-tag:hover{color:#f2f2f2;border-color:rgba(229,72,77,.5);background:rgba(229,72,77,.065);box-shadow:0 0 20px rgba(229,72,77,.09);transform:translateY(-2px)}.home-section{padding:92px 0;border-top:1px solid #1d1d1d}.section-number{color:#e5484d;font:11px ui-monospace,SFMono-Regular,Menlo,monospace;margin-bottom:10px}.section-title{font-size:clamp(30px,3.6vw,48px);font-weight:520;letter-spacing:-.04em}.section-copy{max-width:700px;margin-top:18px;color:#8d8d8d}.section-link{display:inline-block;margin-top:25px;color:#bbb;font-size:13px;transition:.2s}.section-link:hover{color:#fff;transform:translateX(3px)}.project-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:15px;margin-top:42px}.project-card{min-height:290px;padding:27px;border:1px solid #222;border-radius:16px;background:rgba(255,255,255,.018);display:flex;flex-direction:column;justify-content:space-between;cursor:pointer;transition:.25s}.project-card:hover,.project-card:focus-visible{transform:translateY(-4px);border-color:rgba(229,72,77,.42);background:rgba(255,255,255,.03);box-shadow:0 20px 65px rgba(0,0,0,.22);outline:none}.project-kicker{color:#e5484d;font-size:9px;font-weight:750;letter-spacing:.17em}.project-card h3{margin-top:9px;font-size:25px;font-weight:520;letter-spacing:-.03em}.project-desc{margin-top:14px;color:#888}.project-card .tags{margin-top:25px}.project-open{display:inline-block;margin-top:20px;color:#aaa;font-size:12px}.page{padding:64px 0 110px;min-height:calc(100vh - 70px)}.back-link{display:inline-block;color:#aaa;font-size:13px;margin-bottom:50px;transition:.2s}.back-link:hover{color:#fff;transform:translateX(-3px)}.page-intro{max-width:680px;color:#999;margin-top:22px}.content-grid{display:grid;grid-template-columns:.75fr 1.25fr;gap:80px;margin-top:60px}.content-card{padding:28px;border:1px solid #222;border-radius:14px;background:rgba(255,255,255,.015)}.content-card p{color:#999}.content-card p+p{margin-top:20px}.experience-list{margin-top:55px}.experience-item{display:grid;grid-template-columns:250px 1fr;gap:55px;padding:42px 0;border-top:1px solid #222}.experience-item:last-child{border-bottom:1px solid #222}.experience-meta{color:#666;font:11px ui-monospace,SFMono-Regular,Menlo,monospace;display:flex;flex-direction:column;gap:5px}.experience-content h2{font-size:24px;font-weight:520}.company{color:#e5484d;margin-top:4px;font-size:13px}.experience-content>p:not(.company){color:#888;margin-top:18px}.experience-content .tags{margin-top:22px}.skills-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:15px;margin-top:50px}.skill-group{padding:26px;border:1px solid #222;border-radius:14px;background:rgba(255,255,255,.015)}.skill-group h2{font-size:17px;font-weight:550;margin-bottom:18px}.contact-panel{margin-top:50px;padding:36px;border:1px solid #222;border-radius:16px;background:rgba(255,255,255,.018)}.project-header{padding-bottom:45px;border-bottom:1px solid #222}.project-header .tags{margin-top:22px}.readme-shell{margin-top:48px}.status,.muted{color:#888}.markdown-body{color:#c7c7c7;font-size:15px;line-height:1.75;overflow-wrap:anywhere}.markdown-body h1,.markdown-body h2,.markdown-body h3{color:#f1f1f1;line-height:1.25;letter-spacing:-.025em;margin:2em 0 .7em}.markdown-body h1{font-size:34px}.markdown-body h2{font-size:27px;border-bottom:1px solid #222;padding-bottom:9px}.markdown-body h3{font-size:20px}.markdown-body p,.markdown-body ul,.markdown-body ol,.markdown-body pre,.markdown-body table,.markdown-body blockquote{margin:16px 0}.markdown-body ul,.markdown-body ol{padding-left:24px}.markdown-body a{color:#e87579;text-decoration:underline;text-underline-offset:3px}.markdown-body img{display:block;max-width:100%;height:auto;margin:25px auto;border-radius:10px}.markdown-body pre{overflow:auto;padding:17px;background:#111;border:1px solid #222;border-radius:10px}.markdown-body code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;background:#151515;padding:2px 5px;border-radius:5px}.markdown-body pre code{background:transparent;padding:0}.markdown-body table{display:block;overflow:auto;border-collapse:collapse}.markdown-body th,.markdown-body td{border:1px solid #292929;padding:8px 11px}.markdown-body blockquote{border-left:3px solid #e5484d;padding-left:17px;color:#999}.page-end{display:flex;justify-content:space-between;align-items:center;gap:20px;margin-top:70px;padding-top:25px;border-top:1px solid #222;color:#777;font-size:12px}.site-footer{border-top:1px solid #1d1d1d}.footer-inner{height:90px;display:flex;align-items:center;justify-content:space-between;color:#666;font-size:11px}.footer-links{display:flex;gap:18px}.footer-links a:hover{color:#fff}.back-to-top{position:fixed;right:26px;bottom:26px;width:42px;height:42px;border:1px solid #303030;border-radius:50%;background:rgba(15,15,15,.86);color:#bbb;cursor:pointer;opacity:0;visibility:hidden;transform:translateY(10px);transition:.25s;z-index:900;backdrop-filter:blur(8px)}.back-to-top.visible{opacity:1;visibility:visible;transform:none}.back-to-top:hover{color:#fff;border-color:rgba(229,72,77,.55);box-shadow:0 0 20px rgba(229,72,77,.1);transform:translateY(-2px)}body.page-enter{animation:pageIn .38s ease both}@keyframes pageIn{from{opacity:0;transform:translateY(5px)}to{opacity:1;transform:none}}@media(max-width:800px){.nav-links{display:none}.navbar{width:min(1120px,92%)}.nav-right{gap:10px}.shell{width:min(1120px,90%)}.hero h1,.page-title{font-size:44px}.project-grid,.skills-grid{grid-template-columns:1fr}.content-grid{grid-template-columns:1fr;gap:25px}.experience-item{grid-template-columns:1fr;gap:20px}.page{padding-top:45px}.page-end{align-items:flex-start;flex-direction:column}.footer-inner{height:auto;padding:28px 0;gap:15px;align-items:flex-start;flex-direction:column}.back-to-top{right:18px;bottom:18px}}@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}.ambient{transition:none}}
/* =========================================================
V2.2 — VERIFIED INTERACTION LAYER
========================================================= */
/* Header stays visible at all times. */
#site-header {
height: 70px;
}
.site-header {
position: fixed;
top: 0;
left: 0;
right: 0;
z-index: 2000;
background: rgba(8, 8, 8, .78);
border-bottom: 1px solid rgba(255,255,255,.055);
backdrop-filter: blur(14px);
-webkit-backdrop-filter: blur(14px);
}
body {
padding-top: 0;
}
.page {
padding-top: 64px;
}
/* Whole language capsule is ONE button. */
.language-toggle {
--toggle-x: 0%;
position: relative;
width: 72px;
height: 32px;
padding: 3px;
border: 1px solid #2b2b2b;
border-radius: 999px;
background: rgba(255,255,255,.018);
color: #777;
cursor: pointer;
display: grid;
grid-template-columns: 1fr 1fr;
align-items: center;
isolation: isolate;
transition: border-color .22s ease, background .22s ease, box-shadow .22s ease;
}
.language-toggle::before {
content: "";
position: absolute;
z-index: -1;
top: 3px;
left: 3px;
width: calc(50% - 3px);
height: calc(100% - 6px);
border-radius: 999px;
background: #f1f1f1;
transform: translateX(var(--toggle-x));
transition: transform .30s cubic-bezier(.22,1,.36,1);
}
.language-toggle[data-lang="en"] { --toggle-x: 100%; }
.language-toggle:hover,
.language-toggle:focus-visible {
outline: none;
border-color: #4a4a4a;
background: rgba(255,255,255,.035);
box-shadow: 0 0 24px rgba(255,255,255,.035);
}
.language-toggle span {
text-align: center;
font-size: 10px;
font-weight: 750;
line-height: 1;
transition: color .20s ease;
user-select: none;
pointer-events: none;
}
.language-toggle[data-lang="tr"] .lang-tr,
.language-toggle[data-lang="en"] .lang-en { color: #111; }
.language-toggle[data-lang="tr"] .lang-en,
.language-toggle[data-lang="en"] .lang-tr { color: #777; }
/* Back-to-top floats as soon as meaningful scrolling occurs. */
.back-to-top {
display: grid;
place-items: center;
position: fixed;
right: 26px;
bottom: 26px;
z-index: 1900;
width: 44px;
height: 44px;
padding: 0;
border: 1px solid #343434;
border-radius: 50%;
background: rgba(13,13,13,.88);
color: #d0d0d0;
cursor: pointer;
opacity: 0;
visibility: hidden;
pointer-events: none;
transform: translateY(12px) scale(.90);
transition: opacity .22s ease, visibility .22s ease, transform .22s ease,
border-color .22s ease, box-shadow .22s ease, color .22s ease;
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
}
.back-to-top.visible {
opacity: 1;
visibility: visible;
pointer-events: auto;
transform: translateY(0) scale(1);
}
.back-to-top:hover,
.back-to-top:focus-visible {
outline: none;
color: #fff;
border-color: rgba(229,72,77,.65);
box-shadow: 0 0 26px rgba(229,72,77,.14);
transform: translateY(-2px) scale(1.03);
}
/* Steam-like subtle project-card tilt and cursor light. */
.project-card {
--tilt-x: 0deg;
--tilt-y: 0deg;
--spot-x: 50%;
--spot-y: 50%;
--card-scale: 1;
position: relative;
overflow: hidden;
transform:
perspective(950px)
rotateX(var(--tilt-x))
rotateY(var(--tilt-y))
scale(var(--card-scale));
transform-style: preserve-3d;
will-change: transform;
transition: transform .16s ease-out, border-color .24s ease,
background .24s ease, box-shadow .24s ease;
}
.project-card::before {
content: "";
position: absolute;
inset: 0;
z-index: 0;
pointer-events: none;
opacity: 0;
background:
radial-gradient(
440px circle at var(--spot-x) var(--spot-y),
rgba(255,255,255,.11),
rgba(229,72,77,.035) 31%,
transparent 66%
);
transition: opacity .20s ease;
}
.project-card:hover::before,
.project-card:focus-visible::before { opacity: 1; }
.project-card:hover,
.project-card:focus-visible {
transform:
perspective(950px)
rotateX(var(--tilt-x))
rotateY(var(--tilt-y))
scale(var(--card-scale));
}
.project-card.is-pressed {
--card-scale: .982;
}
.project-card > * {
position: relative;
z-index: 1;
}
/* Contact interaction */
.contact-methods {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 12px;
margin-bottom: 26px;
}
.contact-method {
display: flex;
flex-direction: column;
gap: 5px;
padding: 20px;
border: 1px solid #252525;
border-radius: 12px;
background: rgba(255,255,255,.012);
transition: transform .22s ease, border-color .22s ease, background .22s ease;
}
.contact-method:hover,
.contact-method:focus-visible {
outline: none;
transform: translateY(-2px);
border-color: rgba(229,72,77,.48);
background: rgba(255,255,255,.027);
}
.contact-method-label {
color: #666;
font-size: 10px;
font-weight: 750;
letter-spacing: .13em;
text-transform: uppercase;
}
.contact-method-value {
color: #e0e0e0;
font-size: 14px;
}
/* Fourth, white ambient source. */
.ambient-four {
width: 410px;
height: 410px;
top: 13%;
left: 17%;
background: #fff;
opacity: .045;
filter: blur(120px);
}
/* JS owns transforms; CSS no longer overwrites them with transition rules. */
.ambient {
transition: opacity .8s ease;
will-change: transform;
}
@media (max-width: 800px) {
.contact-methods { grid-template-columns: 1fr; }
.project-card {
transform: none !important;
}
.back-to-top {
right: 18px;
bottom: 18px;
}
}
@media (prefers-reduced-motion: reduce) {
.language-toggle::before,
.back-to-top,
.project-card,
.project-card::before {
transition-duration: .01ms !important;
}
.project-card {
transform: none !important;
}
}
/* =========================================================
V2.3 — POSITIONING FIXES
========================================================= */
/* The actual header host is fixed, not only its child. */
#site-header {
position: fixed !important;
top: 0 !important;
left: 0 !important;
right: 0 !important;
width: 100% !important;
height: 70px !important;
z-index: 5000 !important;
}
#site-header > .site-header {
position: relative !important;
top: auto !important;
left: auto !important;
right: auto !important;
width: 100%;
height: 70px;
}
body {
padding-top: 70px !important;
}
.hero {
min-height: calc(100vh - 70px) !important;
}
.page {
padding-top: 64px !important;
}
/* Force the control to live in the viewport, regardless of DOM location. */
#back-to-top.back-to-top {
position: fixed !important;
right: 26px !important;
bottom: 26px !important;
top: auto !important;
left: auto !important;
margin: 0 !important;
z-index: 4900 !important;
opacity: 0 !important;
visibility: hidden !important;
pointer-events: none !important;
transform: translate3d(0, 16px, 0) scale(.88) !important;
transition:
opacity .30s ease,
visibility .30s ease,
transform .38s cubic-bezier(.22,1,.36,1),
border-color .22s ease,
box-shadow .22s ease !important;
}
#back-to-top.back-to-top.visible {
opacity: 1 !important;
visibility: visible !important;
pointer-events: auto !important;
transform: translate3d(0, 0, 0) scale(1) !important;
}
#back-to-top.back-to-top.visible:hover,
#back-to-top.back-to-top.visible:focus-visible {
transform: translate3d(0, -3px, 0) scale(1.04) !important;
}
/* Four equal contact cards. */
.contact-methods {
grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
margin: 0 !important;
}
.contact-method {
min-height: 92px;
justify-content: center;
}
@media (max-width: 800px) {
#back-to-top.back-to-top {
right: 18px !important;
bottom: 18px !important;
}
.contact-methods {
grid-template-columns: 1fr !important;
}
}
/* =========================================================
V2.4 — ROOT FIX FOR FIXED UI + DEPTH LIGHTING
========================================================= */
/*
IMPORTANT:
Never transform BODY. A transformed ancestor makes fixed descendants behave
like they are fixed to that ancestor instead of the viewport.
*/
body.page-enter {
animation: v24BodyFade .34s ease both !important;
transform: none !important;
}
@keyframes v24BodyFade {
from { opacity: 0; }
to { opacity: 1; }
}
html,
body {
transform: none !important;
}
/* Navbar genuinely anchored to viewport */
#site-header {
position: fixed !important;
inset: 0 0 auto 0 !important;
width: 100% !important;
height: 70px !important;
z-index: 10000 !important;
transform: none !important;
}
#site-header .site-header {
position: static !important;
width: 100% !important;
height: 70px !important;
}
/* Floating back-to-top is always viewport-fixed once JS reveals it */
#back-to-top.back-to-top {
position: fixed !important;
right: 28px !important;
bottom: 28px !important;
top: auto !important;
left: auto !important;
z-index: 9990 !important;
}
/* Ambient layer itself is viewport-fixed and never participates in layout */
.ambient-background {
position: fixed !important;
inset: 0 !important;
width: 100vw !important;
height: 100vh !important;
overflow: hidden !important;
pointer-events: none !important;
z-index: -1 !important;
transform: none !important;
}
/* Make red + white the principal depth lights. */
.ambient-one {
width: 620px !important;
height: 620px !important;
top: -210px !important;
right: -120px !important;
background: #e5484d !important;
opacity: .16 !important;
filter: blur(105px) !important;
}
.ambient-four {
width: 520px !important;
height: 520px !important;
top: 42% !important;
left: -150px !important;
background: #ffffff !important;
opacity: .075 !important;
filter: blur(135px) !important;
}
/* Supporting lights stay much quieter. */
.ambient-two { opacity: .035 !important; }
.ambient-three { opacity: .025 !important; }
@media (max-width: 800px) {
#back-to-top.back-to-top {
right: 18px !important;
bottom: 18px !important;
}
}
/* =========================================================
V2.5 — HERO CTA + RED/WHITE S-CURVE AMBIENT
========================================================= */
/* Main red source begins on the upper-right. */
.ambient-one {
width: 650px !important;
height: 650px !important;
top: -230px !important;
right: -170px !important;
left: auto !important;
opacity: .17 !important;
filter: blur(110px) !important;
}
/* White source starts opposite the red source. */
.ambient-four {
width: 570px !important;
height: 570px !important;
top: 18% !important;
left: -210px !important;
right: auto !important;
opacity: .095 !important;
filter: blur(135px) !important;
}
/* Keep the secondary colors atmospheric rather than dominant. */
.ambient-two { opacity: .025 !important; }
.ambient-three { opacity: .018 !important; }
/* =========================================================
V2.6 — COMPACT HOME + PROJECT GRID/LIST VIEW
========================================================= */
/* Home is intentionally denser while keeping the hero prominent. */
body[data-page="home"] .hero {
min-height: min(760px, calc(84vh - 70px)) !important;
padding: 54px 0 46px;
}
body[data-page="home"] .hero-tags {
margin-top: 32px;
}
body[data-page="home"] .home-section {
padding: 66px 0 !important;
}
body[data-page="home"] .section-title {
font-size: clamp(28px, 3.2vw, 43px);
}
body[data-page="home"] .section-copy {
margin-top: 14px;
}
body[data-page="home"] .section-link {
margin-top: 20px;
}
/* Featured cards are compact showcase cards; full Projects retains room. */
body[data-page="home"] .project-grid {
margin-top: 32px;
}
body[data-page="home"] .project-card {
min-height: 238px;
padding: 23px;
}
body[data-page="home"] .project-card h3 {
font-size: 22px;
}
body[data-page="home"] .project-desc {
margin-top: 10px;
font-size: 14px;
}
body[data-page="home"] .project-card .tags {
margin-top: 19px;
}
/* Grid / List view toolbar */
.projects-toolbar {
display: flex;
align-items: center;
justify-content: flex-end;
gap: 10px;
margin-top: 32px;
margin-bottom: -18px;
}
.projects-toolbar-label {
color: #666;
font-size: 11px;
}
.view-toggle {
display: flex;
gap: 3px;
padding: 3px;
border: 1px solid #282828;
border-radius: 8px;
background: rgba(255,255,255,.015);
}
.view-toggle-button {
width: 34px;
height: 30px;
display: grid;
place-items: center;
border: 0;
border-radius: 5px;
background: transparent;
color: #666;
cursor: pointer;
transition: color .2s ease, background .2s ease, transform .2s ease;
}
.view-toggle-button:hover,
.view-toggle-button:focus-visible {
outline: none;
color: #ddd;
background: rgba(255,255,255,.04);
}
.view-toggle-button.active {
color: #111;
background: #ededed;
}
.grid-icon {
width: 13px;
height: 13px;
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 2px;
}
.grid-icon i {
display: block;
border: 1.5px solid currentColor;
border-radius: 1px;
}
.list-icon {
width: 14px;
display: grid;
gap: 2.5px;
}
.list-icon i {
display: block;
height: 1.5px;
border-radius: 2px;
background: currentColor;
}
/* Compact project list */
#all-projects[data-view="list"] {
display: block;
}
#all-projects[data-view="list"] .project-card {
min-height: 0;
width: 100%;
padding: 20px 22px;
margin-bottom: 10px;
display: grid;
grid-template-columns: minmax(0, 1.25fr) minmax(280px, .75fr);
gap: 28px;
align-items: center;
border-radius: 11px;
}
#all-projects[data-view="list"] .project-card > div:first-child {
min-width: 0;
}
#all-projects[data-view="list"] .project-kicker {
display: none;
}
#all-projects[data-view="list"] .project-card h3 {
margin-top: 0;
font-size: 19px;
}
#all-projects[data-view="list"] .project-desc {
margin-top: 6px;
font-size: 13px;
line-height: 1.5;
}
#all-projects[data-view="list"] .project-card > div:last-child {
display: flex;
align-items: center;
justify-content: flex-end;
gap: 16px;
min-width: 0;
}
#all-projects[data-view="list"] .project-card .tags {
margin-top: 0;
justify-content: flex-end;
}
#all-projects[data-view="list"] .project-open {
flex: 0 0 auto;
margin-top: 0;
font-size: 0;
}
#all-projects[data-view="list"] .project-open::after {
content: "→";
font-size: 17px;
color: #aaa;
}
@media (max-width: 800px) {
body[data-page="home"] .hero {
min-height: auto !important;
padding: 72px 0 60px;
}
body[data-page="home"] .home-section {
padding: 52px 0 !important;
}
.projects-toolbar {
margin-bottom: -16px;
}
#all-projects[data-view="list"] .project-card {
grid-template-columns: 1fr;
gap: 15px;
}
#all-projects[data-view="list"] .project-card > div:last-child {
justify-content: space-between;
}
#all-projects[data-view="list"] .project-card .tags {
justify-content: flex-start;
}
}
/* =========================================================
V2.7 — ANIMATED GRID / LIST TOGGLE
========================================================= */
/*
Sliding selection indicator.
Works like the TR / EN language switch:
the white background physically slides between Grid and List.
*/
.view-toggle {
--view-toggle-x: 0px;
position: relative;
display: grid;
grid-template-columns: 34px 34px;
gap: 3px;
padding: 3px;
border: 1px solid #282828;
border-radius: 8px;
background: rgba(255, 255, 255, 0.015);
isolation: isolate;
transition:
border-color 0.22s ease,
background 0.22s ease,
box-shadow 0.22s ease;
}
/* Moving white selector */
.view-toggle::before {
content: "";
position: absolute;
top: 3px;
left: 3px;
width: 34px;
height: 30px;
border-radius: 5px;
background: #ededed;
transform: translate3d(var(--view-toggle-x), 0, 0);
transition:
transform 0.34s cubic-bezier(0.22, 1, 0.36, 1),
box-shadow 0.25s ease;
z-index: 0;
pointer-events: none;
}
/*
JS already adds .active to the selected button.
:has() lets CSS move the selector without changing HTML.
*/
.view-toggle:has(
.view-toggle-button[data-project-view="list"].active
) {
--view-toggle-x: 37px;
}
/* Buttons */
.view-toggle-button {
position: relative;
z-index: 1;
width: 34px;
height: 30px;
display: grid;
place-items: center;
padding: 0;
border: 0;
border-radius: 5px;
background: transparent !important;
color: #666;
cursor: pointer;
transition:
color 0.24s ease,
transform 0.24s cubic-bezier(0.22, 1, 0.36, 1);
}
/* Hover */
.view-toggle-button:hover {
color: #d7d7d7;
}
/* Selected icon */
.view-toggle-button.active {
color: #111;
background: transparent !important;
}
/* Small tactile interaction */
.view-toggle-button:active {
transform: scale(0.88);
}
/* Keyboard */
.view-toggle-button:focus-visible {
outline: none;
}
/* Entire control hover */
.view-toggle:hover {
border-color: #3d3d3d;
background: rgba(255, 255, 255, 0.025);
box-shadow:
0 8px 28px rgba(0, 0, 0, 0.18);
}
/* Slight highlight on moving selector */
.view-toggle:hover::before {
box-shadow:
0 3px 12px rgba(255, 255, 255, 0.08);
}
/* =========================================================
PROJECT VIEW TRANSITION STATES
script.js will toggle these classes in the next step.
========================================================= */
/*
Normal project cards get a smooth visual transition.
We intentionally do NOT animate width / height directly.
That would be much heavier and can cause layout stutter.
*/
#all-projects .project-card {
transition:
opacity 0.22s ease,
transform 0.28s cubic-bezier(0.22, 1, 0.36, 1),
border-color 0.24s ease,
background 0.24s ease,
box-shadow 0.24s ease;
}
/*
STEP 1
Cards gently disappear before layout changes.
*/
#all-projects.view-changing-out .project-card {
opacity: 0;
transform:
perspective(950px)
translateY(7px)
scale(0.975) !important;
pointer-events: none;
}
/*
STEP 2
JS changes Grid <-> List while cards are invisible.
They start the new layout slightly displaced.
*/
#all-projects.view-changing-in .project-card {
opacity: 0;
transform:
perspective(950px)
translateY(-6px)
scale(0.985) !important;
}
/*
Normal state after animation.
*/
#all-projects:not(.view-changing-out):not(.view-changing-in)
.project-card {
opacity: 1;
}
/* =========================================================
LIST MODE — TRANSITION POLISH
========================================================= */
#all-projects[data-view="list"] .project-card {
transition:
opacity 0.22s ease,
transform 0.28s cubic-bezier(0.22, 1, 0.36, 1),
border-color 0.24s ease,
background 0.24s ease,
box-shadow 0.24s ease;
}
/*
Preserve the cursor spotlight in list mode.
*/
#all-projects[data-view="list"] .project-card:hover {
border-color: rgba(229, 72, 77, 0.38);
background: rgba(255, 255, 255, 0.027);
box-shadow:
0 14px 45px rgba(0, 0, 0, 0.18);
}
/* =========================================================
ICON MICRO-ANIMATION
========================================================= */
.grid-icon,
.list-icon {
transition:
transform 0.3s cubic-bezier(0.22, 1, 0.36, 1),
opacity 0.22s ease;
}
/* Active Grid icon */
.view-toggle-button[data-project-view="grid"].active
.grid-icon {
transform: scale(1.06);
}
/* Active List icon */
.view-toggle-button[data-project-view="list"].active
.list-icon {
transform: scale(1.06);
}
/*
Give the icon we're leaving a very small compression.
*/
.view-toggle-button:not(.active) .grid-icon,
.view-toggle-button:not(.active) .list-icon {
transform: scale(0.92);
opacity: 0.72;
}
/* =========================================================
MOBILE
========================================================= */
@media (max-width: 800px) {
.view-toggle {
grid-template-columns: 34px 34px;
}
}
/* =========================================================
REDUCED MOTION
========================================================= */
@media (prefers-reduced-motion: reduce) {
.view-toggle::before,
.view-toggle-button,
.grid-icon,
.list-icon,
#all-projects .project-card {
transition-duration: 0.01ms !important;
}
#all-projects.view-changing-out .project-card,
#all-projects.view-changing-in .project-card {
transform: none !important;
}
}