/* Abonelik sayfaları — görünüm abkmarket.com'un yeni tasarımına uyar (28.10.2026): Manrope, lacivert yazı, mavi düğmeler,
   açık gri zemin üstünde beyaz kutular, koyu alt bilgi. Renkler sitenin store.css'indeki değişkenlerden. */
:root { --ink:#172c47; --blue:#164f9e; --bright:#2376d3; --green:#c3f264; --dot:#90bd40; --paper:#f5f7fb; --line:#dce4ef;
        --muted:#607188; --red:#b32828; --orange:#c97821; --ok:#258b69; --tint:#edf4ff; --footer:#122c4a;
        --shadow:0 10px 30px rgba(20,52,88,.07); }
* { box-sizing:border-box; }
[hidden] { display:none !important; }
html { -webkit-text-size-adjust:100%; }
body { font-family:Manrope,-apple-system,'Segoe UI',Roboto,sans-serif; margin:0; background:var(--paper); color:var(--ink); line-height:1.55;
       min-height:100vh; min-height:100dvh; display:flex; flex-direction:column; }   /* içerik kısa olsa da alt bilgi ekranın en altında */
.test-serit { background:var(--orange); color:#fff; text-align:center; font-weight:700; padding:6px; font-size:14px; }

/* Üst şerit: sitenin logosu (yazıyla), uygulama ikonu ve "Aboneliğimi yönet" */
header.ust { background:#fff; border-bottom:1px solid var(--line); padding:12px max(16px, calc((100% - 1032px) / 2)); display:flex; flex-wrap:wrap;
             gap:10px 16px; justify-content:space-between; align-items:center; min-height:76px; }
header.ust .sol { display:flex; align-items:center; gap:14px; min-width:0; }
.logo { display:flex; flex-direction:column; text-decoration:none; color:var(--ink); }
.logo-main { display:flex; align-items:baseline; gap:6px; white-space:nowrap; }
.logo-main b { font-size:28px; letter-spacing:-3px; font-weight:800; }
.logo-main span { font-size:18px; letter-spacing:-1px; font-weight:500; }
.logo-main i { width:6px; height:6px; background:var(--dot); display:inline-block; }
.logo small { font-size:9.5px; color:var(--muted); font-weight:600; }
header.ust a.bolum { display:flex; align-items:center; gap:8px; border-left:1px solid var(--line); padding-left:14px; color:var(--ink);
                     font-size:14px; font-weight:700; text-decoration:none; white-space:nowrap; }
header.ust a.bolum img { width:28px; height:28px; border-radius:7px; display:block; box-shadow:0 0 0 1px var(--line); }
header.ust a.sag { color:var(--blue); background:#eaf2fd; font-size:14px; font-weight:700; text-decoration:none; padding:9px 14px; border-radius:8px; white-space:nowrap; }
header.ust a.sag:hover { background:#dce9fb; }

main { flex:1 0 auto; width:100%; max-width:640px; margin:0 auto; padding:0 16px 16px; }
main h1 { font-size:clamp(26px, 4vw, 32px); font-weight:800; color:var(--ink); margin:30px 0 20px; letter-spacing:-0.03em; line-height:1.15; }
h2 { font-size:18px; font-weight:800; color:var(--ink); margin:26px 0 10px; letter-spacing:-0.01em; line-height:1.3; }

/* Abone olma adımları: biten koyu, şu anki mavi çizgiyle */
ol.adimlar { display:flex; gap:8px; list-style:none; padding:0; margin:0 0 22px; counter-reset:adim; font-size:13px; }
ol.adimlar li { flex:1; min-width:0; counter-increment:adim; color:var(--muted); border-top:3px solid var(--line); padding-top:6px; font-weight:600; }
ol.adimlar li::before { content:counter(adim) ". "; }
ol.adimlar li.bitti { color:var(--ink); border-top-color:var(--ink); }
ol.adimlar li.simdi { color:var(--blue); border-top-color:var(--bright); font-weight:800; }

.kutu { background:#fff; border:1px solid var(--line); border-radius:12px; padding:16px 18px; margin-bottom:12px; box-shadow:var(--shadow); }
.kutu > :first-child { margin-top:0; } .kutu > :last-child { margin-bottom:0; }
.kutu.hata { border-left:4px solid var(--red); color:var(--red); }
.kutu.basari { border-left:4px solid var(--ok); }
.kutu.not { border-left:4px solid var(--orange); }

label { display:block; margin:12px 0 4px; font-size:14px; font-weight:700; color:var(--ink); }
input, textarea { width:100%; padding:11px 12px; border:1px solid #cdd7e5; border-radius:8px; font-size:16px; margin-top:4px; font-family:inherit;
                  color:var(--ink); background:#fff; }
input:focus, textarea:focus { outline:none; border-color:var(--bright); box-shadow:0 0 0 3px rgba(35,118,211,.18); }
input[type=radio], input[type=checkbox] { width:auto; margin:0 8px 0 0; accent-color:var(--bright); }
fieldset { border:0; padding:0; margin:0; }
.alan-hata { color:var(--red); display:block; font-size:13px; margin-top:4px; font-weight:600; }
[aria-invalid="true"] { border-color:var(--red); }

.paketler { display:grid; gap:10px; }
label.paket { background:#fff; border:1px solid var(--line); border-radius:12px; padding:16px; margin:0; cursor:pointer; font-weight:500;
               transition:transform .1s ease-out, border-color .15s, box-shadow .15s; }
label.paket:active { transform:scale(.99); }
label.paket:hover { border-color:#b9c9df; }
label.paket:has(input:checked) { border-color:var(--bright); box-shadow:0 0 0 1px var(--bright), var(--shadow); background:#fbfdff; }
label.paket b { color:var(--ink); font-weight:800; }
label.paket .fiyat { float:right; font-weight:800; color:var(--blue); }
label.paket small { display:block; color:var(--muted); margin-top:4px; font-size:13px; font-weight:500; }
label.paket.kapali { opacity:.5; }
.tur { display:flex; gap:20px; }
.tur label, .onay-kutu { display:flex; align-items:flex-start; gap:4px; font-weight:500; }
.iki { display:grid; grid-template-columns:1fr 1fr; gap:10px; }

button, a.dugme { background:var(--bright); color:#fff; border:1px solid var(--bright); border-radius:8px; padding:12px 22px; font-size:15px;
                  font-weight:800; font-family:inherit; cursor:pointer; text-decoration:none; display:inline-block; min-height:46px;
                  transition:transform .1s ease-out, background-color .15s, border-color .15s; }
/* Dokunulduğu an hafifçe içe basılır */
button:active, a.dugme:active { transform:scale(.97); }
@media (prefers-reduced-motion: reduce) { button:active, a.dugme:active, label.paket:active { transform:none; } }
button:hover, a.dugme:hover { background:var(--blue); border-color:var(--blue); }
button.buyuk { width:100%; margin-top:18px; }
label + button { margin-top:14px; }
button.ikincil { background:#fff; color:var(--ink); border-color:var(--line); }
button.ikincil:hover { background:var(--tint); border-color:#b9c9df; }
button.tehlike { background:#fff; color:var(--red); border-color:var(--red); }
button.tehlike:hover { background:var(--red); color:#fff; }
.dugmeler { display:flex; flex-wrap:wrap; gap:10px; margin-top:12px; }
video { width:100%; border-radius:12px; margin-top:12px; }
.soluk { color:var(--muted); font-size:13px; }
a { color:var(--blue); }
/* Yasal metinler en az 12 punto (16 piksel), Abonelik Sözleşmeleri Yönetmeliği m.5/2 (avukat notu, 30.10.2026). */
.metin h1 { font-size:26px; } .metin h2 { font-size:19px; } .metin p { font-size:16px; line-height:1.65; }

/* Alt bilgi sitedeki gibi koyu, içerik sayfa genişliğinde */
footer.alt { margin-top:40px; padding:24px max(16px, calc((100% - 640px) / 2)) 30px; background:var(--footer); font-size:12px; color:#becde0; }
footer.alt p { margin:0 0 8px; } footer.alt p:last-child { margin-bottom:0; }
footer.alt b { color:#fff; }
footer.alt a { color:#fff; }
footer.alt a:hover { color:var(--green); }

@media (max-width:520px) {
  header.ust { min-height:64px; }
  .logo-main b { font-size:24px; } .logo-main span { font-size:16px; } .logo small { display:none; }
  header.ust a.bolum img { display:none; }
  header.ust { column-gap:8px; } header.ust .sol { gap:8px; } header.ust a.bolum { padding-left:8px; font-size:13px; }
  header.ust a.sag { padding:8px 10px; font-size:13px; }
}