/* ============================================================
   VAAZ DETAIL PAGE — Editöryal Tasarım
   Shared by all /vaaz/*/detail.html pages
   ============================================================ */

/* ─── TOKENS ───────────────────────────────────────────────── */
:root {
    --vz-paper: #FDFBF7;
    --vz-ink:   #0F0A07;
    --vz-text:  #2C1810;
    --vz-body:  #3A2418;
    --vz-muted: #6B5B4F;
    --vz-soft:  #9B8B7F;
    --vz-copper:#B87333;
    --vz-gold:  #C5A54E;
    --vz-emerald:#0F4C3A;
    --vz-rule:  #E0D5C8;
    --vz-rule-s:#EFE7DB;
    --vz-dark:  #0F0A07;
    --vz-serif: 'Playfair Display','Georgia',serif;
    --vz-sans:  'Inter',-apple-system,sans-serif;
    --vz-mono:  'JetBrains Mono','Menlo',monospace;
    --vz-arabic:'Amiri Quran',serif;
    --vz-ease:  cubic-bezier(0.16,1,0.3,1);
    --vz-mw:    780px;
}

/* ─── ARTICLE EDITORIAL HEADER ─────────────────────────────── */
.art-ed-hdr {
    max-width: 1100px;
    margin: 0 auto;
    padding: 52px 64px 0;
}

.art-ed-hdr-inner {
    border-bottom: 1px solid var(--vz-rule);
    padding-bottom: 32px;
}

.art-ed-meta {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 16px;
    font-family: var(--vz-mono);
    font-size: 11px;
    letter-spacing: 1.5px;
    color: var(--vz-muted);
}

.art-ed-cat {
    color: var(--vz-copper);
    font-weight: 600;
}

.art-ed-sep {
    color: var(--vz-rule);
}

.art-ed-hdr h1 {
    font-family: var(--vz-serif);
    font-size: clamp(32px, 4.5vw, 56px);
    font-weight: 400;
    letter-spacing: -1.2px;
    line-height: 1.08;
    margin: 0 0 16px;
    color: var(--vz-ink);
    max-width: 720px;
}

.art-ed-hdr h1 em {
    font-style: italic;
    color: var(--vz-copper);
}

.art-ed-sub {
    font-family: var(--vz-serif);
    font-size: 18px;
    font-style: italic;
    color: var(--vz-muted);
    line-height: 1.6;
    margin-bottom: 18px;
    max-width: 600px;
}

.art-ed-info {
    display: flex;
    align-items: center;
    gap: 16px;
    font-family: var(--vz-mono);
    font-size: 11px;
    color: var(--vz-soft);
    letter-spacing: 1px;
}

/* ─── BREADCRUMB ────────────────────────────────────────────── */
.art-bc {
    max-width: 1100px;
    margin: 0 auto;
    padding: 20px 64px 0;
    display: flex;
    gap: 6px;
    font-size: 12px;
    color: var(--vz-soft);
    font-family: var(--vz-mono);
    letter-spacing: .5px;
}

.art-bc a {
    color: var(--vz-copper);
    text-decoration: none;
}

.art-bc a:hover { text-decoration: underline; }

/* ─── ARTICLE LAYOUT ────────────────────────────────────────── */
.art-layout {
    max-width: 1100px;
    margin: 0 auto;
    padding: 40px 64px 72px;
    display: grid;
    grid-template-columns: 200px 1fr;
    gap: 48px;
    align-items: start;
}

/* ─── TOC ───────────────────────────────────────────────────── */
.art-toc {
    position: sticky;
    top: 100px;
}

.art-toc h3 {
    font-family: var(--vz-mono);
    font-size: 10px;
    font-weight: 600;
    color: var(--vz-copper);
    letter-spacing: 2px;
    margin-bottom: 16px;
    text-transform: uppercase;
}

.art-toc nav {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.art-toc a {
    font-size: 12.5px;
    color: var(--vz-muted);
    padding: 5px 0 5px 12px;
    border-left: 2px solid transparent;
    transition: all .2s var(--vz-ease);
    line-height: 1.4;
    text-decoration: none;
    font-family: var(--vz-sans);
}

.art-toc a:hover,
.art-toc a.active {
    color: var(--vz-copper);
    border-left-color: var(--vz-copper);
}

/* ─── ARTICLE BODY ──────────────────────────────────────────── */
.art-body h2 {
    font-family: var(--vz-serif);
    font-size: clamp(20px, 2.8vw, 26px);
    font-weight: 700;
    color: var(--vz-ink);
    margin: 48px 0 16px;
    line-height: 1.3;
    padding-top: 8px;
    border-top: 1px solid var(--vz-rule-s);
}

.art-body h2:first-child {
    margin-top: 0;
    border-top: none;
    padding-top: 0;
}

.art-body p {
    font-size: 16px;
    font-family: var(--vz-sans);
    color: var(--vz-body);
    line-height: 1.9;
    margin-bottom: 20px;
}

/* ─── VERSE BLOCKS ──────────────────────────────────────────── */
.verse-block {
    background: #F7F2EB;
    border-left: 3px solid var(--vz-gold);
    border-radius: 0 8px 8px 0;
    padding: 24px 28px;
    margin: 24px 0;
}

.verse-arabic {
    font-family: 'Amiri Quran', 'mushafR', serif !important;
    font-size: clamp(18px, 2.5vw, 24px);
    direction: rtl;
    text-align: center;
    color: var(--vz-ink);
    line-height: 2;
    margin-bottom: 12px;
}

.verse-translation {
    font-family: var(--vz-serif);
    font-size: 14px;
    color: var(--vz-muted);
    line-height: 1.75;
    font-style: italic;
    text-align: center;
}

/* ─── HIGHLIGHT BOX ─────────────────────────────────────────── */
.highlight-box {
    background: rgba(184,115,51,.04);
    border: 1px solid rgba(184,115,51,.12);
    padding: 20px 24px;
    margin: 20px 0;
}

.highlight-box p {
    font-size: 15px;
    color: var(--vz-muted);
    line-height: 1.8;
    margin-bottom: 0;
}

/* ─── DECISIONS ─────────────────────────────────────────────── */
.decisions ul { list-style: none; padding: 0; }

.decisions li {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 12px 0;
    border-bottom: 1px solid var(--vz-rule-s);
    font-size: 15px;
    color: var(--vz-body);
    line-height: 1.7;
}

.decisions li:last-child { border-bottom: none; }

.decisions li i {
    color: var(--vz-copper);
    margin-top: 4px;
    font-size: 13px;
    flex-shrink: 0;
}

.decisions h2 { display: flex; align-items: center; gap: 8px; }
.decisions h2 i { color: var(--vz-copper); }

/* ─── DUA BOX ───────────────────────────────────────────────── */
.dua-box {
    background: var(--vz-dark);
    padding: 32px;
    text-align: center;
}

.dua-box p {
    font-family: var(--vz-serif);
    font-size: 15px;
    color: rgba(245,241,232,.7);
    line-height: 2;
    margin-bottom: 8px;
}

.dua-box p:last-child { margin-bottom: 0; }
.dua h2 { display: flex; align-items: center; gap: 8px; }
.dua h2 i { color: var(--vz-gold); }

/* ─── HATIME ────────────────────────────────────────────────── */
.hatime {
    text-align: center;
    padding: 32px 0;
    border-top: 1px solid var(--vz-rule);
}

.hatime .verse-arabic {
    margin-bottom: 16px;
    color: var(--vz-gold);
    font-size: 20px;
}

.hatime p {
    font-size: 14px;
    color: var(--vz-soft);
    font-style: italic;
}

/* ─── ACTIONS ───────────────────────────────────────────────── */
.art-actions {
    max-width: 1100px;
    margin: 0 auto;
    padding: 0 64px 56px;
}

.art-actions-inner {
    display: flex;
    gap: 12px;
    justify-content: center;
    padding: 24px 0;
    border-top: 1px solid var(--vz-rule);
    border-bottom: 1px solid var(--vz-rule);
}

.art-action-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 9px 20px;
    border: 1px solid var(--vz-rule);
    font-size: 12.5px;
    font-weight: 600;
    color: var(--vz-muted);
    background: var(--vz-paper);
    cursor: pointer;
    transition: all .25s var(--vz-ease);
    font-family: var(--vz-mono);
    letter-spacing: .5px;
    text-decoration: none;
}

.art-action-btn:hover {
    border-color: var(--vz-copper);
    color: var(--vz-copper);
}

.art-action-btn i { font-size: 13px; }

/* ─── FOOTER ────────────────────────────────────────────────── */
.vz-footer {
    background: var(--vz-dark);
    padding: 40px 24px;
    text-align: center;
}

.vz-footer-inner { max-width: 1100px; margin: 0 auto; }

.vz-footer-links {
    display: flex;
    justify-content: center;
    gap: 24px;
    flex-wrap: wrap;
    margin-bottom: 20px;
}

.vz-footer-links a {
    font-size: 13px;
    color: rgba(245,241,232,.4);
    text-decoration: none;
    transition: color .2s;
}

.vz-footer-links a:hover { color: var(--vz-gold); }

.vz-footer-copy {
    font-size: 12px;
    color: rgba(245,241,232,.2);
}

/* ─── MOBILE BOTTOM NAV ─────────────────────────────────────── */
.hp-bottom-nav {
    display: none;
    position: fixed;
    bottom: 0; left: 0; right: 0;
    z-index: 90;
    background: #0F0A07;
    border-top: 1px solid rgba(255,255,255,.06);
    padding: 6px 0;
}

/* ─── RESPONSIVE ────────────────────────────────────────────── */
@media(max-width:1024px) {
    .art-ed-hdr, .art-bc, .art-layout, .art-actions { padding-left: 24px; padding-right: 24px; }
}

@media(max-width:900px) {
    .art-layout { grid-template-columns: 1fr; gap: 0; }
    .art-toc {
        position: static;
        margin-bottom: 32px;
        padding: 20px;
        background: rgba(184,115,51,.03);
        border: 1px solid var(--vz-rule-s);
    }
    .art-toc nav { flex-direction: row; flex-wrap: wrap; gap: 4px; }
    .art-toc a { border-left: none; border-bottom: 2px solid transparent; padding: 4px 10px; font-size: 11px; }
    .art-toc a:hover, .art-toc a.active { border-left: none; border-bottom-color: var(--vz-copper); }
}

@media(max-width:640px) {
    .mv-hdr, .mv-overlay { display: none !important; }
    body { padding-top: 0 !important; }
    .hp-bottom-nav { display: flex !important; }
    .art-ed-hdr { padding: 24px 20px 0; }
    .art-ed-hdr h1 { font-size: 30px; }
    .art-bc { padding: 16px 20px 0; }
    .art-layout { padding: 24px 20px 48px; }
    .art-body h2 { font-size: 20px; }
    .art-body p { font-size: 15px; }
    .verse-block { padding: 16px 18px; }
    .dua-box { padding: 20px 16px; }
    .art-actions { padding: 0 20px 40px; }
    .art-actions-inner { flex-wrap: wrap; }
    .vz-footer { padding-bottom: 80px; }
}

@media(prefers-reduced-motion:reduce) {
    .hz { animation: none !important; opacity: 1; transform: none; }
}

/* ════════════════════════════════════════════════════════════════
   VAAZ MOBILE RESPONSIVE 2026-05-23
   Desktop tasarımı dokunulmaz, sadece mobile @media kuralları.
   Selector kapsamı: vz-* (kategori listeleri), vd-* (detail.html),
   art-* (paylaşımlı vaaz.css) ve generic [class*="..."] eşleyicileri.
   ════════════════════════════════════════════════════════════════ */

/* ─── Liste grid (her vaaz kategori index'i) ─── */
@media (max-width: 1024px) {
  .vaaz-grid, .vz-list, [class*="vaaz-list"], [class*="vaaz-cards"] {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}
@media (max-width: 768px) {
  .vaaz-grid, .vz-list, [class*="vaaz-list"], [class*="vaaz-cards"] {
    grid-template-columns: 1fr !important;
    gap: 14px !important;
  }
  .vaaz-kart, .vz-item, [class*="vaaz-card"] {
    padding: 18px !important;
  }
  .vaaz-kart h3, .vz-item-title, [class*="vaaz-title"] {
    font-size: 1.1rem !important;
    line-height: 1.3 !important;
  }
  .vaaz-kart .ozet, .vz-item-ozet, [class*="vaaz-excerpt"] {
    font-size: 0.92rem !important;
    line-height: 1.6 !important;
    -webkit-line-clamp: 3;
  }
  .vaaz-kart .meta, .vz-item-meta,
  .vaaz-meta:not(.vd-meta), [class*="vaaz-meta"] {
    flex-wrap: wrap;
    gap: 6px;
    font-size: 0.78rem !important;
    margin-top: 12px;
  }

  /* Cuma/Bayram/Kandil index — masaüstü tablo rowlarını mobilde stack et */
  .vz-list-header { display: none !important; }
  .vz-row {
    grid-template-columns: 1fr !important;
    gap: 6px !important;
    padding: 16px 0 !important;
  }
  .vz-row-topic, .vz-row-dur { text-align: left !important; }
  .vz-tabs {
    flex-wrap: wrap;
    gap: 4px !important;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  .vz-tabs::-webkit-scrollbar { display: none; }
  .vz-ph, .vz-bc, .vz-seo {
    padding-left: 20px !important;
    padding-right: 20px !important;
  }
  .vz-seo-inner { grid-template-columns: 1fr !important; gap: 28px !important; }
}

/* ─── Vaaz detay sayfası ─── */
@media (max-width: 768px) {
  .vaaz-hero, .vd-hero, [class*="vaaz-header"] {
    padding: 32px 16px 24px !important;
  }
  .vaaz-hero h1, .vd-title {
    font-size: clamp(1.6rem, 6vw, 2.2rem) !important;
    line-height: 1.22 !important;
  }
  .vaaz-hero .alt-baslik, .vd-ozet, [class*="subtitle"] {
    font-size: 0.98rem !important;
    line-height: 1.55;
  }
  .vaaz-meta, .vd-meta, [class*="vaaz-meta"] {
    flex-wrap: wrap;
    gap: 8px;
    font-size: 0.78rem !important;
  }

  .vaaz-icerik, .vd-content, [class*="vaaz-content"], [class*="vaaz-body"] {
    padding: 24px 16px !important;
    font-size: clamp(1rem, 4.5vw, 1.1rem) !important;
    line-height: 1.78 !important;
    max-width: 100% !important;
  }
  .vaaz-icerik h2, .vd-content h2 {
    font-size: 1.32rem !important;
    margin-top: 36px !important;
    padding-top: 8px;
  }
  .vaaz-icerik h3, .vd-content h3 { font-size: 1.15rem !important; margin-top: 24px !important; }
  .vaaz-icerik p, .vd-content p { margin: 14px 0 !important; }

  /* Ayet/hadis alıntı blokları */
  .vaaz-icerik blockquote, .vd-content blockquote,
  .vaaz-alinti, [class*="quote"] {
    margin: 20px -4px !important;
    padding: 18px 20px !important;
    font-size: 1.02rem !important;
    line-height: 1.7 !important;
    border-left-width: 3px !important;
  }
  .vaaz-icerik .ayet, .vaaz-icerik .hadis,
  .vd-content .vz-ayet,
  [class*="ayet-block"], [class*="hadis-block"] {
    padding: 16px 18px !important;
    margin: 18px 0 !important;
  }
  .vaaz-icerik .ayet .arabic,
  .vaaz-icerik .hadis .arabic,
  .vd-content blockquote p[lang="ar"],
  .vd-content blockquote p[dir="rtl"],
  .vd-content p[dir="rtl"],
  [class*="ayet"] .arabic,
  [class*="hadis"] .arabic {
    font-size: clamp(1.3rem, 5vw, 1.6rem) !important;
    line-height: 2.1 !important;
  }
  .vaaz-icerik .ayet .meal,
  .vaaz-icerik .hadis .meal,
  .vd-content .vz-meal,
  [class*="meal"] {
    font-size: 0.98rem !important;
  }

  /* art-* paylaşımlı detail (recep-ayi, regaib-kandili) */
  .art-ed-hdr { padding: 28px 20px 0 !important; }
  .art-ed-hdr h1 {
    font-size: clamp(1.7rem, 6.5vw, 2.4rem) !important;
    line-height: 1.15 !important;
  }
  .art-ed-sub { font-size: 1rem !important; }
  .art-bc { padding: 16px 20px 0 !important; flex-wrap: wrap; }
  .art-layout { padding: 28px 20px 56px !important; }
  .art-body h2 { font-size: 1.3rem !important; margin-top: 32px !important; }
  .art-body p { font-size: 1rem !important; line-height: 1.8 !important; }
  .verse-block { padding: 16px 18px !important; margin: 18px 0 !important; }
  .verse-arabic { font-size: clamp(1.2rem, 4.8vw, 1.55rem) !important; line-height: 2 !important; }
  .verse-translation { font-size: 0.95rem !important; }
  .dua-box { padding: 22px 18px !important; }
  .highlight-box { padding: 16px 18px !important; }
  .art-actions { padding: 0 20px 40px !important; }
  .art-actions-inner { flex-wrap: wrap; gap: 8px !important; }
  .art-action-btn {
    flex: 1 1 auto;
    min-height: 44px;
    justify-content: center;
    padding: 10px 16px !important;
  }
}

/* ─── Sticky TOC mobile akordeon ─── */
@media (max-width: 900px) {
  .vaaz-layout, .art-layout, [class*="vaaz-grid-layout"] {
    grid-template-columns: 1fr !important;
  }
  .vaaz-toc, .art-toc, [class*="toc"] {
    position: static !important;
    width: 100% !important;
    max-height: none !important;
    margin-bottom: 20px;
    padding: 14px 16px !important;
    border: 1px solid var(--vz-rule, #e0d5c8);
    border-radius: 6px;
  }
  .vaaz-toc summary, .art-toc summary {
    cursor: pointer;
    font-weight: 500;
    padding: 6px 0;
    list-style: revert;
  }
  .vaaz-toc-list a,
  .art-toc nav a {
    display: block;
    padding: 10px 6px !important;
    font-size: 0.9rem !important;
    min-height: 40px;
    border-left: 2px solid transparent !important;
    border-bottom: none !important;
  }
  .art-toc nav { flex-direction: column !important; }
}

/* ─── Sticky bottom action bar (PDF/Paylaş) ─── */
@media (max-width: 768px) {
  .vaaz-actions, .vd-actions,
  [class*="vaaz-action-bar"]:not(.vaaz-meta):not(.vd-meta) {
    position: sticky;
    bottom: 70px;
    left: 0; right: 0;
    background: rgba(255,253,248,0.96);
    backdrop-filter: blur(10px);
    padding: 10px 16px;
    border-top: 1px solid var(--vz-rule, #e0d5c8);
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    z-index: 50;
  }
  .vaaz-actions .btn,
  .vd-action-btn,
  .vd-dl-btn,
  [class*="vaaz-action-bar"] button {
    flex: 1 1 auto;
    min-height: 44px;
    padding: 0 12px !important;
    justify-content: center;
  }
  .vd-dl { flex: 1 1 100%; }
  .vd-dl-btn { width: 100%; }
  .vd-dl-menu { left: 0; right: 0; min-width: 0 !important; }
}

/* ─── Vaaz nav (önceki/sonraki) ─── */
@media (max-width: 768px) {
  .vaaz-nav, .vd-related-list,
  [class*="vaaz-pagination"] {
    flex-direction: column;
    gap: 8px;
  }
  .vaaz-nav-link, .vd-related-item,
  [class*="vaaz-nav-item"] {
    width: 100%;
    min-height: 56px;
    padding: 12px 14px !important;
    grid-template-columns: 1fr auto !important;
  }
  .vaaz-nav-link span { max-width: 100% !important; }
  .vd-related-title-link { font-size: 0.95rem !important; }
}

/* ─── Yorumlar bölümü ─── */
@media (max-width: 768px) {
  .yorumlar, [class*="comments"] { padding: 20px 16px !important; }
  .yorum-form textarea, [class*="comment-form"] textarea {
    width: 100% !important;
    font-size: 16px !important;
    min-height: 100px;
  }
  .yorum-form button, [class*="comment-form"] button {
    width: 100%;
    min-height: 44px;
  }
  .yorum-kart, [class*="comment-item"] { padding: 14px 16px !important; }
  .yorum-kart .avatar { width: 40px; height: 40px; }
}