/* Amp & String — 2-ci səhifə: catalog.css */

.as-main--catalog {
  padding-top: 88px;
}

/* =========================
   SEKSİYA 1: KATALOQ HERO
   ========================= */

.as-cat-hero {
  position: relative;
}

.as-cat-hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1.2fr);
  gap: 32px;
  align-items: center;
}

.as-cat-hero-text {
  max-width: 560px;
}

.as-page-kicker {
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--as-accent-alt);
  margin-bottom: 8px;
}

.as-page-title {
  font-family: var(--as-font-display);
  font-size: 28px;
  line-height: 1.3;
  margin: 0 0 10px;
}

.as-page-lead {
  margin: 0 0 16px;
  font-size: 14px;
  line-height: 1.7;
  color: var(--as-text-muted);
}

.as-cat-filter-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 10px;
}

.as-cat-filter-pill {
  font-size: 11px;
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  background: radial-gradient(circle at 0 0, rgba(51, 255, 214, 0.24), rgba(7, 7, 30, 0.98));
  color: var(--as-text-main);
}

.as-cat-mini-note {
  margin: 0;
  font-size: 12px;
  color: var(--as-text-soft);
}

/* Hero qalereya */

.as-cat-hero-gallery {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 12px;
  align-content: center;
}

.as-cat-hero-card {
  border-radius: 20px;
  padding: 10px;
  background: radial-gradient(circle at 0 0, rgba(192, 103, 255, 0.2), rgba(7, 7, 28, 0.98));
  border: 1px solid rgba(255, 255, 255, 0.18);
  box-shadow: 0 18px 42px rgba(0, 0, 0, 0.85);
  overflow: hidden;
  transition:
    transform var(--as-transition-fast),
    box-shadow var(--as-transition-fast),
    border-color var(--as-transition-fast);
}

.as-cat-hero-card--keys {
  transform: translateX(12px);
}

.as-cat-hero-card--mics {
  transform: translateX(20px);
}

.as-cat-hero-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--as-shadow-neon);
  border-color: rgba(255, 255, 255, 0.3);
}

.as-cat-hero-img {
  width: 100%;
  max-width: 350px;
  height: auto;
  display: block;
}

.as-cat-hero-caption {
  margin: 6px 2px 0;
  font-size: 11px;
  line-height: 1.5;
  color: var(--as-text-soft);
}

/* =========================
   SEKSİYA 2: ALƏT AİLƏLƏRİ
   ========================= */

.as-cat-families-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
}

.as-cat-family {
  border-radius: 20px;
  padding: 10px 10px 12px;
  background: radial-gradient(circle at 0 0, rgba(51, 255, 214, 0.18), rgba(7, 7, 30, 0.98));
  border: 1px solid rgba(255, 255, 255, 0.18);
  box-shadow: 0 16px 38px rgba(0, 0, 0, 0.85);
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.as-cat-family-thumb {
  border-radius: 14px;
  overflow: hidden;
}

.as-cat-family-img {
  width: 100%;
  height: auto;
  max-width: 350px;
  display: block;
}

.as-cat-family-title {
  margin: 4px 0 0;
  font-size: 15px;
}

.as-cat-family-text {
  margin: 0;
  font-size: 13px;
  color: var(--as-text-muted);
}

.as-cat-family-list {
  margin: 6px 0 0;
  padding-left: 16px;
  font-size: 12px;
  line-height: 1.6;
  color: var(--as-text-soft);
}

.as-cat-family-list li + li {
  margin-top: 3px;
}

/* =========================
   SEKSİYA 3: BÜDCƏ SETLƏRİ
   ========================= */

.as-cat-budget-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(0, 1.1fr);
  gap: 30px;
  align-items: center;
}

.as-budget-lines {
  margin-top: 12px;
  display: grid;
  gap: 8px;
}

.as-budget-line {
  border-radius: 16px;
  padding: 8px 10px;
  background: linear-gradient(
      120deg,
      rgba(8, 8, 32, 0.96),
      rgba(18, 18, 50, 0.98)
    );
  border: 1px solid rgba(255, 255, 255, 0.14);
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.85);
}

.as-budget-tag {
  display: inline-flex;
  padding: 3px 8px;
  border-radius: 999px;
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  background: radial-gradient(circle at 0 0, rgba(51, 255, 214, 0.34), rgba(7, 7, 30, 0.96));
  color: var(--as-text-main);
  margin-bottom: 3px;
}

.as-budget-text {
  margin: 0;
  font-size: 12px;
  line-height: 1.6;
  color: var(--as-text-muted);
}

/* Vizual sütun */

.as-cat-budget-column--visual {
  display: grid;
  gap: 10px;
  justify-items: flex-end;
}

.as-budget-frame {
  max-width: 260px;
  border-radius: 18px;
  padding: 9px;
  background: radial-gradient(circle at 100% 0, rgba(255, 179, 71, 0.22), rgba(7, 7, 28, 0.98));
  border: 1px solid rgba(255, 255, 255, 0.18);
  box-shadow: var(--as-shadow-soft);
}

.as-budget-frame--stickers {
  transform: translateX(-10px);
}

.as-budget-img {
  width: 100%;
  height: auto;
  max-width: 350px;
  display: block;
}

/* =========================
   RESPONSIVE
   ========================= */

@media (max-width: 960px) {
  .as-cat-hero-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .as-cat-hero-gallery {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .as-cat-hero-card--keys,
  .as-cat-hero-card--mics {
    transform: none;
  }

  .as-cat-families-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .as-cat-budget-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .as-cat-budget-column--visual {
    justify-items: flex-start;
  }

  .as-budget-frame--stickers {
    transform: none;
  }
}

@media (max-width: 700px) {
  .as-cat-hero-gallery {
    grid-template-columns: minmax(0, 1fr);
  }

  .as-cat-families-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 480px) {
  .as-page-title {
    font-size: 24px;
  }

  .as-cat-hero-card,
  .as-cat-family,
  .as-budget-frame {
    border-radius: 18px;
  }
}
/* =========================
   SEKSİYA 4: GİTARA XƏTTİ
   ========================= */

.as-cat-guitars {
  position: relative;
}

.as-cat-line-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(0, 1.3fr);
  gap: 28px;
  align-items: flex-start;
}

.as-cat-line-tags {
  margin-top: 10px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.as-cat-line-tag {
  font-size: 11px;
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  background: radial-gradient(circle at 0 0, rgba(255, 179, 71, 0.22), rgba(7, 7, 30, 0.98));
  color: var(--as-text-main);
}

.as-cat-line-list {
  display: grid;
  gap: 10px;
}

.as-cat-line-item {
  border-radius: 18px;
  padding: 9px 10px;
  background: linear-gradient(
      120deg,
      rgba(8, 8, 32, 0.96),
      rgba(18, 18, 50, 0.98)
    );
  border: 1px solid rgba(255, 255, 255, 0.16);
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.85);
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) auto;
  gap: 12px;
  align-items: center;
}

.as-cat-line-title {
  margin: 0 0 4px;
  font-size: 15px;
}

.as-cat-line-desc {
  margin: 0;
  font-size: 12px;
  line-height: 1.6;
  color: var(--as-text-muted);
}

.as-cat-line-thumb {
  border-radius: 14px;
  overflow: hidden;
}

.as-cat-line-img {
  width: 100%;
  height: auto;
  max-width: 350px;
  display: block;
}

/* =========================
   SEKSİYA 5: KLAVYE & SYNTH
   ========================= */

.as-cat-keys-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(0, 1.3fr);
  gap: 30px;
  align-items: center;
}

.as-cat-keys-visual {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-auto-rows: 120px;
  gap: 8px;
}

.as-cat-keys-tile {
  border-radius: 16px;
  overflow: hidden;
  position: relative;
}

.as-cat-keys-tile--wide {
  grid-column: 1 / -1;
  grid-row: 1 / span 2;
}

.as-cat-keys-img {
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  display: block;
}

.as-cat-keys-info .as-section-title {
  margin-bottom: 10px;
}

.as-cat-keys-lines {
  margin-top: 8px;
  display: grid;
  gap: 8px;
}

.as-cat-keys-row {
  border-radius: 16px;
  padding: 8px 10px;
  background: radial-gradient(circle at 0 0, rgba(51, 255, 214, 0.22), rgba(8, 8, 32, 0.98));
  border: 1px solid rgba(255, 255, 255, 0.16);
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.85);
}

.as-cat-keys-badge {
  display: inline-flex;
  padding: 3px 8px;
  border-radius: 999px;
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  margin-bottom: 2px;
  background: radial-gradient(circle at 0 0, rgba(192, 103, 255, 0.32), rgba(7, 7, 30, 0.96));
  color: var(--as-text-main);
}

.as-cat-keys-text {
  margin: 0;
  font-size: 12px;
  line-height: 1.6;
  color: var(--as-text-muted);
}

/* =========================
   SEKSİYA 6: MONITOR & QULAQCIQ
   ========================= */

.as-cat-monitor-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1.1fr);
  gap: 30px;
  align-items: center;
}

.as-monitor-lines {
  margin-top: 10px;
  display: grid;
  gap: 8px;
}

.as-monitor-row {
  border-radius: 16px;
  padding: 8px 10px;
  background: linear-gradient(
      120deg,
      rgba(8, 8, 32, 0.96),
      rgba(18, 18, 50, 0.98)
    );
  border: 1px solid rgba(255, 255, 255, 0.16);
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.9);
}

.as-monitor-title {
  margin: 0 0 2px;
  font-size: 14px;
}

.as-monitor-text {
  margin: 0;
  font-size: 12px;
  line-height: 1.6;
  color: var(--as-text-muted);
}

.as-cat-monitor-photo {
  display: flex;
  justify-content: flex-end;
}

.as-cat-monitor-frame {
  max-width: 260px;
  border-radius: 20px;
  padding: 10px;
  background: radial-gradient(circle at 100% 0, rgba(51, 255, 214, 0.22), rgba(7, 7, 28, 0.98));
  border: 1px solid rgba(255, 255, 255, 0.18);
  box-shadow: var(--as-shadow-soft);
}

.as-cat-monitor-caption {
  margin: 6px 2px 0;
  font-size: 11px;
  line-height: 1.5;
  color: var(--as-text-soft);
}

.as-cat-monitor-img {
  width: 100%;
  height: auto;
  max-width: 350px;
  display: block;
}
/* =========================
   SEKSİYA 7: MİKROFON & VOKAL
   ========================= */

.as-cat-mics-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1.2fr);
  gap: 30px;
  align-items: center;
}

.as-cat-mics-info .as-section-title {
  margin-bottom: 10px;
}

.as-mics-lines {
  margin-top: 10px;
  display: grid;
  gap: 8px;
}

.as-mics-row {
  border-radius: 16px;
  padding: 8px 10px;
  background: linear-gradient(
    120deg,
    rgba(8, 8, 32, 0.96),
    rgba(18, 18, 50, 0.98)
  );
  border: 1px solid rgba(255, 255, 255, 0.16);
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.85);
}

.as-mics-badge {
  display: inline-flex;
  padding: 3px 8px;
  border-radius: 999px;
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  margin-bottom: 2px;
  background: radial-gradient(
    circle at 0 0,
    rgba(51, 255, 214, 0.32),
    rgba(7, 7, 30, 0.96)
  );
  color: var(--as-text-main);
}

.as-mics-text {
  margin: 0;
  font-size: 12px;
  line-height: 1.6;
  color: var(--as-text-muted);
}

.as-cat-mics-photo {
  display: grid;
  gap: 10px;
  justify-items: flex-end;
}

.as-cat-mics-frame {
  max-width: 260px;
  border-radius: 20px;
  padding: 10px;
  background: radial-gradient(
    circle at 100% 0,
    rgba(192, 103, 255, 0.22),
    rgba(7, 7, 28, 0.98)
  );
  border: 1px solid rgba(255, 255, 255, 0.18);
  box-shadow: var(--as-shadow-soft);
}

.as-cat-mics-frame--small {
  max-width: 220px;
}

.as-cat-mics-img {
  width: 100%;
  height: auto;
  max-width: 350px;
  display: block;
}

/* =========================
   SEKSİYA 8: DJ & KLUB
   ========================= */

.as-cat-dj-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(0, 1.3fr);
  gap: 30px;
  align-items: center;
}

.as-cat-dj-visual {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-auto-rows: 120px;
  gap: 8px;
}

.as-cat-dj-card {
  border-radius: 16px;
  overflow: hidden;
  position: relative;
}

.as-cat-dj-card--wide {
  grid-column: 1 / -1;
  grid-row: 1 / span 2;
}

.as-cat-dj-img {
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  display: block;
}

.as-cat-dj-info .as-section-title {
  margin-bottom: 10px;
}

.as-dj-lines {
  margin-top: 10px;
  display: grid;
  gap: 8px;
}

.as-dj-row {
  border-radius: 16px;
  padding: 8px 10px;
  background: radial-gradient(
    circle at 0 0,
    rgba(255, 179, 71, 0.26),
    rgba(8, 8, 32, 0.96)
  );
  border: 1px solid rgba(255, 255, 255, 0.16);
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.9);
}

.as-dj-badge {
  display: inline-flex;
  padding: 3px 8px;
  border-radius: 999px;
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  margin-bottom: 2px;
  background: radial-gradient(
    circle at 0 0,
    rgba(192, 103, 255, 0.34),
    rgba(7, 7, 30, 0.96)
  );
  color: var(--as-text-main);
}

.as-dj-text {
  margin: 0;
  font-size: 12px;
  line-height: 1.6;
  color: var(--as-text-muted);
}

/* =========================
   SEKSİYA 9: HAZIR SETLƏR
   ========================= */

.as-cat-bundles-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
}

.as-bundle-card {
  border-radius: 20px;
  padding: 10px 10px 12px;
  background: radial-gradient(
    circle at 0 0,
    rgba(51, 255, 214, 0.2),
    rgba(7, 7, 30, 0.98)
  );
  border: 1px solid rgba(255, 255, 255, 0.18);
  box-shadow: 0 16px 38px rgba(0, 0, 0, 0.85);
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.as-bundle-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
}

.as-bundle-title {
  margin: 0;
  font-size: 15px;
}

.as-bundle-tag {
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  padding: 3px 8px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.26);
}

.as-bundle-text {
  margin: 0;
  font-size: 13px;
  line-height: 1.6;
  color: var(--as-text-muted);
}

.as-bundle-list {
  margin: 4px 0 0;
  padding-left: 16px;
  font-size: 12px;
  line-height: 1.6;
  color: var(--as-text-soft);
}

.as-bundle-list li + li {
  margin-top: 3px;
}

.as-bundle-thumb {
  margin-top: 6px;
  border-radius: 16px;
  overflow: hidden;
}

.as-bundle-img {
  width: 100%;
  height: auto;
  max-width: 350px;
  display: block;
}
/* =========================
   SEKSİYA 10: AKSESSUAR DIVARI
   ========================= */

.as-cat-accessories {
  position: relative;
}

.as-cat-accessories-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1.3fr);
  gap: 30px;
  align-items: center;
}

.as-cat-accessories-info .as-section-title {
  margin-bottom: 10px;
}

.as-cat-accessories-list {
  margin: 8px 0 10px;
  padding-left: 16px;
  font-size: 13px;
  line-height: 1.7;
  color: var(--as-text-muted);
}

.as-cat-accessories-list li + li {
  margin-top: 4px;
}

.as-cat-accessories-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.as-cat-accessories-tag {
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  padding: 5px 10px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  background: radial-gradient(
    circle at 0 0,
    rgba(51, 255, 214, 0.24),
    rgba(7, 7, 30, 0.98)
  );
  color: var(--as-text-main);
}

.as-cat-accessories-gallery {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 10px;
  justify-items: flex-end;
}

.as-cat-accessories-tile {
  max-width: 260px;
  border-radius: 20px;
  padding: 9px;
  background: radial-gradient(
    circle at 100% 0,
    rgba(255, 179, 71, 0.24),
    rgba(7, 7, 28, 0.98)
  );
  border: 1px solid rgba(255, 255, 255, 0.18);
  box-shadow: var(--as-shadow-soft);
}

.as-cat-accessories-tile--accent {
  background: radial-gradient(
    circle at 0 0,
    rgba(192, 103, 255, 0.26),
    rgba(7, 7, 28, 0.98)
  );
}

.as-cat-accessories-img {
  width: 100%;
  height: auto;
  max-width: 350px;
  display: block;
}

/* =========================
   SEKSİYA 11: STEND & RƏFLƏR
   ========================= */

.as-cat-stands-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(0, 1.3fr);
  gap: 30px;
  align-items: center;
}

.as-cat-stands-visual {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-auto-rows: auto;
  gap: 10px;
  justify-items: flex-start;
}

.as-cat-stands-frame {
  max-width: 260px;
  border-radius: 20px;
  padding: 10px;
  background: radial-gradient(
    circle at 100% 0,
    rgba(51, 255, 214, 0.22),
    rgba(7, 7, 28, 0.98)
  );
  border: 1px solid rgba(255, 255, 255, 0.18);
  box-shadow: var(--as-shadow-soft);
}

.as-cat-stands-frame--small {
  max-width: 220px;
}

.as-cat-stands-img {
  width: 100%;
  height: auto;
  max-width: 350px;
  display: block;
}

.as-cat-stands-info .as-section-title {
  margin-bottom: 10px;
}

.as-cat-stands-list {
  margin: 8px 0 0;
  padding-left: 16px;
  font-size: 13px;
  line-height: 1.7;
  color: var(--as-text-muted);
}

.as-cat-stands-list li + li {
  margin-top: 4px;
}

/* =========================
   SEKSİYA 12: ÇANTA & KEYS
   ========================= */

.as-cat-cases-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
}

.as-case-card {
  border-radius: 20px;
  padding: 10px 10px 12px;
  background: radial-gradient(
    circle at 0 0,
    rgba(51, 255, 214, 0.2),
    rgba(7, 7, 30, 0.98)
  );
  border: 1px solid rgba(255, 255, 255, 0.18);
  box-shadow: 0 16px 38px rgba(0, 0, 0, 0.85);
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.as-case-title {
  margin: 0 0 2px;
  font-size: 15px;
}

.as-case-text {
  margin: 0;
  font-size: 13px;
  line-height: 1.6;
  color: var(--as-text-muted);
}

.as-case-list {
  margin: 4px 0 0;
  padding-left: 16px;
  font-size: 12px;
  line-height: 1.6;
  color: var(--as-text-soft);
}

.as-case-list li + li {
  margin-top: 3px;
}

.as-case-thumb {
  margin-top: 6px;
  border-radius: 16px;
  overflow: hidden;
}

.as-case-img {
  width: 100%;
  height: auto;
  max-width: 350px;
  display: block;
}

/* =========================
   RESPONSIVE FOR 10–12
   ========================= */

@media (max-width: 960px) {
  .as-cat-accessories-grid,
  .as-cat-stands-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .as-cat-accessories-gallery {
    justify-items: flex-start;
  }

  .as-cat-cases-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 700px) {
  .as-cat-accessories-grid {
    gap: 20px;
  }

  .as-cat-accessories-tile,
  .as-cat-stands-frame {
    max-width: 230px;
  }
}

@media (max-width: 480px) {
  .as-cat-accessories-tile,
  .as-cat-stands-frame {
    max-width: 210px;
  }

  .as-case-card {
    border-radius: 18px;
  }
}
/* =========================
   SEKSİYA 13: DEMO MARŞRUTU
   ========================= */

.as-cat-flow {
  position: relative;
}

.as-cat-flow-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1.3fr);
  gap: 30px;
  align-items: center;
}

.as-cat-flow-info .as-section-title {
  margin-bottom: 10px;
}

.as-cat-flow-steps {
  margin: 10px 0 0;
  padding-left: 18px;
  font-size: 13px;
  line-height: 1.7;
  color: var(--as-text-muted);
}

.as-cat-flow-steps li + li {
  margin-top: 4px;
}

.as-cat-flow-gallery {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-auto-rows: 110px;
  gap: 8px;
  justify-items: flex-end;
}

.as-cat-flow-tile {
  border-radius: 18px;
  padding: 8px;
  max-width: 200px;
  background: radial-gradient(
    circle at 100% 0,
    rgba(192, 103, 255, 0.24),
    rgba(7, 7, 28, 0.98)
  );
  border: 1px solid rgba(255, 255, 255, 0.18);
  box-shadow: var(--as-shadow-subtle);
  overflow: hidden;
}

.as-cat-flow-tile--guitar {
  grid-column: 1 / 2;
  grid-row: 1 / 3;
  max-height: 240px;
}

.as-cat-flow-tile--keys {
  max-width: 190px;
}

.as-cat-flow-tile--dj {
  max-width: 190px;
}

.as-cat-flow-img {
  width: 100%;
  height: 100%;
  max-width: 350px;
  object-fit: cover;
  display: block;
}

/* =========================
   SEKSİYA 14: SERVİS & TƏMİR
   ========================= */

.as-cat-service-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1.2fr);
  gap: 30px;
  align-items: center;
}

.as-cat-service-info .as-section-title {
  margin-bottom: 10px;
}

.as-cat-service-list {
  margin: 8px 0 0;
  padding-left: 16px;
  font-size: 13px;
  line-height: 1.7;
  color: var(--as-text-muted);
}

.as-cat-service-list li + li {
  margin-top: 4px;
}

.as-cat-service-visual {
  display: grid;
  gap: 10px;
  justify-items: flex-end;
}

.as-cat-service-frame {
  max-width: 260px;
  border-radius: 20px;
  padding: 10px;
  background: radial-gradient(
    circle at 100% 0,
    rgba(51, 255, 214, 0.24),
    rgba(7, 7, 28, 0.98)
  );
  border: 1px solid rgba(255, 255, 255, 0.18);
  box-shadow: var(--as-shadow-soft);
}

.as-cat-service-frame--small {
  max-width: 220px;
}

.as-cat-service-img {
  width: 100%;
  height: auto;
  max-width: 350px;
  display: block;
}

/* =========================
   SEKSİYA 15: ONLAYN KATALOQ & QR
   ========================= */

.as-cat-online-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1.2fr);
  gap: 30px;
  align-items: center;
}

.as-cat-online-info .as-section-title {
  margin-bottom: 10px;
}

.as-cat-online-points {
  margin-top: 10px;
  display: grid;
  gap: 6px;
}

.as-cat-online-row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 8px;
  align-items: flex-start;
}

.as-cat-online-dot {
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: radial-gradient(circle at 0 0, #33ffd6, #c067ff);
  box-shadow: 0 0 10px rgba(51, 255, 214, 0.8);
  margin-top: 5px;
}

.as-cat-online-text {
  margin: 0;
  font-size: 13px;
  line-height: 1.6;
  color: var(--as-text-muted);
}

.as-cat-online-visual {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  justify-items: flex-end;
}

.as-cat-online-frame {
  max-width: 200px;
  border-radius: 18px;
  padding: 9px;
  background: radial-gradient(
    circle at 0 0,
    rgba(192, 103, 255, 0.26),
    rgba(7, 7, 28, 0.98)
  );
  border: 1px solid rgba(255, 255, 255, 0.18);
  box-shadow: var(--as-shadow-subtle);
}

.as-cat-online-img {
  width: 100%;
  height: auto;
  max-width: 350px;
  display: block;
}

/* =========================
   RESPONSIVE FOR 13–15
   ========================= */

@media (max-width: 960px) {
  .as-cat-flow-grid,
  .as-cat-service-grid,
  .as-cat-online-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .as-cat-flow-gallery,
  .as-cat-service-visual,
  .as-cat-online-visual {
    justify-items: flex-start;
  }

  .as-cat-flow-gallery {
    grid-auto-rows: 110px;
  }
}

@media (max-width: 700px) {
  .as-cat-flow-gallery {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }

  .as-cat-flow-tile--guitar {
    grid-row: auto;
    max-height: none;
  }

  .as-cat-online-visual {
    grid-template-columns: minmax(0, 1fr);
  }

  .as-cat-online-frame {
    max-width: 210px;
  }
}

@media (max-width: 480px) {
  .as-cat-flow-tile,
  .as-cat-service-frame,
  .as-cat-online-frame {
    max-width: 200px;
  }
}
/* =========================
   SEKSİYA 16: SƏS YOLLARI XƏRİTƏSİ
   ========================= */

.as-cat-paths {
  position: relative;
}

.as-cat-paths-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1.3fr);
  gap: 30px;
  align-items: center;
}

.as-cat-paths-info .as-section-title {
  margin-bottom: 10px;
}

.as-cat-paths-steps {
  margin-top: 10px;
  display: grid;
  gap: 6px;
}

.as-cat-paths-step {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 10px;
  align-items: flex-start;
}

.as-cat-paths-step-marker {
  width: 20px;
  height: 20px;
  border-radius: 999px;
  background: radial-gradient(circle at 0 0, #33ffd6, #c067ff);
  box-shadow: 0 0 14px rgba(51, 255, 214, 0.8);
  font-size: 11px;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #050410;
  margin-top: 3px;
}

.as-cat-paths-step-text {
  margin: 0;
  font-size: 13px;
  line-height: 1.6;
  color: var(--as-text-muted);
}

.as-cat-paths-visual {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-auto-rows: 120px;
  gap: 8px;
  justify-items: flex-end;
}

.as-cat-paths-frame {
  max-width: 220px;
  border-radius: 18px;
  padding: 9px;
  background: radial-gradient(
    circle at 100% 0,
    rgba(192, 103, 255, 0.24),
    rgba(7, 7, 28, 0.98)
  );
  border: 1px solid rgba(255, 255, 255, 0.18);
  box-shadow: var(--as-shadow-subtle);
  overflow: hidden;
}

.as-cat-paths-frame--main {
  grid-column: 1 / -1;
  grid-row: 1 / 3;
  max-width: 260px;
}

.as-cat-paths-img {
  width: 100%;
  height: 100%;
  max-width: 350px;
  object-fit: cover;
  display: block;
}

/* =========================
   SEKSİYA 17: KATALOQ FAQ
   ========================= */

.as-cat-faq-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1.1fr);
  gap: 30px;
  align-items: flex-start;
  margin-top: 24px;
}

.as-cat-faq-list {
  display: grid;
  gap: 10px;
}

.as-faq-item {
  border-radius: 18px;
  padding: 8px 10px;
  background: linear-gradient(
    120deg,
    rgba(8, 8, 32, 0.96),
    rgba(18, 18, 50, 0.98)
  );
  border: 1px solid rgba(255, 255, 255, 0.16);
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.9);
}

.as-faq-question {
  margin: 0 0 4px;
  font-size: 14px;
}

.as-faq-answer {
  margin: 0;
  font-size: 13px;
  line-height: 1.6;
  color: var(--as-text-muted);
}

.as-cat-faq-visual {
  display: grid;
  gap: 10px;
  justify-items: flex-end;
}

.as-cat-faq-frame {
  max-width: 240px;
  border-radius: 18px;
  padding: 9px;
  background: radial-gradient(
    circle at 0 0,
    rgba(51, 255, 214, 0.24),
    rgba(7, 7, 28, 0.98)
  );
  border: 1px solid rgba(255, 255, 255, 0.18);
  box-shadow: var(--as-shadow-soft);
}

.as-cat-faq-img {
  width: 100%;
  height: auto;
  max-width: 350px;
  display: block;
}

/* =========================
   RESPONSIVE FOR 16–17
   ========================= */

@media (max-width: 960px) {
  .as-cat-paths-grid,
  .as-cat-faq-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .as-cat-paths-visual,
  .as-cat-faq-visual {
    justify-items: flex-start;
  }

  .as-cat-paths-visual {
    grid-auto-rows: 110px;
  }
}

@media (max-width: 700px) {
  .as-cat-paths-visual {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }

  .as-cat-paths-frame--main {
    grid-column: 1 / -1;
    grid-row: auto;
  }

  .as-cat-faq-frame {
    max-width: 210px;
  }
}

@media (max-width: 480px) {
  .as-cat-paths-frame,
  .as-cat-faq-frame {
    max-width: 200px;
  }
}