/* ============================================================
   POMONAS FOAM — Endüstriyel Zarafet
   Antrasit zemin · kemik beyazı · bordo aksan
   ============================================================ */

/* ---------------------------------------------------- tokenler */
:root {
  /* renk */
  --ink:        #0E1113;
  --ink-2:      #14181B;
  --panel:      #1A1F23;
  --panel-2:    #22282D;
  --line:       rgba(255,255,255,.10);
  --line-2:     rgba(255,255,255,.18);

  --bone:       #F2EEE8;
  --bone-2:     #E5DFD5;
  --bone-line:  rgba(14,17,19,.12);

  --text:       #E9E5DF;
  --text-dim:   #A7AEB4;
  --muted:      #838B92;
  --ink-text:   #171B1E;
  --ink-dim:    #5C666D;

  --accent:     #9E1B3C;
  --accent-hi:  #C22553;
  --accent-lo:  #6E1229;
  --accent-soft: rgba(158,27,60,.13);

  /* tipografi */
  --sans: "IBM Plex Sans", "IBM Plex Sans Arabic", "Segoe UI", system-ui, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, "SFMono-Regular", monospace;
  --serif: "IBM Plex Serif", Georgia, serif;

  --t-hero:  clamp(2.9rem, 1.1rem + 7.4vw, 8.2rem);
  --t-h1:    clamp(2.2rem, 1.2rem + 3.9vw, 4.6rem);
  --t-h2:    clamp(1.75rem, 1.1rem + 2.4vw, 3.1rem);
  --t-h3:    clamp(1.15rem, .98rem + .72vw, 1.6rem);
  --t-lead:  clamp(1.04rem, .96rem + .42vw, 1.32rem);
  --t-body:  clamp(.97rem, .93rem + .17vw, 1.06rem);
  --t-small: .84rem;
  --t-micro: .72rem;

  /* ölçü */
  --wrap: 1280px;
  --gut: clamp(1.25rem, .6rem + 2.6vw, 4rem);
  --sect: clamp(4.5rem, 3rem + 6.4vw, 10rem);
  --r: 3px;
  --r-lg: 6px;

  /* hareket */
  --dur: 620ms;
  --ease: cubic-bezier(.16,1,.3,1);
  --ease-io: cubic-bezier(.6,.02,.2,1);
}

/* ---------------------------------------------------- temel */
*, *::before, *::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--ink);
  color: var(--text);
  font-family: var(--sans);
  font-size: var(--t-body);
  line-height: 1.62;
  font-feature-settings: "kern" 1;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img, svg, video { display: block; max-width: 100%; }
img, video { height: auto; }

a { color: inherit; text-decoration: none; }

h1, h2, h3, h4 {
  margin: 0;
  font-weight: 600;
  line-height: 1.06;
  letter-spacing: -.026em;
}

p { margin: 0 0 1.1em; }
p:last-child { margin-bottom: 0; }

::selection { background: var(--accent); color: #fff; }

:focus-visible {
  outline: 2px solid var(--accent-hi);
  outline-offset: 3px;
}

/* Bağlantı klavye ile odaklanana kadar görünmez durur.
   Ekrandan dışarı itmek yerine kırpılıyor; -9999px sağdan sola
   düzende sayfayı yatay olarak kaydırılır hâle getiriyordu. */
.skip {
  position: absolute; inset-inline-start: 1rem; top: 1rem; z-index: 999;
  width: 1px; height: 1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap;
  background: var(--accent); color: #fff; padding: .8rem 1.2rem;
}
.skip:focus {
  width: auto; height: auto; overflow: visible;
  clip-path: none; white-space: normal;
}

.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: var(--gut);
}

/* ---------------------------------------------------- yazı yardımcıları */
.eyebrow {
  display: inline-flex; align-items: center; gap: .6rem;
  font-family: var(--mono);
  font-size: var(--t-micro);
  letter-spacing: .17em;
  text-transform: uppercase;
  color: var(--accent-hi);
  margin: 0 0 1.4rem;
}
.eyebrow::before {
  content: ""; width: 24px; height: 1px;
  background: var(--accent-hi); opacity: .8;
}

.lead {
  font-size: var(--t-lead);
  line-height: 1.55;
  color: var(--text-dim);
  max-width: 56ch;
}

.section { padding-block: var(--sect); position: relative; }

.section-head { max-width: 60ch; margin-bottom: clamp(2.5rem, 1.5rem + 3vw, 4.5rem); }
.section-head h2 { font-size: var(--t-h2); margin-bottom: 1.1rem; }

/* açık zeminli bölümler */
.on-bone {
  background: var(--bone);
  color: var(--ink-text);
}
.on-bone .lead { color: var(--ink-dim); }
.on-bone .eyebrow { color: var(--accent); }
.on-bone .eyebrow::before { background: var(--accent); }

/* ---------------------------------------------------- düğmeler */
.btn {
  --btn-bg: transparent;
  --btn-fg: var(--text);
  --btn-bd: var(--line-2);
  position: relative;
  display: inline-flex; align-items: center; gap: .65rem;
  padding: .95rem 1.6rem;
  border: 1px solid var(--btn-bd);
  border-radius: var(--r);
  background: var(--btn-bg);
  color: var(--btn-fg);
  font-size: var(--t-small);
  font-weight: 500;
  letter-spacing: .02em;
  cursor: pointer;
  overflow: hidden;
  transition: color 320ms var(--ease), border-color 320ms var(--ease);
  isolation: isolate;
}
.btn::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: var(--accent-hi);
  transform: scaleX(0); transform-origin: left;
  transition: transform 460ms var(--ease);
}
.btn:hover { color: #fff; border-color: var(--accent-hi); }
.btn:hover::after { transform: scaleX(1); }

.btn-accent { --btn-bg: var(--accent); --btn-fg: #fff; --btn-bd: var(--accent); }
.btn-sm { padding: .62rem 1.1rem; font-size: var(--t-micro); letter-spacing: .06em; text-transform: uppercase; }
.btn-lg { padding: 1.15rem 2.1rem; font-size: .95rem; }
.on-bone .btn { --btn-fg: var(--ink-text); --btn-bd: var(--bone-line); }
.on-bone .btn-accent { --btn-fg: #fff; --btn-bd: var(--accent); }

.btn .arw { transition: transform 380ms var(--ease); }
.btn:hover .arw { transform: translateX(4px); }

/* metin bağlantısı */
.tlink {
  display: inline-flex; align-items: center; gap: .5rem;
  font-size: var(--t-small); font-weight: 500;
  color: var(--accent-hi);
  padding-bottom: 3px;
  background-image: linear-gradient(currentColor, currentColor);
  background-size: 0% 1px; background-repeat: no-repeat; background-position: 0 100%;
  transition: background-size 420ms var(--ease);
}
.tlink:hover { background-size: 100% 1px; }
.on-bone .tlink { color: var(--accent); }

/* ---------------------------------------------------- başlık / navigasyon */
.site-head {
  position: fixed; inset-block-start: 0; inset-inline: 0; z-index: 200;
  transition: background 460ms var(--ease), border-color 460ms var(--ease), backdrop-filter 460ms;
  border-bottom: 1px solid transparent;
}
.site-head.is-stuck {
  background: rgba(14,17,19,.86);
  backdrop-filter: blur(14px) saturate(1.3);
  border-bottom-color: var(--line);
}
.head-inner {
  max-width: var(--wrap); margin-inline: auto;
  padding: 1rem var(--gut);
  display: flex; align-items: center; gap: 1.6rem;
}

.logo { display: inline-flex; align-items: center; gap: .7rem; flex-shrink: 0; }
.logo-mark { display: block; line-height: 0; }
.logo-mark svg { transition: transform 620ms var(--ease); }
.logo:hover .logo-mark svg { transform: rotate(-6deg) scale(1.05); }
.logo-type { display: flex; flex-direction: column; line-height: 1; }
.logo-type b {
  font-size: .95rem; font-weight: 700; letter-spacing: .17em; color: var(--text);
}
.logo-type i {
  font-style: normal; font-family: var(--mono);
  font-size: .58rem; letter-spacing: .38em; color: var(--accent-hi);
  margin-top: 3px;
}

.main-nav { display: flex; gap: clamp(.6rem, .1rem + 1vw, 1.5rem); margin-inline-start: auto; }
.main-nav a {
  position: relative;
  font-size: .86rem; font-weight: 500; color: var(--text-dim);
  padding: .35rem 0;
  transition: color 300ms var(--ease);
}
.main-nav a::after {
  content: ""; position: absolute; inset-inline-start: 0; bottom: 0;
  width: 100%; height: 1px; background: var(--accent-hi);
  transform: scaleX(0); transform-origin: right;
  transition: transform 420ms var(--ease);
}
.main-nav a:hover { color: var(--text); }
.main-nav a:hover::after { transform: scaleX(1); transform-origin: left; }
.main-nav a.is-active { color: var(--text); }
.main-nav a.is-active::after { transform: scaleX(1); }

.head-side { display: flex; align-items: center; gap: .7rem; flex-shrink: 0; }

/* dil seçici */
.lang { position: relative; }
.lang-btn {
  display: inline-flex; align-items: center; gap: .45rem;
  background: none; border: 1px solid var(--line);
  border-radius: var(--r);
  color: var(--text-dim);
  font-family: var(--mono); font-size: var(--t-micro);
  letter-spacing: .12em;
  padding: .55rem .75rem; cursor: pointer;
  transition: color 300ms, border-color 300ms;
}
.lang-btn:hover { color: var(--text); border-color: var(--line-2); }
.lang-menu {
  position: absolute; inset-block-start: calc(100% + .5rem); inset-inline-end: 0;
  min-width: 168px; margin: 0; padding: .35rem;
  list-style: none;
  background: var(--panel); border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: 0 22px 50px rgba(0,0,0,.5);
  opacity: 0; visibility: hidden; transform: translateY(-6px);
  transition: opacity 280ms var(--ease), transform 280ms var(--ease), visibility 280ms;
}
.lang.is-open .lang-menu { opacity: 1; visibility: visible; transform: translateY(0); }
.lang-menu a {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: .55rem .7rem; border-radius: var(--r);
  font-size: .85rem; color: var(--text-dim);
  transition: background 240ms, color 240ms;
}
.lang-menu a em {
  font-style: normal; font-family: var(--mono);
  font-size: var(--t-micro); letter-spacing: .1em; color: var(--muted);
}
.lang-menu a:hover { background: rgba(255,255,255,.05); color: var(--text); }
.lang-menu a.is-current { color: var(--accent-hi); }
.lang-menu a.is-current em { color: var(--accent-hi); }

.burger {
  display: none;
  width: 40px; height: 40px; padding: 10px 9px;
  background: none; border: 1px solid var(--line); border-radius: var(--r);
  cursor: pointer;
}
.burger span {
  display: block; height: 1.5px; background: var(--text); border-radius: 2px;
  transition: transform 380ms var(--ease), opacity 260ms;
}
.burger span + span { margin-top: 5px; }
.burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

/* ---------------------------------------------------- hero */
.hero {
  position: relative;
  min-height: 100svh;
  display: flex; align-items: flex-end;
  overflow: hidden;
  background: var(--ink);
}
.hero-canvas {
  position: absolute; inset: 0; width: 100%; height: 100%;
  z-index: 2;
}
.hero-photo {
  position: absolute; inset: 0; z-index: 0;
  background: url("../img/fabrika-blok-hatti.jpg") center/cover no-repeat;
  filter: grayscale(1) brightness(.28) contrast(1.15);
  transform: scale(1.06);
}
.hero::after {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    radial-gradient(120% 90% at 82% 12%, rgba(158,27,60,.20), transparent 58%),
    linear-gradient(to top, var(--ink) 4%, rgba(14,17,19,.72) 42%, rgba(14,17,19,.28) 100%);
}
.hero-inner {
  position: relative; z-index: 3;
  width: 100%; max-width: var(--wrap); margin-inline: auto;
  /* üst boşluk sabit başlığı temizler: kısa ekranda hero uzar, metin menünün altına girmez */
  padding: clamp(7rem, 5rem + 8vh, 10rem) var(--gut) clamp(3.5rem, 2rem + 5vw, 7rem);
}
.hero h1 {
  font-size: var(--t-hero);
  font-weight: 600;
  letter-spacing: -.045em;
  line-height: .9;
  margin-bottom: clamp(1.4rem, .8rem + 1.6vw, 2.4rem);
}
.hero h1 span { display: block; overflow: hidden; }
.hero h1 span > i {
  display: block; font-style: normal;
  transform: translateY(105%);
  transition: transform 1150ms var(--ease);
}
.hero h1 span:nth-child(2) > i { transition-delay: 110ms; }
.hero.is-ready h1 span > i { transform: translateY(0); }
.hero h1 .accent { color: var(--accent-hi); }

.hero-lead {
  max-width: 44ch;
  font-size: var(--t-lead);
  color: var(--text-dim);
  margin-bottom: 2.4rem;
}
.hero-cta { display: flex; flex-wrap: wrap; gap: .8rem; }

.hero .eyebrow,
.hero-lead,
.hero-cta { opacity: 0; transform: translateY(18px); transition: opacity 900ms var(--ease), transform 900ms var(--ease); }
.hero.is-ready .eyebrow { opacity: 1; transform: none; transition-delay: 120ms; }
.hero.is-ready .hero-lead { opacity: 1; transform: none; transition-delay: 480ms; }
.hero.is-ready .hero-cta { opacity: 1; transform: none; transition-delay: 620ms; }

.scroll-hint {
  position: absolute; z-index: 3;
  inset-block-end: 1.7rem; inset-inline-end: var(--gut);
  display: flex; align-items: center; gap: .7rem;
  font-family: var(--mono); font-size: var(--t-micro);
  letter-spacing: .16em; text-transform: uppercase; color: var(--muted);
}
.scroll-hint .bar {
  width: 42px; height: 1px; background: var(--line-2); position: relative; overflow: hidden;
}
.scroll-hint .bar::after {
  content: ""; position: absolute; inset: 0;
  background: var(--accent-hi);
  animation: sweep 2.6s var(--ease-io) infinite;
}
@keyframes sweep {
  0% { transform: translateX(-100%); }
  55%, 100% { transform: translateX(100%); }
}

/* ---------------------------------------------------- sayfa başlığı (iç sayfalar) */
.page-head {
  position: relative;
  padding-block: clamp(9rem, 6rem + 8vw, 14rem) clamp(3.5rem, 2rem + 4vw, 6rem);
  border-bottom: 1px solid var(--line);
  overflow: hidden;
}
.page-head::before {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(90% 130% at 88% 0%, rgba(158,27,60,.17), transparent 62%);
  pointer-events: none;
}
.page-head .wrap { position: relative; }
.page-head h1 { font-size: var(--t-h1); max-width: 20ch; margin-bottom: 1.4rem; }
.page-head .lead { max-width: 58ch; }

/* ---------------------------------------------------- giriş / metin blokları */
.split {
  display: grid;
  grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr);
  gap: clamp(2rem, 1rem + 4vw, 6rem);
  align-items: start;
}
.split-sticky { position: sticky; top: 7rem; }

.rich p { max-width: 62ch; }
.rich p + p { margin-top: 1.15em; }

.pullquote {
  border-inline-start: 2px solid var(--accent);
  padding-inline-start: clamp(1.2rem, .6rem + 1.6vw, 2.4rem);
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(1.25rem, 1rem + 1.3vw, 2.05rem);
  line-height: 1.34;
  letter-spacing: -.015em;
  color: var(--text);
  max-width: 34ch;
}
.on-bone .pullquote { color: var(--ink-text); }

/* ---------------------------------------------------- yetenek ızgarası */
.cap-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  border-top: 1px solid var(--line);
}
.on-bone .cap-grid { border-top-color: var(--bone-line); }
.cap {
  position: relative;
  padding: clamp(1.8rem, 1.2rem + 1.6vw, 2.8rem) clamp(1.2rem, .6rem + 1.4vw, 2.2rem);
  border-bottom: 1px solid var(--line);
  border-inline-end: 1px solid var(--line);
  overflow: hidden;
  transition: background 480ms var(--ease);
}
.on-bone .cap { border-color: var(--bone-line); }
.cap::before {
  content: ""; position: absolute; inset-block-start: 0; inset-inline-start: 0;
  width: 100%; height: 2px; background: var(--accent);
  transform: scaleX(0); transform-origin: left;
  transition: transform 520ms var(--ease);
}
.cap:hover::before { transform: scaleX(1); }
.cap:hover { background: rgba(255,255,255,.028); }
.on-bone .cap:hover { background: rgba(14,17,19,.035); }
.cap-k {
  font-family: var(--mono); font-size: var(--t-micro);
  letter-spacing: .18em; color: var(--accent-hi); display: block; margin-bottom: 1.1rem;
}
.on-bone .cap-k { color: var(--accent); }
.cap h3 { font-size: var(--t-h3); margin-bottom: .7rem; }
.cap p { font-size: .92rem; color: var(--text-dim); margin: 0; }
.on-bone .cap p { color: var(--ink-dim); }

/* ---------------------------------------------------- ürün kartları */
.prod-list { display: grid; gap: 1px; background: var(--line); border-block: 1px solid var(--line); }
.on-bone .prod-list { background: var(--bone-line); border-color: var(--bone-line); }

.prod {
  display: grid;
  grid-template-columns: 92px minmax(0,1fr) minmax(0,1fr);
  gap: clamp(1.2rem, .6rem + 2vw, 3.4rem);
  align-items: start;
  padding: clamp(2rem, 1.2rem + 2.4vw, 3.6rem) 0;
  background: var(--ink);
  position: relative;
  scroll-margin-top: 6rem;
  transition: background 520ms var(--ease);
}
.on-bone .prod { background: var(--bone); }
.prod:hover { background: var(--ink-2); }
.on-bone .prod:hover { background: var(--bone-2); }

.prod-code {
  font-family: var(--mono); font-size: var(--t-micro);
  letter-spacing: .14em; color: var(--accent-hi);
  padding-top: .5rem;
}
.on-bone .prod-code { color: var(--accent); }
.prod-tag {
  display: block; margin-top: .5rem;
  font-family: var(--sans); font-size: var(--t-micro);
  letter-spacing: .04em; color: var(--muted); text-transform: none;
}
.prod h3 { font-size: var(--t-h3); margin-bottom: .75rem; }
.prod-lead { font-size: 1.02rem; color: var(--text); margin-bottom: .9rem; }
.on-bone .prod-lead { color: var(--ink-text); }
.prod-body { font-size: .93rem; color: var(--text-dim); margin: 0; }
.on-bone .prod-body { color: var(--ink-dim); }

.spec-table { width: 100%; border-collapse: collapse; margin-bottom: 1.4rem; }
.spec-table th, .spec-table td {
  text-align: start; padding: .58rem 0;
  border-bottom: 1px solid var(--line);
  font-size: .86rem; vertical-align: top;
}
.on-bone .spec-table th, .on-bone .spec-table td { border-bottom-color: var(--bone-line); }
.spec-table th { font-weight: 400; color: var(--muted); width: 44%; }
.spec-table td { font-family: var(--mono); color: var(--text); }
.on-bone .spec-table td { color: var(--ink-text); }

.chips { display: flex; flex-wrap: wrap; gap: .4rem; list-style: none; margin: 0; padding: 0; }
.chips li {
  font-size: var(--t-micro);
  padding: .34rem .68rem;
  border: 1px solid var(--line);
  border-radius: 100px;
  color: var(--text-dim);
  transition: border-color 300ms, color 300ms;
}
.on-bone .chips li { border-color: var(--bone-line); color: var(--ink-dim); }
.prod:hover .chips li { border-color: var(--line-2); }

.mini-label {
  font-family: var(--mono); font-size: var(--t-micro);
  letter-spacing: .16em; text-transform: uppercase; color: var(--muted);
  display: block; margin-bottom: .8rem;
}

/* ürün önizleme kartları (ana sayfa) */
.prod-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 1px; background: var(--line);
  border: 1px solid var(--line);
}
.pcard {
  background: var(--ink);
  padding: clamp(1.6rem, 1rem + 1.4vw, 2.4rem);
  display: flex; flex-direction: column; gap: .6rem;
  min-height: 220px;
  transition: background 460ms var(--ease);
  position: relative; overflow: hidden;
}
.pcard::after {
  content: ""; position: absolute; inset-block-end: 0; inset-inline-start: 0;
  width: 100%; height: 2px; background: var(--accent);
  transform: scaleX(0); transform-origin: left;
  transition: transform 520ms var(--ease);
}
.pcard:hover { background: var(--panel); }
.pcard:hover::after { transform: scaleX(1); }
.pcard .c { font-family: var(--mono); font-size: var(--t-micro); letter-spacing: .16em; color: var(--accent-hi); }
.pcard h3 { font-size: 1.12rem; }
.pcard p { font-size: .89rem; color: var(--text-dim); margin: 0; }
.pcard .go { margin-top: auto; font-size: var(--t-micro); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); display: flex; align-items: center; gap: .4rem; }
.pcard:hover .go { color: var(--accent-hi); }

/* ---------------------------------------------------- sektörler */
.sect-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1px; background: var(--line);
  border: 1px solid var(--line);
}
.on-bone .sect-grid { background: var(--bone-line); border-color: var(--bone-line); }
.scard {
  background: var(--ink);
  padding: clamp(1.7rem, 1.1rem + 1.6vw, 2.6rem);
  position: relative; overflow: hidden;
  transition: background 500ms var(--ease);
  scroll-margin-top: 6rem;
}
.on-bone .scard { background: var(--bone); }
.scard:hover { background: var(--panel); }
.on-bone .scard:hover { background: var(--bone-2); }
.scard-n {
  font-family: var(--mono); font-size: var(--t-micro);
  letter-spacing: .18em; color: var(--accent-hi); display: block; margin-bottom: 1rem;
}
.on-bone .scard-n { color: var(--accent); }
.scard h3 { font-size: var(--t-h3); margin-bottom: .8rem; }
.scard p { font-size: .93rem; color: var(--text-dim); margin-bottom: 1.2rem; }
.on-bone .scard p { color: var(--ink-dim); }
.scard ul { list-style: none; margin: 0; padding: 0; }
.scard li {
  font-size: .84rem; color: var(--muted);
  padding: .42rem 0 .42rem 1.1rem; position: relative;
  border-top: 1px solid var(--line);
}
.on-bone .scard li { border-top-color: var(--bone-line); }
.scard li::before {
  content: ""; position: absolute; inset-inline-start: 0; top: .95em;
  width: 5px; height: 1px; background: var(--accent);
}

/* ---------------------------------------------------- adım listesi (üretim) */
.steps { border-top: 1px solid var(--line); }
.step {
  display: grid;
  grid-template-columns: 90px minmax(0,1fr) minmax(0,1.15fr);
  gap: clamp(1rem, .5rem + 2vw, 3rem);
  padding: clamp(1.7rem, 1.1rem + 1.6vw, 2.8rem) 0;
  border-bottom: 1px solid var(--line);
  position: relative;
  transition: padding-inline-start 520ms var(--ease);
}
.step::before {
  content: ""; position: absolute; inset-inline-start: 0; inset-block: 0;
  width: 2px; background: var(--accent);
  transform: scaleY(0); transform-origin: top;
  transition: transform 560ms var(--ease);
}
.step:hover::before { transform: scaleY(1); }
.step:hover { padding-inline-start: 1.2rem; }
.step-k { font-family: var(--mono); font-size: var(--t-micro); letter-spacing: .16em; color: var(--accent-hi); padding-top: .35rem; }
.step h3 { font-size: var(--t-h3); }
.step p { font-size: .93rem; color: var(--text-dim); margin: 0; }

/* ---------------------------------------------------- kalite / liste */
.tick-list { list-style: none; margin: 0; padding: 0; }
.tick-list li {
  position: relative;
  padding: .95rem 0 .95rem 2.2rem;
  border-bottom: 1px solid var(--line);
  font-size: .96rem;
  color: var(--text-dim);
}
.on-bone .tick-list li { border-bottom-color: var(--bone-line); color: var(--ink-dim); }
.tick-list li::before {
  content: ""; position: absolute; inset-inline-start: 0; top: 1.35em;
  width: 12px; height: 6px;
  border-inline-start: 1.6px solid var(--accent); border-block-end: 1.6px solid var(--accent);
  transform: rotate(-45deg);
}

/* ---------------------------------------------------- görsel bantlar */
.figure {
  position: relative; overflow: hidden;
  border-radius: var(--r-lg);
  background: var(--panel);
}
.figure img {
  width: 100%; height: 100%; object-fit: cover;
  filter: grayscale(.85) contrast(1.06) brightness(.9);
  transform: scale(1.03);
  transition: transform 1400ms var(--ease), filter 900ms var(--ease);
}
.figure:hover img { transform: scale(1.09); filter: grayscale(.25) contrast(1.02) brightness(1); }
.figure-tall { aspect-ratio: 3 / 4; }
.figure-wide { aspect-ratio: 16 / 9; }
.figure-cap {
  position: absolute; inset-block-end: 0; inset-inline: 0;
  padding: 1.6rem 1.4rem .9rem;
  background: linear-gradient(to top, rgba(14,17,19,.92), transparent);
  font-family: var(--mono); font-size: var(--t-micro);
  letter-spacing: .12em; text-transform: uppercase; color: var(--text-dim);
}

.band {
  position: relative;
  min-height: clamp(320px, 42vw, 560px);
  display: grid; place-items: center;
  overflow: hidden;
  border-block: 1px solid var(--line);
}
.band-bg {
  position: absolute; inset: -6%;
  background-size: cover; background-position: center;
  filter: grayscale(1) brightness(.3) contrast(1.2);
  will-change: transform;
}
.band::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(105deg, rgba(14,17,19,.9), rgba(14,17,19,.5) 55%, rgba(158,27,60,.28));
}
.band-inner { position: relative; z-index: 2; text-align: center; max-width: 40ch; padding-inline: var(--gut); }
.band-inner h2 { font-size: var(--t-h2); margin-bottom: 1.2rem; }

/* video mozaiği */
.vid-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: clamp(.6rem, .3rem + .8vw, 1.2rem);
}
.vid {
  position: relative; overflow: hidden;
  border-radius: var(--r-lg);
  aspect-ratio: 9 / 16;
  background: var(--panel);
  border: 1px solid var(--line);
}
.vid video {
  width: 100%; height: 100%; object-fit: cover;
  filter: grayscale(.7) contrast(1.05) brightness(.86);
  transition: filter 700ms var(--ease), transform 1200ms var(--ease);
}
.vid:hover video { filter: none; transform: scale(1.04); }

/* ---------------------------------------------------- künye tablosu */
.facts { border-top: 1px solid var(--line); }
.on-bone .facts { border-top-color: var(--bone-line); }
.fact {
  display: grid; grid-template-columns: minmax(120px, 32%) 1fr;
  gap: 1rem;
  padding: 1rem 0;
  border-bottom: 1px solid var(--line);
}
.on-bone .fact { border-bottom-color: var(--bone-line); }
.fact dt { font-size: .85rem; color: var(--muted); }
.fact dd { margin: 0; font-size: .95rem; }

/* ---------------------------------------------------- CTA bloğu */
.cta-block {
  position: relative; overflow: hidden;
  background: var(--accent-lo);
  border-radius: var(--r-lg);
  padding: clamp(2.4rem, 1.5rem + 3.6vw, 5.4rem) clamp(1.5rem, .8rem + 3vw, 4.5rem);
}
.cta-block::before {
  content: ""; position: absolute; inset: 0;
  background:
    radial-gradient(70% 120% at 88% 20%, rgba(194,37,83,.55), transparent 62%),
    linear-gradient(120deg, rgba(14,17,19,.55), transparent 60%);
}
.cta-block > * { position: relative; }
.cta-block h2 { font-size: var(--t-h2); max-width: 20ch; margin-bottom: 1.2rem; color: #fff; }
.cta-block p { max-width: 52ch; color: rgba(255,255,255,.8); margin-bottom: 2rem; }
.cta-block .btn { --btn-bd: rgba(255,255,255,.4); --btn-fg: #fff; }
.cta-block .btn::after { background: #fff; }
.cta-block .btn:hover { color: var(--accent-lo); border-color: #fff; }

/* ---------------------------------------------------- iletişim */
.contact-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr);
  gap: clamp(2rem, 1rem + 4vw, 5rem);
  align-items: start;
}
.field { margin-bottom: 1.1rem; }
.field label {
  display: block; margin-bottom: .45rem;
  font-family: var(--mono); font-size: var(--t-micro);
  letter-spacing: .12em; text-transform: uppercase; color: var(--muted);
}
.field input, .field select, .field textarea {
  width: 100%;
  background: var(--ink-2);
  border: 1px solid var(--line);
  border-radius: var(--r);
  color: var(--text);
  font-family: inherit; font-size: .95rem;
  padding: .82rem .95rem;
  transition: border-color 300ms, background 300ms;
}
.field textarea { min-height: 150px; resize: vertical; line-height: 1.6; }
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none; border-color: var(--accent-hi); background: var(--panel);
}
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1.1rem; }
.form-note { font-size: var(--t-small); color: var(--muted); margin-top: 1rem; }

.info-card {
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: clamp(1.5rem, 1rem + 1.6vw, 2.4rem);
  background: var(--ink-2);
}
.info-row { padding: 1.1rem 0; border-bottom: 1px solid var(--line); }
.info-row:last-of-type { border-bottom: none; padding-bottom: 0; }
.info-row:first-of-type { padding-top: 0; }
.info-lbl {
  display: block; margin-bottom: .4rem;
  font-family: var(--mono); font-size: var(--t-micro);
  letter-spacing: .14em; text-transform: uppercase; color: var(--accent-hi);
}
.info-val { font-size: .98rem; color: var(--text); }
a.info-val:hover { color: var(--accent-hi); }

/* ---------------------------------------------------- alt bilgi */
.site-foot {
  background: var(--ink-2);
  border-top: 1px solid var(--line);
  padding-block: clamp(3rem, 2rem + 3vw, 5rem) 0;
}
.foot-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) repeat(3, minmax(0, 1fr));
  gap: clamp(1.6rem, .8rem + 2.4vw, 3.4rem);
  padding-bottom: clamp(2.5rem, 1.5rem + 3vw, 4rem);
}
.logo-foot { margin-bottom: 1.2rem; }
.foot-tag { font-size: .9rem; color: var(--muted); max-width: 34ch; }
.foot-col { display: flex; flex-direction: column; gap: .55rem; }
.foot-col h3 {
  font-family: var(--mono); font-size: var(--t-micro);
  font-weight: 500; letter-spacing: .16em; text-transform: uppercase;
  color: var(--accent-hi); margin-bottom: .7rem;
}
.foot-col a { font-size: .9rem; color: var(--text-dim); transition: color 280ms; }
.foot-col a:hover { color: var(--accent-hi); }
.foot-addr { font-size: .9rem; color: var(--text-dim); margin-bottom: .9rem; }
.foot-lbl { display: block; font-size: var(--t-micro); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); margin-bottom: .2rem; }
.foot-strong { font-size: .95rem !important; color: var(--text) !important; }
.foot-strong:hover { color: var(--accent-hi) !important; }

.foot-base {
  display: flex; flex-wrap: wrap; gap: 1rem;
  align-items: center; justify-content: space-between;
  padding-block: 1.5rem;
  border-top: 1px solid var(--line);
}
.foot-base p { margin: 0; font-size: var(--t-micro); color: var(--muted); letter-spacing: .03em; }
.foot-langs { display: flex; gap: .3rem; list-style: none; margin: 0; padding: 0; }
.foot-langs a {
  display: block; padding: .3rem .55rem;
  font-family: var(--mono); font-size: var(--t-micro); letter-spacing: .1em;
  color: var(--muted); border: 1px solid transparent; border-radius: var(--r);
  transition: color 280ms, border-color 280ms;
}
.foot-langs a:hover { color: var(--text); border-color: var(--line); }
.foot-langs a.is-current { color: var(--accent-hi); border-color: var(--line); }

/* ---------------------------------------------------- görünürlük animasyonu */
.rv { opacity: 0; transform: translateY(26px); }
.rv.in {
  opacity: 1; transform: none;
  transition: opacity 900ms var(--ease), transform 900ms var(--ease);
}
.rv-d1.in { transition-delay: 90ms; }
.rv-d2.in { transition-delay: 180ms; }
.rv-d3.in { transition-delay: 270ms; }
.rv-d4.in { transition-delay: 360ms; }

/* satır satır açılan başlık */
.rv-line { overflow: hidden; }
.rv-line > span { display: block; transform: translateY(102%); }
.rv-line.in > span { transform: none; transition: transform 1000ms var(--ease); }

/* ---------------------------------------------------- RTL (Arapça)
   Arapça bitişik bir yazıdır: harf aralığı vermek harflerin birleşmesini
   bozar ve metin kopuk görünür. Bu yüzden RTL'de tüm aralık değerleri
   sıfırlanır, Arapça destekli yüz öne alınır ve satır yüksekliği açılır. */
[dir="rtl"] {
  --sans: "IBM Plex Sans Arabic", "IBM Plex Sans", "Segoe UI", system-ui, sans-serif;
  --mono: "IBM Plex Sans Arabic", "IBM Plex Sans", system-ui, sans-serif;
}
[dir="rtl"] body { line-height: 1.8; }

[dir="rtl"] h1, [dir="rtl"] h2, [dir="rtl"] h3, [dir="rtl"] h4,
[dir="rtl"] .hero h1,
[dir="rtl"] .eyebrow,
[dir="rtl"] .scroll-hint,
[dir="rtl"] .mini-label,
[dir="rtl"] .foot-col h3,
[dir="rtl"] .foot-lbl,
[dir="rtl"] .figure-cap,
[dir="rtl"] .shot figcaption,
[dir="rtl"] .cap-k,
[dir="rtl"] .step-k,
[dir="rtl"] .scard-n,
[dir="rtl"] .prod-code,
[dir="rtl"] .prod-tag,
[dir="rtl"] .pcard .c,
[dir="rtl"] .btn,
[dir="rtl"] .btn-sm,
[dir="rtl"] .info-lbl,
[dir="rtl"] .field label,
[dir="rtl"] .faq summary,
[dir="rtl"] .spec-table td,
[dir="rtl"] .chips li,
[dir="rtl"] .lang-btn,
[dir="rtl"] .lang-menu a em,
[dir="rtl"] .foot-langs a,
[dir="rtl"] .foot-base p {
  letter-spacing: normal;
  text-transform: none;
}

/* marka adı latin kalır — aralığı korunur */
[dir="rtl"] .logo-type b { letter-spacing: .17em; }
[dir="rtl"] .logo-type i { letter-spacing: .38em; }

[dir="rtl"] .eyebrow::before { transform: scaleX(-1); }
[dir="rtl"] .btn:hover .arw { transform: translateX(-4px); }
[dir="rtl"] .arw { transform: scaleX(-1); }
[dir="rtl"] .tick-list li::before { transform: rotate(-45deg); }

/* Arapça rakam ve ölçü değerleri soldan sağa okunur */
[dir="rtl"] .spec-table td,
[dir="rtl"] .info-val[href^="tel"] {
  direction: ltr;
  text-align: right;
  unicode-bidi: embed;
}

/* ---------------------------------------------------- duyarlı */
@media (max-width: 1080px) {
  .prod { grid-template-columns: 72px minmax(0,1fr); }
  .prod-specs { grid-column: 2; }
  .step { grid-template-columns: 64px minmax(0,1fr); }
  .step-body { grid-column: 2; }
  .foot-grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 900px) {
  .head-cta { display: none; }
  .burger { display: block; }
  .main-nav {
    position: fixed; inset: 0 0 auto;
    padding: 6rem var(--gut) 2.5rem;
    flex-direction: column; gap: 0;
    background: var(--ink);
    border-bottom: 1px solid var(--line);
    transform: translateY(-100%);
    transition: transform 620ms var(--ease);
    max-height: 100svh; overflow-y: auto;
  }
  .main-nav.is-open { transform: translateY(0); }
  .main-nav a {
    font-size: 1.4rem; font-weight: 500;
    padding: .85rem 0; border-bottom: 1px solid var(--line);
  }
  .main-nav a::after { display: none; }
  .split, .contact-grid { grid-template-columns: 1fr; }
  .split-sticky { position: static; }
}

@media (max-width: 640px) {
  .prod, .step { grid-template-columns: 1fr; gap: 1.2rem; }
  .prod-specs, .step-body { grid-column: 1; }
  .field-row { grid-template-columns: 1fr; }
  .foot-grid { grid-template-columns: 1fr; }
  .hero { min-height: 92svh; }
  .scroll-hint { display: none; }
}

/* ---------------------------------------------------- hareket azaltma */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
  .rv, .rv-line > span, .hero h1 span > i { opacity: 1 !important; transform: none !important; }
  .hero-canvas { display: none; }
}

/* ---------------------------------------------------- yazdırma */
@media print {
  .site-head, .site-foot, .hero-canvas, .scroll-hint { display: none; }
  body { background: #fff; color: #000; }
}

/* ============================================================
   Görselli kartlar
   ============================================================ */

/* --- sektör kartı görseli */
.scard { display: flex; flex-direction: column; padding: 0; }
.scard-media {
  position: relative; overflow: hidden;
  aspect-ratio: 4 / 3; background: var(--panel);
}
.scard-media img {
  width: 100%; height: 100%; object-fit: cover;
  filter: grayscale(.55) brightness(.86) contrast(1.05);
  transform: scale(1.04);
  transition: transform 1500ms var(--ease), filter 800ms var(--ease);
}
.scard-media::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(14,17,19,.72), rgba(14,17,19,.06) 55%, transparent);
  transition: opacity 700ms var(--ease);
}
.on-bone .scard-media::after {
  background: linear-gradient(to top, rgba(242,238,232,.92), rgba(242,238,232,.1) 62%, transparent);
}
.scard:hover .scard-media img { transform: scale(1.1); filter: grayscale(0) brightness(1) contrast(1.02); }
.scard:hover .scard-media::after { opacity: .6; }

.scard-body { padding: clamp(1.4rem, 1rem + 1.2vw, 2.1rem); display: flex; flex-direction: column; flex: 1; }
.scard-n {
  position: absolute; z-index: 2;
  inset-block-start: 1rem; inset-inline-start: 1rem;
  margin: 0; padding: .3rem .55rem;
  background: rgba(14,17,19,.72);
  border: 1px solid var(--line);
  border-radius: var(--r);
  backdrop-filter: blur(6px);
}
.on-bone .scard-n { background: rgba(242,238,232,.82); border-color: var(--bone-line); }

/* --- ürün önizleme kartı görseli */
.pcard { padding: 0; min-height: 0; }
.pcard-media { position: relative; aspect-ratio: 3 / 2; overflow: hidden; background: var(--panel); }
.pcard-media img {
  width: 100%; height: 100%; object-fit: cover;
  filter: grayscale(.6) brightness(.84) contrast(1.06);
  transform: scale(1.04);
  transition: transform 1500ms var(--ease), filter 800ms var(--ease);
}
.pcard-media::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(14,17,19,.8), rgba(14,17,19,.08) 62%, transparent);
}
.pcard:hover .pcard-media img { transform: scale(1.1); filter: grayscale(0) brightness(1); }
.pcard-body { padding: clamp(1.3rem, 1rem + 1vw, 1.9rem); display: flex; flex-direction: column; gap: .55rem; flex: 1; }
.pcard .c {
  position: absolute; z-index: 2;
  inset-block-start: .9rem; inset-inline-start: .9rem;
  padding: .28rem .5rem;
  background: rgba(158,27,60,.9);
  color: #fff; border-radius: var(--r);
}

/* --- ürün sayfası satır görseli */
.prod-media {
  grid-column: 1 / -1;
  aspect-ratio: 21 / 7;
  overflow: hidden; border-radius: var(--r-lg);
  margin-bottom: 1.6rem; background: var(--panel);
}
.prod-media img {
  width: 100%; height: 100%; object-fit: cover;
  filter: grayscale(.5) brightness(.85) contrast(1.04);
  transform: scale(1.03);
  transition: transform 1600ms var(--ease), filter 900ms var(--ease);
}
.prod:hover .prod-media img { transform: scale(1.08); filter: grayscale(0) brightness(1); }

@media (max-width: 640px) {
  .prod-media { aspect-ratio: 16 / 9; }
}

/* ============================================================
   Üretim galerisi — bento düzeni
   ============================================================ */
.shot-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-rows: clamp(150px, 15.5vw, 250px);
  gap: clamp(.6rem, .3rem + .8vw, 1.1rem);
}
.shot {
  position: relative; margin: 0; overflow: hidden;
  border-radius: var(--r-lg);
  background: var(--panel);
  border: 1px solid var(--bone-line);
  height: 100%;
}
/* bento — 6 görsel üç satırı boşluksuz doldurur:
   [ 1  1  2 ]   1 geniş, 2 dik (dikey fotoğraf buraya oturur)
   [ 3  4  2 ]
   [ 5  6  6 ]                                                   */
.shot-grid .shot:nth-child(1) { grid-column: span 2; }
.shot-grid .shot:nth-child(2) { grid-row: span 2; }
.shot-grid .shot:nth-child(6) { grid-column: span 2; }

/* sırayla açılma */
.shot-grid .shot:nth-child(2).in { transition-delay: 90ms; }
.shot-grid .shot:nth-child(3).in { transition-delay: 180ms; }
.shot-grid .shot:nth-child(4).in { transition-delay: 270ms; }
.shot-grid .shot:nth-child(5).in { transition-delay: 360ms; }
.shot-grid .shot:nth-child(6).in { transition-delay: 450ms; }
.shot img {
  width: 100%; height: 100%; object-fit: cover;
  filter: grayscale(.75) contrast(1.06) brightness(.9);
  transform: scale(1.03);
  transition: transform 1500ms var(--ease), filter 800ms var(--ease);
}
.shot:hover img { transform: scale(1.09); filter: grayscale(0) contrast(1.02) brightness(1); }
.shot figcaption {
  position: absolute; inset-block-end: 0; inset-inline: 0;
  padding: 2rem .9rem .8rem;
  background: linear-gradient(to top, rgba(14,17,19,.94), transparent);
  font-family: var(--mono); font-size: var(--t-micro);
  letter-spacing: .1em; text-transform: uppercase; color: #E9E5DF;
}

@media (max-width: 900px) {
  .shot-grid { grid-template-columns: repeat(2, 1fr); grid-auto-rows: clamp(140px, 22vw, 200px); }
  .shot-grid .shot:first-child { grid-column: span 2; grid-row: span 2; }
  .shot-grid .shot:last-child  { grid-column: span 2; grid-row: span 1; }
}
@media (max-width: 560px) {
  .shot-grid { grid-template-columns: 1fr; grid-auto-rows: 210px; }
  .shot-grid .shot:first-child { grid-column: span 1; grid-row: span 2; }
  .shot-grid .shot:last-child  { grid-column: span 1; grid-row: span 1; }
}

/* ---------------------------------------------------- iç sayfa hücre dokusu */
.head-canvas {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  z-index: 1;
  pointer-events: none;
}
.page-head .wrap { position: relative; z-index: 2; }

@media (prefers-reduced-motion: reduce) {
  .head-canvas { display: none; }
}

/* ============================================================
   SSS — açılır kapanır liste
   ============================================================ */
.faq-list { border-top: 1px solid var(--line); }
.on-bone .faq-list { border-top-color: var(--bone-line); }

.faq {
  border-bottom: 1px solid var(--line);
  scroll-margin-top: 6rem;
}
.on-bone .faq { border-bottom-color: var(--bone-line); }

.faq summary {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 1.5rem;
  padding: 1.35rem 0;
  cursor: pointer;
  list-style: none;
  font-size: var(--t-h3);
  font-weight: 600;
  letter-spacing: -.02em;
  line-height: 1.28;
  transition: color 320ms var(--ease);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary:hover { color: var(--accent-hi); }
.on-bone .faq summary:hover { color: var(--accent); }

.faq-ico {
  position: relative;
  flex: 0 0 auto;
  width: 16px; height: 16px;
  margin-top: .42em;
}
.faq-ico::before,
.faq-ico::after {
  content: ""; position: absolute; inset-block-start: 50%; inset-inline-start: 0;
  width: 16px; height: 1.5px;
  background: var(--accent-hi);
  transform: translateY(-50%);
  transition: transform 420ms var(--ease), opacity 320ms var(--ease);
}
.faq-ico::after { transform: translateY(-50%) rotate(90deg); }
.on-bone .faq-ico::before, .on-bone .faq-ico::after { background: var(--accent); }
.faq[open] .faq-ico::after { transform: translateY(-50%) rotate(0deg); opacity: 0; }

.faq-a {
  padding: 0 0 1.5rem;
  max-width: 78ch;
}
.faq-a p {
  margin: 0;
  color: var(--text-dim);
  font-size: 1rem;
  line-height: 1.68;
}
.on-bone .faq-a p { color: var(--ink-dim); }

/* açılırken yumuşak giriş */
.faq[open] .faq-a { animation: faqIn 460ms var(--ease); }
@keyframes faqIn {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: none; }
}