/* İhsanoğlu Yazılım: koyu tema (panel + satın alma + giriş) */
:root {
  --zemin: #0e1116;
  --yuzey: #161b22;
  --yuzey2: #1d242e;
  --cizgi: #2a323d;
  --metin: #e6e9ee;
  --soluk: #8b95a3;
  --vurgu: #d4a24c;
  --vurgu2: #b9862f;
  --yesil: #3fb27f;
  --kirmizi: #e5534b;
  --mavi: #4c9be8;
  --yaricap: 10px;
  color-scheme: dark;
}
* { box-sizing: border-box; }
html, body { margin: 0; }
body {
  background: var(--zemin);
  color: var(--metin);
  font: 15px/1.5 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}
a { color: var(--vurgu); }
code, .mono { font-family: ui-monospace, "Cascadia Mono", Consolas, monospace; font-size: 13px; }
h1, h2, h3 { line-height: 1.25; }

.logo { display: inline-flex; align-items: center; gap: 10px; font-size: 18px; white-space: nowrap; }
.logo-isaret {
  width: 34px; height: 34px; border-radius: 9px; display: grid; place-items: center;
  background: linear-gradient(135deg, var(--vurgu), var(--vurgu2)); color: #1a1205; font-weight: 800; font-size: 19px;
}
.logo-yazi b { color: var(--vurgu); font-weight: 700; }

.dugme {
  appearance: none; border: 1px solid var(--cizgi); background: var(--yuzey2); color: var(--metin);
  padding: 7px 14px; border-radius: 8px; font: inherit; cursor: pointer; text-decoration: none; display: inline-block;
}
.dugme:hover { border-color: var(--soluk); }
.dugme.ana { background: var(--vurgu); border-color: var(--vurgu); color: #1a1205; font-weight: 600; }
.dugme.ana:hover { background: var(--vurgu2); }
.dugme.tehlike { color: var(--kirmizi); }
.dugme.tehlike.onay { background: var(--kirmizi); color: #fff; border-color: var(--kirmizi); }
.dugme.ince { padding: 4px 10px; font-size: 13px; }
.dugme:disabled { opacity: .5; cursor: default; }

input, select, textarea {
  background: var(--zemin); color: var(--metin); border: 1px solid var(--cizgi); border-radius: 8px;
  padding: 8px 10px; font: inherit; width: 100%;
}
input:focus, select:focus, textarea:focus, .dugme:focus-visible { outline: 2px solid var(--vurgu); outline-offset: 1px; }
label { display: block; color: var(--soluk); font-size: 13px; margin: 0 0 4px; }

.hata { background: #3a1716; border: 1px solid var(--kirmizi); color: #ffb4ae; padding: 8px 12px; border-radius: 8px; }
.uyari { background: #3a2c12; border: 1px solid var(--vurgu); color: #f2d39a; padding: 8px 12px; border-radius: 8px; }
.soluk { color: var(--soluk); }

/* Giriş */
body.giris { min-height: 100vh; display: grid; place-items: center; padding: 16px; }
.giris-kutu { width: 100%; max-width: 360px; background: var(--yuzey); border: 1px solid var(--cizgi); border-radius: 14px; padding: 28px; }
.giris-kutu h1 { font-size: 20px; margin: 22px 0 16px; }
.giris-kutu form { display: grid; gap: 12px; }

/* Panel */
.ust {
  position: sticky; top: 0; z-index: 5; display: flex; align-items: center; gap: 18px; flex-wrap: wrap;
  padding: 12px 20px; background: rgba(14, 17, 22, .95); border-bottom: 1px solid var(--cizgi);
}
.sekmeler { display: flex; gap: 4px; flex-wrap: wrap; flex: 1; }
.sekmeler button {
  background: none; border: 0; color: var(--soluk); padding: 7px 12px; border-radius: 8px; font: inherit; cursor: pointer;
}
.sekmeler button:hover { color: var(--metin); background: var(--yuzey); }
.sekmeler button.aktif { color: var(--metin); background: var(--yuzey2); box-shadow: inset 0 -2px 0 var(--vurgu); }
.cikis { margin: 0; }
.icerik { max-width: 1280px; margin: 0 auto; padding: 22px 20px 60px; }
.icerik h2 { font-size: 20px; margin: 0 0 14px; }
.icerik h3 { font-size: 16px; margin: 24px 0 10px; }

.kartlar { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 12px; }
.kart { background: var(--yuzey); border: 1px solid var(--cizgi); border-radius: var(--yaricap); padding: 16px; }
.kart .deger { font-size: 30px; font-weight: 700; font-variant-numeric: tabular-nums; }
.kart .etiket { color: var(--soluk); font-size: 13px; }
.kart .alt-not { color: var(--soluk); font-size: 12px; margin-top: 4px; }

.cubuklar { display: grid; grid-template-columns: repeat(7, 1fr); gap: 8px; align-items: end; height: 140px; margin-top: 8px; }
.cubuk { display: flex; flex-direction: column; align-items: center; justify-content: flex-end; height: 100%; gap: 4px; font-size: 12px; color: var(--soluk); }
.cubuk span.c { width: 100%; max-width: 46px; background: var(--vurgu); border-radius: 4px 4px 0 0; min-height: 2px; }
.cubuk b { color: var(--metin); font-weight: 600; }

.arac { display: flex; gap: 8px; align-items: center; margin-bottom: 12px; flex-wrap: wrap; }
.arac input { max-width: 340px; }

.tablo-kap { overflow-x: auto; border: 1px solid var(--cizgi); border-radius: var(--yaricap); background: var(--yuzey); }
table { border-collapse: collapse; width: 100%; font-size: 14px; }
th, td { text-align: left; padding: 9px 12px; border-bottom: 1px solid var(--cizgi); vertical-align: top; }
th { color: var(--soluk); font-weight: 500; font-size: 12px; text-transform: uppercase; letter-spacing: .03em; background: var(--yuzey2); }
tr:last-child td { border-bottom: 0; }
td.islemler { white-space: nowrap; }
td.islemler .dugme { margin: 0 4px 4px 0; }
.bos { padding: 24px; text-align: center; color: var(--soluk); }

.rozet { display: inline-block; padding: 1px 8px; border-radius: 99px; font-size: 12px; border: 1px solid var(--cizgi); white-space: nowrap; }
.rozet.yesil { color: var(--yesil); border-color: #2a6b4f; }
.rozet.kirmizi { color: var(--kirmizi); border-color: #7a2e2a; }
.rozet.sari { color: var(--vurgu); border-color: #6b5326; }
.rozet.gri { color: var(--soluk); }

.form-izgara { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 12px; align-items: end; }
.form-kutu { background: var(--yuzey); border: 1px solid var(--cizgi); border-radius: var(--yaricap); padding: 16px; margin-bottom: 18px; }
.form-kutu .tam { grid-column: 1 / -1; }
.form-kutu > h3:first-child { margin-top: 0; }
.yeni-anahtar {
  display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-top: 14px; padding: 12px 14px;
  border: 1px dashed var(--vurgu); border-radius: var(--yaricap); background: #1f1a10;
}
.yeni-anahtar code { font-size: 18px; color: var(--vurgu); letter-spacing: .04em; }
.anahtar { white-space: nowrap; }
.cihaz-satir { display: flex; align-items: center; gap: 6px; margin-bottom: 4px; }
.uzat { display: inline-flex; gap: 4px; align-items: center; }
.uzat input { width: 72px; padding: 4px 6px; }
.gecmis { margin-top: 18px; }
.plan-satir { display: grid; grid-template-columns: 1.2fr 1fr .7fr .7fr 2fr auto; gap: 8px; margin-bottom: 8px; align-items: end; }
textarea { min-height: 110px; resize: vertical; }

.bildirim {
  position: fixed; right: 18px; bottom: 18px; max-width: 360px; padding: 10px 14px; border-radius: 8px;
  background: var(--yuzey2); border: 1px solid var(--cizgi); opacity: 0; transform: translateY(8px);
  transition: opacity .2s, transform .2s; pointer-events: none;
}
.bildirim.gorunur { opacity: 1; transform: none; }
.bildirim.ok { border-color: var(--yesil); }
.bildirim.hata-b { border-color: var(--kirmizi); }

/* Satın alma */
.satin { max-width: 980px; margin: 0 auto; padding: 24px 16px 48px; }
.satin-ust { padding: 6px 0 24px; }
.kahraman h1 { font-size: 32px; margin: 8px 0 10px; }
.kahraman .metin { color: #c4cad3; max-width: 680px; font-size: 16px; }
.satin h2 { font-size: 20px; margin: 34px 0 14px; }
.planlar { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 14px; }
.plan { background: var(--yuzey); border: 1px solid var(--cizgi); border-radius: 14px; padding: 20px; }
.plan h3 { margin: 0 0 6px; font-size: 18px; }
.plan .fiyat { font-size: 28px; font-weight: 700; color: var(--vurgu); margin: 0 0 10px; }
.plan ul { margin: 0; padding-left: 18px; color: #c4cad3; }
.odeme { background: var(--yuzey); border: 1px solid var(--cizgi); border-radius: 14px; padding: 4px 20px 20px; margin-top: 34px; }
.adimlar { padding-left: 20px; color: #c4cad3; }
.adimlar li { margin-bottom: 6px; }
.hesap { display: grid; gap: 8px; margin: 16px 0; padding: 14px; border-radius: 10px; background: var(--zemin); border: 1px solid var(--cizgi); }
.hesap .etiket { display: inline-block; min-width: 64px; color: var(--soluk); font-size: 13px; }
.iban { font-size: 16px; letter-spacing: .03em; word-break: break-all; }
.wa { margin-top: 4px; }
.not { margin: 14px 0 0; padding: 10px 12px; border-left: 3px solid var(--vurgu); background: #1f1a10; border-radius: 4px; }
.alt { color: var(--soluk); font-size: 13px; text-align: center; margin-top: 40px; }

@media (max-width: 720px) {
  .ust { padding: 10px 16px; gap: 10px; }
  .icerik { padding: 16px; }
  .plan-satir { grid-template-columns: 1fr 1fr; }
  .kahraman h1 { font-size: 26px; }
}