/* ==========================================================================
   PROGRAMLAR — /programlar (liste) + /programlar/{slug} (detay)

   Kart ve bölüm görsel dili anasayfadan DEVRALINIR. İki Model de $sayfaCss'e
   'home'u bu dosyadan ÖNCE ekler:
     home.css      → .section-header / .section-subtitle / .section-title,
                     .features + .feature-card / .feature-icon--{renk},
                     .programs + .program-card* (liste kartları), .reveal
     sss-bolum.css → .faq-section / .faq-accordion (yalnız SSS varsa; detay
                     SSS'yi ortak core/sss-bolum.php partial'ıyla basar)
   ⚠ 2026-10-02'ye kadar bu iki dosya YÜKLENMİYORDU: sınıflar markup'taydı ama
     hiçbiri stillenmiyordu (kartlar zeminsiz, başlıklar sola yaslı, SSS düz
     Bootstrap, liste kartları footer'a yapışık). Model'lerden 'home' satırı
     silinirse sayfa yine çöker.
   Burada yalnız bu iki sayfaya özel eklemeler durur — ikinci bir tasarım dili
   doğmasın.

   ⚠ TEMADA KOYU MOD YOK: prefers-color-scheme bloğu YAZMA. Eskiden yalnız süreç
     kartları OS koyu temasına tepki veriyordu → beyaz sayfada siyah kutu,
     başlıklar 1,1:1 kontrastla okunmuyordu (2026-10-02'de kaldırıldı).
   ========================================================================== */

/* ==========================================================================
   0) PROGRAM RENGİ — tek kaynak
   --------------------------------------------------------------------------
   View <main class="prg-detay prg-renk--{renk}"> basar; hero ikonu, adım
   numarası ve CTA kutusu AYNI iki değişkenden boyanır (eskiden her bileşenin
   6'şar ayrı renk kuralı vardı).
   ⚠ Tonlar anasayfa banner'larından (home.css program-card__banner--{renk})
     bilerek KOYU: o gradyanların açık uçları (#4da3ff, #34d278, #f5a623,
     #22d3ee, #f06d78) beyaz metinle 2–3,7:1 veriyordu (WCAG AA altı; TYT
     CTA'sı 2,8–3,5:1 ölçüldü). Buradaki her durak beyazla ≥ 4,5:1.
   Renk beyaz listesi: ProgramController::RENKLER.
   ========================================================================== */
.prg-detay {
    --prg-g1: #802c8e;      /* 7,87:1 */
    --prg-g2: #bf429d;      /* 4,69:1 */
}
.prg-renk--blue   { --prg-g1: #1557b0; --prg-g2: #1a73e8; }   /* 6,95 · 4,51 */
.prg-renk--green  { --prg-g1: #08693a; --prg-g2: #0b8043; }   /* 6,79 · 5,02 */
.prg-renk--orange { --prg-g1: #9a4a0a; --prg-g2: #b85a0d; }   /* 6,25 · 4,66 */
.prg-renk--cyan   { --prg-g1: #155e75; --prg-g2: #0e7490; }   /* 7,27 · 5,36 */
.prg-renk--red    { --prg-g1: #b02a37; --prg-g2: #dc3545; }   /* 6,50 · 4,53 */

/* ==========================================================================
   1) LİSTE
   ========================================================================== */

/* Kartın TAMAMI tıklanabilir: .program-card__link görsel bir ipucudur, gerçek
   bağlantı bu sarmalayıcıdır (bütün kart hedef alanı olur).
   Esnek sütun: kartlar aynı satırda eşit yükseklikte (home.css .program-card
   height:100%) — "Programı İncele" her kartta EN ALTA oturur. */
.prg-kart__ustlink {
    display: flex;
    flex-direction: column;
    height: 100%;
    color: inherit;
    text-decoration: none;
    border-radius: inherit;
}
.prg-kart__ustlink:hover { color: inherit; }

/* ⚠ Kart overflow:hidden (home.css) — main.css'in dışa taşan 3px odak halkası
   kırpılıyordu; halka kartın İÇİNE çizilir. */
.prg-kart__ustlink:focus-visible { outline-offset: -3px; }

.prg-kart .program-card__body {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
}
/* Esnek sütunda inline öğeler tam genişliğe yayılmasın (rozet hap kalmalı). */
.prg-kart .program-card__tag,
.prg-kart .program-card__link { align-self: flex-start; }
.prg-kart .program-card__link { margin-top: auto; }

/* home.css'te hover yalnız span'ın üstündeyken çalışıyordu; bütün kart bağlantı
   olduğu için ipucu kartın hover'ına bağlanır. */
.prg-kart:hover .program-card__link,
.prg-kart__ustlink:focus-visible .program-card__link {
    gap: .7rem;
    color: var(--primary-dark);
}

.prg-kart__kapak {
    aspect-ratio: 16 / 9;
    overflow: hidden;
    background: var(--primary-bg);
}
/* Esnek sütunda görsel alanı ASLA sıkışmasın (oran/banner yüksekliği korunur). */
.prg-kart__kapak,
.prg-kart .program-card__banner { flex-shrink: 0; }
.prg-kart__kapak img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform .5s ease;
}
.prg-kart:hover .prg-kart__kapak img { transform: scale(1.04); }

.prg-bos {
    text-align: center;
    padding: 48px 16px;
    color: var(--gray-600);
}
.prg-bos i { font-size: 40px; opacity: .35; display: block; margin-bottom: 12px; }

/* ==========================================================================
   2) HERO (liste + detay)
   ========================================================================== */

/* Hero açıklaması — ortak .page-hero'da karşılığı yok (yalnız bu iki sayfa
   kullanıyor). Konumlandırılmazsa .page-hero::after dekor dairesi üstüne biner. */
.page-hero__desc {
    position: relative;
    z-index: 1;
    max-width: 680px;
    margin: 0 auto 1rem;
    color: rgba(255, 255, 255, .9);
    font-size: 1.05rem;
    line-height: 1.6;
}

/* {kelime} vurgusu (SayfaContentController::vurgula → <span>). Panel "vurgulu
   renkle basılır" diyor; mor zeminde sitenin mevcut vurgu tonu (anasayfa geri
   sayım başlığıyla aynı altın, #802c8e üstünde 4,62:1). */
.prg-hero h1 span { color: #f0c040; }

.prg-hero__ust {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 14px;
}

.prg-hero__ikon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 62px;
    height: 62px;
    border-radius: 16px;
    color: #fff;
    font-size: 26px;
    background: linear-gradient(135deg, var(--prg-g1), var(--prg-g2));
    /* İnce beyaz halka + gölge: kutu, mor hero zemininden ayrışsın. */
    box-shadow: 0 0 0 1px rgba(255, 255, 255, .35), 0 10px 24px rgba(0, 0, 0, .18);
}
/* Mor program: kutu hero zeminiyle AYNI palette → kayboluyordu. Cam zemin. */
.prg-renk--purple .prg-hero__ikon { background: rgba(255, 255, 255, .16); }

.prg-hero__rozet {
    display: inline-block;
    padding: 5px 13px;
    border-radius: 999px;
    background: rgba(255, 255, 255, .18);
    border: 1px solid rgba(255, 255, 255, .35);
    font-size: 13px;
    font-weight: 600;
}

/* ==========================================================================
   3) DETAY — kapak + zengin metin
   ========================================================================== */

/* ⚠ .container'ın max-width'i EZİLMEZ: eskiden 1000/860px verilerek Bootstrap'in
   md (720) / lg (960) sınırları YUKARI açılıyor, 768–1024px'te kapak ve metin
   diğer bölümlerden 17–20px taşıyordu. Daraltma iç sarmalayıcıda yapılır. */
.prg-kapak { padding: 1.75rem 0 2rem; }

/* Oran SABİT 16:9 (liste kartıyla aynı): kayıtlı görsel farklı oranda olsa da
   (eski 2:1 kapak) yükseklik programdan programa değişmez, yüklemede kayma
   (CLS) olmaz. */
.prg-kapak picture {
    display: block;
    max-width: 1000px;
    margin: 0 auto;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    border-radius: 14px;
    background: var(--primary-bg);
    box-shadow: 0 12px 32px rgba(0, 0, 0, .10);
}
.prg-kapak img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.prg-icerik { padding: 2rem 0 3rem; }

/* Zengin metin (TinyMCE çıktısı, HtmlTemizleyici beyaz listesi) — blog
   .blog-icerik deseni. Medya ve tablo konteyneri ASLA taşırmaz. */
.prg-metin {
    max-width: 860px;
    margin: 0 auto;
    color: var(--gray-800);
    font-size: 1.05rem;
    line-height: 1.8;
}
.prg-metin > *:first-child { margin-top: 0; }
.prg-metin > *:last-child  { margin-bottom: 0; }
.prg-metin p { margin: 0 0 1.05rem; }

.prg-metin h2,
.prg-metin h3,
.prg-metin h4 {
    margin: 1.9rem 0 .75rem;
    color: var(--dark);
    font-weight: 700;
    line-height: 1.35;
}
.prg-metin h2 { font-size: 1.4rem; }
.prg-metin h3 { font-size: 1.2rem; }
.prg-metin h4 { font-size: 1.05rem; }

.prg-metin a {
    color: var(--primary);
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 2px;
}
.prg-metin a:hover { color: var(--primary-dark); }

.prg-metin ul,
.prg-metin ol { margin: 0 0 1.05rem; padding-left: 1.35rem; }
.prg-metin li { margin-bottom: .4rem; }

.prg-metin blockquote {
    margin: 1.5rem 0;
    padding: .9rem 1.15rem;
    border-left: 4px solid var(--primary);
    border-radius: .5rem;
    background: var(--primary-bg);
    font-style: italic;
}
.prg-metin blockquote p:last-child { margin-bottom: 0; }

.prg-metin img,
.prg-metin video {
    max-width: 100%;
    height: auto;
    border-radius: .75rem;
}
.prg-metin img { display: block; }
.prg-metin figure { margin: 1.5rem 0; }
.prg-metin figcaption {
    margin-top: .5rem;
    color: var(--gray-600);
    font-size: .82rem;
    text-align: center;
}
/* Gömülü video (YouTube vb.): width/height öznitelikleri korunuyor
   (HtmlTemizleyici) — genişlik konteynere, yükseklik orana bağlanır. */
.prg-metin iframe {
    display: block;
    width: 100%;
    max-width: 100%;
    height: auto;
    aspect-ratio: 16 / 9;
    border: 0;
    border-radius: .75rem;
}
.prg-metin hr {
    margin: 2rem 0;
    border: 0;
    border-top: 1px solid rgba(0, 0, 0, .1);
}
.prg-metin table {
    width: 100%;
    margin: 1.35rem 0;
    border-collapse: collapse;
    font-size: .9rem;
    display: block;
    overflow-x: auto;      /* geniş tablo sayfayı yatay kaydırmaz */
}
.prg-metin th,
.prg-metin td {
    padding: .55rem .7rem;
    border: 1px solid rgba(0, 0, 0, .1);
    text-align: left;
}
.prg-metin th {
    background: var(--primary-bg);
    color: var(--primary);
    font-weight: 700;
}

/* ==========================================================================
   4) DETAY — süreç adımları
   ========================================================================== */
.prg-surec { padding: 3rem 0; }

.prg-adim {
    height: 100%;
    padding: 26px 20px;
    border-radius: 1rem;
    background: #fff;
    border: 1px solid rgba(0, 0, 0, .07);
    box-shadow: 0 2px 15px rgba(0, 0, 0, .05);      /* .feature-card ile aynı */
    text-align: center;
    transition: transform .25s ease, box-shadow .25s ease;
}
.prg-adim:hover { transform: translateY(-4px); box-shadow: 0 14px 30px rgba(0, 0, 0, .08); }

.prg-adim__no {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 46px;
    height: 46px;
    border-radius: 50%;
    margin-bottom: 14px;
    color: #fff;
    font-size: 19px;
    font-weight: 800;
    background: linear-gradient(135deg, var(--prg-g1), var(--prg-g2));
}

/* Tipografi .feature-card h3/p ile aynı (kazanım kartlarıyla tutarlı). */
.prg-adim h3 {
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--dark);
    margin-bottom: .5rem;
}
.prg-adim p {
    font-size: .88rem;
    color: var(--gray-600);
    line-height: 1.5;
    margin: 0;
}

/* ==========================================================================
   5) DETAY — CTA
   ========================================================================== */
.prg-cta { padding: 3rem 0 4rem; }

.prg-cta__kutu {
    border-radius: 18px;
    padding: 40px 28px;
    text-align: center;
    color: #fff;
    background: linear-gradient(135deg, var(--prg-g1), var(--prg-g2));
}

.prg-cta__kutu h2 { font-size: clamp(22px, 3vw, 30px); margin-bottom: 10px; color: #fff; }
/* Düz beyaz: eski opacity:.92 açık gradyan ucunda kontrastı AA altına düşürüyordu. */
.prg-cta__kutu p  { color: #fff; margin-bottom: 22px; }

.prg-cta__butonlar {
    display: flex;
    gap: 12px;
    justify-content: center;
    flex-wrap: wrap;
}
/* ⚠ CTA zemini renkli: birincil buton beyaz zeminde okunur olmalı, aksi hâlde
   mor üstünde mor buton görünmez olur. Metin rengi programın koyu tonu. */
.prg-cta__kutu .btn-primary {
    background: #fff;
    border-color: #fff;
    color: var(--prg-g1);
}
.prg-cta__kutu .btn-primary:hover,
.prg-cta__kutu .btn-primary:focus-visible {
    background: rgba(255, 255, 255, .9);
    border-color: rgba(255, 255, 255, .9);
    color: var(--prg-g1);
}
.prg-cta__kutu .btn-light {
    background: transparent;
    border-color: rgba(255, 255, 255, .6);
    color: #fff;
}
.prg-cta__kutu .btn-light:hover,
.prg-cta__kutu .btn-light:focus-visible { background: rgba(255, 255, 255, .14); border-color: #fff; color: #fff; }
/* Odak halkası (main.css: mor) renkli zeminde görünmez → beyaz. */
.prg-cta__kutu .btn:focus-visible { outline-color: #fff; }

/* ==========================================================================
   6) BÖLÜM RİTMİ — ardışık iki BEYAZ bölüm
   --------------------------------------------------------------------------
   Kapak, metin, süreç ve CTA beyaz zeminli. Ardışık geldiklerinde üstteki
   bölümün alt dolgusu yeterli; ikisi toplanınca 6–7rem'lik boşluk doğuyordu.
   Renkli bantlar (.features gri, .faq-section lila) kendi dolgularını korur.
   (Hero'dan hemen sonraki bölümün üst dolgusunu main.css .page-hero + section
   kuralı yönetir; buradaki kurallar onunla çakışmaz.)
   ========================================================================== */
.prg-kapak + .prg-icerik,
.prg-kapak + .prg-surec,
.prg-icerik + .prg-surec,
.prg-kapak + .prg-cta,
.prg-icerik + .prg-cta,
.prg-surec + .prg-cta { padding-top: 0; }

/* ==========================================================================
   7) RESPONSIVE
   ========================================================================== */
@media (min-width: 768px) {
    .prg-surec { padding: 4rem 0; }
}

@media (max-width: 767.98px) {
    .page-hero__desc { font-size: .95rem; }
    .prg-hero__ikon  { width: 52px; height: 52px; font-size: 22px; }
    .prg-kapak picture { border-radius: 10px; }
    .prg-metin { font-size: 1rem; line-height: 1.75; }
    .prg-cta__kutu  { padding: 30px 18px; }
    .prg-cta__butonlar .btn { width: 100%; }
}

/* Telefon: adımlar tek sütunda alt alta dizildiği için ortalanmış dikey kart
   bölümü çok uzatıyordu (4 adım ≈ 800px). Numara solda, metin sağda yatay
   satır — aynı içerik yarı yükseklikte. */
@media (max-width: 575.98px) {
    .prg-adim {
        display: grid;
        grid-template-columns: auto 1fr;
        column-gap: 14px;
        align-items: start;
        padding: 16px 18px;
        text-align: left;
    }
    .prg-adim__no {
        grid-row: 1 / span 2;
        width: 40px;
        height: 40px;
        font-size: 17px;
        margin-bottom: 0;
    }
    .prg-adim h3 { margin: 9px 0 .3rem; }
}