/* ==========================================================================
   Duygu Özlü İç Mimarlık — site stili
   SUKAS sisteminden taşındı (2026-10-07, ev standardı: "güncel tasarımlarımız").
   Tek dosya, elle yazılmış; çerçeve yok. Token'lar :root'ta — yeni hex,
   yeni radius, yeni easing İCAT EDİLMEZ.

   TON (proje sahibi): siyah-beyaz.
     Koyu yüzeyler (slider, iletişim bandı, footer) → --siyah #212121
     Gövde (2026-10-07): BEYAZ ⇄ AÇIK GRİ dönüşümlü; art arda iki bölüm aynı zemini paylaşmaz.
     GENİŞLİK (2026-10-07): her yapı 1400px kap içinde — slider ve bant dahil; kenardan kenara içerik yok.
   Renk yok; "vurgu" monokrom: koyu zeminde beyaz dolgu, açık zeminde siyah dolgu.
   ========================================================================== */

/* ---------- Font: Clarity City (2026-10-07, proje sahibi) ----------
   VMware, SIL Open Font License — @cds/city@1.1.0 paketinden yerel woff2. Türkçe glifler doğrulandı. */
@font-face { font-family: 'Clarity City'; src: url('../fontlar/ClarityCity-Regular.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'Clarity City'; src: url('../fontlar/ClarityCity-Medium.woff2') format('woff2'); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: 'Clarity City'; src: url('../fontlar/ClarityCity-SemiBold.woff2') format('woff2'); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: 'Clarity City'; src: url('../fontlar/ClarityCity-Bold.woff2') format('woff2'); font-weight: 700; font-style: normal; font-display: swap; }

:root {
  /* Palet */
  --siyah: #212121;
  --siyah-derin: #1a1a1a;   /* koyu içinde ikinci kademe (footer alt bar, mega görsel zemini) */
  --beyaz: #ffffff;
  --kirik-beyaz: #f1f1f1;   /* açık gri (proje sahibi, 2026-08: "#f1f1f1 tonunu seviyorum") */

  /* Açık zemin metni */
  --fg: #212121;
  --fg-soluk: #5c5c5c;      /* AA: beyaz üzerinde 6.6:1 */
  --cizgi: rgba(33, 33, 33, 0.10);
  --cizgi-guclu: rgba(33, 33, 33, 0.22);

  /* Koyu zemin metni */
  --koyu-fg: #ffffff;
  --koyu-soluk: rgba(255, 255, 255, 0.68);   /* AA: #212121 üzerinde 9:1 */
  --koyu-ince: rgba(255, 255, 255, 0.50);    /* fine print, AA 5.2:1 */
  --koyu-cizgi: rgba(255, 255, 255, 0.12);
  --koyu-cizgi-guclu: rgba(255, 255, 255, 0.28);

  /* Köşe skalası — TEK kaynak. Düğmeler hap → sitede 0px köşe YOK, taban 6px. */
  /* Köşe (2026-10-07, proje sahibi): SİTE GENELİNDE 6px — düğmeler, ikon kutuları, kartlar, görseller dahil.
     Daire yalnız 4–15px'lik nokta işaretlerinde (şerit ayracı, süreç noktası). */
  --r-kucuk: 6px;
  --r-orta: 6px;
  --r-buyuk: 6px;
  --r-hap: 6px;
  --r-ic: 4px;      /* 6px'lik kutunun içindeki iç kutu (düğme rozeti) */

  /* Hareket — projede TEK easing. */
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  --sure-mikro: 180ms;
  --sure-yuzey: 600ms;

  /* Ölçü */
  --kap: 1400px;
  --kenar: clamp(16px, 4vw, 40px);
  --ust-yukseklik: 84px;

  --font: 'Clarity City', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
  --odak: var(--siyah);
}

/* ---------- Taban ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; scroll-padding-top: var(--ust-yukseklik); }
body { margin: 0; font-family: var(--font); font-size: 1rem; line-height: 1.6; font-weight: 400; color: var(--fg); background: var(--beyaz); }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
ul { list-style: none; margin: 0; padding: 0; }
p { margin: 0; }
h1, h2, h3 { margin: 0; font-weight: 500; /* başlıklar 500 (2026-10-07 rev. 4) */ letter-spacing: -0.025em; line-height: 1.05; text-wrap: balance; }

::selection { background: var(--siyah); color: var(--beyaz); }
.koyu-zemin ::selection, .alt ::selection { background: var(--beyaz); color: var(--siyah); }

:focus-visible { outline: 2px solid var(--odak); outline-offset: 3px; border-radius: var(--r-kucuk); }
.koyu-zemin, .alt, .cekmece__panel { --odak: var(--beyaz); }
.mega { --odak: var(--siyah); }

.kap { width: 100%; max-width: calc(var(--kap) + var(--kenar) * 2); margin-inline: auto; padding-inline: var(--kenar); }

.ikon { width: 1.25rem; height: 1.25rem; flex: none; }

.atla { position: absolute; left: var(--kenar); top: -100px; z-index: 100; padding: 10px 18px; border-radius: var(--r-hap); background: var(--beyaz); color: var(--siyah); font-weight: 600; transition: top var(--sure-mikro) var(--ease); }
.atla:focus { top: 12px; }

/* ---------- Film grain (hero, footer) ---------- */
.grain { position: relative; isolation: isolate; }
.grain::after {
  content: ""; position: absolute; inset: 0; z-index: 3; pointer-events: none; opacity: 0.07; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ==========================================================================
   DÜĞME — hap + uçta ters renkli daire rozet (maimusavirlik/anilakis yapısı)
   ========================================================================== */
.dugme {
  --yuk: 48px;
  display: inline-flex; align-items: center; gap: 14px; height: var(--yuk); padding: 0 24px;
  border-radius: var(--r-hap); border: 1px solid transparent; font-size: 0.9375rem; font-weight: 500; letter-spacing: 0.005em; white-space: nowrap;
  transition: background-color var(--sure-mikro) var(--ease), border-color var(--sure-mikro) var(--ease), color var(--sure-mikro) var(--ease), transform var(--sure-mikro) var(--ease);
}
.dugme--kucuk { --yuk: 42px; padding: 0 20px; font-size: 0.875rem; }
.dugme--rozetli { padding-right: 5px; }
.dugme__rozet { display: grid; place-items: center; width: calc(var(--yuk) - 10px); height: calc(var(--yuk) - 10px); border-radius: var(--r-ic); transition: background-color var(--sure-mikro) var(--ease); }
.dugme__ok { width: 1.05rem; height: 1.05rem; transition: transform 400ms var(--ease); }
.dugme:hover .dugme__ok { transform: translateX(3px); }
.dugme:active { transform: translateY(1px); }

.dugme--beyaz { background: var(--beyaz); color: var(--siyah); }
.dugme--beyaz .dugme__rozet { background: var(--siyah); color: var(--beyaz); }
.dugme--beyaz:hover { background: #ececec; }

.dugme--koyu { background: var(--siyah); color: var(--beyaz); }
.dugme--koyu .dugme__rozet { background: var(--beyaz); color: var(--siyah); }
.dugme--koyu:hover { background: #000; }

.dugme--cizgi-acik { color: var(--beyaz); border-color: var(--koyu-cizgi-guclu); }
.dugme--cizgi-acik:hover { border-color: var(--beyaz); background: rgba(255, 255, 255, 0.06); }

.dugme--cizgi { color: var(--siyah); border-color: var(--cizgi-guclu); }
.dugme--cizgi:hover { border-color: var(--siyah); }

/* Menü düğmesi (header, çekmece, mega) — ÖNCEKİ TASARIM (2026-10-07): hap form + daire rozet + ok.
   Sitenin 6px kuralının TEK bilinçli istisnası; başka düğmede kullanılmaz. */
.dugme--menu { border-radius: 999px; }
.dugme--menu .dugme__rozet { border-radius: 50%; }

/* ==========================================================================
   MARKA — TİPOGRAFİK (vektör logo yok; 498×96 PNG büyütülünce bulanık). currentColor.
   ========================================================================== */
.marka { display: inline-grid; gap: 5px; line-height: 1; color: inherit; }
.marka__ad { font-size: 1.375rem; font-weight: 500; letter-spacing: -0.02em; }
.marka__unvan { font-size: 0.6875rem; font-weight: 500; letter-spacing: 0.28em; text-transform: uppercase; opacity: 0.62; }
@media (max-width: 767px) { .marka__ad { font-size: 1.1875rem; } }

/* ==========================================================================
   HEADER — logo sol, menü ORTADA, eylemler sağ. Varsayılan: beyaz zemin, sticky, kaydırınca ince gölge.
   `.ust--seffaf` (2026-10-07): yalnız tam ekran slider'lı sayfada — zeminsiz, slider ÜSTÜNDE, beyaz yazı;
   kaydırınca (`.dolu`) ya da mega menü açılınca beyaz zemine döner.
   ========================================================================== */
.ust {
  position: sticky; top: 0; z-index: 50; color: var(--fg); background: var(--beyaz);
  border-bottom: 1px solid var(--cizgi);
  transition: box-shadow 400ms var(--ease), border-color 400ms var(--ease);
}
.ust.dolu, .ust.mega-acik { box-shadow: 0 10px 30px -18px rgba(33, 33, 33, 0.35); }

.ust--seffaf { position: fixed; inset: 0 0 auto; transition: background-color 400ms var(--ease), color 400ms var(--ease), box-shadow 400ms var(--ease), border-color 400ms var(--ease); }
.ust--seffaf:not(.dolu):not(.mega-acik) { --odak: var(--beyaz); background: transparent; border-bottom-color: transparent; color: var(--beyaz); } /* alt çizgi yok (2026-10-07) */
.ust--seffaf::before { /* slider üstünde menü okunurluğu için yumuşak üst gölge */
  content: ""; position: absolute; inset: 0 0 -48px; z-index: -1; pointer-events: none;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0)); transition: opacity 400ms var(--ease);
}
.ust--seffaf.dolu::before, .ust--seffaf.mega-acik::before { opacity: 0; }
.ust--seffaf:not(.dolu):not(.mega-acik) .ana-menu__bag { color: rgba(255, 255, 255, 0.78); }
.ust--seffaf:not(.dolu):not(.mega-acik) .ana-menu__bag:hover,
.ust--seffaf:not(.dolu):not(.mega-acik) .ana-menu__bag.etkin { color: var(--beyaz); }
.ust--seffaf:not(.dolu):not(.mega-acik) .ust__menu-dugme { border-color: rgba(255, 255, 255, 0.35); }
.ust--seffaf:not(.dolu):not(.mega-acik) .ust__menu-dugme:hover { border-color: var(--beyaz); background: rgba(255, 255, 255, 0.08); }
/* Menü düğmesi slider üstünde ters renk: beyaz hap, siyah rozet. */
.ust--seffaf:not(.dolu):not(.mega-acik) .dugme--koyu { background: var(--beyaz); color: var(--siyah); }
.ust--seffaf:not(.dolu):not(.mega-acik) .dugme--koyu .dugme__rozet { background: var(--siyah); color: var(--beyaz); }
.ust--seffaf:not(.dolu):not(.mega-acik) .dugme--koyu:hover { background: #ececec; }
.ust--seffaf:not(.dolu):not(.mega-acik) ::selection { background: var(--beyaz); color: var(--siyah); }

.ust__ic { display: flex; align-items: center; justify-content: space-between; gap: 24px; height: var(--ust-yukseklik); }

.ana-menu { display: none; }
.ana-menu__liste { display: flex; align-items: center; gap: 4px; }
.ana-menu__bag {
  position: relative; display: inline-flex; align-items: center; gap: 6px; height: 42px; padding: 0 16px;
  font-size: 0.9375rem; font-weight: 500; color: var(--fg-soluk); border-radius: var(--r-hap);
  transition: color var(--sure-mikro) var(--ease);
}
/* Aktif/hover göstergesi ALT ÇİZGİ DEĞİL (2026-10-07): yalnız renk; aktif sayfa ayrıca 600 kalınlık. */
.ana-menu__bag:hover, .ana-menu__bag.etkin, .ana-menu__tetik[aria-expanded="true"] { color: var(--fg); }
.ana-menu__bag.etkin { font-weight: 600; }
.ana-menu__ok { width: 1rem; height: 1rem; transition: transform 300ms var(--ease); }
.ana-menu__tetik[aria-expanded="true"] .ana-menu__ok { transform: rotate(180deg); }

.ust__eylem { display: flex; align-items: center; justify-content: flex-end; gap: 20px; }
.ust__eylem .dugme { display: none; }
.ust__menu-dugme { display: grid; place-items: center; width: 46px; height: 46px; border-radius: var(--r-kucuk); border: 1px solid var(--cizgi-guclu); transition: border-color var(--sure-mikro) var(--ease), background-color var(--sure-mikro) var(--ease); }
.ust__menu-dugme:hover { border-color: var(--siyah); background: var(--kirik-beyaz); }

@media (min-width: 768px) {
  .ust__eylem .dugme { display: inline-flex; }
}
@media (min-width: 1100px) {
  /* 1fr · auto · 1fr → menü tam ortada, iki yan eşit. */
  .ust__ic { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); }
  .ust__marka { justify-self: start; }
  .ana-menu { display: block; }
  .ust__menu-dugme { display: none; }
}

/* ---------- MEGA MENÜ — solid beyaz panel ---------- */
.mega {
  position: absolute; left: 0; right: 0; top: calc(100% + 8px); color: var(--fg);
  visibility: hidden; opacity: 0; transform: translateY(10px); pointer-events: none;
  transition: opacity 260ms var(--ease), transform 260ms var(--ease), visibility 0s linear 260ms;
}
.mega.acik { visibility: visible; opacity: 1; transform: none; pointer-events: auto; transition: opacity 260ms var(--ease), transform 260ms var(--ease), visibility 0s; }
/* ⚠ 1100px altında mega menü yok (çekmece var); gizli panel düzende yer kaplayıp
   mobilde sayfayı 413px'e genişletiyordu (ölçüldü). */
@media (max-width: 1099px) { .mega { display: none; } }
.mega::before { /* panel ile header arasındaki 8px boşlukta hover kopmasın */
  content: ""; position: absolute; left: 0; right: 0; top: -8px; height: 8px;
}
.mega__ic {
  display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: 8px; padding: 8px;
  background: var(--beyaz); border: 1px solid var(--cizgi); border-radius: var(--r-buyuk); box-shadow: 0 30px 80px -24px rgba(33, 33, 33, 0.35);
}
.mega__liste-alan { padding: 28px 28px 24px; }
.mega__kolon-baslik { font-size: 0.8125rem; font-weight: 500; color: var(--fg-soluk); margin-bottom: 14px; }
.mega__liste { display: grid; grid-template-columns: 1fr 1fr; column-gap: 24px; }
.mega__bag {
  display: grid; gap: 3px; padding: 14px 16px; margin-inline: -16px; border-radius: var(--r-orta);
  transition: background-color var(--sure-mikro) var(--ease);
}
.mega__bag:hover, .mega__bag:focus-visible { background: var(--kirik-beyaz); }
.mega__ad { font-weight: 500; font-size: 1rem; letter-spacing: -0.01em; }
.mega__ozet { font-size: 0.875rem; line-height: 1.45; color: var(--fg-soluk); }
.mega__panel { display: flex; flex-direction: column; overflow: hidden; border-radius: var(--r-orta); background: var(--siyah); color: var(--koyu-fg); }
/* Görsel paneldeki boşluğu doldurur: panel liste yüksekliğine uzar, görsel kalan alanı alır (2026-10-15: altta boşluk kalıyordu). */
.mega__gorseller { position: relative; flex: 1; min-height: 140px; overflow: hidden; background: var(--siyah-derin); }
.mega__gorsel { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transform: scale(1.04); transition: opacity 500ms var(--ease), transform 900ms var(--ease); }
.mega__gorsel.aktif { opacity: 1; transform: none; }
.mega__panel-metin { display: grid; gap: 12px; padding: 24px; margin-top: auto; }
.mega__panel-baslik { font-size: 1.25rem; font-weight: 500; letter-spacing: -0.015em; line-height: 1.2; }
.mega__panel-aciklama { font-size: 0.875rem; line-height: 1.55; color: var(--koyu-soluk); }
.mega__panel-eylem { margin-top: 6px; }
.mega__panel .dugme--koyu { background: var(--beyaz); color: var(--siyah); }
.mega__panel .dugme--koyu .dugme__rozet { background: var(--siyah); color: var(--beyaz); }
.mega__panel .dugme--koyu:hover { background: #ececec; }

/* ---------- MOBİL ÇEKMECE — soldan tam genişlik ---------- */
.cekmece { position: fixed; inset: 0; z-index: 80; visibility: hidden; transition: visibility 0s linear 500ms; }
.cekmece.acik { visibility: visible; transition: visibility 0s; }
.cekmece__perde { position: absolute; inset: 0; background: rgba(0, 0, 0, 0.5); opacity: 0; transition: opacity 500ms var(--ease); }
.cekmece.acik .cekmece__perde { opacity: 1; }
.cekmece__panel {
  position: absolute; inset: 0 auto 0 0; width: 100%; max-width: 480px; display: flex; flex-direction: column;
  background: var(--siyah); color: var(--koyu-fg); overflow-y: auto; overscroll-behavior: contain;
  transform: translateX(-100%); transition: transform 500ms var(--ease);
}
.cekmece.acik .cekmece__panel { transform: none; }
.cekmece__ust { display: flex; align-items: center; justify-content: space-between; height: var(--ust-yukseklik); padding-inline: var(--kenar); border-bottom: 1px solid var(--koyu-cizgi); flex: none; }
.cekmece__kapat { display: grid; place-items: center; width: 46px; height: 46px; border-radius: var(--r-kucuk); border: 1px solid var(--koyu-cizgi-guclu); }
.cekmece__menu { padding: 12px var(--kenar); }
.cekmece__menu > ul > li { border-bottom: 1px solid var(--koyu-cizgi); }
.cekmece__bag { display: flex; align-items: center; justify-content: space-between; width: 100%; padding: 18px 0; font-size: 1.375rem; font-weight: 600; letter-spacing: -0.015em; text-align: left; }
.cekmece__bag[aria-current="page"] { text-decoration: underline; text-underline-offset: 6px; text-decoration-thickness: 1px; }
.cekmece__ok { transition: transform 300ms var(--ease); }
.cekmece__bag[aria-expanded="true"] .cekmece__ok { transform: rotate(180deg); }
.cekmece__alt { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 400ms var(--ease); }
.cekmece__akordeon.acik .cekmece__alt { grid-template-rows: 1fr; }
.cekmece__alt > ul { overflow: hidden; }
.cekmece__alt a { display: block; padding: 9px 0; color: var(--koyu-soluk); font-size: 1rem; }
.cekmece__alt li:last-child { padding-bottom: 14px; }
.cekmece__alt a:hover { color: var(--koyu-fg); }
.cekmece__tumu { display: inline-flex !important; align-items: center; gap: 8px; color: var(--koyu-fg) !important; font-weight: 500; }
.cekmece__tumu .ikon { width: 1rem; height: 1rem; }
.cekmece__alt-bilgi { display: grid; gap: 14px; margin-top: auto; padding: 24px var(--kenar) 32px; border-top: 1px solid var(--koyu-cizgi); }
.cekmece__alt-bilgi > a:not(.dugme) { display: inline-flex; align-items: center; gap: 10px; color: var(--koyu-soluk); font-size: 0.9375rem; }
.cekmece__alt-bilgi .dugme { justify-self: start; margin-top: 8px; }
body.kilitli { overflow: hidden; }

/* ==========================================================================
   HERO SLIDER
   ========================================================================== */
.hero {
  /* TAM GENİŞLİK (2026-10-07: "önceki görünümü daha iyiydi"); içerik kap hizasında. */
  position: relative; overflow: hidden; background: var(--siyah); color: var(--koyu-fg);
  height: calc(78svh - var(--ust-yukseklik)); min-height: 520px;
}
@media (min-width: 768px) { .hero { height: calc(100svh - var(--ust-yukseklik)); min-height: 600px; max-height: 960px; } }
/* Header slider ÜSTÜNDE (`.ust--seffaf` sayfası): slider tam ekran, içerik header yüksekliği kadar aşağıdan. */
.ust--seffaf ~ main .hero { height: 78svh; min-height: 560px; }
.ust--seffaf ~ main .hero__icerik { padding-top: calc(var(--ust-yukseklik) + 32px); }
@media (min-width: 768px) { .ust--seffaf ~ main .hero { height: 100svh; min-height: 640px; max-height: 1040px; } }

.hero__slaytlar { position: absolute; inset: 0; }
.hero__slayt { position: absolute; inset: 0; display: flex; align-items: center; visibility: hidden; opacity: 0; transition: opacity 1100ms var(--ease), visibility 0s linear 1100ms; }
.hero__slayt.aktif { visibility: visible; opacity: 1; z-index: 1; transition: opacity 1100ms var(--ease), visibility 0s; }

.hero__gorsel { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 70% 50%; transform: scale(1.08); transition: transform 8000ms linear; }
.hero__slayt.aktif .hero__gorsel { transform: scale(1); }
/* Sol taraf koyu → başlık okunur; alt kenar kontrollere geçiş. */
.hero__perde {
  position: absolute; inset: 0;
  background:
    /* Renkli görsel (2026-10-07): perde yalnız metin tarafında; sağ yarı görselin kendi rengi. */
    linear-gradient(90deg, rgba(33, 33, 33, 0.86) 0%, rgba(33, 33, 33, 0.6) 34%, rgba(33, 33, 33, 0.08) 68%, rgba(33, 33, 33, 0) 100%),
    linear-gradient(0deg, rgba(33, 33, 33, 0.7) 0%, rgba(33, 33, 33, 0) 28%);
}

.hero__icerik { position: relative; z-index: 2; padding-top: 48px; padding-bottom: 120px; }
/* Başlık İKİ SATIR (2026-10-07 rev. 4): geniş ölçü + küçültülmüş boyut; kalınlık 500. */
.hero__baslik { max-width: 20ch; font-size: clamp(1.625rem, 4.2vw, 4rem); font-weight: 500; line-height: 1.08; letter-spacing: -0.025em; }
.hero__metin { max-width: 46ch; margin-top: 24px; font-size: clamp(1rem, 1.25vw, 1.1875rem); line-height: 1.6; color: var(--koyu-soluk); }
.hero__eylem { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 36px; }

/* Metin girişi — yalnız JS varken ve slayt değişirken. İlk slayt HTML'de
   `aktif` geldiği için ilk boyamada geçiş tetiklenmez: başlık animasyona bağlı değil. */
.js .hero__slayt .hero__baslik, .js .hero__slayt .hero__metin, .js .hero__slayt .hero__eylem { opacity: 0; transform: translateY(28px); transition: opacity 900ms var(--ease), transform 900ms var(--ease); }
.js .hero__slayt.aktif .hero__baslik, .js .hero__slayt.aktif .hero__metin, .js .hero__slayt.aktif .hero__eylem { opacity: 1; transform: none; }
.js .hero__slayt.aktif .hero__baslik { transition-delay: 250ms; }
.js .hero__slayt.aktif .hero__metin { transition-delay: 380ms; }
.js .hero__slayt.aktif .hero__eylem { transition-delay: 500ms; }

/* Kontroller */
.hero__kontrol { position: absolute; left: 0; right: 0; bottom: 0; z-index: 4; display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; padding-bottom: 32px; margin-inline: auto; }
.hero__adimlar { display: flex; gap: 12px; flex: 1; max-width: 640px; }
.hero__adim { flex: 1; min-width: 0; display: grid; gap: 12px; padding-top: 14px; text-align: left; color: var(--koyu-ince); transition: color var(--sure-mikro) var(--ease); }
.hero__adim:hover, .hero__adim.aktif { color: var(--koyu-fg); }
.hero__adim-cizgi { position: relative; display: block; height: 2px; border-radius: var(--r-hap); background: var(--koyu-cizgi-guclu); overflow: hidden; }
.hero__adim-dolgu { position: absolute; inset: 0; background: var(--beyaz); transform: scaleX(0); transform-origin: left; }
.hero__adim.aktif .hero__adim-dolgu { animation: ilerle var(--hero-sure, 7000ms) linear forwards; }
.hero__adim.gecti .hero__adim-dolgu { transform: scaleX(1); }
.hero.bekle .hero__adim.aktif .hero__adim-dolgu { animation-play-state: paused; }
.hero__adim-ad { display: none; font-size: 0.8125rem; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@keyframes ilerle { from { transform: scaleX(0); } to { transform: scaleX(1); } }

.hero__oklar { display: flex; gap: 8px; flex: none; }
/* ⚠ Sabit WhatsApp düğmesi (sağ alt) okların üstüne biniyordu (ölçüldü): kap kenarı ekran kenarına
   96px'ten yakınsa (≈1600px altı) oklar sola kayar. */
@media (max-width: 1600px) { .hero__oklar { margin-right: 68px; } }
.hero__ok { display: grid; place-items: center; width: 48px; height: 48px; border-radius: var(--r-kucuk); border: 1px solid var(--koyu-cizgi-guclu); color: var(--koyu-fg); transition: border-color var(--sure-mikro) var(--ease), background-color var(--sure-mikro) var(--ease); }
.hero__ok:hover { border-color: var(--beyaz); background: rgba(255, 255, 255, 0.08); }
.hero__ok:active { background: rgba(255, 255, 255, 0.14); }
.hero__ok .ikon { width: 1.125rem; height: 1.125rem; }
.hero.elle .hero__adim.aktif .hero__adim-dolgu { animation: none; transform: scaleX(1); }
.no-js .hero__kontrol { display: none; }

@media (min-width: 768px) {
  .hero__adim-ad { display: block; }
  .hero__kontrol { padding-bottom: 44px; }
  .hero__icerik { padding-bottom: 96px; }
}
@media (max-width: 767px) {
  .hero__gorsel { object-position: 78% 50%; }
  .hero__perde { background: linear-gradient(0deg, rgba(33, 33, 33, 0.95) 0%, rgba(33, 33, 33, 0.75) 45%, rgba(33, 33, 33, 0.35) 100%); }
  .hero__slayt { align-items: flex-end; }
  .hero__ok { width: 44px; height: 44px; }
  /* Mobil (2026-10-15): WhatsApp düğmesi hero'nun altında kalıyor → okların sola kayması gerekmiyor.
     Çizgiler 44px dokunma alanı alır; görsel konum aynı kalsın diye alt boşluk kadar azaltıldı. */
  .hero__oklar { margin-right: 0; }
  .hero__adim { padding-block: 21px; }
  .hero__kontrol { padding-bottom: 11px; align-items: center; }
}

/* ==========================================================================
   BÖLÜM BAŞLIĞI — tüm H2'ler (bolum_basligi())
   ========================================================================== */
.bolum-baslik { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 24px; }
.bolum-baslik--orta { justify-content: center; text-align: center; }
.bolum-baslik__metin { display: grid; gap: 20px; max-width: 760px; }
.bolum-baslik__h2 { font-size: clamp(2rem, 3.6vw, 3.25rem); font-weight: 500; line-height: 1.08; letter-spacing: -0.03em; }
.bolum-baslik__aciklama { font-size: 1.0625rem; line-height: 1.65; color: var(--fg-soluk); max-width: 58ch; }
.bolum-baslik--koyu .bolum-baslik__aciklama { color: var(--koyu-soluk); }

/* ==========================================================================
   HAKKIMDA (ana sayfa) — alternatif düzen (2026-10-15): üstte metin + üst üste binen iki görsel,
   altta dört ilke yatay şerit (hairline ayraçlı, siyah ikon kutuları). Mobilde görsel önce.
   ========================================================================== */
.hk-ana__ust { display: grid; gap: 48px; }
.hk-ana__gorseller { position: relative; margin: 0; padding: 0 0 56px; }
.hk-ana__buyuk { position: relative; display: block; overflow: hidden; width: 86%; margin-left: auto; aspect-ratio: 4 / 3; border-radius: var(--r-kucuk); background: var(--kirik-beyaz); }
.hk-ana__kucuk { position: absolute; left: 0; bottom: 0; display: block; overflow: hidden; width: 42%; aspect-ratio: 1 / 1; border: 8px solid var(--beyaz); border-radius: 14px; background: var(--kirik-beyaz); }
.hk-ana__buyuk img, .hk-ana__kucuk img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 1200ms var(--ease); }
.hk-ana__gorseller:hover .hk-ana__buyuk img { transform: scale(1.04); }
.hk-ana__metin { display: grid; gap: 20px; align-content: center; justify-items: start; }
.hk-ana__metin > p { max-width: 56ch; font-size: 1.0625rem; line-height: 1.7; color: var(--fg-soluk); }
.hk-ana__metin > p:first-of-type { color: var(--fg); }
.hk-ana__eylem { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 8px; }
.hk-ana__ilkeler { display: grid; margin-top: 64px; border-top: 1px solid var(--cizgi-guclu); }
.hk-ana__ilke { display: grid; grid-template-columns: 44px minmax(0, 1fr); column-gap: 16px; row-gap: 6px; align-content: start; padding: 28px 0; border-bottom: 1px solid var(--cizgi); }
.hk-ana__ikon { grid-row: span 2; display: grid; place-items: center; width: 44px; height: 44px; border-radius: var(--r-kucuk); background: var(--siyah); color: var(--beyaz); }
.hk-ana__ikon .ikon { width: 1.25rem; height: 1.25rem; }
.hk-ana__ilke-ad { align-self: end; font-size: 1.0625rem; font-weight: 500; letter-spacing: -0.01em; line-height: 1.3; }
.hk-ana__ilke-metin { font-size: 0.9375rem; line-height: 1.6; color: var(--fg-soluk); }
@media (min-width: 640px) { .hk-ana__ilkeler { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 40px; } }
@media (min-width: 1100px) {
  .hk-ana__ust { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: 88px; align-items: center; }
  /* Masaüstünde metin solda, görseller sağda (mobil görsel-önce DOM sırası korunur). */
  .hk-ana__gorseller { grid-column: 2; grid-row: 1; padding-bottom: 72px; }
  .hk-ana__metin { grid-column: 1; grid-row: 1; }
  .hk-ana__ilkeler { grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: 0; margin-top: 96px; border-bottom: 1px solid var(--cizgi); }
  .hk-ana__ilke { grid-template-columns: 1fr; row-gap: 14px; padding: 36px 32px 8px; border-bottom: 0; border-left: 1px solid var(--cizgi); }
  .hk-ana__ilke:first-child { padding-left: 0; border-left: 0; }
  .hk-ana__ikon { grid-row: auto; margin-bottom: 6px; }
  .hk-ana__ilke-metin { padding-bottom: 28px; }
}

/* ==========================================================================
   BÖLÜM RİTMİ (2026-10-07) — beyaz ⇄ açık gri dönüşümlü; ayraç çizgisi yok.
   Zemin sınıfı şablonda açıkça verilir (`bolum--gri`); sıra ana-sayfa.php başında.
   Boşluk: mobil 88px, masaüstü 128px (8'in katı).
   ========================================================================== */
.bolum { --hover-zemin: var(--kirik-beyaz); padding-block: 88px; background: var(--beyaz); }
.bolum--gri { --hover-zemin: var(--beyaz); background: var(--kirik-beyaz); }
@media (min-width: 1100px) {
  .bolum { padding-block: 128px; }
}

/* ==========================================================================
   KAYDIRICI ORTAKLARI (oklar + projeler izi; 2026-10-07). Hizmet kutu kartları 2026-10-15'te
   genişleyen görsel kartlara (HİZMET VİTRİNİ) dönüştü.
   ========================================================================== */
.bolum-baslik__ek { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.kaydirici-oklar { display: flex; gap: 8px; }
.kaydirici-ok {
  display: grid; place-items: center; width: 48px; height: 48px; border-radius: var(--r-kucuk);
  border: 1px solid var(--cizgi-guclu); color: var(--fg);
  transition: background-color var(--sure-mikro) var(--ease), color var(--sure-mikro) var(--ease), border-color var(--sure-mikro) var(--ease), opacity var(--sure-mikro) var(--ease);
}
.kaydirici-ok:hover:not(:disabled) { background: var(--siyah); border-color: var(--siyah); color: var(--beyaz); }
.kaydirici-ok:disabled { opacity: 0.35; cursor: default; }
.kaydirici-ok .ikon { width: 1.125rem; height: 1.125rem; }

.projeler__iz {
  --gorunen: 1.15; --bosluk: 16px;
  display: grid; grid-auto-flow: column; grid-auto-columns: calc((100% - (var(--gorunen) - 1) * var(--bosluk)) / var(--gorunen));
  gap: var(--bosluk); margin-top: 48px; scroll-snap-type: x mandatory; scroll-behavior: smooth;
  scrollbar-width: none; overscroll-behavior-x: contain;
  /* ⚠ YATAY KAYDIRICI KURALI (2026-10-07, ölçülen hata): yalnız `overflow-x: auto` yazılınca tarayıcı
     `overflow-y`yi de `auto` yapar; içerideki 24px'lik giriş kayması (gorun) dikey taşma üretip kartları
     yukarı-aşağı kaydırılabilir yapıyordu. İki eksen AÇIKÇA yazılır; iz içindeki öğelere transform'lu
     giriş animasyonu VERİLMEZ (gorun izin kendisine verilir). */
  overflow-x: auto; overflow-y: hidden; touch-action: pan-x pan-y;
}
.projeler__iz::-webkit-scrollbar { display: none; }
.projeler__oge { scroll-snap-align: start; display: flex; }
@media (min-width: 640px)  { .projeler__iz { --gorunen: 2.2; --bosluk: 20px; } }
@media (min-width: 1100px) { .projeler__iz { --gorunen: 4; --bosluk: 24px; margin-top: 56px; } }
@media (max-width: 767px)  { .bolum-baslik__ek .dugme { display: none; } } /* mobilde oklar yeter; "Tüm" bağlantısı menüde */

/* ==========================================================================
   SÜREÇ — KOYU (2026-10-07 rev. 4; 2026-10-15 hareketlendi). Tam ekran/sticky sahne YOK.
   Sol: başlık + adım listesi (düğme). Sağ: görsel sahnesi (perde açılışı + Ken Burns + adım adı).
   Masaüstünde görünür olunca adımlar kendiliğinden ilerler (fare üstündeyken bekler); mobil ve
   hareket azaltmada otomatik geçiş YOK. Fare / odak / dokunma → adım etkin.
   ========================================================================== */
.bolum--koyu { --hover-zemin: rgba(255, 255, 255, 0.06); background: var(--siyah); color: var(--koyu-fg); }
.surec__ic { display: grid; gap: 32px; } /* DOM: başlık → görsel → adımlar (mobil görsel-önce) */
.surec__liste { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--koyu-cizgi); }
.surec__liste > li { border-bottom: 1px solid var(--koyu-cizgi); }
.surec__adim {
  display: grid; gap: 6px; width: 100%; padding: 20px 4px 20px 20px; text-align: left; color: var(--koyu-ince);
  border-left: 2px solid transparent; border-radius: 0 var(--r-kucuk) var(--r-kucuk) 0;
  transition: color 400ms var(--ease), border-color 400ms var(--ease), background-color 400ms var(--ease);
}
.surec__adim:hover, .surec__adim.aktif { color: var(--koyu-fg); }
.surec__adim.aktif { border-left-color: var(--beyaz); background: rgba(255, 255, 255, 0.04); }
.surec__ad { font-size: 1.1875rem; font-weight: 500; letter-spacing: -0.015em; line-height: 1.3; }
.surec__metin {
  display: grid; grid-template-rows: 0fr; font-size: 0.9375rem; line-height: 1.6; color: var(--koyu-soluk);
  opacity: 0; transition: grid-template-rows 500ms var(--ease), opacity 500ms var(--ease);
}
.surec__adim.aktif .surec__metin { grid-template-rows: 1fr; opacity: 1; }
.surec__metin > span { min-height: 0; overflow: hidden; }
/* Görsel sahnesi (2026-10-15: "biraz animasyon ve görselle"): yeni görsel soldan sağa perde gibi açılır
   (clip-path), açıkken yavaşça yaklaşır (Ken Burns, hero ile aynı doğrusal süre). Altta adım adı
   (ilerleme şeritleri 2026-10-15'te kaldırıldı — proje sahibi). */
.surec__vitrin { position: relative; overflow: hidden; aspect-ratio: 4 / 3; border-radius: var(--r-kucuk); background: var(--siyah-derin); }
.surec__vitrin-gorsel {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0;
  clip-path: inset(0 0 0 100%); transform: scale(1.14);
}
.surec__vitrin-gorsel.onceki { z-index: 1; clip-path: inset(0); transform: scale(1); }
.surec__vitrin-gorsel.aktif {
  z-index: 2; clip-path: inset(0); transform: scale(1);
  transition: clip-path 1100ms var(--ease), transform 9000ms linear;
}
.surec__vitrin-perde { position: absolute; inset: 0; z-index: 3; background: linear-gradient(0deg, rgba(20, 20, 20, 0.85) 0%, rgba(20, 20, 20, 0.2) 38%, rgba(20, 20, 20, 0) 60%); }
.surec__vitrin-alt { position: absolute; left: 0; right: 0; bottom: 0; z-index: 4; display: grid; gap: 18px; padding: 24px; }
.surec__vitrin-adlar { position: relative; height: 1.2em; font-size: clamp(1.5rem, 2.6vw, 2.25rem); }
.surec__vitrin-ad {
  position: absolute; left: 0; bottom: 0; font-weight: 500; letter-spacing: -0.025em; line-height: 1.2; white-space: nowrap;
  opacity: 0; transform: translateY(18px); transition: opacity 500ms var(--ease), transform 700ms var(--ease);
}
.surec__vitrin-ad.aktif { opacity: 1; transform: none; transition-delay: 250ms; }
@media (min-width: 1100px) { .surec__vitrin-alt { padding: 32px; } }
@media (min-width: 1100px) {
  .surec__ic {
    grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); grid-template-areas: "bas vitrin" "liste vitrin";
    grid-template-rows: auto 1fr; column-gap: 88px; row-gap: 32px; align-items: start;
  }
  .surec__bas { grid-area: bas; }
  .surec__sol { grid-area: liste; }
  .surec__vitrin { grid-area: vitrin; align-self: stretch; aspect-ratio: auto; min-height: 560px; }
}

/* ==========================================================================
   PROJELER — SUKAS'taki makale kartı dili: başlık ve özet GÖRSELİN İÇİNDE beyaz, alttan siyah gradyan
   ========================================================================== */
.proje-kart {
  position: relative; display: flex; align-items: flex-end; width: 100%; overflow: hidden; aspect-ratio: 3 / 4; border-radius: var(--r-kucuk);
  background: var(--siyah); color: var(--beyaz);
}
.proje-kart__gorsel { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 900ms var(--ease); }
.proje-kart:hover .proje-kart__gorsel { transform: scale(1.05); }
.proje-kart__perde {
  position: absolute; inset: 0;
  background: linear-gradient(0deg, rgba(20, 20, 20, 0.92) 0%, rgba(20, 20, 20, 0.7) 32%, rgba(20, 20, 20, 0.1) 62%, rgba(20, 20, 20, 0) 100%);
  transition: opacity var(--sure-yuzey) var(--ease);
}
.proje-kart__icerik { position: relative; z-index: 1; display: grid; gap: 8px; padding: 24px; }
.proje-kart__ust { font-size: 0.8125rem; font-weight: 500; color: rgba(255, 255, 255, 0.72); }
.proje-kart__baslik { font-size: 1.1875rem; font-weight: 500; letter-spacing: -0.02em; line-height: 1.25; }
.proje-kart__ozet { font-size: 0.875rem; line-height: 1.55; color: rgba(255, 255, 255, 0.8); }
.proje-kart:focus-visible { outline-color: var(--siyah); }

/* ==========================================================================
   SSS — MİNİMAL kutular (beyaz, şeffaf kenar) + YAVAŞ akıcı açılış (2026-10-07 rev. 3)
   Yükseklik animasyonu JS'de (data-sss, ~650ms); JS yoksa yerel <details> anında açılır.
   ========================================================================== */
.sss__ic { display: grid; gap: 40px; }
.sss__liste { display: grid; gap: 8px; }
.sss__oge {
  background: var(--beyaz); border: 1px solid rgba(33, 33, 33, 0.09); border-radius: var(--r-kucuk);
  transition: border-color 500ms var(--ease), box-shadow 500ms var(--ease);
}
.sss__oge[open] { border-color: rgba(33, 33, 33, 0.2); box-shadow: 0 18px 40px -28px rgba(33, 33, 33, 0.35); }
.sss__soru {
  display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 14px 16px 14px 20px; cursor: pointer; list-style: none;
  font-size: 1rem; font-weight: 500; letter-spacing: -0.015em; line-height: 1.35;
  border-radius: var(--r-kucuk);
}
.sss__soru::-webkit-details-marker { display: none; }
.sss__isaret { position: relative; flex: none; width: 32px; height: 32px; border-radius: var(--r-kucuk); background: var(--kirik-beyaz); color: var(--siyah); transition: background-color 500ms var(--ease), color 500ms var(--ease); }
.sss__isaret::before, .sss__isaret::after { content: ""; position: absolute; left: 50%; top: 50%; width: 12px; height: 1.5px; margin: -0.75px 0 0 -6px; background: currentColor; border-radius: 1px; transition: transform 600ms var(--ease); }
.sss__isaret::after { transform: rotate(90deg); }
.sss__oge[open] .sss__isaret { background: var(--siyah); color: var(--beyaz); }
.sss__oge[open] .sss__isaret::after { transform: rotate(0deg); }
.sss__cevap { overflow: hidden; }
.sss__cevap > p { padding: 0 64px 18px 20px; font-size: 0.9375rem; line-height: 1.65; color: var(--fg-soluk); }
@media (max-width: 767px) { .sss__cevap > p { padding-right: 20px; } }
@media (min-width: 1100px) {
  .sss__ic { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 88px; align-items: start; }
  .sss__bas { position: sticky; top: calc(var(--ust-yukseklik) + 40px); }
}

/* ==========================================================================
   İLETİŞİM — başlık + bilgiler solda (düz liste, alfa çizgiler), form sağda gri yüzeyde (2026-10-15, varyant 1)
   ========================================================================== */
.iletisim-duzen { display: grid; gap: 48px; }
.iletisim-liste { display: grid; margin-top: 40px; }
.iletisim-liste li { border-top: 1px solid var(--cizgi); }
.iletisim-liste li:last-child { border-bottom: 1px solid var(--cizgi); }
.iletisim-liste__oge { display: grid; grid-template-columns: 44px minmax(0, 1fr); align-items: center; column-gap: 16px; padding: 18px 0; transition: opacity var(--sure-mikro) var(--ease); }
.iletisim-liste__ikon { display: grid; place-items: center; width: 44px; height: 44px; border-radius: var(--r-kucuk); background: var(--siyah); color: var(--beyaz); }
.iletisim-liste__ikon .ikon { width: 1.125rem; height: 1.125rem; }
.iletisim-liste__metinler { display: grid; gap: 4px; min-width: 0; }
.iletisim-liste__oge:hover { opacity: .6; }
.iletisim-liste__etiket { font-size: 0.8125rem; color: var(--fg-soluk); }
.iletisim-liste__deger { font-size: 1rem; font-weight: 500; line-height: 1.45; overflow-wrap: anywhere; }
.iletisim-duzen__form { padding: 24px; background: var(--kirik-beyaz); border-radius: var(--r-kucuk); }
.iletisim-form { display: grid; gap: 18px; align-content: start; }
.iletisim-form__satir { display: grid; gap: 18px; }
.iletisim-form__tuzak { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.alan { display: grid; gap: 8px; }
.alan__etiket { font-size: 0.875rem; font-weight: 500; }
.alan__ek { font-weight: 400; color: var(--fg-soluk); }
.alan__girdi {
  width: 100%; padding: 14px 16px; font: inherit; font-size: 0.9375rem; color: var(--fg);
  background: var(--beyaz); border: 1px solid transparent; border-radius: var(--r-kucuk);
  transition: border-color var(--sure-mikro) var(--ease), background-color var(--sure-mikro) var(--ease);
}
.alan__girdi::placeholder { color: #8a8a8a; }
.alan__girdi:hover { background: var(--beyaz); }
.alan__girdi:focus { outline: none; box-shadow: 0 0 0 4px rgba(33, 33, 33, 0.07), 0 0 0 1px rgba(33, 33, 33, 0.10); }
.alan__girdi:focus-visible { outline: none; }
textarea.alan__girdi { min-height: 150px; resize: vertical; }
/* Hizmet seçimi: yerel ok gizli, tek ikon sistemi (Lucide). Seçim yapılmadıysa yer tutucu tonu. */
.alan__secim { position: relative; display: block; }
.alan__secim select { appearance: none; -webkit-appearance: none; padding-right: 44px; cursor: pointer; }
.alan__secim select:invalid { color: #8a8a8a; }
.alan__secim option { color: var(--fg); }
.alan__secim-ok { position: absolute; right: 16px; top: 50%; width: 1rem; height: 1rem; margin-top: -0.5rem; pointer-events: none; color: var(--fg-soluk); }
/* Özel açılır liste (JS ekler, 2026-10-15): yerel select görünmez ama formda kalır. */
.alan__secim--ozel select { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; pointer-events: none; }
.secim-dugme { display: block; padding-right: 44px; text-align: left; cursor: pointer; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.secim-dugme.bos { color: #8a8a8a; }
.alan__secim-ok { transition: transform var(--sure-mikro) var(--ease); }
.alan__secim.acik .alan__secim-ok { transform: rotate(180deg); }
.alan__secim.acik .secim-dugme { box-shadow: 0 0 0 4px rgba(33, 33, 33, 0.07), 0 0 0 1px rgba(33, 33, 33, 0.10); }
.secim-liste {
  position: absolute; top: calc(100% + 8px); left: 0; right: 0; z-index: 20; display: grid; gap: 2px; max-height: 320px; overflow-y: auto;
  padding: 6px; background: var(--beyaz); border-radius: var(--r-kucuk); outline: none;
  box-shadow: 0 0 0 1px rgba(33, 33, 33, 0.07), 0 20px 40px -16px rgba(0, 0, 0, 0.22);
  opacity: 0; visibility: hidden; transform: translateY(-4px);
  transition: opacity var(--sure-mikro) var(--ease), transform var(--sure-mikro) var(--ease), visibility 0s linear var(--sure-mikro);
}
.alan__secim.acik .secim-liste { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
.secim-liste__oge { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 12px; font-size: 0.9375rem; line-height: 1.4; border-radius: var(--r-ic); cursor: pointer; }
.secim-liste__oge .ikon { width: 1rem; height: 1rem; opacity: 0; }
.secim-liste__oge.etkin { background: var(--kirik-beyaz); }
.secim-liste__oge[aria-selected="true"] { font-weight: 500; }
.secim-liste__oge[aria-selected="true"] .ikon { opacity: 1; }
.alan__not { font-size: 0.8125rem; color: var(--fg-soluk); }
.onay { display: grid; grid-template-columns: 20px minmax(0, 1fr); gap: 12px; align-items: start; font-size: 0.875rem; line-height: 1.5; color: var(--fg-soluk); cursor: pointer; }
.onay input { width: 18px; height: 18px; margin: 1px 0 0; accent-color: var(--siyah); }
.onay a { color: var(--fg); text-decoration: underline; text-underline-offset: 3px; }
.iletisim-form__gonder { width: 100%; justify-content: center; height: 52px; }
.iletisim-form__durum { padding: 12px 16px; border-radius: var(--r-kucuk); font-size: 0.9375rem; line-height: 1.5; }
.iletisim-form__durum--basari { background: #e8f5ec; color: #1d5c32; }
.iletisim-form__durum--bilgi { background: var(--kirik-beyaz); color: var(--fg); }
.iletisim-form__durum--hata { background: #fbeaea; color: #8a1f1f; }


@media (min-width: 768px) {
  .iletisim-form__satir { grid-template-columns: 1fr 1fr; }
}
@media (min-width: 1100px) {
  .iletisim-duzen { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 88px; align-items: start; }
  .iletisim-duzen__form { padding: 40px; }
}

/* ==========================================================================
   HİZMET VİTRİNİ — genişleyen görsel kartlar (2026-10-15; referans psyclelondon.com "How We Train").
   Masaüstü: flex satır, açık kart ~3 kat geniş. Mobil/tablet: yatay kaydırıcı, tüm kartlar açık.
   ========================================================================== */
.vitrin {
  display: flex; gap: 12px; margin-top: 40px;
  overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; scroll-behavior: smooth; scrollbar-width: none; overscroll-behavior-x: contain;
}
.vitrin::-webkit-scrollbar { display: none; }
.vitrin__kart { position: relative; flex: 0 0 84%; height: 480px; overflow: hidden; border-radius: var(--r-kucuk); background: var(--siyah); color: var(--koyu-fg); scroll-snap-align: start; }
.vitrin__gorsel { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transform: scale(1.06); transition: transform 1200ms var(--ease); }
.vitrin__kart.acik .vitrin__gorsel { transform: scale(1); }
.vitrin__perde {
  position: absolute; inset: 0;
  background: linear-gradient(0deg, rgba(20, 20, 20, 0.92) 0%, rgba(20, 20, 20, 0.55) 40%, rgba(20, 20, 20, 0.1) 75%);
  transition: background-color var(--sure-yuzey) var(--ease);
}
.vitrin__ac { display: none; }
.vitrin__icerik { position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; padding: 24px; }
.vitrin__ad { font-size: 1.375rem; font-weight: 500; letter-spacing: -0.02em; line-height: 1.2; }
.vitrin__detay { display: grid; gap: 16px; justify-items: start; }
.vitrin__ozet { max-width: 46ch; font-size: 0.9375rem; line-height: 1.6; color: rgba(255, 255, 255, 0.82); }
.vitrin__bag { display: inline-flex; align-items: center; gap: 8px; font-size: 0.9375rem; font-weight: 500; }
.vitrin__bag .ikon { width: 1rem; height: 1rem; transition: transform 400ms var(--ease); }
.vitrin__bag:hover .ikon { transform: translateX(4px); }
@media (min-width: 640px) { .vitrin__kart { flex-basis: 46%; } }
@media (min-width: 1100px) {
  .vitrin { gap: 16px; margin-top: 56px; height: 600px; overflow: visible; scroll-snap-type: none; }
  .vitrin__kart { flex: 1 1 0; min-width: 0; height: auto; cursor: pointer; transition: flex-grow 800ms var(--ease); }
  .vitrin__kart.acik { flex-grow: 3.4; cursor: default; }
  .vitrin__kart:not(.acik) .vitrin__perde { background-color: rgba(20, 20, 20, 0.28); }
  .vitrin__kart:not(.acik):hover .vitrin__perde { background-color: rgba(20, 20, 20, 0.12); }
  .vitrin__ac {
    position: absolute; top: 16px; right: 16px; z-index: 3; display: grid; place-items: center; width: 40px; height: 40px;
    border-radius: var(--r-kucuk); border: 1px solid var(--koyu-cizgi-guclu); background: rgba(20, 20, 20, 0.3); color: var(--beyaz);
    transition: background-color var(--sure-mikro) var(--ease), border-color var(--sure-mikro) var(--ease);
  }
  .vitrin__ac:hover { border-color: var(--beyaz); background: rgba(20, 20, 20, 0.5); }
  .vitrin__isaret { position: relative; width: 14px; height: 14px; }
  .vitrin__isaret::before, .vitrin__isaret::after { content: ""; position: absolute; left: 0; top: 50%; width: 14px; height: 1.5px; margin-top: -0.75px; border-radius: 1px; background: currentColor; transition: transform 400ms var(--ease); }
  .vitrin__isaret::after { transform: rotate(90deg); }
  .vitrin__kart.acik .vitrin__isaret::after { transform: rotate(0deg); }
  .vitrin__icerik { padding: 32px; }
  /* Dar kartta başlık dikey (uzun hizmet adları dar sütuna sığmıyor). */
  .vitrin__kart:not(.acik) .vitrin__ad { font-size: 1.125rem; white-space: nowrap; writing-mode: vertical-rl; transform: rotate(180deg); }
  .vitrin__kart:not(.acik) .vitrin__icerik { gap: 0; }
  /* Detay dar kartta gizli; genişlik sabit → açılırken metin yeniden akmaz. */
  /* Genişlik ≈ açık kartın iç genişliği (3.4 / 8.4 pay − iç boşluk). */
  .vitrin__detay { width: calc((min(100vw, 1480px) - 160px) * 0.4 - 64px); max-height: 0; opacity: 0; overflow: hidden; transition: max-height 700ms var(--ease), opacity 400ms var(--ease); }
  .vitrin__kart.acik .vitrin__detay { max-height: 220px; opacity: 1; transition-delay: 0ms, 250ms; }
}

/* ==========================================================================
   BANT — sayfanın ortası (Hizmetler ↔ Projeler), TAM GENİŞLİK (2026-10-07); içerik kap hizasında.
   ========================================================================== */
.bant { position: relative; overflow: hidden; background: var(--siyah); color: var(--koyu-fg); }
.bant__gorsel { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 70% 50%; }
.bant__perde {
  position: absolute; inset: 0;
  background: linear-gradient(90deg, rgba(33, 33, 33, 0.96) 0%, rgba(33, 33, 33, 0.86) 38%, rgba(33, 33, 33, 0.35) 72%, rgba(33, 33, 33, 0.1) 100%);
}
.bant__ic { position: relative; z-index: 2; display: flex; align-items: center; min-height: 480px; padding-block: 88px; }
.bant__icerik { display: grid; gap: 32px; justify-items: start; max-width: 640px; }
.bant__eylem { display: flex; flex-wrap: wrap; gap: 12px; }
@media (max-width: 767px) {
  .bant__ic { min-height: 0; padding-block: 72px; }
  .bant__perde { background: linear-gradient(0deg, rgba(33, 33, 33, 0.95) 0%, rgba(33, 33, 33, 0.85) 60%, rgba(33, 33, 33, 0.6) 100%); }
}

/* ==========================================================================
   KAPANIŞ BANDI — footer'a yapışık (2026-10-15; harita kaldırıldı). Footer'ın gradyanıyla birleşir:
   görsel üstte belirgin, alta doğru footer tonuna (#262626) erir; arada saç çizgisi.
   ========================================================================== */
.kapanis { position: relative; overflow: hidden; background: #262626; color: var(--koyu-fg); }
.kapanis__gorsel { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 60%; }
.kapanis__perde {
  position: absolute; inset: 0;
  background:
    linear-gradient(90deg, rgba(38, 38, 38, 0.94) 0%, rgba(38, 38, 38, 0.78) 45%, rgba(38, 38, 38, 0.55) 100%),
    linear-gradient(0deg, #262626 0%, rgba(38, 38, 38, 0) 60%);
}
.kapanis__ic { position: relative; z-index: 2; display: grid; gap: 32px; padding-block: 72px; border-bottom: 1px solid var(--koyu-cizgi); }
.kapanis .bolum-baslik__h2 { font-size: clamp(1.75rem, 3vw, 2.5rem); }
.kapanis__eylem { display: flex; flex-wrap: wrap; gap: 12px; }
.kapanis__eylem .dugme__ok { width: 1.125rem; height: 1.125rem; }
@media (min-width: 1100px) {
  .kapanis__ic { grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 64px; padding-block: 96px; }
}

/* ==========================================================================
   GÖRÜNÜRLÜK GİRİŞİ (gorun()) — tek Reveal sözleşmesi; JS yoksa her şey görünür.
   ========================================================================== */
.js [data-gorun]:not(.gorundu) { opacity: 0; transform: translateY(24px); }
.js [data-gorun] { transition: opacity 700ms var(--ease) var(--gecikme, 0ms), transform 700ms var(--ease) var(--gecikme, 0ms); }

/* ==========================================================================
   FOOTER
   ========================================================================== */
.alt {
  /* Gradyanlı siyah (2026-10-07): üst-sol hafif aydınlık, alta doğru derinleşir. */
  background:
    radial-gradient(120% 80% at 0% 0%, rgba(255, 255, 255, 0.07) 0%, rgba(255, 255, 255, 0) 55%),
    linear-gradient(180deg, #262626 0%, #1d1d1d 55%, #121212 100%);
  color: var(--koyu-fg); padding-top: 88px; overflow: hidden;
}
.alt__ust { display: grid; gap: 48px; }
.alt__kimlik { display: grid; gap: 20px; align-content: start; max-width: 380px; }
.alt__aciklama { font-size: 0.9375rem; line-height: 1.65; color: var(--koyu-soluk); }
.alt__sosyal { display: flex; gap: 8px; }
.alt__sosyal a { display: grid; place-items: center; width: 42px; height: 42px; border-radius: var(--r-kucuk); border: 1px solid var(--koyu-cizgi-guclu); color: var(--koyu-soluk); transition: border-color var(--sure-mikro) var(--ease), color var(--sure-mikro) var(--ease); }
.alt__sosyal a:hover { border-color: var(--beyaz); color: var(--koyu-fg); }
.alt__sosyal .ikon { width: 1.125rem; height: 1.125rem; }

.alt__kolon-baslik { font-size: 0.8125rem; font-weight: 500; color: var(--koyu-ince); margin-bottom: 18px; }
.alt__liste { display: grid; gap: 12px; }
.alt__liste--iki { grid-template-columns: 1fr 1fr; column-gap: 24px; }
.alt__liste a, .alt__iletisim a, .alt__yasal a { color: var(--koyu-soluk); transition: color var(--sure-mikro) var(--ease); }
.alt__liste a { font-size: 0.9375rem; }
.alt__liste a:hover, .alt__iletisim a:hover, .alt__yasal a:hover { color: var(--koyu-fg); }
.alt__iletisim { display: grid; gap: 16px; }
.alt__iletisim li { display: grid; grid-template-columns: 20px minmax(0, 1fr); gap: 12px; font-size: 0.9375rem; line-height: 1.5; color: var(--koyu-soluk); }
.alt__iletisim .ikon { width: 1.125rem; height: 1.125rem; margin-top: 2px; color: var(--koyu-ince); }

/* Footer marka — tipografik. */
.alt__marka .marka__ad { font-size: 1.75rem; }
.alt__bar { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 32px; margin-top: 72px; padding: 24px 0 32px; border-top: 1px solid var(--koyu-cizgi); font-size: 0.8125rem; color: var(--koyu-ince); }
.alt__yasal { display: flex; flex-wrap: wrap; gap: 8px 24px; }


@media (min-width: 768px) {
  .alt__ust { grid-template-columns: 1fr 1fr; }
}
@media (min-width: 1100px) {
  .alt { padding-top: 112px; }
  .alt__ust { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1.7fr) minmax(0, 0.6fr) minmax(0, 1.1fr); gap: 56px; }
}
@media (max-width: 767px) {
  .alt__bar { flex-direction: column; align-items: flex-start; }
}

/* ==========================================================================
   WHATSAPP — sabit, sağ alt (2026-10-07). Sade: animasyon/balon yok. Yuvarlak (proje sahibi, 2026-10-15).
   ========================================================================== */
.whatsapp {
  position: fixed; right: 20px; bottom: 20px; z-index: 60; display: grid; place-items: center; width: 56px; height: 56px;
  border-radius: 50%; background: #25d366; color: var(--beyaz); box-shadow: 0 12px 30px -10px rgba(0, 0, 0, 0.35);
  transition: transform var(--sure-mikro) var(--ease), background-color var(--sure-mikro) var(--ease);
}
.whatsapp:hover { transform: translateY(-2px); background: #1ebe5b; }
.whatsapp:focus-visible { outline: 2px solid var(--siyah); outline-offset: 3px; }
.whatsapp__ikon { width: 28px; height: 28px; }
@media (min-width: 768px) { .whatsapp { right: 28px; bottom: 28px; } }
body.kilitli .whatsapp { display: none; }
/* WhatsApp sabit düğmesi alt barın sağ ucuna binmesin. */
@media (min-width: 768px) and (max-width: 1600px) { .alt__bar { padding-right: 76px; } }
@media (max-width: 767px) { .alt__bar { padding-bottom: 96px; } }

/* ==========================================================================
   İÇ SAYFALAR (2026-10-15) — ana sayfanın dilinden: koyu görselli başlık (bant perdesi), 6px köşe,
   alfa çizgiler, tek easing. Yeni token yok.
   ========================================================================== */

/* ---------- Sayfa başlığı (tek PageHero) ---------- */
.sayfa-hero { position: relative; display: flex; align-items: flex-end; min-height: max(56svh, 460px); overflow: hidden; background: var(--siyah); color: var(--koyu-fg); }
.sayfa-hero--duz { min-height: 420px; }
.sayfa-hero__gorsel { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 60% 50%; }
.sayfa-hero__perde {
  position: absolute; inset: 0;
  background:
    linear-gradient(90deg, rgba(33, 33, 33, 0.9) 0%, rgba(33, 33, 33, 0.66) 38%, rgba(33, 33, 33, 0.2) 72%, rgba(33, 33, 33, 0.05) 100%),
    linear-gradient(0deg, rgba(33, 33, 33, 0.6) 0%, rgba(33, 33, 33, 0) 40%);
}
.sayfa-hero__ic { position: relative; z-index: 2; display: grid; gap: 20px; justify-items: start; padding-top: calc(var(--ust-yukseklik) + 56px); padding-bottom: 56px; }
.sayfa-hero__baslik { max-width: 18ch; font-size: clamp(2.25rem, 5.2vw, 4.5rem); font-weight: 500; line-height: 1.04; letter-spacing: -0.03em; }
.sayfa-hero__metin { max-width: 52ch; font-size: 1.0625rem; line-height: 1.65; color: var(--koyu-soluk); }
.sayfa-hero__eylem { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 8px; }
/* Hareket (2026-10-15, ana sayfa diline uyum): görsel yavaşça yaklaşır (hero ile aynı doğrusal Ken Burns),
   kırıntı → başlık → metin → düğme sırayla yükselir. CSS animasyonu: JS'siz de çalışır, başlık hiç gizli kalmaz
   (animasyon desteklenmezse son durum görünür). */
.sayfa-hero__gorsel { animation: sayfa-yaklas 9000ms linear both; }
.sayfa-hero__ic > * { animation: sayfa-yuksel 900ms var(--ease) both; }
.sayfa-hero__ic > :nth-child(2) { animation-delay: 90ms; }
.sayfa-hero__ic > :nth-child(3) { animation-delay: 180ms; }
.sayfa-hero__ic > :nth-child(4) { animation-delay: 270ms; }
@keyframes sayfa-yaklas { from { transform: scale(1.1); } to { transform: scale(1); } }
@keyframes sayfa-yuksel { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: none; } }
@media (min-width: 768px) {
  .sayfa-hero { min-height: max(64svh, 560px); }
  .sayfa-hero--duz { min-height: 480px; }
  .sayfa-hero__ic { padding-bottom: 88px; }
}
@media (max-width: 767px) {
  .sayfa-hero__perde { background: linear-gradient(0deg, rgba(33, 33, 33, 0.94) 0%, rgba(33, 33, 33, 0.7) 50%, rgba(33, 33, 33, 0.3) 100%); }
}

.kirinti ol { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin: 0; padding: 0; list-style: none; font-size: 0.875rem; color: var(--koyu-ince); }
.kirinti li { display: inline-flex; align-items: center; gap: 10px; }
.kirinti li + li::before { content: ""; width: 4px; height: 4px; border-radius: 50%; background: currentColor; opacity: 0.6; }
.kirinti a { transition: color var(--sure-mikro) var(--ease); }
.kirinti a:hover { color: var(--koyu-fg); }
.kirinti [aria-current] { color: var(--koyu-soluk); }

/* ---------- PROJELER (2026-10-15 sıfırdan kurgu) — süzgeç sekmeleri + görünüm + mozaik / liste ---------- */
.portfolyo__arac { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 20px 40px; padding-bottom: 20px; border-bottom: 1px solid var(--cizgi); }
.no-js .portfolyo__arac { display: none; }
.portfolyo__suzgec { display: flex; flex-wrap: wrap; gap: 4px 28px; }
.portfolyo__sekme {
  position: relative; padding: 6px 0; font-size: clamp(1.0625rem, 1.6vw, 1.375rem); font-weight: 500; letter-spacing: -0.015em; color: var(--fg-soluk);
  transition: color var(--sure-mikro) var(--ease);
}
.portfolyo__sekme sup { margin-left: 3px; font-size: 0.6em; font-weight: 400; vertical-align: super; }
.portfolyo__sekme::after { content: ""; position: absolute; left: 0; right: 0; bottom: -21px; height: 2px; background: var(--siyah); transform: scaleX(0); transform-origin: left; transition: transform 500ms var(--ease); }
.portfolyo__sekme:hover, .portfolyo__sekme.etkin { color: var(--fg); }
.portfolyo__sekme.etkin::after { transform: scaleX(1); }
.portfolyo__gorunum { display: flex; gap: 4px; padding: 4px; border-radius: var(--r-kucuk); background: var(--kirik-beyaz); }
.portfolyo__gorunum-dugme { height: 36px; padding: 0 14px; border-radius: var(--r-ic); font-size: 0.875rem; font-weight: 500; color: var(--fg-soluk); transition: background-color var(--sure-mikro) var(--ease), color var(--sure-mikro) var(--ease); }
.portfolyo__gorunum-dugme.etkin { background: var(--beyaz); color: var(--fg); box-shadow: 0 1px 3px rgba(33, 33, 33, 0.1); }

/* Mozaik: satır başına iki öğe (geniş 7 + dar 5 sütun, yön dönüşümlü). Künye görselin altında. */
.mozaik { display: grid; gap: 48px; margin-top: 48px; }
.mozaik__oge[hidden] { display: none; }
.mozaik__kart { display: grid; gap: 18px; }
.mozaik__gorsel { position: relative; display: block; overflow: hidden; aspect-ratio: 4 / 3; border-radius: var(--r-kucuk); background: var(--siyah); }
.mozaik__gorsel img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 1200ms var(--ease); }
.mozaik__kart:hover .mozaik__gorsel img { transform: scale(1.05); }
.mozaik__alt { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.mozaik__metin { display: grid; gap: 6px; }
.mozaik__kategori { font-size: 0.8125rem; color: var(--fg-soluk); }
.mozaik__ad { font-size: clamp(1.375rem, 2vw, 1.75rem); font-weight: 500; letter-spacing: -0.02em; line-height: 1.15; }
.mozaik__ozet { max-width: 48ch; font-size: 0.9375rem; line-height: 1.6; color: var(--fg-soluk); }
.mozaik__ok { flex: none; width: 1.375rem; height: 1.375rem; margin-top: 22px; transition: transform 400ms var(--ease); }
.mozaik__kart:hover .mozaik__ok { transform: translate(4px, -4px); }
@media (min-width: 768px) {
  .mozaik { grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 64px 24px; margin-top: 56px; }
  .mozaik__oge--genis { grid-column: span 7; }
  .mozaik__oge--dar { grid-column: span 5; }
  /* Dar öğe geniş komşusuyla AYNI yükseklikte (7·3/4 = 5·21/20 → künyeler aynı hizada). */
  .mozaik__oge--dar .mozaik__gorsel { aspect-ratio: 20 / 21; }
}

/* Liste: büyük adlar + yapışkan önizleme (masaüstü). Mobilde satırda küçük görsel. */
.portfolyo-liste { display: grid; gap: 48px; margin-top: 24px; }
.portfolyo-liste[hidden] { display: none; }
.portfolyo-liste__oge[hidden] { display: none; }
.portfolyo-liste__satir {
  display: grid; grid-template-columns: 64px minmax(0, 1fr) 20px; align-items: center; gap: 16px; padding: 18px 0; border-bottom: 1px solid var(--cizgi);
  transition: padding-left 500ms var(--ease), color var(--sure-mikro) var(--ease);
}
.portfolyo-liste__kucuk { position: relative; width: 64px; height: 48px; overflow: hidden; border-radius: var(--r-ic); background: var(--siyah); }
.portfolyo-liste__kucuk img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.portfolyo-liste__ad { font-size: clamp(1.25rem, 2.6vw, 2.5rem); font-weight: 500; letter-spacing: -0.025em; line-height: 1.15; }
.portfolyo-liste__kategori { display: none; font-size: 0.875rem; color: var(--fg-soluk); }
.portfolyo-liste__ok { width: 1.25rem; height: 1.25rem; transition: transform 400ms var(--ease); }
.portfolyo-liste__satir:hover .portfolyo-liste__ok, .portfolyo-liste__satir.etkin .portfolyo-liste__ok { transform: translateX(4px); }
.portfolyo-liste__onizleme { display: none; }
@media (min-width: 1100px) {
  .portfolyo-liste { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 64px; align-items: start; }
  .portfolyo-liste__satir { grid-template-columns: minmax(0, 1fr) auto 20px; gap: 24px; padding: 22px 0; }
  .portfolyo-liste__kucuk { display: none; }
  .portfolyo-liste__kategori { display: block; }
  .portfolyo-liste__satirlar:hover .portfolyo-liste__satir:not(:hover) { color: var(--fg-soluk); }
  .portfolyo-liste__satir:hover { padding-left: 16px; }
  .portfolyo-liste__onizleme { position: sticky; top: calc(var(--ust-yukseklik) + 32px); display: block; overflow: hidden; aspect-ratio: 4 / 5; border-radius: var(--r-kucuk); background: var(--siyah); }
  .portfolyo-liste__gorsel { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transform: scale(1.06); transition: opacity 600ms var(--ease), transform 1200ms var(--ease); }
  .portfolyo-liste__gorsel.aktif { opacity: 1; transform: none; }
}

/* ---------- PROJE DETAY (2026-10-15 sıfırdan kurgu) ---------- */
/* Kapak: aynı PageHero, neredeyse tam ekran. */
.sayfa-hero--tam { min-height: max(78svh, 520px); }
.sayfa-hero--tam .sayfa-hero__baslik { max-width: 16ch; font-size: clamp(2.5rem, 6.4vw, 5.75rem); }
@media (min-width: 768px) { .sayfa-hero--tam { min-height: max(88svh, 640px); } }

.kunye-serit { border-bottom: 1px solid var(--cizgi); background: var(--beyaz); }
.kunye-serit__ic { display: grid; gap: 24px; padding-block: 28px; }
.kunye-serit__liste { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px 24px; margin: 0; }
.kunye-serit__oge { display: grid; gap: 4px; align-content: start; }
.kunye-serit__oge dt { font-size: 0.8125rem; color: var(--fg-soluk); }
.kunye-serit__oge dd { margin: 0; font-weight: 500; }
.kunye-serit__oge dd a { text-decoration: underline; text-decoration-color: var(--cizgi-guclu); text-underline-offset: 4px; transition: text-decoration-color var(--sure-mikro) var(--ease); }
.kunye-serit__oge dd a:hover { text-decoration-color: currentColor; }
@media (min-width: 1100px) {
  .kunye-serit__ic { grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 40px; }
  .kunye-serit__liste { grid-template-columns: repeat(3, auto); justify-content: start; gap: 0; }
  .kunye-serit__oge { padding: 0 48px; border-left: 1px solid var(--cizgi); }
  .kunye-serit__oge:first-child { padding-left: 0; border-left: 0; }
}

.oyku__ic { display: grid; gap: 32px; }
.oyku__bas .bolum-baslik__h2 { font-size: clamp(2.25rem, 4.4vw, 4rem); letter-spacing: -0.035em; }
.oyku__metin { display: grid; gap: 20px; align-content: start; }
.oyku__metin > p { max-width: 60ch; font-size: 1.0625rem; line-height: 1.75; color: var(--fg-soluk); }
.oyku__metin > p:first-child { color: var(--fg); font-size: 1.1875rem; line-height: 1.65; }
.oyku__yorum { display: grid; gap: 14px; margin: 24px 0 0; padding-top: 40px; border-top: 1px solid var(--cizgi); }
.oyku__yorum blockquote { margin: 0; max-width: 28ch; font-size: clamp(1.5rem, 2.6vw, 2.25rem); font-weight: 500; line-height: 1.25; letter-spacing: -0.02em; }
.oyku__yorum figcaption { font-size: 0.875rem; color: var(--fg-soluk); }
@media (min-width: 1100px) {
  .oyku__ic { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); column-gap: 88px; row-gap: 56px; }
  .oyku__yorum { grid-column: 1 / -1; margin-top: 0; }
}

/* Galeri ritmi: tam genişlik ve ikili dönüşümlü; kare projede üçlü ızgara. */
.ritim { display: grid; gap: 12px; }
.ritim__bag { position: relative; display: block; overflow: hidden; aspect-ratio: 16 / 9; border-radius: var(--r-kucuk); background: var(--siyah); cursor: zoom-in; }
.ritim__oge--yarim .ritim__bag { aspect-ratio: 4 / 3; }
.ritim--kare .ritim__bag { aspect-ratio: 1 / 1; }
.ritim__bag img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 1400ms var(--ease); }
.ritim__bag:hover img { transform: scale(1.04); }
.ritim__buyut {
  position: absolute; right: 16px; bottom: 16px; display: grid; place-items: center; width: 44px; height: 44px; border-radius: var(--r-kucuk);
  background: rgba(20, 20, 20, 0.55); color: var(--beyaz); opacity: 0; transform: translateY(6px);
  transition: opacity var(--sure-yuzey) var(--ease), transform var(--sure-yuzey) var(--ease);
}
.ritim__buyut .ikon { width: 1.125rem; height: 1.125rem; }
.ritim__bag:hover .ritim__buyut, .ritim__bag:focus-visible .ritim__buyut { opacity: 1; transform: none; }
@media (min-width: 768px) {
  .ritim { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
  .ritim__oge--tam { grid-column: 1 / -1; }
  .ritim__oge--tam .ritim__bag { aspect-ratio: 21 / 9; }
}
@media (min-width: 1100px) {
  .ritim { gap: 24px; }
  .ritim--kare { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* Sonraki proje: açık zeminde büyük ad + görsel (galeri gri, kapanış bandı koyu — arada beyaz); tüm alan tek bağlantı. */
.sonraki__bag { display: grid; gap: 28px; }
.sonraki__metin { display: grid; gap: 12px; align-content: end; }
.sonraki__etiket { font-size: 0.875rem; color: var(--fg-soluk); }
.sonraki__ad { max-width: 16ch; font-size: clamp(2.25rem, 5.2vw, 4.5rem); font-weight: 500; line-height: 1.04; letter-spacing: -0.035em; }
.sonraki__alt { display: inline-flex; align-items: center; gap: 12px; font-weight: 500; color: var(--fg-soluk); }
.sonraki__ok { width: 1.25rem; height: 1.25rem; transition: transform 400ms var(--ease); }
.sonraki__bag:hover .sonraki__ok { transform: translateX(6px); }
.sonraki__gorsel { position: relative; display: block; overflow: hidden; aspect-ratio: 16 / 10; border-radius: var(--r-kucuk); background: var(--siyah); }
.sonraki__gorsel img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transform: scale(1.04); transition: transform 1400ms var(--ease); }
.sonraki__bag:hover .sonraki__gorsel img { transform: scale(1); }
@media (min-width: 1100px) { .sonraki__bag { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 88px; align-items: end; } }

/* ---------- Görsel büyütücü (dialog) ---------- */
.buyutec { width: 100vw; max-width: none; height: 100dvh; max-height: none; margin: 0; padding: 0; border: 0; background: var(--siyah-derin); color: var(--koyu-fg); --odak: var(--beyaz); }
.buyutec[open] { display: grid; place-items: center; }
.buyutec::backdrop { background: transparent; }
.buyutec__gorsel { max-width: min(calc(100vw - 176px), 1600px); max-height: 82dvh; width: auto; height: auto; object-fit: contain; border-radius: var(--r-kucuk); }
.buyutec__sayac { position: absolute; left: 50%; bottom: 28px; transform: translateX(-50%); font-size: 0.875rem; color: var(--koyu-soluk); }
.buyutec__dugme {
  position: absolute; display: grid; place-items: center; width: 48px; height: 48px; border-radius: var(--r-kucuk);
  border: 1px solid var(--koyu-cizgi-guclu); color: var(--koyu-fg);
  transition: background-color var(--sure-mikro) var(--ease), border-color var(--sure-mikro) var(--ease);
}
.buyutec__dugme:hover { border-color: var(--beyaz); background: rgba(255, 255, 255, 0.08); }
.buyutec__dugme .ikon { width: 1.125rem; height: 1.125rem; }
.buyutec__kapat { top: 20px; right: 20px; }
.buyutec__onceki { left: 20px; top: 50%; margin-top: -24px; }
.buyutec__sonraki { right: 20px; top: 50%; margin-top: -24px; }
@media (max-width: 767px) {
  .buyutec__gorsel { max-width: 100vw; border-radius: 0; }
  .buyutec__onceki, .buyutec__sonraki { top: auto; bottom: 16px; margin-top: 0; }
  .buyutec__sayac { bottom: 30px; }
}

/* ---------- Projelerden kayan görsel şeridi (ana sayfa, SSS üstü) ---------- */
/* Projelerden kayan görsel şeridi (sonsuz; fare üstündeyken durur). */
.gorsel-serit { margin-top: 40px; overflow: hidden; }   /* kenar soluklaştırma yok (2026-10-15: kenarlarda beyazlık istenmedi) */
.gorsel-serit__iz { display: flex; width: max-content; animation: serit-kay 60s linear infinite; }
.gorsel-serit:hover .gorsel-serit__iz { animation-play-state: paused; }
.gorsel-serit__grup { display: flex; gap: 16px; padding-right: 16px; }
.gorsel-serit__hucre { position: relative; flex: none; width: 260px; aspect-ratio: 3 / 4; overflow: hidden; border-radius: var(--r-kucuk); background: var(--siyah); }
.gorsel-serit__hucre:nth-child(even) { margin-top: 40px; }
.gorsel-serit__hucre img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
@keyframes serit-kay { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (min-width: 1100px) { .gorsel-serit { margin-top: 56px; } .gorsel-serit__hucre { width: 320px; } }

/* ---------- HİZMET DETAY (2026-10-15 sıfırdan kurgu) ---------- */
/* Sayfa içi menü: header'ın altında yapışık. */
.sayfa-ici { position: sticky; top: var(--ust-yukseklik); z-index: 40; border-bottom: 1px solid var(--cizgi); background: rgba(255, 255, 255, 0.94); -webkit-backdrop-filter: saturate(1.4) blur(12px); backdrop-filter: saturate(1.4) blur(12px); }
.sayfa-ici__ic { display: flex; align-items: center; justify-content: space-between; gap: 24px; min-height: 60px; }
.sayfa-ici__ad { display: none; font-weight: 500; }
.sayfa-ici__liste { display: flex; gap: 24px; overflow-x: auto; scrollbar-width: none; }
.sayfa-ici__liste a { position: relative; display: block; padding: 18px 0; font-size: 0.9375rem; font-weight: 500; color: var(--fg-soluk); white-space: nowrap; transition: color var(--sure-mikro) var(--ease); }
.sayfa-ici__liste a::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: var(--siyah); transform: scaleX(0); transform-origin: left; transition: transform 500ms var(--ease); }
.sayfa-ici__liste a:hover, .sayfa-ici__liste a.etkin { color: var(--fg); }
.sayfa-ici__liste a.etkin::after { transform: scaleX(1); }
@media (min-width: 768px) { .sayfa-ici__ad { display: block; } .sayfa-ici__liste { gap: 36px; } }
#hizmet, #kapsam, #ornekler { scroll-margin-top: calc(var(--ust-yukseklik) + 60px); }

/* Anlatı: üstte başlık + büyük giriş cümlesi, altta görsel çifti ve metin. */
.anlati__ust { display: grid; gap: 24px; }
.anlati__giris { max-width: 34ch; font-size: clamp(1.375rem, 2.6vw, 2.125rem); font-weight: 500; line-height: 1.3; letter-spacing: -0.02em; }
.anlati__alt { display: grid; gap: 16px; margin-top: 48px; }
.anlati__gorsel { position: relative; margin: 0; overflow: hidden; border-radius: var(--r-kucuk); background: var(--kirik-beyaz); aspect-ratio: 4 / 3; }
.anlati__gorsel img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.anlati__yan { display: grid; gap: 24px; align-content: start; }
.anlati__metin { max-width: 52ch; font-size: 1.0625rem; line-height: 1.75; color: var(--fg-soluk); }
@media (min-width: 1100px) {
  .anlati__ust { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 88px; align-items: start; }
  .anlati__alt { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 24px; margin-top: 88px; align-items: start; }
  .anlati__gorsel--buyuk { aspect-ratio: 4 / 5; }
  .anlati__yan { gap: 40px; padding-top: 120px; }
}

/* Kapsam: siyah ikonlu kutular. */
.kapsam2__izgara { display: grid; gap: 12px; margin-top: 40px; }
.kapsam2__oge { display: grid; grid-template-columns: 44px minmax(0, 1fr); align-items: center; gap: 16px; padding: 24px; border-radius: var(--r-kucuk); background: var(--beyaz); }
.kapsam2__ikon { display: grid; place-items: center; width: 44px; height: 44px; border-radius: var(--r-kucuk); background: var(--siyah); color: var(--beyaz); }
.kapsam2__ikon .ikon { width: 1.125rem; height: 1.125rem; }
.kapsam2__ad { font-size: 1.0625rem; font-weight: 500; line-height: 1.35; }
@media (min-width: 768px) { .kapsam2__izgara { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .kapsam2__izgara { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-top: 56px; } .kapsam2__oge { min-height: 132px; align-items: start; padding: 28px; } }

/* Örnekler: 2×2, künye görselin altında (projeler mozaiğinin kart dili). */
.ornekler__izgara { display: grid; gap: 40px; margin-top: 40px; }
@media (min-width: 768px) { .ornekler__izgara { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 48px 24px; margin-top: 56px; } }

/* Sonraki hizmet + dizin. */
.sonraki--hizmet .sonraki__alt { max-width: 44ch; }
.hizmet-dizin { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 56px; padding-top: 32px; border-top: 1px solid var(--cizgi); }
.hizmet-dizin__bag { display: inline-flex; align-items: center; height: 40px; padding: 0 16px; border-radius: var(--r-kucuk); background: var(--beyaz); font-size: 0.9375rem; font-weight: 500; transition: background-color var(--sure-mikro) var(--ease), color var(--sure-mikro) var(--ease); }
a.hizmet-dizin__bag:hover { background: var(--siyah); color: var(--beyaz); }
.hizmet-dizin__bag.bu { background: transparent; color: var(--fg-soluk); box-shadow: inset 0 0 0 1px var(--cizgi-guclu); }

/* ---------- HAKKIMDA (2026-10-15, "kısa ve görsel ağırlıklı") ---------- */
.hk2__ic { display: grid; gap: 40px; }
.hk2__gorsel { position: relative; margin: 0; overflow: hidden; aspect-ratio: 4 / 5; border-radius: var(--r-kucuk); background: var(--siyah); }
.hk2__gorsel img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hk2__metin { display: grid; gap: 20px; align-content: start; }
.hk2__paragraf { max-width: 56ch; font-size: 1.0625rem; line-height: 1.7; color: var(--fg-soluk); }
.hk2__metin .hk2__paragraf:first-of-type { color: var(--fg); font-size: 1.1875rem; line-height: 1.6; }
.hk2__ilkeler { display: grid; gap: 28px 32px; margin-top: 20px; padding-top: 32px; border-top: 1px solid var(--cizgi); }
.hk2__ilke { display: grid; grid-template-columns: 44px minmax(0, 1fr); column-gap: 16px; row-gap: 4px; align-content: start; }
.hk2__ikon { grid-row: span 2; display: grid; place-items: center; width: 44px; height: 44px; border-radius: var(--r-kucuk); background: var(--siyah); color: var(--beyaz); }
.hk2__ikon .ikon { width: 1.25rem; height: 1.25rem; }
.hk2__ilke-ad { align-self: end; font-size: 1.0625rem; font-weight: 500; letter-spacing: -0.01em; line-height: 1.3; }
.hk2__ilke-metin { font-size: 0.875rem; line-height: 1.55; color: var(--fg-soluk); }
.hk2__eylem { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 12px; }
@media (min-width: 640px) { .hk2__ilkeler { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) {
  .hk2__ic { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 88px; align-items: start; }
  .hk2__gorsel { position: sticky; top: calc(var(--ust-yukseklik) + 32px); aspect-ratio: auto; height: calc(100svh - var(--ust-yukseklik) - 64px); max-height: 820px; min-height: 560px; }
  .hk2__metin { padding-block: 24px; }
}

.hk2-malzeme__izgara { display: grid; gap: 12px; margin-top: 40px; }
.hk2-kare { position: relative; display: block; overflow: hidden; aspect-ratio: 4 / 5; border-radius: var(--r-kucuk); background: var(--siyah-derin); }
.hk2-kare img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 1200ms var(--ease); }
.hk2-kare:hover img { transform: scale(1.05); }
.hk2-kare__perde { position: absolute; inset: 0; background: linear-gradient(0deg, rgba(20, 20, 20, 0.85) 0%, rgba(20, 20, 20, 0) 45%); }
.hk2-kare__ad { position: absolute; left: 24px; right: 24px; bottom: 22px; display: flex; align-items: center; justify-content: space-between; gap: 12px; font-size: 1.125rem; font-weight: 500; letter-spacing: -0.01em; }
.hk2-kare__ad .ikon { flex: none; width: 1.125rem; height: 1.125rem; transition: transform 400ms var(--ease); }
.hk2-kare:hover .hk2-kare__ad .ikon { transform: translate(3px, -3px); }
@media (min-width: 768px) { .hk2-malzeme__izgara { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; } }
@media (min-width: 1100px) {
  .hk2-malzeme__izgara { gap: 24px; margin-top: 56px; }
  .hk2-malzeme__izgara > li:nth-child(2) { margin-top: 64px; }   /* ortadaki görsel aşağıda: hafif basamak */
}

/* ---------- Yasal metinler ---------- */
.yasal__ic { display: grid; gap: 40px; }
.yasal__icindekiler { display: grid; gap: 12px; align-content: start; padding: 24px; border-radius: var(--r-kucuk); background: var(--kirik-beyaz); }
.yasal__icindekiler-baslik { font-size: 0.875rem; font-weight: 500; }
.yasal__icindekiler ol { display: grid; gap: 8px; margin: 0; padding-left: 18px; font-size: 0.9375rem; color: var(--fg-soluk); }
.yasal__icindekiler a { transition: color var(--sure-mikro) var(--ease); }
.yasal__icindekiler a:hover { color: var(--fg); }
.yasal__metin { display: grid; gap: 56px; max-width: 72ch; }
.yasal__bolum { display: grid; gap: 16px; scroll-margin-top: calc(var(--ust-yukseklik) + 24px); }
.yasal .bolum-baslik__h2 { font-size: clamp(1.375rem, 2vw, 1.75rem); letter-spacing: -0.02em; }
.yasal__bolum p { line-height: 1.75; color: var(--fg-soluk); }
@media (min-width: 1100px) {
  .yasal__ic { grid-template-columns: minmax(0, 3fr) minmax(0, 8fr); gap: 88px; align-items: start; }
  .yasal__icindekiler { position: sticky; top: calc(var(--ust-yukseklik) + 40px); }
}

/* ==========================================================================
   GEÇİCİ SAYFA (hazırlanıyor / 404)
   ========================================================================== */
.gecici { padding: 96px 0 128px; background: var(--beyaz); }
.gecici .kap { display: grid; gap: 20px; justify-items: start; }
.gecici__baslik { font-size: clamp(2.25rem, 5vw, 4rem); }
.gecici__metin { color: var(--fg-soluk); font-size: 1.125rem; margin-bottom: 12px; }

/* ==========================================================================
   HAREKET AZALTMA — global kill-switch
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; transition-delay: 0ms !important; animation-delay: 0ms !important; scroll-behavior: auto !important; }
  .gorsel-serit__iz { animation: none; }
  .hero__gorsel { transform: none; }
}