:root{
    --ink:#1A1A2E;
    --cream:#FAF3E8;
    --cream-2:#F2E8D8;
    --gold:#C9A24B;
    --gold-soft:#DCC384;
    --maroon:#6B2737;
    --text-dark:#2B2320;
    --text-dim:#5c5248;
    --text-light:#EDE6D9;
    --text-light-dim:#b9b3a4;
    --rule:#d9cbb0;
  }
  *{ box-sizing:border-box; margin:0; padding:0; }

  .urdu{ font-family:'Noto Nastaliq Urdu', serif; direction:rtl; }

  .carousel-wrap{ width:100%; max-width:720px; }

  .carousel-head{ text-align:center; margin-bottom:34px; }
  .kicker{
    font-style:italic;
    color:var(--maroon); font-size:18px; margin-bottom:6px;
  }
  .carousel-title{
    font-weight:500;
    font-size:32px; color:var(--text-dark);
  }
  .carousel-title .urdu{ font-size:26px; color:var(--maroon); }

  /* ---- Card / track ---- */
  .carousel{ position:relative; }
  .card-frame{
    background:var(--ink);
    border-radius:6px;
    position:relative;
    overflow:hidden;
    min-height:280px;
  }
  .card-frame::before{
    content:'';
    position:absolute; top:-35%; right:-12%;
    width:300px; height:300px; border-radius:50%;
    border:1px solid rgba(201,162,75,0.14);
    pointer-events:none;
  }

  /*
    Each .slide is REAL HTML content — visible to view-source, search
    engines, and screen readers. JS only toggles which one is displayed;
    it never generates or injects the poetry text itself.
  */
  .slide{
    display:none;
    color:var(--text-light);
    padding:56px 48px 40px;
    text-align:center;
    flex-direction:column;
    align-items:center;
    position:relative;
  }
  .slide.is-active{ display:flex; }

  .slide-index{
    position:absolute; top:20px; left:24px;
    font-size:12px; letter-spacing:0.06em; color:var(--gold-soft);
  }
  .slide-poet{
    position:absolute; top:20px; right:24px;
    font-style:italic;
    font-size:14px; color:var(--text-light-dim);
  }
  .slide-ur{
    font-family:'Noto Nastaliq Urdu', serif;
    direction:rtl;
    font-size:clamp(24px, 3.6vw, 32px);
    line-height:2.15;
    margin-bottom:22px;
    max-width:560px;
  }
  .slide-ur span{ display:block; }
  .slide-roman{
    font-style:italic;
    font-size:16.5px;
    line-height:1.8;
    color:var(--text-light-dim);
    max-width:520px;
  }
  .slide-roman span{ display:block; }

  .card-actions{
    display:flex; gap:12px; margin-top:30px; justify-content:center;
  }
  .icon-btn{
    border:1px solid rgba(237,230,217,0.3); border-radius:2px;
    padding:9px 20px; font-size:13.5px; background:none; color:var(--text-light);
    cursor:pointer; transition:border-color .2s, color .2s, background .2s;
    display:inline-flex; align-items:center; gap:7px;
  }
  .icon-btn:hover{ border-color:var(--gold); color:var(--gold-soft); }
  .icon-btn.copied{ background:var(--gold); color:var(--ink); border-color:var(--gold); }

  /* ---- Nav arrows ---- */
  .nav-btn{
    position:absolute; top:50%; transform:translateY(-50%);
    width:44px; height:44px; border-radius:50%;
    background:var(--cream); border:1px solid var(--rule);
    color:var(--text-dark); font-size:18px;
    display:flex; align-items:center; justify-content:center;
    cursor:pointer; transition:background .2s, border-color .2s;
    z-index:5;
  }
  .nav-btn:hover{ background:var(--maroon); color:var(--text-light); border-color:var(--maroon); }
  .nav-prev{ left:-22px; }
  .nav-next{ right:-22px; }
  @media (max-width:560px){
    .nav-prev{ left:-8px; }
    .nav-next{ right:-8px; }
    .slide{ padding:56px 28px 34px; }
  }

  /* ---- Dots ---- */
  .dots{
    display:flex; justify-content:center; gap:8px; margin-top:26px;
    flex-wrap:wrap; max-width:480px; margin-left:auto; margin-right:auto;
  }
  .dot{
    width:7px; height:7px; border-radius:50%;
    background:var(--rule); cursor:pointer; border:none; padding:0;
    transition:background .2s, width .2s;
  }
  .dot.active{ background:var(--maroon); width:20px; border-radius:4px; }

  .progress-label{
    text-align:center; margin-top:16px; font-size:13px; color:var(--text-dim);
  }