/* ==========================================================================
   VELUXA İNŞAAT — stil dosyası
   Bölümler: 1) Değişkenler  2) Temel  3) Bileşenler  4) Scroll sahneleri
             5) İçerik bölümleri  6) Form/footer  7) Modal & çerez  8) Responsive
   ========================================================================== */

/* ---------- 1) Değişkenler ---------- */
:root{
  --ink:#0B131C;          /* ana koyu zemin */
  --ink-2:#111C28;        /* ikinci koyu ton */
  --paper:#F6F4F1;        /* açık zemin */
  --paper-2:#c69b67;
  --kirik-beyaz:#F2EEE6;  /* ana sayfa (3D vitrin) zemini — kırık beyaz */
  --line:rgba(11,19,28,.14);
  --text:#16202B;
  --muted:#5C6874;
  --accent:#332e2a;       /* marka turuncusu */
  --accent-dark:#332e2a;
  --accent-light:#C9B499; /* marka renginin koyu zeminlerde okunan açık varyantı */

  --strip:10%;            /* önceki sahnelerin solda bıraktığı şerit genişliği */
  --wrap:1200px;
  --r:4px;                /* köşe yumuşatma — inşaatta sert hat tercih edildi */

  --font: "Inter", "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
  /* Başlıklar için zarif serif — sistemde hazır bulunan yazı tipleri, ek istek yok */
  --font-display: "Palatino Linotype", "Book Antiqua", Palatino, "Iowan Old Style",
                  "Hoefler Text", Georgia, "Times New Roman", serif;
  --ease: cubic-bezier(.22,.61,.36,1);
}

/* ---------- 2) Temel ---------- */
*,*::before,*::after{ box-sizing:border-box; }
/* Not: yatay taşmayı kesmek için "hidden" DEĞİL "clip" kullanılıyor;
   hidden, sayfayı kaydırma konteynerine çevirip position:sticky'yi bozuyor. */
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; overflow-x:clip; }
body{
  margin:0; font-family:var(--font); color:var(--text); background:var(--paper);
  font-size:clamp(15px,.55vw + 13px,17px); line-height:1.65;
  -webkit-font-smoothing:antialiased; overflow-x:clip;
}
img{ max-width:100%; display:block; }
a{ color:inherit; }
h1,h2,h3,h4{ margin:0; line-height:1.05; letter-spacing:-.02em; font-weight:800; }
p{ margin:0; }
ul,ol{ margin:0; padding:0; list-style:none; }

.wrap{ width:min(100% - 2.5rem, var(--wrap)); margin-inline:auto; }
.wrap--narrow{ width:min(100% - 2.5rem, 820px); }

.skip-link{
  position:absolute; left:-9999px; top:0; z-index:200;
  background:var(--accent); color:#fff; padding:.7rem 1.1rem; font-weight:700;
}
.skip-link:focus{ left:1rem; top:1rem; }

:where(a,button,input,select,textarea,summary,details):focus-visible{
  outline:2px solid var(--accent); outline-offset:3px;
}

.kicker{
  font-size:.74rem; letter-spacing:.22em; text-transform:uppercase;
  font-weight:700; color:var(--accent); margin-bottom:1rem;
}

/* ---------- 3) Bileşenler ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.5rem;
  padding:.95rem 1.7rem; border:1px solid transparent; border-radius:var(--r);
  font-weight:700; font-size:.86rem; letter-spacing:.06em; text-transform:uppercase;
  text-decoration:none; cursor:pointer; transition:.25s var(--ease);
  white-space:nowrap;
}
.btn--sm{ padding:.62rem 1.15rem; font-size:.75rem; }
.btn--accent{ background:var(--accent); color:#fff; }
.btn--accent:hover{ background:var(--accent-dark); transform:translateY(-2px); }
.btn--ghost{ background:transparent; color:#fff; border-color:rgba(255,255,255,.55); }
.btn--ghost:hover{ background:#fff; color:var(--ink); }
.btn--ghost-dark{ background:transparent; color:#fff; border-color:rgba(255,255,255,.4); }
.btn--ghost-dark:hover{ background:rgba(255,255,255,.14); }
.btn--dark{ background:var(--ink); color:#fff; }
.btn--dark:hover{ background:var(--accent); }
/* Açık zeminde ince çizgili ikincil buton */
.btn--cizgi{ background:transparent; color:var(--ink); border-color:rgba(11,19,28,.28); }
.btn--cizgi:hover{ background:var(--ink); color:#fff; border-color:var(--ink); }
/* Koyu zeminde okunur krem buton */
.btn--accent-light{ background:var(--accent-light); color:var(--ink); }
.btn--accent-light:hover{ background:#E0D2BF; transform:translateY(-2px); }

.linklike{
  background:none; border:0; padding:0; font:inherit; color:var(--accent);
  text-decoration:underline; cursor:pointer;
}

/* --- Üst bar --- */
.site-header{
  position:fixed; inset:0 0 auto 0; z-index:100;
  transition:background .35s var(--ease), box-shadow .35s var(--ease);
}
.site-header::before{ /* açılışta okunabilirlik için yumuşak gradyan */
  content:""; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(to bottom, rgba(6,10,15,.65), transparent);
  transition:opacity .35s var(--ease);
}
.site-header.is-solid{ background:rgba(11,19,28,.94); backdrop-filter:blur(10px); box-shadow:0 1px 0 rgba(255,255,255,.08); }
.site-header.is-solid::before{ opacity:0; }

/* Kırık beyaz ana sayfa (3D vitrin) üzerindeyken başlık açık zemine döner.
   Zemini değişkenden alır: --kirik-beyaz değişirse başlık da uyar. */
.site-header.is-light{ background:var(--kirik-beyaz); box-shadow:0 1px 0 var(--line); }
.site-header.is-light::before{ opacity:0; }
.site-header.is-light .nav a{ color:var(--text); }
.site-header.is-light .nav a::after{ background:var(--accent); }
.site-header.is-light .nav-toggle span{ background:var(--ink); }
.site-header.is-light .header__cta .btn--accent{ background:var(--accent); color:#fff; }
.site-header.is-light .header__cta .btn--accent:hover{ background:var(--ink); }

.header__inner{ display:flex; align-items:center; gap:2rem; height:80px; }
/* Marka: yazı yerine logo görseli */
.brand{ display:flex; align-items:center; line-height:0; text-decoration:none; flex:0 0 auto; }
.brand img{ height:56px; width:auto; display:block; }
.nav{ display:flex; gap:1.9rem; margin-left:auto; }
.nav a{
  color:rgba(255,255,255,.88); text-decoration:none; font-size:.85rem;
  font-weight:600; letter-spacing:.04em; position:relative; padding:.35rem 0;
}
.nav a::after{
  content:""; position:absolute; left:0; bottom:0; height:2px; width:0;
  background:var(--accent); transition:width .3s var(--ease);
}
.nav a:hover::after, .nav a.is-active::after{ width:100%; }
.header__cta{ display:flex; align-items:center; gap:.75rem; }

.nav-toggle{
  display:none; width:44px; height:40px; background:none; border:0; cursor:pointer;
  flex-direction:column; justify-content:center; gap:6px; padding:0;
}
.nav-toggle span{ display:block; height:2px; background:#fff; transition:.3s var(--ease); }
.nav-toggle[aria-expanded="true"] span:nth-child(1){ transform:translateY(8px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2){ opacity:0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3){ transform:translateY(-8px) rotate(-45deg); }

/* ==========================================================================
   4) SCROLL SAHNELERİ — üst üste yığılan tam ekran görseller
   Yükseklik = kaç ekranlık scroll ile animasyonun oynayacağı
   ========================================================================== */
/* Yükseklik = animasyonun oynayacağı toplam kaydırma mesafesi.
   280vh → her geçiş yarım ekranlık kaydırmada tamamlanır (tek hareket). */
.stack{ position:relative; height:280vh; background:var(--ink); }

.stack__viewport{
  position:sticky; top:0; height:100vh; height:100svh;
  overflow:hidden; background:var(--ink);
}

/* Her katman tam ekran; clip-path ile kırpılır, görsel ASLA küçülmez.
   Zemin rengi, görsel yüklenene kadar alttaki sahnenin sızmasını engeller. */
.layer{ position:absolute; inset:0; background:var(--ink); }
.layer img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }

/* Metinlerin okunması için karartma */
/* Metin artık beyaz panel üzerinde olduğu için karartma hafifledi;
   sadece sol şeritlere derinlik vermek için duruyor. */
.layer__shade{
  position:absolute; inset:0;
  background:linear-gradient(100deg, rgba(6,10,15,.55) 0%, rgba(6,10,15,.22) 40%, rgba(6,10,15,0) 85%);
}
.layer__shade--soft{
  background:linear-gradient(100deg, rgba(6,10,15,.42) 0%, rgba(6,10,15,.10) 45%, rgba(6,10,15,0) 80%);
}

/* Başlangıç durumları (JS yüklenmeden önce de doğru görünsün) */
.layer--1{ z-index:1; }
.layer--2{ z-index:2; clip-path:inset(0 90% 0 10%); }
.layer--3{ z-index:3; clip-path:inset(100% 0 0 20%); }
.layer--4{ z-index:4; clip-path:inset(0 70% 0 30%); }

/* Şerit etiketleri: katman daraldığında soldaki 10%'luk kolonda kalır */
.strip-label{
  position:absolute; top:0; bottom:0; width:var(--strip);
  display:flex; align-items:center; justify-content:center;
  z-index:2; opacity:0; pointer-events:none;
}
.strip-label span{
  writing-mode:vertical-rl; transform:rotate(180deg);
  font-size:.72rem; font-weight:700; letter-spacing:.34em; text-transform:uppercase;
  color:rgba(255,255,255,.92); text-shadow:0 1px 12px rgba(0,0,0,.6);
  white-space:nowrap;
}
.layer--1 .strip-label{ left:0; }
.layer--2 .strip-label{ left:var(--strip); }
.layer--3 .strip-label{ left:calc(var(--strip) * 2); }

/* Sahne metinleri — her katmanın kendi geniş alanı içinde konumlanır.
   Beyaz panel aşağı doğru saydamlaşır; alttaki fotoğraf metnin bitiminde belirir. */
.scene{
  position:absolute; top:50%; transform:translateY(-50%);
  z-index:3; width:min(36rem, 58vw); color:var(--ink);
  padding:2.9rem 2.6rem 5.5rem;
  background:linear-gradient(180deg,
    #fff 0%,
    #fff 68%,
    rgba(255,255,255,.88) 79%,
    rgba(255,255,255,.48) 90%,
    rgba(255,255,255,0) 100%);
}
.scene--1{ left:6vw; }
.scene--2{ left:calc(var(--strip) + 5vw); }
.scene--3{ left:calc(var(--strip) * 2 + 5vw); }
.scene--4{ left:calc(var(--strip) * 3 + 5vw); }

.scene__kicker{
  font-size:.72rem; letter-spacing:.28em; text-transform:uppercase;
  font-weight:700; color:var(--accent); margin-bottom:1rem;
}

/* Tek WebGL canvas'ı ekranı kaplar; yalnızca proje kutularının bulunduğu
   dikdörtgenlere çizim yapar, tıklamaları altındaki kutulara geçirir. */
.model-canvas{
  position:fixed; inset:0; width:100%; height:100%;
  pointer-events:none; z-index:2;
}
/* İnceleme ekranı açıkken canvas modalın zemininin üstüne çıkar */
.proje-acik .model-canvas{ z-index:165; }
.scene__title{
  font-family:var(--font-display);
  font-size:clamp(2.1rem, 4.2vw, 3.5rem); font-weight:700;
  letter-spacing:-.012em; line-height:1.08; color:var(--ink);
}
.scene__title em{ font-style:italic; font-weight:700; color:var(--ink); }
.scene__text{
  margin-top:1.3rem; max-width:28rem; font-size:1rem; color:#232F3C;
}
.scene__actions{ display:flex; flex-wrap:wrap; gap:.8rem; margin-top:1.9rem; }
/* Beyaz panel üzerinde açık renkli buton görünmez — koyu varyanta çevriliyor */
.scene .btn--ghost{ color:var(--ink); border-color:rgba(11,19,28,.32); }
.scene .btn--ghost:hover{ background:var(--ink); color:#fff; border-color:var(--ink); }

/* Sahne göstergesi (sağ kenar) */
.scene-nav{
  position:absolute; right:2rem; top:50%; transform:translateY(-50%); z-index:6;
  display:flex; flex-direction:column; gap:1rem;
}
.scene-nav li{ display:flex; align-items:center; gap:.6rem; justify-content:flex-end; }
.scene-nav i{ display:block; width:26px; height:2px; background:rgba(255,255,255,.4); transition:.35s var(--ease); }
.scene-nav span{ font-size:.68rem; font-weight:700; letter-spacing:.1em; color:rgba(255,255,255,.45); transition:.35s var(--ease); }
.scene-nav li.is-on i{ width:46px; background:var(--accent); }
.scene-nav li.is-on span{ color:#fff; }

.scroll-hint{
  position:absolute; left:50%; bottom:2rem; transform:translateX(-50%); z-index:6;
  display:flex; flex-direction:column; align-items:center; gap:.6rem;
  color:rgba(255,255,255,.75); font-size:.66rem; letter-spacing:.28em; text-transform:uppercase;
  transition:opacity .4s var(--ease);
}
.scroll-hint i{ display:block; width:1px; height:42px; background:linear-gradient(rgba(255,255,255,.8), transparent); animation:hint 1.9s infinite; }
@keyframes hint{ 0%{ transform:scaleY(.2); transform-origin:top; } 55%{ transform:scaleY(1); transform-origin:top; } 56%{ transform-origin:bottom; } 100%{ transform:scaleY(0); transform-origin:bottom; } }
.scroll-hint.is-hidden{ opacity:0; }

/* ==========================================================================
   4b) 3D VİTRİN — sahneler bittiğinde açılan tam ekran bölüm
   ========================================================================== */
.vitrin{
  position:relative; overflow:hidden; color:var(--ink);
  background:var(--kirik-beyaz);
}

/* Dikey akış: üstte başlık, ortada iki proje, altta durum + devam butonu */
.vitrin__ic{
  min-height:100vh; min-height:100svh;
  display:flex; flex-direction:column; gap:clamp(.9rem,1.8vw,1.6rem);
  width:min(100% - 2.5rem, 1440px); margin-inline:auto;
  /* Üst boşluk yalnızca sabit başlığı geçecek kadar; model alanı olabildiğince yüksek */
  padding:5.4rem 0 1.5rem;
}

.vitrin__ust{ flex:0 0 auto; }
.vitrin .kicker{ color:var(--accent); opacity:.72; margin-bottom:.5rem; }
.vitrin__baslik{
  font-family:var(--font-display); font-weight:700;
  font-size:clamp(1.9rem, 3.2vw, 2.9rem); line-height:1.05;
  letter-spacing:-.015em; color:var(--ink);
}
.vitrin__baslik em{ font-style:italic; color:#8A7A67; }

/* --- Sayfanın iki yarısı ---------------------------------------------- */
.vitrin__ikili{
  flex:1 1 auto; min-height:0;
  display:grid; grid-template-columns:1fr 1fr; gap:clamp(1rem,2.5vw,2.5rem);
}
.proje{ display:flex; flex-direction:column; min-height:0; }

/* Modelin alanı: boyu kolonun tamamı, eni yarım sayfa */
.proje__sahne{
  position:relative; flex:1 1 auto; min-height:200px;
  background:radial-gradient(62% 58% at 50% 50%, #E8E2D6 0%, rgba(232,226,214,0) 72%);
  touch-action:none; cursor:grab;   /* kamera kontrolü bu kutudan yönetiliyor */
}
.proje__sahne:active{ cursor:grabbing; }

/* Model gelene kadar dönen ince halka */
.proje__sahne::after, .proje-ekran__sahne::after{
  content:""; position:absolute; z-index:2;
  left:50%; top:50%; width:30px; height:30px; margin:-15px 0 0 -15px;
  border:1.5px solid rgba(11,19,28,.14); border-top-color:rgba(11,19,28,.5);
  border-radius:50%; animation:donuyor 1s linear infinite;
}
.model-hazir .proje__sahne::after,
.model-hazir .proje-ekran__sahne::after,
.no-webgl .proje__sahne::after{ display:none; }
@keyframes donuyor{ to{ transform:rotate(360deg); } }

/* Proje adı ve inceleme butonu */
.proje__alt{
  flex:0 0 auto; text-align:center;
  padding-top:1rem; margin-top:.6rem; border-top:1px solid var(--line);
}
.proje__ad{
  font-family:var(--font-display); font-weight:700;
  font-size:clamp(1.25rem,2vw,1.7rem); letter-spacing:-.01em; color:var(--ink);
}
.proje__ad em{ font-style:italic; color:#8A7A67; }
.proje__tur{
  margin:.35rem 0 .9rem; font-size:.7rem; letter-spacing:.18em;
  text-transform:uppercase; color:var(--muted);
}

/* --- Alt şerit --------------------------------------------------------- */
.vitrin__alt{
  flex:0 0 auto; display:flex; align-items:center; gap:1rem; flex-wrap:wrap;
  justify-content:space-between; padding-top:.4rem;
}
.vitrin__ipucu{
  font-size:.7rem; letter-spacing:.2em; text-transform:uppercase; color:var(--muted);
}
.vitrin__durum{
  font-size:.7rem; letter-spacing:.16em; text-transform:uppercase;
  color:var(--muted); opacity:.75; min-height:1.1em; margin-right:auto;
}

.no-webgl .proje__sahne{ display:none; }

/* ==========================================================================
   4c) PROJE İNCELEME EKRANI — büyük görünüm + künye
   ========================================================================== */
.proje-ekran{ position:fixed; inset:0; z-index:160; display:grid; place-items:center; padding:clamp(.75rem,2vw,2rem); }
.proje-ekran__arka{ position:absolute; inset:0; background:rgba(6,8,10,.82); backdrop-filter:blur(4px); }

.proje-ekran__kutu{
  position:relative; width:min(1280px, 100%); height:min(88svh, 860px);
  display:grid; grid-template-columns:minmax(0,1fr) minmax(0,23rem);
  background:var(--paper); border-radius:var(--r); overflow:hidden;
  box-shadow:0 40px 90px rgba(0,0,0,.5);
}
.proje-ekran__sahne{
  position:relative; min-width:0;
  background:radial-gradient(60% 56% at 50% 50%, #E8E2D6 0%, rgba(232,226,214,0) 72%);
  touch-action:none; cursor:grab;
}
.proje-ekran__sahne:active{ cursor:grabbing; }

/* Bilgi paneli ve kapatma butonu, ekranı kaplayan canvas'ın üstünde kalmalı */
.proje-ekran__bilgi{
  position:relative; z-index:170;
  padding:clamp(1.5rem,2.5vw,2.6rem); overflow:auto;
  border-left:1px solid var(--line); background:#fff;
}
.proje-ekran__bilgi .kicker{ margin-bottom:.7rem; }
.proje-ekran__ad{
  font-family:var(--font-display); font-weight:700;
  font-size:clamp(1.6rem,2.4vw,2.2rem); letter-spacing:-.015em; color:var(--ink);
}
.proje-ekran__ozet{ margin-top:1rem; color:var(--muted); font-size:.95rem; }
.proje-ekran__altbaslik{
  margin:2rem 0 .9rem; font-size:.7rem; letter-spacing:.2em;
  text-transform:uppercase; color:var(--ink);
}
.proje-ekran__liste{ display:grid; gap:.7rem; }
.proje-ekran__liste li{
  position:relative; padding-left:1.1rem; font-size:.92rem; color:var(--muted);
}
.proje-ekran__liste li::before{
  content:""; position:absolute; left:0; top:.65em;
  width:6px; height:1px; background:var(--accent);
}
.proje-ekran__ipucu{
  margin-top:2rem; padding-top:1.1rem; border-top:1px solid var(--line);
  font-size:.68rem; letter-spacing:.16em; text-transform:uppercase; color:var(--muted);
}
.proje-ekran__butonlar{ display:flex; gap:.6rem; flex-wrap:wrap; margin-top:1.2rem; }

.proje-ekran__kapat{
  position:absolute; right:.6rem; top:.35rem; z-index:175;
  background:none; border:0; font-size:2.1rem; line-height:1;
  cursor:pointer; color:var(--muted);
}
.proje-ekran__kapat:hover{ color:var(--ink); }

/* ==========================================================================
   5) İçerik bölümleri
   ========================================================================== */
.section{ padding:clamp(4.5rem, 9vw, 8.5rem) 0; }
.section--dark{ background:var(--ink); color:#fff; }
.section--dark .section__lead{ color:rgba(255,255,255,.72); }
.section--paper{ background:var(--paper-2); }

.section__head{ max-width:46rem; margin:0 auto clamp(2.5rem,5vw,4rem); text-align:center; }
.section__head--left{ text-align:left; margin:0; }
.section__title{
  font-family:var(--font-display); font-weight:700;
  font-size:clamp(1.9rem, 3.3vw, 3rem); letter-spacing:-.012em; line-height:1.1;
}
.section__lead{ margin-top:1.2rem; color:var(--muted); font-size:1.05rem; }
.section__head--left .btn{ margin-top:2rem; }

/* Çalışma ilkeleri şeridi (sayı yok, ilke var) */
.stats{ background:var(--ink-2); color:#fff; padding:clamp(2.75rem,5vw,4rem) 0; }
.stats__grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:1.5rem; }
.stat{ text-align:center; border-left:1px solid rgba(255,255,255,.12); padding:0 1.25rem; }
.stat:first-child{ border-left:0; }
.stat b{
  display:block; margin-bottom:.6rem; font-family:var(--font-display);
  font-size:1.2rem; font-weight:700; letter-spacing:-.01em; color:var(--accent);
}
.stat span{ font-size:.85rem; line-height:1.5; color:rgba(255,255,255,.6); }

/* Hizmet kartları */
.cards{ display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--line); border:1px solid var(--line); }
.card{ background:var(--paper); padding:2.6rem 2rem 2.8rem; position:relative; transition:.3s var(--ease); }
.card:hover{ background:#fff; transform:translateY(-4px); z-index:2; box-shadow:0 22px 50px rgba(11,19,28,.1); }
.card__no{ font-size:.72rem; font-weight:800; letter-spacing:.2em; color:var(--accent); }
.card h3{ font-size:1.28rem; margin:.9rem 0 .8rem; }
.card p{ color:var(--muted); font-size:.95rem; }

/* Projeler — içerik hazırlanana kadar "yakında" durumu */
.yakinda{
  text-align:center; border:1px solid rgba(255,255,255,.14); border-radius:var(--r);
  padding:clamp(2.75rem,7vw,5rem) 1.5rem;
  background:radial-gradient(80% 120% at 50% 0%, rgba(255,255,255,.05), transparent 70%);
}
.yakinda__etiket{
  font-size:.72rem; letter-spacing:.28em; text-transform:uppercase;
  font-weight:700; color:var(--accent-light);
}
.yakinda__metin{
  margin:1.2rem auto 2.2rem; max-width:46ch;
  color:rgba(255,255,255,.68); font-size:1rem;
}

/* Süreç */
.process__wrap{ display:grid; grid-template-columns:minmax(280px,26rem) 1fr; gap:clamp(2rem,5vw,5rem); align-items:start; }
.process{ display:grid; gap:1px; background:var(--line); border-top:1px solid var(--line); }
.process li{ background:var(--paper); display:grid; grid-template-columns:5rem 1fr; gap:1.2rem; padding:1.9rem .2rem; }
.process b{ font-size:.8rem; letter-spacing:.2em; color:var(--accent); font-weight:800; padding-top:.3rem; }
/* Başlık ve açıklama ikinci kolonda kalmalı; yoksa açıklama numaranın
   altındaki dar kolona düşüyor. */
.process h3, .process p{ grid-column:2; }
.process h3{ font-size:1.15rem; margin-bottom:.5rem; }
.process p{ color:var(--muted); font-size:.95rem; }

/* SSS */
.faq details{ border-bottom:1px solid var(--line); }
.faq summary{
  cursor:pointer; list-style:none; padding:1.35rem 2.5rem 1.35rem 0;
  font-weight:700; font-size:1.05rem; position:relative;
}
.faq summary::-webkit-details-marker{ display:none; }
.faq summary::after{
  content:"+"; position:absolute; right:.2rem; top:50%; transform:translateY(-50%);
  font-size:1.5rem; font-weight:400; color:var(--accent); transition:.3s var(--ease);
}
.faq details[open] summary::after{ transform:translateY(-50%) rotate(45deg); }
.faq details p{ padding-bottom:1.5rem; color:var(--muted); max-width:60ch; }

/* İletişim */
.contact{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(2rem,5vw,4.5rem); align-items:start; }
.contact .section__title{ text-align:left; }
.contact__list{ margin-top:2.5rem; border-top:1px solid rgba(255,255,255,.14); }
.contact__list li{ display:grid; grid-template-columns:9.5rem 1fr; gap:1rem; padding:1rem 0; border-bottom:1px solid rgba(255,255,255,.14); }
.contact__list span{ font-size:.74rem; letter-spacing:.16em; text-transform:uppercase; color:rgba(255,255,255,.5); padding-top:.2rem; }
.contact__list a{ text-decoration:none; font-weight:600; }
.contact__list a:hover{ color:var(--accent); }

/* ---------- 6) Form & footer ---------- */
.form{
  background:#fff; color:var(--text); padding:clamp(1.6rem,3vw,2.4rem);
  display:grid; grid-template-columns:1fr 1fr; gap:1rem; border-radius:var(--r);
}
.form__title{ grid-column:1/-1; font-size:1.2rem; }
.form label{ display:block; font-size:.76rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); }
.form__full{ grid-column:1/-1; }
.form input, .form select, .form textarea{
  width:100%; margin-top:.5rem; padding:.85rem .9rem; border:1px solid var(--line);
  border-radius:var(--r); font:inherit; font-size:.95rem; text-transform:none;
  letter-spacing:normal; color:var(--text); background:var(--paper); font-weight:400;
}
.form input:focus, .form select:focus, .form textarea:focus{ border-color:var(--accent); background:#fff; }
.form textarea{ resize:vertical; }
/* ".form label" ile aynı özgüllükte kalmasın diye .form ön eki şart:
   yoksa onay metni büyük harfe dönüyor. */
.form .form__check{
  display:flex; gap:.7rem; align-items:flex-start;
  text-transform:none; letter-spacing:normal; font-size:.85rem;
  font-weight:400; line-height:1.5; color:var(--muted);
}
.form .form__check input{ width:auto; margin:.25rem 0 0; flex:0 0 auto; }
.form .btn{ width:100%; }
/* Formun altındaki açıklama: gönderim öncesi ne olacağını ve doğrudan
   iletişim yolunu gösterir, e-posta uygulaması açılmazsa kişi kaybolmasın. */
.form__ipucu{
  margin-top:-.35rem; font-size:.8rem; line-height:1.5; color:var(--muted);
}
.form__ipucu a{ color:var(--accent); text-decoration:underline; }

.form__note{ font-size:.85rem; text-transform:none; letter-spacing:normal; font-weight:600; min-height:1.2em; }
.form__note.is-ok{ color:#1c7a45; }
.form__note.is-err{ color:#c1341f; }
.hp{ position:absolute; left:-9999px; }

.footer{ background:#070C12; color:rgba(255,255,255,.72); padding:4rem 0 1.6rem; }
.footer__grid{ display:grid; grid-template-columns:1.6fr 1fr 1fr 1fr; gap:2.5rem; }
.footer h4{ font-size:.76rem; letter-spacing:.18em; text-transform:uppercase; color:#fff; margin-bottom:1.1rem; }
.footer a, .footer .linklike{ display:block; color:rgba(255,255,255,.72); text-decoration:none; padding:.28rem 0; font-size:.92rem; text-align:left; }
.footer a:hover, .footer .linklike:hover{ color:var(--accent); }
.brand--footer{ display:inline-flex; margin-bottom:1.1rem; padding:0; }
.brand--footer img{ height:76px; }
.footer__grid p{ font-size:.92rem; }
.footer__bottom{
  display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:1rem;
  margin-top:3rem; padding-top:1.4rem; border-top:1px solid rgba(255,255,255,.1);
  font-size:.78rem; color:rgba(255,255,255,.45);
}

/* Tasarım künyesi — ydiji */
.footer__bottom .kunye{
  display:inline-flex; align-items:center; gap:.55rem; padding:0;
  font-size:.78rem; color:rgba(255,255,255,.45); text-decoration:none;
  transition:color .25s var(--ease);
}
.footer__bottom .kunye img{ height:26px; width:auto; opacity:.85; transition:opacity .25s var(--ease); }
.footer__bottom .kunye:hover{ color:rgba(255,255,255,.85); }
.footer__bottom .kunye:hover img{ opacity:1; }

/* Hızlı arama butonu */
.ara{
  position:fixed; right:1.25rem; bottom:1.25rem; z-index:90;
  display:inline-flex; align-items:center; gap:.6rem;
  padding:.85rem 1.25rem; border-radius:100px;
  background:var(--ink); color:#fff; text-decoration:none;
  font-size:.8rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase;
  box-shadow:0 12px 28px rgba(0,0,0,.3); transition:.25s var(--ease);
}
.ara:hover{ background:var(--accent-light); color:var(--ink); transform:translateY(-2px); }
/* Çerez bandı açıkken butonu yukarı al, üst üste binmesinler */
body:has(#cookie:not([hidden])) .ara{ bottom:7.5rem; }

/* ---------- 7) Modal & çerez ---------- */
/* display tanımı [hidden]'ı ezdiği için gizleme kuralı açıkça yazılıyor */
[hidden]{ display:none !important; }

.modal{ position:fixed; inset:0; z-index:150; display:grid; place-items:center; padding:1.25rem; }
.modal__backdrop{ position:absolute; inset:0; background:rgba(6,10,15,.72); backdrop-filter:blur(3px); }
.modal__box{
  position:relative; background:#fff; max-width:720px; width:100%;
  max-height:82vh; overflow:auto; padding:clamp(1.6rem,4vw,2.6rem); border-radius:var(--r);
}
.modal__box h3{ font-size:1.5rem; margin-bottom:1.2rem; padding-right:2rem; }
.modal__box p{ margin-bottom:1rem; color:var(--muted); font-size:.95rem; }
.modal__box h4{ font-size:1rem; margin:1.4rem 0 .5rem; }
.modal__close{
  position:absolute; right:.9rem; top:.6rem; background:none; border:0;
  font-size:2rem; line-height:1; cursor:pointer; color:var(--muted);
}

.cookie{
  position:fixed; left:1rem; right:1rem; bottom:1rem; z-index:140;
  background:var(--ink); color:rgba(255,255,255,.82); padding:1.1rem 1.3rem;
  border-radius:var(--r); display:flex; align-items:center; gap:1.4rem;
  flex-wrap:wrap; box-shadow:0 20px 50px rgba(0,0,0,.35);
  max-width:var(--wrap); margin-inline:auto; font-size:.88rem;
}
.cookie p{ flex:1 1 22rem; }
.cookie .linklike{ color:var(--accent); }
.cookie__btns{ display:flex; gap:.6rem; }

/* --- Koyu zeminlerde marka rengi --------------------------------------
   Marka rengi koyu bir ton olduğu için siyah zeminlerde kayboluyor;
   bu bağlamlarda açık varyantı kullanılır. --------------------------- */
.section--dark .kicker,
.stats .stat b,
.cookie .linklike{ color:var(--accent-light); }

.nav a::after,
.scene-nav li.is-on i{ background:var(--accent-light); }

.footer a:hover,
.footer .linklike:hover{ color:var(--accent-light); }

.btn--dark:hover{ background:var(--accent-light); color:var(--ink); }

.header__cta .btn--accent,
.cookie .btn--accent{ background:var(--accent-light); color:var(--ink); }
.header__cta .btn--accent:hover,
.cookie .btn--accent:hover{ background:#E0D2BF; }

/* Scroll ile beliren bölümler */
.reveal{ opacity:0; transform:translateY(26px); transition:opacity .7s var(--ease), transform .7s var(--ease); }
.reveal.is-in{ opacity:1; transform:none; }

/* ---------- 8) Responsive ---------- */
@media (max-width:1024px){
  .cards{ grid-template-columns:repeat(2,1fr); }
  .footer__grid{ grid-template-columns:1fr 1fr; }
}

@media (max-width:900px){
  :root{ --strip:8%; }

  .brand img{ height:46px; }

  .nav{
    position:fixed; inset:80px 0 auto 0; flex-direction:column; gap:0;
    background:rgba(11,19,28,.98); padding:1rem 1.25rem 1.6rem;
    transform:translateY(-130%); transition:transform .4s var(--ease); margin:0;
  }
  /* Açık başlıkta açılan menü de açık zeminli olur */
  .site-header.is-light .nav{ background:var(--kirik-beyaz); }
  .site-header.is-light .nav a{ border-bottom-color:var(--line); }
  .nav.is-open{ transform:none; }
  .nav a{ padding:.95rem 0; border-bottom:1px solid rgba(255,255,255,.1); font-size:1rem; }
  .nav-toggle{ display:flex; }
  .header__cta .btn{ display:none; }

  .stack{ height:250vh; }
  .scene{ width:min(28rem, calc(92vw - var(--strip) * 3)); padding:2.1rem 1.7rem 4.2rem; }

  /* Dar ekranda projeler alt alta; bölüm yüksekliği içeriğe göre uzar */
  .vitrin__ic{ min-height:0; padding:5.5rem 0 2.5rem; gap:1.6rem; }
  .vitrin__ikili{ grid-template-columns:1fr; gap:2.2rem; }
  .proje__sahne{ min-height:min(42svh, 360px); }
  .vitrin__alt{ justify-content:flex-start; }
  .vitrin__durum{ margin-right:0; }
  .vitrin__alt .btn{ margin-left:auto; }

  .proje-ekran__kutu{
    grid-template-columns:1fr; grid-template-rows:minmax(0,1fr) auto;
    height:min(92svh, 900px);
  }
  .proje-ekran__bilgi{ border-left:0; border-top:1px solid var(--line); max-height:46%; }
  .scene--1{ left:5vw; }
  .scene--2{ left:calc(var(--strip) + 4vw); }
  .scene--3{ left:calc(var(--strip) * 2 + 4vw); }
  .scene--4{ left:calc(var(--strip) * 3 + 4vw); }
  .scene-nav{ right:.9rem; }
  .scene-nav span{ display:none; }
  .strip-label span{ font-size:.6rem; letter-spacing:.22em; }

  .stats__grid{ grid-template-columns:repeat(2,1fr); gap:2rem 1rem; }
  .stat{ border-left:0; padding:0 .5rem; }
  .process__wrap{ grid-template-columns:1fr; }
  .contact{ grid-template-columns:1fr; }
  .contact .section__head{ text-align:left; }
}

@media (max-width:640px){
  .cards{ grid-template-columns:1fr; }
  .footer__grid{ grid-template-columns:1fr; gap:1.8rem; }
  .form{ grid-template-columns:1fr; }
  .contact__list li{ grid-template-columns:1fr; gap:.15rem; }
  .scene{ padding:1.7rem 1.4rem 3.4rem; }
  .vitrin__ipucu{ font-size:.7rem; }
  .scene__text{ font-size:.94rem; margin-top:1rem; }
  .scene__actions .btn{ width:100%; }
  .scene-nav{ display:none; }  /* dar ekranda sahne metniyle çakışıyor */
  .cookie{ font-size:.82rem; }
  .cookie__btns{ width:100%; }
  .cookie__btns .btn{ flex:1; }
  .ara{ bottom:5.5rem; padding:.75rem 1rem; font-size:.72rem; }
  .ara span{ display:none; }
}

/* Hareket azaltma tercihi: yumuşatma kapanır, sahne akışı korunur */
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{ animation-duration:.001ms !important; transition-duration:.001ms !important; }
  .reveal{ opacity:1; transform:none; }
}