/* ===== Selçuk Artut — static site shared styles ===== */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --black:#080808; --off-black:#0f0f0f; --charcoal:#1a1a1a; --mid:#2e2e2e;
  --dim:#5a5a5a; --muted:#8a8a8a; --light:#c8c8c8; --white:#f0ede8;
  --accent:#c8a96e; --accent-dim:rgba(200,169,110,0.15);
}
html { scroll-behavior:smooth; }
body {
  background:var(--black); color:var(--white);
  font-family:'Cormorant Garamond',Georgia,serif; font-size:18px; line-height:1.7;
  overflow-x:hidden;
}
a { color:inherit; }
img { display:block; max-width:100%; }

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

/* nav */
nav{
  position:fixed; top:0; left:0; right:0; z-index:100;
  display:flex; align-items:center; justify-content:space-between;
  padding:24px 52px; background:linear-gradient(to bottom,rgba(8,8,8,0.96) 0%,rgba(8,8,8,0.6) 70%,transparent 100%);
}
.nav-logo{ font-family:'Syne',sans-serif; font-size:13px; font-weight:700; letter-spacing:.22em; text-transform:uppercase; text-decoration:none; color:var(--white); }
.nav-links{ display:flex; gap:36px; list-style:none; }
.nav-links a{ font-family:'Syne',sans-serif; font-size:11px; font-weight:500; letter-spacing:.18em; text-transform:uppercase; color:var(--muted); text-decoration:none; transition:color .25s; position:relative; }
.nav-links a::after{ content:''; position:absolute; bottom:-3px; left:0; width:0; height:1px; background:var(--accent); transition:width .3s; }
.nav-links a:hover, .nav-links a.active{ color:var(--white); }
.nav-links a:hover::after, .nav-links a.active::after{ width:100%; }
.nav-toggle{ display:none; background:transparent; border:0; padding:8px; cursor:pointer; width:42px; height:42px; position:relative; z-index:120; }
.nav-toggle span{ display:block; width:24px; height:1.5px; background:var(--white); margin:5px auto; transition:transform .3s, opacity .3s; }
.nav-toggle.open span:nth-child(1){ transform:translateY(6.5px) rotate(45deg); }
.nav-toggle.open span:nth-child(2){ opacity:0; }
.nav-toggle.open span:nth-child(3){ transform:translateY(-6.5px) rotate(-45deg); }

/* section label */
.section-label{ font-family:'Syne',sans-serif; font-size:16px; font-weight:700; letter-spacing:.3em; text-transform:uppercase; color:var(--accent); margin-bottom:40px; display:flex; align-items:center; gap:16px; }
.section-label::after{ content:''; flex:1; max-width:80px; height:1px; background:var(--accent); opacity:.4; }

/* buttons */
.btn{ font-family:'Syne',sans-serif; font-size:11px; font-weight:500; letter-spacing:.22em; text-transform:uppercase; color:var(--accent); text-decoration:none; border:1px solid rgba(200,169,110,.4); padding:15px 38px; transition:background .3s,color .3s,border-color .3s; display:inline-block; }
.btn:hover{ background:var(--accent); color:var(--black); border-color:var(--accent); }

/* footer */
footer{ padding:40px 52px; border-top:1px solid var(--mid); display:flex; justify-content:space-between; align-items:center; background:var(--off-black); flex-wrap:wrap; gap:16px; }
footer p{ font-family:'Syne',sans-serif; font-size:10px; letter-spacing:.15em; color:var(--dim); text-transform:uppercase; }
.footer-socials{ display:flex; gap:24px; list-style:none; }
.footer-socials a{ font-family:'Syne',sans-serif; font-size:10px; letter-spacing:.15em; color:var(--dim); text-decoration:none; text-transform:uppercase; transition:color .2s; }
.footer-socials a:hover{ color:var(--accent); }

/* reveal */
.reveal{ opacity:0; transform:translateY(36px); transition:opacity .8s ease,transform .8s ease; }
.reveal.visible{ opacity:1; transform:translateY(0); }

@keyframes fadeUp{ from{opacity:0;transform:translateY(30px)} to{opacity:1;transform:translateY(0)} }

/* ---------- PORTFOLIO GRID ---------- */
.page-head{ padding:160px 52px 50px; }
.page-head h1{ font-family:'Cormorant Garamond',serif; font-weight:300; font-size:clamp(44px,7vw,86px); line-height:.95; letter-spacing:-.02em; }
.page-head h1 em{ font-style:italic; color:var(--accent); }
.page-head p{ color:var(--muted); max-width:640px; margin-top:20px; font-size:16px; }

.filters{ display:flex; gap:10px; padding:0 52px 40px; flex-wrap:wrap; }
.filter-btn{ font-family:'Syne',sans-serif; font-size:10px; font-weight:500; letter-spacing:.2em; text-transform:uppercase; color:var(--muted); background:none; border:1px solid var(--mid); padding:10px 22px; cursor:pointer; transition:all .25s; }
.filter-btn:hover{ color:var(--white); border-color:var(--dim); }
.filter-btn.active{ color:var(--black); background:var(--accent); border-color:var(--accent); }

.grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:2px; padding:0 52px 60px; }
.card{ position:relative; overflow:hidden; text-decoration:none; display:block; background:var(--charcoal); }
.card img{ width:100%; aspect-ratio:4/3; object-fit:cover; filter:grayscale(15%) brightness(.82); transition:transform .7s cubic-bezier(.25,.46,.45,.94),filter .5s; }
.card:hover img{ transform:scale(1.05); filter:grayscale(0) brightness(1); }
.card-overlay{ position:absolute; inset:0; background:linear-gradient(to top,rgba(8,8,8,.92) 0%,transparent 55%); display:flex; flex-direction:column; justify-content:flex-end; padding:24px; opacity:0; transition:opacity .4s; }
.card:hover .card-overlay{ opacity:1; }
.card-overlay h3{ font-family:'Cormorant Garamond',serif; font-weight:400; font-size:20px; line-height:1.25; margin-bottom:6px; }
.card-overlay .yr{ font-family:'Syne',sans-serif; font-size:10px; letter-spacing:.2em; color:var(--accent); text-transform:uppercase; }
.card.hidden{ display:none; }
.grid-pub{ gap:32px; padding:0 52px 60px; }
.grid-pub .card{ background:transparent; overflow:visible; display:flex; flex-direction:column; align-items:center; }
.grid-pub .card img{ width:100%; height:auto; aspect-ratio:auto; max-height:520px; object-fit:contain; filter:none; background:#000000; }
.grid-pub .card:hover img{ transform:none; filter:none; }
.grid-pub .card-overlay{ position:static; inset:auto; opacity:1; background:none; padding:16px 4px 0; text-align:center; }
.grid-pub .card-overlay h3{ color:var(--light); }

/* ---------- WORK DETAIL ---------- */
.work-wrap{ padding:140px 52px 80px; max-width:1100px; margin:0 auto; }
.work-back{ font-family:'Syne',sans-serif; font-size:10px; letter-spacing:.2em; text-transform:uppercase; color:var(--muted); text-decoration:none; transition:color .2s; }
.work-back:hover{ color:var(--accent); }
.work-cat{ font-family:'Syne',sans-serif; font-size:10px; letter-spacing:.3em; text-transform:uppercase; color:var(--accent); margin:40px 0 18px; }
.work-title{ font-family:'Cormorant Garamond',serif; font-weight:300; font-size:clamp(36px,5.5vw,68px); line-height:1.02; letter-spacing:-.02em; margin-bottom:18px; }
.work-meta{ color:var(--muted); font-size:15px; font-style:italic; margin-bottom:44px; }
.work-img{ width:100%; max-height:70vh; object-fit:cover; margin-bottom:48px; filter:grayscale(8%); }
.work-img-pub{ width:auto; max-width:100%; height:auto; max-height:85vh; object-fit:contain; display:block; margin-left:0; margin-right:auto; filter:none; }
.work-body{ max-width:720px; }
.work-body p{ font-size:19px; line-height:1.5; color:var(--light); margin-bottom:22px; }
.work-source{ margin-top:40px; }
.work-nav{ display:flex; justify-content:space-between; gap:20px; margin-top:80px; padding-top:36px; border-top:1px solid var(--mid); }
.work-nav a{ text-decoration:none; max-width:45%; }
.work-nav .dir{ font-family:'Syne',sans-serif; font-size:9px; letter-spacing:.2em; text-transform:uppercase; color:var(--dim); display:block; margin-bottom:6px; }
.work-nav .ttl{ font-family:'Cormorant Garamond',serif; font-size:20px; color:var(--light); transition:color .2s; }
.work-nav a:hover .ttl{ color:var(--accent); }
.work-nav .next{ text-align:right; margin-left:auto; }

@media (max-width:900px){
  nav{ padding:20px 24px; }
  nav{ padding:18px 24px; }
  .nav-toggle{ display:block; }
  .nav-links{
    display:flex; flex-direction:column; gap:0;
    position:fixed; top:0; right:0; bottom:0; left:0;
    background:rgba(8,8,8,0.98); backdrop-filter:blur(8px);
    padding:100px 32px 40px; margin:0;
    transform:translateX(100%); transition:transform .35s ease;
    z-index:110;
  }
  .nav-links.open{ transform:translateX(0); }
  .nav-links li{ border-bottom:1px solid rgba(255,255,255,0.06); }
  .nav-links a{ display:block; padding:22px 4px; font-size:14px; letter-spacing:.22em; color:var(--light); }
  .nav-links a::after{ display:none; }
  body.nav-open{ overflow:hidden; }
  .grid{ grid-template-columns:1fr 1fr; padding:0 20px 50px; }
  .page-head{ padding:130px 24px 36px; }
  .filters{ padding:0 24px 32px; }
  .work-wrap{ padding:120px 24px 60px; }
  footer{ flex-direction:column; text-align:center; }
}
@media (max-width:600px){ .grid{ grid-template-columns:1fr; } }

/* ---------- WORK: video + gallery (full content) ---------- */
.work-video{ position:relative; width:100%; padding-top:56.25%; margin-bottom:48px; background:var(--charcoal); }
.work-video iframe{ position:absolute; inset:0; width:100%; height:100%; border:0; }
.work-gallery{ display:grid; grid-template-columns:repeat(2,1fr); gap:8px; margin:56px 0 8px; }
.work-gallery.single{ grid-template-columns:1fr; }
.work-gallery img{ width:100%; aspect-ratio:3/2; object-fit:cover; filter:grayscale(8%); transition:filter .4s,transform .6s; }
.work-gallery a:hover img{ filter:grayscale(0); transform:scale(1.02); }
.work-gallery a{ overflow:hidden; display:block; }
@media (max-width:600px){ .work-gallery{ grid-template-columns:1fr; } }