/* =========================================================================
   PERA MEDYA MİMARLIK — site stilleri (index.html'den ayrıldı, 17.10.2026)
   Yükleme sırası: bu dosya Tailwind CDN'den ÖNCE bağlanır → Tailwind yardımcı sınıfları
   eşit özgüllükte bu dosyanın sınıflarını ezer (ayrılmadan önceki kademe sırası aynen).
   Bölümler: 0 token · 1 taban · 2 imza motifi (tarama) · 3 tipografi/düğme · 4 header ·
   5 mobil menü · 6 hero · 7 hizmet rayı · 8 projeler · 9 atölye · 10 süreç · 11 referanslar ·
   12 teklif formu · 13 footer · 14 yüzen düğmeler + sosyal çekmeceler · 15 yasal pencere ·
   16 hareket azaltma / zorlanmış renkler / baskı · 17 satır içi stil karşılıkları + imza barı
   ========================================================================= */
/* =========================================================================
   0 · TOKEN'LAR — paletin tek doğruluk kaynağı Tailwind config'idir; aynı hex'ler
   burada değişken olarak tekrar edilir. Yeni renkler YALNIZ türev/işlev rengidir.
   ========================================================================= */
:root{
  --lacivert:#1F2B3D; --govde:#4A5262; --altin:#BF953F; --altin-yazi:#8A6A2B;
  --zemin-alt:#F7F5F0; --cizgi:#E7E3DA; --beyaz:#FFFFFF;
  --ref-yazi:#75777d; --ayak-yazi:#B8C0CC; --ayak-cizgi:#2E3B50;
  --altin-acik:#E5D5B2;     /* türev: altın %40 + beyaz — koyu zeminde küçük metin (≥4,5:1) */
  --lacivert-koyu:#17202E;  /* türev: lacivert %75 + siyah — imza barı, hero denetim şeridi */
  --alan-cizgi:#80868F;     /* türev: gövde grisi %70 + beyaz — form alanı kenarı (3:1) */
  /* KURUMSAL GRİ ZEMİN (kullanıcı: "site çok çırtlak beyaz … gri gibi bir şey olabilir, boğmayacak şekilde").
     Griler paletteki LACİVERTİN beyazla karışımıdır (türev, yeni renk ailesi değil): sayfa açık gri, bölümler
     açık gri ↔ taş gri dönüşümlü; beyaz yalnız yükseltilmiş yüzeylerde (kart, referans karosu, form). */
  --gri-1:#F4F4F5;          /* türev: lacivert %5 + beyaz — sayfa ve açık bölümler */
  --gri-2:#EBECEE;          /* türev: lacivert %9 + beyaz — taş gri bölümler */
  --gri-cizgi:#DDDFE2;      /* türev: lacivert %15 + beyaz — gri zeminde kıl çizgi */
  --altin-yazi-koyu:#7A5C22;/* türev: #8A6A2B %8 koyu — gri zeminde küçük altın yazı ≥5:1 */
  --hata:#B3261E;           /* işlev rengi */
  --wa:#1EA952;             /* işlev rengi: WhatsApp yeşilinin koyu türevi (beyaz ikonla 3,2:1) */
  --egri:cubic-bezier(.16,1,.3,1);
  --hdr-ic:68px;            /* başlık iç yüksekliği (sabit) */
  --hdr:69px;               /* başlık + 1px alt çizgi — JS gerçek değeri ölçüp yazar (iç yükseklik buna BAĞLI DEĞİL, döngü yok) */
  --menu-esik:1024px;       /* mobil menü kırılımı: CSS ve JS'in TEK kaynağı */
  --hero-sure:6500ms;       /* otomatik geçiş süresi: yalnız ilerleme çubuğunda yaşar */
}
@media (min-width:1024px){ :root{ --hdr-ic:80px; --hdr:81px; } }

/* =========================================================================
   1 · TABAN — çapa payı, yatay taşma, odak, atlama bağlantısı
   ========================================================================= */
html{ scroll-behavior:smooth; scroll-padding-top:calc(var(--hdr) + 12px); color-scheme:only light; -webkit-text-size-adjust:100%; }
html, body{ overflow-x:clip; }
body{ margin:0; background-color:#F4F4F5; color:#4A5262; font-family:'Manrope', system-ui, sans-serif; -webkit-font-smoothing:antialiased; }
[hidden]{ display:none !important; }
img, video{ max-width:100%; height:auto; }
h1, h2, h3{ text-wrap:balance; }
p{ text-wrap:pretty; }
.tab{ font-variant-numeric:tabular-nums; }
.gorsel-gizli{ position:absolute !important; width:1px; height:1px; margin:-1px; padding:0; overflow:hidden; clip-path:inset(50%); white-space:nowrap; border:0; }

a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible,
textarea:focus-visible, summary:focus-visible, [tabindex]:focus-visible{
  outline:2px solid #8A6A2B; outline-offset:3px;
}
.koyu a:focus-visible, .koyu button:focus-visible, .hero a:focus-visible, .hero button:focus-visible,
.ayak a:focus-visible, .ayak button:focus-visible, [data-imza-bari] a:focus-visible{ outline-color:#E5D5B2; }

.icerige-gec{ position:absolute; left:12px; top:-120px; z-index:300; display:inline-flex; align-items:center; min-height:44px; padding:12px 18px; border-radius:6px; background:#1F2B3D; color:#FFFFFF; font-weight:600; text-decoration:none; }
.icerige-gec:focus{ top:calc(8px + env(safe-area-inset-top, 0px)); }

.ikon{ width:20px; height:20px; flex:none; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.ikon--dolu{ fill:currentColor; stroke:none; }

/* =========================================================================
   2 · İMZA MOTİFİ — TARAMA (logodaki P monogramının çıtaları). TEK KURAL:
   renk, çıta kalınlığı ve adım değişkenle ölçeklenir; açı logodaki gibi ~37°.
   ========================================================================= */
.tarama,
.eyebrow-text::before,
.surec__liste::before{
  background-image:repeating-linear-gradient(143deg, var(--tarama-renk, currentColor) 0 var(--tarama-kalin, 1.5px), transparent 0 var(--tarama-adim, 5px));
}
.tarama--kase{ border-radius:0 9999px 9999px 0; }        /* P kâsesi: düz sol kenar, yuvarlak sağ */
.tarama--kase-ters{ border-radius:9999px 0 0 9999px; }

/* =========================================================================
   3 · TİPOGRAFİ VE DÜĞMELER (eski sınıf adları korundu; üst sınırlar eski sabitler)
   ========================================================================= */
.eyebrow-text{ display:inline-flex; align-items:center; gap:10px; margin:0; font-size:13px; line-height:1.4; font-weight:600; letter-spacing:.12em; text-transform:uppercase; color:#7A5C22; }
.eyebrow-text::before{ content:""; flex:none; width:22px; height:11px; --tarama-kalin:1.6px; --tarama-adim:5px; }
.eyebrow-text--acik{ color:#E5D5B2; }
.main-h1{ margin:0; font-size:clamp(32px, 3.3vw + 14px, 56px); line-height:1.12; font-weight:600; letter-spacing:-.02em; color:#1F2B3D; }
.baslik-h2{ margin:0; font-size:clamp(28px, 1.9vw + 16px, 40px); line-height:1.2; font-weight:600; letter-spacing:-.01em; color:#1F2B3D; }
.body-copy{ margin:0; font-size:clamp(16px, .35vw + 14.6px, 18px); line-height:1.65; font-weight:400; color:#4A5262; }
.mono{ font-family:'Fragment Mono', ui-monospace, SFMono-Regular, Menlo, monospace; }

.btn-primary, .btn-secondary, .btn-acik{
  display:inline-flex; align-items:center; justify-content:center; gap:8px; min-height:48px; padding:0 26px;
  border-radius:6px; font-size:16px; font-weight:600; line-height:1.2; text-decoration:none; white-space:nowrap; cursor:pointer;
  transition:background-color .2s ease, color .2s ease, border-color .2s ease, opacity .2s ease;
}
.btn-primary{ background-color:#BF953F; color:#1F2B3D; border:1px solid #BF953F; }
.btn-primary:hover{ opacity:.92; }
.btn-secondary{ background-color:transparent; border:1px solid #1F2B3D; color:#1F2B3D; }
.btn-secondary:hover{ background-color:#1F2B3D; color:#FFFFFF; }
.btn-acik{ background-color:transparent; border:1px solid rgb(255 255 255 / .72); color:#FFFFFF; }
.btn-acik:hover{ background-color:#FFFFFF; border-color:#FFFFFF; color:#1F2B3D; }
.btn--kucuk{ min-height:44px; padding:0 20px; font-size:15px; }

.metin-bag{ display:inline-flex; align-items:center; gap:6px; min-height:44px; padding:0; border:0; background:none; font:inherit; font-size:15px; font-weight:600; color:#7A5C22; text-decoration:underline; text-decoration-color:transparent; text-underline-offset:4px; cursor:pointer; transition:text-decoration-color .2s ease; }
.metin-bag:hover{ text-decoration-color:currentColor; }

.sec{ padding-block:clamp(64px, 8vw, 96px); }
/* Gri zeminler: üst köşeden çok hafif ışık süzmesi (tekil radial — doku değil) */
.zemin-gri-1{ background:radial-gradient(900px 380px at 88% 0%, rgb(255 255 255 / .7), rgb(255 255 255 / 0) 70%), #F4F4F5; }
.zemin-gri-2{ background:radial-gradient(1100px 420px at 12% 0%, rgb(255 255 255 / .55), rgb(255 255 255 / 0) 70%), #EBECEE; }
/* P monogramı filigranı (lacivert %5) — iki açık bölümde marka izi */
.filigranli{ position:relative; overflow:hidden; }
.filigranli > div{ position:relative; z-index:1; }
.filigran{ position:absolute; z-index:0; width:clamp(260px, 30vw, 420px); height:auto; color:rgb(31 43 61 / .05); pointer-events:none; }
.filigran--sag{ top:36px; right:-70px; }
.filigran--sol{ bottom:-60px; left:-80px; }
.sec--kisa{ padding-block:clamp(56px, 7vw, 80px); }

/* Scroll-reveal: gizleme YALNIZ html.js altında (JS yoksa içerik görünür kalır) */
.js .reveal{ opacity:0; transform:translateY(20px); transition:opacity .7s var(--egri) var(--d, 0ms), transform .7s var(--egri) var(--d, 0ms); }
.js .reveal.gorunur{ opacity:1; transform:none; }

/* =========================================================================
   4 · HEADER — yapışkan; üst şerit YOK, telefon + teklif sağ kümede. Hero'nun üzerindeyken cam (aşağıda)
   ========================================================================= */
.baslik{ position:sticky; top:0; z-index:100; background:#FFFFFF; border-bottom:1px solid #DDDFE2; transition:background-color .4s ease, border-color .4s ease, box-shadow .3s ease, -webkit-backdrop-filter .4s ease, backdrop-filter .4s ease; }
.baslik.is-yapisik{ box-shadow:0 12px 32px -20px rgb(31 43 61 / .5); }
.baslik__ic{ max-width:1200px; height:var(--hdr-ic); margin-inline:auto; padding-inline:24px; display:flex; align-items:center; justify-content:space-between; gap:20px; }
.marka{ display:inline-flex; align-items:center; flex:none; min-height:44px; }
/* Firmanın logosu koyu zemin için çizilmiş (açık gri harf, beyaz ayraç) — beyaz header'da silik kalıyordu →
   açık zemin tonları (aşağıda). */
/* Logo VEKTÖR (#pera-logo sembolü): firmanın 321×93 PNG'si Retina ekranda bulanık kalıyordu (kullanıcı: "logo
   blurlanmış"). Renkler burada: ahşap = color, yazı = fill, ayraç = stroke. Varsayılan açık zemin tonları (ahşap bir
   kademe koyu, yazı lacivert, ayraç altın); cam header ve footer'da firmanın orijinal (koyu zemin) tonları. */
.marka__logo{ display:block; height:38px; width:auto; aspect-ratio:321 / 93; overflow:visible; color:#A58764; fill:#1F2B3D; stroke:#BF953F; -webkit-user-select:none; user-select:none; transition:color .4s ease, fill .4s ease, stroke .4s ease; }
@media (min-width:1024px){ .marka .marka__logo{ height:48px; } }

.nav{ display:none; }
@media (min-width:1024px){ .nav{ display:flex; align-items:center; gap:clamp(16px, 1.9vw, 30px); } }
.nav a{ position:relative; display:inline-flex; align-items:center; min-height:44px; font-size:15px; font-weight:500; color:#1F2B3D; text-decoration:none; transition:color .2s ease; }
.nav a::after{ content:""; position:absolute; left:0; right:0; bottom:8px; height:2px; background:#BF953F; transform:scaleX(0); transform-origin:left center; transition:transform .35s var(--egri); }
.nav a:hover{ color:#8A6A2B; }
.nav a:hover::after, .nav a[aria-current="true"]::after{ transform:scaleX(1); }

.baslik__eylem{ display:flex; align-items:center; gap:12px; }
.baslik__tel{ display:inline-flex; align-items:center; gap:10px; min-height:44px; color:#1F2B3D; text-decoration:none; transition:color .4s ease; }
.baslik__tel-ikon{ width:40px; height:40px; flex:none; display:grid; place-items:center; border:1px solid #E7E3DA; border-radius:50%; color:#8A6A2B; transition:border-color .2s ease, background-color .2s ease, color .4s ease; }
.baslik__tel:hover .baslik__tel-ikon{ border-color:#BF953F; background:#F7F5F0; }
.baslik__tel-metin{ display:flex; flex-direction:column; line-height:1.15; }
.baslik__tel-etiket{ display:none; font-family:'Fragment Mono', ui-monospace, monospace; font-size:10.5px; letter-spacing:.14em; color:#8A6A2B; }
.baslik__tel-no{ font-size:15px; font-weight:600; font-variant-numeric:tabular-nums; white-space:nowrap; }
.baslik__teklif{ display:none; }
.menu-dugme{ width:44px; height:44px; flex:none; display:grid; place-items:center; border:1px solid #DDDFE2; border-radius:6px; background:#FFFFFF; color:#1F2B3D; cursor:pointer; transition:background-color .4s ease, border-color .4s ease, color .4s ease; }
@media (min-width:560px){ .baslik__teklif{ display:inline-flex; } }
@media (min-width:1024px){ .menu-dugme{ display:none; } }
@media (min-width:1280px){ .baslik__tel-etiket{ display:block; } }
/* Büyük ekran — kullanıcı isteği: "logo, menü, teklif al çok ortalanmış ve iç içe; logo sol köşeye, bizi
   arayın ve teklif al sağ köşeye yakın, ikisinin arası açılsın". Header 1200px kapsayıcıdan çıkar (ekran
   kenarından 3vw, en çok 64px); üç sütun: logo solda · menü ekranın TAM ortasında · telefon + teklif sağda. */
@media (min-width:1024px){
  .baslik__ic{ max-width:none; display:grid; grid-template-columns:1fr auto 1fr; gap:32px; padding-inline:clamp(24px, 3vw, 64px); }
  .marka{ justify-self:start; }
  .baslik__eylem{ justify-self:end; gap:24px; }
}
@media (min-width:1280px){ .baslik__eylem{ gap:36px; } }
/* Telefon numarası: <380px ve 1024–1279px aralığında yalnız ikon (ad korunur, görsel gizli) */
@media (max-width:379px), (min-width:1024px) and (max-width:1279px){
  .baslik__tel-metin{ position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; }
}
@media (max-width:1023px){
  .baslik__ic{ gap:12px; padding-inline:20px; }
  .baslik__eylem{ gap:10px; }
  .baslik__tel{ gap:8px; }
  .baslik__tel-ikon{ width:36px; height:36px; }
  .baslik__tel-no{ font-size:14px; }
}
/* Okuma çubuğu: sayfa ilerledikçe dolar (yalnız destekleyen tarayıcıda, JS'siz) */
.baslik__ilerleme{ position:absolute; left:0; right:0; bottom:-1px; height:2px; background:#BF953F; transform:scaleX(0); transform-origin:left center; pointer-events:none; }
@supports (animation-timeline: scroll()){
  @keyframes okumaCubugu{ to{ transform:scaleX(1); } }
  .baslik__ilerleme{ animation:okumaCubugu linear both; animation-timeline:scroll(root block); }
}
/* CAM HEADER — kullanıcı isteği: "header çok beyaz gözüküyor … sayfa en üstteyken şeffafımsı glass bir
   efekt". Header hero'nun ÜSTÜNE biner (bölüm 6: hero header kadar yukarı çekilir, içeriği aynı kadar
   aşağı itilir). Header hero'nun üzerindeyken .is-cam (JS kaydırmayla günceller; açılışta işaretlemede
   hazır). JS yoksa düz beyaz kalır. 22.10.2026: "lacivertliği kaldıralım, açık bir renk yapalım" → cam
   AÇIK: hero'nun kum örtüsüyle aynı aileden sıcak, yarı saydam buzlu cam (düz beyaz değil) + açık zemin
   logosu + lacivert menü; hero geçilince buzlu beyaz + gölge. Kontrast gerçek slaytlarla ölçüldü (yazılar
   gizlenip arkadaki zemin çekildi) — sonuç bölüm 16 öncesi teslim notunda. FOTOĞRAF DEĞİŞİRSE YENİDEN ÖLÇ. */
@supports ((backdrop-filter: blur(2px)) or (-webkit-backdrop-filter: blur(2px))){
  .js .baslik{ background:rgb(255 255 255 / .86); -webkit-backdrop-filter:blur(16px) saturate(1.6) brightness(1); backdrop-filter:blur(16px) saturate(1.6) brightness(1); }
  .js .baslik.is-cam{ background:rgb(245 239 226 / .62); border-bottom-color:rgb(31 43 61 / .10); -webkit-backdrop-filter:blur(24px) saturate(1.3) brightness(1.15); backdrop-filter:blur(24px) saturate(1.3) brightness(1.15); }
}
@supports not ((backdrop-filter: blur(2px)) or (-webkit-backdrop-filter: blur(2px))){
  .js .baslik.is-cam{ background:rgb(245 239 226 / .94); border-bottom-color:rgb(31 43 61 / .10); }
}
.js .baslik.is-cam .baslik__tel-etiket{ color:#1F2B3D; }   /* kum camda küçük yazı lacivert: koyu ahşap 2. slaytta 3,4:1'de kalıyordu */
.js .baslik.is-cam .baslik__tel-ikon{ border-color:rgb(31 43 61 / .18); color:#634A1C; }
.js .baslik.is-cam .menu-dugme{ background:rgb(255 255 255 / .55); border-color:rgb(31 43 61 / .16); }

/* =========================================================================
   5 · MOBİL MENÜ — tam ekran panel; odak tuzağı + Esc + iOS kaydırma kilidi (JS)
   ========================================================================= */
.mobil-menu{
  position:fixed; inset:0; z-index:120; display:flex; flex-direction:column; gap:24px;
  overflow-y:auto; overscroll-behavior:contain; background:#F4F4F5; color:#1F2B3D;
  padding:0 calc(20px + env(safe-area-inset-right, 0px)) calc(28px + env(safe-area-inset-bottom, 0px)) calc(20px + env(safe-area-inset-left, 0px));
  visibility:hidden; pointer-events:none; opacity:0; transform:translateY(-8px);
  transition:opacity .28s var(--egri), transform .28s var(--egri), visibility 0s linear .28s;
}
.mobil-menu[data-acik="evet"]{ visibility:visible; pointer-events:auto; opacity:1; transform:none; transition:opacity .28s var(--egri), transform .28s var(--egri), visibility 0s; }
@media (min-width:1024px){ .mobil-menu{ display:none; } }
.mobil-menu__ust{ display:flex; align-items:center; justify-content:space-between; min-height:var(--hdr-ic); padding-top:env(safe-area-inset-top, 0px); border-bottom:1px solid #DDDFE2; }
.mobil-menu__nav{ display:flex; flex-direction:column; }
.mobil-menu__nav a{ display:flex; align-items:baseline; gap:14px; min-height:56px; padding-block:14px; border-bottom:1px solid #DDDFE2; font-size:clamp(20px, 5.4vw, 24px); font-weight:600; color:#1F2B3D; text-decoration:none; }
.mobil-menu__nav a[aria-current="true"]{ color:#7A5C22; }
.mobil-menu__nav .no{ font-family:'Fragment Mono', ui-monospace, monospace; font-size:12px; font-weight:400; letter-spacing:.1em; color:#8A6A2B; }
.mobil-menu__kunye{ position:relative; isolation:isolate; display:grid; gap:2px; }
.mobil-menu__kunye a, .mobil-menu__kunye p{ display:flex; align-items:center; gap:12px; min-height:44px; margin:0; font-size:15px; color:#4A5262; text-decoration:none; overflow-wrap:anywhere; }
.mobil-menu__kunye .ikon{ color:#8A6A2B; }
/* P monogramı — kullanıcı isteği: telefon/e-posta bloğunun TAM ORTASINDA, soluk arka plan (filigran).
   Yazıların altında (z-index -1, blok kendi yığın bağlamını kurar); en kötü kesişimde yazı kontrastı ≥6:1. */
.mobil-menu__monogram{ position:absolute; z-index:-1; left:50%; top:50%; height:104%; width:auto; aspect-ratio:86 / 96; transform:translate(-50%, -50%); overflow:visible; color:#BF953F; opacity:.16; pointer-events:none; }
@media (prefers-reduced-motion: no-preference){
  .mobil-menu .mobil-menu__nav a{ opacity:0; transform:translateY(8px); transition:opacity .3s var(--egri), transform .3s var(--egri); }
  .mobil-menu[data-acik="evet"] .mobil-menu__nav a{ opacity:1; transform:none; }
  .mobil-menu[data-acik="evet"] .mobil-menu__nav a:nth-child(2){ transition-delay:.04s; }
  .mobil-menu[data-acik="evet"] .mobil-menu__nav a:nth-child(3){ transition-delay:.08s; }
  .mobil-menu[data-acik="evet"] .mobil-menu__nav a:nth-child(4){ transition-delay:.12s; }
  .mobil-menu[data-acik="evet"] .mobil-menu__nav a:nth-child(5){ transition-delay:.16s; }
  .mobil-menu[data-acik="evet"] .mobil-menu__nav a:nth-child(6){ transition-delay:.2s; }
}

/* =========================================================================
   6 · HERO — tam alan, çapraz geçişli slider; zamanlayıcı ilerleme çubuğunun kendisi
   ========================================================================= */
/* Hero header'ın altına uzanır (cam header, bölüm 4): header kadar yukarı çekilir; sahne yüksekliği ve
   metnin üst boşluğu aynı kadar artar → header'ın altında görünen hero birebir eskisi gibi */
.hero{ position:relative; display:grid; overflow:hidden; margin-top:calc(-1 * var(--hdr)); background:#EDE3CE; color:#1F2B3D; isolation:isolate; --serit-h:64px; }
.hero [hidden]{ display:none !important; }   /* display:grid'li düğmeler UA [hidden] kuralını ezer */
.hero__sahne{ grid-area:1 / 1; display:grid; min-width:0;
  min-height:calc(clamp(560px, calc(100vh - var(--hdr)), 880px) + var(--hdr));
  min-height:calc(clamp(560px, calc(100svh - var(--hdr)), 880px) + var(--hdr)); }   /* dvh DEĞİL: kaydırırken zıplamasın */
.hero__slayt{ grid-area:1 / 1; position:relative; display:flex; align-items:center; transition:opacity .8s var(--egri), visibility 0s; }
/* JS yokken / JS'ten önce yalnız 1. slayt görünür — hero asla boş kalmaz */
.hero__slayt:not(:first-child){ opacity:0; visibility:hidden; pointer-events:none; }
.hero__slayt[data-aktif="hayir"]{ opacity:0; visibility:hidden; pointer-events:none; transition:opacity .8s var(--egri), visibility 0s linear .8s; }
.hero__slayt[data-aktif="evet"]{ opacity:1; visibility:visible; pointer-events:auto; z-index:2; transition:opacity .8s var(--egri), visibility 0s; }
/* Giden slayt gelenin ALTINDA opak kalır (süt perdesi yok); yalnız metni hızla söner (çift pozlama yok) */
.hero__slayt[data-onceki]{ opacity:1; visibility:visible; z-index:1; transition:none; }
.hero__slayt[data-onceki] .hero__metin, .hero__slayt[data-onceki] .hero__etiket{ opacity:0; transition:opacity .25s ease; }

.hero__gorsel{ position:absolute; inset:0; width:100%; height:100%; max-width:none; object-fit:cover; filter:saturate(1.15) contrast(1.04); }   /* canlı renk (kullanıcı isteği) */
.hero__slayt:nth-child(1) .hero__gorsel{ object-position:38% 50%; }
.hero__slayt:nth-child(2) .hero__gorsel{ object-position:62% 50%; }
.hero__slayt:nth-child(3) .hero__gorsel{ object-position:64% 50%; }
@media (max-width:767px), (max-width:1023px) and (orientation:portrait){
  .hero__slayt:nth-child(1) .hero__gorsel{ object-position:0% 50%; }
  .hero__slayt:nth-child(2) .hero__gorsel{ object-position:46% 50%; }
  .hero__slayt:nth-child(3) .hero__gorsel{ object-position:56% 50%; }
}
/* Perde — AÇIK KUM ÖRTÜ. Kullanıcı (21.10.2026): "slider tarafı çok koyu … renk tonunu aç, canlı renk olsun"
   → "farklı açık bir renk seç". Lacivert perde (%76→%60) yerine yazı tarafında sıcak kum tonu (#F2EAD9 =
   paletteki açık altın #E5D5B2 + %50 beyaz), sağa doğru kaybolur; fotoğrafın sağ yarısı tamamen açık ve
   doygun. Yazılar koyuya döndü (aşağıda). 22.10.2026: header ve alt şerit de açık camdır; örtü en üstten başlar
   (lacivert bant kaldırıldı). Kontrast gerçek slaytlarla ölçüldü (yazılar gizlenip arkadaki
   zemin çekildi; koyu yazıda zeminin en koyu %2'sine karşı), 1024–1920px × 3 slayt, en kötü: üst etiket 4,99 ·
   paragraf 5,28 · başlık 7,71 · düğme/künye 8,0. FOTOĞRAF DEĞİŞİRSE YENİDEN ÖLÇ. */
.hero__perde{ position:absolute; inset:0; background:
  linear-gradient(90deg, rgb(242 234 217 / .88) 0, rgb(242 234 217 / .80) max(46%, 640px), rgb(242 234 217 / .30) max(60%, 860px), rgb(242 234 217 / 0) max(72%, 1000px)); }

.hero__metin{ position:relative; z-index:1; width:100%; max-width:1200px; margin-inline:auto; padding:calc(clamp(72px, 9vw, 112px) + var(--hdr)) 24px clamp(150px, 13vw, 172px); }
.hero__metin > *{ max-width:min(100%, 580px); }
.hero__metin > .main-h1{ max-width:min(100%, 680px); color:#1F2B3D; }
.hero__metin .eyebrow-text{ margin-bottom:18px; }
.hero__metin .eyebrow-text--acik{ color:#634A1C; }   /* açık zeminde küçük yazı: #7A5C22'nin bir kademe koyusu (≥4,5) */
.hero__metin .body-copy{ margin-top:22px; color:#3A4352; }
.hero__metin .btn-acik{ border-color:#1F2B3D; color:#1F2B3D; }
.hero__metin .btn-acik:hover{ background-color:#1F2B3D; border-color:#1F2B3D; color:#FFFFFF; }
.hero__metin a:focus-visible{ outline-color:#7A5C22; }
.hero__aksiyon{ display:flex; flex-wrap:wrap; gap:12px; margin-top:32px; }
.hero__kunye{ list-style:none; margin:40px 0 0; padding:0; display:flex; flex-wrap:wrap; align-items:center; }
.hero__kunye li{ font-size:15px; font-weight:600; letter-spacing:-.01em; color:#1F2B3D; white-space:nowrap; }
.hero__kunye li + li{ margin-left:24px; padding-left:24px; border-left:1px solid #BF953F; }

/* Slaytın görsel künyesi (eski hero görselindeki beyaz etiketin devamı) */
.hero__etiket{ position:absolute; z-index:2; right:max(24px, calc((100% - 1200px) / 2 + 24px)); bottom:calc(var(--serit-h) + 20px); margin:0; display:none; align-items:center; padding:7px 12px; border-radius:4px; background:rgb(255 255 255 / .95); border:1px solid #E7E3DA; box-shadow:0 1px 2px rgb(0 0 0 / .1); font-size:12px; font-weight:500; color:#1F2B3D; transition:opacity .4s ease; }
@media (min-width:768px){ .hero__etiket{ display:inline-flex; } }
@media (max-width:359px){ .hero__etiket{ display:none !important; } }

/* Denetim şeridi — hero ızgarasının aynı hücresinde alta yaslı (absolute değil) */
.hero__serit{ grid-area:1 / 1; align-self:end; min-width:0; position:relative; z-index:3; border-top:1px solid rgb(31 43 61 / .10); background:rgb(245 239 226 / .86); -webkit-backdrop-filter:blur(12px) saturate(1.3); backdrop-filter:blur(12px) saturate(1.3); }   /* açık kum cam (22.10.2026) */
@supports not ((backdrop-filter: blur(2px)) or (-webkit-backdrop-filter: blur(2px))){ .hero__serit{ background:rgb(245 239 226 / .97); } }
.hero:not([data-hazir]) .hero__serit{ display:none; }   /* çalışmayan kontrol gösterme */
.hero__serit-ic{ max-width:1200px; margin-inline:auto; padding:6px 24px; display:flex; align-items:center; justify-content:space-between; gap:16px; }
/* Sol alttaki yüzen küme HER ZAMAN ekranda (kullanıcı isteği) → şerit içeriği kümeye yer açar (16 + 52 + 16) */
.hero__serit-ic{ padding-left:max(24px, calc(84px - max(0px, (100vw - 1200px) / 2))); }
.hero__sol{ display:flex; align-items:center; gap:20px; min-width:0; }
.hero__sayac{ margin:0; font-family:'Fragment Mono', ui-monospace, monospace; font-size:13px; letter-spacing:.06em; color:#1F2B3D; font-variant-numeric:tabular-nums; white-space:nowrap; }
.hero__sayac-toplam{ color:#4A5262; }
.hero__noktalar{ display:flex; align-items:stretch; gap:6px; }
/* Nokta = 44px'lik düğmenin kendisi (komşu dokunma alanı çakışmaz); dolgu ::after scaleX */
.hero__nokta{ position:relative; display:flex; align-items:center; min-width:44px; min-height:44px; padding:10px 8px 0; border:0; background:none; color:#3A4352; font-family:'Fragment Mono', ui-monospace, monospace; font-size:11px; letter-spacing:.12em; text-transform:uppercase; white-space:nowrap; cursor:pointer; transition:color .2s ease; }
.hero__nokta::before, .hero__nokta::after{ content:""; position:absolute; left:8px; right:8px; top:9px; height:2px; }
.hero__nokta::before{ background:rgb(31 43 61 / .22); }
.hero__nokta::after{ background:#BF953F; transform:scaleX(0); transform-origin:left center; transition:transform .35s var(--egri); }
.hero__nokta:hover, .hero__nokta[aria-current="true"]{ color:#1F2B3D; }
.hero__nokta[aria-current="true"]::after{ transform:scaleX(1); }
.hero__oklar{ display:flex; align-items:center; gap:8px; }
.hero__ok{ width:44px; height:44px; display:grid; place-items:center; border:1px solid rgb(31 43 61 / .30); border-radius:6px; background:transparent; color:#1F2B3D; cursor:pointer; transition:background-color .2s ease, color .2s ease, border-color .2s ease; }
.hero__ok:hover{ background:#1F2B3D; border-color:#1F2B3D; color:#FFFFFF; }
.hero__serit button:focus-visible{ outline-color:#7A5C22; }
#heroDurdur[data-durum="durdu"]{ background:#BF953F; border-color:#BF953F; color:#1F2B3D; }
@keyframes heroDolum{ from{ transform:scaleX(0); } to{ transform:scaleX(1); } }
.hero__ilerleme{ position:absolute; top:-1px; left:0; right:0; height:2px; background:#BF953F; transform:scaleX(0); transform-origin:left center; animation:heroDolum var(--hero-sure) linear forwards; }

@media (prefers-reduced-motion: no-preference){
  /* [data-aktif] yalnız JS kurulunca yazılır → JS yokken metin gizlenmez */
  .hero__slayt[data-aktif] .s-ic{ opacity:0; transform:translateY(16px); transition:opacity .5s var(--egri), transform .6s var(--egri); }
  .hero__slayt[data-aktif="evet"] .s-ic{ opacity:1; transform:none; }
  .hero__slayt[data-aktif="evet"] .s-ic:nth-child(1){ transition-delay:.08s; }
  .hero__slayt[data-aktif="evet"] .s-ic:nth-child(2){ transition-delay:.16s; }
  .hero__slayt[data-aktif="evet"] .s-ic:nth-child(3){ transition-delay:.24s; }
  .hero__slayt[data-aktif="evet"] .s-ic:nth-child(4){ transition-delay:.32s; }
  .hero__slayt[data-aktif="evet"] .s-ic:nth-child(5){ transition-delay:.4s; }
  /* Yavaş yaklaşma: slayt süresinden 3 sn uzun; giden slaytta da sürer (sıçrama yok) */
  @keyframes heroYaklas{ from{ transform:scale(1); } to{ transform:scale(1.06); } }
  .hero__slayt[data-aktif="evet"] .hero__gorsel, .hero__slayt[data-onceki] .hero__gorsel{ animation:heroYaklas calc(var(--hero-sure) + 3000ms) linear both; }
}

/* TELEFON + DİKEY TABLET: TAM EKRAN + FOTOĞRAFIN TAMAMI. Kullanıcı önce "tam ekran olursa daha iyi
   olur", sonra "mobilde resimler tam gözükmüyor, resmin ne olduğu belli olmuyor" dedi: dikey ekranda yatay
   fotoğrafı cover ile doldurmak genişliğin yalnız ~%38'ini gösteriyordu. Şimdi fotoğraf üstte TAM GENİŞLİK
   ve kırpılmadan (4:3) durur; altında yazılar AÇIK KUM panelde (masaüstündeki örtünün aynı tonu, 21.10.2026),
   kontrast ≥6,9. Fotoğrafın bulanık hâli yalnız cam header'ın arkasında kalır. */
@media (max-width:767px), (max-width:1023px) and (orientation:portrait){
  .hero__sahne{ min-height:calc(max(520px, calc(100vh - var(--hdr))) + var(--hdr)); min-height:calc(max(520px, calc(100svh - var(--hdr))) + var(--hdr)); }
  /* Fotoğraf header'ın ALTINDAN başlar (tamamı görünür); cam header'ın arkasında bulanık zemin kalır */
  .hero__slayt{ flex-direction:column; align-items:stretch; justify-content:flex-start; padding-top:var(--hdr); }
  .hero__slayt::before{ content:""; position:absolute; inset:-40px; z-index:0; background-position:center; background-size:cover; filter:blur(24px) saturate(1.25) brightness(1.05); }   /* açık camın arkası: karartma yok */
  .hero__slayt:nth-child(1)::before{ background-image:url("../img/hero-ahsap-960.webp"); }
  .hero__slayt:nth-child(2)::before{ background-image:url("../img/hero-maxima-960.webp"); }
  .hero__slayt:nth-child(3)::before{ background-image:url("../img/hero-3d-960.webp"); }
  .hero__slayt picture{ position:relative; z-index:1; display:block; flex:none; aspect-ratio:4 / 3; overflow:hidden; }
  .hero__perde{ display:none; }
  .hero__metin{ flex:1 1 auto; padding:22px 24px calc(var(--serit-h) + 64px);   /* +64: dikey kümenin üst butonu metne binmesin */
    background:linear-gradient(180deg, #F2EAD9, #EDE3CE); }
  .hero__etiket{ display:inline-flex; z-index:2; top:calc(var(--hdr) + 12px); left:12px; right:auto; bottom:auto; padding:5px 9px; font-size:11px; }
  .hero__metin .eyebrow-text{ margin-bottom:14px; }
  .hero__metin .body-copy{ margin-top:16px; }
  .hero__aksiyon{ margin-top:24px; }
}
/* Telefon: fotoğraf HER ZAMAN tam genişlik (standın tamamı görünür); yüksekliği ekrandan metin bloğu
   (~530px) düşülerek bulunur → fotoğraf + metin tek ekrana sığar. En az 180px, en çok 4:3 (fotoğrafın tamamı). */
@media (max-width:767px){
  .hero__slayt picture{ aspect-ratio:auto; height:clamp(180px, calc(100vh - var(--hdr) - 530px), 75vw); height:clamp(180px, calc(100svh - var(--hdr) - 530px), 75vw); }
}
/* Kısa telefon ekranı (≤760px; gerçek iPhone/Android tarayıcı yükseklikleri çoğunlukla burada): künye satırı
   görsel olarak gizlenir (ekran okuyucuda kalır), fotoğraf alt sınırı 150px, boşluklar sıkılaşır → "Teklif Al"
   sol alttaki yüzen kümenin üstünde kalır, paragraf kesilmez */
@media (max-width:767px) and (max-height:760px){
  .hero__kunye{ position:absolute; width:1px; height:1px; margin:-1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; }
  .hero__slayt picture{ height:clamp(150px, calc(100vh - var(--hdr) - 500px), 75vw); height:clamp(150px, calc(100svh - var(--hdr) - 500px), 75vw); }
  .hero__metin{ padding-top:16px; }
  .hero__metin .eyebrow-text{ margin-bottom:12px; }
  .hero__aksiyon{ margin-top:20px; }
}
/* Dikey tablet: fotoğraf 16:10 */
@media (min-width:768px) and (max-width:1023px) and (orientation:portrait){
  .hero__slayt picture{ aspect-ratio:16 / 10; }
}
/* Telefon + dikey tablet: şerit 64px, içeriği yüzen kümeye yer açar (küme ölçüleri bölüm 14'te) */
@media (max-width:767px), (max-width:1023px) and (orientation:portrait){
  .hero__serit-ic{ min-height:64px; padding-left:72px; }
}
/* Telefon ayrıntıları */
@media (max-width:767px){
  .hero__metin{ padding-inline:20px; }
  .hero__aksiyon a{ flex:1 1 auto; }
  .hero__kunye{ display:block; margin-top:24px; line-height:1.7; }
  .hero__kunye li{ display:inline; font-size:14px; }
  .hero__kunye li + li{ margin:0; padding:0; border:0; }
  .hero__kunye li:not(:last-child)::after{ content:" · "; white-space:pre; color:#BF953F; }
  .hero__serit-ic{ padding-block:4px; padding-right:12px; gap:8px; }   /* sol pay (72px) yüzen kümeye ayrıldı */
  .hero__sol{ gap:10px; }
  .hero__noktalar{ gap:0; }
  .hero__nokta{ width:40px; min-width:40px; padding:0; font-size:0; letter-spacing:0; }
  .hero__nokta::before, .hero__nokta::after{ left:6px; right:6px; top:21px; }
  .hero__oklar{ gap:6px; }
}
/* Telefonda şeridin solunu yüzen küme kullanır → noktalar gizli, "01 / 03" sayacı kalır (standart) */
@media (max-width:767px){ .hero__noktalar{ display:none; } }
@media (max-width:359px){ .hero__serit-ic{ padding-right:10px; } }
/* Yatay tutulan telefon: 560px taban ekrandan taşar — kaçış kapısı */
@media (orientation: landscape) and (max-height: 560px){
  .hero__sahne{ min-height:calc(440px + var(--hdr)); }
  .hero__metin{ padding-block:44px calc(var(--serit-h) + 28px); }
  .hero .main-h1{ font-size:clamp(24px, 4.4vh + 10px, 34px); }
  .hero__kunye{ margin-top:18px; }
}
/* …aynı kapı, tam alan (masaüstü) düzende: metin cam header'ın altından başlar */
@media (min-width:768px) and (orientation: landscape) and (max-height: 560px){
  .hero__metin{ padding-top:calc(44px + var(--hdr)); }
}

/* =========================================================================
   7 · HİZMETLER — kart yapısı korundu (altın üst kenar, beyaz kart)
   ========================================================================= */
.kart{ display:flex; flex-direction:column; background:#FFFFFF; border-top:4px solid #BF953F; border-radius:8px; overflow:hidden; box-shadow:0 1px 2px rgb(31 43 61 / .06), 0 14px 32px -24px rgb(31 43 61 / .35); transition:box-shadow .35s var(--egri); }
.kart:hover{ box-shadow:0 22px 44px -28px rgb(31 43 61 / .4); }
.kart__gorsel{ position:relative; aspect-ratio:3 / 2; overflow:hidden; background:#E7E3DA; }
.kart__no{ position:absolute; z-index:1; left:14px; top:14px; padding:4px 8px; border-radius:4px; background:rgb(255 255 255 / .94); font-family:'Fragment Mono', ui-monospace, monospace; font-size:12px; letter-spacing:.08em; color:#1F2B3D; }

/* Kaydırmalı ray — kapsayıcı hattından başlar, ekran kenarına taşar (scroll-snap, JS'siz de kayar) */
.hizmet-ust{ display:flex; flex-wrap:wrap; align-items:flex-end; justify-content:space-between; gap:20px 32px; margin-bottom:clamp(32px, 4vw, 48px); }
.kaydirac{ display:flex; gap:10px; margin-left:auto; }
.kaydirac__ok{ width:48px; height:48px; display:grid; place-items:center; border:1px solid #1F2B3D; border-radius:6px; background:transparent; color:#1F2B3D; cursor:pointer; transition:background-color .2s ease, color .2s ease, opacity .2s ease; }
.kaydirac__ok:hover{ background:#1F2B3D; color:#FFFFFF; }
.kaydirac__ok[aria-disabled="true"]{ opacity:.32; cursor:default; background:transparent; color:#1F2B3D; }
html:not(.js) .kaydirac, html:not(.js) .ray__cubuk{ display:none; }
.ray{ --ray-kenar:max(24px, calc((100% - 1200px) / 2 + 24px)); overflow-x:auto; overscroll-behavior-x:contain; scroll-snap-type:x mandatory; scroll-padding-inline:var(--ray-kenar); scrollbar-width:none; -webkit-overflow-scrolling:touch; }
.ray::-webkit-scrollbar{ display:none; }
.ray:focus-visible{ outline:2px solid #8A6A2B; outline-offset:-2px; }
.ray__liste{ list-style:none; margin:0; padding:6px var(--ray-kenar) 10px; display:flex; gap:24px; width:max-content; }
.ray__oge{ flex:0 0 auto; display:flex; width:min(80vw, 340px); scroll-snap-align:start; }
@media (min-width:768px){ .ray__oge{ width:360px; } }
@media (min-width:1280px){ .ray__oge{ width:380px; } }
.ray__oge > .kart{ width:100%; }
.ray__cubuk{ position:relative; height:2px; margin-top:26px; overflow:hidden; background:#D2D5DA; }
.ray__cubuk span{ position:absolute; left:0; top:0; bottom:0; width:40%; background:#BF953F; }
/* Rayın son kartı: teklif çağrısı (lacivert, makro tarama kâsesi) */
.kart-cta{ position:relative; justify-content:flex-end; gap:14px; padding:28px; background:#1F2B3D; color:#B8C0CC; }
.kart-cta > *{ position:relative; margin:0; }
.kart-cta__tarama{ position:absolute; top:-24px; right:-36px; width:190px; aspect-ratio:3 / 4; --tarama-renk:rgb(191 149 63 / .5); --tarama-kalin:2px; --tarama-adim:9px; }
.kart-cta__baslik{ font-size:24px; font-weight:600; line-height:1.25; color:#FFFFFF; }
.kart-cta__metin{ font-size:15px; line-height:1.6; color:#B8C0CC; }
.kart-cta .btn-primary{ align-self:flex-start; margin-top:6px; }
.kart__gorsel img, .proje__gorsel img{ display:block; width:100%; height:100%; object-fit:cover; transition:transform .7s var(--egri); }
.kart:hover .kart__gorsel img, .proje:hover .proje__gorsel img{ transform:scale(1.04); }
.kart__bag{ margin-top:auto; align-self:flex-start; font-size:14px; }

/* =========================================================================
   8 · PROJELER — çalışan süzgeç + "Tüm projeler" genişletmesi + boş durum
   ========================================================================= */
.suzgec button{ min-height:44px; padding:0 20px; border:1px solid #DDDFE2; border-radius:9999px; background:#FFFFFF; color:#4A5262; font:inherit; font-size:14px; font-weight:500; cursor:pointer; transition:border-color .2s ease, background-color .2s ease, color .2s ease; }
.suzgec button:hover{ border-color:#1F2B3D; }
.suzgec button[aria-pressed="true"]{ background:#1F2B3D; border-color:#1F2B3D; color:#FFFFFF; }
html:not(.js) .suzgec, html:not(.js) .suzgec__durum, html:not(.js) #tumProjeler, html:not(.js) #tumReferanslar{ display:none; }
.suzgec__durum{ margin:0 0 28px; font-family:'Fragment Mono', ui-monospace, monospace; font-size:12px; letter-spacing:.04em; color:#4A5262; }
/* Proje ızgarası: telefonda 1, tablette 2 sütun (kapsayıcı hizasında); ≥1024px'te 3 sütun ve EKRAN
   GENİŞLİĞİNDE (kullanıcı: "büyük ekranda projeler küçük duruyor … tam ekrana sığdıralım"). Görseller
   srcset ile 720/1000px — büyük ekranda keskin kalır. */
.proje-izgara{ display:grid; grid-template-columns:minmax(0, 1fr); gap:40px 24px; max-width:1200px; margin-inline:auto; padding-inline:24px; }
@media (min-width:768px){ .proje-izgara{ grid-template-columns:repeat(2, minmax(0, 1fr)); gap:40px 32px; } }
@media (min-width:1024px){ .proje-izgara{ grid-template-columns:repeat(3, minmax(0, 1fr)); gap:40px 24px; } }
/* ≥1280px: kapsayıcıdan çıkar, ekran genişliğine yayılır. Kenar payı en az 84px (16 + 52 + 16): sol alttaki
   sabit WhatsApp/telefon kümesi kaydırırken proje başlıklarının üstüne binmez; sağda simetrik. */
@media (min-width:1280px){ .proje-izgara{ max-width:none; padding-inline:max(84px, 4vw); gap:clamp(36px, 2.8vw, 48px) clamp(20px, 1.6vw, 28px); } }
.proje{ display:flex; flex-direction:column; }
.proje__gorsel{ aspect-ratio:4 / 3; border-radius:8px; overflow:hidden; background:#F7F5F0; }
.proje__tip{ margin:16px 0 4px; font-size:12px; font-weight:600; letter-spacing:.05em; text-transform:uppercase; color:#7A5C22; }
.proje h3{ margin:0; font-size:20px; font-weight:600; color:#1F2B3D; }
.proje-bos{ position:relative; overflow:hidden; display:grid; gap:14px; justify-items:start; padding:clamp(28px, 4vw, 48px); border:1px solid #DDDFE2; border-radius:8px; background:#FFFFFF; }
.proje-bos > *{ position:relative; max-width:560px; margin:0; }
.proje-bos__tarama{ position:absolute; right:-28px; top:-18px; width:clamp(120px, 18vw, 200px); aspect-ratio:3 / 4; max-width:none; --tarama-renk:rgb(191 149 63 / .4); --tarama-kalin:2px; --tarama-adim:10px; }
.proje-bos__baslik{ font-size:20px; font-weight:600; color:#1F2B3D; }

/* =========================================================================
   9 · ATÖLYE (#kurumsal) — görselin arkasında makro tarama kâsesi
   ========================================================================= */
.atolye__gorsel{ position:relative; }
.atolye__tarama{ position:absolute; z-index:0; left:-14px; bottom:-14px; width:min(46%, 250px); aspect-ratio:3 / 4; --tarama-renk:rgb(191 149 63 / .6); --tarama-kalin:2px; --tarama-adim:9px; }
@media (min-width:1024px){ .atolye__tarama{ left:-32px; bottom:-32px; } }
.atolye__kutu{ position:relative; z-index:1; }
.atolye__liste{ list-style:none; margin:0 0 32px; padding:0; display:grid; gap:16px; }
.atolye__liste li{ display:flex; align-items:center; gap:12px; font-size:16px; font-weight:500; color:#1F2B3D; }
.atolye__liste .ikon{ color:#BF953F; stroke-width:2.5; }

/* =========================================================================
   10 · ÇALIŞMA SÜRECİ (#surec) — sayfanın tek koyu bölümü; tarama rayı + kâse düğümler
   ========================================================================= */
.surec{ background:#1F2B3D; color:#B8C0CC; }
.surec .baslik-h2{ color:#FFFFFF; }
.surec__liste{ position:relative; list-style:none; margin:0; padding:0 0 0 48px; display:grid; gap:32px; --tarama-renk:rgb(191 149 63 / .75); --tarama-kalin:2px; --tarama-adim:7px; }
.surec__liste::before{ content:""; position:absolute; left:9px; top:6px; bottom:6px; width:6px; transform-origin:top center; }
.surec__adim{ position:relative; }
.surec__dugum{ position:absolute; left:-44px; top:6px; width:16px; height:20px; border-radius:0 10px 10px 0; background:#BF953F; box-shadow:0 0 0 4px #1F2B3D; }
.surec__no{ display:block; margin-bottom:10px; font-size:32px; font-weight:600; line-height:1.1; color:#BF953F; font-variant-numeric:tabular-nums; }
.surec__adim h3{ margin:0 0 8px; font-size:18px; font-weight:600; color:#FFFFFF; }
.surec__adim p{ margin:0; font-size:15px; line-height:1.55; color:#B8C0CC; }
@media (min-width:1024px){
  .surec__liste{ grid-template-columns:repeat(6, minmax(0, 1fr)); gap:24px; padding:44px 0 0; }
  .surec__liste::before{ left:0; right:0; top:9px; bottom:auto; width:auto; height:6px; transform-origin:left center; }
  .surec__dugum{ left:4px; top:-42px; }
}
.js .surec__liste::before{ transform:scaleY(0); transition:transform 1.4s var(--egri) .15s; }
@media (min-width:1024px){ .js .surec__liste::before{ transform:scaleX(0); } }
.js .surec__liste.gorunur::before{ transform:none; }

/* =========================================================================
   11 · REFERANSLAR — tipografik karolar; "Tüm referanslar" 28 markanın tamamını açar
   ========================================================================= */
.ref-izgara{ list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:16px; }
@media (min-width:640px){ .ref-izgara{ grid-template-columns:repeat(3, minmax(0, 1fr)); } }
@media (min-width:1024px){ .ref-izgara{ grid-template-columns:repeat(6, minmax(0, 1fr)); } }
.ref{ height:96px; display:flex; align-items:center; justify-content:center; padding:14px; text-align:center; border:1px solid #DDDFE2; border-radius:6px; background:#FFFFFF; color:#75777d; transition:border-color .2s ease, box-shadow .3s var(--egri); }
.ref img{ display:block; max-width:100%; height:auto; transition:filter .35s ease, opacity .35s ease; }
.ref:hover{ border-color:#BF953F; box-shadow:0 14px 30px -24px rgb(31 43 61 / .45); }
/* Fare olan cihazda logolar gri tonda durur, üzerine gelince kendi rengine döner; dokunmatikte hep renkli */
@media (hover:hover) and (pointer:fine){
  .ref img{ filter:grayscale(1); opacity:.78; }
  .ref:hover img{ filter:none; opacity:1; }
}
.ref--cta{ grid-column:span 2; padding:0; border-color:#1F2B3D; background:#1F2B3D; }
.ref--cta a{ width:100%; height:100%; display:flex; align-items:center; justify-content:center; gap:10px; padding:16px; border-radius:6px; color:#E5D5B2; font-size:15px; font-weight:600; text-decoration:none; }
.ref--cta a:hover{ color:#FFFFFF; }

/* =========================================================================
   12 · TEKLİF (#teklif) — gerçek form; sahte başarı mesajı YOK
   ========================================================================= */
.teklif{ position:relative; overflow:hidden; }
.teklif__tarama{ position:absolute; z-index:0; right:0; top:64px; width:min(46vw, 560px); height:min(78%, 640px); --tarama-renk:rgb(191 149 63 / .3); --tarama-kalin:1.5px; --tarama-adim:9px; }
.iletisim-satir{ display:grid; gap:2px; margin-top:24px; justify-items:start; }
.iletisim-satir a{ display:inline-flex; align-items:center; gap:12px; min-height:44px; font-size:16px; font-weight:600; color:#1F2B3D; text-decoration:none; overflow-wrap:anywhere; }
.iletisim-satir a:hover{ color:#8A6A2B; }
.iletisim-satir .ikon{ color:#8A6A2B; }
.sss{ margin-top:40px; border-top:1px solid #D2D5DA; }
.sss__baslik{ margin:24px 0 6px; font-size:18px; font-weight:600; color:#1F2B3D; }
.sss details{ border-bottom:1px solid #D2D5DA; }
.sss summary{ display:flex; align-items:center; justify-content:space-between; gap:16px; min-height:56px; padding:14px 0; list-style:none; cursor:pointer; font-size:16px; font-weight:600; color:#1F2B3D; }
.sss summary::-webkit-details-marker{ display:none; }
.sss summary::after{ content:""; flex:none; width:10px; height:10px; margin-right:4px; border-right:2px solid #8A6A2B; border-bottom:2px solid #8A6A2B; transform:translateY(-3px) rotate(45deg); transition:transform .25s var(--egri); }
.sss details[open] summary::after{ transform:translateY(2px) rotate(-135deg); }
.sss details p{ margin:0 0 18px; font-size:15px; line-height:1.65; color:#4A5262; }

.form{ position:relative; z-index:1; background:#FFFFFF; border:1px solid #DDDFE2; border-radius:8px; padding:clamp(22px, 3.4vw, 40px); box-shadow:0 34px 64px -44px rgb(31 43 61 / .45); }
.form__baslik{ margin:0; font-size:20px; font-weight:600; color:#1F2B3D; }
.form__not{ margin:6px 0 24px; font-size:13px; line-height:1.55; color:#4A5262; }
.form__izgara{ display:grid; grid-template-columns:minmax(0, 1fr); gap:18px 16px; }
@media (min-width:640px){ .form__izgara{ grid-template-columns:repeat(2, minmax(0, 1fr)); } .alan--tam{ grid-column:1 / -1; } }
.alan label{ display:block; margin-bottom:6px; font-size:14px; font-weight:600; color:#1F2B3D; }
.alan input, .alan select, .alan textarea{ display:block; width:100%; min-height:48px; padding:12px 14px; border:1px solid #80868F; border-radius:6px; background-color:#FFFFFF; color:#1F2B3D; font:inherit; font-size:16px; line-height:1.4; transition:border-color .2s ease; }
.alan textarea{ min-height:116px; resize:vertical; }
.alan input::placeholder, .alan textarea::placeholder{ color:#80868F; opacity:1; }
.alan select{ -webkit-appearance:none; appearance:none; padding-right:44px; cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238A6A2B' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 14px center; background-size:16px; }
.alan input:focus-visible, .alan select:focus-visible, .alan textarea:focus-visible{ outline:2px solid #8A6A2B; outline-offset:1px; border-color:#8A6A2B; }
.alan [aria-invalid="true"]{ border-color:#B3261E; }
.alan__hata{ margin:6px 0 0; font-size:13px; line-height:1.45; color:#B3261E; }
.alan__hata:empty{ display:none; }
.alan--onay{ display:grid; grid-template-columns:auto 1fr; gap:4px 12px; align-items:start; margin-top:20px; }
.alan--onay input{ width:22px; height:22px; min-height:0; margin:2px 0 0; accent-color:#BF953F; cursor:pointer; }
.alan--onay label{ margin:0; font-size:14px; font-weight:400; line-height:1.55; color:#4A5262; }
.alan--onay label .metin-bag{ min-height:0; font-size:14px; text-decoration-color:currentColor; }
.alan--onay .alan__hata{ grid-column:2; }
.bal-kupu{ position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }
.form__alt{ display:flex; flex-wrap:wrap; align-items:center; gap:12px 20px; margin-top:24px; }
.form__durum{ margin:0; flex:1 1 240px; font-size:14px; line-height:1.55; color:#1F2B3D; }
.form__gonder{ display:grid; gap:12px; margin-top:18px; padding:16px; border:1px dashed #BF953F; border-radius:6px; background:#F7F5F0; }
.form__gonder p{ margin:0; font-size:14px; color:#4A5262; }
.form__gonder div{ display:flex; flex-wrap:wrap; gap:10px; }
.btn-wa{ background:#1EA952; border-color:#1EA952; color:#FFFFFF; }
.btn-wa:hover{ opacity:.92; }

/* =========================================================================
   13 · FOOTER (#iletisim) — dört sütun korundu; monogram filigranı + fuar satırı + yasal satır
   ========================================================================= */
.ayak{ position:relative; overflow:hidden; background:#1F2B3D; color:#B8C0CC; padding-top:clamp(56px, 7vw, 72px); }
.ayak__monogram{ display:none; position:absolute; right:-70px; top:56px; width:220px; height:auto; overflow:visible; color:rgb(191 149 63 / .16); pointer-events:none; }
@media (min-width:1280px){ .ayak__monogram{ display:block; right:calc((100% - 1200px) / 2 - 196px); } }
.ayak__izgara{ position:relative; display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:40px 20px; }
.ayak__izgara > :first-child, .ayak__izgara > :last-child{ grid-column:1 / -1; }
@media (min-width:640px){ .ayak__izgara{ gap:48px 40px; } .ayak__izgara > :first-child, .ayak__izgara > :last-child{ grid-column:auto; } }
@media (min-width:1024px){ .ayak__izgara{ grid-template-columns:minmax(0, 1.35fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.25fr); gap:40px; } }
.ayak__logo{ display:inline-flex; min-height:44px; }
.ayak__logo .marka__logo{ height:50px; color:#CDA97D; fill:#C7C6C6; stroke:#FFFFFF; }
.ayak__tanim{ margin:18px 0 0; max-width:34ch; font-size:14px; line-height:1.7; color:#B8C0CC; }
.ayak__soz{ margin:18px 0 0; padding-left:14px; border-left:2px solid #BF953F; font-size:14px; font-style:italic; line-height:1.6; color:#E5D5B2; }
.ayak__sosyal{ list-style:none; margin:22px 0 0; padding:0; display:flex; gap:10px; }
.ayak__sosyal a{ width:44px; height:44px; display:grid; place-items:center; border-radius:50%; background:rgb(255 255 255 / .1); color:#FFFFFF; transition:background-color .2s ease; }
.ayak__sosyal a:hover{ background:rgb(255 255 255 / .2); }
.ayak__sosyal .ikon{ width:16px; height:16px; }
.ayak__baslik{ margin:0 0 16px; font-size:13px; font-weight:600; letter-spacing:.05em; text-transform:uppercase; color:#BF953F; }
.ayak__liste{ list-style:none; margin:0; padding:0; display:grid; gap:2px; }
.ayak__liste a{ display:inline-flex; align-items:center; min-height:32px; padding-block:4px; font-size:14px; color:#B8C0CC; text-decoration:none; transition:color .2s ease; }
.ayak__liste a:hover{ color:#FFFFFF; }
.ayak__adres{ font-style:normal; display:grid; justify-items:start; gap:2px; }
.ayak__adres p{ margin:0; font-size:14px; line-height:1.65; color:#B8C0CC; }
.ayak__adres a{ display:inline-flex; align-items:center; gap:10px; min-height:36px; font-size:14px; color:#B8C0CC; text-decoration:none; overflow-wrap:anywhere; transition:color .2s ease; }
.ayak__adres a:hover{ color:#FFFFFF; }
.ayak__adres .ikon{ width:18px; height:18px; color:#BF953F; }
.ayak__harita{ margin:2px 0 8px; }
.ayak__adres .ayak__harita{ min-height:36px; color:#E5D5B2; font-weight:600; }
@media (max-width:1023px){ .ayak__liste a, .ayak__adres a{ min-height:44px; } }
.ayak__fuarlar{ position:relative; margin-top:48px; padding-block:20px; border-top:1px solid #2E3B50; display:flex; flex-wrap:wrap; align-items:center; gap:10px 20px; }
.ayak__fuarlar-etiket{ margin:0; font-family:'Fragment Mono', ui-monospace, monospace; font-size:11px; letter-spacing:.14em; color:#BF953F; }
.ayak__fuarlar ul{ list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:6px 0; }
.ayak__fuarlar li{ font-size:14px; font-weight:600; color:#FFFFFF; }
.ayak__fuarlar li:not(:last-child)::after{ content:"/"; margin:0 12px; font-weight:400; color:#BF953F; }
.ayak__alt{ position:relative; padding-block:20px; border-top:1px solid #2E3B50; display:flex; flex-direction:column; gap:8px; font-size:12px; color:#B8C0CC; }
@media (min-width:768px){ .ayak__alt{ flex-direction:row; align-items:center; justify-content:space-between; } }
.ayak__alt p{ margin:0; }
.ayak__yasal{ display:flex; flex-wrap:wrap; align-items:center; gap:0 22px; }
.ayak__yasal button{ min-height:44px; padding:0; border:0; background:none; font:inherit; font-size:12px; color:#B8C0CC; cursor:pointer; transition:color .2s ease; }
.ayak__yasal button:hover{ color:#FFFFFF; }
.ayak__yukari{ display:inline-flex; align-items:center; gap:8px; }
.ayak__yukari .ikon{ width:16px; height:16px; color:#BF953F; }


/* =========================================================================
   14 · YÜZEN DÜĞMELER (WhatsApp + telefon) — hero, teklif ve footer görünürken gizli
   ========================================================================= */
.yuzen{ position:fixed; z-index:90; left:calc(16px + env(safe-area-inset-left, 0px)); bottom:calc(16px + env(safe-area-inset-bottom, 0px)); display:flex; flex-direction:column; gap:10px; transition:opacity .3s ease, visibility 0s; }   /* altlı üstlü (kullanıcı isteği) */
.yuzen a{ width:52px; height:52px; display:grid; place-items:center; border-radius:50%; color:#FFFFFF; box-shadow:0 12px 28px -10px rgb(31 43 61 / .55); }
.yuzen .ikon{ width:24px; height:24px; }
.yuzen__wa{ background:#1EA952; }
.yuzen__tel{ background:#1F2B3D; box-shadow:0 0 0 1px rgb(255 255 255 / .3), 0 12px 28px -10px rgb(31 43 61 / .55); }   /* halka: koyu bölüm üstünde kaybolmasın */
/* Sağ alt: yukarı çık (kullanıcı isteği: iletişim kümesi solda, yukarı çık sağda). Ekranın %80'i
   kadar aşağı inilince belirir; footer görünürken gizlenir (orada "Başa dön" var). */
.yukari-cik{ position:fixed; z-index:90; right:calc(16px + env(safe-area-inset-right, 0px)); bottom:calc(16px + env(safe-area-inset-bottom, 0px)); width:52px; height:52px; display:grid; place-items:center; padding:0; border:1px solid #DDDFE2; border-radius:50%; background:#FFFFFF; color:#1F2B3D; cursor:pointer; box-shadow:0 12px 28px -12px rgb(31 43 61 / .5); transition:opacity .3s ease, transform .3s var(--egri), visibility 0s, background-color .2s ease, color .2s ease, border-color .2s ease; }
.yukari-cik:hover{ background:#1F2B3D; border-color:#1F2B3D; color:#FFFFFF; }
.yukari-cik .ikon{ width:22px; height:22px; }
.yukari-cik[data-gizli="evet"]{ opacity:0; visibility:hidden; pointer-events:none; transform:translateY(12px); transition:opacity .3s ease, transform .3s var(--egri), visibility 0s linear .3s; }
html[data-menu="acik"] .yuzen, html[data-menu="acik"] .yukari-cik{ opacity:0 !important; visibility:hidden !important; pointer-events:none !important; }
/* Telefon + dikey tablet: küme 48px, hero şeridinin içine oturur */
@media (max-width:767px), (max-width:1023px) and (orientation:portrait){
  .yuzen{ left:calc(12px + env(safe-area-inset-left, 0px)); bottom:calc(8px + env(safe-area-inset-bottom, 0px)); gap:8px; }
  .yuzen a{ width:48px; height:48px; }
  .yuzen .ikon{ width:22px; height:22px; }
  .yukari-cik{ right:calc(12px + env(safe-area-inset-right, 0px)); bottom:calc(8px + env(safe-area-inset-bottom, 0px)); width:48px; height:48px; }
  .ayak__alt{ padding-bottom:72px; }   /* sayfa sonunda dikey küme yasal satırın altındaki boşluğa oturur */
}
/* Sağ üst: kenara yapışık sosyal medya ÇEKMECELERİ (kullanıcı isteği). Kapalıyken yalnız ikon karesi
   görünür; fareyle üzerine gelince ya da klavye odağında sola kayarak platform adını ve hesabı açar
   (transform ile — yerleşim oynamaz). Renkler platform rengidir (işlev rengi, ikinci marka rengi değil):
   Instagram degradesi + #C13584, Facebook #166FE5 (beyaz yazıyla ≥4,5:1). */
.cekmece{ position:fixed; z-index:95; top:calc(var(--hdr) + 24px); right:0; display:flex; flex-direction:column; align-items:flex-end; gap:8px; pointer-events:none; }
.cekmece a{ pointer-events:auto; box-sizing:border-box; display:flex; align-items:center; gap:15px; width:222px; height:52px; padding:0 18px 0 0; border-radius:10px 0 0 10px; color:#FFFFFF; text-decoration:none; transform:translateX(calc(100% - 52px)); transition:transform .45s var(--egri); box-shadow:-10px 12px 26px -16px rgb(31 43 61 / .6); }
/* İkon görünen karenin tam ortasında (14 + 24 + 14 = 52px); yazı karenin DIŞINDA, 15px boşlukla başlar
   (kullanıcı: "yazı sola yapışık") ve yalnız çekmece açıkken görünür → kapalıyken kenardan harf sızmaz.
   İkon karesi ile yazı alanı arasında ince ayraç (52px'te; kapalıyken görünen alanın hemen dışında). */
.cekmece .ikon{ width:24px; height:24px; margin-inline:14px; }
.cekmece__ad{ display:flex; flex-direction:column; min-width:0; line-height:1.25; white-space:nowrap; opacity:0; transition:opacity .2s ease; }
.cekmece a:focus-visible .cekmece__ad{ opacity:1; transition-delay:.12s; }
.cekmece__ad strong{ font-size:14px; font-weight:600; }
.cekmece__ad span{ font-family:'Fragment Mono', ui-monospace, monospace; font-size:10.5px; letter-spacing:.02em; }
.cekmece__ig{ background:linear-gradient(rgb(255 255 255 / .3), rgb(255 255 255 / .3)) 52px 50% / 1px 56% no-repeat, linear-gradient(45deg, #F58529 0%, #DD2A7B 52%, #8134AF 100%) 0 0 / 52px 100% no-repeat, #C13584; }
.cekmece__fb{ background:linear-gradient(rgb(255 255 255 / .3), rgb(255 255 255 / .3)) 52px 50% / 1px 56% no-repeat, #166FE5; }
.cekmece a:focus-visible{ transform:translateX(0); outline:2px solid #FFFFFF; outline-offset:-4px; }
@media (hover:hover) and (pointer:fine){ .cekmece a:hover{ transform:translateX(0); } .cekmece a:hover .cekmece__ad{ opacity:1; transition-delay:.12s; } }
html[data-menu="acik"] .cekmece{ visibility:hidden; }
@media (max-width:767px), (max-width:1023px) and (orientation:portrait){
  .cekmece{ top:calc(var(--hdr) + 14px); gap:6px; }
  .cekmece a{ width:206px; height:44px; gap:13px; padding:0 14px 0 0; border-radius:8px 0 0 8px; transform:translateX(calc(100% - 44px)); }
  .cekmece .ikon{ width:22px; height:22px; margin-inline:11px; }
  .cekmece__ig{ background:linear-gradient(rgb(255 255 255 / .3), rgb(255 255 255 / .3)) 44px 50% / 1px 56% no-repeat, linear-gradient(45deg, #F58529 0%, #DD2A7B 52%, #8134AF 100%) 0 0 / 44px 100% no-repeat, #C13584; }
  .cekmece__fb{ background:linear-gradient(rgb(255 255 255 / .3), rgb(255 255 255 / .3)) 44px 50% / 1px 56% no-repeat, #166FE5; }
}
/* Dar masaüstü (<1320px): kap kenarı kümeye yakın → footer'ın alt iki satırı kümeye yer açar */
@media (min-width:1024px), (min-width:768px) and (orientation:landscape){
  .ayak__alt, .ayak__fuarlar{ padding-left:max(0px, calc(60px - max(0px, (100vw - 1200px) / 2))); }
}

/* =========================================================================
   15 · YASAL PENCERE
   ========================================================================= */
.yasal{ width:min(640px, calc(100vw - 32px)); max-height:min(80vh, 720px); padding:0; border:0; border-radius:8px; color:#4A5262; box-shadow:0 40px 80px -30px rgb(0 0 0 / .5); }
.yasal::backdrop{ background:rgb(23 32 46 / .6); }
.yasal__ust{ position:sticky; top:0; display:flex; align-items:center; justify-content:space-between; gap:16px; padding:14px 16px 14px 24px; background:#FFFFFF; border-bottom:1px solid #E7E3DA; }
.yasal__ust h2{ margin:0; font-size:18px; font-weight:600; color:#1F2B3D; }
.yasal__ic{ padding:8px 24px 24px; }
.yasal__ic h3{ margin:20px 0 8px; font-size:16px; font-weight:600; color:#1F2B3D; scroll-margin-top:72px; }
.yasal__ic p{ margin:0 0 10px; font-size:14px; line-height:1.65; }

/* =========================================================================
   15B · İÇ SAYFALAR (22.10.2026) — sayfa başı, kırıntı yolu, içerik blokları, galeri + ışık kutusu.
   Kimlik anasayfayla aynı: Manrope + Fragment Mono, TARAMA motifi, kum/altın + lacivert yazı.
   Sayfa başı hero'nun açık kum tonunda; fotoğraf tam ekran DEĞİL, çerçeveli (kaynaklar 1000px —
   büyütülüp bulanıklaşmasın). Cam header sayfa başının üstüne biner ([data-cam], bölüm 4).
   ========================================================================= */
/* Etkin menü: iç sayfada bulunulan sayfanın bağlantısı */
.nav a[aria-current="page"]::after{ transform:scaleX(1); }
.mobil-menu__nav a[aria-current="page"]{ color:#7A5C22; }

/* Proje kartı: başlıktaki bağlantı kartın tamamını kaplar (tek odak durağı, okunur ad = proje adı) */
.proje{ position:relative; }
.proje__bag{ color:inherit; text-decoration:none; }
.proje__bag::after{ content:""; position:absolute; inset:0; z-index:1; border-radius:8px; }
.proje__bag:hover{ color:#7A5C22; }
.proje__bag:focus-visible{ outline:none; }
.proje__bag:focus-visible::after{ outline:2px solid #8A6A2B; outline-offset:4px; }
.proje__alt{ margin:6px 0 0; font-size:14px; color:#4A5262; }

/* Sayfa başı */
.sayfa-bas{ position:relative; overflow:hidden; margin-top:calc(-1 * var(--hdr)); padding-top:var(--hdr); background:linear-gradient(180deg, #F2EAD9, #EDE3CE); border-bottom:1px solid #E2D6BC; }
.sayfa-bas__filigran{ position:absolute; z-index:0; left:-60px; bottom:-70px; width:clamp(220px, 24vw, 340px); height:auto; color:rgb(122 92 34 / .07); pointer-events:none; }
.sayfa-bas__ic{ position:relative; z-index:1; max-width:1200px; margin-inline:auto; padding:clamp(28px, 5vw, 64px) 24px clamp(48px, 6vw, 80px); display:grid; gap:clamp(32px, 4vw, 56px); align-items:center; }
@media (min-width:1024px){ .sayfa-bas__ic{ grid-template-columns:minmax(0, 1.05fr) minmax(0, .95fr); } }
.kirinti ol{ list-style:none; display:flex; flex-wrap:wrap; align-items:center; margin:0 0 12px; padding:0; font-size:13px; }
.kirinti li{ display:flex; align-items:center; color:#4A5262; }
.kirinti li + li::before{ content:"/"; margin:0 10px; color:#9C7A36; }
.kirinti a{ display:inline-flex; align-items:center; min-height:44px; color:#3A4352; text-decoration:underline; text-decoration-color:rgb(31 43 61 / .3); text-underline-offset:3px; }
.kirinti a:hover{ color:#7A5C22; text-decoration-color:currentColor; }
.kirinti [aria-current="page"]{ font-weight:600; color:#1F2B3D; }
.sayfa-bas .eyebrow-text{ margin-bottom:16px; color:#634A1C; }
.sayfa-bas__baslik, .sayfa-bas h1{ margin:0; font-size:clamp(32px, 2.4vw + 18px, 52px); line-height:1.1; font-weight:600; letter-spacing:-.02em; color:#1F2B3D; }
.sayfa-bas__metin{ margin:20px 0 0; max-width:580px; font-size:clamp(16px, .35vw + 14.6px, 18px); line-height:1.65; color:#3A4352; }
.sayfa-bas__eylem{ display:flex; flex-wrap:wrap; gap:12px; margin-top:28px; }
.sayfa-bas__kunye{ list-style:none; margin:28px 0 0; padding:0; display:flex; flex-wrap:wrap; align-items:center; gap:8px 0; }
.sayfa-bas__kunye li{ font-size:14px; font-weight:600; color:#1F2B3D; }
.sayfa-bas__kunye li + li{ margin-left:18px; padding-left:18px; border-left:1px solid #BF953F; }
.sayfa-bas__gorsel{ position:relative; }
.sayfa-bas__tarama{ position:absolute; z-index:0; right:-18px; bottom:-18px; width:min(44%, 230px); aspect-ratio:3 / 4; --tarama-renk:rgb(191 149 63 / .55); --tarama-kalin:2px; --tarama-adim:9px; }
.sayfa-bas__cerceve{ position:relative; z-index:1; aspect-ratio:4 / 3; border-radius:8px; overflow:hidden; background:#E7E3DA; box-shadow:0 30px 60px -36px rgb(31 43 61 / .55); }
.sayfa-bas__cerceve img{ display:block; width:100%; height:100%; object-fit:cover; }
.sayfa-bas__etiket{ position:absolute; z-index:2; right:14px; bottom:14px;   /* sağda: sol alttaki sabit WhatsApp/telefon kümesine binmesin */ margin:0; padding:6px 10px; border-radius:4px; background:rgb(255 255 255 / .95); font-size:12px; font-weight:500; color:#1F2B3D; }
@media (max-width:1023px){ .sayfa-bas__gorsel{ max-width:640px; } .sayfa-bas__cerceve{ aspect-ratio:16 / 10; } }
@media (max-width:767px){ .sayfa-bas__ic{ padding-inline:20px; } .sayfa-bas__tarama{ right:-8px; bottom:-10px; } }

/* Bölüm başı (iç sayfalarda ortak) */
.bolum-ust{ max-width:760px; margin-bottom:clamp(32px, 4vw, 48px); }
.bolum-ust .baslik-h2{ margin-top:12px; }
.bolum-ust .body-copy{ margin-top:16px; }

/* Metin + görsel blokları (hizmetler, kurumsal) */
.blok{ display:grid; gap:clamp(28px, 4vw, 56px); align-items:center; }
@media (min-width:1024px){ .blok{ grid-template-columns:minmax(0, 1fr) minmax(0, 1fr); } .blok--ters .blok__gorsel{ order:2; } }
.blok + .blok{ margin-top:clamp(56px, 7vw, 96px); padding-top:clamp(56px, 7vw, 96px); border-top:1px solid #D2D5DA; }
.blok__gorsel{ position:relative; }
.blok__cerceve{ position:relative; z-index:1; aspect-ratio:4 / 3; border-radius:8px; overflow:hidden; background:#E7E3DA; box-shadow:0 1px 2px rgb(31 43 61 / .06), 0 18px 40px -28px rgb(31 43 61 / .45); }
.blok__cerceve img{ display:block; width:100%; height:100%; object-fit:cover; }
.blok__no{ display:block; margin-bottom:12px; font-family:'Fragment Mono', ui-monospace, monospace; font-size:13px; letter-spacing:.12em; color:#7A5C22; }
.blok h2{ margin:0; }
.blok .body-copy{ margin-top:16px; }
.blok .atolye__liste{ margin:24px 0 28px; }
.blok__eylem{ display:flex; flex-wrap:wrap; align-items:center; gap:12px 24px; }
.blok__projeler{ margin-top:28px; padding-top:20px; border-top:1px dashed #D2D5DA; }
.blok__projeler p{ margin:0 0 10px; font-family:'Fragment Mono', ui-monospace, monospace; font-size:11px; letter-spacing:.14em; color:#634A1C; }
.blok__projeler ul{ list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:8px; }
.blok__projeler a{ display:inline-flex; align-items:center; min-height:40px; padding:0 14px; border:1px solid #D2D5DA; border-radius:9999px; background:#FFFFFF; font-size:14px; font-weight:600; color:#1F2B3D; text-decoration:none; transition:border-color .2s ease, color .2s ease; }
.blok__projeler a:hover{ border-color:#BF953F; color:#7A5C22; }

/* İlke listesi — ikon kartı DEĞİL (numara + başlık + metin, üstte tarama işareti) */
.ilke-liste{ list-style:none; margin:0; padding:0; display:grid; gap:0; border-top:1px solid #D2D5DA; }
@media (min-width:768px){ .ilke-liste{ grid-template-columns:repeat(2, minmax(0, 1fr)); column-gap:clamp(32px, 5vw, 72px); } }
.ilke-liste li{ display:grid; grid-template-columns:auto 1fr; gap:4px 18px; padding:24px 0; border-bottom:1px solid #D2D5DA; }
.ilke-liste .no{ grid-row:span 2; font-family:'Fragment Mono', ui-monospace, monospace; font-size:13px; letter-spacing:.08em; color:#7A5C22; padding-top:3px; }
.ilke-liste h3{ margin:0; font-size:18px; font-weight:600; color:#1F2B3D; }
.ilke-liste p{ margin:0; font-size:15px; line-height:1.6; color:#4A5262; }

/* Alıntı (firmanın sloganı) */
.alinti{ position:relative; margin:0; padding:clamp(28px, 4vw, 44px) 0 0; font-size:clamp(22px, 1.4vw + 14px, 32px); line-height:1.35; font-weight:600; letter-spacing:-.01em; color:#1F2B3D; }
.alinti::before{ content:""; position:absolute; left:0; top:0; width:44px; height:18px; --tarama-renk:#BF953F; --tarama-kalin:2px; --tarama-adim:6px; background-image:repeating-linear-gradient(143deg, var(--tarama-renk) 0 var(--tarama-kalin), transparent 0 var(--tarama-adim)); }
.alinti cite{ display:block; margin-top:14px; font-family:'Fragment Mono', ui-monospace, monospace; font-size:12px; font-style:normal; letter-spacing:.12em; color:#634A1C; }

/* Süreç — açık zemin varyantı (iç sayfa; anasayfadaki koyu bölümle aynı ray ve düğüm) */
.surec--acik{ background:none; color:#3A4352; }
.surec--acik .surec__dugum{ box-shadow:0 0 0 4px #F4F4F5; }
.surec--acik .surec__no{ color:#8A6A2B; }
.surec--acik .surec__adim h3{ color:#1F2B3D; font-size:20px; }
.surec--acik .surec__adim p{ color:#3A4352; font-size:16px; max-width:56ch; }
.surec--acik .surec__adim p + p{ margin-top:8px; }
@media (min-width:1024px){ .surec--acik .surec__liste{ grid-template-columns:none; padding-left:56px; padding-top:0; gap:40px; } .surec--acik .surec__liste::before{ left:9px; right:auto; top:6px; bottom:6px; width:6px; height:auto; } .surec--acik .surec__dugum{ left:-52px; top:6px; } .js .surec--acik .surec__liste::before{ transform:scaleY(0); transform-origin:top center; } .js .surec--acik .surec__liste.gorunur::before{ transform:none; } }

/* Kontrol listesi (teklif için gerekenler) */
.denetim{ display:grid; gap:12px; margin:0; padding:clamp(24px, 3vw, 32px); list-style:none; border:1px solid #D2D5DA; border-top:4px solid #BF953F; border-radius:8px; background:#FFFFFF; }
.denetim li{ display:flex; gap:12px; font-size:16px; line-height:1.5; color:#1F2B3D; }
.denetim .ikon{ flex:none; margin-top:2px; color:#8A6A2B; }
.denetim small{ display:block; font-size:14px; color:#4A5262; }

/* Proje detayı: künye + galeri + gezgin */
.proje-kunye{ display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:16px 24px; margin:28px 0 0; padding:20px 0 0; border-top:1px solid #D9CCAE; }
@media (min-width:640px){ .proje-kunye{ grid-template-columns:repeat(4, minmax(0, 1fr)); } }
.proje-kunye dt{ font-family:'Fragment Mono', ui-monospace, monospace; font-size:11px; letter-spacing:.14em; color:#634A1C; }
.proje-kunye dd{ margin:4px 0 0; font-size:15px; font-weight:600; color:#1F2B3D; }
.galeri{ list-style:none; margin:0; padding:0; columns:1; column-gap:16px; }
@media (min-width:640px){ .galeri{ columns:2; } }
@media (min-width:1024px){ .galeri{ columns:3; column-gap:20px; } }
.galeri li{ break-inside:avoid; margin:0 0 16px; }
@media (min-width:1024px){ .galeri li{ margin-bottom:20px; } }
.galeri__oge{ position:relative; display:block; border-radius:8px; overflow:hidden; background:#E7E3DA; }
.galeri__oge img{ display:block; width:100%; height:auto; transition:transform .6s var(--egri); }
.galeri__oge::after{ content:""; position:absolute; right:12px; bottom:12px; width:40px; height:40px; border-radius:50%; background:rgb(255 255 255 / .92) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231F2B3D' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M15 3h6v6M9 21H3v-6M21 3l-7 7M3 21l7-7'/%3E%3C/svg%3E") center / 18px no-repeat; opacity:0; transform:translateY(6px); transition:opacity .25s ease, transform .25s ease; }
.galeri__oge:hover img{ transform:scale(1.03); }
.galeri__oge:hover::after, .galeri__oge:focus-visible::after{ opacity:1; transform:none; }
@media (hover:none){ .galeri__oge::after{ opacity:1; transform:none; } }
.galeri__oge:focus-visible{ outline:2px solid #8A6A2B; outline-offset:3px; }
.proje-gezgin{ display:grid; gap:12px; margin-top:clamp(40px, 5vw, 64px); }
@media (min-width:768px){ .proje-gezgin{ grid-template-columns:1fr 1fr; } }
.proje-gezgin a{ display:grid; gap:4px; padding:18px 20px; border:1px solid #D2D5DA; border-radius:8px; background:#FFFFFF; text-decoration:none; transition:border-color .2s ease, box-shadow .2s ease; }
.proje-gezgin a:hover{ border-color:#BF953F; box-shadow:0 14px 30px -24px rgb(31 43 61 / .45); }
.proje-gezgin span{ font-family:'Fragment Mono', ui-monospace, monospace; font-size:11px; letter-spacing:.14em; color:#634A1C; }
.proje-gezgin strong{ font-size:17px; font-weight:600; color:#1F2B3D; }
.proje-gezgin .sonraki{ text-align:right; }

/* Işık kutusu (galeri büyütme penceresi) — yerel <dialog>: Esc, odak tuzağı, odak iadesi */
.isik{ width:100vw; height:100dvh; max-width:none; max-height:none; margin:0; padding:0; border:0; background:rgb(14 19 27 / .94); color:#FFFFFF; overflow:hidden; }
.isik::backdrop{ background:transparent; }
.isik[open]{ display:grid; grid-template-rows:auto minmax(0, 1fr) auto; }
.isik__ust{ display:flex; align-items:center; justify-content:space-between; gap:16px; padding:max(12px, env(safe-area-inset-top)) 16px 8px 20px; }
.isik__sayac{ margin:0; font-family:'Fragment Mono', ui-monospace, monospace; font-size:13px; letter-spacing:.08em; color:rgb(255 255 255 / .8); }
.isik__sahne{ position:relative; display:grid; grid-template:minmax(0, 1fr) / minmax(0, 1fr); place-items:center; min-height:0; padding:0 clamp(8px, 6vw, 88px); }
.isik__sahne img{ max-width:100%; max-height:100%; width:auto; height:auto; object-fit:contain; border-radius:4px; box-shadow:0 30px 80px -30px rgb(0 0 0 / .7); }
.isik__aciklama{ margin:0; padding:12px 20px max(16px, env(safe-area-inset-bottom)); text-align:center; font-size:15px; line-height:1.5; color:rgb(255 255 255 / .86); }
.isik button{ display:grid; place-items:center; width:48px; height:48px; border:1px solid rgb(255 255 255 / .35); border-radius:6px; background:rgb(255 255 255 / .06); color:#FFFFFF; cursor:pointer; transition:background-color .2s ease; }
.isik button:hover{ background:rgb(255 255 255 / .18); }
.isik button:focus-visible{ outline:2px solid #E5D5B2; outline-offset:2px; }
.isik__onceki, .isik__sonraki{ position:absolute; top:50%; transform:translateY(-50%); }
.isik__onceki{ left:clamp(8px, 2vw, 24px); } .isik__sonraki{ right:clamp(8px, 2vw, 24px); }
@media (max-width:767px){ .isik__onceki, .isik__sonraki{ top:auto; bottom:8px; transform:none; } .isik__sahne{ padding-bottom:64px; } }

/* İletişim */
.iletisim-kartlar{ display:grid; gap:16px; }
@media (min-width:768px){ .iletisim-kartlar{ grid-template-columns:repeat(2, minmax(0, 1fr)); } }
.iletisim-kart{ display:grid; gap:6px; align-content:start; padding:22px 22px 20px; border:1px solid #D2D5DA; border-radius:8px; background:#FFFFFF; }
.iletisim-kart__etiket{ margin:0; font-family:'Fragment Mono', ui-monospace, monospace; font-size:11px; letter-spacing:.14em; color:#634A1C; }
.iletisim-kart__deger{ margin:0; font-size:17px; font-weight:600; line-height:1.45; color:#1F2B3D; }
.iletisim-kart a{ color:#1F2B3D; text-decoration:none; }
.iletisim-kart a:hover{ color:#7A5C22; }
.iletisim-kart .metin-bag{ justify-self:start; }
.hizli-iletisim{ display:grid; gap:10px; padding:clamp(22px, 3vw, 32px); border-radius:8px; background:#FFFFFF; box-shadow:0 30px 60px -40px rgb(31 43 61 / .5); }
.hizli-iletisim a{ display:flex; align-items:center; gap:14px; min-height:56px; padding:0 4px; border-bottom:1px solid #EDE6D6; font-size:17px; font-weight:600; color:#1F2B3D; text-decoration:none; overflow-wrap:anywhere; }
.hizli-iletisim a:last-child{ border-bottom:0; }
.hizli-iletisim a:hover{ color:#7A5C22; }
.hizli-iletisim .ikon{ flex:none; color:#8A6A2B; }
.hizli-iletisim small{ display:block; font-family:'Fragment Mono', ui-monospace, monospace; font-size:11px; font-weight:400; letter-spacing:.12em; color:#634A1C; }

/* Fuar listesi (referanslar) */
.fuar-liste{ list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:10px; }
.fuar-liste a{ display:inline-flex; align-items:center; gap:10px; min-height:48px; padding:0 18px; border:1px solid #D2D5DA; border-radius:9999px; background:#FFFFFF; font-size:15px; font-weight:600; color:#1F2B3D; text-decoration:none; transition:border-color .2s ease, color .2s ease; }
.fuar-liste a:hover{ border-color:#BF953F; color:#7A5C22; }
.fuar-liste .ikon{ color:#BF953F; }

/* Kapanış çağrısı (iç sayfaların sonu) */
.cta-bant{ position:relative; overflow:hidden; background:linear-gradient(180deg, #F2EAD9, #EDE3CE); border-top:1px solid #E2D6BC; }
.cta-bant__tarama{ position:absolute; z-index:0; right:-40px; top:50%; width:min(36vw, 380px); aspect-ratio:3 / 4; transform:translateY(-50%); --tarama-renk:rgb(191 149 63 / .35); --tarama-kalin:1.5px; --tarama-adim:9px; }
.cta-bant__ic{ position:relative; z-index:1; max-width:1200px; margin-inline:auto; padding:clamp(48px, 6vw, 72px) 24px; display:grid; gap:24px; align-items:center; }
@media (min-width:1024px){ .cta-bant__ic{ grid-template-columns:minmax(0, 1.4fr) auto; } }
.cta-bant h2{ margin:0; }
.cta-bant p{ margin:12px 0 0; max-width:620px; font-size:17px; line-height:1.6; color:#3A4352; }
.cta-bant__eylem{ display:flex; flex-wrap:wrap; gap:12px; }

/* Hizmet dizini — ikonsuz fihrist (numara + ad + tek satır + ok); kart ızgarası değil */
.dizin{ list-style:none; margin:0; padding:0; border-top:1px solid #D2D5DA; }
.dizin a{ display:grid; grid-template-columns:44px minmax(0, 1fr) auto; align-items:center; gap:2px 16px; padding:20px 8px 20px 4px; border-bottom:1px solid #D2D5DA; text-decoration:none; transition:background-color .2s ease; }
.dizin a:hover{ background:rgb(255 255 255 / .65); }
.dizin .no{ grid-row:span 2; font-family:'Fragment Mono', ui-monospace, monospace; font-size:13px; letter-spacing:.08em; color:#7A5C22; }
.dizin strong{ font-size:19px; font-weight:600; color:#1F2B3D; }
.dizin .aciklama{ grid-column:2; font-size:15px; line-height:1.5; color:#4A5262; }
.dizin .ikon{ grid-column:3; grid-row:1 / span 2; color:#8A6A2B; transition:transform .25s var(--egri); }
.dizin a:hover .ikon{ transform:translateX(4px); }

/* Stand tipi seçimi (hizmetler) */
.secim{ list-style:none; margin:0; padding:0; display:grid; gap:16px; }
@media (min-width:768px){ .secim{ grid-template-columns:repeat(3, minmax(0, 1fr)); } }
.secim > li{ padding:24px 24px 22px; border:1px solid #D2D5DA; border-top:4px solid #BF953F; border-radius:8px; background:#FFFFFF; }
.secim h3{ margin:0 0 12px; font-size:19px; font-weight:600; color:#1F2B3D; }
.secim ul{ list-style:none; margin:0; padding:0; display:grid; gap:8px; }
.secim ul li{ display:flex; gap:10px; font-size:15px; line-height:1.5; color:#3A4352; }
.secim ul .ikon{ flex:none; margin-top:3px; color:#8A6A2B; }

/* Kısa süreç şeridi (hizmetler → süreç sayfası) */
.adim-serit{ list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:1px; border:1px solid #D2D5DA; border-radius:8px; overflow:hidden; background:#D2D5DA; }
@media (min-width:768px){ .adim-serit{ grid-template-columns:repeat(3, minmax(0, 1fr)); } }
@media (min-width:1024px){ .adim-serit{ grid-template-columns:repeat(6, minmax(0, 1fr)); } }
.adim-serit li{ display:grid; gap:6px; padding:18px 18px 16px; background:#FFFFFF; }
.adim-serit .no{ font-family:'Fragment Mono', ui-monospace, monospace; font-size:12px; letter-spacing:.1em; color:#7A5C22; }
.adim-serit strong{ font-size:16px; font-weight:600; color:#1F2B3D; }

/* Footer fuar satırı bağlantıları (iç sayfalarla birlikte) */
.ayak__fuarlar a{ display:inline-flex; align-items:center; min-height:44px; color:#FFFFFF; text-decoration:none; }
.ayak__fuarlar a:hover{ color:#E5D5B2; text-decoration:underline; text-underline-offset:4px; }

/* ---- ZENGİNLEŞTİRME (22.10.2026): rakam bandı, zaman çizelgesi, 3D → fuar eşleşmeleri, fotoğraf şeridi,
   logodan standa kartları, benzer projeler. Hepsi gerçek veriden (firmanın sitesi, fotoğraf kayıtları). ---- */
.rakam-bant{ list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); border-top:1px solid #D2D5DA; border-bottom:1px solid #D2D5DA; }
@media (min-width:1024px){ .rakam-bant{ grid-template-columns:repeat(4, minmax(0, 1fr)); } }
.rakam-bant li{ display:grid; gap:6px; align-content:start; padding:28px 20px 26px 0; }
.rakam-bant li + li{ padding-left:20px; border-left:1px solid #D2D5DA; }
@media (max-width:1023px){ .rakam-bant li:nth-child(3){ padding-left:0; border-left:0; } .rakam-bant li:nth-child(n + 3){ border-top:1px solid #D2D5DA; } }
.rakam-bant strong{ font-size:clamp(36px, 2.6vw + 18px, 56px); line-height:1.1; font-weight:600; letter-spacing:-.02em; color:#1F2B3D; font-variant-numeric:tabular-nums; }
.rakam-bant strong sup{ font-size:.5em; vertical-align:.7em; color:#BF953F; }
.rakam-bant li > span{ font-size:15px; font-weight:600; color:#1F2B3D; }   /* yalnız etiket — sayının span'i değil */
.rakam-bant small{ font-size:13px; line-height:1.45; color:#4A5262; }

.zaman{ position:relative; list-style:none; margin:0; padding:0; display:grid; gap:28px; --tarama-renk:rgb(191 149 63 / .7); --tarama-kalin:2px; --tarama-adim:7px; }
.zaman::before{ content:""; position:absolute; left:58px; top:8px; bottom:8px; width:6px; background-image:repeating-linear-gradient(143deg, var(--tarama-renk) 0 var(--tarama-kalin), transparent 0 var(--tarama-adim)); }
.zaman li{ position:relative; display:grid; grid-template-columns:52px minmax(0, 1fr); gap:0 36px; align-items:start; }
.zaman__yil{ font-family:'Fragment Mono', ui-monospace, monospace; font-size:15px; letter-spacing:.04em; color:#7A5C22; padding-top:2px; }
.zaman__yil::after{ content:""; position:absolute; left:53px; top:4px; width:16px; height:20px; border-radius:0 10px 10px 0; background:#BF953F; box-shadow:0 0 0 4px #EBECEE; }
.zaman__kart{ display:grid; gap:14px; align-items:center; padding-bottom:4px; }
@media (min-width:768px){ .zaman__kart{ grid-template-columns:200px minmax(0, 1fr); gap:24px; } .zaman__kart--yalin{ grid-template-columns:minmax(0, 1fr); } }
.zaman__gorsel{ display:block; aspect-ratio:4 / 3; border-radius:6px; overflow:hidden; background:#E7E3DA; }
.zaman__gorsel img{ display:block; width:100%; height:100%; object-fit:cover; transition:transform .6s var(--egri); }
.zaman__gorsel:hover img{ transform:scale(1.04); }
.zaman h3{ margin:0; font-size:19px; font-weight:600; color:#1F2B3D; }
.zaman p{ margin:6px 0 0; font-size:15px; line-height:1.6; color:#4A5262; }
.zaman .metin-bag{ margin-top:4px; }
.zaman__not{ margin:28px 0 0; font-size:13px; color:#4A5262; }

.ikili-liste{ list-style:none; margin:0; padding:0; display:grid; gap:clamp(28px, 4vw, 44px); }
.ikili{ display:grid; gap:12px; align-items:center; }
@media (min-width:768px){ .ikili{ grid-template-columns:minmax(0, 1fr) 44px minmax(0, 1fr); } }
.ikili figure{ position:relative; margin:0; }
.ikili__cerceve{ aspect-ratio:4 / 3; border-radius:8px; overflow:hidden; background:#1F2B3D; box-shadow:0 1px 2px rgb(31 43 61 / .06), 0 18px 40px -30px rgb(31 43 61 / .5); }
.ikili__cerceve img{ display:block; width:100%; height:100%; object-fit:cover; }
.ikili figcaption{ position:absolute; left:12px; top:12px; display:inline-flex; align-items:center; gap:8px; padding:6px 10px; border-radius:4px; background:rgb(255 255 255 / .95); font-family:'Fragment Mono', ui-monospace, monospace; font-size:11px; letter-spacing:.12em; color:#1F2B3D; }
.ikili figcaption::before{ content:""; width:8px; height:8px; border-radius:50%; background:#BF953F; }
.ikili figure + span{ display:grid; place-items:center; justify-self:center; width:44px; height:44px; border-radius:50%; background:#FFFFFF; border:1px solid #D2D5DA; color:#8A6A2B; }
@media (max-width:767px){ .ikili figure + span{ transform:rotate(90deg); } }
.ikili__baslik{ margin:0 0 12px; font-size:18px; font-weight:600; color:#1F2B3D; }
.ikili__baslik a{ color:inherit; }

.serit-galeri{ list-style:none; margin:24px 0 0; padding:0; display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:8px; }
.serit-galeri a{ display:block; aspect-ratio:1; border-radius:6px; overflow:hidden; background:#E7E3DA; }
.serit-galeri img{ display:block; width:100%; height:100%; object-fit:cover; transition:transform .5s var(--egri), filter .3s ease; }
.serit-galeri a:hover img{ transform:scale(1.06); }
.serit-galeri a:focus-visible{ outline:2px solid #8A6A2B; outline-offset:2px; }

.marka-stand{ list-style:none; margin:0; padding:0; display:grid; gap:20px; }
@media (min-width:640px){ .marka-stand{ grid-template-columns:repeat(2, minmax(0, 1fr)); } }
@media (min-width:1024px){ .marka-stand{ grid-template-columns:repeat(4, minmax(0, 1fr)); } }
.marka-stand li{ position:relative; display:flex; flex-direction:column; border:1px solid #D2D5DA; border-radius:8px; overflow:hidden; background:#FFFFFF; transition:box-shadow .3s var(--egri), border-color .2s ease; }
.marka-stand li:hover{ border-color:#BF953F; box-shadow:0 22px 44px -30px rgb(31 43 61 / .45); }
.marka-stand__gorsel{ aspect-ratio:4 / 3; overflow:hidden; background:#E7E3DA; }
.marka-stand__gorsel img{ display:block; width:100%; height:100%; object-fit:cover; transition:transform .6s var(--egri); }
.marka-stand li:hover .marka-stand__gorsel img{ transform:scale(1.04); }
.marka-stand__logo{ display:flex; align-items:center; justify-content:center; height:64px; margin:-32px auto 0; position:relative; z-index:1; width:calc(100% - 48px); border:1px solid #E7E3DA; border-radius:6px; background:#FFFFFF; box-shadow:0 10px 24px -18px rgb(31 43 61 / .5); }
.marka-stand__logo img{ display:block; max-height:40px; width:auto; }
.marka-stand__metin{ display:grid; gap:2px; padding:14px 18px 18px; text-align:center; }
.marka-stand__metin a{ font-size:16px; font-weight:600; color:#1F2B3D; text-decoration:none; }
.marka-stand__metin a::after{ content:""; position:absolute; inset:0; z-index:2; }
.marka-stand__metin a:focus-visible{ outline:none; }
.marka-stand li:focus-within{ outline:2px solid #8A6A2B; outline-offset:3px; }
.marka-stand__metin small{ font-size:13px; color:#4A5262; }

.kapsam{ list-style:none; margin:16px 0 0; padding:0; display:flex; flex-wrap:wrap; gap:8px; }
.kapsam li{ display:inline-flex; align-items:center; gap:8px; min-height:34px; padding:0 12px; border-radius:9999px; background:rgb(255 255 255 / .7); border:1px solid #D9CCAE; font-size:13px; font-weight:600; color:#1F2B3D; }
.kapsam .ikon{ width:15px; height:15px; color:#8A6A2B; }

/* Hizmet detay sayfası: "projelerimizden detaylar" kartları (logodan standa kartının logosuz, sola yaslı çeşidi) */
.marka-stand--detay .marka-stand__metin{ gap:6px; padding:16px 20px 20px; text-align:left; }
.marka-stand--detay .marka-stand__metin small{ font-family:'Fragment Mono', ui-monospace, monospace; font-size:11px; letter-spacing:.12em; color:#634A1C; }
.marka-stand--detay .marka-stand__metin a{ font-size:17px; }
.marka-stand--detay .marka-stand__metin p{ margin:0; font-size:14px; line-height:1.55; color:#4A5262; }
.blok h2 a{ color:inherit; text-decoration:none; }
.blok h2 a:hover{ color:#7A5C22; }

/* Referans sayfası: tüm logolar görünür, 2–6 sütun */
.ref-izgara--tam{ grid-template-columns:repeat(2, minmax(0, 1fr)); }
@media (min-width:640px){ .ref-izgara--tam{ grid-template-columns:repeat(3, minmax(0, 1fr)); } }
@media (min-width:1024px){ .ref-izgara--tam{ grid-template-columns:repeat(5, minmax(0, 1fr)); } }

/* =========================================================================
   16 · HAREKET AZALTMA, ZORLANMIŞ RENKLER, BASKI
   ========================================================================= */
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *, *::before, *::after{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; transition-delay:0s !important; }
  .js .reveal{ opacity:1; transform:none; }
  .js .surec__liste::before{ transform:none; }
  .hero__ilerleme, .baslik__ilerleme{ display:none; }
}
@media (forced-colors: active){
  .tarama, .eyebrow-text::before, .surec__liste::before{ background:none; border:1px solid CanvasText; }
  .ray__cubuk span{ background:CanvasText; } .kaydirac__ok{ border:1px solid ButtonText; }
  .cekmece a{ border:1px solid ButtonText; }
  .ref img{ forced-color-adjust:none; }
  .hero__perde{ display:none; }
  .hero__nokta::before, .hero__nokta::after, .hero__ilerleme, .baslik__ilerleme{ background:CanvasText; }
  .btn-primary, .btn-secondary, .btn-acik, .suzgec button, .hero__ok{ border:1px solid ButtonText; }
  [data-imza-bari] img{ forced-color-adjust:none; }
  .marka__logo, .js .baslik.is-cam .marka__logo, .ayak__logo .marka__logo{ color:CanvasText; fill:CanvasText; stroke:CanvasText; }   /* tek renk, her temada okunur */
}
@media print{
  @page{ margin:14mm; }
  .baslik, .mobil-menu, .hero__serit, .hero__perde, .hero__gorsel, .hero__etiket, .yuzen, [data-imza-bari],
  .icerige-gec, .suzgec, .suzgec__durum, #tumProjeler, #tumReferanslar, .tarama, .ayak__monogram, .form, .ayak__yukari, .yukari-cik, .cekmece{ display:none !important; }
  body{ color:#1F2B3D; }
  .hero, .surec, .ayak{ background:#FFFFFF !important; color:#1F2B3D !important; }
  .hero, .sayfa-bas{ margin-top:0 !important; }
  .sayfa-bas{ padding-top:0 !important; background:#FFFFFF !important; }
  .isik, .galeri__oge::after, .sayfa-bas__tarama, .cta-bant__tarama, .proje-gezgin{ display:none !important; }
  .hero__sahne{ display:block; min-height:0 !important; }
  .hero__slayt{ display:block; padding-top:0 !important; opacity:1 !important; visibility:visible !important; }
  .hero__slayt::before{ display:none !important; }
  .hero__metin{ padding:12px 0 !important; }
  .hero .main-h1, .hero p, .hero li, .surec .baslik-h2, .surec h3, .surec p, .ayak p, .ayak a, .ayak li{ color:#1F2B3D !important; }
  .js .reveal{ opacity:1 !important; transform:none !important; }
  [data-ek][hidden]{ display:flex !important; }
  .kart, .proje, .surec__adim, .ref, .sss details{ break-inside:avoid; }
  .ray{ overflow:visible; } .ray__liste{ width:auto; flex-wrap:wrap; padding:0; } .ray__oge{ width:46%; } .kaydirac, .ray__cubuk, .kart-cta{ display:none !important; }
  a[href^="http"]::after{ content:" (" attr(href) ")"; font-size:10px; font-weight:400; }
  a[href^="tel:"]::after{ content:" " attr(href); font-size:10px; font-weight:400; }
}

/* =========================================================================
   17 · SATIR İÇİ STİLLERİN SINIF KARŞILIKLARI (HTML'de style="" kalmadı)
   ========================================================================= */
.sprite{ position:absolute; width:0; height:0; overflow:hidden; }
/* .ikon.ikon--N (0,2,0): bağlamsal boyut kurallarını (ör. .ayak__adres .ikon) eski satır içi stil gibi ezer */
.ikon.ikon--15{ width:15px; height:15px; }
.ikon.ikon--16{ width:16px; height:16px; }
.ikon.ikon--18{ width:18px; height:18px; }
/* reveal kademesi (eskiden style="--d:…") */
.gec-70{ --d:70ms; } .gec-80{ --d:80ms; } .gec-120{ --d:120ms; } .gec-140{ --d:140ms; }
.gec-210{ --d:210ms; } .gec-280{ --d:280ms; } .gec-350{ --d:350ms; }

/* Şimşek Software imza barı — CSS sınıflı sürüm (footer'ın %75'i ton, hairline, 44px hedef,
   etiket .78 × taban .85 opaklıkla ≥4,5:1). Konum: </footer>'dan hemen sonra. */
.imza-bari{ background:#17202E; border-top:1px solid rgba(255,255,255,.12); padding:4px 0 max(4px, env(safe-area-inset-bottom)); display:flex; justify-content:center; align-items:center; }
.imza-bari__baglanti{ box-sizing:border-box; display:inline-flex; align-items:center; gap:10px; padding:12px 16px; min-height:44px; text-decoration:none; opacity:.85; transition:opacity .25s ease; }
.imza-bari__baglanti:hover, .imza-bari__baglanti:focus-visible{ opacity:1; }
.imza-bari__etiket{ font:400 10px/1.1 'Fragment Mono', ui-monospace, monospace; letter-spacing:.15em; margin-right:-.15em; white-space:nowrap; color:rgba(255,255,255,.78); }
.imza-bari__logo{ height:20px; width:auto; display:block; }
@media (prefers-reduced-motion: reduce){ .imza-bari__baglanti{ transition:none; } }

/* =========================================================================
   18 · LARAVEL SÜRÜMÜ (24.10.2026) — panelden yönetilen sayfaların mockup'ta karşılığı olmayan
   parçaları: duyurular, yazı metni (duyuru + yasal metinler), yasal sayfa düzeni, SSS grupları,
   boş süzgeç durumu, referans bağlantısı, footer yasal bağlantıları. Dil aynı: lacivert yazı,
   altın küçük etiket (Fragment Mono), gri zemin ↔ beyaz yükseltilmiş yüzey, 8px köşe.
   ========================================================================= */
/* Görseli olmayan sayfa başı (yasal metinler, iletişimsiz) tek sütun */
@media (min-width:1024px){ .sayfa-bas__ic--tek{ grid-template-columns:minmax(0, 820px); } }

/* Footer: yasal sayfalara giden bağlantılar (mockup'ta pencere düğmesiydi) */
.ayak__yasal a{ display:inline-flex; align-items:center; min-height:44px; font-size:12px; color:#B8C0CC; text-decoration:none; transition:color .2s ease; }
.ayak__yasal a:hover{ color:#FFFFFF; text-decoration:underline; text-underline-offset:4px; }

/* Referans logosu web sitesine bağlıysa bağlantı karonun tamamını kaplar */
.ref__bag{ display:flex; align-items:center; justify-content:center; width:100%; height:100%; }
.ref__bag:focus-visible{ outline-offset:-2px; }

/* Süzgeçte projesi olmayan stand tipi seçilince o tipe özel boş durum */
.proje-bos__ic{ display:grid; gap:14px; justify-items:start; }
.proje-bos__ic > *{ margin:0; }

/* Hizmet detay kartında bağlantısız başlık */
.marka-stand__metin strong{ font-size:17px; font-weight:600; color:#1F2B3D; }

/* Duyurular — proje kartlarıyla aynı aile: görsel + mono künye + başlık + özet */
.duyuru-izgara{ display:grid; grid-template-columns:minmax(0, 1fr); gap:40px 24px; }
@media (min-width:640px){ .duyuru-izgara{ grid-template-columns:repeat(2, minmax(0, 1fr)); } }
@media (min-width:1024px){ .duyuru-izgara{ grid-template-columns:repeat(3, minmax(0, 1fr)); gap:44px 28px; } }
.duyuru{ position:relative; display:flex; flex-direction:column; }
.duyuru__gorsel{ display:block; aspect-ratio:4 / 3; border-radius:8px; overflow:hidden; background:#E7E3DA; }
.duyuru__gorsel img{ display:block; width:100%; height:100%; object-fit:cover; transition:transform .6s var(--egri); }
.duyuru:hover .duyuru__gorsel img{ transform:scale(1.04); }
.duyuru__kunye{ display:flex; flex-wrap:wrap; gap:4px 14px; margin:16px 0 6px; font-family:'Fragment Mono', ui-monospace, monospace; font-size:11px; letter-spacing:.12em; text-transform:uppercase; color:#7A5C22; }
.duyuru__baslik{ margin:0; font-size:19px; font-weight:600; line-height:1.35; color:#1F2B3D; }
.duyuru__baslik a{ color:inherit; text-decoration:none; }
.duyuru__baslik a::after{ content:""; position:absolute; inset:0; z-index:1; border-radius:8px; }
.duyuru__baslik a:hover{ color:#7A5C22; }
.duyuru__baslik a:focus-visible{ outline:none; }
.duyuru:focus-within{ outline:2px solid #8A6A2B; outline-offset:6px; border-radius:8px; }
.duyuru__ozet{ margin:8px 0 0; font-size:15px; line-height:1.6; color:#4A5262; }
.duyuru__bag{ margin-top:6px; }

/* Yazı metni — duyuru içeriği ve yasal metinler (editör çıktısı: h2, h3, p, ul, ol, blockquote, a, img, table) */
.yazi{ max-width:760px; color:#3A4352; font-size:clamp(16px, .3vw + 14.8px, 17.5px); line-height:1.75; }
.yazi > :first-child{ margin-top:0; }
.yazi h2{ margin:2.2em 0 .6em; font-size:clamp(22px, 1vw + 16px, 28px); line-height:1.25; font-weight:600; letter-spacing:-.01em; color:#1F2B3D; scroll-margin-top:calc(var(--hdr) + 16px); }
.yazi h3{ margin:1.8em 0 .5em; font-size:19px; line-height:1.35; font-weight:600; color:#1F2B3D; scroll-margin-top:calc(var(--hdr) + 16px); }
.yazi p{ margin:0 0 1.05em; }
.yazi ul, .yazi ol{ margin:0 0 1.2em; padding-left:1.3em; }
.yazi li{ margin:.35em 0; }
.yazi li::marker{ color:#BF953F; }
.yazi strong{ color:#1F2B3D; font-weight:600; }
.yazi a{ color:#7A5C22; text-decoration:underline; text-underline-offset:3px; }
.yazi a:hover{ color:#1F2B3D; }
.yazi blockquote{ margin:1.6em 0; padding:16px 20px; border-left:3px solid #BF953F; border-radius:0 8px 8px 0; background:#FFFFFF; color:#1F2B3D; }
.yazi blockquote p:last-child{ margin-bottom:0; }
.yazi img{ display:block; max-width:100%; height:auto; margin:1.6em 0; border-radius:8px; }
.yazi hr{ margin:2em 0; border:0; border-top:1px solid #D2D5DA; }
.yasal-kunye{ display:grid; grid-template-columns:max-content minmax(0, 1fr); gap:8px 20px; margin:0 0 1.4em; padding:20px 22px; border:1px solid #D2D5DA; border-top:4px solid #BF953F; border-radius:8px; background:#FFFFFF; font-size:15px; }
.yasal-kunye dt{ font-family:'Fragment Mono', ui-monospace, monospace; font-size:11px; letter-spacing:.12em; color:#634A1C; padding-top:3px; }
.yasal-kunye dd{ margin:0; color:#1F2B3D; font-weight:500; overflow-wrap:anywhere; }
@media (max-width:480px){ .yasal-kunye{ grid-template-columns:minmax(0, 1fr); } .yasal-kunye dd + dt{ margin-top:8px; } }
.yasal-tablo-sar{ margin:0 0 1.4em; overflow-x:auto; border:1px solid #D2D5DA; border-radius:8px; background:#FFFFFF; }
.yasal-tablo{ width:100%; border-collapse:collapse; font-size:14px; line-height:1.55; }
.yasal-tablo th{ padding:12px 14px; text-align:left; font-family:'Fragment Mono', ui-monospace, monospace; font-size:11px; font-weight:400; letter-spacing:.12em; color:#634A1C; background:#F7F5F0; border-bottom:1px solid #D2D5DA; }
.yasal-tablo td{ padding:12px 14px; vertical-align:top; border-top:1px solid #EDEEF0; color:#3A4352; }
@media (max-width:640px){
  .yasal-tablo thead{ display:none; }
  .yasal-tablo tr{ display:block; padding:10px 0; border-top:1px solid #EDEEF0; }
  .yasal-tablo td{ display:grid; grid-template-columns:120px minmax(0, 1fr); gap:10px; border:0; padding:4px 14px; }
  .yasal-tablo td::before{ content:attr(data-etiket); font-family:'Fragment Mono', ui-monospace, monospace; font-size:10px; letter-spacing:.1em; color:#634A1C; }
}

/* Yasal sayfa: solda metin listesi, sağda metin */
.yasal-duzen{ display:grid; gap:32px; align-items:start; }
@media (min-width:1024px){ .yasal-duzen{ grid-template-columns:260px minmax(0, 1fr); gap:64px; } .yasal-menu{ position:sticky; top:calc(var(--hdr) + 24px); } }
.yasal-menu .eyebrow-text{ margin-bottom:12px; }
.yasal-menu ul{ list-style:none; margin:0; padding:0; border-top:1px solid #D2D5DA; }
.yasal-menu a{ display:flex; align-items:center; justify-content:space-between; gap:12px; min-height:48px; padding:10px 4px; border-bottom:1px solid #D2D5DA; font-size:15px; font-weight:500; color:#1F2B3D; text-decoration:none; transition:color .2s ease; }
.yasal-menu a .ikon{ color:#BF953F; opacity:0; transition:opacity .2s ease, transform .25s var(--egri); }
.yasal-menu a:hover{ color:#7A5C22; }
.yasal-menu a:hover .ikon{ opacity:1; transform:translateX(3px); }
.yasal-menu a[aria-current="page"]{ font-weight:600; color:#7A5C22; }
.yasal-menu a[aria-current="page"] .ikon{ opacity:1; }

/* SSS sayfası: gruplar alt alta, aralarında kıl çizgi */
.sss-grup + .sss-grup{ margin-top:clamp(48px, 6vw, 72px); padding-top:clamp(48px, 6vw, 72px); border-top:1px solid #D2D5DA; }
.sss-grup .sss{ margin-top:0; }

/* Teklif formu gönderilirken */
.form[aria-busy="true"] [type="submit"]{ opacity:.6; cursor:progress; }