/* ═══════════════════════════════════════════════════════════════
     هوية بصرية موحدة - حصن المسلم (باستخدام ألوان الموقع الأصلية)
  ═══════════════════════════════════════════════════════════════ */
  /* ─── Hero ───────────────────────────────────────────────────── */
  .hisn-hero {
    position: relative;
    padding: 28px 20px;
    text-align: center;
    overflow: hidden;
    background: linear-gradient(135deg, #D85F1A, #F28A2E);
    color: #fff;
    border: none;
    border-radius: 28px;
    box-shadow: 0 14px 34px rgba(100,45,10,.13);
  }
  .hisn-hero::before {
    display: none;
  }
  .hisn-hero h1 {
    font-family: var(--font-secondary);
    font-size: clamp(1.4rem, 4vw, 2rem);
    font-weight: 900;
    color: #fff;
    margin: 0 0 10px;
    line-height: 1.3;
  }
  .hisn-hero p {
    color: rgba(255,255,255,.88);
    font-weight: 700;
    font-size: .97rem;
    max-width: 480px;
    margin: 0 auto;
    line-height: 1.7;
  }

  /* ─── Doors Grid ─────────────────────────────────────────────── */
  .doors-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 18px;
  }

  /* ─── Door Card ──────────────────────────────────────────────── */
  .door-card {
    border-radius: 22px;
    border: 1px solid #EFD1B1;
    background: #FFFFFF;
    padding: 18px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
    position: relative;
    cursor: pointer;
    animation: cardIn .35s ease both;
    box-shadow: 0 14px 34px rgba(100,45,10,.13);
  }
  .door-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 16px 38px rgba(100,45,10,.16);
    border-color: #D85F1A;
  }
  /* الشريط الجانبي بلون العلامة التجارية */
  .door-card::before {
    content: '';
    position: absolute;
    top: 0; right: 0;
    width: 4px; height: 100%;
    background: #D85F1A;
    border-radius: 0 22px 22px 0;
  }
  .door-title {
    font-family: var(--font-secondary);
    font-weight: 900;
    color: #432111;
    font-size: 1.05rem;
    line-height: 1.4;
    margin: 0;
  }
  .door-count {
    font-size: .85rem;
    color: #9A7158;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: #FFF0DC;
    border: 1px solid #EFD1B1;
    border-radius: 999px;
    padding: 5px 10px;
  }
  .door-count::before {
    content: '📿';
    font-size: .9rem;
  }

  /* ─── Viewer Header & Back Button ───────────────────────────── */
  .viewer-header {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
    background: #FFF0DC;
    border: 1px solid #EFD1B1;
    border-radius: 22px;
    margin-bottom: 18px;
    box-shadow: 0 8px 22px rgba(100,45,10,.08);
  }
  .back-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 10px 16px;
    border-radius: 16px;
    border: 1px solid #EFD1B1;
    background: #FFFFFF;
    font-weight: 900;
    font-family: var(--font-secondary);
    font-size: .9rem;
    color: #D85F1A;
    text-decoration: none;
    transition: all .18s;
    cursor: pointer;
    min-height: 44px;
  }
  .back-btn:hover {
    background: linear-gradient(135deg, #D85F1A, #F28A2E);
    border-color: transparent;
    color: #fff;
  }
  .viewer-header h2 {
    font-family: var(--font-secondary);
    font-weight: 900;
    color: var(--color-primary-dark);
    font-size: 1.1rem;
    margin: 0;
  }

  /* ─── Zikr Card ──────────────────────────────────────────────── */
  .zikr-card {
    background: #FFFFFF;
    border: 1px solid #EFD1B1;
    border-radius: 24px;
    padding: 20px;
    margin-bottom: 12px;
    transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
    box-shadow: 0 10px 26px rgba(100,45,10,.10);
  }
  .zikr-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 14px 34px rgba(100,45,10,.13);
    border-color: #D85F1A;
  }
  .zikr-text {
    font-family: var(--font-secondary);
    font-size: 1.15rem;
    line-height: 2.1;
    color: #432111;
    margin-bottom: 10px;
    text-align: justify;
    font-weight: 700;
  }
  .zikr-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    font-size: .85rem;
    color: #9A7158;
    font-weight: 700;
  }
  .zikr-repeat,
  .zikr-reference {
    background: #FFF0DC;
    color: #9A7158;
    padding: 5px 10px;
    border-radius: 999px;
    border: 1px solid #EFD1B1;
    font-weight: 800;
  }
  .zikr-repeat::before { content: '🔁 '; }
  .zikr-reference::before { content: '📖 '; }

  /* ─── Audio Player ──────────────────────────────────────────── */
  .zikr-card .player {
    width: 100%;
    border-radius: 16px;
    border: 1px solid #EFD1B1;
    background: #FFF0DC;
  }

  /* ─── Stagger Animation ─────────────────────────────────────── */
  .door-card:nth-child(1),
  .zikr-card:nth-child(1) { animation-delay: 0s; }
  .door-card:nth-child(2),
  .zikr-card:nth-child(2) { animation-delay: 0.04s; }
  .door-card:nth-child(3),
  .zikr-card:nth-child(3) { animation-delay: 0.08s; }
  .door-card:nth-child(4),
  .zikr-card:nth-child(4) { animation-delay: 0.12s; }
  .door-card:nth-child(5),
  .zikr-card:nth-child(5) { animation-delay: 0.16s; }
  .door-card:nth-child(6),
  .zikr-card:nth-child(6) { animation-delay: 0.20s; }
  .door-card:nth-child(7),
  .zikr-card:nth-child(7) { animation-delay: 0.24s; }
  .door-card:nth-child(8),
  .zikr-card:nth-child(8) { animation-delay: 0.28s; }
  .door-card:nth-child(9),
  .zikr-card:nth-child(9) { animation-delay: 0.32s; }
  .door-card:nth-child(10),
  .zikr-card:nth-child(10) { animation-delay: 0.36s; }
  .door-card:nth-child(11),
  .zikr-card:nth-child(11) { animation-delay: 0.40s; }
  .door-card:nth-child(12),
  .zikr-card:nth-child(12) { animation-delay: 0.44s; }

  /* ─── Mobile ────────────────────────────────────────────────── */
  @media (max-width: 640px) {
    .doors-grid { grid-template-columns: 1fr; gap: 14px; }
    .hisn-hero h1 { font-size: 1.3rem; }
    .viewer-header { flex-direction: column; text-align: center; }
    .zikr-text { font-size: 1rem; }
  }