/* CENG Concept · site (sade düzen, 2026-10) */
*,*::before,*::after{box-sizing:border-box}
html,body{margin:0;padding:0}
[hidden]{display:none!important}

:root{
  color-scheme:light;
  --zemin:#f4f4f2; --yuzey:#ffffff; --yuzey-2:#ecebe8; --cizgi:#dcdbd6; --cizgi-2:#e8e7e3;
  --murekkep:#1c1d1f; --murekkep-2:#4b4d52; --murekkep-3:#7c7e83;
  --vurgu:#d8232f; --kirmizi:#d8232f; --seffaf:#c9b77a; --golge:rgba(20,20,22,.08);
}
@media (prefers-color-scheme:dark){
  :root{
    color-scheme:dark;
    --zemin:#121315; --yuzey:#1a1b1e; --yuzey-2:#232428; --cizgi:#35373c; --cizgi-2:#2a2c30;
    --murekkep:#f1f1ef; --murekkep-2:#c0c1c5; --murekkep-3:#8b8d92;
    --vurgu:#ef5a5f; --kirmizi:#ef5a5f; --seffaf:#d9c88f; --golge:rgba(0,0,0,.45);
  }
  .logo img,.alt-logo{filter:invert(1)}
  .hero-g figure,.pc-img,.galeri .g-ana,.g-kucuk button{background:#e9e8e5}
}
body{background:var(--zemin);color:var(--murekkep);font:15px/1.6 "IBM Plex Sans",system-ui,-apple-system,"Segoe UI",sans-serif;-webkit-font-smoothing:antialiased}
a{color:inherit}
h1,h2,h3{font-family:Jost,"IBM Plex Sans",sans-serif;font-weight:600;letter-spacing:-.01em;line-height:1.15}
.num{font-family:"IBM Plex Mono",monospace;font-variant-numeric:tabular-nums}
.soluk{color:var(--murekkep-3);font-weight:400}
.kucuk{font-size:12.5px}
.ic{max-width:1160px;margin:0 auto;padding:0 24px}
.ic.dar{max-width:860px}
.mk{font-family:"IBM Plex Mono",monospace;font-size:.72em;font-weight:600;letter-spacing:.08em;color:var(--murekkep-3)}

/* üst çubuk */
.ust{position:sticky;top:0;z-index:20;background:color-mix(in srgb,var(--zemin) 92%,transparent);backdrop-filter:blur(10px);border-bottom:1px solid var(--cizgi)}
.ust .ic{display:flex;align-items:center;gap:22px;height:60px}
.logo{display:flex;align-items:center;gap:9px;text-decoration:none;flex:none}
.logo span{font:500 18px Jost,sans-serif;letter-spacing:.06em}
.logo b{font-weight:400;color:var(--murekkep-3);letter-spacing:.02em}
.ust nav{display:flex;gap:2px;flex:1;min-width:0}
.ust nav a{text-decoration:none;font-size:14px;font-weight:500;color:var(--murekkep-2);padding:6px 11px;border-radius:8px;white-space:nowrap}
.ust nav a:hover{background:var(--yuzey-2);color:var(--murekkep)}
.ust nav a[aria-current]{color:var(--murekkep);background:var(--yuzey-2)}
.giris{text-decoration:none;font-size:13.5px;font-weight:500;padding:6px 15px;border-radius:8px;border:1px solid var(--cizgi);background:var(--yuzey);flex:none}
.giris:hover{border-color:var(--murekkep-3)}

/* düğmeler */
.dugmeler{display:flex;gap:10px;flex-wrap:wrap}
.btn{display:inline-block;text-decoration:none;font-weight:500;font-size:14.5px;padding:10px 18px;border-radius:9px;border:1px solid var(--cizgi);background:var(--yuzey)}
.btn:hover{border-color:var(--murekkep-3)}
.btn.ana{background:var(--murekkep);border-color:var(--murekkep);color:var(--zemin)}
.btn.ana:hover{background:var(--murekkep-2)}
.git-l{display:inline-block;margin-top:8px;font-weight:500;font-size:14px;color:var(--murekkep-2)}

/* ana sayfa */
.hero{padding:48px 0 28px}
.hero-ic{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:40px;align-items:center}
.ust-baslik{font:600 12px "IBM Plex Mono",monospace;letter-spacing:.1em;text-transform:uppercase;color:var(--vurgu);margin:0 0 12px}
.hero h1{font-size:clamp(32px,4.6vw,50px);margin:0 0 14px}
.giris-m{font-size:16.5px;color:var(--murekkep-2);margin:0 0 24px;max-width:34em}
.hero-g{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.hero-g figure{margin:0;background:linear-gradient(#efeeeb,#e2e1de);border-radius:16px;padding:22px 16px 14px;display:flex;flex-direction:column;align-items:center;gap:10px}
.hero-g img{width:100%;height:auto;max-height:260px;object-fit:contain;filter:drop-shadow(8px 14px 14px rgba(0,0,0,.18))}
.hero-g figcaption{font:600 12px "IBM Plex Mono",monospace;letter-spacing:.08em;text-transform:uppercase;color:#55565a;display:flex;align-items:center;gap:8px}
.bolum{padding:36px 0 4px}
.b-bas{display:flex;align-items:baseline;justify-content:space-between;gap:16px;margin-bottom:14px}
.b-bas h2{font-size:24px;margin:0}
.b-bas a{font-size:14px;font-weight:500;color:var(--murekkep-2)}
.iki{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.kat{display:flex;flex-direction:column;gap:6px;text-decoration:none;background:var(--yuzey);border:1px solid var(--cizgi);border-radius:14px;padding:22px 24px;position:relative;overflow:hidden;transition:border-color .15s,box-shadow .15s}
.kat::before{content:"";position:absolute;inset:0 0 auto 0;height:3px;background:var(--vurgu)}
.kat:hover{border-color:var(--murekkep-3);box-shadow:0 8px 24px var(--golge)}
.kat-no{font:600 12px "IBM Plex Mono",monospace;color:var(--vurgu);letter-spacing:.08em}
.kat h2{font-size:24px;margin:0}
.kat p{margin:0;color:var(--murekkep-2)}
.kat .git{margin-top:6px;font-weight:500;font-size:14px}
.hakkinda-kisa h2{font-size:24px;margin:0 0 10px}
.hakkinda-kisa p{color:var(--murekkep-2);margin:0 0 10px}
.iletisim-kutu p{margin:0 0 12px}

/* marka kartları */
.mk-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:10px}
.mk-kart{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;min-height:96px;text-decoration:none;text-align:center;
  background:var(--yuzey);border:1px solid var(--cizgi);border-radius:12px;padding:16px 12px;transition:border-color .15s,box-shadow .15s,transform .15s}
.mk-kart:hover{border-color:var(--murekkep);box-shadow:0 6px 18px var(--golge);transform:translateY(-1px)}
.mk-kart:focus-visible{outline:2px solid var(--vurgu);outline-offset:2px}
.mk-ad{font:600 21px Jost,sans-serif;letter-spacing:.07em;line-height:1.1;overflow-wrap:anywhere}
.mk-ad.uzun{font-size:16px;letter-spacing:.04em}
.mk-kart img{max-width:80%;max-height:42px;object-fit:contain}
.mk-kart small{font-size:12px;color:var(--murekkep-3)}

/* model listesi + açılır şema */
.ara{width:100%;font:inherit;font-size:15px;color:var(--murekkep);background:var(--yuzey);border:1px solid var(--cizgi);border-radius:10px;padding:10px 14px;margin-bottom:14px}
.ara:focus{outline:2px solid color-mix(in srgb,var(--vurgu) 40%,transparent);border-color:var(--vurgu)}
.model-liste{display:flex;flex-direction:column;gap:8px}
.model-liste h2{font-size:18px;margin:18px 0 4px}
.model-satir{display:flex;align-items:baseline;gap:8px;text-decoration:none;background:var(--yuzey);border:1px solid var(--cizgi);border-radius:10px;padding:11px 16px;font:500 17px Jost,sans-serif}
.model-satir span:last-child{margin-left:auto;color:var(--murekkep-3)}
.model-satir:hover{border-color:var(--murekkep-3)}
details.model{background:var(--yuzey);border:1px solid var(--cizgi);border-radius:12px;overflow:hidden}
details.model[open]{border-color:var(--murekkep-3);box-shadow:0 6px 18px var(--golge)}
details.model summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:12px;padding:13px 16px}
details.model summary::-webkit-details-marker{display:none}
details.model summary b{font:600 18px Jost,sans-serif}
details.model summary .ac{margin-left:auto;font-size:13px;font-weight:500;color:var(--murekkep-2);display:flex;align-items:center;gap:6px}
details.model summary .ac::after{content:"";width:8px;height:8px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(45deg) translateY(-2px);transition:transform .15s}
details.model[open] summary .ac::after{transform:rotate(-135deg) translateY(-1px)}
details.model summary:hover{background:var(--yuzey-2)}
.model-ic{padding:4px 16px 16px;display:flex;flex-direction:column;gap:12px}
.renkler{display:inline-flex;gap:4px}
.nokta{display:inline-block;width:10px;height:10px;border-radius:50%;background:var(--murekkep-3);vertical-align:middle;flex:none}
.nokta.kirmizi{background:var(--kirmizi)} .nokta.seffaf{background:var(--seffaf)}
td .nokta,.renk-bas .nokta{margin-right:8px}
.bos{color:var(--murekkep-3);padding:24px 0}

/* şema (paneldekiyle aynı) */
.sema{margin:0;padding:8px 10px 4px;border:1px solid var(--cizgi-2);border-radius:10px;background:var(--yuzey-2);
  --lf:color-mix(in srgb,var(--murekkep-3) 22%,transparent); --ls:var(--murekkep-3)}
.sema.kirmizi{--lf:color-mix(in srgb,var(--kirmizi) 28%,transparent); --ls:var(--kirmizi)}
.sema.seffaf{--lf:color-mix(in srgb,var(--seffaf) 30%,transparent); --ls:#b59f55}
.sema svg{display:block;width:100%;height:auto;max-width:640px}
.sm-lastik{fill:var(--lf);stroke:var(--ls);stroke-width:1.5}
.sm-dim{stroke:var(--murekkep-2);stroke-width:1} .sm-ok{fill:var(--murekkep-2)}
.sm-ext{stroke:var(--murekkep-3);stroke-width:.8;stroke-dasharray:2 2}
.sm-bg{fill:var(--yuzey-2)}
.sm-ad{font:600 12px "IBM Plex Sans",sans-serif;letter-spacing:.06em;fill:var(--murekkep-2)}
.sm-alt{font:400 12px "IBM Plex Sans",sans-serif;fill:var(--murekkep-3)}
.sm-val{font:600 13px "IBM Plex Mono",monospace;fill:var(--murekkep)}
.renk-bas{display:flex;align-items:center;font-weight:500;margin:4px 0 -4px}
.tablo{border-collapse:collapse;width:100%;font-size:14px}
.tablo th,.tablo td{text-align:left;padding:8px 8px;border-bottom:1px solid var(--cizgi-2);vertical-align:top}
.tablo th{font-size:11px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--murekkep-3)}
.tablo td.num{font-size:13px} .tablo td:first-child{white-space:nowrap}

/* sayfa başı, ürün sayfası */
.sayfa-bas{padding:36px 0 16px}
.sayfa-bas h1{font-size:clamp(28px,3.6vw,38px);margin:0 0 6px}
.sayfa-bas p{margin:0;color:var(--murekkep-2);max-width:46em}
.iz{font-size:13px;color:var(--murekkep-3);padding:22px 0 0}
.iz a{text-decoration:none} .iz a:hover{color:var(--murekkep)}
.urun-bas{padding:10px 0 16px}
.urun-bas h1{font-size:clamp(28px,3.6vw,40px);margin:0}
.urun-bas h1 .mk{font-size:.5em;margin-right:6px}
.urun-bas p{margin:4px 0 0;color:var(--murekkep-3)}
.urun-ic{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:16px;align-items:start}
.kutu{background:var(--yuzey);border:1px solid var(--cizgi);border-radius:14px;padding:20px 22px}
.kutu h2{font-size:18px;margin:0 0 12px}
.kutu .buyuk{font-size:17px;line-height:1.9}
.bilgi{display:grid;grid-template-columns:auto 1fr;gap:8px 20px;margin:0 0 14px}
.bilgi dt{color:var(--murekkep-3)} .bilgi dd{margin:0;font-weight:500}
.metin p{font-size:16.5px;color:var(--murekkep-2);margin:0 0 14px}

/* yedek parça */
.filtre{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-bottom:16px}
.filtre a{text-decoration:none;font-size:13.5px;font-weight:500;padding:5px 12px;border-radius:999px;border:1px solid var(--cizgi);background:var(--yuzey);color:var(--murekkep-2)}
.filtre a[aria-current]{background:var(--murekkep);border-color:var(--murekkep);color:var(--zemin)}
.filtre small{opacity:.65;margin-left:3px}
.filtre .ara{width:auto;flex:1 1 200px;margin:0 0 0 auto;max-width:280px;padding:6px 12px}
.pc-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:12px;padding-bottom:32px}
.pc{display:flex;flex-direction:column;text-decoration:none;background:var(--yuzey);border:1px solid var(--cizgi);border-radius:12px;overflow:hidden;transition:border-color .15s,box-shadow .15s}
.pc:hover{border-color:var(--murekkep-3);box-shadow:0 6px 18px var(--golge)}
.pc-img{aspect-ratio:1;overflow:hidden;background:#fff;display:grid;place-items:center;border-bottom:1px solid var(--cizgi-2)}
.pc-img img{width:100%;height:100%;object-fit:contain;padding:12px}
.pc-b{padding:9px 13px 12px;display:flex;flex-direction:column;gap:1px}
.pc-b b{font-weight:600;font-size:14px;line-height:1.3}
.galeri .g-ana{aspect-ratio:1;background:#fff;border-radius:10px;overflow:hidden;display:grid;place-items:center}
.galeri .g-ana img{width:100%;height:100%;object-fit:contain;padding:18px}
.galeri .bosg{background:var(--yuzey-2);color:var(--murekkep-3)}
.g-kucuk{display:flex;gap:8px;margin-top:10px}
.g-kucuk button{width:68px;height:68px;padding:0;border:1px solid var(--cizgi);border-radius:8px;background:#fff;cursor:pointer;overflow:hidden}
.g-kucuk button[aria-pressed="true"]{border:2px solid var(--vurgu)}
.g-kucuk img{width:100%;height:100%;object-fit:contain}

/* alt bilgi */
.alt{margin-top:48px;border-top:1px solid var(--cizgi);background:var(--yuzey)}
.alt .ic:first-child{display:grid;grid-template-columns:1.3fr 1fr 1fr;gap:28px;padding-block:28px 18px}
.alt-k b{display:block;font-size:12px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--murekkep-3);margin-bottom:6px}
.alt-k p{margin:0;color:var(--murekkep-2);font-size:14px;line-height:1.7}
.alt-k a{text-decoration:none} .alt-k a:hover{text-decoration:underline}
.alt-logo{display:block;margin-bottom:10px}
.alt-not{padding-bottom:22px} .alt-not p{margin:0 0 4px;font-size:12px;color:var(--murekkep-3)}

@media (max-width:900px){
  .hero{padding:28px 0 16px} .hero-ic,.urun-ic,.iki{grid-template-columns:minmax(0,1fr)} .hero-ic{gap:22px}
  .alt .ic:first-child{grid-template-columns:1fr 1fr} .alt-k:first-child{grid-column:1/-1}
}
@media (max-width:640px){
  .ic{padding:0 16px}
  .ust .ic{gap:10px;height:auto;padding-block:8px;flex-wrap:wrap}
  .ust nav{order:3;flex-basis:100%;overflow-x:auto;margin:0 -16px;padding:0 10px;scrollbar-width:none}
  .ust nav::-webkit-scrollbar{display:none}
  .logo span{font-size:17px}
  .giris{margin-left:auto}
  .mk-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .mk-ad{font-size:18px} .mk-ad.uzun{font-size:14px}
  .pc-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  .filtre .ara{max-width:none;margin:0}
  .alt .ic:first-child{grid-template-columns:1fr}
  .tablo{font-size:13px} .tablo th,.tablo td{padding:7px 4px}
  .hero-g img{max-height:180px}
}