/* itemsatinal - yeni özelliklerin stilleri (sitenin mevcut görünümünü değiştirmez; renkler style.css değişkenlerinden gelir).
   Para çekme adımları, mağaza teşvik kartı, başlangıç adımları, kurumsal sayfalar, çerez bildirimi,
   mobil alt menü, şifre göster/gizle ve şifre gücü. */

/* ---------- para çekme adım göstergesi ---------- */
ol.flow{list-style:none;padding:0}
.flow{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));margin:4px 0 20px;border:1px solid var(--line);border-radius:var(--r);background:var(--card);overflow:hidden}
.flow.c2{grid-template-columns:repeat(2,minmax(0,1fr))}
.flow-step{display:flex;align-items:center;gap:12px;padding:14px 16px;border-right:1px solid var(--line);min-width:0;color:var(--muted)}
.flow-step:last-child{border-right:0}
.flow-step .n{display:grid;place-items:center;flex:none;width:30px;height:30px;border-radius:50%;border:2px solid var(--line-2);font-weight:700;font-size:.88rem;color:var(--muted)}
.flow-step .n .i{width:16px;height:16px;stroke-width:2.6}
.flow-step b{display:block;color:var(--text);font-size:.92rem;line-height:1.2}
.flow-step small{display:block;font-size:.78rem;line-height:1.3}
.flow-step.done .n{background:var(--ok);border-color:var(--ok);color:#fff}
.flow-step.now{background:var(--p-soft)}
.flow-step.now .n{border-color:var(--p);color:var(--p-2)}
.flow-step.wait .n{border-color:var(--warn);color:var(--warn);background:rgba(251,191,36,.1)}
@media (max-width:640px){.flow,.flow.c2{grid-template-columns:1fr}.flow-step{border-right:0;border-bottom:1px solid var(--line);padding:10px 14px}.flow-step:last-child{border-bottom:0}}

/* ---------- mağaza teşvik / kimlik kartı ---------- */
.promo-store{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);border:1px solid var(--line);border-radius:var(--r);overflow:hidden;background:var(--card)}
.promo-store .ps-l{padding:26px 26px 22px}
.promo-store .ps-l h2{font-size:1.35rem;margin-bottom:6px}
.promo-store .ps-r{padding:22px 24px;background:var(--card-2);border-left:1px solid var(--line)}
.ps-r h3{font-size:1rem;margin-bottom:12px}
.benefits{list-style:none;padding:0;margin:16px 0 0;display:grid;gap:12px}
.benefits li{display:flex;gap:12px;align-items:flex-start}
.benefits .bi{display:grid;place-items:center;flex:none;width:34px;height:34px;border-radius:9px;background:var(--p-soft);color:var(--p-2)}
.benefits b{display:block;font-size:.94rem}
.benefits small{display:block;color:var(--muted);font-size:.85rem}
@media (max-width:820px){.promo-store{grid-template-columns:1fr}.promo-store .ps-r{border-left:0;border-top:1px solid var(--line)}}

.info-box{display:flex;gap:12px;align-items:flex-start;padding:14px 16px;border-radius:var(--r-sm);border:1px solid var(--line);background:var(--card-2);font-size:.9rem}
.info-box .i{flex:none;color:var(--p-2);margin-top:2px}
.info-box.warn{border-color:rgba(251,191,36,.4);background:rgba(251,191,36,.07)}
.info-box.warn .i{color:var(--warn)}
.info-box.ok{border-color:rgba(52,211,153,.35);background:rgba(52,211,153,.07)}
.info-box.ok .i{color:var(--ok)}
.mb0{margin-bottom:0}

/* ---------- hesap: başlangıç adımları ---------- */
.onb{border:1px solid var(--line);border-radius:var(--r);background:var(--card);padding:18px 20px;margin-bottom:18px}
.onb-h{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:10px}
.onb-h h2{font-size:1.05rem;margin:0}
.onb-bar{height:6px;border-radius:6px;background:var(--card-3);overflow:hidden;margin:4px 0 12px}
.onb-bar span{display:block;height:100%;background:var(--ok);border-radius:6px}
.onb ol{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(165px,1fr));gap:8px}
.onb li a,.onb li>span{display:flex;gap:10px;align-items:center;padding:10px 12px;border-radius:9px;border:1px solid var(--line);color:var(--text);font-size:.9rem;height:100%}
.onb li a:hover{border-color:var(--p);color:var(--hi)}
.onb .ck{display:grid;place-items:center;flex:none;width:22px;height:22px;border-radius:50%;border:2px solid var(--line-2)}
.onb li.ok .ck{background:var(--ok);border-color:var(--ok);color:#fff}
.onb li.ok .ck .i{width:14px;height:14px;stroke-width:3}
.onb li.ok a,.onb li.ok>span{color:var(--muted)}
.onb li small{display:block;color:var(--dim);font-size:.78rem}

/* ---------- kayıt / giriş ---------- */
.pw-wrap{position:relative}
.pw-wrap input{padding-right:64px!important}
.pw-wrap .pw-eye{position:absolute;right:6px;top:50%;transform:translateY(-50%);background:none;border:0;color:var(--muted);font:inherit;font-size:.8rem;font-weight:600;cursor:pointer;padding:6px 8px;border-radius:6px}
.pw-wrap .pw-eye:hover{color:var(--hi);background:var(--hov)}
.pw-meter{display:grid;grid-template-columns:repeat(4,1fr);gap:4px;margin-top:8px}
.pw-meter i{height:4px;border-radius:4px;background:var(--card-3)}
.pw-meter[data-s="1"] i:nth-child(-n+1){background:var(--bad)}
.pw-meter[data-s="2"] i:nth-child(-n+2){background:var(--warn)}
.pw-meter[data-s="3"] i:nth-child(-n+3){background:#84cc16}
.pw-meter[data-s="4"] i{background:var(--ok)}
.u-check{font-size:.8rem;margin-top:5px;min-height:1.1em}
.u-check.ok{color:var(--ok)} .u-check.bad{color:var(--bad)}
.auth-note{margin-top:22px;padding:12px 14px;border-radius:10px;background:rgba(0,0,0,.2);font-size:.86rem;color:rgba(255,255,255,.88)}
.auth.card{padding:28px 30px;margin:40px auto}

/* ---------- kurumsal sayfalar ---------- */
.legal{display:grid;grid-template-columns:240px minmax(0,1fr);gap:22px;align-items:start;margin:24px auto 10px}
.legal nav{position:sticky;top:84px;display:grid;gap:2px;padding:8px;border:1px solid var(--line);border-radius:var(--r);background:var(--card)}
.legal nav a{padding:9px 11px;border-radius:8px;color:var(--muted);font-size:.92rem}
.legal nav a:hover{background:var(--hov);color:var(--hi)}
.legal nav a.on{background:var(--p-soft);color:var(--hi);font-weight:600}
.legal article{padding:28px 32px}
.legal article h1{font-size:1.6rem}
.legal article h2{font-size:1.1rem;margin-top:1.4em}
@media (max-width:820px){.legal{grid-template-columns:1fr}.legal nav{position:static;display:flex;overflow-x:auto}.legal nav a{white-space:nowrap}.legal article{padding:20px 18px}}

/* ---------- çerez bildirimi ---------- */
.cookie{position:fixed;left:16px;bottom:16px;z-index:95;max-width:420px;display:flex;gap:12px;align-items:center;padding:12px 14px;border-radius:12px;background:var(--card-2);border:1px solid var(--line-2);box-shadow:var(--shadow);font-size:.86rem;color:var(--muted)}
.cookie[hidden]{display:none}
.cookie .btn{flex:none}
@media (max-width:640px){.cookie{left:10px;right:10px;bottom:72px;max-width:none}}

/* ---------- mobil alt menü ---------- */
.mbar{display:none}
@media (max-width:760px){
  .mbar{display:grid;grid-template-columns:repeat(5,1fr);position:fixed;left:0;right:0;bottom:0;z-index:85;background:var(--card);border-top:1px solid var(--line);padding:6px 4px calc(6px + env(safe-area-inset-bottom))}
  .mbar a{display:flex;flex-direction:column;align-items:center;gap:2px;padding:4px 0;font-size:.68rem;color:var(--muted);position:relative}
  .mbar a.on{color:var(--p-2)}
  .mbar .i{width:22px;height:22px}
  .mbar .dot{position:absolute;top:0;left:calc(50% + 6px);min-width:16px;height:16px;padding:0 4px;border-radius:999px;background:var(--accent);color:#fff;font-size:10px;font-weight:700;font-style:normal;display:grid;place-items:center}
  body{padding-bottom:64px}
  .chat-root{bottom:74px}
  .totop{bottom:136px}
}

/* ---------- açık temada okunmayan sabit renkler (yalnızca gündüz modunda etkili) ---------- */
html[data-theme="light"] label,html[data-theme="light"] .notice,html[data-theme="light"] .empty strong,html[data-theme="light"] .rev-card p{color:var(--text)}
html[data-theme="light"] .flash-ok{color:#05603a;background:#ecfdf3;border-color:#a6f4c5}
html[data-theme="light"] .flash-bad{color:#912018;background:#fef3f2;border-color:#fecdca}
html[data-theme="light"] .flash-warn{color:#93370d;background:#fffaeb;border-color:#fedf89}
html[data-theme="light"] .flash-info{color:#1849a9;background:#eff8ff;border-color:#b2ddff}
html[data-theme="light"] .notice.warn{color:#93370d}
html[data-theme="light"] .notice.bad{color:#912018}
html[data-theme="light"] .notice.ok{color:#05603a}

/* site başlığı tek satırda kalsın */
.brand{white-space:nowrap;flex:none}

/* bakiye simgesi (üst menü) */
.chip-bal{padding:4px 13px 4px 4px;gap:8px}
.chip-bal .bal-ic{display:grid;place-items:center;width:26px;height:26px;border-radius:50%;color:var(--ok);background:color-mix(in srgb,var(--ok) 16%,transparent);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--ok) 30%,transparent)}
.chip-bal .bal-ic .i{width:17px;height:17px;stroke-width:2}
.chip-bal:hover .bal-ic{background:color-mix(in srgb,var(--ok) 24%,transparent)}
:root[data-theme="light"] .chip-bal .bal-ic{color:#059669}

/* mesajlar: kişi arayıp yeni konuşma */
.dm-new{position:relative;margin-bottom:16px;padding:16px}
.dm-label{display:block;font-weight:600;font-size:.9rem;margin-bottom:8px;color:var(--hi)}
.dm-box{display:flex;align-items:center;gap:8px;border:1px solid var(--line-2);border-radius:12px;background:var(--bg-2);padding:5px 5px 5px 12px}
.dm-box:focus-within{border-color:var(--p);box-shadow:0 0 0 3px var(--p-soft)}
.dm-ic{color:var(--dim);display:flex}
.dm-box input{flex:1;min-width:0;border:0;background:transparent;color:var(--text);font:inherit;padding:8px 2px;outline:none}
.dm-results{position:absolute;left:16px;right:16px;top:calc(100% - 8px);z-index:30;background:var(--card-2);border:1px solid var(--line-2);border-radius:12px;box-shadow:var(--shadow);padding:6px;max-height:360px;overflow:auto}
.dm-item{display:flex;align-items:center;gap:12px;width:100%;padding:9px 10px;border:0;border-radius:9px;background:transparent;color:var(--text);text-align:left;cursor:pointer;font:inherit}
.dm-item.on,.dm-item:hover{background:var(--hov)}
.dm-av{flex:none;width:34px;height:34px;border-radius:50%;display:grid;place-items:center;background:var(--p-soft);color:var(--p-2);font-weight:700;overflow:hidden}
.dm-av img{width:100%;height:100%;object-fit:cover}
.dm-tx{display:flex;flex-direction:column;min-width:0}
.dm-tx b{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dm-tx small{color:var(--muted);font-size:.8rem}
.dm-empty{padding:12px;color:var(--muted);font-size:.9rem}
@media(max-width:520px){.dm-box .btn{padding-left:10px;padding-right:10px}}
.chat-msg.pending{opacity:.6}
.chat-msg.err{outline:1px solid var(--bad)}
.chat-msg.err small{color:var(--bad)}