/* ===========================================================================
   Alt bilgi (footer)
   ---------------------------------------------------------------------------
   Eski hâli Bulma sütunlarıyla kuruluydu: 24px gri sütun başlıkları, mutlak
   konumlu ödül görseli ve turuncu çerçeveli büyük harfli düğmeler. Bu dosya
   yapıyı sitenin tasarım diline taşır. `#categoryList` ve `.column-item`
   sınıfları betikle doldurulduğu için korunmuştur.
   =========================================================================== */

:root {
    --ftr-line: #1f2222;
    --ftr-text: #e9eded;
    --ftr-muted: #9aa1a1;
    --ftr-dim: #767d7d;
    --ftr-accent: #f37a52;
}

.main-footer.ftr {
    position: relative;
    padding: 0 0 2rem;
    border-top: 1px solid var(--ftr-line);
    background-color: #0b0c0c;
    overflow: hidden;
}
/* Üstten gelen yumuşak sıcaklık — sayfa gövdesiyle arasında sert bir
   kesik kalmasın. */
.main-footer.ftr::before {
    content: "";
    position: absolute;
    inset: 0 0 auto 0;
    height: 320px;
    pointer-events: none;
    background:
        radial-gradient(720px 300px at 14% 0%, rgba(243, 122, 82, .1), transparent 62%),
        radial-gradient(680px 280px at 84% 0%, rgba(243, 122, 82, .09), transparent 60%);
}
.main-footer.ftr > .container { position: relative; z-index: 1; }

/* ---------------------------------------------------------------------------
   Üst şerit
   --------------------------------------------------------------------------- */
/* Marka solda, yardım kartı sağda. `space-between` geniş ekranda ikisini
   uçlara itip aralarında ~650px boşluk bırakıyordu; ızgara ile sağ sütun
   ölçülü bir genişlikte tutuluyor. */
.ftr-top {
    display: grid;
    /* Marka | yardım kartı. */
    grid-template-columns: minmax(0, 1fr) minmax(0, 420px);
    align-items: center;
    gap: 2.5rem;
    padding: 3rem 0 2.25rem;
    /* Düz kenarlık yerine iki ucu sönen ince çizgi — profil menüsündeki
       ayraçlarla (`.drop-menu-inner hr`) ve ders kahramanındaki
       `.chero-motto::before` ile aynı dil. Kenarlık bu efekti veremediği
       için sözde öğeye taşındı. */
    position: relative;
    border-bottom: 0;
}
/* max-width kalktı: sınır, üstteki ölü boşluğun kaynağıydı. Okunabilirlik
   artık satır uzunluğuyla değil hücre genişliğiyle korunuyor. */
/* Tanıtım metni tüm genişliğe yayılırsa satır çok uzuyor ve okunmuyor;
   ölçü 78 karaktere sınırlanıyor. */
.ftr-brand { min-width: 0; }
.ftr-brand .ftr-tagline { max-width: 62ch; }

.ftr-top::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 1px;
    background: linear-gradient(90deg,
        transparent,
        rgba(255, 255, 255, .22) 18%,
        rgba(255, 255, 255, .22) 82%,
        transparent);
}

/* Yardım kartı */
.ftr-help {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    gap: .85rem;
    padding: 1.15rem 1.25rem;
    border-radius: 1.15rem;
    border: 1px solid var(--ftr-line);
    background: rgba(255, 255, 255, .022);
    -webkit-backdrop-filter: blur(14px) saturate(130%);
    backdrop-filter: blur(14px) saturate(130%);
}
.ftr-help-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px; height: 42px;
    border-radius: .8rem;
    border: 1px solid rgba(243, 122, 82, .35);
    background: rgba(243, 122, 82, .12);
    color: #ffbe9c;
}
.ftr-help-icon svg {
    width: 19px; height: 19px;
    fill: none; stroke: currentColor;
    stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round;
}
.ftr-help-text { min-width: 0; }
.ftr-help-title { display: block; color: #fff; font-size: .92rem; font-weight: 800; line-height: 1.3; }
.ftr-help-sub { display: block; margin-top: .2rem; color: var(--ftr-dim); font-size: .78rem; line-height: 1.5; }
.ftr-help .ftr-actions { grid-column: 1 / -1; margin-top: .35rem; }
.ftr-help .ftr-btn { flex: 1 1 auto; height: 40px; padding: 0 1rem !important; font-size: .84rem !important; }
.ftr-logo { display: block; width: 230px; max-width: 100%; height: auto; }
.ftr-tagline {
    margin: 1rem 0 0;
    color: var(--ftr-muted) !important;
    font-size: .92rem;
    line-height: 1.75;
}

.ftr-actions { display: flex; gap: .6rem; flex-wrap: wrap; }
.ftr .ftr-btn {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    gap: .45rem;
    height: 44px;
    padding: 0 1.3rem !important;
    border-radius: 999px !important;
    /* Eskiden turuncu çerçeveli, büyük harfli `is-uppercase` düğmelerdi. */
    border: 1px solid rgba(255, 255, 255, .18) !important;
    background: rgba(255, 255, 255, .04) !important;
    color: #fff !important;
    font-size: .88rem !important;
    font-weight: 700 !important;
    line-height: 1;
    text-transform: none !important;
    letter-spacing: 0 !important;
    box-shadow: none !important;
    transition: border-color .25s ease, background .25s ease;
}
.ftr .ftr-btn:hover { border-color: rgba(255, 255, 255, .45) !important; background: rgba(255, 255, 255, .09) !important; }
.ftr .ftr-btn--primary {
    border-color: rgba(243, 122, 82, .55) !important;
    background: rgba(243, 122, 82, .18) !important;
}
.ftr .ftr-btn--primary:hover { border-color: rgba(243, 122, 82, .95) !important; background: rgba(243, 122, 82, .3) !important; }
.ftr .ftr-btn svg {
    width: 16px; height: 16px;
    fill: none; stroke: currentColor;
    stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round;
}

/* ---------------------------------------------------------------------------
   Sütunlar
   --------------------------------------------------------------------------- */
.ftr-cols {
    display: grid;
    /* Ödül kartı üst satıra taşındığı için burada tam olarak dört öğe var;
       `auto-fit` altı iz üretip sonuncuyu boş bırakıyordu. */
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 2rem 1.5rem;
    padding: 2.5rem 0;
}
.ftr-col { min-width: 0; }
.ftr-col-title {
    display: block;
    margin-bottom: 1rem;
    color: #fff;
    /* Eski başlık `is-size-4` (24px) ve gri idi; gövde metninden ayrışmıyordu. */
    font-size: .72rem;
    font-weight: 800;
    letter-spacing: .1em;
    text-transform: uppercase;
}
.ftr .footer-column { margin: 0; padding: 0; list-style: none; }
.ftr .footer-column .column-item { margin: 0 0 .55rem; }
.ftr .footer-column .column-item:last-child { margin-bottom: 0; }
.ftr .footer-column .column-item a {
    display: inline-block;
    color: var(--ftr-muted) !important;
    font-size: .88rem;
    line-height: 1.5;
    transition: color .22s ease;
}
.ftr .footer-column .column-item a:hover { color: #fff !important; }

/* Sosyal ikonlar — eğitmen detay sayfasındaki `.ind-social-btn` ile aynı
   görünüm. DİKKAT: O sınıfın tanımı `public-ui.css` içinde ve bu dosya her
   sayfada yüklenmiyor (ör. /contact, /support/help-center). Footer global
   olduğu için kurallar burada, `footer-ui.css` içinde tekrar tanımlanıyor;
   aksi hâlde ikonlar o sayfalarda 0px genişliğe çöküyordu. */
.ftr-social { display: flex; gap: .5rem; flex-wrap: wrap; }
.ftr-social .ind-social-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px; height: 38px;
    padding: 0;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, .2);
    background: rgba(12, 14, 14, .55);
    -webkit-backdrop-filter: blur(12px) saturate(140%);
    backdrop-filter: blur(12px) saturate(140%);
    color: #fff !important;
    cursor: pointer;
    transition: border-color .25s ease, background .25s ease;
}
.ftr-social .ind-social-btn svg { width: 17px; height: 17px; fill: currentColor; }
.ftr-social .ind-social-btn svg[fill="none"] { fill: none; }
.ftr-social .ind-social-btn:hover { border-color: rgba(243, 122, 82, .75); background: rgba(243, 122, 82, .18); }
.ftr-social .ind-social-btn:focus-visible { outline: 2px solid #f37a52; outline-offset: 2px; }

/* Ödül kartı */
/* Ödül — SOSYAL sütununun içinde, ikonların altında.
   Sütun ~318px olduğu için görsel ve metin yan yana sığmıyor; dikey dizilim
   hem daha okunaklı hem de sütunun ritmine uyuyor. */
.ftr-award {
    display: flex;
    /* Görsel solda, açıklama SAĞINDA. Dikey dizilim denendi ve bırakıldı:
       görsel 46px olduğu için 318px'lik sütunda metin rahatça yanına sığıyor,
       alt alta koymak kartı gereksiz uzatıyordu. */
    align-items: center;
    gap: .8rem;
    margin-top: 1.35rem;
    padding: 1rem 1.1rem;
    border-radius: 1.15rem;
    border: 1px solid var(--ftr-line);
    background: rgba(255, 255, 255, .022);
    /* Yardım kartıyla aynı buzlu doku — ikisi artık yan yana. */
    -webkit-backdrop-filter: blur(14px) saturate(130%);
            backdrop-filter: blur(14px) saturate(130%);
}
/* aspect-ratio ŞART: görsel `loading="lazy"` ve 214KB; oran bildirilmezse
   yüksekliği 0 başlıyor, indiğinde kart bir anda ~100px uzayıp altındaki
   içeriği aşağı itiyor. Oran görselin doğal ölçüsü (419×990). */
.ftr-award img {
    width: 38px !important;
    height: auto;
    aspect-ratio: 419 / 990;
    flex: 0 0 auto;
}
.ftr-award p { margin: 0; color: var(--ftr-dim) !important; font-size: .76rem; line-height: 1.6; }
.ftr-award strong { color: var(--ftr-text) !important; }

/* ---------------------------------------------------------------------------
   Alt şerit
   --------------------------------------------------------------------------- */
.ftr-bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
    flex-wrap: wrap;
    padding-top: 1.6rem;
    border-top: 1px solid var(--ftr-line);
}
.ftr-legal {
    display: flex;
    align-items: center;
    gap: .6rem;
    flex-wrap: wrap;
    color: var(--ftr-dim);
    font-size: .8rem;
}
.ftr-dot { width: 3px; height: 3px; border-radius: 50%; background: #3a4040; }
.ftr-ssl { display: inline-flex; align-items: center; gap: .3rem; }
.ftr-ssl svg {
    width: 13px; height: 13px;
    fill: none; stroke: currentColor;
    stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round;
}

.ftr-marks { display: flex; align-items: center; gap: 1.25rem; flex-wrap: wrap; }
.ftr-edugo { width: 84px !important; height: auto; opacity: .75; transition: opacity .22s ease; }
.ftr-edugo:hover { opacity: 1; }
.ftr-pay { width: 100%; max-width: 340px; height: auto; }

/* ---------------------------------------------------------------------------
   Küçük ekran
   --------------------------------------------------------------------------- */
@media screen and (max-width: 1215px) {
    .ftr-top { grid-template-columns: minmax(0, 1fr); }
}
@media screen and (max-width: 767px) {
    .ftr-cols { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media screen and (max-width: 1023px) {
    .ftr-top { grid-template-columns: minmax(0, 1fr); }
    /* Bulma `.container` bu genişlikte oluksuz: metin ve bağlantı sütunları
       ekran kenarına yapışıyordu. Sayfa içeriğinin 1.5rem oluğuyla hizalanır. */
    .main-footer.ftr > .container { padding-left: 1.5rem; padding-right: 1.5rem; }
}
@media screen and (max-width: 767px) {
    .ftr-top { grid-template-columns: minmax(0, 1fr); padding: 2.25rem 0 1.75rem; gap: 1.35rem; }
    .ftr-logo { width: 190px; }
    .ftr-actions { width: 100%; }
    .ftr .ftr-btn { flex: 1 1 auto; }
    .ftr-cols { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 1.75rem 1rem; padding: 2rem 0; }
    .ftr-bottom { padding-top: 1.35rem; }
    .ftr-marks { width: 100%; justify-content: space-between; }
    .ftr-pay { max-width: 220px; }
}
@media (prefers-reduced-motion: reduce) and (prefers-reduced-motion: no-preference) /* ETKİSİZ: hareket azaltma yok sayılıyor */ {
    .ftr .ftr-btn, .ftr-social a, .ftr .footer-column .column-item a, .ftr-edugo { transition: none; }
}
