:root {
      --clr-bg: #f8f7f4;
      --clr-surface: #ffffff;
      --clr-border: #e4e1d9;
      --clr-border-strong: #c8c4ba;
      --clr-text: #1a1916;
      --clr-text-muted: #6b6860;
      --clr-text-hint: #9e9b92;
      --clr-info-bg: #e6f1fb;
      --clr-info-text: #0c447c;
      --clr-info-border: #b5d4f4;
      --clr-warn-bg: #faeeda;
      --clr-warn-text: #854f0b;
      --clr-warn-border: #fac775;
      --clr-ok-bg: #eaf3de;
      --clr-ok-text: #3b6d11;
      --clr-ok-border: #c0dd97;
      --clr-accent: #185fa5;
      --radius-md: 8px;
      --radius-lg: 12px;
      --font-display: 'Lora', Georgia, serif;
      --font-body: 'Source Sans 3', sans-serif;
    }

    body {
      background: var(--clr-bg);
      font-family: var(--font-body);
      color: var(--clr-text);
      font-size: 16px;
      line-height: 1.75;
    }



    /* META */
    .meta-row {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      gap: 8px;
      margin-bottom: 1.75rem;
    }
    .tag-pill {
      background: var(--clr-surface);
      border: 1px solid var(--clr-border);
      border-radius: 999px;
      font-size: 12px;
      padding: 3px 12px;
      color: var(--clr-text-muted);
      font-family: var(--font-body);
    }
    .date-label {
      font-size: 13px;
      color: var(--clr-text-hint);
    }

    /* HEADINGS */
    h1.article-title {
      font-family: var(--font-display);
      font-size: clamp(22px, 4vw, 30px);
      font-weight: 600;
      line-height: 1.3;
      color: var(--clr-text);
      margin-bottom: 1.25rem;
    }
    h2.section-heading {
      font-family: var(--font-display);
      font-size: clamp(17px, 3vw, 21px);
      font-weight: 500;
      color: var(--clr-text);
      margin-top: 2.25rem;
      margin-bottom: 0.75rem;
    }
    h3.sub-heading {
      font-family: var(--font-body);
      font-size: 16px;
      font-weight: 600;
      color: var(--clr-text);
      margin-top: 1.5rem;
      margin-bottom: 0.5rem;
    }

    /* LEAD */
    .lead-quote {
      font-size: 16px;
      line-height: 1.8;
      color: var(--clr-text-muted);
      border-left: 3px solid var(--clr-border-strong);
      padding-left: 1rem;
      margin-bottom: 2rem;
    }

    /* DIVIDER */
    .article-divider {
      border: none;
      border-top: 1px solid var(--clr-border);
      margin: 2rem 0;
    }

    /* BODY TEXT */
    .article-wrapper p {
      font-size: 15px;
      line-height: 1.85;
      color: var(--clr-text);
      margin-bottom: 1rem;
    }

    /* INFO BOX */
    .info-box {
      background: #f3f2ee;
      border: 1px solid var(--clr-border);
      border-radius: var(--radius-lg);
      padding: 1.25rem 1.5rem;
      margin: 1.5rem 0;
    }
    .info-box .box-label {
      font-size: 11px;
      text-transform: uppercase;
      letter-spacing: 0.08em;
      font-weight: 600;
      color: var(--clr-text-hint);
      margin-bottom: 0.5rem;
    }
    .info-box p {
      font-size: 14px;
      margin: 0;
      line-height: 1.7;
    }

    /* CARDS */
    .card-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
      gap: 12px;
      margin: 1.5rem 0;
    }
    .art-card {
      background: var(--clr-surface);
      border: 1px solid var(--clr-border);
      border-radius: var(--radius-lg);
      padding: 1rem 1.25rem;
    }
    .art-card .card-icon {
      font-size: 22px;
      color: var(--clr-accent);
      margin-bottom: 8px;
    }
    .art-card .card-title {
      font-size: 14px;
      font-weight: 600;
      color: var(--clr-text);
      margin-bottom: 4px;
    }
    .art-card .card-body-text {
      font-size: 13px;
      line-height: 1.65;
      color: var(--clr-text-muted);
    }

    /* BADGES */
    .badge-custom {
      display: inline-block;
      font-size: 11px;
      padding: 3px 10px;
      border-radius: 999px;
      margin-right: 4px;
      margin-bottom: 6px;
      font-weight: 500;
    }
    .badge-info  { background: var(--clr-info-bg);  color: var(--clr-info-text);  border: 1px solid var(--clr-info-border); }
    .badge-warn  { background: var(--clr-warn-bg);  color: var(--clr-warn-text);  border: 1px solid var(--clr-warn-border); }
    .badge-ok    { background: var(--clr-ok-bg);    color: var(--clr-ok-text);    border: 1px solid var(--clr-ok-border); }

    /* STEP LIST */
    .step-list {
      list-style: none;
      padding: 0;
      margin: 1rem 0 1.5rem;
    }
    .step-list li {
      display: flex;
      gap: 12px;
      margin-bottom: 0.75rem;
      font-size: 14px;
      line-height: 1.65;
      color: var(--clr-text);
      align-items: flex-start;
    }
    .step-num {
      flex-shrink: 0;
      width: 22px;
      height: 22px;
      border-radius: 50%;
      border: 1px solid var(--clr-border-strong);
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 11px;
      font-weight: 600;
      color: var(--clr-text-muted);
      margin-top: 1px;
    }

    /* COMPARISON */
    .comparison-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
      gap: 12px;
      margin: 1.5rem 0;
    }
    .comp-card {
      border-radius: var(--radius-lg);
      padding: 1.25rem;
      border: 1px solid var(--clr-border);
    }
    .comp-kamu { background: var(--clr-info-bg); }
    .comp-ozel { background: #f3f2ee; }
    .comp-label {
      font-size: 11px;
      text-transform: uppercase;
      letter-spacing: 0.07em;
      font-weight: 600;
      margin-bottom: 12px;
    }
    .comp-kamu .comp-label { color: var(--clr-info-text); }
    .comp-ozel .comp-label { color: var(--clr-text-muted); }
    .comp-item {
      font-size: 13px;
      line-height: 1.65;
      color: var(--clr-text);
      margin-bottom: 8px;
      padding-left: 12px;
      border-left: 2px solid var(--clr-border-strong);
    }

    /* HIGHLIGHT ROWS */
    .highlight-row {
      background: var(--clr-surface);
      border: 1px solid var(--clr-border);
      border-radius: var(--radius-md);
      padding: 0.85rem 1.25rem;
      margin: 8px 0;
      display: flex;
      justify-content: space-between;
      align-items: center;
      flex-wrap: wrap;
      gap: 8px;
    }
    .highlight-row .h-key {
      font-size: 14px;
      color: var(--clr-text-muted);
    }
    .highlight-row .h-val {
      font-size: 14px;
      font-weight: 600;
      color: var(--clr-text);
    }

    /* FOOTER NOTE */
    .footer-note {
      border-top: 1px solid var(--clr-border);
      padding-top: 1.25rem;
      margin-top: 2.5rem;
      font-size: 12px;
      color: var(--clr-text-hint);
      line-height: 1.65;
    }

    @media (max-width: 480px) {
      .highlight-row { flex-direction: column; align-items: flex-start; }
    }