/* ============================================================
   EDITORIAL — Faz 2 bileşen katmanı
   Yüklenme sırası: components.css SONRASI, pages.css ÖNCESİ.

   Buradaki bileşenler sitenin ayırt edici tarafını taşır. Renk ve font
   tek başına ayrıştırmıyor (sıcak zemin + serif yaygın bir kombinasyon);
   ayrışma YAPISAL öğelerden geliyor ve hepsi bu işin kendi dilinden alındı.
   ============================================================ */


/* ─────────────────────────────────────────────────────────────
   1. KÜNYE — imza öğe (pafta antedi)

   Türk mimari çiziminde her paftanın köşesinde künye bloğu bulunur:
   cetvelli, büyük harf mikro etiketli, hizalı rakamlı. Projeyi
   "büyük rakam + renk" yerine kendi sektörünün belgeleme diliyle
   tanıtıyoruz. Alanlar zaten admin formunda toplanan alanlar:
   Ada · Parsel · Daire · Kat · m² · Yıl · Durum.
   ───────────────────────────────────────────────────────────── */

.kunye {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(0, 1fr);
    border-top: 1px solid var(--border-strong);
    border-bottom: 1px solid var(--border-strong);
}

/* Az öğede sütunları şişirme — soldan hizala. */
.kunye.is-compact {
    grid-auto-columns: minmax(0, max-content);
    justify-content: start;
    gap: clamp(20px, 4vw, 56px);
}

.kunye-cell {
    padding: var(--space-3) var(--space-4) var(--space-3) 0;
    border-left: 1px solid var(--border);
    padding-left: var(--space-4);
    min-width: 0;
}
.kunye-cell:first-child {
    border-left: 0;
    padding-left: 0;
}
.kunye.is-compact .kunye-cell {
    border-left: 0;
    padding-left: 0;
    padding-right: 0;
}

.kunye-label {
    display: block;
    font-size: var(--fs-kunye);
    font-weight: 700;
    letter-spacing: var(--ls-kunye);
    text-transform: uppercase;
    color: var(--primary-ink);
    margin-bottom: 6px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.kunye-value {
    display: block;
    font-size: clamp(17px, 1.5vw, 22px);
    font-weight: 600;
    line-height: 1.2;
    color: var(--text);
    /* Rakamlar sütun sütun hizalansın — künyenin tablo karakteri buradan gelir. */
    font-variant-numeric: tabular-nums;
    overflow-wrap: break-word;
}

.kunye-value .kunye-unit {
    font-size: .62em;
    font-weight: 600;
    letter-spacing: .04em;
    color: var(--text-2);
    opacity: .7;
    margin-left: 2px;
}

/* Koyu zeminde (hero, footer) çizgiler ve etiket rengi otomatik döner. */
.on-dark .kunye,
.on-dark .kunye-cell { border-color: var(--border-dark); }


/* ─────────────────────────────────────────────────────────────
   2. EDİTORYAL SATIR — kart yerine tam genişlik satır

   Hizmetler bir SIRA DEĞİL, bu yüzden 01/02/03 numarası verilmiyor
   (numara sıralı içeriğe aittir; yapım sürecinde kullanılır).
   Ayrım künye dilinden geliyor: her satırın sağında kapsamı özetleyen
   teknik bir etiket var.
   ───────────────────────────────────────────────────────────── */

.ed-list {
    border-top: 1px solid var(--border);
}

.ed-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr) auto;
    align-items: baseline;
    gap: var(--space-4);
    padding: clamp(20px, 2.6vw, 34px) 0;
    border-bottom: 1px solid var(--border);
    position: relative;
}

.ed-row-title {
    font-family: var(--font-display);
    font-size: clamp(22px, 2.4vw, 34px);
    font-weight: 600;
    line-height: 1.1;
    letter-spacing: var(--ls-tight);
    color: var(--text);
    margin: 0;
    min-width: 0;
}

.ed-row-desc {
    font-size: var(--fs-body-sm);
    line-height: var(--lh-body);
    color: var(--text-2);
    margin: 0;
    min-width: 0;
}

/* Kapsam etiketi — künye ile aynı mikro tipografi. */
.ed-row-scope {
    font-size: var(--fs-kunye);
    font-weight: 700;
    letter-spacing: var(--ls-kunye);
    text-transform: uppercase;
    color: var(--primary-ink);
    white-space: nowrap;
}

@media (max-width: 900px) {
    .ed-row {
        grid-template-columns: minmax(0, 1fr);
        gap: var(--space-2);
    }
    .ed-row-scope { order: -1; }
}


/* ─────────────────────────────────────────────────────────────
   3. DEV ALINTI — tek yorum için

   Eskiden tek yorum geniş bir ızgarada kart olarak yüzüyordu. Tek bir
   referans varsa onu kart yapmak zayıf gösterir; büyütmek güçlendirir.
   ───────────────────────────────────────────────────────────── */

.pull {
    max-width: 22ch;
    margin-inline: auto;
    text-align: center;
}

.pull-quote {
    font-family: var(--font-display);
    font-size: clamp(26px, 3.6vw, 52px);
    font-weight: 500;
    line-height: 1.14;
    letter-spacing: var(--ls-tight);
    color: var(--text);
    margin: 0;
    max-width: 18ch;
    margin-inline: auto;
    text-wrap: balance;
}

.pull-attr {
    margin-top: var(--space-4);
    font-size: var(--fs-kunye);
    font-weight: 700;
    letter-spacing: var(--ls-kunye);
    text-transform: uppercase;
    color: var(--primary-ink);
}

.pull-attr-meta {
    display: block;
    margin-top: 4px;
    letter-spacing: .04em;
    text-transform: none;
    font-weight: 500;
    color: var(--text-2);
}


/* ─────────────────────────────────────────────────────────────
   4. SAÇ TELİ ÇİZGİ — bölüm ayracı
   Faz 3'te scroll-driven olarak soldan sağa çizilecek.
   ───────────────────────────────────────────────────────────── */

.hair {
    height: 1px;
    background: var(--border-strong);
    border: 0;
    margin: 0;
    transform-origin: left center;
}


/* ─────────────────────────────────────────────────────────────
   5. MİKRO ETİKET — başlık etiketi taşıyan ama başlık OLMAYAN öğeler

   h1–h5'e blanket Fraunces vermek footer sütun başlıklarını da yakalıyordu:
   11px, büyük harf, harf aralıklı. Serif o ölçekte okunmuyor ve zayıf duruyor
   — mikro tipografi sans ister. Bu sınıf onları Manrope'a geri döndürür.
   Kural: bir başlık büyük harf + harf aralıklıysa etikettir, .label-micro alır.
   ───────────────────────────────────────────────────────────── */

.label-micro {
    font-family: var(--font);
    font-weight: 700;
    letter-spacing: var(--ls-eyebrow);
    text-transform: uppercase;
}


/* Künye bandı — hero'nun hemen altında, kağıda basılı gibi düz.
   Eski .stats-section negatif margin ile hero'nun ÜSTÜNE biniyordu; o,
   gölgeli beyaz kartlar için tasarlanmış bir hamleydi. Künyenin zemini
   yok, binince fotoğrafın üstünde okunmuyordu. Bindirme kaldırıldı. */
.kunye-band {
    padding: clamp(28px, 3.4vw, 48px) var(--container-pad);
    background: var(--bg);
    position: relative;
    z-index: 5;
}
.kunye-band .container { max-width: var(--container); margin-inline: auto; }

@media (max-width: 760px) {
    /* Dört sütun dar ekranda okunmuyor — ikişerli iki satır. */
    .kunye { grid-auto-flow: row; grid-template-columns: repeat(2, minmax(0, 1fr)); }
    /* Etiketler dar sütuna sığmayıp kesiliyordu ("TAMAMLANAN P…").
       Mobilde satır kaydırmaya izin ver — künye bir tablo, etiketi
       yarım göstermek bilgiyi yok ediyor. */
    .kunye-label {
        white-space: normal;
        overflow: visible;
        text-overflow: clip;
        line-height: 1.25;
    }
    .kunye-cell:nth-child(odd) { border-left: 0; padding-left: 0; }
    .kunye-cell:nth-child(n+3) { border-top: 1px solid var(--border); }
}


/* ─────────────────────────────────────────────────────────────
   6. YAPIŞKAN VİTRİN — imza anı

   Sol sütun (görsel) sabitlenir, sağ sütun (proje künyeleri) kayar.
   position:sticky kullanılır — scroll-driven animasyona göre avantajı
   her tarayıcıda (Firefox dahil) çalışması ve JS gerektirmemesi.
   Aktif görsel geçişi JS ile yapılır; JS yoksa ilk görsel görünür kalır
   ve liste normal okunur — içerik hiçbir koşulda kaybolmaz.
   ───────────────────────────────────────────────────────────── */

.showcase {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: clamp(28px, 4vw, 72px);
    align-items: start;
}

.showcase-media {
    position: sticky;
    top: clamp(90px, 12vh, 130px);
    aspect-ratio: 3 / 2;
    border-radius: var(--r-img);
    overflow: hidden;
    background: var(--surface);
}

.showcase-shot {
    position: absolute;
    inset: 0;
    margin: 0;
    opacity: 0;
    transition: opacity .45s var(--ease);
}
.showcase-shot.is-active { opacity: 1; }
.showcase-shot picture,
.showcase-shot img { width: 100%; height: 100%; display: block; }
.showcase-shot img { object-fit: cover; }

.showcase-list {
    list-style: none;
    margin: 0;
    padding: 0;
    border-top: 1px solid var(--border);
}

.showcase-item { border-bottom: 1px solid var(--border); }

.showcase-link {
    display: block;
    padding: clamp(24px, 3vw, 40px) 0 clamp(24px, 3vw, 40px) var(--space-4);
    color: inherit;
    text-decoration: none;
    /* DİKKAT: aktiflik için opacity KULLANILMAZ.
       Önce opacity:.5 vardı; metni kontrast eşiğinin altına düşürüyordu
       (Lighthouse erişilebilirlik hatası). Aktiflik artık soldaki altın
       çizgiyle veriliyor — hem daha güçlü bir işaret hem de metin her
       durumda tam okunur. */
    border-left: 2px solid transparent;
    margin-left: -2px;
    transition: border-color var(--t), background-color var(--t);
}
.showcase-item.is-current .showcase-link {
    border-left-color: var(--primary);
    /* Yarı saydam zemin KULLANILMIYOR: kontrast denetleyicileri altındaki
       rengi hesaplayamıyor ve metni hatalı olarak "düşük kontrast" işaretliyor.
       Aktiflik işareti zaten soldaki altın çizgi. */
}
.showcase-link:hover,
.showcase-link:focus-visible { border-left-color: var(--border-strong); }

.showcase-title {
    font-family: var(--font-display);
    font-size: clamp(24px, 2.6vw, 38px);
    font-weight: 600;
    line-height: 1.08;
    letter-spacing: var(--ls-tight);
    margin: var(--space-2) 0 var(--space-3);
}

.showcase-desc {
    font-size: var(--fs-body-sm);
    line-height: var(--lh-body);
    color: var(--text-2);
    margin: 0 0 var(--space-4);
    max-width: 46ch;
}

.showcase-kunye { border: 0; margin-bottom: var(--space-4); }
.showcase-kunye .kunye-cell { padding-top: 0; padding-bottom: 0; }
.showcase-kunye .kunye-value { font-size: var(--fs-body-sm); font-weight: 600; }

.showcase-cta {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: var(--fs-kunye);
    font-weight: 700;
    letter-spacing: var(--ls-kunye);
    text-transform: uppercase;
    color: var(--primary-ink);
}
.showcase-link:hover .showcase-cta .ico { transform: translateX(4px); }
.showcase-cta .ico { transition: transform var(--t); }

/* Dar ekranda yapışkanlık anlamsız: görsel her öğenin üstünde tekrar eder.
   Tek sütuna düşülür, yapışkan sütun normal akışa döner. */
@media (max-width: 900px) {
    .showcase { grid-template-columns: minmax(0, 1fr); }
    /* position: relative — 'static' DEĞİL.
       .showcase-shot öğeleri position:absolute; kapsayıcı static olunca
       konumlandırma bağlamı kayboluyor ve görseller sayfa boyutuna
       şişiyordu (mobilde 393x1462 px, ekranın %222'si).
       relative yapışkanlığı kaldırır ama bağlamı korur. */
    /* Mobilde paylaşılan görsel sütunu KALDIRILIR, her projenin kendi
       görseli gösterilir (.showcase-item-img).
       Denenen ve reddedilen iki yol:
       - static: .showcase-shot absolute olduğu için bağlam kaybolup
         görseller 393x1462 px'e (ekranın %222'si) şişiyordu.
       - sticky: tek sütunda görsel, altından akan metnin üstüne binip
         proje başlığını kapatıyordu.
       Tek sütunda doğru olan, görseli ait olduğu projenin yanına koymak. */
    .showcase-media { display: none; }
    .showcase-link { border-left: 0; margin-left: 0; padding-left: 0; }
}


/* ─────────────────────────────────────────────────────────────
   7. NEDEN BİZ — lider blok + saç teli sütunlar

   Önceki hâl: beş eşit kutu, her birinde küçük bir ikon. Hepsi aynı
   ağırlıkta olduğu için hiçbiri öne çıkmıyordu ve beş ikon gereksiz
   gürültü yapıyordu. Ağırlık tek bloğa toplandı, geri kalanı ince
   çizgiyle ayrılmış metin sütunlarına indi.
   ───────────────────────────────────────────────────────────── */

.why-split {
    display: grid;
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    gap: clamp(28px, 4vw, 64px);
    align-items: start;
}

.why-lead {
    background: var(--dark);
    color: var(--on-dark);
    border-radius: var(--r-card);
    padding: clamp(28px, 3.2vw, 48px);
}
.why-lead-title {
    font-family: var(--font-display);
    font-size: clamp(28px, 3vw, 44px);
    font-weight: 600;
    line-height: 1.06;
    letter-spacing: var(--ls-tight);
    color: var(--primary);
    margin: 0 0 var(--space-4);
}
.why-lead p { color: var(--on-dark-2); margin: 0; line-height: var(--lh-body); }

.why-cols {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0;
}
.why-col {
    padding: clamp(18px, 2vw, 28px) clamp(18px, 2vw, 28px) clamp(18px, 2vw, 28px) 0;
    border-top: 1px solid var(--border);
}
.why-col:nth-child(even) {
    border-left: 1px solid var(--border);
    padding-left: clamp(18px, 2vw, 28px);
}
.why-col-title {
    font-family: var(--font-display);
    font-size: clamp(19px, 1.7vw, 24px);
    font-weight: 600;
    letter-spacing: var(--ls-tight);
    margin: 0 0 var(--space-2);
}
.why-col p { font-size: var(--fs-body-sm); line-height: var(--lh-body); margin: 0; }

@media (max-width: 900px) {
    .why-split  { grid-template-columns: minmax(0, 1fr); }
    .why-cols   { grid-template-columns: minmax(0, 1fr); }
    .why-col:nth-child(even) { border-left: 0; padding-left: 0; }
}


/* ─────────────────────────────────────────────────────────────
   8. KÜNYE — dikey dizilim (proje detay yan sütunu)

   Yatay künye geniş bantlar için; dar sütunda satır satır okunur:
   solda etiket, sağda hizalı değer, aralarında saç teli çizgi.
   Gerçek bir çizim antedi de böyle okunur.
   ───────────────────────────────────────────────────────────── */

.kunye--stack {
    display: block;
    border: 0;
    margin: 0 0 var(--space-5);
}

.kunye-row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--space-4);
    padding: var(--space-3) 0;
    border-bottom: 1px solid var(--border);
}
.kunye-row:first-child { border-top: 1px solid var(--border-strong); }

.kunye--stack .kunye-label {
    margin: 0;
    flex: none;
}
.kunye--stack .kunye-value {
    font-size: var(--fs-body-sm);
    font-weight: 700;
    text-align: right;
    min-width: 0;
    overflow-wrap: break-word;
}

.proj-kunye-card {
    background: var(--card);
    border-radius: var(--r-card);
    padding: clamp(20px, 2.4vw, 30px);
    box-shadow: var(--shadow);
}
.proj-kunye-head { margin: 0 0 var(--space-4); color: var(--primary-ink); }


/* ─────────────────────────────────────────────────────────────
   9. KURUMSAL SAYFASI yardımcıları
   Hepsi eskiden satır içi style ile yazılıyordu.
   ───────────────────────────────────────────────────────────── */

.vision-list  { margin-top: var(--space-6); }
.vision-stack { display: flex; flex-direction: column; gap: var(--space-4); }

/* auto-fit KULLANILMAZ (CLAUDE.md kuralı): az öğede kalan alanı bölüştürüp
   blokları şişiriyor. Sütun sayısı sabit yazılır. */
.why-two-col {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: clamp(24px, 3vw, 44px);
}
@media (max-width: 860px) {
    .why-two-col { grid-template-columns: minmax(0, 1fr); }
}


/* ─────────────────────────────────────────────────────────────
   10. İNİŞ SAYFASI (hizmet sayfaları)
   Tek sütun, okuma odaklı. Metin genişliği 68 karakterle sınırlı —
   uzun satır okumayı zorlaştırır.
   ───────────────────────────────────────────────────────────── */

.landing-body { max-width: 68ch; }

.landing-block + .landing-block { margin-top: clamp(28px, 3.4vw, 48px); }

.landing-block-title {
    font-family: var(--font-display);
    font-size: clamp(23px, 2.2vw, 32px);
    font-weight: 600;
    line-height: 1.12;
    letter-spacing: var(--ls-tight);
    margin: 0 0 var(--space-3);
}
.landing-block p { line-height: var(--lh-body); margin: 0; }

.landing-faq { max-width: 68ch; margin-inline: auto; }

/* Sayfa başlığı bandındaki kapsam etiketi */
.page-header-band .ed-row-scope {
    display: block;
    margin-bottom: var(--space-3);
}


/* ─────────────────────────────────────────────────────────────
   11. REFERANS PANELİ — tek yorum için

   Önce dev serif alıntı denendi ve GERİ ALINDI: 9 kelimelik bir yoruma
   52px tipografi orantısızdı, metin boşlukta yüzüyordu ve puan
   gösterilmiyordu. Şimdi koyu panel (sitenin diğer koyu adalarıyla aynı
   dil), solda alıntı + puan, sağda somut rakamlar.
   ───────────────────────────────────────────────────────────── */

.testi-panel {
    display: grid;
    grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
    gap: clamp(28px, 4vw, 64px);
    align-items: center;
    background: var(--dark);
    border-radius: var(--r-card);
    padding: clamp(30px, 4vw, 60px);
}

.testi-panel-quote { margin: 0; position: relative; }

.testi-mark {
    display: block;
    font-family: var(--font-display);
    font-size: clamp(56px, 6vw, 88px);
    line-height: .7;
    color: var(--primary);
    margin-bottom: var(--space-2);
}

.testi-panel-quote blockquote {
    font-family: var(--font-display);
    font-size: clamp(22px, 2.5vw, 34px);
    font-weight: 500;
    line-height: 1.25;
    letter-spacing: var(--ls-tight);
    color: var(--on-dark);
    margin: 0 0 var(--space-5);
    text-wrap: balance;
}

.testi-panel-quote figcaption { display: flex; flex-direction: column; gap: 4px; }

.testi-stars {
    display: flex;
    gap: 3px;
    color: var(--primary);
    margin-bottom: var(--space-2);
}

.testi-panel-quote figcaption strong {
    font-size: var(--fs-body);
    color: var(--on-dark);
}
.testi-role {
    font-size: var(--fs-kunye);
    font-weight: 700;
    letter-spacing: var(--ls-kunye);
    text-transform: uppercase;
    color: var(--on-dark-2);
}

/* — Sağ sütun: rakamlar — */
.testi-panel-facts {
    display: grid;
    gap: var(--space-4);
    border-left: 1px solid var(--border-dark);
    padding-left: clamp(24px, 3vw, 44px);
}

.testi-fact { display: flex; flex-direction: column; }
.testi-fact-num {
    font-size: clamp(26px, 2.6vw, 38px);
    font-weight: 700;
    line-height: 1;
    color: var(--primary);
    font-variant-numeric: tabular-nums;
}
.testi-fact-lbl {
    margin-top: 4px;
    font-size: var(--fs-kunye);
    font-weight: 700;
    letter-spacing: var(--ls-kunye);
    text-transform: uppercase;
    color: var(--on-dark-2);
}

.testi-cta {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: var(--space-2);
    font-size: var(--fs-kunye);
    font-weight: 700;
    letter-spacing: var(--ls-kunye);
    text-transform: uppercase;
    color: var(--primary);
    text-decoration: none;
}
.testi-cta:hover .ico { transform: translateX(4px); }
.testi-cta .ico { transition: transform var(--t); }

@media (max-width: 900px) {
    .testi-panel { grid-template-columns: minmax(0, 1fr); }
    .testi-panel-facts {
        border-left: 0;
        padding-left: 0;
        padding-top: var(--space-5);
        border-top: 1px solid var(--border-dark);
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
    .testi-cta { grid-column: 1 / -1; }
}

/* Puan yıldızları DOLU olmalı — Lucide çizgi tabanlı, boş yıldız
   "verilmemiş puan" gibi okunuyordu. */
.testi-stars .ico {
    fill: currentColor;
    stroke: currentColor;
    stroke-width: 1;
}


/* Proje başına görsel — YALNIZ mobilde.
   Masaüstünde paylaşılan yapışkan sütun kullanılır, bu gizlidir. */
.showcase-item-img { display: none; }

@media (max-width: 900px) {
    .showcase-item-img {
        display: block;
        margin: 0 0 var(--space-4);
        border-radius: var(--r-img);
        overflow: hidden;
        aspect-ratio: 16 / 10;
        background: var(--surface);
    }
    .showcase-item-img picture,
    .showcase-item-img img {
        width: 100%;
        height: 100%;
        display: block;
    }
    .showcase-item-img img { object-fit: cover; }
}