*{margin:0;padding:0;box-sizing:border-box;font-family:Arial}
body{background:#f3f3f3}

header{background:#111;color:#fff;text-align:center;padding:25px;position:relative}

.admin-btn{
  position:absolute;
  top:25px;
  right:25px;
  background:#2a5298;
  color:#fff;
  padding:10px 15px;
  text-decoration:none;
  border-radius:6px;
  font-weight:bold;
  transition:background .3s;
}
.admin-btn:hover{background:#1e3c72}

.controls{
 display:flex;gap:10px;
 justify-content:center;
 margin:20px;flex-wrap:wrap
}
input,select{
 padding:10px;border-radius:6px;border:1px solid #ccc
}

.car-list{
 display:grid;
 grid-template-columns:repeat(auto-fill,260px);
 justify-content:center;
 gap:25px;padding:25px
}

.car-card{
 background:#fff;border-radius:12px;
 overflow:hidden;cursor:pointer;
 box-shadow:0 10px 20px rgba(0,0,0,.15);
 transition:.3s
}
.car-card:hover{transform:translateY(-8px)}
.car-card img{
 width:100%;height:170px;object-fit:cover
}
.car-info{padding:15px}

.modal{
 display:none;position:fixed;
 inset:0;background:rgba(0,0,0,.8);
 justify-content:center;align-items:center
}
.modal-box{
 background:#fff;width:95%;
 max-width:600px;padding:20px;
 border-radius:14px;
 max-height:90vh;overflow:auto
}
.modal-box img{width:100%;border-radius:10px}

#closeBtn,#closeDamage{
 float:right;font-size:26px;cursor:pointer
}

.spec-grid{
 display:grid;
 grid-template-columns:repeat(2,1fr);
 gap:10px;margin-top:10px
}
.spec-item{
 background:#f5f5f5;
 padding:10px;border-radius:8px
}

/* HASAR ŞEMASI */
.schema-wrap{position:relative;max-width:400px;margin:auto}
.schema-wrap img{width:100%}

.part{position:absolute;cursor:pointer}
.front{top:5%;left:40%;width:20%;height:15%}
.rear{bottom:5%;left:40%;width:20%;height:15%}
.left{top:35%;left:10%;width:20%;height:20%}
.right{top:35%;right:10%;width:20%;height:20%}

.part.damaged{
 background:rgba(255,0,0,.5);
 border:2px solid red
}

footer{
 background:#111;color:#fff;
 text-align:center;padding:12px
}