/* =========================================================
   MASAL / Buhar Atölyesi
   Tipografi:
     Display → Fraunces (başlık)
     Body    → Figtree (paragraf / UI)
     Label   → IBM Plex Mono (esik / meta)
   ========================================================= */

/* latin-ext iki kademe. Google'ın latin-ext dosyaları Vietnamca'dan Afrika
   Latincesi'ne kadar bu sitede hiç geçmeyen alfabeleri taşıyor; Fraunces'ta
   bu 103 KB demek, dört eksenli değişken bir yazı tipinde her glif dört
   eksenlik delta taşıyor. Oysa Türkçe metnin buradan istediği harfler:
   Ğ ğ İ Ş ş (ı hariç — ı latin paketinde).

   Her aile için iki dosya tanıtılıyor: dokunulmamış orijinal ve yalnızca
   Türkçe (+ Š Ž Ÿ ₺) taşıyan dar kopya. İki unicode-range hiç çakışmıyor
   dar kümedeki kod noktaları geniş aralıktan tek tek çıkarıldı. Çakışma
   olmayınca seçim sıralamaya kalmıyor: tarayıcı Ğ/ş/₺ için dar dosyayı,
   yalnızca Türkçe dışı bir Latin harfi (ā, ć, ř, ų …) geçerse orijinali
   indiriyor.

   U+0131 (ı) latin @font-face'te: latin-ext kaynakta yok; dar alt kopyada
   da üretilemez. U+0130 (İ) dar dosyada kalır.

   Sonuç: hiçbir glif kaybolmuyor, Türkçe sayfada 128 KB boşuna inmiyor.
   Dar dosyaları tools/font-alt-kume.sh üretir; oradaki BIRIMLER listesi ile
   buradaki iki aralık birbirine bağlıdır. */
@font-face {
  font-family: "Masal Display";
  src: url("../assets/fonts/fraunces-variable-latin-ext.woff2") format("woff2");
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  unicode-range: U+0100-011D, U+0120-012F, U+0132-015D, U+0162-0177, U+0179-017C, U+017F-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20B9, U+20BB-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: "Masal Display";
  src: url("../assets/fonts/alt/fraunces-variable-latin-ext.woff2?v=2") format("woff2");
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  unicode-range: U+011E-011F, U+0130, U+015E-015F, U+0160-0161, U+0178, U+017D-017E, U+0327-0328, U+20BA;
}

/* Dosya tools/font-latin-kume.sh ile alt kümelenmiştir: ASCII'nin tamamı +
   Türkçe + sitede geçen simgeler (118 KB → 87 KB). unicode-range bu alt küme
   ile birebir aynı olmalı; script'i çalıştırınca ikisini birlikte güncelleyin.
   Türkçe'de kullanılmayan aksanlı Latin-1 harfleri (à é ñ ø þ ð …) artık bu
   dosyada yok, aralık dışında bırakıldı; geçerlerse "Masal Display Yedek"
   devreye giriyor. Eksenler (opsz, wght, SOFT, WONK) korundu. */
@font-face {
  font-family: "Masal Display";
  src: url("../assets/fonts/fraunces-variable-latin.woff2?v=2") format("woff2");
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  unicode-range: U+0020-007E, U+00A9, U+00B0, U+00B7, U+00C2, U+00C7, U+00CE, U+00D6-00D7, U+00DB-00DC, U+00E2, U+00E7, U+00EE, U+00F6, U+00FB-00FC, U+0131, U+2013-2014, U+2018-2019, U+201C-201D, U+2022, U+2026, U+2032-2033, U+2039-203A, U+20AC, U+2122;
}

@font-face {
  font-family: "Masal Sans";
  src: url("../assets/fonts/figtree-variable-latin-ext.woff2") format("woff2");
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  unicode-range: U+0100-011D, U+0120-012F, U+0132-015D, U+0162-0177, U+0179-017C, U+017F-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20B9, U+20BB-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: "Masal Sans";
  src: url("../assets/fonts/alt/figtree-variable-latin-ext.woff2?v=2") format("woff2");
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  unicode-range: U+011E-011F, U+0130, U+015E-015F, U+0160-0161, U+0178, U+017D-017E, U+0327-0328, U+20BA;
}

@font-face {
  font-family: "Masal Sans";
  src: url("../assets/fonts/figtree-variable-latin.woff2") format("woff2");
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Masal Mono";
  src: url("../assets/fonts/ibm-plex-mono-500-latin-ext.woff2") format("woff2");
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  unicode-range: U+0100-011D, U+0120-012F, U+0132-015D, U+0162-0177, U+0179-017C, U+017F-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20B9, U+20BB-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: "Masal Mono";
  src: url("../assets/fonts/alt/ibm-plex-mono-500-latin-ext.woff2?v=2") format("woff2");
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  unicode-range: U+011E-011F, U+0130, U+015E-015F, U+0160-0161, U+0178, U+017D-017E, U+0327-0328, U+20BA;
}

@font-face {
  font-family: "Masal Mono";
  src: url("../assets/fonts/ibm-plex-mono-500-latin.woff2") format("woff2");
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Masal Mono";
  src: url("../assets/fonts/ibm-plex-mono-600-latin-ext.woff2") format("woff2");
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  unicode-range: U+0100-011D, U+0120-012F, U+0132-015D, U+0162-0177, U+0179-017C, U+017F-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20B9, U+20BB-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: "Masal Mono";
  src: url("../assets/fonts/alt/ibm-plex-mono-600-latin-ext.woff2?v=2") format("woff2");
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  unicode-range: U+011E-011F, U+0130, U+015E-015F, U+0160-0161, U+0178, U+017D-017E, U+0327-0328, U+20BA;
}

@font-face {
  font-family: "Masal Mono";
  src: url("../assets/fonts/ibm-plex-mono-600-latin.woff2") format("woff2");
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Masal Mono";
  src: url("../assets/fonts/ibm-plex-mono-700-latin-ext.woff2") format("woff2");
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  unicode-range: U+0100-011D, U+0120-012F, U+0132-015D, U+0162-0177, U+0179-017C, U+017F-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20B9, U+20BB-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: "Masal Mono";
  src: url("../assets/fonts/alt/ibm-plex-mono-700-latin-ext.woff2?v=2") format("woff2");
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  unicode-range: U+011E-011F, U+0130, U+015E-015F, U+0160-0161, U+0178, U+017D-017E, U+0327-0328, U+20BA;
}

@font-face {
  font-family: "Masal Mono";
  src: url("../assets/fonts/ibm-plex-mono-700-latin.woff2") format("woff2");
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Büyük imza satırları / statement face, geometric sans */
@font-face {
  font-family: "Masal Statement";
  src: url("../assets/fonts/manrope-variable-latin-ext.woff2") format("woff2");
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  unicode-range: U+0100-011D, U+0120-012F, U+0132-015D, U+0162-0177, U+0179-017C, U+017F-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20B9, U+20BB-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: "Masal Statement";
  src: url("../assets/fonts/alt/manrope-variable-latin-ext.woff2?v=2") format("woff2");
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  unicode-range: U+011E-011F, U+0130, U+015E-015F, U+0160-0161, U+0178, U+017D-017E, U+0327-0328, U+20BA;
}

@font-face {
  font-family: "Masal Statement";
  src: url("../assets/fonts/manrope-variable-latin.woff2") format("woff2");
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}


/* ----- Ölçüsü eşlenmiş yedek yazı tipleri -----
   font-display:swap ile metin önce sistem yazı tipiyle çiziliyor, gerçek
   dosya inince yeniden. İki yazı tipinin ölçüleri tutmadığı için o an satırlar
   kayıyordu, sayfanın "uygulama değil site" gibi hissettiren en belirgin anı.

   Aşağıdaki yedekler yerel bir yazı tipini alıp gerçek dosyanın ölçülerine
   büyütüyor: size-adjust ortalama karakter genişliğini, ascent/descent
   satır kutusunu eşitliyor. Değerler gerçek dosyalardan hesaplandı
   (ortalama ilerleme genişliği oranı; overrides o orana bölünür).

   Yerel yazı tipi bulunamazsa (Android'de Georgia yok) bu yüz kullanılamaz
   ve tarayıcı listedeki bir sonraki aileye geçer, bugünkü davranış. */
@font-face {
  font-family: "Masal Display Yedek";
  src: local("Georgia"), local("Times New Roman"), local("Times");
  size-adjust: 115.65%;
  ascent-override: 84.57%;
  descent-override: 22.05%;
  line-gap-override: 0%;
}

@font-face {
  font-family: "Masal Sans Yedek";
  src: local("Helvetica Neue"), local("Arial"), local("Roboto");
  size-adjust: 98.59%;
  ascent-override: 96.36%;
  descent-override: 25.36%;
  line-gap-override: 0%;
}

@font-face {
  font-family: "Masal Mono Yedek";
  src: local("Courier New"), local("Menlo"), local("Roboto Mono");
  size-adjust: 99.98%;
  ascent-override: 102.52%;
  descent-override: 27.50%;
  line-gap-override: 0%;
}

:root {
  --ink: #071b22;
  --ink-2: #0b313c;
  --petrol: #0b4050;
  /* ---- Temizlik psikolojisi üçlüsü ----
     Renkler süs değil, sinyal: su/hijyen, tazelik, arınmışlık.
     --aqua  : su ve güven — birincil vurgu (bağlantı, ikon, çizgi, hâle)
     --fresh : tazelik ve doğallık — sonuç işaretleri ("sonrası", metrikler)
     --linen : ferah beyaz-mavi — açık yüzeyler, sessiz zeminler
     Her tonun koyu zemin / açık zemin karşılığı ayrı; ikisi de WCAG AA. */
  --aqua: #5B9BC4;
  --aqua-deep: #1D5D80;
  --fresh: #8CBFA9;
  --fresh-deep: #2F6B55;
  --linen: #E9F0F4;
  /* Eski adlar birincil tona bağlı: sitedeki 130+ kullanım olduğu gibi kalıyor. */
  --steam: var(--aqua);
  --steam-dark: var(--aqua-deep);
  --mist: var(--linen);
  --porcelain: #f7f3eb;
  --paper: #fcfcf9;
  --white: #fff;
  --text: #122c34;
  --muted: #5c7076;
  --line: rgba(7, 27, 34, .14);
  --line-light: rgba(255, 255, 255, .18);
  --wa: #25c86a;
  --wa-dark: #159953;
  --warm: #e9936d;
  --pad: clamp(1.15rem, 4vw, 3.5rem);
  --max: 1280px;
  --radius: clamp(1.1rem, 2vw, 1.8rem);
  --ease: cubic-bezier(.22, .75, .18, 1);

  /* Font aileleri */
  --font-display: "Masal Display", "Masal Display Yedek", "Iowan Old Style", "Palatino Linotype", Georgia, "Times New Roman", serif;
  --font-body: "Masal Sans", "Masal Sans Yedek", "Figtree", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-label: "Masal Mono", "Masal Mono Yedek", "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --font-statement: "Masal Statement", "Manrope", var(--font-body);
  --display: var(--font-display);
  --sans: var(--font-body);
  --mono: var(--font-label);

  /* Boyut ölçeği */
  --text-display-xl: clamp(3.15rem, 6.4vw, 6.5rem);
  --text-display-lg: clamp(2.45rem, 4.5vw, 4.35rem);
  --text-display-md: clamp(1.85rem, 3.1vw, 2.7rem);
  --text-display-sm: clamp(1.35rem, 2.2vw, 1.85rem);
  --text-lead: clamp(1.1rem, 1.4vw, 1.25rem);
  --text-body: 1.0625rem;
  --text-body-sm: .9375rem;
  --text-ui: .9375rem;
  --text-label: .6875rem;
  --text-label-xs: max(.625rem, 10.5px);

  /* Satır / densite */
  --lh-display: .98;
  --lh-display-tight: .94;
  --lh-lead: 1.58;
  --lh-body: 1.72;
  --lh-ui: 1.45;
  --lh-label: 1.4;

  /* Ağırlık */
  --fw-display: 580;
  --fw-display-soft: 480;
  --fw-lead: 450;
  --fw-body: 440;
  --fw-ui: 620;
  --fw-label: 600;

  /* Tracking */
  --track-display: -.032em;
  --track-display-tight: -.04em;
  --track-lead: -.005em;
  --track-body: 0;
  --track-label: .06em;

  /* Fraunces variation */
  --soft-display: "SOFT" 40, "WONK" 0;
  --soft-display-soft: "SOFT" 72, "WONK" 0.35;
}

*,
*::before,
*::after {
  box-sizing: border-box
}

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
  background: var(--ink)
}

/* Dokunmatikte programatik smooth scroll ana iş parçacığını
   kilitler; doğal kaydırma zaten 60 fps. */
@media (pointer:coarse) {
  html {
    scroll-behavior: auto
  }
}

body {
  margin: 0;
  min-width: 320px;
  color: var(--text);
  background: var(--paper);
  font-family: var(--font-body);
  font-size: var(--text-body);
  font-weight: var(--fw-body);
  line-height: var(--lh-body);
  letter-spacing: var(--track-body);
  font-optical-sizing: auto;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
}

@media (pointer:coarse) {
  body {
    text-rendering: optimizeSpeed
  }
}

body::selection {
  background: var(--steam);
  color: var(--ink)
}

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

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

button,
input,
select,
textarea {
  font: inherit;
  color: inherit
}

button {
  touch-action: manipulation
}

:focus-visible {
  outline: 2px solid var(--steam);
  outline-offset: 4px
}

section[id] {
  scroll-margin-top: 84px
}
h1,
h2,
h3,
.h1,
.h2,
.h3 {
  font-family: var(--font-display);
  font-weight: var(--fw-display);
  line-height: var(--lh-display);
  letter-spacing: var(--track-display);
  text-wrap: balance;
  font-variation-settings: var(--soft-display);
  color: inherit;
}

h1,
.h1 {
  margin: 0;
  font-size: var(--text-display-xl);
  line-height: var(--lh-display-tight);
  letter-spacing: var(--track-display-tight);
  font-weight: 590;
}

h2,
.h2 {
  margin: 0;
  font-size: var(--text-display-lg);
  font-weight: var(--fw-display);
}

h3,
.h3 {
  margin: 0;
  font-size: var(--text-display-md);
  font-weight: 560;
  line-height: 1.08;
  letter-spacing: -.028em;
}
.lead {
  margin: 0;
  max-width: 46ch;
  color: var(--muted);
  font-family: var(--font-body);
  font-size: var(--text-lead);
  font-weight: var(--fw-lead);
  line-height: var(--lh-lead);
  letter-spacing: var(--track-lead);
  text-wrap: pretty;
}
.esik,
.meta{
  margin: 0 0 1rem;
  color: var(--steam-dark);
  font-family: var(--font-label);
  font-size: var(--text-label);
  font-weight: var(--fw-label);
  line-height: var(--lh-label);
  letter-spacing: var(--track-label);
  text-transform: uppercase;
}

.esik {
  display: flex;
  align-items: center;
  gap: .55rem;
}

.esik::before {
  display: none
}

.esik__mark {
  width: 1.05em;
  height: 1.05em;
  flex-shrink: 0;
  object-fit: contain;
  opacity: .95;
}

.brand-mark {
  display: block;
  width: auto;
  height: clamp(1.75rem, 2.6vw, 2.2rem);
  max-width: 10.5rem;
  object-fit: contain;
  object-position: left center;
}

.brand-mark--cta {
  height: clamp(1.9rem, 3vw, 2.45rem);
  max-width: 11.5rem;
  margin: 0 0 1rem;
  opacity: .96;
}

.contact .brand-mark {
  margin: 0 0 1.15rem;
  height: clamp(2rem, 3.2vw, 2.55rem);
  max-width: 12rem;
}

.ftr__copy {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  margin: .45rem 0 0;
  max-width: none;
  color: rgba(255, 255, 255, .48);
  font-size: .78rem;
}

.ftr__copy img {
  width: .95rem;
  height: .95rem;
  flex-shrink: 0;
  object-fit: contain;
  opacity: .75;
}

.lb__brand {
  position: absolute;
  left: 1rem;
  bottom: 1rem;
  z-index: 2;
  width: 2rem;
  height: 2rem;
  opacity: .42;
  pointer-events: none;
  object-fit: contain;
}

.ix-cta .brand-mark--cta {
  margin-bottom: .85rem
}

.skip {
  position: fixed;
  left: -9999px;
  top: .75rem;
  z-index: 1000;
  padding: .75rem 1rem;
  background: var(--paper);
  color: var(--ink);
  border-radius: 999px;
}

.skip:focus {
  left: .75rem
}

/* Okuyucuya açık, göze kapalı (stroke wordmark SEO kopyası vb.) */
.visually-hidden {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

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

.sec {
  padding-block: clamp(5.5rem, 10vw, 9rem)
}

.sec--tight {
  padding-block: clamp(3rem, 6vw, 5rem)
}

.sec--soft {
  background: var(--mist)
}

.h2 em {
  color: inherit;
  font-family: inherit;
  font-style: normal;
  font-weight: inherit;
  letter-spacing: inherit;
  font-variation-settings: inherit;
}

.section-head,
.gallery__head {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(260px, .65fr);
  align-items: end;
  gap: clamp(2rem, 7vw, 7rem);
  margin-bottom: clamp(2.5rem, 5vw, 4.5rem);
}

.section-head>.lead,
.gallery__head>div:last-child {
  justify-self: end
}

.sec__head {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 2rem;
  margin-bottom: clamp(2rem, 4vw, 3.5rem);
}

/* Motion is progressive enhancement. */
.motion-ready [data-reveal] {
  opacity: 0;
  transform: translate3d(0, 16px, 0);
  transition: opacity .62s var(--ease), transform .62s var(--ease)
}

.motion-ready [data-reveal="sol"] {
  transform: translate3d(-28px, 0, 0)
}

.motion-ready [data-reveal="sag"] {
  transform: translate3d(28px, 0, 0)
}

.motion-ready [data-reveal].is-visible {
  opacity: 1;
  transform: none
}

/* ---------- buttons & links ---------- */
/* Minimal iletişim ikonları, monochrome, currentColor */
.ico {
  display: inline-block;
  flex-shrink: 0;
  width: 1.2em;
  height: 1.2em;
  overflow: visible;
  vertical-align: middle;
}

.btn .ico {
  width: 1.2em;
  height: 1.2em;
  margin-right: .3em;
}

.btn--lg .ico {
  width: 1.3em;
  height: 1.3em;
}

.cta-band__tel .ico,
.ftr__tel .ico {
  width: 1.2em;
  height: 1.2em;
}

.hdr__tel .ico {
  width: 32px;
  height: 32px;
}

.text-link .ico,
.hero__link .ico {
  width: 1.1em;
  height: 1.1em;
}

.ftr nav a[data-ig] {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
}

.ftr nav a[data-ig] .ico {
  width: 1.2em;
  height: 1.2em;
  color: #fd5949;
  opacity: 1;
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .55rem;
  min-height: 48px;
  padding: .85rem 1.35rem;
  border: 1px solid transparent;
  border-radius: 999px;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: .9rem;
  letter-spacing: -.01em;
  white-space: nowrap;
  cursor: pointer;
  transition: transform .28s var(--ease), background-color .28s, color .28s, border-color .28s, box-shadow .28s;
}

.btn:hover {
  transform: translateY(-1px)
}

.btn--lg {
  min-height: 58px;
  padding: 1rem 1.55rem;
  font-size: 1rem
}

.btn--sm {
  min-height: 42px;
  padding: .65rem 1.05rem;
  font-size: .82rem
}

.btn--full {
  width: 100%
}

/* Satış CTA: marka yeşili yok, ink monochrome, ikon + metin */
.btn--wa {
  background: var(--ink);
  color: var(--paper);
  box-shadow: 0 14px 36px -24px rgba(7, 27, 34, .55)
}

.btn--wa:hover {
  background: var(--ink-2);
  color: var(--paper);
  box-shadow: 0 18px 40px -22px rgba(7, 27, 34, .5)
}

.btn--ghost {
  border-color: var(--line);
  background: transparent;
  color: var(--ink)
}

.btn--ghost:hover {
  border-color: var(--ink)
}

.btn--light {
  background: var(--paper);
  color: var(--ink)
}

/* Telefon CTA: WhatsApp ile aynı hiyerarşide, numara net okunur */
.btn--tel {
  background: var(--paper);
  color: var(--ink);
  border-color: rgba(7, 27, 34, .16);
  box-shadow: none;
  font-variant-numeric: tabular-nums;
  letter-spacing: .01em;
}

.btn--tel:hover {
  border-color: rgba(18, 120, 111, .45);
  color: var(--steam-dark);
  background: var(--porcelain);
}

.btn--tel .ico {
  opacity: 1;
  flex-shrink: 0;
  color: inherit;
}

.btn--tel__no {
  font-family: var(--mono);
  font-size: .94em;
  font-weight: 700;
  letter-spacing: .035em;
}

.btn--tel__hint {
  font-size: .78em;
  font-weight: 650;
  opacity: .58;
  letter-spacing: 0;
}

@media (min-width:520px) {
  .btn--tel__hint::after {
    content: " · ";
    opacity: .5
  }
}

/* Dar ekran: «Ara» etiketi gizlenir, numara + ikon kalır */
@media (max-width:419px) {
  .btn--tel__hint {
    display: none
  }
}

.text-link,
.hero__link {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  width: max-content;
  border-bottom: 1px solid currentColor;
  padding-bottom: .22rem;
  font-size: .87rem;
  font-weight: 800;
  transition: gap .25s var(--ease), color .25s;
}

.text-link:hover,
.hero__link:hover {
  gap: .75rem;
  color: var(--steam-dark)
}

.text-link--light {
  color: var(--paper)
}

/* ---------- header ---------- */
.hdr {
  position: fixed;
  inset: 0 0 auto;
  z-index: 100;
  color: var(--paper);
  background: linear-gradient(180deg, rgba(3, 14, 18, .66), transparent);
  border-bottom: 1px solid transparent;
  transition: background-color .32s, color .32s, border-color .32s, box-shadow .32s;
}

.hdr.is-stuck {
  color: var(--ink);
  background: rgba(247, 243, 235, .92);
  border-bottom-color: var(--line);
  box-shadow: 0 18px 40px -34px rgba(7, 27, 34, .55);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

.hdr__in {
  width: 100%;
  max-width: var(--max);
  margin-inline: auto;
  padding: .82rem var(--pad);
  display: flex;
  align-items: center;
  gap: clamp(.7rem, 2vw, 1.5rem);
}

.mark {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
  margin-right: auto;
  line-height: 0;
}

.mark__lockup {
  position: relative;
  display: grid;
  grid-template-areas: "logo";
  align-items: center;
}

.mark__lockup--icon {
  display: none
}

.mark__logo {
  grid-area: logo;
  display: block;
  width: auto;
  height: clamp(2.05rem, 2.55vw, 2.55rem);
  max-width: min(46vw, 11.5rem);
  object-fit: contain;
  object-position: left center;
  pointer-events: none;
  user-select: none;
  transition: opacity .28s ease;
}

.mark__lockup--icon .mark__logo {
  height: clamp(2rem, 5.5vw, 2.35rem);
  max-width: 2.35rem;
  aspect-ratio: 1;
}

.mark__logo--dark {
  opacity: 0
}

.mark__logo--light {
  opacity: 1
}

.hdr.is-stuck .mark__logo--dark {
  opacity: 1
}

.hdr.is-stuck .mark__logo--light {
  opacity: 0
}

.mark--ftr {
  display: inline-block;
  margin: 0 0 .75rem;
}

.mark--ftr .mark__logo {
  height: clamp(2.35rem, 3.6vw, 3.05rem);
  max-width: min(72vw, 14rem);
  opacity: 1;
}

.mark__name {
  color: currentColor;
  font-family: var(--font-display);
  font-size: 1.65rem;
  font-weight: 600;
  letter-spacing: -.04em;
  font-variation-settings: var(--soft-display);
}

.mark__name span {
  color: var(--steam)
}

.mark__sub {
  margin-top: .28rem;
  color: currentColor;
  opacity: .68;
  font-family: var(--font-label);
  font-size: var(--text-label-xs);
  font-weight: var(--fw-label);
  letter-spacing: .12em;
  text-transform: uppercase;
  line-height: 1.2;
}

.nav {
  display: flex;
  align-items: center;
  gap: clamp(1rem, 2vw, 1.7rem);
  margin-left: auto;
  font-family: var(--font-body);
  font-size: var(--text-ui);
  font-weight: var(--fw-ui);
  letter-spacing: -.01em
}

.nav a {
  position: relative;
  white-space: nowrap;
  opacity: .74;
  transition: opacity .2s
}

.nav a::after {
  content: "";
  position: absolute;
  inset: auto 0 -.45rem;
  height: 1px;
  background: var(--steam);
  transform: scaleX(0);
  transform-origin: right;
  transition: transform .3s var(--ease)
}

.nav a:hover,
.nav a[aria-current="page"] {
  opacity: 1
}

.nav a:hover::after,
.nav a[aria-current="page"]::after {
  transform: scaleX(1);
  transform-origin: left
}

.hdr__act {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  gap: .65rem
}

/* Başlıktaki telefon: yerel bir hizmette numara ikinci sınıf bir detay değil.
   Kutu/buton değil, iki satırlık tipografik künye — üstte ne yapacağını söyleyen
   küçük etiket, altta iri ve tabular rakamlar. Renk tek: metin başlığın rengini
   devralır, vurgu yalnızca ikonda. */
.hdr__tel {
  display: inline-flex;
  align-items: center;
  gap: .65rem;
  color: inherit;
  opacity: 1;
}

.hdr__tel__txt {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: .1rem;
  line-height: 1;
}

.hdr__tel__label {
  font-family: var(--font-label);
  font-size: .5625rem;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .62);
  transition: color .32s;
}

.hdr__tel__no {
  font-family: var(--mono);
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: .005em;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.hdr.is-stuck .hdr__tel__label {
  color: var(--muted);
}

/* Tek renkli metnin yanında ikon vurguyu taşıyor. */
.hdr__tel .ico {
  width: 32px;
  height: 32px;
  min-width: 32px;
  padding: 6.5px;
  border-radius: 999px;
  background: rgba(91, 155, 196, .18);
  color: var(--aqua-deep);
  border: 1px solid rgba(91, 155, 196, .3);
  box-sizing: border-box;
  transition: transform .22s var(--ease), background .22s, color .22s, box-shadow .22s;
}

.hdr:not(.is-stuck) .hdr__tel .ico {
  background: rgba(255, 255, 255, .15);
  color: #fff;
  border-color: rgba(255, 255, 255, .28);
}

.hdr.is-stuck .hdr__tel .ico {
  background: rgba(91, 155, 196, .16);
  color: var(--aqua-deep);
  border-color: rgba(91, 155, 196, .3);
}

.hdr__tel:hover .ico {
  transform: scale(1.1);
  background: var(--aqua-deep);
  color: #fff;
  border-color: var(--aqua-deep);
  box-shadow: 0 4px 14px rgba(29, 93, 128, .3);
}

.hdr:not(.is-stuck) .hdr__tel:hover .ico {
  background: #fff;
  color: var(--ink);
  border-color: #fff;
  box-shadow: 0 4px 14px rgba(0, 0, 0, .25);
}

.hdr__tel:hover .hdr__tel__no {
  text-decoration: underline;
  text-underline-offset: .22em;
  text-decoration-thickness: 1px;
}

.burger {
  display: none;
  position: relative;
  width: 44px;
  height: 44px;
  border: 1px solid currentColor;
  border-radius: 999px;
  color: inherit;
  background: transparent;
  cursor: pointer;
}

.burger span {
  position: absolute;
  left: 12px;
  width: 18px;
  height: 1px;
  background: currentColor;
  transition: transform .25s var(--ease)
}

.burger span:first-child {
  top: 17px
}

.burger span:last-child {
  top: 24px
}

.burger[aria-expanded="true"] span:first-child {
  transform: translateY(3.5px) rotate(45deg)
}

.burger[aria-expanded="true"] span:last-child {
  transform: translateY(-3.5px) rotate(-45deg)
}

/* ---------- hero ---------- */
.hero {
  position: relative;
  min-height: 100svh;
  overflow: hidden;
  color: var(--paper);
  background: var(--ink);
}

.hero::before {
  display: none;
}

.hero__in {
  position: relative;
  z-index: 1;
  min-height: 100svh;
  padding-top: clamp(7.2rem, 12vh, 9.2rem);
  padding-bottom: clamp(5.5rem, 9vh, 7rem);
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: center;
}

.hero__yazi {
  position: relative;
  z-index: 4
}

.hero__loc {
  display: flex;
  align-items: center;
  gap: .65rem;
  margin: 0 0 1.25rem;
  color: rgba(255, 255, 255, .58);
  font-family: var(--mono);
  font-size: .69rem;
  font-weight: 700;
  letter-spacing: .13em;
  text-transform: uppercase
}

.hero__loc span {
  color: var(--steam)
}

.hero__title {
  margin: 0;
  color: var(--paper);
  font-family: var(--display);
  font-size: clamp(3.6rem, 5.35vw, 5.5rem);
  font-weight: 620;
  line-height: .94;
  letter-spacing: -.042em;
  text-wrap: balance;
  font-variation-settings: "SOFT" 52, "WONK" 0;
  position: relative;
}

/* Hero marka adı: düz, logoya yakın geometrik display sans */
.hero__wordmark {
  display: block;
  margin: 0 0 .02em;
  font-family: var(--font-statement), "Manrope", system-ui, sans-serif;
  font-weight: 750;
  font-size: 1.12em;
  line-height: .86;
  letter-spacing: -.045em;
  text-transform: uppercase;
  color: var(--paper);
}

.hero__title em {
  display: block;
  margin-top: .14em;
  max-width: 18ch;
  color: var(--steam);
  font-family: var(--display);
  font-style: normal;
  font-size: .68em;
  font-weight: 430;
  line-height: 1.05;
  letter-spacing: -.028em;
  white-space: normal;
  text-wrap: balance;
  font-variation-settings: "SOFT" 82, "WONK" 1;
}

.hero__lead {
  margin: 1.6rem 0 0;
  max-width: 54ch;
  color: rgba(255, 255, 255, .68);
  font-size: clamp(.98rem, 1.3vw, 1.12rem);
  line-height: 1.65
}

/* Hero satış yüzeyi: iki birincil eylem yan yana, gözden kaybolmayan numara */
.hero__cta {
  display: flex;
  align-items: stretch;
  flex-wrap: wrap;
  gap: .7rem .8rem;
  margin-top: 2.15rem;
}

.hero__cta .btn--wa,
.hero__cta .btn--tel {
  min-height: 3.5rem;
  padding: .9rem 1.35rem;
  font-size: 1rem;
  flex: 1 1 12rem;
}

.hero__cta .btn--wa {
  background: var(--paper);
  color: var(--ink);
  box-shadow: none;
}

.hero__cta .btn--wa:hover {
  background: #fff;
  color: var(--ink);
}

.hero__cta .btn--tel {
  background: rgba(255, 255, 255, .07);
  color: var(--paper);
  border-color: rgba(255, 255, 255, .32);
  box-shadow: none;
}

.hero__cta .btn--tel:hover {
  background: rgba(255, 255, 255, .12);
  border-color: rgba(91, 155, 196, .55);
  color: #fff;
}

.hero__cta .btn--tel__hint {
  color: rgba(255, 255, 255, .68);
  opacity: 1
}

.hero__cta .hero__link,
.hero__cta>.text-link {
  flex: 1 1 100%;
  margin-top: .2rem;
  color: rgba(255, 255, 255, .78);
  font-size: .88rem;
  font-weight: 650;
}

.hero__cta .hero__link:hover,
.hero__cta>.text-link:hover {
  color: var(--steam)
}

.hero__link {
  color: rgba(255, 255, 255, .84)
}

@keyframes scrollLine {

  50%,
  100% {
    transform: translateX(100%)
  }
}

/* ---------- kesintisiz hizmet bandı ---------- */
.ticker {
  --ticker-gap: clamp(1rem, 2vw, 1.75rem);
  position: relative;
  isolation: isolate;
  overflow: hidden;
  border-block: 1px solid rgba(255, 255, 255, .14);
  background: linear-gradient(90deg, #082a34, var(--ink-2) 48%, #082a34);
  color: var(--paper)
}

.ticker::before,
.ticker::after {
  content: "";
  position: absolute;
  z-index: 2;
  inset: 0 auto 0 0;
  width: clamp(1.5rem, 7vw, 6rem);
  background: linear-gradient(90deg, #082a34, transparent);
  pointer-events: none
}

.ticker::after {
  inset: 0 0 0 auto;
  background: linear-gradient(270deg, #082a34, transparent)
}

.ticker__track {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  width: max-content;
  padding: 0;
  animation: ticker 42s linear infinite;
  /* will-change yalniz hareket sirasinda; surekli katman GPU belleğini tutardi. */
  will-change: transform;
}

.ticker__group {
  display: flex;
  flex: 0 0 auto;
  min-width: 100vw;
  align-items: center;
  justify-content: space-around;
  gap: var(--ticker-gap);
  padding: .9rem var(--ticker-gap) .9rem 0
}

.ticker span {
  color: rgba(255, 255, 255, .86);
  font-family: var(--sans);
  font-size: clamp(.68rem, .74vw, .78rem);
  font-weight: 720;
  letter-spacing: .075em;
  text-transform: uppercase;
  white-space: nowrap
}

.ticker i {
  flex: 0 0 auto;
  width: 5px;
  height: 5px;
  border-radius: 1px;
  background: var(--steam);
  box-shadow: 0 0 0 5px rgba(91, 155, 196, .07);
  transform: rotate(45deg)
}

.ticker:hover .ticker__track,
.ticker:focus-visible .ticker__track {
  animation-play-state: paused
}

.ticker:focus-visible {
  outline: 2px solid var(--steam);
  outline-offset: -2px
}

@keyframes ticker {
  to {
    transform: translate3d(-50%, 0, 0)
  }
}

/* ---------- proof / before-after ---------- */
.proof {
  position: relative;
  background: var(--porcelain);
  overflow: hidden
}

.proof::after {
  display: none
}

.proof__head {
  position: relative;
  z-index: 1;
  margin-bottom: clamp(2.5rem, 5vw, 5rem)
}

.proof__head .lead {
  margin-top: 1.5rem
}

.proof__grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(280px, .52fr);
  align-items: center;
  gap: clamp(2rem, 7vw, 7rem)
}

.ba {
  position: relative
}

.ba__stage {
  position: relative;
  overflow: hidden;
  aspect-ratio: 3/4;
  max-height: 760px;
  border-radius: var(--radius);
  background: #cbd8d6;
  cursor: ew-resize;
  touch-action: pan-y;
  box-shadow: 0 42px 90px -52px rgba(7, 27, 34, .55);
}

.ba__stage.is-hidden,
.ba__stage[hidden] {
  display: none
}

.ba__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  user-select: none;
  -webkit-user-drag: none
}

.ba__clip {
  position: absolute;
  inset: 0;
  clip-path: inset(0 50% 0 0)
}

.ba__tag {
  position: absolute;
  top: 1rem;
  z-index: 2;
  padding: .48rem .7rem;
  border: 1px solid rgba(255, 255, 255, .24);
  border-radius: 999px;
  color: #fff;
  background: rgba(7, 27, 34, .66);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  font-family: var(--mono);
  font-size: .58rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.ba__tag--a {
  left: 1rem
}

/* "Sonrası" etiketi ikincil tonda: sonucu işaret eden tek yer burası. */
.ba__tag--b {
  right: 1rem;
  color: var(--fresh);
  border-color: rgba(140, 191, 169, .5)
}

.ba__handle {
  position: absolute;
  inset: 0 auto 0 50%;
  z-index: 3;
  width: 2px;
  margin-left: -1px;
  background: #fff;
  cursor: ew-resize;
  touch-action: none
}

.ba__grip {
  position: absolute;
  left: 50%;
  top: 50%;
  translate: -50% -50%;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .55rem;
  color: var(--ink);
  background: var(--paper);
  box-shadow: 0 18px 34px -16px rgba(0, 0, 0, .55);
  font-size: .85rem;
}

.ba__grip svg {
  width: 24px;
  height: 24px
}

.proof__note {
  position: relative;
  padding-top: 0
}

.proof__no {
  display: none
}

.proof__note>p {
  position: relative;
  margin: 0 0 2.2rem;
  max-width: 31ch;
  font-family: var(--display);
  font-size: clamp(1.45rem, 2.4vw, 2.2rem);
  font-weight: 600;
  line-height: 1.12;
  letter-spacing: -.045em
}

.proof__note ul {
  margin: 0 0 2rem;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--line)
}

.proof__note li {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding: 1rem 0;
  border-bottom: 1px solid var(--line);
  font-size: .78rem
}

.proof__note li span {
  color: var(--muted);
  font-family: var(--mono);
  font-size: .62rem;
  letter-spacing: .08em;
  text-transform: uppercase
}

.proof__note li strong {
  text-align: right;
  color: var(--fresh-deep)
}

/* ---------- services ---------- */
.services {
  background: var(--mist)
}

.svc {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(340px, .75fr);
  grid-template-rows: repeat(2, minmax(280px, 1fr));
  gap: 1rem
}

.svc__item {
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--paper)
}

.svc__item--main {
  grid-row: 1/3;
  display: grid;
  grid-template-rows: minmax(470px, 1fr) auto
}

.svc__item:not(.svc__item--main) {
  display: grid;
  grid-template-columns: minmax(150px, .85fr) minmax(190px, 1.15fr)
}

.svc figure {
  position: relative;
  min-height: 0;
  margin: 0;
  overflow: hidden;
  background: #cbd8d6
}

.svc figure::after {
  content: "";
  position: absolute;
  inset: 45% 0 0;
  background: linear-gradient(transparent, rgba(7, 27, 34, .42));
  pointer-events: none
}

.svc img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .75s var(--ease)
}

.svc__item--main img {
  object-position: 50% 50%
}

.svc__item:nth-child(2) img {
  object-position: 50% 48%
}

.svc__item:nth-child(3) img {
  object-position: 50% 52%
}

.svc__item:hover img {
  transform: scale(1.025)
}

.svc__no {
  position: absolute;
  z-index: 1;
  left: 1rem;
  top: 1rem;
  color: #fff;
  font-family: var(--mono);
  font-size: .62rem;
  letter-spacing: .08em
}

.svc__body {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  padding: clamp(1.25rem, 2.5vw, 2rem)
}

.svc__body>div {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: end;
  gap: 1rem
}

.svc__body>div p {
  margin: 0 0 .45rem;
  color: var(--steam-dark);
  font-family: var(--mono);
  font-size: .58rem;
  font-weight: 700;
  letter-spacing: .09em;
  text-transform: uppercase
}

.svc__body h3 {
  margin: 0;
  color: var(--ink);
  font-family: var(--display);
  font-size: clamp(1.65rem, 2.6vw, 2.8rem);
  line-height: .95;
  letter-spacing: -.05em
}

.svc__body>span {
  margin-top: .65rem;
  color: var(--muted);
  font-family: var(--mono);
  font-size: .58rem;
  letter-spacing: .08em;
  text-transform: uppercase
}

.svc__body>p {
  margin: 1rem 0;
  color: var(--muted);
  font-size: .86rem;
  line-height: 1.55
}

.svc__body .text-link {
  margin-top: auto;
  font-size: .76rem
}

.services__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
  margin-top: 1.5rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--line)
}

.services__foot p {
  margin: 0;
  max-width: 56ch;
  color: var(--muted);
  font-size: .86rem
}

/* ---------- editorial gallery ---------- */
.gallery {
  background: var(--ink);
  color: var(--paper);
  padding-bottom: clamp(3.5rem, 7vw, 5.5rem)
}

.gallery .esik {
  color: var(--steam)
}

.gallery .h2 {
  color: var(--paper)
}

.gallery .h2 em {
  color: var(--steam)
}

.gallery .lead {
  margin-bottom: 1.2rem;
  color: rgba(255, 255, 255, .6)
}

.isgrid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  grid-auto-rows: 8px;
  grid-auto-flow: dense;
  gap: clamp(.65rem, 1.2vw, 1rem);
}

.isgrid__it {
  --focus: 50% 50%;
  --ratio: .75;
  grid-column: span 4;
  align-self: start;
  position: relative;
  display: block;
  width: 100%;
  margin: 0;
  padding: 0;
  aspect-ratio: var(--ratio);
  overflow: hidden;
  border: 0;
  border-radius: clamp(.8rem, 1.5vw, 1.35rem);
  color: #fff;
  background: var(--ink-2);
  cursor: zoom-in;
  isolation: isolate;
}

.isgrid__it--wide {
  grid-column: span 8
}

.isgrid__it--square {
  grid-column: span 4
}

.isgrid__it img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: var(--focus);
  transition: transform .8s var(--ease), filter .5s
}

.isgrid__it::after {
  content: "";
  position: absolute;
  inset: 38% 0 0;
  z-index: 1;
  background: linear-gradient(transparent, rgba(3, 15, 18, .76));
  pointer-events: none
}

.isgrid__meta {
  position: absolute;
  inset: auto 1rem .9rem;
  z-index: 2;
  display: flex;
  justify-content: space-between;
  align-items: end;
  gap: 1rem;
  text-align: left;
  pointer-events: none
}

.isgrid__meta span {
  display: flex;
  flex-direction: column
}

.isgrid__meta small {
  color: rgba(255, 255, 255, .62);
  font-family: var(--mono);
  font-size: .53rem;
  letter-spacing: .09em;
  text-transform: uppercase
}

.isgrid__meta b {
  font-family: var(--display);
  font-size: clamp(1rem, 1.6vw, 1.35rem);
  letter-spacing: -.035em
}

.isgrid__meta i {
  font-style: normal;
  font-family: var(--mono);
  font-size: .58rem;
  color: rgba(255, 255, 255, .68)
}

.isgrid__it:hover img {
  transform: none;
  filter: none
}

.isgrid__it:focus-visible {
  outline-color: var(--steam)
}

/* ---------- video rail ---------- */
.process {
  overflow: hidden;
  background: var(--porcelain)
}

.process .h2 {
  font-size: clamp(2.6rem, 5vw, 5rem)
}

.slider__nav {
  display: flex;
  gap: .55rem
}

.slider__btn {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border: 1px solid var(--line);
  border-radius: 50%;
  color: var(--ink);
  background: transparent;
  font-size: 1rem;
  cursor: pointer;
  transition: background .2s, color .2s, transform .2s;
}

.slider__btn:hover {
  color: var(--paper);
  background: var(--ink);
  transform: translateY(-2px)
}

.vrail {
  display: flex;
  gap: clamp(.9rem, 1.6vw, 1.2rem);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  padding: 0 max(var(--pad), calc((100vw - var(--max))/2 + var(--pad))) 1.3rem;
  -webkit-overflow-scrolling: touch;
}

.vrail::-webkit-scrollbar {
  display: none
}

.vrail__it {
  flex: 0 0 clamp(228px, 24vw, 320px);
  position: relative;
  aspect-ratio: 9/16;
  overflow: hidden;
  padding: 0;
  border: 1px solid rgba(7, 27, 34, .1);
  border-radius: calc(var(--radius) + 2px);
  background: var(--ink-2);
  cursor: zoom-in;
  scroll-snap-align: start;
  isolation: isolate;
  box-shadow: 0 12px 30px rgba(7, 27, 34, .09);
}

.vrail__it video,
.vrail__it img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 50%;
}

.vrail__it::after {
  content: "";
  position: absolute;
  inset: 36% 0 0;
  background: linear-gradient(transparent, rgba(3, 15, 18, .52) 44%, rgba(3, 15, 18, .92));
  pointer-events: none
}

.vrail__play {
  position: absolute;
  z-index: 2;
  right: .85rem;
  top: .85rem;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border: 1px solid rgba(255, 255, 255, .42);
  border-radius: 50%;
  color: #fff;
  background: rgba(7, 27, 34, .4);
  backdrop-filter: blur(8px);
  font-size: .68rem;
  pointer-events: none
}

.vrail__meta {
  position: absolute;
  z-index: 2;
  inset: auto .95rem .95rem;
  display: flex;
  flex-direction: column;
  gap: .22rem;
  align-items: flex-start;
  color: #fff;
  text-align: left;
  pointer-events: none;
  max-width: calc(100% - 1.9rem)
}

.vrail__meta small {
  font-family: var(--mono);
  font-size: .58rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  opacity: .78
}

.vrail__meta b {
  font-family: var(--display);
  font-size: 1.14rem;
  line-height: 1.12;
  letter-spacing: -.03em;
  font-weight: 600;
  text-wrap: balance
}

.process__foot {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  margin-top: 1.35rem;
  padding-bottom: .45rem;
  color: var(--muted);
  font-family: var(--mono);
  font-size: .61rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  position: relative;
  z-index: 7
}

.process__foot p {
  margin: 0
}

/* ---------- SEO rehber merkezi ---------- */
.seo-hub {
  position: relative;
  overflow: hidden;
  background: var(--paper);
  border-block: 1px solid var(--line);
}

.seo-hub::before {
  content: "";
  position: absolute;
  width: min(46vw, 38rem);
  aspect-ratio: 1;
  right: -18rem;
  top: -20rem;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(91, 155, 196, .14), transparent 68%);
  pointer-events: none;
}

.seo-hub .wrap {
  position: relative;
  z-index: 1
}

.seo-hub .sec__head>div {
  max-width: 58rem
}

.seo-hub .lead {
  margin-top: 1.25rem
}

.seo-hub__grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(.75rem, 1.4vw, 1.15rem);
}

.seo-hub__card {
  position: relative;
  display: flex;
  min-width: 0;
  min-height: clamp(15rem, 22vw, 18rem);
  flex-direction: column;
  padding: clamp(1.3rem, 2.2vw, 1.8rem);
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  color: var(--ink);
  background: var(--porcelain);
  box-shadow: 0 22px 50px -44px rgba(7, 27, 34, .7);
  transition: transform .25s var(--ease), border-color .25s, box-shadow .25s, background-color .25s;
}

.seo-hub__card::after {
  content: "↗";
  position: absolute;
  right: 1.25rem;
  top: 1.15rem;
  color: var(--steam-dark);
  font-size: 1rem;
  transition: transform .25s var(--ease);
}

.seo-hub__card>span {
  padding-right: 2rem;
  color: var(--steam-dark);
  font-family: var(--font-label);
  font-size: var(--text-label-xs);
  font-weight: var(--fw-label);
  line-height: var(--lh-label);
  letter-spacing: var(--track-label);
  text-transform: uppercase;
}

.seo-hub__card h3 {
  margin-top: auto;
  padding-top: 2.5rem;
  max-width: 13ch;
  color: var(--ink);
  font-family: var(--font-display);
  font-size: clamp(1.4rem, 2vw, 1.9rem);
  font-weight: 570;
  line-height: 1.02;
  letter-spacing: -.035em;
  text-wrap: balance;
  font-variation-settings: var(--soft-display);
}

.seo-hub__card p {
  margin: .85rem 0 0;
  color: var(--muted);
  font-size: .86rem;
  line-height: 1.55;
  text-wrap: pretty;
}

.seo-hub__card:hover {
  transform: translateY(-4px);
  border-color: rgba(18, 120, 111, .48);
  background: var(--white);
  box-shadow: 0 28px 58px -40px rgba(7, 27, 34, .72);
}

.seo-hub__card:hover::after {
  transform: translate3d(2px, -2px, 0)
}

.seo-hub__card:focus-visible {
  outline: 3px solid var(--steam-dark);
  outline-offset: 3px;
  border-color: var(--steam-dark);
}

/* ---------- why ---------- */
.why {
  background: var(--paper)
}

.neden {
  display: grid;
  grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr);
  gap: clamp(3rem, 8vw, 8rem);
  align-items: start
}

.why__intro {
  position: sticky;
  top: 7rem
}

.why__intro .h2 {
  font-size: clamp(2.7rem, 5.6vw, 5.5rem)
}

.why__intro .lead {
  margin-top: 1.5rem
}

.instagram {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 1rem;
  margin-top: 2.2rem;
  padding: 1rem 1.1rem;
  border: 1px solid var(--line);
  border-radius: 1rem;
  background: var(--porcelain);
  transition: transform .25s, border-color .25s;
}

.instagram:hover {
  transform: translateY(-2px);
  border-color: var(--steam-dark)
}

.instagram__icon {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  color: var(--paper);
  background: var(--ink);
  font-size: 1.35rem
}

.instagram span:nth-child(2) {
  display: flex;
  min-width: 0;
  flex-direction: column;
  line-height: 1.35
}

.instagram small {
  color: var(--muted);
  font-family: var(--mono);
  font-size: .54rem;
  letter-spacing: .08em;
  text-transform: uppercase
}

.instagram strong {
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: .77rem
}

.instagram i {
  font-style: normal
}

.neden__list {
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--line)
}

.neden__list li {
  display: grid;
  grid-template-columns: 3rem 1fr;
  gap: 1.3rem;
  padding: 1.7rem 0;
  border-bottom: 1px solid var(--line)
}

.neden__list>li>span {
  padding-top: .2rem;
  color: var(--steam-dark);
  font-family: var(--mono);
  font-size: .62rem;
  letter-spacing: .08em
}

.neden__list strong {
  display: block;
  color: var(--ink);
  font-family: var(--display);
  font-size: clamp(1.25rem, 2vw, 1.75rem);
  line-height: 1;
  letter-spacing: -.035em
}

.neden__list p {
  margin: .55rem 0 0;
  max-width: 46ch;
  color: var(--muted);
  font-size: .9rem
}

/* ---------- CTA ---------- */
.cta-band {
  position: relative;
  overflow: hidden;
  padding-block: clamp(5rem, 9vw, 8rem);
  color: var(--paper);
  background: var(--petrol)
}

.cta-band::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(115deg, rgba(7, 27, 34, .64), transparent 70%)
}

.cta-band__orb {
  position: absolute;
  left: 50%;
  top: 50%;
  width: min(70vw, 760px);
  aspect-ratio: 1;
  border: 1px solid rgba(255, 255, 255, .08);
  border-radius: 50%;
  translate: -50% -50%
}

.cta-band__orb::before,
.cta-band__orb::after {
  content: "";
  position: absolute;
  border: 1px solid rgba(255, 255, 255, .08);
  border-radius: 50%
}

.cta-band__orb::before {
  inset: 12%
}

.cta-band__orb::after {
  inset: 25%
}

.cta-band__in {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) auto;
  align-items: end;
  gap: clamp(2rem, 7vw, 7rem)
}

.cta-band__copy {
  max-width: 820px
}

.cta-band .esik {
  color: var(--steam)
}

.cta-band h2 {
  margin: 0;
  color: var(--paper);
  font-family: var(--display);
  font-size: clamp(3rem, 5.6vw, 5.8rem);
  line-height: .94;
  letter-spacing: -.045em
}

.cta-band h2 em {
  color: var(--steam);
  font-family: var(--display);
  font-style: normal;
  font-weight: 430;
  font-variation-settings: "SOFT" 82, "WONK" 1
}

.cta-band__copy>p:not(.esik) {
  margin: 1.5rem 0 0;
  max-width: 54ch;
  color: rgba(255, 255, 255, .68);
  font-size: 1rem
}

.cta-band__act {
  display: flex;
  align-items: flex-end;
  justify-content: flex-end;
  flex-direction: column;
  gap: 1rem
}

.cta-band__tel {
  display: inline-flex;
  align-items: center;
  gap: .65rem;
  padding: .5rem .95rem;
  border-radius: .85rem;
  background: rgba(255, 255, 255, .08);
  border: 1px solid rgba(255, 255, 255, .15);
  font-family: var(--mono);
  font-size: .84rem;
  font-weight: 700;
  letter-spacing: .04em;
  color: #fff;
  transition: transform .2s var(--ease), background .2s, border-color .2s;
}

.cta-band__tel:hover {
  background: rgba(255, 255, 255, .16);
  border-color: rgba(255, 255, 255, .35);
  transform: translateY(-1px);
}

.cta-band__tel .ico {
  width: 24px;
  height: 24px;
  min-width: 24px;
  padding: 4px;
  border-radius: 6px;
  background: rgba(255, 255, 255, .14);
  color: var(--steam);
  box-sizing: border-box;
}

/* ---------- contact ---------- */
.contact {
  background: var(--mist)
}

.ilt {
  display: grid;
  grid-template-columns: minmax(0, .9fr) minmax(400px, 1.05fr);
  gap: clamp(2.5rem, 6vw, 6.5rem);
  align-items: stretch
}

.ilt .h2 {
  font-size: clamp(2.8rem, 5.8vw, 5.7rem)
}

.ilt .lead {
  margin-top: 1.4rem
}

/* Sağ kolon: editöryal aile fotoğrafı + form (sol metni kaplamaz) */
.ilt__panel {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-height: min(42rem, 88vh);
  height: 100%;
  border-radius: clamp(1.15rem, 2.2vw, 1.6rem);
  /* Kırpma .ilt__atmos'a taşındı: panel overflow:hidden iken mahalle
     önerileri panelin dışına açılamıyor, listenin altı kesiliyordu. */
  isolation: isolate;
  background: #1a2a30;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, .4) inset,
    0 36px 72px -48px rgba(7, 27, 34, .5);
}

.ilt__atmos {
  position: absolute;
  inset: 0;
  z-index: 0;
  border-radius: inherit;
  overflow: hidden;
  pointer-events: none;
}

.ilt__atmos img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 52% 22%;
  transform: scale(1.03);
  /* Hafif netlik: görsel okunsun, form alanı okunaklı kalsın */
  filter: saturate(1.04) contrast(1.02);
}

.ilt__atmos::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg,
      rgba(7, 27, 34, .08) 0%,
      rgba(7, 27, 34, .02) 32%,
      rgba(7, 27, 34, .28) 55%,
      rgba(7, 27, 34, .72) 78%,
      rgba(7, 27, 34, .88) 100%);
}

.ilt__atmos-note {
  position: relative;
  z-index: 1;
  margin: 0 0 .5rem;
  padding: 0 1.25rem;
  color: rgba(255, 255, 255, .82);
  font-family: var(--mono);
  font-size: .58rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  text-shadow: 0 1px 12px rgba(7, 27, 34, .4);
}

.form--panel {
  position: relative;
  z-index: 1;
  margin: 0 .9rem .9rem;
  width: auto;
  max-width: none;
  background: rgba(252, 252, 249, .96);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: 0 22px 48px -34px rgba(7, 27, 34, .55);
}

/* Tıklanabilir iletişim kanalları, sürtünmesiz, satış öncelikli */
.ilt__kanallar {
  display: flex;
  flex-direction: column;
  gap: .65rem;
  margin: 2rem 0 0;
}

.kanal {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 1rem;
  padding: .95rem 1.15rem;
  border: 1px solid rgba(7, 27, 34, .12);
  border-radius: 1.15rem;
  background: var(--paper);
  color: var(--ink);
  box-shadow: 0 4px 16px -8px rgba(7, 27, 34, .12);
  transition: border-color .22s, transform .22s, background-color .22s, box-shadow .22s;
}

.kanal:hover {
  border-color: var(--ink);
  transform: translateY(-2px);
  box-shadow: 0 12px 28px -10px rgba(7, 27, 34, .32);
}

.kanal:focus-visible {
  outline: 2px solid var(--steam-dark);
  outline-offset: 2px;
}

/* Kanal ikon kutuları: belirgin, renkli ve yüksek kaliteli */
.kanal > .ico {
  width: 44px;
  height: 44px;
  min-width: 44px;
  padding: 9.5px;
  border-radius: 12px;
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: transform .22s var(--ease), box-shadow .22s;
}

.kanal:hover > .ico {
  transform: scale(1.08);
}

/* WhatsApp Kanalı */
.kanal[data-wa] > .ico {
  background: rgba(37, 211, 102, .14);
  color: #159953;
  border: 1px solid rgba(37, 211, 102, .26);
}

.kanal--ana {
  border-color: var(--ink);
  background: var(--ink);
  color: var(--paper);
  box-shadow: 0 16px 36px -26px rgba(7, 27, 34, .55);
}

.kanal--ana:hover {
  background: var(--ink-2);
  border-color: var(--ink-2);
  color: var(--paper);
}

.kanal--ana[data-wa] > .ico {
  background: linear-gradient(135deg, #25D366 0%, #128C7E 100%);
  color: #fff;
  border: 1px solid rgba(255, 255, 255, .28);
  box-shadow: 0 4px 14px rgba(37, 211, 102, .38);
}

/* Telefon Kanalı */
.kanal[data-tel] > .ico {
  background: linear-gradient(135deg, rgba(14, 59, 72, .12) 0%, rgba(7, 27, 34, .06) 100%);
  color: var(--ink);
  border: 1px solid rgba(7, 27, 34, .14);
}

/* Instagram Kanalı */
.kanal[data-ig] > .ico {
  background: radial-gradient(circle at 30% 107%, rgba(253, 244, 151, .32) 0%, rgba(253, 89, 73, .26) 45%, rgba(214, 36, 159, .26) 60%, rgba(40, 90, 235, .26) 90%);
  color: #d6249f;
  border: 1px solid rgba(214, 36, 159, .32);
}

.kanal__body {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: .2rem;
  line-height: 1.25;
}

.kanal__body small {
  color: var(--muted);
  font-family: var(--mono);
  font-size: .58rem;
  font-weight: 700;
  letter-spacing: .09em;
  text-transform: uppercase;
}

.kanal__body strong {
  font-size: .96rem;
  font-weight: 750;
  letter-spacing: -.02em;
}

.kanal__ok {
  color: var(--muted);
  font-size: 1.15rem;
  line-height: 1;
  transition: transform .22s var(--ease), color .22s;
}

.kanal:hover .kanal__ok {
  color: var(--ink);
  transform: translateX(4px);
}

.kanal--ana .kanal__body small {
  color: rgba(255, 255, 255, .62);
}

.kanal--ana .kanal__ok {
  color: rgba(255, 255, 255, .6);
}

.kanal--ana:hover .kanal__ok {
  color: var(--paper);
}

/* İletişim Meta: Saat / Randevu ve Adres / Bölge Kartları */
.ilt__meta {
  display: flex;
  flex-direction: column;
  gap: .65rem;
  margin: 1.35rem 0 0;
  padding: 0;
  list-style: none;
}

.ilt__meta li {
  display: flex;
  align-items: center;
  gap: .85rem;
  padding: .7rem .95rem;
  background: rgba(7, 27, 34, .03);
  border: 1px solid rgba(7, 27, 34, .08);
  border-radius: .85rem;
  color: var(--text);
  font-size: .84rem;
  line-height: 1.4;
}

.ilt__meta [data-ico] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  min-width: 36px;
  border-radius: 9px;
  flex-shrink: 0;
}

.ilt__meta [data-ico="clock"] {
  background: rgba(91, 155, 196, .16);
  color: var(--aqua-deep);
  border: 1px solid rgba(91, 155, 196, .28);
}

.ilt__meta [data-ico="pin"] {
  background: rgba(233, 147, 109, .18);
  color: #c45b2f;
  border: 1px solid rgba(233, 147, 109, .32);
}

.ilt__meta [data-ico] .ico {
  width: 20px;
  height: 20px;
  opacity: 1;
}

.ilt__meta b {
  font-weight: 750;
  color: var(--ink);
}

.ilt__meta a {
  font-weight: 750;
  color: var(--ink);
  text-decoration: underline;
  text-decoration-color: rgba(7, 27, 34, .25);
  text-underline-offset: .2em;
}

.ilt__meta a:hover {
  border-bottom-color: transparent;
  color: var(--steam-dark);
  text-decoration-color: var(--steam-dark);
}

/* Google yorum kartı — iletişimde ayrı, davetkar blok */
.g-review {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 1.15rem 1.25rem;
  align-items: start;
  margin-top: 1.75rem;
  padding: 1.35rem 1.35rem 1.4rem;
  border: 1px solid rgba(7, 27, 34, .1);
  border-radius: 1.35rem;
  background:
    radial-gradient(120% 90% at 0% 0%, rgba(66, 133, 244, .1), transparent 55%),
    radial-gradient(90% 80% at 100% 100%, rgba(52, 168, 83, .08), transparent 50%),
    linear-gradient(165deg, #fff 0%, var(--porcelain) 100%);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, .7) inset,
    0 22px 48px -36px rgba(7, 27, 34, .35);
}

.g-review__mark {
  display: grid;
  place-items: center;
  width: 3.35rem;
  height: 3.35rem;
  border-radius: 1rem;
  background: var(--paper);
  border: 1px solid rgba(7, 27, 34, .08);
  box-shadow: 0 10px 24px -18px rgba(7, 27, 34, .4);
}

.g-review__g {
  display: block
}

.g-review__body {
  min-width: 0
}

.g-review__eyebrow {
  margin: 0 0 .4rem;
  color: var(--muted);
  font-family: var(--mono);
  font-size: .54rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
}

.g-review__title {
  margin: 0;
  color: var(--ink);
  font-family: var(--font-display);
  font-size: clamp(1.2rem, 2.4vw, 1.45rem);
  font-weight: 650;
  letter-spacing: -.02em;
  line-height: 1.2;
}

.g-review__text {
  margin: .55rem 0 1.05rem;
  max-width: 34rem;
  color: var(--muted);
  font-size: .92rem;
  line-height: 1.55;
}

.g-review__btn {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  padding: .72rem 1.05rem .72rem .85rem;
  border-radius: 999px;
  background: var(--ink);
  color: var(--paper);
  font-size: .88rem;
  font-weight: 700;
  letter-spacing: -.01em;
  text-decoration: none;
  box-shadow: 0 14px 28px -18px rgba(7, 27, 34, .55);
  transition: background-color .2s, transform .2s, box-shadow .2s;
}

.g-review__btn:hover {
  background: var(--ink-2);
  transform: translateY(-1px);
  box-shadow: 0 18px 32px -18px rgba(7, 27, 34, .5);
}

.g-review__btn:focus-visible {
  outline: 2px solid var(--steam-dark);
  outline-offset: 3px;
}

.g-review__btn-ico {
  flex: 0 0 auto;
  display: block;
  padding: .22rem;
  border-radius: 999px;
  background: #fff;
}

.g-review__btn-ok {
  margin-left: .1rem;
  opacity: .7;
  transition: transform .2s, opacity .2s;
}

.g-review__btn:hover .g-review__btn-ok {
  opacity: 1;
  transform: translate(2px, -1px);
}

@media (max-width:520px) {
  .g-review {
    grid-template-columns: 1fr;
    gap: .9rem;
    padding: 1.15rem 1.1rem 1.2rem;
  }

  .g-review__mark {
    width: 2.9rem;
    height: 2.9rem
  }

  .g-review__btn {
    width: 100%;
    justify-content: center
  }
}

/* Geriye dönük .ilt__liste */
.ilt__liste {
  margin: 2.2rem 0 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--line)
}

.ilt__liste li {
  display: grid;
  grid-template-columns: 7rem 1fr;
  align-items: baseline;
  gap: 1rem;
  padding: 1rem 0;
  border-bottom: 1px solid var(--line)
}

.ilt__liste>li>span {
  color: var(--muted);
  font-family: var(--mono);
  font-size: .58rem;
  font-weight: 700;
  letter-spacing: .09em;
  text-transform: uppercase
}

.ilt__liste a,
.ilt__liste b {
  font-size: .84rem;
  font-weight: 700
}

.ilt__liste a:hover {
  color: var(--steam-dark)
}

.form {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
  padding: clamp(1.25rem, 3vw, 2rem);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--paper);
  box-shadow: 0 32px 70px -55px rgba(7, 27, 34, .5)
}

.fld {
  display: flex;
  flex-direction: column;
  gap: .42rem
}

.fld--full {
  grid-column: 1/-1
}

.fld label {
  display: flex;
  gap: .5rem;
  color: var(--muted);
  font-family: var(--mono);
  font-size: .58rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase
}

.opt {
  font-family: var(--sans);
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none
}

.fld input,
.fld textarea,
.fld select {
  width: 100%;
  border: 0;
  border-bottom: 1px solid var(--line);
  border-radius: 0;
  padding: .72rem 0;
  background: transparent;
  outline: 0;
  transition: border-color .2s
}

.fld textarea {
  resize: vertical;
  min-height: 92px
}

.fld input:focus,
.fld textarea:focus,
.fld select:focus {
  border-bottom-color: var(--steam-dark)
}

.fld.is-bad input,
.fld.is-bad select {
  border-bottom-color: #c43b3b
}

.sel {
  position: relative
}

/* ---------- mahalle önerileri (combobox) ----------
   Alan seçilen ilçeye bağlı; ilçe gelmeden kapalı duruyor, kapalıyken
   de kapalı göründüğü belli olsun diye soluk. Liste alanın üstüne
   biniyor: form panelin altına oturduğu için aşağı yer kalmayabiliyor,
   yön JS'te ölçülüp veriliyor. */
.cbx {
  position: relative
}

.cbx input:disabled {
  opacity: .5;
  cursor: not-allowed
}

.cbx__liste {
  position: absolute;
  z-index: 12;
  top: calc(100% + .35rem);
  left: 0;
  right: 0;
  margin: 0;
  padding: .3rem;
  max-height: min(15rem, 38vh);
  overflow-y: auto;
  overscroll-behavior: contain;
  list-style: none;
  border: 1px solid var(--line);
  border-radius: .85rem;
  background: var(--paper);
  box-shadow: 0 22px 44px -22px rgba(7, 27, 34, .45);
  -webkit-overflow-scrolling: touch;
}

.cbx__liste.is-yukari {
  top: auto;
  bottom: calc(100% + .35rem)
}

.cbx__op {
  padding: .58rem .65rem;
  border-radius: .55rem;
  color: var(--text);
  font-size: .92rem;
  line-height: 1.3;
  cursor: pointer;
}

.cbx__op b {
  color: var(--steam-dark);
  font-weight: 700
}

.cbx__op:hover,
.cbx__op.is-etkin {
  background: var(--linen)
}

.err {
  min-height: 1em;
  color: #c43b3b;
  font-size: .68rem
}

.form .btn {
  grid-column: 1/-1;
  margin-top: .35rem
}

.form__note {
  grid-column: 1/-1;
  margin: 0;
  color: var(--muted);
  font-size: .75rem
}

/* ---------- footer / mobile dock ---------- */
/* Alt dolgu yok: en alttaki künye bandı zemini sayfanın sonuna kadar
   taşıyor, dolgusunu da kendisi veriyor. */
.ftr {
  padding-block: clamp(3.5rem, 7vw, 5.5rem) 0;
  color: var(--paper);
  background: var(--ink)
}

.ftr__in {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr;
  gap: 2rem
}

.ftr .mark__name {
  display: block;
  margin-bottom: .65rem
}

.ftr p {
  margin: .35rem 0 0;
  max-width: 36ch;
  color: rgba(255, 255, 255, .48);
  font-size: .78rem
}

.ftr .mark+p {
  margin-top: .15rem
}

.ftr p.ftr__copy {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  max-width: none;
  margin-top: .45rem;
}

.ftr p.ftr__copy img {
  width: .95rem;
  height: .95rem;
  flex-shrink: 0;
  object-fit: contain;
  opacity: .75;
}

/* ---------- yapımcı künyesi ----------
   Sayfanın en altında, kenardan kenara uzanan kendi şeridi. Footer'ın alt
   dolgusu bu banda devredildi (.ftr alt dolgusu 0): band gerçekten sayfanın
   son pikseline kadar iniyor, altında boş mürekkep kalmıyor.

   Yazı ailesi bilinçli olarak mono. MASAL'ın sesi Fraunces; künyeyi de o
   ailede dizmek başka bir markayı MASAL'ın sesiyle konuşturmak olurdu.
   Mono, basılı bir kitabın arkasındaki dizgi künyesi gibi okunuyor: ayrı
   bir kimlik, ama sayfaya yabancı değil.

   Bağın metni marka adının kendisi — "Malatya web tasarım" gibi anahtar
   kelime yüklü bir çapa metni değil. Site geneline yayılan footer bağlarında
   Google'ın baktığı ayrım tam olarak budur: marka künyesi olağandır, kelime
   yüklü çapa metni manipülasyon sinyalidir. 36 sayfada tekrar ettiği için
   doğrusu bu. */
.ftr__yapim {
  margin-top: clamp(2.2rem, 4.5vw, 3.4rem);
  padding-block: clamp(1.35rem, 2.6vw, 1.9rem);
  border-top: 1px solid rgba(255, 255, 255, .1);
  background: rgba(0, 0, 0, .22);
}

.ftr__yapim__in {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .5rem;
  text-align: center;
}

.ftr p.ftr__yapim__etiket {
  margin: 0;
  max-width: none;
  font-family: var(--mono);
  font-size: .6rem;
  font-weight: 600;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .3);
}

.ftr p.ftr__yapim__ad {
  margin: 0;
  max-width: none;
  font-size: inherit;
}

.ftr__yapim__ad a {
  display: inline-block;
  padding-bottom: .22rem;
  font-family: var(--mono);
  font-size: clamp(1rem, 1.9vw, 1.22rem);
  font-weight: 700;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .84);
  text-decoration: none;
  border-bottom: 1px solid rgba(255, 255, 255, .24);
  transition: color .2s var(--ease), border-color .2s var(--ease);
}

.ftr__yapim__ad a:hover,
.ftr__yapim__ad a:focus-visible {
  color: var(--steam);
  border-bottom-color: var(--steam);
}

.ftr nav {
  display: flex;
  flex-direction: column;
  gap: .6rem;
  color: rgba(255, 255, 255, .7);
  font-size: .78rem;
  font-weight: 700
}

.ftr nav a:hover {
  color: var(--steam)
}

.ftr__tel {
  display: inline-flex;
  align-items: center;
  gap: .75rem;
  color: var(--paper);
  font-family: var(--display);
  font-size: clamp(1.2rem, 2vw, 1.45rem);
  font-weight: 700;
  letter-spacing: -.025em;
  margin-bottom: .45rem;
}

.ftr__tel .ico {
  width: 36px;
  height: 36px;
  min-width: 36px;
  padding: 7px;
  border-radius: 10px;
  background: rgba(255, 255, 255, .1);
  color: var(--steam);
  border: 1px solid rgba(255, 255, 255, .16);
  box-sizing: border-box;
  transition: transform .2s var(--ease), background .2s, color .2s;
}

.ftr__tel:hover .ico {
  transform: scale(1.08);
  background: var(--steam);
  color: var(--ink);
}

.ftr__tel:hover {
  color: var(--steam);
}

.ftr__nap {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .35rem .55rem;
  color: rgba(255, 255, 255, .6);
  font-size: .8rem;
  line-height: 1.6;
}

.ftr__nap a {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  color: rgba(255, 255, 255, .82);
}

.ftr__nap a .ico {
  width: 1.1em;
  height: 1.1em;
  color: var(--steam);
}

.ftr__nap a[data-ig] .ico {
  color: #fd5949;
}

/* ---------- hızlı iletişim (FAB / Floating Action Buttons) ----------
   Sağ alt köşede üç dikey eylem butonu:
   1. Instagram (Portfolyo / İşleri İncele)
   2. Telefon (Hızlı Arama)
   3. WhatsApp (Doğrudan Teklif / Mesaj - Başparmağa en yakın birincil eylem)
*/
.dock {
  position: fixed;
  z-index: 90;
  display: flex;
  right: max(1rem, env(safe-area-inset-right));
  bottom: calc(1rem + env(safe-area-inset-bottom));
  flex-direction: column;
  align-items: flex-end;
  gap: .65rem;
  /* Düğme aralığı tıklanabilir olmasın: altındaki içeriğe dokunuş geçsin. */
  pointer-events: none;
}

.dock__b {
  pointer-events: auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  position: relative;
  width: 52px;
  height: 52px;
  padding: 0;
  border-radius: 999px;
  box-shadow: 0 8px 24px -4px rgba(7, 27, 34, .35), 0 2px 8px -2px rgba(7, 27, 34, .12);
  transition: transform .22s var(--ease), background .22s, color .22s, box-shadow .22s, filter .22s;
  animation: dock-gir .35s var(--ease) backwards;
  user-select: none;
  -webkit-user-select: none;
}

@media (min-width: 768px) {
  .dock {
    right: max(1.35rem, env(safe-area-inset-right));
    bottom: calc(1.35rem + env(safe-area-inset-bottom));
    gap: .75rem;
  }
  .dock__b {
    width: 56px;
    height: 56px;
  }
}

.dock__b--ig {
  animation-delay: 0s;
}

.dock__b--tel {
  animation-delay: .06s;
}

.dock__b--wa {
  animation-delay: .12s;
}

@keyframes dock-gir {
  from {
    opacity: 0;
    transform: translateY(18px) scale(.82);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

.dock__b:hover {
  transform: translateY(-3px) scale(1.05);
}

.dock__b:active {
  transform: scale(.93);
}

.dock__b:focus-visible {
  outline: 2px solid var(--steam-dark);
  outline-offset: 3px;
}

/* 1. Instagram: Özel Marka Degradesi */
.dock__b--ig {
  background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285AEB 90%);
  color: #fff;
  border: 1.5px solid rgba(255, 255, 255, .32);
  box-shadow: 0 10px 24px -4px rgba(214, 36, 159, .4), 0 4px 10px -2px rgba(7, 27, 34, .16);
}

.dock__b--ig:hover {
  box-shadow: 0 14px 30px -4px rgba(214, 36, 159, .55), 0 6px 14px -2px rgba(7, 27, 34, .22);
}

/* 2. Telefon: Derin Petrol / Mürekkep Degradesi */
.dock__b--tel {
  background: linear-gradient(145deg, #0e3b48 0%, #071b22 100%);
  color: #fff;
  border: 1.5px solid rgba(255, 255, 255, .22);
  box-shadow: 0 10px 24px -4px rgba(7, 27, 34, .45), 0 4px 10px -2px rgba(7, 27, 34, .18);
}

.dock__b--tel:hover {
  background: linear-gradient(145deg, #134e60 0%, #09242d 100%);
  box-shadow: 0 14px 30px -4px rgba(7, 27, 34, .58), 0 6px 14px -2px rgba(7, 27, 34, .24);
}

/* 3. WhatsApp: Canlı Emerald Degrade (Birincil Eylem) */
.dock__b--wa {
  background: linear-gradient(145deg, #25D366 0%, #128C7E 100%);
  color: #fff;
  border: 1.5px solid rgba(255, 255, 255, .35);
  box-shadow: 0 10px 24px -4px rgba(37, 211, 102, .48), 0 4px 10px -2px rgba(7, 27, 34, .16);
}

.dock__b--wa:hover {
  background: linear-gradient(145deg, #2ae06d 0%, #159c8d 100%);
  box-shadow: 0 14px 30px -4px rgba(37, 211, 102, .62), 0 6px 14px -2px rgba(7, 27, 34, .22);
}

/* İkon boyutları */
.dock__b .ico {
  width: 25px;
  height: 25px;
  stroke-width: 1.8px;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, .2));
}

@media (min-width: 768px) {
  .dock__b .ico {
    width: 27px;
    height: 27px;
  }
}

/* Masaüstü hover tooltips */
@media (hover: hover) and (pointer: fine) {
  .dock__b[data-tip]::after {
    content: attr(data-tip);
    position: absolute;
    right: calc(100% + 11px);
    top: 50%;
    transform: translateY(-50%) translateX(6px);
    background: rgba(7, 27, 34, .92);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    color: #fff;
    font-family: var(--font-body);
    font-size: .8125rem;
    font-weight: 600;
    letter-spacing: -.01em;
    line-height: 1;
    padding: 7px 11px;
    border-radius: 7px;
    box-shadow: 0 6px 18px rgba(7, 27, 34, .3);
    border: 1px solid rgba(255, 255, 255, .15);
    white-space: nowrap;
    pointer-events: none;
    opacity: 0;
    visibility: hidden;
    transition: opacity .18s var(--ease), transform .18s var(--ease), visibility .18s;
  }
  .dock__b[data-tip]:hover::after {
    opacity: 1;
    visibility: visible;
    transform: translateY(-50%) translateX(0);
  }
}

/* Etiket ekrandan kalktı, erişilebilir ad olarak kaldı: düğme küçük
   kalsın diye, ekran okuyucu "WhatsApp" demeye devam etsin diye. */
.dock__t {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* FAB sayfanın son öğesini örtmesin: künye bandı kendi payını veriyor. */
.ftr__yapim {
  padding-bottom: calc(clamp(1.35rem, 2.6vw, 1.9rem) + 4.5rem)
}

/* ---------- lightbox ---------- */
.lb {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: grid;
  place-items: center;
  padding: clamp(.75rem, 3vw, 2rem);
  background: rgba(2, 10, 13, .94);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.lb[hidden] {
  display: none
}

.lb__stage {
  max-width: min(94vw, 1100px);
  max-height: 88svh
}

.lb__stage img,
.lb__stage video {
  max-width: 100%;
  max-height: 88svh;
  margin-inline: auto;
  border-radius: 1rem
}

.lb__x,
.lb__nav {
  position: absolute;
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border: 1px solid rgba(255, 255, 255, .22);
  border-radius: 50%;
  color: #fff;
  background: rgba(255, 255, 255, .08);
  font-size: 1.4rem;
  cursor: pointer
}

.lb__x {
  right: 1rem;
  top: 1rem
}

.lb__nav--p {
  left: 1rem;
  top: 50%;
  translate: 0 -50%
}

.lb__nav--n {
  right: 1rem;
  top: 50%;
  translate: 0 -50%
}

body.lb-open {
  overflow: hidden
}

/* ---------- responsive ---------- */
@media (max-width:420px) {
  .mark__lockup--full {
    display: none
  }

  .mark__lockup--icon {
    display: grid
  }
}

@media (max-width:1050px) {
  .nav {
    gap: 1rem
  }

  .hero__title {
    font-size: clamp(3.35rem, 5.6vw, 4.6rem)
  }

  .svc {
    grid-template-columns: 1fr 1fr
  }

  .svc__item--main {
    grid-column: 1/-1;
    grid-row: auto;
    grid-template-columns: 1.2fr .8fr;
    grid-template-rows: none;
    min-height: 480px
  }

  .svc__item:not(.svc__item--main) {
    display: flex;
    flex-direction: column
  }

  .svc__item:not(.svc__item--main) figure {
    aspect-ratio: 4/3
  }

  .why__intro {
    position: relative;
    top: auto
  }

  .seo-hub__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr))
  }
}

/* Geniş SEO menüsü hero üzerinde iki satıra düşmesin. Masaüstünde
   ana karar sayfaları görünür; SSS ve iletişim footer/mobil menüde kalır. */
@media (min-width:1181px) {

  .hdr .nav a[href="/sss"],
  .hdr .nav a[href="#iletisim"],
  .hdr .nav a[href="/#iletisim"] {
    display: none
  }
}

/* Numaranın görünürlüğü tek bir dar bantta feda ediliyor: 1181–1300 px'de
   tam menü + numara + buton aynı satırda sıkışıyor. 1180'in altında menü
   burger'a düştüğü için yer açılıyor ve numara geri geliyor — eskiden bu
   aralıkta da gizliydi, yani ziyaretçilerin çoğu numarayı hiç görmüyordu. */
@media (max-width:1300px) {
  .hdr__tel {
    display: none
  }
}

@media (max-width:1180px) {
  .hdr__tel {
    display: inline-flex
  }
}

/* Dar telefonda başlıkta logo + buton + burger zaten yan yana;
   arama işini alttaki sabit dock üstleniyor. */
@media (max-width:700px) {
  .hdr__tel {
    display: none
  }
}

/* Tablet yatayda da sıkışık masaüstü menüsü yerine kontrollü açılır menü. */
@media (max-width:1180px) {
  .burger {
    display: block
  }

  .nav {
    position: fixed;
    inset: 0 0 auto;
    z-index: -1;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    margin-left: 0;
    padding: 5.5rem var(--pad) 1.5rem;
    color: var(--ink);
    background: var(--porcelain);
    border-bottom: 1px solid var(--line);
    transform: translateY(-110%);
    transition: transform .4s var(--ease);
  }

  .nav a {
    padding: .85rem 0;
    border-bottom: 1px solid var(--line);
    font-family: var(--display);
    font-size: 1.3rem;
    opacity: 1
  }

  body.nav-open .nav {
    transform: none
  }

  body.nav-open {
    overflow: hidden
  }
}

@media (max-width:900px) {
  .burger {
    display: block
  }

  .nav {
    position: fixed;
    inset: 0 0 auto;
    z-index: -1;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 5.5rem var(--pad) 1.5rem;
    color: var(--ink);
    background: var(--porcelain);
    border-bottom: 1px solid var(--line);
    transform: translateY(-110%);
    transition: transform .4s var(--ease);
  }

  .nav a {
    padding: .85rem 0;
    border-bottom: 1px solid var(--line);
    font-family: var(--display);
    font-size: 1.3rem;
    opacity: 1
  }

  body.nav-open .nav {
    transform: none
  }

  body.nav-open {
    overflow: hidden
  }

  .hero__in {
    grid-template-columns: 1fr;
    min-height: auto;
    padding-top: 7.5rem;
    padding-bottom: 6.5rem
  }

  .hero__yazi {
    max-width: 720px
  }

  .hero__title {
    font-size: clamp(3.35rem, 7vw, 4.6rem)
  }

  .proof__grid {
    grid-template-columns: minmax(0, 1fr) minmax(260px, .72fr);
    gap: 2rem
  }

  .section-head,
  .gallery__head {
    grid-template-columns: 1fr;
    align-items: start;
    gap: 1.4rem
  }

  .section-head>.lead,
  .gallery__head>div:last-child {
    justify-self: start
  }

  .neden {
    grid-template-columns: 1fr;
    gap: 3rem
  }

  .why__intro {
    max-width: 760px
  }

  .ilt {
    grid-template-columns: 1fr;
    gap: 3rem
  }

  .ilt>div {
    max-width: 680px
  }

  .ilt__panel {
    min-height: min(32rem, 78vh);
    max-width: 680px;
    height: auto
  }

  .ilt__atmos img {
    object-position: 50% 18%;
    filter: saturate(1.03)
  }

  .form--panel {
    margin: .75rem
  }

  .ftr__in {
    grid-template-columns: 1.2fr 1fr
  }

  .ftr__in>div:last-child {
    grid-column: 1/-1
  }
}

@media (max-width:760px) {
  .sec {
    padding-block: 4.8rem
  }

  .h2 {
    font-size: clamp(2.55rem, 12vw, 4.4rem)
  }

  .hdr__act .btn {
    display: none
  }

  /* FAB payı sayfanın son öğesinde: künye bandı. .ftr__in son eleman
     olmaktan çıktığı için pay oradan alındı. Dar ekranda iki düğme daha
     alta oturuyor, pay da bir tık büyük. */
  .ftr__yapim {
    padding-bottom: calc(clamp(1.35rem, 2.6vw, 1.9rem) + 4.5rem)
  }

  .hero__title {
    font-size: clamp(3.25rem, 14vw, 5.2rem)
  }

  .hero__lead {
    margin-top: 1.15rem;
    font-size: .93rem
  }

  .hero__cta {
    align-items: stretch;
    flex-direction: column;
    margin-top: 1.55rem;
    gap: .7rem
  }

  .hero__cta .btn,
  .hero__cta .btn--wa,
  .hero__cta .btn--tel {
    width: 100%;
    flex: none;
    white-space: normal;
    text-align: center;
    justify-content: center;
    min-height: 3.4rem;
  }

  .hero__cta .hero__link,
  .hero__cta>.text-link {
    flex: none;
    width: auto;
    margin-top: .15rem;
  }

  .proof__grid {
    grid-template-columns: 1fr
  }

  .proof__head .lead {
    margin-top: 1.2rem
  }

  .proof__note {
    padding-top: 0
  }

  .proof__note>p {
    font-size: 1.45rem
  }

  .svc {
    display: flex;
    overflow-x: auto;
    gap: .85rem;
    margin-inline: calc(var(--pad) * -1);
    padding-inline: var(--pad);
    scroll-snap-type: x mandatory;
    scrollbar-width: none
  }

  .svc::-webkit-scrollbar {
    display: none
  }

  .svc__item,
  .svc__item--main,
  .svc__item:not(.svc__item--main) {
    flex: 0 0 min(84vw, 390px);
    display: flex;
    flex-direction: column;
    min-height: 0;
    scroll-snap-align: center
  }

  .svc figure,
  .svc__item--main figure,
  .svc__item:not(.svc__item--main) figure {
    aspect-ratio: 4/5;
    min-height: 0
  }

  .svc__body {
    min-height: 275px
  }

  .services__foot {
    align-items: flex-start;
    flex-direction: column;
    gap: .75rem
  }

  .isgrid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-auto-rows: 7px;
    gap: .7rem
  }

  .isgrid__it,
  .isgrid__it--square {
    grid-column: span 1
  }

  .isgrid__it--wide {
    grid-column: span 2
  }

  .isgrid__meta {
    inset: auto .7rem .65rem
  }

  .isgrid__meta i {
    display: none
  }

  .process .sec__head {
    align-items: center
  }

  .vrail__it {
    flex-basis: min(70vw, 280px)
  }

  .process__foot {
    align-items: flex-start;
    flex-direction: column
  }

  .process__foot p {
    display: none
  }

  .neden__list li {
    grid-template-columns: 2.4rem 1fr
  }

  .cta-band__in {
    grid-template-columns: 1fr;
    align-items: start;
    gap: 2rem
  }

  .cta-band__act {
    align-items: flex-start;
    justify-content: flex-start
  }

  .form {
    grid-template-columns: 1fr
  }

  .fld {
    grid-column: 1/-1
  }

  /* Alt boşluk künye bandına devredildi; footer burada da sıfır kalır,
     yoksa bandın altında ikinci bir mürekkep şeridi oluşur. */
  .ftr {
    padding-bottom: 0
  }

  .ftr__in {
    grid-template-columns: 1fr
  }

  .ftr__in>div:last-child {
    grid-column: auto
  }

  .lb__nav {
    top: auto;
    bottom: 1rem;
    translate: none
  }

  .lb__nav--p {
    left: 1rem
  }

  .lb__nav--n {
    right: 1rem
  }

  .seo-hub .sec__head {
    flex-direction: column
  }

  .seo-hub__grid {
    grid-template-columns: 1fr
  }

  .seo-hub__card {
    min-height: 14rem
  }
}

@media (max-width:520px) {
  .hero__in {
    padding-top: 6.6rem
  }

  .hero__loc {
    font-size: .58rem
  }

  .hero__title {
    font-size: clamp(3.05rem, 15.5vw, 4.45rem)
  }

  .proof__head br {
    display: none
  }

  .ba__grip {
    width: 52px;
    height: 52px
  }

  .isgrid {
    grid-template-columns: 1fr
  }

  .isgrid__it,
  .isgrid__it--wide,
  .isgrid__it--square {
    grid-column: span 1
  }

  .isgrid__it:nth-child(n+7) {
    display: none
  }

  .sec__head {
    align-items: flex-start
  }

  .slider__btn {
    width: 42px;
    height: 42px
  }

  .ilt__liste li {
    grid-template-columns: 1fr;
    gap: .25rem
  }

  .cta-band h2 {
    font-size: clamp(3rem, 15vw, 4.6rem)
  }
}

@media (hover:none) {

  .btn:hover,
  .instagram:hover,
  .kanal:hover,
  .g-review__btn:hover {
    transform: none
  }
}

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

  *,
  *::before,
  *::after {
    animation: none !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important
  }

  .motion-ready [data-reveal] {
    opacity: 1;
    transform: none
  }

  .ticker {
    overflow-x: auto;
    scrollbar-width: none
  }

  .ticker::-webkit-scrollbar {
    display: none
  }

  .ticker__track {
    transform: none;
    will-change: auto;
    animation: none
  }

  .ticker__group[aria-hidden="true"] {
    display: none
  }
}

/* =========================================================
   2026 / Kompakt editoryal açılış ve rafine tipografi
   ========================================================= */
.hero {
  min-height: clamp(650px, 86svh, 780px);
  background: #071b22;
}

.hero__media,
.hero__shade {
  position: absolute;
  inset: 0;
  pointer-events: none
}

.hero__media {
  z-index: 0;
  overflow: hidden;
  background: #09232b
}

.hero__steam {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: block;
  width: 100%;
  height: 100%;
  pointer-events: none;
  opacity: 0;
  transition: opacity 1.1s var(--ease);
  contain: strict
}

.hero__steam.is-ready {
  opacity: .82
}

.hero__media video {
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  object-position: center;
  /* CSS filter video uzerinde her kare yeniden hesaplanir (telefonlarda
     kaydirma kare kaybi). Renk siralama statik shade katmaninda. */
  transform: scale(1.008) translateZ(0);
  backface-visibility: hidden;
}

.hero__shade {
  z-index: 2;
  background:
    /* brightness(.82) + saturate(.84) yakinsamasi: hafif soguk tint + karartma */
    linear-gradient(0deg, rgba(10, 36, 42, .18), rgba(10, 36, 42, .18)),
    radial-gradient(ellipse 58% 70% at 18% 72%, rgba(3, 14, 18, .52) 0%, rgba(3, 14, 18, .24) 52%, transparent 78%),
    linear-gradient(90deg, rgba(4, 17, 22, .66) 0%, rgba(4, 17, 22, .48) 38%, rgba(4, 17, 22, .2) 68%, rgba(4, 17, 22, .08) 100%),
    linear-gradient(0deg, rgba(3, 14, 18, .28) 0%, transparent 42%);
}

.hero::before {
  display: none
}

.hero__in {
  z-index: 4;
  min-height: inherit;
  grid-template-columns: minmax(0, 1fr);
  align-items: center;
  padding-top: clamp(6.75rem, 11vh, 8rem);
  padding-bottom: clamp(3.25rem, 6vh, 4.75rem);
}

.hero__yazi {
  top: 0;
  max-width: min(100%, 940px)
}

.hero__loc {
  margin-bottom: 1.35rem;
  font-size: .7rem;
  letter-spacing: .115em;
  color: rgba(255, 255, 255, .7)
}

/* Sağ sütun kalkınca başlık tüm genişliği alıyor; ölçü buna göre büyüdü. */
.hero__title {
  font-size: clamp(3.6rem, 7.4vw, 6.4rem)
}

.hero__wordmark {
  max-width: 100%;
  font-size: 1.02em
}

.hero__title em {
  margin-top: .3em;
  max-width: 24ch;
  font-size: clamp(1.4rem, 2.9vw, 2.5rem)
}

/* Tek renk hero: turkuaz vurgu başlıktan, künyeden ve yöntem şeridinden
   kalktı; ayrım artık yalnızca ölçü, ağırlık ve opaklıkla kuruluyor. */
.hero__loc span {
  color: inherit
}

.hero__title em {
  color: rgba(252, 252, 249, .82)
}

.hero__title,
.hero__lead {
  text-shadow: 0 3px 24px rgba(0, 0, 0, .44)
}

.hero__wordmark {
  text-shadow: 0 2px 20px rgba(0, 0, 0, .35)
}

.hero__lead {
  max-width: 52ch;
  color: rgba(255, 255, 255, .78);
  font-weight: 470;
  line-height: 1.66
}

.hero__cta {
  max-width: 660px
}

/* Esnek satır kırma: iki buton bir satırda, bağlantı altında kendi
   genişliğinde kalır — alt çizgi metnin ötesine taşmaz. */
.hero__cta::before {
  content: "";
  order: 1;
  flex-basis: 100%;
  height: 0
}

.hero__cta .hero__link,
.hero__cta>.text-link {
  order: 2;
  flex: 0 0 auto;
  width: max-content;
  margin-top: .45rem
}

/* ---------- hero yöntem ve SEO güvence paneli (5 Maddelik Editoryal Panel) ---------- */
.hero__specs {
  position: static;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: .95rem;
  max-width: 980px;
  margin: clamp(1.8rem, 3.4vh, 2.5rem) 0 0;
  padding: 1.1rem 1.35rem;
  background: rgba(3, 14, 18, .52);
  border: 1px solid rgba(255, 255, 255, .14);
  border-radius: 1.25rem;
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  box-shadow: 0 16px 40px -12px rgba(0, 0, 0, .55);
  list-style: none;
}

@media (max-width: 1199px) and (min-width: 761px) {
  .hero__specs {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1.15rem;
  }
}

.hero__spec {
  display: flex;
  flex-direction: column;
  gap: .4rem;
  position: relative;
}

.hero__spec + .hero__spec::before {
  content: "";
  position: absolute;
  left: -0.5rem;
  top: 10%;
  bottom: 10%;
  width: 1px;
  background: rgba(255, 255, 255, .12);
}

.hero__spec-badge {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  color: var(--steam);
}

.hero__spec-ico {
  width: 17px;
  height: 17px;
  flex-shrink: 0;
  color: var(--steam);
  opacity: .95;
}

.hero__spec-num {
  font-family: var(--display);
  font-size: 1.05rem;
  font-weight: 750;
  letter-spacing: -.02em;
  color: #fff;
  line-height: 1;
}

.hero__spec-num sup {
  font-family: var(--sans);
  font-size: .65em;
  font-weight: 700;
  opacity: .85;
  margin-left: 1px;
  vertical-align: super;
}

.hero__spec-body strong {
  display: block;
  font-family: var(--font-body);
  font-size: .84rem;
  font-weight: 750;
  color: #fff;
  letter-spacing: -.01em;
  line-height: 1.22;
}

.hero__spec-body p {
  margin: .2rem 0 0;
  font-size: .71rem;
  color: rgba(255, 255, 255, .66);
  line-height: 1.32;
}

/* ---------- hero mühürleri / otantik kauçuk damgalar ----------
   Lüks platin & porselen kaşe estetiği (Doğal el kaşesi dağınıklığı):
   - Asimetrik rotasyonlar ve ofsetler
   - Dış tırtıklı halka + iç içe çift çember
   - Dairesel kavisli metin (textPath)
   - Doğal kaşe vuruşu
*/
.muhurler {
  display: none;
}

@media (min-width: 992px) {
  .muhurler {
    position: absolute;
    right: clamp(1rem, 3vw, 3.4rem);
    top: 50%;
    z-index: 4;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: clamp(.15rem, .5vh, .55rem);
    margin: 0;
    padding: 0;
    transform: translateY(-50%);
    list-style: none;
    pointer-events: auto;
  }
}

.muhur {
  --muhur-cap: clamp(8.2rem, 10.2vw, 10.8rem);
  position: relative;
  display: block;
  width: var(--muhur-cap);
  height: var(--muhur-cap);
  color: rgba(255, 255, 255, .92);
  transform: rotate(var(--muhur-aci, 0deg));
  animation: muhur-bas .68s cubic-bezier(.175, .885, .32, 1.275) var(--muhur-bekle, 1.1s) both;
  filter: drop-shadow(0 8px 24px rgba(0, 0, 0, .75));
  transition: transform .28s var(--ease), filter .28s, color .28s;
  cursor: default;
  user-select: none;
}

/* Doğal el kaşesi yerleşim dağınıklığı */
.muhur--1 {
  z-index: 1;
  margin-right: clamp(.4rem, 1.2vw, 1.2rem);
}
.muhur--1:hover {
  color: #fff;
  transform: rotate(-8.5deg) scale(1.06);
  filter: drop-shadow(0 14px 32px rgba(0, 0, 0, .88));
}

.muhur--2 {
  z-index: 2;
  margin-right: clamp(2.4rem, 4.4vw, 4.2rem);
  margin-top: -0.7rem;
}
.muhur--2:hover {
  color: #fff;
  transform: rotate(11deg) scale(1.06);
  filter: drop-shadow(0 14px 32px rgba(0, 0, 0, .88));
}

.muhur--3 {
  z-index: 3;
  margin-right: clamp(0.2rem, .8vw, .8rem);
  margin-top: -0.7rem;
}
.muhur--3:hover {
  color: #fff;
  transform: rotate(-2deg) scale(1.06);
  filter: drop-shadow(0 14px 32px rgba(0, 0, 0, .88));
}

.muhur .damga-svg {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
  border-radius: 50%;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

/* Kaşe vuruşu: büyük gelir, kağıda çarpınca esneyerek oturur */
@keyframes muhur-bas {
  0% {
    opacity: 0;
    transform: rotate(var(--muhur-aci, 0deg)) scale(1.85);
  }

  50% {
    opacity: 1;
    transform: rotate(var(--muhur-aci, 0deg)) scale(.92);
  }

  75% {
    transform: rotate(var(--muhur-aci, 0deg)) scale(1.04);
  }

  100% {
    opacity: 1;
    transform: rotate(var(--muhur-aci, 0deg)) scale(1);
  }
}
@media (prefers-reduced-motion: reduce) {
  .muhur {
    animation: none;
    opacity: 1;
  }
}



.h2,
.proof__note>p,
.svc__body h3,
.isgrid__meta b,
.vrail__meta b,
.neden__list strong,
.cta-band h2,
.ftr__tel {
  font-variation-settings: "SOFT" 48, "WONK" 0;
}

.proof__note>p {
  font-weight: 530;
  line-height: 1.17;
  letter-spacing: -.025em
}

.svc__body h3 {
  font-weight: 580;
  line-height: 1;
  letter-spacing: -.03em
}

.isgrid__meta b {
  font-weight: 580;
  line-height: 1.08;
  letter-spacing: -.02em
}

.vrail__meta b {
  font-size: 1.125rem;
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: -.025em
}

.neden__list strong {
  font-weight: 580;
  line-height: 1.08;
  letter-spacing: -.025em
}

.cta-band h2 {
  font-size: clamp(3rem, 5.6vw, 5.8rem);
  font-weight: 590;
  line-height: .94;
  letter-spacing: -.04em
}

.esik,
.hero__loc,
.fld input,
.fld textarea,
.fld select {
  font-size: 1rem;
  font-weight: 500;
  line-height: 1.5
}

@media (max-width:1050px) {
  .hero {
    min-height: clamp(650px, 88svh, 760px)
  }

  .hero__title {
    font-size: clamp(3.3rem, 8vw, 4.8rem)
  }
}

@media (max-width:900px) {
  .hero {
    min-height: 0
  }

  .hero__in {
    grid-template-columns: 1fr;
    min-height: 0;
    padding-top: 6.5rem;
    padding-bottom: 2.75rem
  }

  .hero__yazi {
    top: .65rem;
    max-width: 720px
  }

  .hero__shade {
    background:
      linear-gradient(0deg, rgba(10, 36, 42, .16), rgba(10, 36, 42, .16)),
      linear-gradient(180deg, rgba(3, 14, 18, .42) 0%, rgba(3, 14, 18, .36) 42%, rgba(3, 14, 18, .68) 100%),
      linear-gradient(90deg, rgba(4, 17, 22, .68) 0%, rgba(4, 17, 22, .38) 100%)
  }

  .hero__specs {
    max-width: 640px
  }

  .hero__steam {
    display: none
  }
}

@media (max-width:760px) {
  .hero__yazi {
    top: 0
  }

  .hero__media video {
    object-position: 50% center;
    transform: scale(1.008) translateZ(0)
  }

  .hero__shade {
    background:
      /* onceki filter brightness(.74) + saturate yakinsamasi — animasyon/filtre yok, aynı ton */
      linear-gradient(0deg, rgba(8, 30, 36, .28), rgba(8, 30, 36, .28)),
      linear-gradient(180deg, rgba(3, 14, 18, .45) 0%, rgba(3, 14, 18, .58) 48%, rgba(3, 14, 18, .68) 100%),
      linear-gradient(90deg, rgba(3, 14, 18, .42), rgba(3, 14, 18, .18))
  }

  .hero__in {
    padding-top: 5.8rem;
    padding-bottom: 1.75rem
  }

  .hero__title {
    font-size: clamp(2.4rem, 11vw, 3.1rem);
    line-height: .98;
    letter-spacing: -.035em
  }

  .hero__title em {
    margin-top: .45em;
    font-size: clamp(1.05rem, 4.6vw, 1.35rem);
    max-width: 20ch
  }

  .h2 {
    font-size: clamp(2.5rem, 10.4vw, 3.6rem);
    line-height: .98;
    letter-spacing: -.03em
  }

  .hero__lead,
  .lead {
    font-size: 1rem;
    line-height: 1.62
  }

  .hero__lead {
    max-width: 42ch;
    margin-top: .85rem;
    color: rgba(255, 255, 255, .76)
  }

  .hero__cta {
    margin-top: 1rem
  }

  .hero__specs {
    grid-template-columns: 1fr;
    gap: .85rem;
    padding: 1rem 1.15rem;
    margin-top: 1.35rem;
  }

  .hero__spec + .hero__spec::before {
    display: none;
  }

  .hero__spec + .hero__spec {
    border-top: 1px solid rgba(255, 255, 255, .08);
    padding-top: .75rem;
  }

  .hero__spec-body strong {
    font-size: .86rem;
  }

  .hero__spec-body p {
    font-size: .72rem;
  }
}

@media (min-width:901px) and (max-height:720px) {
  .hero__yazi {
    top: .75rem;
  }
}

@media (max-width:520px) {
  .hero__in {
    padding-top: 5.6rem;
    padding-bottom: 1.25rem;
  }

  .hero__loc {
    font-size: .65rem;
  }

  .hero__title {
    font-size: clamp(2.3rem, 11vw, 2.8rem);
  }

  .hero__link {
    display: none;
  }

  .hero__specs {
    gap: .55rem;
  }

  .hero__spec {
    padding: .65rem .85rem;
  }
}

@media (max-width:900px) and (min-width:700px) and (max-height:740px) {
  .hero {
    min-height: 640px
  }

  .hero__in {
    min-height: 640px;
    grid-template-columns: minmax(0, 1fr);
    padding-top: 6rem;
    padding-bottom: 2rem
  }

  .hero__title {
    font-size: clamp(3rem, 6vw, 3.6rem)
  }

  .hero__lead {
    font-size: .9rem;
    margin-top: .9rem
  }

  .hero__cta {
    margin-top: 1rem
  }

  .hero__specs {
    margin-top: 1.4rem;
    padding-top: 1rem
  }
}

@media (max-width:760px) and (max-height:740px) {
  .hero__in {
    padding-top: 5.35rem;
    padding-bottom: 1rem
  }

  .hero__title {
    font-size: clamp(2.2rem, 10.2vw, 2.55rem)
  }

  .hero__specs {
    margin-top: 1.25rem;
    padding-top: .9rem
  }
}

/* =========================================================
   Hareket sistemi / WebGL + scroll derinliği
   ========================================================= */
.scroll-progress {
  --page-progress: 0;
  position: fixed;
  z-index: 140;
  inset: 0 0 auto;
  height: 2px;
  overflow: hidden;
  opacity: 0;
  pointer-events: none;
  background: rgba(91, 155, 196, .08)
}

.scroll-progress i {
  display: block;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, var(--steam-dark), var(--steam));
  transform: scaleX(var(--page-progress));
  transform-origin: left center
}

.motion-enhanced .scroll-progress {
  opacity: 1
}

@media (min-width:761px) {
  [data-motion-title] {
    transform: translate3d(0, var(--title-y, 0), 0);
    transition: transform .14s linear
  }

  [data-motion-title] em {
    display: inline-block;
    transform: translate3d(var(--accent-x, 0), 0, 0);
    transition: transform .16s linear
  }

  [data-motion-card] {
    --tilt-x: 0deg;
    --tilt-y: 0deg;
    --scroll-tilt: 0deg;
    --media-y: 0px;
    --pointer-media-y: 0px;
    --copy-x: 0px;
    --copy-y: 0px;
    --media-scale: 1.055;
    perspective: 1100px
  }

  [data-motion-card] figure {
    transform: perspective(1100px) translate3d(0, calc(var(--media-y) + var(--pointer-media-y)), 0) rotateX(calc(var(--scroll-tilt) + var(--tilt-x))) rotateY(var(--tilt-y)) scale(1.012);
    transform-style: preserve-3d;
    transition: transform .18s ease-out
  }

  [data-motion-card] .svc__body {
    transform: translate3d(var(--copy-x), var(--copy-y), 0);
    transition: transform .2s ease-out
  }

  [data-motion-card] img {
    transform: scale(var(--media-scale))
  }

  [data-motion-card]:hover {
    --media-scale: 1.075
  }

  [data-motion-gallery] {
    --gallery-y: 0px;
    --gallery-tilt: 0deg;
    --media-x: 0px;
    --media-pointer-y: 0px;
    --pointer-x: 50%;
    --pointer-y: 50%;
    --copy-x: 0px;
    --copy-y: 0px;
    --gallery-scale: 1.065
  }

  [data-motion-gallery] img {
    transform: perspective(1000px) translate3d(var(--media-x), calc(var(--gallery-y) + var(--media-pointer-y)), 0) rotateX(var(--gallery-tilt)) scale(var(--gallery-scale));
    transition: transform .18s linear, filter .5s
  }

  [data-motion-gallery]:hover {
    --gallery-scale: 1.085
  }

  [data-motion-gallery] .isgrid__meta {
    z-index: 3;
    transform: translate3d(var(--copy-x), var(--copy-y), 0);
    transition: transform .18s ease-out
  }

  [data-motion-gallery]::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 2;
    pointer-events: none;
    opacity: 0;
    background: radial-gradient(circle at var(--pointer-x) var(--pointer-y), rgba(255, 255, 255, .17), transparent 30%);
    transition: opacity .25s
  }

  [data-motion-gallery]:hover::before {
    opacity: 1
  }

  [data-motion-rail] {
    transform: perspective(1000px) translate3d(0, var(--rail-y, 0), 0) rotateY(var(--rail-yaw, 0deg));
    transition: transform .16s linear;
    transform-style: preserve-3d
  }

  [data-motion-reason]>div {
    transform: translate3d(var(--reason-x, 0), var(--reason-y, 0), 0);
    transition: transform .16s linear
  }

  .cta-band__orb {
    transform: rotate(var(--orb-rotate, 0deg)) scale(var(--orb-scale, 1));
    transition: transform .18s linear
  }

  [data-motion-active="true"] figure,
  [data-motion-active="true"] img,
  [data-motion-active="true"] .isgrid__meta,
  [data-motion-active="true"]>div {
    will-change: transform
  }
}

.ticker.is-offscreen .ticker__track {
  animation-play-state: paused;
  will-change: auto
}

@media (prefers-reduced-motion:reduce),
(forced-colors:active),
print {

  .hero__steam,
  .scroll-progress {
    display: none !important
  }

  [data-motion-title],
  [data-motion-title] em,
  [data-motion-card] figure,
  [data-motion-card] .svc__body,
  [data-motion-gallery] img,
  [data-motion-gallery] .isgrid__meta,
  [data-motion-rail],
  [data-motion-reason]>div,
  .cta-band__orb {
    transform: none !important;
    transition: none !important
  }
}

/* ---------- dokunmatik: cam katmanları ----------
   backdrop-filter, altında ne varsa onu her karede yeniden bulanıklaştırır.
   Telefonda üç yerde bu "ne varsa" hareket hâlindeydi:
     · sabit başlık   → kaydırılan sayfanın tamamı,
     · hero künyesi   → oynayan film (saniyede 25 kez yeniden bulanıklık),
     · mini künye     → aynı katman.
   Arka planlar zaten %90'ın üzerinde opak; tam opak yapılınca görünüm
   neredeyse birebir kalıyor, kaydırma ise düşen kare üretmiyor. */
@media (pointer: coarse),
(max-width: 760px) {
  .hdr.is-stuck {
    background: #f7f3eb;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }

  .ba__tag,
  .vrail__play {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }

  .ba__tag {
    background: rgba(7, 27, 34, .86)
  }

  .vrail__play {
    background: rgba(7, 27, 34, .62)
  }

  /* Büyütme perdesi de tam ekran; içinde video oynarken bulanıklık
     kare başına yeniden hesaplanıyordu. */
  .lb {
    background: rgba(2, 10, 13, .985);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
}

/* ---------- dokunmatik: ekran dışı bölümlerin boyanması ----------
   Ana sayfa 6100 px; açılışta bunun tamamı için stil, yerleşim ve boyama
   yapılıyordu. data-gec-boya işaretli bölümler ekrana yaklaşana kadar bu
   sıranın dışında kalır, kaydırma başladığında tarayıcının elinde yalnızca
   görünen bölüm olur.

   --gb bölümün iç kutu yüksekliğidir (dolgu hariç, contain-intrinsic-size
   dolguyu kapsamaz). İskelet doğru boyda durduğu için sayfa uzunluğu ve
   kaydırma çubuğu oynamaz. "auto" ise bir kez ölçüldükten sonra tarayıcı
   gerçek ölçüyü hatırlar, tahmine bir daha dönmez.

   Desteklemeyen tarayıcı iki özelliği de yok sayar; sayfa bugünkü gibi
   çalışmaya devam eder. */
@media (pointer: coarse),
(max-width: 760px) {
  [data-gec-boya] {
    content-visibility: auto;
    contain-intrinsic-size: auto var(--gb, 900px);
  }

  /* data-gec-boya yoksa da uzun gövde bölümlerini ertele (iskelet 640px) */
  body>section:not(.hero):not(.ticker):not([data-gec-boya]),
  main>section:not(.hero):not([data-gec-boya]) {
    content-visibility: auto;
    contain-intrinsic-size: auto 640px;
  }

  /* Kaydırma sırasında yeniden boyanmayı sınırla; gölge/outline kesilmez */
  .svc__item,
  .isgrid__it,
  .vrail__it,
  .calisma-kart,
  .seo-hub__card,
  .blog-kart {
    contain: layout style;
  }

  .ba__stage {
    contain: layout style;
    /* clip-path + iki katman foto: kendi katmanında birleştir */
    transform: translateZ(0);
    backface-visibility: hidden;
  }

  /* Film decode + compose: medya katmanını izole et (size yok — inset:0 bozulmasın) */
  .hero__media {
    contain: layout paint style;
  }

  /* Sayfa geçiş snapshot'u + boyama maliyeti yüksek; animasyon içerik içi
     kalır, yalnız navigasyon geçişi kapanır. */
  @view-transition {
    navigation: none;
  }

  /* Lastik bounce ana iş/GPU yükü; kaydırma hissi aynı */
  html {
    overscroll-behavior-y: contain
  }
}

/* Sabit UI: kendi compositor katmanı; kaydırma ile birlikte yeniden boyanmaz */
.hdr,
.dock {
  transform: translateZ(0);
  backface-visibility: hidden;
}

.dock {
  contain: layout style;
}

/* Video katmanı — decode yeri ayrı, sayfa kaydırmasına bulaşmaz */
video {
  backface-visibility: hidden;
}

/* =========================================================
   UYGULAMA HİSSİ
   Bir sitenin "web sitesi" gibi hissettirmesinin üç sebebi var:
   her tıkta beyaz ekranla yeniden yükleme, dokunmada tepki yokluğu
   ve kaymalar. Aşağısı bu üçünü kapatıyor.
   ========================================================= */

/* ----- 1. Sayfa geçişleri -----
   Belgeler arası görünüm geçişi. Bağlantıya basınca sayfa beyazlayıp
   yeniden çizilmiyor; iki belge birbirine geçiyor. Başlık ve hızlı
   iletişim düğmeleri geçişin dışında tutuldu, uygulamalardaki gibi
   yerinde duruyor, yalnızca içerik değişiyor. */
@view-transition {
  navigation: auto;
}

.hdr {
  view-transition-name: masal-hdr;
}

.dock {
  view-transition-name: masal-dock;
}

::view-transition-old(root),
::view-transition-new(root) {
  animation-duration: .24s;
  animation-timing-function: var(--ease);
}

/* Yeni sayfa aşağıdan gelir, yön duygusu, geçişi "yükleme" değil
   "ilerleme" gibi okutuyor. */
::view-transition-new(root) {
  animation-name: masal-gecis-gir;
}

@keyframes masal-gecis-gir {
  from {
    opacity: 0;
    transform: translate3d(0, 10px, 0)
  }

  to {
    opacity: 1;
    transform: none
  }
}

@media (prefers-reduced-motion: reduce) {
  @view-transition {
    navigation: none;
  }
}

/* ----- 2. Dokunma tepkisi -----
   Mobil tarayıcının gri parlaması yerine düğmenin kendisi tepki versin.
   touch-action:manipulation çift dokunma yakınlaştırmasını beklemeyi de
   kaldırıyor: tıklama ~300 ms erken geliyor. */
a,
button,
[role="button"],
summary,
label,
select {
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}

@media (pointer: coarse) {

  .btn,
  .kanal,
  .dock__b,
  .slider__btn,
  .burger,
  .isgrid__it,
  .vrail__it,
  .lb__x,
  .lb__nav,
  .hero__link,
  .text-link,
  .ftr__tel,
  .cta-band__tel,
  .hdr__tel {
    transition: transform .12s var(--ease), background-color .2s, color .2s, border-color .2s, box-shadow .2s;
  }

  .btn:active,
  .kanal:active,
  .slider__btn:active,
  .lb__x:active,
  .lb__nav:active {
    transform: scale(.965)
  }

  .isgrid__it:active,
  .vrail__it:active {
    transform: scale(.985)
  }

  .hero__link:active,
  .text-link:active,
  .ftr__tel:active,
  .cta-band__tel:active,
  .hdr__tel:active {
    opacity: .62
  }

  .nav a:active {
    background: rgba(7, 27, 34, .06)
  }

  /* Menü ve düğme metinleri uzun basışta seçilmesin, tarayıcı değil
     uygulama davranışı. */
  .nav a,
  .btn,
  .dock__b,
  .burger,
  .slider__btn {
    user-select: none;
    -webkit-user-select: none
  }
}

/* ----- 3. Kayma ve zincirleme -----
   Katman içinde sona gelince kaydırma alttaki sayfaya atlamasın. */
.lb,
.kutu,
body.nav-open .nav {
  overscroll-behavior: contain
}

/* Ana ekrandan açıldığında tarayıcı çerçevesi yok; lastik gibi esneyen
   üst/alt taşma da olmamalı. Tarayıcıda ise aşağı çekip yenileme
   davranışı korunuyor. */
@media (display-mode: standalone) {
  html {
    overscroll-behavior-y: none
  }

  /* Çentik/ada altında kalmasın */
  .hdr {
    padding-top: env(safe-area-inset-top)
  }
}

/* Ayırt edici NAP satırı (rakip aynı marka ismine karşı) */
.ftr__nap {
  margin: .65rem 0 0;
  max-width: 36ch;
  font-size: .78rem;
  line-height: 1.45;
  color: rgba(241, 246, 248, .62)
}

.ftr__nap a {
  color: rgba(241, 246, 248, .88);
  text-decoration: underline;
  text-underline-offset: .12em
}

.ftr__nap a:hover {
  color: #fff
}

/* Hero ayırt edici kimlik satırı — Instagram / meta; numara CTA’da */
.hero__id {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .45rem .65rem;
  margin: .55rem 0 0;
  font-family: var(--sans);
  font-size: .9rem;
  font-weight: 600;
  letter-spacing: .01em;
  color: rgba(252, 252, 249, .78);
}

.hero__id a {
  color: inherit;
  text-decoration: none;
  border-bottom: 1px solid rgba(91, 155, 196, .4)
}

.hero__id a:hover {
  color: #fff;
  border-bottom-color: #5B9BC4
}

.hero__id a[data-ig] {
  display: inline-flex;
  align-items: center;
  gap: .4rem
}

/* Resmi kimlik bandı */
.kimlik {
  padding: clamp(3.5rem, 8vw, 5.5rem) 0;
  background:
    radial-gradient(ellipse 70% 80% at 10% 20%, rgba(18, 120, 111, .12), transparent 55%),
    linear-gradient(180deg, #f6f8f7 0%, #eef3f1 100%);
  border-block: 1px solid rgba(7, 27, 34, .06);
}

.kimlik__in {
  display: grid;
  gap: clamp(1.5rem, 4vw, 2.5rem);
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  align-items: start;
}

.kimlik__copy h2 {
  margin: .2rem 0 .8rem;
  max-width: 18ch;
  font-family: var(--display);
  font-weight: 580;
  font-size: clamp(1.55rem, 2.6vw, 2.1rem);
  line-height: 1.12;
  letter-spacing: -.02em;
  color: var(--ink);
}

.kimlik__copy p {
  margin: 0;
  max-width: 42ch;
  color: var(--ink-soft);
  line-height: 1.55
}

.kimlik__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: .65rem;
}

.kimlik__list li {
  display: flex;
  align-items: center;
  gap: .85rem;
  padding: .9rem 1.15rem;
  background: rgba(255, 255, 255, .82);
  border: 1px solid rgba(7, 27, 34, .08);
  border-radius: .95rem;
  box-shadow: 0 2px 10px -4px rgba(7, 27, 34, .06);
}

.kimlik__list li > span:first-child {
  width: 6.5rem;
  min-width: 6.5rem;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--steam-dark);
}

.kimlik__list a {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  color: var(--ink);
  text-decoration: none;
  font-size: .95rem;
}

.kimlik__list a .ico {
  width: 22px;
  height: 22px;
  min-width: 22px;
  padding: 3.5px;
  border-radius: 6px;
  background: rgba(91, 155, 196, .14);
  color: var(--aqua-deep);
  box-sizing: border-box;
}

.kimlik__list a[data-ig] .ico {
  background: rgba(214, 36, 159, .14);
  color: #d6249f;
}

.kimlik__list a:hover {
  color: var(--steam-dark);
}

.kimlik__list strong {
  font-weight: 700;
  font-size: 1rem;
  letter-spacing: -.01em;
}

@media (max-width:760px) {
  .kimlik__in {
    grid-template-columns: 1fr;
  }

  .kimlik__list li {
    padding: .85rem 1rem;
  }

  .kimlik__list li > span:first-child {
    width: 5.5rem;
    min-width: 5.5rem;
  }

  .kimlik__list strong {
    font-size: .92rem;
  }
}

/* Calismalar dağıtım kartları (hizmet / ilçe inject) */
.calisma-dagitim .calisma-kart-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
  gap: clamp(1rem, 2.5vw, 1.5rem);
  margin-top: clamp(1.25rem, 3vw, 1.75rem);
}

.calisma-kart {
  margin: 0
}

.calisma-kart__link {
  display: flex;
  flex-direction: column;
  gap: .5rem;
  color: inherit;
  text-decoration: none;
  height: 100%;
}

.calisma-kart__gorsel {
  border-radius: var(--radius, 14px);
  overflow: hidden;
  background: var(--porcelain, #eef3f1);
}

.calisma-kart__gorsel img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 3/4;
  object-fit: cover;
}

.calisma-kart__baslik {
  margin: 0;
  font-family: var(--display);
  font-size: clamp(1.1rem, 2vw, 1.3rem);
  font-weight: 600;
  letter-spacing: -.02em;
  line-height: 1.25;
}

.calisma-kart__meta,
.calisma-kart__ozet {
  margin: 0;
  color: var(--ink-soft);
  font-size: .9rem;
  line-height: 1.5;
}

.calisma-kart__cta {
  margin-top: auto;
  color: var(--steam-dark);
  font-weight: 650;
  font-size: .9rem;
}

/* ---------- 6 Video Bento Vitrini (Açık Ton, Aydınlık Tasarım) ---------- */
.video-bento {
  padding-block: clamp(3rem, 6vw, 4.5rem);
  background: var(--paper);
  color: var(--ink);
  position: relative;
  overflow: hidden;
}

.video-bento .sec__head .h2 {
  color: var(--ink);
}

.video-bento .sec__head .lead {
  color: var(--muted);
}

.video-bento__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(.85rem, 1.6vw, 1.35rem);
  margin-top: clamp(1.75rem, 3.2vw, 2.75rem);
}

.video-bento__item {
  position: relative;
  border-radius: var(--radius);
  overflow: hidden;
  aspect-ratio: 4/5;
  background: #fff;
  border: 1px solid rgba(7, 27, 34, .1);
  box-shadow: 0 4px 16px rgba(7, 27, 34, .04);
  transition: transform .35s var(--ease), border-color .35s var(--ease), box-shadow .35s var(--ease);
}

.video-bento__item:hover {
  transform: translateY(-4px);
  border-color: var(--steam-dark);
  box-shadow: 0 14px 32px rgba(7, 27, 34, .12);
}

.video-bento__item--hero {
  grid-column: span 2;
  aspect-ratio: 16/10;
}

.video-bento__item--wide {
  grid-column: span 2;
  aspect-ratio: 16/9;
}

.video-bento__media {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .4s var(--ease);
}

.video-bento__item:hover .video-bento__media {
  transform: scale(1.03);
}

.video-bento__overlay {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: clamp(.9rem, 2vw, 1.35rem);
  background: linear-gradient(to top, rgba(7, 27, 34, .82) 0%, rgba(7, 27, 34, .15) 50%, transparent 100%);
  pointer-events: none;
}

.video-bento__badge {
  align-self: flex-start;
  padding: .3rem .75rem;
  border-radius: 999px;
  background: rgba(255, 255, 255, .92);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  color: var(--ink);
  font-family: var(--mono);
  font-size: .65rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  box-shadow: 0 2px 8px rgba(0, 0, 0, .15);
}

.video-bento__title {
  color: #fff;
  font-family: var(--font);
  font-size: clamp(1rem, 1.5vw, 1.25rem);
  font-weight: 650;
  line-height: 1.3;
  text-shadow: 0 2px 8px rgba(0, 0, 0, .6);
}

@media (max-width:900px) {
  .video-bento__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .video-bento__item--hero {
    grid-column: span 2;
    aspect-ratio: 16/10;
  }

  .video-bento__item--wide {
    grid-column: span 2;
  }
}

@media (max-width:560px) {
  .video-bento__grid {
    grid-template-columns: 1fr;
    gap: .85rem;
  }

  .video-bento__item,
  .video-bento__item--hero,
  .video-bento__item--wide {
    grid-column: span 1;
    aspect-ratio: 4/3;
  }
}

/* ---------- 3 sıra akış galerisi (ana sayfa) ---------- */
.strip-gal {
  padding-block: clamp(2.5rem, 5vw, 4rem);
  overflow: hidden;
  background:
    radial-gradient(ellipse 80% 50% at 50% 0%, rgba(18, 120, 111, .06), transparent 55%),
    var(--paper);
}

.strip-gal .sec__head {
  margin-bottom: clamp(1.5rem, 3vw, 2.25rem)
}

.strip-gal__board {
  display: flex;
  flex-direction: column;
  gap: clamp(.55rem, 1.2vw, .85rem);
  margin-inline: calc(var(--pad) * -1);
  padding-block: .25rem;
}

.strip-gal__row {
  overflow: hidden;
  mask-image: linear-gradient(90deg, transparent 0%, #000 4%, #000 96%, transparent 100%);
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 4%, #000 96%, transparent 100%);
}

.strip-gal__track {
  display: flex;
  width: max-content;
  will-change: transform;
}

.strip-gal__group {
  display: flex;
  flex: 0 0 auto;
  gap: clamp(.55rem, 1.2vw, .85rem);
  padding-inline: calc(clamp(.55rem, 1.2vw, .85rem) / 2);
}

.strip-gal__cell {
  flex: 0 0 auto;
  margin: 0;
  width: clamp(148px, 28vw, 252px);
  aspect-ratio: 4/5;
  border-radius: calc(var(--radius) + 2px);
  overflow: hidden;
  background: var(--porcelain);
  box-shadow: 0 18px 40px -28px rgba(7, 27, 34, .45);
}

.strip-gal__cell img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transform: scale(1.02);
}

/* 1. ve 3. sıra: sağdan sola. 2. sıra: soldan sağa.
   Süre, kare sayısı arttıkça hızın “aceleci” görünmemesi için tutulur. */
.strip-gal__row--rtl .strip-gal__track {
  animation: stripGalRtl 96s linear infinite;
}

.strip-gal__row--ltr .strip-gal__track {
  animation: stripGalLtr 108s linear infinite;
}

.strip-gal__row--rtl:nth-child(3) .strip-gal__track {
  animation-duration: 112s;
}

.strip-gal.is-offscreen .strip-gal__track {
  animation-play-state: paused;
  will-change: auto;
}

@keyframes stripGalRtl {
  from {
    transform: translate3d(0, 0, 0)
  }

  to {
    transform: translate3d(-50%, 0, 0)
  }
}

@keyframes stripGalLtr {
  from {
    transform: translate3d(-50%, 0, 0)
  }

  to {
    transform: translate3d(0, 0, 0)
  }
}

@media (prefers-reduced-motion:reduce) {
  .strip-gal__track {
    animation: none !important;
    will-change: auto;
    transform: none
  }

  .strip-gal__group:nth-child(2) {
    display: none
  }

  .strip-gal__row {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none
  }

  .strip-gal__row::-webkit-scrollbar {
    display: none
  }

  .strip-gal__board {
    gap: .65rem;
    padding-inline: var(--pad);
    margin-inline: 0
  }

  .strip-gal__row {
    mask-image: none;
    -webkit-mask-image: none
  }

  .strip-gal__track {
    width: auto
  }
}

/* ── Dokunma hedefleri ──────────────────────────────────────────────────
   Google, parmakla basılan hedefler için ~44-48px öneriyor. Aşağıdaki
   bağlantılar görsel olarak küçük olmalı (altı çizili ince bir satır, ufak
   bir logo), ama basma alanı küçük kalmamalı.

   Yöntem: görünümü hiç değiştirmeden, saydam bir ::after ile tıklama alanını
   genişletiyoruz. min-height vermek burada işe yaramazdı; .text-link'in
   border-bottom'u metinden kopup kutunun dibine inerdi.

   Paragraf içindeki satır içi bağlantılara DOKUNULMUYOR: onları büyütmek
   metin akışını bozar ve zaten bu denetimin kapsamı dışındalar. */
.text-link,
.hero__link,
.mark,
.ftr__tel {
  position: relative;
}

.text-link::after,
.hero__link::after,
.mark::after,
.ftr__tel::after {
  content: "";
  position: absolute;
  /* 28px'lik bir satırı 44px'e taşır; yatayda da biraz pay bırakır. */
  inset: -11px -6px;
}

/* Karusel okları mobilde 42px'e düşüyordu. */
@media (max-width:760px) {
  .slider__btn {
    width: 44px;
    height: 44px
  }
}

/* Footer navigasyonu: alt alta dizili dokuz bağlantı, her biri 21px.
   Burada ::after ile alan genişletmek yanlış olurdu. Bitişik hedeflerin
   basma alanları birbirinin üstüne biner, yanlış bağlantıya basılır.
   Gerçek padding veriyoruz; aradaki gap zaten ayrımı koruyor. */
.ftr nav {
  gap: .2rem
}

.ftr nav a {
  display: block;
  padding-block: .72rem;
}

/* Kimlik listesi ve NAP satırındaki bağımsız bağlantılar. */
.kimlik__list a,
.ftr__nap a {
  display: inline-block;
  padding-block: .5rem;
}

/* İletişim meta satırındaki tek bağlantı: 16px'lik ince bir satır.
   Satır yüksekliğini bozmadan basma alanını açmak için inline-flex. */
.ilt__meta a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
}

/* ---------- Minimal Editorial Guide Section (UI/UX Redesign) ---------- */
.editorial-guide{
  padding-block:clamp(4rem,7vw,6rem);
  background:#071b22;
  color:var(--paper);
  border-top:1px solid rgba(255,255,255,.07);
}
.editorial-guide__head{
  max-width:820px;
  margin-bottom:clamp(2.5rem,5vw,3.5rem);
}
.editorial-guide__title{
  margin:.5rem 0 1rem;
  color:var(--paper);
  font-family:var(--display);
  font-size:clamp(2.1rem,4.2vw,3.2rem);
  font-weight:600;
  line-height:1.12;
  letter-spacing:-.03em;
}
.editorial-guide__lead{
  color:rgba(255,255,255,.84);
  font-size:clamp(1.05rem,1.4vw,1.2rem);
  line-height:1.65;
  margin-bottom:.8rem;
}
.editorial-guide__sublead{
  color:rgba(255,255,255,.62);
  font-size:clamp(.95rem,1.2vw,1.05rem);
  line-height:1.65;
}

/* Grid Layout */
.editorial-guide__grid{
  display:grid;
  grid-template-columns:repeat(12,1fr);
  gap:1.5rem;
}

.ed-card{
  padding:clamp(1.5rem,3vw,2.2rem);
  border-radius:14px;
  background:rgba(255,255,255,.022);
  border:1px solid rgba(255,255,255,.07);
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  transition:border-color .25s ease, background-color .25s ease;
}
.ed-card:hover{
  border-color:rgba(255,255,255,.18);
  background:rgba(255,255,255,.035);
}

.ed-card--flow{
  grid-column:span 7;
}
.ed-card--services{
  grid-column:span 5;
}
.ed-card--price{
  grid-column:span 6;
}
.ed-card--region{
  grid-column:span 6;
}

.ed-card__head{
  margin-bottom:1rem;
}
.ed-card__tag{
  display:inline-block;
  color:rgba(255,255,255,.45);
  font-family:var(--mono);
  font-size:.65rem;
  font-weight:700;
  letter-spacing:.14em;
  text-transform:uppercase;
  margin-bottom:.4rem;
}
.ed-card h3{
  margin:0;
  color:var(--paper);
  font-family:var(--display);
  font-size:clamp(1.3rem,2vw,1.65rem);
  font-weight:600;
  letter-spacing:-.02em;
}
.ed-card__desc{
  color:rgba(255,255,255,.68);
  font-size:.93rem;
  line-height:1.6;
  margin-bottom:1.4rem;
}

/* Step Flow */
.ed-steps{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:1.25rem 1rem;
  margin:0 0 1.5rem;
  padding:0;
  list-style:none;
}
.ed-step{
  display:flex;
  gap:.8rem;
  align-items:flex-start;
}
.ed-step__num{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:28px;
  height:28px;
  border-radius:6px;
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.1);
  color:var(--paper);
  font-family:var(--mono);
  font-size:.78rem;
  font-weight:700;
  flex-shrink:0;
}
.ed-step strong{
  display:block;
  color:var(--paper);
  font-size:.9rem;
  font-weight:600;
  margin-bottom:.2rem;
}
.ed-step p{
  margin:0;
  color:rgba(255,255,255,.55);
  font-size:.8rem;
  line-height:1.45;
}

.ed-card__foot{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1rem;
  padding-top:1.2rem;
  border-top:1px solid rgba(255,255,255,.07);
  font-size:.82rem;
  color:rgba(255,255,255,.55);
  flex-wrap:wrap;
}

/* Services List */
.ed-services-list{
  display:flex;
  flex-direction:column;
  gap:.65rem;
}
.ed-service-item{
  display:flex;
  align-items:center;
  gap:.9rem;
  padding:.75rem .95rem;
  border-radius:10px;
  background:rgba(255,255,255,.02);
  border:1px solid rgba(255,255,255,.05);
  color:var(--paper);
  text-decoration:none;
  transition:all .2s ease;
}
.ed-service-item:hover{
  background:rgba(255,255,255,.05);
  border-color:rgba(255,255,255,.15);
}
.ed-service-item strong{
  display:block;
  font-size:.88rem;
  font-weight:600;
  color:var(--paper);
}
.ed-service-item span{
  display:block;
  font-size:.76rem;
  color:rgba(255,255,255,.52);
}
.ed-service-item__arrow{
  margin-left:auto;
  color:rgba(255,255,255,.45);
  font-weight:600;
  font-size:1rem;
  transition:color .2s;
}
.ed-service-item:hover .ed-service-item__arrow{
  color:var(--paper);
}

/* Region Chips */
.ed-region-badges{
  display:flex;
  flex-wrap:wrap;
  gap:.6rem;
}
.ed-chip{
  padding:.5rem .9rem;
  border-radius:8px;
  background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.1);
  color:rgba(255,255,255,.88);
  font-size:.82rem;
  font-weight:500;
  text-decoration:none;
  transition:all .2s ease;
}
.ed-chip:hover{
  background:rgba(255,255,255,.1);
  color:#fff;
  border-color:rgba(255,255,255,.25);
}
.ed-chip--ghost{
  color:rgba(255,255,255,.6);
}

@media (max-width:960px){
  .ed-card--flow,
  .ed-card--services,
  .ed-card--price,
  .ed-card--region{
    grid-column:span 12;
  }
  .ed-steps{
    grid-template-columns:1fr;
  }
}

/* ==========================================
   Accordion Gallery (React Bits Variant)
   MASAL Malatya Koltuk Yıkama Design System
   ========================================== */

.vitrin-gallery {
  padding: 85px 0;
  background: var(--bg, #071b22);
  position: relative;
  overflow: hidden;
}

.vitrin-gallery__head {
  text-align: center;
  max-width: 720px;
  margin: 0 auto 40px auto;
  position: relative;
  z-index: 1;
}

.vitrin-gallery__title {
  color: #ffffff !important;
  font-family: var(--font-title, 'Fraunces', Georgia, serif);
  font-size: clamp(2.2rem, 4.5vw, 3.4rem) !important;
  font-weight: 800 !important;
  line-height: 1.15 !important;
  letter-spacing: -0.02em !important;
  margin: 0 0 14px 0 !important;
  text-shadow: 0 4px 20px rgba(0, 0, 0, 0.95);
}

.vitrin-gallery__sub {
  color: rgba(255, 255, 255, 0.92) !important;
  font-size: clamp(1.05rem, 1.6vw, 1.25rem) !important;
  line-height: 1.6 !important;
  margin: 0 !important;
  font-weight: 400 !important;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.85);
}

.accordion-gallery {
  --ag-accent: #5B9BC4;
  --ag-overlay: #071b22;
  --ag-text: #ffffff;
  --ag-gap: 14px;
  --ag-radius: 20px;

  display: flex;
  flex-direction: row;
  gap: var(--ag-gap);
  width: 100%;
  max-width: 100%;
  height: 520px;
  perspective: 1400px;
  perspective-origin: 50% 50%;
  margin-top: 10px;
  position: relative;
  z-index: 1;
}

.accordion-gallery--vertical {
  flex-direction: column;
}

.ag-panel {
  position: relative;
  flex: 1 1 0;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  border-radius: var(--ag-radius);
  cursor: pointer;
  display: block;
  text-decoration: none;
  outline: none;
  transform-style: preserve-3d;
  transform-origin: center center;
  background: #061116;
  box-shadow: 0 20px 48px -16px rgba(0, 0, 0, 0.8), 0 0 0 1px rgba(255, 255, 255, 0.12);
  will-change: flex-grow, transform, filter;
  -webkit-tap-highlight-color: transparent;
  transition: flex-grow 0.55s cubic-bezier(0.16, 1, 0.3, 1), transform 0.55s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.35s ease, border-color 0.35s ease, filter 0.35s ease;
  transform: rotateY(4deg) scale(0.98);
  filter: brightness(0.85);
}

.ag-panel:hover {
  box-shadow: 0 24px 56px -14px rgba(0, 0, 0, 0.9), 0 0 0 1px rgba(91, 155, 196, 0.35);
  filter: brightness(0.95);
}

.ag-panel--active {
  flex-grow: 4 !important;
  transform: rotateY(0deg) scale(1) !important;
  filter: brightness(1) !important;
  box-shadow: 0 28px 60px -12px rgba(0, 0, 0, 0.95), 0 0 0 1.5px rgba(91, 155, 196, 0.5);
}

.ag-panel:focus-visible {
  box-shadow:
    0 0 0 2.5px var(--ag-accent),
    0 20px 48px -16px rgba(0, 0, 0, 0.9);
}

.ag-panel__frame {
  position: absolute;
  inset: 0;
  overflow: hidden;
  border-radius: inherit;
}

.ag-panel__media {
  --ag-gray: 0.08;
  --ag-dim: 0.08;
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  filter: grayscale(var(--ag-gray));
  will-change: transform, filter;
}

.ag-panel__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
  display: block;
  user-select: none;
  -webkit-user-drag: none;
  transition: transform 0.6s cubic-bezier(0.25, 1, 0.5, 1);
}

.ag-panel[data-type="koltuk"] .ag-panel__media img { object-position: center 42%; }
.ag-panel[data-type="arac"] .ag-panel__media img { object-position: center 46%; }
.ag-panel[data-type="far"] .ag-panel__media img { object-position: 45% 35%; }
.ag-panel[data-type="yatak"] .ag-panel__media img { object-position: center 36%; }
.ag-panel[data-type="sandalye"] .ag-panel__media img { object-position: center 42%; }
.ag-panel[data-type="berjer"] .ag-panel__media img { object-position: center 46%; }

.ag-panel:hover .ag-panel__media img,
.ag-panel--active .ag-panel__media img {
  transform: scale(1.05);
}

.ag-panel__overlay {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(180deg, rgba(7, 27, 34, 0) 38%, rgba(7, 27, 34, 0.55) 68%, rgba(7, 27, 34, 0.95) 100%),
    rgba(7, 27, 34, calc(var(--ag-dim, 0.08)));
  transition: opacity 0.35s ease;
}

.ag-panel__label {
  position: absolute;
  left: 20px;
  bottom: 22px;
  right: 20px;
  display: flex;
  align-items: center;
  gap: 10px;
  pointer-events: none;
  z-index: 5;
}

.ag-panel__bar {
  flex: 0 0 auto;
  width: 3px;
  height: 24px;
  border-radius: 3px;
  background: var(--ag-accent, #5B9BC4);
  opacity: 0.8;
  box-shadow: 0 0 10px rgba(91, 155, 196, 0.42);
  transition: all 0.35s ease;
}

.ag-panel--active .ag-panel__bar,
.ag-panel:hover .ag-panel__bar {
  opacity: 1;
  height: 28px;
  box-shadow: 0 0 12px rgba(91, 155, 196, 0.6);
}

.ag-panel__text {
  color: #ffffff;
  font-family: inherit;
  font-weight: 700;
  font-size: clamp(1rem, 1.4vw, 1.3rem);
  letter-spacing: 0.015em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  opacity: 0.95;
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.95), 0 1px 3px rgba(0, 0, 0, 0.9);
  transition: opacity 0.35s ease;
}

.ag-panel--active .ag-panel__text,
.ag-panel:hover .ag-panel__text {
  opacity: 1;
}

.vitrin-gallery__foot {
  display: flex;
  justify-content: center;
  margin-top: 45px;
  position: relative;
  z-index: 1;
}

.vitrin-gallery__cta-btn {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  background: linear-gradient(135deg, rgba(91, 155, 196, 0.16) 0%, rgba(60, 126, 163, 0.28) 100%);
  color: #ffffff;
  font-family: inherit;
  font-size: clamp(1.05rem, 1.4vw, 1.2rem);
  font-weight: 700;
  padding: 16px 40px;
  border-radius: 50px;
  border: 1px solid rgba(91, 155, 196, 0.5);
  box-shadow: 0 12px 36px -12px rgba(91, 155, 196, 0.28), 0 0 0 1px rgba(255, 255, 255, 0.1);
  text-decoration: none;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  transition: all 0.35s cubic-bezier(0.25, 1, 0.5, 1);
}

.vitrin-gallery__cta-btn:hover {
  background: linear-gradient(135deg, rgba(91, 155, 196, 0.32) 0%, rgba(60, 126, 163, 0.5) 100%);
  color: #ffffff;
  border-color: #5B9BC4;
  transform: translateY(-3px) scale(1.02);
  box-shadow: 0 18px 45px -10px rgba(91, 155, 196, 0.38), 0 0 18px rgba(91, 155, 196, 0.2);
}

.vitrin-gallery__cta-btn svg {
  transition: transform 0.35s ease;
}

.vitrin-gallery__cta-btn:hover svg {
  transform: translateX(6px);
}

@media (max-width: 900px) {
  .accordion-gallery {
    height: 460px;
    --ag-gap: 10px;
  }
}

@media (max-width: 768px) {
  .vitrin-gallery {
    padding: 50px 0;
  }

  .accordion-gallery {
    flex-direction: column;
    perspective: none;
    height: auto !important;
    gap: 12px;
  }

  .ag-panel {
    min-height: 110px;
    height: 110px;
    transform: none !important;
    flex: none !important;
    border-radius: 16px;
  }

  .ag-panel--active {
    height: 260px !important;
  }

  .ag-panel__label {
    left: 16px;
    bottom: 16px;
    right: 16px;
  }

  .vitrin-gallery__cta-btn {
    width: 100%;
    justify-content: center;
    padding: 16px 24px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .ag-panel,
  .ag-panel__media {
    will-change: auto;
  }
}