/*
 * DistroVibe Help Center (Cloudflare Worker).
 * Port of the Chatwoot-era theme (~/Desktop/chatwoot-help-center/public/dv-help/theme.css):
 * same tokens and dv- components, plus the layout Chatwoot used to provide.
 */

/* ---------------------------------------------------------------- tokens */
:root {
  --dv-font: "Geist", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --dv-lime: #e5ff00;
  --dv-violet: #7000ff;
  --dv-radius: 16px;
  --dv-ease: cubic-bezier(.2, .8, .2, 1);
}
:root:not(.dark) {
  --slate-1: 255 255 255; --slate-2: 250 250 250; --slate-3: 244 244 245; --slate-4: 236 236 238;
  --slate-5: 228 228 231; --slate-6: 216 216 220; --slate-7: 200 200 205; --slate-8: 170 170 176;
  --slate-9: 140 140 146; --slate-10: 113 113 119; --slate-11: 82 82 88; --slate-12: 10 10 10;
  --border-weak: 234 234 236; --border-strong: 220 220 224;
  --alpha-1: 0, 0, 0, .03; --alpha-2: 0, 0, 0, .05;
  --portal-soft: rgba(112, 0, 255, .08); --portal-faint: rgba(112, 0, 255, .07);
  --dv-accent: var(--dv-violet); --dv-accent-ink: #fff; --dv-accent-hover: #5b00d6;
  --dv-glow: rgba(112, 0, 255, .16);
  --dv-bg: #fff; --dv-card: #fff; --dv-card-hover: #fcfbff;
  --dv-shadow: 0 1px 2px rgba(0, 0, 0, .04), 0 8px 24px -12px rgba(0, 0, 0, .08);
  --dv-shadow-hover: 0 2px 4px rgba(0, 0, 0, .04), 0 18px 40px -18px rgba(112, 0, 255, .35);
  --dv-topbar: rgba(255, 255, 255, .82);
  --dv-link: var(--dv-violet);
  color-scheme: light;
}
:root.dark {
  --slate-1: 5 5 5; --slate-2: 9 9 9; --slate-3: 16 16 16; --slate-4: 22 22 22;
  --slate-5: 29 29 29; --slate-6: 37 37 37; --slate-7: 50 50 50; --slate-8: 68 68 68;
  --slate-9: 92 92 92; --slate-10: 122 122 122; --slate-11: 168 168 168; --slate-12: 245 245 245;
  --border-weak: 28 28 28; --border-strong: 42 42 42;
  --alpha-1: 255, 255, 255, .03; --alpha-2: 255, 255, 255, .07;
  --portal-soft: rgba(229, 255, 0, .10); --portal-faint: rgba(229, 255, 0, .06);
  --dv-accent: var(--dv-lime); --dv-accent-ink: #000; --dv-accent-hover: #d4ed00;
  --dv-glow: rgba(229, 255, 0, .18);
  --dv-bg: #050505; --dv-card: #0b0b0b; --dv-card-hover: #0f0f0d;
  --dv-shadow: 0 1px 0 rgba(255, 255, 255, .03) inset;
  --dv-shadow-hover: 0 0 0 1px rgba(229, 255, 0, .25), 0 18px 48px -20px rgba(229, 255, 0, .28);
  --dv-topbar: rgba(5, 5, 5, .78);
  --dv-link: var(--dv-lime);
  color-scheme: dark;
}

/* ------------------------------------------------------------- base */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 88px; }
body {
  margin: 0; min-height: 100vh; display: flex; flex-direction: column;
  background: var(--dv-bg); color: rgb(var(--slate-11));
  font: 16px/1.6 var(--dv-font); font-feature-settings: "ss01", "cv11";
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
}
a { color: inherit; text-decoration: none; }
img { max-width: 100%; height: auto; }
h1, h2, h3, p { margin: 0; }
::selection { background: var(--dv-accent); color: var(--dv-accent-ink); }
:focus-visible { outline: 2px solid var(--dv-accent); outline-offset: 2px; }
.dv-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.dv-icon { width: 1rem; height: 1rem; flex-shrink: 0; }
.dv-container { width: 100%; max-width: 1536px; margin: 0 auto; padding: 0 1rem; }
@media (min-width: 768px) { .dv-container { padding: 0 1.5rem; } }
main { flex: 1; }

/* ----------------------------------------------------------- buttons */
.dv-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  height: 2.25rem; padding: 0 1.1rem; border-radius: 999px; border: 1px solid transparent;
  background: var(--dv-accent); color: var(--dv-accent-ink);
  font: 900 .72rem var(--dv-font); letter-spacing: .1em; text-transform: uppercase; white-space: nowrap; cursor: pointer;
  transition: background-color .2s var(--dv-ease), box-shadow .2s var(--dv-ease), transform .2s var(--dv-ease);
}
.dv-btn:hover { background: var(--dv-accent-hover); box-shadow: 0 0 24px var(--dv-glow); }
.dv-btn:active { transform: translateY(1px); }
.dv-btn--ghost { background: transparent; color: rgb(var(--slate-12)); border-color: rgb(var(--border-strong)); }
.dv-btn--ghost:hover { background: rgba(var(--alpha-2)); border-color: var(--dv-accent); box-shadow: none; }
.dv-btn--lg { height: 2.9rem; padding: 0 1.5rem; font-size: .78rem; }
:lang(tr) .dv-btn { text-transform: none; letter-spacing: .02em; font-size: .8rem; }

/* ------------------------------------------------------------ topbar */
.dv-topbar {
  position: sticky; top: 0; z-index: 40; width: 100%;
  border-bottom: 1px solid rgb(var(--border-weak));
  background: var(--dv-topbar);
  -webkit-backdrop-filter: blur(16px) saturate(150%); backdrop-filter: blur(16px) saturate(150%);
}
.dv-topbar__row { display: flex; align-items: center; gap: 1rem; height: 4rem; }
.dv-brand { display: flex; flex-shrink: 0; align-items: center; gap: .75rem; }
.dv-logo { display: block; height: 22px; width: auto; }
.dv-logo--on-light { display: none; }
:root:not(.dark) .dv-logo--on-dark { display: none; }
:root:not(.dark) .dv-logo--on-light { display: block; }
.dv-tag {
  display: none; align-items: center; height: 1.4rem; padding: 0 .55rem; border-radius: 999px;
  border: 1px solid rgb(var(--border-strong)); color: rgb(var(--slate-11));
  font-size: .62rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; white-space: nowrap;
}
@media (min-width: 640px) { .dv-tag { display: inline-flex; } }
:lang(tr) .dv-tag { text-transform: none; letter-spacing: .04em; font-size: .7rem; }
.dv-nav { display: none; align-items: center; gap: .25rem; margin-inline-start: 1rem; }
@media (min-width: 768px) { .dv-nav { display: flex; } }
.dv-nav-link {
  display: inline-flex; align-items: center; gap: .25rem; padding: .4rem .75rem; border-radius: 999px;
  color: rgb(var(--slate-11)); font-size: .875rem; font-weight: 500; transition: color .15s, background-color .15s;
}
.dv-nav-link:hover, .dv-nav-link[aria-current="page"] { color: rgb(var(--slate-12)); background: rgba(var(--alpha-2)); }
.dv-topbar__search { display: none; flex: 1; max-width: 28rem; margin: 0 auto; }
@media (min-width: 768px) { .dv-topbar__search { display: block; } }
.dv-topbar__end { margin-inline-start: auto; display: flex; align-items: center; gap: .375rem; }
@media (max-width: 1099px) { .dv-topbar-cta { display: none; } }

/* search */
.dv-search { position: relative; display: flex; align-items: center; }
.dv-search svg { position: absolute; inset-inline-start: .9rem; color: rgb(var(--slate-10)); pointer-events: none; }
.dv-search input {
  width: 100%; height: 2.4rem; padding: 0 1rem 0 2.4rem; border-radius: 999px;
  border: 1px solid rgb(var(--border-strong)); background: var(--dv-card); color: rgb(var(--slate-12));
  font: 400 .875rem var(--dv-font); outline: none; transition: border-color .15s, box-shadow .15s;
}
[dir="rtl"] .dv-search input { padding: 0 2.4rem 0 1rem; }
.dv-search input::placeholder { color: rgb(var(--slate-10)); }
.dv-search input:focus { border-color: var(--dv-accent); box-shadow: 0 0 0 4px var(--portal-soft); }
.dv-search--hero input {
  height: 3.75rem; padding: 0 1.4rem 0 3.2rem; font-size: 1.05rem;
  box-shadow: var(--dv-shadow), 0 20px 60px -30px var(--dv-glow);
}
[dir="rtl"] .dv-search--hero input { padding: 0 3.2rem 0 1.4rem; }
.dv-search--hero svg { inset-inline-start: 1.3rem; color: var(--dv-accent); width: 20px; height: 20px; }

/* menus (language, theme) */
.dv-menu { position: relative; }
.dv-menu > summary {
  list-style: none; display: flex; align-items: center; gap: .5rem; padding: .375rem .625rem; border-radius: 8px;
  color: rgb(var(--slate-11)); cursor: pointer; font-size: .875rem; font-weight: 500; transition: color .15s, background-color .15s;
}
.dv-menu > summary::-webkit-details-marker { display: none; }
.dv-menu > summary:hover, .dv-menu[open] > summary { color: rgb(var(--slate-12)); background: rgba(var(--alpha-2)); }
.dv-menu__panel {
  position: absolute; inset-inline-end: 0; top: calc(100% + .5rem); z-index: 50; min-width: 15rem; max-height: 24rem; overflow-y: auto;
  display: flex; flex-direction: column; gap: 2px; padding: .25rem;
  background: rgb(var(--slate-1)); border: 1px solid rgb(var(--border-weak)); border-radius: 10px;
  box-shadow: 0 12px 32px -12px rgba(0, 0, 0, .35);
}
.dv-menu__label { padding: .5rem .625rem .375rem; font-size: .7rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: rgb(var(--slate-10)); }
.dv-menu__item {
  display: flex; align-items: center; gap: .625rem; padding: .5rem .625rem; border-radius: 6px;
  font-size: .875rem; color: rgb(var(--slate-11)); background: none; border: 0; width: 100%; text-align: start; cursor: pointer; font-family: inherit;
}
.dv-menu__item:hover { background: rgba(var(--alpha-2)); color: rgb(var(--slate-12)); }
.dv-menu__item[aria-current="true"] { background: var(--portal-soft); color: var(--dv-link); font-weight: 500; }
.dv-menu__item span:first-of-type { flex: 1; }
.dv-lang-name { display: none; }
.dv-lang-code { font-size: .75rem; font-weight: 600; text-transform: uppercase; }
@media (min-width: 1024px) { .dv-lang-name { display: inline; } .dv-lang-code { display: none; } }
.dv-flag { width: 20px; height: 15px; flex-shrink: 0; border-radius: 3px; object-fit: cover; box-shadow: 0 0 0 1px rgb(0 0 0 / .12); }
.dark .dv-flag { box-shadow: 0 0 0 1px rgb(255 255 255 / .16); }
.dv-chevron { opacity: .6; transition: transform .2s; }
.dv-menu[open] .dv-chevron { transform: rotate(180deg); }

/* --------------------------------------------------------------- hero */
.dv-hero { position: relative; z-index: 2; border-bottom: 1px solid rgb(var(--border-weak)); background: var(--dv-bg); }
.dv-hero__bg { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.dv-hero__glow {
  position: absolute; inset: -40% -10% auto -10%; height: 120%;
  background: radial-gradient(48% 46% at 18% 30%, var(--dv-glow), transparent 70%),
              radial-gradient(36% 40% at 82% 10%, var(--portal-faint), transparent 70%);
  filter: blur(8px);
}
.dv-hero__grid {
  position: absolute; inset: 0; color: var(--portal-faint);
  background-image: linear-gradient(to right, currentColor 1px, transparent 1px), linear-gradient(to bottom, currentColor 1px, transparent 1px);
  background-size: 56px 56px;
  -webkit-mask-image: radial-gradient(ellipse at 30% 20%, #000 25%, transparent 75%);
  mask-image: radial-gradient(ellipse at 30% 20%, #000 25%, transparent 75%);
}
.dv-hero__inner { position: relative; max-width: 52rem; padding: 4.5rem 1.5rem 4rem; }
@media (min-width: 768px) { .dv-hero__inner { padding: 6rem 2.5rem 5rem; } }
.dv-eyebrow {
  display: inline-flex; align-items: center; gap: .55rem; padding: .35rem .8rem .35rem .6rem; border-radius: 999px;
  border: 1px solid rgb(var(--border-strong)); background: rgba(var(--alpha-1)); color: rgb(var(--slate-11));
  font-size: .68rem; font-weight: 800; letter-spacing: .16em; text-transform: uppercase;
}
.dv-dot { position: relative; width: .45rem; height: .45rem; border-radius: 50%; background: var(--dv-accent); box-shadow: 0 0 12px var(--dv-accent); }
@media (prefers-reduced-motion: no-preference) {
  .dv-dot::after { content: ""; position: absolute; inset: 0; border-radius: 50%; background: var(--dv-accent); animation: dv-ping 2.4s var(--dv-ease) infinite; }
}
@keyframes dv-ping { 0% { transform: scale(1); opacity: .6; } 80%, 100% { transform: scale(3); opacity: 0; } }
.dv-hero__title {
  margin-top: 1.5rem; color: rgb(var(--slate-12)); font-size: clamp(2.6rem, 7vw, 5rem); font-weight: 900;
  line-height: .92; letter-spacing: -.045em; text-transform: uppercase; text-wrap: balance;
}
.dv-hero__title em { display: inline-block; padding-right: .06em; color: var(--dv-accent); font-style: italic; }
.dv-hero__sub { max-width: 34rem; margin-top: 1.25rem; color: rgb(var(--slate-11)); font-size: 1.125rem; line-height: 1.6; text-wrap: pretty; }
.dv-hero__search { position: relative; z-index: 30; max-width: 40rem; margin-top: 2.25rem; }
.dv-topics { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; margin-top: 1.25rem; font-size: .875rem; }
.dv-topics__label { margin-inline-end: .25rem; color: rgb(var(--slate-10)); }
.dv-pill {
  display: inline-flex; align-items: center; gap: .4rem; padding: .35rem .8rem; border-radius: 999px;
  border: 1px solid rgb(var(--border-strong)); background: rgba(var(--alpha-1)); color: rgb(var(--slate-11));
  transition: color .15s, border-color .15s, background-color .15s;
}
.dv-pill:hover { border-color: var(--dv-accent); color: rgb(var(--slate-12)); background: var(--portal-soft); }
:lang(tr) .dv-hero__title, :lang(tr) .dv-eyebrow, :lang(tr) .dv-section__title, :lang(tr) .dv-help__title { text-transform: none; }
:lang(tr) .dv-eyebrow { letter-spacing: .04em; font-size: .75rem; }

/* ------------------------------------------------------------ sections */
.dv-section { padding: 3.5rem 1.5rem 0; }
@media (min-width: 768px) { .dv-section { padding: 4rem 2.5rem 0; } }
.dv-section__head { display: flex; align-items: end; justify-content: space-between; gap: 1rem; margin-bottom: 1.5rem; }
.dv-section__title { color: rgb(var(--slate-12)); font-size: clamp(1.5rem, 3vw, 2rem); font-weight: 900; letter-spacing: -.035em; text-transform: uppercase; line-height: 1; }
.dv-grid { display: grid; gap: 1rem; grid-template-columns: 1fr; }
@media (min-width: 768px) { .dv-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .dv-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* ------------------------------------------------------------ cards */
.dv-card {
  position: relative; display: flex; flex-direction: column; padding: 1.4rem; border-radius: var(--dv-radius);
  border: 1px solid rgb(var(--border-weak)); background: var(--dv-card); box-shadow: var(--dv-shadow);
  transition: transform .25s var(--dv-ease), border-color .25s var(--dv-ease), box-shadow .25s var(--dv-ease), background-color .25s var(--dv-ease);
}
.dv-card:hover { transform: translateY(-2px); border-color: var(--dv-accent); background: var(--dv-card-hover); box-shadow: var(--dv-shadow-hover); }
.dv-card__icon {
  display: flex; align-items: center; justify-content: center; width: 3rem; height: 3rem; border-radius: 14px;
  border: 1px solid rgb(var(--border-weak)); background: rgb(var(--slate-3)); font-size: 1.5rem; line-height: 1;
  transition: background-color .25s var(--dv-ease), border-color .25s var(--dv-ease);
}
.dv-card:hover .dv-card__icon { background: var(--portal-soft); border-color: transparent; }
.dv-card__eyebrow {
  display: inline-flex; align-items: center; gap: .35rem; align-self: flex-start; margin-bottom: .8rem;
  color: rgb(var(--slate-10)); font-size: .68rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
}
.dv-card__title { color: rgb(var(--slate-12)); font-size: 1.05rem; font-weight: 700; line-height: 1.35; letter-spacing: -.015em; }
.dv-card__icon + .dv-card__title { margin-top: 1.1rem; font-size: 1.15rem; }
.dv-card__text {
  margin-top: .45rem; color: rgb(var(--slate-11)); font-size: .875rem; line-height: 1.6;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.dv-card__foot { display: flex; align-items: center; justify-content: space-between; margin-top: auto; padding-top: 1.25rem; gap: .75rem; }
.dv-card__cta {
  display: inline-flex; align-items: center; gap: .35rem; color: rgb(var(--slate-11));
  font-size: .7rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; transition: color .2s;
}
.dv-card__cta svg { transition: transform .2s var(--dv-ease); }
.dv-card:hover .dv-card__cta { color: var(--dv-link); }
.dv-card:hover .dv-card__cta svg { transform: translateX(3px); }
[dir="rtl"] .dv-card__cta svg { transform: scaleX(-1); }
[dir="rtl"] .dv-card:hover .dv-card__cta svg { transform: scaleX(-1) translateX(3px); }
.dv-card__meta { display: inline-flex; align-items: center; gap: .5rem; color: rgb(var(--slate-10)); font-size: .78rem; }
.dv-avatar { display: block; width: 1.5rem; height: 1.5rem; border-radius: 6px; object-fit: cover; }
.dv-avatar--xs { width: 1rem; height: 1rem; border-radius: 4px; }
.dv-avatar--lg { width: 2.5rem; height: 2.5rem; border-radius: 12px; border: 1px solid rgb(var(--border-weak)); }
:lang(tr) .dv-card__cta, :lang(tr) .dv-card__eyebrow { text-transform: none; letter-spacing: .02em; font-size: .75rem; }

/* A lone card on the last grid row spans the row (11 categories in 3 columns). */
@media (min-width: 768px) and (max-width: 1023px) {
  .dv-grid > .dv-card--cat:last-child:nth-child(2n + 1) { grid-column: 1 / -1; display: grid; grid-template-columns: auto 1fr auto; grid-template-rows: auto auto; column-gap: 1.1rem; align-items: center; }
  .dv-grid > .dv-card--cat:last-child:nth-child(2n + 1) .dv-card__icon { grid-row: 1 / 3; }
  .dv-grid > .dv-card--cat:last-child:nth-child(2n + 1) .dv-card__title { margin-top: 0; align-self: end; }
  .dv-grid > .dv-card--cat:last-child:nth-child(2n + 1) .dv-card__foot { grid-column: 3; grid-row: 1 / 3; padding-top: 0; margin-top: 0; }
}
@media (min-width: 1024px) {
  .dv-grid--3 > .dv-card--cat:last-child:nth-child(3n + 1) { grid-column: 1 / -1; display: grid; grid-template-columns: auto 1fr auto; grid-template-rows: auto auto; column-gap: 1.1rem; align-items: center; }
  .dv-grid--3 > .dv-card--cat:last-child:nth-child(3n + 1) .dv-card__icon { grid-row: 1 / 3; }
  .dv-grid--3 > .dv-card--cat:last-child:nth-child(3n + 1) .dv-card__title { margin-top: 0; align-self: end; }
  .dv-grid--3 > .dv-card--cat:last-child:nth-child(3n + 1) .dv-card__foot { grid-column: 3; grid-row: 1 / 3; padding-top: 0; margin-top: 0; }
}

/* ------------------------------------------------- docs layout (category, article) */
.dv-docs { display: grid; gap: 2.5rem; padding-top: 2.5rem; }
@media (min-width: 1024px) { .dv-docs { grid-template-columns: 16rem minmax(0, 1fr); padding-top: 3rem; } }
@media (min-width: 1280px) { .dv-docs--toc { grid-template-columns: 16rem minmax(0, 1fr) 14rem; } }
.dv-sidebar { display: none; }
@media (min-width: 1024px) { .dv-sidebar { display: block; position: sticky; top: 5.5rem; align-self: start; max-height: calc(100vh - 7rem); overflow-y: auto; padding-bottom: 2rem; } }
.dv-sidebar__label { padding: 0 .75rem .5rem; font-size: .7rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: rgb(var(--slate-10)); }
.dv-sidebar details { margin-bottom: 2px; }
.dv-sidebar summary {
  list-style: none; display: flex; align-items: center; gap: .55rem; padding: .45rem .75rem; border-radius: 8px;
  font-size: .875rem; font-weight: 500; color: rgb(var(--slate-11)); cursor: pointer;
}
.dv-sidebar summary::-webkit-details-marker { display: none; }
.dv-sidebar summary:hover { background: rgba(var(--alpha-2)); color: rgb(var(--slate-12)); }
.dv-sidebar details[open] > summary { color: var(--dv-link); font-weight: 700; }
.dv-sidebar summary .dv-chevron { margin-inline-start: auto; }
.dv-sidebar details[open] .dv-chevron { transform: rotate(180deg); }
.dv-sidebar ul { list-style: none; margin: 2px 0 6px; padding: 0 0 0 .9rem; border-inline-start: 1px solid rgb(var(--border-weak)); margin-inline-start: 1.15rem; }
.dv-sidebar li a { display: block; padding: .35rem .7rem; border-radius: 6px; font-size: .84rem; line-height: 1.4; color: rgb(var(--slate-11)); }
.dv-sidebar li a:hover { color: rgb(var(--slate-12)); background: rgba(var(--alpha-2)); }
.dv-sidebar li a[aria-current="page"] { color: var(--dv-link); background: var(--portal-soft); font-weight: 600; }
:root.dark .dv-sidebar li a[aria-current="page"] { box-shadow: inset 2px 0 0 var(--dv-lime); }

.dv-main { min-width: 0; padding: 0 0 1rem; }
.dv-crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; margin-bottom: 1.5rem; font-size: .84rem; color: rgb(var(--slate-10)); }
.dv-crumbs a:hover { color: rgb(var(--slate-12)); }
.dv-page-head { margin-bottom: 2.5rem; padding-bottom: 2rem; border-bottom: 1px solid rgb(var(--border-weak)); }
.dv-page-title { color: rgb(var(--slate-12)); font-size: clamp(1.9rem, 3.4vw, 2.4rem); font-weight: 700; line-height: 1.25; letter-spacing: -.025em; text-wrap: balance; }
.dv-cat-head { display: flex; align-items: center; gap: 1rem; }
.dv-cat-head__icon {
  display: flex; flex-shrink: 0; align-items: center; justify-content: center; width: 3.5rem; height: 3.5rem;
  border-radius: 18px; background: rgb(var(--slate-1)); border: 1px solid rgb(var(--border-weak)); font-size: 1.85rem; box-shadow: var(--dv-shadow);
}
.dv-meta { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; margin-top: .4rem; font-size: .875rem; color: rgb(var(--slate-10)); }
.dv-lead { margin-top: 1.5rem; font-size: 1.125rem; line-height: 1.65; color: rgb(var(--slate-11)); text-wrap: pretty; }
.dv-author { display: flex; align-items: center; gap: .75rem; margin-top: 1.5rem; }
.dv-author strong { display: block; font-size: .875rem; font-weight: 500; color: rgb(var(--slate-12)); }
.dv-author span { font-size: .78rem; color: rgb(var(--slate-11)); }
.dv-note { margin-bottom: 1.5rem; padding: .85rem 1.1rem; border-radius: 12px; border: 1px solid rgb(var(--border-weak)); background: var(--portal-faint); font-size: .9rem; }

/* article content */
.dv-prose { max-width: 46rem; color: rgb(var(--slate-11)); font-size: 1.0625rem; line-height: 1.75; overflow-wrap: anywhere; }
.dv-prose > :first-child { margin-top: 0; }
.dv-prose :is(h1, h2, h3, h4) { color: rgb(var(--slate-12)); font-weight: 800; letter-spacing: -.025em; line-height: 1.3; }
.dv-prose h2 { font-size: 1.55rem; margin: 2.75rem 0 1rem; }
.dv-prose h3 { font-size: 1.2rem; margin: 2rem 0 .75rem; }
.dv-prose p, .dv-prose ul, .dv-prose ol, .dv-prose table, .dv-prose pre, .dv-prose blockquote { margin: 0 0 1.25rem; }
.dv-prose :is(ul, ol) { padding-inline-start: 1.5rem; }
.dv-prose li { margin: .4rem 0; }
.dv-prose :is(ul, ol) > li::marker { color: var(--dv-accent); }
.dv-prose strong { color: rgb(var(--slate-12)); font-weight: 700; }
.dv-prose a {
  color: var(--dv-link); text-decoration: underline; text-decoration-color: var(--portal-soft);
  text-underline-offset: 3px; text-decoration-thickness: 2px;
}
.dv-prose a:hover { text-decoration-color: currentColor; }
.dv-prose blockquote {
  margin-inline: 0; border-inline-start: 3px solid var(--dv-accent); border-radius: 0 12px 12px 0;
  background: var(--portal-faint); padding: .75rem 1.25rem;
}
[dir="rtl"] .dv-prose blockquote { border-radius: 12px 0 0 12px; }
.dv-prose code { padding: .15em .4em; border-radius: 6px; background: rgb(var(--slate-3)); font-size: .9em; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
.dv-prose pre { padding: 1rem 1.25rem; border-radius: 12px; background: rgb(var(--slate-3)); overflow-x: auto; }
.dv-prose pre code { padding: 0; background: none; }
.dv-prose img { border-radius: 14px; border: 1px solid rgb(var(--border-weak)); }
.dv-prose hr { border: 0; border-top: 1px solid rgb(var(--border-weak)); margin: 2.5rem 0; }
.dv-prose table { display: block; width: 100%; overflow-x: auto; border-collapse: collapse; font-size: .95rem; }
.dv-prose :is(th, td) { padding: .65rem .85rem; border: 1px solid rgb(var(--border-weak)); text-align: start; vertical-align: top; }
.dv-prose th { color: rgb(var(--slate-12)); background: rgba(var(--alpha-1)); font-weight: 600; }

/* table of contents */
.dv-toc { display: none; }
@media (min-width: 1280px) { .dv-toc { display: block; position: sticky; top: 5.5rem; align-self: start; max-height: calc(100vh - 7rem); overflow-y: auto; } }
.dv-toc__label { margin-bottom: .75rem; font-size: .75rem; font-weight: 700; color: rgb(var(--slate-12)); }
.dv-toc ul { list-style: none; margin: 0; padding: 0; border-inline-start: 1px solid rgb(var(--border-weak)); }
.dv-toc a { display: block; margin-inline-start: -1px; padding: .3rem .9rem; border-inline-start: 1px solid transparent; font-size: .8rem; line-height: 1.45; color: rgb(var(--slate-11)); transition: color .15s; }
.dv-toc a:hover { color: rgb(var(--slate-12)); }
.dv-toc a.is-active { color: var(--dv-link); border-color: var(--dv-accent); }
.dv-toc .dv-toc--h3 a { padding-inline-start: 1.6rem; }

/* related list on category / search pages */
.dv-list { display: grid; gap: .75rem; }

/* ---------------------------------------------------- help CTA band */
.dv-help {
  position: relative; overflow: hidden; isolation: isolate; margin: 3.5rem 1.5rem 0; padding: 2rem; border-radius: 24px;
  border: 1px solid rgb(var(--border-weak)); background: var(--dv-card);
}
@media (min-width: 768px) { .dv-help { margin: 4rem 2.5rem 0; padding: 2.5rem 2.75rem; } }
.dv-help::before { content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(60% 120% at 100% 0%, var(--dv-glow), transparent 60%); }
.dv-help__row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1.5rem; }
.dv-help__title { color: rgb(var(--slate-12)); font-size: clamp(1.5rem, 3vw, 2rem); font-weight: 900; line-height: 1; letter-spacing: -.035em; text-transform: uppercase; }
.dv-help__title em { color: var(--dv-accent); font-style: italic; }
.dv-help__text { max-width: 30rem; margin-top: .75rem; color: rgb(var(--slate-11)); font-size: .95rem; line-height: 1.6; }
.dv-help__actions { display: flex; flex-wrap: wrap; gap: .6rem; }
.dv-docs-wrap .dv-help { margin-inline: 0; }

/* ----------------------------------------------------------- footer */
.dv-footer { margin-top: 3rem; padding: 3rem 1.5rem 2rem; border-top: 1px solid rgb(var(--border-weak)); }
@media (min-width: 768px) { .dv-footer { padding: 3.5rem 2.5rem 2rem; } }
.dv-footer__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2.25rem 1.5rem; }
@media (min-width: 900px) { .dv-footer__grid { grid-template-columns: 1.6fr repeat(3, minmax(0, 1fr)); } }
.dv-footer__brand { grid-column: 1 / -1; }
@media (min-width: 900px) { .dv-footer__brand { grid-column: auto; padding-inline-end: 2rem; } }
.dv-footer__brand .dv-logo { height: 26px; }
.dv-footer__tagline { max-width: 20rem; margin-top: 1rem; color: rgb(var(--slate-11)); font-size: .875rem; line-height: 1.6; }
.dv-footer__heading { margin-bottom: 1rem; color: rgb(var(--slate-12)); font-size: .7rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; }
:lang(tr) .dv-footer__heading { text-transform: none; letter-spacing: .02em; font-size: .8rem; }
.dv-footer__links { list-style: none; margin: 0; padding: 0; display: grid; gap: .65rem; }
.dv-footer__links a { color: rgb(var(--slate-11)); font-size: .875rem; transition: color .15s; }
.dv-footer__links a:hover { color: var(--dv-link); }
.dv-socials { display: flex; gap: .25rem; margin-top: 1.25rem; margin-inline-start: -.5rem; }
.dv-socials a { display: inline-flex; padding: .5rem; border-radius: 999px; color: rgb(var(--slate-10)); transition: color .15s, background-color .15s; }
.dv-socials a:hover { color: rgb(var(--slate-12)); background: rgba(var(--alpha-2)); }
.dv-socials svg { width: 1.05rem; height: 1.05rem; display: block; }
.dv-footer__bottom {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem; margin-top: 2.75rem; padding-top: 1.5rem;
  border-top: 1px solid rgb(var(--border-weak)); color: rgb(var(--slate-10)); font-size: .75rem;
}
.dv-footer__bottom nav { display: flex; flex-wrap: wrap; gap: 1.25rem; }
.dv-footer__bottom a:hover { color: rgb(var(--slate-12)); }

/* ----------------------------------------------------------- motion */
@media (prefers-reduced-motion: reduce) {
  .dv-card, .dv-card:hover { transform: none; }
  .dv-btn, .dv-card, .dv-card__cta svg { transition: none; }
}
/* Arabic: no uppercase or tracking on display text */
:lang(ar) :is(.dv-hero__title, .dv-help__title, .dv-section__title, .dv-eyebrow, .dv-card__cta, .dv-card__eyebrow, .dv-footer__heading, .dv-tag) { text-transform: none; letter-spacing: 0; }
:lang(tr) .dv-sidebar__label, :lang(tr) .dv-menu__label { text-transform: none; letter-spacing: .02em; font-size: .78rem; }