/* dijital10 ödeme sayfası — marka: sıcak kırık-beyaz zemin, mürekkep metin, sarı vurgu */
:root{
  --zemin:#F7F7F5; --murekkep:#111827; --yumusak:#3A3F4A; --gri:#8A847A;
  --cizgi:#E7E3DA; --sari:#FFD23F; --navy:#0f172a; --yesil:#0E9F6E; --kirmizi:#D64545;
  /* Koyu sipariş panelinde kullanılan kontrast katmanları */
  --panel-yazi:rgba(255,255,255,.74); --panel-soluk:rgba(255,255,255,.52);
  --panel-cizgi:rgba(255,255,255,.14);
}
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{
  font-family:'Plus Jakarta Sans',system-ui,-apple-system,'Segoe UI',sans-serif;
  background:var(--zemin);color:var(--murekkep);line-height:1.6;
  display:flex;flex-direction:column;min-height:100vh;
}
a{color:inherit}

.ust{
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:18px 24px;border-bottom:1px solid var(--cizgi);background:#fff;
}
.ust .marka img{display:block;height:30px}
.kilit{
  display:inline-flex;align-items:center;gap:6px;
  font-size:.8rem;color:var(--gri);font-weight:600;white-space:nowrap;
}

.sarma{flex:1;width:100%;max-width:640px;margin:0 auto;padding:38px 20px 56px}
.kart{background:#fff;border:1px solid var(--cizgi);border-radius:20px;padding:32px}
.kart-genis{padding:24px}

/* ===== İki sütunlu ödeme düzeni (body.genis) =====
   Solda ne satın alındığı, sağda fatura formu. Alt bilgi de aynı genişliğe
   açılır, yoksa 640px'lik künye 1060px'lik içeriğin altında dar kalırdı. */
.genis .sarma,
.genis .dip .kunye,
.genis .dip .yasal{max-width:1060px}

.odeme-bas{margin-bottom:24px}
.odeme-duzen{
  display:grid;grid-template-columns:minmax(0,.88fr) minmax(0,1.12fr);
  gap:24px;align-items:start;
}
/* Sipariş paneli bilinçli olarak forma zıt: koyu zemin, satın alınanı formdan
   ayırıyor ve tutarı sayfanın en okunur öğesi yapıyor. */
.ozet-panel{
  background:var(--murekkep);border:1px solid var(--murekkep);
  border-radius:20px;padding:22px;color:#fff;
}

/* ===== Adım göstergesi ===== */
.adimlar{
  list-style:none;display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;
  margin-bottom:22px;font-size:.83rem;font-weight:600;color:var(--gri);
}
.adimlar li{display:flex;align-items:center;gap:8px}
.adimlar li+li::before{content:"";width:20px;height:1px;background:var(--cizgi)}
.adimlar [aria-current="step"]{color:var(--murekkep)}
.adim-no{
  width:20px;height:20px;border-radius:50%;display:grid;place-items:center;
  font-size:.72rem;font-weight:800;background:var(--cizgi);color:var(--yumusak);
}
.adimlar [aria-current="step"] .adim-no{background:var(--murekkep);color:#fff}

/* Sticky yalnız panelin sığdığı ekranlarda: kısa ekranda tepeye çivilenirse
   panelin altı (toplam tutar, yenilenmez uyarısı) hiç okunamaz hale gelir. */
@media (min-width:901px) and (min-height:780px){
  .ozet-panel{position:sticky;top:24px}
}

.etiket{
  display:inline-block;font-size:.68rem;font-weight:800;letter-spacing:.12em;
  text-transform:uppercase;color:var(--gri);margin-bottom:10px;
}
h1{font-size:clamp(1.5rem,4vw,1.9rem);font-weight:800;letter-spacing:-.02em;line-height:1.25}
.alt{color:var(--yumusak);font-size:.97rem;margin-top:10px}
.alt a{font-weight:600;text-decoration:underline;text-underline-offset:3px}

/* ===== Sipariş özeti =====
   <details> olarak işaretlenir: geniş ekranda tetik gizlenir ve panel hep
   açık durur; dar ekranda tetik görünür, panel katlanır (bkz. @media). */
.ozet{margin:0}
.ozet-tetik{display:none}
.ozet-bas{display:flex;align-items:flex-start;justify-content:space-between;gap:14px}
.ozet .etiket{margin-bottom:12px}

.ozet-dahil{margin-top:18px;border-top:1px solid var(--cizgi);padding-top:14px}
.ozet-dahil-bas{
  font-size:.7rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase;
  color:var(--gri);margin-bottom:10px;
}
.ozet-dahil ul{list-style:none;display:flex;flex-direction:column;gap:8px}
.ozet-dahil li{
  position:relative;padding-inline-start:24px;
  font-size:.89rem;color:var(--yumusak);line-height:1.5;
}
.ozet-dahil li::before{
  content:"✓";position:absolute;inset-inline-start:0;top:-1px;
  color:var(--yesil);font-weight:800;font-size:.92rem;
}

/* --- Koyu panel içi kontrast. Yalnız .ozet-panel altında: .ozet-satirlar,
   .ozet-toplam ve .yenilenmez sonuc.php'de beyaz kartta da kullanılıyor. --- */
.ozet-panel .etiket{color:var(--panel-soluk)}
.ozet-panel .ozet-ad{color:#fff}
.ozet-panel .ozet-alt{color:var(--panel-yazi)}
.ozet-panel .ozet-degistir{color:var(--panel-yazi)}
.ozet-panel .ozet-degistir:hover{color:#fff}
.ozet-panel .ozet-dahil{border-top-color:var(--panel-cizgi)}
.ozet-panel .ozet-dahil-bas{color:var(--panel-soluk)}
.ozet-panel .ozet-dahil li{color:var(--panel-yazi)}
.ozet-panel .ozet-dahil li::before{color:var(--sari)}
.ozet-panel .ozet-satirlar{border-top-color:var(--panel-cizgi)}
.ozet-panel .ozet-satirlar>div{color:var(--panel-yazi)}
.ozet-panel .ozet-satirlar dd{color:#fff}
.ozet-panel .ozet-toplam{border-top-color:var(--panel-cizgi)}
.ozet-panel .ozet-toplam dt{color:#fff}
/* Ödenecek tutar marka sarısında: paneldeki tek sarı öğe, göz oraya gidiyor. */
.ozet-panel .ozet-toplam dd{color:var(--sari)}
.ozet-panel .ozet-not{color:var(--panel-soluk)}
.ozet-panel .yenilenmez{
  background:rgba(255,255,255,.06);border:0;
  border-inline-start:3px solid var(--sari);border-radius:10px;
  color:var(--panel-yazi);
}
.ozet-panel .yenilenmez strong{color:#fff}

/* Sepet kalemleri — çok kalemli siparişte özet panelindeki satır listesi. */
.ozet-kalemler{
  list-style:none;margin-top:16px;border-top:1px solid var(--panel-cizgi);
  padding-top:14px;display:flex;flex-direction:column;gap:11px;
}
.ozet-kalemler li{display:flex;align-items:baseline;justify-content:space-between;gap:12px}
.kalem-ad{font-size:.9rem;color:var(--panel-yazi);line-height:1.45}
.kalem-tutar{font-size:.9rem;font-weight:700;color:#fff;font-variant-numeric:tabular-nums;white-space:nowrap}
.kalem-adet{
  display:inline-block;margin-inline-start:4px;
  font-size:.78rem;font-weight:800;color:var(--sari);
}

/* Taksit rozeti — taksit imkânı düz metinde gözden kaçıyordu. */
.taksit-rozet{
  display:inline-block;vertical-align:middle;margin-inline-start:8px;
  background:var(--sari);color:var(--murekkep);border-radius:999px;
  padding:3px 9px;font-size:.7rem;font-weight:800;white-space:nowrap;
}
.ozet-ad{font-weight:800;font-size:1.05rem;letter-spacing:-.01em}
.ozet-alt{font-size:.85rem;color:var(--gri);margin-top:3px}
.ozet-degistir{font-size:.83rem;font-weight:700;color:var(--yumusak);text-decoration:underline;text-underline-offset:3px;white-space:nowrap}
.ozet-degistir:hover{color:var(--murekkep)}
.ozet-satirlar{margin-top:16px;border-top:1px solid var(--cizgi);padding-top:14px;display:flex;flex-direction:column;gap:8px}
.ozet-satirlar>div{display:flex;align-items:baseline;justify-content:space-between;gap:12px;font-size:.92rem;color:var(--yumusak)}
.ozet-satirlar dd{font-variant-numeric:tabular-nums;font-weight:600}
.ozet-toplam{border-top:1px solid var(--cizgi);padding-top:10px;margin-top:2px}
.ozet-toplam dt{font-weight:800;color:var(--murekkep)}
.ozet-toplam dd{font-weight:800;font-size:1.25rem;color:var(--murekkep)}
.ozet-not{margin-top:12px;font-size:.83rem;color:var(--gri)}

form{margin-top:26px;display:flex;flex-direction:column;gap:16px}
.ikili{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.alan{display:flex;flex-direction:column;gap:7px}
label{font-size:.87rem;font-weight:600}
input,textarea{
  font:inherit;font-size:1rem;color:var(--murekkep);background:var(--zemin);
  border:1px solid var(--cizgi);border-radius:12px;padding:13px 15px;width:100%;
  transition:border-color .15s,background .15s;
}
textarea{resize:vertical;min-height:64px}
input:focus,textarea:focus{outline:none;border-color:var(--murekkep);background:#fff}


.onay{display:flex;gap:11px;align-items:flex-start;font-size:.9rem;color:var(--yumusak);font-weight:400;cursor:pointer}
.onay input{width:19px;height:19px;flex:0 0 19px;margin-top:2px;accent-color:var(--murekkep)}
.onay a{font-weight:600;text-decoration:underline;text-underline-offset:3px}

.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  background:var(--murekkep);color:#fff;border:none;border-radius:999px;
  padding:16px 28px;font:inherit;font-size:1rem;font-weight:700;cursor:pointer;
  text-decoration:none;transition:background .18s,transform .18s;
}
.btn:hover{background:var(--navy);transform:translateY(-1px)}
.btn .ok{transition:transform .18s}
.btn:hover .ok{transform:translateX(3px)}

.hata{color:var(--kirmizi);font-size:.83rem;font-weight:600}
.uyari{
  background:#FDECEC;border:1px solid #F5C6C6;color:#8C2B2B;
  border-radius:12px;padding:13px 16px;font-size:.9rem;font-weight:600;margin-top:18px;
}
.guven{font-size:.83rem;color:var(--gri);text-align:center;margin-top:2px}

/* ===== Ödeme rozetleri =====
   Koyu panelin tepesinde. Resmi paketin beyaz varyantı zaten koyu zemin için
   çizilmiş, o yüzden ayrı bir kutuya alınmıyor. */
.rozet-serit{
  display:flex;flex-direction:column;align-items:center;gap:12px;
  border-bottom:1px solid var(--panel-cizgi);
  padding-bottom:18px;margin-bottom:18px;
}
.rozet-baslik{
  display:flex;align-items:center;gap:7px;
  font-size:.86rem;font-weight:800;color:#fff;
}
/* 456×32 band; genişliği panele uyar, oranı width/height niteliklerinden gelir. */
.rozet-band{display:block;width:100%;height:auto}
.kilit-ikon{flex:0 0 auto}
.rozet-baslik .kilit-ikon{color:var(--sari)}
.guven .kilit-ikon{vertical-align:-2px;margin-inline-end:5px}

/* ===== Ödeme eylemi =====
   Buton form içinde flex öğesi olduğu için tam genişlik kaplıyordu; sarmalayıcı
   da aynı davranışı sürdürmeli. */
.odeme-eylem{display:flex;flex-direction:column}

.sonuc{text-align:center}
.sonuc .btn{margin-top:22px}
.ikon{
  width:62px;height:62px;border-radius:50%;display:grid;place-items:center;
  font-size:1.9rem;font-weight:800;margin:0 auto 18px;
}
.ikon.basarili{background:#E6F6EF;color:var(--yesil)}
.ikon.basarisiz{background:#FDECEC;color:var(--kirmizi)}

.dip{
  border-top:1px solid var(--cizgi);background:#fff;padding:26px 24px;
  font-size:.82rem;color:var(--gri);line-height:1.75;
}
.dip .kunye{max-width:640px;margin:0 auto}
.dip .kunye strong{color:var(--yumusak);font-weight:700}
.dip .kunye a{font-weight:600}
.dip .yasal{
  max-width:640px;margin:14px auto 0;display:flex;flex-wrap:wrap;gap:6px 18px;
}
.dip .yasal a{font-weight:600;color:var(--yumusak)}
.dip a:hover{color:var(--murekkep)}

/* Dar ekran: tek sütun, özet katlanır. Uzun bir özeti uzun bir formun üstüne
   yığmak "Ödemeyi tamamla" butonunu iyice dibe iter. */
@media (max-width:900px){
  .odeme-duzen{grid-template-columns:1fr;gap:16px}
  .ozet-panel{padding:14px;border-radius:16px}
  .rozet-serit{margin-bottom:14px}
  .ozet-tetik{
    display:flex;align-items:center;gap:10px;cursor:pointer;list-style:none;
    padding:6px 4px;font-size:.95rem;font-weight:800;color:#fff;
  }
  .ozet-tetik::-webkit-details-marker{display:none}
  .ozet-tetik>span:last-of-type{margin-inline-start:auto;font-variant-numeric:tabular-nums}
  .ozet-tetik::after{content:"▾";color:var(--panel-soluk);font-size:.8rem;font-weight:400}
  .ozet[open] .ozet-tetik::after{content:"▴"}
  .ozet[open] .ozet-tetik{border-bottom:1px solid var(--panel-cizgi);padding-bottom:14px}
  .ozet-govde{padding-top:16px}

  /* Ödeme butonu ekranın dibine yapışır. Form uzun; kullanıcı her scroll'da
     butonu aramak zorunda kalmasın. Ayrı kopya buton değil, formun kendi
     butonu — çift gönderim koruması tek yerde. */
  .odeme-eylem{
    position:sticky;bottom:0;z-index:5;background:#fff;
    padding:12px 0 14px;border-top:1px solid var(--cizgi);
  }
}

@media (max-width:560px){
  .sarma{padding:24px 14px 40px}
  .kart{padding:24px 18px;border-radius:16px}
  .ikili{grid-template-columns:1fr}
}

/* ===== Test modu şeridi ===== */
.test-serit{
  background:var(--sari);color:var(--murekkep);text-align:center;
  padding:9px 16px;font-size:.82rem;font-weight:800;letter-spacing:.02em;
}

/* ===== Fatura formu ===== */
.bolum-baslik{
  font-size:.95rem;font-weight:800;letter-spacing:-.01em;margin-top:6px;
  padding-bottom:10px;border-bottom:1px solid var(--cizgi);
}
fieldset.secim{border:0;padding:0;margin:0;display:flex;gap:10px;flex-wrap:wrap}
fieldset.secim legend{font-size:.87rem;font-weight:600;padding:0;margin-bottom:9px}
.radyo{
  display:inline-flex;align-items:center;gap:9px;cursor:pointer;
  border:1px solid var(--cizgi);border-radius:999px;padding:10px 18px;
  background:var(--zemin);font-size:.9rem;font-weight:600;
  transition:border-color .15s,background .15s;
}
.radyo:has(input:checked){border-color:var(--murekkep);background:#fff}
.radyo input{width:17px;height:17px;flex:0 0 17px;accent-color:var(--murekkep)}
.ipucu{font-size:.79rem;color:var(--gri)}
[aria-invalid="true"]{border-color:var(--kirmizi)}
[hidden]{display:none !important}

/* Tutarlar Latin rakamla yazılır; RTL akışta ₺ yanlış tarafa kaymasın. */
.ltr{direction:ltr;unicode-bidi:isolate;display:inline-block}

/* Otomatik yenilenmeme beyanı — mevzuat ve dürüstlük gereği görünür olmalı */
.yenilenmez{
  margin-top:16px;background:#FFFBEB;border:1px solid #FDE68A;border-radius:12px;
  padding:13px 16px;font-size:.86rem;color:var(--yumusak);line-height:1.6;
}
.yenilenmez strong{color:var(--murekkep);font-weight:800}

/* Ön Bilgilendirme Formu */
.onbilgi{border:1px solid var(--cizgi);border-radius:12px;background:var(--zemin);overflow:hidden}
.onbilgi summary{
  cursor:pointer;padding:13px 16px;font-size:.88rem;font-weight:700;list-style:none;
  display:flex;justify-content:space-between;align-items:center;gap:12px;
}
.onbilgi summary::-webkit-details-marker{display:none}
.onbilgi summary::after{content:"▾";color:var(--gri);font-size:.8rem}
.onbilgi[open] summary::after{content:"▴"}
.onbilgi dl{padding:0 16px 16px;display:flex;flex-direction:column;gap:10px}
.onbilgi dl>div{display:flex;flex-direction:column;gap:2px;font-size:.84rem;line-height:1.6}
.onbilgi dt{font-weight:700;color:var(--murekkep)}
.onbilgi dd{color:var(--yumusak)}

.cayma{font-size:.79rem;color:var(--gri);line-height:1.6;margin-top:-4px}

/* Sağlayıcı çerçevesi — resizer script'i yüklenmezse form ezilmesin */
.cerceve{margin-top:18px}
.cerceve iframe{width:100%;min-height:560px;border:0;display:block}

.btn[disabled]{opacity:.6;cursor:progress;transform:none}

/* Sonuç sayfası */
.ikon.beklemede{background:#FFF7E6;color:#B45309}
.sonuc-detay{text-align:left;margin-top:22px}
.sonuc .yenilenmez{text-align:left}

/* ===== RTL (Arapça) ===== */
[dir="rtl"] .ozet-bas,
[dir="rtl"] .ozet-satirlar>div{flex-direction:row-reverse}
[dir="rtl"] .sonuc-detay{text-align:right}
[dir="rtl"] .sonuc .yenilenmez{text-align:right}
[dir="rtl"] .btn .ok{transform:scaleX(-1)}
[dir="rtl"] .btn:hover .ok{transform:scaleX(-1) translateX(3px)}
[dir="rtl"] .onay,[dir="rtl"] .radyo{flex-direction:row-reverse}
[dir="rtl"] .dip .yasal{flex-direction:row-reverse}