/* ============================================================
   246 Software — Portfolyo sayfaları

   /portfolyo         → .works-page  (tüm işlerin listesi)
   /portfolyo/{slug}  → .work-detail (tek işin detayı)

   Kart (.work) ve ızgara (.works-grid) portfolio.css içinde; liste
   sayfası o dosyayı da yüklüyor.
   ============================================================ */

/* Header sabit konumlu; iki sayfa da içeriği onun altından başlatmalı.
   Alt boşluk küçük: her ikisi de iletişim bölümüyle bitiyor ve onun kendi
   üst boşluğuyla toplanınca arada kocaman bir aralık kalıyordu. */
.works-page,
.work-detail {
    padding-block-start: calc(var(--header-h) + clamp(1.5rem, calc(var(--vw) * 2.6), 3.25rem));
    padding-block-end: clamp(1.5rem, calc(var(--vw) * 2.5), 3rem);
    background-color: var(--c-black);
    color: var(--c-white);
}


/* ============================================================
   Liste sayfası
   ============================================================ */

/* Genişlik sınırı yok: giriş paragrafı da alttaki kart ızgarasıyla aynı
   sağ kenarda bitiyor. */
.works-page__head {
    max-width: none;
}

.works-page__eyebrow {
    color: var(--c-yellow);
    font-size: 0.75rem;
    font-weight: var(--fw-bold);
    letter-spacing: 0.15em;
    line-height: 1;
    text-transform: uppercase;
}

.works-page__title {
    margin-block-start: var(--sp-4);
    font-size: clamp(2rem, calc(var(--vw) * 4), 4.5rem);
    font-weight: var(--fw-extrabold);
    letter-spacing: -0.03em;
    line-height: 1.05;
}

.works-page__title-accent {
    color: var(--c-yellow);
    font-style: italic;
    padding-inline-end: 0.1em;
}

.works-page__lead {
    margin-block-start: var(--sp-5);
    color: var(--c-gray-400);
    font-size: clamp(0.9375rem, calc(var(--vw) * 0.95), 1.125rem);
    line-height: 1.7;
}

/* ============================================================
   Detay sayfası
   ============================================================ */

/* Sayfanın geri kalanı 1800px'lik kabı kullanıyor ama detay sayfası tek bir
   dar sütun: mockup'lar bu sayede hem daha makul boyda kalıyor hem de dizüstü
   genişliğinde ekranın sağ kenarına yapışmayıp ortalanıyor. Başlık, görseller
   ve metin aynı hizada başlar. */
.work-detail .container,
/* Detay sayfasının altındaki iletişim bölümü de aynı sütunu kullansın;
   lego zemini tam genişlikte kalır, yalnızca içerik hizalanır. */
.work-detail + .contact .container {
    max-width: 1180px;
}

.work-detail__back {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-2);
    color: var(--c-gray-400);
    font-size: 0.9375rem;
    font-weight: var(--fw-medium);
    transition: gap var(--t-fast), color var(--t-fast);
}

.work-detail__back:hover {
    gap: var(--sp-3);
    color: var(--c-yellow);
}

.work-detail__head {
    margin-block-start: clamp(1.5rem, calc(var(--vw) * 2.4), 2.75rem);
}

.work-detail__kind {
    color: var(--c-yellow);
    font-size: 0.75rem;
    font-weight: var(--fw-bold);
    letter-spacing: 0.15em;
    line-height: 1;
    text-transform: uppercase;
}

.work-detail__titles {
    display: flex;
    align-items: baseline;
    gap: var(--sp-4);
    margin-block-start: var(--sp-4);
}

.work-detail__title {
    font-size: clamp(1.75rem, calc(var(--vw) * 3.4), 3.75rem);
    font-weight: var(--fw-extrabold);
    letter-spacing: -0.03em;
    line-height: 1.05;
}

.work-detail__year {
    flex: 0 0 auto;
    color: var(--c-gray-500);
    font-size: clamp(0.875rem, calc(var(--vw) * 0.9), 1rem);
    font-weight: var(--fw-medium);
}


/* ---------- Web işi: masaüstü + telefon mockup'ı ---------- */
.mockups {
    display: flex;
    align-items: flex-end;
    gap: clamp(1rem, calc(var(--vw) * 2.4), 2.75rem);
    margin-block-start: clamp(2rem, calc(var(--vw) * 3.6), 4rem);
}

/*
 * flex-basis 0 + flex-grow = görselin en/boy oranı. Kalan genişlik oranlara
 * göre paylaşıldığı için iki görselin genişlikleri oranlarıyla doğru orantılı
 * olur, yani ikisi de aynı yükseklikte basılır. Mockup tuvalleri değişirse bu
 * iki sayı da güncellenmeli: 1600/900 = 1.778, 500/1036 = 0.483.
 */
.mockups__desktop {
    flex: 1.778 1 0;
    min-width: 0;
}

.mockups__mobile {
    flex: 0.483 1 0;
    min-width: 0;
}

.mockups img {
    width: 100%;
    height: auto;
    border-radius: var(--radius-md);
}


/* ---------- Mobil işi: telefon mockup'ları ---------- */
/* Görsellerin oranı aynı olduğu için ızgara yüksekliği kendiliğinden hizalanır */
.shots {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: clamp(0.75rem, calc(var(--vw) * 1.6), 2rem);
    margin-block-start: clamp(2rem, calc(var(--vw) * 3.6), 4rem);
}

.shots img {
    width: 100%;
    height: auto;
}

/* Yönetim paneli gibi yatay ekranlar: satırda iki tane */
.shots--wide {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    margin-block-start: clamp(1rem, calc(var(--vw) * 1.8), 2rem);
}

.shots--wide img {
    border-radius: var(--radius-md);
}


/* ---------- Dosya konmadıysa görünen yer tutucular ---------- */
.mockups__placeholder,
.shots__placeholder {
    display: grid;
    place-items: center;
    padding: var(--sp-4);
    color: var(--c-gray-500);
    font-size: 0.8125rem;
    text-align: center;
    text-wrap: balance;
    border: 1px dashed rgba(255, 255, 255, 0.22);
    border-radius: var(--radius-md);
}

.mockups__placeholder--desktop { aspect-ratio: 1600 / 900; }
.mockups__placeholder--mobile  { aspect-ratio: 500 / 1036; }
.shots__placeholder            { aspect-ratio: 1482 / 3072; }


/* ---------- Sektör · hizmet · platform ---------- */
.work-detail__facts {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-3) clamp(1.5rem, calc(var(--vw) * 3), 3rem);
    margin-block-start: clamp(1.25rem, calc(var(--vw) * 1.8), 2rem);
}

.work-detail__facts dt {
    color: var(--c-gray-500);
    font-size: 0.6875rem;
    font-weight: var(--fw-bold);
    letter-spacing: 0.15em;
    text-transform: uppercase;
}

.work-detail__facts dd {
    margin-block-start: var(--sp-1);
    color: var(--c-white);
    font-size: clamp(0.9375rem, calc(var(--vw) * 0.95), 1.0625rem);
    font-weight: var(--fw-semibold);
}

.work-detail__facts a {
    color: var(--c-yellow);
    transition: color var(--t-fast);
}

.work-detail__facts a:hover {
    color: var(--c-white);
}


/* ---------- Proje anlatımı ---------- */
/* Tipografi blog.css'teki .post__body'den geliyor; burada yalnızca mockup'larla
   arasındaki boşluk. Genişlik sınırı yok: metin mockup satırının sağ kenarında bitiyor. */
.post__body.work-detail__body {
    margin-block-start: clamp(2rem, calc(var(--vw) * 3.4), 3.75rem);
}


/* ---------- İlgili hizmet bağlantısı ---------- */
.work-detail__service {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--sp-2) var(--sp-4);
    margin-block-start: clamp(2rem, calc(var(--vw) * 3), 3.25rem);
    padding: clamp(1.125rem, calc(var(--vw) * 1.6), 1.875rem);
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 2px;
    transition: border-color var(--t-fast);
}

.work-detail__service:hover {
    border-color: var(--c-yellow);
}

.work-detail__service-label {
    color: var(--c-gray-400);
    font-size: clamp(0.9375rem, calc(var(--vw) * 0.95), 1.125rem);
}

.work-detail__service-name {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-2);
    color: var(--c-yellow);
    font-size: clamp(1.0625rem, calc(var(--vw) * 1.2), 1.375rem);
    font-weight: var(--fw-semibold);
    transition: gap var(--t-fast);
}

.work-detail__service:hover .work-detail__service-name {
    gap: var(--sp-3);
}


/* ============================================================
   Kırılımlar
   ============================================================ */

/* Dar ekranda dört telefon 2+2 olarak iki satıra iner, yönetim paneli
   ekranları ise yan yana okunmayacağı için alt alta geçer */
@media (max-width: 860px) {
    .shots {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .shots--wide {
        grid-template-columns: 1fr;
    }
}

/* Masaüstü ve telefon mockup'ı yan yana sığmıyor: alt alta, telefon ortada */
@media (max-width: 720px) {
    .mockups {
        flex-direction: column;
        align-items: center;
    }

    .mockups__desktop,
    .mockups__mobile {
        flex: 0 0 auto;
        width: 100%;
    }

    .mockups__mobile {
        max-width: 17rem;
    }
}


/* ---------- İş detayı: "Diğer işlerimiz" ---------- */
.work-detail__more {
    margin-block-start: clamp(3rem, calc(var(--vw) * 5), 5.5rem);
}

.work-detail__more-title {
    font-size: clamp(1.5rem, calc(var(--vw) * 2.2), 2.5rem);
    font-weight: var(--fw-bold);
    letter-spacing: -0.03em;
    line-height: 1.1;
}