/* Gelir/Gider v2 — ortak tema (beğenilen önizleme tasarımı) */
:root{ --brand:#5a3fff; --brand2:#8f6bff; --ink:#2f2b43; --muted:#7a7a93; --bg:#f3f3fb; }
*{ box-sizing:border-box; }
body{ background:var(--bg); color:var(--ink); -webkit-tap-highlight-color:transparent; margin:0; }

.card-soft{ border:0; border-radius:16px; box-shadow:0 4px 16px rgba(20,20,60,.06); }
.hero{ background:linear-gradient(135deg,var(--brand),var(--brand2)); color:#fff; border-radius:20px; padding:22px; box-shadow:0 12px 30px rgba(90,63,255,.28); }
.hero .big{ font-weight:700; letter-spacing:.5px; }
.acc-ico{ width:42px;height:42px;border-radius:12px;display:flex;align-items:center;justify-content:center;font-size:22px;color:#fff;flex:0 0 auto; }
.badge-ccy{ font-weight:600; }
.fx-pill{ background:#efeaff;color:var(--brand);border-radius:20px;padding:2px 10px;font-weight:600;font-size:.8rem; }
.lbl{ color:var(--muted);font-size:.8rem; }
.tag-demo{ background:#fff3cd;color:#7a5b00;border-radius:8px;padding:2px 8px;font-size:.72rem;font-weight:600;white-space:nowrap; }
.conv-out{ font-weight:700; }
.btn-brand{ background:linear-gradient(135deg,var(--brand),var(--brand2)); color:#fff; border:0; font-weight:600; }
.btn-brand:hover{ color:#fff; filter:brightness(1.05); }

/* ---- Düzen ---- */
.layout{ display:flex; min-height:100vh; }
.sidebar{ display:none; }
.main{ flex:1 1 auto; min-width:0; }
.topbar{ display:flex; align-items:center; justify-content:space-between; padding:16px 14px 4px; }
.content{ padding:10px 14px 24px; }
.avatar{ width:38px;height:38px;border-radius:50%;background:linear-gradient(135deg,var(--brand),var(--brand2));color:#fff;display:flex;align-items:center;justify-content:center;font-weight:700; }

/* ---- Telefon: alt menü ---- */
body.has-chrome{ padding-bottom:84px; }
.bottom-nav{ position:fixed;left:0;right:0;bottom:0;background:#fff;border-top:1px solid #ececf5;display:flex;justify-content:space-around;padding:8px 4px calc(8px + env(safe-area-inset-bottom));z-index:30; }
.bottom-nav a{ color:#9a9ab0;text-decoration:none;font-size:.7rem;text-align:center;flex:1; }
.bottom-nav a.active{ color:var(--brand); }
.bottom-nav i{ font-size:22px;display:block; }

/* ---- Giriş ekranı ---- */
.auth-wrap{ min-height:100vh; display:flex; align-items:center; justify-content:center; padding:20px; }
.auth-card{ width:100%; max-width:400px; }
.auth-logo{ width:60px;height:60px;border-radius:18px;background:linear-gradient(135deg,var(--brand),var(--brand2));color:#fff;display:flex;align-items:center;justify-content:center;font-size:32px;margin:0 auto 14px; }

/* ===========  PC / GENİŞ EKRAN (>=992px)  =========== */
@media (min-width:992px){
  body.has-chrome{ padding-bottom:0; background:#eef0f8; }
  .bottom-nav{ display:none; }
  .sidebar{
    display:flex; flex-direction:column; width:264px; flex:0 0 264px;
    background:#fff; border-right:1px solid #e9e9f3; position:sticky; top:0; height:100vh; padding:18px 14px;
  }
  .brand{ display:flex; align-items:center; gap:10px; font-weight:800; font-size:1.15rem; color:var(--brand); padding:6px 10px 18px; }
  .brand .logo{ width:38px;height:38px;border-radius:11px;background:linear-gradient(135deg,var(--brand),var(--brand2));color:#fff;display:flex;align-items:center;justify-content:center;font-size:22px; }
  .side-link{ display:flex; align-items:center; gap:12px; padding:11px 14px; border-radius:12px; color:#6b6b86; text-decoration:none; font-weight:500; margin-bottom:4px; }
  .side-link i{ font-size:21px; }
  .side-link:hover{ background:#f3f1ff; color:var(--brand); }
  .side-link.active{ background:linear-gradient(135deg,var(--brand),var(--brand2)); color:#fff; box-shadow:0 8px 18px rgba(90,63,255,.32); }
  .topbar{ padding:20px 32px 6px; max-width:1780px; margin-inline:auto; width:100%; }
  .content{ padding:14px 32px 42px; max-width:1780px; margin-inline:auto; width:100%; }
  .hero .big{ font-size:2.8rem; }
  .row.g-2 > [class*="col-"] > .card-soft{ height:100%; }
}
@media (max-width:991.98px){
  .content{ max-width:560px; margin:0 auto; }
  .hero .big{ font-size:2rem; }
}

/* ---- Form: ikon/renk seçici ---- */
.ip-btn{ width:42px;height:42px;border-radius:11px;border:1px solid #e3e3ef;background:#fff;color:#6b6b86;font-size:21px;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:.15s; }
.ip-btn:hover{ border-color:var(--brand);color:var(--brand); }
.ip-btn.active{ background:linear-gradient(135deg,var(--brand),var(--brand2));color:#fff;border-color:transparent; }
.cp-btn{ width:30px;height:30px;border-radius:50%;border:3px solid #fff;box-shadow:0 0 0 1px #e3e3ef;cursor:pointer;padding:0; }
.cp-btn.active{ box-shadow:0 0 0 2px var(--brand); }

/* ---- Sayfa başlığı ---- */
.page-head{ display:flex;justify-content:space-between;align-items:center;gap:10px;margin-bottom:14px; }
.page-head h5{ margin:0;font-weight:800; }

/* ---- İşlem satırı (liste) ---- */
.tx-row{ display:flex;align-items:center;gap:12px;padding:11px 4px;border-bottom:1px solid #f1f1f8; }
.tx-row:last-child{ border-bottom:0; }
.tx-ico{ width:40px;height:40px;border-radius:11px;display:flex;align-items:center;justify-content:center;color:#fff;font-size:20px;flex:0 0 auto; }
.tx-meta{ flex:1 1 auto;min-width:0; }
.tx-title{ font-weight:600;line-height:1.2; }
.amt-in{ color:#28c76f;font-weight:700;white-space:nowrap; }
.amt-out{ color:#ea5455;font-weight:700;white-space:nowrap; }
.amt-neutral{ color:#6b6b86;font-weight:700;white-space:nowrap; }

/* ---- Mini istatistik kartları ---- */
.stat{ border-radius:16px;padding:16px;color:#fff; }
.stat .v{ font-size:1.5rem;font-weight:800;line-height:1.1; }
.stat.green{ background:linear-gradient(135deg,#28c76f,#48da89); }
.stat.red{ background:linear-gradient(135deg,#ea5455,#f08182); }
.stat.blue{ background:linear-gradient(135deg,#00cfe8,#1ce7ff); }

/* ---- Boş durum ---- */
.empty{ text-align:center;padding:34px 10px;color:var(--muted); }
.empty i{ font-size:46px;opacity:.5;display:block;margin-bottom:8px; }

/* ---- Liste kartı satır ayraçları ---- */
.list-row{ display:flex;align-items:center;gap:12px;padding:12px 4px;border-bottom:1px solid #f1f1f8; }
.list-row:last-child{ border-bottom:0; }

/* segmented seçim (gelir/gider/transfer) */
.seg{ display:flex;gap:8px;flex-wrap:wrap; }
.seg input{ display:none; }
.seg label{ flex:1;min-width:90px;text-align:center;padding:10px;border:1px solid #e3e3ef;border-radius:12px;cursor:pointer;font-weight:600;color:#6b6b86; }
.seg input:checked + label{ background:linear-gradient(135deg,var(--brand),var(--brand2));color:#fff;border-color:transparent; }

/* ===========  ANİMASYONLAR & ŞIK EFEKTLER  =========== */
@keyframes fadeUp{ from{ opacity:0; transform:translateY(14px); } to{ opacity:1; transform:none; } }
@keyframes fadeIn{ from{ opacity:0; } to{ opacity:1; } }
@keyframes shine{ 0%{ transform:translateX(-120%) rotate(8deg);} 100%{ transform:translateX(320%) rotate(8deg);} }

/* Sayfa içeriği her yüklemede yumuşak gelir (menüler arası geçiş hissi) */
.content{ animation:fadeUp .5s cubic-bezier(.22,.61,.36,1) both; }
/* Sayfadan ayrılırken solma (JS body.page-leaving ekler) */
body.page-leaving .content{ opacity:0; transform:translateY(-10px); transition:opacity .22s ease, transform .22s ease; animation:none; }

/* Kartlar sırayla canlanır */
.content .card-soft, .content .stat, .content .hero{ animation:fadeUp .55s cubic-bezier(.22,.61,.36,1) both; }
.content .row > div:nth-child(1) .card-soft{ animation-delay:.02s; }
.content .row > div:nth-child(2) .card-soft{ animation-delay:.07s; }
.content .row > div:nth-child(3) .card-soft{ animation-delay:.12s; }
.content .row > div:nth-child(4) .card-soft{ animation-delay:.17s; }
.content .row > div:nth-child(5) .card-soft{ animation-delay:.22s; }

/* Hover'da kart hafifçe kalkar */
.card-soft{ transition:transform .22s ease, box-shadow .22s ease; }
.card-soft:hover{ transform:translateY(-4px); box-shadow:0 14px 34px rgba(20,20,60,.12); }
.stat{ transition:transform .22s ease, box-shadow .22s ease; }
.stat:hover{ transform:translateY(-3px) scale(1.01); }
.side-link, .ip-btn, .cp-btn, .btn{ transition:all .18s ease; }
.tx-row{ transition:background .15s ease, padding-left .15s ease; border-radius:10px; }
.tx-row:hover{ background:#f7f6ff; padding-left:8px; }

/* Hero'ya hareketli parıltı */
.hero{ position:relative; overflow:hidden; }
.hero::after{ content:''; position:absolute; top:-40%; left:0; width:60px; height:200%; background:rgba(255,255,255,.18); filter:blur(8px); animation:shine 4.5s ease-in-out infinite; }

/* Üstte ince ilerleme çubuğu (gezinmede) */
#nav-progress{ position:fixed; top:0; left:0; height:3px; width:0; z-index:9999; background:linear-gradient(90deg,#28c76f,#5a3fff,#00cfe8); box-shadow:0 0 10px rgba(90,63,255,.6); opacity:0; transition:width .2s ease, opacity .3s ease; }
#nav-progress.go{ opacity:1; }

/* Sayaç animasyonu için sabit genişlik hissi */
.count{ font-variant-numeric:tabular-nums; }

@media (prefers-reduced-motion: reduce){
  .content, .content .card-soft, .content .stat, .content .hero, .hero::after{ animation:none !important; }
  .card-soft:hover, .stat:hover{ transform:none; }
}