/* Hesapci — hakediş defteri temalı arayüz.
   Palet: ılık kağıt zemin + mürekkep siyahı metin + Trendyol'a selam veren tek bir turuncu vurgu.
   Tipografi: Inter (gövde/arayüz) + Space Grotesk (başlıklar ve büyük rakamlar, tabular-nums ile hizalı). */
:root{
  --paper:#faf8f4; --surface:#ffffff; --surface-2:#f4f1ea; --border:#e6e1d6; --border-soft:#efebe1;
  --ink:#191a1f; --muted:#6f6a5e;
  --brand:#e05a1c; --brand-dark:#c24a14; --brand-tint:#fdeee3;
  --ok:#157a4d; --ok-tint:#e4f3ea; --bad:#b4372c; --bad-tint:#fbeae8; --warn:#9a6a0c; --warn-tint:#fbf1dd;
  --info:#3568b8; --info-tint:#e8eef7;
  --navy:#232a3d; --navy-2:#1a1f30;
  --radius-lg:16px; --radius-md:10px; --radius-sm:6px;
  --shadow-card:0 1px 2px rgba(25,20,10,.04), 0 6px 16px -10px rgba(25,20,10,.18);
  --maxw:1200px;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  background:
    radial-gradient(640px circle at 10% 0%, rgba(224,90,28,.08), transparent 55%),
    radial-gradient(560px circle at 100% 0%, rgba(53,104,184,.09), transparent 50%),
    var(--paper);
  color:var(--ink);
  font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Arial,sans-serif;
  font-size:15px; line-height:1.55; -webkit-font-smoothing:antialiased;
}
a{color:var(--brand); text-decoration:none}
a:hover{text-decoration:underline}
h1,h2,h3{margin:0 0 .5em; line-height:1.2; font-family:'Space Grotesk','Inter',sans-serif; font-weight:600; letter-spacing:-.01em}
h1{font-size:1.65rem} h2{font-size:1.2rem} h3{font-size:1rem}
p{margin:0 0 1em}
.num, .stat .value, td.right, .rc-line b{font-variant-numeric:tabular-nums}

.container{max-width:var(--maxw); margin:0 auto; padding:0 20px}

.topbar{position:sticky; top:0; z-index:20; background:linear-gradient(135deg, var(--navy) 0%, var(--navy-2) 100%); box-shadow:0 2px 14px -6px rgba(10,12,20,.45)}
.topbar-inner{display:flex; align-items:center; justify-content:space-between; height:60px; gap:12px}
.brand{font-family:'Space Grotesk',sans-serif; font-weight:700; font-size:1.2rem; color:#fff; display:flex; align-items:center; gap:8px}
.brand .dot{width:10px;height:10px;border-radius:3px; background:var(--brand); box-shadow:0 0 0 4px rgba(224,90,28,.28)}
.nav{display:flex; gap:2px; align-items:center}
.nav a{color:#aab2c7; padding:8px 11px; border-radius:var(--radius-sm); font-size:.9rem; font-weight:600; position:relative}
.nav a.active{color:#fff; background:var(--brand)}
.nav a:hover{color:#fff; text-decoration:none}
.navtoggle{display:none; background:none; border:1px solid rgba(255,255,255,.22); border-radius:var(--radius-sm); padding:7px 10px; font-size:1.1rem; color:#fff}

main{padding:24px 0 64px}

.card{background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-lg); padding:18px; box-shadow:var(--shadow-card)}
.card + .card{margin-top:14px}
.grid{display:grid; gap:14px}
.grid-stats{grid-template-columns:repeat(auto-fit,minmax(160px,1fr))}
.grid-2{grid-template-columns:1fr 1fr}
.grid-form{grid-template-columns:repeat(auto-fit,minmax(200px,1fr))}
.grid-3{grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}
@media(max-width:720px){.grid-2{grid-template-columns:1fr}}

/* İstatistik kartları — işaretine göre sol kenarlık, eyebrow yerine sade alt etiket */
.stat{display:flex; flex-direction:column; gap:5px}
.card.stat{border-left:3px solid var(--border); padding-left:15px}
.stat .label{color:var(--muted); font-size:.82rem; font-weight:500}
.stat .value{font-size:1.65rem; font-weight:700; font-family:'Space Grotesk',sans-serif; color:var(--ink)}
.stat .value.ok{color:var(--ok)} .stat .value.bad{color:var(--bad)}
.stat .sub{font-size:.8rem; color:var(--muted)}
.card.stat{border-left-width:3px}
.card.stat:has(.value.ok){border-left-color:var(--ok)}
.card.stat:has(.value.bad){border-left-color:var(--bad)}

.badge{display:inline-block; padding:3px 9px; border-radius:var(--radius-sm); font-size:.74rem; font-weight:700}
.badge.ok{background:var(--ok-tint); color:var(--ok)}
.badge.warn{background:var(--warn-tint); color:var(--warn)}
.badge.bad{background:var(--bad-tint); color:var(--bad)}
.badge.muted{background:var(--surface-2); color:var(--muted)}
.badge.info{background:var(--info-tint); color:var(--info)}

table{width:100%; border-collapse:collapse; font-size:.88rem}
th,td{text-align:left; padding:10px 12px; border-bottom:1px solid var(--border-soft); white-space:nowrap}
th{color:var(--muted); font-weight:700; font-size:.72rem; text-transform:uppercase; letter-spacing:.04em; position:sticky; top:0; background:var(--surface); z-index:1}
tbody tr:nth-child(even){background:var(--paper)}
tbody tr:hover{background:var(--brand-tint)}
.table-scroll{overflow-x:auto; -webkit-overflow-scrolling:touch; margin:0 -18px; padding:0 18px; max-height:70vh}

/* Mobilde tablo yerine kart listesi */
.rowcards{display:none}
@media(max-width:680px){
  .table-scroll{display:none}
  .rowcards{display:flex; flex-direction:column; gap:10px}
  .rowcard{border:1px solid var(--border); border-radius:var(--radius-md); padding:12px; background:var(--surface)}
  .rowcard .rc-top{display:flex; justify-content:space-between; font-weight:700; margin-bottom:6px}
  .rowcard .rc-line{display:flex; justify-content:space-between; font-size:.86rem; color:var(--muted); padding:2px 0}
  .rowcard .rc-line b{color:var(--ink); font-weight:600}
}

label{display:block; font-size:.85rem; font-weight:600; margin-bottom:5px; color:var(--ink)}
input[type=text],input[type=email],input[type=password],input[type=number],input[type=file],select,textarea{
  width:100%; padding:10px 12px; border:1px solid var(--border); border-radius:var(--radius-md); font-size:1rem;
  background:var(--surface); color:var(--ink); font-family:inherit;
}
input:focus,select:focus,textarea:focus{outline:2px solid var(--brand); outline-offset:1px}
.field{margin-bottom:14px}
.help{font-size:.78rem; color:var(--muted); margin-top:4px}

.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:6px; padding:10px 18px; border-radius:var(--radius-md);
  background:linear-gradient(135deg, var(--brand), var(--brand-dark)); color:#fff; border:none; font-weight:700; font-size:.92rem; cursor:pointer; text-decoration:none;
  transition:filter .15s;
}
.btn:hover{filter:brightness(1.07); text-decoration:none}
.btn.secondary{background:var(--surface); color:var(--ink); border:1px solid var(--border)}
.btn.secondary:hover{background:var(--surface-2)}
.btn.danger{background:var(--bad)}
.btn.block{width:100%}
.btn.small{padding:7px 12px; font-size:.8rem; border-radius:var(--radius-sm)}

.alert{padding:11px 14px; border-radius:var(--radius-md); margin-bottom:14px; font-size:.9rem; border:1px solid transparent}
.alert.ok{background:var(--ok-tint); color:var(--ok); border-color:#c7e6d4}
.alert.error{background:var(--bad-tint); color:var(--bad); border-color:#f0cdc8}
.alert.info{background:var(--brand-tint); color:var(--brand-dark); border-color:#f6d2b8}

.authwrap{max-width:420px; margin:48px auto; padding:0 16px}
.authwrap .card{padding:28px 24px}
.muted{color:var(--muted)}
.right{text-align:right}
.center{text-align:center}
.tag-pos{color:var(--ok); font-weight:700}
.tag-neg{color:var(--bad); font-weight:700}

footer{position:relative; padding:34px 0; color:var(--muted); font-size:.8rem; text-align:center; border-top:1px solid var(--border-soft); margin-top:30px}
footer::before{content:''; position:absolute; top:-1px; left:0; right:0; height:2px; background:linear-gradient(90deg, var(--brand), var(--info))}

@media(max-width:1000px){
  .navtoggle{display:inline-flex}
  .nav{position:absolute; top:60px; left:0; right:0; background:var(--navy-2); border-bottom:1px solid rgba(255,255,255,.1); flex-direction:column; align-items:stretch; padding:8px; display:none; gap:2px; box-shadow:0 10px 24px -10px rgba(10,12,20,.5)}
  .nav.open{display:flex}
  .nav a{padding:12px}
}
@media(max-width:720px){
  h1{font-size:1.35rem}
}

/* Hero özet — ana Net Kâr/Ciro kartları büyük, ikincil rakamlar tek kartta satır satır */
.hero-row{display:grid; grid-template-columns:1.4fr 1fr; gap:14px}
@media(max-width:620px){.hero-row{grid-template-columns:1fr}}
.hero-stat{padding:22px; border-top:3px solid var(--info)}
.hero-stat.hero-main{border-top:3px solid var(--brand)}
.hero-stat .label{color:var(--muted); font-size:.82rem; font-weight:500}
.hero-stat .label .sub-label{font-weight:400; font-size:.92em}
.hero-stat .value{display:block; font-family:'Space Grotesk',sans-serif; font-weight:700; margin:4px 0 2px}
.hero-stat .value.big{font-size:2.3rem}
.hero-stat:not(.hero-main) .value{font-size:1.8rem}
.hero-stat .value.ok{color:var(--ok)} .hero-stat .value.bad{color:var(--bad)}
.hero-stat .sub{font-size:.82rem; color:var(--muted)}

/* Hızlı Bakış şeridi — Bugün/7/30 gün karşılaştırması, hero'dan daha az vurgulu */
.quickglance{display:flex; background:linear-gradient(120deg, var(--brand-tint), var(--info-tint)); border:1px solid var(--border-soft); border-radius:var(--radius-md); overflow:hidden; margin-bottom:14px}
.quickglance .qg-item{flex:1; padding:10px 14px; border-right:1px solid var(--border)}
.quickglance .qg-item:last-child{border-right:none}
.quickglance .qg-label{display:block; font-size:.7rem; color:var(--muted); text-transform:uppercase; letter-spacing:.04em; margin-bottom:2px}
.quickglance .qg-val{font-family:'Space Grotesk',sans-serif; font-weight:700; font-size:1rem}
.quickglance .qg-val.ok{color:var(--ok)} .quickglance .qg-val.bad{color:var(--bad)}
.quickglance .qg-sub{display:block; font-size:.72rem; color:var(--muted); margin-top:1px}
@media(max-width:600px){
  .quickglance{flex-direction:column}
  .quickglance .qg-item{border-right:none; border-bottom:1px solid var(--border)}
  .quickglance .qg-item:last-child{border-bottom:none}
}

/* Grafik kartları — Chart.js canvas'ları için sabit yükseklikli, başlıklı kutular */
.chart-card{padding:18px}
.chart-card h2{margin-bottom:14px}
.chart-wrap{position:relative; height:260px}
.chart-wrap.tall{height:300px}
.chart-row{display:grid; grid-template-columns:1.1fr 1fr; gap:14px; align-items:stretch}
@media(max-width:860px){.chart-row{grid-template-columns:1fr}}
.chart-legend-list{display:flex; flex-direction:column; gap:9px; margin-top:4px}
.chart-legend-list .li{display:flex; align-items:center; gap:9px; font-size:.86rem}
.chart-legend-list .dot{width:10px; height:10px; border-radius:3px; flex-shrink:0}
.chart-legend-list .lbl{flex:1; color:var(--muted)}
.chart-legend-list .amt{font-weight:700; font-family:'Space Grotesk',sans-serif}
.chart-legend-list .total{border-top:1px solid var(--border-soft); margin-top:4px; padding-top:9px; font-weight:700}

/* Metrik satırları */
.metric-row{display:flex; justify-content:space-between; gap:10px; padding:9px 0; border-bottom:1px dashed var(--border); font-size:.9rem}
.metric-row:last-child{border-bottom:none}
.metric-row span{color:var(--muted)}
.metric-row b{font-family:'Space Grotesk',sans-serif}

/* Uyarı banner'ı kenarlığı artık inline değil */
.alert-banner{border-left:4px solid var(--bad)}

/* İkon kutuları — panelin "dolu" ve derli toplu hissetmesi için renkli vurgulu özet şeridi.
   Renk anlamlıdır: yeşil=bankaya yatan, amber=yolda/bekleyen, mor=sıradaki ödeme, turuncu=net kâr. */
.icontile-row{display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:12px; margin-bottom:14px}
.icontile{display:flex; align-items:center; gap:13px; background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-lg); padding:15px 16px; box-shadow:var(--shadow-card)}
.icontile .ic{width:42px; height:42px; border-radius:11px; display:flex; align-items:center; justify-content:center; font-size:1.25rem; flex-shrink:0}
.icontile .ic.c-ok{background:var(--ok-tint)} .icontile .ic.c-warn{background:var(--warn-tint)}
.icontile .ic.c-brand{background:var(--brand-tint)} .icontile .ic.c-info{background:var(--info-tint)}
.icontile .tx{min-width:0}
.icontile .tx .v{font-family:'Space Grotesk',sans-serif; font-weight:700; font-size:1.2rem; line-height:1.2; white-space:nowrap}
.icontile .tx .l{font-size:.78rem; color:var(--muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis}

/* Pill sekme çubuğu — ilişkili sayfalar arası (Panel / Kâr Kaçakları / Ödemeler) ve bir sayfa
   içindeki içerik sekmeleri (Gelecek/Geçmiş Ödemeler vb.) için ortak bileşen. */
.pillnav{display:flex; gap:4px; background:var(--surface-2); border:1px solid var(--border-soft); border-radius:999px; padding:4px; width:fit-content; margin-bottom:16px; flex-wrap:wrap}
.pillnav a, .pillnav button{display:inline-flex; align-items:center; gap:6px; padding:7px 14px; border-radius:999px; font-size:.85rem; font-weight:600; color:var(--muted); border:none; background:none; cursor:pointer; font-family:inherit}
.pillnav a:hover, .pillnav button:hover{color:var(--ink); text-decoration:none}
.pillnav a.active, .pillnav button.active{background:var(--surface); color:var(--ink); box-shadow:var(--shadow-card)}

/* Pazaryeri seçici rozetleri — bağlı olan dolu renkli, bağlı olmayan dürüstçe soluk/pasif */
.mp-pills{display:flex; gap:8px; flex-wrap:wrap}
.mp-pill{display:inline-flex; align-items:center; gap:6px; padding:7px 14px; border-radius:999px; font-size:.84rem; font-weight:700; border:1px solid var(--border)}
.mp-pill.active{background:var(--brand); border-color:var(--brand); color:#fff}
.mp-pill.disabled{background:var(--surface-2); color:var(--muted); cursor:default; font-weight:600}
.mp-pill .dot{width:6px; height:6px; border-radius:50%}
.mp-pill.active .dot{background:#fff}
.mp-pill.disabled .dot{background:var(--muted)}

/* Ödeme listesi satırları */
.paylist{display:flex; flex-direction:column}
.payrow{display:flex; justify-content:space-between; align-items:center; gap:10px; padding:12px 0; border-bottom:1px solid var(--border-soft)}
.payrow:last-child{border-bottom:none}
.payrow .pd{display:flex; align-items:center; gap:10px}
.payrow .date{font-weight:700; font-family:'Space Grotesk',sans-serif; min-width:84px}
.payrow .amt{font-family:'Space Grotesk',sans-serif; font-weight:700}
.mp-panel{background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-lg); padding:16px; box-shadow:var(--shadow-card)}
.mp-panel-head{display:flex; align-items:center; gap:9px; font-weight:700; margin-bottom:10px; padding-bottom:10px; border-bottom:1px solid var(--border-soft)}
.mp-panel-head .logo-dot{width:9px; height:9px; border-radius:3px}
.mp-panel.disabled{display:flex; align-items:center; justify-content:center; min-height:140px; color:var(--muted); font-size:.88rem; text-align:center}
.mp-grid{display:grid; grid-template-columns:1.4fr 1fr 1fr; gap:14px}
@media(max-width:860px){.mp-grid{grid-template-columns:1fr}}