body { margin:0; padding:40px 16px; background:#f0f2f5; font-family:Arial,Helvetica,sans-serif; }
  .shell { max-width:520px; margin:0 auto; background:#fff; box-shadow:0 1px 6px rgba(0,0,0,0.06); }
  .yellow-bar { background:#F5C518; padding:8px 24px; line-height:0; display:flex; align-items:center; }
  .yellow-bar span { font-size:20px; font-weight:800; color:#1A1A1A; letter-spacing:1px; line-height:35px; }
  .yellow-bar img.logo { height:28px; display:block; }
  .hero { background:#1A1A1A; padding:18px 24px 16px; }
  .hero .label { font-size:9px; font-weight:700; letter-spacing:1.5px; text-transform:uppercase; color:#F5C518; margin-bottom:5px; }
  .hero h1 { font-size:19px; font-weight:800; color:#fff; line-height:1.3; margin:0; }
  .hero .meta { font-size:10.5px; color:rgba(255,255,255,0.5); margin-top:5px; }
  .yellow-div { height:4px; background:#F5C518; }
  .body { padding:28px 28px 22px; }
  .intro { font-size:13px; color:#4a4a4a; line-height:1.7; margin:0 0 22px; font-weight:300; }
  .field { margin-bottom:14px; }
  .field label { display:block; font-size:9.5px; font-weight:700; letter-spacing:1.5px; text-transform:uppercase; color:#6B6B6B; margin-bottom:6px; }
  .field input { width:100%; box-sizing:border-box; padding:12px 14px; font-size:15px; font-family:'SF Mono','Menlo','Courier New',monospace; border:1px solid #E5E5E0; border-radius:4px; background:#FAFAF7; letter-spacing:1px; }
  .field input:focus { outline:none; border-color:#F5C518; background:#fff; }
  .field .hint { font-size:10px; color:#999; margin-top:4px; line-height:1.4; }
  .kvkk { display:flex; align-items:flex-start; gap:10px; margin:18px 0 8px; padding:12px 14px; background:#FAFAF7; border-left:3px solid #F5C518; }
  .kvkk input { margin-top:2px; flex-shrink:0; }
  .kvkk label { font-size:11px; color:#4a4a4a; line-height:1.6; font-weight:300; }
  .kvkk a { color:#1A1A1A; font-weight:600; text-decoration:underline; }
  .submit { display:block; width:100%; background:#1A1A1A; color:#fff; padding:14px 24px; border:none; border-radius:4px; font-size:13px; font-weight:600; letter-spacing:1px; text-transform:uppercase; cursor:pointer; margin-top:6px; }
  .submit:hover { background:#000; }
  .submit:disabled { opacity:0.45; cursor:not-allowed; }
  .alt { text-align:center; margin-top:18px; padding-top:18px; border-top:1px solid #E5E5E0; font-size:11px; color:#999; line-height:1.7; }
  .alt a { color:#1A1A1A; font-weight:600; text-decoration:none; border-bottom:1px solid #F5C518; }
  .footer { background:#2D2D2D; padding:14px 24px; text-align:center; }
  .footer span { font-size:9.5px; color:rgba(255,255,255,0.7); }
  .footer a { color:rgba(255,255,255,0.85); text-decoration:none; }
  .footer a:hover { color:#F5C518; }
  .footer .brand { color:#F5C518; font-weight:700; letter-spacing:0.5px; }
  .checker { border-collapse:collapse; table-layout:fixed; width:100%; }
  .checker td { height:7px; }
  .badge { display:inline-block; background:#FDF8E8; border:1px solid #F5C518; border-radius:4px; padding:3px 9px; font-size:10px; color:#92400E; font-weight:600; letter-spacing:0.5px; text-transform:uppercase; margin-bottom:14px; }
/* === DASHBOARD === */
*, *::before, *::after { box-sizing:border-box; }
  body { margin:0; padding:40px 16px; background:#f0f2f5; font-family:Arial,Helvetica,sans-serif; color:#2D2D2D; }
  .shell { max-width:1040px; margin:0 auto; background:#fff; box-shadow:0 1px 6px rgba(0,0,0,0.06); }

  .yellow-bar { background:#F5C518; padding:6px 24px; line-height:0; display:flex; align-items:center; justify-content:space-between; }
  .yellow-bar .brand { font-size:20px; font-weight:800; color:#1A1A1A; letter-spacing:1px; line-height:35px; }
  .yellow-bar .logout { font-size:10px; font-weight:700; letter-spacing:1px; text-transform:uppercase; color:#1A1A1A; text-decoration:none; line-height:35px; padding:0 8px; }
  .hero { background:#1A1A1A; padding:18px 28px 16px; }
  .hero .label { font-size:9px; font-weight:700; letter-spacing:1.5px; text-transform:uppercase; color:#F5C518; margin-bottom:5px; }
  .hero h1 { font-size:21px; font-weight:800; color:#fff; line-height:1.3; margin:0; }
  .hero .meta { font-size:10.5px; color:rgba(255,255,255,0.5); margin-top:5px; }
  .yellow-div { height:4px; background:#F5C518; }

  /* Card info strip */
  .cardinfo { display:flex; gap:24px; padding:16px 28px; background:#FAFAF7; border-bottom:1px solid #E5E5E0; flex-wrap:wrap; }
  .cardinfo .item .k { color:#999; text-transform:uppercase; letter-spacing:1px; font-weight:700; font-size:9px; margin-bottom:4px; }
  .cardinfo .item .v { color:#1A1A1A; font-weight:700; font-size:13px; font-family:'SF Mono','Menlo','Courier New',monospace; }

  /* Period selector — banka ekstresi tarzı */
  .period { display:flex; align-items:center; justify-content:space-between; padding:14px 28px; background:#1A1A1A; color:#fff; gap:16px; flex-wrap:wrap; }
  .period .nav { display:flex; align-items:center; gap:14px; }
  .period .nav button { background:rgba(245,197,24,0.15); color:#F5C518; border:1px solid rgba(245,197,24,0.4); border-radius:4px; width:32px; height:32px; font-size:14px; line-height:30px; padding:0; cursor:pointer; font-family:inherit; }
  .period .nav button:hover { background:#F5C518; color:#1A1A1A; }
  .period .nav .title { font-size:18px; font-weight:800; letter-spacing:0.5px; min-width:170px; text-align:center; }
  .period .tabs { display:flex; gap:4px; }
  .period .tabs a { font-size:10px; font-weight:700; letter-spacing:1px; text-transform:uppercase; color:rgba(255,255,255,0.65); padding:7px 12px; border-radius:3px; text-decoration:none; border:1px solid transparent; }
  .period .tabs a.on { background:#F5C518; color:#1A1A1A; }
  .period .tabs a:hover:not(.on) { background:rgba(255,255,255,0.08); color:#fff; }
  .period .pick { display:flex; gap:6px; align-items:center; }
  .period .pick select { font-family:inherit; font-size:11px; padding:6px 8px; background:#2D2D2D; color:#fff; border:1px solid #444; border-radius:3px; }

  /* Section header */
  .section { padding:22px 28px 0; }
  .section .title { display:flex; justify-content:space-between; align-items:flex-end; margin-bottom:12px; gap:12px; flex-wrap:wrap; }
  .section .title h2 { font-size:9.5px; font-weight:700; letter-spacing:1.5px; text-transform:uppercase; color:#6B6B6B; border-bottom:2px solid #F5C518; padding-bottom:3px; margin:0; }
  .section .title .meta { font-size:10px; color:#999; }

  /* Summary main (4 large KPI) */
  .sum-main { display:grid; grid-template-columns:repeat(auto-fit,minmax(170px,1fr)); gap:0; border-top:1px solid #E5E5E0; border-bottom:1px solid #E5E5E0; background:#FAFAF7; }
  .sum-main .cell { padding:20px 16px; border-right:1px solid #E5E5E0; text-align:left; position:relative; }
  .sum-main .cell:last-child { border-right:0; }
  .sum-main .cell .k { font-size:9px; font-weight:700; letter-spacing:1px; text-transform:uppercase; color:#999; margin-bottom:8px; }
  .sum-main .cell .v { font-size:24px; font-weight:800; line-height:1.1; color:#1A1A1A; font-family:'SF Mono','Menlo','Courier New',monospace; }
  .sum-main .cell .v.green { color:#16A34A; }
  .sum-main .cell .v.yellow { color:#92400E; }
  .sum-main .cell .sub { font-size:10px; color:#6B6B6B; margin-top:6px; }
  .sum-main .cell .delta { font-size:9.5px; margin-top:3px; font-weight:700; }
  .sum-main .cell .delta.up { color:#16A34A; }
  .sum-main .cell .delta.down { color:#C62828; }

  /* Summary detail (4 small metrics) */
  .sum-detail { display:grid; grid-template-columns:repeat(4,1fr); gap:0; border-bottom:1px solid #E5E5E0; background:#fff; }
  .sum-detail .cell { padding:14px 16px; border-right:1px solid #F5F5F0; }
  .sum-detail .cell:last-child { border-right:0; }
  .sum-detail .cell .k { font-size:8.5px; font-weight:700; letter-spacing:1px; text-transform:uppercase; color:#999; margin-bottom:5px; }
  .sum-detail .cell .v { font-size:14px; font-weight:700; color:#1A1A1A; font-family:'SF Mono','Menlo','Courier New',monospace; }
  .sum-detail .cell .sub { font-size:10px; color:#999; margin-top:2px; font-family:Arial,Helvetica,sans-serif; }

  /* Behavior insights */
  .behavior { display:grid; grid-template-columns:repeat(3,1fr); gap:0; border-bottom:1px solid #E5E5E0; background:#fff; }
  .behavior .cell { padding:14px 16px; border-right:1px solid #F5F5F0; display:flex; align-items:center; gap:12px; }
  .behavior .cell:last-child { border-right:0; }
  .behavior .icon { width:32px; height:32px; border-radius:50%; background:#FDF8E8; color:#92400E; font-size:14px; font-weight:800; display:flex; align-items:center; justify-content:center; flex-shrink:0; }
  .behavior .info .k { font-size:8.5px; font-weight:700; letter-spacing:1px; text-transform:uppercase; color:#999; margin-bottom:2px; }
  .behavior .info .v { font-size:13px; font-weight:700; color:#1A1A1A; }
  .behavior .info .sub { font-size:10px; color:#999; margin-top:1px; }

  /* Lifetime strip */
  .lifetime { display:grid; grid-template-columns:1.2fr 1.2fr 1fr; gap:0; background:#1A1A1A; color:#fff; padding:0; border-bottom:1px solid #E5E5E0; }
  .lifetime .cell { padding:16px 20px; border-right:1px solid rgba(255,255,255,0.08); }
  .lifetime .cell:last-child { border-right:0; text-align:right; }
  .lifetime .k { font-size:8.5px; font-weight:700; letter-spacing:1.5px; text-transform:uppercase; color:#F5C518; margin-bottom:6px; }
  .lifetime .v { font-size:18px; font-weight:800; color:#fff; font-family:'SF Mono','Menlo','Courier New',monospace; }
  .lifetime .sub { font-size:10px; color:rgba(255,255,255,0.5); margin-top:3px; font-family:Arial,Helvetica,sans-serif; }
  .lifetime .freshness { font-size:9.5px; color:rgba(255,255,255,0.55); }
  .lifetime .freshness strong { color:#F5C518; font-weight:700; }

  /* Chart */
  .chart-wrap { background:#FAFAF7; border:1px solid #E5E5E0; border-radius:4px; padding:18px; }

  /* Filter bar */
  .filter { display:flex; gap:10px; align-items:center; flex-wrap:wrap; background:#FAFAF7; border:1px solid #E5E5E0; border-left:3px solid #F5C518; padding:12px 14px; margin-bottom:14px; }
  .filter label { font-size:9px; font-weight:700; letter-spacing:1px; text-transform:uppercase; color:#6B6B6B; margin-right:4px; }
  .filter input[type=date], .filter select { padding:7px 9px; font-size:12px; border:1px solid #E5E5E0; border-radius:3px; background:#fff; font-family:inherit; }
  .filter .grow { flex:1; min-width:60px; }
  .filter .btn { padding:7px 12px; font-size:10px; font-weight:700; letter-spacing:1px; text-transform:uppercase; background:#1A1A1A; color:#fff; border:none; border-radius:3px; cursor:pointer; font-family:inherit; }
  .filter .btn.ghost { background:#fff; color:#1A1A1A; border:1px solid #1A1A1A; }

  /* Movement table */
  .moves { width:100%; border-collapse:collapse; font-size:12px; }
  .moves thead th { text-align:left; padding:10px 10px; font-size:9px; font-weight:700; letter-spacing:1px; text-transform:uppercase; color:#999; background:#FAFAF7; border-bottom:1px solid #E5E5E0; }
  .moves th.r, .moves td.r { text-align:right; }
  .moves tbody td { padding:11px 10px; border-bottom:1px solid #F5F5F0; vertical-align:middle; color:#4a4a4a; }
  .moves tbody tr:hover td { background:#FFFDF5; }
  .moves td.date { font-family:'SF Mono','Menlo','Courier New',monospace; color:#1A1A1A; font-size:12px; font-weight:600; white-space:nowrap; }
  .moves td.station { color:#1A1A1A; font-weight:600; }
  .moves td.station .city { color:#999; font-weight:400; font-size:11px; }
  .moves td.product { font-size:10px; color:#999; text-transform:uppercase; letter-spacing:0.5px; }
  .moves td.lit { font-family:'SF Mono','Menlo','Courier New',monospace; }
  .moves td.amount { font-weight:700; color:#1A1A1A; font-family:'SF Mono','Menlo','Courier New',monospace; }
  .moves td.rate { font-family:'SF Mono','Menlo','Courier New',monospace; }
  .moves td.rate .ratebox { display:inline-block; padding:2px 7px; font-size:10px; font-weight:700; background:#FDF8E8; color:#92400E; border-radius:10px; letter-spacing:0.3px; }
  .moves td.gain { color:#16A34A; font-weight:700; font-family:'SF Mono','Menlo','Courier New',monospace; }
  .moves tfoot td { padding:12px 10px; background:#1A1A1A; color:#fff; font-size:11.5px; font-weight:700; font-family:'SF Mono','Menlo','Courier New',monospace; }
  .moves tfoot td.lab { font-family:Arial,Helvetica,sans-serif; font-size:9.5px; letter-spacing:1.5px; text-transform:uppercase; color:#F5C518; }
  .moves tfoot td.gainfoot { color:#F5C518; }
  .pill { display:inline-block; padding:2px 7px; font-size:9px; font-weight:700; letter-spacing:0.5px; text-transform:uppercase; border-radius:10px; background:#FDF8E8; color:#92400E; margin-left:6px; }
  .pager { display:flex; justify-content:space-between; align-items:center; padding:10px 0 0; font-size:11px; color:#999; }
  .pager .pages a { color:#1A1A1A; text-decoration:none; padding:4px 9px; border:1px solid #E5E5E0; border-radius:3px; font-weight:600; margin-left:4px; }
  .pager .pages a.active { background:#1A1A1A; color:#fff; border-color:#1A1A1A; }

  /* CTA */
  .cta { background:#1A1A1A; border-radius:4px; padding:18px 22px; margin:22px 28px 8px; text-align:center; }
  .cta p { margin:0; color:rgba(255,255,255,0.75); font-size:12.5px; line-height:1.6; font-weight:300; }
  .cta p.strong { color:#fff; font-weight:600; font-size:13.5px; margin-top:4px; }
  .cta a { color:#F5C518; font-weight:700; text-decoration:none; }

  /* Footer */
  .footer { background:#2D2D2D; padding:14px 24px; text-align:center; }
  .footer span { font-size:9.5px; color:rgba(255,255,255,0.5); }
  .footer .brand-y { color:#F5C518; font-weight:700; letter-spacing:0.5px; }
  .checker { border-collapse:collapse; table-layout:fixed; width:100%; }
  .checker td { height:7px; }

  /* Responsive */
  @media (max-width:840px) {
    .sum-main, .sum-detail { grid-template-columns:repeat(2,1fr); }
    .sum-main .cell { border-bottom:1px solid #E5E5E0; }
    .sum-main .cell:nth-child(2) { border-right:0; }
    .sum-detail .cell { border-bottom:1px solid #F5F5F0; }
    .behavior { grid-template-columns:1fr; }
    .behavior .cell { border-right:0; border-bottom:1px solid #F5F5F0; }
    .lifetime { grid-template-columns:1fr; }
    .lifetime .cell { border-right:0; border-bottom:1px solid rgba(255,255,255,0.08); text-align:left; }
  }
  @media (max-width:600px) {
    body { padding:20px 0; }
    .shell { max-width:100%; }
    .hero h1 { font-size:18px; }
    .period { padding:12px 16px; }
    .period .nav .title { font-size:16px; min-width:140px; }
    .section { padding:18px 16px 0; }
    .cardinfo { padding:14px 16px; gap:14px; }
    .cardinfo .item .v { font-size:12px; }
    .sum-main .cell .v { font-size:18px; }
    .sum-main .cell { padding:14px 12px; }
    .moves th.hide-sm, .moves td.hide-sm { display:none; }
    .cta { margin:18px 16px 8px; }
  }