/* ===== Merve Elektronik — Aydınlık Vitrin (Konsept A) ===== */
@import url('https://fonts.googleapis.com/css2?family=Archivo:wght@400;500;600;700;800;900&family=Inter:wght@400;500;600;700&family=Archivo+Expanded:wght@700;800;900&display=swap');

:root{
  --red:#E11D2E; --red-deep:#B00E1C; --ink:#141417; --slate:#5c5f6b;
  --line:#e7e6e1; --paper:#FBFAF7; --paper-2:#F3F1EB; --white:#fff;
  --amber:#F5A623; --green:#1f9d55; --radius:14px;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:'Inter',system-ui,sans-serif;background:var(--paper);color:var(--ink);-webkit-font-smoothing:antialiased;line-height:1.5}
a{text-decoration:none;color:inherit}
img{max-width:100%;display:block}
.wrap{max-width:1240px;margin:0 auto;padding:0 28px}
.hd{font-family:'Archivo',sans-serif}
.exp{font-family:'Archivo Expanded','Archivo',sans-serif}

/* top bar */
.topbar{background:var(--ink);color:#cfd0d6;font-size:12.5px;letter-spacing:.02em}
.topbar .wrap{display:flex;justify-content:space-between;align-items:center;height:38px;gap:20px}
.topbar b{color:#fff;font-weight:600}
.topbar .tb-r{display:flex;gap:22px;align-items:center}
.topbar a:hover{color:var(--amber)}
@media(max-width:760px){.topbar .tb-l{display:none}}

/* header */
header{position:sticky;top:0;z-index:60;background:rgba(251,250,247,.9);backdrop-filter:blur(12px);border-bottom:1px solid var(--line)}
.nav{display:flex;align-items:center;gap:28px;height:76px}
.logo{display:flex;align-items:center;gap:12px}
.logo .mark{width:46px;height:46px;border-radius:50%;border:2.5px solid var(--red);display:grid;place-items:center;flex:none}
.logo .mark svg{width:26px;height:26px}
.logo .lt{line-height:1}
.logo .lt .b{font-family:'Archivo Expanded','Archivo';font-weight:900;font-size:19px;color:var(--ink)}
.logo .lt .s{font-size:10.5px;letter-spacing:.22em;color:var(--red);font-weight:700;text-transform:uppercase;margin-top:3px}
nav.main{display:flex;gap:26px;margin-left:8px}
nav.main a{font-weight:600;font-size:14.5px;color:#33343a;position:relative;padding:6px 0}
nav.main a:hover,nav.main a.active{color:var(--red)}
nav.main a::after{content:"";position:absolute;left:0;bottom:0;height:2px;width:0;background:var(--red);transition:.25s}
nav.main a:hover::after,nav.main a.active::after{width:100%}
.nav-r{margin-left:auto;display:flex;align-items:center;gap:14px}
.btn{display:inline-flex;align-items:center;gap:8px;background:var(--red);color:#fff;font-weight:700;font-size:14px;padding:11px 20px;border-radius:999px;transition:.2s;font-family:'Archivo';border:none;cursor:pointer}
.btn:hover{background:var(--red-deep);transform:translateY(-1px)}
.btn.ghost{background:transparent;color:var(--ink);border:1.5px solid var(--ink)}
.btn.ghost:hover{background:var(--ink);color:#fff}
.burger{display:none;background:none;border:none;cursor:pointer}
@media(max-width:960px){nav.main{display:none}.burger{display:grid}}

/* section head */
.sec{padding:64px 0}
.sec-head{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;margin-bottom:32px}
.eyebrow{font-size:12.5px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--red)}
.sec-head h2{font-family:'Archivo Expanded','Archivo';font-weight:900;font-size:clamp(26px,3vw,38px);line-height:1.05;margin-top:10px}
.sec-head p{color:var(--slate);font-size:15px;max-width:440px;margin-top:8px}
.see{font-weight:700;color:var(--ink);font-size:14px;display:inline-flex;gap:7px;align-items:center;white-space:nowrap}
.see:hover{color:var(--red)}

/* footer */
footer{background:var(--ink);color:#b9bac2;padding:60px 0 30px}
.fgrid{display:grid;grid-template-columns:1.6fr 1fr 1fr 1.2fr;gap:40px;padding-bottom:40px;border-bottom:1px solid #2a2b31}
.fcol h5{font-family:'Archivo';color:#fff;font-weight:700;font-size:14px;margin-bottom:16px}
.fcol a,.fcol p{display:block;font-size:13.5px;color:#9a9ba4;margin-bottom:10px}
.fcol a:hover{color:#fff}
.fabout{font-size:13.5px;color:#9a9ba4;margin:18px 0;max-width:300px;line-height:1.6}
.fcontact b{color:#fff;font-weight:600}
.fbot{display:flex;justify-content:space-between;align-items:center;padding-top:24px;font-size:12.5px;color:#7d7e87;flex-wrap:wrap;gap:12px}
@media(max-width:820px){.fgrid{grid-template-columns:1fr 1fr}}
@media(max-width:520px){.fgrid{grid-template-columns:1fr}}

/* product card (shared) */
.card{background:var(--white);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;transition:.2s;display:flex;flex-direction:column;cursor:pointer}
.card:hover{transform:translateY(-5px);box-shadow:0 22px 44px -24px rgba(20,20,23,.4);border-color:#dad8d1}
.card .ph{aspect-ratio:1/1;background:var(--white);position:relative;display:grid;place-items:center;overflow:hidden;border-bottom:1px solid var(--line)}
.card .ph img{width:82%;height:82%;object-fit:contain;mix-blend-mode:multiply}
.card .noimg{width:70%;height:70%;opacity:.35}
.card .badge{position:absolute;top:12px;left:12px;background:var(--red);color:#fff;font-size:11px;font-weight:800;padding:5px 10px;border-radius:7px;font-family:'Archivo'}
.card .badge.stock{background:var(--green)}
.card .fam-tag{position:absolute;top:12px;right:12px;background:rgba(20,20,23,.86);color:#fff;font-size:10.5px;font-weight:700;padding:4px 9px;border-radius:6px;letter-spacing:.04em}
.card .body{padding:16px;display:flex;flex-direction:column;gap:7px;flex:1}
.card .cat-l{font-size:11px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--red)}
.card h4{font-family:'Archivo';font-weight:700;font-size:14.5px;line-height:1.25;min-height:36px}
.card .sku{font-size:12px;color:var(--slate);font-family:'Inter'}
.card .chips{display:flex;flex-wrap:wrap;gap:5px;margin-top:2px}
.card .chips span{font-size:11px;color:var(--slate);background:var(--paper-2);border:1px solid var(--line);padding:2px 8px;border-radius:6px}
.card .foot{margin-top:auto;padding-top:12px;display:flex;align-items:center;justify-content:space-between}
.card .foot .req{font-weight:700;font-size:13px;color:var(--ink)}
.card:hover .foot .req{color:var(--red)}
.card .foot .ico{width:32px;height:32px;border-radius:9px;border:1px solid var(--line);display:grid;place-items:center;color:var(--slate);transition:.2s}
.card:hover .foot .ico{background:var(--red);border-color:var(--red);color:#fff}

/* WhatsApp buttons */
.btn.wa{background:#25D366;color:#fff}
.btn.wa:hover{background:#1da851;color:#fff}
.wa-float{position:fixed;right:22px;bottom:22px;z-index:90;display:flex;align-items:center;gap:0;background:#25D366;color:#fff;border-radius:999px;height:60px;width:60px;overflow:hidden;box-shadow:0 12px 30px -8px rgba(37,211,102,.6);transition:width .3s ease,box-shadow .2s;white-space:nowrap}
.wa-float svg{width:32px;height:32px;flex:none;margin:0 14px}
.wa-float .wa-label{font-family:'Archivo';font-weight:700;font-size:14.5px;opacity:0;transition:opacity .2s;padding-right:20px}
.wa-float:hover{width:210px}
.wa-float:hover .wa-label{opacity:1}
.wa-float::before{content:"";position:absolute;inset:0;border-radius:999px;box-shadow:0 0 0 0 rgba(37,211,102,.5);animation:wapulse 2.4s infinite}
@keyframes wapulse{0%{box-shadow:0 0 0 0 rgba(37,211,102,.5)}70%{box-shadow:0 0 0 16px rgba(37,211,102,0)}100%{box-shadow:0 0 0 0 rgba(37,211,102,0)}}
@media(max-width:560px){.wa-float{height:56px;width:56px}.wa-float:hover{width:56px}.wa-float:hover .wa-label{opacity:0}.wa-float svg{margin:0 12px}}
@media(prefers-reduced-motion:reduce){.wa-float::before{animation:none}}