:root { color-scheme: dark; --ui-surface: #101c2ee8; --ui-text: #edf5ff; --ui-border: #accdf12b; --ui-accent: #67deee; --accent-deep: #087d89; --accent-bright: #83ece0; --gold: #67deee; --aqua: #83ece0; }
body#page-top { padding-top: 22px !important; }
.site-preferences { position: relative; z-index: 100; display: flex; align-items: center; gap: 10px; width: fit-content; padding: 6px 8px 6px 13px; max-width: calc(100% - 32px); margin: 0 clamp(92px, 8vw, 150px) 22px auto; border: 1px solid var(--ui-border); border-radius: 16px; background: var(--ui-surface); color: var(--ui-text); backdrop-filter: blur(22px); box-shadow: 0 8px 32px #0002; font: 500 12px 'Poppins', sans-serif; direction: ltr; }
.preferences-mark { color: var(--ui-accent); font-family: monospace; font-size: 20px; }
.language-control { display: flex; align-items: center; gap: 7px; }
.language-control select { width: 112px; min-height: 38px; border: 0; color: var(--ui-text); background: transparent; cursor: pointer; }
.language-control option { background: var(--ui-surface); color: var(--ui-text); }
.theme-switch { display: flex; gap: 3px; padding: 3px; border-radius: 12px; background: #839ab51a; }
.theme-switch button { border: 0; border-radius: 9px; padding: 9px 11px; color: var(--ui-text); background: transparent; min-height: 38px; cursor: pointer; white-space: nowrap; }
.theme-switch button[aria-pressed="true"] { background: var(--ui-accent); color: #052337; box-shadow: 0 2px 12px #52d5ed26; }
.site-preferences :focus-visible { outline: 2px solid var(--ui-accent); outline-offset: 3px; }
.site-preferences, .site-preferences select, .site-preferences button { scroll-margin-top: 82px; }
.ambient-grid { position: fixed; inset: 0; z-index: -1; pointer-events: none; opacity: 0; }
html[data-theme="white"] { color-scheme: light; --ui-surface: #fffffff0; --ui-text: #193c42; --ui-border: #397d802b; --ui-accent: #b3e9e4; --accent-deep: #087780; --accent-bright: #8cdace; }
html[data-theme="white"] body { color: #294247 !important; background: #f5f8f7 !important; }
html[data-theme="white"] #background-video { display: none !important; }
#white-background { display: none; position: fixed; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -1; pointer-events: none; }
html[data-theme="white"] #white-background { display: block; }
html[data-theme="white"] .ambient-grid { display: none; }
html[data-theme="white"] #sideNav { background: linear-gradient(155deg, #f8fcfff5, #dceaf6f5) !important; border-color: #709db440 !important; box-shadow: 10px 0 48px #38557318 !important; }
html[data-theme="white"] #sideNav .nav-link { color: #314b65 !important; }
html[data-theme="white"] #sideNav .nav-link:hover,
html[data-theme="white"] #sideNav .nav-link.active { color: #075f86 !important; background: #b5e5f44d !important; }
html[data-theme="white"] #sideNav .img-profile { border-color: #f8fdff !important; box-shadow: 0 12px 28px #2f6b9630 !important; }
html[data-theme="white"] #about { --white-art: url('../assets/img/generated/white-atelier.png'); }
html[data-theme="white"] #experience { --white-art: url('../assets/img/generated/white-systems.png'); }
html[data-theme="white"] #education { --white-art: url('../assets/img/generated/white-education.png'); }
html[data-theme="white"] #skills { --white-art: url('../assets/img/generated/white-skills.png'); }
html[data-theme="white"] #interests { --white-art: url('../assets/img/generated/white-project.png'); }
html[data-theme="white"] #awards { --white-art: url('../assets/img/generated/white-portfolio.png'); }
html[data-theme="white"] #contact { --white-art: url('../assets/img/generated/white-connect.png'); }
html[data-theme="white"] body section:is(#about, #experience, #education, #skills, #interests, #awards, #contact) { background: linear-gradient(90deg, #e4ebe9f2 0%, #e4ebe9d9 42%, #d3dfdf26 85%), var(--white-art) center right / cover no-repeat !important; border: 1px solid #8aa7aa40 !important; box-shadow: 0 20px 65px #26496a20, inset 0 1px #ffffff66 !important; }
html[data-theme="white"] body section.resume-section-content > img { display: none; }
html[data-theme="white"] .section-overlay,
html[data-theme="white"] #interests::after { background: transparent !important; }
html[data-theme="white"] body :is(h1, h2, h3, h4, .subheading, .section-text, .section-text span) { color: #1a354e !important; text-shadow: none !important; }
html[data-theme="white"] body :is(h1 span, .text-warning, .text-primary, .contact-kicker) { color: #096e99 !important; text-shadow: none !important; }
html[data-theme="white"] .text-success { color: #167158 !important; }
html[data-theme="white"] .flex-shrink-0 > span { display: inline-block; padding: 5px 10px; border-radius: 9px; background: #e4ebe9ed; color: #20514d !important; }
html[data-theme="white"] .contact-heading p,
html[data-theme="white"] .contact-orbital__label { color: #405c73 !important; }
html[data-theme="white"] .contact-form-card { background: #ffffffbd !important; border-color: #b5d1e5 !important; box-shadow: 0 14px 40px #315c7512; }
html[data-theme="white"] #contact .form-control { color: #1d3850 !important; background: #f9fcff !important; border-color: #b2cbdc !important; }
html[data-theme="white"] body #contact .form-control::placeholder { color: #526b80 !important; }
html[data-theme="white"] .btn-primary { background: #096d96 !important; color: #fff !important; border-color: #096d96 !important; }
html[data-theme="white"] .site-footer { background: #edf5fbd9 !important; color: #37516c !important; }
html[data-theme="white"] .scroll-orbit { color: #285a78; }
html[data-theme="white"] body .social-icons a,
html[data-theme="white"] body .social-icons svg { color: #096e99 !important; }
html[data-theme="white"] .modern-floating-badge { background: linear-gradient(135deg, #c4f3fc, #97cee7) !important; box-shadow: 0 8px 28px #28749d24 !important; }
html[data-theme="white"] #sideNav .navbar-brand { background: #dfedf7; }
html[data-theme="white"] #sideNav .navbar-brand::after { background: linear-gradient(to bottom, transparent 38%, #e1edf8 100%); }
html[data-theme="white"] .site-footer span { color: #096e99 !important; text-shadow: none !important; }
html[dir="rtl"] .resume-section-content { text-align: right; }
html[dir="rtl"] .navbar-nav .nav-link { text-align: right; }
html[dir="rtl"] .navbar-nav .nav-link > :first-child { margin-left: 1rem; margin-right: 0 !important; }
html[dir="rtl"] :is(h1, h2, h3, h4) { font-family: Tahoma, sans-serif; letter-spacing: normal; }
html[dir="rtl"] :is(input[type="email"], .social-icons, .scroll-orbit) { direction: ltr; }
@media (max-width: 992px) {
    body#page-top { padding-top: 80px !important; }
    body .container-fluid.p-0 { padding-top: 0 !important; }
    .site-preferences { margin: 0 16px 16px auto; max-width: calc(100% - 32px); gap: 7px; padding: 4px 7px; border-radius: 14px; }
    .preferences-mark { display: none; }
    .language-control select { width: 103px; }
    .theme-switch button { padding: 7px 9px; }
    section[id] { scroll-margin-top: 80px; }
    body .scroll-orbit, body #scrollRibbon, body#page-top::after { display: none !important; }
}
body #sideNav .nav-link :is(svg, i), body .navbar-toggler :is(svg, i), body .text-warning { color: var(--ui-accent) !important; }
body #sideNav .nav-link.active { color: var(--ui-accent) !important; background: #54ccce1c !important; box-shadow: inset 3px 0 var(--ui-accent) !important; }
body #sideNav .nav-link:hover { color: var(--accent-bright) !important; background: #54ccce12 !important; }
body #sideNav .nav-link::before { background: linear-gradient(100deg, #56d7e826, #83ece014); }
body #sideNav .nav-link.active, body #sideNav .nav-link:hover { border-color: #67deee40; }
body h1 > span, body h1 > span span { color: var(--ui-accent) !important; text-shadow: none !important; }
body .social-icons a.social-icon { color: var(--ui-accent) !important; border-color: #67deee40; }
body .social-icons a.social-icon:hover { background: var(--ui-accent) !important; color: #07373d !important; box-shadow: 0 12px 25px #3bafb52e !important; }
body #contact #btnGonder, body .photo-gallery .photo-box .btn-visit { background: linear-gradient(135deg, var(--accent-deep), #24999c) !important; color: #fff !important; border-color: transparent !important; box-shadow: 0 10px 24px #159b9f2e !important; }
body .modern-floating-badge { background: linear-gradient(135deg, #b6f0e9, #67d3d3) !important; border-color: #c8fbf3 !important; box-shadow: 0 10px 28px #27a8ad26 !important; }
body .contact-orbital__core { background: linear-gradient(135deg, #c2fff1, #56d7d5) !important; box-shadow: 0 0 28px #4ebfbe55, 0 0 58px #56d7e82e !important; }
body .contact-orbital__ring--two { border-color: #67deee99; }
body .contact-orbital__spark--two { background: #83ece0; box-shadow: 0 0 16px #83ece0; }
body .contact-orbital::before { background: radial-gradient(circle, #67deee33, #56d7e817 44%, transparent 69%); }
body #sidenavHint { background: linear-gradient(180deg, #56d7e84d, #83ece033); }
body .scroll-orbit, body#page-top::after { display: none !important; }
body #scrollRibbon { width: 5px !important; right: 22px !important; background: linear-gradient(to bottom, #56d7e8, #8ce8d8) !important; box-shadow: 0 0 14px #56d7e84d !important; }
body #scrollRibbon::after { width: 18px; height: 18px; bottom: -8px; border-width: 1px; background: radial-gradient(circle, #fff 0 13%, #83ece0 25%, #56d7e8cc 57%, transparent 70%); box-shadow: 0 0 16px #56d7e888; }
body .site-footer span { color: var(--ui-accent) !important; text-shadow: none !important; }
html[data-theme="white"] body::before { background: none !important; }
html[data-theme="white"] body #sideNav .nav-link :is(svg, i), html[data-theme="white"] body .navbar-toggler :is(svg, i), html[data-theme="white"] body .text-warning { color: var(--accent-deep) !important; }
html[data-theme="white"] body #sideNav .nav-link.active, html[data-theme="white"] body #sideNav .nav-link:hover { color: #087780 !important; box-shadow: inset 3px 0 #399b9c !important; }
html[data-theme="white"] body .social-icons a.social-icon { background: #ffffffb8; color: #087780 !important; border-color: #6ebbb34d; box-shadow: 0 8px 24px #1c69631a; }
html[data-theme="white"] body .social-icons a.social-icon:hover { background: #d0f3ed !important; }
html[data-theme="white"] body h1 > span, html[data-theme="white"] body h1 > span span { color: #087780 !important; }
html[data-theme="white"] #sideNav { background: linear-gradient(155deg, #d8e4e3f5, #b7cdcef5) !important; }
html[data-theme="white"] body { background: #bdcecf !important; }
html[data-theme="white"] #white-background { opacity: .3; mix-blend-mode: multiply; }
html[data-theme="white"] .site-preferences { background: #dce7e6ed; }
@media (min-width: 993px) {
    body #sideNav .navbar-brand { top: 16px; left: 14px; width: calc(100% - 28px); height: var(--profile-height, 214px); margin: 0; border-radius: 22px; background: transparent !important; box-shadow: none !important; }
    body #sideNav .navbar-brand img.img-profile { width: 100%; height: 100%; max-height: none; margin: 0 !important; object-fit: cover; object-position: center 38%; border-radius: 22px !important; border: 0 !important; box-shadow: none !important; transform: none !important; mask-image: none; }
    body #sideNav .navbar-brand::after { background: linear-gradient(180deg, #0a142326, transparent 30%, #0a142388) !important; border-radius: inherit; }
    html[data-theme="white"] body #sideNav .navbar-brand::after { background: linear-gradient(180deg, #d3e1e326, transparent 30%, #bfd2d388) !important; }
}
html[data-theme="white"] .contact-form-card { background: #ffffffda !important; }
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto !important; }
    *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}
@media (max-width: 350px) {
    .site-preferences { gap: 4px; font-size: 11px; }
    .language-control { gap: 2px; }
    .language-control select { width: 84px; }
    .theme-switch button { padding-inline: 7px; }
}

/* The mobile header and its expanded navigation share one theme surface. */
@media (max-width: 992px) {
    html { --mobile-nav-surface: #101c2e; --mobile-nav-text: #e5f0f7; --mobile-nav-line: #89a8c326; --mobile-nav-active: #67deee18; --mobile-nav-accent: #83ece0; }
    html[data-theme="white"] { --mobile-nav-surface: #f3f8f8; --mobile-nav-text: #29484e; --mobile-nav-line: #24565e20; --mobile-nav-active: #08778012; --mobile-nav-accent: #087780; }
    html[data-theme] body #sideNav { background: var(--mobile-nav-surface) !important; border: 1px solid var(--mobile-nav-line) !important; border-top: 0 !important; border-radius: 0 0 20px 20px; box-shadow: 0 12px 32px #04121f20 !important; backdrop-filter: none; overflow: hidden; }
    html[data-theme] body #sideNav #navbarResponsive { width: 100%; margin: 0 !important; padding: 0 12px; background: transparent !important; border-radius: 0; box-shadow: none; max-height: calc(100dvh - 65px); overflow-y: auto; }
    html[data-theme] body #sideNav .navbar-nav { margin: 0 !important; padding: 8px 0 14px; gap: 4px; background: transparent !important; }
    html[data-theme] body #sideNav .nav-item { border: 0 !important; background: transparent !important; }
    html[data-theme] body #sideNav .nav-link { min-height: 48px; padding: 13px 18px !important; border: 1px solid transparent; border-radius: 12px; color: var(--mobile-nav-text) !important; background: transparent !important; font-size: 14px; letter-spacing: .01em; text-shadow: none; transform: none !important; }
    html[data-theme] body #sideNav .nav-link::before { display: none; }
    html[data-theme] body #sideNav .nav-link:is(.active, :hover, :focus-visible) { color: var(--mobile-nav-accent) !important; background: var(--mobile-nav-active) !important; border-color: var(--mobile-nav-line); box-shadow: inset 3px 0 var(--mobile-nav-accent) !important; }
    html[data-theme] body #sideNav .navbar-toggler { width: 44px; height: 44px; margin: 0 !important; padding: 8px !important; align-self: center; border-radius: 12px; background: var(--mobile-nav-active) !important; }
    html[data-theme] body #sideNav .navbar-toggler:focus-visible { outline: 2px solid var(--mobile-nav-accent) !important; outline-offset: 2px; }
    html[data-theme] body #sideNav .navbar-toggler svg { width: 22px; height: 22px; }
    html[data-theme] body #sideNav .navbar-collapse.show .navbar-nav, html[data-theme] body #sideNav .navbar-collapse.collapsing .navbar-nav { display: flex !important; }
}

/* Resolution-independent, quiet circuit motion replaces the compressed video/GIF. */
html body { --ambient-base: #0c1723; --ambient-line: #80bdbb12; --ambient-glow: #4db9b324; }
html[data-theme="white"] body { --ambient-base: #edf3f2; --ambient-line: #306f7210; --ambient-glow: #70bfb52b; background: var(--ambient-base) !important; }
html body .ambient-grid { display: block; opacity: 1; background-color: var(--ambient-base); background-image: linear-gradient(var(--ambient-line) 1px, transparent 1px), linear-gradient(90deg, var(--ambient-line) 1px, transparent 1px); background-size: 72px 72px; }
.ambient-grid::before { content: ''; position: absolute; inset: -15%; background: radial-gradient(ellipse at 75% 25%, var(--ambient-glow), transparent 48%), radial-gradient(ellipse at 25% 80%, var(--ambient-glow), transparent 40%); animation: studio-drift 22s ease-in-out infinite alternate; }
.ambient-grid::after { content: ''; position: absolute; top: 0; bottom: 0; right: 8%; width: 1px; background: linear-gradient(transparent, #68aaa766, transparent); transform-origin: center; animation: studio-signal 12s ease-in-out infinite; }
@keyframes studio-drift { to { transform: translate3d(3%, 4%, 0); } }
@keyframes studio-signal { 0%, 100% { transform: scaleY(.25); opacity: .2; } 50% { transform: scaleY(.85); opacity: .7; } }
html.motion-paused .ambient-grid::before, html.motion-paused .ambient-grid::after { animation-play-state: paused; }

/* Transparent logo: keep the existing portrait slot and navigation coordinates. */
@media (min-width: 993px) {
    html[data-theme] body #sideNav .navbar-brand.menu-logo { background: transparent !important; overflow: visible; }
    html[data-theme] body #sideNav .navbar-brand.menu-logo::after { display: none; }
    html[data-theme] body #sideNav .navbar-brand.menu-logo img.img-profile { object-fit: contain; object-position: center; border-radius: 0 !important; background: transparent; box-shadow: none !important; }
}

/* Preserve desktop link positions while keeping short screens fully navigable. */
@media (min-width: 993px) {
    html[data-theme] body #sideNav #navbarResponsive {
        position: absolute;
        top: 246px;
        bottom: 0;
        width: 100%;
        min-height: 0;
        display: block !important;
        overflow-x: hidden;
        overflow-y: auto;
        overscroll-behavior-y: contain;
        scrollbar-width: thin;
        scrollbar-color: var(--ui-accent) transparent;
    }
    html[data-theme] body #sideNav #navbarResponsive .navbar-nav { margin-top: 0; padding-bottom: 12px; }
    #sideNav #navbarResponsive::-webkit-scrollbar { width: 5px; }
    #sideNav #navbarResponsive::-webkit-scrollbar-thumb { background: var(--ui-accent); border-radius: 5px; }
}
@media (min-width: 993px) and (max-height: 600px) {
    html[data-theme] body #sideNav #navbarResponsive { top: 160px; }
}
@media (min-width: 993px) and (max-height: 420px) {
    html[data-theme] body #sideNav #navbarResponsive { top: 96px; }
}