/* winkelledbar.com.tr — elle düzenlenir (build.py üretmez) */
:root {
  --acc: #f25900;
  --or: #f25900;
  --or2: #c94a00;
  --ink: #1c1c1e;
  --ink2: #262626;
  --tx: #2b2b2e;
  --mut: #6c757d;
  --line: #ebebeb;
  --bg: #f6f5f3;
  --card: #fff;
  --wa: #1faa53;
  --glow: #fff4e8;
  --r: 14px;
  --disp: "Barlow Condensed", "Arial Narrow", system-ui, sans-serif;
  --body: "Barlow", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; overflow-x: hidden; overflow-x: clip; }
body { margin: 0; background: var(--bg); color: var(--tx); font: 400 17px/1.6 var(--body); overflow-x: hidden; }
img { max-width: 100%; height: auto; display: block; }
a { color: var(--or2); }
h1, h2, h3 { font-family: var(--disp); line-height: 1.05; color: var(--ink); margin: 0 0 .5em; letter-spacing: -.01em; }
h1 { font-size: clamp(2.3rem, 6vw, 4.6rem); font-weight: 800; text-transform: uppercase; }
h2 { font-size: clamp(1.6rem, 3.4vw, 2.4rem); font-weight: 700; }
h3 { font-size: 1.25rem; font-weight: 700; }
p { margin: 0 0 1em; }
.wrap { width: 100%; max-width: 1240px; margin: 0 auto; padding: 0 16px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: -999px; top: 0; background: var(--ink); color: #fff; padding: 8px 14px; z-index: 99; }
.skip:focus { left: 8px; }
.muted { color: var(--mut); font-size: .95rem; }
.eyebrow { font: 700 .82rem/1 var(--body); letter-spacing: .14em; text-transform: uppercase; color: var(--acc); margin-bottom: 14px; }
.lead { font-size: 1.15rem; }

/* butonlar */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; padding: 0 22px; border-radius: 999px; border: 2px solid transparent; font: 700 1rem/1 var(--body); text-decoration: none; cursor: pointer; transition: transform .15s, background .15s, box-shadow .15s; }
.btn:hover { transform: translateY(-1px); }
.btn-acc { background: var(--acc); color: #fff; box-shadow: 0 8px 22px -10px var(--acc); }
.btn-acc:hover { background: var(--or2); }
.btn-wa { background: var(--wa); color: #fff; box-shadow: 0 8px 22px -10px var(--wa); }
.btn-wa::before { content: ""; width: 18px; height: 18px; background: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2a10 10 0 0 0-8.6 15.1L2 22l5-1.3A10 10 0 1 0 12 2zm5.3 14.1c-.2.6-1.3 1.2-1.8 1.3-.5 0-1 .2-3.3-.7-2.8-1.1-4.5-4-4.7-4.2-.1-.2-1.1-1.5-1.1-2.9s.7-2 1-2.3c.2-.3.5-.3.7-.3h.5c.2 0 .4 0 .6.5l.9 2.1c.1.2.1.4 0 .5l-.3.5-.4.5c-.1.1-.3.3-.1.6.2.3.8 1.3 1.7 2.1 1.2 1 2.2 1.4 2.5 1.5.3.2.5.1.6 0l.9-1c.2-.3.4-.2.6-.1l2 1c.3.1.5.2.5.3.1.2.1.7-.1 1.4z'/%3E%3C/svg%3E") center/contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2a10 10 0 0 0-8.6 15.1L2 22l5-1.3A10 10 0 1 0 12 2zm5.3 14.1c-.2.6-1.3 1.2-1.8 1.3-.5 0-1 .2-3.3-.7-2.8-1.1-4.5-4-4.7-4.2-.1-.2-1.1-1.5-1.1-2.9s.7-2 1-2.3c.2-.3.5-.3.7-.3h.5c.2 0 .4 0 .6.5l.9 2.1c.1.2.1.4 0 .5l-.3.5-.4.5c-.1.1-.3.3-.1.6.2.3.8 1.3 1.7 2.1 1.2 1 2.2 1.4 2.5 1.5.3.2.5.1.6 0l.9-1c.2-.3.4-.2.6-.1l2 1c.3.1.5.2.5.3.1.2.1.7-.1 1.4z'/%3E%3C/svg%3E") center/contain no-repeat; flex: none; }
.btn-wa:hover { background: #178a43; }
.btn-ghost { background: transparent; color: inherit; border-color: currentColor; }
.btn-add { background: var(--ink); color: #fff; min-height: 42px; padding: 0 16px; font-size: .92rem; }
.btn-add.ok { background: var(--wa); }
.lnk { font-weight: 700; color: var(--acc); text-decoration: none; }

/* üst bant + header */
.topline { background: var(--ink); color: #cfcfcf; font-size: .82rem; }
.topline .wrap { display: flex; justify-content: space-between; gap: 12px; padding-top: 6px; padding-bottom: 6px; }
.topline a { color: #fff; text-decoration: none; font-weight: 600; white-space: nowrap; }
.hdr { position: sticky; top: 0; z-index: 40; background: rgba(255,255,255,.96); backdrop-filter: saturate(1.4) blur(8px); border-bottom: 1px solid var(--line); }
.hdr-in { display: flex; align-items: center; gap: 18px; min-height: 68px; }
.logo { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; color: var(--ink); min-width: 0; }
.logo-bar { display: inline-flex; align-items: center; gap: 4px; padding: 6px 7px; background: var(--or); border-radius: 5px; flex: none; }
.logo-bar i { width: 6px; height: 6px; border-radius: 50%; background: var(--glow); box-shadow: 0 0 6px 2px rgba(255,214,170,.9); }
.logo-t { font: 800 1.65rem/1 var(--disp); letter-spacing: -.01em; white-space: nowrap; }
.logo-t b { color: var(--or); font-weight: 800; }
.nav { display: flex; gap: 4px; margin-left: auto; }
.nav a { padding: 10px 12px; border-radius: 8px; text-decoration: none; color: var(--ink); font-weight: 600; font-size: .98rem; }
.nav a:hover, .nav a.on { background: #fff0e6; color: var(--or2); }
.cart-btn { position: relative; display: grid; place-items: center; width: 46px; height: 46px; border-radius: 50%; border: 0; background: var(--ink); color: #fff; cursor: pointer; flex: none; }
.cart-n { position: absolute; top: -3px; right: -3px; min-width: 21px; height: 21px; padding: 0 5px; border-radius: 11px; background: var(--or); color: #fff; font: 700 .75rem/21px var(--body); text-align: center; }
.cart-n[data-bos] { display: none; }
.burger { display: none; width: 46px; height: 46px; border: 0; background: transparent; padding: 11px; cursor: pointer; flex: none; }
.burger span { display: block; height: 3px; margin: 4px 0; background: var(--ink); border-radius: 2px; }

/* hero */
.hero { position: relative; background: radial-gradient(1200px 500px at 85% 20%, #3a2214 0%, transparent 60%), var(--ink); color: #ececec; overflow: hidden; padding: 56px 0 0; }
.hero-in { display: grid; grid-template-columns: 1.15fr .85fr; gap: 40px; align-items: center; }
.hero h1 { color: #fff; }
.hero h1 span { color: var(--or); }
.hero .lead { color: #cfcfcf; max-width: 620px; }
.hero-hint { font-size: .9rem; color: #a7a7a7; margin-top: 14px; }
.hero-hint a { color: #ffb27a; margin-right: 8px; }
.tv { position: relative; margin: 0 auto; width: min(100%, 440px); }
.tv-screen { position: relative; aspect-ratio: 16/10; border: 10px solid #0d0d0e; border-radius: 10px; background: #08080a; overflow: hidden; box-shadow: 0 30px 60px -20px #000, 0 0 0 1px #333; }
.tv-bars { position: absolute; inset: 16% 8%; display: grid; grid-template-rows: repeat(4, 1fr); gap: 10%; }
.tv-bars span { position: relative; border-radius: 3px; background: var(--or); opacity: .2; animation: bar 4.8s infinite; background-image: radial-gradient(circle, #fff7ee 0 3px, transparent 4px); background-size: 11% 100%; background-position: center; }
.tv-bars span:nth-child(2) { animation-delay: .35s; } .tv-bars span:nth-child(3) { animation-delay: .7s; } .tv-bars span:nth-child(4) { animation-delay: 1.05s; }
.tv-glow { position: absolute; inset: 0; background: radial-gradient(closest-side, rgba(255,160,90,.55), transparent); opacity: 0; animation: glow 4.8s infinite; }
.tv-foot { width: 34%; height: 14px; margin: 0 auto; background: linear-gradient(#111, #2a2a2a); border-radius: 0 0 10px 10px; }
@keyframes bar { 0%, 12% { opacity: .15; box-shadow: none; } 30%, 80% { opacity: 1; box-shadow: 0 0 22px 4px rgba(242,89,0,.6); } 100% { opacity: .15; } }
@keyframes glow { 0%, 25% { opacity: 0; } 45%, 80% { opacity: 1; } 100% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .tv-bars span, .tv-glow { animation: none; opacity: 1; } }
.stats { display: grid; grid-template-columns: repeat(4, 1fr); margin-top: 48px; border-top: 1px solid #3a3a3d; }
.stats div { padding: 22px 8px; border-right: 1px solid #3a3a3d; }
.stats div:last-child { border: 0; }
.stats b { display: block; font: 800 2.3rem/1 var(--disp); color: #fff; }
.stats span { font-size: .9rem; color: #a7a7a7; }

/* arama */
.srch { display: flex; background: #fff; border-radius: 999px; padding: 5px; border: 2px solid var(--line); max-width: 640px; }
.srch input { flex: 1; min-width: 0; border: 0; outline: 0; font: 500 1rem var(--body); padding: 0 16px; background: transparent; color: var(--ink); }
.srch button { border: 0; border-radius: 999px; background: var(--acc); color: #fff; font: 700 1rem var(--body); padding: 0 24px; min-height: 46px; cursor: pointer; }
.srch-big { border-color: var(--or); box-shadow: 0 0 0 6px rgba(242,89,0,.18); margin-top: 26px; }
.srch-big input { font-size: 1.08rem; }
.srch-live { flex: 1 1 340px; max-width: none; }
.srch-live button { background: transparent; color: var(--mut); font-size: 1.4rem; padding: 0 14px; }

/* bölümler */
.sec { padding-top: 56px; padding-bottom: 8px; }
.sec-h { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; flex-wrap: wrap; margin-bottom: 18px; }
.sec-h h2 { margin: 0; }
.sec-h a { font-weight: 700; color: var(--acc); text-decoration: none; }
.mk-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 12px; }
.mk-tile { position: relative; display: flex; flex-direction: column; gap: 4px; padding: 18px 16px; border-radius: var(--r); background: var(--card); border: 1px solid var(--line); text-decoration: none; color: var(--ink); overflow: hidden; transition: border-color .15s, transform .15s; }
.mk-tile::after { content: ""; position: absolute; left: 0; bottom: 0; height: 4px; width: 100%; background: var(--or); transform: scaleX(.18); transform-origin: left; transition: transform .25s; }
.mk-tile:hover { border-color: var(--or); transform: translateY(-2px); }
.mk-tile:hover::after { transform: scaleX(1); }
.mk-tile b { font: 800 1.5rem/1.05 var(--disp); }
.mk-tile span { color: var(--mut); font-size: .9rem; }
.mk-tile em { font-style: normal; font-size: .9rem; color: var(--tx); margin-top: 6px; }
.mk-other b { color: var(--or2); }
.mk-grid-l { grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }

.steps-band { margin-top: 64px; padding: 56px 0; background: var(--or); color: #fff; }
.steps-band h2 { color: #fff; max-width: 760px; }
.steps { list-style: none; margin: 26px 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.steps li { background: rgba(0,0,0,.14); border-radius: var(--r); padding: 22px; }
.steps b { font: 800 3rem/1 var(--disp); color: var(--ink); opacity: .55; }
.steps h3 { color: #fff; font-size: 1.6rem; margin: 6px 0; text-transform: uppercase; }
.steps p { margin: 0; color: #fff3ea; }

.inc-row { display: flex; flex-wrap: wrap; gap: 10px; }
.inc-row a { display: flex; flex-direction: column; align-items: center; min-width: 76px; padding: 12px 10px; border-radius: 12px; background: var(--ink); color: #fff; text-decoration: none; }
.inc-row b { font: 800 1.7rem/1 var(--disp); }
.inc-row span { font-size: .78rem; color: #ffb27a; }
.inc-row a:hover { background: var(--or); }
.inc-row a:hover span { color: #fff; }

/* ürün kartları */
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 16px; }
.card { display: flex; flex-direction: column; background: var(--card); border-radius: var(--r); border: 1px solid var(--line); overflow: hidden; transition: box-shadow .2s, transform .2s; min-width: 0; }
.card:hover { box-shadow: 0 18px 40px -22px rgba(0,0,0,.35); transform: translateY(-2px); }
.card-img { display: block; background: #fff; aspect-ratio: 1; border-bottom: 1px solid var(--line); }
.card-img img { width: 100%; height: 100%; object-fit: contain; padding: 10px; }
.card-b { padding: 14px 14px 6px; flex: 1; min-width: 0; }
.card-br { display: inline-block; font: 700 .72rem/1 var(--body); letter-spacing: .12em; text-transform: uppercase; color: #fff; background: var(--acc); padding: 5px 8px; border-radius: 4px; }
.card h3 { font: 600 1rem/1.3 var(--body); margin: 10px 0 6px; }
.card h3 a { color: var(--ink); text-decoration: none; }
.card h3 a:hover { color: var(--or2); }
.card-k { font-size: .82rem; color: var(--mut); margin: 0 0 4px; overflow-wrap: anywhere; }
.card-o { font-size: .85rem; font-weight: 600; color: var(--tx); margin: 0; }
.card-f { display: flex; gap: 8px; padding: 10px 14px 14px; }
.card-f .btn-add { flex: 1; }
.btn-wa-mini { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 50%; background: var(--wa); color: #fff; font: 800 .8rem var(--body); text-decoration: none; flex: none; }

/* koyu bant */
.band-dark { position: relative; margin-top: 72px; padding: 64px 0 96px; background: var(--ink); color: #d4d4d4; overflow: hidden; }
.band-dark h2 { color: #fff; }
.split { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: start; }
.checks { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.checks li { position: relative; padding: 14px 16px 14px 48px; background: #2a2a2d; border-radius: 12px; color: #f0f0f0; font-weight: 600; }
.checks li::before { content: ""; position: absolute; left: 16px; top: 50%; width: 18px; height: 18px; margin-top: -9px; border-radius: 50%; background: var(--or); box-shadow: 0 0 12px 2px rgba(242,89,0,.6); }
.checks.dark li { background: #fff; color: var(--ink); border: 1px solid var(--line); }
.strip { position: absolute; left: 0; right: 0; bottom: 26px; height: 18px; margin: 0 16px; border-radius: 4px; background: var(--or); display: flex; justify-content: space-around; align-items: center; }
.strip i { width: 9px; height: 9px; border-radius: 50%; background: var(--glow); box-shadow: 0 0 14px 6px rgba(255,190,130,.8); }

.repair { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: center; }
.repair-tags { display: flex; flex-wrap: wrap; gap: 8px; }
.repair-tags a { padding: 10px 14px; border-radius: 999px; background: #fff; border: 1px solid var(--line); text-decoration: none; color: var(--ink); font-weight: 600; font-size: .95rem; }
.repair-tags a:hover { border-color: var(--or); color: var(--or2); }

/* SSS */
.faq { padding: 56px 0 8px; max-width: 900px; }
.faq details { background: #fff; border: 1px solid var(--line); border-radius: 12px; margin-bottom: 10px; }
.faq summary { cursor: pointer; padding: 16px 48px 16px 18px; font-weight: 700; color: var(--ink); list-style: none; position: relative; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; position: absolute; right: 18px; top: 50%; transform: translateY(-50%); font: 700 1.5rem var(--body); color: var(--acc); }
.faq details[open] summary::after { content: "–"; }
.faq details p { padding: 0 18px 16px; margin: 0; }

.cta { display: flex; justify-content: space-between; align-items: center; gap: 24px; flex-wrap: wrap; margin-top: 56px; margin-bottom: 64px; padding: 34px; border-radius: 20px; background: linear-gradient(120deg, var(--or), #ff8a3d); color: #fff; }
.cta h2 { color: #fff; margin-bottom: 6px; }
.cta p { margin: 0; }
.cta .btn-ghost { color: #fff; }
.cta-b { display: flex; flex-wrap: wrap; gap: 10px; }

/* breadcrumb + katalog */
.crumbs { padding-top: 16px; font-size: .88rem; color: var(--mut); overflow-wrap: anywhere; }
.crumbs a { color: var(--mut); }
.kat-hero { padding-top: 22px; padding-bottom: 6px; }
.kat-hero h1 { font-size: clamp(2.1rem, 5vw, 3.6rem); }
.kat-hero p { max-width: 820px; font-size: 1.08rem; }
.kat-hero .cta-b { margin-top: 14px; }
.kat { padding-top: 10px; }
.kat-bar { display: flex; flex-wrap: wrap; gap: 10px; position: sticky; top: 68px; z-index: 20; background: var(--bg); padding: 12px 0; }
.sel select { height: 100%; min-height: 50px; border-radius: 999px; border: 2px solid var(--line); background: #fff; padding: 0 16px; font: 600 .95rem var(--body); color: var(--ink); max-width: 100%; }
.chips { display: flex; gap: 8px; overflow-x: auto; padding: 4px 0 12px; scrollbar-width: thin; }
.chips button { flex: none; border: 1px solid var(--line); background: #fff; border-radius: 999px; padding: 9px 14px; font: 600 .9rem var(--body); color: var(--ink); cursor: pointer; }
.chips button span { color: var(--mut); font-weight: 500; margin-left: 2px; }
.chips button.on { background: var(--ink); border-color: var(--ink); color: #fff; }
.chips button.on span { color: #ffb27a; }
.kat-say { font-weight: 700; color: var(--ink); margin: 4px 0 14px; }
.kat-more { text-align: center; padding: 26px 0 0; }
.kat-more[hidden] { display: none; }
.help-row { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; padding-top: 56px; }
.help-row > div { background: #fff; border: 1px solid var(--line); border-left: 5px solid var(--or); border-radius: 12px; padding: 22px; }
.help-row h2 { font-size: 1.6rem; }
.bos { grid-column: 1 / -1; background: #fff; border: 2px dashed var(--line); border-radius: var(--r); padding: 30px; text-align: center; }

/* ürün sayfası */
.pd { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: 40px; padding-top: 20px; }
.pd-img { position: relative; background: #fff; border-radius: 20px; border: 1px solid var(--line); padding: 20px 20px 60px; align-self: start; overflow: hidden; }
.pd-img img { width: 100%; aspect-ratio: 1; object-fit: contain; }
.pd-img .strip { bottom: 18px; height: 14px; }
.pd-br { font: 700 .82rem/1 var(--body); letter-spacing: .14em; text-transform: uppercase; color: var(--acc); }
.pd h1, .mk-hero h1 { text-transform: none; }
.pd h1 { font-size: clamp(1.9rem, 4vw, 3rem); margin-top: 10px; overflow-wrap: anywhere; }
.pd-k { color: var(--mut); overflow-wrap: anywhere; }
.pd-k b { color: var(--ink); }
.pd-quick { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 8px; margin: 18px 0; }
.pd-quick div { background: var(--ink); color: #fff; border-radius: 12px; padding: 12px; }
.pd-quick span { display: block; font-size: .75rem; letter-spacing: .1em; text-transform: uppercase; color: #ffb27a; }
.pd-quick b { font: 700 1.2rem/1.2 var(--disp); overflow-wrap: anywhere; }
.pd-cta { display: flex; flex-wrap: wrap; gap: 10px; }
.pd-cta .btn { min-height: 54px; font-size: 1.05rem; }
.pd-cta .btn-add { min-height: 54px; padding: 0 22px; }
.pd-alt { font-size: .92rem; color: var(--mut); margin-top: 12px; }
.pd-yerinde { display: block; margin-top: 18px; padding: 16px 18px; border-radius: 14px; background: #fff0e6; border: 1px solid #ffd2b0; text-decoration: none; color: var(--ink); }
.pd-yerinde b { display: block; color: var(--or2); }
.pd-yerinde span { font-size: .95rem; }
.pd-specs { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 32px; padding-top: 48px; }
.spec { width: 100%; border-collapse: collapse; background: #fff; border-radius: 12px; overflow: hidden; border: 1px solid var(--line); }
.spec th, .spec td { text-align: left; vertical-align: top; padding: 11px 14px; border-bottom: 1px solid var(--line); font-size: .95rem; overflow-wrap: anywhere; }
.spec th { width: 38%; color: var(--mut); font-weight: 600; background: #fafafa; }
.mods { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.mods li { padding: 6px 10px; border-radius: 6px; background: #fff; border: 1px solid var(--line); font: 600 .85rem/1.2 ui-monospace, Menlo, Consolas, monospace; color: var(--ink); overflow-wrap: anywhere; max-width: 100%; }

/* marka sayfası */
.mk-hero { position: relative; margin-top: 14px; padding: 44px 0 80px; background: linear-gradient(135deg, var(--ink) 0%, #2d1d14 100%); color: #ddd; overflow: hidden; }
.mk-hero h1 { color: #fff; max-width: 900px; }
.mk-hero .srch { margin-top: 18px; }
.mk-body { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 36px; padding-top: 40px; }
.mk-rev .mk-text { order: 2; }
.mk-rev .mk-info { order: 1; }
.mk-info { background: #fff; border-radius: 18px; border: 1px solid var(--line); padding: 22px; align-self: start; border-top: 6px solid var(--acc); }
.mk-num b { font: 800 4rem/1 var(--disp); color: var(--acc); }
.mk-num span { font-weight: 700; margin-left: 6px; }
.mk-info ul { list-style: none; padding: 0; margin: 14px 0 18px; }
.mk-info li { display: flex; justify-content: space-between; gap: 12px; padding: 9px 0; border-bottom: 1px solid var(--line); font-size: .95rem; }
.mk-info li b { text-align: right; overflow-wrap: anywhere; }
.mk-info .btn { width: 100%; }
.mod-cloud { display: flex; flex-wrap: wrap; gap: 8px; }
.mod-cloud a { padding: 8px 12px; border-radius: 8px; background: var(--ink); color: #fff; text-decoration: none; font: 600 .88rem ui-monospace, Menlo, Consolas, monospace; }
.mod-cloud a:hover { background: var(--acc); }
.mk-tamir { display: grid; grid-template-columns: 1.4fr 1fr; gap: 24px; align-items: center; margin-top: 56px; padding: 30px; border-radius: 20px; background: #fff; border: 2px solid var(--acc); }
.mk-tamir-b { display: flex; flex-wrap: wrap; gap: 10px; justify-content: flex-end; }
.mk-tamir .btn-ghost { color: var(--ink); }

/* hizmet sayfaları */
.svc-hero { margin-top: 14px; padding: 48px 0; background: var(--ink); color: #d6d6d6; }
.svc-hero h1 { color: #fff; }
.svc-hero .btn-ghost { color: #fff; }
.svc-in { display: grid; grid-template-columns: 1.2fr .8fr; gap: 40px; align-items: center; }
.layers { display: grid; gap: 6px; perspective: 600px; }
.layers span { display: block; padding: 12px 16px; border-radius: 8px; background: #2c2c2f; color: #bbb; font-weight: 600; transform: rotateX(18deg); }
.layers span.hot { background: var(--or); color: #fff; box-shadow: 0 0 28px 2px rgba(242,89,0,.55); }
.timeline { list-style: none; counter-reset: s; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.timeline li { counter-increment: s; position: relative; background: #fff; border: 1px solid var(--line); border-radius: 14px; padding: 22px 20px 18px; }
.timeline li::before { content: counter(s, decimal-leading-zero); font: 800 2.6rem/1 var(--disp); color: var(--acc); display: block; margin-bottom: 6px; }
.timeline b { font: 700 1.3rem var(--disp); text-transform: uppercase; color: var(--ink); }
.timeline p { margin: 6px 0 0; font-size: .97rem; }
.tbl-wrap { overflow-x: auto; border-radius: 14px; border: 1px solid var(--line); }
.arz { width: 100%; border-collapse: collapse; background: #fff; min-width: 560px; }
.arz th { background: var(--ink); color: #fff; text-align: left; padding: 12px 14px; font-weight: 600; }
.arz td { padding: 12px 14px; border-bottom: 1px solid var(--line); vertical-align: top; }
.arz td b { color: var(--or2); }
.tm-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; margin-bottom: 14px; }
.tm-card { display: block; padding: 18px; border-radius: 14px; background: #fff; border: 1px solid var(--line); text-decoration: none; color: var(--tx); border-left: 5px solid var(--or); }
.tm-card b { display: block; font: 800 1.4rem var(--disp); color: var(--ink); }
.tm-card span { font-size: .93rem; }
.contact { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; padding-top: 20px; }
.ct { display: block; padding: 26px; border-radius: 18px; background: var(--ink); color: #fff; text-decoration: none; }
.ct span { display: block; color: #ffb27a; font-weight: 600; font-size: .9rem; }
.ct b { font: 800 2rem/1.1 var(--disp); }
.ct-wa { background: var(--wa); }
.ct-wa span { color: #e5ffef; }
.split-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; }
.qform { display: grid; gap: 12px; background: #fff; padding: 22px; border-radius: 16px; border: 1px solid var(--line); }
.qform label, .drawer-form label { display: grid; gap: 4px; font-weight: 600; font-size: .92rem; color: var(--ink); }
.qform input, .qform textarea, .drawer-form input { font: 400 1rem var(--body); padding: 12px 14px; border: 2px solid var(--line); border-radius: 10px; width: 100%; background: #fff; color: var(--ink); }
.nf { padding: 70px 16px 90px; text-align: center; }
.nf .srch { margin: 24px auto; }

/* ilçe sayfaları */
.bl-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 10px; }
.bl-tile { display: block; padding: 16px; border-radius: 14px; background: var(--ink); color: #cfcfcf; text-decoration: none; border-bottom: 4px solid var(--or); transition: transform .15s; }
.bl-tile:hover { transform: translateY(-2px); }
.bl-tile b { display: block; font: 800 1.5rem/1.1 var(--disp); color: #fff; }
.bl-tile span { font-size: .85rem; }
.ilc-hero { position: relative; margin-top: 14px; padding: 46px 0 86px; color: #ddd; overflow: hidden; background: var(--ink); }
.ilc-v1 { background: linear-gradient(160deg, #2a1a10, var(--ink) 60%); }
.ilc-v2 { background: linear-gradient(90deg, var(--ink) 55%, #3a210f); }
.ilc-hero h1 { color: #fff; text-transform: none; max-width: 940px; font-size: clamp(2.1rem, 5vw, 3.8rem); }
.ilc-hero .lead { max-width: 820px; color: #d0d0d0; }
.ilc-hero .btn-ghost { color: #fff; }
.ilc-semt { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.ilc-semt li { padding: 10px 14px; border-radius: 999px; background: #fff; border: 2px solid var(--acc); font-weight: 600; color: var(--ink); }
.ilc-saha { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: 28px; align-items: start; }
.ilc-ipucu { background: #fff0e6; border: 1px solid #ffd2b0; border-left: 6px solid var(--acc); border-radius: 14px; padding: 18px 20px; }
.ilc-ipucu b { font: 800 1.2rem var(--disp); text-transform: uppercase; color: var(--or2); }
.ilc-ipucu p { margin: 6px 0 0; }
.ilc-hiz { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 10px; }
.ilc-h { display: block; padding: 18px; border-radius: 14px; background: #fff; border: 1px solid var(--line); border-top: 4px solid var(--acc); text-decoration: none; color: var(--tx); }
.ilc-h b { display: block; font: 700 1.25rem var(--disp); color: var(--ink); }
.ilc-h span { font-size: .92rem; color: var(--mut); }
.ftr-bolge { margin-top: 30px; }
.ftr-bolge div { display: flex; flex-wrap: wrap; gap: 0 16px; }

/* footer */
.ftr { margin-top: 80px; background: #141415; color: #a9a9a9; padding: 56px 0 90px; font-size: .95rem; }
.ftr-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 32px; }
.ftr h3 { color: #fff; font: 700 1.1rem var(--disp); text-transform: uppercase; letter-spacing: .06em; }
.ftr a { display: block; color: #d9d9d9; text-decoration: none; padding: 4px 0; }
.ftr a:hover { color: #ffb27a; }
.logo-ftr { color: #fff; margin-bottom: 10px; }
.f-wa { color: #7be3a2 !important; font-weight: 700; }
.f-mk { display: flex; flex-wrap: wrap; gap: 0 14px; }
.ftr-alt { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 8px; margin-top: 36px; padding-top: 18px; border-top: 1px solid #2c2c2e; font-size: .85rem; }

/* mobil alt çubuk */
.mbar { display: none; }

/* sipariş listesi çekmecesi */
.drawer { position: fixed; inset: 0; z-index: 90; visibility: hidden; }
.drawer.open { visibility: visible; }
.drawer-bg { position: absolute; inset: 0; background: rgba(0,0,0,.5); opacity: 0; transition: opacity .2s; }
.drawer.open .drawer-bg { opacity: 1; }
.drawer:not(.open) .drawer-in { display: none; }
.drawer-in { position: absolute; top: 0; right: 0; bottom: 0; width: min(440px, 100%); background: #fff; display: flex; flex-direction: column; transform: translateX(100%); transition: transform .25s; overflow-y: auto; }
.drawer.open .drawer-in { transform: none; }
.drawer-hd { display: flex; justify-content: space-between; align-items: center; padding: 18px 20px; background: var(--ink); color: #fff; position: sticky; top: 0; z-index: 1; }
.drawer-hd h2 { color: #fff; margin: 0; font-size: 1.7rem; text-transform: uppercase; }
.x { border: 0; background: transparent; color: #fff; font-size: 2rem; line-height: 1; cursor: pointer; width: 44px; height: 44px; }
.drawer-list { padding: 12px 20px; }
.di { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px 12px; padding: 12px 0; border-bottom: 1px solid var(--line); }
.di a { color: var(--ink); font-weight: 600; text-decoration: none; font-size: .95rem; }
.di small { grid-column: 1; color: var(--mut); overflow-wrap: anywhere; }
.di-q { grid-row: 1 / span 2; grid-column: 2; display: flex; align-items: center; gap: 4px; }
.di-q button { width: 32px; height: 32px; border-radius: 8px; border: 1px solid var(--line); background: #fff; font-size: 1.1rem; cursor: pointer; }
.di-q span { min-width: 22px; text-align: center; font-weight: 700; }
.di-bos { padding: 24px 0; color: var(--mut); }
.drawer-form { display: grid; gap: 10px; padding: 8px 20px 24px; }
.drawer-form .chk { display: flex; align-items: center; gap: 10px; padding: 12px; background: #fff0e6; border-radius: 10px; }
.drawer-form .chk input { width: 20px; height: 20px; accent-color: var(--or); }
.drawer-not { font-size: .85rem; color: var(--mut); margin: 4px 0; }
.drawer-form .btn { width: 100%; }
.drawer-form .btn-ghost { color: var(--ink); }
.toast { position: fixed; left: 50%; bottom: 84px; transform: translateX(-50%) translateY(20px); background: var(--ink); color: #fff; padding: 12px 18px; border-radius: 999px; font-weight: 600; opacity: 0; transition: .25s; z-index: 95; pointer-events: none; max-width: calc(100% - 32px); text-align: center; }
.toast.on { opacity: 1; transform: translateX(-50%); }

/* duyarlı */
@media (max-width: 1060px) {
  .nav { position: fixed; top: 0; right: 0; bottom: 0; width: min(300px, 86%); flex-direction: column; background: #fff; padding: 84px 18px 18px; box-shadow: -20px 0 40px rgba(0,0,0,.2); transform: translateX(105%); transition: transform .25s; z-index: 50; margin: 0; }
  .nav.open { transform: none; }
  .nav:not(.open) { visibility: hidden; transition: transform .25s, visibility 0s .25s; }
  .nav a { font-size: 1.1rem; padding: 14px; }
  .burger { display: block; position: relative; z-index: 60; }
  .cart-btn { margin-left: auto; }
  .ftr-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 860px) {
  .ilc-saha, .hero-in, .split, .repair, .pd, .pd-specs, .mk-body, .mk-tamir, .svc-in, .split-2, .help-row { grid-template-columns: minmax(0, 1fr); }
  .mk-rev .mk-text, .mk-rev .mk-info { order: 0; }
  .hero { padding-top: 34px; }
  .hero-tv { max-width: 340px; margin: 0 auto; width: 100%; }
  .stats { grid-template-columns: 1fr 1fr; }
  .stats div:nth-child(2) { border-right: 0; }
  .stats div:nth-child(-n+2) { border-bottom: 1px solid #3a3a3d; }
  .steps, .timeline, .contact { grid-template-columns: minmax(0, 1fr); }
  .mk-tamir-b { justify-content: flex-start; }
  .kat-bar { top: 68px; }
}
@media (max-width: 640px) {
  body { font-size: 16px; padding-bottom: 64px; }
  .topline span { display: none; }
  .topline .wrap { justify-content: flex-end; }
  .logo-t { font-size: 1.4rem; }
  .logo-bar { padding: 5px; gap: 3px; }
  .logo-bar i { width: 5px; height: 5px; }
  .hdr-in { gap: 10px; min-height: 60px; }
  .cart-btn { display: none; }
  .burger { margin-left: auto; }
  .kat-bar { position: static; }
  .sel { flex: 1 1 30%; min-width: 0; }
  .sel select { width: 100%; padding: 0 10px; font-size: .88rem; }
  .grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .card-b { padding: 10px 10px 4px; }
  .card h3 { font-size: .9rem; }
  .card-f { padding: 8px 10px 10px; gap: 6px; }
  .card-f .btn-add { font-size: .8rem; padding: 0 8px; min-height: 38px; }
  .btn-wa-mini { width: 38px; height: 38px; }
  .srch button { padding: 0 16px; }
  .srch input { padding: 0 10px; }
  .cta { padding: 24px 18px; }
  .cta-b .btn, .pd-cta .btn { flex: 1 1 100%; }
  .ftr-grid { grid-template-columns: minmax(0, 1fr); }
  .stats b { font-size: 1.9rem; }
  .mbar { display: grid; grid-template-columns: repeat(4, 1fr); position: fixed; left: 0; right: 0; bottom: 0; z-index: 45; background: var(--ink); border-top: 3px solid var(--or); }
  .mbar a, .mbar button { display: flex; align-items: center; justify-content: center; gap: 4px; min-height: 58px; color: #fff; font: 700 .9rem var(--body); text-decoration: none; background: transparent; border: 0; cursor: pointer; }
  .mbar .mbar-wa { background: var(--wa); }
  .mbar button span { background: var(--or); border-radius: 10px; min-width: 20px; height: 20px; line-height: 20px; font-size: .75rem; padding: 0 4px; }
  .toast { bottom: 76px; }
  .mk-num b { font-size: 3.2rem; }
  .mk-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .mk-grid-l { grid-template-columns: minmax(0, 1fr); }
  .bl-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .bl-tile { padding: 12px; }
  .bl-tile b { font-size: 1.25rem; }
  .mk-tile { padding: 14px 12px; }
  .mk-tile b { font-size: 1.3rem; }
  .mbar button span[data-bos] { display: none; }
}
@media (max-width: 360px) {
  .grid { grid-template-columns: minmax(0, 1fr); }
  .logo-t { font-size: 1.25rem; }
}