/* InvestPRO — "sakin defter": sıcak kâğıt, koyu yeşil mürekkep, büyük serif rakamlar. Mobil öncelikli. */
:root {
  --kagit: #f5efe3;
  --kagit-2: #ede5d4;
  --kart: #fffdf8;
  --murekkep: #14342a;
  --murekkep-2: #3d5a4f;
  --soluk: #7c8a83;
  --cizgi: #e0d6c2;
  --yesil: #2e7d4f;
  --yesil-acik: #e3f1e7;
  --sari: #d99a1e;
  --sari-acik: #fbf0d6;
  --kirmizi: #c0432c;
  --kirmizi-acik: #f8e2dc;
  --mavi: #2f5d8a;
  --amber: #e8a33d;
  --golge: 0 1px 0 rgba(20, 52, 42, 0.04), 0 8px 24px -12px rgba(20, 52, 42, 0.18);
  --r: 18px;
  --serif: 'Fraunces', 'Georgia', serif;
  --sans: 'Bricolage Grotesque', 'Segoe UI', system-ui, sans-serif;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--kagit);
  background-image:
    radial-gradient(1200px 600px at 110% -10%, rgba(232, 163, 61, 0.10), transparent 60%),
    radial-gradient(900px 500px at -20% 110%, rgba(46, 125, 79, 0.08), transparent 60%);
  background-attachment: fixed;
  color: var(--murekkep);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.5;
  min-height: 100vh;
}
button, input, select { font: inherit; color: inherit; }
a { color: var(--yesil); }
.gizli { display: none !important; }

/* ---------- Yerleşim ---------- */
.kabuk { display: flex; min-height: 100vh; }
.yan {
  display: none;
  width: 248px;
  flex-shrink: 0;
  padding: 28px 18px;
  border-right: 1px solid var(--cizgi);
  position: sticky;
  top: 0;
  height: 100vh;
  flex-direction: column;
  gap: 4px;
}
.marka { font-family: var(--serif); font-weight: 700; font-size: 24px; letter-spacing: -0.02em; display: flex; align-items: center; gap: 10px; margin: 0 8px 28px; }
.marka-isaret { width: 30px; height: 30px; flex-shrink: 0; display: block; }
.marka-ad { display: inline-flex; align-items: center; gap: 5px; }
/* "PRO": koyu zeminde amber küçük rozet */
.marka-ad b {
  font-family: var(--sans); font-size: 0.5em; font-weight: 800; letter-spacing: 0.1em;
  background: var(--murekkep); color: var(--amber); padding: 3px 6px 2px; border-radius: 6px; line-height: 1.2;
}
.yan a {
  display: flex; align-items: center; gap: 12px;
  padding: 11px 12px; border-radius: 12px;
  color: var(--murekkep-2); text-decoration: none; font-weight: 600;
}
.yan a:hover { background: var(--kagit-2); }
.yan a.aktif { background: var(--murekkep); color: var(--kart); }
.yan .alt-bilgi { margin-top: auto; font-size: 12px; color: var(--soluk); padding: 0 8px; }

.icerik { flex: 1; min-width: 0; padding: 18px 16px 110px; max-width: 980px; margin: 0 auto; }
.ust {
  display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 18px;
}
.ust .marka { margin: 0; font-size: 20px; }
.ust-kullanici { margin-left: auto; font-size: 14px; color: var(--murekkep-2); display: flex; align-items: center; gap: 8px; }
.avatar { width: 34px; height: 34px; border-radius: 50%; background: var(--kagit-2); border: 1px solid var(--cizgi); display: grid; place-items: center; font-weight: 700; font-size: 14px; }

.alt-menu {
  position: fixed; bottom: 0; left: 0; right: 0; z-index: 20;
  display: flex; justify-content: space-around;
  background: rgba(255, 253, 248, 0.94); backdrop-filter: blur(10px);
  border-top: 1px solid var(--cizgi);
  padding: 6px 4px calc(6px + env(safe-area-inset-bottom));
}
.alt-menu a {
  flex: 1; display: flex; flex-direction: column; align-items: center; gap: 2px;
  font-size: 11px; font-weight: 600; color: var(--soluk); text-decoration: none; padding: 6px 2px; border-radius: 10px;
}
.alt-menu a svg { width: 22px; height: 22px; }
.alt-menu a.aktif { color: var(--murekkep); }
.alt-menu a.aktif svg { stroke: var(--yesil); }
.ikon { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; flex-shrink: 0; }

@media (min-width: 900px) {
  .yan { display: flex; }
  .alt-menu { display: none; }
  .ust .marka { display: none; }
  .icerik { padding: 32px 36px 60px; }
}

.imp-bant {
  background: var(--amber); color: var(--murekkep); font-weight: 700; font-size: 14px;
  padding: 10px 16px; display: flex; align-items: center; justify-content: center; gap: 12px; flex-wrap: wrap;
  position: sticky; top: 0; z-index: 30;
}

/* ---------- Tipografi ---------- */
h1 { font-family: var(--serif); font-weight: 600; font-size: 30px; letter-spacing: -0.02em; line-height: 1.15; margin: 4px 0 6px; }
h2 { font-family: var(--serif); font-weight: 600; font-size: 21px; letter-spacing: -0.01em; margin: 0 0 12px; }
h3 { font-size: 16px; margin: 0 0 6px; }
.alt-baslik { color: var(--murekkep-2); margin: 0 0 22px; }
.soluk { color: var(--soluk); }
.kucuk { font-size: 13px; }
.rakam { font-family: var(--serif); font-variant-numeric: tabular-nums; letter-spacing: -0.02em; }
.pozitif { color: var(--yesil); }
.negatif { color: var(--kirmizi); }

/* ---------- Kartlar ---------- */
.kart {
  background: var(--kart); border: 1px solid var(--cizgi); border-radius: var(--r);
  padding: 20px; box-shadow: var(--golge); margin-bottom: 16px;
  animation: belir 0.45s cubic-bezier(.2,.7,.2,1) both;
}
.kart:nth-child(2) { animation-delay: 0.05s; }
.kart:nth-child(3) { animation-delay: 0.1s; }
.kart:nth-child(4) { animation-delay: 0.15s; }
@keyframes belir { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

.kart-etiket { font-size: 12px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--soluk); margin-bottom: 8px; display: flex; align-items: center; justify-content: space-between; gap: 8px; }

.ozet-izgara { display: grid; gap: 16px; }
.ozet-izgara .kart { margin: 0; }
@media (min-width: 900px) { .ozet-izgara { grid-template-columns: 1.3fr 1fr; } .ozet-izgara .buyuk { grid-row: span 2; } }

/* Öneriler: geniş ekranda solda plan, sağda bekleyen kartlar (yapışkan, kendi içinde kayar).
   Dar ekranda alt alta: önce bekleyenler, sonra plan. */
@media (min-width: 1200px) { .icerik.genis { max-width: 1440px; } }
.oneri-duzen { display: grid; gap: 20px; align-items: start; }
#plan-alani, .izgara-kap { container-type: inline-size; min-width: 0; }
.izgara-kap { margin-bottom: 16px; }
.izgara-kap .plan-izgara { margin-bottom: 0; }
@media (min-width: 1200px) {
  .oneri-duzen.iki { grid-template-columns: minmax(0, 1.4fr) minmax(360px, 1fr); }
  .oneri-duzen.iki #plan-alani { grid-column: 1; grid-row: 1; }
  .oneri-duzen.iki #bekleyenler {
    grid-column: 2; grid-row: 1;
    position: sticky; top: 20px; max-height: calc(100vh - 40px); overflow-y: auto;
    padding-right: 4px; overscroll-behavior: contain;
  }
  .oneri-duzen.iki #bekleyenler h2 { position: sticky; top: 0; z-index: 1; background: var(--kagit); }
}
/* İki sütunun başlıkları aynı kutu ölçüsünde: altlarındaki kartlar aynı hizadan başlar */
.sutun-baslik { margin: 0 0 12px; padding: 4px 0 8px; line-height: 1.3; }

/* Plan özeti + "Ne bekleyebilirim?": alan yeterince genişse yan yana, değilse alt alta (beklenti hemen planın altında) */
.plan-izgara { display: grid; gap: 16px; align-items: start; margin-bottom: 16px; }
.plan-izgara .kart { margin: 0; }
.kart.beklenti { border: 1.5px solid var(--yesil); }
.kart.beklenti > .kart-etiket { color: var(--yesil); font-size: 13px; }
@container (min-width: 760px) {
  /* Sadece iki kart varsa yan yana (beklenti hesaplanamadıysa tek kart tam genişlik kalır) */
  .plan-izgara:has(> .kart + .kart) { grid-template-columns: 1.1fr 1fr; }
  /* Yarım genişlikte halka ve lejant alt alta sığar */
  .plan-izgara:has(> .kart + .kart) .dagilim { grid-template-columns: 1fr; }
  .plan-izgara:has(> .kart + .kart) .halka { width: 170px; height: 170px; }
  /* Satır yüksekliğini soldaki kart belirler; beklenti kartı o boyda kesilir ("Devamını oku" ile açılır) */
  .plan-izgara:has(> .kart + .kart) { align-items: stretch; }
  .plan-izgara > .kart:first-child { align-self: start; }
  .plan-izgara .kart.beklenti:not(.acik) { contain: size; overflow: hidden; }
}
.kart.beklenti { position: relative; }
.kart.beklenti .devami { display: none; justify-content: center; }
.kart.beklenti.tasiyor .devami {
  display: flex; position: absolute; left: 0; right: 0; bottom: 0;
  padding: 48px 20px 14px; border-radius: 0 0 var(--r) var(--r);
  background: linear-gradient(to bottom, transparent, var(--kart) 60%);
}
.kart.beklenti.acik .devami { display: flex; padding-top: 12px; }
.kart.beklenti .devami .link-btn { font-weight: 700; color: var(--yesil); }

.dev-rakam { font-family: var(--serif); font-size: clamp(40px, 11vw, 60px); font-weight: 600; letter-spacing: -0.04em; line-height: 1; margin: 6px 0 10px; font-variant-numeric: tabular-nums; }
.kart.koyu { background: var(--murekkep); color: var(--kagit); border-color: var(--murekkep); }
.kart.koyu .kart-etiket { color: #a9bdb4; }
.kart.koyu .soluk { color: #a9bdb4; }
.kart.koyu .pozitif { color: #8fdcaa; }
.kart.koyu .negatif { color: #ffa897; }

.para-sec { display: inline-flex; background: rgba(255,255,255,0.1); border-radius: 999px; padding: 3px; }
.para-sec button { border: 0; background: transparent; color: #a9bdb4; padding: 4px 12px; border-radius: 999px; font-weight: 700; font-size: 12px; cursor: pointer; }
.para-sec button.secili { background: var(--kagit); color: var(--murekkep); }

.isik { display: flex; align-items: center; gap: 16px; }
.isik-nokta { width: 52px; height: 52px; border-radius: 50%; flex-shrink: 0; position: relative; }
.isik-nokta::after { content: ''; position: absolute; inset: -8px; border-radius: 50%; opacity: 0.25; background: inherit; animation: nabiz 2.4s ease-in-out infinite; }
@keyframes nabiz { 50% { transform: scale(1.12); opacity: 0.08; } }
.isik-YESIL { background: var(--yesil); }
.isik-SARI { background: var(--sari); }
.isik-KIRMIZI { background: var(--kirmizi); }
.isik-metin { font-family: var(--serif); font-size: 20px; line-height: 1.25; font-weight: 500; }

.satir { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.satir-liste > * + * { border-top: 1px dashed var(--cizgi); }
.satir-liste .satir { padding: 12px 0; }

/* ---------- Düğmeler ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  border: 1px solid var(--murekkep); background: var(--murekkep); color: var(--kart);
  padding: 12px 18px; border-radius: 12px; font-weight: 700; cursor: pointer;
  transition: transform 0.12s, background 0.15s; text-decoration: none; min-height: 46px;
}
.btn:hover { background: #0d261e; }
.btn:active { transform: scale(0.98); }
.btn:disabled { opacity: 0.5; cursor: not-allowed; }
.btn.ikincil { background: transparent; color: var(--murekkep); border-color: var(--cizgi); }
.btn.ikincil:hover { background: var(--kagit-2); }
.btn.yesil { background: var(--yesil); border-color: var(--yesil); }
.btn.kirmizi { background: var(--kirmizi); border-color: var(--kirmizi); }
.btn.kucuk { padding: 7px 12px; min-height: 36px; font-size: 14px; border-radius: 10px; }
.btn.tam { width: 100%; }
.btn-grup { display: flex; gap: 10px; flex-wrap: wrap; }
.btn.acik { background: var(--kagit); color: var(--murekkep); border-color: var(--kagit); }
.link-btn { background: none; border: 0; color: var(--yesil); font-weight: 700; cursor: pointer; padding: 0; text-decoration: underline; text-underline-offset: 3px; }

/* ---------- Form ---------- */
.alan { display: flex; flex-direction: column; gap: 6px; margin-bottom: 14px; }
.alan label { font-weight: 700; font-size: 14px; }
.alan .ipucu { font-size: 13px; color: var(--soluk); }
input[type=text], input[type=password], input[type=number], select {
  width: 100%; padding: 12px 14px; border: 1.5px solid var(--cizgi); border-radius: 12px; background: var(--kart);
  font-size: 16px; outline: none; transition: border-color 0.15s;
}
input:focus, select:focus { border-color: var(--yesil); }
.secenekler { display: grid; gap: 10px; }
.secenek {
  border: 1.5px solid var(--cizgi); border-radius: 14px; padding: 14px 16px; background: var(--kart);
  cursor: pointer; text-align: left; display: flex; gap: 12px; align-items: flex-start; transition: border-color 0.15s, background 0.15s;
}
.secenek:hover { border-color: var(--murekkep-2); }
.secenek.secili { border-color: var(--yesil); background: var(--yesil-acik); }
.secenek b { display: block; }
.secenek .soluk { font-size: 14px; }
/* Açık olan anahtarlı seçenek hafif yeşil */
.secenek:has(.anahtar:checked) { border-color: var(--yesil); background: var(--yesil-acik); }

/* Aç/kapa anahtarı (tarayıcı kutucuğu yerine) */
.anahtar {
  appearance: none; -webkit-appearance: none; margin: 2px 0 0; flex-shrink: 0;
  width: 44px; height: 26px; border-radius: 999px; position: relative; cursor: pointer;
  background: var(--kagit-2); border: 1.5px solid var(--cizgi); transition: background 0.18s, border-color 0.18s;
}
.anahtar::after {
  content: ''; position: absolute; top: 2px; left: 2px; width: 19px; height: 19px; border-radius: 50%;
  background: var(--kart); box-shadow: 0 1px 3px rgba(20, 52, 42, 0.25); transition: transform 0.18s;
}
.anahtar:checked { background: var(--yesil); border-color: var(--yesil); }
.anahtar:checked::after { transform: translateX(18px); }
.anahtar:focus-visible { outline: 2px solid var(--amber); outline-offset: 2px; }

/* ---------- Rozet / chip ---------- */
.rozet { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; font-weight: 800; letter-spacing: 0.04em; padding: 4px 9px; border-radius: 999px; white-space: nowrap; }
.rozet.AL { background: var(--yesil-acik); color: var(--yesil); }
.rozet.SAT { background: var(--kirmizi-acik); color: var(--kirmizi); }
.rozet.AZALT { background: var(--sari-acik); color: #9a6a0c; }
.rozet.TUT { background: var(--kagit-2); color: var(--murekkep-2); }
.rozet.notr { background: var(--kagit-2); color: var(--murekkep-2); }
.rozet.ai { background: #e8eef6; color: var(--mavi); }

/* ---------- Öneri kartı ---------- */
.oneri { border-left: 5px solid var(--cizgi); }
.oneri.AL { border-left-color: var(--yesil); }
.oneri.SAT { border-left-color: var(--kirmizi); }
.oneri.AZALT { border-left-color: var(--sari); }
/* Öneri kartı (kompakt): rozet + sembol tek satır, düğmeler ve tarih tek satır */
.kart.oneri { padding: 14px 16px; margin-bottom: 12px; }
.oneri-ust { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; margin-bottom: 8px; }
.oneri-baslik { display: flex; align-items: center; gap: 8px; }
.oneri-sembol { font-family: var(--serif); font-size: 20px; font-weight: 600; letter-spacing: -0.02em; line-height: 1.15; cursor: pointer; }
.oneri-ad { font-size: 13px; color: var(--soluk); }
.oneri-tutar { text-align: right; flex-shrink: 0; }
.oneri-tutar .rakam { font-size: 20px; font-weight: 600; line-height: 1.15; }
.oneri-neden { background: var(--kagit); border-radius: 10px; padding: 9px 12px; font-size: 14px; line-height: 1.45; margin: 0 0 10px; color: var(--murekkep-2); }
.oneri-alt { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.oneri-tarih { margin-left: auto; font-size: 12px; color: var(--soluk); }
.oneri-neden b { color: var(--murekkep); }

/* ---------- Dağılım ---------- */
.dagilim { display: grid; gap: 18px; align-items: center; }
@media (min-width: 640px) { .dagilim { grid-template-columns: 200px 1fr; } }
.halka { width: 200px; height: 200px; margin: 0 auto; display: block; }
.portfoy-toplam { margin: 0 0 16px; }
.portfoy-toplam .rakam { font-family: var(--serif); font-size: 34px; font-weight: 600; letter-spacing: -0.02em; line-height: 1.15; font-variant-numeric: tabular-nums; }
.lejant { display: grid; gap: 8px; }
.lejant-satir { display: grid; grid-template-columns: 14px 1fr auto; gap: 10px; align-items: center; font-size: 15px; }
.lejant-renk { width: 14px; height: 14px; border-radius: 4px; }
.cubuk { height: 8px; border-radius: 4px; background: var(--kagit-2); overflow: hidden; position: relative; }
.cubuk > i { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 4px; }
.cubuk > b { position: absolute; top: -3px; bottom: -3px; width: 2px; background: var(--murekkep); }

.varlik-satir { display: grid; grid-template-columns: 1fr auto auto; gap: 4px 12px; align-items: center; padding: 14px 0; cursor: pointer; }
/* Tıklanabilir satır: sağda "Ayrıntı ›" ipucu, üzerine gelince hafif zemin */
.varlik-satir.tiklanir { margin: 0 -10px; padding: 14px 10px; border-radius: 12px; transition: background 0.15s; }
.varlik-satir.tiklanir:hover, .varlik-satir.tiklanir:focus-visible { background: var(--kagit); outline: none; }
.varlik-satir.tiklanir:focus-visible { box-shadow: 0 0 0 2px var(--amber); }
.varlik-satir:hover .vs-sembol { color: var(--yesil); }
.vs-ok {
  display: inline-flex; align-items: center; gap: 4px; white-space: nowrap;
  font-size: 13px; font-weight: 700; color: var(--yesil);
  border: 1px solid var(--cizgi); border-radius: 999px; padding: 4px 10px; background: var(--kart);
}
.varlik-satir.tiklanir:hover .vs-ok { border-color: var(--yesil); background: var(--yesil-acik); }
@media (max-width: 560px) { .vs-ok-yazi { display: none; } .vs-ok { padding: 4px 9px; font-size: 16px; } }
.vs-sembol { font-weight: 800; font-size: 17px; }
.vs-ad { font-size: 13px; color: var(--soluk); }
.vs-sag { text-align: right; }

/* ---------- Modal ---------- */
.modal-arka { position: fixed; inset: 0; background: rgba(20, 52, 42, 0.45); z-index: 50; display: flex; align-items: flex-end; justify-content: center; animation: sol 0.2s both; }
@keyframes sol { from { opacity: 0; } }
.modal {
  background: var(--kart); width: 100%; max-width: 520px; max-height: 92vh; overflow: auto;
  border-radius: 22px 22px 0 0; padding: 24px 20px calc(20px + env(safe-area-inset-bottom));
  animation: yuksel 0.28s cubic-bezier(.2,.8,.2,1) both;
}
@keyframes yuksel { from { transform: translateY(40px); opacity: 0; } }
@media (min-width: 640px) { .modal-arka { align-items: center; } .modal { border-radius: 22px; } }
.modal h2 { margin-bottom: 8px; }
.modal-alt { display: flex; gap: 10px; justify-content: flex-end; margin-top: 18px; flex-wrap: wrap; }

.toast {
  position: fixed; left: 50%; bottom: 96px; transform: translateX(-50%); z-index: 60;
  background: var(--murekkep); color: var(--kart); padding: 12px 18px; border-radius: 12px; font-weight: 600;
  box-shadow: var(--golge); animation: yuksel 0.25s both; max-width: calc(100% - 32px);
}
.toast.hata { background: var(--kirmizi); }
@media (min-width: 900px) { .toast { bottom: 32px; } }

/* ---------- Giriş ---------- */
.giris-sayfa { min-height: 100vh; display: grid; place-items: center; padding: 24px 16px; }
.giris-kutu { width: 100%; max-width: 400px; }
.giris-kutu .marka { justify-content: center; font-size: 30px; margin-bottom: 8px; }
.giris-kutu .marka-isaret { width: 40px; height: 40px; }
/* İlk giriş adımları */
.adim-rozet { margin: 0 0 12px; font-size: 12px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--soluk); }
.adim-rozet b { color: var(--yesil); }
.tg-liste { margin: 0; padding-left: 20px; display: grid; gap: 6px; font-size: 15px; }
.tg-liste + .btn, ol.tg-liste { margin-bottom: 14px; }
.slogan { text-align: center; color: var(--murekkep-2); margin: 0 0 28px; font-family: var(--serif); font-style: italic; font-size: 18px; }

/* ---------- Sihirbaz ---------- */
.adimlar { display: flex; gap: 6px; margin: 4px 0 22px; }
.adimlar i { flex: 1; height: 4px; border-radius: 2px; background: var(--cizgi); }
.adimlar i.tamam { background: var(--yesil); }

/* ---------- Tablo ---------- */
.tablo { width: 100%; border-collapse: collapse; font-size: 14px; }
.tablo th { text-align: left; font-size: 12px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--soluk); padding: 8px 6px; border-bottom: 1px solid var(--cizgi); }
.tablo td { padding: 10px 6px; border-bottom: 1px dashed var(--cizgi); vertical-align: middle; }
.tablo-kap { overflow-x: auto; }

.ayar-izgara { column-gap: 16px; }
@media (min-width: 900px) { .ayar-izgara { column-count: 2; } }
.ayar-izgara .kart { break-inside: avoid; display: inline-block; width: 100%; }

.bos { text-align: center; padding: 36px 16px; color: var(--murekkep-2); }
.bos .buyuk-ikon { font-size: 40px; margin-bottom: 8px; }

.puan-satir { display: grid; grid-template-columns: 120px 1fr 36px; gap: 10px; align-items: center; font-size: 14px; margin: 6px 0; }

.uyari-kutu { border-radius: 12px; padding: 12px 14px; margin: 8px 0; font-size: 14px; background: var(--sari-acik); }
.uyari-kutu.kirmizi { background: var(--kirmizi-acik); }
.uyari-kutu.yesil { background: var(--yesil-acik); }

.feragat { text-align: center; font-size: 12px; color: var(--soluk); margin: 28px 0 0; }

.yukleniyor { display: flex; justify-content: center; padding: 48px; }
.donen { width: 30px; height: 30px; border-radius: 50%; border: 3px solid var(--cizgi); border-top-color: var(--yesil); animation: don 0.8s linear infinite; }
@keyframes don { to { transform: rotate(360deg); } }

.kod-kutu { font-family: var(--serif); font-size: 34px; letter-spacing: 0.25em; text-align: center; background: var(--kagit); border-radius: 14px; padding: 14px; margin: 10px 0; font-weight: 600; }
.sifre-kutu { font-family: ui-monospace, Consolas, monospace; font-size: 22px; text-align: center; background: var(--kagit); border: 2px dashed var(--amber); border-radius: 12px; padding: 14px; margin: 12px 0; user-select: all; }

/* ---------- Analiz ilerlemesi ---------- */
.ilerleme { height: 10px; border-radius: 6px; background: var(--kagit-2); overflow: hidden; position: relative; }
.ilerleme > i {
  position: absolute; inset: 0 auto 0 0; border-radius: 6px; background: var(--yesil);
  transition: width 0.35s ease;
  background-image: linear-gradient(45deg, rgba(255,255,255,.18) 25%, transparent 25%, transparent 50%, rgba(255,255,255,.18) 50%, rgba(255,255,255,.18) 75%, transparent 75%);
  background-size: 18px 18px; animation: serit 1s linear infinite;
}
@keyframes serit { to { background-position: 18px 0; } }
.analiz-kutu { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.analiz-kutu .analiz-durum { flex: 1; min-width: 220px; }
.analiz-durum .satir { font-size: 14px; margin-bottom: 6px; }
.analiz-bant {
  position: sticky; top: 0; z-index: 25; background: var(--murekkep); color: var(--kagit);
  padding: 8px 16px; font-size: 13px; font-weight: 600; display: flex; align-items: center; gap: 12px;
}
.analiz-bant .ilerleme { flex: 1; max-width: 360px; height: 6px; background: rgba(255,255,255,.15); }
.analiz-bant a { color: var(--amber); }
.lejant-tutar { font-size: 13px; }

/* ---------- Loglar (yönetici) ---------- */
.log-duzen { display: grid; gap: 16px; align-items: start; }
.log-duzen .kart { margin: 0; }
@media (min-width: 1000px) {
  .log-duzen { grid-template-columns: 300px minmax(0, 1fr); }
  .log-kisiler { position: sticky; top: 20px; max-height: calc(100vh - 40px); overflow-y: auto; }
}
.log-kisiler { padding: 14px; }
.log-kisi {
  width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 8px; text-align: left;
  background: none; border: 0; border-radius: 12px; padding: 9px 10px; cursor: pointer; font: inherit; color: inherit;
}
.log-kisi b { display: inline; }
.log-kisi .soluk { display: block; }
.log-kisi:hover { background: var(--kagit); }
.log-kisi.secili { background: var(--murekkep); color: var(--kart); }
.log-kisi.secili .soluk { color: #a9bdb4; }
.log-sayilar { display: flex; gap: 4px; flex-shrink: 0; }
.log-sayilar span { font-size: 12px; font-weight: 700; padding: 2px 7px; border-radius: 999px; background: var(--kagit-2); color: var(--murekkep-2); }
.log-sayilar .log-hata, .log-kisi.secili .log-sayilar .log-hata { background: var(--kirmizi-acik); color: var(--kirmizi); }
.log-hata-yazi { color: var(--kirmizi); font-weight: 700; }
.log-ust { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 8px; }
.log-filtre { display: flex; gap: 4px; flex-wrap: wrap; }
.log-filtre button { font: inherit; font-size: 13px; font-weight: 600; border: 1px solid var(--cizgi); background: var(--kart); color: var(--murekkep-2); border-radius: 999px; padding: 5px 11px; cursor: pointer; }
.log-filtre button.secili { background: var(--murekkep); border-color: var(--murekkep); color: var(--kart); }
.log-gun { position: sticky; top: 0; background: var(--kart); font-size: 12px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--soluk); padding: 14px 0 6px; border-bottom: 1px solid var(--cizgi); }
.log-satir { display: grid; grid-template-columns: 64px 64px minmax(0, 1fr); gap: 10px; align-items: start; padding: 8px 0; border-bottom: 1px dashed var(--cizgi); font-size: 14px; }
.log-satir.hata { background: linear-gradient(90deg, var(--kirmizi-acik), transparent 70%); }
.log-saat { font-variant-numeric: tabular-nums; color: var(--soluk); font-size: 13px; padding-top: 1px; }
.log-tur { font-size: 11px; font-weight: 800; letter-spacing: 0.03em; text-align: center; padding: 3px 0; border-radius: 999px; }
.log-yesil { background: var(--yesil-acik); color: var(--yesil); }
.log-mavi { background: #e2ecf6; color: var(--mavi); }
.log-amber { background: var(--sari-acik); color: #9a6a10; }
.log-kirmizi { background: var(--kirmizi-acik); color: var(--kirmizi); }
.log-notr { background: var(--kagit-2); color: var(--murekkep-2); }
.log-metin { min-width: 0; overflow-wrap: anywhere; }
.log-detaylar { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px; }
.log-detay { font-size: 12px; background: var(--kagit); border: 1px solid var(--cizgi); border-radius: 6px; padding: 1px 6px; color: var(--murekkep-2); }
@media (max-width: 560px) { .log-satir { grid-template-columns: 56px minmax(0, 1fr); } .log-tur { display: none; } }

/* Çekirdek / Uydu çubuğu */
.cu { margin-top: 16px; padding-top: 14px; border-top: 1px dashed var(--cizgi); }
.cu-baslik { font-size: 14px; margin-bottom: 8px; }
.cu-cubuk { display: flex; height: 10px; border-radius: 5px; overflow: hidden; background: var(--kagit-2); }
.cu-cubuk i { display: block; height: 100%; }
/* Varlık türü renklerinden (yeşil, koyu yeşil, mavi, amber) bilerek ayrı: bu çubuk tür değil, paranın yapısını anlatır */
.cu-c { background: #6b5b95; }
.cu-u { background: #d0607a; }
.cu-n { background: #c9bda3; }
.cu-nokta { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin: 0 5px 0 8px; vertical-align: 0; }
.cu-baslik .cu-nokta:first-child { margin-left: 0; }

/* Düzenli alım kartı */
.dca-girdi { display: grid; gap: 12px; }
@media (min-width: 640px) { .dca-girdi { grid-template-columns: 220px 1fr; align-items: end; } }
.dca-ozet { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; background: var(--kagit); border-radius: 12px; padding: 12px 14px; }
.dca-rakam { font-family: var(--serif); font-size: 26px; font-weight: 600; line-height: 1.2; }
.dca-dagitim { margin-top: 12px; padding-top: 12px; border-top: 1px dashed var(--cizgi); font-size: 14px; }
.beklenti-liste { margin: 0 0 4px; padding-left: 18px; display: grid; gap: 6px; }
.beklenti-liste .soluk { display: block; font-size: 13px; }
.haber-not { display: flex; gap: 10px; align-items: flex-start; background: var(--yesil-acik); border-radius: 12px; padding: 10px 12px; margin: 0 0 12px; font-size: 14px; color: var(--murekkep-2); }
.haber-not b { color: var(--murekkep); }
.haber-not-ikon { font-size: 18px; line-height: 1.2; }
.dca-satir-sag { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
.dca-eklenen { background: var(--yesil-acik); border-radius: 10px; padding: 8px 12px; margin-bottom: 10px; font-size: 14px; }
.cu-etiket { font-size: 11px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--soluk); margin-bottom: 6px; }

/* ---------- Özellikler (nasıl çalışır) ---------- */
.oz-icerik { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 16px; }
.oz-icerik button { font: inherit; font-size: 13px; font-weight: 600; border: 1px solid var(--cizgi); background: var(--kart); color: var(--murekkep-2); border-radius: 999px; padding: 6px 12px; cursor: pointer; }
.oz-icerik button:hover { border-color: var(--yesil); color: var(--yesil); }
.oz-bolum { scroll-margin-top: 16px; }
.oz-bolum .kart-etiket { margin-bottom: 10px; }
.oz-bolum p { margin: 0 0 10px; }
.oz-liste, .oz-adimlar { margin: 0; padding-left: 22px; display: grid; gap: 8px; }
.oz-adimlar li::marker { font-weight: 800; color: var(--yesil); }
.oz-sayfalar, .oz-sss { margin: 0; display: grid; gap: 4px; }
.oz-sayfalar dt, .oz-sss dt { font-weight: 800; margin-top: 12px; }
.oz-sayfalar dt:first-child, .oz-sss dt:first-child { margin-top: 0; }
.oz-sayfalar dd, .oz-sss dd { margin: 0; color: var(--murekkep-2); }
.oz-sss dd { margin-left: 0; }
.oz-tablo { width: 100%; border-collapse: collapse; font-size: 14px; margin: 6px 0 10px; }
.oz-tablo th { text-align: left; font-size: 12px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--soluk); padding: 6px 8px; border-bottom: 1px solid var(--cizgi); }
.oz-tablo td { padding: 9px 8px; border-bottom: 1px dashed var(--cizgi); vertical-align: top; }
.oz-tablo td:last-child { color: var(--murekkep-2); width: 34%; }
@media (max-width: 560px) { .oz-tablo td:last-child { width: auto; } .oz-tablo tr { display: grid; } .oz-tablo th:last-child { display: none; } .oz-tablo td { border-bottom: 0; padding: 4px 0; } .oz-tablo tr { border-bottom: 1px dashed var(--cizgi); padding: 6px 0; } }
.oz-baglanti { display: flex; align-items: center; gap: 12px; text-decoration: none; color: inherit; background: var(--kart); border: 1px solid var(--cizgi); border-radius: var(--r); padding: 12px 16px; margin: 0 0 16px; }
.oz-baglanti > span { flex: 1; }
.oz-baglanti .soluk { display: block; font-size: 13px; }
.oz-baglanti:hover { border-color: var(--yesil); }
@media (min-width: 900px) { .oz-baglanti { display: none; } }

/* İlk girişteki "Sistemi tanı" adımı: uzun içerik, altta yapışkan düğmeler */
.tanitim-sayfa { padding: 24px 16px 0; }
.tanitim-kutu { max-width: 760px; margin: 0 auto; }
.tanitim-kutu > .marka { justify-content: center; font-size: 28px; margin: 8px 0 0; }
.tanitim-kutu .marka-isaret { width: 38px; height: 38px; }
.tanitim-alt {
  position: sticky; bottom: 0; display: grid; gap: 8px; justify-items: center;
  padding: 14px 0 calc(16px + env(safe-area-inset-bottom));
  background: linear-gradient(to bottom, transparent, var(--kagit) 30%);
}
.tanitim-alt .btn { max-width: 420px; }

/* Sol menünün altındaki çıkış düğmesi (menü bağlantılarıyla aynı görünüm, sade) */
.yan-cikis {
  margin-top: auto; display: flex; align-items: center; gap: 12px; width: 100%;
  padding: 11px 12px; border-radius: 12px; border: 0; background: none; cursor: pointer;
  font: inherit; font-weight: 600; color: var(--murekkep-2); text-align: left;
}
.yan-cikis:hover { background: var(--kagit-2); color: var(--kirmizi); }
.yan-cikis + .alt-bilgi { margin-top: 10px; }