@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;450;500;550;600;650;700&display=swap');
:root{color-scheme:dark;--bg:#080a0b;--text:#f5f5f1;--muted:#a4a8ac;--line:#282b2d}*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--text);font-family:'DM Sans',sans-serif;-webkit-font-smoothing:antialiased}button,a{-webkit-tap-highlight-color:transparent}button{font:inherit;cursor:pointer}button:focus-visible,a:focus-visible,.sinanwork:focus-visible{outline:2px solid #fff;outline-offset:7px}button{color:inherit}header{position:absolute;z-index:5;top:0;width:100%;padding:32px 48px;display:flex;align-items:center;justify-content:space-between}.brand{display:flex;gap:12px;align-items:center;color:inherit;text-decoration:none;font-size:27px;font-weight:650;letter-spacing:-1.2px}.brand svg{width:31px;height:34px}.header-actions,.social-links{display:flex;align-items:center}.header-actions{gap:8px}.social-links{gap:8px}.social-button{width:32px;height:32px;display:grid;place-items:center;border:1px solid var(--line);border-radius:50%;color:#fff;text-decoration:none;background:transparent;transition:background .2s,border-color .2s}.social-button:hover{background:#1c1f20;border-color:#44494c}.social-button svg{width:15px;height:15px;fill:currentColor;stroke:none}.social-button:last-child svg{width:17px;height:17px}.about-button{border:1px solid var(--line);border-radius:16px;background:transparent;padding:12px 19px;font-size:13pt}.about-button span{margin-left:15px;color:#a5aaad}.about-button:hover{background:#1c1f20}.scene{height:calc(100svh - 65px);min-height:680px;position:relative;overflow:hidden;isolation:isolate}.sinanwork{position:absolute;inset:0;touch-action:none;cursor:grab;outline-offset:-8px!important}.sinanwork.dragging{cursor:grabbing}.photo{position:absolute;left:50%;top:82%;width:140px;height:140px;padding:0;border:0;border-radius:22%;background:#20262a;box-shadow:0 8px 35px #0005;overflow:hidden;cursor:inherit;will-change:transform;user-select:none}.photo img{width:100%;height:100%;object-fit:cover;pointer-events:none;transition:filter .3s,scale .4s;filter:brightness(.86) saturate(.93)}.photo:hover img,.photo:focus-visible img{filter:brightness(1.1) saturate(1.05);scale:1.08}.intro{position:absolute;z-index:2;top:45%;left:50%;transform:translateX(-50%);text-align:center;width:max-content;max-width:85%;pointer-events:none}.eyebrow{display:flex;align-items:center;justify-content:center;gap:8px;font-size:12px;color:#bec2c1;margin-bottom:20px}.eyebrow span{width:5px;height:5px;background:#cad4b7;border-radius:50%;box-shadow:0 0 12px #cbdab533}h1{font-size:clamp(42px,4.2vw,64px);font-weight:500;line-height:1.04;letter-spacing:-3px;margin:0}p{font-size:14px;line-height:1.65;color:var(--muted);margin:23px 0 25px}.explore{pointer-events:auto;display:inline-flex;align-items:center;gap:24px;padding:15px 23px;background:#f0f1eb;color:#161918;border:0;border-radius:32px;font-size:12px;font-weight:600;transition:background .2s,transform .2s}.explore:hover{background:#fff;transform:translateY(-2px)}svg{fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}.explore svg{width:19px;height:19px}.brand svg{stroke:none}.direction-controls{position:absolute;z-index:3;top:54%;left:4%;width:92%;display:flex;justify-content:space-between;pointer-events:none}.direction-controls button{width:58px;height:58px;border:1px solid #ffffff12;border-radius:50%;background:#1a1d1e;pointer-events:auto;display:grid;place-items:center;transition:background .2s}.direction-controls button:hover{background:#303536}.direction-controls svg{width:22px;height:22px}.bottom-fade{position:absolute;inset:auto 0 0;height:125px;background:linear-gradient(transparent,var(--bg) 88%);pointer-events:none;z-index:2}.drag-hint{position:absolute;bottom:27px;left:50%;transform:translateX(-50%);display:flex;align-items:center;gap:12px;white-space:nowrap;font-size:11px;color:#a4aaad;z-index:3;pointer-events:none}.drag-hint svg{width:34px;height:20px;stroke:#a4aaad;stroke-width:1.2}footer{height:65px;border-top:1px solid #ffffff0a;margin:0 48px;display:flex;align-items:center;justify-content:space-between;font-size:10px;color:#8f9599;letter-spacing:.15px}.footer-dot{padding:0 9px}dialog{padding:0;border:1px solid #ffffff20;border-radius:24px;background:#111516;color:var(--text);max-width:min(90vw,660px);max-height:90svh;overflow:auto;box-shadow:0 30px 120px #0009}dialog::backdrop{background:#000c;backdrop-filter:blur(12px)}.close{position:absolute;right:15px;top:15px;z-index:2;width:44px;height:44px;border-radius:50%;background:#111b;border:1px solid #fff3;font-size:26px}.close:hover{background:#333}#large-photo{display:block;width:100%;max-height:68svh;object-fit:contain;background:#080a0b}.photo-caption{display:flex;align-items:center;justify-content:space-between;padding:22px 28px}.caption-label{color:var(--muted);font-size:11px}.photo-caption h2{font-size:22px;font-weight:500;margin:5px 0}#photo-count{color:var(--muted);font-size:12px}#about-dialog{padding:48px;max-width:460px}.about-mark{font-size:22px;font-weight:600}#about-dialog h2{font-size:38px;line-height:1.1;letter-spacing:-1.5px;font-weight:500;margin-top:35px}.credits{font-size:11px;color:var(--muted)}
.header-actions{gap:16px}.social-button{width:40px;height:40px}.social-button svg,.social-button:last-child svg{width:16px;height:16px}
.brand-group{display:flex;align-items:center;gap:32px}
.theme-toggle{position:relative;flex-shrink:0;width:28px;height:18px;padding:2px;border:1px solid var(--line);border-radius:999px;background:#202527;display:flex;align-items:center}
.theme-toggle span{display:block;width:12px;height:12px;border-radius:50%;background:#f5f5f1;transition:transform .2s}
.theme-toggle[aria-checked="true"] span{transform:translateX(10px);background:var(--text)}
.about-button{color:inherit;text-decoration:none}
.explore{-webkit-appearance:none;appearance:none;background-color:#f0f1eb;background-image:none!important;box-shadow:none!important;text-shadow:none}
.explore:hover{background-color:#fff;background-image:none!important;box-shadow:none!important}
:root[data-theme="light"]{color-scheme:light;--bg:#f5f5f1;--text:#171b1d;--muted:#61676b;--line:#c8cccd}
[data-theme="light"] .brand img{filter:none!important}
[data-theme="light"] .theme-toggle{background:transparent}
[data-theme="light"] .social-button{color:var(--text)}
[data-theme="light"] .social-button:hover,[data-theme="light"] .about-button:hover{background:#e3e6e3}
[data-theme="light"] .eyebrow{color:#515b57}
[data-theme="light"] .eyebrow span{background:#617050;box-shadow:none}
[data-theme="light"] .explore{background-color:#202625;background-image:none!important;box-shadow:none!important;color:#fff}
[data-theme="light"] .explore:hover{background-color:#39413e;background-image:none!important;box-shadow:none!important}
[data-theme="light"] .direction-controls button{background:#e6e9e5;border-color:var(--line)}
[data-theme="light"] .direction-controls button:hover{background:#d5dad4}
[data-theme="light"] footer{color:var(--muted);border-color:#171b1d15}
[data-theme="light"] dialog{background:#fafbf8;border-color:var(--line);box-shadow:0 30px 120px #0003}
[data-theme="light"] dialog::backdrop{background:#39413e66}
[data-theme="light"] .close{background:#f5f5f1e6;border-color:var(--line)}
[data-theme="light"] .close:hover{background:#e3e6e3}
[data-theme="light"] #large-photo{background:var(--bg)}
[data-theme="light"] button:focus-visible,[data-theme="light"] a:focus-visible,[data-theme="light"] .sinanwork:focus-visible{outline-color:#171b1d}
.mobile-mail{display:none}.photo{top:var(--ring-y,82%)}
@media(max-width:700px){body .header{padding:24px 20px;flex-wrap:nowrap;row-gap:0;align-items:center}.header .brand-group{gap:20px}.header .header-actions{position:absolute;top:24px;right:68px;margin:0;gap:0}.header .social-links{gap:8px}.header .social-button,.mobile-mail{width:40px;height:40px}.mobile-mail{display:grid;position:absolute;z-index:6;top:24px;right:20px}.header .about-button{display:none}.scene.direction-safe{min-height:880px}.scene .intro{z-index:3;top:auto;bottom:180px;width:calc(100% - 48px);max-width:420px}.scene .direction-controls{display:none}.scene .bottom-fade{z-index:1;height:260px}}
@media(hover:none) and (pointer:coarse){.touch-input button:focus-visible,.touch-input a:focus-visible,.touch-input .sinanwork:focus-visible{outline:none}}
@media(max-width:420px){header{flex-wrap:wrap;row-gap:16px}.header-actions{margin-left:auto}}
@media(min-width:1600px){.intro{top:47%}.scene{min-height:780px}}@media(max-width:700px){header{padding:24px}.brand{font-size:23px}.brand svg{width:25px}.about-button{padding:10px 14px;font-size: 13pt}.scene{min-height:650px;height:calc(100svh - 65px)}.intro{top:44%}h1{font-size:46px;letter-spacing:-2px}.intro p{font-size:12px}.eyebrow{font-size:11px;margin-bottom:17px}.direction-controls{top:auto;bottom:80px;left:calc(50% - 62px);width:124px}.direction-controls button{width:48px;height:48px}.drag-hint{bottom:23px;font-size:10px}.explore{padding:14px 20px}.bottom-fade{height:155px}footer{margin:0 24px;font-size:9px}footer>span:last-child{max-width:120px;text-align:right;line-height:1.7}#about-dialog{padding:32px}}@media(prefers-reduced-motion:reduce){*,*::before,*::after{transition:none!important;scroll-behavior:auto!important}}