/* =====================================================================
   METROPOL ENERJI & FILO — ARAC TAKIP ONLINE SATIS
   Tum siniflar "atk-" on ekiyle baslar; mevcut .tracking-* / .package-*
   stilleriyle CAKISMAZ. Bu dosya baska hicbir sayfayi etkilemez.
===================================================================== */

/* Degiskenler :root'ta tanimlidir; boylece .atk-shop disinda kalan
   .atk-methods ve .atk-access bolumleri de ayni paleti kullanir.
   Ayrica her kullanimda yedek renk verilmistir: baska bir stil dosyasi
   :root'u sifirlasa bile butonlar beyaz/gorunmez hale gelmez. */
:root,
.atk-shop,
.atk-methods,
.atk-access,
.atk-shop-body {
  --atk-primary: #2563eb;
  --atk-primary-dark: #1d4ed8;
  --atk-accent: #00c6ff;
  --atk-dark: #0f172a;
  --atk-muted: #64748b;
  --atk-line: #e2e8f0;
  --atk-soft: #f8fafc;
  --atk-ok: #16a34a;
}

/* =====================================================================
   1. SAYFA ICI SATIS BOLUMU
===================================================================== */
.atk-shop {
  padding: clamp(56px, 8vw, 92px) 20px;
  background:
    radial-gradient(circle at 12% 0%, rgba(0, 198, 255, .10), transparent 42%),
    linear-gradient(180deg, #ffffff 0%, #f1f6fd 100%);
  color: var(--atk-dark, #0f172a);
}

.atk-shop-inner {
  width: min(1240px, 100%);
  margin: 0 auto;
}

.atk-shop-head {
  text-align: center;
  margin-bottom: 38px;
}

.atk-kicker {
  display: inline-block;
  padding: 7px 16px;
  border-radius: 999px;
  background: #e0edff;
  color: #1d4ed8;
  font-size: 12px;
  font-weight: 900;
  letter-spacing: .09em;
  margin-bottom: 14px;
}

.atk-shop-head h2 {
  font-size: clamp(26px, 3.6vw, 40px);
  line-height: 1.15;
  margin: 0 0 14px;
  letter-spacing: -.02em;
}

.atk-shop-head > p {
  max-width: 720px;
  margin: 0 auto;
  color: var(--atk-muted, #64748b);
  font-size: clamp(15px, 1.6vw, 17px);
  line-height: 1.7;
}

/* --- Trio Mobil yetkili bayi rozeti --- */
.atk-authorized {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 16px;
  margin: 26px auto 0;
  padding: 16px 24px;
  width: fit-content;
  max-width: 100%;
  background: #fff;
  border: 1px solid var(--atk-line, #e2e8f0);
  border-radius: 18px;
  box-shadow: 0 12px 34px rgba(15, 23, 42, .07);
}

.atk-authorized img {
  height: 34px;
  width: auto;
  object-fit: contain;
}

.atk-authorized-sep {
  width: 1px;
  height: 30px;
  background: var(--atk-line, #e2e8f0);
}

.atk-authorized span {
  font-size: 13.5px;
  font-weight: 800;
  color: #334155;
  line-height: 1.4;
}

.atk-authorized small {
  display: block;
  font-size: 12px;
  font-weight: 600;
  color: var(--atk-muted, #64748b);
}


/* =====================================================================
   1B. ODEME YONTEMLERI (3 KART)
===================================================================== */
.atk-methods {
  padding: clamp(52px, 7vw, 86px) 20px;
  background: linear-gradient(180deg, #f7fafd 0%, #ffffff 100%);
  color: var(--atk-dark, #0f172a);
}

.atk-methods-inner { width: min(1240px, 100%); margin: 0 auto; }

.atk-methods-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
  gap: 20px;
  margin-top: 36px;
  align-items: stretch;
}

.atk-method {
  position: relative;
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid var(--atk-line, #e2e8f0);
  border-radius: 22px;
  padding: 30px 24px 24px;
  box-shadow: 0 14px 40px rgba(15, 23, 42, .06);
  transition: transform .22s, box-shadow .22s, border-color .22s;
}

.atk-method:hover {
  transform: translateY(-5px);
  border-color: #bfd6f7;
  box-shadow: 0 26px 60px rgba(15, 23, 42, .12);
}

.atk-method.is-featured {
  border-color: var(--atk-primary, #2563eb);
  box-shadow: 0 20px 54px rgba(37, 99, 235, .18);
}

.atk-method-tag {
  position: absolute;
  top: -12px;
  left: 24px;
  padding: 6px 14px;
  border-radius: 999px;
  background: linear-gradient(135deg, var(--atk-primary, #2563eb), var(--atk-accent, #00c6ff));
  color: #fff;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .06em;
  box-shadow: 0 8px 18px rgba(37, 99, 235, .3);
}

.atk-method-tag.alt { background: linear-gradient(135deg, #0f766e, #14b8a6); }

.atk-method h3 {
  font-size: 21px;
  margin: 6px 0 14px;
  letter-spacing: -.01em;
}

.atk-method-price {
  padding: 16px 18px;
  border-radius: 15px;
  background: #f2f7ff;
  border: 1px solid #dbe8fb;
  margin-bottom: 12px;
}

.atk-method-price strong {
  display: block;
  font-size: clamp(24px, 3.4vw, 30px);
  font-weight: 950;
  color: var(--atk-primary, #2563eb);
  letter-spacing: -.02em;
  line-height: 1.15;
}

.atk-method-price span {
  display: block;
  margin-top: 3px;
  font-size: 12.5px;
  font-weight: 700;
  color: var(--atk-muted, #64748b);
}

.atk-method-price.no-price {
  background: #fffbeb;
  border-color: #fde68a;
}

.atk-method-price.no-price strong { font-size: 21px; color: #92400e; }
.atk-method-price.no-price span { color: #a16207; }

.atk-method-sub {
  margin: 0 0 14px;
  font-size: 13px;
  line-height: 1.6;
  color: #475569;
}

.atk-method-sub b { color: var(--atk-ok, #16a34a); }

.atk-method-desc {
  margin: 0 0 20px;
  font-size: 13.8px;
  line-height: 1.65;
  color: var(--atk-muted, #64748b);
}

.atk-method-actions {
  margin-top: auto;
  display: grid;
  gap: 9px;
}

.atk-methods-note {
  margin-top: 26px;
  padding: 20px 24px;
  background: #fff;
  border: 1px solid var(--atk-line, #e2e8f0);
  border-radius: 18px;
  font-size: 14px;
  line-height: 1.7;
  color: #334155;
  text-align: center;
}

.atk-methods-note strong { color: var(--atk-dark, #0f172a); }

/* =====================================================================
   1C. TEK URUN BLOGU
===================================================================== */
.atk-product {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  gap: 32px;
  align-items: center;
  background: #fff;
  border: 1px solid var(--atk-line, #e2e8f0);
  border-radius: 24px;
  padding: 30px;
  box-shadow: 0 18px 50px rgba(15, 23, 42, .07);
}

.atk-product-media {
  background: linear-gradient(180deg, #fff, #f1f7ff);
  border: 1px solid #eef3fa;
  border-radius: 20px;
  padding: 24px;
}

.atk-product-media img {
  display: block;
  width: 100%;
  height: auto;
  max-height: 340px;
  object-fit: contain;
}

.atk-product-group {
  font-size: 11.5px;
  font-weight: 900;
  letter-spacing: .07em;
  color: var(--atk-primary, #2563eb);
  text-transform: uppercase;
}

.atk-product-body h3 {
  font-size: clamp(22px, 3vw, 30px);
  line-height: 1.2;
  margin: 8px 0 12px;
  letter-spacing: -.02em;
}

.atk-product-desc {
  font-size: 15px;
  line-height: 1.7;
  color: var(--atk-muted, #64748b);
  margin: 0 0 20px;
}

.atk-product-features {
  list-style: none;
  margin: 0 0 20px;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr));
  gap: 10px 20px;
}

.atk-product-features li {
  position: relative;
  padding-left: 26px;
  font-size: 14px;
  line-height: 1.55;
  color: #334155;
}

.atk-product-features li::before {
  content: "✓";
  position: absolute;
  left: 0;
  top: 1px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #dcfce7;
  color: #15803d;
  font-size: 11px;
  font-weight: 900;
  display: flex;
  align-items: center;
  justify-content: center;
}

.atk-specs {
  border: 1px solid var(--atk-line, #e2e8f0);
  border-radius: 14px;
  background: var(--atk-soft, #f8fafc);
  padding: 0;
  margin-bottom: 22px;
  overflow: hidden;
}

.atk-specs summary {
  cursor: pointer;
  padding: 15px 18px;
  font-size: 14px;
  font-weight: 800;
  color: var(--atk-dark, #0f172a);
  list-style: none;
  position: relative;
  min-height: 48px;
  display: flex;
  align-items: center;
}

.atk-specs summary::-webkit-details-marker { display: none; }

.atk-specs summary::after {
  content: "+";
  position: absolute;
  right: 18px;
  font-size: 19px;
  font-weight: 900;
  color: var(--atk-primary, #2563eb);
}

.atk-specs[open] summary::after { content: "−"; }

.atk-specs dl {
  margin: 0;
  padding: 0 18px 18px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr);
  gap: 8px 16px;
  font-size: 13.2px;
}

.atk-specs dt { color: var(--atk-muted, #64748b); }
.atk-specs dd { margin: 0; font-weight: 700; color: #1e293b; }

.atk-product-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 11px;
}

.atk-product-actions .atk-buy,
.atk-product-actions .atk-ghost {
  width: auto;
  flex: 1 1 200px;
  min-width: 0;
}

/* =====================================================================
   1D. PANEL + MOBIL UYGULAMA ERISIMI
===================================================================== */
.atk-access {
  padding: clamp(52px, 7vw, 88px) 20px;
  background: linear-gradient(135deg, #0b2545 0%, #123a6b 55%, #0f3a75 100%);
  color: #fff;
}

.atk-access-inner {
  width: min(1240px, 100%);
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
  gap: 40px;
  align-items: center;
}

.atk-kicker.light {
  background: rgba(255, 255, 255, .14);
  color: #bfdbfe;
}

.atk-access-text h2 {
  font-size: clamp(25px, 3.5vw, 38px);
  line-height: 1.16;
  margin: 0 0 14px;
  letter-spacing: -.02em;
}

.atk-access-text > p {
  font-size: clamp(15px, 1.6vw, 16.5px);
  line-height: 1.75;
  color: rgba(255, 255, 255, .8);
  margin: 0 0 22px;
  max-width: 620px;
}

.atk-access-list {
  list-style: none;
  margin: 0 0 28px;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr));
  gap: 11px 22px;
}

.atk-access-list li {
  position: relative;
  padding-left: 27px;
  font-size: 14.5px;
  line-height: 1.55;
  color: rgba(255, 255, 255, .92);
}

.atk-access-list li::before {
  content: "✓";
  position: absolute;
  left: 0;
  top: 0;
  width: 19px;
  height: 19px;
  border-radius: 50%;
  background: rgba(125, 211, 252, .22);
  color: #7dd3fc;
  font-size: 11px;
  font-weight: 900;
  display: flex;
  align-items: center;
  justify-content: center;
}

.atk-access-cta {
  display: flex;
  flex-wrap: wrap;
  gap: 13px;
  align-items: stretch;
}

/* --- Portal butonu --- */
.atk-portal-btn {
  background-color: #2563eb;
  display: inline-flex;
  align-items: center;
  gap: 13px;
  min-height: 62px;
  padding: 12px 24px;
  border-radius: 15px;
  background: linear-gradient(135deg, var(--atk-primary, #2563eb), var(--atk-accent, #00c6ff));
  color: #fff;
  text-decoration: none;
  box-shadow: 0 14px 32px rgba(37, 99, 235, .36);
  transition: transform .2s, box-shadow .2s;
  flex: 1 1 240px;
}

.atk-portal-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 20px 42px rgba(37, 99, 235, .46);
  color: #fff;
}

.atk-portal-icon svg { width: 27px; height: 27px; display: block; }

.atk-portal-text small {
  display: block;
  font-size: 11.5px;
  font-weight: 700;
  opacity: .88;
  letter-spacing: .04em;
  text-transform: uppercase;
}

.atk-portal-text strong {
  display: block;
  font-size: 16.5px;
  font-weight: 900;
  line-height: 1.25;
}

/* --- Store butonlari --- */
.atk-stores {
  display: flex;
  flex-wrap: wrap;
  gap: 11px;
  flex: 2 1 340px;
}

.atk-store {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  min-height: 62px;
  padding: 12px 20px;
  border-radius: 15px;
  background: rgba(255, 255, 255, .09);
  border: 1px solid rgba(255, 255, 255, .24);
  color: #fff;
  text-decoration: none;
  backdrop-filter: blur(6px);
  transition: background .2s, border-color .2s, transform .2s;
  flex: 1 1 160px;
}

.atk-store:hover {
  background: rgba(255, 255, 255, .17);
  border-color: rgba(255, 255, 255, .45);
  transform: translateY(-2px);
  color: #fff;
}

.atk-store-icon svg { width: 25px; height: 25px; display: block; }

.atk-store-text small {
  display: block;
  font-size: 11px;
  font-weight: 700;
  opacity: .82;
  letter-spacing: .04em;
  text-transform: uppercase;
}

.atk-store-text strong {
  display: block;
  font-size: 15.5px;
  font-weight: 900;
  line-height: 1.25;
  white-space: nowrap;
}

.atk-access-note {
  margin: 22px 0 0;
  font-size: 13px;
  line-height: 1.65;
  color: rgba(255, 255, 255, .62);
  max-width: 560px;
}

.atk-access-visual {
  display: flex;
  justify-content: center;
}

.atk-access-visual img {
  width: 100%;
  max-width: 380px;
  height: auto;
  object-fit: contain;
  filter: drop-shadow(0 24px 50px rgba(0, 0, 0, .4));
}

/* --- Birincil / ikincil butonlar (sayfa ici) --- */
.atk-buy {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 54px;
  padding: 16px 20px;
  border: 0;
  border-radius: 14px;
  /* Duz renk once yazilir: gradient desteklenmese veya degisken
     cozulmese bile buton asla beyaz/gorunmez kalmaz. */
  background-color: #2563eb;
  background-image: linear-gradient(135deg, var(--atk-primary, #2563eb), var(--atk-accent, #00c6ff));
  color: #fff;
  font: inherit;
  font-size: 15.5px;
  font-weight: 900;
  line-height: 1.25;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  box-shadow: 0 10px 26px rgba(37, 99, 235, .3);
  transition: transform .2s, box-shadow .2s;
}

.atk-buy:hover,
.atk-buy:focus {
  transform: translateY(-2px);
  box-shadow: 0 16px 36px rgba(37, 99, 235, .4);
  color: #fff;
  text-decoration: none;
}

.atk-ghost {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 50px;
  padding: 13px 20px;
  border: 1.5px solid #cfe0f7;
  border-radius: 14px;
  background: #fff;
  color: #1d4ed8;
  font: inherit;
  font-size: 14px;
  font-weight: 800;
  line-height: 1.25;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: background .18s, border-color .18s;
}

.atk-ghost:hover,
.atk-ghost:focus {
  background: #f2f7ff;
  border-color: var(--atk-primary, #2563eb);
  color: #1d4ed8;
  text-decoration: none;
}

/* --- Guven seridi --- */
.atk-trustbar {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 14px;
  margin-top: 34px;
  padding: 22px;
  background: #fff;
  border: 1px solid var(--atk-line, #e2e8f0);
  border-radius: 18px;
}

.atk-trustbar div {
  text-align: center;
  font-size: 13.5px;
  font-weight: 700;
  color: #334155;
  line-height: 1.5;
}

.atk-trustbar strong {
  display: block;
  font-size: 20px;
  color: var(--atk-primary, #2563eb);
  margin-bottom: 3px;
}

/* =====================================================================
   2. ODEME SAYFASI  (bagimsiz, kurumsal duzen)
===================================================================== */
.atk-shop-body {
  margin: 0;
  background: #eef3f9;
  color: var(--atk-dark, #0f172a);
  font: 15px/1.6 Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
}

/* --- Ust cubuk --- */
.atk-topbar {
  position: sticky;
  top: 0;
  z-index: 40;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 13px 20px;
  background: #0b2545;
  box-shadow: 0 6px 20px rgba(15, 23, 42, .18);
}

.atk-topbar a { color: #fff; text-decoration: none; font-weight: 800; font-size: 14px; }

.atk-topbar-phone {
  background-color: #2563eb;
  padding: 9px 18px;
  border-radius: 999px;
  background: linear-gradient(135deg, var(--atk-primary, #2563eb), var(--atk-accent, #00c6ff));
  white-space: nowrap;
}

/* --- Marka + ilerleme seridi --- */
.atk-checkout-top {
  background: #fff;
  border-bottom: 1px solid var(--atk-line, #e2e8f0);
}

.atk-checkout-top-inner {
  width: min(1320px, 100%);
  margin: 0 auto;
  padding: 16px 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
}

.atk-brandline { display: flex; align-items: center; gap: 13px; }
.atk-brandline img { height: 30px; width: auto; object-fit: contain; }
.atk-brandline-sep { width: 1px; height: 26px; background: var(--atk-line, #e2e8f0); }

.atk-brandline-text {
  font-size: 12.5px;
  font-weight: 800;
  color: var(--atk-muted, #64748b);
  letter-spacing: .02em;
}

.atk-progress {
  display: flex;
  align-items: center;
  gap: 8px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.atk-progress li {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 800;
  color: #94a3b8;
  white-space: nowrap;
}

.atk-progress li + li::before {
  content: "";
  width: 26px;
  height: 2px;
  background: var(--atk-line, #e2e8f0);
  margin-right: 8px;
}

.atk-progress span {
  width: 25px;
  height: 25px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #e8eefb;
  color: #94a3b8;
  font-size: 12px;
  font-weight: 900;
}

.atk-progress .is-done span { background: #dcfce7; color: #15803d; }
.atk-progress .is-done { color: #15803d; }
.atk-progress .is-active span {
  background: linear-gradient(135deg, var(--atk-primary, #2563eb), var(--atk-accent, #00c6ff));
  color: #fff;
  box-shadow: 0 5px 14px rgba(37, 99, 235, .35);
}
.atk-progress .is-active { color: var(--atk-dark, #0f172a); }

/* --- Sayfa govdesi --- */
.atk-shop-wrap {
  min-height: 60vh;
  padding: 26px 18px 70px;
  background:
    radial-gradient(circle at 12% 0%, rgba(0, 198, 255, .10), transparent 40%),
    linear-gradient(180deg, #f6fafe 0%, #eaf1f9 100%);
}

.atk-co {
  width: min(1320px, 100%);
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 372px;
  gap: 24px;
  align-items: start;
}

.atk-co-main { display: grid; gap: 18px; min-width: 0; }

/* --- Bolum kartlari --- */
.atk-card-sec {
  background: #fff;
  border: 1px solid #dde8f4;
  border-radius: 20px;
  padding: 26px;
  box-shadow: 0 10px 34px rgba(15, 23, 42, .06);
}

.atk-sec-head {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  margin-bottom: 22px;
  padding-bottom: 18px;
  border-bottom: 1px solid #eef3f9;
}

.atk-sec-num {
  flex: 0 0 auto;
  width: 34px;
  height: 34px;
  border-radius: 11px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, var(--atk-primary, #2563eb), var(--atk-accent, #00c6ff));
  color: #fff;
  font-size: 15px;
  font-weight: 900;
  box-shadow: 0 7px 18px rgba(37, 99, 235, .3);
}

.atk-sec-head h2 { margin: 0 0 3px; font-size: 19px; letter-spacing: -.01em; }
.atk-sec-head p { margin: 0; font-size: 13.5px; line-height: 1.55; color: var(--atk-muted, #64748b); }

.atk-sub-head {
  margin: 24px 0 13px;
  font-size: 15px;
  display: flex;
  align-items: baseline;
  gap: 9px;
  flex-wrap: wrap;
}

.atk-sub-head span { font-size: 12px; font-weight: 600; color: var(--atk-muted, #64748b); }

/* --- Plan secimi --- */
.atk-plan-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 210px), 1fr));
  gap: 13px;
  margin-bottom: 20px;
}

.atk-plan {
  position: relative;
  display: block;
  padding: 22px 18px 18px;
  border: 2px solid var(--atk-line, #e2e8f0);
  border-radius: 16px;
  background: #fff;
  cursor: pointer;
  transition: border-color .2s, box-shadow .2s, background .2s;
}

.atk-plan:hover { border-color: #bfd6f7; }

.atk-plan.is-active {
  border-color: var(--atk-primary, #2563eb);
  background: #f6faff;
  box-shadow: 0 12px 28px rgba(37, 99, 235, .14);
}

.atk-plan input { position: absolute; opacity: 0; pointer-events: none; }

.atk-plan-check {
  position: absolute;
  top: 16px;
  right: 16px;
  width: 21px;
  height: 21px;
  border-radius: 50%;
  border: 2px solid #cbd5e1;
  background: #fff;
  transition: .2s;
}

.atk-plan.is-active .atk-plan-check {
  border-color: var(--atk-primary, #2563eb);
  background: var(--atk-primary, #2563eb);
  box-shadow: inset 0 0 0 4px #fff;
}

.atk-plan-tag {
  display: inline-block;
  padding: 4px 10px;
  border-radius: 999px;
  background: #dcfce7;
  color: #15803d;
  font-size: 10.5px;
  font-weight: 900;
  letter-spacing: .05em;
  margin-bottom: 9px;
}

.atk-plan-tag.alt { background: #e0edff; color: #1d4ed8; }

.atk-plan strong { display: block; font-size: 16px; margin-bottom: 5px; }

.atk-plan em {
  display: block;
  font-style: normal;
  font-size: 23px;
  font-weight: 950;
  color: var(--atk-primary, #2563eb);
  letter-spacing: -.02em;
  line-height: 1.2;
}

.atk-plan small { display: block; font-size: 12px; color: var(--atk-muted, #64748b); margin-bottom: 9px; }
.atk-plan p { margin: 0; font-size: 12.5px; line-height: 1.55; color: #475569; }

/* --- Adet --- */
.atk-qty-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 16px;
  padding: 16px 18px;
  border: 1px solid var(--atk-line, #e2e8f0);
  border-radius: 15px;
  background: var(--atk-soft, #f8fafc);
}

.atk-qty-label strong { display: block; font-size: 14.5px; }
.atk-qty-label small { display: block; font-size: 12px; color: var(--atk-muted, #64748b); }

.atk-qty {
  display: inline-flex;
  align-items: center;
  border: 1px solid #c9d8e8;
  border-radius: 12px;
  overflow: hidden;
  background: #fff;
}

.atk-qty-btn {
  width: 48px;
  height: 50px;
  border: 0;
  background: #eff4fb;
  font-size: 20px;
  font-weight: 900;
  color: #1d4ed8;
  cursor: pointer;
  transition: background .15s;
}

.atk-qty-btn:hover { background: #dbe9fd; }

.atk-qty input {
  width: 78px;
  height: 50px;
  margin: 0;
  border: 0;
  border-left: 1px solid #e2e8f0;
  border-right: 1px solid #e2e8f0;
  text-align: center;
  font-size: 16px;
  font-weight: 900;
  border-radius: 0;
  box-shadow: none;
  -moz-appearance: textfield;
}

.atk-qty input::-webkit-outer-spin-button,
.atk-qty input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

.atk-qty-hint {
  font-size: 12.5px;
  font-weight: 700;
  color: var(--atk-ok, #16a34a);
  flex: 1 1 180px;
  min-width: 0;
}

/* --- Aksesuarlar --- */
.atk-acc-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 270px), 1fr));
  gap: 11px;
}

.atk-acc {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 15px 16px;
  border: 1px solid var(--atk-line, #e2e8f0);
  border-radius: 14px;
  background: #fff;
  cursor: pointer;
  transition: border-color .18s, background .18s;
}

.atk-acc:hover { border-color: #bfd6f7; background: #fafcff; }
.atk-acc:has(input:checked) { border-color: var(--atk-primary, #2563eb); background: #f6faff; }

.atk-acc input,
.atk-inline-check input { position: absolute; opacity: 0; pointer-events: none; }

.atk-acc-box {
  flex: 0 0 auto;
  width: 21px;
  height: 21px;
  margin-top: 1px;
  border-radius: 7px;
  border: 2px solid #cbd5e1;
  background: #fff;
  position: relative;
  transition: .18s;
}

.atk-acc-box::after {
  content: "";
  position: absolute;
  left: 6px;
  top: 2px;
  width: 5px;
  height: 10px;
  border: solid #fff;
  border-width: 0 2.5px 2.5px 0;
  transform: rotate(45deg) scale(0);
  transition: transform .18s;
}

.atk-acc:has(input:checked) .atk-acc-box,
.atk-inline-check:has(input:checked) .atk-acc-box {
  border-color: var(--atk-primary, #2563eb);
  background: var(--atk-primary, #2563eb);
}

.atk-acc:has(input:checked) .atk-acc-box::after,
.atk-inline-check:has(input:checked) .atk-acc-box::after { transform: rotate(45deg) scale(1); }

.atk-acc-body { flex: 1; min-width: 0; }
.atk-acc-body strong { display: block; font-size: 14px; margin-bottom: 2px; }
.atk-acc-body small { display: block; font-size: 12.2px; line-height: 1.45; color: var(--atk-muted, #64748b); }

.atk-acc-price {
  flex: 0 0 auto;
  font-size: 13.5px;
  font-weight: 900;
  color: var(--atk-primary, #2563eb);
  white-space: nowrap;
}

/* --- Kurumsal / bireysel secici --- */
.atk-seg {
  display: inline-flex;
  padding: 5px;
  border-radius: 13px;
  background: #eef3fa;
  border: 1px solid #dde8f4;
  gap: 4px;
  margin-bottom: 20px;
}

.atk-seg-btn { position: relative; margin: 0; cursor: pointer; }
.atk-seg-btn input { position: absolute; opacity: 0; pointer-events: none; }

.atk-seg-btn span {
  display: block;
  padding: 11px 26px;
  border-radius: 10px;
  font-size: 14px;
  font-weight: 800;
  color: #475569;
  transition: .2s;
  white-space: nowrap;
}

.atk-seg-btn.is-active span {
  background: #fff;
  color: var(--atk-dark, #0f172a);
  box-shadow: 0 3px 10px rgba(15, 23, 42, .1);
}

/* --- Form alanlari --- */
.atk-field { margin-bottom: 17px; min-width: 0; }

.atk-field label {
  display: block;
  font-size: 13.2px;
  font-weight: 800;
  color: #334155;
  margin-bottom: 7px;
}

.atk-field label b { color: #dc2626; font-weight: 800; }

.atk-field input,
.atk-field select,
.atk-field textarea {
  width: 100%;
  min-height: 52px;
  border: 1.5px solid #cfdcea;
  border-radius: 13px;
  padding: 14px 15px;
  font: inherit;
  font-size: 15px;
  background: #fff;
  color: var(--atk-dark, #0f172a);
  transition: border-color .15s, box-shadow .15s;
}

.atk-field textarea { min-height: 92px; resize: vertical; line-height: 1.6; }

.atk-field input::placeholder,
.atk-field textarea::placeholder { color: #a3b3c6; }

.atk-field input:focus,
.atk-field select:focus,
.atk-field textarea:focus {
  outline: 0;
  border-color: var(--atk-primary, #2563eb);
  box-shadow: 0 0 0 4px rgba(37, 99, 235, .12);
}

.atk-field input.is-invalid,
.atk-field textarea.is-invalid {
  border-color: #ef4444;
  background: #fff7f7;
}

.atk-err {
  display: block;
  margin-top: 6px;
  font-size: 12.3px;
  font-weight: 700;
  color: #dc2626;
  min-height: 0;
}

.atk-hintline {
  display: block;
  margin-top: 6px;
  font-size: 12.5px;
  font-weight: 700;
  color: var(--atk-ok, #16a34a);
}

.atk-grid2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); gap: 0 15px; }
.atk-grid3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 12px; }

/* --- Satir ici onay kutulari --- */
.atk-inline-check {
  display: flex;
  align-items: flex-start;
  gap: 11px;
  padding: 14px 16px;
  border: 1px solid var(--atk-line, #e2e8f0);
  border-radius: 13px;
  background: var(--atk-soft, #f8fafc);
  font-size: 13.8px;
  line-height: 1.55;
  cursor: pointer;
  margin-bottom: 17px;
  position: relative;
}

.atk-inline-check a { color: var(--atk-primary, #2563eb); font-weight: 700; }
.atk-consent { margin-top: 22px; margin-bottom: 4px; }
.atk-consent b { color: #dc2626; }

/* --- Odeme bolumu --- */
.atk-pay {
  display: grid;
  grid-template-columns: 300px minmax(0, 1fr);
  gap: 24px;
  align-items: start;
}

/* --- Kabul edilen kartlar seridi --- */
.atk-cards-accepted {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px 14px;
  padding: 13px 16px;
  margin-bottom: 20px;
  border: 1px solid var(--atk-line, #e2e8f0);
  border-radius: 13px;
  background: var(--atk-soft, #f8fafc);
}

.atk-ca-label { font-size: 12.5px; font-weight: 800; color: var(--atk-muted, #64748b); }
.atk-ca-list { display: flex; flex-wrap: wrap; gap: 7px; }

.atk-ca-list b {
  padding: 6px 12px;
  border-radius: 8px;
  background: #fff;
  border: 1px solid #dbe6f3;
  font-size: 11.5px;
  font-weight: 900;
  letter-spacing: .04em;
  color: #334155;
}

.atk-ca-list b[data-brand="VISA"]       { color: #1a1f71; }
.atk-ca-list b[data-brand="MASTERCARD"] { color: #cc4b1f; }
.atk-ca-list b[data-brand="TROY"]       { color: #00a0d2; }
.atk-ca-list b[data-brand="AMEX"]       { color: #016fd0; }

/* --- Kart onizlemesi --- */
.atk-cardwrap { position: sticky; top: 90px; }

.atk-cardview {
  position: relative;
  aspect-ratio: 1.586;
  padding: 22px;
  border-radius: 18px;
  background:
    radial-gradient(120% 120% at 85% 15%, rgba(255,255,255,.16), transparent 55%),
    linear-gradient(135deg, #0b2545 0%, #16336b 45%, #2563eb 100%);
  color: #fff;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  box-shadow: 0 20px 48px rgba(11, 37, 69, .42), inset 0 1px 0 rgba(255,255,255,.14);
  overflow: hidden;
  transition: background .4s;
}

.atk-cardview[data-brand="MASTERCARD"] {
  background:
    radial-gradient(120% 120% at 85% 15%, rgba(255,255,255,.18), transparent 55%),
    linear-gradient(135deg, #2b1508 0%, #7c2d12 45%, #ea580c 100%);
}
.atk-cardview[data-brand="TROY"] {
  background:
    radial-gradient(120% 120% at 85% 15%, rgba(255,255,255,.18), transparent 55%),
    linear-gradient(135deg, #052e33 0%, #0e7490 45%, #06b6d4 100%);
}
.atk-cardview[data-brand="AMEX"] {
  background:
    radial-gradient(120% 120% at 85% 15%, rgba(255,255,255,.18), transparent 55%),
    linear-gradient(135deg, #0b3a56 0%, #0369a1 45%, #38bdf8 100%);
}

.atk-cardview-sheen {
  position: absolute;
  inset: -40% -55% auto auto;
  width: 300px;
  height: 300px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .07);
  pointer-events: none;
}

.atk-cardview-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: relative;
}

/* Cip - ince cizgili gercekci gorunum */
.atk-chip {
  position: relative;
  width: 46px;
  height: 34px;
  border-radius: 7px;
  background: linear-gradient(135deg, #fde68a 0%, #f59e0b 55%, #d97706 100%);
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .18);
  display: flex;
  flex-direction: column;
  justify-content: space-evenly;
  padding: 5px 7px;
}

.atk-chip i {
  display: block;
  height: 1px;
  background: rgba(0, 0, 0, .22);
  border-radius: 1px;
}

.atk-brand {
  font-size: 14px;
  font-weight: 950;
  letter-spacing: .1em;
  opacity: .96;
  text-shadow: 0 1px 2px rgba(0, 0, 0, .25);
}

.atk-cardview-num {
  position: relative;
  font-size: clamp(16px, 2.2vw, 21px);
  font-weight: 800;
  letter-spacing: .1em;
  font-variant-numeric: tabular-nums;
  text-shadow: 0 1px 3px rgba(0, 0, 0, .3);
  white-space: nowrap;
  overflow: hidden;
}

.atk-cardview-bottom {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 14px;
  position: relative;
}

.atk-cardview-bottom small {
  display: block;
  font-size: 8.5px;
  letter-spacing: .13em;
  opacity: .62;
  margin-bottom: 4px;
}

.atk-cardview-bottom span {
  font-size: 13.5px;
  font-weight: 800;
  letter-spacing: .05em;
  display: block;
}

.atk-cv-holder { min-width: 0; flex: 1 1 auto; }
.atk-cv-holder span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.atk-cv-exp { flex: 0 0 auto; text-align: right; }

/* Kart alti guvenlik notu */
.atk-cardnote {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  margin: 14px 0 0;
  padding: 12px 14px;
  border-radius: 12px;
  background: #ecfdf5;
  border: 1px solid #a7f3d0;
  font-size: 12.3px;
  line-height: 1.55;
  color: #065f46;
}

.atk-cardnote svg { width: 15px; height: 15px; flex: 0 0 auto; margin-top: 1px; }

/* Kart numarasi alaninda marka rozeti */
.atk-input-icon { position: relative; }

.atk-input-icon input { padding-right: 96px; }

.atk-input-brand {
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .04em;
  color: #334155;
  background: #eff4fb;
  border-radius: 7px;
  padding: 5px 9px;
  pointer-events: none;
}

.atk-input-brand:empty { display: none; }
.atk-input-brand[data-brand="VISA"]       { color: #1a1f71; }
.atk-input-brand[data-brand="MASTERCARD"] { color: #cc4b1f; }
.atk-input-brand[data-brand="TROY"]       { color: #00a0d2; }
.atk-input-brand[data-brand="AMEX"]       { color: #016fd0; }

/* CVV ipucu */
.atk-tip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  margin-left: 4px;
  border-radius: 50%;
  background: #cbd5e1;
  color: #fff;
  font-size: 10.5px;
  font-weight: 900;
  cursor: help;
  vertical-align: middle;
}

.atk-tip:hover, .atk-tip:focus { background: var(--atk-primary, #2563eb); outline: none; }

.atk-pay-fields { min-width: 0; }

/* --- Uyari kutusu --- */
.atk-alert {
  display: grid;
  gap: 5px;
  padding: 16px 18px;
  border-radius: 14px;
  font-size: 13.8px;
  line-height: 1.55;
}

.atk-alert.error { background: #fef2f2; border: 1px solid #fecaca; color: #991b1b; }
.atk-alert a { color: #991b1b; font-weight: 800; }

/* =====================================================================
   2B. SAG SUTUN - SIPARIS OZETI
===================================================================== */
.atk-co-side { min-width: 0; }

.atk-side-card {
  position: sticky;
  top: 90px;
  background: #fff;
  border: 1px solid #dde8f4;
  border-radius: 20px;
  padding: 22px;
  box-shadow: 0 14px 44px rgba(15, 23, 42, .09);
}

.atk-side-product {
  display: flex;
  align-items: center;
  gap: 14px;
  padding-bottom: 16px;
  margin-bottom: 16px;
  border-bottom: 1px solid #eef3f9;
}

.atk-side-product img {
  flex: 0 0 auto;
  width: 68px;
  height: 68px;
  object-fit: contain;
  padding: 8px;
  background: linear-gradient(180deg, #fff, #f2f8ff);
  border: 1px solid #eaf1fa;
  border-radius: 13px;
}

.atk-side-product strong { display: block; font-size: 14.5px; line-height: 1.35; margin-bottom: 3px; }
.atk-side-product small { display: block; font-size: 12.5px; font-weight: 700; color: var(--atk-primary, #2563eb); }

.atk-side-lines { display: grid; gap: 9px; margin-bottom: 16px; }

.atk-side-line {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  font-size: 13.3px;
}

.atk-side-line span { color: var(--atk-muted, #64748b); min-width: 0; }
.atk-side-line strong { font-weight: 800; white-space: nowrap; }
.atk-side-line.is-neg strong { color: var(--atk-ok, #16a34a); }

.atk-side-total {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  padding-top: 15px;
  border-top: 2px solid #eef3f9;
  font-size: 15px;
  font-weight: 800;
}

.atk-side-total strong {
  font-size: clamp(22px, 2.6vw, 27px);
  font-weight: 950;
  color: var(--atk-primary, #2563eb);
  letter-spacing: -.02em;
  white-space: nowrap;
}

.atk-side-vat { margin: 5px 0 0; font-size: 12px; color: var(--atk-muted, #64748b); text-align: right; }

.atk-side-recurring {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  margin-top: 12px;
  padding: 11px 14px;
  border-radius: 11px;
  background: #eff6ff;
  border: 1px solid #bfdbfe;
  font-size: 13.2px;
  color: #1e3a8a;
}

.atk-side-recurring strong { font-weight: 900; }

.atk-side-note {
  margin: 13px 0 0;
  font-size: 12.4px;
  line-height: 1.6;
  color: var(--atk-muted, #64748b);
}

.atk-submit {
  background-color: #2563eb;
  width: 100%;
  margin-top: 18px;
  padding: 18px;
  border: 0;
  border-radius: 14px;
  background-image: linear-gradient(135deg, var(--atk-primary, #2563eb), var(--atk-accent, #00c6ff));
  color: #fff;
  font: inherit;
  font-size: 16.5px;
  font-weight: 950;
  cursor: pointer;
  box-shadow: 0 14px 32px rgba(37, 99, 235, .34);
  transition: transform .2s, box-shadow .2s;
}

.atk-submit:hover:not(:disabled) { transform: translateY(-2px); box-shadow: 0 20px 42px rgba(37, 99, 235, .44); }
.atk-submit:disabled { opacity: .55; cursor: not-allowed; }

.atk-side-secure {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-top: 13px;
  font-size: 12.2px;
  font-weight: 800;
  color: var(--atk-muted, #64748b);
  text-align: center;
}

.atk-side-secure svg { width: 15px; height: 15px; flex: 0 0 auto; color: var(--atk-ok, #16a34a); }

.atk-side-trust {
  list-style: none;
  margin: 16px 0 0;
  padding: 15px 0 0;
  border-top: 1px solid #eef3f9;
  display: grid;
  gap: 8px;
}

.atk-side-trust li {
  position: relative;
  padding-left: 23px;
  font-size: 12.8px;
  color: #475569;
}

.atk-side-trust li::before {
  content: "✓";
  position: absolute;
  left: 0;
  color: var(--atk-ok, #16a34a);
  font-weight: 900;
}

.atk-side-help {
  margin-top: 15px;
  padding-top: 14px;
  border-top: 1px solid #eef3f9;
  font-size: 12.8px;
  color: var(--atk-muted, #64748b);
  text-align: center;
}

.atk-side-help a {
  display: block;
  margin-top: 3px;
  font-size: 15.5px;
  font-weight: 950;
  color: var(--atk-primary, #2563eb);
  text-decoration: none;
}

/* --- Mobil sabit alt bar --- */
.atk-stickybar {
  display: none;
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 50;
  align-items: center;
  gap: 12px;
  padding: 11px 14px calc(11px + env(safe-area-inset-bottom));
  background: rgba(255, 255, 255, .97);
  backdrop-filter: blur(10px);
  border-top: 1px solid #dde8f4;
  box-shadow: 0 -6px 24px rgba(15, 23, 42, .12);
}

.atk-stickybar-info { flex: 1 1 auto; min-width: 0; }
.atk-stickybar-info small { display: block; font-size: 11px; color: var(--atk-muted, #64748b); font-weight: 700; }

.atk-stickybar-info strong {
  display: block;
  font-size: 19px;
  font-weight: 950;
  color: var(--atk-primary, #2563eb);
  letter-spacing: -.02em;
}

.atk-stickybar-btn {
  background-color: #2563eb;
  flex: 0 0 auto;
  border: 0;
  border-radius: 13px;
  padding: 15px 22px;
  background: linear-gradient(135deg, var(--atk-primary, #2563eb), var(--atk-accent, #00c6ff));
  color: #fff;
  font: inherit;
  font-size: 15px;
  font-weight: 900;
  cursor: pointer;
  box-shadow: 0 8px 20px rgba(37, 99, 235, .32);
}

.atk-stickybar-btn:disabled { opacity: .55; cursor: not-allowed; }

/* =====================================================================
   3. SONUC VE TESHIS
===================================================================== */
.atk-result {
  width: min(620px, 100%);
  margin: 30px auto;
  padding: 38px 34px;
  text-align: center;
  background: #fff;
  border: 1px solid #d9e6f7;
  border-radius: 22px;
  box-shadow: 0 24px 60px rgba(15, 23, 42, .11);
}

.atk-result-icon {
  width: 66px;
  height: 66px;
  margin: 0 auto 18px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 32px;
  font-weight: 900;
  color: #fff;
}

.atk-result.ok .atk-result-icon { background: linear-gradient(135deg, #16a34a, #4ade80); }
.atk-result.fail .atk-result-icon { background: linear-gradient(135deg, #dc2626, #f87171); }

.atk-result h1 { font-size: 24px; margin: 0 0 10px; }
.atk-result > p { color: var(--atk-muted, #64748b); font-size: 15px; line-height: 1.65; margin: 0 0 20px; }

.atk-result-box {
  text-align: left;
  border: 1px solid var(--atk-line, #e2e8f0);
  border-radius: 15px;
  overflow: hidden;
  margin-bottom: 20px;
}

.atk-result-box div {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  padding: 12px 16px;
  border-bottom: 1px solid #eef3f9;
  font-size: 14px;
}

.atk-result-box div:last-child { border-bottom: 0; }
.atk-result-box span { color: var(--atk-muted, #64748b); }
.atk-result-box strong { font-weight: 900; text-align: right; }

.atk-result-next {
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--atk-muted, #64748b);
  margin: 0 0 22px;
}

.atk-result-actions { display: flex; gap: 11px; flex-wrap: wrap; justify-content: center; }

.atk-btn {
  background-color: #2563eb;
  display: inline-block;
  padding: 14px 26px;
  border-radius: 13px;
  background: linear-gradient(135deg, var(--atk-primary, #2563eb), var(--atk-accent, #00c6ff));
  color: #fff;
  font-weight: 900;
  font-size: 14.5px;
  text-decoration: none;
}

.atk-btn.ghost { background: #eff4fb; color: #0b2545; border: 1px solid #cfe0f2; }

.atk-debug {
  width: min(900px, 100%);
  margin: 0 auto;
  background: #fff;
  border: 1px solid var(--atk-line, #e2e8f0);
  border-radius: 20px;
  padding: 28px;
}

.atk-debug h1 { font-size: 21px; margin: 0 0 6px; }
.atk-debug h2 { font-size: 15px; margin: 26px 0 8px; }

.atk-debug-warn {
  padding: 12px 15px;
  border-radius: 11px;
  background: #fffbeb;
  border: 1px solid #fde68a;
  color: #92400e;
  font-size: 13.5px;
}

.atk-debug table { width: 100%; border-collapse: collapse; }

.atk-debug th,
.atk-debug td {
  padding: 9px 11px;
  border-bottom: 1px solid #eef3f9;
  font-size: 13.2px;
  text-align: left;
  vertical-align: top;
}

.atk-debug th { color: var(--atk-muted, #64748b); font-weight: 700; width: 36%; }

.atk-debug pre {
  background: #0f172a;
  color: #cbd5e1;
  padding: 15px;
  border-radius: 12px;
  font-size: 12px;
  line-height: 1.55;
  overflow: auto;
  max-height: 320px;
}

.atk-shop-footer {
  padding: 26px 18px 34px;
  text-align: center;
  background: #0b2545;
  color: rgba(255, 255, 255, .72);
  font-size: 13px;
}

.atk-shop-footer p { margin: 0 0 8px; }

.atk-shop-footer-links a {
  color: rgba(255, 255, 255, .88);
  text-decoration: none;
  margin: 0 9px;
  font-weight: 700;
}

.atk-shop-footer-links a:hover { text-decoration: underline; }

/* =====================================================================
   3B. YASAL ONAY VE SOZLESME METINLERI
===================================================================== */
.atk-legal {
  margin-top: 26px;
  padding-top: 22px;
  border-top: 1px solid #eef3f9;
}

.atk-legal-intro {
  margin: -4px 0 16px;
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--atk-muted, #64748b);
}

.atk-legal-item { margin-bottom: 14px; }

.atk-legal-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  min-height: 52px;
  padding: 14px 16px;
  border: 1px solid #cfdcea;
  border-radius: 13px 13px 0 0;
  background: var(--atk-soft, #f8fafc);
  font: inherit;
  font-size: 14px;
  font-weight: 800;
  color: var(--atk-dark, #0f172a);
  text-align: left;
  cursor: pointer;
  transition: background .18s, border-color .18s;
}

.atk-legal-toggle:hover { background: #eef4fb; border-color: #bfd6f7; }

.atk-legal-toggle em {
  flex: 0 0 auto;
  font-style: normal;
  font-size: 12.5px;
  font-weight: 800;
  color: var(--atk-primary, #2563eb);
}

.atk-legal-toggle[aria-expanded="true"] { border-color: var(--atk-primary, #2563eb); background: #f2f7ff; }

.atk-legal-doc {
  max-height: 340px;
  overflow-y: auto;
  padding: 18px 20px;
  border: 1px solid var(--atk-primary, #2563eb);
  border-top: 0;
  background: #fff;
  font-size: 13.2px;
  line-height: 1.72;
  color: #334155;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}

.atk-legal-doc h3 {
  margin: 0 0 14px;
  font-size: 16px;
  color: var(--atk-dark, #0f172a);
}

.atk-legal-doc h4 {
  margin: 20px 0 8px;
  font-size: 13.8px;
  color: var(--atk-dark, #0f172a);
}

.atk-legal-doc h4:first-of-type { margin-top: 6px; }

.atk-legal-doc p { margin: 0 0 10px; }
.atk-legal-doc ol, .atk-legal-doc ul { margin: 0 0 12px; padding-left: 20px; }
.atk-legal-doc li { margin: 5px 0; }
.atk-legal-doc a { color: var(--atk-primary, #2563eb); font-weight: 700; }

.atk-lg-table {
  width: 100%;
  border-collapse: collapse;
  margin: 0 0 14px;
  border: 1px solid #e6eef7;
  border-radius: 10px;
  overflow: hidden;
}

.atk-lg-table th,
.atk-lg-table td {
  padding: 9px 12px;
  border-bottom: 1px solid #eef3f9;
  font-size: 12.6px;
  text-align: left;
  vertical-align: top;
}

.atk-lg-table th {
  width: 38%;
  background: #f8fbff;
  color: var(--atk-muted, #64748b);
  font-weight: 700;
}

.atk-lg-table td { color: #1e293b; font-weight: 600; }
.atk-lg-table tr:last-child th,
.atk-lg-table tr:last-child td { border-bottom: 0; }

/* Siparise gore dolan alanlar */
.atk-lg-var {
  display: inline-block;
  padding: 1px 7px;
  border-radius: 6px;
  background: #eff6ff;
  color: #1d4ed8;
  font-weight: 800;
}

.atk-lg-meta,
.atk-lg-note {
  margin-top: 14px;
  padding: 11px 13px;
  border-radius: 10px;
  background: var(--atk-soft, #f8fafc);
  border: 1px solid var(--atk-line, #e2e8f0);
  font-size: 12.3px;
  color: var(--atk-muted, #64748b);
}

.atk-lg-warn {
  margin: 14px 0;
  padding: 13px 15px;
  border-radius: 11px;
  background: #fffbeb;
  border: 1px solid #fde68a;
  color: #92400e;
  font-size: 12.8px;
  line-height: 1.6;
}

/* Onay kutulari */
.atk-legal-check {
  margin-top: 0;
  margin-bottom: 0;
  border-radius: 0 0 13px 13px;
  border-color: #cfdcea;
}

.atk-legal-item .atk-legal-check { border-top: 0; }

.atk-legal .atk-legal-check + .atk-legal-check,
.atk-legal > .atk-legal-check { margin-top: 12px; border-radius: 13px; border-top: 1px solid #cfdcea; }

.atk-legal-check.is-invalid {
  border-color: #ef4444;
  background: #fff7f7;
}

.atk-legal-check b { color: #dc2626; }

.atk-legal-foot {
  margin: 14px 0 0;
  font-size: 12.5px;
  color: var(--atk-muted, #64748b);
}

.atk-legal-foot a { color: var(--atk-primary, #2563eb); font-weight: 700; }

#legalErr { margin-top: 10px; }

/* Bagimsiz sozlesme sayfasinda kaydirma yok, tam metin */
.atk-legal-doc--page {
  max-height: none;
  overflow: visible;
  border: 0;
  padding: 0;
  font-size: 14.5px;
}

.atk-legal-doc--page h3 { font-size: 20px; margin-top: 26px; }
.atk-legal-doc--page h4 { font-size: 15.5px; margin-top: 24px; }
.atk-legal-doc--page .atk-lg-table th,
.atk-legal-doc--page .atk-lg-table td { font-size: 13.5px; padding: 10px 13px; }

/* =====================================================================
   3C. TIPOGRAFI VE OKUNABILIRLIK
   Kucuk punto / dusuk kontrast kaynakli "ezik metin" gorunumunu giderir.
===================================================================== */

/* Sayfa ici bolumlerde ortak taban */
.atk-shop,
.atk-methods,
.atk-access {
  font-size: 16px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* Basliklar - daha net hiyerarsi */
.atk-shop-head h2,
.atk-access-text h2 {
  font-weight: 900;
  color: var(--atk-dark, #0f172a);
  text-wrap: balance;
}

.atk-access-text h2 { color: #fff; }

.atk-shop-head > p {
  font-size: clamp(15.5px, 1.6vw, 17px);
  line-height: 1.72;
  color: #475569;          /* #64748b'den koyu: kontrast AA */
  max-width: 64ch;
  text-wrap: pretty;
}

.atk-kicker {
  font-size: 12.5px;
  letter-spacing: .1em;
  padding: 8px 17px;
}

/* --- Odeme yontemi kartlari --- */
.atk-method h3 {
  font-size: clamp(19px, 2.1vw, 22px);
  font-weight: 900;
  color: var(--atk-dark, #0f172a);
  line-height: 1.25;
}

.atk-method-tag {
  font-size: 11px;
  letter-spacing: .07em;
  padding: 5px 12px;
}

.atk-method-price { padding: 18px 20px; }

.atk-method-price strong {
  font-size: clamp(26px, 3.6vw, 32px);
  line-height: 1.1;
}

.atk-method-price span {
  font-size: 13.5px;
  color: #475569;
  margin-top: 5px;
}

.atk-method-price.no-price strong { font-size: clamp(18px, 2.4vw, 22px); }

.atk-method-sub {
  font-size: 13.8px;
  line-height: 1.65;
  color: #334155;
}

.atk-method-desc {
  font-size: 14.2px;
  line-height: 1.7;
  color: #475569;
  text-wrap: pretty;
}

.atk-method-actions { gap: 10px; padding-top: 4px; }

.atk-methods-note {
  font-size: 14.5px;
  line-height: 1.75;
  color: #334155;
  text-wrap: pretty;
}

/* --- Urun blogu --- */
.atk-product-group { font-size: 12px; letter-spacing: .09em; }

.atk-product-body h3 { font-weight: 900; text-wrap: balance; }

.atk-product-desc {
  font-size: 15.5px;
  line-height: 1.75;
  color: #475569;
  max-width: 62ch;
  text-wrap: pretty;
}

.atk-product-features li {
  font-size: 14.5px;
  line-height: 1.6;
  color: #334155;
}

.atk-specs summary { font-size: 14.5px; }
.atk-specs dl { font-size: 13.8px; }
.atk-specs dt { color: #64748b; }
.atk-specs dd { color: #0f172a; }

/* --- Guven seridi --- */
.atk-trustbar div {
  font-size: 14px;
  line-height: 1.55;
  color: #334155;
}

.atk-trustbar strong {
  font-size: 21px;
  font-weight: 900;
  margin-bottom: 5px;
}

/* --- Yetkili bayi rozeti --- */
.atk-authorized span { font-size: 14px; }
.atk-authorized small { font-size: 12.5px; margin-top: 3px; }

/* --- Panel / uygulama bolumu (koyu zemin, kontrast kritik) --- */
.atk-access-text > p {
  color: rgba(255, 255, 255, .88);
  font-size: clamp(15.5px, 1.6vw, 17px);
  line-height: 1.78;
  max-width: 62ch;
  text-wrap: pretty;
}

.atk-access-list li {
  font-size: 15px;
  line-height: 1.6;
  color: rgba(255, 255, 255, .95);
}

.atk-access-note {
  color: rgba(255, 255, 255, .72);
  font-size: 13.5px;
  line-height: 1.7;
}

.atk-portal-text strong,
.atk-store-text strong { font-size: 16px; }
.atk-portal-text small,
.atk-store-text small { font-size: 11.5px; }

/* Uzun kelimeler tasmasin */
.atk-method h3,
.atk-product-body h3,
.atk-shop-head h2,
.atk-access-text h2,
.atk-method-price strong { overflow-wrap: break-word; hyphens: auto; }

/* Yatay tasma koruması */
.atk-shop,
.atk-methods,
.atk-access { overflow-x: clip; }

/* =====================================================================
   4. RESPONSIVE - TUM CIHAZLAR
   Dokunma hedefi minimum 48px, yatay tasma yok, CTA'lar tam genislik.
===================================================================== */

/* --- Buyuk tablet / kucuk masaustu --- */
@media (max-width: 1180px) {
  /* Siparis ozeti forma tasinir, sabitlik kalkar */
  .atk-co { grid-template-columns: minmax(0, 1fr); }
  .atk-co-side { order: -1; }
  .atk-side-card { position: static; }
  .atk-side-card .atk-submit,
  .atk-side-card .atk-side-secure,
  .atk-side-card .atk-side-trust { display: none; }
  .atk-stickybar { display: flex; }
  .atk-shop-wrap { padding-bottom: 110px; }
}

@media (max-width: 1100px) {
  .atk-checkout { grid-template-columns: minmax(0, 1fr); }
  .atk-summary { position: static; }
  .atk-summary img { height: 210px; }

  .atk-access-inner { grid-template-columns: minmax(0, 1fr); gap: 30px; }
  .atk-access-visual { order: -1; }
  .atk-access-visual img { max-width: 280px; }
  .atk-access-text > p,
  .atk-access-note { max-width: none; }
}

/* --- Tablet --- */
@media (max-width: 900px) {
  /* Kart onizlemesi ustte, alanlar altta */
  .atk-pay { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  .atk-cardwrap { position: static; max-width: 380px; margin: 0 auto; width: 100%; }
  .atk-checkout-top-inner { flex-direction: column; align-items: flex-start; gap: 14px; }

  .atk-product {
    grid-template-columns: minmax(0, 1fr);
    gap: 24px;
    padding: 24px;
  }
  .atk-product-media { padding: 20px; }
  .atk-product-media img { max-height: 260px; }
}

/* --- Buyuk telefon --- */
@media (max-width: 720px) {
  .atk-card-sec { padding: 20px 17px; border-radius: 17px; }
  .atk-sec-head { gap: 11px; margin-bottom: 18px; padding-bottom: 15px; }
  .atk-sec-head h2 { font-size: 17px; }
  .atk-sec-num { width: 30px; height: 30px; font-size: 14px; }

  .atk-progress { width: 100%; }
  .atk-progress li { font-size: 11.5px; }
  .atk-progress li + li::before { width: 14px; margin-right: 5px; }
  .atk-progress span { width: 22px; height: 22px; font-size: 11px; }

  .atk-qty-row { gap: 12px; }
  .atk-qty-hint { flex: 1 1 100%; }

  .atk-seg { width: 100%; }
  .atk-seg-btn { flex: 1; }
  .atk-seg-btn span { text-align: center; padding: 12px 10px; }

  .atk-shop,
  .atk-methods { padding: 44px 16px; }
  .atk-access { padding: 46px 16px; }

  .atk-methods-grid { gap: 26px; margin-top: 30px; }
  .atk-method { padding: 28px 20px 22px; }
  .atk-method-price { padding: 16px 16px; }
  .atk-method-actions { gap: 10px; }
  .atk-method-actions .atk-buy { min-height: 56px; font-size: 16px; }
  .atk-method-actions .atk-ghost { min-height: 52px; font-size: 14.5px; }
  .atk-methods-note { text-align: left; }

  /* Portal ve store butonlari tam genislik, alt alta */
  .atk-access-cta { flex-direction: column; gap: 11px; }
  .atk-portal-btn { flex: 1 1 auto; width: 100%; justify-content: center; }
  .atk-stores { flex: 1 1 auto; width: 100%; }
  .atk-store { flex: 1 1 calc(50% - 6px); justify-content: center; padding: 12px 14px; }
  .atk-store-text strong { font-size: 14px; }

  /* Urun aksiyonlari tam genislik */
  .atk-product-actions { flex-direction: column; }
  .atk-product-actions .atk-buy,
  .atk-product-actions .atk-ghost { flex: 1 1 auto; width: 100%; }

  .atk-trustbar { padding: 18px 16px; gap: 16px; }
  .atk-authorized { flex-direction: column; text-align: center; gap: 12px; padding: 18px 16px; }
  .atk-authorized-sep { display: none; }
  .atk-authorized img { height: 30px; }
}

/* --- Telefon --- */
@media (max-width: 560px) {
  /* Sozlesme metinleri telefonda daha kisa kutuda */
  .atk-legal-doc { max-height: 280px; padding: 15px 14px; font-size: 12.8px; }
  .atk-lg-table th, .atk-lg-table td { padding: 8px 9px; font-size: 12px; }
  .atk-lg-table th { width: 42%; }
  .atk-legal-toggle { font-size: 13.2px; padding: 13px 14px; }
  .atk-legal-toggle em { font-size: 11.5px; }

  /* Kabul edilen kartlar */
  .atk-cards-accepted { padding: 12px 13px; }
  .atk-ca-label { flex: 1 1 100%; }

  /* Kart alani */
  .atk-input-icon input { padding-right: 12px; }
  .atk-input-brand { display: none; }

  .atk-shop-wrap { padding: 16px 12px 110px; }
  .atk-card-sec { padding: 18px 15px; }
  .atk-side-card { padding: 18px 16px; border-radius: 17px; }

  .atk-plan-grid { grid-template-columns: 1fr; gap: 11px; }
  .atk-plan { padding: 18px 16px 16px; }
  .atk-acc-grid { grid-template-columns: 1fr; }
  .atk-grid2 { grid-template-columns: 1fr; }
  .atk-grid3 { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 9px; }
  .atk-grid3 .atk-field input,
  .atk-grid3 .atk-field select { padding: 14px 9px; font-size: 14.5px; }

  .atk-cardview { padding: 18px; border-radius: 16px; }
  .atk-cardview-num { font-size: 16px; letter-spacing: .06em; }
  .atk-cardview-bottom span { font-size: 11.5px; max-width: 120px; }

  .atk-side-total strong { font-size: 21px; }
  .atk-stickybar-info strong { font-size: 17px; }
  .atk-stickybar-btn { padding: 14px 16px; font-size: 14px; }

  .atk-brandline img { height: 25px; }
  .atk-brandline-text { font-size: 11.5px; }

  .atk-formbox,
  .atk-summary { padding: 18px 16px; border-radius: 18px; }
  .atk-result { padding: 26px 18px; margin: 18px auto; }

  .atk-shop-head h2,
  .atk-access-text h2 { font-size: clamp(22px, 6.2vw, 26px); line-height: 1.2; }

  .atk-shop-head > p,
  .atk-access-text > p { font-size: 15px; line-height: 1.7; }

  .atk-kicker { font-size: 11.5px; padding: 7px 14px; }

  /* Odeme yontemi kartlari telefonda tek sutun, dokunulabilir CTA */
  .atk-methods-grid { grid-template-columns: 1fr; gap: 24px; }
  .atk-method { padding: 26px 18px 20px; }
  .atk-method h3 { font-size: 19px; }
  .atk-method-price strong { font-size: 27px; }
  .atk-method-desc { font-size: 13.8px; }
  .atk-method-actions .atk-buy { min-height: 54px; }

  /* Guven seridi tek sutun */
  .atk-trustbar { grid-template-columns: 1fr 1fr; gap: 14px 12px; padding: 18px 14px; }
  .atk-trustbar div { font-size: 12.8px; }
  .atk-trustbar strong { font-size: 18px; }

  /* Urun blogu */
  .atk-product-desc { font-size: 14.8px; }
  .atk-product-features li { font-size: 14px; }

  /* Panel bolumu */
  .atk-access-list li { font-size: 14.2px; }
  .atk-portal-text strong, .atk-store-text strong { font-size: 15px; }

  .atk-product { padding: 18px; border-radius: 20px; }
  .atk-product-media img { max-height: 210px; }
  .atk-product-features { grid-template-columns: 1fr; gap: 9px; }

  .atk-specs dl { grid-template-columns: 1fr; gap: 2px; }
  .atk-specs dd { margin-bottom: 9px; }

  .atk-summary-specs dl { grid-template-columns: 1fr; gap: 2px; }
  .atk-summary-specs dd { margin-bottom: 8px; }

  /* Store butonlari tek sutun */
  .atk-store { flex: 1 1 100%; }

  .atk-access-list { grid-template-columns: 1fr; }

  .atk-plan-grid { grid-template-columns: 1fr; }
  .atk-acc-grid { grid-template-columns: 1fr; }

  .atk-live-row.total strong { font-size: 20px; }
  .atk-live { padding: 16px; }

  .atk-steps { display: flex; gap: 6px; font-size: 11px; padding: 9px 11px; }
  .atk-steps span { flex: 1; text-align: center; }

  .atk-grid2,
  .atk-grid3 { grid-template-columns: 1fr; }

  .atk-result-box div { flex-direction: column; gap: 3px; }
  .atk-result-box strong { text-align: left; }
  .atk-result-actions { flex-direction: column; }
  .atk-result-actions .atk-btn { width: 100%; }

  .atk-methods-note { padding: 16px; font-size: 13.2px; }

  .atk-topbar { padding: 11px 14px; }
  .atk-topbar a { font-size: 13px; }
  .atk-topbar-phone { padding: 8px 14px; }
}

/* --- Cok kucuk ekran --- */
@media (max-width: 380px) {
  .atk-trustbar { grid-template-columns: 1fr; }
  .atk-method-price strong { font-size: 24px; }
  .atk-methods-note { font-size: 13px; padding: 14px; }
  .atk-authorized img { height: 26px; }
  .atk-lg-table th, .atk-lg-table td { display: block; width: auto; }
  .atk-lg-table th { border-bottom: 0; padding-bottom: 2px; }
  .atk-stickybar { gap: 9px; padding: 10px 11px calc(10px + env(safe-area-inset-bottom)); }
  .atk-stickybar-btn { padding: 13px 13px; font-size: 13.2px; }
  .atk-stickybar-info strong { font-size: 16px; }
  .atk-brandline-text { display: none; }
  .atk-method-price strong { font-size: 22px; }
  .atk-qty-row { gap: 10px; }
  .atk-qty input { width: 62px; }
  .atk-shop-footer-links a { display: block; margin: 5px 0; }
}

/* --- Dokunmatik cihazlarda hover efektlerini kapat --- */
@media (hover: none) {
  .atk-method:hover,
  .atk-portal-btn:hover,
  .atk-store:hover,
  .atk-buy:hover,
  .atk-submit:hover:not(:disabled) { transform: none; }
}

/* --- Erisilebilirlik: klavye odagi --- */
.atk-buy:focus-visible,
.atk-ghost:focus-visible,
.atk-portal-btn:focus-visible,
.atk-store:focus-visible,
.atk-submit:focus-visible,
.atk-qty-btn:focus-visible,
.atk-legal-toggle:focus-visible,
.atk-stickybar-btn:focus-visible,
.atk-specs summary:focus-visible {
  outline: 3px solid #7dd3fc;
  outline-offset: 3px;
}

/* --- Hareket azaltma tercihi --- */
@media (prefers-reduced-motion: reduce) {
  .atk-method,
  .atk-portal-btn,
  .atk-store,
  .atk-buy,
  .atk-submit { transition: none; }
}

/* --- Gizli radio/checkbox icin klavye odagi --- */
.atk-plan:focus-within,
.atk-acc:focus-within,
.atk-inline-check:focus-within,
.atk-seg-btn:focus-within span {
  outline: 3px solid #7dd3fc;
  outline-offset: 2px;
}

/* --- Yazdirma --- */
@media print {
  .atk-topbar, .atk-stickybar, .atk-submit, .atk-side-help { display: none !important; }
  .atk-shop-wrap { background: #fff; padding: 0; }
}