/**

 * Bexgram — mobil ve masaüstü yazı, buton, ikon ölçeği.

 * Dekoratif katmanlara (hediye, zar, emoji, doğrulama kodu) dokunmaz.

 */



@media (max-width: 767px) {

body :is(.wa-brand, .wa-brand span, .bex-brand-name, .bex-brand-title, header .bex-brand-name) {

font-size: clamp(18px, 5.2vw, 22px);

line-height: 1.1;

letter-spacing: -0.03em;

}



body.bex-auth .auth-brand > span {

font-size: clamp(20px, 5.6vw, 22px);

}



body.bex-auth .auth-brand img {

width: 32px;

height: 32px;

}



body.bex-auth .auth-intro h1 {

font-size: clamp(28px, 7vw, 32px);

line-height: 1.16;

letter-spacing: -0.04em;

overflow-wrap: anywhere;

}



body.bex-auth .auth-heading h2,

body.legal-page .legal-hero h1,

body.bex-wa.bex-invite-page .bex-invite h1 {

font-size: clamp(22px, 6.2vw, 26px);

line-height: 1.2;

letter-spacing: -0.04em;

overflow-wrap: anywhere;

}



body.bex-landing-body .bex-hero-title {

font-size: clamp(28px, 8vw, 34px);

line-height: 1.1;

}



body.bex-landing-body .bex-section-title {

font-size: clamp(20px, 5.4vw, 24px);

line-height: 1.2;

}



body.bex-landing-body .bex-cta-title {

font-size: clamp(22px, 6vw, 26px);

line-height: 1.2;

}



body.bex-wa #pane-welcome .bex-start h2 {

font-size: clamp(22px, 6vw, 26px);

line-height: 1.2;

}



body .member-cover-mark {

font-size: clamp(40px, 12vw, 48px);

letter-spacing: -2px;

}



  body :is(

  .wa-home h2,

  .wa-stage-empty h2,

  .wa-empty h2,

  .biz-screen h2,

  .biz-tools-hero h2,

  .member-gate-card h1,

  .member-state h1,

  .member-heading h1,

  .kanal-hosgeldin h2,

  .wa-welcome-card h1,

  .wa-welcome-card h2

  ) {

  font-size: clamp(18px, 5.2vw, 22px);

  line-height: 1.28;

  overflow-wrap: anywhere;

  }

  

  body :is(.wa-home, .wa-stage-empty, .wa-welcome-card, .wa-channel-empty, .kanal-hosgeldin, .grup-empty) .material-symbols-outlined {

  font-size: clamp(32px, 10vw, 44px);

  width: 1em;

  height: 1em;

  line-height: 1;

  }



  body :is(

  header,

  .bxh,

  .icon-btn,

  .bxh-iconbtn,

  .bxh-back,

  .rail-btn,

  #app-tabs,

  .page-navigation,

  .set-row,

  .wa-item,

  .nav-plus

  ) .material-symbols-outlined:not(.bex-scale-keep) {

  font-size: 22px;

  width: 22px;

  height: 22px;

  max-width: 24px;

  max-height: 24px;

  line-height: 1;

  }

  

  body #app-tabs .tab-add .material-symbols-outlined,

  body .nav-plus .material-symbols-outlined {

  font-size: 22px;

  width: 22px;

  height: 22px;

  }

  

  body #app-tabs .tab-btn .material-symbols-outlined {

  font-size: 20px;

  width: 22px;

  height: 22px;

  max-width: 24px;

  }



  body :is(.icon-btn, .bxh-iconbtn, .bxh-back, .wa-inchat > header > button) {

  width: 40px;

  height: 40px;

  min-width: 40px;

  min-height: 40px;

  max-width: 44px;

  flex: 0 0 40px;

  }



  body :is(

  button,

  .auth-button,

  .verification-button,

  .biz-add,

  .wa-go,

  .wa-pill,

  .member-icon-button

  ) {

  max-width: 100%;

  box-sizing: border-box;

  white-space: nowrap;

  overflow-wrap: normal;

  word-break: keep-all;

  line-height: 1.2;

  }



  body :is(.auth-button, .verification-button, .biz-add, .wa-go) {

  min-height: 44px;

  font-size: 14px;

  padding-inline: 14px;

  }

  

  body :is(.wa-sheet > header h2, .wa-sheet h3, .bex-modal h3) {

  font-size: clamp(16px, 4.6vw, 18px);

  line-height: 1.3;

  overflow-wrap: anywhere;

  }

  

  body.bex-wa .bex-profile-cover-empty .material-symbols-outlined,

  body.bex-wa .bex-profile-avatar {

  font-size: clamp(20px, 6vw, 28px);

  }

  

  body #app-tabs .tab-btn,

  body .page-navigation .tab-btn {

  font-size: 10px;

  gap: 2px;

  min-width: 0;

  padding-inline: 2px;

  }

  }

  

  @media (max-width: 380px) {

  body :is(.wa-brand, .wa-brand span, .bex-brand-name, .bex-brand-title) {

  font-size: 18px;

  }

  

  body.bex-auth .auth-intro h1 {

  font-size: 28px;

  }

  

  body.bex-auth .auth-heading h2 {

  font-size: 22px;

  }

  

  body.bex-landing-body .bex-hero-title {

  font-size: 28px;

  }

  

  body :is(.auth-button, .verification-button, .wa-pill) {

  font-size: 13px;

  padding-inline: 10px;

  }

  }

  

  @media (min-width: 768px) and (max-width: 1023px) {

  body :is(.wa-brand, .wa-brand span, .bex-brand-name, .bex-brand-title, header .bex-brand-name) {

  font-size: 22px;

  }

  

  body.bex-auth .auth-brand > span {

  font-size: 23px;

  }

  

  body.bex-auth .auth-intro h1 {

  font-size: clamp(32px, 4vw, 36px);

  line-height: 1.14;

  }

  

  body.bex-landing-body .bex-hero-title {

  font-size: clamp(36px, 5vw, 44px);

  }

  

  body.bex-landing-body .bex-section-title {

  font-size: clamp(24px, 3vw, 28px);

  }

  

  body.bex-landing-body .bex-cta-title {

  font-size: clamp(26px, 3.2vw, 32px);

  }

  

  body.bex-wa #pane-welcome .bex-start h2 {

  font-size: clamp(26px, 3vw, 32px);

  }

  

  body :is(.wa-home h2, .wa-stage-empty h2, .wa-empty h2, .biz-screen h2, .biz-tools-hero h2) {

  font-size: clamp(22px, 2.4vw, 26px);

  line-height: 1.25;

  }

  

  body :is(.wa-home, .wa-stage-empty) .material-symbols-outlined {

  font-size: clamp(44px, 6vw, 52px);

  width: 1em;

  height: 1em;

  }

  

  body .member-cover-mark {

  font-size: 52px;

  }

  

  body #app-tabs .tab-add .material-symbols-outlined,

  body .nav-plus .material-symbols-outlined {

  font-size: 22px;

  width: 22px;

  height: 22px;

  }

  

  body .nav-plus {

  font-size: 22px;

  min-width: 44px;

  min-height: 44px;

  }

  

  body.bex-wa #app-tabs .tab-btn .material-symbols-outlined {

  width: 24px;

  height: 24px;

  font-size: 22px;

  }

  }

  

  @media (min-width: 1024px) {

  body :is(.wa-home h2, .wa-stage-empty h2, .wa-empty h2, .biz-screen h2, .biz-tools-hero h2) {

  font-size: clamp(22px, 1.6vw, 26px);

  line-height: 1.25;

  }

  

  body :is(.wa-home, .wa-stage-empty) .material-symbols-outlined {

  font-size: clamp(48px, 4vw, 56px);

  width: 1em;

  height: 1em;

  }

  

  body.bex-auth .auth-brand > span {

  font-size: clamp(22px, 1.6vw, 24px);

  }

  

  body.bex-auth .auth-heading h2 {

  font-size: clamp(22px, 1.6vw, 26px);

  }

  

  body.bex-auth .auth-intro h1 {

  font-size: clamp(32px, 2.4vw, 40px);

  line-height: 1.12;

  }

  

  body.bex-landing-body .bex-hero-title {

  font-size: clamp(40px, 4vw, 56px);

  line-height: 1.08;

  }

  

  body.bex-landing-body .bex-section-title {

  font-size: clamp(26px, 2.2vw, 32px);

  }

  

  body.bex-landing-body .bex-cta-title {

  font-size: clamp(28px, 2.4vw, 36px);

  }

  

  body.bex-wa #pane-welcome .bex-start h2 {

  font-size: clamp(28px, 2.2vw, 36px);

  }

  

  body .member-cover-mark {

  font-size: clamp(56px, 4vw, 64px);

  }

  

  body.legal-page .legal-hero h1 {

  font-size: clamp(28px, 2.2vw, 36px);

  }

  

  body :is(header, .bxh, .icon-btn, .rail-btn, #app-tabs, .nav-plus) .material-symbols-outlined:not(.bex-scale-keep) {

  font-size: 22px;

  width: 22px;

  height: 22px;

  line-height: 1;

  }

  

  body :is(.icon-btn, .bxh-iconbtn, .wa-inchat > header > button) {

  width: 40px;

  height: 40px;

  min-width: 40px;

  min-height: 40px;

  }

  

  body :is(.wa-brand, .wa-brand span, .bex-brand-name, .bex-brand-title, header .bex-brand-name) {

  font-size: clamp(22px, 1.4vw, 24px);

  }

  }



/* Ortak yüzey: boşluk, odak, koyu tema ve kısa hareket. */

:root {

  --bex-ui-gap: 12px;

  --bex-ui-radius: 16px;

  --bex-ui-ease: cubic-bezier(.2, .8, .2, 1);

}



body.bex-wa,

body.bex-auth,

body.legal-page,

body.bex-landing-body {

  text-rendering: optimizeLegibility;

  -webkit-font-smoothing: antialiased;

}



body :is(a, button, input, textarea, select, summary):focus-visible {

  outline: 2px solid var(--bex-primary, var(--color-primary));

  outline-offset: 2px;

}



body :is(.auth-card, .bex-invite, .legal-article, .wa-welcome-card, .member-card) {

  border-radius: var(--bex-ui-radius);

}



@media (prefers-reduced-motion: no-preference) {

  body :is(.auth-button, .wa-pill, .icon-btn, .bxh-iconbtn, .legal-button) {

    transition: transform .16s var(--bex-ui-ease), background-color .16s var(--bex-ui-ease), color .16s var(--bex-ui-ease);

  }

}



@media (prefers-reduced-motion: reduce) {

  body :is(.auth-button, .wa-pill, .icon-btn, .bxh-iconbtn) {

    transition: none !important;

  }

}



html.dark body.bex-wa,

html.dark body.legal-page,

html.dark body.bex-invite-page {

color-scheme: dark;

}



/* Modern katman: satır, başlık, kart, dokunma ve taşma. Ölçek kuralları korunur. */

body :is(

.auth-card,

.wa-welcome-card,

.member-card,

.legal-article,

.bex-invite

) {

line-height: 1.5;

min-width: 0;

}



body :is(

.auth-card,

.wa-welcome-card,

.member-card,

.legal-article,

.bex-invite

) :is(h1, h2, h3) {

letter-spacing: -0.02em;

line-height: 1.25;

overflow-wrap: anywhere;

}



body :is(.auth-card, .wa-welcome-card, .member-card, .legal-article, .bex-invite) {

box-shadow: 0 1px 2px rgba(17, 27, 33, .04), 0 8px 24px rgba(17, 27, 33, .06);

}



body :is(header, .bxh) :is(h1, h2, .bxh-title, .bex-brand-name) {

letter-spacing: -0.02em;

line-height: 1.2;

min-width: 0;

}



body :is(.auth-card, .wa-welcome-card, .member-card, .bex-invite, header, .bxh) :is(p, span, a, button) {

min-width: 0;

}



@media (max-width: 767px) {

body :is(.icon-btn, .bxh-iconbtn, .bxh-back, .wa-inchat > header > button) {

width: 44px;

height: 44px;

min-width: 44px;

min-height: 44px;

max-width: 44px;

flex: 0 0 44px;

}

}



@media (prefers-reduced-motion: no-preference) {

body :is(.auth-button, .wa-pill, .icon-btn):active {

transform: scale(.97);

}

}



html.dark body :is(.auth-card, .wa-welcome-card, .member-card, .legal-article, .bex-invite) {

box-shadow: 0 1px 2px rgba(0, 0, 0, .35), 0 10px 28px rgba(0, 0, 0, .28);

background-color: color-mix(in srgb, var(--wa-surface, var(--color-bg-dark)) 92%, var(--color-bg-light) 8%);

}



@media (max-width: 767px) {

body :is(

.auth-card,

.wa-welcome-card,

.member-card,

.legal-article,

.bex-invite,

.bex-feature-card,

.bex-platform-card,

.bex-cta-box

) {

padding: 16px;

min-width: 0;

}



body :is(

  .auth-card,

  .wa-welcome-card,

  .member-card,

  .legal-article,

  .bex-invite,

  .bex-feature-card,

  .bex-platform-card,

  .bex-cta-box

) :is(h1, h2, h3) {

  overflow-wrap: break-word;

  word-break: normal;

}



body :is(header, .bxh) :is(h1, h2, h3, .bxh-title, .bex-brand-name) {

overflow-wrap: normal;

word-break: normal;

white-space: nowrap;

}

}



/* Kısa aksiyon yazıları dar kutuda harf/kelime olarak alta kırılmaz. */

body :is(

button,

.member-button,

.member-button > span,

.member-follow-btn,

.bex-follow-btn,

.bex-follow-btn-text,

.bex-post-follow-btn,

.bex-reel-follow-btn,

.bex-reels-dsp-follow-btn,

.bex-prof-btn,

.bex-prof-btn > span,

.bex-counter-lbl,

.bex-counter-lbl > span,

.bex-counter-val,

.kanal-badge,

.wa-pill,

#btn-drawer-action-follow,

#txt-drawer-follow

) {

writing-mode: horizontal-tb !important;

white-space: nowrap !important;

word-break: keep-all !important;

overflow-wrap: normal !important;

hyphens: manual !important;

}



body :is(

.member-button,

.member-follow-btn,

.bex-follow-btn,

.bex-post-follow-btn,

.bex-reel-follow-btn,

.bex-reels-dsp-follow-btn,

.bex-prof-btn,

#btn-drawer-action-follow

) {

display: inline-flex !important;

flex-direction: row !important;

align-items: center !important;

justify-content: center !important;

}



body .bex-counter-col {

flex-direction: column !important;

}



body :is(#wa-menu .wa-item, .set-row, .biz-line) {

white-space: normal !important;

}