/* ==========================================================
   BASE / DARK THEME
   ========================================================== */
* { box-sizing: border-box; margin: 0; padding: 0; }

html {
    overflow-x: hidden;
    /* Voorkomt dat mobiele WebKit-browsers (Safari/Chrome op iPhone)
       tekst automatisch een fractie vergroten na bepaalde interacties
       (bv. na de login-redirect). Die automatische "text auto-sizing"
       maakt de pagina net iets breder dan het scherm, wat aanvoelt als
       "niet helemaal uitgezoomd" en een randje rechts kan afsnijden. */
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

body {
    background-color: #121212;
    color: #e6e6e6;
    font-family: "Segoe UI", Arial, sans-serif;
    line-height: 1.6;
    overflow-x: hidden;
}

.accent { color: #4dd0e1; }

.home-icon {
    font-size: 3rem;   /* maak groter */
    line-height: 1;
}

/* ==========================================================
   HERO
   ========================================================== */
.hero {
    background: linear-gradient(135deg, #6a11cb 0%, #2575fc 50%, #00c6a9 100%);
    border-radius: 24px 0px 24px 0px;
    color: #fff;
    padding: 3rem 1.5rem 2.5rem;
    text-align: right;
    max-width: 800px;
    margin-top: 100px;
}

.hello {
    font-size: 3.5rem;
}

.accent {
    font-size: 3.5rem;
}

.system-title {
    text-align: right;
    font-size: 1.5rem;
}

.hero .accent { color: #ffe066; }
.hero h1 { font-size: 2.5rem; margin-bottom: 0.5rem; }

/* ==========================================================
   NAVBAR
   ========================================================== */
.navbar {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    max-width: 800px;
    margin: 1rem auto 0;
    padding: 1rem 1.5rem;
    background-color: #1a1a1a;
    border: 1px solid #2a2a2a;
    border-radius: 999px;
}

.logo { font-weight: bold; font-size: 1.2rem; justify-self: start; }

.nav-links { list-style: none; display: flex; gap: 1.5rem; margin-top: 0; margin-left: 0; justify-self: center; }

.nav-links a {
    color: #e6e6e6;
    text-decoration: none;
    font-size: 1.2rem;
}

.nav-links a:hover { color: #4dd0e1; }

html.blocked-mode .nav-links a:hover {
    color: #ff2e63;
}

/* ==========================================================
   SECTIONS
   ========================================================== */
section {
    max-width: 800px;
    margin: 0 auto;
    padding: 3rem 1.5rem;
}

h2 {
    margin-bottom: 1rem;
    border-bottom: 2px solid #2a2a2a;
    padding-bottom: 0.3rem;
}

/* ==========================================================
   SKILLS
   ========================================================== */
.skills { max-width: 400px; }

.skill { margin: 15px 0; }

.skill span {
    font-size: 1.2rem;
    font-weight: 600;
    display: block;
    margin-bottom: 6px;
}

.bar {
    width: 100%;
    height: 10px;
    background: #333;
    border-radius: 5px;
    overflow: hidden;
}

.fill {
    height: 100%;
    background: #00aaff;
    border-radius: 5px;
}

.level-5 { width: 100%; }
.level-4 { width: 80%; }
.level-3 { width: 60%; }
.level-2 { width: 40%; }
.level-1 { width: 20%; }

/* ==========================================================
   HOBBIES
   ========================================================== */
.hobby-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 1.2rem;
}

.hobby-card {
    text-align: center;
    padding: 1.8rem 1rem;
    border-radius: 12px;
    color: #fff;
    text-decoration: none;
    display: block;
    transition: transform 0.15s ease;
}

.hobby-card:hover { transform: translateY(-4px); }

.hobby-icon { font-size: 2.5rem; margin-bottom: 0.5rem; }

.hobby-gaming { background: linear-gradient(135deg, #7f00ff, #e100ff); }
.hobby-extra  { background: linear-gradient(135deg, #43cea2, #185a9d); }

/* ==========================================================
   SLIDESHOW
   ========================================================== */
.slideshow {
    position: relative;
    background-color: #1a1a1a;
    border-radius: 10px;
    padding: 1.5rem;
    margin-top: 1.5rem;
    text-align: center;
    min-height: 280px;
}

.slide img,
.slide video {
    max-width: 100%;
    max-height: 320px;
    border-radius: 8px;
}

.slide-caption {
    margin-top: 0.8rem;
    font-weight: bold;
    color: #4dd0e1;
}

.slide-prev,
.slide-next {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background-color: rgba(255,255,255,0.1);
    color: #fff;
    border: none;
    font-size: 1.5rem;
    padding: 0.4rem 0.8rem;
    border-radius: 6px;
    cursor: pointer;
}

.slide-prev { left: 0.5rem; }
.slide-next { right: 0.5rem; }

.slide-prev:hover,
.slide-next:hover { background-color: rgba(255,255,255,0.25); }

/* ==========================================================
   PROJECTS
   ========================================================== */
.project-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 1.5rem;
    margin-top: 1rem;
}

.project-card {
    background-color: #1a1a1a;
    padding: 1.2rem;
    border-radius: 8px;
    border-top: 4px solid #4dd0e1;
}

.project-card img,
.project-card video {
    width: 100%;
    border-radius: 6px;
    margin-bottom: 0.8rem;
}

/* ==========================================================
   BUTTONS
   ========================================================== */
.btn {
    display: inline-block;
    margin-top: 1rem;
    padding: 0.7rem 1.4rem;
    background-color: #4dd0e1;
    color: #121212;
    text-decoration: none;
    font-weight: bold;
    border-radius: 6px;
    transition: background-color 0.2s ease;
}

.btn:hover { background-color: #26c6da; }

.btn-large { font-size: 1.1rem; padding: 1rem 2rem; }

/* ==========================================================
   ADOBE
   ========================================================== */
.adobe-section { text-align: center; padding-top: 4rem; }

.adobe-embed {
    position: relative;
    width: 100%;
    padding-top: 56.25%;
    margin-top: 1.5rem;
    border-radius: 8px;
    overflow: hidden;
    background-color: #1a1a1a;
}

.adobe-embed iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: none;
}

.fallback {
    margin-top: 1rem;
    font-size: 0.9rem;
    color: #aaa;
}

.fallback a { color: #4dd0e1; }

/* ==========================================================
   FOOTER
   ========================================================== */
.site-footer {
    text-align: center;
    padding: 1.5rem;
    color: #888;
    font-size: 0.85rem;
    border-top: 1px solid #2a2a2a;
}

/* ==========================================================
   LOGOUT BUTTON
   ========================================================== */
#hackLogoutBtn {
    margin-top: 1.4rem;
    padding: 1.3rem 2.8rem;
    background: transparent;
    border: 2px solid #333;
    border-radius: 10px;
    color: #777;
    font-size: 1.8rem;
    font-family: inherit;
    cursor: pointer;
    transition: border-color 0.2s ease, color 0.2s ease;
}

#hackLogoutBtn:hover {
    border-color: #4dd0e1;
    color: #4dd0e1;
}

html.blocked-mode #hackLogoutBtn:hover {
    border-color: #ff2e63;
    color: #ff2e63;
}


/* ==========================================================
   TIKTOK CARDS
   ========================================================== */
.tiktok-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 1.5rem;
    margin: 2rem 0;
}

.tiktok-card {
    display: block;
    text-decoration: none;
    color: inherit;
    border-radius: 12px;
    overflow: hidden;
    background: #111;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.tiktok-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.45);
}

.tiktok-card-thumb {
    position: relative;
    width: 100%;
    aspect-ratio: 9 / 16;
    background-size: cover;
    background-position: center;
    background-color: #222;
}

.tiktok-card-overlay {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.6) 0%, rgba(0, 0, 0, 0.1) 40%, transparent 100%);
    transition: background 0.2s ease;
}

.tiktok-card:hover .tiktok-card-overlay {
    background: rgba(0, 0, 0, 0.35);
}

.tiktok-play-icon {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.92);
    color: #111;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.35);
    transition: transform 0.2s ease, background 0.2s ease;
}

.tiktok-card:hover .tiktok-play-icon {
    transform: scale(1.08);
    background: #fff;
}

.tiktok-card-info {
    padding: 0.9rem 1rem;
}

.tiktok-card-author {
    font-weight: 700;
    font-size: 0.9rem;
    margin: 0 0 0.3rem;
    color: #fe2c55;
}

.tiktok-card-title {
    font-size: 0.85rem;
    color: #ddd;
    margin: 0 0 0.6rem;
    display: -webkit-box;
    overflow: hidden;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
}

.tiktok-card-cta {
    font-size: 0.8rem;
    font-weight: 600;
    color: #25f4ee;
}

/* ==========================================================
   HACK LOGIN OVERLAY — FINAL BUILD
   ========================================================== */

/* Overlay container */
#hackOverlay {
    position: absolute; /* was fixed - zie toelichting hieronder */
    inset: 0;
    z-index: 9999;
    display: flex;
    background: #050505;
    font-family: "Consolas", "Courier New", monospace;
    transition: opacity 0.4s ease;
    /* Los scrollbaar van het main panel: zo kun je bij een geopend
       mobiel toetsenbord alsnog naar het wachtwoordveld scrollen,
       zonder dat de site erachter meescrollt of even doorschemert. */
    overflow-y: auto;
    overflow-x: hidden;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    /* Overschrijft de touch-action: none van html.hack-lock hieronder,
       specifiek voor dit element, zodat verticaal scrollen hier wél mag. */
    touch-action: pan-y;
    padding: 2rem 0;
}

/* WAAROM position:absolute i.p.v. fixed:
   Zolang de overlay zichtbaar is, staat "html.hack-lock body" altijd op
   position:fixed (zie verderop) - dat maakt body zelf al de vastgezette
   laag t.o.v. het scherm, en een absoluut gepositioneerd kind daarvan
   (inset:0) bedekt daardoor nog steeds precies het hele scherm.
   position:fixed op de overlay ZELF gaf op iOS (ook Chrome-voor-iOS,
   want die draait ook op WebKit) een bekend bugpatroon: een geneste
   fixed-context met focusbare inputs erin raakt de synchronisatie kwijt
   tussen aanraakcoördinaten en waar de tekst/cursor getekend wordt
   zodra je met open toetsenbord van het ene naar het andere veld
   wisselt - precies het "cursor staat lager dan het veld"-symptoom. */

/* Als er al eerder is ingelogd (mode "normal" of "blocked"), zet het
   vroege inline-script in header.php de class "hack-resolved" op <html>
   nog voor de eerste paint. Zo verschijnt de overlay nooit zichtbaar,
   ook niet heel even bij een refresh. */
html.hack-resolved #hackOverlay {
    display: none;
}

/* Vaste, ruime extra scrolruimte onderaan de overlay, alleen actief
   zolang je in het gebruikersnaam- of wachtwoordveld zit. Dit vervangt
   de vorige aanpak waarbij de overlay-hoogte/padding LIVE werd
   herberekend op basis van visualViewport - dat gaf tijdens het
   wisselen tussen velden een korte flits van de hoofdpagina en een
   "springend" wachtwoordveld. Nu wordt de layout van de overlay maar
   op één moment aangepast (bij focus), niet continu.

   ALLEEN VOOR MOBIEL: op pc is er geen schermtoetsenbord dat het veld
   bedekt, dus is deze extra ruimte daar niet nodig - en zorgde 'm
   onnodig voor een zichtbare verspringing van het hele inlogscherm bij
   elke klik op een veld. Binnen een media query blijft #hackOverlay op
   grotere schermen dus gewoon volledig stil staan. */
@media (max-width: 768px) {
    #hackOverlay.keyboard-space {
        padding-bottom: 55vh;
    }
}

/* Zolang de overlay actief is (nog niet ingelogd), mag de pagina
   erachter niet scrollen - vooral belangrijk op mobiel, waar je anders
   met je vinger "door" de overlay heen de hoofdpagina kon scrollen. */
html.hack-lock,
html.hack-lock body {
    overflow: hidden;
    height: 100%;
    touch-action: none;
    overscroll-behavior: none;
}

/* overflow:hidden alleen is op mobiel (met name iOS Safari) niet
   betrouwbaar: de browser scrollt het document soms alsnog stiekem om
   een net-gefocust veld "in beeld" te brengen, ook al staat overflow op
   hidden. Dat kan precies de flits van de hoofdpagina + het verspringen
   van het wachtwoordveld veroorzaken. De bekende, betrouwbare oplossing
   is body ECHT fixeren zolang de overlay open is, zodat er structureel
   niets te scrollen valt op document-niveau - alle scrollen voor het
   toetsenbord gebeurt dan uitsluitend binnen #hackOverlay zelf. */
html.hack-lock body {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
}

/* Scanlines */
#hackOverlay::before {
    content: "";
    position: absolute;
    inset: 0;
    background: repeating-linear-gradient(
        to bottom,
        rgba(77, 208, 225, 0.05) 0px,
        rgba(77, 208, 225, 0.05) 1px,
        transparent 2px,
        transparent 4px
    );
    pointer-events: none;
}

/* Box */
#hackBox {
    position: relative;
    width: min(92vw, 640px);
    /* Zelf centreren i.p.v. via align-items/justify-content op de ouder:
       dat laatste snijdt anders het bovenste stuk van de box af zodra
       de box door een overflowende overlay (bv. toetsenbord open) heen
       gescrolld moet worden. */
    margin: auto;
    padding: 3rem 2.5rem;
    background: rgba(13, 13, 13, 0.9);
    border: 1px solid #4dd0e1;
    border-radius: 14px;
    box-shadow: 0 0 80px rgba(77, 208, 225, 0.25);
    color: #e6e6e6;
}

/* Inputs */
#hackBox input {
    width: 100%;
    padding: 0.75rem 1rem;
    background: #1a1a1a;
    border: 1px solid #2a2a2a;
    border-radius: 6px;
    color: #e6e6e6;
    font-family: inherit;
    font-size: 1.1rem;
    line-height: normal; /* was eerst 1.1 (te krap), toen 1.5 (te ruim, gaf een "dode" zone onderin het veld waar de cursor fout terechtkwam) */
}

#hackBox input:focus {
    outline: none;
    border-color: #4dd0e1;
}

/* Button */
#hackBox button {
    width: 100%;
    margin-top: 1.6rem;
    padding: 1rem;
    background: #4dd0e1;
    color: #0d0d0d;
    border: none;
    border-radius: 6px;
    font-weight: bold;
    font-size: 1.05rem;
    font-family: inherit;
    cursor: pointer;
}

#hackBox button:hover { background: #26c6da; }

/* Terminal */
#hackTerminal {
    white-space: pre-wrap;
    font-size: 1.2rem;
    color: #ff4d4d;
    min-height: 180px;
}

/* Success */
.hack-success {
    color: #4dd0e1;
    font-size: 1.6rem;
    font-weight: bold;
    text-align: center;
}

.hack-success-sub {
    color: #aaa;
    font-size: 1rem;
    text-align: center;
    margin-top: 0.6rem;
}

/* Glitch */
.hack-glitch {
    animation: blockedAlarm 0.6s ease-in-out infinite;
}

@keyframes blockedAlarm {
    0%   { background-color: #0d0808; }
    50%  { background-color: #200606; }
    100% { background-color: #0d0808; }
}

/* ==========================================================
   BLOCKED MODE — FINAL BUILD
   ========================================================== */

/* Klikken NIET blokkeren */
html.blocked-mode,
html.blocked-mode * {
    pointer-events: auto !important;
}

/* FIX: de regel hierboven overschreef ook het onzichtbare #pageLoadCover
   laadscherm, dat normaal na het laden pointer-events:none krijgt via
   JavaScript. Daardoor bleef dat onzichtbare scherm in blocked-mode altijd
   klikbaar/bovenop liggen en ving het ELKE klik op de site af - waardoor
   je in blocked-mode helemaal nergens meer op kon klikken. Deze regel
   heeft een hogere specificiteit (ID-selector) dan de universele *-regel
   hierboven en wint daardoor, zodat het laadscherm ook in blocked-mode
   weer gewoon "doorlaat" zodra het is weggefade. */
html.blocked-mode #pageLoadCover {
    pointer-events: none !important;
}

html.blocked-mode body {
    background-color: #0a0505;
}

html.blocked-mode .navbar {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    max-width: 800px;
    margin: 3.5rem auto 0;
    padding: 1rem 1.5rem;
    background-color: #150808;
    border: 1px solid #3a0f0f;
    border-radius: 999px;
    position: relative;
}

html.blocked-mode .logo {
    font-weight: bold;
    font-size: 1.2rem;
    justify-self: start;
}

html.blocked-mode .nav-links {
    list-style: none;
    display: flex;
    gap: 1.5rem;
    margin-left: 0;
    margin-top: 0;
    justify-self: center;
}

html.blocked-mode .nav-links a {
    color: #e6e6e6;
    text-decoration: none;
    font-size: 2rem;
}

html.blocked-mode .hero {
    background: linear-gradient(135deg, #2b0000 0%, #1a0022 50%, #001a15 100%);
}

html.blocked-mode h1,
html.blocked-mode h2 {
    color: #ff2e63;
    text-shadow: 0 0 12px rgba(255, 46, 99, 0.65);
    animation: blockedPulse 5.5s ease-in-out infinite;
}

html.blocked-mode section {
    position: relative;
    padding-right: 1.6rem;
}

html.blocked-mode section.hero:after {
    content: "";
    position: absolute;
    top: 0.15rem;
    bottom: 0.15rem;
    /* Was -15px: dat plaatst het balkje BUITEN de sectie-box. Op een
       breed scherm viel dat nog binnen de lege ruimte naast de
       gecentreerde 800px-inhoud, maar op mobiel vult de sectie de hele
       schermbreedte, dus schoof het balkje volledig van het scherm af.
       Met een kleine positieve waarde blijft het altijd binnen beeld,
       op elk schermformaat. */
    right: -10px;
    width: 4px;
    border-radius: 999px;
    background: #ff2e63;
    box-shadow: 0 0 14px rgba(255, 46, 99, 0.6);
}

html.blocked-mode section.skills:after {
    content: "";
    position: absolute;
    top: 3.9rem;
    bottom: 3.4rem;
    right: 0px;
    width: 4px;
    border-radius: 999px;
    background: #ff2e63;
    box-shadow: 0 0 14px rgba(255, 46, 99, 0.6);
}

html.blocked-mode section.projects:after {
    content: "";
    position: absolute;
    top: 3.0rem;
    bottom: 3.3rem;
    left: 0;
    width: 4px;
    border-radius: 999px;
    background: #ff2e63;
    box-shadow: 0 0 14px rgba(255, 46, 99, 0.6);
}

html.blocked-mode section.Myfreetime:after {
    content: "";
    position: absolute;
    top: 3rem;
    bottom: 2.7rem;
    left: 0;
    width: 4px;
    border-radius: 999px;
    background: #ff2e63;
    box-shadow: 0 0 14px rgba(255, 46, 99, 0.6);
}

html.blocked-mode section.about:after {
    content: "";
    position: absolute;
    top: 1.5rem;
    bottom: 1.5rem;
    left: 0;
    width: 4px;
    border-radius: 999px;
    background: #ff2e63;
    box-shadow: 0 0 14px rgba(255, 46, 99, 0.6);
}

html.blocked-mode .skill span,
html.blocked-mode .tiktok-card-cta {
    color: #ff2e63;
}

html.blocked-mode .fill,
html.blocked-mode .btn {
    background: #ff2e63;
    color: #0a0505;
}

html.blocked-mode .btn:hover {
    background: #ff5c85;
}

html.blocked-mode .hobby-gaming { background: linear-gradient(135deg, #4a0022, #7a0033); }
html.blocked-mode .hobby-extra  { background: linear-gradient(135deg, #063a2e, #012b21); }

html.blocked-mode .site-footer p::after {
    content: "     //\1F512  SYSTEEM GEBLOKKEERD";
    color: #ff2e63;
}

@keyframes blockedPulse {
    0%, 100% { text-shadow: 0 0 11px rgba(255, 46, 99, 0.6); }
    50% { text-shadow: 0 0 13px rgba(255, 46, 99, 0.7); }
}

/* ==========================================================
   UNLOCKED MODE (goede login) — blauwe afters, zelfde opzet
   als BLOCKED MODE hierboven, alleen in blauw
   ========================================================== */

html.unlocked-mode .navbar {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    max-width: 800px;
    margin: 3.5rem auto 0;
    padding: 1rem 1.5rem;
    background-color: #081015;
    border: 1px solid #0f2a3a;
    border-radius: 999px;
    position: relative;
}

html.unlocked-mode .logo {
    font-weight: bold;
    font-size: 1.2rem;
    justify-self: start;
}

html.unlocked-mode .nav-links {
    list-style: none;
    display: flex;
    gap: 1.5rem;
    margin-left: 0;
    margin-top: 0;
    justify-self: center;
}

html.unlocked-mode .nav-links a {
    color: #e6e6e6;
    text-decoration: none;
    font-size: 2rem;
}

html.unlocked-mode .nav-links a:hover {
    color: #4dd0e1;
}

html.unlocked-mode section.hero:after {
    content: "";
    position: absolute;
    top: 0.15rem;
    bottom: 0.15rem;
    right: -10px;
    width: 4px;
    border-radius: 999px;
    background: #4dd0e1;
    box-shadow: 0 0 14px rgba(77, 208, 225, 0.6);
}

html.unlocked-mode section.skills:after {
    content: "";
    position: absolute;
    top: 3.9rem;
    bottom: 3.4rem;
    right: 0px;
    width: 4px;
    border-radius: 999px;
    background: #4dd0e1;
    box-shadow: 0 0 14px rgba(77, 208, 225, 0.6);
}

html.unlocked-mode section.projects:after {
    content: "";
    position: absolute;
    top: 3.0rem;
    bottom: 3.3rem;
    left: 0;
    width: 4px;
    border-radius: 999px;
    background: #4dd0e1;
    box-shadow: 0 0 14px rgba(77, 208, 225, 0.6);
}

html.unlocked-mode section.Myfreetime:after {
    content: "";
    position: absolute;
    top: 3rem;
    bottom: 2.7rem;
    left: 0;
    width: 4px;
    border-radius: 999px;
    background: #4dd0e1;
    box-shadow: 0 0 14px rgba(77, 208, 225, 0.6);
}

html.unlocked-mode section.about:after {
    content: "";
    position: absolute;
    top: 1.5rem;
    bottom: 1.5rem;
    left: 0;
    width: 4px;
    border-radius: 999px;
    background: #4dd0e1;
    box-shadow: 0 0 14px rgba(77, 208, 225, 0.6);
}

html.unlocked-mode section {
    position: relative;
    padding-right: 1.6rem;
}

/* ==========================================================
   RESPONSIVE
   ========================================================== */
@media (max-width: 600px) {
    .navbar {
        display: flex;
        flex-direction: column;
        gap: 0.8rem;
        padding: 1rem;
        text-align: center;
    }

    .nav-links {
        flex-wrap: wrap;
        justify-content: center;
        gap: 1rem 1.2rem;
    }

    html.blocked-mode .nav-links,
    html.unlocked-mode .nav-links {
        margin-left: 0;
        margin-top: 0;
    }

    .hero {
        padding: 3rem 1rem 2.5rem;
        /* Geeft ruimte rechts voor het rode/blauwe accent-streepje
           (section.hero:after). Zonder deze marge loopt de hero-box
           precies tot de schermrand door, en is er letterlijk geen
           plek om het streepje op bv. -5px te zetten zonder dat het
           van het scherm afvalt. */
        margin-right: 12px;
    }

    .hero h1 {
        font-size: 1.9rem;
    }

    .hero p {
        font-size: 1.1rem !important;
    }

    section {
        padding: 2rem 1rem;
    }

    .skills {
        max-width: 100%;
    }

    .hobby-grid {
        grid-template-columns: 1fr;
    }

    .tiktok-grid {
        grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
        gap: 1rem;
    }

    .slide img,
    .slide video {
        max-height: 220px;
    }

    .slide-prev,
    .slide-next {
        font-size: 1.2rem;
        padding: 0.3rem 0.6rem;
    }

    .btn-large {
        font-size: 1rem;
        padding: 0.8rem 1.5rem;
    }

    #hackBox {
        padding: 1.4rem 1.2rem;
    }
}

.hack-prompt {
    color: crimson;
    top: -1.5rem;
    position: relative;
    font-size: 1.25rem;
}

.hack-hint {
    top: 1rem;
    position: relative;
    right: -0.2rem;
}

/* Voorheen stonden hier losse "top" offsets per label/input om de
   afstanden met de hand recht te trekken. Dat zorgde ervoor dat het
   wachtwoordveld letterlijk een paar pixels verschoven stond t.o.v. zijn
   label (en dus t.o.v. het gebruikersnaamveld erboven), wat extra
   opviel zodra #hackBox door de toetsenbord-fix hierboven meebewoog.
   Nu gewoon consistente marges, geen relative-offsets meer nodig. */
.User,
.Password {
    display: block;
    margin-bottom: 0.4rem;
}

.hack-inputU {
    margin-bottom: 1.1rem;
}

/* ==========================================================
   HACK LOGIN OVERLAY — GROTE SCHERMEN (QHD / 4K)
   De box is standaard begrensd op max. 640px breed, wat op een
   groot/4K-scherm klein en verloren in het midden oogt. Vanaf hier
   schaalt de box (en de tekst erin) proportioneel mee omhoog.
   ========================================================== */
@media (min-width: 1600px) {
    #hackBox {
        width: min(58vw, 1200px);
        padding: 4.5rem 4rem;
    }

    .hack-prompt {
        font-size: 2.1rem;
    }

    #hackBox input {
        font-size: 1.6rem;
        padding: 1.4rem 1.5rem;
    }

    #hackBox button {
        font-size: 1.6rem;
        padding: 1.5rem;
    }

    #hackTerminal {
        font-size: 1.9rem;
        min-height: 280px;
    }

    .hack-hint {
        font-size: 1.35rem;
    }

    .User, .Password {
        font-size: 1.3rem;
    }
}

@media (min-width: 2560px) {
    #hackBox {
        width: min(50vw, 1500px);
        padding: 5.5rem 5rem;
        border-radius: 24px;
    }

    .hack-prompt {
        font-size: 2.6rem;
    }

    #hackBox input {
        font-size: 2rem;
        padding: 1.7rem 1.8rem;
    }

    #hackBox button {
        font-size: 2rem;
        padding: 1.8rem;
    }

    #hackTerminal {
        font-size: 2.4rem;
        min-height: 340px;
    }

    .hack-hint {
        font-size: 1.6rem;
    }

    .User, .Password {
        font-size: 1.6rem;
    }
}

/* ==========================================================
   STATUS BADGE — systeemstatus rechtsboven, overal zichtbaar
   ========================================================== */
.status-badge {
    /* Was "static": daardoor stond de badge gewoon bovenaan de
       document-flow (vóór de navbar/hero) en scrolde hij meteen weg
       zodra je ook maar iets naar beneden scrolde. Als de pagina dan
       niet precies op scrollY 0 stond (bv. na de hack-lock overlay,
       of gewoon omdat je al iets gescrolld had), was de badge nergens
       te zien - je kon niet "verder" scrollen om hem alsnog in beeld
       te krijgen, want hij zat vast aan een positie in de pagina-inhoud
       zelf i.p.v. aan het scherm.
       "fixed" lost dit op: de badge hangt nu aan de viewport vast,
       rechtsboven, en blijft altijd zichtbaar - ongeacht scrollpositie
       of welke pagina je bekijkt. */
    position: fixed;
    top: 1.5rem;
    right: 1.5rem;
    z-index: 500;
    display: none;
    align-items: center;
    gap: 0.9rem;
    width: fit-content;
    max-width: calc(100vw - 3rem);
    padding: 1rem 1.6rem;
    background: rgba(13, 13, 13, 0.9);
    border: 1px solid #2a2a2a;
    border-radius: 999px;
    font-size: 1.05rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.35);
}

html.blocked-mode .status-badge,
html.unlocked-mode .status-badge {
    display: flex;
}

.status-dot {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    flex-shrink: 0;
}

/* Unlocked styling */
html.unlocked-mode .status-badge {
    border-color: #0f2a3a;
    box-shadow: 0 4px 20px rgba(77, 208, 225, 0.25);
}

html.unlocked-mode .status-dot {
    background: #4dd0e1;
    box-shadow: 0 0 8px rgba(77, 208, 225, 0.9);
    animation: statusPulseCyan 2.2s ease-in-out infinite;
}

html.unlocked-mode .status-text {
    color: #4dd0e1;
    font-size: 1.3rem;
    white-space: nowrap;
}

html.unlocked-mode .status-text::before {
    content: "TOEGANG VERLEEND";
}

/* Blocked styling */
html.blocked-mode .status-badge {
    border-color: #3a0f0f;
    box-shadow: 0 4px 20px rgba(255, 46, 99, 0.25);
}

html.blocked-mode .status-dot {
    background: #ff2e63;
    box-shadow: 0 0 8px rgba(255, 46, 99, 0.9);
    animation: statusPulseRed 1.4s ease-in-out infinite;
}

html.blocked-mode .status-text {
    color: #ff2e63;
    font-size: 1.3rem;
    white-space: nowrap;
}

html.blocked-mode .status-text::before {
    content: "SYSTEEM GEBLOKKEERD";
}

@keyframes statusPulseCyan {
    0%, 100% { transform: scale(1); box-shadow: 0 0 8px rgba(77, 208, 225, 0.9); }
    50% { transform: scale(1.3); box-shadow: 0 0 14px rgba(77, 208, 225, 1); }
}

@keyframes statusPulseRed {
    0%, 100% { transform: scale(1); box-shadow: 0 0 8px rgba(255, 46, 99, 0.9); }
    50% { transform: scale(1.12); box-shadow: 0 0 12px rgba(255, 46, 99, 0.95); }
}

@media (max-width: 600px) {
    /* De grote margin-top van de navbar in blocked/unlocked-mode
       (5.3rem / 3.5rem) was bedoeld om ruimte te maken onder de
       FIXED status-badge op desktop. Op telefoon staat de badge nu
       gewoon in de normale flow vóór de navbar (zie hierboven), dus
       die extra ruimte is daar niet meer nodig en gaf een te grote
       afstand tussen de badge en de navigatie. */
    html.blocked-mode .navbar,
    html.unlocked-mode .navbar {
        margin-top: 1rem;
    }
}

@media (max-width: 600px) {
    /* Op telefoon geen fixed badge: dat zweefde raar over de rest van
       de content heen tijdens het scrollen. Hier zet ik 'm terug in de
       normale document-flow, gewoon bovenaan de pagina - net als
       vroeger, maar dan met een duidelijke eigen regel/ruimte zodat
       hij nooit onder de rand van het scherm verdwijnt. */
    .status-badge {
        position: static;
        top: auto;
        right: auto;
        margin: 1rem auto 0 auto;
        padding: 0.6rem 1rem;
        gap: 0.5rem;
        max-width: calc(100% - 2rem);
        justify-content: center;
    }

    .status-dot {
        width: 11px;
        height: 11px;
    }

    .status-text {
        font-size: 0.8rem !important;
    }

    .hero {
        margin-top: 1.2rem;
    }
}

/* ==========================================================
   AMBIENT BACKGROUND — unlocked mode (spiegelbeeld van blocked)
   ========================================================== */
/* Extra glow op de hero-tekst wanneer ingelogd, zelfde opzet als blocked-mode */
html.unlocked-mode .hero h1,
html.unlocked-mode .hero .system-title {
    text-shadow: 0 0 10px rgba(77, 208, 225, 0.4);
    animation: unlockedPulse 2s ease-in-out infinite;
}

@keyframes unlockedPulse {
    0%, 100% { text-shadow: 0 0 10px rgba(77, 208, 225, 0.4); }
    50% { text-shadow: 0 0 32px rgba(77, 208, 225, 1); }
}

/* Zelfde rustige opzet voor de hero-tekst in blocked-mode. Deze regel is
   specifieker dan de algemene "html.blocked-mode h1, h2" regel hierboven,
   dus die wint hier - de hero-titel en de "System Engineer"-tekst krijgen
   hierdoor een eigen, subtielere glow i.p.v. de fellere sitebrede pulse. */
html.blocked-mode .hero h1,
html.blocked-mode .hero .system-title {
    text-shadow: 0 0 10px rgba(255, 46, 99, 0.4);
    animation: heroBlockedPulse 2s ease-in-out infinite;
}

@keyframes heroBlockedPulse {
    0%, 100% { text-shadow: 0 0 10px rgba(255, 46, 99, 0.4); }
    50% { text-shadow: 0 0 18px rgba(255, 46, 99, 0.7); }
}

/* Skills, tiktok cards en gallery iets laten meegloeien in beide modi */
html.blocked-mode .fill { box-shadow: 0 0 10px rgba(255, 46, 99, 0.55); }
html.unlocked-mode .fill { box-shadow: 0 0 10px rgba(77, 208, 225, 0.55); }

html.blocked-mode .tiktok-card,
html.blocked-mode .gallery-item {
    box-shadow: 0 4px 12px rgba(255, 46, 99, 0.15);
}
html.unlocked-mode .tiktok-card,
html.unlocked-mode .gallery-item {
    box-shadow: 0 4px 12px rgba(77, 208, 225, 0.15);
}

/* ==========================================================
   PC & DESK — PHOTO GALLERY
   ========================================================== */
.gallery-intro {
    max-width: 800px;
    margin: 0 auto;
    padding: 4rem 1.5rem 0;
}

.gallery-intro h1 {
    font-size: 2.2rem;
    margin-bottom: 0.5rem;
}

.gallery-intro p {
    color: #aaa;
}

.gallery-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 1.5rem;
    margin-top: 1.5rem;
}

.gallery-item {
    position: relative;
    border-radius: 12px;
    overflow: hidden;
    background: #1a1a1a;
    border: 1px solid #2a2a2a;
    cursor: pointer;
    aspect-ratio: 4 / 3;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.gallery-item:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.45);
}

.gallery-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.3s ease;
}

.gallery-item:hover img {
    transform: scale(1.06);
}

.gallery-item-caption {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 0.6rem 0.8rem;
    font-size: 1.5rem;
    font-weight: 600;
    color: #fff;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.75), transparent);
}

.gallery-item-placeholder {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 0.4rem;
    color: #555;
    font-size: 0.8rem;
    text-align: center;
    padding: 1rem;
}

.gallery-item-placeholder .ph-icon {
    font-size: 2rem;
}

/* Lightbox */
.lightbox {
    position: fixed;
    inset: 0;
    z-index: 2000;
    display: none;
    align-items: center;
    justify-content: center;
    background: rgba(5, 5, 5, 0.92);
    padding: 2rem;
}

.lightbox.active {
    display: flex;
}

.lightbox img {
    max-width: 90vw;
    max-height: 82vh;
    border-radius: 10px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.6);
}

.lightbox-caption {
    position: absolute;
    bottom: 2.5rem;
    left: 0;
    right: 0;
    text-align: center;
    color: #ddd;
    font-size: 1.9rem;
}

.lightbox-close,
.lightbox-prev,
.lightbox-next {
    position: absolute;
    background: rgba(255, 255, 255, 0.1);
    color: #fff;
    border: none;
    cursor: pointer;
    border-radius: 8px;
}

.lightbox-close:hover,
.lightbox-prev:hover,
.lightbox-next:hover {
    background: rgba(255, 255, 255, 0.25);
}

.lightbox-close {
    top: 1.2rem;
    right: 1.2rem;
    font-size: 1.4rem;
    padding: 0.4rem 0.9rem;
}

.lightbox-prev,
.lightbox-next {
    top: 50%;
    transform: translateY(-50%);
    font-size: 1.6rem;
    padding: 0.5rem 1rem;
}

.lightbox-prev { left: 1.2rem; }
.lightbox-next { right: 1.2rem; }

html.blocked-mode .gallery-item { border-color: #3a0f0f; }
html.blocked-mode .gallery-item:hover { box-shadow: 0 8px 20px rgba(255, 46, 99, 0.3); }
html.blocked-mode .lightbox-caption { color: #ff9db0; }

html.unlocked-mode .gallery-item { border-color: #0f2a3a; }
html.unlocked-mode .gallery-item:hover { box-shadow: 0 8px 20px rgba(77, 208, 225, 0.3); }
html.unlocked-mode .lightbox-caption { color: #9fe8f0; }

@media (max-width: 600px) {
    .gallery-grid {
        grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
        gap: 1rem;
    }
    .lightbox-prev, .lightbox-next {
        font-size: 1.2rem;
        padding: 0.4rem 0.7rem;
    }
}

/* ==========================================================
   AMBIENT BACKGROUND — subtiele, vloeiende gloed in dezelfde
   donkergrijze tint als de rest van de site
   ========================================================== */

/* Basislaag: bijna-egale donkere kleur + heel lichte vignet.
   Geen filter/blur hier, dus dit rendert altijd scherp en zonder banding. */
.ambient-bg {
    position: fixed;
    inset: 0;
    z-index: -1;
    overflow: hidden;
    pointer-events: none;
    background:
        radial-gradient(ellipse 100% 80% at 50% 0%, rgba(255, 255, 255, 0.025), transparent 65%),
        radial-gradient(circle at 50% 50%, transparent 40%, rgba(0, 0, 0, 0.35) 100%),
        #121212;
}

/* Twee zachte lichtvlekken. Simpele 2-stop gradient (geen tussenstappen
   die als ringen zichtbaar kunnen worden) + een vaste blur. De animatie
   verplaatst de vlekken alleen (translate), en verandert NOOIT hun grootte
   (geen scale) — daardoor hoeft de browser de vervaagde afbeelding maar
   1x te tekenen en steeds te verschuiven, in plaats van 'm bij elk frame
   op een andere grootte opnieuw te moeten vervagen. Dat laatste was de
   oorzaak van de slechte, korrelige kwaliteit. */
.ambient-bg::before,
.ambient-bg::after {
    content: "";
    position: absolute;
    border-radius: 50%;
    filter: none;
    will-change: transform;
}

.ambient-bg::before {
    width: 65vw;
    height: 65vw;
    max-width: 620px;
    max-height: 620px;
    top: -12%;
    left: -10%;
    background: radial-gradient(circle,
        rgba(170, 170, 185, 0.22) 0%,
        rgba(170, 170, 185, 0.176) 18%,
        rgba(170, 170, 185, 0.132) 32%,
        rgba(170, 170, 185, 0.093) 46%,
        rgba(170, 170, 185, 0.060) 58%,
        rgba(170, 170, 185, 0.033) 70%,
        rgba(170, 170, 185, 0.013) 82%,
        rgba(170, 170, 185, 0) 100%);
    animation: blobFloatA 30s ease-in-out infinite;
}

.ambient-bg::after {
    width: 60vw;
    height: 60vw;
    max-width: 540px;
    max-height: 540px;
    bottom: -12%;
    right: -8%;
    background: radial-gradient(circle,
        rgba(130, 130, 145, 0.21) 0%,
        rgba(130, 130, 145, 0.168) 18%,
        rgba(130, 130, 145, 0.126) 32%,
        rgba(130, 130, 145, 0.088) 46%,
        rgba(130, 130, 145, 0.057) 58%,
        rgba(130, 130, 145, 0.032) 70%,
        rgba(130, 130, 145, 0.013) 82%,
        rgba(130, 130, 145, 0) 100%);
    animation: blobFloatB 34s ease-in-out infinite;
}

@keyframes blobFloatA {
    0%, 100% { transform: translate(0, 0); }
    50%      { transform: translate(6vw, 5vh); }
}

@keyframes blobFloatB {
    0%, 100% { transform: translate(0, 0); }
    50%      { transform: translate(-6vw, -5vh); }
}

/* Kleur van de gloed volgt de systeemstatus — zelfde vorm en beweging,
   alleen de tint verschuift van neutraal grijs naar een vleugje rood/cyaan */
html.blocked-mode .ambient-bg {
    background:
        radial-gradient(circle at 18% 82%, rgba(190, 50, 60, 0.13), transparent 42%),
        radial-gradient(circle at 82% 18%, rgba(190, 50, 60, 0.11), transparent 42%),
        radial-gradient(circle at 50% 55%, rgba(160, 60, 65, 0.07), transparent 50%),
        radial-gradient(ellipse 100% 80% at 50% 0%, rgba(255, 255, 255, 0.02), transparent 65%),
        radial-gradient(circle at 50% 50%, transparent 40%, rgba(0, 0, 0, 0.4) 100%),
        #0d0b0b;
}

html.blocked-mode .ambient-bg::before {
    filter: blur(10px);
    background: radial-gradient(circle,
        rgba(150, 70, 75, 0.20) 0%,
        rgba(150, 70, 75, 0.16) 18%,
        rgba(150, 70, 75, 0.12) 32%,
        rgba(150, 70, 75, 0.084) 46%,
        rgba(150, 70, 75, 0.054) 58%,
        rgba(150, 70, 75, 0.030) 70%,
        rgba(150, 70, 75, 0.012) 82%,
        rgba(150, 70, 75, 0) 100%);
}

html.blocked-mode .ambient-bg::after {
    filter: blur(10px);
    background: radial-gradient(circle,
        rgba(160, 65, 70, 0.18) 0%,
        rgba(160, 65, 70, 0.144) 18%,
        rgba(160, 65, 70, 0.108) 32%,
        rgba(160, 65, 70, 0.076) 46%,
        rgba(160, 65, 70, 0.049) 58%,
        rgba(160, 65, 70, 0.027) 70%,
        rgba(160, 65, 70, 0.011) 82%,
        rgba(160, 65, 70, 0) 100%);
}

html.unlocked-mode .ambient-bg {
    background:
        radial-gradient(circle at 18% 82%, rgba(90, 130, 170, 0.13), transparent 42%),
        radial-gradient(circle at 82% 18%, rgba(90, 130, 170, 0.11), transparent 42%),
        radial-gradient(circle at 50% 55%, rgba(110, 145, 180, 0.07), transparent 50%),
        radial-gradient(ellipse 100% 80% at 50% 0%, rgba(255, 255, 255, 0.02), transparent 65%),
        radial-gradient(circle at 50% 50%, transparent 40%, rgba(0, 0, 0, 0.4) 100%),
        #0e1113;
}

html.unlocked-mode .ambient-bg::before {
    filter: blur(10px);
    background: radial-gradient(circle,
        rgba(140, 170, 200, 0.20) 0%,
        rgba(140, 170, 200, 0.16) 18%,
        rgba(140, 170, 200, 0.12) 32%,
        rgba(140, 170, 200, 0.084) 46%,
        rgba(140, 170, 200, 0.054) 58%,
        rgba(140, 170, 200, 0.030) 70%,
        rgba(140, 170, 200, 0.012) 82%,
        rgba(140, 170, 200, 0) 100%);
}

html.unlocked-mode .ambient-bg::after {
    filter: blur(10px);
    background: radial-gradient(circle,
        rgba(160, 185, 210, 0.18) 0%,
        rgba(160, 185, 210, 0.144) 18%,
        rgba(160, 185, 210, 0.108) 32%,
        rgba(160, 185, 210, 0.076) 46%,
        rgba(160, 185, 210, 0.049) 58%,
        rgba(160, 185, 210, 0.027) 70%,
        rgba(160, 185, 210, 0.011) 82%,
        rgba(160, 185, 210, 0) 100%);
}

@media (prefers-reduced-motion: reduce) {
    .ambient-bg::before,
    .ambient-bg::after {
        animation: none;
        filter: none;
    }
}

/* Zachte gloed achter de hero-box zelf, in dezelfde kleuren als de hero
   gradient, zodat de hero net iets meer "los" komt van de achtergrond */
.hero {
    position: relative;
    z-index: 1;
}

.hero-glow {
    position: absolute;
    top: -80px;
    right: -60px;
    width: 420px;
    height: 420px;
    background: radial-gradient(
    circle,
    rgba(125,125,135,0.18) 0%,
    rgba(125,125,135,0.10) 40%,
    rgba(125,125,135,0.04) 70%,
    transparent 100%
);
    filter: blur(60px);
    z-index: -1;
}

/* ==========================================================
   FIXED GAMING SLIDESHOW — volledig compatibel met slideshow.js
   ========================================================== */

/* Verwijder display:none gedrag van oude slideshow */
.gaming-slideshow .slide {
    display: block !important;
    position: absolute;
    inset: 0;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.35s ease;
    z-index: 1;
}

/* Actieve slide */
.gaming-slideshow .slide[style*="opacity: 1"] {
    position: relative !important;
    pointer-events: auto !important;
    z-index: 10 !important;
}

/* Video thumbnails moeten altijd renderen */
.gaming-slideshow .slide video {
    min-height: 1px;
    width: 100%;
    object-fit: cover;
    background: #000;
    pointer-events: none !important;
}

/* Zorg dat de <a> link klikbaar blijft maar niet boven de pijlen komt */
.highlight-link {
    position: relative !important;
    z-index: 5 !important;
}

/* Pijlen ALTIJD boven alles */
.gaming-slideshow .slide-prev,
.gaming-slideshow .slide-next {
    z-index: 9999 !important;
    position: absolute;
    cursor: pointer !important;
}