:root{
  --r:#c82127;--r2:#a5141a;--dark:#531013;--ink:#261b1b;
  --muted:#756867;--bg:#f7f4f3;--card:#fff;--line:#eadfdd;
  --green:#158457;--amber:#d98718;--shadow:0 10px 34px rgba(70,25,22,.08)
}
html,body{width:100%;max-width:100%;overflow-x:hidden}
body{background:linear-gradient(145deg,#faf8f7,#f4eeee);font-family:Inter,Segoe UI,system-ui,sans-serif}
#app{min-height:100vh}
header{
  height:72px;padding:0 22px;background:rgba(255,255,255,.96);
  backdrop-filter:blur(16px);box-shadow:0 1px 0 var(--line);
}
header img{width:48px;height:48px;border-radius:14px;object-fit:cover}
header b{font-size:18px;letter-spacing:-.2px}
.menu{cursor:pointer;font-weight:750;color:var(--r)}
.layout{grid-template-columns:278px minmax(0,1fr)}
nav{
  background:linear-gradient(180deg,#9f151b 0%,#711015 100%);
  padding:18px 12px;box-shadow:8px 0 30px rgba(79,12,15,.12);
  overflow-y:auto;position:sticky;top:72px;height:calc(100vh - 72px)
}
nav .nav-group{
  padding:18px 12px 7px;color:rgba(255,255,255,.58);
  font-size:10px;font-weight:800;letter-spacing:1.25px
}
nav button{
  display:flex;align-items:center;gap:11px;padding:11px 13px;margin:3px 0;
  border:1px solid transparent;border-radius:12px;font-size:14px;transition:.18s
}
nav button .nav-icon{width:22px;text-align:center;font-size:16px}
nav button:hover{background:rgba(255,255,255,.1)}
nav button.active{
  background:#fff;color:var(--r);box-shadow:0 8px 20px rgba(60,0,0,.18);
  border-color:rgba(255,255,255,.4)
}
main{width:100%;min-width:0;max-width:1600px;margin:0 auto;padding:28px}
main>*{max-width:100%}
.head{gap:15px;flex-wrap:wrap;margin-bottom:22px}
.head h2{font-size:26px;letter-spacing:-.5px}
.sub{font-size:13px}
.card{
  border:1px solid rgba(220,202,199,.75);border-radius:19px;
  box-shadow:var(--shadow);background:rgba(255,255,255,.96)
}
.cards{grid-template-columns:repeat(4,minmax(0,1fr));gap:15px}
.metric{font-size:clamp(22px,2.2vw,31px);letter-spacing:-.7px}
.pill{display:inline-flex;align-items:center;white-space:nowrap}
.primary,.action{background:linear-gradient(135deg,var(--r),var(--r2));box-shadow:0 7px 18px rgba(200,33,39,.2)}
.secondary{font-weight:700;color:#5d4b49}
.field,.search{max-width:100%;background:#fff}
.grid{grid-template-columns:repeat(2,minmax(0,1fr))}
.table{width:100%;max-width:100%;overflow-x:auto;overscroll-behavior-inline:contain;box-shadow:var(--shadow)}
.table table{width:100%;min-width:780px}
.table th{position:sticky;top:0;background:#fbf8f7;z-index:1;letter-spacing:.35px}
.table td,.table th{white-space:nowrap}
.table td:first-child,.table th:first-child{white-space:normal}
.chart-card{padding:20px;overflow:hidden}
.svg-chart{display:block;width:100%;height:auto;min-height:220px}
.chart-grid{stroke:#eadfdd;stroke-width:1}
.chart-area{fill:rgba(200,33,39,.09)}
.chart-line{fill:none;stroke:var(--r);stroke-width:4;stroke-linecap:round;stroke-linejoin:round}
.chart-dot{fill:#fff;stroke:var(--r);stroke-width:3}
.chart-label{font:11px Segoe UI,sans-serif;fill:#847472}
.chart-value{font:700 11px Segoe UI,sans-serif;fill:#4f3b3a}
.chart-title{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:8px}
.chart-title h3{margin:0 0 3px}.chart-title small{color:var(--muted)}
.kpi{position:relative;overflow:hidden}.kpi:after{content:"";position:absolute;right:-25px;top:-30px;width:90px;height:90px;border-radius:50%;background:currentColor;opacity:.055}
.kpi.red{color:var(--r)}.kpi.green{color:var(--green)}.kpi.amber{color:var(--amber)}
.kpi small,.kpi p{color:var(--muted)}.kpi .metric{color:var(--ink)}
.h-bars{display:grid;gap:13px;margin:18px 0 7px}
.h-row{display:grid;grid-template-columns:minmax(95px,145px) minmax(100px,1fr) auto;align-items:center;gap:10px;font-size:12px}
.h-row>span{font-weight:700;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.h-row>div{height:10px;background:#f0e7e5;border-radius:20px;overflow:hidden}
.h-row i{display:block;height:100%;min-width:4px;border-radius:20px}
.h-row b{min-width:64px;text-align:right}.no-chart{padding:50px 15px;text-align:center;color:var(--muted)}
.login-card,#login form{border:1px solid #eadad8;box-shadow:0 30px 90px rgba(82,20,18,.16)}
#login .bird{width:92px;height:92px;border-radius:24px;object-fit:cover}
.chat{box-shadow:var(--shadow)}
.order-row{min-width:0}
@media(max-width:1100px){
  .cards{grid-template-columns:repeat(2,minmax(0,1fr))}
  .wide{grid-column:span 2}
}
@media(max-width:850px){
  header{height:66px;padding:0 14px}
  header img{width:42px;height:42px}
  .layout{display:block;min-height:calc(100vh - 66px)}
  nav{
    display:block;position:fixed;z-index:30;inset:66px auto 0 0;
    width:min(86vw,330px);height:calc(100vh - 66px);
    transform:translateX(-105%);transition:transform .24s ease;
    border-radius:0 20px 20px 0
  }
  nav.open{display:block;transform:translateX(0)}
  main{padding:17px 13px 28px}
  .head h2{font-size:23px}
  .grid{grid-template-columns:1fr}
  .modal-card{padding:18px}
  .order-row{grid-template-columns:minmax(0,1fr) 78px}
  .order-row label:nth-child(3){grid-column:1}
  .order-row .danger{grid-column:2;grid-row:2}
  .chat-form{grid-template-columns:minmax(0,1fr) auto}
}
@media(max-width:520px){
  .cards{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  .card{padding:14px;border-radius:15px}
  .wide{grid-column:span 2}
  .metric{font-size:21px}
  .head{align-items:flex-start}
  .head .tools{width:100%}
  .search{width:100%;min-width:0}
  .table{border-radius:14px}
  .table table{min-width:650px}
  .suggestions{flex-wrap:nowrap;overflow-x:auto;padding-bottom:5px}
  .suggestions button{flex:0 0 auto}
  .bubble{max-width:94%}
  .svg-chart{min-height:170px}
  .h-row{grid-template-columns:90px minmax(80px,1fr) auto}
}

/* v2 gelişmiş yönetim ve mobil okunabilirlik */
header .menu{order:-1;margin-left:0;display:inline-flex;align-items:center;gap:5px}
header>div{min-width:0}header>div b{white-space:nowrap}header>div span{white-space:nowrap}
main{overflow:hidden}.head-tools,.period-tools{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.period-tools .search{min-width:118px}.head-tools{justify-content:flex-end}
.loading{color:var(--muted);text-align:center;padding:45px}
.live-pill{background:#fff1f1;color:var(--r);font-weight:800}.live-pill i,.live-dot{display:inline-block;width:9px;height:9px;border-radius:50%;background:#ef343a;box-shadow:0 0 0 5px rgba(239,52,58,.12);animation:livePulse 1.8s infinite}
@keyframes livePulse{50%{box-shadow:0 0 0 8px rgba(239,52,58,0)}}
.trend-kpi{background:linear-gradient(150deg,#fff,#fff8f8);border-color:#f3d7d7}
.trend-head{display:flex;align-items:center;justify-content:space-between;gap:10px}.trend-head small{display:flex;align-items:center;gap:8px;color:var(--muted);font-weight:750}.trend-head b{font-size:14px}.trend-head .up{color:#19a06a}.trend-head .down{color:#ef343a}
.hero-number{font-size:clamp(30px,4vw,46px);font-weight:900;letter-spacing:-1.4px;margin:13px 0 4px;color:var(--ink)}
.dashboard-lower{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(280px,.65fr);gap:15px;margin-top:15px}
.attention{background:linear-gradient(145deg,#fff9ee,#fff);border-color:#f0dfbf}.attention h3{color:#8c5b0e}
.rank-list{display:grid;gap:11px}.rank-row{display:grid;grid-template-columns:28px minmax(0,1fr) auto;gap:10px;align-items:center}.rank-no{width:25px;height:25px;display:grid;place-items:center;border-radius:8px;background:#f8e8e7;color:var(--r);font-size:12px}.rank-main{min-width:0}.rank-main strong{font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:block}.rank-track{height:5px;background:#f0e7e5;border-radius:9px;margin-top:6px;overflow:hidden}.rank-track i{display:block;height:100%;border-radius:9px;background:linear-gradient(90deg,var(--r),#f0676b)}.rank-row>span{font-size:12px;font-weight:800;white-space:nowrap}
.order-card{max-width:1050px;margin:auto}.order-customer-grid{grid-template-columns:180px minmax(240px,1fr)}.field-help{display:block;color:var(--muted);font-weight:500;margin-top:6px}.section-title{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-top:20px}
.analytics-grid{margin:15px 0}.responsive-list{display:grid}.data-row{display:grid;grid-template-columns:30px minmax(160px,1.5fr) repeat(3,minmax(95px,.55fr));gap:12px;align-items:center;padding:13px 5px;border-bottom:1px solid var(--line);font-size:13px}.data-row>div{min-width:0}.data-row strong,.data-row small{display:block}.data-row small{color:var(--muted);margin-top:2px}.positive{color:var(--green);font-weight:800}.negative{color:var(--r);font-weight:800}
.score{display:inline-flex;align-items:center;justify-content:center;padding:6px 9px;border-radius:20px;font-size:12px;font-weight:900;white-space:nowrap}.score.excellent{background:#dff6ea;color:#11714a}.score.good{background:#e9f1ff;color:#315f9d}.score.watch{background:#fff1d9;color:#9a6110}.score.risk{background:#ffe7e6;color:#ae2429}
.category-cards,.channel-cards{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:15px;margin-top:15px}.card-top{display:flex;align-items:center;justify-content:space-between;gap:12px}.card-top h3,.card-top b{margin:0}.card-top>span{font-size:12px;color:var(--muted);white-space:nowrap}
.mini-metrics{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:9px;margin-top:14px}.mini-metrics span{padding:10px;background:#faf7f6;border-radius:11px}.mini-metrics small,.mini-metrics b{display:block}.mini-metrics small{color:var(--muted);font-size:10px}.mini-metrics b{font-size:14px;margin-top:4px}.channel-card .mini-metrics{grid-template-columns:repeat(3,minmax(0,1fr))}.channel-card h4{margin-bottom:10px}
.report-head{background:linear-gradient(135deg,#b0161c,#d52128);color:#fff;margin:-28px -28px 18px;padding:20px 28px}.report-head .sub{color:#ffe8e8}.report-head .search{border:0}
.product-report{display:grid;gap:8px}.report-row{display:grid;grid-template-columns:minmax(260px,1.1fr) minmax(280px,.8fr) minmax(440px,1.5fr);gap:12px;align-items:center;padding:13px 15px;background:#fff;border:1px solid var(--line);border-radius:14px;box-shadow:0 3px 10px rgba(70,25,22,.04)}
.report-product{display:grid;grid-template-columns:26px minmax(0,1fr) auto;gap:9px;align-items:center;min-width:0}.report-product>div{min-width:0}.report-product strong,.report-product small{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.report-product small{color:var(--muted);margin-top:3px}.report-totals,.report-channels{display:grid;gap:6px}.report-totals{grid-template-columns:repeat(3,1fr)}.report-channels{grid-template-columns:repeat(4,1fr)}.report-totals span,.report-channels span{padding:7px;background:#faf7f6;border-radius:9px;min-width:0}.report-row small,.report-row b,.report-row em{display:block}.report-row small{font-size:9px;color:var(--muted);text-transform:uppercase}.report-row b{font-size:12px;margin-top:3px}.report-row em{font-size:11px;color:var(--muted);font-style:normal;margin-top:2px}
.matrix{display:grid;gap:8px}.matrix-row{display:grid;grid-template-columns:minmax(190px,260px) minmax(0,1fr);gap:12px;padding:12px;background:#fff;border:1px solid var(--line);border-radius:13px}.matrix-name{min-width:0;align-self:center}.matrix-name strong,.matrix-name small{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.matrix-name small{color:var(--muted);margin-top:4px}.matrix-months{display:grid;grid-template-columns:repeat(12,minmax(38px,1fr));gap:4px}.matrix-months span{text-align:center;padding:7px 2px;border-radius:8px;background:#f7f3f2}.matrix-months span.has-sale{background:#ffe3e4;color:#a6161c}.matrix-months small,.matrix-months b{display:block}.matrix-months small{font-size:8px}.matrix-months b{font-size:12px;margin-top:3px}
.executive-hero{display:flex;justify-content:space-between;align-items:center;background:linear-gradient(135deg,#7d0d12,#c82127);color:#fff;border:0}.executive-hero p,.executive-hero small{color:#ffe2e2}.executive-hero .hero-number{color:#fff}.executive-profit{text-align:right}.executive-profit b{display:block;font-size:30px;margin-top:7px}
.task-list{display:grid;gap:12px;margin-top:15px}.task-card{display:grid;grid-template-columns:44px minmax(0,1fr);gap:13px}.task-card.high,.task-card.critical{border-left:5px solid var(--r)}.task-icon{width:42px;height:42px;display:grid;place-items:center;background:#f8e8e7;color:var(--r);border-radius:12px;font-weight:900;font-size:19px}.task-card h3{margin:0}.task-card p{margin:8px 0}.task-actions{display:flex;gap:8px;flex-wrap:wrap}.ai-details{margin-top:18px}.ai-details summary{cursor:pointer;font-weight:850;display:flex;align-items:center;justify-content:space-between;gap:12px;list-style:none}.ai-details[open] summary{margin-bottom:18px}

@media(max-width:1250px){
  .product-report .report-row{grid-template-columns:minmax(240px,1fr) minmax(260px,1fr)}.report-channels{grid-column:1/-1}
}
@media(max-width:1000px){
  .dashboard-lower,.category-cards,.channel-cards{grid-template-columns:1fr}
  .data-row{grid-template-columns:26px minmax(150px,1fr) repeat(2,minmax(80px,.5fr))}.data-row>span:last-child{grid-column:2/-1;text-align:right}
  .matrix-row{grid-template-columns:1fr}.matrix-months{grid-template-columns:repeat(6,1fr)}
}
@media(max-width:850px){
  header{justify-content:flex-start}header .menu{flex:0 0 auto}header>div{margin-right:auto}
  .report-head{margin:-17px -13px 16px;padding:18px 14px}
  .head-tools{width:100%;justify-content:stretch}.head-tools>.search,.head-tools>.period-tools{flex:1}.period-tools{width:100%}.period-tools .search{flex:1}
  .product-report .report-row{grid-template-columns:1fr}.report-channels{grid-column:auto}
}
@media(max-width:620px){
  .cards.dashboard-kpis{grid-template-columns:1fr}.dashboard-kpis .wide{grid-column:auto}
  .order-customer-grid{grid-template-columns:1fr}
  .mini-metrics{grid-template-columns:repeat(2,1fr)}.channel-card .mini-metrics{grid-template-columns:repeat(3,1fr)}
  .data-row{grid-template-columns:24px minmax(0,1fr) auto;padding:12px 0}.data-row>span{grid-column:2/4;text-align:right}.data-row>span:last-child{grid-column:2/4}
  .report-totals{grid-template-columns:repeat(3,1fr)}.report-channels{grid-template-columns:repeat(2,1fr)}
  .matrix-months{grid-template-columns:repeat(4,1fr)}
  .executive-hero{align-items:flex-start;flex-direction:column}.executive-profit{text-align:left}
  .svg-chart{min-width:0!important}
}
@media(max-width:700px){
  .table{overflow:visible;border:0;background:transparent;box-shadow:none}
  .table table,.table tbody,.table tr{display:block;width:100%;min-width:0}
  .table thead{display:none}
  .table tr{margin-bottom:10px;padding:8px 12px;background:#fff;border:1px solid var(--line);border-radius:13px;box-shadow:0 4px 14px rgba(70,25,22,.05)}
  .table td{display:grid;grid-template-columns:minmax(90px,40%) minmax(0,1fr);gap:10px;align-items:center;padding:8px 0;white-space:normal;border-bottom:1px dashed #eee2e0;text-align:right}
  .table td:last-child{border-bottom:0}.table td:before{content:attr(data-label);font-size:10px;font-weight:850;color:var(--muted);text-align:left}
  .table td[colspan]{display:block;text-align:center}.table td[colspan]:before{display:none}
}
@media(max-width:420px){
  header img{display:none}header b{font-size:15px}
  .cards{grid-template-columns:1fr}.wide{grid-column:auto}
  .channel-card .mini-metrics,.report-totals{grid-template-columns:1fr}
  .report-product{grid-template-columns:25px minmax(0,1fr)}.report-product .score{grid-column:2;justify-self:start}
}