/* Influencer paneli (influencer.akticaret.tr) — akticaret.tr tanıtım sitesiyle aynı dil: Inter, beyaz + lacivert. */
:root {
  --bg:#fff; --page:#F7F8FC; --bg3:#EEF0F7; --ink:#09101E; --ink2:#374151; --muted:#626B7A;
  --acc:#1C43E1; --acc-soft:rgba(28,67,225,.07); --line:#E5E8EF; --line2:#D0D5E0;
  --ok:#047857; --ok-bg:#ECFDF5; --warn:#B45309; --warn-bg:#FFF7ED; --bad:#B42318; --bad-bg:#FEF3F2;
  --r:14px; --ease:cubic-bezier(.16,1,.3,1);
}
*,*::before,*::after { box-sizing:border-box }
html { -webkit-text-size-adjust:100% }
body { margin:0; background:var(--page); color:var(--ink); font:15px/1.6 'Inter',system-ui,-apple-system,'Segoe UI',sans-serif;
       -webkit-font-smoothing:antialiased; caret-color:var(--acc) }
::selection { background:rgba(28,67,225,.16) }
:focus-visible { outline:2px solid var(--acc); outline-offset:3px; border-radius:6px }
a { color:var(--acc); text-decoration:none }
a:hover { text-decoration:underline; text-underline-offset:.2em }
h1,h2,h3 { margin:0; letter-spacing:-.025em; line-height:1.15; text-wrap:balance }
h1 { font-size:clamp(1.6rem,4vw,2.1rem); font-weight:800; letter-spacing:-.03em }
h2 { font-size:1.05rem; font-weight:700 }
p { margin:0; text-wrap:pretty }
.muted { color:var(--muted) }
.small { font-size:.875rem }
.tiny { font-size:.8rem }
.nw { white-space:nowrap }

/* üst çubuk */
.top { position:sticky; top:0; z-index:20; background:rgba(255,255,255,.9); backdrop-filter:saturate(1.6) blur(14px);
       -webkit-backdrop-filter:saturate(1.6) blur(14px); border-bottom:1px solid var(--line) }
.top-in { max-width:960px; margin:0 auto; padding:0 20px; height:60px; display:flex; align-items:center; gap:1rem }
.brand { font-weight:800; letter-spacing:-.02em; color:var(--ink); text-decoration:none; white-space:nowrap }
.brand span { color:var(--acc) }
.brand small { color:var(--muted); font-weight:500; margin-left:.35rem }
.tabs { display:flex; gap:.15rem; margin-left:1rem }
.tabs a { padding:.45rem .8rem; border-radius:9px; color:var(--muted); font-weight:500; font-size:.9rem; text-decoration:none }
.tabs a:hover { color:var(--ink); background:var(--page) }
.tabs a.on { color:var(--acc); background:var(--acc-soft); font-weight:600 }
.me { margin-left:auto; display:flex; align-items:center; gap:.5rem }
.avatar { width:34px; height:34px; border-radius:50%; background:var(--acc); color:#fff; display:grid; place-items:center;
          font-weight:700; font-size:.85rem; text-decoration:none }
.avatar:hover { text-decoration:none; filter:brightness(1.1) }
.linkbtn { background:none; border:0; color:var(--muted); font:inherit; font-size:.875rem; cursor:pointer; padding:.4rem .5rem; border-radius:8px }
.linkbtn:hover { color:var(--ink); background:var(--page) }

/* alt sekme çubuğu (telefon) */
.bottom { display:none }
@media (max-width:760px) {
  .tabs { display:none }
  .bottom { display:grid; grid-template-columns:repeat(5,1fr); position:fixed; left:0; right:0; bottom:0; z-index:20; background:#fff;
            border-top:1px solid var(--line); padding:.35rem .25rem calc(.35rem + env(safe-area-inset-bottom)) }
  .bottom a { display:flex; flex-direction:column; align-items:center; gap:.15rem; font-size:.7rem; color:var(--muted); text-decoration:none; padding:.3rem 0 }
  .bottom a svg { width:22px; height:22px }
  .bottom a.on { color:var(--acc); font-weight:600 }
  main.app { padding-bottom:6rem !important }
  .brand small { display:none }
}

main { max-width:960px; margin:0 auto; padding:1.75rem 20px 3rem }
main.narrow { max-width:480px; padding-top:9vh }
.head { margin-bottom:1.25rem }
.head p { margin-top:.4rem; color:var(--muted) }

/* bileşenler */
.card { background:var(--bg); border:1px solid var(--line); border-radius:var(--r); padding:1.25rem; box-shadow:0 1px 2px rgba(9,16,30,.04) }
.card + .card, .stack > * + * { margin-top:.85rem }
.card.warn { border-color:#FCD9A8; background:#FFFBF5 }
.card.bad { border-color:#FECDCA; background:#FFFAFA }
.row { display:flex; align-items:center; justify-content:space-between; gap:.75rem; flex-wrap:wrap }
.grid2 { display:grid; grid-template-columns:1fr 1fr; gap:.85rem }
.grid3 { display:grid; grid-template-columns:repeat(3,1fr); gap:.85rem }
@media (max-width:600px) { .grid2,.grid3 { grid-template-columns:1fr } }

.item { display:flex; gap:.85rem; align-items:flex-start }
.item .ic { width:40px; height:40px; border-radius:12px; display:grid; place-items:center; flex-shrink:0; background:var(--acc-soft); color:var(--acc) }
.item .ic svg { width:20px; height:20px }
.card.warn .item .ic { background:var(--warn-bg); color:var(--warn) }
.card.bad .item .ic { background:var(--bad-bg); color:var(--bad) }
.item .t { font-weight:600 }
a.card { display:block; color:inherit; text-decoration:none; transition:border-color .2s, box-shadow .2s, transform .2s var(--ease) }
a.card:hover { border-color:var(--line2); box-shadow:0 8px 14px -8px rgba(9,16,30,.15); transform:translateY(-1px) }

.badge { display:inline-flex; align-items:center; gap:.3rem; padding:.15rem .6rem; border-radius:100px; font-size:.75rem; font-weight:600; white-space:nowrap }
.b-blue { background:#EEF2FF; color:var(--acc) } .b-green { background:var(--ok-bg); color:var(--ok) }
.b-amber { background:var(--warn-bg); color:var(--warn) } .b-red { background:var(--bad-bg); color:var(--bad) }
.b-gray { background:var(--bg3); color:var(--muted) }

label.f { display:block }
.lbl { display:block; font-size:.85rem; font-weight:600; color:var(--ink2); margin-bottom:.35rem }
.in, select.in, textarea.in { width:100%; background:#fff; border:1px solid var(--line2); border-radius:10px; padding:.72rem .85rem;
  font:inherit; font-size:1rem; color:var(--ink); transition:border-color .2s, box-shadow .2s }
.in:hover { border-color:#AEB6C4 }
.in:focus { outline:none; border-color:var(--acc); box-shadow:0 0 0 4px rgba(28,67,225,.12) }
.hint { display:block; font-size:.8rem; color:var(--muted); margin-top:.3rem }

.btn { display:inline-flex; align-items:center; justify-content:center; gap:.5rem; border:1.5px solid var(--line2); background:#fff; color:var(--ink2);
       padding:.75rem 1.2rem; border-radius:10px; font:inherit; font-weight:600; font-size:.925rem; cursor:pointer; text-decoration:none;
       transition:background .2s, border-color .2s, color .2s, transform .15s var(--ease) }
.btn:hover { text-decoration:none; border-color:var(--ink); color:var(--ink) }
.btn:active { transform:scale(.985) }
.btn.primary { background:var(--ink); border-color:var(--ink); color:#fff }
.btn.primary:hover { background:var(--acc); border-color:var(--acc); color:#fff }
.btn.block { width:100% }
.btn.sm { padding:.45rem .8rem; font-size:.85rem }
.btn[disabled] { opacity:.6; cursor:progress }
.btn svg { width:16px; height:16px }

.msg { border-radius:12px; padding:.8rem 1rem; margin-bottom:1rem; font-size:.925rem; display:flex; gap:.6rem; align-items:flex-start }
.msg.ok { background:var(--ok-bg); color:#065F46; border:1px solid #A7F3D0 }
.msg.err { background:var(--bad-bg); color:#912018; border:1px solid #FECDCA }

.chips { display:flex; flex-wrap:wrap; gap:.45rem }
.chips label { position:relative; display:inline-flex; align-items:center; padding:.45rem .85rem; border:1px solid var(--line2); border-radius:100px;
               font-size:.875rem; cursor:pointer; background:#fff; user-select:none; transition:background .15s, border-color .15s, color .15s }
.chips input { position:absolute; opacity:0; pointer-events:none }
.chips label:has(input:checked) { background:var(--ink); border-color:var(--ink); color:#fff }
.chips label:has(input:focus-visible) { box-shadow:0 0 0 3px rgba(28,67,225,.3) }
.chips a { display:inline-flex; padding:.4rem .8rem; border:1px solid var(--line2); border-radius:100px; font-size:.85rem; color:var(--ink2); text-decoration:none }
.chips a.on { background:var(--acc); border-color:var(--acc); color:#fff }

.consent { display:flex; gap:.6rem; align-items:flex-start; font-size:.875rem; color:var(--ink2) }
.consent input { width:18px; height:18px; margin-top:.15rem; accent-color:var(--acc); flex-shrink:0 }
.hp { position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden }

/* ürün ızgarası */
.pgrid { display:grid; grid-template-columns:repeat(4,1fr); gap:.85rem }
@media (max-width:860px) { .pgrid { grid-template-columns:repeat(3,1fr) } }
@media (max-width:560px) { .pgrid { grid-template-columns:repeat(2,1fr); gap:.6rem } }
.pcard { background:#fff; border:1px solid var(--line); border-radius:var(--r); overflow:hidden; display:flex; flex-direction:column }
.pcard img { width:100%; aspect-ratio:1; object-fit:cover; background:var(--bg3); display:block }
.pcard .pb { padding:.7rem .8rem .85rem; display:flex; flex-direction:column; gap:.45rem; flex:1 }
.pcard .pn { font-size:.85rem; font-weight:600; line-height:1.35; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden }
.pcard .sizes { display:flex; flex-wrap:wrap; gap:.25rem; margin-top:auto }
.pcard .sizes span { font-size:.7rem; padding:.05rem .4rem; border:1px solid var(--line); border-radius:5px; color:var(--muted) }
.pcard .sizes span.mine { border-color:var(--acc); color:var(--acc); font-weight:600 }

.kv { display:grid; grid-template-columns:120px 1fr; gap:.4rem 1rem; font-size:.9rem }
.kv dt { color:var(--muted) }
.kv dd { margin:0 }
.steps { display:flex; gap:.35rem; align-items:center; font-size:.78rem; color:var(--muted); flex-wrap:wrap }
.steps b { color:var(--ink) }
.steps .dot { width:8px; height:8px; border-radius:50%; background:var(--line2) }
.steps .dot.on { background:var(--acc) }
.steps .dot.done { background:var(--ok) }
.pager { display:flex; gap:.5rem; justify-content:center; margin-top:1.25rem }
.empty { text-align:center; color:var(--muted); padding:2rem 1rem }
.empty svg { width:32px; height:32px; opacity:.45; display:block; margin:0 auto .5rem }
details > summary { cursor:pointer; color:var(--acc); font-size:.875rem; font-weight:500 }
@media (prefers-reduced-motion:reduce) { * { transition:none !important } }