/* ====== MERAND - Güvenli Minimal CSS (sadece menü + logo) ====== */

/* Üst menü: başlıkları büyüt, tıklanabilir alanı genişlet */
ul.menuBox > li.nav-item > a.nav-link{
  font-size: 18px !important;      /* 20px istersen yükselt */
  font-weight: 600 !important;
  padding: 10px 14px !important;
  letter-spacing: .2px;
  color: #cfa348 !important;        /* altın ton */
}
ul.menuBox > li.nav-item > a.nav-link:hover{
  color: #111 !important;
}

/* Mobilde biraz küçült */
@media (max-width: 992px){
  ul.menuBox > li.nav-item > a.nav-link{
    font-size: 16px !important;
    padding: 10px 12px !important;
  }
}

/* Logo: orantılı ve kontrollü büyütme */
#logoBox img.logoImg{
  max-height: 90px !important;     /* 90–110 arası deneyebilirsin */
  height: auto !important;
  width: auto !important;
}
.productTitle a.btn-light {
  display: none !important;
}
/* ——— CHECKOUT UX mini set ——— */

/* Hata mesajı stili */
.mrnd-field-error {
  margin-top: 6px;
  font-size: 12px;
  color: #d40000;
}

/* Doğru alan vurgusu (isteğe bağlı) */
.mrnd-ok {
  outline: 2px solid #15a34a33;
  border-color: #15a34a !important;
}

/* Demo/örnek kredi kartı görselini gizle (gerekirse sınıfı sende farklıdır) */
.card-preview, .credit-card-visual, .payment .card-demo, .iyzi-card, .pos-card-visual {
  display: none !important;
}

/* Mobilde taksit tablosunu sıkıştır */
@media (max-width: 768px){
  .installment-table, table.taksit, .posInstallment {
    font-size: 13px;
  }
}

/* “Tümünü Gör” linkini gizlemek istersen (anasayfa) */
.productTitle a.btn-light { display: none !important; }
<script>
/* ===== Merand Checkout UX Enhancer v1 ===== */
(function () {
  const $ = (s, r=document) => r.querySelector(s);
  const $$ = (s, r=document) => Array.from(r.querySelectorAll(s));

  /* 0) “CCV” yazılarını “CVV” yap + placeholder düzelt */
  function fixLabels(){
    $$('label, span, small, b, i, em').forEach(el=>{
      const t = (el.textContent || '').trim();
      if (t === 'CCV') el.textContent = 'CVV';
      if (t === 'CVC') el.textContent = 'CVV';
    });
    const cvv = $('input[name*="cvv" i], input[name*="cvc" i], input[placeholder*="CVV" i], input[placeholder*="CCV" i]');
    if (cvv){
      cvv.placeholder = 'CVV';
      cvv.setAttribute('maxlength','4');
      cvv.setAttribute('inputmode','numeric');
    }
  }

  /* 1) Alanları yakala (esnek seçiciler) */
  const card = $('input[autocomplete="cc-number"]')
            || $('input[name*="card" i]')
            || $('input[id*="card" i]');
  const expMonth = $('input[name*="month" i], select[name*="month" i], input[name*="ay" i], select[name*="ay" i]');
  const expYear  = $('input[name*="year" i],  select[name*="year" i],  input[name*="yil" i], select[name*="yil" i]');
  const cvv      = $('input[name*="cvv" i], input[name*="cvc" i], input[placeholder*="CVV" i], input[placeholder*="CCV" i]');

  /* 2) Yardımcılar */
  const onlyDigits = s => (s||'').replace(/\D+/g,'');
  function luhnOk(num){
    num = onlyDigits(num);
    if (!num) return false;
    let sum = 0, alt = false;
    for (let i = num.length - 1; i >= 0; i--) {
      let n = parseInt(num.charAt(i),10);
      if (alt){ n *= 2; if (n > 9) n -= 9; }
      sum += n; alt = !alt;
    }
    return (sum % 10) === 0;
  }
  function brand(num){
    const n = onlyDigits(num);
    if (/^4/.test(n)) return 'VISA';
    if (/^(5[1-5]|22[2-9]\d|2[3-6]\d{2}|27[01]\d|2720)/.test(n)) return 'MASTERCARD';
    if (/^(34|37)/.test(n)) return 'AMEX';
    if (/^(65|9792)/.test(n)) return 'TROY';
    return '';
  }
  function showError(input, msg){
    input.classList.remove('mrnd-ok');
    let hint = input.parentElement.querySelector('.mrnd-field-error');
    if (!hint){ hint = document.createElement('div'); hint.className='mrnd-field-error'; input.parentElement.appendChild(hint); }
    hint.textContent = msg;
  }
  function clearError(input){
    input.classList.add('mrnd-ok');
    const hint = input.parentElement.querySelector('.mrnd-field-error');
    if (hint) hint.textContent = '';
  }

  /* 3) Kart numarası: sadece rakam + 4’lü gruplama + Luhn */
  if (card){
    card.setAttribute('inputmode','numeric');
    card.setAttribute('autocomplete','cc-number');
    card.setAttribute('maxlength','23'); // boşluklar dahil
    card.addEventListener('input', e=>{
      const pos = card.selectionStart;
      const raw = onlyDigits(card.value).slice(0,19);
      const grouped = raw.replace(/(.{4})/g,'$1 ').trim();
      card.value = grouped;
      // Basit caret koruması
      try{ card.setSelectionRange(pos, pos); }catch(_){}
      // Canlı doğrulama
      if (raw.length >= 13 && !luhnOk(raw)) {
        showError(card, 'Kart numarası geçersiz görünüyor (Luhn).');
      } else {
        clearError(card);
      }
      // Marka bilgisi (isteğe bağlı göstermek için title)
      const b = brand(raw);
      if (b) card.title = 'Kart: ' + b;
    });
  }

  /* 4) Ay / Yıl alanları: otomatik format & geçiş */
  if (expMonth){
    expMonth.setAttribute('inputmode','numeric');
    expMonth.setAttribute('maxlength','2');
    expMonth.addEventListener('input', ()=>{
      expMonth.value = onlyDigits(expMonth.value).slice(0,2);
      const v = parseInt(expMonth.value||'0',10);
      if (v<1 || v>12) showError(expMonth,'Ay 01-12 olmalı'); else clearError(expMonth);
      if (expMonth.value.length === 2 && expYear) expYear.focus();
    });
  }
  if (expYear){
    expYear.setAttribute('inputmode','numeric');
    expYear.setAttribute('maxlength','2');
    expYear.addEventListener('input', ()=>{
      expYear.value = onlyDigits(expYear.value).slice(0,2);
      const v = parseInt(expYear.value||'0',10);
      if (v<0 || v>99) showError(expYear,'Yıl 00-99 olmalı'); else clearError(expYear);
    });
  }

  /* 5) CVV alanı */
  if (cvv){
    cvv.setAttribute('inputmode','numeric');
    cvv.setAttribute('maxlength','4');
    cvv.addEventListener('input', ()=>{
      cvv.value = onlyDigits(cvv.value).slice(0,4);
      if (cvv.value.length < 3) showError(cvv,'CVV 3 haneli olmalı'); else clearError(cvv);
    });
  }

  /* 6) Form submit’te son kontrol (engelleme & odaklama) */
  const form = $('form[action*="checkout"], form[id*="checkout"], form[name*="checkout"]') || $('form');
  if (form){
    form.addEventListener('submit', (e)=>{
      let firstBad = null;

      if (card){
        const raw = onlyDigits(card.value);
        if (raw.length < 13 || !luhnOk(raw)) { showError(card,'Kart numarası geçersiz'); firstBad = firstBad || card; }
      }
      if (expMonth){
        const m = parseInt(expMonth.value||'0',10);
        if (!(m>=1 && m<=12)) { showError(expMonth,'Ay 01-12 olmalı'); firstBad = firstBad || expMonth; }
      }
      if (expYear){
        const y = parseInt(expYear.value||'0',10);
        if (!(y>=0 && y<=99)) { showError(expYear,'Yıl 00-99 olmalı'); firstBad = firstBad || expYear; }
      }
      if (cvv && (cvv.value||'').length < 3){ showError(cvv,'CVV 3 haneli olmalı'); firstBad = firstBad || cvv; }

      if (firstBad){
        e.preventDefault();
        firstBad.scrollIntoView({behavior:'smooth', block:'center'});
        firstBad.focus({preventScroll:true});
      }
    }, true);
  }

  /* 7) “Toplam Ödeme” alanının altına KDV notu ekle (bulunabilirse) */
  const totals = $$('h3,h4,div,strong');
  const toplam = totals.find(el => /Toplam Ödeme/i.test(el.textContent||''));
  if (toplam && !$('#mrnd-kdv-note')){
    const note = document.createElement('div');
    note.id = 'mrnd-kdv-note';
    note.style.cssText = 'margin-top:6px;font-size:12px;color:#555;';
    note.textContent = 'Fiyatlara KDV dahildir.';
    toplam.parentElement.appendChild(note);
  }

  /* 8) Label düzeltmelerini çalıştır */
  fixLabels();

})();
</script>
/* Demo kredi kartı görselini gizle (geniş kapsayıcı) */
.checkout .payment .card-preview,
.checkout .payment .credit-card-visual,
.checkout .payment .card-mock,
.checkout .payment .card:first-child {  /* çoğu temada yeterli */
  display: none !important;
}

/* (İstersen) Taksit tablosunu mobilde sıkıştır */
@media (max-width:768px){
  .installment-table, .posInstallment, table.taksit { font-size: 13px; }
}
<script>
/* —— Merand Checkout Fixer ———————————————————————————— */
(function(){
  const $ = (s, r=document) => r.querySelector(s);
  const $$ = (s, r=document) => Array.from(r.querySelectorAll(s));
  const digits = s => (s||'').replace(/\D+/g,'');

  /* A) “CCV” → “CVV” (gecikmeli yüklemelerde de düzelt) */
  function fixCVVText(){
    $$('label, span, small, strong, b, i, em').forEach(el=>{
      if(/\bCCV\b/.test(el.textContent)) el.textContent = el.textContent.replace(/\bCCV\b/g,'CVV');
      if(/\bCVC\b/.test(el.textContent)) el.textContent = el.textContent.replace(/\bCVC\b/g,'CVV');
    });
    const cvv = $('input[name*="cvv" i], input[name*="cvc" i], input[placeholder*="CVV" i], input[placeholder*="CCV" i]');
    if (cvv){
      cvv.placeholder = 'CVV';
      cvv.setAttribute('maxlength','4');
      cvv.setAttribute('inputmode','numeric');
    }
  }
  fixCVVText();
  new MutationObserver(fixCVVText).observe(document.body, {childList:true, subtree:true});

  /* B) Kart numarası: sadece rakam + 4’lü gruplama */
  const card = $('input[autocomplete="cc-number"]') || $('input[name*="card" i]') || $('input[id*="card" i]');
  if (card){
    card.setAttribute('inputmode','numeric');
    card.setAttribute('maxlength','23'); // boşluklar dahil
    card.addEventListener('input', ()=>{
      const raw = digits(card.value).slice(0,19);
      card.value = raw.replace(/(.{4})/g,'$1 ').trim();
    });
  }

  /* C) Ay/Yıl alanları: numeric + uzunluk */
  const expM = $('input[name*="month" i], select[name*="month" i], input[name*="ay" i], select[name*="ay" i]');
  const expY = $('input[name*="year" i],  select[name*="year" i],  input[name*="yil" i], select[name*="yil" i]');
  if (expM){ expM.setAttribute('inputmode','numeric'); expM.setAttribute('maxlength','2'); }
  if (expY){ expY.setAttribute('inputmode','numeric'); expY.setAttribute('maxlength','2'); }

  /* D) CVV: numeric + 3–4 hane */
  const cvv = $('input[name*="cvv" i], input[name*="cvc" i], input[placeholder*="CVV" i], input[placeholder*="CCV" i]');
  if (cvv){
    cvv.setAttribute('inputmode','numeric');
    cvv.setAttribute('maxlength','4');
    cvv.addEventListener('input', ()=> cvv.value = digits(cvv.value).slice(0,4));
  }

  /* E) Demo kartı yakala ve gizle (sınıf adı bilinmiyorsa) */
  (function hidePreview(){
    // Ödeme alanındaki ilk büyük “kart” görselini hedefle
    const payBox = document.querySelector('.payment, .checkout, form[action*="checkout"]') || document.body;
    const candidates = $$('.card, [class*="card-"], [class*="credit"][class*="card"]', payBox);
    for (const el of candidates){
      const h = el.getBoundingClientRect().height;
      // input/label içermeyen ve 140px’ten büyük olanı demo kabul ediyoruz
      if (h > 140 && !el.querySelector('input, label, select, button')){
        el.style.display = 'none';
        break;
      }
    }
  })();
})();
</script>
/* A) Kart önizlemeyi gizle (row mb-3 içinde, number inputunu barındıran grup) */
.row.mb-3:has(#number) [style*="position: absolute"]:not(.fa-credit-card) {
  /* Önizleme genellikle absolute; input içindeki kart ikonu kalsın diye dışlıyoruz */
  display: none !important;
}

/* B) Üstte bırakılan boşluğu kapat (inline style ile 140px padding-top var) */
/* Inline !important'ı doğrudan ezemeyiz, bu yüzden grubu yukarı çekeceğiz */
.row.mb-3:has(#number) > * {
  transform: translateY(-120px);   /* gerektiğinde -140px yap */
}

/* C) Güvenli boşluk ayarı */
.row.mb-3:has(#number) { margin-bottom: 0 !important; }

/* D) CVV etiketini düzelt — “CCV” yazısını CSS ile “CVV” göster */
.mb-3:has(input[name*="cvv" i]) > label,
.mb-3:has(input[id*="cvv" i]) > label,
.mb-3:has(input[name*="cvc" i]) > label {
  font-size: 0 !important;                 /* orijinal metni görünmez yap */
}
.mb-3:has(input[name*="cvv" i]) > label::after,
.mb-3:has(input[id*="cvv" i]) > label::after,
.mb-3:has(input[name*="cvc" i]) > label::after {
  content: "CVV";
  font-size: 14px;
  font-weight: 600;
  color: inherit;
}

/* (İstersen) “Tümünü Gör” linki */
.productTitle a.btn-light { display: none !important; }
/* 0) Eski denemeyi nötrle (varsan kaldırır) */
.row.mb-3:has(#number) > * { transform: none !important; }

/* 1) Kart önizlemeyi gizle (row mb-3 içinde, #number inputunu barındıran grup) */
.row.mb-3:has(#number) .card-wrapper,
.row.mb-3:has(#number) .card-preview,
.row.mb-3:has(#number) .credit-card-visual,
.row.mb-3:has(#number) .card-visual,
.row.mb-3:has(#number) > :not(:has(input,select,textarea,label,button)) {
  display: none !important;
}

/* 2) Kart önizlemesi için bırakılmış 140px boşluğu kapat */
.row.mb-3:has(#number) > .col-12.mb-3:first-child { 
  margin-top: -140px !important;   /* boşluk daha azsa -120 / -100 deneyebilirsin */
}
.row.mb-3:has(#number) { margin-bottom: 0 !important; }

/* (İsteğe bağlı) “Tümünü Gör” linkini gizle */
.productTitle a.btn-light { display: none !important; }
/* ——— CHECKOUT TEMİZLİK ——— */

/* 1) Kart önizleme bileşenini kapat (farklı kütüphaneler için geniş kapsam) */
.jp-card,
.jp-card-container,
.card-wrapper,
.card-preview,
.credit-card-visual,
.card-visual,
.iyzi-card,
.pos-card-visual {
  display: none !important;
}

/* 2) Kart numarası satırında önizleme için bırakılan boşluğu kapat */
/* number inputunun bulunduğu .col-12.mb-3 kutusunu yukarı çekiyoruz */
.col-12.mb-3:has(#number) { 
  margin-top: -140px !important;   /* görseldeki boşluk ~140px; gerekirse -120/-100 yap */
}

/* 3) Alternatif (bazı temalarda satır sınıfları farklıysa): 
   number inputunu içeren ilk .row.mb-3'teki boşluğu kapat */
.row.mb-3:has(#number) { 
  margin-top: -140px !important;
  margin-bottom: 0 !important;
}

/* 4) Input içindeki ikon kaybolmasın */
.fa-credit-card { display: inline-block !important; }

/* 5) CVV etiketi düzeltmesi (kalıcı çeviri yapılana kadar) */
.mb-3:has(input[name*="cvv" i]), 
.mb-3:has(input[name*="cvc" i]) {
  /* label metnini görünmez yapıp yerine “CVV” basıyoruz */
}
.mb-3:has(input[name*="cvv" i]) > label,
.mb-3:has(input[name*="cvc" i]) > label { font-size:0 !important; }
.mb-3:has(input[name*="cvv" i]) > label::after,
.mb-3:has(input[name*="cvc" i]) > label::after { content:"CVV"; font-size:14px; font-weight:600; }
/* Alan yükseklikleri + odak stili (profesyonel görünüm) */
.checkout .form-control {
  height: 44px; border-radius: 6px;
}
.checkout .form-control:focus {
  box-shadow: 0 0 0 3px rgba(30,144,255,.15);
  border-color: #1e90ff;
}

/* İkon hizası (sağdaki küçük ikonlar) */
.input-group .fa { opacity:.7; }

/* Taksit tablosu daha kompakt */
.installment-table th, .installment-table td,
table.taksit th, table.taksit td { padding: 10px 12px; }

/* CVV yanında kısa yardım notu */
.mb-3:has(input[name*="cvv" i]) > label::after {
  content: " (kartın arkasındaki 3 hane)";
  font-size: 12px; font-weight: 400; color: #666; margin-left: 4px;
}

/* Ödeme butonunu vurgula; mobilde yapışkan CTA */
.pay-btn, button[type="submit"]{
  font-weight: 700; letter-spacing:.2px;
}
@media (max-width: 768px){
  .pay-btn, button[type="submit"]{
    position: sticky; bottom: 0; z-index: 10;
    border-radius: 10px; margin: 8px 0;
  }
}

/* Toplam Ödeme'nin altına güven notu için yer aç (metni altta ekleyeceğiz) */
.total-box-note { margin-top: 6px; font-size: 12px; color:#555; }
/* — Taksit Tablosu (Merand) — */
.installment-table, table.taksit, .posInstallment { width:100%; border-collapse: collapse; }
.installment-table th, table.taksit th, .posInstallment th,
.installment-table td, table.taksit td, .posInstallment td { padding: 12px 14px; }

/* 1) Satır vurgusu + seçili satır */
.mr-installments tbody tr:hover { background:#f8fafc; }
.mr-installments tbody tr.selected { background:#f0f7ff; outline:2px solid #1e90ff33; }

/* 2) İlk kolon dar; “Taksit” kalın; “Aylık” vurgulu */
.mr-installments td:first-child, .mr-installments th:first-child { width:40px; text-align:center; }
.mr-installments td:nth-child(2) { font-weight:600; }
.mr-installments .mr-month { font-weight:700; font-size:16px; line-height:1.2; }

/* 3) Rozetler */
.mr-badge { display:inline-block; margin-top:4px; padding:2px 8px; border-radius:999px; font-size:11px; }
.mr-badge.ok   { background:#eaf7ea; color:#137a2a; }   /* Vade Farksız */
.mr-badge.warn { background:#fff5e6; color:#a76300; }   /* Vade farkı varsa */

/* 4) Radyo butonu daha belirgin */
.mr-installments input[type="radio"]{ transform:scale(1.2); }

/* 5) Mobil: tabloyu kartlara dönüştür */
@media (max-width: 768px){
  .mr-installments thead { display:none; }
  .mr-installments tbody tr{
    display:grid; grid-template-columns: 1fr 1fr; gap:8px;
    border:1px solid #eee; border-radius:10px; padding:10px; margin-bottom:10px;
  }
  .mr-installments td{ border:none; padding:4px 6px; }
  .mr-installments td:first-child{ order:3; } /* radio altta */
  .mr-installments td:nth-child(2)::before{ content:"Taksit: "; font-weight:600; }
  .mr-installments td:nth-child(3)::before{ content:"Aylık: ";  font-weight:600; }
  .mr-installments td:nth-child(4)::before{ content:"Toplam: "; font-weight:600; }
}
<script>
/* — Merand Installment Enhancer — */
(function(){
  const table = document.querySelector('.installment-table, table.taksit, .posInstallment');
  if (!table) return;

  table.classList.add('mr-installments');

  const rows = Array.from(table.querySelectorAll('tbody tr')).filter(tr => tr.querySelector('td'));
  if (!rows.length) return;

  // Yardımcılar
  const parseTL = s => {
    const num = (s||'').toString().replace(/[^\d,.-]/g,'').replace(/\./g,'').replace(',', '.');
    return parseFloat(num || '0') || 0;
  };
  const fmtTL = n => n.toLocaleString('tr-TR', {minimumFractionDigits:2, maximumFractionDigits:2}) + ' TL';

  // Toplamı 1. satırdaki "Toplam Tutar"dan al
  const toplamRef = rows[0].querySelector('td:nth-child(4)');
  const orderTotal = toplamRef ? parseTL(toplamRef.textContent) : 0;

  rows.forEach(tr => {
    const taksitText = (tr.querySelector('td:nth-child(2)')?.textContent || '').trim();
    const taksit = /tek/i.test(taksitText) ? 1 : (parseInt(taksitText,10) || 1);

    const aylikTd  = tr.querySelector('td:nth-child(3)');
    const toplamTd = tr.querySelector('td:nth-child(4)');
    const rowTotal = toplamTd ? parseTL(toplamTd.textContent) : orderTotal;
    const monthly  = rowTotal / Math.max(1, taksit);

    // “Aylık Tutar”ı gerçek rakamla yaz + rozet
    if (aylikTd){
      const vadeFarksiz = Math.abs(rowTotal - orderTotal) < 0.01;
      aylikTd.innerHTML =
        '<div class="mr-month">'+ fmtTL(monthly) +'</div>' +
        '<div class="mr-badge ' + (vadeFarksiz ? 'ok' : 'warn') + '">' +
          (vadeFarksiz ? 'Vade Farksız' : ('Toplam: ' + fmtTL(rowTotal))) +
        '</div>';
    }

    // Satırı tıklayınca radyo seçilsin
    tr.style.cursor = 'pointer';
    tr.addEventListener('click', e=>{
      const radio = tr.querySelector('input[type="radio"]');
      if (radio){ radio.checked = true; rows.forEach(r=>r.classList.remove('selected')); tr.classList.add('selected'); }
    });
  });
})();
</script>
/* Toplam Tutar sütununu gizle (Aylık altına rozetle zaten gösteriliyor) */
.mr-installments th:nth-child(4), .mr-installments td:nth-child(4){ display:none; }
/* ——— Hukuki metin kutusu ——— */
#legalDocs {
  margin: 24px 0 8px;
  border: 1px solid #e9ecef;
  background: #fff;
  border-radius: 10px;
  overflow: hidden;
}
#legalDocs .ld-head {
  padding: 12px 16px;
  font-weight: 700;
  background: #f8fafc;
  border-bottom: 1px solid #eef2f7;
}
#legalDocs details { border-top: 1px solid #f0f2f5; }
#legalDocs details:first-of-type { border-top: 0; }
#legalDocs summary {
  cursor: pointer;
  padding: 12px 16px;
  list-style: none;
  position: relative;
  font-weight: 600;
}
#legalDocs summary::after{
  content: "▾";
  position: absolute; right: 16px; top: 50%; transform: translateY(-50%);
  opacity: .6;
}
#legalDocs details[open] summary::after{ content: "▴"; }
#legalDocs .ld-content{
  padding: 0 16px 16px;
}
#legalDocs iframe{
  width: 100%; height: 420px; border: 0; background: #fff;
}
@media (max-width: 768px){ #legalDocs iframe{ height: 320px; } }

/* Checkbox etiketindeki linkleri daha görünür yap */
.ld-inline a{ text-decoration: underline; font-weight: 600; }
<script>
(function(){
  const $ = (s, r=document) => r.querySelector(s);
  const $$ = (s, r=document) => Array.from(r.querySelectorAll(s));

  // 1) Checkout formunun sonuna hukuki kutuyu ekle
  const host = document.querySelector('.checkout, form[action*="checkout"], #checkout, main') || document.body;
  const box  = document.createElement('section');
  box.id = 'legalDocs';
  box.innerHTML = `
    <div class="ld-head">Satın Alma Öncesi Bilgilendirme</div>
    <details id="legalDocs-mesafeli" open>
      <summary>Mesafeli Satış Sözleşmesi</summary>
      <div class="ld-content">
        <iframe src="/mesafeli-satis-sozlesmesi"></iframe>
        <div style="margin-top:8px;font-size:12px;color:#666">
          Sayfanın açılmaması durumunda <a href="/mesafeli-satis-sozlesmesi" target="_blank" rel="noopener">buradan yeni sekmede açın</a>.
        </div>
      </div>
    </details>
    <details id="legalDocs-iade">
      <summary>İptal ve İade Koşulları</summary>
      <div class="ld-content">
        <iframe src="/iptal-iade-kosullari"></iframe>
        <div style="margin-top:8px;font-size:12px;color:#666">
          Açılmazsa <a href="/iptal-iade-kosullari" target="_blank" rel="noopener">buradan açın</a>.
        </div>
      </div>
    </details>
    <details id="legalDocs-kvkk">
      <summary>KVKK Aydınlatma Metni</summary>
      <div class="ld-content">
        <iframe src="/kvkk-aydinlatma-metni"></iframe>
        <div style="margin-top:8px;font-size:12px;color:#666">
          Açılmazsa <a href="/kvkk-aydinlatma-metni" target="_blank" rel="noopener">buradan açın</a>.
        </div>
      </div>
    </details>`;
  host.appendChild(box);

  // 2) Checkbox etiketindeki metni linklendirme (kullanıcı tıklayınca ilgili bölüme insin)
  const label = $$('label').find(l => /Mesafeli Satış/i.test(l.textContent) && /KVKK/i.test(l.textContent));
  if (label){
    const html = label.innerHTML
      .replace(/Mesafeli Satış Sözleşmesi/gi, '<a href="#legalDocs-mesafeli">Mesafeli Satış Sözleşmesi</a>')
      .replace(/İptal ve İade Koşullarını/gi, '<a href="#legalDocs-iade">İptal ve İade Koşullarını</a>')
      .replace(/KVKK Aydınlatma Metnini/gi, '<a href="#legalDocs-kvkk">KVKK Aydınlatma Metnini</a>');
    label.innerHTML = '<span class="ld-inline">' + html + '</span>';

    // Linke tıklanınca ilgili details'ı açıp aşağı kaydır
    label.addEventListener('click', function(e){
      const a = e.target.closest('a[href^="#legalDocs-"]');
      if (!a) return;
      e.preventDefault();
      const target = $(a.getAttribute('href'));
      if (target){ target.setAttribute('open',''); target.scrollIntoView({behavior:'smooth', block:'start'}); }
    });
  }
})();
</script>
/* ========== MERAND Checkout – Görsel düzen ========== */

/* Kart görünümü */
.mr-card { background:#fff; border:1px solid #e9ecef; border-radius:10px; overflow:hidden; }
.mr-head { padding:12px 16px; font-weight:700; border-bottom:1px solid #eef2f7; }
.mr-block { padding:14px 16px; border-top:1px solid #f6f7f9; }

/* Ödeme seçenekleri satırları */
.mr-option { display:flex; align-items:center; gap:10px; padding:10px 0; }
.mr-option label { margin:0; font-weight:600; cursor:pointer; }
.mr-note { font-size:12px; color:#666; margin-left:28px; }

/* 3D Secure anahtar stili (basit) */
.mr-switch { display:inline-flex; align-items:center; gap:8px; cursor:pointer; }
.mr-switch input { width:18px; height:18px; }

/* Bilgi kutusu (taksit mesajı) */
.mr-info { background:#eaf5ff; color:#0f4988; border:1px solid #cfe7ff; border-radius:8px; padding:10px 12px; font-size:13px; }

/* Form alanları – düzenli görünüm */
.checkout .form-control { height:44px; border-radius:6px; }
.checkout .form-control:focus { box-shadow:0 0 0 3px rgba(30,144,255,.15); border-color:#1e90ff; }

/* Taksit tablosu başlığı */
.mr-subhead { display:flex; justify-content:space-between; align-items:center; font-weight:700; margin:8px 0 6px; }

/* Sipariş özeti sağ sütun sabit (sticky) */
@media (min-width: 992px){
  .order-summary, .cart-summary, .sepet-ozet, #cartSummary {
    position: sticky; top: 16px;
  }
}

/* Alt hukuki linkler (footer’daki şerit) daha okunaklı */
.checkout .legal-links a { text-decoration: underline; }

/* İsteğe bağlı: “Siparişi Sonlandır” butonu kalın ve okunaklı */
button[type="submit"], .pay-btn, .complete-order {
  font-weight:700; letter-spacing:.2px;
}
<script>
/* ========== MERAND Checkout – Yapılandırıcı ========== */
(function(){
  const $  = (s,r=document)=>r.querySelector(s);
  const $$ = (s,r=document)=>Array.from(r.querySelectorAll(s));
  const digits = s => (s||'').replace(/\D+/g,'');

  // Sol ödeme alanını bul
  const payCol = $('.checkout .payment, .checkout form .col-lg-7, .checkout form .col-md-7, form[action*="checkout"]');
  if (!payCol) return;

  // 1) Ödeme seçenekleri kartı iskeleti
  let shell = $('#mr-pay-shell');
  if (!shell){
    shell = document.createElement('section');
    shell.id = 'mr-pay-shell';
    shell.className = 'mr-card';
    shell.innerHTML = `
      <div class="mr-head">Ödeme seçenekleri</div>
      <div class="mr-block" id="mr-card-pay"></div>
      <div class="mr-block" id="mr-installments"></div>
      <div class="mr-block" id="mr-cod"></div>
    `;
    // Ödeme formunun başına yerleştir
    payCol.prepend(shell);
  }

  // 2) Kredi kartı formunu mevcut yerinden al ve 1. bloğa koy
  const cardForm = payCol.querySelector('input[name*="card" i], input[id*="card" i], input[autocomplete="cc-number"]')
                  ? payCol.querySelector('div') : null;
  const block1 = $('#mr-card-pay');
  if (cardForm && block1 && !block1.querySelector('input')){
    // Kart numarası satırını içeren en yakın kapsayıcıyı bul
    const container = payCol.querySelector('.row.mb-3, .payment-card, .credit-card-form, .card-fields') || payCol;
    block1.appendChild(container);
    // Başına kredi kartı başlığı + 3D anahtarını ekle
    const head = document.createElement('div');
    head.className = 'mr-option';
    head.innerHTML = `
      <input type="checkbox" id="mr-cc-on" checked>
      <label for="mr-cc-on">Kredi kartı</label>
      <span class="mr-switch" style="margin-left:auto">
        <input type="checkbox" id="mr-3d" checked>
        <label for="mr-3d" title="3D Secure, bankanızın doğrulamasıyla daha güvenli ödeme sağlar.">3D Secure kullanmak istiyorum</label>
      </span>
    `;
    block1.prepend(head);
  }

  // 3) Taksit bloğu: başlık + bilgi mesajı
  const block2 = $('#mr-installments');
  if (block2 && !$('#mr-ins-ready')){
    block2.innerHTML = `
      <div class="mr-subhead">
        <div>Taksitli ödemeyi seçin</div>
        <a href="#" id="mr-all-installments" style="font-weight:600; font-size:13px;">Tüm taksit seçenekleri</a>
      </div>
      <div id="mr-ins-info" class="mr-info">Kart numaranızı girdikten sonra taksit listesi karşınıza gelecektir.</div>
    `;
    block2.id = 'mr-ins-ready';
  }

  // 4) Kapıda ödeme varsa alıp 3. bloğa taşı
  const codRow = $$('label, span').find(el=>/Kapıda ?Ödeme/i.test(el.textContent));
  const block3 = $('#mr-cod');
  if (codRow && block3 && !block3.children.length){
    const row = codRow.closest('.form-check, .mr-option, div');
    const wrap = document.createElement('div');
    wrap.className = 'mr-option';
    wrap.appendChild(row);
    block3.appendChild(wrap);
  } else if(block3){ // Kapıda ödeme yoksa bloğu gizle
    block3.style.display = 'none';
  }

  // 5) Kart numarası girilince taksit mesajını gizle
  const numberInput = $('input[autocomplete="cc-number"]') || $('input#number') || $('input[name*="card" i]');
  const insInfo = $('#mr-ins-info');
  function toggleInstallmentHint(){
    if (!numberInput || !insInfo) return;
    const len = digits(numberInput.value).length;
    insInfo.style.display = len >= 6 ? 'none' : 'block';
  }
  if (numberInput){
    numberInput.addEventListener('input', toggleInstallmentHint);
    toggleInstallmentHint();
  }

  // 6) CTA metni – rakipteki gibi
  const submitBtn = $('button[type="submit"], .pay-btn, .complete-order');
  if (submitBtn && !/Siparişi sonlandır/i.test(submitBtn.textContent)){
    submitBtn.textContent = 'Siparişi sonlandır';
  }

  // 7) 3D Secure anahtarı ile ödeme modülünü senkronize et (varsa)
  const chk3d = $('#mr-3d');
  if (chk3d){
    const provider3d = $$('input[type="checkbox"], input[type="radio"]').find(i => /3d/i.test(i.id||'') || /3d/i.test(i.name||''));
    if (provider3d){
      provider3d.checked = true;
      chk3d.addEventListener('change', ()=> provider3d.checked = chk3d.checked);
    }
  }
})();
</script>
<div class="guvenlik">
  <img src="visa.png" alt="Visa" height="30">
  <img src="mastercard.png" alt="Mastercard" height="30">
  <img src="troy.png" alt="Troy" height="30">
  <p>Ödemeleriniz 256-bit SSL sertifikası ile korunmaktadır. 3D Secure desteklidir.</p>
</div>
.guvenlik {
  margin-top: 15px;
  text-align: center;
  font-size: 12px;
  color: #555;
}
.guvenlik img {
  margin: 0 5px;
  vertical-align: middle;
}
<label>CVV 
  <span title="Kartınızın arkasındaki 3 haneli güvenlik kodu">❓</span>
</label>
<input type="password" maxlength="3">