/*
Theme Name: SüslüYazı
Version: 1.0.0
Requires at least: 6.0
Requires PHP: 8.1
License: GPLv2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: susluyazi
Tags: one-column, custom-menu, translation-ready
*/

/* 1. Tokens ---------------------------------------------------------------- */
:root {
  --bg: #fdfcff;
  --surface: #ffffff;
  --surface-2: #faf9ff;
  --text: #1e1433;
  --muted: #6f6a86;
  --border: #eceaf6;
  --line: #f1eff9;

  --pink: #f0399b;
  --pink-soft: #fce7f3;
  --purple: #8b5cf6;
  --purple-dark: #7c3aed;
  --purple-soft: #ede9fe;
  --violet-soft: #f3e8ff;
  --green: #22c55e;

  --grad: linear-gradient(90deg, #8b5cf6, #c026d3 55%, #ec4899);
  --grad-cta: linear-gradient(100deg, #ec4899, #c026d3 52%, #8b5cf6);

  --shadow: 0 10px 30px rgba(80, 50, 160, .06);
  --shadow-lg: 0 20px 50px rgba(90, 60, 180, .10);

  --gutter: clamp(15px, 3vw, 32px);
  --maxw: 1240px;
  --r-lg: 20px;
  --r-md: 16px;
  --r-sm: 12px;
}

[data-theme="dark"] {
  --bg: #141024;
  --surface: #1d1830;
  --surface-2: #221c39;
  --text: #f4f1ff;
  --muted: #a49dbd;
  --border: #2e2748;
  --line: #2a2442;
  --pink-soft: #3b1030;
  --purple-soft: #2b2350;
  --violet-soft: #2f2352;
  --shadow: 0 10px 30px rgba(0, 0, 0, .35);
  --shadow-lg: 0 20px 50px rgba(0, 0, 0, .45);
}

/* 2. Base ---------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

html, body {
  margin: 0;
  padding: 0;
  overflow-x: hidden;
}

body {
  background: var(--bg);
  color: var(--text);
  font-family: Poppins, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-size: 14px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

img, svg { display: block; max-width: 100%; }
img { height: auto; }
a { color: var(--purple); text-decoration: none; transition: color .18s ease; }
a:hover { color: #ec4899; }
button, input, textarea, select { font: inherit; color: inherit; }
::placeholder { color: #a9a3bd; }
h1, h2, h3, h4, h5, h6 { margin: 0; text-wrap: pretty; letter-spacing: -.6px; }
p { margin: 0; text-wrap: pretty; }

:focus-visible { outline: 2px solid var(--purple); outline-offset: 2px; border-radius: 6px; }

.sr-only, .screen-reader-text {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%);
  white-space: nowrap; border: 0;
}
.skip-link:focus {
  position: fixed; left: 12px; top: 12px; z-index: 999;
  width: auto; height: auto; clip: auto; clip-path: none;
  padding: 10px 16px; border-radius: 10px;
  background: var(--surface); box-shadow: var(--shadow-lg);
}

.container {
  width: 100%;
  max-width: var(--maxw);
  margin: 0 auto;
  padding-left: var(--gutter);
  padding-right: var(--gutter);
}
.container--narrow { max-width: 820px; }
.section { padding-top: clamp(52px, 7vw, 80px); }
.section--sm { padding-top: clamp(30px, 5vw, 54px); }
.page { position: relative; overflow: hidden; min-height: 100vh; background: var(--bg); }

.ico { width: 16px; height: 16px; flex: none; stroke-width: 1.9; }

/* decorative doodles: hidden on small screens so content keeps its 15px edge */
.deco { position: absolute; pointer-events: none; z-index: 0; }
.float { animation: floaty 7s ease-in-out infinite; }
@keyframes floaty {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-8px); }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .float { animation: none; }
  * { transition-duration: .01ms !important; }
}

/* 3. Buttons ------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  height: 44px;
  padding: 0 24px;
  border: none;
  border-radius: var(--r-sm);
  font-size: 13.5px;
  font-weight: 600;
  cursor: pointer;
  transition: transform .18s ease, filter .18s ease, background .18s ease, border-color .18s ease, color .18s ease;
}
.btn--grad { width: 100%; background: var(--grad); color: #fff; box-shadow: 0 8px 20px rgba(168, 85, 247, .32); }
.btn--grad:hover { filter: brightness(1.06); color: #fff; }
.btn--grad[disabled] { opacity: .65; cursor: default; filter: none; }
.btn--ghost { background: var(--surface); color: var(--purple-dark); border: 1.5px solid #c4b5fd; }
.btn--ghost:hover { background: var(--purple-soft); }
.btn--white { background: #fff; color: #9333ea; box-shadow: 0 10px 24px rgba(0, 0, 0, .12); }
.btn--white:hover { transform: translateY(-1px); color: #7c3aed; }

.icon-btn {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  flex: none;
  border: 1px solid var(--border);
  border-radius: 50%;
  background: var(--surface);
  color: var(--text);
  cursor: pointer;
  box-shadow: var(--shadow);
  transition: border-color .18s ease, color .18s ease;
}
.icon-btn:hover { border-color: #c4b5fd; color: var(--purple); }

.copy-btn {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  flex: none;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface-2);
  color: var(--muted);
  cursor: pointer;
  transition: color .18s ease, border-color .18s ease;
}
.copy-btn:hover { color: var(--purple); border-color: #d8ccfb; }
.copy-btn--bare { border: none; background: none; }

.badge {
  display: inline-block;
  padding: 5px 14px;
  border-radius: 999px;
  background: var(--violet-soft);
  color: #9333ea;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 1px;
}
.badge--violet { background: var(--purple-soft); color: var(--purple-dark); }
.badge--pink { background: var(--pink-soft); color: #db2777; letter-spacing: .6px; }
.badge--plain {
  background: var(--surface-2);
  border: 1px solid var(--border);
  color: var(--muted);
  font-weight: 600;
  letter-spacing: 0;
  padding: 5px 12px;
}

.tag {
  display: inline-block;
  padding: 6px 12px;
  border-radius: 999px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  font-size: 11px;
  font-weight: 600;
  color: var(--muted);
}
a.tag:hover { color: var(--purple); border-color: #d8ccfb; }

/* 4. Header -------------------------------------------------------------- */
.site-header { position: relative; z-index: 30; background: var(--bg); }
.site-header .container {
  display: flex;
  align-items: center;
  gap: clamp(14px, 2.4vw, 40px);
  padding-top: 18px;
  padding-bottom: 18px;
}
.brand { display: flex; align-items: center; gap: 9px; flex: none; color: var(--text); }
.brand:hover { color: var(--text); }
.brand__name { font-size: 19px; font-weight: 700; letter-spacing: -.3px; }

.nav {
  display: flex;
  align-items: center;
  gap: clamp(16px, 2vw, 30px);
  flex: 1 1 260px;
  min-width: 0;
  overflow-x: auto;
  scrollbar-width: none;
  padding: 2px 0;
}
.nav::-webkit-scrollbar { display: none; }
.nav ul { display: flex; align-items: center; gap: clamp(16px, 2vw, 30px); margin: 0; padding: 0; list-style: none; }
.nav li { flex: none; }
.nav__link, .nav a {
  flex: none;
  white-space: nowrap;
  font-size: 13.5px;
  font-weight: 500;
  color: var(--muted);
  padding-bottom: 4px;
  border-bottom: 2px solid transparent;
}
.nav__link:hover, .nav a:hover { color: var(--purple); }
.nav .is-active > a,
.nav .current-menu-item > a,
.nav .current_page_item > a,
.nav .current-menu-ancestor > a,
.nav__link.is-active { color: var(--purple); font-weight: 600; border-bottom-color: var(--purple); }

.header-actions { display: flex; align-items: center; gap: 12px; flex: none; }
.lang-btn {
  display: flex;
  align-items: center;
  gap: 7px;
  height: 38px;
  padding: 0 13px;
  border: 1px solid var(--border);
  border-radius: 11px;
  background: var(--surface);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  box-shadow: var(--shadow);
}
.lang-btn:hover { border-color: #c4b5fd; }

/* 5. Hero ---------------------------------------------------------------- */
.hero { position: relative; padding-top: clamp(26px, 4vw, 44px); }
.hero__grid {
  position: relative;
  z-index: 5;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 392px), 1fr));
  gap: clamp(30px, 4vw, 58px);
  align-items: start;
}
.hero__copy { min-width: 0; padding-top: clamp(6px, 3vw, 52px); }
.hero__title { font-size: clamp(33px, 6.4vw, 54px); line-height: 1.14; font-weight: 700; letter-spacing: -1.6px; }
.hero__title em { font-style: normal; color: var(--pink); }
.hero__title u { text-decoration-thickness: 4px; text-underline-offset: 7px; }
.hero__lead { max-width: 400px; margin-top: 26px; font-size: 15px; line-height: 1.75; color: var(--muted); }

.pill-row { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 26px; }
.pill {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 9px 15px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--surface);
  font-size: 12.5px;
  font-weight: 600;
  box-shadow: var(--shadow);
}

.users { display: flex; align-items: center; gap: 14px; margin-top: 44px; }
.avatars { display: flex; }
.avatar {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: 2.5px solid var(--surface);
}
.avatar + .avatar { margin-left: -11px; }
.avatar:nth-child(1) { background: linear-gradient(160deg, #c4b5fd, #7c6f93); }
.avatar:nth-child(2) { background: linear-gradient(160deg, #fbcfe8, #8d6f7d); }
.avatar:nth-child(3) { background: linear-gradient(160deg, #a5b4fc, #5b6079); }
.avatar:nth-child(4) { background: linear-gradient(160deg, #fde68a, #8a7a4e); }
.users__count { font-size: 13.5px; font-weight: 700; }
.users__note { font-size: 12.5px; color: var(--muted); }

/* 6. Converter card ----------------------------------------------------- */
.tool {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: clamp(16px, 2vw, 22px);
  box-shadow: 0 24px 60px rgba(90, 60, 180, .10);
}
.tool__label { display: flex; align-items: center; gap: 8px; margin-bottom: 14px; font-size: 14px; font-weight: 600; }
.tool__field {
  position: relative;
  border: 1px solid var(--border);
  border-radius: 13px;
  background: var(--surface-2);
  padding: 14px 14px 26px;
  transition: border-color .18s ease;
}
.tool__field:focus-within { border-color: #c4b5fd; }
.tool__field textarea {
  width: 100%;
  border: none;
  outline: none;
  resize: none;
  background: transparent;
  font-size: 14px;
  line-height: 1.6;
}
.tool__counter { position: absolute; right: 13px; bottom: 9px; font-size: 11.5px; color: #a9a3bd; }
.tool__sub { margin: 20px 0 10px; font-size: 13px; font-weight: 600; }
.tool .btn--grad { margin-top: 16px; }

.style-rows { display: flex; flex-direction: column; gap: 8px; }
.style-row {
  display: flex;
  align-items: center;
  gap: 10px;
  border: 1px solid var(--border);
  border-radius: 11px;
  background: var(--surface);
  padding: 10px 12px;
  transition: border-color .18s ease;
}
.style-row:hover { border-color: #d8ccfb; }
.style-row__text {
  flex: 1;
  min-width: 0;
  font-size: 14.5px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.style-row__name { margin-top: 5px; font-size: 10.5px; color: var(--muted); }

/* 7. Features band ------------------------------------------------------ */
.features {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 148px), 1fr));
  gap: 26px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  box-shadow: 0 16px 44px rgba(90, 60, 180, .07);
  padding: clamp(26px, 3vw, 34px) clamp(16px, 2vw, 26px);
}
.feature { display: flex; flex-direction: column; align-items: center; gap: 14px; text-align: center; }
.feature__label { font-size: 12.5px; font-weight: 600; line-height: 1.5; }

/* 8. Section headings --------------------------------------------------- */
.head { text-align: center; }
.head__title {
  position: relative;
  display: inline-block;
  margin-top: 16px;
  font-size: clamp(22px, 3.8vw, 31px);
  font-weight: 700;
  letter-spacing: -.8px;
}
.head__title svg { position: absolute; left: 50%; bottom: -9px; transform: translateX(-50%); }
.head__sub { margin-top: 22px; font-size: 14px; color: var(--muted); }

/* 9. Style cards -------------------------------------------------------- */
.styles-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 270px), 1fr));
  gap: clamp(14px, 1.8vw, 20px);
  margin-top: clamp(28px, 4vw, 42px);
}
.style-card {
  position: relative;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 20px 46px 16px 20px;
  box-shadow: var(--shadow);
  transition: border-color .18s ease;
}
.style-card:hover { border-color: #d8ccfb; }
/* pre, not nowrap: styles like Büyük Harf and Aralıklı carry their spacing as
   part of the string, and HTML would collapse the double space between words —
   showing the visitor something narrower than what lands in their clipboard. */
.style-card__text { font-size: 17px; line-height: 1.3; white-space: pre; overflow: hidden; text-overflow: ellipsis; }
.style-card__name { margin-top: 14px; font-size: 11.5px; color: var(--muted); }
/* The style name and the Turkish note sit on one line: the note is the whole
   reason a Turkish visitor picks one style over another, so it belongs next to
   the name, not hidden behind a hover the phone cannot perform. */
.style-card__name { display: inline; }
.style-card__tr {
  display: inline;
  margin-left: 8px;
  font-size: 11.5px;
  white-space: nowrap;
}
.style-card__tr::before { content: '· '; color: var(--muted); }
.style-card__tr--korunur,
.style-card__tr--tam { color: #15803d; }
.style-card__tr--yamali { color: #b45309; }

/* Beyond the first screenful the cards are folded away rather than left out:
   the markup is complete for crawlers and for visitors without JavaScript, and
   the button below the grid unfolds the rest. */
.style-card--extra { display: none; }
.styles-grid--open .style-card--extra { display: block; }
.style-card .copy-btn { position: absolute; right: 16px; top: 18px; }

.center-row { display: flex; justify-content: center; margin-top: clamp(28px, 4vw, 42px); }

/* 10. How it works ------------------------------------------------------ */
.steps-art {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 18px;
  margin-top: clamp(34px, 4vw, 52px);
}
.blob { display: grid; place-items: center; width: 210px; height: 150px; flex: none; }
.blob--1 { background: #ede9fe; border-radius: 62% 38% 55% 45% / 55% 58% 42% 45%; }
.blob--2 { background: #dbeafe; border-radius: 45% 55% 40% 60% / 58% 42% 58% 42%; }
.blob--3 { background: #dcfce7; border-radius: 52% 48% 62% 38% / 45% 55% 45% 55%; }
.step-arrow { color: var(--text); }

.steps {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr));
  gap: clamp(24px, 3vw, 34px);
  margin-top: clamp(26px, 3vw, 34px);
  align-items: start;
}
.step { max-width: 250px; justify-self: center; }
.step__head { display: flex; align-items: center; gap: 11px; }
.step__num {
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  flex: none;
  border-radius: 50%;
  color: #fff;
  font-size: 12.5px;
  font-weight: 700;
}
.step__num--1 { background: var(--purple-dark); }
.step__num--2 { background: #9333ea; }
.step__num--3 { background: var(--green); }
.step__title { font-size: 16px; font-weight: 700; }
.step__text { margin-top: 12px; font-size: 12.5px; line-height: 1.7; color: var(--muted); }

/* 11. CTA banner -------------------------------------------------------- */
.cta {
  position: relative;
  overflow: hidden;
  border-radius: var(--r-lg);
  background: var(--grad-cta);
  padding: clamp(30px, 4vw, 44px) clamp(18px, 3vw, 40px);
  text-align: center;
  box-shadow: 0 20px 50px rgba(190, 60, 190, .22);
}
.cta__title { font-size: clamp(19px, 3.4vw, 26px); font-weight: 700; color: #fff; letter-spacing: -.5px; }
.cta__text { margin-top: 14px; font-size: 13.5px; color: rgba(255, 255, 255, .9); }
.cta .btn { margin-top: 26px; }
.cta .deco { opacity: .9; z-index: 1; }

/* 12. Footer ------------------------------------------------------------ */
.site-footer {
  position: relative;
  margin-top: clamp(48px, 7vw, 76px);
  border-top: 1px solid var(--border);
  background: var(--surface);
}
.site-footer .container { position: relative; padding-top: 48px; }
.footer-grid {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 190px), 1fr));
  gap: 34px;
}
.footer-col__title { font-size: 14px; font-weight: 700; margin-bottom: 18px; }
.footer-links { display: flex; flex-direction: column; gap: 11px; }
.footer-links ul { display: flex; flex-direction: column; gap: 11px; margin: 0; padding: 0; list-style: none; }
.footer-links a, .footer-text { font-size: 12.5px; color: var(--muted); }
.footer-links a:hover { color: var(--purple); }
.footer-text { margin-top: 18px; max-width: 250px; line-height: 1.8; }
.socials { display: flex; gap: 10px; margin-top: 22px; }
.social { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; }
.social--ig { background: linear-gradient(135deg, #feda75, #d62976 55%, #962fbf); }
.social--dark { background: #161823; }
.social--tw { background: #1d9bf0; }
.footer-bottom {
  position: relative;
  z-index: 2;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 14px;
  margin-top: 44px;
  padding: 20px 0 26px;
  border-top: 1px solid var(--line);
  font-size: 11.5px;
  color: var(--muted);
}

/* 13. Blog list --------------------------------------------------------- */
.page-head { max-width: 640px; margin: 0 auto; text-align: center; }
.page-head__title { margin-top: 16px; font-size: clamp(28px, 5.4vw, 42px); line-height: 1.18; font-weight: 700; letter-spacing: -1.2px; }
.page-head__title em { font-style: normal; color: var(--pink); }
.page-head__sub { margin-top: 18px; font-size: clamp(13px, 1.4vw, 14.5px); line-height: 1.75; color: var(--muted); }

.search { position: relative; max-width: 480px; margin: 28px auto 0; }
.search svg { position: absolute; left: 16px; top: 50%; transform: translateY(-50%); }
.search input {
  width: 100%;
  height: 46px;
  padding: 0 16px 0 42px;
  border: 1px solid var(--border);
  border-radius: 13px;
  background: var(--surface);
  font-size: 13.5px;
  outline: none;
  box-shadow: var(--shadow);
}
.search input:focus { border-color: #c4b5fd; }

.chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 9px; margin-top: 26px; }
.chip {
  padding: 9px 16px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--surface);
  color: var(--muted);
  font-size: 12.5px;
  font-weight: 600;
  cursor: pointer;
  transition: color .18s ease, border-color .18s ease;
}
.chip:hover { color: var(--purple); border-color: #d8ccfb; }
.chip.is-active {
  border-color: transparent;
  background: linear-gradient(90deg, #8b5cf6, #ec4899);
  color: #fff;
  box-shadow: 0 8px 18px rgba(168, 85, 247, .25);
}

.thumb {
  display: grid;
  place-items: center;
  border-radius: var(--r-sm);
  color: rgba(255, 255, 255, .94);
  font-weight: 700;
  line-height: 1;
  overflow: hidden;
}
.thumb img { width: 100%; height: 100%; object-fit: cover; }
.thumb--1 { background: linear-gradient(140deg, #a855f7, #ec4899); }
.thumb--2 { background: linear-gradient(140deg, #f59e0b, #ef4444); }
.thumb--3 { background: linear-gradient(140deg, #0ea5e9, #6366f1); }
.thumb--4 { background: linear-gradient(140deg, #8b5cf6, #22d3ee); }
.thumb--5 { background: linear-gradient(140deg, #ec4899, #f59e0b); }
.thumb--6 { background: linear-gradient(140deg, #10b981, #0ea5e9); }
.thumb--hero { background: linear-gradient(140deg, #8b5cf6, #c026d3 55%, #ec4899); }

/* article cards are links: keep their text in the normal ink colour */
.post-featured, .post-card, .post-tile,
.post-featured:hover, .post-card:hover, .post-tile:hover { color: var(--text); }

.post-featured {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: clamp(16px, 2.4vw, 30px);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: clamp(14px, 1.6vw, 20px);
  box-shadow: 0 18px 44px rgba(90, 60, 180, .09);
  margin-bottom: clamp(20px, 2.6vw, 30px);
  transition: border-color .18s ease;
}
.post-featured:hover { border-color: #d8ccfb; }
.post-featured .thumb {
  position: relative;
  flex: 1 1 260px;
  min-width: min(100%, 260px);
  height: clamp(170px, 22vw, 238px);
  border-radius: var(--r-md);
  font-size: clamp(56px, 9vw, 92px);
}
.post-featured__body { flex: 1 1 300px; min-width: min(100%, 300px); padding: 4px clamp(2px, 1vw, 12px); }
.post-featured__title { margin-top: 16px; font-size: clamp(19px, 2.4vw, 25px); line-height: 1.35; font-weight: 700; }
.post-featured__text { margin-top: 12px; font-size: 13px; line-height: 1.8; color: var(--muted); }

.post-list { display: flex; flex-direction: column; gap: clamp(12px, 1.6vw, 18px); }
.post-card {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: clamp(14px, 2vw, 22px);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: 14px;
  box-shadow: var(--shadow);
  transition: border-color .18s ease, transform .18s ease;
}
.post-card:hover { border-color: #d8ccfb; transform: translateY(-2px); }
.post-card .thumb { flex: 0 1 200px; min-width: min(100%, 200px); height: 150px; font-size: clamp(38px, 5vw, 48px); }
.post-card__body { flex: 1 1 280px; min-width: min(100%, 280px); padding: 2px 4px; }
.post-card__title { margin-top: 12px; font-size: clamp(16px, 1.8vw, 18.5px); line-height: 1.42; font-weight: 700; letter-spacing: -.4px; }
.post-card__text { margin-top: 9px; font-size: 12.5px; line-height: 1.8; color: var(--muted); }
.post-card.is-hidden { display: none; }

.post-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; font-size: 10.5px; color: var(--muted); }
.post-meta--lg { gap: 16px; margin-top: 20px; font-size: 11.5px; }
.post-meta span { display: flex; align-items: center; gap: 6px; }
.read-more { display: flex; align-items: center; gap: 7px; margin-top: 14px; font-size: 12px; font-weight: 600; color: var(--purple); }

.posts-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 270px), 1fr));
  gap: clamp(14px, 1.8vw, 20px);
  margin-top: 24px;
}
.post-tile {
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: 14px;
  box-shadow: var(--shadow);
  transition: border-color .18s ease, transform .18s ease;
}
.post-tile:hover { border-color: #d8ccfb; transform: translateY(-2px); }
.post-tile .thumb { height: 140px; font-size: 42px; }
.post-tile__body { padding: 15px 4px 4px; }
.post-tile__title { margin-top: 12px; font-size: 15.5px; line-height: 1.45; font-weight: 700; letter-spacing: -.3px; }

.empty {
  display: none;
  text-align: center;
  padding: 56px 20px;
  border: 1px dashed var(--border);
  border-radius: var(--r-md);
  background: var(--surface);
}
.empty.is-on, .empty--static { display: block; }
.empty__title { font-size: 15px; font-weight: 600; }
.empty__text { margin-top: 8px; font-size: 12.5px; color: var(--muted); }

.pagination { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 8px; margin-top: clamp(28px, 4vw, 44px); }
.page-btn, .pagination .page-numbers {
  display: grid;
  place-items: center;
  min-width: 38px;
  height: 38px;
  padding: 0 12px;
  border: 1px solid var(--border);
  border-radius: 11px;
  background: var(--surface);
  color: var(--muted);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: color .18s ease, border-color .18s ease;
}
.page-btn:hover, .pagination .page-numbers:hover { color: var(--purple); border-color: #d8ccfb; }
.page-btn.is-active, .pagination .page-numbers.current {
  border-color: transparent;
  background: linear-gradient(90deg, #8b5cf6, #ec4899);
  color: #fff;
}
.pagination .page-numbers.dots { border-color: transparent; background: none; cursor: default; }

/* 14. Article ----------------------------------------------------------- */
.progress { position: fixed; left: 0; top: 0; height: 3px; width: 0; z-index: 80; background: linear-gradient(90deg, #8b5cf6, #ec4899); }
.breadcrumb { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: 11.5px; color: var(--muted); }
.breadcrumb a { color: var(--muted); }
.breadcrumb a:hover { color: var(--purple); }
.breadcrumb strong { color: var(--purple); font-weight: 600; }

.article { padding-top: clamp(24px, 4vw, 44px); }
.article__tags { display: flex; flex-wrap: wrap; gap: 9px; margin-top: 22px; }
.article__title { margin-top: 18px; font-size: clamp(26px, 4.6vw, 38px); line-height: 1.24; font-weight: 700; letter-spacing: -1.1px; }
.article__lead { margin-top: 18px; font-size: clamp(13.5px, 1.5vw, 15.5px); line-height: 1.8; color: var(--muted); }

.byline {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px;
  margin-top: 26px;
  padding: 16px 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  font-size: 11.5px;
  color: var(--muted);
}
.byline span { display: flex; align-items: center; gap: 6px; }
.byline__author { display: flex; align-items: center; gap: 10px; }
.byline__name { font-size: 12.5px; font-weight: 700; color: var(--text); }
.byline__role { font-size: 11px; }

.cover {
  position: relative;
  display: grid;
  place-items: center;
  height: clamp(170px, 26vw, 290px);
  margin-top: clamp(22px, 3vw, 32px);
  border-radius: var(--r-lg);
  overflow: hidden;
  background: linear-gradient(140deg, #8b5cf6, #6366f1 45%, #22d3ee);
  color: rgba(255, 255, 255, .94);
  font-size: clamp(48px, 10vw, 104px);
  font-weight: 700;
  letter-spacing: 2px;
  line-height: 1;
}
.cover img.cover__img { width: 100%; height: 100%; object-fit: cover; }

.toc {
  margin-top: clamp(24px, 3vw, 34px);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: 20px 22px;
  box-shadow: var(--shadow);
}
.toc__title { display: flex; align-items: center; gap: 9px; font-size: 13.5px; font-weight: 700; }
.toc__links { display: flex; flex-direction: column; gap: 10px; margin-top: 14px; }
.toc__links a { font-size: 12.5px; color: var(--muted); }
.toc__links a:hover { color: var(--purple); }

/* content coming from the editor */
.prose h2 {
  margin-top: clamp(32px, 4vw, 44px);
  font-size: clamp(20px, 2.4vw, 25px);
  font-weight: 700;
  scroll-margin-top: 24px;
}
.prose h3 { margin-top: 28px; font-size: clamp(17px, 2vw, 20px); font-weight: 700; scroll-margin-top: 24px; }
.prose h4 { margin-top: 24px; font-size: 16px; font-weight: 700; }
.prose p { margin-top: 14px; font-size: 14px; line-height: 1.9; color: var(--muted); }
.prose strong, .prose b { color: var(--text); }
.prose ul, .prose ol { margin: 14px 0 0; padding-left: 22px; color: var(--muted); font-size: 14px; line-height: 1.9; }
.prose li + li { margin-top: 8px; }
.prose img, .prose figure, .prose iframe, .prose video { margin-top: 20px; border-radius: var(--r-md); max-width: 100%; }
.prose figure { margin-left: 0; margin-right: 0; }
.prose figcaption { margin-top: 8px; font-size: 11.5px; color: var(--muted); text-align: center; }
.prose a { text-decoration: underline; text-underline-offset: 3px; }
.prose code {
  padding: 2px 6px;
  border-radius: 6px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 12.5px;
}
.prose pre {
  margin-top: 18px;
  padding: 16px;
  border-radius: var(--r-sm);
  background: var(--surface-2);
  border: 1px solid var(--border);
  overflow-x: auto;
}
.prose pre code { padding: 0; border: none; background: none; }
.prose table { width: 100%; margin-top: 18px; border-collapse: collapse; font-size: 13px; }
.prose th, .prose td { padding: 10px 12px; border: 1px solid var(--border); text-align: left; }
.prose th { background: var(--surface-2); font-weight: 700; }
.prose hr { margin: 28px 0; border: none; border-top: 1px solid var(--line); }
.prose blockquote, .quote { margin: 20px 0 0; padding: 4px 0 4px 18px; border-left: 3px solid #ec4899; }
.prose blockquote p, .quote p { margin: 0; font-size: 14.5px; line-height: 1.8; font-weight: 500; color: var(--text); }
.prose-table-wrap { overflow-x: auto; }

/* WordPress alignment + caption defaults */
.alignleft { float: left; margin: 6px 20px 12px 0; }
.alignright { float: right; margin: 6px 0 12px 20px; }
.aligncenter { display: block; margin-left: auto; margin-right: auto; }
.alignwide, .alignfull { max-width: 100%; }
.wp-caption { max-width: 100%; }
.wp-caption-text { margin-top: 8px; font-size: 11.5px; color: var(--muted); text-align: center; }
.sticky .post-card { border-color: #d8ccfb; }

.notes { display: flex; flex-direction: column; gap: 10px; margin-top: 18px; }
.note {
  display: flex;
  align-items: flex-start;
  gap: 11px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  padding: 13px 15px;
  font-size: 13px;
  line-height: 1.7;
  color: var(--muted);
}
.note svg { margin-top: 2px; }
.note--ok svg { stroke: var(--green); }
.note--warn svg { stroke: #f59e0b; }
.note--no svg { stroke: #ef4444; }

.tips { display: flex; flex-direction: column; gap: 13px; margin-top: 16px; list-style: none; padding: 0; }
.tips li { display: flex; align-items: flex-start; gap: 12px; font-size: 13.5px; line-height: 1.8; color: var(--muted); }
.tips b {
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  flex: none;
  border-radius: 50%;
  background: var(--purple-soft);
  color: var(--purple-dark);
  font-size: 11px;
}

.article__foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-top: clamp(32px, 4vw, 44px);
  padding-top: 22px;
  border-top: 1px solid var(--line);
}
.share { display: flex; align-items: center; gap: 10px; font-size: 11.5px; color: var(--muted); }
.share a, .share button {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--muted);
  cursor: pointer;
}
.share a { border-color: transparent; }
.share button:hover { color: var(--purple); border-color: #d8ccfb; }

.cta--article { margin-top: clamp(32px, 4vw, 44px); padding: clamp(24px, 3vw, 34px); }
.cta--article .cta__title { font-size: clamp(17px, 2.2vw, 21px); }
.cta--article .cta__text { font-size: 13px; }

.related-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 12px; }
.related-head h2 { font-size: clamp(19px, 2.4vw, 24px); font-weight: 700; }
.related-head a { display: flex; align-items: center; gap: 7px; font-size: 12.5px; font-weight: 600; }

/* 15. Toast ------------------------------------------------------------- */
.toast {
  position: fixed;
  left: 50%;
  bottom: 28px;
  transform: translateX(-50%) translateY(12px);
  z-index: 90;
  padding: 11px 20px;
  border-radius: 999px;
  background: #1e1433;
  color: #fff;
  font-size: 13px;
  font-weight: 600;
  box-shadow: 0 12px 30px rgba(0, 0, 0, .25);
  opacity: 0;
  pointer-events: none;
  transition: opacity .2s ease, transform .2s ease;
}
.toast.is-on { opacity: 1; transform: translateX(-50%) translateY(0); }
[data-theme="dark"] .toast { background: #3b2f63; }

/* 16. Doodle placement -------------------------------------------------- */
.deco--hero-heart   { left: 26px;  top: 22px; }
.deco--hero-crown   { left: 345px; top: 104px; }
.deco--hero-sparkle { left: 392px; top: 222px; }
.deco--hero-star    { right: 24px; top: 150px; }
.deco--hero-star2   { right: 34px; top: 258px; }
.deco--hero-peace   { right: 6px;  top: 440px; }
.deco--hero-diamond { left: -24px; top: 560px; opacity: .85; }
.deco--smiley       { right: 22px; top: 100px; }
.deco--diamond-pink { left: 22px;  top: 26px; opacity: .9; }
.deco--plane        { right: 26px; top: 14px; }
.deco--dots         { right: 34px; top: 290px; }
.deco--footer-heart { right: clamp(15px, 6vw, 76px); top: -46px; }
.deco--cat          { right: clamp(15px, 4vw, 44px); bottom: 26px; opacity: .9; }
.deco--cta-crown    { left: clamp(8px, 3vw, 38px); top: 22px; width: 86px; }
.deco--cta-star     { right: clamp(10px, 9vw, 110px); top: 26px; }
.deco--cta-star2    { right: clamp(6px, 5vw, 56px); top: 78px; width: 34px; }
.deco--blog-sparkle { right: clamp(15px, 8vw, 120px); top: 44px; }
.deco--blog-star    { left: clamp(15px, 5vw, 60px); top: 96px; opacity: .8; }
.deco--cover-1      { left: 18px; bottom: 14px; }
.deco--cover-2      { right: 26px; top: 22px; }

/* 17. Name maker (engine-backed tool) ----------------------------------- */
.mk { margin-top: clamp(26px, 3.5vw, 40px); }
.mk__row { display: flex; flex-wrap: wrap; gap: 10px; }
.mk__row .mk__field { flex: 1 1 180px; min-width: 0; }
.mk__field input, .mk__field select {
  width: 100%;
  height: 46px;
  padding: 0 14px;
  border: 1px solid var(--border);
  border-radius: 13px;
  background: var(--surface-2);
  font-size: 14px;
  outline: none;
  transition: border-color .18s ease;
}
.mk__field input:focus, .mk__field select:focus { border-color: #c4b5fd; }
.mk__pickers { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 130px), 1fr)); gap: 10px; margin-top: 10px; }
.mk .btn--grad { margin-top: 14px; }

.mk__out { margin-top: clamp(24px, 3vw, 34px); }
.mk__sec + .mk__sec { margin-top: clamp(24px, 3vw, 32px); }
.mk__sec-h { display: flex; align-items: center; gap: 9px; font-size: 15px; font-weight: 700; }
.grid-cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 210px), 1fr));
  gap: 10px;
  margin-top: 14px;
}
/* Wider track for nicks whose decoration is the point — the classic block bar
   runs about 33 characters, and at the default width the ellipsis would eat the
   very pattern the visitor came to see. */
.grid-cards--wide { grid-template-columns: repeat(auto-fill, minmax(min(100%, 360px), 1fr)); }
.chip-card {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--surface);
  box-shadow: var(--shadow);
  cursor: pointer;
  text-align: left;
  transition: border-color .18s ease, transform .18s ease;
}
.chip-card:hover { border-color: #d8ccfb; transform: translateY(-1px); }
.chip-card__text { flex: 1; min-width: 0; font-size: 14.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.chip-card__vote {
  display: flex; align-items: center; gap: 5px; flex: none;
  border: none; background: none; color: var(--muted);
  font-size: 11.5px; font-weight: 600; cursor: pointer;
}
.chip-card__vote:hover { color: var(--pink); }
.emoji-grid { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
/* Ô rộng theo nội dung: một emoji ghép (ZWJ, có variation selector) rộng hơn một ô
   vuông 42px cố định và sẽ bị cắt mất đúng thứ khách vào để chép. flex:1 0 auto cho
   các ô chia nhau chỗ trống nên mỗi hàng được lấp đầy thay vì bỏ mép phải lởm chởm. */
.emoji-cell {
  flex: 1 0 auto;
  min-width: 42px; max-width: 76px; height: 42px; padding: 0 6px;
  display: grid; place-items: center;
  border: 1px solid var(--border);
  border-radius: 11px;
  background: var(--surface);
  font-size: 20px;
  cursor: pointer;
  transition: border-color .18s ease, transform .18s ease;
}
.emoji-cell:hover { border-color: #d8ccfb; transform: translateY(-1px); }

.mk__loading { display: flex; align-items: center; justify-content: center; gap: 10px; padding: 26px; color: var(--muted); font-size: 13px; }
.spin { width: 18px; height: 18px; border: 2px solid var(--border); border-top-color: var(--purple); border-radius: 50%; animation: spin .8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .spin { animation-duration: 2s; } }

/* community blocks (contributions + trends) */
.cm-block { margin-top: clamp(26px, 3.5vw, 40px); }
.cm-h { display: flex; align-items: center; gap: 9px; font-size: 15px; font-weight: 700; }
.cm-name { color: var(--pink); }
.cm-form { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 14px; }
.cm-form input {
  flex: 1 1 220px;
  min-width: 0;
  height: 46px;
  padding: 0 14px;
  border: 1px solid var(--border);
  border-radius: 13px;
  background: var(--surface-2);
  font-size: 14px;
  outline: none;
}
.cm-form input:focus { border-color: #c4b5fd; }
.cm-form .btn { flex: none; width: auto; }
.cm-toggle { display: flex; gap: 8px; margin-top: 14px; }
.cm-more { display: flex; justify-content: center; margin-top: 18px; }

/* 18. Comments ---------------------------------------------------------- */
.comments { margin-top: clamp(32px, 4vw, 44px); padding-top: 24px; border-top: 1px solid var(--line); }
.comments__title { font-size: clamp(18px, 2.2vw, 22px); font-weight: 700; }
.comment-list { list-style: none; margin: 20px 0 0; padding: 0; display: flex; flex-direction: column; gap: 14px; }
.comment-list .children { list-style: none; margin: 14px 0 0 clamp(14px, 3vw, 34px); padding: 0; display: flex; flex-direction: column; gap: 14px; }
.comment-body {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: 16px 18px;
  box-shadow: var(--shadow);
}
.comment-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; font-size: 11.5px; color: var(--muted); }
.comment-author-name { font-size: 12.5px; font-weight: 700; color: var(--text); }
.comment-content p { margin-top: 10px; font-size: 13.5px; line-height: 1.8; color: var(--muted); }
.comment-form { margin-top: 22px; display: flex; flex-direction: column; gap: 12px; }
.comment-form label { font-size: 12px; font-weight: 600; }
.comment-form input[type="text"], .comment-form input[type="email"], .comment-form input[type="url"], .comment-form textarea {
  width: 100%;
  padding: 12px 14px;
  border: 1px solid var(--border);
  border-radius: 13px;
  background: var(--surface-2);
  font-size: 13.5px;
  outline: none;
}
.comment-form textarea { min-height: 120px; resize: vertical; }
.comment-form input:focus, .comment-form textarea:focus { border-color: #c4b5fd; }
.comment-form .submit { width: auto; padding: 0 26px; background: var(--grad); color: #fff; height: 44px; border: none; border-radius: var(--r-sm); font-weight: 600; cursor: pointer; }
.comment-form .comment-form-cookies-consent { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--muted); }
.comment-form .comment-form-cookies-consent label { font-weight: 400; }

/* 19. Responsive -------------------------------------------------------- */
@media (max-width: 960px) {
  /* decorative art would collide with content once the gutter shrinks */
  .deco { display: none; }
  .cta .deco { display: block; }
  .hero__lead { max-width: none; }
  .step { max-width: none; }
}

@media (max-width: 720px) {
  /* .nav below wants its own row (flex: 1 1 100%), which only works if the
     header container is allowed to wrap — without this the nav stays inline,
     overflows the right edge and squeezes the brand until it clips. */
  .site-header .container { gap: 12px; flex-wrap: wrap; }
  .nav { order: 3; flex: 1 1 100%; }
  .brand { flex: 1 1 auto; }
  .step-arrow { transform: rotate(90deg); }
  .footer-text { max-width: none; }
  .cta .deco { display: none; }
}

@media (max-width: 480px) {
  .style-card { padding: 18px 44px 14px 16px; }
  .post-card .thumb, .post-featured .thumb { height: 130px; }
  .users { flex-wrap: wrap; }
  .cm-form .btn { width: 100%; }
}

@media print {
  .site-header, .site-footer, .progress, .toast, .pagination, .deco, .mk, .cm-block { display: none !important; }
}

/* symbol library (/semboller) ------------------------------------------------
   Single glyphs reuse .emoji-grid/.emoji-cell above. A combo is several code
   points wide, so a fixed 42px square would clip the very pattern the visitor
   came to copy; this cell grows with its content and stays on the light card. */
.sym-grid { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.sym-cell {
  flex: 1 0 auto;
  min-width: 42px; max-width: 300px; min-height: 42px;
  padding: 7px 13px;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--border);
  border-radius: 11px;
  background: var(--surface);
  font-size: 17px; line-height: 1.5; font-weight: 400;
  cursor: pointer; text-align: center;
  transition: border-color .18s ease, transform .18s ease;
}
.sym-cell:hover { border-color: #d8ccfb; transform: translateY(-1px); }
.prose .emoji-grid, .prose .sym-grid { margin-top: 16px; }
.prose .toc { margin-top: 22px; }
/* "show the rest" fold on the symbol library. Native <details> so it works with
   JS off; the closed state is what keeps the initial layout cheap. */
.sym-more { margin-top: 12px; }
.sym-more > summary {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 9px 16px; border: 1px solid var(--border); border-radius: 999px;
  background: var(--surface); color: var(--purple);
  font-size: 13px; font-weight: 600; cursor: pointer; list-style: none;
}
.sym-more > summary::-webkit-details-marker { display: none; }
.sym-more > summary::after { content: "▾"; font-size: 11px; }
.sym-more[open] > summary::after { content: "▴"; }
.sym-more > summary:hover { border-color: #d8ccfb; }
/* Instagram bio/story preview (/instagram-yazi-tipi). A mock frame, not a
   screenshot: the styled text inside is real copyable text, so it renders with
   the reader's own fonts and shows exactly what they would get. Light surfaces
   only — the site is a light theme and a black gamer card would read as foreign. */
.ig-preview {
  display: grid; gap: 16px; margin-top: 18px;
  grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr);
}
@media (max-width: 620px) { .ig-preview { grid-template-columns: 1fr; } }
.ig-frame { margin: 0; }
.ig-frame__cap {
  margin: 0 0 8px; padding: 0; text-align: left;
  font-size: 11.5px; font-weight: 700; letter-spacing: .4px;
  text-transform: uppercase; color: var(--muted);
}
.ig-card, .ig-story {
  border: 1px solid var(--border); border-radius: var(--r-md);
  background: var(--surface); box-shadow: var(--shadow);
}
.ig-card { padding: 16px 18px 14px; }
.ig-card__top { display: flex; align-items: center; gap: 14px; }
.ig-avatar {
  flex: none; width: 54px; height: 54px; border-radius: 50%;
  background: var(--grad); box-shadow: inset 0 0 0 3px var(--surface);
}
.ig-stats { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: 12px; color: var(--muted); }
.ig-stats b { color: var(--text); font-weight: 700; }
.ig-stats i { width: 1px; height: 12px; background: var(--line); display: inline-block; }
.ig-name { margin-top: 12px; font-size: 15px; font-weight: 600; color: var(--text); }
.ig-handle { font-size: 12.5px; color: var(--muted); }
.ig-bio { margin-top: 8px; display: flex; flex-direction: column; gap: 3px; }
.ig-bio__line { font-size: 13.5px; line-height: 1.65; color: var(--text); font-weight: 400; }
.ig-count {
  margin-top: 12px; display: inline-block;
  padding: 4px 11px; border-radius: 999px;
  background: var(--purple-soft); color: var(--purple-dark);
  font-size: 11.5px; font-weight: 600;
}
.ig-story {
  position: relative; aspect-ratio: 9 / 16; max-height: 340px;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px;
  padding: 18px; overflow: hidden;
  background: linear-gradient(170deg, #fdf4ff, #eef2ff 60%, #fff1f2);
}
.ig-story__ring {
  position: absolute; top: 14px; left: 14px; right: 14px; height: 3px;
  border-radius: 2px; background: var(--grad); opacity: .85;
}
.ig-story__text { font-size: 17px; font-weight: 500; color: #2b1b45; text-align: center; }
.ig-story__sub { font-size: 13px; color: #6b5a8a; }

/* WhatsApp + TikTok preview frames (/whatsapp-tiktok-yazi-tipi). Mock surfaces,
   not screenshots: the styled text inside is real copyable text, so it renders
   with the reader's own fonts and shows exactly what they would get. Built from
   theme tokens only, so the dark toggle carries them without a second palette. */
.sm-preview {
  display: grid; gap: 16px; margin-top: 18px;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
}
.sm-frame { margin: 0; }
.sm-frame__cap {
  margin: 0 0 8px; padding: 0; text-align: left;
  font-size: 11.5px; font-weight: 700; letter-spacing: .4px;
  text-transform: uppercase; color: var(--muted);
}
.wa-chat, .wa-card, .tt-card, .tt-list {
  border: 1px solid var(--border); border-radius: var(--r-md);
  background: var(--surface); box-shadow: var(--shadow);
  padding: 14px 16px;
}
.wa-bar { display: flex; align-items: center; gap: 10px; padding-bottom: 10px; border-bottom: 1px solid var(--line); }
.wa-dot { flex: none; width: 26px; height: 26px; border-radius: 50%; background: var(--grad); }
.wa-bar__name { font-size: 13.5px; font-weight: 600; }
.wa-msg {
  max-width: 86%; margin-top: 10px; padding: 9px 12px;
  border-radius: 14px; font-size: 13.5px; line-height: 1.6;
}
.wa-msg--in { background: var(--surface-2); border: 1px solid var(--line); border-top-left-radius: 5px; }
.wa-msg--out { margin-left: auto; background: var(--purple-soft); color: var(--purple-dark); border-top-right-radius: 5px; }
.wa-msg code { background: transparent; }
.wa-card__top { display: flex; align-items: center; gap: 12px; padding-bottom: 12px; border-bottom: 1px solid var(--line); }
.wa-avatar { flex: none; width: 42px; height: 42px; border-radius: 50%; background: var(--grad); box-shadow: inset 0 0 0 3px var(--surface); }
.wa-card__name { font-size: 14.5px; }
.wa-field { display: flex; gap: 10px; padding: 9px 0; border-bottom: 1px solid var(--line); font-size: 13.5px; }
.wa-field__k { flex: none; width: 74px; color: var(--muted); font-size: 12px; padding-top: 1px; }
.wa-field__v { min-width: 0; word-break: break-word; }
.wa-note { margin-top: 10px; font-size: 12px; color: var(--muted); }
.tt-card { text-align: center; }
.tt-avatar { display: block; width: 60px; height: 60px; margin: 2px auto 10px; border-radius: 50%; background: var(--grad); box-shadow: inset 0 0 0 3px var(--surface); }
.tt-handle { font-size: 13px; color: var(--muted); }
.tt-name { margin-top: 6px; font-size: 16px; }
.tt-bio { margin-top: 10px; font-size: 13.5px; line-height: 1.75; }
.tt-stats { margin-top: 12px; display: flex; justify-content: center; align-items: center; gap: 8px; font-size: 12px; color: var(--muted); }
.tt-stats b { color: var(--text); font-weight: 700; }
.tt-stats i { width: 1px; height: 12px; background: var(--line); display: inline-block; }
.tt-row { display: flex; align-items: center; gap: 10px; padding: 9px 0; border-bottom: 1px solid var(--line); font-size: 13.5px; }
.tt-list .tt-row:last-child { border-bottom: 0; }
.tt-row__v { min-width: 0; flex: 1 1 auto; word-break: break-word; }
.tt-row__n { flex: none; font-size: 11.5px; font-weight: 600; padding: 3px 9px; border-radius: 999px; background: var(--purple-soft); color: var(--purple-dark); }
.tt-row__n--warn { background: #fef3c7; color: #92400e; }
.tt-row__n--over { background: var(--pink-soft); color: #9d174d; }
.fit { font-size: 11.5px; font-weight: 600; padding: 3px 9px; border-radius: 999px; white-space: nowrap; }
.fit--ok { background: #dcfce7; color: #15803d; }
.fit--no { background: var(--pink-soft); color: #9d174d; }
.prose h3 .cnt { margin-left: 8px; font-size: 11.5px; font-weight: 600; color: var(--muted); }