/* ═══════════════════════════════════════════
   ABOUT — Keyfiyyət Siyasətimiz bölməsi
   qualitypolicy.css  (yalnız about.html üçün)
═══════════════════════════════════════════ */

.qp {
  background: #091929;
  padding: 52px 0;
  font-family: 'Montserrat', sans-serif;
}

.qp-inner {
  padding: 0 52px;
  display: flex;
  gap: 28px;
  align-items: flex-start;
}

/* ════════════════════════════════
   SOL RAIL — Başlıq
════════════════════════════════ */
.qp-rail {
  flex-shrink: 0;
  border-left: 2.5px solid #fff;
  padding-left: 9px;
  display: flex;
  align-items: flex-start;
}

.qp-rail-tag {
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.2em;
  color: #fff;
  white-space: nowrap;
  margin: 0;
}

/* ════════════════════════════════
   KART GRİD — 3 × 2
════════════════════════════════ */
.qp-grid {
  flex: 1;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
}

.qp-card {
  border: 1px solid rgba(255, 255, 255, 0.1);
  padding: 24px 20px 26px;
  display: grid;
  grid-template-columns: auto 1fr;
  column-gap: 12px;
  row-gap: 8px;
}

.qp-card-num {
  grid-column: 1;
  grid-row: 1;
  font-size: 13px;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.28);
  letter-spacing: 0.05em;
  align-self: center;
}

.qp-card-title {
  grid-column: 2;
  grid-row: 1;
  font-size: 13px;
  font-weight: 700;
  color: #fff;
  letter-spacing: 0.02em;
  line-height: 1.35;
  margin: 0;
  align-self: center;
}

.qp-card-body {
  grid-column: 1 / -1;
  grid-row: 2;
  font-size: 12px;
  font-weight: 400;
  color: rgba(255, 255, 255, 0.5);
  line-height: 1.72;
  margin: 0;
}

/* ════════════════════════════════
   RESPONSIVE
════════════════════════════════ */
@media (max-width: 1024px) {
  .qp { padding: 40px 0; }
  .qp-inner { padding: 0 36px; }
  .qp-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 912px) {
  .qp-inner { padding: 0 28px; }
}

@media (max-width: 600px) {
  .qp { padding: 36px 0; }
  .qp-inner { padding: 0 24px 0 20px; }
  .qp-grid { grid-template-columns: 1fr; }
}

@media (max-width: 430px) {
  .qp-inner { padding: 0 24px 0 14px; }
}

@media (max-width: 414px) {
  .qp-inner { padding: 0 24px 0 14px; }
}

@media (max-width: 375px) {
  .qp-inner { padding: 0 24px 0 14px; }
}