/* Uygulama kabuğu: topbar, sekmeler, grid iskeleti */
/* ---------- app shell ---------- */
.topbar{
  position:sticky;top:0;z-index:40;background:rgba(251,247,239,.86);backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line);
}
.topbar-in{max-width:1180px;margin:0 auto;padding:14px 24px;display:flex;align-items:center;gap:16px}
.brand{display:flex;align-items:center;gap:10px;font-family:var(--font-display);font-weight:700;font-size:19px}
.brand svg{width:34px;height:34px}
.brand small{font-family:var(--font-body);font-weight:800;font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink3);align-self:flex-end;margin-bottom:3px}
.topbar .spacer{flex:1}
.seg{display:flex;background:var(--bg2);border:1px solid var(--line);border-radius:12px;padding:3px;gap:2px}
.seg button{border:none;background:transparent;border-radius:9px;padding:6px 13px;font-size:13px;font-weight:800;color:var(--ink2)}
.seg button.on{background:var(--ink);color:#FFF8EC}
.icon-btn{border:1px solid var(--line);background:var(--card);border-radius:12px;width:36px;height:36px;display:grid;place-items:center;color:var(--ink2);transition:transform .3s}
.icon-btn:hover{color:var(--ink)}
.icon-btn.spin svg{animation:spin .8s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.updated{font-size:12px;color:var(--ink3);white-space:nowrap}

/* sekmeler */
.tabs-wrap{max-width:1180px;margin:0 auto;padding:0 24px;overflow-x:auto;scrollbar-width:none}
.tabs-wrap::-webkit-scrollbar{display:none}
.tabs{display:flex;gap:4px;padding-bottom:0}
.tabs button{
  border:none;background:transparent;font-family:var(--font-body);font-weight:800;font-size:14px;
  color:var(--ink2);padding:10px 16px 12px;border-radius:12px 12px 0 0;white-space:nowrap;
  border-bottom:2.5px solid transparent;transition:color .15s;
}
.tabs button:hover{color:var(--ink)}
.tabs button.on{color:var(--ink);border-bottom-color:var(--accent)}
.tab-section{display:none}
.tab-section.on{display:block;animation:rise .35s cubic-bezier(.2,.9,.3,1) both}

.main{max-width:1180px;margin:0 auto;padding:28px 24px 80px}
.section-t{
  font-family:var(--font-display);font-weight:600;font-size:20px;margin:38px 0 14px;
  display:flex;align-items:baseline;gap:10px;
}
.section-t small{font-family:var(--font-body);font-size:13px;font-weight:600;color:var(--ink3)}
.grid{display:grid;gap:16px}
.g4{grid-template-columns:repeat(4,1fr)}
.g2{grid-template-columns:repeat(2,1fr)}
.g3{grid-template-columns:repeat(3,1fr)}
.g23{grid-template-columns:2fr 1fr}
.g13{grid-template-columns:1fr 1.7fr}
@media(max-width:960px){.g4{grid-template-columns:repeat(2,1fr)}.g3,.g23,.g13{grid-template-columns:1fr}.g3 .card{grid-column:auto!important}}
@media(max-width:640px){.g2,.g4{grid-template-columns:1fr}.main{padding:20px 14px 60px}.updated{display:none}}

.card{
  background:var(--card);border:1px solid var(--line);border-radius:var(--radius);
  box-shadow:var(--shadow);padding:20px 22px;min-width:0;
  animation:rise .45s cubic-bezier(.2,.9,.3,1) both;
}
.card h3{font-size:12px;font-weight:800;letter-spacing:.07em;text-transform:uppercase;color:var(--ink3);margin-bottom:12px;display:flex;align-items:center;gap:8px}
.card h3 .dot{width:8px;height:8px;border-radius:50%}

/* stat tiles */
.stat .big{font-family:var(--font-display);font-weight:700;font-size:38px;line-height:1.05;letter-spacing:-.01em}
.stat .sub{font-size:13px;color:var(--ink2);margin-top:6px;font-weight:600}
.stat .sub b{color:var(--ink)}
.delta{display:inline-flex;align-items:center;gap:3px;font-size:12px;font-weight:800;border-radius:99px;padding:2px 9px;margin-left:8px;vertical-align:middle}
.delta.up{background:rgba(46,125,50,.12);color:var(--good)}
.delta.flat{background:var(--bg2);color:var(--ink2)}