/*
 * Project overrides on top of the theme (style.css): theme fixes first, then the v2 "Renkli Alanlar"
 * layer (tokens, header, footer, home page, shared components). Inner pages: custom-inner.css.
 */

/* Horizontal overflow: the home hero wave image (header.style-4 .wave) and the platform
   screens row (.projects.style-7 .content > .row, no .container around it) stick out past the
   viewport. clip (not hidden) keeps vertical overflow and position: sticky working. */
header.style-4,
.projects.style-7 > .content {
    overflow-x: clip;
}

/* Contact cards: e-mail / phone are mailto:/tel: links but keep the card's text colour. */
.commun-card .inf h5 a {
    color: inherit;
}

/* ==========================================================================
   Design review 2026-09-27 (docs/design/2026-09-27-tasarim-incelemesi.md), "S" items.
   Implementation note: docs/design/2026-09-27-uygulama-notu.md
   ========================================================================== */

/* One brand blue. The theme's --color-blue4 (#008bd1, 3.74:1 on white) and --color-blue5
   (#157efb) feed .bg-/.color-/.border-blue4|5, nav active state, eyebrows and buttons. */
:root {
    --color-blue4: #1068b0;
    --color-blue5: #1068b0;

    /* v2 "Renkli Alanlar" tokens, docs/design/tasarim-sistemi.md (binding). custom-inner.css loads after this file. */
    --bm-font: "Plus Jakarta Sans", "Plus Jakarta Sans Fallback", system-ui, -apple-system, "Segoe UI", sans-serif;
    --bm-ink: #15243a;
    --bm-text: #33404f;
    --bm-muted: #5e6b7a;
    --bm-brand: #1068b0;
    --bm-brand-dark: #0c5391;
    --bm-brand-tint: #e7f0f7;
    --bm-soft: #f6f8fb;
    --bm-surface: #f3f5f8;
    --bm-border: #dde3ea;
    --bm-success: #1f7a4d;
    --bm-error: #b42318;
    --bm-device: #15243a;
    --bm-container: 1296px; /* 1320px outer with the 12px Bootstrap gutter; same measure on inner pages */
    --bm-radius-card: 16px;
    --bm-radius-band: 20px;
    --bm-radius-button: 10px;
    --bm-radius-device: 22px;
    --bm-section-y: 96px;
    --bm-head-gap: 40px;
    --bm-page-first-y: 48px; /* first band under an inner page head, desktop and mobile */
    --bm-header-h: 72px;

    /* Six cognitive domains (logo colours): solid + 10% tint. Set --c/--t through .bm-d-* helpers. */
    --bm-dikkat: #f68815;            --bm-dikkat-t: #fef3e8;
    --bm-hafiza: #3aaa9a;            --bm-hafiza-t: #ebf6f5;
    --bm-islemleme-hizi: #00adef;    --bm-islemleme-hizi-t: #e6f7fd;
    --bm-mantik: #283090;            --bm-mantik-t: #eaeaf4;
    --bm-yurutucu: #2f66b9;          --bm-yurutucu-t: #eaf0f8;
    --bm-farkindalik: #ed0f66;       --bm-farkindalik-t: #fde7f0;

    /* Earlier aliases (kept for existing rules). */
    --bm-brand-hover: var(--bm-brand-dark);
    --bm-brand-light: var(--bm-brand-tint);
    --bm-line: var(--bm-border);
}

@media screen and (max-width: 991px) {
    :root {
        --bm-section-y: 64px;
        --bm-head-gap: 28px;
    }
}

.btn.bg-blue4:hover,
.btn.bg-blue5:hover,
.butn.bg-blue4:hover,
.butn.bg-blue5:hover {
    background-color: var(--bm-brand-hover) !important;
}

header.style-4 .content .info .play-btn .icon {
    border-color: var(--bm-brand);
}

/* The two feature-card icon circles hard-code #008bd1 instead of the variable. */
.features-card.style-5 .icon,
.features-card.style-7 .icon {
    background: var(--bm-brand);
}

/* Slider pagination (testimonials) used --color-main #0066ff. */
.swiper-pagination-bullet-active {
    background-color: var(--bm-brand);
}

/* Secondary text on cards: #999 (2.85:1) -> #5e6b7a. */
.color-999,
.team-card.style-6 .info small {
    color: var(--bm-muted) !important;
}

/* 1. No gradient words. The hard-stop gradient split words mid-letter ("Bir|eyler"); the
   <span> stays in the markup and renders in solid brand blue. */
.section-head.style-4 h2 span,
.section-head.style-9 h2 span,
header.style-4 .content .info h1 span,
.community.style-4 .content .commun-card .icon i {
    background-image: none;
    -webkit-background-clip: border-box;
    background-clip: border-box;
    -webkit-text-fill-color: currentColor;
    color: var(--bm-brand);
}

/* 3. Turkish casing: capitalize turned "için"/"iptal" into "Için"/"Iptal". The questions are
   stored in sentence case, show them as written. */
.faq.style-3 .accordion-item .accordion-button {
    text-transform: none;
}

/* The active-menu "notch" image (saturated cyan tab hanging from the bar); the active item
   is already marked by its brand-blue text. */
.navbar.style-4 .navbar-nav .nav-item .nav-link::before {
    content: none;
}

/* 4. Decorative clutter: hero wave and blob, rotating circle, orange half circle, coloured
   blobs around the platform mockups, bottom colour splashes, heading pen/underline. */
header.style-4 img.wave,
header.style-4 .content .bubble,
.features.style-7 .img-circle,
.numbers.style-8 .r_shape,
.about.style-4 .bubble,
.about.style-4 .bubble2,
.about.style-4 .bubble3,
.blog.style-7 .shap_color,
.about-page-sec.style-5 .head-line,
.about-page-sec.style-5 .head-pen {
    display: none;
}
.numbers.style-8::after {
    content: none;
}
/* Statistics: the coloured 3D cubes are decoration (alt=""); keep the numbers. */
.numbers.style-8 .numbers-btm .numbers-content .number-card .icon {
    display: none;
}

/* 5. Partner without a logo: name as a text pill instead of a stock image. */
.partner-name-pill {
    display: inline-block;
    max-width: 100%;
    padding: 8px 16px;
    border: 1px solid var(--bm-line);
    border-radius: 14px;
    background-color: #fff;
    color: var(--bm-ink);
    font-size: 14px;
    font-weight: 600;
    line-height: 1.35;
    text-align: center;
    white-space: normal;
}
.img:has(> .partner-name-pill) {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
    background-color: #f3f5f8;
}
.clients.style-5 .content .img:has(> .partner-name-pill) {
    background-color: #fff;
}

@media screen and (max-width: 991px) {
    /* Theme adds 3px tracking to every section heading on mobile ("S ı k  S o r u l a n"). */
    .section-head h2 {
        letter-spacing: normal;
    }

}

@media screen and (max-width: 575px) {
    header.style-4 .content .info h1 {
        line-height: 1.1;
    }
}


/* ==========================================================================
   v2 "Renkli Alanlar" layer: primitives, header, home page, footer.
   Tokens and rules: docs/design/tasarim-sistemi.md. Inner pages: custom-inner.css.
   ========================================================================== */

/* ---- Base: font, casing, focus ---- */
body,
.navbar,
.bm-home,
.bm-inner,
.bm-footer,
.bm-cta,
.bm-announce,
h1, h2, h3, h4, h5, h6,
.btn, .butn, button, input, select, textarea {
    font-family: var(--bm-font);
}
body {
    color: var(--bm-text);
    letter-spacing: 0;
}
.bm-home,
.bm-nav,
.bm-announce,
.bm-footer,
.bm-cta {
    color: var(--bm-text);
    letter-spacing: 0;
    text-transform: none;
}
.bm-home .container,
.bm-announce .container,
.bm-footer .container,
.bm-cta .container {
    max-width: 1320px;
    padding-left: 12px;
    padding-right: 12px;
}
/* :where() keeps these resets at 0,0,1 so single-class component rules (.bm-eyebrow, .bm-lead,
   .bm-section__more, .bm-cta__text, .bm-next-demo__meta) keep their spacing. */
:where(.bm-home, .bm-footer) p {
    margin: 0;
}
:where(.bm-home, .bm-footer) ul {
    margin: 0;
    padding: 0;
    list-style: none;
}
.bm-home img,
.bm-footer img {
    max-width: 100%;
    height: auto;
}
.bm-home a:focus-visible,
.bm-home button:focus-visible,
.bm-home [tabindex]:focus-visible,
.bm-nav a:focus-visible,
.bm-nav button:focus-visible,
.bm-announce a:focus-visible,
.bm-footer a:focus-visible,
.bm-cta a:focus-visible {
    outline: 3px solid var(--bm-brand);
    outline-offset: 2px;
    border-radius: 6px;
}
@media (prefers-reduced-motion: reduce) {
    .bm-home *,
    .bm-nav *,
    .bm-footer * {
        transition: none !important;
        animation: none !important;
    }
}

/* ---- Domain colour helpers: --c solid, --t tint ---- */
.bm-d-brand { --c: var(--bm-brand); --t: var(--bm-brand-tint); }
.bm-d-dikkat { --c: var(--bm-dikkat); --t: var(--bm-dikkat-t); }
.bm-d-hafiza { --c: var(--bm-hafiza); --t: var(--bm-hafiza-t); }
.bm-d-islemleme-hizi { --c: var(--bm-islemleme-hizi); --t: var(--bm-islemleme-hizi-t); }
.bm-d-mantik-akil-yurutme { --c: var(--bm-mantik); --t: var(--bm-mantik-t); }
.bm-d-yurutucu-islevler { --c: var(--bm-yurutucu); --t: var(--bm-yurutucu-t); }
.bm-d-bilincli-farkindalik { --c: var(--bm-farkindalik); --t: var(--bm-farkindalik-t); }

/* ---- Type primitives ---- */
.bm-eyebrow {
    display: block;
    margin: 0 0 12px;
    font-size: 14px;
    line-height: 1.4;
    font-weight: 600;
    color: var(--bm-brand);
    text-transform: none;
    letter-spacing: 0;
}
.bm-h1,
.bm-h2,
.bm-h3 {
    color: var(--bm-ink);
    font-weight: 700;
    letter-spacing: -0.01em;
    text-transform: none;
}
.bm-h1 {
    margin: 0 0 20px;
    font-size: 60px;
    line-height: 1.05;
    font-weight: 800;
    letter-spacing: -0.02em;
}
.bm-h2 {
    margin: 0;
    font-size: 40px;
    line-height: 1.15;
}
.bm-h3 {
    margin: 0 0 8px;
    font-size: 22px;
    line-height: 1.3;
}
.bm-lead {
    margin: 14px 0 0;
    max-width: 640px;
    font-size: 18px;
    line-height: 1.6;
    color: var(--bm-muted);
}

.bm-section-head {
    margin-bottom: var(--bm-head-gap);
    max-width: 760px;
}
.bm-section-head--center {
    margin-left: auto;
    margin-right: auto;
    text-align: center;
}
.bm-section-head--center .bm-lead {
    margin-left: auto;
    margin-right: auto;
}
.bm-section-head--row {
    max-width: none;
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 24px;
}
.bm-section-head--row > div {
    max-width: 640px;
}
.bm-section-head--row .bm-link {
    white-space: nowrap;
    margin-bottom: 6px;
}

/* ---- Buttons and links ---- */
.bm-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    min-height: 48px;
    padding: 12px 22px;
    border: 1.5px solid transparent;
    border-radius: var(--bm-radius-button);
    font-size: 16px;
    font-weight: 600;
    line-height: 1.2;
    text-decoration: none;
    text-transform: none;
    letter-spacing: 0;
    white-space: nowrap;
    cursor: pointer;
    transition: background-color .2s, border-color .2s, color .2s;
}
.bm-btn--lg {
    min-height: 54px;
    padding: 14px 26px;
    font-size: 17px;
}
.bm-btn--sm {
    min-height: 40px;
    padding: 8px 16px;
    font-size: 15px;
}
.bm-btn--block {
    width: 100%;
}
.bm-btn--primary {
    background: var(--bm-brand);
    color: #fff;
}
.bm-btn--primary:hover,
.bm-btn--primary:focus-visible {
    background: var(--bm-brand-dark);
    color: #fff;
}
.bm-btn--outline {
    background: transparent;
    border-color: var(--bm-ink);
    color: var(--bm-ink);
}
.bm-btn--outline:hover,
.bm-btn--outline:focus-visible {
    background: var(--bm-ink);
    color: #fff;
}
.bm-btn--ghost {
    padding-left: 4px;
    padding-right: 4px;
    color: var(--bm-ink);
}
.bm-btn--ghost:hover {
    color: var(--bm-brand);
}
/* M10: arrow nudges 4px on hover; play ring picks up the brand colour. */
.bm-btn--primary .bm-icon {
    transition: transform var(--m-fast, 150ms) cubic-bezier(.22, 1, .36, 1);
}
.bm-btn--primary:hover .bm-icon {
    transform: translateX(4px);
}
.bm-btn--ghost .bm-play,
.bm-video-link__icon {
    transition: border-color var(--m-fast, 150ms);
}
.bm-btn--ghost:hover .bm-play,
.bm-video-link:hover .bm-video-link__icon {
    border-color: var(--bm-brand);
}
.bm-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 16px;
    font-weight: 600;
    color: var(--bm-brand);
    text-decoration: none;
}
.bm-link:hover {
    color: var(--bm-brand-dark);
}
.bm-link .bm-icon {
    width: 20px;
    height: 20px;
    transition: transform .2s;
}
.bm-link:hover .bm-icon {
    transform: translateX(3px);
}
.bm-icon {
    flex: none;
}

/* ---- Chips, dots, checks ---- */
.bm-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
.bm-chip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 7px 14px;
    border-radius: 999px;
    background: var(--t, var(--bm-brand-tint));
    border: 1px solid transparent;
    color: var(--bm-ink);
    font-size: 14px;
    font-weight: 600;
    line-height: 1.3;
    text-decoration: none;
    transition: border-color .2s;
}
a.bm-chip:hover {
    border-color: var(--c, var(--bm-brand));
    color: var(--bm-ink);
}
.bm-chip--white {
    background: #fff;
    border-color: var(--bm-border);
}
.bm-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--c, var(--bm-brand));
    flex: none;
}
.bm-checks {
    display: grid;
    gap: 10px;
}
.bm-checks li {
    display: flex;
    gap: 10px;
    align-items: flex-start;
}
.bm-checks .bm-icon {
    width: 20px;
    height: 20px;
    color: var(--c, var(--bm-brand));
    margin-top: 3px;
}

/* ---- Device frame around a real screenshot ---- */
.bm-device {
    margin: 0;
    padding: 10px;
    background: var(--bm-device);
    border-radius: var(--bm-radius-device);
}
.bm-device img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 10;
    object-fit: cover;
    object-position: top;
    border-radius: 12px;
}
.bm-device--sm {
    padding: 7px;
    border-radius: 16px;
}
.bm-device--sm img {
    border-radius: 9px;
}

/* ---- Sections ---- */
.bm-section {
    padding: var(--bm-section-y) 0;
}
.bm-surface,
.bm-section--soft {
    background: var(--bm-soft);
}
.bm-section--line {
    border-top: 1px solid var(--bm-border);
}
/* The theme's `.features.style-7` (100px 15px under 991) outranks .bm-section on the home page. */
.bm-home .features.style-7 {
    padding: var(--bm-section-y) 0;
}

/* ---- Announcement bar (K9, variant C "Altı renk çizgi": docs/design/concepts/announce-variants.html) ----
   Brand tint, 3px line of the six domain colours (equal segments, hard edges), brand chip + ink text
   (13.5:1 on the tint), small solid brand button (white on brand 5.79:1, hover 7.9:1). Not sticky: only the nav sticks. */
.bm-announce {
    background: var(--bm-brand-tint);
    border-bottom: 1px solid var(--bm-border);
}
.bm-announce__rule {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    height: 3px;
}
.bm-announce__rule span:nth-child(1) { background: var(--bm-dikkat); }
.bm-announce__rule span:nth-child(2) { background: var(--bm-hafiza); }
.bm-announce__rule span:nth-child(3) { background: var(--bm-islemleme-hizi); }
.bm-announce__rule span:nth-child(4) { background: var(--bm-mantik); }
.bm-announce__rule span:nth-child(5) { background: var(--bm-yurutucu); }
.bm-announce__rule span:nth-child(6) { background: var(--bm-farkindalik); }
.bm-announce__row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    padding-top: 7px;
    padding-bottom: 7px;
}
.bm-announce__text {
    margin: 0;
    font-size: 14px;
    line-height: 1.5;
    color: var(--bm-ink);
}
.bm-announce__label {
    display: inline-block;
    margin-right: 8px;
    padding: 2px 10px;
    border-radius: 999px;
    background: var(--bm-brand);
    color: #fff;
    font-size: 12px;
    font-weight: 700;
    line-height: 1.5;
    vertical-align: 1px;
}
.bm-announce__btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    flex: none;
    padding: 5px 12px;
    border-radius: 8px;
    background: var(--bm-brand);
    color: #fff;
    font-size: 13px;
    font-weight: 600;
    line-height: 1.5;
    text-decoration: none;
    white-space: nowrap;
}
.bm-announce__btn:hover,
.bm-announce__btn:focus {
    background: var(--bm-brand-dark);
    color: #fff;
}
.bm-announce__btn .bm-icon {
    width: 14px;
    height: 14px;
    stroke-width: 2;
}
@media (max-width: 639.98px) {
    .bm-announce__row {
        justify-content: space-between;
        gap: 12px;
        padding-top: 10px;
        padding-bottom: 10px;
    }
}
@media (max-width: 575.98px) {
    .bm-announce__text {
        font-size: 13px;
    }
}

/* ---- Navbar: sticky white bar, 72px, active link underlined ---- */
.navbar.style-4.bm-nav {
    position: sticky;
    top: 0;
    z-index: 1030;
    min-height: var(--bm-header-h);
    padding: 0;
    background: #fff;
    border-bottom: 1px solid var(--bm-border);
    box-shadow: none;
}
.bm-nav > .container {
    max-width: 1320px;
    padding-left: 12px;
    padding-right: 12px;
}
.bm-nav .navbar-brand {
    margin: 0 20px 0 0;
    padding: 14px 0;
}
.bm-nav .navbar-brand img {
    height: 40px;
    width: auto;
    max-width: none;
}
.bm-nav .navbar-nav {
    gap: 0;
    margin: 0;
    text-transform: none;
}
.bm-nav .navbar-nav .nav-item {
    width: auto;
    flex: none;
    margin: 0;
}
.bm-nav .navbar-nav .nav-item .nav-link {
    white-space: nowrap;
    padding: 24px 8px;
    font-size: 15px;
    font-weight: 500;
    line-height: 1.5;
    color: var(--bm-ink);
    text-transform: none;
    letter-spacing: 0;
    border-bottom: 2px solid transparent;
    transition: color .2s, border-color .2s;
}
.bm-nav .navbar-nav .nav-item .nav-link:hover,
.bm-nav .navbar-nav .nav-item .nav-link.active {
    color: var(--bm-brand);
}
.bm-nav .navbar-nav .nav-item .nav-link.active {
    border-bottom-color: var(--bm-brand);
}
.bm-nav .navbar-nav .nav-item .nav-link::before {
    content: none;
}
.bm-nav .navbar-nav .dropdown-menu {
    margin-top: 0;
    padding: 8px;
    border: 1px solid var(--bm-border);
    border-radius: 12px;
    box-shadow: 0 12px 32px -12px rgba(21, 36, 58, .25);
    min-width: 220px;
}
.bm-nav .navbar-nav .dropdown-item {
    padding: 10px 12px;
    border-radius: 8px;
    font-size: 15px;
    font-weight: 500;
    color: var(--bm-ink);
    text-transform: none;
}
.bm-nav .navbar-nav .dropdown-item:hover,
.bm-nav .navbar-nav .dropdown-item:focus {
    background: var(--bm-brand-tint);
    color: var(--bm-brand);
}
.bm-nav__actions {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-left: 16px;
}
.bm-nav .navbar-collapse {
    flex: 1 1 auto;
    min-width: 0;
}
/* Home link: icon only from 1200px, text "Ana Sayfa" in the collapsed menu. */
.bm-nav__home-icon {
    display: block;
    width: 20px;
    height: 20px;
}
@media (min-width: 1200px) {
    /* menu centred between the logo and the Platform/Demo buttons */
    .bm-nav .navbar-nav {
        margin: 0 auto;
    }
    .bm-nav .navbar-nav .nav-item .nav-link.bm-nav__home {
        display: flex;
        align-items: center;
        /* 20px icon + 23px + 23px + 2px underline = the 68px text links */
        padding-top: 23px;
        padding-bottom: 23px;
    }
    .bm-nav__home-text {
        display: none;
    }
}
@media (min-width: 1200px) and (max-width: 1399.98px) {
    /* 7 items + logo + two buttons fit 1176px: tighter gap, same 15px type */
    .navbar.style-4.bm-nav .navbar-nav .nav-item .nav-link {
        margin: 0 6px;
    }
}
@media (max-width: 1199.98px) {
    .bm-nav__home-icon {
        display: none;
    }
}
.bm-nav__link {
    white-space: nowrap;
    padding: 8px 6px;
    font-size: 15px;
    font-weight: 500;
    color: var(--bm-ink);
    text-decoration: none;
}
.bm-nav__link:hover {
    color: var(--bm-brand);
}
.bm-nav__compact {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-left: auto;
}
.bm-burger {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    padding: 0;
    border: 1px solid var(--bm-border);
    border-radius: var(--bm-radius-button);
    background: #fff;
    box-shadow: none;
}
.bm-burger:focus {
    box-shadow: none;
    outline: 3px solid var(--bm-brand);
    outline-offset: 2px;
}
.bm-burger__bars,
.bm-burger__bars::before,
.bm-burger__bars::after {
    display: block;
    width: 20px;
    height: 2px;
    border-radius: 2px;
    background: var(--bm-ink);
    content: "";
}
.bm-burger__bars {
    position: relative;
}
.bm-burger__bars::before,
.bm-burger__bars::after {
    position: absolute;
    left: 0;
}
.bm-burger__bars::before {
    top: -6px;
}
.bm-burger__bars::after {
    top: 6px;
}
@media (max-width: 1199.98px) {
    .bm-nav .navbar-collapse {
        padding: 8px 0 20px;
        border-top: 1px solid var(--bm-border);
        margin-top: -1px;
    }
    .bm-nav .navbar-nav {
        gap: 0;
    }
    .bm-nav .navbar-nav .nav-item .nav-link {
        padding: 12px 0;
        border-bottom: 1px solid var(--bm-border);
    }
    .bm-nav .navbar-nav .nav-item .nav-link.active {
        border-bottom-color: var(--bm-border);
    }
    .bm-nav .navbar-nav .dropdown-menu {
        border: 0;
        box-shadow: none;
        padding: 0 0 8px 12px;
    }
    .bm-nav__actions {
        margin: 16px 0 0;
        flex-wrap: wrap;
    }
    .bm-nav .navbar-brand {
        padding: 12px 0;
    }
}
@media (max-width: 575.98px) {
    /* One 16px phone gutter for header, content, demo band, CTA and footer (inner pages: custom-inner.css). */
    .bm-nav > .container,
    .bm-home .container,
    .bm-announce .container,
    .bm-footer .container,
    .bm-cta .container {
        padding-left: 16px;
        padding-right: 16px;
    }
    .bm-nav .navbar-brand img {
        height: 34px;
    }
    .bm-nav__compact .bm-btn {
        display: none;
    }
}

/* ---- Home: hero (J5b, concept 7 + dot field 2) ----
   Prototypes: docs/design/concepts/hero-7-tipografik-sahne-b.html (layout, word states, scene) and
   hero-7b-arka-planlar.html?bg=2 (dot field). Centred eyebrow + h1 + lead + actions, the Tarama -> Plan -> İzleme
   scene under them, trust strip below the hero. Motion: motion.js hero() + motion.css. No shadow, no gradient. */
.bm-hero {
    --bm-hero-min: min(calc(100vh - var(--bm-header-h)), 920px);
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: var(--bm-hero-min);
    min-height: min(calc(100svh - var(--bm-header-h)), 920px);
    /* eyebrow breathing room under the sticky nav (owner 2026-09-28): 134 / 96 (≤1199) / 72 (≤991) / 48 (≤639) */
    padding: 134px 0 28px;
    background: #fff;
    overflow-x: clip;
}
.bm-hero__inner {
    position: relative;
    z-index: 1;
    width: 100%;
}
.bm-hero .bm-eyebrow {
    margin-bottom: 12px;
    text-align: center;
}
.bm-hero__title.bm-h1 {
    margin: 0;
    font-size: clamp(40px, 6.1vw, 88px);
    line-height: 1;
    letter-spacing: -.03em;
    text-align: center;
}
/* Word-state masks: .12em top / .2em bottom padding keeps İ, Ö and ç, y, ş, ğ inside the mask; the negative margins
   keep the line spacing (net +.06em). motion.js clips (.is-playing) only while the words move. */
.bm-hero__mask {
    display: block;
    padding: .12em 0 .2em;
    margin: -.12em 0 -.14em;
}
.bm-hero__mask > span {
    display: block;
}
/* The final words reserve the cell (CLS 0); the rotating row motion.js adds sits in the same grid area. */
.bm-hero__slot {
    display: grid;
}
.bm-hero__slot > * {
    grid-area: 1 / 1;
}
.bm-hero__fin {
    display: block;
}
.bm-hero__fw {
    display: inline-block;
    vertical-align: top;
    padding: .12em .02em .2em;
    margin: -.12em -.02em -.14em;
}
.bm-hero__fw > span {
    display: inline-block;
}
.bm-hero.is-playing :is(.bm-hero__mask, .bm-hero__fw) {
    overflow: hidden;
}
.bm-hero__rot {
    display: grid;
    align-self: start;
    overflow: hidden;
    padding: .12em 0 .2em;
    margin: -.12em 0 -.14em;
    visibility: hidden;
}
.bm-hero.is-playing .bm-hero__rot {
    visibility: visible;
}
.bm-hero__w {
    grid-area: 1 / 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0 28px;
    white-space: nowrap;
    transform: translateY(-150%);
}
.bm-hero__w .bm-chip {
    font-size: 15px;
    letter-spacing: 0;
    line-height: 1.3;
}
.bm-hero__copy {
    margin-top: 14px;
    text-align: center;
}
.bm-hero__lead {
    max-width: 880px;
    margin: 0 auto;
    font-size: 19px;
    line-height: 1.5;
    color: var(--bm-muted);
}
.bm-hero__lead p {
    margin: 0;
}
.bm-hero__lead p + p {
    margin-top: 10px;
}
.bm-hero__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 12px 24px;
    margin-top: 18px;
}
.bm-video-link {
    color: var(--bm-ink);
}
.bm-video-link__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: 1.5px solid var(--bm-border);
    background: #fff;
    color: var(--bm-brand);
}
.bm-video-link__icon .bm-icon {
    width: 18px;
    height: 18px;
    margin-left: 2px;
}

/* Dot field (lower ~40% of the hero); drawn by motion.js, empty without JavaScript. */
.bm-dots {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 0;
    display: block;
    width: 100%;
    height: 40%;
    pointer-events: none;
}

/* Scene: steps + isometric stack; every size derives from the layer width --lw. */
.bm-scene {
    --lw: 348px;
    --stw: 252px;
    --pad: calc(var(--lw) * .022);
    --lh: calc((var(--lw) - var(--pad) * 2) * .625 + var(--pad) * 2);
    --dz: calc(var(--lw) * .3);
    --shift: calc(var(--lw) * .07);
    --r: calc(var(--lw) * .04);
    position: relative;
    margin: calc(var(--lw) * .15) 0 0;
}
.bm-scene__row {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr) calc(var(--lw) * 1.9) minmax(0, 1fr);
    height: calc(var(--lw) * 1.22);
}
.bm-scene__stage {
    grid-column: 2;
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    perspective: calc(var(--lw) * 4.25);
    perspective-origin: 50% 40%;
}
.bm-scene__tilt {
    width: var(--lw);
    height: var(--lh);
    margin-top: calc(var(--dz) * .95);
    transform-style: preserve-3d;
}
.bm-scene__stack {
    position: relative;
    width: 100%;
    height: 100%;
    transform-style: preserve-3d;
    transform: rotateX(56deg) rotateZ(-36deg);
}
.bm-scene__stack * {
    transform-style: preserve-3d;
}
/* style.css gives every span a 0.3s transition; the stack is driven by GSAP only (a transition fights the tweens). */
.bm-scene span,
.bm-hero__title span {
    transition: none;
}
.bm-scene__floor {
    position: absolute;
    inset: calc(var(--lw) * -.05);
    transform: translate3d(calc(var(--shift) * .5), calc(var(--shift) * -.5), calc(var(--lw) * -.045));
    background: var(--bm-brand-tint);
    border: 1px solid #cfdcea;
    border-radius: calc(var(--r) * 1.4);
}
.bm-scene__layer,
.bm-scene__lift {
    position: absolute;
    inset: 0;
}
.bm-scene__layer--2 {
    transform: translate3d(var(--shift), calc(var(--shift) * -1), var(--dz));
}
.bm-scene__layer--3 {
    transform: translate3d(calc(var(--shift) * 2), calc(var(--shift) * -2), calc(var(--dz) * 2));
}
.bm-scene__edge {
    position: absolute;
    inset: 0;
    border-radius: var(--r);
    background: var(--t);
    border: 1px solid var(--c);
    transform: translateZ(calc(var(--lw) * -.0225));
}
.bm-scene__plate {
    position: absolute;
    inset: 0;
    padding: var(--pad);
    background: #fff;
    border: 1px solid #c3ceda;
    border-radius: var(--r);
}
.bm-scene__plate img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 10;
    object-fit: cover;
    object-position: top;
    border: 1px solid var(--bm-border);
    border-radius: calc(var(--r) * .56);
}
.bm-scene__node,
.bm-scene__anc {
    position: absolute;
    top: 50%;
    z-index: 1;
    width: calc(var(--lw) * .085);
    height: 0;
    border-top: 1.8px solid var(--bm-ink);
}
.bm-scene__node {
    left: calc(var(--lw) * -.085);
}
.bm-scene__anc {
    right: calc(var(--lw) * -.085);
}
.bm-scene__node b,
.bm-scene__anc b {
    position: absolute;
    top: -7px;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: var(--bm-ink);
    border: 2px solid var(--bm-ink);
}
.bm-scene__node b { left: -6px; }
.bm-scene__anc b { right: -6px; }
/* Riser: from this layer's node to the next one; atan(.3 / (.07 * 1.414)) = 71.6deg, length .316 lw. */
.bm-scene__riser {
    position: absolute;
    left: calc(var(--lw) * -.085);
    top: 50%;
    width: calc(var(--lw) * .316);
    height: 20px;
    margin-top: -10px;
    transform-origin: 0 50%;
    transform: rotateZ(-45deg) rotateY(-71.6deg);
}
/* Six-colour line: three flex segments (Firefox paints no SVG inside the 3D riser plane), each a round-capped
   3.6px stroke: every segment starts 1.8px early with a round end and covers the previous one's end, like the
   round stroke caps it replaces. motion.js draws each segment with scaleX. */
.bm-scene__seg {
    position: absolute;
    left: -1.8px;
    right: -1.8px;
    top: 50%;
    height: 3.6px;
    margin-top: -1.8px;
    display: flex;
}
.bm-scene__seg i {
    flex: 1;
    padding-left: 1.8px;
    border-radius: 1.8px 0 0 1.8px;
    background: var(--c);
    transform-origin: 0 50%;
}
.bm-scene__seg i + i {
    margin-left: -1.8px;
}
.bm-scene__seg i:last-child {
    padding-right: 1.8px;
    border-radius: 1.8px;
}
/* Flat path (.bm-scene--flat: Gecko, set by hero-scene.blade.php; ?flat=1 previews it elsewhere). Firefox with
   WebRender composites the preserve-3d stack wrongly (thick rims, flattened layers), so there it is drawn with no 3D
   at all: every plane gets the 2D affine that best fits its four projected corners in Chrome's final frame
   (least squares, measured at 1440 and 390; corners within ~2.5% of --lw of the 3D frame, the rest is the
   perspective keystone an affine cannot draw). --m is the linear part, --tx/--ty the translation in --lw units.
   Layer shifts and heights live in the lift matrices; edges are relative to their lift, and each riser runs from
   its node to the next layer's node as drawn by the two flat lift matrices (so the line always meets its dots). */
.bm-scene--flat .bm-scene__stage { perspective: none; }
.bm-scene--flat .bm-scene__tilt,
.bm-scene--flat .bm-scene__stack,
.bm-scene--flat .bm-scene__stack * { transform-style: flat; }
.bm-scene--flat .bm-scene__stack,
.bm-scene--flat .bm-scene__layer { transform: none; }
.bm-scene--flat :is(.bm-scene__floor, .bm-scene__lift, .bm-scene__edge) { transform-origin: 0 0; }
.bm-scene--flat :is(.bm-scene__floor, .bm-scene__lift, .bm-scene__edge, .bm-scene__riser) {
    transform: translate(calc(var(--lw) * var(--tx)), calc(var(--lw) * var(--ty))) matrix(var(--m), 0, 0);
}
.bm-scene--flat .bm-scene__floor { --m: .7987, -.3591, .5757, .4948; --tx: -.1082; --ty: .4075; }
.bm-scene--flat .bm-scene__layer--1 .bm-scene__lift { --m: .8115, -.3629, .5838, .5002; --tx: -.104; --ty: .3563; }
.bm-scene--flat .bm-scene__layer--2 .bm-scene__lift { --m: .8267, -.3346, .5984, .4613; --tx: -.1008; --ty: .0496; }
.bm-scene--flat .bm-scene__layer--3 .bm-scene__lift { --m: .8424, -.3035, .6137, .4184; --tx: -.0975; --ty: -.2703; }
.bm-scene--flat .bm-scene__layer--1 .bm-scene__edge { --m: .999, -.0027, -.0026, 1.0007; --tx: -.0154; --ty: .0245; }
.bm-scene--flat .bm-scene__layer--2 .bm-scene__edge { --m: .9993, -.0032, -.0031, 1.0014; --tx: -.0183; --ty: .0283; }
.bm-scene--flat .bm-scene__layer--3 .bm-scene__edge { --m: .9997, -.0038, -.0038, 1.0022; --tx: -.022; --ty: .0333; }
.bm-scene--flat .bm-scene__layer--1 .bm-scene__riser { --m: .9786, -1.3245, .7534, .7577; --tx: 0; --ty: 0; }
.bm-scene--flat .bm-scene__layer--2 .bm-scene__riser { --m: 1.1123, -1.5003, .7552, .7579; --tx: 0; --ty: 0; }
@media (max-width: 991.98px) {
    /* the stage is placed differently below 992 (perspective origin relative to the stack), so are the fits */
    .bm-scene--flat .bm-scene__floor { --m: .7987, -.3641, .5757, .5017; --tx: -.107; --ty: .4079; }
    .bm-scene--flat .bm-scene__layer--1 .bm-scene__lift { --m: .8115, -.3681, .5839, .5074; --tx: -.1039; --ty: .3566; }
    .bm-scene--flat .bm-scene__layer--2 .bm-scene__lift { --m: .8266, -.34, .5984, .4687; --tx: -.1007; --ty: .051; }
    .bm-scene--flat .bm-scene__layer--3 .bm-scene__lift { --m: .8423, -.3092, .6137, .4262; --tx: -.0974; --ty: -.2677; }
    .bm-scene--flat .bm-scene__layer--1 .bm-scene__edge { --m: .9989, -.0026, -.0026, 1.0007; --tx: -.015; --ty: .024; }
    .bm-scene--flat .bm-scene__layer--2 .bm-scene__edge { --m: .9992, -.0031, -.0031, 1.0013; --tx: -.0178; --ty: .0277; }
    .bm-scene--flat .bm-scene__layer--3 .bm-scene__edge { --m: .9996, -.0037, -.0037, 1.0021; --tx: -.0214; --ty: .0324; }
    .bm-scene--flat .bm-scene__layer--1 .bm-scene__riser { --m: .9615, -1.3007, .7533, .7578; --tx: 0; --ty: 0; }
    .bm-scene--flat .bm-scene__layer--2 .bm-scene__riser { --m: 1.0907, -1.4703, .7551, .758; --tx: 0; --ty: 0; }
}
/* Steps: a real list; above 992 motion.js places each one at its layer's node height (fallback positions here). */
.bm-scene__steps {
    position: absolute;
    inset: 0;
    z-index: 2;
    margin: 0;
    padding: 0;
    list-style: none;
    pointer-events: none;
}
.bm-scene__step {
    position: absolute;
    left: 6%;
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: start;
    gap: 2px 10px;
    width: var(--stw);
    pointer-events: auto;
}
.bm-scene__step:nth-child(1) { top: 74%; }
.bm-scene__step:nth-child(2) { top: 48%; left: auto; right: 6%; }
.bm-scene__step:nth-child(3) { top: 22%; }
.bm-scene__step::after {
    content: "";
    position: absolute;
    top: 15px;
    left: calc(100% + 6px);
    width: var(--lead, 0px);
    border-top: 1px dashed #afbccb;
}
.bm-scene__step.is-r::after {
    left: auto;
    right: calc(100% + 6px);
}
.bm-scene__n {
    grid-row: span 2;
    min-width: 36px;
    padding: 3px 12px;
    border-radius: 999px;
    background: var(--bm-brand-tint);
    color: var(--bm-brand);
    font-size: 16px;
    font-weight: 700;
    line-height: 1.5;
    text-align: center;
}
.bm-scene__t {
    display: block;
    color: var(--bm-ink);
    font-size: 20px;
    line-height: 1.3;
    font-weight: 700;
}
.bm-scene__step p {
    margin: 0;
    font-size: 16px;
    line-height: 1.45;
    color: var(--bm-muted);
}

/* Credibility strip */
.bm-trust {
    border-top: 1px solid var(--bm-border);
}

@media (max-width: 1199.98px) {
    .bm-hero { padding-top: 96px; }
    .bm-scene { --lw: 300px; --stw: 216px; }
    .bm-scene__t { font-size: 18px; }
    .bm-scene__step p { font-size: 15px; }
}
@media (max-width: 991.98px) {
    .bm-hero { padding-top: 72px; }
    /* stack on top, the three steps below in three columns; no leader lines */
    .bm-scene {
        --lw: min(360px, 67vw);
        width: 100%;
        max-width: 672px;
        margin: 8px auto 0;
    }
    .bm-scene__row {
        display: flex;
        flex-direction: column;
        height: auto;
    }
    .bm-scene__stage { height: calc(var(--lw) * 1.22); }
    .bm-scene__tilt { margin-top: calc(var(--dz) * 1.25); }
    .bm-scene__steps {
        position: static;
        order: 2;
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 12px;
        margin-top: 4px;
    }
    .bm-scene__step,
    .bm-scene__step:nth-child(n) {
        position: static;
        width: auto;
    }
    .bm-scene__step::after,
    .bm-scene__anc { display: none; }
}
@media (max-width: 639.98px) {
    /* 390: title -> lead -> actions -> stack -> steps (three columns) -> trust strip */
    .bm-hero { padding: 48px 0 28px; justify-content: flex-start; }
    .bm-hero .bm-eyebrow { margin-bottom: 14px; text-align: left; }
    .bm-hero__title.bm-h1 { font-size: 44px; line-height: 1.02; text-align: left; }
    .bm-hero__w { flex-direction: column; align-items: flex-start; gap: 10px; }
    .bm-hero__w .bm-chip { font-size: 13px; padding: 5px 11px; }
    .bm-hero__copy { margin-top: 20px; text-align: left; }
    .bm-hero__lead { font-size: 17px; line-height: 1.6; }
    .bm-hero__actions { justify-content: flex-start; gap: 14px 20px; margin-top: 22px; }
    .bm-scene { --lw: min(283px, 72vw); margin-top: calc(var(--lw) * .14); }
    .bm-scene__steps { margin-top: 14px; }
    .bm-scene__step { gap: 2px 6px; }
    .bm-scene__n { min-width: 26px; padding: 1px 8px; font-size: 14px; }
    .bm-scene__t { font-size: 16px; }
    /* the sentences stay in "Nasıl çalışır" below; three 110px columns hold the step titles only */
    .bm-scene__step p { display: none; }
    .bm-scene__node b,
    .bm-scene__anc b { width: 10px; height: 10px; top: -6px; }
    .bm-scene__node b { left: -5px; }
}

.bm-proof {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    margin-top: 0;
}
.bm-trust {
    border-bottom: 1px solid var(--bm-border);
}
.bm-proof__item {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 28px 24px;
    border-left: 1px solid var(--bm-border);
}
.bm-proof__item:first-child {
    border-left: 0;
    padding-left: 0;
}
.bm-proof__item strong {
    font-size: 28px;
    line-height: 1.2;
    font-weight: 800;
    color: var(--bm-ink);
}
.bm-proof__item span {
    font-size: 15px;
    color: var(--bm-muted);
}
.bm-proof__item--text strong {
    font-size: 18px;
    line-height: 1.35;
    font-weight: 700;
    padding-top: 6px;
}
.bm-proof__item {
    position: relative;
}
.bm-proof__item strong {
    font-variant-numeric: tabular-nums;
}
/* 2px domain line under each cell (M2 sweep, motion.css); spans the cell's content box. */
.bm-proof__bar {
    position: absolute;
    left: 24px;
    right: 24px;
    bottom: 0;
    height: 2px;
    background: var(--c, var(--bm-brand));
}
.bm-proof__item:first-child .bm-proof__bar {
    left: 0;
}

/* ---- Home: domain band cards ---- */
.bm-bands {
    display: flex;
    flex-direction: column;
    gap: 24px;
}
.bm-band {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
    gap: 56px;
    align-items: center;
    padding: 48px 56px;
    border: 1.5px solid transparent;
    border-radius: var(--bm-radius-band);
    background: var(--t, var(--bm-brand-tint));
    transition: border-color .2s;
}
.bm-band:hover,
.bm-band:focus-within {
    border-color: var(--c, var(--bm-brand));
}
.bm-band--flip .bm-band__media {
    order: -1;
}
.bm-band--text {
    grid-template-columns: minmax(0, 1fr);
}
.bm-band__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    margin-bottom: 20px;
    border-radius: 50%;
    background: #fff;
    color: var(--c, var(--bm-brand));
}
.bm-band__icon .bm-icon {
    width: 26px;
    height: 26px;
    stroke-width: 1.9;
}
.bm-band__icon img {
    width: 28px;
    height: 28px;
}
.bm-band .bm-h3 {
    font-size: 30px;
    line-height: 1.2;
    margin: 0;
}
.bm-band__text {
    margin-top: 14px;
    max-width: 480px;
    color: var(--bm-text);
}
.bm-band__text p {
    margin: 0;
}
.bm-band__text p + p {
    margin-top: 10px;
}
.bm-band .bm-link {
    margin-top: 18px;
}
.bm-band__media {
    width: 100%;
    max-width: 520px;
    justify-self: center;
}
.bm-meta {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 20px;
    font-size: 15px;
    font-weight: 500;
    color: var(--bm-muted);
}
.bm-meta b {
    color: var(--bm-ink);
    font-weight: 700;
}

/* ---- Home: steps ---- */
.bm-steps {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    margin: 0;
    padding: 0;
    list-style: none;
}
.bm-step {
    padding: 28px;
    border: 1px solid var(--bm-border);
    border-radius: var(--bm-radius-card);
    background: #fff;
}
.bm-step__n {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 28px;
}
.bm-step__n span {
    padding: 4px 12px;
    border-radius: 999px;
    background: var(--bm-brand-tint);
    color: var(--bm-brand);
    font-size: 15px;
    font-weight: 700;
}
.bm-step__n .bm-icon {
    width: 28px;
    height: 28px;
    color: var(--bm-ink);
}
.bm-step__n img {
    width: 28px;
    height: 28px;
}
.bm-step p {
    margin-top: 8px;
    color: var(--bm-muted);
}

/* ---- Home: feature cards (compact 4-up) ---- */
.bm-cards {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
}
.bm-card {
    display: flex;
    flex-direction: column;
    padding: 28px;
    border: 1px solid var(--bm-border);
    border-radius: var(--bm-radius-card);
    background: #fff;
    transition: border-color .2s;
}
.bm-card:hover,
.bm-card:focus-within {
    border-color: var(--c, var(--bm-brand));
}
.bm-card__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    margin-bottom: 20px;
    border-radius: 12px;
    background: var(--t, var(--bm-brand-tint));
    color: var(--c, var(--bm-brand));
}
.bm-card__icon .bm-icon {
    width: 24px;
    height: 24px;
}
.bm-card__icon img {
    width: 26px;
    height: 26px;
}
.bm-card p {
    flex: 1;
    margin: 0 0 16px;
    font-size: 16px;
    color: var(--bm-muted);
}
.bm-card__link {
    margin-top: auto;
    font-size: 15px;
}
.bm-section__more {
    margin: 32px 0 0;
}

/* ---- Home: programmes ("Kimler için") ---- */
.bm-progs {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
}
.bm-prog {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border: 1px solid var(--bm-border);
    border-radius: var(--bm-radius-card);
    background: #fff;
    transition: border-color .2s;
}
.bm-prog:hover,
.bm-prog:focus-within {
    border-color: var(--c, var(--bm-brand));
}
.bm-prog__head {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 28px 32px;
    background: var(--t, var(--bm-brand-tint));
}
.bm-prog__head .bm-band__icon {
    width: 52px;
    height: 52px;
    margin: 0;
}
.bm-prog__head .bm-h3 {
    margin: 0;
}
.bm-prog__head small {
    display: block;
    margin-top: 2px;
    font-size: 14px;
    font-weight: 500;
    color: var(--bm-muted);
}
.bm-prog__body {
    display: flex;
    flex: 1;
    flex-direction: column;
    gap: 22px;
    padding: 28px 32px 32px;
}
.bm-prog__body p {
    color: var(--bm-text);
}
.bm-prog .bm-link {
    margin-top: auto;
}
.bm-prog--wide {
    grid-column: 1 / -1;
    flex-direction: row;
}
.bm-prog--wide .bm-prog__head {
    flex: 0 0 42%;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    padding: 36px 40px;
}
.bm-prog--wide .bm-prog__body {
    justify-content: center;
    padding: 36px 40px;
}

/* ---- Home: segmented tabs + course cards ---- */
.bm-seg {
    display: inline-flex;
    gap: 4px;
    margin-bottom: 28px;
    padding: 4px;
    border: 1px solid var(--bm-border);
    border-radius: 12px;
    background: #fff;
}
.bm-seg button {
    padding: 9px 18px;
    border: 0;
    border-radius: 9px;
    background: transparent;
    color: var(--bm-muted);
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
}
.bm-seg button.active,
.bm-seg button[aria-selected="true"] {
    background: var(--bm-brand-tint);
    color: var(--bm-ink);
}
.bm-courses {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}
.bm-course {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border: 1px solid var(--bm-border);
    border-radius: var(--bm-radius-card);
    background: #fff;
    transition: border-color .2s;
}
.bm-course:hover,
.bm-course:focus-within {
    border-color: var(--c, var(--bm-brand));
}
.bm-course__top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 22px 24px;
    background: var(--t, var(--bm-brand-tint));
}
.bm-course__date {
    display: flex;
    align-items: center;
    gap: 10px;
    font-weight: 700;
    color: var(--bm-ink);
}
.bm-course__date .bm-icon {
    width: 20px;
    height: 20px;
    color: var(--c, var(--bm-brand));
}
.bm-course__body {
    display: flex;
    flex: 1;
    flex-direction: column;
    gap: 14px;
    padding: 22px 24px 24px;
}
.bm-course__body .bm-h3 {
    font-size: 20px;
    margin: 0;
}
.bm-course__body .bm-h3 a {
    color: var(--bm-ink);
    text-decoration: none;
}
.bm-course__body .bm-h3 a:hover {
    color: var(--bm-brand);
}
.bm-course__meta {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 16px;
    font-size: 14px;
    color: var(--bm-muted);
}
.bm-course__meta span {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.bm-course__meta .bm-icon {
    width: 16px;
    height: 16px;
}
.bm-course__foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: auto;
    padding-top: 16px;
    border-top: 1px solid var(--bm-border);
}
.bm-price {
    font-size: 20px;
    font-weight: 800;
    color: var(--bm-ink);
}
.bm-course--note {
    justify-content: center;
    gap: 12px;
    padding: 28px;
    border-style: dashed;
    background: transparent;
}
.bm-course--note p {
    color: var(--bm-muted);
}
.bm-tag {
    padding: 4px 10px;
    border-radius: 999px;
    background: #fff;
    color: var(--bm-ink);
    font-size: 13px;
    font-weight: 600;
}

/* ---- Home: panel teaser (benefit tabs left, screenshot right) ---- */
.bm-panel {
    display: grid;
    grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
    gap: 56px;
    align-items: center;
}
.bm-panel .bm-section-head {
    margin-bottom: 28px;
}
.bm-tabs {
    display: grid;
    gap: 10px;
    padding: 0;
    margin: 0;
    list-style: none;
    border: 0;
}
.bm-tabs__item {
    margin: 0;
}
.bm-tabs__button {
    display: block;
    width: 100%;
    padding: 16px 18px;
    border: 1px solid var(--bm-border);
    border-radius: var(--bm-radius-card);
    background: #fff;
    color: var(--bm-ink);
    font-size: 17px;
    font-weight: 700;
    text-align: left;
    text-transform: none;
    transition: border-color .2s, background-color .2s;
}
.bm-tabs__button:hover {
    border-color: var(--bm-brand);
}
.bm-tabs__button.active {
    background: var(--t, var(--bm-brand-tint));
    border-color: transparent;
}
.bm-tabs__text {
    display: none;
    padding: 0 18px 16px;
    font-size: 15px;
    color: var(--bm-text);
    background: var(--t, var(--bm-brand-tint));
    border-radius: 0 0 var(--bm-radius-card) var(--bm-radius-card);
    margin-top: -12px;
}
.bm-tabs__button.active + .bm-tabs__text {
    display: block;
    padding-top: 10px;
}
.bm-tabs__button.active {
    border-radius: var(--bm-radius-card) var(--bm-radius-card) 0 0;
}
.bm-tabs__text p {
    margin: 0;
}
.bm-tabs__text p + p {
    margin-top: 8px;
}
.bm-panel__media .tab-pane {
    display: none;
}
.bm-panel__media .tab-pane.active {
    display: block;
}
.bm-benefits__img {
    width: 100%;
    height: auto;
    border-radius: var(--bm-radius-card);
}

/* ---- Home: partners strip ---- */
.bm-partners .content {
    margin-top: 8px;
}
.bm-home .clients.style-5 .content .img {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 72px;
    padding: 12px 20px;
    background: #fff;
    border: 1px solid var(--bm-border);
    border-radius: 12px;
}
.bm-home .clients.style-5 .content .img img {
    max-height: 44px;
    width: auto;
    filter: none;
    opacity: 1;
}
.bm-home .clients.style-5 .swiper-slide {
    width: auto;
}

/* ---- Testimonials slider (site.components.testimonials; home, /paket-sec, /bireysel-uygulayicilar) ----
   Centred quote shown in full with a thin brand rule; neighbours peek at .92 scale, .55 opacity, four lines.
   JS reserves the tallest full quote as the wrapper's min-height (no height change between slides). */
.bm-tst {
    --bm-tst-w: 760px;
    position: relative;
}
.bm-tst__slider.swiper-container {
    overflow: hidden;
}
.bm-tst__slider .swiper-wrapper {
    align-items: stretch;
    height: auto;
}
.bm-tst__slider .swiper-slide {
    display: flex;
    height: auto;
    width: 100%;
}
@media (min-width: 640px) {
    .bm-tst__slider .swiper-slide {
        width: min(var(--bm-tst-w), 84%);
    }
}
/* ≥1200: leave ~260px per side so the neighbour's text column fits in the visible peek. */
@media (min-width: 1200px) {
    .bm-tst__slider .swiper-slide {
        width: min(var(--bm-tst-w), calc(100% - 520px));
    }
}
.bm-tst__card {
    display: flex;
    flex: 1;
    flex-direction: column;
    gap: 24px;
    margin: 0;
    padding: 36px 40px;
    border: 1px solid var(--bm-border);
    border-radius: var(--bm-radius-card);
    background: #fff;
    transform-origin: 50% 50%;
    transition: transform var(--m-base, 420ms) var(--m-ease, cubic-bezier(.22,1,.36,1)),
                opacity var(--m-base, 420ms) var(--m-ease, cubic-bezier(.22,1,.36,1));
}
.bm-tst__text {
    margin: 0;
    padding: 2px 0 2px 22px;
    border-left: 3px solid var(--bm-brand);
    font-size: 18px;
    font-style: normal;
    line-height: 1.65;
    color: var(--bm-ink);
    transition: border-color var(--m-base, 420ms) var(--m-ease, cubic-bezier(.22,1,.36,1));
}
.bm-tst__text p {
    margin: 0;
    font-size: inherit;
    line-height: inherit;
    color: inherit;
}
.bm-tst__author {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding-left: 25px;
    font-size: 15px;
    line-height: 1.5;
    color: var(--bm-muted);
}
.bm-tst__author strong {
    font-size: 16px;
    font-weight: 700;
    color: var(--bm-ink);
}
/* Neighbours: previews only (the active quote is never clamped). Slide widths never change per state;
   the content sits in a --bm-tst-col column (set by JS from the visible peek) on the side nearest the
   active quote, and translateX(±4%) keeps that near edge in place while the card scales to .92. */
.bm-tst.is-ready .swiper-slide:not(.swiper-slide-active) .bm-tst__card {
    opacity: .55;
    transform: scale(.92);
}
.bm-tst.is-ready .swiper-slide.swiper-slide-prev:not(.swiper-slide-active) .bm-tst__card {
    align-items: flex-end;
    padding-right: 24px;
    transform: translateX(4%) scale(.92);
}
.bm-tst.is-ready .swiper-slide.swiper-slide-next:not(.swiper-slide-active) .bm-tst__card {
    align-items: flex-start;
    padding-left: 24px;
    transform: translateX(-4%) scale(.92);
}
.bm-tst.is-ready .swiper-slide:not(.swiper-slide-active) .bm-tst__text,
.bm-tst.is-ready .swiper-slide:not(.swiper-slide-active) .bm-tst__author {
    width: var(--bm-tst-col, 200px);
    max-width: 100%;
}
.bm-tst.is-ready .swiper-slide:not(.swiper-slide-active) .bm-tst__text {
    padding-left: 16px;
    border-left-color: var(--bm-border);
    font-size: 15px;
    line-height: 1.6;
    color: var(--bm-muted);
}
.bm-tst.is-ready .swiper-slide:not(.swiper-slide-active) .bm-tst__author {
    padding-left: 19px;
    font-size: 14px;
}
.bm-tst.is-ready .swiper-slide:not(.swiper-slide-active) .bm-tst__author strong {
    font-size: 15px;
}
.bm-tst.is-ready .swiper-slide:not(.swiper-slide-active) .bm-tst__text p {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
/* Peek too narrow for a readable column (<1200 px): neighbours show only their frame. */
.bm-tst.is-narrow .swiper-slide:not(.swiper-slide-active) .bm-tst__text,
.bm-tst.is-narrow .swiper-slide:not(.swiper-slide-active) .bm-tst__author {
    visibility: hidden;
}
.bm-tst__nav {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    margin-top: 28px;
}
.bm-tst__arrow {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: none;
    width: 44px;
    height: 44px;
    padding: 0;
    border: 1px solid var(--bm-border);
    border-radius: var(--bm-radius-button, 10px);
    background: #fff;
    color: var(--bm-ink);
    cursor: pointer;
    transition: border-color var(--m-fast, 150ms), color var(--m-fast, 150ms);
}
.bm-tst__arrow .bm-icon {
    width: 20px;
    height: 20px;
}
.bm-tst__arrow:hover {
    border-color: var(--bm-brand);
    color: var(--bm-brand);
}
.bm-tst__arrow:focus-visible {
    outline: 3px solid var(--bm-brand);
    outline-offset: 2px;
}
.bm-tst__arrow.swiper-button-disabled {
    opacity: .4;
    cursor: default;
    border-color: var(--bm-border);
    color: var(--bm-ink);
}
.bm-tst__dots.swiper-pagination {
    position: static;
    display: flex;
    justify-content: center;
    width: auto;
}
/* 24px tap target; the visible 8px dot is drawn inside. */
.bm-tst__dots .swiper-pagination-bullet {
    position: relative;
    width: 24px;
    height: 24px;
    margin: 0;
    background: transparent;
    opacity: 1;
    border-radius: 50%;
}
.bm-tst__dots .swiper-pagination-bullet::before {
    content: "";
    position: absolute;
    top: 8px;
    left: 8px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--bm-border);
    transition: background var(--m-fast, 150ms);
}
.bm-tst__dots .swiper-pagination-bullet-active::before {
    background: var(--bm-ink);
}
.bm-tst__dots .swiper-pagination-bullet:focus-visible {
    outline: 3px solid var(--bm-brand);
    outline-offset: 0;
}
@media (max-width: 639.98px) {
    .bm-tst__card {
        gap: 20px;
        padding: 24px 20px;
    }
    .bm-tst__text {
        padding-left: 16px;
        font-size: 16px;
        line-height: 1.6;
    }
    .bm-tst__author {
        padding-left: 19px;
    }
    .bm-tst__arrow {
        display: none;
    }
    .bm-tst__nav {
        margin-top: 20px;
    }
}
@media (prefers-reduced-motion: reduce) {
    .bm-tst__card,
    .bm-tst__text { transition: none; }
}
html.reduce-motion .bm-tst__card,
html.reduce-motion .bm-tst__text { transition: none; }

/* ---- Home: FAQ (heading left, accordion right) ---- */
.bm-faq-grid {
    display: grid;
    grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr);
    gap: 56px;
    align-items: start;
}
.bm-faq-grid .bm-section-head {
    margin-bottom: 0;
}
.bm-accordion {
    border-top: 1px solid var(--bm-border);
}
.bm-accordion .accordion-item {
    border: 0;
    border-bottom: 1px solid var(--bm-border);
    border-radius: 0;
    background: transparent;
}
.bm-accordion .accordion-header {
    margin: 0;
}
.bm-accordion .accordion-button {
    padding: 22px 0;
    background: transparent;
    box-shadow: none;
    color: var(--bm-ink);
    font-size: 18px;
    font-weight: 600;
    line-height: 1.4;
    text-transform: none;
    letter-spacing: 0;
}
.bm-accordion .accordion-button:hover {
    color: var(--bm-brand);
}
.bm-accordion .accordion-button:not(.collapsed) {
    color: var(--bm-ink);
}
.bm-accordion .accordion-button::after,
.bm-accordion .accordion-button:not(.collapsed)::after {
    width: 20px;
    height: 20px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235e6b7a' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
    background-size: 20px;
}
.bm-accordion .accordion-button:focus-visible {
    outline: 3px solid var(--bm-brand);
    outline-offset: -3px;
}
.bm-accordion .accordion-body {
    padding: 0 0 22px;
    max-width: 640px;
    color: var(--bm-text);
}
.bm-accordion .accordion-body p:last-child {
    margin-bottom: 0;
}

/* ---- Home: blog cards ---- */
.bm-posts {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}
.bm-post {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border: 1px solid var(--bm-border);
    border-radius: var(--bm-radius-card);
    background: #fff;
    transition: border-color .2s;
}
.bm-post:hover,
.bm-post:focus-within {
    border-color: var(--c, var(--bm-brand));
}
.bm-post .img,
.blog-card.bm-post .img {
    display: block;
    height: auto; /* the second selector outranks theme .blog-card.style-7 .img { height: 240px } */
}
/* Article thumbs are 410x215: the image keeps that 40:21 ratio and is shown whole. */
.bm-post .img img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 40 / 21;
    object-fit: contain;
    background: var(--bm-surface);
}
.bm-post .info {
    display: flex;
    flex: 1;
    flex-direction: column;
    gap: 12px;
    padding: 22px 24px 26px;
}
.bm-post .date {
    font-size: 14px;
    color: var(--bm-muted);
}
.bm-post .title {
    margin: 0;
    font-size: 19px;
    line-height: 1.35;
}
.bm-post .title a {
    color: var(--bm-ink);
    text-decoration: none;
}
.bm-post .title a:hover {
    color: var(--bm-brand);
}
.bm-post .more {
    margin-top: auto;
    font-size: 15px;
}

/* ---- CTA band: brand tint, rounded, buttons right ---- */
.bm-cta {
    padding: 0 0 var(--bm-section-y);
}
.bm-cta__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 32px;
    padding: 56px 64px;
    border-radius: var(--bm-radius-band);
    background: var(--bm-brand-tint);
}
.bm-cta__dots {
    display: flex;
    gap: 6px;
    margin-bottom: 18px;
}
.bm-cta .bm-h2 {
    font-size: 36px;
}
.bm-cta__text {
    margin-top: 10px;
    color: var(--bm-text);
    max-width: 560px;
}
.bm-cta__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

/* ---- "Bir sonraki canlı demo" band (site.components.next-demo, Faz I5): tint, dots, date chips ---- */
.bm-next-demo {
    color: var(--bm-text);
    letter-spacing: 0;
}
/* Home and the closing-CTA stack use the .bm-cta measure; on /demo-basvuru the band sits in .bm-inner. */
.bm-next-demo--section .container,
.bm-next-demo--stack .container {
    max-width: 1320px;
    padding-left: 12px;
    padding-right: 12px;
}
@media (max-width: 575.98px) {
    .bm-next-demo--section .container,
    .bm-next-demo--stack .container {
        padding-left: 16px;
        padding-right: 16px;
    }
}
.bm-next-demo--section {
    padding-top: var(--bm-section-y);
}
.bm-next-demo--page {
    padding-top: var(--bm-page-first-y);
}
.bm-next-demo--stack {
    padding-bottom: 24px;
}
.bm-section--soft + .bm-next-demo--stack,
.wb-trust + .bm-next-demo--stack {
    padding-top: var(--bm-section-y);
}
.bm-next-demo__inner {
    display: flex;
    align-items: center;
    gap: 32px;
    padding: 32px 40px;
    border-radius: var(--bm-radius-band);
    background: var(--bm-brand-tint);
}
.bm-next-demo__date {
    display: flex;
    flex: none;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 96px;
    height: 96px;
    border-radius: var(--bm-radius-card);
    background: #fff;
    color: var(--bm-ink);
    line-height: 1.1;
}
.bm-next-demo__day {
    font-size: 36px;
    font-weight: 800;
}
.bm-next-demo__month {
    margin-top: 2px;
    color: var(--bm-muted);
    font-size: 14px;
    font-weight: 600;
}
.bm-next-demo__body {
    flex: 1 1 auto;
    min-width: 0;
}
.bm-next-demo .bm-cta__dots {
    margin-bottom: 12px;
}
.bm-next-demo .bm-h3 {
    margin: 0;
    font-size: 26px;
}
.bm-home .bm-next-demo__text,
.bm-next-demo__text {
    margin: 8px 0 0;
    max-width: 620px;
}
.bm-next-demo__meta {
    margin: 16px 0 0;
    padding: 0;
    list-style: none;
}
.bm-next-demo__meta .bm-icon {
    width: 16px;
    height: 16px;
    color: var(--bm-brand);
}
.bm-next-demo__action {
    flex: none;
}
.bm-next-demo a:focus-visible {
    outline: 3px solid var(--bm-brand);
    outline-offset: 2px;
    border-radius: 6px;
}
/* Notice mode (no bookable session): info icon instead of the date tile, social accounts under the text. */
.bm-next-demo__icon {
    display: flex;
    flex: none;
    align-items: center;
    justify-content: center;
    width: 72px;
    height: 72px;
    border-radius: 50%;
    background: #fff;
    color: var(--bm-brand);
}
.bm-next-demo__icon .bm-icon {
    width: 34px;
    height: 34px;
}
.bm-next-demo__social {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 16px 0 0;
    padding: 0;
    list-style: none;
}
@media (max-width: 991.98px) {
    .bm-next-demo__inner { flex-wrap: wrap; padding: 28px; gap: 20px 24px; }
    .bm-next-demo__body { flex-basis: calc(100% - 120px); }
    .bm-next-demo__action { flex-basis: 100%; }
}
@media (max-width: 639.98px) {
    .bm-next-demo__inner { padding: 24px 20px; border-radius: 18px; }
    .bm-next-demo__date { display: none; } /* the date chip carries it on phones */
    .bm-next-demo__icon { width: 48px; height: 48px; }
    .bm-next-demo__icon .bm-icon { width: 24px; height: 24px; }
    .bm-next-demo__body { flex-basis: 100%; }
    .bm-next-demo .bm-h3 { font-size: 22px; }
    .bm-next-demo__action .bm-btn { width: 100%; }
}

/* ---- Footer: surface, four columns, bottom row ---- */
footer.style-5.bm-footer {
    position: relative;
    padding: 72px 0 0;
    background: var(--bm-surface);
    border-top: 1px solid var(--bm-border);
    font-size: 15px;
    color: var(--bm-text);
}
.bm-footer::before,
.bm-footer::after {
    content: none;
}
.bm-footer__grid {
    display: grid;
    grid-template-columns: 1.6fr 1fr 1fr 1.1fr;
    gap: 40px;
}
footer.bm-footer .bm-footer__grid > .items {
    margin-bottom: 0; /* theme `footer.style-5 .items` gives 50px under 991; the grid's row-gap spaces the rows */
}
.bm-footer__brand img {
    height: 40px;
    width: auto;
}
.bm-footer__brand p,
.bm-footer__brand .text {
    display: block;
    max-width: 340px;
    margin-top: 16px;
    font-size: 15px;
    line-height: 1.6;
    color: var(--bm-text);
}
.bm-footer__brand .text p {
    margin: 0;
}
.bm-footer__brand address {
    display: flex;
    gap: 8px;
    max-width: 340px;
    margin: 16px 0 0;
    font-style: normal;
    color: var(--bm-text);
}
.bm-footer__brand address .bm-icon {
    width: 20px;
    height: 20px;
    margin-top: 2px;
    color: var(--bm-muted);
}
.bm-footer .title,
.bm-footer h4 {
    margin: 0 0 14px;
    font-size: 15px;
    font-weight: 700;
    color: var(--bm-ink);
    text-transform: none;
}
.bm-footer ul li + li {
    margin-top: 10px;
}
.bm-footer ul li a {
    color: var(--bm-text);
    text-decoration: none;
}
.bm-footer ul li a:hover {
    color: var(--bm-brand);
}
.bm-footer__contact li {
    display: flex;
    gap: 10px;
    align-items: flex-start;
}
.bm-footer__contact .bm-icon {
    width: 20px;
    height: 20px;
    margin-top: 2px;
    color: var(--bm-muted);
}
.bm-footer__contact a {
    color: var(--bm-text);
    text-decoration: none;
    word-break: break-word;
}
.bm-footer .socail-icons,
.bm-footer__social {
    display: flex;
    gap: 8px;
    margin-top: 20px;
}
.bm-footer .bm-social,
.bm-next-demo .bm-social {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border: 1px solid var(--bm-border);
    border-radius: 50%;
    background: #fff;
    color: var(--bm-ink);
    font-size: 16px;
    text-decoration: none;
    transition: border-color .2s, color .2s;
}
.bm-footer .bm-social:hover,
.bm-next-demo .bm-social:hover {
    border-color: var(--bm-brand);
    color: var(--bm-brand);
}
.bm-footer__bottom {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px 24px;
    margin-top: 56px;
    padding: 22px 0;
    border-top: 1px solid var(--bm-border);
    font-size: 14px;
    color: var(--bm-muted);
}
.bm-footer__bottom small {
    font-size: 14px;
}
.bm-footer__bottom p {
    margin: 0;
}
.bm-footer__payments img {
    height: 26px;
    width: auto;
}

/* ---- Responsive ---- */
@media (max-width: 1199.98px) {
    .bm-h1 { font-size: 52px; }
    .bm-band { padding: 40px; gap: 40px; }
    .bm-cards { grid-template-columns: repeat(2, 1fr); }
    .bm-courses { grid-template-columns: repeat(2, 1fr); }
    .bm-footer__grid { grid-template-columns: 1fr 1fr 1fr; }
    .bm-footer__brand { grid-column: 1 / -1; }
}
@media (max-width: 991.98px) {
    :root {
        --bm-section-y: 64px;
        --bm-head-gap: 28px;
    }
    .bm-h2 { font-size: 32px; }
    .bm-panel,
    .bm-faq-grid { grid-template-columns: 1fr; }
    .bm-faq-grid { gap: var(--bm-head-gap); }
    /* The theme zeroes .foot's margin here (!important) and used to space it with the columns' 50px
       margin-bottom; that margin is gone (row-gap spaces the rows), so the grid keeps the 50px once. */
    .bm-footer__grid { padding-bottom: 50px; }
    .bm-proof { grid-template-columns: repeat(2, 1fr); }
    .bm-proof__item:nth-child(3) { border-left: 0; padding-left: 0; }
    .bm-proof__item:nth-child(3) .bm-proof__bar { left: 0; }
    .bm-proof__item:nth-child(n+3) { border-top: 1px solid var(--bm-border); }
    .bm-band,
    .bm-band--flip { grid-template-columns: 1fr; }
    .bm-band--flip .bm-band__media { order: 0; }
    .bm-band__media { justify-self: start; }
    .bm-steps,
    .bm-posts { grid-template-columns: 1fr 1fr; }
    .bm-progs { grid-template-columns: 1fr; }
    .bm-prog--wide { flex-direction: column; }
    .bm-prog--wide .bm-prog__head { flex: none; flex-direction: row; align-items: center; padding: 28px 32px; }
    .bm-prog--wide .bm-prog__head p { display: none; }
    .bm-prog--wide .bm-prog__body { padding: 28px 32px 32px; }
    .bm-cta__inner { flex-direction: column; align-items: flex-start; padding: 40px; }
}
@media (max-width: 639.98px) {
    .bm-h1 { font-size: 38px; line-height: 1.08; }
    .bm-h2 { font-size: 28px; }
    .bm-home { font-size: 16px; }
    .bm-hero__actions .bm-btn--primary { width: 100%; }
    .bm-section-head { margin-bottom: 28px; }
    .bm-lead { font-size: 16px; }
    .bm-section-head--row { flex-direction: column; align-items: flex-start; }
    .bm-proof__item { padding: 20px 12px; }
    .bm-proof__item:nth-child(odd) { padding-left: 0; }
    .bm-proof__bar { left: 12px; right: 12px; }
    .bm-proof__item:nth-child(odd) .bm-proof__bar { left: 0; }
    .bm-proof__item strong { font-size: 22px; }
    .bm-proof__item--text strong { font-size: 15px; }
    .bm-band { padding: 24px; gap: 24px; border-radius: 18px; }
    .bm-band .bm-h3 { font-size: 24px; }
    .bm-band__icon { width: 48px; height: 48px; margin-bottom: 16px; }
    .bm-steps,
    .bm-posts,
    .bm-courses,
    .bm-cards { grid-template-columns: 1fr; }
    .bm-prog__head,
    .bm-prog--wide .bm-prog__head { padding: 22px 20px; }
    .bm-prog__body,
    .bm-prog--wide .bm-prog__body { padding: 22px 20px 24px; }
    .bm-cta__inner { padding: 28px 20px; }
    .bm-cta .bm-h2 { font-size: 26px; }
    .bm-cta__actions,
    .bm-cta__actions .bm-btn { width: 100%; }
    .bm-footer__grid { grid-template-columns: 1fr 1fr; gap: 32px 20px; }
    .bm-footer__brand { grid-column: 1 / -1; }
    .bm-accordion .accordion-button { font-size: 16px; }
}

/* ---- M10 micro-interactions, site-wide (docs/design/motion-plan.md §3): hover answers only, 150ms spring;
   focus keeps its outline and never moves anything. ---- */
.bm-button--primary .bm-icon--arrow,
.bm-btn--primary .bm-icon--arrow,
.bm-link .bm-icon--arrow,
.bm-text-link .bm-icon--arrow {
    transition: transform var(--m-fast, 150ms) var(--m-spring, ease-out);
}
.bm-button--primary:hover .bm-icon--arrow,
.bm-btn--primary:hover .bm-icon--arrow,
.bm-link:hover .bm-icon--arrow,
.bm-text-link:hover .bm-icon--arrow {
    transform: translateX(4px);
}
.bm-chip .bm-dot {
    transition: transform var(--m-fast, 150ms) var(--m-spring, ease-out);
}
.bm-chip:hover .bm-dot {
    transform: scale(1.2);
}
.bm-chip,
.bm-card {
    transition: border-color var(--m-fast, 150ms) var(--m-spring, ease-out);
}
@media (prefers-reduced-motion: reduce) {
    .bm-chip .bm-dot,
    :is(.bm-button--primary, .bm-btn--primary, .bm-link, .bm-text-link) .bm-icon--arrow {
        transition: none;
    }
}