/* ==========================================================================
   HYB GRUP İNŞAAT
   Tek stil dosyası. Koyu bölümler duyguyu, açık bölümler bilgiyi taşır.
   Renk kararları semantik değişkenlerle yapılır: bir bölüme .band--lite
   eklemek --bg/--head/--body/--line/--accent dörtlüsünü birlikte çevirir.
   ========================================================================== */

/* --- 0a. Yazı tipleri (yerel) --------------------------------------------
   Kendi sunucumuzdan veriliyor: dış bağlantı yok, ziyaretçinin IP'si üçüncü
   tarafa gitmiyor ve ilk boyama bir DNS + TLS el sıkışması beklemiyor.
   latin-ext ZORUNLU: ı (U+0131) latin altkümesinde ama İ, ş, ğ (U+0130,
   U+015E-015F, U+011E-011F) latin-ext'te. Eksik olursa Türkçe harfler
   yedek yazı tipine düşer ve satır içinde tipografi değişir.
   Dosyalar: assets/fonts/  ·  font-display:swap — metin hiç görünmez kalmaz.
   ------------------------------------------------------------------------ */
@font-face{font-family:'Inter';font-style:normal;font-weight:400;font-display:swap;
  src:url('../fonts/inter-400-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Inter';font-style:normal;font-weight:400;font-display:swap;
  src:url('../fonts/inter-400-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Inter';font-style:normal;font-weight:500;font-display:swap;
  src:url('../fonts/inter-500-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Inter';font-style:normal;font-weight:500;font-display:swap;
  src:url('../fonts/inter-500-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Inter';font-style:normal;font-weight:600;font-display:swap;
  src:url('../fonts/inter-600-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Inter';font-style:normal;font-weight:600;font-display:swap;
  src:url('../fonts/inter-600-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Inter';font-style:normal;font-weight:700;font-display:swap;
  src:url('../fonts/inter-700-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Inter';font-style:normal;font-weight:700;font-display:swap;
  src:url('../fonts/inter-700-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Cormorant Garamond';font-style:normal;font-weight:500;font-display:swap;
  src:url('../fonts/cormorant-garamond-500-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Cormorant Garamond';font-style:normal;font-weight:500;font-display:swap;
  src:url('../fonts/cormorant-garamond-500-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Cormorant Garamond';font-style:normal;font-weight:600;font-display:swap;
  src:url('../fonts/cormorant-garamond-600-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Cormorant Garamond';font-style:normal;font-weight:600;font-display:swap;
  src:url('../fonts/cormorant-garamond-600-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Cormorant Garamond';font-style:normal;font-weight:700;font-display:swap;
  src:url('../fonts/cormorant-garamond-700-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Cormorant Garamond';font-style:normal;font-weight:700;font-display:swap;
  src:url('../fonts/cormorant-garamond-700-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}

/* --- 0. Token ------------------------------------------------------------ */
/* Site iki paletle çalışır. Varsayılan AÇIK temadır; <html data-theme="dark">
   koyu paleti devreye alır. Yapısal kurallar renk bilmez, yalnızca değişken
   okur — bir bölümün tonunu çevirmek için .band--lite yeter. */
:root {
  /* Marka sabitleri ve ölçekler — temadan bağımsız */
  --navy:#1A2A3A; --navy-d:#16232F;
  --gold:#C8B489; --gold-hi:#E7D9BB; --gold-mid:#8A7444; --gold-deep:#7A6539;
  --logo-gold:#C6B38B;       /* logonun kendi altını — marka dosyasındaki tam değer */
  --paper:#F7F4EE; --paper-2:#EFEAE1; --white:#FFFFFF;
  --shade:12 20 28;          /* fotoğrafın üstündeki koyu katman — iki temada da koyu */

  --f-d:"Cormorant Garamond","Iowan Old Style",Georgia,serif;
  --f-b:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",sans-serif;

  --s--2:.7rem;
  --s--1:clamp(.78rem,.755rem + .11vw,.845rem);
  --s-0: clamp(.97rem,.94rem + .16vw,1.06rem);
  --s-1: clamp(1.1rem,1.02rem + .36vw,1.34rem);
  --s-2: clamp(1.42rem,1.22rem + .9vw,2.05rem);
  --s-3: clamp(1.95rem,1.5rem + 2vw,3.4rem);
  --s-4: clamp(2.5rem,1.75rem + 3.4vw,4.75rem);
  --s-5: clamp(3.1rem,1.6rem + 7vw,8.25rem);

  --wrap:1320px; --gut:clamp(1.15rem,4.5vw,3.25rem);
  --hdr:74px; --r:3px;
  --nav-fs:clamp(.775rem,.72rem + .12vw,.825rem);
  --e:cubic-bezier(.22,.61,.36,1);
  --e-out:cubic-bezier(.16,1,.3,1);
  --pad:clamp(3.75rem,8vw,7.5rem);
}
@media (max-width:640px) { :root { --hdr:62px; } }

/* ===== AÇIK TEMA (varsayılan) ============================================ */
:root {
  --ink-900:var(--paper); --ink-800:var(--paper-2); --ink-700:var(--white); --ink-600:#E4DDD2;
  --bg:var(--ink-900); --head:var(--navy-d); --body:#5A6772;
  --line:rgb(22 35 47 / .15); --line-s:rgb(22 35 47 / .075);
  --accent:var(--gold-deep); --card:var(--white);

  --scrim:247 244 238;
  --veil:
    linear-gradient(180deg, rgb(var(--scrim) / .82) 0%, rgb(var(--scrim) / .3) 26%,
                            rgb(var(--scrim) / .72) 74%, var(--ink-900) 100%),
    linear-gradient(90deg,  rgb(var(--scrim) / .95) 0%, rgb(var(--scrim) / .78) 44%,
                            rgb(var(--scrim) / .06) 84%, rgb(var(--scrim) / 0) 100%);
  --veil-para:radial-gradient(78% 82% at 50% 50%, rgb(var(--scrim) / .93) 0%,
                              rgb(var(--scrim) / .78) 52%, rgb(var(--scrim) / .58) 100%);
  --on-photo:var(--navy-d); --on-photo-2:#48555F;
  --on-photo-rule:rgb(22 35 47 / .22);
  --grain:rgb(22 35 47 / .05);

  --hdr-bg:rgb(247 244 238 / .92);
  --hdr-fg:#3C4A56; --hdr-fg-hi:var(--navy-d); --hdr-mute:#5D6B77;
  --logo-fg:var(--navy-d); --logo-mark:var(--logo-gold); --logo-sub:var(--gold-mid);
  --hdr-rule:rgb(22 35 47 / .24);

  --menu-bg:var(--paper); --menu-fg:var(--navy-d); --menu-mute:#5D6B77;

  --ghost-fg:var(--navy-d); --ghost-bd:rgb(22 35 47 / .3); --ghost-hover:rgb(22 35 47 / .06);
  --track:rgb(22 35 47 / .1);

  --cta-bg:var(--paper-2); --cta-fg-2:#48555F;
  --ftr-bg:var(--paper-2); --ftr-fg:#5A6772;
  /* B10 06.09.2026 · erişilebilirlik: eski #78858F krem alt bilgi üstünde
     3,16:1 veriyordu, WCAG AA eşiği 4,5:1. Aynı ton (H 206→207, S %9),
     yalnız açıklık düşürüldü: 4,55:1. */
  --ftr-mute:#606B74;
  --fab-bg:var(--navy-d); --fab-fg:var(--white);
  --err:#B3453B; --ok:#2F7A52;
}
.band--lite { --bg:var(--white); --card:var(--paper); }
/* Hangi tema seçili olursa olsun koyu kalan bölüm. Rengini temadan değil
   doğrudan markadan alır; uzun açık dizileri kırmak ve fotoğraf ağırlıklı
   anlatımı taşımak için. */
.band--ink {
  --bg:var(--navy); --head:var(--white); --body:#B3BFCA;
  --line:rgb(255 255 255 / .11); --line-s:rgb(255 255 255 / .06);
  --accent:var(--gold); --card:#274056;
}

/* ===== KOYU TEMA (ve dengeli temanın koyu iskeleti) ======================
   Dengeli tema bu blokla aynı yüzey ölçeğini kullanır: hero, proje rayı,
   şerit, marka bandı, kapanış ve alt bilgi lacivert kalır. Farkı aşağıda:
   dengelide .band'ler krem/beyaza döner, koyuda lacivert kalır. */
html[data-theme="dark"], html[data-theme="balanced"] {
  --ink-900:var(--navy); --ink-800:#203345; --ink-700:#274056; --ink-600:#335069;
  --bg:var(--ink-900); --head:var(--white); --body:#B3BFCA;
  --line:rgb(255 255 255 / .11); --line-s:rgb(255 255 255 / .06);
  --accent:var(--gold); --card:var(--ink-700);

  --scrim:12 20 28;
  --veil:
    linear-gradient(180deg, rgb(var(--scrim) / .74) 0%, rgb(var(--scrim) / .12) 34%,
                            rgb(var(--scrim) / .74) 80%, var(--ink-900) 100%),
    linear-gradient(90deg,  rgb(var(--scrim) / .84) 0%, rgb(var(--scrim) / .22) 56%,
                            rgb(var(--scrim) / 0) 84%);
  --veil-para:linear-gradient(180deg, rgb(var(--scrim) / .74) 0%, rgb(var(--scrim) / .84) 55%,
                                      rgb(var(--scrim) / .78) 100%);
  --on-photo:var(--white); --on-photo-2:#CBD5DE;
  --on-photo-rule:rgb(255 255 255 / .14);
  --grain:rgb(255 255 255 / .05);

  --hdr-bg:rgb(12 20 28 / .9);
  --hdr-fg:#D2DAE2; --hdr-fg-hi:var(--white); --hdr-mute:#93A1AE;
  --logo-fg:var(--white); --logo-mark:var(--logo-gold); --logo-sub:var(--logo-gold);
  --hdr-rule:rgb(255 255 255 / .22);

  --menu-bg:var(--ink-900); --menu-fg:var(--white); --menu-mute:#93A1AE;

  --ghost-fg:var(--white); --ghost-bd:rgb(255 255 255 / .32); --ghost-hover:rgb(255 255 255 / .09);
  --track:rgb(255 255 255 / .1);

  --cta-bg:var(--ink-800); --cta-fg-2:#C0CBD5;
  --ftr-bg:var(--ink-900); --ftr-fg:#93A1AE;
  /* B10 06.09.2026 · erişilebilirlik: eski #7F8C99 lacivert alt bilgi
     üstünde 4,26:1 idi, eşik 4,5:1. Aynı ton (H 210→209, S %11),
     açıklık bir tık artırıldı: 4,54:1. */
  --ftr-mute:#84919D;
  --fab-bg:rgb(255 255 255 / .1); --fab-fg:var(--white);
  --err:#E8837A; --ok:#6FC796;
}
html[data-theme="dark"] .band--lite,
html[data-theme="balanced"] .band {
  --bg:var(--paper); --head:var(--navy-d); --body:#5A6772;
  --line:rgb(22 35 47 / .13); --line-s:rgb(22 35 47 / .07);
  --accent:var(--gold-deep); --card:var(--white);
}
/* Dengelide açık bölümler kendi aralarında da nefes alsın: krem ↔ beyaz.
   Sıra önemli — aynı özgüllükte, bu kural .band'den sonra gelmeli. */
html[data-theme="balanced"] .band--lite { --bg:var(--white); --card:var(--paper); }
html[data-theme="balanced"] .band--ink {
  --bg:var(--navy); --head:var(--white); --body:#B3BFCA;
  --line:rgb(255 255 255 / .11); --line-s:rgb(255 255 255 / .06);
  --accent:var(--gold); --card:#274056;
}

/* Dengelide fotoğraf perdeleri koyu kalır ama üst çubuk açık bölümlerin
   üstünden de geçtiği için nötr bir cam tonu alır. */
html[data-theme="balanced"] {
  --hdr-bg:rgb(16 26 36 / .88);
}

/* --- 1. Temel ------------------------------------------------------------ */
*,*::before,*::after { box-sizing:border-box; }
html {
  -webkit-text-size-adjust:100%; scroll-behavior:smooth;
  scroll-padding-top:calc(var(--hdr) + 3.75rem);
}
body {
  margin:0; background:var(--ink-900); color:var(--body);
  font:400 var(--s-0)/1.72 var(--f-b);
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  overflow-x:hidden; font-feature-settings:"cv05" 1,"ss01" 1;
}
/* height:auto şart: width/height öznitelikleri dururken CSS yalnızca genişliği
   verirse tarayıcı yüksekliği özniteliğe sabitler ve görsel yamulur. */
img,svg,iframe,video { display:block; max-width:100%; height:auto; }
a { color:inherit; text-decoration:none; }
button { font:inherit; color:inherit; background:none; border:0; cursor:pointer; }
ul,ol { margin:0; padding:0; list-style:none; }
table { border-collapse:collapse; }
h1,h2,h3 {
  margin:0; font-family:var(--f-d); font-weight:600; line-height:1.05;
  color:var(--head); letter-spacing:-.014em; overflow-wrap:break-word;
}
/* Vitrin başlıkları versal. Cormorant'ta büyük harf dizgi negatif harf
   aralığını kaldırmayı ister; satır arası da inici harf kalmadığı için sıkılır.
   Küçültme CSS'te: kaynak metin okunur kalsın, "İ" doğru çıksın diye
   sayfalar lang="tr" ile işaretli (tarayıcı Türkçe kurala göre çevirir). */
h1,h2 { text-transform:uppercase; letter-spacing:.014em; line-height:1.02; }
h3 { text-transform:none; }
p { margin:0 0 1.15em; } p:last-child { margin-bottom:0; }
b,strong { color:var(--head); font-weight:600; }
:focus-visible { outline:2px solid var(--accent); outline-offset:3px; border-radius:2px; }
::selection { background:var(--gold); color:var(--navy-d); }

.wrap { width:min(100% - var(--gut)*2, var(--wrap)); margin-inline:auto; }
.sr { position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); }
.anchor { display:block; height:0; scroll-margin-top:calc(var(--hdr) + 3.75rem); }
.skip {
  position:fixed; left:.75rem; top:-5rem; z-index:500; padding:.8rem 1.25rem;
  background:var(--gold); color:var(--navy-d); font-weight:600; transition:top .25s var(--e);
}
.skip:focus { top:.75rem; }

/* --- 2. Marka açılışı (saf CSS — JS'siz de kapanır) ---------------------- */
.intro-veil {
  position:fixed; inset:0; z-index:400; display:grid; place-items:center;
  background:var(--ink-900); pointer-events:none;
  animation:veilOut 1.25s cubic-bezier(.7,0,.25,1) forwards;
}
.intro-veil__mark { display:grid; justify-items:center; gap:1.35rem; animation:markIn .8s var(--e-out) both; }
.intro-veil__mark .logo { --logo-f:clamp(15px,2.4vw,21px); }
.intro-veil__mark i { display:block; width:0; height:1px; background:var(--accent); animation:lineGrow .95s .12s var(--e-out) forwards; }
@keyframes veilOut { 0%,62% { opacity:1; } 100% { opacity:0; visibility:hidden; } }
@keyframes markIn  { from { opacity:0; transform:translateY(12px); } to { opacity:1; transform:none; } }
@keyframes lineGrow{ to { width:clamp(140px,22vw,196px); } }

/* --- 3. Scroll ilerleme -------------------------------------------------- */
.prog { position:fixed; inset:0 0 auto; z-index:210; height:2px; pointer-events:none;
  background:var(--track); }
.prog i { display:block; height:100%; width:0; background:linear-gradient(90deg,var(--gold-deep),var(--gold-hi)); }

/* --- 4. Ortak yazı öğeleri ---------------------------------------------- */
.kicker {
  display:flex; align-items:center; gap:.85rem; margin:0 0 1.35rem;
  font:600 var(--s--1)/1 var(--f-b); letter-spacing:.24em; text-transform:uppercase;
  color:var(--accent);
}
.kicker::before { content:""; flex:none; width:2.4rem; height:1px; background:currentColor; }
.kicker--back { display:inline-flex; gap:.6rem; margin-bottom:1.35rem; transition:gap .3s var(--e); }
.kicker--back::before { content:"\2190"; width:auto; height:auto; background:none;
  font-size:1.15em; line-height:1; transform:translateY(-.04em); }
.kicker--back:hover { gap:1rem; color:var(--gold-mid); }
.lede { margin-top:1.1rem; font-size:var(--s-1); color:var(--body); max-width:58ch; }

.shead { margin-bottom:clamp(2.25rem,4.5vw,3.75rem); max-width:62rem; }
.shead--narrow { max-width:46rem; }
.shead h2 { font-size:var(--s-3); }
.shead--row { display:flex; flex-wrap:wrap; align-items:baseline; gap:.75rem 2rem;
  justify-content:space-between; max-width:none; }
.shead--row .kicker { margin:0; flex-basis:100%; }
.shead__x { font:600 var(--s--1)/1 var(--f-b); letter-spacing:.2em; text-transform:uppercase; color:var(--accent); }

.reveal-lines { clip-path:inset(0 0 112% 0); transition:clip-path 1.05s .06s var(--e-out); }
.is-in .reveal-lines, .reveal-lines.is-in { clip-path:inset(0 0 -25% 0); }

.tag {
  display:inline-block; padding:.28rem .6rem; border:1px solid var(--line);
  border-radius:100px; font:600 var(--s--2)/1 var(--f-b); letter-spacing:.12em;
  text-transform:uppercase; color:var(--body); white-space:nowrap;
}
.note {
  display:flex; gap:.6rem; align-items:center; margin-top:1.5rem; padding:.85rem 1.1rem;
  border-left:2px solid var(--accent); background:var(--line-s);
  font-size:var(--s--1); color:var(--body);
}
.note svg { flex:none; width:1.15em; height:1.15em; color:var(--accent); }

/* --- 5. Düğmeler --------------------------------------------------------- */
.btn {
  display:inline-flex; align-items:center; gap:.7rem; padding:1.02rem 1.85rem;
  border:1px solid transparent; border-radius:100px; white-space:nowrap;
  font:600 var(--s--1)/1 var(--f-b); letter-spacing:.13em; text-transform:uppercase;
  transition:background .3s var(--e), color .3s var(--e), border-color .3s var(--e), transform .3s var(--e);
}
.btn svg { flex:none; width:1.05em; height:1.05em; transition:transform .3s var(--e); }
.btn:hover { transform:translateY(-2px); }
.btn--gold { background:var(--gold); color:var(--navy-d); border-color:var(--gold); }
.btn--gold:hover { background:var(--gold-hi); border-color:var(--gold-hi); }
.btn--ghost { color:var(--ghost-fg); border-color:var(--ghost-bd); }
.btn--ghost:hover { background:var(--ghost-hover); border-color:var(--ghost-fg); }
.btn--dark { background:var(--navy-d); color:var(--white); border-color:var(--navy-d); }
.btn--dark:hover { background:var(--navy); border-color:var(--navy); }
.btn--line { color:var(--head); border-color:var(--line); }
.btn--line:hover { background:var(--line-s); border-color:var(--head); }
.btn:hover svg:last-child { transform:translateX(3px); }
.btn-row { display:flex; flex-wrap:wrap; gap:.8rem; margin-top:2rem; }
.link-a {
  display:inline-flex; align-items:center; gap:.55rem;
  font:600 var(--s--1)/1 var(--f-b); letter-spacing:.16em; text-transform:uppercase;
  color:var(--accent); border-bottom:1px solid transparent; padding-bottom:.3rem;
  transition:border-color .3s var(--e), gap .3s var(--e);
}
.link-a svg { width:1.05em; height:1.05em; }
.link-a:hover { border-color:currentColor; gap:.9rem; }

/* --- 5b. Marka kilidi ----------------------------------------------------
   Kule vektör, yazı canlı metin. Elimizdeki tek logo dosyası 309×65 idi;
   retina ekranda 150 px'in üstünde bulanıklaşıyordu. Böylece her yoğunlukta
   net kalıyor, rengini temadan alıyor ve iki ayrı PNG tutmaya gerek kalmıyor.
   Tüm ölçüler tek değişkenden türer: --logo-f (HYB GRUP satırının punto'su). */
.logo { display:flex; align-items:flex-end; gap:.27em; font-size:var(--logo-f,16px); line-height:1; }
.logo__mark { flex:none; width:auto; height:1.88em; margin-bottom:.117em; color:var(--logo-mark); }
.logo__wm { display:flex; flex-direction:column; }
.logo__a {
  position:relative; font:700 1em/1 var(--f-b); letter-spacing:.128em;
  color:var(--logo-fg); white-space:nowrap;
}
.logo__r { position:absolute; top:-.03em; font:500 .28em/1 var(--f-b); letter-spacing:0; }
/* İNŞAAT satırı. Yatay ölçüler marka dosyasından birebir: alt satır üst
   satırın %92,5'i kadar geniş, bunu letter-spacing 1.97em veriyor.
   DEĞİŞTİRME — ve değiştirilecekse margin-right de aynı sayıya çekilmeli
   (letter-spacing son harften sonra da uygulanır, negatif kenar onu yer).

   margin-top: marka dosyasında -.1em idi ve İ'nin noktasıyla üstteki
   satırın arası yalnız 0,063em kalıyordu. Orijinal 309px genişlikte
   tasarlandı; biz üst çubukta onun yarısı kadar bastığımız için o boşluk
   1 piksele düşüyor ve harf yapışık görünüyordu (müşteri bildirdi,
   05.09.2026). .25em ile boşluk 0,209em'e çıktı = üst çubukta 3,3px.
   Logonun toplam yüksekliği DEĞİŞMEZ: kutuyu kule belirliyor (1,997em),
   yazı bloğu 1,521em ile onun altında kalıyor. */
.logo__b {
  margin-top:.25em; margin-right:-1.97em; font:500 .4167em/1 var(--f-b);
  letter-spacing:1.97em; color:var(--logo-sub); white-space:nowrap;
}

/* --- 6. Üst çubuk -------------------------------------------------------- */
.hdr {
  position:fixed; inset:2px 0 auto; z-index:180; height:var(--hdr);
  display:flex; align-items:center;
  transition:background .45s var(--e), box-shadow .45s var(--e), transform .45s var(--e);
}
.hdr--tuck { background:var(--hdr-bg); backdrop-filter:blur(16px) saturate(1.3);
  box-shadow:0 1px 0 var(--line); }
.hdr--hide { transform:translateY(-108%); }
.hdr__in { display:flex; align-items:center; gap:1rem; width:min(100% - var(--gut)*2, var(--wrap)); margin-inline:auto; }
.hdr__logo { --logo-f:clamp(12.8px,1.28vw,15.8px); }
.nav { display:none; margin-inline:auto; gap:clamp(1.3rem,2.35vw,2.5rem); }
.nav__link {
  position:relative; padding-block:.5rem; color:var(--hdr-fg);
  font:500 var(--nav-fs)/1 var(--f-b); letter-spacing:.17em; text-transform:uppercase;
  transition:color .3s var(--e);
}
.nav__link::after {
  content:""; position:absolute; left:0; bottom:0; height:1px; width:0;
  background:var(--accent); transition:width .35s var(--e);
}
.nav__link:hover { color:var(--hdr-fg-hi); } .nav__link:hover::after { width:calc(100% - .17em); }
.nav__link.is-active { color:var(--accent); } .nav__link.is-active::after { width:calc(100% - .17em); }
.hdr__side { display:flex; align-items:center; gap:clamp(.6rem,1.6vw,1.25rem); margin-left:auto; }
.lang { display:flex; align-items:center; gap:.5rem; font:500 var(--nav-fs)/1 var(--f-b); letter-spacing:.14em; color:var(--hdr-mute); }
.lang i { width:1px; height:11px; background:var(--hdr-rule); }
.lang a { transition:color .25s var(--e); } .lang a:hover { color:var(--hdr-fg-hi); }
.lang a.is-on { color:var(--accent); }
.hdr__cta {
  display:none; align-items:center; gap:.55rem; padding:.62rem 1.15rem; white-space:nowrap;
  border:1px solid var(--ghost-bd); border-radius:100px; color:var(--accent);
  font:500 var(--nav-fs)/1 var(--f-b); letter-spacing:.12em; text-transform:uppercase;
  transition:background .3s var(--e), border-color .3s var(--e);
}
.hdr__cta:hover { background:var(--ghost-hover); border-color:var(--accent); }
.hdr__cta svg { width:1em; height:1em; }
@media (min-width:1000px) {
  .nav { display:flex; } .hdr__cta { display:inline-flex; } .burger { display:none !important; }
}
.burger { display:grid; gap:6px; width:44px; height:44px; place-content:center; }
.burger span { display:block; width:24px; height:1.5px; background:var(--hdr-fg-hi); transition:transform .35s var(--e), opacity .25s var(--e); }
body.nav-open .burger span:first-child { transform:translateY(3.75px) rotate(45deg); }
body.nav-open .burger span:last-child  { transform:translateY(-3.75px) rotate(-45deg); }
body.nav-open { overflow:hidden; }

/* --- 7. Mobil menü ------------------------------------------------------- */
.mnav {
  position:fixed; inset:0; z-index:170; background:var(--menu-bg);
  display:flex; align-items:center; opacity:0; visibility:hidden;
  transition:opacity .4s var(--e), visibility .4s;
}
.mnav[hidden] { display:flex; }
.mnav.is-open { opacity:1; visibility:visible; }
.mnav__in { width:min(100% - var(--gut)*2, var(--wrap)); margin-inline:auto;
  padding-top:var(--hdr); max-height:100svh; overflow-y:auto; }
.mnav__list { margin-bottom:clamp(2rem,6vh,3.5rem); }
.mnav__list li { border-bottom:1px solid var(--line-s); }
.mnav__list a {
  display:flex; align-items:baseline; gap:1.1rem; padding-block:clamp(.75rem,2.1vh,1.15rem);
  font:600 clamp(1.75rem,7vw,3rem)/1.1 var(--f-d); color:var(--menu-fg);
  opacity:0; transform:translateY(18px); transition:opacity .5s var(--e), transform .5s var(--e), color .3s;
}
.mnav.is-open .mnav__list a { opacity:1; transform:none; }
.mnav__list li:nth-child(1) a { transition-delay:.06s; }
.mnav__list li:nth-child(2) a { transition-delay:.11s; }
.mnav__list li:nth-child(3) a { transition-delay:.16s; }
.mnav__list li:nth-child(4) a { transition-delay:.21s; }
.mnav__list li:nth-child(5) a { transition-delay:.26s; }
.mnav__list a:hover { color:var(--accent); }
.mnav__i { font:600 var(--s--1)/1 var(--f-b); letter-spacing:.16em; color:var(--accent); }
.mnav__foot { padding-bottom:2.5rem; font-size:var(--s--1); }
.mnav__tel { display:block; font:600 clamp(1.3rem,5vw,1.85rem)/1.2 var(--f-d); color:var(--accent);
  font-variant-numeric:lining-nums tabular-nums; font-feature-settings:"lnum" 1,"tnum" 1; }
.mnav__mail { display:block; margin-top:.4rem; color:var(--body); }
.mnav__addr { margin:.9rem 0 1.25rem; color:var(--menu-mute); max-width:26rem; }
.mnav__soc { display:flex; gap:.9rem; }
.mnav__soc a { display:grid; place-items:center; width:40px; height:40px; border:1px solid var(--line); border-radius:50%; color:var(--body); transition:all .3s var(--e); }
.mnav__soc a:hover { color:var(--navy-d); background:var(--gold); border-color:var(--gold); }
.mnav__soc svg { width:17px; height:17px; }

/* --- 8. Sinematik hero --------------------------------------------------- */
.stage { position:relative; height:205vh; background:var(--ink-900); }
.stage__pin { position:sticky; top:0; height:100svh; overflow:hidden; display:flex; align-items:flex-end; }
.stage__bg { position:absolute; inset:-7% -4%; will-change:transform; }
.stage__bg img { width:100%; height:100%; object-fit:cover; }
/* Ana sayfa kapağı dikey bir render: geniş ekranda ortadan kırpılırsa çatıdaki
   "HYB TWIN TOWERS" tabelası kadraj dışında kalıyor. Kırpma yukarı çekildi. */
.is-home .stage__bg img { object-position:50% 14%; }
.stage__veil {
  position:absolute; inset:0;
  background:var(--veil);
}
.stage__grain {
  position:absolute; inset:0; pointer-events:none; opacity:.42;
  background-image:radial-gradient(var(--grain) 1px, transparent 1px);
  background-size:3px 3px;
}
.stage--sm { height:auto; }
.stage--sm .stage__pin { position:relative; height:auto; min-height:min(76svh,720px); }
.stage--sm .hero { padding-block:calc(var(--hdr) + clamp(3rem,9vh,6rem)) clamp(3rem,8vh,5.5rem); }
.stage--mono .stage__bg img { filter:saturate(.55) contrast(1.05); }

.hero { position:relative; z-index:3; will-change:transform,opacity;
  padding-block:calc(var(--hdr) + clamp(1.25rem,4vh,2.5rem)) clamp(4rem,12vh,8rem); }
.hero { color:var(--on-photo-2); }
/* Versal dizgi küçük harfe göre belirgin şekilde geniş: müşterinin verdiği iki
   satır ("GELECEĞİ GÜVEN KALİTE VE" / "ESTETİKLE İNŞA EDİYORUZ") en uzun satırda
   punto'nun 13,8 katı yer kaplıyor. Sabitlenmiş kahraman bölümde satır başına
   tek satır kalsın diye ölçü doğrudan kapsayıcı genişliğinden türetildi;
   1155 px'e kadar kapsayıcı ≈ %91 vw, üstünde 1320 px'de sabitleniyor. */
.hero h1 { font-size:min(6.4vw,5.9rem); color:var(--on-photo); }
.hero h1.h-mono { font-size:var(--s-4); }
.hero h1 .ln { display:block; overflow:hidden; padding-bottom:.14em; margin-bottom:-.1em; }
.hero h1 .ln > span { display:block; transform:translateY(108%); transition:transform 1.2s var(--e-out); }
.hero h1 .ln--g > span { color:var(--accent); transition-delay:.11s; }
body.is-ready .hero h1 .ln > span { transform:none; }
.hero__sub {
  max-width:min(100%,46rem); margin:1.85rem 0 0; font-size:var(--s-1); color:var(--on-photo-2);
  opacity:0; transform:translateY(20px); transition:opacity .9s .46s var(--e), transform .9s .46s var(--e);
}
.hero__pill {
  display:flex; flex-wrap:wrap; align-items:center; gap:.9rem; margin:1.4rem 0 0;
  font:500 var(--s--1)/1 var(--f-b); letter-spacing:.15em; text-transform:uppercase; color:var(--on-photo-2);
  opacity:0; transform:translateY(18px); transition:opacity .9s .4s var(--e), transform .9s .4s var(--e);
}
.pill { display:inline-flex; align-items:center; gap:.45rem; padding:.44rem .95rem; border-radius:100px;
  border:1px solid var(--accent); color:var(--accent); font-weight:600; }
.hero__btns { display:flex; flex-wrap:wrap; gap:.8rem; margin-top:2.25rem;
  opacity:0; transform:translateY(20px); transition:opacity .9s .62s var(--e), transform .9s .62s var(--e); }
.hero__row {
  display:flex; flex-wrap:wrap; gap:1.4rem 3rem; align-items:center; margin-top:clamp(2rem,5vh,3.25rem);
  padding-top:clamp(1.5rem,3vh,2.25rem); border-top:1px solid var(--on-photo-rule);
  opacity:0; transform:translateY(20px); transition:opacity .9s .74s var(--e), transform .9s .74s var(--e);
}
body.is-ready .hero__sub, body.is-ready .hero__pill,
body.is-ready .hero__btns, body.is-ready .hero__row { opacity:1; transform:none; }
.hero__fact { display:flex; align-items:baseline; gap:.6rem; }
.hero__fact b { font:600 var(--s-2)/1 var(--f-d); color:var(--accent);
  font-variant-numeric:lining-nums tabular-nums; font-feature-settings:"lnum" 1,"tnum" 1; }
.hero__fact span { font:500 var(--s--1)/1.2 var(--f-b); letter-spacing:.15em; text-transform:uppercase; color:var(--on-photo-2); }

.cue {
  position:absolute; right:clamp(1rem,3vw,2.25rem); top:50%; transform:translateY(-50%); z-index:4;
  display:flex; flex-direction:column; align-items:center; gap:.7rem; writing-mode:vertical-rl;
  font:600 var(--s--2)/1 var(--f-b); letter-spacing:.28em; text-transform:uppercase; color:var(--on-photo-2);
}
.cue::after { content:""; width:1px; height:54px; background:linear-gradient(var(--accent),transparent); writing-mode:horizontal-tb; }
@media (max-width:1000px) { .cue { display:none; } }

/* Telefonda başlık dört satıra çıkabiliyor; sabitlenmiş hero'da içerik yukarıdan
   taşıyıp menünün altında kalıyordu. Küçük ekranda hero sabitlenmez, kendi
   yüksekliğini alır: taşma imkânsız hâle gelir ve içeriğe bir ekran erken varılır. */
@media (max-width:640px) {
  .stage { height:auto; }
  .stage__pin { position:relative; height:auto; min-height:100svh; }
  .hero { padding-bottom:clamp(2rem,6vh,3.5rem); }
  .hero h1 { font-size:clamp(2rem,1.1rem + 4.4vw,2.9rem); }
  .hero h1.h-mono { font-size:clamp(2.1rem,1.1rem + 4.6vw,2.8rem); }
  .hero__sub { margin-top:1.35rem; font-size:var(--s-0); }
  .hero__btns { margin-top:1.6rem; gap:.6rem; }
  .hero__btns .btn { padding:.92rem 1.4rem; }
  .hero__row { margin-top:1.5rem; padding-top:1.25rem; gap:.9rem 1.75rem; }
  .hero__fact b { font-size:var(--s-1); }
}

@media (min-width:1000px) and (max-height:880px) {
  .hero h1 { font-size:min(6vw,5.2rem); }
  .hero { padding-bottom:clamp(2.25rem,6vh,4rem); }
  .hero__sub { margin-top:1.25rem; font-size:var(--s-0); }
  .hero__btns { margin-top:1.5rem; }
  .hero__row { margin-top:1.5rem; padding-top:1.35rem; }
}
@media (max-height:620px) { .hero__row { display:none; } }

/* --- 9. Kayan şerit ------------------------------------------------------ */
.ticker { position:relative; z-index:6; padding-block:1.1rem; background:var(--ink-800);
  border-block:1px solid rgb(200 180 137 / .17); overflow:hidden; }
.ticker__track { display:flex; width:max-content; will-change:transform; }
.ticker__track span {
  display:inline-flex; align-items:center; gap:1.5rem; padding-inline:1.5rem; white-space:nowrap;
  font:600 var(--s--1)/1 var(--f-b); letter-spacing:.2em; text-transform:uppercase; color:var(--body);
}
.ticker__track span::after { content:"◆"; color:var(--accent); font-size:.6em; letter-spacing:0; }

/* --- 10. Bölüm kabuğu ---------------------------------------------------- */
.band { position:relative; z-index:5; background:var(--bg); color:var(--body); padding-block:var(--pad); }
.band--lite + .band--lite { padding-top:0; }

/* --- 11. Rakam bandı ----------------------------------------------------- */
.num__grid { display:grid; gap:clamp(2.25rem,5vw,4.5rem); align-items:center; }
@media (min-width:960px) { .num__grid { grid-template-columns:1.05fr .95fr; } }
/* Ne inşa edildiyse tür tür: tek dev rakam yerine dökümlü liste.
   İlk satır (konut) en büyük rakam; diğerleri onun altında ikinci kademede
   duruyor ki liste okunurken hiyerarşi kaybolmasın. */
.built__h { margin-bottom:clamp(1.25rem,2.6vw,2rem); font-size:var(--s-2); color:var(--head); }
.built { border-top:1px solid var(--line); }
.built__row { display:flex; align-items:baseline; gap:clamp(.9rem,2.4vw,1.6rem);
  padding-block:clamp(.7rem,1.5vw,1.05rem); border-bottom:1px solid var(--line); }
.built__row b { flex:none; min-width:4.4ch; text-align:right;
  font:600 clamp(1.9rem,1.1rem + 2.4vw,3.1rem)/1 var(--f-d);
  color:var(--accent); letter-spacing:-.03em;
  font-variant-numeric:lining-nums tabular-nums; font-feature-settings:"lnum" 1,"tnum" 1; }
.built__row span { font:500 var(--s--1)/1.3 var(--f-b);
  letter-spacing:.17em; text-transform:uppercase; color:var(--body); }
/* Konut rakamı listenin geri kalanından çok daha uzun; aynı satırda sağa
   dayanınca etiket sütunu kayıyor ve hizasızlık kaza gibi duruyordu.
   İlk satır bu yüzden rakam üstte, etiket altta duran ayrı bir blok. */
.built__row:first-child { display:block; padding-bottom:clamp(1rem,2.2vw,1.6rem); }
.built__row:first-child b { display:block; min-width:0; text-align:left;
  font-size:clamp(2.9rem,1.4rem + 5vw,5.4rem); }
.built__row:first-child span { display:block; margin-top:.75rem;
  font-size:var(--s-0); color:var(--head); }
@media (max-width:420px) { .built__row b { min-width:3.6ch; } }
.kpis { display:grid; grid-template-columns:repeat(2,1fr);
  margin-top:clamp(1.75rem,3.5vw,2.75rem);
  border-top:1px solid var(--line); border-left:1px solid var(--line); }
.kpi { background:var(--bg); padding:clamp(1.1rem,2.4vw,1.75rem);
  border-right:1px solid var(--line); border-bottom:1px solid var(--line); }
.kpi b { display:block; font:600 var(--s-2)/1 var(--f-d); color:var(--head);
  font-variant-numeric:lining-nums tabular-nums; font-feature-settings:"lnum" 1,"tnum" 1; }
.kpi span { display:block; margin-top:.55rem; font:500 var(--s--2)/1.35 var(--f-b);
  letter-spacing:.15em; text-transform:uppercase; color:var(--body); }
@media (max-width:460px) { .kpis { grid-template-columns:1fr; } }
/* "TOKİ & Emlak Konut" gibi metin değerler serif rakam ölçeğinde taşıyor */
.kpi--txt b { font-family:var(--f-b); font-size:var(--s-1); line-height:1.25; letter-spacing:-.01em; }
/* Beşinci künye hücresi "şu an inşa edilen konut": teslim edilmiş bir rakam
   DEĞİL. Solundaki "İnşa ettiklerimiz" listesiyle karışmaması için iki sütunu
   birden kaplıyor ve sol kenarında vurgu çizgisi taşıyor — dört künye
   hücresinden de, teslim listesinden de gözle ayrışıyor.
   nth-child kullanılıyor çünkü hücrenin sınıfını kit.py belirliyor ve
   stat_band'e dışarıdan sınıf geçirilemiyor. */
.kpi:nth-child(5) { grid-column:1 / -1; border-left:3px solid var(--accent); }

/* --- 12. Hizmetler ------------------------------------------------------- */
.srv__grid { display:grid; border-top:1px solid var(--line); border-left:1px solid var(--line); }
@media (min-width:700px)  { .srv__grid { grid-template-columns:repeat(2,1fr); } }
@media (min-width:1050px) { .srv__grid { grid-template-columns:repeat(3,1fr); } }
.srv { position:relative; background:var(--bg); padding:clamp(1.75rem,3.2vw,2.6rem);
  border-right:1px solid var(--line); border-bottom:1px solid var(--line);
  transition:background .4s var(--e); }
.srv:hover { background:var(--card); }
.srv__ic { display:grid; place-items:center; width:52px; height:52px; margin-bottom:1.5rem;
  border:1px solid var(--accent); border-radius:50%; color:var(--accent); }
.srv__ic svg { width:22px; height:22px; }
.srv__n { position:absolute; top:clamp(1.5rem,3vw,2.4rem); right:clamp(1.5rem,3vw,2.4rem);
  font:600 var(--s--1)/1 var(--f-b); letter-spacing:.14em; color:var(--accent); opacity:.65; }
.srv h3 { font-size:var(--s-2); margin-bottom:.75rem; }
.srv p { font-size:var(--s--1); }

/* --- 13. Yatay proje rayı ------------------------------------------------ */
.rail { position:relative; z-index:5; background:var(--ink-800); }
.rail__pin { position:sticky; top:0; height:100svh; display:flex; flex-direction:column;
  justify-content:center; overflow:hidden; padding-top:var(--hdr); }
.rail__head { margin:0 auto clamp(1.5rem,3vw,2.5rem); display:flex; flex-wrap:wrap;
  align-items:baseline; justify-content:space-between; gap:.8rem 2rem; }
.rail__head .kicker { flex-basis:100%; }
.rail__head h2 { font-size:var(--s-3); }
.rail__track { display:flex; gap:clamp(1rem,1.9vw,1.6rem); padding-inline:var(--gut); will-change:transform; }
.rail__foot { margin:clamp(1.5rem,3vw,2.5rem) auto 0; }
.rail__bar { height:1px; background:var(--track); }
.rail__bar i { display:block; height:100%; width:0; background:var(--accent); }
.rail__hint { margin:.9rem 0 0; font:600 var(--s--1)/1 var(--f-b); letter-spacing:.2em;
  text-transform:uppercase; color:var(--body); }

.pcard {
  position:relative; flex:none; width:min(78vw,430px); aspect-ratio:3/4;
  border-radius:var(--r); overflow:hidden; background:var(--ink-700);
}
.pcard picture { position:absolute; inset:0; display:block; }
.pcard img { width:100%; height:100%; object-fit:cover; filter:saturate(.86) brightness(.84);
  transition:transform 1.1s var(--e), filter .55s var(--e); }
.pcard:hover img { transform:scale(1.055); filter:saturate(1) brightness(1); }
.pcard::after { content:""; position:absolute; inset:0;
  background:linear-gradient(0deg, rgb(var(--shade) / .95) 4%, rgb(var(--shade) / .55) 38%, rgb(var(--shade) / .06) 72%); }
.pcard__body { position:absolute; inset:auto 0 0; z-index:2; padding:clamp(1.35rem,2.5vw,1.9rem); }
.pcard__loc { margin:0 0 .55rem; font:500 var(--s--1)/1 var(--f-b); letter-spacing:.18em;
  text-transform:uppercase; color:var(--gold); }
.pcard h3 { font-size:var(--s-2); margin-bottom:.5rem; }
.pcard__sum { font-size:var(--s--1); color:#B2BEC9; margin-bottom:1rem;
  display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; }
.pcard__meta { display:flex; flex-wrap:wrap; gap:.3rem 1.1rem; padding-top:.9rem;
  border-top:1px solid rgb(255 255 255 / .17); font:500 var(--s--1)/1.45 var(--f-b); color:#C0CBD6; }
.pcard__meta b { color:var(--gold); }
.pcard__n { position:absolute; top:1.15rem; left:1.35rem; z-index:2;
  font:600 var(--s--1)/1 var(--f-b); letter-spacing:.14em; color:rgb(255 255 255 / .6); }
.pcard__tag { position:absolute; top:1.05rem; right:1.15rem; z-index:2; padding:.32rem .7rem;
  border-radius:100px; background:rgb(var(--shade) / .72);
  border:1px solid rgb(255 255 255 / .2);
  font:600 var(--s--2)/1 var(--f-b); letter-spacing:.13em; text-transform:uppercase; color:#DCE4EB; }
.pcard__tag.is-live { border-color:var(--gold); color:var(--gold); }
.pcard__go { position:absolute; right:clamp(1.35rem,2.5vw,1.9rem); bottom:clamp(1.35rem,2.5vw,1.9rem);
  display:grid; place-items:center; width:38px; height:38px; border-radius:50%;
  border:1px solid rgb(255 255 255 / .3); color:#fff;
  opacity:0; transform:translate(6px,-6px); transition:all .4s var(--e); }
.pcard:hover .pcard__go { opacity:1; transform:none; background:var(--gold); border-color:var(--gold); color:var(--navy-d); }
.pcard__go svg { width:16px; height:16px; }
.pcard a::after { content:""; position:absolute; inset:0; z-index:3; }
/* 404'teki kart ızgarası. Kural yoktu: `.pgrid` display:block kalıyor, içindeki
   <a class="pcard"> satır içi kaldığı için width ve aspect-ratio uygulanmıyor,
   kart 0×0'a çöküyor ve başlık harf başına bir satır kırılıyordu. Kartı ızgara
   öğesi yapmak blok seviyesine çıkarıyor; genişliği hücre veriyor. */
.pgrid { display:grid; gap:clamp(1.25rem,2.5vw,2rem);
  grid-template-columns:repeat(auto-fit,minmax(min(100%,255px),1fr)); }
.pgrid .pcard { width:auto; }
/* Şeritteki kartlar koyu bölümün içinde olduğu için başlık beyazı oradan
   miras alıyor. 404'ün bandı açık; kartın kendi koyu gradyanı üstünde başlık
   okunmaz kalıyordu, rengi burada açıkça veriliyor. */
.pgrid .pcard h3 { color:#fff; }

.pcard--end { display:grid; place-items:center; gap:1rem; width:min(60vw,290px);
  background:transparent; border:1px solid var(--ghost-bd); align-content:center;
  color:var(--accent); font:600 var(--s--1)/1 var(--f-b); letter-spacing:.2em; text-transform:uppercase;
  transition:background .35s var(--e); }
.pcard--end:hover { background:var(--ghost-hover); }
.pcard--end::after { display:none; }
.pcard--end svg { width:22px; height:22px; }

/* --- 14. Yapışkan görselli anlatım --------------------------------------- */
.story { display:grid; gap:clamp(2rem,4vw,4.5rem); }
@media (min-width:960px) { .story { grid-template-columns:.92fr 1.08fr; } }
.smedia { position:relative; align-self:start; aspect-ratio:4/5; border-radius:var(--r);
  overflow:hidden; background:var(--card); }
@media (min-width:960px) { .smedia { position:sticky; top:calc(50svh - 31vh); height:62svh; aspect-ratio:auto; } }
.smedia figure { position:absolute; inset:0; margin:0; opacity:0; transition:opacity .85s var(--e); }
.smedia figure.is-on { opacity:1; }
.smedia img { width:100%; height:100%; object-fit:cover; }
.smedia::after { content:""; position:absolute; inset:0; pointer-events:none;
  box-shadow:inset 0 0 130px rgb(var(--shade) / .55); }
.step { padding-block:clamp(1.75rem,5.5vh,4rem); border-bottom:1px solid var(--line-s); }
.step:last-child { border-bottom:0; }
.step__n { font:600 var(--s--1)/1 var(--f-b); letter-spacing:.22em;
  color:color-mix(in srgb, var(--accent) 78%, transparent); transition:color .45s var(--e); }
.step h3 { font-size:var(--s-2); margin:.85rem 0 .7rem; color:color-mix(in srgb, var(--head) 52%, transparent); transition:color .45s var(--e); }
.step p { max-width:46ch; color:color-mix(in srgb, var(--body) 72%, transparent); transition:color .45s var(--e); }
.step.is-on .step__n { color:var(--accent); }
.step.is-on h3 { color:var(--head); }
.step.is-on p { color:var(--body); }

/* --- 15. Süreç ----------------------------------------------------------- */
.prc__grid { display:grid; border-top:1px solid var(--line); border-left:1px solid var(--line); }
@media (min-width:640px)  { .prc__grid { grid-template-columns:repeat(2,1fr); } }
@media (min-width:1050px) { .prc__grid { grid-template-columns:repeat(3,1fr); } }
.prc { position:relative; background:var(--bg); padding:clamp(1.6rem,3vw,2.4rem);
  border-right:1px solid var(--line); border-bottom:1px solid var(--line);
  transition:background .4s var(--e); }
.prc:hover { background:var(--card); }
.prc__n { display:block; margin-bottom:1.1rem; font:600 var(--s-3)/.9 var(--f-d);
  color:var(--accent); opacity:.5; font-variant-numeric:tabular-nums; }
.prc h3 { font-size:var(--s-1); font-family:var(--f-b); font-weight:600; letter-spacing:0;
  line-height:1.35; margin-bottom:.6rem; }
.prc p { font-size:var(--s--1); margin:0; }

/* --- 16. Parallax kesit -------------------------------------------------- */
.para { position:relative; z-index:5; height:min(88svh,760px); overflow:hidden;
  display:grid; place-items:center; background:var(--ink-900); color:var(--on-photo-2); }
.para__bg { position:absolute; inset:-16% 0; will-change:transform; }
.para__bg img { width:100%; height:100%; object-fit:cover; }
.para::after { content:""; position:absolute; inset:0; background:var(--veil-para); }
.para__in { position:relative; z-index:2; text-align:center; max-width:62rem; }
.para__in h2 { font-size:var(--s-4); color:var(--on-photo); }
.para__in p { margin-top:1.35rem; font-size:var(--s-1); color:var(--on-photo-2); }

/* --- 17. Referans tablosu ------------------------------------------------ */
.refs__scroll { overflow-x:auto; border-top:1px solid var(--line); }
.refs table { width:100%; min-width:640px; text-align:left; }
.refs--mtx table { min-width:720px; }
.refs--mtx td { vertical-align:top; }
.refs--mtx td:first-child { width:24%; }
.refs--mtx td:nth-child(2) { width:38%; }
.refs th { padding:1.15rem 1.15rem 1rem; font:600 var(--s--2)/1 var(--f-b); letter-spacing:.2em;
  text-transform:uppercase; color:var(--accent); white-space:nowrap; border-bottom:1px solid var(--line); }
.refs td { padding:1.05rem 1.15rem; border-bottom:1px solid var(--line-s);
  font-size:var(--s--1); color:var(--body); }
.refs tbody tr { opacity:0; transform:translateY(12px);
  transition:opacity .6s var(--e), transform .6s var(--e), background .3s var(--e); }
.refs tbody tr.is-in { opacity:1; transform:none; }
.refs tbody tr:hover { background:var(--line-s); }
.refs td:first-child { color:var(--head); font-weight:500; }
.refs td b { color:var(--accent); font-variant-numeric:tabular-nums; }
.refs tfoot td { border-bottom:0; padding-top:1.4rem; font-size:var(--s-0); color:var(--head); font-weight:600; }

/* --- 18. Marka şeridi ---------------------------------------------------- */
.brands { position:relative; z-index:5; background:var(--ink-800); padding-block:clamp(2.25rem,5vw,3.75rem);
  border-block:1px solid var(--line); }
.brands__in { display:grid; gap:1.5rem clamp(2rem,5vw,4rem); align-items:center; }
@media (min-width:900px) { .brands__in { grid-template-columns:auto 1fr; } }
.brands .kicker { margin:0; white-space:nowrap; }
.brands ul { display:flex; flex-wrap:wrap; gap:1rem clamp(1.75rem,4vw,3.5rem); align-items:center; }
.brands li { font:600 clamp(1rem,2.1vw,1.4rem)/1 var(--f-d); letter-spacing:.06em;
  color:var(--body); transition:color .35s var(--e); }
.brands li:hover { color:var(--accent); }

/* --- 19. Video ----------------------------------------------------------- */
.vids { display:grid; gap:clamp(1.25rem,2.5vw,2.25rem);
  grid-template-columns:repeat(auto-fit,minmax(min(100%,360px),1fr)); }
.vitem { margin:0; }
/* Yön karışık (dikey + yatay, kit.videos): yan yana ızgarada yatay üste
   yaslanıp altı boş kalıyordu. Tek sütun; yatay üstte ortalı, dikey altında
   kendi ölçüsünde (.vplayer--dikey) ortalı. Boşluk .vids'inki. */
.vids--karisik { grid-template-columns:1fr; }
.vids--karisik .vitem:not(:has(.vplayer--dikey)) { width:100%; max-width:1040px; margin-inline:auto; }

/* Oynatıcı kabı. Oran satır içi yazılır (kit.videos): sabit 16:9 kutuda dikey
   klip yanlarda siyah bant bırakıyordu. Dikeyde yükseklik sınırlanır, yoksa
   klip ekranı boydan boya kaplıyor. */
.vplayer { position:relative; display:block; width:100%; overflow:hidden;
  border-radius:var(--r); background:var(--navy-d); }
.vplayer--dikey { max-height:80vh; width:auto; margin-inline:auto; }
.vplayer__v, .vplayer__yt, .vplayer iframe {
  position:absolute; inset:0; width:100%; height:100%; border:0; display:block; }
.vplayer__v { object-fit:cover; background:var(--navy-d); }
.vplayer__yt { padding:0; background:none; border:0; cursor:pointer; }
.vplayer__yt img { width:100%; height:100%; object-fit:cover; }
.vplayer__yt picture { position:absolute; inset:0; display:block; }
.vplayer::after { content:""; position:absolute; inset:0; z-index:1; pointer-events:none;
  background:linear-gradient(0deg, rgb(var(--shade) / .82), rgb(var(--shade) / .26));
  transition:opacity .4s var(--e); }
.vplayer.is-playing::after, .vplayer.is-started::after { opacity:0; }
.vplayer:hover::after { opacity:.66; }

/* Büyük oynat düğmesi. JS yokken salt süs: tıklamayı `<video controls>` alır. */
.vplayer__big { position:absolute; inset:0; z-index:3; display:grid; place-items:center;
  width:100%; height:100%; padding:0; border:0; background:none; pointer-events:none;
  cursor:pointer; transition:opacity .25s var(--e); }
.vplayer.is-enhanced .vplayer__big { pointer-events:auto; }
.vplayer.is-started .vplayer__big { opacity:0; pointer-events:none; }
.vplayer__big i { display:grid; place-items:center; width:80px; height:80px; border-radius:50%;
  border:1px solid var(--gold); background:rgb(var(--shade) / .5);
  -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px);
  transition:transform .2s var(--e), background .2s var(--e); }
.vplayer__big:hover i, .vplayer__big:focus-visible i {
  transform:scale(1.08); background:rgb(200 180 137 / .55); }
.vplayer__big svg { width:20px; height:20px; color:#fff; margin-left:3px; }
.vplayer__cap { position:absolute; left:0; right:0; bottom:0; z-index:2; padding:1.25rem 1.45rem;
  text-align:left; font:600 var(--s-0)/1.3 var(--f-b); color:#fff;
  transition:opacity .25s var(--e); pointer-events:none; }
.vplayer.is-started .vplayer__cap { opacity:0; }

/* --- 19b. Oynatıcı kontrolleri (JS kurar) -------------------------------- */
/* İlerleme çubuğu kendi satırında ve tam genişlikte; düğmeler altında.
   Tek satırdayken çubuk düğmelerden arta kalanı alıyordu — dar kapta
   tutulamayacak kadar kısalıyordu. */
.vctl { position:absolute; left:0; right:0; bottom:0; z-index:4;
  display:flex; flex-direction:column; gap:.15rem; padding:2.5rem .9rem .6rem;
  background:linear-gradient(0deg, rgb(var(--shade) / .9) 22%, rgb(var(--shade) / 0));
  opacity:0; transform:translateY(6px); transition:opacity .18s var(--e), transform .18s var(--e); }
.vctl__row { display:flex; align-items:center; gap:.5rem; }
.vctl__sep { flex:1 1 auto; }
.vplayer.is-enhanced:not(.is-started) .vctl { opacity:0; pointer-events:none; }
.vplayer.is-started .vctl, .vplayer.is-started.is-idle .vctl:hover { opacity:1; transform:none; }
.vplayer.is-started.is-idle .vctl { opacity:0; transform:translateY(6px); }
.vplayer.is-started:focus-within .vctl { opacity:1; transform:none; }
.vctl button { display:grid; place-items:center; min-width:44px; min-height:44px;
  padding:0; border:0; border-radius:var(--r); background:none; color:#fff; cursor:pointer;
  transition:color .15s var(--e); }
.vctl button:hover, .vctl button:focus-visible { color:var(--gold); }
.vctl button svg { width:19px; height:19px; }
.vctl__time { font:400 var(--s--1)/1 var(--f-b); color:#E6EAEE;
  font-variant-numeric:tabular-nums; letter-spacing:.04em; white-space:nowrap; }
.vctl__bar { position:relative; width:100%; height:20px; display:grid; align-content:center;
  cursor:pointer; touch-action:none; }
.vctl__bar i { position:absolute; left:0; right:0; height:3px; border-radius:2px;
  background:rgb(255 255 255 / .28); transition:height .15s var(--e); }
.vctl__buf { position:absolute; left:0; height:3px; width:0; border-radius:2px;
  background:rgb(255 255 255 / .45); transition:height .15s var(--e); }
.vctl__fill { position:absolute; left:0; height:3px; width:0; border-radius:2px;
  background:var(--gold); transition:height .15s var(--e); }
.vctl__bar:hover i, .vctl__bar:hover .vctl__buf, .vctl__bar:hover .vctl__fill,
.vctl__bar:focus-visible i, .vctl__bar:focus-visible .vctl__buf, .vctl__bar:focus-visible .vctl__fill { height:5px; }
.vctl__knob { position:absolute; top:50%; width:11px; height:11px; margin-left:-5px;
  border-radius:50%; background:var(--gold); transform:translateY(-50%) scale(0);
  transition:transform .15s var(--e); }
.vctl__bar:hover .vctl__knob, .vctl__bar:focus-visible .vctl__knob { transform:translateY(-50%) scale(1); }
.vctl__vol { display:flex; align-items:center; }
.vctl__vol input { width:0; opacity:0; accent-color:var(--gold); cursor:pointer;
  transition:width .18s var(--e), opacity .18s var(--e), margin .18s var(--e); }
.vctl__vol:hover input, .vctl__vol:focus-within input { width:64px; opacity:1; margin-left:.35rem; }
@media (hover:none) { .vctl__vol input { display:none; } }
.vplayer__v:focus-visible, .vctl__bar:focus-visible { outline:2px solid var(--gold); outline-offset:2px; }

.vitem figcaption { margin-top:.75rem; text-align:right; }
.vitem figcaption a { display:inline-flex; align-items:center; gap:.4rem;
  font:600 var(--s--1)/1 var(--f-b); letter-spacing:.12em; text-transform:uppercase; color:var(--accent); }
.vitem figcaption svg { width:1em; height:1em; }
.vitem figcaption a:hover { text-decoration:underline; text-underline-offset:4px; }

/* --- 20. Kapanış çağrısı ------------------------------------------------- */
.cta { position:relative; z-index:5; background:var(--cta-bg); padding-block:clamp(4rem,10vw,8rem); overflow:hidden; }
.cta::before { content:""; position:absolute; inset:0;
  background:radial-gradient(66% 100% at 50% 0%, rgb(200 180 137 / .17), transparent 68%); }
.cta__in { position:relative; z-index:2; text-align:center; }
.cta h2 { font-size:var(--s-4); }
.cta p { max-width:54ch; margin:1.3rem auto 0; font-size:var(--s-1); color:var(--cta-fg-2); }
.cta .btn-row { justify-content:center; margin-top:2.5rem; }

/* --- 21. Footer ---------------------------------------------------------- */
.ftr { position:relative; z-index:5; background:var(--ftr-bg); padding-top:clamp(3rem,6vw,5rem);
  font-size:var(--s--1); color:var(--ftr-fg); border-top:1px solid var(--line); }
.ftr__top { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between;
  gap:1.25rem 2rem; padding-bottom:clamp(2rem,4vw,3rem); border-bottom:1px solid var(--line-s); }
.ftr__logo { --logo-f:18px; }
.ftr__claim { margin:0; font:600 clamp(1.1rem,2.6vw,1.6rem)/1 var(--f-d);
  letter-spacing:.02em; color:var(--accent); }
.ftr__grid { display:grid; gap:2.25rem; padding-block:clamp(2.25rem,4.5vw,3.25rem); }
@media (min-width:700px)  { .ftr__grid { grid-template-columns:repeat(2,1fr); } }
@media (min-width:1050px) { .ftr__grid { grid-template-columns:1.35fr 1fr 1fr 1.15fr; } }
.ftr__col h3 { font:600 var(--s--2)/1 var(--f-b); letter-spacing:.2em; text-transform:uppercase;
  color:var(--accent); margin:0 0 1.15rem; }
.ftr__col li + li { margin-top:.65rem; }
.ftr__col a { transition:color .25s var(--e); }
.ftr__col a:hover { color:var(--accent); }
.ftr__col--wide p { max-width:34ch; }
.ftr__soc { display:flex; gap:.75rem; margin-top:1.4rem; }
.ftr__soc a { display:grid; place-items:center; width:38px; height:38px; border:1px solid var(--line);
  border-radius:50%; transition:all .3s var(--e); }
.ftr__soc a:hover { color:var(--navy-d); background:var(--gold); border-color:var(--gold); }
.ftr__soc svg { width:16px; height:16px; }
.ftr__base { display:flex; flex-wrap:wrap; gap:.6rem 1.5rem; justify-content:space-between;
  padding-block:1.5rem; border-top:1px solid var(--line-s); font-size:.78rem; }
.ftr__legal { color:var(--ftr-mute); }

/* --- 22. Yüzen düğmeler -------------------------------------------------- */
.fab { position:fixed; z-index:160; display:grid; place-items:center; width:52px; height:52px;
  border-radius:50%; transition:transform .3s var(--e), opacity .3s var(--e); }
.fab:hover { transform:scale(1.08); }
.fab--wa { right:clamp(.9rem,2.5vw,1.75rem); bottom:clamp(.9rem,2.5vw,1.75rem);
  background:#25D366; color:#fff; box-shadow:0 6px 24px rgb(37 211 102 / .38); }
.fab--wa svg { width:26px; height:26px; }
.fab--top { right:clamp(.9rem,2.5vw,1.75rem); bottom:calc(clamp(.9rem,2.5vw,1.75rem) + 62px);
  background:var(--fab-bg); backdrop-filter:blur(10px); color:var(--fab-fg);
  border:1px solid var(--line); opacity:0; pointer-events:none; }
.fab--top.is-on { opacity:1; pointer-events:auto; }
.fab--top svg { width:19px; height:19px; }

/* --- 23. İki sütun / uzun metin ----------------------------------------- */
.split { display:grid; gap:clamp(2rem,4.5vw,4.5rem); }
@media (min-width:960px) { .split { grid-template-columns:.85fr 1.15fr; } }
@media (min-width:960px) { .split--sticky .split__side { position:sticky; top:calc(var(--hdr) + 3rem); align-self:start; } }
.split__side h2 { font-size:var(--s-3); }
.prose__b + .prose__b { margin-top:clamp(2rem,4vw,3rem); }
.prose__b h3 { font-size:var(--s-2); margin-bottom:1rem; }
.prose__b p + p { margin-top:1.1rem; }
.prose__b p { font-size:var(--s-0); }

/* --- 24. Proje ızgarası + filtreler -------------------------------------- */
.filters { display:flex; flex-wrap:wrap; gap:.55rem; margin-bottom:clamp(2rem,4vw,3rem); }
.chip { padding:.62rem 1.15rem; border:1px solid var(--line); border-radius:100px;
  font:600 var(--s--1)/1 var(--f-b); letter-spacing:.1em; text-transform:uppercase; color:var(--body);
  transition:all .3s var(--e); }
.chip:hover { border-color:var(--accent); color:var(--accent); }
.chip.is-on { background:var(--accent); border-color:var(--accent); color:var(--white); }
.gcards { display:grid; gap:clamp(1.1rem,2.2vw,1.85rem);
  grid-template-columns:repeat(auto-fill,minmax(min(100%,330px),1fr)); }
.gcards--3 { grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr)); }
.gcard { position:relative; background:var(--card); border:1px solid var(--line);
  border-radius:var(--r); overflow:hidden; transition:transform .45s var(--e), box-shadow .45s var(--e); }
.gcard:hover { transform:translateY(-5px); box-shadow:0 18px 44px rgb(var(--shade) / .18); }

/* Izgaranın kapanış karosu: son satırdaki boşluğu doldurur ve detay sayfası
   olmayan taahhüt işlerinin listesine götürür. Karo değil, çerçeve. */
.gcard--end {
  display:grid; place-content:center; justify-items:center; gap:.5rem;
  min-height:clamp(260px,26vw,340px); padding:2rem 1.5rem; text-align:center;
  background:transparent; border-style:dashed; color:var(--accent);
  transition:background .35s var(--e), border-color .35s var(--e);
}
.gcard--end:hover { background:var(--ghost-hover); border-color:var(--accent); transform:none; box-shadow:none; }
.gcard--end__n { font:600 var(--s-1)/1.15 var(--f-d); letter-spacing:.01em;
  font-variant-numeric:lining-nums; font-feature-settings:"lnum" 1; }
.gcard--end__t { font:500 var(--s--2)/1 var(--f-b); letter-spacing:.2em;
  text-transform:uppercase; color:var(--body); }
.gcard--end svg { width:20px; height:20px; margin-top:.35rem; }
.gcard__m { position:relative; aspect-ratio:4/3; overflow:hidden; }
.gcard__m img { width:100%; height:100%; object-fit:cover; transition:transform 1s var(--e); }
.gcard:hover .gcard__m img { transform:scale(1.05); }
.gcard__b { position:relative; padding:clamp(1.25rem,2.4vw,1.75rem); }
.gcard__b .pcard__loc { color:var(--accent); }
.gcard h3 { font-size:var(--s-2); margin-bottom:.55rem; }
.gcard__b p { font-size:var(--s--1); margin-bottom:1rem; }
.gcard .pcard__meta { border-top-color:var(--line); color:var(--body); }
.gcard .pcard__meta b { color:var(--accent); }
.gcard__go { position:absolute; right:clamp(1.25rem,2.4vw,1.75rem); top:clamp(1.25rem,2.4vw,1.75rem);
  color:var(--accent); opacity:0; transform:translate(-5px,5px); transition:all .4s var(--e); }
.gcard:hover .gcard__go { opacity:1; transform:none; }
.gcard__go svg { width:19px; height:19px; }
.gcard a::after { content:""; position:absolute; inset:0; z-index:3; }
.gcard.is-hide { display:none; }
.empty { padding:3rem 0; text-align:center; color:var(--body); }

/* --- 25. Galeri ---------------------------------------------------------- */
.shots { display:grid; gap:clamp(.5rem,1.2vw,.9rem);
  grid-template-columns:repeat(auto-fill,minmax(min(47%,215px),1fr)); }
.shot { position:relative; display:block; aspect-ratio:4/3; overflow:hidden;
  border-radius:var(--r); background:var(--card); }
.shot img { width:100%; height:100%; object-fit:cover; transition:transform .9s var(--e), filter .4s var(--e); }
.shot::after { content:""; position:absolute; inset:0; background:rgb(var(--shade) / .12);
  opacity:0; transition:opacity .4s var(--e); }
.shot:hover img { transform:scale(1.05); }
.shot:hover::after { opacity:1; }
.shot.is-hide { display:none; }
.strip { display:flex; gap:clamp(.6rem,1.4vw,1.1rem); overflow-x:auto; scroll-snap-type:x mandatory;
  padding-inline:var(--gut); padding-bottom:1.25rem; }
.shot--w { flex:none; width:min(78vw,380px); scroll-snap-align:start; }

/* --- 26. Lightbox -------------------------------------------------------- */
.lb { position:fixed; inset:0; z-index:300; display:grid; place-items:center;
  background:rgb(6 11 17 / .96); backdrop-filter:blur(6px); padding:clamp(1rem,4vw,3rem);
  opacity:0; transition:opacity .3s var(--e); }
.lb[hidden] { display:none; }
.lb.is-on { opacity:1; }
.lb__stage { max-width:min(100%,1200px); max-height:80svh; }
.lb__img { max-width:100%; max-height:80svh; object-fit:contain; border-radius:var(--r); }
.lb__cap { position:absolute; left:0; right:0; bottom:clamp(1rem,3vw,2rem); margin:0; text-align:center;
  font:500 var(--s--1)/1.5 var(--f-b); letter-spacing:.1em; text-transform:uppercase; color:#9AA7B4; }
.lb__b { position:absolute; display:grid; place-items:center; width:52px; height:52px; border-radius:50%;
  border:1px solid rgb(255 255 255 / .22); color:#fff; background:rgb(255 255 255 / .05);
  transition:all .3s var(--e); }
.lb__b:hover { background:var(--gold); border-color:var(--gold); color:var(--navy-d); }
.lb__b svg { width:20px; height:20px; }
.lb__prev { left:clamp(.5rem,2vw,2rem); top:50%; transform:translateY(-50%); }
.lb__next { right:clamp(.5rem,2vw,2rem); top:50%; transform:translateY(-50%); }
.lb__x { right:clamp(.5rem,2vw,2rem); top:clamp(.5rem,2vw,2rem); }

/* --- 27. İletişim -------------------------------------------------------- */
.contact { display:grid; gap:clamp(2.25rem,5vw,4.5rem); }
@media (min-width:960px) { .contact { grid-template-columns:.9fr 1.1fr; } }
.contact h2 { font-size:var(--s-2); margin-bottom:1.75rem; }
.contact__form { background:var(--card); border:1px solid var(--line); border-radius:var(--r);
  padding:clamp(1.5rem,3.4vw,2.75rem); }
.cinfo { margin:0; display:grid; gap:1.5rem; }
.cinfo__i { display:flex; gap:1.1rem; align-items:flex-start; }
.cinfo__i > svg { flex:none; width:20px; height:20px; margin-top:.28rem; color:var(--accent); }
.cinfo dt { font:600 var(--s--2)/1 var(--f-b); letter-spacing:.19em; text-transform:uppercase;
  color:var(--accent); margin-bottom:.45rem; }
.cinfo dd { margin:0; font-size:var(--s-0); color:var(--head); }
.cinfo dd a:hover { color:var(--accent); }

.form__row { display:grid; gap:1.1rem; }
@media (min-width:560px) { .form__row { grid-template-columns:1fr 1fr; } }
.field { display:block; margin:0 0 1.1rem; }
.field label { display:block; margin-bottom:.5rem; font:600 var(--s--2)/1 var(--f-b);
  letter-spacing:.16em; text-transform:uppercase; color:var(--body); }
.field input, .field textarea, .field select {
  width:100%; padding:.9rem 1rem; font:400 var(--s-0)/1.5 var(--f-b); color:var(--head);
  background:var(--bg); border:1px solid var(--line); border-radius:var(--r);
  transition:border-color .25s var(--e), background .25s var(--e);
}
.field textarea { resize:vertical; min-height:7rem; }
.field input:focus, .field textarea:focus, .field select:focus { border-color:var(--accent); outline:none; }
/* B10 06.09.2026 · erişilebilirlik: yukarıdaki kural genel
   :focus-visible halkasını (satır 225) iptal ediyordu ve klavyeyle
   gezene tek gösterge olarak kenarlık rengi kalıyordu — mevcut kenarlık
   beyaz üstünde 1,44:1, WCAG 1.4.11'in 3:1 eşiğinin çok altında.
   Halka yalnız klavye odağında geri geliyor, farede çıkmıyor.
   --accent: açık temada #7A6539 (beyaz üstünde 5,60:1, krem üstünde
   5,10:1), koyu temada #C8B489 (lacivert üstünde 7,20:1). */
.field input:focus-visible, .field textarea:focus-visible,
.field select:focus-visible { outline:2px solid var(--accent); outline-offset:2px; }
.sel { position:relative; display:block; }
.sel::after { content:""; position:absolute; right:1.1rem; top:50%; width:7px; height:7px;
  margin-top:-5px; border-right:1.5px solid var(--body); border-bottom:1.5px solid var(--body);
  transform:rotate(45deg); pointer-events:none; }
.field select { appearance:none; padding-right:2.5rem; }
.field small { display:block; min-height:1.2em; margin-top:.35rem; font-size:var(--s--2); color:var(--err); }
.field.is-bad input, .field.is-bad textarea { border-color:var(--err); }
.form__status { margin-bottom:1rem; font-size:var(--s--1); }
.form__status.is-ok { color:var(--ok); } .form__status.is-bad { color:var(--err); }
.form__note { margin-top:1.1rem; font-size:var(--s--2); color:var(--body); }
.mapband { position:relative; z-index:5; }
.map { width:100%; aspect-ratio:16/6; min-height:320px; border:0; background:var(--ink-700);
  filter:grayscale(1) contrast(1.06); }
.map-note { display:inline-flex; align-items:center; gap:.4rem; margin-top:.9rem;
  font:600 var(--s--1)/1 var(--f-b); letter-spacing:.12em; text-transform:uppercase; color:var(--accent); }
.map-note svg { width:1em; height:1em; }
.map-note:hover { text-decoration:underline; text-underline-offset:4px; }
.mapband .map-note { position:absolute; right:var(--gut); bottom:1.1rem; padding:.6rem 1rem;
  background:rgb(var(--shade) / .8); border:1px solid var(--line); border-radius:100px; color:#fff; }
.map--r { aspect-ratio:16/11; min-height:0; border-radius:var(--r); }

/* --- 28. Proje detayı ---------------------------------------------------- */
.subnav { position:sticky; top:calc(var(--hdr) + 2px); z-index:120; background:var(--hdr-bg);
  transition:top .45s var(--e);
  backdrop-filter:blur(14px); border-bottom:1px solid var(--line); }
.subnav__in { display:flex; gap:clamp(1.1rem,2.4vw,2.25rem); overflow-x:auto;
  padding-block:1.1rem; scrollbar-width:none; }
.subnav__in::-webkit-scrollbar { display:none; }
.subnav a { position:relative; white-space:nowrap; padding-bottom:.35rem; color:var(--hdr-fg);
  font:500 var(--nav-fs)/1 var(--f-b); letter-spacing:.17em; text-transform:uppercase;
  transition:color .3s var(--e); }
.subnav a::after { content:""; position:absolute; left:0; bottom:0; width:0; height:1px;
  background:var(--accent); transition:width .35s var(--e); }
.subnav a:hover { color:var(--hdr-fg-hi); }
.subnav a.is-on { color:var(--accent); } .subnav a.is-on::after { width:calc(100% - .17em); }
body.is-tucked .subnav { top:0; }

.ovw { display:grid; gap:clamp(2rem,4.5vw,4rem); align-items:start; }
@media (min-width:960px) { .ovw { grid-template-columns:1.15fr .85fr; } }
.ovw__txt h2 { font-size:var(--s-3); margin-bottom:1.5rem; }
.ovw__txt p { font-size:var(--s-1); }
.ovw__facts { border:1px solid var(--line); border-radius:var(--r);
  padding:clamp(1.35rem,2.6vw,2rem); background:var(--card); }
.ovw__facts table { width:100%; }
.ovw__facts td, .ovw__facts th { padding:.72rem 0; border-bottom:1px solid var(--line-s); font-size:var(--s--1); vertical-align:top; }
.ovw__facts tr:last-child td, .ovw__facts tr:last-child th { border-bottom:0; }
/* C3 27.09.2026 · erişilebilirlik: etiket hücresi artık <th scope="row">
   (WCAG 1.3.1 — künye 10-12 satır, ekran okuyucu değeri bağlamsız okuyordu).
   Tarayıcı <th>'yi kalın ve ortalı basar; ikisi de inherit ile geri alınıyor,
   böylece hücre eskisi gibi <td> görünür. Görünüm değişmemeli. */
.ovw__facts th { color:var(--body); padding-right:1rem;
  font-weight:inherit; text-align:inherit; }
.ovw__facts td:last-child { color:var(--head); text-align:right; font-weight:500; }
.ovw__facts td.is-tbd { color:var(--body); opacity:.75; font-style:italic; }

.feats { display:grid; border-top:1px solid var(--line); border-left:1px solid var(--line); }
@media (min-width:640px)  { .feats { grid-template-columns:repeat(2,1fr); } }
@media (min-width:1050px) { .feats { grid-template-columns:repeat(3,1fr); } }
.feat { background:var(--bg); padding:clamp(1.6rem,3vw,2.4rem);
  border-right:1px solid var(--line); border-bottom:1px solid var(--line);
  transition:background .4s var(--e); }
.feat:hover { background:var(--card); }
.feat__n { display:block; margin-bottom:1rem; font:600 var(--s--1)/1 var(--f-b);
  letter-spacing:.2em; color:var(--accent); }
.feat h3 { font-size:var(--s-1); font-family:var(--f-b); font-weight:600; letter-spacing:0;
  line-height:1.35; margin-bottom:.6rem; }
.feat p { font-size:var(--s--1); margin:0; }

.loc { display:grid; gap:clamp(2rem,4vw,3.5rem); align-items:start; }
@media (min-width:960px) { .loc { grid-template-columns:1fr 1fr; } }
.loc__list li { display:flex; gap:1.1rem; padding-block:1.25rem; border-bottom:1px solid var(--line-s); }
.loc__list li:last-child { border-bottom:0; }
.loc__list li > span { flex:none; display:grid; place-items:center; width:38px; height:38px;
  border:1px solid var(--line); border-radius:50%; color:var(--accent); }
.loc__list svg { width:17px; height:17px; }
.loc__list h3 { font-size:var(--s-1); font-family:var(--f-b); font-weight:600; letter-spacing:0;
  line-height:1.35; margin-bottom:.35rem; }
.loc__list p { font-size:var(--s--1); margin:0; }

/* --- 29. Beliriş -------------------------------------------------------- */
.up { opacity:0; transform:translateY(24px); transition:opacity .85s var(--e), transform .85s var(--e); }
.up.is-in { opacity:1; transform:none; }
.up[data-d="1"] { transition-delay:.1s; } .up[data-d="2"] { transition-delay:.19s; }
.up[data-d="3"] { transition-delay:.28s; } .up[data-d="4"] { transition-delay:.36s; }
.wipe { clip-path:inset(0 0 100% 0); transition:clip-path 1.15s var(--e-out); }
.wipe.is-in { clip-path:inset(0 0 0 0); }
.stagger > * { opacity:0; transform:translateY(14px); transition:opacity .6s var(--e), transform .6s var(--e); }
.stagger.is-in > * { opacity:1; transform:none; }
.stagger.is-in > *:nth-child(1) { transition-delay:.04s; }
.stagger.is-in > *:nth-child(2) { transition-delay:.09s; }
.stagger.is-in > *:nth-child(3) { transition-delay:.14s; }
.stagger.is-in > *:nth-child(4) { transition-delay:.19s; }
.stagger.is-in > *:nth-child(5) { transition-delay:.24s; }
.stagger.is-in > *:nth-child(6) { transition-delay:.29s; }

/* --- 30. Hareket azaltma ------------------------------------------------- */
@media (prefers-reduced-motion:reduce) {
  html { scroll-behavior:auto; }
  *,*::before,*::after { animation-duration:.001ms !important; animation-iteration-count:1 !important;
    transition-duration:.001ms !important; }
  .intro-veil { display:none !important; }
  .up,.wipe,.stagger>*,.refs tbody tr { opacity:1 !important; transform:none !important; clip-path:none !important; }
  .reveal-lines { clip-path:none !important; }
  .hero h1 .ln > span { transform:none !important; }
  .hero__sub,.hero__pill,.hero__btns,.hero__row { opacity:1 !important; transform:none !important; }
  .stage { height:auto; }
  .stage__pin { position:static; min-height:100svh; }
  .rail { height:auto !important; }
  .rail__pin { position:static; height:auto; padding-block:var(--pad); }
  .rail__track { overflow-x:auto; transform:none !important; padding-bottom:1rem; }
  .smedia { position:static; }
  .smedia figure { position:relative; opacity:1; }
  .smedia figure + figure { display:none; }
  .step h3 { color:var(--head); } .step p { color:var(--body); } .step__n { color:var(--accent); }
  .para__bg { transform:none !important; }
  .ticker__track { transform:none !important; }
}

/* Bal küpü: ekran okuyucudan ve gözden gizli, ama bota görünür bir alan.
   display:none KULLANILMAZ — botlar onu atlar, ekranda yer kaplamayan
   konumlandırma ise doldurulur. */
.hp{position:absolute!important;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden}

/* Gönderim başarısızsa durum satırının içine düşen WhatsApp çıkışı. */
.form__wa{text-decoration:underline;white-space:nowrap}

/* --- Çözüm ortakları: çok markalı düzen ve logo desteği ------------------ */
/* 8'den fazla marka varsa etiketi üste al; yan yana iki sütun sıkışıyor. */
@media (min-width:900px) { .brands--cok .brands__in { grid-template-columns:1fr; } }
.brands--cok .kicker { white-space:normal; }
.brands--cok ul { gap:1rem clamp(1.25rem,2.6vw,2.25rem); }
.brands--cok li { font-size:clamp(.9rem,1.5vw,1.1rem); }

/* Logolar tek renk beyaz: 24 farklı markanın kendi renkleri yan yana
   kirli görünüyor, ayrıca şerit koyu. Üstüne gelince tam opak olur. */
.brands__logo { display:flex; align-items:center; }
.brands__logo img { height:clamp(1.5rem,2.6vw,2rem); width:auto; max-width:9rem;
  object-fit:contain; filter:brightness(0) invert(1); opacity:.7;
  transition:opacity .35s var(--e); }
.brands__logo:hover img { opacity:1; }
@media (prefers-reduced-motion:reduce) { .brands__logo img { transition:none; } }