/* ===== Otonom katalog — ortak stiller =====
   Renkleri ve ölçüleri sadece bu :root bloğundan değiştir. */
:root{
  --color-bg:#444444;
  --color-surface:#333333;
  --color-surface-2:#3C3C3C;
  --color-primary:#E2E800;
  --color-ink:#E2E800;        /* yazı olarak kullanılan vurgu tonu */
  --color-on-primary:#000000;
  --color-text:#FFFFFF;
  --color-muted:#D5D5DC;
  --glass-bg:rgba(255,255,255,.08);
  --glass-brd:rgba(255,255,255,.18);
  --glass-hi:rgba(255,255,255,.22);
  --glass-blur:18px;
  --radius-card:16px;
  --radius-input:14px;
  --radius-button:14px;
  /* FONT STANDARDI: başlık = Nunito, metin/arayüz = Inter */
  --font:"Inter",system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  --font-head:"Nunito","Inter",system-ui,Arial,sans-serif;
  --font-logo:"Roboto","Nunito",system-ui,Arial,sans-serif;   /* logodaki yazı fontu */
  color-scheme:dark;
  box-sizing:border-box;
}
@media (prefers-color-scheme:light){
  :root:not([data-theme="dark"]){
    --color-bg:#FFFFFF;--color-surface:#F3F3F5;--color-surface-2:#E4E4E8;
    --color-text:#111111;--color-muted:#55555F;
    --glass-bg:rgba(255,255,255,.55);--glass-brd:rgba(0,0,0,.09);--glass-hi:rgba(255,255,255,.8);
    /* açık zeminde sarı-yeşil okunmuyor; yazıda koyu tonu kullanılır,
       dolgu (buton, bant) olarak asıl renk kalır */
    --color-ink:#5E6200;
    color-scheme:light;
  }
}
:root[data-theme="dark"]{color-scheme:dark}
*,*::before,*::after{box-sizing:inherit}
html{scroll-behavior:smooth}
body{margin:0;background:var(--color-bg);color:var(--color-text);font-family:var(--font);
  font-size:16px;line-height:1.6;position:relative;min-height:100vh;font-weight:400;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility;font-feature-settings:"cv11","ss01"}
body::before{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;
  background:
    radial-gradient(42vw 42vw at 80% -8%, color-mix(in srgb,var(--color-primary) 13%,transparent), transparent 70%),
    radial-gradient(40vw 40vw at 4% 40%, color-mix(in srgb,var(--color-primary) 7%,transparent), transparent 70%)}
a{color:inherit}
:focus-visible{outline:3px solid var(--color-primary);outline-offset:3px}
.wrap{max-width:1400px;margin:0 auto;padding:0 24px}
h1,h2,h3{font-family:var(--font-head);font-weight:800;line-height:1.15;letter-spacing:-.01em;margin:0 0 16px;text-wrap:balance}
h1{font-size:clamp(28px,4.3vw,44px);letter-spacing:-.015em}
h2{font-size:clamp(21px,2.8vw,30px)}
h3{font-size:18px}
.eyebrow{text-transform:uppercase;letter-spacing:.16em;font-size:12px;font-weight:700;color:var(--color-ink);margin-bottom:12px}
.muted{color:var(--color-muted)}
.lead{font-size:17px;font-weight:400;line-height:1.6;max-width:65ch;color:var(--color-muted);text-wrap:pretty}

/* ---------- üst menü ---------- */
header{position:sticky;top:0;z-index:50;background:color-mix(in srgb,var(--color-bg) 72%,transparent);
  -webkit-backdrop-filter:blur(16px) saturate(160%);backdrop-filter:blur(16px) saturate(160%);
  display:flex;flex-wrap:wrap;align-items:stretch;justify-content:space-between;gap:12px 0;transition:box-shadow .2s}
header.stuck{box-shadow:0 6px 24px rgba(0,0,0,.35)}
header .logo{padding:16px 24px;line-height:0;display:block;transition:padding .2s}
header .logo img{height:48px;width:auto;transition:height .2s}
header.stuck .logo{padding:8px 24px}
header.stuck .logo img{height:36px}
.logo-l{display:none}
@media (prefers-color-scheme:light){
  :root:not([data-theme="dark"]) .logo-l{display:block}
  :root:not([data-theme="dark"]) .logo-d{display:none}
}
.band{background:var(--color-primary);color:#000;clip-path:polygon(10% 0,100% 0,100% 100%,0 100%);
  padding:10px 28px 10px clamp(40px,8vw,88px);display:flex;align-items:center;flex-wrap:wrap;
  gap:clamp(12px,2.2vw,28px);min-height:76px;flex:1 1 100%}
@media (min-width:860px){.band{flex:0 1 auto}}
.band a{text-decoration:none;font-weight:600;font-size:15px;letter-spacing:-.005em;color:#000}
.band a:hover,.band a.active{text-decoration:underline;text-underline-offset:5px}
.lang{display:flex;gap:4px;margin-left:auto}
.lang button{font:800 12px var(--font);background:transparent;border:2px solid #000;color:#000;
  padding:3px 8px;cursor:pointer;border-radius:0}
.lang button[aria-pressed="true"]{background:#000;color:var(--color-primary)}

/* ---------- butonlar ---------- */
.btn{display:inline-block;padding:14px 26px;font:600 13.5px var(--font);letter-spacing:.06em;
  text-transform:uppercase;text-decoration:none;border:1px solid var(--color-primary);
  border-radius:var(--radius-button);cursor:pointer;transition:transform .22s, box-shadow .22s, filter .22s;
  box-shadow:0 8px 22px rgba(0,0,0,.18), inset 0 1px 0 var(--glass-hi)}
.btn:hover{transform:translateY(-2px);filter:brightness(1.05)}
.btn:active{transform:translateY(0)}
.btn-primary{color:var(--c-btntext,var(--color-on-primary));
  background:linear-gradient(180deg,color-mix(in srgb,var(--color-primary) 88%,#fff),var(--color-primary))}
.btn-secondary{background:var(--glass-bg);color:var(--color-text);
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
.btn-sm{padding:9px 16px;font-size:12px}

/* ---------- form alanları ---------- */
input,textarea,select{font:inherit;color:var(--color-text);background:var(--glass-bg);
  border:1px solid var(--glass-brd);border-radius:var(--radius-input);padding:12px 16px;width:100%;
  -webkit-backdrop-filter:blur(12px) saturate(140%);backdrop-filter:blur(12px) saturate(140%);
  box-shadow:inset 0 1px 0 var(--glass-hi);transition:border-color .2s, box-shadow .2s}
input::placeholder,textarea::placeholder{color:var(--color-muted)}
input:focus,textarea:focus,select:focus{outline:none;border-color:var(--color-primary);
  box-shadow:0 0 0 3px color-mix(in srgb,var(--color-primary) 28%,transparent), inset 0 1px 0 var(--glass-hi)}
select{appearance:none;-webkit-appearance:none;cursor:pointer;padding-right:44px;
  background-image:linear-gradient(45deg,transparent 50%,var(--color-primary) 50%),
                   linear-gradient(135deg,var(--color-primary) 50%,transparent 50%);
  background-position:calc(100% - 22px) 50%,calc(100% - 16px) 50%;
  background-size:6px 6px,6px 6px;background-repeat:no-repeat}
select option{background:var(--color-surface);color:var(--color-text)}
label{font-weight:700;font-size:14px;display:grid;gap:7px}

/* ---------- cam yüzey ---------- */
.glass{background:var(--glass-bg);border:1px solid var(--glass-brd);border-radius:var(--radius-card);
  -webkit-backdrop-filter:blur(var(--glass-blur)) saturate(150%);backdrop-filter:blur(var(--glass-blur)) saturate(150%);
  box-shadow:0 10px 30px rgba(0,0,0,.18), inset 0 1px 0 var(--glass-hi)}

/* ---------- katalog düzeni ---------- */
.layout{display:grid;gap:28px;grid-template-columns:260px 1fr;align-items:start;padding:36px 0 80px}
@media (max-width:900px){.layout{grid-template-columns:1fr}}
.side{position:sticky;top:110px;padding:20px;display:grid;gap:18px}
@media (max-width:900px){.side{position:static}}
.side h4{margin:0 0 8px;font-size:12px;letter-spacing:.13em;text-transform:uppercase;color:var(--color-ink)}
.fgroup{display:grid;gap:7px;max-height:230px;overflow:auto}
.fgroup label{display:flex;flex-direction:row;align-items:center;gap:9px;font-weight:500;font-size:14px;
  color:var(--color-muted);cursor:pointer}
.fgroup input{width:auto;padding:0;box-shadow:none;accent-color:var(--color-primary)}
.fgroup label:hover{color:var(--color-text)}
.cnt{margin-left:auto;font-size:12px;opacity:.6}

.toolbar{display:flex;gap:12px;flex-wrap:wrap;align-items:center;margin-bottom:22px}
.toolbar .search{flex:1 1 260px}
.toolbar select{width:auto;min-width:180px}
.ps-banner{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;margin:0 0 16px;
  padding:14px 18px;text-decoration:none;color:var(--color-text);font-weight:600;font-size:14.5px;
  border-color:color-mix(in srgb,var(--color-primary) 55%,var(--glass-brd))}
.ps-banner b{color:var(--color-ink);white-space:nowrap}
.ps-banner:hover{background:color-mix(in srgb,var(--color-primary) 14%,var(--glass-bg))}
.ps-banner[hidden]{display:none}
.resultinfo{font-size:14px;color:var(--color-muted);margin-bottom:16px}

.plist{display:grid;gap:20px;grid-template-columns:repeat(auto-fill,minmax(250px,1fr))}
.pcard{display:flex;flex-direction:column;overflow:hidden;text-decoration:none;color:inherit;
  transition:transform .25s, box-shadow .25s, border-color .25s;position:relative}
.pcard:hover{transform:translateY(-3px);border-color:color-mix(in srgb,var(--color-primary) 45%,var(--glass-brd));
  box-shadow:0 16px 40px rgba(0,0,0,.26), inset 0 1px 0 var(--glass-hi)}
.pcard .ph{text-decoration:none}
.pcard .body{padding:16px 18px 18px;display:flex;flex-direction:column;gap:8px;flex:1}
.pcard .brand{font-size:11px;letter-spacing:.12em;text-transform:uppercase;font-weight:700;color:var(--color-ink)}
.pcard .name{font-weight:600;font-size:15.5px;line-height:1.35;letter-spacing:-.005em}
.pcard .keyspec{font-size:13px;color:var(--color-muted);display:flex;flex-wrap:wrap;gap:4px 10px}
.pcard .price{margin-top:auto;padding-top:10px;font-family:var(--font-head);font-weight:700;font-size:17px;letter-spacing:-.01em;font-variant-numeric:tabular-nums}
.pcard .price small{font-family:var(--font);font-weight:500;font-size:12px;letter-spacing:0;color:var(--color-muted)}
.pcard .askprice{font-weight:700;font-size:14px;color:var(--color-ink)}
.cmpbox{position:absolute;top:10px;right:10px;z-index:2;width:26px;height:26px;border-radius:7px;
  border:1px solid var(--glass-brd);background:rgba(0,0,0,.45);display:grid;place-items:center;cursor:pointer;
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.cmpbox input{width:16px;height:16px;padding:0;box-shadow:none;accent-color:var(--color-primary);cursor:pointer}
.empty{padding:60px 20px;text-align:center;color:var(--color-muted)}

/* ---------- karşılaştırma çubuğu ---------- */
#cmpbar{position:fixed;left:0;right:0;bottom:0;z-index:60;display:none;align-items:center;gap:14px;
  padding:14px 24px;background:rgba(10,10,13,.92);border-top:1px solid var(--glass-brd);
  -webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);color:#fff}
#cmpbar.on{display:flex}
#cmpbar .chips{display:flex;gap:8px;flex-wrap:wrap;flex:1}
#cmpbar .chip{background:rgba(255,255,255,.1);border-radius:8px;padding:6px 10px;font-size:13px;font-weight:600;
  display:flex;gap:8px;align-items:center}
#cmpbar .chip button{background:none;border:0;color:#fff;cursor:pointer;font-size:15px;line-height:1;padding:0}

/* ---------- ürün detay ---------- */
.detail{display:grid;gap:40px;grid-template-columns:minmax(300px,1fr) minmax(300px,1fr);padding:36px 0 80px;align-items:start}
@media (max-width:860px){.detail{grid-template-columns:1fr}}
.gal .main{border-radius:var(--radius-card);border:1px solid var(--glass-brd)}
.gal .main.zoom{cursor:zoom-in}
.thumbs{display:flex;gap:10px;margin-top:12px;flex-wrap:wrap}
.thumbs button{width:72px;height:60px;padding:4px;border-radius:10px;border:1px solid var(--glass-brd);
  background:var(--color-surface);cursor:pointer;overflow:hidden}
.thumbs button[aria-current="true"]{border-color:var(--color-primary)}
.thumbs img{width:100%;height:100%;object-fit:contain}
.spec{width:100%;border-collapse:collapse;margin:20px 0}
.spec td{padding:11px 14px;border-bottom:1px solid var(--glass-brd);font-size:15px;vertical-align:top}
.spec td:first-child{color:var(--color-muted);font-weight:500;width:45%}
.spec td:last-child{font-weight:600;font-variant-numeric:tabular-nums}
.pricebox{padding:20px;flex-wrap:wrap;display:flex;gap:16px;align-items:center;flex-wrap:wrap;margin:22px 0}
.pricebox .big{font-family:var(--font-head);font-size:28px;font-weight:600;letter-spacing:-.015em;font-variant-numeric:tabular-nums}
.docs{display:flex;gap:12px;flex-wrap:wrap;margin-top:18px}
.badge{display:inline-block;padding:5px 12px;border-radius:99px;background:var(--glass-bg);
  border:1px solid var(--glass-brd);font-size:12px;font-weight:700;color:var(--color-muted)}

/* ---------- karşılaştırma tablosu ---------- */
.cmptable{width:100%;border-collapse:collapse;margin:24px 0;font-size:14px}
.cmptable th,.cmptable td{padding:12px 14px;border-bottom:1px solid var(--glass-brd);text-align:left;vertical-align:top}
.cmptable th{font-weight:700}
.cmptable td:first-child,.cmptable th:first-child{color:var(--color-muted);font-weight:500}
.cmptable .diff{background:color-mix(in srgb,var(--color-primary) 10%,transparent)}

/* ---------- büyütme penceresi ---------- */
#lbox{position:fixed;inset:0;z-index:200;display:none;align-items:center;justify-content:center;padding:4vmin;
  background:rgba(8,8,11,.85);-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px)}
#lbox.on{display:flex}
/* büyük görünüm: dalga YOK, ürün tek renk beyaz zeminde */
#lbox img{max-width:92vw;max-height:88vh;object-fit:contain;border-radius:var(--radius-card);
  background:#fff;padding:clamp(18px,5vmin,64px);box-sizing:border-box;box-shadow:0 30px 80px rgba(0,0,0,.5)}
#lbox .close{position:absolute;top:2vh;right:2vw;width:46px;height:46px;border-radius:50%;cursor:pointer;
  background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.22);color:#fff;font-size:24px}

/* ---------- alt bilgi ---------- */
.strip{height:16px;background:#000;position:relative;margin-top:40px}
.strip::before{content:"";position:absolute;left:0;top:0;bottom:0;width:min(46%,420px);
  background:var(--color-primary);clip-path:polygon(0 0,100% 0,92% 100%,0 100%)}
footer .wrap{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;
  padding-top:26px;padding-bottom:26px;font-size:14px;color:var(--color-muted)}

/* =====================================================================
   KATALOG MASAÜSTÜ (2026-10-20): 4'lü ürün dizilimi, bağımsız kayan filtre
   sütunu, her filtre grubu kendi kutusunda + taşarsa sağda yukarı/aşağı ok
   ===================================================================== */
.fok{display:none}
@media (min-width:901px){
  .layout{grid-template-columns:270px minmax(0,1fr)}
  .side.glass{top:92px;max-height:calc(100vh - 110px);overflow-y:auto;overscroll-behavior:contain;
    padding:0 6px 4px 0;gap:14px;background:none;border:0;box-shadow:none;border-radius:0;
    -webkit-backdrop-filter:none;backdrop-filter:none;scrollbar-width:thin;scrollbar-color:var(--glass-brd) transparent}
  .fbox{position:relative;padding:16px 16px 14px;border-radius:var(--radius-card);
    background:var(--glass-bg);border:1px solid var(--glass-brd);
    -webkit-backdrop-filter:blur(var(--glass-blur)) saturate(150%);backdrop-filter:blur(var(--glass-blur)) saturate(150%);
    box-shadow:0 10px 26px rgba(0,0,0,.16), inset 0 1px 0 var(--glass-hi)}
  .fbox h4{margin-bottom:10px}
  .fbox .fgroup{max-height:212px;overflow-y:auto;scroll-behavior:smooth;scrollbar-width:none}
  .fbox .fgroup::-webkit-scrollbar{display:none}
  .fbox.kayar .fgroup{padding-right:34px}
  .fbox.kayar .fok{display:flex;flex-direction:column;justify-content:space-between;
    position:absolute;right:10px;top:42px;bottom:14px;width:26px}
  .fok button{width:26px;height:26px;padding:0;border-radius:9px;cursor:pointer;display:grid;place-items:center;
    color:var(--color-ink);border:1px solid color-mix(in srgb,var(--color-primary) 45%,var(--glass-brd));
    background:color-mix(in srgb,var(--color-primary) 16%,transparent);transition:background .15s,opacity .15s}
  .fok button:hover:not(:disabled){background:color-mix(in srgb,var(--color-primary) 32%,transparent)}
  .fok button:disabled{opacity:.28;cursor:default}
  .fok svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}
  .fok i{flex:1;margin:4px auto;width:2px;border-radius:2px;background:var(--glass-brd)}
  .sheetfoot{padding:2px 0 0}
  .sheetfoot #clearf{width:100%}
  /* altta karşılaştırma çubuğu açıkken filtre sütunu onun altında kalmasın */
  body.cmp-on .side.glass{max-height:calc(100vh - 180px)}
  body.cmp-on{padding-bottom:70px}
}
@media (min-width:1101px){ .plist{grid-template-columns:repeat(4,minmax(0,1fr));gap:18px} }
@media (min-width:901px) and (max-width:1100px){ .plist{grid-template-columns:repeat(3,minmax(0,1fr))} }

/* =====================================================================
   ÜRÜN GÖRSEL ÇERÇEVESİ (standart) — her ürün, görseli olsun olmasın
   Kare, beyaz zemin + dalga.svg (üst/alt dalgalar). Ürün görseli saydam,
   beyaz alanın tam ortasına yerleşir. Uzun ürün geniş kutu, kare/yatay
   ürün daha küçük kutu (köşeler dalgaya taşmasın) — pfit() ile seçilir.
   ===================================================================== */
.pframe{position:relative;display:block;aspect-ratio:1/1;overflow:hidden;
  background:#fff url(dalga.svg?v=1) center/100% 100% no-repeat}
.pframe > img{position:absolute;top:15%;left:15%;width:70%;height:70%;
  object-fit:contain;object-position:50% 50%;margin:0;padding:0}
.pframe > img.pf-kare{top:22%;left:22%;width:56%;height:56%}
.pframe .pf-bos{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px}
.pframe .pf-bos img{width:40%;max-width:180px;opacity:.3;filter:grayscale(1)}
.pframe .pf-bos span{font:600 12px var(--font);color:#8d8d93;letter-spacing:.04em;text-align:center;padding:0 8%}

/* =====================================================================
   MOBİL — telefon ve dar tablet düzeni
   ===================================================================== */
.menubtn,.filterbtn,.sheethead,.showres{display:none}
.sheetfoot{display:block}

/* karşılaştırma tablosunda özellik adı sütunu kayarken sabit kalsın */
.cmptable td:first-child,.cmptable th:first-child{position:sticky;left:0;z-index:1;background:var(--color-bg)}

@media (max-width:859px){
  /* üst menü: logo + sarı eğik menü düğmesi, menü açılır panel */
  header{flex-wrap:nowrap;align-items:center;gap:0;min-height:60px}
  header .logo,header.stuck .logo{padding:10px 16px}
  header .logo img,header.stuck .logo img{height:34px}
  .menubtn{display:flex;flex-direction:column;justify-content:center;align-items:center;gap:5px;
    align-self:stretch;width:88px;min-height:60px;margin-left:auto;padding:0 0 0 22px;border:0;cursor:pointer;
    background:var(--color-primary);clip-path:polygon(28% 0,100% 0,100% 100%,0 100%)}
  .menubtn span{display:block;width:24px;height:3px;border-radius:2px;background:#000;transition:transform .25s,opacity .2s}
  header.open .menubtn span:nth-child(1){transform:translateY(8px) rotate(45deg)}
  header.open .menubtn span:nth-child(2){opacity:0}
  header.open .menubtn span:nth-child(3){transform:translateY(-8px) rotate(-45deg)}
  .band{position:absolute;top:100%;left:0;right:0;display:none;flex-direction:column;align-items:stretch;gap:0;
    min-height:0;clip-path:none;padding:4px 20px 20px;max-height:calc(100dvh - 60px);overflow:auto;
    box-shadow:0 18px 30px rgba(0,0,0,.35)}
  header.open .band{display:flex}
  .band a{font-size:17px;padding:14px 2px;border-bottom:1px solid rgba(0,0,0,.14)}
  .band a.active{text-decoration:none;box-shadow:inset 4px 0 0 #000;padding-left:14px}
  .lang{margin:16px 0 0;gap:8px}
  .lang button{min-width:52px;min-height:42px;font-size:14px}
}

@media (max-width:900px){
  .wrap{padding:0 16px}
  .layout{padding:20px 0 60px;gap:0}

  /* filtreler: ekranın tamamını kaplayan panel, "Filtrele" düğmesiyle açılır */
  .side{position:fixed;inset:0;z-index:120;display:none;align-content:start;gap:22px;overflow:auto;
    border-radius:0;border:0;padding:0 20px 110px;background:var(--color-bg);box-shadow:none;
    -webkit-backdrop-filter:none;backdrop-filter:none}
  .side.open{display:grid}
  .sheethead{display:flex;justify-content:space-between;align-items:center;position:sticky;top:0;z-index:2;
    margin:0 -20px;padding:14px 20px;background:var(--color-bg);border-bottom:1px solid var(--glass-brd)}
  .sheethead b{font-size:18px}
  .sheethead button{width:42px;height:42px;border-radius:50%;border:1px solid var(--glass-brd);background:var(--glass-bg);
    color:var(--color-text);font:400 22px/1 var(--font);cursor:pointer}
  .fgroup{max-height:none;gap:2px}
  .fgroup label{min-height:42px;font-size:15px}
  .fgroup input{width:20px;height:20px}
  .sheetfoot{position:fixed;left:0;right:0;bottom:0;z-index:3;display:none;gap:10px;
    padding:12px 16px calc(12px + env(safe-area-inset-bottom,0px));
    background:color-mix(in srgb,var(--color-bg) 92%,transparent);border-top:1px solid var(--glass-brd);
    -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px)}
  .side.open .sheetfoot{display:flex}
  .sheetfoot .btn{flex:1 1 40%;text-align:center;padding:14px 10px;letter-spacing:.02em}
  .sheetfoot .showres{flex:1 1 60%}
  .showres{display:block}
  body.sheet-open{overflow:hidden}

  .toolbar{gap:10px;margin-bottom:14px}
  .toolbar .search{flex:1 1 100%}
  .filterbtn{display:flex;align-items:center;justify-content:center;gap:8px;flex:1 1 0;padding:12px 14px;
    font:700 14px var(--font);color:var(--color-text);background:var(--glass-bg);border:1px solid var(--glass-brd);
    border-radius:var(--radius-input);cursor:pointer}
  .filterbtn .fcount{min-width:22px;height:22px;padding:0 6px;border-radius:11px;background:var(--color-primary);
    color:#000;font-size:12px;display:grid;place-items:center}
  .filterbtn .fcount:empty{display:none}
  .toolbar select{flex:1 1 0;min-width:0;width:auto}

  /* karşılaştırma çubuğu: sadece sayı ve düğmeler */
  #cmpbar{gap:10px;padding:10px 16px calc(10px + env(safe-area-inset-bottom,0px))}
  #cmpbar .chip{display:none}
  #cmpbar .chip:last-child{display:flex;padding:6px 0}
  body.cmp-on{padding-bottom:70px}
}

@media (max-width:620px){
  /* ürün kartları: liste görünümü */
  .plist{grid-template-columns:1fr;gap:12px}
  .pcard{flex-direction:row}
  .pcard .ph{flex:0 0 112px;width:112px;align-self:flex-start;margin:12px 0 12px 12px;border-radius:12px}
  .pcard .ph .pf-bos{gap:4px}
  .pcard .ph .pf-bos img{width:58%}
  .pcard .ph .pf-bos span{font-size:9px;letter-spacing:.02em}
  .pcard .body{padding:14px 16px;gap:6px;min-width:0}
  .pcard .brand{padding-right:34px}
  .pcard .name{font-size:15px}
  .pcard .keyspec{font-size:12.5px}
  .pcard .price{padding-top:6px;font-size:16px}
  .pcard:hover{transform:none}

  /* ürün detayı */
  .detail{gap:24px;padding:20px 0 60px}
  .pricebox{padding:18px}
  .pricebox .big{font-size:26px}
  .pricebox .btn{width:100%;text-align:center}
  .spec td{padding:10px 8px;font-size:14px}
  .docs .btn{flex:1 1 100%;text-align:center}

  footer .wrap{flex-direction:column;gap:6px}
}

/* teknik değerlerde eşit genişlikli rakam */
.keyspec,.cmptable td,.spec td,.resultinfo{font-variant-numeric:tabular-nums}

/* ürün sayfası başlığı: uzun ürün adları için biraz daha küçük */
.detail h1{font-size:clamp(24px,2.6vw,34px);line-height:1.18;letter-spacing:-.01em}

/* =====================================================================
   LOGO FONTU (Roboto) — menü, sayfa etiketi, düğmeler; kutu içleri Nunito
   ===================================================================== */
.band a{font-family:var(--font-logo);font-weight:500;font-size:16.5px;letter-spacing:.02em}
.btn{font-family:var(--font-logo);font-weight:500;font-size:14.5px;letter-spacing:.08em}
.eyebrow{font-family:var(--font-logo);font-weight:500;font-size:20px;letter-spacing:.06em}
.ps-step b{font-family:var(--font-logo);font-weight:500;font-size:clamp(24px,3vw,34px);letter-spacing:.03em;text-transform:uppercase}
.ps-step h2{font-size:clamp(17px,1.9vw,22px);font-weight:700}
.pcard .body,.fbox,.fbox label,.ps-opt,.ps-card .body,.pricebox,.sheetfoot{font-family:var(--font-head)}
.pcard .keyspec,.fgroup label{font-weight:600}
.btn,.sheetfoot .btn{font-family:var(--font-logo)}
@media (max-width:859px){ .band a{font-size:19px} }