/*
Theme Name: VIRTÙ
Theme URI: https://example.com/
Author: [ÄRKEÄ] + DESIGN LAB.
Description: VIRTÙ — tek sayfalık editoryal stüdyo teması. Tüm metin ve görseller Görünüm → Özelleştir → "VIRTÙ — Sayfa İçeriği" panelinden düzenlenir.
Version: 2.2.0
Requires at least: 6.0
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: arkea
*/

/* ---------- Tokens (Framer'dan ölçüldü @1440px) ---------- */
:root {
  --m: 15px;                                   /* kenar boşluğu */
  --g: 15px;                                   /* kolon arası */
  --col: calc((100vw - var(--m) * 2 - var(--g) * 7) / 8);
  --big: 20.222vw;                             /* 291.2px @1440 */
  --ink: #000;
  --paper: #fff;
  --dim: .07;                                  /* soluk kelimeler */
  --line: rgba(0,0,0,.1);
  --font: "Be Vietnam Pro", "Helvetica Neue", Arial, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font);
  font-size: 15px;
  line-height: 18px;
  font-weight: 600;
  letter-spacing: -0.032em;                    /* -0.48px */
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
h1, h2, h3, p { margin: 0; font: inherit; letter-spacing: inherit; }
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }
::selection { background: #000; color: #fff; }

.sb-big {
  font-size: var(--big);
  line-height: .8;
  font-weight: 900;
  letter-spacing: -0.055em;
  white-space: nowrap;
}

/* Görsel yer tutucu (görsel eklenince kaybolur) */
.ph {
  width: 100%; height: 100%;
  background: linear-gradient(135deg, #d9d9d6 0%, #bdbdb8 100%);
  position: relative;
}
.ph::after {
  content: attr(data-label);
  position: absolute; right: var(--m); bottom: var(--m);
  font-size: 12px; line-height: 1; color: rgba(0,0,0,.45); letter-spacing: 0;
}

/* ---------- Menü ---------- */
.sb-nav {
  position: fixed; top: 15px; left: 0; right: 0; z-index: 20;
  display: grid; grid-template-columns: repeat(8, 1fr); column-gap: var(--g);
  padding: 0 var(--m);
  color: #fff; mix-blend-mode: difference;
  pointer-events: none;
}
.sb-nav a { pointer-events: auto; width: fit-content; }
.sb-nav .sb-nav-first { grid-column: 5; }
.sb-nav .sb-logo { grid-column: 1; grid-row: 1; }
.sb-nav .sb-logo img { height: 18px; width: auto; filter: brightness(0) invert(1); }
.sb-hero-logo { position: absolute; left: 12px; right: 12px; bottom: 12px; margin: 0; }
.sb-hero-logo img { width: 100%; height: auto; max-height: 40vh; object-fit: contain; object-position: left bottom; }
.sb-nav a:hover { opacity: .6; }

/* ---------- Giriş kartı ---------- */
.sb-hero { position: fixed; inset: 0; z-index: 10; pointer-events: none; }
.no-js .sb-hero { display: none; }
.sb-hero-card {
  position: absolute; top: 0; bottom: 0; left: 50%; width: 50%;
  background: var(--paper); color: var(--ink);
  overflow: hidden; pointer-events: auto;
  will-change: transform;
}
.sb-hero-c1, .sb-hero-c2 { position: absolute; top: calc(50% - 18px); }
.sb-hero-c1 { left: 12px; }
.sb-hero-c2 { left: calc(12px + var(--col) + var(--g)); }
.sb-hero-title { position: absolute; left: -.01em; bottom: .03em; }

/* ---------- İşler ---------- */
.sb-works { position: relative; z-index: 1; background: #111; }
.sb-work { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; color: #fff; }
.sb-work-media, .sb-work-media img, .sb-work-media .ph { position: absolute; inset: 0; width: 100%; height: 100%; }
.sb-work-media img { object-fit: cover; }
.sb-work:nth-child(4n+1) .ph { background: linear-gradient(120deg, #4b2a3a, #a0624c); }
.sb-work:nth-child(4n+2) .ph { background: linear-gradient(120deg, #bdbdbd, #1a1a1a 55%, #e5e5e5); }
.sb-work:nth-child(4n+3) .ph { background: linear-gradient(150deg, #111 30%, #9a9a96 50%, #111 70%); }
.sb-work:nth-child(4n+4) .ph { background: linear-gradient(150deg, #6a6a68, #d8d8d4 50%, #555); }
.sb-work .ph::after { color: rgba(255,255,255,.6); }
.sb-work-meta {
  position: absolute; top: calc(50% - 18px); left: var(--m); right: var(--m);
  display: grid; grid-template-columns: repeat(8, 1fr); column-gap: var(--g);
}
.sb-work-meta > span { grid-column: 1; }
.sb-work-meta > h2, .sb-work-meta > a { grid-column: 2 / span 2; }
.sb-work-meta > p { grid-column: 2 / span 2; }

/* ---------- Hizmetler ---------- */
.sb-services { position: relative; z-index: 2; background: var(--paper); padding: 30vh var(--m) 22vh; overflow: hidden; }
.sb-service { position: relative; display: flex; justify-content: space-between; align-items: flex-start; }
.sb-service h2 { margin-left: -.035em; opacity: var(--dim); transition: opacity .35s ease; }
.sb-service-idx { padding-top: .6vw; opacity: var(--dim); transition: opacity .35s ease; }
.sb-service.is-active h2, .sb-service.is-active .sb-service-idx { opacity: 1; }
.no-js .sb-service h2, .no-js .sb-service-idx { opacity: 1; }

/* ---------- Süreç ---------- */
.sb-process { position: relative; z-index: 2; background: var(--paper); padding: 0 var(--m) 20vh; }
.sb-step {
  position: sticky; top: calc(90px + var(--i, 0) * 0px);
  display: grid; grid-template-columns: repeat(8, 1fr); column-gap: var(--g);
  background: var(--paper);
  border-top: 1px solid var(--line);
  padding: var(--m) 0 calc(var(--m) * 2);
  min-height: calc(var(--big) * .8 + 45px);
}
.sb-step:nth-child(2) { top: 150px; }
.sb-step:nth-child(3) { top: 210px; }
.sb-step-num { grid-column: 1 / span 2; margin-left: -.04em; }
.sb-step-title { grid-column: 3; }
.sb-step-text { grid-column: 5 / span 2; max-width: 300px; }
.sb-step-media { grid-column: 7 / span 2; aspect-ratio: 338 / 218; overflow: hidden; }
.sb-step-media img { width: 100%; height: 100%; object-fit: cover; }

/* ---------- Hakkında ---------- */
.sb-about { position: relative; z-index: 2; background: var(--paper); padding: 0 var(--m); }
.sb-about-label { position: absolute; left: var(--m); top: calc(5.556vw - 18px); }
.sb-about-text {
  font-size: 5.556vw;                          /* 80px @1440 */
  line-height: 1;
  letter-spacing: -0.05em;
  font-weight: 600;
  text-indent: calc(var(--col) * 4 + var(--g) * 4);
}
.sb-stats { display: grid; grid-template-columns: repeat(3, 1fr); margin-top: 20vh; }
.sb-stat {
  min-height: 92vh; display: flex; flex-direction: column; justify-content: space-between;
  padding: 18vh var(--m) 30px 0;
}
.sb-stat + .sb-stat { border-left: 1px solid var(--line); padding-left: var(--m); }
.sb-stat strong { margin-left: -.05em; font-weight: 900; }
.sb-stat p { max-width: 400px; }

/* ---------- Ekip ---------- */
.sb-team { position: relative; z-index: 2; background: var(--paper); height: 300vh; }
.sb-team-sticky { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; display: grid; place-items: center; }
.sb-team-names { text-align: left; }
.sb-team-name { opacity: var(--dim); transition: opacity .35s ease; }
.sb-team-name.is-active { opacity: 1; }
.sb-team-photos { position: absolute; left: 50%; top: 50%; width: 45.5vw; aspect-ratio: 655 / 415; transform: translate(-50%, -55%); }
.sb-team-photo { position: absolute; inset: 0; opacity: 0; transition: opacity .35s ease; }
.sb-team-photo.is-active { opacity: 1; }
.sb-team-photo img, .sb-team-photo .ph { width: 100%; height: 100%; object-fit: cover; }
.sb-team-photo:nth-child(1) .ph { background: linear-gradient(180deg, #c8102e, #ef4136); }
.sb-team-photo:nth-child(2) .ph { background: linear-gradient(90deg, #a9aea4, #5d5f55); }
.sb-team-photo:nth-child(3) .ph { background: linear-gradient(180deg, #e9e9e9, #777); }
.no-js .sb-team-name, .no-js .sb-team-photo:first-child { opacity: 1; }

/* ---------- Let's talk + iletişim ---------- */
.sb-talk { position: relative; z-index: 2; background: var(--paper); height: 250vh; }
.sb-talk-sticky { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; }
.sb-talk-line {
  position: absolute; left: 0; right: 0; top: 42.6%; transform: translateY(-50%);
  display: flex; align-items: center; white-space: nowrap;
}
.sb-talk-w1 { margin-left: -.035em; }
.sb-talk-gap { flex: 0 0 17vw; }
.sb-talk-media { position: absolute; left: 0; top: 0; width: 100%; height: 100%; overflow: hidden; z-index: 3; will-change: left, top, width, height; }
.sb-talk-media img, .sb-talk-media .ph { width: 100%; height: 100%; object-fit: cover; }
.sb-talk-media .ph { background: radial-gradient(ellipse at 50% 60%, #b3141c 0%, #4a0508 70%); }
.sb-talk-media .ph::after { color: rgba(255,255,255,.6); }
.no-js .sb-talk-media { left: 44%; top: 37%; width: 12.5vw; height: 7vw; }

.sb-footer {
  position: absolute; left: var(--m); right: var(--m); bottom: 15px;
  height: 180px;
  display: grid; grid-template-columns: repeat(8, 1fr); column-gap: var(--g);
}
.sb-fcol { display: flex; flex-direction: column; }
.sb-fcol .sb-fhead { margin-bottom: auto; }
.sb-fcol a:hover { opacity: .55; }
.sb-flines { white-space: pre-line; }
.sb-clock { grid-column: 8; }
.sb-clock-time { font-variant-numeric: tabular-nums; }

/* ---------- Tablet ---------- */
@media (max-width: 1100px) {
  .sb-step-text { grid-column: 4 / span 3; }
}

/* ---------- Mobil ---------- */
@media (max-width: 809px) {
  :root { --big: 27vw; }
  .sb-nav { grid-template-columns: repeat(4, 1fr); }
  .sb-nav .sb-nav-first { grid-column: 1; }
  .sb-nav.has-logo { grid-template-columns: repeat(5, auto); justify-content: space-between; }
  .sb-nav.has-logo .sb-nav-first { grid-column: auto; }
  .sb-hero-card { left: 0; width: 100%; top: 50%; }
  .sb-hero-c1, .sb-hero-c2 { top: var(--m); }
  .sb-hero-c1 { left: var(--m); }
  .sb-hero-c2 { left: 50%; }
  .sb-work-meta { grid-template-columns: 1fr 3fr; }
  .sb-work-meta > h2, .sb-work-meta > a, .sb-work-meta > p { grid-column: 2; }
  .sb-services { padding: 25vh var(--m) 15vh; }
  .sb-service-idx { display: none; }
  .sb-step { grid-template-columns: 1fr 1fr; row-gap: 12px; top: 60px !important; min-height: 0; }
  .sb-step-num { grid-column: 1; grid-row: 1 / span 2; }
  .sb-step-title, .sb-step-text { grid-column: 2; max-width: none; }
  .sb-step-media { grid-column: 1 / -1; }
  .sb-about-text { font-size: 9vw; text-indent: 30%; }
  .sb-about-label { top: calc(9vw - 18px); }
  .sb-stats { grid-template-columns: 1fr; margin-top: 12vh; }
  .sb-stat { min-height: 0; padding: 30px 0 40px; gap: 30px; }
  .sb-stat + .sb-stat { border-left: 0; border-top: 1px solid var(--line); padding-left: 0; }
  .sb-team-photos { width: 70vw; }
  .sb-talk-gap { flex-basis: 20vw; }
  .sb-footer { grid-template-columns: 1fr 1fr; row-gap: 30px; height: auto; }
  .sb-fcol .sb-fhead { margin-bottom: 18px; }
  .sb-clock { grid-column: auto; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

/* İlk proje, giriş kartı çekilirken biraz daha ekranda kalsın (Framer'daki gibi) */
.sb-work:first-child { margin-bottom: 50vh; }
@media (max-width: 809px) {
  .sb-service h2 { font-size: 19.5vw; }
  .sb-talk-line .sb-big { font-size: 21vw; }
  .sb-talk-gap { flex-basis: 13vw; }
}