body.winter-mode .coin-front {
opacity: 0;
animation: none;
}

body.winter-mode .coin-back {
opacity: 1;
transform: scale(1);
animation: none;
}

body.winter-mode .tool-tags span {
background: rgba(224, 247, 255, 0.10);
border-color: rgba(224, 247, 255, 0.22);
color: #f8fdff;
}

body.winter-mode {
--bg: #071827;
--card: rgba(220, 245, 255, 0.09);
--blue: #7dd3fc;
--cyan: #e0f7ff;
--text: #f8fdff;
--muted: #bfd7e8;
--border: rgba(224, 247, 255, 0.18);

/* --particle: rgba(180, 235, 255, 0.95);
--particle-line: 180, 235, 255;
--particle-mouse: rgba(224, 247, 255, 0.42); */
--particle: rgba(245, 253, 255, 0.95); /* salju putih */
--particle-line: 245, 253, 255;
--particle-mouse: rgba(224, 247, 255, 0.42);
--profile-photo: url("/assets/img/foto-rahman-winter-display.webp");
--profile-photo-position: center center;
}

body.winter-mode {
background:
radial-gradient(circle at top right, rgba(125, 211, 252, 0.22), transparent 34%),
radial-gradient(circle at bottom left, rgba(224, 247, 255, 0.13), transparent 32%),
linear-gradient(135deg, #06111f, #0d2538 55%, #102f45);
}

body.winter-mode header {
background: rgba(7, 24, 39, 0.72);
border-bottom-color: rgba(224, 247, 255, 0.16);
}

body.winter-mode .logo {
color: #f8fdff;
}

body.winter-mode nav a {
color: #bfd7e8;
}

body.winter-mode nav a:hover {
color: #e0f7ff;
}

body.winter-mode .hero h1 span {
background: linear-gradient(90deg, #7dd3fc, #e0f7ff);
background-clip: text;
-webkit-background-clip: text;
color: transparent;
-webkit-text-fill-color: transparent;
}

body.winter-mode .badge {
background: rgba(224, 247, 255, 0.08);
color: #e0f7ff;
border-color: rgba(224, 247, 255, 0.22);
}

body.winter-mode .btn {
color: #f8fdff;
background: rgba(224, 247, 255, 0.06);
border-color: rgba(224, 247, 255, 0.18);
}

body.winter-mode .btn.primary {
color: #06111f;
background: linear-gradient(135deg, #7dd3fc, #e0f7ff);
box-shadow: 0 0 25px rgba(125, 211, 252, 0.35);
}

body.winter-mode .hero-card,
body.winter-mode .contact-box {
background: rgba(224, 247, 255, 0.045);
border-color: rgba(224, 247, 255, 0.20);
box-shadow:
inset 0 0 35px rgba(224, 247, 255, 0.035),
0 0 35px rgba(125, 211, 252, 0.14);
}

body.winter-mode .hero-card::before {
border-color: rgba(224, 247, 255, 0.16);
}

body.winter-mode .hero-card::after {
background: linear-gradient(
90deg,
transparent,
rgba(224, 247, 255, 0.13),
transparent
);
}

body.winter-mode .profile-frame {
background: linear-gradient(135deg, #7dd3fc, #e0f7ff);
box-shadow:
0 0 18px rgba(224, 247, 255, 0.5),
0 0 45px rgba(125, 211, 252, 0.28);
}

body.winter-mode .profile-frame::before {
border-color: rgba(224, 247, 255, 0.26);
}

body.winter-mode .profile-frame::after {
border-color: rgba(125, 211, 252, 0.18);
}

body.winter-mode .coin-face {
background: #071827;
}

body.winter-mode .coin-front {
color: #e0f7ff;
background: radial-gradient(circle, #16364d, #071827 72%);
}

body.winter-mode .card {
background: rgba(224, 247, 255, 0.075);
border-color: rgba(224, 247, 255, 0.16);
}

body.winter-mode .card:hover {
border-color: rgba(224, 247, 255, 0.42);
box-shadow: 0 0 30px rgba(125, 211, 252, 0.16);
}

body.winter-mode .card i,
body.winter-mode .title span,
body.winter-mode .project-img i {
color: #e0f7ff;
}

body.winter-mode .project-img {
background: linear-gradient(135deg, rgba(125, 211, 252, 0.38), rgba(224, 247, 255, 0.10));
border: 1px solid rgba(224, 247, 255, 0.18);
}

body.winter-mode .skill {
background: rgba(224, 247, 255, 0.10);
border: 1px solid rgba(224, 247, 255, 0.22);
color: #f8fdff;
}

body.winter-mode .socials a,
body.winter-mode .theme-toggle {
color: #e0f7ff;
background: rgba(224, 247, 255, 0.08);
border-color: rgba(224, 247, 255, 0.18);
}

body.winter-mode footer {
background: rgba(7, 24, 39, 0.45);
}

body.winter-mode header {
box-shadow:
0 18px 52px rgba(0, 0, 0, 0.22),
inset 0 -1px 0 rgba(224, 247, 255, 0.12);
backdrop-filter: blur(18px) saturate(1.15);
-webkit-backdrop-filter: blur(18px) saturate(1.15);
}

body.winter-mode .hero h1,
body.winter-mode .title h2,
body.winter-mode .card h3 {
text-shadow:
0 1px 0 rgba(255, 255, 255, 0.32),
0 0 18px rgba(125, 211, 252, 0.22),
0 0 38px rgba(224, 247, 255, 0.10);
}

body.winter-mode .hero h1 span,
body.winter-mode .title h2 {
background: linear-gradient(180deg, #ffffff 0%, #dff8ff 28%, #7dd3fc 68%, #e8fbff 100%);
background-clip: text;
-webkit-background-clip: text;
color: transparent;
-webkit-text-fill-color: transparent;
filter: drop-shadow(0 0 14px rgba(125, 211, 252, 0.22));
}

body.winter-mode .title span,
body.winter-mode .badge {
position: relative;
overflow: hidden;
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.22),
0 0 22px rgba(125, 211, 252, 0.10);
}

body.winter-mode .title span::after,
body.winter-mode .badge::after {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(105deg, transparent 0 34%, rgba(255, 255, 255, 0.28) 45%, transparent 56% 100%);
transform: translateX(-120%);
animation: winterIceGlint 4.8s ease-in-out infinite;
pointer-events: none;
}

body.winter-mode .hero-card,
body.winter-mode .card,
body.winter-mode .contact-box,
body.winter-mode .tools-source {
position: relative;
overflow: hidden;
background:
linear-gradient(145deg, rgba(224, 247, 255, 0.12), rgba(125, 211, 252, 0.045)),
rgba(7, 24, 39, 0.38);
border-color: rgba(224, 247, 255, 0.24);
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.18),
inset 0 -24px 48px rgba(125, 211, 252, 0.035),
0 22px 70px rgba(0, 0, 0, 0.18),
0 0 34px rgba(125, 211, 252, 0.10);
backdrop-filter: blur(18px) saturate(1.18);
-webkit-backdrop-filter: blur(18px) saturate(1.18);
}

body.winter-mode .hero-card::before,
body.winter-mode .card::before,
body.winter-mode .contact-box::before,
body.winter-mode .tools-source::before {
content: "";
position: absolute;
inset: 0;
border-radius: inherit;
background:
radial-gradient(circle at 18% 12%, rgba(255, 255, 255, 0.32), transparent 18%),
linear-gradient(130deg, rgba(255, 255, 255, 0.20), transparent 22% 56%, rgba(125, 211, 252, 0.12)),
repeating-linear-gradient(115deg, rgba(255, 255, 255, 0.075) 0 1px, transparent 1px 18px),
repeating-linear-gradient(25deg, rgba(224, 247, 255, 0.055) 0 1px, transparent 1px 24px);
opacity: .72;
pointer-events: none;
}

body.winter-mode .card::after,
body.winter-mode .contact-box::after {
content: "";
position: absolute;
left: -4px;
right: -4px;
top: -17px;
height: 82px;
z-index: 2;
border: 0;
border-radius: 26px 26px 0 0;
background-image: var(--winter-snow-cap, url("/assets/img/winter/snow-cap-soft.svg"));
background-repeat: no-repeat;
background-position: top center;
background-size: 100% 100%;
filter:
drop-shadow(0 12px 12px rgba(2, 10, 18, 0.14))
drop-shadow(0 0 12px rgba(224, 247, 255, 0.18));
opacity: .98;
pointer-events: none;
}

body.winter-mode .card > *,
body.winter-mode .contact-box > *,
body.winter-mode .tools-source > * {
position: relative;
z-index: 3;
}

body.winter-mode .card,
body.winter-mode .contact-box {
padding-top: 58px;
}

body.winter-mode .tool-card {
padding-top: 62px;
}

body.winter-mode .card:nth-child(2n),
body.winter-mode .tool-card:nth-child(2n) {
--winter-snow-cap: url("/assets/img/winter/snow-cap-ridge.svg");
}

body.winter-mode .card:nth-child(3n),
body.winter-mode .tool-card:nth-child(3n) {
--winter-snow-cap: url("/assets/img/winter/snow-cap-soft.svg");
}

body.winter-mode .card:hover,
body.winter-mode .contact-box:hover,
body.winter-mode .tools-source:hover {
border-color: rgba(224, 247, 255, 0.52);
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.28),
inset 0 -28px 56px rgba(125, 211, 252, 0.055),
0 26px 78px rgba(0, 0, 0, 0.20),
0 0 46px rgba(125, 211, 252, 0.20);
}

body.winter-mode .project-img,
body.winter-mode .about-photo,
body.winter-mode .skill,
body.winter-mode .tool-tags span {
position: relative;
overflow: hidden;
background:
linear-gradient(145deg, rgba(224, 247, 255, 0.16), rgba(125, 211, 252, 0.07)),
rgba(7, 24, 39, 0.30);
border-color: rgba(224, 247, 255, 0.28);
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.18),
0 12px 30px rgba(0, 0, 0, 0.12);
}

body.winter-mode .project-img::after,
body.winter-mode .about-photo::after,
body.winter-mode .skill::after,
body.winter-mode .tool-tags span::after {
content: "";
position: absolute;
inset: 0;
background:
linear-gradient(135deg, rgba(255, 255, 255, 0.22), transparent 34%),
repeating-linear-gradient(100deg, rgba(255, 255, 255, 0.08) 0 1px, transparent 1px 14px);
opacity: .56;
pointer-events: none;
}

body.winter-mode .btn {
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.16),
0 12px 28px rgba(0, 0, 0, 0.12);
}

body.winter-mode .btn:hover,
body.winter-mode .socials a:hover,
body.winter-mode .theme-toggle:hover {
border-color: rgba(224, 247, 255, 0.46);
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.24),
0 0 30px rgba(125, 211, 252, 0.22);
}

body.winter-mode {
  --theme-menu-bg: rgba(7, 24, 39, 0.92);
  --theme-menu-hover: rgba(224, 247, 255, 0.10);
  --theme-menu-active: rgba(125, 211, 252, 0.15);
}

body.winter-mode .coin-back {
background: var(--profile-photo) var(--profile-photo-position) / cover no-repeat;
}