/*
  TRANSPARAN CEPHE SİSTEMLERİ — MASTER (CLEAN) v2.0
  - FAQ: underline + sol mavi şerit kaldırıldı, premium akordiyon
  - Related: underline kaldırıldı, başlık ortada, kart açıklama (p) gizli
  - Mevcut HTML yapısına birebir uyumlu (app-page page-transparan-cephe scope)
*/

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700;800&display=swap');

.app-page.page-transparan-cephe{
  --c-container:1120px;
  --c-gutter:20px;

  --c-ink:#0b2b52;
  --c-accent:#009fe3;
  --c-text:#1f2937;
  --c-muted:#475569;

  --c-border:#e7eef6;
  --c-shadow:0 10px 26px rgba(15,23,42,.08);
  --c-shadow2:0 16px 42px rgba(15,23,42,.10);

  --r-12:12px;
  --r-16:16px;
  --r-18:18px;

  font-family:"Poppins",system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif !important;
  color:var(--c-text) !important;
  background:#fff !important;
}

.app-page.page-transparan-cephe *,
.app-page.page-transparan-cephe *::before,
.app-page.page-transparan-cephe *::after{ box-sizing:border-box !important; }

.app-page.page-transparan-cephe img{ max-width:100%; display:block; }
.app-page.page-transparan-cephe a{ color:inherit; text-decoration:none; }

.app-page.page-transparan-cephe h1,
.app-page.page-transparan-cephe h2,
.app-page.page-transparan-cephe h3{
  font-family:"Poppins",system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif !important;
}

/* =========================================================
   HERO
========================================================= */
.app-page.page-transparan-cephe .page-slider{
  position:relative !important;
  width:100% !important;
  height:450px !important;
  overflow:hidden !important;
  background:#000 !important;
  margin:0 !important;
}
.app-page.page-transparan-cephe .page-slider img{
  width:100% !important;
  height:100% !important;
  object-fit:cover !important;
}
.app-page.page-transparan-cephe .page-slider::after{
  content:"" !important;
  position:absolute !important;
  inset:0 !important;
  background:linear-gradient(to bottom, rgba(0,0,0,.18), rgba(0,0,0,.62)) !important;
  z-index:2 !important;
}
.app-page.page-transparan-cephe .slider-content{
  position:absolute !important;
  top:50% !important; left:50% !important;
  transform:translate(-50%,-50%) !important;
  z-index:10 !important;
  width:92% !important;
  max-width:var(--c-container) !important;
  text-align:center !important;
  color:#fff !important;
}
.app-page.page-transparan-cephe .slider-content h1{
  margin:0 !important;
  font-size:46px !important;
  font-weight:800 !important;
  letter-spacing:1px !important;
  text-transform:uppercase !important;
  color:#fff !important;
  text-shadow:0 4px 20px rgba(0,0,0,.70) !important;
}
.app-page.page-transparan-cephe .slider-content p{
  margin:14px 0 0 !important;
  font-size:20px !important;
  font-weight:500 !important;
  line-height:1.6 !important;
  color:#fff !important;
  text-shadow:0 2px 15px rgba(0,0,0,.70) !important;
}

/* =========================================================
   CONTENT + H2
========================================================= */
.app-page.page-transparan-cephe section{ margin:0 !important; }

.app-page.page-transparan-cephe .content-section{
  padding:30px var(--c-gutter) 14px !important;
}
.app-page.page-transparan-cephe .content-container{
  max-width:var(--c-container) !important;
  margin:0 auto !important;
  min-height:auto !important; /* boşluk şişmesini bitirir */
}

.app-page.page-transparan-cephe .content-container h2{
  margin:0 0 10px !important;
  font-size:22px !important;
  font-weight:800 !important;
  line-height:1.25 !important;
  color:var(--c-ink) !important;
  position:relative !important;
  padding-left:14px !important;
}
.app-page.page-transparan-cephe .content-container h2::before{
  content:"" !important;
  position:absolute !important;
  left:0 !important; top:4px !important; bottom:4px !important;
  width:4px !important;
  border-radius:999px !important;
  background:var(--c-accent) !important;
}
.app-page.page-transparan-cephe .content-container p{
  margin:0 0 12px !important;
  font-size:14.6px !important;
  line-height:1.75 !important;
  color:var(--c-text) !important;
}

/* =========================================================
   IMAGE GRID (3)
========================================================= */
.app-page.page-transparan-cephe .image-grid-section{
  padding:0 var(--c-gutter) 26px !important;
}
.app-page.page-transparan-cephe .image-grid.grid-3{
  max-width:var(--c-container) !important;
  margin:0 auto !important;
  display:grid !important;
  grid-template-columns:repeat(3,1fr) !important;
  gap:22px !important;
}
.app-page.page-transparan-cephe .kg-lightbox{
  display:block !important;
  border-radius:var(--r-16) !important;
  overflow:hidden !important;
  background:#f6f7f9 !important;
  box-shadow:0 10px 26px rgba(15,23,42,.10) !important;
  transform:translateZ(0) !important;
  transition:transform .18s ease, box-shadow .18s ease !important;
}
.app-page.page-transparan-cephe .kg-lightbox:hover{
  transform:translateY(-2px) !important;
  box-shadow:0 14px 34px rgba(15,23,42,.14) !important;
}
.app-page.page-transparan-cephe .kg-lightbox img{
  width:100% !important;
  aspect-ratio:4/3 !important;
  object-fit:cover !important;
}

/* =========================================================
   FAQ — PREMIUM (underline + sol şerit YOK)
========================================================= */
.app-page.page-transparan-cephe .faq-section{
  max-width:var(--c-container) !important;
  margin:0 auto !important;
  padding:28px var(--c-gutter) 18px !important;
}

/* underline kesin kapalı */
.app-page.page-transparan-cephe .faq-underline{ display:none !important; }

/* başlık ortada */
.app-page.page-transparan-cephe .faq-head{
  text-align:center !important;
  margin:0 0 18px !important;
}
.app-page.page-transparan-cephe .faq-head h2{
  margin:0 !important;
  font-size:28px !important;
  font-weight:800 !important;
  color:var(--c-ink) !important;
}

.app-page.page-transparan-cephe .faq-accordion{
  display:grid !important;
  gap:14px !important;
}

.app-page.page-transparan-cephe details.faq-item{
  background:#fff !important;
  border:1px solid var(--c-border) !important;
  border-left:none !important;          /* SOL MAVİ ŞERİT KAPALI */
  border-radius:var(--r-18) !important;
  overflow:hidden !important;
  box-shadow:var(--c-shadow) !important;
  transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease !important;
}
.app-page.page-transparan-cephe details.faq-item:hover{
  border-color:#d7e6f5 !important;
  box-shadow:var(--c-shadow2) !important;
  transform:translateY(-1px) !important;
}

.app-page.page-transparan-cephe details.faq-item > summary{
  list-style:none !important;
  cursor:pointer !important;
  padding:18px 64px 18px 20px !important;
  font-weight:600 !important;
  font-size:16px !important;
  line-height:1.35 !important;
  color:var(--c-ink) !important;
  position:relative !important;
  display:block !important;
}
.app-page.page-transparan-cephe details.faq-item > summary::-webkit-details-marker{ display:none !important; }

.app-page.page-transparan-cephe details.faq-item > summary::after{
  content:"+" !important;
  position:absolute !important;
  right:18px !important;
  top:50% !important;
  transform:translateY(-50%) !important;
  width:38px !important;
  height:38px !important;
  border-radius:999px !important;
  border:1px solid #dbe7f3 !important;
  background:#fff !important;
  color:var(--c-accent) !important;
  font-weight:800 !important;
  font-size:18px !important;
  display:grid !important;
  place-items:center !important;
  box-shadow:0 8px 18px rgba(15,23,42,.06) !important;
}
.app-page.page-transparan-cephe details.faq-item[open] > summary::after{ content:"–" !important; }

.app-page.page-transparan-cephe .faq-body{
  padding:0 20px 18px !important;
  font-size:14.6px !important;
  line-height:1.75 !important;
  color:var(--c-muted) !important;
}

/* =========================================================
   RELATED SOLUTIONS — ORİJİNAL LOOK (underline YOK, p gizli)
========================================================= */
.app-page.page-transparan-cephe .related-solutions{
  margin-top:34px !important;
  padding:28px var(--c-gutter) 72px !important;
  background:#fff !important;
}

/* underline kesin kapalı */
.app-page.page-transparan-cephe .related-underline{ display:none !important; }

/* başlık ortada */
.app-page.page-transparan-cephe .related-head{
  text-align:center !important;
  margin:0 0 18px !important;
}
.app-page.page-transparan-cephe .related-head h2{
  margin:0 !important;
  font-size:28px !important;
  font-weight:800 !important;
  color:var(--c-ink) !important;
}

.app-page.page-transparan-cephe .container-grid{
  max-width:var(--c-container) !important;
  margin:0 auto !important;
  padding:0 !important;
  display:grid !important;
  grid-template-columns:repeat(3,1fr) !important;
  gap:22px !important;
}

.app-page.page-transparan-cephe a.app-card.related-card{
  position:relative !important;
  height:265px !important;
  overflow:hidden !important;
  border-radius:var(--r-12) !important;
  display:block !important;
  background:#0b0f14 !important;
  border:1px solid rgba(0,0,0,.08) !important;
  transition:transform .35s ease, box-shadow .35s ease !important;
}
.app-page.page-transparan-cephe a.app-card.related-card:hover{
  transform:translateY(-4px) !important;
  box-shadow:0 18px 45px rgba(0,0,0,.15) !important;
}

.app-page.page-transparan-cephe a.app-card.related-card .card-bg{
  position:absolute !important;
  inset:0 !important;
  background-size:cover !important;
  background-position:center !important;
  transition:transform .6s ease !important;
  z-index:1 !important;
}
.app-page.page-transparan-cephe a.app-card.related-card:hover .card-bg{
  transform:scale(1.08) !important;
}

.app-page.page-transparan-cephe a.app-card.related-card .card-overlay{
  position:absolute !important;
  inset:0 !important;
  background:linear-gradient(to top, rgba(0,0,0,.85) 0%, rgba(0,0,0,.20) 60%, rgba(0,0,0,.05) 100%) !important;
  z-index:2 !important;
}

.app-page.page-transparan-cephe a.app-card.related-card .card-content{
  position:absolute !important;
  left:0 !important; right:0 !important; bottom:0 !important;
  padding:20px !important;
  z-index:3 !important;
  text-align:left !important;
}

.app-page.page-transparan-cephe a.app-card.related-card .card-content h3{
  margin:0 0 8px !important;
  color:#fff !important;
  font-size:20px !important;
  font-weight:800 !important;
  text-transform:uppercase !important;
  text-shadow:1px 1px 8px rgba(0,0,0,.60) !important;
}

/* KRİTİK: açıklama metni kesin gizli (ne olursa olsun) */
.app-page.page-transparan-cephe .related-solutions .container-grid > a.app-card.related-card .card-content > p{
  display:none !important;
}

/* buton */
.app-page.page-transparan-cephe a.app-card.related-card .btn-text{
  color:#fff !important;
  font-weight:800 !important;
  font-size:12px !important;
  text-transform:uppercase !important;
  display:inline-flex !important;
  align-items:center !important;
  gap:8px !important;
  background:var(--c-accent) !important;
  padding:8px 16px !important;
  border-radius:6px !important;
  opacity:1 !important;
  transition:all .3s ease !important;
}
.app-page.page-transparan-cephe a.app-card.related-card:hover .btn-text{
  background:#0088c2 !important;
  transform:translateY(-2px) !important;
  box-shadow:0 4px 12px rgba(0,159,227,.40) !important;
}
.app-page.page-transparan-cephe .btn-arrow{
  display:inline-block !important;
  transform:translateX(0) !important;
  transition:transform .18s ease !important;
}
.app-page.page-transparan-cephe a.app-card.related-card:hover .btn-arrow{ transform:translateX(3px) !important; }

/* =========================================================
   LIGHTBOX MODAL
========================================================= */
.app-page.page-transparan-cephe #kgLightboxModal{
  display:none;
  position:fixed;
  inset:0;
  z-index:99999;
  background:rgba(0,0,0,.78);
  align-items:center;
  justify-content:center;
  padding:18px;
}
.app-page.page-transparan-cephe #kgLightboxModal .kg-lightbox-figure{
  margin:0;
  width:auto;
  max-width:min(92vw, 1040px);
  display:inline-flex;
  flex-direction:column;
  align-items:center;
  gap:10px;
  background:#fff;
  padding:10px;
  border-radius:14px;
}
.app-page.page-transparan-cephe #kgLightboxImg{
  width:auto;
  height:auto;
  max-width:min(92vw, 1040px);
  max-height:70vh;
  object-fit:contain;
  border-radius:12px;
  background:#fff;
  box-shadow:0 14px 42px rgba(0,0,0,.32);
  cursor:default;
}
.app-page.page-transparan-cephe #kgLightboxCaption{
  color:#111;
  font-size:13px;
  line-height:1.45;
  text-align:center;
  max-width:92%;
}
.app-page.page-transparan-cephe #kgLightboxClose,
.app-page.page-transparan-cephe #kgLightboxZoom{
  position:absolute;
  top:18px;
  width:44px;
  height:44px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.35);
  background:rgba(0,0,0,.35);
  color:#fff;
  display:grid;
  place-items:center;
  cursor:pointer;
  z-index:10002;
  box-shadow:0 10px 28px rgba(0,0,0,.35);
  padding:0;
  outline:none;
}
.app-page.page-transparan-cephe #kgLightboxClose{ right:18px; font-size:26px; line-height:44px; }
.app-page.page-transparan-cephe #kgLightboxZoom{ left:18px; font-size:22px; line-height:44px; }

/* =========================================================
   RESPONSIVE
========================================================= */
@media (max-width:1024px){
  .app-page.page-transparan-cephe .page-slider{ height:380px !important; }
  .app-page.page-transparan-cephe .slider-content h1{ font-size:38px !important; }
  .app-page.page-transparan-cephe .image-grid.grid-3{ grid-template-columns:repeat(2,1fr) !important; }
  .app-page.page-transparan-cephe .container-grid{ grid-template-columns:repeat(2,1fr) !important; }
}
@media (max-width:640px){
  .app-page.page-transparan-cephe{ --c-gutter:16px; }
  .app-page.page-transparan-cephe .page-slider{ height:320px !important; }
  .app-page.page-transparan-cephe .slider-content h1{ font-size:28px !important; }
  .app-page.page-transparan-cephe .slider-content p{ font-size:16px !important; }
  .app-page.page-transparan-cephe .image-grid.grid-3{ grid-template-columns:1fr !important; }
  .app-page.page-transparan-cephe .container-grid{ grid-template-columns:1fr !important; }
}