/* ============================================================
   STOKVIT — tek stil dosyası (vitrin + sahip paneli)
   ------------------------------------------------------------
   Marka dili: krem zemin, turkuaz asıl renk, altın vurgu, terracotta
   uyarı (sahibin kolajında ölçülen palet). Koyu mürekkep #23302F.
   Panel ve vitrin AYNI kartları kullanır — FinKasa'daki gibi iki ayrı
   tasarım bakılmasın; panelde yalnız sekmeler ve yoğun tablolar var.
   Bu dosya anahtar gerektirmez, yerelde 8120'de servis edilir.
   ============================================================ */

:root {
  --krem: #fbf7f0;
  --krem-2: #f4ece0;
  --kart: #ffffff;
  --cizgi: #e6dccc;
  --murekkep: #23302f;
  --murekkep-2: #5d6a68;
  --murekkep-3: #8a7b63;
  --turkuaz: #1f7a7a;
  --turkuaz-a: #e6f1f0;
  --turkuaz-k: #155b5b;
  --altin: #c9a227;
  --altin-a: #f7edd3;
  --terracotta: #c96f4a;
  --terracotta-a: #fbe8e0;
  --yesil: #2f7a4a;
  --yesil-a: #e4f1e8;
  --gonce: 14px;
  --golge: 0 1px 2px rgba(35, 48, 47, .05), 0 8px 24px -12px rgba(35, 48, 47, .18);
  --yigin: clamp(16px, 4vw, 34px);
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--krem);
  color: var(--murekkep);
  font: 400 16px/1.55 "Avenir Next", "Segoe UI", system-ui, -apple-system, "DejaVu Sans", sans-serif;
  min-height: 100vh;
}

h1, h2, h3 { line-height: 1.25; margin: 0 0 .5rem; font-weight: 700; letter-spacing: -.01em; }
h1 { font-size: clamp(24px, 4.4vw, 34px); }
h2 { font-size: clamp(19px, 3vw, 23px); }
h3 { font-size: 17px; }
p { margin: 0 0 .8rem; }
a { color: var(--turkuaz-k); text-decoration: none; }
a:hover { text-decoration: underline; }
small { color: var(--murekkep-2); }
code, pre { font-family: "SFMono-Regular", Consolas, "DejaVu Sans Mono", monospace; font-size: 13px; }

/* --- kabuk ---------------------------------------------------- */
.ust {
  position: sticky; top: 0; z-index: 20;
  background: rgba(251, 247, 240, .92); backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--cizgi);
}
.ust-ic {
  max-width: 1180px; margin: 0 auto; padding: 10px var(--yigin);
  display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
}
.logo { display: flex; align-items: center; gap: 10px; color: var(--murekkep); font-weight: 700; letter-spacing: .06em; }
.logo img { width: 34px; height: 34px; display: block; }
.logo-sozluk { letter-spacing: .12em; font-size: 17px; }
.ust-nav { margin-left: auto; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }

.orta { max-width: 1180px; margin: 0 auto; padding: 22px var(--yigin) 64px; }
.orta-genis { max-width: 1440px; }

.alt { border-top: 1px solid var(--cizgi); background: var(--krem-2); padding: 20px var(--yigin); }
.alt-ic { max-width: 1180px; margin: 0 auto; display: flex; gap: 18px; flex-wrap: wrap; justify-content: space-between; font-size: 14px; color: var(--murekkep-2); }

/* --- Örnek veri bandı (HER YERDE görünür, unutulmasın) -------- */
.ornek-band {
  background: repeating-linear-gradient(135deg, var(--altin-a) 0 10px, #fdf6e6 10px 20px);
  border: 1px solid var(--altin); color: #6b5410;
  border-radius: 10px; padding: 9px 13px; font-size: 13.5px; margin-bottom: 18px;
}
.ornek-band b { font-weight: 700; }
/* --- SUNUCUDAN bandı (Faz 5c: js/panel.js → panelBand) ----------------
   `.ornek-band` ALTIN çizgili: "bu örnek veri, sunucu yok". Sahip panele
   girip sunucuya bağlandığında gördüğü tablo AYNI yerleşimde; ayrımı
   RENK söylüyor. Bu sınıf eksik kalırsa bant stillsiz düşer ve sahip
   hangi verinin gerçek olduğunu renkten anlayamaz — o yüzden sınıfı
   basan satır ile stilin varlığı birlikte denetleniyor (iskelet-check 4c). */
.canli-band {
  background: var(--turkuaz-a); border: 1px solid var(--turkuaz); color: var(--turkuaz-k);
  border-radius: 10px; padding: 9px 13px; font-size: 13.5px; margin-bottom: 18px;
}
.canli-band b { font-weight: 700; letter-spacing: .02em; }
.canli-band code { font-size: 12.5px; }
/* Açık siparişin satırı: tıklanan satır ile üstteki detay kartının aynı
   siparişe ait olduğunu satırın kendisi söylemeli (12 satırlık listede
   kartın başlığı yetmez). */
.tablo .satir-aktif td { background: #edf5f4; box-shadow: inset 3px 0 0 var(--turkuaz); }
.tablo .satir-aktif:hover td { background: #e6f1ef; }
.rozet-ornek {
  display: inline-block; background: var(--altin); color: #3c2f05;
  font-size: 11px; font-weight: 700; letter-spacing: .08em;
  padding: 2px 7px; border-radius: 999px; vertical-align: middle;
}

/* --- kart / ızgara -------------------------------------------- */
.kart {
  background: var(--kart); border: 1px solid var(--cizgi); border-radius: var(--gonce);
  box-shadow: var(--golge); padding: 18px;
}
.kart + .kart { margin-top: 16px; }
.kart-bas { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.kart-bas h2, .kart-bas h3 { margin: 0; }
.kart-bas .it { margin-left: auto; display: flex; gap: 8px; align-items: center; }
.kart-not { font-size: 13.5px; color: var(--murekkep-2); background: var(--turkuaz-a); border-left: 3px solid var(--turkuaz); padding: 9px 12px; border-radius: 0 8px 8px 0; }
.kart-not.uyari { background: var(--terracotta-a); border-left-color: var(--terracotta); }

.izgara { display: grid; gap: 16px; }
.izgara-2 { grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); }
.izgara-urun { grid-template-columns: repeat(auto-fill, minmax(212px, 1fr)); }
.izgara-4 { grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); }

/* --- ürün kartı ----------------------------------------------- */
.urun { display: flex; flex-direction: column; overflow: hidden; padding: 0; }
.urun-gorsel { aspect-ratio: 4 / 3; width: 100%; display: block; background: var(--krem-2); }
/* CANLI FOTOĞRAF (tedarikçi hotlink'i): 4/3 kutuya sığdırmak için
   `object-fit: cover` ŞART — uzun ürün fotoğrafları kartı uzatmasın,
   ızgara bozulmasın. Kırık adresi `onerror` `.foto-yok`a çevirir: kutu
   boş kalmaz, zemini ve `alt` metni kalır (PLAN §5 çekince 6). */
img.urun-gorsel { object-fit: cover; }
.urun-gorsel.foto-yok { border: 1px dashed var(--cizgi); color: var(--murekkep-3); font-size: 12px; }
/* Ürün detayındaki galeri şeridi: küçük kareler ana karenin yerini
   değiştirir (JS yalnız `src` yazıyor, yeniden çizim yok). */
.mini-ku { display: flex; gap: 6px; flex-wrap: wrap; padding: 8px 10px; background: var(--krem-2); }
.mini { width: 58px; height: 44px; padding: 0; border: 1px solid var(--cizgi); border-radius: 8px;
  overflow: hidden; background: var(--kart); cursor: pointer; }
.mini:hover { border-color: var(--turkuaz); }
.mini-foto { display: block; width: 100%; height: 100%; object-fit: cover; }
.urun-ic { padding: 12px 14px 14px; display: flex; flex-direction: column; gap: 6px; flex: 1; }
.urun-ad { font-weight: 600; font-size: 15px; }
.urun-kod { font-size: 12px; color: var(--murekkep-3); letter-spacing: .04em; }
.urun-fiyat { font-size: 19px; font-weight: 700; color: var(--turkuaz-k); margin-top: auto; }
.urun-alt { display: flex; align-items: center; gap: 8px; }
.tuket { font-size: 12.5px; color: var(--murekkep-2); }

.stok-yok { color: var(--terracotta); font-weight: 700; font-size: 13px; }
.stok-az { color: var(--altin); font-weight: 700; font-size: 13px; }

/* --- düğmeler -------------------------------------------------- */
.dugme {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font: inherit; font-weight: 600; cursor: pointer;
  background: var(--turkuaz); color: #fff; border: 1px solid var(--turkuaz);
  border-radius: 10px; padding: 9px 15px; transition: .15s background, .15s transform;
}
.dugme:hover { background: var(--turkuaz-k); text-decoration: none; }
.dugme:active { transform: translateY(1px); }
.dugme-ik { width: 17px; height: 17px; }
.dugme-ikinci { background: #fff; color: var(--turkuaz-k); }
.dugme-ikinci:hover { background: var(--turkuaz-a); }
.dugme-pasif { background: var(--krem-2); color: var(--murekkep-3); border-color: var(--cizgi); cursor: not-allowed; }
.dugme-pasif:hover { background: var(--krem-2); }
.dugme-tehlike { background: #fff; color: #a83d1c; border-color: var(--terracotta); }
.dugme-tehlike:hover { background: var(--terracotta-a); }
.dugme-kukla { width: 32px; height: 32px; padding: 0; border-radius: 8px; }
.dugme.blok { display: flex; width: 100%; }
.dugme-sol { margin-right: auto; }

/* --- form ------------------------------------------------------ */
label { display: block; font-size: 13.5px; font-weight: 600; color: var(--murekkep-2); margin: 0 0 4px; }
.girdi, textarea.girdi, select.girdi {
  width: 100%; font: inherit; color: var(--murekkep);
  background: #fff; border: 1px solid var(--cizgi); border-radius: 9px; padding: 9px 11px;
}
.girdi:focus { outline: 2px solid var(--turkuaz); outline-offset: 1px; border-color: var(--turkuaz); }
textarea.girdi { min-height: 120px; resize: vertical; font-family: inherit; }
.satir { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); margin-bottom: 12px; }
.satir-2 { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.kutu { display: flex; align-items: flex-start; gap: 8px; font-size: 14.5px; font-weight: 400; color: var(--murekkep); }
.kutu input { margin-top: 3px; width: 16px; height: 16px; accent-color: var(--turkuaz); }
.ipucu { font-size: 12.5px; color: var(--murekkep-3); margin-top: 4px; }
.izdir { background: var(--krem-2); border: 1px dashed var(--cizgi); border-radius: 9px; padding: 14px; text-align: center; }

/* --- çizelge --------------------------------------------------- */
.tablo-sar { overflow-x: auto; }
table.tablo { width: 100%; border-collapse: collapse; font-size: 14.5px; }
.tablo th, .tablo td { text-align: left; padding: 9px 10px; border-bottom: 1px solid var(--cizgi); vertical-align: top; }
.tablo th { font-size: 12.5px; letter-spacing: .05em; text-transform: uppercase; color: var(--murekkep-3); background: var(--krem); }
.tablo tr:hover td { background: #fdfbf7; }
.tablo .sayi { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }

/* --- rozetler -------------------------------------------------- */
.rozet { display: inline-block; font-size: 12px; font-weight: 700; letter-spacing: .03em; padding: 3px 9px; border-radius: 999px; white-space: nowrap; }
/* Durum rozetleri — adlar js/durum.js'ten gelir (ASCII kod). 18 Eki'de
   `.durum-odeme-bekleniyor` duruyordu ama makinenin kodu `odeme-bekliyor`:
   eşleşmeyen sınıf rozeti RENKSİZ bırakır, hata sessiz kalır. Deneti
   (iskelet-check §4) artık her kod için sınıfı DOĞRUDAN arar. */
.durum-yeni { background: var(--krem-2); color: var(--murekkep-2); }
.durum-odeme-bekliyor { background: var(--altin-a); color: #6b5410; }
.durum-odeme-dogrulaniyor { background: var(--altin-a); color: #6b5410; border: 1px dashed #c9a227; }
.durum-odeme-basarisiz { background: var(--terracotta-a); color: #a83d1c; }
.durum-odendi { background: var(--turkuaz-a); color: var(--turkuaz-k); }
.durum-tedarikciye-iletildi { background: #eee7f5; color: #553d76; }
.durum-kargoda { background: #e2eef7; color: #1b537e; }
.durum-teslim { background: var(--yesil-a); color: var(--yesil); }
.durum-iptal, .durum-iade { background: var(--terracotta-a); color: #a83d1c; }
.durum-kismi-iade { background: var(--terracotta-a); color: #a83d1c; border: 1px dashed #a83d1c; }

/* --- sekmeler (panel) ------------------------------------------ */
.sekmeler { display: flex; gap: 4px; flex-wrap: wrap; border-bottom: 1px solid var(--cizgi); margin-bottom: 18px; }
.sekme {
  display: inline-flex; align-items: center; gap: 7px; cursor: pointer;
  font: inherit; font-weight: 600; color: var(--murekkep-2);
  background: none; border: 0; border-bottom: 3px solid transparent; padding: 10px 12px;
}
.sekme:hover { color: var(--turkuaz-k); }
.sekme-aktif { color: var(--turkuaz-k); border-bottom-color: var(--turkuaz); }
.sekme .dugme-ik { width: 16px; height: 16px; }

/* --- sepet / ödeme --------------------------------------------- */
.sepet-satir { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--cizgi); }
.sepet-satir:last-child { border-bottom: 0; }
.sepet-ad { flex: 1; min-width: 140px; }
.adet-ku { display: inline-flex; align-items: center; border: 1px solid var(--cizgi); border-radius: 8px; overflow: hidden; }
.adet-ku button { font: inherit; font-weight: 700; background: var(--krem); border: 0; padding: 4px 10px; cursor: pointer; }
.adet-ku button:hover { background: var(--turkuaz-a); }
.adet-ku span { min-width: 34px; text-align: center; font-variant-numeric: tabular-nums; }
.toplam-satir { display: flex; justify-content: space-between; padding: 6px 0; font-size: 15px; }
.toplam-satir.son { font-size: 19px; font-weight: 700; border-top: 2px solid var(--murekkep); margin-top: 6px; padding-top: 10px; }

/* --- sayfalama ------------------------------------------------- */
.sayfa-ku { display: flex; align-items: center; gap: 8px; justify-content: center; margin-top: 20px; }
.sayfa-ku .no { font-weight: 700; font-variant-numeric: tabular-nums; }

/* --- alt kategori şeridi (çip) · #273 ---------------------------
   Kök kartının sayfası BİR ÜST DALIN adlarını ve sayılarını taşır.
   Ölçülen en kalabalık şerit 201 çip (`Ülke eSIM Paketleri`), tipik 1-21
   → sarmalayan satır, tek satıra zorlamak taşma demekti.
   `round` (999px) bilinçli: panelin `.sekme` çizgisinden ayrışsın, çünkü bu
   bir NAVİGASYON bağlantısı, bir durum etiketi değil. */
.cip-serit { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; margin-top: 12px; }
.cip-serit .cip-bas { font-size: 12.5px; color: var(--murekkep-2); font-weight: 600; margin-right: 2px; }
.cip {
  display: inline-flex; align-items: center; gap: 6px; text-decoration: none; cursor: pointer;
  border: 1px solid var(--cizgi); border-radius: 999px; padding: 5px 10px;
  background: #fff; color: var(--murekkep); font-size: 13px; line-height: 1.25;
}
.cip:hover { border-color: var(--turkuaz); color: var(--turkuaz-k); background: var(--turkuaz-a); }
.cip-aktif { border-color: var(--turkuaz); background: var(--turkuaz-a); color: var(--turkuaz-k); font-weight: 700; }
.cip .cip-adet { font-variant-numeric: tabular-nums; font-size: 11.5px; color: var(--murekkep-2); }
.cip-aktif .cip-adet { color: var(--turkuaz-k); }
.cip-serit .cip-kalan { font-size: 12px; color: var(--murekkep-2); }
.cip-serit .cip-not { font-size: 12px; color: var(--murekkep-2); font-style: italic; }

/* --- rozet şeridi (Visa/MC/3DS yer tutucu) --------------------- */
.odeme-serit { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; font-size: 12.5px; color: var(--murekkep-2); }
.odeme-kutu { border: 1px solid var(--cizgi); background: #fff; border-radius: 7px; padding: 4px 9px; font-weight: 700; letter-spacing: .04em; font-size: 11.5px; color: var(--murekkep-2); }

/* --- boş / yükleniyor ------------------------------------------ */
.bos { text-align: center; padding: 34px 18px; color: var(--murekkep-2); }
.bos .dugme-ik { width: 28px; height: 28px; opacity: .5; }
.yukleniyor { font-size: 14px; color: var(--murekkep-2); }

/* --- içe aktarma önizlemesi ------------------------------------ */
.olcu-raporu { background: #23302f; color: #e8f2f0; border-radius: 10px; padding: 14px 16px; overflow-x: auto; white-space: pre; font-size: 12.5px; line-height: 1.5; }
.fiyat-onizi td { font-variant-numeric: tabular-nums; }
.eski { color: var(--murekkep-3); text-decoration: line-through; }
.yeni { color: var(--turkuaz-k); font-weight: 700; }

/* --- anahtar alan (ödeme yöntemleri) --------------------------- */
.yontem { display: flex; gap: 14px; align-items: flex-start; }
.yontem-top { width: 96px; font-weight: 700; letter-spacing: .04em; }
.yontem-body { flex: 1; }
.gizli-alan { display: flex; gap: 8px; align-items: center; }
.gizli-alan input { font-family: Consolas, monospace; letter-spacing: .1em; }
.durum-nokta { width: 10px; height: 10px; border-radius: 50%; display: inline-block; }
.nokta-yok { background: var(--cizgi); }
.nokta-dolu { background: var(--yesil); }

/* --- yardımcılar ------------------------------------------------ */
.it-sag { margin-left: auto; }
.metin-ik { color: var(--murekkep-2); }
.metin-ko { color: var(--turkuaz-k); }
.metin-kalin { font-weight: 700; }
.sayi-hizali { font-variant-numeric: tabular-nums; }
.bosluk-s { height: 8px; }
.bosluk { height: 18px; }
.gizle { display: none !important; }
.ortala { text-align: center; }
.ayir { border: 0; border-top: 1px solid var(--cizgi); margin: 14px 0; }

@media (max-width: 720px) {
  .ust-ic { gap: 10px; }
  .ust-nav { width: 100%; margin-left: 0; }
  .kart { padding: 14px; }
  .izgara-urun { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); }
  .sepet-satir { flex-wrap: wrap; }
}

/* --- ödeme köprüsü + sonuç sayfası -----------------------------
   Renk anlamı SABİT: yeşil = yalnız sunucu kaydı doğruladı,
   kehribar = bekliyor/doğrulanıyor, kiremit = başarısız.
   Sonuç sayfası "başarılı" rengini URL'den alamaz (js/odeme-sonuc.js). */
.sonuc-kart { max-width: 720px; margin: 0 auto; }
.sonuc-kart h1 { margin: 0; font-size: 24px; }
.sonuc-bas { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; }
.sonuc-bas .dugme-ik { width: 26px; height: 26px; }
.sonuc-aciklama { color: var(--murekkep-2); font-size: 15px; }
.sonuc-basarili { border-top: 4px solid var(--yesil); }
.sonuc-basarisiz { border-top: 4px solid var(--terracotta); }
.sonuc-dogrulaniyor, .sonuc-bekleyen { border-top: 4px solid var(--altin); }
.sonuc-sahteDonus, .sonuc-parcali { border-top: 4px solid var(--cizgi); }
.sonuc-kopru { border-top: 4px solid var(--turkuaz); }
.sonuc-kart .kart-not { margin-top: 8px; }
.iframe-ku { border: 1px solid var(--cizgi); border-radius: 12px; overflow: hidden; background: var(--krem); min-height: 420px; }
.iframe-ku iframe { width: 100%; height: 560px; border: 0; display: block; }

/* --- sipariş takibi (siparis-durum.html) -----------------------
   ZAMAN ÇİZGİSİ: adlar ve hâller SUNUCUDAN gelir (sunucu/siparis.mjs →
   zamanCizgisi → durum.js cizgiDurumu). CSS yalnız BEŞ HÂLİ boyar:
   gecmis · simdi · bekliyor · koptu · once. Yeni bir makine hâli eklenir
   de buraya sınıf unutulursa çizgi RENKSİZ kalır — iskelet-check §4c her
   hâl için stil arar ki bu sessizlik gürültüye dönüşsün. */
.cizgi { display: flex; list-style: none; margin: 16px 0 6px; padding: 0; }
.cizgi-adim { position: relative; flex: 1; min-width: 0; padding-top: 30px; text-align: center; font-size: 12.5px; color: var(--murekkep-3); }
.cizgi-adim::before { content: ""; position: absolute; top: 9px; left: 0; right: 0; height: 2px; background: var(--cizgi); }
.cizgi-adim:first-child::before { left: 50%; }
.cizgi-adim:last-child::before { right: 50%; }
.cizgi-nokta { position: absolute; top: 3px; left: 50%; transform: translateX(-50%); width: 15px; height: 15px;
  border-radius: 50%; background: #fff; border: 2px solid var(--cizgi); display: flex; align-items: center; justify-content: center; }
.cizgi-ik { width: 9px; height: 9px; }
.cizgi-ad { display: block; font-weight: 700; line-height: 1.3; }
.cizgi-hal, .cizgi-ek { display: block; font-size: 11.5px; font-weight: 400; }

.cizgi-gecmis .cizgi-nokta { background: var(--yesil); border-color: var(--yesil); color: #fff; }
.cizgi-gecmis { color: var(--murekkep-2); }
.cizgi-gecmis::before { background: var(--yesil); }
.cizgi-simdi .cizgi-nokta { background: var(--turkuaz); border-color: var(--turkuaz-k); color: #fff; box-shadow: 0 0 0 3px var(--turkuaz-a); }
.cizgi-simdi { color: var(--turkuaz-k); }
.cizgi-simdi::before { background: var(--yesil); }
.cizgi-bekliyor .cizgi-nokta { background: #fff; border-color: var(--cizgi); }
.cizgi-koptu .cizgi-nokta { background: var(--terracotta-a); border-color: var(--terracotta); color: #a83d1c; }
.cizgi-koptu { color: #a83d1c; }
.cizgi-koptu::before, .cizgi-once::before { background: repeating-linear-gradient(90deg, var(--cizgi) 0 4px, transparent 4px 8px); }
.cizgi-once { color: var(--murekkep-3); }

/* Sorgu kutusu: gerçek GET formu — JS kapalıyken de çalışır (action ve
   name="no" olmadan sayfa hiçbir şey yapamaz). */
.takip-sorgu { display: flex; flex-wrap: wrap; align-items: end; gap: 8px; margin: 4px 0 6px; }
.takip-sorgu label { font-size: 12.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--murekkep-3); flex: 0 0 100%; }
.takip-sorgu input { flex: 1 1 200px; min-width: 0; padding: 10px 12px; font: 600 15px/1.2 inherit;
  letter-spacing: .04em; color: var(--murekkep); background: #fff; border: 1px solid var(--cizgi); border-radius: 10px; }
.takip-sorgu input:focus-visible { outline: 2px solid var(--turkuaz); outline-offset: 1px; border-color: var(--turkuaz); }
.takip-sorgu code { font-variant-numeric: tabular-nums; }

/* --- bilgi kutusu: FinKasa kesimi ------------------------------------
   Sahibin 19 Eki isteği: "bilgiler kutu gibi düzgün çıksın, düz yazı
   olmasın". Her alan KENDİ kutusunda (ikon + etiket + değer + eylem);
   boş alanın kutusu ÇİZİLMEZ — "bilgi yok" demek için gri satır uydurmak
   yerine kutu sayısı eksilir. IBAN `bilgi-parasal` ile hizalı basılır:
   rakam grupları kaymasın (kopyalayan kişi gözle de denetleyebilsin). */
.bilgi-izgara { display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); }
.bilgi-kutu {
  display: flex; align-items: flex-start; gap: 10px; min-width: 0;
  background: var(--kart); border: 1px solid var(--cizgi); border-radius: var(--gonce);
  padding: 12px 14px; box-shadow: var(--golge);
}
.bilgi-kutu.tam { grid-column: 1 / -1; }
.bilgi-ikon {
  flex: none; width: 32px; height: 32px; border-radius: 9px; display: grid; place-items: center;
  background: var(--turkuaz-a); color: var(--turkuaz);
}
.bilgi-ikon .dugme-ik { width: 18px; height: 18px; }
.bilgi-ic { min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.bilgi-etiket { font-size: 11.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--murekkep-3); }
.bilgi-deger { font-size: 15px; font-weight: 600; color: var(--murekkep); overflow-wrap: anywhere; }
.bilgi-deger a { color: inherit; text-decoration: none; border-bottom: 1px solid var(--cizgi); }
.bilgi-parasal { font-variant-numeric: tabular-nums; letter-spacing: .02em; }
.bilgi-not { font-size: 12.5px; color: var(--murekkep-3); font-weight: 400; }
.bilgi-kutu .it { margin-left: auto; display: flex; gap: 6px; align-items: center; flex: none; }
@media (max-width: 560px) {
  .bilgi-izgara { grid-template-columns: 1fr; }
  .bilgi-kutu .it { margin-left: 0; }
}

/* Dar ekranda yatay çizgi 6 adımla okunamaz oluyor: dikey raya döner. */
@media (max-width: 620px) {
  .cizgi { flex-direction: column; }
  .cizgi-adim { flex: none; text-align: left; padding: 6px 0 6px 28px; min-height: 26px; }
  .cizgi-adim::before { left: 7px; right: auto; top: 0; bottom: 0; width: 2px; height: auto; }
  .cizgi-adim:first-child::before { top: 12px; left: 7px; }
  .cizgi-adim:last-child::before { bottom: 12px; left: 7px; }
  .cizgi-nokta { left: 8px; top: 12px; transform: translateX(-50%); }
  .cizgi-hal, .cizgi-ek { display: inline; margin-left: 6px; }
}