/* ═══════════════════════════════════════════════════════════
   THE WORKSHOP — Main Stylesheet
   Gürkan Yılmaz Portfolio · Built by GurkanY
═══════════════════════════════════════════════════════════ */

/* ── TOKENS ── */
:root {
  --bg:     #0b0b0a;
  --surf:   #141412;
  --surf2:  #1c1c19;
  --surf3:  #252521;
  --txt:    #dedad0;
  --txt-d:  #7a7770;
  --txt-l:  #3a3935;
  --cu:     #b87333;
  --cu-l:   #d4924d;
  --cu-d:   #7a4d22;
  --gr:     #4caf50;
  --yw:     #f5a623;
  --rd:     #e74c3c;
  --brd:    rgba(184,115,51,.14);
  --brd-s:  rgba(255,255,255,.045);
  --fh:     'Syne', sans-serif;
  --fm:     'IBM Plex Mono', monospace;
  --radius: 0px;
  --trans:  .22s ease;
}

/* ── RESET ── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html {
  scroll-behavior: smooth;
  font-size: 16px;
  /* Prevent horizontal scroll globally */
  overflow-x: hidden;
  max-width: 100%;
}
body {
  background: var(--bg);
  color: var(--txt);
  font-family: var(--fm);
  font-size: 14px;
  line-height: 1.65;
  cursor: none;
  overflow-x: hidden;
  max-width: 100%;
  width: 100%;
  -webkit-font-smoothing: antialiased;
  /* Prevent text size adjustment on mobile */
  -webkit-text-size-adjust: 100%;
}
a { text-decoration: none; color: inherit; }
button { border: none; background: none; cursor: none; font-family: inherit; font-size: inherit; }
img { display: block; max-width: 100%; }
::selection { background: var(--cu); color: #000; }

/* ── SCROLLBAR ── */
::-webkit-scrollbar { width: 4px; }
::-webkit-scrollbar-track { background: var(--bg); }
::-webkit-scrollbar-thumb { background: var(--cu-d); }
::-webkit-scrollbar-thumb:hover { background: var(--cu); }

/* ── NOISE OVERLAY ── */
body::before {
  content: '';
  position: fixed; inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  opacity: .022;
  pointer-events: none;
  z-index: 900;
}

/* ═══════════════════════════════════════════════════════════
   CURSOR
═══════════════════════════════════════════════════════════ */
#cur {
  position: fixed; top: 0; left: 0;
  width: 10px; height: 10px;
  background: var(--cu);
  border-radius: 50%;
  pointer-events: none; z-index: 9999;
  transform: translate(-50%,-50%);
  transition: width .18s, height .18s;
  mix-blend-mode: screen;
}
#cur-r {
  position: fixed; top: 0; left: 0;
  width: 34px; height: 34px;
  border: 1px solid rgba(184,115,51,.35);
  border-radius: 50%;
  pointer-events: none; z-index: 9998;
  transform: translate(-50%,-50%);
}
#cur.big { width: 20px; height: 20px; }

/* ═══════════════════════════════════════════════════════════
   BOOT SCREEN
═══════════════════════════════════════════════════════════ */
#boot {
  position: fixed; inset: 0;
  background: #000; z-index: 1000;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  transition: opacity .7s;
}
#boot.out { opacity: 0; pointer-events: none; }
.bt { font-family: var(--fh); font-size: clamp(26px, 5vw, 58px); font-weight: 800; letter-spacing: -.02em; color: #fff; margin-bottom: 28px; opacity: 0; animation: bf .4s .1s forwards; }
.bl { font-size: 11px; opacity: 0; margin: 2px 0; animation: bf .3s forwards; letter-spacing: .06em; }
.bb { width: 280px; height: 1px; background: #111; margin-top: 22px; opacity: 0; animation: bf .3s 1.9s forwards; }
.bb-f { height: 100%; background: var(--cu); width: 0; animation: bfill 2.4s 1.9s ease forwards; }
#skip-b { position: absolute; bottom: 36px; font-size: 9px; color: #333; letter-spacing: .14em; text-transform: uppercase; transition: color .2s; opacity: 0; animation: bf .3s .9s forwards; }
#skip-b:hover { color: var(--cu); }
@keyframes bf { to { opacity: 1; } }
@keyframes bfill { to { width: 100%; } }

/* ═══════════════════════════════════════════════════════════
   HEADER
═══════════════════════════════════════════════════════════ */
#hdr {
  position: fixed; top: 0; left: 0; right: 0; z-index: 200;
  height: 60px; padding: 0 32px;
  display: flex; align-items: center; justify-content: space-between;
  border-bottom: 1px solid var(--brd);
  background: rgba(11,11,10,.92);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}
.logo {
  font-family: var(--fh); font-weight: 800; font-size: 14px;
  letter-spacing: .15em; display: flex; align-items: center; gap: 9px; cursor: none;
}
.logo-d { width: 7px; height: 7px; background: var(--cu); border-radius: 50%; animation: pulse 2s infinite; }
@keyframes pulse { 0%,100% { opacity:1; transform:scale(1); } 50% { opacity:.35; transform:scale(.7); } }

nav { display: flex; align-items: center; }
.ni {
  padding: 0 12px; height: 60px; display: flex; align-items: center;
  font-size: 10px; color: var(--txt-d); letter-spacing: .13em; text-transform: uppercase;
  cursor: none; transition: color var(--trans);
  border-right: 1px solid var(--brd-s); position: relative;
}
.ni:first-child { border-left: 1px solid var(--brd-s); }
.ni::after {
  content: ''; position: absolute; bottom: 0; left: 0; right: 0;
  height: 1px; background: var(--cu);
  transform: scaleX(0); transition: transform .25s;
}
.ni:hover { color: var(--txt); }
.ni.on { color: var(--cu); }
.ni.on::after { transform: scaleX(1); }

.hdr-r { display: flex; align-items: center; gap: 16px; }
.lang-sw {
  display: flex; gap: 1px;
  font-size: 9px; letter-spacing: .1em;
}
.lang-btn {
  padding: 4px 8px; color: var(--txt-d);
  border: 1px solid var(--brd-s); cursor: none;
  transition: all .2s;
}
.lang-btn.on { color: var(--cu); border-color: var(--cu); background: rgba(184,115,51,.07); }
.live { display: flex; align-items: center; gap: 6px; font-size: 10px; color: var(--txt-d); letter-spacing: .08em; }
.live-d { width: 5px; height: 5px; background: var(--gr); border-radius: 50%; animation: pulse 1.5s infinite; }
.avail-badge {
  font-size: 8px; letter-spacing: .12em; text-transform: uppercase;
  padding: 3px 8px; border: 1px solid var(--gr); color: var(--gr);
  background: rgba(76,175,80,.06);
}

/* Mobile hamburger */
.ham-btn { display: none; flex-direction: column; gap: 5px; cursor: none; padding: 4px; flex-shrink: 0; }
.ham-btn span { display: block; width: 22px; height: 1px; background: var(--txt-d); transition: all .25s; }
.ham-btn.open span:nth-child(1) { transform: rotate(45deg) translate(4px, 4px); }
.ham-btn.open span:nth-child(2) { opacity: 0; }
.ham-btn.open span:nth-child(3) { transform: rotate(-45deg) translate(4px, -4px); }

/* ═══════════════════════════════════════════════════════════
   APP & PAGE SYSTEM
═══════════════════════════════════════════════════════════ */
#app { opacity: 0; transition: opacity .6s; }
#app.ready { opacity: 1; }
.page { display: none; padding-top: 60px; min-height: 100vh; }
.page.on { display: block; }

/* ═══════════════════════════════════════════════════════════
   MODAL (Project Detail)
═══════════════════════════════════════════════════════════ */
#modal-overlay {
  position: fixed; inset: 0; background: rgba(0,0,0,.85);
  z-index: 500; opacity: 0; pointer-events: none;
  transition: opacity .3s; backdrop-filter: blur(4px);
}
#modal-overlay.open { opacity: 1; pointer-events: all; }
#modal {
  position: fixed; top: 0; right: 0; bottom: 0;
  width: min(720px, 100vw);
  background: var(--surf); z-index: 501;
  overflow-y: auto; overscroll-behavior: contain;
  transform: translateX(100%); transition: transform .4s cubic-bezier(.22,.8,.22,1);
  border-left: 1px solid var(--brd);
}
#modal.open { transform: translateX(0); }
.modal-close {
  position: sticky; top: 0; left: 0; right: 0;
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px 28px; background: var(--surf);
  border-bottom: 1px solid var(--brd); z-index: 10;
}
.modal-close-btn {
  font-size: 10px; color: var(--txt-d); letter-spacing: .12em;
  text-transform: uppercase; cursor: none; transition: color .2s;
  display: flex; align-items: center; gap: 8px;
}
.modal-close-btn:hover { color: var(--cu); }
.modal-body { padding: 36px 28px 80px; }
.modal-hero { width: 100%; aspect-ratio: 16/9; background: var(--surf2); position: relative; overflow: hidden; margin-bottom: 28px; }
.modal-hero canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.modal-hero img { width: 100%; height: 100%; object-fit: cover; position: absolute; inset: 0; }
.modal-category { font-size: 9px; color: var(--cu); letter-spacing: .18em; text-transform: uppercase; margin-bottom: 8px; }
.modal-title { font-family: var(--fh); font-size: clamp(24px, 4vw, 38px); font-weight: 800; letter-spacing: -.02em; margin-bottom: 20px; }
.modal-meta { display: flex; gap: 20px; flex-wrap: wrap; padding: 14px 0; border-top: 1px solid var(--brd-s); border-bottom: 1px solid var(--brd-s); margin-bottom: 28px; }
.modal-meta-item { font-size: 10px; color: var(--txt-d); }
.modal-meta-item strong { display: block; color: var(--txt); font-weight: 400; margin-bottom: 2px; font-size: 9px; letter-spacing: .1em; text-transform: uppercase; color: var(--cu); }
.modal-desc { font-size: 13px; color: var(--txt-d); line-height: 1.85; margin-bottom: 28px; }
.modal-section-label { font-size: 10px; color: var(--cu); letter-spacing: .18em; text-transform: uppercase; margin-bottom: 12px; padding-bottom: 8px; border-bottom: 1px solid var(--brd); }
.modal-process { font-size: 12px; color: var(--txt-d); line-height: 1.85; margin-bottom: 28px; }
.modal-tools { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 28px; }
.modal-tool { font-size: 9px; padding: 4px 10px; background: var(--surf2); border: 1px solid var(--brd-s); color: var(--txt-d); letter-spacing: .08em; text-transform: uppercase; }
.modal-gallery { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; margin-bottom: 28px; }
.modal-gallery-item { aspect-ratio: 4/3; background: var(--surf2); overflow: hidden; position: relative; }
.modal-gallery-item img { width: 100%; height: 100%; object-fit: cover; }
.modal-gallery-item .ph { /* placeholder */ width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; font-size: 10px; color: var(--txt-l); letter-spacing: .08em; }
.modal-nav { display: flex; gap: 8px; padding-top: 20px; border-top: 1px solid var(--brd-s); }
.modal-nav-btn { flex: 1; padding: 12px; border: 1px solid var(--brd); text-align: center; font-size: 10px; letter-spacing: .1em; text-transform: uppercase; cursor: none; color: var(--txt-d); transition: all .2s; }
.modal-nav-btn:hover { border-color: var(--cu); color: var(--cu); }

/* ═══════════════════════════════════════════════════════════
   SCROLL REVEAL
═══════════════════════════════════════════════════════════ */
.r { opacity: 0; transform: translateY(24px); transition: opacity .55s ease, transform .55s ease; }
.r.in { opacity: 1; transform: translateY(0); }
.r.d1 { transition-delay: .06s; }
.r.d2 { transition-delay: .13s; }
.r.d3 { transition-delay: .2s; }
.r.d4 { transition-delay: .28s; }

/* ═══════════════════════════════════════════════════════════
   SHARED COMPONENTS
═══════════════════════════════════════════════════════════ */
.wrap { max-width: 1440px; margin: 0 auto; padding: 80px 40px; }

.sec-hdr { display: flex; align-items: baseline; flex-wrap: wrap; gap: 14px; margin-bottom: 52px; }
.sec-num { font-size: 10px; color: var(--cu); letter-spacing: .2em; text-transform: uppercase; }
.sec-ttl { font-family: var(--fh); font-size: clamp(26px, 3.5vw, 48px); font-weight: 800; letter-spacing: -.025em; }
.sec-note { margin-left: auto; font-size: 10px; color: var(--txt-l); letter-spacing: .06em; }

.btn-p {
  padding: 13px 28px; background: var(--cu); color: #000;
  font-family: var(--fm); font-size: 10px; font-weight: 500;
  letter-spacing: .14em; text-transform: uppercase;
  cursor: none; transition: background .2s, transform .15s;
  display: inline-block;
}
.btn-p:hover { background: var(--cu-l); transform: translateY(-1px); }
.btn-g {
  padding: 13px 28px; background: transparent; color: var(--txt-d);
  font-family: var(--fm); font-size: 10px; letter-spacing: .14em;
  text-transform: uppercase; border: 1px solid var(--brd);
  cursor: none; transition: all .2s; display: inline-block;
}
.btn-g:hover { border-color: var(--cu); color: var(--cu); }

/* Status dots */
.sdot { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; }
.s-active { background: var(--gr); box-shadow: 0 0 7px var(--gr); animation: pulse 2s infinite; }
.s-hold { background: var(--yw); }
.s-archive { background: var(--txt-l); }

/* Filter bar */
.filter-bar { display: flex; gap: 2px; margin-bottom: 40px; overflow-x: auto; padding-bottom: 4px; }
.fbt {
  padding: 8px 16px; font-family: var(--fm); font-size: 9px;
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--txt-d); background: var(--surf);
  border: 1px solid var(--brd-s); cursor: none;
  transition: all .2s; white-space: nowrap;
}
.fbt:hover, .fbt.on { color: var(--cu); border-color: var(--cu); background: var(--surf2); }

/* Project card grid */
.proj-grid { display: grid; grid-template-columns: repeat(12, 1fr); gap: 2px; }
.pc { background: var(--surf); overflow: hidden; position: relative; cursor: none; transition: transform .28s; }
.pc:hover { transform: scale(1.006); z-index: 3; }
.pc.s7 { grid-column: span 7; }
.pc.s5 { grid-column: span 5; }
.pc.s12 { grid-column: span 12; }
.pc.s6 { grid-column: span 6; }
.pc.s4 { grid-column: span 4; }
.pc.s8 { grid-column: span 8; }

.pc-thumb { width: 100%; aspect-ratio: 16/9; background: var(--surf2); position: relative; overflow: hidden; }
.pc-thumb canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.pc-thumb img { width: 100%; height: 100%; object-fit: cover; position: absolute; inset: 0; }

.pc-body { padding: 20px; position: relative; }
.pc-status-dot { position: absolute; top: 20px; right: 20px; }
.pc-cat { font-size: 9px; color: var(--cu); letter-spacing: .16em; text-transform: uppercase; margin-bottom: 7px; }
.pc-name { font-family: var(--fh); font-size: 17px; font-weight: 700; margin-bottom: 7px; }
.pc-brief { font-size: 11px; color: var(--txt-d); line-height: 1.65; margin-bottom: 14px; }
.pc-tags { display: flex; gap: 6px; flex-wrap: wrap; }
.pc-tag { font-size: 8px; padding: 3px 7px; background: var(--surf2); color: var(--txt-l); border: 1px solid var(--brd-s); letter-spacing: .08em; text-transform: uppercase; }

.pc-over {
  position: absolute; inset: 0; background: rgba(0,0,0,.88);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  opacity: 0; transition: opacity .25s; gap: 10px;
}
.pc:hover .pc-over { opacity: 1; }
.pc-over-t { font-family: var(--fh); font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--cu); }
.pc-over-a { font-size: 22px; color: var(--cu); }

/* Toast */
.toast {
  position: fixed; top: 72px; right: 32px;
  background: var(--cu); color: #000;
  font-size: 10px; padding: 10px 18px; z-index: 8000;
  letter-spacing: .1em; transition: opacity .4s;
  pointer-events: none; font-family: var(--fm);
}

/* Wireframe easter egg */
body.wf * { background: transparent !important; outline: 1px solid rgba(184,115,51,.22) !important; color: var(--cu) !important; }
body.wf canvas { opacity: .06 !important; }

/* ═══════════════════════════════════════════════════════════
   FOOTER
═══════════════════════════════════════════════════════════ */
footer {
  border-top: 1px solid var(--brd);
  padding: 20px 40px;
  display: flex; align-items: center; justify-content: space-between;
  font-size: 9px; color: var(--txt-l); letter-spacing: .08em;
}
footer a { color: var(--txt-l); transition: color .2s; }
footer a:hover { color: var(--cu); }

/* ═══════════════════════════════════════════════════════════
   RESPONSIVE
═══════════════════════════════════════════════════════════ */
@media (max-width: 1100px) {
  nav { display: none; }
  .ham-btn { display: flex; }
  .avail-badge { display: none; } /* Hide on tablet/mobile */
  nav.mobile-open {
    display: flex; flex-direction: column;
    position: fixed; top: 60px; left: 0; right: 0;
    /* Full viewport width, no overflow */
    width: 100vw; max-width: 100vw;
    background: rgba(11,11,10,.98); backdrop-filter: blur(16px);
    border-bottom: 1px solid var(--brd); z-index: 199;
    padding: 0;
    /* Make it scrollable if items overflow */
    max-height: calc(100vh - 60px);
    overflow-y: auto;
    overscroll-behavior: contain;
  }
  nav.mobile-open .ni {
    height: 52px; border: none;
    border-bottom: 1px solid var(--brd-s);
    padding: 0 28px; width: 100%; justify-content: flex-start;
    font-size: 12px; letter-spacing: .1em;
  }
  nav.mobile-open .ni::after { display: none; }
  nav.mobile-open .ni.on { background: rgba(184,115,51,.07); }
}

@media (max-width: 900px) {
  #hdr { padding: 0 16px; gap: 8px; }
  .logo { font-size: 12px; letter-spacing: .1em; }
  .lang-sw { gap: 2px; }
  .lang-btn { padding: 4px 7px; }
  #hdr-clock { display: none; } /* Hide clock on mobile to save space */
  .live-d { /* just show dot */ }
  .wrap { padding: 60px 16px; }
  .proj-grid { grid-template-columns: 1fr; }
  .pc.s7, .pc.s5, .pc.s12, .pc.s6, .pc.s4, .pc.s8 { grid-column: span 1; }
  footer { flex-direction: column; gap: 10px; text-align: center; padding: 20px 16px; }
  /* Modal full screen on mobile */
  #modal { width: 100vw; }
  .modal-body { padding: 24px 16px 60px; }
  .modal-gallery { grid-template-columns: 1fr; }
}

@media (max-width: 480px) {
  .logo { font-size: 11px; }
  .hdr-r { gap: 8px; }
}