/* ==========================================================================
   FERLINA COLLECTION — Tasarım Sistemi
   Monokrom / nötr zemin + noktasal bronz aksan
   ========================================================================== */

:root {
  --bg: #f8f7f5;
  --bg-2: #efefef;
  --bg-3: #e9e5df;
  --text: #101010;
  --muted: #64666b;
  --line: #d9d5cf;
  --dark: #101010;
  --dark-2: #181816;
  --accent: #a9855c;
  --accent-soft: #c9b28f;
  --img-border-radius: 7px;
  --header-h: 96px;
  --pad-x: clamp(20px, 5vw, 84px);
  /* Navdaki TR | EN seçicisinin sağ kenarının, sayfa hizasından ne kadar
     içeride durduğu. Hero'daki slayt okları da bu hizaya dayanır; ≥1240px'te
     90px'e çıkar (aşağıdaki medya sorgusunda). */
  --nav-sag-hiza: 0px;
  --ease: cubic-bezier(.22, 1, .36, 1);
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: auto; }

html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }

:root {
  --font-body: 'Jost', 'Helvetica Neue', Arial, sans-serif;
  --font-display: 'Jost', 'Helvetica Neue', Arial, sans-serif;
}

body {
  font-family: var(--font-body);
  font-weight: 400;
  background: var(--bg);
  color: var(--text);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

img { max-width: 100%; display: block; }
/* WebP sunumu için görseller <picture> ile sarmalandı. display:contents,
   picture'ı düzenden tamamen çıkarır: img yine üst öğenin doğrudan çocuğu gibi
   davranır, böylece mevcut flex/grid kuralları, yüzdeli yükseklikler
   (ör. .hero-slide__media img { max-height:100% }) ve position:absolute
   kullanan kartlar (.col-card img) olduğu gibi çalışmaya devam eder. */
picture { display: contents; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; }
button { font: inherit; background: none; border: 0; cursor: pointer; color: inherit; }

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

/* ---------- Tipografi yardımcıları ---------- */

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  text-transform: uppercase;
  letter-spacing: 4px;
  font-size: clamp(10px, .8vw, 12px);
  font-weight: 500;
  color: var(--muted);
}
.eyebrow::before {
  content: "";
  width: 34px; height: 1px;
  background: var(--accent);
}

.h-display {
  font-family: var(--font-display);
  font-weight: 700;
  text-transform: uppercase;
  line-height: 1.0;
  letter-spacing: -0.015em;
}

/* Accent: aynı aile (Jost) — italik YOK. Bold büyük harf başlığa karşılık
   ince (light) ağırlık + küçük harf + bronz renk ile dikkat çekici kontrast. */
em.serif, .serif-i {
  font-family: var(--font-display);
  font-style: normal;
  font-weight: 300;
  text-transform: none;
  letter-spacing: -0.01em;
  color: var(--accent);
}

/* ---------- Preloader ---------- */

.preloader {
  position: fixed;
  inset: 0;
  z-index: 10000;
  background: #101010;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 2vh;
  color: #f8f7f5;
}
.preloader__brand {
  width: clamp(150px, 16vw, 240px);
  height: auto;
  filter: blur(10px);
  opacity: 0;
}
.preloader__count {
  font-family: var(--font-display);
  font-size: clamp(64px, 12vw, 220px);
  font-weight: 300;
  line-height: 1;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}
.preloader__count sup { font-size: .25em; font-weight: 400; color: var(--accent-soft); }

/* ---------- Header ---------- */

.site-header {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 var(--pad-x);
  height: var(--header-h);
  transition: height .4s var(--ease), background-color .4s, box-shadow .4s;
}
.site-header.is-scrolled {
  height: 68px;
  background: rgba(248, 247, 245, .88);
  backdrop-filter: blur(12px);
  box-shadow: 0 1px 0 rgba(0,0,0,.06);
}

.brand {
  display: flex;
  flex-direction: column;
  line-height: 1;
  z-index: 1002;
}
.brand__logo {
  height: 62px;
  width: auto;
  display: block;
  transition: height .4s var(--ease);
}
.site-header.is-scrolled .brand__logo { height: 51px; }
.brand__logo--light { display: none; }
body.menu-open .brand__logo--dark { display: none; }
body.menu-open .brand__logo--light { display: block; }

.main-nav { display: flex; gap: 34px; align-items: center; }
.main-nav a {
  text-transform: uppercase;
  letter-spacing: .12em;
  font-size: 14px;
  font-weight: 500;
  position: relative;
  padding: 4px 0;
}
.main-nav a::after {
  content: "";
  position: absolute;
  left: 0; bottom: 0;
  width: 100%; height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: right;
  transition: transform .45s var(--ease);
}
.main-nav a:hover::after { transform: scaleX(1); transform-origin: left; }

/* ---------- Dil seçici (TR | EN) ----------
   Navın son öğesi olduğu için sağ kenarda, --pad-x hizasında biter: EN'in N
   harfi, dil seçici eklenmeden önce İLETİŞİM'in M harfinin bittiği noktadadır.
   Diğer sekmeler bu genişlik kadar sola kayar. */

.lang-switch {
  display: flex;
  align-items: center;
  gap: 9px;
  /* Navın kendi 34px boşluğuna eklenir; ayırıcı çizgiyle nefes payı */
  margin-left: 6px;
}

/* Nav bloğu sağ kenardan 120px, dil seçici bunun üstüne 20px daha içeri alınır.
   Yalnızca yeterli alan olan genişliklerde: 1240px altında Türkçe menü
   (HAKKIMIZDA · ÇÖZÜM ALANLARI · REFERANSLAR · İŞ ORTAKLIĞI · İLETİŞİM)
   kaydırıldığında logonun üzerine biniyor. */
@media (min-width: 1240px) {
  .main-nav { margin-right: 120px; }
  /* Seçici navın sağ kenarının 30px dışına taşar; sayfa hizasının hâlâ 90px
     içindedir. (Önce 20px içerideydi, oradan 50px sağa alındı.) */
  .main-nav .lang-switch { margin-right: -30px; }
  /* Hero oklarının sağ sınırı da bu hizaya çekilir — aşağıdaki
     --nav-sag-hiza değişkeni ikisini birlikte tutar. */
  :root { --nav-sag-hiza: 90px; }
}

/* Dar masaüstü (1025–1239px): dil seçici navı genişlettiği için Türkçe menü
   logoya dayanıyordu. Sekme aralığı ve seçici payı bu aralıkta daraltılır. */
@media (min-width: 1025px) and (max-width: 1239px) {
  .main-nav { gap: 22px; }
  .main-nav .lang-switch { margin-left: 0; gap: 7px; }
}
.lang-switch__btn {
  text-transform: uppercase;
  letter-spacing: .12em;
  font-size: 16px;
  font-weight: 900;
  padding: 4px 0;
  color: inherit;
  opacity: .45;
  transition: opacity .3s var(--ease), color .3s var(--ease);
}
.lang-switch__btn:hover { opacity: 1; }
.lang-switch__btn.is-active { opacity: 1; color: var(--accent); }
.lang-switch__sep { opacity: .28; font-size: 13px; user-select: none; }

/* Overlay menüdeki dil seçici (mobil/tablet) — panelin en üstünde, menü
   başlıklarının üzerinde durur. Kapatma butonu absolute konumlandığı için
   onunla çakışmaz; sağ hizası menü öğeleriyle aynı. */
.overlay-menu .lang-switch {
  margin: 0;
  justify-content: flex-end;
  gap: 16px;
}
.overlay-menu .lang-switch__btn {
  font-size: clamp(18px, 5vw, 26px);
  font-weight: 900;
  letter-spacing: .06em;
  color: #f8f7f5;
  opacity: .5;
}
.overlay-menu .lang-switch__btn:hover,
.overlay-menu .lang-switch__btn.is-active { opacity: 1; }
.overlay-menu .lang-switch__btn.is-active { color: var(--accent-soft); }
.overlay-menu .lang-switch__sep {
  color: #f8f7f5;
  font-size: clamp(15px, 4vw, 21px);
  font-weight: 300;
}

/* ---------- Nav açılır menü (Çözüm Alanları) ---------- */

.nav-dropdown { position: relative; }
.nav-dropdown__trigger {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  text-transform: uppercase;
  letter-spacing: .12em;
  font-size: 14px;
  font-weight: 500;
  position: relative;
  padding: 4px 0;
  color: inherit;
  cursor: pointer;
}
.nav-dropdown__trigger::after {
  content: "";
  position: absolute;
  left: 0; bottom: 0;
  width: 100%; height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: right;
  transition: transform .45s var(--ease);
}
.nav-dropdown:hover .nav-dropdown__trigger::after,
.nav-dropdown:focus-within .nav-dropdown__trigger::after { transform: scaleX(1); transform-origin: left; }
.nav-dropdown__trigger svg {
  width: 9px; height: 9px;
  stroke: currentColor;
  transition: transform .35s var(--ease);
}
.nav-dropdown:hover .nav-dropdown__trigger svg,
.nav-dropdown:focus-within .nav-dropdown__trigger svg { transform: rotate(180deg); }

.nav-dropdown__menu {
  position: absolute;
  top: 100%;
  left: 50%;
  min-width: 200px;
  margin-top: 18px;
  padding: 10px;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 10px;
  box-shadow: 0 26px 50px rgba(16,16,16,.14);
  opacity: 0;
  visibility: hidden;
  transform: translate(-50%, 8px);
  transition: opacity .3s var(--ease), transform .3s var(--ease), visibility .3s;
  z-index: 20;
}
.nav-dropdown__menu::before {
  /* Buton ile menü arasındaki boşluğu köprüler; fare geçerken hover kopmaz. */
  content: "";
  position: absolute;
  top: -18px; left: 0; right: 0; height: 18px;
}
.nav-dropdown:hover .nav-dropdown__menu,
.nav-dropdown:focus-within .nav-dropdown__menu {
  opacity: 1;
  visibility: visible;
  transform: translate(-50%, 0);
}
.nav-dropdown__menu a {
  display: block;
  padding: 11px 14px;
  border-radius: 6px;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: .08em;
  font-weight: 500;
  color: var(--text);
  transition: background-color .25s, color .25s;
}
.nav-dropdown__menu a:hover { background: var(--bg-2); color: var(--accent); }

.burger {
  width: 46px; height: 46px;
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 1002;
  position: relative;
  transition: opacity .3s;
}
.burger span {
  position: absolute;
  left: 8px; right: 8px;
  height: 1.5px;
  background: currentColor;
  transition: transform .45s var(--ease), top .45s var(--ease);
}
.burger span:nth-child(1) { top: 18px; }
.burger span:nth-child(2) { top: 26px; }
/* Menü açıkken panelin kendi kapatma butonu devralır */
body.menu-open .burger { opacity: 0; pointer-events: none; }
body.menu-open .site-header { color: #f8f7f5; }
body.menu-open .site-header.is-scrolled { background: transparent; box-shadow: none; backdrop-filter: none; }

/* ---------- Overlay menü (sağdan açılan yarım çekmece) ---------- */

/* Tam ekranı kaplayan katman; paneldışı boşluk hem karartma hem
   kapatma alanı olarak çalışır (tıklama JS'te yakalanır). */
.overlay-menu {
  position: fixed;
  inset: 0;
  z-index: 1001;
  background: rgba(16, 16, 16, .5);
  visibility: hidden;
  opacity: 0;
}
.overlay-menu__panel {
  position: absolute;
  top: 0; right: 0; bottom: 0;
  width: 50%;
  min-width: 250px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 5vh;
  text-align: right;
  padding: calc(var(--header-h) + 5vh) clamp(20px, 5vw, 48px) 6vh;
  overflow-y: auto;
  color: #f8f7f5;
  background: rgba(16, 16, 16, .82);
  -webkit-backdrop-filter: blur(22px);
  backdrop-filter: blur(22px);
}
/* Panelin kapalı konumu GSAP'a bırakıldı. Burada transform tanımlanırsa
   GSAP onu piksel offset'i olarak koruyup kendi yüzdesini üzerine ekler,
   panel açılışta ekran dışında kalır. */
.overlay-menu__close {
  position: absolute;
  top: 26px;
  right: clamp(20px, 5vw, 48px);
  width: 42px; height: 42px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(248, 247, 245, .25);
  border-radius: 50%;
  background: transparent;
  color: #f8f7f5;
  cursor: pointer;
  transition: background-color .3s, border-color .3s;
}
.overlay-menu__close svg { width: 17px; height: 17px; stroke: currentColor; }
.overlay-menu__close:hover { background: rgba(248, 247, 245, .1); border-color: rgba(248, 247, 245, .55); }

.overlay-menu__group h5 {
  text-transform: uppercase;
  letter-spacing: .3em;
  font-size: 10px;
  font-weight: 500;
  color: rgba(248,247,245,.45);
  margin-bottom: 18px;
}
.overlay-menu__group li { overflow: hidden; }
.overlay-menu__group a {
  display: inline-block;
  padding: 5px 0;
  font-size: clamp(19px, 5.2vw, 34px);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: -0.01em;
  line-height: 1.15;
  transition: color .3s, transform .5s var(--ease);
}
.overlay-menu__group--secondary a { font-size: clamp(13px, 3.4vw, 17px); font-weight: 400; letter-spacing: .04em; }
.overlay-menu__group a:hover { color: var(--accent-soft); transform: translateX(-10px); }

/* ---------- Hero (Swiper) ---------- */

.hero {
  height: 100svh;
  min-height: 640px;
  background: var(--bg-2);
  transition: background-color 1s ease;
  position: relative;
  overflow: hidden;
}
.hero .swiper { height: 100%; }

.hero-slide {
  height: 100%;
  display: grid;
  grid-template-columns: minmax(0, 44%) minmax(0, 56%);
  align-items: center;
  gap: 3vw;
  padding: calc(var(--header-h) + 2vh) var(--pad-x) 12vh;
}
.hero-slide__content { max-width: 620px; }
.hero-slide__content > * {
  opacity: 0;
  transform: translateY(-30px);
  transition: opacity .8s ease .1s, transform .8s var(--ease) .1s;
}
.swiper-slide-active .hero-slide__content > * { opacity: 1; transform: translateY(0); }
.swiper-slide-active .hero-slide__content > *:nth-child(2) { transition-delay: .22s; }
.swiper-slide-active .hero-slide__content > *:nth-child(3) { transition-delay: .34s; }
.swiper-slide-active .hero-slide__content > *:nth-child(4) { transition-delay: .46s; }
/* Bağlantı butonu dikey kaymadan, yalnızca opaklıkla belirir. Diğer öğeler
   gibi 30px yukarıdan gelseydi, giriş animasyonu boyunca (ilk yüklemede ve
   her slayt geçişinde ~1sn) yerleşimdeki yerinde duran oklarla arasında
   30px'lik bir kayma görünürdü. */
.hero-slide__content > p:not(.hero-slide__text) { transform: none; }

.hero-slide__title {
  font-size: clamp(2.4rem, 5.6vw, 5.4rem);
  line-height: 1.15;
  margin: 22px 0 18px;
}
.hero-slide__title .serif-i { color: var(--accent); }
.hero-slide__text { color: var(--muted); font-weight: 300; font-size: clamp(15px, 1.25vw, 19px); max-width: 44ch; }

.hero-slide__media {
  height: min(66vh, 100%);
  align-self: center;
  display: flex;
  align-items: center;
  justify-content: center;
}
.hero-slide__media img {
  max-height: 100%;
  width: auto;
  max-width: 100%;
  object-fit: contain;
  border-radius: var(--img-border-radius);
  transform: scale(.9);
  opacity: 0;
  transition: transform 1.4s var(--ease) .1s, opacity .9s ease .1s;
  filter: drop-shadow(0 40px 60px rgba(0,0,0,.14));
}
.swiper-slide-active .hero-slide__media img { transform: scale(1); opacity: 1; }

@media (min-width: 1025px) {
  /* Başlıklar 2 ile 4 satır arasında sarıyor; en uzunu (4 satır) kadar yer
     ayrılır ki altındaki paragraf ve buton her slide'da aynı hizada dursun. */
  .hero-slide__title { min-height: 4.6em; }
  /* Bağlantı butonu ile oklar aynı yüksekliği paylaşır (.hero__btn bu
     değişkeni okur). Ölçü, butonun 14px dolgulu doğal yüksekliğinden
     (≈45px) yuvarlanarak alındı; dikey dolgu yerine sabit yükseklik
     verilir ki iki kutu birebir eşit olsun. */
  .hero { --hero-ctl-h: 46px; --hero-ctl-icon: 15px; }
  .hero-slide .btn {
    height: var(--hero-ctl-h);
    padding: 0 28px;
    font-size: 10.5px;
    gap: 11px;
  }
  .hero-slide .btn svg { width: 13px; height: 13px; }
  /* Görsel kaydırma: margin kullanılsa içerik uzar ve dikey ortalama
     nedeniyle buton yalnızca yarısı kadar inerdi. Oklar butonun hizasını
     JS ile takip ettiği için ikisi birlikte iner. */
  .hero-slide__content > p:not(.hero-slide__text) { position: relative; top: 70px; }

  .hero-slide__media { justify-content: flex-end; }
  /* 3. ve 4. slaytın görselleri sütundan geniş verilmişti; dar masaüstü
     ekranlarda (ör. yan çevrilmiş iPad Air, 1180px) sütunu taşıp başlığın
     üstüne biniyorlardı. min(...) ile hedef ölçü korunur, sütun daraldıkça
     görsel küçülür; height:auto oranı bozmaz. */
  .hero-slide__media img[src="Hero3.png"] {
    width: min(860px, 100%);
    max-width: 100%;
    height: auto;
    max-height: 378px;
  }
  .hero-slide__media img[src="Insaat.png"] {
    width: min(996px, 100%);
    max-width: 100%;
    height: auto;
  }
}

.hero__ui {
  position: absolute;
  left: var(--pad-x);
  /* Sağ sınır, navdaki TR | EN seçicisinin sağ kenarıyla aynı hizada durur;
     oklar bu hizayı geçmez. */
  right: calc(var(--pad-x) + var(--nav-sag-hiza));
  bottom: 4.5vh;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 24px;
}
.hero__nav { display: flex; gap: 12px; }
/* Oklar içi boş, kalın çizgili altın dairelerdir; hover'da çember ve ok
   ucu birlikte siyaha döner. */
.hero__btn {
  width: var(--hero-ctl-h, 58px); height: var(--hero-ctl-h, 58px);
  border: 2px solid var(--accent);
  background: transparent;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  transition: border-color .3s;
}
.hero__btn svg {
  width: var(--hero-ctl-icon, 18px); height: var(--hero-ctl-icon, 18px);
  stroke: var(--accent);
  stroke-width: 2;
  transition: stroke .3s;
}
.hero__btn:hover { border-color: var(--dark); }
.hero__btn:hover svg { stroke: var(--dark); }

.hero__scrollhint {
  position: absolute;
  right: var(--pad-x);
  top: 50%;
  transform: translateY(-50%) rotate(90deg);
  transform-origin: right center;
  font-size: 10px;
  letter-spacing: .4em;
  text-transform: uppercase;
  color: var(--muted);
  z-index: 5;
  display: none;
}

/* ---------- Bölüm iskeleti ---------- */

.section { padding: clamp(80px, 12vh, 160px) var(--pad-x); position: relative; }
.section--tight { padding-block: clamp(60px, 8vh, 110px); }
.section__head { margin-bottom: clamp(40px, 6vh, 80px); max-width: 1100px; }
.section__head .h-display { font-size: clamp(2rem, 4.6vw, 4.4rem); margin-top: 22px; }

/* reveal (blur→focus) */
.reveal { will-change: filter, opacity, transform; }

/* ---------- Hakkımızda ---------- */

/* Parallax şerit (Hero ↔ Hakkımızda) */
.parallax-band {
  position: relative;
  height: 300px;
  overflow: hidden;
  background: var(--dark);
}
.parallax-band__media {
  position: absolute;
  inset: -65% -8%;
  will-change: transform;
}
.parallax-band__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.about { background: var(--bg); overflow: hidden; }
[data-hspeed] { will-change: transform; }
.about__grid {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 4fr);
  gap: clamp(40px, 6vw, 110px);
  align-items: start;
}
.about__statement {
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 3.2vw, 3.1rem);
  font-weight: 500;
  line-height: 1.22;
  letter-spacing: -0.015em;
}
.about__statement .serif-i { color: var(--accent); font-size: 1.08em; }
.about__body { color: var(--muted); font-size: clamp(15px, 1.2vw, 18.5px); margin-top: 28px; max-width: 62ch; }

.stats { display: grid; gap: 8px; }
.stat {
  border-top: 1px solid var(--line);
  padding: 26px 0;
}
.stat__num {
  font-family: var(--font-display);
  font-size: clamp(3rem, 5vw, 4.6rem);
  font-weight: 300;
  line-height: 1;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}
.stat__num sup { font-size: .4em; color: var(--accent); font-weight: 400; }
.stat__label {
  text-transform: uppercase;
  letter-spacing: .18em;
  font-size: 11px;
  color: var(--muted);
  margin-top: 8px;
}

/* ---------- Yatay kaydırma (uzmanlık) ---------- */

.hscroll { background: var(--bg-2); overflow: hidden; }
.hscroll__head { padding: clamp(80px, 10vh, 130px) var(--pad-x) 0; }
.hscroll__title { font-size: clamp(1.9rem, 5.5vw, 5.2rem); white-space: nowrap; margin-top: 25px; width: max-content; max-width: none; will-change: transform; }
.hscroll__viewport { padding: 6vh 0 10vh; }
.hscroll__track {
  display: flex;
  gap: clamp(20px, 3vw, 48px);
  padding: 0 var(--pad-x);
  width: max-content;
}
.hcard {
  width: clamp(280px, 30vw, 480px);
  flex: none;
}
.hcard__media {
  height: clamp(340px, 48vh, 540px);
  border-radius: var(--img-border-radius);
  overflow: hidden;
  background: #dedad3;
  display: flex;
  align-items: center;
  justify-content: center;
}
.hcard__media img {
  max-width: 100%;
  max-height: 350px;
  width: auto;
  height: auto;
  object-fit: contain;
  transition: transform 1s var(--ease);
}
.hcard:hover .hcard__media img { transform: scale(1.06); }
.hcard__meta { display: flex; justify-content: space-between; align-items: baseline; margin-top: 16px; }
.hcard__name { font-weight: 600; text-transform: uppercase; letter-spacing: .06em; font-size: 14px; }
.hcard__idx { font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums; }
.hcard__sub { margin-top: 8px; color: var(--muted); font-size: 13px; line-height: 1.5; max-width: 52ch; }

/* Sade, düz kenarlı isim kutusu — görselin genişliğinde, mobil isim
   listesiyle aynı çizgi dili (ince çerçeve, köşesiz, büyük harf). */
.hcard__tag {
  display: block;
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--line);
  text-align: center;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .05em;
  font-weight: 600;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* 1. grup: isim görselin üstünde. 2. grup: isim görselin altında. */
.hcard__tag:first-child { margin-bottom: 10px; }
.hcard__media + .hcard__tag { margin-top: 10px; }

/* ---------- Uzmanlık Alanları — 5+5 grup, alt alta (masaüstü) ---------- */

.hreveal__stage { position: relative; padding: 6vh var(--pad-x) 10vh; }
.hreveal__group {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: clamp(12px, 1.4vw, 26px);
}
.hreveal__group + .hreveal__group { margin-top: clamp(20px, 3vh, 36px); }
.hreveal__group .hcard { width: 100%; }
.hreveal__group .hcard__media { height: clamp(150px, 19vh, 220px); }
.hreveal__group .hcard__media img { max-height: 100%; }
.hreveal__group .hcard__tag { font-size: 10px; padding: 8px 10px; }

/* ---------- Uzmanlık Alanları — isim listesi + pop-up (mobil) ---------- */

.hreveal__mobile { display: none; }

.hreveal__names {
  display: grid;
  grid-template-columns: 1fr 1fr;
  border-top: 1px solid var(--line);
  border-left: 1px solid var(--line);
}
.hreveal__names li { list-style: none; }
.hreveal__name-btn {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 18px 16px;
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  background: transparent;
  text-align: left;
  font-size: 12.5px;
  text-transform: uppercase;
  letter-spacing: .06em;
  font-weight: 600;
  color: var(--text);
  transition: background-color .3s, color .3s;
}
.hreveal__name-btn::after {
  content: "+";
  font-size: 18px;
  font-weight: 300;
  color: var(--muted);
  flex: none;
  transition: color .3s;
}
.hreveal__name-btn:active,
.hreveal__name-btn:focus-visible { background: var(--dark); color: #fff; }
.hreveal__name-btn:active::after,
.hreveal__name-btn:focus-visible::after { color: var(--accent-soft); }

@media (max-width: 1024px) {
  .hreveal__desktop { display: none; }
  .hreveal__mobile { display: block; padding: 1vh var(--pad-x) 8vh; }
}

/* ---------- Pop-up (lightbox) ---------- */

.lightbox {
  position: fixed;
  inset: 0;
  z-index: 3000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  opacity: 0;
  visibility: hidden;
  transition: opacity .3s var(--ease), visibility .3s;
}
.lightbox.is-open { opacity: 1; visibility: visible; }
.lightbox__backdrop { position: absolute; inset: 0; background: rgba(16,16,16,.85); }
.lightbox__panel {
  position: relative;
  z-index: 1;
  width: min(460px, 92vw);
  background: var(--bg);
  border-radius: var(--img-border-radius);
  padding: 32px 28px 28px;
  text-align: center;
  transform: scale(.94);
  transition: transform .35s var(--ease);
}
.lightbox.is-open .lightbox__panel { transform: scale(1); }
.lightbox__img { width: 100%; max-height: 52vh; object-fit: contain; }
.lightbox__caption {
  margin-top: 18px;
  text-transform: uppercase;
  letter-spacing: .1em;
  font-weight: 600;
  font-size: 13px;
}
.lightbox__close {
  position: absolute;
  top: -16px; right: -16px;
  width: 40px; height: 40px;
  border-radius: 50%;
  background: var(--dark);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
}
.lightbox__close svg { width: 15px; height: 15px; stroke: currentColor; }

/* Referanslar varyantı — yatay (landscape) kartlar */
.hscroll--refs { background: var(--bg); }
.hscroll--refs .hcard { width: clamp(320px, 36vw, 560px); }
.hscroll--refs .hcard__media { height: clamp(240px, 34vh, 380px); }
.hscroll--refs .hcard__media img {
  /* Referans kartları gerçek mekân fotoğrafı; obje kartlarının aksine
     kutuyu tam kaplamalı (cover), 350px yükseklik sınırı uygulanmaz. */
  width: 100%; height: 100%;
  max-width: none; max-height: none;
  object-fit: cover;
}

/* ---------- Koleksiyon kartları ---------- */

.collections__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2px;
  /* Bölümün yatay boşluğundan taşıp ekran kenarına kadar genişler; iki
     görsel ortada sadece 2px'lik ince bir çizgiyle ayrılıp birleşir. */
  margin-inline: calc(-1 * var(--pad-x));
  width: calc(100% + var(--pad-x) * 2);
}
.col-card {
  position: relative;
  overflow: hidden;
  background: var(--dark);
  color: #f8f7f5;
  display: block;
  height: clamp(560px, 84vh, 920px);
}
.col-card img {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  opacity: .92;
  transition: transform 1.2s var(--ease), opacity .6s;
}
.col-card:hover img { transform: scale(1.06); opacity: .8; }
.col-card::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(10,10,10,.72) 0%, rgba(10,10,10,.08) 45%, rgba(10,10,10,.18) 100%);
}
.col-card__inner {
  position: absolute;
  inset: 0;
  z-index: 1;
  padding: clamp(28px, 3.6vw, 56px);
  /* Sol kenar boşluğu bölüm başlığıyla ("Çözüm Alanları") aynı hizaya
     gelsin diye --pad-x kullanır; sağ karttaki blok da bu sayede aynı
     ölçüde sağa kaymış olur. */
  padding-left: var(--pad-x);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}
.col-card__cat {
  text-transform: uppercase;
  letter-spacing: .3em;
  font-size: 10.5px;
  color: var(--accent-soft);
  margin-bottom: 12px;
}
.col-card__title { font-family: var(--font-display); font-size: clamp(1.9rem, 3.4vw, 3.4rem); text-transform: uppercase; font-weight: 700; line-height: 1.02; letter-spacing: -0.015em; }
.col-card__text { color: rgba(248,247,245,.75); font-size: 15.5px; max-width: 42ch; margin-top: 14px; }
.col-card__link {
  margin-top: 22px;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  text-transform: uppercase;
  letter-spacing: .18em;
  font-size: 11px;
  font-weight: 600;
}
.col-card__link svg { width: 16px; height: 16px; stroke: currentColor; transition: transform .4s var(--ease); }
.col-card:hover .col-card__link svg { transform: translateX(6px); }

/* ---------- Değerler ---------- */

.values { background: var(--bg-2); }
.values__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border-top: 1px solid var(--line);
  border-left: 1px solid var(--line);
}
.value {
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  padding: clamp(28px, 2.6vw, 44px);
  min-height: clamp(260px, 34vh, 360px);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  transition: background-color .4s;
}
.value:hover { background: #fff; }
.value__idx { font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums; }
.value h4 { text-transform: uppercase; font-size: clamp(15px, 1.25vw, 19px); letter-spacing: .06em; margin: 26px 0 14px; }
.value p { color: var(--muted); font-size: 15.5px; }

/* ---------- Referanslar ---------- */

.filters { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: clamp(30px, 4vh, 50px); }
.filter-btn {
  padding: 10px 20px;
  border: 1px solid var(--line);
  border-radius: 100px;
  text-transform: uppercase;
  letter-spacing: .12em;
  font-size: 11px;
  font-weight: 500;
  transition: background-color .3s, color .3s, border-color .3s;
}
.filter-btn:hover { border-color: var(--text); }
.filter-btn.is-active { background: var(--dark); border-color: var(--dark); color: #fff; }

.ref-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(20px, 2.6vw, 40px);
}
.ref-card { display: block; }
.ref-card.is-hidden { display: none; }
.ref-card__media {
  border-radius: var(--img-border-radius);
  overflow: hidden;
  aspect-ratio: 16 / 11;
  background: #22201d;
  position: relative;
}
.ref-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 1s var(--ease); }
.ref-card:hover .ref-card__media img { transform: scale(1.05); }
.ref-card__plus {
  position: absolute;
  right: 18px; top: 18px;
  width: 44px; height: 44px;
  border-radius: 50%;
  background: rgba(248,247,245,.92);
  color: var(--text);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  font-weight: 300;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity .35s, transform .45s var(--ease);
}
.ref-card:hover .ref-card__plus { opacity: 1; transform: translateY(0); }
.ref-card__meta { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; margin-top: 16px; }
.ref-card__name { font-weight: 600; text-transform: uppercase; letter-spacing: .05em; font-size: 15px; }
.ref-card__info { color: var(--muted); font-size: 12.5px; text-transform: uppercase; letter-spacing: .1em; text-align: right; }

/* ---------- İş ortaklığı ---------- */

.partnership { background: var(--dark); color: #f8f7f5; }
.partnership .eyebrow { color: rgba(248,247,245,.5); }
.partnership__grid {
  display: grid;
  grid-template-columns: minmax(0, 6fr) minmax(0, 5fr);
  gap: clamp(40px, 6vw, 110px);
  align-items: start;
}
.partnership h2 { font-size: clamp(2rem, 4.4vw, 4.2rem); margin-top: 22px; }
.partnership__sub { color: rgba(248,247,245,.65); font-weight: 300; margin-top: 24px; max-width: 46ch; font-size: clamp(15px, 1.2vw, 18.5px); }
.partnership__list { border-top: 1px solid rgba(248,247,245,.16); }
.partnership__list li {
  border-bottom: 1px solid rgba(248,247,245,.16);
  padding: 20px 0;
  display: flex;
  align-items: baseline;
  gap: 20px;
  font-size: clamp(15px, 1.25vw, 19px);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: .04em;
}
.partnership__list span { font-size: 11px; color: var(--accent-soft); font-variant-numeric: tabular-nums; }

/* ---------- Butonlar ---------- */

.btn {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  padding: 18px 34px;
  border-radius: 100px;
  background: var(--dark);
  color: #fff;
  text-transform: uppercase;
  letter-spacing: .16em;
  font-size: 11.5px;
  font-weight: 600;
  position: relative;
  overflow: hidden;
  transition: color .35s;
}
.btn > * { position: relative; z-index: 1; }
.btn::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--accent);
  transform: translateY(101%);
  transition: transform .5s var(--ease);
}
.btn:hover::before { transform: translateY(0); }
.btn svg { width: 15px; height: 15px; stroke: currentColor; }

.btn--light { background: #f8f7f5; color: var(--text); }
.btn--light:hover { color: #fff; }
.btn--ghost { background: transparent; border: 1px solid var(--line); color: var(--text); }
.btn--ghost::before { background: var(--dark); }
.btn--ghost:hover { color: #fff; border-color: var(--dark); }
.partnership .btn--ghost,
.closing-cta .btn--ghost { border-color: rgba(248,247,245,.3); color: #f8f7f5; }
.partnership .btn--ghost::before,
.closing-cta .btn--ghost::before { background: #f8f7f5; }
.partnership .btn--ghost:hover,
.closing-cta .btn--ghost:hover { color: var(--text); border-color: #f8f7f5; }
.mt-40 { margin-top: 40px; }

/* ---------- İletişim ---------- */

.contact__grid {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
  gap: clamp(48px, 6vw, 120px);
  align-items: start;
}
.contact h2 { font-size: clamp(2.2rem, 4.6vw, 4.4rem); margin-top: 22px; }
.contact h2 .serif-i { color: var(--accent); }
.contact__info { margin-top: clamp(30px, 5vh, 60px); border-top: 1px solid var(--line); }
.contact__row {
  display: grid;
  grid-template-columns: 110px 1fr;
  gap: 18px;
  padding: 18px 0;
  border-bottom: 1px solid var(--line);
  font-size: 14.5px;
}
.contact__row dt { text-transform: uppercase; letter-spacing: .16em; font-size: 10.5px; color: var(--muted); padding-top: 4px; }
.contact__row a:hover { color: var(--accent); }

.form { display: grid; grid-template-columns: 1fr 1fr; gap: 26px 22px; }
.form__field { display: flex; flex-direction: column; gap: 8px; }
.form__field--full { grid-column: 1 / -1; }
.form__field label {
  text-transform: uppercase;
  letter-spacing: .16em;
  font-size: 10.5px;
  color: var(--muted);
}
/* Onay kutusu hariç: appearance:none metin alanlarının çerçevesi için gerekli,
   ancak checkbox'ta tikin hiç çizilmemesine yol açar. */
.form__field input:not([type="checkbox"]),
.form__field select,
.form__field textarea {
  font: inherit;
  font-size: 15.5px;
  background: transparent;
  border: 1px solid var(--line);
  padding: 14px 16px;
  border-radius: var(--img-border-radius);
  color: var(--text);
  transition: border-color .3s, box-shadow .3s;
  appearance: none;
  -webkit-appearance: none;
}
.form__field select { cursor: pointer; }
.form__field textarea { resize: vertical; min-height: 150px; }
.form__field input::placeholder,
.form__field textarea::placeholder { color: var(--line); }
.form__field input:not([type="checkbox"]):hover,
.form__field select:hover,
.form__field textarea:hover { border-color: var(--muted); }
.form__field input:not([type="checkbox"]):focus,
.form__field select:focus,
.form__field textarea:focus {
  outline: none;
  border-color: var(--text);
  box-shadow: 0 0 0 3px rgba(169, 133, 92, .12);
}
.form__submit { grid-column: 1 / -1; margin-top: 8px; }

/* Bot tuzağı — ekran okuyucular ve klavye için de erişilemez */
.form__botcheck { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; pointer-events: none; }

/* Onay metni cümle düzeninde okunmalı; form etiketlerinin büyük harf
   ve geniş harf aralığı biçimi burada geçersiz kılınır. */
.form__consent label {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  cursor: pointer;
  color: var(--muted);
  font-size: 13.5px;
  line-height: 1.5;
  text-transform: none;
  letter-spacing: normal;
  font-weight: 400;
}
/* KVKK bağlantısı cümle içinde kalın gösterilir — çevresindeki 400 ağırlıklı
   onay metninden ayrılsın. */
.form__consent a { font-weight: 700; }
.form__consent a:hover { color: var(--accent); }
.form__consent input {
  width: 18px; height: 18px;
  flex: none;
  margin-top: 2px;
  accent-color: var(--accent);
  cursor: pointer;
}
.form__error { margin-top: 14px; color: #b3261e; font-size: 13.5px; line-height: 1.5; }
.btn[disabled] { opacity: .55; pointer-events: none; }

/* Form, solundaki iletişim listesiyle aynı yüksekliğe uzar; artan boşluğu
   mesaj alanı massedar. Böylece Gönder butonunun altı, listenin son
   satırındaki (E-posta) çizgiyle hizalanır. */
@media (min-width: 1025px) {
  .contact__grid { align-items: stretch; }
  .form { height: 100%; grid-template-rows: auto auto 1fr auto; }
  .form__field textarea { flex: 1; }
  .form.is-sent { height: auto; grid-template-rows: auto; }
}

.form__success {
  grid-column: 1 / -1;
  display: none;
  padding: clamp(30px, 4vh, 50px);
  background: var(--bg-2);
  border-radius: var(--img-border-radius);
  text-align: center;
}
.form__success h4 { text-transform: uppercase; letter-spacing: .08em; font-size: 20px; margin-bottom: 10px; }
.form__success p { color: var(--muted); font-size: 14.5px; }
.form.is-sent .form__field, .form.is-sent .form__submit { display: none; }
.form.is-sent .form__success { display: block; }

/* ---------- Footer ---------- */

.site-footer {
  background: var(--bg-2);
  padding: clamp(70px, 10vh, 130px) var(--pad-x) 40px;
  position: relative;
  overflow: hidden;
}
/* Sayfayı kapatan bant. Absolute konumlandığı için footer'ın yüksekliğine
   eklenmez; telif satırının altındaki mevcut boşluğa yerleşir. */
.site-footer::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 50px;
  background: var(--dark);
  pointer-events: none;
}
.footer__giant {
  position: absolute;
  left: 50%;
  bottom: -0.18em;
  transform: translateX(-50%);
  font-family: var(--font-display);
  font-size: 20vw;
  font-weight: 800;
  letter-spacing: -0.02em;
  text-transform: uppercase;
  color: rgba(16,16,16,.045);
  white-space: nowrap;
  pointer-events: none;
  line-height: 1;
  user-select: none;
}
.footer__grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1.2fr;
  gap: clamp(30px, 4vw, 70px);
  padding-bottom: clamp(60px, 10vh, 120px);
}
/* Logo, yanındaki İletişim sütunuyla aynı yüksekliğe gelsin diye
   genişlikten ölçeklenir (görsel oranı 538/251). */
/* Header'daki logoyla aynı boyut */
.footer__about .brand__logo { height: 62px; width: auto; max-width: 100%; align-self: flex-start; }
.footer__col h5 {
  text-transform: uppercase;
  letter-spacing: .24em;
  font-size: 10.5px;
  color: var(--muted);
  margin-bottom: 20px;
  font-weight: 500;
}
.footer__col li { margin-bottom: 10px; }
/* Header menüsüyle aynı yazı boyutu */
.footer__col a { font-size: 14px; transition: color .3s; }
.footer__col a:hover { color: var(--accent); }
.footer__bottom {
  position: relative;
  z-index: 1;
  border-top: 1px solid var(--line);
  padding-top: 24px;
  margin-bottom: 50px;
  display: flex;
  justify-content: center;
  text-align: center;
  gap: 20px;
  flex-wrap: wrap;
  font-size: 12px;
  color: var(--muted);
}

/* ---------- Alt sayfalar ---------- */

.page-hero {
  padding: calc(var(--header-h) + clamp(50px, 9vh, 110px)) var(--pad-x) clamp(50px, 8vh, 100px);
  background: var(--bg-2);
}
.breadcrumb {
  display: flex;
  gap: 10px;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .14em;
  color: var(--muted);
  margin-bottom: clamp(26px, 4vh, 44px);
}
.breadcrumb a:hover { color: var(--text); }
.breadcrumb span::before { content: "/"; margin-right: 10px; color: var(--line); }
.page-hero h1 { font-size: clamp(2.6rem, 7vw, 7rem); }
.page-hero h1 .serif-i { color: var(--accent); }
.page-hero__intro {
  color: var(--muted);
  font-weight: 300;
  font-size: clamp(16px, 1.45vw, 21px);
  max-width: 58ch;
  margin-top: clamp(22px, 3.5vh, 40px);
}

.cat-list { padding: 0 var(--pad-x); }
.cat {
  display: grid;
  grid-template-columns: minmax(0, 4.5fr) minmax(0, 6.5fr);
  gap: clamp(26px, 3.5vw, 70px);
  padding: clamp(36px, 5.5vh, 68px) 0;
  border-bottom: 1px solid var(--line);
}
.cat:last-child { border-bottom: 0; }
.cat__idx {
  font-size: clamp(2.6rem, 4.2vw, 4.2rem);
  font-weight: 200;
  line-height: 1;
  color: var(--line);
  font-variant-numeric: tabular-nums;
}
.cat__label {
  text-transform: uppercase;
  letter-spacing: .28em;
  font-size: 10.5px;
  color: var(--accent);
  margin-top: 16px;
  font-weight: 600;
}
.cat__title { font-family: var(--font-display); font-size: clamp(1.6rem, 2.6vw, 2.5rem); text-transform: uppercase; font-weight: 700; line-height: 1.05; letter-spacing: -0.015em; margin-top: 10px; }
.cat__desc { color: var(--muted); font-size: clamp(15px, 1.2vw, 18.5px); max-width: 56ch; }
.cat__items {
  margin-top: 22px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.cat__items li {
  border: 1px solid var(--line);
  border-radius: 100px;
  padding: 9px 18px;
  font-size: 12.5px;
  letter-spacing: .04em;
  color: var(--text);
  transition: background-color .3s, color .3s, border-color .3s;
}
.cat__items li:hover { background: var(--dark); color: #fff; border-color: var(--dark); }
.cat__icon {
  margin-top: 26px;
  width: 84px;
  height: 84px;
  border: 1px solid var(--line);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--accent);
  transition: background-color .45s var(--ease), border-color .45s, color .45s;
}
.cat__icon svg {
  width: 42px;
  height: 42px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.3;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.cat:hover .cat__icon { background: var(--dark); border-color: var(--dark); color: var(--accent-soft); }

/* Accordion (konut alt kırılımları) */
.acc-group { margin-top: 22px; border-top: 1px solid var(--line); }
details.Accordion { border-bottom: 1px solid var(--line); }
details.Accordion summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
  padding: 18px 2px;
  font-weight: 500;
  font-size: 15px;
  text-transform: uppercase;
  letter-spacing: .05em;
}
details.Accordion summary::-webkit-details-marker { display: none; }
details.Accordion summary::after {
  content: "+";
  font-size: 20px;
  font-weight: 300;
  color: var(--muted);
  transition: transform .4s var(--ease);
}
details.Accordion[open] summary::after { transform: rotate(45deg); }
details.Accordion .Accordion__body { padding: 0 2px 22px; color: var(--muted); font-size: 14px; max-width: 68ch; }

/* ---------- Yasal metin sayfaları ---------- */

.legal { max-width: 80ch; }
.legal__updated {
  text-transform: uppercase;
  letter-spacing: .16em;
  font-size: 10.5px;
  color: var(--muted);
  padding-bottom: 22px;
  border-bottom: 1px solid var(--line);
}
/* Yalnızca İngilizce sürümde görünür (i18n.js açıp kapatır): çevirinin
   bilgilendirme amaçlı olduğunu, Türkçe metnin esas olduğunu belirtir. */
.legal__disclaimer {
  margin-top: 18px;
  padding: 14px 16px;
  border-left: 2px solid var(--accent);
  background: var(--bg-2);
  border-radius: var(--img-border-radius);
  color: var(--muted);
  font-size: 13px;
  line-height: 1.55;
}
.legal h2 {
  font-family: var(--font-display);
  font-size: clamp(1.05rem, 1.5vw, 1.35rem);
  text-transform: uppercase;
  letter-spacing: .02em;
  font-weight: 600;
  margin: 46px 0 14px;
}
.legal h2:first-of-type { margin-top: 38px; }
.legal p { color: var(--muted); font-size: 15.5px; line-height: 1.75; margin-bottom: 14px; }
.legal p strong { color: var(--text); font-weight: 600; }
.legal a { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }
.legal a:hover { color: var(--text); }
.legal__list { list-style: none; margin: 0 0 14px; }
.legal__list li {
  position: relative;
  padding-left: 20px;
  color: var(--muted);
  font-size: 15.5px;
  line-height: 1.75;
  margin-bottom: 8px;
}
.legal__list li::before {
  content: "";
  position: absolute;
  left: 0; top: 12px;
  width: 7px; height: 1px;
  background: var(--accent);
}
.legal__list li strong { color: var(--text); font-weight: 600; }
.legal__cta { margin-top: 52px; padding-top: 34px; border-top: 1px solid var(--line); }

/* Kapanış CTA */
.closing-cta {
  background: var(--dark);
  color: #f8f7f5;
  text-align: center;
  padding: clamp(90px, 14vh, 180px) var(--pad-x);
}
.closing-cta h2 { font-size: clamp(2rem, 5vw, 4.8rem); max-width: 22ch; margin: 22px auto 0; }
.closing-cta p { color: rgba(248,247,245,.65); font-weight: 300; max-width: 56ch; margin: 26px auto 0; font-size: clamp(15px, 1.2vw, 19px); }
.closing-cta .eyebrow { color: rgba(248,247,245,.5); justify-content: center; }
.closing-cta__actions { display: flex; gap: 20px 90px; justify-content: center; flex-wrap: wrap; margin-top: 44px; }

/* ---------- Responsive ---------- */

@media (max-width: 1024px) {
  :root { --header-h: 92px; }
  .main-nav { display: none; }
  .burger { display: flex; }
  /* Logonun üst kenarı ile hamburgerin ilk çizgisi aynı hizada. İkisi de
     üstten hizalanır; hamburgerin çizgisi kendi kutusunun 18px içinden
     başladığı için kutu o kadar yukarı çekilir. */
  .site-header { align-items: flex-start; padding-top: 15px; }
  .site-header.is-scrolled { padding-top: 8px; }
  .brand { margin-top: 0; }
  .burger { margin-top: -18px; }
  /* Yalnızca masaüstünde geçerli satır kırılmaları (başlıklar burada 2 satır) */
  .br-desktop { display: none; }
  /* Dikey akış: başlık → görsel → bağlantı butonu → paragraf → oklar.
     İçerik sarmalayıcısı display:contents ile kaldırılır, böylece görsel
     ve buton araya girebilir. */
  /* Görsel satırı esnek (1fr): dikey alan daralınca yazı satırları yerinde
     kalır, artan/eksilen boşluğu görsel karşılar. minmax'in alt sınırı 0
     olmasa satır içeriğe kilitlenir ve alçak ekranlarda taşardı. */
  .hero-slide {
    grid-template-columns: 1fr;
    grid-template-rows: auto auto minmax(0, 1fr) auto auto;
    gap: 1.6vh;
    padding-bottom: 12vh;
  }
  .hero-slide__content { display: contents; }
  .hero-slide .eyebrow { order: 1; }
  .hero-slide__title { order: 2; }
  .hero-slide__media { order: 3; }
  .hero-slide__content > p:not(.hero-slide__text) { order: 4; }
  .hero-slide__text { order: 5; }

  /* Ölçek, en uzun satır olan 4. slide'ın "Projeden Gerçeğe," satırının
     tek satıra sığmasına göre belirlendi; tüm başlıklar bu ölçeği paylaşır. */
  .hero-slide__title {
    font-size: 8.6vw;
    margin: 8px 0 4px;
    text-align: center;
  }
  .hero-slide__text { font-size: clamp(20px, 3.4vw, 28px); }
  /* Kutu satırı birebir doldurur ki görselin %100 sınırı ölçülebilir bir
     yüksekliğe dayansın; aksi halde görsel kutusundan taşıp başlığın ve
     butonun üstüne binebiliyor. */
  .hero-slide__media { align-self: stretch; height: 100%; min-height: 0; }
  .hero-slide__media img {
    width: 100%;
    height: auto;
    max-height: min(36vh, 100%);
    object-fit: contain;
  }

  /* Hero arayüzü mobil/tablette sadeleşir: oklar ve slayt bağlantı butonu
     yarı ölçeğe iner. Buton yazısı okunur kalsın diye punto 10px'e
     sabitlenir (yarısı 5–6px'e düşerdi). Oklar sağ kenardan alınıp
     bağlantı butonunun altına, onunla aynı sol hizaya yerleştirilir
     (dikey konumu main.js ölçer). */
  .hero__ui { justify-content: flex-start; right: var(--pad-x); }
  .hero__nav { gap: 6px; }
  .hero__btn { width: 29px; height: 29px; }
  .hero__btn svg { width: 9px; height: 9px; }
  .hero-slide .btn { padding: 9px 17px; font-size: 10px; gap: 7px; }
  .hero-slide .btn svg { width: 8px; height: 8px; }
  /* Bölüm dolguları masaüstünde ekran yüksekliğine bağlı (12vh); küçük
     ekranlarda bu gereğinden geniş aralıklar üretiyordu. */
  .section { padding: clamp(56px, 7vh, 88px) var(--pad-x); }
  .closing-cta { padding: clamp(64px, 9vh, 110px) var(--pad-x); }
  .page-hero { padding: calc(var(--header-h) + clamp(32px, 5vh, 60px)) var(--pad-x) clamp(36px, 5vh, 60px); }
  .hscroll__head { padding: clamp(48px, 6vh, 80px) var(--pad-x) 0; }
  /* Referans kartları: bölüm kaydırmada ekrana sabitlendiği için kart,
     görselin başladığı 298px'ten sonra kalan yüksekliğe sığacak kadar
     büyütüldü (tablette ~%80). */
  .hscroll--refs .hcard { width: clamp(420px, 75vw, 600px); }
  /* Kart yazıları hero paragrafıyla aynı ölçüde. Büyüyen metin bloğu
     kadar görsel yüksekliğinden düşüldü ki kart sabitlenmiş görünümde
     ekrana sığmaya devam etsin. */
  .hscroll--refs .hcard__media { height: clamp(400px, 55vh, 580px); }
  .hscroll--refs .hcard__name,
  .hscroll--refs .hcard__sub { font-size: clamp(20px, 3.4vw, 28px); }
  .hscroll--refs .hcard__idx { font-size: clamp(20px, 2.6vw, 22px); }
  .hscroll--refs .hcard__sub { line-height: 1.35; margin-top: 6px; }
  .hscroll--refs .hcard__meta { margin-top: 10px; }
  .hreveal__mobile { padding: 1vh var(--pad-x) 5vh; }

  .about__grid, .partnership__grid, .contact__grid { grid-template-columns: 1fr; }
  .stats { grid-template-columns: repeat(2, 1fr); gap: 18px; }
  .values__grid { grid-template-columns: repeat(2, 1fr); }
  .cat { grid-template-columns: 1fr; gap: 22px; padding: clamp(30px, 4vh, 48px) 0; }
  /* Footer menü ve logo gizlenir; yalnızca telif satırı kalır */
  .footer__grid { display: none; }
  .site-footer { padding-top: 48px; }
  /* Footer burada çok daha kısa; bant da orantılı olarak inceltilir */
  .site-footer::after { height: 34px; }
}

@media (max-width: 640px) {
  .collections__grid, .ref-grid { grid-template-columns: 1fr; }
  /* Telefonda kart genişliği ekranla sınırlı; yükseklik ~%35 büyütüldü */
  .hscroll--refs .hcard { width: min(360px, calc(100vw - 2 * var(--pad-x))); }
  .hscroll--refs .hcard__media { height: clamp(330px, 46vh, 420px); }
  /* Yazı büyütmesi yalnızca tablette; telefonda özgün ölçüler korunur */
  .hscroll--refs .hcard__name { font-size: 14px; }
  .hscroll--refs .hcard__idx { font-size: 12px; }
  .hscroll--refs .hcard__sub { font-size: 13px; }
  .form { grid-template-columns: 1fr; }
  .col-card { height: 68vh; }
  /* Telefonda dikey alan daha dar; görsel buna göre sınırlanır */
  .hero-slide__media img { max-height: min(27vh, 100%); }
  /* Paragraf telefonda mevcut boyutunda kalır (büyütme yalnızca tablette) */
  .hero-slide__text { font-size: 18px; }

  /* Sayaçlar (tek satır düzeni tablet bloğundan gelir) */
  .stats { gap: 16px; }
  .stat { padding: 20px 0; }
  .stat__num { font-size: clamp(2.1rem, 9vw, 3rem); }
  .stat__label { font-size: 10px; letter-spacing: .12em; }

  /* Neden Ferlina — 2x2; kutular içeriğe göre daralır */
  .value {
    min-height: 0;
    padding: 22px 16px;
    justify-content: flex-start;
  }
  .value h4 { font-size: 14px; margin: 14px 0 10px; }
  .value p { font-size: 13px; line-height: 1.5; }

  /* İletişim — form, bilgi listesinin üstüne alınır (başlık yerinde kalır) */
  .contact__intro { display: contents; }
  .form { order: 2; }
  .contact__info { order: 3; }
}

/* Tablette hiçbir yazı 20px'in altına inmez. Yalnızca bu sınırın altındaki
   kalemler listelenir; daha büyük olanlar (kart başlıkları gibi) dokunulmaz.
   min-width sınırı, telefondaki ölçülerin korunmasını sağlar. */
@media (min-width: 641px) and (max-width: 1024px) and (min-height: 521px) {
  .eyebrow,
  .hcard__tag,
  .col-card__cat,
  .col-card__link,
  .col-card__text,
  .cat__label,
  .cat__desc,
  .cat__items li,
  .stat__label,
  .value__idx,
  .value h4,
  .value p,
  .breadcrumb,
  .breadcrumb a,
  .footer__bottom,
  .footer__col h5,
  .footer__col a,
  .overlay-menu__group h5,
  .contact__row,
  .contact__row dt,
  .contact__row a,
  .form__field label,
  .form__field input,
  .form__field select,
  .form__field textarea,
  .form__success p,
  .hreveal__name-btn,
  .about__body,
  .closing-cta p,
  .partnership__sub,
  .partnership__list li,
  details.Accordion summary,
  .btn,
  /* Daha özgül kurallarla tanımlananlar */
  .hreveal__group .hcard__tag,
  .partnership__list li span,
  details.Accordion .Accordion__body,
  .main-nav a,
  .nav-dropdown__trigger,
  .nav-dropdown__menu a,
  .page-hero__intro,
  .stat__num sup {
    font-size: 20px;
  }
}

/* Yan çevrilmiş tablet ve büyük telefonlar (yükseklik 520px'in üstünde, bu
   yüzden aşağıdaki kısa ekran bloğuna girmiyorlar). Dikey akış geniş-alçak
   ekrana sığmadığı için burada da hero iki sütuna döner; ölçüler ise
   ekrandan bağımsız clamp ile verilir ki 1024x768'de de okunur kalsın. */
@media (max-width: 1024px) and (orientation: landscape) and (min-height: 521px) {
  .hero-slide {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: none;
    gap: 0 4vw;
    align-items: center;
    padding-bottom: 10vh;
  }
  /* display:contents yerine sütun: order değerleri geçerli kalır, böylece
     bağlantı butonu burada da paragrafın üstünde durur. */
  .hero-slide__content { display: flex; flex-direction: column; align-items: flex-start; }
  /* Tablet bloğundan gelen 20px'lik üst etiket yarım sütuna sığmayıp iki
     satıra düşüyordu. */
  .hero-slide .eyebrow { font-size: 12px; letter-spacing: .28em; }
  .hero-slide__title {
    font-size: clamp(26px, 4.4vw, 44px);
    line-height: 1.1;
    text-align: left;
    margin: 6px 0 10px;
  }
  .hero-slide__text { font-size: clamp(14px, 1.7vw, 17px); max-width: 42ch; }
  .hero-slide__media { align-self: stretch; height: 100%; min-height: 0; }
  .hero-slide__media img {
    width: auto;
    max-width: 100%;
    max-height: min(58vh, 100%);
    object-fit: contain;
  }
  .hero-slide .btn { height: 38px; padding: 0 22px; font-size: 10px; gap: 9px; }
  .hero-slide .btn svg { width: 12px; height: 12px; }
}

/* Yan çevrilmiş telefon: genişlik bol ama yükseklik çok kısıtlı. Dikey akış
   buraya sığmadığı için hero iki sütuna döner ve ölçüler yüksekliğe bağlanır. */
@media (max-width: 1024px) and (max-height: 520px) {
  /* Yatayda dikey alan kısıtlı: logo ve header küçülür, hiza korunur */
  :root { --header-h: 68px; }
  .site-header { padding-top: 10px; }
  .brand__logo { height: 46px; }
  .hero { min-height: 0; }
  .hero-slide {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: none;
    gap: 0 4vw;
    align-items: center;
    padding-bottom: 9vh;
  }
  /* Sütun akışı: order değerleri geçerli kalsın diye flex (display:block
     olsaydı buton yine paragrafın altına düşerdi). */
  .hero-slide__content { display: flex; flex-direction: column; align-items: flex-start; }
  /* 3.9vw: en uzun satır ("Projeden Gerçeğe,") sütuna sığar; 4.2vw'de
     2px taşıp ikiye bölünüyor ve 4. başlık 3 satır oluyordu. */
  .hero-slide__title { font-size: 3.9vw; line-height: 1.1; text-align: left; margin: 6px 0 8px; }
  .hero-slide__text { font-size: 13px; max-width: 40ch; }
  .hero-slide__media { align-self: stretch; height: 100%; min-height: 0; }
  .hero-slide__media img {
    width: auto;
    max-width: 100%;
    max-height: min(56vh, 100%);
    object-fit: contain;
  }
  .hero-slide .btn { padding: 10px 20px; font-size: 9.5px; gap: 9px; }
  .hero-slide .btn svg { width: 12px; height: 12px; }
  .hero__ui { bottom: 3vh; }

  /* Sabitlenen referans kartı kısa ekrana sığacak ölçüye iner */
  .hscroll--refs .hcard { width: min(320px, 42vw); }
  .hscroll--refs .hcard__media { height: 35vh; }
  /* Kart yazıları tablet ölçüsünde kalırsa (28px) dar karta sığmıyor */
  .hscroll--refs .hcard__name { font-size: 13px; }
  .hscroll--refs .hcard__idx { font-size: 11px; }
  .hscroll--refs .hcard__sub { font-size: 12px; line-height: 1.4; margin-top: 5px; }
  .hscroll--refs .hcard__meta { margin-top: 8px; }
  .hscroll__head { padding: 5vh var(--pad-x) 0; }
  .hscroll__viewport { padding: 3vh 0 5vh; }
  .section { padding: 6vh var(--pad-x); }
  .stat__num { font-size: 2rem; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; }
}

/* Hata ayıklama / animasyonsuz mod (?noanim) */
html.no-anim .hero { height: 760px; min-height: 0; }
html.no-anim .swiper-slide-active .hero-slide__content > *,
html.no-anim .swiper-slide-active .hero-slide__media img { opacity: 1; transform: none; transition: none; }