/* ═══════════════════════════════════════════════════════════════
   SİPAHİ İNŞAAT — açık tema
   Renkler binaların kendisinden: kireç taşı cephelerden kırık
   beyaz zemin, terracotta panellerden aksan. Tüm metin renkleri
   WCAG AA (4.5:1) üzerinde doğrulandı.
   ═══════════════════════════════════════════════════════════════ */
:root{
  --zemin:#f7f5f1;      /* kırık beyaz — sayfa zemini */
  --kagit:#ffffff;      /* kart yüzeyi */
  --zemin-2:#efece5;    /* alternatif bant */
  --zemin-3:#e7e3da;
  --metin:#1c1a17;      /* 15.9:1 */
  --metin-2:#57534c;    /*  7.0:1 */
  --metin-3:#6f6a62;    /*  4.9:1 */
  --cizgi:#e2ded6;
  --cizgi-2:#d3cec4;
  --tugla:#b0552e;      /*  4.6:1 — cephelerdeki terracotta */
  --tugla-2:#9c4522;    /*  5.9:1 — vurgu/hover */
  --kum:#cabda6;

  --display:"Archivo","Helvetica Neue",Arial,sans-serif;
  --govde:"Karla","Helvetica Neue",Arial,sans-serif;

  --serit-h:34px;       /* demo şeridi — .ust bunun altına yapışır */
  --kenar:clamp(1.25rem,4.5vw,4.5rem);
  --bolum:clamp(4rem,9vw,7.5rem);
  color-scheme:light;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;background:var(--zemin);color:var(--metin);
  font-family:var(--govde);font-size:1rem;line-height:1.65;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
img{max-width:100%;display:block}
a{color:inherit}
::selection{background:var(--tugla);color:#fff}

.atla{position:absolute;left:-9999px;background:var(--tugla);color:#fff;padding:.7rem 1.2rem;z-index:200;font-weight:600}
.atla:focus{left:0;top:0}
:focus-visible{outline:2px solid var(--tugla);outline-offset:3px}
.sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* ── tipografi ── */
.h-dev{
  font-family:var(--display);font-weight:700;font-stretch:92%;
  font-size:clamp(2.3rem,5.6vw,4.6rem);
  line-height:1.02;letter-spacing:-.032em;text-wrap:balance;margin:0;
}
.h-bol{
  font-family:var(--display);font-weight:700;font-stretch:94%;
  font-size:clamp(1.75rem,3.6vw,2.9rem);
  line-height:1.08;letter-spacing:-.024em;text-wrap:balance;margin:0;
}
.h-alt{
  font-family:var(--display);font-weight:600;
  font-size:clamp(1.05rem,1.8vw,1.3rem);
  line-height:1.28;letter-spacing:-.012em;margin:0;
}
.etiket{
  font-family:var(--display);font-weight:600;
  font-size:.7rem;letter-spacing:.18em;text-transform:uppercase;
  color:var(--tugla-2);margin:0;
}
.etiket.sessiz{color:var(--metin-3)}
p{margin:0 0 1rem;max-width:62ch}

/* ── üst menü ── */
/* ── demo şeridi ─────────────────────────────────────────────────────────
   Bu sayfa Sipahi İnşaat'ın resmi sitesi değil, ornisoftware'in hazırladığı
   bir tasarım önerisi. Şerit bunu kimsenin kaçıramayacağı yerde söyler ve
   içeriğin kaynağını gösterir. Kaldırılmaz. */
.demo-serit{
  position:sticky;top:0;z-index:120;
  height:var(--serit-h);
  display:flex;align-items:center;gap:.7rem;
  padding:0 var(--kenar);
  background:var(--metin);color:#f0ece5;
  border-bottom:1px solid var(--tugla);
  font-family:var(--display);font-size:.74rem;letter-spacing:.02em;
  overflow:hidden;
}
.demo-serit .nokta{
  width:7px;height:7px;border-radius:50%;flex:none;
  background:var(--kum);animation:nabiz 2.4s ease-in-out infinite;
}
@keyframes nabiz{0%,100%{opacity:1}50%{opacity:.3}}
.demo-serit .metin{color:#c9c3b9;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.demo-serit .metin b{color:#fff;font-weight:600}
.demo-serit .metin a{color:#e4dcd0;text-decoration:underline;text-underline-offset:2px}
.demo-serit .cta{
  margin-left:auto;display:inline-flex;align-items:center;gap:.45rem;
  color:var(--kum);font-weight:600;text-decoration:none;white-space:nowrap;
}
.demo-serit .cta:hover{text-decoration:underline;text-underline-offset:3px}
.demo-serit .cta svg{width:13px;height:13px}
@media (max-width:760px){
  .demo-serit{font-size:.7rem;gap:.5rem}
  .demo-serit .metin .uzun{display:none}
}
@media (prefers-reduced-motion:reduce){.demo-serit .nokta{animation:none}}

.ust{
  position:sticky;top:var(--serit-h);z-index:100;
  display:flex;align-items:center;justify-content:space-between;gap:1rem;
  padding:1rem var(--kenar);background:var(--zemin);
  border-bottom:1px solid transparent;transition:border-color .3s ease,box-shadow .3s ease;
}
.ust.kati{border-bottom-color:var(--cizgi);box-shadow:0 1px 14px rgba(28,26,23,.05)}
.marka{display:flex;align-items:center;gap:.7rem;text-decoration:none}
.marka img{height:30px;width:auto}
.marka b{font-family:var(--display);font-weight:700;font-size:.92rem;letter-spacing:.13em;text-transform:uppercase}
.menu{display:flex;align-items:center;gap:2rem;list-style:none;margin:0;padding:0}
.menu a{
  font-family:var(--display);font-weight:500;font-size:.84rem;letter-spacing:.03em;
  text-decoration:none;color:var(--metin-2);transition:color .2s ease;
  padding:.35rem 0;position:relative;
}
.menu a::after{content:"";position:absolute;left:0;right:100%;bottom:0;height:1.5px;background:var(--tugla);transition:right .28s ease}
.menu a:hover{color:var(--metin)}
.menu a:hover::after{right:0}
.ust-tel{
  font-family:var(--display);font-weight:600;font-size:.84rem;letter-spacing:.02em;
  text-decoration:none;background:var(--tugla);color:#fff;padding:.6rem 1.05rem;
  transition:background .25s ease;white-space:nowrap;
}
.ust-tel:hover{background:var(--tugla-2)}
.mnu-btn{display:none;background:none;border:1px solid var(--cizgi-2);color:var(--metin);width:44px;height:44px;cursor:pointer;align-items:center;justify-content:center}
.mnu-btn svg{width:20px;height:20px}

/* ── hero: editoryal ikili düzen ── */
.hero{padding:clamp(2.5rem,6vw,5rem) var(--kenar) 0}
.hero-ic{display:grid;grid-template-columns:1fr;gap:2.5rem;align-items:center}
.hero-govde .etiket{margin-bottom:1.1rem}
.hero-alt-metin{color:var(--metin-2);font-size:clamp(1.02rem,1.4vw,1.15rem);max-width:44ch;margin:1.5rem 0 2rem}
.hero-cta{display:flex;flex-wrap:wrap;gap:.7rem}

.hero-gorsel{position:relative}
.cerceve{position:relative;aspect-ratio:4/5;overflow:hidden;background:var(--zemin-3)}
.kare{
  position:absolute;inset:0;background-size:cover;background-position:center;
  opacity:0;transition:opacity 1.4s ease;
}
.kare.aktif{opacity:1;animation:yavas-zoom 12s linear forwards}
@keyframes yavas-zoom{from{transform:scale(1.01)}to{transform:scale(1.1)}}

.hero-bar{
  display:flex;align-items:center;gap:1rem;
  padding:.9rem 0 0;border-top:1px solid var(--cizgi);margin-top:.9rem;
}
.sayac{font-family:var(--display);font-weight:700;font-size:.78rem;letter-spacing:.09em;font-variant-numeric:tabular-nums;white-space:nowrap}
.sayac .bolu{color:var(--metin-3);margin:0 .28rem}
.sayac .top{color:var(--metin-3)}
.kare-adi{
  font-family:var(--display);font-weight:500;font-size:.78rem;letter-spacing:.08em;text-transform:uppercase;
  color:var(--metin-2);flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.cizgiler{display:flex;gap:5px}
.cizgiler button{display:block;width:24px;height:2px;background:var(--cizgi-2);cursor:pointer;border:none;padding:0;transition:background .3s ease}
.cizgiler button.aktif{background:var(--tugla)}

/* ── butonlar ── */
.dugme{
  display:inline-flex;align-items:center;gap:.55rem;
  font-family:var(--display);font-weight:600;font-size:.86rem;letter-spacing:.02em;
  padding:.92rem 1.5rem;text-decoration:none;cursor:pointer;
  border:1px solid var(--tugla);background:var(--tugla);color:#fff;
  transition:background .25s ease,border-color .25s ease,color .25s ease;
}
.dugme:hover{background:var(--tugla-2);border-color:var(--tugla-2)}
.dugme.hayalet{background:transparent;border-color:var(--cizgi-2);color:var(--metin)}
.dugme.hayalet:hover{border-color:var(--metin);background:transparent;color:var(--metin)}
.dugme svg{width:15px;height:15px}

/* ── rakam şeridi ── */
.serit{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(min(200px,100%),1fr));
  gap:1px;background:var(--cizgi);
  border-top:1px solid var(--cizgi);border-bottom:1px solid var(--cizgi);
  margin-top:var(--bolum);
}
.serit>div{padding:2.2rem var(--kenar);background:var(--zemin)}
.rakam{
  font-family:var(--display);font-weight:700;font-stretch:88%;
  font-size:clamp(2.4rem,4.4vw,3.5rem);line-height:1;letter-spacing:-.035em;
  font-variant-numeric:tabular-nums;display:block;margin-bottom:.4rem;
}
.serit .aciklama{color:var(--metin-2);font-size:.9rem;margin:0}

/* ── bölüm ── */
section{scroll-margin-top:calc(80px + var(--serit-h))}
.bolum{padding:var(--bolum) var(--kenar)}
.bolum-bas{
  display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;
  gap:1.5rem;margin-bottom:2.75rem;padding-bottom:1.3rem;border-bottom:1px solid var(--cizgi);
}
.bolum-bas .sol{max-width:38ch}
.bolum-bas .etiket{margin-bottom:.85rem}

/* ── manifesto ── */
.manifesto{background:var(--zemin-2);border-bottom:1px solid var(--cizgi)}
.manifesto-ic{display:grid;grid-template-columns:1fr;gap:2.5rem;align-items:start}
.manifesto blockquote{
  margin:0;font-family:var(--display);font-weight:600;font-stretch:94%;
  font-size:clamp(1.4rem,2.9vw,2.25rem);line-height:1.2;letter-spacing:-.02em;text-wrap:balance;
}
.manifesto blockquote span{color:var(--tugla-2)}
.manifesto .destek{color:var(--metin-2);max-width:54ch}

/* ── proje ızgarası: görsel üstte, yazı altta ── */
.filtreler{display:flex;flex-wrap:wrap;gap:.5rem}
.filtre{
  font-family:var(--display);font-weight:600;font-size:.78rem;letter-spacing:.05em;text-transform:uppercase;
  background:var(--kagit);border:1px solid var(--cizgi-2);color:var(--metin-2);
  padding:.58rem 1.05rem;cursor:pointer;transition:all .22s ease;
}
.filtre:hover{color:var(--metin);border-color:var(--metin-3)}
.filtre[aria-pressed="true"]{background:var(--metin);border-color:var(--metin);color:var(--zemin)}

.izgara{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(290px,100%),1fr));gap:2rem 1.6rem}
.kart{display:flex;flex-direction:column;text-decoration:none;background:transparent;cursor:pointer}
.kart-gorsel{position:relative;overflow:hidden;aspect-ratio:4/3;background:var(--zemin-3)}
.kart img{width:100%;height:100%;object-fit:cover;transition:transform .8s cubic-bezier(.2,.7,.3,1)}
.kart:hover img,.kart:focus-visible img{transform:scale(1.045)}
.kart-yazi{padding:1rem .1rem 0;display:flex;flex-direction:column;gap:.28rem}
.kart-ust{display:flex;align-items:baseline;gap:.6rem}
.kart-no{
  font-family:var(--display);font-weight:700;font-size:.7rem;letter-spacing:.12em;
  color:var(--tugla-2);font-variant-numeric:tabular-nums;
}
.kart h3{
  font-family:var(--display);font-weight:700;font-stretch:95%;
  font-size:1.15rem;line-height:1.2;letter-spacing:-.015em;margin:0;transition:color .22s ease;
}
.kart:hover h3{color:var(--tugla-2)}
.kart .yer{font-size:.86rem;color:var(--metin-2);margin:0}
.rozet{
  position:absolute;top:.8rem;left:.8rem;
  font-family:var(--display);font-weight:700;font-size:.64rem;letter-spacing:.11em;text-transform:uppercase;
  padding:.3rem .6rem;background:var(--tugla);color:#fff;
}
.rozet.gelecek{background:var(--metin);color:var(--zemin)}
.izgara-alt{display:flex;justify-content:center;margin-top:3rem}

/* ── hizmetler ── */
.hizmetler{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(280px,100%),1fr));gap:1px;background:var(--cizgi);border:1px solid var(--cizgi)}
.hizmet{background:var(--kagit);padding:2.2rem 1.9rem;display:flex;flex-direction:column;gap:.85rem}
.hizmet .no{
  font-family:var(--display);font-weight:700;font-size:.7rem;letter-spacing:.12em;
  color:var(--tugla-2);font-variant-numeric:tabular-nums;
}
.hizmet p{color:var(--metin-2);font-size:.94rem;margin:0}

/* ── süreç ── */
.surec{background:var(--zemin-2);border-top:1px solid var(--cizgi);border-bottom:1px solid var(--cizgi)}
.adimlar{display:grid;grid-template-columns:1fr;gap:0}
.adim{
  display:grid;grid-template-columns:3.2rem 1fr;gap:1.4rem;
  padding:1.6rem 0;border-top:1px solid var(--cizgi-2);align-items:start;
}
.adim:last-child{border-bottom:1px solid var(--cizgi-2)}
.adim .sira{
  font-family:var(--display);font-weight:700;font-size:.78rem;letter-spacing:.09em;
  color:var(--tugla-2);font-variant-numeric:tabular-nums;padding-top:.22rem;
}
.adim h3{font-family:var(--display);font-weight:600;font-size:1.05rem;margin:0 0 .35rem;letter-spacing:-.01em}
.adim p{color:var(--metin-2);font-size:.93rem;margin:0;max-width:68ch}

/* ── iletişim ── */
.iletisim-ic{display:grid;grid-template-columns:1fr;gap:2.5rem}
.bilgi-liste{display:grid;gap:0;margin:0;border-top:1px solid var(--cizgi)}
.bilgi{display:grid;grid-template-columns:8.5rem 1fr;gap:1rem;padding:1.1rem 0;border-bottom:1px solid var(--cizgi);align-items:baseline}
.bilgi dt{
  font-family:var(--display);font-weight:600;font-size:.69rem;letter-spacing:.12em;
  text-transform:uppercase;color:var(--metin-3);margin:0;
}
.bilgi dd{margin:0;font-size:1rem}
.bilgi dd a{text-decoration:none;border-bottom:1px solid var(--cizgi-2);transition:border-color .2s ease,color .2s ease}
.bilgi dd a:hover{color:var(--tugla-2);border-color:var(--tugla-2)}

/* ── alt bilgi ── */
footer{padding:3rem var(--kenar) 2.5rem;border-top:1px solid var(--cizgi);background:var(--zemin-2)}
.alt-ust{display:flex;flex-wrap:wrap;gap:2rem;justify-content:space-between;align-items:flex-start;margin-bottom:2.5rem}
.alt-menu{display:flex;flex-wrap:wrap;gap:1.5rem;list-style:none;margin:0;padding:0}
.alt-menu a{
  font-family:var(--display);font-weight:500;font-size:.84rem;letter-spacing:.03em;
  text-decoration:none;color:var(--metin-2);transition:color .2s ease;
}
.alt-menu a:hover{color:var(--tugla-2)}
.alt-son{
  display:flex;flex-wrap:wrap;gap:1rem;justify-content:space-between;
  padding-top:1.4rem;border-top:1px solid var(--cizgi-2);
  font-size:.8rem;color:var(--metin-3);
}

/* ── açılış hareketi ── */
.bel{opacity:0;transform:translateY(16px);transition:opacity .7s ease,transform .7s ease}
.bel.gorundu{opacity:1;transform:none}
.js-yok .bel{opacity:1;transform:none}

@media (max-width:900px){
  .menu,.ust-tel{display:none}
  .mnu-btn{display:inline-flex}
  .ust.acik{flex-wrap:wrap;border-bottom-color:var(--cizgi)}
  .ust.acik .menu{display:flex;flex-direction:column;align-items:flex-start;gap:0;width:100%;order:3;padding:.4rem 0 1rem}
  .ust.acik .menu li{width:100%;border-top:1px solid var(--cizgi)}
  .ust.acik .menu a{display:block;padding:.92rem 0;font-size:1rem;color:var(--metin)}
  .ust.acik .ust-tel{display:inline-flex;order:4;margin-bottom:.75rem}
  .adim{grid-template-columns:2.3rem 1fr;gap:1rem}
  .bilgi{grid-template-columns:1fr;gap:.15rem}
  .cerceve{aspect-ratio:4/3}
}
@media (min-width:860px){
  .hero-ic{grid-template-columns:1.02fr 1fr;gap:clamp(2.5rem,5vw,4.5rem)}
  .manifesto-ic{grid-template-columns:1.3fr 1fr;gap:4rem}
  .iletisim-ic{grid-template-columns:1fr 1fr;gap:4rem}
}
@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important;scroll-behavior:auto!important}
  .kare.aktif{animation:none}
  .bel{opacity:1;transform:none}
}