:root{
  color-scheme: light;
  --page-gutter: 80px;
  --bg:#f9f9f9; --panel:#fff; --text:#111; --muted:#6b7280;
  --brand:#f27a1a; --primary:#1e2d3d; --shadow:0 2px 8px rgba(0,0,0,.1);
  --input-bg:#fff; --input-border:#cbd5e1;
  --box-bg:#eef2f8; --box-text:#0f172a;
  --card-border:#e5e7eb;
  --chip-bg:#f8fafc; --chip-border:#cbd5e1; --chip-active:#fde68a;
  --toolbar-bg:#f8fafc;
  --market-chip-bg:#f27a1a; --market-chip-border:#d96b17; /* varsayılan Trendyol */
}
html{box-sizing:border-box}
@media (min-width: 921px){
  html{ zoom: 0.85; }
}
*,*::before,*::after{box-sizing:inherit}
    html,body{
      height:100%; margin:0; background:var(--bg); color:var(--text);
      font-family:Arial,Helvetica,sans-serif; font-weight:300; overflow-x:hidden;
      -webkit-text-size-adjust:100%; -webkit-tap-highlight-color:transparent;
      scrollbar-gutter: stable;
    }
    body{ transition: background-color .22s ease, color .22s ease, border-color .22s ease }
    @media (max-width: 920px){ :root{ --page-gutter: 16px; } }

    .login-modal-overlay{
      position:fixed;
      top:0;
      left:0;
      right:0;
      bottom:0;
      background:rgba(15, 23, 42, 0.35);
      backdrop-filter:blur(6px) saturate(120%);
      -webkit-backdrop-filter:blur(6px) saturate(120%);
      display:none;
      justify-content:center;
      align-items:center;
      z-index:9999;
    }
    .login-modal{
      background:#fff;
      border-radius:12px;
      box-shadow:0 10px 40px rgba(0,0,0,.2);
      width:100%;
      max-width:400px;
      padding:0;
      overflow:hidden;
    }
    .login-header{
      background:linear-gradient(135deg,#1e2d3d 0%,#f27a1a 100%);
      color:#fff;
      padding:20px;
      text-align:center;
    }
    .login-header h2{margin:0; font-size:22px; font-weight:600}
    .login-body{padding:30px 25px}
    .login-message{text-align:center; color:#666; margin:0 0 20px}
    .login-group{margin-bottom:20px}
    .login-group label{display:block; margin-bottom:8px; font-weight:500; color:#333; font-size:14px}
    .login-group input{transition:border-color .2s}
    .login-group input:focus{outline:none; border-color:#f27a1a !important; box-shadow:0 0 0 3px rgba(242,122,26,.1)}
    #passwordInput{width:100%; padding:10px; border:1px solid #cbd5e1; border-radius:6px; font-size:14px}
    .login-remember{display:flex; align-items:center; gap:8px; margin:15px 0}
    .login-remember input{width:18px; height:18px; cursor:pointer}
    .login-remember label{margin:0; cursor:pointer; font-size:14px; color:#374151}
    .login-button{
      width:100%;
      padding:12px;
      background:linear-gradient(135deg,#f27a1a 0%,#d96b17 100%);
      color:#fff;
      border:none;
      border-radius:6px;
      font-size:15px;
      font-weight:600;
      cursor:pointer;
      transition:all .3s;
    }
    .login-button:hover{transform:translateY(-2px); box-shadow:0 5px 15px rgba(242,122,26,.3)}
    .login-button:active{transform:translateY(0)}
    .login-error{display:none; color:#dc2626; text-align:center; margin-top:10px; font-size:13px; animation:login-shake .3s ease-in-out}
    @keyframes login-shake{0%,100%{transform:translateX(0)}25%{transform:translateX(-5px)}75%{transform:translateX(5px)}}

    .header{text-align:center;padding:12px 8px 4px}
    .header h1{color:var(--brand);margin:6px 0 8px;font-weight:700;font-size:clamp(18px,3.4vw,24px)}

    .container{position:relative; z-index:1; max-width:2600px; width:min(2600px, calc(100vw - (var(--page-gutter) * 2)));margin:0 auto 16px;background:var(--panel);padding:15px;border-radius:10px;box-shadow:var(--shadow)}
    .toolbar{
      margin:0 0 12px; padding:10px; background:var(--toolbar-bg);
      border:1px solid var(--card-border); border-radius:10px; display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:10px;
      transition:background-color .22s ease,border-color .22s ease;
    }
    .toolbar.compact{ max-width:980px; margin-inline:auto; padding:8px 10px; gap:10px; justify-content:center }
    .toolbar.compact .rate input{ width:120px; padding:6px 8px; font-size:12px }
    .toolbar.compact .eur-info{ padding:4px 8px; font-size:12px }
    .toolbar.compact .usd-info{ padding:4px 8px; font-size:12px }
    .toolbar.compact .btn{ padding:8px 10px; font-size:12px }
    .toolbar.compact .market .mselect{ height:32px }

    .rate{display:flex; align-items:center; gap:8px; font-size:13px; color:#374151; flex-wrap:wrap}
    .rate input{width:140px; padding:8px 10px; border:1px solid var(--input-border); border-radius:10px; background:#fff; font-size:13px}
    .eur-info{display:inline-flex; align-items:center; gap:6px; font-weight:800; padding:6px 10px; border-radius:10px; background:#eef2ff; border:1px solid #c7d2fe; color:#1e3a8a}
    .usd-info{display:inline-flex; align-items:center; gap:6px; font-weight:800; padding:6px 10px; border-radius:10px; background:#ecfdf5; border:1px solid #a7f3d0; color:#065f46}

    .btn{padding:10px 14px; border:none; border-radius:10px; cursor:pointer; font-weight:700}
    .btn-warn{background:#ef4444; color:#fff}
    .btn-ghost{background:#e5e7eb; color:#111}

    .switch{display:flex; align-items:center; gap:8px}
    .switch input{ position:absolute; opacity:0; width:0; height:0 }
    .switch .slider{ width:46px; height:26px; border-radius:999px; background:#e5e7eb; box-shadow: inset 0 0 0 1px var(--card-border); position:relative; cursor:pointer; transition:background .25s ease }
    .switch .slider::after{ content:""; position:absolute; left:2px; top:2px; width:22px; height:22px; background:#fff; border-radius:999px; box-shadow:0 1px 2px rgba(0,0,0,.2); transition: transform .25s ease }
    .switch input:checked + .slider{ background:#f59e0b }
    .switch input:checked + .slider::after{ transform: translateX(20px) }
    .switch .label{font-size:13px; color:#374151; font-weight:700}

    .market{display:flex; align-items:center; gap:8px}
    .market-tabs-visible{display:flex; visibility:visible; opacity:1}
    .market-visible{display:flex; align-items:center; visibility:visible; opacity:1}
    .logout-fixed-visible{display:inline-flex}
    .market .mlabel{ font-weight:800; color:#374151; font-size:13px }
    .mwrap{ position:relative }
    .mselect{ display:flex; align-items:center; gap:8px; padding:6px 10px; border-radius:10px; border:1px solid var(--input-border); background:#fff; cursor:pointer; min-width:210px; user-select:none }
    .mselect .micon{ width:18px; height:18px; border-radius:3px; object-fit:contain; background:#fff }
    .mselect .mname{ font-weight:700; font-size:13px }
    .mselect .caret{ margin-left:auto; font-size:12px; color:#6b7280 }
    .mlist{ position:absolute; top:calc(100% + 6px); left:0; z-index:20; list-style:none; margin:0; padding:6px; background:#fff; border:1px solid var(--card-border); border-radius:10px; box-shadow:var(--shadow); min-width:220px }
    .mlist[hidden]{ display:none }
    .mitem{ display:flex; align-items:center; gap:8px; padding:8px; border-radius:8px; cursor:pointer }
    .mitem:hover{ background:#f3f4f6 }
    .mitem .micon{ width:16px; height:16px; border-radius:3px; object-fit:contain; background:#fff }
    .mitem .mtext{ font-size:13px; font-weight:700 }

    .layout{ display:grid; grid-template-columns: minmax(330px,1fr) minmax(0,980px) minmax(330px,1fr); grid-template-areas: "left middle right"; gap:18px; align-items:start }
    @media (min-width:1700px){ .layout{ grid-template-columns: minmax(420px,1fr) minmax(0,980px) minmax(420px,1fr); } }
    .layout.simple{ grid-template-columns: 1fr; grid-template-areas: "middle" }
    .layout.simple .left, .layout.simple .right{ display:none !important }
    .layout.simple .middle{ max-width:980px; margin-inline:auto }

    .left{grid-area:left}
    .right{grid-area:right}

    .middle{ grid-area:middle; display:grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); grid-template-areas:"calcA calcB" "results results"; gap:8px }
    .calcA{grid-area:calcA}
    .calcB{grid-area:calcB}
    .resultsWrap{grid-area:results; margin-top:0}

    /* Dar görünümde alt alta yerine yatay kaydırma */
    @media (max-width:1400px){
      body{ overflow-x:auto; }
      .container{ overflow-x:auto; }
      .layout{ min-width:1200px; }
    }


    .picker{background:#fafafa; border:1px solid var(--card-border); border-radius:12px; padding:14px; box-shadow:0 1px 4px rgba(0,0,0,.08)}
    .picker-header{display:flex; align-items:center; justify-content:space-between; margin-bottom:6px; gap:10px; flex-wrap:nowrap}
    .p-title{font-weight:800; color:var(--primary); margin:0; display:flex; align-items:center; gap:8px; white-space:nowrap; flex-shrink:0}
    .groups{display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:14px}
      @media (max-width: 1100px){ .groups{grid-template-columns:1fr;} }
    .group{border:1px solid #e5e7eb; border-radius:10px; padding:10px; background:#fff; overflow:visible}
    .g-title{font-size:13px; color:#6b7280; font-weight:700}
    .item{display:flex; flex-wrap:nowrap; align-items:flex-start; justify-content:space-between; gap:8px; padding:8px 10px; border:1px solid var(--chip-border); border-radius:14px; background:var(--chip-bg); cursor:pointer; user-select:none; overflow:visible}
    .items-unified{display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:10px; width:100%}
    @media (max-width: 1200px){ .items-unified{grid-template-columns:1fr;} }
    .groups-unified{display:block; width:100%}
    .iname{font-size:13px; line-height:1.25; white-space:normal; overflow:visible; text-overflow:clip; flex:1 1 auto; display:block; max-width:none; word-break:break-word}
    .qty{flex:0 0 auto; min-width:28px; text-align:center; padding:3px 6px; border-radius:999px; background:#fff; border:1px solid var(--chip-border); font-size:11px; font-weight:800; white-space:nowrap}
    .item.active{border-color:#f59e0b; background:var(--chip-active)}
    .hint{font-size:11px; color:#6b7280; margin-top:6px}

    /* Picker search ve filtreleri */
    .picker-search{width:100%; padding:8px 10px; margin:8px 0; border:1px solid var(--input-border); border-radius:8px; background:var(--input-bg); font-size:13px; color:var(--text); outline:none; transition:border-color .2s ease, box-shadow .2s ease}
    .picker-search:focus{border-color:#f27a1a; box-shadow:0 0 0 2px rgba(242,122,26,.1)}
    .picker-favorites-toggle{display:flex; align-items:center; gap:7px; cursor:pointer; font-size:15px; color:#6b7280; user-select:none; transition:color .2s ease; white-space:nowrap; padding:5px 10px; border-radius:6px; font-weight:600; margin-left:auto; flex-shrink:0}
    .picker-favorites-toggle input{cursor:pointer; accent-color:#f59e0b; width:17px; height:17px}
    .picker-favorites-toggle:hover{color:var(--primary); background:rgba(242,122,26,.05)}
    .picker-favorites-toggle input:checked + span{color:#f59e0b; font-weight:700}
    @media (max-width: 900px){
      .picker-header{flex-wrap:wrap}
      .picker-favorites-toggle{margin-left:0}
    }
    /* Picker sayfalama */
    .picker-pagination{display:flex; align-items:center; justify-content:space-between; gap:8px; margin:10px 0; flex-wrap:wrap; width:100%}
    .page-info{font-size:12px; color:#6b7280; font-weight:700}
    .page-buttons{display:flex; gap:6px; flex-wrap:wrap}
    .page-btn{border:1px solid var(--input-border); background:var(--input-bg); color:var(--text); padding:4px 8px; border-radius:8px; font-size:12px; cursor:pointer}
    .page-btn:hover{border-color:#f59e0b; color:#b45309}
    .page-btn.active{border-color:#f59e0b; background:rgba(245,158,11,.12); font-weight:800}
    .page-dots{color:#9ca3af; font-weight:700; padding:0 2px}

    .urun{background:#fafafa;padding:15px;border-radius:8px;box-shadow:0 1px 4px rgba(0,0,0,.08); border:1px solid var(--card-border)}
    .urun-title{display:flex;align-items:center;justify-content:space-between;gap:8px;margin:0 0 10px}
    .urun-title .leftx{display:flex;align-items:center;gap:8px; font-weight:800; color:var(--primary)}
    .adet-wrap{display:inline-flex;gap:6px;flex-wrap:wrap}
    .adetA,.adetB{ padding:4px 10px;font-size:12px;border-radius:999px;border:1px solid var(--input-border); background:var(--input-bg);color:var(--text);cursor:pointer;user-select:none }
    .adetA.active,.adetB.active{border-color:var(--brand);background:rgba(242,122,26,.08)}
    .calc-form-contents{display:contents}

    label{font-weight:600;display:block;margin-top:10px;color:var(--muted)}
    .label-mt-10{margin-top:10px}
    input{width:100%;padding:12px;margin-top:6px;border:1px solid var(--input-border);border-radius:10px; font-size:16px;background:var(--panel);color:var(--text)}
    input::placeholder{color:#94a3b8;font-style:italic}
    input[type=number]::-webkit-outer-spin-button,input[type=number]::-webkit-innerspin-button{-webkit-appearance:none;margin:0}
    input[type=number]{-moz-appearance:textfield}
    input:focus-visible{outline:3px solid #60a5fa;outline-offset:2px;border-color:#60a5fa}

    .preset-row{display:flex;gap:6px;flex-wrap:wrap;margin-top:6px}
    .preset{ padding:6px 10px;border-radius:999px;border:1px solid var(--chip-border); background:var(--chip-bg); cursor:pointer; font-size:12px; user-select:none }
    .preset.active{background:#fff7ed; border-color:#f59e0b}

    .results{ display:grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap:16px; align-items:stretch }
    @media (max-width:900px){ .results{ grid-template-columns: repeat(2, minmax(0,1fr)) } }
    @media (max-width:620px){ .results{ grid-template-columns: 1fr } }

    .result-box{ position:relative; display:flex; flex-direction:column; justify-content:flex-start; align-items:stretch; padding:28px 15px 15px; border-radius:10px;background:var(--panel);border:1px solid var(--card-border) }
    .result-hidden{display:none}

    .letter-pin{ position:absolute; left:50%; top:0; transform:translate(-50%,-50%); min-width:52px; height:44px; padding:0 12px; border-radius:999px; background:#fff; border:2px solid var(--card-border); display:flex; align-items:center; justify-content:center; font-weight:900; color:#1e2d3d; box-shadow:0 2px 6px rgba(0,0,0,.08); z-index:2; user-select:none; pointer-events:none; letter-spacing:.2px }
    .letter-pin.pin-a{ border-color:#f27a1a; color:#f27a1a; box-shadow:0 2px 6px rgba(0,0,0,.08), 0 0 0 4px rgba(242,122,26,.12); background:linear-gradient(180deg,#fff 0%, #fff7f0 100%) }
    .letter-pin.pin-b{ border-color:#1e2d3d; color:#1e2d3d; box-shadow:0 2px 6px rgba(0,0,0,.08), 0 0 0 4px rgba(30,45,61,.12); background:linear-gradient(180deg,#fff 0%, #f3f6fa 100%) }
    .letter-pin.pin-ab{ border-color:#059669; color:#059669; background:linear-gradient(180deg,#fff 0%, #effaf6 100%); box-shadow:0 2px 6px rgba(0,0,0,.08), 0 0 0 4px rgba(5,150,105,.16), 0 0 0 8px rgba(242,122,26,.14) }

    .inline-pin{ display:inline-flex; align-items:center; justify-content:center; height:22px; min-width:22px; padding:0 8px; border-radius:999px; background:#fff; border:2px solid var(--card-border); font-weight:900; font-size:12px; line-height:1; box-shadow:0 1px 2px rgba(0,0,0,.08) }
    .inline-pin.ipin-a{ border-color:#f27a1a; color:#f27a1a; background:linear-gradient(180deg,#fff 0%, #fff7f0 100%) }
    .inline-pin.ipin-b{ border-color:#1e2d3d; color:#1e2d3d; background:linear-gradient(180deg,#fff 0%, #f3f6fa 100%) }
    .inline-pin.ipin-ab{ border-color:#059669; color:#059669; background:linear-gradient(180deg,#fff 0%, #effaf6 100%) }

    .result-box h3{ position:relative; padding-right:74px; margin:2px 0 8px; font-weight:700; display:flex; align-items:center; justify-content:center; gap:8px; text-align:center }
    .badge{ position:absolute; right:0; top:0; font-size:10.5px; font-weight:800; color:#fff; padding:4px 8px; border-radius:999px; box-shadow:inset 0 0 0 2px rgba(255,255,255,.12); white-space:nowrap; line-height:1; pointer-events:none }

    .market-tag{
      position:absolute; top:-6px; left:50%; transform:translateX(42px);
      padding:3px 8px; border-radius:999px;
      border:2px solid var(--market-chip-border); background:var(--market-chip-bg);
      box-shadow:inset 0 0 0 2px rgba(255,255,255,.12);
      z-index:3; pointer-events:none; display:flex; align-items:center;
    }
    .market-label{ color:#fff; font-weight:800; font-size:11px; letter-spacing:.2px; line-height:1; }

    body.mkt-trendyol     { --brand:#f27a1a; --toolbar-bg:#fff4ea; --chip-active:#ffe9cc; --bg:#fff7f0; --market-chip-bg:#f27a1a; --market-chip-border:#d96b17; }
    body.mkt-hepsiburada  { --brand:#1f4bff; --toolbar-bg:#eef2ff; --chip-active:#dbe6ff; --bg:#f3f6ff; --market-chip-bg:#1f4bff; --market-chip-border:#1b43e6; }
    body.mkt-amazon       { --brand:#111111; --toolbar-bg:#f4f5f7; --chip-active:#eee;    --bg:#f6f7f8; --market-chip-bg:#111111; --market-chip-border:#111111; }
    body.mkt-n11          { --brand:#e11d48; --toolbar-bg:#ffe6ee; --chip-active:#ffd8e6; --bg:#fff0f5; --market-chip-bg:#e11d48; --market-chip-border:#c3103f; }

    .metrics{display:flex; flex-direction:column; gap:8px; margin:4px 0 10px}
    .box{ display:flex; align-items:center; justify-content:space-between; padding:10px; border-radius:8px; background:var(--box-bg); color:var(--box-text); min-height:46px; line-height:1.15 }
    .box .lbl{font-weight:600}
    .box strong{font-weight:800}

    .profit{ color:#fff; padding:20px; border-radius:999px; display:flex; flex-direction:column; align-items:center; justify-content:center; min-width:170px; min-height:170px; margin:18px auto 4px; position:relative; font-size:18px; box-shadow:inset 0 0 0 2px rgba(255,255,255,.06) }
    .profit .value{font-size:24px;font-weight:800}
    .emoji{position:absolute;top:6px;right:10px;font-size:30px}

    .bg-g0{background:linear-gradient(45deg,#7f1d1d,#dc2626)}
    .bg-g1{background:linear-gradient(45deg,#991b1b,#ef4444)}
    .bg-g2{background:linear-gradient(45deg,#b45309,#f97316)}
    .bg-g3{background:linear-gradient(45deg,#d97706,#f59e0b)}
    .bg-g4{background:linear-gradient(45deg,#65a30d,#84cc16)}
    .bg-g5{background:linear-gradient(45deg,#15803d,#22c55e)}
    .bg-g6{background:linear-gradient(45deg,#166534,#16a34a)}
    .bg-g7{background:linear-gradient(45deg,#065f46,#10b981)}
    .bg-deluxe{background:linear-gradient(45deg,#059669,#34d399,#f59e0b)}
    .bg-anim{background-size:200% 200%; animation:bgFlow 6s ease infinite}
    @keyframes bgFlow{0%{background-position:0% 50%}50%{background-position:100% 50%}100%{background-position:0% 50%}}

    @keyframes shake{0%,100%{transform:translate(0,0) rotate(0)}25%{transform:translate(-2px,2px) rotate(-8deg)}50%{transform:translate(2px,-2px) rotate(8deg)}75%{transform:translate(-2px,2px) rotate(-8deg)}}
    @keyframes wobble{0%{transform:rotate(0)}25%{transform:rotate(-8deg)}50%{transform:rotate(6deg)}75%{transform:rotate(-6deg)}100%{transform:rotate(0)}}
    @keyframes floaty{0%,100%{transform:translateY(0)}50%{transform:translateY(-4px)}}
    @keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-2px)}}
    @keyframes pulseSoft{0%{transform:scale(1)}50%{transform:scale(1.08)}100%{transform:scale(1)}}
    @keyframes hop{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}
    @keyframes zoom{0%{transform:scale(1)}50%{transform:scale(1.2)}100%{transform:scale(1)}}
    @keyframes glint{0%{filter:drop-shadow(0 0 0 rgba(255,215,0,0.0))}50%{filter:drop-shadow(0 0 6px rgba(255,215,0,0.7))}100%{filter:drop-shadow(0 0 0 rgba(255,215,0,0.0))}}

    .anim-shake{animation:shake .7s infinite}
    .anim-wobble{animation:wobble 1.1s ease-in-out infinite}
    .anim-float{animation:floaty 1.8s ease-in-out infinite}
    .anim-bob{animation:bob 2.2s ease-in-out infinite}
    .anim-pulse-soft{animation:pulseSoft 1.4s ease-in-out infinite}
    .anim-hop{animation:hop 1.2s ease-in-out infinite}
    .anim-pulse{animation:pulseSoft 1s ease-in-out infinite}
    .anim-zoom{animation:zoom 1.4s ease-in-out infinite}
    .anim-glint{animation:glint 1.6s ease-in-out infinite}

    .footer{margin-top:10px;text-align:center;color:#6b7280;font-size:12px;user-select:none}
    .footer strong{color:inherit}

    .detail-panel{ margin-top:12px; border:1px dashed var(--card-border); border-radius:10px; background:#fafafa; padding:10px }
    .detail-hidden{display:none}
    .detail-head{ display:flex; align-items:center; justify-content:space-between; gap:8px; padding:6px 10px; border-radius:8px; background:#f8fafc; border:1px solid var(--card-border) }
    .detail-title{ font-weight:800; color:#0f172a; font-size:14px; display:flex; align-items:center; gap:8px }
    .detail-toggle{ background:#e5e7eb; color:#111; border:none; border-radius:8px; padding:6px 10px; font-weight:700; cursor:pointer }
    .detail-body{ padding:10px; display:grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap:12px }
    @media (max-width:900px){ .detail-body{ grid-template-columns: 1fr; } }
    .dcol{ background:#fff; border:1px solid var(--card-border); border-radius:10px; padding:10px }
    .dcol h4{ margin:0 0 8px; font-size:13px; color:#374151 }
    .row{ display:flex; align-items:center; justify-content:space-between; padding:6px 0; border-bottom:1px dashed #e5e7eb }
    .row:last-child{ border-bottom:none }
    .dkey{ color:#6b7280; font-weight:700; font-size:12px }
    .dval{ font-weight:800; font-size:13px }

    /* === WATERMARK === */
    #wm{position:fixed; inset:0; z-index:0; pointer-events:none; opacity:.9;
      background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='120'><text x='10' y='60' fill='%23000' fill-opacity='0.06' font-size='24' font-family='Arial' transform='rotate(-20 100 60)'>SolingenTR • Confidential</text></svg>");
      background-size:220px 120px; background-repeat:repeat;}
  
    

    /* === Pazaryeri Tabs (Üst Bar) === */
    .marketTabs{
      display:flex; align-items:center; gap:6px;
      padding:6px;
      border:1px solid var(--card-border);
      background:#fff;
      border-radius:999px;
      box-shadow:0 1px 6px rgba(0,0,0,.06);
      margin-left:10px;
      flex-wrap:wrap;
    }
    .mtab{
      border:1px solid var(--input-border);
      background:var(--chip-bg);
      color:var(--primary);
      padding:6px 10px;
      border-radius:999px;
      font-weight:800;
      font-size:12px;
      line-height:1;
      cursor:pointer;
      opacity:.70;
      transition:transform .06s ease, opacity .12s ease, background .12s ease, border-color .12s ease;
      user-select:none;
      white-space:nowrap;
    }
    .mtab:hover{ opacity:1; }
    .mtab:active{ transform:scale(.98); }
    .mtab.active{
      background:var(--market-chip-bg);
      border-color:var(--market-chip-border);
      color:#fff;
      opacity:1;
    }

    /* Eski dropdown seçiciyi görsel olarak devre dışı bırakıp logo alanına çeviriyoruz */
    #marketList{ display:none !important; }
    #marketSelect{ cursor:default; }
    #marketSelect .caret{ display:none !important; }

    /* Büyük logo görünümü */
    #marketSelect.mlogo{
      background:transparent !important;
      border:none !important;
      box-shadow:none !important;
      padding:0 !important;
      gap:10px;
      align-items:center;
      min-width:auto !important;
    }
    #marketSelect.mlogo .mname{
      font-weight:900;
      font-size:14px;
      color:var(--primary);
    }
    #marketIcon.bigLogo{
      width:56px !important;
      height:56px !important;
      border-radius:14px;
      background:#fff;
      border:1px solid var(--card-border);
      box-shadow:0 2px 10px rgba(0,0,0,.06);
      padding:6px;
      object-fit:contain;
    }

    /* === API Health Widget === */
    .api-health-widget {
      background: linear-gradient(135deg, #fef3c7 0%, #fef9e7 100%);
      border: 2px solid #f59e0b;
      border-radius: 10px;
      padding: 12px;
      margin-bottom: 15px;
    }
    .health-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-bottom: 10px;
    }
    .health-status {
      display: flex;
      align-items: center;
      gap: 8px;
    }
    .health-icon {
      font-size: 20px;
      animation: pulse 2s ease-in-out infinite;
    }
    .health-icon.healthy { animation: none; }
    .health-text {
      font-weight: 700;
      font-size: 14px;
      color: #92400e;
    }
    .health-response-time {
      font-weight: 800;
      font-size: 13px;
      color: #78350f;
      background: rgba(255,255,255,0.6);
      padding: 4px 8px;
      border-radius: 6px;
    }
    .health-details {
      display: flex;
      flex-direction: column;
      gap: 8px;
    }
    .rate-limit-section {
      background: rgba(255,255,255,0.7);
      padding: 8px;
      border-radius: 8px;
    }
    .rate-limit-label {
      font-size: 11px;
      font-weight: 700;
      color: #78350f;
      margin-bottom: 4px;
    }
    .rate-limit-bar {
      height: 12px;
      background: #e5e7eb;
      border-radius: 6px;
      overflow: hidden;
      margin-bottom: 4px;
    }
    .rate-limit-fill {
      height: 100%;
      background: linear-gradient(90deg, #10b981 0%, #fbbf24 50%, #ef4444 100%);
      transition: width 0.3s ease;
      border-radius: 6px;
    }
    .rate-limit-fill-initial { width: 0%; }
    .integration-hint { color:#6b7280; font-size:14px; margin-bottom:20px; }
    .integration-acc-item-trendyol { border-color:#f27a1a; }
    .integration-acc-item-hepsiburada { border-color:#1f4bff; }
    .integration-acc-item-amazon { border-color:#111111; }
    .integration-acc-item-n11 { border-color:#e11d48; }
    .integration-acc-header { cursor:default; pointer-events:none; }
    .integration-acc-header-trendyol { color:#f27a1a; }
    .integration-acc-header-hepsiburada { color:#1f4bff; }
    .integration-acc-header-amazon { color:#111111; }
    .integration-acc-header-n11 { color:#e11d48; }
    .integration-acc-body { display:block; border-top-width:2px; border-top-style:solid; }
    .integration-acc-body-trendyol { border-top-color:#f27a1a; }
    .integration-acc-body-hepsiburada { border-top-color:#1f4bff; }
    .integration-acc-body-amazon { border-top-color:#111111; }
    .integration-acc-body-n11 { border-top-color:#e11d48; }
    .int-grid-1 { display:grid; grid-template-columns:1fr; gap:8px; }
    .int-grid-2 { display:grid; grid-template-columns:1fr 1fr; gap:8px; }
    .int-checkbox-label { display:flex; align-items:center; gap:8px; cursor:pointer; }
    .int-checkbox-input { width:auto; }
    .int-actions-row { display:flex; gap:8px; margin-top:15px; }
    .int-btn-flex { flex:1; }
    .int-sync-section { border-top:1px solid #e5e7eb; margin-top:15px; padding-top:15px; }
    .int-sync-title { font-weight:bold; color:#666; margin:0 0 10px 0; font-size:14px; }
    .int-sync-status { margin-top:10px; font-size:12px; color:#6b7280; }
    .int-btn-compact { font-size:13px; }
    .int-btn-compact-pad { padding:12px; }
    .int-warn-box { display:flex; align-items:center; gap:10px; margin-bottom:15px; padding:10px; background:#fef3c7; border-radius:6px; }
    .int-warn-text { font-size:13px; color:#92400e; }
    .int-hidden { display:none; }
    .int-mt-15 { margin-top:15px; }
    .int-btn-full { width:100%; }
    .int-status-box { margin-top:10px; padding:10px; border-radius:6px; font-size:14px; text-align:center; }
    .int-saved-status-box { margin-bottom:15px; padding:12px; border-radius:6px; background:#f0fdf4; border:1px solid #86efac; }
    .int-saved-status-title { font-weight:600; color:#166534; margin-bottom:4px; }
    .int-saved-status-text { font-size:12px; color:#4b5563; }
    .rate-limit-text {
      font-size: 12px;
      font-weight: 700;
      color: #374151;
      text-align: center;
    }
    .health-meta {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 8px;
    }
    .health-meta-item {
      background: rgba(255,255,255,0.7);
      padding: 6px 8px;
      border-radius: 6px;
      font-size: 11px;
    }
    .health-meta-label {
      color: #78350f;
      font-weight: 700;
      display: block;
      margin-bottom: 2px;
    }
    .health-meta-value {
      color: #1f2937;
      font-weight: 800;
      font-size: 12px;
    }
    
    /* Health status colors */
    .api-health-widget.healthy {
      background: linear-gradient(135deg, #d1fae5 0%, #ecfdf5 100%);
      border-color: #10b981;
    }
    .api-health-widget.healthy .health-text { color: #065f46; }
    .api-health-widget.healthy .health-response-time { color: #064e3b; }
    .api-health-widget.healthy .rate-limit-label,
    .api-health-widget.healthy .health-meta-label { color: #064e3b; }
    
    .api-health-widget.error {
      background: linear-gradient(135deg, #fee2e2 0%, #fef2f2 100%);
      border-color: #ef4444;
    }
    .api-health-widget.error .health-text { color: #7f1d1d; }
    .api-health-widget.error .health-response-time { color: #991b1b; }
    .api-health-widget.error .rate-limit-label,
    .api-health-widget.error .health-meta-label { color: #991b1b; }

    @media (max-width: 920px){
      .marketTabs{ margin-left:0; width:100%; justify-content:center; }
      #marketIcon.bigLogo{ width:48px !important; height:48px !important; border-radius:12px; }
    }


    /* === Üst Başlık: Pazaryeri Tabs + Logo === */
    .appTopbar{
      width:100%;
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:12px;
      padding:10px 14px;
      border-bottom:1px solid rgba(0,0,0,.06);
      background:rgba(255,255,255,.65);
      backdrop-filter:saturate(1.2) blur(6px);
      border-radius:16px;
      position:relative;
    }
    .appTopbarLeft{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
    .appTopbarRight{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; justify-content:flex-end; }
    .topbarLabel{ font-weight:900; color:var(--primary); opacity:.75; font-size:13px; }
    #marketSelect.mlogo{ order:1; }
    .logout-fixed{
      position:fixed;
      top:30px;
      right:150px;
      z-index:10000;
      box-shadow:0 4px 14px rgba(0,0,0,.12);
      border:1px solid rgba(0,0,0,.12);
    }
    /* Toolbar alanı (pazaryeri üst barda) */

    @media (max-width: 920px){
      .appTopbar{ flex-wrap:wrap; justify-content:center; }
      .appTopbarRight{ width:100%; justify-content:center; }
      .topbarLabel{ display:none; }
    }


    .appTopbarInner{
      width:100%;
      max-width: 1220px;
      margin: 0 auto;
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:12px;
    }
    @media (max-width: 1280px){
      .appTopbarInner{ max-width: 1100px; }
    }
    @media (max-width: 1120px){
      .appTopbarInner{ max-width: 980px; }
    }
    @media (max-width: 980px){
      .appTopbarInner{ max-width: 92vw; }
    }


    .appTopbarCenter{
      flex:1;
      display:flex;
      align-items:center;
      justify-content:center;
      pointer-events:none;
    }
    .appTitle{
      font-weight:900;
      letter-spacing:2px;
      font-size:19px;
      color:#ff7a00;
      opacity:.85;
      user-select:none;
    }
    @media (max-width: 980px){
      .appTopbarCenter{ display:none; }
    }


    /* === Pazaryeri Logo: gönderilen yatay logolar (kare ikon değil) === */
    #marketName{ display:none !important; }
    #marketIcon.bigLogo{
      width: 190px !important;
      height: 46px !important;
      padding: 0 !important;
      border: none !important;
      background: transparent !important;
      box-shadow: none !important;
      border-radius: 0 !important;
      object-fit: contain !important;
    }
    @media (max-width: 920px){
      #marketIcon.bigLogo{ width: 160px !important; height: 40px !important; }
    }


/* === Pazaryeri Tab Renk Ayrımı === */
/* Trendyol: klasik turuncu */
.mtab.active[data-market="trendyol"]{
  background:#ff7a00 !important;
  border-color:#ff7a00 !important;
}

/* Hepsiburada: mercan / kırmızımsı ton (turuncudan ayrışır) */
.mtab.active[data-market="hepsiburada"]{
  background:#ff4f3f !important;
  border-color:#ff4f3f !important;
}

/* Amazon: koyu gri/siyah */
.mtab.active[data-market="amazon"]{
  background:#232f3e !important;
  border-color:#232f3e !important;
}

/* n11: mor */
.mtab.active[data-market="n11"]{
  background:#6f2dbd !important;
  border-color:#6f2dbd !important;
}


/* === Tema: Pazaryerine göre belirgin görsel fark === */

/* Ortadaki başlık */
body[data-market="trendyol"] .appTitle{ color:#ff7a00; }
body[data-market="hepsiburada"] .appTitle{ color:#ff4f3f; }
body[data-market="amazon"] .appTitle{ color:#232f3e; }
body[data-market="n11"] .appTitle{ color:#6f2dbd; }

/* Kart kenarlıkları ve vurgu */
body[data-market="trendyol"] .card{ border-top:3px solid #ff7a00; }
body[data-market="hepsiburada"] .card{ border-top:3px solid #ff4f3f; }
body[data-market="amazon"] .card{ border-top:3px solid #232f3e; }
body[data-market="n11"] .card{ border-top:3px solid #6f2dbd; }

/* ROI / sonuç vurgusu */
body[data-market="trendyol"] .roi-circle{ box-shadow:0 0 0 2px rgba(255,122,0,.35); }
body[data-market="hepsiburada"] .roi-circle{ box-shadow:0 0 0 2px rgba(255,79,63,.35); }
body[data-market="amazon"] .roi-circle{ box-shadow:0 0 0 2px rgba(35,47,62,.35); }
body[data-market="n11"] .roi-circle{ box-shadow:0 0 0 2px rgba(111,45,189,.35); }


/* === Trendyol vs Hepsiburada: Daha Keskin Tema Ayrımı (Override) === */

/* Trendyol: turuncu + sıcak arka plan */
body[data-market="trendyol"]{
  --theme-accent:#ff7a00;
  --theme-accent-soft: rgba(255,122,0,.10);
  --theme-accent-strong: rgba(255,122,0,.18);
}
body[data-market="trendyol"] .appTitle{ color:var(--theme-accent) !important; }
body[data-market="trendyol"] .card{ border-top:4px solid var(--theme-accent) !important; background: linear-gradient(180deg, var(--theme-accent-soft), rgba(255,255,255,0) 120px) !important; }
body[data-market="trendyol"] .roi-circle{ box-shadow:0 0 0 3px rgba(255,122,0,.35), 0 10px 30px rgba(255,122,0,.10) !important; }
body[data-market="trendyol"] .appTopbar{ border:1px solid rgba(255,122,0,.18) !important; }
body[data-market="trendyol"] .mtab.active[data-market="trendyol"]{ background:var(--theme-accent) !important; border-color:var(--theme-accent) !important; }

/* Hepsiburada: lacivert/indigo + soğuk arka plan (turuncudan tamamen ayrışır) */
body[data-market="hepsiburada"]{
  --theme-accent:#1f4bff;           /* canlı mavi */
  --theme-accent-soft: rgba(31,75,255,.10);
  --theme-accent-strong: rgba(31,75,255,.18);
}
body[data-market="hepsiburada"] .appTitle{ color:var(--theme-accent) !important; }
body[data-market="hepsiburada"] .card{ border-top:4px solid var(--theme-accent) !important; background: linear-gradient(180deg, var(--theme-accent-soft), rgba(255,255,255,0) 120px) !important; }
body[data-market="hepsiburada"] .roi-circle{ box-shadow:0 0 0 3px rgba(31,75,255,.35), 0 10px 30px rgba(31,75,255,.10) !important; }
body[data-market="hepsiburada"] .appTopbar{ border:1px solid rgba(31,75,255,.18) !important; }
body[data-market="hepsiburada"] .mtab.active[data-market="hepsiburada"]{ background:var(--theme-accent) !important; border-color:var(--theme-accent) !important; }

/* Ek: pasif tablar hepsiburada seçiliyken biraz daha soğuk görünsün */
body[data-market="hepsiburada"] .mtab{ background:rgba(31,75,255,.06) !important; border-color:rgba(31,75,255,.16) !important; }
body[data-market="trendyol"] .mtab{ background:rgba(255,122,0,.06) !important; border-color:rgba(255,122,0,.16) !important; }


/* === Arka Plan Tema Değişimi === */

/* Trendyol: sıcak, açık arka plan */
body[data-market="trendyol"]{
  background:
    radial-gradient(1200px 600px at 10% -10%, rgba(255,122,0,.10), transparent 40%),
    linear-gradient(180deg, #fff7f0 0%, #ffffff 45%);
}

/* Hepsiburada: soğuk, mavi arka plan */
body[data-market="hepsiburada"]{
  background:
    radial-gradient(1200px 600px at 10% -10%, rgba(31,75,255,.12), transparent 40%),
    linear-gradient(180deg, #f2f6ff 0%, #ffffff 45%);
}

/* Amazon: nötr koyu-gri dokunuş */
body[data-market="amazon"]{
  background:
    radial-gradient(1200px 600px at 10% -10%, rgba(35,47,62,.10), transparent 40%),
    linear-gradient(180deg, #f5f6f7 0%, #ffffff 45%);
}

/* n11: mor tonlu premium arka plan */
body[data-market="n11"]{
  background:
    radial-gradient(1200px 600px at 10% -10%, rgba(111,45,189,.12), transparent 40%),
    linear-gradient(180deg, #f7f2ff 0%, #ffffff 45%);
}


/* === Daha Güçlü Arka Plan + Hesaplama Alanı Çerçeve Teması === */

/* Sayfa arka planını biraz güçlendir */
body[data-market="trendyol"]{
  background:
    radial-gradient(1400px 700px at 15% -10%, rgba(255,122,0,.18), transparent 45%),
    radial-gradient(900px 500px at 85% 0%, rgba(255,122,0,.10), transparent 55%),
    linear-gradient(180deg, #fff2e7 0%, #ffffff 48%);
}
body[data-market="hepsiburada"]{
  background:
    radial-gradient(1400px 700px at 15% -10%, rgba(31,75,255,.20), transparent 45%),
    radial-gradient(900px 500px at 85% 0%, rgba(31,75,255,.10), transparent 55%),
    linear-gradient(180deg, #eaf1ff 0%, #ffffff 48%);
}
body[data-market="amazon"]{
  background:
    radial-gradient(1400px 700px at 15% -10%, rgba(35,47,62,.16), transparent 45%),
    radial-gradient(900px 500px at 85% 0%, rgba(35,47,62,.08), transparent 55%),
    linear-gradient(180deg, #eef1f4 0%, #ffffff 48%);
}
body[data-market="n11"]{
  background:
    radial-gradient(1400px 700px at 15% -10%, rgba(111,45,189,.20), transparent 45%),
    radial-gradient(900px 500px at 85% 0%, rgba(111,45,189,.10), transparent 55%),
    linear-gradient(180deg, #f1e9ff 0%, #ffffff 48%);
}

/* Hesaplama ana çerçevesine tema kontörü (panel border) */
body[data-market="trendyol"] .container{ box-shadow: 0 0 0 2px rgba(255,122,0,.20), 0 18px 50px rgba(0,0,0,.10); }
body[data-market="hepsiburada"] .container{ box-shadow: 0 0 0 2px rgba(31,75,255,.20), 0 18px 50px rgba(0,0,0,.10); }
body[data-market="amazon"] .container{ box-shadow: 0 0 0 2px rgba(35,47,62,.18), 0 18px 50px rgba(0,0,0,.10); }
body[data-market="n11"] .container{ box-shadow: 0 0 0 2px rgba(111,45,189,.20), 0 18px 50px rgba(0,0,0,.10); }

/* Çok hafif iç kontör: kart kenarlarında da theme çizgisi */
body[data-market="trendyol"] .card{ box-shadow: 0 0 0 1px rgba(255,122,0,.08), 0 12px 30px rgba(0,0,0,.06); }
body[data-market="hepsiburada"] .card{ box-shadow: 0 0 0 1px rgba(31,75,255,.08), 0 12px 30px rgba(0,0,0,.06); }
body[data-market="amazon"] .card{ box-shadow: 0 0 0 1px rgba(35,47,62,.06), 0 12px 30px rgba(0,0,0,.06); }
body[data-market="n11"] .card{ box-shadow: 0 0 0 1px rgba(111,45,189,.08), 0 12px 30px rgba(0,0,0,.06); }


/* === A & B Ürün Kartları: Tema Kontörü + Derinlik === */

/* Ortak kart iyileştirme */
.card.product-a, .card.product-b{
  transition: box-shadow .2s ease, transform .15s ease;
}

/* Trendyol */
body[data-market="trendyol"] .card.product-a,
body[data-market="trendyol"] .card.product-b{
  box-shadow:
    0 0 0 1.5px rgba(255,122,0,.25),
    0 14px 36px rgba(0,0,0,.10);
}

/* Hepsiburada */
body[data-market="hepsiburada"] .card.product-a,
body[data-market="hepsiburada"] .card.product-b{
  box-shadow:
    0 0 0 1.5px rgba(31,75,255,.25),
    0 14px 36px rgba(0,0,0,.10);
}

/* Amazon */
body[data-market="amazon"] .card.product-a,
body[data-market="amazon"] .card.product-b{
  box-shadow:
    0 0 0 1.5px rgba(35,47,62,.22),
    0 14px 36px rgba(0,0,0,.10);
}

/* n11 */
body[data-market="n11"] .card.product-a,
body[data-market="n11"] .card.product-b{
  box-shadow:
    0 0 0 1.5px rgba(111,45,189,.25),
    0 14px 36px rgba(0,0,0,.10);
}

/* Hover'da hafif yükselme (derinlik algısı) */
.card.product-a:hover,
.card.product-b:hover{
  transform: translateY(-2px);
}


/* === A & B Kart Kontörü (Gerçek Sınıflar: .calcA/.calcB içindeki .urun) === */
.calcA .urun, .calcB .urun{
  transition: box-shadow .2s ease, transform .15s ease;
}
body[data-market="trendyol"] .calcA .urun,
body[data-market="trendyol"] .calcB .urun{
  box-shadow: 0 0 0 1.5px rgba(255,122,0,.25), 0 14px 36px rgba(0,0,0,.10);
}
body[data-market="hepsiburada"] .calcA .urun,
body[data-market="hepsiburada"] .calcB .urun{
  box-shadow: 0 0 0 1.5px rgba(31,75,255,.25), 0 14px 36px rgba(0,0,0,.10);
}
body[data-market="amazon"] .calcA .urun,
body[data-market="amazon"] .calcB .urun{
  box-shadow: 0 0 0 1.5px rgba(35,47,62,.22), 0 14px 36px rgba(0,0,0,.10);
}
body[data-market="n11"] .calcA .urun,
body[data-market="n11"] .calcB .urun{
  box-shadow: 0 0 0 1.5px rgba(111,45,189,.25), 0 14px 36px rgba(0,0,0,.10);
}
.calcA .urun:hover, .calcB .urun:hover{
  transform: translateY(-2px);
}


/* === Ocean UI tweaks === */
.group.ocean .iname{
  white-space: normal !important;
  overflow-wrap: anywhere;
  word-break: break-word;
  font-size: 12px;
  line-height: 1.15;
}
.group.ocean .item{ align-items:flex-start; }


/* Kozmetik Ürünler toggle konumu */
.switch.switch-ocean{ margin-left:-10px; }


/* Kozmetik Ürünler toggle - dikkat çekici renk */
.switch.switch-ocean .label{
  font-weight: 800;
}
.switch.switch-ocean .slider{
  box-shadow: 0 0 0 1px rgba(245, 158, 11, .35);
}
/* Kapalıyken: sıcak vurgu */
.switch.switch-ocean input + .slider{
  background: rgba(245, 158, 11, .18);
}
/* Açıkken: daha güçlü vurgu */
.switch.switch-ocean input:checked + .slider{
  background: rgba(245, 158, 11, .95);
}
.switch.switch-ocean input:checked + .slider:before{
  background: #fff;
}
.switch.switch-ocean .label{
  color: #b45309;
}
.switch.switch-ocean input:checked ~ .label{
  color: #92400e;
}


/* Kozmetik Ürünler toggle - vurgulu stil */
.switch.switch-ocean{
  margin-left: 12px;           /* rate bloğundan biraz ayrışsın */
  padding: 8px 12px;
  border-radius: 14px;
  border: 1.5px solid rgba(220, 38, 38, .35);
  background: rgba(220, 38, 38, .06);
  box-shadow: 0 6px 18px rgba(220, 38, 38, .10);
}
.switch.switch-ocean .label{
  font-weight: 900;
  color: #b91c1c;
}
/* track */
.switch.switch-ocean input + .slider{
  background: rgba(220, 38, 38, .22);
  box-shadow: inset 0 0 0 1px rgba(220, 38, 38, .25);
}
/* ON */
.switch.switch-ocean input:checked + .slider{
  background: rgba(220, 38, 38, .95);
}
.switch.switch-ocean input:checked ~ .label{
  color: #7f1d1d;
}
.switch.switch-ocean input:focus-visible + .slider{
  outline: 3px solid rgba(220, 38, 38, .28);
  outline-offset: 2px;
}


/* Kozmetik Ürünler toggle - rate içinde hizalama */
.rate .switch.switch-ocean{
  margin-left: 14px;
  margin-top: 0;
  margin-bottom: 0;
}
@media (max-width: 900px){
  .rate .switch.switch-ocean{ margin-left: 8px; }
}


/* Kozmetik Ürünler isim vurgusu */
.group.ocean .iname strong{
  font-weight: 900;
  color: #111827;
}
.group.ocean .iname{
  color:#374151;
}


/* Daha okunabilir yazı tipi */
:root{
  --ui-font: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif;
}
body, input, button, select, textarea{
  font-family: var(--ui-font);
  font-weight: 500; /* cılızlığı azalt */
}

/* Ürün seçimi satırları: daha okunaklı */
.item{ padding: 9px 10px; }
    .mtab{
      border:1px solid var(--input-border);
      background:var(--chip-bg);
      color:var(--primary);
      padding:9px 14px;
      border-radius:999px;
      font-weight:800;
      font-size:14px;
      line-height:1;
      cursor:pointer;
      transition:all .2s ease;
    }
:root{
  --ui-font: "Manrope", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif;
}
body, input, button, select, textarea{ font-family: var(--ui-font); }


/* Kozmetik durum etiketi */
.switch.switch-ocean .koz-status{
  margin-left: 10px;
  font-size: 12px;
  font-weight: 800;
  color: rgba(17,24,39,.70);
  white-space: nowrap;
}
.switch.switch-ocean.koz-active .koz-status{
  color: rgba(17,24,39,.85);
}
@media (max-width: 900px){
  .switch.switch-ocean{ flex-wrap: wrap; }
  .switch.switch-ocean .koz-status{
    display: block;
    width: 100%;
    margin-left: 0;
    font-size: 11px;
    font-weight: 900;
    opacity: .9;
  }
}


/* Kozmetik Ürünler: '-' sonrası kod rengi */
.group.ocean .iname .ocean-code{
  color: #dc2626;
  font-weight: 800;
}


/* Kozmetik toggle durumunu daha net yap */
.switch.switch-ocean .koz-pill{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  height: 22px;
  padding: 0 10px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 1000;
  letter-spacing: .4px;
  border: 1.5px solid rgba(17,24,39,.18);
  background: rgba(17,24,39,.06);
  color: rgba(17,24,39,.78);
}
.switch.switch-ocean.koz-on{
  border-color: rgba(16,185,129,.35);
  background: rgba(16,185,129,.08);
  box-shadow: 0 8px 20px rgba(16,185,129,.16);
}
.switch.switch-ocean.koz-on input + .slider{
  background: rgba(16,185,129,.95) !important; /* ON: yeşil */
  box-shadow: inset 0 0 0 1px rgba(16,185,129,.25) !important;
}
.switch.switch-ocean.koz-on .label{ color: #065f46; }
.switch.switch-ocean.koz-on .koz-pill{
  border-color: rgba(16,185,129,.30);
  background: rgba(16,185,129,.16);
  color: #065f46;
}
.switch.switch-ocean.koz-off{
  border-color: rgba(220,38,38,.28);
  background: rgba(220,38,38,.06);
  box-shadow: 0 6px 18px rgba(220,38,38,.10);
}
.switch.switch-ocean.koz-off input + .slider{
  background: rgba(220,38,38,.22) !important; /* OFF: kırmızımsı */
  box-shadow: inset 0 0 0 1px rgba(220,38,38,.20) !important;
}
.switch.switch-ocean.koz-off .label{ color: #7f1d1d; }
.switch.switch-ocean.koz-off .koz-pill{
  border-color: rgba(220,38,38,.25);
  background: rgba(220,38,38,.12);
  color: #7f1d1d;
}


/* Kozmetik toggle: pill etiketi kaldırıldı */
.switch.switch-ocean .koz-pill{ display:none !important; }


/* EUR (Klever+Ritter) seçim durumu etiketi */
.switch.switch-ocean .eur-status{
  margin-left: 10px;
  font-size: 12px;
  font-weight: 800;
  color: rgba(17,24,39,.70);
  white-space: nowrap;
}
.switch.switch-ocean.eur-active .eur-status{
  color: rgba(17,24,39,.85);
}
@media (max-width: 900px){
  .switch.switch-ocean .eur-status{
    display:block;
    width:100%;
    margin-left:0;
    font-size: 11px;
    font-weight: 900;
    opacity:.9;
  }
}


/* Ritter/Klever seçili ürünler kutusu */
.eurPickBox{
  margin-left: 12px;
  padding: 8px 12px;
  border-radius: 14px;
  border: 1px solid rgba(17,24,39,.12);
  background: rgba(255,255,255,.85);
  min-width: 240px;
}
.ep-title{
  font-size: 11px;
  font-weight: 900;
  color: rgba(17,24,39,.65);
  margin-bottom: 2px;
}
.ep-val{
  font-size: 12px;
  font-weight: 900;
  color: rgba(17,24,39,.88);
  white-space: nowrap;
}
@media (max-width: 900px){
  .eurPickBox{
    margin-left: 0;
    margin-top: 8px;
    width: 100%;
    min-width: 0;
  }
  .ep-val{ white-space: normal; }
}


/* Ritter/Klever kutusu - Kozmetik ile aynı boyut, farklı çerçeve rengi */
.rate{
  align-items: stretch;
}
.eurPickBox{
  display:flex;
  flex-direction: column;
  justify-content: center;
  height: auto;
  padding: 10px 14px;
  border-radius: 14px;
  border: 1.5px solid rgba(59,130,246,.35);   /* mavi çerçeve */
  background: rgba(59,130,246,.06);
  box-shadow: 0 6px 18px rgba(59,130,246,.10);
}
.ep-title{
  color: rgba(30,58,138,.75);
}
.ep-val{
  color: rgba(30,58,138,.92);
}


/* Seçim yokken başlık gizlensin */
#eurPickTitle{ display:none; }
.eurPickBox.hasSel #eurPickTitle{ display:block; }


/* Mavi kutu içi etiket/statü */
.eurPickBox{
  display:flex;
  align-items:center;
  gap: 12px;
}
.eurPickBox .ep-label{
  font-size: 13px;
  font-weight: 900;
  color: rgba(30,58,138,.92);
  white-space: nowrap;
}
.eurPickBox .ep-status{
  font-size: 12px;
  font-weight: 900;
  color: rgba(17,24,39,.82);
  white-space: nowrap;
}
@media (max-width: 900px){
  .eurPickBox .ep-status{ white-space: normal; }
}


/* Bıçak etiketi (Kozmetik gibi yanda) */
.knife-label{
  margin-left: 12px;
  font-size: 13px;
  font-weight: 900;
  color: rgba(30,58,138,.92);
  white-space: nowrap;
  align-self: center;
}
.eurPickBox .ep-label{ display:none; } /* içteki etiketi gizle */
@media (max-width: 900px){
  .knife-label{
    margin-left: 0;
    margin-top: 8px;
    width: 100%;
  }
}


/* Bıçak etiketi mavi çerçevenin İÇİNDE */
.knife-label{ display:none !important; }          /* dışarıdaki etiketi kapat */
.eurPickBox .ep-label{ display:inline-flex !important; }  /* iç etiketi aç */
.eurPickBox{
  display:flex;
  align-items:center;
  gap: 12px;
}
.eurPickBox .ep-label{
  font-size: 13px;
  font-weight: 900;
  color: rgba(30,58,138,.92);
  white-space: nowrap;
}
.eurPickBox .ep-status{
  font-size: 12px;
  font-weight: 900;
  color: rgba(17,24,39,.82);
  white-space: nowrap;
}


/* Mavi kutu: sol hizalı, dikey ortalı; seçili bilgi yanına gelsin */
.eurPickBox{
  justify-content: flex-start !important;
  text-align: left !important;
}
.eurPickBox .ep-label{
  margin-left: 2px;
}


/* Mavi kutu: label + durum tek satırda */
.eurPickBox{
  flex-direction: row !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 12px !important;
}
.eurPickBox .ep-label,
.eurPickBox .ep-status{
  display: inline-flex !important;
  width: auto !important;
  margin: 0 !important;
}


/* Ürün seçici: isimler kısalmasın, satırlar eşit yükseklikte büyüsün */
.group .item{
  display:flex;
  align-items:center;
  gap: 10px;
  height: auto !important;      /* JS eşitleyecek */
  min-height: 38px;
}
.group .item .iname{
  flex: 1 1 auto;
  min-width: 0;
  white-space: normal !important;   /* sar */
  overflow: visible !important;
  text-overflow: clip !important;
  line-height: 1.15;
}
.group .item .qty{
  flex: 0 0 auto;
  width: 38px;
  text-align: center;
}


  /* ===================== NAVIGATION TABS ===================== */
  .nav-tabs {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    gap: 8px;
    max-width: 2600px;
    width: min(2600px, calc(100vw - (var(--page-gutter) * 2)));
    margin: 0 auto 16px;
    padding: 0 15px;
    justify-content: flex-start;
  }
  .nav-tab {
    padding: 12px 24px;
    background: var(--panel);
    border: 1px solid var(--card-border);
    border-radius: 8px 8px 0 0;
    cursor: pointer;
    font-size: 14px;
    font-weight: 500;
    color: var(--text);
    transition: all 0.2s;
    white-space: nowrap;
    flex-shrink: 0;
  }
  .nav-tab:hover {
    background: var(--toolbar-bg);
  }
  .nav-tab.active {
    background: var(--brand);
    color: white;
    border-color: var(--brand);
  }
  .tab-content {
    display: none;
  }
  .tab-content.active {
    display: block;
  }

  /* ===================== PRODUCTS TAB ===================== */
  .import-export-section {
    background: var(--panel);
    padding: 20px;
    border-radius: 10px;
    margin-bottom: 20px;
    box-shadow: var(--shadow);
  }
  .import-export-section h3 {
    margin: 0 0 12px 0;
    color: var(--brand);
  }
  .import-export-controls {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
  }
  .source-filter-group {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    margin-top: 10px;
  }
  .source-filter-label {
    font-weight: 800;
    color: #374151;
    font-size: 12px;
  }
  .source-filter-btn {
    border: 1px solid var(--input-border);
    background: var(--chip-bg);
    color: var(--primary);
    padding: 6px 10px;
    border-radius: 999px;
    font-weight: 800;
    font-size: 12px;
    line-height: 1;
    cursor: pointer;
    opacity: 0.7;
    transition: opacity .12s ease, transform .06s ease, background .12s ease, border-color .12s ease;
  }
  .source-filter-btn:hover { opacity: 1; }
  .source-filter-btn:active { transform: scale(.98); }
  .source-filter-btn.active {
    opacity: 1;
    color: #fff;
  }
  .source-filter-btn.active[data-source="trendyol"] { background: #f27a1a; border-color: #d96b17; }
  .source-filter-btn.active[data-source="hepsiburada"] { background: #1f4bff; border-color: #1b43e6; }
  .source-filter-btn.active[data-source="amazon"] { background: #111111; border-color: #111111; }
  .source-filter-btn.active[data-source="n11"] { background: #e11d48; border-color: #c3103f; }
  .products-header-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 20px;
    margin-bottom: 20px;
  }
  .products-title { margin: 0; }
  .products-total-badge {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: #fff;
    padding: 8px 16px;
    border-radius: 6px;
    margin-left: 15px;
    display: inline-block;
    box-shadow: 0 2px 8px rgba(102, 126, 234, 0.3);
    font-size: 16px;
  }
  .source-filter-group-end { justify-content: flex-end; }
  .source-filter-btn-manual,
  .source-filter-btn-excel,
  .source-filter-btn-trendyol,
  .source-filter-btn-amazon,
  .source-filter-btn-hepsiburada,
  .source-filter-btn-n11 {
    border: none;
    padding: 8px 16px;
    border-radius: 6px;
    font-weight: 600;
    margin-right: 8px;
  }
  .source-filter-btn-n11 { margin-right: 0; }
  .source-filter-btn-manual { background-color: #6366f1; color: #fff; }
  .source-filter-btn-excel { background-color: #059669; color: #fff; }
  .source-filter-btn-trendyol { background-color: #ffad00; color: #000; }
  .source-filter-btn-amazon { background-color: #000; color: #fff; }
  .source-filter-btn-hepsiburada { background-color: #e60012; color: #fff; }
  .source-filter-btn-n11 { background-color: #00a0e9; color: #fff; }
  .import-export-controls-spread {
    align-items: center;
    gap: 10px;
    justify-content: space-between;
  }
  .import-export-actions {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
  }
  .import-export-filters {
    display: flex;
    gap: 10px;
    align-items: center;
  }
  .hidden-file-input { display: none; }
  .import-status {
    margin-top: 10px;
    color: #059669;
  }
  .products-loading-cell {
    text-align: center;
    padding: 40px;
  }
  .products-empty-cell {
    text-align: center;
    padding: 40px;
  }
  .products-error-cell {
    text-align: center;
    padding: 40px;
    color: #dc2626;
  }
  .filters {
    display: flex;
    gap: 16px;
    margin-bottom: 20px;
    padding: 16px;
    background: var(--toolbar-bg);
    border-radius: 8px;
    align-items: center;
    flex-wrap: wrap;
  }
  .filters input[type="text"] {
    flex: 1;
    min-width: 200px;
    padding: 8px 12px;
    border: 1px solid var(--input-border);
    border-radius: 6px;
    font-size: 14px;
  }
  .filters label {
    display: flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
    font-size: 14px;
  }
  .products-table {
    width: 100%;
    table-layout: fixed;
    border-collapse: collapse;
    background: var(--panel);
    border-radius: 10px;
    overflow: hidden;
    box-shadow: var(--shadow);
  }
  .products-table thead {
    background: var(--brand);
    color: white;
  }
  .products-table th,
  .products-table td {
    padding: 12px;
    text-align: left;
    border-bottom: 1px solid var(--card-border);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .products-table th:nth-child(1),
  .products-table td:nth-child(1) {
    width: 150px;
  }
  .products-table th:nth-child(2),
  .products-table td:nth-child(2) {
    width: 150px;
  }
  .products-table th:nth-child(3),
  .products-table td:nth-child(3) {
    width: 140px;
    text-align: center;
  }
  .products-table th:nth-child(4),
  .products-table td:nth-child(4) {
    min-width: 200px;
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
  }
  .products-table th:nth-child(5),
  .products-table td:nth-child(5) {
    width: 100px;
  }
  .products-table th:nth-child(6),
  .products-table td:nth-child(6) {
    width: 130px;
  }
  .products-table th:nth-child(7),
  .products-table td:nth-child(7) {
    width: 120px;
    text-align: center;
  }
  .products-table th:nth-child(8),
  .products-table td:nth-child(8) {
    width: 110px;
    text-align: center;
  }
  .products-table th:nth-child(9),
  .products-table td:nth-child(9) {
    width: 150px;
    text-align: center;
  }
  .product-name-cell {
    display: flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
    max-width: 100%;
  }
  .product-name-text {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .source-badge {
    display: inline-flex;
    align-items: center;
    padding: 2px 6px;
    border-radius: 999px;
    font-size: 10px;
    font-weight: 800;
    line-height: 1;
    color: #fff;
    border: 1px solid transparent;
    white-space: nowrap;
    flex: 0 0 auto;
  }
  .source-trendyol {
    background: #f27a1a;
    border-color: #d96b17;
  }
  .source-hepsiburada {
    background: #1f4bff;
    border-color: #1b43e6;
  }
  .source-amazon {
    background: #111111;
    border-color: #111111;
  }
  .source-n11 {
    background: #e11d48;
    border-color: #c3103f;
  }
  .source-excel {
    background: #059669;
    border-color: #047857;
  }
  .source-manual {
    background: #6b7280;
    border-color: #4b5563;
  }
  .source-other {
    background: #7c3aed;
    border-color: #6d28d9;
  }
  .products-table .filter-row {
    background: #f9fafb;
  }
  .products-table .filter-row input,
  .products-table .filter-row select {
    width: 100%;
    padding: 8px;
    border: 1px solid #d1d5db;
    border-radius: 4px;
    font-size: 13px;
    font-family: inherit;
  }
  .products-table .filter-row input:focus,
  .products-table .filter-row select:focus {
    outline: none;
    border-color: var(--brand);
    box-shadow: 0 0 0 3px rgba(var(--brand-rgb), 0.1);
  }
  .products-table tbody tr:hover {
    background: var(--toolbar-bg);
  }
  .products-table tbody tr:last-child td {
    border-bottom: none;
  }
  .btn-icon {
    background: none;
    border: none;
    cursor: pointer;
    padding: 6px;
    font-size: 16px;
    transition: transform 0.2s;
  }
  .btn-icon:hover {
    transform: scale(1.2);
  }
  .btn-icon-danger { color:#dc2626; }
  .btn-small {
    background: #f3f4f6;
    border: 1px solid #d1d5db;
    color: #374151;
    padding: 6px 10px;
    border-radius: 4px;
    cursor: pointer;
    font-size: 13px;
    font-weight: 600;
    transition: all 0.2s;
  }
  .btn-small:hover {
    background: #e5e7eb;
    border-color: #9ca3af;
  }
  .filter-badge {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    margin: 0;
    padding: 10px 14px;
    background: #f0f9ff;
    border: 2px solid #bfdbfe;
    border-radius: 6px;
    font-size: 14px;
    font-weight: 600;
    color: #1e40af;
    transition: all 0.3s ease;
    user-select: none;
  }
  .filter-badge:hover {
    background: #e0f2fe;
    border-color: #0284c7;
    box-shadow: 0 2px 8px rgba(2, 132, 199, 0.15);
    transform: translateY(-1px);
  }
  .filter-badge input[type="checkbox"] {
    width: 18px;
    height: 18px;
    cursor: pointer;
    accent-color: #0284c7;
  }
  .filter-badge input[type="checkbox"]:checked {
    background-color: #0284c7;
  }
  .filter-badge:has(input:checked) {
    background: #dbeafe;
    border-color: #0284c7;
    color: #0c4a6e;
  }
  .add-product-badge {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    padding: 10px 14px;
    background: #10b981;
    border: 2px solid #059669;
    border-radius: 6px;
    font-size: 14px;
    font-weight: 600;
    color: white;
    transition: all 0.3s ease;
    white-space: nowrap;
    user-select: none;
  }
  .add-product-badge:hover {
    background: #059669;
    border-color: #047857;
    box-shadow: 0 2px 8px rgba(16, 185, 129, 0.25);
    transform: translateY(-1px);
  }
  .add-product-badge:active {
    transform: translateY(0);
    box-shadow: 0 1px 4px rgba(16, 185, 129, 0.2);
  }
  
  .clear-filters-badge {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    padding: 10px 14px;
    background: #6b7280;
    border: 2px solid #4b5563;
    border-radius: 6px;
    font-size: 14px;
    font-weight: 600;
    color: white;
    transition: all 0.3s ease;
    white-space: nowrap;
    user-select: none;
  }
  .clear-filters-badge:hover {
    background: #4b5563;
    border-color: #374151;
    box-shadow: 0 2px 8px rgba(107, 114, 128, 0.25);
    transform: translateY(-1px);
  }
  .clear-filters-badge:active {
    transform: translateY(0);
    box-shadow: 0 1px 4px rgba(107, 114, 128, 0.2);
  }

  .excel-import-badge {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    padding: 10px 14px;
    background: #3b82f6;
    border: 2px solid #1d4ed8;
    border-radius: 6px;
    font-size: 14px;
    font-weight: 600;
    color: white;
    transition: all 0.3s ease;
    white-space: nowrap;
    user-select: none;
  }
  .excel-import-badge:hover {
    background: #1d4ed8;
    border-color: #1e40af;
    box-shadow: 0 2px 8px rgba(59, 130, 246, 0.25);
    transform: translateY(-1px);
  }
  .excel-import-badge:active {
    transform: translateY(0);
    box-shadow: 0 1px 4px rgba(59, 130, 246, 0.2);
  }
  .excel-export-badge {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    padding: 10px 14px;
    background: #6b7280;
    border: 2px solid #4b5563;
    border-radius: 6px;
    font-size: 14px;
    font-weight: 600;
    color: white;
    transition: all 0.3s ease;
    white-space: nowrap;
    user-select: none;
  }
  .excel-export-badge:hover {
    background: #4b5563;
    border-color: #374151;
    box-shadow: 0 2px 8px rgba(107, 114, 128, 0.25);
    transform: translateY(-1px);
  }
  .excel-export-badge:active {
    transform: translateY(0);
    box-shadow: 0 1px 4px rgba(107, 114, 128, 0.2);
  }
  .excel-delete-badge {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    padding: 10px 14px;
    background: #dc2626;
    border: 2px solid #b91c1c;
    border-radius: 6px;
    font-size: 14px;
    font-weight: 600;
    color: white;
    transition: all 0.3s ease;
    white-space: nowrap;
    user-select: none;
  }
  .excel-delete-badge:hover {
    background: #b91c1c;
    border-color: #991b1b;
    box-shadow: 0 2px 8px rgba(220, 38, 38, 0.25);
    transform: translateY(-1px);
  }
  .excel-delete-badge:active {
    transform: translateY(0);
    box-shadow: 0 1px 4px rgba(220, 38, 38, 0.2);
  }
  .excel-template-badge {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    padding: 10px 14px;
    background: #0f766e;
    border: 2px solid #0f5e57;
    border-radius: 6px;
    font-size: 14px;
    font-weight: 600;
    color: white;
    transition: all 0.3s ease;
    white-space: nowrap;
    user-select: none;
  }
  .excel-template-badge:hover {
    background: #0f5e57;
    border-color: #0b4a45;
    box-shadow: 0 2px 8px rgba(15, 118, 110, 0.25);
    transform: translateY(-1px);
  }
  .excel-template-badge:active {
    transform: translateY(0);
    box-shadow: 0 1px 4px rgba(15, 118, 110, 0.2);
  }
  .pagination {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin-top: 20px;
    padding: 20px;
  }
  .pagination button {
    padding: 8px 12px;
    border: 1px solid var(--card-border);
    background: var(--panel);
    cursor: pointer;
    border-radius: 6px;
    transition: all 0.2s;
  }
  .pagination button:hover {
    background: var(--brand);
    color: white;
    border-color: var(--brand);
  }
  .pagination button.active {
    background: var(--brand);
    color: white;
    border-color: var(--brand);
  }
  .pagination button:disabled {
    opacity: 0.5;
    cursor: not-allowed;
  }
  /* ===================== MODAL ===================== */
  .modal-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.6);
    z-index: 9999;
    backdrop-filter: blur(4px);
    animation: fadeIn 0.2s ease;
  }
  .modal-overlay.show {
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .modal-card {
    background: white;
    border-radius: 12px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
    width: 90%;
    max-width: 600px;
    max-height: 90vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    animation: slideUp 0.3s ease;
  }
  .modal-header {
    padding: 16px 20px;
    border-bottom: 1px solid #e5e7eb;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  .modal-header h3 {
    margin: 0;
    font-size: 18px;
    font-weight: 600;
    color: #111827;
  }
  .modal-close {
    background: none;
    border: none;
    font-size: 24px;
    cursor: pointer;
    color: #6b7280;
    padding: 0;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 6px;
    transition: all 0.2s;
  }
  .modal-close:hover {
    background: #f3f4f6;
    color: #111827;
  }
  .modal-body {
    padding: 14px 20px;
    overflow-y: auto;
    flex: 1;
  }
  .modal-body-compact {
    padding: 8px 20px;
    flex: 0;
  }
  .modal-footer {
    padding: 12px 20px;
    border-top: 1px solid #e5e7eb;
    display: flex;
    gap: 12px;
    justify-content: flex-end;
  }
  .modal-checkbox-label {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
  }
  .modal-checkbox-input-auto { width: auto; }
  .edit-product-status {
    font-size: 13px;
    text-align: center;
    display: none;
  }
  .delete-msg-main { margin: 0 0 10px 0; font-size: 14px; }
  .delete-msg-sub { margin: 10px 0; font-size: 12px; color: #666; }
  .danger-modal-card { border: 2px solid #dc2626; }
  .danger-modal-card-alt { border-color: #b91c1c; }
  .danger-modal-header {
    background: #fee2e2;
    border-bottom: 2px solid #dc2626;
  }
  .danger-modal-header-alt { border-bottom-color: #b91c1c; }
  .danger-modal-title { color: #991b1b; }
  .danger-main-text {
    margin: 0 0 12px 0;
    font-size: 14px;
    color: #991b1b;
    font-weight: 600;
  }
  .danger-underline-red {
    color: #dc2626;
    text-decoration: underline;
  }
  .danger-alert-box {
    background: #fee2e2;
    border-left: 4px solid #dc2626;
    padding: 10px;
    margin: 10px 0;
    border-radius: 4px;
  }
  .danger-alert-text {
    margin: 0;
    font-size: 12px;
    color: #991b1b;
  }
  .danger-footnote {
    margin: 10px 0 0 0;
    font-size: 11px;
    color: #666;
  }
  .btn-danger-strong {
    background: #7f1d1d;
    border: 2px solid #dc2626;
  }
  .ms-section {
    margin-bottom: 20px;
    padding: 15px;
    background: #fff;
    border-radius: 8px;
    border: 1px solid #e5e7eb;
  }
  .ms-section-title {
    margin: 0 0 12px;
    color: #1f2937;
    font-size: 14px;
  }
  .ms-grid-2 {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
  }
  .ms-grid-1 {
    display: grid;
    grid-template-columns: repeat(1, 1fr);
    gap: 12px;
  }
  .ms-field-col {
    display: flex;
    flex-direction: column;
    gap: 4px;
  }
  .ms-label {
    font-weight: 600;
    font-size: 12px;
    color: #374151;
  }
  .ms-input {
    padding: 8px 10px;
    border: 1px solid #cbd5e1;
    border-radius: 6px;
    font-size: 12px;
  }
  .form-group {
    margin-bottom: 10px;
  }
  .form-group label {
    display: block;
    margin-bottom: 4px;
    font-weight: 500;
    color: #374151;
    font-size: 14px;
  }
  .form-group label .required {
    color: #ef4444;
    margin-left: 2px;
  }
  .form-group input,
  .form-group select {
    width: 100%;
    padding: 7px 10px;
    border: 1px solid #d1d5db;
    border-radius: 6px;
    font-size: 14px;
    transition: all 0.2s;
    box-sizing: border-box;
  }
  .form-group input:focus,
  .form-group select:focus {
    outline: none;
    border-color: var(--brand);
    box-shadow: 0 0 0 3px rgba(217, 70, 239, 0.1);
  }
  .form-group input::placeholder {
    color: #9ca3af;
  }
  .form-hint {
    font-size: 11px;
    color: #6b7280;
    margin-top: 2px;
  }
  @keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
  }
  @keyframes slideUp {
    from {
      opacity: 0;
      transform: translateY(20px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }

  .modal-card-small {
    max-width: 400px;
  }

  .btn-primary,
  .btn-secondary,
  .btn-danger {
    padding: 10px 16px;
    border: none;
    border-radius: 6px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
  }

  .btn-primary {
    background: #3b82f6;
    color: white;
  }

  .btn-primary:hover {
    background: #2563eb;
  }

  .btn-secondary {
    background: #e5e7eb;
    color: #374151;
  }

  .btn-secondary:hover {
    background: #d1d5db;
  }

  .btn-danger {
    background: #ef4444;
    color: white;
  }

  .btn-danger:hover {
    background: #dc2626;
  }

  /* ====== MARKETPLACE ACCORDION STYLES ====== */
  .marketplace-accordion {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
    gap: 15px;
    margin-top: 20px;
    padding: 0 10px;
  }

  .accordion-item {
    border: 2px solid #e5e7eb;
    border-radius: 10px;
    overflow: hidden;
    background: #fff;
    box-shadow: 0 1px 3px rgba(0,0,0,0.05);
    transition: all 0.2s ease;
  }

  .accordion-item:hover {
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
  }

  .accordion-header {
    width: 100%;
    padding: 16px;
    background: #fff;
    border: none;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-weight: 600;
    font-size: 15px;
    transition: all 0.2s ease;
  }

  .accordion-body {
    padding: 20px;
    background: #f9fafb;
    border-top: 1px solid #e5e7eb;
    animation: slideDown 0.3s ease;
  }

  @keyframes slideDown {
    from {
      opacity: 0;
      max-height: 0;
      overflow: hidden;
    }
    to {
      opacity: 1;
      max-height: 500px;
      overflow: visible;
    }
  }

  .settings-form {
    display: grid;
    gap: 12px;
  }

  .settings-form .form-group {
    display: flex;
    flex-direction: column;
    gap: 4px;
  }

  .settings-form .form-group label {
    font-weight: 600;
    font-size: 12px;
    color: #374151;
  }

  .settings-form .form-group input {
    padding: 6px 10px;
    border: 1px solid #cbd5e1;
    border-radius: 6px;
    font-size: 12px;
    background: white;
    transition: all 0.2s ease;
  }

  .settings-form .form-group input:focus {
    outline: none;
    border-color: #3b82f6;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
  }

  .settings-description {
    color: #6b7280;
    font-size: 14px;
    margin-bottom: 20px;
  }

  .accordion-header-static {
    cursor: default;
    pointer-events: none;
  }

  .accordion-body-open {
    display: block;
  }

  .settings-section-divider {
    border-top: 1px solid #e5e7eb;
    padding-top: 8px;
    margin-top: 8px;
  }

  .settings-single-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2px;
  }

  .settings-shipping-title {
    font-weight: bold;
    color: #666;
    margin: 0 0 8px 0;
    font-size: 14px;
  }

  .settings-shipping-grid {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 3px;
    margin-bottom: 8px;
  }

  .settings-shipping-group {
    min-height: 70px;
  }

  .settings-barem-strong {
    color: #dc2626;
  }

  .settings-infinity-box {
    padding: 8px;
    background: #f3f4f6;
    border-radius: 4px;
    font-size: 14px;
    font-weight: 500;
    min-height: 34px;
    display: flex;
    align-items: center;
  }

  .settings-save-btn {
    margin-top: 15px;
    width: 100%;
  }

  .accordion-item-market-trendyol {
    border-color: #f27a1a;
  }

  .accordion-header-trendyol {
    color: #f27a1a;
  }

  .accordion-body-market-trendyol {
    border-top: 2px solid #f27a1a;
  }

  .accordion-item-market-hepsiburada {
    border-color: #1f4bff;
  }

  .accordion-header-hepsiburada {
    color: #1f4bff;
  }

  .accordion-body-market-hepsiburada {
    border-top: 2px solid #1f4bff;
  }

  .accordion-item-market-amazon {
    border-color: #111111;
  }

  .accordion-header-amazon {
    color: #111111;
  }

  .accordion-body-market-amazon {
    border-top: 2px solid #111111;
  }

  .accordion-item-market-n11 {
    border-color: #e11d48;
  }

  .accordion-header-n11 {
    color: #e11d48;
  }

  .accordion-body-market-n11 {
    border-top: 2px solid #e11d48;
  }

  /* Geri Bildirim Butonu */
  .feedback-button {
    position: fixed;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    z-index: 9999;
    background: var(--brand);
    color: white;
    border: none;
    padding: 12px 8px;
    border-radius: 8px;
    cursor: pointer;
    writing-mode: vertical-rl;
    text-orientation: mixed;
    font-weight: 600;
    font-size: 13px;
    letter-spacing: 2px;
    box-shadow: 0 4px 12px rgba(242, 122, 26, 0.3);
    transition: all 0.3s ease;
    transform: translateY(-50%) rotate(180deg);
  }

  .feedback-button:hover {
    background: #d96b17;
    box-shadow: 0 6px 16px rgba(242, 122, 26, 0.4);
    padding: 14px 10px;
  }

  .feedback-button:active {
    transform: translateY(-50%) rotate(180deg) scale(0.98);
  }

  /* Geri Bildirim Modal */
  .feedback-modal-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 10000;
    justify-content: center;
    align-items: center;
  }

  .feedback-modal-overlay.active {
    display: flex;
  }

  .feedback-modal {
    background: white;
    border-radius: 12px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2);
    padding: 24px;
    max-width: 500px;
    width: 90vw;
    animation: slideInUp 0.3s ease;
  }

  @keyframes slideInUp {
    from {
      transform: translateY(30px);
      opacity: 0;
    }
    to {
      transform: translateY(0);
      opacity: 1;
    }
  }

  .feedback-modal h3 {
    margin: 0 0 16px 0;
    color: var(--brand);
    font-size: 18px;
    font-weight: 700;
  }

  .feedback-modal textarea {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid var(--card-border);
    border-radius: 6px;
    font-family: inherit;
    font-size: 14px;
    resize: vertical;
    min-height: 120px;
    margin-bottom: 16px;
    box-sizing: border-box;
  }

  .feedback-modal textarea:focus {
    outline: none;
    border-color: var(--brand);
    box-shadow: 0 0 0 3px rgba(242, 122, 26, 0.1);
  }

  .feedback-modal-buttons {
    display: flex;
    gap: 10px;
    justify-content: flex-end;
  }

  .feedback-modal-buttons button {
    padding: 8px 16px;
    border: none;
    border-radius: 6px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
  }

  .feedback-modal-buttons .btn-cancel {
    background: #e5e7eb;
    color: var(--text);
  }

  .feedback-modal-buttons .btn-cancel:hover {
    background: #d1d5db;
  }

  .feedback-modal-buttons .btn-send {
    background: var(--brand);
    color: white;
  }

  .feedback-modal-buttons .btn-send:hover {
    background: #d96b17;
  }

  .feedback-modal-buttons .btn-send:disabled {
    background: #cbd5e1;
    cursor: not-allowed;
  }