/* ============================================================
   DASHBOARD — Stat Strips, Stat Cards, Zekat Banner,
               Progress, Hijri Info
   ============================================================ */

/* ============================================================
   HEADER & STATS
============================================================ */
.stat-strip { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.25rem; margin-bottom: 1.5rem; }
.stat-card {
    position: relative; overflow: hidden; border: none;
    border-radius: var(--radius-lg); padding: 1.8rem 2rem;
    box-shadow: var(--shadow-sm); transition: all 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
    min-height: 170px; display: flex; flex-direction: column; justify-content: space-between;
    backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
}
.stat-card:hover { box-shadow: var(--shadow-md); transform: translateY(-3px); }
.stat-card::before {
    content: ''; position: absolute; inset: 0; border-radius: inherit;
    padding: 1px; background: linear-gradient(145deg, rgba(255,255,255,0.3), rgba(255,255,255,0.05));
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor; mask-composite: exclude;
    pointer-events: none;
}
.stat-card::after {
    content: ''; position: absolute; top: -80%; left: -30%; width: 160%; height: 200%;
    background: radial-gradient(circle at 30% 25%, rgba(255,255,255,0.12) 0%, transparent 55%);
    pointer-events: none; transition: opacity 0.5s;
}
.stat-card:hover::after { opacity: 0.7; }
[data-theme="dark"] .stat-card::before { background: linear-gradient(145deg, rgba(255,255,255,0.08), rgba(255,255,255,0.02)); }
[data-theme="dark"] .stat-card::after { background: radial-gradient(circle at 30% 25%, rgba(255,255,255,0.05) 0%, transparent 50%); }

.stat-card-bg {
    position: absolute; inset: 0; pointer-events: none; z-index: 0;
    opacity: 0.12; transition: opacity 0.5s;
}
.stat-card:hover .stat-card-bg { opacity: 0.2; }

.stat-card-teal {
    background: linear-gradient(145deg, rgba(0,147,158,0.04) 0%, rgba(0,147,158,0.10) 40%, var(--bg-card) 80%);
    box-shadow: 0 2px 20px rgba(0,147,158,0.06), inset 0 1px 0 rgba(255,255,255,0.1);
}
.stat-card-teal .stat-card-bg {
    background: radial-gradient(ellipse at 20% 80%, rgba(0,147,158,0.20) 0%, transparent 50%),
                radial-gradient(ellipse at 80% 20%, rgba(46,203,214,0.10) 0%, transparent 40%);
}
[data-theme="dark"] .stat-card-teal {
    background: linear-gradient(145deg, rgba(46,203,214,0.04) 0%, rgba(46,203,214,0.08) 40%, var(--bg-card) 80%);
    box-shadow: 0 2px 20px rgba(46,203,214,0.04), inset 0 1px 0 rgba(255,255,255,0.04);
}
[data-theme="dark"] .stat-card-teal .stat-card-bg {
    background: radial-gradient(ellipse at 20% 80%, rgba(46,203,214,0.12) 0%, transparent 50%),
                radial-gradient(ellipse at 80% 20%, rgba(46,203,214,0.06) 0%, transparent 40%);
    opacity: 0.08;
}

.stat-card-gold {
    background: linear-gradient(145deg, rgba(168,123,0,0.04) 0%, rgba(168,123,0,0.10) 40%, var(--bg-card) 80%);
    box-shadow: 0 2px 20px rgba(168,123,0,0.06), inset 0 1px 0 rgba(255,255,255,0.1);
}
.stat-card-gold .stat-card-bg {
    background: radial-gradient(ellipse at 20% 80%, rgba(168,123,0,0.20) 0%, transparent 50%),
                radial-gradient(ellipse at 80% 20%, rgba(224,173,28,0.10) 0%, transparent 40%);
}
[data-theme="dark"] .stat-card-gold {
    background: linear-gradient(145deg, rgba(224,173,28,0.04) 0%, rgba(224,173,28,0.08) 40%, var(--bg-card) 80%);
    box-shadow: 0 2px 20px rgba(224,173,28,0.04), inset 0 1px 0 rgba(255,255,255,0.04);
}
[data-theme="dark"] .stat-card-gold .stat-card-bg {
    background: radial-gradient(ellipse at 20% 80%, rgba(224,173,28,0.12) 0%, transparent 50%),
                radial-gradient(ellipse at 80% 20%, rgba(224,173,28,0.06) 0%, transparent 40%);
    opacity: 0.08;
}

.stat-card-green {
    background: linear-gradient(145deg, rgba(26,127,55,0.04) 0%, rgba(26,127,55,0.10) 40%, var(--bg-card) 80%);
    box-shadow: 0 2px 20px rgba(26,127,55,0.06), inset 0 1px 0 rgba(255,255,255,0.1);
}
.stat-card-green .stat-card-bg {
    background: radial-gradient(ellipse at 20% 80%, rgba(26,127,55,0.20) 0%, transparent 50%),
                radial-gradient(ellipse at 80% 20%, rgba(61,214,140,0.10) 0%, transparent 40%);
}
[data-theme="dark"] .stat-card-green {
    background: linear-gradient(145deg, rgba(61,214,140,0.04) 0%, rgba(61,214,140,0.08) 40%, var(--bg-card) 80%);
    box-shadow: 0 2px 20px rgba(61,214,140,0.04), inset 0 1px 0 rgba(255,255,255,0.04);
}
[data-theme="dark"] .stat-card-green .stat-card-bg {
    background: radial-gradient(ellipse at 20% 80%, rgba(61,214,140,0.12) 0%, transparent 50%),
                radial-gradient(ellipse at 80% 20%, rgba(61,214,140,0.06) 0%, transparent 40%);
    opacity: 0.08;
}

.stat-card-red {
    background: linear-gradient(145deg, rgba(192,57,43,0.04) 0%, rgba(192,57,43,0.10) 40%, var(--bg-card) 80%);
    box-shadow: 0 2px 20px rgba(192,57,43,0.06), inset 0 1px 0 rgba(255,255,255,0.1);
}
.stat-card-red .stat-card-bg {
    background: radial-gradient(ellipse at 20% 80%, rgba(192,57,43,0.20) 0%, transparent 50%),
                radial-gradient(ellipse at 80% 20%, rgba(255,120,120,0.10) 0%, transparent 40%);
}
[data-theme="dark"] .stat-card-red {
    background: linear-gradient(145deg, rgba(255,120,120,0.04) 0%, rgba(255,120,120,0.08) 40%, var(--bg-card) 80%);
    box-shadow: 0 2px 20px rgba(255,120,120,0.04), inset 0 1px 0 rgba(255,255,255,0.04);
}
[data-theme="dark"] .stat-card-red .stat-card-bg {
    background: radial-gradient(ellipse at 20% 80%, rgba(255,120,120,0.12) 0%, transparent 50%),
                radial-gradient(ellipse at 80% 20%, rgba(255,120,120,0.06) 0%, transparent 40%);
    opacity: 0.08;
}
.stat-card-red .stat-card-icon { color: #C0392B; }
[data-theme="dark"] .stat-card-red .stat-card-icon { color: #FF7878; background: rgba(255,120,120,0.10); border-color: rgba(255,120,120,0.15); }
.stat-value.is-red { color: #C0392B; }
[data-theme="dark"] .stat-value.is-red { color: #FF7878; }
.stat-card-red .stat-eyebrow,
.stat-card-red .stat-sub { color: var(--text-secondary); }
[data-theme="dark"] .stat-card-red .stat-value,
[data-theme="dark"] .stat-card-red .stat-sub,
[data-theme="dark"] .stat-card-red .stat-eyebrow { color: #E8F6F7; }

.pnl-positive { color: var(--green) !important; }
.pnl-negative { color: var(--red) !important; }
.pnl-neutral { color: var(--text-tertiary) !important; }

.stat-card-top { position: relative; z-index: 1; display: flex; align-items: center; gap: 12px; }
.stat-card-icon {
    width: 48px; height: 48px; border-radius: 14px; display: flex;
    align-items: center; justify-content: center; flex-shrink: 0;
    background: rgba(255,255,255,0.45); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
    border: 1px solid rgba(255,255,255,0.5);
    box-shadow: 0 2px 8px rgba(0,0,0,0.04);
}
[data-theme="dark"] .stat-card-icon {
    background: rgba(255,255,255,0.06); border-color: rgba(255,255,255,0.08);
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}
.stat-card-teal .stat-card-icon { color: #00939E; }
.stat-card-gold .stat-card-icon { color: #A87B00; }
.stat-card-green .stat-card-icon { color: #1A7F37; }
[data-theme="dark"] .stat-card-teal .stat-card-icon { color: #3DD5E0; background: rgba(61, 213, 224, 0.10); border-color: rgba(61, 213, 224, 0.15); }
[data-theme="dark"] .stat-card-gold .stat-card-icon { color: #F0C030; background: rgba(240, 192, 48, 0.10); border-color: rgba(240, 192, 48, 0.15); }
[data-theme="dark"] .stat-card-green .stat-card-icon { color: #50E09A; background: rgba(80, 224, 154, 0.10); border-color: rgba(80, 224, 154, 0.15); }
.stat-card-icon svg { width: 24px; height: 24px; }

.stat-eyebrow { font-size: 0.72rem; font-weight: 600; color: var(--text-tertiary); text-transform: uppercase; letter-spacing: 0.06em; }
[data-theme="dark"] .stat-card-teal .stat-eyebrow,
[data-theme="dark"] .stat-card-gold .stat-eyebrow,
[data-theme="dark"] .stat-card-green .stat-eyebrow { color: #9CD3D8; }

.stat-value { font-family: 'DM Serif Display', serif; font-size: 2.2rem; font-weight: 400; letter-spacing: -0.02em; line-height: 1.15; margin: 0.35rem 0; position: relative; z-index: 1; }
.stat-value.is-teal { color: #00939E; }
[data-theme="dark"] .stat-value.is-teal { color: #3DD5E0; }
.stat-value.is-gold { color: #A87B00; }
[data-theme="dark"] .stat-value.is-gold { color: #F0C030; }
[data-theme="dark"] .stat-card-teal .stat-value,
[data-theme="dark"] .stat-card-gold .stat-value,
[data-theme="dark"] .stat-card-green .stat-value { color: #E8F6F7; }

.stat-card-bottom { position: relative; z-index: 1; display: flex; flex-direction: column; gap: 1px; }
.stat-sub { font-size: 0.72rem; color: var(--text-tertiary); line-height: 1.4; }
[data-theme="dark"] .stat-card-teal .stat-sub,
[data-theme="dark"] .stat-card-gold .stat-sub,
[data-theme="dark"] .stat-card-green .stat-sub { color: #7EC8CF; }

/* ============================================================
   ZEKAT BANNER & CANLI EFEKTLER
============================================================ */
.zekat-banner { position: relative; overflow: hidden; background: linear-gradient(145deg, rgba(26,127,55,0.04) 0%, rgba(26,127,55,0.10) 40%, var(--bg-card) 80%); border: none; border-radius: var(--radius-lg); padding: 1.5rem 2rem; margin-bottom: 1.5rem; display: flex; flex-direction: column; gap: 1rem; transition: all 0.25s ease; backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); box-shadow: 0 2px 20px rgba(26,127,55,0.06), inset 0 1px 0 rgba(255,255,255,0.1); }
.zekat-banner::before { content: ''; position: absolute; inset: 0; border-radius: inherit; padding: 1px; background: linear-gradient(145deg, rgba(255,255,255,0.3), rgba(255,255,255,0.05)); -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); -webkit-mask-composite: xor; mask-composite: exclude; pointer-events: none; }
.zekat-banner::after { content: ''; position: absolute; top: -80%; left: -50%; width: 200%; height: 200%; background: radial-gradient(circle at 30% 25%, rgba(255,255,255,0.10) 0%, transparent 50%); pointer-events: none; }
[data-theme="dark"] .zekat-banner { background: linear-gradient(145deg, rgba(61,214,140,0.03) 0%, rgba(61,214,140,0.07) 40%, var(--bg-card) 80%); box-shadow: 0 2px 20px rgba(61,214,140,0.03), inset 0 1px 0 rgba(255,255,255,0.03); }
[data-theme="dark"] .zekat-banner::before { background: linear-gradient(145deg, rgba(255,255,255,0.06), rgba(255,255,255,0.02)); }
[data-theme="dark"] .zekat-banner::after { background: radial-gradient(circle at 30% 25%, rgba(255,255,255,0.04) 0%, transparent 50%); }

.zekat-banner:not(.is-inactive) {
    animation: zekat-pulse 3s ease-in-out infinite;
}
.zekat-banner:not(.is-inactive)::after {
    animation: zekat-shimmer 5s ease-in-out infinite;
}

.zekat-banner.is-inactive { background: var(--bg-card); animation: none; }
.zekat-banner.is-inactive::after { opacity: 0; }
.zekat-banner.is-inactive::before { display: none; }

.zekat-banner-top { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; position: relative; z-index: 1;}
.zekat-banner-left { display: flex; flex-direction: column; gap: 4px; }
.zekat-banner-label { font-size: 0.76rem; font-weight: 600; color: var(--green); text-transform: uppercase; letter-spacing: 0.07em; }
.zekat-banner.is-inactive .zekat-banner-label { color: var(--text-tertiary); }

.zekat-banner-amount { font-family: 'DM Serif Display', serif; font-size: 2.5rem; font-weight: 400; letter-spacing: -0.02em; color: var(--green); line-height: 1; }
.zekat-banner.is-inactive .zekat-banner-amount { color: var(--text-secondary); }

.zekat-split-info { display: flex; gap: 12px; margin-top: 6px; flex-wrap: wrap; }
.split-tag { font-size: 0.75rem; color: var(--text-secondary); background: rgba(0,0,0,0.03); padding: 3px 12px; border-radius: 8px; border: 1px solid rgba(0,0,0,0.05); font-weight: 500; backdrop-filter: blur(4px); }
[data-theme="dark"] .split-tag { background: rgba(255,255,255,0.05); border-color: rgba(255,255,255,0.08); color: var(--text-secondary); }
.split-tag strong { font-weight: 700; color: var(--text-primary); }

.zekat-badge-wrap { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; position: relative; z-index: 1; }
.zekat-badge { padding: 6px 16px; border-radius: 100px; font-size: 0.74rem; font-weight: 600; background: rgba(26, 127, 55, 0.1); color: var(--green); border: 1px solid rgba(26, 127, 55, 0.2); white-space: nowrap; transition: var(--transition); backdrop-filter: blur(4px); }
[data-theme="dark"] .zekat-badge { background: rgba(61, 214, 140, 0.10); border-color: rgba(61, 214, 140, 0.2); }
.zekat-badge.is-inactive { background: transparent; color: var(--text-tertiary); border-color: var(--border-strong); }

.btn-pay-zakat { padding: 6px 18px; border-radius: 100px; font-size: 0.74rem; font-weight: 600; background: var(--green); color: #fff; border: none; cursor: pointer; transition: var(--transition); display:none; box-shadow: 0 3px 10px rgba(26, 127, 55, 0.2); }
.btn-pay-zakat:hover { opacity: 0.92; transform: translateY(-2px); box-shadow: 0 6px 20px rgba(26, 127, 55, 0.25); }
.btn-pay-zakat:active { transform: translateY(0) scale(0.97); }

.zekat-progress-area { width: 100%; display: flex; flex-direction: column; gap: 8px; border-top: 1px solid var(--border); padding-top: 1.2rem; position: relative; z-index: 1;}
.progress-header { display: flex; justify-content: space-between; font-size: 0.8rem; font-weight: 600; color: var(--text-secondary); }
.progress-track { width: 100%; height: 10px; background: var(--progress-bg); border-radius: 10px; overflow: hidden; box-shadow: inset 0 1px 3px rgba(0,0,0,0.05); }
.progress-fill { height: 100%; background: var(--progress-bar); border-radius: 10px; transition: width 1s cubic-bezier(0.34, 1.56, 0.64, 1); width: 0%; }

.progress-fill:not(.teal) {
    background-image: linear-gradient(45deg, rgba(255,255,255,0.15) 25%, transparent 25%, transparent 50%, rgba(255,255,255,0.15) 50%, rgba(255,255,255,0.15) 75%, transparent 75%, transparent);
    background-size: 40px 40px;
    background-color: var(--green);
    animation: move-stripes 1.2s linear infinite;
}
.progress-fill.teal { background: var(--teal); animation: none; background-image: none; }

.hijri-info-box { display: flex; align-items: center; justify-content: space-between; background: var(--bg-card); padding: 14px 18px; border-radius: var(--radius-md); border: 1px solid var(--border); margin-top: 8px; flex-wrap: wrap; gap:10px; transition: var(--transition-linear); }
.hijri-left { display: flex; align-items: center; gap: 14px; }
.hijri-icon { width: 36px; height: 36px; border-radius: 10px; background: var(--teal-light); color: var(--teal); display: flex; align-items: center; justify-content: center; transition: var(--transition); }
.hijri-icon svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; }
.hijri-text-col { display: flex; flex-direction: column; }
.hijri-label { font-size: 0.7rem; font-weight: 600; color: var(--text-tertiary); text-transform: uppercase; letter-spacing: 0.06em; }
.hijri-date { font-size: 0.88rem; font-weight: 600; color: var(--text-primary); }
.hijri-sub { font-size: 0.78rem; color: var(--text-secondary); }
.hijri-link { font-size: 0.8rem; text-decoration: none; cursor: pointer; color: var(--text-tertiary); transition: color 0.2s; font-weight: 600; border-bottom: 1.5px dotted transparent; padding-bottom: 1px; }
.hijri-link:hover { color: var(--teal); border-bottom-color: var(--teal); }