/* =========================================================================
   Teknoshop Bilgisayar — tema
   Lacivert #14165a · Elektrik mavisi #3b4dff · 8px grid
   ========================================================================= */

@font-face{font-family:"Bricolage Grotesque";font-style:normal;font-display:swap;font-weight:200 800;
  src:url(../fonts/bricolage-grotesque-latin-wght-normal.woff2) format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Bricolage Grotesque";font-style:normal;font-display:swap;font-weight:200 800;
  src:url(../fonts/bricolage-grotesque-latin-ext-wght-normal.woff2) format("woff2");
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Figtree";font-style:normal;font-display:swap;font-weight:300 900;
  src:url(../fonts/figtree-latin-wght-normal.woff2) format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Figtree";font-style:normal;font-display:swap;font-weight:300 900;
  src:url(../fonts/figtree-latin-ext-wght-normal.woff2) format("woff2");
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}

:root{
  --navy:#14165a; --navy-2:#1d2078; --navy-3:#0c0d3a;
  --blue:#3b4dff; --blue-rgb:59,77,255; --blue-d:#2a39e0; --blue-soft:#eceeff; --blue-soft-2:#dfe3ff;
  --ink:#10123a; --ink-2:#2c2f55; --muted:#5d6180; --faint:#6b6f8c;
  --bg:#ffffff; --bg-2:#f6f7fb; --bg-3:#eef0f7; --line:#e3e5ef; --line-2:#d5d8e6;
  --wa:#16803c; --wa-d:#116a31; --wa-soft:#e6f5ec;
  --ok:#16803c; --warn:#a15c00; --bad:#c2302a;
  --r-sm:8px; --r:12px; --r-lg:16px; --r-xl:24px;
  --s1:8px; --s2:16px; --s3:24px; --s4:32px; --s5:40px; --s6:48px; --s8:64px; --s10:80px; --s12:96px;
  --shadow-sm:0 1px 2px rgba(20,22,90,.06);
  --shadow:0 1px 2px rgba(20,22,90,.05), 0 8px 24px rgba(20,22,90,.07);
  --shadow-lg:0 2px 6px rgba(20,22,90,.06), 0 24px 56px rgba(20,22,90,.14);
  --ease:cubic-bezier(.2,.8,.2,1);
  --f-display:"Bricolage Grotesque", "Segoe UI", system-ui, sans-serif;
  --f-body:"Figtree", "Segoe UI", system-ui, -apple-system, sans-serif;

  --bs-body-font-family:var(--f-body);
  --bs-body-color:var(--ink-2);
  --bs-body-bg:var(--bg);
  --bs-link-color:var(--blue);
  --bs-link-color-rgb:59,77,255;
  --bs-link-hover-color:var(--blue-d);
  --bs-border-color:var(--line);
  --bs-border-radius:var(--r);
  
}

html{scroll-padding-top:96px}
body{font-family:var(--f-body); font-size:16px; line-height:1.6; color:var(--ink-2); background:var(--bg); -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility}
h1,h2,h3,h4,.display{font-family:var(--f-display); color:var(--ink); letter-spacing:-.02em; font-weight:700; text-wrap:balance}
h1{font-size:clamp(2rem, 1.3rem + 3vw, 3.5rem); line-height:1.05; font-weight:750}
h2{font-size:clamp(1.625rem, 1.2rem + 1.6vw, 2.5rem); line-height:1.12}
h3{font-size:1.25rem; line-height:1.25}
p{text-wrap:pretty}
a{text-underline-offset:3px}
img{max-width:100%; height:auto}
::selection{background:var(--blue); color:#fff}
:focus-visible{outline:3px solid var(--blue); outline-offset:2px; border-radius:4px}
.ikon{width:1.25em; height:1.25em; flex:none; vertical-align:-.25em}
.ikon-xs{width:.9em; height:.9em}
.ikon-lg{width:28px; height:28px}
.skip-link{position:absolute; left:-9999px; top:8px; z-index:2000; background:var(--navy); color:#fff; padding:8px 16px; border-radius:var(--r-sm)}
.skip-link:focus{left:8px}
.hp-alan{position:absolute!important; left:-10000px!important; width:1px; height:1px; overflow:hidden}
.container{--bs-gutter-x:2rem}
@media (max-width:575.98px){ .container{--bs-gutter-x:2rem} }
.mono{font-variant-numeric:tabular-nums}

/* ---------- butonlar ---------- */
.btn-ts{--h:48px; display:inline-flex; align-items:center; justify-content:center; gap:8px; min-height:var(--h); padding:0 20px; border-radius:var(--r); font-weight:650; font-size:15px; border:1.5px solid transparent; transition:background .2s, border-color .2s, color .2s, transform .15s, box-shadow .2s; white-space:nowrap; text-decoration:none}
.btn-ts:active{transform:translateY(1px)}
.btn-ts .ikon{width:20px; height:20px}
.btn-ts-primary{background:var(--blue); color:#fff; box-shadow:0 6px 16px rgba(var(--blue-rgb),.25)}
.btn-ts-primary:hover{background:var(--blue-d); color:#fff}
.btn-ts-navy{background:var(--navy); color:#fff}
.btn-ts-navy:hover{background:var(--navy-2); color:#fff}
.btn-wa{background:var(--wa); color:#fff; box-shadow:0 6px 16px color-mix(in srgb, var(--wa) 25%, transparent)}
.btn-wa:hover{background:var(--wa-d); color:#fff}
.btn-ts-outline{background:#fff; color:var(--navy); border-color:var(--line-2)}
.btn-ts-outline:hover{border-color:var(--navy); color:var(--navy)}
.btn-ts-light{background:var(--bg-3); color:var(--navy)}
.btn-ts-light:hover{background:var(--blue-soft-2); color:var(--navy)}
.btn-ts-ghost-inv{background:rgba(255,255,255,.08); color:#fff; border-color:rgba(255,255,255,.28)}
.btn-ts-ghost-inv:hover{background:rgba(255,255,255,.16); color:#fff}
.btn-ts.btn-lg{--h:56px; padding:0 24px; font-size:16px}
.btn-ikon{--h:44px; width:44px; padding:0; background:var(--bg-3); color:var(--navy)}
.link-ok{display:inline-flex; align-items:center; gap:6px; font-weight:650; color:var(--blue); text-decoration:none}
.link-ok .ikon{transition:transform .2s var(--ease)}
.link-ok:hover .ikon{transform:translateX(3px)}
.link-btn{background:none; border:0; padding:0; color:inherit; text-decoration:underline; text-underline-offset:3px}

/* ---------- üst bar ve header ---------- */
.topbar{background:var(--navy); color:#c3c6ee; font-size:13.5px}
.topbar .container{min-height:40px}
.topbar a{color:#c3c6ee; text-decoration:none; display:inline-flex; align-items:center; gap:6px}
.topbar a:hover{color:#fff}
.topbar .ikon{width:15px; height:15px; color:#8f99ff}
.durum{display:inline-flex; align-items:center; gap:8px; font-weight:600}
.durum i{width:8px; height:8px; border-radius:50%; background:#e0a33a; box-shadow:0 0 0 3px rgba(224,163,58,.25)}
.durum.acik i{background:#35c46f; box-shadow:0 0 0 3px rgba(53,196,111,.25); animation:nabiz 2s ease-in-out infinite}
@keyframes nabiz{50%{box-shadow:0 0 0 6px rgba(53,196,111,0)}}
.site-header{position:sticky; top:0; z-index:1030; background:rgba(255,255,255,.92); backdrop-filter:saturate(1.4) blur(12px); -webkit-backdrop-filter:saturate(1.4) blur(12px); border-bottom:1px solid transparent; transition:border-color .2s, box-shadow .2s}
.site-header.kaydi{border-bottom-color:var(--line); box-shadow:0 4px 20px rgba(20,22,90,.05)}
.site-header .navbar{padding:12px 0}
.logo{display:inline-flex; align-items:center; gap:10px; text-decoration:none; color:var(--navy)}
.logo-mark{width:40px; height:40px; border-radius:11px; background:var(--navy); color:#fff; display:grid; place-items:center; position:relative; flex:none}
.logo-mark::after{content:""; position:absolute; right:-3px; top:-3px; width:12px; height:12px; border-radius:4px; background:var(--blue); border:2.5px solid #fff}
.logo-mark .ikon{width:22px; height:22px}
.logo-text{font-family:var(--f-display); font-weight:800; font-size:21px; letter-spacing:-.03em; line-height:1}
.logo-text small{display:block; font-family:var(--f-body); font-size:11px; font-weight:700; letter-spacing:.2em; text-transform:uppercase; color:var(--blue); margin-top:3px}
.logo-ters{color:#fff}
.logo-ters .logo-mark{background:#fff; color:var(--navy)}
.logo-ters .logo-mark::after{border-color:var(--navy)}
.logo-ters .logo-text small{color:#9aa3ff}
.ana-menu{gap:2px; margin:0 auto}
.ana-menu .nav-link{display:inline-flex; align-items:center; gap:4px; background:none; border:0; font-weight:600; font-size:15px; color:var(--ink-2); padding:10px 12px!important; border-radius:10px; position:relative}
.ana-menu .nav-link:hover,.ana-menu .nav-link.show{color:var(--navy); background:var(--bg-2)}
.ana-menu .nav-link.active{color:var(--navy)}
.ana-menu .nav-link.active::after{content:""; position:absolute; left:12px; right:12px; bottom:4px; height:2px; border-radius:2px; background:var(--blue)}
.ana-menu .dropdown-toggle::after{display:none}
.ana-menu .dropdown-toggle .ikon{transition:transform .2s}
.ana-menu .dropdown-toggle.show .ikon{transform:rotate(180deg)}
.dropdown-menu{border:1px solid var(--line); border-radius:var(--r-lg); box-shadow:var(--shadow-lg); padding:8px; margin-top:8px!important; animation:acil .2s var(--ease)}
@keyframes acil{from{opacity:0; transform:translateY(-6px)}}
.dropdown-menu.tekli{min-width:280px}
.dropdown-item{display:flex; align-items:center; gap:10px; border-radius:10px; padding:8px 10px; font-weight:550; color:var(--ink-2)}
.dropdown-item:hover{background:var(--bg-2); color:var(--navy)}
.mi{width:32px; height:32px; border-radius:9px; background:var(--blue-soft); color:var(--blue); display:grid; place-items:center; flex:none}
.mi .ikon{width:18px; height:18px}
.mi.wa{background:var(--wa-soft); color:var(--wa)}
.mega-menu{width:min(720px, 92vw); padding:20px}
.mega-grid{display:grid; grid-template-columns:1.25fr 1fr; gap:24px}
.mega-baslik{font-size:12px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--faint); margin:0 0 8px 10px}
.mega-liste{list-style:none; margin:0; padding:0; display:grid; gap:2px}
.mega-liste a{display:flex; align-items:center; gap:10px; padding:7px 10px; border-radius:10px; text-decoration:none; color:var(--ink-2); font-weight:550; font-size:14.5px}
.mega-liste a:hover{background:var(--bg-2); color:var(--navy)}
.mega-kart{display:flex; gap:12px; align-items:flex-start; margin-top:16px; padding:14px; border-radius:var(--r); background:var(--bg-2); text-decoration:none; color:var(--ink-2); border:1px solid var(--line)}
.mega-kart:hover{border-color:var(--wa); color:var(--ink-2)}
.mega-kart strong{display:block; color:var(--ink); font-size:14.5px}
.mega-kart small{color:var(--muted)}

.mobil-menu{width:min(360px, 88vw)!important}
.mobil-menu .offcanvas-header{border-bottom:1px solid var(--line)}
.mobil-menu details{border-bottom:1px solid var(--line)}
.mobil-menu summary{list-style:none; display:flex; justify-content:space-between; align-items:center; padding:14px 0; font-weight:700; color:var(--ink); cursor:pointer}
.mobil-menu summary::-webkit-details-marker{display:none}
.mobil-menu details[open] summary .ikon{transform:rotate(180deg)}
.mobil-menu details ul{list-style:none; padding:0 0 12px; margin:0; display:grid; gap:2px}
.mobil-menu details a{display:block; padding:7px 12px; border-radius:8px; color:var(--ink-2); text-decoration:none}
.mobil-menu details a:hover{background:var(--bg-2)}
.mm-link{display:block; padding:14px 0; border-bottom:1px solid var(--line); font-weight:700; color:var(--ink); text-decoration:none}
.mm-cta{display:grid; gap:8px; margin:24px 0 16px}
.mm-adres{display:flex; gap:8px; color:var(--muted); font-size:14px}

.breadcrumb-wrap{border-bottom:1px solid var(--line); background:var(--bg-2)}
.breadcrumb-ts{list-style:none; display:flex; flex-wrap:wrap; gap:6px; margin:0; padding:12px 0; font-size:14px; color:var(--muted)}
.breadcrumb-ts li+li::before{content:"/"; margin-right:6px; color:var(--faint)}
.breadcrumb-ts a{color:var(--muted); text-decoration:none}
.breadcrumb-ts a:hover{color:var(--blue)}
.breadcrumb-ts [aria-current]{color:var(--ink); font-weight:600}

/* ---------- bölüm yapısı ---------- */
.bolum{padding:var(--s12) 0}
.bolum-sm{padding:var(--s8) 0}
.bolum-gri{background:var(--bg-2)}
@media (max-width:767.98px){ .bolum{padding:var(--s8) 0} .bolum-sm{padding:var(--s6) 0} }
.ust-baslik{display:inline-flex; align-items:center; gap:8px; font-size:13px; font-weight:750; letter-spacing:.14em; text-transform:uppercase; color:var(--blue); margin-bottom:12px}
.ust-baslik::before{content:""; width:20px; height:2px; background:currentColor; border-radius:2px}
.bolum-baslik{max-width:680px; margin-bottom:var(--s6)}
.bolum-baslik p{font-size:18px; color:var(--muted); margin:12px 0 0}
.bolum-baslik-satir{display:flex; justify-content:space-between; align-items:flex-end; gap:24px; flex-wrap:wrap; margin-bottom:var(--s6)}
.bolum-baslik-satir .bolum-baslik{margin-bottom:0}

/* ---------- hero ---------- */
.hero{position:relative; overflow:hidden; padding:var(--s10) 0 var(--s12); background:
  radial-gradient(900px 480px at 85% 10%, rgba(var(--blue-rgb),.10), transparent 60%),
  linear-gradient(180deg, #fff 0%, var(--bg-2) 100%)}
.hero::before{content:""; position:absolute; inset:0; background-image:var(--iz-desen); -webkit-mask-image:linear-gradient(90deg, transparent 0%, #000 55%); mask-image:linear-gradient(90deg, transparent 0%, #000 55%); pointer-events:none}
.hero .container{position:relative}
.konum-chip{display:inline-flex; align-items:center; gap:8px; padding:6px 14px 6px 8px; border-radius:999px; background:#fff; border:1px solid var(--line); box-shadow:var(--shadow-sm); font-size:14px; font-weight:600; color:var(--ink-2)}
.konum-chip .nokta{width:24px; height:24px; border-radius:50%; background:var(--blue-soft); color:var(--blue); display:grid; place-items:center}
.konum-chip .nokta .ikon{width:14px; height:14px}
.hero h1{margin:20px 0 20px}
.hero h1 .vurgu{color:var(--blue); position:relative; white-space:nowrap}
.hero h1 .vurgu::after{content:""; position:absolute; left:0; right:0; bottom:.04em; height:.14em; background:var(--blue); opacity:.18; border-radius:4px}
.hero-lead{font-size:clamp(17px, 1rem + .4vw, 20px); color:var(--muted); max-width:560px; margin-bottom:32px}
.hero-cta{display:flex; flex-wrap:wrap; gap:12px}
.guven{display:flex; flex-wrap:wrap; gap:8px 24px; margin:32px 0 0; padding:0; list-style:none; font-weight:600; font-size:15px; color:var(--ink-2)}
.guven li{display:flex; align-items:center; gap:8px}
.guven .ikon{color:var(--wa); width:20px; height:20px}
.hero-gorsel{position:relative; padding:0 0 32px 32px}
@media (max-width:991.98px){ .hero-gorsel{padding:24px 0 32px; max-width:560px; margin:0 auto} }
.hero-foto{border-radius:var(--r-xl); overflow:hidden; box-shadow:var(--shadow-lg); aspect-ratio:4/3.4; background:var(--bg-3)}
.hero-foto img{width:100%; height:100%; object-fit:cover; display:block}
.hero-foto-2{position:absolute; left:0; bottom:0; width:44%; border-radius:var(--r-lg); overflow:hidden; border:6px solid #fff; box-shadow:var(--shadow-lg); aspect-ratio:1}
.hero-foto-2 img{width:100%; height:100%; object-fit:cover; display:block}
@media (max-width:991.98px){ .hero-foto-2{display:none} }
.takip-mini{position:absolute; right:-8px; bottom:0; width:min(300px, 80%); background:#fff; border:1px solid var(--line); border-radius:var(--r-lg); box-shadow:var(--shadow-lg); padding:16px}
@media (max-width:991.98px){ .takip-mini{position:relative; right:auto; width:100%; margin-top:-48px; margin-left:auto; max-width:340px} }
.takip-mini p{margin:0 0 10px; font-weight:700; color:var(--ink); display:flex; align-items:center; gap:8px; font-size:15px}
.takip-mini p .mi{width:28px; height:28px}
.takip-mini form{display:grid; grid-template-columns:1fr 84px; gap:8px}
.takip-mini input{height:42px; border:1.5px solid var(--line); border-radius:10px; padding:0 12px; font-size:14px; background:var(--bg-2); min-width:0}
.takip-mini input:focus{outline:none; border-color:var(--blue); background:#fff; box-shadow:0 0 0 3px var(--blue-soft)}
.takip-mini button{grid-column:1 / -1; height:42px}

/* ---------- kartlar ---------- */
.kart{background:#fff; border:1px solid var(--line); border-radius:var(--r-lg); padding:var(--s3); height:100%; transition:border-color .2s, box-shadow .25s var(--ease), transform .25s var(--ease)}
a.kart{display:block; text-decoration:none; color:inherit}
a.kart:hover,.kart-hover:hover{border-color:var(--blue-soft-2); box-shadow:var(--shadow); transform:translateY(-3px)}
.kart-ikon{width:48px; height:48px; border-radius:14px; background:var(--blue-soft); color:var(--blue); display:grid; place-items:center; margin-bottom:16px; transition:background .2s, color .2s}
.kart-ikon .ikon{width:24px; height:24px}
a.kart:hover .kart-ikon{background:var(--blue); color:#fff}

/* hizmet grupları (bireysel / kurumsal / güvenlik) */
.grup-kart{border-radius:var(--r-xl); padding:var(--s4); height:100%; display:flex; flex-direction:column; border:1px solid var(--line); background:#fff}
.grup-kart.koyu{background:var(--navy); border-color:var(--navy); color:#c8cbf0}
.grup-kart.koyu h3,.grup-kart.koyu .grup-etiket{color:#fff}
.grup-etiket{display:inline-flex; align-items:center; gap:8px; font-size:13px; font-weight:750; letter-spacing:.12em; text-transform:uppercase; color:var(--blue); margin-bottom:12px}
.grup-kart h3{font-size:1.5rem; margin-bottom:8px}
.grup-kart > p{color:var(--muted); margin-bottom:20px}
.grup-kart.koyu > p{color:#b9bde8}
.grup-liste{list-style:none; margin:0 0 24px; padding:0; display:grid; gap:4px}
.grup-liste a{display:flex; align-items:center; gap:12px; padding:9px 10px; margin:0 -10px; border-radius:10px; color:var(--ink-2); text-decoration:none; font-weight:600}
.grup-liste a:hover{background:var(--bg-2); color:var(--navy)}
.grup-liste a .ok{margin-left:auto; opacity:0; transform:translateX(-4px); transition:.2s var(--ease); color:var(--blue)}
.grup-liste a:hover .ok{opacity:1; transform:none}
.grup-kart.koyu .grup-liste a{color:#e6e8ff}
.grup-kart.koyu .grup-liste a:hover{background:rgba(255,255,255,.08); color:#fff}
.grup-kart.koyu .mi{background:rgba(255,255,255,.1); color:#fff}
.grup-kart .mt-auto{padding-top:8px}

/* süreç */
.surec{display:grid; grid-template-columns:repeat(5, minmax(0,1fr)); gap:16px; counter-reset:adim; list-style:none; padding:0; margin:0}
@media (max-width:991.98px){ .surec{grid-template-columns:repeat(2, minmax(0,1fr))} }
@media (max-width:575.98px){ .surec{grid-template-columns:minmax(0,1fr)} }
.surec li{position:relative; background:#fff; border:1px solid var(--line); border-radius:var(--r-lg); padding:24px 20px 20px}
.surec li::before{counter-increment:adim; content:counter(adim, decimal-leading-zero); font-family:var(--f-display); font-weight:800; font-size:14px; color:var(--blue); background:var(--blue-soft); border-radius:8px; padding:4px 8px; display:inline-block; margin-bottom:16px}
.surec li:not(:last-child)::after{content:""; position:absolute; top:38px; right:-17px; width:18px; height:2px; background:var(--line-2)}
@media (max-width:991.98px){ .surec li::after{display:none} }
.surec h3{font-size:1.1rem; margin-bottom:6px}
.surec p{font-size:14.5px; color:var(--muted); margin:0}
.surec .ikon-lg{position:absolute; top:20px; right:20px; color:var(--faint)}

/* neden biz */
.neden{display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:16px}
@media (max-width:991.98px){ .neden{grid-template-columns:repeat(2, minmax(0,1fr))} }
@media (max-width:575.98px){ .neden{grid-template-columns:minmax(0,1fr)} }
.neden .kart h3{font-size:1.1rem; margin-bottom:6px}
.neden .kart p{margin:0; color:var(--muted); font-size:15px}

/* ürün kartları */
.urun-grid{display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:16px}
@media (max-width:1199.98px){ .urun-grid{grid-template-columns:repeat(3, minmax(0,1fr))} }
@media (max-width:767.98px){ .urun-grid{grid-template-columns:repeat(2, minmax(0,1fr)); gap:12px} }
@media (max-width:479.98px){ .urun-grid{grid-template-columns:minmax(0,1fr)} }
.urun{background:#fff; border:1px solid var(--line); border-radius:var(--r-lg); overflow:hidden; display:flex; flex-direction:column; transition:box-shadow .25s var(--ease), transform .25s var(--ease)}
.urun:hover{box-shadow:var(--shadow); transform:translateY(-3px)}
.urun-foto{position:relative; aspect-ratio:4/3; background:var(--bg-3); overflow:hidden}
.urun-foto img{width:100%; height:100%; object-fit:cover; display:block; transition:transform .5s var(--ease)}
.urun:hover .urun-foto img{transform:scale(1.04)}
.stok{position:absolute; left:12px; top:12px; font-size:12px; font-weight:750; padding:4px 10px; border-radius:999px; background:#fff; color:var(--ok); box-shadow:var(--shadow-sm); display:inline-flex; align-items:center; gap:6px}
.stok::before{content:""; width:7px; height:7px; border-radius:50%; background:currentColor}
.stok.satildi{color:var(--bad)}
.stok.rezerve{color:var(--warn)}
.ornek-rozet{position:absolute; right:12px; top:12px; font-size:11px; font-weight:700; padding:3px 8px; border-radius:6px; background:rgba(20,22,90,.85); color:#fff; letter-spacing:.04em}
.urun.satildi .urun-foto img{filter:grayscale(1); opacity:.7}
.urun-govde{padding:16px; display:flex; flex-direction:column; gap:10px; flex:1}
.urun-marka{font-size:12.5px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--faint)}
.urun h3{font-size:1.05rem; margin:0; line-height:1.3}
.ozellik{list-style:none; margin:0; padding:0; display:grid; gap:6px; font-size:14px; color:var(--ink-2)}
.ozellik li{display:flex; gap:8px; align-items:flex-start}
.ozellik .ikon{color:var(--blue); width:17px; height:17px; margin-top:2px}
.durum-etiket{display:inline-block; font-size:12.5px; font-weight:650; padding:3px 10px; border-radius:6px; background:var(--bg-3); color:var(--ink-2); align-self:flex-start}
.urun-alt{margin-top:auto; padding-top:12px; border-top:1px dashed var(--line); display:flex; justify-content:space-between; align-items:center; gap:8px}
.fiyat{font-family:var(--f-display); font-size:1.35rem; font-weight:750; color:var(--navy); letter-spacing:-.02em}
.fiyat small{display:block; font-family:var(--f-body); font-size:11.5px; font-weight:500; color:var(--faint); letter-spacing:0}
.urun-alt .btn-ts{--h:40px; padding:0 14px; font-size:14px}

/* markalar */
.marka-seritleri{display:grid; gap:12px}
.marka-satir{display:flex; flex-wrap:wrap; gap:8px; align-items:center}
.marka-satir .etiket{font-size:13px; font-weight:700; color:var(--faint); min-width:160px}
.marka{font-family:var(--f-display); font-weight:700; font-size:17px; color:var(--ink-2); padding:10px 18px; border:1px solid var(--line); border-radius:var(--r); background:#fff; letter-spacing:-.01em}

/* yorumlar yer tutucu */
.yer-tutucu{border:2px dashed var(--line-2); border-radius:var(--r-xl); padding:var(--s5); text-align:center; background:repeating-linear-gradient(-45deg, #fff 0 12px, var(--bg-2) 12px 24px)}
.yer-tutucu .etiket{display:inline-block; font-size:12px; font-weight:800; letter-spacing:.12em; text-transform:uppercase; background:#fff3d6; color:#8a5a00; padding:4px 10px; border-radius:6px; margin-bottom:12px}
.yer-tutucu p{max-width:560px; margin:0 auto 20px; color:var(--muted)}

/* harita + saatler */
.konum-kart{display:grid; grid-template-columns:1.3fr 1fr; border:1px solid var(--line); border-radius:var(--r-xl); overflow:hidden; background:#fff}
@media (max-width:991.98px){ .konum-kart{grid-template-columns:minmax(0,1fr)} }
.harita{position:relative; min-height:360px; background:var(--bg-3)}
.harita iframe{position:absolute; inset:0; width:100%; height:100%; border:0}
.harita-onizleme{position:absolute; inset:0; display:grid; place-items:center; text-align:center; padding:24px; background:
  linear-gradient(0deg, rgba(246,247,251,.6), rgba(246,247,251,.6)),
  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cg fill='none' stroke='%23c9cde0' stroke-width='10'%3E%3Cpath d='M-20 60 C60 40 120 120 260 90'/%3E%3Cpath d='M40 -20 L90 260'/%3E%3Cpath d='M-20 190 L260 170'/%3E%3C/g%3E%3Cg fill='none' stroke='%23dfe2ee' stroke-width='4'%3E%3Cpath d='M160 -20 L180 260'/%3E%3Cpath d='M-20 120 L260 140'/%3E%3C/g%3E%3C/svg%3E"), var(--bg-3)}
.harita-onizleme .pin{width:56px; height:56px; border-radius:50% 50% 50% 0; transform:rotate(-45deg); background:var(--blue); display:grid; place-items:center; margin:0 auto 16px; box-shadow:0 10px 24px rgba(var(--blue-rgb),.35)}
.harita-onizleme .pin .ikon{transform:rotate(45deg); color:#fff; width:26px; height:26px}
.harita-onizleme p{max-width:320px; margin:0 auto 16px; font-size:14px; color:var(--muted)}
.konum-bilgi{padding:var(--s4)}
.saat-tablo{width:100%; font-size:15px; margin:16px 0 24px}
.saat-tablo td{padding:7px 0; border-bottom:1px solid var(--line)}
.saat-tablo td:last-child{text-align:right; font-weight:600; font-variant-numeric:tabular-nums}
.saat-tablo tr.bugun td{color:var(--blue); font-weight:700}

/* SSS */
.sss{display:grid; gap:12px}
.sss details{background:#fff; border:1px solid var(--line); border-radius:var(--r-lg); transition:border-color .2s, box-shadow .2s}
.sss details[open]{border-color:var(--blue-soft-2); box-shadow:var(--shadow)}
.sss summary{list-style:none; cursor:pointer; padding:20px 24px; display:flex; justify-content:space-between; gap:16px; align-items:center; font-weight:700; color:var(--ink); font-size:17px}
.sss summary::-webkit-details-marker{display:none}
.sss summary .arti{width:32px; height:32px; border-radius:50%; background:var(--bg-3); display:grid; place-items:center; flex:none; transition:transform .25s var(--ease), background .2s}
.sss details[open] summary .arti{transform:rotate(45deg); background:var(--blue); color:#fff}
.sss .cevap{padding:0 24px 20px; color:var(--muted); margin:0}

/* CTA şeridi */
.cta-serit{position:relative; overflow:hidden; background:var(--navy); color:#c8cbf0; border-radius:var(--r-xl); padding:var(--s6) var(--s5)}
.cta-serit::before{content:""; position:absolute; inset:0; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160' fill='none' stroke='%23ffffff' stroke-opacity='.07' stroke-width='1.5'%3E%3Cpath d='M0 40h40l20 20h40M100 60v40l20 20h40M20 160v-40l20-20h20M160 20h-30l-10 10v30'/%3E%3Ccircle cx='100' cy='60' r='3'/%3E%3Ccircle cx='60' cy='100' r='3'/%3E%3C/svg%3E")}
.cta-serit::after{content:""; position:absolute; right:-80px; top:-80px; width:320px; height:320px; border-radius:50%; background:radial-gradient(circle, rgba(var(--blue-rgb),.55), transparent 65%)}
.cta-serit > *{position:relative; z-index:1}
.cta-serit h2{color:#fff; margin-bottom:8px}
@media (max-width:575.98px){ .cta-serit{padding:var(--s5) var(--s3)} }

/* sayfa başlığı */
.sayfa-bas{padding:var(--s8) 0 var(--s6); background:linear-gradient(180deg, var(--bg-2), #fff)}
.sayfa-bas h1{font-size:clamp(2rem, 1.4rem + 2.2vw, 3rem); margin-bottom:12px}
.sayfa-bas .lead{font-size:18px; color:var(--muted); max-width:720px}

/* hizmet detay */
.detay-govde{font-size:17px; line-height:1.75}
.detay-govde h2{font-size:1.5rem; margin:40px 0 16px}
.tik-liste{list-style:none; padding:0; margin:0; display:grid; gap:10px}
.tik-liste li{display:flex; gap:12px; align-items:flex-start}
.tik-liste li::before{content:""; flex:none; width:22px; height:22px; margin-top:3px; border-radius:50%; background:var(--blue-soft) var(--tik) center/14px no-repeat}
.belirti-liste{list-style:none; padding:0; margin:0; display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:10px}
@media (max-width:575.98px){ .belirti-liste{grid-template-columns:minmax(0,1fr)} }
.belirti-liste li{background:var(--bg-2); border:1px solid var(--line); border-radius:var(--r); padding:12px 14px; font-size:15.5px; display:flex; gap:10px}
.belirti-liste .ikon{color:var(--warn); margin-top:3px}
.not-kutu{display:flex; gap:12px; background:var(--blue-soft); border-radius:var(--r-lg); padding:16px 20px; font-size:15.5px; color:var(--ink-2); margin-top:32px}
.not-kutu .ikon{color:var(--blue); margin-top:3px}
.yan-kart{position:sticky; top:104px; border:1px solid var(--line); border-radius:var(--r-xl); padding:var(--s3); background:#fff; box-shadow:var(--shadow)}
.yan-kart h2{font-size:1.25rem; margin-bottom:8px}
.yan-kart .btn-ts{width:100%}
.yan-liste{list-style:none; padding:0; margin:0; display:grid; gap:2px}
.yan-liste a{display:flex; align-items:center; gap:10px; padding:8px 10px; border-radius:10px; color:var(--ink-2); text-decoration:none; font-weight:550; font-size:15px}
.yan-liste a:hover,.yan-liste a[aria-current]{background:var(--bg-2); color:var(--navy)}
.yan-liste a[aria-current]{font-weight:700}

/* formlar */
.form-kart{background:#fff; border:1px solid var(--line); border-radius:var(--r-xl); padding:var(--s4); box-shadow:var(--shadow)}
@media (max-width:575.98px){ .form-kart{padding:var(--s3)} }
.form-label{font-weight:650; color:var(--ink); font-size:14.5px; margin-bottom:6px}
.form-control,.form-select{min-height:48px; border:1.5px solid var(--line); border-radius:var(--r); background-color:var(--bg-2); font-size:16px; color:var(--ink)}
textarea.form-control{min-height:120px}
.form-control:focus,.form-select:focus{border-color:var(--blue); background-color:#fff; box-shadow:0 0 0 4px var(--blue-soft)}
.form-control.is-invalid,.form-select.is-invalid{border-color:var(--bad)}
.form-text{color:var(--faint)}
.form-check-input:checked{background-color:var(--blue); border-color:var(--blue)}
.uyari{display:flex; gap:12px; align-items:flex-start; padding:14px 16px; border-radius:var(--r); font-size:15px; margin-bottom:24px}
.uyari .ikon{margin-top:2px}
.uyari.hata{background:#fdecea; color:#8f231e}
.uyari.basari{background:var(--wa-soft); color:#0f5f2c}
.yukle-alan{position:relative; border:2px dashed var(--line-2); border-radius:var(--r-lg); padding:24px; text-align:center; background:var(--bg-2); transition:border-color .2s, background .2s; cursor:pointer}
.yukle-alan:hover,.yukle-alan.surukle{border-color:var(--blue); background:var(--blue-soft)}
.yukle-alan input{position:absolute; inset:0; opacity:0; cursor:pointer}
.yukle-alan .ikon{width:32px; height:32px; color:var(--blue)}
.onizlemeler{display:flex; flex-wrap:wrap; gap:8px; margin-top:12px}
.onizlemeler img{width:72px; height:72px; object-fit:cover; border-radius:10px; border:1px solid var(--line)}

/* servis takip */
.takip-sonuc{margin-top:24px}
.adim-liste{list-style:none; margin:24px 0 0; padding:0 0 0 20px; border-left:2px solid var(--line); display:grid; gap:18px}
.adim-liste li{position:relative; color:var(--faint)}
.adim-liste li::before{content:""; position:absolute; left:-28px; top:4px; width:14px; height:14px; border-radius:50%; background:#fff; border:2px solid var(--line-2)}
.adim-liste li.tamam{color:var(--ink-2)}
.adim-liste li.tamam::before{background:var(--wa); border-color:var(--wa)}
.adim-liste li.simdi{color:var(--ink); font-weight:700}
.adim-liste li.simdi::before{background:var(--blue); border-color:var(--blue); box-shadow:0 0 0 5px var(--blue-soft)}

/* blog */
.yazi-kart{display:flex; flex-direction:column; height:100%; background:#fff; border:1px solid var(--line); border-radius:var(--r-lg); overflow:hidden; text-decoration:none; color:inherit; transition:box-shadow .25s var(--ease), transform .25s var(--ease)}
.yazi-kart:hover{box-shadow:var(--shadow); transform:translateY(-3px); color:inherit}
.yazi-kart .foto{aspect-ratio:16/9; background:var(--bg-3); overflow:hidden}
.yazi-kart .foto img{width:100%; height:100%; object-fit:cover; display:block; transition:transform .5s var(--ease)}
.yazi-kart:hover .foto img{transform:scale(1.04)}
.yazi-kart .govde{padding:20px; display:flex; flex-direction:column; gap:8px; flex:1}
.yazi-meta{display:flex; flex-wrap:wrap; gap:12px; align-items:center; font-size:13.5px; color:var(--faint)}
.kat-etiket{font-size:12.5px; font-weight:700; color:var(--blue); background:var(--blue-soft); padding:3px 10px; border-radius:6px}
.yazi-kart h3{font-size:1.15rem; margin:0}
.yazi-kart p{font-size:15px; color:var(--muted); margin:0}
.makale{font-size:18px; line-height:1.8; color:var(--ink-2); max-width:720px}
.makale h2{font-size:1.6rem; margin:48px 0 16px}
.makale ul,.makale ol{padding-left:1.25rem; display:grid; gap:10px}
.makale li::marker{color:var(--blue); font-weight:700}
.makale code{background:var(--bg-3); color:var(--navy); padding:2px 6px; border-radius:6px; font-size:.9em}
.makale-foto{border-radius:var(--r-xl); overflow:hidden; aspect-ratio:16/8; margin:0 0 40px; background:var(--bg-3)}
.makale-foto img{width:100%; height:100%; object-fit:cover; display:block}

/* filtre çipleri */
.filtreler{display:flex; flex-wrap:wrap; gap:8px}
.filtre{border:1.5px solid var(--line); background:#fff; border-radius:999px; padding:8px 16px; font-weight:650; font-size:14.5px; color:var(--ink-2); transition:.2s}
.filtre:hover{border-color:var(--navy)}
.filtre[aria-pressed="true"]{background:var(--navy); border-color:var(--navy); color:#fff}

/* footer */
.site-footer{background:var(--navy-3); color:#aeb2dc; padding:var(--s10) 0 calc(var(--s3) + 72px); font-size:15px}
@media (min-width:992px){ .site-footer{padding-bottom:var(--s3)} }
.f-aciklama{max-width:360px}
.f-baslik{color:#fff; font-weight:750; margin-bottom:16px; font-family:var(--f-display); font-size:16px}
.f-liste{list-style:none; padding:0; margin:0; display:grid; gap:8px}
.f-liste a,.f-iletisim a{color:#aeb2dc; text-decoration:none}
.f-liste a:hover,.f-iletisim a:hover{color:#fff}
.f-iletisim{list-style:none; padding:0; margin:0; display:grid; gap:12px}
.f-iletisim li{display:flex; gap:10px}
.f-iletisim .ikon{color:#8f99ff; margin-top:3px}
.f-saatler{list-style:none; padding:0; margin:0; display:grid; gap:8px; font-size:14px}
.f-saatler li{display:flex; justify-content:space-between; gap:12px; border-bottom:1px solid rgba(255,255,255,.08); padding-bottom:8px}
.f-saatler span:last-child{color:#fff; font-variant-numeric:tabular-nums}
.f-alt{display:flex; flex-wrap:wrap; justify-content:space-between; gap:12px; margin-top:var(--s8); padding-top:var(--s3); border-top:1px solid rgba(255,255,255,.1); font-size:14px}
.f-alt nav{display:flex; flex-wrap:wrap; gap:20px}
.f-alt a,.f-alt .link-btn{color:#aeb2dc; text-decoration:none}
.f-alt a:hover,.f-alt .link-btn:hover{color:#fff}

/* sabit WhatsApp + mobil alt bar */
.wa-float{position:fixed; right:24px; bottom:24px; z-index:1020; align-items:center; gap:8px; background:var(--wa); color:#fff; padding:12px 18px 12px 14px; border-radius:999px; font-weight:700; text-decoration:none; box-shadow:0 10px 30px color-mix(in srgb, var(--wa) 35%, transparent); transition:transform .2s var(--ease), background .2s}
.wa-float:hover{background:var(--wa-d); color:#fff; transform:translateY(-2px)}
.wa-float .ikon{width:24px; height:24px}
.alt-bar{position:fixed; left:0; right:0; bottom:0; z-index:1040; display:grid; grid-template-columns:repeat(3, 1fr); background:rgba(255,255,255,.96); backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px); border-top:1px solid var(--line); padding:6px 8px calc(6px + env(safe-area-inset-bottom, 0px)); box-shadow:0 -6px 24px rgba(20,22,90,.08)}
.alt-bar a{display:flex; flex-direction:column; align-items:center; gap:2px; padding:6px 4px; border-radius:12px; text-decoration:none; color:var(--navy); font-size:12.5px; font-weight:700}
.alt-bar a .ikon{width:22px; height:22px}
.alt-bar a.wa{background:var(--wa); color:#fff; margin:0 4px}
.alt-bar a:active{background:var(--bg-3)}
.alt-bar a.wa:active{background:var(--wa-d)}

/* çerez */
.cerez{position:fixed; left:16px; right:16px; bottom:16px; z-index:1050; max-width:520px; background:#fff; border:1px solid var(--line); border-radius:var(--r-lg); box-shadow:var(--shadow-lg); padding:20px; font-size:14.5px; animation:yuksel .35s var(--ease)}
.cerez p{margin:0 0 14px}
@media (max-width:991.98px){ .cerez{bottom:84px} }
@keyframes yuksel{from{opacity:0; transform:translateY(12px)}}

/* görünüm animasyonu (JS ile, yalnızca hareket izni varsa) */
@media (prefers-reduced-motion:no-preference){
  .js .gor{opacity:0; transform:translateY(16px); transition:opacity .6s var(--ease), transform .6s var(--ease)}
  .js .gor.gorundu{opacity:1; transform:none}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important; transition-duration:.01ms!important; scroll-behavior:auto!important}
}
.yan-baslik{font-family:var(--f-display); font-weight:700; color:var(--ink); margin:0 0 8px; font-size:15px}
.uyari.bilgi{background:#fff3d6; color:#6b4600}
@media (max-width:575.98px){
  .row.g-5{--bs-gutter-x:2rem}
  .hero-cta .btn-ts{width:100%}
}
.uyari code{color:inherit; background:rgba(0,0,0,.06); padding:1px 5px; border-radius:4px}

/* =========================================================================
   v2 eklemeleri: logo görseli, duyuru, teklif penceresi, efektler, PC toplama
   ========================================================================= */
.logo-img{height:44px; width:auto; display:block}
.logo-ters .logo-img{filter:brightness(0) invert(1)}

/* üst duyuru şeridi */
.duyuru-serit{background:var(--blue); color:#fff; font-size:14.5px; font-weight:600; text-align:center; padding:8px 44px; position:relative}
.duyuru-serit a{color:#fff; text-decoration:underline}
.duyuru-serit .kapat{position:absolute; right:8px; top:50%; transform:translateY(-50%); background:none; border:0; color:#fff; width:32px; height:32px; border-radius:8px; display:grid; place-items:center}
.duyuru-serit .kapat:hover{background:rgba(255,255,255,.15)}

/* native <dialog> pencereler (duyuru, teklif) */
dialog.pencere{border:0; padding:0; border-radius:var(--r-xl); width:min(560px, calc(100vw - 32px)); max-height:calc(100dvh - 32px); box-shadow:var(--shadow-lg); color:var(--ink-2); overflow:auto}
dialog.pencere::backdrop{background:rgba(12,13,40,.55); backdrop-filter:blur(3px)}
dialog.pencere[open]{animation:pencereAc .35s var(--ease)}
@keyframes pencereAc{from{opacity:0; transform:translateY(16px) scale(.97)}}
.pencere-bas{display:flex; justify-content:space-between; align-items:flex-start; gap:12px; padding:24px 24px 0}
.pencere-bas h2{font-size:1.5rem; margin:0}
.pencere-govde{padding:16px 24px 24px}
.pencere-kapat{flex:none; width:40px; height:40px; border-radius:50%; border:0; background:var(--bg-3); color:var(--ink); display:grid; place-items:center}
.pencere-kapat:hover{background:var(--line-2)}
.duyuru-gorsel{display:block; width:100%; aspect-ratio:16/9; object-fit:cover}
.teklif-ozet{background:var(--bg-2); border:1px solid var(--line); border-radius:var(--r); padding:12px 14px; font-size:14px; margin-bottom:16px; max-height:220px; overflow:auto}
.teklif-ozet ul{margin:0; padding-left:18px}
.teklif-ozet strong{color:var(--ink)}

/* efektler */
#efekt-tuval{position:fixed; inset:0; pointer-events:none; z-index:1200}
.isiklar{position:absolute; left:0; right:0; bottom:-14px; height:24px; pointer-events:none; overflow:hidden; z-index:2}
.isiklar svg{width:100%; height:100%}
.isiklar .ampul{animation:ampul 1.6s ease-in-out infinite}
@keyframes ampul{50%{opacity:.35}}
@media (prefers-reduced-motion:reduce){ #efekt-tuval,.isiklar{display:none} }

/* ürün kartında teklif butonu */
.urun-alt .teklif-btn{--h:40px; padding:0 14px; font-size:14px; flex:1}
.urun-alt{flex-wrap:wrap}

/* PC toplama tanıtım bandı (ana sayfa) */
.pc-bant{position:relative; overflow:hidden; border-radius:var(--r-xl); background:linear-gradient(135deg, var(--navy) 0%, var(--navy-3) 100%); color:#cfd2f5; padding:var(--s6) var(--s5)}
.pc-bant::before{content:""; position:absolute; inset:0; background-image:var(--iz-desen); opacity:.8}
.pc-bant > *{position:relative}
.pc-bant h2{color:#fff}
.pc-adimlar{display:flex; flex-wrap:wrap; gap:8px; margin:20px 0 28px; padding:0; list-style:none}
.pc-adimlar li{display:inline-flex; align-items:center; gap:8px; background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.14); border-radius:999px; padding:6px 14px 6px 8px; font-size:14px; font-weight:600; color:#fff}
.pc-adimlar .ikon{width:18px; height:18px; color:#aab3ff}
@media (max-width:575.98px){ .pc-bant{padding:var(--s5) var(--s3)} }

/* ---------- PC toplama sihirbazı ---------- */
.wz{display:grid; grid-template-columns:240px minmax(0,1fr) 320px; gap:16px; align-items:start}
@media (max-width:1199.98px){ .wz{grid-template-columns:220px minmax(0,1fr)} .wz-ozet{grid-column:1 / -1} }
@media (max-width:767.98px){ .wz{grid-template-columns:minmax(0,1fr)} }
.wz-ray{position:sticky; top:96px; display:flex; flex-direction:column; gap:4px}
@media (max-width:1199.98px){ .wz-ray{position:static} }
.wz-adim{display:grid; grid-template-columns:36px 1fr; gap:0 10px; align-items:center; text-align:left; background:none; border:1px solid transparent; border-radius:var(--r); padding:8px 10px; transition:background .2s, border-color .2s}
.wz-adim:hover{background:var(--bg-2)}
.wz-adim[aria-current="step"]{background:#fff; border-color:var(--line); box-shadow:var(--shadow-sm)}
.wz-adim .n{grid-row:1 / span 2; width:36px; height:36px; border-radius:10px; display:grid; place-items:center; background:var(--bg-3); color:var(--muted); transition:.25s}
.wz-adim .n .ikon{width:20px; height:20px}
.wz-adim.tamam .n{background:var(--blue); color:#fff}
.wz-adim.atla .n{background:var(--blue-soft); color:var(--blue); outline:1.5px dashed var(--blue); outline-offset:-1.5px}
.wz-adim.hata .n{background:var(--bad); color:#fff}
.wz-adim.pop .n{animation:wzpop .45s var(--ease)}
@keyframes wzpop{40%{transform:scale(1.2)}}
.wz-adim .t{font-weight:700; color:var(--ink); font-size:14.5px}
.wz-adim .s{font-size:12.5px; color:var(--muted); overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
@media (max-width:767.98px){
  .wz-ray{flex-direction:row; overflow-x:auto; padding-bottom:6px; scrollbar-width:thin}
  .wz-adim{grid-template-columns:30px auto; flex:0 0 auto; background:#fff; border-color:var(--line)}
  .wz-adim[aria-current="step"]{border-color:var(--blue); box-shadow:0 0 0 1px var(--blue)}
  .wz-adim .n{width:30px; height:30px; grid-row:auto} .wz-adim .s{display:none}
}
.wz-panel{background:#fff; border:1px solid var(--line); border-radius:var(--r-lg); overflow:hidden; min-width:0; box-shadow:var(--shadow-sm)}
.wz-bas{padding:20px; border-bottom:1px solid var(--line); display:grid; gap:12px}
.wz-bas.giris .wz-baslik{animation:wzgir .4s var(--ease)}
@keyframes wzgir{from{opacity:0; transform:translateX(12px)}}
.wz-ilerleme{height:4px; background:var(--bg-3); border-radius:2px; overflow:hidden}
.wz-ilerleme i{display:block; height:100%; background:var(--blue); border-radius:2px; transition:width .5s var(--ease)}
.wz-baslik{display:flex; align-items:center; gap:14px}
.wz-baslik .kart-ikon{margin:0; width:56px; height:56px}
.wz-baslik .kart-ikon .ikon{width:28px; height:28px}
.wz-baslik h2{font-size:1.5rem; margin:0}
.wz-baslik small{font-size:12.5px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--faint)}
.wz-baglam{font-size:15px; color:var(--muted); margin:0}
.wz-baglam b{color:var(--ink)}
.wz-arac{display:flex; flex-wrap:wrap; gap:8px; align-items:center}
.wz-arac .form-control,.wz-arac .form-select{min-height:42px; font-size:15px}
.wz-arac .form-control{flex:1 1 220px; min-width:0}
.wz-arac .form-select{flex:0 1 200px}
.wz-cipler{display:flex; flex-wrap:wrap; gap:6px}
.wz-cip{border:1.5px solid var(--line); background:#fff; border-radius:999px; padding:5px 12px; font-size:13.5px; font-weight:600; color:var(--ink-2)}
.wz-cip:hover{border-color:var(--navy)}
.wz-cip[aria-pressed="true"]{background:var(--navy); border-color:var(--navy); color:#fff}
.wz-ayar{display:flex; align-items:center; gap:6px; font-size:13.5px; color:var(--muted); margin-left:auto}
.wz-sayac{font-size:13px; color:var(--faint)}
.wz-atla{display:flex; flex-wrap:wrap; gap:10px; align-items:center; padding:10px 12px; border:1.5px dashed var(--line-2); border-radius:var(--r); background:var(--bg-2); font-size:14.5px}
.wz-liste{list-style:none; margin:0; padding:0; max-height:760px; overflow:auto}
.wz-satir{display:grid; grid-template-columns:48px minmax(0,1fr) auto; gap:4px 14px; align-items:center; padding:12px 20px; border-bottom:1px solid var(--line); transition:background .2s}
.wz-liste.anim .wz-satir{animation:wzsatir .35s var(--ease) both; animation-delay:calc(var(--d) * 20ms)}
@keyframes wzsatir{from{opacity:0; transform:translateY(6px)}}
.wz-satir:hover{background:var(--bg-2)}
.wz-satir.secili{background:var(--blue-soft)}
.wz-satir.uyumsuz > :not(.wz-neden){opacity:.5}
.wz-satir.nabiz{animation:wznabiz .6s var(--ease)}
@keyframes wznabiz{30%{box-shadow:inset 0 0 0 2px var(--blue)}}
.wz-kucuk{width:48px; height:48px; border-radius:12px; display:grid; place-items:center; background:var(--th-bg, var(--bg-3)); color:var(--th-fg, var(--navy))}
.wz-kucuk svg{width:32px; height:32px}
.wz-ad{font-weight:650; color:var(--ink); overflow-wrap:anywhere}
.wz-ozellik{display:flex; flex-wrap:wrap; gap:2px 12px; font-size:12.5px; color:var(--muted); margin-top:2px; font-variant-numeric:tabular-nums}
.wz-neden{grid-column:2 / -1; font-size:13px}
.wz-neden .bad{color:var(--bad)} .wz-neden .warn{color:var(--warn)}
.wz-sec{--h:40px; min-width:84px}
.wz-satir.secili .wz-sec{background:var(--blue); color:#fff; border-color:var(--blue)}
@media (max-width:575.98px){ .wz-satir{grid-template-columns:40px minmax(0,1fr) auto; padding:10px 14px} .wz-kucuk{width:40px; height:40px} .wz-kucuk svg{width:26px; height:26px} .wz-neden{grid-column:1 / -1} }
.wz-alt{display:flex; justify-content:space-between; gap:8px; padding:14px 20px}
.wz-bos{padding:40px 20px; text-align:center; color:var(--muted)}
.wz-ozet{position:sticky; top:96px; display:grid; gap:12px}
@media (max-width:1199.98px){ .wz-ozet{position:static; grid-template-columns:repeat(auto-fit, minmax(280px,1fr)); align-items:start} }
.wz-kutu{background:#fff; border:1px solid var(--line); border-radius:var(--r-lg); padding:16px 18px}
.wz-kutu h3{font-size:1.05rem; margin-bottom:10px}
.wz-parcalar{list-style:none; margin:0; padding:0}
.wz-parcalar li{display:grid; grid-template-columns:26px 1fr; gap:10px; padding:8px 0; border-top:1px solid var(--line); font-size:13.5px; align-items:center}
.wz-parcalar li:first-child{border-top:0}
.wz-parcalar .mi{width:26px; height:26px; border-radius:7px}
.wz-parcalar .mi .ikon{width:16px; height:16px}
.wz-parcalar button{all:unset; cursor:pointer; overflow-wrap:anywhere}
.wz-parcalar button:hover{color:var(--blue)}
.wz-parcalar small{display:block; font-size:11px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--faint)}
.wz-parcalar li.bos{color:var(--faint)}
.wz-parcalar li.bos .mi{background:var(--bg-3); color:var(--faint)}
.wz-guc{display:flex; justify-content:space-between; flex-wrap:wrap; gap:8px; font-size:13.5px; color:var(--muted); font-variant-numeric:tabular-nums}
.wz-guc b{color:var(--ink)}
.wz-metre{height:10px; background:var(--bg-3); border-radius:5px; overflow:hidden; margin:10px 0 6px}
.wz-metre i{display:block; height:100%; background:var(--blue); border-radius:5px; transition:width .6s var(--ease)}
.wz-metre i.warn{background:var(--warn)} .wz-metre i.bad{background:var(--bad)}
.wz-kontrol{list-style:none; margin:0; padding:0; display:grid; gap:8px}
.wz-kontrol li{display:grid; grid-template-columns:auto 1fr; gap:8px; font-size:13.5px; align-items:start}
.rozet{font-size:11px; font-weight:800; letter-spacing:.06em; text-transform:uppercase; border-radius:6px; padding:2px 7px; white-space:nowrap}
.rozet.ok{background:var(--wa-soft); color:var(--ok)} .rozet.warn{background:#fdf0d8; color:var(--warn)}
.rozet.bad{background:#fce4e0; color:var(--bad)} .rozet.info{background:var(--bg-3); color:var(--ink-2)}
.wz-teklif{position:sticky; bottom:12px; z-index:5; margin-top:16px; display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:12px; background:rgba(255,255,255,.96); backdrop-filter:blur(10px); border:1px solid var(--line); border-radius:var(--r-lg); box-shadow:var(--shadow-lg); padding:12px 16px}
@media (max-width:991.98px){ .wz-teklif{bottom:84px} }
.wz-teklif .bilgi{font-size:14px; color:var(--muted)}
.wz-teklif .bilgi strong{display:block; color:var(--ink); font-size:16px}
.wz-teklif .uyar{color:var(--warn)}
.wz-yukleniyor{padding:60px 20px; text-align:center; color:var(--muted)}
.wz-yukleniyor .spin{width:32px; height:32px; border-radius:50%; border:3px solid var(--bg-3); border-top-color:var(--blue); animation:dondur .8s linear infinite; margin:0 auto 12px}
@keyframes dondur{to{transform:rotate(360deg)}}

/* v3: arıza kaydı seçim kartları, bakım şeridi */
.secim-grup{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:10px}
.secim-kart{position:relative;display:flex;align-items:center;gap:10px;padding:14px 16px;border:1.5px solid var(--line-2);border-radius:var(--r);cursor:pointer;background:#fff;font-weight:600;font-size:15px;transition:border-color .2s,background .2s}
.secim-kart:hover{border-color:var(--blue)}
.secim-kart input{accent-color:var(--blue);width:18px;height:18px;flex:none}
.secim-kart:has(input:checked){border-color:var(--blue);background:var(--blue-soft)}
.bakim-serit{background:#ffb020;color:#2b1d00;text-align:center;font-size:14px;padding:6px 12px;font-weight:600}
.bakim-serit a{color:inherit}
.ana-menu .nav-link{white-space:nowrap}