/* =========================================================================
   STEROID TÜRKİYE — Editorial Forge identity
   Sharper, bolder, more typographic. Display font for headlines, body sans
   for everything else. Heavy use of rules, numbered sections, asymmetric grid.
   ========================================================================= */

* { box-sizing: border-box; }
/* Scrollbar styling lives in ONE place (themed block below). The old universal
   rules here painted the thumb with --c-surface, which blends into the page
   background and made the scrollbar look invisible. */
html, body { margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; }
body {
  font-family: var(--font-sans);
  font-size: 16px; line-height: 1.55;
  color: var(--c-text); background: var(--c-bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}
::selection { background: var(--c-primary); color: var(--c-bg); }
a { color: var(--c-text); text-decoration: none; transition: color .2s ease; }
a:hover { color: var(--c-primary); }
img, svg { max-width: 100%; height: auto; display: block; }
button { font: inherit; cursor: pointer; }
ul, ol { margin: 0; padding-left: 1.25rem; }

/* DISPLAY type (headlines, eyebrow numerals) */
h1, h2, h3, h4, .display {
  font-family: var(--font-display);
  font-weight: 800;
  letter-spacing: -.02em;
  line-height: .95;
  color: var(--c-text);
  margin: 0 0 .5em;
  text-transform: uppercase;
}
h1 { font-size: clamp(2.4rem, 7vw, 6rem); letter-spacing: -.035em; }
h2 { font-size: clamp(1.6rem, 3.5vw, 2.6rem); letter-spacing: -.025em; }
/* Hero blocks paint a dark blue gradient and set color:#fff on the container —
   but the global `h1,h2{color:var(--c-text)}` rule above overrides that INHERITED
   white through its direct h1/h2 selector, leaving a dark title on a dark gradient
   (the "Genel Sorular" clash on category sub-pages). Force every heading that sits
   inside a gradient hero back to white — kept in ONE place so it can never regress
   again across category / homepage CTA / static / rules / FAQ heroes. */
.cathero h1, .cathero h2,
.hm-cta h1, .hm-cta h2,
.spage__hero h1, .spage__hero h2,
.rules-hero h1, .rules-hero h2,
.faq-hero h1, .faq-hero h2 { color: #fff; }
h3 { font-size: clamp(1.1rem, 2vw, 1.4rem); letter-spacing: -.015em; }
p  { margin: 0 0 1em; }

.container { max-width: var(--site-max, 1280px); margin: 0 auto; padding: 0 var(--gutter, 28px); }
.container-narrow { max-width: 880px; margin: 0 auto; padding: 0 var(--gutter, 28px); }

/* tiny eyebrow — single line uppercase tag, with leading bar */
.eyebrow {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--font-sans);
  font-size: 11px; font-weight: 700; letter-spacing: .3em;
  text-transform: uppercase; color: var(--c-muted);
}
.eyebrow::before { content: ''; width: 32px; height: 2px; background: var(--c-primary); }

.lead {
  font-family: var(--font-sans);
  font-size: clamp(1rem, 1.5vw, 1.2rem);
  color: var(--c-muted); line-height: 1.5;
  max-width: 640px;
}

/* gigantic section number watermark */
.section-num {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(5rem, 14vw, 14rem);
  line-height: 1; letter-spacing: -.06em;
  color: transparent;
  -webkit-text-stroke: 1px color-mix(in srgb, var(--c-text) 22%, transparent);
  text-stroke: 1px color-mix(in srgb, var(--c-text) 22%, transparent);
  user-select: none; pointer-events: none;
}

/* ===== buttons ===== */
.btn {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 13px 26px;
  border-radius: 0;
  font-family: var(--font-sans);
  font-weight: 700; font-size: 13px;
  letter-spacing: .12em; text-transform: uppercase;
  border: 2px solid transparent;
  cursor: pointer;
  transition: all .2s cubic-bezier(.4,0,.2,1);
  white-space: nowrap;
}
.btn-lg { padding: 16px 32px; font-size: 14px; }
.btn-sm { padding: 8px 14px; font-size: 12px; letter-spacing: .08em; }
.btn-primary { background: var(--c-primary); color: var(--c-on-primary, #fff); }
.btn-primary:hover { background: var(--c-bg); color: var(--c-primary); border-color: var(--c-primary); }
.btn-outline { background: transparent; color: var(--c-text); border-color: var(--c-text); }
.btn-outline:hover { background: var(--c-text); color: var(--c-bg); }
.btn-ghost { background: transparent; color: var(--c-text); }
.btn-ghost:hover { background: color-mix(in srgb, var(--c-text) 8%, transparent); }
.btn-icon {
  width: 40px; height: 40px; padding: 0; border-radius: 0;
  display: inline-flex; align-items: center; justify-content: center;
  background: transparent; color: var(--c-text);
  border: 1.5px solid color-mix(in srgb, var(--c-text) 18%, transparent);
}
.btn-icon:hover { background: var(--c-text); color: var(--c-bg); border-color: var(--c-text); }
.theme-toggle .icon-sun  { display: none; }
[data-mode="light"] .theme-toggle .icon-sun  { display: inline; }
[data-mode="light"] .theme-toggle .icon-moon { display: none; }

.chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 10px;
  font-family: var(--font-sans);
  font-size: 11px; font-weight: 600; letter-spacing: .06em;
  text-transform: uppercase;
  background: transparent;
  color: var(--c-muted);
  border: 1px solid color-mix(in srgb, var(--c-text) 14%, transparent);
}
.chip-accent { color: var(--c-primary); border-color: var(--c-primary); }
.chip-solid  { background: var(--c-primary); color: var(--c-bg); border: 0; }

/* ===== rules ===== */
hr { border: 0; border-top: 1px solid color-mix(in srgb, var(--c-text) 14%, transparent); margin: 2rem 0; }

/* ===== notice strip ===== */
.notice-strip {
  display: block;
  background: var(--c-text); color: var(--c-bg);
  text-align: center; padding: 10px 16px;
  font-family: var(--font-sans);
  font-size: 11px; font-weight: 700; letter-spacing: .15em;
  text-transform: uppercase;
}
.notice-strip:hover { color: var(--c-bg); }
.notice-strip i { color: var(--c-primary); }

/* ===== toasts (flash) ===== */
.toast {
  margin: 12px 0; padding: 14px 18px; border-radius: 0;
  font-size: 13px; font-weight: 600; letter-spacing: .04em;
  border-left: 4px solid;
  display: flex; align-items: center; gap: 10px;
  animation: slideDown .35s cubic-bezier(.4,0,.2,1) both;
  background: var(--c-surface);
  text-transform: uppercase;
}
@keyframes slideDown { from { opacity: 0; transform: translateY(-12px); } to { opacity: 1; transform: none; } }
.toast-success { color: #34d399; border-color: #10b981; }
.toast-error   { color: #f87171; border-color: #ef4444; }

/* ===== Themed scrollbar — pulls site colors; width via --scrollbar-w =====
   Always visible: solid gradient thumb (site primary→accent) on a tinted track. */
html { scrollbar-width: auto; scrollbar-color: var(--c-primary) color-mix(in srgb, var(--c-text) 10%, var(--c-bg)); }
*::-webkit-scrollbar { width: var(--scrollbar-w, 12px); height: var(--scrollbar-w, 12px); }
*::-webkit-scrollbar-track { background: color-mix(in srgb, var(--c-text) 10%, var(--c-bg)); border-radius: 999px; }
*::-webkit-scrollbar-thumb {
  background: linear-gradient(var(--c-primary), var(--c-accent, var(--c-primary)));
  border-radius: 999px;
  border: 2px solid color-mix(in srgb, var(--c-text) 10%, var(--c-bg));
  background-clip: padding-box;
  min-height: 40px;
}
*::-webkit-scrollbar-thumb:hover { background: var(--c-primary); background-clip: padding-box; }
*::-webkit-scrollbar-corner { background: transparent; }

/* ===== Floating action buttons — WhatsApp + scroll-to-top.
   Both share ONE identical template: same size, same round shape, same icon
   scale, NO drop shadow (flat, clean). They differ only by color + icon. ===== */
.wa-fab, .totop-fab {
  position: fixed; bottom: 24px; right: 24px; z-index: 80;
  width: var(--fab-size, 56px); height: var(--fab-size, 56px);
  display: inline-flex; align-items: center; justify-content: center;
  color: #fff; border: 0; cursor: pointer; border-radius: var(--fab-radius, 50%);
  font-size: calc(var(--fab-size, 56px) * .42);
  transition: filter .15s ease, transform .15s ease, opacity .2s ease, visibility .2s ease;
}
/* animations off (admin toggle): no hover lift, no transition */
body.fab-noanim .wa-fab, body.fab-noanim .totop-fab { transition: opacity .2s ease, visibility .2s ease; }
body.fab-noanim .wa-fab:hover, body.fab-noanim .totop-fab:hover { transform: none; }
.wa-fab { background: var(--fab-c, var(--fab-wa, #25d366)); }
.totop-fab {
  bottom: calc(24px + var(--fab-size, 56px) + 14px);
  background: var(--fab-c, var(--fab-top, var(--c-primary)));
  opacity: 0; visibility: hidden; transform: translateY(12px) scale(.92);
}
.totop-fab.show { opacity: 1; visibility: visible; transform: none; }
.wa-fab:hover, .totop-fab:hover { filter: brightness(1.08); color: #fff; transform: translateY(-2px); }
/* if WhatsApp is hidden, the to-top button takes the bottom slot */
body:not(:has(.wa-fab)) .totop-fab { bottom: 24px; }
/* left-side placement option */
body.fab-left .wa-fab, body.fab-left .totop-fab { left: 24px; right: auto; }
@media (max-width: 560px) {
  .wa-fab, .totop-fab { right: 14px; }
  body.fab-left .wa-fab, body.fab-left .totop-fab { left: 14px; right: auto; }
}
/* ───────── Floating button STYLE templates (admin: fab_style) ───────── */
[data-fab-style="solid"]    { background: var(--fab-c); color: #fff; }
[data-fab-style="gradient"] { background: linear-gradient(135deg, var(--fab-c), color-mix(in srgb, var(--fab-c) 55%, #000)); color: #fff; }
[data-fab-style="glass"]    { background: color-mix(in srgb, var(--fab-c) 24%, transparent); -webkit-backdrop-filter: blur(12px) saturate(160%); backdrop-filter: blur(12px) saturate(160%); border: 1px solid color-mix(in srgb, var(--fab-c) 55%, transparent); color: color-mix(in srgb, var(--fab-c) 88%, var(--c-text)); }
[data-fab-style="outline"]  { background: var(--c-surface); border: 2px solid var(--fab-c); color: var(--fab-c); }
[data-fab-style="neon"]     { background: var(--fab-c); color: #fff; box-shadow: 0 0 16px color-mix(in srgb, var(--fab-c) 75%, transparent), 0 0 5px color-mix(in srgb, var(--fab-c) 90%, transparent); }
[data-fab-style="soft"]     { background: var(--fab-c); color: #fff; box-shadow: 0 12px 26px -6px color-mix(in srgb, var(--fab-c) 55%, transparent); }
/* ───────── Floating button ANIMATIONS (admin: fab_anim) ───────── */
@keyframes fabPulse  { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--fab-c) 55%, transparent); } 70% { box-shadow: 0 0 0 14px color-mix(in srgb, var(--fab-c) 0%, transparent); } 100% { box-shadow: 0 0 0 0 transparent; } }
@keyframes fabGlow   { 0%,100% { filter: brightness(1); } 50% { filter: brightness(1.22); } }
@keyframes fabBounce { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-5px); } }
@keyframes fabFloat  { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-3px); } }
@keyframes fabSpin   { 0%,82%,100% { transform: rotate(0); } 91% { transform: rotate(360deg); } }
.wa-fab[data-fab-anim="pulse"], .totop-fab.show[data-fab-anim="pulse"] { animation: fabPulse 2s ease-out infinite; }
.wa-fab[data-fab-anim="glow"],  .totop-fab.show[data-fab-anim="glow"]  { animation: fabGlow 2.2s ease-in-out infinite; }
.wa-fab[data-fab-anim="bounce"] i, .totop-fab.show[data-fab-anim="bounce"] i { animation: fabBounce 1.4s ease-in-out infinite; }
.wa-fab[data-fab-anim="float"] i,  .totop-fab.show[data-fab-anim="float"] i  { animation: fabFloat 2.6s ease-in-out infinite; }
.wa-fab[data-fab-anim="spin"] i,   .totop-fab.show[data-fab-anim="spin"] i   { animation: fabSpin 3.2s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce) { .wa-fab, .totop-fab, .wa-fab i, .totop-fab i { animation: none !important; } }

/* ===== Ask-question FAB + popup (flat, no shadow) ===== */
.ask-fab {
  position: fixed; bottom: 24px; left: 24px; z-index: 80;
  display: inline-flex; align-items: center; gap: 10px;
  padding: 0 22px 0 18px; height: 56px;
  background: var(--c-grad, linear-gradient(135deg,var(--c-primary),var(--c-accent)));
  color: #fff; border: 0; cursor: pointer;
  border-radius: 999px; font-family: var(--font-display); font-weight: 800;
  font-size: 15px; letter-spacing: .02em; text-transform: uppercase;
  transition: transform .15s, filter .15s;
}
.ask-fab i { font-size: 19px; }
.ask-fab:hover { transform: translateY(-2px); filter: brightness(1.06); color: #fff; }
@media (max-width: 600px) { .ask-fab__txt { display: none; } .ask-fab { padding: 0; width: 56px; justify-content: center; } }

.ask-pop[hidden] { display: none; }
.ask-pop { position: fixed; inset: 0; z-index: 1200; display: flex; align-items: center; justify-content: center; padding: 20px; }
.ask-pop__overlay { position: absolute; inset: 0; background: rgba(5,8,12,.7); backdrop-filter: blur(4px); }
.ask-pop__panel {
  position: relative; z-index: 1; width: 100%; max-width: 540px;
  background: var(--c-surface); border: 1px solid color-mix(in srgb, var(--c-text) 12%, transparent);
  border-radius: 18px; padding: 30px 30px 28px; box-shadow: 0 30px 80px rgba(0,0,0,.5);
  animation: askPopIn .2s ease-out;
}
@keyframes askPopIn { from { opacity: 0; transform: translateY(16px) scale(.98); } to { opacity: 1; transform: none; } }
.ask-pop__close { position: absolute; top: 14px; right: 14px; width: 38px; height: 38px; border-radius: 50%; border: 0; background: color-mix(in srgb, var(--c-text) 8%, transparent); color: var(--c-text); font-size: 17px; cursor: pointer; }
.ask-pop__close:hover { background: color-mix(in srgb, var(--c-text) 16%, transparent); }
.ask-pop__panel h3 { font-family: var(--font-display); font-size: 22px; margin: 0 0 4px; text-transform: uppercase; letter-spacing: -.01em; display: flex; align-items: center; gap: 10px; }
.ask-pop__panel h3 i { color: var(--c-primary); }
.ask-pop__sub { color: var(--c-muted); font-size: 13.5px; margin: 0 0 18px; }
.ask-pop__panel label { display: block; font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .14em; color: var(--c-muted); margin: 14px 0 6px; }
.ask-pop__panel input, .ask-pop__panel textarea {
  width: 100%; padding: 13px 15px; background: var(--c-bg); color: var(--c-text);
  border: 1px solid color-mix(in srgb, var(--c-text) 16%, transparent); border-radius: 10px;
  font-family: inherit; font-size: 15px; resize: vertical;
}
.ask-pop__panel input:focus, .ask-pop__panel textarea:focus { outline: none; border-color: var(--c-primary); }
.ask-pop__panel form > .btn { margin-top: 20px; }
.ask-accept { display: flex; align-items: flex-start; gap: 10px; margin: 16px 0 4px; font-size: 12.5px; color: var(--c-muted); line-height: 1.5; cursor: pointer; }
.ask-accept input { margin-top: 2px; flex: none; accent-color: var(--c-primary); width: 16px; height: 16px; }
.ask-accept a { color: var(--c-primary); font-weight: 600; }
.ask-rules { background: color-mix(in srgb, var(--c-primary) 7%, transparent); border: 1px solid color-mix(in srgb, var(--c-primary) 25%, transparent); border-radius: 12px; padding: 12px 15px; margin-bottom: 16px; }
.ask-rules strong { display: block; font-size: 12px; text-transform: uppercase; letter-spacing: .06em; color: var(--c-primary); margin-bottom: 7px; }
.ask-rules strong i { margin-right: 5px; }
.ask-rules ul { margin: 0; padding-left: 18px; }
.ask-rules li { font-size: 12.5px; color: var(--c-muted); line-height: 1.55; }
/* per-category posting rules — red warning shown under the title when a category is picked */
.askrules { position: relative; overflow: hidden; background: linear-gradient(180deg, color-mix(in srgb, #dc2626 12%, var(--c-surface)), color-mix(in srgb, #dc2626 5%, var(--c-surface))); border: 1px solid color-mix(in srgb, #dc2626 45%, transparent); border-left: 5px solid #dc2626; border-radius: 14px; padding: 16px 18px 14px; margin: 4px 0 16px; animation: askrulesIn .25s ease; box-shadow: 0 10px 26px -18px rgba(220,38,38,.55); }
/* filigran ünlem — kutunun ortasında, büyük ve saydam */
.askrules::after { content: "\f071"; font-family: "Font Awesome 6 Free"; font-weight: 900; position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; rotate: -8deg; font-size: 150px; line-height: 1; color: color-mix(in srgb, #dc2626 7%, transparent); pointer-events: none; }
@keyframes askrulesIn { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
.askrules__h { display: flex; align-items: center; gap: 9px; font-family: var(--font-display); font-weight: 800; font-size: 14px; letter-spacing: .02em; text-transform: uppercase; color: #dc2626; margin-bottom: 10px; padding-bottom: 9px; border-bottom: 1px dashed color-mix(in srgb, #dc2626 35%, transparent); }
.askrules__h i { width: 26px; height: 26px; border-radius: 8px; background: #dc2626; color: #fff; display: inline-grid; place-items: center; font-size: 12px; flex: none; }
.askrules ul { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 7px; counter-reset: arule; }
.askrules li { font-size: 13px; line-height: 1.55; color: var(--c-text); position: relative; padding-left: 30px; counter-increment: arule; }
.askrules li::before { content: counter(arule); position: absolute; left: 0; top: 1px; width: 20px; height: 20px; border-radius: 6px; background: color-mix(in srgb, #dc2626 16%, transparent); color: #dc2626; font-size: 11px; font-weight: 800; display: grid; place-items: center; }
.askrules__note { margin-top: 10px; padding-top: 9px; border-top: 1px dashed color-mix(in srgb, #dc2626 35%, transparent); font-size: 11.5px; line-height: 1.5; color: var(--c-muted); }
body.ui-squared .askrules { border-radius: var(--ui-radius, 4px); }
.ask-rules a { color: var(--c-primary); font-weight: 600; }

/* "login required to send" hint shown to guests under the ask form */
.ask-login-note { display: flex; align-items: flex-start; gap: 9px; margin: 14px 0 4px; padding: 11px 14px;
  background: color-mix(in srgb, var(--c-primary) 9%, transparent);
  border: 1px solid color-mix(in srgb, var(--c-primary) 28%, transparent); border-radius: 10px;
  font-size: 12.5px; line-height: 1.5; color: var(--c-text); }
.ask-login-note i { color: var(--c-primary); margin-top: 2px; flex: none; }
.ask-login-note a { color: var(--c-primary); font-weight: 700; text-decoration: underline; }

@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

/* =========================================================================
   HEADER
   ========================================================================= */
.hdr { position: sticky; top: 0; z-index: 50; background: var(--c-bg); }
.hdr a { color: var(--c-text); }

/* ===== Impersonation bar ===== */
.impersonate-bar { position: sticky; top: 0; z-index: 10000; display: flex; align-items: center; justify-content: center; gap: 16px; flex-wrap: wrap; background: #b45309; color: #fff; font-size: 13.5px; font-weight: 600; padding: 8px 16px; }
.impersonate-bar strong { font-weight: 800; }
.impersonate-bar form { margin: 0; }
.impersonate-bar button { background: #fff; color: #b45309; border: 0; border-radius: 999px; padding: 5px 14px; font-weight: 800; font-size: 12.5px; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; }
.impersonate-bar button:hover { background: #fef3c7; }

/* ===== Question categories + meta box ===== */
.q-cats { display: flex; flex-wrap: wrap; gap: 8px; margin: 14px 0 4px; }
.q-cat { display: inline-flex; align-items: center; gap: 7px; padding: 6px 13px; border-radius: 999px; background: color-mix(in srgb, var(--c-primary) 10%, transparent); color: var(--c-primary); font-size: 12.5px; font-weight: 700; }
.q-cat:hover { background: var(--c-primary); color: var(--c-bg); }
.q-meta-box { margin: 16px 0; border: 1px solid color-mix(in srgb, var(--c-text) 12%, transparent); border-radius: 14px; overflow: hidden; background: var(--c-surface); }
.q-meta-box__head { background: color-mix(in srgb, var(--c-primary) 8%, var(--c-surface)); padding: 11px 16px; font-family: var(--font-display); font-weight: 800; font-size: 13px; text-transform: uppercase; letter-spacing: .04em; display: flex; align-items: center; gap: 9px; border-bottom: 1px solid color-mix(in srgb, var(--c-text) 10%, transparent); }
.q-meta-box__head i { color: var(--c-primary); }
.q-meta-box__items { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 1px; background: color-mix(in srgb, var(--c-text) 8%, transparent); }
.q-meta-item { background: var(--c-surface); padding: 12px 15px; display: flex; align-items: center; gap: 11px; }
.q-meta-item i { color: var(--c-primary); width: 18px; text-align: center; font-size: 15px; flex: none; }
.q-meta-item__t { display: flex; flex-direction: column; gap: 2px; min-width: 0; }   /* label on top, value below */
.q-meta-item .k { font-size: 10.5px; color: var(--c-muted); text-transform: uppercase; letter-spacing: .05em; font-weight: 700; line-height: 1.2; }
.q-meta-item .v { font-weight: 800; color: var(--c-text); font-size: 16px; line-height: 1.2; word-break: break-word; }

/* ask form: category select + extra details */
.ask-select { width: 100%; padding: 13px 15px; background: var(--c-bg); color: var(--c-text); border: 1px solid color-mix(in srgb, var(--c-text) 16%, transparent); border-radius: 10px; font-family: inherit; font-size: 15px; cursor: pointer; }
.ask-extra { margin: 16px 0 4px; border: 1px dashed color-mix(in srgb, var(--c-text) 20%, transparent); border-radius: 12px; }
.ask-extra > summary { cursor: pointer; padding: 12px 15px; font-size: 13px; font-weight: 700; color: var(--c-primary); list-style: none; }
.ask-extra > summary::-webkit-details-marker { display: none; }
.ask-extra > summary i { margin-right: 7px; }
.ask-extra__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; padding: 4px 15px 15px; }
.ask-extra__grid > div { display: flex; flex-direction: column; }
.ask-extra__full { grid-column: 1 / -1; }
.ask-extra__grid label { font-size: 11px; margin: 0 0 5px; }
.ask-extra__grid input, .ask-extra__grid select { padding: 10px 12px; background: var(--c-bg); color: var(--c-text); border: 1px solid color-mix(in srgb, var(--c-text) 16%, transparent); border-radius: 9px; font-family: inherit; font-size: 14px; }

/* ===== Question action bar (like / save / report) ===== */
.q-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 22px; padding-top: 18px; border-top: 1px solid color-mix(in srgb, var(--c-text) 10%, transparent); }
.q-act { display: inline-flex; align-items: center; gap: 8px; padding: 10px 16px; border-radius: 999px; border: 1.5px solid color-mix(in srgb, var(--c-text) 16%, transparent); background: var(--c-surface); color: var(--c-text); font-family: var(--font-sans); font-weight: 700; font-size: 13.5px; cursor: pointer; transition: all .15s; }
.q-act:hover { border-color: var(--c-primary); color: var(--c-primary); }
.q-act i { font-size: 15px; }
/* share row */
.q-share { display: flex; align-items: center; gap: 8px; margin-top: 14px; flex-wrap: wrap; }
.q-share__lbl { font-size: 12.5px; font-weight: 700; color: var(--c-muted); display: inline-flex; align-items: center; gap: 7px; margin-right: 4px; }
.q-share__btn { width: 38px; height: 38px; display: grid; place-items: center; border-radius: 50%; border: 0; cursor: pointer; color: #fff; font-size: 16px; transition: transform .15s, filter .15s; text-decoration: none; }
.q-share__btn:hover { transform: translateY(-2px); filter: brightness(1.08); color: #fff; }
.q-share__btn.wa { background: #25d366; }
.q-share__btn.tg { background: #229ed9; }
.q-share__btn.x  { background: #111827; }
.q-share__btn.fb { background: #1877f2; }
.q-share__btn.copy { background: color-mix(in srgb, var(--c-text) 14%, transparent); color: var(--c-text); }
.q-share__btn.copy:hover { color: var(--c-text); }
body.ui-squared .q-share__btn { border-radius: 4px; }
.q-act__n { background: color-mix(in srgb, var(--c-text) 10%, transparent); color: var(--c-muted); font-size: 12px; padding: 1px 9px; border-radius: 999px; min-width: 22px; text-align: center; }
.q-act--like.is-on { background: #ef4444; border-color: #ef4444; color: #fff; }
.q-act--like.is-on .q-act__n { background: rgba(255,255,255,.25); color: #fff; }
.q-act--save.is-on { background: var(--c-primary); border-color: var(--c-primary); color: var(--c-bg); }
.q-act--report:hover { border-color: #f59e0b; color: #f59e0b; }

/* answer mini-actions (report / edit) */
.ans-mini { display: inline-flex; align-items: center; gap: 6px; padding: 7px 13px; background: transparent; border: 1px solid color-mix(in srgb, var(--c-text) 14%, transparent); border-radius: 999px; color: var(--c-muted); font-family: var(--font-sans); font-size: 12px; font-weight: 700; cursor: pointer; transition: all .15s; }
.ans-mini:hover { border-color: var(--c-primary); color: var(--c-primary); }
.ans-delform { display: inline-flex; margin: 0; }
.ans-mini--del:hover { border-color: #ef4444; color: #fff; background: #ef4444; }
.ans-mini--save { border-color: var(--c-primary); color: #fff; background: var(--c-primary); }
.ans-mini--save:hover { filter: brightness(1.08); color: #fff; }
/* inline edit form for own answers/replies */
.ans-edit { margin: 4px 0 2px; }
.ans-edit__ta { width: 100%; min-height: 92px; padding: 12px 14px; border: 1px solid color-mix(in srgb, var(--c-primary) 35%, transparent); border-radius: 12px; background: var(--c-bg); color: var(--c-text); font-family: inherit; font-size: 14.5px; line-height: 1.6; resize: vertical; }
.ans-edit__ta:focus { outline: none; border-color: var(--c-primary); box-shadow: 0 0 0 3px color-mix(in srgb, var(--c-primary) 18%, transparent); }
.ans-edit__row { display: flex; gap: 8px; margin-top: 10px; }
body.ui-squared .ans-edit__ta { border-radius: var(--ui-radius, 4px); }

/* ===== Report modal ===== */
.report-modal[hidden] { display: none; }
.report-modal { position: fixed; inset: 0; z-index: 1300; display: flex; align-items: center; justify-content: center; padding: 20px; }
.report-modal__overlay { position: absolute; inset: 0; background: rgba(5,8,12,.7); backdrop-filter: blur(4px); }
.report-modal__panel { position: relative; z-index: 1; width: 100%; max-width: 460px; background: var(--c-surface); border: 1px solid color-mix(in srgb, var(--c-text) 12%, transparent); border-radius: 18px; padding: 28px; box-shadow: 0 30px 80px rgba(0,0,0,.5); animation: askPopIn .2s ease-out; }
.report-modal__close { position: absolute; top: 14px; right: 14px; width: 36px; height: 36px; border-radius: 50%; border: 0; background: color-mix(in srgb, var(--c-text) 8%, transparent); color: var(--c-text); font-size: 16px; cursor: pointer; }
.report-modal__panel h3 { font-family: var(--font-display); font-size: 20px; margin: 0 0 4px; text-transform: uppercase; display: flex; align-items: center; gap: 10px; }
.report-modal__panel h3 i { color: #f59e0b; }
.report-modal__sub { color: var(--c-muted); font-size: 13px; margin: 0 0 16px; }
.report-reasons { display: flex; flex-direction: column; gap: 8px; margin-bottom: 14px; }
.report-reason { text-align: left; padding: 11px 14px; border-radius: 10px; border: 1.5px solid color-mix(in srgb, var(--c-text) 14%, transparent); background: var(--c-bg); color: var(--c-text); font-family: inherit; font-size: 14px; font-weight: 600; cursor: pointer; transition: all .15s; }
.report-reason:hover { border-color: var(--c-primary); }
.report-reason.sel { border-color: var(--c-primary); background: color-mix(in srgb, var(--c-primary) 10%, transparent); color: var(--c-primary); }
.report-modal textarea { width: 100%; padding: 12px 14px; background: var(--c-bg); color: var(--c-text); border: 1px solid color-mix(in srgb, var(--c-text) 16%, transparent); border-radius: 10px; font-family: inherit; font-size: 14px; resize: vertical; }

/* ===== Poll widget ===== */
.poll-q { font-weight: 700; font-size: 14.5px; margin: 0 0 14px; color: var(--c-text); line-height: 1.4; }
.poll-opt { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border: 1px solid color-mix(in srgb, var(--c-text) 14%, transparent); border-radius: 10px; margin-bottom: 8px; cursor: pointer; transition: border-color .15s, background .15s; }
.poll-opt:hover { border-color: var(--c-primary); background: color-mix(in srgb, var(--c-primary) 6%, transparent); }
.poll-opt input { accent-color: var(--c-primary); }
.poll-opt span { font-size: 13.5px; font-weight: 600; }
.poll-res { margin-bottom: 11px; }
.poll-res__top { display: flex; justify-content: space-between; font-size: 12.5px; font-weight: 600; margin-bottom: 5px; }
.poll-res__top span:last-child { color: var(--c-primary); font-weight: 800; }
.poll-res__bar { height: 8px; background: color-mix(in srgb, var(--c-text) 10%, transparent); border-radius: 999px; overflow: hidden; }
.poll-res__bar span { display: block; height: 100%; background: var(--c-grad); border-radius: 999px; transition: width .5s ease; }
.poll-res.is-mine .poll-res__top span:first-child { color: var(--c-primary); }
.poll-total { margin-top: 12px; font-size: 11px; color: var(--c-muted); text-transform: uppercase; letter-spacing: .12em; font-weight: 700; text-align: center; }
.poll-desc { font-size: 12.5px; color: var(--c-muted); margin: -8px 0 14px; line-height: 1.45; }
.poll-opt__lbl { font-size: 13.5px; font-weight: 600; }
.poll-opt:has(input:checked) { border-color: var(--oc, var(--c-primary)); background: color-mix(in srgb, var(--oc, var(--c-primary)) 10%, transparent); }

/* donut style */
.poll-donut-wrap { display: flex; gap: 16px; align-items: center; flex-wrap: wrap; }
.poll-donut { width: 116px; height: 116px; border-radius: 50%; flex: none; display: flex; align-items: center; justify-content: center; position: relative; }
.poll-donut::after { content: ""; position: absolute; inset: 26px; border-radius: 50%; background: var(--c-surface); }
.poll-donut span { position: relative; z-index: 1; font-weight: 800; font-size: 18px; color: var(--c-text); display: flex; flex-direction: column; align-items: center; line-height: 1; }
.poll-donut span small { font-size: 10px; font-weight: 700; color: var(--c-muted); text-transform: uppercase; letter-spacing: .1em; margin-top: 3px; }
.poll-legend { flex: 1; min-width: 150px; display: flex; flex-direction: column; gap: 6px; }
.poll-leg { display: flex; align-items: center; gap: 8px; font-size: 12.5px; }
.poll-leg__dot { width: 11px; height: 11px; border-radius: 50%; flex: none; }
.poll-leg__lbl { flex: 1; color: var(--c-text); }
.poll-leg strong { color: var(--c-text); }
.poll-leg.is-mine .poll-leg__lbl { color: var(--c-primary); font-weight: 700; }

/* cards style — big tap targets */
.poll-widget--cards .poll-opts { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.poll-widget--cards .poll-opt { flex-direction: column; text-align: center; padding: 16px 10px; border-width: 2px; margin: 0; }
.poll-widget--cards .poll-opt input { position: absolute; opacity: 0; }
.poll-widget--cards .poll-opt:has(input:checked) { box-shadow: 0 0 0 2px var(--oc, var(--c-primary)) inset; }

/* emoji style — pill buttons */
.poll-widget--emoji .poll-opts { display: flex; flex-wrap: wrap; gap: 8px; }
.poll-widget--emoji .poll-opt { margin: 0; border-radius: 999px; padding: 9px 16px; }
.poll-widget--emoji .poll-opt input { position: absolute; opacity: 0; }
body.ui-squared .poll-donut, body.ui-squared .poll-donut::after, body.ui-squared .poll-leg__dot { border-radius: 50% !important; }

/* ===== Stats & Achievements page ===== */
.sx-tabs { display: flex; gap: 8px; flex-wrap: wrap; margin: 22px 0 24px; border-bottom: 1px solid color-mix(in srgb, var(--c-text) 12%, transparent); }
.sx-tab { display: inline-flex; align-items: center; gap: 8px; padding: 11px 18px; border: 0; background: none; color: var(--c-muted); font-family: inherit; font-size: 14px; font-weight: 700; cursor: pointer; border-bottom: 3px solid transparent; margin-bottom: -1px; }
.sx-tab:hover { color: var(--c-text); }
.sx-tab.active { color: var(--c-primary); border-bottom-color: var(--c-primary); }
.sx-pane { display: none; }
.sx-pane.active { display: block; animation: qcfade .2s ease; }
.sx-me { display: flex; gap: 22px; flex-wrap: wrap; align-items: center; background: var(--c-surface); border: 1px solid color-mix(in srgb, var(--c-text) 10%, transparent); border-radius: 16px; padding: 22px 24px; margin-bottom: 24px; }
.sx-me__rank { text-align: center; flex: none; }
.sx-me__lvl { font-family: var(--font-display); font-size: 20px; font-weight: 800; margin-top: 8px; }
.sx-me__pts { font-size: 13px; color: var(--c-primary); font-weight: 700; margin-top: 2px; }
.sx-me__prog { flex: 1; min-width: 240px; }
.sx-me__bar { height: 12px; background: color-mix(in srgb, var(--c-text) 10%, transparent); border-radius: 999px; overflow: hidden; }
.sx-me__bar span { display: block; height: 100%; background: var(--c-grad); border-radius: 999px; }
.sx-me__lbl { font-size: 13px; color: var(--c-muted); margin-top: 8px; }
.sx-me__lbl strong { color: var(--c-text); }
.sx-me__stats { display: flex; gap: 16px; flex-wrap: wrap; margin-top: 12px; font-size: 13px; color: var(--c-muted); }
.sx-me__stats strong { color: var(--c-text); }
.sx-me__count { margin-left: auto; background: color-mix(in srgb, var(--c-primary) 14%, transparent); color: var(--c-primary); font-weight: 800; padding: 2px 12px; border-radius: 999px; }
.sx-guest { background: color-mix(in srgb, var(--c-primary) 7%, transparent); border: 1px solid color-mix(in srgb, var(--c-primary) 25%, transparent); border-radius: 12px; padding: 16px 18px; margin-bottom: 24px; color: var(--c-text); font-size: 14px; }
.sx-guest i { color: var(--c-primary); margin-right: 6px; }
.sx-guest a { color: var(--c-primary); font-weight: 700; }
.sx-h { font-family: var(--font-display); font-size: 17px; margin: 0 0 16px; display: flex; align-items: center; gap: 9px; }
.sx-h i { color: var(--c-accent); }
.sx-h small { font-family: var(--font-sans); font-size: 12px; font-weight: 400; color: var(--c-muted); }
.sx-badges { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 14px; }
.sx-badge { background: var(--c-surface); border: 1px solid color-mix(in srgb, var(--c-text) 10%, transparent); border-radius: 14px; padding: 18px 14px; text-align: center; transition: transform .15s, box-shadow .15s; }
.sx-badge.is-earned:hover { transform: translateY(-3px); box-shadow: 0 10px 22px rgba(0,0,0,.14); }
.sx-badge.is-locked { opacity: .62; }
.sx-badge__ic { width: 52px; height: 52px; margin: 0 auto 10px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 22px; color: #fff; background: color-mix(in srgb, var(--c-text) 22%, transparent); box-shadow: 0 4px 12px rgba(0,0,0,.16); }
.sx-badge.is-locked .sx-badge__ic { background: color-mix(in srgb, var(--c-text) 16%, transparent); color: var(--c-muted); box-shadow: none; }
.sx-badge__nm { font-weight: 800; font-size: 14px; }
.sx-badge__how { display: none; }
.sx-badge__got { margin-top: 8px; font-size: 12px; font-weight: 700; color: #16a34a; }
.sx-badge__got i { margin-right: 3px; }
.sx-badge__todo { margin-top: 8px; font-size: 11.5px; color: var(--c-muted); line-height: 1.4; }
.sx-badge__prog { margin-top: 9px; width: 100%; }
.sx-badge__bar { height: 8px; border-radius: 999px; background: color-mix(in srgb, var(--c-text) 12%, transparent); overflow: hidden; }
.sx-badge__bar span { display: block; height: 100%; border-radius: 999px; background: linear-gradient(90deg, var(--c-primary), #22c55e); transition: width .4s ease; }
.sx-badge__pnum { margin-top: 5px; font-size: 11.5px; color: var(--c-muted); font-weight: 700; }
.sx-badge__pnum strong { color: var(--c-primary); }
.sx-badge__pnum span { font-weight: 400; opacity: .8; }
body.ui-squared .sx-badge__ic, body.ui-squared .sx-me__rank .rep-stars { border-radius: 50% !important; }

/* ===== Stats page ===== */
.st-totals { display: grid; grid-template-columns: repeat(5, 1fr); gap: 14px; margin: 24px 0 28px; }
.st-tot { background: var(--c-surface); border: 1px solid color-mix(in srgb, var(--c-text) 10%, transparent); border-radius: 16px; padding: 22px 18px; text-align: center; }
.st-tot .n { display: block; font-family: var(--font-display); font-weight: 800; font-size: 30px; color: var(--c-primary); line-height: 1; }
.st-tot .l { display: block; margin-top: 8px; font-size: 11px; color: var(--c-muted); text-transform: uppercase; letter-spacing: .1em; font-weight: 700; }
.st-tot--online { background: linear-gradient(135deg, color-mix(in srgb, #22c55e 16%, var(--c-surface)), var(--c-surface)); border-color: color-mix(in srgb, #22c55e 35%, transparent); }
.st-tot--online .n { color: #22c55e; }
.st-tot--online .l i { color: #22c55e; font-size: 7px; vertical-align: middle; animation: stPulse 1.6s infinite; }
@keyframes stPulse { 0%,100%{opacity:1;} 50%{opacity:.3;} }
.st-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.st-rank { list-style: none; margin: 0; padding: 0; }
.st-rank li { display: flex; align-items: center; gap: 12px; padding: 10px 4px; border-bottom: 1px dashed color-mix(in srgb, var(--c-text) 10%, transparent); }
.st-rank li:last-child { border-bottom: 0; }
.st-rank__no { width: 26px; height: 26px; flex: none; border-radius: 50%; background: color-mix(in srgb, var(--c-primary) 14%, transparent); color: var(--c-primary); font-weight: 800; font-size: 13px; display: inline-flex; align-items: center; justify-content: center; }
.st-rank li:nth-child(1) .st-rank__no { background: #f59e0b; color: #fff; }
.st-rank li:nth-child(2) .st-rank__no { background: #94a3b8; color: #fff; }
.st-rank li:nth-child(3) .st-rank__no { background: #b45309; color: #fff; }
.st-rank__user { display: flex; align-items: center; gap: 9px; flex: 1; min-width: 0; color: var(--c-text); font-weight: 700; font-size: 14px; }
.st-rank__user .ava { width: 30px; height: 30px; flex: none; border-radius: 50%; background-size: cover; background-position: center; }
.st-rank__user:hover { color: var(--c-primary); }
.st-rank__score { font-size: 11px; color: var(--c-muted); white-space: nowrap; }
.st-cats { display: flex; flex-wrap: wrap; gap: 8px; }
.st-cat { display: inline-flex; align-items: center; gap: 7px; padding: 8px 13px; border-radius: 999px; background: var(--c-bg); border: 1px solid color-mix(in srgb, var(--c-text) 12%, transparent); font-size: 13px; font-weight: 600; color: var(--c-text); }
.st-cat:hover { border-color: var(--c-primary); color: var(--c-primary); }
.st-cat strong { color: var(--c-primary); }
@media (max-width: 860px) { .st-totals { grid-template-columns: repeat(2, 1fr); } .st-grid { grid-template-columns: 1fr; } }

/* ===== Öne Çıkanlar / Top Deals (home, 4 cards) ===== */
/* ===== Öne Çıkanlar spotlight slider (tdx) ===== */
.tdx { margin: 28px 0 10px; --tdx-gap: 16px; }
.tdx__head { display: flex; align-items: center; gap: 14px; margin-bottom: 18px; }
.tdx__title { font-family: var(--font-display); font-size: clamp(20px, 2.4vw, 30px); margin: 0; display: flex; align-items: center; gap: 12px; text-transform: uppercase; letter-spacing: .01em; }
.tdx__title i { color: var(--c-primary); font-size: .9em; }
.tdx__head-r { margin-left: auto; display: flex; align-items: center; gap: 12px; }
.tdx__edit { font-size: 12.5px; font-weight: 700; color: var(--c-primary); text-decoration: none; }
.tdx__arrows { display: flex; gap: 8px; }
.tdx__nav { width: 42px; height: 42px; border-radius: 10px; border: 1px solid color-mix(in srgb, var(--c-text) 16%, transparent); background: var(--c-surface); color: var(--c-text); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; font-size: 15px; transition: background .15s, color .15s, border-color .15s; }
.tdx__nav:hover { background: var(--c-primary); color: #fff; border-color: var(--c-primary); }
.tdx__track { display: flex; gap: var(--tdx-gap); overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; -webkit-overflow-scrolling: touch; padding-bottom: 4px; scrollbar-width: none; }
.tdx__track::-webkit-scrollbar { display: none; }
.tdx__card { position: relative; flex: 0 0 calc((100% - (var(--tdx-cols, 4) - 1) * var(--tdx-gap)) / var(--tdx-cols, 4)); scroll-snap-align: start; aspect-ratio: 5 / 7; border-radius: 16px; overflow: hidden; background-size: cover; background-position: center; text-decoration: none; display: flex; align-items: flex-end; transition: transform .2s, box-shadow .2s; }
.tdx__card:hover { transform: translateY(-3px); }
.tdx__card--plain { background: linear-gradient(135deg, color-mix(in srgb, var(--c-primary) 90%, #000), color-mix(in srgb, var(--c-primary) 55%, #000)); }
.tdx__c-body { padding: 26px 24px; width: 100%; }
.tdx__kick { display: inline-block; font-size: 11px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; opacity: .9; margin-bottom: 8px; color: inherit; }
.tdx__c-title { font-family: var(--font-display); font-size: clamp(22px, 2vw, 32px); line-height: 1.08; margin: 0 0 8px; font-weight: 800; color: inherit; }
.tdx__c-sub { font-size: 14px; line-height: 1.45; margin: 0 0 14px; opacity: .92; color: inherit; }
.tdx__c-btn { display: inline-flex; align-items: center; gap: 8px; background: #fff; color: #111; font-weight: 800; font-size: 13px; letter-spacing: .03em; text-transform: uppercase; padding: 10px 18px; border-radius: 8px; transition: gap .15s; }
.tdx__card:hover .tdx__c-btn { gap: 12px; }
.tdx__card--empty { align-items: center; justify-content: center; flex-direction: column; gap: 8px; color: var(--c-muted); border: 2px dashed color-mix(in srgb, var(--c-text) 18%, transparent); background: var(--c-surface); text-align: center; }
.tdx__card--empty i { font-size: 30px; }
.tdx__dots { display: flex; justify-content: center; gap: 8px; margin-top: 16px; }
.tdx__dot { width: 9px; height: 9px; border-radius: 50%; border: 0; background: color-mix(in srgb, var(--c-text) 22%, transparent); cursor: pointer; padding: 0; transition: background .15s, transform .15s; }
.tdx__dot.is-active { background: var(--c-primary); transform: scale(1.25); }
@media (max-width: 900px) { .tdx__card { flex-basis: calc((100% - var(--tdx-gap)) / 2); } }
@media (max-width: 560px) { .tdx__card { flex-basis: 80%; } .tdx__c-title { font-size: 24px; } }
body.ui-squared .tdx__card, body.ui-squared .tdx__nav, body.ui-squared .tdx__c-btn { border-radius: var(--ui-radius, 3px) !important; }
body.ui-squared .tdx__dot { border-radius: 50% !important; }

.topdeals { margin: 26px 0 8px; }
.topdeals__head { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; }
.topdeals__head h2 { font-family: var(--font-display); font-size: 24px; margin: 0; text-transform: uppercase; letter-spacing: -.01em; display: flex; align-items: center; gap: 10px; }
.topdeals__head h2 i { color: var(--c-primary); }
.topdeals__edit { margin-left: auto; font-size: 12.5px; font-weight: 700; color: var(--c-primary); border: 1px solid color-mix(in srgb, var(--c-primary) 40%, transparent); border-radius: 8px; padding: 5px 12px; }
.topdeals__edit:hover { background: color-mix(in srgb, var(--c-primary) 10%, transparent); }
.topdeals__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }

/* Ella-style promo card: background image + dark overlay + text + CTA */
.deal-card { position: relative; display: block; border-radius: 16px; overflow: hidden; aspect-ratio: 3 / 2;
  background-size: cover; background-position: center; box-shadow: 0 6px 20px rgba(0,0,0,.10);
  transition: transform .2s ease, box-shadow .2s ease; isolation: isolate; }
.deal-card::after { content: ''; position: absolute; inset: 0; background: rgba(0,0,0,0); transition: background .2s; }
.deal-card:hover { transform: translateY(-5px); box-shadow: 0 18px 40px rgba(0,0,0,.20); }
.deal-card:hover::after { background: rgba(0,0,0,.06); }
.deal-card--plain { background-image: var(--c-grad); }
.deal-card__body { position: absolute; inset: 0; z-index: 1; display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-end; gap: 4px; padding: 18px 18px 20px; }
.deal-card__kick { font-family: var(--font-sans); font-size: 10.5px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; padding: 3px 9px; border-radius: 6px; background: var(--c-primary); color: #fff; margin-bottom: 4px; }
.deal-card__title { font-family: var(--font-display); font-size: 21px; line-height: 1.12; margin: 0; text-shadow: 0 2px 14px rgba(0,0,0,.45); }
.deal-card__sub { font-size: 13px; line-height: 1.4; margin: 0; opacity: .92; text-shadow: 0 1px 10px rgba(0,0,0,.5); }
.deal-card__btn { margin-top: 9px; display: inline-flex; align-items: center; gap: 7px; font-family: var(--font-sans); font-size: 12.5px; font-weight: 800; letter-spacing: .03em; text-transform: uppercase; background: rgba(255,255,255,.16); backdrop-filter: blur(4px); border: 1.5px solid currentColor; padding: 8px 16px; border-radius: 999px; transition: gap .18s, background .18s; }
.deal-card:hover .deal-card__btn { gap: 12px; background: rgba(255,255,255,.28); }
.deal-card--empty { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; aspect-ratio: 3 / 2; border-radius: 16px; border: 2px dashed color-mix(in srgb, var(--c-primary) 40%, transparent); color: var(--c-muted); font-weight: 600; font-size: 13px; text-align: center; background: color-mix(in srgb, var(--c-primary) 5%, transparent); }
.deal-card--empty i { font-size: 24px; opacity: .6; }
.deal-card--empty small { color: var(--c-muted); font-weight: 500; font-size: 11px; }
@media (max-width: 860px) { .topdeals__grid { grid-template-columns: 1fr 1fr; } .deal-card__title { font-size: 19px; } }
@media (max-width: 460px) { .topdeals__grid { grid-template-columns: 1fr; } }

/* ===== Home category strip module ===== */
/* ── New home modules (hm-*): shared head + howitworks / featured / leaders / faq / cta ── */
.hm { margin: 28px 0; }
.hm__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 16px; }
.hm__head h2 { display: flex; align-items: center; gap: 10px; margin: 0; font-family: var(--font-display); font-size: 21px; }
.hm__head h2 i { color: var(--c-primary); }
.hm__more { font-size: 13px; font-weight: 600; color: var(--c-primary); text-decoration: none; white-space: nowrap; }
.hm-howit__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.hm-step { position: relative; padding: 22px 18px 18px; background: var(--c-surface); border: 1px solid color-mix(in srgb, var(--c-text) 10%, transparent); border-radius: 16px; text-align: center; transition: transform .15s, box-shadow .15s; overflow: hidden; }
.hm-step:hover { transform: translateY(-4px); box-shadow: 0 18px 36px -24px rgba(0,0,0,.5); }
.hm-step::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 3px; background: var(--c); }
.hm-step__no { position: absolute; top: 12px; right: 14px; font-family: var(--font-display); font-size: 30px; font-weight: 800; color: color-mix(in srgb, var(--c) 16%, transparent); line-height: 1; }
.hm-step__ic { width: 54px; height: 54px; margin: 0 auto 12px; border-radius: 16px; display: grid; place-items: center; font-size: 22px; color: var(--c); background: color-mix(in srgb, var(--c) 14%, transparent); }
.hm-step h3 { margin: 0 0 7px; font-size: 15.5px; }
.hm-step p { margin: 0; font-size: 13px; line-height: 1.55; color: var(--c-muted); }
.hm-feat__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.hm-feat__card { position: relative; display: block; padding: 18px 18px 16px; background: var(--c-surface); border: 1px solid color-mix(in srgb, var(--c-text) 10%, transparent); border-radius: 14px; border-left: 3px solid var(--c-primary); text-decoration: none; transition: transform .15s, box-shadow .15s; }
.hm-feat__card:hover { transform: translateY(-3px); box-shadow: 0 16px 32px -24px rgba(0,0,0,.5); }
.hm-feat__rank { font-size: 12px; font-weight: 800; color: var(--c-primary); }
.hm-feat__card h3 { margin: 6px 0 12px; font-size: 15px; line-height: 1.4; color: var(--c-text); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; min-height: 42px; }
.hm-feat__meta { display: flex; gap: 16px; font-size: 12.5px; color: var(--c-muted); }
/* "Kitapta Yazmayan Bilgiler" — Öne Çıkanlar (.tdx) slider'ının birebir kopyası;
   ayrı CSS yok, topdeals ile aynı .tdx* sınıflarını kullanır. */
.hm-lead__grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 12px; }
.hm-lead__card { display: flex; flex-direction: column; align-items: center; gap: 7px; padding: 18px 10px 14px; background: var(--c-surface); border: 1px solid color-mix(in srgb, var(--c-text) 10%, transparent); border-radius: 14px; text-decoration: none; position: relative; transition: transform .15s, box-shadow .15s; }
.hm-lead__card:hover { transform: translateY(-3px); box-shadow: 0 14px 30px -22px rgba(0,0,0,.5); }
.hm-lead__rank { position: absolute; top: 9px; left: 9px; width: 22px; height: 22px; border-radius: 7px; display: grid; place-items: center; font-size: 12px; font-weight: 800; background: color-mix(in srgb, var(--c-text) 8%, transparent); color: var(--c-muted); }
.hm-lead__ava { width: 60px; height: 60px; border-radius: 50%; background: var(--c-bg) center/cover no-repeat; border: 2px solid color-mix(in srgb, var(--c-text) 10%, transparent); }
.hm-lead__nm { font-size: 13px; font-weight: 700; color: var(--c-text); text-align: center; white-space: nowrap; max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
.hm-lead__ct { font-size: 12px; color: var(--c-muted); }
.hm-faq__list { display: flex; flex-direction: column; gap: 10px; }
.hm-faq__item { background: var(--c-surface); border: 1px solid color-mix(in srgb, var(--c-text) 10%, transparent); border-radius: 12px; overflow: hidden; }
.hm-faq__item summary { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 15px 18px; cursor: pointer; font-weight: 600; font-size: 14.5px; list-style: none; }
.hm-faq__item summary::-webkit-details-marker { display: none; }
.hm-faq__item summary i { color: var(--c-muted); transition: transform .2s; flex: none; }
.hm-faq__item[open] summary i { transform: rotate(180deg); }
.hm-faq__item[open] summary { color: var(--c-primary); }
.hm-faq__a { padding: 0 18px 16px; font-size: 13.5px; line-height: 1.65; color: var(--c-muted); }
.hm-cta { position: relative; overflow: hidden; margin: 28px 0; padding: 30px 32px; border-radius: 18px; color: #fff; background: linear-gradient(120deg, var(--c-primary) 0%, var(--c-grad-2, #0d162e) 100%); box-shadow: 0 18px 44px -22px color-mix(in srgb, var(--c-primary) 75%, transparent); }
.hm-cta__glow { position: absolute; width: 320px; height: 320px; right: -80px; top: -120px; border-radius: 50%; background: rgba(255,255,255,.12); }
.hm-cta__in { position: relative; z-index: 1; display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap; }
.hm-cta__tx h2 { margin: 0 0 6px; font-family: var(--font-display); font-size: 23px; }
.hm-cta__tx p { margin: 0; opacity: .92; font-size: 14.5px; max-width: 620px; }
.hm-cta__btn { display: inline-flex; align-items: center; gap: 9px; background: #fff; color: var(--c-primary); border: 0; padding: 13px 24px; border-radius: 12px; font-weight: 800; font-size: 15px; cursor: pointer; text-decoration: none; transition: transform .15s, box-shadow .15s; white-space: nowrap; }
.hm-cta__btn:hover { transform: translateY(-2px); box-shadow: 0 14px 30px -16px rgba(0,0,0,.5); }
@media (max-width: 960px){ .hm-howit__grid, .hm-feat__grid { grid-template-columns: repeat(2,1fr); } .hm-lead__grid { grid-template-columns: repeat(3,1fr); } }
@media (max-width: 560px){ .hm-howit__grid, .hm-feat__grid { grid-template-columns: 1fr; } .hm-lead__grid { grid-template-columns: repeat(2,1fr); } .hm-cta__in { flex-direction: column; align-items: flex-start; } }
body.ui-squared .hm-step, body.ui-squared .hm-feat__card, body.ui-squared .hm-lead__card, body.ui-squared .hm-faq__item, body.ui-squared .hm-cta, body.ui-squared .hm-step__ic, body.ui-squared .hm-cta__btn { border-radius: var(--ui-radius, 4px); }

.home-cats { margin: 22px 0 8px; }
.home-cats__grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px; }
.home-cat { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 18px 10px; background: var(--c-surface); border: 1px solid color-mix(in srgb, var(--c-text) 10%, transparent); border-radius: 14px; text-align: center; transition: transform .15s, border-color .15s, box-shadow .15s; }
.home-cat:hover { transform: translateY(-3px); border-color: var(--c-primary); box-shadow: 0 10px 24px rgba(0,0,0,.1); }
.home-cat__ic { width: 46px; height: 46px; border-radius: 13px; display: inline-flex; align-items: center; justify-content: center; color: #fff; font-size: 19px; background: var(--c-grad); }
.home-cat__nm { font-size: 13px; font-weight: 700; color: var(--c-text); }
.home-cat__ct { font-size: 11px; font-weight: 800; color: var(--c-primary); background: color-mix(in srgb, var(--c-primary) 12%, transparent); padding: 1px 9px; border-radius: 999px; }
@media (max-width: 860px) { .home-cats__grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 480px) { .home-cats__grid { grid-template-columns: repeat(2, 1fr); } }

/* ===== Home stats strip module ===== */
.home-stats { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 22px; background: var(--c-surface); border: 1px solid color-mix(in srgb, var(--c-text) 10%, transparent); border-radius: 14px; padding: 14px 20px; margin: 22px 0 8px; }
.home-stat { font-size: 13.5px; color: var(--c-muted); display: inline-flex; align-items: center; gap: 7px; }
.home-stat strong { color: var(--c-text); font-family: var(--font-display); font-size: 16px; }
.home-stat i { color: var(--c-muted); }
.home-stat--link { margin-left: auto; color: var(--c-primary); font-weight: 700; }
.home-stat--link i { color: var(--c-primary); }

/* ===== Promo sub-banners (home) ===== */
.promo-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin: 24px 0 8px; }
.promo-banner { display: block; border-radius: 14px; overflow: hidden; box-shadow: 0 6px 20px rgba(0,0,0,.08); transition: transform .18s, box-shadow .18s; }
.promo-banner:hover { transform: translateY(-3px); box-shadow: 0 14px 34px rgba(0,0,0,.14); }
.promo-banner img { width: 100%; height: 100%; object-fit: cover; display: block; }
.promo-banner--empty { display: flex; align-items: center; justify-content: center; gap: 10px; min-height: 120px; border: 2px dashed color-mix(in srgb, var(--c-primary) 40%, transparent); color: var(--c-muted); font-weight: 600; font-size: 13px; background: color-mix(in srgb, var(--c-primary) 5%, transparent); }
@media (max-width: 760px) { .promo-row { grid-template-columns: 1fr; } }

/* ===== Category nav bar (Ella-style) ===== */
.catbar { background: var(--c-surface); border-bottom: 1px solid color-mix(in srgb, var(--c-text) 10%, transparent); border-top: 1px solid color-mix(in srgb, var(--c-text) 6%, transparent); position: relative; z-index: 40; }
.catbar__inner { display: flex; align-items: stretch; gap: 14px; min-height: 50px; }
.catbar__all { position: relative; display: flex; align-items: center; }
.catbar__all-btn { display: inline-flex; align-items: center; gap: 9px; height: 100%; padding: 0 18px; background: var(--c-grad); color: #fff; border: 0; font-family: var(--font-display); font-weight: 800; font-size: 13px; text-transform: uppercase; letter-spacing: .04em; cursor: pointer; white-space: nowrap; }
.catbar__caret { font-size: 10px; transition: transform .2s; }
.catbar__all:hover .catbar__caret, .catbar__all:focus-within .catbar__caret { transform: rotate(180deg); }
.catbar__mega { position: absolute; top: 100%; left: 0; width: var(--catbar-mega-w, 570px); max-width: 94vw; background: var(--c-surface); border: 1px solid color-mix(in srgb, var(--c-text) 12%, transparent); border-radius: 0 0 14px 14px; box-shadow: 0 24px 60px rgba(0,0,0,.3); padding: 12px; display: grid; grid-template-columns: 1fr 1fr; gap: 4px; opacity: 0; visibility: hidden; transform: translateY(8px); transition: opacity .18s, transform .18s, visibility .18s; z-index: 60; }
/* ── "Tüm Kategoriler" paneli ŞABLONLARI (catbar_mega_style) ── */
.catbar__mega--grid3 { grid-template-columns: 1fr 1fr 1fr; }
.catbar__mega--list { grid-template-columns: 1fr; gap: 1px; }
.catbar__mega--list a { border-radius: 8px; }
.catbar__mega--list a + a { border-top: 1px solid color-mix(in srgb, var(--c-text) 8%, transparent); }
.catbar__mega--rich { grid-template-columns: 1fr 1fr; gap: 6px; padding: 14px; background: linear-gradient(160deg, color-mix(in srgb, var(--c-primary) 7%, var(--c-surface)), var(--c-surface)); }
.catbar__mega--rich a { background: color-mix(in srgb, var(--c-text) 3%, transparent); }
.catbar__mega--rich .catbar__mega-ico { box-shadow: 0 6px 16px -8px color-mix(in srgb, var(--c-primary) 80%, transparent); }
.catbar__all:hover .catbar__mega, .catbar__all:focus-within .catbar__mega { opacity: 1; visibility: visible; transform: translateY(0); }
.catbar__mega a { display: flex; align-items: center; gap: 11px; padding: 10px 12px; border-radius: 10px; color: var(--c-text); transition: background .15s; }
.catbar__mega a:hover { background: color-mix(in srgb, var(--c-primary) 9%, transparent); }
.catbar__mega-ico { width: 36px; height: 36px; flex: none; border-radius: 9px; display: inline-flex; align-items: center; justify-content: center; font-size: 15px; color: #fff; background: var(--c-grad); }
.catbar__mega-txt { display: flex; flex-direction: column; font-weight: 700; font-size: 13.5px; line-height: 1.2; }
.catbar__mega-txt small { font-weight: 500; font-size: 11px; color: var(--c-muted); margin-top: 2px; }
.catbar__links { display: flex; align-items: center; justify-content: center; gap: 2px; flex: 1; overflow-x: auto; scrollbar-width: none; }
.catbar__links::-webkit-scrollbar { display: none; }
.catbar__links a { display: inline-flex; align-items: center; gap: 7px; padding: 8px 12px; border-radius: 8px; color: var(--c-soft, var(--c-text)); font-size: 13px; font-weight: 600; white-space: nowrap; transition: background .15s, color .15s; }
.catbar__links a:hover { background: color-mix(in srgb, var(--c-primary) 9%, transparent); color: var(--c-primary); }
.catbar__links a i { font-size: 12px; color: var(--c-muted); }
.catbar__links a:hover i { color: var(--c-primary); }
/* Header alt menü — Görünüm anahtarları (catbar_uppercase / catbar_dots) */
.catbar--upper .catbar__links a { text-transform: uppercase; letter-spacing: .035em; font-size: 12.5px; }
.catbar__dot { display: none; }
.catbar--dots .catbar__dot { display: inline-flex; align-items: center; color: color-mix(in srgb, var(--c-text) 35%, transparent); font-weight: 800; font-size: 13px; flex: none; user-select: none; padding: 0 4px; }
.catbar--dots .catbar__links { gap: 0; }
/* buton-stil menü öğeleri (catbar_style=button) — "Tüm Kategoriler" butonuna eş görünüm */
.catbar--btns .catbar__links a { background: color-mix(in srgb, var(--c-primary) 10%, transparent); border-radius: 9px; padding: 13px 18px; font-family: var(--font-display); font-weight: 800; font-size: 13px; text-transform: uppercase; letter-spacing: .04em; color: var(--c-text); }
.catbar--btns .catbar__links a i { color: var(--c-primary); }
.catbar--btns .catbar__links a:hover { background: var(--c-grad, var(--c-primary)); color: #fff; }
.catbar--btns .catbar__links a:hover i { color: #fff; }
body.ui-squared .catbar--btns .catbar__links a { border-radius: 3px; }
.catbar__more { color: var(--c-primary) !important; font-weight: 800 !important; }
/* Soru Sor — varsayılan ALTIN (#c2aa47) geçişli; sağa yaslı, header butonlarıyla hizalı.
   Renkler Görünüm → Header Alt Menü'den, efekt catbar_ask_fx ile değiştirilebilir. */
.catbar__ask { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 0 20px; min-width: 148px; margin-left: auto; background: linear-gradient(120deg, #dcc566, #c2aa47 45%, #9a842b); color: #241c04 !important; font-family: var(--font-display); font-weight: 800; font-size: 12.5px; text-transform: uppercase; letter-spacing: .03em; white-space: nowrap; align-self: center; height: 36px; border-radius: 999px; position: relative; overflow: hidden; transition: filter .15s, transform .12s; }
.catbar__ask:hover { filter: brightness(1.08); transform: translateY(-1px); }
body.ui-squared .catbar__ask { border-radius: var(--ui-radius, 4px); }
/* dış çizgi (Görünüm → Header Alt Menü → catbar_ask_outline) — altına ince siyah kontur */
.catbar__ask--outline { border: 2px solid rgba(12, 9, 2, .85); }
/* ── Soru Sor ŞABLONLARI (catbar_ask_style) — gold (varsayılan/base) + 7 stil ── */
.catbar__ask--st-primary { background: var(--c-primary); color: var(--c-on-primary, #fff) !important; }
.catbar__ask--st-gradient { background: var(--c-grad, linear-gradient(120deg, var(--c-primary), var(--c-grad-2, #0d162e))); color: var(--c-on-primary, #fff) !important; }
.catbar__ask--st-ghost { background: transparent; color: var(--c-primary) !important; border: 2px solid var(--c-primary); }
.catbar__ask--st-glass { background: color-mix(in srgb, var(--c-primary) 22%, transparent); color: var(--c-text) !important; border: 1px solid color-mix(in srgb, var(--c-primary) 45%, transparent); backdrop-filter: blur(8px); }
.catbar__ask--st-neon { background: rgba(8,10,18,.9); color: #fff !important; border: 1.5px solid var(--c-primary); box-shadow: 0 0 14px color-mix(in srgb, var(--c-primary) 60%, transparent), inset 0 0 12px color-mix(in srgb, var(--c-primary) 25%, transparent); text-shadow: 0 0 8px color-mix(in srgb, var(--c-primary) 85%, transparent); }
.catbar__ask--st-raised { background: linear-gradient(180deg, #dcc566, #b89a3c); color: #241c04 !important; box-shadow: 0 4px 0 #8a7322, 0 8px 16px -6px rgba(0,0,0,.5); }
.catbar__ask--st-raised:hover { transform: translateY(1px); box-shadow: 0 3px 0 #8a7322, 0 6px 12px -6px rgba(0,0,0,.5); }
.catbar__ask--st-dark { background: #14110a; color: #dcc566 !important; border: 1px solid color-mix(in srgb, #dcc566 40%, transparent); }
/* efektler (catbar_ask_fx: shimmer | pulse | glow | none) */
.catbar__ask--fx-shimmer::after { content: ''; position: absolute; top: 0; bottom: 0; left: -80%; width: 55%; background: linear-gradient(100deg, transparent 0%, rgba(255,255,255,.55) 50%, transparent 100%); transform: skewX(-22deg); animation: askShine 2.8s ease-in-out infinite; }
@keyframes askShine { 0% { left: -80%; } 55% { left: 130%; } 100% { left: 130%; } }
.catbar__ask--fx-pulse { animation: askPulse 2.2s ease-in-out infinite; }
@keyframes askPulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(194,170,71,.55); } 50% { box-shadow: 0 0 0 9px rgba(194,170,71,0); } }
.catbar__ask--fx-glow { animation: askGlow 2.6s ease-in-out infinite; }
@keyframes askGlow { 0%, 100% { box-shadow: 0 0 10px rgba(194,170,71,.35); } 50% { box-shadow: 0 0 26px rgba(194,170,71,.85); } }
@media (max-width: 900px) { .catbar__ask { display: none; } .catbar__all-btn { padding: 0 13px; font-size: 12px; } }
@media (max-width: 600px) { .catbar__all-btn span, .catbar__all-btn { font-size: 0; } .catbar__all-btn i.fa-bars { font-size: 16px; } .catbar__caret { display: none; } }

/* ===== Contact page ===== */
.contact-grid { display: grid; grid-template-columns: 360px 1fr; gap: 24px; align-items: start; }
.contact-side { display: flex; flex-direction: column; gap: 12px; }
.contact-method { display: flex; align-items: center; gap: 14px; background: var(--c-surface); border: 1px solid color-mix(in srgb, var(--c-text) 10%, transparent); border-radius: 14px; padding: 16px 18px; transition: transform .15s, border-color .15s, box-shadow .15s; }
.contact-method:hover { transform: translateY(-2px); box-shadow: 0 10px 24px rgba(0,0,0,.1); }
.contact-method__ic { width: 48px; height: 48px; flex: none; border-radius: 13px; display: inline-flex; align-items: center; justify-content: center; color: #fff; font-size: 21px; }
.contact-method--wa .contact-method__ic { background: #25d366; }
.contact-method--mail .contact-method__ic { background: var(--c-grad); }
.contact-method--phone .contact-method__ic { background: #0ea5e9; }
.contact-method--tg .contact-method__ic { background: #229ed9; }
.contact-method--ig .contact-method__ic { background: linear-gradient(45deg,#f09433,#e6683c,#dc2743,#cc2366,#bc1888); }
.contact-method__b { flex: 1; display: flex; flex-direction: column; }
.contact-method__b strong { font-size: 15px; color: var(--c-text); }
.contact-method__b small { font-size: 13px; color: var(--c-muted); }
.contact-method__go { color: var(--c-muted); }
.contact-method:hover .contact-method__go { color: var(--c-primary); }
.contact-note { background: color-mix(in srgb, var(--c-primary) 6%, transparent); border: 1px solid color-mix(in srgb, var(--c-primary) 20%, transparent); border-radius: 12px; padding: 14px 16px; font-size: 13px; color: var(--c-muted); line-height: 1.55; }
.contact-note i { color: var(--c-primary); margin-right: 5px; }
.contact-formbox { background: var(--c-surface); border: 1px solid color-mix(in srgb, var(--c-text) 10%, transparent); border-radius: 16px; padding: 28px; }
.contact-formbox h3 { font-family: var(--font-display); font-size: 20px; margin: 0 0 16px; text-transform: uppercase; }
.contact-formbox label { display: block; font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .12em; color: var(--c-muted); margin: 14px 0 6px; }
.contact-formbox input, .contact-formbox textarea, .contact-formbox .contact-select { width: 100%; padding: 13px 15px; background: var(--c-bg); color: var(--c-text); border: 1px solid color-mix(in srgb, var(--c-text) 16%, transparent); border-radius: 10px; font-family: inherit; font-size: 15px; resize: vertical; }
.contact-formbox input:focus, .contact-formbox textarea:focus, .contact-formbox .contact-select:focus { outline: none; border-color: var(--c-primary); }
.contact-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
@media (max-width: 820px) { .contact-grid { grid-template-columns: 1fr; } .contact-row { grid-template-columns: 1fr; } }

/* ===== Categories ===== */
.crumb { display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--c-muted); margin-bottom: 18px; flex-wrap: wrap; }
.crumb a { color: var(--c-muted); } .crumb a:hover { color: var(--c-primary); }
.crumb i { font-size: 9px; opacity: .6; } .crumb span { color: var(--c-text); font-weight: 600; }
/* semantic breadcrumb (ol/li) used by breadcrumb() helper */
.breadcrumb { margin: 0 0 16px; }
.breadcrumb ol { list-style: none; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0; padding: 0; font-size: 12.5px; color: var(--c-muted); }
.breadcrumb li { display: inline-flex; align-items: center; gap: 8px; min-width: 0; }
.breadcrumb li:not(:first-child)::before { content: '\203A'; color: var(--c-muted); opacity: .55; }
.breadcrumb a { color: var(--c-muted); } .breadcrumb a:hover { color: var(--c-primary); }
.breadcrumb [aria-current="page"] { color: var(--c-text); font-weight: 600; max-width: 60vw; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Related questions (soru sayfası alt bölümü) */
.related-q { margin-top: 36px; }
.related-q__head { font-family: var(--font-display); font-size: 20px; text-transform: uppercase; letter-spacing: -.01em; display: flex; align-items: center; gap: 10px; margin: 0 0 16px; }
.related-q__head i { color: var(--c-primary); }
.related-q__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.rq-card { display: flex; flex-direction: column; gap: 7px; background: var(--c-surface); border: 1px solid color-mix(in srgb, var(--c-text) 10%, transparent); border-radius: 14px; padding: 16px 18px; transition: transform .15s, border-color .15s, box-shadow .15s; }
.rq-card:hover { transform: translateY(-3px); border-color: var(--c-primary); box-shadow: 0 8px 22px rgba(0,0,0,.08); }
.rq-card h3 { font-size: 15px; font-weight: 700; margin: 0; color: var(--c-text); line-height: 1.35; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rq-card p { font-size: 13px; color: var(--c-muted); margin: 0; line-height: 1.5; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rq-card .rq-meta { font-size: 11.5px; color: var(--c-muted); margin-top: auto; display: flex; flex-wrap: wrap; gap: 0; align-items: center; }
.rq-card .rq-meta span { display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; padding: 0 11px; }
.rq-card .rq-meta span:first-child { padding-left: 0; }
/* benzer soru meta öğeleri (cevap / görüntülenme / tarih) arasına ince çizgi */
.rq-card .rq-meta span + span { border-left: 1px solid color-mix(in srgb, var(--c-text) 18%, transparent); }
.rq-card .rq-meta i { color: var(--c-primary); }
@media (max-width: 560px) { .related-q__grid { grid-template-columns: 1fr; } }
body.ui-squared .rq-card { border-radius: 3px; }
.cat-head { margin-bottom: 26px; }
.cat-head .eyebrow { color: var(--c-primary); font-weight: 800; font-size: 12px; letter-spacing: .18em; }
.cat-head h1 { font-family: var(--font-display); font-size: 34px; margin: 8px 0 6px; text-transform: uppercase; letter-spacing: -.01em; }
.cat-head p { color: var(--c-muted); font-size: 15px; margin: 0; }
.cat-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 14px; }
.cat-card { display: flex; align-items: center; gap: 14px; background: var(--c-surface); border: 1px solid color-mix(in srgb, var(--c-text) 10%, transparent); border-radius: 16px; padding: 18px 20px; box-shadow: 0 1px 2px rgba(0,0,0,.04), 0 8px 22px rgba(0,0,0,.05); transition: transform .15s, box-shadow .15s, border-color .15s; }
.cat-card:hover { transform: translateY(-3px); border-color: var(--c-primary); box-shadow: 0 6px 14px rgba(0,0,0,.07), 0 18px 40px rgba(0,0,0,.1); }
.cat-card__ico { width: 52px; height: 52px; flex: none; border-radius: 14px; display: inline-flex; align-items: center; justify-content: center; font-size: 22px; color: #fff; background: var(--c-grad); }
.cat-card__body { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.cat-card__body strong { font-size: 16px; color: var(--c-text); }
.cat-card__body small { font-size: 12.5px; color: var(--c-muted); margin-top: 2px; }
.cat-card__count { flex: none; background: color-mix(in srgb, var(--c-primary) 12%, transparent); color: var(--c-primary); font-weight: 800; font-size: 14px; padding: 4px 12px; border-radius: 999px; }
/* ── Category hero + chip strip (kategori sayfası) ─────────────────────── */
.cathero { display: flex; align-items: center; gap: 18px; padding: 24px 26px; border-radius: 18px; color: #fff; background: linear-gradient(120deg, var(--c-primary) 0%, var(--c-grad-2, #0d162e) 100%); box-shadow: 0 16px 40px -22px color-mix(in srgb, var(--c-primary) 75%, transparent); margin: 14px 0 16px; }
.cathero__ic { flex: none; width: 64px; height: 64px; border-radius: 18px; display: grid; place-items: center; font-size: 28px; background: rgba(255,255,255,.16); }
.cathero__tx { flex: 1; min-width: 0; }
.cathero__tx h1 { margin: 0 0 5px; font-family: var(--font-display); font-size: 25px; }
.cathero__tx p { margin: 0; opacity: .92; font-size: 14px; line-height: 1.5; }
.cathero__stat { flex: none; text-align: center; padding-left: 18px; border-left: 1px solid rgba(255,255,255,.25); }
.cathero__stat strong { display: block; font-family: var(--font-display); font-size: 28px; font-weight: 800; line-height: 1; }
.cathero__stat span { font-size: 12px; opacity: .85; text-transform: uppercase; letter-spacing: .05em; }
.catchips { display: flex; gap: 8px; overflow-x: auto; padding: 4px 2px 14px; margin-bottom: 6px; scrollbar-width: thin; }
.catchip { flex: none; display: inline-flex; align-items: center; gap: 7px; padding: 8px 14px; border-radius: 999px; background: var(--c-surface); border: 1px solid color-mix(in srgb, var(--c-text) 12%, transparent); color: var(--c-text); text-decoration: none; font-size: 13px; font-weight: 600; white-space: nowrap; transition: border-color .15s, color .15s, background .15s; }
.catchip:hover { border-color: var(--c-primary); color: var(--c-primary); }
.catchip.is-active { background: var(--c-primary); border-color: var(--c-primary); color: #fff; }
.catchip__n { font-size: 11px; font-weight: 800; padding: 1px 7px; border-radius: 999px; background: color-mix(in srgb, var(--c-text) 8%, transparent); color: var(--c-muted); }
.catchip.is-active .catchip__n { background: rgba(255,255,255,.22); color: #fff; }
.catchip i { font-size: 12px; opacity: .85; }
@media (max-width: 600px) { .cathero { flex-wrap: wrap; } .cathero__stat { border-left: 0; padding-left: 0; } }
body.ui-squared .cathero, body.ui-squared .cathero__ic { border-radius: var(--ui-radius, 4px); }

/* ── Profile cover hero (profil sayfası) ──────────────────────────────── */
.phero { position: relative; background: var(--c-surface); border: 1px solid color-mix(in srgb, var(--c-text) 10%, transparent); border-radius: 18px; overflow: hidden; margin-bottom: 24px; }
.phero__band { height: 96px; background: linear-gradient(120deg, var(--c-primary) 0%, var(--c-grad-2, #0d162e) 100%); }
.phero__body { display: flex; align-items: flex-end; gap: 20px; padding: 0 26px 18px; margin-top: -44px; flex-wrap: wrap; }
.phero__ava { flex: none; width: 104px; height: 104px; border-radius: 50%; background: var(--c-surface) center/cover no-repeat; border: 4px solid var(--c-surface); box-shadow: 0 8px 20px -8px rgba(0,0,0,.4); }
.phero__id { flex: 1; min-width: 200px; padding-bottom: 4px; }
.phero__id h1 { margin: 0 0 6px; font-family: var(--font-display); font-size: 24px; }
.phero__rank { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.phero__rlabel { font-weight: 700; font-size: 13.5px; color: var(--c-text); }
.phero__pts { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 700; color: var(--c-primary); background: color-mix(in srgb, var(--c-primary) 12%, transparent); padding: 3px 10px; border-radius: 999px; }
.phero__stats { display: flex; gap: 10px; padding-bottom: 4px; }
.phero__stats > div { text-align: center; min-width: 62px; padding: 8px 6px; background: var(--c-bg); border: 1px solid color-mix(in srgb, var(--c-text) 9%, transparent); border-radius: 12px; }
.phero__stats strong { display: block; font-family: var(--font-display); font-size: 19px; font-weight: 800; color: var(--c-text); line-height: 1.1; }
.phero__stats span { font-size: 11px; color: var(--c-muted); }
.phero__foot { display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 13px 26px; border-top: 1px solid color-mix(in srgb, var(--c-text) 9%, transparent); background: color-mix(in srgb, var(--c-text) 2.5%, var(--c-surface)); flex-wrap: wrap; }
.phero__joined { font-size: 12.5px; color: var(--c-muted); }
.phero__prog { display: flex; align-items: center; gap: 12px; flex: 1; min-width: 220px; max-width: 460px; }
.phero__prog-bar { flex: 1; height: 7px; border-radius: 999px; background: color-mix(in srgb, var(--c-text) 10%, transparent); overflow: hidden; }
.phero__prog-bar span { display: block; height: 100%; border-radius: 999px; background: var(--c-grad, var(--c-primary)); }
.phero__prog-lbl { font-size: 12px; color: var(--c-muted); white-space: nowrap; }
.phero__prog-lbl strong { color: var(--c-text); }
.dash-bio i { color: var(--c-primary); margin-right: 4px; }
@media (max-width: 560px) { .phero__body { justify-content: center; text-align: center; } .phero__stats { flex-wrap: wrap; justify-content: center; } .phero__foot { justify-content: center; } }
body.ui-squared .phero, body.ui-squared .phero__stats > div, body.ui-squared .phero__pts { border-radius: var(--ui-radius, 4px); }

.cat-banner { display: flex; align-items: center; gap: 18px; background: var(--c-surface); border: 1px solid color-mix(in srgb, var(--c-text) 10%, transparent); border-left: 5px solid var(--c-primary); border-radius: 16px; padding: 24px 26px; margin-bottom: 24px; }
.cat-banner__ico { width: 60px; height: 60px; flex: none; border-radius: 16px; display: inline-flex; align-items: center; justify-content: center; font-size: 26px; color: #fff; background: var(--c-grad); }
.cat-banner h1 { font-family: var(--font-display); font-size: 28px; margin: 0 0 4px; text-transform: uppercase; }
.cat-banner p { color: var(--c-muted); font-size: 14px; margin: 0 0 6px; }
.cat-banner__count { font-size: 12px; font-weight: 700; color: var(--c-primary); text-transform: uppercase; letter-spacing: .1em; }
@media (max-width: 560px) { .cat-head h1 { font-size: 26px; } .cat-banner { flex-direction: column; text-align: center; } }

/* ===== Hesabım activity pages ===== */
/* ===== Unified account hub (Profilim / Sorularım / Bildirimler … one shell) ===== */
.acc-hub { display: grid; grid-template-columns: 270px 1fr; gap: 24px; align-items: start; }
.acc-hub__side { background: var(--c-surface); border: 1px solid color-mix(in srgb, var(--c-text) 10%, transparent); border-radius: 16px; padding: 16px; position: sticky; top: 96px; }
.acc-hub__user { display: flex; align-items: center; gap: 12px; padding: 6px 6px 14px; text-decoration: none; border-bottom: 1px solid color-mix(in srgb, var(--c-text) 9%, transparent); margin-bottom: 12px; }
.acc-hub__ava { width: 48px; height: 48px; flex: none; border-radius: 50%; background-size: cover; background-position: center; box-shadow: 0 2px 8px rgba(0,0,0,.12); }
.acc-hub__name { font-weight: 800; color: var(--c-text); font-size: 15px; line-height: 1.2; }
.acc-hub__role { font-size: 11px; color: var(--c-muted); text-transform: uppercase; letter-spacing: .08em; margin-top: 2px; }
.acc-hub__nav { display: flex; flex-direction: column; gap: 3px; }
.acc-hub__link { display: flex; align-items: center; gap: 11px; padding: 10px 12px; border-radius: 10px; color: var(--c-text); text-decoration: none; font-size: 14px; font-weight: 600; transition: background .15s, color .15s; }
.acc-hub__link i { width: 18px; text-align: center; color: var(--c-muted); }
.acc-hub__link:hover { background: color-mix(in srgb, var(--c-primary) 8%, transparent); }
.acc-hub__link.is-active { background: var(--c-primary); color: #fff; }
.acc-hub__link.is-active i { color: #fff; }
.acc-hub__link--admin { color: var(--c-primary); }
.acc-hub__n { margin-left: auto; background: color-mix(in srgb, var(--c-primary) 16%, transparent); color: var(--c-primary); font-size: 11px; font-weight: 800; padding: 1px 8px; border-radius: 999px; }
.acc-hub__link.is-active .acc-hub__n { background: rgba(255,255,255,.25); color: #fff; }
.acc-hub__logout { margin-top: 12px; padding-top: 12px; border-top: 1px solid color-mix(in srgb, var(--c-text) 9%, transparent); }
.acc-hub__logout button { width: 100%; display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 10px; border: 1px solid color-mix(in srgb, #ef4444 40%, transparent); background: color-mix(in srgb, #ef4444 8%, transparent); color: #dc2626; font-weight: 700; border-radius: 10px; cursor: pointer; font-size: 13.5px; }
.acc-hub__logout button:hover { background: color-mix(in srgb, #ef4444 16%, transparent); }
.acc-hub__main { min-width: 0; }
.acc-hub__head { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin: 0 0 18px; }
.acc-hub__head h1 { font-family: var(--font-display); font-size: 22px; margin: 0; display: flex; align-items: center; gap: 10px; }
.acc-hub__head h1 i { color: var(--c-accent); }
.acc-hub__head .inline { margin-left: auto; }
.acc-hub__count { font-family: var(--font-sans); font-size: 12px; font-weight: 800; color: var(--c-primary); background: color-mix(in srgb, var(--c-primary) 14%, transparent); padding: 2px 10px; border-radius: 999px; }
.acc-card { background: var(--c-surface); border: 1px solid color-mix(in srgb, var(--c-text) 10%, transparent); border-radius: 14px; padding: 20px 22px; margin-bottom: 16px; }
.acc-card h3 { display: flex; align-items: center; gap: 9px; font-family: var(--font-display); font-size: 16px; margin: 0 0 14px; }
.acc-card h3 i { color: var(--c-accent); }
.acc-form label { display: block; font-size: 12px; font-weight: 700; color: var(--c-text); margin: 12px 0 5px; }
.acc-form input[type=text], .acc-form input[type=email], .acc-form input[type=password], .acc-form input[type=number], .acc-form input[type=tel], .acc-form input[type=url], .acc-form input[type=search], .acc-form textarea { width: 100%; padding: 11px 13px; border: 1px solid color-mix(in srgb, var(--c-text) 14%, transparent); border-radius: 9px; background: var(--c-bg); color: var(--c-text); font-family: inherit; font-size: 14px; }

/* ── Global form-control baseline — no field is ever left unstyled (bare element
   selectors = lowest specificity, so any component class still overrides) ─── */
input[type=text], input[type=email], input[type=password], input[type=number],
input[type=tel], input[type=url], input[type=search], input[type=date],
input[type=datetime-local], input[type=month], input[type=time], textarea, select {
  font-family: inherit; font-size: 14px; color: var(--c-text);
  background: var(--c-bg);
  border: 1px solid color-mix(in srgb, var(--c-text) 16%, transparent);
  border-radius: var(--ui-radius, 8px); padding: 10px 12px;
  transition: border-color .15s, box-shadow .15s;
}
input:focus, textarea:focus, select:focus { outline: none; border-color: var(--c-primary); box-shadow: 0 0 0 3px color-mix(in srgb, var(--c-primary) 18%, transparent); }
select {
  -webkit-appearance: none; appearance: none; cursor: pointer; padding-right: 34px;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23889' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'><path d='M6 9l6 6 6-6'/></svg>");
  background-repeat: no-repeat; background-position: right 12px center;
}
.acc-form textarea { min-height: 90px; resize: vertical; }
.acc-form .row { margin-top: 14px; }
.acc-grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.acc-2fa { margin-top: 16px; padding: 14px 16px; background: var(--c-bg); border: 1px solid color-mix(in srgb, var(--c-text) 12%, transparent); border-radius: 10px; }
.acc-2fa label { display: flex; align-items: center; gap: 12px; margin: 0; cursor: pointer; }
.acc-2fa strong { display: block; font-size: 14px; }
.acc-2fa small { color: var(--c-muted); font-size: 12px; }
.acc-q-list { list-style: none; margin: 0; padding: 0; }
.acc-q-list li { padding: 11px 0; border-bottom: 1px solid color-mix(in srgb, var(--c-text) 8%, transparent); }
.acc-q-list li:last-child { border-bottom: 0; }
.acc-q-list .title { font-weight: 600; color: var(--c-text); text-decoration: none; }
.acc-q-list .title:hover { color: var(--c-primary); }
.acc-q-list .meta { font-size: 12px; color: var(--c-muted); margin-top: 3px; }
.acc-empty { text-align: center; padding: 50px 20px; color: var(--c-muted); background: var(--c-surface); border: 1px dashed color-mix(in srgb, var(--c-text) 14%, transparent); border-radius: 14px; }
.acc-empty i { font-size: 40px; opacity: .5; display: block; margin-bottom: 12px; }
.acc-notif { display: flex; gap: 13px; align-items: flex-start; background: var(--c-surface); border: 1px solid color-mix(in srgb, var(--c-text) 10%, transparent); border-left: 4px solid color-mix(in srgb, var(--c-text) 14%, transparent); border-radius: 12px; padding: 14px 16px; margin-bottom: 10px; text-decoration: none; transition: box-shadow .15s; }
.acc-notif:hover { box-shadow: 0 4px 14px rgba(0,0,0,.08); }
.acc-notif.is-unread { border-left-color: var(--c-primary); background: color-mix(in srgb, var(--c-primary) 4%, var(--c-surface)); }
.acc-notif__ava { position: relative; width: 42px; height: 42px; flex: none; border-radius: 50%; background-size: cover; background-position: center; }
/* solo coloured type-icon (badge/approval/review/system — no actor avatar) */
.acc-notif__ic { width: 42px; height: 42px; flex: none; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 18px; color: var(--nic, #64748b); background: color-mix(in srgb, var(--nic, #64748b) 16%, var(--c-surface)); border: 1px solid color-mix(in srgb, var(--nic, #64748b) 32%, transparent); }
/* small corner glyph over a person's avatar */
.acc-notif__tag { position: absolute; right: -3px; bottom: -3px; width: 23px; height: 23px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 12px; color: #fff; background: var(--nic, #64748b); box-shadow: 0 0 0 2px var(--c-surface); }
.acc-notif__title { font-weight: 600; color: var(--c-text); }
.acc-notif__text { color: var(--c-muted); font-size: 13.5px; margin-top: 4px; }
.acc-notif__meta { font-size: 12px; color: var(--c-muted); margin-top: 6px; }
.acc-notif__new { color: var(--c-primary); font-weight: 700; }
@media (max-width: 820px) { .acc-hub { grid-template-columns: 1fr; } .acc-hub__side { position: static; } }
body.ui-squared .acc-hub__ava, body.ui-squared .acc-notif__ava { border-radius: 50% !important; }
/* optional personal details block + "complete your profile" nudge */
.acc-personal { margin-top: 18px; padding-top: 16px; border-top: 1px dashed color-mix(in srgb, var(--c-text) 14%, transparent); }
.acc-personal__head { display: flex; align-items: center; gap: 9px; font-weight: 700; font-size: 13.5px; margin-bottom: 12px; }
.acc-personal__head i { color: var(--c-accent); }
.acc-personal__head span { font-weight: 400; font-size: 12px; color: var(--c-muted); }
.acc-grid4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.acc-grid4 select, .acc-grid2 select { width: 100%; padding: 11px 34px 11px 12px; border: 1px solid color-mix(in srgb, var(--c-text) 14%, transparent); border-radius: 9px; background-color: var(--c-bg); color: var(--c-text); font-family: inherit; }
@media (max-width: 560px) { .acc-grid4 { grid-template-columns: 1fr 1fr; } }
.acc-nudge { display: flex; align-items: center; gap: 12px; background: color-mix(in srgb, var(--c-primary) 8%, transparent); border: 1px solid color-mix(in srgb, var(--c-primary) 28%, transparent); border-radius: 12px; padding: 13px 16px; margin-bottom: 18px; text-decoration: none; color: var(--c-text); font-size: 13.5px; }
.acc-nudge > i { color: var(--c-primary); font-size: 18px; flex: none; }
.acc-nudge__go { margin-left: auto; color: var(--c-primary); font-weight: 700; white-space: nowrap; }
/* registration optional personal-details block */
.reg-extra { margin: 6px 0 4px; border: 1px solid color-mix(in srgb, var(--c-text) 12%, transparent); border-radius: 10px; padding: 4px 12px; }
.reg-extra > summary { cursor: pointer; font-size: 13px; font-weight: 600; color: var(--c-muted); padding: 8px 2px; list-style: none; }
.reg-extra > summary::-webkit-details-marker { display: none; }
.reg-extra > summary i { color: var(--c-primary); margin-right: 6px; }
.reg-extra__grid { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 10px; padding: 8px 0 4px; }
.reg-extra__grid label { display: block; font-size: 11px; font-weight: 700; margin-bottom: 4px; color: var(--c-muted); }
.reg-extra__grid input, .reg-extra__grid select { width: 100%; padding: 9px 10px; border: 1px solid color-mix(in srgb, var(--c-text) 14%, transparent); border-radius: 8px; background: var(--c-bg); color: var(--c-text); font-family: inherit; font-size: 13px; }
.reg-extra__note { font-size: 11.5px; color: var(--c-muted); margin: 6px 0 8px; }
@media (max-width: 520px) { .reg-extra__grid { grid-template-columns: 1fr 1fr; } }
/* registration optional fields — paired two-up: telefon|instagram, bizi nasıl buldun|favori spor */
.regf-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 12px; margin: 2px 0 6px; align-items: end; }
.regf-grid .regf-col { display: flex; flex-direction: column; min-width: 0; }
/* keep labels on ONE line so both columns' inputs always align (no "(opsiyonel)" drop) */
.regf-grid .regf-col > label { margin: 0 0 5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.regf-grid .regf-col > input, .regf-grid .regf-col > select { width: 100%; box-sizing: border-box; }
@media (max-width: 480px) { .regf-grid { grid-template-columns: 1fr; } }

.act-wrap { display: grid; grid-template-columns: 260px 1fr; gap: 26px; align-items: start; }
.act-nav { background: var(--c-surface); border: 1px solid color-mix(in srgb, var(--c-text) 10%, transparent); border-radius: 16px; padding: 16px; position: sticky; top: 100px; }
.act-title { font-family: var(--font-display); font-size: 18px; text-transform: uppercase; letter-spacing: -.01em; margin: 4px 8px 14px; }
.act-link { display: flex; align-items: center; gap: 11px; padding: 11px 13px; border-radius: 10px; color: var(--c-text); font-weight: 600; font-size: 14px; transition: background .15s, color .15s; }
.act-link span:first-of-type { flex: 1; }
.act-link i { width: 18px; text-align: center; color: var(--c-muted); }
.act-link:hover { background: color-mix(in srgb, var(--c-primary) 8%, transparent); color: var(--c-primary); }
.act-link:hover i { color: var(--c-primary); }
.act-link.active { background: var(--c-grad); color: #fff; }
.act-link.active i { color: #fff; }
.act-count { background: color-mix(in srgb, var(--c-text) 10%, transparent); color: var(--c-muted); font-size: 12px; font-weight: 700; padding: 1px 9px; border-radius: 999px; }
.act-link.active .act-count { background: rgba(255,255,255,.25); color: #fff; }
.act-head { font-family: var(--font-display); font-size: 24px; text-transform: uppercase; letter-spacing: -.01em; margin: 0 0 18px; display: flex; align-items: baseline; gap: 10px; }
.act-head span { font-family: var(--font-sans); font-size: 14px; color: var(--c-muted); font-weight: 700; }
.act-empty { text-align: center; padding: 60px 20px; color: var(--c-muted); background: var(--c-surface); border: 1px dashed color-mix(in srgb, var(--c-text) 16%, transparent); border-radius: 16px; }
.act-empty i { font-size: 44px; opacity: .5; margin-bottom: 12px; }
.act-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.act-card { display: flex; gap: 14px; align-items: center; justify-content: space-between; background: var(--c-surface); border: 1px solid color-mix(in srgb, var(--c-text) 10%, transparent); border-radius: 14px; padding: 16px 18px; box-shadow: 0 1px 2px rgba(0,0,0,.04), 0 8px 22px rgba(0,0,0,.05); }
.act-card--col { flex-direction: column; align-items: stretch; }
.act-card__body { min-width: 0; flex: 1; }
.act-card__title { display: block; font-weight: 700; font-size: 15.5px; color: var(--c-text); line-height: 1.35; }
.act-card__title:hover { color: var(--c-primary); }
.act-card__meta { display: flex; align-items: center; gap: 14px; margin-top: 6px; font-size: 12px; color: var(--c-muted); }
.act-card__snippet { margin-top: 6px; font-size: 14px; color: var(--c-muted); line-height: 1.5; }
.act-badge { background: color-mix(in srgb, var(--c-accent) 16%, transparent); color: var(--c-accent); font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: .1em; padding: 2px 8px; border-radius: 999px; }
.act-card__acts { display: flex; gap: 8px; flex: none; flex-wrap: wrap; }
.act-card__acts form { margin: 0; }
.act-btn { display: inline-flex; align-items: center; gap: 6px; padding: 8px 13px; border-radius: 9px; border: 1px solid color-mix(in srgb, var(--c-text) 16%, transparent); background: var(--c-bg); color: var(--c-text); font-size: 12.5px; font-weight: 700; cursor: pointer; transition: all .15s; white-space: nowrap; }
.act-btn:hover { border-color: var(--c-primary); color: var(--c-primary); }
.act-btn.primary { background: var(--c-grad); color: #fff; border: 0; }
.act-btn.danger:hover { border-color: #ef4444; color: #ef4444; }
.act-edit { margin-top: 12px; }
.act-edit textarea { width: 100%; padding: 12px 14px; background: var(--c-bg); color: var(--c-text); border: 1px solid color-mix(in srgb, var(--c-text) 16%, transparent); border-radius: 10px; font-family: inherit; font-size: 14px; resize: vertical; }
.act-edit-page { background: var(--c-surface); border: 1px solid color-mix(in srgb, var(--c-text) 10%, transparent); border-radius: 16px; padding: 28px; }
.act-edit-page h1 { font-family: var(--font-display); font-size: 24px; text-transform: uppercase; margin: 8px 0 18px; }
.act-back { color: var(--c-muted); font-size: 13px; font-weight: 600; }
.act-back:hover { color: var(--c-primary); }
.act-edit-page label { display: block; font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .14em; color: var(--c-muted); margin: 14px 0 6px; }
.act-edit-page input, .act-edit-page textarea { width: 100%; padding: 13px 15px; background: var(--c-bg); color: var(--c-text); border: 1px solid color-mix(in srgb, var(--c-text) 16%, transparent); border-radius: 10px; font-family: inherit; font-size: 15px; resize: vertical; }
@media (max-width: 760px) { .act-wrap { grid-template-columns: 1fr; } .act-nav { position: static; display: flex; flex-wrap: wrap; gap: 6px; } .act-nav .act-title { width: 100%; } .act-link { flex: 1 1 auto; } .act-card { flex-direction: column; align-items: stretch; } }

/* ===== Mobile polish (≤560px) ===== */
@media (max-width: 560px) {
  .container, .hdr-inner { padding-left: var(--gutter, 16px); padding-right: var(--gutter, 16px); }
  .answers-block h2, .answers-head { font-size: 19px; margin-top: 26px; }
  .ans-actions { flex-wrap: wrap; gap: 8px; }
  .atype { font-size: 10px; padding: 4px 10px; }
  .answer-list[data-variant="card"] .answer { padding: 16px; padding-top: 16px; }
  .q-comments { padding: 14px 15px; }
  .single-q { --sq-pad: 16px; padding: var(--sq-pad); }
  .single-q__hd { padding: 22px var(--sq-pad) 18px; }
  .single-q h1 { font-size: 24px; }
  .answer-form { padding: 18px 16px; }
  /* keep the two FABs from crowding the thumb zone */
  .ask-fab { bottom: 16px; left: 14px; height: 50px; padding: 0 16px; }
  .wa-fab { bottom: 16px; right: 14px; }
  .ask-pop__panel { padding: 24px 18px; }
  /* bigger tap targets for vote/reply */
  .vote-pill .vote { width: 34px; height: 34px; }
  .ans-reply { padding: 8px 14px; }
}

/* ===== Admin quick bar (logged-in admins, public site) ===== */
body.has-admin-bar { --adminbar-h: 40px; }
body.has-admin-bar .hdr { top: var(--adminbar-h, 40px); }
.adminbar { position: sticky; top: 0; z-index: 9999; background: #1d2327; color: #e8eaed; font-family: var(--font-sans); font-size: 13px; box-shadow: 0 1px 0 rgba(0,0,0,.5); }
.adminbar__in { display: flex; align-items: stretch; gap: 2px; padding: 0 10px; height: var(--adminbar-h, 40px); overflow-x: auto; overflow-y: hidden; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
.adminbar__in::-webkit-scrollbar { display: none; }
.adminbar a, .adminbar .ab-logout button { color: #e8eaed; text-decoration: none; display: inline-flex; align-items: center; gap: 7px; padding: 0 11px; white-space: nowrap; transition: background .15s, color .15s; }
.adminbar a:hover, .adminbar .ab-logout button:hover { background: #2c3338; color: #fff; }
.adminbar .ab-brand { font-weight: 800; color: #fff; letter-spacing: .04em; }
.adminbar .ab-brand i { color: #39ff14; }
.adminbar .ab-new i { color: #9be37a; }
.adminbar .ab-sep { width: 1px; background: #3c434a; margin: 7px 4px; flex: none; }
.adminbar .ab-grow { flex: 1 0 8px; }
.adminbar .ab-badge { background: #d63638; color: #fff; font-size: 11px; font-weight: 700; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; display: inline-flex; align-items: center; justify-content: center; line-height: 1; }
.adminbar .ab-pill { background: #d63638; color: #fff; font-weight: 700; border-radius: 5px; margin: 6px 2px; padding: 0 12px; }
.adminbar .ab-pill:hover { background: #b32d2e; color: #fff; }
.adminbar .ab-logout { display: inline-flex; margin: 0; }
.adminbar .ab-logout button { background: none; border: 0; font: inherit; cursor: pointer; }
@media (max-width: 860px) { .adminbar .ab-label-lg { display: none; } }

/* -- floating: editorial bar with rule underneath -- */
.hdr[data-variant="floating"] {
  background: color-mix(in srgb, var(--c-bg) 92%, transparent);
  backdrop-filter: blur(20px) saturate(160%);
  -webkit-backdrop-filter: blur(20px) saturate(160%);
  border-bottom: 1px solid color-mix(in srgb, var(--c-text) 10%, transparent);
  transition: padding .3s ease;
}
.hdr-inner {
  max-width: var(--site-max, 1280px); margin: 0 auto; padding: 14px var(--gutter, 28px);
  display: grid; grid-template-columns: auto 1fr auto; gap: 18px;
  align-items: center;
}
.hdr.is-scrolled .hdr-inner { padding-top: 10px; padding-bottom: 10px; }

/* ── Header live search (data-variant="search") ─────────────────────────── */
.hsearch { position: relative; justify-self: center; width: 100%; max-width: 580px; }
/* ── Box ── elevated pill with an accent search chip + glow focus ── */
.hsearch__box { display: flex; align-items: center; gap: 11px; margin: 0;
  background: color-mix(in srgb, var(--c-surface) 78%, var(--c-bg));
  border: 1px solid color-mix(in srgb, var(--c-text) 13%, transparent);
  border-radius: 999px; padding: 0 7px 0 7px; height: 46px;
  box-shadow: 0 1px 2px rgba(0,0,0,.05), inset 0 1px 0 color-mix(in srgb, #fff 6%, transparent);
  transition: border-color .18s, box-shadow .18s, background .18s, transform .18s; }
.hsearch__box:hover { border-color: color-mix(in srgb, var(--c-text) 22%, transparent); }
.hsearch__box:focus-within {
  background: var(--c-surface);
  border-color: var(--c-primary);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--c-primary) 16%, transparent), 0 12px 28px -12px color-mix(in srgb, var(--c-primary) 55%, transparent);
  transform: translateY(-1px); }
.hsearch__ic { flex: none; width: 32px; height: 32px; display: grid; place-items: center; border-radius: 999px;
  font-size: 14px; color: var(--c-on-primary, #fff); background: var(--c-grad, var(--c-primary));
  box-shadow: 0 2px 8px -2px color-mix(in srgb, var(--c-primary) 60%, transparent); transition: transform .18s; }
.hsearch__box:focus-within .hsearch__ic { transform: scale(1.06) rotate(-6deg); }
.hsearch__input { flex: 1; min-width: 0; border: 0; background: none; outline: none; color: var(--c-text); font-family: inherit; font-size: 14.5px; font-weight: 500; padding: 0 2px; }
.hsearch__input::placeholder { color: var(--c-muted); font-weight: 400; }
.hsearch__clear { flex: none; width: 30px; height: 30px; margin-right: 4px; border: 0; border-radius: 999px; background: color-mix(in srgb, var(--c-text) 7%, transparent); color: var(--c-muted); cursor: pointer; font-size: 13px; line-height: 1; display: grid; place-items: center; transition: background .15s, color .15s; }
.hsearch__clear:hover { background: color-mix(in srgb, var(--c-primary) 16%, transparent); color: var(--c-primary); }
/* ── Dropdown ── animated, elevated, with a gradient top edge ── */
.hsearch__dd { position: absolute; top: calc(100% + 10px); left: 0; right: 0;
  background: var(--c-surface);
  border: 1px solid color-mix(in srgb, var(--c-text) 11%, transparent);
  border-radius: 16px; box-shadow: 0 30px 70px -18px rgba(0,0,0,.5), 0 4px 14px -8px rgba(0,0,0,.3);
  overflow: hidden auto; z-index: 70; max-height: 74vh; padding: 6px 6px 8px;
  animation: hsDD .2s cubic-bezier(.22,1,.36,1); transform-origin: top center; }
.hsearch__dd::-webkit-scrollbar { width: 10px; }
.hsearch__dd::-webkit-scrollbar-thumb { background: color-mix(in srgb, var(--c-text) 18%, transparent); border-radius: 999px; border: 3px solid var(--c-surface); }
@keyframes hsDD { from { opacity: 0; transform: translateY(-8px) scale(.985); } to { opacity: 1; transform: none; } }
.hsearch__sec { display: flex; align-items: center; gap: 7px; font-size: 10.5px; font-weight: 800; text-transform: uppercase; letter-spacing: .08em; color: var(--c-muted); padding: 12px 14px 6px; }
.hsearch__sec::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--c-primary); }
.hsearch__row { display: flex; align-items: center; gap: 12px; padding: 9px 12px; margin: 1px 2px; border-radius: 11px; text-decoration: none; color: var(--c-text); transition: background .14s, transform .14s; }
.hsearch__row:hover { background: color-mix(in srgb, var(--c-primary) 10%, transparent); transform: translateX(3px); }
.hsearch__ri { flex: none; width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; font-size: 13px; color: var(--c-primary); background: color-mix(in srgb, var(--c-primary) 13%, transparent); transition: transform .14s; }
.hsearch__row:hover .hsearch__ri { transform: scale(1.08); }
.hsearch__row--cat .hsearch__ri { color: var(--c-on-primary, #fff); background: var(--c-grad, var(--c-primary)); }
.hsearch__rt { flex: 1; min-width: 0; font-size: 13.5px; font-weight: 600; line-height: 1.35; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hsearch__rt mark { background: color-mix(in srgb, var(--c-primary) 28%, transparent); color: inherit; border-radius: 3px; padding: 0 2px; font-weight: 800; }
.hsearch__rm { flex: none; font-size: 11px; font-weight: 600; color: var(--c-muted); white-space: nowrap; padding: 3px 8px; border-radius: 999px; background: color-mix(in srgb, var(--c-text) 6%, transparent); }
.hsearch__all { display: flex; align-items: center; justify-content: center; gap: 9px; padding: 12px 16px; margin: 6px 2px 0; border-radius: 11px; font-size: 13px; font-weight: 800; color: var(--c-on-primary, #fff); text-decoration: none; background: var(--c-grad, var(--c-primary)); }
.hsearch__all i { transition: transform .18s; }
.hsearch__all:hover i { transform: translateX(4px); }
.hsearch__empty { padding: 30px 16px; text-align: center; color: var(--c-muted); font-size: 13px; }
.hsearch__empty::before { content: "\f002"; font-family: "Font Awesome 6 Free"; font-weight: 900; display: block; font-size: 26px; margin-bottom: 10px; opacity: .35; }
@media (min-width: 901px) { .hdr[data-variant="search"] .hdr__nav { display: none; } }
@media (max-width: 640px) { .hsearch { max-width: none; } .hsearch__box { height: 42px; } }
body.ui-squared .hsearch__box { border-radius: calc(var(--ui-radius, 6px) + 6px); }
body.ui-squared .hsearch__dd { border-radius: var(--ui-radius, 6px); }

/* ── Floating header bottom bar: Tüm Kategoriler dropdown + site nav ─────── */
.hdr--float2 .hdr-bar { background: color-mix(in srgb, var(--c-surface) 90%, var(--c-bg)); border-top: 1px solid color-mix(in srgb, var(--c-text) 7%, transparent); }
.hdr-bar__in { max-width: var(--site-max, 1280px); margin: 0 auto; padding: 7px var(--gutter, 28px); display: flex; align-items: center; gap: 10px; }
.hcat { position: relative; flex: none; }
.hcat__btn { display: inline-flex; align-items: center; gap: 9px; height: 38px; padding: 0 16px; border-radius: 999px; background: var(--c-grad, var(--c-primary)); color: #fff; font-weight: 700; font-size: 13.5px; border: 0; cursor: pointer; font-family: inherit; }
.hcat__chev { font-size: 10px; transition: transform .2s; }
.hcat.is-open .hcat__chev { transform: rotate(180deg); }
.hcat__panel { position: absolute; top: calc(100% + 8px); left: 0; width: 560px; max-width: 88vw; background: var(--c-surface); border: 1px solid color-mix(in srgb, var(--c-text) 12%, transparent); border-radius: 14px; box-shadow: 0 26px 60px -16px rgba(0,0,0,.4); padding: 10px; display: none; grid-template-columns: 1fr 1fr; gap: 3px; z-index: 71; }
.hcat.is-open .hcat__panel { display: grid; }
.hcat__link { display: flex; align-items: center; gap: 10px; padding: 9px 12px; border-radius: 10px; color: var(--c-text); text-decoration: none; font-size: 13.5px; font-weight: 600; }
.hcat__link:hover { background: color-mix(in srgb, var(--c-primary) 10%, transparent); color: var(--c-primary); }
.hcat__link i { color: var(--c-primary); width: 18px; text-align: center; flex: none; }
.hdr-bar__nav { display: flex; align-items: center; gap: 2px; overflow-x: auto; scrollbar-width: none; }
.hdr-bar__nav::-webkit-scrollbar { display: none; }
.hdr-bar__nav a { padding: 8px 13px; border-radius: 8px; color: var(--c-text); text-decoration: none; font-size: 13.5px; font-weight: 600; white-space: nowrap; }
.hdr-bar__nav a:hover { background: color-mix(in srgb, var(--c-primary) 10%, transparent); color: var(--c-primary); }
.hdr__uname { max-width: 130px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Floating header: the user/login pill always sits on the primary colour — keep
   its label + icon readable (white) regardless of the computed on-primary. */
.hdr[data-variant="floating"] .hdr__actions .btn-primary,
.hdr[data-variant="floating"] .hdr__actions .btn-primary i,
.hdr[data-variant="floating"] .hdr__actions .btn-primary .hdr__uname { color: #fff; }
@media (max-width: 760px) {
  .hdr-bar__in { padding: 7px var(--gutter, 15px); gap: 7px; }
  .hcat__panel { grid-template-columns: 1fr; width: 280px; }
  .hcat__btn span { display: none; } .hcat__btn { padding: 0 12px; }
}
body.ui-squared .hcat__btn, body.ui-squared .hcat__panel, body.ui-squared .hdr-bar__nav a, body.ui-squared .hcat__link { border-radius: var(--ui-radius, 4px); }
.hdr__logo { display: inline-flex; align-items: center; }
.hdr__logo img { height: 40px; width: auto; }
.hdr__nav-list { list-style: none; padding: 0; margin: 0; display: flex; gap: 0; align-items: center; justify-content: center; flex-wrap: wrap; }
.hdr__nav-item { position: relative; }
.hdr__nav-item + .hdr__nav-item::before { content: '·'; color: var(--c-muted); opacity: .4; padding: 0 4px; }
.hdr__nav-item a {
  display: inline-block;
  padding: 6px 10px;
  font-family: var(--font-sans);
  font-size: 11.5px; font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--c-text);
  position: relative;
  white-space: nowrap;
}
@media (max-width: 1280px) {
  .hdr__nav-item a { font-size: 11px; padding: 6px 8px; letter-spacing: .1em; }
  .hdr__nav-item + .hdr__nav-item::before { padding: 0 2px; }
}
.hdr__nav-item a::after {
  content: ''; position: absolute; left: 12px; right: 12px; bottom: 2px;
  height: 2px; background: var(--c-primary);
  transform: scaleX(0); transform-origin: left;
  transition: transform .25s ease;
}
.hdr__nav-item a:hover::after { transform: scaleX(1); }
.hdr__actions { display: flex; align-items: center; gap: 6px; }
.hdr__bell { position: relative; }
.hdr__bell .dot {
  position: absolute; top: -4px; right: -4px;
  min-width: 18px; height: 18px; padding: 0 5px;
  background: var(--c-primary); color: var(--c-bg);
  font-size: 10px; font-weight: 800;
  display: inline-flex; align-items: center; justify-content: center;
  pointer-events: none;
}
/* Notification dropdown */
.notif-dd {
  position: absolute; top: calc(100% + 12px); right: -8px;
  width: 360px; max-width: calc(100vw - 32px);
  background: var(--c-bg); border: 1px solid color-mix(in srgb, var(--c-text) 14%, transparent);
  z-index: 200; max-height: 60vh; overflow-y: auto;
  opacity: 0; transform: translateY(-8px); pointer-events: none;
  transition: opacity .2s ease, transform .2s ease;
}
.notif-dd.open { opacity: 1; transform: none; pointer-events: auto; }
.notif-dd__head { padding: 14px 18px; border-bottom: 2px solid var(--c-text); font-family: var(--font-display); font-weight: 800; font-size: 13px; text-transform: uppercase; letter-spacing: .08em; display: flex; align-items: center; gap: 8px; }
.notif-dd__head i { color: var(--c-primary); }
.notif-dd__head .all { margin-left: auto; font-family: var(--font-sans); font-size: 11px; font-weight: 700; letter-spacing: .15em; color: var(--c-primary); }
.notif-dd__list { padding: 0; }
.notif-dd__item { display: flex; gap: 12px; padding: 14px 18px; border-bottom: 1px solid color-mix(in srgb, var(--c-text) 8%, transparent); color: var(--c-text); }
.notif-dd__item:last-child { border-bottom: 0; }
.notif-dd__item:hover { background: color-mix(in srgb, var(--c-text) 6%, transparent); }
.notif-dd__item.unread { border-left: 3px solid var(--c-primary); padding-left: 15px; }
.notif-dd__item .ava { position: relative; width: 36px; height: 36px; flex: 0 0 36px; border-radius: 50%; background-size: cover; background-position: center; }
.notif-dd__item .ic { width: 36px; height: 36px; flex: 0 0 36px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 15px; color: var(--nic, #64748b); background: color-mix(in srgb, var(--nic, #64748b) 16%, var(--c-surface)); border: 1px solid color-mix(in srgb, var(--nic, #64748b) 32%, transparent); }
.notif-dd__item .ava .tag { position: absolute; right: -3px; bottom: -3px; width: 20px; height: 20px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 11px; color: #fff; background: var(--nic, #64748b); box-shadow: 0 0 0 2px var(--c-bg); }
.notif-dd__item .t { font-weight: 700; font-size: 13px; margin: 0 0 3px; color: var(--c-text); line-height: 1.3; }
.notif-dd__item .b { font-size: 12px; color: var(--c-muted); margin: 0 0 4px; line-height: 1.4; }
.notif-dd__item .when { font-size: 10px; color: var(--c-muted); text-transform: uppercase; letter-spacing: .12em; font-weight: 600; }
.notif-dd__empty { padding: 30px 18px; text-align: center; color: var(--c-muted); font-size: 13px; }
.notif-dd__foot { padding: 12px 18px; border-top: 1px solid color-mix(in srgb, var(--c-text) 10%, transparent); display: flex; gap: 8px; }
.notif-dd__foot .btn { flex: 1; justify-content: center; padding: 8px 12px; font-size: 11px; }

.hdr__burger { display: none; }
@media (max-width: 1100px) {
  .hdr__nav { display: none; position: absolute; top: 100%; left: 0; right: 0; background: var(--c-bg); border-bottom: 4px solid var(--c-text); padding: 16px 0; z-index: 60; }
  .hdr__nav.open { display: block; }
  .hdr__nav-list { flex-direction: column; gap: 0; }
  .hdr__nav-item + .hdr__nav-item::before { display: none; }
  .hdr__nav-item a { display: block; padding: 14px 28px; border-top: 1px solid color-mix(in srgb, var(--c-text) 10%, transparent); }
  .hdr__burger { display: inline-flex; }
}

.hdr[data-variant="classic"] { background: var(--c-surface); border-bottom: 2px solid var(--c-text); }
.hdr[data-variant="centered"] { background: var(--c-surface); border-bottom: 1px solid color-mix(in srgb, var(--c-text) 10%, transparent); }
.hdr[data-variant="centered"] .hdr-inner { grid-template-columns: 1fr; justify-items: center; padding-top: 22px; gap: 12px; }
.hdr[data-variant="centered"] .hdr__logo img { height: 52px; }
.hdr[data-variant="glass"] { background: color-mix(in srgb, var(--c-bg) 60%, transparent); backdrop-filter: blur(24px) saturate(180%); -webkit-backdrop-filter: blur(24px) saturate(180%); }
.hdr[data-variant="mega"] { background: var(--c-surface); border-bottom: 1px solid color-mix(in srgb, var(--c-text) 10%, transparent); }
.hdr[data-variant="mega"] .hdr__nav-item.has-mega { position: relative; }
.hdr[data-variant="mega"] .mega-panel {
  position: absolute; top: calc(100% + 6px); left: 50%; transform: translateX(-50%) translateY(-8px);
  min-width: 480px; padding: 22px;
  background: var(--c-surface); border: 2px solid var(--c-text);
  opacity: 0; pointer-events: none;
  transition: all .2s ease; z-index: 100;
}
.hdr[data-variant="mega"] .hdr__nav-item.has-mega:hover .mega-panel { opacity: 1; transform: translateX(-50%) translateY(0); pointer-events: auto; }
.mega-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; }
.mega-link { display: flex; gap: 12px; padding: 10px 12px; transition: background .15s; }
.mega-link:hover { background: color-mix(in srgb, var(--c-text) 8%, transparent); }
.mega-link .ico { width: 38px; height: 38px; flex: 0 0 38px; background: var(--c-primary); color: var(--c-bg); display: inline-flex; align-items: center; justify-content: center; }
.mega-link .lbl { font-weight: 700; font-size: 13px; color: var(--c-text); text-transform: uppercase; letter-spacing: .06em; }
.mega-link .desc { font-size: 12px; color: var(--c-muted); }
.hdr[data-variant="drawer"] { background: var(--c-surface); border-bottom: 2px solid var(--c-text); }
.hdr[data-variant="drawer"] .hdr__nav { display: none; }
.hdr[data-variant="drawer"] .hdr__burger { display: inline-flex; }
.drawer-overlay { position: fixed; inset: 0; background: rgba(0,0,0,.7); z-index: 1000; opacity: 0; pointer-events: none; transition: opacity .3s; }
.drawer-overlay.open { opacity: 1; pointer-events: auto; }
.drawer-panel { position: fixed; top: 0; left: 0; bottom: 0; width: 340px; max-width: 88vw; background: var(--c-bg); padding: 32px 28px; border-right: 4px solid var(--c-text); transform: translateX(-100%); transition: transform .35s cubic-bezier(.4,0,.2,1); z-index: 1001; }
.drawer-overlay.open ~ .drawer-panel, .drawer-panel.open { transform: none; }
.drawer-panel a { display: block; padding: 14px 0; border-bottom: 1px solid color-mix(in srgb, var(--c-text) 10%, transparent); font-weight: 700; text-transform: uppercase; letter-spacing: .1em; font-size: 13px; }

/* =========================================================================
   HERO
   ========================================================================= */
.hero { position: relative; overflow: hidden; padding: 80px 0 100px; border-bottom: 1px solid color-mix(in srgb, var(--c-text) 10%, transparent); }
.hero h1 { margin: 0 0 22px; }
.hero h1 .accent { color: var(--c-primary); }
.hero h1 .outline { -webkit-text-stroke: 2px var(--c-text); color: transparent; }
.hero .lead { max-width: 600px; }
.hero-actions { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 30px; }

/* -- cosmic — editorial: asymmetric, huge section number, ticker -- */
.hero[data-variant="cosmic"] { padding: 60px 0 80px; }
.hero[data-variant="cosmic"] .hero-content {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
  gap: 50px; align-items: start;
}
.hero[data-variant="cosmic"] .hero-left { position: relative; }
.hero[data-variant="cosmic"] .hero-num {
  position: absolute; top: -30px; right: -10px;
  font-family: var(--font-display); font-weight: 800;
  font-size: clamp(8rem, 18vw, 18rem);
  line-height: 1; letter-spacing: -.06em;
  color: transparent;
  -webkit-text-stroke: 1.5px color-mix(in srgb, var(--c-text) 12%, transparent);
  z-index: 0;
}
.hero[data-variant="cosmic"] .hero-text { position: relative; z-index: 1; }
.hero[data-variant="cosmic"] .meta-strip {
  display: flex; gap: 22px; flex-wrap: wrap;
  padding: 14px 0;
  border-top: 1px solid color-mix(in srgb, var(--c-text) 14%, transparent);
  border-bottom: 1px solid color-mix(in srgb, var(--c-text) 14%, transparent);
  margin: 30px 0;
  font-family: var(--font-sans);
  font-size: 11px; font-weight: 700; letter-spacing: .2em; text-transform: uppercase;
  color: var(--c-muted);
}
.hero[data-variant="cosmic"] .meta-strip strong { color: var(--c-text); }
.hero[data-variant="cosmic"] .hero-right {
  position: relative;
  background: var(--c-surface);
  border: 1px solid color-mix(in srgb, var(--c-text) 14%, transparent);
  padding: 30px;
}
.hero[data-variant="cosmic"] .hero-right::before { content: ''; position: absolute; top: -1px; left: -1px; width: 30px; height: 30px; border-top: 3px solid var(--c-primary); border-left: 3px solid var(--c-primary); }
.hero[data-variant="cosmic"] .hero-right::after { content: ''; position: absolute; bottom: -1px; right: -1px; width: 30px; height: 30px; border-bottom: 3px solid var(--c-primary); border-right: 3px solid var(--c-primary); }
@media (max-width: 900px) { .hero[data-variant="cosmic"] .hero-content { grid-template-columns: 1fr; } .hero[data-variant="cosmic"] .hero-num { display: none; } }
/* mobilde hero üst/alt boşluğu EŞİT — buton altındaki fazla boşluğu kaldır */
@media (max-width: 640px) { .hero[data-variant="cosmic"] { padding: 38px 0 38px; } .hero-actions { margin-top: 22px; } }

/* -- aurora -- */
.hero[data-variant="aurora"] { padding: 100px 0 120px; }
.hero[data-variant="aurora"]::before {
  content: ''; position: absolute; inset: 0;
  background:
    radial-gradient(ellipse 50% 40% at 15% 30%, color-mix(in srgb, var(--c-primary) 35%, transparent), transparent 60%),
    radial-gradient(ellipse 60% 50% at 85% 70%, color-mix(in srgb, var(--c-accent) 30%, transparent), transparent 60%);
  filter: blur(80px); opacity: .85;
}
.hero[data-variant="aurora"] .hero-content { position: relative; z-index: 2; text-align: center; }
.hero[data-variant="aurora"] .ask-form { max-width: 720px; margin: 26px auto 0; }

/* -- split -- */
.hero[data-variant="split"] { padding: 70px 0; }
.hero[data-variant="split"] .hero-content { display: grid; grid-template-columns: 1.2fr 1fr; gap: 56px; align-items: center; }
.hero[data-variant="split"] .hero-right .ask-form { background: var(--c-surface); padding: 32px; border: 1px solid color-mix(in srgb, var(--c-text) 14%, transparent); }
@media (max-width: 900px) { .hero[data-variant="split"] .hero-content { grid-template-columns: 1fr; } }

/* -- minimal — editorial big type -- */
.hero[data-variant="minimal"] { padding: 130px 0 100px; }
.hero[data-variant="minimal"] .hero-content { max-width: 1020px; }
.hero[data-variant="minimal"] h1 { font-size: clamp(3rem, 9vw, 7rem); line-height: .94; margin-bottom: 26px; }
.hero[data-variant="minimal"] .ask-form { margin-top: 36px; max-width: 720px; }

/* -- stats -- */
.hero[data-variant="stats"] { padding: 80px 0; text-align: center; }
.hero[data-variant="stats"] .ask-form { max-width: 720px; margin: 28px auto 50px; }
.hero[data-variant="stats"] .stats-row {
  display: grid; grid-template-columns: repeat(4, 1fr);
  border-top: 4px solid var(--c-text); border-bottom: 4px solid var(--c-text);
  max-width: 1080px; margin: 50px auto 0;
}
.hero[data-variant="stats"] .stat-card { padding: 26px 18px; border-right: 1px solid color-mix(in srgb, var(--c-text) 14%, transparent); text-align: left; }
.hero[data-variant="stats"] .stat-card:last-child { border-right: 0; }
.hero[data-variant="stats"] .stat-card .num { font-family: var(--font-display); font-size: 42px; font-weight: 800; line-height: 1; color: var(--c-text); }
.hero[data-variant="stats"] .stat-card .lbl { font-size: 11px; color: var(--c-muted); text-transform: uppercase; letter-spacing: .2em; margin-top: 8px; }
@media (max-width: 720px) { .hero[data-variant="stats"] .stats-row { grid-template-columns: repeat(2, 1fr); } }

/* -- magazine -- */
.hero[data-variant="magazine"] { padding: 50px 0; }
.hero[data-variant="magazine"] .mag-grid { display: grid; grid-template-columns: 1.5fr 1fr; gap: 30px; }
.hero[data-variant="magazine"] .mag-feature {
  position: relative; padding: 60px 44px; min-height: 380px;
  background: var(--c-text); color: var(--c-bg);
  display: flex; flex-direction: column; justify-content: space-between;
}
.hero[data-variant="magazine"] .mag-feature h1 { color: var(--c-bg); font-size: clamp(2rem, 4.5vw, 3.6rem); margin: 0; }
.hero[data-variant="magazine"] .mag-feature .eyebrow { color: var(--c-bg); opacity: .8; }
.hero[data-variant="magazine"] .mag-feature .eyebrow::before { background: var(--c-primary); }
.hero[data-variant="magazine"] .mag-side { display: grid; grid-template-rows: 1fr 1fr; gap: 30px; }
.hero[data-variant="magazine"] .mag-side > * { background: var(--c-surface); padding: 28px; border: 1px solid color-mix(in srgb, var(--c-text) 14%, transparent); }
@media (max-width: 900px) { .hero[data-variant="magazine"] .mag-grid { grid-template-columns: 1fr; } }

/* ask form */
.ask-form { display: grid; gap: 10px; }
.ask-form input[type=text],
.ask-form textarea {
  width: 100%; padding: 14px 18px;
  background: var(--c-bg); color: var(--c-text);
  border: 1px solid color-mix(in srgb, var(--c-text) 18%, transparent);
  font-family: var(--font-sans); font-size: 15px;
  transition: border .2s; border-radius: 0;
}
.ask-form input:focus, .ask-form textarea:focus { outline: none; border-color: var(--c-primary); }
.ask-form textarea { min-height: 110px; resize: vertical; }
.ask-form .row { display: flex; justify-content: flex-end; }
.ask-drop {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 4px; padding: 26px;
  background: color-mix(in srgb, var(--c-text) 4%, transparent);
  border: 2px dashed color-mix(in srgb, var(--c-text) 30%, transparent);
  color: var(--c-text);
  cursor: pointer; transition: all .2s;
}
.ask-drop:hover, .ask-drop.drag { border-color: var(--c-primary); background: color-mix(in srgb, var(--c-primary) 8%, transparent); }
.ask-drop.has-file { border-style: solid; border-color: var(--c-primary); }
.ask-drop__lbl { font-family: var(--font-sans); font-weight: 700; font-size: 13px; letter-spacing: .12em; text-transform: uppercase; }
.ask-drop__lbl i { margin-right: 6px; color: var(--c-primary); }
.ask-drop__hint { margin-top: 4px; font-size: 11px; font-weight: 600; letter-spacing: .02em; text-transform: none; color: var(--c-muted); text-align: center; line-height: 1.45; }
.ask-drop__hint { font-size: 11px; color: var(--c-muted); text-transform: uppercase; letter-spacing: .15em; }
.ask-gated { text-align: left; padding: 24px; background: var(--c-surface); border-left: 4px solid var(--c-primary); }
.ask-gated p { font-size: 13px; text-transform: uppercase; letter-spacing: .12em; color: var(--c-muted); margin-bottom: 14px; }

/* Gated ask form — visible to guests, every interaction opens auth modal */
.ask-form--gated { cursor: pointer; position: relative; }
.ask-form--gated input[type=text],
.ask-form--gated textarea { cursor: pointer; caret-color: transparent; }
.ask-form--gated input[type=text]::placeholder,
.ask-form--gated textarea::placeholder { color: color-mix(in srgb, var(--c-text) 55%, transparent); }
.ask-form--gated .ask-drop { cursor: pointer; opacity: .85; }

/* ===== ASK WIZARD (step-by-step soru sorma) ===== */
.ask-wizard { display: block; text-align: left; }
.wz-steps { display: flex; gap: 8px; margin-bottom: 18px; }
.wz-step { flex: 1; display: flex; align-items: center; gap: 9px; font-family: var(--font-sans); font-size: 12.5px; font-weight: 700; letter-spacing: .04em; color: var(--c-muted); padding: 9px 12px; border-radius: 10px; background: color-mix(in srgb, var(--c-text) 6%, transparent); border: 1px solid transparent; transition: .2s; }
.wz-step span { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: color-mix(in srgb, var(--c-text) 14%, transparent); color: var(--c-text); font-size: 12px; flex: none; transition: .2s; }
.wz-step.is-active { color: var(--c-primary); border-color: color-mix(in srgb, var(--c-primary) 40%, transparent); background: color-mix(in srgb, var(--c-primary) 10%, transparent); }
.wz-step.is-active span { background: var(--c-primary); color: #fff; }
.wz-step.is-done span { background: color-mix(in srgb, var(--c-primary) 70%, transparent); color: #fff; }
.wz-step.is-done span::before { content: "\2713"; }
.wz-step.is-done span { font-size: 0; }
.wz-step.is-done span::before { font-size: 13px; }
.wz-pane { display: none; animation: wzFade .25s ease; }
.wz-pane.is-active { display: block; }
@keyframes wzFade { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.wz-input, .ask-wizard select, .wz-grid input, .wz-grid select {
  width: 100%; font-family: var(--font-body, inherit); font-size: 14px; color: var(--c-text);
  background: var(--c-surface); border: 1px solid color-mix(in srgb, var(--c-text) 16%, transparent);
  border-radius: 10px; padding: 12px 14px; margin-bottom: 10px; transition: border-color .15s;
}
.wz-input:focus, .ask-wizard select:focus, .wz-grid input:focus, .wz-grid select:focus { outline: none; border-color: var(--c-primary); }
.wz-editor { border: 1px solid color-mix(in srgb, var(--c-text) 16%, transparent); border-radius: 10px; overflow: hidden; margin-bottom: 10px; background: var(--c-surface); }
.wz-toolbar { display: flex; align-items: center; gap: 2px; padding: 6px 8px; background: color-mix(in srgb, var(--c-text) 5%, transparent); border-bottom: 1px solid color-mix(in srgb, var(--c-text) 12%, transparent); }
.wz-toolbar button { width: 32px; height: 30px; display: grid; place-items: center; border: none; background: transparent; color: var(--c-text); border-radius: 7px; cursor: pointer; font-size: 14px; transition: .15s; }
.wz-toolbar button:hover { background: color-mix(in srgb, var(--c-primary) 16%, transparent); color: var(--c-primary); }
.wz-sep { width: 1px; height: 18px; background: color-mix(in srgb, var(--c-text) 16%, transparent); margin: 0 4px; }
.wz-content { min-height: 130px; max-height: 320px; overflow-y: auto; padding: 13px 15px; font-size: 14px; line-height: 1.65; color: var(--c-text); outline: none; }
.wz-content:empty::before { content: attr(data-ph); color: color-mix(in srgb, var(--c-text) 45%, transparent); }
.wz-content ul, .wz-content ol { margin: 6px 0; padding-left: 24px; }
.wz-content p { margin: 0 0 8px; }

/* ── Dedicated "Soru Sor" page + hero CTA (ask_page_enabled) ─────────────── */
.askpage { margin: 22px 0 50px; }
.askpage__grid { display: grid; grid-template-columns: minmax(0,1fr) 300px; gap: 22px; align-items: start; }
.askpage__main { background: var(--c-surface); border: 1px solid color-mix(in srgb, var(--c-text) 10%, transparent); border-radius: 16px; padding: 24px 26px; }
.askpage__main .wz-input, .askpage__main .ask-wizard select, .askpage__main .wz-editor, .askpage__main .wz-grid input, .askpage__main .wz-grid select { background: var(--c-bg); }
/* ask form: live counters */
.wz-count { font-size: 11.5px; color: color-mix(in srgb, var(--c-text) 55%, transparent); margin: -4px 2px 10px; text-align: right; }
.wz-count.is-bad { color: #ef4444; font-weight: 700; }
.wz-count.is-ok { color: #16a34a; }
.wz-count__min { opacity: .7; }
/* ask form: selected-media manager (preview + reorder + remove) */
.ask-mgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(86px, 1fr)); gap: 8px; margin: 4px 0 10px; }
/* existing-attachment strip in edit mode (reuses the tile look) */
.ans-emedia { display: grid; grid-template-columns: repeat(auto-fill, minmax(86px, 1fr)); gap: 8px; margin: 8px 0 4px; }
.ask-mtile.is-removed { opacity: .5; filter: grayscale(.9); }
.ask-mtile.is-removed::after { content: "Silinecek"; position: absolute; top: 6px; left: 6px; background: #ef4444; color: #fff; font-size: 10px; font-weight: 800; letter-spacing: .03em; padding: 2px 6px; border-radius: 6px; }
.ask-mtile { position: relative; border: 1px solid color-mix(in srgb, var(--c-text) 16%, transparent); border-radius: 9px; overflow: hidden; background: #000; }
.ask-mtile[draggable=true] { cursor: grab; } .ask-mtile.drag { opacity: .45; outline: 2px dashed var(--c-primary); }
.ask-mtile__media { display: block; width: 100%; height: 70px; object-fit: cover; }
.ask-mtile__vid { display: flex; align-items: center; justify-content: center; color: #fff; font-size: 22px; background: linear-gradient(135deg, #1f2937, #0b1220); }
.ask-mtile__ord { position: absolute; top: 4px; right: 4px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px; background: rgba(0,0,0,.62); color: #fff; font-size: 9.5px; font-weight: 800; display: flex; align-items: center; justify-content: center; z-index: 2; }
.ask-mtile.is-cover .ask-mtile__ord { background: var(--c-primary); }
.ask-mtile.is-cover { outline: 2px solid var(--c-primary); outline-offset: -2px; }
.ask-mtile__bar { display: flex; align-items: stretch; }
.ask-mtile__bar button { flex: 1; border: 0; background: rgba(0,0,0,.66); color: #fff; cursor: pointer; font-size: 11px; padding: 3px 0; }
.ask-mtile__bar .ask-rm { color: #fca5a5; } .ask-mtile__bar button:hover { background: var(--c-primary); } .ask-mtile__bar .ask-rm:hover { background: #ef4444; color: #fff; }
/* ask form: submit progress bar */
.ask-prog { margin: 0 0 12px; }
.ask-prog__bar { height: 12px; border-radius: 999px; background: color-mix(in srgb, var(--c-text) 14%, transparent); overflow: hidden; }
.ask-prog__fill { display: block; height: 100%; width: 0; border-radius: 999px; background: linear-gradient(90deg, var(--c-primary), #22c55e); transition: width .15s ease; }
.ask-prog__txt { font-size: 12px; font-weight: 700; color: color-mix(in srgb, var(--c-text) 60%, transparent); margin-top: 6px; }
/* ask form: confirm-step preview */
.ask-preview { border: 1px solid color-mix(in srgb, var(--c-primary) 30%, transparent); border-left: 4px solid var(--c-primary); border-radius: 12px; padding: 14px 16px; margin-bottom: 14px; background: color-mix(in srgb, var(--c-primary) 5%, var(--c-surface)); }
.ask-preview__h { font-weight: 800; font-size: 13px; color: var(--c-primary); display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.ask-preview__cat { font-size: 12px; color: color-mix(in srgb, var(--c-text) 60%, transparent); margin-bottom: 3px; }
.ask-preview__title { font-size: 17px; font-weight: 800; color: var(--c-text); line-height: 1.3; margin-bottom: 6px; }
.ask-preview__body { font-size: 14px; line-height: 1.6; color: color-mix(in srgb, var(--c-text) 85%, transparent); max-height: 180px; overflow: auto; }
.ask-preview__body img { max-width: 100%; border-radius: 8px; }
.ask-preview__media { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.ask-preview__media .ap-thumb { width: 54px; height: 54px; border-radius: 8px; object-fit: cover; display: flex; align-items: center; justify-content: center; background: #0b1220; color: #fff; }
.ask-preview__meta { font-size: 12.5px; color: color-mix(in srgb, var(--c-text) 70%, transparent); margin-top: 9px; line-height: 1.7; }
.askpage__tips { display: flex; flex-direction: column; gap: 14px; position: sticky; top: 86px; }
/* kenar kutuları = anasayfa .widget sistemi; sadece içerik tipografisi burada */
.askpage__tips .widget { margin-bottom: 0; }
.askpage__wbody { padding: 12px 16px 14px; }
.askpage__wbody ul { margin: 0; padding-left: 18px; }
.askpage__wbody li { font-size: 13px; line-height: 1.7; color: var(--c-muted); margin-bottom: 4px; }
.askpage__wbody p { font-size: 13px; line-height: 1.6; color: var(--c-muted); margin: 0 0 8px; }
.askpage__wbody a { color: var(--c-primary); font-weight: 600; text-decoration: none; font-size: 13px; }
.askpage__widget--warn { border-color: color-mix(in srgb, var(--c-primary) 38%, transparent); }
@media (max-width: 880px) { .askpage__grid { grid-template-columns: 1fr; } .askpage__tips { position: static; } }
.ask-cta { text-align: center; padding: 18px 10px; }
.ask-cta__ic { display: inline-grid; place-items: center; width: 64px; height: 64px; border-radius: 18px; background: var(--c-grad, var(--c-primary)); color: #fff; font-size: 27px; margin-bottom: 14px; }
.ask-cta__h { font-family: var(--font-display); font-size: 22px; margin: 0 0 6px; color: var(--c-text); }
.ask-cta__p { color: var(--c-muted); font-size: 14px; margin: 0 0 18px; line-height: 1.5; }
body.ui-squared .askpage__main, body.ui-squared .ask-cta__ic { border-radius: var(--ui-radius, 4px); }
.wz-hint { font-size: 12.5px; color: var(--c-muted); margin-bottom: 14px; }
.wz-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px 12px; }
.wz-grid > div { display: flex; flex-direction: column; }
.wz-grid label { font-size: 11.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--c-muted); margin-bottom: 5px; }
.wz-grid__full { grid-column: 1 / -1; }
.wz-nav { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-top: 16px; }
.wz-nav .btn-outline { background: transparent; border: 1px solid color-mix(in srgb, var(--c-text) 22%, transparent); color: var(--c-text); }
.wz-nav .btn-outline:hover { border-color: var(--c-primary); color: var(--c-primary); }
@media (max-width: 560px) {
  .wz-grid { grid-template-columns: repeat(2, 1fr); }
  .wz-step span { width: 22px; height: 22px; }
  .wz-step { padding: 8px; font-size: 0; gap: 0; justify-content: center; }
  .wz-step span { font-size: 12px; }
  .wz-step.is-done span { font-size: 0; }
}

/* ===== TICKER ===== */
.ticker { background: var(--c-text); color: var(--c-bg); padding: 12px 0; overflow: hidden; font-family: var(--font-sans); font-size: 12px; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; }
.ticker__track { display: inline-flex; gap: 60px; animation: tickerScroll 35s linear infinite; padding-left: 60px; white-space: nowrap; }
.ticker__track span { display: inline-flex; align-items: center; gap: 10px; }
.ticker__track i { color: var(--c-primary); }
.ticker__track strong { color: var(--c-primary); font-size: 14px; }
@keyframes tickerScroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* =========================================================================
   PAGE GRID
   ========================================================================= */
.page-grid { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 50px; margin: 50px 0 0; }
/* blog detayı page-grid içinde: makale + yorumlar SOL KOLONU TAM doldurur */
.page-grid .blog-single { max-width: none; margin: 0; }
.page-grid .bcom { max-width: none; margin: 36px 0 0; }
.page-grid .blog-related { max-width: none; margin: 28px 0 0; }
.feed-col .blog-grid { grid-template-columns: repeat(2, 1fr); }
@media (max-width: 1100px) { .page-grid { grid-template-columns: 1fr; gap: 40px; } }

.section-title {
  display: flex; align-items: baseline; gap: 16px;
  font-family: var(--font-display); font-weight: 800;
  text-transform: uppercase; letter-spacing: -.015em;
  font-size: clamp(1.4rem, 2.6vw, 2rem);
  margin-bottom: 30px; padding-bottom: 18px;
  border-bottom: 4px solid var(--c-text);
}
.section-title small { font-size: 12px; font-weight: 700; letter-spacing: .2em; color: var(--c-muted); font-family: var(--font-sans); text-transform: uppercase; margin-left: auto; }

.feed-toolbar { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-bottom: 26px; padding: 14px 0 16px; border-bottom: 1px solid color-mix(in srgb, var(--c-text) 12%, transparent); }
.feed-toolbar .chip { padding: 11px 20px; font-size: 13.5px; font-weight: 800; border-radius: 11px; border: 1.5px solid color-mix(in srgb, var(--c-text) 16%, transparent); display: inline-flex; align-items: center; gap: 8px; transition: border-color .15s, background .15s, color .15s, transform .12s; }
.feed-toolbar .chip i { font-size: 12px; opacity: .85; }
.feed-toolbar .chip:hover { border-color: var(--c-primary); color: var(--c-primary); transform: translateY(-1px); }
.feed-toolbar .chip-solid { background: var(--c-grad, var(--c-primary)); color: #fff; border-color: transparent; }
.feed-toolbar .chip-solid:hover { color: #fff; }
.feed-toolbar .label { display: inline-flex; align-items: center; gap: 8px; margin-right: 8px; font-family: var(--font-sans); font-size: 11px; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: var(--c-muted); }

/* =========================================================================
   Q&A LIST (default) — forum/SO style with rank column
   ========================================================================= */
.qa-list[data-variant="default"] .qa {
  position: relative;
  display: grid; grid-template-columns: 80px minmax(0, 1fr) 188px; gap: 24px;
  padding: 22px 0 24px;
  border-bottom: 1px solid color-mix(in srgb, var(--c-text) 12%, transparent);
}
.qa-list[data-variant="default"] .qa:first-child { padding-top: 4px; }
.qa-list[data-variant="default"] .qa-rank { display: flex; flex-direction: column; align-items: center; justify-content: flex-start; padding-top: 4px; }
.qa-list[data-variant="default"] .qa-rank .n { font-family: var(--font-display); font-weight: 800; font-size: 36px; line-height: 1; color: var(--c-text); }
.qa-list[data-variant="default"] .qa-rank .lbl { font-family: var(--font-sans); font-size: 10px; font-weight: 700; letter-spacing: .15em; text-transform: uppercase; color: var(--c-muted); margin-top: 4px; }
.qa-list[data-variant="default"] .qa-rank.answered .n { color: var(--c-primary); }
.qa-list[data-variant="default"] .qa-body { min-width: 0; }
.qa-list[data-variant="default"] .qa-title { font-family: var(--font-display); font-weight: 700; font-size: clamp(1.1rem, 1.8vw, 1.4rem); letter-spacing: -.01em; line-height: 1.2; text-transform: none; margin: 0 0 8px; }
.qa-list[data-variant="default"] .qa-title a { color: var(--c-text); }
.qa-list[data-variant="default"] .qa-title a:hover { color: var(--c-primary); }
.qa-list[data-variant="default"] .qa-excerpt { font-family: var(--font-sans); font-size: 14px; color: var(--c-muted); margin: 0 0 12px; line-height: 1.55; }
.qa-list[data-variant="default"] .qa-tags { display: flex; gap: 6px; flex-wrap: wrap; }
.qa-list[data-variant="default"] .qa-meta { display: flex; flex-direction: column; align-items: flex-end; gap: 10px; font-family: var(--font-sans); width: 100%; min-width: 0; }
.qa-list[data-variant="default"] .qa-meta .when { font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--c-muted); }
.qa-list[data-variant="default"] .qa-meta .who { display: flex; align-items: center; justify-content: flex-end; gap: 11px; width: 100%; min-width: 0; }
.qa-list[data-variant="default"] .qa-meta .who .ava { width: 46px; height: 46px; border-radius: 50%; background-size: cover; background-position: center; border: 2px solid color-mix(in srgb, var(--c-primary) 55%, transparent); box-shadow: 0 2px 10px rgba(0,0,0,.18); flex: none; }
.qa-list[data-variant="default"] .qa-meta .who .name { font-size: 14px; font-weight: 700; color: var(--c-text); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-align: right; }
.qa-list[data-variant="default"] .qa-meta .who .rank-chip { flex: none; }
.qa-list[data-variant="default"] .qa-meta .views { font-size: 11px; color: var(--c-muted); text-transform: uppercase; letter-spacing: .12em; }
.qa-list[data-variant="default"] .qa:hover .qa-rank .n { color: var(--c-primary); }
.qa-list[data-variant="default"] .qa::before { content: ''; position: absolute; left: -28px; top: 0; bottom: 0; width: 4px; background: var(--c-primary); transform: scaleY(0); transform-origin: top; transition: transform .25s ease; }
.qa-list[data-variant="default"] .qa:hover::before { transform: scaleY(1); }
@media (max-width: 720px) {
  .qa-list[data-variant="default"] .qa { grid-template-columns: 60px 1fr; }
  .qa-list[data-variant="default"] .qa-meta { grid-column: 1 / -1; flex-direction: row; align-items: center; justify-content: space-between; width: auto; min-width: 0; }
  .qa-list[data-variant="default"] .qa-meta .who { width: auto; }
}

/* -- compact -- */
.qa-list[data-variant="compact"] .qa { display: grid; grid-template-columns: 48px 1fr auto; gap: 16px; align-items: center; padding: 16px 4px; border-bottom: 1px solid color-mix(in srgb, var(--c-text) 10%, transparent); }
.qa-list[data-variant="compact"] .qa-avatar { width: 48px; height: 48px; border-radius: 50%; background-size: cover; background-position: center; }
.qa-list[data-variant="compact"] .qa-title { font-family: var(--font-display); font-size: 18px; font-weight: 700; margin: 0 0 4px; text-transform: none; letter-spacing: -.01em; line-height: 1.2; }
.qa-list[data-variant="compact"] .qa-title a { color: var(--c-text); }
.qa-list[data-variant="compact"] .qa-meta { font-size: 11px; color: var(--c-muted); text-transform: uppercase; letter-spacing: .12em; }
.qa-list[data-variant="compact"] .qa-stats { display: flex; gap: 16px; }
.qa-list[data-variant="compact"] .qa-stats .n { display: block; font-family: var(--font-display); font-size: 22px; font-weight: 700; color: var(--c-text); line-height: 1; }
.qa-list[data-variant="compact"] .qa-stats .lbl { font-size: 10px; color: var(--c-muted); text-transform: uppercase; letter-spacing: .12em; }

/* -- hero card -- */
.qa-list[data-variant="hero"] .qa { background: var(--c-surface); padding: 30px; margin-bottom: 18px; border: 1px solid color-mix(in srgb, var(--c-text) 10%, transparent); position: relative; }
.qa-list[data-variant="hero"] .qa::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 6px; background: var(--c-primary); }
.qa-list[data-variant="hero"] .qa-title { font-family: var(--font-display); font-size: clamp(1.3rem, 2vw, 1.7rem); font-weight: 800; line-height: 1.15; text-transform: none; letter-spacing: -.015em; margin-bottom: 12px; }
.qa-list[data-variant="hero"] .qa-title a { color: var(--c-text); }
.qa-list[data-variant="hero"] .qa-excerpt { color: var(--c-muted); margin-bottom: 18px; }
.qa-list[data-variant="hero"] .qa-foot { display: flex; align-items: center; gap: 14px; padding-top: 14px; border-top: 1px solid color-mix(in srgb, var(--c-text) 10%, transparent); }

/* -- glass -- */
.qa-list[data-variant="glass"] .qa { background: color-mix(in srgb, var(--c-surface) 60%, transparent); backdrop-filter: blur(16px); border: 1px solid color-mix(in srgb, var(--c-text) 12%, transparent); padding: 26px; margin-bottom: 14px; transition: all .25s; }
.qa-list[data-variant="glass"] .qa:hover { border-color: var(--c-primary); }
.qa-list[data-variant="glass"] .qa-title { font-family: var(--font-display); font-size: 19px; font-weight: 700; margin: 0 0 8px; text-transform: none; letter-spacing: -.01em; }
.qa-list[data-variant="glass"] .qa-title a { color: var(--c-text); }
.qa-list[data-variant="glass"] .qa-meta { font-size: 11px; color: var(--c-muted); text-transform: uppercase; letter-spacing: .12em; margin-bottom: 10px; }
.qa-list[data-variant="glass"] .qa-excerpt { color: var(--c-muted); font-size: 14px; margin-bottom: 14px; }
.qa-list[data-variant="glass"] .qa-foot { display: flex; gap: 10px; }

/* -- stat -- */
.qa-list[data-variant="stat"] .qa { display: grid; grid-template-columns: 110px 1fr; gap: 26px; background: var(--c-surface); padding: 24px; margin-bottom: 14px; border: 1px solid color-mix(in srgb, var(--c-text) 10%, transparent); }
.qa-list[data-variant="stat"] .stat-block { text-align: center; padding-right: 24px; border-right: 1px solid color-mix(in srgb, var(--c-text) 14%, transparent); }
.qa-list[data-variant="stat"] .stat-num { font-family: var(--font-display); font-size: 42px; font-weight: 800; color: var(--c-primary); line-height: 1; }
.qa-list[data-variant="stat"] .stat-lbl { font-family: var(--font-sans); font-size: 10px; color: var(--c-muted); text-transform: uppercase; letter-spacing: .18em; margin-top: 4px; }
.qa-list[data-variant="stat"] .qa-title { font-family: var(--font-display); font-size: 19px; font-weight: 700; margin: 0 0 6px; text-transform: none; letter-spacing: -.01em; }
.qa-list[data-variant="stat"] .qa-title a { color: var(--c-text); }
.qa-list[data-variant="stat"] .qa-meta { font-size: 11px; color: var(--c-muted); text-transform: uppercase; letter-spacing: .12em; margin-bottom: 8px; }
.qa-list[data-variant="stat"] .qa-excerpt { font-size: 13px; color: var(--c-muted); }

/* -- magazine -- */
/* ── qa_card variant: grid (2-sütun kart ızgarası) ─────────────────────── */
.qa-list[data-variant="grid"] { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }
@media (max-width: 700px) { .qa-list[data-variant="grid"] { grid-template-columns: 1fr; } }
.qg { display: flex; flex-direction: column; gap: 9px; background: var(--c-surface); border: 1px solid color-mix(in srgb, var(--c-text) 10%, transparent); border-radius: 14px; padding: 18px; transition: transform .15s, box-shadow .15s, border-color .15s; }
.qg:hover { transform: translateY(-3px); box-shadow: 0 16px 34px -24px rgba(0,0,0,.5); border-color: color-mix(in srgb, var(--c-primary) 40%, var(--c-text) 10%); }
.qg__top { display: flex; justify-content: space-between; align-items: center; font-size: 12px; color: var(--c-muted); }
.qg__ans { font-weight: 600; } .qg__ans.is-on { color: #10b981; } .qg__ans strong { font-size: 14px; }
.qg__title { margin: 0; font-size: 16px; line-height: 1.4; } .qg__title a { color: var(--c-text); text-decoration: none; }
.qg__title a:hover { color: var(--c-primary); }
.qg__ex { margin: 0; font-size: 13px; line-height: 1.55; color: var(--c-muted); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.qg__wait { align-self: flex-start; }
.qg__foot { display: flex; justify-content: space-between; align-items: center; margin-top: auto; padding-top: 8px; }
.qg__who { display: flex; align-items: center; gap: 8px; text-decoration: none; }
.qg__ava { width: 28px; height: 28px; border-radius: 50%; background: var(--c-bg) center/cover no-repeat; }
.qg__nm { font-size: 12.5px; font-weight: 600; color: var(--c-text); display: flex; align-items: center; gap: 5px; }
.qg__when { font-size: 11.5px; color: var(--c-muted); white-space: nowrap; }
body.ui-squared .qg, body.ui-squared .qg__ava { border-radius: var(--ui-radius, 4px); }

/* ── qa_card variant: timeline (dikey zaman çizelgesi) ─────────────────── */
.qa-list[data-variant="timeline"] { display: flex; flex-direction: column; }
.qt { display: flex; gap: 16px; }
.qt__rail { position: relative; flex: none; width: 14px; display: flex; justify-content: center; }
.qt__rail::before { content: ""; position: absolute; top: 0; bottom: 0; width: 2px; background: color-mix(in srgb, var(--c-text) 12%, transparent); }
.qt:first-child .qt__rail::before { top: 18px; }
.qt:last-child .qt__rail::before { bottom: calc(100% - 18px); }
.qt__dot { position: relative; z-index: 1; width: 12px; height: 12px; border-radius: 50%; margin-top: 16px; background: var(--c-surface); border: 2px solid color-mix(in srgb, var(--c-text) 25%, transparent); }
.qt__dot.is-on { border-color: #10b981; background: #10b981; }
.qt__card { flex: 1; min-width: 0; margin: 0 0 16px; background: var(--c-surface); border: 1px solid color-mix(in srgb, var(--c-text) 10%, transparent); border-radius: 14px; padding: 16px 18px; transition: transform .15s, box-shadow .15s; }
.qt__card:hover { transform: translateX(3px); box-shadow: 0 14px 30px -24px rgba(0,0,0,.5); }
.qt__head { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-bottom: 8px; }
.qt__who { display: flex; align-items: center; gap: 8px; text-decoration: none; }
.qt__ava { width: 52px; height: 52px; border-radius: 50%; background: var(--c-bg) center/cover no-repeat; border: 2px solid color-mix(in srgb, var(--c-primary) 28%, transparent); flex: none; }
.qt__nm { font-size: 12.5px; font-weight: 600; color: var(--c-text); display: flex; align-items: center; gap: 5px; }
.qt__when { font-size: 11.5px; color: var(--c-muted); white-space: nowrap; }
.qt__title { margin: 0 0 6px; font-size: 16px; line-height: 1.4; } .qt__title a { color: var(--c-text); text-decoration: none; }
.qt__title a:hover { color: var(--c-primary); }
.qt__ex { margin: 0 0 10px; font-size: 13px; line-height: 1.55; color: var(--c-muted); }
.qt__meta { display: flex; gap: 8px; }
body.ui-squared .qt__card, body.ui-squared .qt__ava { border-radius: var(--ui-radius, 4px); }
/* ── Kitapta Yazmayan Bilgiler — kart süslemeleri (Ana Sayfa Düzeni'nden seçilir) ── */
.tdx .bfx { position: absolute; inset: 0; pointer-events: none; border-radius: inherit; display: none; }
.bfx-shadow .tdx__card { box-shadow: inset 0 -70px 70px -34px rgba(0,0,0,.6), 0 16px 32px -18px rgba(0,0,0,.55); }
.bfx-lines .tdx__card .bfx-l1 { display: block; background: repeating-linear-gradient(45deg, rgba(255,255,255,.06) 0 2px, transparent 2px 16px); }
.bfx-grid .tdx__card .bfx-l1 { display: block; background: linear-gradient(rgba(255,255,255,.07) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.07) 1px, transparent 1px); background-size: 28px 28px; }
.bfx-diag .tdx__card .bfx-l2 { display: block; background: linear-gradient(135deg, color-mix(in srgb, var(--c-primary) 32%, transparent) 0%, transparent 48%); }
.bfx-frameout .tdx__card { outline: 2px solid color-mix(in srgb, var(--c-primary) 55%, transparent); outline-offset: 4px; }
.bfx-framein .tdx__card .bfx-l2 { display: block; inset: 10px; border: 1px solid rgba(255,255,255,.45); background: none; }
.bfx-diag.bfx-framein .tdx__card .bfx-l2 { background: linear-gradient(135deg, color-mix(in srgb, var(--c-primary) 32%, transparent) 0%, transparent 48%); }

.qa-list[data-variant="magazine"] { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.qa-list[data-variant="magazine"] .qa { background: var(--c-surface); padding: 26px; border: 1px solid color-mix(in srgb, var(--c-text) 10%, transparent); transition: all .25s; }
.qa-list[data-variant="magazine"] .qa:hover { border-color: var(--c-primary); }
.qa-list[data-variant="magazine"] .qa-cat { font-family: var(--font-sans); font-size: 11px; font-weight: 700; letter-spacing: .25em; color: var(--c-primary); text-transform: uppercase; margin-bottom: 12px; }
.qa-list[data-variant="magazine"] .qa-title { font-family: var(--font-display); font-size: 22px; font-weight: 800; line-height: 1.2; text-transform: none; letter-spacing: -.015em; margin: 0 0 12px; }
.qa-list[data-variant="magazine"] .qa-title a { color: var(--c-text); }
.qa-list[data-variant="magazine"] .qa-excerpt { color: var(--c-muted); font-size: 14px; }
.qa-list[data-variant="magazine"] .qa-foot { display: flex; align-items: center; gap: 12px; margin-top: 16px; padding-top: 16px; border-top: 1px solid color-mix(in srgb, var(--c-text) 10%, transparent); }
@media (max-width: 720px) { .qa-list[data-variant="magazine"] { grid-template-columns: 1fr; } }

/* shared */
.qa-avatar { width: 32px; height: 32px; border-radius: 50%; background-size: cover; background-position: center; border: 1.5px solid color-mix(in srgb, var(--c-text) 14%, transparent); }
.qa-author { color: var(--c-text); font-weight: 700; font-size: 13px; }
.qa-author:hover { color: var(--c-primary); }
.qa-cta { display: inline-flex; align-items: center; gap: 6px; padding: 6px 14px; background: transparent; border: 1.5px solid var(--c-text); color: var(--c-text); font-weight: 700; font-size: 11px; text-transform: uppercase; letter-spacing: .12em; transition: all .2s; }
.qa-cta:hover { background: var(--c-text); color: var(--c-bg); }

/* =========================================================================
   SIDEBAR — widgets, ad slots, item lists
   ========================================================================= */
.widget {
  background: var(--c-surface);
  border: 1px solid color-mix(in srgb, var(--c-text) 9%, transparent);
  border-radius: 16px;
  margin-bottom: 16px;
  overflow: hidden;
  box-shadow: 0 1px 2px rgba(0,0,0,.05), 0 10px 26px rgba(0,0,0,.07);
  transition: box-shadow .18s, transform .18s;
}
.widget:hover { box-shadow: 0 4px 10px rgba(0,0,0,.07), 0 18px 44px rgba(0,0,0,.10); }
.widget__head {
  font-family: var(--font-display); font-weight: 800;
  font-size: 13.5px; letter-spacing: .03em; text-transform: uppercase;
  padding: 15px 18px; margin: 0;
  border-bottom: 1px solid color-mix(in srgb, var(--c-text) 8%, transparent);
  display: flex; align-items: center; gap: 11px;
  background: linear-gradient(180deg, color-mix(in srgb, var(--c-primary) 7%, var(--c-surface)), var(--c-surface));
}
/* başlıkta nokta YOK — sadece ikon (nokta alttaki maddelere taşındı) */
.askpage__wbody li { list-style: none; position: relative; padding-left: 16px; }
.askpage__wbody ul { padding-left: 2px; }
.askpage__wbody li::before { content: ''; position: absolute; left: 0; top: .62em; width: 6px; height: 6px; border-radius: 50%; background: var(--c-primary); }
.widget__head i { color: var(--c-primary); font-size: 13px; }
.widget__head .count { margin-left: auto; font-family: var(--font-sans); font-size: 11px; color: var(--c-muted); letter-spacing: .15em; font-weight: 700; }
/* Gradient widget-title bars (admin toggle: body.sb-grad) — matches the hero look, white text */
body.sb-grad .widget__head { background: linear-gradient(120deg, var(--c-primary) 0%, var(--c-grad-2, #0d162e) 100%); color: #fff; border-bottom: 0; }
body.sb-grad .widget__head i { color: #fff; }
body.sb-grad .widget__head .count { color: rgba(255,255,255,.82); }
.widget__body { padding: 8px 14px 12px; }
.widget__body--ad { padding: 0; }
.widget__body--list { padding: 4px 8px 8px; }

.widget-ad .ad-slot img { width: 100%; height: auto; display: block; border-radius: 0 0 16px 16px; }
.widget-ad .ad-fallback { padding: 22px 18px; }
/* başlıksız "dümdüz" sidebar reklamı — ana sayfadaki gibi (Sponsorlu başlığı yok) */
.widget-ad--bare { border: 0; background: transparent; box-shadow: none; }
.widget-ad--bare .widget__body--ad { padding: 0; }
.widget-ad--bare .ad-slot img, .widget-ad--bare .ad-zone { border-radius: 12px; }

.w-list { list-style: none; padding: 0; margin: 0; }
.w-list > li { border-radius: 8px; transition: background .15s; }
/* öğeler arası ince şeffaf ayraç — sorular birbirinden ayrışır */
.w-list > li + li { margin-top: 0; border-top: 1px solid color-mix(in srgb, var(--c-text) 9%, transparent); }
.w-list > li:hover { background: color-mix(in srgb, var(--c-primary) 7%, transparent); }
.w-list .row {
  display: flex; gap: 11px; align-items: center;
  color: var(--c-text); text-decoration: none;
  padding: 11px 10px;
  transition: color .15s ease;
}
.w-list .row:hover { color: var(--c-primary); }
.w-list .row:hover .title { color: var(--c-primary); }
.w-list .ava {
  width: 46px; height: 46px; flex: 0 0 46px;
  border-radius: 50%; background-size: cover; background-position: center;
  border: 2px solid color-mix(in srgb, var(--c-primary) 45%, transparent);
}
.w-list .info { min-width: 0; flex: 1; }
.w-list .meta {
  font-family: var(--font-sans); font-size: 10px; color: var(--c-muted);
  text-transform: uppercase; letter-spacing: .12em; font-weight: 600;
  margin-bottom: 4px;
}
.w-list .meta strong { color: var(--c-text); font-weight: 700; }
.w-list .meta i { color: var(--c-primary); margin-right: 3px; }
.w-list .title {
  display: block; color: var(--c-text);
  font-family: var(--font-sans); font-weight: 700; font-size: 13.5px;
  line-height: 1.35; margin-bottom: 4px;
  transition: color .15s ease;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%;
}
/* sidebar widget heads: keep on one line, truncate gracefully */
.widget__head { white-space: nowrap; overflow: hidden; }
.widget__head { min-width: 0; }
.w-list .snip { font-size: 12px; color: var(--c-muted); line-height: 1.4; }

/* Leaderboard */
.leaderboard { list-style: none; padding: 0; margin: 0; }
.leaderboard li { display: grid; grid-template-columns: 28px 36px 1fr auto; gap: 12px; align-items: center; padding: 10px 0; border-bottom: 1px solid color-mix(in srgb, var(--c-text) 8%, transparent); }
.leaderboard li:last-child { border: 0; }
.leaderboard .rk { font-family: var(--font-display); font-weight: 800; font-size: 18px; color: var(--c-muted); }
.leaderboard li:nth-child(1) .rk { color: var(--c-primary); }
.leaderboard .ava { width: 36px; height: 36px; border-radius: 50%; background-size: cover; background-position: center; }
.leaderboard .who-block .who { font-family: var(--font-sans); font-weight: 700; font-size: 13px; color: var(--c-text); display: block; }
.leaderboard .who-block .meta { font-size: 10px; color: var(--c-muted); text-transform: uppercase; letter-spacing: .12em; font-weight: 600; }
.leaderboard .score { font-family: var(--font-display); font-weight: 800; font-size: 18px; color: var(--c-text); }

/* Tag cloud */
.tag-cloud { display: flex; flex-wrap: wrap; gap: 6px; }
.tag-cloud a { display: inline-block; padding: 5px 12px; background: var(--c-surface); color: var(--c-text); font-family: var(--font-sans); font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; border: 1px solid color-mix(in srgb, var(--c-text) 14%, transparent); transition: all .15s; }
.tag-cloud a:hover { background: var(--c-text); color: var(--c-bg); border-color: var(--c-text); }

/* Stat widget */
.stat-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.stat-grid .cell { background: var(--c-surface); padding: 16px; border: 1px solid color-mix(in srgb, var(--c-text) 10%, transparent); }
.stat-grid .cell .n { font-family: var(--font-display); font-weight: 800; font-size: 28px; line-height: 1; color: var(--c-primary); }
.stat-grid .cell .lbl { font-size: 10px; color: var(--c-muted); text-transform: uppercase; letter-spacing: .15em; margin-top: 6px; }

/* sidebar variant overrides */
.sb[data-variant="sticky"] { position: sticky; top: 110px; }
/* ── sidebar variant: spotlight (renkli başlıklı numaralı liste) ────────── */
.sb[data-variant="spotlight"] .widget { background: transparent; border: 0; padding: 0; margin-bottom: 18px; }
.sbsp__head { display: flex; align-items: center; gap: 8px; font-weight: 800; font-size: 13px; text-transform: uppercase; letter-spacing: .04em; color: #fff; padding: 12px 15px; border-radius: 12px 12px 0 0; background: linear-gradient(120deg, var(--c-primary), var(--c-grad-2, #0d162e)); }
.sbsp__head--alt { background: linear-gradient(120deg, #10b981, #0d9488); }
.sbsp__list { list-style: none; margin: 0; padding: 8px; background: var(--c-surface); border: 1px solid color-mix(in srgb, var(--c-text) 10%, transparent); border-top: 0; border-radius: 0 0 12px 12px; }
.sbsp__list li { margin: 0; }
.sbsp__list a { display: flex; align-items: center; gap: 10px; padding: 9px 8px; border-radius: 8px; text-decoration: none; font-size: 13px; line-height: 1.4; color: var(--c-text); transition: background .15s, color .15s; }
.sbsp__list a:hover { background: var(--c-bg); color: var(--c-primary); }
.sbsp__n { flex: none; width: 22px; height: 22px; border-radius: 7px; display: grid; place-items: center; font-size: 11.5px; font-weight: 800; background: color-mix(in srgb, var(--c-primary) 13%, transparent); color: var(--c-primary); }
.sbsp__t { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.sbsp__list--plain a i { flex: none; color: var(--c-primary); font-size: 12px; }
body.ui-squared .sbsp__head, body.ui-squared .sbsp__list { border-radius: var(--ui-radius, 4px); }

.sb[data-variant="cards"] .widget { background: var(--c-surface); padding: 22px; border: 1px solid color-mix(in srgb, var(--c-text) 10%, transparent); }
.sb[data-variant="cards"] .widget__head { border: 0; padding: 0 0 12px; margin: 0 0 14px; border-bottom: 1px solid color-mix(in srgb, var(--c-text) 14%, transparent); }
.sb[data-variant="minimal"] .widget__head { border-bottom: 1px solid var(--c-text); }
.sb[data-variant="tabbed"] .widget__head { padding: 0; border-bottom: 3px solid var(--c-text); gap: 0; }
.sb[data-variant="tabbed"] .tab-btn { padding: 12px 16px; background: transparent; border: 0; color: var(--c-muted); font-family: var(--font-sans); font-weight: 700; font-size: 11px; text-transform: uppercase; letter-spacing: .12em; cursor: pointer; border-bottom: 3px solid transparent; margin-bottom: -3px; }
.sb[data-variant="tabbed"] .tab-btn.active { color: var(--c-text); border-bottom-color: var(--c-primary); }
.sb[data-variant="tabbed"] .tab-content { display: none; padding: 14px 0; }
.sb[data-variant="tabbed"] .tab-content.active { display: block; }

/* sidebar ad carousel */
.sbc { position: relative; overflow: hidden; background: #000; }
.sbc__track { position: relative; width: 100%; aspect-ratio: 1 / 1; }
.sbc__slide {
  position: absolute; inset: 0; display: block;
  opacity: 0; visibility: hidden; transition: opacity .5s ease;
}
.sbc__slide.is-active { opacity: 1; visibility: visible; }
.sbc__slide img { width: 100%; height: 100%; object-fit: cover; display: block; }
.sbc__nav {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 34px; height: 34px; display: grid; place-items: center;
  background: color-mix(in srgb, var(--c-bg) 55%, transparent); color: #fff;
  border: 0; cursor: pointer; border-radius: 50%; backdrop-filter: blur(4px);
  opacity: 0; transition: opacity .2s ease; z-index: 2;
}
.sbc:hover .sbc__nav { opacity: 1; }
.sbc__nav--prev { left: 8px; }
.sbc__nav--next { right: 8px; }
.sbc__nav:hover { background: var(--c-primary); color: var(--c-bg); }
.sbc__dots {
  position: absolute; left: 0; right: 0; bottom: 10px; z-index: 2;
  display: flex; gap: 6px; justify-content: center;
}
.sbc__dot {
  width: 8px; height: 8px; border-radius: 50%; border: 0; cursor: pointer; padding: 0;
  background: color-mix(in srgb, #fff 50%, transparent); transition: all .2s ease;
}
.sbc__dot.is-active { background: var(--c-primary); transform: scale(1.25); }

/* banner-style ad (admin editable) */
.ad-banner {
  display: flex; align-items: center; justify-content: space-between;
  gap: 24px; padding: 22px 30px;
  text-decoration: none; font-family: inherit;
  position: relative; overflow: hidden;
  transition: filter .15s ease;
}
.ad-banner:hover { filter: brightness(1.08); }
.ad-banner__cta {
  display: inline-block; padding: 10px 20px;
  font-family: var(--font-sans); font-weight: 800;
  font-size: 13px; letter-spacing: .08em; text-transform: uppercase;
  white-space: nowrap; flex-shrink: 0;
}
.ad-banner__text { text-align: right; line-height: 1.35; min-width: 0; }
.ad-banner__text strong { display: block; font-family: var(--font-display); font-size: 18px; font-weight: 800; letter-spacing: -.005em; text-transform: uppercase; }
.ad-banner__text span    { font-size: 13px; opacity: .85; display: block; margin-top: 2px; }
@media (max-width: 600px) {
  .ad-banner { flex-direction: column; align-items: stretch; gap: 14px; padding: 18px; text-align: center; }
  .ad-banner__text { text-align: center; }
}

/* ad slot — editorial mini card */
.ad-slot { text-align: center; }
.ad-slot img { margin: 0 auto; max-width: 100%; }

/* Homepage draggable ad band (modules adrow1/adrow2) — full-width */
.home-adband { margin: 22px 0; }
.home-adband .ad-slot { width: 100%; }
.home-adband .ad-slot img { width: 100%; height: auto; max-width: 100%; border-radius: 6px; display: block; }
.home-adband .ad-banner { width: 100%; }
body.ui-squared .home-adband .ad-slot img { border-radius: 3px; }

/* ============ zone-centric ad system (AdZone) ============ */
.ad-zone { position: relative; overflow: hidden; border-radius: 10px; line-height: 0; }
.ad-zone img { display: block; width: 100%; height: auto; }
/* yalnızca GÖRSEL reklam linki — yazı reklamı (a.ad-text) kendi flex düzenini
   kullanır; bu kural ona uygulanırsa line-height:0 her şeyi üst üste bindirir */
.ad-zone > a:not(.ad-text) { display: block; line-height: 0; }
.ad-zone__tag {
  position: absolute; top: 6px; left: 6px; z-index: 2;
  font-size: 9px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  padding: 2px 6px; border-radius: 4px; line-height: 1.4;
  background: rgba(0,0,0,.45); color: #fff; pointer-events: none;
}
/* square slots (sidebar / cards) — 500x500 art */
.ad-zone--square { aspect-ratio: 1 / 1; }
.ad-zone--square img, .ad-zone--square .ad-text { width: 100%; height: 100%; object-fit: cover; }
/* wide banner slots */
.ad-zone--banner { width: 100%; }
.ad-zone--banner img { width: 100%; height: auto; }

/* templated text ad — base is "center"; .ad-text--tpl-* changes the layout */
.ad-text { display: flex; flex-direction: column; justify-content: center; align-items: center;
  gap: 10px; padding: 22px 24px; text-align: center; text-decoration: none; line-height: 1.3; }
.ad-text--banner { padding: 24px 30px; }
.ad-text__body { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.ad-text__kicker { font-size: 11px; letter-spacing: .14em; text-transform: uppercase; opacity: .85; }
.ad-text__title  { font-family: var(--font-display); font-size: 20px; font-weight: 800; letter-spacing: -.01em; }
.ad-text--square .ad-text__title { font-size: 22px; }
.ad-text__sub    { font-size: 13.5px; opacity: .92; }
.ad-text__cta    { flex: none; align-self: center; font-size: 12.5px; font-weight: 800;
  letter-spacing: .04em; text-transform: uppercase; padding: 8px 18px; border-radius: 7px; white-space: nowrap; }
/* layout templates */
.ad-text--tpl-left { align-items: flex-start; text-align: left; }
.ad-text--tpl-left .ad-text__cta { align-self: flex-start; }
.ad-text--tpl-inline { flex-direction: row; align-items: center; justify-content: space-between; text-align: left; gap: 16px; }
.ad-text--tpl-inline .ad-text__cta { align-self: center; }
.ad-text--tpl-minimal { align-items: flex-start; text-align: left; gap: 8px; padding: 16px 20px; }
.ad-text--tpl-minimal .ad-text__kicker { display: none; }
.ad-text--tpl-minimal .ad-text__title { font-size: 16px; }
.ad-text--tpl-minimal .ad-text__sub { font-size: 12.5px; }
.ad-text--tpl-minimal .ad-text__cta { align-self: flex-start; padding: 6px 14px; font-size: 11.5px; }
/* a square slot has no room for a side-by-side row → force a column */
.ad-text--square.ad-text--tpl-inline { flex-direction: column; align-items: flex-start; text-align: left; }
.ad-text--square.ad-text--tpl-inline .ad-text__cta { align-self: flex-start; }
a.ad-text { transition: filter .15s ease; }
a.ad-text:hover { filter: brightness(1.07); }
/* MOBİLDE reklam metni ORTALI: başlık+yazı üstte ortalı, buton altta ortalı.
   Admin "Mobilde reklam hizası → Masaüstü düzenini koru" seçerse body.ad-mob-keep ile devre dışı. */
@media (max-width: 640px) {
  body:not(.ad-mob-keep) .ad-text { flex-direction: column !important; align-items: center !important; text-align: center !important; gap: 11px; }
  body:not(.ad-mob-keep) .ad-text__body { align-items: center !important; text-align: center !important; }
  body:not(.ad-mob-keep) .ad-text__cta { align-self: center !important; order: 3; }
  body:not(.ad-mob-keep) .ad-text--tpl-minimal .ad-text__kicker { display: inline-block; }
}
/* ---- görsel stil "skin"leri (app/src/data/ad_library.php) ----
   classic = kasıtlı olarak kuralsız → bugünkü görünümle birebir aynı. */
.ad-text--st-hero { padding: 32px 26px; gap: 14px; }
.ad-text--st-hero .ad-text__title { font-size: 26px; }
.ad-text--square.ad-text--st-hero { padding: 22px; }
.ad-text--square.ad-text--st-hero .ad-text__title { font-size: 28px; }
.ad-text--st-split { position: relative; padding-left: 30px; }
.ad-text--st-split::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 6px; background: rgba(255,255,255,.55); }
.ad-text--st-gradient { background-size: 200% 200% !important; animation: adGradShift 7s ease infinite; }
@keyframes adGradShift { 0%, 100% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } }
.ad-text--st-boxed { box-shadow: inset 0 0 0 2px rgba(255,255,255,.35); border-radius: 14px; }
.ad-text--st-outline { box-shadow: inset 0 0 0 1px rgba(255,255,255,.45); }
/* outline stili butonu "hayalet" yapar — buton zemin rengini bilerek yok sayar */
.ad-text--st-outline .ad-text__cta { background: transparent !important; box-shadow: inset 0 0 0 2px currentColor; }
.ad-text--st-ribbon { position: relative; }
.ad-text--st-ribbon::after { content: '★'; position: absolute; top: 8px; right: 10px; font-size: 12px; opacity: .85; }
body.ui-squared .ad-text--st-boxed { border-radius: 3px; }
/* ---- buton konumu (btn_side) — auto hiçbir sınıf üretmez, şablon davranışı korunur ---- */
.ad-text--btn-left { align-items: flex-start; text-align: left; }
.ad-text--btn-left .ad-text__cta { align-self: flex-start; }
.ad-text--btn-right .ad-text__cta { align-self: flex-end; }
.ad-text--tpl-inline.ad-text--btn-left { flex-direction: row-reverse; }
.ad-text--btn-full .ad-text__cta { align-self: stretch; width: 100%; text-align: center; }

/* admin-only "empty zone" placeholder */
.ad-zone--empty { display: flex; align-items: center; justify-content: center; gap: 8px;
  line-height: 1.4; text-align: center; text-decoration: none; padding: 18px;
  border: 1px dashed color-mix(in srgb, var(--c-primary) 45%, transparent);
  background: color-mix(in srgb, var(--c-primary) 6%, transparent);
  color: var(--c-primary); font-size: 13px; font-weight: 600; }
.ad-zone--empty.ad-zone--square { aspect-ratio: 1 / 1; flex-direction: column; }
.ad-zone--empty small { color: var(--c-muted); font-weight: 400; }

/* sidebar widget wrapping a square ad */
.widget-ad .widget__body--ad { padding: 0 !important; line-height: 0; }
.widget-ad .ad-zone { border-radius: 0 0 12px 12px; }

body.ui-squared .ad-zone, body.ui-squared .ad-zone img,
body.ui-squared .ad-text__cta, body.ui-squared .widget-ad .ad-zone { border-radius: 3px; }
/* Square banners inside the Q&A content column shouldn't balloon to full width */
.ad-slot[data-zone^="in-question"] img { max-width: 336px; width: 100%; border-radius: 10px; }
.ad-slot[data-zone^="in-question"] { padding: 4px 0; }
.ad-slot .ad-fallback { background: var(--c-text); color: var(--c-bg); padding: 26px 18px; text-align: left; position: relative; overflow: hidden; font-family: var(--font-display); font-weight: 800; font-size: 18px; text-transform: uppercase; letter-spacing: -.01em; line-height: 1.15; }
.ad-slot .ad-fallback small { display: block; margin-top: 8px; font-family: var(--font-sans); font-weight: 600; font-size: 10px; letter-spacing: .2em; color: var(--c-primary); text-transform: uppercase; }
.ad-infeed { background: var(--c-surface); padding: 22px; margin-bottom: 16px; text-align: center; border: 1px dashed color-mix(in srgb, var(--c-text) 20%, transparent); }
.ad-infeed .lbl { font-size: 10px; letter-spacing: .25em; color: var(--c-muted); text-transform: uppercase; margin-bottom: 10px; font-weight: 700; }
.ad-infeed .ad-zone, .ad-infeed .ad-text { margin: 0 auto; }
/* in-feed ad must span every column on the grid-based card variants */
.qa-list[data-variant="grid"] .ad-infeed,
.qa-list[data-variant="magazine"] .ad-infeed { grid-column: 1 / -1; margin-bottom: 0; }
/* admin-only empty-zone hint */
.ad-slot--empty { display: flex; align-items: center; justify-content: center; gap: 8px; flex-wrap: wrap; padding: 16px; border: 2px dashed color-mix(in srgb, var(--c-primary) 45%, transparent); border-radius: 10px; color: var(--c-muted); font-size: 13px; font-weight: 600; background: color-mix(in srgb, var(--c-primary) 5%, transparent); }
.ad-slot--empty:hover { border-color: var(--c-primary); color: var(--c-text); }
.ad-slot--empty code { color: var(--c-primary); font-size: 12px; }
.ad-slot--empty small { color: var(--c-muted); font-weight: 500; }

/* =========================================================================
   SINGLE QUESTION + COMMENT VARIANTS
   ========================================================================= */
.single-q { --sq-pad: 36px; background: var(--c-surface); padding: var(--sq-pad); margin-bottom: 28px; border: 1px solid color-mix(in srgb, var(--c-text) 10%, transparent); overflow: hidden; }
/* başlık alanı = renkli geçişli hero band (sidebar başlıkları / sayfa hero gibi) */
.single-q__hd { margin: calc(-1 * var(--sq-pad)) calc(-1 * var(--sq-pad)) 24px; padding: 30px var(--sq-pad) 22px;
  background: linear-gradient(120deg, var(--c-primary) 0%, var(--c-grad-2, #0d162e) 100%); color: #fff;
  box-shadow: 0 16px 36px -26px color-mix(in srgb, var(--c-primary) 80%, transparent); }
.single-q__hd .eyebrow { color: rgba(255,255,255,.85); }
.single-q__hd .q-author-line { margin-bottom: 0; padding-bottom: 0; border-bottom: 0; }
.single-q__hd .q-author-line .who { color: #fff; }
.single-q__hd .q-author-line .when { color: rgba(255,255,255,.82); }
.single-q__hd .q-author-line .ava { border-color: rgba(255,255,255,.5); }
.single-q h1 { font-family: var(--font-display); font-size: clamp(1.5rem, 2.8vw, 2.2rem); font-weight: 800; text-transform: none; letter-spacing: -.02em; margin-bottom: 16px; color: #fff; }
.single-q .body { color: var(--c-text); font-size: 16px; line-height: 1.7; }
.single-q .body img { margin: 14px 0; }
/* Question media gallery — photos + videos, admin-configurable count */
.q-media { margin: 0 0 18px; display: grid; gap: 12px; }
.q-media--single { grid-template-columns: 1fr; }
.q-media--multi { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.q-media__item { display: block; width: 100%; border-radius: var(--ui-radius, 12px); overflow: hidden; background: color-mix(in srgb, var(--c-text) 5%, var(--c-surface)); border: 1px solid color-mix(in srgb, var(--c-text) 10%, transparent); }
.q-media__item--img img { display: block; width: 100%; height: 100%; max-height: 540px; object-fit: cover; margin: 0; transition: transform .3s ease; }
.q-media--single .q-media__item--img img { max-height: 620px; object-fit: contain; background: color-mix(in srgb, var(--c-text) 4%, transparent); }
.q-media__item--img:hover img { transform: scale(1.02); }
.q-media__item--video { width: 100%; max-height: 620px; background: #000; aspect-ratio: 16 / 9; }
.q-media--multi .q-media__item--video { aspect-ratio: 16 / 9; max-height: none; }
body.ui-squared .q-media__item { border-radius: var(--ui-radius, 4px); }

/* ---- Question/answer media gallery (portrait thumbs + carousel + lightbox) ---- */
.qmedia { margin: 16px 0 6px; }
.qmedia--grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
/* a single image = ONE small portrait cell (grid intact, never huge / never a 3-up row) */
.qmedia--one { display: grid; grid-template-columns: minmax(0, 240px); gap: 10px; }
.qmedia--carousel { display: flex; gap: 10px; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 8px; -webkit-overflow-scrolling: touch; scrollbar-width: thin; }
.qmedia--carousel .qmedia__cell { flex: 0 0 31%; scroll-snap-align: start; }
.qmedia__cell { position: relative; display: block; margin: 0; padding: 0; border: 1px solid color-mix(in srgb, var(--c-text) 12%, transparent); border-radius: 12px; overflow: hidden; background: #0b0f17; cursor: pointer; aspect-ratio: 3 / 4; }
.qmedia__media { width: 100%; height: 100%; object-fit: cover; display: block; }
.qmedia__cell--img:hover .qmedia__media { transform: scale(1.03); }
.qmedia__cell--img .qmedia__media { transition: transform .3s ease; }
.qmedia__cell--video { cursor: pointer; }
.qmedia__cell--video .qmedia__media { object-fit: contain; background: #000; pointer-events: none; }   /* clicks go to the cell → lightbox */
.qmedia__zoom { position: absolute; right: 8px; bottom: 8px; width: 30px; height: 30px; border-radius: 50%; background: rgba(0,0,0,.58); color: #fff; display: grid; place-items: center; font-size: 13px; opacity: 0; transition: .18s; pointer-events: none; }
.qmedia__cell:hover .qmedia__zoom { opacity: 1; }
.qmedia__play { position: absolute; inset: 0; margin: auto; width: 54px; height: 54px; border-radius: 50%; background: rgba(0,0,0,.5); border: 2px solid rgba(255,255,255,.85); color: #fff; display: grid; place-items: center; font-size: 18px; padding-left: 3px; pointer-events: none; transition: background .18s, border-color .18s; }
.qmedia__cell--video:hover .qmedia__play { background: var(--c-primary); border-color: var(--c-primary); }
@media (max-width: 560px) {
  .qmedia--carousel .qmedia__cell { flex: 0 0 46%; }
}
body.ui-squared .qmedia__cell { border-radius: var(--ui-radius, 4px); }
/* answer/reply media: compact like the question, capped so it never goes huge */
.qmedia.ans-media { max-width: 460px; margin: 12px 0 4px; }
.qmedia.ans-media.qmedia--grid { grid-template-columns: repeat(3, 1fr); }
.qmedia.ans-media .qmedia__cell { aspect-ratio: 1 / 1; }
.qmedia.ans-media .qmedia__cell--video { aspect-ratio: 16 / 10; grid-column: 1 / -1; max-width: 320px; }
.qmedia.ans-media.qmedia--one { grid-template-columns: minmax(0, 200px); }
.qmedia.ans-media.qmedia--one .qmedia__cell { aspect-ratio: 4 / 3; }
/* document file-card cell (pdf / word / excel / zip …) */
.qmedia__cell--doc { aspect-ratio: 1 / 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px;
  background: color-mix(in srgb, var(--c-primary) 7%, var(--c-surface)); color: var(--c-text); text-decoration: none; padding: 10px 8px; cursor: pointer; }
.qmedia__cell--doc:hover { background: color-mix(in srgb, var(--c-primary) 14%, var(--c-surface)); }
.qmedia__cell--doc i { font-size: 30px; color: var(--c-primary); }
.qmedia__docname { font-size: 11px; line-height: 1.25; max-width: 100%; text-align: center; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; word-break: break-word; }
.qmedia__docext { font-size: 9px; font-weight: 800; letter-spacing: .08em; color: var(--c-muted); }

/* lightbox overlay (global — any [data-lightbox] or content image) */
.lbx { position: fixed; inset: 0; z-index: 9500; display: none; align-items: center; justify-content: center; background: rgba(6,8,14,.92); backdrop-filter: blur(4px); }
.lbx.open { display: flex; animation: lbxin .2s ease; }
@keyframes lbxin { from { opacity: 0; } to { opacity: 1; } }
.lbx__img { max-width: 92vw; max-height: 88vh; border-radius: 8px; box-shadow: 0 30px 90px -20px rgba(0,0,0,.8); object-fit: contain; }
.lbx__vid { max-width: 92vw; max-height: 88vh; border-radius: 8px; box-shadow: 0 30px 90px -20px rgba(0,0,0,.8); background: #000; outline: none; }
.lbx__btn { position: absolute; width: 50px; height: 50px; border: 0; border-radius: 50%; background: rgba(255,255,255,.12); color: #fff; font-size: 20px; cursor: pointer; display: grid; place-items: center; transition: background .15s; }
.lbx__btn:hover { background: rgba(255,255,255,.24); }
.lbx__close { top: 18px; right: 18px; }
.lbx__prev { left: 18px; top: 50%; transform: translateY(-50%); }
.lbx__next { right: 18px; top: 50%; transform: translateY(-50%); }
.lbx__count { position: absolute; bottom: 20px; left: 50%; transform: translateX(-50%); color: rgba(255,255,255,.8); font-size: 13px; font-weight: 600; letter-spacing: .03em; }
@media (max-width: 560px) { .lbx__prev { left: 8px; } .lbx__next { right: 8px; } .lbx__btn { width: 42px; height: 42px; font-size: 17px; } }

/* ---- Global toast notifications (success / error / info) ---- */
.toastwrap { position: fixed; top: 18px; right: 18px; z-index: 9600; display: flex; flex-direction: column; gap: 10px; max-width: min(380px, 92vw); pointer-events: none; }
.toastx { pointer-events: auto; display: flex; align-items: flex-start; gap: 10px; padding: 13px 14px; border-radius: 12px; background: var(--c-surface, #fff); color: var(--c-text, #111); border: 1px solid color-mix(in srgb, var(--c-text) 12%, transparent); border-left: 4px solid var(--tc, #6c63ff); box-shadow: 0 18px 44px -18px rgba(0,0,0,.5); font-size: 13.5px; font-weight: 600; opacity: 0; transform: translateX(40px); transition: opacity .28s ease, transform .28s ease; }
.toastx.in { opacity: 1; transform: none; }
.toastx.out { opacity: 0; transform: translateX(40px); }
.toastx > i { font-size: 16px; color: var(--tc); margin-top: 1px; }
.toastx > span { flex: 1; line-height: 1.45; word-break: break-word; }
.toastx__x { border: 0; background: none; color: var(--c-muted, #94a3b8); font-size: 20px; line-height: 1; cursor: pointer; padding: 0 2px; flex: none; }
.toastx--success { --tc: #22c55e; } .toastx--error { --tc: #ef4444; } .toastx--warning { --tc: #f59e0b; } .toastx--info { --tc: var(--c-primary, #6c63ff); }
body.ui-squared .toastx { border-radius: 5px; }
@media (max-width: 560px) { .toastwrap { left: 50%; right: auto; transform: translateX(-50%); top: auto; bottom: 78px; width: 92vw; } .toastx { transform: translateY(20px); } .toastx.in { transform: none; } .toastx.out { transform: translateY(20px); } }

/* Auto-embedded YouTube/Vimeo (from links in questions + answers) */
.yt-embed { position: relative; width: 100%; max-width: 680px; margin: 14px 0; aspect-ratio: 16 / 9; background: #000; border-radius: var(--ui-radius, 10px); overflow: hidden; }
.yt-embed iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.ans-body .yt-embed { max-width: 560px; }
body.ui-squared .yt-embed { border-radius: var(--ui-radius, 4px); }
/* link önizleme kartı (Open Graph) — cevap/yorumdaki ilk harici linkin altında */
.lprev { display: flex; align-items: stretch; gap: 0; max-width: 560px; margin: 12px 0 4px; border: 1px solid color-mix(in srgb, var(--c-text) 14%, transparent); border-radius: 12px; overflow: hidden; text-decoration: none; background: var(--c-bg); transition: border-color .15s, box-shadow .15s; }
.lprev:hover { border-color: var(--c-primary); box-shadow: 0 6px 18px -10px rgba(0,0,0,.25); }
.lprev__img { flex: none; width: 132px; min-height: 88px; background: var(--c-surface) center/cover no-repeat; }
.lprev__tx { display: flex; flex-direction: column; gap: 3px; padding: 10px 14px; min-width: 0; justify-content: center; }
.lprev__t { font-size: 13.5px; font-weight: 700; color: var(--c-text); line-height: 1.35; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.lprev__d { font-size: 12px; color: var(--c-muted); line-height: 1.45; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.lprev__h { font-size: 10.5px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--c-primary); display: inline-flex; align-items: center; gap: 5px; margin-top: 2px; }
.lprev__h i { font-size: 9px; }
body.ui-squared .lprev { border-radius: 3px; }
@media (max-width: 480px) { .lprev__img { width: 92px; } }
/* ───────── Blog (editorial articles) ───────── */
.blog-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; margin: 0 0 30px; }
/* ── BLOG INDEX (magazin) ── */
.blogx-hero { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; margin: 34px 0 24px; padding-bottom: 18px; border-bottom: 2px solid var(--c-text); }
.blogx-hero__kick { display: inline-flex; align-items: center; gap: 8px; font-size: 11px; font-weight: 800; letter-spacing: .16em; color: var(--blogx-kick, #c2aa47); margin-bottom: 8px; }
.blogx-hero h1 { font-family: var(--font-display); font-size: clamp(2rem, 4vw, 3rem); margin: 0 0 6px; letter-spacing: -.02em; color: var(--c-text); }
.blogx-hero p { margin: 0; color: var(--c-muted); font-size: 14.5px; max-width: 560px; }
.blogx-hero__count { font-size: 13px; color: var(--c-muted); white-space: nowrap; }
.blogx-hero__count strong { font-family: var(--font-display); font-size: 26px; color: var(--blogx-kick, #c2aa47); margin-right: 4px; }
/* Blog etiketleri ("BLOG", "ÖNE ÇIKAN") — varsayılan ALTIN; admin Blog ayarlarından
   site rengine (mavi) veya özel renge çevrilebilir (--blogx-tag-bg/tx, public.php). */
.blogx-tag { display: inline-flex; align-items: center; gap: 6px; align-self: flex-start; background: var(--blogx-tag-bg, linear-gradient(120deg, #dcc566, #c2aa47 45%, #9a842b)); color: var(--blogx-tag-tx, #241c04); font-size: 10px; font-weight: 800; letter-spacing: .1em; padding: 4px 10px; border-radius: 999px; }
.blogx-tag--gold { background: var(--blogx-tag-bg, linear-gradient(120deg, #dcc566, #c2aa47 45%, #9a842b)); color: var(--blogx-tag-tx, #241c04); }
.blogx-feat { display: flex; align-items: flex-end; min-height: 340px; border-radius: 18px; overflow: hidden; padding: 28px 30px; margin-bottom: 26px; text-decoration: none; background: linear-gradient(120deg, color-mix(in srgb, var(--c-primary) 60%, #000), color-mix(in srgb, var(--c-primary) 25%, #000)) center/cover no-repeat; transition: transform .2s, box-shadow .2s; }
.blogx-feat:hover { transform: translateY(-3px); box-shadow: 0 26px 50px -26px rgba(0,0,0,.7); }
.blogx-feat__body { max-width: 640px; display: flex; flex-direction: column; gap: 12px; }
.blogx-feat__body h2 { font-family: var(--font-display); font-size: clamp(1.4rem, 2.6vw, 2.1rem); line-height: 1.15; margin: 0; color: #fff; }
.blogx-feat__body p { margin: 0; color: rgba(255,255,255,.85); font-size: 14px; line-height: 1.6; }
.blogx-meta { display: flex; flex-wrap: wrap; gap: 8px 18px; font-size: 12.5px; color: rgba(255,255,255,.75); align-items: center; }
.blogx-meta i { color: #dcc566; margin-right: 4px; }
.blogx-feat__go { font-weight: 800; color: #dcc566 !important; }
.blogx-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; margin: 0 0 30px; }
/* ızgara kartları = öne çıkanın küçüğü: kapak tam arkaplan, yazılar görselin üstünde */
.blogx-card { display: flex; flex-direction: column; justify-content: space-between; min-height: 320px; padding: 12px 14px 14px; border-radius: 14px; overflow: hidden; text-decoration: none; background: linear-gradient(120deg, color-mix(in srgb, var(--c-primary) 60%, #000), color-mix(in srgb, var(--c-primary) 28%, #000)) center/cover no-repeat; transition: transform .2s, box-shadow .2s; }
.blogx-card:hover { transform: translateY(-4px); box-shadow: 0 22px 44px -22px rgba(0,0,0,.75); }
.blogx-card__top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.blogx-card__date { background: rgba(8,12,22,.72); color: #fff; font-size: 10.5px; font-weight: 700; padding: 4px 9px; border-radius: 999px; }
.blogx-card__body { display: flex; flex-direction: column; gap: 7px; margin-top: auto; padding-top: 40px; }
.blogx-card__title { font-family: var(--font-display); font-size: 16.5px; font-weight: 800; line-height: 1.3; color: #fff; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.blogx-card__ex { font-size: 12.5px; line-height: 1.55; color: rgba(255,255,255,.82); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.blogx-card .blogx-meta { font-size: 11.5px; }
.blogx-card__go { margin-left: auto; font-weight: 800; color: #dcc566 !important; }
.blogx-card:hover .blogx-card__go i { transform: translateX(3px); transition: transform .15s; }
/* Diğer Yazılar — öne-çıkan tarzı mini kapak kartları */
.blogx-minis { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; align-items: stretch; }
.blogx-mini { position: relative; display: flex; flex-direction: column; justify-content: space-between; align-items: flex-start; min-height: 210px; padding: 15px 17px; border-radius: 14px; overflow: hidden; text-decoration: none; background: linear-gradient(120deg, color-mix(in srgb, var(--c-primary) 60%, #000), color-mix(in srgb, var(--c-primary) 28%, #000)) center/cover no-repeat; transition: transform .2s, box-shadow .2s; }
.blogx-mini:hover { transform: translateY(-3px); box-shadow: 0 20px 40px -22px rgba(0,0,0,.7); }
.blogx-mini__body { display: flex; flex-direction: column; gap: 9px; margin-top: auto; width: 100%; }
/* başlığa 2 satırlık sabit yükseklik ver → tek/çift satır kartlarda meta satırları aynı hizada */
.blogx-mini__title { font-family: var(--font-display); font-size: 17px; font-weight: 800; line-height: 1.3; color: #fff; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; min-height: 2.6em; }
.blogx-mini .blogx-meta { font-size: 11.5px; row-gap: 5px; }
/* "Oku →" kendi satırında, sağa hizalı — her kartta aynı yerde */
.blogx-mini__go { flex-basis: 100%; text-align: right; margin-top: 1px; font-weight: 800; color: #dcc566 !important; }
.blogx-mini:hover .blogx-mini__go i { transform: translateX(3px); transition: transform .15s; }
body.ui-squared .blogx-mini { border-radius: var(--ui-radius, 4px); }
@media (max-width: 640px) { .blogx-minis { grid-template-columns: 1fr; } .blogx-mini { min-height: 175px; } }
body.ui-squared .blogx-feat, body.ui-squared .blogx-card, body.ui-squared .blogx-tag { border-radius: var(--ui-radius, 4px); }
@media (max-width: 1200px) { .blogx-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 860px)  { .blogx-grid { grid-template-columns: repeat(2, 1fr); gap: 14px; } .blogx-feat { min-height: 260px; } .blogx-hero { flex-direction: column; align-items: flex-start; } }
@media (max-width: 520px)  { .blogx-grid { grid-template-columns: 1fr; } }
@media (max-width: 1200px) { .blog-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 860px)  { .blog-grid { grid-template-columns: repeat(2, 1fr); gap: 14px; } }
@media (max-width: 520px)  { .blog-grid { grid-template-columns: 1fr; } }
.blog-card { display: flex; flex-direction: column; background: var(--c-surface); border: 1px solid color-mix(in srgb, var(--c-text) 10%, transparent); border-radius: 14px; overflow: hidden; text-decoration: none; transition: transform .2s, border-color .2s, box-shadow .2s; }
.blog-card:hover { transform: translateY(-3px); border-color: var(--c-primary); box-shadow: 0 16px 34px -18px color-mix(in srgb, var(--c-primary) 60%, transparent); }
.blog-card__cov { display: grid; place-items: center; aspect-ratio: 16 / 9; background: linear-gradient(135deg, color-mix(in srgb, var(--c-primary) 80%, #000), color-mix(in srgb, var(--c-primary) 45%, #000)); background-size: cover; background-position: center; color: #fff; font-size: 30px; }
.blog-card__body { display: flex; flex-direction: column; gap: 8px; padding: 16px 18px; }
.blog-card__title { font-family: var(--font-display); font-size: 18px; font-weight: 800; line-height: 1.25; color: var(--c-text); }
.blog-card__ex { font-size: 13.5px; line-height: 1.55; color: var(--c-muted); }
.blog-card__meta { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 4px; font-size: 12px; color: var(--c-muted); }
.blog-card__meta i { color: var(--c-primary); margin-right: 4px; }
.blog-single { background: var(--c-surface); border: 1px solid color-mix(in srgb, var(--c-text) 10%, transparent); border-radius: 16px; padding: 30px 32px; margin: 24px auto; max-width: 860px; }
.blog-single__back { display: inline-flex; align-items: center; gap: 7px; font-size: 13px; font-weight: 700; color: var(--c-primary); text-decoration: none; margin-bottom: 14px; }
.blog-single__title { font-family: var(--font-display); font-size: clamp(1.7rem, 3.4vw, 2.6rem); font-weight: 800; line-height: 1.15; letter-spacing: -.02em; margin: 0 0 14px; color: var(--c-text); }
.blog-single__meta { display: flex; flex-wrap: wrap; gap: 18px; font-size: 13px; color: var(--c-muted); margin-bottom: 20px; }
.blog-single__meta i { color: var(--c-primary); margin-right: 5px; }
.blog-single__cov { width: 100%; aspect-ratio: 16 / 8; background-size: cover; background-position: center; border-radius: 12px; margin-bottom: 22px; }
.blog-single__body { font-size: 16.5px; line-height: 1.8; color: var(--c-text); }
.blog-single__body img { max-width: 100%; height: auto; border-radius: 10px; margin: 16px 0; }
.blog-single__body h2, .blog-single__body h3 { font-family: var(--font-display); margin: 26px 0 12px; color: var(--c-text); }
.blog-single__body p { margin: 0 0 16px; }
.blog-single__body a { color: var(--c-primary); }
/* source attribution (links to the peptidturkiye topic) */
.blog-single__source { max-width: 820px; margin: 26px auto 0; padding: 13px 16px; background: color-mix(in srgb, var(--c-primary) 8%, var(--c-surface)); border-left: 3px solid var(--c-primary); border-radius: 10px; font-size: 13.5px; color: var(--c-muted); display: flex; align-items: center; gap: 10px; }
.blog-single__source i { color: var(--c-primary); }
.blog-single__source a { color: var(--c-primary); font-weight: 700; text-decoration: none; }
.blog-single__source a:hover { text-decoration: underline; }
body.ui-squared .blog-single__source { border-radius: var(--ui-radius, 4px); }
/* blog comments + replies */
/* ---- Blog yorumları — soru-cevap cevap alanıyla aynı kart görünümü ---- */
/* makaleyle (.blog-single = 860px) AYNI genişlik → sol-sağ kenarlar hizalı */
.bcom { max-width: 860px; margin: 30px auto 0; }
.bcom__form { display: flex; flex-direction: column; gap: 12px; margin: 0 0 28px; padding: 18px; background: var(--c-surface); border: 1px solid color-mix(in srgb, var(--c-text) 12%, transparent); border-radius: 16px; box-shadow: 0 14px 34px -28px rgba(0,0,0,.55); }
.bcom__form textarea, .bcom__replybox textarea { width: 100%; border: 1px solid color-mix(in srgb, var(--c-text) 16%, transparent); border-radius: 12px; background: var(--c-bg); color: var(--c-text); padding: 13px 15px; font: inherit; font-size: 14.5px; line-height: 1.6; resize: vertical; min-height: 96px; transition: border-color .15s, box-shadow .15s; }
.bcom__form textarea:focus, .bcom__replybox textarea:focus { outline: none; border-color: var(--c-primary); box-shadow: 0 0 0 3px color-mix(in srgb, var(--c-primary) 16%, transparent); }
.bcom__form .btn { align-self: flex-start; }
.bcom__replybox textarea { min-height: 72px; }
.bcom__login { color: var(--c-muted); padding: 16px 18px; margin: 0 0 26px; background: var(--c-surface); border: 1px dashed color-mix(in srgb, var(--c-text) 22%, transparent); border-radius: 14px; }
.bcom__login a { color: var(--c-primary); font-weight: 700; }
.bcom__empty { color: var(--c-muted); text-align: center; padding: 28px 0; }
.bcom__list { display: flex; flex-direction: column; gap: 14px; }
.bcom__item { display: flex; gap: 14px; padding: 16px 18px; background: var(--c-surface); border: 1px solid color-mix(in srgb, var(--c-text) 10%, transparent); border-radius: 14px; }
.bcom__ava { width: 46px; height: 46px; border-radius: 50%; flex: none; background: var(--c-bg) center/cover no-repeat; border: 2px solid color-mix(in srgb, var(--c-primary) 42%, transparent); }
.bcom__main { flex: 1; min-width: 0; }
.bcom__head { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; margin-bottom: 5px; }
.bcom__head strong { font-family: var(--font-display); font-weight: 800; text-transform: uppercase; letter-spacing: .05em; color: var(--c-primary); font-size: 14.5px; line-height: 1.2; }
.bcom__head small { font-size: 12px; color: var(--c-muted); font-weight: 600; }
.bcom__text { margin: 0 0 6px; font-size: 15px; line-height: 1.7; color: var(--c-text); word-break: break-word; }
.bcom__replybox { font-size: 13px; }
.bcom__replybox summary { cursor: pointer; color: var(--c-muted); font-weight: 700; list-style: none; display: inline-flex; gap: 6px; align-items: center; padding: 3px 0; }
.bcom__replybox summary:hover { color: var(--c-primary); }
.bcom__replybox summary::-webkit-details-marker { display: none; }
.bcom__replybox form { margin: 10px 0 4px; display: flex; flex-direction: column; gap: 8px; align-items: flex-start; }
.bcom__item--reply { margin: 14px 0 0; padding: 13px 15px; background: var(--c-bg); border-color: color-mix(in srgb, var(--c-text) 9%, transparent); }
.bcom__item--reply .bcom__ava { width: 36px; height: 36px; }
body.ui-squared .bcom__form, body.ui-squared .bcom__item, body.ui-squared .bcom__login,
body.ui-squared .bcom__form textarea, body.ui-squared .bcom__replybox textarea { border-radius: var(--ui-radius, 4px); }
.blog-related { max-width: 860px; margin: 28px auto 0; }   /* makale + yorumlarla aynı genişlik/hiza */
body.ui-squared .blog-card, body.ui-squared .blog-single, body.ui-squared .blog-card__cov, body.ui-squared .blog-single__cov { border-radius: var(--ui-radius, 4px); }
.q-author-line { display: flex; align-items: center; gap: 14px; margin-bottom: 24px; padding-bottom: 18px; border-bottom: 1px solid color-mix(in srgb, var(--c-text) 12%, transparent); }
.q-author-line .ava { flex: 0 0 48px; width: 48px; height: 48px; border-radius: 50%; background-size: cover; background-position: center; border: 1.5px solid color-mix(in srgb, var(--c-text) 14%, transparent); }
.q-author-line > div { min-width: 0; }   /* let the name/date column shrink + wrap instead of squishing the avatar */
.q-author-line .who { font-weight: 700; font-size: 15px; color: var(--c-text); }
.q-author-line .when { font-size: 11px; color: var(--c-muted); text-transform: uppercase; letter-spacing: .15em; }
@media (max-width: 480px) {
  /* tighter date·views line so "görüntülenme" fits / wraps cleanly on phones */
  .q-author-line .when { letter-spacing: .06em; line-height: 1.5; }
}

.answers-block h2 { font-family: var(--font-display); font-size: 24px; margin: 36px 0 20px; padding-bottom: 14px; border-bottom: 4px solid var(--c-text); display: flex; align-items: baseline; gap: 10px; text-transform: uppercase; }
.answer { margin-bottom: 18px; }

/* Shared comment/answer head + body presentation */
/* stacked author block: name → @handle → rank/badge meta — sits beside the avatar in .ans-top */
.ans-head { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 3px; font-size: 12px; color: var(--c-muted); }
.ans-name { font-family: var(--font-display); font-weight: 800; text-transform: uppercase; letter-spacing: .05em; color: var(--c-primary); font-size: 15px; line-height: 1.2; }
.ans-name:hover { color: var(--c-accent); }
.ans-handle { font-family: var(--font-sans); font-size: 12.5px; font-weight: 600; color: var(--c-muted); line-height: 1.2; }
.ans-handle:hover { color: var(--c-primary); }
.ans-meta { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 3px; }
.ans-badge { display: inline-block; padding: 2px 8px; background: #dc2626; color: #fff; font-family: var(--font-sans); font-size: 10px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; border-radius: 999px; }
body.ui-squared .ans-badge { border-radius: 3px; }
.ans-when { color: var(--c-muted); font-size: 12px; font-weight: 600; }
.ans-when i { opacity: .7; margin-right: 3px; }
.ans-ava-sm { width: 28px; height: 28px; border-radius: 50%; background-size: cover; background-position: center; border: 1px solid color-mix(in srgb, var(--c-text) 14%, transparent); }

/* Answer body — proper HTML render */
.ans-body { color: var(--c-text); line-height: 1.7; font-size: 15px; }
.ans-body p { margin: 0 0 .8em; }
.ans-body p:last-child { margin-bottom: 0; }
.ans-body strong, .ans-body b { font-weight: 700; }
.ans-body em, .ans-body i { font-style: italic; }
.ans-body ul, .ans-body ol { margin: .6em 0 .8em; padding-left: 1.5em; }
.ans-body li { margin: .2em 0; }
.ans-body blockquote { margin: .8em 0; padding: 10px 16px; border-left: 3px solid var(--c-primary); background: color-mix(in srgb, var(--c-text) 4%, transparent); color: var(--c-muted); }
.ans-body a { color: var(--c-primary); text-decoration: underline; font-weight: 600; }
.ans-body a:hover { color: var(--c-accent); }
.ans-body code { background: color-mix(in srgb, var(--c-text) 8%, transparent); padding: 2px 6px; font-family: "JetBrains Mono", Consolas, monospace; font-size: 13px; }
.ans-body img { max-width: 100%; height: auto; margin: 10px 0; border-radius: 8px; }
.ans-body h2, .ans-body h3, .ans-body h4 { font-family: var(--font-display); margin: 1em 0 .5em; font-weight: 700; letter-spacing: -.01em; text-transform: none; font-size: 1.2em; }

/* Card variant — generous layout with vote buttons */
.answer-list[data-variant="card"] .answer { background: var(--c-surface); padding: 24px 30px; border: 1px solid color-mix(in srgb, var(--c-text) 10%, transparent); margin-bottom: 18px; }
.answer-list[data-variant="card"] .answer.is-best { border-color: #10b981; border-left: 4px solid #10b981; padding-left: 26px; }
/* ── Reply (nested answer/comment) — the visual style is admin-selectable via
   `reply_thread` (Görünüm): timeline (clean vertical line + dots, default),
   flat (no lines, just label + tint), line (stepped elbow connectors).
   Common base here; the three looks are body.rthread-* overrides below. ── */
.answer-list[data-variant="card"] .answer--reply {
  --rt-indent: 40px; --tl-step: 22px; --tl-gut: 18px;   /* indent, per-depth step, spine gutter */
  position: relative;
  margin-top: 6px; margin-bottom: 10px;
  padding: 20px 24px;
  background: color-mix(in srgb, var(--c-primary) 5%, var(--c-surface)); }
.answer-list[data-variant="card"] .answer--reply .ans-top { gap: 12px; margin-bottom: 12px; }
.answer-list[data-variant="card"] .answer--reply .ans-ava { flex-basis: 46px; width: 46px; height: 46px; }
.answer-list[data-variant="card"] .answer--reply .ans-body { font-size: 14.5px; }
.answer-list[data-variant="card"] .answer--reply .ans-actions { margin-top: 14px; padding-top: 12px; }

/* ── The connector is ONE CONTINUOUS spine at a fixed x — the depth term cancels out
   (container-x = rt-indent − tl-gut for EVERY reply), so a whole nested thread reads as a
   single unbroken line, with a short branch crossing to each reply. ── */

/* ---- style: TIMELINE (default) — continuous spine + a straight branch to each reply */
body.rthread-timeline .answer-list[data-variant="card"] .answer--reply {
  margin-left: calc(var(--rt-indent) + var(--rd-extra, 0) * var(--tl-step)); margin-top: 0; margin-bottom: 18px; }
body.rthread-timeline .answer-list[data-variant="card"] .answer--reply::before {
  content: ""; position: absolute; width: 2px; top: -18px; bottom: 0;
  left: calc(-1 * var(--tl-gut) - var(--rd-extra, 0) * var(--tl-step));
  background: color-mix(in srgb, var(--c-primary) 34%, transparent); }
body.rthread-timeline .answer-list[data-variant="card"] .answer--reply:not(:has(+ .answer--reply))::before {
  bottom: auto; height: 50px; }            /* last reply: stop spine at its branch (no tail) */
body.rthread-timeline .answer-list[data-variant="card"] .answer--reply::after {
  content: ""; position: absolute; top: 32px; height: 2px;
  left: calc(-1 * var(--tl-gut) - var(--rd-extra, 0) * var(--tl-step));
  width: calc(var(--tl-gut) + var(--rd-extra, 0) * var(--tl-step));
  background: color-mix(in srgb, var(--c-primary) 34%, transparent); }

/* ---- style: FLAT — the same continuous spine only (thicker, no branch) */
body.rthread-flat .answer-list[data-variant="card"] .answer--reply {
  margin-left: calc(var(--rt-indent) + var(--rd-extra, 0) * var(--tl-step)); }
body.rthread-flat .answer-list[data-variant="card"] .answer--reply::before {
  content: ""; position: absolute; width: 3px; top: -18px; bottom: 0; border-radius: 3px;
  left: calc(-1 * var(--tl-gut) - var(--rd-extra, 0) * var(--tl-step));
  background: color-mix(in srgb, var(--c-primary) 45%, transparent); }
body.rthread-flat .answer-list[data-variant="card"] .answer--reply:not(:has(+ .answer--reply))::before {
  bottom: auto; height: 50px; }

/* ---- style: LINE — continuous spine + a rounded elbow branch to each reply */
body.rthread-line .answer-list[data-variant="card"] .answer--reply {
  margin-left: calc(var(--rt-indent) + var(--rd-extra, 0) * var(--tl-step)); }
body.rthread-line .answer-list[data-variant="card"] .answer--reply::before {
  content: ""; position: absolute; width: 2px; top: -18px; bottom: 0;
  left: calc(-1 * var(--tl-gut) - var(--rd-extra, 0) * var(--tl-step));
  background: color-mix(in srgb, var(--c-primary) 42%, transparent); }
body.rthread-line .answer-list[data-variant="card"] .answer--reply:not(:has(+ .answer--reply))::before {
  bottom: auto; height: 44px; }
body.rthread-line .answer-list[data-variant="card"] .answer--reply::after {
  content: ""; position: absolute; top: 16px; height: 18px;
  left: calc(-1 * var(--tl-gut) - var(--rd-extra, 0) * var(--tl-step));
  width: calc(var(--tl-gut) + var(--rd-extra, 0) * var(--tl-step));
  border-bottom: 2px solid color-mix(in srgb, var(--c-primary) 42%, transparent);
  border-bottom-left-radius: 11px; }
.atype-reply { color: var(--c-primary); background: color-mix(in srgb, var(--c-primary) 12%, transparent); }
.atype-reply__to { font-weight: 800; }
/* "Yanıtla" button highlight */
.ans-mini--reply:hover { border-color: var(--c-primary); color: #fff; background: var(--c-primary); }
/* context banner on the MAIN answer form (reply / answering-question modes) */
.ans-replybar[hidden] { display: none !important; }   /* the class display:flex must NOT beat the hidden attr */
.ans-replybar { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap;
  margin: 0 0 14px; padding: 10px 14px; border-radius: 11px;
  border: 1px solid color-mix(in srgb, var(--c-primary) 35%, transparent);
  border-left: 4px solid var(--c-primary);
  background: color-mix(in srgb, var(--c-primary) 8%, var(--c-surface)); }
.ans-replybar__txt { font-size: 13.5px; color: var(--c-text); }
.ans-replybar__txt i { color: var(--c-primary); margin-right: 4px; }
.ans-replybar__name { color: var(--c-primary); font-weight: 800; }
.ans-replybar__x { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; font-size: 12.5px; font-weight: 700;
  padding: 6px 12px; border-radius: 8px; border: 1px solid color-mix(in srgb, var(--c-text) 18%, transparent);
  background: var(--c-surface); color: var(--c-muted); transition: all .15s; }
.ans-replybar__x:hover { border-color: var(--c-accent); color: #fff; background: var(--c-accent); }
.answer-form.is-replying { box-shadow: 0 0 0 2px color-mix(in srgb, var(--c-primary) 35%, transparent); }
body.ui-squared .ans-replybar, body.ui-squared .ans-replybar__x { border-radius: var(--ui-radius, 4px); }
.atype-reply__to::before { content: "@"; opacity: .7; }
@media (max-width: 600px) {
  /* tighter indent + spine step on phones — the continuous-spine math uses these vars */
  .answer-list[data-variant="card"] .answer--reply { --rt-indent: 26px; --tl-step: 15px; --tl-gut: 13px; padding: 16px 18px; }
}
/* avatar + author in a top header row; the comment text below spans FULL WIDTH (no avatar-column indent) */
.answer-list[data-variant="card"] .ans-top { display: flex; align-items: center; gap: 14px; margin-bottom: 14px; }
.answer-list[data-variant="card"] .ans-ava { display: block; flex: 0 0 56px; width: 56px; height: 56px; border-radius: 50%; background-size: cover; background-position: center; border: 2px solid color-mix(in srgb, var(--c-text) 12%, transparent); }
.answer-list[data-variant="card"] .ans-actions { display: flex; align-items: center; gap: 8px; margin-top: 16px; padding-top: 14px; border-top: 1px solid color-mix(in srgb, var(--c-text) 8%, transparent); }
.answer-list[data-variant="card"] .vote { background: transparent; border: 1px solid color-mix(in srgb, var(--c-text) 14%, transparent); width: 32px; height: 32px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; color: var(--c-muted); cursor: pointer; transition: all .15s; }
.answer-list[data-variant="card"] .vote:hover { background: var(--c-primary); color: var(--c-bg); border-color: var(--c-primary); }
.answer-list[data-variant="card"] .vote:disabled { opacity: .5; cursor: default; }
.answer-list[data-variant="card"] .vote.is-on { background: var(--c-primary); color: var(--c-bg); border-color: var(--c-primary); }
.answer-list[data-variant="card"] .vote.vote-down.is-on { background: var(--c-accent); border-color: var(--c-accent); }
.answer-list[data-variant="card"] .vote-n { font-family: var(--font-display); font-weight: 800; font-size: 16px; color: var(--c-text); min-width: 18px; }
.answer-list[data-variant="card"] .ans-reply { margin-left: auto; display: inline-flex; align-items: center; gap: 6px; padding: 7px 16px; background: transparent; border: 1.5px solid color-mix(in srgb, var(--c-text) 18%, transparent); border-radius: 999px; color: var(--c-text); font-family: var(--font-sans); font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; cursor: pointer; transition: all .15s; }
.answer-list[data-variant="card"] .ans-reply:hover { border-color: var(--c-primary); color: var(--c-primary); }
.answer-list[data-variant="card"] .best-badge { color: #10b981; font-family: var(--font-sans); font-weight: 800; font-size: 11px; text-transform: uppercase; letter-spacing: .12em; }
.answer-list[data-variant="card"] .ans-reply-form { margin-top: 14px; }
@media (max-width: 600px) {
  /* smaller avatar in the header row on phones */
  .answer-list[data-variant="card"] .ans-top { gap: 12px; }
  .answer-list[data-variant="card"] .ans-ava { flex-basis: 48px; width: 48px; height: 48px; }
}

.answer-list[data-variant="bubble"] .answer { background: var(--c-surface); padding: 22px; border-left: 3px solid var(--c-primary); }
.answer-list[data-variant="bubble"] .answer-meta { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; font-size: 11px; color: var(--c-muted); text-transform: uppercase; letter-spacing: .12em; font-weight: 700; }
.answer-list[data-variant="bubble"] .answer-body { color: var(--c-text); line-height: 1.65; }

/* --- card variant polish (rounded, soft shadow, clearer best-answer, grouped vote pill) --- */
.answer-list[data-variant="card"] .answer { border-radius: 16px; box-shadow: 0 1px 2px rgba(0,0,0,.04), 0 6px 22px rgba(0,0,0,.05); transition: box-shadow .18s, transform .18s, border-color .18s; }
.answer-list[data-variant="card"] .answer:hover { box-shadow: 0 4px 10px rgba(0,0,0,.06), 0 14px 38px rgba(0,0,0,.09); transform: translateY(-2px); }
.answer-list[data-variant="card"] .answer.is-best { border-color: #10b981; box-shadow: 0 0 0 1px #10b981, 0 10px 30px rgba(16,185,129,.14); background: linear-gradient(180deg, color-mix(in srgb, #10b981 6%, var(--c-surface)), var(--c-surface) 120px); }
.answer-list[data-variant="card"] .ans-ava { box-shadow: 0 4px 12px rgba(0,0,0,.12); }
.answer-list[data-variant="card"] .answer.is-best .ans-ava { border-color: #10b981; box-shadow: 0 0 0 3px color-mix(in srgb,#10b981 30%,transparent); }
/* group the up/score/down into a single pill */
.answer-list[data-variant="card"] .ans-actions { gap: 6px; }
.answer-list[data-variant="card"] .vote { border-radius: 999px; }
.answer-list[data-variant="card"] .vote-n { padding: 0 4px; }
.answer-list[data-variant="card"] .best-badge { display: inline-flex; align-items: center; gap: 6px; padding: 4px 12px; background: color-mix(in srgb, #10b981 14%, transparent); border-radius: 999px; }

.answer-list[data-variant="threaded"] .answer { background: var(--c-surface); border-left: 2px solid color-mix(in srgb, var(--c-text) 14%, transparent); padding: 18px 22px; }
.answer-list[data-variant="threaded"] .answer.is-best { border-left-color: #10b981; border-left-width: 4px; }
.answer-list[data-variant="threaded"] .answer-meta { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; font-size: 11px; color: var(--c-muted); text-transform: uppercase; letter-spacing: .12em; font-weight: 700; }

.answer-list[data-variant="minimal"] .answer { padding: 20px 0; border-bottom: 1px solid color-mix(in srgb, var(--c-text) 10%, transparent); }
.answer-list[data-variant="minimal"] .answer:last-child { border-bottom: 0; }
.answer-list[data-variant="minimal"] .answer-meta { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; font-size: 12px; color: var(--c-muted); }

.answer-list[data-variant="voted"] .answer { display: grid; grid-template-columns: 60px 1fr; gap: 18px; background: var(--c-surface); padding: 22px; border: 1px solid color-mix(in srgb, var(--c-text) 10%, transparent); }
.answer-list[data-variant="voted"] .vote-col { display: flex; flex-direction: column; align-items: center; gap: 6px; color: var(--c-muted); }
.answer-list[data-variant="voted"] .vote-col .n { font-family: var(--font-display); font-size: 24px; font-weight: 800; color: var(--c-text); }
.answer-list[data-variant="voted"] .vote-col button { background: transparent; border: 0; color: inherit; padding: 4px; cursor: pointer; transition: color .15s; }
.answer-list[data-variant="voted"] .vote-col button:hover { color: var(--c-primary); }
.answer-list[data-variant="voted"] .answer-meta { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--c-muted); margin-bottom: 8px; text-transform: uppercase; letter-spacing: .1em; font-weight: 700; }

.answer-replies { margin-top: 18px; padding-top: 14px; border-top: 1px dashed color-mix(in srgb, var(--c-text) 14%, transparent); }
.reply { display: flex; gap: 10px; padding: 8px 0; font-size: 13px; }
.reply .ava { width: 28px; height: 28px; flex: 0 0 28px; border-radius: 50%; background-size: cover; background-position: center; }
.reply .who { font-weight: 700; color: var(--c-text); font-size: 12px; text-transform: uppercase; letter-spacing: .08em; }
.reply .when { color: var(--c-muted); font-size: 10px; text-transform: uppercase; letter-spacing: .12em; }

/* ===== Answer vs Comment — clear visual distinction ===== */
.answers-head { display: flex; align-items: center; gap: 12px; }
.answers-head i { color: var(--c-primary); }

/* answer card type flag */
.answer-list[data-variant="card"] .answer { position: relative; }
.answer-flag { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 16px; }
.atype { display: inline-flex; align-items: center; gap: 7px; font-family: var(--font-sans); font-weight: 800; font-size: 11px; letter-spacing: .12em; text-transform: uppercase; padding: 5px 12px; border-radius: 999px; }
.atype-answer { background: color-mix(in srgb, var(--c-primary) 14%, transparent); color: var(--c-primary); }
.atype-best { background: #10b981; color: #fff; box-shadow: 0 4px 14px rgba(16,185,129,.4); }
.atype-when { font-size: 12px; color: var(--c-muted); font-weight: 600; }
.atype-when i { opacity: .7; margin-right: 4px; }

/* grouped vote pill */
.vote-pill { display: inline-flex; align-items: center; gap: 4px; background: color-mix(in srgb, var(--c-text) 5%, transparent); border-radius: 999px; padding: 3px 5px; }
.vote-pill .vote { border: 0 !important; background: transparent !important; width: 30px; height: 30px; }
.vote-pill .vote:hover { background: var(--c-primary) !important; color: var(--c-bg) !important; }
.vote-pill .vote.is-on { background: var(--c-primary) !important; color: var(--c-bg) !important; }
.vote-pill .vote.vote-down.is-on { background: var(--c-accent) !important; }

/* replies (comments under an answer) — nested, clearly secondary */
.answer-replies { margin-top: 18px; padding: 14px 0 4px 16px; border-left: 3px solid color-mix(in srgb, var(--c-primary) 30%, transparent); margin-left: 4px; }
.replies-head { font-size: 11px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--c-muted); margin-bottom: 10px; }
.reply { display: flex; gap: 10px; padding: 8px 0; }
.reply .ava { width: 30px; height: 30px; flex: 0 0 30px; border-radius: 50%; background-size: cover; background-position: center; }
.reply .who { font-weight: 700; color: var(--c-text); font-size: 13px; }
.reply .when { color: var(--c-muted); font-size: 11px; }
.reply-text { margin-top: 2px; font-size: 13.5px; color: var(--c-text); line-height: 1.55; }

/* Question comments — distinct, lighter than answers, with a YORUM tag */
.q-comments { background: color-mix(in srgb, var(--c-text) 3%, var(--c-surface)); border: 1px dashed color-mix(in srgb, var(--c-text) 16%, transparent); border-radius: 14px; padding: 18px 20px; margin: 18px 0 8px; }
.qc-head { display: flex; align-items: center; gap: 10px; font-family: var(--font-display); font-size: 15px; text-transform: uppercase; letter-spacing: .02em; margin: 0; cursor: pointer; list-style: none; user-select: none; }
.qc-head::-webkit-details-marker { display: none; }
.qc-head > i { color: var(--c-accent); }
.qc-toggle { margin-left: auto; color: var(--c-muted); transition: transform .2s ease; }
.qc-collapse[open] .qc-toggle { transform: rotate(180deg); }
.qc-collapse[open] .qc-head { margin-bottom: 12px; }
.qc-collapse > .qc-list { animation: qcfade .2s ease; }
@keyframes qcfade { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
.qc-count { background: color-mix(in srgb, var(--c-text) 10%, transparent); color: var(--c-muted); font-family: var(--font-sans); font-size: 12px; font-weight: 700; padding: 1px 9px; border-radius: 999px; }
.qc-list { list-style: none; margin: 0; padding: 0; }
.qc-item { display: flex; gap: 11px; padding: 11px 0; border-top: 1px solid color-mix(in srgb, var(--c-text) 8%, transparent); }
.qc-item:first-child { border-top: 0; }
.qc-item .ava { width: 34px; height: 34px; flex: 0 0 34px; border-radius: 50%; background-size: cover; background-position: center; }
.qc-meta { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.qc-meta .who { font-weight: 700; font-size: 13px; color: var(--c-text); }
.qc-tag { font-size: 9px; font-weight: 800; letter-spacing: .14em; color: var(--c-accent); border: 1px solid color-mix(in srgb, var(--c-accent) 45%, transparent); border-radius: 4px; padding: 1px 6px; }
.qc-meta .when { font-size: 11px; color: var(--c-muted); }
.qc-text { margin-top: 3px; font-size: 14px; color: var(--c-text); line-height: 1.6; }

.answer-form { background: var(--c-surface); padding: 28px; margin: 22px 0 28px; border: 1px solid color-mix(in srgb, var(--c-text) 12%, transparent); border-left: 4px solid var(--c-primary); }
.ans-rules { font-size: 13px; color: var(--c-muted); line-height: 1.55; background: color-mix(in srgb, var(--c-primary) 6%, transparent); border: 1px solid color-mix(in srgb, var(--c-primary) 22%, transparent); border-radius: 10px; padding: 11px 14px; margin-bottom: 14px; }
.ans-rules i { color: var(--c-primary); margin-right: 4px; }
.ans-rules strong { color: var(--c-text); }
.ans-rules a { color: var(--c-primary); font-weight: 700; }
.answer-form h3 { font-family: var(--font-display); font-size: 18px; margin-bottom: 14px; text-transform: uppercase; letter-spacing: -.01em; }
.answer-form textarea { width: 100%; min-height: 140px; padding: 16px; background: var(--c-bg); color: var(--c-text); border: 1px solid color-mix(in srgb, var(--c-text) 14%, transparent); border-radius: 0; font-family: inherit; font-size: 15px; resize: vertical; }
.answer-form textarea:focus { outline: none; border-color: var(--c-primary); }
.answer-form .row { text-align: right; margin-top: 14px; }
.answer-form__head { display: flex; align-items: center; gap: 14px; margin-bottom: 16px; }
.answer-form__ava { width: 48px; height: 48px; flex: none; border-radius: 50%; background-size: cover; background-position: center; box-shadow: 0 2px 8px rgba(0,0,0,.12); }
.answer-form__intro h3 { font-family: var(--font-display); font-size: 18px; margin: 0 0 2px; text-transform: uppercase; letter-spacing: -.01em; }
.answer-form__intro p { margin: 0; font-size: 13px; color: var(--c-muted); }
/* When the single answer form is DETACHED from its home box and dropped inline
   (reply under a comment, or edit-in-place inside a card) it used to render with
   no background → transparent + overlapping its neighbours. Give it the card
   chrome back so it reads as a self-contained, on-top composer. */
#ansForm.ansform-detached { display: block; position: relative; z-index: 2;
  background: var(--c-surface);
  border: 1px solid color-mix(in srgb, var(--c-text) 14%, transparent);
  border-left: 4px solid var(--c-primary);
  padding: 20px 20px 22px; margin: 14px 0 18px;
  box-shadow: 0 18px 42px -22px rgba(0,0,0,.65), 0 0 0 2px color-mix(in srgb, var(--c-primary) 22%, transparent); }
#ansForm.ansform-detached > .ans-replybar { margin-top: 0; }
#ansForm.ansform-reply { margin-left: 10px; }          /* nested reply: slight inset */
#ansForm.ansform-edit { margin: 4px 0 6px; }            /* already inside a card */
body.ui-squared #ansForm.ansform-detached { border-radius: var(--ui-radius, 0); }
@media (max-width: 640px){
  #ansForm.ansform-detached { padding: 15px 14px 18px; }
  #ansForm.ansform-reply { margin-left: 0; }
}
.ans-accept { display: flex; align-items: flex-start; gap: 10px; margin: 14px 0 2px; font-size: 12.5px; color: var(--c-muted); line-height: 1.5; cursor: pointer; }
.ans-accept input { margin-top: 2px; flex: none; width: 17px; height: 17px; accent-color: var(--c-primary); }
.ans-accept a { color: var(--c-primary); font-weight: 600; }
.cmt-accept { display: flex; align-items: center; gap: 7px; margin: 7px 2px 0; font-size: 11.5px; color: var(--c-muted); cursor: pointer; }
.cmt-accept input { width: 14px; height: 14px; accent-color: var(--c-primary); }
.cmt-accept a { color: var(--c-primary); font-weight: 600; }

/* =========================================================================
   BENZER SORULAR widget (under question)
   ========================================================================= */
.benzer { margin: 30px 0 0; }
.benzer__head {
  font-family: var(--font-display); font-weight: 800; text-transform: uppercase;
  font-size: 16px; letter-spacing: -.005em;
  display: flex; align-items: center; gap: 10px;
  padding: 0 0 12px 14px; margin: 0 0 16px;
  border-bottom: 2px solid var(--c-text);
  border-left: 4px solid var(--c-primary);
}
.benzer__head i { color: var(--c-primary); font-size: 13px; }
.benzer__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
@media (max-width: 720px) { .benzer__grid { grid-template-columns: 1fr; } }
.benzer__card {
  display: flex; flex-direction: column; justify-content: space-between;
  gap: 18px; min-height: 130px; padding: 26px 28px;
  background: linear-gradient(135deg, #0b1d3a 0%, #15295c 100%);
  color: #fff; position: relative; overflow: hidden;
  text-align: center;
}
.benzer__card::before {
  content: ''; position: absolute; left: -40%; top: -50%; width: 180%; height: 200%;
  background: radial-gradient(ellipse 60% 50% at 50% 50%, rgba(255,255,255,.08), transparent 70%),
              radial-gradient(ellipse 40% 30% at 80% 20%, rgba(255,255,255,.04), transparent 60%);
  pointer-events: none;
}
.benzer__card:hover { color: #fff; filter: brightness(1.15); }
.benzer__title {
  font-family: var(--font-display); font-weight: 700; font-size: 15px;
  letter-spacing: -.005em; line-height: 1.3; text-align: center;
  position: relative; z-index: 1; text-transform: none;
}
.benzer__meta { font-size: 11px; opacity: .65; text-transform: uppercase; letter-spacing: .15em; font-weight: 700; position: relative; z-index: 1; }

/* =========================================================================
   AUTH + STATIC + ACCOUNT
   ========================================================================= */
.auth-shell { max-width: 460px; margin: 80px auto; background: var(--c-surface); padding: 40px; border: 1px solid color-mix(in srgb, var(--c-text) 12%, transparent); }
.auth-shell h1 { font-family: var(--font-display); font-size: 28px; text-align: center; margin-bottom: 26px; letter-spacing: -.02em; }
.auth-shell label { display: block; font-size: 11px; font-weight: 700; margin: 14px 0 6px; text-transform: uppercase; letter-spacing: .15em; color: var(--c-muted); }
.auth-shell input[type=text], .auth-shell input[type=email], .auth-shell input[type=password] { width: 100%; padding: 13px 16px; background: var(--c-bg); color: var(--c-text); border: 1px solid color-mix(in srgb, var(--c-text) 14%, transparent); font-family: inherit; font-size: 14px; border-radius: 0; }
.auth-shell input:focus { outline: none; border-color: var(--c-primary); }
.auth-shell .actions { margin-top: 22px; display: flex; flex-direction: column; gap: 10px; }
.auth-shell .actions .btn-primary { width: 100%; justify-content: center; }
.auth-shell .small { font-size: 12px; color: var(--c-muted); text-align: center; margin-top: 16px; text-transform: uppercase; letter-spacing: .1em; }

.static-page { background: var(--c-surface); padding: 40px; margin: 30px 0 60px; border: 1px solid color-mix(in srgb, var(--c-text) 10%, transparent); }
.static-page h1 { font-family: var(--font-display); font-size: 32px; margin-bottom: 22px; }
.static-page .body { line-height: 1.7; font-size: 15px; }

/* ── Polished static pages (hakkımızda, sss, kvkk, çerez, şartlar…) ──────── */
.spage { max-width: none; margin: 24px 0 50px; }
.spage__hero { display: flex; align-items: center; gap: 18px; padding: 26px 28px; border-radius: 18px; color: #fff; background: linear-gradient(120deg, var(--c-primary) 0%, var(--c-grad-2, #0d162e) 100%); box-shadow: 0 16px 40px -22px color-mix(in srgb, var(--c-primary) 75%, transparent); margin-bottom: 22px; }
.spage__ic { flex: none; width: 58px; height: 58px; border-radius: 16px; display: grid; place-items: center; font-size: 24px; background: rgba(255,255,255,.16); }
.spage__hero h1 { margin: 0; font-family: var(--font-display); font-size: 26px; color: #fff; }
.spage__hero p { margin: 5px 0 0; opacity: .9; font-size: 14px; line-height: 1.5; }
.spage__body { background: var(--c-surface); border: 1px solid color-mix(in srgb, var(--c-text) 10%, transparent); border-radius: 16px; padding: 30px 34px; }
.spage__body > :first-child { margin-top: 0; }
.spage__body h2 { font-family: var(--font-display); font-size: 20px; margin: 28px 0 12px; padding-bottom: 9px; border-bottom: 1px solid color-mix(in srgb, var(--c-text) 10%, transparent); }
.spage__body h3 { font-size: 17px; margin: 24px 0 10px; color: var(--c-text); display: flex; align-items: center; gap: 9px; }
.spage__body h3::before { content: ""; flex: none; width: 4px; height: 18px; border-radius: 3px; background: var(--c-primary); }
.spage__body p { font-size: 15px; line-height: 1.8; color: var(--c-text); margin: 0 0 15px; }
.spage__body ul, .spage__body ol { margin: 0 0 16px; padding-left: 2px; list-style: none; }
.spage__body li { position: relative; padding-left: 28px; margin-bottom: 11px; font-size: 14.5px; line-height: 1.7; color: var(--c-text); }
.spage__body ul li::before { content: ""; position: absolute; left: 7px; top: 9px; width: 7px; height: 7px; border-radius: 50%; background: var(--c-primary); }
.spage__body ol { counter-reset: spo; }
.spage__body ol li::before { counter-increment: spo; content: counter(spo); position: absolute; left: 0; top: 1px; width: 20px; height: 20px; border-radius: 6px; background: color-mix(in srgb, var(--c-primary) 14%, transparent); color: var(--c-primary); font-size: 11px; font-weight: 800; display: grid; place-items: center; }
.spage__body a { color: var(--c-primary); font-weight: 600; text-decoration: none; }
.spage__body a:hover { text-decoration: underline; }
.spage__body strong { color: var(--c-text); font-weight: 700; }
.spage__body img { max-width: 100%; height: auto; border-radius: 10px; }
.spage__body blockquote { margin: 0 0 16px; padding: 12px 18px; border-left: 3px solid var(--c-primary); background: color-mix(in srgb, var(--c-primary) 6%, transparent); border-radius: 0 10px 10px 0; color: var(--c-muted); }
@media (max-width: 600px) { .spage__hero { flex-direction: column; text-align: center; } .spage__body { padding: 22px 18px; } }
body.ui-squared .spage__hero, body.ui-squared .spage__body, body.ui-squared .spage__ic { border-radius: var(--ui-radius, 4px); }

/* ── Static-page sidebar (admin: inner_sidebar = left|right|off) ─────────── */
.spage--withsb { display: grid; gap: 24px; align-items: start; max-width: none; margin: 24px 0 50px; }
.spage--sb-right { grid-template-columns: minmax(0,1fr) 300px; }
.spage--sb-left  { grid-template-columns: 300px minmax(0,1fr); }
.spage__col { min-width: 0; }
.page-sb { display: flex; flex-direction: column; gap: 18px; position: sticky; top: 86px; }
.page-sb .widget { background: var(--c-surface); border: 1px solid color-mix(in srgb, var(--c-text) 10%, transparent); border-radius: 16px; overflow: hidden; }
.page-sb__link { display: flex; align-items: center; gap: 10px; padding: 9px 12px; border-radius: 9px; color: var(--c-text); text-decoration: none; font-size: 13.5px; font-weight: 600; }
.page-sb__link:hover { background: color-mix(in srgb, var(--c-primary) 9%, transparent); color: var(--c-primary); }
.page-sb__link i { color: var(--c-primary); width: 16px; text-align: center; flex: none; }
.page-sb__link--q { font-weight: 500; font-size: 13px; align-items: flex-start; }
.page-sb__link--q span { line-height: 1.4; }
@media (max-width: 880px) { .spage--withsb { grid-template-columns: 1fr; } .page-sb { position: static; } }
body.ui-squared .page-sb .widget { border-radius: var(--ui-radius, 4px); }

/* ── Consolidated "Site Kuralları" hub (left tabs + instant panels) ─────── */
.srules { display: grid; grid-template-columns: 256px minmax(0,1fr); gap: 22px; align-items: start; margin: 22px 0 50px; }
.srules__side { position: sticky; top: 86px; background: var(--c-surface); border: 1px solid color-mix(in srgb, var(--c-text) 10%, transparent); border-radius: 16px; padding: 10px; display: flex; flex-direction: column; gap: 4px; }
.srules__tab { display: flex; align-items: center; gap: 11px; padding: 12px 14px; border-radius: 11px; color: var(--c-text); cursor: pointer; font-weight: 600; font-size: 13.7px; line-height: 1.3; border: 0; background: transparent; text-align: left; width: 100%; font-family: inherit; transition: background .15s, color .15s; }
.srules__tab i { flex: none; width: 18px; text-align: center; color: var(--c-primary); transition: color .15s; }
.srules__tab:hover { background: color-mix(in srgb, var(--c-primary) 9%, transparent); }
.srules__tab.is-active { background: linear-gradient(120deg, var(--c-primary), var(--c-grad-2, #0d162e)); color: #fff; box-shadow: 0 10px 24px -14px color-mix(in srgb, var(--c-primary) 80%, transparent); }
.srules__tab.is-active i { color: #fff; }
.srules__main { min-width: 0; }
.srules__panel { display: none; animation: srfade .25s ease; }
.srules__panel.is-active { display: block; }
@keyframes srfade { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.srules__ptitle { font-family: var(--font-display); font-size: 21px; margin: 0 0 16px; display: flex; align-items: center; gap: 10px; color: var(--c-text); }
.srules__ptitle i { color: var(--c-primary); }
.srules__empty { color: var(--c-muted); padding: 36px; text-align: center; }
.srules__current { display: none; }   /* desktop: hidden (the sidebar shows all tabs) */
@media (max-width: 840px) {
  .srules { grid-template-columns: 1fr; }
  /* ── side nav becomes a tap-to-open DROPDOWN (no sideways scrolling to discover) ── */
  .srules__side { position: relative; flex-direction: column; overflow: visible; gap: 0; padding: 0; }
  .srules__current { display: flex; align-items: center; justify-content: space-between; gap: 10px; width: 100%; padding: 14px 16px; border: 0; background: var(--c-surface); color: var(--c-text); font-family: inherit; font-weight: 800; font-size: 14.5px; cursor: pointer; border-radius: 16px; }
  .srules__current > span { display: inline-flex; align-items: center; gap: 9px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .srules__current > span i { color: var(--c-primary); }
  .srules__current > i:last-child { color: var(--c-muted); transition: transform .2s; flex: none; }
  .srules__side.open .srules__current { border-radius: 16px 16px 0 0; }
  .srules__side.open .srules__current > i:last-child { transform: rotate(180deg); }
  /* the tab list — collapsed; expands downward when open */
  .srules__side .srules__tab { display: none; border-radius: 0; }
  .srules__side.open .srules__tab { display: flex; border-top: 1px solid color-mix(in srgb, var(--c-text) 8%, transparent); }
  body.ui-squared .srules__current { border-radius: var(--ui-radius, 4px); }
}
body.ui-squared .srules__side, body.ui-squared .srules__tab { border-radius: var(--ui-radius, 4px); }

.dashboard { display: grid; grid-template-columns: 320px 1fr; gap: 30px; margin: 36px 0 80px; }
@media (max-width: 900px) { .dashboard { grid-template-columns: 1fr; } }
.dash-side, .dash-main { background: var(--c-surface); padding: 32px; border: 1px solid color-mix(in srgb, var(--c-text) 10%, transparent); }
.dash-side { text-align: center; align-self: start; }
.dash-side .ava-lg { width: 120px; height: 120px; border-radius: 50%; margin: 0 auto 16px; background-size: cover; background-position: center; border: 3px solid var(--c-primary); }
.dash-side .role { font-size: 10px; color: var(--c-muted); text-transform: uppercase; letter-spacing: .2em; margin-bottom: 16px; font-weight: 700; }
.dash-side .avatar-lg { width: 120px; height: 120px; border-radius: 50%; margin: 0 auto 16px; background-size: cover; background-position: center; border: 3px solid var(--c-primary); box-shadow: 0 8px 24px rgba(0,0,0,.18); }
.dash-side h3 { font-family: var(--font-display); font-size: 22px; margin: 0 0 8px; }
.dash-bio { font-size: 13px; color: var(--c-muted); margin: 12px 0; }
.dash-joined { font-size: 11px; color: var(--c-muted); margin-top: 16px; text-transform: uppercase; letter-spacing: .12em; }
/* reputation */
.rep-rank { display: flex; align-items: center; justify-content: center; gap: 8px; margin: 4px 0 6px; }
.rep-stars i { color: #f59e0b; font-size: 14px; }
.rep-rank__label { font-family: var(--font-display); font-weight: 800; font-size: 13px; text-transform: uppercase; letter-spacing: .05em; color: var(--c-text); }
.rep-points { font-size: 12px; color: var(--c-primary); font-weight: 700; }
.rep-points i { margin-right: 3px; }
.rep-prog { margin: 12px 0 4px; }
.rep-prog__bar { height: 8px; border-radius: 999px; background: color-mix(in srgb, var(--c-text) 12%, transparent); overflow: hidden; }
.rep-prog__bar span { display: block; height: 100%; border-radius: 999px; background: var(--c-grad, var(--c-primary)); transition: width .5s ease; }
.rep-prog__lbl { font-size: 11px; color: var(--c-muted); margin-top: 6px; text-align: center; }
.rep-prog__lbl strong { color: var(--c-primary); }
.rep-stat-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin: 18px 0; }
.rep-stat-row > div { background: var(--c-bg); border: 1px solid color-mix(in srgb, var(--c-text) 10%, transparent); border-radius: 10px; padding: 10px 4px; }
.rep-stat-row strong { display: block; font-family: var(--font-display); font-size: 20px; color: var(--c-primary); line-height: 1; }
.rep-stat-row span { font-size: 9.5px; color: var(--c-muted); text-transform: uppercase; letter-spacing: .08em; font-weight: 700; }
.rep-badges { margin-top: 16px; text-align: left; }
.rep-badges__head { font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .1em; color: var(--c-muted); margin-bottom: 10px; }
.rep-badges__list { display: flex; flex-wrap: wrap; gap: 6px; }
.rep-badge { display: inline-flex; align-items: center; gap: 6px; font-size: 11.5px; font-weight: 700; padding: 5px 10px; border-radius: 999px; background: var(--c-bg); border: 1px solid color-mix(in srgb, var(--c-text) 12%, transparent); }
/* nicer badge grid */
.rep-badges__n { background: color-mix(in srgb, var(--c-primary) 16%, transparent); color: var(--c-primary); font-size: 11px; font-weight: 800; padding: 1px 8px; border-radius: 999px; margin-left: 4px; }
.rep-badges__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 9px; }
.rep-badges__empty { font-size: 12.5px; color: var(--c-muted); margin: 6px 0 0; }
.rep-badges__more { display: inline-block; margin-top: 12px; font-size: 12.5px; font-weight: 700; color: var(--c-primary); text-decoration: none; }
.rep-badges__more:hover { text-decoration: underline; }
.rep-badge2 { position: relative; display: flex; flex-direction: column; align-items: center; gap: 7px; padding: 12px 6px; border-radius: 12px; background: var(--c-bg); border: 1px solid color-mix(in srgb, var(--c-text) 10%, transparent); text-align: center; transition: transform .15s, box-shadow .15s; cursor: default; }
.rep-badge2:hover { transform: translateY(-2px); box-shadow: 0 8px 18px rgba(0,0,0,.12); }
.rep-badge2__ic { width: 40px; height: 40px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; color: #fff; font-size: 17px; box-shadow: 0 4px 12px rgba(0,0,0,.18); }
.rep-badge2__nm { font-size: 10.5px; font-weight: 700; color: var(--c-text); line-height: 1.2; }
/* earned vs locked */
.rep-badge2.is-earned { border-color: color-mix(in srgb, var(--c-primary) 30%, transparent); background: color-mix(in srgb, var(--c-primary) 5%, var(--c-bg)); }
.rep-badge2.is-locked { opacity: .55; filter: grayscale(.85); }
.rep-badge2.is-locked .rep-badge2__ic { background: color-mix(in srgb, var(--c-text) 22%, transparent) !important; color: color-mix(in srgb, var(--c-text) 55%, transparent); box-shadow: none; }
.rep-badge2.is-locked:hover { opacity: .8; filter: grayscale(.4); }
/* inline rank stars next to a name (answers, lists) */
.rep-mini { display: inline-flex; align-items: center; gap: 3px; vertical-align: middle; }
.rep-mini i { color: #f59e0b; font-size: 10px; }
.rep-mini .lbl { font-size: 10px; color: var(--c-muted); font-weight: 700; text-transform: uppercase; letter-spacing: .04em; margin-left: 2px; }
/* tier-colored rank chip shown next to usernames on question cards */
.rank-chip { display: inline-flex; align-items: center; gap: 4px; margin-left: 6px; padding: 1px 7px 1px 6px; border-radius: 999px; font-size: 9.5px; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; line-height: 1.7; color: var(--rc, #94a3b8); background: color-mix(in srgb, var(--rc, #94a3b8) 14%, transparent); border: 1px solid color-mix(in srgb, var(--rc, #94a3b8) 35%, transparent); vertical-align: middle; }
.rank-chip i { font-size: 8.5px; }
body.ui-squared .rank-chip { border-radius: 3px; }
/* Admin role badge — red, no star/tier */
.rank-chip--admin { color: #fff; background: #dc2626; border-color: #b91c1c; }
.rank-chip--admin i { color: #fff; }

.dash-main h2 { font-family: var(--font-display); font-size: 22px; margin-bottom: 16px; text-transform: uppercase; letter-spacing: -.015em; }
/* profile tabs */
.ptabs { display: flex; gap: 4px; border-bottom: 2px solid color-mix(in srgb, var(--c-text) 10%, transparent); margin-bottom: 18px; flex-wrap: wrap; }
.ptab { display: inline-flex; align-items: center; gap: 8px; padding: 12px 16px; background: none; border: 0; border-bottom: 3px solid transparent; margin-bottom: -2px; color: var(--c-muted); font-family: var(--font-sans); font-weight: 700; font-size: 14px; cursor: pointer; transition: color .15s, border-color .15s; }
.ptab:hover { color: var(--c-text); }
.ptab.active { color: var(--c-primary); border-bottom-color: var(--c-primary); }
.ptab span { background: color-mix(in srgb, var(--c-text) 10%, transparent); color: var(--c-muted); font-size: 11px; font-weight: 800; padding: 1px 8px; border-radius: 999px; }
.ptab.active span { background: color-mix(in srgb, var(--c-primary) 16%, transparent); color: var(--c-primary); }
.ptab-pane { display: none; }
.ptab-pane.active { display: block; animation: fadeUp .25s ease; }
@keyframes fadeUp { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.dash-main label { display: block; font-size: 11px; font-weight: 700; margin: 14px 0 6px; text-transform: uppercase; letter-spacing: .15em; color: var(--c-muted); }
.dash-main input, .dash-main textarea { width: 100%; padding: 12px 14px; background: var(--c-bg); color: var(--c-text); border: 1px solid color-mix(in srgb, var(--c-text) 14%, transparent); font-family: inherit; font-size: 14px; border-radius: 0; }

/* pagination */
.pagination { display: flex; gap: 0; justify-content: center; margin: 28px 0 0; flex-wrap: wrap; border-top: 1px solid var(--c-text); border-bottom: 1px solid var(--c-text); padding: 0; }
.pagination a, .pagination span { min-width: 44px; padding: 12px 16px; background: transparent; color: var(--c-text); font-family: var(--font-sans); font-size: 13px; font-weight: 700; letter-spacing: .08em; text-align: center; border-right: 1px solid color-mix(in srgb, var(--c-text) 14%, transparent); text-transform: uppercase; }
.pagination a:hover { background: var(--c-text); color: var(--c-bg); }
.pagination .current { background: var(--c-primary); color: var(--c-bg); }

/* =========================================================================
   FOOTER
   ========================================================================= */
.ftr { margin-top: 28px; }
.ftr a { color: color-mix(in srgb, var(--c-text) 75%, transparent); }
.ftr a:hover { color: var(--c-primary); }
.ftr-cols { display: grid; gap: 36px; padding: 60px 0 40px; }
.ftr-cols h4 { font-family: var(--font-display); font-size: 14px; text-transform: uppercase; letter-spacing: .1em; color: var(--c-text); margin-bottom: 16px; padding-bottom: 8px; border-bottom: 2px solid var(--c-text); }
.ftr-cols ul { list-style: none; padding: 0; margin: 0; }
.ftr-cols li { padding: 6px 0; font-size: 13px; }
.ftr-bottom { padding: 20px 0; border-top: 1px solid color-mix(in srgb, var(--c-text) 12%, transparent); display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; font-size: 11px; color: var(--c-muted); text-transform: uppercase; letter-spacing: .14em; }
.ftr-bottom__links { display: flex; gap: 18px; flex-wrap: wrap; }
.ftr-bottom__links a { color: var(--c-muted); }
.ftr-bottom__links a:hover { color: var(--c-primary); }
.ftr-social { display: flex; gap: 8px; margin-top: 16px; }
.ftr-logo img { height: 48px; width: auto; margin-bottom: 16px; }
.ftr-tag { font-size: 13px; color: var(--c-muted); max-width: 320px; }

.ftr[data-variant="mega"] { background: var(--c-surface); border-top: 4px solid var(--c-text); }
.ftr[data-variant="mega"] .ftr-cols { grid-template-columns: 1.6fr 1fr 1fr 1.1fr 1fr; gap: 30px; }
@media (max-width: 1000px) { .ftr[data-variant="mega"] .ftr-cols { grid-template-columns: 1fr 1fr 1fr; } .ftr[data-variant="mega"] .ftr-brand { grid-column: 1 / -1; } }
@media (max-width: 600px) { .ftr[data-variant="mega"] .ftr-cols { grid-template-columns: 1fr 1fr; } .ftr-bottom { justify-content: center; text-align: center; } }

/* ===== ZX2 footer — brand+contact | newsletter+social | 4 columns | copy bar.
   Adapts to the theme palette (light by default). ===== */
.ftr--zx2 { margin-top: 28px; background: var(--c-surface); color: var(--c-text); border-top: 1px solid color-mix(in srgb, var(--c-text) 10%, transparent); }
.ftr--zx2 a { color: var(--c-muted); transition: color .15s; }
.ftr--zx2 a:hover { color: var(--c-primary); }
.ftr2-main { padding: 48px var(--gutter, 28px) 38px; }
.ftr2-grid { display: grid; grid-template-columns: 1fr 3fr; gap: 50px; }
.ftr2-brand .ftr-logo img { height: 46px; width: auto; margin-bottom: 16px; }
.ftr2-about { font-size: 13px; line-height: 1.7; color: var(--c-muted); margin: 0 0 18px; }
.ftr2-contact { list-style: none; padding: 0; margin: 0; display: grid; gap: 11px; }
.ftr2-contact li { font-size: 13px; display: flex; align-items: flex-start; gap: 11px; color: var(--c-muted); line-height: 1.5; }
.ftr2-contact li i { color: var(--c-primary); width: 16px; text-align: center; margin-top: 3px; flex: none; }
.ftr2-top { display: grid; grid-template-columns: 2fr 1fr; gap: 30px; align-items: start; padding-bottom: 26px; margin-bottom: 24px; border-bottom: 1px solid color-mix(in srgb, var(--c-text) 9%, transparent); }
.ftr2-news h3, .ftr2-follow h3 { font-family: var(--font-display); font-size: 19px; margin: 0 0 14px; }
.ftr2-news__form { display: flex; }
.ftr2-news__form input { flex: 1; min-width: 0; border: 1px solid color-mix(in srgb, var(--c-text) 16%, transparent); background: var(--c-bg); color: var(--c-text); padding: 13px 16px; font-size: 14px; outline: none; }
.ftr2-news__form input:focus { border-color: var(--c-primary); }
.ftr2-news__form button { border: 0; background: var(--c-primary); color: #fff; font-weight: 800; padding: 0 26px; cursor: pointer; text-transform: uppercase; letter-spacing: .06em; font-size: 12.5px; white-space: nowrap; transition: filter .15s; }
.ftr2-news__form button:hover { filter: brightness(1.08); color: #fff; }
.ftr2-news__ok { font-size: 13px; color: #16a34a; margin-bottom: 10px; font-weight: 600; }
.ftr2-social { list-style: none; padding: 0; margin: 0; display: flex; gap: 9px; flex-wrap: wrap; }
.ftr2-social a { width: 40px; height: 40px; display: grid; place-items: center; background: color-mix(in srgb, var(--c-text) 7%, transparent); color: var(--c-text); font-size: 16px; transition: background .15s, color .15s, transform .15s; }
.ftr2-social a:hover { background: var(--c-primary); color: #fff; transform: translateY(-2px); }
.ftr2-cols { display: grid; grid-template-columns: repeat(4, 1fr); gap: 28px; }
.ftr2-cols h5 { font-family: var(--font-display); font-size: 14px; text-transform: uppercase; letter-spacing: .06em; color: var(--c-text); margin: 0 0 14px; padding-bottom: 10px; border-bottom: 2px solid var(--c-primary); display: inline-flex; align-items: center; gap: 8px; }
.ftr2-cols h5::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--c-primary); flex: none; }
/* footer link isaretleri (footer_link_marker: icon | dot | none) */
.ftr2-mk { display: inline-block; width: 18px; margin-right: 7px; text-align: center; color: var(--c-primary); font-size: 11px; }
.ftr2-mk--dot { width: 6px; height: 6px; border-radius: 50%; background: var(--c-primary); vertical-align: middle; margin-right: 10px; }
.ftr2-news h3::before, .ftr2-follow h3::before { content: ""; display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--c-primary); margin-right: 8px; vertical-align: middle; }
body.ui-squared .ftr2-cols h5::before, body.ui-squared .ftr2-news h3::before, body.ui-squared .ftr2-follow h3::before { border-radius: 2px; }
.ftr2-cols ul { list-style: none; padding: 0; margin: 0; }
.ftr2-cols li { padding: 8px 0; font-size: 13.5px; }
/* menü öğeleri arası ince şeffaf ayraç çizgisi */
.ftr2-cols li + li { border-top: 1px solid color-mix(in srgb, var(--c-text) 8%, transparent); }
/* ── Forum rules + legal pages (/kurallar, /yasal-uyari) ─────────────────── */
.rules-wrap { max-width: none; margin: 26px 0 40px; }
.rules-hero { display: flex; align-items: center; gap: 18px; padding: 26px 28px; border-radius: 16px; color: #fff; background: linear-gradient(120deg, var(--c-primary) 0%, var(--c-grad-2, #0d162e) 100%); box-shadow: 0 16px 40px -22px color-mix(in srgb, var(--c-primary) 80%, transparent); margin-bottom: 22px; }
.rules-hero--legal { background: linear-gradient(120deg, var(--c-grad-2, #0d162e) 0%, var(--c-primary) 100%); box-shadow: 0 16px 40px -22px color-mix(in srgb, var(--c-primary) 70%, transparent); }
.rules-hero__ic { flex: none; width: 60px; height: 60px; border-radius: 16px; display: grid; place-items: center; font-size: 26px; background: rgba(255,255,255,.16); }
.rules-hero h1 { margin: 0 0 6px; font-family: var(--font-display); font-size: 26px; color: #fff; }
.rules-hero p { margin: 0; opacity: .92; font-size: 14px; line-height: 1.55; }
.rules-sec { margin-bottom: 22px; }
.rules-sec__h { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.rules-sec__ic { flex: none; width: 38px; height: 38px; border-radius: 10px; display: grid; place-items: center; font-size: 16px; color: var(--c-primary); background: color-mix(in srgb, var(--c-primary) 12%, transparent); }
.rules-sec__h h2 { margin: 0; font-size: 18px; font-family: var(--font-display); }
.rules-sec__count { margin-left: auto; font-size: 12px; font-weight: 700; color: var(--c-muted); background: color-mix(in srgb, var(--c-text) 6%, transparent); padding: 4px 10px; border-radius: 999px; }
.rules-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.rule { display: flex; gap: 13px; align-items: flex-start; padding: 14px 16px; background: var(--c-surface); border: 1px solid color-mix(in srgb, var(--c-text) 10%, transparent); border-radius: 12px; border-left: 3px solid var(--c-primary); transition: transform .12s, box-shadow .12s; }
.rule:hover { transform: translateX(3px); box-shadow: 0 10px 26px -20px rgba(0,0,0,.5); }
.rule__no { flex: none; width: 28px; height: 28px; border-radius: 8px; display: grid; place-items: center; font-weight: 800; font-size: 13px; color: var(--c-primary); background: color-mix(in srgb, var(--c-primary) 12%, transparent); }
.rule__tx { font-size: 14.5px; line-height: 1.6; color: var(--c-text); padding-top: 2px; }
.legal-callout { margin: 28px 0 18px; padding: 20px 22px; border-radius: 14px; background: color-mix(in srgb, var(--c-primary) 8%, var(--c-surface)); border: 1px solid color-mix(in srgb, var(--c-primary) 30%, transparent); border-left: 4px solid var(--c-primary); }
.legal-callout__h { display: flex; align-items: center; gap: 9px; font-weight: 800; font-size: 16px; color: var(--c-primary); margin-bottom: 10px; }
.legal-callout p { margin: 0 0 9px; font-size: 13.5px; line-height: 1.65; color: var(--c-text); }
.legal-callout__link { display: inline-flex; align-items: center; gap: 7px; font-weight: 700; font-size: 13.5px; color: var(--c-primary); text-decoration: none; margin-top: 4px; }
.rules-accept { margin: 18px 0 0; padding: 13px 16px; font-size: 13.5px; color: var(--c-muted); background: color-mix(in srgb, var(--c-text) 4%, transparent); border-radius: 10px; display: flex; align-items: center; gap: 9px; }
.rules-accept i { color: var(--c-primary); }
.rules-accept a { color: var(--c-primary); font-weight: 700; text-decoration: none; }
.legal-doc { background: var(--c-surface); border: 1px solid color-mix(in srgb, var(--c-text) 10%, transparent); border-radius: 14px; padding: 26px 28px; }
.legal-doc p { font-size: 15px; line-height: 1.8; color: var(--c-text); margin: 0 0 16px; }
.legal-doc__foot { font-weight: 700; }
body.ui-squared .rules-hero, body.ui-squared .rule, body.ui-squared .legal-callout, body.ui-squared .legal-doc, body.ui-squared .rules-hero__ic, body.ui-squared .rules-sec__ic, body.ui-squared .rule__no { border-radius: var(--ui-radius, 4px); }
@media (max-width: 600px){ .rules-hero { flex-direction: column; text-align: center; } .rules-sec__count { display: none; } }

/* footer medical disclaimer strip */
.ftr2-disclaimer { border-top: 1px solid color-mix(in srgb, #000 30%, transparent); background: var(--c-primary); }
.ftr2-disclaimer p { margin: 0; padding: 15px 18px; font-size: 13.5px; line-height: 1.65; color: #fff; text-align: center; }
/* "Tıbbi Sorumluluk Reddi" + "Detaylı yasal uyarı" — BEYAZ ve bir tık büyük */
.ftr2-disclaimer strong { color: #fff; font-size: 15.5px; }
.ftr2-disclaimer a { color: #fff; font-size: 15.5px; font-weight: 800; text-decoration: underline; white-space: nowrap; }
.ftr2-disclaimer a:hover { color: #fff; opacity: .85; }

.ftr2-copy { border-top: 1px solid color-mix(in srgb, var(--c-text) 10%, transparent); background: color-mix(in srgb, var(--c-text) 3%, var(--c-surface)); }
/* Bottom bar — copyright on the LEFT, legal links on the RIGHT (single row).
   Links are separated by a middle dot (·) injected via CSS, no manual dots. */
.ftr2-copy__in { display: flex; flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 20px; text-align: left; padding: 16px var(--gutter, 28px); font-size: 12.5px; color: var(--c-muted); min-width: 0; }
.ftr2-copy__in > span:first-child { min-width: 0; }
.ftr2-copy__in strong { color: var(--c-text); }
.ftr2-copy__links { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 0; }
.ftr2-copy__links a { color: var(--c-muted); text-decoration: none; transition: color .15s ease; }
.ftr2-copy__links a:hover { color: var(--c-primary); }
.ftr2-copy__links a:not(:first-child)::before { content: "|"; padding: 0 12px; font-weight: 400; color: color-mix(in srgb, var(--c-text) 30%, transparent); }
@media (max-width: 900px) {
  .ftr2-grid { grid-template-columns: 1fr; gap: 32px; }
  .ftr2-top { grid-template-columns: 1fr; gap: 22px; }
  .ftr2-cols { grid-template-columns: 1fr 1fr; gap: 22px; }
  .ftr2-copy__in { flex-direction: column; align-items: center; justify-content: center; text-align: center; }
}
/* MOBİLDE her şey ORTALI (sola yaslı değil) */
@media (max-width: 760px) {
  .ftr2-brand { text-align: center; }
  .ftr2-brand .ftr-logo { display: inline-block; }
  .ftr2-brand .ftr-logo img { margin-left: auto; margin-right: auto; }
  .ftr2-about { text-align: center; }
  .ftr2-contact { justify-items: center; }
  .ftr2-contact li { justify-content: center; text-align: center; }
  .ftr2-news, .ftr2-follow { text-align: center; }
  .ftr2-news h3, .ftr2-follow h3 { justify-content: center; }
  .ftr2-social { justify-content: center; }
  .ftr2-cols { text-align: center; }
  .ftr2-cols h5 { display: inline-flex; justify-content: center; }
  .ftr2-cols li { display: flex; align-items: center; justify-content: center; }
  .ftr2-copy__links { justify-content: center; }
}
/* 2×2 menu grid on phones (yan yana) rather than one long stacked column */
@media (max-width: 460px) { .ftr2-cols { grid-template-columns: 1fr 1fr; gap: 14px 18px; } .ftr2-cols h5 { font-size: 13px; } .ftr2-cols li { font-size: 12.5px; } }

/* ===== (legacy dark ZX footer styles below — no longer used) ===== */
.ftr--zx { margin-top: 70px; background: var(--c-text); color: color-mix(in srgb, var(--c-bg) 78%, var(--c-text)); border-top: 4px solid #000; }
.ftr--zx a { color: color-mix(in srgb, var(--c-bg) 72%, var(--c-text)); }
.ftr--zx a:hover { color: var(--c-primary); }
/* contact strip */
.ftr-strip { background: color-mix(in srgb, var(--c-bg) 9%, var(--c-text)); border-bottom: 1px solid color-mix(in srgb, var(--c-bg) 14%, var(--c-text)); }
.ftr-strip__in { display: flex; align-items: stretch; gap: 0; flex-wrap: wrap; }
.ftr-c { display: flex; align-items: center; gap: 13px; padding: 20px 26px 20px 0; margin-right: 26px; border-right: 1px solid color-mix(in srgb, var(--c-bg) 14%, var(--c-text)); }
.ftr-c__ic { width: 42px; height: 42px; display: grid; place-items: center; background: var(--c-primary); color: #fff; font-size: 18px; flex: none; }
.ftr-c__tx { display: flex; flex-direction: column; line-height: 1.3; }
.ftr-c__tx small { font-size: 10.5px; text-transform: uppercase; letter-spacing: .12em; color: color-mix(in srgb, var(--c-bg) 55%, var(--c-text)); }
.ftr-c__tx strong { font-size: 14px; color: color-mix(in srgb, var(--c-bg) 92%, var(--c-text)); }
.ftr-strip__social { display: flex; gap: 8px; align-items: center; margin-left: auto; padding: 16px 0; }
.ftr--zx .btn-icon { width: 38px; height: 38px; display: grid; place-items: center; background: color-mix(in srgb, var(--c-bg) 12%, var(--c-text)); color: color-mix(in srgb, var(--c-bg) 80%, var(--c-text)); border-radius: 0; font-size: 16px; transition: background .15s, color .15s; }
.ftr--zx .btn-icon:hover { background: var(--c-primary); color: #fff; }
/* columns */
.ftr--zx .ftr-main { padding: 0; }
.ftr--zx .ftr-cols { grid-template-columns: 1.8fr 1fr 1fr 1.2fr 1fr; gap: 34px; padding: 52px 0 40px; }
.ftr--zx .ftr-logo img { height: 46px; width: auto; margin-bottom: 16px; }
.ftr-about { font-size: 13px; line-height: 1.7; color: color-mix(in srgb, var(--c-bg) 62%, var(--c-text)); margin: 0 0 16px; }
.ftr-meta { list-style: none; padding: 0; margin: 0; display: grid; gap: 9px; }
.ftr-meta li { font-size: 13px; display: flex; align-items: center; gap: 10px; color: color-mix(in srgb, var(--c-bg) 70%, var(--c-text)); }
.ftr-meta li i { color: var(--c-primary); width: 16px; text-align: center; }
.ftr--zx h4 { font-family: var(--font-display); font-size: 13.5px; text-transform: uppercase; letter-spacing: .1em; color: color-mix(in srgb, var(--c-bg) 95%, var(--c-text)); margin: 0 0 16px; padding-bottom: 10px; border-bottom: 2px solid var(--c-primary); display: inline-block; }
.ftr--zx .ftr-cols ul { list-style: none; padding: 0; margin: 0; }
.ftr--zx .ftr-cols li { padding: 5px 0; font-size: 13px; }
.ftr--zx .ftr-cols li a { position: relative; padding-left: 14px; }
.ftr--zx .ftr-cols li a::before { content: '›'; position: absolute; left: 0; color: var(--c-primary); }
/* disclaimer */
.ftr-disc { background: color-mix(in srgb, var(--c-bg) 6%, var(--c-text)); border-top: 1px solid color-mix(in srgb, var(--c-bg) 12%, var(--c-text)); }
.ftr-disc .container { display: flex; gap: 12px; align-items: flex-start; padding: 16px 0; }
.ftr-disc i { color: var(--c-primary); font-size: 15px; margin-top: 2px; flex: none; }
.ftr-disc span { font-size: 12px; line-height: 1.6; color: color-mix(in srgb, var(--c-bg) 58%, var(--c-text)); }
/* bottom */
.ftr--zx .ftr-bottom { border-top: 1px solid color-mix(in srgb, var(--c-bg) 14%, var(--c-text)); }
.ftr--zx .ftr-bottom__in { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; padding: 18px 0; font-size: 12px; color: color-mix(in srgb, var(--c-bg) 60%, var(--c-text)); }
.ftr--zx .ftr-bottom__links { display: flex; gap: 16px; flex-wrap: wrap; }
@media (max-width: 1000px) { .ftr--zx .ftr-cols { grid-template-columns: 1fr 1fr 1fr; } .ftr--zx .ftr-brand { grid-column: 1 / -1; } }
@media (max-width: 640px) {
  .ftr--zx .ftr-cols { grid-template-columns: 1fr 1fr; }
  .ftr-c { border-right: 0; margin-right: 0; padding: 14px 0; width: 100%; }
  .ftr-strip__social { margin: 0 0 14px; }
  .ftr--zx .ftr-bottom__in { justify-content: center; text-align: center; }
}

.ftr[data-variant="newsletter"] { background: var(--c-text); color: var(--c-bg); }
.ftr[data-variant="newsletter"] a { color: rgba(255,255,255,.85); }
.ftr[data-variant="newsletter"] .nl-block { text-align: center; padding: 70px 28px; }
.ftr[data-variant="newsletter"] .nl-block h2 { color: var(--c-bg); font-family: var(--font-display); font-size: 38px; }
.ftr[data-variant="newsletter"] .nl-form { display: flex; max-width: 500px; margin: 26px auto; }
.ftr[data-variant="newsletter"] .nl-form input { flex: 1; background: var(--c-bg); border: 0; color: var(--c-text); padding: 14px 20px; font-size: 14px; }
.ftr[data-variant="newsletter"] .nl-form button { background: var(--c-primary); color: var(--c-bg); border: 0; padding: 14px 26px; font-weight: 800; cursor: pointer; text-transform: uppercase; letter-spacing: .12em; font-family: var(--font-sans); }
.ftr[data-variant="newsletter"] .ftr-bottom { border-color: rgba(255,255,255,.15); color: rgba(255,255,255,.7); }

.ftr[data-variant="minimal"] { background: var(--c-surface); border-top: 2px solid var(--c-text); }
.ftr[data-variant="minimal"] .ftr-cols { grid-template-columns: 1fr 1fr; padding: 36px 0; align-items: center; }
.ftr[data-variant="minimal"] .ftr-cols .links { display: flex; gap: 24px; justify-content: flex-end; flex-wrap: wrap; }

.ftr[data-variant="cards"] { background: var(--c-bg); border-top: 1px solid color-mix(in srgb, var(--c-text) 14%, transparent); }
.ftr[data-variant="cards"] .ftr-cols { grid-template-columns: repeat(4, 1fr); padding: 50px 0; }
.ftr[data-variant="cards"] .ftr-cols > * { background: var(--c-surface); border: 1px solid color-mix(in srgb, var(--c-text) 10%, transparent); padding: 28px; }

.ftr[data-variant="split"] { background: var(--c-surface); border-top: 2px solid var(--c-text); }
.ftr[data-variant="split"] .split-row { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 36px 0; flex-wrap: wrap; }
.ftr[data-variant="split"] .split-row ul { display: flex; gap: 24px; list-style: none; padding: 0; margin: 0; }

/* =========================================================================
   NOTIFICATIONS LIST
   ========================================================================= */
.notif-card { background: var(--c-surface); padding: 20px 22px; margin-bottom: 10px; display: flex; gap: 14px; align-items: flex-start; border-left: 4px solid color-mix(in srgb, var(--c-text) 14%, transparent); transition: all .2s; }
.notif-card.unread { border-left-color: var(--c-primary); }
.notif-card:hover { border-left-color: var(--c-primary); }
.notif-card .ava { width: 44px; height: 44px; flex: 0 0 44px; border-radius: 50%; background-size: cover; background-position: center; }
.notif-card .title { font-family: var(--font-display); font-weight: 700; color: var(--c-text); margin: 0 0 4px; text-transform: none; letter-spacing: -.005em; }
.notif-card .body  { font-size: 13px; color: var(--c-muted); margin: 0 0 6px; }
.notif-card .meta  { font-size: 11px; color: var(--c-muted); text-transform: uppercase; letter-spacing: .12em; font-weight: 700; }
.notif-card .meta .new { color: var(--c-primary); font-weight: 800; margin-left: 8px; }

.inline { display: inline; }
.text-muted { color: var(--c-muted); }

/* =========================================================================
   KÖŞELİ (SQUARED) MODE — body.ui-squared. Sharpens the prominent rounded
   building blocks to a crisp editorial look. Avatars, toggles and status
   pills intentionally stay round.
   ========================================================================= */
/* Uniform radius for EVERYTHING — robust, no element can slip through an
   allowlist. Driven by --ui-radius (admin: Görünüm → Köşe yuvarlaklığı).
   Only genuinely-round things (avatars, toggle knobs) are excluded below;
   the floating buttons follow their own --fab-radius. */
body.ui-squared *:not([class*="avatar"]):not([class*="ava"]):not(.wa-fab):not(.totop-fab):not(.hl-slider):not(.hbadge):not(.hbadge *) {
  border-radius: var(--ui-radius, 3px) !important;
}
/* hero rozeti: daire/künye şablonları yuvarlak kalır; kutu şablonların köşesi kendi
   body.ui-squared kurallarıyla (hbadge--plate/neonsign/holo/stamp) ayrıca köşelenir */
/* …but these stay round: avatars (photos), toggle knobs */
body.ui-squared :is([class*="avatar"], .ava, .mini-ava, .ans-ava, .qa-ava) { border-radius: 50% !important; }
body.ui-squared .hl-slider, body.ui-squared .hl-slider::before { border-radius: 999px !important; }
body.ui-squared ::-webkit-scrollbar-thumb, body.ui-squared ::-webkit-scrollbar-track { border-radius: 999px !important; }

/* Clean, flat shadows in köşeli mode — kill the heavy drop shadows; rely on
   crisp borders + a hairline. Cards still lift a touch on hover, sans the blur. */
body.ui-squared :is(.widget, .cat-card, .act-card, .contact-method, .home-cat, .qa-tile, .stat-card, .promo-banner, .deal-card, .answer-list[data-variant="card"] .answer) {
  box-shadow: 0 1px 2px rgba(0,0,0,.05) !important;
}
body.ui-squared :is(.widget, .cat-card, .act-card, .contact-method, .home-cat, .qa-tile, .promo-banner, .deal-card, .answer-list[data-variant="card"] .answer):hover {
  box-shadow: 0 2px 8px rgba(0,0,0,.09) !important;
}
body.ui-squared :is(.rep-badge2, .mod-card, .chip, .qa-card, .q-card):hover { box-shadow: 0 2px 8px rgba(0,0,0,.08) !important; }

/* ===== Özellik kapatma: kayıt kapalıyken tüm "Kayıt Ol" girişlerini gizle =====
   (Sunucu tarafı /kayit-ol zaten /giris-yap'a yönlendirir; bu sadece görsel temizlik.) */
body.reg-off [data-auth="register"],
body.reg-off li:has(> a[href$="/kayit-ol"]),
body.reg-off a.btn[href$="/kayit-ol"] { display: none !important; }

/* ===== Cevap Özeti (admin-authored editorial summary box) ===== */
.ans-summary{
  position:relative; margin:20px 0 6px; padding:18px 20px 16px 22px;
  border:1px solid color-mix(in srgb, var(--c-primary) 30%, transparent);
  border-left:4px solid var(--c-primary);
  border-radius:var(--radius, 12px);
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--c-primary) 8%, var(--c-surface, #fff)), color-mix(in srgb, var(--c-primary) 3%, var(--c-surface, #fff)));
  box-shadow:0 1px 2px rgba(0,0,0,.04);
}
.ans-summary__head{
  display:flex; align-items:center; gap:9px; margin:0 0 10px;
  font-weight:800; font-size:14px; letter-spacing:.01em; color:var(--c-text);
}
.ans-summary__ic{
  display:grid; place-items:center; width:30px; height:30px; flex:0 0 30px;
  border-radius:9px; background:var(--c-primary); color:var(--c-on-primary, #fff); font-size:14px;
}
.ans-summary__tag{
  margin-left:auto; font-size:10.5px; font-weight:800; letter-spacing:.07em; text-transform:uppercase;
  padding:3px 9px; border-radius:999px;
  background:color-mix(in srgb, var(--c-accent, var(--c-primary)) 16%, transparent);
  color:color-mix(in srgb, var(--c-accent, var(--c-primary)) 75%, var(--c-text));
}
.ans-summary__body{ color:var(--c-text); line-height:1.65; font-size:15px; }
.ans-summary__body p{ margin:0 0 9px; }
.ans-summary__body p:last-child{ margin-bottom:0; }
.ans-summary__body ul, .ans-summary__body ol{ margin:6px 0 9px; padding-left:22px; }
.ans-summary__body li{ margin:3px 0; }
.ans-summary__body a{ color:var(--c-primary); text-decoration:underline; }
.ans-summary__by{
  margin:11px 0 0; padding-top:10px; border-top:1px dashed color-mix(in srgb, var(--c-primary) 24%, transparent);
  display:flex; align-items:center; gap:7px; font-size:12.5px; font-weight:700;
  color:color-mix(in srgb, var(--c-primary) 72%, var(--c-text));
}
.ans-summary__by i{ color:var(--c-primary); }
body.ui-squared .ans-summary{ border-radius:var(--ui-radius, 3px); }

/* ===================== SSS (FAQ) — animated accordion ===================== */
.faq-hero { background: var(--c-grad, var(--c-primary)); color: var(--c-on-primary, #fff); padding: 48px 0 64px; text-align: center; position: relative; overflow: hidden; }
.faq-hero::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 40px; background: var(--c-bg); border-radius: 50% 50% 0 0 / 100% 100% 0 0; }
.faq-hero__eyebrow { display: inline-flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 800; letter-spacing: .12em; padding: 6px 14px; border-radius: 999px; background: color-mix(in srgb, #fff 18%, transparent); }
.faq-hero h1 { margin: 16px 0 8px; font-size: clamp(28px, 4vw, 42px); color: #fff; }
.faq-hero p { margin: 0 auto; max-width: 560px; opacity: .92; font-size: 15.5px; }
.faq-hero p strong { color: #fff; }
.faq-search { position: relative; max-width: 560px; margin: 26px auto 0; z-index: 2; }
.faq-search input { width: 100%; height: 56px; border: 0; border-radius: 16px; padding: 0 50px 0 52px; font-size: 15.5px; font-family: inherit; color: var(--c-text); background: var(--c-surface); box-shadow: 0 20px 45px -18px rgba(0,0,0,.55); outline: none; }
.faq-search input:focus { box-shadow: 0 0 0 4px color-mix(in srgb, #fff 35%, transparent), 0 20px 45px -18px rgba(0,0,0,.55); }
.faq-search__ic { position: absolute; left: 20px; top: 50%; transform: translateY(-50%); color: var(--c-primary); font-size: 16px; }
.faq-search__clear { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); width: 32px; height: 32px; border: 0; border-radius: 50%; background: color-mix(in srgb, var(--c-text) 8%, transparent); color: var(--c-muted); cursor: pointer; display: grid; place-items: center; }
.faq-search__clear:hover { background: color-mix(in srgb, var(--c-primary) 16%, transparent); color: var(--c-primary); }

.faq-wrap { padding: 36px 28px 64px; }
.faq-group { margin: 0 0 30px; }
.faq-group__title { display: flex; align-items: center; gap: 12px; font-size: 19px; font-weight: 800; color: var(--c-text); margin: 0 0 14px; }
.faq-group__ic { width: 38px; height: 38px; flex: none; display: grid; place-items: center; border-radius: 11px; background: color-mix(in srgb, var(--c-primary) 13%, transparent); color: var(--c-primary); font-size: 16px; }

.faq-list { display: flex; flex-direction: column; gap: 12px; }
.faq-item { border: 1px solid color-mix(in srgb, var(--c-text) 11%, transparent); border-radius: 14px; background: var(--c-surface); overflow: hidden; transition: border-color .18s, box-shadow .18s; }
.faq-item:hover { border-color: color-mix(in srgb, var(--c-primary) 35%, transparent); }
.faq-item.is-open { border-color: color-mix(in srgb, var(--c-primary) 45%, transparent); box-shadow: 0 10px 30px -16px color-mix(in srgb, var(--c-primary) 60%, transparent); }
.faq-q { width: 100%; display: flex; align-items: center; gap: 16px; padding: 18px 20px; background: none; border: 0; cursor: pointer; text-align: left; font-family: inherit; color: var(--c-text); }
.faq-q__txt { flex: 1; font-size: 15.5px; font-weight: 700; line-height: 1.45; }
.faq-q__ico { flex: none; width: 32px; height: 32px; display: grid; place-items: center; border-radius: 50%; background: color-mix(in srgb, var(--c-text) 7%, transparent); color: var(--c-muted); font-size: 13px; transition: transform .3s cubic-bezier(.22,1,.36,1), background .18s, color .18s; }
.faq-item.is-open .faq-q__ico { transform: rotate(180deg); background: var(--c-grad, var(--c-primary)); color: var(--c-on-primary, #fff); }
.faq-q:hover .faq-q__txt { color: var(--c-primary); }
.faq-a { overflow: hidden; height: 0; transition: height .3s cubic-bezier(.22,1,.36,1); }
.faq-a[hidden] { display: none; }
.faq-item.is-open .faq-a { height: auto; }
.faq-a__in { padding: 0 20px 20px 20px; color: var(--c-soft, var(--c-muted)); font-size: 14.5px; line-height: 1.7; }
.faq-a__in strong { color: var(--c-text); }
.faq-a__in a { color: var(--c-primary); font-weight: 600; }

.faq-noresult { text-align: center; padding: 50px 20px; color: var(--c-muted); }
.faq-noresult i { font-size: 30px; opacity: .35; display: block; margin-bottom: 12px; }
.faq-noresult a { color: var(--c-primary); font-weight: 700; }

.faq-cta { margin-top: 40px; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 20px; padding: 28px 32px; border-radius: 18px; background: linear-gradient(135deg, color-mix(in srgb, var(--c-primary) 12%, var(--c-surface)), color-mix(in srgb, var(--c-accent, var(--c-primary)) 10%, var(--c-surface))); border: 1px solid color-mix(in srgb, var(--c-primary) 22%, transparent); }
.faq-cta__tx h3 { margin: 0 0 4px; font-size: 20px; color: var(--c-text); }
.faq-cta__tx p { margin: 0; color: var(--c-muted); font-size: 14px; }
.faq-cta__bt { display: flex; flex-wrap: wrap; gap: 10px; }

body.ui-squared .faq-search input, body.ui-squared .faq-item, body.ui-squared .faq-cta, body.ui-squared .faq-group__ic { border-radius: var(--ui-radius, 4px); }
/* Squared site → drop the rounded "wave" bottom edge + round eyebrow so the FAQ
   hero matches the keskin (sharp) lines of every other page hero. */
body.ui-squared .faq-hero::after { display: none; }
body.ui-squared .faq-hero { padding-bottom: 48px; }
body.ui-squared .faq-hero__eyebrow { border-radius: var(--ui-radius, 4px); }
@media (max-width: 640px) {
  .faq-wrap { padding: 28px 16px 48px; }
  .faq-cta { flex-direction: column; align-items: flex-start; }
}

/* ===== Browser autofill — keep the site's field colors (no light-yellow box) ===== */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active,
textarea:-webkit-autofill,
select:-webkit-autofill {
  -webkit-text-fill-color: var(--c-text) !important;
  -webkit-box-shadow: 0 0 0 1000px var(--c-bg) inset !important;
          box-shadow: 0 0 0 1000px var(--c-bg) inset !important;
  caret-color: var(--c-text);
  transition: background-color 99999s ease-in-out 0s;
}
/* auth modal fields sit on --c-surface → match the inset there */
.auth-modal input:-webkit-autofill, .auth-modal input:-webkit-autofill:hover, .auth-modal input:-webkit-autofill:focus {
  -webkit-box-shadow: 0 0 0 1000px var(--c-surface) inset !important;
          box-shadow: 0 0 0 1000px var(--c-surface) inset !important;
}

/* ===== Hero ask wizard as a clickable cover → /soru-sor (ask_page ON) ===== */
.ask-coverwrap { position: relative; }
.ask-cover { position: absolute; inset: 0; z-index: 6; display: flex; align-items: flex-end; justify-content: center; padding-bottom: 16px; text-decoration: none; cursor: pointer; border-radius: 14px; }
.ask-cover__hint { display: inline-flex; align-items: center; gap: 8px; background: var(--c-grad, var(--c-primary)); color: var(--c-on-primary, #fff); font-weight: 800; font-size: 13px; letter-spacing: .02em; padding: 10px 20px; border-radius: 999px; box-shadow: 0 12px 30px -10px rgba(0,0,0,.55); opacity: 0; transform: translateY(8px); transition: opacity .2s, transform .2s; }
.ask-coverwrap:hover .ask-cover__hint, .ask-cover:focus-visible .ask-cover__hint { opacity: 1; transform: none; }
.ask-coverwrap:hover .ask-wizard--cover { box-shadow: 0 0 0 2px color-mix(in srgb, var(--c-primary) 45%, transparent); }
.ask-wizard--cover { pointer-events: none; user-select: none; transition: box-shadow .2s; }
.ask-wizard--cover input, .ask-wizard--cover select, .ask-wizard--cover textarea, .ask-wizard--cover button, .ask-wizard--cover [contenteditable] { pointer-events: none !important; }
body.ui-squared .ask-cover { border-radius: var(--ui-radius, 4px); }

/* Cover (ask_page ON) mode: hide the wizard nav (İleri/Geri) so the form sits as a clean display */
.ask-wizard--cover .wz-nav, .ask-wizard--cover .ask-drop, .ask-wizard--cover .ask-mgrid { display: none; }
.ask-wizard--cover .wz-pane { padding-bottom: 4px; }

/* ===== Registration legal acceptance block (page + modal) ===== */
.auth-terms { display: grid; gap: 8px; margin: 16px 0 2px; padding: 12px 14px; border: 1px solid color-mix(in srgb, var(--c-text) 13%, transparent); border-radius: 10px; background: color-mix(in srgb, var(--c-text) 3%, transparent); }
.auth-terms label { display: flex !important; align-items: flex-start; gap: 9px; margin: 0 !important; font-size: 12.5px !important; line-height: 1.45; font-weight: 400 !important; color: var(--c-muted); cursor: pointer; text-transform: none !important; letter-spacing: 0 !important; }
.auth-terms input[type="checkbox"] { margin: 2px 0 0 !important; flex: none; width: auto; accent-color: var(--c-primary); }
.auth-terms a { color: var(--c-primary); font-weight: 600; }
.auth-terms__all { padding-bottom: 8px; border-bottom: 1px dashed color-mix(in srgb, var(--c-text) 16%, transparent); }
.auth-terms__all strong { color: var(--c-text); font-size: 13px; }
body.ui-squared .auth-terms { border-radius: var(--ui-radius, 4px); }

/* ===================== Çerez Politikası — tables ===================== */
.cookie-callout { display: flex; align-items: flex-start; gap: 12px; margin: 22px 0; padding: 14px 18px; border-radius: 12px; border: 1px solid color-mix(in srgb, var(--c-primary) 28%, transparent); background: color-mix(in srgb, var(--c-primary) 7%, var(--c-surface)); color: var(--c-text); font-size: 14px; line-height: 1.55; }
.cookie-callout i { color: var(--c-primary); font-size: 17px; margin-top: 2px; flex: none; }
.cookie-cat { margin: 30px 0; }
.cookie-cat__head { display: flex; align-items: center; gap: 12px; margin: 0 0 8px; flex-wrap: wrap; }
.cookie-cat__head h2 { margin: 0; font-size: 19px; }
.cookie-cat__ic { width: 38px; height: 38px; flex: none; display: grid; place-items: center; border-radius: 11px; background: var(--c-grad, var(--c-primary)); color: var(--c-on-primary, #fff); font-size: 16px; }
.cookie-cat__badge { font-size: 11px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; padding: 4px 10px; border-radius: 999px; background: color-mix(in srgb, var(--c-text) 8%, transparent); color: var(--c-muted); }
.cookie-cat__desc { color: var(--c-soft, var(--c-muted)); font-size: 14px; line-height: 1.6; margin: 0 0 14px; }
.cookie-table-wrap { overflow-x: auto; border: 1px solid color-mix(in srgb, var(--c-text) 11%, transparent); border-radius: 12px; }
.cookie-table { width: 100%; border-collapse: collapse; font-size: 13.5px; background: var(--c-surface); }
.cookie-table thead th { text-align: left; font-size: 11.5px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; color: var(--c-muted); padding: 12px 16px; background: color-mix(in srgb, var(--c-text) 4%, var(--c-surface)); border-bottom: 1px solid color-mix(in srgb, var(--c-text) 12%, transparent); white-space: nowrap; }
.cookie-table tbody td { padding: 13px 16px; border-bottom: 1px solid color-mix(in srgb, var(--c-text) 8%, transparent); vertical-align: top; line-height: 1.55; color: var(--c-text); }
.cookie-table tbody tr:last-child td { border-bottom: 0; }
.cookie-table tbody tr:hover { background: color-mix(in srgb, var(--c-primary) 4%, transparent); }
.cookie-table code { background: color-mix(in srgb, var(--c-primary) 12%, transparent); color: color-mix(in srgb, var(--c-primary) 80%, var(--c-text)); padding: 3px 8px; border-radius: 6px; font-size: 12.5px; font-weight: 700; white-space: nowrap; }
.cookie-dur { display: inline-block; font-weight: 700; font-size: 12px; padding: 4px 10px; border-radius: 999px; background: color-mix(in srgb, var(--c-text) 7%, transparent); color: var(--c-muted); white-space: nowrap; }
.cookie-browsers { list-style: none; padding: 0; margin: 14px 0; display: flex; flex-wrap: wrap; gap: 10px; }
.cookie-browsers a { display: inline-flex; align-items: center; gap: 8px; padding: 9px 15px; border-radius: 10px; border: 1px solid color-mix(in srgb, var(--c-text) 13%, transparent); color: var(--c-text); text-decoration: none; font-weight: 600; font-size: 13.5px; transition: border-color .15s, color .15s; }
.cookie-browsers a:hover { border-color: var(--c-primary); color: var(--c-primary); }
.cookie-browsers i { color: var(--c-primary); }
.cookie-related, .cookie-updated { font-size: 13.5px; color: var(--c-muted); }
.cookie-updated { margin-top: 18px; padding-top: 14px; border-top: 1px dashed color-mix(in srgb, var(--c-text) 14%, transparent); }
.cookie-updated i { margin-right: 6px; }
/* generic legal-page tables (DB pages) get the same clean look */
.spage__body table { width: 100%; border-collapse: collapse; font-size: 13.5px; margin: 16px 0; }
.spage__body table th, .spage__body table td { padding: 10px 14px; border: 1px solid color-mix(in srgb, var(--c-text) 12%, transparent); text-align: left; vertical-align: top; }
.spage__body table th { background: color-mix(in srgb, var(--c-text) 4%, var(--c-surface)); font-weight: 700; }
body.ui-squared .cookie-callout, body.ui-squared .cookie-table-wrap, body.ui-squared .cookie-cat__ic, body.ui-squared .cookie-browsers a { border-radius: var(--ui-radius, 4px); }
@media (max-width: 640px) {
  .cookie-table thead { display: none; }
  .cookie-table, .cookie-table tbody, .cookie-table tr, .cookie-table td { display: block; width: 100%; }
  .cookie-table tr { padding: 6px 0; border-bottom: 4px solid color-mix(in srgb, var(--c-text) 8%, transparent); }
  .cookie-table tbody tr:last-child { border-bottom: 0; }
  .cookie-table td { border: 0 !important; display: flex; gap: 10px; padding: 6px 14px; }
  .cookie-table td::before { content: attr(data-th); font-weight: 800; color: var(--c-muted); min-width: 78px; flex: none; font-size: 12px; }
}

/* ===== Site statistics — animated count-up + live ticking ===== */
.st-num { display: inline-block; transition: color .2s; }
.st-suf { font-size: .62em; font-weight: 800; color: var(--c-primary); vertical-align: baseline; }
.st-suf--pre { margin-right: 2px; }
.st-tot--rate .st-suf, .st-tot--rate .st-num { color: var(--c-accent, var(--c-primary)); }
.st-num.st-bump { animation: stBump .45s cubic-bezier(.22,1,.36,1); }
@keyframes stBump { 0% { transform: translateY(0); } 35% { transform: translateY(-4px); color: var(--c-primary); } 100% { transform: translateY(0); } }
.st-live { color: #22c55e !important; animation: stLive 1.6s ease-in-out infinite; }
@keyframes stLive { 0%,100% { opacity: 1; } 50% { opacity: .3; } }
@media (prefers-reduced-motion: reduce) { .st-num.st-bump, .st-live { animation: none; } }

/* ============================================================================
   MOBILE NAVIGATION SYSTEM (≤860px)  —  bottom tab bar · drawer · search overlay
   Every piece is display:none on desktop and never interferes there.
   ============================================================================ */
.mbar, .mdrawer, .mdrawer-scrim, .msearch-scrim, .msearch-x, .hdr__burger2, .hdr__msearch { display: none; }

/* ── sticky bottom tab bar ───────────────────────────────────────────────── */
.mbar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 90;
  align-items: stretch; justify-content: space-around;
  height: var(--mbar-h, 58px); padding-bottom: env(safe-area-inset-bottom, 0px);
  background: var(--mbar-bg, color-mix(in srgb, var(--c-surface) 96%, var(--c-bg)));
  border-top: 1px solid color-mix(in srgb, var(--c-text) 12%, transparent);
  /* Own GPU layer + contained paint so the bar does NOT re-rasterize with the
     page scrolling beneath it. The old always-on `backdrop-filter: blur()` on a
     position:fixed bar smeared/duplicated the labels while scrolling on mobile —
     blur is now opt-in (data-blur="1"); the default bar is solid and stable. */
  transform: translateZ(0); -webkit-transform: translateZ(0);
  backface-visibility: hidden; -webkit-backface-visibility: hidden;
  /* contain: paint YASAK — yükseltilmiş [+] butonu barın üstüne taşar, paint onu kırpar */
  will-change: transform; contain: layout;
  transition: transform .26s ease;
}
.mbar[data-shadow="1"] { box-shadow: 0 -8px 26px -12px rgba(0,0,0,.32); }
.mbar[data-blur="1"] {
  background: var(--mbar-bg, color-mix(in srgb, var(--c-surface) 82%, transparent));
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
}
.mbar__item {
  flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: center;
  justify-content: center; gap: 3px; padding: 6px 2px; background: none; border: 0;
  cursor: pointer; font-family: inherit; text-decoration: none;
  color: var(--mbar-ico, var(--c-muted)); font-size: 10px; font-weight: 600;
  -webkit-tap-highlight-color: transparent;
}
.mbar__item i { font-size: 18px; line-height: 1; }
.mbar__item span { line-height: 1; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mbar__item.is-active, .mbar__item:active { color: var(--mbar-active, var(--c-primary)); }
.mbar__ava { width: 22px; height: 22px; border-radius: 50%; background-size: cover; background-position: center; border: 1.5px solid color-mix(in srgb, var(--c-text) 22%, transparent); }
/* center [+] — half overflows ABOVE the bar */
.mbar__plus { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: flex-start; gap: 4px; padding-top: 6px; text-decoration: none; -webkit-tap-highlight-color: transparent; }
.mbar__plus-ring {
  width: 56px; height: 56px; margin-top: -26px; border-radius: 50%;
  display: grid; place-items: center; font-size: 23px;
  background: var(--mbar-plus, linear-gradient(120deg, #dcc566, #c2aa47 45%, #9a842b)); border: 4px solid var(--c-bg);
  box-shadow: 0 10px 22px -6px color-mix(in srgb, var(--c-primary) 70%, transparent);
  transition: transform .15s;
}
.mbar__plus:active .mbar__plus-ring { transform: scale(.92); }
/* [+] ikonu altın zeminde koyu (admin --mbar-plus-ico ile ezebilir) */
.mbar__plus-ring { color: var(--mbar-plus-ico, #241c04); position: relative; overflow: hidden; }
/* efektler (mbar_plus_fx) — üstteki Soru Sor ile aynı aile */
.mbar__plus-ring--fx-shimmer::after { content: ''; position: absolute; top: 0; bottom: 0; left: -80%; width: 55%; background: linear-gradient(100deg, transparent 0%, rgba(255,255,255,.6) 50%, transparent 100%); transform: skewX(-22deg); animation: askShine 2.8s ease-in-out infinite; }
.mbar__plus-ring--fx-pulse { animation: mbarPulse 2.2s ease-in-out infinite; }
@keyframes mbarPulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(194,170,71,.55); } 50% { box-shadow: 0 0 0 10px rgba(194,170,71,0); } }
.mbar__plus-ring--fx-glow { animation: mbarGlow 2.6s ease-in-out infinite; }
@keyframes mbarGlow { 0%, 100% { box-shadow: 0 0 10px rgba(194,170,71,.4); } 50% { box-shadow: 0 0 24px rgba(194,170,71,.9); } }
/* ── [+] buton ŞABLONLARI (mbar_plus_skin) — üstteki Soru Sor ile aynı 8 stil ── */
.mbar__plus-ring--skin-primary { background: var(--c-primary); color: var(--c-on-primary, #fff); }
.mbar__plus-ring--skin-gradient { background: var(--c-grad, linear-gradient(120deg, var(--c-primary), var(--c-grad-2, #0d162e))); color: var(--c-on-primary, #fff); }
.mbar__plus-ring--skin-ghost { background: var(--c-surface); color: var(--c-primary); box-shadow: inset 0 0 0 2px var(--c-primary), 0 10px 22px -6px rgba(0,0,0,.4); }
.mbar__plus-ring--skin-glass { background: color-mix(in srgb, var(--c-primary) 26%, var(--c-surface)); color: var(--c-text); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--c-primary) 45%, transparent), 0 10px 22px -6px rgba(0,0,0,.4); }
.mbar__plus-ring--skin-neon { background: #0b0e16; color: #fff; box-shadow: inset 0 0 0 1.5px var(--c-primary), 0 0 16px color-mix(in srgb, var(--c-primary) 70%, transparent); }
.mbar__plus-ring--skin-raised { background: linear-gradient(180deg, #dcc566, #b89a3c); color: #241c04; box-shadow: 0 5px 0 #8a7322, 0 12px 20px -8px rgba(0,0,0,.5); }
.mbar__plus-ring--skin-dark { background: #14110a; color: #dcc566; box-shadow: inset 0 0 0 1px color-mix(in srgb, #dcc566 40%, transparent), 0 10px 22px -6px rgba(0,0,0,.5); }
/* label sits on the BAR bg (not the ring) → must contrast the bar in BOTH modes;
   default to --c-text (white-ish in dark) so the blue-on-blue never vanishes. */
.mbar__plus-tx { font-size: 10.5px; font-weight: 800; color: var(--mbar-plus-tx, var(--c-text)); }
body.ui-squared .mbar__plus-ring { border-radius: calc(var(--ui-radius, 4px) + 10px); }

/* ── customisation variants (Görünüm → Mobil Alt Bar) ───────────────────────── */
/* icon-only: hide the under-icon labels, enlarge + centre the glyphs */
.mbar[data-labels="0"] .mbar__item span,
.mbar[data-labels="0"] .mbar__plus-tx { display: none; }
.mbar[data-labels="0"] .mbar__item { gap: 0; }
.mbar[data-labels="0"] .mbar__item i { font-size: 21px; }
.mbar[data-labels="0"] .mbar__ava { width: 26px; height: 26px; }

/* flat [+]: behaves like a normal tab (no raised ring overflowing the bar) */
.mbar[data-plus="flat"] .mbar__plus { justify-content: center; padding-top: 0; gap: 3px; }
.mbar[data-plus="flat"] .mbar__plus-ring {
  width: auto; height: auto; margin-top: 0; border: 0; box-shadow: none; background: none;
  color: var(--mbar-active, var(--c-primary)); font-size: 20px;
}
.mbar[data-plus="flat"] .mbar__plus-tx { color: var(--mbar-ico, var(--c-muted)); font-weight: 600; }
.mbar[data-plus="flat"][data-labels="0"] .mbar__plus-ring { font-size: 21px; }

/* auto-hide: slide the whole bar out of view while scrolling down */
body.mbar-hidden .mbar { transform: translateY(115%); }

/* ── off-canvas drawer + scrims ──────────────────────────────────────────── */
.mdrawer-scrim, .msearch-scrim { position: fixed; inset: 0; z-index: 95; background: rgba(0,0,0,.5); opacity: 0; pointer-events: none; transition: opacity .25s ease; }
body.mdrawer-open .mdrawer-scrim, body.msearch-open .msearch-scrim { opacity: 1; pointer-events: auto; }
.mdrawer {
  position: fixed; top: 0; bottom: 0; left: 0; z-index: 96;
  width: 86vw; max-width: 360px; flex-direction: column;
  background: var(--c-bg); border-right: 1px solid color-mix(in srgb, var(--c-text) 12%, transparent);
  box-shadow: 12px 0 40px -10px rgba(0,0,0,.45);
  transform: translateX(-100%); transition: transform .28s cubic-bezier(.4,0,.2,1);
  overflow-y: auto; -webkit-overflow-scrolling: touch;
  padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 16px);
}
body.mdrawer-open .mdrawer { transform: none; }
.mdrawer__head { display: flex; align-items: center; gap: 12px; padding: 18px 16px; border-bottom: 1px solid color-mix(in srgb, var(--c-text) 10%, transparent); }
.mdrawer__me { display: flex; align-items: center; gap: 12px; flex: 1; min-width: 0; text-decoration: none; color: var(--c-text); }
.mdrawer__ava { width: 46px; height: 46px; flex: none; border-radius: 50%; background-size: cover; background-position: center; border: 2px solid var(--c-primary); }
.mdrawer__me-tx { display: flex; flex-direction: column; min-width: 0; }
.mdrawer__me-tx strong { font-size: 15px; font-weight: 800; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mdrawer__me-tx small { font-size: 12px; color: var(--c-muted); }
.mdrawer__auth { display: flex; gap: 8px; flex: 1; }
.mdrawer__auth .btn { flex: 1; justify-content: center; }
.mdrawer__x { flex: none; width: 38px; height: 38px; border-radius: 10px; border: 0; background: color-mix(in srgb, var(--c-text) 8%, transparent); color: var(--c-text); font-size: 17px; cursor: pointer; }
.mdrawer__quick { display: flex; gap: 8px; padding: 12px 16px 4px; }
.mdrawer__quick a { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 5px; padding: 12px 6px; border-radius: 12px; background: color-mix(in srgb, var(--c-text) 5%, transparent); color: var(--c-text); text-decoration: none; font-size: 11px; font-weight: 600; position: relative; }
.mdrawer__quick a i { font-size: 17px; color: var(--c-primary); }
.mdrawer__badge { position: absolute; top: 6px; left: 50%; margin-left: 6px; min-width: 16px; height: 16px; padding: 0 4px; border-radius: 8px; background: var(--c-primary); color: var(--c-on-primary, #fff); font-size: 9px; font-weight: 800; display: grid; place-items: center; }
.mdrawer__sec { padding: 16px 16px 7px; font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .1em; color: var(--c-muted); }
/* categories as a tap-to-open accordion (single column → no right-shift) */
.mdrawer__acc { margin: 6px 10px 0; border-bottom: 1px solid color-mix(in srgb, var(--c-text) 8%, transparent); }
.mdrawer__acc > summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 13px 6px; font-size: 14.5px; font-weight: 700; color: var(--c-text); }
.mdrawer__acc > summary::-webkit-details-marker { display: none; }
.mdrawer__acc > summary i:first-child { color: var(--c-primary); }
.mdrawer__acc-chev { transition: transform .2s; font-size: 12px; color: var(--c-muted); }
.mdrawer__acc[open] .mdrawer__acc-chev { transform: rotate(180deg); }
.mdrawer__cats { display: flex; flex-direction: column; gap: 5px; padding: 0 0 12px; }
.mdrawer__cats a { display: flex; align-items: center; gap: 9px; padding: 11px 12px; border-radius: 12px; background: color-mix(in srgb, var(--c-text) 5%, transparent); color: var(--c-text); text-decoration: none; font-size: 13px; font-weight: 600; }
.mdrawer__cats a i { color: var(--c-primary); width: 16px; text-align: center; flex: none; }
.mdrawer__cats a span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mdrawer__cats a em { font-style: normal; font-size: 11px; color: var(--c-muted); font-weight: 700; }
.mdrawer__links { display: flex; flex-direction: column; padding: 0 10px; }
.mdrawer__links a { display: flex; align-items: center; gap: 13px; padding: 13px 14px; border-radius: 12px; color: var(--c-text); text-decoration: none; font-size: 14.5px; font-weight: 600; }
.mdrawer__links a i { color: var(--c-primary); width: 20px; text-align: center; flex: none; font-size: 15px; }
.mdrawer__links a:active { background: color-mix(in srgb, var(--c-primary) 10%, transparent); }
.mdrawer__foot { margin-top: 14px; padding: 14px 16px 0; border-top: 1px solid color-mix(in srgb, var(--c-text) 10%, transparent); display: flex; flex-direction: column; gap: 10px; }
.mdrawer__theme, .mdrawer__out { display: flex; align-items: center; gap: 11px; padding: 12px 14px; border-radius: 12px; border: 1px solid color-mix(in srgb, var(--c-text) 14%, transparent); background: none; color: var(--c-text); font-family: inherit; font-size: 14px; font-weight: 700; cursor: pointer; width: 100%; }
.mdrawer__foot form { margin: 0; }
.mdrawer__out { border: 0; background: color-mix(in srgb, #ef4444 12%, transparent); color: #ef4444; }
.mdrawer__theme .icon-sun { display: none; }
html[data-mode="dark"] .mdrawer__theme .icon-sun { display: inline; }
html[data-mode="dark"] .mdrawer__theme .icon-moon { display: none; }
body.ui-squared .mdrawer__cats a, body.ui-squared .mdrawer__links a, body.ui-squared .mdrawer__quick a, body.ui-squared .mdrawer__x, body.ui-squared .mdrawer__theme, body.ui-squared .mdrawer__out { border-radius: var(--ui-radius, 4px); }

/* ── mobile header buttons ───────────────────────────────────────────────── */
.hdr__burger2, .hdr__msearch { width: 40px; height: 40px; align-items: center; justify-content: center; border: 0; background: none; color: var(--c-text); font-size: 18px; cursor: pointer; border-radius: 10px; }
.hdr__lead { display: flex; align-items: center; gap: 6px; min-width: 0; }

/* ============================================================================
   MOBILE LAYOUT  (≤860px)
   ============================================================================ */
@media (max-width: 860px) {
  /* reveal the mobile cluster */
  .mbar { display: flex; }
  .mdrawer { display: flex; }
  .mdrawer-scrim, .msearch-scrim { display: block; }
  .hdr__burger2 { display: inline-flex; }
  /* the header search icon is redundant on mobile (bottom bar has "Ara") + crowds
     the logo/bell → drop it; search is reached from the bottom tab bar. */
  .hdr__msearch { display: none !important; }
  body.mdrawer-open { overflow: hidden; }   /* scroll lock while drawer open */

  /* leave room for the fixed bottom bar (content + footer) — follows the
     admin-set height; --mbar-h is 0 when the bar is disabled. */
  body { padding-bottom: calc(var(--mbar-h, 58px) + env(safe-area-inset-bottom, 0px)); }

  /* header reflow: burger left · logo absolutely-centered (bigger) · icons right —
     everything vertically centered. */
  .hdr-inner { position: relative; grid-template-columns: auto 1fr auto; gap: 8px; padding-top: 12px; padding-bottom: 12px; align-items: center; }
  .hdr__lead { gap: 0; }
  .hdr__logo { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); margin: 0; }
  .hdr__logo img { height: 42px; max-width: 52vw; object-fit: contain; }
  .hdr--float2 .hsearch { display: none; }                 /* inline search hidden until revealed */
  .hdr__actions { gap: 5px; justify-self: end; align-items: center; }
  .hdr__actions .theme-toggle, .hdr__userbtn, .hdr__logout, .hdr__login, .hdr__register { display: none; }
  /* nicer burger + search icons — tinted rounded pill, primary on press */
  .hdr__burger2, .hdr__msearch { width: 42px; height: 42px; border-radius: 13px; font-size: 17px; color: var(--c-text);
    background: color-mix(in srgb, var(--c-primary) 10%, transparent); border: 1px solid color-mix(in srgb, var(--c-primary) 18%, transparent); transition: background .15s, color .15s; }
  .hdr__burger2:active, .hdr__msearch:active { background: var(--c-primary); color: var(--c-on-primary, #fff); }
  body.ui-squared .hdr__burger2, body.ui-squared .hdr__msearch { border-radius: var(--ui-radius, 4px); }
  /* notice strip: hide the lone trailing arrow that orphaned to its own line */
  .notice-strip .fa-arrow-right { display: none; }

  /* search overlay: reveal the header .hsearch as a fixed top panel (its live-suggest JS still works).
     The float header uses backdrop-filter, which makes it a CONTAINING BLOCK for position:fixed
     descendants → the overlay would be trapped inside the header (y≈110) instead of the viewport top.
     Drop the filter + clipping while searching so the panel pins to the real top. */
  body.msearch-open .hdr--float2 { backdrop-filter: none !important; -webkit-backdrop-filter: none !important; filter: none !important; overflow: visible !important; }
  body.msearch-open .hdr--float2 .hsearch {
    display: block; position: fixed; top: 0; left: 0; right: 0; z-index: 130; max-width: none; margin: 0;
    padding: calc(12px + env(safe-area-inset-top, 0px)) 12px 12px;
    background: var(--c-surface); box-shadow: 0 12px 30px -10px rgba(0,0,0,.45); animation: msearchDrop .22s ease;
  }
  body.msearch-open .hdr--float2 .hsearch .hsearch__dd { max-height: calc(100vh - 96px); }
  .msearch-scrim { z-index: 110; }   /* below the panel (130), above everything else */
  /* explicit close (✕) for the search overlay — sits over the panel's right edge */
  .msearch-x { display: none; }
  body.msearch-open .msearch-x {
    display: inline-flex; align-items: center; justify-content: center; position: fixed; z-index: 131;
    top: calc(12px + env(safe-area-inset-top, 0px)); right: 12px; width: 40px; height: 40px;
    border: 0; border-radius: 50%; background: color-mix(in srgb, var(--c-text) 12%, var(--c-surface));
    color: var(--c-text); font-size: 17px; cursor: pointer;
  }
  body.msearch-open .msearch-x:active { background: var(--c-primary); color: var(--c-on-primary, #fff); }
  body.msearch-open .hdr--float2 .hsearch__box { padding-right: 48px; }   /* room for the ✕ */
  @keyframes msearchDrop { from { transform: translateY(-100%); } to { transform: none; } }

  /* the header-bottom (catbar) is replaced by the drawer + bottom bar on mobile */
  .catbar { display: none; }

  /* hero quick-question form hidden on mobile — the bottom-bar [+] handles asking.
     cosmic/split put the form (+ its bracketed shell) in .hero-right; aurora/
     minimal/stats include it inline → cover both so no empty box is left behind. */
  .hero .hero-right, .hero .ask-coverwrap, .hero .ask-wizard, .hero .ask-shell { display: none !important; }
  .hero .hero-content { grid-template-columns: 1fr !important; }

  /* FABs: the bottom-bar [+] replaces the floating ask-FAB. WhatsApp sits just
     above the bar; the smaller "yukarı çık" stacks gently right above it (no
     overlap). Both shrink on mobile. */
  .ask-fab { display: none !important; }
  /* same size, stacked: WhatsApp above the bar, to-top right above WhatsApp */
  .wa-fab, .totop-fab { width: 48px; height: 48px; right: 14px; font-size: 20px; }
  .wa-fab { bottom: calc(66px + env(safe-area-inset-bottom, 0px)) !important; }
  .totop-fab { bottom: calc(130px + env(safe-area-inset-bottom, 0px)) !important; }
  /* when WhatsApp is OFF, the to-top drops down to sit just above the bar itself */
  body:not(:has(.wa-fab)) .totop-fab { bottom: calc(66px + env(safe-area-inset-bottom, 0px)) !important; }

  /* ── width / overflow fixes — the real "genişlik bozuk" culprits ── */
  /* decorative hover bars sit at negative left → they overflow the 16px mobile gutter */
  .qa-list[data-variant="default"] .qa::before,
  .qa-list[data-variant="default"] .qa:hover::before { display: none; }
  /* the rank column is dead weight on a phone — drop it, give the title full width */
  .qa-list[data-variant="default"] .qa { grid-template-columns: 1fr; gap: 12px; padding: 18px 0 20px; }
  .qa-list[data-variant="default"] .qa-rank { flex-direction: row; gap: 8px; align-items: baseline; padding-top: 0; }
  .qa-list[data-variant="default"] .qa-rank .n { font-size: 20px; }
  .qa-list[data-variant="default"] .qa-rank .lbl { margin-top: 0; }
  /* never let media or embeds force a horizontal scroll */
  .site-main img, .site-main video, .site-main iframe, .single-q img, .qa-excerpt img { max-width: 100%; height: auto; }
  /* anything that was a fixed-width grid collapses to one column on a phone */
  .promo-row, .contact-grid, .contact-row, .askpage__grid, .page-grid, .spage--withsb, .acc-hub { grid-template-columns: 1fr !important; }
  /* grid/flex items default to min-width:auto and REFUSE to shrink below their
     content's min-content — a clamp() heading or long word then blows the feed
     column past the viewport (the real "genişlik bozuk" on the homepage). Let the
     whole feed chain shrink, and allow the section heading to wrap. */
  .page-grid > *, .feed-col, .qa-list, .qa-list > .qa, .qa-body, .single-q, .answers-block,
  .dashboard > *, .dash-side, .dash-main, .acc-hub > *, .acc-main, .ptab-pane, .phero__body { min-width: 0; }
  .section-title { flex-wrap: wrap; }
}

/* very small phones — tighten the bottom-bar labels so 5 slots always fit */
@media (max-width: 380px) {
  .mbar__item span, .mbar__plus-tx { font-size: 9px; }
  .mbar__item i { font-size: 16px; }
}

/* ============================================================================
   PAGE HERO  (.phero2)  —  one reusable hero block, 7 selectable variants.
   Global default = `page_hero_variant` setting (Görünüm); any page may override.
   Squared-aware + fully responsive. Rendered by partials/page-hero.php.
   ============================================================================ */
.phero2 { position: relative; overflow: hidden; border-radius: 18px; margin: 0 0 22px; padding: 26px 28px; }
.phero2__in { position: relative; z-index: 2; display: flex; align-items: center; gap: 18px; }
.phero2__ic { flex: none; width: 60px; height: 60px; border-radius: 16px; display: grid; place-items: center; font-size: 26px; }
.phero2__tx { flex: 1; min-width: 0; }
.phero2__eyebrow { display: inline-flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; margin-bottom: 8px; }
.phero2__title { margin: 0; font-family: var(--font-display); font-size: clamp(23px, 3.3vw, 33px); line-height: 1.12; }
.phero2__sub { margin: 7px 0 0; font-size: 15px; line-height: 1.5; opacity: .93; }
.phero2__stat { flex: none; text-align: center; padding-left: 18px; }
.phero2__stat strong { display: block; font-family: var(--font-display); font-size: 30px; font-weight: 800; line-height: 1; }
.phero2__stat span { font-size: 12px; text-transform: uppercase; letter-spacing: .06em; opacity: .85; }
.phero2[data-align="center"] .phero2__in { flex-direction: column; text-align: center; }
/* search slot */
.phero2__search { position: relative; display: flex; align-items: center; margin-top: 18px; max-width: 540px; }
.phero2__search input { width: 100%; height: 52px; border: 0; border-radius: 14px; padding: 0 52px; font-size: 15px; font-family: inherit; color: var(--c-text); background: var(--c-surface); box-shadow: 0 16px 40px -18px rgba(0,0,0,.5); outline: none; }
.phero2__search input:focus { box-shadow: 0 0 0 4px color-mix(in srgb, var(--c-primary) 30%, transparent), 0 16px 40px -18px rgba(0,0,0,.5); }
.phero2__search-ic { position: absolute; left: 19px; color: var(--c-primary); font-size: 15px; pointer-events: none; }
.phero2__search button { position: absolute; right: 8px; width: 38px; height: 38px; border: 0; border-radius: 10px; background: var(--c-grad, var(--c-primary)); color: #fff; cursor: pointer; display: grid; place-items: center; }
.phero2[data-align="center"] .phero2__search, .phero2[data-phv="spotlight"] .phero2__search, .phero2[data-phv="wave"] .phero2__search, .phero2[data-phv="image"] .phero2__search { margin-left: auto; margin-right: auto; }

/* variant: gradient (default) */
.phero2[data-phv="gradient"] { color: #fff; background: linear-gradient(120deg, var(--c-primary) 0%, var(--c-grad-2, #0d162e) 100%); box-shadow: 0 16px 40px -22px color-mix(in srgb, var(--c-primary) 75%, transparent); }
.phero2[data-phv="gradient"] .phero2__ic { background: rgba(255,255,255,.16); color: #fff; }
.phero2[data-phv="gradient"] .phero2__eyebrow { color: #fff; background: rgba(255,255,255,.16); padding: 5px 12px; border-radius: 999px; }
.phero2[data-phv="gradient"] .phero2__title { color: #fff; }

/* variant: spotlight (gradient + radial glow, centered) */
.phero2[data-phv="spotlight"] { color: #fff; background: radial-gradient(120% 140% at 15% 0%, color-mix(in srgb, var(--c-primary) 78%, #000) 0%, var(--c-grad-2, #0b1020) 72%); }
.phero2[data-phv="spotlight"]::before { content: ''; position: absolute; top: -45%; right: -10%; width: 60%; height: 170%; background: radial-gradient(circle, color-mix(in srgb, var(--c-accent, var(--c-primary)) 42%, transparent), transparent 60%); }
.phero2[data-phv="spotlight"] .phero2__in { flex-direction: column; text-align: center; }
.phero2[data-phv="spotlight"] .phero2__ic { background: rgba(255,255,255,.14); color: #fff; }
.phero2[data-phv="spotlight"] .phero2__eyebrow { color: #fff; background: rgba(255,255,255,.14); padding: 5px 12px; border-radius: 999px; }
.phero2[data-phv="spotlight"] .phero2__title, .phero2[data-phv="spotlight"] .phero2__stat strong { color: #fff; }

/* variant: glass (translucent surface) */
.phero2[data-phv="glass"] { color: var(--c-text); background: color-mix(in srgb, var(--c-surface) 55%, transparent); -webkit-backdrop-filter: blur(18px) saturate(160%); backdrop-filter: blur(18px) saturate(160%); border: 1px solid color-mix(in srgb, var(--c-text) 12%, transparent); }
.phero2[data-phv="glass"] .phero2__ic { background: var(--c-grad, var(--c-primary)); color: #fff; }
.phero2[data-phv="glass"] .phero2__eyebrow { color: var(--c-primary); }
.phero2[data-phv="glass"] .phero2__title { color: var(--c-text); }

/* variant: minimal (clean, dark text, accent underline) */
.phero2[data-phv="minimal"] { color: var(--c-text); background: color-mix(in srgb, var(--c-primary) 5%, var(--c-surface)); border-bottom: 3px solid var(--c-primary); }
.phero2[data-phv="minimal"] .phero2__ic { background: color-mix(in srgb, var(--c-primary) 14%, transparent); color: var(--c-primary); }
.phero2[data-phv="minimal"] .phero2__eyebrow { color: var(--c-primary); }
.phero2[data-phv="minimal"] .phero2__title { color: var(--c-text); }

/* variant: wave (gradient + rounded bottom; auto-flattens when squared) */
.phero2[data-phv="wave"] { color: #fff; background: linear-gradient(120deg, var(--c-primary) 0%, var(--c-grad-2, #0d162e) 100%); padding-bottom: 44px; }
.phero2[data-phv="wave"] .phero2__in { flex-direction: column; text-align: center; }
.phero2[data-phv="wave"]::after { content: ''; position: absolute; left: 0; right: 0; bottom: -1px; height: 34px; background: var(--c-bg); border-radius: 50% 50% 0 0 / 100% 100% 0 0; }
.phero2[data-phv="wave"] .phero2__ic { background: rgba(255,255,255,.16); color: #fff; }
.phero2[data-phv="wave"] .phero2__eyebrow { color: #fff; background: rgba(255,255,255,.16); padding: 5px 12px; border-radius: 999px; }
.phero2[data-phv="wave"] .phero2__title { color: #fff; }
body.ui-squared .phero2[data-phv="wave"]::after { display: none; }
body.ui-squared .phero2[data-phv="wave"] { padding-bottom: 26px; }

/* variant: split (text left, search/stat right) */
.phero2[data-phv="split"] { color: #fff; background: linear-gradient(120deg, var(--c-grad-2, #0d162e) 0%, var(--c-primary) 100%); }
.phero2[data-phv="split"] .phero2__eyebrow { color: #fff; background: rgba(255,255,255,.16); padding: 5px 12px; border-radius: 999px; }
.phero2[data-phv="split"] .phero2__ic { background: rgba(255,255,255,.16); color: #fff; }
.phero2[data-phv="split"] .phero2__title { color: #fff; }
.phero2[data-phv="split"] .phero2__search { margin-top: 0; min-width: 280px; }

/* variant: image (background photo + overlay) */
.phero2[data-phv="image"] { color: #fff; background: var(--c-grad-2, #0d162e); background-image: var(--phero-img); background-size: cover; background-position: center; }
.phero2[data-phv="image"]::before { content: ''; position: absolute; inset: 0; background: linear-gradient(120deg, color-mix(in srgb, var(--c-primary) 80%, transparent), rgba(8,12,24,.72)); }
.phero2[data-phv="image"] .phero2__in { flex-direction: column; text-align: center; }
.phero2[data-phv="image"] .phero2__ic { background: rgba(255,255,255,.18); color: #fff; }
.phero2[data-phv="image"] .phero2__eyebrow { color: #fff; background: rgba(255,255,255,.18); padding: 5px 12px; border-radius: 999px; }
.phero2[data-phv="image"] .phero2__title { color: #fff; }

/* squared + mobile */
body.ui-squared .phero2, body.ui-squared .phero2__ic, body.ui-squared .phero2__search input, body.ui-squared .phero2__search button { border-radius: var(--ui-radius, 4px); }
body.ui-squared .phero2 .phero2__eyebrow { border-radius: var(--ui-radius, 4px); }
@media (max-width: 640px) {
  .phero2 { padding: 22px 18px; }
  .phero2__in { flex-direction: column; text-align: center; align-items: center; gap: 14px; }
  .phero2__stat { display: none; }
  .phero2__search { margin-left: auto; margin-right: auto; }
}

/* ============================================================================
   MOBILE COMPONENT REFINEMENTS (≤600px) — inline hero buttons, inline profile
   tabs. Keep things side-by-side + compact instead of tall stacks.
   ============================================================================ */
@media (max-width: 600px) {
  /* Hero CTA buttons stay on ONE row (Soruları Gör + Kayıt Ol), shrunk to fit */
  .hero-actions { flex-wrap: nowrap; gap: 10px; }
  .hero-actions .btn { flex: 1 1 0; min-width: 0; justify-content: center; white-space: nowrap; }
  .hero-actions .btn-lg { padding: 13px 14px; font-size: 13px; }

  /* Profile tabs as ONE inline row — equal columns that shrink to fit (no page
     overflow, no scroll). */
  .ptabs { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; min-width: 0; gap: 4px; }
  .ptabs::-webkit-scrollbar { display: none; }
  .ptab { flex: 1 1 0; min-width: 0; justify-content: center; padding: 9px 6px; font-size: 11.5px; gap: 5px; white-space: nowrap; overflow: hidden; }
  .ptab i { flex: none; }
  .ptab span { padding: 1px 5px; font-size: 9.5px; flex: none; }
}

/* ===== Captcha widgets (custom / checkbox / emoji) ===== */
.cap { margin: 12px 0; }
.cap__q { display: block; font-size: 13px; font-weight: 600; color: var(--c-text); margin-bottom: 8px; }
.cap__q strong { font-weight: 800; letter-spacing: .03em; }
.cap__in { width: 130px; max-width: 100%; padding: 11px 13px; border: 1px solid color-mix(in srgb, var(--c-text) 18%, transparent); border-radius: 10px; background: var(--c-bg); color: var(--c-text); font-size: 15px; font-family: inherit; }
.cap__in:focus { outline: none; border-color: var(--c-primary); box-shadow: 0 0 0 3px color-mix(in srgb, var(--c-primary) 18%, transparent); }
.cap__box { display: flex; width: 100%; max-width: 360px; align-items: center; gap: 14px; padding: 13px 16px; border: 1.5px solid color-mix(in srgb, var(--c-text) 16%, transparent); border-radius: 14px; background: var(--c-bg); color: var(--c-text); font-weight: 700; font-size: 14px; cursor: pointer; font-family: inherit; text-align: left; transition: border-color .18s, background .18s, box-shadow .18s, transform .12s; }
.cap__box:hover { transform: translateY(-1px); box-shadow: 0 8px 22px -14px rgba(0,0,0,.4); }
.cap__tx { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
.cap__tx strong { font-size: 14px; }
.cap__tx small { font-size: 11px; font-weight: 600; color: var(--c-muted); }
.cap__brand { display: inline-flex; flex-direction: column; align-items: center; gap: 2px; font-size: 9px; font-weight: 700; letter-spacing: .06em; color: var(--c-muted); flex: none; }
.cap__brand i { font-size: 16px; color: var(--c-primary); }
.cap__box.is-busy .cap__tick { border-color: var(--c-primary); border-top-color: transparent; border-radius: 50%; animation: capSpin .6s linear infinite; color: transparent; }
@keyframes capSpin { to { transform: rotate(360deg); } }
.cap__box.is-on { border-color: #16a34a; background: color-mix(in srgb, #16a34a 7%, var(--c-bg)); }
.cap__box.is-on .cap__tick { background: #16a34a; border-color: #16a34a; color: #fff; border-radius: 7px; animation: capPop .25s ease; }
.cap__box.is-on .cap__tx small { color: #16a34a; }
@keyframes capPop { 0% { transform: scale(.6); } 70% { transform: scale(1.15); } 100% { transform: scale(1); } }
.cap__box:hover { border-color: var(--c-primary); }
.cap__tick { width: 26px; height: 26px; flex: none; border-radius: 7px; border: 2px solid color-mix(in srgb, var(--c-text) 28%, transparent); display: grid; place-items: center; color: transparent; font-size: 13px; transition: all .18s; }
.cap__emojis { display: flex; flex-wrap: wrap; gap: 8px; }
.cap__emoji { width: 52px; height: 52px; font-size: 26px; line-height: 1; border: 1.5px solid color-mix(in srgb, var(--c-text) 16%, transparent); border-radius: 12px; background: var(--c-surface); cursor: pointer; transition: transform .12s, border-color .15s; display: grid; place-items: center; }
.cap__emoji:hover { transform: translateY(-2px); border-color: var(--c-primary); }
.cap__emoji.is-on { border-color: var(--c-primary); background: color-mix(in srgb, var(--c-primary) 14%, transparent); box-shadow: 0 0 0 2px color-mix(in srgb, var(--c-primary) 30%, transparent); }
body.ui-squared .cap__in, body.ui-squared .cap__box, body.ui-squared .cap__tick, body.ui-squared .cap__emoji { border-radius: var(--ui-radius, 4px); }

/* ════ EMOJİ SEÇİCİ (yorum/cevap/yanıt formları) ════ */
.emoji-wrap { position: absolute; right: 10px; bottom: 10px; z-index: 5; }
.emoji-btn { width: 34px; height: 34px; border: 1px solid color-mix(in srgb, var(--c-text) 14%, transparent); background: var(--c-surface); color: var(--c-muted); border-radius: 9px; cursor: pointer; font-size: 15px; display: grid; place-items: center; transition: color .15s, border-color .15s; }
.emoji-btn:hover { color: var(--c-primary); border-color: var(--c-primary); }
.emoji-pop { position: absolute; right: 0; bottom: calc(100% + 8px); width: 268px; max-width: 80vw; max-height: 200px; overflow-y: auto; display: grid; grid-template-columns: repeat(8, 1fr); gap: 2px; padding: 10px; background: var(--c-surface); border: 1px solid color-mix(in srgb, var(--c-text) 14%, transparent); border-radius: 12px; box-shadow: 0 18px 44px -18px rgba(0,0,0,.5); }
.emoji-pick { border: 0; background: transparent; cursor: pointer; font-size: 20px; line-height: 1; padding: 5px 0; border-radius: 7px; transition: background .12s, transform .12s; }
.emoji-pick:hover { background: color-mix(in srgb, var(--c-primary) 12%, transparent); transform: scale(1.18); }
body.ui-squared .emoji-btn, body.ui-squared .emoji-pop { border-radius: var(--ui-radius, 4px); }

/* ════ HERO ROZETİ (ST) — Görünüm → Hero: hero_badge_on / hero_badge_text / hero_badge_style ════
   3 şablon: outline (Standart — ilk günkü klasik, KALICI) | stamp (Damga) | plate (Altın Plaka) */
.hbadge { position: absolute; top: 14px; right: 18px; z-index: 0; pointer-events: none; user-select: none;
  font-family: var(--font-display); font-weight: 800; line-height: 1; }
@media (max-width: 900px) { .hbadge { display: none; } }
/* 1) Standart — ilk günkü klasik büyük ST (çizgi kontur) — HEP KALIR */
.hbadge--outline { top: -30px; right: -10px; }
.hbadge--outline span { display: block; font-size: clamp(8rem, 18vw, 18rem); letter-spacing: -.06em;
  color: transparent; -webkit-text-stroke: 1.5px color-mix(in srgb, var(--c-text) 12%, transparent); }
/* 2) Damga — kesikli çerçeveli mühür, hafif salınım */
.hbadge--stamp { top: 12px; right: 14px; }
.hbadge--stamp span { display: block; font-size: clamp(3.6rem, 7vw, 6.5rem); padding: 16px 26px; border: 4px dashed color-mix(in srgb, var(--c-primary) 55%, transparent);
  border-radius: 18px; color: color-mix(in srgb, var(--c-primary) 70%, transparent);
  background: color-mix(in srgb, var(--c-primary) 7%, transparent); transform: rotate(7deg); animation: hbStamp 5s ease-in-out infinite; }
@keyframes hbStamp { 0%, 100% { transform: rotate(7deg) scale(1); } 50% { transform: rotate(4deg) scale(1.03); } }
body.ui-squared .hbadge--stamp span { border-radius: var(--ui-radius, 4px); }
/* 3) Altın Plaka — kabartmalı altın levha + ışıltı süpürmesi */
.hbadge--plate { animation: hbFloat 6s ease-in-out infinite; }
.hbadge--plate span { display: block; font-size: clamp(3.2rem, 6vw, 5.6rem); letter-spacing: .03em; padding: 26px 32px; border-radius: 20px;
  background: linear-gradient(150deg, #efdc8d 0%, #d3ba58 38%, #b69a35 62%, #8a7522 100%);
  color: #241c04; border: 1px solid rgba(255, 248, 214, .5); transform: rotate(-4deg);
  text-shadow: 0 1px 0 rgba(255, 250, 220, .45), 0 -1px 1px rgba(70, 55, 8, .5);
  box-shadow: inset 0 2px 2px rgba(255, 252, 230, .6), inset 0 -4px 8px rgba(58, 45, 6, .5), 0 20px 40px -18px rgba(0, 0, 0, .65); }
.hbadge--plate::after { content: ''; position: absolute; inset: 0; border-radius: 20px; transform: rotate(-4deg);
  background: linear-gradient(105deg, transparent 38%, rgba(255, 255, 255, .55) 50%, transparent 62%);
  background-size: 240% 100%; animation: hbSweep 3.8s ease-in-out infinite; }
@keyframes hbSweep { 0% { background-position: 130% 0; } 55%, 100% { background-position: -130% 0; } }
@keyframes hbFloat { 0%, 100% { translate: 0 0; } 50% { translate: 0 -7px; } }
body.ui-squared .hbadge--plate span { border-radius: var(--ui-radius, 4px); }
/* 4) Kurdele — eğik şerit banner */
.hbadge--ribbon span { display: block; font-size: clamp(3rem, 5.6vw, 5.2rem); letter-spacing: .04em; padding: 18px 40px; transform: rotate(-6deg);
  background: linear-gradient(180deg, color-mix(in srgb, var(--c-primary) 92%, #fff) 0%, var(--c-primary) 55%, color-mix(in srgb, var(--c-primary) 70%, #000) 100%);
  color: var(--c-on-primary, #fff); clip-path: polygon(0 0, 100% 0, 100% 70%, 50% 100%, 0 70%);
  box-shadow: 0 18px 36px -16px rgba(0,0,0,.6); animation: hbFloat 6s ease-in-out infinite; }
/* 5) Kalkan — arma/rozet kalkanı */
.hbadge--shield span { display: grid; place-items: center; width: clamp(120px, 13vw, 180px); aspect-ratio: 4/5; font-size: clamp(2.8rem, 4.6vw, 4.4rem);
  background: linear-gradient(160deg, color-mix(in srgb, var(--c-primary) 30%, var(--c-surface)), var(--c-surface));
  color: var(--c-text); border: 2px solid var(--c-primary); border-radius: 14px 14px 50% 50% / 14px 14px 40% 40%;
  text-shadow: 0 0 14px color-mix(in srgb, var(--c-primary) 60%, transparent); box-shadow: 0 16px 34px -16px rgba(0,0,0,.6); }
/* 6) Madalyon — düz altın sikke */
.hbadge--coin span { display: grid; place-items: center; width: clamp(120px, 13vw, 180px); aspect-ratio: 1; border-radius: 50%; font-size: clamp(2.8rem, 4.6vw, 4.4rem);
  background: radial-gradient(circle at 38% 32%, #f3e08f, #c9ad4f 55%, #93792c 100%); color: #2c2206;
  border: 4px solid #b89a3c; text-shadow: 0 1px 0 rgba(255,250,210,.5);
  box-shadow: inset 0 0 0 6px rgba(255,255,255,.18), inset 0 -10px 18px rgba(60,45,8,.5), 0 18px 38px -16px rgba(0,0,0,.6); animation: hbFloat 6.5s ease-in-out infinite; }
/* 7) Bilet — kenarları çentikli bilet koçanı */
.hbadge--ticket span { display: block; font-size: clamp(3rem, 5.6vw, 5rem); letter-spacing: .1em; padding: 24px 38px; transform: rotate(-3deg);
  background: linear-gradient(120deg, #dcc566, #c2aa47 50%, #9a842b); color: #241c04;
  -webkit-mask: radial-gradient(circle 9px at 0 50%, transparent 98%, #000) -9px, radial-gradient(circle 9px at 100% 50%, transparent 98%, #000) 9px; -webkit-mask-composite: source-in;
  box-shadow: 0 16px 34px -16px rgba(0,0,0,.55); animation: hbStamp 5s ease-in-out infinite; }
/* 8) Jeton — yuvarlak köşe token */
.hbadge--chip span { display: block; font-size: clamp(3rem, 5.6vw, 5rem); letter-spacing: .05em; padding: 22px 34px; border-radius: 16px; transform: rotate(-4deg);
  background: linear-gradient(150deg, color-mix(in srgb, var(--c-primary) 18%, var(--c-surface)), var(--c-surface));
  color: var(--c-text); border: 2px dashed color-mix(in srgb, var(--c-primary) 55%, transparent);
  box-shadow: inset 0 0 0 4px color-mix(in srgb, var(--c-primary) 8%, transparent), 0 16px 34px -16px rgba(0,0,0,.5); animation: hbFloat 7s ease-in-out infinite; }
/* 9) Mühür — testere kenarlı yuvarlak mühür */
.hbadge--seal span { display: grid; place-items: center; width: clamp(120px, 13vw, 175px); aspect-ratio: 1; font-size: clamp(2.7rem, 4.4vw, 4.2rem);
  background: var(--c-primary); color: var(--c-on-primary, #fff);
  clip-path: polygon(50% 0%, 63% 8%, 79% 4%, 85% 20%, 99% 28%, 94% 45%, 100% 60%, 88% 71%, 88% 88%, 71% 89%, 60% 100%, 45% 92%, 28% 96%, 21% 80%, 5% 73%, 9% 56%, 0% 41%, 12% 30%, 11% 13%, 28% 12%, 38% 2%);
  text-shadow: 0 1px 2px rgba(0,0,0,.35); filter: drop-shadow(0 14px 22px rgba(0,0,0,.45)); animation: hbStamp 6s ease-in-out infinite; }
/* 10) Etiket — delikli fiyat etiketi */
.hbadge--tag span { display: block; font-size: clamp(3rem, 5.6vw, 5rem); letter-spacing: .04em; padding: 22px 30px 22px 50px; position: relative; transform: rotate(6deg);
  background: linear-gradient(120deg, #dcc566, #c2aa47 50%, #9a842b); color: #241c04;
  clip-path: polygon(14% 0, 100% 0, 100% 100%, 14% 100%, 0 50%); box-shadow: 0 16px 34px -16px rgba(0,0,0,.55); animation: hbFloat 6s ease-in-out infinite; }
.hbadge--tag span::before { content: ''; position: absolute; left: 24px; top: 50%; transform: translateY(-50%); width: 12px; height: 12px; border-radius: 50%; background: var(--c-bg); box-shadow: inset 0 1px 3px rgba(0,0,0,.6); }
body.ui-squared .hbadge--shield span, body.ui-squared .hbadge--chip span { border-radius: var(--ui-radius, 4px); }

/* ════ SAYFA HERO — 3 yeni varyant: aurora | stripes | frame (Görünüm → Tasarım Ayarları) ════ */
/* Aurora — yavaşça süzülen renk bulutları */
.phero2[data-phv="aurora"] { color: #fff; background: var(--c-grad-2, #0b1020); }
.phero2[data-phv="aurora"]::before, .phero2[data-phv="aurora"]::after { content: ''; position: absolute; width: 55%; height: 160%; border-radius: 50%; filter: blur(46px); opacity: .5; pointer-events: none; }
.phero2[data-phv="aurora"]::before { left: -12%; top: -60%; background: radial-gradient(circle, color-mix(in srgb, var(--c-primary) 75%, transparent), transparent 65%); animation: pha1 11s ease-in-out infinite alternate; }
.phero2[data-phv="aurora"]::after { right: -14%; bottom: -70%; background: radial-gradient(circle, color-mix(in srgb, var(--c-accent, var(--c-primary)) 65%, transparent), transparent 65%); animation: pha2 13s ease-in-out infinite alternate; }
@keyframes pha1 { from { transform: translate(0, 0) scale(1); } to { transform: translate(14%, 10%) scale(1.15); } }
@keyframes pha2 { from { transform: translate(0, 0) scale(1.1); } to { transform: translate(-12%, -8%) scale(.95); } }
.phero2[data-phv="aurora"] .phero2__ic { background: rgba(255,255,255,.15); color: #fff; }
.phero2[data-phv="aurora"] .phero2__eyebrow { color: #fff; background: rgba(255,255,255,.15); padding: 5px 12px; border-radius: 999px; }
.phero2[data-phv="aurora"] .phero2__title, .phero2[data-phv="aurora"] .phero2__stat strong { color: #fff; }
.phero2[data-phv="aurora"] .phero2__sub { color: rgba(255,255,255,.82); }
/* Stripes — köşeden diyagonal şerit dokusu */
.phero2[data-phv="stripes"] { color: var(--c-text); background: var(--c-surface); border: 1px solid color-mix(in srgb, var(--c-text) 10%, transparent); border-left: 5px solid var(--c-primary); }
.phero2[data-phv="stripes"]::before { content: ''; position: absolute; right: 0; top: 0; bottom: 0; width: 42%; pointer-events: none;
  background: repeating-linear-gradient(-55deg, color-mix(in srgb, var(--c-primary) 11%, transparent) 0 10px, transparent 10px 26px);
  -webkit-mask-image: linear-gradient(to left, #000 30%, transparent); mask-image: linear-gradient(to left, #000 30%, transparent); }
.phero2[data-phv="stripes"] .phero2__ic { background: color-mix(in srgb, var(--c-primary) 14%, transparent); color: var(--c-primary); }
.phero2[data-phv="stripes"] .phero2__eyebrow { color: var(--c-primary); }
/* Frame — çift kenarlıklı çerçeve, ortalanmış */
.phero2[data-phv="frame"] { color: var(--c-text); background: var(--c-surface); border: 1px solid color-mix(in srgb, var(--c-primary) 35%, transparent); position: relative; }
.phero2[data-phv="frame"]::before { content: ''; position: absolute; inset: 7px; border: 1px dashed color-mix(in srgb, var(--c-primary) 40%, transparent); border-radius: inherit; pointer-events: none; }
.phero2[data-phv="frame"] .phero2__in { flex-direction: column; text-align: center; }
.phero2[data-phv="frame"] .phero2__ic { background: var(--c-grad, var(--c-primary)); color: var(--c-on-primary, #fff); }
.phero2[data-phv="frame"] .phero2__eyebrow { color: var(--c-primary); letter-spacing: .18em; }
.phero2[data-phv="frame"] .phero2__search { margin-left: auto; margin-right: auto; }

/* ════ YASAL SAYFA TABLOLARI (.spage__body table) — Kullanım Koşulları vb. ════ */
.spage__body table { width: 100%; border-collapse: separate; border-spacing: 0; margin: 16px 0 24px; font-size: 13.5px; line-height: 1.6;
  background: var(--c-surface); border: 1px solid color-mix(in srgb, var(--c-text) 12%, transparent); border-radius: 12px; overflow: hidden; }
.spage__body table th { background: color-mix(in srgb, var(--c-primary) 16%, var(--c-surface)); color: var(--c-text); text-align: left;
  font-size: 11.5px; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; padding: 11px 13px;
  border-bottom: 2px solid color-mix(in srgb, var(--c-primary) 38%, transparent); }
.spage__body table td { padding: 10px 13px; border-bottom: 1px solid color-mix(in srgb, var(--c-text) 8%, transparent); vertical-align: top; color: var(--c-text); }
.spage__body table tr:last-child td { border-bottom: 0; }
.spage__body table tbody tr:nth-child(even) { background: color-mix(in srgb, var(--c-text) 3%, transparent); }
body.ui-squared .spage__body table { border-radius: var(--ui-radius, 4px); }
@media (max-width: 700px) { .spage__body table { display: block; overflow-x: auto; } }

/* ════ ŞABLON ÜSTÜ ✎ DÜZENLE ÇİPLERİ — yalnız yönetici (admin_edit_buttons) ════ */
.edit-chip { position: absolute; top: 10px; right: 10px; z-index: 95; display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 12px; border-radius: 999px; background: rgba(10, 12, 20, .78); color: #fff !important; font-size: 11.5px; font-weight: 700;
  letter-spacing: .03em; text-decoration: none; border: 1px solid rgba(255,255,255,.25); backdrop-filter: blur(4px);
  opacity: .35; transition: opacity .15s, transform .12s; }
.edit-chip:hover { opacity: 1; transform: scale(1.04); }
.edit-chip i { font-size: 10.5px; color: #dcc566; }
@media (max-width: 900px) { .edit-chip { display: none; } }


/* ════ YENİ VARYANT: qa_card / split ════ */
/* ── qa_card variant: split (yatay bölünmüş kart: şerit + avatar / gövde / istatistik) ── */
.qa-list[data-variant="split"] { display: flex; flex-direction: column; gap: 14px; }
.qa-list[data-variant="split"] .qsp { position: relative; display: grid; grid-template-columns: auto 1fr auto; align-items: stretch; background: var(--c-surface); border: 1px solid color-mix(in srgb, var(--c-text) 10%, transparent); border-radius: 14px; overflow: hidden; transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease; }
.qa-list[data-variant="split"] .qsp:hover { transform: translateY(-3px); box-shadow: 0 16px 34px -22px rgba(0,0,0,.5); border-color: color-mix(in srgb, var(--c-primary) 35%, transparent); }
/* Sol ince dikey şerit */
.qa-list[data-variant="split"] .qsp::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: var(--c-primary); transition: filter .25s ease, box-shadow .25s ease; }
.qa-list[data-variant="split"] .qsp:hover::before { filter: brightness(1.2); box-shadow: 0 0 14px 2px color-mix(in srgb, var(--c-primary) 60%, transparent); }
/* Sol avatar bloğu */
.qa-list[data-variant="split"] .qsp__side { display: flex; align-items: flex-start; padding: 18px 0 18px 18px; }
.qa-list[data-variant="split"] .qsp__ava { display: block; width: 48px; height: 48px; border-radius: 50%; background: var(--c-bg) center/cover no-repeat; border: 2px solid color-mix(in srgb, var(--c-primary) 30%, transparent); flex: none; }
/* Orta gövde */
.qa-list[data-variant="split"] .qsp__main { min-width: 0; padding: 16px 18px; }
.qa-list[data-variant="split"] .qsp__top { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 8px; }
.qa-list[data-variant="split"] .qsp__cat { font-family: var(--font-sans); font-size: 10px; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: var(--c-primary); background: color-mix(in srgb, var(--c-primary) 12%, transparent); border: 1px solid color-mix(in srgb, var(--c-primary) 28%, transparent); padding: 3px 10px; border-radius: 999px; }
.qa-list[data-variant="split"] .qsp__title { margin: 0 0 6px; font-family: var(--font-display); font-size: 18px; font-weight: 700; line-height: 1.25; letter-spacing: -.01em; text-transform: none; }
.qa-list[data-variant="split"] .qsp__title a { color: var(--c-text); text-decoration: none; }
.qa-list[data-variant="split"] .qsp__title a:hover { color: var(--c-primary); }
/* 2 satırla sınırlı özet */
.qa-list[data-variant="split"] .qsp__ex { margin: 0 0 10px; font-family: var(--font-sans); font-size: 13.5px; line-height: 1.55; color: var(--c-muted); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.qa-list[data-variant="split"] .qsp__meta { display: flex; align-items: center; gap: 8px; font-family: var(--font-sans); font-size: 12.5px; color: var(--c-muted); min-width: 0; }
.qa-list[data-variant="split"] .qsp__who { display: flex; align-items: center; gap: 6px; text-decoration: none; min-width: 0; }
.qa-list[data-variant="split"] .qsp__nm { font-weight: 700; color: var(--c-text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.qa-list[data-variant="split"] .qsp__sep { flex: none; }
.qa-list[data-variant="split"] .qsp__when { white-space: nowrap; }
/* Sağ istatistik sütunu (ince border ile ayrılmış) */
.qa-list[data-variant="split"] .qsp__stats { display: flex; flex-direction: column; justify-content: center; gap: 14px; padding: 16px 22px; min-width: 96px; text-align: center; border-left: 1px solid color-mix(in srgb, var(--c-text) 12%, transparent); }
.qa-list[data-variant="split"] .qsp__num { display: block; font-family: var(--font-display); font-size: 30px; font-weight: 800; line-height: 1; color: var(--c-text); }
.qa-list[data-variant="split"] .qsp__stat.is-on .qsp__num { color: var(--c-primary); }
.qa-list[data-variant="split"] .qsp__num--sm { font-size: 16px; font-weight: 700; color: var(--c-muted); }
.qa-list[data-variant="split"] .qsp__lbl { display: block; font-family: var(--font-sans); font-size: 10px; font-weight: 700; letter-spacing: .15em; text-transform: uppercase; color: var(--c-muted); margin-top: 3px; }
/* Tablet daralması */
@media (max-width: 880px) {
  .qa-list[data-variant="split"] .qsp__main { padding: 14px 16px; }
  .qa-list[data-variant="split"] .qsp__stats { padding: 14px 16px; min-width: 84px; }
}
/* Mobil: istatistikler alta yatay satıra düşer */
@media (max-width: 640px) {
  .qa-list[data-variant="split"] .qsp { grid-template-columns: auto 1fr; }
  .qa-list[data-variant="split"] .qsp:hover { transform: none; }
  .qa-list[data-variant="split"] .qsp__side { padding: 14px 0 0 14px; }
  .qa-list[data-variant="split"] .qsp__stats { grid-column: 1 / -1; flex-direction: row; align-items: center; justify-content: flex-start; gap: 22px; text-align: left; border-left: 0; border-top: 1px solid color-mix(in srgb, var(--c-text) 12%, transparent); padding: 10px 16px; }
  .qa-list[data-variant="split"] .qsp__stat { display: flex; align-items: baseline; gap: 6px; }
  .qa-list[data-variant="split"] .qsp__num { font-size: 20px; }
  .qa-list[data-variant="split"] .qsp__lbl { margin-top: 0; }
}
/* Köşeli arayüz modu */
body.ui-squared .qa-list[data-variant="split"] .qsp,
body.ui-squared .qa-list[data-variant="split"] .qsp__ava,
body.ui-squared .qa-list[data-variant="split"] .qsp__cat { border-radius: var(--ui-radius, 4px); }

/* ════ YENİ VARYANT: qa_card / focus ════ */
/* ============================================================
   QA CARD — "focus" varyantı: başlık odaklı minimal kart
   Kapsam: .qa-list[data-variant="focus"] — önek: .qfc-*
   ============================================================ */
.qa-list[data-variant="focus"] { display: flex; flex-direction: column; gap: 12px; }
.qa-list[data-variant="focus"] .ad-infeed { margin-bottom: 0; }

/* Kart: surface zemin, sol kenarda gizli 3px çizgi, hover'da padding animasyonu */
.qa-list[data-variant="focus"] .qfc-card { position: relative; background: var(--c-surface); border: 1px solid color-mix(in srgb, var(--c-text) 9%, transparent); border-radius: 14px; padding: 18px 22px; overflow: hidden; transition: padding-left .25s ease, border-color .25s ease; }
.qa-list[data-variant="focus"] .qfc-card::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: transparent; transition: background .25s ease; }
.qa-list[data-variant="focus"] .qfc-card:hover { padding-left: 30px; border-color: color-mix(in srgb, var(--c-primary) 35%, transparent); }
.qa-list[data-variant="focus"] .qfc-card:hover::before { background: var(--c-primary); }

/* Üst satır: kategori pill + tarih */
.qa-list[data-variant="focus"] .qfc-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 10px; }
.qa-list[data-variant="focus"] .qfc-pill { font-family: var(--font-sans); font-size: 10px; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: var(--c-primary); background: color-mix(in srgb, var(--c-primary) 12%, transparent); padding: 4px 10px; border-radius: 999px; }
.qa-list[data-variant="focus"] .qfc-date { font-family: var(--font-sans); font-size: 11px; color: var(--c-muted); letter-spacing: .06em; text-transform: uppercase; white-space: nowrap; }

/* Başlık: büyük display font, 2 satır clamp */
.qa-list[data-variant="focus"] .qfc-title { font-family: var(--font-display); font-size: 19px; font-weight: 800; line-height: 1.25; letter-spacing: -.015em; text-transform: none; margin: 0 0 12px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.qa-list[data-variant="focus"] .qfc-title a { color: var(--c-text); transition: color .2s ease; }
.qa-list[data-variant="focus"] .qfc-title a:hover { color: var(--c-primary); }

/* Alt ince meta satırı: 26px avatar + yazar + cevap + görüntülenme */
.qa-list[data-variant="focus"] .qfc-meta { display: flex; align-items: center; gap: 8px; font-family: var(--font-sans); font-size: 12px; color: var(--c-muted); min-width: 0; }
.qa-list[data-variant="focus"] .qfc-author { display: inline-flex; align-items: center; gap: 8px; min-width: 0; color: var(--c-text); }
.qa-list[data-variant="focus"] .qfc-ava { width: 26px; height: 26px; border-radius: 50%; background-size: cover; background-position: center; border: 1px solid color-mix(in srgb, var(--c-primary) 45%, transparent); flex: none; }
.qa-list[data-variant="focus"] .qfc-name { font-weight: 700; color: var(--c-text); max-width: 160px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.qa-list[data-variant="focus"] .qfc-author:hover .qfc-name { color: var(--c-primary); }
.qa-list[data-variant="focus"] .qfc-sep { color: color-mix(in srgb, var(--c-muted) 60%, transparent); }
.qa-list[data-variant="focus"] .qfc-stat { display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; }
.qa-list[data-variant="focus"] .qfc-stat i { font-size: 11px; }

/* Mobil duyarlılık */
@media (max-width: 880px) {
  .qa-list[data-variant="focus"] .qfc-card { padding: 16px 18px; }
  .qa-list[data-variant="focus"] .qfc-card:hover { padding-left: 24px; }
  .qa-list[data-variant="focus"] .qfc-title { font-size: 18px; }
}
@media (max-width: 640px) {
  .qa-list[data-variant="focus"] { gap: 10px; }
  .qa-list[data-variant="focus"] .qfc-card { padding: 14px 16px; }
  .qa-list[data-variant="focus"] .qfc-card:hover { padding-left: 19px; }
  .qa-list[data-variant="focus"] .qfc-title { font-size: 16.5px; margin-bottom: 10px; }
  .qa-list[data-variant="focus"] .qfc-meta { flex-wrap: wrap; row-gap: 4px; }
  .qa-list[data-variant="focus"] .qfc-name { max-width: 120px; }
}

/* Köşeli mod (ui-squared) override */
body.ui-squared .qa-list[data-variant="focus"] .qfc-card,
body.ui-squared .qa-list[data-variant="focus"] .qfc-pill { border-radius: var(--ui-radius, 4px); }
body.ui-squared .qa-list[data-variant="focus"] .qfc-ava { border-radius: 50% !important; }

/* ════ YENİ VARYANT: qa_card / forum ════ */
/* ========== QA-CARD VARYANT: "forum" — klasik forum satırı (.qfr-*) ========== */
.qa-list[data-variant="forum"] { display: flex; flex-direction: column; }
.qa-list[data-variant="forum"] .qfr-row { display: grid; grid-template-columns: 52px 1fr auto; gap: 16px; align-items: center; padding: 14px 16px; border-bottom: 1px solid color-mix(in srgb, var(--c-text) 8%, transparent); transition: background .2s ease; }
/* Zebra: tek sıralar hafif yüzey tonu (araya giren reklamlar sayımı bozmasın diye nth-of-type) */
.qa-list[data-variant="forum"] .qfr-row:nth-of-type(odd) { background: color-mix(in srgb, var(--c-surface) 60%, transparent); }
/* Hover: primary %6 karışım zemin */
.qa-list[data-variant="forum"] .qfr-row:hover { background: color-mix(in srgb, var(--c-primary) 6%, transparent); }
/* Sol avatar */
.qa-list[data-variant="forum"] .qfr-ava { width: 52px; height: 52px; border-radius: 50%; background-size: cover; background-position: center; flex: none; border: 2px solid color-mix(in srgb, var(--c-primary) 45%, transparent); box-shadow: 0 2px 8px rgba(0,0,0,.15); }
/* Orta blok */
.qa-list[data-variant="forum"] .qfr-main { min-width: 0; }
.qa-list[data-variant="forum"] .qfr-title { font-family: var(--font-display); font-size: 17px; font-weight: 700; line-height: 1.25; letter-spacing: -.01em; text-transform: none; margin: 0 0 3px; }
.qa-list[data-variant="forum"] .qfr-title a { color: var(--c-text); }
.qa-list[data-variant="forum"] .qfr-title a:hover { color: var(--c-primary); }
/* Tek satır özet */
.qa-list[data-variant="forum"] .qfr-excerpt { font-family: var(--font-sans); font-size: 13px; color: var(--c-muted); line-height: 1.45; margin: 0 0 6px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Küçük meta: yazar · kategori · tarih */
.qa-list[data-variant="forum"] .qfr-meta { display: flex; align-items: center; gap: 6px; font-family: var(--font-sans); font-size: 11px; color: var(--c-muted); min-width: 0; overflow: hidden; white-space: nowrap; }
.qa-list[data-variant="forum"] .qfr-author { font-weight: 700; color: var(--c-text); overflow: hidden; text-overflow: ellipsis; }
.qa-list[data-variant="forum"] .qfr-author:hover { color: var(--c-primary); }
.qa-list[data-variant="forum"] .qfr-cat { font-weight: 700; text-transform: uppercase; letter-spacing: .1em; color: var(--c-primary); flex: none; }
.qa-list[data-variant="forum"] .qfr-date { flex: none; }
.qa-list[data-variant="forum"] .qfr-dot { opacity: .6; flex: none; }
/* Sağ: kare istatistik kutuları */
.qa-list[data-variant="forum"] .qfr-stats { display: flex; gap: 8px; flex: none; }
.qa-list[data-variant="forum"] .qfr-box { width: 64px; height: 64px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; background: color-mix(in srgb, var(--c-text) 5%, transparent); border: 1px solid color-mix(in srgb, var(--c-text) 10%, transparent); border-radius: 8px; }
.qa-list[data-variant="forum"] .qfr-box.is-answered { background: color-mix(in srgb, var(--c-primary) 8%, transparent); border-color: color-mix(in srgb, var(--c-primary) 45%, transparent); }
.qa-list[data-variant="forum"] .qfr-box.is-answered .qfr-num { color: var(--c-primary); }
.qa-list[data-variant="forum"] .qfr-num { font-family: var(--font-display); font-size: 20px; font-weight: 800; line-height: 1; color: var(--c-text); }
.qa-list[data-variant="forum"] .qfr-lbl { font-family: var(--font-sans); font-size: 9px; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--c-muted); }
/* Köşeli tema override */
body.ui-squared .qa-list[data-variant="forum"] .qfr-box { border-radius: var(--ui-radius, 4px); }
body.ui-squared .qa-list[data-variant="forum"] .qfr-ava { border-radius: 50% !important; }
/* Tablet */
@media (max-width: 880px) {
  .qa-list[data-variant="forum"] .qfr-row { grid-template-columns: 44px 1fr auto; gap: 12px; padding: 12px; }
  .qa-list[data-variant="forum"] .qfr-ava { width: 44px; height: 44px; }
  .qa-list[data-variant="forum"] .qfr-box { width: 54px; height: 54px; }
  .qa-list[data-variant="forum"] .qfr-num { font-size: 17px; }
  .qa-list[data-variant="forum"] .qfr-lbl { font-size: 8px; letter-spacing: .05em; }
}
/* Telefon: kutular küçülür ama sağda kalır */
@media (max-width: 640px) {
  .qa-list[data-variant="forum"] .qfr-row { grid-template-columns: 38px 1fr auto; gap: 10px; padding: 10px 8px; }
  .qa-list[data-variant="forum"] .qfr-ava { width: 38px; height: 38px; }
  .qa-list[data-variant="forum"] .qfr-title { font-size: 15px; }
  .qa-list[data-variant="forum"] .qfr-excerpt { font-size: 12px; }
  .qa-list[data-variant="forum"] .qfr-stats { gap: 6px; }
  .qa-list[data-variant="forum"] .qfr-box { width: 46px; height: 46px; gap: 2px; }
  .qa-list[data-variant="forum"] .qfr-num { font-size: 15px; }
  .qa-list[data-variant="forum"] .qfr-lbl { font-size: 7px; }
}

/* ════ YENİ VARYANT: sidebar / glass ════ */
/* ── sidebar variant: glass (cam efektli widget'lar, rozetli ikon başlık) ── */
.sb[data-variant="glass"] .widget {
  /* yarı saydam cam zemin + blur */
  background: color-mix(in srgb, var(--c-surface) 55%, transparent);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  border: 1px solid color-mix(in srgb, var(--c-text) 12%, transparent);
  border-top: 1px solid rgba(255,255,255,.55); /* parlak üst kenar (cam ışıltısı) */
  border-radius: 18px;
  box-shadow: 0 1px 0 rgba(255,255,255,.18) inset, 0 12px 32px rgba(0,0,0,.10);
}
.sb[data-variant="glass"] .widget:hover {
  box-shadow: 0 1px 0 rgba(255,255,255,.22) inset, 0 16px 40px rgba(0,0,0,.14);
}
/* başlık: saydam zemin, ince ayraç */
.sb[data-variant="glass"] .widget__head {
  background: transparent;
  border-bottom: 1px solid color-mix(in srgb, var(--c-text) 10%, transparent);
  gap: 10px; padding: 13px 16px;
}
/* ikon rozeti: 28px yuvarlak, gradyan zemin — partial'lardan gelen çıplak <i> de aynı görünür */
.sb[data-variant="glass"] .widget__head .sbg-ic,
.sb[data-variant="glass"] .widget__head > i {
  flex: 0 0 28px; width: 28px; height: 28px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 50%;
  background: var(--c-grad, var(--c-primary));
  color: var(--c-on-primary, #fff);
  font-size: 12px; line-height: 1;
  box-shadow: 0 4px 12px color-mix(in srgb, var(--c-primary) 35%, transparent), 0 1px 0 rgba(255,255,255,.30) inset;
}
.sb[data-variant="glass"] .widget__head .sbg-ic i { font-size: 12px; color: var(--c-on-primary, #fff); }
/* liste satırları: cam üstünde yumuşak hover */
.sb[data-variant="glass"] .w-list > li:hover { background: color-mix(in srgb, var(--c-primary) 9%, transparent); }
.sb[data-variant="glass"] .w-list .ava { border-color: rgba(255,255,255,.45); box-shadow: 0 2px 8px rgba(0,0,0,.12); }
/* reklam görseli cam köşeleriyle uyumlu kalsın */
.sb[data-variant="glass"] .widget-ad .ad-slot img { border-radius: 0 0 18px 18px; }
/* mobil duyarlılık */
@media (max-width: 880px) {
  .sb[data-variant="glass"] .widget { -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); border-radius: 14px; }
  .sb[data-variant="glass"] .widget__head { padding: 12px 14px; }
  .sb[data-variant="glass"] .widget-ad .ad-slot img { border-radius: 0 0 14px 14px; }
}
@media (max-width: 640px) {
  .sb[data-variant="glass"] .widget { margin-bottom: 12px; }
  .sb[data-variant="glass"] .widget__head { font-size: 12.5px; gap: 8px; }
  .sb[data-variant="glass"] .widget__head .sbg-ic,
  .sb[data-variant="glass"] .widget__head > i { flex-basis: 24px; width: 24px; height: 24px; font-size: 11px; }
  .sb[data-variant="glass"] .widget__head .sbg-ic i { font-size: 11px; }
}
/* köşeli tema desteği — rozet daima yuvarlak kalır */
body.ui-squared .sb[data-variant="glass"] .widget { border-radius: var(--ui-radius, 4px); }
body.ui-squared .sb[data-variant="glass"] .widget-ad .ad-slot img { border-radius: 0 0 var(--ui-radius, 4px) var(--ui-radius, 4px); }
body.ui-squared .sb[data-variant="glass"] .widget__head .sbg-ic,
body.ui-squared .sb[data-variant="glass"] .widget__head > i { border-radius: 50% !important; }

/* ════ YENİ VARYANT: sidebar / outline ════ */
/* ── sidebar variant: outline (transparan zemin, primary çerçeve, çentik başlık) ── */
.sb[data-variant="outline"] .widget {
  background: transparent;
  border: 1.5px solid color-mix(in srgb, var(--c-primary) 30%, transparent);
  border-radius: 14px;
  box-shadow: none;
  overflow: visible; /* çentik başlık üst çizginin üzerine taşar */
  margin: 26px 0 20px;
}
.sb[data-variant="outline"] .widget:hover { box-shadow: none; transform: none; }
/* başlık: widget üst çizgisine oturan çentik/sekme */
.sb[data-variant="outline"] .widget__head {
  display: inline-flex; align-items: center; gap: 8px;
  width: max-content; max-width: calc(100% - 24px);
  margin: -10px 0 0 12px;
  padding: 0 10px;
  background: var(--c-bg); /* arkadaki çizgiyi maskeler */
  border: 0;
  color: var(--c-primary);
  font-family: var(--font-display); font-weight: 800;
  font-size: 11px; line-height: 1.6;
  text-transform: uppercase; letter-spacing: .16em;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.sb[data-variant="outline"] .widget__head i { color: var(--c-primary); font-size: 11px; }
.sb[data-variant="outline"] .widget__head .count { color: var(--c-muted); }
/* gövde: hafif, havadar */
.sb[data-variant="outline"] .widget__body { padding: 8px 16px 12px; }
.sb[data-variant="outline"] .sbo-body { padding: 4px 16px 8px; }
/* liste: öğeler ince çizgilerle ayrılır */
.sb[data-variant="outline"] .sbo-list { list-style: none; margin: 0; padding: 0; }
.sb[data-variant="outline"] .sbo-list > li + li { border-top: 1px solid color-mix(in srgb, var(--c-text) 8%, transparent); }
.sb[data-variant="outline"] .sbo-row {
  display: flex; gap: 12px; align-items: center;
  padding: 11px 2px;
  color: var(--c-text); text-decoration: none;
  transition: color .15s ease;
}
.sb[data-variant="outline"] .sbo-row:hover .sbo-title { color: var(--c-primary); }
.sb[data-variant="outline"] .sbo-ava {
  width: 38px; height: 38px; flex: 0 0 38px;
  border-radius: 50%; background-size: cover; background-position: center;
  border: 1.5px solid color-mix(in srgb, var(--c-primary) 30%, transparent);
}
.sb[data-variant="outline"] .sbo-info { min-width: 0; flex: 1; }
.sb[data-variant="outline"] .sbo-meta {
  font-family: var(--font-sans); font-size: 10px; color: var(--c-muted);
  text-transform: uppercase; letter-spacing: .12em; font-weight: 600;
  margin-bottom: 3px;
}
.sb[data-variant="outline"] .sbo-meta strong { color: var(--c-text); font-weight: 700; }
.sb[data-variant="outline"] .sbo-meta i { color: var(--c-primary); margin-right: 3px; }
.sb[data-variant="outline"] .sbo-title {
  font-family: var(--font-sans); font-weight: 700; font-size: 13px;
  line-height: 1.4; color: var(--c-text); margin-bottom: 3px;
  transition: color .15s ease;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.sb[data-variant="outline"] .sbo-snip {
  font-size: 12px; color: var(--c-muted); line-height: 1.4;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
/* reklam görseli çerçeve köşelerine uyum */
.sb[data-variant="outline"] .widget-ad .ad-slot img { border-radius: 0 0 12px 12px; }
/* mobil duyarlılık */
@media (max-width: 880px) {
  .sb[data-variant="outline"] .widget { margin: 24px 0 18px; }
  .sb[data-variant="outline"] .sbo-body { padding: 4px 14px 8px; }
}
@media (max-width: 640px) {
  .sb[data-variant="outline"] .sbo-ava { width: 34px; height: 34px; flex-basis: 34px; }
  .sb[data-variant="outline"] .sbo-row { gap: 10px; padding: 10px 2px; }
  .sb[data-variant="outline"] .widget__head { letter-spacing: .1em; }
}
/* köşeli arayüz (admin toggle) */
body.ui-squared .sb[data-variant="outline"] .widget { border-radius: var(--ui-radius, 4px); }
body.ui-squared .sb[data-variant="outline"] .widget-ad .ad-slot img { border-radius: 0 0 var(--ui-radius, 4px) var(--ui-radius, 4px); }
body.ui-squared .sb[data-variant="outline"] .sbo-ava { border-radius: 50% !important; }

/* ════ YENİ VARYANT: sidebar / stacked ════ */
/* ── sidebar variant: stacked (başlık solda dikey şerit, kompakt yoğun liste) — .sbs-* ── */
.sb[data-variant="stacked"] .widget { display: flex; align-items: stretch; border-radius: 10px; margin-bottom: 12px; }
/* dikey şerit başlık: alttan üste okunur, palet gradyanı zemin */
.sb[data-variant="stacked"] .widget__head {
  writing-mode: vertical-rl; transform: rotate(180deg);
  flex: 0 0 30px; width: 30px; min-width: 30px;
  padding: 12px 0; justify-content: center; gap: 8px;
  background: var(--c-grad, linear-gradient(135deg, var(--c-primary), var(--c-accent)));
  color: var(--c-on-primary, #fff);
  border-bottom: 0;
  font-size: 10.5px; letter-spacing: .14em;
}
.sb[data-variant="stacked"] .widget__head i { color: var(--c-on-primary, #fff); font-size: 11px; }
.sb[data-variant="stacked"] .widget__head .count { margin-left: 0; color: rgba(255,255,255,.8); }
/* içerik şeridin sağında, yoğun dolgu */
.sb[data-variant="stacked"] .widget__body { flex: 1 1 auto; min-width: 0; padding: 8px; }
.sb[data-variant="stacked"] .widget__body--ad { padding: 0; }
.sb[data-variant="stacked"] .widget-ad .ad-slot img { border-radius: 0; }
/* yoğun liste */
.sb[data-variant="stacked"] .sbs-list { list-style: none; margin: 0; padding: 0; }
.sb[data-variant="stacked"] .sbs-list > li + li { border-top: 1px dashed color-mix(in srgb, var(--c-text) 10%, transparent); }
.sb[data-variant="stacked"] .sbs-row { display: flex; gap: 8px; align-items: flex-start; padding: 8px; border-radius: 7px; color: var(--c-text); text-decoration: none; transition: background .15s, color .15s; }
.sb[data-variant="stacked"] .sbs-row:hover { background: color-mix(in srgb, var(--c-primary) 7%, transparent); }
.sb[data-variant="stacked"] .sbs-row:hover .sbs-title { color: var(--c-primary); }
.sb[data-variant="stacked"] .sbs-ava { flex: 0 0 28px; width: 28px; height: 28px; border-radius: 50%; background-size: cover; background-position: center; border: 1.5px solid color-mix(in srgb, var(--c-primary) 40%, transparent); }
.sb[data-variant="stacked"] .sbs-info { flex: 1; min-width: 0; }
.sb[data-variant="stacked"] .sbs-meta { font-family: var(--font-sans); font-size: 9.5px; font-weight: 600; color: var(--c-muted); text-transform: uppercase; letter-spacing: .1em; margin-bottom: 2px; }
.sb[data-variant="stacked"] .sbs-meta strong { color: var(--c-text); font-weight: 700; }
.sb[data-variant="stacked"] .sbs-meta i { color: var(--c-primary); margin-right: 3px; }
.sb[data-variant="stacked"] .sbs-title { font-family: var(--font-sans); font-weight: 700; font-size: 12.5px; line-height: 1.35; color: var(--c-text); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; transition: color .15s; }
.sb[data-variant="stacked"] .sbs-snip { font-size: 11.5px; color: var(--c-muted); line-height: 1.4; margin-top: 2px; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; }
/* ui-squared: köşeleri kare yap (avatar yuvarlak kalır) */
body.ui-squared .sb[data-variant="stacked"] .widget,
body.ui-squared .sb[data-variant="stacked"] .sbs-row { border-radius: var(--ui-radius, 4px); }
body.ui-squared .sb[data-variant="stacked"] .sbs-ava { border-radius: 50% !important; }
/* mobil: dikey şerit normal yatay üst bara döner */
@media (max-width: 880px) {
  .sb[data-variant="stacked"] .widget { display: block; }
  .sb[data-variant="stacked"] .widget__head {
    writing-mode: horizontal-tb; transform: none;
    width: auto; min-width: 0; flex: none;
    padding: 10px 14px; justify-content: flex-start;
    font-size: 11.5px;
  }
}
@media (max-width: 640px) {
  .sb[data-variant="stacked"] .widget__body { padding: 6px; }
  .sb[data-variant="stacked"] .sbs-row { padding: 7px 6px; }
  .sb[data-variant="stacked"] .sbs-snip { -webkit-line-clamp: 2; }
}

/* ════ YENİ VARYANT: footer / glow ════ */
/* ============================================================
   FOOTER — varyant: glow (.fgl-*)
   Koyu parlamalı footer: üstte 2px akan gradient çizgi,
   4 kolon (Site / Kategoriler / Yasal / Sosyal), glow vurgular
   ============================================================ */
.ftr[data-variant="glow"] { position: relative; margin-top: 28px; background: color-mix(in srgb, var(--c-text) 94%, #000); color: color-mix(in srgb, var(--c-bg) 74%, var(--c-text)); overflow: hidden; }
.ftr[data-variant="glow"] a { color: color-mix(in srgb, var(--c-bg) 70%, var(--c-text)); transition: color .15s, text-shadow .15s; }
.ftr[data-variant="glow"] a:hover { color: var(--c-bg); text-shadow: 0 0 10px color-mix(in srgb, var(--c-primary) 60%, transparent); }
.ftr[data-variant="glow"] .fgl-main, .ftr[data-variant="glow"] .fgl-copy { position: relative; z-index: 1; }

/* üstte 2px akan gradient çizgi (simetrik gradient + background-position kaydırma) */
.ftr[data-variant="glow"]::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 2px; z-index: 2; background: linear-gradient(90deg, var(--c-grad-1), var(--c-grad-2), var(--c-grad-1)); background-size: 200% 100%; animation: fgl-flow 7s linear infinite; }
@keyframes fgl-flow { from { background-position: 0% 0; } to { background-position: 200% 0; } }
@media (prefers-reduced-motion: reduce) { .ftr[data-variant="glow"]::before { animation: none; } }

/* arka plan ambiyans parlamaları */
.ftr[data-variant="glow"]::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(560px 240px at 12% -10%, color-mix(in srgb, var(--c-grad-1) 15%, transparent), transparent 70%), radial-gradient(560px 240px at 88% 110%, color-mix(in srgb, var(--c-grad-2) 12%, transparent), transparent 70%); }

/* marka satırı */
.ftr[data-variant="glow"] .fgl-brand { display: flex; align-items: center; gap: 26px; padding: 38px 0 24px; border-bottom: 1px solid rgba(255,255,255,.08); flex-wrap: wrap; }
.ftr[data-variant="glow"] .fgl-logo { margin: 0; }
.ftr[data-variant="glow"] .fgl-logo img { height: 44px; width: auto; margin: 0; filter: drop-shadow(0 0 14px color-mix(in srgb, var(--c-primary) 40%, transparent)); }
.ftr[data-variant="glow"] .fgl-about { margin: 0; font-size: 13px; line-height: 1.7; max-width: 560px; color: color-mix(in srgb, var(--c-bg) 58%, var(--c-text)); }

/* 4 kolon */
.ftr[data-variant="glow"] .fgl-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 30px; padding: 30px 0 42px; }
.ftr[data-variant="glow"] .fgl-col h5 { font-family: var(--font-display); font-size: 13.5px; text-transform: uppercase; letter-spacing: .1em; color: var(--c-bg); margin: 0 0 14px; padding-bottom: 10px; position: relative; border-bottom: 1px solid rgba(255,255,255,.1); text-shadow: 0 0 14px color-mix(in srgb, var(--c-primary) 55%, transparent); }
.ftr[data-variant="glow"] .fgl-col h5::after { content: ""; position: absolute; left: 0; bottom: -1px; width: 34px; height: 2px; background: var(--c-grad); border-radius: 2px; box-shadow: 0 0 8px color-mix(in srgb, var(--c-primary) 60%, transparent); }
.ftr[data-variant="glow"] .fgl-col ul { list-style: none; padding: 0; margin: 0; }
.ftr[data-variant="glow"] .fgl-col li { padding: 5px 0; font-size: 13px; }

/* menü işaretleri (icon | dot) */
.ftr[data-variant="glow"] .fgl-mk { display: inline-block; width: 18px; margin-right: 7px; text-align: center; color: var(--c-primary); font-size: 11px; text-shadow: 0 0 8px color-mix(in srgb, var(--c-primary) 55%, transparent); }
.ftr[data-variant="glow"] .fgl-mk--dot { width: 6px; height: 6px; border-radius: 50%; background: var(--c-primary); vertical-align: middle; margin-right: 10px; box-shadow: 0 0 8px color-mix(in srgb, var(--c-primary) 70%, transparent); }

/* sosyal ikonlar: 38px yuvarlak çerçeve, hover'da gradient dolgu */
.ftr[data-variant="glow"] .fgl-social { display: flex; gap: 9px; flex-wrap: wrap; margin: 2px 0 0; }
.ftr[data-variant="glow"] .fgl-social li { padding: 0; }
.ftr[data-variant="glow"] .fgl-social a { width: 38px; height: 38px; display: grid; place-items: center; border: 1px solid rgba(255,255,255,.22); border-radius: 50%; background: rgba(255,255,255,.04); color: color-mix(in srgb, var(--c-bg) 80%, var(--c-text)); font-size: 15px; transition: background .15s, color .15s, border-color .15s, transform .15s, box-shadow .15s; }
.ftr[data-variant="glow"] .fgl-social a:hover { background: var(--c-grad); border-color: transparent; color: var(--c-on-primary); transform: translateY(-2px); box-shadow: 0 0 16px color-mix(in srgb, var(--c-primary) 55%, transparent); text-shadow: none; }

/* sosyal kolonundaki iletişim listesi */
.ftr[data-variant="glow"] .fgl-contact { margin-top: 16px; display: grid; gap: 9px; }
.ftr[data-variant="glow"] .fgl-contact li { font-size: 12.5px; display: flex; align-items: flex-start; gap: 10px; line-height: 1.5; color: color-mix(in srgb, var(--c-bg) 60%, var(--c-text)); }
.ftr[data-variant="glow"] .fgl-contact li i { color: var(--c-primary); width: 16px; text-align: center; margin-top: 2px; flex: none; text-shadow: 0 0 8px color-mix(in srgb, var(--c-primary) 50%, transparent); }

/* alt telif barı */
.ftr[data-variant="glow"] .fgl-copy { border-top: 1px solid rgba(255,255,255,.08); background: rgba(0,0,0,.28); }
.ftr[data-variant="glow"] .fgl-copy__in { display: flex; flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 20px; padding: 16px var(--gutter, 28px); font-size: 12.5px; color: color-mix(in srgb, var(--c-bg) 55%, var(--c-text)); min-width: 0; }
.ftr[data-variant="glow"] .fgl-copy__in strong { color: var(--c-bg); }
.ftr[data-variant="glow"] .fgl-copy__links { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 0; }
.ftr[data-variant="glow"] .fgl-copy__links a:not(:first-child)::before { content: "|"; padding: 0 12px; font-weight: 400; color: rgba(255,255,255,.22); }

/* mobil duyarlılık */
@media (max-width: 880px) {
  .ftr[data-variant="glow"] .fgl-grid { grid-template-columns: 1fr 1fr; gap: 24px; }
  .ftr[data-variant="glow"] .fgl-brand { gap: 16px; }
}
@media (max-width: 640px) {
  .ftr[data-variant="glow"] .fgl-grid { grid-template-columns: 1fr 1fr; gap: 16px 18px; }
  .ftr[data-variant="glow"] .fgl-col h5 { font-size: 12.5px; }
  .ftr[data-variant="glow"] .fgl-col li { font-size: 12.5px; }
  .ftr[data-variant="glow"] .fgl-brand { flex-direction: column; align-items: flex-start; padding: 30px 0 20px; }
  .ftr[data-variant="glow"] .fgl-copy__in { flex-direction: column; align-items: center; justify-content: center; text-align: center; }
}

/* ui-squared: köşeleri düzleştir */
body.ui-squared .ftr[data-variant="glow"] .fgl-social a { border-radius: var(--ui-radius, 4px); }
body.ui-squared .ftr[data-variant="glow"] .fgl-mk--dot { border-radius: 2px; }
body.ui-squared .ftr[data-variant="glow"] .fgl-col h5::after { border-radius: 0; }

/* ════ YENİ VARYANT: footer / compactgrid ════ */
/* ============================================================
   FOOTER VARYANT: compactgrid — minimum yükseklikli sade grid
   Tek sıra 4 kolon (marka / hızlı menü / yasal / sosyal+iletişim),
   12.5px yazı, 28px dikey padding, altta tek satır telif barı.
   ============================================================ */
.ftr[data-variant="compactgrid"] { margin-top: 28px; background: var(--c-surface); border-top: 1px solid color-mix(in srgb, var(--c-text) 12%, transparent); }
.ftr[data-variant="compactgrid"] a { color: var(--c-muted); transition: color .15s; }
.ftr[data-variant="compactgrid"] a:hover { color: var(--c-primary); }

/* tek sıra grid — dar dikey padding */
.ftr[data-variant="compactgrid"] .fcg-grid { display: grid; grid-template-columns: 1.5fr 1fr 1.1fr 1.1fr; gap: 28px; padding: 28px 0; }

/* kolon 1: logo + slogan */
.ftr[data-variant="compactgrid"] .fcg-logo img { height: 32px; width: auto; display: block; margin-bottom: 10px; }
.ftr[data-variant="compactgrid"] .fcg-slogan { margin: 0; font-size: 12.5px; line-height: 1.6; color: var(--c-muted); max-width: 300px; }

/* kolon başlıkları — dekorsuz, küçük */
.ftr[data-variant="compactgrid"] .fcg-col h5 { font-family: var(--font-display); font-size: 12px; text-transform: uppercase; letter-spacing: .08em; color: var(--c-text); margin: 0 0 8px; }
.ftr[data-variant="compactgrid"] .fcg-col ul { list-style: none; padding: 0; margin: 0; }
.ftr[data-variant="compactgrid"] .fcg-col li { padding: 2px 0; font-size: 12.5px; line-height: 1.55; }

/* sosyal — küçük kutucuklar */
.ftr[data-variant="compactgrid"] .fcg-social { display: flex; gap: 6px; flex-wrap: wrap; margin: 0 0 10px; }
.ftr[data-variant="compactgrid"] .fcg-social li { padding: 0; }
.ftr[data-variant="compactgrid"] .fcg-social a { width: 28px; height: 28px; display: grid; place-items: center; font-size: 12.5px; background: color-mix(in srgb, var(--c-text) 7%, transparent); color: var(--c-text); border-radius: 6px; }
.ftr[data-variant="compactgrid"] .fcg-social a:hover { background: var(--c-primary); color: var(--c-on-primary); }

/* iletişim satırları */
.ftr[data-variant="compactgrid"] .fcg-contact { display: grid; gap: 3px; }

/* alt telif barı — tek satır + ayraçlı linkler */
.ftr[data-variant="compactgrid"] .fcg-bottom { border-top: 1px solid color-mix(in srgb, var(--c-text) 10%, transparent); background: color-mix(in srgb, var(--c-text) 3%, var(--c-surface)); }
.ftr[data-variant="compactgrid"] .fcg-bottom__in { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 18px; padding-top: 10px; padding-bottom: 10px; font-size: 12px; color: var(--c-muted); min-width: 0; }
.ftr[data-variant="compactgrid"] .fcg-bottom__in strong { color: var(--c-text); }
.ftr[data-variant="compactgrid"] .fcg-bottom__links { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 0; }
.ftr[data-variant="compactgrid"] .fcg-bottom__links a:not(:first-child)::before { content: "|"; padding: 0 10px; color: color-mix(in srgb, var(--c-text) 28%, transparent); }

/* mobil: 880px — 2 kolon, marka tam satır */
@media (max-width: 880px) {
  .ftr[data-variant="compactgrid"] .fcg-grid { grid-template-columns: 1fr 1fr; gap: 22px; padding: 24px 0; }
  .ftr[data-variant="compactgrid"] .fcg-brand { grid-column: 1 / -1; }
}

/* mobil: 640px — tek kolon, telif ortalanır */
@media (max-width: 640px) {
  .ftr[data-variant="compactgrid"] .fcg-grid { grid-template-columns: 1fr; gap: 18px; }
  .ftr[data-variant="compactgrid"] .fcg-bottom__in { flex-direction: column; justify-content: center; text-align: center; }
}

/* köşeli arayüz modu */
body.ui-squared .ftr[data-variant="compactgrid"] .fcg-social a { border-radius: var(--ui-radius, 4px); }

/* ════ YENİ VARYANT: footer / wave ════ */
/* ============================================================
   FOOTER — "wave" varyantı (.fwv-*)
   Üstte SVG dalga ayırıcı (2 tepe), ortalanmış logo + menü + sosyal + telif
   ============================================================ */
.ftr[data-variant="wave"] { margin-top: 48px; background: transparent; border-top: 0; }

/* Dalga ayırıcı — fill yüzey rengi, önceki içerikten yumuşak geçiş */
.ftr[data-variant="wave"] .fwv-wave svg { display: block; width: 100%; height: 72px; }
.ftr[data-variant="wave"] .fwv-wave path { fill: var(--c-surface); }

/* Footer gövdesi — yüzey zemini, ortalanmış sütun düzeni */
.ftr[data-variant="wave"] .fwv-body { background: var(--c-surface); }
.ftr[data-variant="wave"] .fwv-in { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 22px; padding: 18px var(--gutter, 28px) 30px; }

/* Logo */
.ftr[data-variant="wave"] .fwv-logo { margin: 0; }
.ftr[data-variant="wave"] .fwv-logo img { height: 46px; width: auto; margin: 0; display: block; }

/* Yatay menü */
.ftr[data-variant="wave"] .fwv-menu { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 26px; }
.ftr[data-variant="wave"] .fwv-menu a { font-family: var(--font-display); font-size: 13px; text-transform: uppercase; letter-spacing: .08em; color: color-mix(in srgb, var(--c-text) 78%, transparent); transition: color .15s; }
.ftr[data-variant="wave"] .fwv-menu a:hover { color: var(--c-primary); }

/* Sosyal ikonlar — yuvarlak rozetler */
.ftr[data-variant="wave"] .fwv-social { list-style: none; padding: 0; margin: 0; display: flex; justify-content: center; gap: 10px; flex-wrap: wrap; }
.ftr[data-variant="wave"] .fwv-social a { width: 40px; height: 40px; display: grid; place-items: center; border-radius: 50%; background: color-mix(in srgb, var(--c-text) 7%, transparent); color: var(--c-text); font-size: 16px; transition: background .15s, color .15s, transform .15s; }
.ftr[data-variant="wave"] .fwv-social a:hover { background: var(--c-primary); color: var(--c-on-primary, #fff); transform: translateY(-3px); }

/* Telif satırı */
.ftr[data-variant="wave"] .fwv-copy { width: 100%; border-top: 1px solid color-mix(in srgb, var(--c-text) 10%, transparent); padding-top: 16px; display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 6px 18px; font-size: 12.5px; color: var(--c-muted); }
.ftr[data-variant="wave"] .fwv-copy strong { color: var(--c-text); }
.ftr[data-variant="wave"] .fwv-copy__links { display: flex; flex-wrap: wrap; align-items: center; }
.ftr[data-variant="wave"] .fwv-copy__links a { color: var(--c-muted); transition: color .15s; }
.ftr[data-variant="wave"] .fwv-copy__links a:hover { color: var(--c-primary); }
.ftr[data-variant="wave"] .fwv-copy__links a:not(:first-child)::before { content: "|"; padding: 0 10px; color: color-mix(in srgb, var(--c-text) 30%, transparent); }

/* ui-squared: yuvarlak sosyal rozetler köşeli moda uyar */
body.ui-squared .ftr[data-variant="wave"] .fwv-social a { border-radius: var(--ui-radius, 4px); }

/* Mobil */
@media (max-width: 880px) {
  .ftr[data-variant="wave"] { margin-top: 36px; }
  .ftr[data-variant="wave"] .fwv-wave svg { height: 54px; }
  .ftr[data-variant="wave"] .fwv-in { gap: 18px; padding-bottom: 26px; }
  .ftr[data-variant="wave"] .fwv-menu { gap: 6px 18px; }
}
@media (max-width: 640px) {
  .ftr[data-variant="wave"] .fwv-wave svg { height: 38px; }
  .ftr[data-variant="wave"] .fwv-logo img { height: 38px; }
  .ftr[data-variant="wave"] .fwv-menu a { font-size: 12px; }
  .ftr[data-variant="wave"] .fwv-social a { width: 36px; height: 36px; font-size: 14.5px; }
  .ftr[data-variant="wave"] .fwv-copy { flex-direction: column; gap: 8px; }
}

/* ════ YENİ VARYANT: hero / pulse ════ */
/* -- pulse — ortalanmış hero, merkezden nefes alan radial ışık -- */
.hero[data-variant="pulse"] { padding: 90px 0 100px; }
/* nefes alan radial arka plan — palet birincil renginden %14 karışım */
.hero[data-variant="pulse"] .hpu-bg {
  position: absolute; inset: -25%;
  background: radial-gradient(circle at 50% 42%, color-mix(in srgb, var(--c-primary) 14%, transparent), transparent 62%);
  animation: hpu-breathe 6s ease-in-out infinite alternate;
  pointer-events: none; z-index: 0;
}
@keyframes hpu-breathe {
  from { transform: scale(.92); opacity: .55; }
  to   { transform: scale(1.08); opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .hero[data-variant="pulse"] .hpu-bg { animation: none; }
}
/* içerik — tamamı ortalanmış */
.hero[data-variant="pulse"] .hpu-content { position: relative; z-index: 2; text-align: center; }
/* eyebrow — ortalı simetri için iki yana çizgi */
.hero[data-variant="pulse"] .hpu-eyebrow { justify-content: center; }
.hero[data-variant="pulse"] .hpu-eyebrow::after { content: ''; width: 32px; height: 2px; background: var(--c-primary); }
.hero[data-variant="pulse"] .hpu-title {
  font-size: clamp(2.8rem, 7.5vw, 5.6rem);
  line-height: .98; margin: 18px 0 22px;
}
.hero[data-variant="pulse"] .hpu-lead { margin: 0 auto; }
/* istatistik şeridi — yatay ortalanmış kapsül */
.hero[data-variant="pulse"] .hpu-stats {
  display: inline-flex; justify-content: center; gap: 26px; flex-wrap: wrap;
  margin: 30px auto 0; padding: 13px 26px;
  background: var(--c-surface);
  border: 1px solid color-mix(in srgb, var(--c-text) 14%, transparent);
  border-radius: 999px;
  font-family: var(--font-sans);
  font-size: 11px; font-weight: 700; letter-spacing: .2em; text-transform: uppercase;
  color: var(--c-muted);
}
.hero[data-variant="pulse"] .hpu-stats strong { color: var(--c-text); margin-left: 4px; }
/* form — ortalanmış, dar sütun; iç metinler sola yaslı kalsın */
.hero[data-variant="pulse"] .hpu-form { max-width: 720px; margin: 34px auto 0; text-align: left; }
/* hero rozeti — sağ üst */
.hero[data-variant="pulse"] .hpu-badge { position: absolute; top: 24px; right: 28px; z-index: 3; }
/* köşeli arayüz modu — kapsül yarıçapını tema değişkenine indir */
body.ui-squared .hero[data-variant="pulse"] .hpu-stats { border-radius: var(--ui-radius, 4px); }
/* mobil duyarlılık */
@media (max-width: 880px) {
  .hero[data-variant="pulse"] { padding: 70px 0 80px; }
  .hero[data-variant="pulse"] .hpu-stats { gap: 18px; padding: 12px 20px; }
  .hero[data-variant="pulse"] .hpu-badge { top: 16px; right: 16px; }
}
@media (max-width: 640px) {
  .hero[data-variant="pulse"] { padding: 54px 0 64px; }
  .hero[data-variant="pulse"] .hpu-title { font-size: clamp(2.2rem, 11vw, 3.2rem); }
  .hero[data-variant="pulse"] .hpu-stats { gap: 12px; padding: 10px 16px; font-size: 10px; letter-spacing: .14em; }
  .hero[data-variant="pulse"] .hpu-form { margin-top: 26px; }
  .hero[data-variant="pulse"] .hpu-badge { position: static; display: flex; justify-content: center; margin-bottom: 14px; }
}

/* ════ YENİ VARYANT: hero / gridlines ════ */
/* -- gridlines — ince grid çizgili zemin, solda içerik+form, sağda 2x2 canlı istatistik -- */
.hero[data-variant="gridlines"] { position: relative; padding: 70px 0 90px; }
/* İnce grid çizgileri — iki yönlü repeating-linear-gradient */
.hero[data-variant="gridlines"]::before {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background:
    repeating-linear-gradient(0deg, color-mix(in srgb, var(--c-text) 5%, transparent) 0 1px, transparent 1px 56px),
    repeating-linear-gradient(90deg, color-mix(in srgb, var(--c-text) 5%, transparent) 0 1px, transparent 1px 56px);
}
/* Çizgiler alta doğru yumuşakça kaybolur */
.hero[data-variant="gridlines"]::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, transparent 45%, var(--c-bg) 100%);
}
.hero[data-variant="gridlines"] .hgr-content {
  position: relative; z-index: 1;
  display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
  gap: 56px; align-items: center;
}
/* Rozet — sağ üst köşe */
.hero[data-variant="gridlines"] .hgr-badge { position: absolute; top: 22px; right: 26px; z-index: 2; }
.hero[data-variant="gridlines"] .hgr-title { margin-top: 14px; }
.hero[data-variant="gridlines"] .hgr-form { margin-top: 28px; }
/* 2x2 istatistik kartları */
.hero[data-variant="gridlines"] .hgr-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.hero[data-variant="gridlines"] .hgr-card {
  background: var(--c-surface);
  border: 1px solid color-mix(in srgb, var(--c-text) 12%, transparent);
  border-radius: 14px;
  padding: 26px 22px;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
/* Hover'da hafif yükselme */
.hero[data-variant="gridlines"] .hgr-card:hover {
  transform: translateY(-4px);
  border-color: color-mix(in srgb, var(--c-primary) 55%, transparent);
  box-shadow: 0 14px 30px rgba(0,0,0,.14);
}
.hero[data-variant="gridlines"] .hgr-card__num {
  font-family: var(--font-display); font-weight: 800;
  font-size: clamp(2rem, 3.4vw, 3rem); line-height: 1; letter-spacing: -.02em;
  color: var(--c-text);
}
/* Yıl kartı — degrade vurgulu rakam */
.hero[data-variant="gridlines"] .hgr-card:last-child .hgr-card__num {
  background: var(--c-grad); -webkit-background-clip: text; background-clip: text; color: transparent;
}
.hero[data-variant="gridlines"] .hgr-card__lbl {
  margin-top: 10px;
  font-size: 11px; font-weight: 700; letter-spacing: .2em; text-transform: uppercase;
  color: var(--c-muted);
}
/* Mobil — kartlar altta 2 sütun */
@media (max-width: 880px) {
  .hero[data-variant="gridlines"] { padding: 56px 0 70px; }
  .hero[data-variant="gridlines"] .hgr-content { grid-template-columns: 1fr; gap: 36px; }
  .hero[data-variant="gridlines"] .hgr-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 640px) {
  .hero[data-variant="gridlines"] { padding: 44px 0 56px; }
  .hero[data-variant="gridlines"] .hgr-badge { top: 12px; right: 14px; }
  .hero[data-variant="gridlines"] .hgr-grid { gap: 10px; }
  .hero[data-variant="gridlines"] .hgr-card { padding: 20px 16px; }
  .hero[data-variant="gridlines"] .hgr-card__num { font-size: 1.7rem; }
}
/* Köşeli arayüz modu */
body.ui-squared .hero[data-variant="gridlines"] .hgr-card { border-radius: var(--ui-radius, 4px); }

/* ════ YENİ VARYANT: hero / beam ════ */
/* ============================================================
   HERO — "beam" varyantı
   Diyagonal ışık huzmesi: -20deg eğik parlama bandı 9s'de
   yavaşça soldan sağa süzülür. Sol içerik + sağda büyük rozet.
   ============================================================ */
.hero[data-variant="beam"] { position: relative; padding: 70px 0 90px; overflow: hidden; }

/* Huzme katmanı — içerik altında, tıklamayı engellemez */
.hero[data-variant="beam"] .hbm-beam {
  position: absolute; inset: 0;
  overflow: hidden; pointer-events: none; z-index: 0;
}
/* Eğik parlama bandı — palet birincil rengiyle %18 karışım */
.hero[data-variant="beam"] .hbm-beam::before {
  content: '';
  position: absolute; top: -45%; left: -15%;
  width: 52%; height: 190%;
  background: linear-gradient(90deg,
    transparent 0%,
    color-mix(in srgb, var(--c-primary) 18%, transparent) 42%,
    color-mix(in srgb, var(--c-accent) 10%, transparent) 60%,
    transparent 100%);
  filter: blur(8px);
  transform: translateX(-20%) rotate(-20deg);
  animation: hbm-drift 9s ease-in-out infinite alternate;
}
/* Soldan sağa süzülme (alternate: geri dönüşte sıçrama olmaz) */
@keyframes hbm-drift {
  from { transform: translateX(-20%) rotate(-20deg); }
  to   { transform: translateX(230%) rotate(-20deg); }
}
@media (prefers-reduced-motion: reduce) {
  .hero[data-variant="beam"] .hbm-beam::before { animation: none; transform: translateX(90%) rotate(-20deg); }
}

/* İçerik ızgarası — sol metin/form, sağ rozet */
.hero[data-variant="beam"] .hbm-content {
  position: relative; z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, .9fr);
  gap: 56px; align-items: center;
}
/* Rozet partial'ı yoksa tek kolon (PHP hbm-solo basar) */
.hero[data-variant="beam"] .hbm-content.hbm-solo { grid-template-columns: 1fr; }
.hero[data-variant="beam"] .hbm-content.hbm-solo .hbm-left { max-width: 780px; }

.hero[data-variant="beam"] .hbm-title { margin-top: 14px; }

/* İstatistik şeridi — cosmic ile aynı görünüm, beam kapsamında */
.hero[data-variant="beam"] .meta-strip {
  display: flex; gap: 22px; flex-wrap: wrap;
  padding: 14px 0;
  border-top: 1px solid color-mix(in srgb, var(--c-text) 14%, transparent);
  border-bottom: 1px solid color-mix(in srgb, var(--c-text) 14%, transparent);
  margin: 28px 0 0;
  font-family: var(--font-sans);
  font-size: 11px; font-weight: 700; letter-spacing: .2em; text-transform: uppercase;
  color: var(--c-muted);
}
.hero[data-variant="beam"] .meta-strip strong { color: var(--c-text); }

/* Form paneli — sol kolonda yüzey kutusu, üst kenarda huzme vurgusu */
.hero[data-variant="beam"] .hbm-form {
  position: relative;
  margin-top: 26px;
  background: var(--c-surface);
  border: 1px solid color-mix(in srgb, var(--c-text) 14%, transparent);
  border-radius: 14px;
  padding: 24px;
}
.hero[data-variant="beam"] .hbm-form::before {
  content: '';
  position: absolute; top: -1px; left: 22px; right: 22px; height: 2px;
  background: var(--c-grad, linear-gradient(90deg, var(--c-primary), var(--c-accent)));
}

/* Büyük rozet alanı — guard'lı include; fallback süs YOK */
.hero[data-variant="beam"] .hbm-aside {
  display: flex; align-items: center; justify-content: center;
  min-height: 320px;
}
.hero[data-variant="beam"] .hbm-badge {
  width: 100%; max-width: 400px;
  display: flex; align-items: center; justify-content: center;
  /* Rozet arkasında yumuşak palet parlaması */
  filter: drop-shadow(0 24px 60px color-mix(in srgb, var(--c-primary) 30%, transparent));
}
.hero[data-variant="beam"] .hbm-badge > * { width: 100%; }

/* Köşeli arayüz modu — yarıçap override (theme genel deseni) */
body.ui-squared .hero[data-variant="beam"] .hbm-form,
body.ui-squared .hero[data-variant="beam"] .hbm-badge { border-radius: var(--ui-radius, 4px); }

/* Tablet ve altı — tek kolon, rozet içeriğin altına iner */
@media (max-width: 880px) {
  .hero[data-variant="beam"] { padding: 56px 0 70px; }
  .hero[data-variant="beam"] .hbm-content { grid-template-columns: 1fr; gap: 36px; }
  .hero[data-variant="beam"] .hbm-aside { min-height: 0; }
  .hero[data-variant="beam"] .hbm-badge { max-width: 280px; }
  .hero[data-variant="beam"] .hbm-beam::before { width: 80%; filter: blur(12px); }
}

/* Dar mobil — sıkılaştırılmış boşluklar */
@media (max-width: 640px) {
  .hero[data-variant="beam"] { padding: 44px 0 56px; }
  .hero[data-variant="beam"] .meta-strip { gap: 14px; font-size: 10px; letter-spacing: .14em; }
  .hero[data-variant="beam"] .hbm-form { padding: 16px; margin-top: 20px; }
  .hero[data-variant="beam"] .hbm-badge { max-width: 220px; }
}