/* Arsemia Lazer – Ödeme Bilgileri Bileşeni */
.ars-pay {
  --ars-primary: #e91e63;     /* marka aksanı: istersen değiştir */
  --ars-secondary: #7c3aed;   /* degrade 2 */
  --ars-accent: #ffb703;      /* vurgu */
  --ars-bg: #ffffff;
  --ars-card: #ffffff;
  --ars-muted: #6b7280;
  --ars-text: #0f172a;
  --ars-border: #e5e7eb;
  --ars-ok: #10b981;
  border-radius: 16px;
  background: var(--ars-bg);
  color: var(--ars-text);
  overflow: hidden;
  box-shadow: 0 10px 30px rgba(16,24,40,.06);
}

/* Hero */
.ars-pay-hero {
  background: linear-gradient(135deg,var(--ars-primary),var(--ars-secondary));
  color: #fff;
  padding: 28px 22px;
}
.ars-pay-hero h2 {
  margin: 0 0 6px;
  font-size: 24px;
  font-weight: 800;
  letter-spacing: .2px;
}
.ars-pay-hero p {
  margin: 0;
  opacity: .95;
}

/* Grid */
.ars-pay-grid {
  display: grid;
  gap: 16px;
  padding: 18px;
  grid-template-columns: repeat(12, 1fr);
}
.ars-pay-card {
  grid-column: span 12;
  background: var(--ars-card);
  border: 1px solid var(--ars-border);
  border-radius: 14px;
  padding: 16px;
  display: grid;
  gap: 8px;
}
@media (min-width: 720px){
  .ars-pay-card { grid-column: span 6; }
}
@media (min-width: 1040px){
  .ars-pay-card { grid-column: span 3; }
}
.ars-pay-card-head {
  display: flex; align-items: center; gap: 10px;
}
.ars-pay-card h3 { margin: 0; font-size: 16px; font-weight: 700; }
.ars-pay-card p { margin: 0; color: var(--ars-muted); }
.ars-pay-list { margin: 0; padding: 0 0 0 18px; color: var(--ars-text); }
.ars-pay-list li { margin: 4px 0; }

/* Icons (minimal, çakışmayı önlemek için saf CSS) */
.ars-pay-ico {
  width: 34px; height: 34px; border-radius: 9px;
  display: inline-grid; place-items: center; color: #fff; font-weight: 800;
  background: var(--ars-primary);
  box-shadow: 0 6px 16px rgba(233,30,99,.25);
}
.ars-ico-card::after { content: "💳"; font-size: 18px; }
.ars-ico-bank::after { content: "🏦"; font-size: 18px; }
.ars-ico-box::after  { content: "📦"; font-size: 18px; }
.ars-ico-shield::after{ content: "🛡️"; font-size: 18px; }

/* Kart markaları */
.ars-pay-brands { display:flex; gap:8px; margin-top: 6px; }
.ars-pay-brands .brand {
  font-size: 11px; font-weight: 800; letter-spacing:.7px;
  padding: 6px 8px; border-radius: 8px; color:#fff;
}
.brand.visa { background: #1a1f71; }
.brand.mc   { background: linear-gradient(90deg,#eb001b 0 50%, #f79e1b 50% 100%); }
.brand.troy { background: #00836c; }

/* Taksit/Not alanı */
.ars-pay-note {
  display:grid; gap:16px; padding: 0 18px 18px;
  grid-template-columns: 1fr;
}
@media (min-width: 960px){
  .ars-pay-note { grid-template-columns: 1.2fr .8fr; }
}
.ars-pay-note-left h4 { margin: 0 0 8px; font-size: 16px; }
.ars-pay-note-left p { margin: 0 0 10px; color: var(--ars-muted); }
.ars-badges { display:flex; flex-wrap:wrap; gap:8px; padding:0; margin:0; list-style:none; }
.ars-badges li {
  background: #f5f7ff; color:#334155; border:1px dashed #c7d2fe;
  padding:6px 10px; border-radius: 999px; font-size: 12px; font-weight: 600;
}

/* Mini fatura kutusu */
.ars-pay-bill {
  border:1px solid var(--ars-border);
  border-radius: 14px; padding: 14px;
  background: #fff; box-shadow: 0 2px 10px rgba(2,6,23,.05);
}
.ars-pay-bill .row { display:flex; justify-content:space-between; margin:8px 0; }
.ars-pay-bill .row.muted { color: var(--ars-muted); font-size: 13px; }
.ars-pay-bill .row.total { font-weight: 800; font-size: 16px; }
.ars-pay-cta {
  display:block; text-align:center; margin-top: 10px;
  background: linear-gradient(135deg,var(--ars-primary),var(--ars-secondary));
  color:#fff; padding: 10px 14px; border-radius: 10px; font-weight: 700; text-decoration:none;
  box-shadow: 0 8px 18px rgba(124,58,237,.25);
}
.ars-pay-cta:hover { filter: brightness(1.05); }

/* SSS */
.ars-pay-faq { padding: 0 18px 18px; }
.ars-pay-faq h4 { margin: 0 0 8px; font-size: 16px; }
.ars-pay-faq details {
  border:1px solid var(--ars-border); border-radius: 12px; background:#fff;
  padding: 10px 12px; margin-bottom: 8px;
}
.ars-pay-faq summary { cursor: pointer; font-weight: 700; outline: none; }
.ars-pay-faq p { margin: 8px 0 0; color: var(--ars-muted); }

/* Yardım çubuğu */
.ars-pay-help {
  display:flex; flex-direction:column; gap:10px; align-items:center; justify-content:space-between;
  background: linear-gradient(135deg,#fef3c7,#fde68a);
  border-top:1px solid #fde68a; padding: 14px 16px;
}
@media (min-width: 720px){
  .ars-pay-help { flex-direction:row; }
}
.ars-pay-help-text { font-weight: 700; color:#5b3a00; }
.ars-pay-help-actions { display:flex; gap:10px; }
.ars-help-btn {
  text-decoration:none; padding: 8px 12px; border-radius: 10px; font-weight: 700; border:1px solid rgba(0,0,0,.08);
  background:#fff;
}
.ars-help-btn.whats { background:#e6fff2; border-color:#bdf5d4; }
.ars-help-btn.tel   { background:#eef2ff; border-color:#c7d2fe; }
/* Sekme satırı */
.tabs{display:flex;flex-wrap:wrap;gap:10px;padding:8px;margin-bottom:10px}

/* Genel buton */
.tabs .tab-btn{
  appearance:none; border:0; cursor:pointer;
  padding:12px 16px; border-radius:14px; font-weight:800;
  color:#fff; box-shadow:0 6px 16px rgba(16,24,40,.10);
  transition:transform .06s ease, filter .15s ease;
}
.tabs .tab-btn:hover{ filter:brightness(1.05); transform:translateY(-1px); }
.tabs .tab-btn.active{ box-shadow:0 10px 24px rgba(16,24,40,.18); }

/* Renkler (onclick hedefine göre) */
.tabs .tab-btn[onclick*="aciklama"]{ background:#111827; }           /* siyah */
.tabs .tab-btn[onclick*="odeme"]   { background:#f43f5e; }           /* pembe */
.tabs .tab-btn[onclick*="yorumlar"]{ background:#0ea5e9; }           /* mavi */
.tabs .tab-btn[onclick*="iade"]    { background:#22c55e; }           /* yeşil */
.tabs .tab-btn[onclick*="sss"]     { background:#f59e0b; }           /* turuncu */

/* İç paneller */
.tab-content{ 
  display:none; background:#fff; padding:16px; 
  border:1px solid #e5e7eb; border-radius:14px; 
}
.tab-content.active{ display:block; }
/* Açıklama alanı */
#aciklama{
  color:#0f172a; line-height:1.7; font-size:15.8px;
  word-break:break-word; overflow-wrap:anywhere;
}

/* Başlıklar */
#aciklama h1,#aciklama h2,#aciklama h3,#aciklama h4{ 
  margin:18px 0 10px; line-height:1.28; font-weight:900;
}
#aciklama h1{font-size:22px}
#aciklama h2{font-size:20px}
#aciklama h3{font-size:18px}
#aciklama h4{font-size:17px}

/* Paragraflar ve listeler */
#aciklama p{ margin:0 0 12px; color:#111827; }
#aciklama ul,#aciklama ol{ margin:0 0 12px 18px; }

/* Emoji’li listelerde hizayı düzelt (✅ vb.) */
#aciklama li{ padding-left:2px; }

/* Bölüm ayraçları */
#aciklama hr{
  height:10px; border:0; margin:14px 0;
  background: linear-gradient(90deg,#f3f4f6 0,#e5e7eb 50%, #f3f4f6 100%);
  border-radius:999px;
}

/* Görsel/iframe responsive */
#aciklama img{ max-width:100%; height:auto; border-radius:8px; display:block; }
#aciklama iframe,#aciklama video{ max-width:100%; display:block; }