/* PREMIUM GRID (p satırı kaldırılmış şablon) */
#mekanik-scope .premium-grid-section{padding-bottom:40px;}
#mekanik-scope .container-grid{
  max-width:1280px;
  margin:0 auto;
  padding:0 20px;
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:30px;
}

#mekanik-scope .app-card{
  position:relative;
  height:265px;
  overflow:hidden;
  border-radius:12px;
  display:block;
  background-color:#0b0f14;
  border:1px solid rgba(0,0,0,0.08);
  box-shadow:0 12px 30px rgba(0,0,0,0.10);
  transition:transform .35s ease, box-shadow .35s ease, border-color .35s ease;
  text-decoration:none;
  cursor:pointer;
}

#mekanik-scope .app-card::before{
  content:"";
  position:absolute;
  inset:-2px;
  background:radial-gradient(600px 200px at 15% 10%, rgba(255,255,255,0.05), rgba(255,255,255,0) 60%);
  z-index:0;
  opacity:0;
  transition:opacity .35s ease;
  pointer-events:none;
}
#mekanik-scope .app-card:hover{transform:translateY(-4px); box-shadow:0 18px 45px rgba(0,0,0,0.15);}
#mekanik-scope .app-card:hover::before{opacity:1;}

#mekanik-scope .card-bg{
  position:absolute; inset:0;
  background-size:cover;
  background-position:center;
  transform:scale(1.03);
  transition:transform .7s ease;
  z-index:1;
}
#mekanik-scope .app-card:hover .card-bg{transform:scale(1.08);}

#mekanik-scope .card-overlay{
  position:absolute; inset:0;
  background:linear-gradient(to top, rgba(0,0,0,0.85) 0%, rgba(0,0,0,0.2) 60%, rgba(0,0,0,0.05) 100%);
  transition:background .35s ease;
  z-index:2;
}
#mekanik-scope .app-card:hover .card-overlay{
  background:linear-gradient(to top, rgba(0,0,0,0.9) 0%, rgba(0,0,0,0.3) 100%);
}

#mekanik-scope .card-content{
  position:absolute;
  bottom:0; left:0;
  padding:26px;
  width:100%;
  z-index:3;
}
#mekanik-scope .card-content h3{
  margin:0 0 12px;
  font-size:20px;
  font-weight:800;
  letter-spacing:.2px;
  text-transform:uppercase;
  color:#ffffff;
  text-shadow:0 4px 20px rgba(0,0,0,0.6);
}
#mekanik-scope .btn-text{
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding:10px 14px;
  border-radius:10px;
  background:rgba(0,173,238,0.92);
  color:#ffffff;
  font-weight:800;
  font-size:12px;
  letter-spacing:.4px;
  text-transform:uppercase;
  box-shadow:0 10px 22px rgba(0,173,238,0.22);
  transition:transform .25s ease, background .25s ease, box-shadow .25s ease;
}
#mekanik-scope .btn-text span{display:inline-block;}
#mekanik-scope .btn-text i{
  font-style:normal;
  font-weight:900;
  transform:translateX(0);
  transition:transform .25s ease;
}
#mekanik-scope .app-card:hover .btn-text{
  background:rgba(0,173,238,1);
  box-shadow:0 12px 26px rgba(0,173,238,0.28);
  transform:translateY(-1px);
}
#mekanik-scope .app-card:hover .btn-text i{transform:translateX(3px);}

/* RESPONSIVE */
@media (max-width:992px){ #mekanik-scope .container-grid{grid-template-columns:repeat(2,1fr);} }
@media (max-width:768px){ #mekanik-scope .container-grid{grid-template-columns:1fr;} #mekanik-scope .app-card{height:285px;} }

/* --- HERO (MEKANİK TESİSAT SİSTEMLERİ) --- */
#mekanik-scope .kale-hero{
  position:relative;
  width:100%;
  min-height:340px;
  overflow:hidden;
  margin:0 0 28px;

}

#mekanik-scope .kale-hero__bg{
  position:absolute;
  inset:0;
  background-size:cover;
  background-position:center;
  transform:scale(1.02);
}

#mekanik-scope .kale-hero__overlay{
  position:absolute;
  inset:0;
  background:linear-gradient(90deg, rgba(0,0,0,0.50) 0%, rgba(0,0,0,0.18) 55%, rgba(0,0,0,0.35) 100%);
}

#mekanik-scope .kale-hero__content{
  position:relative;
  z-index:2;
  min-height:340px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
  gap:6px;                          /* <-- arayı kapattım */
  transform:translateY(-8px);        /* <-- blok biraz yukarı */
  padding:30px 20px;
  font-family:"Montserrat","Poppins","Segoe UI",Arial,sans-serif;
}

#mekanik-scope .kale-hero__content h1{
  margin:0;
  color:#ffffff;
  font-weight:900;
  letter-spacing:1px;
  text-transform:uppercase;
  font-size:44px;
  line-height:1.08;
  display:inline-block;
  max-width:92%;
  padding:10px 18px;
  border-radius:12px;
  background:rgba(0,0,0,0.40);      /* <-- şerit koyulaştı */
  text-shadow:0 6px 22px rgba(0,0,0,0.55);
}

#mekanik-scope .kale-hero__content p{
  margin:0;
  color:rgba(255,255,255,.98);
  font-weight:800;                  /* <-- biraz daha kalın */
  font-size:20px;                   /* <-- büyüttüm */
  line-height:1.25;
  display:inline-block;
  max-width:92%;
  padding:8px 16px;
  border-radius:12px;
  background:rgba(0,0,0,0.34);      /* <-- şerit koyulaştı */
  text-shadow:0 6px 18px rgba(0,0,0,0.55);
}

@media (max-width:992px){
  #mekanik-scope .kale-hero{min-height:300px;}
  #mekanik-scope .kale-hero__content{min-height:300px; transform:translateY(-6px);}
  #mekanik-scope .kale-hero__content h1{font-size:36px;}
  #mekanik-scope .kale-hero__content p{font-size:18px;}
}

@media (max-width:576px){
  #mekanik-scope .kale-hero{margin:14px 0 22px;}
  #mekanik-scope .kale-hero__content{transform:translateY(-4px);}
  #mekanik-scope .kale-hero__content h1{font-size:28px; padding:9px 14px;}
  #mekanik-scope .kale-hero__content p{font-size:16px; padding:7px 12px;}
}
/* ================== KALE ŞABLON-02 FINAL (TEK BLOK) ==================
   Kapsam: SADECE .menuhub-text ve .faq-section
====================================================================== */

/* Hem #mekanik-scope içinde hem dışında çalışsın */
:is(#mekanik-scope .menuhub-text, .menuhub-text),
:is(#mekanik-scope .faq-section, .faq-section){
  max-width:1280px;
  margin:0 auto 38px;
  padding:0 20px;
  font-family:"Poppins","Montserrat","Segoe UI",Arial,sans-serif;
  color:#2b3340;
  -webkit-text-size-adjust:100%;
  text-size-adjust:100%;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  text-rendering:optimizeLegibility;
  overflow:visible !important;
  transform:none !important;
  letter-spacing:0;
}

/* MENUHUB */
:is(#mekanik-scope .menuhub-text, .menuhub-text){
  margin-top:14px;
}

:is(#mekanik-scope .menuhub-text, .menuhub-text) :where(h2,h3,p){
  margin:0;
  padding:0;
  border:0;
  outline:0;
  background:transparent;
  transform:none !important;
  overflow:visible !important;
  box-sizing:border-box;
}

:is(#mekanik-scope .menuhub-text, .menuhub-text) h2{
  margin:26px 0 12px;
  font-size:30px;
  line-height:1.22;
  font-weight:900;
  color:#172A35;
  letter-spacing:.2px;
}

:is(#mekanik-scope .menuhub-text, .menuhub-text) h3{
  margin:18px 0 8px;
  font-size:19px;
  line-height:1.28;
  font-weight:800;
  color:#172A35;
  letter-spacing:.15px;
}

:is(#mekanik-scope .menuhub-text, .menuhub-text) p{
  margin:0 0 14px;
  font-size:16px;
  line-height:1.78;
  font-weight:400;
  color:#2b3340;
}

:is(#mekanik-scope .menuhub-text, .menuhub-text) p + p{
  margin-top:10px;
}

/* FAQ */
:is(#mekanik-scope .faq-section, .faq-section){
  margin-top:10px;
}

/* >>> KRİTİK: FAQ başlığının sağındaki mavi çubuk/dekoru üreten global ::before/::after'ları kapat <<< */
:is(#mekanik-scope .faq-section, .faq-section)::before,
:is(#mekanik-scope .faq-section, .faq-section)::after{
  content:none !important;
  display:none !important;
}

:is(#mekanik-scope .faq-section, .faq-section) :where(h2,details,summary,p){
  box-sizing:border-box;
  transform:none !important;
  overflow:visible !important;
}

:is(#mekanik-scope .faq-section, .faq-section) h2{
  margin:26px 0 14px;
  font-size:30px;
  line-height:1.22;
  font-weight:900;
  color:#172A35;
  letter-spacing:.2px;
}

/* >>> KRİTİK: başlık fontu/ölçüsü üsttekilerle aynı + h2'nin dekor çizgilerini kapat <<< */
:is(#mekanik-scope .faq-section, .faq-section) h2{
  font-family:"Montserrat","Poppins","Segoe UI",Arial,sans-serif !important;
  font-size:32px !important;
  font-weight:900 !important;
  letter-spacing:.2px !important;
}
:is(#mekanik-scope .faq-section, .faq-section) h2::before,
:is(#mekanik-scope .faq-section, .faq-section) h2::after{
  content:none !important;
  display:none !important;
}

/* >>> KRİTİK: akordiyon soru/cevap fontlarını büyüt ve aynı fonta sabitle <<< */
:is(#mekanik-scope .faq-section, .faq-section) summary{
  font-family:"Poppins","Montserrat","Segoe UI",Arial,sans-serif !important;
  font-size:17px !important;
  font-weight:800 !important;
}
:is(#mekanik-scope .faq-section, .faq-section) details p{
  font-family:"Poppins","Montserrat","Segoe UI",Arial,sans-serif !important;
  font-size:16.5px !important;
  font-weight:500 !important;
}

:is(#mekanik-scope .faq-section, .faq-section) details{
  margin:12px 0;
  border:1px solid rgba(46,164,242,0.95);
  border-radius:12px;
  background:#ffffff;
  overflow:hidden; /* köşe kırpma: açık/kapalı ikisini de düzgün yapar */
  box-shadow:0 8px 18px rgba(0,0,0,0.06);
  transition:box-shadow .2s ease, border-color .2s ease;
}

:is(#mekanik-scope .faq-section, .faq-section) details:hover{
  box-shadow:0 12px 26px rgba(0,0,0,0.10);
  border-color:#1498F0;
}

:is(#mekanik-scope .faq-section, .faq-section) summary{
  list-style:none;
  cursor:pointer;
  padding:16px 16px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  line-height:1.35;
  color:#172A35;
  background:#ffffff;
  user-select:none;
  border-radius:12px; /* kapalıyken: tam yuvarlak */
}

:is(#mekanik-scope .faq-section, .faq-section) summary::-webkit-details-marker{ display:none; }

:is(#mekanik-scope .faq-section, .faq-section) summary::after{
  content:"+";
  width:32px;
  height:32px;
  border-radius:10px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  font-weight:900;
  color:#ffffff;
  background:#2EA4F2;
  box-shadow:0 10px 22px rgba(46,164,242,0.22);
  flex:0 0 32px;
  transition:background .2s ease, transform .2s ease;
}

:is(#mekanik-scope .faq-section, .faq-section) details[open] summary::after{
  content:"–";
  background:#1498F0;
}

:is(#mekanik-scope .faq-section, .faq-section) details[open] summary{
  border-radius:12px 12px 0 0; /* açıkken: sadece üst köşeler */
  background:linear-gradient(to bottom, rgba(190,220,241,0.40), rgba(190,220,241,0.08));
}

/* >>> KRİTİK EK: açıkken alt köşeleri p geri versin (senin dediğin sorun) <<< */
:is(#mekanik-scope .faq-section, .faq-section) details[open] p{
  border-radius:0 0 12px 12px;
}

:is(#mekanik-scope .faq-section, .faq-section) details p{
  margin:0;
  padding:12px 16px 16px;
  line-height:1.78;
  color:#2b3340;
  border-top:1px solid rgba(190,220,241,0.90);
  background:#ffffff;
}

/* Mobil */
@media (max-width:992px){
  :is(#mekanik-scope .menuhub-text, .menuhub-text) h2,
  :is(#mekanik-scope .faq-section, .faq-section) h2{ font-size:26px; }
  :is(#mekanik-scope .menuhub-text, .menuhub-text) h3{ font-size:18px; }

  /* FAQ başlık fontu/ölçüsü (tablet) */
  :is(#mekanik-scope .faq-section, .faq-section) h2{ font-size:28px !important; }
  :is(#mekanik-scope .faq-section, .faq-section) summary{ font-size:16.5px !important; }
  :is(#mekanik-scope .faq-section, .faq-section) details p{ font-size:16px !important; }
}
@media (max-width:576px){
  :is(#mekanik-scope .menuhub-text, .menuhub-text) h2,
  :is(#mekanik-scope .faq-section, .faq-section) h2{ font-size:24px; margin:22px 0 10px; }
  :is(#mekanik-scope .menuhub-text, .menuhub-text) p,
  :is(#mekanik-scope .faq-section, .faq-section) details p{ font-size:15.5px; }
  :is(#mekanik-scope .faq-section, .faq-section) summary{ padding:14px 14px; }

  /* FAQ başlık fontu/ölçüsü (mobil) */
  :is(#mekanik-scope .faq-section, .faq-section) h2{ font-size:26px !important; }
  :is(#mekanik-scope .faq-section, .faq-section) summary{ font-size:16px !important; }
  :is(#mekanik-scope .faq-section, .faq-section) details p{ font-size:15.8px !important; }
}

/* ================== KG-FAQ SPACING PATCH v2 ==================
   Kapsam: SADECE #kg-faq (sende görünen bileşen)
   Amaç: Başlık-alt boşluk + kutu arası mesafe + kutu “nefes” + hafif tint + alt padding
====================================================================== */

#mekanik-scope #kg-faq,
#kg-faq{
  padding-bottom:34px !important;
}

/* Başlık ile ilk kutu arası */
#mekanik-scope #kg-faq h2,
#kg-faq h2{
  margin:0 0 22px !important;
}

/* Gap sadece flex/grid’de çalışır: list’i flex’e çevir */
#mekanik-scope #kg-faq .kg-faq-list,
#kg-faq .kg-faq-list{
  display:flex !important;
  flex-direction:column !important;
  gap:14px !important;
}

/* Eğer flex/gap yine uygulanmazsa: yedek spacing */
#mekanik-scope #kg-faq .kg-faq-item + .kg-faq-item,
#kg-faq .kg-faq-item + .kg-faq-item,
#mekanik-scope #kg-faq details + details,
#kg-faq details + details{
  margin-top:14px !important;
}

/* Kapalı kutu “yükseklik” hissi: padding + çok hafif mavi tint */
#mekanik-scope #kg-faq summary,
#kg-faq summary,
#mekanik-scope #kg-faq .kg-faq-q,
#kg-faq .kg-faq-q,
#mekanik-scope #kg-faq .kg-faq-item > button,
#kg-faq .kg-faq-item > button{
  padding:20px 56px 20px 18px !important; /* sağda + ikon için alan */
  background:linear-gradient(to bottom, rgba(0,173,238,0.06) 0%, rgba(255,255,255,0.00) 70%) !important;
}

/* Açıkken 1 tık daha belirgin */
#mekanik-scope #kg-faq details[open] summary,
#kg-faq details[open] summary,
#mekanik-scope #kg-faq details[open] .kg-faq-q,
#kg-faq details[open] .kg-faq-q{
  background:linear-gradient(to bottom, rgba(0,173,238,0.10) 0%, rgba(255,255,255,0.00) 78%) !important;
}

/* Cevap padding */
#mekanik-scope #kg-faq .kg-faq-a,
#kg-faq .kg-faq-a,
#mekanik-scope #kg-faq details p,
#kg-faq details p{
  padding:10px 18px 18px !important;
}

@media (max-width:576px){
  #mekanik-scope #kg-faq h2,
  #kg-faq h2{ margin:0 0 18px !important; }

  #mekanik-scope #kg-faq .kg-faq-list,
  #kg-faq .kg-faq-list{ gap:12px !important; }

  #mekanik-scope #kg-faq summary,
  #kg-faq summary,
  #mekanik-scope #kg-faq .kg-faq-q,
  #kg-faq .kg-faq-q,
  #mekanik-scope #kg-faq .kg-faq-item > button,
  #kg-faq .kg-faq-item > button{
    padding:18px 52px 18px 16px !important;
  }
}