/* DD Servis — ortak stil dosyası */
:root{
  /* Palet: robot süpürge uygulamasındaki oda haritasından türetildi */
  --map:    #E4E9ED;   /* harita zemini */
  --floor:  #FFFFFF;   /* taranmış zemin */
  --wall:   #0F1C24;   /* duvar / ana metin */
  --slate:  #56656F;   /* ikincil metin */
  --rule:   #C9D2D8;   /* ince çizgi */
  --path:   #2B6CF6;   /* süpürgenin çizdiği yol / vurgu */
  --path-d: #1B4CC4;
  --alert:  #E0532B;   /* hata işareti */
  --ok:     #0E8F6E;

  --sans: "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace;

  --wrap: 1140px;
  --gap: clamp(2.75rem, 7vw, 6rem);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%; scroll-behavior:smooth}
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important}
}

body{
  margin:0;
  background:var(--map);
  color:var(--wall);
  font-family:var(--sans);
  font-size:clamp(1rem,.97rem + .18vw,1.075rem);
  line-height:1.62;
  -webkit-font-smoothing:antialiased;
}

h1,h2,h3,h4{line-height:1.12; letter-spacing:-.022em; margin:0 0 .6em; font-weight:700}
h1{font-size:clamp(2.1rem,1.35rem + 3.1vw,3.6rem); letter-spacing:-.032em}
h2{font-size:clamp(1.6rem,1.2rem + 1.7vw,2.35rem)}
h3{font-size:clamp(1.1rem,1rem + .45vw,1.3rem); font-weight:600}
p{margin:0 0 1.1em; max-width:64ch}
a{color:var(--path-d); text-underline-offset:.18em; text-decoration-thickness:1px}
a:hover{color:var(--path)}
ul{margin:0 0 1.1em; padding-left:1.15em}
li{margin-bottom:.42em}
code,.mono{font-family:var(--mono); font-size:.88em; letter-spacing:-.01em}

:focus-visible{outline:3px solid var(--path); outline-offset:3px; border-radius:2px}

.wrap{width:min(100% - 2.5rem, var(--wrap)); margin-inline:auto}
.skip{position:absolute; left:-9999px; top:0; background:var(--wall); color:#fff; padding:.75rem 1.1rem; z-index:99}
.skip:focus{left:.75rem; top:.75rem}

/* ---------- Üst bar ---------- */
.topbar{background:var(--wall); color:#B9C6CE; font-size:.83rem; padding:.5rem 0}
.topbar .wrap{display:flex; flex-wrap:wrap; gap:.4rem 1.5rem; align-items:center; justify-content:space-between}
.topbar a{color:#fff; text-decoration:none; font-weight:500}
.topbar a:hover{text-decoration:underline}

header.site{background:var(--floor); border-bottom:1px solid var(--rule); position:sticky; top:0; z-index:40}
header.site .wrap{display:flex; align-items:center; justify-content:space-between; gap:1rem; min-height:66px}
.brand{display:flex; align-items:center; gap:.6rem; text-decoration:none; color:var(--wall); font-weight:700; font-size:1.22rem; letter-spacing:-.03em}
.brand svg{flex:none}
.brand span{color:var(--slate); font-weight:500; letter-spacing:0}
nav.main{display:flex; gap:1.4rem; align-items:center}
nav.main a{color:var(--wall); text-decoration:none; font-size:.94rem; font-weight:500}
nav.main a:hover{color:var(--path)}
@media (max-width:880px){nav.main{display:none}}

.btn{
  display:inline-flex; align-items:center; gap:.5rem; justify-content:center;
  padding:.72rem 1.35rem; border-radius:3px; font:inherit; font-weight:600; font-size:.96rem;
  text-decoration:none; border:1.5px solid transparent; cursor:pointer;
  transition:background .15s ease, color .15s ease, border-color .15s ease;
}
.btn-primary{background:var(--path); color:#fff}
.btn-primary:hover{background:var(--path-d); color:#fff}
.btn-ghost{background:transparent; color:var(--wall); border-color:var(--wall)}
.btn-ghost:hover{background:var(--wall); color:#fff}
.btn-lg{padding:.9rem 1.7rem; font-size:1.02rem}

/* ---------- Hero ---------- */
.hero{background:var(--floor); padding:clamp(2.5rem,6vw,4.5rem) 0 clamp(2.5rem,6vw,4rem); border-bottom:1px solid var(--rule)}
.hero .wrap{display:grid; grid-template-columns:1.08fr .92fr; gap:clamp(2rem,5vw,4rem); align-items:center}
@media (max-width:900px){.hero .wrap{grid-template-columns:1fr}}
.hero p.lede{font-size:clamp(1.05rem,1rem + .35vw,1.22rem); color:var(--slate); max-width:52ch}
.hero-cta{display:flex; flex-wrap:wrap; gap:.75rem; margin-top:1.6rem}
.hero-trust{display:flex; flex-wrap:wrap; gap:.5rem 1.6rem; margin-top:1.9rem; padding-top:1.5rem; border-top:1px solid var(--rule); font-size:.92rem; color:var(--slate)}
.hero-trust b{color:var(--wall); font-weight:600}

.plan{width:100%; height:auto; display:block; border:1px solid var(--rule); background:var(--map)}
.plan .room{fill:var(--floor)}
.plan .wallline{fill:none; stroke:var(--wall); stroke-width:5; stroke-linejoin:round}
.plan .furn{fill:#DDE4E9}
.plan .track{fill:none; stroke:var(--path); stroke-width:2.4; stroke-linecap:round; stroke-linejoin:round; opacity:.85}
.plan-cap{font-family:var(--mono); font-size:.76rem; color:var(--slate); margin-top:.6rem; display:block}
@media (prefers-reduced-motion: no-preference){
  .plan .track{stroke-dasharray:1700; stroke-dashoffset:1700; animation:draw 3.4s cubic-bezier(.4,0,.2,1) .35s forwards}
  .plan .bot{opacity:0; animation:pop .5s ease 3.5s forwards}
}
@keyframes draw{to{stroke-dashoffset:0}}
@keyframes pop{to{opacity:1}}

/* ---------- Genel bölümler ---------- */
section{padding:var(--gap) 0}
.sec-white{background:var(--floor); border-block:1px solid var(--rule)}
.sec-dark{background:var(--wall); color:#DCE4E9}
.sec-dark h2,.sec-dark h3{color:#fff}
.sec-dark a{color:#8FB4FF}
.sec-head{max-width:60ch; margin-bottom:2.6rem}
.sec-head p{color:var(--slate); margin-bottom:0}
.sec-dark .sec-head p{color:#9FB0BB}

/* ---------- Arıza teşhis aracı ---------- */
.diag{background:var(--floor); border:1px solid var(--rule); border-top:4px solid var(--path)}
.diag-head{padding:clamp(1.4rem,3.5vw,2.1rem) clamp(1.3rem,3.5vw,2.2rem) 1.1rem}
.diag-head h2{margin-bottom:.35rem}
.diag-head p{color:var(--slate); margin:0; font-size:.98rem}
.diag-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(212px,1fr)); gap:-1px; border-top:1px solid var(--rule)}
.sym{
  appearance:none; background:var(--floor); border:0; border-right:1px solid var(--rule); border-bottom:1px solid var(--rule);
  padding:1rem 1.15rem; text-align:left; font:inherit; font-size:.95rem; font-weight:500; color:var(--wall);
  cursor:pointer; display:flex; align-items:flex-start; gap:.65rem; line-height:1.35;
  transition:background .12s ease;
}
.sym:hover{background:#F0F4F8}
.sym[aria-pressed="true"]{background:var(--path); color:#fff}
.sym .dot{flex:none; width:9px; height:9px; border-radius:50%; background:var(--path); margin-top:.42em}
.sym[aria-pressed="true"] .dot{background:#fff}
.diag-out{padding:clamp(1.3rem,3.5vw,2rem); border-top:1px solid var(--rule); background:#F7F9FB}
.diag-empty{color:var(--slate); margin:0; font-size:.96rem}
.diag-res h3{margin-bottom:.9rem}
.diag-facts{display:grid; grid-template-columns:repeat(auto-fit,minmax(160px,1fr)); gap:1.2rem; margin:1.2rem 0 1.4rem; padding:1.1rem 0; border-block:1px solid var(--rule)}
.fact .k{font-family:var(--mono); font-size:.74rem; color:var(--slate); display:block; margin-bottom:.2rem}
.fact .v{font-size:1.12rem; font-weight:600}
.diag-note{font-size:.87rem; color:var(--slate); margin:1rem 0 0}

/* ---------- Adımlar ---------- */
.steps{counter-reset:s; display:grid; grid-template-columns:repeat(auto-fit,minmax(215px,1fr)); gap:1px; background:var(--rule); border:1px solid var(--rule)}
.step{background:var(--floor); padding:1.6rem 1.4rem; counter-increment:s}
.step::before{
  content:counter(s,decimal-leading-zero); font-family:var(--mono); font-size:.82rem;
  color:var(--path); display:block; margin-bottom:.7rem; font-weight:500;
}
.step h3{margin-bottom:.4rem}
.step p{font-size:.94rem; color:var(--slate); margin:0}

/* ---------- Fiyat tablosu ---------- */
.tablewrap{overflow-x:auto; border:1px solid var(--rule); background:var(--floor)}
table{border-collapse:collapse; width:100%; min-width:560px; font-size:.95rem}
caption{text-align:left; padding:1rem 1.1rem; color:var(--slate); font-size:.9rem; border-bottom:1px solid var(--rule)}
th,td{text-align:left; padding:.82rem 1.1rem; border-bottom:1px solid var(--rule); vertical-align:top}
thead th{font-size:.78rem; font-family:var(--mono); font-weight:500; color:var(--slate); background:#F7F9FB}
tbody tr:last-child td{border-bottom:0}
td.price{font-family:var(--mono); white-space:nowrap; font-weight:500}
td.dur{color:var(--slate); white-space:nowrap}

/* ---------- Markalar ---------- */
.brands{display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:1px; background:var(--rule); border:1px solid var(--rule)}
.brands a{
  background:var(--floor); padding:1rem .95rem; text-decoration:none; color:var(--wall);
  font-weight:600; font-size:.97rem; display:block; transition:background .12s ease;
}
.brands a:hover{background:var(--path); color:#fff}
.brands a small{display:block; font-weight:400; font-size:.79rem; color:var(--slate); margin-top:.15rem}
.brands a:hover small{color:#D6E3FF}

/* ---------- Hata kodları ---------- */
.codes{display:grid; grid-template-columns:repeat(auto-fill,minmax(268px,1fr)); gap:1px; background:#22343F; border:1px solid #22343F}
.code{background:var(--wall); padding:1.05rem 1.15rem}
.code .num{font-family:var(--mono); font-size:.8rem; color:#FF8B62; display:block; margin-bottom:.35rem}
.code h3{font-size:1rem; margin-bottom:.3rem; color:#fff}
.code p{font-size:.89rem; color:#9FB0BB; margin:0}

/* ---------- Güven kartları ---------- */
.trust{display:grid; grid-template-columns:repeat(auto-fit,minmax(255px,1fr)); gap:1px; background:var(--rule); border:1px solid var(--rule)}
.tcard{background:var(--floor); padding:1.7rem 1.45rem}
.tcard h3{margin-bottom:.45rem}
.tcard p{font-size:.94rem; color:var(--slate); margin:0}

/* ---------- SSS ---------- */
.faq{border:1px solid var(--rule); background:var(--floor)}
details{border-bottom:1px solid var(--rule)}
details:last-child{border-bottom:0}
summary{
  padding:1.05rem 1.25rem; cursor:pointer; font-weight:600; font-size:1.02rem;
  list-style:none; display:flex; justify-content:space-between; gap:1rem; align-items:flex-start;
}
summary::-webkit-details-marker{display:none}
summary::after{content:"+"; font-family:var(--mono); color:var(--path); font-size:1.3rem; line-height:1; flex:none}
details[open] summary::after{content:"−"}
summary:hover{background:#F5F8FA}
details .body{padding:0 1.25rem 1.3rem; color:var(--slate); font-size:.96rem}
details .body p:last-child{margin-bottom:0}

/* ---------- İletişim ---------- */
.contact{display:grid; grid-template-columns:1fr 1fr; gap:clamp(1.6rem,4vw,3.2rem)}
@media (max-width:760px){.contact{grid-template-columns:1fr}}
.addr{font-style:normal; line-height:1.75}
.addr dt{font-family:var(--mono); font-size:.75rem; color:#9FB0BB; margin-top:1.1rem}
.addr dd{margin:.15rem 0 0; font-size:1.02rem}
.addr a{color:#8FB4FF}

/* ---------- Footer ---------- */
footer.site{background:#0A1319; color:#8595A0; padding:3rem 0 2rem; font-size:.9rem}
.fgrid{display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:2rem; padding-bottom:2rem; border-bottom:1px solid #1E2C35}
footer.site h4{color:#fff; font-size:.82rem; font-family:var(--mono); font-weight:500; margin-bottom:.85rem}
footer.site ul{list-style:none; padding:0; margin:0}
footer.site li{margin-bottom:.42rem}
footer.site a{color:#8595A0; text-decoration:none}
footer.site a:hover{color:#fff; text-decoration:underline}
.legal{padding-top:1.5rem; font-size:.82rem; line-height:1.7}
.legal p{max-width:78ch}

/* ---------- Sabit WhatsApp ---------- */
.wa{
  position:fixed; right:1rem; bottom:1rem; z-index:50;
  background:#128C7E; color:#fff; border-radius:999px; padding:.8rem 1.25rem;
  text-decoration:none; font-weight:600; font-size:.95rem; display:inline-flex; align-items:center; gap:.5rem;
  box-shadow:0 3px 14px rgba(10,25,35,.28);
}
.wa:hover{background:#0E7264; color:#fff}