/*
Theme Name: Umut Kayacan Portfolio
Theme URI: https://umutkayacan.com
Author: Umut Kayacan
Author URI: https://umutkayacan.com
Description: Sinematik, tam ekran görsel odaklı özel portfolyo teması. Letterbox çerçeve, soldan açılır menü ve timecode temalı bölüm etiketleri içerir. Tüm metin, görsel ve linkler admin panelinden (ACF) düzenlenebilir.
Version: 1.0.0
Requires PHP: 7.4
Text Domain: umut-portfolio
*/

:root{
  --bg: #0e0d0b;
  --panel: #131110;
  --ink: #f3eee3;
  --muted: #96907f;
  --gold: #c9a227;
  --teal: #3b6e68;
  --line: rgba(243,238,227,0.12);
  --letterbox-h: clamp(22px, 4.2vw, 46px);
}
*{margin:0;padding:0;box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  background:var(--bg);
  color:var(--ink);
  font-family:'Archivo',sans-serif;
  overflow-x:hidden;
}
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto;}
  *{animation-duration:0.01ms !important; transition-duration:0.01ms !important;}
}
img{max-width:100%;display:block;}

/* ---- letterbox bars ---- */
.letterbox{
  position:fixed; left:0; right:0; height:var(--letterbox-h);
  background:#000; z-index:60; pointer-events:none;
}
.letterbox.top{top:0;}
.letterbox.bottom{bottom:0;}
.letterbox .tag{
  position:absolute; right:16px; bottom:6px;
  font-family:'JetBrains Mono',monospace; font-size:10px;
  letter-spacing:0.08em; color:var(--muted); pointer-events:none;
}
.letterbox.top .tag{ right:auto; left:16px; bottom:6px; }

/* ---- header ---- */
header.site-header{
  position:fixed; left:0; right:0;
  top:var(--letterbox-h);
  height:64px; z-index:50;
  display:flex; align-items:center; justify-content:space-between;
  padding:0 clamp(20px,4vw,48px);
  transition:background .35s ease, border-color .35s ease;
  border-bottom:1px solid transparent;
}
header.site-header.solid{ background:rgba(14,13,11,0.92); backdrop-filter:blur(6px); border-color:var(--line); }
.mark{
  font-family:'Big Shoulders Display',sans-serif; font-weight:900;
  font-size:22px; letter-spacing:0.02em; color:var(--ink);
  text-decoration:none; display:flex; align-items:center;
}
.mark span{color:var(--gold);}
.mark img{ max-height:34px; width:auto; display:block; }
.menu-btn{
  display:flex; align-items:center; gap:10px;
  background:none; border:none; cursor:pointer;
  color:var(--ink); font-family:'JetBrains Mono',monospace;
  font-size:11px; letter-spacing:0.15em;
}
.menu-btn .bars{ width:26px; height:16px; position:relative; }
.menu-btn .bars span{
  position:absolute; left:0; right:0; height:1.5px; background:var(--ink);
  transition:transform .35s ease, opacity .35s ease, top .35s ease;
}
.menu-btn .bars span:nth-child(1){top:0;}
.menu-btn .bars span:nth-child(2){top:7px;}
.menu-btn .bars span:nth-child(3){top:14px;}
body.nav-open .menu-btn .bars span:nth-child(1){ top:7px; transform:rotate(45deg); }
body.nav-open .menu-btn .bars span:nth-child(2){ opacity:0; }
body.nav-open .menu-btn .bars span:nth-child(3){ top:7px; transform:rotate(-45deg); }

/* ---- slide-in nav ---- */
.nav-overlay{
  position:fixed; inset:0; background:rgba(0,0,0,0.55);
  opacity:0; pointer-events:none; transition:opacity .4s ease; z-index:70;
}
body.nav-open .nav-overlay{ opacity:1; pointer-events:auto; }
.nav-panel{
  position:fixed; top:0; bottom:0; left:0; width:min(380px,86vw);
  background:var(--panel); z-index:80;
  transform:translateX(-100%); transition:transform .45s cubic-bezier(.77,0,.18,1);
  display:flex; flex-direction:column;
  padding:calc(var(--letterbox-h) + 32px) 36px 32px;
  border-right:1px solid var(--line);
  overflow-y:auto;
}
body.nav-open .nav-panel{ transform:translateX(0); }
.nav-panel .close{
  position:absolute; top:calc(var(--letterbox-h) + 28px); right:28px;
  background:none;border:none;color:var(--muted);
  font-family:'JetBrains Mono',monospace; font-size:11px; letter-spacing:.1em; cursor:pointer;
}
.nav-eyebrow{
  font-family:'JetBrains Mono',monospace; font-size:10.5px; color:var(--gold);
  letter-spacing:.12em; margin-bottom:22px;
}
.nav-list{ list-style:none; display:flex; flex-direction:column; }
.nav-list li a, .nav-list li button{
  display:block; padding:12px 0; border-bottom:1px solid var(--line);
  color:var(--ink); text-decoration:none; background:none; border-left:none; border-right:none; border-top:none;
  font-family:'Big Shoulders Display',sans-serif; font-weight:700;
  font-size:26px; letter-spacing:.01em; width:100%; text-align:left; cursor:pointer;
  transition:color .25s ease, padding-left .25s ease;
}
.nav-list li a:hover, .nav-list li button:hover{ color:var(--gold); padding-left:8px; }
.nav-list li button.is-active{ color:var(--gold); }
.nav-foot{ margin-top:auto; padding-top:24px; }
.nav-foot p{ font-family:'JetBrains Mono',monospace; font-size:11px; color:var(--muted); margin-bottom:6px; }
.nav-foot a{ color:var(--muted); text-decoration:none; }
.nav-foot a:hover{ color:var(--ink); }

/* ---- hero ---- */
.hero{
  position:relative;
  min-height:100vh;
  display:flex; align-items:flex-end;
  padding:0 clamp(20px,4vw,48px) calc(var(--letterbox-h) + 64px);
}
.hero-bg{ position:absolute; inset:0; z-index:-2; overflow:hidden; background:#000; }
.hero-bg img, .hero-bg video{
  width:100%; height:100%; object-fit:cover;
  filter:grayscale(.25) contrast(1.08) brightness(.72) saturate(1.05);
}
.grade-overlay{
  position:absolute; inset:0; z-index:-1;
  background:linear-gradient(135deg, rgba(59,110,104,.38), rgba(201,162,39,.16) 55%, rgba(14,13,11,.65));
  mix-blend-mode:multiply;
}
.hero-fade{
  position:absolute; inset:0; z-index:-1;
  background:linear-gradient(to top, var(--bg) 0%, rgba(14,13,11,0) 42%);
}
.hero-content{ max-width:900px; }
.hero-eyebrow{
  font-family:'JetBrains Mono',monospace; font-size:11px; letter-spacing:.14em;
  color:var(--gold); margin-bottom:18px; display:flex; align-items:center; gap:10px;
}
.hero-eyebrow .dot{width:6px;height:6px;border-radius:50%;background:var(--gold);
  box-shadow:0 0 0 3px rgba(201,162,39,.2);}
.hero-title{
  font-family:'Big Shoulders Display',sans-serif; font-weight:900;
  font-size:clamp(48px, 9vw, 128px); line-height:.88; letter-spacing:.005em;
  text-transform:uppercase;
}
.hero-sub{
  margin-top:20px; max-width:520px;
  font-size:16px; line-height:1.6; color:var(--muted);
}
.hero-sub strong{ color:var(--ink); font-weight:600; }
.scroll-cue{
  position:absolute; bottom:calc(var(--letterbox-h) + 20px); left:clamp(20px,4vw,48px);
  font-family:'JetBrains Mono',monospace; font-size:10px; color:var(--muted);
  letter-spacing:.1em; display:flex; align-items:center; gap:8px;
}
.scroll-cue .ln{ width:28px; height:1px; background:var(--muted); }

section{ padding:120px clamp(20px,4vw,48px); position:relative; }
.eyebrow{
  font-family:'JetBrains Mono',monospace; font-size:11px; letter-spacing:.14em;
  color:var(--gold); margin-bottom:20px; display:block;
}
.section-head{ display:flex; justify-content:space-between; align-items:flex-end; gap:24px; margin-bottom:56px; flex-wrap:wrap; }
h2.big{
  font-family:'Big Shoulders Display',sans-serif; font-weight:700;
  font-size:clamp(32px,4.5vw,58px); text-transform:uppercase; line-height:1;
}
.section-note{ max-width:340px; color:var(--muted); font-size:14px; line-height:1.6; }

/* ---- intro ---- */
.intro p{
  font-size:clamp(20px,2.4vw,30px); line-height:1.5; max-width:920px;
  font-weight:400; color:var(--ink);
}
.intro em, .intro .hi{ color:var(--gold); font-style:italic; }

/* ---- work grid ---- */
.work-grid{
  display:grid; grid-template-columns:repeat(4,1fr); gap:18px;
}
.tile{
  position:relative; border-radius:2px; overflow:hidden; cursor:pointer;
  aspect-ratio:1/1; background:#1a1815;
  border:none; padding:0; margin:0; width:100%; text-align:left; font:inherit; color:inherit; display:block;
}
.tile img{
  width:100%; height:100%; object-fit:cover; display:block;
  filter:grayscale(.3) contrast(1.06) brightness(.78);
  transition:transform .7s cubic-bezier(.16,1,.3,1), filter .5s ease;
}
.tile:hover img{ transform:scale(1.06); filter:grayscale(.05) contrast(1.1) brightness(.9); }
.tile-overlay{
  position:absolute; inset:0;
  background:linear-gradient(to top, rgba(10,9,8,.92) 0%, rgba(10,9,8,.1) 45%, rgba(59,110,104,.22) 100%);
}
.tile-info{ position:absolute; left:20px; right:20px; bottom:18px; }
.tile-cat{
  font-family:'JetBrains Mono',monospace; font-size:10px; letter-spacing:.12em;
  color:var(--gold); display:block; margin-bottom:6px;
}
.tile-title{
  font-family:'Big Shoulders Display',sans-serif; font-weight:700; font-size:24px;
  text-transform:uppercase; line-height:1.05;
}
.tile-client{ font-size:12px; color:var(--muted); margin-top:4px; }
.empty-state{ color:var(--muted); font-family:'JetBrains Mono',monospace; font-size:13px; }

@media(max-width:860px){
  .work-grid{ grid-template-columns:repeat(2,1fr); }
}

/* ---- craft / services ---- */
.craft-grid{
  display:grid; grid-template-columns:repeat(3,1fr); gap:1px;
  background:var(--line); border:1px solid var(--line);
}
.craft-card{ background:var(--bg); padding:40px 32px; }
.craft-num{ font-family:'JetBrains Mono',monospace; font-size:11px; color:var(--muted); }
.craft-card h3{
  font-family:'Big Shoulders Display',sans-serif; font-size:26px; font-weight:700;
  text-transform:uppercase; margin:18px 0 14px;
}
.craft-card p{ color:var(--muted); font-size:14px; line-height:1.65; }
@media(max-width:760px){ .craft-grid{ grid-template-columns:1fr; } }

/* ---- contact / footer ---- */
.contact{ display:flex; justify-content:space-between; align-items:flex-end; flex-wrap:wrap; gap:40px; }
.contact-email{
  font-family:'Big Shoulders Display',sans-serif; font-weight:900;
  font-size:clamp(30px,5.5vw,64px); text-transform:uppercase;
  color:var(--ink); text-decoration:none; border-bottom:2px solid var(--gold);
}
.contact-links{ display:flex; flex-direction:column; gap:10px; font-family:'JetBrains Mono',monospace; font-size:12px; }
.contact-links a{ color:var(--muted); text-decoration:none; }
.contact-links a:hover{ color:var(--ink); }
footer.site-footer{
  padding:28px clamp(20px,4vw,48px) calc(var(--letterbox-h) + 28px);
  display:flex; justify-content:space-between; color:var(--muted);
  font-family:'JetBrains Mono',monospace; font-size:11px; border-top:1px solid var(--line);
  flex-wrap:wrap; gap:8px;
}

/* ---- generic content page (page.php / index.php) ---- */
.project-body{ max-width:820px; padding:0 clamp(20px,4vw,48px) 100px; }
.project-body .entry-content{ color:var(--muted); font-size:16px; line-height:1.75; }
.project-body .entry-content p{ margin-bottom:1em; }

/* ---- lightbox ---- */
.ukp-lightbox{
  position:fixed; inset:0; background:rgba(6,5,4,.95); z-index:100;
  display:flex; align-items:center; justify-content:center;
  opacity:0; pointer-events:none; transition:opacity .3s ease;
  padding:calc(var(--letterbox-h) + 24px) 24px;
}
.ukp-lightbox.is-open{ opacity:1; pointer-events:auto; }
body.lightbox-open{ overflow:hidden; }
.ukp-lightbox-inner{ max-width:min(1100px,92vw); max-height:88vh; display:flex; flex-direction:column; gap:18px; align-items:center; }
.ukp-lightbox-media{ max-height:66vh; display:flex; align-items:center; justify-content:center; }
.ukp-lightbox-media img{ max-height:66vh; max-width:100%; object-fit:contain; filter:grayscale(.15) contrast(1.05); }
.ukp-lightbox-media iframe{ width:min(900px,88vw); height:calc(min(900px,88vw) * 0.5625); border:0; max-height:60vh; }
.ukp-lightbox-caption{ text-align:center; }
.ukp-lightbox-cat{ font-family:'JetBrains Mono',monospace; font-size:11px; color:var(--gold); letter-spacing:.1em; }
.ukp-lightbox-caption h3{ font-family:'Big Shoulders Display',sans-serif; font-size:clamp(22px,3vw,32px); text-transform:uppercase; margin-top:4px; }
.ukp-lightbox-caption p{ color:var(--muted); font-size:13px; margin-top:4px; }
.ukp-lightbox-caption a{ color:var(--gold); font-family:'JetBrains Mono',monospace; font-size:12px; display:inline-block; margin-top:8px; text-decoration:none; }
.ukp-lightbox-close{
  position:absolute; top:calc(var(--letterbox-h) + 16px); right:24px;
  background:none; border:none; color:var(--ink); font-size:20px; cursor:pointer; z-index:2;
}
.ukp-lightbox-nav{
  position:absolute; top:50%; transform:translateY(-50%);
  background:none; border:none; color:var(--ink); font-size:40px; cursor:pointer; padding:12px; z-index:2;
}
.ukp-lightbox-nav.prev{ left:8px; }
.ukp-lightbox-nav.next{ right:8px; }
@media(max-width:700px){ .ukp-lightbox-nav{ font-size:28px; } }

a:focus-visible, button:focus-visible{ outline:2px solid var(--gold); outline-offset:3px; }