/* ===================================================================
   Bizim Kamp — OYADDER
   Crafto "Elder Care" demosunun uzantisi.
   Renk degiskenleri ve tipografi elder-care.css'ten miras alinir;
   burada YALNIZCA yeni bilesenler tanimlanir.
   =================================================================== */

:root {
    --bk-navy: var(--dark-gray, #00482b);
    --bk-crimson: var(--base-color, #ff4e00);
    --bk-mist: #ebeff6;
    --bk-line: rgba(0, 72, 43, .14);
}

/* --- erisilebilirlik --------------------------------------------- */
.skip-link {
    position: absolute;
    left: -9999px;
    top: 0;
    z-index: 1000;
    background: var(--bk-navy);
    color: #fff;
    padding: 12px 22px;
    border-radius: 0 0 6px 0;
    font-weight: 600;
}
.skip-link:focus { left: 0; color: #fff; }

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
    outline: 3px solid var(--bk-crimson);
    outline-offset: 2px;
}

/* ===================================================================
   OLCEK (kok yazi boyutu) - "sayfa zoom yapilmis gibi" sorununun kaynagi
   -------------------------------------------------------------------
   Sablon tipografiyi kok yazi boyutuyla olcekliyor:
       html { font-size: 16px }   ->  992px ve uzeri TAMAMI
       html { font-size: 14px }   ->  768-991
       html { font-size: 12px }   ->  767 ve alti
   Yani 992px ile 2560px arasinda hicbir sey olceklenmiyordu: h2 her
   genislikte 55px, h3 22px, govde 17px kaliyordu.  Kapsayici ise
   1345 -> 1140 -> 960 diye daraliyor.  Sonuc: dar ekranlarda yazilar
   kapsayiciya gore %40'a varan oranda buyuk duruyor - "zoom" hissi.
   Olculen oranlar (h2 / kapsayici genisligi):
       1345px kapsayici -> %4.1   (referans, >=1400)
       1140px kapsayici -> %4.8   (1200-1399)
        960px kapsayici -> %5.7   (992-1199)
   Ara basamaklar ekleyerek orani referansa yaklastiriyoruz.
   >=1400 px'e DOKUNULMADI; begenilen goruntu aynen korunuyor. */
@media (min-width: 1200px) and (max-width: 1399.98px) {
    html { font-size: 15px; }
    /* govde yazisi rem degil px tanimli; ayrica olceklenmesi gerekiyor */
    body { font-size: 16px; line-height: 27px; }
}
@media (min-width: 992px) and (max-width: 1199.98px) {
    html { font-size: 14.2px; }
    body { font-size: 15.5px; line-height: 26px; }
}
/* 768-991 (tabletler) en bozuk banttı: kapsayici 720px'e dusuyor ama
   sablonun kok olcegi 14px kalarak h2'yi 48px'te tutuyordu (%6.7).
   12.5px ile oran %6'ya iniyor; sablonun 767 alti icin kullandigi
   12px olcegiyle de uyumlu kaliyor. */
@media (min-width: 768px) and (max-width: 991.98px) {
    html { font-size: 12.5px; }
    body { font-size: 16px; line-height: 27px; }
}

/* --- sayfa basligi ------------------------------------------------ */
.bk-page-title { position: relative; }
.bk-page-title::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(235,239,246,.92) 0%, rgba(235,239,246,.78) 100%);
}
.bk-page-title .container { position: relative; z-index: 1; }
.bk-page-title h1 { font-size: 56px; line-height: 62px; }
@media (max-width: 991px) { .bk-page-title h1 { font-size: 40px; line-height: 48px; } }
@media (max-width: 575px) { .bk-page-title h1 { font-size: 31px; line-height: 39px; } }

/* --- breadcrumb --------------------------------------------------- */
.bk-breadcrumb .breadcrumb { flex-wrap: wrap; }
.bk-breadcrumb li { color: var(--medium-gray, #5f6b82); }
.bk-breadcrumb li + li::before {
    content: "\203A";
    padding: 0 10px;
    color: var(--medium-gray, #5f6b82);
    opacity: .6;
}
.bk-breadcrumb a { color: var(--medium-gray, #5f6b82); }
.bk-breadcrumb a:hover { color: var(--bk-crimson); }
.bk-breadcrumb li[aria-current] { color: var(--bk-navy); font-weight: 600; }

/* --- tablolar ----------------------------------------------------- */
.bk-table {
    border-collapse: separate;
    border-spacing: 0;
    font-size: 16px;
    line-height: 26px;
    min-width: 560px;
}
.bk-table thead th {
    background: var(--bk-navy);
    color: #fff;
    font-weight: 700;
    font-size: 15px;
    letter-spacing: .2px;
    padding: 16px 20px;
    vertical-align: middle;
    border: none;
}
.bk-table thead th:first-child { border-radius: 8px 0 0 0; }
.bk-table thead th:last-child { border-radius: 0 8px 0 0; }
.bk-table tbody th,
.bk-table tbody td {
    padding: 16px 20px;
    border-bottom: 1px solid var(--bk-line);
    vertical-align: top;
}
.bk-table tbody th {
    font-weight: 700;
    color: var(--bk-navy);
    background: rgba(235, 239, 246, .55);
    width: 26%;
}
.bk-table tbody tr:last-child th,
.bk-table tbody tr:last-child td { border-bottom: none; }
.bk-table tbody tr:hover td { background: rgba(235, 239, 246, .4); }
.bk-table--compare tbody td:last-child {
    background: rgba(255, 78, 0, .045);
    font-weight: 600;
    color: var(--bk-navy);
}
.bk-table--compare thead th:last-child { background: var(--bk-crimson); }

/* --- kontrol listesi ---------------------------------------------- */
.bk-checklist { font-size: 17px; line-height: 27px; }
.bk-checklist i { font-size: 18px; }
.bk-checklist.bk-cols-2 { column-count: 2; column-gap: 40px; }
.bk-checklist.bk-cols-2 li { break-inside: avoid; }
@media (max-width: 767px) { .bk-checklist.bk-cols-2 { column-count: 1; } }

/* --- not kutulari ------------------------------------------------- */
.bk-note {
    display: flex;
    gap: 16px;
    align-items: flex-start;
    padding: 22px 26px;
    border-radius: 10px;
    margin: 0 0 25px;
    font-size: 16px;
    line-height: 26px;
}
/* Kart ızgarasının veya tablonun hemen ardından gelen bilgi bloğu üste
   yapışmasın. Tüm sayfalarda aynı aralık kullanılır. */
.row + .bk-note,
.row + .bk-quote,
.bk-table-sar + .bk-note,
.bk-table-sar + .bk-quote,
.bk-note + .bk-note,
.bk-note + .bk-quote,
.bk-quote + .bk-note { margin-top: 34px; }

@media (max-width: 767px) {
    .row + .bk-note,
    .row + .bk-quote,
    .bk-table-sar + .bk-note,
    .bk-table-sar + .bk-quote,
    .bk-note + .bk-note,
    .bk-note + .bk-quote,
    .bk-quote + .bk-note { margin-top: 26px; }
}
.bk-note i { font-size: 22px; flex-shrink: 0; line-height: 26px; }
.bk-note p:last-child { margin-bottom: 0; }
.bk-note-info { background: var(--bk-mist); color: var(--bk-navy); }
.bk-note-info i { color: var(--bk-navy); }
.bk-note-warn { background: rgba(255, 78, 0, .07); color: var(--bk-navy); }
.bk-note-warn i { color: var(--bk-crimson); }
.bk-note-ok { background: rgba(16, 122, 86, .08); color: #0d3c2e; }
.bk-note-ok i { color: #107a56; }

/* --- alinti ------------------------------------------------------- */
.bk-quote {
    border-left: 4px solid var(--bk-crimson);
    padding: 6px 0 6px 30px;
    margin: 0 0 30px;
}
@media (max-width: 575px) { .bk-quote { padding-left: 20px; } }

/* Tek satirda kalmasi istenen alinti (ana sayfa: "...kosu bandi etkisini
   durdurmak icin var.").  Paragrafin KENDI ic genisligi olculdu (alintinin
   30px sol dolgusu ve sutunun sag dolgusu dusuldukten sonra kalan):
     ic genislik 576px -> tam sigma 25.3px   (>=1400)
     ic genislik 473px -> tam sigma 20.5px   (1200-1399)
     ic genislik 383px -> tam sigma 16.4px   (992-1199)
     ic genislik 656px -> tam sigma 24.0px   (768-991)
     ic genislik 486px -> tam sigma 21.0px   (576-767)
     ic genislik 321px -> tam sigma 14.0px   (<=575)
   Baska bir isletim sisteminde yazi tipi bir tik genis cizilebilecegi icin
   her degerin ~%3 altini kullaniyoruz.
   992-1199 ve <=575 bantlarinda tek satir 16px'in altini gerektiriyor;
   govde metninden kucuk kalacagi icin oralarda dogal sarmaya birakildi. */
.bk-tek-satir { font-size: 24.5px !important; line-height: 36px !important; }
@media (max-width: 1399.98px) {
    .bk-tek-satir { font-size: 19.5px !important; line-height: 29px !important; }
}
@media (max-width: 1199.98px) {
    /* dar sutun: tek satir zorlanmiyor */
    .bk-tek-satir { font-size: 21px !important; line-height: 31px !important; }
}
@media (max-width: 991.98px) {
    .bk-tek-satir { font-size: 23px !important; line-height: 34px !important; }
}
@media (max-width: 767.98px) {
    .bk-tek-satir { font-size: 20px !important; line-height: 30px !important; }
}
@media (max-width: 575.98px) {
    .bk-tek-satir { font-size: 22px !important; line-height: 32px !important; }
}

/* --- vaat / vaat degil ikili kart --------------------------------- */
.bk-promise {
    border-radius: 10px;
    padding: 34px 34px 26px;
    height: 100%;
}
.bk-promise--yes { background: rgba(16, 122, 86, .07); }
.bk-promise--no { background: rgba(255, 78, 0, .06); }
.bk-promise h3 { font-size: 21px; margin-bottom: 20px; }
.bk-promise ul { list-style: none; padding: 0; margin: 0; }
.bk-promise li { display: flex; gap: 12px; margin-bottom: 13px; line-height: 25px; }
.bk-promise li i { margin-top: 4px; flex-shrink: 0; }
.bk-promise--yes li i { color: #107a56; }
.bk-promise--no li i { color: var(--bk-crimson); }

/* --- gunluk akis zaman cizelgesi ---------------------------------- */
.bk-timeline { position: relative; padding-left: 0; list-style: none; margin: 0; }
.bk-timeline::before {
    content: "";
    position: absolute;
    left: 92px;
    top: 12px;
    bottom: 12px;
    width: 2px;
    background: var(--bk-line);
}
.bk-timeline > li { position: relative; display: flex; gap: 26px; padding-bottom: 34px; }
.bk-timeline .bk-time {
    width: 78px;
    flex-shrink: 0;
    text-align: right;
    font-weight: 700;
    color: var(--bk-navy);
    font-size: 18px;
    padding-top: 2px;
}
.bk-timeline .bk-dot {
    position: absolute;
    left: 85px;
    top: 6px;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: #fff;
    border: 3px solid var(--bk-crimson);
    z-index: 1;
}
.bk-timeline .bk-body { padding-left: 34px; flex: 1; }
.bk-timeline .bk-body h4 { font-size: 19px; margin-bottom: 6px; }
.bk-timeline .bk-body p { margin-bottom: 12px; }
.bk-timeline .bk-body img { border-radius: 8px; max-width: 260px; width: 100%; }
.bk-timeline li.bk-highlight .bk-dot { background: var(--bk-crimson); }
.bk-timeline li.bk-highlight .bk-body {
    background: var(--bk-mist);
    border-radius: 10px;
    padding: 22px 26px 22px 34px;
    margin-left: 0;
}
@media (max-width: 767px) {
    .bk-timeline::before { left: 8px; }
    .bk-timeline > li { display: block; padding-left: 34px; padding-bottom: 28px; }
    .bk-timeline .bk-dot { left: 1px; }
    .bk-timeline .bk-time { width: auto; text-align: left; margin-bottom: 6px; color: var(--bk-crimson); }
    .bk-timeline .bk-body { padding-left: 0; }
    .bk-timeline li.bk-highlight .bk-body { padding: 20px; }
}

/* --- asama kartlari (4 asama) ------------------------------------- */
.bk-stage {
    background: #fff;
    border: 1px solid var(--bk-line);
    border-radius: 10px;
    padding: 34px 30px;
    height: 100%;
    transition: all .3s ease;
    position: relative;
    overflow: hidden;
}
.bk-stage:hover { box-shadow: 0 22px 45px rgba(0, 72, 43, .1); transform: translateY(-4px); }
.bk-stage .bk-num {
    font-family: var(--alt-font);
    font-size: 46px;
    line-height: 1;
    color: var(--bk-crimson);
    opacity: .28;
    font-weight: 700;
    display: block;
    margin-bottom: 14px;
}
.bk-stage h3 { font-size: 22px; margin-bottom: 12px; }
.bk-stage p:last-child { margin-bottom: 0; }

/* --- kulvar kartlari ---------------------------------------------- */
.bk-track {
    border-radius: 10px;
    overflow: hidden;
    border: 1px solid var(--bk-line);
    background: #fff;
    height: 100%;
    display: flex;
    flex-direction: column;
    transition: all .3s ease;
}
.bk-track:hover { box-shadow: 0 25px 50px rgba(0, 72, 43, .12); }
.bk-track img { width: 100%; height: 260px; object-fit: cover; }
.bk-track .bk-track-body { padding: 34px 34px 30px; display: flex; flex-direction: column; flex: 1; }
.bk-track .bk-badge {
    display: inline-block;
    background: var(--bk-mist);
    color: var(--bk-navy);
    font-weight: 700;
    font-size: 13px;
    letter-spacing: 1px;
    padding: 6px 14px;
    border-radius: 100px;
    margin-bottom: 14px;
    align-self: flex-start;
}
.bk-track h3 { font-size: 26px; margin-bottom: 8px; }

/* Program sayfasindaki kulvar basliklarinin ustundeki rozet
   ("1. Kulvar · 18-48 ay"). Yas araligi marka turuncusunda. */
.bk-kulvar-etiket {
    display: inline-block;
    background: var(--bk-mist);
    color: var(--bk-navy);
    font-weight: 700;
    font-size: 13px;
    letter-spacing: 1px;
    text-transform: uppercase;
    padding: 7px 16px;
    border-radius: 100px;
    margin-bottom: 16px;
}

/* Duyuru: kutu yerine baslik altinda vurgulu bir satir; marka turuncusu,
   ince cizgi (outline) megafon ikonu. */
.bk-duyuru-vurgu {
    color: var(--base-color, #ff4e00);
    font-weight: 700;
    font-size: 30px;
    line-height: 42px;
    letter-spacing: -.3px;
    max-width: 760px;
    margin: 18px auto 14px;
}
.bk-duyuru-vurgu > i {
    font-size: 26px;
    vertical-align: -2px;
    margin-right: 12px;
    color: var(--base-color, #ff4e00);
}
.bk-duyuru-alt {
    font-size: 18px;
    line-height: 29px;
    color: var(--bk-navy);
    margin-bottom: 0;
}
.bk-duyuru-alt a {
    color: var(--base-color, #ff4e00);
    font-weight: 700;
    text-decoration: underline;
    text-underline-offset: 3px;
}
.bk-duyuru-alt a:hover { color: var(--bk-navy); }
@media (max-width: 1199.98px) {
    .bk-duyuru-vurgu { font-size: 25px; line-height: 36px; }
    .bk-duyuru-vurgu > i { font-size: 22px; margin-right: 10px; }
    .bk-duyuru-alt { font-size: 16.5px; line-height: 27px; }
}
@media (max-width: 767.98px) {
    .bk-duyuru-vurgu { font-size: 21px; line-height: 31px; }
    .bk-duyuru-vurgu > i { font-size: 19px; margin-right: 8px; }
    .bk-duyuru-alt { font-size: 15.5px; line-height: 26px; }
}

/* OYADDER kamp ailesi kartlari (Kamp Ekolu sayfasi) */
.bk-kamp { display: flex; flex-direction: column; }
.bk-kamp .bk-sure {
    display: inline-block;
    align-self: flex-start;
    background: #fff;
    border: 1px solid var(--bk-line);
    color: var(--base-color, #ff4e00);
    font-weight: 700;
    font-size: 11.5px;
    letter-spacing: .8px;
    text-transform: uppercase;
    padding: 4px 11px;
    border-radius: 100px;
    margin-bottom: 10px;
}
.bk-kamp p { flex: 1 1 auto; }
.bk-dis-link {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    margin-top: 4px;
    font-weight: 600;
    font-size: 14.5px;
    color: var(--bk-navy);
    text-decoration: none;
}
.bk-dis-link:hover { color: var(--base-color, #ff4e00); }
.bk-dis-link i { font-size: 13px; color: var(--base-color, #ff4e00); }

/* Ana sayfadaki kulvar kartlari artik satirda ucer duruyor (~418px).
   26px baslik bu genislikte ikinci satira dusuyordu; kart yazi olculerini
   basliklar tek satirda kalacak sekilde kuculttuk. Olculerek belirlendi. */
@media (min-width: 992px) {
    .bk-track h3 { font-size: 21px; line-height: 29px; margin-bottom: 6px; }
    .bk-track .bk-track-sub { font-size: 14.5px; }
    .bk-track p { font-size: 15px; line-height: 25px; }
    .bk-track .bk-track-body { padding: 28px 26px 26px; }
}
.bk-track .bk-track-sub { color: var(--bk-crimson); font-weight: 600; margin-bottom: 14px; display: block; }
.bk-track .bk-track-cta { margin-top: auto; padding-top: 18px; }

/* --- istatistik seridi -------------------------------------------- */
.bk-stat { text-align: center; padding: 10px; }
.bk-stat .bk-stat-num {
    font-family: var(--alt-font);
    font-weight: 700;
    font-size: 46px;
    line-height: 1.1;
    color: var(--bk-navy);
    display: block;
    letter-spacing: -1px;
}
.bk-stat .bk-stat-label { font-size: 16px; line-height: 24px; display: block; margin-top: 8px; }
@media (max-width: 575px) { .bk-stat .bk-stat-num { font-size: 34px; } }

/* --- arac serefligi (ne yapar / ne yapmaz) ------------------------ */
.bk-tool {
    border: 1px solid var(--bk-line);
    border-radius: 10px;
    padding: 30px;
    height: 100%;
    background: #fff;
}
.bk-tool h3 { font-size: 20px; margin-bottom: 18px; }
.bk-tool .bk-does,
.bk-tool .bk-doesnt { display: flex; gap: 12px; margin-bottom: 14px; line-height: 25px; font-size: 16px; }
.bk-tool .bk-does i { color: #107a56; margin-top: 4px; }
.bk-tool .bk-doesnt i { color: var(--bk-crimson); margin-top: 4px; }
.bk-tool .bk-evidence {
    margin-top: 18px;
    padding-top: 16px;
    border-top: 1px solid var(--bk-line);
    font-size: 14px;
    color: var(--medium-gray, #5f6b82);
}
.bk-evidence-pill {
    display: inline-block;
    padding: 3px 12px;
    border-radius: 100px;
    font-weight: 700;
    font-size: 12px;
    letter-spacing: .4px;
    text-transform: uppercase;
}
.bk-evidence-strong { background: rgba(16, 122, 86, .12); color: #0d6b4c; }
.bk-evidence-mid { background: rgba(214, 145, 20, .14); color: #8a5c05; }
.bk-evidence-low { background: rgba(255, 78, 0, .1); color: var(--bk-crimson); }

/* --- ekip karti --------------------------------------------------- */
.bk-person {
    border: 1px solid var(--bk-line);
    border-radius: 10px;
    padding: 30px;
    height: 100%;
    background: #fff;
    transition: all .3s ease;
}
.bk-person:hover { box-shadow: 0 20px 40px rgba(0, 72, 43, .09); }
.bk-person .bk-person-role { color: var(--bk-crimson); font-weight: 600; font-size: 15px; display: block; margin-bottom: 10px; }
.bk-person h3 { font-size: 20px; margin-bottom: 4px; }

/* Fotografli uzman karti: solda portre, sagda metin.
   Gorseller 3:4 oranli; object-fit ile kirpilir, ust hizali tutulur ki
   yuz her zaman cerceve icinde kalsin. */
.bk-person-foto {
    display: flex;
    align-items: flex-start;
    gap: 18px;
    padding: 22px;
}
.bk-person-foto .bk-person-sol { flex: 0 0 146px; width: 146px; }
.bk-person-foto .bk-person-gorsel {
    width: 146px;
    height: 195px;
    object-fit: cover;
    object-position: center top;
    border-radius: 10px;
    display: block;
}
.bk-person-foto .bk-person-icerik { flex: 1 1 auto; min-width: 0; }
/* Metin sagda bitince kartin altinda bosluk kalmasin diye son paragrafin
   alt bosluğunu siliyoruz; kart yuksekligi icerige gore olusuyor. */
.bk-person-foto .bk-person-icerik > *:last-child { margin-bottom: 0; }
@media (max-width: 575px) {
    .bk-person-foto { display: block; padding: 22px; }
    /* Mobilde sutun tam genislik olur; boylece baglanti tek satirda kalir,
       gorsel yine 130px genisliginde durur. */
    .bk-person-foto .bk-person-sol { width: auto; margin-bottom: 16px; }
    .bk-person-foto .bk-person-gorsel { width: 130px; height: 174px; }
}

/* Sosyal medya baglantisi — gorselin hemen altinda, onunla ayni genislikte */
.bk-sosyal {
    display: inline-flex;
    align-items: flex-start;
    gap: 6px;
    margin-top: 10px;
    font-weight: 600;
    font-size: 12.5px;
    line-height: 1.3;
    color: var(--bk-navy);
    text-decoration: none;
}
.bk-sosyal:hover { color: var(--base-color, #ff4e00); }
.bk-sosyal i { font-size: 16px; margin-top: 1px; color: var(--base-color, #ff4e00); line-height: 1; flex-shrink: 0; }

/* --- fiyat kutusu ------------------------------------------------- */
.bk-price {
    background: var(--bk-navy);
    color: #fff;
    border-radius: 12px;
    padding: 50px 45px;
    text-align: center;
}
.bk-price .bk-price-amount {
    font-family: var(--alt-font);
    font-size: 66px;
    line-height: 1;
    font-weight: 700;
    display: block;
    letter-spacing: -2px;
}
.bk-price .bk-price-sub { display: block; margin-top: 12px; opacity: .85; font-size: 18px; }
.bk-price hr { border-color: rgba(255, 255, 255, .2); margin: 32px 0; opacity: 1; }
.bk-price ul { list-style: none; padding: 0; margin: 0; text-align: left; }
.bk-price li { display: flex; gap: 12px; margin-bottom: 12px; line-height: 25px; opacity: .9; }
@media (max-width: 575px) { .bk-price { padding: 35px 25px; } .bk-price .bk-price-amount { font-size: 46px; } }

/* --- formlar ------------------------------------------------------ */
.bk-form fieldset { border: none; padding: 0; margin: 0 0 40px; }
.bk-form legend {
    font-family: var(--alt-font);
    font-weight: 700;
    font-size: 22px;
    color: var(--bk-navy);
    padding: 0 0 6px;
    margin-bottom: 22px;
    border-bottom: 2px solid var(--bk-crimson);
    display: inline-block;
    width: auto;
    float: none;
}
.bk-form label {
    display: block;
    font-weight: 600;
    color: var(--bk-navy);
    margin-bottom: 7px;
    font-size: 15.5px;
}
.bk-form .bk-req { color: var(--bk-crimson); }
.bk-form .bk-hint { font-size: 14px; color: var(--medium-gray, #5f6b82); margin-top: 5px; display: block; line-height: 21px; }
.bk-form .form-control,
.bk-form select.form-control {
    border: 1px solid var(--bk-line);
    border-radius: 8px;
    padding: 13px 16px;
    background: #fff;
    font-size: 16px;
    color: var(--bk-navy);
    width: 100%;
}
.bk-form .form-control:focus { border-color: var(--bk-crimson); box-shadow: 0 0 0 3px rgba(255, 78, 0, .1); }
.bk-form textarea.form-control { min-height: 120px; resize: vertical; }

/* --- il seçici (combobox) ----------------------------------------
   Metin kutusu JS ile .bk-combo içine sarılır. Hata mesajı artık
   girdinin değil sarmalayıcının kardeşi olduğu için ek kural gerekir. */
.bk-combo { position: relative; }
.bk-combo .form-control { padding-right: 40px; }

.bk-combo-ok {
    position: absolute;
    top: 0; right: 0;
    width: 40px; height: 100%;
    cursor: pointer;
    display: flex; align-items: center; justify-content: center;
}
.bk-combo-ok::before {
    content: "";
    width: 9px; height: 9px;
    border-right: 2px solid var(--bk-navy);
    border-bottom: 2px solid var(--bk-navy);
    transform: rotate(45deg) translate(-2px, -2px);
    opacity: .55;
    transition: transform .18s ease, opacity .18s ease;
}
.bk-combo-acik .bk-combo-ok::before {
    transform: rotate(-135deg) translate(-3px, -3px);
    opacity: .9;
}

.bk-combo-liste {
    position: absolute;
    z-index: 30;
    top: calc(100% + 5px);
    left: 0; right: 0;
    max-height: 262px;
    overflow-y: auto;
    margin: 0;
    padding: 6px;
    list-style: none;
    background: #fff;
    border: 1px solid var(--bk-line);
    border-radius: 10px;
    box-shadow: 0 14px 34px rgba(0, 72, 43, .14);
    overscroll-behavior: contain;
}
.bk-combo-secenek {
    padding: 10px 13px;
    border-radius: 7px;
    font-size: 15.5px;
    color: var(--bk-navy);
    cursor: pointer;
    line-height: 1.35;
}
.bk-combo-secenek:hover,
.bk-combo-secenek.bk-combo-aktif {
    background: var(--bk-crimson);
    color: #fff;
}
.bk-combo-bos {
    padding: 12px 13px;
    font-size: 15px;
    color: var(--medium-gray, #5f6b82);
}

/* sarmalayıcı yüzünden kopan kardeş seçiciyi yeniden bağla */
.bk-form .bk-combo:has(.is-invalid) ~ .bk-error { display: block; }
.bk-form .bk-combo .is-invalid { border-color: var(--bk-crimson) !important; }

@media (max-width: 575px) {
    .bk-combo-liste { max-height: 216px; }
    .bk-combo-secenek { padding: 12px 13px; }   /* parmakla dokunmaya uygun */
}

/* --- doğum tarihi seçici ------------------------------------------ */
.bk-tarih { position: relative; }
.bk-tarih .form-control { padding-right: 44px; }

.bk-tarih-ac {
    position: absolute;
    top: 0; right: 0;
    width: 44px; height: 100%;
    border: 0; background: none; padding: 0;
    cursor: pointer;
    display: flex; align-items: center; justify-content: center;
}
.bk-tarih-ac::before {          /* takvim simgesi, saf CSS */
    content: "";
    width: 17px; height: 16px;
    border: 2px solid var(--bk-navy);
    border-radius: 3px;
    border-top-width: 5px;
    opacity: .5;
    transition: opacity .18s ease;
}
.bk-tarih-ac:hover::before,
.bk-tarih-acik .bk-tarih-ac::before { opacity: .9; }

.bk-tarih-panel {
    position: absolute;
    z-index: 30;
    top: calc(100% + 5px);
    left: 0;
    width: 306px;
    max-width: calc(100vw - 34px);
    padding: 14px;
    background: #fff;
    border: 1px solid var(--bk-line);
    border-radius: 12px;
    box-shadow: 0 14px 34px rgba(0, 72, 43, .16);
}
.bk-tarih-ust {
    display: flex; align-items: center; gap: 6px;
    margin-bottom: 12px;
}
.bk-tarih-ust select {
    flex: 1 1 auto;
    min-width: 0;
    border: 1px solid var(--bk-line);
    border-radius: 7px;
    padding: 8px 9px;
    font-size: 15px;
    font-weight: 600;
    color: var(--bk-navy);
    background: #fff;
    cursor: pointer;
}
.bk-tarih-ust select:focus { outline: 2px solid var(--bk-crimson); outline-offset: 1px; }
.bk-tarih-yil { max-width: 92px; }

.bk-tarih-ok {
    flex: 0 0 30px;
    width: 30px; height: 34px;
    border: 1px solid var(--bk-line);
    border-radius: 7px;
    background: #fff;
    cursor: pointer;
    display: flex; align-items: center; justify-content: center;
}
.bk-tarih-ok::before {
    content: "";
    width: 7px; height: 7px;
    border-left: 2px solid var(--bk-navy);
    border-bottom: 2px solid var(--bk-navy);
    opacity: .6;
}
.bk-tarih-geri::before  { transform: rotate(45deg)  translate(1px, -1px); }
.bk-tarih-ileri::before { transform: rotate(-135deg) translate(1px, -1px); }
.bk-tarih-ok:hover:not(:disabled) { border-color: var(--bk-crimson); }
.bk-tarih-ok:disabled { opacity: .32; cursor: default; }

.bk-tarih-gunadi,
.bk-tarih-izgara {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 2px;
}
.bk-tarih-gunadi span {
    text-align: center;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--medium-gray, #5f6b82);
    padding-bottom: 6px;
}
.bk-tarih-gun {
    border: 0; background: none;
    aspect-ratio: 1 / 1;
    border-radius: 7px;
    font-size: 14.5px;
    color: var(--bk-navy);
    cursor: pointer;
    padding: 0;
}
.bk-tarih-gun:hover { background: var(--bk-mist, #eef1f7); }
.bk-tarih-gun.bk-tarih-secili {
    background: var(--bk-crimson);
    color: #fff;
    font-weight: 700;
}
.bk-tarih-bos { aspect-ratio: 1 / 1; }
.bk-tarih-dip {
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid var(--bk-line);
    text-align: center;
    font-size: 13.5px;
    color: var(--medium-gray, #5f6b82);
}

/* yaş ipucu: doğru aralıkta yeşil, dışındaysa kehribar */
.bk-form .bk-hint-iyi   { color: #107a56; }
.bk-form .bk-hint-uyari { color: #9a6207; }

.bk-form .bk-tarih:has(.is-invalid) ~ .bk-error { display: block; }

@media (max-width: 575px) {
    .bk-tarih-panel { width: 296px; padding: 12px; }
}
.bk-form .form-group { margin-bottom: 22px; }
.bk-form .bk-radio-group { display: flex; flex-wrap: wrap; gap: 12px; }
.bk-form .bk-radio {
    display: flex;
    align-items: center;
    gap: 9px;
    border: 1px solid var(--bk-line);
    border-radius: 8px;
    padding: 11px 18px;
    cursor: pointer;
    font-weight: 500;
    color: var(--bk-navy);
    background: #fff;
    transition: all .2s ease;
    margin: 0;
}
.bk-form .bk-radio:hover { border-color: var(--bk-crimson); }
.bk-form .bk-radio input { accent-color: var(--bk-crimson); width: 17px; height: 17px; margin: 0; }
.bk-form .bk-radio:has(input:checked) { border-color: var(--bk-crimson); background: rgba(255, 78, 0, .05); }
.bk-form .bk-consent { display: flex; gap: 12px; align-items: flex-start; margin-bottom: 16px; font-weight: 400; color: inherit; line-height: 25px; }
.bk-form .bk-consent input { accent-color: var(--bk-crimson); width: 19px; height: 19px; margin-top: 3px; flex-shrink: 0; }
.bk-form .bk-hp { position: absolute !important; left: -9999px !important; opacity: 0; height: 0; width: 0; }
.bk-form .bk-error { color: var(--bk-crimson); font-size: 14px; margin-top: 5px; display: none; }
.bk-form .is-invalid { border-color: var(--bk-crimson) !important; }
.bk-form .is-invalid ~ .bk-error { display: block; }

/* --- hukuki metin sayfalari (KVKK vb.) ---------------------------- */
.bk-legal h2 {
    font-family: var(--alt-font);
    font-weight: 700;
    font-size: 27px;
    line-height: 37px;
    color: var(--bk-navy);
    margin: 55px 0 18px;
    padding-bottom: 12px;
    border-bottom: 2px solid var(--bk-line);
    letter-spacing: -.4px;
}
.bk-legal h2:first-of-type { margin-top: 0; }
.bk-legal h3 {
    font-family: var(--alt-font);
    font-weight: 700;
    font-size: 20px;
    line-height: 30px;
    color: var(--bk-navy);
    margin: 32px 0 14px;
}
.bk-legal p { font-size: 16.5px; line-height: 28px; }
.bk-legal .bk-checklist { font-size: 16.5px; line-height: 27px; }
.bk-legal .bk-table { font-size: 15.5px; }
.bk-legal .bk-table tbody th { width: 32%; }
.bk-legal a { color: var(--bk-crimson); text-decoration: underline; }
.bk-legal a:hover { color: var(--bk-navy); }
@media (max-width: 575px) {
    .bk-legal h2 { font-size: 22px; line-height: 31px; margin-top: 42px; }
    .bk-legal h3 { font-size: 18px; line-height: 27px; }
}

/* --- form durum mesaji (formun ustunde) ---------------------------- */
.bk-form-status {
    display: none;
}
.bk-form-status.is-visible {
    display: flex;
    gap: 16px;
    align-items: flex-start;
    padding: 22px 26px;
    border-radius: 10px;
    margin-bottom: 30px;
    border-left: 4px solid;
    animation: bkStatusIn .35s ease both;
    scroll-margin-top: 120px;
}
@keyframes bkStatusIn {
    from { opacity: 0; transform: translateY(-8px); }
    to   { opacity: 1; transform: none; }
}
.bk-form-status i {
    font-size: 22px;
    line-height: 27px;
    flex-shrink: 0;
}
.bk-form-status strong {
    display: block;
    font-size: 17.5px;
    line-height: 27px;
    font-family: var(--alt-font);
    font-weight: 700;
}
.bk-form-status p {
    margin: 6px 0 0;
    font-size: 15.5px;
    line-height: 25px;
}
.bk-form-status a {
    font-weight: 600;
    text-decoration: underline;
    color: inherit;
}

.bk-status-hata {
    background: rgba(255, 78, 0, .07);
    border-left-color: var(--bk-crimson);
    color: var(--bk-navy);
}
.bk-status-hata i { color: var(--bk-crimson); }

.bk-status-ok {
    background: rgba(16, 122, 86, .09);
    border-left-color: #107a56;
    color: #0d3c2e;
}
.bk-status-ok i { color: #107a56; }
.bk-status-ok strong { font-size: 22px; line-height: 32px; }

.bk-status-links {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 18px;
}
.bk-status-links a {
    background: var(--bk-navy);
    color: #fff;
    text-decoration: none;
    padding: 9px 20px;
    border-radius: 100px;
    font-size: 15px;
    font-weight: 600;
    transition: background .2s ease;
}
.bk-status-links a:hover { background: var(--bk-crimson); color: #fff; }

/* hatali radyo/onay grubu */
.bk-form .bk-group-invalid > label:first-of-type,
.bk-form .bk-group-invalid > label:not(.bk-radio) {
    color: var(--bk-crimson);
}
.bk-form .bk-group-invalid .bk-radio {
    border-color: rgba(255, 78, 0, .55);
}

/* gonderim sirasindaki buton */
.bk-form .btn.bk-busy {
    opacity: .75;
    cursor: progress;
    pointer-events: none;
}

/* --- iletisim bilgi kutusu ---------------------------------------- */
.bk-contact-card {
    background: var(--bk-mist);
    border-radius: 10px;
    padding: 32px;
    height: 100%;
}
.bk-contact-card i { color: var(--bk-crimson); font-size: 24px; margin-bottom: 14px; display: block; }
.bk-contact-card h3 { font-size: 19px; margin-bottom: 8px; }
.bk-contact-card a { color: var(--bk-navy); font-weight: 600; }
.bk-contact-card a:hover { color: var(--bk-crimson); }

/* --- footer ------------------------------------------------------- */
.bk-footer .bk-contact-list { list-style: none; padding: 0; margin: 0; }
.bk-footer .bk-contact-list li { display: flex; align-items: flex-start; margin-bottom: 11px; line-height: 24px; }
.bk-footer .bk-contact-list i { color: rgba(255, 255, 255, .55); margin-top: 4px; }
.bk-footer .footer-logo img { max-height: 46px; width: auto; }

/* --- mobil yapiskan cta ------------------------------------------- */
.bk-sticky-cta {
    position: fixed;
    left: 0; right: 0; bottom: 0;
    z-index: 60;
    display: flex;
    background: #fff;
    box-shadow: 0 -4px 22px rgba(0, 72, 43, .14);
    padding: 7px 6px calc(7px + env(safe-area-inset-bottom));
}
.bk-sticky-item {
    flex: 1;
    text-align: center;
    padding: 8px 4px;
    color: var(--bk-navy);
    font-size: 12px;
    font-weight: 600;
    border-radius: 8px;
    line-height: 1.3;
}
.bk-sticky-item i { display: block; font-size: 19px; margin-bottom: 3px; }
.bk-sticky-primary { background: var(--bk-crimson); color: #fff; }
.bk-sticky-primary:hover { color: #fff; }
@media (max-width: 991px) {
    body { padding-bottom: 66px; }
    .scroll-progress { display: none !important; }
}

/* --- cesitli ------------------------------------------------------ */
.bk-cta { padding-top: 100px; padding-bottom: 100px; }
.bk-rounded-img { border-radius: 10px; width: 100%; height: auto; display: block; }
.bk-shadow-img { box-shadow: 0 30px 60px rgba(0, 72, 43, .16); }
.bk-eyebrow { color: var(--bk-crimson); font-weight: 600; text-transform: uppercase; letter-spacing: 1px; font-size: 14px; display: block; margin-bottom: 14px; }
.bk-lead { font-size: 20px; line-height: 33px; color: var(--bk-navy); }
@media (max-width: 575px) { .bk-lead { font-size: 18px; line-height: 30px; } }
.bk-anchor-nav { display: flex; flex-wrap: wrap; gap: 10px; }
/* Ortalanmis bir sutun icindeyse (program.html) kutucuklar da ortalansin;
   flex varsayilani sola yaslamak oldugu icin acikca belirtmek gerekiyor. */
.text-center .bk-anchor-nav { justify-content: center; }
.bk-anchor-nav a {
    border: 1px solid var(--bk-line);
    border-radius: 100px;
    padding: 8px 18px;
    font-size: 15px;
    font-weight: 600;
    color: var(--bk-navy);
    background: #fff;
}
.bk-anchor-nav a:hover { background: var(--bk-navy); color: #fff; border-color: var(--bk-navy); }
.bk-divider { height: 1px; background: var(--bk-line); border: 0; margin: 0; opacity: 1; }
[id] { scroll-margin-top: 100px; }

/* =====================================================================
   MOBİL DÜZENLEMELER
   ---------------------------------------------------------------------
   Bu bloğun tamamı @media içindedir; masaüstü görünümü hiç etkilenmez.
   Amaç: telefonda yazılar makul boyutta olsun ve karşılaştırma tabloları
   yatay kaydırma gerektirmeden tek ekranda görünsün.
   ===================================================================== */

/* --- ana sayfa: telefonda gizlenenler ----------------------------- */
.bk-dar-metin { display: none; }

@media (max-width: 767px) {
    /* Üstteki tarih rozeti tek satırda kalsın: kısa metne geçip
       harf aralığını sıfırlıyoruz. */
    .bk-genis-metin { display: none; }
    .bk-dar-metin   { display: inline; }
    .bk-hero-rozet {
        font-size: 11.5px !important;
        letter-spacing: 0 !important;
        white-space: nowrap;
        padding-left: 14px !important;
        padding-right: 14px !important;
        margin-bottom: 22px !important;
    }
    .bk-hero-rozet i { margin-right: 7px !important; }

    /* Alt sabit çubukta zaten "Başvur" var; bu iki buton gereksiz yer
       kaplıyordu. Geri sayım bloğu kaldırıldı; yerinde kalan iki bilgi
       cümlesi telefonda da GÖRÜNMELİ — beklenti yönetimi açısından
       kritikler, o yüzden gizlenmiyorlar. */
    .bk-hero-butonlar { display: none !important; }
}

/* --- telefonda genel yazı ölçeği ---------------------------------- */
@media (max-width: 767px) {
    body { font-size: 15px; line-height: 25px; }
    p    { font-size: 15px; line-height: 25px; }

    .bk-lead      { font-size: 17px !important; line-height: 27px !important; }
    .bk-checklist { font-size: 15px; line-height: 25px; }
    .bk-checklist i { font-size: 16px; }
    .bk-note      { font-size: 14.5px; line-height: 23px; padding: 17px 18px; gap: 12px; }
    .bk-note i    { font-size: 19px; line-height: 23px; }
    .bk-quote     { font-size: 16px; line-height: 26px; padding-left: 20px; }
    .bk-eyebrow   { font-size: 12px; }

    .bk-tool, .bk-stage, .bk-track { padding: 22px 20px; }
    .bk-tool h3, .bk-stage h3, .bk-track h3 { font-size: 19px; line-height: 27px; }
    .bk-tool p,  .bk-stage p,  .bk-track p  { font-size: 14.5px; line-height: 24px; }

    .bk-evidence, .bk-does, .bk-doesnt { font-size: 13.5px; line-height: 21px; }
    .bk-evidence-pill { font-size: 11px; padding: 3px 9px; }
    .bk-anchor-nav a  { font-size: 13px; padding: 7px 13px; }
    .bk-legal p, .bk-legal li { font-size: 14.5px; line-height: 24px; }
}

@media (max-width: 575px) {
    body, p { font-size: 14.5px; line-height: 24px; }
    .bk-lead { font-size: 16px !important; line-height: 26px !important; }
}

/* --- KARŞILAŞTIRMA TABLOLARI --------------------------------------
   Eskiden min-width:560px vardı; telefonda tablo ekranın dışına taşıyor,
   sütunlar sıkışınca kelimeler tek harf hâlinde alt satıra düşüyordu.
   Telefonda min-width'i kaldırıp ölçeği küçültüyoruz.               */
@media (max-width: 767px) {
    .table-responsive { overflow-x: visible; }

    .bk-table {
        min-width: 0;
        width: 100%;
        /* table-layout:auto — sütun genişliğini içerik belirlesin.
           Sabit yüzde verince uzun satır başlıkları ("QEEG + nörolojik
           değerlendirme") dar sütuna sıkışıp kelime ortasından
           bölünüyordu. Otomatik yerleşim yükü dengeli dağıtıyor. */
        table-layout: auto;
        font-size: 13.5px;
        line-height: 20px;
    }
    .bk-table thead th {
        font-size: 12.5px;
        line-height: 17px;
        padding: 10px 8px;
        letter-spacing: 0;
    }
    .bk-table thead th,
    .bk-table tbody th,
    .bk-table tbody td {
        padding: 10px 8px;
        /* Kelime ORTASINDAN bölünmesin. "Gün" -> "G / ün",
           "değerlendirme" -> "değerlendirm / e" gibi kırılmaların
           sebebi buydu. Otomatik yerleşim zaten sütunu en uzun
           kelimeye göre ölçüyor. */
        word-break: normal;
        overflow-wrap: normal;
        hyphens: manual;
    }
    .bk-table tbody th { font-size: 13px; line-height: 19px; }

    /* Otomatik yerleşimde yalnızca üst sınır koyuyoruz: satır başlığı
       sütunu tabloyu ele geçirmesin, ama gerekirse daralabilsin. */
    .bk-table.bk-s2 tbody th { width: auto; max-width: 45%; }
    .bk-table.bk-s3 tbody th { width: auto; max-width: 38%; }
    .bk-table.bk-s4 tbody th { width: auto; max-width: 42%; }

    /* 4 sütunlu tabloda 2.-4. sütunlar kısa değerler taşır
       ("Çocuk", "~14 saat"), bu yüzden ilk sütuna geniş pay verip
       tabloyu yine de ekrana sığdırabiliyoruz — kaydırma gerekmiyor. */
    .bk-table.bk-s4 { font-size: 12.5px; line-height: 18px; }
    .bk-table.bk-s4 thead th { font-size: 11.5px; line-height: 15px; padding: 9px 5px; }
    .bk-table.bk-s4 tbody th,
    .bk-table.bk-s4 tbody td { padding: 9px 5px; }
    .bk-table.bk-s4 tbody th { font-size: 12px; line-height: 17px; }
}

@media (max-width: 400px) {
    .bk-table { font-size: 12.5px; line-height: 19px; }
    .bk-table thead th { font-size: 11.5px; line-height: 16px; padding: 9px 6px; }
    .bk-table tbody th,
    .bk-table tbody td { padding: 9px 6px; }
    .bk-table tbody th { font-size: 12px; line-height: 17px; }
}

/* Cok dar ekranlar (<=350px kullanilabilir genislik: iPhone SE, Galaxy
   Fold kapali, ya da 360px cihazda gorunur kaydirma cubugu).
   Kelime ortasindan bolme YAPMIYORUZ; onun yerine hucre ic bosluklarini
   kisaltip yazi boyutunu bir tik dusuruyoruz ki tablo tek ekrana sigsin.
   (Olculen: aydinlatma-metni.html 3 sutunlu tablo 4px tasiyordu.) */
@media (max-width: 355px) {
    .bk-table { font-size: 11px; line-height: 16px; }
    .bk-table thead th { font-size: 10px; line-height: 14px; padding: 8px 3px; }
    .bk-table tbody th,
    .bk-table tbody td { padding: 8px 3px; }
    .bk-table tbody th { font-size: 10.5px; line-height: 15px; }
    .bk-legal .bk-table { font-size: 11px; }
}

/* =====================================================================
   MASAÜSTÜ ÜST MENÜ VE LOGO
   ---------------------------------------------------------------------
   Yalnızca yatay menünün göründüğü genişliklerde (>=992px) uygulanır;
   mobil açılır menü, alt sabit çubuk ve footer etkilenmez.

   NOT: şablonun kendi kuralları güçlü seçicilerle yazılmış
   (".navbar .navbar-nav .nav-link", "header .navbar-brand img"),
   bu yüzden burada da aynı güçte seçici kullanmak zorundayız.
   ===================================================================== */
@media (min-width: 992px) {
    /* Logo daha büyük. Şablon max-height:46px ile sınırlıyordu.
       Kaynak görsel 736x210 olduğu için bu boyutta retina keskin kalır. */
    header .navbar-brand img,
    header .navbar .navbar-brand img {
        height: 58px;
        max-height: 58px;
        width: auto;
        max-width: none;
    }
    /* Sayfa kaydırılınca küçülen ince başlık için orantılı boyut */
    header .navbar.mini-header .navbar-brand img { max-height: 34px; height: 34px; }

    /* Menü başlıkları: tek satır, kalın, daha küçük punto.
       "Bizim Kamp Nedir" ve "Ne Kazanacağım?" iki satıra bölünüyordu. */
    header .navbar .navbar-nav .nav-link {
        white-space: nowrap;
        font-size: 15px;
        line-height: 20px;
        font-weight: 700;
        letter-spacing: -.1px;
        padding-left: 13px;
        padding-right: 13px;
    }
    /* Açılır alt menüler aynı ölçekte kalsın */
    header .navbar .navbar-nav .dropdown .dropdown-menu a { font-size: 14.5px; }
}

/* Menü çubuğu logo ile "Başvur" düğmesi arasına sığmak zorunda.
   Ekran daraldıkça punto ve iç boşluğu kademeli olarak düşürüyoruz;
   ölçerek belirlendi. */
@media (min-width: 1200px) and (max-width: 1399px) {
    header .navbar .navbar-nav .nav-link {
        font-size: 14px;
        padding-left: 8px;
        padding-right: 8px;
    }
    header .navbar-brand img,
    header .navbar .navbar-brand img { height: 52px; max-height: 52px; }
}

@media (min-width: 992px) and (max-width: 1199px) {
    header .navbar-brand img,
    header .navbar .navbar-brand img { height: 42px; max-height: 42px; }
    header .navbar .navbar-nav .nav-link {
        font-size: 12.5px;
        padding-left: 5px;
        padding-right: 5px;
        letter-spacing: -.2px;
    }
}

/* =====================================================================
   SAYFA BAŞLIĞI BANDI — dikey ortalama düzeltmesi
   ---------------------------------------------------------------------
   Sabit üst menü, başlık bandının üst kısmını örtüyor. Metin bandın tam
   ortasındaydı ama menünün altında kalan GÖRÜNEN alanın tepesine
   yapışıyordu. Bandın üstüne menü yüksekliği kadar dolgu ekleyerek metni
   görünen alanın ortasına alıyoruz.

   Dolgu değerleri menü yüksekliği ölçülerek belirlendi:
     >=1400px -> 118px | 1200-1399 -> 112px | 992-1199 -> 102px
   991px ve altında şablon zaten margin-top ile boşluk bırakıyor.
   =====================================================================
   Not: bolume sablonun "p-0" sinifi (padding:0 !important) uygulandigi
   icin burada da !important gerekiyor. */
@media (min-width: 992px) {
    section.bk-page-title { padding-top: 102px !important; }
}
@media (min-width: 1200px) {
    section.bk-page-title { padding-top: 112px !important; }
}
@media (min-width: 1400px) {
    section.bk-page-title { padding-top: 118px !important; }
}

/* =====================================================================
   ANA SAYFA HERO — sabit menunun icerigi ortmesi
   ---------------------------------------------------------------------
   Sablonun "pt-8" sinifi  padding-top: 8%  verir. CSS'te yuzdeli dolgu
   HER ZAMAN kapsayicinin GENISLIGINE gore hesaplanir; yuksekligine gore
   degil. Sabit ust menunun yuksekligi ise piksel cinsinden sabittir:
       >=1400px -> 118px | 1200-1399 -> 112px | 992-1199 -> 102px
   Pencere daraldikca %8 kuculur, menu ise ayni kalir. 992-1399 CSS px
   araliginda dolgu menu yuksekliginin altina duser ve tarih rozeti
   menunun arkasinda kalir (olculen: 1200-1399'da 23px, 992-1199'da
   46px ortme).  <=991 px'te sablon zaten margin-top veriyor,
   >=1400 px'te %8 yeterli oluyor -- Mac'te pencere genelde >=1400 px
   oldugu icin sorun orada hic gorunmuyordu.
   Not: medya sorgulari kaydirma cubugu HARIC genislikle eslesir; bu
   yuzden Windows'ta 1007-1414 px'lik pencereler bu aralia duser.
   Cozum: bozuk aralikta dolguyu pikselle sabitliyoruz (menu + 40px).

   Sinir durumu: sablonun "ipad-top-space-margin" margin'i ile bu dolgu
   ust uste binmesin diye o aralikta margin'i sifirliyoruz; boylece
   sonuc, sinirin tam nereye dustugunden bagimsiz olarak hep ayni.
   ===================================================================== */
@media (min-width: 992px) and (max-width: 1199.98px) {
    .bk-hero { margin-top: 0 !important; }
    .bk-hero > .container > .row { padding-top: 142px !important; }
}
@media (min-width: 1200px) and (max-width: 1399.98px) {
    .bk-hero { margin-top: 0 !important; }
    .bk-hero > .container > .row { padding-top: 152px !important; }
}
/* >=1400 px'te rozet zaten menunun altinda kaliyordu ama sagdaki gorsel
   sutunu 13px menunun arkasina giriyordu (fotografin ust kosesi kirpiliyor).
   Menu 118px; gorseli 15px asagi aliyoruz. */
@media (min-width: 1400px) {
    .bk-hero { margin-top: 0 !important; }
    .bk-hero > .container > .row { padding-top: 133px !important; }
}

/* =====================================================================
   "BİZİM KAMP" MARKA YAZISI (SVG)
   ---------------------------------------------------------------------
   Boyut optik olarak hesaplandi, goz karariyla degil:
     SVG'de buyuk harf yuksekligi, toplam yuksekligin %74'u
     (kalan %26 "p" harfinin alt uzantisi).
   Logonun buyuk harfi, yanindaki yazinin buyuk harfiyle ayni olsun diye:
     govde  (Manrope,  buyuk harf 0.73em) -> 0.99em taban;  marka one ciksin
     diye %10 buyutuldu -> 1.09em  (gorunen harf 0.81em, yazidan ~%11 buyuk)
     baslik (Playfair, buyuk harf 0.70em) -> 0.99em.  Basliklarda satir
     yuksekligi yazi boyutuna esit oldugu icin 1.00em ustune cikilamaz;
     aksi halde logo bulunan satir digerlerinden ayrilir. 0.99em'de
     gorunen harf 0.73em -> Playfair'in 0.70em'inden %5 buyuk.
   vertical-align degeri, taban cizgisinin altinda kalan alt uzanti kadar.
   ===================================================================== */
.bk-marka {
    height: 1.09em;
    width: auto;
    display: inline-block;
    vertical-align: -0.28em;
    margin: 0 .04em;
}
/* Koyu veya renkli zeminde logo okunmuyor; beyaza ceviriyoruz.
   Tablo basliklari (koyu yesil ve turuncu) da buna dahil. */
.bg-dark-gray .bk-marka,
.bg-base-color .bk-marka,
.bk-cta .bk-marka,
.bk-sticky-band .bk-marka,
.bk-table thead th .bk-marka,
.bk-table--compare thead th:last-child .bk-marka,
.bk-badge .bk-marka { filter: brightness(0) invert(1); }

/* Metin ici ok isareti.
   Daha once "→" (U+2192) METIN karakteri kullaniliyordu; Manrope'un
   Windows'a inen surumunde bu glif yok ve yedek yazi tipi devreye
   girmedigi icin okla­r bos gorunuyordu. Yazi tipinden tamamen bagimsiz
   olmasi icin gomulu SVG'ye gecildi; rengi metinden miras alir. */
.bk-ok {
    display: inline-block;
    vertical-align: -0.22em;
    margin: 0 0.34em;
    color: var(--base-color, #ff4e00);
    flex-shrink: 0;
}

/* Ana sayfadaki kulvar kartlarinda yalnizca "GRUP A" / "GRUP B" ibaresi
   marka turuncusunda ve kalin; yanindaki yas araligi mevcut renginde kalir. */
.bk-track .bk-badge .bk-grup-ad {
    color: var(--base-color, #ff4e00);
    font-weight: 700;
}

/* Basliklarda Playfair kullaniliyor; buyuk harf yuksekligi biraz farkli. */
h1 .bk-marka, h2 .bk-marka, .h1 .bk-marka, .h2 .bk-marka,
h3 .bk-marka, h4 .bk-marka, .alt-font .bk-marka {
    height: 0.99em;
    vertical-align: -0.26em;
}

/* Tiklanamaz menu basliklari (kendi sayfasi olmayan ust basliklar).
   href tasimadiklari icin hicbir yere gitmezler; yalnizca alt menuyu acarlar. */
.bk-menu-baslik { cursor: pointer; }

/* =====================================================================
   HERO ARKA PLAN VIDEOSU
   ---------------------------------------------------------------------
   Perde KOYU degil ACIK.  Sayfanin geri kalani acik zeminli (--bk-mist)
   oldugu icin koyu bir perde hem yorucu duruyordu hem de tum hero
   tipografisinin beyaza cevrilmesini gerektiriyordu.  Bunun yerine
   videonun uzerine sitenin kendi acik zemin rengi seriliyor; boylece
   orijinal koyu yesil yazi ve butonlar aynen korunuyor.

   Kontrast (koyu yazi #00482b):
     sol kenar   %93 perde -> bilesik ~#ebeef3 -> 9.2:1
     %62 nokta   %62 perde -> bilesik ~#dfe3e4 -> 7.4:1
   Yazi sutunu col-xl-6 ile en fazla %50'ye kadar uzandigindan metnin
   tamami AA esiginin cok uzerinde kaliyor.
   ===================================================================== */
.bk-hero-video-alan { background: #EFE7D6; }   /* video/poster gelmeden once */
.bk-hero-medya {
    position: absolute;
    inset: 0;
    overflow: hidden;
}
.bk-hero-video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 68% 45%;   /* baba-cocuk sagda kalsin, yazi solda */
    display: block;
}
.bk-hero-perde {
    position: absolute;
    inset: 0;
    /* Perde tum alani kaplamaz: soldan saga sonumlenir ve %74'ten sonra
       video tamamen aciktir.  Sonumlemenin bu kadar genis olmasinin sebebi
       videonun HAREKETLI olmasi: baba cocugu dondururken koyu siluetler
       basligin altindan geciyor.  Daha dar bir gecis tek karede iyi
       gorunuyor ama oynarken "Hayat devam ediyor." okunmaz hale geliyor
       (olculdu: dar gecis 1.0:1, bu gecis 4.8:1). */
    background:
        linear-gradient(90deg,
            rgba(239, 231, 214, .92) 0%,
            rgba(239, 231, 214, .90) 38%,
            rgba(239, 231, 214, .62) 50%,
            rgba(239, 231, 214, .22) 62%,
            rgba(239, 231, 214, 0)   74%);
}

/* Orijinal hero'da sagdaki 760px'lik fotograf sutunu satiri yukseltiyor,
   yazi da align-items-center ile ortalaniyordu.  Fotograf sutunu kalktigi
   icin satir yaziya kadar kisaliyor ve ust/alt bosluklar degisiyordu;
   asagidaki taban yukseklik eski dikey ritmi geri getiriyor. */
@media (min-width: 992px) {
    .bk-hero-video-alan > .container > .row { min-height: 760px; }
}

/* Tablet ve telefonda metin tek sutuna dustugu icin perde dikey olur. */
@media (max-width: 991.98px) {
    .bk-hero-video { object-position: 72% 40%; }
    .bk-hero-perde {
        background:
            linear-gradient(180deg,
                rgba(239, 231, 214, .88) 0%,
                rgba(239, 231, 214, .92) 55%,
                rgba(239, 231, 214, .88) 100%);
    }
}

/* Hareket azaltma tercihi: video JS tarafinda hic yuklenmez. */
@media (prefers-reduced-motion: reduce) {
    .bk-hero-video { animation: none !important; }
}

/* --- hero bilgi notlari ------------------------------------------- */
/* Geri sayim kaldirildi; ayirici dikey cizginin yerini marka renginde
   ince bir vurgu aliyor ki blok bosta kalmis gibi durmasin. */
.bk-hero-notlar {
    padding-left: 18px;
    border-left: 3px solid var(--base-color);
}
.bk-hero-notlar span + span { margin-top: 4px; }

/* --- dil secici (ust menu) --------------------------------------- */
.bk-dil { display: flex; align-items: center; gap: 2px; margin-right: 16px; }
.bk-dil-bag {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 6px 9px;
    border-radius: 6px;
    font-size: 13px;
    font-weight: 600;
    line-height: 1;
    color: var(--bk-navy);
    text-decoration: none;
    white-space: nowrap;
}
.bk-dil-bag img {
    width: 21px; height: 14px;
    display: block;
    border-radius: 2px;
    box-shadow: 0 0 0 1px rgba(0, 0, 0, .10);
}
.bk-dil-bag:hover { background: var(--bk-mist); color: var(--bk-navy); }
.bk-dil-secili { color: var(--base-color, #ff4e00); }
/* Dar masaustunde yer kazanmak icin yalnizca bayrak gorunur. */
@media (max-width: 1399.98px) {
    .bk-dil-bag span { display: none; }
    .bk-dil-bag { padding: 6px; gap: 0; }
}

/* Telefonda ust satirdaki secici gizli oldugu icin acilir menuye konan
   kopya. Burada yer sikintisi yok: dil adlari yeniden gorunur. */
.bk-dil-mobil {
    padding: 14px 15px 4px;
    border-top: 1px solid var(--bk-line, rgba(0, 0, 0, .08));
    margin-top: 8px;
}
.bk-dil-mobil .bk-dil { margin-right: 0; gap: 8px; }
.bk-dil-mobil .bk-dil-bag { padding: 8px 12px; gap: 8px; font-size: 15px; }
.bk-dil-mobil .bk-dil-bag span { display: inline; }
.bk-dil-mobil .bk-dil-bag img { width: 24px; height: 16px; }

/* ---------------------------------------------------------------
   UST MENU: ODAK CERCEVESI YOK, AKTIF SAYFA CIZGISI VAR
   ---------------------------------------------------------------
   Bootstrap  .nav-link:focus-visible  icin mavi bir halka veriyordu
   (box-shadow: 0 0 0 .25rem rgba(13,110,253,.25)).  Marka paletiyle
   uyusmadigi ve Safari fareyle tiklamada da gosterdigi icin kaldirildi.
   Yerine: bulunulan sayfanin menu ogesinin altinda turuncu bir cizgi.
   Klavyeyle gezenler icin ayni cizgi odakta da beliriyor; boylece
   erisilebilirlik korunuyor ama ekranda hicbir cerceve cikmiyor. */
.navbar-nav .nav-link:focus,
.navbar-nav .nav-link:focus-visible,
.navbar-nav .nav-link:active {
    box-shadow: none !important;
    outline: none !important;
    border: 0;
}

/* Cizgi, kutuya degil METNE gore konumlansin diye text-decoration
   kullaniyoruz: nav-link kutusu 118px yuksek oldugundan ::after ile
   yerlestirilen cizgi metnin 49px altina dusuyordu.  text-underline-offset
   ile cizgi her kirilma noktasinda metnin 8px altinda kaliyor. */
.navbar-nav > .nav-item.active > .nav-link,
.navbar-nav > .nav-item > .nav-link:focus-visible {
    text-decoration: underline;
    text-decoration-color: var(--base-color, #ff4e00);
    text-decoration-thickness: 3px;
    text-underline-offset: 8px;
}
/* Fare ile tiklanan ogede cizgi belirmesin; yalnizca aktif sayfada kalsin. */
.navbar-nav > .nav-item:not(.active) > .nav-link.bk-fare-odagi { text-decoration: none; }