/* ÜRETİLMİŞ DOSYA — elle düzenlenmez.
 * Kaynak: src/designs/17-proje-tekil/section.css
 *
 * Her bildirime `!important` eklendi. Sebep:
 * florax teması `.post-entry h2 { font-size: 36px !important }` gibi
 * kurallar taşıyor ve `!important` özgüllüğü dinlemiyor. Ayrıntı:
 * scripts/gs-important.mjs başlığı ve assets/base.css.
 */
/* ─── 17-proje-tekil · TEKİL PROJE SAYFASI ────────────────────────────────────
 *
 * Tez: sayfa bir ŞANTİYE DEFTERİDİR (Section.tsx başındaki nota bak).
 *
 * 🔒 Kurallar diğer yüzeylerle aynı: `!important` yazılmaz · çıplak hex yok ·
 * punto `--gs-fs-1…7` · boşluk `--gs-bo-1…6` · `opacity`/`transform`
 * TANIMLANMAZ (Ö-023) · kenarlık `border` kısayoluyla (Ö-135) · `<a>` kendi
 * kutusunu bildirir (Ö-118) · koyu zeminde `:focus-visible` ezilir (Ö-113).
 */

.gs-17-proje-tekil {
    --pt-zemin: var(--gs-koyu-zemin);
    --pt-yuzey: var(--gs-koyu-yuzey);
    --pt-metin: var(--gs-koyu-metin);
    --pt-ikincil: var(--gs-koyu-ikincil);
    --pt-silik: var(--gs-koyu-silik);
    --pt-hat: var(--gs-koyu-hat);
    --pt-eylem: var(--gs-primary);

    --pt-aralik: 0.14em;
    --pt-sinir: min(92vw, 74rem);

    background: var(--pt-zemin) !important;
    color: var(--pt-ikincil) !important;
}

.gs-17-proje-tekil .pt {
    background-image: repeating-linear-gradient(
        135deg,
        rgb(255 255 255 / 0.016) 0,
        rgb(255 255 255 / 0.016) 1px,
        transparent 1px,
        transparent 7px
    ) !important;
}

.gs-17-proje-tekil .pt-sinir {
    width: var(--pt-sinir) !important;
    margin-inline: auto !important;
}

/* ── METİN KATMANLARI — §5 ④ ─────────────────────────────────────────────── */

.gs-17-proje-tekil .pt-etiket {
    margin: 0 0 var(--gs-bo-3) !important;
    font-size: var(--gs-fs-1) !important;
    font-weight: 700 !important;
    letter-spacing: var(--pt-aralik) !important;
    text-transform: uppercase !important;
    color: var(--pt-silik) !important;
}

.gs-17-proje-tekil .pt-h2 {
    margin: 0 0 var(--gs-bo-5) !important;
    font-size: var(--gs-fs-6) !important;
    font-weight: 700 !important;
    line-height: 1.15 !important;
    letter-spacing: -0.012em !important;
    color: var(--pt-metin) !important;
}

.gs-17-proje-tekil .pt-govde {
    margin: 0 !important;
    max-width: 56ch !important;
    font-size: var(--gs-fs-4) !important;
    line-height: 1.65 !important;
    color: var(--pt-ikincil) !important;
}

/* ── KÜNYE ───────────────────────────────────────────────────────────────── */

.gs-17-proje-tekil .pt-kunye {
    padding-block: var(--gs-ritim) var(--gs-bo-6) !important;
}

.gs-17-proje-tekil .pt-ad {
    margin: 0 0 var(--gs-bo-6) !important;
    max-width: 20ch !important;
    font-size: var(--gs-fs-7) !important;
    font-weight: 800 !important;
    line-height: 1.05 !important;
    letter-spacing: -0.028em !important;
    color: var(--pt-metin) !important;
}

.gs-17-proje-tekil .pt-kunye-liste {
    display: grid !important;
    gap: var(--gs-bo-4) var(--gs-bo-6) !important;
    margin: 0 !important;
    padding: 0 !important;
    border-top: 1px solid var(--pt-hat) !important;
}

.gs-17-proje-tekil .pt-kunye-satir {
    padding-top: var(--gs-bo-3) !important;
}

.gs-17-proje-tekil .pt-kunye-et {
    margin: 0 0 var(--gs-bo-1) !important;
    font-size: var(--gs-fs-1) !important;
    font-weight: 700 !important;
    letter-spacing: var(--pt-aralik) !important;
    text-transform: uppercase !important;
    color: var(--pt-silik) !important;
}

.gs-17-proje-tekil .pt-kunye-deger {
    margin: 0 !important;
    font-size: var(--gs-fs-4) !important;
    font-weight: 700 !important;
    font-variant-numeric: tabular-nums !important;
    color: var(--pt-metin) !important;
}

/* ── ÇERÇEVE ① ───────────────────────────────────────────────────────────── */

/* ⚠️ `margin: 0` DEĞİL `margin-block: 0` (Ö-156). Kapak hem `.pt-sinir` hem
   `.pt-cerceve` taşıyor; `margin: 0` bu kuralda daha SONRA geldiği için
   `.pt-sinir`in `margin-inline: auto`sunu eziyordu ve kapak ortalanmıyordu.
   🔴 İki dünya karşılaştırması bunu YAKALAYAMAZ: kusur ikisinde de aynı.
   "Fark 0" iki dünyanın aynı olduğunu söyler, DOĞRU olduğunu değil. */
.gs-17-proje-tekil .pt-cerceve {
    position: relative !important;
    margin-block: 0 !important;
    border: 1px solid var(--pt-hat) !important;
    border-top-color: rgb(255 255 255 / 0.09) !important;
    border-radius: 0 !important;
    overflow: hidden !important;
    background: var(--pt-yuzey) !important;
}

/* `display` bir değişkenden okunur: KAPI (aşağıda, `.pt-kare`) onu `none`a
   çevirir. Değişken değil de doğrudan `display` yazılsaydı kapı çalışmazdı —
   köprü buraya `!important` ekliyor ve `!important` animasyonu yener. */
.gs-17-proje-tekil .pt-cerceve img {
    display: var(--pt-gorsel-gorunum, block) !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
}

.gs-17-proje-tekil .pt-cerceve::before,
.gs-17-proje-tekil .pt-cerceve::after {
    content: "" !important;
    position: absolute !important;
    z-index: 2 !important;
    width: 1.25rem !important;
    height: 1.25rem !important;
    pointer-events: none !important;
}

.gs-17-proje-tekil .pt-cerceve::before {
    inset-block-start: 0.55rem !important;
    inset-inline-end: 0.55rem !important;
    border-top: 1px solid rgb(255 255 255 / 0.34) !important;
    border-right: 1px solid rgb(255 255 255 / 0.34) !important;
}

.gs-17-proje-tekil .pt-cerceve::after {
    inset-block-end: 0.55rem !important;
    inset-inline-start: 0.55rem !important;
    border-bottom: 1px solid rgb(255 255 255 / 0.34) !important;
    border-left: 1px solid rgb(255 255 255 / 0.34) !important;
}

/* Kapak — defterin ilk sayfası; seriden ayrı ve daha geniş. */
.gs-17-proje-tekil .pt-kapak {
    aspect-ratio: 16 / 9 !important;
}

/* ── ŞANTİYE DEFTERİ — numaralı kareler ──────────────────────────────────── */

.gs-17-proje-tekil .pt-seri {
    padding-block: var(--gs-ritim) !important;
}

.gs-17-proje-tekil .pt-seri-izgara {
    display: grid !important;
    gap: var(--gs-bo-4) !important;
}

/* Kare oranı BÖLÜM tarafından dayatılır: galeri görselleri 1024×768 ama
   panelden başka oranda bir kare eklenebilir ve seri o zaman zıplardı. */
.gs-17-proje-tekil .pt-kare {
    aspect-ratio: 4 / 3 !important;
}

/* ── KAPI — seri, kapak inene kadar AĞI İSTEMEZ (A50 · Ö-260) ────────────────
   Mobilde karelerin yedisi `loading="lazy"` olduğu hâlde ekrana yakın sayılıp
   kapakla AYNI ANDA iniyordu; 1.6 Mbps sekize bölününce LCP 4.1 sn. Kutusu
   olmayan (`display: none`) tembel görsel indirilmez — kapı bunu kullanır.
   Kare yerini `aspect-ratio`dan alır, görsel gizliyken yükseklik değişmez.

   Üç yol, üçü de kareyi sonunda gösterir:
   ① `motion.ts` kapak inince kökü `.pt-seri-acik` yapar → kapı düşer.
   ② JS yok ya da reduced-motion (`init` hiç çağrılmaz, Ö-018) → medya
      sorgusu tutmaz, kapı HİÇ kurulmaz.
   ③ JS açık ama `motion.js` gelmedi → animasyon 4 sn sonunda biter, değişken
      kendi yedeğine (`block`) döner. Güvenlik ağı; normalde ① önce gelir.
   `scripting` ya da animasyonlu değişken bilmeyen tarayıcıda kapı yoktur. */
@media (scripting: enabled) and (prefers-reduced-motion: no-preference) {
    .gs-17-proje-tekil:not(.pt-seri-acik) .pt-kare {
        animation: pt-seri-kapi 4s step-end !important;
    }
}

@keyframes pt-seri-kapi {
    from {
        --pt-gorsel-gorunum: none;
    }
}

/* ── DAMGA ② — karenin numarası ──────────────────────────────────────────── */

.gs-17-proje-tekil .pt-damga {
    position: absolute !important;
    z-index: 3 !important;
    inset-block-start: 0 !important;
    inset-inline-start: 0 !important;
    display: flex !important;
    align-items: baseline !important;
    gap: var(--gs-bo-1) !important;
    padding: 0.42rem 0.7rem !important;
    background: var(--pt-yuzey) !important;
    border-inline-end: 1px solid var(--pt-hat) !important;
    border-block-end: 1px solid var(--pt-hat) !important;
}

.gs-17-proje-tekil .pt-damga-et {
    font-size: var(--gs-fs-1) !important;
    font-weight: 800 !important;
    letter-spacing: var(--pt-aralik) !important;
    text-transform: uppercase !important;
    color: var(--pt-silik) !important;
}

.gs-17-proje-tekil .pt-damga-no {
    font-size: var(--gs-fs-2) !important;
    font-weight: 700 !important;
    font-variant-numeric: tabular-nums !important;
    color: var(--pt-metin) !important;
}

/* ── BOŞ HÂL — §5 ⑧, ve burada GERÇEKTEN oluyor ──────────────────────────
 * Dokuz projenin dördünde galeri yok (ölçüldü). Cümle yöneticiye de
 * ziyaretçiye de dürüst: fotoğraf yok, sebebi yüklenmemiş olması. */
.gs-17-proje-tekil .pt-bos {
    margin: 0 !important;
    padding-block: var(--gs-bo-5) !important;
    border-top: 1px solid var(--pt-hat) !important;
    font-size: var(--gs-fs-3) !important;
    font-style: italic !important;
    color: var(--pt-silik) !important;
}

/* ── KAPANIŞ — §5 ⑬ ──────────────────────────────────────────────────────── */

.gs-17-proje-tekil .pt-kapanis {
    display: grid !important;
    gap: var(--gs-bo-6) !important;
    padding-block: var(--gs-ritim) !important;
    border-top: 1px solid var(--pt-hat) !important;
}

.gs-17-proje-tekil .pt-geri {
    margin: var(--gs-bo-5) 0 0 !important;
}

.gs-17-proje-tekil .pt-bag {
    display: inline-flex !important;
    gap: var(--gs-bo-2) !important;
    align-items: center !important;
    min-height: var(--gs-hedef) !important;
    border-bottom: 1px solid var(--pt-hat) !important;
    font-size: var(--gs-fs-3) !important;
    font-weight: 700 !important;
    text-decoration: none !important;
    color: var(--pt-metin) !important;
}

.gs-17-proje-tekil .pt-bag:hover {
    border-bottom-color: var(--pt-metin) !important;
}

.gs-17-proje-tekil .pt-geri-ok {
    font-weight: 400 !important;
}

.gs-17-proje-tekil .pt-dugme {
    display: inline-flex !important;
    gap: 0.7rem !important;
    align-items: center !important;
    justify-self: start !important;
    padding: 0.9rem 1.6rem !important;
    border: 0 solid transparent !important;
    border-radius: 0 !important;
    background: var(--pt-eylem) !important;
    color: var(--gs-white) !important;
    font-size: var(--gs-fs-4) !important;
    font-weight: 700 !important;
    text-decoration: none !important;
    white-space: nowrap !important;
}

.gs-17-proje-tekil .pt-dugme-ok {
    font-weight: 400 !important;
}

/* ── ODAK — koyu zeminde EZİLİR (Ö-113) ──────────────────────────────────── */

.gs-17-proje-tekil a:focus-visible {
    outline: 2px solid var(--pt-metin) !important;
    outline-offset: 3px !important;
}

/* ── 768px ve üzeri ──────────────────────────────────────────────────────── */

@media (min-width: 768px) {
    .gs-17-proje-tekil .pt-kunye-liste {
        grid-template-columns: repeat(2, minmax(0, 12rem)) !important;
        justify-content: start !important;
    }

    .gs-17-proje-tekil .pt-seri-izgara {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }

    .gs-17-proje-tekil .pt-bos {
        grid-column: 1 / -1 !important;
    }

    .gs-17-proje-tekil .pt-kapanis {
        grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr) !important;
        align-items: center !important;
    }

    .gs-17-proje-tekil .pt-dugme {
        justify-self: end !important;
    }
}