/* Web işlem merkezi. Marka rengi /marka.css'ten gelir (--ana). */
:root {
  --zemin: #f2f5f8;
  --kagit: #ffffff;
  --murekkep: #17212b;
  --soluk: #586776;
  --cizgi: #d5dde5;
  --iyi: #1f7a4f;
  --dikkat: #9a5b00;
  --kotu: #b3261e;
  --yari: 10px;
  --yazi: system-ui, -apple-system, "Segoe UI", Roboto, "Noto Sans", "Helvetica Neue", Arial, sans-serif;
  --sabit: ui-monospace, "SF Mono", "Cascadia Mono", "Roboto Mono", Consolas, monospace;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: var(--zemin);
  color: var(--murekkep);
  font: 400 1rem/1.55 var(--yazi);
}
[hidden] { display: none !important; }

/* Üst şerit: marka rengi tek geniş yüzey */
.ust { background: var(--ana); color: #fff; }
.ust-ic {
  max-width: 40rem;
  margin: 0 auto;
  padding: 0.9rem 1rem;
  display: flex;
  align-items: baseline;
  gap: 0.6rem;
}
a.marka:has(.marka-logo):hover { text-decoration: none; opacity: 0.9; }
.marka { font-weight: 800; font-size: 1.15rem; letter-spacing: -0.01em; color: #fff; text-decoration: none; }
a.marka:hover { text-decoration: underline; text-underline-offset: 3px; }
.ust-bag { color: #fff; font-weight: 600; font-size: 0.95rem; text-decoration: underline; text-underline-offset: 3px; white-space: nowrap; }
.ust-tel + .ust-bag, .ust-baslik + .ust-bag { margin-left: auto; }
.ust-tel:not([hidden]) + .ust-bag { margin-left: 0.9rem; }
.ust-baslik { opacity: 0.85; font-size: 0.95rem; }
.ust .metin-dugme { margin-left: auto; color: #fff; }

.icerik {
  flex: 1;
  width: 100%;
  max-width: 40rem;
  margin: 0 auto;
  padding: 1.75rem 1rem 2.5rem;
}
.icerik:focus { outline: none; }

h1 { font-size: 1.6rem; line-height: 1.2; margin: 0 0 0.5rem; letter-spacing: -0.015em; }
.bolum-baslik { font-size: 1.05rem; margin: 2rem 0 0.75rem; }
.aciklama { color: var(--soluk); margin: 0 0 1.25rem; max-width: 34rem; }
.kucuk { font-size: 0.875rem; color: var(--soluk); }
.yukleniyor { color: var(--soluk); }

.panel {
  background: var(--kagit);
  border: 1px solid var(--cizgi);
  border-radius: var(--yari);
  padding: 1.5rem 1.25rem;
}

/* Formlar */
label { display: block; font-weight: 600; margin-bottom: 0.35rem; }
input {
  width: 100%;
  font: inherit;
  font-size: 1.15rem;
  padding: 0.7rem 0.8rem;
  border: 1.5px solid var(--cizgi);
  border-radius: 8px;
  background: #fff;
  color: var(--murekkep);
  font-variant-numeric: tabular-nums;
}
input:focus { border-color: var(--ana); outline: 3px solid color-mix(in srgb, var(--ana) 25%, transparent); outline-offset: 0; }
.kod-kutu { letter-spacing: 0.45em; font-size: 1.5rem; max-width: 12rem; text-align: center; padding-left: 0.45em; }

button { font: inherit; cursor: pointer; }
button:disabled { cursor: not-allowed; opacity: 0.55; }
button:focus-visible { outline: 3px solid color-mix(in srgb, var(--ana) 45%, transparent); outline-offset: 2px; }
.ana-dugme {
  margin-top: 1rem;
  width: 100%;
  padding: 0.8rem 1rem;
  border: 0;
  border-radius: 8px;
  background: var(--ana);
  color: #fff;
  font-weight: 700;
  font-size: 1.05rem;
}
.ana-dugme:hover:not(:disabled) { filter: brightness(1.08); }
.ikincil-dugme {
  padding: 0.6rem 0.9rem;
  border: 1.5px solid var(--ana);
  border-radius: 8px;
  background: transparent;
  color: var(--ana);
  font-weight: 600;
}
.metin-dugme {
  padding: 0.35rem 0;
  border: 0;
  background: none;
  color: var(--ana);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.satir-dugmeler { display: flex; flex-wrap: wrap; gap: 1.25rem; margin-top: 1rem; }

.hata {
  color: var(--kotu);
  background: color-mix(in srgb, var(--kotu) 7%, #fff);
  border-left: 3px solid var(--kotu);
  padding: 0.55rem 0.75rem;
  margin: 0.75rem 0 0;
  border-radius: 0 6px 6px 0;
}

/* Hesabım */
.selam { margin-bottom: 0.25rem; }
.hizmet {
  background: var(--kagit);
  border: 1px solid var(--cizgi);
  border-radius: var(--yari);
  padding: 1.25rem;
  margin-bottom: 1rem;
}
.hizmet-ust { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; }
.tarife { margin: 0; font-weight: 700; font-size: 1.1rem; }
.hiz { margin: 0.1rem 0 0; color: var(--soluk); font-variant-numeric: tabular-nums; }
.durum {
  flex-shrink: 0;
  font-size: 0.85rem;
  font-weight: 700;
  padding: 0.2rem 0.6rem;
  border-radius: 999px;
  background: color-mix(in srgb, var(--soluk) 12%, #fff);
  color: var(--soluk);
}
.durum[data-durum="aktif"] { background: color-mix(in srgb, var(--iyi) 12%, #fff); color: var(--iyi); }
.durum[data-durum="kisitli"], .durum[data-durum="askida"] { background: color-mix(in srgb, var(--kotu) 10%, #fff); color: var(--kotu); }
.durum[data-durum="beklemede"], .durum[data-durum="donduruldu"] { background: color-mix(in srgb, var(--dikkat) 12%, #fff); color: var(--dikkat); }

.bilgiler { margin: 1rem 0 0; display: grid; grid-template-columns: 1fr 1fr; gap: 0.6rem 1rem; }
.bilgiler div { min-width: 0; }
.bilgiler .adres-satir { grid-column: 1 / -1; }
.bilgiler dt { font-size: 0.8rem; color: var(--soluk); }
.bilgiler dd { margin: 0; overflow-wrap: anywhere; }
.uyari { margin: 1rem 0 0; color: var(--kotu); font-weight: 600; }

.modem-alani { margin-top: 1.1rem; padding-top: 1rem; border-top: 1px solid var(--cizgi); }

/* Modem etiketi: modemin altındaki bilgi etiketine benzer */
.etiket {
  background: #fff;
  border: 2px solid var(--murekkep);
  border-radius: 6px;
  padding: 0.9rem 1rem 0.6rem;
  max-width: 26rem;
  box-shadow: 0 1px 0 var(--murekkep);
}
.etiket-baslik {
  margin: 0 0 0.6rem;
  font-size: 0.82rem;
  font-weight: 700;
  padding-bottom: 0.45rem;
  border-bottom: 1px dashed var(--murekkep);
}
.etiket-satir {
  display: grid;
  grid-template-columns: 6.5rem 1fr auto;
  align-items: center;
  gap: 0.5rem;
  padding: 0.4rem 0;
}
.etiket-satir + .etiket-satir { border-top: 1px dashed var(--cizgi); }
.etiket-ad { font-size: 0.85rem; color: var(--soluk); }
/* Sabit genişlikli yazı: 0 / O, l / 1 karışmasın */
.etiket-deger { font-family: var(--sabit); font-size: 1.05rem; font-weight: 600; overflow-wrap: anywhere; }
.kopyala {
  border: 1px solid var(--cizgi);
  background: var(--zemin);
  border-radius: 6px;
  padding: 0.25rem 0.55rem;
  font-size: 0.85rem;
  color: var(--murekkep);
}
.kopyala[data-tamam] { border-color: var(--iyi); color: var(--iyi); }
.etiket .gizle { margin-top: 0.4rem; }

/* Borç uyarısı */
.borc {
  margin: 0 0 1.25rem;
  padding: 0.85rem 1rem;
  border-radius: var(--yari);
  background: color-mix(in srgb, var(--dikkat) 9%, #fff);
  border: 1px solid color-mix(in srgb, var(--dikkat) 35%, #fff);
}
.borc[data-gecikmis="1"] { background: color-mix(in srgb, var(--kotu) 7%, #fff); border-color: color-mix(in srgb, var(--kotu) 35%, #fff); }
.borc-tutar { margin: 0; font-weight: 700; font-size: 1.1rem; font-variant-numeric: tabular-nums; }
.borc .kucuk { margin: 0.2rem 0 0; color: var(--murekkep); }
.borc-ic { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.borc-ic > div { flex: 1 1 18rem; }
.ana-dugme.borc-ode { width: auto; margin: 0; padding-inline: 1.5rem; flex-shrink: 0; }

/* Online ödeme (sürüm 44) */
.odeme-panel { margin: 0 0 1.25rem; max-width: 30rem; }
.odeme-ust { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; }
.odeme-ust .form-baslik { margin: 0; }
.odeme-3d { display: inline-flex; align-items: center; gap: 0.3rem; font-size: 0.8rem; font-weight: 600; color: var(--iyi); background: color-mix(in srgb, var(--iyi) 10%, #fff); padding: 0.25rem 0.6rem; border-radius: 999px; }
.odeme-3d svg { width: 0.95rem; height: 0.95rem; }
.odeme-tutar-kutu { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; margin: 1rem 0 0.5rem; padding: 0.85rem 1rem; border-radius: var(--yari); background: var(--zemin); }
.odeme-tutar { font-size: 1.45rem; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--murekkep); }
#odeme-abone-alan label, #form-odeme label { margin-top: 0.9rem; }
.kart-no-alan { position: relative; }
.kart-no-alan input { padding-right: 5.25rem; font-variant-numeric: tabular-nums; letter-spacing: 0.02em; }
.kart-tur { position: absolute; right: 0.75rem; top: 50%; transform: translateY(-50%); font-size: 0.8rem; font-weight: 700; color: var(--soluk); pointer-events: none; }
.kart-satir { display: grid; grid-template-columns: 1.4fr 1fr; gap: 0.75rem; }
.kart-skt { display: grid; grid-template-columns: 1fr 1.2fr; gap: 0.5rem; }
.odeme-not { margin: 1rem 0 0; }
#form-odeme .ana-dugme { margin-top: 1rem; }
#form-odeme .metin-dugme { display: block; margin: 0.75rem auto 0; }
.fatura-ode { padding: 0; font-size: 0.85rem; }

/* Ödeme sonuç sayfası (banka dönüşü) */
.odeme-sonuc { text-align: center; max-width: 30rem; margin-inline: auto; }
.odeme-sonuc-simge { display: inline-grid; place-items: center; width: 4rem; height: 4rem; border-radius: 50%; margin: 0.25rem auto 0.75rem; }
.odeme-sonuc-simge svg { width: 2rem; height: 2rem; }
.odeme-sonuc[data-durum="basarili"] .odeme-sonuc-simge { background: color-mix(in srgb, var(--iyi) 14%, #fff); color: var(--iyi); }
.odeme-sonuc[data-durum="basarisiz"] .odeme-sonuc-simge { background: color-mix(in srgb, var(--kotu) 12%, #fff); color: var(--kotu); }
.odeme-sonuc[data-durum="belirsiz"] .odeme-sonuc-simge { background: color-mix(in srgb, var(--dikkat) 14%, #fff); color: var(--dikkat); }
.odeme-sonuc .aciklama { margin-inline: auto; }
.odeme-ayrinti { margin: 0 0 1.25rem; padding: 0.75rem 1rem; border-radius: var(--yari); background: var(--zemin); text-align: left; }
.odeme-ayrinti div { display: flex; justify-content: space-between; gap: 1rem; padding: 0.2rem 0; }
.odeme-ayrinti dt { color: var(--soluk); }
.odeme-ayrinti dd { margin: 0; font-weight: 600; font-variant-numeric: tabular-nums; }
.odeme-sonuc .ana-dugme { display: block; text-decoration: none; text-align: center; }

/* Sekmeler: altı çizili metin gezinmesi */
.sekmeler {
  display: flex;
  gap: 1.25rem;
  margin: 0.5rem 0 1.25rem;
  border-bottom: 1px solid var(--cizgi);
  overflow-x: auto;
}
.sekmeler button {
  flex-shrink: 0;
  padding: 0.6rem 0;
  border: 0;
  border-bottom: 3px solid transparent;
  margin-bottom: -1px;
  background: none;
  color: var(--soluk);
  font-weight: 600;
}
.sekmeler button[aria-current="page"] { color: var(--murekkep); border-bottom-color: var(--ana); }

/* Listeler */
.liste { list-style: none; margin: 0; padding: 0; }
.liste > li + li { margin-top: 0.6rem; }
.fatura, .talep-satir {
  width: 100%;
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  background: var(--kagit);
  border: 1px solid var(--cizgi);
  border-radius: var(--yari);
  padding: 0.85rem 1rem;
  text-align: left;
  color: var(--murekkep);
}
.fatura-baslik { margin: 0; font-weight: 600; }
.fatura-ek { margin: 0.15rem 0 0; }
.fatura-sag { text-align: right; display: flex; flex-direction: column; align-items: flex-end; gap: 0.3rem; }
.fatura-tutar { margin: 0; font-weight: 700; font-variant-numeric: tabular-nums; }
.talep-satir { flex-wrap: wrap; align-items: center; }
.talep-satir:hover { border-color: var(--ana); }
.talep-konu { font-weight: 600; flex: 1 1 60%; }
.talep-ek { flex: 1 1 100%; order: 3; }
.durum[data-durum="odendi"], .durum[data-durum="cozuldu"], .durum[data-durum="kapali"] { background: color-mix(in srgb, var(--iyi) 12%, #fff); color: var(--iyi); }
.durum[data-durum="acik"], .durum[data-durum="kismi"], .durum[data-durum="islemde"], .durum[data-durum="tt_bekleniyor"] { background: color-mix(in srgb, var(--dikkat) 12%, #fff); color: var(--dikkat); }
.durum[data-durum="gecikmis"], .durum[data-durum="musteri_bekleniyor"] { background: color-mix(in srgb, var(--kotu) 10%, #fff); color: var(--kotu); }
.ikincil-dugme#fatura-daha { margin-top: 1rem; }

/* Talep formu ve ayrıntı */
.ana-dugme-dar { width: auto; margin: 0 0 1rem; padding-inline: 1.25rem; }
.form-baslik { font-size: 1.2rem; margin: 0 0 1rem; }
.alt-baslik { font-size: 1rem; margin: 1.25rem 0 0.4rem; }
#talep-form label { margin-top: 0.9rem; }
select, textarea {
  width: 100%;
  font: inherit;
  padding: 0.65rem 0.8rem;
  border: 1.5px solid var(--cizgi);
  border-radius: 8px;
  background: #fff;
  color: var(--murekkep);
}
textarea { resize: vertical; min-height: 6rem; }
select:focus, textarea:focus { border-color: var(--ana); outline: 3px solid color-mix(in srgb, var(--ana) 25%, transparent); outline-offset: 0; }
#talep-form .metin-dugme { display: block; margin-top: 0.75rem; }
.basari {
  color: var(--iyi);
  background: color-mix(in srgb, var(--iyi) 8%, #fff);
  border-left: 3px solid var(--iyi);
  padding: 0.55rem 0.75rem;
  margin: 0 0 1rem;
  border-radius: 0 6px 6px 0;
  font-weight: 600;
}
.ta-metin { white-space: pre-wrap; overflow-wrap: anywhere; }
.hareketler { list-style: none; margin: 0; padding: 0; }
.hareketler li { padding: 0.6rem 0.8rem; border-radius: 8px; background: var(--zemin); margin-top: 0.5rem; }
.hareketler li[data-yazan="destek"] { background: color-mix(in srgb, var(--ana) 7%, #fff); }
.hareketler p { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; }
.hareketler .kucuk { margin-bottom: 0.2rem; }

.alt { padding: 1rem; text-align: center; }
.basvuru-bag { margin: 1.25rem 0 0; text-align: center; }
.basvuru-bag a { color: var(--ana); font-weight: 600; }

@media (max-width: 30rem) {
  h1 { font-size: 1.4rem; }
  .bilgiler { grid-template-columns: 1fr; }
  .etiket-satir { grid-template-columns: 1fr auto; }
  .etiket-ad { grid-column: 1 / -1; }
  .fatura { flex-direction: column; }
  .fatura-sag { flex-direction: row; justify-content: space-between; align-items: center; text-align: left; }
}

@media (prefers-reduced-motion: no-preference) {
  .etiket:not([hidden]) { animation: ac 160ms ease-out; }
  @keyframes ac { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
}

/* Başvurularım (sürüm 14): başvuru adımları (başvuru sayfasındaki takip görünümüyle aynı) */
.takip-adimlar { list-style: none; margin: 1.25rem 0 0; padding: 0; }
.takip-adimlar li { display: grid; grid-template-columns: 2rem 1fr; gap: 0.75rem; padding-bottom: 1rem; position: relative; }
.takip-adimlar li:not(:last-child)::after { content: ""; position: absolute; left: calc(1rem - 1px); top: 2rem; bottom: 0.15rem; width: 2px; background: var(--cizgi); }
.takip-adimlar .isaret { width: 2rem; height: 2rem; border-radius: 50%; border: 2px solid var(--cizgi); background: #fff; display: flex; align-items: center; justify-content: center; font-weight: 700; color: var(--soluk); box-sizing: border-box; }
.takip-adimlar div { display: flex; flex-direction: column; padding-top: 0.2rem; }
.takip-adimlar div span { color: var(--soluk); font-size: 0.9rem; }
.takip-tamam .isaret { background: var(--iyi); border-color: var(--iyi); color: #fff; }
.takip-devam .isaret { background: #fff; border-color: var(--ana); color: var(--ana); }
.takip-sorun .isaret { background: var(--kotu); border-color: var(--kotu); color: #fff; }
.takip-adimlar li.simdi b { color: var(--ana); }
.eylem { padding: 0.75rem 1rem; border-radius: 8px; background: color-mix(in srgb, var(--dikkat) 12%, #fff); color: var(--metin, inherit); }
.belge-yukle { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.5rem; padding: 0.75rem 0; border-bottom: 1px solid var(--cizgi); }
.belge-yukle .kucuk { display: block; }
.belge-yukle input[type=file] { max-width: 100%; }
.durum[data-durum="devam"] { background: color-mix(in srgb, var(--dikkat) 12%, #fff); color: var(--dikkat); }
.durum[data-durum="tamamlandi"] { background: color-mix(in srgb, var(--iyi) 12%, #fff); color: var(--iyi); }
.durum[data-durum="iptal"] { background: color-mix(in srgb, var(--kotu) 10%, #fff); color: var(--kotu); }
.gizli-dosya { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; padding: 0; }
.gizli-dosya:focus-visible + .dosya-sec, .dosya-sec:focus-within { outline: 2px solid var(--ana); outline-offset: 2px; }
.dosya-sec { display: inline-flex; align-items: center; justify-content: center; width: auto; margin: 0; cursor: pointer; }
.edevlet-yardim { padding: 0.75rem 1rem; border-radius: 8px; background: color-mix(in srgb, var(--ana) 6%, #fff); border-left: 4px solid var(--ana); margin: 0.75rem 0; }
.edevlet-yardim ol { margin: 0.5rem 0 0; padding-left: 1.3rem; }
.edevlet-yardim li { margin: 0.2rem 0; }

/* Beyaz üst şerit + renkli kurumsal logo (sürüm 17) */
.marka-logo { display: block; height: 2.75rem; width: auto; }
.ust-acik { background: #fff; color: var(--murekkep, #141B2D); border-bottom: 3px solid var(--ana); box-shadow: 0 1px 6px rgb(20 45 92 / 8%); }
.ust-acik .ust-ic { align-items: center; padding-top: 0.7rem; padding-bottom: 0.7rem; }
.ust-acik .marka { color: var(--ana); line-height: 0; }
.ust-acik .ust-baslik { color: var(--soluk, #5B6475); opacity: 1; font-weight: 600; padding-left: 0.75rem; border-left: 1px solid var(--cizgi); }
.ust-acik .ust-bag, .ust-acik .ust-tel, .ust-acik .metin-dugme { color: var(--ana); }
.ust-acik .ust-kim { color: var(--soluk, #5B6475); opacity: 1; }
@media (max-width: 34rem) {
  .marka-logo { height: 2.35rem; }
}

/* Hat değerleri (sürüm 28) */
.hat-alani { margin-top: 1rem; padding-top: 1rem; border-top: 1px solid var(--cizgi); }
.hat-sonuc { margin-top: 0.85rem; padding: 0.9rem 1rem; border-radius: 14px; background: var(--vurgu, color-mix(in srgb, var(--ana) 5%, #fff)); }
.hat-ozet { display: flex; align-items: center; gap: 1rem; }
.hat-ozet-metin { display: grid; gap: 0.35rem; justify-items: start; }
.hat-baslik { margin: 0; font-weight: 700; font-family: var(--baslik, inherit); color: var(--ana); }
.hat-gosterge { width: 96px; height: 96px; flex: none; }
.hat-gosterge circle { fill: none; stroke-width: 11; }
.hat-gosterge .iz { stroke: color-mix(in srgb, var(--ana) 12%, #fff); }
.hat-gosterge .dolgu { stroke-linecap: round; }
.hat-gosterge.iyi .dolgu { stroke: var(--iyi); }
.hat-gosterge.orta .dolgu { stroke: #d39400; }
.hat-gosterge.kotu .dolgu { stroke: var(--kotu); }
.hat-gosterge .puan { font: 700 30px var(--baslik, var(--yazi)); fill: var(--ana); }
.hat-gosterge .puan-alt { font: 500 12px var(--yazi); fill: var(--soluk); }
.hat-kart { margin-top: 0.75rem; padding: 0.8rem 0.9rem; border-radius: 12px; background: #fff; border: 1px solid color-mix(in srgb, var(--ana) 10%, #fff); }
.hat-kart-baslik { margin: 0 0 0.4rem; font-size: 0.95rem; font-weight: 700; font-family: var(--baslik, inherit); color: var(--ana); }
.hat-bilgiler { margin-top: 0.25rem; }
.hat-bilgiler dd .durum { vertical-align: middle; font-size: 0.78rem; }
.hat-cubuk { margin: 0.5rem 0 0.6rem; }
.hat-cubuk-ust { display: flex; justify-content: space-between; gap: 0.5rem; font-size: 0.9rem; margin-bottom: 0.3rem; }
.hat-cubuk-ust strong { font-variant-numeric: tabular-nums; color: var(--ana); }
.hat-cubuk-iz { height: 10px; border-radius: 99px; background: color-mix(in srgb, var(--ana) 9%, #fff); overflow: hidden; }
.hat-cubuk-dolgu { height: 100%; border-radius: 99px; }
.hat-cubuk-dolgu.senkron { background: var(--mavi, var(--ana)); }
.hat-cubuk-dolgu.kapasite { background: var(--acik, var(--ana)); opacity: 0.55; }
.hat-dip { margin: 0.35rem 0 0; font-size: 0.9rem; color: var(--soluk); }
.hat-aciklama { display: block; margin-top: 0.15rem; font-size: 0.82rem; font-weight: 400; color: var(--soluk); }
.hat-fiber { margin-top: 0.6rem; }
.hat-teknik { margin-top: 0.75rem; }
.hat-teknik summary { cursor: pointer; font-weight: 600; color: var(--ana); padding: 0.3rem 0; }
@media (max-width: 420px) { .hat-gosterge { width: 80px; height: 80px; } }
.hat-bilgiler dd { font-variant-numeric: tabular-nums; }
.not-kutu { margin: 0.6rem 0 0; padding: 0.55rem 0.75rem; border-radius: 0 10px 10px 0; border-left: 3px solid var(--soluk); background: #fff; }
.not-kutu.bilgi { border-left-color: var(--mavi, var(--ana)); color: var(--ana); }
.not-kutu.iyi { border-left-color: var(--iyi); color: var(--iyi); }
.not-kutu.dikkat { border-left-color: var(--dikkat); color: var(--dikkat); }
.not-kutu.hata { border-left-color: var(--kotu); color: var(--kotu); }
.hat-zaman { margin: 0.6rem 0 0; }
.hat-sonuc .ana-dugme { margin-top: 0.75rem; }

/* Genel arıza (sürüm 28) */
.genel-ariza { margin: 0 0 1rem; padding: 0.85rem 1rem; border-radius: 14px; background: var(--kagit); border: 1px solid var(--cizgi); }
.genel-ariza.var { border-color: color-mix(in srgb, var(--kotu) 40%, #fff); background: color-mix(in srgb, var(--kotu) 5%, #fff); }
.ariza-bant { margin: 0 0 0.6rem; font-weight: 700; color: var(--kotu); }
.ariza-hatlar { list-style: none; margin: 0; padding: 0; }
.ariza-hatlar li + li { margin-top: 0.6rem; padding-top: 0.6rem; border-top: 1px solid var(--cizgi); }
.ariza-ust { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; }
.ariza-hat { font-weight: 600; }
.ariza-mesaj { margin: 0.3rem 0 0; }
.genel-ariza .kucuk { margin: 0.2rem 0 0; }

/* Kayıtlı kartlar (sürüm 45) */
.odeme-ek { color: var(--dikkat); background: color-mix(in srgb, var(--dikkat) 9%, #fff); border-radius: var(--yari); padding: 0.6rem 0.8rem; margin: 0 0 1rem; }
.kayitli-kart { background: var(--kagit); border: 1px solid var(--cizgi); border-radius: var(--yari); padding: 0.85rem 1rem; }
.kayitli-kart[data-otomatik="1"] { border-color: color-mix(in srgb, var(--iyi) 45%, #fff); }
.kk-ust { display: flex; align-items: center; gap: 0.8rem; }
.kk-simge { display: grid; place-items: center; width: 2.6rem; height: 2.6rem; border-radius: 10px; background: color-mix(in srgb, var(--ana) 9%, #fff); color: var(--ana); flex-shrink: 0; }
.kk-simge svg { width: 1.4rem; height: 1.4rem; }
.kk-bilgi { flex: 1; min-width: 0; }
.kk-maske { margin: 0; font-weight: 700; font-variant-numeric: tabular-nums; letter-spacing: 0.03em; }
.kk-ek { margin: 0.1rem 0 0; }
.kk-sira { display: flex; gap: 0.3rem; }
.kk-sira button { width: 2rem; height: 2rem; border: 1px solid var(--cizgi); border-radius: 8px; background: #fff; color: var(--murekkep); font-weight: 700; }
.kk-sira button:disabled { opacity: 0.35; }
.kk-onay { margin: 0.6rem 0 0; font-size: 0.875rem; font-weight: 600; color: var(--dikkat); }
.kk-alt { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; flex-wrap: wrap; margin-top: 0.75rem; padding-top: 0.65rem; border-top: 1px solid var(--cizgi); }
.kk-sil-alan .metin-dugme { font-size: 0.875rem; }
.kk-sil { color: var(--kotu); }
.kk-sil-onay { font-size: 0.875rem; font-weight: 600; }
.kk-sil-evet { color: var(--kotu); }
.kk-hata { margin: 0.5rem 0 0; }
.anahtar { display: inline-flex; align-items: center; gap: 0.55rem; margin: 0; font-weight: 600; cursor: pointer; }
.anahtar input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.anahtar-iz { position: relative; width: 2.6rem; height: 1.5rem; border-radius: 999px; background: var(--cizgi); transition: background 0.15s; flex-shrink: 0; }
.anahtar-iz::after { content: ""; position: absolute; top: 0.18rem; left: 0.18rem; width: 1.14rem; height: 1.14rem; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgb(0 0 0 / 0.25); transition: transform 0.15s; }
.anahtar input:checked + .anahtar-iz { background: var(--iyi); }
.anahtar input:checked + .anahtar-iz::after { transform: translateX(1.1rem); }
.anahtar input:focus-visible + .anahtar-iz { outline: 3px solid color-mix(in srgb, var(--ana) 35%, transparent); outline-offset: 2px; }
.anahtar input:disabled + .anahtar-iz { opacity: 0.5; }
#kart-form { max-width: none; }
#kart-form label { margin-top: 0.9rem; }
#kart-form .ana-dugme { margin-top: 1rem; }
#kart-form .metin-dugme { display: block; margin: 0.75rem auto 0; }
#kart-ana .kucuk { margin-top: 0.25rem; }

/* Kartın ödediği hizmetler (sürüm 49, CRM notu #38) */
.kk-kapsam { margin: 0.6rem 0 0; font-size: 0.9rem; display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.35rem 0.5rem; }
.kk-kapsam .metin-dugme { font-size: 0.85rem; }
.kk-kapsam-form { margin: 0.75rem 0 0; padding: 0.75rem 0.9rem; border: 1px solid var(--cizgi); border-radius: var(--yari); background: var(--zemin); }
.kk-kapsam-form legend { font-weight: 700; font-size: 0.9rem; padding: 0 0.3rem; }
.kk-secim { display: flex; align-items: flex-start; gap: 0.55rem; margin: 0.35rem 0; font-weight: 500; cursor: pointer; }
.kk-secim input { width: 1.1rem; height: 1.1rem; margin-top: 0.2rem; flex-shrink: 0; accent-color: var(--ana); }
.kk-hizmetler { margin: 0.25rem 0 0 1.6rem; }
.kk-hizmetler[aria-disabled="true"] { opacity: 0.45; }
.kk-kapsam-dugmeler { display: flex; align-items: center; gap: 1rem; margin-top: 0.6rem; }
.kk-kapsam-dugmeler .ana-dugme { margin: 0; }
#fatura-acik-baslik { margin-top: 0; }
.fatura-sag .durum { white-space: nowrap; }

/* Sürüm 51 (CRM notu #39): fatura seçimi, PDF, kayıtlı kartla hızlı ödeme */
.gorunmez { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.fatura { position: relative; }
.fatura-sec { display: flex; align-items: center; margin: 0 0.15rem 0 0; cursor: pointer; }
.fatura-sec input { width: 1.25rem; height: 1.25rem; accent-color: var(--ana); }
.fatura[data-secili="1"] { border-color: var(--ana); box-shadow: 0 0 0 1px var(--ana) inset; }
.fatura-belge { margin: 0.3rem 0 0; }
.fatura-belge .metin-dugme { font-size: 0.85rem; padding: 0; }
.fatura-acik-ust { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin-bottom: 0.6rem; }
.fatura-acik-ust .alt-baslik { margin: 0; }
.fatura-acik-ust .ana-dugme { margin: 0; width: auto; }
.hizli-alan { margin: 1rem 0 0.25rem; }
.hizli-baslik { margin: 0 0 0.5rem; font-weight: 600; }
.hizli-kartlar { display: grid; gap: 0.5rem; }
.hizli-kart { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; width: 100%; padding: 0.8rem 1rem; border: 1.5px solid var(--ana); border-radius: var(--yari); background: color-mix(in srgb, var(--ana) 5%, #fff); color: var(--ana); font: inherit; font-weight: 700; cursor: pointer; text-align: left; }
.hizli-kart:hover:not(:disabled) { background: color-mix(in srgb, var(--ana) 10%, #fff); }
.hizli-kart:disabled { opacity: 0.5; cursor: not-allowed; }
.hizli-kart .kucuk { font-weight: 500; color: var(--soluk); }
.hizli-onay { margin-top: 0.6rem; padding: 0.85rem 1rem; border-radius: var(--yari); background: color-mix(in srgb, var(--dikkat) 10%, #fff); border: 1px solid color-mix(in srgb, var(--dikkat) 40%, #fff); }
.hizli-onay p { margin: 0 0 0.6rem; font-weight: 700; }
.hizli-onay-dugmeler { display: flex; align-items: center; gap: 1rem; }
.hizli-onay-dugmeler .ana-dugme { margin: 0; width: auto; }
.ayrac { display: flex; align-items: center; gap: 0.75rem; margin: 1.1rem 0 0; color: var(--soluk); font-size: 0.85rem; }
.ayrac::before, .ayrac::after { content: ""; flex: 1; height: 1px; background: var(--cizgi); }

/* Özet kutuları, kullanım, güvenli internet, kampanyalar, bilgilerim (sürüm 51) */
.ozet { display: grid; grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); gap: 0.75rem; margin: 0 0 1.25rem; }
.ozet-kutu { display: flex; flex-direction: column; align-items: flex-start; gap: 0.15rem; padding: 0.85rem 1rem; border: 1px solid var(--cizgi); border-radius: var(--yari); background: var(--kagit); font: inherit; text-align: left; cursor: pointer; color: var(--murekkep); }
.ozet-kutu:hover { border-color: var(--ana); }
.ozet-deger { font-size: 1.15rem; }
.satir-ust { display: flex; align-items: center; gap: 0.6rem; margin-bottom: 0.9rem; }
.satir-ust label { margin: 0; }
.satir-ust select { width: auto; min-width: 14rem; }
.kullanim-panel { padding-top: 1rem; }
.kullanim-ozet { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.75rem; }
.kullanim-kutu { display: flex; flex-direction: column; gap: 0.15rem; padding: 0.85rem 1rem; border-radius: var(--yari); background: var(--zemin); }
.kullanim-kutu b { font-size: 1.35rem; font-variant-numeric: tabular-nums; }
.kullanim-kutu.indirme b { color: var(--ana); }
.kullanim-kutu.yukleme b { color: var(--iyi); }
.kullanim-grafik { display: flex; align-items: flex-end; gap: 0.75rem; height: 11rem; padding: 0.5rem 0 0; border-bottom: 1px solid var(--cizgi); }
.kullanim-sutun { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 0.35rem; height: 100%; }
.kullanim-cubuklar { flex: 1; width: 100%; display: flex; align-items: flex-end; justify-content: center; gap: 3px; }
.kullanim-cubuk { width: min(1.1rem, 40%); border-radius: 4px 4px 0 0; }
.kullanim-cubuk.indirme, .nokta.indirme { background: var(--ana); }
.kullanim-cubuk.yukleme, .nokta.yukleme { background: var(--iyi); }
.kullanim-lejant { margin: 0.5rem 0 0.75rem; }
.nokta { display: inline-block; width: 0.7rem; height: 0.7rem; border-radius: 3px; vertical-align: middle; }
.tablo-kap { overflow-x: auto; }
.tablo { width: 100%; border-collapse: collapse; font-size: 0.9rem; }
.tablo th, .tablo td { padding: 0.55rem 0.6rem; text-align: left; border-bottom: 1px solid var(--cizgi); }
.tablo th { font-size: 0.8rem; color: var(--soluk); font-weight: 600; }
.guvenli-satir { display: flex; flex-direction: column; gap: 0.35rem; }
.guvenli-satir select { max-width: 24rem; }
.guvenli-satir .hizli-onay { margin-top: 0.4rem; }
.kampanya { display: flex; flex-direction: column; gap: 0.25rem; }
.kampanya .aciklama { margin: 0; }
.referans { margin-top: 1.25rem; }
.referans-kod { display: flex; align-items: center; gap: 0.75rem; margin: 0.5rem 0 1rem; flex-wrap: wrap; }
.referans-kod code { font-size: 1.35rem; font-weight: 700; letter-spacing: 0.08em; padding: 0.4rem 0.9rem; border: 1.5px dashed var(--ana); border-radius: var(--yari); color: var(--ana); }
.referans-kod .ikincil-dugme { width: auto; margin: 0; }
.bilgi-listesi { margin: 0.5rem 0 0; }
.bilgi-listesi > div { display: grid; grid-template-columns: 11rem 1fr; gap: 0.75rem; padding: 0.55rem 0; border-bottom: 1px solid var(--cizgi); }
.bilgi-listesi dt { color: var(--soluk); }
.bilgi-listesi dd { margin: 0; font-weight: 600; overflow-wrap: anywhere; }
.bilgi-listesi dd .metin-dugme { font-weight: 600; font-size: 0.875rem; margin-left: 0.4rem; }
.bilgi-form { margin-top: 0.75rem; padding: 0.85rem 1rem; border-radius: var(--yari); background: var(--zemin); }
#sekme-bilgi .panel + .panel { margin-top: 1rem; }
.talimat { display: flex; flex-direction: column; gap: 0.2rem; }
@media (max-width: 40rem) {
  .bilgi-listesi > div { grid-template-columns: 1fr; gap: 0.1rem; }
  .satir-ust select { min-width: 0; flex: 1; }
  .tablo thead { display: none; }
  .tablo tr { display: block; padding: 0.5rem 0; border-bottom: 1px solid var(--cizgi); }
  .tablo td { display: flex; justify-content: space-between; gap: 1rem; border: 0; padding: 0.2rem 0; }
  .tablo td::before { content: attr(data-etiket); color: var(--soluk); font-size: 0.8rem; }
}

/* Sürüm 51 (CRM notu #40): hız testi, hazır talepler, arıza sihirbazı, bildirim tercihleri, ödemeler */
.hiz-test { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem 0.9rem; margin: 0.6rem 0 0.2rem; }
.hiz-test .ikincil-dugme { width: auto; margin: 0; text-decoration: none; display: inline-flex; }
.hiz-test .kucuk { margin: 0; flex: 1 1 14rem; }
.hizli-islemler { display: grid; grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr)); gap: 0.6rem; margin: 0 0 1rem; }
.hizli-islem { display: flex; flex-direction: column; align-items: flex-start; gap: 0.15rem; padding: 0.8rem 1rem; border: 1px solid var(--cizgi); border-radius: var(--yari); background: var(--kagit); color: var(--murekkep); font: inherit; text-align: left; cursor: pointer; }
.hizli-islem:hover { border-color: var(--ana); }
.hizli-islem.vurgu { border-color: var(--ana); background: color-mix(in srgb, var(--ana) 6%, #fff); }
.hizli-islem.vurgu b { color: var(--ana); }
.hazir-form label, .sihirbaz label { margin-top: 0.85rem; }
.hazir-form .ana-dugme { margin-top: 1rem; }
.hazir-form .metin-dugme, .sihirbaz > .metin-dugme { display: block; margin: 0.75rem auto 0; }
.bilgi-kutu { padding: 0.75rem 0.9rem; border-radius: var(--yari); background: color-mix(in srgb, var(--ana) 7%, #fff); border-left: 3px solid var(--ana); margin: 0.6rem 0 0.25rem; }
.bilgi-kutu.uyari-kutu { background: color-mix(in srgb, var(--dikkat) 10%, #fff); border-left-color: var(--dikkat); }
.bilgi-kutu p { margin: 0.35rem 0 0; }
.sihirbaz-adimlar { display: flex; gap: 0.35rem; list-style: none; padding: 0; margin: 0.4rem 0 1rem; counter-reset: adim; }
.sihirbaz-adimlar li { flex: 1; font-size: 0.8rem; color: var(--soluk); padding-top: 0.45rem; border-top: 3px solid var(--cizgi); counter-increment: adim; }
.sihirbaz-adimlar li::before { content: counter(adim) ". "; }
.sihirbaz-adimlar li.tamam { border-top-color: var(--iyi); color: var(--iyi); }
.sihirbaz-adimlar li.simdi { border-top-color: var(--ana); color: var(--ana); font-weight: 700; }
.secim-kutulari { display: grid; grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr)); gap: 0.6rem; }
.secim-kutulari .hizli-islem { align-items: center; font-weight: 700; padding: 1rem; }
.kontrol-listesi { list-style: none; padding: 0; margin: 0 0 1rem; display: grid; gap: 0.45rem; }
.kontrol-listesi li { padding: 0.55rem 0.75rem 0.55rem 2rem; border-radius: var(--yari); background: var(--zemin); position: relative; }
.kontrol-listesi li::before { position: absolute; left: 0.7rem; font-weight: 700; }
.kontrol-listesi li.tamam::before { content: "✓"; color: var(--iyi); }
.kontrol-listesi li.bilgi::before { content: "i"; color: var(--ana); }
.kontrol-listesi li.uyari::before { content: "!"; color: var(--dikkat); }
.deneme-adim h3 { margin: 0.2rem 0 0.4rem; font-size: 1.1rem; }
.deneme-adim p { margin: 0 0 0.75rem; }
.tercih-listesi { display: grid; gap: 0.75rem; margin: 0.75rem 0 0.5rem; }
.tercih { font-weight: 500; }
#odemeler { margin-top: 1.5rem; }
#odemeler .metin-dugme { font-size: 0.875rem; padding: 0; }
@media (max-width: 40rem) {
  .ozet { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.4rem; }
  .ozet-kutu { padding: 0.55rem 0.6rem; }
  .ozet-kutu .kucuk { font-size: 0.72rem; }
  .ozet-deger { font-size: 0.92rem; }
  .ozet-ek { display: none; }
  .hizli-islemler { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hizli-islemler .hizli-islem.vurgu { grid-column: 1 / -1; }
  .hizli-islemler .hizli-islem:not(.vurgu):last-child:nth-child(even) { grid-column: 1 / -1; }
}

/* Menü üstte (sürüm 51): selamlamanın hemen altında; kaydırınca ekranın üstüne yapışır */
#hesap > .sekmeler { position: sticky; top: 0.5rem; z-index: 20; margin-bottom: 1.1rem; }
#hesap .panel, #hesap section, #hesap form { scroll-margin-top: 5rem; }
.kazanclar { display: grid; grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr)); gap: 0.6rem; margin: 0 0 0.75rem; }
.kazanc-kutu { display: flex; flex-direction: column; gap: 0.15rem; padding: 0.7rem 0.9rem; border-radius: var(--yari); background: color-mix(in srgb, var(--iyi) 8%, #fff); }
.kazanc-kutu b { color: var(--iyi); }
.referans-kodlar { display: grid; gap: 0.5rem; margin: 0.5rem 0 1rem; }
.referans-kodlar .referans-kod { margin: 0; }
.referans-hat { min-width: 8.5rem; }
.kampanya-kalan { align-self: flex-start; margin-top: 0.35rem; }

/* Kayıtlı kart görseli (sürüm 56–59): bankanın renk tonu (--k1 → --k2) ve vurgu rengi (--k3); ışık, ince halka deseni, büyük yumuşak şekil, parlaklık.
   Logo kartın üstünde beyaz (gerçek kartlardaki gibi); renkli kalması gereken logolar (.renkli) beyaz zeminde. */
.kk-gorsel { --k1: #3a4a66; --k2: #121a2b; --k3: #7f93b8;
  position: relative; flex-shrink: 0; width: 17.5rem; aspect-ratio: 85.6 / 54; border-radius: 14px; padding: 0.95rem 1.1rem 0.85rem; color: #fff;
  display: grid; grid-template-rows: auto 1fr auto auto; overflow: hidden; isolation: isolate; font-family: var(--yazi);
  background:
    radial-gradient(circle at 0% 0%, rgb(255 255 255 / 0.20), transparent 42%),
    radial-gradient(circle at 104% 108%, transparent 0 30%, color-mix(in srgb, var(--k3) 55%, transparent) 30.4% 31.2%, transparent 31.6% 39%, color-mix(in srgb, var(--k3) 35%, transparent) 39.4% 40%, transparent 40.4% 48%, color-mix(in srgb, var(--k3) 20%, transparent) 48.4% 48.9%, transparent 49.3%),
    radial-gradient(ellipse 75% 95% at 100% 100%, color-mix(in srgb, var(--k3) 30%, transparent) 0 52%, transparent 52.6%),
    repeating-radial-gradient(circle at 115% -20%, rgb(255 255 255 / 0.05) 0 1px, transparent 1.5px 5px),
    linear-gradient(140deg, var(--k1) 0%, var(--k2) 100%);
  box-shadow: 0 1px 2px rgb(0 0 0 / 0.12), 0 10px 28px -6px rgb(10 25 50 / 0.45), inset 0 1px 0 rgb(255 255 255 / 0.18), inset 0 0 0 1px rgb(255 255 255 / 0.07);
  transition: transform 0.25s ease, box-shadow 0.25s ease; }
.kk-gorsel::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(112deg, transparent 30%, rgb(255 255 255 / 0.13) 44%, rgb(255 255 255 / 0.02) 52%, transparent 60%); pointer-events: none; }
@media (hover: hover) { .kayitli-kart:hover .kk-gorsel { transform: translateY(-2px) rotate(-0.4deg); box-shadow: 0 1px 2px rgb(0 0 0 / 0.12), 0 16px 34px -8px rgb(10 25 50 / 0.5), inset 0 1px 0 rgb(255 255 255 / 0.18), inset 0 0 0 1px rgb(255 255 255 / 0.07); } }
.kk-gorsel[data-banka="isbank"] { --k1: #1f5fc4; --k2: #04204f; --k3: #7fb4ff; }
.kk-gorsel[data-banka="ziraat"] { --k1: #e8192a; --k2: #6d050e; --k3: #ff9aa2; }
.kk-gorsel[data-banka="ziraatkatilim"] { --k1: #c71c31; --k2: #520812; --k3: #f3c16b; }
.kk-gorsel[data-banka="garanti"] { --k1: #0d9b5f; --k2: #00351f; --k3: #8fe6b5; }
.kk-gorsel[data-banka="yapikredi"] { --k1: #2058a8; --k2: #08163a; --k3: #9fc0ff; }
.kk-gorsel[data-banka="akbank"] { --k1: #ec1b2a; --k2: #6c000b; --k3: #ffb3b8; }
.kk-gorsel[data-banka="halkbank"] { --k1: #1e7bd0; --k2: #002a55; --k3: #8fd0ff; }
.kk-gorsel[data-banka="vakifbank"] { --k1: #303030; --k2: #080808; --k3: #f5be14; }
.kk-gorsel[data-banka="vakifkatilim"] { --k1: #22449a; --k2: #081534; --k3: #ef5aa0; }
.kk-gorsel[data-banka="qnb"] { --k1: #7330a0; --k2: #210935; --k3: #3cc4f0; }
.kk-gorsel[data-banka="enpara"] { --k1: #6331a0; --k2: #1b0a33; --k3: #c9a8ff; }
.kk-gorsel[data-banka="denizbank"] { --k1: #0d7ccf; --k2: #022a54; --k3: #ff5a64; }
.kk-gorsel[data-banka="teb"] { --k1: #0ba36a; --k2: #003c26; --k3: #a6f0cf; }
.kk-gorsel[data-banka="kuveytturk"] { --k1: #14955a; --k2: #00351c; --k3: #f2cf5b; }
.kk-gorsel[data-banka="sekerbank"] { --k1: #11954d; --k2: #00381b; --k3: #a5f0c4; }
.kk-gorsel[data-banka="albaraka"] { --k1: #d61935; --k2: #5e0613; --k3: #ffa040; }
.kk-gorsel[data-banka="aktifbank"] { --k1: #e3192a; --k2: #62050e; --k3: #ffb0b6; }
.kk-gorsel[data-banka="anadolubank"] { --k1: #2e3846; --k2: #0a0d12; --k3: #3c96e6; }
.kk-gorsel[data-banka="bankasya"] { --k1: #154fa8; --k2: #04183d; --k3: #ff5560; }
.kk-gorsel[data-banka="burgan"] { --k1: #1a89d2; --k2: #04345e; --k3: #ff9a3c; }
.kk-gorsel[data-banka="fibabanka"] { --k1: #1aa3dc; --k2: #053f63; --k3: #9be05a; }
.kk-gorsel[data-banka="hsbc"] { --k1: #444; --k2: #0d0d0d; --k3: #ff2a3a; }
.kk-gorsel[data-banka="icbc"] { --k1: #cf1732; --k2: #50040f; --k3: #ffb3be; }
.kk-gorsel[data-banka="ing"] { --k1: #ff7418; --k2: #9a3500; --k3: #2a4aa8; }
.kk-gorsel[data-banka="odeabank"] { --k1: #3f3f3f; --k2: #0b0b0b; --k3: #c8c8c8; }
.kk-gorsel[data-banka="tbank"] { --k1: #cc1d23; --k2: #500609; --k3: #ffb0b3; }
.kk-gorsel[data-banka="turkishbank"] { --k1: #24376e; --k2: #080f2a; --k3: #f07a34; }
.kk-gorsel[data-banka="turkiyefinans"] { --k1: #1b8896; --k2: #063238; --k3: #ff5a78; }
.kk-gorsel[data-banka="abank"] { --k1: #2057a8; --k2: #08193d; --k3: #ff8a3c; }
.kk-g-ust { display: flex; justify-content: space-between; align-items: center; gap: 0.5rem; min-height: 1.7rem; }
.kk-g-banka { font-weight: 800; font-size: 0.95rem; letter-spacing: 0.02em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-shadow: 0 1px 2px rgb(0 0 0 / 0.3); }
.kk-g-logo { height: 1.6rem; max-width: 10rem; object-fit: contain; object-position: left center; filter: drop-shadow(0 1px 1px rgb(0 0 0 / 0.3)); }
.kk-g-logo.renkli { height: 1.75rem; background: #fff; border-radius: 6px; padding: 0.2rem 0.45rem; filter: none; box-shadow: 0 1px 3px rgb(0 0 0 / 0.25); }
.kk-g-logo[hidden] { display: none; }
/* Yazısı küçük kalan logolar biraz büyük */
.kk-g-logo:is([data-kod="isbank"], [data-kod="kuveytturk"], [data-kod="turkiyefinans"], [data-kod="burgan"], [data-kod="ziraatkatilim"], [data-kod="icbc"]) { height: 2.15rem; margin-block: -0.25rem; }
.kk-g-logo:is([data-kod="akbank"], [data-kod="turkishbank"], [data-kod="bankasya"]) { height: 1.3rem; }
.kk-g-orta { display: flex; align-items: center; gap: 0.55rem; align-self: center; }
.kk-g-cip { width: 2.35rem; height: 1.75rem; border-radius: 5px; position: relative; box-shadow: inset 0 0 0 1px rgb(110 78 18 / 0.45), 0 1px 1px rgb(0 0 0 / 0.25);
  background: linear-gradient(90deg, transparent 31%, rgb(110 78 18 / 0.4) 31% 33%, transparent 33% 67%, rgb(110 78 18 / 0.4) 67% 69%, transparent 69%),
    linear-gradient(0deg, transparent 31%, rgb(110 78 18 / 0.4) 31% 33%, transparent 33% 67%, rgb(110 78 18 / 0.4) 67% 69%, transparent 69%),
    linear-gradient(135deg, #fbe7ac 0%, #e2bd63 45%, #c49434 100%); }
.kk-g-cip::before { content: ""; position: absolute; inset: 33% 33%; border-radius: 2px; background: linear-gradient(135deg, #fbe7ac, #d9b157); box-shadow: inset 0 0 0 1px rgb(110 78 18 / 0.45); }
.kk-g-temassiz { width: 1.35rem; height: 1.35rem; opacity: 0.9; filter: drop-shadow(0 1px 1px rgb(0 0 0 / 0.3)); }
.kk-g-no { font-family: var(--sabit); font-size: 1.12rem; font-weight: 600; letter-spacing: 0.1em; word-spacing: 0.15em; white-space: nowrap; margin-bottom: 0.35rem;
  color: #f4f6fa; text-shadow: 0 1px 0 rgb(0 0 0 / 0.45), 0 -1px 0 rgb(255 255 255 / 0.25); }
.kk-g-alt { display: flex; justify-content: space-between; align-items: flex-end; }
.kk-g-alt small { display: block; font-size: 0.52rem; opacity: 0.8; letter-spacing: 0.1em; }
.kk-g-alt b { font-size: 0.88rem; font-family: var(--sabit); letter-spacing: 0.06em; text-shadow: 0 1px 0 rgb(0 0 0 / 0.4); }
.kk-g-tur { font-weight: 900; font-style: italic; font-size: 1.15rem; letter-spacing: 0.01em; text-shadow: 0 1px 2px rgb(0 0 0 / 0.35); }
.kk-g-tur[data-ag="Mastercard"] { font-style: normal; font-weight: 700; font-size: 0.95rem; letter-spacing: 0; }
.kk-g-tur[data-ag="TROY"] { font-style: normal; letter-spacing: 0.08em; }
.kayitli-kart .kk-ust { align-items: flex-start; }
.kayitli-kart .kk-maske { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.kayitli-kart .kk-bilgi { padding-top: 0.2rem; }
@media (max-width: 40rem) {
  .kayitli-kart .kk-ust { display: grid; grid-template-columns: 1fr auto; gap: 0.6rem; }
  .kk-gorsel { grid-column: 1 / -1; width: 100%; max-width: 22rem; }
  .kk-g-logo { height: 1.8rem; max-width: 11rem; }
  .kayitli-kart .kk-bilgi { padding-top: 0.4rem; }
}

/* ------------------------------------------------------------------ Telefon gezinmesi (sürüm 60)
   Telefonda üstteki kayan sekmeler yerine altta sabit menü; "Menü" tüm bölümleri büyük kutularla açar. Masaüstünde değişiklik yok. */
.mobil-menu, .menu-sayfa, .bolum-baslik { display: none; }
@media (max-width: 47.99rem) {
  #hesap > .sekmeler { display: none; }
  body:has(#hesap:not([hidden]) #mobil-menu:not([hidden])) { padding-bottom: calc(4.6rem + env(safe-area-inset-bottom, 0px)); }
  /* Ana sayfa dışındaki bölümlerde karşılama, özet kutuları ve borç kutusu tekrar edilmez; bölüm hemen başlar (borç kutusu Faturalar'da kalır) */
  #hesap[data-bolum]:not([data-bolum="hizmetler"]) > :is(.selam, #abone-bilgi, #ozet) { display: none; }
  #hesap[data-bolum]:not([data-bolum="hizmetler"]):not([data-bolum="faturalar"]) > #borc-uyari { display: none; }
  .bolum-baslik:not([hidden]) { display: block; margin: 0.25rem 0 1rem; font-family: var(--baslik, inherit); font-size: 1.45rem; font-weight: 800; color: var(--murekkep); letter-spacing: -0.01em; }

  .mobil-menu:not([hidden]) { display: flex; position: fixed; z-index: 40; left: 0; right: 0; bottom: 0;
    padding: 0.35rem 0.4rem calc(0.35rem + env(safe-area-inset-bottom, 0px));
    background: rgb(255 255 255 / 0.94); -webkit-backdrop-filter: saturate(1.6) blur(14px); backdrop-filter: saturate(1.6) blur(14px);
    border-top: 1px solid var(--cizgi); box-shadow: 0 -6px 20px rgb(var(--golge-rgb, 7 54 111) / 0.08); }
  .mobil-menu button { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; align-items: center; gap: 0.15rem; padding: 0.25rem 0.1rem 0.2rem;
    border: 0; background: none; color: var(--soluk); font: inherit; cursor: pointer; -webkit-tap-highlight-color: transparent; }
  .mobil-menu button[hidden] { display: none; }
  .mm-simge { display: grid; place-items: center; width: 3.4rem; height: 2rem; border-radius: 999px; transition: background 0.2s ease, color 0.2s ease; }
  .mm-simge svg { width: 1.45rem; height: 1.45rem; }
  .mm-ad { font-size: 0.72rem; font-weight: 600; line-height: 1.1; white-space: nowrap; }
  .mobil-menu button[aria-current="page"], .mobil-menu button.etkin { color: var(--ana); }
  .mobil-menu button[aria-current="page"] .mm-simge, .mobil-menu button.etkin .mm-simge { background: color-mix(in srgb, var(--ana) 13%, transparent); }
  .mobil-menu button[aria-current="page"] .mm-ad, .mobil-menu button.etkin .mm-ad { font-weight: 800; }
  .mobil-menu button:active .mm-simge { transform: scale(0.94); }

  .menu-sayfa:not([hidden]) { display: block; position: fixed; inset: 0; z-index: 60; }
  .menu-perde { position: absolute; inset: 0; background: rgb(8 20 40 / 0.45); opacity: 0; transition: opacity 0.2s ease; }
  .menu-ic { position: absolute; left: 0; right: 0; bottom: 0; max-height: 88vh; overflow-y: auto; overscroll-behavior: contain;
    background: var(--kagit); border-radius: 22px 22px 0 0; padding: 0.5rem 1rem calc(1rem + env(safe-area-inset-bottom, 0px));
    box-shadow: 0 -10px 30px rgb(var(--golge-rgb, 7 54 111) / 0.18); transform: translateY(100%); transition: transform 0.25s cubic-bezier(0.2, 0.8, 0.2, 1); }
  .menu-sayfa.acik .menu-perde { opacity: 1; }
  .menu-sayfa.acik .menu-ic { transform: none; }
  .menu-tutamak { width: 2.5rem; height: 0.3rem; border-radius: 999px; background: var(--cizgi); margin: 0.1rem auto 0.6rem; }
  .menu-ust { display: flex; align-items: center; justify-content: space-between; margin-bottom: 0.75rem; }
  .menu-ust h2 { margin: 0; font-size: 1.25rem; font-weight: 800; color: var(--murekkep); }
  .menu-kapat { width: 2.25rem; height: 2.25rem; border-radius: 50%; border: 0; background: var(--zemin); color: var(--murekkep); font-size: 1.5rem; line-height: 1; cursor: pointer; }
  .menu-izgara { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.6rem; }
  .menu-kutu { display: flex; flex-direction: column; align-items: flex-start; gap: 0.15rem; text-align: left; min-width: 0;
    padding: 0.8rem 0.8rem 0.85rem; border-radius: 16px; border: 1px solid var(--cizgi); background: var(--kagit); color: var(--murekkep); font: inherit; cursor: pointer; -webkit-tap-highlight-color: transparent; }
  .menu-kutu[hidden] { display: none; }
  .mk-simge { display: grid; place-items: center; width: 2.4rem; height: 2.4rem; border-radius: 12px; margin-bottom: 0.4rem; background: color-mix(in srgb, var(--ana) 10%, transparent); color: var(--ana); }
  .mk-simge svg { width: 1.35rem; height: 1.35rem; }
  .mk-ad { font-weight: 700; font-size: 0.95rem; line-height: 1.2; }
  .mk-aciklama { font-size: 0.75rem; color: var(--soluk); line-height: 1.3; }
  .menu-kutu[aria-current="page"] { border-color: var(--ana); box-shadow: 0 0 0 1px var(--ana) inset; background: color-mix(in srgb, var(--ana) 5%, var(--kagit)); }
  .menu-kutu[aria-current="page"] .mk-simge { background: var(--ana); color: #fff; }
  .menu-kutu:active { transform: scale(0.98); }
  .menu-cikis { display: flex; align-items: center; justify-content: center; gap: 0.5rem; width: 100%; margin-top: 0.9rem; padding: 0.8rem; border-radius: 14px;
    border: 1px solid var(--cizgi); background: var(--zemin); color: var(--murekkep); font: inherit; font-weight: 700; cursor: pointer; }
  .menu-cikis svg { width: 1.2rem; height: 1.2rem; }
  html.menu-acik, html.menu-acik body { overflow: hidden; }
}
@media (max-width: 47.99rem) and (prefers-reduced-motion: reduce) { .menu-ic, .menu-perde { transition: none; } }
@media (max-width: 22rem) { .mm-ad { font-size: 0.66rem; } .mm-simge { width: 2.8rem; } .menu-izgara { grid-template-columns: 1fr; } }

/* Açık talep uyarısı (sürüm 62): açık talep varken yalnız şikâyet açılır */
.acik-talep-uyari { margin: 0 0 1rem; padding: 0.9rem 1rem; border-radius: 14px; border: 1px solid #f0d28a; background: #fff8e6; color: var(--murekkep); }
.acik-talep-uyari b { display: block; margin-bottom: 0.25rem; }
.acik-talep-uyari p { margin: 0 0 0.4rem; font-size: 0.92rem; line-height: 1.45; }
.acik-talep-not { margin: 0 0 0.75rem; padding: 0.6rem 0.75rem; border-radius: 10px; background: #fff8e6; border: 1px solid #f0d28a; font-size: 0.88rem; }

/* Giriş yolu ve giriş şifresi (sürüm 63) */
.giris-yolu { display: grid; grid-template-columns: 1fr 1fr; gap: 0.25rem; padding: 0.25rem; margin: 0.25rem 0 1rem; border-radius: 999px; background: var(--zemin); border: 1px solid var(--cizgi); }
.giris-yolu[hidden] { display: none; }
.giris-yolu button { padding: 0.6rem 0.75rem; border: 0; border-radius: 999px; background: none; color: var(--soluk); font: inherit; font-weight: 700; cursor: pointer; }
.giris-yolu button[aria-selected="true"] { background: var(--kagit); color: var(--ana); box-shadow: 0 1px 3px rgb(var(--golge-rgb, 7 54 111) / 0.15); }
.sifre-kutu { position: relative; }
.sifre-kutu input { width: 100%; padding-right: 4.75rem; }
.sifre-goster { position: absolute; right: 0.35rem; top: 50%; transform: translateY(-50%); padding: 0.35rem 0.6rem; border: 0; border-radius: 8px; background: var(--zemin); color: var(--ana); font: inherit; font-size: 0.85rem; font-weight: 700; cursor: pointer; }
.sifre-unuttum { margin-top: 0.9rem; }
.sifre-form-baslik { margin: 0.25rem 0 0.75rem; font-size: 1.05rem; }
.sifre-onay { margin: 0.75rem 0; padding: 0.6rem 0.8rem; border: 1px solid var(--cizgi); border-radius: 12px; }
.sifre-onay legend { padding: 0 0.3rem; font-weight: 700; font-size: 0.9rem; }
.sifre-onay .secim { display: flex; align-items: center; gap: 0.5rem; margin: 0.3rem 0; font-weight: 500; }
#sifre-bolum #sifre-durum { margin: 0 0 0.9rem; line-height: 1.5; }

/* Arıza sihirbazına yönlendirme ve adım ilerlemesi (sürüm 64) */
.sihirbaz-yonlendir { margin: 0 0 1rem; padding: 0.85rem 1rem; border-radius: 14px; background: color-mix(in srgb, var(--ana) 7%, var(--kagit)); border: 1px solid color-mix(in srgb, var(--ana) 25%, transparent); }
.sihirbaz-yonlendir[hidden] { display: none; }
.sihirbaz-yonlendir p { margin: 0 0 0.6rem; line-height: 1.45; }
.secim-kutulari .hizli-islem { flex-direction: column; gap: 0.2rem; text-align: center; }
.secim-kutulari .hizli-islem .kucuk { font-weight: 500; color: var(--soluk); }
.deneme-ilerleme { display: flex; gap: 0.3rem; margin: 0.1rem 0 0.6rem; }
.deneme-ilerleme span { flex: 1; height: 0.3rem; border-radius: 999px; background: var(--cizgi); }
.deneme-ilerleme span.tamam { background: var(--iyi, #2e8b57); }
.deneme-ilerleme span.simdi { background: var(--ana); }
.deneme-adim h3:focus { outline: none; }
.deneme-adim label { display: block; margin-top: 0.75rem; }
.deneme-adim input { max-width: 10rem; }
.deneme-adim .ikincil-dugme[href] { display: inline-flex; margin: 0 0 0.25rem; text-decoration: none; }
.deneme-adim .hizli-onay-dugmeler { margin-top: 1rem; flex-wrap: wrap; }
@media (max-width: 47.99rem) { .secim-kutulari .hizli-islem:last-child:nth-child(odd) { grid-column: 1 / -1; } }
/* Giriş: marka notu (sürüm 65) */
.marka-notu { margin: -0.25rem 0 0.9rem; color: var(--soluk); }