/* ═══════════════════════════════════════════
   LIS DE JUIN, Collection Detail Page
═══════════════════════════════════════════ */

.collection-page {
    padding-top: 80px;
    background: var(--clr-noir-deep);
    min-height: 100vh;
}

.collection-breadcrumb-bar {
    padding: 20px 0 8px;
}

.collection-loading {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 50vh;
}

/* ── HERO ── */
/* Kapak görseli KIRPILMIYOR (2026-08-02 kararı).

   Önceden hero sabit yükseklikteydi (min(46vh,460px)) ve görsel
   object-fit: cover ile o kutuya kırpılıyordu; kadraj dikey editorial kare
   varsayımıyla `center 22%` ayarlıydı. İşletme sahibi 16:9 kapak yükleyince
   görselin büyük kısmı kesildi. Artık görsel kendi oranında duruyor: hangi
   oranda yüklenirse o şekilde görünüyor, hiçbir varsayım yok.
   Look sayfasında da aynı karar alınmıştı (fit-content çerçeve). */
/* KOLEKSİYON BANDI, SABİT 16:5 ORAN (2026-08-02, işletme sahibi kararı).

   Önceki hâlde bant tam genişlikteydi ama görsel kendi oranında ortada
   duruyordu: 1920x1080 (16:9) bir kapak 1280px ekranda yalnızca 711px
   yer kaplıyor, iki yanda 284'er piksel krem boşluk kalıyordu.

   Artık oran sabit: kapak görseli bandı kenardan kenara dolduruyor.
   Bandın PİKSEL genişliği ekrana göre değişir (tam genişlik), sabit olan
   ORANDIR. Kapaklar 16:5 hazırlanır, önerilen dosya 2560x800.

   object-fit: cover, oranı tutan bir görselde HİÇBİR ŞEY kırpmaz; yanlış
   oranda bir kapak yüklenirse ortadan kırpar (boş bırakmaktansa doğrusu). */
.col-hero {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 5;
    overflow: hidden;
    background: var(--clr-noir);
}

.col-hero-img,
.col-hero-img picture {
    display: block;
    width: 100%;
    height: 100%;
}

.col-hero-img img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

/* Karartma gradyanı KALDIRILDI: görselin üstünde okunacak yazı kalmadı,
   fotoğrafı gereksiz yere karartıyordu. */

/* Başlık bloğu artık görselin altında, Hikâye bölümünün üstünde.

   HİZA: Hikâye bölümü 720px'lik ortalanmış bir sütun kullanıyor
   (.col-story-inner). İlk sürümde intro tam container genişliğindeydi,
   başlık en solda, "HİKÂYE" ise içeride kalıyordu; iki blok birbirini
   tutmuyordu. Aynı ölçü buraya da verildi, ikisi tek eksende. */
.col-intro {
    padding: clamp(40px, 6vw, 72px) 0 clamp(24px, 3vw, 40px);
}

.col-intro .container {
    max-width: calc(720px + 2 * var(--container-padding));
}

/* RENKLER DEĞİŞTİ: bu üç eleman koyu görselin üstündeyken --clr-on-dark
   kullanıyordu. Artık açık zeminde duruyorlar, aynı renklerle okunmazlardı.
   Etikette düz --clr-rose (#C0848D) DEĞİL --clr-rose-text (#8E4E5A):
   düz gül tonu porselen zeminde 2,59:1 veriyor, metinde kullanılmıyor. */
.col-hero-tag {
    display: inline-block;
    font-family: var(--font-heading);
    font-size: 11px;
    letter-spacing: 5px;
    text-transform: uppercase;
    color: var(--clr-rose-text);
    margin-bottom: 20px;
}

.col-hero-title {
    /* --font-display hic tanimli DEGILDI, sessizce --font-heading'e dusuyordu.
       Token EKLEMIYORUZ: ayni fonta ikinci bir isim ileride sessiz sapma uretir.
       Sayfa basliklari sitede Josefin (shop/faq/checkout ile ayni kalip),
       gorunum degismiyor, yalnizca resmilesiyor. */
    font-family: var(--font-heading);
    font-size: var(--fs-h1);
    font-weight: 300;
    letter-spacing: 2px;
    color: var(--clr-ink);
    line-height: 1.05;
    margin: 0 0 12px;
    max-width: 780px;
}

.col-hero-tagline {
    font-family: var(--font-body);
    font-style: italic;
    font-size: var(--fs-lead);
    color: var(--clr-text-muted);
    max-width: 560px;
    line-height: 1.55;
}

/* Kapak gorseli olmayan koleksiyonlarda hero, krem zeminde metin basligina doner.
   (collections.cover_image bos oldugu surece look fotografiyla sahte kapak
   basmak yerine sade baslik gosterilir.) */
/* Kapak görseli yoksa bant tamamen gizlenir. Başlık artık bu bölümün
   İÇİNDE DEĞİL, altındaki .col-intro'da; o yüzden bandı gizlemek metni
   götürmüyor. (Eskiden overlay burada olduğu için bant "metin varyantına"
   dönüştürülüyordu; o kurallar artık karşılıksızdı.) */
.col-hero--text {
    display: none;
}

/* ── STORY ── */
.col-story {
    padding: 56px 0 24px;
    background: var(--clr-noir-deep);
}

/* Hikaye tek sutun: 240px'lik sticky sol sutun tek paragraflik icerikte dev
   bir bosluk birakiyordu. Etiket ve sus cizgisi paragrafin ustune alindi
   (mobil varyant zaten boyleydi, masaustu ona esitlendi). */
.col-story-inner {
    max-width: calc(720px + 2 * var(--container-padding));
}

.col-story-side {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 16px;
    margin-bottom: 28px;
}

.col-story-side .section-tag {
    margin-bottom: 0;
}

.col-story-ornament {
    width: 60px;
    height: 1px;
    background: linear-gradient(90deg, var(--clr-rose) 0%, transparent 100%);
    margin: 0;
}

.col-story-body {
    display: flex;
    flex-direction: column;
    gap: 28px;
    max-width: 720px;
}

.col-story-body p {
    font-family: var(--font-body);
    font-size: 18px;
    line-height: 1.85;
    color: var(--clr-text-muted);
    margin: 0;
}

/* Drop cap KALDIRILDI: --font-display tanimsizken geometrik sans'a dusuyordu
   (drop cap serif isidir), --clr-rose acik zeminde 2,59:1 veriyordu ve tek
   paragraflik icerikte orantisiz duruyordu. Yerine sessiz lead paragraf. */
.col-story-body p:first-of-type {
    font-size: 21px;
    line-height: 1.7;
    color: var(--clr-ink-soft);
}

/* ── URUN GRIDI + kompakt alt basliklar ──
   Onceki 'section-header' kalibi sayfanin en ustundeki KOLEKSIYON etiketini
   tekrarliyor ve iki satirlik dev baslikla ~250px harciyordu. */
.col-products {
    padding: 48px 0 8px;
}

.col-subhead {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: 8px 24px;
    padding-bottom: 14px;
    margin-bottom: 40px;
    border-bottom: 1px solid rgba(34, 24, 28, 0.12);
}

.col-subhead-title {
    font-family: var(--font-heading);
    font-size: 15px;
    font-weight: 400;
    letter-spacing: 4px;
    text-transform: uppercase;
    color: var(--clr-cream);
    margin: 0;
}

.col-subhead-meta {
    font-family: var(--font-body);
    font-style: italic;
    font-size: 16px;
    color: var(--clr-text-muted);
}

/* ── LOOKS GRID ── */
.col-looks {
    padding: 56px 0 96px;
    background: var(--clr-noir-deep);
}

/* .col-cta-wrap style.css'e tasindi: looks.html collection.css yuklemiyor. */

/* ── Responsive ── */

@media (max-width: 640px) {
    /* Mobilde de sabit yükseklik YOK: görsel kendi oranında akıyor.
       Eski kurallar (40vh + overlay padding) kırpma varsayımına dayanıyordu. */
    .col-intro {
        padding: 32px 0 20px;
    }
    .col-story {
        padding: 40px 0 8px;
    }
    .col-story-body p {
        font-size: 16px;
    }
    .col-story-body p:first-of-type {
        font-size: 18px;
    }
    .col-subhead {
        margin-bottom: 28px;
    }
    .col-looks {
        padding: 56px 0 72px;
    }
}