/* =========================================================
   BALBAL MEDYA — SİNEMA / KLAKET HERO
   Sahne: üst header altından başlayan sticky stage.
   --bb-stage-h : sahne yüksekliği (100svh - header)
========================================================= */

.elementor-element-aac6143,
.elementor-element-aac6143 > .e-con-inner,
.elementor-element-6c90416,
.elementor-element-6c90416 > .elementor-widget-container{
    padding:0 !important;
    margin:0 !important;
    max-width:none !important;
    width:100% !important;
    overflow:visible !important;
}

.bb-hero{
    --bb-stage-h:calc(100vh - var(--bb-hh, 74px));
    --bb-film-h:clamp(104px, 18vh, 168px);
    --bb-rail-h:24px;

    position:relative;
    width:100vw;
    margin-left:calc(50% - 50vw);
    height:calc(var(--bb-stage-h) * 2.6);
    background:var(--bb-ink, #080808);
    isolation:isolate;
    color:var(--bb-cream, #eeeae1);
}

@supports (height:100svh){
    .bb-hero{ --bb-stage-h:calc(100svh - var(--bb-hh, 74px)); }
}

.bb-stage{
    position:sticky;
    top:var(--bb-hh, 74px);
    height:var(--bb-stage-h);
    overflow:hidden;
    background:#080808;
}

/* ---------- Atmosfer ---------- */

.bb-bg{
    position:absolute;
    inset:-4%;
    background:
        radial-gradient(ellipse 60% 50% at 50% 48%, rgba(199,164,93,.10), transparent 70%),
        linear-gradient(rgba(255,255,255,.022) 1px, transparent 1px) 0 0 / 72px 72px,
        linear-gradient(90deg, rgba(255,255,255,.022) 1px, transparent 1px) 0 0 / 72px 72px,
        #080808;
    will-change:transform;
}

.bb-beam{
    position:absolute;
    left:50%;
    top:-10%;
    width:120vmax;
    height:120%;
    transform:translateX(-50%);
    background:conic-gradient(from 180deg at 50% 0%,
        transparent 0deg 162deg,
        rgba(238,226,196,.07) 172deg,
        rgba(238,226,196,.11) 180deg,
        rgba(238,226,196,.07) 188deg,
        transparent 198deg 360deg);
    filter:blur(6px);
    mix-blend-mode:screen;
    pointer-events:none;
    animation:bb-flicker 5s steps(1) infinite;
}

.bb-grain{
    position:absolute;
    inset:-50%;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.55'/%3E%3C/svg%3E");
    opacity:.07;
    pointer-events:none;
    animation:bb-grain 1s steps(6) infinite;
}

.bb-vignette{
    position:absolute;
    inset:0;
    background:radial-gradient(ellipse at center, transparent 35%, rgba(0,0,0,.55) 80%, rgba(0,0,0,.85) 100%);
    pointer-events:none;
}

@keyframes bb-grain{
    0%{transform:translate(0,0)} 20%{transform:translate(-4%,3%)} 40%{transform:translate(3%,-2%)}
    60%{transform:translate(-2%,-4%)} 80%{transform:translate(4%,2%)} 100%{transform:translate(0,0)}
}

@keyframes bb-flicker{
    0%,100%{opacity:1} 7%{opacity:.82} 8%{opacity:1} 41%{opacity:.9} 42%{opacity:1} 73%{opacity:.86} 74%{opacity:1}
}

/* ---------- Film şeritleri ---------- */

.bb-film{
    position:absolute;
    left:0;
    right:0;
    z-index:30;
    height:var(--bb-film-h);
    display:flex;
    flex-direction:column;
    background:linear-gradient(180deg, #1d1c19, #0d0d0c 22%, #090909 50%, #0d0d0c 78%, #1d1c19);
    border-block:1px solid rgba(255,255,255,.10);
    box-shadow:0 18px 60px rgba(0,0,0,.85);
    will-change:height, transform;
}

.bb-film--top{ top:0; }
.bb-film--bottom{ bottom:0; }

.bb-rail{
    flex:0 0 var(--bb-rail-h);
    background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='34' height='24'%3E%3Crect x='9' y='6' width='16' height='12' rx='3' fill='%23d9d3c4' fill-opacity='.42'/%3E%3C/svg%3E") repeat-x 0 50% / 34px 24px;
    animation:bb-rail 2.4s linear infinite;
}

.bb-film--bottom .bb-rail{ animation-direction:reverse; }

@keyframes bb-rail{ to{ background-position:-34px 50%; } }

.bb-track{
    position:relative;
    flex:1 1 auto;
    min-height:0;
    overflow:hidden;
    transition:opacity .25s linear;
}

.bb-frames{
    display:flex;
    gap:6px;
    width:max-content;
    height:100%;
    margin:0;
    padding:0 3px;
    list-style:none;
    animation:bb-marquee 60s linear infinite;
}

.bb-track--reverse .bb-frames{ animation-direction:reverse; }

.bb-film:hover .bb-frames{ animation-play-state:paused; }

@keyframes bb-marquee{ to{ transform:translateX(-50%); } }

.bb-frame{
    --w:calc((100vw - 36px) / 5);
    position:relative;
    flex:0 0 var(--w);
    width:var(--w);
    height:100%;
    margin:0;
    padding:12px 16px;
    overflow:hidden;
    border:1px solid rgba(255,255,255,.16);
    border-radius:3px;
    background:
        radial-gradient(circle at 78% 40%, rgba(199,164,93,.10), transparent 55%),
        linear-gradient(160deg, #141412, #0a0a09);
    transition:border-color .35s ease, background .35s ease;
}

.bb-frame:hover{
    border-color:rgba(199,164,93,.55);
    background:
        radial-gradient(circle at 78% 40%, rgba(199,164,93,.20), transparent 60%),
        linear-gradient(160deg, #191814, #0b0b0a);
}

.bb-frame-no{
    position:absolute;
    top:10px;
    left:14px;
    font:600 10px/1 var(--bb-mono);
    letter-spacing:.18em;
    color:rgba(238,234,225,.45);
}

.bb-ico{
    position:absolute;
    right:14px;
    top:50%;
    width:clamp(26px, 3.4vw, 44px);
    height:auto;
    transform:translateY(-62%);
    fill:none;
    stroke:rgba(199,164,93,.75);
    stroke-width:1.4;
    stroke-linecap:round;
    stroke-linejoin:round;
    transition:transform .4s ease, stroke .4s ease;
}

.bb-frame:hover .bb-ico{ stroke:#e2c27f; transform:translateY(-62%) scale(1.08); }

.bb-frame-txt{
    position:absolute;
    left:14px;
    right:14px;
    bottom:10px;
}

.bb-frame-txt small{
    display:block;
    margin-bottom:4px;
    font:600 9px/1 var(--bb-mono);
    letter-spacing:.2em;
    text-transform:uppercase;
    color:var(--bb-gold, #c7a45d);
}

.bb-frame-txt strong{
    display:block;
    max-width:80%;
    font:600 clamp(11px, 1vw, 14px)/1.2 var(--bb-sans);
    letter-spacing:.04em;
    text-transform:uppercase;
    color:#f3efe6;
}

/* ---------- Kamera vizörü ---------- */

.bb-hud{
    position:absolute;
    z-index:15;
    left:clamp(16px, 4vw, 64px);
    right:clamp(16px, 4vw, 64px);
    top:calc(var(--bb-film-h) + 18px);
    bottom:calc(var(--bb-film-h) + 18px);
    pointer-events:none;
    font:500 11px/1 var(--bb-mono);
    letter-spacing:.14em;
    color:rgba(238,234,225,.62);
    will-change:opacity;
}

.bb-corner{
    position:absolute;
    width:28px;
    height:28px;
    border:0 solid rgba(238,234,225,.55);
}
.bb-corner--tl{ top:0; left:0; border-top-width:1.5px; border-left-width:1.5px; }
.bb-corner--tr{ top:0; right:0; border-top-width:1.5px; border-right-width:1.5px; }
.bb-corner--bl{ bottom:0; left:0; border-bottom-width:1.5px; border-left-width:1.5px; }
.bb-corner--br{ bottom:0; right:0; border-bottom-width:1.5px; border-right-width:1.5px; }

.bb-hud-row{
    position:absolute;
    left:40px;
    right:40px;
    display:flex;
    align-items:center;
    gap:22px;
}
.bb-hud-row--top{ top:8px; }
.bb-hud-row--bottom{ bottom:8px; }
.bb-hud-row--bottom .bb-hud-spec{ margin-left:0; }

.bb-rec{
    display:inline-flex;
    align-items:center;
    gap:8px;
    color:#f3efe6;
    font-weight:700;
}
.bb-rec i{
    width:9px;
    height:9px;
    border-radius:50%;
    background:#e5383b;
    box-shadow:0 0 10px rgba(229,56,59,.8);
    animation:bb-blink 1.2s steps(1) infinite;
}
@keyframes bb-blink{ 50%{ opacity:0; } }

.bb-tc{ color:#f3efe6; font-variant-numeric:tabular-nums; }
.bb-hud-spec{ margin-left:auto; }

.bb-batt{
    position:relative;
    width:24px;
    height:11px;
    border:1.5px solid rgba(238,234,225,.6);
    border-radius:2px;
}
.bb-batt::after{
    content:"";
    position:absolute;
    right:-4px;
    top:2px;
    width:2px;
    height:4px;
    background:rgba(238,234,225,.6);
}
.bb-batt i{
    position:absolute;
    inset:1.5px;
    right:30%;
    background:var(--bb-gold, #c7a45d);
}

.bb-meter{
    display:inline-flex;
    align-items:flex-end;
    gap:3px;
    height:14px;
}
.bb-meter i{
    width:3px;
    height:100%;
    background:linear-gradient(to top, #c7a45d 60%, #e5383b);
    transform-origin:bottom;
    animation:bb-meter .9s ease-in-out infinite alternate;
}
.bb-meter i:nth-child(2){ animation-delay:-.2s; }
.bb-meter i:nth-child(3){ animation-delay:-.5s; }
.bb-meter i:nth-child(4){ animation-delay:-.1s; }
.bb-meter i:nth-child(5){ animation-delay:-.7s; }
.bb-meter i:nth-child(6){ animation-delay:-.3s; }
.bb-meter i:nth-child(7){ animation-delay:-.6s; }
.bb-meter i:nth-child(8){ animation-delay:-.4s; }
@keyframes bb-meter{ from{ transform:scaleY(.2); } to{ transform:scaleY(1); } }

/* ---------- Merkez / klaket ---------- */

.bb-center{
    position:absolute;
    z-index:20;
    left:50%;
    top:50%;
    width:min(92vw, 640px);
    display:flex;
    flex-direction:column;
    align-items:center;
    transform:translate(-50%, -50%);
    text-align:center;
    will-change:transform, opacity;
}

.bb-slate{
    position:relative;
    width:100%;
    cursor:pointer;
    outline:none;
    filter:drop-shadow(0 30px 50px rgba(0,0,0,.65));
    -webkit-tap-highlight-color:transparent;
}

.bb-slate:focus-visible{ outline:2px solid var(--bb-gold, #c7a45d); outline-offset:6px; }

.bb-clapper{
    position:relative;
    height:clamp(34px, 5.4vh, 48px);
}

.bb-stick{
    position:absolute;
    left:0;
    right:0;
    height:50%;
    background:repeating-linear-gradient(-58deg,
        #f1ece0 0 26px,
        #0c0c0b 26px 52px);
    border:1px solid rgba(255,255,255,.25);
    border-radius:3px 3px 0 0;
}

.bb-stick--base{
    bottom:0;
    border-radius:0;
    background:repeating-linear-gradient(58deg,
        #f1ece0 0 26px,
        #0c0c0b 26px 52px);
}

.bb-stick--arm{
    top:0;
    transform-origin:3% 100%;
    transform:rotate(-14deg);
    transition:transform .14s cubic-bezier(.7,0,1,.6);
}

.bb-stick--arm::before{
    content:"";
    position:absolute;
    left:6px;
    bottom:-6px;
    width:12px;
    height:12px;
    border-radius:50%;
    background:radial-gradient(circle, #d8d2c4 30%, #555 32%, #222 70%);
    z-index:2;
}

.bb-slate.is-open .bb-stick--arm{
    transform:rotate(-24deg);
    transition:transform .45s cubic-bezier(.2,.8,.2,1);
}

.bb-slate.is-clapped .bb-stick--arm{ transform:rotate(0deg); }

.bb-slate.is-shake{ animation:bb-shake .28s ease; }
@keyframes bb-shake{
    0%{transform:translateY(0)} 30%{transform:translateY(3px) rotate(.3deg)} 60%{transform:translateY(-1px)} 100%{transform:none}
}

.bb-slate-body{
    position:relative;
    padding:clamp(12px, 2.2vh, 20px) clamp(16px, 2.6vw, 28px) 0;
    background:
        linear-gradient(180deg, rgba(255,255,255,.035), transparent 40%),
        #0d0d0c;
    border:1px solid rgba(238,234,225,.22);
    border-top:0;
    border-radius:0 0 6px 6px;
}

.bb-slate-head{
    display:flex;
    align-items:center;
    gap:12px;
    padding-bottom:10px;
    border-bottom:1px solid rgba(238,234,225,.14);
    font:500 10px/1 var(--bb-mono);
    letter-spacing:.22em;
    text-transform:uppercase;
}

.bb-slate-label{ color:var(--bb-gold, #c7a45d); }
.bb-slate-prod{ color:rgba(238,234,225,.6); }

.bb-logo{
    margin:clamp(10px, 2.4vh, 22px) 0 clamp(10px, 2.2vh, 20px) !important;
    padding:0;
    line-height:1;
    font-weight:400;
}

.bb-logo-main{
    display:block;
    font-family:var(--bb-serif);
    font-size:clamp(56px, min(11vw, 13vh), 132px);
    font-weight:500;
    line-height:.86;
    letter-spacing:-.035em;
    color:#f1ecdf;
    text-shadow:0 10px 40px rgba(0,0,0,.6);
}

.bb-logo-sub{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:16px;
    margin-top:clamp(8px, 1.6vh, 14px);
    padding-left:.6em;
    font:500 clamp(12px, 1.3vw, 17px)/1 var(--bb-sans);
    letter-spacing:.6em;
    color:var(--bb-gold, #c7a45d);
}

.bb-logo-sub::before,
.bb-logo-sub::after{
    content:"";
    width:clamp(28px, 6vw, 72px);
    height:1px;
    background:linear-gradient(90deg, transparent, rgba(199,164,93,.8));
}
.bb-logo-sub::after{ background:linear-gradient(270deg, transparent, rgba(199,164,93,.8)); margin-left:-.6em; }

.bb-slate-grid{
    display:grid;
    grid-template-columns:repeat(4, 1fr);
    margin:0 calc(-1 * clamp(16px, 2.6vw, 28px));
    border-top:1px solid rgba(238,234,225,.14);
}

.bb-slate-grid > div{
    display:flex;
    flex-direction:column;
    gap:5px;
    padding:clamp(8px, 1.4vh, 12px) 10px;
    text-align:left;
}

.bb-slate-grid > div + div{ border-left:1px solid rgba(238,234,225,.14); }

.bb-slate-grid span{
    font:500 9px/1 var(--bb-mono);
    letter-spacing:.2em;
    text-transform:uppercase;
    color:rgba(238,234,225,.45);
}

.bb-slate-grid b{
    font:600 clamp(13px, 1.3vw, 16px)/1 var(--bb-mono);
    color:#f1ecdf;
    font-variant-numeric:tabular-nums;
}

.bb-slogan{
    margin:clamp(14px, 2.6vh, 24px) 0 0 !important;
    font:400 clamp(13px, 1.1vw, 15px)/1.5 var(--bb-sans);
    letter-spacing:.06em;
    color:rgba(238,234,225,.68);
}

.bb-cta{
    display:flex;
    flex-wrap:wrap;
    justify-content:center;
    gap:12px;
    margin-top:clamp(12px, 2.4vh, 22px);
}

.bb-btn{
    display:inline-flex;
    align-items:center;
    gap:10px;
    padding:13px 22px;
    border:1px solid var(--bb-gold, #c7a45d);
    border-radius:999px;
    font:600 12px/1 var(--bb-sans);
    letter-spacing:.14em;
    text-transform:uppercase;
    text-decoration:none !important;
    transition:background .3s ease, color .3s ease, transform .3s ease, box-shadow .3s ease;
}

.bb-btn svg{ width:12px; height:12px; fill:currentColor; }

.bb-btn--solid{ background:var(--bb-gold, #c7a45d); color:#0b0b0a !important; }
.bb-btn--solid:hover{ background:#dbbb76; transform:translateY(-2px); box-shadow:0 12px 30px rgba(199,164,93,.25); }

.bb-btn--ghost{ background:rgba(8,8,8,.4); color:#f1ecdf !important; border-color:rgba(238,234,225,.35); backdrop-filter:blur(6px); }
.bb-btn--ghost:hover{ border-color:var(--bb-gold, #c7a45d); color:var(--bb-gold, #c7a45d) !important; transform:translateY(-2px); }

/* ---------- Scroll ipucu & flaş ---------- */

.bb-scroll{
    position:absolute;
    z-index:40;
    right:calc(clamp(16px, 4vw, 64px) + 40px);
    bottom:calc(var(--bb-film-h) + 22px);
    display:flex;
    align-items:center;
    gap:10px;
    font:500 10px/1 var(--bb-mono);
    letter-spacing:.3em;
    text-transform:uppercase;
    color:rgba(238,234,225,.55);
    transition:opacity .3s ease;
}

.bb-scroll-reel{
    width:22px;
    height:22px;
    border-radius:50%;
    border:1.5px solid rgba(199,164,93,.75);
    background:
        radial-gradient(circle, rgba(199,164,93,.85) 0 2px, transparent 2.5px),
        radial-gradient(circle at 50% 22%, rgba(199,164,93,.7) 0 2.5px, transparent 3px),
        radial-gradient(circle at 50% 78%, rgba(199,164,93,.7) 0 2.5px, transparent 3px),
        radial-gradient(circle at 22% 50%, rgba(199,164,93,.7) 0 2.5px, transparent 3px),
        radial-gradient(circle at 78% 50%, rgba(199,164,93,.7) 0 2.5px, transparent 3px);
    animation:bb-spin 3s linear infinite;
}
@keyframes bb-spin{ to{ transform:rotate(360deg); } }

.bb-cut{
    position:absolute;
    z-index:50;
    left:50%;
    top:50%;
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:14px;
    transform:translate(-50%, -50%);
    opacity:0;
    pointer-events:none;
    text-align:center;
    white-space:nowrap;
}

.bb-cut-word{
    font:italic 400 clamp(48px, 7vw, 96px)/1 var(--bb-serif);
    letter-spacing:-.02em;
    color:var(--bb-gold, #c7a45d);
}

.bb-cut-meta{
    font:500 11px/1 var(--bb-mono);
    letter-spacing:.3em;
    text-transform:uppercase;
    color:rgba(238,234,225,.6);
}

.bb-flash{
    position:absolute;
    inset:0;
    z-index:60;
    background:#fffaf0;
    opacity:0;
    pointer-events:none;
}
.bb-flash.is-on{ animation:bb-flash .5s ease-out; }
@keyframes bb-flash{ 0%{opacity:.55} 100%{opacity:0} }

/* =========================================================
   HAKKIMIZDA — sticky sahnenin üzerine kayan perde
========================================================= */

.bm-about{
    position:relative;
    z-index:5;
    width:100vw;
    margin:calc(-1 * (100vh - var(--bb-hh, 74px))) 0 0 calc(50% - 50vw);
    min-height:calc(100vh - var(--bb-hh, 74px));
    padding:clamp(56px, 10vh, 110px) clamp(20px, 5vw, 64px) clamp(64px, 10vh, 120px);
    background:
        radial-gradient(ellipse 50% 60% at 100% 0%, rgba(199,164,93,.07), transparent 70%),
        #0f0f0e;
    box-shadow:0 -40px 90px rgba(0,0,0,.75);
    border-top:1px solid rgba(199,164,93,.28);
    overflow:hidden;
}

@supports (height:100svh){
    .bm-about{
        margin-top:calc(-1 * (100svh - var(--bb-hh, 74px)));
        min-height:calc(100svh - var(--bb-hh, 74px));
    }
}

.bm-about::before{
    content:"";
    position:absolute;
    inset:0;
    pointer-events:none;
    opacity:.35;
    background:
        linear-gradient(rgba(255,255,255,.018) 1px, transparent 1px) 0 0 / 56px 56px,
        linear-gradient(90deg, rgba(255,255,255,.018) 1px, transparent 1px) 0 0 / 56px 56px;
}

.bm-about-top,
.bm-about-inner{
    position:relative;
    z-index:2;
    max-width:var(--bb-container, 1200px);
    margin:0 auto;
}

.bm-about-top{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:16px;
    margin-bottom:clamp(28px, 5vh, 48px);
}

.bm-about-label,
.bm-kicker{
    display:flex;
    align-items:center;
    gap:12px;
    font:600 11px/1 var(--bb-sans);
    letter-spacing:.32em;
    color:var(--bb-gold, #c7a45d);
}

.bm-about-label::before,
.bm-kicker::before{
    content:"";
    width:32px;
    height:1px;
    background:currentColor;
}

.bm-about-more-btn{
    display:inline-flex;
    align-items:center;
    gap:10px;
    padding:12px 20px;
    border:1px solid rgba(199,164,93,.6);
    border-radius:999px;
    color:var(--bb-gold, #c7a45d) !important;
    font:600 11px/1 var(--bb-sans);
    letter-spacing:.2em;
    text-decoration:none !important;
    transition:background .3s ease, color .3s ease, transform .3s ease;
}
.bm-about-more-btn:hover{ background:var(--bb-gold, #c7a45d); color:#0b0b0a !important; transform:translateY(-2px); }

.bm-about-inner{
    display:grid;
    grid-template-columns:minmax(0, 5fr) minmax(0, 7fr);
    gap:clamp(32px, 5vw, 72px);
    align-items:center;
}

.bm-visual{
    position:relative;
    aspect-ratio:4 / 5;
    max-height:520px;
    border-radius:6px;
    overflow:hidden;
    background:radial-gradient(circle at 50% 45%, #1b1a16, #0a0a09 70%);
    border:1px solid rgba(255,255,255,.07);
}

.bm-frame{
    position:absolute;
    inset:16px;
    border:1px solid rgba(199,164,93,.25);
    border-radius:3px;
    pointer-events:none;
    z-index:3;
}

.bm-logo-wrap{
    position:absolute;
    left:50%;
    top:50%;
    width:min(80%, 420px);
    transform:translate(-50%, -50%);
    z-index:2;
}
.bm-logo-wrap .bm-logo{ display:block; width:100%; height:auto; margin:0; }

.bm-image-caption{
    position:absolute;
    left:32px;
    bottom:30px;
    z-index:4;
}
.bm-caption-small{ font:600 10px/1 var(--bb-sans); letter-spacing:.28em; color:var(--bb-gold, #c7a45d); }

.bm-kicker{ margin-bottom:18px; }

.bm-heading{
    margin:0 0 20px !important;
    font-family:var(--bb-serif) !important;
    font-size:clamp(34px, 3.6vw, 54px) !important;
    font-weight:400 !important;
    line-height:1.08 !important;
    letter-spacing:-.02em !important;
    text-transform:none !important;
    color:#f3f0e8 !important;
}
.bm-heading em{ color:var(--bb-gold, #c7a45d); font-style:italic; }

.bm-lead{
    margin:0 0 18px !important;
    font-size:clamp(16px, 1.3vw, 19px);
    line-height:1.7;
    color:rgba(255,255,255,.84);
}

.bm-text,
.bm-text-2{
    margin:0 0 12px !important;
    font-size:15.5px;
    line-height:1.75;
    color:rgba(255,255,255,.62);
}
.bm-text strong,
.bm-text-2 strong{ color:#ece6da; font-weight:600; }

.bm-ecosystem{
    display:flex;
    flex-wrap:wrap;
    gap:8px;
    margin-top:24px;
    padding-top:22px;
    border-top:1px solid rgba(255,255,255,.1);
}

.bm-ecosystem span{
    padding:8px 14px;
    border:1px solid rgba(255,255,255,.12);
    border-radius:999px;
    font:500 12px/1 var(--bb-sans);
    letter-spacing:.06em;
    color:rgba(238,234,225,.75);
    transition:border-color .3s ease, color .3s ease;
}
.bm-ecosystem span:hover{ border-color:rgba(199,164,93,.6); color:var(--bb-gold, #c7a45d); }

.bm-reveal{
    opacity:0;
    transform:translateY(28px);
    transition:opacity .8s ease, transform .8s cubic-bezier(.2,.8,.2,1);
}
.bm-reveal.active{ opacity:1; transform:none; }
.bm-content.bm-reveal{ transition-delay:.12s; }

/* =========================================================
   RESPONSIVE
========================================================= */

@media (max-width:1024px){
    .bb-frame{ --w:calc((100vw - 24px) / 3.3); }
    .bb-hud-row--top .bb-hud-spec{ display:none; }
    .bb-batt{ margin-left:auto; }
    .bm-about-inner{ grid-template-columns:1fr 1.3fr; }
}

@media (max-width:767px){
    .bb-hero{ --bb-film-h:clamp(84px, 13vh, 112px); --bb-rail-h:18px; height:calc(var(--bb-stage-h) * 2.4); }
    .bb-rail{ background-size:26px 18px; }
    @keyframes bb-rail{ to{ background-position:-26px 50%; } }
    .bb-frame{ --w:calc((100vw - 16px) / 2.2); padding:8px 10px; }
    .bb-frame-no{ top:8px; left:10px; font-size:9px; }
    .bb-frame-txt{ left:10px; right:10px; bottom:7px; }
    .bb-frame-txt small{ font-size:8px; margin-bottom:3px; }
    .bb-frame-txt strong{ font-size:11px; max-width:78%; }
    .bb-ico{ right:10px; width:24px; }
    .bb-hud{ top:calc(var(--bb-film-h) + 10px); bottom:calc(var(--bb-film-h) + 10px); font-size:9px; }
    .bb-hud-row{ left:24px; right:24px; gap:12px; }
    .bb-corner{ width:18px; height:18px; }
    .bb-meter, .bb-hud-row--bottom{ display:none; }
    .bb-center{ width:min(90vw, 440px); }
    .bb-stick{ background-size:auto; }
    .bb-slate-head{ font-size:8px; letter-spacing:.14em; gap:8px; }
    .bb-slate-grid span{ font-size:8px; letter-spacing:.12em; }
    .bb-slate-grid > div{ padding:8px 7px; }
    .bb-logo-main{ font-size:clamp(46px, 15vw, 72px); }
    .bb-logo-sub{ letter-spacing:.45em; }
    .bb-btn{ padding:11px 16px; font-size:10.5px; letter-spacing:.1em; }
    .bb-scroll{ display:none; }

    .bm-about-top{ flex-wrap:wrap; }
    .bm-about-inner{ grid-template-columns:1fr; }
    .bm-visual{ aspect-ratio:16 / 11; max-height:none; }
    .bm-text, .bm-text-2{ font-size:14.5px; }
}

@media (max-height:700px) and (min-width:768px){
    .bb-hero{ --bb-film-h:clamp(84px, 15vh, 110px); }
    .bb-slate-grid, .bb-slate-head{ display:none; }
    .bb-clapper{ height:30px; }
}

@media (max-height:620px) and (max-width:767px){
    .bb-slate-grid, .bb-slogan{ display:none; }
}

@media (prefers-reduced-motion:reduce){
    .bb-frames, .bb-rail, .bb-grain, .bb-beam, .bb-scroll-reel, .bb-meter i, .bb-rec i{ animation:none !important; }
    .bm-reveal{ opacity:1; transform:none; transition:none; }
}