/* brands for gens — yayın anasayfası (DS token'larını tüketir) */

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; font-family: var(--font-sans); background: var(--surface-page); color: var(--text-primary); -webkit-font-smoothing: antialiased; }
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }

.site { overflow-x: hidden; }
.container { max-width: var(--container-xl); margin: 0 auto; padding-inline: var(--space-6); }

/* ---------- Header ---------- */
.hdr { position: sticky; top: 0; z-index: 40; background: color-mix(in srgb, var(--surface-page) 86%, transparent); backdrop-filter: blur(12px); border-bottom: 1px solid var(--border-subtle); }
.hdr__bar { display: flex; align-items: center; justify-content: space-between; height: 88px; }
.hdr__logo { display: inline-flex; align-items: center; }
.hdr__logo img { height: 58px; width: auto; display: block; }
.hdr__tagline { white-space: nowrap; }
.hdr__nav { display: flex; align-items: center; gap: var(--space-6); }
.hdr__links { display: flex; gap: var(--space-5); }
.hdr__link { font-size: var(--text-sm); font-weight: var(--weight-medium); color: var(--text-secondary); padding: 6px 0; position: relative; transition: color var(--duration-fast) var(--ease-standard); }
.hdr__link:hover { color: var(--text-primary); }
.hdr__link::after { content: ""; position: absolute; left: 0; bottom: 0; height: 1.5px; width: 0; background: var(--accent); transition: width var(--duration-base) var(--ease-standard); }
.hdr__link:hover::after { width: 100%; }
.hdr__menu { display: none; background: none; border: 0; cursor: pointer; padding: 6px; color: var(--text-primary); }
.hdr__mobile { display: none; }
.hdr__profile { display: inline-flex; align-items: center; gap: 8px; background: none; border: 0; cursor: pointer; padding: 4px 6px; border-radius: var(--radius-pill); }
.hdr__profile:hover { background: var(--surface-muted); }
.hdr__profile-name { font-size: var(--text-sm); font-weight: var(--weight-semibold); color: var(--text-primary); }

/* ---------- Hero ---------- */
.hero { padding-top: var(--space-8); padding-bottom: var(--space-8); }
.hero__eyebrow { font-size: var(--text-xs); text-transform: uppercase; letter-spacing: var(--tracking-caps); font-weight: var(--weight-semibold); color: var(--accent); margin: 0 0 var(--space-6); }
.hero__cta { display: flex; gap: var(--space-3); flex-wrap: wrap; }

/* Hero lead story */
.lead { display: grid; grid-template-columns: 1.15fr 1fr; gap: var(--space-8); align-items: center; }
.lead__kicker { display: inline-block; font-family: var(--font-mono); font-size: var(--text-xs); text-transform: uppercase; letter-spacing: 0.08em; color: var(--accent); margin-bottom: var(--space-4); }
.lead__title { font-family: var(--font-display); font-weight: var(--weight-bold); font-size: clamp(2.25rem, 5vw, 4rem); line-height: 1.04; letter-spacing: -0.02em; margin: 0; text-wrap: balance; }
.lead__excerpt { font-size: var(--text-lg); line-height: 1.5; color: var(--text-secondary); margin: var(--space-5) 0 var(--space-5); max-width: 48ch; }
.lead__byline { display: flex; align-items: center; gap: var(--space-3); font-size: var(--text-sm); color: var(--text-muted); margin-bottom: var(--space-6); flex-wrap: wrap; }
.lead__author { font-weight: var(--weight-semibold); color: var(--text-primary); }
.lead__dot { color: var(--border-strong); }

/* Hero typographic cover — ink + Gen Blue, serif + mono */
.lead__cover { aspect-ratio: 4 / 5; border-radius: var(--radius-lg); background: var(--ink-900); color: #fff; padding: var(--space-6); display: flex; flex-direction: column; justify-content: space-between; overflow: hidden; position: relative; }
.lead__cover::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 6px; background: var(--accent); }
.lead__cover::after { content: ""; position: absolute; right: -22%; top: 18%; width: 62%; aspect-ratio: 1; border-radius: 50%; background: var(--blue-700); opacity: 0.28; filter: blur(2px); }
.lead__cover-top { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); position: relative; z-index: 1; padding-top: var(--space-2); }
.lead__cover-tag { font-family: var(--font-mono); font-size: var(--text-xs); text-transform: uppercase; letter-spacing: 0.12em; color: var(--ink-900); background: var(--accent); padding: 5px 11px; border-radius: var(--radius-pill); font-weight: var(--weight-bold); }
.lead__cover-issue { font-family: var(--font-mono); font-size: var(--text-sm); font-weight: var(--weight-bold); color: var(--accent); letter-spacing: 0.02em; text-align: right; max-width: 50%; line-height: 1.3; }
.lead__cover-mid { position: relative; z-index: 1; }
.lead__cover-no { display: block; font-family: var(--font-mono); font-size: var(--text-sm); color: var(--accent); letter-spacing: 0.1em; margin-bottom: var(--space-4); }
.lead__cover-quote { font-family: var(--font-display); font-weight: var(--weight-black); font-size: clamp(2.1rem, 3.4vw, 3.1rem); line-height: 1.04; letter-spacing: -0.025em; margin: 0; text-wrap: balance; color: #fff; }
.lead__cover-foot { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); font-family: var(--font-mono); font-size: var(--text-xs); color: var(--ink-400); padding-top: var(--space-5); border-top: 1px solid var(--ink-700); position: relative; z-index: 1; letter-spacing: 0.04em; }
.lead__cover-by { text-transform: uppercase; }
.lead__cover-mark { font-family: var(--font-display); font-weight: var(--weight-bold); font-size: var(--text-md); letter-spacing: -0.01em; color: #fff; text-transform: none; }
.lead__cover-mark .gens { color: var(--accent); }

/* Stats */
.stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-6); padding: var(--space-8) 0 0; border-top: 1px solid var(--border-subtle); }
.stat__figure { font-family: var(--font-display); font-weight: var(--weight-bold); font-size: var(--text-4xl); line-height: 1; letter-spacing: -0.02em; }
.stat__label { font-size: var(--text-sm); color: var(--text-muted); margin-top: var(--space-3); }

/* ---------- Ad slots (sarı reklam alanları) ---------- */
.adslot { width: 100%; display: flex; }
.adslot__inner {
  flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 6px; text-align: center; padding: var(--space-5);
  background: repeating-linear-gradient(45deg, #ffe14d, #ffe14d 14px, #ffd60a 14px, #ffd60a 28px);
  border: 2px dashed #b8930a; border-radius: var(--radius-md); color: #5c4a00;
}
.adslot__tag { display: inline-flex; align-items: center; gap: 6px; font-family: var(--font-mono); font-size: var(--text-2xs); font-weight: var(--weight-bold); text-transform: uppercase; letter-spacing: 0.12em; background: #1a1500; color: #ffe14d; padding: 4px 10px; border-radius: var(--radius-pill); }
.adslot__format { font-family: var(--font-display); font-weight: var(--weight-bold); font-size: var(--text-md); letter-spacing: -0.01em; }
.adslot__size { font-family: var(--font-mono); font-size: var(--text-xs); color: #6b5600; }
.adslot__note { font-size: var(--text-xs); color: #6b5600; max-width: 44ch; line-height: 1.4; }
.adsection { padding: var(--space-6) 0; }

/* ---------- Section scaffold ---------- */
.section { padding: var(--space-9) 0; }
.section__head { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--space-6); margin-bottom: var(--space-7); flex-wrap: wrap; }

/* ---------- News grid ---------- */
.work__filters { display: flex; gap: var(--space-2); flex-wrap: wrap; }
.chip { font-family: var(--font-sans); font-size: var(--text-sm); font-weight: var(--weight-medium); padding: 8px 14px; border-radius: var(--radius-pill); border: 1.5px solid var(--border); background: var(--surface-page); color: var(--text-secondary); cursor: pointer; transition: all var(--duration-fast) var(--ease-standard); }
.chip:hover { border-color: var(--ink-400); color: var(--text-primary); }
.chip--active { background: var(--ink-900); border-color: var(--ink-900); color: #fff; }
.work-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-4); margin-top: var(--space-6); }
.wcard { position: relative; aspect-ratio: 4 / 3; border-radius: var(--radius-lg); overflow: hidden; border: 1px solid var(--border); cursor: pointer; display: flex; flex-direction: column; justify-content: flex-end; padding: var(--space-5); transition: transform var(--duration-base) var(--ease-standard), box-shadow var(--duration-base) var(--ease-standard); }
.wcard:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }
.wcard--paper { background: var(--ink-100); color: var(--ink-900); }
.wcard--blue { background: var(--accent); color: #fff; }
.wcard--ink { background: var(--ink-900); color: #fff; }
.wcard__top { position: absolute; top: var(--space-5); left: var(--space-5); right: var(--space-5); display: flex; justify-content: space-between; align-items: center; font-family: var(--font-mono); font-size: var(--text-xs); opacity: 0.8; }
.wcard__arrow { position: absolute; top: var(--space-5); right: var(--space-5); opacity: 0; transform: translate(-4px, 4px); transition: all var(--duration-base) var(--ease-standard); }
.wcard:hover .wcard__arrow { opacity: 1; transform: translate(0, 0); }
.wcard__headline { font-family: var(--font-display); font-weight: var(--weight-bold); font-size: var(--text-lg); letter-spacing: -0.01em; line-height: 1.12; margin: 0; text-wrap: balance; }
.wcard__byline { font-size: var(--text-sm); opacity: 0.82; margin-top: var(--space-3); }
.wcard--ad { background: repeating-linear-gradient(45deg, #ffe14d, #ffe14d 14px, #ffd60a 14px, #ffd60a 28px); border: 2px dashed #b8930a; color: #5c4a00; align-items: center; justify-content: center; text-align: center; gap: var(--space-3); cursor: default; }
.wcard--ad:hover { transform: none; box-shadow: none; }
.wcard__ad-tag { position: absolute; top: var(--space-4); left: var(--space-4); font-family: var(--font-mono); font-size: var(--text-2xs); font-weight: var(--weight-bold); text-transform: uppercase; letter-spacing: 0.12em; background: #1a1500; color: #ffe14d; padding: 4px 10px; border-radius: var(--radius-pill); }
.wcard__ad-body { display: flex; flex-direction: column; gap: 4px; }
.wcard__ad-format { font-family: var(--font-display); font-weight: var(--weight-bold); font-size: var(--text-lg); letter-spacing: -0.01em; }
.wcard__ad-size { font-family: var(--font-mono); font-size: var(--text-xs); color: #6b5600; }

/* ---------- Authors (inverse band) ---------- */
.band { background: var(--ink-900); color: var(--ink-100); }
.band .section__head { color: #fff; }
.approach-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-6); }
.author { display: grid; gap: var(--space-4); padding-top: var(--space-5); border-top: 1.5px solid var(--ink-700); }
.author__head { display: flex; align-items: center; gap: var(--space-3); }
.author__name { font-family: var(--font-display); font-weight: var(--weight-bold); font-size: var(--text-md); color: #fff; line-height: 1.1; }
.author__role { font-size: var(--text-xs); color: var(--accent); margin-top: 3px; }
.author__column { font-size: var(--text-base); line-height: 1.5; color: var(--ink-300); margin: 0; font-style: italic; }

/* ---------- Featured (journal) ---------- */
.journal-list { display: grid; gap: 0; border-top: 1px solid var(--border); }
.jrow { display: grid; grid-template-columns: 120px 1fr auto auto; gap: var(--space-5); align-items: center; padding: var(--space-5) var(--space-2); border-bottom: 1px solid var(--border); cursor: pointer; transition: padding var(--duration-base) var(--ease-standard), background var(--duration-base) var(--ease-standard); }
.jrow:hover { padding-left: var(--space-4); background: var(--surface-muted); }
.jrow__kicker { font-family: var(--font-mono); font-size: var(--text-xs); text-transform: uppercase; letter-spacing: 0.08em; color: var(--accent); }
.jrow__title { font-family: var(--font-display); font-weight: var(--weight-semibold); font-size: var(--text-lg); letter-spacing: -0.01em; }
.jrow__mins { font-size: var(--text-sm); color: var(--text-muted); }
.jrow__arrow { color: var(--text-muted); display: inline-flex; }

/* ---------- Article detail ---------- */
.article { padding: var(--space-8) 0 var(--space-9); }
.container--art { max-width: 820px; }
.art__back { display: inline-flex; align-items: center; gap: 8px; background: none; border: 0; cursor: pointer; font-family: var(--font-sans); font-size: var(--text-sm); font-weight: var(--weight-semibold); color: var(--text-muted); padding: 6px 0; margin-bottom: var(--space-6); }
.art__back:hover { color: var(--accent); }
.art__meta-top { display: flex; align-items: center; gap: var(--space-3); margin-bottom: var(--space-4); }
.art__date { font-family: var(--font-mono); font-size: var(--text-xs); color: var(--text-muted); }
.art__title { font-family: var(--font-display); font-weight: var(--weight-bold); font-size: clamp(2rem, 4.5vw, 3.25rem); line-height: 1.06; letter-spacing: -0.02em; margin: 0 0 var(--space-4); text-wrap: balance; }
.art__byline { display: flex; align-items: center; gap: var(--space-3); font-size: var(--text-sm); color: var(--text-muted); padding-bottom: var(--space-5); border-bottom: 1px solid var(--border); margin-bottom: var(--space-6); }
.art__source { font-weight: var(--weight-semibold); color: var(--text-primary); }
.art__dot { color: var(--border-strong); }
.art__body p { font-size: var(--text-md); line-height: 1.75; color: var(--text-secondary); margin: 0 0 var(--space-5); }
.art__body p:first-child { font-size: var(--text-lg); color: var(--text-primary); }

.art__actions { display: flex; align-items: center; gap: var(--space-6); flex-wrap: wrap; padding: var(--space-5); background: var(--surface-muted); border-radius: var(--radius-lg); margin: var(--space-7) 0; }
.art__like { display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-sans); font-size: var(--text-base); font-weight: var(--weight-bold); padding: 10px 18px; border-radius: var(--radius-pill); border: 1.5px solid var(--border-strong); background: #fff; color: var(--text-primary); cursor: pointer; transition: all var(--duration-fast) var(--ease-standard); }
.art__like:hover { border-color: var(--accent); color: var(--accent); }
.art__like.on { background: var(--accent); border-color: var(--accent); color: #fff; }
.art__stars { display: flex; flex-direction: column; gap: 4px; }
.art__stars-row { display: flex; gap: 2px; }
.art__star { background: none; border: 0; padding: 2px; cursor: pointer; color: var(--ink-300); transition: color var(--duration-fast), transform var(--duration-fast); }
.art__star:hover { transform: scale(1.15); }
.art__star.lit { color: var(--accent); }
.art__stars-meta { font-family: var(--font-mono); font-size: var(--text-xs); color: var(--text-muted); }

.art__comments { border-top: 2px solid var(--ink-900); padding-top: var(--space-6); }
.art__comments-title { font-family: var(--font-display); font-weight: var(--weight-bold); font-size: var(--text-xl); letter-spacing: -0.01em; margin: 0 0 var(--space-5); }
.art__count { color: var(--accent); }
.cmt { display: flex; gap: var(--space-3); padding: var(--space-4) 0; border-bottom: 1px solid var(--divider); }
.cmt__body { flex: 1; min-width: 0; }
.cmt__head { display: flex; align-items: baseline; gap: var(--space-2); flex-wrap: wrap; margin-bottom: 4px; }
.cmt__name { font-weight: var(--weight-bold); font-size: var(--text-sm); }
.cmt__role { font-size: var(--text-xs); color: var(--accent); }
.cmt__time { font-family: var(--font-mono); font-size: var(--text-2xs); color: var(--text-faint); margin-left: auto; }
.cmt__text { margin: 0; font-size: var(--text-sm); line-height: 1.6; color: var(--text-secondary); }
.cmt__empty { font-size: var(--text-sm); color: var(--text-muted); }
.cmt__form { display: flex; gap: var(--space-3); margin-top: var(--space-5); }
.cmt__form-body { flex: 1; display: grid; gap: var(--space-3); justify-items: end; }
.cmt__form textarea { width: 100%; font-family: var(--font-sans); font-size: var(--text-sm); line-height: 1.5; color: var(--text-primary); border: 1.5px solid var(--border); border-radius: var(--radius-md); padding: 12px 14px; outline: none; resize: vertical; }
.cmt__form textarea:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--ring-color); }
.cmt__login { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); background: var(--surface-muted); border-radius: var(--radius-md); padding: var(--space-4) var(--space-5); margin-top: var(--space-5); flex-wrap: wrap; }
.cmt__login p { margin: 0; font-size: var(--text-sm); color: var(--text-secondary); }

/* ---------- Contact CTA ---------- */
.cta { padding: var(--space-9) 0; }
.cta__inner { background: var(--accent); color: #fff; border-radius: var(--radius-xl); padding: var(--space-9) var(--space-8); text-align: center; position: relative; overflow: hidden; }
.cta__title { font-family: var(--font-display); font-weight: var(--weight-bold); font-size: clamp(2rem, 5vw, 3.5rem); letter-spacing: -0.02em; line-height: 1.05; margin: 0 auto var(--space-5); max-width: 18ch; }
.cta__lead { font-size: var(--text-md); color: rgba(255,255,255,0.85); max-width: 48ch; margin: 0 auto var(--space-7); }
.cta__form { display: flex; gap: var(--space-3); max-width: 460px; margin: 0 auto; }
.cta__form input { flex: 1; height: 50px; border-radius: var(--radius-md); border: 0; padding: 0 var(--space-4); font-family: var(--font-sans); font-size: var(--text-base); background: rgba(255,255,255,0.16); color: #fff; outline: none; }
.cta__form input::placeholder { color: rgba(255,255,255,0.7); }
.cta__form input:focus { background: rgba(255,255,255,0.24); box-shadow: 0 0 0 3px rgba(255,255,255,0.3); }
.cta__sent { font-size: var(--text-md); color: #fff; font-weight: var(--weight-semibold); display: inline-flex; gap: 8px; align-items: center; justify-content: center; }

/* ---------- Footer ---------- */
.ftr { padding: var(--space-8) 0 var(--space-7); border-top: 1px solid var(--border-subtle); }
.ftr__grid { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: var(--space-6); }
.ftr__logo img { height: 56px; width: auto; margin-bottom: var(--space-4); }
.ftr__tag { font-size: var(--text-sm); color: var(--text-muted); max-width: 28ch; line-height: 1.5; }
.ftr__col h4 { font-size: var(--text-xs); text-transform: uppercase; letter-spacing: 0.12em; color: var(--text-faint); margin: 0 0 var(--space-4); font-weight: var(--weight-semibold); }
.ftr__col a { display: block; font-size: var(--text-sm); color: var(--text-secondary); padding: 5px 0; }
.ftr__col a:hover { color: var(--accent); }
.ftr__base { display: flex; justify-content: space-between; align-items: center; margin-top: var(--space-7); padding-top: var(--space-5); border-top: 1px solid var(--border-subtle); font-size: var(--text-xs); color: var(--text-faint); flex-wrap: wrap; gap: var(--space-3); }

/* ---------- Mobile ---------- */
@media (max-width: 860px) {
  .hdr__links, .desktop-only { display: none; }
  .hdr__menu { display: inline-flex; }
  .hdr__bar { height: 64px; }
  .hdr__logo img { height: 38px; }
  .hdr__logo { gap: 3px !important; }
  .hdr__tagline { font-size: 7.5px !important; letter-spacing: 0.13em !important; margin-left: 2px !important; }
  .hdr__nav { gap: var(--space-3); }
  .hdr__profile-name { display: none; }
  .hdr__nav > .bfg-btn--primary { display: none; }
  .work-grid, .approach-grid, .stats { grid-template-columns: 1fr; }
  .lead { grid-template-columns: 1fr; gap: var(--space-6); }
  .lead__cover { aspect-ratio: auto; gap: var(--space-6); }
  .lead__cover-quote { font-size: 1.8rem; }
  .ftr__grid { grid-template-columns: 1fr 1fr; gap: var(--space-6); }
  .jrow { grid-template-columns: 1fr auto; }
  .jrow__kicker, .jrow__mins { display: none; }
  .hdr__mobile.open { display: block; }
  .hdr__mobile { position: absolute; top: 64px; left: 0; right: 0; background: var(--surface-page); border-bottom: 1px solid var(--border); padding: var(--space-5) var(--space-6); }
  .hdr__mobile a { display: block; padding: var(--space-3) 0; font-size: var(--text-md); font-weight: 600; border-bottom: 1px solid var(--border-subtle); }
  .cta__form { flex-direction: column; }
}

/* ---------- Entrance ---------- */
@media (prefers-reduced-motion: no-preference) {
  .reveal { opacity: 0; transform: translateY(14px); transition: opacity 0.6s var(--ease-out), transform 0.6s var(--ease-out); }
  .reveal.in { opacity: 1; transform: none; }
}

/* bfg: stats şimdilik gizli — geri açmak için bu bloğu sil */
.stats { display: none; }


/* ===== bfg üyelik / kayıt modalı (SignupModal) — site.css sonuna eklenecek =====
   Tokenlar styles.css/design-system'den geliyor; fallback değerler token yoksa da çalışsın diye. */
.sg-overlay{position:fixed;inset:0;z-index:120;display:grid;place-items:center;padding:16px}
.sg-scrim{position:absolute;inset:0;background:rgba(11,11,15,.55);-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px)}
.sg-card{position:relative;width:min(520px,94vw);max-height:92vh;overflow-y:auto;background:#fff;border-radius:var(--radius-lg,16px);box-shadow:var(--shadow-lg,0 14px 40px rgba(11,11,15,.14));padding:clamp(20px,4vw,32px);display:grid;gap:16px}
.sg-head{display:flex;align-items:center;justify-content:space-between}
.sg-steps{display:flex;align-items:center;gap:8px}
.sg-steps span{width:26px;height:26px;border-radius:50%;display:grid;place-items:center;font:600 13px/1 var(--font-sans);color:var(--text-muted,#6b6b76);background:#f0f0f3}
.sg-steps span.on{background:var(--accent,#4156be);color:#fff}
.sg-steps span.done{background:var(--accent,#4156be);color:#fff;opacity:.5}
.sg-steps i{width:24px;height:2px;background:#e4e4e9}
.sg-x{background:none;border:0;cursor:pointer;color:var(--text-muted,#6b6b76);padding:4px;border-radius:8px;line-height:0}
.sg-x:hover{background:#f0f0f3}
.sg-body{display:grid;gap:15px}
.sg-title{font-family:var(--font-display,'Playfair Display',serif);font-weight:700;font-size:clamp(1.4rem,4vw,1.75rem);margin:.15em 0 0;letter-spacing:-.01em;color:var(--text-primary,#0b0b0f)}
.sg-sub{margin:2px 0 0;font-size:.9rem;line-height:1.5;color:var(--text-secondary,#45454f)}
.sg-field{display:grid;gap:6px}
.sg-label{font:600 11.5px/1.3 var(--font-sans);letter-spacing:.03em;color:var(--text-secondary,#45454f);text-transform:uppercase}
.sg-label em{font-style:normal;text-transform:none;letter-spacing:0;color:var(--text-muted,#9a9aa4);font-weight:500}
.sg-input{width:100%;box-sizing:border-box;font:400 15px/1.4 var(--font-sans);color:var(--text-primary,#0b0b0f);background:#fff;border:1.5px solid var(--border,#dedee3);border-radius:var(--radius-md,10px);padding:11px 13px;transition:border-color .15s,box-shadow .15s}
.sg-input::placeholder{color:#b3b3bb}
.sg-input:focus{outline:none;border-color:var(--accent,#4156be);box-shadow:0 0 0 3px rgba(65,86,190,.14)}
.sg-select{appearance:none;-webkit-appearance:none;background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236b6b76' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>");background-repeat:no-repeat;background-position:right 12px center;padding-right:38px}
.sg-row{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.sg-gen{display:flex;align-items:center;gap:12px;padding:12px 14px;border-radius:var(--radius-md,10px);background:rgba(65,86,190,.07);border:1px solid rgba(65,86,190,.2)}
.sg-gen__emoji{font-size:26px;line-height:1}
.sg-gen strong{display:block;font:700 14px/1.2 var(--font-sans);color:var(--text-primary,#0b0b0f)}
.sg-gen span{font-size:12.5px;color:var(--text-secondary,#45454f)}
.sg-seg{display:flex;gap:8px;flex-wrap:wrap}
.sg-seg--wrap{flex-wrap:wrap}
.sg-seg button{flex:1 1 auto;font:500 13px/1 var(--font-sans);padding:10px 12px;border:1.5px solid var(--border,#dedee3);border-radius:999px;background:#fff;color:var(--text-secondary,#45454f);cursor:pointer;transition:all .15s;white-space:nowrap}
.sg-seg button:hover{border-color:var(--accent,#4156be);color:var(--accent,#4156be)}
.sg-seg button.on{background:var(--accent,#4156be);border-color:var(--accent,#4156be);color:#fff}
.sg-chips{display:flex;flex-wrap:wrap;gap:8px}
.sg-chip{font:500 13px/1 var(--font-sans);padding:8px 13px;border:1.5px solid var(--border,#dedee3);border-radius:999px;background:#fff;color:var(--text-secondary,#45454f);cursor:pointer;transition:all .15s}
.sg-chip:hover{border-color:var(--accent,#4156be)}
.sg-chip.on{background:rgba(65,86,190,.1);border-color:var(--accent,#4156be);color:var(--accent,#4156be);font-weight:600}
.sg-more{justify-self:start;display:inline-flex;align-items:center;gap:6px;background:none;border:0;color:var(--accent,#4156be);font:600 13px/1 var(--font-sans);cursor:pointer;padding:2px 0}
.sg-consent{display:flex;gap:10px;align-items:flex-start;font-size:12.5px;line-height:1.45;color:var(--text-secondary,#45454f)}
.sg-consent input{margin-top:2px;width:16px;height:16px;accent-color:var(--accent,#4156be);flex:none}
.sg-consent a{color:var(--accent,#4156be);text-decoration:underline}
.sg-err{background:#fdecec;color:#b42318;border:1px solid #f5c2c0;border-radius:var(--radius-md,10px);padding:10px 13px;font-size:13px;line-height:1.4}
.sg-fine{margin:0;font-size:11.5px;color:var(--text-muted,#9a9aa4);text-align:center}
.sg-code{font:600 22px/1 var(--font-sans);letter-spacing:.4em;text-align:center;padding:14px}
.sg-alt{display:flex;justify-content:space-between;gap:12px}
.sg-alt button{background:none;border:0;color:var(--text-secondary,#45454f);font:500 13px/1 var(--font-sans);cursor:pointer;text-decoration:underline;padding:4px}
.sg-alt button:hover{color:var(--accent,#4156be)}
.sg-alt button:disabled{opacity:.5;cursor:default}
@media(max-width:520px){.sg-row{grid-template-columns:1fr}.sg-seg button{flex:1 1 42%}}