/* =========================
   GENEL
========================= */
.tp-wrap{
  max-width:1200px;
  margin:40px auto;
  padding:0 16px;
  font-family:Arial,Helvetica,sans-serif;
  color:#1f1f1f;
  line-height:1.7;
}
.tp-box{margin-bottom:50px}

.tp-title{
  font-size:22px;
  font-weight:800;
  text-align:center;
  margin-bottom:12px;
  position:relative;
  padding-bottom:14px;
}
.tp-title::after{
  content:"";
  width:90px;
  height:3px;
  background:#0b2c55;
  display:block;
  margin:12px auto 0;
  border-radius:3px;
}

.tp-desc{
  font-size:14px;
  color:#555;
  text-align:center;
}

/* =========================
   HERO
========================= */
.hero-box{
  background:#0b2c55;
  color:#fff;
  padding:44px 36px;
  border-radius:14px;
}
.hero-box h1,
.hero-box h2{
  color:#fff;
}

/* =========================
   FİYAT
========================= */
.price-box{
  background:#fff;
  border:1px solid #eee;
  border-radius:12px;
  padding:28px;
  transition:.25s;
}
.price-box:hover{
  border-color:#0b2c55;
  box-shadow:0 6px 20px rgba(0,0,0,.06);
}
.price-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(200px,1fr));
  gap:14px;
}
.price-item{
  border:1px solid #eee;
  border-radius:8px;
  padding:14px;
  font-size:14px;
  transition:.25s;
}
.price-item:hover{
  border-color:#0b2c55;
  background:#f7f9fc;
}
.price-item strong{color:#0b2c55}

/* =========================
   UYARI
========================= */
.notice-box{
  background:#fff;
  border:1px solid #eee;
  border-left:6px solid #0b2c55;
  padding:22px;
  border-radius:10px;
  transition:.25s;
}
.notice-box:hover{
  border-color:#0b2c55;
  box-shadow:0 6px 20px rgba(0,0,0,.06);
}

/* =========================
   CTA
========================= */
.cta-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:30px;
  align-items:center;
}
.cta-grid img{
  width:100%;
  border-radius:12px;
  transition:.3s;
}
.cta-grid img:hover{transform:scale(1.02)}
.cta-box{
  border:1px solid #eee;
  padding:24px;
  border-radius:12px;
  transition:.25s;
}
.cta-box:hover{
  border-color:#0b2c55;
  box-shadow:0 6px 20px rgba(0,0,0,.06);
}
.cta-btn{
  display:inline-block;
  background:#0b2c55;
  color:#fff;
  padding:16px 34px;
  border-radius:8px;
  font-weight:800;
  text-decoration:none;
}
.cta-btn:hover{background:#081f3c}

/* =========================
   İLÇELER
========================= */
.district-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
  gap:12px;
}
.district-item{
  border:1px dashed #888;
  padding:12px 6px;
  text-align:center;
  border-radius:8px;
  font-size:13px;
  transition:.25s;
}
.district-item:hover{
  border-color:#0b2c55;
  color:#0b2c55;
  background:#f7f9fc;
}

/* =========================
   LG PANEL ARIZALARI – KOMPLE
========================= */

.fault-grid{
  display:grid;
  gap:20px;
}

@media (min-width:1200px){
  .fault-grid{grid-template-columns:repeat(3, 1fr);}
}
@media (min-width:768px) and (max-width:1199px){
  .fault-grid{grid-template-columns:repeat(2, 1fr);}
}
@media (max-width:767px){
  .fault-grid{grid-template-columns:repeat(2, 1fr);gap:14px;}
}

.fault-item{
  border:1px solid #eee;
  border-radius:14px;
  background:#fff;
  overflow:hidden;
  display:flex;
  flex-direction:column;
  height:100%;
  transition:transform .25s ease, box-shadow .25s ease, border-color .25s ease;
  cursor:pointer;
}
.fault-item:hover{
  border-color:#0b2c55;
  transform:translateY(-6px);
  box-shadow:0 12px 28px rgba(0,0,0,.14);
}

.fault-item img{
  width:100%;
  height:160px;
  object-fit:contain;
  background:#fff;
  padding:12px;
  transition:transform .35s ease;
}
.fault-item:hover img{transform:scale(1.06)}

@media (max-width:767px){
  .fault-item img{height:120px;padding:8px;}
}

.fault-item div{
  margin-top:auto;
  padding:14px 12px;
  font-weight:700;
  text-align:center;
  font-size:14px;
  color:#222;
}
@media (max-width:767px){
  .fault-item div{font-size:13px;}
}

/* ===============================
   FAQ
================================ */
.faq-item{margin-bottom:14px}
.faq-item details{
  border:2px solid #e2e6ef;
  border-radius:16px;
  background:#fff;
  overflow:hidden;
}
.faq-item summary{
  list-style:none;
  cursor:pointer;
  padding:18px 22px;
  font-weight:800;
  font-size:15px;
  color:#c40000;
  display:flex;
  gap:14px;
  background:#fafafa;
}
.faq-item details p{
  margin:0;
  padding:18px 22px;
  background:#ffffff;
  font-size:14px;
}

/* =========================
   INFO BOX
========================= */
.info-box{
  background:#0b2c55;
  color:#fff;
  padding:26px 24px;
  border-radius:14px;
  text-align:center;
  max-width:1000px;
  margin:0 auto 20px;
}

/* =========================
   MOBİL
========================= */
@media (max-width:768px){
  .price-grid{grid-template-columns:repeat(3,1fr)}
  .district-grid{grid-template-columns:repeat(3,1fr)}
  .fault-grid{grid-template-columns:repeat(3,1fr)}
}
/* =========================
   FAQ FIX – PLUS & HOVER
   (ESKİ DAVRANIŞ GERİ GELİR)
========================= */

/* =========================
   FAQ FIX – ICON RIGHT
========================= */

/* summary düzeni */
.faq-item summary{
  display:flex;
  align-items:center;
  justify-content:space-between; /* yazı solda, ikon sağda */
}

/* sağdaki + ikon */
.faq-item summary::before{
  content:none; /* soldaki ikonu kapat */
}

.faq-item summary::after{
  content:"+";
  font-size:22px;
  font-weight:900;
  color:#c40000;          /* kırmızı */
  margin-left:16px;
  flex-shrink:0;
}

/* açıkken + → − */
.faq-item details[open] summary::after{
  content:"−";
}
/* =========================
   FAQ FIX – HOVER BORDER
========================= */
@media (hover:hover){
  .faq-item details:hover{
    border-color:#0b1f3a;               /* lacivert */
    box-shadow:0 8px 22px rgba(11,31,58,.12);
  }
}
/* =========================
   INFO BOX – HOVER FIX
========================= */
@media (hover:hover){
  .info-box:hover{
    background:#ffffff;
    color:#0b2c55;
    box-shadow:0 14px 30px rgba(0,0,0,.15);
  }

  .info-box:hover strong{
    color:#0b2c55;
  }
}
/* === CTA GRID (RESİM + BUTON) === */
.cta-grid{
  display:flex;
  align-items:center;
  gap:40px;
  background:#fff;
  border-radius:16px;
  padding:32px;
  box-shadow:0 10px 30px rgba(0,0,0,.06);
  transition:.3s ease;
}

.cta-grid:hover{
  box-shadow:0 18px 45px rgba(0,0,0,.12);
  transform:translateY(-3px);
}

/* === RESİM === */
.cta-img{
  flex:1;
  display:flex;
}

.cta-img img{
  width:100%;
  height:100%;
  min-height:300px;
  object-fit:cover;
  border-radius:14px;
  display:block;
  transition:.35s ease;
}

.cta-grid:hover .cta-img img{
  transform:scale(1.04);
}

/* === CTA SAĞ TARAF === */
.cta-box{
  flex:1;
  text-align:center;
}

.cta-box .tp-title{
  font-size:26px;
  font-weight:800;
  margin-bottom:12px;
}

.cta-box .tp-desc{
  font-size:15px;
  color:#555;
  line-height:1.6;
  margin-bottom:24px;
}

/* === ARA BUTONU === */
.call-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:200px;
  height:52px;
  background:#0b5ed7;
  color:#fff;
  font-size:15px;
  font-weight:700;
  border-radius:30px;
  text-decoration:none;
  transition:.3s ease;
}

/* hover + basılıyken yeşil */
.call-btn:hover,
.call-btn:active{
  background:#2ecc71;
  transform:translateY(-2px);
  box-shadow:0 8px 20px rgba(46,204,113,.4);
}

/* === MOBİL === */
@media(max-width:768px){
  .cta-grid{
    flex-direction:column;
    padding:24px;
    text-align:center;
  }

  .cta-img img{
    min-height:220px;
  }

  .cta-box .tp-title{
    font-size:22px;
  }

  .call-btn{
    width:100%;
  }
}