/* ==========================================================================
   ProStand — Dönüşümlü içerik blokları ve CTA şeridi
   Görsel dil: geniş beyaz alan, ince üst etiket, ağırlık kontrastlı başlık,
   teknik künye şeridi (mimari çizim antetinden esinlenmiştir).
   Ad alanı: .psx-alt* / .psx-band*  — main.css ve Bootstrap ile çakışmaz.
   ========================================================================== */
:root {
    --psx-ink: #14202b;

    /* koyu lacivert-gri, ana metin */
    --psx-ink-soft: #5b6b7a;

    /* ikincil metin */
    --psx-line: #e2e8ed;

    /* ince ayraç (beyaz zemin) */
    /* AYIRICI ÇİZGİ RENGİ — belirginliği buradan ayarlayın.
     Daha koyu = daha belirgin.
     Açık: #c6d4dd   ·   Orta: #bccbd6 (şu anki)   ·   Koyu: #a9bbc8 */
    --psx-rule: #bccbd6;
    --psx-teal: #35a9cc;

    /* marka turkuazı */
    --psx-teal-dk: #1f7f9c;

    /* hover / vurgu */
    --psx-red: #d92b1f;

    /* marka kırmızısı, çok az kullanılır */
    --psx-wash: #f5f8fa;

    /* açık zemin */
}

/* ---------- Bölüm kabuğu ---------- */
.psx-alt {
    padding: 0;
    background: #fff;
}

.psx-alt-intro {
    max-width: 760px;
    margin: 0 auto;
    padding: 72px 12px 8px;
    text-align: center;
}

.psx-alt-intro .psx-eyebrow {
    justify-content: center;
}

.psx-alt-intro h2 {
    font-family: 'Montserrat', sans-serif;
    font-size: clamp(1.35rem, 2.6vw, 2rem);
    font-weight: 300;
    color: var(--psx-ink);
    letter-spacing: -0.01em;
    margin: 0 0 14px;
}

.psx-alt-intro h2 b {
    font-weight: 800;
}

.psx-alt-intro p {
    color: var(--psx-ink-soft);
    font-size: 0.98rem;
    line-height: 1.85;
    margin: 0;
}

/* ---------- Tek blok ---------- */
/* Tüm bloklar Bootstrap .container ile aynı hizaya oturur.
   Böylece kart ızgaraları, başlıklar ve bu bloklar aynı sol/sağ kenarı paylaşır. */
.psx-alt-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;
    gap: clamp(28px, 4vw, 60px);
    width: 100%;
    margin: 0 auto;
    padding: clamp(46px, 6vw, 84px) 12px;
}

@media (min-width: 576px)  {
    .psx-alt-row {
        max-width: 540px;
    }
}

@media (min-width: 768px)  {
    .psx-alt-row {
        max-width: 720px;
    }
}

@media (min-width: 992px)  {
    .psx-alt-row {
        max-width: 960px;
    }
}

@media (min-width: 1200px) {
    .psx-alt-row {
        max-width: 1140px;
    }
}

@media (min-width: 1400px) {
    .psx-alt-row {
        max-width: 1320px;
    }
}

.psx-alt-row + .psx-alt-row {
    border-top: 1px solid var(--psx-line);
}

/* Zebra: tek numaralı bloklarda görsel sağda */
.psx-alt-row.is-flipped .psx-alt-media {
    order: 2;
}

.psx-alt-row.is-flipped .psx-alt-body {
    order: 1;
}

/* ---------- Görsel ---------- */
.psx-alt-media {
    position: relative;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    background: var(--psx-wash);
}

.psx-alt-media img,
.psx-alt-media video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform .6s cubic-bezier(.2, .7, .3, 1);
}

.psx-alt-row:hover .psx-alt-media img {
    transform: scale(1.03);
}

/* İşaret öğesi: metrekare rozeti — mimari çizim ölçü etiketi gibi */
.psx-alt-badge {
    position: absolute;
    left: 0;
    bottom: 0;
    background: var(--psx-ink);
    color: #fff;
    font-family: 'Montserrat', sans-serif;
    font-size: 0.74rem;
    font-weight: 600;
    letter-spacing: .14em;
    text-transform: uppercase;
    padding: 9px 16px;
}

.psx-alt-badge span {
    color: var(--psx-teal);
}

/* ---------- Metin ---------- */
.psx-eyebrow {
    display: flex;
    align-items: center;
    gap: 10px;
    font-family: 'Montserrat', sans-serif;
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--psx-teal-dk);
    margin: 0 0 14px;
}

.psx-eyebrow::before {
    content: "";
    width: 26px;
    height: 2px;
    background: var(--psx-teal);
    flex: none;
}

.psx-alt-body h3 {
    font-family: 'Montserrat', sans-serif;
    font-size: clamp(1.3rem, 2.4vw, 1.85rem);
    font-weight: 300;
    color: var(--psx-ink);
    line-height: 1.25;
    letter-spacing: -0.015em;
    margin: 0 0 18px;
}

.psx-alt-body h3 b {
    font-weight: 800;
}

/* Künye şeridi — anahtar/değer, mimari antet mantığı */
.psx-spec {
    display: flex;
    flex-wrap: wrap;
    gap: 0;
    border-top: 1px solid var(--psx-line);
    border-bottom: 1px solid var(--psx-line);
    margin: 0 0 20px;
}

.psx-spec div {
    flex: 1 1 auto;
    min-width: 92px;
    padding: 10px 14px 10px 0;
}

.psx-spec div + div {
    padding-left: 14px;
    border-left: 1px solid var(--psx-line);
}

.psx-spec dt {
    font-size: 0.62rem;
    font-weight: 600;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--psx-ink-soft);
    margin: 0 0 3px;
}

.psx-spec dd {
    font-size: 0.86rem;
    font-weight: 600;
    color: var(--psx-ink);
    margin: 0;
}

.psx-alt-body ul {
    list-style: none;
    padding: 0;
    margin: 0 0 24px;
}

.psx-alt-body ul li {
    position: relative;
    padding-left: 22px;
    margin-bottom: 11px;
    font-size: 0.93rem;
    line-height: 1.7;
    color: var(--psx-ink-soft);
}

.psx-alt-body ul li::before {
    content: "";
    position: absolute;
    left: 0;
    top: .62em;
    width: 7px;
    height: 7px;
    background: var(--psx-teal);
}

.psx-alt-body ul li b {
    color: var(--psx-ink);
    font-weight: 600;
}

/* ---------- Bağlantı ---------- */
.psx-link {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    font-family: 'Montserrat', sans-serif;
    font-size: 0.76rem;
    font-weight: 700;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--psx-ink);
    text-decoration: none;
    padding-bottom: 5px;
    border-bottom: 2px solid var(--psx-teal);
    transition: color .25s, border-color .25s, gap .25s;
}

.psx-link:hover,
.psx-link:focus-visible {
    color: var(--psx-teal-dk);
    border-color: var(--psx-ink);
    gap: 15px;
}

/* ---------- CTA şeridi ---------- */
.psx-band {
    background: var(--psx-ink);
    color: #fff;
    padding: clamp(48px, 6vw, 78px) 20px;
    text-align: center;
}

.psx-band h2 {
    font-family: 'Montserrat', sans-serif;
    font-size: clamp(1.3rem, 2.6vw, 1.95rem);
    font-weight: 300;
    color: #fff;
    margin: 0 0 12px;
}

.psx-band h2 b {
    font-weight: 800;
}

.psx-band p {
    color: #a9bccb;
    max-width: 620px;
    margin: 0 auto 28px;
    line-height: 1.8;
    font-size: 0.96rem;
}

.psx-band-actions {
    display: flex;
    gap: 14px;
    justify-content: center;
    flex-wrap: wrap;
}

.psx-btn {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    font-family: 'Montserrat', sans-serif;
    font-size: 0.76rem;
    font-weight: 700;
    letter-spacing: .16em;
    text-transform: uppercase;
    padding: 15px 30px;
    text-decoration: none;
    border: 2px solid transparent;
    transition: background .25s, color .25s, border-color .25s;
}

.psx-btn-solid {
    background: var(--psx-teal);
    color: #fff;
}

.psx-btn-solid:hover,
.psx-btn-solid:focus-visible {
    background: #fff;
    color: var(--psx-ink);
}

.psx-btn-ghost {
    border-color: rgba(255, 255, 255, .35);
    color: #fff;
}

.psx-btn-ghost:hover,
.psx-btn-ghost:focus-visible {
    border-color: #fff;
    background: rgba(255, 255, 255, .08);
}

/* ---------- Erişilebilirlik ---------- */
.psx-link:focus-visible,
.psx-btn:focus-visible {
    outline: 3px solid var(--psx-teal);
    outline-offset: 3px;
}

/* ---------- Duyarlı ---------- */
@media (max-width: 900px) {
    .psx-alt-row {
        grid-template-columns: 1fr;
        gap: 26px;
        padding: 44px 20px;
    }

    /* Mobilde görsel her zaman üstte */
    .psx-alt-row.is-flipped .psx-alt-media {
        order: 1;
    }

    .psx-alt-row.is-flipped .psx-alt-body {
        order: 2;
    }

    .psx-alt-media {
        aspect-ratio: 16 / 10;
    }

    .psx-alt-intro {
        padding-top: 52px;
    }
}

/* Mobilde künye tek satırda kalsın: üç kutu eşit paylaşır, alta inmez.
   Değer metni gerekirse kendi kutusunda alt satıra geçer. */
@media (max-width: 700px) {
    .psx-spec {
        flex-wrap: nowrap;
    }

    .psx-spec div {
        flex: 1 1 0;
        min-width: 0;
        padding: 9px 10px 9px 0;
    }

    .psx-spec div + div {
        padding-left: 10px;
    }

    .psx-spec dt {
        font-size: 0.56rem;
        letter-spacing: .1em;
    }

    .psx-spec dd {
        font-size: 0.8rem;
        word-break: break-word;
    }
}

@media (max-width: 400px) {
    .psx-spec div {
        padding-right: 7px;
    }

    .psx-spec div + div {
        padding-left: 7px;
    }

    .psx-spec dt {
        font-size: 0.52rem;
    }

    .psx-spec dd {
        font-size: 0.74rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    .psx-alt-media img,
    .psx-link,
    .psx-btn {
        transition: none;
    }

    .psx-alt-row:hover .psx-alt-media img {
        transform: none;
    }
}

/* ==========================================================================
   Video proje sayfası eklentileri
   ========================================================================== */
/* Her proje ayrı <section> olduğunda .psx-alt-row + .psx-alt-row kuralı
   çalışmaz; ayrımı bölüm düzeyinde zebra zeminle yapıyoruz.
   Çift sıradaki projeler açık gri, tekler beyaz. */
.psx-alt:nth-of-type(even) {
    background: var(--psx-wash);
}

/* Tek başına kullanılan bölümü açık gri yapmak için doğrudan sınıf */
.psx-alt.psx-alt-wash {
    background: var(--psx-wash);
}

.psx-alt.psx-alt-wash .psx-alt-media {
    background: #fff;
}

.psx-alt.psx-alt-wash .psx-spec {
    border-color: var(--psx-rule);
}

.psx-alt.psx-alt-wash .psx-spec div + div {
    border-left-color: var(--psx-rule);
}

.psx-alt.psx-alt-wash ul.psx-feat li + li {
    border-top-color: var(--psx-rule);
}

/* Zebra zemin varken hairline ayraç gereksiz kalır */
.psx-alt + .psx-alt .psx-alt-row {
    border-top: 0;
}

/* Gri zeminde görsel çerçevesinin arka planı beyaz olsun ki
   yüklenmeden önce zeminle karışmasın */
.psx-alt:nth-of-type(even) .psx-alt-media {
    background: #fff;
}

/* Gri zeminde künye çizgileri biraz daha koyu, yoksa kaybolur */
.psx-alt:nth-of-type(even) .psx-spec {
    border-color: var(--psx-rule);
}

.psx-alt:nth-of-type(even) .psx-spec div + div {
    border-left-color: var(--psx-rule);
}

/* Video oynatma düğmesi — görselin üzerinde ortalı */
.psx-play {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    background: rgba(20, 32, 43, .18);
    transition: background .3s;
}

.psx-play:hover,
.psx-play:focus-visible {
    background: rgba(20, 32, 43, .38);
}

.psx-play span {
    position: relative;
    width: 74px;
    height: 74px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .94);
    display: block;
    transition: transform .3s, background .3s;
}

/* Oynatma üçgeni */
.psx-play span::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-42%, -50%);
    border-style: solid;
    border-width: 11px 0 11px 18px;
    border-color: transparent transparent transparent var(--psx-teal-dk);
}

/* Nabız halkası */
.psx-play span::before {
    content: "";
    position: absolute;
    inset: -10px;
    border-radius: 50%;
    border: 2px solid rgba(255, 255, 255, .75);
    animation: psx-pulse 2.4s ease-out infinite;
}

.psx-play:hover span {
    transform: scale(1.08);
    background: #fff;
}

@keyframes psx-pulse {
    0% {
        transform: scale(.9);
        opacity: .85;
    }

    70% {
        transform: scale(1.28);
        opacity: 0;
    }

    100% {
        transform: scale(1.28);
        opacity: 0;
    }
}

@media (max-width: 600px) {
    .psx-play span {
        width: 58px;
        height: 58px;
    }

    .psx-play span::after {
        border-width: 9px 0 9px 15px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .psx-play span::before {
        animation: none;
        opacity: .55;
    }

    .psx-play,
    .psx-play span {
        transition: none;
    }

    .psx-play:hover span {
        transform: none;
    }
}

/* ==========================================================================
   Özellik listesi — ikon + başlık + açıklama (about bölümü)
   ========================================================================== */
.psx-feat {
    list-style: none;
    padding: 0;
    margin: 0;
}

/* Seçici, .psx-alt-body ul li kuralından daha güçlü olmalı; yoksa
   oradan gelen kare madde işareti ve sol boşluk geçerli kalır.
   Burada işaret görevini ikon kutusu görüyor. */
.psx-alt-body ul.psx-feat li,
ul.psx-feat li {
    display: flex;
    gap: 14px;
    padding: 15px 0;
    padding-left: 0;
    margin-bottom: 0;
    font-size: inherit;
    line-height: inherit;
    color: inherit;
}

.psx-alt-body ul.psx-feat li::before,
ul.psx-feat li::before {
    content: none;
    display: none;
}

.psx-alt-body ul.psx-feat li + li,
ul.psx-feat li + li {
    border-top: 1px solid var(--psx-rule);
}

.psx-feat .psx-feat-ico {
    flex: none;
    width: 38px;
    height: 38px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #fff;
    border: 1px solid var(--psx-line);
    color: var(--psx-teal-dk);
    font-size: 1.02rem;
    transition: background .25s, color .25s, border-color .25s;
}

.psx-alt-row:hover .psx-feat .psx-feat-ico {
    border-color: var(--psx-teal);
}

.psx-feat li:hover .psx-feat-ico {
    background: var(--psx-teal);
    border-color: var(--psx-teal);
    color: #fff;
}

.psx-feat h4 {
    font-family: 'Montserrat', sans-serif;
    font-size: 0.92rem;
    font-weight: 700;
    color: var(--psx-ink);
    letter-spacing: -0.005em;
    margin: 0 0 5px;
    line-height: 1.35;
}

.psx-feat p {
    font-size: 0.87rem;
    line-height: 1.7;
    color: var(--psx-ink-soft);
    margin: 0;
}

@media (max-width: 600px) {
    .psx-alt-body ul.psx-feat li,
    ul.psx-feat li {
        gap: 11px;
        padding: 13px 0;
        padding-left: 0;
    }

    .psx-feat .psx-feat-ico {
        width: 33px;
        height: 33px;
        font-size: 0.9rem;
    }

    .psx-feat h4 {
        font-size: 0.87rem;
    }

    .psx-feat p {
        font-size: 0.83rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    .psx-feat .psx-feat-ico {
        transition: none;
    }
}

/* ==========================================================================
   Geniş varyant — Bootstrap .container hizasına oturur
   Görsel sağ kenarı portfolyo kartlarının sağ hizasıyla aynı olur;
   metin sütunu genişler, görsel sütunu ~%10 daralır.
   ========================================================================== */
/* Metnin geniş, görselin dar olduğu varyant. Hizalama temel kuraldan gelir;
   burada yalnızca sütun oranı değişir. */
.psx-alt-wide .psx-alt-row {
    grid-template-columns: minmax(0, 1.27fr) minmax(0, 1fr);
}

/* Dar ekranda tek sütuna dönerken oran kuralı geçersiz kalsın */
@media (max-width: 900px) {
    .psx-alt-wide .psx-alt-row {
        grid-template-columns: 1fr;
    }
}

/* ==========================================================================
   Rakamlar şeridi — psx-spec künye mantığının büyütülmüş hali
   ========================================================================== */
.psx-stats {
    background: var(--psx-wash);
}

.psx-stats-inner {
    width: 100%;
    margin: 0 auto;
    padding: clamp(46px, 6vw, 78px) 12px;
}

@media (min-width: 576px)  {
    .psx-stats-inner {
        max-width: 540px;
    }
}

@media (min-width: 768px)  {
    .psx-stats-inner {
        max-width: 720px;
    }
}

@media (min-width: 992px)  {
    .psx-stats-inner {
        max-width: 960px;
    }
}

@media (min-width: 1200px) {
    .psx-stats-inner {
        max-width: 1140px;
    }
}

@media (min-width: 1400px) {
    .psx-stats-inner {
        max-width: 1320px;
    }
}

.psx-stats-head {
    max-width: 720px;
    margin: 0 0 34px;
}

.psx-stats-head h2 {
    font-family: 'Montserrat', sans-serif;
    font-size: clamp(1.3rem, 2.4vw, 1.9rem);
    font-weight: 300;
    color: var(--psx-ink);
    letter-spacing: -0.015em;
    margin: 0 0 12px;
}

.psx-stats-head h2 b {
    font-weight: 800;
}

.psx-stats-head p {
    font-size: 0.93rem;
    line-height: 1.85;
    color: var(--psx-ink-soft);
    margin: 0;
}

/* Şerit */
.psx-stats-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    border-top: 1px solid var(--psx-rule);
    border-bottom: 1px solid var(--psx-rule);
}

.psx-stats-grid > div {
    padding: 26px 22px 24px 0;
    min-width: 0;
}

.psx-stats-grid > div + div {
    padding-left: 22px;
    border-left: 1px solid var(--psx-rule);
}

.psx-stat-ico {
    color: var(--psx-teal-dk);
    font-size: 1.15rem;
    line-height: 1;
    margin-bottom: 14px;
    display: block;
}

/* Sayı: ağırlık kontrastı — rakam ince, ek bold turkuaz */
.psx-stat-num {
    display: flex;
    align-items: baseline;
    gap: 7px;
    flex-wrap: wrap;
    margin-bottom: 12px;
}

.psx-stat-num .n {
    font-family: 'Montserrat', sans-serif;
    font-size: clamp(2.1rem, 3.4vw, 3.1rem);
    font-weight: 500;
    color: var(--psx-ink);
    line-height: 1;
    letter-spacing: -0.03em;
}

.psx-stat-num .s {
    font-family: 'Montserrat', sans-serif;
    font-size: clamp(0.78rem, 1.1vw, 0.95rem);
    font-weight: 700;
    color: var(--psx-teal-dk);
    letter-spacing: .06em;
    text-transform: uppercase;
}

.psx-stat-lbl {
    font-family: 'Montserrat', sans-serif;
    font-size: 0.86rem;
    font-weight: 700;
    color: var(--psx-ink);
    margin: 0 0 4px;
    line-height: 1.35;
}

.psx-stat-hint {
    font-size: 0.81rem;
    line-height: 1.6;
    color: var(--psx-ink-soft);
    margin: 0;
}

/* Alt not satırı */
.psx-stats-note {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 22px;
}

.psx-stats-note span {
    font-family: 'Montserrat', sans-serif;
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    padding: 8px 14px;
    background: #fff;
    border: 1px solid var(--psx-rule);
    color: var(--psx-ink);
}

.psx-stats-note span::before {
    content: "";
    display: inline-block;
    width: 7px;
    height: 7px;
    background: var(--psx-teal);
    margin-right: 9px;
    vertical-align: middle;
}

.psx-stats-note span:nth-child(2)::before {
    background: var(--psx-ink-soft);
}

/* Duyarlı */
@media (max-width: 900px) {
    .psx-stats-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .psx-stats-grid > div {
        padding: 22px 18px 20px 0;
    }

    .psx-stats-grid > div:nth-child(odd) {
        padding-left: 0;
        border-left: 0;
    }

    .psx-stats-grid > div:nth-child(even) {
        padding-left: 18px;
        border-left: 1px solid var(--psx-rule);
    }

    .psx-stats-grid > div:nth-child(n+3) {
        border-top: 1px solid var(--psx-rule);
    }
}

@media (max-width: 420px) {
    .psx-stats-grid > div {
        padding: 18px 12px 17px 0;
    }

    .psx-stats-grid > div:nth-child(even) {
        padding-left: 12px;
    }

    .psx-stat-lbl {
        font-size: 0.8rem;
    }

    .psx-stat-hint {
        font-size: 0.76rem;
    }
}

/* Alt not etiketleri mobilde de yan yana kalsın */
@media (max-width: 700px) {
    .psx-stats-note {
        flex-wrap: nowrap;
        gap: 8px;
    }

    .psx-stats-note span {
        flex: 1 1 0;
        min-width: 0;
        text-align: center;
        font-size: 0.6rem;
        letter-spacing: .05em;
        padding: 8px 6px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .psx-stats-note span::before {
        width: 6px;
        height: 6px;
        margin-right: 6px;
    }
}

@media (max-width: 380px) {
    .psx-stats-note span {
        font-size: 0.55rem;
        letter-spacing: .03em;
        padding: 7px 4px;
    }

    .psx-stats-note span::before {
        margin-right: 4px;
    }
}

/* ==========================================================================
   Koyu tanıtım şeridi (eski .bg-dark bölümü)
   Zemin rengini değiştirmek için tek yer: --psx-dark
   ========================================================================== */
:root {
    --psx-dark: #25272a;
}

.psx-band-dark {
    background: var(--psx-dark);
}

.psx-band-dark p,
.psx-band-dark b,
.psx-band-dark li {
    color: #fff;
}