/* =========================================================
   POLO — yeniden yapım
   Değerler orijinalden 1440px'te computed-style olarak ölçüldü.
   Breakpoint'ler orijinalle aynı: ≥1300 desktop · 750–1299 tablet · <750 mobil
   ========================================================= */

/* ------------------------------------------------ Tokens */
:root {
  /* Renk */
  --bg: #080808;
  --surface-1: #0a0a0a;
  --surface-2: #0f0f0f;
  --surface-glass: rgba(17, 17, 17, 0.7);
  --fg: #ffffff;
  --fg-60: rgba(255, 255, 255, 0.6);
  --fg-subtle: #787878;
  --line: rgba(255, 255, 255, 0.1);
  --line-strong: rgba(255, 255, 255, 0.2);
  --chip: rgba(255, 255, 255, 0.1);
  --success: #31ee33;
  --star: gold;

  /* Tipografi */
  --font-display: "Satoshi", "Plus Jakarta Sans", sans-serif;
  --font-ui: "Plus Jakarta Sans", sans-serif;
  --font-label: "Inter", sans-serif;

  /* Yarıçap */
  --r-7: 7px;
  --r-8: 8px;
  --r-10: 10px;
  --r-12: 12px;
  --r-15: 15px;
  --r-16: 16px;
  --r-20: 20px;
  --r-32: 32px;
  --r-48: 48px;
  --r-pill: 999px;

  /* Gölge */
  --sh-card: 16px 24px 20px 8px rgba(0, 0, 0, 0.4), inset 0 2px 0 0 rgba(184, 180, 180, 0.08);
  --sh-drop: 16px 24px 20px 8px rgba(0, 0, 0, 0.4);
  --sh-media: 20px 30px 20px 8px rgba(0, 0, 0, 0.4);
  --sh-edge: inset 0 2px 0 0 rgba(184, 180, 180, 0.08);
  --sh-edge-strong: inset 0 2px 0 0 rgba(184, 180, 180, 0.14);
  --sh-edge-soft: inset 0 2px 0 0 rgba(92, 92, 92, 0.08);
  --sh-glass: inset 0 -0.48px 0.48px -1.25px rgba(0, 0, 0, 0.68),
    inset 0 -1.83px 1.83px -2.5px rgba(0, 0, 0, 0.6), inset 0 -8px 8px -3.75px rgba(0, 0, 0, 0.24);

  /* Gradyan */
  --grad-btn-dark: linear-gradient(180deg, #787878 -382%, #080808 100%);
  --grad-btn-light: linear-gradient(180deg, #ffffff 0%, #787878 140%);
  --grad-card: linear-gradient(121deg, #787878 -52%, #0f0f0f 19%, #080808 100%);
  --grad-fade: linear-gradient(0deg, #080808 65%, rgba(10, 10, 10, 0) 100%);

  /* Hareket */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --spring: cubic-bezier(0.34, 1.36, 0.64, 1);

  /* Düzen */
  --container: 1100px;
  --pad-x: 40px;
  --pad-y: 100px;
}

/* ------------------------------------------------ Base */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 100px; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font: 500 16px/32px var(--font-ui);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img, video { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
p { margin: 0; }
h1, h2, h3, h4, h5 { margin: 0; font-weight: 600; }
ul { margin: 0; padding: 0; list-style: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
:focus-visible { outline: 2px solid var(--fg); outline-offset: 3px; border-radius: 4px; }

.ico { width: 20px; height: 20px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }

/* ------------------------------------------------ Tipografi */
.h1, .h2 { font-family: var(--font-display); font-weight: 400; letter-spacing: -2px; }
.h1 { font-size: 72px; line-height: 1.2; }
.h2 { font-size: 54px; line-height: 1.1; }
.muted { color: var(--fg-60); }
.h3 { font-size: 30px; line-height: 42px; }
.h4 { font-size: 25px; line-height: 35px; }
.h5 { font-size: 20px; line-height: 28px; }
.lead { color: var(--fg-60); }
.op7 { opacity: 0.7; }
.op6 { opacity: 0.6; }
.op5 { opacity: 0.5; }

/* ------------------------------------------------ Bileşenler */

/* Etiket pill */
.label {
  display: inline-flex; align-items: center; gap: 6px; align-self: flex-start;
  padding: 6px 16px; border-radius: var(--r-20);
  background: var(--surface-2); box-shadow: var(--sh-card);
  font: 400 15px/27px var(--font-label); letter-spacing: -0.3px;
}
.label .dot { width: 11px; height: 11px; border-radius: 10px; background: var(--fg); flex: none; }
.label .ico { width: 16px; height: 16px; }

/* Butonlar — hover: opacity .8 (orijinaldeki tek hover efekti) */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  height: 58px; padding: 13px 26px; border-radius: 100px;
  font: 500 16px/32px var(--font-ui); white-space: nowrap;
  transition: opacity 0.3s ease;
}
.btn:hover { opacity: 0.8; }
.btn--dark { background: var(--grad-btn-dark); color: var(--fg); }
.btn--light { background: var(--grad-btn-light); color: var(--bg); }
.btn-row { display: flex; flex-wrap: wrap; gap: 16px; align-items: center; }

/* Kart */
.card { background: var(--surface-2); border-radius: var(--r-20); box-shadow: var(--sh-card); padding: 30px; }
.hr { height: 1px; background: var(--fg); opacity: 0.1; border: 0; margin: 0; width: 100%; }

/* Ok ikonu: -35° döndürülmüş daire, hover'da ok değişimi */
.arrow-ico {
  position: relative; display: grid; place-items: center; flex: none; overflow: hidden;
  width: 67px; height: 67px; border-radius: 100px; background: var(--surface-1);
  transform: rotate(-35deg);
}
.arrow-ico--lg { width: 75px; height: 75px; background: var(--bg); box-shadow: var(--sh-edge-strong); }
.arrow-ico svg {
  position: absolute; width: 45%; height: 45%; fill: none; stroke: #fff; stroke-width: 1.6;
  stroke-linecap: round; stroke-linejoin: round;
  transition: transform 0.45s var(--ease-out);
}
.arrow-ico svg:last-child { transform: translateX(-200%); }
.hover-arrow:hover .arrow-ico svg:first-child { transform: translateX(200%); }
.hover-arrow:hover .arrow-ico svg:last-child { transform: translateX(0); }

/* Durum rozeti + nabız */
.status {
  position: absolute; left: 50%; bottom: 16px; transform: translateX(-50%);
  display: inline-flex; align-items: center; gap: 10px; padding: 6px 12px; border-radius: var(--r-8);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); background: rgba(8, 8, 8, 0.35);
  font: 600 12px/22px var(--font-ui); white-space: nowrap;
}
.pulse { position: relative; width: 10px; height: 10px; }
.pulse i { position: absolute; inset: 0; border-radius: 50%; background: var(--success); box-shadow: 0 0 20px 0 rgba(49, 238, 51, 0.5); }
.pulse i + i { background: transparent; box-shadow: none; border: 1px solid var(--success); animation: pulse 1.4s ease-out infinite; }
@keyframes pulse { from { transform: scale(1); opacity: 0.5; } to { transform: scale(3.2); opacity: 0; } }

.stars { color: var(--star); display: inline-flex; gap: 4px; font-size: 15px; line-height: 1; letter-spacing: 0; }

/* Bölüm başlığı */
.sec-head { display: flex; flex-direction: column; gap: 24px; }
.sec-head .titles { display: flex; flex-direction: column; gap: 16px; }
.sec-head--center { align-items: center; text-align: center; max-width: 720px; margin: 0 auto; }
.sec-head--center .label { align-self: center; }

/* ------------------------------------------------ Bölüm iskeleti
   Her bölüm üstte 48px kavisli, aşağı doğru solan 1px çerçeveyle başlar */
.section { position: relative; padding: var(--pad-y) var(--pad-x); border-radius: 16px; }
.section--alt { background: var(--surface-1); }
.section::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  border: 1px solid var(--line); border-radius: var(--r-48);
  -webkit-mask-image: linear-gradient(180deg, #000 0%, rgba(0, 0, 0, 0.16) 83%);
          mask-image: linear-gradient(180deg, #000 0%, rgba(0, 0, 0, 0.16) 83%);
}
.wrap { max-width: var(--container); margin: 0 auto; position: relative; }

/* ------------------------------------------------ Nav */
.nav-wrap { position: fixed; top: 25px; left: 0; right: 0; z-index: 50; padding: 0 20px; pointer-events: none; }
.nav {
  pointer-events: auto; position: relative; margin: 0 auto; max-width: 840px; height: 64px;
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 40px; border-radius: var(--r-32);
  background: var(--surface-glass); border: 1px solid var(--line);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
}
.logo { display: inline-flex; align-items: center; gap: 6px; font: 500 30px/1 var(--font-ui); letter-spacing: -1px;
  background: linear-gradient(180deg, #fff 20%, #8a8a8a 120%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.logo-mark { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; background: var(--grad-btn-light); flex: none; }
.logo-mark svg { width: 16px; height: 16px; fill: #111; }
.nav-right { display: flex; align-items: center; gap: 16px; }
.nav-links { display: flex; gap: 8px; }
.nav-links a { padding: 6px 12px; color: var(--fg-60); transition: color 0.25s ease; }
.nav-links a:hover { color: var(--fg); }
.nav-cta {
  display: inline-flex; align-items: center; gap: 6px; height: 48px; padding: 8px 20px; border-radius: 120px;
  border: 1px solid var(--line); box-shadow: var(--sh-glass);
  background: linear-gradient(var(--cta-angle, 180deg), #080808 -74%, rgba(255, 255, 255, 0.1) 183%);
  transition: --cta-angle 0.5s ease;
}
.nav-cta .ico { width: 24px; height: 24px; opacity: 0.6; transition: opacity 0.3s ease; }
.nav-cta:hover { --cta-angle: 0deg; }
.nav-cta:hover .ico { opacity: 1; }
@property --cta-angle { syntax: "<angle>"; inherits: false; initial-value: 180deg; }

.nav-toggle { display: none; width: 44px; height: 44px; }
.nav-toggle span { display: block; width: 20px; height: 2px; margin: 5px auto; background: var(--fg); border-radius: 2px; transition: transform 0.3s ease; }
.mobile-menu {
  pointer-events: auto; max-width: 840px; margin: 8px auto 0; padding: 12px; border-radius: var(--r-20);
  background: var(--surface-glass); border: 1px solid var(--line); backdrop-filter: blur(12px);
  display: grid; opacity: 0; transform: translateY(-8px); visibility: hidden;
  transition: opacity 0.3s ease, transform 0.3s var(--ease-out), visibility 0.3s;
}
.mobile-menu a { padding: 10px 14px; color: var(--fg-60); border-radius: 12px; }
.mobile-menu a:hover { color: var(--fg); background: var(--chip); }
.nav-wrap.open .mobile-menu { opacity: 1; transform: none; visibility: visible; }
.nav-wrap.open .nav-toggle span:first-child { transform: translateY(3.5px) rotate(45deg); }
.nav-wrap.open .nav-toggle span:last-child { transform: translateY(-3.5px) rotate(-45deg); }

/* ------------------------------------------------ Hero */
.hero { position: relative; overflow: hidden; padding: 160px var(--pad-x) 100px; }
.hero-video { position: absolute; left: 80px; top: 0; width: calc(100% + 31px); height: 1065px; opacity: 0.08; filter: grayscale(1); pointer-events: none; }
.hero-video img, .hero-video video { width: 100%; height: 100%; object-fit: cover; }
.hero-overlay { position: absolute; left: 0; right: 0; top: 427px; bottom: 0; background: var(--grad-fade); pointer-events: none; }

.stars-field { position: absolute; left: 50%; top: 0; width: 840px; height: 382px; transform: translateX(-50%); overflow: hidden; pointer-events: none; }
.shooting-star { position: absolute; left: 0; top: 0; width: 100px; height: 1px; transform-origin: left center; animation: shoot linear infinite; opacity: 0; }
.shooting-star::before { content: ""; position: absolute; inset: 0; border-radius: 2px; background: linear-gradient(270deg, rgba(255, 255, 255, 0.6), rgba(255, 255, 255, 0)); }
.shooting-star::after { content: ""; position: absolute; right: -1px; top: -0.5px; width: 2px; height: 2px; border-radius: 1px; background: rgba(255, 255, 255, 0.2); box-shadow: 0 0 6px 1px rgba(255, 255, 255, 0.6); }
@keyframes shoot {
  0% { transform: translate(var(--x0, 0), var(--y0, 0)) scale(var(--s, 1)) rotate(22.6deg); opacity: 0; }
  8% { opacity: 1; }
  80% { opacity: 1; }
  100% { transform: translate(calc(var(--x0, 0px) + 780px), calc(var(--y0, 0px) + 325px)) scale(var(--s, 1)) rotate(22.6deg); opacity: 0; }
}

.hero-inner { position: relative; z-index: 2; max-width: 1360px; margin: 0 auto; display: flex; flex-direction: column; gap: 44px; }
.hero-top { position: relative; width: 100%; max-width: 1200px; margin: 0 auto; display: flex; flex-direction: column; gap: 24px; }
.hero-heading { display: flex; flex-direction: column; gap: 16px; max-width: 600px; }
.hero-title { display: flex; align-items: center; gap: 16px; }
.hero-title .arrow-ico { margin-top: 14px; }
.hero-text { max-width: 500px; color: var(--fg-60); }

.hero-quotes { position: absolute; inset: 0; pointer-events: none; }
.quote {
  position: absolute; width: 237px; padding: 24px; border-radius: var(--r-12);
  background: var(--surface-2); box-shadow: var(--sh-edge), var(--sh-drop);
  display: flex; flex-direction: column; gap: 14px;
  font: 500 16px/30px var(--font-ui);
}
.quote small { font-size: 16px; opacity: 0.5; text-align: right; }
.quote--1 { left: 667px; top: 31px; transform: rotate(-14deg); }
.quote--2 { left: 965px; top: 164px; width: 223px; transform: rotate(6deg); }
.float-a { animation: floatY 4s ease-in-out infinite; }
.float-b { animation: floatY 4s ease-in-out -2s infinite; }
@keyframes floatY { 0%, 100% { translate: 0 -3px; } 50% { translate: 0 3px; } }

/* Bento proje ızgarası (hero + projeler) */
.bento { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 16px; width: 100%; }
.bento-col { display: flex; flex-direction: column; gap: 24px; }
.bento-card {
  position: relative; display: flex; padding: 20px; border-radius: var(--r-20);
  background: var(--surface-2); box-shadow: var(--sh-card); cursor: none;
}
.bento-card .media { position: relative; width: 100%; border-radius: var(--r-8); overflow: hidden; box-shadow: var(--sh-media); }
.bento-card .media img { width: 100%; height: 100%; object-fit: cover; object-position: left center; transition: transform 0.8s var(--ease-out); }
.bento-card:hover .media img { transform: scale(1.03); }
.bento-card--tall .media { height: 509px; }
.bento-card--short .media { height: 235px; }
.bento-card .arrow-ico { position: absolute; left: -3px; bottom: 3px; z-index: 2; }

.scroll-hint {
  align-self: center; width: 39px; height: 39px; border-radius: 36px; display: grid; place-items: center;
  animation: bob 1.8s ease-in-out infinite; color: var(--fg-60);
}
@keyframes bob { 0%, 100% { transform: translateY(3px); } 50% { transform: translateY(15px); } }

/* "View project" imleç takipçisi */
.cursor-pill {
  position: fixed; left: 0; top: 0; z-index: 60; pointer-events: none;
  padding: 16px 20px; border-radius: 999px;
  border: 1px solid #d6d6d6; background: rgba(99, 99, 99, 0.3);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  box-shadow: 0 0 20px 4px rgba(92, 92, 92, 0.3);
  font: 300 16px/1 var(--font-label); color: #fff; white-space: nowrap;
  opacity: 0; scale: 0.6; transition: opacity 0.25s ease, scale 0.35s var(--spring);
}
.cursor-pill.show { opacity: 1; scale: 1; }

/* ------------------------------------------------ Profil */
.profile-content { display: flex; gap: 44px; align-items: flex-start; margin-top: 44px; }
.profile-card { flex: 0 0 453px; padding: 24px 24px 32px; border-radius: var(--r-16); background: var(--surface-2); box-shadow: var(--sh-card); display: flex; flex-direction: column; gap: 24px; }
.portrait { position: relative; height: 382px; border-radius: var(--r-16); overflow: hidden; }
.portrait img { width: 100%; height: 100%; object-fit: cover; object-position: center 20%; }
.person { display: flex; flex-direction: column; gap: 24px; }
.person-name { display: flex; flex-direction: column; gap: 8px; }
.person-name p { font: 400 15px/27px var(--font-label); }
.socials { display: flex; align-items: center; gap: 24px; }
.socials .sep { width: 1px; height: 24px; background: var(--fg); opacity: 0.1; }
.social {
  width: 40px; height: 40px; border-radius: 100px; background: var(--bg); display: grid; place-items: center;
  transition: background 0.25s ease, transform 0.25s ease;
}
.social:hover { background: #1a1a1a; transform: translateY(-2px); }
.social .ico { width: 22px; height: 22px; }

.more-info { flex: 1; padding: 30px 30px 54px; border-radius: var(--r-20); background: var(--surface-2); box-shadow: var(--sh-card); display: flex; flex-direction: column; gap: 32px; }
.skills { display: flex; flex-wrap: wrap; gap: 16px; }
.skill { padding: 8px 12px; border-radius: var(--r-8); background: var(--bg); }
.skill span { opacity: 0.8; color: var(--fg-60); }
.exp { display: flex; flex-direction: column; gap: 20px; }
.exp li {
  display: grid; grid-template-columns: 1fr 1fr auto; gap: 48px; align-items: center;
  padding: 16px; border-radius: var(--r-10); background: var(--surface-1); box-shadow: var(--sh-drop);
}
.exp li span:nth-child(2) { color: var(--fg-60); }

/* ------------------------------------------------ Süreç */
.process { overflow: hidden; }
.process-track { display: flex; gap: 24px; justify-content: center; margin: 44px 0; will-change: transform; }
.step { flex: 0 0 400px; position: relative; display: flex; flex-direction: column; gap: 24px; padding: 30px; border-radius: var(--r-16); background: var(--surface-2); box-shadow: var(--sh-card); }
.step-num { position: absolute; top: 10px; right: 14px; min-width: 38px; height: 38px; padding: 3px 14px; border-radius: 100px; display: grid; place-items: center; background: var(--bg); box-shadow: var(--sh-edge-strong); }
.step > .ico { width: 30px; height: 30px; }
.step .content { display: flex; flex-direction: column; gap: 10px; }
.step-badge { align-self: flex-start; padding: 4px 16px; border-radius: var(--r-pill); border: 1px solid var(--line); background: var(--surface-2); }
.step-badge span { opacity: 0.7; }
.every-step {
  max-width: 840px; margin: 0 auto; display: flex; align-items: center; justify-content: space-between; gap: 24px;
  padding: 24px; border-radius: var(--r-20); background: var(--surface-2); box-shadow: var(--sh-card);
}
.every-step .txt { display: flex; flex-direction: column; gap: 10px; }
.every-step .h5 { display: flex; align-items: center; gap: 10px; }

/* ------------------------------------------------ Hizmetler */
.services-top { display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; }
.services-top .sec-head { max-width: 720px; }
.services-bento { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 20px; margin-top: 44px; align-items: start; }
.services-col { display: flex; flex-direction: column; gap: 20px; }
.service { display: flex; flex-direction: column; gap: 32px; }
.service .content { display: flex; flex-direction: column; gap: 16px; }
.service .h5 { display: flex; align-items: center; gap: 10px; }
.service-media { height: 239px; border-radius: var(--r-7); overflow: hidden; box-shadow: var(--sh-media); }
.service-media img { width: 100%; height: 100%; object-fit: cover; }
.ticker { overflow: hidden; margin: -10px -30px -10px; padding: 10px 0;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 15%, #000 85%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 15%, #000 85%, transparent); }
.ticker-track { display: flex; gap: 10px; width: max-content; animation: marquee 27s linear infinite; }
.ticker-track img { width: 300px; height: 233px; object-fit: cover; border-radius: var(--r-15); flex: none; }

.more-services { margin-top: 44px; display: flex; flex-direction: column; gap: 0; overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); }
.marquee-row { padding: 10px; }
.marquee-track { display: flex; gap: 24px; width: max-content; animation: marquee 31s linear infinite; }
.marquee-row--rev .marquee-track { animation-duration: 33.6s; animation-direction: reverse; }
.pill-tag { display: inline-flex; align-items: center; gap: 10px; height: 56px; padding: 12px 16px; border-radius: 78px; background: var(--surface-2); color: var(--fg-60); white-space: nowrap; flex: none; }
@keyframes marquee { to { transform: translateX(-50%); } }

/* ------------------------------------------------ Projeler */
.projects-top { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; align-items: end; margin-bottom: 44px; }
.projects-top .btn-row { justify-content: flex-end; }
.title-row { display: flex; align-items: center; gap: 16px; }
.title-row .arrow-ico { margin-top: 14px; }

/* ------------------------------------------------ Neden ben */
.why-head { position: sticky; top: 130px; z-index: 0; }
.why-stack { display: flex; flex-direction: column; gap: 24px; margin-top: 44px; position: relative; z-index: 1; }
.why-row {
  position: sticky; display: grid; grid-template-columns: 1fr 1fr; gap: 50px; padding: 40px;
  border-radius: var(--r-20); background: var(--surface-2); box-shadow: var(--sh-edge-soft), 0 -24px 40px rgba(0, 0, 0, 0.45);
}
.why-row:nth-child(1) { top: 340px; }
.why-row:nth-child(2) { top: 360px; }
.why-row:nth-child(3) { top: 380px; }
.why-row:nth-child(4) { top: 400px; }
.why-item { display: flex; flex-direction: column; gap: 30px; }
.why-item .txt { display: flex; flex-direction: column; gap: 10px; }
.check { width: 29px; height: 29px; padding: 6px; border-radius: 100px; background: var(--chip); display: grid; place-items: center; }
.check .ico { width: 17px; height: 17px; }

/* ------------------------------------------------ Yorumlar */
.split { display: flex; gap: 44px; align-items: flex-start; }
.split-left { flex: 0 0 576px; position: sticky; top: 130px; display: flex; flex-direction: column; gap: 24px; }
.stats { display: flex; gap: 24px; }
.stat { flex: 1; display: flex; flex-direction: column; gap: 8px; padding: 24px; border-radius: var(--r-10); background: var(--surface-2); box-shadow: var(--sh-card); }
.stat p { opacity: 0.5; }
.line2 { height: 2px; background: var(--line); opacity: 0.8; }
.reviews { flex: 1; display: flex; flex-direction: column; gap: 24px; }
.review-sticky { position: sticky; }
.review-sticky:nth-child(1) { top: 130px; }
.review-sticky:nth-child(2) { top: 150px; }
.review-sticky:nth-child(3) { top: 170px; }
.review-sticky:nth-child(4) { top: 190px; }
.review {
  position: relative; overflow: hidden; isolation: isolate;
  display: flex; flex-direction: column; gap: 24px; padding: 24px;
  border-radius: var(--r-16); background: var(--grad-card); box-shadow: var(--sh-edge), 0 -16px 32px rgba(0, 0, 0, 0.45);
}
.review-bg { position: absolute; inset: 0; z-index: -1; opacity: 0.25; filter: brightness(0.15) blur(40px); }
.review-bg img { width: 100%; height: 100%; object-fit: cover; }
.review-head { display: flex; gap: 16px; align-items: center; }
.avatar { width: 76px; height: 76px; border-radius: var(--r-8); object-fit: cover; flex: none; }
.review-head .txt { display: flex; flex-direction: column; gap: 8px; }
.review .line { height: 1px; background: var(--line); opacity: 0.8; border-radius: 8px; }
.rating { display: flex; align-items: center; gap: 8px; font-size: 15px; line-height: 19px; }

/* ------------------------------------------------ SSS */
.faq-left { flex: 0 0 451px; }
.faq { flex: 1; display: flex; flex-direction: column; gap: 12px; }
.faq-item { border-radius: var(--r-15); background: var(--surface-2); box-shadow: var(--sh-card); padding: 0 20px 0 10px; }
.faq-q {
  width: 100%; display: flex; justify-content: space-between; align-items: center; gap: 25px;
  padding: 20px 10px; text-align: left; font: 400 15px/27px var(--font-label);
}
.faq-q .plus { position: relative; width: 14px; height: 14px; flex: none; transition: transform 0.35s var(--ease-out); }
.faq-q .plus::before, .faq-q .plus::after { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 1.5px; margin-top: -0.75px; background: var(--fg); border-radius: 2px; }
.faq-q .plus::after { transform: rotate(90deg); }
.faq-item.open .plus { transform: rotate(45deg); }
.faq-a { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 0.4s var(--ease-out); }
.faq-a > div { overflow: hidden; }
.faq-a p { padding: 0 10px 22px; color: var(--fg-60); opacity: 0; transform: translateY(-6px); transition: opacity 0.3s ease, transform 0.4s var(--ease-out); }
.faq-item.open .faq-a { grid-template-rows: 1fr; }
.faq-item.open .faq-a p { opacity: 1; transform: none; }

/* ------------------------------------------------ CTA + Footer (footer CTA'nın altından açılır) */
.cta-holder { position: relative; z-index: 2; }
.cta { position: relative; padding: 40px; border-radius: var(--r-48); background: var(--surface-1); }
.cta::after { content: ""; position: absolute; inset: 0; pointer-events: none; border: 1px solid var(--line); border-radius: var(--r-48);
  -webkit-mask-image: linear-gradient(180deg, #000 0%, rgba(0, 0, 0, 0.16) 83%); mask-image: linear-gradient(180deg, #000 0%, rgba(0, 0, 0, 0.16) 83%); }
.cta-grid { display: flex; gap: 44px; align-items: center; }
.cta-left { flex: 0 0 504px; display: flex; flex-direction: column; gap: 32px; }
.price-list { display: flex; flex-direction: column; gap: 16px; }
.price-row { display: flex; flex-direction: column; gap: 16px; }
.price-row .head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.price-badge { padding: 4px 8px; border-radius: var(--r-pill); border: 1px solid var(--line); font-size: 16px; line-height: 22px; }
.cta-card { flex: 1; padding: 24px; border-radius: var(--r-20); background: var(--surface-2); box-shadow: var(--sh-card); }
.cta-card .media { height: 290px; border-radius: var(--r-7); overflow: hidden; box-shadow: var(--sh-media); }
.cta-card img { width: 100%; height: 100%; object-fit: cover; }

.footer { position: relative; z-index: 1; padding: 100px var(--pad-x); transform: perspective(1200px) translateY(var(--footer-y, -150px)); }
.footer-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 24px; }
.footer-left { display: flex; flex-direction: column; gap: 60px; }
.footer-links { display: flex; gap: 32px; flex-wrap: wrap; }
.footer-links a, .footer-bottom a { color: var(--fg-60); transition: color 0.25s ease; }
.footer-links a:hover, .footer-bottom a:hover { color: var(--fg); }
.footer .socials { gap: 24px; }
.footer-bottom { display: flex; justify-content: space-between; gap: 24px; flex-wrap: wrap; margin-top: 60px; color: var(--fg-60); }
.footer-bottom .right { display: flex; gap: 32px; }
.footer-bottom a { color: var(--fg); }

/* Ekranın altında kademeli bulanıklık (orijinalde 100px, 8 katman) */
.bottom-blur { position: fixed; left: 0; right: 0; bottom: 0; height: 100px; z-index: 40; pointer-events: none; }
.bottom-blur div { position: absolute; inset: 0; }
.bottom-blur div:nth-child(1) { backdrop-filter: blur(0.06px); -webkit-backdrop-filter: blur(0.06px); -webkit-mask-image: linear-gradient(transparent 0%, #000 12.5%, #000 25%, transparent 37.5%); mask-image: linear-gradient(transparent 0%, #000 12.5%, #000 25%, transparent 37.5%); }
.bottom-blur div:nth-child(2) { backdrop-filter: blur(0.11px); -webkit-backdrop-filter: blur(0.11px); -webkit-mask-image: linear-gradient(transparent 12.5%, #000 25%, #000 37.5%, transparent 50%); mask-image: linear-gradient(transparent 12.5%, #000 25%, #000 37.5%, transparent 50%); }
.bottom-blur div:nth-child(3) { backdrop-filter: blur(0.22px); -webkit-backdrop-filter: blur(0.22px); -webkit-mask-image: linear-gradient(transparent 25%, #000 37.5%, #000 50%, transparent 62.5%); mask-image: linear-gradient(transparent 25%, #000 37.5%, #000 50%, transparent 62.5%); }
.bottom-blur div:nth-child(4) { backdrop-filter: blur(0.44px); -webkit-backdrop-filter: blur(0.44px); -webkit-mask-image: linear-gradient(transparent 37.5%, #000 50%, #000 62.5%, transparent 75%); mask-image: linear-gradient(transparent 37.5%, #000 50%, #000 62.5%, transparent 75%); }
.bottom-blur div:nth-child(5) { backdrop-filter: blur(0.88px); -webkit-backdrop-filter: blur(0.88px); -webkit-mask-image: linear-gradient(transparent 50%, #000 62.5%, #000 75%, transparent 87.5%); mask-image: linear-gradient(transparent 50%, #000 62.5%, #000 75%, transparent 87.5%); }
.bottom-blur div:nth-child(6) { backdrop-filter: blur(1.75px); -webkit-backdrop-filter: blur(1.75px); -webkit-mask-image: linear-gradient(transparent 62.5%, #000 75%, #000 87.5%, transparent 100%); mask-image: linear-gradient(transparent 62.5%, #000 75%, #000 87.5%, transparent 100%); }
.bottom-blur div:nth-child(7) { backdrop-filter: blur(3.5px); -webkit-backdrop-filter: blur(3.5px); -webkit-mask-image: linear-gradient(transparent 75%, #000 87.5%, #000 100%); mask-image: linear-gradient(transparent 75%, #000 87.5%, #000 100%); }
.bottom-blur div:nth-child(8) { backdrop-filter: blur(7px); -webkit-backdrop-filter: blur(7px); -webkit-mask-image: linear-gradient(transparent 87.5%, #000 100%); mask-image: linear-gradient(transparent 87.5%, #000 100%); }

/* ------------------------------------------------ Yaklaşım (bento) — Nuance'tan uyarlandı, Polo diline çevrildi */
.eyebrow { font: 500 12px/18px var(--font-label); letter-spacing: 0.16em; text-transform: uppercase; color: var(--fg-60); }
.approach-grid {
  display: grid; gap: 20px; margin-top: 44px;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  grid-template-areas:
    "think think think think think think think collab collab collab collab collab"
    "exp   exp   exp   exp   exp   exp   exp   ship   ship   ship   ship   ship"
    "proc  proc  proc  proc  proc  proc  proc  proc   proc   proc   proc   proc";
}
.ap-card { position: relative; overflow: hidden; display: flex; flex-direction: column; gap: 20px; }
.ap-think { grid-area: think; justify-content: space-between; }
.ap-think-head { display: flex; flex-direction: column; gap: 6px; }
.ap-collab { grid-area: collab; }
.ap-exp { grid-area: exp; }
.ap-shipped { grid-area: ship; }
.ap-process { grid-area: proc; }

/* Design Thinking: ilke ikonları şeridi */
.principles { margin: 0 -30px; overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); }
.principles-track { display: flex; gap: 14px; width: max-content; padding: 0 30px; animation: marquee 28s linear infinite; }
.ap-think:hover .principles-track { animation-play-state: paused; }
.principle { width: 112px; flex: none; display: flex; flex-direction: column; align-items: center; gap: 12px; }
.principle .eyebrow { font-size: 10px; letter-spacing: 0.14em; white-space: nowrap; }
.p-ico {
  position: relative; width: 72px; height: 72px; border-radius: var(--r-16);
  background: var(--bg); box-shadow: var(--sh-edge-strong);
  display: grid; place-items: center;
}
.p-ico i { position: absolute; display: block; }
/* Alignment: soldan hizalı çubuklar + kılavuz çizgi */
.p-align::before { content: ""; position: absolute; left: 20px; top: 16px; bottom: 16px; width: 1px; background: var(--fg-60); opacity: .6; }
.p-align i { left: 23px; height: 6px; border-radius: 3px; background: var(--fg); }
.p-align i:nth-child(1) { top: 22px; width: 28px; animation: alignA 4s var(--ease-out) infinite; }
.p-align i:nth-child(2) { top: 33px; width: 20px; opacity: .6; animation: alignA 4s var(--ease-out) .15s infinite; }
.p-align i:nth-child(3) { top: 44px; width: 24px; opacity: .35; animation: alignA 4s var(--ease-out) .3s infinite; }
@keyframes alignA { 0%, 15% { translate: 8px 0; } 35%, 100% { translate: 0 0; } }
/* Colors: üst üste binen gri tonlar */
.p-colors i { width: 26px; height: 26px; border-radius: 50%; mix-blend-mode: screen; }
.p-colors i:nth-child(1) { background: #fff; opacity: .9; translate: -7px -5px; }
.p-colors i:nth-child(2) { background: #8a8a8a; translate: 7px -5px; }
.p-colors i:nth-child(3) { background: #4a4a4a; translate: 0 7px; }
.p-colors i { animation: breathe 4s ease-in-out infinite; }
.p-colors i:nth-child(2) { animation-delay: -1.3s; } .p-colors i:nth-child(3) { animation-delay: -2.6s; }
@keyframes breathe { 50% { scale: .86; } }
/* Consistency: dört eş kare */
.p-consist { grid-template-columns: 14px 14px; grid-template-rows: 14px 14px; gap: 6px; place-content: center; }
.p-consist i { position: static; width: 14px; height: 14px; border-radius: 4px; background: var(--fg); opacity: .85; animation: blink 3.2s ease-in-out infinite; }
.p-consist i:nth-child(2) { animation-delay: .2s; } .p-consist i:nth-child(3) { animation-delay: .4s; } .p-consist i:nth-child(4) { animation-delay: .6s; }
@keyframes blink { 0%, 60%, 100% { opacity: .85; } 30% { opacity: .3; } }
/* Typography */
.p-type { font: 400 30px/1 var(--font-display); letter-spacing: -1px; color: var(--fg); }
.p-type::after { content: ""; position: absolute; left: 50%; bottom: 17px; width: 30px; height: 1px; translate: -50% 0; background: var(--fg-60); }
/* Visual cues: nokta → bağlantı → kare */
.p-cues i:nth-child(1) { left: 18px; top: 18px; width: 12px; height: 12px; border-radius: 50%; background: var(--fg); }
.p-cues i:nth-child(2) { left: 23px; top: 30px; width: 14px; height: 14px; border-left: 1.5px solid var(--fg-60); border-bottom: 1.5px solid var(--fg-60); border-bottom-left-radius: 6px; }
.p-cues i:nth-child(3) { left: 39px; top: 38px; width: 14px; height: 14px; border-radius: 4px; background: var(--fg); opacity: .7; animation: nudge 2.4s ease-in-out infinite; }
@keyframes nudge { 50% { translate: 3px 0; } }
/* Hierarchy: büyük → küçük */
.p-hier i { left: 18px; border-radius: 3px; background: var(--fg); }
.p-hier i:nth-child(1) { top: 17px; width: 36px; height: 14px; border-radius: 4px; opacity: .9; }
.p-hier i:nth-child(2) { top: 36px; width: 30px; height: 4px; opacity: .6; }
.p-hier i:nth-child(3) { top: 44px; width: 24px; height: 4px; opacity: .4; }
.p-hier i:nth-child(4) { top: 52px; width: 18px; height: 4px; opacity: .25; }
/* Proximity: iki grup nokta */
.p-prox { grid-template-columns: repeat(3, 8px); gap: 5px 5px; place-content: center; }
.p-prox i { position: static; width: 8px; height: 8px; border-radius: 50%; background: var(--fg); }
.p-prox i:nth-child(3), .p-prox i:nth-child(6) { opacity: .4; translate: 5px 0; animation: drift 3s ease-in-out infinite; }
@keyframes drift { 50% { translate: 9px 0; } }

/* Collaboration: Figma benzeri çok oyunculu tuval */
.collab-canvas {
  position: relative; flex: 1; min-height: 190px; margin: 0 -30px -30px; padding: 26px 30px 30px;
  background-image: radial-gradient(rgba(255, 255, 255, 0.07) 1px, transparent 1px);
  background-size: 16px 16px; display: flex; flex-direction: column; gap: 10px;
}
.collab-canvas .h4 { position: relative; }
.sel-target, .sel-target2 { position: relative; }
.sel-box {
  position: absolute; pointer-events: none; border: 1px solid rgba(255, 255, 255, 0.7);
  opacity: 0; transition: opacity .3s ease;
}
.sel-box b { position: absolute; width: 6px; height: 6px; background: var(--bg); border: 1px solid #fff; }
.sel-box b:nth-child(1) { left: -3.5px; top: -3.5px; } .sel-box b:nth-child(2) { right: -3.5px; top: -3.5px; }
.sel-box b:nth-child(3) { left: -3.5px; bottom: -3.5px; } .sel-box b:nth-child(4) { right: -3.5px; bottom: -3.5px; }
.sel-box--a { border-color: rgba(255, 255, 255, 0.85); animation: selA 9s ease-in-out infinite; }
.sel-box--b { border-style: dashed; border-color: rgba(255, 255, 255, 0.5); animation: selB 9s ease-in-out infinite; }
.sel-box--b b { display: none; }
@keyframes selA { 0%, 18% { opacity: 0; } 24%, 46% { opacity: 1; } 52%, 100% { opacity: 0; } }
@keyframes selB { 0%, 58% { opacity: 0; } 64%, 86% { opacity: 1; } 92%, 100% { opacity: 0; } }

.mp-cursor { position: absolute; left: 0; top: 0; display: flex; align-items: flex-start; pointer-events: none; z-index: 2; will-change: transform; }
.mp-cursor svg { width: 16px; height: 16px; flex: none; filter: drop-shadow(0 2px 4px rgba(0,0,0,.5)); }
.mp-cursor em {
  margin: 12px 0 0 -2px; padding: 3px 10px; border-radius: 999px;
  font: 600 12px/18px var(--font-ui); font-style: normal; white-space: nowrap;
  box-shadow: 0 6px 14px rgba(0, 0, 0, 0.45);
}
.mp-cursor--a svg { fill: #fff; stroke: #080808; stroke-width: 1; }
.mp-cursor--a em { background: var(--grad-btn-light); color: var(--bg); }
.mp-cursor--b svg { fill: #787878; stroke: #fff; stroke-width: 1; }
.mp-cursor--b em { background: linear-gradient(180deg, #8a8a8a -60%, #2a2a2a 100%); color: #fff; border: 1px solid var(--line-strong); }

/* Experience: öne çıkan kart */
.ap-exp {
  padding: 30px; border-radius: var(--r-20); background: var(--grad-card); box-shadow: var(--sh-edge), var(--sh-drop);
  justify-content: space-between; min-height: 360px;
}
.ap-exp::before { content: ""; position: absolute; right: -80px; top: -80px; width: 260px; height: 260px; border-radius: 50%;
  background: radial-gradient(circle, rgba(255,255,255,.08), transparent 70%); pointer-events: none; }
.laurel { display: flex; align-items: center; gap: 6px; align-self: flex-start; color: var(--fg-60); }
.laurel-side { width: 52px; height: 122px; }
.laurel-side--r { transform: scaleX(-1); }
.laurel-side .stem { fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linecap: round; }
.laurel-side .leaves ellipse { fill: currentColor; opacity: .75; }
.laurel-num { display: flex; flex-direction: column; align-items: center; min-width: 96px; }
.laurel-num .big { font: 400 64px/1 var(--font-display); letter-spacing: -2px; color: var(--fg); }
.laurel-num .years { font: 400 22px/1.2 var(--font-display); color: var(--fg-60); margin-top: 4px; }
.ap-exp-text { display: flex; flex-direction: column; gap: 10px; max-width: 460px; }
/* yapraklar sırayla belirir */
.js .ap-exp .leaves ellipse { opacity: 0; transition: opacity .4s ease; }
.ap-exp.in .leaves ellipse { opacity: .75; }
.ap-exp.in .leaves ellipse:nth-child(1) { transition-delay: .2s; } .ap-exp.in .leaves ellipse:nth-child(2) { transition-delay: .28s; }
.ap-exp.in .leaves ellipse:nth-child(3) { transition-delay: .36s; } .ap-exp.in .leaves ellipse:nth-child(4) { transition-delay: .44s; }
.ap-exp.in .leaves ellipse:nth-child(5) { transition-delay: .52s; } .ap-exp.in .leaves ellipse:nth-child(6) { transition-delay: .6s; }
.ap-exp.in .leaves ellipse:nth-child(7) { transition-delay: .32s; } .ap-exp.in .leaves ellipse:nth-child(8) { transition-delay: .4s; }
.ap-exp.in .leaves ellipse:nth-child(9) { transition-delay: .48s; } .ap-exp.in .leaves ellipse:nth-child(10) { transition-delay: .56s; }
.ap-exp.in .leaves ellipse:nth-child(11) { transition-delay: .64s; }

/* Projects shipped */
.ap-shipped { justify-content: flex-start; }
.shipped-num { font: 400 88px/1 var(--font-display); letter-spacing: -3px; margin-top: 8px; }
.ship-bars { margin-top: auto; display: flex; align-items: flex-end; gap: 6px; height: 64px; }
.ship-bars i { flex: 1; border-radius: 3px 3px 0 0; background: linear-gradient(180deg, rgba(255,255,255,.55), rgba(255,255,255,.06)); height: 8%; transition: height .9s var(--ease-out); }
.ap-shipped.in .ship-bars i { height: var(--h); }

/* My design process: zaman çizelgesi */
.timeline { list-style: none; margin: 8px 0 0; padding: 0; display: grid; grid-template-columns: auto repeat(4, 1fr); align-items: start; }
.timeline li { position: relative; display: flex; flex-direction: column; align-items: flex-end; gap: 14px; }
.timeline li:first-child { align-items: flex-start; }
.t-dot {
  position: relative; z-index: 1; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center;
  background: var(--bg); box-shadow: var(--sh-edge-strong), 0 0 0 1px var(--line);
  transition: background .4s ease, box-shadow .4s ease;
}
.t-dot svg { width: 16px; height: 16px; fill: none; stroke: var(--bg); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round;
  stroke-dasharray: 20; stroke-dashoffset: 20; transition: stroke-dashoffset .35s ease .15s; }
.t-line { position: absolute; left: 0; right: 30px; top: 14px; height: 2px; background: var(--line); overflow: hidden; }
.t-line i { display: block; height: 100%; width: 100%; background: var(--fg); transform: scaleX(0); transform-origin: left; transition: transform .65s var(--ease-out); }
.t-name { color: var(--fg-60); transition: color .4s ease; white-space: nowrap; }
.timeline li:not(:first-child) .t-name { transform: translateX(calc(50% - 15px)); }
.timeline li:last-child .t-name { transform: none; }
.timeline li.done .t-dot { background: var(--grad-btn-light); box-shadow: 0 0 18px rgba(255,255,255,.25); }
.timeline li.done .t-dot svg { stroke-dashoffset: 0; }
.timeline li.done .t-line i { transform: scaleX(1); }
.timeline li.done .t-name { color: var(--fg); }

@media (prefers-reduced-motion: reduce) and (max-width: 0px) {
  .principles-track, .p-ico i, .sel-box { animation: none !important; }
  .mp-cursor { display: none; }
}
@media (max-width: 1299.98px) {
  .approach-grid { grid-template-columns: minmax(0,1fr) minmax(0,1fr);
    grid-template-areas: "think think" "exp collab" "exp ship" "proc proc"; }
}
@media (max-width: 749.98px) {
  .approach-grid { grid-template-columns: minmax(0,1fr); grid-template-areas: "think" "collab" "exp" "ship" "proc"; }
  .shipped-num { font-size: 72px; }
  .timeline { grid-template-columns: 1fr; gap: 0; }
  .timeline li, .timeline li:first-child { flex-direction: row; align-items: center; gap: 14px; padding: 0 0 22px; }
  .timeline li:not(:first-child) .t-name { transform: none; }
  .t-line { left: 14px; right: auto; top: -22px; width: 2px; height: 22px; }
  .t-line i { transform: scaleY(0); transform-origin: top; }
  .timeline li.done .t-line i { transform: scaleY(1); }
}

/* ================================================================
   kaanyalcinkaya.com — sayfaya özel modüller (Polo dilinde)
   ================================================================ */
.hero-video--still { opacity: .1; }
.hero-video--still img { filter: blur(10px); transform: scale(1.1); object-position: center 30%; }
.logo-mark--ky { font: 600 12px/1 var(--font-ui); letter-spacing: -0.3px; color: #111; }
.status--loc .ico { width: 14px; height: 14px; }
/* Toolkit */
.toolkit { margin-top: 56px; display: grid; grid-template-columns: 220px 1fr; gap: 32px; align-items: start; }
.toolkit-head { display: flex; flex-direction: column; gap: 8px; padding-top: 8px; }
.tools { display: flex; flex-wrap: wrap; gap: 12px; }
.tool { display: inline-flex; align-items: center; gap: 12px; height: 56px; padding: 8px 18px 8px 8px; border-radius: 78px; background: var(--surface-2); box-shadow: var(--sh-edge);
  color: var(--fg-60); transition: color .25s ease, transform .3s var(--ease-out); }
.tool:hover { color: var(--fg); transform: translateY(-3px); }
.tool-ico { position: relative; width: 40px; height: 40px; border-radius: 12px; flex: none; display: grid; place-items: center;
  background: var(--bg); box-shadow: var(--sh-edge-strong); color: var(--fg); font: 600 15px/1 var(--font-ui); letter-spacing: -0.3px; }
.tool-ico .ico { width: 20px; height: 20px; }
.t-figma i { position: absolute; width: 8px; height: 8px; background: #fff; }
.t-figma i:nth-child(1) { left: 12px; top: 8px; border-radius: 4px 0 0 4px; }
.t-figma i:nth-child(2) { left: 20px; top: 8px; border-radius: 0 4px 4px 0; opacity: .7; }
.t-figma i:nth-child(3) { left: 12px; top: 16px; border-radius: 4px 0 0 4px; opacity: .85; }
.t-figma i:nth-child(4) { left: 20px; top: 16px; border-radius: 50%; opacity: .55; }
.t-figma i:nth-child(5) { left: 12px; top: 24px; border-radius: 4px 0 4px 4px; opacity: .4; }

/* Selected work */
.work-grid { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 24px; }
.work-card { display: flex; flex-direction: column; gap: 20px; padding: 20px; border-radius: var(--r-20); background: var(--surface-2); box-shadow: var(--sh-card); cursor: none; }
.work-card .media { position: relative; aspect-ratio: 4 / 3; border-radius: var(--r-8); overflow: hidden; box-shadow: var(--sh-media); }
.work-card .media img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--ease-out); }
.work-card:hover .media img { transform: scale(1.03); }
.work-card .arrow-ico { position: absolute; left: 14px; bottom: 14px; }
.work-meta { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; padding: 0 4px 4px; }
.work-meta > div { display: flex; flex-direction: column; gap: 6px; }
.work-meta p { font-size: 15px; line-height: 26px; }
.work-tag { flex: none; padding: 2px 12px; border-radius: var(--r-pill); border: 1px solid var(--line); font: 500 13px/24px var(--font-label); color: var(--fg-60); white-space: nowrap; }

/* Conference systems */
.conf { overflow: hidden; }
.conf-rail { display: flex; gap: 20px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; margin-top: 44px;
  padding: 10px max(var(--pad-x), calc((100vw - var(--container)) / 2)) 40px; scrollbar-width: none; cursor: grab; }
.conf-rail::-webkit-scrollbar { display: none; }
.conf-rail.dragging { cursor: grabbing; scroll-snap-type: none; scroll-behavior: auto; }
.conf-card { flex: 0 0 340px; scroll-snap-align: start; display: flex; flex-direction: column; gap: 18px; padding: 16px 16px 24px; border-radius: var(--r-20); background: var(--surface-2); box-shadow: var(--sh-card); user-select: none; }
.conf-card--feature { flex-basis: 520px; }
.conf-visual { position: relative; height: 240px; border-radius: var(--r-12); overflow: hidden; background: var(--bg); box-shadow: var(--sh-edge-strong); }
.conf-visual img { width: 100%; height: 100%; object-fit: cover; pointer-events: none; }
.conf-visual--type { display: flex; flex-direction: column; justify-content: flex-end; padding: 20px;
  background: radial-gradient(120% 90% at 85% 0%, rgba(255,255,255,.1), transparent 60%), repeating-linear-gradient(0deg, rgba(255,255,255,.035) 0 1px, transparent 1px 24px), repeating-linear-gradient(90deg, rgba(255,255,255,.035) 0 1px, transparent 1px 24px), var(--bg); }
.conf-visual--type span { font: 400 64px/1 var(--font-display); letter-spacing: -3px; color: var(--fg); }
.conf-visual--type em { font: 500 13px/20px var(--font-label); font-style: normal; letter-spacing: .14em; text-transform: uppercase; color: var(--fg-60); margin-top: 8px; }
.conf-meta { display: flex; flex-direction: column; gap: 6px; padding: 0 8px; }
.conf-meta p { font-size: 15px; line-height: 26px; }
.conf-year { align-self: flex-start; padding: 0 10px; border-radius: var(--r-pill); border: 1px solid var(--line); font: 500 12px/22px var(--font-label); color: var(--fg-60); }
.conf-foot { display: flex; justify-content: space-between; align-items: center; }
.conf-nav { display: flex; gap: 10px; }
.conf-nav .social { box-shadow: var(--sh-edge-strong); }

/* Two disciplines: eyebrow above title */
.why-item .txt .eyebrow { margin-bottom: 2px; }

/* Inspire */
.posts { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 20px; }
.post { display: flex; flex-direction: column; border-radius: var(--r-20); background: var(--surface-2); box-shadow: var(--sh-card); overflow: hidden; transition: transform .4s var(--ease-out); }
.post:hover { transform: translateY(-4px); }
.post-art { position: relative; height: 180px; background: radial-gradient(100% 120% at 0% 0%, rgba(255,255,255,.12), transparent 60%), var(--bg); overflow: hidden; }
.post-art i { position: absolute; display: block; }
.post-art--a i { width: 90px; height: 90px; border-radius: 50%; border: 1px solid rgba(255,255,255,.35); top: 45px; }
.post-art--a i:nth-child(1) { left: calc(50% - 110px); } .post-art--a i:nth-child(2) { left: calc(50% - 45px); background: rgba(255,255,255,.08); } .post-art--a i:nth-child(3) { left: calc(50% + 20px); }
.post-art--b i { width: 34px; height: 34px; border-radius: 10px; background: rgba(255,255,255,.14); top: 73px; transition: transform .5s var(--ease-out); }
.post-art--b i:nth-child(1) { left: calc(50% - 95px); } .post-art--b i:nth-child(2) { left: calc(50% - 55px); border-radius: 50%; } .post-art--b i:nth-child(3) { left: calc(50% - 15px); background: #fff; } .post-art--b i:nth-child(4) { left: calc(50% + 25px); border-radius: 50%; } .post-art--b i:nth-child(5) { left: calc(50% + 65px); }
.post:hover .post-art--b i:nth-child(odd) { transform: translateY(-10px); }
.post-art--c i:nth-child(1) { left: 50%; top: 50%; width: 120px; height: 120px; margin: -60px; border: 1px solid rgba(255,255,255,.3); transform: rotate(45deg) skew(10deg, 10deg); border-radius: 12px; }
.post-art--c i:nth-child(2) { left: 50%; top: 50%; width: 64px; height: 64px; margin: -32px; background: rgba(255,255,255,.12); border-radius: 50%; box-shadow: 0 0 40px rgba(255,255,255,.15); animation: breathe 4s ease-in-out infinite; }
.post-body { display: flex; flex-direction: column; gap: 10px; padding: 24px; }
.post-read { margin-top: 8px; display: inline-flex; align-items: center; gap: 6px; color: var(--fg-60); font-size: 15px; transition: color .25s ease; }
.post-read .ico { width: 16px; height: 16px; transform: rotate(-90deg); transition: transform .3s var(--ease-out); }
.post:hover .post-read { color: var(--fg); }
.post:hover .post-read .ico { transform: rotate(-90deg) translateY(3px); }

/* Off the canvas */
.otc { display: grid; grid-template-columns: 1.1fr .9fr; gap: 44px; align-items: center; padding: 40px; border-radius: var(--r-20); background: var(--grad-card); box-shadow: var(--sh-edge), var(--sh-drop); overflow: hidden; }
.otc-text { display: flex; flex-direction: column; gap: 24px; }
.otc-chips { display: flex; flex-wrap: wrap; gap: 10px; }
.otc-chips li { padding: 4px 14px; border-radius: var(--r-pill); background: var(--bg); color: var(--fg-60); font-size: 14px; line-height: 26px; }
.otc-visual { height: 380px; border-radius: var(--r-16); overflow: hidden; box-shadow: var(--sh-media); }

@media (max-width: 1299.98px) {
  .toolkit { grid-template-columns: 1fr; gap: 20px; }
  .posts { grid-template-columns: minmax(0,1fr) minmax(0,1fr); }
  .otc { grid-template-columns: 1fr; }
}
@media (max-width: 749.98px) {
  .work-grid, .posts { grid-template-columns: minmax(0,1fr); }
  .work-meta { flex-direction: column; }
  .conf-card { flex-basis: 280px; } .conf-card--feature { flex-basis: 320px; }
  .conf-visual { height: 200px; }
  .otc { padding: 24px; }
  .otc-visual { height: 260px; }
  .tool { height: 48px; } .tool-ico { width: 34px; height: 34px; }
}


/* ================================================================
   v2 revizyon: nav araçları, Monument başlık, hero imleçleri,
   referans şeridi, konferans kartları, video, neiden efektleri
   ================================================================ */
@font-face { font-family: "Monument Extended"; src: url("../assets/fonts/MonumentExtended-Regular.otf") format("opentype"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Monument Extended"; src: url("../assets/fonts/MonumentExtended-Ultrabold.otf") format("opentype"); font-weight: 800; font-display: swap; }
:root { --font-wide: "Monument Extended", "Satoshi", sans-serif; }

/* Nav: dil + tema anahtarları (şimdilik yalnızca görsel) */
.nav { max-width: 940px; padding: 0 12px 0 32px; }
.nav-right { gap: 12px; }
.nav-tools { display: flex; align-items: center; gap: 8px; }
.seg { position: relative; display: inline-flex; height: 36px; padding: 3px; border-radius: var(--r-pill); background: var(--bg); box-shadow: var(--sh-edge-strong); border: 1px solid var(--line); }
.seg button { position: relative; z-index: 1; min-width: 34px; padding: 0 8px; border-radius: var(--r-pill); font: 500 12px/1 var(--font-label); letter-spacing: .06em; color: var(--fg-60); transition: color .3s ease, background .3s ease; }
.seg button.on { color: var(--bg); background: var(--grad-btn-light); }
.seg button:not(.on):hover { color: var(--fg); }
.theme-toggle { position: relative; width: 60px; height: 36px; padding: 3px; border-radius: var(--r-pill); background: var(--bg); border: 1px solid var(--line); box-shadow: var(--sh-edge-strong); }
.theme-knob { position: absolute; top: 3px; left: 3px; width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; background: var(--grad-btn-light); color: var(--bg); transition: transform .45s var(--spring); }
.theme-knob .ico { grid-area: 1 / 1; width: 15px; height: 15px; transition: opacity .3s ease, transform .45s var(--ease-out); }
.theme-toggle .i-sun { opacity: 0; transform: rotate(-90deg) scale(.6); }
.theme-toggle[aria-pressed="true"] .theme-knob { transform: translateX(22px); }
.theme-toggle[aria-pressed="false"] .i-moon { opacity: 0; transform: rotate(90deg) scale(.6); }
.theme-toggle[aria-pressed="false"] .i-sun { opacity: 1; transform: none; }
.theme-toggle .i-sun, .theme-toggle .i-moon { fill: none; stroke: currentColor; stroke-width: 2; }
.theme-toggle[aria-pressed="true"] .i-moon { fill: currentColor; }
.mobile-tools { display: flex; gap: 10px; padding: 10px 14px 4px; border-top: 1px solid var(--line); margin-top: 6px; }

/* Monument Extended: hero adı + rakamlar */
.h1--mono { font-family: var(--font-wide); font-weight: 800; font-size: 64px; line-height: 1.12; letter-spacing: 0; text-transform: none; }
.h1--mono .chars { display: block; white-space: nowrap; }
.h1--mono .muted { font-weight: 400; font-size: .86em; }
.hero-heading { max-width: 640px; }
.hero-title { align-items: flex-end; }
.hero-title .arrow-ico { margin: 0 0 12px; }
.laurel-num .big, .shipped-num { font-family: var(--font-wide); font-weight: 800; letter-spacing: 0; }
.laurel-num .big { font-size: 64px; }
.shipped-num { font-size: 56px; }
.step-num { font-family: var(--font-wide); font-weight: 800; }

/* Harf harf blur açılışı (neiden: scale 2–3 + blur 10px → net) */
.ch { display: inline-block; opacity: 0; filter: blur(10px); transform: scale(2); transform-origin: 50% 60%;
  transition: opacity .7s ease, filter .9s var(--ease-out), transform 1s var(--ease-out); transition-delay: calc(var(--c) * .035s + .15s); }
.chars.in .ch { opacity: 1; filter: blur(0); transform: none; }
.no-js .ch { opacity: 1; filter: none; transform: none; }

/* Kelime açılışına yumuşak blur (neiden) */
.words .w { filter: blur(6px); transition: opacity .5s ease, transform .6s var(--ease-out), filter .7s var(--ease-out); transition-delay: calc(var(--i) * .045s + var(--wd, 0s)); }
.words.in .w { filter: blur(0); }

/* Kartlar alttan + blur ile gelir */
.js [data-anim="rise"] { opacity: 0; transform: translateY(60px); filter: blur(8px); transition: opacity .8s ease, transform 1s var(--ease-out), filter .9s var(--ease-out); transition-delay: var(--d, 0s); }
.js [data-anim="rise"].in { opacity: 1; transform: none; filter: blur(0); }

/* Görsel paralaksı (maske içinde kayan görsel) */
[data-parallax] img { transform: translate3d(0, var(--py, 0px), 0) scale(1.14); transition: none; will-change: transform; }
.work-card:hover [data-parallax] img { transform: translate3d(0, var(--py, 0px), 0) scale(1.18); transition: transform .8s var(--ease-out); }

/* Scroll'a bağlı ölçek (neiden showreel kapağı) */
[data-scrub] { transform: scale(var(--sc, 1)); transform-origin: 50% 100%; will-change: transform; }

/* Hero: çok oyunculu imleçler */
.hero-cur { z-index: 3; }
.hero-cur em { font-size: 13px; padding: 4px 11px; }

/* Hero: referans şeridi */
.hero-inner { gap: 64px; }
.clients { display: flex; flex-direction: column; align-items: center; gap: 22px; width: 100%; max-width: 1200px; margin: 0 auto; }
.clients-viewport { position: relative; width: 100%; overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 22%, #000 78%, transparent 100%);
          mask-image: linear-gradient(90deg, transparent 0%, #000 22%, #000 78%, transparent 100%); }
.clients-track { display: flex; align-items: center; width: max-content; animation: clientsRun 56s linear infinite; }
.clients-viewport:hover .clients-track { animation-play-state: paused; }
.client { flex: none; height: 72px; padding: 0 44px; display: grid; place-items: center; }
.client img { height: var(--h, 30px); width: auto; max-width: none; opacity: var(--o, .5); filter: blur(var(--b, 0px)); transform: scale(var(--s, 1)); transition: opacity .2s linear; will-change: transform, filter, opacity; }
@keyframes clientsRun { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* Konferans kartları */
.conf-card { flex: 0 0 420px; gap: 18px; cursor: none; }
.conf-card--type { cursor: grab; }
.conf-visual { height: 280px; }
.conf-visual img { transform: scale(1.04); transition: transform .9s var(--ease-out); }
.conf-card:hover .conf-visual img { transform: scale(1.09); }
.conf-visual::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 45%, rgba(8,8,8,.75) 100%); pointer-events: none; }
.conf-big { position: absolute; right: 16px; bottom: 10px; z-index: 1; font: 800 44px/1 var(--font-wide); color: #fff; letter-spacing: 0; opacity: .92; }
.conf-visual .arrow-ico { position: absolute; left: 14px; bottom: 14px; z-index: 2; }
.conf-visual--type .conf-big { position: static; font-size: 56px; }
.conf-visual--type::after { display: none; }
.conf-meta .h5 { min-height: 2.4em; }

/* Off the canvas: video */
.otc-visual { background: var(--bg); }
.otc-video { width: 100%; height: 100%; object-fit: cover; display: block; }

/* CTA: portre */
.cta-card .media { height: 340px; }

@media (max-width: 1299.98px) {
  .nav-tools { display: none; }
  .nav { max-width: 840px; }
}
@media (max-width: 749.98px) {
  .h1--mono { font-size: clamp(30px, 9vw, 40px); }
  .hero-title { gap: 10px; }
  .hero-title > .hover-arrow { display: none; }
  .hero-inner { gap: 48px; }
  .client { padding: 0 26px; height: 56px; }
  .client img { height: calc(var(--h, 30px) * .8); }
  .clients-viewport { -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 15%, #000 85%, transparent 100%); mask-image: linear-gradient(90deg, transparent 0%, #000 15%, #000 85%, transparent 100%); }
  .conf-card { flex-basis: 300px; }
  .conf-visual { height: 210px; }
  .conf-big { font-size: 34px; }
  .cta-card .media { height: 300px; }
  .laurel-num .big { font-size: 52px; }
  .shipped-num { font-size: 46px; }
}
@media (prefers-reduced-motion: reduce) and (max-width: 0px) {
  .ch, .w, .js [data-anim="rise"] { opacity: 1 !important; filter: none !important; transform: none !important; transition: none !important; }
  .clients-track { animation: none; }
  [data-parallax] img, [data-scrub] { transform: none !important; }
}



/* v3: bölüm başlıkları Monument Extended Regular */
.h2.h2--mono { font-family: var(--font-wide); font-weight: 400; font-size: 40px; line-height: 1.22; letter-spacing: 0; }
.sec-head--center .h2.h2--mono { max-width: 760px; }
/* Referans şeridi: About'un altında */
.clients--about { margin-top: 88px; max-width: none; }
/* Off the Canvas: dikey video, kırpılmadan */
.otc { grid-template-columns: minmax(0,1fr) auto; }
.otc-visual { height: auto; width: 300px; aspect-ratio: 9 / 16; justify-self: end; }
/* CTA: kare portre, kırpılmadan */
.cta-card .media--portrait { height: auto; aspect-ratio: 1 / 1; }
.cta-card .media--portrait img { object-fit: cover; object-position: center; }
@media (max-width: 1299.98px) {
  .h2.h2--mono { font-size: 34px; }
  .otc { grid-template-columns: 1fr; }
  .otc-visual { justify-self: center; }
  .cta-card { max-width: 560px; }
}
@media (max-width: 749.98px) {
  .h2.h2--mono { font-size: clamp(20px, 5.6vw, 24px); line-height: 1.3; }
  .clients--about { margin-top: 56px; }
  .otc-visual { width: min(280px, 100%); }
  .cta-card .media--portrait { height: auto; }
}

/* ------------------------------------------------ Scroll animasyonları
   Orijinal değerler:
   - Etiket pill: opacity 0 → 1, spring, gecikme .5s
   - Butonlar: y 20 → 0 + opacity, spring (stiffness 400, damping 30), gecikme .4s / .5s
   - Kartlar: x -50 → 0 + opacity
   - Başlık + alt metin: kelime kelime, y 10 → 0 + opacity */
.js [data-anim] { opacity: 0; }
.js [data-anim="fade"] { transition: opacity 0.6s ease; transition-delay: var(--d, 0.5s); }
.js [data-anim="up"] { transform: translateY(20px); transition: opacity 0.5s ease, transform 0.6s var(--spring); transition-delay: var(--d, 0.4s); }
.js [data-anim="left"] { transform: translateX(-50px); transition: opacity 0.7s ease, transform 0.9s var(--ease-out); transition-delay: var(--d, 0s); }
.js [data-anim].in { opacity: 1; transform: none; }

.w { display: inline-block; opacity: 0; transform: translateY(10px); transition: opacity 0.5s ease, transform 0.6s var(--ease-out); transition-delay: calc(var(--i) * 0.045s + var(--wd, 0s)); }
.words.in .w { opacity: 1; transform: none; }
.no-js .w { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) and (max-width: 0px) {
  html { scroll-behavior: auto; }
  .js [data-anim], .w { opacity: 1 !important; transform: none !important; transition: none !important; }
  .marquee-track, .ticker-track, .shooting-star, .float-a, .float-b, .scroll-hint, .pulse i + i { animation: none !important; }
  .process-track { transform: none !important; }
  .footer { transform: none; }
}

/* ------------------------------------------------ Tablet: 750–1299 */
@media (max-width: 1299.98px) {
  .nav-links, .nav-cta { display: none; }
  .nav { padding: 0 12px 0 24px; }
  .nav-toggle { display: block; }
  .hero-quotes { display: none; }
  .profile-content, .split, .cta-grid { flex-direction: column; align-items: stretch; }
  .profile-card, .split-left, .faq-left, .cta-left { flex: none; width: 100%; }
  .split-left { position: static; }
  .portrait { height: auto; aspect-ratio: 16 / 10; }
  .services-bento { grid-template-columns: minmax(0,1fr); }
  .why-head { position: static; }
  .projects-top { grid-template-columns: 1fr; }
  .projects-top .btn-row { justify-content: flex-start; }
}

/* ------------------------------------------------ Mobil: <750 */
@media (max-width: 749.98px) {
  :root { --pad-x: 20px; --pad-y: 80px; }
  .h1 { font-size: 48px; letter-spacing: -1.5px; }
  .h2 { font-size: 38px; letter-spacing: -1px; }
  .hero { padding-top: 130px; }
  .bento { grid-template-columns: minmax(0,1fr); }
  .bento-card--tall .media { height: 360px; }
  .bento-card--short .media { height: 200px; }
  .step { flex-basis: 290px; scroll-snap-align: start; }
  .process-track { justify-content: flex-start; overflow-x: auto; scroll-snap-type: x mandatory; margin: 44px calc(var(--pad-x) * -1); padding: 0 var(--pad-x) 30px; transform: none !important; scrollbar-width: none; }
  .process-track::-webkit-scrollbar { display: none; }
  .every-step, .services-top { flex-direction: column; align-items: flex-start; }
  .why-row { grid-template-columns: 1fr; gap: 28px; padding: 28px; position: relative; top: auto !important; }
  .review-sticky { position: relative; top: auto !important; }
  .stats { gap: 12px; }
  .stat { padding: 16px; }
  .stat .h3 { font-size: 24px; }
  .exp li { grid-template-columns: 1fr auto; gap: 4px 16px; }
  .exp li span:nth-child(2) { grid-row: 2; }
  .cta { padding: 28px 20px; }
  .footer-top { flex-direction: column; }
  .btn { height: 52px; padding: 10px 22px; }
  .bottom-blur { display: none; }
}

/* ================================================================
   v4 revizyon
   ================================================================ */
:root {
  --ac-blue: #8ea2ff; --ac-lilac: #c9a8ff; --ac-peach: #f0b8a0; --ac-mint: #9fd9cf;
  --figma: #4f8dff; --gold: #cdb68b;
  --grad-tint: linear-gradient(92deg, #a6afc9 0%, #b9a9d6 55%, #cdb1a6 100%);
}
::selection { background: rgba(142, 162, 255, .35); color: #fff; }

/* Erişilebilirlik: içeriğe atla */
.skip-link { position: fixed; left: 16px; top: -60px; z-index: 200; padding: 10px 16px; border-radius: 999px; background: var(--fg); color: var(--bg); font: 500 14px/1 var(--font-ui); transition: top .25s ease; }
.skip-link:focus { top: 16px; }

/* Ortak hizalama: tüm modüller aynı container çizgisinden başlar */
.hero-inner, .hero-top { max-width: var(--container); }
.sec-head--center { align-items: flex-start; text-align: left; max-width: none; margin: 0; }
.sec-head--center .label { align-self: flex-start; }
.section > .sec-head { max-width: var(--container); margin-left: auto; margin-right: auto; }
.btn { white-space: nowrap; }

/* Hafif renk: etiket noktası + başlıkların ikinci kısmı */
.label .dot { background: linear-gradient(135deg, var(--ac-blue), var(--ac-lilac)); box-shadow: 0 0 10px rgba(142, 162, 255, .55); }
.h2.h2--mono .muted .w { background: var(--grad-tint); -webkit-background-clip: text; background-clip: text; color: transparent; }
.eyebrow { color: #a7adc2; }

/* Hero: iki satır da normal ağırlık */
.h1--mono, .h1--mono .muted { font-weight: 400; }
.h1--mono .muted { font-size: 1em; color: #a4a9c0; }
.hero::before { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: radial-gradient(40% 50% at 78% 38%, rgba(142, 162, 255, .10), transparent 70%), radial-gradient(30% 40% at 62% 70%, rgba(201, 168, 255, .07), transparent 70%); }

/* Hero tuvali (Figma sahnesi) */
.hero-canvas { position: absolute; right: 0; top: -20px; width: min(600px, calc(100% - 560px)); aspect-ratio: 600 / 470; pointer-events: none; }
.hc-stage { position: absolute; left: 0; top: 0; width: 600px; height: 470px; transform-origin: 0 0; transform: scale(var(--hs, 1)); }
.hc-glow { position: absolute; inset: 30px 40px; background: radial-gradient(50% 50% at 60% 40%, rgba(142, 162, 255, .16), transparent 70%), radial-gradient(40% 40% at 30% 72%, rgba(201, 168, 255, .12), transparent 70%); filter: blur(24px); }
.hc-frame { position: absolute; left: 190px; top: 62px; width: 360px; }
.hc-frame-name { display: flex; align-items: center; gap: 6px; margin-bottom: 8px; font: 500 12px/1 var(--font-ui); color: var(--fg-60); }
.hc-frame-name i { width: 9px; height: 9px; border: 1.5px solid currentColor; border-radius: 2px; }
.hc-shot { height: 230px; border-radius: 8px; overflow: hidden; box-shadow: var(--sh-media); background: var(--surface-2); }
.hc-shot img { width: 100%; height: 100%; object-fit: cover; object-position: center 40%; }
.hc-sel { position: absolute; left: -4px; right: -4px; top: 16px; bottom: -4px; border: 1.5px solid var(--figma); border-radius: 2px; opacity: 0; transition: opacity .35s ease; }
.hc-sel i { position: absolute; width: 8px; height: 8px; background: #fff; border: 1.5px solid var(--figma); }
.hc-sel i:nth-child(1) { left: -5px; top: -5px; } .hc-sel i:nth-child(2) { right: -5px; top: -5px; }
.hc-sel i:nth-child(3) { left: -5px; bottom: -5px; } .hc-sel i:nth-child(4) { right: -5px; bottom: -5px; }
.hc-sel b { position: absolute; left: 50%; bottom: -28px; transform: translateX(-50%); padding: 2px 7px; border-radius: 4px; background: var(--figma); color: #fff; font: 600 11px/16px var(--font-ui); white-space: nowrap; }
.sel-on .hc-sel { opacity: 1; }
.hc-swatches { position: absolute; left: 14px; top: 6px; display: flex; align-items: center; gap: 6px; padding: 7px 14px 7px 8px; border-radius: 999px; background: var(--surface-2); box-shadow: var(--sh-card); }
.hc-swatches span { width: 20px; height: 20px; border-radius: 50%; background: var(--c); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .18); }
.hc-swatches em { margin-left: 6px; font: 500 12px/1 var(--font-ui); font-style: normal; color: var(--fg-60); }
.hc-type { position: absolute; left: 34px; top: 392px; display: flex; align-items: center; gap: 12px; padding: 10px 16px 10px 10px; border-radius: 14px; background: var(--surface-2); box-shadow: var(--sh-card); }
.hc-aa { width: 40px; height: 40px; display: grid; place-items: center; border-radius: 9px; background: var(--bg); box-shadow: var(--sh-edge-strong); font: 400 16px/1 var(--font-wide); }
.hc-type b { display: block; font: 500 13px/1.3 var(--font-ui); }
.hc-type small { font: 400 12px/1.3 var(--font-ui); color: var(--fg-60); }
.hero-canvas .quote { position: absolute; }
.hero-canvas .quote--1 { left: 48px; top: 256px; width: 250px; }
.hero-canvas .quote--2 { left: 326px; top: 330px; width: 250px; }
.hero-canvas .mp-cursor { z-index: 5; }

/* İsimli imleçler: hafif renk */
.mp-cursor--a svg { fill: var(--ac-lilac); stroke: #1a1424; }
.mp-cursor--a em { background: var(--ac-lilac); color: #1a1424; }
.mp-cursor--b svg { fill: var(--ac-blue); stroke: #10162a; }
.mp-cursor--b em { background: var(--ac-blue); color: #10162a; border: 0; }
.mp-cursor--c svg { fill: var(--ac-mint); stroke: #0e1d1a; stroke-width: 1; }
.mp-cursor--c em { background: var(--ac-mint); color: #0e1d1a; }
.sel-box--a { border-color: var(--figma); }

/* About portresi: imleç + seçim kutusu */
.portrait-cur { left: 72%; top: 78%; animation: pcur 10s ease-in-out infinite; }
@keyframes pcur { 0% { left: 76%; top: 82%; } 22%, 46% { left: 66%; top: 60%; } 70% { left: 22%; top: 70%; } 86% { left: 30%; top: 30%; } 100% { left: 76%; top: 82%; } }
.portrait-sel { position: absolute; left: 34%; top: 12%; width: 32%; height: 48%; border: 1.5px solid var(--figma); border-radius: 2px; opacity: 0; animation: psel 10s ease-in-out infinite; pointer-events: none; }
.portrait-sel i { position: absolute; width: 8px; height: 8px; background: #fff; border: 1.5px solid var(--figma); }
.portrait-sel i:nth-child(1) { left: -5px; top: -5px; } .portrait-sel i:nth-child(2) { right: -5px; top: -5px; }
.portrait-sel i:nth-child(3) { left: -5px; bottom: -5px; } .portrait-sel i:nth-child(4) { right: -5px; bottom: -5px; }
@keyframes psel { 0%, 20% { opacity: 0; } 24%, 48% { opacity: 1; } 54%, 100% { opacity: 0; } }

/* Laurel: kaynak (nuance) yaprak formu, yansıtılmış sağ taraf */
.laurel { gap: 10px; }
.laurel-side { width: 42px; height: 100px; fill: var(--gold); opacity: .9; }
.laurel-side--r { transform: scaleX(-1); }
.laurel-num .big .muted { color: var(--gold); }

/* Başlık yanındaki ok: başlıkla orantılı */
.title-row { align-items: center; gap: 14px; }
.title-row .arrow-ico, .title-row .arrow-ico--lg { width: 52px; height: 52px; margin-top: 0; }

/* Süreç şeridi: tüm kartlar okunur, sürüklenir */
.process-track { justify-content: flex-start; overflow: visible; will-change: transform;
  margin: 44px calc(var(--pad-x) * -1) 0; padding: 10px max(var(--pad-x), calc((100vw - var(--container)) / 2)) 30px;
  scroll-padding-left: max(var(--pad-x), calc((100vw - var(--container)) / 2)); }
.process-track::-webkit-scrollbar { display: none; }
.process-track.dragging, .conf-rail.dragging { cursor: grabbing; scroll-snap-type: none; scroll-behavior: auto; }
.process-track.dragging *, .conf-rail.dragging * { pointer-events: none; }
.step { flex: 0 0 380px; }
#process { overflow: hidden; }
.conf-rail { scroll-padding-left: max(var(--pad-x), calc((100vw - var(--container)) / 2)); scroll-behavior: auto; }
.rail-foot { margin-bottom: 44px; }
.every-step { max-width: var(--container); }
.every-step .txt { flex: 1; min-width: 0; }
.every-step .btn-row { flex-wrap: nowrap; flex: none; }

/* Two Disciplines: kart ortasında dikey çizgi */
.why-row::before { content: ""; position: absolute; left: 50%; top: 36px; bottom: 36px; width: 1px;
  background: linear-gradient(180deg, transparent, rgba(255, 255, 255, .14) 18%, rgba(255, 255, 255, .14) 82%, transparent); }

/* Referans şeridi: JS ile akar, sürüklenir, linkli */
.clients-viewport { cursor: grab; touch-action: pan-y; user-select: none; }
.clients-viewport.dragging { cursor: grabbing; }
.clients-track { animation: none; will-change: transform; }
.client > a, .client > span { display: grid; place-items: center; height: 100%; }
.client a:focus-visible img { --o: 1 !important; --b: 0px !important; }

/* Konferans kartları: hover'da edisyon rengiyle hafif ışıma */
.conf-card { transition: box-shadow .5s ease, transform .5s var(--ease-out); }
.conf-card:nth-child(1) { --glow: rgba(197, 139, 255, .35); } .conf-card:nth-child(2) { --glow: rgba(99, 210, 232, .3); }
.conf-card:nth-child(3) { --glow: rgba(182, 227, 107, .28); } .conf-card:nth-child(4) { --glow: rgba(125, 147, 255, .35); }
.conf-card:nth-child(5) { --glow: rgba(180, 140, 255, .35); } .conf-card:nth-child(6) { --glow: rgba(255, 255, 255, .15); }
.conf-card:hover { box-shadow: var(--sh-card), 0 24px 60px -24px var(--glow); transform: translateY(-4px); }

/* Off the Canvas: kart değil, container hizasında; video sağda */
.otc { padding: 0; background: none; box-shadow: none; border-radius: 0; overflow: visible; grid-template-columns: minmax(0, 1fr) auto; gap: 60px; }
.otc-visual { width: 300px; box-shadow: var(--sh-media), 0 30px 80px -30px rgba(142, 162, 255, .35); }

/* ---------- Contact (AVIX düzeni, bizim tasarım sistemimizle) */
main { position: relative; z-index: 2; background: var(--bg); }
.contact-sec { position: relative; padding: 0 var(--pad-x) var(--pad-y); }
.contact-card { max-width: calc(var(--container) + 80px); margin: 0 auto; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 64px; padding: 40px;
  border-radius: var(--r-20); border: 1px solid var(--line); background: linear-gradient(180deg, rgba(255, 255, 255, .05) 0%, rgba(19, 16, 26, 0) 100%), var(--bg); box-shadow: var(--sh-drop); }
.contact-left { display: flex; flex-direction: column; justify-content: space-between; gap: 48px; }
.contact-intro { display: flex; flex-direction: column; gap: 20px; }
.contact-kicker { font: 500 15px/1 var(--font-ui); letter-spacing: .04em; text-transform: uppercase; color: #e6c8a8; }
.contact-title { font: 400 clamp(48px, 5.2vw, 76px)/1.05 var(--font-wide); letter-spacing: -.01em; margin: 0;
  background: linear-gradient(180deg, #f1f4f6 8%, #b4c4d1 58%, #8fa1b3 100%); -webkit-background-clip: text; background-clip: text; color: transparent; padding-bottom: .06em; }
.contact-lead { font-size: 20px; line-height: 1.5; color: var(--fg-60); max-width: 460px; }
.contact-disc { list-style: none; margin: 4px 0 0; padding: 0; max-width: 460px; }
.contact-disc li { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 8px 16px; padding: 12px 0; border-top: 1px solid var(--line); }
.contact-disc b { font: 500 16px/1.4 var(--font-ui); }
.contact-disc span { font-size: 15px; color: var(--fg-60); }
.contact-person { display: flex; align-items: center; gap: 18px; }
.contact-person img { width: 112px; height: 112px; flex: none; border-radius: 14px; object-fit: cover; box-shadow: var(--sh-media); }
.contact-person b { display: block; font: 500 17px/1.4 var(--font-ui); }
.contact-person span { display: block; font-size: 14px; line-height: 1.5; color: var(--fg-60); }
.contact-person a:not(.mail-cta) { display: inline-block; margin-top: 6px; font-size: 15px; color: var(--fg); border-bottom: 1px solid var(--line-strong); }
.contact-person a:hover { border-color: var(--ac-blue); }
.contact-form { display: flex; flex-direction: column; gap: 22px; }
.field { display: flex; flex-direction: column; gap: 6px; }
.field-label { font: 500 13px/1.2 var(--font-ui); color: var(--fg-60); transition: color .3s ease; }
.field-row { position: relative; display: flex; align-items: center; gap: 12px; padding-bottom: 12px; border-bottom: 1px solid var(--line); }
.field-row::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: linear-gradient(90deg, var(--ac-blue), var(--ac-lilac)); transform: scaleX(0); transform-origin: left; transition: transform .6s var(--ease-out); }
.field:focus-within .field-row::after { transform: scaleX(1); }
.field:focus-within .field-label { color: var(--fg); }
.field input, .field textarea { flex: 1; min-width: 0; padding: 0; border: 0; outline: 0; background: none; color: var(--fg); font: 400 20px/1.4 var(--font-ui); }
.field textarea { min-height: 150px; resize: vertical; }
.field input::placeholder, .field textarea::placeholder { color: rgba(255, 255, 255, .36); }
.field-row .ico { width: 18px; height: 18px; flex: none; color: var(--fg-60); align-self: center; }
.field.invalid .field-row { border-color: #e88f8f; }
.field.invalid .field-label { color: #f0a3a3; }
.form-foot { display: flex; justify-content: space-between; align-items: center; gap: 16px; margin-top: 6px; }
.form-status { font-size: 14px; color: var(--fg-60); min-height: 1.4em; }
.form-status.err { color: #f0a3a3; }
.btn-outline { position: relative; flex: none; height: 46px; padding: 0 24px; overflow: hidden; border-radius: 999px; border: 1px solid var(--line-strong); color: var(--fg);
  font: 500 14px/46px var(--font-ui); letter-spacing: .08em; text-transform: uppercase; transition: background .35s ease, color .35s ease, border-color .35s ease; }
.btn-outline:hover { background: var(--fg); color: var(--bg); border-color: var(--fg); }

/* Metin yuvarlama efekti (AVIX link hover) */
.roll, .btn-outline { display: inline-block; }
.roll { overflow: hidden; height: 1.5em; line-height: 1.5em; vertical-align: top; }
.roll > span, .btn-outline > span { position: relative; display: inline-block; transition: transform .45s var(--ease-out); }
.roll > span::after, .btn-outline > span::after { content: attr(data-t); position: absolute; left: 0; top: 100%; white-space: nowrap; }
.roll:hover > span, .roll:focus-visible > span, .btn-outline:hover > span { transform: translateY(-100%); }

/* ---------- Footer (AVIX düzeni): içerik kaydıkça alttan açılır */
.footer { position: sticky; bottom: 0; z-index: 1; padding: 80px var(--pad-x) 20px; transform: none; background: var(--bg); overflow: hidden; }
.footer-inner { max-width: calc(var(--container) + 80px); margin: 0 auto; padding: 0 40px; }
.footer .footer-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 40px; }
.footer-contact { display: flex; flex-direction: column; gap: 6px; font-size: 16px; line-height: 1.5; text-transform: uppercase; letter-spacing: .03em; color: var(--fg-60); }
.footer-contact a { color: var(--fg-60); text-transform: none; letter-spacing: 0; }
.footer-contact a:hover { color: var(--fg); }
.footer-socials { display: flex; gap: 10px; margin-top: 18px; }
.footer-socials a { width: 40px; height: 40px; display: grid; place-items: center; border-radius: 50%; border: 1px solid var(--line); color: var(--fg-60); transition: color .3s ease, border-color .3s ease, background .3s ease; }
.footer-socials a:hover { color: var(--fg); border-color: var(--line-strong); background: var(--surface-2); }
.footer-socials .ico { width: 18px; height: 18px; }
.footer-cols { display: flex; gap: 96px; }
.footer-cols ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.footer-cols a { font: 500 16px/1.5 var(--font-ui); text-transform: uppercase; letter-spacing: .03em; color: var(--fg-60); transition: color .3s ease; }
.footer-cols a:hover { color: var(--fg); }
.footer .footer-bottom { display: flex; justify-content: space-between; gap: 24px; margin-top: 56px; font: 500 15px/1.4 var(--font-ui); text-transform: uppercase; letter-spacing: .04em; color: var(--fg); }
.footer-mark { margin-top: 28px; overflow: hidden; }
.footer-mark span { display: block; width: max-content; white-space: nowrap; font: 400 100px/.95 var(--font-wide); letter-spacing: -.02em; text-transform: uppercase; padding-bottom: .04em;
  background: linear-gradient(180deg, #e6ecef 0%, #a8bac7 55%, #b7aea3 100%); -webkit-background-clip: text; background-clip: text; color: transparent;
  transform: translateY(var(--fmy, 0%)); }
.bottom-blur { transition: opacity .4s ease; }
.bottom-blur.off { opacity: 0; }

@media (max-width: 1299.98px) {
  .hero-canvas { position: relative; right: auto; top: auto; width: 100%; max-width: 600px; margin: 12px 0 0; }
  .contact-card { gap: 40px; }
  .footer-cols { gap: 56px; }
}
@media (min-width: 750px) and (max-width: 1299.98px) {
  .otc { grid-template-columns: minmax(0, 1fr) auto; gap: 40px; }
  .otc-visual { width: 240px; justify-self: end; }
}
@media (max-width: 749.98px) {
  .why-row::before { left: 28px; right: 28px; width: auto; top: 50%; bottom: auto; height: 1px;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .14) 15%, rgba(255, 255, 255, .14) 85%, transparent); }
  .step { flex-basis: 300px; }
  .every-step { flex-direction: column; align-items: flex-start; }
  .every-step .btn-row { flex-wrap: wrap; }
  .title-row .arrow-ico, .title-row .arrow-ico--lg { width: 44px; height: 44px; }
  .otc { grid-template-columns: 1fr; gap: 32px; }
  .otc-visual { width: min(300px, 100%); justify-self: center; }
  .contact-sec { padding: 0 12px 80px; }
  .contact-card { grid-template-columns: 1fr; padding: 28px 20px; gap: 40px; }
  .contact-left { gap: 32px; }
  .contact-lead { font-size: 18px; }
  .contact-person img { width: 96px; height: 96px; }
  .field input, .field textarea { font-size: 18px; }
  .form-foot { flex-direction: column-reverse; align-items: stretch; }
  .btn-outline { width: 100%; text-align: center; }
  .footer { padding: 56px var(--pad-x) 0; }
  .footer-inner { padding: 0; }
  .footer .footer-top { flex-direction: column; gap: 36px; }
  .footer-cols { gap: 48px; }
  .footer .footer-bottom { margin-top: 40px; font-size: 13px; }
}
@media (prefers-reduced-motion: reduce) and (max-width: 0px) {
  .portrait-cur, .portrait-sel { animation: none; }
  .portrait-sel { opacity: 1; }
  .portrait-cur { left: 66%; top: 60%; }
  .roll > span, .btn-outline > span { transition: none; }
}

/* ================= v5 ================= */
/* Başlık gradyanı tüm ifade boyunca akar (JS --gx/--gw verir) */
.h2.h2--mono .muted .w { background-size: var(--gw, 100%) 100%; background-position: var(--gx, 0) 0; background-repeat: no-repeat; }

/* Hero tuvali: genel tel kafes frame */
.hc-wire { position: relative; background: linear-gradient(180deg, #15151b, #0e0e12); border: 1px solid var(--line); }
.wf-cols { position: absolute; inset: 0; background: repeating-linear-gradient(90deg, rgba(255, 110, 150, .055) 0 26px, transparent 26px 32px); }
.wf-bar { position: absolute; left: 14px; right: 14px; top: 12px; height: 12px; display: flex; align-items: center; gap: 6px; justify-content: flex-end; }
.wf-bar::before { content: ""; width: 12px; height: 12px; border-radius: 50%; background: var(--ac-blue); margin-right: auto; }
.wf-bar i { width: 28px; height: 6px; border-radius: 3px; background: rgba(255, 255, 255, .16); }
.wf-hero { position: absolute; left: 14px; top: 44px; width: 150px; display: flex; flex-direction: column; gap: 7px; }
.wf-hero b { display: block; height: 10px; border-radius: 4px; background: rgba(255, 255, 255, .24); }
.wf-hero b:nth-child(2) { width: 72%; background: rgba(255, 255, 255, .12); }
.wf-hero .wf-btn { width: 64px; height: 18px; border-radius: 999px; margin-top: 6px; background: linear-gradient(90deg, var(--ac-blue), var(--ac-lilac)); }
.wf-media { position: absolute; right: 14px; top: 38px; width: 160px; height: 92px; border-radius: 6px; border: 1px dashed rgba(255, 255, 255, .2);
  background: radial-gradient(60% 80% at 72% 28%, rgba(201, 168, 255, .35), transparent 70%), radial-gradient(60% 80% at 18% 92%, rgba(142, 162, 255, .35), transparent 70%), #1a1a22; }
.wf-cards { position: absolute; left: 14px; right: 14px; bottom: 14px; height: 70px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.wf-cards i { border-radius: 6px; background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .08); }

/* E-posta CTA'sı */
.mail-cta { display: inline-flex; align-items: center; gap: 10px; align-self: flex-start; padding: 10px 16px; border-radius: 999px; border: 1px solid var(--line-strong); background: var(--surface-2);
  color: var(--fg); font: 500 15px/1.2 var(--font-ui); text-transform: none; letter-spacing: 0; transition: border-color .3s ease, background .3s ease; }
.mail-cta .ico { width: 16px; height: 16px; flex: none; margin-right: 2px; }
.mail-cta .ico-ext { opacity: .6; transition: transform .35s var(--ease-out), opacity .3s ease; }
.mail-cta:hover { border-color: var(--ac-blue); background: rgba(142, 162, 255, .08); }
.mail-cta:hover .ico-ext { transform: translate(2px, -2px); opacity: 1; }
.contact-person .mail-cta, .footer-contact .mail-cta { margin-top: 10px; border-bottom: 1px solid var(--line-strong); color: var(--fg); }
.contact-person .mail-cta { font-size: 14px; padding: 8px 14px; }

/* Alt bulanıklık daha güçlü */
.bottom-blur { height: 150px; }
.bottom-blur div:nth-child(1) { backdrop-filter: blur(.15px); -webkit-backdrop-filter: blur(.15px); } .bottom-blur div:nth-child(2) { backdrop-filter: blur(.3px); -webkit-backdrop-filter: blur(.3px); }
.bottom-blur div:nth-child(3) { backdrop-filter: blur(.6px); -webkit-backdrop-filter: blur(.6px); } .bottom-blur div:nth-child(4) { backdrop-filter: blur(1.2px); -webkit-backdrop-filter: blur(1.2px); }
.bottom-blur div:nth-child(5) { backdrop-filter: blur(2.4px); -webkit-backdrop-filter: blur(2.4px); } .bottom-blur div:nth-child(6) { backdrop-filter: blur(4.5px); -webkit-backdrop-filter: blur(4.5px); }
.bottom-blur div:nth-child(7) { backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); } .bottom-blur div:nth-child(8) { backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); }

/* Hero yerleşimi: tablette de yan yana, nav ile çakışmaz */
@media (max-width: 1299.98px) { .hero { padding-top: 170px; } }
@media (min-width: 1000px) and (max-width: 1299.98px) {
  .hero-canvas { position: absolute; right: 0; top: 0; width: calc(100% - 540px); margin: 0; }
  .h1--mono { font-size: 54px; }
  .hero-heading { max-width: 520px; }
  .hero-text { max-width: 460px; }
}
@media (max-width: 999.98px) { .hero-canvas { margin: 28px auto 0; } }
@media (max-width: 749.98px) { .hero { padding-top: 140px; } }
.process-track { margin-bottom: 44px; }
@media (max-width: 749.98px) { .process-track { overflow-x: auto; scroll-snap-type: x mandatory; transform: none !important; } .step { scroll-snap-align: start; } }

/* ================= v6 ================= */
/* E-posta: tek satır, sade */
.mail-cta { white-space: nowrap; gap: 8px; padding: 9px 14px 9px 12px; background: rgba(255, 255, 255, .03); border: 1px solid var(--line); }
.mail-cta span, .contact-person .mail-cta span { display: inline; margin: 0; font: inherit; color: inherit; }
.contact-person .mail-cta, .footer-contact .mail-cta { border-bottom: 1px solid var(--line); }

/* Hero sahnesi: art direction posteri ↔ product design bileşeni */
.hc-label { display: flex; align-items: center; gap: 6px; margin-bottom: 8px; font: 500 12px/1 var(--font-ui); color: var(--fg-60); white-space: nowrap; }
.hc-label i { width: 9px; height: 9px; border: 1.5px solid currentColor; border-radius: 2px; }
.hc-art { position: absolute; left: 24px; top: 28px; width: 240px; transform: rotate(-4deg); }
.hc-board { position: relative; height: 300px; border-radius: 10px; overflow: hidden; box-shadow: var(--sh-media);
  background: radial-gradient(90% 70% at 80% 10%, rgba(201, 168, 255, .28), transparent 60%), radial-gradient(80% 60% at 0% 100%, rgba(142, 162, 255, .3), transparent 60%), #121218; }
.hc-crop i { position: absolute; width: 14px; height: 14px; border-color: rgba(255, 255, 255, .4); border-style: solid; border-width: 0; }
.hc-crop i:nth-child(1) { left: 10px; top: 10px; border-left-width: 1px; border-top-width: 1px; }
.hc-crop i:nth-child(2) { right: 10px; top: 10px; border-right-width: 1px; border-top-width: 1px; }
.hc-crop i:nth-child(3) { left: 10px; bottom: 10px; border-left-width: 1px; border-bottom-width: 1px; }
.hc-crop i:nth-child(4) { right: 10px; bottom: 10px; border-right-width: 1px; border-bottom-width: 1px; }
.hc-orb { position: absolute; right: -40px; top: 40px; width: 170px; height: 170px; border-radius: 50%; background: conic-gradient(from 200deg, var(--ac-blue), var(--ac-lilac), var(--ac-peach), var(--ac-blue)); filter: blur(1px); opacity: .85; animation: orbSpin 14s linear infinite; }
@keyframes orbSpin { to { transform: rotate(360deg); } }
.hc-glyph { position: absolute; left: 18px; bottom: 34px; font: 400 168px/0.8 var(--font-wide); color: #f2f2f2; mix-blend-mode: difference; }
.hc-rule { position: absolute; left: 18px; right: 18px; bottom: 26px; height: 1px; background: rgba(255, 255, 255, .35); }
.hc-cap { position: absolute; left: 18px; bottom: 9px; font: 500 10px/1 var(--font-label); letter-spacing: .14em; text-transform: uppercase; color: rgba(255, 255, 255, .7); }
.hc-art .hc-sel { top: 0; inset: 0; border-radius: 10px; }
.hc-ui { position: absolute; left: 318px; top: 150px; width: 262px; transform: rotate(3deg); }
.hc-panel { display: flex; flex-direction: column; gap: 14px; padding: 16px; border-radius: 14px; background: var(--surface-2); box-shadow: var(--sh-card); border: 1px solid var(--line); transition: border-color .4s ease, box-shadow .4s ease; }
.ui-on .hc-panel { border-color: rgba(142, 162, 255, .6); box-shadow: var(--sh-card), 0 0 0 3px rgba(142, 162, 255, .12); }
.hc-row { display: flex; gap: 8px; align-items: center; }
.hc-row--between { justify-content: space-between; }
.hc-btn { padding: 7px 14px; border-radius: 999px; font: 500 12px/1 var(--font-ui); color: #10162a; background: linear-gradient(90deg, var(--ac-blue), var(--ac-lilac)); transition: transform .3s var(--ease-out); }
.ui-on .hc-btn:first-child { transform: scale(.94); }
.hc-btn--ghost { color: var(--fg); background: none; border: 1px solid var(--line-strong); }
.hc-txt { font: 500 13px/1 var(--font-ui); color: var(--fg); }
.hc-switch { width: 34px; height: 20px; padding: 2px; border-radius: 999px; background: rgba(255, 255, 255, .14); transition: background .4s ease; }
.hc-switch i { display: block; width: 16px; height: 16px; border-radius: 50%; background: #fff; transition: transform .4s var(--spring); }
.ui-on .hc-switch { background: var(--ac-blue); } .ui-on .hc-switch i { transform: translateX(14px); }
.hc-input { display: flex; justify-content: space-between; align-items: center; padding: 9px 12px; border-radius: 10px; background: var(--bg); box-shadow: var(--sh-edge-strong); font: 400 12px/1 var(--font-ui); color: var(--fg-60); }
.hc-input i { width: 1px; height: 14px; background: var(--ac-blue); animation: caret 1s steps(1) infinite; }
@keyframes caret { 50% { opacity: 0; } }
.hc-tokens { display: flex; gap: 6px; flex-wrap: wrap; }
.hc-tokens span { padding: 4px 8px; border-radius: 6px; border: 1px dashed rgba(255, 255, 255, .18); font: 500 10px/1 var(--font-label); letter-spacing: .06em; color: var(--fg-60); }
.hc-noodle { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.hc-noodle path { fill: none; stroke: var(--figma); stroke-width: 1.5; stroke-dasharray: 5 5; animation: dash 1.2s linear infinite; }
.hc-noodle circle { fill: var(--bg); stroke: var(--figma); stroke-width: 1.5; }
@keyframes dash { to { stroke-dashoffset: -20; } }
.hero-canvas .hc-swatches { left: 40px; top: 386px; }

/* Menü: daha güçlü cam, daha net hiyerarşi */
.nav { background: linear-gradient(180deg, rgba(28, 28, 34, .55), rgba(12, 12, 16, .45)); border: 1px solid rgba(255, 255, 255, .09);
  backdrop-filter: blur(20px) saturate(160%); -webkit-backdrop-filter: blur(20px) saturate(160%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08), 0 12px 40px rgba(0, 0, 0, .35); transition: background .4s ease, box-shadow .4s ease; padding: 0 8px 0 24px; height: 60px; }
.nav-wrap.scrolled .nav { background: linear-gradient(180deg, rgba(28, 28, 34, .72), rgba(12, 12, 16, .66)); }
.logo { font-size: 24px; }
.nav-right { gap: 6px; }
.nav-links { gap: 2px; margin-right: 6px; }
.nav-links a { position: relative; padding: 8px 12px; border-radius: 999px; font-size: 15px; transition: color .25s ease, background .25s ease; }
.nav-links a:hover { background: rgba(255, 255, 255, .06); }
.nav-links a.active { color: var(--fg); background: rgba(255, 255, 255, .08); }
.nav-tools { gap: 6px; padding: 0 6px; border-left: 1px solid var(--line); border-right: 1px solid var(--line); height: 32px; }
.seg { position: relative; height: 32px; padding: 2px; border: 1px solid rgba(255, 255, 255, .08); background: rgba(0, 0, 0, .35); box-shadow: none; }
.seg::before { content: ""; position: absolute; top: 2px; left: 2px; width: 34px; height: 26px; border-radius: 999px; background: var(--grad-btn-light); transition: transform .4s var(--spring); }
.seg[data-active="tr"]::before { transform: translateX(34px); }
.seg button { width: 34px; min-width: 34px; height: 26px; padding: 0; font-size: 11px; letter-spacing: .08em; color: var(--fg-60); }
.seg button.on { background: none; color: var(--bg); }
.theme-toggle { width: 52px; height: 32px; padding: 2px; border: 1px solid rgba(255, 255, 255, .08); background: rgba(0, 0, 0, .35); box-shadow: none; }
.theme-knob { top: 2px; left: 2px; width: 26px; height: 26px; }
.theme-toggle[aria-pressed="true"] .theme-knob { transform: translateX(20px); }
.nav-cta { height: 44px; padding: 0 18px 0 14px; margin-left: 4px; font-size: 15px; }
.nav-cta .ico { width: 20px; height: 20px; }
.mobile-menu { background: linear-gradient(180deg, rgba(28, 28, 34, .8), rgba(12, 12, 16, .75)); backdrop-filter: blur(20px) saturate(160%); -webkit-backdrop-filter: blur(20px) saturate(160%); border-color: rgba(255, 255, 255, .09); }
.mobile-menu > a.active { color: var(--fg); background: rgba(255, 255, 255, .06); }
.mobile-tools .seg, .mobile-tools .theme-toggle { height: 36px; }

/* Mobil iyileştirmeler */
@media (max-width: 749.98px) {
  .nav-wrap { top: 12px; padding: 0 12px; }
  .nav { height: 56px; padding: 0 6px 0 16px; }
  .logo { font-size: 22px; }
  .hero { padding-top: 110px; }
  .hero-text { font-size: 16px; line-height: 1.6; }
  .btn-row .btn { flex: 1 1 auto; justify-content: center; }
  .hero-canvas { margin-top: 20px; }
  .section { border-radius: 12px; }
  .sec-head { gap: 16px; }
  .lead { font-size: 16px; }
  .footer-mark { margin-top: 20px; }
  .mail-cta { font-size: 14px; }
}

/* ================= Alt sayfalar: About + Contact ================= */
.page-hero { position: relative; overflow: hidden; padding: 190px var(--pad-x) 60px; }
.page-hero .hero-bg { position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(40% 60% at 85% 20%, rgba(142, 162, 255, .12), transparent 70%), radial-gradient(30% 50% at 65% 80%, rgba(201, 168, 255, .08), transparent 70%); }
.page-hero .wrap { display: flex; flex-direction: column; gap: 22px; }
.page-title { font-size: clamp(44px, 7vw, 96px); }
.page-title .chars { display: inline-block; }
.page-lead { max-width: 640px; }
.crumbs { display: flex; gap: 10px; font: 500 13px/1 var(--font-label); letter-spacing: .1em; text-transform: uppercase; color: var(--fg-60); }
.crumbs a { color: var(--fg-60); transition: color .25s ease; } .crumbs a:hover { color: var(--fg); }
.crumbs [aria-current] { color: var(--fg); }
.crumbs--contact { max-width: calc(var(--container) + 80px); margin: 0 auto 20px; padding: 0 4px; }
.contact-sec--page { padding-top: 170px; }

/* Deneyim zaman çizelgesi */
.xp-list { list-style: none; margin: 44px 0 0; padding: 0; position: relative; }
.xp-list::before { content: ""; position: absolute; left: 180px; top: 10px; bottom: 10px; width: 1px; background: linear-gradient(180deg, var(--ac-blue), var(--ac-lilac) 60%, transparent); opacity: .5; }
.xp { position: relative; display: grid; grid-template-columns: 180px 1fr; gap: 0 48px; padding: 26px 0; border-bottom: 1px solid var(--line); }
.xp:last-child { border-bottom: 0; }
.xp-year { font: 500 14px/1.6 var(--font-label); letter-spacing: .08em; color: var(--fg-60); padding-top: 4px; }
.xp-body { display: flex; flex-direction: column; gap: 6px; }
.xp-dot { position: absolute; left: 175px; top: 34px; width: 11px; height: 11px; border-radius: 50%; background: var(--bg); border: 2px solid var(--ac-blue); box-shadow: 0 0 12px rgba(142, 162, 255, .5); }
.xp--edu .xp-dot { border-color: var(--ac-peach); box-shadow: 0 0 12px rgba(240, 184, 160, .45); }

/* CTA bandı */
.cta-band { position: relative; display: flex; flex-direction: column; gap: 22px; padding: 48px; border-radius: var(--r-20); overflow: hidden;
  background: radial-gradient(60% 120% at 100% 0%, rgba(142, 162, 255, .16), transparent 60%), radial-gradient(50% 100% at 0% 100%, rgba(201, 168, 255, .12), transparent 60%), var(--surface-2); box-shadow: var(--sh-card); }
.cta-band-title { font: 400 clamp(26px, 3.4vw, 44px)/1.2 var(--font-wide); max-width: 820px; }
.cta-band-go { display: inline-flex; align-items: center; gap: 14px; font: 500 17px/1 var(--font-ui); }
.cta-band:hover .cta-band-title { color: #fff; }

/* İletişim kanalları */
.ways { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.way { position: relative; display: flex; flex-direction: column; gap: 10px; padding: 24px; min-height: 180px; border-radius: var(--r-16); background: var(--surface-2); box-shadow: var(--sh-card); transition: transform .4s var(--ease-out), box-shadow .4s ease; }
.way:not(.way--static):hover { transform: translateY(-4px); box-shadow: var(--sh-card), 0 20px 50px -24px rgba(142, 162, 255, .45); }
.way-ico { width: 40px; height: 40px; display: grid; place-items: center; border-radius: 12px; background: var(--bg); box-shadow: var(--sh-edge-strong); margin-bottom: auto; }
.way-ico .ico { width: 18px; height: 18px; }
.way b { font: 500 17px/1.4 var(--font-ui); word-break: break-word; }
.way-go { position: absolute; right: 16px; top: 16px; }
.way-note { font-size: 14px; }

@media (max-width: 1299.98px) { .ways { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 749.98px) {
  .page-hero { padding: 130px var(--pad-x) 30px; }
  .contact-sec--page { padding-top: 110px; }
  .xp-list::before { left: 5px; }
  .xp { grid-template-columns: 1fr; gap: 8px; padding: 22px 0 22px 28px; }
  .xp-dot { left: 0; top: 28px; }
  .cta-band { padding: 28px 22px; }
  .ways { grid-template-columns: 1fr; }
  .way { min-height: 0; }
}

/* ================= Portfolio (/portfolio) ================= */
.pf-hero { padding-bottom: 40px; }
.pf-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 32px; flex-wrap: wrap; }
.pf-count { max-width: 340px; color: var(--fg-60); font-size: 17px; line-height: 1.55; }
.pf-count b { display: block; font: 400 56px/1 var(--font-wide); color: var(--fg); margin-bottom: 8px; }

/* Yapışkan filtre çubuğu (cam) */
.pf-bar-wrap { position: sticky; top: 96px; z-index: 30; padding: 0 var(--pad-x); pointer-events: none; }
.pf-bar { pointer-events: auto; max-width: var(--container); margin: 0 auto; display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 6px;
  border-radius: 999px; border: 1px solid rgba(255, 255, 255, .09); background: linear-gradient(180deg, rgba(28, 28, 34, .6), rgba(12, 12, 16, .5));
  backdrop-filter: blur(20px) saturate(160%); -webkit-backdrop-filter: blur(20px) saturate(160%); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .07), 0 12px 40px rgba(0, 0, 0, .35); }
.pf-filters { position: relative; display: flex; gap: 2px; overflow-x: auto; scrollbar-width: none; }
.pf-filters::-webkit-scrollbar { display: none; }
.pf-ind { position: absolute; top: 0; left: 0; height: 100%; border-radius: 999px; background: var(--grad-btn-light); transition: transform .5s var(--spring), width .5s var(--spring); z-index: 0; }
.pf-filter { position: relative; z-index: 1; flex: none; height: 40px; padding: 0 16px; border-radius: 999px; font: 500 14px/1 var(--font-ui); color: var(--fg-60); white-space: nowrap; transition: color .3s ease; }
.pf-filter:hover { color: var(--fg); }
.pf-filter.on { color: var(--bg); }
.pf-filter sup { margin-left: 4px; font-size: 10px; opacity: .7; vertical-align: super; }
.pf-views { display: flex; gap: 2px; padding-left: 8px; border-left: 1px solid var(--line); flex: none; }
.pf-view { width: 40px; height: 40px; display: grid; place-items: center; border-radius: 50%; color: var(--fg-60); transition: color .25s ease, background .25s ease; }
.pf-view .ico { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.6; }
.pf-view.on { color: var(--fg); background: rgba(255, 255, 255, .08); }

/* Editoryal grid */
.pf-section { padding-top: 48px; }
.pf-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 40px 24px; }
.pf-card { position: relative; display: flex; flex-direction: column; gap: 16px; grid-column: span 4; }
.pf-card.f3 { grid-column: span 3; } .pf-card.f4 { grid-column: span 4; } .pf-card.f5 { grid-column: span 5; }
.pf-card.f6 { grid-column: span 6; } .pf-card.f7 { grid-column: span 7; }
.pf-media { position: relative; height: 360px; border-radius: var(--r-16); overflow: hidden; background: var(--surface-2); box-shadow: var(--sh-media); isolation: isolate; }
.pf-card.f5 .pf-media, .pf-card.f7 .pf-media { height: 480px; }
.pf-card.f6 .pf-media, .pf-card.f3 .pf-media { height: 460px; }
.pf-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .9s var(--ease-out), opacity .6s ease, filter .6s ease; }
.pf-media .pf-alt { opacity: 0; }
.pf-card:hover .pf-media .pf-alt { opacity: 1; }
.pf-card:hover .pf-media img { --zoom: 1.06; }
.pf-media::after { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; border-radius: inherit; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .06);
  background: linear-gradient(180deg, transparent 55%, rgba(8, 8, 8, .55)); opacity: .8; transition: opacity .5s ease; }
.pf-card:hover .pf-media::after { opacity: .4; }
.pf-no { position: absolute; left: 18px; top: 16px; z-index: 2; font: 400 13px/1 var(--font-wide); letter-spacing: .02em; color: #fff; padding: 7px 10px; border-radius: 999px;
  background: rgba(8, 8, 8, .45); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border: 1px solid rgba(255, 255, 255, .12); }
.pf-media .arrow-ico { position: absolute; right: 16px; bottom: 16px; z-index: 2; opacity: 0; transform: translateY(8px); transition: opacity .4s ease, transform .5s var(--ease-out); }
.pf-card:hover .pf-media .arrow-ico, .pf-card:focus-visible .pf-media .arrow-ico { opacity: 1; transform: none; }
.pf-card:hover .pf-media { box-shadow: var(--sh-media), 0 30px 70px -30px rgba(142, 162, 255, .45); }
.pf-meta { display: flex; flex-direction: column; gap: 8px; padding: 0 4px; }
.pf-title { font: 500 20px/1.35 var(--font-ui); margin: 0; transition: color .3s ease; }
.pf-card:hover .pf-title { color: #fff; }
.pf-desc { font-size: 15px; line-height: 1.55; color: var(--fg-60); max-width: 520px; }
.pf-tags { display: flex; flex-wrap: wrap; gap: 6px; }
.pf-tags span { padding: 3px 10px; border-radius: 999px; border: 1px solid var(--line); font: 500 12px/20px var(--font-label); color: var(--fg-60); }
/* parallax ölçeği zoom ile birleşsin */
.pf-media[data-parallax] img { transform: translate3d(0, var(--py, 0px), 0) scale(calc(1.12 * var(--zoom, 1))); }

/* Filtre aktifken düzenli 3 kolon */
.pf-grid.is-filtered .pf-card { grid-column: span 4 !important; }
.pf-grid.is-filtered .pf-media { height: 340px !important; }
.pf-card.out { display: none; }
.pf-card.pop { animation: pfPop .6s var(--ease-out) both; }
@keyframes pfPop { from { opacity: 0; transform: translateY(24px) scale(.98); filter: blur(6px); } to { opacity: 1; transform: none; filter: none; } }

/* Liste görünümü + imleci takip eden önizleme */
.pf-list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.pf-row a { display: grid; grid-template-columns: 70px minmax(0, 1fr) 240px 80px 52px; align-items: center; gap: 16px; padding: 22px 8px; border-bottom: 1px solid var(--line); transition: background .3s ease, padding .4s var(--ease-out); }
.pf-row a:hover, .pf-row a:focus-visible { background: rgba(255, 255, 255, .03); padding-left: 18px; }
.pf-row-no { font: 400 13px/1 var(--font-wide); color: var(--fg-60); }
.pf-row-title { font: 400 clamp(17px, 1.7vw, 22px)/1.35 var(--font-wide); }
.pf-row-cat, .pf-row-year { font-size: 14px; color: var(--fg-60); }
.pf-row .arrow-ico { justify-self: end; }
.pf-row.out { display: none; }
.pf-preview { position: fixed; left: 0; top: 0; z-index: 45; width: 300px; height: 210px; border-radius: 14px; overflow: hidden; pointer-events: none; opacity: 0;
  transform: translate3d(var(--x, 0), var(--y, 0), 0) translate(-50%, -50%) scale(.8) rotate(var(--r, 0deg)); transition: opacity .3s ease, transform .5s var(--ease-out); box-shadow: 0 30px 80px rgba(0, 0, 0, .6); }
.pf-preview.on { opacity: 1; transform: translate3d(var(--x, 0), var(--y, 0), 0) translate(-50%, -50%) scale(1) rotate(var(--r, 0deg)); }
.pf-preview img { width: 100%; height: 100%; object-fit: cover; }
.pf-empty { padding: 60px 0; text-align: center; color: var(--fg-60); }

@media (max-width: 1299.98px) {
  .pf-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px 20px; }
  .pf-card, .pf-card.f3, .pf-card.f4, .pf-card.f5, .pf-card.f6, .pf-card.f7, .pf-grid.is-filtered .pf-card { grid-column: span 1 !important; }
  .pf-card .pf-media, .pf-grid.is-filtered .pf-media { height: 380px !important; }
  .pf-card:first-child { grid-column: 1 / -1 !important; } .pf-card:first-child .pf-media { height: 460px !important; }
  .pf-bar-wrap { top: 92px; }
  .pf-row a { grid-template-columns: 56px minmax(0, 1fr) 180px 52px; } .pf-row-year { display: none; }
}
@media (max-width: 749.98px) {
  .pf-count b { font-size: 40px; }
  .pf-bar-wrap { top: 78px; padding: 0 10px; }
  .pf-bar { padding: 4px; }
  .pf-filter { height: 36px; padding: 0 13px; font-size: 13px; }
  .pf-views { display: none; }
  .pf-grid { grid-template-columns: 1fr; gap: 28px; }
  .pf-card:first-child { grid-column: auto !important; }
  .pf-card .pf-media, .pf-grid.is-filtered .pf-media, .pf-card:first-child .pf-media { height: 300px !important; }
  .pf-media .arrow-ico { opacity: 1; transform: none; }
  .pf-title { font-size: 18px; }
}
@media (prefers-reduced-motion: reduce) and (max-width: 0px) { .pf-card.pop { animation: none; } .pf-preview { display: none; } }
[hidden] { display: none !important; }

/* ================= Portfolio v2: anasayfa kart dili ================= */
.pf-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 24px; }
.pf-grid .pf-card { grid-column: span 2; gap: 18px; }
.pf-grid .pf-card--big { grid-column: span 3; }
.pf-grid .pf-card .media { aspect-ratio: 4 / 3; height: auto; }
.pf-grid .pf-card .media img { position: absolute; inset: 0; }
.pf-grid .pf-card .media .pf-alt { opacity: 0; transition: opacity .6s ease; }
.pf-grid .pf-card:hover .media .pf-alt { opacity: 1; }
.pf-grid .pf-card .pf-no { z-index: 2; }
.pf-grid .work-meta .h5 { font-size: 18px; line-height: 1.35; }
.pf-grid .work-tag { white-space: normal; text-align: right; max-width: 48%; }
.pf-grid.is-filtered .pf-card { grid-column: span 2 !important; }
.pf-grid .pf-card:hover { box-shadow: var(--sh-card), 0 30px 70px -34px rgba(142, 162, 255, .5); }
@media (max-width: 1299.98px) {
  .pf-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pf-grid .pf-card, .pf-grid .pf-card--big, .pf-grid.is-filtered .pf-card { grid-column: span 1 !important; }
}
@media (max-width: 749.98px) {
  .pf-grid { grid-template-columns: 1fr; }
  .pf-grid .work-meta { flex-direction: column; } .pf-grid .work-tag { max-width: none; text-align: left; align-self: flex-start; }
}

/* E-posta CTA: ikon ve metin tam ortalı */
.mail-cta { display: inline-flex; align-items: center; height: 40px; line-height: 1; padding: 0 14px 0 12px; }
.mail-cta > * { display: block; line-height: 1; }
.mail-cta .ico { margin: 0; }
.mail-cta span { transform: translateY(.5px); }

/* ================= Proje sayfası şablonu (.pj) ================= */
.pj-hero { position: relative; overflow: hidden; padding: 180px var(--pad-x) 56px; }
.pj-hero .hero-bg { position: absolute; inset: 0; pointer-events: none; background: radial-gradient(40% 60% at 85% 20%, rgba(0, 116, 255, .16), transparent 70%), radial-gradient(30% 50% at 60% 90%, rgba(38, 197, 255, .08), transparent 70%); }
.pj-hero .wrap { display: flex; flex-direction: column; gap: 28px; }
.pj-hero-grid { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 56px; align-items: end; }
.pj-hero-txt { display: flex; flex-direction: column; gap: 22px; }
.pj-title { font-size: clamp(44px, 6.4vw, 92px); line-height: 1.02; }
.pj-title .chars { display: block; }
.pj-title .muted { font-size: .62em; margin-top: 6px; }
.pj-facts { margin: 0; display: grid; gap: 0; border-top: 1px solid var(--line); }
.pj-facts > div { display: grid; grid-template-columns: 110px 1fr; gap: 16px; padding: 14px 0; border-bottom: 1px solid var(--line); }
.pj-facts dt { font: 500 12px/1.6 var(--font-label); letter-spacing: .12em; text-transform: uppercase; color: var(--fg-60); }
.pj-facts dd { margin: 0; font-size: 15px; }
.pj-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.pj-chips span { padding: 2px 10px; border-radius: 999px; border: 1px solid var(--line); font-size: 13px; line-height: 22px; color: var(--fg-60); }
.btn .ico { fill: currentColor; }

.pj-cover-wrap { padding: 0 var(--pad-x); }
.pj-cover { max-width: calc(var(--container) + 160px); margin: 0 auto; aspect-ratio: 16 / 9; border-radius: var(--r-20); overflow: hidden; background: #0046d6; box-shadow: var(--sh-media), 0 40px 120px -40px rgba(0, 116, 255, .5); }
.pj-cover-video { width: 100%; height: 100%; object-fit: cover; display: block; }

.pj-sec { position: relative; }
.pj-split { display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: 48px; align-items: start; }
.pj-side { position: sticky; top: 120px; display: flex; flex-direction: column; align-items: flex-start; gap: 14px; }
.pj-num { font: 400 13px/1 var(--font-wide); color: var(--fg-60); letter-spacing: .04em; }
.pj-num::after { content: ""; display: inline-block; width: 40px; height: 1px; margin-left: 10px; vertical-align: middle; background: linear-gradient(90deg, #0074ff, transparent); }
.pj-body { display: flex; flex-direction: column; gap: 22px; max-width: 760px; }
.pj-big { font: 400 clamp(22px, 2.3vw, 30px)/1.45 var(--font-ui); letter-spacing: -.01em; color: var(--fg); }
.pj-p { font-size: 17px; line-height: 1.7; max-width: 640px; }
.pj-pillars { list-style: none; margin: 8px 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.pj-pillars li { display: flex; flex-direction: column; gap: 6px; padding: 18px; border-radius: var(--r-16); background: var(--surface-2); box-shadow: var(--sh-card); }
.pj-pillars b { font: 500 16px/1.3 var(--font-ui); background: linear-gradient(90deg, #6bddff, #0074ff); -webkit-background-clip: text; background-clip: text; color: transparent; }
.pj-pillars span { font-size: 14px; line-height: 1.5; color: var(--fg-60); }

/* Arayüz vitrin */
.pj-show-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: 48px; align-items: center; }
.pj-show-txt { display: flex; flex-direction: column; gap: 18px; align-items: flex-start; }
.pj-phone { position: relative; }
.pj-phone img { position: relative; z-index: 1; width: 100%; height: auto; display: block; }
.pj-phone-glow { position: absolute; inset: 15% 20%; border-radius: 50%; background: radial-gradient(circle, rgba(0, 116, 255, .45), transparent 65%); filter: blur(40px); }
.pj-callout { position: absolute; z-index: 2; padding: 7px 12px; border-radius: 999px; font: 500 13px/1 var(--font-ui); color: #fff; white-space: nowrap;
  background: rgba(10, 14, 30, .6); border: 1px solid rgba(107, 221, 255, .35); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); animation: floatY 4s ease-in-out infinite; }
.pj-callout::before { content: ""; display: inline-block; width: 7px; height: 7px; margin-right: 8px; border-radius: 50%; background: #26c5ff; box-shadow: 0 0 10px #26c5ff; vertical-align: 1px; }
.pj-callout--a { left: 4%; top: 25%; } .pj-callout--b { right: 2%; top: 50%; animation-delay: -1.3s; } .pj-callout--c { left: 8%; bottom: 22%; animation-delay: -2.6s; }

/* Görseller */
.pj-duo { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; margin-top: 48px; }
.pj-fig { margin: 0; display: flex; flex-direction: column; gap: 12px; }
.pj-fig--wide { margin-top: 40px; }
.pj-media { position: relative; border-radius: var(--r-16); overflow: hidden; box-shadow: var(--sh-media); background: var(--surface-2); }
.pj-media img { width: 100%; height: auto; display: block; }
.pj-duo .pj-media { aspect-ratio: 16 / 9; } .pj-duo .pj-media img { height: 100%; object-fit: cover; }
.pj-media--light { background: #f4f8fd; padding: 0; }
.pj-media--tall img { max-height: 900px; object-fit: cover; object-position: top; }
.pj-fig figcaption { font: 500 13px/1.4 var(--font-label); letter-spacing: .08em; text-transform: uppercase; color: var(--fg-60); }
.pj-zoomable .pj-media { cursor: zoom-in; }
.pj-zoomable .pj-media::after { content: "Click to enlarge"; position: absolute; right: 14px; top: 14px; padding: 6px 10px; border-radius: 999px; font: 500 12px/1 var(--font-ui); color: #fff; background: rgba(8, 8, 8, .6); opacity: 0; transition: opacity .3s ease; }
.pj-zoomable .pj-media:hover::after { opacity: 1; }

/* Palet */
.pj-palette { display: grid; grid-template-columns: repeat(11, minmax(0, 1fr)); gap: 6px; margin-top: 40px; }
.pj-swatch { position: relative; height: 120px; border-radius: 12px; background: var(--c); display: flex; flex-direction: column; justify-content: flex-end; gap: 2px; padding: 10px; text-align: left;
  color: #0b1a3a; transition: transform .4s var(--ease-out), box-shadow .3s ease; }
.pj-swatch:nth-child(n+6) { color: #fff; }
.pj-swatch span { font: 600 13px/1 var(--font-ui); } .pj-swatch b { font: 500 10px/1.2 var(--font-label); letter-spacing: .02em; opacity: .85; }
.pj-swatch:hover { transform: translateY(-6px); box-shadow: 0 16px 30px -12px var(--c); }
.pj-swatch.copied::after { content: "Copied"; position: absolute; left: 50%; top: 10px; transform: translateX(-50%); padding: 3px 8px; border-radius: 999px; background: #fff; color: #0b1a3a; font: 600 11px/1 var(--font-ui); }
.pj-reasons { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-top: 20px; }
.pj-reason { display: flex; flex-direction: column; gap: 10px; padding: 24px; border-radius: var(--r-16); background: var(--surface-2); box-shadow: var(--sh-card); }
.pj-reason-dot { width: 12px; height: 12px; border-radius: 50%; background: var(--c); box-shadow: 0 0 14px var(--c); }

/* Skorlar */
.pj-scores { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin-top: 40px; }
.pj-score { position: relative; display: grid; grid-template-columns: 120px 1fr; grid-template-rows: auto auto 1fr; gap: 4px 24px; padding: 24px; border-radius: var(--r-16); background: var(--surface-2); box-shadow: var(--sh-card); }
.pj-score svg { grid-row: 1 / 4; width: 120px; height: 120px; transform: rotate(-90deg); }
.pj-score circle { fill: none; stroke: rgba(255, 255, 255, .08); stroke-width: 8; }
.pj-score circle.v { stroke: url(#none); stroke: #26c5ff; stroke-linecap: round; stroke-dasharray: 327; stroke-dashoffset: 327; transition: stroke-dashoffset 1.6s var(--ease-out) .2s; }
.pj-score.in circle.v { stroke-dashoffset: calc(327 * (1 - var(--p))); }
.pj-score b { position: absolute; left: 24px; top: 24px; width: 120px; height: 120px; display: grid; place-items: center; font: 400 34px/1 var(--font-wide); }
.pj-score span { font: 500 13px/1.4 var(--font-label); letter-spacing: .1em; text-transform: uppercase; color: var(--fg-60); align-self: end; }
.pj-score p { font-size: 15px; line-height: 1.6; }
.pj-habit { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 40px; margin-top: 40px; align-items: start; }
.pj-insights { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 14px; counter-reset: ins; position: sticky; top: 120px; }
.pj-insights li { counter-increment: ins; display: flex; flex-direction: column; gap: 8px; padding: 24px; border-radius: var(--r-16); background: var(--surface-2); box-shadow: var(--sh-card); }
.pj-insights li::before { content: "0" counter(ins); font: 400 12px/1 var(--font-wide); color: #26c5ff; }

/* Demo + sonraki proje */
.pj-demo { display: flex; justify-content: space-between; align-items: flex-end; gap: 32px; flex-wrap: wrap; padding: 48px; border-radius: var(--r-20);
  background: radial-gradient(60% 120% at 100% 0%, rgba(0, 116, 255, .22), transparent 60%), var(--surface-2); box-shadow: var(--sh-card); }
.pj-demo > div:first-child { display: flex; flex-direction: column; gap: 16px; align-items: flex-start; max-width: 620px; }
.pj-next { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 32px; align-items: center; padding: 24px; border-radius: var(--r-20); background: var(--surface-2); box-shadow: var(--sh-card); overflow: hidden; }
.pj-next-txt { display: flex; flex-direction: column; gap: 16px; padding: 16px; }
.pj-next-title { font: 400 clamp(26px, 3.2vw, 44px)/1.15 var(--font-wide); }
.pj-next-go { display: inline-flex; align-items: center; gap: 12px; font: 500 16px/1 var(--font-ui); color: var(--fg-60); }
.pj-next-media { aspect-ratio: 4 / 3; border-radius: var(--r-12); overflow: hidden; box-shadow: var(--sh-media); }
.pj-next-media img { width: 100%; height: 100%; object-fit: cover; transition: transform .9s var(--ease-out); }
.pj-next:hover .pj-next-media img { transform: scale(1.05); }
.pj-rights { margin-top: 28px; font-size: 12px; line-height: 1.6; color: rgba(255, 255, 255, .35); max-width: 760px; }
.pj-lightbox { position: fixed; inset: 0; z-index: 300; display: grid; place-items: center; padding: 40px; background: rgba(5, 5, 8, .88); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); cursor: zoom-out; }
.pj-lightbox img { max-width: 100%; max-height: 100%; border-radius: 12px; box-shadow: 0 30px 90px rgba(0, 0, 0, .6); }
.pj-lb-close { position: absolute; right: 20px; top: 20px; width: 44px; height: 44px; border-radius: 50%; background: rgba(255, 255, 255, .1); color: #fff; font-size: 26px; line-height: 1; }

@media (max-width: 1299.98px) {
  .pj-hero-grid, .pj-show-grid { grid-template-columns: 1fr; gap: 36px; }
  .pj-split { grid-template-columns: 1fr; gap: 20px; }
  .pj-side { position: static; flex-direction: row; align-items: center; }
  .pj-palette { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .pj-habit { grid-template-columns: 1fr; } .pj-insights { position: static; }
}
@media (max-width: 749.98px) {
  .pj-hero { padding: 120px var(--pad-x) 36px; }
  .pj-facts > div { grid-template-columns: 90px 1fr; }
  .pj-cover { aspect-ratio: 4 / 3; border-radius: 14px; }
  .pj-pillars, .pj-reasons, .pj-scores, .pj-duo { grid-template-columns: 1fr; }
  .pj-palette { grid-template-columns: repeat(4, minmax(0, 1fr)); } .pj-swatch { height: 84px; }
  .pj-callout { font-size: 11px; padding: 5px 9px; }
  .pj-score { grid-template-columns: 90px 1fr; } .pj-score svg, .pj-score b { width: 90px; height: 90px; } .pj-score b { font-size: 26px; }
  .pj-demo { padding: 28px 22px; }
  .pj-next { grid-template-columns: 1fr; padding: 16px; }
}

/* TR/EN sırası: TR solda, EN (varsayılan) sağda */
.seg::before { transform: none; }
.seg[data-active="en"]::before { transform: translateX(34px); }
.seg[data-active="tr"]::before { transform: none; }

/* ================= Portfolio v3: 2 kolon, Monument başlık, tek satır etiketler ================= */
.pf-grid, .pf-grid.is-filtered { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 28px; }
.pf-grid .pf-card, .pf-grid .pf-card--big, .pf-grid.is-filtered .pf-card, .pf-grid .pf-card:first-child { grid-column: auto !important; gap: 0; padding: 18px 18px 24px; }
.pf-grid .pf-card .media, .pf-grid .pf-card:first-child .media { aspect-ratio: 16 / 11; height: auto !important; }
.pf-info { display: flex; flex-direction: column; gap: 10px; padding: 26px 6px 0; }
.pf-name { margin: 0; font: 400 clamp(18px, 1.55vw, 22px)/1.3 var(--font-wide); letter-spacing: 0;
  background: linear-gradient(92deg, #f2f3f7 0%, #c9cde0 45%, #b9a9d6 100%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.pf-sub { margin: 0; font: 400 15px/1.6 var(--font-ui); color: var(--fg-60); max-width: 520px; }
.pf-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.pf-chips span { white-space: nowrap; padding: 4px 10px; border-radius: 999px; background: rgba(255, 255, 255, .04); border: 1px solid var(--line); font: 500 12px/16px var(--font-label); letter-spacing: .02em; color: var(--fg-60); }
.pf-chips .pf-year { color: #b9c3ff; border-color: rgba(142, 162, 255, .3); }
.pf-card:hover .pf-name { background: linear-gradient(92deg, #ffffff 0%, #d7dcff 45%, #c9a8ff 100%); -webkit-background-clip: text; background-clip: text; }
.grad-chars .ch { background: var(--grad-tint); background-size: var(--gw, 100%) 100%; background-position: var(--gx, 0) 0; background-repeat: no-repeat; -webkit-background-clip: text; background-clip: text; color: transparent; }
.pf-hero .pf-head { margin-top: 4px; }
@media (max-width: 749.98px) {
  .pf-grid, .pf-grid.is-filtered { grid-template-columns: 1fr !important; gap: 20px; }
  .pf-grid .pf-card { padding: 14px 14px 20px; }
  .pf-info { padding-top: 20px; }
}

/* Proje sayfası: gömülü prototip/video + galeri */
.pj-embeds { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 20px; margin-top: 40px; align-items: start; }
.pj-embed { position: relative; aspect-ratio: 16 / 9; border-radius: var(--r-16); overflow: hidden; background: #0d0d12; box-shadow: var(--sh-media); }
.pj-embed--proto { aspect-ratio: 4 / 5; }
.pj-embed iframe, .pj-embed video { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; display: block; object-fit: cover; }
.pj-gallery { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-top: 40px; }
.pj-gallery--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.pj-gallery--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.pj-gallery .pj-fig { gap: 10px; }
.pj-gallery .pj-media img { aspect-ratio: 1 / 1; object-fit: cover; }
.pj-gallery .pj-wide { grid-column: span 2; }
.pj-gallery .pj-wide .pj-media img { aspect-ratio: auto; height: 100%; }
.pj-quote { margin: 8px 0 0; padding: 22px 24px; border-left: 2px solid; border-image: linear-gradient(180deg, #f15bff, #6b5bff) 1; background: rgba(255, 255, 255, .03); border-radius: 0 12px 12px 0; font: 400 clamp(17px, 1.5vw, 20px)/1.55 var(--font-ui); color: var(--fg); }
@media (max-width: 1299.98px) { .pj-embeds { grid-template-columns: 1fr; } .pj-embed--proto { aspect-ratio: 16 / 10; } .pj-gallery--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 749.98px) { .pj-gallery, .pj-gallery--2, .pj-gallery--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; } .pj-gallery .pj-wide { grid-column: 1 / -1; } }
.pj-embeds--even { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.pj-gallery .pj-tall .pj-media img { aspect-ratio: 4 / 5; object-position: top; }
.pj--baux .pj-hero .hero-bg { background: radial-gradient(40% 60% at 85% 20%, rgba(241, 91, 255, .16), transparent 70%), radial-gradient(30% 50% at 60% 90%, rgba(91, 107, 255, .14), transparent 70%); }
.pj--baux .pj-cover { background: #1a0b33; box-shadow: var(--sh-media), 0 40px 120px -40px rgba(155, 91, 255, .55); }
.pj--baux .pj-num::after { background: linear-gradient(90deg, #f15bff, transparent); }
.pj--baux .pj-score circle.v { stroke: #f15bff; }
@media (max-width: 1299.98px) { .pj-embeds--even { grid-template-columns: 1fr; } }
.pj--baux .pj-title { font-size: clamp(40px, 5.4vw, 84px); }
.pj-gallery .pj-tall { max-width: 760px; margin-inline: auto; width: 100%; }
@media (max-width: 599.98px) { .pj--baux .pj-title { font-size: 8.6vw; } }

/* ================= v10: filtre çubuğu, başlık gradyanı, HealthMind ================= */
.pf-bar-wrap { margin-bottom: 12px; }
.pf-section::after { display: none; }
.pf-name, .pf-card:hover .pf-name { align-self: flex-start; max-width: 100%; background: var(--grad-tint); -webkit-background-clip: text; background-clip: text; color: transparent; }
.pf-card:hover .pf-name { filter: brightness(1.12); }
.work-grid.pf-grid { margin-top: 0; }
.pj-cover > img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pj--hm .pj-cover { background: #050814; box-shadow: var(--sh-media), 0 40px 120px -40px rgba(32, 83, 224, .55); }
.pj--hm .pj-hero .hero-bg { background: radial-gradient(40% 60% at 85% 20%, rgba(32, 83, 224, .2), transparent 70%), radial-gradient(30% 50% at 60% 90%, rgba(94, 193, 252, .12), transparent 70%); }
.pj-gallery--portrait .pj-media img { aspect-ratio: 4 / 5; }
.pj-gallery--natural .pj-media img, .pj-gallery .pj-full .pj-media img { aspect-ratio: auto; height: auto; }
.pj-hm-spec { display: grid; grid-template-columns: 1.5fr 1fr; gap: 24px; margin-top: 40px; }
.pj-pal-label { margin: 0 0 12px; font: 500 13px/1 var(--font-label); letter-spacing: .08em; text-transform: uppercase; color: var(--fg-60); }
.pj-hm-pal .pj-palette { margin-bottom: 24px; grid-template-columns: repeat(9, minmax(0, 1fr)); }
.pj-hm-type { padding: 24px; border-radius: var(--r-16); border: 1px solid var(--line); background: var(--surface-1); }
.pj-hm-font { margin: 0 0 18px; font: 500 28px/1.15 var(--font-ui); background: linear-gradient(92deg, #5ec1fc, #2053e0); -webkit-background-clip: text; background-clip: text; color: transparent; }
.pj-hm-font small { display: block; margin-top: 8px; font-size: 14px; color: var(--fg-60); -webkit-text-fill-color: var(--fg-60); }
.pj-hm-type ul { list-style: none; margin: 0; padding: 0; }
.pj-hm-type li { display: flex; justify-content: space-between; align-items: baseline; padding: 10px 0; border-top: 1px solid var(--line); }
.pj-hm-type li span { font: 500 22px/1 var(--font-ui); color: #5ec1fc; } .pj-hm-type li b { font: 400 15px/1 var(--font-ui); color: var(--fg-60); }
.pj-hm-home { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 40px; align-items: start; }
.pj-hm-stack { display: grid; gap: 16px; position: sticky; top: 110px; }
@media (max-width: 999.98px) { .pj-hm-spec, .pj-hm-home { grid-template-columns: 1fr; } .pj-hm-stack { position: static; } .pj-hm-pal .pj-palette { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
.pj-hm-pal .pj-palette { margin-top: 0; }
.pj--hm .pj-title { font-size: clamp(40px, 5.4vw, 84px); }
@media (max-width: 599.98px) { .pj--hm .pj-title { font-size: 10vw; } }

/* ================= v11: proje hero — başlık tam genişlik, bilgiler altta satır ================= */
.pj-hero-grid { grid-template-columns: minmax(0, 1fr) !important; gap: 48px; align-items: start; }
.pj-hero .pj-title, .pj--baux .pj-title, .pj--hm .pj-title { font-size: clamp(38px, 6.6vw, 112px); overflow-wrap: anywhere; }
.pj-hero-txt .lead { max-width: 720px; }
.pj-facts { grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.pj-facts > div { grid-template-columns: 1fr; gap: 10px; padding: 20px 24px 22px 0; border-bottom: 0; }
.pj-facts > div + div { padding-left: 24px; border-left: 1px solid var(--line); }
@media (max-width: 999.98px) { .pj-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); } .pj-facts > div:nth-child(3) { padding-left: 0; border-left: 0; } .pj-facts > div:nth-child(n+3) { border-top: 1px solid var(--line); } }
@media (max-width: 599.98px) { .pj-facts { grid-template-columns: 1fr; } .pj-facts > div, .pj-facts > div + div { padding-left: 0; border-left: 0; } .pj-facts > div + div { border-top: 1px solid var(--line); } .pj-hero .pj-title, .pj--baux .pj-title, .pj--hm .pj-title { font-size: 10vw; } }
.pj-embeds--solo { grid-template-columns: minmax(0, 1fr); max-width: 1000px; margin-inline: auto; }
.pj--pba .pj-cover, .pj--kt .pj-cover, .pj--b24 .pj-cover { background: #0a0c18; }
/* v12: tam genişlik trailer + proje galerileri */
.pj-trailer { padding: 0 var(--pad-x) 40px; }
.pj-trailer-frame { position: relative; max-width: calc(var(--container) + 160px); margin: 0 auto; aspect-ratio: 16 / 9; border-radius: var(--r-20); overflow: hidden; background: #000; box-shadow: var(--sh-media); }
.pj-trailer-frame iframe, .pj-trailer-frame video { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; object-fit: cover; }
#prototype .pj-embeds { grid-template-columns: minmax(0, 1fr); max-width: 560px; margin-inline: auto; }
.pj-cover--embed { aspect-ratio: 16 / 9; position: relative; }
.pj-cover--embed iframe, .pj-cover--embed video { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; object-fit: cover; }
.pj-cover--portrait { aspect-ratio: auto; max-width: 520px; background: #000; }
.pj-cover--portrait video { width: 100%; display: block; }
.pj-logo-fig .pj-media { padding: clamp(28px, 6vw, 80px); background: radial-gradient(80% 120% at 50% 0%, rgba(255,255,255,.06), transparent 70%), var(--surface-2); }
.pj-logo-fig .pj-media img { width: 100%; max-width: 760px; margin: 0 auto; }
@media (max-width: 599.98px) { .pj-hero .pj-title, .pj--baux .pj-title, .pj--hm .pj-title { font-size: 7.4vw; } }
.sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* ================= v13: mobil düzeltmeler ================= */
.mail-cta { flex-wrap: nowrap; white-space: nowrap; max-width: 100%; }
@media (max-width: 899.98px) {
  .footer { position: relative; }
  #main { margin-bottom: 0 !important; }
}
@media (max-width: 599.98px) {
  .mail-cta { font-size: 12.5px; gap: 6px; padding-inline: 12px; }
}

/* ================= v14: Blog yazısı + kayan sayfa yığını ================= */
.post-hero .pj-title { margin-top: 18px; }
.post-hero .lead { max-width: 760px; }
.post-meta { margin: 22px 0 0; font-size: 14px; color: var(--fg-60); }
.post-meta-hint { color: var(--fg); opacity: .8; }
.post-body { padding-top: 40px; }
.post-wrap { max-width: 760px; display: flex; flex-direction: column; gap: 22px; }
.post-wrap .pj-p { max-width: none; }
.post-wrap mark { background: none; color: #c9a8ff; font-weight: 500; }
.post-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin: 8px 0; }
.post-stats div { padding: 22px; border: 1px solid var(--line); border-radius: var(--r-16); background: var(--surface-1); }
.post-stats b { display: block; font: 400 clamp(36px, 4vw, 52px)/1 var(--font-wide); background: var(--grad-tint); -webkit-background-clip: text; background-clip: text; color: transparent; margin-bottom: 12px; }
.post-stats span { font-size: 15px; line-height: 1.55; color: var(--fg-60); }
.post-quote { margin: 18px 0; padding: 28px 0 28px 26px; border-left: 2px solid; border-image: linear-gradient(180deg, #f15bff, #6b5bff) 1; }
.post-quote figcaption { font-size: 14px; color: #e59bff; margin-bottom: 12px; }
.post-quote blockquote { margin: 0; font: italic 600 clamp(22px, 2.4vw, 32px)/1.3 var(--font-ui); color: var(--fg); }
.post-h { margin-top: 26px; }
.post-em { font-style: italic; font-weight: 500; }
.post-em .blue { color: #5ea4ff; }
.post-kicker { margin: 40px 0 -10px; font-size: 15px; color: var(--fg-60); }
.post-h2 { margin: 0; }
.post-next { margin-top: 48px; }
.post-next .pj-next-txt { padding: 32px; }
@media (max-width: 599.98px) {
  .post-stats { grid-template-columns: 1fr; }
}
.post-next .pj-next-title { font-size: clamp(22px, 2.6vw, 34px); line-height: 1.15; }

/* v15: Brands şeridi — tam genişlik, logolar arası silik çizgi, optik ölçek */
.clients--about { max-width: none; width: 100vw; margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw); }
.clients--about .clients-viewport { -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 9%, #000 91%, transparent 100%); mask-image: linear-gradient(90deg, transparent 0, #000 9%, #000 91%, transparent 100%); }
.client { position: relative; padding: 0 56px; }
.client::before { content: ""; position: absolute; left: 0; top: 50%; width: 1px; height: 34px; transform: translateY(-50%); background: linear-gradient(180deg, transparent, rgba(255,255,255,.16), transparent); }
@media (max-width: 899.98px) { .client { padding: 0 30px; } .client::before { height: 26px; } }

/* Tek kaynak: mail badge bileşeni (her yerde aynı) */
a.mail-cta { display: inline-flex; flex-direction: row; flex-wrap: nowrap; align-items: center; gap: 8px; height: 40px; padding: 0 14px 0 12px; margin-top: 12px; border: 1px solid var(--line); border-bottom: 1px solid var(--line); border-radius: 999px; background: rgba(255,255,255,.03); color: var(--fg); font-size: 14px; line-height: 1; white-space: nowrap; max-width: 100%; }
a.mail-cta > * { display: block; flex: none; line-height: 1; }
a.mail-cta > span { flex: 0 1 auto; overflow: hidden; text-overflow: ellipsis; }
a.mail-cta .ico { width: 16px; height: 16px; margin: 0; }
@media (max-width: 599.98px) { a.mail-cta { font-size: 13px; gap: 6px; padding: 0 12px 0 10px; } }
.post-list { margin: 0; padding: 0; list-style: none; display: grid; gap: 12px; }
.post-list li { position: relative; padding: 16px 18px 16px 44px; border: 1px solid var(--line); border-radius: 14px; background: var(--surface-1); font-size: 16px; line-height: 1.6; color: var(--fg-60); }
.post-list li::before { content: ""; position: absolute; left: 20px; top: 26px; width: 8px; height: 8px; border-radius: 50%; background: var(--grad-tint); }
.post-note { margin: -6px 0 0; font-size: 14px; line-height: 1.6; color: var(--fg-60); padding-left: 14px; border-left: 1px solid var(--line); }
.post-next .pj-next-media img { object-position: top; }

/* v16: Inspire dizini + 404 */
.ins-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
.ins-card { display: flex; flex-direction: column; padding: 18px; border-radius: var(--r-20); border: 1px solid var(--line); background: var(--surface-1); color: var(--fg); transition: border-color .3s ease, transform .4s var(--ease-out); }
.ins-card:hover { border-color: var(--line-strong); transform: translateY(-4px); }
.ins-media { position: relative; aspect-ratio: 16 / 10; border-radius: 14px; overflow: hidden; background: #0d0d12; }
.ins-media img { width: 100%; height: 100%; object-fit: cover; object-position: top; transition: transform .8s var(--ease-out); }
.ins-card:hover .ins-media img { transform: scale(1.04); }
.ins-media .arrow-ico { position: absolute; left: 16px; bottom: 16px; }
.ins-info { padding: 24px 6px 6px; display: flex; flex-direction: column; gap: 10px; }
.ins-title { margin: 0; font: 400 clamp(20px, 1.8vw, 26px)/1.2 var(--font-wide); background: var(--grad-tint); -webkit-background-clip: text; background-clip: text; color: transparent; align-self: flex-start; }
.ins-info p { margin: 0; font-size: 15px; line-height: 1.6; color: var(--fg-60); }
.nf-hero { min-height: 70vh; display: flex; align-items: center; }
.nf-hero .btn-row { margin-top: 28px; }
@media (max-width: 899.98px) { .ins-grid { grid-template-columns: 1fr; } }
/* v17: çerez onayı */
.consent { position: fixed; left: 20px; bottom: 20px; z-index: 200; max-width: 380px; padding: 18px; border-radius: 18px; border: 1px solid var(--line-strong); background: rgba(14, 14, 18, .92); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); box-shadow: 0 30px 80px -30px rgba(0,0,0,.8); opacity: 0; transform: translateY(16px); transition: opacity .4s ease, transform .4s var(--ease-out); }
.consent.show { opacity: 1; transform: none; }
.consent p { margin: 0 0 14px; font-size: 14px; line-height: 1.55; color: var(--fg-60); }
.consent-btns { display: flex; gap: 8px; justify-content: flex-end; }
.consent .btn { height: 38px; padding: 0 16px; font-size: 14px; }
@media (max-width: 599.98px) { .consent { left: 12px; right: 12px; bottom: 12px; max-width: none; } }
/* v18: anasayfa yazı kartları gerçek kapakla */
.post-art--img { height: 220px; background: #0d0d12; }
.post-art--img img { width: 100%; height: 100%; object-fit: cover; object-position: top; transition: transform .8s var(--ease-out); }
.post--img:hover .post-art--img img { transform: scale(1.04); }

/* ===== v19: blog galerisi, performans ve tarayıcı uyumu ===== */
.bgal { --sw: min(84vw, 560px, calc(min(74svh, 720px) * var(--arn, .829))); padding: 8px 0 24px; }
.bgal-track { display: flex; gap: clamp(14px, 2vw, 28px); overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory;
  padding: 12px calc(50% - var(--sw) / 2) 20px; scrollbar-width: none; -webkit-overflow-scrolling: touch; outline: none; cursor: grab; }
.bgal-track::-webkit-scrollbar { display: none; }
.bgal-track.dragging { cursor: grabbing; scroll-snap-type: none; }
.bgal-track:focus-visible { box-shadow: inset 0 0 0 2px var(--fg-60); border-radius: 12px; }
.bs-slide { flex: none; width: var(--sw); aspect-ratio: var(--ar, 800 / 965); margin: 0; scroll-snap-align: center; border-radius: 18px; overflow: hidden;
  background: #0d0d12; box-shadow: 0 30px 80px -30px rgba(0,0,0,.8), 0 0 0 1px rgba(255,255,255,.07);
  opacity: .4; transform: scale(.94); transition: opacity .45s ease, transform .55s var(--ease-out); }
.bs-slide.on { opacity: 1; transform: none; }
.bs-slide:not(.on) { cursor: pointer; }
.bs-slide img { width: 100%; height: 100%; object-fit: cover; display: block; pointer-events: none; user-select: none; -webkit-user-drag: none; }
.bgal-ui { display: flex; align-items: center; gap: 16px; justify-content: center; font: 500 13px/1 var(--font-ui); color: var(--fg-60); letter-spacing: .06em; }
.bgal-ui b { color: var(--fg); font-weight: 500; }
.bgal-bar { width: 140px; height: 2px; background: rgba(255,255,255,.12); border-radius: 2px; overflow: hidden; }
.bgal-bar i { display: block; height: 100%; transform-origin: 0 50%; transform: scaleX(var(--p, .1)); background: var(--grad-tint, #fff); transition: transform .4s var(--ease-out); }
.bgal-nav { display: inline-flex; gap: 8px; }
.bgal-btn { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; border: 1px solid var(--line-strong, rgba(255,255,255,.2)); background: var(--surface-1, #111); color: var(--fg); cursor: pointer; transition: background .2s ease, opacity .2s ease; }
.bgal-btn:hover:not(:disabled) { background: rgba(255,255,255,.1); }
.bgal-btn:disabled { opacity: .3; cursor: default; }
.bgal-btn svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
@media (max-width: 599.98px) { .bs-slide { border-radius: 14px; } .bgal-bar { width: 80px; } }
@media (prefers-reduced-motion: reduce) and (max-width: 0px) { .bs-slide { transition: none; } }

/* Durum rozetleri: ortalama "translate" ile (görünme animasyonu transform'u sıfırlayınca kaymasın) */
.status { transform: none; translate: -50% 0; }
.status--loc { left: auto; right: 16px; bottom: 16px; translate: none; }

.portrait-cur { will-change: left, top; }

/* @light:begin (tools/light.py üretir, elle düzenleme) */
html[data-theme="light"] { --bg: #fbfbfb; --surface-1: #fafafa; --surface-2: #f7f7f7; --surface-glass: rgba(246, 246, 246, 0.7); --fg: #0a0a0a; --fg-60: rgba(10, 10, 10, 0.6); --fg-subtle: #878787; --line: rgba(10, 10, 10, 0.1); --line-strong: rgba(10, 10, 10, 0.2); --chip: rgba(10, 10, 10, 0.1); --sh-card: 16px 24px 20px 8px rgba(255, 255, 255, 0.4), inset 0 2px 0 0 rgba(75, 71, 71, 0.08); --sh-drop: 16px 24px 20px 8px rgba(255, 255, 255, 0.4); --sh-media: 20px 30px 20px 8px rgba(255, 255, 255, 0.4); --sh-edge: inset 0 2px 0 0 rgba(75, 71, 71, 0.08); --sh-edge-strong: inset 0 2px 0 0 rgba(75, 71, 71, 0.14); --sh-edge-soft: inset 0 2px 0 0 rgba(163, 163, 163, 0.08); --sh-glass: inset 0 -0.48px 0.48px -1.25px rgba(255, 255, 255, 0.68),
    inset 0 -1.83px 1.83px -2.5px rgba(255, 255, 255, 0.6), inset 0 -8px 8px -3.75px rgba(255, 255, 255, 0.24); --grad-btn-dark: linear-gradient(180deg, #878787 -382%, #fbfbfb 100%); --grad-btn-light: linear-gradient(180deg, #0a0a0a 0%, #878787 140%); --grad-card: linear-gradient(121deg, #878787 -52%, #f7f7f7 19%, #fbfbfb 100%); --grad-fade: linear-gradient(0deg, #fbfbfb 65%, rgba(250, 250, 250, 0) 100%); }
html[data-theme="light"] .arrow-ico svg { stroke: #0a0a0a; }
html[data-theme="light"] .status { background-color: rgba(251, 251, 251, 0.35); }
html[data-theme="light"] .section::after { -webkit-mask-image: linear-gradient(180deg, #ffffff 0%, rgba(255, 255, 255, 0.16) 83%); mask-image: linear-gradient(180deg, #ffffff 0%, rgba(255, 255, 255, 0.16) 83%); }
html[data-theme="light"] .logo { background-image: linear-gradient(180deg, #0a0a0a 20%, #757575 120%); }
html[data-theme="light"] .logo-mark svg { fill: #f6f6f6; }
html[data-theme="light"] .nav-cta { background-image: linear-gradient(var(--cta-angle, 180deg), #fbfbfb -74%, rgba(10, 10, 10, 0.1) 183%); }
html[data-theme="light"] .shooting-star::before { background-image: linear-gradient(270deg, rgba(10, 10, 10, 0.6), rgba(10, 10, 10, 0)); }
html[data-theme="light"] .shooting-star::after { background-color: rgba(10, 10, 10, 0.2); box-shadow: 0 0 6px 1px rgba(10, 10, 10, 0.6); }
html[data-theme="light"] .cursor-pill { border: 1px solid #2f2f2f; background-color: rgba(156, 156, 156, 0.3); box-shadow: 0 0 20px 4px rgba(163, 163, 163, 0.3); color: #0a0a0a; }
html[data-theme="light"] .social:hover { background-color: #f1f1f1; }
html[data-theme="light"] .ticker { -webkit-mask-image: linear-gradient(90deg, transparent, #ffffff 15%, #ffffff 85%, transparent); mask-image: linear-gradient(90deg, transparent, #ffffff 15%, #ffffff 85%, transparent); }
html[data-theme="light"] .more-services { -webkit-mask-image: linear-gradient(90deg, transparent, #ffffff 10%, #ffffff 90%, transparent); mask-image: linear-gradient(90deg, transparent, #ffffff 10%, #ffffff 90%, transparent); }
html[data-theme="light"] .why-row { box-shadow: var(--sh-edge-soft), 0 -24px 40px rgba(12, 12, 24, 0.144); }
html[data-theme="light"] .review { box-shadow: var(--sh-edge), 0 -16px 32px rgba(12, 12, 24, 0.144); }
html[data-theme="light"] .cta::after { -webkit-mask-image: linear-gradient(180deg, #ffffff 0%, rgba(255, 255, 255, 0.16) 83%); mask-image: linear-gradient(180deg, #ffffff 0%, rgba(255, 255, 255, 0.16) 83%); }
html[data-theme="light"] .bottom-blur div:nth-child(1) { -webkit-mask-image: linear-gradient(transparent 0%, #ffffff 12.5%, #ffffff 25%, transparent 37.5%); mask-image: linear-gradient(transparent 0%, #ffffff 12.5%, #ffffff 25%, transparent 37.5%); }
html[data-theme="light"] .bottom-blur div:nth-child(2) { -webkit-mask-image: linear-gradient(transparent 12.5%, #ffffff 25%, #ffffff 37.5%, transparent 50%); mask-image: linear-gradient(transparent 12.5%, #ffffff 25%, #ffffff 37.5%, transparent 50%); }
html[data-theme="light"] .bottom-blur div:nth-child(3) { -webkit-mask-image: linear-gradient(transparent 25%, #ffffff 37.5%, #ffffff 50%, transparent 62.5%); mask-image: linear-gradient(transparent 25%, #ffffff 37.5%, #ffffff 50%, transparent 62.5%); }
html[data-theme="light"] .bottom-blur div:nth-child(4) { -webkit-mask-image: linear-gradient(transparent 37.5%, #ffffff 50%, #ffffff 62.5%, transparent 75%); mask-image: linear-gradient(transparent 37.5%, #ffffff 50%, #ffffff 62.5%, transparent 75%); }
html[data-theme="light"] .bottom-blur div:nth-child(5) { -webkit-mask-image: linear-gradient(transparent 50%, #ffffff 62.5%, #ffffff 75%, transparent 87.5%); mask-image: linear-gradient(transparent 50%, #ffffff 62.5%, #ffffff 75%, transparent 87.5%); }
html[data-theme="light"] .bottom-blur div:nth-child(6) { -webkit-mask-image: linear-gradient(transparent 62.5%, #ffffff 75%, #ffffff 87.5%, transparent 100%); mask-image: linear-gradient(transparent 62.5%, #ffffff 75%, #ffffff 87.5%, transparent 100%); }
html[data-theme="light"] .bottom-blur div:nth-child(7) { -webkit-mask-image: linear-gradient(transparent 75%, #ffffff 87.5%, #ffffff 100%); mask-image: linear-gradient(transparent 75%, #ffffff 87.5%, #ffffff 100%); }
html[data-theme="light"] .bottom-blur div:nth-child(8) { -webkit-mask-image: linear-gradient(transparent 87.5%, #ffffff 100%); mask-image: linear-gradient(transparent 87.5%, #ffffff 100%); }
html[data-theme="light"] .principles { -webkit-mask-image: linear-gradient(90deg, transparent, #ffffff 12%, #ffffff 88%, transparent); mask-image: linear-gradient(90deg, transparent, #ffffff 12%, #ffffff 88%, transparent); }
html[data-theme="light"] .p-colors i:nth-child(1) { background-color: #0a0a0a; }
html[data-theme="light"] .p-colors i:nth-child(2) { background-color: #757575; }
html[data-theme="light"] .p-colors i:nth-child(3) { background-color: #b5b5b5; }
html[data-theme="light"] .collab-canvas { background-image: radial-gradient(rgba(10, 10, 10, 0.07) 1px, transparent 1px); }
html[data-theme="light"] .sel-box { border: 1px solid rgba(10, 10, 10, 0.7); }
html[data-theme="light"] .sel-box b { border: 1px solid #0a0a0a; }
html[data-theme="light"] .sel-box--a { border-color: rgba(10, 10, 10, 0.85); }
html[data-theme="light"] .sel-box--b { border-color: rgba(10, 10, 10, 0.5); }
html[data-theme="light"] .mp-cursor svg { filter: drop-shadow(0 2px 4px rgba(12, 12, 24, 0.16)); }
html[data-theme="light"] .mp-cursor em { box-shadow: 0 6px 14px rgba(12, 12, 24, 0.144); }
html[data-theme="light"] .mp-cursor--a svg { fill: #0a0a0a; stroke: #fbfbfb; }
html[data-theme="light"] .mp-cursor--b svg { fill: #878787; stroke: #0a0a0a; }
html[data-theme="light"] .mp-cursor--b em { background-image: linear-gradient(180deg, #757575 -60%, #e8e8e8 100%); color: #0a0a0a; }
html[data-theme="light"] .ap-exp::before { background-image: radial-gradient(circle, rgba(10, 10, 10, 0.08), transparent 70%); }
html[data-theme="light"] .ship-bars i { background-image: linear-gradient(180deg, rgba(10, 10, 10, 0.55), rgba(10, 10, 10, 0.06)); }
html[data-theme="light"] .timeline li.done .t-dot { box-shadow: 0 0 18px rgba(10, 10, 10, 0.25); }
html[data-theme="light"] .logo-mark--ky { color: #f6f6f6; }
html[data-theme="light"] .t-figma i { background-color: #0a0a0a; }
html[data-theme="light"] .conf-visual--type { background-image: radial-gradient(120% 90% at 85% 0%, rgba(10, 10, 10, 0.1), transparent 60%), repeating-linear-gradient(0deg, rgba(10, 10, 10, 0.035) 0 1px, transparent 1px 24px), repeating-linear-gradient(90deg, rgba(10, 10, 10, 0.035) 0 1px, transparent 1px 24px), var(--bg); }
html[data-theme="light"] .post-art { background-image: radial-gradient(100% 120% at 0% 0%, rgba(10, 10, 10, 0.12), transparent 60%), var(--bg); }
html[data-theme="light"] .post-art--a i { border: 1px solid rgba(10, 10, 10, 0.35); }
html[data-theme="light"] .post-art--a i:nth-child(2) { background-color: rgba(10, 10, 10, 0.08); }
html[data-theme="light"] .post-art--b i { background-color: rgba(10, 10, 10, 0.14); }
html[data-theme="light"] .post-art--b i:nth-child(3) { background-color: #0a0a0a; }
html[data-theme="light"] .post-art--c i:nth-child(1) { border: 1px solid rgba(10, 10, 10, 0.3); }
html[data-theme="light"] .post-art--c i:nth-child(2) { background-color: rgba(10, 10, 10, 0.12); box-shadow: 0 0 40px rgba(10, 10, 10, 0.15); }
html[data-theme="light"] .clients-viewport { -webkit-mask-image: linear-gradient(90deg, transparent 0%, #ffffff 22%, #ffffff 78%, transparent 100%); mask-image: linear-gradient(90deg, transparent 0%, #ffffff 22%, #ffffff 78%, transparent 100%); }
html[data-theme="light"] .conf-visual::after { background-image: linear-gradient(180deg, transparent 45%, rgba(251, 251, 251, 0.75) 100%); }
html[data-theme="light"] .conf-big { color: #0a0a0a; }
@media (max-width: 749.98px) {
html[data-theme="light"] .clients-viewport { -webkit-mask-image: linear-gradient(90deg, transparent 0%, #ffffff 15%, #ffffff 85%, transparent 100%); mask-image: linear-gradient(90deg, transparent 0%, #ffffff 15%, #ffffff 85%, transparent 100%); }
}
html[data-theme="light"] { --grad-tint: linear-gradient(92deg, #363f59 0%, #3c2b5b 55%, #593d32 100%); }
html[data-theme="light"] ::selection { color: #0a0a0a; }
html[data-theme="light"] .eyebrow { color: #3d4358; }
html[data-theme="light"] .h1--mono .muted { color: #3f445b; }
html[data-theme="light"] .hc-sel i { background-color: #0a0a0a; }
html[data-theme="light"] .hc-sel b { color: #0a0a0a; }
html[data-theme="light"] .hc-swatches span { box-shadow: inset 0 0 0 1px rgba(10, 10, 10, 0.18); }
html[data-theme="light"] .mp-cursor--a svg { stroke: #eeebf4; }
html[data-theme="light"] .mp-cursor--a em { color: #eeebf4; }
html[data-theme="light"] .mp-cursor--b svg { stroke: #e8ebf6; }
html[data-theme="light"] .mp-cursor--b em { color: #e8ebf6; }
html[data-theme="light"] .mp-cursor--c svg { stroke: #eff7f6; }
html[data-theme="light"] .mp-cursor--c em { color: #eff7f6; }
html[data-theme="light"] .portrait-sel i { background-color: #0a0a0a; }
html[data-theme="light"] .why-row::before { background-image: linear-gradient(180deg, transparent, rgba(10, 10, 10, 0.14) 18%, rgba(10, 10, 10, 0.14) 82%, transparent); }
html[data-theme="light"] .conf-card:nth-child(6) { --glow: rgba(10, 10, 10, 0.15); }
html[data-theme="light"] .contact-card { background-image: linear-gradient(180deg, rgba(10, 10, 10, 0.05) 0%, rgba(242, 241, 246, 0) 100%), var(--bg); }
html[data-theme="light"] .contact-title { background-image: linear-gradient(180deg, #101519 8%, #314250 58%, #4c5e70 100%); }
html[data-theme="light"] .field input::placeholder, html[data-theme="light"] .field textarea::placeholder { color: rgba(10, 10, 10, 0.36); }
html[data-theme="light"] .footer-mark span { background-image: linear-gradient(180deg, #161f23 0%, #384a57 55%, #5c5348 100%); }
@media (max-width: 749.98px) {
html[data-theme="light"] .why-row::before { background-image: linear-gradient(90deg, transparent, rgba(10, 10, 10, 0.14) 15%, rgba(10, 10, 10, 0.14) 85%, transparent); }
}
html[data-theme="light"] .hc-wire { background-image: linear-gradient(180deg, #f0f0f3, #f5f5f7); }
html[data-theme="light"] .wf-bar i { background-color: rgba(10, 10, 10, 0.16); }
html[data-theme="light"] .wf-hero b { background-color: rgba(10, 10, 10, 0.24); }
html[data-theme="light"] .wf-hero b:nth-child(2) { background-color: rgba(10, 10, 10, 0.12); }
html[data-theme="light"] .wf-media { border: 1px dashed rgba(10, 10, 10, 0.2); background-image: radial-gradient(60% 80% at 72% 28%, rgba(201, 168, 255, .35), transparent 70%), radial-gradient(60% 80% at 18% 92%, rgba(142, 162, 255, .35), transparent 70%), #ececf1; }
html[data-theme="light"] .wf-cards i { background-color: rgba(10, 10, 10, 0.06); border: 1px solid rgba(10, 10, 10, 0.08); }
html[data-theme="light"] .mail-cta { background-color: rgba(10, 10, 10, 0.03); }
html[data-theme="light"] .hc-board { background-image: radial-gradient(90% 70% at 80% 10%, rgba(201, 168, 255, .28), transparent 60%), radial-gradient(80% 60% at 0% 100%, rgba(142, 162, 255, .3), transparent 60%), #f2f2f5; }
html[data-theme="light"] .hc-crop i { border-color: rgba(10, 10, 10, 0.4); }
html[data-theme="light"] .hc-glyph { color: #161616; }
html[data-theme="light"] .hc-rule { background-color: rgba(10, 10, 10, 0.35); }
html[data-theme="light"] .hc-cap { color: rgba(10, 10, 10, 0.7); }
html[data-theme="light"] .hc-btn { color: #e8ebf6; }
html[data-theme="light"] .hc-switch { background-color: rgba(10, 10, 10, 0.14); }
html[data-theme="light"] .hc-switch i { background-color: #0a0a0a; }
html[data-theme="light"] .hc-tokens span { border: 1px dashed rgba(10, 10, 10, 0.18); }
html[data-theme="light"] .nav { background-image: linear-gradient(180deg, rgba(236, 236, 240, 0.55), rgba(246, 246, 248, 0.45)); border: 1px solid rgba(10, 10, 10, 0.09); box-shadow: inset 0 1px 0 rgba(10, 10, 10, 0.08), 0 12px 40px rgba(12, 12, 24, 0.112); }
html[data-theme="light"] .nav-wrap.scrolled .nav { background-image: linear-gradient(180deg, rgba(236, 236, 240, 0.72), rgba(246, 246, 248, 0.66)); }
html[data-theme="light"] .nav-links a:hover { background-color: rgba(10, 10, 10, 0.06); }
html[data-theme="light"] .nav-links a.active { background-color: rgba(10, 10, 10, 0.08); }
html[data-theme="light"] .seg { border: 1px solid rgba(10, 10, 10, 0.08); background-color: rgba(255, 255, 255, 0.35); }
html[data-theme="light"] .theme-toggle { border: 1px solid rgba(10, 10, 10, 0.08); background-color: rgba(255, 255, 255, 0.35); }
html[data-theme="light"] .mobile-menu { background-image: linear-gradient(180deg, rgba(236, 236, 240, 0.8), rgba(246, 246, 248, 0.75)); border-color: rgba(10, 10, 10, 0.09); }
html[data-theme="light"] .mobile-menu > a.active { background-color: rgba(10, 10, 10, 0.06); }
html[data-theme="light"] .cta-band:hover .cta-band-title { color: #0a0a0a; }
html[data-theme="light"] .pf-bar { border: 1px solid rgba(10, 10, 10, 0.09); background-image: linear-gradient(180deg, rgba(236, 236, 240, 0.6), rgba(246, 246, 248, 0.5)); box-shadow: inset 0 1px 0 rgba(10, 10, 10, 0.07), 0 12px 40px rgba(12, 12, 24, 0.112); }
html[data-theme="light"] .pf-view.on { background-color: rgba(10, 10, 10, 0.08); }
html[data-theme="light"] .pf-media::after { box-shadow: inset 0 0 0 1px rgba(10, 10, 10, 0.06); background-image: linear-gradient(180deg, transparent 55%, rgba(251, 251, 251, 0.55)); }
html[data-theme="light"] .pf-no { color: #0a0a0a; background-color: rgba(251, 251, 251, 0.45); border: 1px solid rgba(10, 10, 10, 0.12); }
html[data-theme="light"] .pf-card:hover .pf-title { color: #0a0a0a; }
html[data-theme="light"] .pf-row a:hover, html[data-theme="light"] .pf-row a:focus-visible { background-color: rgba(10, 10, 10, 0.03); }
html[data-theme="light"] .pf-preview { box-shadow: 0 30px 80px rgba(12, 12, 24, 0.192); }
html[data-theme="light"] .pj-callout { color: #0a0a0a; background-color: rgba(238, 241, 250, 0.6); }
html[data-theme="light"] .pj-media--light { background-color: #050f1b; }
html[data-theme="light"] .pj-zoomable .pj-media::after { color: #0a0a0a; background-color: rgba(251, 251, 251, 0.6); }
html[data-theme="light"] .pj-swatch:nth-child(n+6) { color: #0a0a0a; }
html[data-theme="light"] .pj-swatch.copied::after { background-color: #0a0a0a; }
html[data-theme="light"] .pj-score circle { stroke: rgba(10, 10, 10, 0.08); }
html[data-theme="light"] .pj-rights { color: rgba(10, 10, 10, 0.35); }
html[data-theme="light"] .pj-lightbox { background-color: rgba(251, 251, 252, 0.88); }
html[data-theme="light"] .pj-lightbox img { box-shadow: 0 30px 90px rgba(12, 12, 24, 0.192); }
html[data-theme="light"] .pj-lb-close { background-color: rgba(10, 10, 10, 0.1); color: #0a0a0a; }
html[data-theme="light"] .pf-name { background-image: linear-gradient(92deg, #0f1118 0%, #23283e 45%, #3c2b5b 100%); }
html[data-theme="light"] .pf-chips span { background-color: rgba(10, 10, 10, 0.04); }
html[data-theme="light"] .pf-card:hover .pf-name { background-image: linear-gradient(92deg, #0a0a0a 0%, #000738 45%, #c9a8ff 100%); }
html[data-theme="light"] .pj-embed { background-color: #f5f5f8; }
html[data-theme="light"] .pj-quote { background-color: rgba(10, 10, 10, 0.03); }
html[data-theme="light"] .pj--baux .pj-cover { background-color: #ebe3f9; }
html[data-theme="light"] .pj--hm .pj-cover { background-color: #f4f6fc; }
html[data-theme="light"] .pj--pba .pj-cover, html[data-theme="light"] .pj--kt .pj-cover, html[data-theme="light"] .pj--b24 .pj-cover { background-color: #f2f3f9; }
html[data-theme="light"] .pj-trailer-frame { background-color: #ffffff; }
html[data-theme="light"] .pj-cover--portrait { background-color: #ffffff; }
html[data-theme="light"] .pj-logo-fig .pj-media { background-image: radial-gradient(80% 120% at 50% 0%, rgba(10, 10, 10, 0.06), transparent 70%), var(--surface-2); }
html[data-theme="light"] .clients--about .clients-viewport { -webkit-mask-image: linear-gradient(90deg, transparent 0, #ffffff 9%, #ffffff 91%, transparent 100%); mask-image: linear-gradient(90deg, transparent 0, #ffffff 9%, #ffffff 91%, transparent 100%); }
html[data-theme="light"] .client::before { background-image: linear-gradient(180deg, transparent, rgba(10, 10, 10, 0.16), transparent); }
html[data-theme="light"] a.mail-cta { background-color: rgba(10, 10, 10, 0.03); }
html[data-theme="light"] .ins-media { background-color: #f5f5f8; }
html[data-theme="light"] .consent { background-color: rgba(245, 245, 247, 0.92); box-shadow: 0 30px 80px -30px rgba(12, 12, 24, 0.256); }
html[data-theme="light"] .post-art--img { background-color: #f5f5f8; }
html[data-theme="light"] .bs-slide { background-color: #f5f5f8; box-shadow: 0 30px 80px -30px rgba(12, 12, 24, 0.256), 0 0 0 1px rgba(10, 10, 10, 0.07); }
html[data-theme="light"] .bgal-bar { background-color: rgba(10, 10, 10, 0.12); }
html[data-theme="light"] .bgal-bar i { background: var(--grad-tint, #0a0a0a); }
html[data-theme="light"] .bgal-btn { border: 1px solid var(--line-strong, rgba(10, 10, 10, 0.2)); background: var(--surface-1, #f6f6f6); }
html[data-theme="light"] .bgal-btn:hover:not(:disabled) { background-color: rgba(10, 10, 10, 0.1); }
/* Elle eklenen açık tema düzeltmeleri */
html[data-theme="light"] { color-scheme: light; }
html[data-theme="light"] .client img { filter: brightness(0) opacity(.85) blur(var(--b, 0px)); }
/* Pastel vurgu renkleri metin olarak açık zeminde okunmuyor: koyu karşılıklar */
html[data-theme="light"] .contact-kicker { color: #8a5a2b; }
html[data-theme="light"] .field.invalid .field-label, html[data-theme="light"] .form-status.err { color: #b4232a; }
html[data-theme="light"] .pf-chips .pf-year { color: #3442b0; }
html[data-theme="light"] .pj-hm-type li span { color: #0a6fa8; }
html[data-theme="light"] .post-em .blue { color: #1f5fd1; }
html[data-theme="light"] .post-quote figcaption { color: #8b2fb0; }
html[data-theme="light"] .post-wrap mark { color: #6b3fc4; }
/* Soluk yardımcı metinler */
html[data-theme="light"] .op6 { opacity: 1; }
html[data-theme="light"] .pj-rights { color: rgba(10, 10, 10, .62); }
html[data-theme="light"] .pf-filter sup { opacity: 1; }
/* Beyaz, şeffaf zeminli logo görseli: koyu zeminde kalsın */
html[data-theme="light"] .pj-logo-fig .pj-media { background: radial-gradient(80% 120% at 50% 0%, rgba(255,255,255,.06), transparent 70%), #111114; }

/* @light:end */