/* === File: app/globals.css === */
:root,
[data-theme="light"] {
  /* ==========================================================================
     Design Tokens: Daylight Calm (Aydınlık Mod)
     ========================================================================== */
  
  /* Surface Elevation Hierarchy */
  --surface-0: #f8fafc;          /* Canvas Base (Slate-50) */
  --surface-1: #ffffff;          /* Primary Cards & Panels */
  --surface-2: #f1f5f9;          /* Inner Cells, Inputs, Secondary Pills */
  --surface-3: #e2e8f0;          /* Hover Surfaces, Active Segments */
  --surface-float: #ffffff;      /* Modals, Drawers, Floating Popovers */
  
  /* Backward-compatible Base Aliases */
  --color-bg: var(--surface-0);
  --color-surface: var(--surface-1);
  --color-surface-hover: var(--surface-2);
  --color-surface-glass: rgba(255, 255, 255, 0.94);
  
  /* Convenient Global & Legacy Aliases */
  --surface: var(--surface-1);
  --surface-hover: var(--surface-2);
  --border-color: var(--border-subtle);
  --accent: var(--color-primary);
  --text-primary: var(--color-text-main);
  --text-secondary: var(--color-text-muted);
  --text-muted: var(--color-text-subtle);
  
  /* Borders */
  --border-subtle: #e2e8f0;
  --border-strong: #cbd5e1;
  --color-border: var(--border-subtle);
  
  /* Islamic Emerald Palette (Light) */
  --color-primary: #065f46;         /* Rich Emerald */
  --color-primary-bg: #065f46;      /* Solid Brand Header */
  --color-primary-text: #064e3b;    /* High-contrast Headings */
  --color-primary-light: #047857;   /* Emerald 700 */
  --color-primary-accent: #059669;  /* Emerald 600 */
  
  /* Warm Gold / Amber Accent (WCAG AA Compliant on White) */
  --color-gold: #b45309;            /* Amber-700 (4.8:1 contrast on white) */
  --color-gold-light: #fef3c7;      /* Champagne Pill Background */
  --color-gold-text: #78350f;       /* Deep Gold Pill Text */
  
  /* Typography Colors (WCAG 2.2 AAA & AA Verified) */
  --color-text-main: #0f172a;       /* Slate-900 (15.8:1 - Ultra Readable) */
  --color-text-muted: #334155;      /* Slate-700 (7.2:1 - WCAG AAA Compliant) */
  --color-text-subtle: #64748b;     /* Slate-500 (4.6:1 - WCAG AA Compliant) */
  --color-text-light: #ffffff;
  
  /* Typography Families */
  --font-serif: var(--font-serif), Georgia, Cambria, serif;
  --font-sans: var(--font-sans), -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-arabic: var(--font-arabic), 'Traditional Arabic', serif;

  /* Spacing & Radii */
  --spacing-xs: 0.5rem;
  --spacing-sm: 1rem;
  --spacing-md: 1.5rem;
  --spacing-lg: 2.5rem;
  --spacing-xl: 4rem;
  
  --radius-sm: 8px;
  --radius-md: 16px;
  --radius-lg: 24px;
  
  /* Shadows (Depth for Light Mode) */
  --shadow-sm: 0 1px 3px 0 rgba(0, 0, 0, 0.05), 0 1px 2px -1px rgba(0, 0, 0, 0.05);
  --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.07), 0 2px 4px -2px rgba(0, 0, 0, 0.07);
  --shadow-hover: 0 10px 15px -3px rgba(0, 0, 0, 0.08), 0 4px 6px -4px rgba(0, 0, 0, 0.08);
}

[data-theme="dark"] {
  /* ==========================================================================
     Design Tokens: Obsidian Serene Emerald (Gece Modu)
     Optically Tuned for Low-Light & Scotopic Vision (No Eye Fatigue)
     ========================================================================== */
  
  /* Luminous Elevation Hierarchy (Yüzey Aydınlık Seviyeleri) */
  --surface-0: #06110c;          /* Level 0: Deep Night Obsidian Base Canvas */
  --surface-1: #0c1c15;          /* Level 1: Primary Elevated Cards */
  --surface-2: #132a20;          /* Level 2: Prayer Cells, Inputs, Pill Tracks */
  --surface-3: #1a392b;          /* Level 3: Hover Surfaces, Active Segments */
  --surface-float: #163226;      /* Floating Modals, Drawers, Popovers */
  
  /* Backward-compatible Base Aliases */
  --color-bg: var(--surface-0);
  --color-surface: var(--surface-1);
  --color-surface-hover: var(--surface-2);
  --color-surface-glass: rgba(12, 28, 21, 0.90);
  
  /* Convenient Global & Legacy Aliases */
  --surface: var(--surface-1);
  --surface-hover: var(--surface-2);
  --border-color: var(--border-subtle);
  --accent: var(--color-primary);
  --text-primary: var(--color-text-main);
  --text-secondary: var(--color-text-muted);
  --text-muted: var(--color-text-subtle);
  
  /* Ambient Rim Lighting (Instead of Invisible Dark Shadows) */
  --border-subtle: rgba(255, 255, 255, 0.09);
  --border-strong: rgba(52, 211, 153, 0.28);
  --color-border: var(--border-subtle);
  
  /* Gentle Sage Palette (Eliminates Chromatic Aberration & Retina Halo) */
  --color-primary: #10b981;         /* Refined Emerald Accent */
  --color-primary-bg: #0c1c15;      /* Dark Header Surface */
  --color-primary-text: #a7f3d0;    /* Gentle Serene Sage (No harsh eye glare) */
  --color-primary-light: #059669;
  --color-primary-accent: #34d399;
  
  /* Warm Honey Amber Accent (Gentle Glow in Low Light) */
  --color-gold: #fbbf24;            /* Warm Amber Gold */
  --color-gold-light: rgba(251, 191, 36, 0.14);
  --color-gold-text: #fde68a;
  
  /* Typography Colors (Tuned for Dark Backgrounds) */
  --color-text-main: #ecfdf5;       /* Soft Ivory White (14.2:1 - Glare-Free) */
  --color-text-muted: #94a89f;      /* Serene Sage Gray (6.4:1 - WCAG AA) */
  --color-text-subtle: #6ee7b7;     /* Mint Micro-Text (4.9:1 - High Legibility) */
  --color-text-light: #ffffff;
  
  /* Ambient Rim Shadows (Physical Depth on Dark Displays) */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(255, 255, 255, 0.05);
  --shadow-md: 0 4px 14px rgba(0, 0, 0, 0.65), 0 0 0 1px rgba(255, 255, 255, 0.07);
  --shadow-hover: 0 10px 24px rgba(0, 0, 0, 0.75), 0 0 0 1px rgba(52, 211, 153, 0.25);
}

[data-theme="dark"] .glass-panel {
  border-color: var(--border-subtle);
  background: var(--surface-1);
}

/* ==========================================================================
   Optical Typography Adjustments for Dark Mode (Irradiation Fix)
   White text on black background optically appears 15% bolder to human eye.
   ========================================================================== */
[data-theme="dark"] body {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  letter-spacing: 0.012em;
}

[data-theme="dark"] h1,
[data-theme="dark"] h2,
[data-theme="dark"] h3 {
  font-weight: 600;
}

[data-theme="dark"] .arabic-text {
  text-shadow: 0 0 1px rgba(167, 243, 208, 0.2);
}

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

html,
body {
  max-width: 100%;
  overflow-x: hidden;
  position: relative;
}

body {
  font-family: var(--font-sans);
  background-color: var(--color-bg);
  color: var(--color-text-main);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  transition: background-color 0.25s ease, color 0.25s ease;
}

img, svg, video, canvas, audio, iframe, embed, object {
  max-width: 100%;
}

/* Base Clean Glass / Card Class */
.glass-panel {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
  transition: all 0.25s ease;
}

/* Elegant Typography Utilities */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-serif);
  color: var(--color-primary-text, var(--color-primary));
  font-weight: 700;
  line-height: 1.25;
}

.arabic-text {
  font-family: var(--font-arabic);
  font-size: 1.8em;
  line-height: 2.2;
  direction: rtl;
  text-align: right;
  color: var(--color-primary-text, var(--color-primary));
}

a {
  color: var(--color-primary-accent, var(--color-primary));
  text-decoration: none;
  transition: color 0.2s ease;
}

a:hover {
  color: var(--color-gold);
}

/* High Performance Micro-interactions & Zero-Latency Mobile Tap */
html, body, button, a, [role="button"], input, select {
  touch-action: manipulation;
}

button, a, [role="button"] {
  -webkit-tap-highlight-color: transparent;
}

button {
  user-select: none;
}

button:active:not(:disabled),
a:active:not(.no-tap-effect),
[role="button"]:active {
  transform: scale(0.975);
  transition: transform 0.05s ease-out;
}

/* Layout Reset */
.container {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 var(--spacing-sm);
}

.main-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

@media (max-width: 768px) {
  .main-content {
    padding-bottom: 72px;
  }
}

/* RTL Support for Arabic, Urdu, Persian */
[dir="rtl"] {
  text-align: right;
}

[dir="rtl"] nav[aria-label="Breadcrumb"] {
  direction: rtl;
}

@media print {
  header, footer, nav, button, .no-print {
    display: none !important;
  }
  body {
    background: #ffffff !important;
    color: #000000 !important;
    font-size: 9.5pt;
  }
  .container {
    max-width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
  }
  @page {
    size: A4 portrait;
    margin: 1cm;
  }
}

/* Accessibility & SEO utility for hidden anchor targets (Replaces inline styles) */
.hidden-anchor {
  position: absolute;
  top: 0;
  opacity: 0;
  pointer-events: none;
}


/* === File: components/Header.module.css === */
/* ==========================================================================
   Dua ve Namaz Web — Modern Header & Navigation Stylesheet
   ========================================================================== */

.header {
    position: sticky;
    top: 0.5rem;
    z-index: 1000;
    margin: 0.5rem auto;
    width: calc(100% - 1.5rem);
    max-width: 1280px;
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.88);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border: 1px solid rgba(203, 213, 225, 0.85);
    box-shadow: 0 4px 20px -2px rgba(0, 0, 0, 0.05);
    transition: background 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
    will-change: background, box-shadow;
    transform: translateZ(0);
}

.scrolled {
    background: rgba(255, 255, 255, 0.96);
    box-shadow: 0 10px 30px -4px rgba(0, 0, 0, 0.1);
    border-color: rgba(203, 213, 225, 1);
}

.headerContainer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.35rem 1rem;
    gap: 0.65rem;
    position: relative;
}

/* --------------------------------------------------------------------------
   Logo Section
   -------------------------------------------------------------------------- */
.logo {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    text-decoration: none;
    flex-shrink: 0;
}

.logoIconWrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

.logo:hover .logoIconWrapper,
.drawerLogo:hover .logoIconWrapper {
    transform: rotate(-8deg) scale(1.08);
}

.logoSvg {
    display: block;
    filter: drop-shadow(0 2px 5px rgba(217, 119, 6, 0.3));
}

.logoIcon {
    font-size: 1.85rem;
    color: #d97706;
    line-height: 1;
    transition: transform 0.25s ease;
    flex-shrink: 0;
}

.logo:hover .logoIcon {
    transform: rotate(-8deg) scale(1.06);
}

.logoText {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.logoTitle {
    font-family: var(--font-serif);
    font-size: 1.25rem;
    font-weight: 800;
    color: #064e3b;
    line-height: 1;
    letter-spacing: -0.01em;
    white-space: nowrap;
}

[data-theme="dark"] .logoTitle {
    color: #ecfdf5 !important;
}

/* --------------------------------------------------------------------------
   Desktop Navigation
   -------------------------------------------------------------------------- */
.desktopNav {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    flex-shrink: 0;
}

.navLink {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-weight: 600;
    font-size: 0.85rem;
    color: #1e293b;
    text-decoration: none;
    padding: 0.38rem 0.62rem;
    border-radius: 9px;
    transition: all 0.2s ease;
    white-space: nowrap;
}

.navLink:hover {
    background: rgba(4, 120, 87, 0.08);
    color: #047857;
}

.navLinkIcon {
    color: #059669;
    opacity: 0.9;
    transition: transform 0.2s ease;
}

.navLink:hover .navLinkIcon {
    transform: translateY(-1px);
}

.navLinkSpecial {
    font-weight: 700;
}

.navBadge {
    font-size: 0.65rem;
    font-weight: 700;
    padding: 1px 6px;
    border-radius: 6px;
    background: #ecfdf5;
    color: #047857;
    border: 1px solid rgba(4, 120, 87, 0.2);
    margin-left: 2px;
}

/* --------------------------------------------------------------------------
   Desktop Dropdowns
   -------------------------------------------------------------------------- */
.dropdownContainer {
    position: relative;
    display: inline-block;
}

.dropdownTrigger {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-weight: 600;
    font-size: 0.85rem;
    color: #1e293b;
    background: transparent;
    border: none;
    padding: 0.38rem 0.62rem;
    border-radius: 9px;
    cursor: pointer;
    transition: all 0.2s ease;
    white-space: nowrap;
}

.dropdownTrigger:hover,
.dropdownActive {
    background: rgba(4, 120, 87, 0.08);
    color: #047857;
}

.chevron {
    color: #64748b;
    transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

.chevronOpen {
    transform: rotate(180deg);
    color: #047857;
}

.dropdownMenu {
    position: absolute;
    top: calc(100% + 8px);
    left: 50%;
    transform: translateX(-50%) translateY(8px);
    opacity: 0;
    pointer-events: none;
    transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
    z-index: 1050;
    border-radius: 18px;
    background: #ffffff;
    border: 1px solid rgba(226, 232, 240, 0.95);
    box-shadow: 0 20px 45px -10px rgba(0, 0, 0, 0.15), 0 0 0 1px rgba(0, 0, 0, 0.03);
    padding: 12px;
    max-width: calc(100vw - 32px);
}

/* Invisible Hover Tunnel bridge so mouse moving across 8px gap doesn't close dropdown */
.dropdownMenu::before {
    content: "";
    position: absolute;
    top: -10px;
    left: 0;
    right: 0;
    height: 10px;
    background: transparent;
}

.dropdownAlignRight {
    left: auto;
    right: 0;
    transform: translateY(8px);
}

.dropdownAlignRight.dropdownVisible {
    transform: translateY(0) !important;
}

.dropdownVisible {
    opacity: 1;
    pointer-events: auto;
    transform: translateX(-50%) translateY(0);
}

.dropdownWide {
    width: 360px;
}

.dropdownHeader {
    padding: 4px 8px 10px 8px;
    border-bottom: 1px solid #f1f5f9;
    margin-bottom: 8px;
    display: flex;
    flex-direction: column;
}

.dropdownHeaderTitle {
    font-size: 0.82rem;
    font-weight: 700;
    color: #0f172a;
}

.dropdownHeaderSub {
    font-size: 0.72rem;
    color: #64748b;
    margin-top: 2px;
}

.dropdownGrid {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.dropdownItem {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px 10px;
    border-radius: 12px;
    text-decoration: none;
    transition: all 0.18s ease;
}

.dropdownItem:hover {
    background: #f8fafc;
    transform: translateX(3px);
}

.itemIcon {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: transform 0.2s ease;
}

.dropdownItem:hover .itemIcon {
    transform: scale(1.05);
}

/* Icon Badges Palette */
.iconEmerald { background: #ecfdf5; color: #059669; }
.iconAmber   { background: #fef3c7; color: #d97706; }
.iconBlue    { background: #eff6ff; color: #2563eb; }
.iconIndigo  { background: #eef2ff; color: #4f46e5; }
.iconTeal    { background: #f0fdfa; color: #0d9488; }
.iconRose    { background: #fff1f2; color: #e11d48; }
.iconGreen   { background: #f0fdf4; color: #16a34a; }
.iconGold    { background: #fffbeb; color: #b45309; }
.iconSky     { background: #f0f9ff; color: #0284c7; }
.iconPurple  { background: #faf5ff; color: #7e22ce; }

.itemText {
    display: flex;
    flex-direction: column;
}

.itemTitle {
    font-size: 0.88rem;
    font-weight: 600;
    color: #0f172a;
    line-height: 1.25;
}

.itemDesc {
    font-size: 0.74rem;
    color: #64748b;
    margin-top: 2px;
}

/* --------------------------------------------------------------------------
   Header Actions (Right)
   -------------------------------------------------------------------------- */
.headerActions {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    flex-shrink: 0;
}

.searchTriggerBtn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: #f1f5f9;
    border: 1.5px solid #cbd5e1;
    border-radius: 999px;
    padding: 0 10px;
    height: 38px;
    font-size: 0.85rem;
    font-weight: 700;
    color: #334155;
    cursor: pointer;
    transition: all 0.2s ease;
    flex-shrink: 0;
}

.searchTriggerBtn:hover {
    background: #ffffff;
    border-color: #059669;
    color: #059669;
    transform: translateY(-1px);
}

.searchKbd {
    font-size: 0.7rem;
    padding: 1px 6px;
    background: #e2e8f0;
    border-radius: 4px;
    color: #64748b;
    font-family: monospace;
}

.mobileMenuBtn {
    display: none;
    background: #f8fafc;
    border: 1.5px solid #cbd5e1;
    border-radius: 10px;
    width: 38px;
    height: 38px;
    align-items: center;
    justify-content: center;
    color: #0f172a;
    cursor: pointer;
    transition: all 0.2s ease;
}

.mobileMenuBtn:hover {
    background: #f1f5f9;
    border-color: #94a3b8;
}

/* --------------------------------------------------------------------------
   Mobile Drawer & Backdrop
   -------------------------------------------------------------------------- */
.drawerBackdrop {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.55);
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
    z-index: 1100;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
}

.drawerBackdropOpen {
    opacity: 1;
    pointer-events: auto;
}

.drawer {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    width: 86%;
    max-width: 380px;
    background: #ffffff;
    z-index: 1101;
    box-shadow: -10px 0 35px rgba(0, 0, 0, 0.2);
    display: flex;
    flex-direction: column;
    transform: translateX(100%);
    transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.drawerOpen {
    transform: translateX(0);
}

.drawerHeader {
    padding: 14px 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid #f1f5f9;
}

.drawerLogo {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    text-decoration: none;
}

.drawerCloseBtn {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: #f1f5f9;
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #475569;
    cursor: pointer;
    transition: all 0.2s ease;
}

.drawerCloseBtn:hover {
    background: #e2e8f0;
    color: #0f172a;
}

.drawerBody {
    flex: 1;
    overflow-y: auto;
    padding: 14px 16px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.drawerSection {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.drawerSectionLabel {
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    color: #64748b;
    padding-left: 4px;
}

.drawerGridQuick {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}

.quickCard {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 14px 8px;
    border-radius: 12px;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    text-decoration: none;
    color: #0f172a;
    transition: all 0.2s ease;
    text-align: center;
}

.quickCard:hover {
    background: #f1f5f9;
    border-color: #cbd5e1;
}

.quickCardHighlight {
    background: #ecfdf5;
    border-color: rgba(4, 120, 87, 0.25);
    color: #047857;
}

.quickCardIcon {
    color: #047857;
}

.quickCardTitle {
    font-size: 0.82rem;
    font-weight: 700;
}

.drawerList {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.drawerItem {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px 10px;
    border-radius: 12px;
    text-decoration: none;
    transition: background 0.15s ease;
}

.drawerItem:hover {
    background: #f8fafc;
}

.drawerItemText {
    display: flex;
    flex-direction: column;
}

.drawerItemTitle {
    font-size: 0.86rem;
    font-weight: 600;
    color: #0f172a;
}

.drawerItemDesc {
    font-size: 0.72rem;
    color: #64748b;
}

.drawerFooter {
    padding: 14px 16px;
    border-top: 1px solid #f1f5f9;
    background: #ffffff;
}

.drawerSearchBtn {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 10px;
    background: #f1f5f9;
    border: 1px solid #cbd5e1;
    border-radius: 12px;
    color: #475569;
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
}

.drawerSearchBtn:hover {
    background: #e2e8f0;
    color: #0f172a;
}

/* --------------------------------------------------------------------------
   Dark Mode Theme Overrides
   -------------------------------------------------------------------------- */
[data-theme="dark"] .header {
    background: rgba(15, 36, 29, 0.85);
    border-color: rgba(52, 211, 153, 0.2);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4);
}

[data-theme="dark"] .scrolled {
    background: rgba(15, 36, 29, 0.95);
    border-color: rgba(52, 211, 153, 0.35);
}

[data-theme="dark"] .logoTitle {
    color: #f0fdf4;
}

[data-theme="dark"] .logoIcon {
    color: #fbbf24;
}

[data-theme="dark"] .navLink,
[data-theme="dark"] .dropdownTrigger {
    color: #f0fdf4;
}

[data-theme="dark"] .navLink:hover,
[data-theme="dark"] .dropdownTrigger:hover,
[data-theme="dark"] .dropdownActive {
    color: #34d399;
    background: rgba(16, 185, 129, 0.15);
}

[data-theme="dark"] .chevron {
    color: #94a89f;
}

[data-theme="dark"] .chevronOpen {
    color: #34d399;
}

[data-theme="dark"] .navBadge {
    background: rgba(16, 185, 129, 0.2);
    color: #34d399;
    border-color: rgba(52, 211, 153, 0.4);
}

[data-theme="dark"] .dropdownMenu {
    background: #092017;
    border-color: rgba(52, 211, 153, 0.25);
    box-shadow: 0 20px 50px -10px rgba(0, 0, 0, 0.6);
}

[data-theme="dark"] .dropdownHeader {
    border-bottom-color: rgba(255, 255, 255, 0.08);
}

[data-theme="dark"] .dropdownHeaderTitle,
[data-theme="dark"] .itemTitle {
    color: #f0fdf4;
}

[data-theme="dark"] .dropdownHeaderSub,
[data-theme="dark"] .itemDesc {
    color: #94a89f;
}

[data-theme="dark"] .dropdownItem:hover,
[data-theme="dark"] .drawerItem:hover {
    background: rgba(16, 185, 129, 0.12);
}

/* Dark Mode Icon Badges */
[data-theme="dark"] .iconEmerald { background: rgba(16, 185, 129, 0.2); color: #34d399; }
[data-theme="dark"] .iconAmber   { background: rgba(245, 158, 11, 0.2); color: #fbbf24; }
[data-theme="dark"] .iconBlue    { background: rgba(59, 130, 246, 0.2); color: #60a5fa; }
[data-theme="dark"] .iconIndigo  { background: rgba(99, 102, 241, 0.2); color: #818cf8; }
[data-theme="dark"] .iconTeal    { background: rgba(20, 184, 166, 0.2); color: #2dd4bf; }
[data-theme="dark"] .iconRose    { background: rgba(244, 63, 94, 0.2); color: #fb7185; }
[data-theme="dark"] .iconGreen   { background: rgba(34, 197, 94, 0.2); color: #4ade80; }
[data-theme="dark"] .iconGold    { background: rgba(217, 119, 6, 0.2); color: #f59e0b; }
[data-theme="dark"] .iconSky     { background: rgba(14, 165, 233, 0.2); color: #38bdf8; }
[data-theme="dark"] .iconPurple  { background: rgba(168, 85, 247, 0.2); color: #c084fc; }

[data-theme="dark"] .searchTriggerBtn {
    background: var(--surface-2);
    border-color: var(--border-strong);
    color: var(--color-text-main);
}

[data-theme="dark"] .searchKbd {
    background: rgba(255, 255, 255, 0.1);
    color: var(--color-primary-text);
}

[data-theme="dark"] .mobileMenuBtn {
    background: var(--surface-2);
    border-color: var(--border-strong);
    color: var(--color-text-main);
}

[data-theme="dark"] .drawer {
    background: var(--surface-float);
    border-left: 1px solid var(--border-strong);
    box-shadow: -4px 0 24px rgba(0, 0, 0, 0.6);
}

[data-theme="dark"] .drawerHeader,
[data-theme="dark"] .drawerFooter {
    background: var(--surface-float);
    border-color: var(--border-subtle);
}

[data-theme="dark"] .drawerCloseBtn {
    background: var(--surface-2);
    color: var(--color-text-main);
}

[data-theme="dark"] .drawerSectionLabel {
    color: var(--color-text-muted);
}

[data-theme="dark"] .quickCard {
    background: var(--surface-2);
    border-color: var(--border-subtle);
    color: var(--color-text-main);
}

[data-theme="dark"] .quickCardHighlight {
    background: rgba(16, 185, 129, 0.15);
    border-color: var(--border-strong);
    color: var(--color-primary-text);
}

[data-theme="dark"] .drawerItemTitle {
    color: var(--color-text-main);
}

[data-theme="dark"] .drawerItemDesc {
    color: var(--color-text-muted);
}

[data-theme="dark"] .drawerSearchBtn {
    background: var(--surface-2);
    border-color: var(--border-strong);
    color: var(--color-text-main);
}

/* --------------------------------------------------------------------------
   Responsive Breakpoints
   -------------------------------------------------------------------------- */
@media (max-width: 1040px) {
    .header {
        width: calc(100% - 1rem);
        margin: 0.35rem auto;
    }

    .headerContainer {
        padding: 0.45rem 0.75rem;
        gap: 0.5rem;
    }

    .headerActions {
        gap: 0.35rem;
    }

    .desktopNav {
        display: none;
    }

    .mobileMenuBtn {
        display: inline-flex;
    }

    .searchKbd {
        display: none;
    }

    .searchTriggerBtn {
        padding: 0 8px;
    }
}

@media (max-width: 768px) {
    /* On mobile, MobileBottomNav and Drawer already provide dedicated, thumb-friendly Search.
       Hiding it from top bar gives brand logo full breathing room without text truncation. */
    .searchTriggerBtn {
        display: none;
    }

    .mobileMenuBtn {
        width: 36px;
        height: 36px;
        border-radius: 999px;
    }
}

@media (max-width: 480px) {
    .header {
        width: calc(100% - 0.75rem);
        margin: 0.25rem auto;
        border-radius: 14px;
    }

    .headerContainer {
        padding: 0.38rem 0.55rem;
        gap: 0.3rem;
    }

    .logo {
        gap: 0.4rem;
        min-width: 0;
        flex: 1 1 auto;
    }

    .logoSvg {
        width: 24px;
        height: 24px;
        flex-shrink: 0;
    }

    .logoTitle {
        font-size: 1rem;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        max-width: calc(100vw - 160px);
    }

    .headerActions {
        gap: 0.25rem;
        flex-shrink: 0;
    }

    .mobileMenuBtn {
        width: 34px;
        height: 34px;
        border-radius: 999px;
        flex-shrink: 0;
    }
}

.ramadanMoonIcon {
    font-size: 14px;
}

.badgeAmber {
    background: #d97706 !important;
    color: #ffffff !important;
}

.drawerRamadanMoonIcon {
    font-size: 16px;
}


/* === File: components/Footer.module.css === */
/* ==========================================================================
   Footer Component Stylesheet
   ========================================================================== */

.footer {
    background-color: #064e3b;
    color: #ffffff;
    margin-top: auto;
    position: relative;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.topAccentBar {
    height: 3px;
    width: 100%;
    background: linear-gradient(90deg, transparent, #d97706 30%, #fbbf24 50%, #d97706 70%, transparent);
}

.footerContainer {
    display: grid;
    grid-template-columns: 2.2fr 1fr 1fr 1fr;
    gap: 2.5rem;
    padding-top: 3.5rem;
    padding-bottom: 3rem;
}

/* --------------------------------------------------------------------------
   Brand Column
   -------------------------------------------------------------------------- */
.brandCol {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.logo {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    text-decoration: none;
}

.logoIcon {
    font-size: 1.8rem;
    color: #fbbf24;
    line-height: 1;
}

.logoTitle {
    font-family: var(--font-serif);
    font-size: 1.35rem;
    font-weight: 800;
    color: #ffffff;
    letter-spacing: -0.01em;
}

.brandText {
    color: rgba(255, 255, 255, 0.75);
    font-size: 0.88rem;
    line-height: 1.6;
    max-width: 340px;
}

.trustBadges {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 0.5rem;
}

.trustBadge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 10px;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 999px;
    font-size: 0.72rem;
    font-weight: 600;
    color: #a7f3d0;
}

/* --------------------------------------------------------------------------
   Navigation Columns
   -------------------------------------------------------------------------- */
.navCol {
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
}

.colTitle {
    font-family: var(--font-sans);
    font-size: 0.95rem;
    font-weight: 700;
    color: #fbbf24;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin: 0;
}

.footerNav {
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
}

.footerNav a {
    color: rgba(255, 255, 255, 0.78);
    font-size: 0.88rem;
    text-decoration: none;
    transition: all 0.2s ease;
    display: inline-flex;
    align-items: center;
    width: fit-content;
}

.footerNav a:hover {
    color: #ffffff;
    transform: translateX(4px);
}

/* --------------------------------------------------------------------------
   Bottom Copyright Bar
   -------------------------------------------------------------------------- */
.footerBottom {
    background-color: rgba(0, 0, 0, 0.25);
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    padding: 1.25rem 0;
}

.bottomContainer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 0.75rem;
}

.copyrightText,
.creditText {
    color: rgba(255, 255, 255, 0.65);
    font-size: 0.82rem;
    margin: 0;
}

.creditText a {
    color: #a7f3d0;
    text-decoration: none;
    font-weight: 600;
}

.creditText a:hover {
    color: #ffffff;
    text-decoration: underline;
}

/* --------------------------------------------------------------------------
   Dark Mode Theme Overrides
   -------------------------------------------------------------------------- */
[data-theme="dark"] .footer {
    background-color: var(--surface-0);
    border-top-color: var(--border-strong);
}

[data-theme="dark"] .topAccentBar {
    background: linear-gradient(90deg, transparent, #b45309 30%, #fbbf24 50%, #b45309 70%, transparent);
}

[data-theme="dark"] .logoTitle {
    color: var(--color-text-main);
}

[data-theme="dark"] .brandText {
    color: var(--color-text-muted);
}

[data-theme="dark"] .trustBadge {
    background: rgba(16, 185, 129, 0.15);
    border-color: var(--border-strong);
    color: var(--color-primary-text);
}

[data-theme="dark"] .colTitle {
    color: #fbbf24;
}

[data-theme="dark"] .footerNav a {
    color: var(--color-text-muted);
}

[data-theme="dark"] .footerNav a:hover {
    color: var(--color-primary-text);
}

[data-theme="dark"] .footerBottom {
    background-color: #030a07;
    border-top-color: var(--border-subtle);
}

[data-theme="dark"] .copyrightText,
[data-theme="dark"] .creditText {
    color: var(--color-text-muted);
}

[data-theme="dark"] .creditText a {
    color: var(--color-primary-text);
}

/* --------------------------------------------------------------------------
   Responsive Layout
   -------------------------------------------------------------------------- */
@media (max-width: 992px) {
    .footerContainer {
        grid-template-columns: 1fr 1fr;
        gap: 2rem;
    }
}

@media (max-width: 600px) {
    .footerContainer {
        grid-template-columns: 1fr;
        gap: 2rem;
        padding-top: 2.5rem;
        padding-bottom: 2rem;
    }

    .brandText {
        max-width: 100%;
    }

    .bottomContainer {
        flex-direction: column;
        text-align: center;
        justify-content: center;
    }
}


/* === File: components/ThemeToggle.module.css === */
.toggleBtn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    padding: 0;
    background: var(--surface-1);
    border: 1px solid var(--border-strong);
    border-radius: 999px;
    cursor: pointer;
    font-size: 0.95rem;
    color: var(--color-text-main);
    transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
    box-shadow: var(--shadow-sm);
    position: relative;
    user-select: none;
    flex-shrink: 0;
}

.toggleBtn:hover {
    background: var(--surface-2);
    border-color: var(--color-primary-accent);
    transform: translateY(-1px);
    box-shadow: var(--shadow-md);
}

.toggleBtn:active {
    transform: scale(0.96);
}

.icon {
    font-size: 1rem;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.text {
    display: none;
}

.systemDot {
    position: absolute;
    top: 6px;
    right: 6px;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    display: inline-block;
    box-shadow: 0 0 4px currentColor;
}

[data-theme="dark"] .toggleBtn {
    background: var(--surface-2);
    border-color: var(--border-strong);
    color: var(--color-text-main);
}

[data-theme="dark"] .toggleBtn:hover {
    background: var(--surface-3);
    border-color: var(--color-primary);
}

@media (max-width: 768px) {
    .toggleBtn {
        width: 36px;
        height: 36px;
    }
}

@media (max-width: 480px) {
    .toggleBtn {
        width: 34px;
        height: 34px;
    }
}


/* === File: components/LanguageSelector.module.css === */
.wrapper {
    position: relative;
    display: inline-block;
}

.triggerBtn {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    background: #ffffff;
    border: 1px solid #cbd5e1;
    border-radius: 999px;
    padding: 0.38rem 0.65rem;
    height: 38px;
    color: #0f172a;
    font-size: 0.82rem;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.2s ease;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
    flex-shrink: 0;
}

.triggerBtn:hover {
    background: #f1f5f9;
    border-color: #94a3b8;
    color: #0f172a;
}

.flag {
    font-size: 1.05rem;
    line-height: 1;
}

.langName {
    white-space: nowrap;
    color: #0f172a;
    font-weight: 700;
    font-size: 0.8rem;
    letter-spacing: 0.5px;
}

.arrow {
    font-size: 0.65rem;
    color: #64748b;
    transition: transform 0.2s ease;
}

[data-theme="dark"] .triggerBtn {
    background: #0f241d;
    border-color: rgba(52, 211, 153, 0.35);
    color: #f0fdf4;
}

[data-theme="dark"] .langName {
    color: #f0fdf4;
}

[data-theme="dark"] .arrow {
    color: #34d399;
}

.arrowOpen {
    transform: rotate(180deg);
}

.dropdown {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    width: 300px;
    max-height: 440px;
    background: #062318;
    border: 1px solid rgba(212, 175, 55, 0.4);
    border-radius: 16px;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.45);
    padding: 12px;
    z-index: 9999;
    display: flex;
    flex-direction: column;
    backdrop-filter: blur(20px);
}

.searchBox {
    width: 100%;
    padding: 9px 12px;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(212, 175, 55, 0.3);
    border-radius: 10px;
    color: #ffffff;
    font-size: 0.88rem;
    margin-bottom: 10px;
    outline: none;
    box-sizing: border-box;
}

.searchBox::placeholder {
    color: rgba(255, 255, 255, 0.55);
}

.searchBox:focus {
    border-color: var(--gold, #d4af37);
    background: rgba(255, 255, 255, 0.15);
}

.langList {
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 4px;
    max-height: 330px;
    padding-right: 4px;
}

.langList::-webkit-scrollbar {
    width: 6px;
}

.langList::-webkit-scrollbar-thumb {
    background: rgba(212, 175, 55, 0.35);
    border-radius: 4px;
}

.langOption {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 12px;
    border-radius: 10px;
    background: transparent;
    border: none;
    color: rgba(255, 255, 255, 0.9);
    font-size: 0.88rem;
    cursor: pointer;
    text-align: left;
    transition: all 0.15s ease;
    width: 100%;
    box-sizing: border-box;
}

.langOption:hover {
    background: rgba(212, 175, 55, 0.2);
    color: #ffffff;
}

.langOptionActive {
    background: rgba(212, 175, 55, 0.28);
    color: #ffd700;
    font-weight: 700;
}

.optLeft {
    display: flex;
    align-items: center;
    gap: 10px;
}

.nativeText {
    font-size: 0.82rem;
    color: rgba(255, 255, 255, 0.65);
}

@media (max-width: 768px) {
    .dropdown {
        right: 0;
        left: auto;
        width: min(290px, 90vw);
    }
    .triggerBtn {
        padding: 0 10px;
        height: 36px;
        gap: 4px;
        border-radius: 999px;
    }
    .langName {
        display: none;
    }
}

@media (max-width: 480px) {
    .triggerBtn {
        height: 34px;
        padding: 0 8px;
        border-radius: 999px;
        gap: 3px;
    }
    .flag {
        font-size: 1.05rem;
    }
    .arrow {
        font-size: 0.55rem;
    }
}


/* === File: components/MobileBottomNav.module.css === */
.bottomNav {
    display: none;
}

@media (max-width: 768px) {
    .bottomNav {
        display: flex;
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        height: calc(64px + env(safe-area-inset-bottom, 0px));
        padding-bottom: env(safe-area-inset-bottom, 0px);
        background: var(--color-surface-glass);
        backdrop-filter: blur(14px);
        -webkit-backdrop-filter: blur(14px);
        border-top: 1px solid var(--color-border);
        box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.08);
        z-index: 900;
        align-items: center;
        justify-content: space-around;
    }

    .navItem {
        flex: 1;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 3px;
        height: 100%;
        color: var(--color-text-muted);
        font-size: 0.7rem;
        font-weight: 600;
        text-decoration: none;
        background: transparent;
        border: none;
        cursor: pointer;
        transition: color 0.2s ease, transform 0.15s ease;
    }

    .navItem:active {
        transform: scale(0.94);
    }

    .activeItem {
        color: var(--color-primary);
        font-weight: 700;
    }

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

    .label {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        max-width: 72px;
    }
}


/* === File: components/GlobalSearchModal.module.css === */
.modalOverlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(15, 23, 42, 0.7);
    backdrop-filter: blur(8px);
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding: 80px 16px 20px;
    z-index: 10000;
    animation: fadeIn 0.15s ease-out;
}

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(-8px); }
    to { opacity: 1; transform: translateY(0); }
}

.modalContent {
    background: var(--surface-float);
    border-radius: 20px;
    width: 100%;
    max-width: 600px;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.35);
    border: 1px solid var(--border-strong);
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.searchHeader {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px 20px;
    border-bottom: 1px solid var(--border-subtle);
    background: var(--surface-2);
}

.searchIcon {
    font-size: 1.25rem;
    color: #64748b;
}

.searchInput {
    flex: 1;
    border: none;
    background: transparent;
    font-size: 1.05rem;
    color: #0f172a;
    font-weight: 600;
    outline: none;
}

.searchInput::placeholder {
    color: #94a3b8;
    font-weight: 500;
}

.escPill {
    font-size: 0.75rem;
    font-weight: 700;
    padding: 3px 8px;
    background: #e2e8f0;
    border-radius: 6px;
    color: #475569;
}

.resultsList {
    max-height: 380px;
    overflow-y: auto;
    padding: 8px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.resultItem {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 14px;
    border-radius: 10px;
    text-decoration: none;
    color: #0f172a;
    transition: background 0.15s;
    font-size: 0.95rem;
    font-weight: 600;
}

.resultItem:hover,
.selectedItem {
    background: #ecfdf5;
    color: #065f46;
}

.resultLeft {
    display: flex;
    align-items: center;
    gap: 10px;
}

.resultType {
    font-size: 0.75rem;
    padding: 2px 8px;
    border-radius: 999px;
    background: #f1f5f9;
    color: #64748b;
    font-weight: 700;
}

.resultTag {
    font-size: 0.75rem;
    color: #64748b;
}

.noResults {
    padding: 32px 16px;
    text-align: center;
    color: #64748b;
    font-size: 0.95rem;
}

.quickSection {
    padding: 12px 16px;
    border-top: 1px solid #f1f5f9;
    background: #fafafa;
}

.quickLabel {
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    color: #64748b;
    letter-spacing: 0.5px;
    margin-bottom: 8px;
    display: block;
}

.quickChips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.quickChip {
    padding: 4px 10px;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 999px;
    font-size: 0.8rem;
    font-weight: 600;
    color: #1e293b;
    text-decoration: none;
    transition: all 0.15s;
}

.quickChip:hover {
    border-color: #059669;
    color: #059669;
    background: #ecfdf5;
}

[data-theme="dark"] .modalContent {
    background: var(--surface-float);
    border-color: var(--border-strong);
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.7);
}

[data-theme="dark"] .searchHeader {
    background: var(--surface-2);
    border-color: var(--border-subtle);
}

[data-theme="dark"] .searchInput,
[data-theme="dark"] .resultItem {
    color: var(--color-text-main);
}

[data-theme="dark"] .resultItem:hover,
[data-theme="dark"] .selectedItem {
    background: rgba(16, 185, 129, 0.15);
    color: var(--color-primary-text);
}

[data-theme="dark"] .escPill {
    background: rgba(255, 255, 255, 0.1);
    color: var(--color-text-main);
}

[data-theme="dark"] .quickSection {
    background: var(--surface-2);
    border-color: var(--border-subtle);
}

[data-theme="dark"] .quickChip {
    background: var(--surface-3);
    border-color: var(--border-subtle);
    color: var(--color-text-main);
}


/* === File: components/PrayerTimesHero.module.css === */
.heroCard {
    padding: 1.5rem 1.75rem;
    width: 100%;
    max-width: 740px;
    margin: 0 auto;
    text-align: center;
    background: var(--surface-1);
    border: 1px solid var(--border-subtle);
    border-radius: 20px;
    box-shadow: var(--shadow-md);
    display: flex;
    flex-direction: column;
    gap: 1.15rem;
    min-height: 395px;
    contain: layout paint;
}

.headerRow {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--spacing-sm);
}

.titleBlock {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
}

.dateBadgeRow {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.dateBadge {
    font-size: 0.78rem;
    font-weight: 700;
    padding: 4px 12px;
    border-radius: 999px;
    background: #ecfdf5;
    border: 1px solid #a7f3d0;
    color: #065f46;
}

.hijriBadge {
    font-size: 0.78rem;
    font-weight: 700;
    padding: 4px 12px;
    border-radius: 999px;
    background: #fef3c7;
    border: 1px solid #fde68a;
    color: #78350f;
}

.headerRow h2 {
    font-family: var(--font-serif);
    font-size: 2.1rem;
    color: #0f172a;
    margin: 0;
    font-weight: 700;
}

.locationSelectors {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 8px;
    width: 100%;
}

.unifiedLocationBar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    background: #f8fafc;
    border: 1px solid #cbd5e1;
    border-radius: 999px;
    padding: 3px 6px;
    gap: 2px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
    max-width: 100%;
    transition: all 0.2s ease;
}

.unifiedLocationBar:hover {
    border-color: #059669;
    box-shadow: 0 0 0 3px rgba(5, 150, 105, 0.1);
}

.locationSegment {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    border-radius: 999px;
    transition: background 0.15s ease;
}

.locationSegment:hover {
    background: rgba(0, 0, 0, 0.03);
}

.locationDivider {
    width: 1px;
    height: 18px;
    background: #e2e8f0;
    margin: 0 2px;
    flex-shrink: 0;
}

.select {
    background: transparent;
    border: none;
    font-family: var(--font-sans);
    font-size: 0.9rem;
    font-weight: 600;
    color: #0f172a;
    outline: none;
    cursor: pointer;
}

.select:focus-visible {
    outline: none;
}

.select option {
    background: white;
    color: #0f172a;
}

.gpsButtonMinimal {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    background: rgba(5, 150, 105, 0.1);
    color: #065f46;
    border: 1px solid rgba(5, 150, 105, 0.22);
    padding: 5px 12px;
    border-radius: 999px;
    font-family: var(--font-sans);
    font-size: 0.82rem;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.2s ease;
    white-space: nowrap;
}

.gpsButtonMinimal:hover:not(:disabled) {
    background: #059669;
    color: #ffffff;
    box-shadow: 0 2px 8px rgba(5, 150, 105, 0.25);
    transform: translateY(-1px);
}

.gpsButtonMinimal:disabled {
    opacity: 0.65;
    cursor: wait;
}

.loading {
    font-size: 1.1rem;
    color: #64748b;
    padding: var(--spacing-lg) 0;
}

/* Skeleton Loader (prevents layout shift) */
.skeletonWrap {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--spacing-md);
    padding: var(--spacing-sm) 0;
}

.skeletonMain {
    width: 240px;
    height: 110px;
    border-radius: var(--radius-md);
    background: linear-gradient(90deg, #f1f5f9 25%, #e2e8f0 50%, #f1f5f9 75%);
    background-size: 200% 100%;
    animation: shimmer 1.4s infinite;
}

.skeletonGrid {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: var(--spacing-sm);
}

.skeletonItem {
    height: 76px;
    border-radius: var(--radius-sm);
    background: linear-gradient(90deg, #f1f5f9 25%, #e2e8f0 50%, #f1f5f9 75%);
    background-size: 200% 100%;
    animation: shimmer 1.4s infinite;
}

@keyframes shimmer {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

.nextPrayerMain {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin: 4px 0;
    min-height: 145px;
}

.nextLabel {
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    color: #475569;
    margin-bottom: 2px;
}

.prayerName {
    font-size: 1.3rem;
    font-weight: 800;
    color: #047857;
    text-transform: uppercase;
    letter-spacing: 2px;
}

.prayerTime {
    font-size: 3.5rem;
    font-weight: 800;
    color: #065f46;
    line-height: 1.05;
    margin: 2px 0 6px;
    font-family: var(--font-sans);
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.03em;
}

.countdownPill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 16px;
    border-radius: 999px;
    background: #ecfdf5;
    border: 1px solid #a7f3d0;
}

.countdownDot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #10b981;
    box-shadow: 0 0 8px #10b981;
}

.countdown {
    font-size: 1.05rem;
    font-weight: 700;
    color: #047857;
    font-variant-numeric: tabular-nums;
}

.allPrayers {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 10px;
    margin-top: var(--spacing-xs);
    min-height: 82px;
    border-top: 1px solid #f1f5f9;
    padding-top: var(--spacing-md);
}

.prayerItem {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding: 10px 6px;
    border-radius: var(--radius-sm);
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

.prayerItem:hover {
    transform: translateY(-2px);
    border-color: #059669;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.04);
}

.activePrayer {
    background: #ecfdf5;
    border: 1.5px solid #10b981;
    box-shadow: 0 4px 14px rgba(16, 185, 129, 0.18);
    transform: translateY(-3px);
}

.pvIcon {
    font-size: 1rem;
    line-height: 1;
}

.pvName {
    font-size: 0.78rem;
    font-weight: 700;
    color: #334155;
    text-transform: uppercase;
}

.activePrayer .pvName {
    color: #064e3b;
    font-weight: 800;
}

.pvTime {
    font-size: 1.05rem;
    font-weight: 700;
    color: #0f172a;
    font-variant-numeric: tabular-nums;
}

.activePrayer .pvTime {
    color: #047857;
    font-weight: 800;
}

/* Current Active Prayer Ambient Glow (Quiet Luxury) */
.currentActivePrayer {
    background: #f0fdf4 !important;
    border: 1.5px solid #059669 !important;
    box-shadow: 0 2px 10px rgba(5, 150, 105, 0.15) !important;
    position: relative;
    animation: activeGlow 3.5s infinite ease-in-out;
}

@keyframes activeGlow {
    0%, 100% {
        box-shadow: 0 2px 8px rgba(5, 150, 105, 0.12);
    }
    50% {
        box-shadow: 0 4px 16px rgba(5, 150, 105, 0.28);
    }
}

.currentActiveBadge {
    position: absolute;
    top: -9px;
    background: #059669;
    color: #ffffff;
    font-size: 0.65rem;
    font-weight: 800;
    padding: 1px 7px;
    border-radius: 999px;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    box-shadow: 0 2px 5px rgba(0,0,0,0.15);
}

/* Live Prayer Progress Bar */
.progressSection {
    width: 100%;
    margin: 8px 0 4px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.progressInfoRow {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 0.8rem;
    color: #64748b;
    font-weight: 600;
}

.progressPrayerTag {
    color: #0f172a;
    font-weight: 700;
}

.progressPctTag {
    color: #059669;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
}

.progressBarTrack {
    width: 100%;
    height: 8px;
    background: #e2e8f0;
    border-radius: 999px;
    overflow: hidden;
    position: relative;
}

.progressBarFill {
    height: 100%;
    background: linear-gradient(90deg, #10b981 0%, #059669 100%);
    border-radius: 999px;
    transition: width 0.4s ease-out;
}

.heroActionsRow {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    margin-top: 6px;
}

.actionButton {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 14px;
    border-radius: 999px;
    font-size: 0.82rem;
    font-weight: 700;
    cursor: pointer;
    border: 1px solid #cbd5e1;
    background: #ffffff;
    color: #1e293b;
    transition: all 0.2s ease;
}

.actionButton:hover {
    background: #f8fafc;
    border-color: #059669;
    color: #059669;
    transform: translateY(-1px);
}

[data-theme="dark"] .dateBadge {
    background: rgba(16, 185, 129, 0.15);
    border-color: rgba(52, 211, 153, 0.3);
    color: #34d399;
}

[data-theme="dark"] .hijriBadge {
    background: rgba(251, 191, 36, 0.15);
    border-color: rgba(251, 191, 36, 0.3);
    color: #fbbf24;
}

[data-theme="dark"] .heroCard {
    background: var(--surface-1);
    border-color: var(--border-subtle);
    box-shadow: var(--shadow-md);
}

[data-theme="dark"] .currentActivePrayer {
    background: rgba(16, 185, 129, 0.15) !important;
    border-color: var(--border-strong) !important;
}

[data-theme="dark"] .progressInfoRow {
    color: var(--color-text-muted);
}

[data-theme="dark"] .progressPrayerTag {
    color: var(--color-text-main);
}

[data-theme="dark"] .progressBarTrack {
    background: rgba(255, 255, 255, 0.1);
}

[data-theme="dark"] .actionButton {
    background: var(--surface-2);
    border-color: var(--border-subtle);
    color: var(--color-text-main);
}

[data-theme="dark"] .headerRow h2,
[data-theme="dark"] .pvTime {
    color: var(--color-text-main);
}

[data-theme="dark"] .locationSelector,
[data-theme="dark"] .unifiedLocationBar {
    background: var(--surface-2);
    border-color: var(--border-strong);
}

[data-theme="dark"] .locationDivider {
    background: rgba(255, 255, 255, 0.12);
}

[data-theme="dark"] .locationSegment:hover {
    background: rgba(255, 255, 255, 0.05);
}

[data-theme="dark"] .gpsButtonMinimal {
    background: rgba(16, 185, 129, 0.15);
    color: var(--color-primary-text);
    border-color: rgba(16, 185, 129, 0.3);
}

[data-theme="dark"] .gpsButtonMinimal:hover:not(:disabled) {
    background: #059669;
    color: #ffffff;
}

[data-theme="dark"] .select {
    color: var(--color-text-main);
}

[data-theme="dark"] .select option {
    background: var(--surface-1);
    color: var(--color-text-main);
}

[data-theme="dark"] .prayerName,
[data-theme="dark"] .prayerTime {
    color: var(--color-primary-text);
}

[data-theme="dark"] .countdownPill {
    background: rgba(16, 185, 129, 0.15);
    border-color: var(--border-strong);
}

[data-theme="dark"] .countdown {
    color: var(--color-primary-text);
}

[data-theme="dark"] .prayerItem {
    background: var(--surface-2);
    border-color: var(--border-subtle);
}

[data-theme="dark"] .activePrayer {
    background: rgba(16, 185, 129, 0.18);
    border-color: var(--border-strong);
}

[data-theme="dark"] .pvName,
[data-theme="dark"] .nextLabel,
[data-theme="dark"] .loading {
    color: var(--color-text-muted);
}

@media (max-width: 768px) {
    .heroCard {
        padding: var(--spacing-md);
    }

    .headerRow h2 {
        font-size: 1.7rem;
    }

    .prayerTime {
        font-size: 3.4rem;
    }

    .allPrayers,
    .skeletonGrid {
        grid-template-columns: repeat(3, 1fr);
        gap: 10px;
    }
}

@media (max-width: 480px) {
    .heroCard {
        padding: 1rem 0.85rem;
        border-radius: 16px;
    }

    .headerRow h2 {
        font-size: 1.45rem;
    }

    .prayerTime {
        font-size: 2.8rem;
    }

    .allPrayers,
    .skeletonGrid {
        grid-template-columns: repeat(3, 1fr);
        gap: 6px;
    }

    .prayerItem {
        padding: 8px 4px;
    }

    .pvName {
        font-size: 0.75rem;
    }

    .pvTime {
        font-size: 1.05rem;
    }

    .unifiedLocationBar {
        border-radius: 14px;
        padding: 4px;
    }

    .locationSegment {
        padding: 3px 6px;
    }

    .select {
        font-size: 0.82rem;
        max-width: 110px;
    }

    .gpsButtonMinimal {
        font-size: 0.75rem;
        padding: 4px 8px;
    }
}

.kerahatBadge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 3px 9px;
    border-radius: 999px;
    font-size: 0.76rem;
    font-weight: 700;
    cursor: help;
}

.kerahatDanger {
    background: rgba(220, 38, 38, 0.14);
    color: #b91c1c;
    border: 1px solid rgba(220, 38, 38, 0.35);
}

.kerahatSafe {
    background: rgba(16, 185, 129, 0.12);
    color: #047857;
    border: 1px solid rgba(16, 185, 129, 0.25);
}

/* === File: app/page.module.css === */
.homeContainer {
    width: 100%;
}

.heroSection {
    width: 100%;
    background: linear-gradient(180deg, #ecfdf5 0%, #f8fafc 100%);
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem 0 3.5rem 0;
    margin-bottom: var(--spacing-lg);
    border-bottom: 1px solid #e2e8f0;
    min-height: 560px;
}

[data-theme="dark"] .heroSection {
    background: linear-gradient(180deg, #091a13 0%, #06110c 100%);
    border-bottom-color: var(--border-subtle);
}

.heroInner {
    position: relative;
    z-index: 2;
    display: flex;
    justify-content: center;
}

/* Content Grid */
.contentGrid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: var(--spacing-md);
    padding-bottom: var(--spacing-xl);
}

.contentCard {
    padding: 1.5rem;
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
    transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.25s ease;
    position: relative;
    overflow: hidden;
    border-radius: var(--radius-md);
}

.contentCard:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-hover);
}

.contentCard::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 3.5px;
    height: 100%;
    background: linear-gradient(180deg, var(--color-gold) 0%, rgba(217, 119, 6, 0.3) 100%);
    border-top-left-radius: var(--radius-md);
    border-bottom-left-radius: var(--radius-md);
}

.cardTopBar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: var(--spacing-xs);
}

.contentCard h3 {
    font-size: 1.15rem;
    font-weight: 700;
    margin: 0;
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--color-primary-text);
}

.copyBtn {
    background: rgba(10, 58, 42, 0.06);
    color: var(--color-primary);
    border: 1px solid rgba(10, 58, 42, 0.12);
    border-radius: 999px;
    padding: 4px 10px;
    font-size: 0.75rem;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
    transition: all 0.2s ease;
}

.copyBtn:hover {
    background: var(--color-primary);
    color: var(--color-text-light);
}

.turkishText {
    font-size: 1.08rem;
    color: var(--color-text-main);
    line-height: 1.75;
    font-weight: 450;
    letter-spacing: -0.01em;
}

.source {
    margin-top: auto;
    font-size: 0.78rem;
    font-weight: 700;
    color: var(--color-text-subtle);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    text-align: right;
    border-top: 1px solid var(--color-border);
    padding-top: var(--spacing-sm);
}

.nameHeader {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: var(--spacing-xs);
    border-bottom: 1px solid rgba(10, 58, 42, 0.05);
    padding-bottom: var(--spacing-xs);
}

.nameHeader h4 {
    font-size: 1.6rem;
    color: var(--color-primary);
    margin: 0;
}

.nameHeader :global(.arabic-text) {
    font-size: 2rem;
    color: var(--color-gold);
}

/* Interactive Tasbih & App Promo Section */
.interactiveSection {
    display: grid;
    grid-template-columns: 1.15fr 0.85fr;
    gap: var(--spacing-md);
    padding-bottom: var(--spacing-xl);
}

.sectionBadge {
    display: inline-block;
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: #7a5c00;
    background: rgba(212, 175, 55, 0.2);
    padding: 4px 10px;
    border-radius: 999px;
    margin-bottom: 6px;
}

.tasbihCard {
    padding: var(--spacing-lg);
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
}

.tasbihHeader {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
}

.tasbihTotalBadge {
    background: rgba(10, 58, 42, 0.08);
    color: var(--color-primary);
    padding: 6px 14px;
    border-radius: 999px;
    font-size: 0.85rem;
}

.tasbihTabs {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.tasbihTab {
    background: rgba(255, 255, 255, 0.6);
    border: 1px solid rgba(10, 58, 42, 0.12);
    color: var(--color-text-main);
    padding: 6px 14px;
    border-radius: 999px;
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
}

.tasbihTabActive {
    background: var(--color-primary);
    color: var(--color-text-light);
    border-color: var(--color-gold);
}

.tasbihBody {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    padding-top: 8px;
}

.tasbihMeaning {
    font-size: 0.95rem;
    color: var(--color-text-muted);
    font-style: italic;
    text-align: center;
}

.tasbihCounterRow {
    margin: 6px 0;
}

.tasbihMainBtn {
    width: 148px;
    height: 148px;
    border-radius: 50%;
    background: radial-gradient(circle at 30% 30%, var(--color-primary-light), var(--color-primary));
    color: var(--color-text-light);
    border: 3px solid var(--color-gold);
    box-shadow: 0 12px 28px rgba(10, 58, 42, 0.25);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    user-select: none;
    transition: transform 0.12s ease, box-shadow 0.2s ease;
}

.tasbihMainBtn:hover {
    transform: scale(1.03);
    box-shadow: 0 14px 32px rgba(10, 58, 42, 0.32);
}

.tasbihMainBtn:active {
    transform: scale(0.96);
}

.tasbihCountNum {
    font-size: 2.6rem;
    font-weight: 800;
    color: var(--color-gold);
    line-height: 1;
    font-variant-numeric: tabular-nums;
}

.tasbihTargetText {
    font-size: 0.85rem;
    opacity: 0.8;
    margin-top: 2px;
}

.tasbihTapHint {
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-top: 6px;
    opacity: 0.75;
}

.progressTrack {
    width: 100%;
    max-width: 280px;
    height: 8px;
    border-radius: 999px;
    background: rgba(10, 58, 42, 0.1);
    overflow: hidden;
}

.progressFill {
    height: 100%;
    background: linear-gradient(90deg, var(--color-primary), var(--color-gold));
    transition: width 0.2s ease;
}

.tasbihFooter {
    display: flex;
    justify-content: center;
}

.resetBtn {
    background: transparent;
    border: none;
    color: var(--color-text-muted);
    font-size: 0.82rem;
    font-weight: 600;
    cursor: pointer;
    text-decoration: underline;
}

.resetBtn:hover {
    color: var(--color-primary);
}

.appPromoCard {
    padding: var(--spacing-lg);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: var(--spacing-sm);
    background: linear-gradient(145deg, rgba(10, 58, 42, 0.96), rgba(22, 86, 64, 0.94));
    color: var(--color-text-light);
}

.appPromoCard h3 {
    color: var(--color-gold);
    font-size: 1.5rem;
}

.promoDesc {
    font-size: 0.98rem;
    line-height: 1.65;
    opacity: 0.9;
}

.promoFeatures {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 8px;
    font-size: 0.92rem;
    margin: 4px 0;
}

.playStoreCta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    background: var(--color-gold);
    color: #0A3A2A;
    font-weight: 700;
    padding: 12px 20px;
    border-radius: 999px;
    margin-top: auto;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.playStoreCta:hover {
    color: #0A3A2A;
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(212, 175, 55, 0.35);
}

@media (max-width: 900px) {
    .interactiveSection {
        grid-template-columns: 1fr;
    }
}

.seoHeadingWrapper {
    text-align: center;
    padding: 1.5rem 1rem 0.5rem;
    max-width: 860px;
    margin: 0 auto;
}

.mainTitle {
    font-size: 2.2rem;
    font-family: var(--font-playfair), serif;
    color: #064e3b;
    margin-bottom: 0.5rem;
    line-height: 1.25;
    font-weight: 800;
}

.mainSubtitle {
    font-size: 1.05rem;
    color: #475569;
    line-height: 1.55;
}

[data-theme="dark"] .mainTitle {
    color: #f0fdf4;
}

[data-theme="dark"] .mainSubtitle {
    color: #94a89f;
}

.shareMenuWrapper {
    position: relative;
    display: inline-block;
}

.shareTriggerBtn {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    background: rgba(6, 95, 70, 0.07);
    color: #065f46;
    border: 1px solid rgba(6, 95, 70, 0.18);
    border-radius: 999px;
    padding: 4px 12px;
    font-size: 0.78rem;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
    letter-spacing: 0.2px;
}

.shareTriggerBtn:hover,
.shareTriggerBtnActive {
    background: #065f46;
    color: #ffffff;
    border-color: #065f46;
    box-shadow: 0 2px 8px rgba(6, 95, 70, 0.25);
    transform: translateY(-1px);
}

.shareTriggerIcon {
    font-size: 0.85rem;
    line-height: 1;
}

.sharePopover {
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    z-index: 50;
    min-width: 190px;
    background: rgba(255, 255, 255, 0.98);
    backdrop-filter: blur(12px);
    border: 1px solid #cbd5e1;
    border-radius: 12px;
    box-shadow: 0 10px 25px -4px rgba(0, 0, 0, 0.12), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
    padding: 6px;
    display: flex;
    flex-direction: column;
    gap: 2px;
    animation: popoverFadeIn 0.18s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes popoverFadeIn {
    from {
        opacity: 0;
        transform: scale(0.95) translateY(-4px);
    }
    to {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

.sharePopoverItem {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 10px;
    border-radius: 8px;
    background: transparent;
    border: none;
    color: #1e293b;
    font-family: var(--font-sans);
    font-size: 0.82rem;
    font-weight: 600;
    text-align: left;
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease;
    width: 100%;
}

.sharePopoverItem:hover {
    background: #f1f5f9;
    color: #065f46;
}

.popoverIcon {
    font-size: 1rem;
    line-height: 1;
}

[data-theme="dark"] .shareTriggerBtn {
    background: rgba(16, 185, 129, 0.12);
    color: #6ee7b7;
    border-color: rgba(52, 211, 153, 0.25);
}

[data-theme="dark"] .shareTriggerBtn:hover,
[data-theme="dark"] .shareTriggerBtnActive {
    background: #059669;
    color: #ffffff;
    border-color: #059669;
}

[data-theme="dark"] .sharePopover {
    background: rgba(11, 33, 26, 0.98);
    border-color: rgba(255, 255, 255, 0.12);
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.5);
}

[data-theme="dark"] .sharePopoverItem {
    color: #f0fdf4;
}

[data-theme="dark"] .sharePopoverItem:hover {
    background: rgba(255, 255, 255, 0.08);
    color: #6ee7b7;
}

.shareButtonsRow {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}

.shareBtn {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    border-radius: 8px;
    padding: 5px 10px;
    font-size: 0.8rem;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.2s ease;
    border: 1px solid transparent;
}

.shareBtn:hover {
    transform: translateY(-1px);
}

.shareBtnDownload {
    background: rgba(5, 150, 105, 0.1);
    border-color: rgba(5, 150, 105, 0.25);
    color: #047857;
}

.shareBtnDownload:hover {
    background: #047857;
    color: #ffffff;
}

.shareBtnWhatsapp {
    background: rgba(37, 211, 102, 0.12);
    border-color: rgba(37, 211, 102, 0.3);
    color: #059669;
}

.shareBtnWhatsapp:hover {
    background: #10b981;
    color: #ffffff;
}

.shareBtnTwitter {
    background: rgba(15, 23, 42, 0.06);
    border-color: rgba(15, 23, 42, 0.15);
    color: #1e293b;
}

.shareBtnTwitter:hover {
    background: #0f172a;
    color: #ffffff;
}

[data-theme="dark"] .shareBtnDownload {
    background: rgba(16, 185, 129, 0.15);
    border-color: rgba(52, 211, 153, 0.3);
    color: #34d399;
}

[data-theme="dark"] .shareBtnDownload:hover {
    background: #059669;
    color: #ffffff;
}

[data-theme="dark"] .shareBtnWhatsapp {
    background: rgba(16, 185, 129, 0.15);
    border-color: rgba(52, 211, 153, 0.3);
    color: #34d399;
}

[data-theme="dark"] .shareBtnWhatsapp:hover {
    background: #10b981;
    color: #ffffff;
}

[data-theme="dark"] .shareBtnTwitter {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.15);
    color: #f0fdf4;
}

[data-theme="dark"] .shareBtnTwitter:hover {
    background: rgba(255, 255, 255, 0.2);
}

.sectionTitleWrapper {
    text-align: center;
    margin: 2.2rem 0 1.25rem;
}

.sectionTitle {
    font-size: 1.5rem;
    font-weight: 800;
    color: #064e3b;
    letter-spacing: -0.01em;
}

[data-theme="dark"] .sectionTitle {
    color: var(--color-text-main);
}

[data-theme="dark"] .contentCard {
    background: var(--surface-1);
    border-color: var(--border-subtle);
    box-shadow: var(--shadow-sm);
}

[data-theme="dark"] .contentCard h3 {
    color: var(--color-text-main);
}

[data-theme="dark"] .copyBtn {
    background: rgba(16, 185, 129, 0.15);
    border-color: var(--border-strong);
    color: var(--color-primary-text);
}

[data-theme="dark"] .copyBtn:hover {
    background: #059669;
    color: #ffffff;
}

[data-theme="dark"] .turkishText {
    color: var(--color-text-main);
}

[data-theme="dark"] .source {
    color: var(--color-text-muted);
    border-top-color: var(--border-subtle);
}

[data-theme="dark"] .nameHeader {
    border-bottom-color: var(--border-subtle);
}

[data-theme="dark"] .nameHeader h4 {
    color: var(--color-primary-text);
}

@media (max-width: 640px) {
    .mainTitle {
        font-size: 1.5rem;
    }
    .mainSubtitle {
        font-size: 0.9rem;
    }
}

.fullWidthWrapper {
    width: 100%;
}

.appPromoTitle {
    font-size: 1.35rem;
    font-weight: 700;
    margin: 0.25rem 0 0.5rem;
}

.tasbihCardTitle {
    font-size: 1.35rem;
    font-weight: 700;
    margin: 0.25rem 0;
}

.tasbihControls {
    display: flex;
    align-items: center;
    gap: 8px;
}

.tasbihIconBtn {
    background: transparent;
    border: none;
    font-size: 1.1rem;
    cursor: pointer;
    padding: 4px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.tasbihArabic {
    text-align: center;
    font-size: 2rem;
}

/* === File: components/CityPrayerCountdownWidget.module.css === */
.widgetWrapper {
    margin-bottom: 2.5rem;
}

.countdownCard {
    padding: 2rem 2.5rem;
    margin-bottom: 1.5rem;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 16px;
    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.05);
    position: relative;
    overflow: hidden;
}

.countdownCard::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, #059669, #10b981, #059669);
}

.topStatusRow {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.25rem;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.liveBadge {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 4px 12px;
    background: #ecfdf5;
    border: 1px solid #a7f3d0;
    border-radius: 999px;
    font-size: 0.8rem;
    font-weight: 700;
    color: #047857;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.liveDot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background-color: #10b981;
    box-shadow: 0 0 10px #10b981;
    animation: pulseGlow 1.8s infinite;
}

@keyframes pulseGlow {
    0% {
        transform: scale(0.95);
        box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.7);
    }
    70% {
        transform: scale(1.15);
        box-shadow: 0 0 0 8px rgba(16, 185, 129, 0);
    }
    100% {
        transform: scale(0.95);
        box-shadow: 0 0 0 0 rgba(16, 185, 129, 0);
    }
}

.locationTag {
    font-size: 0.9rem;
    font-weight: 600;
    color: #475569;
}

.mainHeroRow {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 2rem;
    flex-wrap: wrap;
}

.prayerInfoBlock {
    display: flex;
    align-items: center;
    gap: 2rem;
    flex-wrap: wrap;
}

.prayerTitleWrap {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.bigIcon {
    font-size: 3rem;
    filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.06));
}

.prayerSubLabel {
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #64748b;
    display: block;
    margin-bottom: 2px;
}

.prayerNameHeading {
    font-size: 2.2rem;
    font-weight: 800;
    color: #0f172a;
    font-family: var(--font-playfair), serif;
    line-height: 1.1;
    letter-spacing: -0.01em;
}

.prayerTimeWrap {
    border-left: 2px solid #e2e8f0;
    padding-left: 1.8rem;
}

.prayerTimeDisplay {
    font-size: 3.2rem;
    font-weight: 800;
    color: #047857;
    font-family: monospace;
    line-height: 1;
    letter-spacing: -0.02em;
}

.countdownBlock {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 0.5rem;
}

.countdownLabel {
    font-size: 0.85rem;
    font-weight: 700;
    color: #475569;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.timeBoxes {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.timeBox {
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    padding: 0.6rem 0.9rem;
    min-width: 68px;
    text-align: center;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.03);
    display: flex;
    flex-direction: column;
    align-items: center;
}

.timeNum {
    font-size: 1.75rem;
    font-weight: 800;
    color: #047857;
    font-family: monospace;
    line-height: 1;
}

.timeUnit {
    font-size: 0.68rem;
    font-weight: 700;
    color: #64748b;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin-top: 4px;
}

.timeDivider {
    font-size: 1.6rem;
    font-weight: 700;
    color: #cbd5e1;
    line-height: 1;
}

/* Prayer Grid */
.prayerGrid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 0.9rem;
}

.prayerCard {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 14px;
    padding: 1.25rem 0.8rem;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.45rem;
    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.03);
    position: relative;
    transition: all 0.2s ease;
}

.prayerCard:hover {
    transform: translateY(-2px);
    border-color: #059669;
    box-shadow: 0 4px 12px rgba(5, 150, 105, 0.08);
}

.cardIcon {
    font-size: 1.6rem;
    margin-bottom: 2px;
}

.cardName {
    font-size: 0.92rem;
    font-weight: 600;
    color: #475569;
}

.cardTime {
    font-size: 1.55rem;
    font-weight: 800;
    color: #0f172a;
    font-family: monospace;
}

/* Active Next Prayer Highlight */
.activeCard {
    background: #ecfdf5;
    border: 2px solid #10b981;
    box-shadow: 0 4px 14px rgba(16, 185, 129, 0.2);
    transform: scale(1.02);
}

.activeCard .cardName {
    color: #064e3b;
    font-weight: 800;
}

.activeCard .cardTime {
    color: #047857;
    font-weight: 900;
}

.activeBadge {
    position: absolute;
    top: -10px;
    background: #059669;
    color: #ffffff;
    font-size: 0.65rem;
    font-weight: 800;
    padding: 2px 8px;
    border-radius: 999px;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    box-shadow: 0 2px 6px rgba(5, 150, 105, 0.25);
    white-space: nowrap;
}

/* Passed Prayer Styling */
.passedCard {
    background: #f8fafc;
    border-color: #e2e8f0;
    opacity: 0.85;
}

.passedBadge {
    position: absolute;
    top: 6px;
    right: 8px;
    font-size: 0.75rem;
    font-weight: 800;
    color: #10b981;
}

/* Current Active Prayer Pulse */
.currentActiveCard {
    background: #f0fdf4 !important;
    border: 1.5px solid #059669 !important;
    box-shadow: 0 0 16px rgba(5, 150, 105, 0.25) !important;
    animation: activePulse 2.5s infinite ease-in-out;
}

@keyframes activePulse {
    0%, 100% {
        box-shadow: 0 0 10px rgba(5, 150, 105, 0.2);
    }
    50% {
        box-shadow: 0 0 20px rgba(5, 150, 105, 0.45);
    }
}

.currentActiveBadge {
    position: absolute;
    top: -10px;
    background: #059669;
    color: #ffffff;
    font-size: 0.65rem;
    font-weight: 800;
    padding: 2px 8px;
    border-radius: 999px;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    box-shadow: 0 2px 6px rgba(5, 150, 105, 0.25);
    white-space: nowrap;
}

/* Live Prayer Progress Bar */
.progressSection {
    width: 100%;
    margin-top: 1.25rem;
    padding-top: 1rem;
    border-top: 1px dashed #e2e8f0;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.progressInfoRow {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 0.82rem;
    color: #64748b;
    font-weight: 600;
}

.progressPrayerTag {
    color: #0f172a;
    font-weight: 700;
}

.progressPctTag {
    color: #059669;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
}

.progressBarTrack {
    width: 100%;
    height: 8px;
    background: #e2e8f0;
    border-radius: 999px;
    overflow: hidden;
    position: relative;
}

.progressBarFill {
    height: 100%;
    background: linear-gradient(90deg, #10b981 0%, #059669 100%);
    border-radius: 999px;
    transition: width 0.4s ease-out;
}

.cardActionRow {
    display: flex;
    align-items: center;
    gap: 10px;
}

.listenAzanBtn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 12px;
    background: #f8fafc;
    border: 1px solid #cbd5e1;
    border-radius: 999px;
    font-size: 0.8rem;
    font-weight: 700;
    color: #1e293b;
    cursor: pointer;
    transition: all 0.2s ease;
}

.listenAzanBtn:hover {
    background: #ffffff;
    border-color: #059669;
    color: #059669;
    transform: translateY(-1px);
}

[data-theme="dark"] .currentActiveCard {
    background: rgba(16, 185, 129, 0.12) !important;
    border-color: #34d399 !important;
}

[data-theme="dark"] .progressSection {
    border-top-color: rgba(255, 255, 255, 0.1);
}

[data-theme="dark"] .progressInfoRow {
    color: #94a89f;
}

[data-theme="dark"] .progressPrayerTag {
    color: #f0fdf4;
}

[data-theme="dark"] .progressBarTrack {
    background: rgba(255, 255, 255, 0.1);
}

[data-theme="dark"] .listenAzanBtn {
    background: rgba(15, 36, 29, 0.6);
    border-color: rgba(255, 255, 255, 0.15);
    color: #f0fdf4;
}

.unavailable {
    text-align: center;
    color: #64748b;
    font-size: 1rem;
    padding: 2rem 0;
}

[data-theme="dark"] .countdownCard,
[data-theme="dark"] .prayerCard {
    background: #0f241d;
    border-color: rgba(255, 255, 255, 0.08);
}

[data-theme="dark"] .prayerNameHeading,
[data-theme="dark"] .cardTime {
    color: #f0fdf4;
}

[data-theme="dark"] .prayerTimeDisplay,
[data-theme="dark"] .timeNum {
    color: #34d399;
}

[data-theme="dark"] .locationTag,
[data-theme="dark"] .prayerSubLabel,
[data-theme="dark"] .countdownLabel,
[data-theme="dark"] .cardName,
[data-theme="dark"] .timeUnit {
    color: #94a89f;
}

[data-theme="dark"] .timeBox {
    background: #07130f;
    border-color: rgba(255, 255, 255, 0.1);
}

[data-theme="dark"] .activeCard {
    background: rgba(16, 185, 129, 0.15);
    border-color: #34d399;
}

[data-theme="dark"] .passedCard {
    background: rgba(15, 36, 29, 0.5);
    border-color: rgba(255, 255, 255, 0.05);
}

@media (max-width: 900px) {
    .prayerGrid {
        grid-template-columns: repeat(3, 1fr);
        gap: 0.75rem;
    }

    .mainHeroRow {
        flex-direction: column;
        align-items: stretch;
        gap: 1.5rem;
    }

    .countdownBlock {
        align-items: center;
    }

    .prayerTimeWrap {
        border-left: none;
        padding-left: 0;
    }
}

@media (max-width: 640px) {
    .countdownCard {
        padding: 1.5rem 1.2rem;
    }

    .prayerNameHeading {
        font-size: 1.7rem;
    }

    .prayerTimeDisplay {
        font-size: 2.4rem;
    }

    .bigIcon {
        font-size: 2.4rem;
    }

    .timeBox {
        min-width: 58px;
        padding: 0.5rem 0.6rem;
    }

    .timeNum {
        font-size: 1.4rem;
    }

    .prayerGrid {
        grid-template-columns: repeat(3, 1fr);
        gap: 0.5rem;
    }

    .cardTime {
        font-size: 1.2rem;
    }

    .cardName {
        font-size: 0.82rem;
    }
}


/* === File: components/CityPrayerTimesView.module.css === */
.cityPageContainer {
    padding-top: 1.5rem;
    padding-bottom: 3rem;
}

.breadcrumb {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.88rem;
    color: #64748b;
    margin-bottom: 1.5rem;
    flex-wrap: wrap;
}

.breadcrumb a {
    color: var(--color-primary, #065f46);
    text-decoration: none;
    font-weight: 500;
    transition: color 0.2s ease;
}

.breadcrumb a:hover {
    color: var(--color-gold, #d97706);
}

.breadcrumbCurrent {
    color: #047857;
    font-weight: 700;
}

.headerCard {
    padding: 2.2rem 2rem;
    margin-bottom: 2rem;
    text-align: center;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 16px;
    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.05);
}

.badgeRow {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 0.75rem;
    flex-wrap: wrap;
}

.plateBadge {
    padding: 4px 12px;
    background: #ecfdf5;
    border: 1px solid #a7f3d0;
    border-radius: 6px;
    color: #047857;
    font-size: 0.85rem;
    font-weight: 800;
    letter-spacing: 0.04em;
}

.dateBadge {
    font-size: 0.9rem;
    color: #64748b;
    font-weight: 500;
}

.title {
    font-size: 2.2rem;
    color: #0f172a;
    margin-bottom: 0.75rem;
    font-weight: 700;
}

.desc {
    font-size: 1rem;
    color: #475569;
    max-width: 680px;
    margin: 0 auto;
    line-height: 1.6;
}

.prayerGrid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 1rem;
    margin-bottom: 2rem;
}

.prayerCard {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 14px;
    padding: 1.25rem 1rem;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.04);
    transition: all 0.2s ease;
}

.prayerCard:hover {
    border-color: #059669;
    box-shadow: 0 4px 12px rgba(5, 150, 105, 0.08);
    transform: translateY(-2px);
}

.prayerIcon {
    font-size: 1.8rem;
}

.prayerName {
    font-size: 0.92rem;
    color: #475569;
    font-weight: 600;
}

.prayerTime {
    font-size: 1.55rem;
    font-weight: 800;
    color: #065f46;
    font-family: monospace;
}

.infoSection {
    padding: 2rem;
    margin-bottom: 2rem;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 16px;
    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.05);
}

.infoTitle {
    font-size: 1.4rem;
    color: #0f172a;
    margin-bottom: 1rem;
    font-weight: 700;
}

.infoContent {
    font-size: 0.98rem;
    line-height: 1.7;
    color: #334155;
}

.infoContent p {
    margin-bottom: 0.75rem;
}

/* Sibling & Child Districts Card */
.districtsCard {
    padding: 2rem;
    margin-bottom: 2rem;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 16px;
    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.05);
}

.districtsTitle {
    font-size: 1.25rem;
    color: #0f172a;
    margin-bottom: 1.2rem;
    font-weight: 700;
}

.districtsGrid {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.districtPill {
    padding: 7px 14px;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 999px;
    font-size: 0.88rem;
    color: #0f172a;
    text-decoration: none;
    font-weight: 500;
    transition: all 0.2s ease;
}

.districtPill:hover {
    background: #ecfdf5;
    border-color: #10b981;
    color: #047857;
    transform: translateY(-1px);
}

.districtPillActive {
    background: #059669;
    border-color: #059669;
    color: #ffffff !important;
    font-weight: 700;
}

[data-theme="dark"] .headerCard,
[data-theme="dark"] .infoSection,
[data-theme="dark"] .districtsCard {
    background: #0f241d;
    border-color: rgba(255, 255, 255, 0.08);
}

[data-theme="dark"] .title,
[data-theme="dark"] .infoTitle,
[data-theme="dark"] .districtsTitle {
    color: #f0fdf4;
}

[data-theme="dark"] .desc,
[data-theme="dark"] .dateBadge,
[data-theme="dark"] .infoContent {
    color: #94a89f;
}

[data-theme="dark"] .plateBadge {
    background: rgba(16, 185, 129, 0.15);
    border-color: rgba(52, 211, 153, 0.3);
    color: #34d399;
}

[data-theme="dark"] .districtPill {
    background: rgba(15, 36, 29, 0.6);
    border-color: rgba(255, 255, 255, 0.1);
    color: #f0fdf4;
}

[data-theme="dark"] .districtPill:hover {
    background: rgba(16, 185, 129, 0.2);
    border-color: #34d399;
    color: #34d399;
}

@media (max-width: 768px) {
    .title {
        font-size: 1.6rem;
    }
    .prayerGrid {
        grid-template-columns: repeat(3, 1fr);
        gap: 0.6rem;
    }
    .prayerCard {
        padding: 0.85rem 0.5rem;
    }
    .prayerTime {
        font-size: 1.2rem;
    }
    .districtsCard {
        padding: 1.5rem 1rem;
    }
}

/* Local SEO: Historic Mosques & Neighboring Cities */
.mosquesCard,
.neighborsCard {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 16px;
    padding: 2rem;
    margin-bottom: 2rem;
    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.05);
}

.mosquesTitle,
.neighborsTitle {
    font-size: 1.3rem;
    font-weight: 700;
    color: #0f172a;
    margin-bottom: 0.5rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.mosquesSubtitle,
.neighborsSubtitle {
    font-size: 0.92rem;
    color: #64748b;
    margin-bottom: 1.25rem;
    line-height: 1.5;
}

.mosquesGrid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 1rem;
}

.mosqueCard {
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    padding: 1.25rem;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.mosqueCard:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
    border-color: #cbd5e1;
}

.mosqueHeader {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.mosqueName {
    font-size: 1.05rem;
    font-weight: 700;
    color: #065f46;
}

.mosquePeriod {
    font-size: 0.78rem;
    font-weight: 600;
    color: #b45309;
    background: #fef3c7;
    padding: 2px 8px;
    border-radius: 4px;
    display: inline-block;
    align-self: flex-start;
}

.mosqueDesc {
    font-size: 0.88rem;
    color: #475569;
    line-height: 1.5;
    margin: 0;
}

.neighborsGrid {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
}

.neighborPill {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.55rem 1rem;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 999px;
    font-size: 0.9rem;
    color: #0f172a;
    text-decoration: none;
    font-weight: 500;
    transition: all 0.2s ease;
}

.neighborPill:hover {
    background: #ecfdf5;
    border-color: #10b981;
    color: #047857;
    transform: translateY(-1px);
}

.dayLengthCallout {
    margin-top: 1.25rem;
    padding: 1rem 1.25rem;
    background: #f0fdf4;
    border: 1px solid #bbf7d0;
    border-radius: 10px;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    font-size: 0.92rem;
    color: #166534;
}

.dayLengthIcon {
    font-size: 1.4rem;
}

[data-theme="dark"] .mosquesCard,
[data-theme="dark"] .neighborsCard {
    background: #0f241d;
    border-color: rgba(255, 255, 255, 0.08);
}

[data-theme="dark"] .mosquesTitle,
[data-theme="dark"] .neighborsTitle {
    color: #f0fdf4;
}

[data-theme="dark"] .mosquesSubtitle,
[data-theme="dark"] .neighborsSubtitle {
    color: #94a89f;
}

[data-theme="dark"] .mosqueCard {
    background: rgba(15, 36, 29, 0.6);
    border-color: rgba(255, 255, 255, 0.08);
}

[data-theme="dark"] .mosqueCard:hover {
    border-color: rgba(52, 211, 153, 0.3);
}

[data-theme="dark"] .mosqueName {
    color: #34d399;
}

[data-theme="dark"] .mosquePeriod {
    background: rgba(245, 158, 11, 0.2);
    color: #fbbf24;
}

[data-theme="dark"] .mosqueDesc {
    color: #94a89f;
}

[data-theme="dark"] .neighborPill {
    background: rgba(15, 36, 29, 0.6);
    border-color: rgba(255, 255, 255, 0.1);
    color: #f0fdf4;
}

[data-theme="dark"] .neighborPill:hover {
    background: rgba(16, 185, 129, 0.2);
    border-color: #34d399;
    color: #34d399;
}

[data-theme="dark"] .dayLengthCallout {
    background: rgba(16, 185, 129, 0.12);
    border-color: rgba(52, 211, 153, 0.3);
    color: #a7f3d0;
}


/* === File: components/MonthlyCalendarWidget.module.css === */
.calendarSection {
    padding: 2.2rem 2rem;
    margin-bottom: 2.5rem;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 16px;
    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.05);
}

.sectionHeader {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 1.8rem;
    gap: 1.5rem;
    flex-wrap: wrap;
}

.badge {
    display: inline-flex;
    align-items: center;
    padding: 4px 12px;
    background: #ecfdf5;
    border: 1px solid #a7f3d0;
    border-radius: 999px;
    font-size: 0.78rem;
    font-weight: 700;
    color: #047857;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-bottom: 0.4rem;
}

.title {
    font-size: 1.6rem;
    color: #0f172a;
    font-weight: 700;
    margin-bottom: 0.3rem;
}

.subtitle {
    font-size: 0.92rem;
    color: #475569;
    max-width: 650px;
}

.printBtn {
    padding: 0.65rem 1.2rem;
    background: #ffffff;
    border: 1.5px solid #cbd5e1;
    border-radius: 10px;
    font-size: 0.88rem;
    font-weight: 600;
    color: #0f172a;
    cursor: pointer;
    transition: all 0.2s ease;
    white-space: nowrap;
}

.printBtn:hover {
    background: #f8fafc;
    border-color: #94a3b8;
}

.viewToggleGroup {
    display: inline-flex;
    background: #f1f5f9;
    padding: 3px;
    border-radius: 10px;
    border: 1px solid #e2e8f0;
    gap: 2px;
}

.viewToggleBtn {
    padding: 0.45rem 0.95rem;
    font-size: 0.82rem;
    font-weight: 600;
    border: none;
    border-radius: 8px;
    background: transparent;
    color: #475569;
    cursor: pointer;
    transition: all 0.15s ease;
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
}

.viewToggleBtnActive {
    background: #ffffff;
    color: #0f172a;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    font-weight: 700;
}

.tableResponsive {
    width: 100%;
    overflow-x: auto;
    border-radius: 12px;
    border: 1px solid #e2e8f0;
}

.table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.9rem;
    text-align: center;
}

.table th {
    background: #f8fafc;
    color: #0f172a;
    font-weight: 700;
    padding: 0.85rem 0.6rem;
    border-bottom: 2px solid #e2e8f0;
    white-space: nowrap;
}

.table td {
    padding: 0.75rem 0.6rem;
    border-bottom: 1px solid #f1f5f9;
    color: #1e293b;
    font-family: monospace;
    font-size: 0.92rem;
}

.dateCell {
    font-family: var(--font-sans) !important;
    text-align: left;
    padding-left: 1rem !important;
    white-space: nowrap;
    color: #0f172a;
}

.hijriCell {
    font-size: 0.78rem !important;
    color: #64748b !important;
    font-family: var(--font-sans) !important;
}

.maghribCell {
    font-weight: 800;
    color: #d97706 !important;
}

.todayRow {
    background: #ecfdf5 !important;
    font-weight: 700;
}

.todayRow td {
    border-top: 1.5px solid #10b981;
    border-bottom: 1.5px solid #10b981;
    color: #064e3b;
}

.todayBadge {
    display: inline-block;
    margin-left: 6px;
    padding: 2px 7px;
    background: #059669;
    color: #ffffff;
    font-size: 0.68rem;
    font-weight: 800;
    border-radius: 4px;
    letter-spacing: 0.04em;
}

[data-theme="dark"] .calendarSection {
    background: #0f241d;
    border-color: rgba(255, 255, 255, 0.08);
}

[data-theme="dark"] .title {
    color: #f0fdf4;
}

[data-theme="dark"] .subtitle {
    color: #94a89f;
}

[data-theme="dark"] .tableResponsive {
    border-color: rgba(255, 255, 255, 0.08);
}

[data-theme="dark"] .table th {
    background: rgba(15, 36, 29, 0.8);
    color: #f0fdf4;
    border-bottom-color: rgba(255, 255, 255, 0.1);
}

[data-theme="dark"] .table td {
    border-bottom-color: rgba(255, 255, 255, 0.05);
    color: #e2e8f0;
}

[data-theme="dark"] .dateCell {
    color: #f0fdf4;
}

[data-theme="dark"] .todayRow {
    background: rgba(16, 185, 129, 0.15) !important;
}

[data-theme="dark"] .todayRow td {
    border-color: #34d399;
    color: #f0fdf4;
}

[data-theme="dark"] .todayBadge {
    background: #10b981;
    color: #07130f;
}

[data-theme="dark"] .printBtn {
    background: #0f241d;
    border-color: rgba(255, 255, 255, 0.15);
    color: #f0fdf4;
}

@media print {
    .printBtn {
        display: none !important;
    }
}

@media (max-width: 640px) {
    .calendarSection {
        padding: 1.5rem 1rem;
    }
    .title {
        font-size: 1.35rem;
    }
    .printBtn {
        width: 100%;
        text-align: center;
    }
}


/* === File: components/IslamicQAPageClient.module.css === */
.pageWrapper {
    max-width: 920px;
    margin: 0 auto;
    padding: 2.5rem 1.25rem 4.5rem;
    display: flex;
    flex-direction: column;
    gap: 2.25rem;
}

.header {
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.85rem;
}

.badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 14px;
    border-radius: 999px;
    background: #ecfdf5;
    border: 1px solid #a7f3d0;
    color: #065f46;
    font-size: 0.85rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.title {
    font-size: 2.4rem;
    font-weight: 800;
    color: #0f172a;
    font-family: var(--font-serif);
    margin: 0;
    letter-spacing: -0.5px;
}

.subtitle {
    font-size: 1.05rem;
    color: #475569;
    max-width: 640px;
    line-height: 1.6;
    margin: 0;
}

.searchBarRow {
    position: relative;
    display: flex;
    align-items: center;
    width: 100%;
    max-width: 620px;
    margin: 0.5rem auto 0;
}

.searchIcon {
    position: absolute;
    left: 18px;
    font-size: 1.1rem;
    pointer-events: none;
    opacity: 0.6;
}

.searchInput {
    width: 100%;
    padding: 13px 44px 13px 48px;
    border-radius: 999px;
    border: 1.5px solid #cbd5e1;
    background: #ffffff;
    font-size: 1rem;
    font-weight: 600;
    color: #0f172a;
    outline: none;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.03);
    transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

.searchInput:focus {
    border-color: #059669;
    box-shadow: 0 0 0 4px rgba(5, 150, 105, 0.15);
}

.clearSearchBtn {
    position: absolute;
    right: 14px;
    background: #f1f5f9;
    border: none;
    border-radius: 999px;
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.75rem;
    color: #64748b;
    cursor: pointer;
    transition: background 0.15s;
}

.clearSearchBtn:hover {
    background: #e2e8f0;
    color: #0f172a;
}

.madhabFilter {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 0.25rem;
}

.filterBtn {
    padding: 7px 16px;
    border-radius: 999px;
    border: 1px solid #cbd5e1;
    background: #ffffff;
    font-size: 0.88rem;
    font-weight: 700;
    color: #475569;
    cursor: pointer;
    transition: all 0.15s ease-in-out;
}

.filterBtn:hover {
    border-color: #059669;
    color: #059669;
    background: #f0fdf4;
}

.activeFilterBtn {
    background: #059669 !important;
    border-color: #059669 !important;
    color: #ffffff !important;
    box-shadow: 0 3px 10px rgba(5, 150, 105, 0.25);
}

.resultsCount {
    font-size: 0.82rem;
    font-weight: 700;
    color: #64748b;
    margin-top: 0.25rem;
}

/* Soru Kartları */
.qaList {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.qaCard {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 20px;
    padding: 1.6rem 1.8rem;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.03);
    display: flex;
    flex-direction: column;
    gap: 16px;
    transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

.qaCard:hover {
    border-color: #a7f3d0;
    box-shadow: 0 10px 28px rgba(5, 150, 105, 0.08);
}

.cardTop {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 14px;
}

.qHeaderGroup {
    display: flex;
    flex-direction: column;
    gap: 6px;
    flex: 1;
}

.qTag {
    font-size: 0.72rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    color: #059669;
    background: #ecfdf5;
    padding: 2px 8px;
    border-radius: 6px;
    width: fit-content;
}

.questionTitle {
    font-size: 1.25rem;
    font-weight: 800;
    color: #0f172a;
    margin: 0;
    line-height: 1.45;
    font-family: var(--font-serif);
}

.questionTitleLink {
    color: inherit;
    text-decoration: none;
    transition: color 0.15s;
}

.questionTitleLink:hover {
    color: #059669;
}

.madhabBadge {
    font-size: 0.75rem;
    font-weight: 800;
    padding: 4px 12px;
    border-radius: 999px;
    background: #fef3c7;
    color: #92400e;
    border: 1px solid #fde68a;
    white-space: nowrap;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

/* Cevap Bölümü */
.answerSection {
    background: #f8fafc;
    border-left: 3.5px solid #059669;
    border-radius: 0 16px 16px 0;
    padding: 16px 20px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.answerHeader {
    display: flex;
    align-items: center;
    gap: 8px;
}

.answerBadge {
    font-size: 0.75rem;
    font-weight: 800;
    color: #065f46;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.answerContent {
    color: #334155;
    font-size: 0.98rem;
    line-height: 1.75;
    white-space: pre-line;
    word-break: break-word;
    font-weight: 450;
}

.answerCollapsed {
    position: relative;
    max-height: 140px;
    overflow: hidden;
    mask-image: linear-gradient(180deg, #000 60%, transparent 100%);
    -webkit-mask-image: linear-gradient(180deg, #000 60%, transparent 100%);
}

.expandBtn {
    align-self: flex-start;
    background: #ffffff;
    border: 1px solid #cbd5e1;
    color: #059669;
    font-size: 0.82rem;
    font-weight: 700;
    padding: 5px 14px;
    border-radius: 999px;
    cursor: pointer;
    transition: all 0.15s;
    margin-top: 4px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}

.expandBtn:hover {
    background: #ecfdf5;
    border-color: #059669;
}

/* Altbilgi */
.cardFooter {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
    padding-top: 12px;
    border-top: 1px dashed #e2e8f0;
}

.footerMeta {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

.dateText {
    font-size: 0.8rem;
    color: #64748b;
    font-weight: 600;
}

.detailLink {
    font-size: 0.8rem;
    font-weight: 700;
    color: #475569;
    text-decoration: none;
    transition: color 0.15s;
}

.detailLink:hover {
    color: #059669;
    text-decoration: underline;
}

.actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.copyLinkBtn {
    font-size: 0.8rem;
    font-weight: 700;
    color: #475569;
    background: #f1f5f9;
    border: 1px solid #e2e8f0;
    padding: 6px 12px;
    border-radius: 8px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    transition: all 0.15s;
}

.copyLinkBtn:hover {
    background: #e2e8f0;
    color: #0f172a;
}

/* Sonuç Bulunamadı Kutusu */
.noResultsBox {
    text-align: center;
    padding: 3.5rem 1.5rem;
    background: #ffffff;
    border: 1px dashed #cbd5e1;
    border-radius: 20px;
    color: #64748b;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
}

.noResultsBox h3 {
    margin: 0;
    color: #0f172a;
    font-size: 1.3rem;
}

.noResultsBox p {
    margin: 0;
    max-width: 480px;
    font-size: 0.95rem;
    line-height: 1.6;
}

.resetFiltersBtn {
    margin-top: 6px;
    padding: 8px 18px;
    border-radius: 999px;
    background: #059669;
    color: #ffffff;
    border: none;
    font-weight: 700;
    font-size: 0.88rem;
    cursor: pointer;
    transition: opacity 0.15s;
}

.resetFiltersBtn:hover {
    opacity: 0.9;
}

/* CTA */
.mobileCtaBox {
    background: linear-gradient(135deg, #065f46 0%, #047857 100%);
    border-radius: 20px;
    padding: 2.2rem;
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 1.5rem;
    box-shadow: 0 12px 32px -6px rgba(5, 150, 105, 0.35);
    margin-top: 1rem;
}

.ctaText h3 {
    font-size: 1.5rem;
    font-weight: 800;
    margin: 0 0 8px;
    font-family: var(--font-serif);
}

.ctaText p {
    font-size: 0.95rem;
    color: #d1fae5;
    margin: 0;
    max-width: 520px;
    line-height: 1.6;
}

.ctaButton {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 13px 26px;
    background: #ffffff;
    color: #064e3b;
    border-radius: 999px;
    font-size: 1rem;
    font-weight: 800;
    text-decoration: none;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.15);
    transition: all 0.2s;
}

.ctaButton:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.2);
}

/* Related Questions Section */
.relatedSection {
    margin-top: 2.5rem;
    padding-top: 2rem;
    border-top: 1px solid #e2e8f0;
}

.relatedTitle {
    font-size: 1.35rem;
    font-weight: 800;
    color: #0f172a;
    margin-bottom: 1.25rem;
    display: flex;
    align-items: center;
    gap: 8px;
}

.relatedGrid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 1.25rem;
}

.relatedCard {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 14px;
    padding: 1.25rem;
    text-decoration: none;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 10px;
    transition: all 0.2s ease;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.02);
}

.relatedCard:hover {
    border-color: #10b981;
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(16, 185, 129, 0.08);
}

.relatedQuestionText {
    font-size: 1rem;
    font-weight: 700;
    color: #1e293b;
    line-height: 1.45;
    margin: 0;
}

.relatedMetaRow {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 0.82rem;
    color: #64748b;
}

.relatedActionLink {
    color: #059669;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

[data-theme="dark"] .relatedSection {
    border-top-color: rgba(255, 255, 255, 0.1);
}

[data-theme="dark"] .relatedTitle {
    color: #f0fdf4;
}

[data-theme="dark"] .relatedCard {
    background: #0f241d;
    border-color: rgba(255, 255, 255, 0.08);
}

[data-theme="dark"] .relatedCard:hover {
    border-color: #34d399;
}

[data-theme="dark"] .relatedQuestionText {
    color: #f0fdf4;
}

[data-theme="dark"] .relatedMetaRow {
    color: #94a89f;
}

/* Dark Mode */
[data-theme="dark"] .title,
[data-theme="dark"] .questionTitle,
[data-theme="dark"] .noResultsBox h3 {
    color: #f0fdf4;
}

[data-theme="dark"] .subtitle,
[data-theme="dark"] .dateText,
[data-theme="dark"] .resultsCount,
[data-theme="dark"] .detailLink {
    color: #94a89f;
}

[data-theme="dark"] .qaCard,
[data-theme="dark"] .noResultsBox {
    background: #0f241d;
    border-color: rgba(255, 255, 255, 0.08);
}

[data-theme="dark"] .searchInput {
    background: #07130f;
    border-color: rgba(255, 255, 255, 0.15);
    color: #f0fdf4;
}

[data-theme="dark"] .filterBtn {
    background: #07130f;
    border-color: rgba(255, 255, 255, 0.15);
    color: #f0fdf4;
}

[data-theme="dark"] .answerSection {
    background: rgba(7, 19, 15, 0.7);
}

[data-theme="dark"] .answerContent {
    color: #cbd5e1;
}

[data-theme="dark"] .expandBtn,
[data-theme="dark"] .copyLinkBtn {
    background: rgba(255, 255, 255, 0.06);
    border-color: rgba(255, 255, 255, 0.12);
    color: #e2e8f0;
}

[data-theme="dark"] .cardFooter {
    border-top-color: rgba(255, 255, 255, 0.08);
}

/* Pagination */
.paginationNav {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    margin-top: 0.75rem;
    flex-wrap: wrap;
}

.pageBtn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 9px 18px;
    border-radius: 999px;
    border: 1px solid #cbd5e1;
    background: #ffffff;
    color: #0f172a;
    font-size: 0.88rem;
    font-weight: 700;
    text-decoration: none;
    transition: all 0.15s ease;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.03);
}

.pageBtn:hover {
    border-color: #059669;
    color: #059669;
    background: #ecfdf5;
}

.pageIndicator {
    font-size: 0.88rem;
    font-weight: 700;
    color: #475569;
    padding: 6px 14px;
}

[data-theme="dark"] .pageBtn {
    background: #0f241d;
    border-color: rgba(255, 255, 255, 0.14);
    color: #f0fdf4;
}

[data-theme="dark"] .pageBtn:hover {
    border-color: #34d399;
    color: #34d399;
}

[data-theme="dark"] .pageIndicator {
    color: #94a89f;
}

.tagsContainer {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin-top: 1.25rem;
    padding-top: 1rem;
    border-top: 1px dashed rgba(0, 0, 0, 0.08);
}

.tagsLabel {
    font-size: 0.85rem;
    font-weight: 700;
    color: #475569;
}

.tagList {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.tagBadge {
    display: inline-flex;
    align-items: center;
    padding: 3px 10px;
    background: #f1f5f9;
    color: #0f766e;
    border: 1px solid #cbd5e1;
    border-radius: 999px;
    font-size: 0.8rem;
    font-weight: 600;
    transition: all 0.15s ease;
}

.tagBadge:hover {
    background: #ccfbf1;
    border-color: #5eead4;
    color: #0f766e;
}

[data-theme="dark"] .tagsContainer {
    border-top-color: rgba(255, 255, 255, 0.1);
}

[data-theme="dark"] .tagsLabel {
    color: #94a3b8;
}

[data-theme="dark"] .tagBadge {
    background: #132b23;
    color: #5eead4;
    border-color: rgba(94, 234, 212, 0.25);
}

[data-theme="dark"] .tagBadge:hover {
    background: #1a3b30;
    border-color: #5eead4;
}

/* 🛡️ E-E-A-T & YMYL Fıkhî Güvence & İlim Heyeti Denetim Kartı */
.eeatTrustCard {
    margin-top: 1.5rem;
    padding: 1.25rem 1.4rem;
    background: linear-gradient(135deg, rgba(236, 253, 245, 0.8) 0%, rgba(240, 253, 250, 0.6) 100%);
    border: 1px solid rgba(16, 185, 129, 0.25);
    border-radius: 14px;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.eeatHeader {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.eeatBadge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 0.8rem;
    font-weight: 800;
    color: #047857;
    background: #d1fae5;
    padding: 3px 10px;
    border-radius: 999px;
    letter-spacing: 0.3px;
}

.eeatDate {
    font-size: 0.78rem;
    font-weight: 600;
    color: #0f766e;
}

.eeatContent {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.eeatText {
    margin: 0;
    font-size: 0.88rem;
    line-height: 1.6;
    color: #1e293b;
}

.eeatDisclaimer {
    margin: 0;
    font-size: 0.82rem;
    line-height: 1.5;
    color: #64748b;
}

.eeatFooter {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.5rem;
    padding-top: 0.6rem;
    border-top: 1px dashed rgba(16, 185, 129, 0.2);
    font-size: 0.8rem;
    font-weight: 700;
    color: #065f46;
}

.eeatMadhab {
    font-size: 0.78rem;
    color: #0f766e;
    background: #ecfdf5;
    padding: 2px 8px;
    border-radius: 6px;
    border: 1px solid #a7f3d0;
}

[data-theme="dark"] .eeatTrustCard {
    background: linear-gradient(135deg, rgba(6, 78, 59, 0.35) 0%, rgba(19, 78, 74, 0.25) 100%);
    border-color: rgba(52, 211, 153, 0.25);
}

[data-theme="dark"] .eeatBadge {
    background: rgba(16, 185, 129, 0.2);
    color: #6ee7b7;
}

[data-theme="dark"] .eeatDate {
    color: #5eead4;
}

[data-theme="dark"] .eeatText {
    color: #e2e8f0;
}

[data-theme="dark"] .eeatDisclaimer {
    color: #94a3b8;
}

[data-theme="dark"] .eeatFooter {
    border-top-color: rgba(52, 211, 153, 0.15);
    color: #6ee7b7;
}

[data-theme="dark"] .eeatMadhab {
    background: rgba(6, 78, 59, 0.5);
    color: #5eead4;
    border-color: rgba(94, 234, 212, 0.25);
}


/* === File: components/QuranSurahIndexClient.module.css === */
.pageContainer {
    max-width: 1240px;
    margin: 0 auto;
    padding: 1.5rem 1rem 4rem;
}

.heroHeader {
    text-align: center;
    padding: 2.5rem 1.5rem;
    background: linear-gradient(135deg, rgba(6, 78, 59, 0.95), rgba(4, 120, 87, 0.92));
    border-radius: 1.25rem;
    color: #ffffff;
    box-shadow: 0 10px 30px rgba(6, 78, 59, 0.18);
    margin-bottom: 2rem;
    position: relative;
    overflow: hidden;
}

.heroHeader::before {
    content: "﷽";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 14rem;
    color: rgba(255, 255, 255, 0.04);
    pointer-events: none;
    font-family: var(--font-arabic, serif);
}

.heroBadge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: rgba(251, 191, 36, 0.2);
    color: #fef3c7;
    border: 1px solid rgba(251, 191, 36, 0.35);
    padding: 4px 14px;
    border-radius: 999px;
    font-size: 0.85rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    margin-bottom: 0.75rem;
}

.heroTitle {
    font-size: 2.2rem;
    font-weight: 800;
    margin: 0 0 0.5rem;
    letter-spacing: -0.02em;
}

.heroSubtitle {
    font-size: 1.05rem;
    color: #d1fae5;
    max-width: 680px;
    margin: 0 auto;
    line-height: 1.5;
}

.bismillahBanner {
    font-family: var(--font-arabic, serif);
    font-size: 2.2rem;
    color: #fef3c7;
    margin-top: 1.25rem;
    letter-spacing: 0.02em;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

.controlsSection {
    margin-bottom: 1.75rem;
}

.searchBarWrapper {
    position: relative;
    max-width: 650px;
    margin: 0 auto 1.25rem;
}

.searchIcon {
    position: absolute;
    left: 1rem;
    top: 50%;
    transform: translateY(-50%);
    font-size: 1.2rem;
    opacity: 0.6;
    pointer-events: none;
}

.searchInput {
    width: 100%;
    padding: 0.95rem 1rem 0.95rem 3rem;
    font-size: 1.02rem;
    border-radius: 999px;
    border: 1.5px solid rgba(6, 78, 59, 0.18);
    background: #ffffff;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.05);
    outline: none;
    transition: all 0.2s ease;
    color: #1f2937;
}

.searchInput:focus {
    border-color: #059669;
    box-shadow: 0 0 0 4px rgba(5, 150, 105, 0.15);
}

.clearSearchBtn {
    position: absolute;
    right: 1rem;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    font-size: 1rem;
    color: #9ca3af;
    cursor: pointer;
    padding: 4px;
}

.filterChipsRow {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 1.5rem;
}

.filterChip {
    padding: 6px 14px;
    border-radius: 999px;
    font-size: 0.85rem;
    font-weight: 600;
    background: #ffffff;
    border: 1px solid #e5e7eb;
    color: #4b5563;
    cursor: pointer;
    transition: all 0.2s ease;
}

.filterChip:hover {
    background: #f0fdf4;
    border-color: #10b981;
    color: #047857;
}

.activeFilterChip {
    background: #047857 !important;
    border-color: #047857 !important;
    color: #ffffff !important;
}

.quickJumpsSection {
    background: rgba(240, 253, 244, 0.7);
    border: 1px solid rgba(5, 150, 105, 0.2);
    border-radius: 1rem;
    padding: 1rem 1.25rem;
    margin-bottom: 2rem;
}

.quickJumpsTitle {
    font-size: 0.88rem;
    font-weight: 700;
    color: #064e3b;
    margin: 0 0 0.6rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    display: flex;
    align-items: center;
    gap: 6px;
}

.quickJumpsList {
    display: flex;
    align-items: center;
    gap: 8px;
    overflow-x: auto;
    padding-bottom: 4px;
    scrollbar-width: thin;
}

.quickJumpPill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 12px;
    background: #ffffff;
    border: 1px solid rgba(5, 150, 105, 0.25);
    border-radius: 8px;
    font-size: 0.84rem;
    font-weight: 600;
    color: #065f46;
    text-decoration: none;
    white-space: nowrap;
    transition: all 0.15s ease;
}

.quickJumpPill:hover {
    background: #059669;
    color: #ffffff;
    transform: translateY(-1px);
}

.surahsGrid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
    gap: 1.15rem;
}

.surahCard {
    background: #ffffff;
    border: 1px solid rgba(0, 0, 0, 0.07);
    border-radius: 1rem;
    padding: 1.15rem;
    text-decoration: none;
    color: inherit;
    display: flex;
    align-items: center;
    justify-content: space-between;
    transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.03);
    position: relative;
    overflow: hidden;
}

.surahCard:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 24px rgba(6, 78, 59, 0.1);
    border-color: rgba(5, 150, 105, 0.4);
}

.surahCardLeft {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
}

.numberBadge {
    width: 44px;
    height: 44px;
    background: #f0fdf4;
    border: 1.5px solid #a7f3d0;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.05rem;
    font-weight: 800;
    color: #047857;
    flex-shrink: 0;
    transform: rotate(45deg);
}

.numberText {
    transform: rotate(-45deg);
}

.surahInfo {
    min-width: 0;
}

.surahNameTr {
    font-size: 1.1rem;
    font-weight: 700;
    color: #111827;
    margin: 0 0 2px;
    display: flex;
    align-items: center;
    gap: 6px;
}

.surahMeaning {
    font-size: 0.8rem;
    color: #6b7280;
    margin: 0 0 4px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 170px;
}

.metaRow {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.76rem;
}

.verseCountTag {
    color: #059669;
    font-weight: 600;
}

.revelationBadge {
    padding: 1px 7px;
    border-radius: 4px;
    font-weight: 600;
    font-size: 0.7rem;
    text-transform: uppercase;
}

.mekkiBadge {
    background: #fef3c7;
    color: #92400e;
}

.medeniBadge {
    background: #e0e7ff;
    color: #3730a3;
}

.surahCardRight {
    text-align: right;
    flex-shrink: 0;
    margin-left: 8px;
}

.surahArabicName {
    font-family: var(--font-arabic, serif);
    font-size: 1.7rem;
    font-weight: 700;
    color: #065f46;
    line-height: 1.2;
    direction: rtl;
}

.juzBadge {
    font-size: 0.72rem;
    color: #9ca3af;
    display: block;
    margin-top: 2px;
}

.noResultsBox {
    text-align: center;
    padding: 4rem 1rem;
    color: #6b7280;
    grid-column: 1 / -1;
}

@media (max-width: 768px) {
    .heroTitle {
        font-size: 1.65rem;
    }
    .bismillahBanner {
        font-size: 1.7rem;
    }
    .surahsGrid {
        grid-template-columns: 1fr;
    }
}

/* --------------------------------------------------------------------------
   Dark Mode Theme Overrides
   -------------------------------------------------------------------------- */
[data-theme="dark"] .searchInput {
    background: #0b211a;
    border-color: rgba(255, 255, 255, 0.12);
    color: #f0fdf4;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.35);
}

[data-theme="dark"] .searchInput:focus {
    border-color: #34d399;
    box-shadow: 0 0 0 3px rgba(52, 211, 153, 0.2);
}

[data-theme="dark"] .surahCard {
    background: #0b211a;
    border-color: rgba(255, 255, 255, 0.08);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
}

[data-theme="dark"] .surahCard:hover {
    background: #102d24;
    border-color: #34d399;
}

[data-theme="dark"] .surahNameTr {
    color: #f0fdf4;
}

[data-theme="dark"] .surahMeaning,
[data-theme="dark"] .juzBadge {
    color: #94a89f;
}

[data-theme="dark"] .surahArabicName {
    color: #34d399;
}

[data-theme="dark"] .surahNumberBadge {
    background: rgba(16, 185, 129, 0.15);
    border-color: rgba(52, 211, 153, 0.3);
    color: #34d399;
}

[data-theme="dark"] .mekkiBadge {
    background: rgba(245, 158, 11, 0.15);
    color: #fbbf24;
}

[data-theme="dark"] .medeniBadge {
    background: rgba(99, 102, 241, 0.15);
    color: #818cf8;
}


/* === File: components/FridayMessagesPageClient.module.css === */
.pageWrapper {
    max-width: 900px;
    margin: 0 auto;
    padding: 2rem 1rem 4rem;
    display: flex;
    flex-direction: column;
    gap: 2rem;
}

.header {
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.75rem;
}

.badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 14px;
    border-radius: 999px;
    background: #ecfdf5;
    border: 1px solid #a7f3d0;
    color: #065f46;
    font-size: 0.85rem;
    font-weight: 800;
    text-transform: uppercase;
}

.title {
    font-size: 2.3rem;
    font-weight: 800;
    color: #0f172a;
    font-family: var(--font-serif);
    margin: 0;
}

.subtitle {
    font-size: 1.05rem;
    color: #475569;
    max-width: 650px;
    line-height: 1.6;
    margin: 0;
}

.categoryFilter {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0.5rem 0;
}

.filterBtn {
    padding: 8px 16px;
    border-radius: 999px;
    border: 1.5px solid #cbd5e1;
    background: #ffffff;
    font-size: 0.88rem;
    font-weight: 700;
    color: #334155;
    cursor: pointer;
    transition: all 0.2s;
}

.filterBtn:hover {
    border-color: #059669;
    color: #059669;
}

.activeFilterBtn {
    background: #059669;
    border-color: #059669;
    color: #ffffff;
    box-shadow: 0 4px 12px rgba(5, 150, 105, 0.25);
}

.messagesGrid {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

.messageCard {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 18px;
    padding: 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 12px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
    transition: transform 0.2s, box-shadow 0.2s;
}

.messageCard:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08);
}

.cardHeader {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 8px;
}

.cardCategory {
    font-size: 0.75rem;
    font-weight: 800;
    padding: 3px 10px;
    border-radius: 999px;
    background: #ecfdf5;
    color: #065f46;
    border: 1px solid #a7f3d0;
}

.downloadStoryBtn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: #f8fafc;
    border: 1px solid #cbd5e1;
    color: #047857;
    font-size: 0.8rem;
    font-weight: 700;
    padding: 4px 12px;
    border-radius: 999px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.downloadStoryBtn:hover {
    background: #ecfdf5;
    border-color: #059669;
    transform: translateY(-1px);
}

.actionsCluster {
    display: flex;
    align-items: center;
    gap: 8px;
}

.arabicText {
    font-size: 1.35rem;
    font-weight: 600;
    color: #064e3b;
    font-family: var(--font-arabic, serif);
    line-height: 1.8;
    text-align: right;
    direction: rtl;
    margin: 4px 0;
}

.messageBody {
    font-size: 1.05rem;
    color: #1e293b;
    line-height: 1.65;
    margin: 0;
}

.cardFooter {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
    border-top: 1px dashed #e2e8f0;
    padding-top: 12px;
    margin-top: 4px;
}

.sourceText {
    font-size: 0.82rem;
    color: #64748b;
    font-style: italic;
    font-weight: 600;
}

[data-theme="dark"] .title,
[data-theme="dark"] .messageBody {
    color: #f0fdf4;
}

[data-theme="dark"] .subtitle,
[data-theme="dark"] .sourceText {
    color: #94a89f;
}

[data-theme="dark"] .messageCard {
    background: #0f241d;
    border-color: rgba(255, 255, 255, 0.08);
}

[data-theme="dark"] .arabicText {
    color: #34d399;
}

[data-theme="dark"] .cardFooter {
    border-top-color: rgba(255, 255, 255, 0.1);
}

[data-theme="dark"] .cardCategory {
    background: rgba(16, 185, 129, 0.15);
    border-color: rgba(52, 211, 153, 0.3);
    color: #6ee7b7;
}

[data-theme="dark"] .downloadStoryBtn {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.15);
    color: #6ee7b7;
}

[data-theme="dark"] .downloadStoryBtn:hover {
    background: rgba(16, 185, 129, 0.2);
    border-color: #34d399;
}

[data-theme="dark"] .filterBtn {
    background: #07130f;
    border-color: rgba(255, 255, 255, 0.15);
    color: #f0fdf4;
}


/* === File: components/SeoFaq.module.css === */
.faqSection {
    margin-top: 3rem;
    margin-bottom: 2rem;
    padding: 2.5rem 2rem;
    background: #ffffff;
    border: 1px solid var(--color-border, #e2e8f0);
    border-radius: var(--radius-lg, 16px);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.04);
}

.sectionHeader {
    text-align: center;
    margin-bottom: 2.2rem;
}

.badge {
    display: inline-block;
    padding: 5px 14px;
    background: #fef3c7;
    border: 1px solid #fde68a;
    border-radius: 999px;
    color: #b45309;
    font-size: 0.82rem;
    font-weight: 700;
    margin-bottom: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.title {
    font-size: 1.85rem;
    color: var(--color-primary-text, #064e3b);
    margin-bottom: 0.5rem;
    font-weight: 700;
}

.subtitle {
    font-size: 0.98rem;
    color: #475569;
    max-width: 620px;
    margin: 0 auto;
    line-height: 1.5;
}

.faqList {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    max-width: 820px;
    margin: 0 auto;
}

.faqItem {
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    padding: 1.25rem 1.5rem;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.02);
    transition: all 0.2s ease;
}

.faqItem:hover {
    border-color: var(--color-primary-accent, #059669);
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.06);
    transform: translateY(-1px);
}

.question {
    font-size: 1.05rem;
    font-weight: 700;
    color: #0f172a;
    margin-bottom: 0.6rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.answer {
    font-size: 0.95rem;
    color: #475569;
    line-height: 1.65;
    margin: 0;
}

/* --------------------------------------------------------------------------
   Dark Mode Theme Overrides
   -------------------------------------------------------------------------- */
[data-theme="dark"] .faqSection {
    background: #0b211a;
    border-color: rgba(255, 255, 255, 0.09);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35);
}

[data-theme="dark"] .badge {
    background: rgba(251, 191, 36, 0.15);
    border-color: rgba(251, 191, 36, 0.3);
    color: #fbbf24;
}

[data-theme="dark"] .title {
    color: #f0fdf4;
}

[data-theme="dark"] .subtitle {
    color: #94a89f;
}

[data-theme="dark"] .faqItem {
    background: rgba(15, 36, 29, 0.65);
    border-color: rgba(255, 255, 255, 0.08);
}

[data-theme="dark"] .faqItem:hover {
    border-color: #34d399;
    background: rgba(15, 36, 29, 0.9);
}

[data-theme="dark"] .question {
    color: #f0fdf4;
}

[data-theme="dark"] .answer {
    color: #94a89f;
}


/* === File: components/CityLinksSection.module.css === */
.citySection {
    margin-top: 3.5rem;
    margin-bottom: 2.5rem;
    padding: 2.5rem 2rem;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 16px;
    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.05);
}

.sectionHeader {
    text-align: center;
    margin-bottom: 2rem;
}

.badgeRow {
    display: flex;
    justify-content: center;
    margin-bottom: 0.75rem;
}

.sectionBadge {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 4px 12px;
    background: #ecfdf5;
    border: 1px solid #a7f3d0;
    border-radius: 999px;
    font-size: 0.78rem;
    font-weight: 700;
    color: #047857;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.badgeDot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background-color: #10b981;
}

.title {
    font-size: 1.85rem;
    color: #0f172a;
    margin-bottom: 0.6rem;
    font-family: var(--font-playfair), serif;
    font-weight: 700;
    letter-spacing: -0.01em;
}

.subtitle {
    font-size: 0.98rem;
    color: #475569;
    max-width: 680px;
    margin: 0 auto 1.5rem auto;
    line-height: 1.6;
}

.searchWrapper {
    max-width: 440px;
    margin: 0 auto;
}

.searchBox {
    position: relative;
    display: flex;
    align-items: center;
}

.searchIcon {
    position: absolute;
    left: 14px;
    color: #64748b;
    pointer-events: none;
}

.searchInput {
    width: 100%;
    padding: 0.7rem 2.4rem 0.7rem 2.5rem;
    font-size: 0.92rem;
    color: #0f172a;
    background: #ffffff;
    border: 1.5px solid #cbd5e1;
    border-radius: 12px;
    outline: none;
    transition: all 0.2s ease;
}

.searchInput:focus {
    border-color: #059669;
    box-shadow: 0 0 0 3px rgba(5, 150, 105, 0.12);
}

.searchInput::placeholder {
    color: #94a3b8;
}

.clearBtn {
    position: absolute;
    right: 12px;
    background: transparent;
    border: none;
    font-size: 1.25rem;
    line-height: 1;
    color: #718096;
    cursor: pointer;
    padding: 2px 6px;
    border-radius: 4px;
}

.clearBtn:hover {
    color: #1a202c;
}

.searchResultCount {
    margin-top: 0.5rem;
    font-size: 0.82rem;
    color: #047857;
    font-weight: 600;
}

.cityGrid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(135px, 1fr));
    gap: 0.65rem;
}

.cityLink {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.65rem 0.85rem;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    color: #0f172a;
    text-decoration: none;
    font-size: 0.9rem;
    transition: all 0.2s ease;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.02);
}

.cityLink:hover {
    background: #059669;
    border-color: #059669;
    color: #ffffff;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(5, 150, 105, 0.15);
}

.cityName {
    font-weight: 600;
    letter-spacing: -0.01em;
}

.plateBadge {
    font-size: 0.72rem;
    font-weight: 800;
    color: #047857;
    background: #ecfdf5;
    border: 1px solid #a7f3d0;
    padding: 2px 6px;
    border-radius: 5px;
    letter-spacing: 0.04em;
    transition: all 0.2s ease;
}

.cityLink:hover .plateBadge {
    background: rgba(255, 255, 255, 0.2);
    border-color: rgba(255, 255, 255, 0.4);
    color: #ffffff;
}

.noResults {
    text-align: center;
    padding: 3rem 1rem;
    color: #64748b;
}

.resetSearchBtn {
    margin-top: 1rem;
    padding: 0.5rem 1.2rem;
    background: #059669;
    color: #ffffff;
    border: none;
    border-radius: 8px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.2s ease;
}

.resetSearchBtn:hover {
    background: #047857;
}

.worldBanner {
    margin-top: 2rem;
    padding: 1.5rem 1.8rem;
    background: linear-gradient(135deg, #ecfdf5 0%, #ffffff 100%);
    border: 1px solid #a7f3d0;
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
    flex-wrap: wrap;
}

.worldBannerInfo {
    display: flex;
    align-items: center;
    gap: 1.2rem;
    flex: 1;
}

.worldBannerIcon {
    font-size: 2.2rem;
}

.worldBannerTitle {
    font-size: 1.15rem;
    color: #064e3b;
    font-weight: 700;
    margin-bottom: 0.25rem;
}

.worldBannerDesc {
    font-size: 0.88rem;
    color: #475569;
    line-height: 1.4;
}

.worldBannerBtn {
    padding: 0.75rem 1.4rem;
    background: #059669;
    color: #ffffff;
    border-radius: 10px;
    font-weight: 700;
    font-size: 0.9rem;
    text-decoration: none;
    white-space: nowrap;
    transition: all 0.2s ease;
    box-shadow: 0 2px 8px rgba(5, 150, 105, 0.2);
}

.worldBannerBtn:hover {
    background: #047857;
    color: #ffffff;
    transform: translateY(-2px);
    box-shadow: 0 4px 14px rgba(5, 150, 105, 0.3);
}

[data-theme="dark"] .citySection {
    background: #0f241d;
    border-color: rgba(255, 255, 255, 0.08);
}

[data-theme="dark"] .title {
    color: #f0fdf4;
}

[data-theme="dark"] .subtitle {
    color: #94a89f;
}

[data-theme="dark"] .searchInput {
    background: #07130f;
    border-color: rgba(255, 255, 255, 0.15);
    color: #f0fdf4;
}

[data-theme="dark"] .cityLink {
    background: rgba(15, 36, 29, 0.6);
    border-color: rgba(255, 255, 255, 0.08);
    color: #f0fdf4;
}

[data-theme="dark"] .plateBadge {
    background: rgba(16, 185, 129, 0.15);
    border-color: rgba(52, 211, 153, 0.3);
    color: #34d399;
}

[data-theme="dark"] .cityLink:hover {
    background: #10b981;
}

[data-theme="dark"] .worldBanner {
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.1) 0%, rgba(15, 36, 29, 0.9) 100%);
    border-color: rgba(52, 211, 153, 0.3);
}

[data-theme="dark"] .worldBannerTitle {
    color: #f0fdf4;
}

[data-theme="dark"] .worldBannerDesc {
    color: #94a89f;
}

@media (max-width: 640px) {
    .citySection {
        padding: 1.5rem 1rem;
        margin-top: 2rem;
    }

    .title {
        font-size: 1.45rem;
    }

    .subtitle {
        font-size: 0.88rem;
        margin-bottom: 1.2rem;
    }

    .cityGrid {
        grid-template-columns: repeat(auto-fill, minmax(105px, 1fr));
        gap: 0.5rem;
    }

    .cityLink {
        padding: 0.5rem 0.65rem;
        font-size: 0.82rem;
    }

    .plateBadge {
        font-size: 0.68rem;
        padding: 1px 4px;
    }

    .worldBanner {
        flex-direction: column;
        align-items: stretch;
        text-align: center;
        padding: 1.2rem 1rem;
    }

    .worldBannerInfo {
        flex-direction: column;
        gap: 0.5rem;
    }

    .worldBannerBtn {
        text-align: center;
        width: 100%;
    }
}

.tabContainer {
    display: inline-flex;
    align-items: center;
    background: rgba(10, 58, 42, 0.06);
    padding: 4px;
    border-radius: 12px;
    margin-bottom: 1.5rem;
    gap: 4px;
}

.tabBtn {
    padding: 8px 18px;
    border-radius: 8px;
    border: none;
    font-size: 0.92rem;
    cursor: pointer;
    transition: all 0.2s ease;
}

.tabBtnActive {
    font-weight: 700;
    background: #064e3b;
    color: #ffffff;
}

.tabBtnInactive {
    font-weight: 500;
    background: transparent;
    color: #475569;
}

.citySubtitle {
    display: block;
    font-size: 0.75rem;
    color: #64748b;
}

.showMoreWrapper {
    text-align: center;
    margin-top: 1.25rem;
    margin-bottom: 0.5rem;
}

.showMoreBtn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 24px;
    border-radius: 12px;
    border: 1px solid rgba(6, 78, 59, 0.2);
    background: rgba(6, 78, 59, 0.05);
    color: #064e3b;
    font-weight: 600;
    font-size: 0.92rem;
    cursor: pointer;
    transition: all 0.2s ease;
}

.showMoreBtn:hover {
    background: rgba(6, 78, 59, 0.1);
}

/* ==========================================================================
   Kerahat Vakitleri, Dini Günler ve Sıkça Sorulan Sorular Stilleri
   Full Dual-Theme Architecture (Daylight Calm & Obsidian Night)
   ========================================================================== */

/* --- Kerahat Times Widget --- */
.widgetContainer {
    margin-top: 2rem;
    margin-bottom: 2.5rem;
    padding: 1.75rem;
    border-radius: 1.25rem;
    position: relative;
    overflow: hidden;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.04);
    transition: all 0.25s ease;
}

.widgetHeader {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    flex-wrap: wrap !important;
    gap: 1rem !important;
    margin-bottom: 1.5rem !important;
    padding-bottom: 1rem !important;
    border-bottom: 1px solid #f1f5f9 !important;
}

.widgetHeader .headerLeft {
    display: flex !important;
    flex-direction: column !important;
    gap: 0.35rem !important;
}

.widgetHeader .title {
    font-size: 1.35rem !important;
    font-weight: 700 !important;
    color: #064e3b !important;
    display: flex;
    align-items: center;
    gap: 0.6rem;
    margin: 0;
}

.widgetHeader .subtitle {
    font-size: 0.88rem !important;
    color: #475569 !important;
    margin: 0;
    line-height: 1.5;
}

.liveStatusBadge {
    display: inline-flex !important;
    align-items: center !important;
    gap: 0.5rem !important;
    padding: 0.45rem 1rem !important;
    border-radius: 999px !important;
    font-size: 0.85rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.02em !important;
}

.liveStatusBadge.statusActive {
    background: #fee2e2 !important;
    color: #b91c1c !important;
    border: 1px solid #fca5a5 !important;
    animation: pulse 2s infinite;
}

.liveStatusBadge.statusSafe {
    background: #ecfdf5 !important;
    color: #047857 !important;
    border: 1px solid #a7f3d0 !important;
}

.pulseDot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: currentColor;
    box-shadow: 0 0 10px currentColor;
}

.cardsGrid {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 1.25rem !important;
    width: 100% !important;
}

@media (max-width: 900px) {
    .cardsGrid {
        grid-template-columns: 1fr !important;
    }
}

.card,
.kerahatCard {
    padding: 1.25rem;
    border-radius: 1rem;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
    box-sizing: border-box;
}

.card:hover,
.kerahatCard:hover {
    transform: translateY(-2px);
    border-color: #059669;
    box-shadow: 0 4px 14px rgba(5, 150, 105, 0.08);
}

.card.cardActive,
.kerahatCard.cardActive {
    background: linear-gradient(180deg, #fef2f2 0%, #ffffff 100%);
    border-color: #f87171;
    box-shadow: 0 4px 16px rgba(239, 68, 68, 0.12);
}

.card.cardUpcoming,
.kerahatCard.cardUpcoming {
    border-color: #fde68a;
    background: #fffbeb;
}

.card.cardPassed,
.kerahatCard.cardPassed {
    opacity: 0.7;
}

.cardTop {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 0.85rem;
}

.cardIconTitle {
    display: flex;
    align-items: center;
    gap: 0.65rem;
}

.cardIcon {
    font-size: 1.6rem;
}

.cardName {
    font-size: 1.05rem;
    font-weight: 700;
    color: #0f172a;
    margin: 0;
}

.statusPill {
    font-size: 0.76rem;
    font-weight: 700;
    padding: 0.25rem 0.65rem;
    border-radius: 999px;
    white-space: nowrap;
}

.statusPillActive {
    background: #fee2e2;
    color: #b91c1c;
    border: 1px solid #fca5a5;
}

.statusPillUpcoming {
    background: #fef3c7;
    color: #92400e;
    border: 1px solid #fde68a;
}

.statusPillPassed {
    background: #f1f5f9;
    color: #64748b;
    border: 1px solid #e2e8f0;
}

.timeRangeBox {
    margin: 0.75rem 0;
    padding: 0.65rem 0.85rem;
    border-radius: 0.65rem;
    background: #f1f5f9;
    border: 1px solid #e2e8f0;
    display: flex;
    align-items: baseline;
    gap: 0.6rem;
}

.timeRange {
    font-size: 1.4rem;
    font-weight: 800;
    color: #065f46;
    letter-spacing: 0.03em;
    font-variant-numeric: tabular-nums;
}

.durationTag {
    font-size: 0.78rem;
    color: #64748b;
    font-weight: 600;
}

.cardDesc {
    font-size: 0.84rem;
    line-height: 1.5;
    color: #475569;
    margin: 0.5rem 0 0 0;
}

.infoBox {
    margin-top: 1.5rem;
    padding: 1.15rem 1.35rem;
    border-radius: 0.95rem;
    background: #ecfdf5;
    border: 1px solid #a7f3d0;
    display: flex;
    gap: 1rem;
    align-items: flex-start;
}

.infoBoxIcon {
    font-size: 1.4rem;
    line-height: 1;
    flex-shrink: 0;
}

.infoBoxText {
    font-size: 0.85rem;
    line-height: 1.6;
    color: #064e3b;
}

.infoBoxText strong {
    color: #047857;
}

/* Dark mode for Kerahat Widget */
[data-theme="dark"] .widgetContainer {
    background: #0c1c15 !important;
    border-color: rgba(251, 191, 36, 0.2) !important;
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.4) !important;
}

[data-theme="dark"] .widgetHeader {
    border-bottom-color: rgba(255, 255, 255, 0.08) !important;
}

[data-theme="dark"] .widgetHeader .title {
    color: #fbbf24 !important;
}

[data-theme="dark"] .widgetHeader .subtitle {
    color: #94a89f !important;
}

[data-theme="dark"] .liveStatusBadge.statusActive {
    background: rgba(239, 68, 68, 0.25) !important;
    color: #f87171 !important;
    border-color: rgba(239, 68, 68, 0.5) !important;
}

[data-theme="dark"] .liveStatusBadge.statusSafe {
    background: rgba(16, 185, 129, 0.16) !important;
    color: #34d399 !important;
    border-color: rgba(16, 185, 129, 0.35) !important;
}

[data-theme="dark"] .card,
[data-theme="dark"] .kerahatCard {
    background: #132a20 !important;
    border-color: rgba(255, 255, 255, 0.08) !important;
}

[data-theme="dark"] .card:hover,
[data-theme="dark"] .kerahatCard:hover {
    border-color: rgba(251, 191, 36, 0.35) !important;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.3) !important;
}

[data-theme="dark"] .card.cardActive,
[data-theme="dark"] .kerahatCard.cardActive {
    background: linear-gradient(180deg, rgba(239, 68, 68, 0.16) 0%, rgba(239, 68, 68, 0.04) 100%) !important;
    border-color: rgba(239, 68, 68, 0.5) !important;
    box-shadow: 0 0 20px rgba(239, 68, 68, 0.2) !important;
}

[data-theme="dark"] .card.cardUpcoming,
[data-theme="dark"] .kerahatCard.cardUpcoming {
    background: rgba(251, 191, 36, 0.08) !important;
    border-color: rgba(251, 191, 36, 0.25) !important;
}

[data-theme="dark"] .card .cardName,
[data-theme="dark"] .kerahatCard .cardName,
[data-theme="dark"] .cardName {
    color: #f0fdf4 !important;
}

[data-theme="dark"] .statusPillActive {
    background: rgba(239, 68, 68, 0.25) !important;
    color: #fca5a5 !important;
    border-color: rgba(239, 68, 68, 0.5) !important;
}

[data-theme="dark"] .statusPillUpcoming {
    background: rgba(251, 191, 36, 0.16) !important;
    color: #fde68a !important;
    border-color: rgba(251, 191, 36, 0.3) !important;
}

[data-theme="dark"] .statusPillPassed {
    background: rgba(255, 255, 255, 0.08) !important;
    color: rgba(255, 255, 255, 0.6) !important;
    border-color: transparent !important;
}

[data-theme="dark"] .timeRangeBox {
    background: rgba(0, 0, 0, 0.35) !important;
    border-color: rgba(255, 255, 255, 0.06) !important;
}

[data-theme="dark"] .timeRange,
[data-theme="dark"] .kerahatCard .timeRange {
    color: #fbbf24 !important;
}

[data-theme="dark"] .durationTag,
[data-theme="dark"] .kerahatCard .durationTag {
    color: rgba(255, 255, 255, 0.6) !important;
}

[data-theme="dark"] .cardDesc,
[data-theme="dark"] .kerahatCard .cardDesc {
    color: #94a89f !important;
}

[data-theme="dark"] .infoBox {
    background: rgba(251, 191, 36, 0.08) !important;
    border-color: rgba(251, 191, 36, 0.22) !important;
}

[data-theme="dark"] .infoBoxText {
    color: #fde68a !important;
}

[data-theme="dark"] .infoBoxText strong {
    color: #fbbf24 !important;
}

/* --- Islamic Events Widget --- */
.eventsSection {
    padding: 2.2rem 2rem;
    margin-top: 3rem;
    margin-bottom: 2.5rem;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 16px;
    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.05);
}

.eventsSection .sectionHeader {
    text-align: center !important;
    display: block !important;
    margin-bottom: 2rem !important;
}

.eventsSection .badge {
    display: inline-flex !important;
    align-items: center !important;
    padding: 4px 12px !important;
    background: #ecfdf5 !important;
    border: 1px solid #a7f3d0 !important;
    border-radius: 999px !important;
    font-size: 0.78rem !important;
    font-weight: 700 !important;
    color: #047857 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.04em !important;
    margin-bottom: 0.5rem !important;
}

.eventsSection .title {
    font-size: 1.75rem !important;
    color: #0f172a !important;
    font-weight: 700 !important;
    margin-bottom: 0.4rem !important;
}

.eventsSection .subtitle {
    font-size: 0.95rem !important;
    color: #475569 !important;
    max-width: 680px !important;
    margin: 0 auto !important;
}

.eventsGrid {
    display: grid !important;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)) !important;
    gap: 1rem !important;
    width: 100% !important;
}

.eventCard {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 14px;
    padding: 1.25rem;
    display: flex !important;
    flex-direction: column !important;
    justify-content: space-between !important;
    transition: all 0.2s ease;
    box-sizing: border-box;
}

.eventCard:hover {
    border-color: #059669;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(5, 150, 105, 0.08);
}

.eventCard .cardTop {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.75rem;
    gap: 0.5rem;
}

.eventCard .hijriBadge {
    font-size: 0.78rem;
    font-weight: 600;
    color: #64748b;
}

.eventCard .countdownBadge {
    padding: 3px 8px;
    background: #ecfdf5;
    border: 1px solid #a7f3d0;
    border-radius: 6px;
    color: #047857;
    font-size: 0.76rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    white-space: nowrap;
}

.eventCard .eventTitle {
    font-size: 1.15rem;
    color: #0f172a;
    font-weight: 700;
    margin-bottom: 0.35rem;
}

.eventCard .eventDate {
    font-size: 0.85rem;
    font-weight: 700;
    color: #d97706;
    margin-bottom: 0.5rem;
}

.eventCard .eventDesc {
    font-size: 0.88rem;
    color: #475569;
    line-height: 1.45;
}

/* Dark mode for Islamic Events */
[data-theme="dark"] .eventsSection {
    background: #0f241d !important;
    border-color: rgba(255, 255, 255, 0.08) !important;
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.4) !important;
}

[data-theme="dark"] .eventsSection .title {
    color: #f0fdf4 !important;
}

[data-theme="dark"] .eventsSection .subtitle {
    color: #94a89f !important;
}

[data-theme="dark"] .eventCard {
    background: rgba(15, 36, 29, 0.75) !important;
    border-color: rgba(255, 255, 255, 0.08) !important;
}

[data-theme="dark"] .eventCard:hover {
    border-color: rgba(52, 211, 153, 0.35) !important;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.3) !important;
}

[data-theme="dark"] .eventCard .eventTitle {
    color: #f0fdf4 !important;
}

[data-theme="dark"] .eventCard .eventDate {
    color: #fbbf24 !important;
}

[data-theme="dark"] .eventCard .eventDesc {
    color: #94a89f !important;
}

[data-theme="dark"] .eventCard .hijriBadge {
    color: #94a89f !important;
}

[data-theme="dark"] .eventCard .countdownBadge {
    background: rgba(16, 185, 129, 0.15) !important;
    border-color: rgba(52, 211, 153, 0.3) !important;
    color: #34d399 !important;
}

/* --- SEO FAQ Section --- */
.faqSection {
    padding: 2.2rem 2rem;
    margin-top: 3rem;
    margin-bottom: 3rem;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 16px;
    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.05);
}

.faqSection .sectionHeader {
    text-align: center;
    margin-bottom: 2rem;
}

.faqSection .badge {
    display: inline-flex;
    align-items: center;
    padding: 4px 12px;
    background: #ecfdf5;
    border: 1px solid #a7f3d0;
    border-radius: 999px;
    font-size: 0.78rem;
    font-weight: 700;
    color: #047857;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-bottom: 0.5rem;
}

.faqSection .title {
    font-size: 1.75rem;
    color: #0f172a;
    font-weight: 700;
    margin-bottom: 0.4rem;
}

.faqSection .subtitle {
    font-size: 0.95rem;
    color: #475569;
    max-width: 680px;
    margin: 0 auto;
}

.faqList {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 1.25rem;
}

.faqItem {
    padding: 1.25rem;
    border-radius: 12px;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    transition: all 0.2s ease;
}

.faqItem:hover {
    border-color: #059669;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(5, 150, 105, 0.06);
}

.faqItem .question {
    font-size: 1.05rem;
    font-weight: 700;
    color: #0f172a;
    margin: 0 0 0.5rem 0;
    display: flex;
    align-items: baseline;
    gap: 6px;
}

.faqItem .answer {
    font-size: 0.92rem;
    color: #475569;
    line-height: 1.6;
    margin: 0;
}

[data-theme="dark"] .faqSection {
    background: #0c1c15 !important;
    border-color: rgba(255, 255, 255, 0.08) !important;
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.4) !important;
}

[data-theme="dark"] .faqSection .title {
    color: #f0fdf4 !important;
}

[data-theme="dark"] .faqSection .subtitle {
    color: #94a89f !important;
}

[data-theme="dark"] .faqItem {
    background: rgba(255, 255, 255, 0.03) !important;
    border-color: rgba(255, 255, 255, 0.08) !important;
}

[data-theme="dark"] .faqItem:hover {
    border-color: rgba(251, 191, 36, 0.35) !important;
}

[data-theme="dark"] .faqItem .question {
    color: #f0fdf4 !important;
}

[data-theme="dark"] .faqItem .answer {
    color: #94a89f !important;
}