/* ══════════════════════════════════════════════════════════════════════
   REHBER ÖZEL BLOKLARI — SEÇİLEN GÖRÜNÜM (30.09.2026)
   ──────────────────────────────────────────────────────────────────────
   Rehber editörünün özel blokları (admin-article-edit.ejs → premiumBlockTemplates)
   blog-post.ejs'teki temel stillerin ÜSTÜNE bu dosyayla çizilir.
   Kapsam: <div class="post-content rb"> — "rb" sınıfını kaldırırsan eski görünüme döner.

   Blok → görünüm (kullanıcının katalogdan seçimi):
     Bilgi kutuları (not/bilgi/ipucu/başarı/uyarı/tehlike) .... Cam
     Çağrı kutusu ve düğmesi .................................... Cam
     Bölüm başlıkları (h2) ...................................... Sade
     Kart ızgarası, adımlar, tablo, SSS, aç-kapa/spoiler,
     plan kartları, ağaç şema, görsel/galeri, kod, alıntı,
     komut etiketi .............................................. Site (ui-kit.css kart dili)

   Renkler: sitenin vurgusu --uk-ac (ui-kit.css), plan renkleri plan-tags.css.
   ══════════════════════════════════════════════════════════════════════ */

/* Kutu türünün rengi */
.post-content.rb .smart-note { --k: #a78bfa; }
.post-content.rb .smart-info { --k: #5b8cff; }
.post-content.rb .smart-tip { --k: #18d5a8; }
.post-content.rb .smart-success { --k: #22c55e; }
.post-content.rb .smart-warning { --k: #f5b041; }
.post-content.rb .smart-danger { --k: #ff5b6b; }

.post-content.rb {
  --rb-r: var(--uk-radius, 14px);
  /* Cam */
  --rb-cam: linear-gradient(135deg, rgba(255,255,255,.09), rgba(255,255,255,.02));
  --rb-cam-kenar: rgba(255,255,255,.16);
  --rb-cam-isik: inset 0 1px 0 rgba(255,255,255,.14);
  --rb-bolum: 'BÖLÜM ';
}
body.light-theme .post-content.rb {
  --rb-cam: linear-gradient(135deg, rgba(255,255,255,.95), rgba(255,255,255,.6));
  --rb-cam-kenar: #fff;
  --rb-cam-isik: 0 10px 30px rgba(109,77,196,.12);
}
/* "BÖLÜM 03" etiketi sayfanın dilinde */
:lang(en) .post-content.rb, :lang(fr) .post-content.rb { --rb-bolum: 'SECTION '; }
:lang(es) .post-content.rb { --rb-bolum: 'SECCIÓN '; }
:lang(de) .post-content.rb { --rb-bolum: 'ABSCHNITT '; }
:lang(pt) .post-content.rb { --rb-bolum: 'SEÇÃO '; }
:lang(ru) .post-content.rb { --rb-bolum: 'РАЗДЕЛ '; }
:lang(ar) .post-content.rb { --rb-bolum: 'القسم '; }

/* ── Bölüm başlıkları · Sade ── */
.post-content.rb > h2 { border-bottom: 0; padding: 0; margin-top: 60px; font-size: 26px; }
.post-content.rb > h2[data-no]::before {
  display: block; width: fit-content; margin: 0 0 8px; padding: 0; background: none; border-radius: 0;
  font-size: 12px; letter-spacing: .18em; color: #a78bfa; content: var(--rb-bolum) attr(data-no);
}
body.light-theme .post-content.rb > h2[data-no]::before { color: #6d4dc4; }
@media (max-width: 700px) { .post-content.rb > h2 { font-size: 22px; margin-top: 48px; } }

/* ── Komut etiketi · Site ── */
.post-content.rb code.komut {
  background: rgba(var(--uk-ac), .14) !important; color: var(--uk-accent-text) !important;
  padding: 1px 7px; border-radius: 6px; font-weight: 700; white-space: nowrap; font-size: .88em;
}

/* ── Bilgi kutuları · Cam ── */
.post-content.rb .smart-block:not(details):not(.smart-compare):not(.smart-cta) {
  padding: 16px 18px 16px 60px; border: 1px solid var(--rb-cam-kenar) !important; border-radius: 20px;
  background: radial-gradient(160px 90px at 0 0, color-mix(in srgb, var(--k, #a78bfa) 32%, transparent), transparent), var(--rb-cam);
  box-shadow: var(--rb-cam-isik); backdrop-filter: blur(12px);
}
.post-content.rb .smart-block:not(details):not(.smart-compare):not(.smart-cta)::before {
  left: 16px; top: 15px; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center;
  background: color-mix(in srgb, var(--k, #a78bfa) 25%, transparent) !important;
}

/* ── Çağrı kutusu · Cam ── */
.post-content.rb .smart-cta {
  background: radial-gradient(300px 140px at 20% 0, rgba(124,92,255,.35), transparent),
              radial-gradient(300px 140px at 90% 100%, rgba(24,213,168,.25), transparent), var(--rb-cam);
  border: 1px solid var(--rb-cam-kenar); border-radius: 24px; box-shadow: var(--rb-cam-isik);
}
.post-content.rb .smart-cta .smart-button {
  background: rgba(255,255,255,.12) !important; border: 1px solid rgba(255,255,255,.3) !important;
  backdrop-filter: blur(8px); border-radius: 999px; box-shadow: none;
}
body.light-theme .post-content.rb .smart-cta .smart-button { background: #6d4dc4 !important; border-color: #6d4dc4 !important; }

/* ── Site kart dili: kartlar, tablo, ağaç, görsel, alıntı ── */
.post-content.rb .smart-mini-card, .post-content.rb .smart-compare table, .post-content.rb .smart-tree,
.post-content.rb .smart-media, .post-content.rb blockquote {
  background: var(--uk-card-bg); border: 1px solid var(--uk-card-border) !important; border-radius: var(--rb-r); box-shadow: none;
}
.post-content.rb .smart-mini-card { transition: border-color .2s; }
.post-content.rb .smart-mini-card:hover { border-color: rgba(var(--uk-ac), .35) !important; }
.post-content.rb .smart-compare th { background: rgba(var(--uk-ac), .07); color: var(--uk-accent-text-2); font-size: 12px; }
.post-content.rb .smart-tree-node { background: var(--uk-card-bg); border-color: var(--uk-card-border); box-shadow: none; }
.post-content.rb blockquote { border-left: 3px solid rgba(var(--uk-ac), .6) !important; font-size: 17px; }

/* ── Adımlar · Site (kart çerçevesi yok, numaralar vurgulu daire) ── */
.post-content.rb .smart-timeline .smart-mini-card, .post-content.rb .smart-timeline .smart-mini-card:hover { background: none; border: 0 !important; }

/* ── SSS, aç-kapa, spoiler · Site ── */
.post-content.rb details.smart-block {
  background: var(--uk-card-bg); border: 1px solid var(--uk-card-border) !important; border-radius: var(--rb-r); margin: 0 0 8px; padding: 0 16px;
}
.post-content.rb details.smart-block[open] { border-color: rgba(var(--uk-ac), .3) !important; }
.post-content.rb details.smart-block > summary::after { content: '⌄'; font-size: 18px; color: var(--uk-accent-text-2); transform: translateY(-3px); }
.post-content.rb details.smart-block[open] > summary::after { transform: rotate(180deg) translateY(-3px); }

/* ── Kod bloğu · Site ── */
.post-content.rb pre {
  background: var(--uk-card-bg) !important; color: var(--dp-fg) !important; border: 1px solid var(--uk-card-border) !important;
  border-left: 3px solid rgba(var(--uk-ac), .6) !important; border-radius: var(--rb-r) !important; box-shadow: none !important;
}
.post-content.rb pre code { color: var(--dp-fg) !important; font-weight: 500; }

/* ── Düğmeler (çağrı kutusu dışı) · Site ── */
.post-content.rb .smart-button { background: linear-gradient(135deg, rgb(var(--uk-ac)), #7b55d4) !important; box-shadow: 0 6px 18px rgba(var(--uk-ac), .28); border-radius: 12px; }

/* ── Plan kartları · Site — her plan kendi renginde (plan-tags.css değişkenleri) ──
   <div class="smart-mini-card plan-kart pro"><span class="plan-tag pro">PRO</span><h3>…</h3><p>…</p><a class="smart-button">…</a></div> */
.post-content.rb .plan-kart { position: relative; overflow: hidden; display: flex; flex-direction: column; gap: 8px; }
.post-content.rb .plan-kart h3 { margin: 2px 0 0; font-size: 19px; }
.post-content.rb .plan-kart p { flex: 1; }
.post-content.rb .plan-kart .plan-tag { align-self: flex-start; }
.post-content.rb .plan-kart .smart-button { align-self: flex-start; margin-top: 6px; box-shadow: none; }
.post-content.rb .plan-kart::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 3px; }
.post-content.rb .plan-kart.free::before { background: rgb(var(--plan-free-rgb)); }
.post-content.rb .plan-kart.pro::before { background: linear-gradient(90deg, var(--plan-pro-bar)); }
.post-content.rb .plan-kart.max::before { background: var(--plan-max-gradient); background-size: var(--plan-max-gradient-size); animation: planMaxFlow var(--plan-max-flow-speed) linear infinite; }
.post-content.rb .plan-kart.maxplus::before { background: var(--plan-maxplus-gradient); background-size: var(--plan-maxplus-gradient-size); animation: planMaxFlow var(--plan-maxplus-flow-speed) linear infinite; }
.post-content.rb .plan-kart.free { border-color: rgba(var(--plan-free-rgb), .3) !important; background: linear-gradient(180deg, rgba(var(--plan-free-rgb), .07), transparent 60%), var(--uk-card-bg); }
.post-content.rb .plan-kart.pro { border-color: rgba(var(--plan-pro-rgb), .3) !important; background: linear-gradient(180deg, rgba(var(--plan-pro-rgb), .07), transparent 60%), var(--uk-card-bg); }
.post-content.rb .plan-kart.max { border-color: rgba(var(--plan-max-rgb), .35) !important; background: linear-gradient(180deg, rgba(var(--plan-max-rgb), .08), transparent 60%), var(--uk-card-bg); }
.post-content.rb .plan-kart.maxplus { border-color: rgba(var(--plan-maxplus-rgb), .35) !important; background: linear-gradient(180deg, rgba(var(--plan-maxplus-rgb), .08), transparent 60%), var(--uk-card-bg); }
.post-content.rb .plan-kart.free h3 { color: var(--plan-free-text) !important; }
.post-content.rb .plan-kart.pro h3 { color: var(--plan-pro-text) !important; }
.post-content.rb .plan-kart.max h3 { color: var(--plan-max-text) !important; }
.post-content.rb .plan-kart.maxplus h3 { color: var(--plan-maxplus-text) !important; }
.post-content.rb .plan-kart.free .smart-button { background: var(--plan-free-solid) !important; color: var(--plan-free-on-solid) !important; }
.post-content.rb .plan-kart.pro .smart-button { background: var(--plan-pro-solid) !important; color: var(--plan-pro-on-solid) !important; }
.post-content.rb .plan-kart.max .smart-button { background: var(--plan-max-gradient) !important; background-size: var(--plan-max-gradient-size) !important; color: var(--plan-max-on-solid) !important; animation: planMaxFlow var(--plan-max-flow-speed) linear infinite; }
.post-content.rb .plan-kart.maxplus .smart-button { background: var(--plan-maxplus-gradient) !important; background-size: var(--plan-maxplus-gradient-size) !important; color: var(--plan-maxplus-on-solid) !important; animation: planMaxFlow var(--plan-maxplus-flow-speed) linear infinite; }
@media (prefers-reduced-motion: reduce) { .post-content.rb .plan-kart::before, .post-content.rb .plan-kart .smart-button { animation: none !important; } }

/* 03.10.2026 — Ağaç şema telefonda taşmasın (dallar alt alta, girinti daralır) */
.post-content.rb .smart-tree-node { overflow-wrap: anywhere; }
.post-content.rb .smart-tree-node code.komut { white-space: normal; }
@media (max-width: 700px) {
  .post-content.rb .smart-tree { padding: 16px; }
  .post-content.rb .smart-tree-split { grid-template-columns: minmax(0, 1fr); margin-left: 10px; }
  .post-content.rb .smart-tree-children { margin-left: 10px; }
}
/* Telefonda uzun komut etiketi satırı taşırmasın */
@media (max-width: 560px) { .post-content.rb code.komut { white-space: normal; overflow-wrap: anywhere; } }