:root{
    --bg:#f7f4ee; --surface:#ffffff; --surface-2:#fbf9f4;
    --ink:#211f1b; --muted:#75716a; --faint:#a39e95;
    --line:#e6e0d5; --line-2:#d6cfc1;
    --accent:#1f6f54; --accent-soft:#e7f0ec; --accent-ink:#15503c;
    --amber:#b07016; --amber-soft:#f6ecda;
    --red:#b13b3b; --red-soft:#f6e6e4;
    --pos:#1f6f54; --neg:#b13b3b;
    --radius:12px; --radius-sm:8px;
  }
  *{box-sizing:border-box;margin:0;padding:0}
  body{
    font-family:'Hanken Grotesk',system-ui,sans-serif;
    background:var(--bg); color:var(--ink);
    font-size:15px; line-height:1.5;
    -webkit-font-smoothing:antialiased;
  }
  .wrap{max-width:980px; margin:0 auto; padding:0 20px 80px}
  header.app{
    padding:30px 0 22px; border-bottom:1px solid var(--line);
    display:flex; align-items:flex-end; justify-content:space-between; gap:16px; flex-wrap:wrap;
  }
  .brand h1{
    font-family:'Bricolage Grotesque',sans-serif; font-weight:600;
    font-size:30px; letter-spacing:-0.02em; line-height:1;
  }
  .brand p{color:var(--muted); font-size:14px; margin-top:6px}
  .brand .dot{color:var(--accent)}
  .badge-demo{
    font-size:12px; color:var(--accent-ink); background:var(--accent-soft);
    border:1px solid #cfe2d9; padding:5px 11px; border-radius:999px; font-weight:500;
  }
  nav.tabs{
    display:flex; gap:4px; margin:18px 0 26px; flex-wrap:wrap;
    border-bottom:1px solid var(--line); padding-bottom:0;
  }
  nav.tabs button{
    font-family:inherit; font-size:14px; font-weight:500; color:var(--muted);
    background:none; border:none; cursor:pointer; padding:10px 14px;
    border-bottom:2px solid transparent; margin-bottom:-1px; transition:.15s;
    border-radius:6px 6px 0 0;
  }
  nav.tabs button:hover{color:var(--ink); background:var(--surface-2)}
  nav.tabs button.active{color:var(--accent-ink); border-bottom-color:var(--accent)}
  h2.page{font-family:'Bricolage Grotesque',sans-serif; font-weight:600; font-size:21px; letter-spacing:-0.01em; margin-bottom:4px}
  .page-sub{color:var(--muted); font-size:14px; margin-bottom:22px}
  .card{
    background:var(--surface); border:1px solid var(--line); border-radius:var(--radius);
    padding:20px; margin-bottom:18px;
  }
  .card h3{font-family:'Bricolage Grotesque',sans-serif; font-weight:600; font-size:16px; margin-bottom:16px}
  .grid-form{display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:14px; align-items:end}
  label.fld{display:block; font-size:13px; color:var(--muted); font-weight:500; margin-bottom:6px}
  input,select{
    width:100%; font-family:inherit; font-size:14px; color:var(--ink);
    background:var(--surface); border:1px solid var(--line-2); border-radius:var(--radius-sm);
    padding:9px 11px; transition:.15s; height:40px;
  }
  input:focus,select:focus{outline:none; border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-soft)}
  .btn{
    font-family:inherit; font-size:14px; font-weight:600; cursor:pointer;
    background:var(--accent); color:#fff; border:none; border-radius:var(--radius-sm);
    padding:10px 18px; height:40px; transition:.15s; white-space:nowrap;
  }
  .btn:hover{background:#1a5e47}
  .btn:active{transform:scale(.985)}
  .btn.ghost{background:var(--surface); color:var(--ink); border:1px solid var(--line-2)}
  .btn.ghost:hover{background:var(--surface-2)}
  .btn.ghost.sm{height:32px; padding:5px 12px; font-size:13px; font-weight:500}
  table{width:100%; border-collapse:collapse; font-size:14px}
  th{text-align:left; font-weight:500; color:var(--muted); font-size:12.5px; padding:10px 10px; border-bottom:1px solid var(--line-2); text-transform:uppercase; letter-spacing:.03em}
  td{padding:12px 10px; border-bottom:1px solid var(--line); font-variant-numeric:tabular-nums}
  tr:last-child td{border-bottom:none}
  .num{text-align:right; font-variant-numeric:tabular-nums}
  .pos{color:var(--pos); font-weight:600}
  .neg{color:var(--neg); font-weight:600}
  .pill{display:inline-block; font-size:12px; padding:3px 10px; border-radius:999px; font-weight:500}
  .pill.in{background:var(--accent-soft); color:var(--accent-ink)}
  .pill.out{background:var(--amber-soft); color:var(--amber)}
  .pill.cat{background:#efece4; color:#6b6760}
  .pill.low{background:var(--red-soft); color:var(--red)}
  .metrics{display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:12px; margin-bottom:20px}
  .metric{background:var(--surface-2); border:1px solid var(--line); border-radius:var(--radius-sm); padding:14px 16px}
  .metric .lbl{font-size:13px; color:var(--muted); margin-bottom:5px}
  .metric .val{font-family:'Bricolage Grotesque',sans-serif; font-size:25px; font-weight:600; letter-spacing:-0.01em; font-variant-numeric:tabular-nums}
  .toast{
    position:fixed; left:50%; bottom:26px; transform:translateX(-50%) translateY(20px);
    background:var(--ink); color:#fff; padding:12px 20px; border-radius:999px; font-size:14px;
    opacity:0; pointer-events:none; transition:.25s; z-index:50; font-weight:500;
  }
  .toast.show{opacity:1; transform:translateX(-50%) translateY(0)}
  .toast.err{background:var(--red)}
  .row-top{background:var(--accent-soft)}
  .star{color:var(--accent)}
  .range-bar{display:flex; gap:14px; align-items:end; flex-wrap:wrap; margin-bottom:20px}
  .range-bar .fld-inline{display:flex; flex-direction:column}
  .empty{color:var(--faint); font-size:14px; padding:30px 0; text-align:center}
  .hint{font-size:12.5px; color:var(--faint); margin-top:8px}
  .detail-head{display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:6px}
  .x-close{background:none;border:none;cursor:pointer;color:var(--muted);font-size:13px;font-weight:500}
  .x-close:hover{color:var(--ink)}

  /* page transitions */
  @keyframes fadeUp{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}
  #content.anim{animation:fadeUp .32s cubic-bezier(.2,.7,.3,1)}
  .card{animation:fadeUp .35s cubic-bezier(.2,.7,.3,1) both}
  nav.tabs button{position:relative}
  nav.tabs button.active::after{content:'';position:absolute;left:14px;right:14px;bottom:-1px;height:2px;background:var(--accent);border-radius:2px;animation:tabin .3s ease}
  @keyframes tabin{from{transform:scaleX(0)}to{transform:scaleX(1)}}
  /* skeleton loading */
  @keyframes shimmer{0%{background-position:-400px 0}100%{background-position:400px 0}}
  .sk{height:16px;border-radius:6px;background:linear-gradient(90deg,#ece7dd 25%,#f5f1e9 37%,#ece7dd 63%);background-size:800px 100%;animation:shimmer 1.1s infinite linear;margin:10px 0}
  .sk.big{height:64px;border-radius:10px}
  .sk.w40{width:40%}.sk.w60{width:60%}.sk.w80{width:80%}
  /* login */
  #login{position:fixed;inset:0;background:radial-gradient(120% 120% at 0% 0%,#10402f 0%,#0c2a20 55%,#0a221a 100%);display:flex;align-items:center;justify-content:center;padding:20px;z-index:100}
  #login .box{width:100%;max-width:380px;background:var(--surface);border-radius:18px;padding:34px 30px;box-shadow:0 30px 80px rgba(0,0,0,.35);animation:fadeUp .5s cubic-bezier(.2,.7,.3,1)}
  #login h1{font-family:'Bricolage Grotesque',sans-serif;font-weight:600;font-size:27px;letter-spacing:-.02em}
  #login .dot{color:var(--accent)}
  #login p.sub{color:var(--muted);font-size:13.5px;margin:6px 0 24px}
  #login label{display:block;font-size:13px;color:var(--muted);font-weight:500;margin:0 0 6px}
  #login input{margin-bottom:16px}
  #login .btn{width:100%;justify-content:center;height:44px;font-size:15px}
  #login .demo-cred{margin-top:18px;font-size:12.5px;color:var(--faint);text-align:center;line-height:1.7}
  #login .err{color:var(--red);font-size:13px;margin-bottom:12px;min-height:16px}
  .icon-btn{background:none;border:1px solid var(--line-2);border-radius:8px;cursor:pointer;color:var(--muted);font-size:13px;font-weight:500;padding:7px 13px;display:inline-flex;align-items:center;gap:6px}
  .icon-btn:hover{background:var(--surface-2);color:var(--ink)}
  .head-actions{display:flex;align-items:center;gap:10px}
  .rank{display:flex;align-items:center;gap:10px;padding:11px 0;border-bottom:1px solid var(--line)}
  .rank:last-child{border-bottom:none}
  .rank .no{width:24px;height:24px;border-radius:50%;background:var(--accent-soft);color:var(--accent-ink);font-size:12px;font-weight:600;display:flex;align-items:center;justify-content:center;flex-shrink:0}
  .rank .gr{flex:1}
  .rank .ad{font-weight:500}
  .rank .meta{font-size:12.5px;color:var(--muted)}
  .rank .big-n{font-family:'Bricolage Grotesque',sans-serif;font-weight:600;font-size:18px;font-variant-numeric:tabular-nums}
  /* modal */
  .modal-overlay{position:fixed;inset:0;background:rgba(20,18,14,.45);display:flex;align-items:center;justify-content:center;padding:20px;z-index:90;animation:fadeUp .2s ease}
  .modal-box{width:100%;max-width:460px;background:var(--surface);border-radius:16px;padding:24px 24px 22px;box-shadow:0 30px 80px rgba(0,0,0,.3);animation:fadeUp .3s cubic-bezier(.2,.7,.3,1)}
  .modal-box .detail-head{margin-bottom:18px}
  .modal-box h3{font-family:'Bricolage Grotesque',sans-serif;font-weight:600;font-size:18px}
  .modal-box .row{margin-bottom:14px}
  .modal-actions{display:flex;gap:10px;justify-content:flex-end;margin-top:20px}

  /* sekme ikonları */
  nav.tabs button{display:inline-flex; align-items:center; gap:7px}
  nav.tabs button svg{width:16px; height:16px; flex-shrink:0; opacity:.85}
  nav.tabs button.active svg{opacity:1}

  /* ---- Mobil uyum ---- */
  @media (max-width:640px){
    body{font-size:14.5px}
    .wrap{padding:0 14px 60px}
    header.app{padding:20px 0 14px; align-items:flex-start; gap:12px}
    .brand h1{font-size:23px}
    .brand p{font-size:12.5px}
    .head-actions{width:100%; flex-wrap:wrap}
    /* sekmeler: tek satır, yatay kaydırılır */
    nav.tabs{flex-wrap:nowrap; overflow-x:auto; overflow-y:hidden; gap:2px; margin:12px 0 20px;
      -webkit-overflow-scrolling:touch; scrollbar-width:none; padding-bottom:1px}
    nav.tabs::-webkit-scrollbar{display:none}
    nav.tabs button{flex:0 0 auto; padding:9px 11px; font-size:13.5px}
    h2.page{font-size:19px}
    .page-sub{font-size:13px; margin-bottom:18px}
    .card{padding:16px 14px; overflow-x:auto; -webkit-overflow-scrolling:touch}
    /* geniş tablolar yatay kaydırılır, hücreler okunaklı kalır */
    table{font-size:13.5px}
    th,td{white-space:nowrap; padding:10px 8px}
    .metric .val{font-size:21px}
    .modal-box{padding:20px 18px}
    .modal-actions{flex-wrap:wrap}
    .modal-actions .btn{flex:1}
    .range-bar{gap:10px}
    .range-bar .fld-inline{flex:1; min-width:130px}
  }
  /* çok küçük ekranlar */
  @media (max-width:380px){
    .metrics{grid-template-columns:1fr 1fr}
    .brand h1{font-size:21px}
  }