/* Oto Kokusu / Mouse Pad hattı */
.okmp-draft{background:repeating-linear-gradient(45deg,#FEF3C7,#FEF3C7 14px,#FDE68A 14px,#FDE68A 28px);border-bottom:2px solid #F59E0B;color:#78350F;font-size:.92rem}
.okmp-draft-in{display:flex;flex-wrap:wrap;gap:10px;align-items:center;justify-content:space-between;padding-top:9px;padding-bottom:9px}
.okmp-draft form{margin:0}.okmp-pubbtn{background:#16A34A;color:#fff;border:0;font-weight:800}.okmp-pubbtn:hover{background:#15803D;color:#fff}
.okmp-draft .btn-onsl{background:#fff;color:#78350F;border-color:#F59E0B}
.okmp-art{width:100%;height:100%;display:block}

/* hero */
.okh{position:relative;background:radial-gradient(700px 420px at 85% 20%,rgba(34,211,238,.25),transparent 70%),radial-gradient(600px 400px at 70% 90%,rgba(168,85,247,.28),transparent 70%),linear-gradient(130deg,#050B1F,#0B1A3A 50%,#1E1B4B);color:#fff;overflow:hidden;padding-bottom:34px}
.okh .crumbs,.okh .crumbs a{color:rgba(255,255,255,.75)}
.okh-in{display:grid;grid-template-columns:1.05fr .95fr;gap:34px;align-items:center;padding-top:14px}
.okh-badge{display:inline-flex;gap:8px;align-items:center;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.22);border-radius:999px;padding:5px 14px 5px 5px;font-size:.86rem;font-weight:600;margin-bottom:16px}
.okh-badge span{background:#FDE68A;color:#78350F;font-weight:900;border-radius:999px;padding:3px 10px;font-size:.75rem}
.okh h1{color:#fff;font-size:clamp(2rem,4.2vw,3.4rem);line-height:1.04;letter-spacing:-.03em;margin:0 0 .45em}
.okh h1 em{font-style:normal;background:linear-gradient(90deg,#67E8F9,#C4B5FD 60%,#F9A8D4);-webkit-background-clip:text;background-clip:text;color:transparent}
.okh-lead{font-size:1.08rem;opacity:.9;max-width:58ch}
.okh-btns,.okt-btns,.okx-b,.okb-btns{display:flex;flex-wrap:wrap;gap:10px;margin:22px 0}
.okh-b1{background:#22D3EE;color:#05212A;border:0;font-weight:800}.okh-b1:hover{background:#67E8F9;color:#05212A}
.okh-b2{background:#fff;color:#0B1A3A;border:0;font-weight:800}.okh-b2:hover{background:#FDE68A;color:#0B1A3A}
.okh-b3{background:transparent;color:#fff;border:1.5px solid rgba(255,255,255,.55)}.okh-b3:hover{background:#fff;color:#0B1A3A}
.okh-stats{list-style:none;padding:0;margin:6px 0 0;display:flex;flex-wrap:wrap;gap:10px}
.okh-stats li{background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.16);border-radius:14px;padding:9px 16px;display:flex;flex-direction:column;min-width:96px}
.okh-stats b{font-family:var(--display);font-size:1.6rem;line-height:1}.okh-stats span{font-size:.8rem;opacity:.8}
.okh-art{position:relative;height:430px}
.okh-sc{position:absolute;border-radius:24px;overflow:hidden;border:5px solid rgba(255,255,255,.9);box-shadow:0 30px 60px rgba(0,0,0,.45);background:#0B1A3A}
.okh-sc .okmp-scene{filter:none}
.okh-sc1{width:76%;left:0;top:0;transform:rotate(-3deg)}.okh-sc2{width:58%;right:0;bottom:0;transform:rotate(4deg);background:#2E1065}

/* grup kutuları */
.okg{background:#F8FAFC;border-bottom:1px solid var(--line)}
.okg-in{display:grid;grid-template-columns:repeat(auto-fill,minmax(118px,1fr));gap:10px;padding-top:16px;padding-bottom:16px}
.okg-i{display:flex;flex-direction:column;align-items:center;text-align:center;text-decoration:none;background:#fff;border:1px solid var(--line);border-radius:16px;padding:8px 8px 10px;transition:transform .15s,box-shadow .15s,border-color .15s}
.okg-i:hover{transform:translateY(-3px);box-shadow:0 12px 26px rgba(15,23,42,.1);border-color:var(--c)}
.okg-art{width:100%;aspect-ratio:4/3;border-radius:10px;overflow:hidden;margin-bottom:6px}
.okg-i b{font-size:.86rem;color:var(--ink);line-height:1.15}.okg-i small{font-size:.74rem;color:var(--muted)}

/* ürünler */
.okp-g{margin-bottom:46px;scroll-margin-top:90px}
.okp-gh{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 14px;border-bottom:3px solid var(--c);padding-bottom:8px;margin-bottom:16px}
.okp-gh h2{margin:0;font-size:clamp(1.4rem,2.4vw,1.9rem)}.okp-gh p{margin:0;color:var(--muted)}
.okp-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:16px}
.okc{display:flex;flex-direction:column;background:#fff;border:1px solid var(--line);border-radius:18px;overflow:hidden;transition:box-shadow .2s,transform .2s}
.okc:hover{box-shadow:0 16px 36px rgba(15,23,42,.12);transform:translateY(-2px)}
.okc-off{outline:2px dashed #F59E0B;outline-offset:-2px}
.okc-img{position:relative;display:block;aspect-ratio:4/3;background:#F8FAFC;overflow:hidden}
.okc-img img{width:100%;height:100%;object-fit:cover;transition:transform .4s}.okc:hover .okc-img img{transform:scale(1.04)}
.okc-tag{position:absolute;left:10px;top:10px;background:#0F172A;color:#fff;font-size:.72rem;font-weight:800;border-radius:999px;padding:4px 10px}
.okc-fast{background:#16A34A}
.okc-b{display:flex;flex-direction:column;flex:1;padding:12px 14px 14px}
.okc-b h3{font-size:1.02rem;margin:0 0 5px}.okc-b h3 a{text-decoration:none}
.okc-b p{font-size:.88rem;color:var(--muted);margin:0 0 10px;flex:1}
.okc-meta{list-style:none;padding:0;margin:0 0 12px;display:flex;flex-wrap:wrap;gap:5px}
.okc-meta li{font-size:.74rem;background:#F1F5F9;border-radius:999px;padding:3px 9px;color:#334155}
.okc-f{display:flex;gap:8px}.okc-go{flex:1;background:var(--c,#0EA5E9);color:#fff;border:0;font-weight:700}.okc-go:hover{filter:brightness(1.1);color:#fff}
.okp-g[style*="--c"] .okc-go{background:var(--c)}

/* kokular */
.oks{margin-top:22px;background:linear-gradient(135deg,#F0F9FF,#FDF4FF);border-radius:18px;padding:18px 20px}
.oks h3{margin:0 0 4px}.oks p{margin:0 0 12px;color:var(--muted);font-size:.92rem}
.oks-l{list-style:none;padding:0;margin:0;display:flex;flex-wrap:wrap;gap:8px}
.oks-l li{display:flex;gap:6px;align-items:center;background:#fff;border:1.5px solid color-mix(in srgb,var(--c) 45%,#fff);border-radius:999px;padding:5px 12px;font-size:.86rem;font-weight:600}

/* adımlar */
.okw{background:#F8FAFC}
.okw-l{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(4,1fr);gap:14px;counter-reset:s}
.okw-l li{background:#fff;border:1px solid var(--line);border-radius:18px;padding:18px}
.okw-l b{display:inline-grid;place-items:center;width:38px;height:38px;border-radius:12px;background:linear-gradient(135deg,#22D3EE,#A855F7);color:#fff;font-family:var(--display);font-size:1.2rem;margin-bottom:10px}
.okw-l h3{font-size:1.05rem;margin:0 0 4px}.okw-l p{font-size:.9rem;color:var(--muted);margin:0}

/* toptan merkezi */
.okt{background:linear-gradient(130deg,#03231C,#064E3B 55%,#0F766E);color:#fff;scroll-margin-top:80px}
.okt-in{display:grid;grid-template-columns:1.2fr .8fr;gap:30px;align-items:center}
.okt-k{font-weight:800;letter-spacing:.08em;font-size:.82rem;color:#86EFAC;margin:0 0 8px}
.okt h2{color:#fff;font-size:clamp(1.6rem,3vw,2.4rem)}.okt p{opacity:.9}
.okt-ticks{list-style:none;padding:0;margin:0}.okt-ticks li{padding:5px 0 5px 28px;position:relative}.okt-ticks li::before{content:'✓';position:absolute;left:0;top:4px;width:20px;height:20px;border-radius:50%;background:#22C55E;display:grid;place-items:center;font-size:.75rem;font-weight:900}
.okt-b1{background:#22C55E;color:#04261b;border:0;font-weight:800}.okt-b1:hover{background:#4ADE80;color:#04261b}
.okt-b2{background:#fff;color:#064E3B;border:0;font-weight:800}.okt-b2:hover{background:#FDE68A;color:#064E3B}
.okt-b3{background:transparent;color:#fff;border:1.5px solid rgba(255,255,255,.5)}.okt-b3:hover{background:#fff;color:#064E3B}
.okt-lad{background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.18);border-radius:20px;padding:18px}
.okt-lad h3{color:#fff;margin:0 0 10px;font-size:1.05rem}
.okt-row{display:grid;grid-template-columns:96px 1fr;align-items:center;gap:4px 10px;margin-bottom:8px;font-size:.88rem}
.okt-row i{height:12px;border-radius:999px;background:linear-gradient(90deg,#FDE68A,#22C55E);width:var(--w)}
.okt-row small{grid-column:2;font-size:.72rem;opacity:.75;margin-top:-4px}
.okt-fine{font-size:.78rem;opacity:.7;margin:8px 0 0}

/* dosya kılavuzu */
.okd{scroll-margin-top:80px}
.okd-in{display:grid;grid-template-columns:1.3fr .7fr;gap:26px;align-items:start}
.okd-l{list-style:none;padding:0;margin:0}.okd-l li{padding:9px 0;border-bottom:1px dashed var(--line)}
.okd-c{background:linear-gradient(135deg,#FDF4FF,#F0F9FF);border-radius:20px;padding:20px}

/* sss */
.okf{background:#F8FAFC;scroll-margin-top:80px}
.okf-l{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.okf-l details{background:#fff;border:1px solid var(--line);border-radius:14px;padding:12px 16px}
.okf-l summary{cursor:pointer;font-weight:700;color:var(--ink)}.okf-l details p{margin:8px 0 0;color:var(--muted);font-size:.93rem}

/* son çağrı */
.okx{background:linear-gradient(120deg,#1E1B4B,#0B1A3A);color:#fff;padding:34px 0;scroll-margin-top:80px}
.okx-in{display:flex;flex-wrap:wrap;gap:16px;align-items:center;justify-content:space-between}.okx h2{color:#fff;margin:0 0 4px}.okx p{margin:0;opacity:.85}

/* teklif listesi çekmecesi */
.okl-fab{position:fixed;right:16px;bottom:88px;z-index:60;display:flex;gap:6px;align-items:center;background:#0B1A3A;color:#fff;border:0;border-radius:999px;padding:11px 16px;font-weight:800;box-shadow:0 10px 26px rgba(0,0,0,.3);cursor:pointer}
.okl-fab b{background:#22D3EE;color:#05212A;border-radius:999px;min-width:24px;padding:1px 7px;font-size:.85rem}
.okl-fab.is-bump{animation:okBump .5s}@keyframes okBump{40%{transform:scale(1.12)}}
.okl{position:fixed;inset:0;z-index:200}.okl[hidden]{display:none}
.okl-back{position:absolute;inset:0;background:rgba(2,6,23,.55)}
.okl-panel{position:absolute;right:0;top:0;bottom:0;width:min(460px,100%);background:#fff;display:flex;flex-direction:column;box-shadow:-20px 0 40px rgba(0,0,0,.2);animation:okIn .25s ease-out}
@keyframes okIn{from{transform:translateX(40px);opacity:0}}
.okl-h{display:flex;align-items:center;justify-content:space-between;padding:14px 18px;border-bottom:1px solid var(--line)}.okl-h h2{margin:0;font-size:1.2rem}
.okl-x{border:0;background:#F1F5F9;border-radius:50%;width:36px;height:36px;font-size:1rem;cursor:pointer}
.okl-body{overflow:auto;padding:14px 18px 24px}
.okl-items{list-style:none;padding:0;margin:0 0 10px}
.okl-items li{display:grid;grid-template-columns:1fr auto;gap:6px;border:1px solid var(--line);border-radius:12px;padding:10px 12px;margin-bottom:8px;font-size:.88rem}
.okl-items b{display:block;color:var(--ink)}.okl-items small{color:var(--muted);white-space:pre-line}
.okl-items input{width:96px;padding:4px 8px;border:1px solid var(--line-2);border-radius:8px}
.okl-items button{border:0;background:#FEE2E2;color:#B91C1C;border-radius:8px;padding:4px 9px;cursor:pointer;align-self:start}
.okl-empty{background:#F8FAFC;border-radius:12px;padding:12px;font-size:.9rem;color:var(--muted)}
.okl-form h3{font-size:1.02rem;margin:14px 0 8px}.okl-2{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.okl-wa{margin-top:8px}.okl-fine{font-size:.78rem;color:var(--muted);margin:8px 0 0;text-align:center}
.okl-toast{position:fixed;left:50%;bottom:24px;transform:translateX(-50%);z-index:300;background:#0F172A;color:#fff;border-radius:999px;padding:10px 18px;font-weight:700;box-shadow:0 10px 26px rgba(0,0,0,.3)}

/* ürün sayfası */
.okq-grid{display:grid;grid-template-columns:1fr 1fr;gap:34px;align-items:start}
.okq-media{position:sticky;top:90px}
.okq-main{aspect-ratio:4/3;border-radius:22px;overflow:hidden;background:#F8FAFC;border:1px solid var(--line)}
.okq-main img{width:100%;height:100%;object-fit:contain;background:#fff}
.okq-thumbs{display:flex;gap:8px;margin-top:10px;flex-wrap:wrap}
.okq-thumbs button{width:70px;height:56px;border-radius:10px;overflow:hidden;border:2px solid var(--line);padding:0;background:#fff;cursor:pointer}.okq-thumbs button.is-on{border-color:var(--c)}
.okq-thumbs img{width:100%;height:100%;object-fit:cover}
.okq-trust{list-style:none;padding:0;margin:12px 0 0;display:flex;flex-wrap:wrap;gap:6px 14px;font-size:.86rem;color:var(--ok);font-weight:600}
.okq-grp{font-weight:800;font-size:.82rem;letter-spacing:.06em;text-transform:uppercase;color:var(--c);margin:0 0 6px}.okq-grp span{color:#16A34A}
.okq-info h1{font-size:clamp(1.7rem,3vw,2.4rem);margin:0 0 8px}
.okq-short{font-size:1.05rem;color:var(--muted)}
.okq-chips{list-style:none;padding:0;margin:0 0 16px;display:flex;flex-wrap:wrap;gap:6px}.okq-chips li{background:#F1F5F9;border-radius:999px;padding:5px 12px;font-size:.86rem}
.okq{background:#fff;border:1px solid var(--line);border-radius:20px;padding:16px 18px;box-shadow:var(--shadow)}
.okq-f{border:0;padding:0;margin:0 0 14px}.okq-f legend{font-weight:800;color:var(--ink);margin-bottom:6px;font-size:.95rem}.okq-f legend small{font-weight:500;color:var(--muted)}
.okq-ch{display:flex;flex-wrap:wrap;gap:6px}
.okq-ch button{border:1.5px solid var(--line-2);background:#fff;border-radius:12px;padding:8px 13px;font-weight:700;cursor:pointer;display:flex;flex-direction:column;align-items:center;line-height:1.1}
.okq-ch button small{font-weight:600;font-size:.7rem;color:var(--muted);margin-top:2px}
.okq-ch button.is-on{border-color:var(--c);background:color-mix(in srgb,var(--c) 10%,#fff);color:var(--ink);box-shadow:0 0 0 2px color-mix(in srgb,var(--c) 30%,transparent)}
.okq-other{display:flex;align-items:center;gap:6px;border:1.5px dashed var(--line-2);border-radius:12px;padding:4px 8px}.okq-other span{font-size:.82rem;color:var(--muted)}.okq-other input{width:90px;border:0;outline:0;padding:4px}
.okq-sc{display:flex;flex-wrap:wrap;gap:6px}
.okq-sc button{display:flex;gap:5px;align-items:center;border:1.5px solid var(--line);background:#fff;border-radius:999px;padding:5px 11px;font-size:.84rem;cursor:pointer}
.okq-sc button.is-on{border-color:var(--k);background:color-mix(in srgb,var(--k) 14%,#fff);font-weight:700}
.okq-ex{display:flex;flex-wrap:wrap;gap:6px 14px;font-size:.92rem}
.okq-note textarea{width:100%}
.okq-sum{background:#F8FAFC;border-radius:12px;padding:10px 12px;margin:6px 0 10px}.okq-sum b{font-size:.82rem;color:var(--muted)}
.okq-sum pre{margin:4px 0 0;white-space:pre-wrap;font-family:inherit;font-size:.9rem}
.okq-est{background:#ECFDF5;color:#065F46;border-radius:12px;padding:8px 12px;font-weight:700;font-size:.92rem}
.okq-btns{display:grid;grid-template-columns:1fr 1fr;gap:8px}.okq-btns2{margin-top:12px}.okq-btns2 small{font-weight:500;opacity:.75}
.okq-inline{border-top:2px dashed var(--line-2);margin-top:14px;padding-top:6px}.okq-inline h3{font-size:1.15rem}.okq-inline .btn-primary{background:var(--c);border-color:var(--c)}.okq-dz .dz-label{padding:14px}
.okq-sent{background:#ECFDF5;border:2px solid #10B981;border-radius:14px;padding:16px;text-align:center;font-weight:700;color:#065F46}
.okq-btns .btn-primary{background:var(--c);border-color:var(--c)}
.okq-fine{font-size:.78rem;color:var(--muted);margin:10px 0 0}
.okq-det-in{display:grid;grid-template-columns:1.2fr .8fr;gap:30px}
.okq-use{display:flex;flex-wrap:wrap;gap:6px;list-style:none;padding:0}.okq-use li{background:#F1F5F9;border-radius:999px;padding:4px 11px;font-size:.86rem}
.okq-spec table{width:100%;border-collapse:collapse}.okq-spec th,.okq-spec td{text-align:left;padding:9px 10px;border-bottom:1px solid var(--line);vertical-align:top;font-size:.92rem}.okq-spec th{width:38%;color:var(--muted);font-weight:600}
.okq-guide{font-size:.86rem;background:#F8FAFC;border-radius:12px;padding:10px 12px;margin-top:12px}
.okr{display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:12px}
.okr-i{display:flex;flex-direction:column;text-decoration:none;border:1px solid var(--line);border-radius:16px;overflow:hidden;background:#fff}
.okr-i span{aspect-ratio:4/3;overflow:hidden;background:#F8FAFC}.okr-i span img{width:100%;height:100%;object-fit:cover}
.okr-i b{font-size:.9rem;padding:8px 10px 0;color:var(--ink);line-height:1.2}.okr-i small{padding:2px 10px 10px;color:var(--muted);font-size:.78rem}

/* ana sayfa vitrini */
.okb{background:radial-gradient(600px 400px at 80% 30%,rgba(34,211,238,.25),transparent 70%),linear-gradient(130deg,#050B1F,#0B1A3A 50%,#1E1B4B);color:#fff;padding:40px 0;margin:10px 0}
.okb-in{display:grid;grid-template-columns:1fr 1.1fr;gap:30px;align-items:center}
.okb-k{font-weight:800;letter-spacing:.08em;font-size:.8rem;color:#67E8F9;margin:0 0 8px}
.okb h2{color:#fff;font-size:clamp(1.7rem,3.2vw,2.6rem);line-height:1.05}.okb h2 span{background:linear-gradient(90deg,#67E8F9,#C4B5FD,#F9A8D4);-webkit-background-clip:text;background-clip:text;color:transparent}
.okb p{opacity:.88}
.okb-g{display:flex;flex-wrap:wrap;gap:6px;margin:12px 0}
.okb-g a{color:#fff;text-decoration:none;border:1px solid color-mix(in srgb,var(--c) 70%,#fff);background:color-mix(in srgb,var(--c) 25%,transparent);border-radius:999px;padding:4px 11px;font-size:.82rem;font-weight:600}
.okb-g a:hover{background:var(--c)}
.okb-r{display:grid;grid-template-columns:1.15fr 1fr;gap:12px;align-items:center}
.okb-sc{border-radius:22px;overflow:hidden;aspect-ratio:600/460}.okb-sc .okmp-scene{filter:none}
.okb-l{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.okb-i{display:flex;flex-direction:column;text-decoration:none;background:#fff;border-radius:12px;overflow:hidden}
.okb-i span{aspect-ratio:1;overflow:hidden;background:#F8FAFC}.okb-i span img,.okb-i span svg{width:100%;height:100%;object-fit:cover}
.okb-i b{font-size:.66rem;line-height:1.15;color:var(--ink);padding:5px 6px 6px}

@media (max-width:980px){
  .okh-in,.okq-grid,.okq-det-in,.okt-in,.okd-in,.okb-in{grid-template-columns:1fr}
  .okh-art{height:300px;order:-1}.okq-media{position:static}
  .okw-l{grid-template-columns:1fr 1fr}.okf-l{grid-template-columns:1fr}
  .okb-r{grid-template-columns:1fr}
}
@media (max-width:560px){
  .okh-art{height:230px}.okh-sc1{width:82%}.okh-sc2{width:56%}
  .okw-l{grid-template-columns:1fr}.okp-grid{grid-template-columns:1fr 1fr;gap:10px}
  .okc-b{padding:10px}.okc-b p{display:none}.okc-f{flex-direction:column}.okc-b h3{font-size:.92rem}
  .okl-2{grid-template-columns:1fr}.okq-btns{grid-template-columns:1fr}
  .okl-fab{bottom:80px;right:10px;padding:9px 13px;font-size:.9rem}
  .okh-btns .btn{flex:1 1 100%}
}
@media (max-width:560px){.okg-in{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:12px}.okg-i{flex:0 0 112px;scroll-snap-align:start}}