@import url("/fonts/fonts.css");

/* ============================================================
   LINOVA İnşaat & Mimarlık — "GECE & ALTIN"
   Logo kimliğinden türetildi: derin lacivert + dövme altın,
   Roman kapital serif, sinematik tam-kanama mimarlık fotoğrafı.
   Yuser Digital · 2026
   ============================================================ */

:root{
  /* Gece — logo zemininden */
  --night:     #0C1420;
  --night-2:   #111C2C;
  --night-3:   #17253A;
  --night-4:   #1E3049;

  /* Altın — logo metalinden */
  --gold:      #C9A24B;
  --gold-lt:   #E4CB8C;
  --gold-dk:   #7F6226;
  --gold-ghost: rgba(201,162,75,.16);

  /* Işık yüzeyler */
  --ivory:     #F5F2EB;
  --ivory-2:   #EBE6DB;
  --ivory-3:   #DED7C8;

  /* Metin */
  --tx:        #14181F;
  --tx-soft:   #4A515C;
  --tx-faint:  #646C7C;
  --on-night:      #F1EEE7;
  --on-night-soft: rgba(241,238,231,.62);

  --line:        rgba(20,24,31,.14);
  --line-2:      rgba(20,24,31,.26);
  --line-gold:   rgba(201,162,75,.34);
  --line-night:  rgba(241,238,231,.16);

  --f-disp: 'Marcellus', 'Times New Roman', serif;
  --f-body: 'Barlow', 'Segoe UI', system-ui, sans-serif;
  --f-mono: 'IBM Plex Mono', ui-monospace, monospace;

  --gut: clamp(1.25rem, 4vw, 4rem);
  --maxw: 1600px;
  --sect: clamp(4.5rem, 10vw, 9.5rem);

  --ease: cubic-bezier(.22,.61,.36,1);
  --ease-out: cubic-bezier(.16,1,.3,1);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%; scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

body{
  margin:0; background:var(--ivory); color:var(--tx);
  font-family:var(--f-body); font-size:clamp(1rem,.95rem + .25vw,1.09rem);
  line-height:1.68; font-weight:400; -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

img,video{max-width:100%; display:block}
svg{display:block; flex:0 0 auto}
a{color:inherit}

/* ---------- Ölçü ---------- */
.wrap{max-width:var(--maxw); margin-inline:auto; padding-inline:var(--gut)}
.wrap--narrow{max-width:1080px}
.rule{height:1px; background:var(--line); border:0; margin:0}
.grid12{display:grid; grid-template-columns:repeat(12,1fr); gap:var(--gut)}
.grid12>*{min-width:0}
@media (max-width:900px){
  .grid12{grid-template-columns:1fr}
  .grid12>*{grid-column:1 / -1 !important}
}

/* ---------- Tipografi ---------- */
/* Marcellus'un iniş boyları (g y p ş ç) uzun: satır yüksekliği 1.06 iken
   mürekkep satır kutusunun ~5px altına taşıyordu ve .mask-line'ın
   overflow:hidden'ı harflerin altını kesiyordu. Ölçülüp düzeltildi. */
h1,h2,h3{font-family:var(--f-disp); font-weight:400; letter-spacing:-.005em; line-height:1.16; margin:0 0 .55em; text-wrap:balance}
h1{font-size:clamp(2.35rem,1.3rem + 4.4vw,5.2rem); line-height:1.13}
h2{font-size:clamp(1.85rem,1.1rem + 2.9vw,3.5rem)}
h3{font-size:clamp(1.2rem,1rem + .9vw,1.72rem); line-height:1.22}
h4{font-family:var(--f-body); font-weight:600; font-size:1.02rem; letter-spacing:-.01em; margin:0 0 .5em}
p{margin:0 0 1.15em; max-width:72ch}
strong{font-weight:600}
em{font-style:italic}

/* Altın kapital etiket */
.tlab{
  font-family:var(--f-mono); font-size:.7rem; font-weight:500;
  letter-spacing:.26em; text-transform:uppercase; color:var(--gold-dk);
  display:inline-flex; align-items:center; gap:.85em; margin-bottom:1.1rem;
}
.tlab::before{content:""; width:2.2rem; height:1px; background:var(--gold); opacity:.8}
.on-night .tlab,.hero .tlab{color:var(--gold-lt)}
.on-night .tlab::before,.hero .tlab::before{background:var(--gold)}

.lede{font-family:var(--f-body); font-size:clamp(1.06rem,.98rem + .5vw,1.35rem); line-height:1.6; color:var(--tx-soft); max-width:58ch; font-weight:300}
.on-night .lede{color:var(--on-night-soft)}

/* AEO cevap bloğu */
.answer{
  border-left:2px solid var(--gold); padding:.2rem 0 .2rem 1.5rem;
  font-size:clamp(1.04rem,.98rem + .45vw,1.26rem); line-height:1.6;
  color:var(--tx); max-width:64ch; font-weight:400; margin:0 0 2rem;
}
.on-night .answer{color:var(--on-night)}

/* Altın ince ızgara dokusu */
.gridtex{position:relative}
.gridtex::before{
  content:""; position:absolute; inset:0; pointer-events:none; z-index:0;
  background-image:
    linear-gradient(to right, var(--gold-ghost) 1px, transparent 1px),
    linear-gradient(to bottom, var(--gold-ghost) 1px, transparent 1px);
  background-size:clamp(52px,6vw,92px) clamp(52px,6vw,92px);
  mask-image:radial-gradient(120% 90% at 50% 0%, #000 18%, transparent 76%);
}
.gridtex>*{position:relative; z-index:1}

/* ---------- Bölümler ---------- */
.sect{padding-block:var(--sect); position:relative}
.sect--tight{padding-block:clamp(3rem,6vw,5rem)}
.on-night{background:var(--night); color:var(--on-night)}
.on-night h1,.on-night h2,.on-night h3,.on-night h4{color:var(--on-night)}
.on-night .rule{background:var(--line-night)}
.on-ivory2{background:var(--ivory-2)}

.shead{max-width:60ch; margin-bottom:clamp(2.25rem,5vw,4rem)}
.shead--split{display:grid; grid-template-columns:1fr auto; gap:2rem; align-items:end; max-width:none}
@media (max-width:800px){.shead--split{grid-template-columns:1fr; align-items:start}}

/* ---------- Navigasyon ---------- */
.nav{
  position:sticky; top:0; z-index:200;
  background:color-mix(in srgb, var(--night) 92%, transparent);
  backdrop-filter:blur(16px) saturate(1.2);
  border-bottom:1px solid var(--line-night);
  color:var(--on-night);
}
.nav__in{display:flex; align-items:center; gap:clamp(1rem,3vw,2.5rem); height:clamp(64px,7vw,86px)}
.brand{display:flex; align-items:center; gap:.8rem; text-decoration:none; flex-shrink:0}
/* İşaret currentColor ile boyanır — bağlama göre renk verilebilir */
.brand__mark{width:40px; height:39px; flex-shrink:0; color:var(--gold)}
.brand__lk{display:block}
.brand__tx{font-family:var(--f-disp); font-size:1.34rem; letter-spacing:.17em; line-height:1; color:var(--gold-lt); display:block}
/* Alt satır logodaki gibi iki yandan ince kural çizgisiyle */
.brand__sub{
  font-family:var(--f-mono); font-size:.5rem; letter-spacing:.26em; color:var(--on-night-soft);
  text-transform:uppercase; display:flex; align-items:center; gap:.5em; margin-top:6px; white-space:nowrap;
}
.brand__sub::before,.brand__sub::after{content:""; height:1px; flex:1 1 auto; min-width:8px; background:var(--line-gold)}
.brand--lg .brand__mark{width:64px; height:62px}
.brand--lg .brand__tx{font-size:1.62rem}
.nav__links{display:flex; gap:clamp(.9rem,1.9vw,2rem); margin-left:auto; align-items:center}
.nav__links a{
  text-decoration:none; font-size:.87rem; font-weight:500; letter-spacing:.04em;
  text-transform:uppercase; padding:.4rem 0; position:relative; white-space:nowrap;
  color:var(--on-night-soft); transition:color .3s var(--ease);
}
.nav__links a:hover,.nav__links a[aria-current="page"]{color:var(--on-night)}
.nav__links a::after{content:""; position:absolute; left:0; right:100%; bottom:0; height:1px; background:var(--gold); transition:right .4s var(--ease-out)}
.nav__links a:hover::after,.nav__links a[aria-current="page"]::after{right:0}
.nav__cta{
  display:inline-flex; align-items:center; gap:.55rem; text-decoration:none;
  padding:.86rem 1.5rem; font-size:.75rem; font-weight:600; letter-spacing:.15em;
  text-transform:uppercase; white-space:nowrap; line-height:1;
}
.nav__cta svg{transition:transform .35s var(--ease-out)}
.nav__cta:hover svg{transform:translateX(4px)}
.nav__cta::after{display:none !important}
.nav__cta svg{width:13px; height:13px}
.nav__burger{display:none; margin-left:auto; background:none; border:1px solid var(--line-night); width:46px; height:40px; cursor:pointer; align-items:center; justify-content:center; flex-direction:column; gap:5px; padding:0}
.nav__burger span{display:block; width:18px; height:1px; background:var(--gold-lt); transition:transform .3s var(--ease), opacity .2s}
@media (max-width:1120px){
  .nav__links{
    position:fixed; inset:clamp(64px,7vw,86px) 0 auto 0; background:var(--night);
    flex-direction:column; align-items:flex-start; padding:1.5rem var(--gut) 2.5rem; gap:0;
    border-bottom:1px solid var(--line-night); transform:translateY(-10px);
    opacity:0; visibility:hidden; transition:.32s var(--ease);
    max-height:calc(100dvh - 86px); overflow-y:auto;
  }
  .nav__links[data-open="true"]{transform:none; opacity:1; visibility:visible}
  .nav__links a{font-family:var(--f-disp); font-size:1.42rem; letter-spacing:.06em; text-transform:none; padding:.7rem 0; width:100%; border-bottom:1px solid var(--line-night); color:var(--on-night)}
  .nav__links a::after{display:none}
  .nav__links .nav__cta{margin-top:1.3rem; border-bottom:1px solid var(--line-gold); justify-content:center; font-size:.85rem; font-family:var(--f-body); letter-spacing:.14em; text-transform:uppercase}
  .nav__burger{display:flex}
  .nav__burger[aria-expanded="true"] span:nth-child(1){transform:translateY(6px) rotate(45deg)}
  .nav__burger[aria-expanded="true"] span:nth-child(2){opacity:0}
  .nav__burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}
}

/* ---------- Butonlar ---------- */
.btn{
  display:inline-flex; align-items:center; gap:.75rem; text-decoration:none;
  font-family:var(--f-body); font-weight:500; font-size:.82rem; letter-spacing:.14em;
  text-transform:uppercase; padding:1.1rem 1.9rem; border:1px solid transparent;
  cursor:pointer; line-height:1;
  transition:background .35s var(--ease), color .35s var(--ease), border-color .35s var(--ease);
}
.btn svg{width:14px; height:14px; transition:transform .35s var(--ease-out)}
.btn:hover svg{transform:translateX(5px)}
.btn--gold{background:var(--gold); color:var(--night)}   /* .gold-face ile birlikte kullanilir */
.btn--outline{border-color:var(--line-2); color:var(--tx)}
.btn--outline:hover{background:var(--night); color:var(--on-night); border-color:var(--night)}
.on-night .btn--outline,.hero .btn--outline{border-color:var(--line-gold); color:var(--on-night)}
.on-night .btn--outline:hover,.hero .btn--outline:hover{background:var(--gold); color:var(--night); border-color:var(--gold)}
.btn-row{display:flex; flex-wrap:wrap; gap:.9rem; margin-top:2.25rem}


/* ---------- Dövme altın yüzey (birincil eylem) ----------
   Logo metalik altın; düz tek renk buton onun yanında sönük kalıyordu.
   Hafif eğik gradyan + üstte ışık çizgisi + hover'da geçen parlama. */
.gold-face{
  position:relative; overflow:hidden; isolation:isolate;
  background:linear-gradient(158deg,#E2C785 0%,#D0AB58 40%,#C39A45 68%,#B18A33 100%);
  color:var(--night) !important; border:1px solid rgba(150,116,36,.85);
  box-shadow:0 1px 0 rgba(255,255,255,.34) inset, 0 5px 16px rgba(12,20,32,.24);
  transition:box-shadow .35s var(--ease), transform .35s var(--ease), filter .35s var(--ease);
}
.gold-face>*{position:relative; z-index:1}
.gold-face::before{
  content:""; position:absolute; inset:0; z-index:0; pointer-events:none;
  background:linear-gradient(104deg,transparent 34%,rgba(255,255,255,.5) 50%,transparent 66%);
  transform:translateX(-130%);
  transition:transform .8s var(--ease-out);
}
.gold-face:hover::before,.gold-face:focus-visible::before{transform:translateX(130%)}
.gold-face:hover,.gold-face:focus-visible{
  filter:brightness(1.04);
  box-shadow:0 1px 0 rgba(255,255,255,.6) inset, 0 10px 26px rgba(201,162,75,.34);
  transform:translateY(-1px);
}
.gold-face:active{transform:translateY(0); box-shadow:0 1px 0 rgba(255,255,255,.4) inset, 0 4px 12px rgba(12,20,32,.3)}
@media (prefers-reduced-motion:reduce){
  .gold-face::before{display:none}
  .gold-face:hover,.gold-face:focus-visible{transform:none}
}

/* ---------- HERO — tam kanama karusel ---------- */
.hero{position:relative; min-height:clamp(580px,92vh,960px); display:flex; align-items:flex-end; overflow:hidden; background:var(--night)}
.hero__stage{position:absolute; inset:0; z-index:0; overflow:hidden}
.hero__track{display:flex; height:100%; width:100%; will-change:transform;
  transition:transform .8s cubic-bezier(.65,0,.2,1)}
.hero__s{flex:0 0 100%; height:100%; overflow:hidden}
/* ⚠️ Ken Burns yatay kayması KALDIRILDI: giren slayt -%2,1, çıkan +%2,1
   konumda olduğu için aradaki %4,2 fark geçiş anında birleşme yerinde
   görünür bir kırık üretiyordu. Kayma yerine çok hafif içe zoom kaldı. */
.hero__s img{
  width:100%; height:100%; object-fit:cover;
  transform:scale(1.045); transition:transform 6s var(--ease-out);
}
.hero__s.is-live img{transform:scale(1)}
.hero__veil{
  position:absolute; inset:0; z-index:1; pointer-events:none;
  background:
    linear-gradient(to top, rgba(12,20,32,.96) 0%, rgba(12,20,32,.66) 40%, rgba(12,20,32,.32) 100%),
    linear-gradient(to right, rgba(12,20,32,.74) 0%, rgba(12,20,32,.12) 58%, transparent 100%);
}
.hero__in{position:relative; z-index:2; width:100%; padding-block:clamp(3rem,8vw,6rem)}
.hero h1{color:var(--on-night); max-width:17ch; margin-bottom:.45em}
.hero__gold{color:var(--gold-lt)}
.hero .lede{color:var(--on-night-soft); max-width:52ch}

/* Karusel arayüzü — sağ alt */
.hero__ui{
  position:absolute; z-index:3; right:calc(var(--gut) + 74px); bottom:clamp(1.6rem,4vw,3rem);
  display:flex; flex-direction:column; align-items:flex-end; gap:1rem; max-width:min(46vw,420px);
}
.hero__caps{position:relative; height:1.9em; width:100%}
.hero__cap{
  position:absolute; right:0; bottom:0; text-decoration:none; white-space:nowrap;
  font-family:var(--f-disp); font-size:clamp(1.05rem,.9rem + .55vw,1.55rem); color:var(--gold-lt);
  opacity:0; transform:translateY(9px); transition:opacity .5s var(--ease-out), transform .5s var(--ease-out);
  pointer-events:none; border-bottom:1px solid transparent;
}
.hero__cap.is-on{opacity:1; transform:none; pointer-events:auto}
.hero__cap:hover{border-bottom-color:var(--line-gold)}
.hero__ctl{display:flex; align-items:center; gap:.85rem}
.hero__arw{
  width:38px; height:38px; flex:0 0 auto; display:flex; align-items:center; justify-content:center;
  background:none; border:1px solid var(--line-gold); color:var(--gold-lt); cursor:pointer; padding:0;
  transition:background .3s var(--ease), color .3s var(--ease), border-color .3s var(--ease);
}
.hero__arw:hover{background:var(--gold); border-color:var(--gold); color:var(--night)}
.hero__arw svg{width:15px; height:15px}
.hero__dots{display:flex; gap:.5rem}
.hero__dot{
  width:38px; height:22px; padding:0; background:none; border:0; cursor:pointer;
  display:flex; align-items:center;
}
.hero__dot i{display:block; width:100%; height:2px; background:rgba(241,238,231,.28); position:relative; overflow:hidden}
.hero__dot i::after{
  content:""; position:absolute; inset:0 100% 0 0; background:var(--gold);
}
.hero__dot.is-on i::after{animation:heroBar var(--hero-dur,5.8s) linear forwards}
@keyframes heroBar{from{inset:0 100% 0 0}to{inset:0 0 0 0}}
.hero__dot:hover i{background:rgba(241,238,231,.5)}
.hero__num{font-family:var(--f-mono); font-size:.68rem; letter-spacing:.16em; color:var(--on-night-soft); white-space:nowrap}
.hero__num b{color:var(--gold-lt); font-weight:500}
@media (max-width:900px){
  /* Mobilde butonlar alt alta diziliyor; karusel şeridi onların ALTINA
     insin diye hero içeriğine pay bırakılıyor, yoksa üst üste biniyor. */
  .hero__in{padding-bottom:6.4rem}
  .hero__ui{left:var(--gut); right:var(--gut); max-width:none; align-items:flex-start; bottom:2.1rem}
  .hero__caps{display:none}
  .hero__arw{display:none}
  /* sabit WhatsApp butonu sağ altta duruyor — şerit onun altına girmesin */
  .hero__ctl{width:100%; justify-content:space-between; padding-right:66px}
  .hero__dots{flex:1 1 auto}
  .hero__dot{flex:1 1 auto; width:auto}
}

.hero__scroll{
  position:absolute; left:50%; transform:translateX(-50%); bottom:clamp(1.2rem,3vw,2.2rem);
  z-index:3; text-decoration:none;
  font-family:var(--f-mono); font-size:.58rem; letter-spacing:.24em; text-transform:uppercase;
  color:var(--on-night-soft); display:flex; flex-direction:column; align-items:center; gap:.7rem;
  transition:color .3s var(--ease);
}
.hero__scroll span{opacity:.85}
.hero__scroll:hover{color:var(--gold-lt)}
.hero__scroll::after{
  content:""; width:1px; height:46px; background:linear-gradient(to bottom,var(--gold),transparent);
  animation:scrollCue 2.4s var(--ease) infinite;
}
@keyframes scrollCue{0%,100%{transform:scaleY(.45); transform-origin:top; opacity:.5}50%{transform:scaleY(1); transform-origin:top; opacity:1}}
@media (max-width:1100px){.hero__scroll{display:none}}
@media (prefers-reduced-motion:reduce){.hero__scroll::after{animation:none}}
@media (prefers-reduced-motion:reduce){
  .hero__track{transition:none}
  .hero__s img,.hero__s.is-live img{transform:none!important; transition:none!important}
  .hero__dot.is-on i::after{animation:none; inset:0}
}

/* İstatistik şeridi */
.stats{display:grid; grid-template-columns:repeat(4,1fr); border-top:1px solid var(--line-night)}
@media (max-width:820px){.stats{grid-template-columns:1fr 1fr}}
.stat{padding:clamp(1.6rem,3.4vw,2.6rem) clamp(1rem,2vw,1.8rem); border-right:1px solid var(--line-night)}
.stat:last-child{border-right:0}
@media (max-width:820px){
  .stat:nth-child(2n){border-right:0}
  .stat:nth-child(-n+2){border-bottom:1px solid var(--line-night)}
}
.stat__v{font-family:var(--f-disp); font-size:clamp(2.1rem,1.2rem + 2.7vw,3.5rem); line-height:1.08; color:var(--gold-lt); font-variant-numeric:tabular-nums}
.stat__v sup{font-size:.4em; vertical-align:super; margin-left:.12em}
.stat__k{font-family:var(--f-mono); font-size:.64rem; letter-spacing:.2em; text-transform:uppercase; color:var(--on-night-soft); margin-top:.85rem; line-height:1.6}

/* ---------- Hizmet satırları (fotoğraflı) ---------- */
.svc{display:grid; gap:clamp(2.5rem,5vw,4.5rem)}
.svc__item{
  display:grid; grid-template-columns:1fr 1fr; gap:clamp(1.5rem,4vw,4rem);
  align-items:center; text-decoration:none;
}
.svc__item:nth-child(even) .svc__fig{order:2}
@media (max-width:860px){
  .svc__item{grid-template-columns:1fr; gap:1.4rem}
  .svc__item:nth-child(even) .svc__fig{order:0}
}
.svc__fig{position:relative; overflow:hidden; aspect-ratio:4/3; background:var(--night-2)}
.svc__fig img{width:100%; height:100%; object-fit:cover; transition:transform .7s var(--ease-out)}
.svc__item:hover .svc__fig img{transform:scale(1.06)}
.svc__no{font-family:var(--f-mono); font-size:.72rem; letter-spacing:.22em; color:var(--gold-dk); display:block; margin-bottom:.9rem}
.on-night .svc__no{color:var(--gold)}
.svc__ttl{font-family:var(--f-disp); font-size:clamp(1.5rem,1.1rem + 1.7vw,2.6rem); line-height:1.16; margin:0 0 .6rem}
.svc__dsc{color:var(--tx-soft); margin:0 0 1.4rem; max-width:46ch}
.on-night .svc__dsc{color:var(--on-night-soft)}
.svc__more{font-family:var(--f-mono); font-size:.7rem; letter-spacing:.2em; text-transform:uppercase; color:var(--gold-dk); display:inline-flex; align-items:center; gap:.6rem}
.on-night .svc__more{color:var(--gold-lt)}
.svc__more svg{width:13px; height:13px; transition:transform .35s var(--ease-out)}
.svc__item:hover .svc__more svg{transform:translateX(5px)}

/* ---------- Proje ızgarası ---------- */
.pgrid{display:grid; grid-template-columns:repeat(auto-fill,minmax(min(100%,330px),1fr)); gap:clamp(1.25rem,2.6vw,2.25rem)}
.pcard{text-decoration:none; display:block; position:relative}
.pcard__fr{position:relative; overflow:hidden; aspect-ratio:4/3.15; background:var(--night-2)}
.pcard__fr img{width:100%; height:100%; object-fit:cover; transition:transform .7s var(--ease-out)}
.pcard:hover .pcard__fr img{transform:scale(1.07)}
.pcard__fr::after{content:""; position:absolute; inset:0; background:linear-gradient(to top,rgba(12,20,32,.72),transparent 52%); opacity:.85; transition:opacity .4s}
.pcard:hover .pcard__fr::after{opacity:1}
.pcard__cat{
  position:absolute; left:1rem; top:1rem; z-index:2;
  font-family:var(--f-mono); font-size:.58rem; letter-spacing:.2em; text-transform:uppercase;
  color:var(--night); background:var(--gold); padding:.4rem .7rem; line-height:1;
}
.pcard__on{position:absolute; left:0; right:0; bottom:0; z-index:2; padding:1.15rem 1.25rem}
.pcard__ttl{font-family:var(--f-disp); font-size:1.28rem; color:var(--on-night); line-height:1.22; margin:0 0 .3rem}
.pcard__meta{font-family:var(--f-mono); font-size:.63rem; letter-spacing:.16em; text-transform:uppercase; color:rgba(241,238,231,.7)}
.pcard__note{
  font-family:var(--f-mono); font-size:.56rem; letter-spacing:.14em; text-transform:uppercase;
  color:var(--tx-faint); margin-top:.6rem;
}
.on-night .pcard__note{color:rgba(241,238,231,.42)}

/* Proje künyesi
   ⚠️ Eskiden gap:1px + zemin rengi ile çizgi yapılıyordu; satır tam dolmayınca
   boş hücreler gri blok olarak görünüyordu. Artık çizgi hücrenin kendisinde. */
.spec{display:grid; grid-template-columns:repeat(auto-fit,minmax(170px,1fr));
      border-top:1px solid var(--line); border-left:1px solid var(--line); margin:2.5rem 0}
.spec__i{padding:1.2rem 1.3rem; border-right:1px solid var(--line); border-bottom:1px solid var(--line); min-width:0}
.on-night .spec{border-top-color:var(--line-night); border-left-color:var(--line-night)}
.on-night .spec__i{border-right-color:var(--line-night); border-bottom-color:var(--line-night)}

/* Serbest görsel çerçevesi — kaynak fotoğrafların oranı değişken olduğu için
   sabit oranlı kutu + object-fit gerekiyor, yoksa kolon boyu tutmuyor */
.figbox{position:relative; overflow:hidden; aspect-ratio:4/3.25; background:var(--night-2)}
.figbox img{width:100%; height:100%; object-fit:cover}
@media (max-width:900px){.figbox{aspect-ratio:4/3}}

/* ---------- İletişim kartı ---------- */
.ctc{border-top:1px solid var(--line-2); margin:0 0 2.25rem}
.ctc__row{
  display:grid; grid-template-columns:1.5rem 1fr auto;
  gap:.2rem 1.1rem; align-items:center; text-decoration:none;
  padding:1.3rem .4rem; border-bottom:1px solid var(--line);
  transition:background .35s var(--ease), padding-left .35s var(--ease);
}
a.ctc__row:hover{background:var(--ivory-2); padding-left:1.1rem}
.ctc__ic{color:var(--gold-dk); grid-row:1 / span 2; align-self:start; margin-top:.15rem}
.ctc__k{grid-column:2}
.ctc__v{grid-column:2}
.ctc__go{grid-row:1 / span 2; grid-column:3}
.ctc__ic svg{width:18px; height:18px}
.ctc__k{font-family:var(--f-mono); font-size:.62rem; letter-spacing:.2em; text-transform:uppercase; color:var(--tx-faint)}
.ctc__v{font-family:var(--f-disp); font-size:clamp(1.08rem,1rem + .4vw,1.34rem); line-height:1.35; color:var(--tx); overflow-wrap:anywhere; min-width:0}
.ctc__v small{display:block; font-family:var(--f-body); font-size:.82rem; color:var(--tx-soft); margin-top:.3rem; letter-spacing:0}
.ctc__go{color:var(--gold-dk); opacity:.3; transform:none; transition:.3s var(--ease-out)}
.ctc__go svg{width:15px; height:15px}
a.ctc__row:hover .ctc__go{opacity:1; transform:translateX(3px)}
@media (max-width:640px){.ctc__row{padding:1.05rem .3rem}}
.on-night .ctc{border-top-color:var(--line-gold)}
.on-night .ctc__row{border-bottom-color:var(--line-night)}
.on-night a.ctc__row:hover{background:var(--night-2)}
.on-night .ctc__ic,.on-night .ctc__go{color:var(--gold)}
.on-night .ctc__k{color:var(--on-night-soft)}
.on-night .ctc__v{color:var(--on-night)}

/* ---------- Form paneli ---------- */
.frm{
  background:var(--ivory); border:1px solid var(--line);
  padding:clamp(1.6rem,3.2vw,2.6rem); position:relative;
}
.on-night .frm{border-color:var(--line-gold); box-shadow:0 24px 60px rgba(0,0,0,.35)}
.frm__hd{margin-bottom:1.6rem}
.frm__hd h3{font-size:clamp(1.35rem,1.1rem + 1vw,1.9rem); margin:0 0 .45rem; color:var(--tx)}
.on-night .frm__hd h3{color:var(--tx)}
.frm__hd p{margin:0; font-size:.92rem; color:var(--tx-soft); max-width:46ch}
.frm__g{display:grid; grid-template-columns:1fr 1fr; gap:1.05rem 1.15rem}
@media (max-width:560px){.frm__g{grid-template-columns:1fr}}
.frm__f{display:flex; flex-direction:column; gap:.5rem; min-width:0}
.frm__f--wide{grid-column:1 / -1}
.frm label{
  font-family:var(--f-mono); font-size:.58rem; letter-spacing:.2em;
  text-transform:uppercase; color:var(--tx-faint);
}
.frm label i{font-style:normal; color:var(--gold-dk)}
.frm input,.frm select,.frm textarea{
  font-family:var(--f-body); font-size:1rem; line-height:1.5; color:var(--tx);
  background:#FBFAF7; border:1px solid var(--line-2); border-radius:0;
  padding:.82rem .95rem; width:100%; transition:border-color .25s var(--ease), box-shadow .25s var(--ease);
}
.frm input::placeholder,.frm textarea::placeholder{color:#9AA1AD}
.frm input:focus,.frm select:focus,.frm textarea:focus{
  outline:none; border-color:var(--gold); box-shadow:0 0 0 3px var(--gold-ghost); background:#fff;
}
.frm input:user-invalid,.frm textarea:user-invalid{border-color:#B4472F}
.frm textarea{min-height:118px; resize:vertical}
.frm select{
  appearance:none; cursor:pointer; padding-right:2.4rem;
  background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8' fill='none' stroke='%237F6226' stroke-width='1.3'%3E%3Cpath d='M1 1.5 6 6.5l5-5'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right .95rem center; background-size:11px;
}
.frm__btn{width:100%; justify-content:center; margin-top:1.35rem}
.frm__kv{
  margin:1rem 0 0; font-size:.76rem; line-height:1.6; color:var(--tx-faint); max-width:none;
}
.frm__alt{
  margin:1.15rem 0 0; padding-top:1.15rem; border-top:1px solid var(--line);
  font-size:.86rem; color:var(--tx-soft); max-width:none;
}
.frm__alt a{color:var(--gold-dk); text-decoration:underline; text-underline-offset:3px; font-weight:500}

/* ---------- Tikli liste (ikon metnin yanında kalır) ---------- */
.chk{list-style:none; margin:0; padding:0; border-top:1px solid var(--line)}
.chk li{
  display:grid; grid-template-columns:1.15rem 1fr; gap:.9rem; align-items:start;
  padding:.95rem .2rem; border-bottom:1px solid var(--line); line-height:1.55;
}
.chk li svg{width:15px; height:15px; color:var(--gold-dk); margin-top:.45em}
.on-night .chk{border-top-color:var(--line-night)}
.on-night .chk li{border-bottom-color:var(--line-night)}
.on-night .chk li svg{color:var(--gold)}
/* Yatay şerit sürümü — geniş ekranda yan yana */
.chk--row{display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,215px),1fr));
  border-top:1px solid var(--line); border-left:1px solid var(--line)}
.chk--row li{border-right:1px solid var(--line); padding:1.35rem 1.3rem; align-items:start;
  grid-template-columns:1.15rem 1fr; font-size:.94rem}
.chk--row li svg{margin-top:.35em}
.spec__k{font-family:var(--f-mono); font-size:.6rem; letter-spacing:.2em; text-transform:uppercase; color:var(--tx-faint); margin-bottom:.55rem}
.on-night .spec__k{color:var(--on-night-soft)}
.spec__v{font-family:var(--f-disp); font-size:1.24rem; line-height:1.32; overflow-wrap:anywhere}
.on-night .spec__v{color:var(--gold-lt)}

/* Galeri */
.gal{display:grid; grid-template-columns:repeat(auto-fill,minmax(min(100%,290px),1fr)); gap:clamp(.75rem,1.6vw,1.15rem)}
.gal figure{margin:0; overflow:hidden; aspect-ratio:4/3; background:var(--night-2)}
.gal img{width:100%; height:100%; object-fit:cover; transition:transform .7s var(--ease-out)}
.gal figure:hover img{transform:scale(1.06)}
.gal figure:first-child{grid-column:span 2; aspect-ratio:8/3}
@media (max-width:700px){.gal figure:first-child{grid-column:auto; aspect-ratio:4/3}}

/* ---------- Bölge kartları ---------- */
.zones{display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,250px),1fr)); gap:1px; background:var(--line-night); border:1px solid var(--line-night)}
.zone{background:var(--night); padding:clamp(1.5rem,3vw,2.3rem); text-decoration:none; display:block; transition:background .4s var(--ease)}
.zone:hover{background:var(--night-2)}
.zone__k{font-family:var(--f-mono); font-size:.6rem; letter-spacing:.2em; text-transform:uppercase; color:var(--gold); display:block; margin-bottom:.9rem}
.zone h3{font-size:1.42rem; margin-bottom:.5rem; color:var(--on-night)}
.zone p{font-size:.9rem; color:var(--on-night-soft); margin:0; line-height:1.6}
.zones--light{background:var(--line); border-color:var(--line)}
.zones--light .zone{background:var(--ivory)}
.zones--light .zone:hover{background:var(--ivory-2)}
.zones--light .zone__k{color:var(--gold-dk)}
.zones--light h3{color:var(--tx)}
.zones--light p{color:var(--tx-soft)}

/* ---------- Süreç ---------- */
.steps{border-top:1px solid var(--line-night)}
.step{display:grid; grid-template-columns:5.5rem 1fr minmax(0,42ch); gap:clamp(1rem,3vw,3rem); padding:clamp(1.5rem,3vw,2.4rem) 0; border-bottom:1px solid var(--line-night); align-items:start}
@media (max-width:900px){.step{grid-template-columns:3.5rem 1fr; gap:.5rem 1.25rem} .step p{grid-column:2}}
.step__no{font-family:var(--f-mono); font-size:.78rem; letter-spacing:.18em; color:var(--gold); padding-top:.4rem}
.step h3{margin:0 0 .3rem; color:var(--on-night)}
.step p{color:var(--on-night-soft); margin:0; font-size:.95rem}

/* ---------- SSS ---------- */
.faq{border-top:1px solid var(--line)}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{
  cursor:pointer; list-style:none; padding:clamp(1.15rem,2.3vw,1.7rem) 3rem clamp(1.15rem,2.3vw,1.7rem) 0;
  font-family:var(--f-disp); font-size:clamp(1.08rem,1rem + .6vw,1.48rem); line-height:1.28; position:relative;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:""; position:absolute; right:.4rem; top:50%; width:12px; height:12px; border-right:1px solid var(--gold-dk); border-bottom:1px solid var(--gold-dk); transform:translateY(-70%) rotate(45deg); transition:transform .35s var(--ease)}
.faq details[open] summary::after{transform:translateY(-30%) rotate(-135deg)}
.faq__a{padding:0 clamp(1rem,6vw,7rem) clamp(1.4rem,2.7vw,2.1rem) 0}
.faq__a p{color:var(--tx-soft); margin:0 0 .85em}
.faq__a p:last-child{margin-bottom:0}
.faq__a a{color:var(--gold-dk); text-decoration:underline; text-underline-offset:3px}
.on-night .faq{border-color:var(--line-night)}
.on-night .faq details{border-color:var(--line-night)}
.on-night .faq__a p{color:var(--on-night-soft)}
.on-night .faq__a a,.on-night .prose a{color:var(--gold-lt)}
.on-night .prose a:hover{color:#fff}
.on-night .faq summary::after{border-color:var(--gold)}

/* ---------- Prose ---------- */
.prose{max-width:70ch}
.prose h2{margin-top:2.4em; font-size:clamp(1.5rem,1.15rem + 1.35vw,2.35rem)}
.prose h2:first-child{margin-top:0}
.prose h3{margin-top:1.9em; font-size:clamp(1.14rem,1rem + .6vw,1.45rem)}
.prose ul,.prose ol{padding-left:1.3rem; margin:0 0 1.35em; max-width:68ch}
.prose li{margin-bottom:.55em}
.prose li::marker{color:var(--gold-dk)}
.prose a{color:var(--gold-dk); text-decoration:underline; text-underline-offset:3px}
.prose a:hover{color:var(--night)}
.prose blockquote{
  margin:2.2em 0; padding:1.3rem 0 1.3rem 1.7rem; border-left:2px solid var(--gold);
  font-family:var(--f-disp); font-size:1.28rem; line-height:1.45; color:var(--tx);
}
.prose blockquote p{margin:0; max-width:none}

.tbl-wrap{overflow-x:auto; margin:2.2em 0; border:1px solid var(--line); max-width:100%; -webkit-overflow-scrolling:touch}
table{width:100%; border-collapse:collapse; font-size:.93rem; min-width:480px}
th,td{padding:.9rem 1.1rem; text-align:left; border-bottom:1px solid var(--line)}
th{font-family:var(--f-mono); font-size:.63rem; letter-spacing:.16em; text-transform:uppercase; color:var(--gold-dk); font-weight:500; background:var(--ivory-2); white-space:nowrap}
td{color:var(--tx-soft)}
td:first-child{color:var(--tx); font-weight:500; font-family:var(--f-mono); font-size:.85rem}
tbody tr:last-child td{border-bottom:0}
.num{font-variant-numeric:tabular-nums; white-space:nowrap}
@media (max-width:620px){
  table{min-width:340px; font-size:.85rem}
  th,td{padding:.65rem .7rem}
  th{letter-spacing:.08em}
}

/* Koyu zeminde tablo — bu sürüm yoktu, metin lacivert üstünde görünmüyordu */
.on-night .tbl-wrap{border-color:var(--line-night)}
.on-night th{background:var(--night-2); color:var(--gold); border-bottom-color:var(--line-gold)}
.on-night td{color:var(--on-night-soft); border-bottom-color:var(--line-night)}
.on-night td:first-child{color:var(--gold-lt)}
.on-night .src-note{color:rgba(241,238,231,.5); border-top-color:var(--line-night)}
.on-night .src-note a{color:rgba(241,238,231,.5)}

/* ---------- Resmî birim maliyet tarifesi ---------- */
.rate{margin:0; border-top:1px solid var(--line-gold)}
.rate table{width:100%; border-collapse:collapse; min-width:0}
.rate th{
  background:transparent; border-bottom:1px solid var(--line-gold);
  font-family:var(--f-mono); font-size:.58rem; letter-spacing:.2em; text-transform:uppercase;
  color:var(--gold); font-weight:500; padding:0 1.2rem .9rem 0; white-space:nowrap; vertical-align:bottom;
}
.rate th:first-child{padding-left:1.1rem; padding-right:1.6rem}
.rate th:last-child,.rate td:last-child{text-align:right}
.rate td{
  border-bottom:1px solid var(--line-night); padding:1.15rem 1.2rem 1.15rem 0;
  vertical-align:middle; color:var(--on-night-soft); font-size:.95rem; line-height:1.5;
}
.rate tr{transition:background .35s var(--ease)}
.rate tbody tr:hover{background:rgba(201,162,75,.055)}
.rate tbody tr:last-child td{border-bottom:0}
/* Yapı sınıfı rozeti */
.rate__c{
  display:inline-block; font-family:var(--f-mono); font-size:.72rem; font-weight:500;
  letter-spacing:.1em; color:var(--gold-lt); border:1px solid var(--line-gold);
  padding:.42rem .7rem; line-height:1; white-space:nowrap; min-width:4.4rem; text-align:center;
}
.rate td:first-child{width:1%; padding-right:1.6rem; padding-left:1.1rem}
.rate__p{
  font-family:var(--f-disp); font-size:clamp(1.2rem,1rem + .75vw,1.68rem);
  color:var(--on-night); font-variant-numeric:tabular-nums; white-space:nowrap; line-height:1.1;
}
.rate__p i{font-style:normal; font-family:var(--f-mono); font-size:.6rem; letter-spacing:.14em;
  color:var(--gold); display:block; margin-top:.4rem; text-transform:uppercase}
/* Yan nottaki örnekle eşleşen satır */
.rate tr[data-hl]{background:rgba(201,162,75,.085)}
.rate tr[data-hl] td:first-child{box-shadow:inset 2px 0 0 var(--gold)}
.rate tr[data-hl] .rate__p{color:var(--gold-lt)}
.rate tr[data-hl] td{color:var(--on-night)}
.rate__tag{
  font-family:var(--f-mono); font-size:.54rem; letter-spacing:.18em; text-transform:uppercase;
  color:var(--night); background:var(--gold); padding:.24rem .5rem; margin-left:.7rem;
  white-space:nowrap; line-height:1;
}
@media (max-width:760px){
  .rate th{white-space:normal; font-size:.52rem; letter-spacing:.14em; padding-right:.7rem}
  .rate th:first-child{padding-left:.7rem; padding-right:.9rem}
  .rate td{padding:1rem .6rem 1rem 0; font-size:.87rem}
  .rate td:first-child{padding-left:.7rem; padding-right:.9rem}
  .rate td:nth-child(2){font-size:.82rem; line-height:1.45}
  .rate__c{font-size:.64rem; min-width:0; padding:.34rem .5rem}
  .rate__tag{display:none}
}

.src-note{font-size:.81rem; color:var(--tx-faint); border-top:1px solid var(--line); padding-top:.95rem; margin-top:-1em; line-height:1.6}
.src-note a{color:var(--tx-faint)}
.note{border:1px solid var(--line-2); background:var(--ivory-2); padding:1.35rem 1.5rem; margin:2.2em 0}
.note__k{font-family:var(--f-mono); font-size:.63rem; letter-spacing:.2em; text-transform:uppercase; color:var(--gold-dk); display:block; margin-bottom:.7rem}
.note p{margin:0; font-size:.94rem; line-height:1.65; color:var(--tx-soft); max-width:none}
.on-night .note{background:var(--night-2); border-color:var(--line-night)}
.on-night .note p{color:var(--on-night-soft)}
.on-night .note__k{color:var(--gold)}

/* ---------- Kırıntı ---------- */
.crumb{font-family:var(--f-mono); font-size:.66rem; letter-spacing:.16em; text-transform:uppercase; color:var(--tx-faint); padding-block:1.5rem .25rem}
.crumb ol{list-style:none; display:flex; flex-wrap:wrap; gap:.55rem; margin:0; padding:0}
.crumb li:not(:last-child)::after{content:"—"; margin-left:.55rem; opacity:.45}
.crumb a{text-decoration:none}
.crumb a:hover{color:var(--gold-dk)}
.crumb--night{color:var(--on-night-soft)}
.crumb--night a:hover{color:var(--gold-lt)}

/* ---------- Sayfa başlığı (fotoğraflı) ---------- */
.phead{position:relative; background:var(--night); color:var(--on-night); overflow:hidden; min-height:clamp(340px,46vh,520px); display:flex; align-items:flex-end}
.phead__bg{position:absolute; inset:0; z-index:0}
.phead__bg img{width:100%; height:100%; object-fit:cover}
.phead__bg::after{content:""; position:absolute; inset:0; background:linear-gradient(to top,rgba(12,20,32,.94),rgba(12,20,32,.55) 55%,rgba(12,20,32,.4))}
.phead__in{position:relative; z-index:2; width:100%; padding-block:clamp(2.5rem,6vw,4.5rem)}
.phead h1{color:var(--on-night); max-width:19ch}
.phead--plain{min-height:0; background:var(--night)}

/* ---------- CTA ---------- */
.cta{position:relative; overflow:hidden; background:var(--night)}
.cta__bg{position:absolute; inset:0; z-index:0}
.cta__bg img{width:100%; height:100%; object-fit:cover; opacity:.34}
.cta__bg::after{content:""; position:absolute; inset:0; background:linear-gradient(to right,rgba(12,20,32,.95),rgba(12,20,32,.7))}
.cta__in{position:relative; z-index:2; display:grid; grid-template-columns:1.15fr .85fr; gap:clamp(1.5rem,4vw,4rem); align-items:end}
@media (max-width:900px){.cta__in{grid-template-columns:1fr}}
.cta h2{color:var(--on-night); font-size:clamp(1.9rem,1.15rem + 3.4vw,4rem)}
.cta p{color:var(--on-night-soft)}

/* ---------- Footer ---------- */
.ft{background:var(--night); color:var(--on-night); padding-block:clamp(3.25rem,6vw,5.5rem) 2rem; border-top:1px solid var(--line-gold)}
.ft__top{display:grid; grid-template-columns:1.5fr 1fr 1fr 1.15fr; gap:clamp(1.75rem,4vw,3.25rem); padding-bottom:clamp(2.5rem,5vw,3.75rem)}
@media (max-width:1000px){.ft__top{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.ft__top{grid-template-columns:1fr}}
.ft h4{font-family:var(--f-mono); font-size:.63rem; letter-spacing:.22em; text-transform:uppercase; color:var(--gold); font-weight:500; margin-bottom:1.2rem}
.ft ul{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:.6rem}
.ft a{text-decoration:none; font-size:.92rem; color:var(--on-night-soft); transition:color .25s}
.ft a:hover{color:var(--gold-lt)}
.ft__brand p{font-size:.92rem; color:var(--on-night-soft); max-width:36ch; margin:1.3rem 0 0; font-weight:300}
.ft__btm{display:flex; flex-wrap:wrap; gap:1rem 2rem; justify-content:space-between; align-items:center; border-top:1px solid var(--line-night); padding-top:1.7rem; font-size:.8rem; color:var(--on-night-soft)}
.ft__sig a{color:var(--on-night); border-bottom:1px solid var(--line-gold)}
.ft__sig a:hover{color:var(--gold-lt); border-bottom-color:var(--gold)}

.wa{position:fixed; right:clamp(.9rem,2.5vw,1.75rem); bottom:clamp(.9rem,2.5vw,1.75rem); z-index:300; width:54px; height:54px; border-radius:50%; background:#20b358; color:#fff; display:flex; align-items:center; justify-content:center; text-decoration:none; box-shadow:0 10px 30px rgba(12,20,32,.34); transition:transform .3s var(--ease-out)}
.wa:hover{transform:scale(1.08)}
.wa svg{width:27px; height:27px}

/* ---------- Reveal ---------- */
[data-rv]{opacity:0; transform:translateY(10px)}
[data-rv].is-in{opacity:1; transform:none; transition:opacity .3s var(--ease-out), transform .3s var(--ease-out)}
[data-rv-d="1"].is-in{transition-delay:.04s}
[data-rv-d="2"].is-in{transition-delay:.08s}
[data-rv-d="3"].is-in{transition-delay:.12s}
[data-rv-d="4"].is-in{transition-delay:.16s}
/* Maske kutusuna nefes payı: üstte aksan (İ Ğ), altta iniş boyu (g y ş ç)
   kırpılmasın. Payı negatif margin geri alır — dikey ritim bozulmaz. */
.mask-line{display:block; overflow:hidden; padding:.07em 0 .13em; margin-top:-.07em}
h1.mask-line,h2.mask-line,h3.mask-line{margin-bottom:calc(.55em - .13em)}
.hero h1 .mask-line{margin-bottom:0}
.mask-line>span{display:block; transform:translateY(128%)}
.mask-line.is-in>span{transform:none; transition:transform .45s var(--ease-out)}
.mask-line[data-rv-d="1"].is-in>span{transition-delay:.06s}
.mask-line[data-rv-d="2"].is-in>span{transition-delay:.12s}

/* Görsel maskeli açılış.
   ⚠️ Maske ASLA gözlenen elemanın kendisine konmaz: clip-path elemanın görünür
   kutusunu sıfırlar, IntersectionObserver kesişim oranını 0 görür ve .is-in hiç
   gelmez — görsel kalıcı kaybolur. Bu yüzden maske ÇOCUĞA uygulanır. */
.imgrev{overflow:hidden}
.imgrev>*{clip-path:inset(0 0 100% 0)}
.imgrev.is-in>*{clip-path:inset(0 0 0 0); transition:clip-path .35s var(--ease-out)}

@media (prefers-reduced-motion:reduce){
  [data-rv],[data-rv].is-in{opacity:1; transform:none; transition:none}
  .mask-line>span{transform:none!important; transition:none!important}
  .imgrev>*,.imgrev.is-in>*{clip-path:none!important; transition:none!important}
  .pcard__fr img,.svc__fig img,.gal img,.btn svg{transition:none!important}
}

:focus-visible{outline:2px solid var(--gold); outline-offset:3px}
.skip{position:absolute; left:-9999px; top:0; background:var(--night); color:var(--on-night); padding:.9rem 1.3rem; z-index:9999; text-decoration:none}
.skip:focus{left:0}
.sr{position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0}
.stack>*+*{margin-top:1.6rem}
.stack-sm>*+*{margin-top:.8rem}