/* ===================================================================
   Detail Page — Bayilik wizard + Ek hizmet modal + Domain query
   =================================================================== */

/* ---------- shared modal shell ---------- */
.dm-backdrop {
  position: fixed; inset: 0;
  background: rgba(16, 20, 29, .82);   /* PERF: backdrop blur kaldırıldı (modal açılış hızı) */
  z-index: 250;
  display: none;
  align-items: center; justify-content: center;
  padding: 24px;
  overflow-y: auto;
}
.dm-backdrop.is-open { display: flex; animation: wzFade .25s ease; }

.dm-modal {
  width: 100%;
  background: var(--c-surface);
  border-radius: 24px;
  box-shadow: 0 50px 120px rgba(0,0,0,.4);
  overflow: hidden;
  position: relative;
  animation: wzPop .35s cubic-bezier(.2,.8,.2,1);
  display: flex; flex-direction: column;
  max-height: calc(100vh - 48px);
}
.dm-modal.size-md { max-width: 640px; }
.dm-modal.size-lg { max-width: 760px; }

.dm-close {
  position: absolute; top: 16px; right: 16px;
  width: 36px; height: 36px; border-radius: 50%;
  background: rgba(0,0,0,.06);
  display: grid; place-items: center;
  color: var(--c-ink-soft);
  transition: all .15s;
  z-index: 5;
}
.dm-close:hover { background: var(--c-coral); color: #fff; transform: rotate(90deg); }
.dm-close svg { width: 14px; height: 14px; }

/* ===================================================================
   BAYILIK WIZARD MODAL
   =================================================================== */
.bayi-modal { padding: 0; }

.bayi-progress {
  padding: 22px 30px 16px;
  border-bottom: 1px solid var(--c-line);
  background: linear-gradient(180deg, #fff 0%, #FAFAF8 100%);
}
.bayi-progress-top {
  display: flex; justify-content: space-between; align-items: center;
  font-size: 11.5px; font-weight: 700; letter-spacing: .08em;
  color: var(--c-muted);
  text-transform: uppercase;
  margin-bottom: 10px;
  padding-right: 44px; /* kapatma (X) ikonuyla çakışmasın — step-name X'in soluna çekilir (wz-progress-top ile aynı desen) */
}
.bayi-progress-top .step-name {
  color: var(--c-ink); font-size: 13.5px;
  text-transform: none; letter-spacing: -.005em;
}
.bayi-bar {
  height: 6px; background: var(--c-bg-2); border-radius: 3px; overflow: hidden;
}
.bayi-bar-fill {
  height: 100%; background: linear-gradient(90deg, var(--c-amber), #FF9A45);
  border-radius: 3px; width: 0%;
  transition: width .4s cubic-bezier(.2, .8, .2, 1);
}

.bayi-body {
  flex: 1; overflow-y: auto;
  padding: 28px 30px;
  min-height: 0;
}
.bayi-step { display: none; animation: fadeUp .35s ease; }
.bayi-step.is-active { display: block; }

.bayi-step h3 {
  font-size: 22px; line-height: 1.2; letter-spacing: -.015em;
  margin: 0 0 6px;
  font-weight: 800;
}
.bayi-step .hint {
  font-size: 14px;
  color: var(--c-ink-soft);
  margin: 0 0 22px;
}

/* package picker */
.bayi-packs { display: flex; flex-direction: column; gap: 10px; }
.bayi-pack {
  display: grid; grid-template-columns: 56px 1fr auto;
  gap: 16px; align-items: center;
  padding: 18px 18px;
  border: 2px solid var(--c-line);
  border-radius: 16px;
  background: var(--c-surface);
  cursor: pointer; text-align: left;
  transition: all .18s;
  position: relative;
}
.bayi-pack:hover { transform: translateY(-2px); border-color: var(--c-ink); }
.bayi-pack.is-selected {
  border-color: var(--c-amber);
  background: linear-gradient(135deg, var(--c-amber-soft) 0%, #fff 60%);
  box-shadow: 0 0 0 4px rgba(255, 184, 69, .15);
}
.bayi-pack .ic-circle {
  width: 56px; height: 56px;
  border-radius: 16px;
  display: grid; place-items: center;
  color: #fff;
  font-weight: 800; font-size: 22px;
}
.bayi-pack[data-pack="silver"]   .ic-circle { background: linear-gradient(135deg, #A8B3C2, #6B7686); }
.bayi-pack[data-pack="gold"]     .ic-circle { background: linear-gradient(135deg, #FFB845, #E89211); }
.bayi-pack[data-pack="platinum"] .ic-circle { background: linear-gradient(135deg, #6E7CF2, #4C5BE0); }
.bayi-pack .ic-circle svg { width: 28px; height: 28px; }
.bayi-pack .meta b {
  display: block; font-size: 16px; font-weight: 800; margin-bottom: 3px;
  letter-spacing: -.005em;
}
.bayi-pack .meta span { font-size: 12.5px; color: var(--c-ink-soft); line-height: 1.5; }
.bayi-pack .price-col {
  display: flex; flex-direction: column; align-items: flex-end; gap: 2px;
}
.bayi-pack .price-col b {
  font-size: 18px; font-weight: 800; color: var(--c-ink);
}
.bayi-pack .price-col span { font-size: 11px; color: var(--c-muted); }
.bayi-pack .popular {
  position: absolute; top: -10px; right: 14px;
  background: var(--c-amber); color: #fff;
  font-size: 10.5px; font-weight: 800; letter-spacing: .08em;
  padding: 4px 10px; border-radius: 6px;
  box-shadow: 0 4px 10px rgba(255, 184, 69, .35);
}

/* benefits grid (step 2) */
.bayi-pack-head {
  display: flex; align-items: center; gap: 14px;
  padding: 18px 18px;
  border-radius: 16px;
  background: linear-gradient(135deg, var(--c-amber-soft) 0%, #fff 80%);
  border: 1px solid #F4DBA8;
  margin-bottom: 22px;
}
.bayi-pack-head .ic-circle {
  width: 48px; height: 48px;
  border-radius: 14px;
  display: grid; place-items: center;
  color: #fff;
}
.bayi-pack-head .ic-circle.silver { background: linear-gradient(135deg, #A8B3C2, #6B7686); }
.bayi-pack-head .ic-circle.gold { background: linear-gradient(135deg, #FFB845, #E89211); }
.bayi-pack-head .ic-circle.platinum { background: linear-gradient(135deg, #6E7CF2, #4C5BE0); }
.bayi-pack-head .ic-circle svg { width: 22px; height: 22px; }
.bayi-pack-head b { display: block; font-size: 16px; font-weight: 800; }
.bayi-pack-head span { font-size: 13px; color: var(--c-ink-soft); }
.bayi-pack-head .price-tag {
  margin-left: auto;
  background: var(--c-surface);
  border: 1.5px solid var(--c-amber);
  color: var(--c-ink);
  padding: 8px 14px;
  border-radius: 999px;
  font-weight: 800;
  font-size: 14px;
}

.bayi-benefits {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
}
.bayi-benefit {
  background: var(--c-surface);
  border: 1px solid var(--c-line);
  border-radius: 14px;
  padding: 16px;
  display: flex; gap: 12px; align-items: flex-start;
  transition: border-color .15s, transform .15s;
}
.bayi-benefit:hover { border-color: var(--c-amber); transform: translateY(-2px); }
.bayi-benefit .ic {
  width: 40px; height: 40px;
  border-radius: 12px;
  display: grid; place-items: center;
  flex-shrink: 0;
}
.bayi-benefit.coral .ic { background: var(--c-coral-soft); color: var(--c-coral); }
.bayi-benefit.mint .ic { background: var(--c-mint-soft); color: var(--c-mint-deep); }
.bayi-benefit.amber .ic { background: var(--c-amber-soft); color: #B47F25; }
.bayi-benefit.indigo .ic { background: var(--c-indigo-soft); color: var(--c-indigo); }
.bayi-benefit.violet .ic { background: var(--c-violet-soft); color: var(--c-violet); }
.bayi-benefit .ic svg { width: 20px; height: 20px; }
.bayi-benefit b {
  display: block; font-size: 13.5px;
  font-weight: 800; line-height: 1.3; margin-bottom: 4px;
}
.bayi-benefit span { font-size: 12px; line-height: 1.5; color: var(--c-ink-soft); }

.bayi-summary {
  margin-bottom: 22px; /* (kullanıcı isteği) artık bayi-benefits'ten ÖNCE geliyor, üstte değil altta boşluk gerekir */
  background: var(--c-bg-2);
  border-radius: 14px;
  padding: 18px;
  display: flex; align-items: center; gap: 14px;
}
.bayi-summary .ic {
  width: 40px; height: 40px;
  border-radius: 12px;
  background: var(--c-mint);
  color: #fff;
  display: grid; place-items: center;
  flex-shrink: 0;
  animation: bayiSummaryIconPulse 2.4s ease-in-out infinite;
}
.bayi-summary .ic svg { width: 18px; height: 18px; }
.bayi-summary b {
  display: block; font-size: 13px; font-weight: 800;
  background: linear-gradient(100deg, var(--c-ink) 45%, var(--c-mint-deep) 50%, var(--c-ink) 55%);
  background-size: 220% 100%;
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: bayiSummaryShine 2.8s ease-in-out infinite;
}
.bayi-summary span { font-size: 12px; color: var(--c-ink-soft); }

/* ---------- Paketinizle gelenler (hediye envanteri) ----------
   İçerik sipariş özetiyle AYNI kaynaktan gelir (bayi-wizard.js giftsOf).
   `auto`  = siparişe ücretsiz eklenir  ·  `choice` = sonradan panelden seçilir. */
.bayi-gifts { margin-bottom: 22px; }
.bayi-gifts[hidden] { display: none; }
.bayi-gifts-head {
  font-size: 11.5px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase;
  color: var(--c-muted); margin-bottom: 10px;
}
.bayi-gift-row {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 14px; margin-bottom: 8px;
  border: 1px solid var(--c-line); border-radius: 14px;
  background: var(--c-surface);
}
.bayi-gift-row:last-child { margin-bottom: 0; }
.bayi-gift-row .ic {
  width: 30px; height: 30px; border-radius: 10px;
  display: grid; place-items: center; flex-shrink: 0; color: #fff;
}
.bayi-gift-row .ic svg { width: 15px; height: 15px; }
.bayi-gift-row > div { flex: 1; min-width: 0; }
.bayi-gift-row b { display: block; font-size: 13.5px; font-weight: 800; color: var(--c-ink); }
.bayi-gift-row b .soft { font-weight: 600; color: var(--c-ink-soft); }
.bayi-gift-row > div > span { font-size: 12px; color: var(--c-ink-soft); }
.bayi-gift-row .tag {
  flex-shrink: 0; font-size: 10px; font-weight: 800; letter-spacing: .05em;
  padding: 3px 8px; border-radius: 7px;
}
.bayi-gift-row.auto .ic  { background: var(--c-mint); }
.bayi-gift-row.auto .tag { color: var(--c-mint-deep); background: var(--c-mint-soft); }
/* seçmeli: sepete girmediği için bilinçli olarak daha sakin bir dil */
.bayi-gift-row.choice     { background: var(--c-bg-2); border-style: dashed; }
.bayi-gift-row.choice .ic { background: #6E7CF2; }
.bayi-gift-row.choice .tag { color: #4b56c9; background: rgba(110,124,242,.14); }

/* (kullanıcı isteği) Kullanıcının odağı gelsin: ikon hafif hareketli + başlık parlama animasyonlu */
@keyframes bayiSummaryIconPulse {
  0%, 100% { transform: translateY(0) scale(1); box-shadow: 0 0 0 0 rgba(var(--c-accent-rgb), .45); }
  50%      { transform: translateY(-3px) scale(1.06); box-shadow: 0 0 0 7px rgba(var(--c-accent-rgb), 0); }
}
@keyframes bayiSummaryShine {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}
@media (prefers-reduced-motion: reduce) {
  .bayi-summary .ic, .bayi-summary b { animation: none; }
}

/* confirm step */
.bayi-confirm-card {
  background: linear-gradient(135deg, var(--c-mint-soft) 0%, #fff 70%);
  border: 1.5px solid #B8E6D4;
  border-radius: 18px;
  padding: 24px;
  text-align: center;
}
.bayi-confirm-card .ic {
  width: 64px; height: 64px;
  border-radius: 50%;
  background: var(--c-mint);
  color: #fff;
  display: grid; place-items: center;
  margin: 0 auto 12px;
  box-shadow: 0 12px 30px rgba(var(--c-accent-rgb), .18);
}
.bayi-confirm-card .ic svg { width: 32px; height: 32px; }
.bayi-confirm-card h4 { margin: 0 0 6px; font-size: 18px; font-weight: 800; }
.bayi-confirm-card p { margin: 0 0 18px; font-size: 13.5px; color: var(--c-ink-soft); }

.bayi-cart-row {
  display: flex; justify-content: space-between; align-items: center;
  padding: 14px 16px;
  background: var(--c-surface);
  border-radius: 12px;
  margin-bottom: 18px;
  font-size: 13px;
}
.bayi-cart-row b { font-size: 18px; font-weight: 800; color: var(--c-mint-deep); }

.bayi-confirm-card .actions {
  display: flex; gap: 10px; justify-content: center; flex-wrap: wrap;
}
.bayi-confirm-card .actions .btn { padding: 13px 22px; font-size: 13.5px; }

/* footer */
.bayi-foot {
  padding: 16px 30px;
  border-top: 1px solid var(--c-line);
  display: flex; justify-content: space-between; align-items: center;
  background: #FAFAFA;
  flex-shrink: 0;
}
.bayi-foot .btn { padding: 12px 22px; font-size: 13.5px; }
.bayi-foot .btn-back {
  background: transparent;
  color: var(--c-ink-soft);
  padding: 12px 16px;
}
.bayi-foot .btn-back:hover { color: var(--c-ink); }
.bayi-foot .btn-back.hidden { visibility: hidden; }

.btn-amber {
  background: var(--c-amber);
  color: #fff;
  box-shadow: 0 8px 18px rgba(255, 184, 69, .35);
}
.btn-amber:hover { background: #E89211; transform: translateY(-2px); }

/* ===================================================================
   EK HIZMET PICKER
   =================================================================== */
.extras-trigger {
  width: 100%;
  display: flex; align-items: center; gap: 12px;
  padding: 14px;
  background: var(--c-surface);
  border: 1.5px dashed var(--c-line-2);
  border-radius: 12px;
  text-align: left;
  transition: all .15s;
  font-size: 13.5px;
  color: var(--c-ink);
  font-weight: 600;
}
.extras-trigger:hover {
  border-color: var(--c-mint);
  background: var(--c-mint-soft);
}
.extras-trigger .ic {
  width: 36px; height: 36px;
  border-radius: 10px;
  background: var(--c-bg-2);
  display: grid; place-items: center;
  color: var(--c-mint-deep);
  flex-shrink: 0;
}
.extras-trigger:hover .ic { background: var(--c-surface); }
.extras-trigger .ic svg { width: 18px; height: 18px; }
.extras-trigger .text { flex: 1; line-height: 1.3; }
.extras-trigger .text small { display: block; font-size: 11.5px; font-weight: 500; color: var(--c-muted); margin-top: 2px; }
.extras-trigger .arr svg { width: 14px; height: 14px; color: var(--c-muted); }

.extras-chips {
  display: flex; flex-direction: column; gap: 6px;
  margin-top: 10px;
}
.extras-chips:empty { display: none; }
.extras-chip {
  display: flex; align-items: center; gap: 8px;
  background: var(--c-mint-soft);
  border: 1px solid #B8E6D4;
  border-radius: 10px;
  padding: 9px 12px;
  font-size: 12.5px;
}
.extras-chip .name { flex: 1; font-weight: 600; color: var(--c-ink); }
.extras-chip .price { font-weight: 800; color: var(--c-mint-deep); }
/* Hediye kalemin gerçek değeri — üzeri çizili (ödenmediği net anlaşılsın)
   ⚠️ text-decoration:line-through KULLANMA: çizginin yeri fontun strikeout metriğinden gelir ve
   bu webfont'ta metrik taban çizgisine yakın → çizgi rakamların ALTINA düşüyordu. Pseudo-element
   çizgi kutunun TAM ortasında (top:50%) durur, fonttan bağımsızdır. */
.extras-chip .price.real-old {
  font-weight: 600; font-size: 11.5px;
  color: var(--c-muted);
  position: relative; display: inline-block;
  text-decoration: none;
}
.extras-chip .price.real-old::after {
  content: ""; position: absolute; left: -1px; right: -1px; top: 50%;
  height: 1.5px; transform: translateY(-50%);
  background: var(--c-coral, #E2725B);
  border-radius: 2px; pointer-events: none;
}
.extras-chip .price.gift {
  background: var(--c-mint); color: #fff;
  padding: 3px 8px; border-radius: 5px;
  font-size: 10.5px; letter-spacing: .04em;
}
.extras-chip .remove {
  width: 22px; height: 22px;
  border-radius: 50%;
  background: var(--c-surface);
  color: var(--c-muted);
  display: grid; place-items: center;
  transition: all .15s;
}
.extras-chip .remove:hover { background: var(--c-coral); color: #fff; }
.extras-chip .remove svg { width: 10px; height: 10px; }

/* ek hizmet modal */
.extras-modal { padding: 0; }
.extras-modal-head {
  padding: 24px 28px 16px;
  border-bottom: 1px solid var(--c-line);
}
.extras-modal-head h3 {
  margin: 0 0 6px; font-size: 22px;
  letter-spacing: -.015em; font-weight: 800;
}
.extras-modal-head p { margin: 0; font-size: 14px; color: var(--c-ink-soft); }

.extras-modal-body {
  flex: 1; overflow-y: auto;
  padding: 18px 28px;
  display: flex; flex-direction: column; gap: 10px;
}
.extras-modal-item {
  display: grid; grid-template-columns: 44px 1fr auto auto;
  gap: 14px; align-items: center;
  padding: 14px;
  border: 1.5px solid var(--c-line);
  border-radius: 14px;
  cursor: pointer;
  transition: all .15s;
  background: var(--c-surface);
}
.extras-modal-item:hover { border-color: var(--c-line-2); background: #FAFAF8; }
.extras-modal-item.is-checked {
  border-color: var(--c-mint);
  background: var(--c-mint-soft);
}
.extras-modal-item.is-gift {
  border-color: #B8E6D4;
  background: linear-gradient(135deg, var(--c-mint-soft) 0%, #fff 100%);
}
.extras-modal-item .ic-circle {
  width: 44px; height: 44px;
  border-radius: 12px;
  background: var(--c-bg-2);
  display: grid; place-items: center;
  color: var(--c-ink);
}
.extras-modal-item.is-checked .ic-circle,
.extras-modal-item.is-gift .ic-circle {
  background: var(--c-mint); color: #fff;
}
.extras-modal-item .ic-circle svg { width: 20px; height: 20px; }
.extras-modal-item .meta b {
  display: block; font-size: 14px; font-weight: 700; line-height: 1.3;
}
.extras-modal-item .meta span {
  display: block; font-size: 12px; color: var(--c-ink-soft);
  margin-top: 2px; line-height: 1.5;
}
.extras-modal-item .price-col {
  display: flex; flex-direction: column; align-items: flex-end; gap: 2px;
}
/* üzeri çizili eski/gerçek fiyat — çizgi TAM ortadan (bkz. .extras-chip .price.real-old notu) */
.extras-modal-item .price-col .old {
  font-size: 11px; color: var(--c-muted);
  font-weight: 600;
  position: relative; display: inline-block;
  text-decoration: none;
}
.extras-modal-item .price-col .old::after {
  content: ""; position: absolute; left: -1px; right: -1px; top: 50%;
  height: 1.5px; transform: translateY(-50%);
  background: var(--c-coral, #E2725B);
  border-radius: 2px; pointer-events: none;
}
.extras-modal-item .price-col .now {
  font-size: 14px; font-weight: 800; color: var(--c-ink);
}
.extras-modal-item .price-col .gift-tag {
  background: var(--c-mint); color: #fff;
  font-size: 10.5px; font-weight: 800;
  padding: 3px 10px;
  border-radius: 6px;
  letter-spacing: .04em;
}
.extras-modal-item .check-circle {
  width: 26px; height: 26px;
  border-radius: 50%;
  border: 1.5px solid var(--c-line-2);
  background: var(--c-surface);
  display: grid; place-items: center;
  transition: all .15s;
}
.extras-modal-item.is-checked .check-circle,
.extras-modal-item.is-gift .check-circle {
  background: var(--c-mint); border-color: var(--c-mint);
}
.extras-modal-item .check-circle svg {
  width: 14px; height: 14px; color: #fff;
  opacity: 0; transition: opacity .15s;
}
.extras-modal-item.is-checked .check-circle svg,
.extras-modal-item.is-gift .check-circle svg { opacity: 1; }

.extras-modal-foot {
  padding: 16px 28px;
  border-top: 1px solid var(--c-line);
  display: flex; justify-content: space-between; align-items: center;
  background: #FAFAFA;
  gap: 14px;
}
.extras-modal-foot .totals {
  font-size: 13px;
  color: var(--c-ink-soft);
}
.extras-modal-foot .totals b {
  display: inline-block; margin-left: 6px;
  font-size: 16px; font-weight: 800; color: var(--c-ink);
}

/* ===================================================================
   DOMAIN QUERY
   =================================================================== */
.domain-query {
  margin-top: 10px;
  display: flex; flex-direction: column; gap: 8px;
}
.domain-query-row {
  display: flex; gap: 8px;
}
.domain-query-row input {
  flex: 1;
}
.domain-query-btn {
  padding: 12px 16px;
  background: var(--c-ink);
  color: #fff;
  border-radius: 10px;
  font-size: 12.5px; font-weight: 700;
  display: inline-flex; align-items: center; gap: 6px;
  white-space: nowrap;
  transition: background .15s;
}
.domain-query-btn:hover { background: #000; }
.domain-query-btn svg { width: 14px; height: 14px; }

.domain-result {
  padding: 13px 15px;
  border-radius: 11px;
  font-size: 13.5px;
  display: none;
  align-items: center; gap: 12px;
  animation: fadeUp .25s ease;
}
.domain-result.show { display: flex; }
/* sorgu sırası (nötr) — ok/bad henüz yokken */
.domain-result.show:not(.ok):not(.bad) {
  background: var(--c-bg-2);
  color: var(--c-ink-soft);
  border: 1px solid var(--c-line);
}
/* nötr/yükleniyor durumunda ikon dairesi görünür kalsın (aksi halde currentColor=#fff → beyaz-üstü-beyaz kaybolur) */
.domain-result.show:not(.ok):not(.bad) .ic { background: var(--c-ink-soft); }
.qr-spin { animation: qrSpin .8s linear infinite; transform-origin: center; }
@keyframes qrSpin { to { transform: rotate(360deg); } }
.domain-result.ok {
  background: #EAFBF1;
  color: #159A61;
  border: 1px solid #C2EBD6;
}
.domain-result.bad {
  background: #FDECEC;
  color: #D93A47;
  border: 1px solid #F6C9C9;
}
.domain-result .ic {
  width: 30px; height: 30px;
  border-radius: 50%;
  display: grid; place-items: center;
  background: currentColor;
  color: #fff;
  flex-shrink: 0;
}
.domain-result.ok .ic { background: #1FA86A; }
.domain-result.bad .ic { background: #E5484D; }
.domain-result .ic svg { width: 15px; height: 15px; }
.domain-result b { color: var(--c-ink); font-weight: 800; font-size: 14px; }
.domain-result .alts {
  margin-top: 4px;
  font-size: 12.5px;
  color: var(--c-ink-soft);
}
.domain-result .alts a {
  color: var(--c-mint-deep);
  font-weight: 600;
  margin-right: 8px;
  text-decoration: underline;
  text-decoration-style: dotted;
}

/* ---- responsive ---- */
@media (max-width: 640px) {
  .dm-backdrop { padding: 12px; }
  .dm-modal { border-radius: 18px; max-height: calc(100vh - 24px); }
  .bayi-progress { padding: 16px 20px 12px; }
  .bayi-body { padding: 18px 20px; }
  .bayi-step h3 { font-size: 20px; }
  .bayi-step .hint { margin-bottom: 16px; }
  .bayi-foot { padding: 14px 22px; }
  .bayi-pack { grid-template-columns: 48px 1fr; }
  .bayi-pack .price-col { grid-column: 1 / -1; flex-direction: row; justify-content: space-between; align-items: center; padding-top: 8px; border-top: 1px dashed var(--c-line); }
  .bayi-benefits { grid-template-columns: 1fr; }
  .bayi-pack-head { flex-wrap: wrap; }
  .bayi-pack-head .price-tag { margin-left: 0; }
  .extras-modal-head, .extras-modal-body, .extras-modal-foot { padding-left: 20px; padding-right: 20px; }
  .extras-modal-head { padding-top: 16px; padding-bottom: 12px; }
  .extras-modal-head h3 { font-size: 20px; }
  /* Ek hizmet kartları — mobil: üst satır [ikon · başlık · ✓], alt satır [fiyat] */
  .extras-modal-body { gap: 12px; padding-top: 16px; padding-bottom: 16px; }
  .extras-modal-item {
    grid-template-columns: 44px 1fr auto;
    column-gap: 12px; row-gap: 0;
    padding: 14px;
    border-radius: 14px;
    align-items: center;
  }
  .extras-modal-item .ic-circle { grid-column: 1; grid-row: 1; width: 44px; height: 44px; }
  .extras-modal-item .meta { grid-column: 2; grid-row: 1; min-width: 0; }
  .extras-modal-item .meta b { font-size: 14px; }
  .extras-modal-item .meta span {
    font-size: 12px; line-height: 1.45;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  }
  .extras-modal-item .check-circle {
    grid-column: 3; grid-row: 1; align-self: center;
    width: 24px; height: 24px;
  }
  .extras-modal-item .price-col {
    grid-column: 2; grid-row: 2;
    flex-direction: row; align-items: baseline; justify-content: flex-start;
    gap: 8px;
    margin-top: 3px;
  }
  .extras-modal-item .price-col .now { font-size: 15px; }
  .extras-modal-item .price-col .old { font-size: 12px; }
  .domain-query-row { flex-direction: column; }
}