/* ─────────────────────────────────────────
   DUAS SAYFASI
───────────────────────────────────────── */

/* Back butonu */
.back-btn {
    width: 34px; height: 34px;
    display: flex; align-items: center; justify-content: center;
    background: var(--overlay);
    border: 1px solid var(--border-hi);
    border-radius: var(--radius-sm);
    color: var(--t2);
    text-decoration: none;
    transition: background .2s, color .2s;
    flex-shrink: 0;
}
.back-btn:hover { background: var(--border); color: var(--accent); }
.back-btn svg { width: 16px; height: 16px; stroke-width: 2.2; }

/* Hero */
.duas-hero {
    background: var(--panel);
    border-bottom: 1px solid var(--border);
    padding: 2rem 0 1.75rem;
    position: relative; z-index: 1;
}
.duas-hero-title {
    font-size: 1.6rem; font-weight: 700;
    color: var(--t1); letter-spacing: -.02em;
    margin-bottom: .35rem;
}
.duas-hero-sub {
    font-size: .85rem; font-weight: 400;
    color: var(--t3);
}

/* Main */
.duas-main {
    padding: 1.5rem 0 3rem;
    position: relative; z-index: 1;
}

/* Sticky tabs */
.duas-tabs {
    position: sticky;
    top: 57px; /* header yüksekliği */
    z-index: 50;
    background: var(--bg);
    display: flex; gap: .375rem;
    padding: .625rem 0;
    border-bottom: 1.5px solid var(--border);
    margin-bottom: 1.25rem;
}
.duas-tab {
    display: flex; align-items: center; gap: .35rem;
    padding: .5rem 1rem;
    font-family: 'DM Sans', sans-serif;
    font-size: .85rem; font-weight: 600;
    color: var(--t3);
    background: var(--panel);
    border: 1.5px solid var(--border);
    border-radius: 50px;
    cursor: pointer;
    transition: all .2s;
    white-space: nowrap;
}
.duas-tab svg { width: 13px; height: 13px; stroke-width: 2; }
.duas-tab:hover { color: var(--t2); border-color: var(--border-hi); }
.duas-tab.active {
    background: var(--accent);
    border-color: var(--accent);
    color: #fff;
}
.duas-tab.active svg { stroke: #fff; }

/* Panel */
.duas-panel { display: none; flex-direction: column; gap: 1rem; }
.duas-panel.active { display: flex; }

/* Dua kartı */
.duas-card {
    background: var(--panel);
    border: 1.5px solid var(--border);
    border-radius: var(--radius);
    overflow: hidden;
    transition: border-color .2s, box-shadow .2s;
}
.duas-card:hover { border-color: var(--border-hi); box-shadow: var(--sh-sm); }

/* Kart üst */
.duas-card-head {
    display: flex; align-items: center;
    justify-content: space-between; gap: .75rem;
    padding: 1rem 1.25rem .875rem;
    border-bottom: 1px solid var(--border);
}
.duas-card-meta {
    display: flex; align-items: center; gap: .65rem;
}
.duas-num {
    font-size: .72rem; font-weight: 700;
    font-variant-numeric: tabular-nums;
    color: var(--accent);
    background: var(--overlay);
    border: 1px solid var(--border);
    border-radius: 6px;
    padding: .2rem .45rem;
    letter-spacing: .04em;
    flex-shrink: 0;
}
.duas-title {
    font-size: .95rem; font-weight: 700;
    color: var(--t1); letter-spacing: -.01em;
}

/* Kopyala butonu */
.duas-copy {
    display: flex; align-items: center; gap: .35rem;
    padding: .42rem .85rem;
    font-family: 'DM Sans', sans-serif;
    font-size: .78rem; font-weight: 600;
    color: var(--t2);
    background: var(--overlay);
    border: 1px solid var(--border);
    border-radius: 50px;
    cursor: pointer;
    white-space: nowrap;
    transition: all .2s;
    flex-shrink: 0;
}
.duas-copy svg { width: 12px; height: 12px; stroke-width: 2.2; }
.duas-copy:hover { background: var(--border); color: var(--accent); }
.duas-copy.copied {
    background: var(--accent);
    border-color: var(--accent);
    color: #fff;
}

/* Arapça */
.duas-arabic-wrap {
    padding: 1.5rem 1.5rem 1.25rem;
    background: var(--overlay);
    border-bottom: 1px solid var(--border);
}
.duas-arabic {
    font-family: 'Amiri', serif;
    font-size: 1.5rem; font-weight: 400;
    color: var(--t1); line-height: 2.1;
    text-align: right; direction: rtl;
}

/* Okunuş + Meal satırları */
.duas-body {
    padding: 1.1rem 1.25rem 1.25rem;
    display: flex; flex-direction: column; gap: .9rem;
}
.duas-row { display: flex; flex-direction: column; gap: .35rem; }
.duas-row-label {
    display: flex; align-items: center; gap: .3rem;
    font-size: .72rem; font-weight: 700;
    text-transform: uppercase; letter-spacing: .09em;
    color: var(--accent);
}
.duas-row-label svg { width: 12px; height: 12px; stroke: var(--accent); stroke-width: 2.2; }

.duas-okunusu {
    font-size: .9rem; font-style: italic; font-weight: 400;
    color: var(--t2); line-height: 1.75;
}
.duas-meal {
    font-size: .88rem; font-weight: 400;
    color: var(--t1); line-height: 1.75;
}

/* Kaynak */
.duas-kaynak {
    display: flex; align-items: center; gap: .35rem;
    font-size: .75rem; font-weight: 600;
    color: var(--t3);
    padding-top: .5rem;
    border-top: 1px solid var(--border);
}
.duas-kaynak svg { width: 12px; height: 12px; stroke: var(--t3); stroke-width: 2; }

/* Responsive */
@media (max-width: 460px) {
    .duas-arabic { font-size: 1.25rem; }
    .duas-card-head { flex-wrap: wrap; }
    .duas-copy span { display: none; }
    .duas-copy { padding: .42rem .55rem; }
}