/* ===================================================================
   maddahs.css
   فایل کامل و مستقل برای maddahs.html — شامل قوانین پایه،
   هدر کامل (نوار بالا، لوگو، منو، جستجو، تم، همبرگری)،
   استایل‌های اختصاصی همین صفحه، و فوتر کامل (شامل نوار پایین موبایل).
   =================================================================== */

*{margin:0;padding:0;box-sizing:border-box}

html{scroll-behavior:smooth}


:root{
  --ink:#0b0c10;--ink2:#111318;--card:#161820;--card2:#1c1f2a;
  --border:rgba(255,255,255,0.06);--border2:rgba(255,255,255,0.1);
  --ruby:#c0392b;--ruby2:#e74c3c;--ruby-glow:rgba(192,57,43,0.25);
  --teal:#1a8c8c;--teal2:#22b8b8;
  --silver:#b0bec5;--silver2:#cfd8dc;--muted:#5a6070;--muted2:#7a8090;
  --white:#f0f2f5;
}


body{background:var(--ink);color:var(--white);font-family:'Vazirmatn',sans-serif;overflow-x:hidden;min-height:100vh;}

/* LIGHT */
body.light-theme{--ink:#f0ede8;--ink2:#e6e2db;--card:#ffffff;--card2:#f5f2ed;--border:rgba(0,0,0,0.10);--border2:rgba(0,0,0,0.18);--silver:#374151;--silver2:#111827;--muted:#6b7280;--muted2:#4b5563;--white:#0f172a;}

/* GRAIN + GLOW */
.grain-overlay{position:fixed;inset:0;z-index:1;pointer-events:none;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='1'/%3E%3C/svg%3E");opacity:0.025;mix-blend-mode:overlay;}
.radial-glow{position:fixed;top:-200px;left:50%;transform:translateX(-50%);width:900px;height:500px;background:radial-gradient(ellipse,rgba(192,57,43,0.12) 0%,transparent 65%);z-index:1;pointer-events:none;animation:glowPulse 8s ease-in-out infinite;}
@keyframes glowPulse{0%,100%{opacity:0.7;transform:translateX(-50%) scale(1)}50%{opacity:1;transform:translateX(-50%) scale(1.1)}}
body.light-theme .radial-glow{background:radial-gradient(ellipse,rgba(192,57,43,0.07) 0%,transparent 65%);}
body.light-theme .grain-overlay{opacity:0.015;mix-blend-mode:multiply;}
.search-input:not(:placeholder-shown)~.search-clear{display:block;}
.nav-tabs .live-nav-link{display:flex;align-items:center;gap:0.45rem;color:var(--muted2);}
.nav-tabs .live-nav-link:hover{color:var(--white);background:rgba(255,255,255,0.07);}
.live-nav-dot{width:8px;height:8px;border-radius:50%;background:#e74c3c;flex-shrink:0;animation:navLivePulse 1.6s ease-in-out infinite;}
@keyframes navLivePulse{0%{box-shadow:0 0 0 0 rgba(231,76,60,0.6)}70%{box-shadow:0 0 0 6px rgba(231,76,60,0)}100%{box-shadow:0 0 0 0 rgba(231,76,60,0)}}
body.light-theme .nav-tabs a:hover{color:#0f172a;background:rgba(0,0,0,0.06);}
body.light-theme .nav-tabs .live-nav-link{color:#374151;}
body.light-theme .nav-tabs .live-nav-link:hover{color:#0f172a;}
.btn-search-mobile:hover,.btn-search-mobile.active{border-color:var(--ruby);}
.btn-theme-toggle:hover .theme-icon{transform:rotate(20deg) scale(1.2);}
body.light-theme .btn-theme-toggle:hover{border-color:var(--ruby);color:var(--ruby);}

/* ═══ PAGE ═══ */
.page-wrap{position:relative;z-index:2;}

.page-header{padding:3rem 2rem 2rem;text-align:center;border-bottom:1px solid var(--border);background:linear-gradient(to bottom,rgba(192,57,43,0.05),transparent);}
.page-eyebrow{font-size:0.72rem;letter-spacing:0.22em;text-transform:uppercase;color:var(--ruby);font-weight:600;display:block;margin-bottom:0.6rem;}
.page-title{font-family:'Scheherazade New',serif;font-size:clamp(1.8rem,4vw,2.8rem);font-weight:700;background:linear-gradient(135deg,#fff 30%,rgba(192,57,43,0.8));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;}
body.light-theme .page-title{background:linear-gradient(135deg,#0f172a 30%,var(--ruby));-webkit-background-clip:text;background-clip:text;}
.page-count{font-size:0.82rem;color:var(--muted2);margin-top:0.5rem;}

/* ═══ SEARCH BAR زیر هدر ═══ */
.top-search-bar{
  padding:1.2rem 2rem;
  background:var(--ink2);
  border-bottom:1px solid var(--border);
  position:sticky;top:68px;z-index:100;
}
body.light-theme .top-search-bar{background:var(--card2);}
.top-search-inner{
  max-width:560px;margin:0 auto;
  display:flex;align-items:center;gap:0.7rem;
  background:var(--card);border:1px solid var(--border2);
  border-radius:14px;padding:0.6rem 1.1rem;
  transition:all 0.3s;
}
.top-search-inner:focus-within{border-color:var(--ruby);box-shadow:0 0 0 3px var(--ruby-glow);}
body.light-theme .top-search-inner{background:#fff;border-color:rgba(0,0,0,0.15);}
.top-search-inner svg{width:18px;height:18px;color:var(--muted2);flex-shrink:0;transition:color 0.2s;}
.top-search-inner:focus-within svg{color:var(--ruby);}
.top-search-input{background:none;border:none;outline:none;color:var(--white);font-family:'Vazirmatn',sans-serif;font-size:0.93rem;width:100%;}
.top-search-input::placeholder{color:var(--muted);}
body.light-theme .top-search-input{color:#0f172a;}
.top-search-clear{background:none;border:none;color:var(--muted);font-size:0.8rem;cursor:pointer;padding:0;flex-shrink:0;display:none;}
.top-search-input:not(:placeholder-shown)~.top-search-clear{display:block;}
.top-search-clear:hover{color:var(--ruby);}

/* ═══ RECITERS GRID ═══ */
.list-section{max-width:1200px;margin:0 auto;padding:2.5rem 2rem;}

.reciters-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(130px,1fr));
  gap:2rem 1.5rem;
}

/* ── کارت مداح ── */
.reciter-card{
  display:flex;flex-direction:column;align-items:center;gap:0.75rem;
  text-decoration:none;color:inherit;
  cursor:pointer;
  animation:fadeUp 0.4s ease both;
}
@keyframes fadeUp{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}

/* دایره عکس */
.reciter-avatar{
  position:relative;
  width:110px;height:110px;
  border-radius:50%;
  flex-shrink:0;
}

/* حلقه انیمیشن‌دار */
.reciter-avatar::before{
  content:'';
  position:absolute;inset:-3px;
  border-radius:50%;
  background:conic-gradient(var(--ruby) 0deg, transparent 120deg, transparent 360deg);
  opacity:0;
  transition:opacity 0.35s;
  animation:spin 3s linear infinite;
}
@keyframes spin{to{transform:rotate(360deg)}}
.reciter-card:hover .reciter-avatar::before{opacity:1;}

/* پوشش داخلی برای جدا کردن از حلقه */
.reciter-avatar::after{
  content:'';
  position:absolute;inset:2px;
  border-radius:50%;
  background:var(--ink);
  transition:background 0.3s;
}
body.light-theme .reciter-avatar::after{background:var(--ink);}

.avatar-img{
  position:absolute;inset:5px;
  border-radius:50%;
  overflow:hidden;
  z-index:1;
  background:linear-gradient(135deg,#1a0a0a,#2a0f0f);
  transition:transform 0.35s cubic-bezier(0.34,1.3,0.64,1);
}
.reciter-card:hover .avatar-img{transform:scale(1.06);}

.avatar-img img{width:100%;height:100%;object-fit:cover;display:block;}

/* پلیس‌هولدر بدون عکس */
.avatar-placeholder{
  width:100%;height:100%;
  display:flex;align-items:center;justify-content:center;
  font-size:2rem;font-weight:900;
  color:rgba(255,255,255,0.7);
  font-family:'Scheherazade New',serif;
}

/* تعداد آثار - حباب کوچک */
.avatar-count{
  position:absolute;bottom:2px;left:2px;z-index:2;
  background:var(--ruby);color:#fff;
  font-size:0.6rem;font-weight:700;
  border-radius:20px;padding:0.15rem 0.45rem;
  border:2px solid var(--ink);
  white-space:nowrap;
  opacity:0;transform:scale(0.7);
  transition:all 0.25s cubic-bezier(0.34,1.56,0.64,1);
}
.reciter-card:hover .avatar-count{opacity:1;transform:scale(1);}

/* اسم */
.reciter-name{
  font-size:0.88rem;font-weight:700;
  text-align:center;
  color:var(--white);
  line-height:1.35;
  transition:color 0.2s;
}
.reciter-card:hover .reciter-name{color:#fff;}
body.light-theme .reciter-name{color:#0f172a;}

.reciter-sub{
  font-size:0.72rem;color:var(--muted2);
  text-align:center;margin-top:-0.4rem;
}
body.light-theme .reciter-sub{color:#6b7280;}

/* ═══ ALPHABET FILTER ═══ */
.alpha-filter{
  display:flex;gap:0.3rem;flex-wrap:wrap;justify-content:center;
  padding:1rem 2rem 0;
  max-width:1200px;margin:0 auto;
}
.alpha-btn{
  width:32px;height:32px;border-radius:8px;
  border:1px solid var(--border2);background:none;
  color:var(--muted2);font-family:'Vazirmatn',sans-serif;
  font-size:0.78rem;font-weight:600;cursor:pointer;
  transition:all 0.18s;display:flex;align-items:center;justify-content:center;
}
.alpha-btn:hover{border-color:var(--ruby);color:var(--white);}
.alpha-btn.active{background:var(--ruby);border-color:var(--ruby);color:#fff;box-shadow:0 2px 10px var(--ruby-glow);}
body.light-theme .alpha-btn{border-color:rgba(0,0,0,0.15);color:#4b5563;}
body.light-theme .alpha-btn:hover{color:#0f172a;}

/* EMPTY */
.empty-state{text-align:center;padding:4rem 2rem;grid-column:1/-1;}
.empty-state .empty-icon{font-size:3rem;margin-bottom:1rem;opacity:0.5;}
.empty-state p{color:var(--muted2);}

/* RESPONSIVE */
@media(max-width:900px){
  body{padding-bottom:calc(64px + env(safe-area-inset-bottom));}
  .reciters-grid{grid-template-columns:repeat(auto-fill,minmax(110px,1fr));gap:1.6rem 1rem;}
  .reciter-avatar{width:95px;height:95px;}
  .page-header{padding:2rem 1.2rem 1.5rem;}
  .list-section{padding:1.5rem 1rem;}
  .top-search-bar{padding:0.9rem 1rem;}}
@media(max-width:600px){
  .theme-label{display:none !important;}
  nav.top-nav{padding:0 1rem;gap:0.5rem;}
  .btn-theme-toggle{padding:0.4rem 0.65rem;}
  .reciters-grid{grid-template-columns:repeat(auto-fill,minmax(90px,1fr));gap:1.4rem 0.75rem;}
  .reciter-avatar{width:82px;height:82px;}
  .reciter-name{font-size:0.8rem;}
  .alpha-filter{padding:0.75rem 1rem 0;}
  .alpha-btn{width:28px;height:28px;font-size:0.72rem;}}
/* ─── NAV ─── */
nav.top-nav {
  position: sticky;
  top: 0;
  z-index: 200;
  height: 68px;
  background: rgba(11,12,16,0.88);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-bottom: 1px solid var(--border2);
  display: flex !important;
  align-items: center;
  justify-content: space-between;
  padding: 0 2rem;
  gap: 1rem;
}

.nav-logo {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  text-decoration: none;
}
.logo-icon {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--ruby), #7b1a10);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Scheherazade New', serif;
  font-size: 1.1rem;
  color: #fff;
  box-shadow: 0 0 16px var(--ruby-glow);
  flex-shrink: 0;
}
.logo-text {
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--white);
  line-height: 1.2;
}
.logo-sub {
  font-size: 0.65rem;
  color: var(--muted2);
  font-weight: 400;
  display: block;
}

.nav-tabs {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  list-style: none;
  background: rgba(255,255,255,0.04);
  border: 1px solid var(--border);
  border-radius: 50px;
  padding: 5px;
}
.nav-tabs a {
  display: block;
  padding: 0.38rem 1.1rem;
  border-radius: 40px;
  color: var(--muted2);
  text-decoration: none;
  font-size: 0.88rem;
  font-weight: 500;
  transition: all 0.25s;
  white-space: nowrap;
}
.nav-tabs a:hover {
  color: var(--white);
  background: rgba(255,255,255,0.07);
}
.nav-tabs a.active {
  background: var(--ruby);
  color: #fff;
  box-shadow: 0 2px 12px var(--ruby-glow);
}

.nav-auth { display:flex; align-items:center; gap:0.7rem; position:relative; }

.btn-theme-toggle {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.42rem 1.1rem;
  border: 1px solid var(--border2);
  background: rgba(255,255,255,0.06);
  color: var(--silver2);
  border-radius: 50px;
  font-family: 'Vazirmatn', sans-serif;
  font-size: 0.85rem;
  cursor: pointer;
  font-weight: 600;
  transition: all 0.3s cubic-bezier(0.34,1.56,0.64,1);
  white-space: nowrap;
  backdrop-filter: blur(8px);
  position: relative;
  overflow: hidden;
}
.btn-theme-toggle::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(192,57,43,0.1), transparent);
  opacity: 0;
  transition: opacity 0.3s;
}
.btn-theme-toggle:hover {
  border-color: var(--ruby);
  color: var(--white);
  transform: translateY(-1px);
  box-shadow: 0 4px 16px var(--ruby-glow);
}
.btn-theme-toggle:hover::before { opacity: 1; }
.btn-theme-toggle:active { transform: scale(0.97); }

.theme-icon {
  font-size: 1rem;
  transition: transform 0.5s ease;
  display: inline-block;
}
.btn-theme-toggle:hover .theme-icon {
  transform: rotate(20deg) scale(1.2);
}
.theme-label { font-size: 0.82rem; }

.btn-search-mobile {
  display: none;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 1px solid var(--border2);
  background: rgba(255,255,255,0.06);
  cursor: pointer;
  transition: all 0.2s;
  flex-shrink: 0;
}
.btn-search-mobile svg {
  width: 17px;
  height: 17px;
  color: var(--silver2);
  transition: color 0.2s;
}
.btn-search-mobile:hover { border-color: var(--ruby); background: rgba(192,57,43,0.1); }
.btn-search-mobile:hover svg { color: var(--ruby); }
.btn-search-mobile.active { border-color: var(--ruby); background: rgba(192,57,43,0.12); }
.btn-search-mobile.active svg { color: var(--ruby); }

.nav-search {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  background: rgba(255,255,255,0.06);
  border: 1px solid var(--border2);
  border-radius: 50px;
  padding: 0.35rem 0.9rem;
  transition: all 0.3s ease;
  width: 240px;
  position: relative;
}
.nav-search:focus-within {
  border-color: var(--ruby);
  background: rgba(255,255,255,0.09);
  box-shadow: 0 0 0 3px var(--ruby-glow);
  width: 290px;
}
.search-icon-inline {
  width: 16px;
  height: 16px;
  color: var(--muted2);
  flex-shrink: 0;
  transition: color 0.2s;
}
.nav-search:focus-within .search-icon-inline { color: var(--ruby); }

.search-input {
  background: none;
  border: none;
  outline: none;
  color: var(--white);
  font-family: 'Vazirmatn', sans-serif;
  font-size: 0.83rem;
  width: 100%;
  min-width: 0;
}
.search-input::placeholder { color: var(--muted); }

.search-clear {
  background: none;
  border: none;
  color: var(--muted);
  font-size: 0.75rem;
  cursor: pointer;
  padding: 0 2px;
  line-height: 1;
  display: none;
  transition: color 0.2s;
  flex-shrink: 0;
}
.search-clear:hover { color: var(--ruby); }
.search-input:not(:placeholder-shown) ~ .search-clear { display: block; }

.mobile-search-panel {
  display: none;
  position: absolute;
  top: 68px;
  left: 0;
  right: 0;
  padding: 0.75rem 1rem;
  background: rgba(11,12,16,0.97);
  backdrop-filter: blur(20px);
  border-bottom: 1px solid var(--border2);
  z-index: 199;
  animation: slideDown 0.22s ease;
}
.mobile-search-panel.open { display: block; }
@keyframes slideDown {
  from { opacity:0; transform:translateY(-8px) }
  to   { opacity:1; transform:translateY(0) }
}
.mobile-search-inner {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  background: rgba(255,255,255,0.06);
  border: 1px solid var(--border2);
  border-radius: 50px;
  padding: 0.5rem 1rem;
}
.mobile-search-inner:focus-within {
  border-color: var(--ruby);
  box-shadow: 0 0 0 3px var(--ruby-glow);
}
.mobile-search-inner svg {
  width: 16px; height: 16px;
  color: var(--muted2);
  flex-shrink: 0;
}
.mobile-search-input {
  background: none;
  border: none;
  outline: none;
  color: var(--white);
  font-family: 'Vazirmatn', sans-serif;
  font-size: 0.9rem;
  width: 100%;
}
.mobile-search-input::placeholder { color: var(--muted); }

.hamburger { display:none; flex-direction:column; gap:5px; cursor:pointer; padding:4px; border:none; background:none; }
.hamburger span { display:block; width:24px; height:2px; background:var(--silver2); border-radius:2px; transition:0.3s; }

@keyframes liveDot{0%,100%{opacity:1;transform:scale(1)}50%{opacity:0.5;transform:scale(0.7)}}
@keyframes dropIn{from{opacity:0;transform:translateY(-8px) scale(0.97)}to{opacity:1;transform:translateY(0) scale(1)}}
.srp-popular-tag{padding:0.25rem 0.7rem;border-radius:20px;background:rgba(255,255,255,0.05);border:1px solid var(--border2);color:var(--muted2);font-size:0.74rem;cursor:pointer;transition:all 0.18s;font-family:'Vazirmatn',sans-serif;}
.srp-popular-tag:hover{border-color:var(--ruby);color:var(--white);background:rgba(192,57,43,0.1);}

/* تم روشن */
body.light-theme nav.top-nav { background: rgba(240,237,232,0.95); }
body.light-theme .logo-text { color: #0f172a; }
body.light-theme .logo-sub { color: #4b5563; }
body.light-theme .nav-tabs a { color: #374151; }
body.light-theme .nav-tabs a:hover { color: #0f172a; background: rgba(0,0,0,0.06); }
body.light-theme .nav-tabs { background: rgba(0,0,0,0.05); border-color: rgba(0,0,0,0.1); }
body.light-theme .btn-theme-toggle { background: rgba(0,0,0,0.04); border-color: rgba(0,0,0,0.15); color: #2d3748; }
body.light-theme .btn-theme-toggle:hover { border-color: var(--ruby); color: var(--ruby); background: rgba(192,57,43,0.07); }
body.light-theme .nav-search { background: rgba(0,0,0,0.04); border-color: rgba(0,0,0,0.15); }
body.light-theme .nav-search:focus-within { background: #fff; }
body.light-theme .search-input { color: #0f172a; }
body.light-theme .mobile-search-panel { background: rgba(240,237,232,0.98); border-color: rgba(0,0,0,0.12); }
body.light-theme .mobile-search-inner { background: rgba(0,0,0,0.05); border-color: rgba(0,0,0,0.15); }
body.light-theme .mobile-search-input { color: #0f172a; }
body.light-theme .srp-popular-tag{background:rgba(0,0,0,0.04);border-color:rgba(0,0,0,0.1);color:#4b5563;}
body.light-theme .srp-popular-tag:hover{color:#0f172a;border-color:var(--ruby);}
body.light-theme #searchPanel{box-shadow:0 20px 60px rgba(0,0,0,0.12);}

/* ریسپانسیو */
@media(max-width:900px){
  .nav-tabs { display:none !important; }
  .nav-search { display:none !important; }
  .btn-search-mobile { display:flex !important; }
  .theme-label { display:inline !important; font-size:0.82rem; }
}
@media(max-width:600px){
  nav.top-nav { padding: 0 1rem; gap:0.5rem; }
  .logo-text { font-size:0.9rem; }
  .logo-sub { font-size:0.6rem; }
  .theme-label { display:none !important; }
  .btn-theme-toggle { padding: 0.4rem 0.65rem; }
  .theme-icon { font-size:1.1rem; }
}
/* ─── FOOTER ─── */
footer {
  background: #070809;
  border-top: 1px solid var(--border);
  padding: 2rem 2rem;
  text-align: center;
}
.footer-logo { font-family:'Scheherazade New',serif; font-size:1.3rem; color:var(--ruby); margin-bottom:0.4rem; }
.footer-copy  { font-size:0.78rem; color:var(--muted); }

body.light-theme footer { background: #e6e2db; border-color: rgba(0,0,0,0.1); }
body.light-theme .footer-logo { color: var(--ruby); }
body.light-theme .footer-copy { color: #4b5563; }
.bottom-nav {
  display: none;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 300;
  height: 64px;
  background: rgba(11,12,16,0.96);
  backdrop-filter: blur(20px);
  border-top: 1px solid var(--border2);
  padding: 0 0.5rem;
}

.bottom-nav-inner {
  display: flex;
  align-items: center;
  justify-content: space-around;
  height: 100%;
}

.bnav-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  text-decoration: none;
  color: var(--muted2);
  padding: 6px 10px;
  border-radius: 12px;
  transition: all 0.2s;
  min-width: 52px;
  flex: 1;
}

.bnav-item:hover,
.bnav-item.active {
  color: var(--ruby2);
  background: rgba(192,57,43,0.1);
}

.bnav-icon {
  font-size: 1.25rem;
  line-height: 1;
}

.bnav-label {
  font-size: 0.62rem;
  font-weight: 600;
  white-space: nowrap;
}

@media(max-width:900px){
  .bottom-nav {
    display:block;
  }

  body{
    padding-bottom:64px;
  }
}