/* =========================================================================
   BrainFit — Bileşen katmanı
   =========================================================================
   Token'lar bf-tokens.css, tipografi bf-typography.css içindedir.
   Bu dosya yalnızca bileşen görünümünü tanımlar: buton, menü, kart, form,
   slider, CTA, footer, yüzen eylemler.

   Renk kuralı: zemin beyaz kalır; marka renkleri metinde değil, yalnızca
   buton dolgusu, ikon, ince şerit, etiket ve dekoratif alanda görünür.
   ========================================================================= */

body {
    background-color: var(--bf-surface);
}

/* -------------------------------------------------------------------------
   Butonlar
   ---------------------------------------------------------------------- */
.tf-btn,
a.tf-btn,
button.tf-btn,
.btn-primary {
    display: inline-flex;
    align-items: center;
    gap: var(--bf-space-2);
    font-family: var(--bf-font-heading);
    font-size: var(--bf-fs-sm);
    font-weight: var(--bf-fw-semibold);
    letter-spacing: 0.005em;
    padding: 0.8125rem 1.375rem;
    border-radius: var(--bf-radius-sm);
    border: 1px solid transparent;
    cursor: pointer;
    transition: background-color var(--bf-transition), border-color var(--bf-transition),
        color var(--bf-transition), box-shadow var(--bf-transition), transform var(--bf-dur-fast) var(--bf-ease);
}

/* Birincil — erişilebilir koyu mavi + beyaz yazı (4.88:1) */
.tf-btn,
a.tf-btn,
button.tf-btn,
.btn-primary,
.tf-btn.primary,
.tf-btn.style-1,
.tf-btn.style-default,
.tf-btn.btn-color-secondary {
    background-color: var(--bf-accent);
    border-color: var(--bf-accent);
    color: var(--bf-ink-inverse);
    box-shadow: var(--bf-shadow-xs);
}

.tf-btn:hover,
a.tf-btn:hover,
button.tf-btn:hover,
.btn-primary:hover,
.tf-btn.primary:hover,
.tf-btn.style-1:hover,
.tf-btn.style-default:hover,
.tf-btn.btn-color-secondary:hover {
    background-color: var(--bf-accent-strong);
    border-color: var(--bf-accent-strong);
    color: var(--bf-ink-inverse);
    transform: translateY(-1px);
    box-shadow: var(--bf-shadow-sm);
}

/* İkincil — çerçeveli */
.tf-btn.outline,
.tf-btn.style-2,
.tf-btn.bf-btn-outline {
    background-color: transparent;
    border-color: var(--bf-line-strong);
    color: var(--bf-ink);
    box-shadow: none;
}

.tf-btn.outline:hover,
.tf-btn.style-2:hover,
.tf-btn.bf-btn-outline:hover {
    background-color: var(--bf-accent-soft);
    border-color: var(--bf-accent);
    color: var(--bf-accent-strong);
}

/* Sıcak vurgu — yalnızca çağrı alanlarında, koyu yazı ile (7.8:1) */
.tf-btn.accent,
.tf-btn.bf-btn-warm {
    background-color: var(--bf-orange);
    border-color: var(--bf-orange);
    color: #3A2A05;
}

.tf-btn.accent:hover,
.tf-btn.bf-btn-warm:hover {
    background-color: #E5A32E;
    border-color: #E5A32E;
    color: #3A2A05;
}

/* Metin bağlantı butonu */
.tf-btn-link {
    display: inline-flex;
    align-items: center;
    gap: var(--bf-space-2);
    font-family: var(--bf-font-heading);
    font-size: var(--bf-fs-sm);
    font-weight: var(--bf-fw-semibold);
    color: var(--bf-accent);
}

.tf-btn-link:hover {
    color: var(--bf-accent-strong);
}

.tf-btn-link i,
.tf-btn .icon-ArrowRight,
.bf-card__more i {
    transition: transform var(--bf-transition);
}

.tf-btn-link:hover i,
.tf-btn:hover .icon-ArrowRight,
.bf-card:hover .bf-card__more i {
    transform: translateX(3px);
}

/* -------------------------------------------------------------------------
   Menü
   ---------------------------------------------------------------------- */
.nav-brand-menu .navigation > li > a {
    font-family: var(--bf-font-heading);
    font-size: var(--bf-fs-sm);
    font-weight: var(--bf-fw-medium);
    color: var(--bf-ink-2);
}

.nav-brand-menu .navigation > li > a:hover,
.nav-brand-menu .navigation > li.current > a,
.nav-brand-menu .navigation > li.current-menu-item > a,
.nav-brand-menu .navigation > li.active > a {
    color: var(--bf-ink);
}

/* Menü vurgu çizgisi ve chevron menu.css'te tanımlıdır.
   Burada bir zamanlar `.navigation > li > a::after { background-color: ... }`
   vardı; o pseudo alt menü chevron'u olduğu için glifin arkasını mavi bir
   kareyle boyuyordu. Kural kaldırıldı. */

.nav-brand-menu .sub-menu {
    border: 1px solid var(--bf-line);
    border-radius: var(--bf-radius);
    box-shadow: var(--bf-shadow);
    padding: var(--bf-space-2);
}

.nav-brand-menu .sub-menu li a {
    border-radius: var(--bf-radius-xs);
    font-size: var(--bf-fs-sm);
    color: var(--bf-ink-2);
}

.nav-brand-menu .sub-menu li a:hover {
    color: var(--bf-accent-strong);
    background-color: var(--bf-accent-soft);
}

#header-main.nav-brand .nav-brand-menu .navigation > li.nav-item-cta > a,
.nav-item-cta > a,
.nav-mobile-cta > a {
    background-color: var(--bf-accent);
    color: var(--bf-ink-inverse) !important;
    border-radius: var(--bf-radius-pill);
    padding: 0.6875rem 1.25rem;
    font-weight: var(--bf-fw-semibold);
}

#header-main.nav-brand .nav-brand-menu .navigation > li.nav-item-cta > a:hover,
.nav-item-cta > a:hover,
.nav-mobile-cta > a:hover {
    background-color: var(--bf-accent-strong);
    color: var(--bf-ink-inverse) !important;
}

#header-main.nav-brand {
    border-bottom: 1px solid var(--bf-line);
}

/* -------------------------------------------------------------------------
   Kartlar — yumuşak köşe, hafif gölge, dengeli boşluk
   ---------------------------------------------------------------------- */
.bf-card,
.icons-box,
.course-item,
.service-item,
.program-card,
.listing-card,
.blog-item,
.article-blog-item,
.team-item,
.step-card,
.pillar-card,
.approach-card,
.scientist-card,
.neuro-card,
.award-tile,
.mv-card,
.wg-testimonial {
    position: relative;
    background: var(--bf-surface);
    border: 1px solid var(--bf-line);
    border-radius: var(--bf-radius);
    box-shadow: var(--bf-shadow-xs);
    transition: box-shadow var(--bf-transition), transform var(--bf-dur) var(--bf-ease),
        border-color var(--bf-transition);
}

.bf-card:hover,
.icons-box:hover,
.course-item:hover,
.service-item:hover,
.program-card:hover,
.listing-card:hover,
.blog-item:hover,
.article-blog-item:hover,
.team-item:hover,
.step-card:hover,
.pillar-card:hover,
.scientist-card:hover {
    box-shadow: var(--bf-shadow);
    transform: translateY(-2px);
    border-color: var(--bf-line-strong);
}

.bf-card img,
.listing-card img,
.blog-item img,
.program-card img,
.article-blog-item img {
    border-radius: var(--bf-radius-sm);
}

/* İnce renkli üst şerit — kartları birbirinden ayırır, aynı ekranda
   paletin tamamı yoğun kullanılmaz */
.bf-card,
.program-card,
.listing-card {
    overflow: hidden;
}

.bf-card::before,
.program-card::before,
.listing-card::before {
    content: "";
    position: absolute;
    inset: 0 0 auto 0;
    height: 3px;
    background: var(--bf-accent-bright);
    z-index: 1;
}

.bf-card:nth-child(4n+2)::before,
.program-card:nth-child(4n+2)::before { background: var(--bf-orange); }
.bf-card:nth-child(4n+3)::before,
.program-card:nth-child(4n+3)::before { background: var(--bf-green); }
.bf-card:nth-child(4n+4)::before,
.program-card:nth-child(4n+4)::before { background: var(--bf-magenta); }

/* -------------------------------------------------------------------------
   İkon kutuları
   ---------------------------------------------------------------------- */
.bf-icon,
.icons-box .icon,
.iconinfo .icon,
.step-card .icon-wrap,
.pillar-card .icon,
.approach-card .icon,
.award-tile .icon,
.counter-item .icon {
    display: inline-grid;
    place-items: center;
    width: 3rem;
    height: 3rem;
    border-radius: var(--bf-radius-sm);
    background: var(--bf-accent-soft);
    color: var(--bf-accent-strong);
    font-size: 1.375rem;
    flex: 0 0 auto;
}

.icons-box.effec-icon .icon {
    transition: transform var(--bf-dur) var(--bf-ease), background-color var(--bf-transition);
}

.icons-box:hover .icon,
.step-card:hover .icon-wrap,
.pillar-card:hover .icon {
    transform: translateY(-2px);
    background: var(--bf-accent-line);
}

/* Kart içi ikonlarda renk çeşitlemesi — dönüşümlü, kontrollü */
.icons-box:nth-child(3n+2) .icon,
.pillar-card:nth-child(3n+2) .icon { background: rgba(240, 178, 66, 0.16); color: #8A5E12; }
.icons-box:nth-child(3n+3) .icon,
.pillar-card:nth-child(3n+3) .icon { background: rgba(108, 181, 87, 0.16); color: #3F7A30; }

/* Yorum yıldızları */
.rating i {
    color: var(--bf-orange);
}

/* -------------------------------------------------------------------------
   Formlar
   ---------------------------------------------------------------------- */
input[type="text"],
input[type="email"],
input[type="tel"],
input[type="number"],
input[type="search"],
input[type="password"],
select,
textarea,
.tf-input {
    width: 100%;
    font-family: var(--bf-font-body);
    font-size: var(--bf-fs-base);
    color: var(--bf-ink);
    background: var(--bf-surface);
    border: 1px solid var(--bf-line-strong);
    border-radius: var(--bf-radius-sm);
    padding: 0.8125rem 1rem;
    transition: border-color var(--bf-transition), box-shadow var(--bf-transition);
}

input::placeholder,
textarea::placeholder {
    color: var(--bf-ink-3);
}

input[type="text"]:focus,
input[type="email"]:focus,
input[type="tel"]:focus,
input[type="number"]:focus,
input[type="search"]:focus,
input[type="password"]:focus,
select:focus,
textarea:focus,
.tf-input:focus {
    outline: none;
    border-color: var(--bf-accent);
    box-shadow: 0 0 0 3px var(--bf-accent-soft);
}

/* Klavye ile gezinmede görünür odak */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
    outline: 2px solid var(--bf-accent);
    outline-offset: 2px;
    border-radius: var(--bf-radius-xs);
}

/* -------------------------------------------------------------------------
   Slider — panelden yönetilen hizalama, karartma, metin rengi
   ---------------------------------------------------------------------- */
.bf-slide {
    position: relative;
    overflow: hidden;
    /* Görsel yüklenmezse/eksikse slider çökmesin */
    min-height: clamp(360px, 46vw, 620px);
    background: var(--bf-surface-3);
    display: flex;
    align-items: center;
}

.bf-slide > picture,
.bf-slide > picture img,
.bf-slide > img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.bf-slide__overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(105deg, #0B1F2A 0%, rgba(11, 31, 42, 0.55) 62%, rgba(11, 31, 42, 0.18) 100%);
    pointer-events: none;
}

.bf-slide__content {
    position: relative;
    z-index: 2;
    max-width: 40rem;
}

.bf-slide--center .bf-slide__content {
    margin-inline: auto;
    text-align: center;
}

.bf-slide--right .bf-slide__content {
    margin-left: auto;
    text-align: right;
}

.bf-slide__title {
    color: var(--bf-ink-inverse);
    margin-bottom: var(--bf-space-4);
}

.bf-slide__desc {
    color: rgba(255, 255, 255, 0.88);
    font-size: var(--bf-fs-lg);
    margin-bottom: var(--bf-space-6);
}

/* -------------------------------------------------------------------------
   Çağrı (CTA) alanları
   ---------------------------------------------------------------------- */
.bf-cta,
.bf-about-cta .cta-box,
.bf-how-cta .cta-box,
.bf-science-cta .cta-box {
    position: relative;
    overflow: hidden;
    background: linear-gradient(135deg, var(--bf-accent-soft) 0%, rgba(240, 178, 66, 0.12) 100%);
    border: 1px solid var(--bf-line);
    border-radius: var(--bf-radius-xl);
    padding: clamp(1.75rem, 1rem + 3vw, 3rem);
}

/* -------------------------------------------------------------------------
   Breadcrumb
   ---------------------------------------------------------------------- */
.page-title-brand {
    background: var(--bf-surface-2);
    border-bottom: 1px solid var(--bf-line);
}

.page-title-brand a {
    color: var(--bf-ink-3);
}

.page-title-brand a:hover {
    color: var(--bf-accent-strong);
}

/* -------------------------------------------------------------------------
   Footer
   ---------------------------------------------------------------------- */
#footer {
    position: relative;
    background: var(--bf-surface-dark);
    color: rgba(255, 255, 255, 0.72);
    overflow: hidden;
}

#footer h6,
#footer .title {
    color: var(--bf-ink-inverse);
    font-family: var(--bf-font-heading);
    font-size: var(--bf-fs-sm);
    font-weight: var(--bf-fw-semibold);
    letter-spacing: var(--bf-ls-eyebrow);
    text-transform: uppercase;
}

#footer a {
    color: rgba(255, 255, 255, 0.72);
}

#footer a:hover {
    color: var(--bf-accent-bright);
}

.footer-info {
    display: grid;
    gap: var(--bf-space-3);
}

.footer-info li {
    display: flex;
    align-items: flex-start;
    gap: var(--bf-space-3);
    font-size: var(--bf-fs-sm);
    line-height: var(--bf-lh-snug);
    color: rgba(255, 255, 255, 0.72);
}

.footer-info li .bf-ico {
    flex: 0 0 auto;
    margin-top: 0.125rem;
    color: var(--bf-accent-bright);
}

.tf-social {
    display: flex;
    flex-wrap: wrap;
    gap: var(--bf-space-2);
    margin-top: var(--bf-space-5);
}

.tf-social a {
    display: inline-grid;
    place-items: center;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: var(--bf-radius-pill);
    border: 1px solid rgba(255, 255, 255, 0.18);
    color: rgba(255, 255, 255, 0.85);
    transition: background-color var(--bf-transition), border-color var(--bf-transition),
        transform var(--bf-dur-fast) var(--bf-ease);
}

.tf-social a:hover {
    background: rgba(255, 255, 255, 0.1);
    border-color: var(--bf-accent-bright);
    color: var(--bf-ink-inverse);
    transform: translateY(-2px);
}

.footer-bottom {
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    padding-top: var(--bf-space-5);
    margin-top: var(--bf-space-8);
    font-size: var(--bf-fs-sm);
}

/* styles.css:1673 bu paragrafa `text-align: center` basıyor, ama footer
   alt şeridi `justify-content: space-between` bir flex satırı: paragrafın
   kutusu (478px) solda kalıp yazı o kutunun içinde ortalanıyordu, yani
   sayfada ne sola ne ortaya hizalı görünüyordu. Şeritte telif solda,
   bağlantılar sağda olmalı. */
/* Seçici `#footer` ile başlamak ZORUNLU: styles.css:1669 kuralı
   `#footer .footer-bottom p` (id + sınıf + etiket) olduğu için sade
   `.footer-bottom p` onu ezemiyor. */
#footer .footer-bottom p,
.footer-bottom p {
    color: rgba(255, 255, 255, 0.6);
    font-size: var(--bf-fs-sm);
    text-align: start;
    margin: 0;
}

/* -------------------------------------------------------------------------
   Yüzen eylemler — WhatsApp / telefon
   ---------------------------------------------------------------------- */
/* Şablonun "başa dön" düğmesi (.progress-wrap) sağ altta right:40px /
   bottom:40px ve z-index:98 ile duruyor. Yüzen eylemler right:16 /
   bottom:16'da olduğu için ikisi 960px² üst üste biniyordu; eylemler
   düğmenin ÜSTÜNE, aynı sağ hizaya alındı. */
.bf-float-actions {
    position: fixed;
    right: 2.25rem;
    bottom: 6.5rem;
    z-index: 60;
    display: flex;
    flex-direction: column;
    gap: var(--bf-space-3);
}

.bf-float-actions a {
    width: 3rem;
    height: 3rem;
    display: grid;
    place-items: center;
    border-radius: var(--bf-radius-pill);
    color: #fff;
    box-shadow: var(--bf-shadow);
    transition: transform var(--bf-dur) var(--bf-ease);
}

.bf-float-actions a:hover {
    transform: translateY(-3px) scale(1.03);
    color: #fff;
}

.bf-float-actions .bf-wa { background: #25D366; }
.bf-float-actions .bf-tel { background: var(--bf-accent); }

/* -------------------------------------------------------------------------
   Duyuru şeridi
   ---------------------------------------------------------------------- */
.bf-announcement {
    background: var(--bf-accent);
    color: var(--bf-ink-inverse);
    text-align: center;
    padding: var(--bf-space-3) var(--bf-space-4);
    font-size: var(--bf-fs-sm);
}

.bf-announcement a {
    color: var(--bf-ink-inverse);
    text-decoration: underline;
}

/* -------------------------------------------------------------------------
   Bölüm zeminleri — beyaz ana renk, arada tek açık gri
   ---------------------------------------------------------------------- */
.bg-1,
.bf-surface-alt {
    background-color: var(--bf-surface-2) !important;
}

/* -------------------------------------------------------------------------
   Akordeon
   ---------------------------------------------------------------------- */
/* Akordeon: her adım BAĞIMSIZ bir kart.
   Bir ara tek çerçeveli liste denendi (dışta çerçeve, satır aralarında saç
   çizgisi); öğeler arasında zaten boşluk olduğu için çizgiler boşlukta
   asılı kalıyor ve satırlar birbirine yapışık görünüyordu. Şimdi dış çerçeve
   yok, her kart kendi hairline'ı ve yarıçapıyla ayrı duruyor.

   Korunan kazanımlar: gövdedeki içerik bloğu kendi kenarlığını taşımıyor
   (iç içe çerçeve yok) ve açık kart tüm satırı mavi bir kutuya çevirmek
   yerine ince bir sol şeritle işaretleniyor. */
.tf-accordion {
    border: 0;
    border-radius: 0;
    background: none;
    overflow: visible;
    display: grid;
    gap: var(--bf-space-3);
}

.tf-accordion-item {
    position: relative;
    border: 1px solid var(--bf-line);
    border-radius: var(--bf-radius);
    margin-bottom: 0;
    background: var(--bf-surface);
    overflow: hidden;
    transition: border-color var(--bf-transition), box-shadow var(--bf-transition);
}

.tf-accordion-item:hover {
    border-color: var(--bf-line-strong);
    box-shadow: var(--bf-shadow-xs);
}

/* styles.css:3305 her öğeye (sonuncu hariç) `margin-bottom: 31px`,
   `padding-bottom: 20px` ve AYRI BİR ALT KENARLIK veriyor. Kart artık kendi
   çerçevesini taşıdığı için o alt çizgi boşlukta asılı kalıyor, 20px'lik
   dolgu da kartın içinde ölü yükseklik yaratıyordu (kart 87px, başlık 66px).
   Aralığı .tf-accordion'un gap'i yönetir. Özgüllük (0,3,0) eşitlenmeli. */
.tf-accordion .tf-accordion-item:not(:last-child) {
    margin-bottom: 0;
    padding-bottom: 0;
    border-bottom: 1px solid var(--bf-line);
}

.tf-accordion-item .tf-accordion-title {
    padding: var(--bf-space-5) var(--bf-space-6);
    cursor: pointer;
}

.tf-accordion-item .title {
    font-family: var(--bf-font-heading);
    font-size: var(--bf-fs-h4);
    font-weight: var(--bf-fw-semibold);
    color: var(--bf-ink);
}

.tf-accordion-item .title.collapsed {
    color: var(--bf-ink-2);
}

/* -------------------------------------------------------------------------
   Tablet / mobil
   ---------------------------------------------------------------------- */
@media (max-width: 1024px) {
    :root {
        --bf-radius: 12px;
        --bf-radius-lg: 16px;
        --bf-radius-xl: 20px;
    }
}

@media (max-width: 767px) {
    .bf-slide__content,
    .bf-slide--center .bf-slide__content,
    .bf-slide--right .bf-slide__content {
        max-width: 100%;
        text-align: left;
        margin: 0;
    }

    /* Mobilde de başa-dön düğmesiyle çakışmasın */
    .bf-float-actions {
        right: var(--bf-space-4);
        bottom: 5.5rem;
    }

    .tf-btn,
    a.tf-btn,
    button.tf-btn {
        padding: 0.75rem 1.125rem;
    }
}

/* -------------------------------------------------------------------------
   Ekip ızgarası — şablonun grid-layout-4'ü 7 kartta son satırda 3 boş hücre
   bırakıyordu. Otomatik sığdırma ile kartlar dengeli dağılır.
   ---------------------------------------------------------------------- */
.bf-team-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: var(--bf-space-6);
}

.bf-team-grid .team-item {
    padding: 0;
    overflow: hidden;
}

.bf-team-grid .team-item .image-wrap {
    aspect-ratio: 3 / 4;
    overflow: hidden;
}

.bf-team-grid .team-item .image-wrap > img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: var(--bf-radius) var(--bf-radius) 0 0;
}

.bf-team-grid .team-item .info {
    padding: var(--bf-card-pad);
}

.bf-team-grid .team-item .name {
    margin-bottom: var(--bf-space-1);
}

/* -------------------------------------------------------------------------
   Teşekkür sayfası
   ---------------------------------------------------------------------- */
.bf-thanks__inner {
    padding-block: var(--bf-section-y);
}

.bf-thanks__content {
    max-width: 44rem;
    margin-inline: auto;
    text-align: center;
}

.bf-thanks__mark {
    display: inline-grid;
    place-items: center;
    width: 6rem;
    height: 6rem;
    margin-bottom: var(--bf-space-6);
    border-radius: var(--bf-radius-pill);
    background: rgba(108, 181, 87, 0.12);
    border: 1px solid rgba(108, 181, 87, 0.28);
}

.bf-thanks__content .bf-lead {
    margin-inline: auto;
}

.bf-thanks__actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--bf-space-3);
    justify-content: center;
    margin-top: var(--bf-space-8);
}

/* -------------------------------------------------------------------------
   Yasal metin sayfaları
   ---------------------------------------------------------------------- */
.bf-legal-head {
    margin-bottom: var(--bf-space-8);
}

.section-blog-post .content-list li {
    display: flex;
    align-items: flex-start;
    gap: var(--bf-space-3);
    margin-bottom: var(--bf-space-3);
    line-height: var(--bf-lh-body);
}

.section-blog-post .content-list li::before {
    content: none;
}

.section-blog-post .content-list li .bf-ico {
    margin-top: 0.2em;
    color: var(--bf-accent);
}

/* -------------------------------------------------------------------------
   Süreç özeti (surec sayfası)
   ---------------------------------------------------------------------- */
/* NOT: .bf-process-* kuralları aşağıda, adım özeti bölümünde tanımlıdır.
   Burada ikinci bir kopya vardı ve tamamen eziliyordu; kaldırıldı. */

/* Akordeon başlığında adım numarası ve ikon */
.tf-accordion-item .title .bf-eyebrow {
    margin-right: var(--bf-space-3);
    margin-bottom: 0;
    vertical-align: middle;
}

.tf-accordion-item .title .bf-ico {
    margin-right: var(--bf-space-2);
    color: var(--bf-accent);
}

/* -------------------------------------------------------------------------
   İletişim bilgi listesi — ikon + metin hizası
   ---------------------------------------------------------------------- */
.list-info {
    display: grid;
    gap: var(--bf-space-3);
}

.list-info li {
    display: flex;
    align-items: flex-start;
    gap: var(--bf-space-3);
    font-size: var(--bf-fs-base);
    line-height: var(--bf-lh-snug);
    color: var(--bf-ink-2);
}

.list-info li .bf-ico {
    margin-top: 0.15em;
    color: var(--bf-accent);
}

.list-info li a {
    color: var(--bf-ink-2);
}

.list-info li a:hover {
    color: var(--bf-accent-strong);
}

/* Kart görseli yoksa: pastel şekil medya alanını doldurur */
.bf-card__media .bf-edge {
    position: absolute;
    inset: -10%;
    width: 120%;
    height: 120%;
}

.bf-card__media {
    position: relative;
    overflow: hidden;
    background: var(--bf-surface-2);
}

/* Misyon / vizyon kartları: büyük şekil yerine yumuşak pastel zemin */
.mv-card {
    background: var(--bf-pastel-blue-soft);
    border-color: transparent;
}

.mv-card--vision {
    background: var(--bf-pastel-green-soft);
}

/* =========================================================================
   /surec — süreç adımları ve akordeon
   =========================================================================
   Sorunlar: adım satırı ile akordeon arasında büyük ölü boşluk vardı; şablonun
   .content-inner padding'i 40px 200px 40px 120px olduğu için akordeon içi metin
   sağa/sola savruluyordu; fotoğraflar height:100% zinciri kırıldığı için
   yanlış kırpılıyordu.
   ====================================================================== */

/* --- Adım özeti satırı ---
   Sayfadaki dikey ritim ölçüldüğünde tutarsızdı: giriş metniyle kartlar
   arası 24px, kartlarla "Süreç Adımları" arası 45px, akordeonla CTA arası
   75px. Bölüm sınırları tek değere (--bf-section-y-sm) bağlanır; blok içi
   boşluklar (16px / 12px) olduğu gibi kalır. */
.bf-process-overview {
    padding-block: var(--bf-section-y-sm);
}

/* Sabit 3 kolon.
   Önce `repeat(auto-fit, minmax(160px, 1fr))` kullanılıyordu; 1250px'lik
   kapta 7 iz üretiyor (sonuncusu 0px) ve kartları 195px'e sıkıştırıyordu.
   Altı başlığın üçü ("Test Raporu ve Geri Bildirim", "Egzersizlerin
   Planlanması", "Program Sonu Değerlendirme") bu genişlikte ikinci satıra
   taşıyordu. 3x2 düzende kart ~406px'e çıkıyor ve hepsi tek satıra sığıyor. */
.bf-process-overview .bf-journey__items {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--bf-space-4);
    /* margin-top kaldırıldı: bölüm dolgusunun (48px) üstüne 24px daha
       ekleyip üstteki metinle arayı 72px'e çıkarıyordu; diğer bölüm
       sınırları 48px. */
}

@media (max-width: 991px) {
    .bf-process-overview .bf-journey__items {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 575px) {
    .bf-process-overview .bf-journey__items {
        grid-template-columns: 1fr;
    }
}

.bf-process-step {
    position: relative;
    display: grid;
    grid-template-rows: auto auto 1fr;
    gap: var(--bf-space-3);
    align-content: start;
    padding: var(--bf-space-5);
    background: var(--bf-surface);
    border: 1px solid var(--bf-line);
    border-radius: var(--bf-radius);
    transition: border-color var(--bf-transition), box-shadow var(--bf-transition);
}

.bf-process-step:hover {
    border-color: var(--bf-line-strong);
    box-shadow: var(--bf-shadow-xs);
}

/* Adımlar arası bağlantı — tek ince çizgi.
   Satır sonundaki kartta çizilmemeli, aksi hâlde 3. karttan 4. karta
   (bir alt satıra) uzanan boşlukta asılı kalırdı. */
@media (min-width: 992px) {
    .bf-process-step:not(:nth-child(3n)):not(:last-child)::after {
        content: "";
        position: absolute;
        top: 3.4rem;
        right: calc(var(--bf-space-4) * -1 - 1px);
        width: var(--bf-space-4);
        height: 1px;
        background: var(--bf-line-strong);
    }
}

@media (min-width: 576px) and (max-width: 991px) {
    .bf-process-step:not(:nth-child(2n)):not(:last-child)::after {
        content: "";
        position: absolute;
        top: 3.4rem;
        right: calc(var(--bf-space-4) * -1 - 1px);
        width: var(--bf-space-4);
        height: 1px;
        background: var(--bf-line-strong);
    }
}

.bf-process-step__no {
    font-family: var(--bf-font-heading);
    font-size: var(--bf-fs-sm);
    font-weight: var(--bf-fw-bold);
    letter-spacing: var(--bf-ls-eyebrow);
    color: var(--bf-accent);
    line-height: 1;
}

.bf-process-step__icon {
    display: inline-grid;
    place-items: center;
    width: 2.25rem;
    height: 2.25rem;
    border-radius: var(--bf-radius-sm);
    background: var(--bf-accent-soft);
    color: var(--bf-accent-strong);
}

.bf-process-step__title {
    font-family: var(--bf-font-heading);
    font-size: var(--bf-fs-base);
    font-weight: var(--bf-fw-semibold);
    line-height: var(--bf-lh-snug);
    text-wrap: balance;
    color: var(--bf-ink);
    text-wrap: balance;
}

/* --- Akordeon başlığı --- */
.tf-accordion-item .accordion-header .title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--bf-space-4);
    margin: 0;
}

.tf-accordion-item .accordion-header .title > span:first-child {
    display: inline-flex;
    align-items: center;
    gap: var(--bf-space-3);
}

.tf-accordion-item .accordion-header .bf-eyebrow {
    margin-bottom: 0;
    color: var(--bf-ink-3);
}

.tf-accordion-item .accordion-header .title:not(.collapsed) .bf-eyebrow {
    color: var(--bf-accent);
}

/* =======================================================================
   Akordeon gövdesi
   =======================================================================
   Sorun: adım gövdeleri aynı kalıbı kullanmıyordu. Tek içerik bloğu olan
   adımlar ~300px, beş blok taşıyan 4. adım 1789px, altı maddelik liste
   taşıyan 3. adım 1237px yükseliyordu. Aynı bileşen üç farklı yükseklik
   rejimi üretiyordu; açılıp kapandıkça sayfa zıplıyordu.

   Çözüm: gövde iki düzene indirildi.
     tek blok  → geniş satır: metin | görsel
     çok blok  → kompakt kart ızgarası (görsel üstte, küçük)
   Ölçüt view tarafında belirlenir (.bf-acc-body--compact), CSS tahmin etmez.
   ==================================================================== */
.tf-accordion-body {
    padding: var(--bf-space-2) var(--bf-space-6) var(--bf-space-6);
}

.tf-accordion-body .page-title-homepage-2 {
    max-width: none;
    background: none;
    border: 0;
    border-radius: 0;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: clamp(1rem, 0.5rem + 2vw, 2.5rem);
    padding: 0;
}

.tf-accordion-body .page-title-homepage-2 .content-inner {
    padding: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.tf-accordion-body .page-title-homepage-2 .content-inner .heading {
    margin-bottom: 0;
}

.tf-accordion-body .page-title-homepage-2 .content-inner .title {
    font-size: var(--bf-fs-h3);
    line-height: var(--bf-lh-heading);
    margin-bottom: var(--bf-space-3);
}

.tf-accordion-body .page-title-homepage-2 .content-inner .description {
    margin-bottom: 0;
    font-size: var(--bf-fs-base);
}

/* Görsel kolonu: yüksekliği içeriğe uyar, zorla germe yok.
   Eski kural min-height:16rem + overflow:hidden ile kırpıyordu. */
.tf-accordion-body .page-title-homepage-2 .image-wrap {
    position: relative;
    display: grid;
    place-items: center;
    min-height: 0;
    overflow: visible;
    margin: 0;
}

/* Görseli olmayan bloklarda kolon çökmesin */
.tf-accordion-body .page-title-homepage-2:not(:has(.image-wrap)) {
    grid-template-columns: 1fr;
}

/* --- Çok bloklu gövde: kompakt satırlar --- */
/* Önce çok kolonlu kart ızgarası denendi: 19rem'lik kolonlar uzun paragrafları
   20+ satıra sardığı için satır yüksekliği 873px'e çıktı ve gövde 1789'dan
   2216px'e büyüdü. Metin tam genişlikte kalmalı; kazanç görseli küçültmekten
   ve dikey boşluğu sıkmaktan geliyor. */
.bf-acc-body--compact {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--bf-space-3);
}

.bf-acc-body--compact .page-title-homepage-2 {
    grid-template-columns: auto minmax(0, 1fr);
    align-items: start;
    gap: var(--bf-space-5);
    padding: 0;
}

.bf-acc-body--compact .page-title-homepage-2 + .page-title-homepage-2 {
    border-top: 1px solid var(--bf-line);
    padding-top: var(--bf-space-5);
    margin-top: 0;
}

/* Görsel solda, küçük ve sabit — metin kolonunu daraltmaz */
.bf-acc-body--compact .image-wrap {
    order: -1;
    align-self: start;
}

.bf-acc-body--compact .bf-media {
    width: 7rem;
}

.bf-acc-body--compact .page-title-homepage-2 .content-inner .title {
    font-size: var(--bf-fs-h4);
    margin-bottom: var(--bf-space-2);
}

.bf-acc-body--compact .page-title-homepage-2 .content-inner .description {
    font-size: var(--bf-fs-sm);
}

/* Geniş bant görsel taşıyan blok: görsel sağda ve tam genişlikte */
.bf-acc-body--compact .bf-acc-block--full {
    grid-template-columns: minmax(0, 1fr) minmax(0, 26rem);
    align-items: center;
}

.bf-acc-body--compact .bf-acc-block--full .image-wrap {
    order: 0;
}

.bf-acc-body--compact .bf-acc-block--full .bf-media {
    width: 100%;
}

/* --- Mobil --- */
@media (max-width: 991px) {
    .tf-accordion-body .page-title-homepage-2,
    .bf-acc-body--compact .page-title-homepage-2,
    .bf-acc-body--compact .bf-acc-block--full {
        grid-template-columns: 1fr;
    }

    .tf-accordion-body .page-title-homepage-2 .image-wrap {
        order: -1;
        justify-self: center;
    }
}

@media (max-width: 767px) {
    .tf-accordion-body {
        padding: 0 var(--bf-space-4) var(--bf-space-4);
    }
}

/* --- Zihin Check-Up listesi (3. adım) --- */
.tf-accordion-body .section-benefits .box-benefits {
    padding: 0;
    background: none;
    border-radius: 0;
}

/* Üç kolon: altı madde iki satırı tam doldurur. Dört kolonda son satırda iki
   boş hücre kalıyor, kısa metinli kart komşusunun yüksekliğine gerilerek
   içinde büyük bir boşluk taşıyordu. */
.tf-accordion-body .list-check {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr));
    gap: var(--bf-space-4);
    margin: 0;
    padding: 0;
    list-style: none;
}

.tf-accordion-body .list-check li {
    display: block;
    background: var(--bf-surface-2);
    border: 0;
    border-radius: var(--bf-radius);
    padding: var(--bf-space-6);
}

/* İkon pastel bir şeklin içinde durur — çizgi yığını yerine tek yumuşak form.
   Ton madde sırasına göre döner; sıra bilgisi CSS'te, view'da yok. */
.tf-accordion-body .list-check li .title {
    display: flex;
    align-items: center;
    gap: var(--bf-space-3);
    font-size: var(--bf-fs-h4);
    margin-bottom: var(--bf-space-3);
}

.tf-accordion-body .list-check li .title .bf-svg,
.tf-accordion-body .list-check li .title svg {
    flex: 0 0 auto;
    box-sizing: content-box;
    width: 1.375rem;
    height: 1.375rem;
    padding: 0.625rem;
    border-radius: 40% 60% 55% 45% / 55% 45% 60% 40%;
    background: var(--bf-pastel-blue);
    color: var(--bf-ink);
}

.tf-accordion-body .list-check li:nth-child(6n + 2) .title svg { background: var(--bf-pastel-green); }
.tf-accordion-body .list-check li:nth-child(6n + 3) .title svg { background: var(--bf-pastel-orange); }
.tf-accordion-body .list-check li:nth-child(6n + 4) .title svg { background: var(--bf-pastel-magenta); }
.tf-accordion-body .list-check li:nth-child(6n + 5) .title svg { background: var(--bf-pastel-coral); }
.tf-accordion-body .list-check li:nth-child(6n + 6) .title svg { background: var(--bf-pastel-grey); }

/* Tema `p`'ye padding-top veriyor; başlık altı boşluk yalnızca .title marjından
   gelsin diye sıfırlanır (12px + 20px iki kaynaklı boşluk oluşuyordu). */
.tf-accordion-body .list-check li p {
    margin: 0;
    padding: 0;
    font-size: var(--bf-fs-sm);
}

/* Liste bölümü akordeon içinde kendi dikey ritmini eklemez */
.tf-accordion-body .section-benefits {
    padding: 0;
}

/* Hizalama: bölüm başlığı ve kartlar, akordeon başlığındaki `03` ile aynı sol
   hizada durmalı. Bootstrap kalıntısı (kapsayıcı 15px + satır -15px + kolon 15px)
   içeriği 15px içeri itiyor, üç farklı sol kenar oluşuyordu. Zincirin tamamı
   sıfırlanır — styles.css:682 satır marjını `!important` ile verdiği için
   burada da `!important` gerekir. */
.tf-accordion-body .section-benefits .tf-container {
    width: 100%;
    max-width: none;
    padding: 0;
}

.tf-accordion-body .section-benefits .tf-container > .row {
    margin-left: 0 !important;
    margin-right: 0 !important;
}

.tf-accordion-body .section-benefits .tf-container > .row > * {
    padding-left: 0 !important;
    padding-right: 0 !important;
}

.tf-accordion-body .section-benefits .row > .col-12.text-center {
    text-align: left !important;
    margin-bottom: var(--bf-space-6);
}

.tf-accordion-body .section-benefits .row > .col-12 .title {
    font-size: var(--bf-fs-h3);
    text-align: left !important;
}

/* Akordeon başlığı ile gövde aynı iç boşlukta hizalanır */
.tf-accordion-item .accordion-header .title {
    padding: var(--bf-space-5) var(--bf-space-6);
    cursor: pointer;
}

.tf-accordion-item .accordion-header .title .icon {
    position: relative;
    flex: 0 0 auto;
    width: 1.5rem;
    height: 1.5rem;
    color: var(--bf-ink-3);
    transition: color var(--bf-transition), transform var(--bf-transition);
}

.tf-accordion-item .accordion-header .title:not(.collapsed) .icon {
    color: var(--bf-accent);
    transform: rotate(45deg);
}

.tf-accordion-item .accordion-header .title:hover .icon {
    color: var(--bf-accent);
}

/* Açık adım: tüm satırı renkli kutuya çevirmek yerine ince bir sol şerit */
/* Gri vurgu yalnızca başlık satırında: uzun açık panellerde tüm gövdeyi
   gri yapmak ağır duruyordu, içerik beyaz zeminde kalır. */
.tf-accordion-item:has(> .accordion-header > .title:not(.collapsed)) .accordion-header {
    background: var(--bf-surface-2);
}

.tf-accordion-item:has(> .accordion-header > .title:not(.collapsed))::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 3px;
    background: var(--bf-accent-bright);
    z-index: 1;
}

/* Bir adımda birden çok anlatım bloğu varsa aralarında nefes payı */
.tf-accordion-body .page-title-homepage-2 + .page-title-homepage-2 {
    margin-top: var(--bf-space-5);
}

/* =========================================================================
   /surec akordeon — görsel çerçevesi
   =========================================================================
   Görsellerin tamamı 500x500 kare. Geniş kolona object-fit:cover ile
   gerildiğinde kırpılıp bozuluyordu. Artık doğal oranında, küçültülmüş ve
   yumuşak pastel bir şeklin içinde duruyorlar.
   ====================================================================== */

/* NOT: burada daha önce medya sorgusu OLMAYAN ikinci bir
   `.tf-accordion-body .page-title-homepage-2 { grid-template-columns: ... }`
   kuralı vardı. Dosyada 991px'lik mobil kuralından SONRA geldiği için onu
   eziyordu ve mobilde kompakt satırlar tek kolona düşmüyordu. Yerleşim
   tanımı tek yerde (yukarıdaki akordeon bölümünde) tutulur. */

/* Görsel kabı.
   ÖNEMLİ: /images/content/ altındaki görsellerin tamamı 500x500 ve kendi
   dekoratif şekilleri ALFA KANALINDA hazır (köşeler tam şeffaf). Arkalarına
   ayrı bir pastel form koymak iki şeklin çakışmasına yol açıyordu; bu yüzden
   arka form yok. Görsel yalnızca küçültülüp ortalanıyor, şekli korunuyor. */
.bf-media {
    position: relative;
    display: grid;
    place-items: center;
    width: min(13.5rem, 100%);
    aspect-ratio: 1;
}

/* Görsel: doğal oranı ve kendi şekli korunur, kırpılmaz */
.tf-accordion-body .bf-media > img,
.bf-media > img {
    position: static;
    inset: auto;
    width: 100%;
    height: 100%;
    object-fit: contain;
    border-radius: 0;
}

/* Alfa kanalı olmayan (dikdörtgen) görseller için yumuşak köşe */
.bf-media--framed > img {
    border-radius: var(--bf-radius-lg);
    object-fit: cover;
}

/* Geniş bant görsel (noron.png 1100x344) — kare kutuya sıkıştırılmaz */
.bf-media--wide {
    width: 100%;
    max-width: 34rem;
    aspect-ratio: 1100 / 344;
}

@media (max-width: 991px) {
    .bf-media {
        width: min(11rem, 60%);
    }
}

/* =======================================================================
   CTA bandı (/surec sayfa sonu)
   =======================================================================
   Ortalanmış tek kolon düzeni iyi çalışmıyordu: başlık 34px ile 4 satıra
   yayılıp bandın %60'ını kaplıyor, iki yanda 245px ölü alan kalıyor,
   dekoratif form ise .bf-decor içinde 361px'in yalnızca 63px'i görünecek
   şekilde sağ kenarda kırpılıyordu — tasarım öğesi değil, kaza gibi.

   Artık sayfanın geri kalanıyla aynı kalıp: solda metin, sağda tek parça
   pastel form. Form gerçek bir ızgara kolonunda durduğu için kırpılmıyor.
   ==================================================================== */
.bf-cta-band {
    display: grid;
    grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
    align-items: center;
    gap: clamp(1.5rem, 1rem + 3vw, 3.5rem);
    background: var(--bf-surface-2);
    border: 1px solid var(--bf-line);
    border-radius: var(--bf-radius-lg);
    padding: clamp(2rem, 1.5rem + 2vw, 3.25rem);
    /* Üstteki akordeona sıfır boşlukla yapışıyordu. Bölüm sınırı ölçüsü. */
    margin-top: var(--bf-section-y-sm);
}

.bf-cta-band__content {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--bf-space-4);
}

/* Ölçü sınırlı: başlık uzun bir metin bloğu değil, çağrı cümlesi */
.bf-cta-band__content h2 {
    font-size: var(--bf-fs-h3);
    line-height: var(--bf-lh-heading);
    letter-spacing: var(--bf-ls-heading);
    max-width: 34ch;
    margin: 0;
    text-wrap: balance;
}

.bf-cta-band__content .description {
    margin: 0;
    font-size: var(--bf-fs-base);
    max-width: 48ch;
}

.bf-cta-band__content .tf-btn {
    margin-top: var(--bf-space-2);
}

/* Görsel kolonu — Ölçümlemeler bölümüyle aynı bileşen */
.bf-cta-band .bf-skill-media {
    display: grid;
    justify-items: center;
    padding: 0;
}

@media (max-width: 767px) {
    .bf-cta-band {
        grid-template-columns: 1fr;
        padding: var(--bf-space-8) var(--bf-space-5);
    }

    .bf-cta-band .bf-skill-media {
        order: -1;
    }
}

/* =======================================================================
   Başarı hikayeleri (yorumlar)
   =======================================================================
   Slider kırıkken bölüm şöyle görünüyordu: 24 slaytın hepsi 0 piksel
   genişlikte aynı noktada üst üste, içerik karttan taşmış, kart yüksekliği
   1214px ve 3432px, yıldızlar mürekkep siyahı, tarih "2026-07-30 08:18:31".
   Slider hatası swiper.js'te giderildi; burada kart tasarımı tanımlanıyor.
   ==================================================================== */
.section-testimonials .swiper-container.slider-testimonial {
    overflow: hidden;
}

.section-testimonials .swiper-slide {
    height: auto;              /* eşit yükseklik için: flex öğesi gerilsin */
    display: flex;
}

.wg-testimonial {
    display: flex;
    flex-direction: column;
    gap: var(--bf-space-4);
    width: 100%;
    padding: var(--bf-space-6);
}

/* Baş harf avatarı — eskiden satır içi style ile basılıyordu */
.bf-testimonial-avatar {
    display: inline-grid;
    place-items: center;
    width: 2.75rem;
    height: 2.75rem;
    border-radius: var(--bf-radius-pill);
    background: var(--bf-accent-soft);
    color: var(--bf-accent-strong);
    font-family: var(--bf-font-heading);
    font-weight: var(--bf-fw-semibold);
    font-size: var(--bf-fs-base);
    line-height: 1;
    letter-spacing: 0.02em;
    flex: 0 0 auto;
}

/* Puan: sıcak vurgu. styles.css yıldızları --Primary (mürekkep) yapıyordu. */
.wg-testimonial .rating {
    display: flex;
    gap: 0.125rem;
    line-height: 1;
}

.wg-testimonial .rating i {
    color: var(--bf-orange);
    font-size: 1rem;
}

.wg-testimonial .content {
    display: flex;
    flex-direction: column;
    gap: var(--bf-space-4);
    flex: 1 1 auto;
}

/* Metin altı satıra kırpılır — kartlar aynı boyda kalır, bölüm okunur olur */
.wg-testimonial .content .text {
    margin: 0;
    font-size: var(--bf-fs-base);
    line-height: var(--bf-lh-body);
    color: var(--bf-ink-2);
    display: -webkit-box;
    -webkit-line-clamp: 6;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.wg-testimonial .bot {
    margin-top: auto;
    padding-top: var(--bf-space-4);
    border-top: 1px solid var(--bf-line);
}

.wg-testimonial .bot .info .title {
    font-size: var(--bf-fs-sm);
    font-weight: var(--bf-fw-semibold);
    color: var(--bf-ink);
    margin: 0 0 2px;
}

.wg-testimonial .bot .info p {
    margin: 0;
    font-size: var(--bf-fs-xs);
    color: var(--bf-ink-3);
}

/* Sayfalama noktaları */
.section-testimonials .pagination-testimonial {
    position: static;
    margin-top: var(--bf-space-6);
    display: flex;
    justify-content: center;
    gap: 0.5rem;
}

.section-testimonials .pagination-testimonial .swiper-pagination-bullet {
    width: 7px;
    height: 7px;
    margin: 0;
    background: var(--bf-line-strong);
    opacity: 1;
    transition: background-color var(--bf-transition), width var(--bf-transition);
}

.section-testimonials .pagination-testimonial .swiper-pagination-bullet-active {
    width: 22px;
    border-radius: var(--bf-radius-pill);
    background: var(--bf-accent);
}

.section-testimonials .heading-section {
    margin-bottom: var(--bf-space-8);
}

/* Şablonun iki kolonlu yorum düzeni kalıntısı.
   styles.css:6467+ bu bölümü `.slider-testimonial-thumbs` (%50) + slider
   (max-width 690px) olarak flex satıra kuruyordu. Thumbs bloğu kaldırıldı
   (24 yorum için tek statik fotoğraf vardı, eşleşme kırıktı) ve geride
   yalnız kalan slider 690px'e sıkıştı: carousel bölümün SOL YARISINDA
   duruyordu. Tek kolona alınıyor. */
.section-testimonials.page-home-2 .wrap-testimonials {
    display: block;
    padding-bottom: 0;
    border-bottom: 0;
}

.section-testimonials.page-home-2 .wrap-testimonials .slider-testimonial {
    max-width: none;
    padding-bottom: 0;
}

.section-testimonials.page-home-2 .wrap-testimonials > .content {
    padding: 0;
}

/* 1320px altında styles.css `.wrap-testimonials > .content`u %50 yapıyordu
   (yanındaki thumbs kolonu için). Tek kolonda tam genişlik olmalı. */
@media (max-width: 1320px) {
    .section-testimonials.page-home-2 .wrap-testimonials > .content {
        width: 100%;
    }
}

/* styles.css:3249 `padding: 69px 20px 60px 18px`, page-home-2 varyantı ise
   `0 0 10px` basıyordu — kartın yatay iç boşluğu hiç yoktu. */
.section-testimonials.page-home-2 .wg-testimonial,
.wg-testimonial {
    padding: var(--bf-space-6);
}

/* =======================================================================
   Ölçümlemeler sekmeleri — beceri görseli
   =======================================================================
   .box-service şablonda doldurulmayı bekleyen bir .image-wrap slotu
   taşıyordu; markup onu hiç doldurmadığı için sekme içeriğinin sağ yarısı
   boş kalıyordu. Altı sekmeye, beceri ikonunun tek parça pastel bir formun
   içinde gösterildiği bir görsel eklendi.

   İKİ KOLON KENDİMİZ TANIMLANIR. Şablonun kendi düzeni yalnızca 1320px
   ALTINDA grid'e geçiyor (styles.css:7127); üstünde `display: flex` +
   `.image-wrap { flex: none }` kullanıyor. Sonuç: 1920px'te görsel kolonu
   içeriğine büzülüp 200px'e düşüyor, sağda 363px (%28) ölü alan kalıyor ve
   `width: min(17rem, 100%)` shrink-to-fit bir kapta çözüldüğü için form
   ikonun boyuna (104px) iniyordu. Kolon oranı ve form boyu artık viewport'a
   bağlı, kaba bağlı değil.
   ==================================================================== */
.section-service.page-home-2 .box-service {
    display: grid;
    grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
    align-items: center;
    border: 1px solid var(--bf-line);
}

.section-service.page-home-2 .box-service .content {
    padding: clamp(1.75rem, 1.5rem + 1vw, 2.75rem);
}

/* Metin satırı fazla uzamasın — okunabilir ölçü */
.section-service.page-home-2 .box-service .content .description {
    max-width: 60ch;
}

/* Görsel sağa yaslanır; ortalanınca kolonun solunda kalıp sağı boş
   bırakıyordu. */
.section-service.page-home-2 .box-service .image-wrap.bf-skill-media {
    max-width: none;
    display: grid;
    justify-items: end;
    align-items: center;
    padding: clamp(1.25rem, 1rem + 1vw, 2rem) clamp(1.5rem, 1rem + 1.5vw, 2.5rem);
}

/* Kesin boyut: yüzde kullanılmaz, aksi hâlde shrink-to-fit kapta çöker */
.bf-skill-visual {
    display: grid;
    place-items: center;
    width: clamp(9rem, 7rem + 7vw, 15rem);
    aspect-ratio: 1;
    color: var(--bf-accent-strong);
    background: var(--bf-pastel-blue);
}

.bf-skill-visual--green   { background: var(--bf-pastel-green); }
.bf-skill-visual--orange  { background: var(--bf-pastel-orange); }
.bf-skill-visual--magenta { background: var(--bf-pastel-magenta); }
.bf-skill-visual--coral   { background: var(--bf-pastel-coral); }
.bf-skill-visual--grey    { background: var(--bf-pastel-grey); }

/* Siluetler — her sekme farklı bir form, hepsi tek parça ve kontursuz */
.bf-skill-visual--soft     { border-radius: 44% 56% 52% 48% / 50% 44% 56% 50%; }
.bf-skill-visual--circle   { border-radius: 50%; }
.bf-skill-visual--squircle { border-radius: 32%; }
.bf-skill-visual--square   { border-radius: 2.25rem; }
.bf-skill-visual--leaf     { border-radius: 58% 8% 58% 8%; }
.bf-skill-visual--drop     { border-radius: 50% 50% 50% 8%; }

/* İkon formun yarısı kadar — çevresinde nefes payı kalır */
.bf-skill-visual .bf-ico {
    width: 48%;
    height: auto;
}

/* Sekme değişince görsel hafifçe yerleşir */
.widget-content-inner.active .bf-skill-visual {
    animation: bf-skill-in var(--bf-dur-slow) var(--bf-ease) both;
}

@keyframes bf-skill-in {
    from { opacity: 0; transform: scale(0.96); }
    to { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
    .widget-content-inner.active .bf-skill-visual {
        animation: none;
    }
}

@media (max-width: 991px) {
    .section-service.page-home-2 .box-service {
        grid-template-columns: 1fr;
    }

    .section-service.page-home-2 .box-service .image-wrap.bf-skill-media {
        order: -1;
        justify-items: center;
        padding-bottom: 0;
    }

    .bf-skill-visual {
        width: min(11rem, 60%);
    }
}

/* /surec giriş bloğu: sola hizalı, tek hiza.
   Eyebrow bir üst kuraldan `text-align: center` alıyordu; başlık ve
   paragraf sola dayalı olduğu için aynı blokta iki farklı hiza vardı. */
.bf-process-page .heading-section.text-start,
.heading-section.text-start,
.heading-section.text-start > * {
    text-align: left;
}

/* "Süreç Adımları" başlığı akordeondan bir blok-içi boşlukla ayrılır */
.faq > .bf-eyebrow {
    margin-bottom: var(--bf-space-4);
}

/* Buton etiketi butonun rengini devralır.
   styles.css `.tf-btn.style-default > span { color: var(--Primary) }` diyor.
   --Primary token katmanında mürekkep siyahına bağlı olduğu için etiket mavi
   zemin üzerinde siyah kalıyordu (buton kendi `color`ı beyaz olmasına rağmen,
   iç <span> onu eziyordu). `inherit` her varyantta doğru sonucu verir:
   dolgulu butonda beyaz, çerçeveli butonda mürekkep. */
/* Özgüllük şablonun kuralına EŞİT olmalı: `.tf-btn > span` (0,1,1)
   `.tf-btn.style-default > span` (0,2,1) kuralını ezemiyordu; brand.css
   daha sonra yüklendiği için eşit özgüllükte kazanır. */
.tf-btn.style-default > span,
.tf-btn.style-default > i,
.tf-btn.style-default:hover > span,
.tf-btn.style-default:hover > i,
.tf-btn.style-1 > span,
.tf-btn.style-2 > span,
.tf-btn.primary > span,
.tf-btn.outline > span,
.tf-btn.accent > span,
.tf-btn.btn-color-secondary > span,
.tf-btn.btn-color-primary > span,
.tf-btn.btn-color-white > span,
.tf-btn.bf-btn-outline > span,
.tf-btn.bf-btn-warm > span,
.btn-primary > span,
.tf-btn > span,
.tf-btn > span > i,
.tf-btn > i {
    color: inherit;
}

/* Hero görseli — tek katman.
   Görselin arkasındaki `image-frame` SVG'si kaldırıldı; PNG'nin kendi krem
   kartı zaten çerçeve işlevi görüyor, ikinci bir form alanı kalabalıklaştırıyordu.
   Boyut sınırlanır ki hero'da ölçüsüz büyümesin. */
.section-cta .bf-frame--plain {
    display: block;
    width: min(30rem, 100%);
    margin-inline: auto;
}

.section-cta .bf-frame--plain > img {
    width: 100%;
    height: auto;
    border-radius: var(--bf-radius-lg);
}

/* =======================================================================
   İkon çipleri — dolu vurgu + beyaz ikon
   =======================================================================
   Süreç çipleri açık şeftali zemin üzerinde koyu mavi ikon taşıyordu.
   İkonu doğrudan beyaza çevirmek okunurluğu bitirirdi (beyaz / #FEDAC2 =
   1.35:1). Bunun yerine çip dolu vurgu rengine geçiyor; beyaz ikon orada
   4.6:1 veriyor ve butonlarla aynı dili konuşuyor.
   ==================================================================== */
.section-process .process-item .item,
.wrap-process .process-item .item,
.counter-item .icon {
    background-color: var(--bf-accent);
    color: #fff;
}

.section-process .process-item .item svg,
.section-process .process-item .item i,
.wrap-process .process-item .item svg,
.wrap-process .process-item .item i,
.counter-item .icon svg,
.counter-item .icon i {
    color: #fff;
}

.process-item.style-has-icon:hover .item,
.process-item.style-has-icon:hover ~ .process-item .item {
    background-color: var(--bf-accent-strong);
}

/* =======================================================================
   Sayaç bloğu — mobil
   =======================================================================
   Şablon `flex-wrap: wrap` + `justify-content: space-between` kullanıyor;
   375px'te 2x2'ye düşüyor ama etiketlerin `line-height: 30px` değeri
   ("Yıllık Deneyim", "Smart Program" gibi iki satıra düşenlerde) satırları
   birbirinden koparıyordu. Mobilde açık bir ızgara ve normal satır
   yüksekliği kullanılır.
   ==================================================================== */
@media (max-width: 767px) {
    .section-counter .wrap-counter {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: var(--bf-space-6) var(--bf-space-4);
    }

    /* `!important` burada zorunlu: şablon 550px altında
       `.wrap-counter .counter-item { width: 50% !important }` diyor
       (styles.css). Kapsayıcı artık ızgara olduğu için o %50, hücrenin
       yarısına uygulanıyor ve öğe 164px'lik hücrede 82px'e büzülüyordu.
       Kolon genişliğini ızgara belirler; öğe hücreyi doldurmalı. */
    .wrap-counter .counter-item,
    .section-counter .counter-item {
        display: flex;
        flex-direction: column;
        align-items: center;
        text-align: center;
        gap: var(--bf-space-2);
        width: 100% !important;
    }

    .section-counter .counter-item .icon {
        width: 2.75rem;
        height: 2.75rem;
    }

    .section-counter .counter-item .counter-number {
        justify-content: center;
    }

    /* Özgüllük eşitlenmeli: şablonun `.wrap-counter .counter-item.has-icon p`
       (0,3,1) kuralı `line-height: 30px` basıyor ve iki satıra düşen
       etiketlerin satırlarını birbirinden koparıyordu. */
    .wrap-counter .counter-item.has-icon p,
    .counter-item .count p,
    .section-counter .counter-item p {
        margin: 0;
        font-size: var(--bf-fs-sm);
        line-height: var(--bf-lh-snug);
        text-wrap: balance;
    }
}

/* /nasilyapiyoruz hero görseli — ölçü sınırı.
   670x500'lük dosya 605x451 olarak basılıp sağ kolonu tümüyle dolduruyordu.
   Ana sayfa hero'suyla aynı ölçüde tutulur. */
.bf-how-hero .hero-img .bf-frame--plain,
.bf-about-hero .hero-image .bf-frame--plain {
    display: block;
    width: min(28rem, 100%);
    margin-inline: auto;
}

.bf-how-hero .hero-img .bf-frame--plain > img,
.bf-about-hero .hero-image .bf-frame--plain > img {
    width: 100%;
    height: auto;
    border-radius: var(--bf-radius-lg);
}

/* Hero illüstrasyonu (hero-visual).
   `.hero-img` / `.hero-image` şablonda kart gibi davranıyor: yarıçap, gölge
   ve `overflow: hidden`. Görsel PNG iken bu bir çerçeve işlevi görüyordu;
   SVG kendi panelini taşıdığı için o kart artık arkada boş beyaz bir
   dikdörtgen olarak görünüyordu. Kaldırılıyor. */
/* Özgüllük eşitlenmeli: bf-pages.css `.bf-how-hero .hero-img` (0,2,0)
   yarıçap + gölge veriyor, sade `.bf-hero-media` (0,1,0) onu ezemiyordu. */
.bf-how-hero .hero-img.bf-hero-media,
.bf-about-hero .hero-image.bf-hero-media,
.bf-hero-media {
    background: none;
    border-radius: 0;
    box-shadow: none;
    overflow: visible;
    max-width: none;
}

.bf-hero-media > svg {
    display: block;
    width: 100%;
    max-width: 30rem;
    height: auto;
    margin-inline: auto;
}

@media (max-width: 991px) {
    .bf-hero-media > svg {
        max-width: 24rem;
    }
}