/* ==========================================================================
   MERKEZ360 MASTER DESIGN SYSTEM
   PREMIUM SAAS EDITION (Vercel / Linear / Stripe Inspired)
   ========================================================================== */

:root {
  /* Brand Core (Vercel/Stripe Blue) */
  --m360-primary: #0070f3;
  --m360-primary-hover: #0051b3;
  --m360-primary-light: rgba(0, 112, 243, 0.08);
  --m360-primary-glow: rgba(0, 112, 243, 0.4);
  
  --m360-secondary: #0a0a0a;
  --m360-secondary-hover: #1a1a1a;
  
  --m360-whatsapp: #25d366;
  --m360-whatsapp-hover: #1ebe56;
  --m360-whatsapp-glow: rgba(37, 211, 102, 0.4);
  
  --m360-cta: #f81ce5;
  
  /* Neutral Palette */
  --m360-bg: #fafafa;
  --m360-surface: #ffffff;
  --m360-border: rgba(0, 0, 0, 0.08);
  --m360-border-strong: rgba(0, 0, 0, 0.12);
  
  --m360-text-main: #111111;
  --m360-text-muted: #666666;
  --m360-text-light: #888888;

  /* Typography Scale */
  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-display: 'Outfit', sans-serif;
  
  /* Radius System (Strictly 4, 8, 12, 16, 20, 24 + full) */
  --radius-xs: 4px;
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 20px;
  --radius-2xl: 24px;
  --radius-full: 9999px;

  /* Premium Shadow Scale (Multi-layered Linear/Stripe style) */
  --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.04);
  --shadow-md: 0 8px 24px rgba(0, 0, 0, 0.06);
  --shadow-lg: 0 16px 40px rgba(0, 0, 0, 0.08);
  --shadow-xl: 0 24px 60px rgba(0, 0, 0, 0.12);
  --shadow-glow: 0 0 0 1px rgba(0,0,0,0.02), 0 8px 30px rgba(0, 112, 243, 0.2);
  
  /* Animations */
  --transition-fast: 0.15s ease;
  --transition-smooth: 0.3s cubic-bezier(0.2, 0.8, 0.2, 1);
  --transition-spring: 0.6s cubic-bezier(0.16, 1, 0.3, 1); /* Premium Apple-like spring */
}

/* ==========================================================================
   THEME OVERRIDES (Admin Panel / Dark Mode)
   ========================================================================== */
[data-theme="dark"] {
  --m360-bg: #09090b;
  --m360-surface: #18181b;
  --m360-border: #3f3f46;
  --m360-border-strong: #52525b;
  
  --m360-text-main: #f4f4f5;
  --m360-text-muted: #a1a1aa;
  --m360-text-light: #71717a;
  
  --m360-primary: #3b82f6;
  --m360-primary-hover: #2563eb;
  --m360-primary-light: rgba(59,130,246,0.12);
  --m360-primary-glow: rgba(59,130,246,0.25);
  
  --m360-secondary: #ffffff;
  --m360-secondary-hover: #e4e4e7;
  
  --m360-danger: #ef4444;
  --m360-warning: #f59e0b;
  --m360-info: #06b6d4;
  
  color-scheme: dark;
}

/* ==========================================================================
   RESET & BASE
   ========================================================================== */
*, *::before, *::after {
  box-sizing: border-box;
}

/* Accessibility Focus Ring (Linear / Apple Style) */
:focus-visible {
  outline: 2px solid var(--m360-primary);
  outline-offset: 2px;
  box-shadow: 0 0 0 4px rgba(0, 112, 243, 0.2);
  transition: outline-offset 0.1s ease;
}

html, body {
  margin: 0;
  padding: 0;
}

body {
  font-family: var(--font-sans);
  color: var(--m360-text-main);
  background-color: var(--m360-bg);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6, .font-display {
  font-family: var(--font-display);
  color: var(--m360-secondary);
  letter-spacing: -0.04em;
  line-height: 1.15;
  font-weight: 700;
}

/* ==========================================================================
   TYPOGRAPHY UTILITIES
   ========================================================================== */
.text-xs { font-size: 0.75rem; line-height: 1rem; letter-spacing: 0.02em; }
.text-sm { font-size: 0.875rem; line-height: 1.25rem; letter-spacing: 0.01em; }
.text-base { font-size: 1rem; line-height: 1.5rem; }
.text-lg { font-size: 1.125rem; line-height: 1.75rem; letter-spacing: -0.01em; }
.text-xl { font-size: 1.25rem; line-height: 1.75rem; letter-spacing: -0.01em; }
.text-2xl { font-size: 1.5rem; line-height: 2rem; letter-spacing: -0.02em; }
.text-3xl { font-size: 1.875rem; line-height: 2.25rem; letter-spacing: -0.02em; }
.text-4xl { font-size: 2.25rem; line-height: 2.5rem; letter-spacing: -0.03em; }

.font-medium { font-weight: 500; }
.font-semibold { font-weight: 600; }
.font-bold { font-weight: 700; }

.text-muted { color: var(--m360-text-muted) !important; }
.text-light-alt { color: var(--m360-text-light) !important; }

/* ==========================================================================
   PREMIUM BUTTONS
   ========================================================================== */
.m360-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.625rem 1.25rem;
  font-size: 0.875rem;
  font-weight: 600;
  border-radius: var(--radius-md);
  text-decoration: none;
  border: 1px solid transparent;
  transition: var(--transition-smooth);
  cursor: pointer;
  letter-spacing: -0.01em;
  white-space: nowrap;
  user-select: none;
}

.m360-btn:active {
  transform: scale(0.97);
}

.m360-btn-sm { padding: 0.5rem 1rem; font-size: 0.8125rem; border-radius: var(--radius-md); }
.m360-btn-lg { padding: 0.875rem 1.75rem; font-size: 1rem; border-radius: var(--radius-md); }

.m360-btn-dark {
  background-color: var(--m360-secondary);
  color: #fff;
  border-color: var(--m360-secondary);
  box-shadow: var(--shadow-sm);
}
.m360-btn-dark:hover {
  background-color: #000;
  border-color: #000;
  color: #fff;
  box-shadow: 0 4px 14px rgba(0,0,0,0.2);
  transform: translateY(-1px);
}

.m360-btn-primary {
  background-color: var(--m360-primary);
  color: #fff;
  border-color: var(--m360-primary);
  box-shadow: 0 2px 8px var(--m360-primary-glow);
}
.m360-btn-primary:hover {
  background-color: var(--m360-primary-hover);
  border-color: var(--m360-primary-hover);
  color: #fff;
  box-shadow: 0 6px 20px var(--m360-primary-glow);
  transform: translateY(-1px);
}

.m360-btn-brand {
  background-color: var(--m360-primary);
  color: #fff;
  border-color: var(--m360-primary);
  box-shadow: 0 2px 8px var(--m360-primary-glow);
}
.m360-btn-brand:hover {
  background-color: var(--m360-primary-hover);
  border-color: var(--m360-primary-hover);
  color: #fff;
  box-shadow: 0 6px 20px var(--m360-primary-glow);
  transform: translateY(-1px);
}

.m360-btn-whatsapp {
  background-color: var(--m360-whatsapp);
  color: #fff;
  border-color: var(--m360-whatsapp);
  box-shadow: 0 2px 8px var(--m360-whatsapp-glow);
}
.m360-btn-whatsapp:hover {
  background-color: var(--m360-whatsapp-hover);
  border-color: var(--m360-whatsapp-hover);
  color: #fff;
  box-shadow: 0 6px 20px var(--m360-whatsapp-glow);
  transform: translateY(-1px);
}

.m360-btn-outline {
  background-color: var(--m360-surface);
  border-color: var(--m360-border-strong);
  color: var(--m360-text-main);
  box-shadow: var(--shadow-sm);
}
.m360-btn-outline:hover {
  border-color: var(--m360-text-main);
  background-color: var(--m360-surface);
  color: var(--m360-text-main);
  box-shadow: var(--shadow-md);
  transform: translateY(-1px);
}

.m360-btn-ghost {
  background-color: transparent;
  color: var(--m360-text-muted);
}
.m360-btn-ghost:hover {
  background-color: rgba(0,0,0,0.04);
  color: var(--m360-text-main);
}

/* ==========================================================================
   CARDS & SURFACES
   ========================================================================== */
.m360-card {
  background: var(--m360-surface);
  border: 1px solid rgba(0,0,0,0.06);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  transition: var(--transition-spring);
}

.m360-card:hover {
  border-color: rgba(0, 112, 243, 0.2);
  box-shadow: var(--shadow-md), 0 0 0 1px rgba(0, 112, 243, 0.05);
  transform: translateY(-2px);
}

.m360-glass {
  background: rgba(255, 255, 255, 0.65);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.4);
  box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.03);
}

/* ==========================================================================
   PREMIUM DEMO CATALOG
   ========================================================================== */
.m360-demo-card {
  background: var(--m360-surface);
  border: 1px solid rgba(0,0,0,0.06);
  border-radius: var(--radius-xl);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  height: 100%;
  transition: var(--transition-spring);
  position: relative;
  box-shadow: var(--shadow-sm);
}

.m360-demo-card:hover {
  border-color: rgba(0, 112, 243, 0.3);
  box-shadow: var(--shadow-xl), 0 0 0 1px rgba(0, 112, 243, 0.1);
  transform: translateY(-8px) scale(1.01);
}

.m360-demo-img-wrap {
  width: 100%;
  height: 240px;
  background: var(--m360-bg);
  border-bottom: 1px solid var(--m360-border);
  position: relative;
  overflow: hidden;
  padding: 1rem;
}

.m360-mockup-browser {
  width: 100%;
  height: 100%;
  aspect-ratio: 16 / 9;
  background: #fff;
  border-radius: var(--radius-md);
  border: 1px solid var(--m360-border);
  box-shadow: var(--shadow-sm);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  transition: transform 0.4s ease;
}

.m360-demo-card:hover .m360-mockup-browser {
  transform: scale(1.02);
  box-shadow: var(--shadow-md);
}

.m360-mockup-header {
  height: 20px;
  background: #f1f3f5;
  border-bottom: 1px solid var(--m360-border);
  display: flex;
  align-items: center;
  padding: 0 10px;
  gap: 5px;
}

.m360-mockup-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #dee2e6;
}
.m360-mockup-dot.r { background: #ff5f56; }
.m360-mockup-dot.y { background: #ffbd2e; }
.m360-mockup-dot.g { background: #27c93f; }

.m360-mockup-body {
  flex: 1;
  overflow: hidden;
  position: relative;
}

.m360-scroll-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top;
  transition: transform 4s cubic-bezier(0.25, 1, 0.5, 1);
}

.m360-demo-card:hover .m360-scroll-img {
  transform: translateY(calc(-100% + 200px));
}

.m360-demo-content {
  padding: 1.5rem;
  display: flex;
  flex-direction: column;
  flex: 1;
}

.m360-tag {
  display: inline-flex;
  align-items: center;
  padding: 0.125rem 0.5rem;
  border-radius: var(--radius-full);
  font-size: 0.6875rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  background: var(--m360-bg);
  color: var(--m360-text-muted);
  border: 1px solid var(--m360-border);
}
.m360-tag.primary { background: var(--m360-primary-light); color: var(--m360-primary); border-color: rgba(0, 112, 243, 0.2); }
.m360-tag.warning { background: rgba(245, 158, 11, 0.1); color: #d97706; border-color: rgba(245, 158, 11, 0.2); }

.m360-feature-list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 1rem;
}
.m360-feature-item {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.8125rem;
  color: var(--m360-text-muted);
}
.m360-feature-item i { color: var(--m360-primary); }

/* ==========================================================================
   NAVIGATION / HEADER (Glassmorphic)
   ========================================================================== */
.m360-header {
  background: rgba(255, 255, 255, 0.7);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  border-bottom: 1px solid var(--m360-border);
  position: sticky;
  top: 0;
  z-index: 1030;
  transition: all 0.3s ease;
}

.m360-nav-link {
  color: var(--m360-text-muted);
  font-weight: 500;
  font-size: 0.875rem;
  padding: 0.5rem 0.75rem;
  text-decoration: none;
  transition: color var(--transition-fast);
  border-radius: var(--radius-md);
}

.m360-nav-link:hover {
  color: var(--m360-secondary);
}

.m360-nav-link.active {
  color: var(--m360-secondary);
  font-weight: 600;
}

/* ==========================================================================
   FILTER PILLS (Categories)
   ========================================================================== */
.m360-filter-pill {
  padding: 0.375rem 1rem;
  border-radius: var(--radius-full);
  border: 1px solid var(--m360-border);
  background: transparent;
  color: var(--m360-text-muted);
  font-size: 0.875rem;
  font-weight: 500;
  cursor: pointer;
  white-space: nowrap;
  transition: var(--transition-smooth);
}

.m360-filter-pill:hover {
  background: var(--m360-bg);
  color: var(--m360-secondary);
}

.m360-filter-pill.active {
  background: var(--m360-secondary);
  color: #fff;
  border-color: var(--m360-secondary);
}

/* ==========================================================================
   HERO SECTION
   ========================================================================== */
.m360-hero {
  padding: 6rem 0 4rem;
  text-align: center;
  position: relative;
  overflow: hidden;
  background: radial-gradient(circle at top, rgba(0, 112, 243, 0.04) 0%, transparent 60%);
}

.text-gradient {
  background: linear-gradient(135deg, var(--m360-secondary) 0%, var(--m360-text-muted) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  color: transparent;
}
.text-gradient-primary {
  background: linear-gradient(135deg, var(--m360-primary) 0%, #7928ca 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  color: transparent;
}

/* ==========================================================================
   SECTION SPACING (8px Base)
   ========================================================================== */
.section-py { padding-top: 5rem; padding-bottom: 5rem; }
@media (max-width: 768px) { .section-py { padding-top: 3rem; padding-bottom: 3rem; } }

/* Badge CRO */
.badge-cro {
  background: var(--m360-bg);
  color: var(--m360-text-main);
  font-weight: 600;
  padding: 0.25rem 0.75rem;
  border-radius: var(--radius-full);
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  border: 1px solid var(--m360-border);
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
}

/* Feature Grid Cards */
.m360-feature-grid-card {
  padding: 1.5rem;
  background: var(--m360-surface);
  border: 1px solid var(--m360-border);
  border-radius: var(--radius-lg);
  transition: var(--transition-smooth);
  display: flex;
  flex-direction: column;
  gap: 1rem;
  height: 100%;
}
.m360-feature-grid-card:hover {
  box-shadow: var(--shadow-md);
  border-color: var(--m360-border-strong);
}

.icon-box {
  width: 48px;
  height: 48px;
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.25rem;
  background: var(--m360-bg);
  border: 1px solid var(--m360-border);
  color: var(--m360-secondary);
}

/* Timeline/Process */
.m360-timeline-number {
  width: 40px;
  height: 40px;
  border-radius: var(--radius-full);
  background: var(--m360-secondary);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 1rem;
  margin: 0 auto 1rem;
}

/* Single Global Floating CTA */
.m360-floating-cta {
  position: fixed;
  bottom: 24px;
  right: 24px;
  z-index: 1040;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: var(--m360-whatsapp);
  color: #fff;
  box-shadow: 0 4px 20px rgba(37, 211, 102, 0.4);
  font-size: 32px;
  transition: var(--transition-spring);
  text-decoration: none;
}
.m360-floating-cta:hover {
  transform: translateY(-4px) scale(1.05);
  background: var(--m360-whatsapp-hover);
  color: #fff;
  box-shadow: 0 8px 25px rgba(37, 211, 102, 0.5);
}
@media (max-width: 768px) {
  .m360-floating-cta {
    bottom: 16px;
    right: 16px;
    width: 50px;
    height: 50px;
    font-size: 24px;
  }
}

/* Mobile Drawer (Same logic but better styles) */
.m360-drawer-backdrop {
  position: fixed; top: 0; left: 0; width: 100vw; height: 100vh;
  background: rgba(0, 0, 0, 0.4); backdrop-filter: blur(4px);
  z-index: 1040; opacity: 0; visibility: hidden; transition: var(--transition-smooth);
}
.m360-drawer-backdrop.is-open { opacity: 1; visibility: visible; }
.m360-mobile-drawer {
  position: fixed; top: 0; right: 0; width: 320px; max-width: 85vw; height: 100vh;
  background: var(--m360-surface); z-index: 1050; padding: 1.5rem;
  box-shadow: var(--shadow-xl); display: flex; flex-direction: column;
  transform: translateX(100%); transition: transform 0.4s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.m360-mobile-drawer.is-open { transform: translateX(0); }

/* ==========================================================================
   M360 NATIVE GRID & LAYOUT SYSTEM (Replacing Bootstrap)
   ========================================================================== */
.container, .container-fluid, .container-xxl, .container-xl, .container-lg, .container-md, .container-sm { 
  width: 100%; 
  margin-right: auto; 
  margin-left: auto; 
  padding-right: 24px; 
  padding-left: 24px; 
  max-width: 1400px; 
}

@media (max-width: 576px) {
  .container, .container-fluid, .container-xxl, .container-xl, .container-lg, .container-md, .container-sm { 
    padding-right: 16px; 
    padding-left: 16px; 
  }
}

.row {
  --m360-gutter-x: 1.5rem;
  --m360-gutter-y: 0;
  display: flex;
  flex-wrap: wrap;
  margin-top: calc(-1 * var(--m360-gutter-y));
  margin-right: calc(-0.5 * var(--m360-gutter-x));
  margin-left: calc(-0.5 * var(--m360-gutter-x));
}
.row > * {
  box-sizing: border-box;
  flex-shrink: 0;
  width: 100%;
  max-width: 100%;
  padding-right: calc(0.5 * var(--m360-gutter-x));
  padding-left: calc(0.5 * var(--m360-gutter-x));
  margin-top: var(--m360-gutter-y);
}

/* Grid Columns */
.col-1 { flex: 0 0 auto; width: 8.33333333%; }
.col-2 { flex: 0 0 auto; width: 16.66666667%; }
.col-3 { flex: 0 0 auto; width: 25%; }
.col-4 { flex: 0 0 auto; width: 33.33333333%; }
.col-5 { flex: 0 0 auto; width: 41.66666667%; }
.col-6 { flex: 0 0 auto; width: 50%; }
.col-7 { flex: 0 0 auto; width: 58.33333333%; }
.col-8 { flex: 0 0 auto; width: 66.66666667%; }
.col-9 { flex: 0 0 auto; width: 75%; }
.col-10 { flex: 0 0 auto; width: 83.33333333%; }
.col-11 { flex: 0 0 auto; width: 91.66666667%; }
.col-12 { flex: 0 0 auto; width: 100%; }

@media (min-width: 768px) {
  .col-md-1 { flex: 0 0 auto; width: 8.33333333%; }
  .col-md-2 { flex: 0 0 auto; width: 16.66666667%; }
  .col-md-3 { flex: 0 0 auto; width: 25%; }
  .col-md-4 { flex: 0 0 auto; width: 33.33333333%; }
  .col-md-5 { flex: 0 0 auto; width: 41.66666667%; }
  .col-md-6 { flex: 0 0 auto; width: 50%; }
  .col-md-7 { flex: 0 0 auto; width: 58.33333333%; }
  .col-md-8 { flex: 0 0 auto; width: 66.66666667%; }
  .col-md-9 { flex: 0 0 auto; width: 75%; }
  .col-md-10 { flex: 0 0 auto; width: 83.33333333%; }
  .col-md-11 { flex: 0 0 auto; width: 91.66666667%; }
  .col-md-12 { flex: 0 0 auto; width: 100%; }
}

@media (min-width: 992px) {
  .col-lg-1 { flex: 0 0 auto; width: 8.33333333%; }
  .col-lg-2 { flex: 0 0 auto; width: 16.66666667%; }
  .col-lg-3 { flex: 0 0 auto; width: 25%; }
  .col-lg-4 { flex: 0 0 auto; width: 33.33333333%; }
  .col-lg-5 { flex: 0 0 auto; width: 41.66666667%; }
  .col-lg-6 { flex: 0 0 auto; width: 50%; }
  .col-lg-7 { flex: 0 0 auto; width: 58.33333333%; }
  .col-lg-8 { flex: 0 0 auto; width: 66.66666667%; }
  .col-lg-9 { flex: 0 0 auto; width: 75%; }
  .col-lg-10 { flex: 0 0 auto; width: 83.33333333%; }
  .col-lg-11 { flex: 0 0 auto; width: 91.66666667%; }
  .col-lg-12 { flex: 0 0 auto; width: 100%; }
}

@media (min-width: 1200px) {
  .col-xl-1 { flex: 0 0 auto; width: 8.33333333%; }
  .col-xl-2 { flex: 0 0 auto; width: 16.66666667%; }
  .col-xl-3 { flex: 0 0 auto; width: 25%; }
  .col-xl-4 { flex: 0 0 auto; width: 33.33333333%; }
  .col-xl-5 { flex: 0 0 auto; width: 41.66666667%; }
  .col-xl-6 { flex: 0 0 auto; width: 50%; }
  .col-xl-7 { flex: 0 0 auto; width: 58.33333333%; }
  .col-xl-8 { flex: 0 0 auto; width: 66.66666667%; }
  .col-xl-9 { flex: 0 0 auto; width: 75%; }
  .col-xl-10 { flex: 0 0 auto; width: 83.33333333%; }
  .col-xl-11 { flex: 0 0 auto; width: 91.66666667%; }
  .col-xl-12 { flex: 0 0 auto; width: 100%; }
}

/* Flexbox Utilities */
.d-flex { display: flex !important; }
.d-inline-flex { display: inline-flex !important; }
.d-block { display: block !important; }
.d-inline-block { display: inline-block !important; }
.d-none { display: none !important; }
@media (min-width: 576px) {
  .d-sm-block { display: block !important; } .d-sm-flex { display: flex !important; } .d-sm-none { display: none !important; }
  .flex-sm-row { flex-direction: row !important; } .flex-sm-column { flex-direction: column !important; }
}
@media (min-width: 768px) {
  .d-md-block { display: block !important; } .d-md-flex { display: flex !important; } .d-md-none { display: none !important; }
  .flex-md-row { flex-direction: row !important; } .flex-md-column { flex-direction: column !important; }
  .text-md-start { text-align: left !important; } .text-md-center { text-align: center !important; } .text-md-end { text-align: right !important; }
}
@media (min-width: 992px) {
  .d-lg-block { display: block !important; } .d-lg-flex { display: flex !important; } .d-lg-none { display: none !important; }
  .flex-lg-row { flex-direction: row !important; } .flex-lg-column { flex-direction: column !important; }
  .text-lg-start { text-align: left !important; } .text-lg-center { text-align: center !important; } .text-lg-end { text-align: right !important; }
}
@media (min-width: 1200px) {
  .d-xl-block { display: block !important; } .d-xl-flex { display: flex !important; } .d-xl-none { display: none !important; }
  .flex-xl-row { flex-direction: row !important; } .flex-xl-column { flex-direction: column !important; }
}

.flex-column { flex-direction: column !important; }
.flex-row { flex-direction: row !important; }
.flex-wrap { flex-wrap: wrap !important; }
.flex-fill { flex: 1 1 auto !important; }

.align-items-center { align-items: center !important; }
.align-items-start { align-items: flex-start !important; }
.align-items-end { align-items: flex-end !important; }
.justify-content-center { justify-content: center !important; }
.justify-content-between { justify-content: space-between !important; }
.justify-content-start { justify-content: flex-start !important; }
.justify-content-end { justify-content: flex-end !important; }

/* Gaps */
.gap-1 { gap: 0.25rem !important; }
.gap-2 { gap: 0.5rem !important; }
.gap-3 { gap: 1rem !important; }
.gap-4 { gap: 1.5rem !important; }
.gap-5 { gap: 3rem !important; }

.g-1 { --m360-gutter-x: 0.25rem; --m360-gutter-y: 0.25rem; }
.g-2 { --m360-gutter-x: 0.5rem; --m360-gutter-y: 0.5rem; }
.g-3 { --m360-gutter-x: 1rem; --m360-gutter-y: 1rem; }
.g-4 { --m360-gutter-x: 1.5rem; --m360-gutter-y: 1.5rem; }
.g-5 { --m360-gutter-x: 3rem; --m360-gutter-y: 3rem; }

/* Margins */
.m-0 { margin: 0 !important; }
.mt-0 { margin-top: 0 !important; }
.mb-0 { margin-bottom: 0 !important; }
.my-0 { margin-top: 0 !important; margin-bottom: 0 !important; }
.mx-0 { margin-left: 0 !important; margin-right: 0 !important; }
.mx-auto { margin-left: auto !important; margin-right: auto !important; }
.ms-auto { margin-left: auto !important; }
.me-auto { margin-right: auto !important; }

.m-1 { margin: 0.25rem !important; }
.mt-1 { margin-top: 0.25rem !important; }
.mb-1 { margin-bottom: 0.25rem !important; }
.me-1 { margin-right: 0.25rem !important; }
.ms-1 { margin-left: 0.25rem !important; }

.m-2 { margin: 0.5rem !important; }
.mt-2 { margin-top: 0.5rem !important; }
.mb-2 { margin-bottom: 0.5rem !important; }
.me-2 { margin-right: 0.5rem !important; }
.ms-2 { margin-left: 0.5rem !important; }

.m-3 { margin: 1rem !important; }
.mt-3 { margin-top: 1rem !important; }
.mb-3 { margin-bottom: 1rem !important; }
.me-3 { margin-right: 1rem !important; }
.ms-3 { margin-left: 1rem !important; }

.m-4 { margin: 1.5rem !important; }
.mt-4 { margin-top: 1.5rem !important; }
.mb-4 { margin-bottom: 1.5rem !important; }
.me-4 { margin-right: 1.5rem !important; }
.ms-4 { margin-left: 1.5rem !important; }
.my-4 { margin-top: 1.5rem !important; margin-bottom: 1.5rem !important; }

.m-5 { margin: 3rem !important; }
.mt-5 { margin-top: 3rem !important; }
.mb-5 { margin-bottom: 3rem !important; }
.me-5 { margin-right: 3rem !important; }
.ms-5 { margin-left: 3rem !important; }
.my-5 { margin-top: 3rem !important; margin-bottom: 3rem !important; }

.mt-auto { margin-top: auto !important; }
.mb-auto { margin-bottom: auto !important; }

/* Paddings */
.p-0 { padding: 0 !important; }
.pt-0 { padding-top: 0 !important; }
.pb-0 { padding-bottom: 0 !important; }
.py-0 { padding-top: 0 !important; padding-bottom: 0 !important; }
.px-0 { padding-left: 0 !important; padding-right: 0 !important; }

.p-1 { padding: 0.25rem !important; }
.pt-1 { padding-top: 0.25rem !important; }
.pb-1 { padding-bottom: 0.25rem !important; }
.px-1 { padding-left: 0.25rem !important; padding-right: 0.25rem !important; }
.py-1 { padding-top: 0.25rem !important; padding-bottom: 0.25rem !important; }
.pe-1 { padding-right: 0.25rem !important; }
.ps-1 { padding-left: 0.25rem !important; }

.p-2 { padding: 0.5rem !important; }
.pt-2 { padding-top: 0.5rem !important; }
.pb-2 { padding-bottom: 0.5rem !important; }
.px-2 { padding-left: 0.5rem !important; padding-right: 0.5rem !important; }
.py-2 { padding-top: 0.5rem !important; padding-bottom: 0.5rem !important; }
.pe-2 { padding-right: 0.5rem !important; }
.ps-2 { padding-left: 0.5rem !important; }

.p-3 { padding: 1rem !important; }
.pt-3 { padding-top: 1rem !important; }
.pb-3 { padding-bottom: 1rem !important; }
.px-3 { padding-left: 1rem !important; padding-right: 1rem !important; }
.py-3 { padding-top: 1rem !important; padding-bottom: 1rem !important; }
.pe-3 { padding-right: 1rem !important; }
.ps-3 { padding-left: 1rem !important; }

.p-4 { padding: 1.5rem !important; }
.pt-4 { padding-top: 1.5rem !important; }
.pb-4 { padding-bottom: 1.5rem !important; }
.px-4 { padding-left: 1.5rem !important; padding-right: 1.5rem !important; }
.py-4 { padding-top: 1.5rem !important; padding-bottom: 1.5rem !important; }

.p-5 { padding: 3rem !important; }
.pt-5 { padding-top: 3rem !important; }
.pb-5 { padding-bottom: 3rem !important; }
.px-5 { padding-left: 3rem !important; padding-right: 3rem !important; }
.py-5 { padding-top: 3rem !important; padding-bottom: 3rem !important; }

@media (min-width: 768px) {
  .p-md-4 { padding: 1.5rem !important; }
  .p-md-5 { padding: 3rem !important; }
}

/* Colors & Backgrounds */
.text-primary { color: var(--m360-primary) !important; }
.text-secondary { color: var(--m360-secondary) !important; }
.text-success { color: var(--m360-whatsapp) !important; }
.text-danger { color: var(--m360-danger, #ef4444) !important; }
.text-warning { color: var(--m360-warning, #f59e0b) !important; }
.text-info { color: var(--m360-info, #06b6d4) !important; }
.text-white { color: #fff !important; }
.text-dark { color: var(--m360-secondary) !important; }

.bg-primary { background-color: var(--m360-primary) !important; }
.bg-white { background-color: #fff !important; }
.bg-light { background-color: var(--m360-bg) !important; }
.bg-dark { background-color: var(--m360-secondary) !important; }
.bg-success { background-color: var(--m360-whatsapp) !important; }
.bg-danger { background-color: var(--m360-danger, #ef4444) !important; }
.bg-warning { background-color: var(--m360-warning, #f59e0b) !important; }
.bg-info { background-color: var(--m360-info, #06b6d4) !important; }

/* Text Alignment & Decoration */
.text-center { text-align: center !important; }
.text-start { text-align: left !important; }
.text-end { text-align: right !important; }
.text-decoration-none { text-decoration: none !important; }
.text-uppercase { text-transform: uppercase !important; }
.text-truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fw-bold { font-weight: 700 !important; }
.fw-semibold { font-weight: 600 !important; }
.fw-medium { font-weight: 500 !important; }
.fw-normal { font-weight: 400 !important; }
.fs-1 { font-size: 2.5rem !important; }
.fs-2 { font-size: 2rem !important; }
.fs-3 { font-size: 1.75rem !important; }
.fs-4 { font-size: 1.5rem !important; }
.fs-5 { font-size: 1.25rem !important; }
.fs-6 { font-size: 1rem !important; }

/* Borders & Shadows & Radius */
.border { border: 1px solid var(--m360-border) !important; }
.border-0 { border: 0 !important; }
.border-top { border-top: 1px solid var(--m360-border) !important; }
.border-bottom { border-bottom: 1px solid var(--m360-border) !important; }
.shadow-sm { box-shadow: var(--shadow-sm) !important; }
.shadow { box-shadow: var(--shadow-md) !important; }
.shadow-lg { box-shadow: var(--shadow-lg) !important; }
.shadow-xl { box-shadow: var(--shadow-xl) !important; }

.rounded { border-radius: var(--radius-sm) !important; }
.rounded-md { border-radius: var(--radius-md) !important; }
.rounded-lg { border-radius: var(--radius-lg) !important; }
.rounded-xl { border-radius: var(--radius-xl) !important; }
.rounded-pill, .rounded-full { border-radius: var(--radius-full) !important; }
.rounded-circle { border-radius: 50% !important; }

/* Positions */
.position-relative { position: relative !important; }
.position-absolute { position: absolute !important; }
.position-fixed { position: fixed !important; }
.top-0 { top: 0 !important; }
.top-50 { top: 50% !important; }
.bottom-0 { bottom: 0 !important; }
.start-0 { left: 0 !important; }
.start-50 { left: 50% !important; }
.end-0 { right: 0 !important; }
.translate-middle { transform: translate(-50%, -50%) !important; }
.translate-middle-y { transform: translateY(-50%) !important; }
.translate-middle-x { transform: translateX(-50%) !important; }
.z-1 { z-index: 1 !important; }
.z-2 { z-index: 2 !important; }
.z-3 { z-index: 3 !important; }

/* Others */
.w-100 { width: 100% !important; }
.h-100 { height: 100% !important; }
.w-50 { width: 50% !important; }
.opacity-50 { opacity: 0.5 !important; }
.overflow-hidden { overflow: hidden !important; }
.flex-shrink-0 { flex-shrink: 0 !important; }
.tracking-wide { letter-spacing: 0.025em !important; }
.leading-tight { line-height: 1.25 !important; }
.leading-relaxed { line-height: 1.625 !important; }
.mx-auto { margin-left: auto !important; margin-right: auto !important; }
/* ==========================================================================
   MERKEZ360 DEMO PLATFORMU V1.0 — SUPPLEMENTARY STYLES
   ========================================================================== */

/* ==========================================================================
   PREMIUM FORMS & INPUTS (Linear / Stripe Style)
   ========================================================================== */
.form-label {
  display: block;
  margin-bottom: 0.5rem;
}
.form-control, .form-select {
  display: block;
  width: 100%;
  border: 1px solid rgba(0,0,0,0.1);
  border-radius: var(--radius-md);
  padding: 0.75rem 1rem;
  font-size: 0.875rem;
  background-color: #fff;
  transition: var(--transition-fast);
  box-shadow: 0 1px 2px rgba(0,0,0,0.02);
  color: var(--m360-text-main);
}
.form-control:hover, .form-select:hover {
  border-color: rgba(0, 112, 243, 0.3);
}
.form-control:focus, .form-select:focus {
  border-color: var(--m360-primary);
  box-shadow: 0 0 0 3px rgba(0, 112, 243, 0.15);
  outline: none;
}
.form-control::placeholder {
  color: #adb5bd;
}

/* Base Spacing for Vercel/Apple Feel */
.section-py { padding-top: 5rem; padding-bottom: 5rem; }
@media (min-width: 1024px) {
  .section-py { padding-top: 6rem; padding-bottom: 6rem; }
}

/* ==========================================================================
   PREMIUM FAQ (Grouped Vercel Style)
   ========================================================================== */
.m360-premium-faq .accordion-item {
  background: transparent;
  transition: background 0.2s ease;
}
.m360-premium-faq .accordion-item:hover {
  background: #fcfcfc;
}
.m360-premium-faq .accordion-button:not(.collapsed) {
  color: var(--m360-primary);
  background: transparent;
  box-shadow: none;
}
.m360-premium-faq .accordion-button::after {
  filter: grayscale(1);
  opacity: 0.4;
  transition: transform var(--transition-smooth);
}
.m360-premium-faq .accordion-button:not(.collapsed)::after {
  filter: none;
  opacity: 1;
}
.m360-premium-faq .accordion-button:focus {
  outline: none;
  box-shadow: none;
}

/* Showcase Code Snippet Styling */
.m360-code-block {
  background: #1e293b;
  color: #f8fafc;
  padding: 1.25rem;
  border-radius: var(--m360-radius-md);
  font-family: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  font-size: 0.875rem;
  overflow-x: auto;
}

/* Feature Badge */
.badge-cro {
  background: rgba(16, 185, 129, 0.15);
  color: #047857;
  font-weight: 700;
  padding: 0.25rem 0.625rem;
  border-radius: var(--radius-sm);
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

/* ==========================================================================
   ADMIN PANEL SPECIFIC LAYOUT & COMPONENTS
   ========================================================================== */
/* ---- Admin Sidebar Layout ---- */
.sidebar{
  width:264px;min-height:100vh;background:var(--m360-surface);border-right:1px solid var(--m360-border);
  padding:1.25rem .75rem;display:flex;flex-direction:column;gap:.25rem;
  position:fixed;top:0;left:0;overflow-y:auto;z-index:100
}
.sidebar::-webkit-scrollbar{width:4px}.sidebar::-webkit-scrollbar-thumb{background:var(--m360-border);border-radius:4px}
.sidebar-brand{display:flex;align-items:center;gap:.75rem;padding:.5rem .75rem;margin-bottom:1rem; text-decoration:none}
.sidebar-brand-icon{width:38px;height:38px;border-radius:var(--radius-md);background:linear-gradient(135deg,var(--m360-primary),#60a5fa);display:flex;align-items:center;justify-content:center;color:#fff;font-size:1.1rem;flex-shrink:0}
.sidebar-brand-title{font-family:var(--font-display);font-weight:800;font-size:.95rem;color:var(--m360-text-main)}
.sidebar-brand-sub{font-size:.6rem;color:var(--m360-primary);font-weight:600;letter-spacing:.5px}
.nav-group-label{font-size:.63rem;font-weight:700;color:var(--m360-text-muted);text-transform:uppercase;letter-spacing:.6px;padding:.9rem .75rem .3rem}
.nav-link{display:flex;align-items:center;gap:.7rem;padding:.55rem .75rem;border-radius:var(--radius-sm);color:var(--m360-text-muted);text-decoration:none;font-size:.83rem;font-weight:500;transition:var(--transition-fast)}
.nav-link i{font-size:1rem;width:1.1rem;text-align:center}
.nav-link:hover{background:var(--m360-primary-light);color:var(--m360-text-main)}
.nav-link.active{background:var(--m360-primary-light);color:var(--m360-primary);font-weight:600}

/* ---- Admin Main Content & Responsive Header ---- */
.main{margin-left:264px;flex:1;padding:2.5rem 3rem;min-height:100vh}
.mobile-header { display: none; background: var(--m360-surface); padding: 1rem 1.25rem; border-bottom: 1px solid var(--m360-border); align-items: center; justify-content: space-between; position: sticky; top: 0; z-index: 90; }
.sidebar-overlay { display: none; position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0,0,0,0.6); z-index: 99; backdrop-filter: blur(3px); }
@media(max-width:900px){
  .main{margin-left:0;padding:1.25rem}
  .mobile-header { display: flex; }
  .sidebar{ transform: translateX(-100%); transition: transform 0.3s ease; }
  .sidebar.open { transform: translateX(0); }
  .sidebar-overlay.open { display: block; }
}

/* ---- Admin Page Header ---- */
.page-header{display:flex;align-items:flex-end;justify-content:space-between;margin-bottom:2rem}
.page-header h2{font-family:var(--font-display);font-size:1.55rem;font-weight:800;color:var(--m360-text-main); margin-bottom: 0;}
.page-header p{color:var(--m360-text-muted);font-size:.85rem;margin-top:.2rem; margin-bottom: 0;}

/* ---- Admin Tables ---- */
.m360-table-wrap{overflow-x:auto}
.m360-table{width:100%;border-collapse:collapse}
.m360-table th{font-size:.72rem;font-weight:700;color:var(--m360-text-muted);text-transform:uppercase;letter-spacing:.5px;padding:.8rem 1rem;border-bottom:1px solid var(--m360-border);white-space:nowrap;background:var(--m360-surface);text-align:left;}
.m360-table td{padding:.85rem 1rem;border-bottom:1px solid var(--m360-border);font-size:.85rem;color:var(--m360-text-main);text-align:left;}
.m360-table tr:hover td{background:rgba(255,255,255,0.02);}
.m360-table tr:last-child td{border-bottom:none}

/* ---- Admin Dashboard Stat Elements ---- */
.m360-card-admin-stat { display: flex; flex-direction: column; gap: 0.5rem; }
.stat-icon{width:46px;height:46px;border-radius:var(--radius-md);display:flex;align-items:center;justify-content:center;font-size:1.35rem;flex-shrink:0; background: var(--m360-bg); border: 1px solid var(--m360-border);}
.stat-label{font-size:.7rem;font-weight:700;color:var(--m360-text-muted);text-transform:uppercase;letter-spacing:.5px}
.stat-value{font-family:var(--font-display);font-size:2.1rem;font-weight:800;color:var(--m360-text-main);line-height:1;margin:.35rem 0}

/* ---- CMS Media Library ---- */
.media-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 1rem; }
.media-item { border: 1px solid var(--m360-border); border-radius: var(--radius-sm); overflow: hidden; background: var(--m360-surface); cursor: pointer; transition: 0.2s; position: relative; }
.media-item:hover { border-color: var(--m360-primary); }
.media-item img { width: 100%; height: 120px; object-fit: cover; }
.media-info { padding: 0.5rem; font-size: 0.75rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--m360-text-muted); }
.media-item.selected { border-color: var(--m360-primary); box-shadow: 0 0 0 2px var(--m360-primary); }

/* ---- Unified Badges ---- */
.badge{display:inline-flex;align-items:center;font-size:.68rem;font-weight:700;padding:.25rem .75rem;border-radius:var(--radius-full);text-transform:uppercase;letter-spacing:.5px}
.badge-success{background:rgba(37,211,102,.15);color:var(--m360-whatsapp)}
.badge-warning{background:rgba(245,158,11,.15);color:var(--m360-warning, #f59e0b)}
.badge-danger{background:rgba(239,68,68,.15);color:var(--m360-danger, #ef4444)}
.badge-info{background:rgba(6,182,212,.15);color:var(--m360-info, #06b6d4)}
.badge-muted{background:rgba(161,161,170,.1);color:var(--m360-text-muted)}
.badge-primary{background:var(--m360-primary-light);color:var(--m360-primary)}

/* ---- Unified Alerts ---- */
.alert{display:flex;align-items:center;gap:.75rem;padding:.9rem 1.25rem;border-radius:var(--radius-md);margin-bottom:1.5rem;font-size:.88rem; border: 1px solid transparent;}
.alert-success{background:rgba(37,211,102,.1);border-color:rgba(37,211,102,.25);color:var(--m360-whatsapp)}
.alert-error, .alert-danger{background:rgba(239,68,68,.1);border-color:rgba(239,68,68,.25);color:var(--m360-danger, #ef4444)}
.alert-info{background:rgba(6,182,212,.1);border-color:rgba(6,182,212,.25);color:var(--m360-info, #06b6d4)}

/* ---- Unified Form Grids ---- */
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:1.25rem}
@media(max-width:768px) { .form-grid { grid-template-columns: 1fr; } }
.form-group{display:flex;flex-direction:column;gap:.4rem; margin-bottom: 1rem;}
.form-group.full{grid-column:1/-1}
.form-actions{display:flex;justify-content:flex-end;gap:.75rem;padding-top:1rem;border-top:1px solid var(--m360-border);margin-top:1rem}

/* ---- Color bg helpers ---- */
.bg-primary-soft{background:var(--m360-primary-light);color:var(--m360-primary)}
.bg-success-soft{background:rgba(37,211,102,.12);color:var(--m360-whatsapp)}
.bg-warning-soft{background:rgba(245,158,11,.12);color:var(--m360-warning, #f59e0b)}
.bg-danger-soft{background:rgba(239,68,68,.12);color:var(--m360-danger, #ef4444)}
.bg-info-soft{background:rgba(6,182,212,.12);color:var(--m360-info, #06b6d4)}