/* SMARTARCH ROOF HELP HEADER V1 */

.smartarch-roof-help-header {
  text-align: center !important;
}

.smartarch-roof-help-title-wrap {
  width: min(1180px, 96%) !important;
  max-width: 1180px !important;
  margin: 0 auto !important;
  display: grid !important;
  grid-template-columns: 84px minmax(0, 1fr) 84px !important;
  grid-template-areas:
    "icon title spacer"
    "icon subtitle spacer"
    "icon help spacer" !important;
  column-gap: 18px !important;
  row-gap: 8px !important;
  align-items: center !important;
  justify-items: center !important;
  text-align: center !important;
}

.smartarch-roof-page-icon {
  grid-area: icon !important;
  width: 60px !important;
  height: 60px !important;
  min-width: 60px !important;
  min-height: 60px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: 16px !important;
  border: 1px solid rgba(255, 212, 71, 0.42) !important;
  background:
    radial-gradient(circle at top, rgba(255, 212, 71, 0.20), transparent 58%),
    linear-gradient(180deg, #152a45, #081321) !important;
  box-shadow: 0 12px 26px rgba(0,0,0,.28) !important;
}

.smartarch-roof-page-icon svg {
  width: 42px !important;
  height: 42px !important;
  display: block !important;
}

.smartarch-roof-help-title-wrap h1 {
  grid-area: title !important;
  width: 100% !important;
  max-width: 980px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  text-align: center !important;
  white-space: normal !important;
}

.smartarch-roof-help-title-wrap p {
  grid-area: subtitle !important;
  width: 100% !important;
  max-width: 840px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  text-align: center !important;
}

#smartarchRoofHelpOpen {
  grid-area: help !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 30px !important;
  margin: 6px auto 0 !important;
  padding: 0 14px !important;
  border: 1px solid rgba(255, 212, 71, 0.65) !important;
  border-radius: 10px !important;
  background: linear-gradient(180deg, #ffd447 0%, #f0b82f 100%) !important;
  color: #07111f !important;
  font-size: 14px !important;
  font-weight: 800 !important;
  cursor: pointer !important;
  text-decoration: none !important;
  user-select: none !important;
}

/* Uyarı penceresi */
.smartarch-roof-help-alert {
  position: fixed !important;
  inset: 0 !important;
  z-index: 9999999 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 22px !important;
}

.smartarch-roof-help-alert__backdrop {
  position: absolute !important;
  inset: 0 !important;
  background: rgba(3, 8, 16, 0.72) !important;
  backdrop-filter: blur(3px) !important;
  cursor: pointer !important;
}

.smartarch-roof-help-alert__box {
  position: relative !important;
  z-index: 2 !important;
  width: min(680px, 94vw) !important;
  max-height: min(660px, 86vh) !important;
  overflow: hidden !important;
  border: 1px solid rgba(255, 212, 71, 0.55) !important;
  border-radius: 16px !important;
  background: linear-gradient(180deg, #0c1828 0%, #07111f 100%) !important;
  color: #eaf2ff !important;
  box-shadow: 0 24px 75px rgba(0, 0, 0, 0.62) !important;
  padding: 26px 28px 24px !important;
  text-align: center !important;
}

.smartarch-roof-help-alert__close {
  position: absolute !important;
  top: 10px !important;
  right: 10px !important;
  width: 30px !important;
  height: 30px !important;
  border: 1px solid rgba(255, 255, 255, 0.16) !important;
  border-radius: 9px !important;
  background: #10243d !important;
  color: #ffffff !important;
  font-size: 22px !important;
  line-height: 1 !important;
  cursor: pointer !important;
}

.smartarch-roof-help-alert__box h2 {
  margin: 0 auto 8px !important;
  max-width: 580px !important;
  color: #ffffff !important;
  font-size: 22px !important;
  line-height: 1.25 !important;
  text-align: center !important;
}

.smartarch-roof-help-alert__box h3 {
  margin: 0 auto 20px !important;
  max-width: 580px !important;
  color: #ffd447 !important;
  font-size: 17px !important;
  line-height: 1.3 !important;
  text-align: center !important;
}

.smartarch-roof-help-alert__scroll {
  max-height: 430px !important;
  overflow-y: auto !important;
  padding: 0 6px 0 0 !important;
  text-align: left !important;
}

.smartarch-roof-help-alert__scroll h4 {
  margin: 18px 0 8px !important;
  color: #ffd447 !important;
  font-size: 15px !important;
  line-height: 1.35 !important;
  text-align: left !important;
}

.smartarch-roof-help-alert__scroll p {
  margin: 0 0 12px !important;
  color: #dbe7f8 !important;
  font-size: 14px !important;
  line-height: 1.72 !important;
  text-align: left !important;
}

.smartarch-roof-help-alert__ok {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 30px !important;
  margin-top: 18px !important;
  padding: 0 18px !important;
  border: 1px solid rgba(255, 212, 71, 0.65) !important;
  border-radius: 10px !important;
  background: linear-gradient(180deg, #ffd447 0%, #f0b82f 100%) !important;
  color: #07111f !important;
  font-size: 14px !important;
  font-weight: 800 !important;
  cursor: pointer !important;
}

@media (max-width: 900px) {
  .smartarch-roof-help-title-wrap {
    grid-template-columns: 1fr !important;
    grid-template-areas:
      "icon"
      "title"
      "subtitle"
      "help" !important;
  }
}


/* SMARTARCH ROOF HOME ICON FIX */
.smartarch-roof-page-icon.smartarch-roof-page-icon--site {
  width: 60px !important;
  height: 60px !important;
  min-width: 60px !important;
  min-height: 60px !important;
  max-width: 60px !important;
  max-height: 60px !important;
  padding: 0 !important;
  border-radius: 16px !important;
  border: 1px solid rgba(255, 212, 71, 0.42) !important;
  background:
    radial-gradient(circle at top, rgba(255, 212, 71, 0.16), transparent 58%),
    linear-gradient(180deg, #152a45, #081321) !important;
  box-shadow: 0 12px 26px rgba(0,0,0,.28) !important;
  overflow: hidden !important;
}

.smartarch-roof-page-icon.smartarch-roof-page-icon--site img {
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
  display: block !important;
  padding: 6px !important;
}

.smartarch-roof-page-icon.smartarch-roof-page-icon--site svg {
  display: none !important;
}


/* SMARTARCH ROOF USE HOME BUTTON ICON FINAL */
.smartarch-roof-page-icon.smartarch-roof-page-icon--home {
  grid-area: icon !important;
  width: 60px !important;
  height: 60px !important;
  min-width: 60px !important;
  min-height: 60px !important;
  max-width: 60px !important;
  max-height: 60px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: 16px !important;
  border: 1px solid rgba(255, 212, 71, 0.42) !important;
  background:
    radial-gradient(circle at top, rgba(255, 212, 71, 0.16), transparent 58%),
    linear-gradient(180deg, #152a45, #081321) !important;
  box-shadow: 0 12px 26px rgba(0,0,0,.28) !important;
  overflow: hidden !important;
  margin: 0 auto !important;
}

.smartarch-roof-page-icon.smartarch-roof-page-icon--home img {
  width: 56px !important;
  height: 56px !important;
  object-fit: contain !important;
  display: block !important;
  padding: 4px !important;
}

.smartarch-roof-page-icon.smartarch-roof-page-icon--home svg {
  display: none !important;
}


/* SMARTARCH ROOF DESIGN ICON + TITLE SHIFT 20PX */
.smartarch-roof-help-title-wrap {
  transform: translateX(20px) !important;
}

#smartarchRoofHelpOpen {
  transform: translateX(20px) !important;
}

.smartarch-roof-page-icon.smartarch-roof-page-icon--home img,
.smartarch-roof-page-icon--home img,
.smartarch-roof-page-icon img {
  content: url("/static/site/home_button_icons/roof_design_smart.png") !important;
}

@media (max-width: 900px) {
  .smartarch-roof-help-title-wrap,
  #smartarchRoofHelpOpen {
    transform: translateX(0) !important;
  }
}

/* SMARTARCH ROOF ICON 120 NO BORDER */
.smartarch-roof-page-icon,
.smartarch-roof-page-icon--home,
.smartarch-roof-help-icon,
.smartarch-roof-title-icon,
.smartarch-roof-header-icon {
  width: 120px !important;
  height: 120px !important;
  min-width: 120px !important;
  min-height: 120px !important;
  max-width: 120px !important;
  max-height: 120px !important;

  border: none !important;
  outline: none !important;
  box-shadow: none !important;
  background: transparent !important;
  border-radius: 0 !important;
  padding: 0 !important;
}

.smartarch-roof-page-icon img,
.smartarch-roof-page-icon--home img,
.smartarch-roof-help-icon img,
.smartarch-roof-title-icon img,
.smartarch-roof-header-icon img {
  width: 120px !important;
  height: 120px !important;
  min-width: 120px !important;
  min-height: 120px !important;
  max-width: 120px !important;
  max-height: 120px !important;
  object-fit: contain !important;

  border: none !important;
  outline: none !important;
  box-shadow: none !important;
  background: transparent !important;
  border-radius: 0 !important;
  padding: 0 !important;
}

.smartarch-roof-page-icon::before,
.smartarch-roof-page-icon::after,
.smartarch-roof-page-icon--home::before,
.smartarch-roof-page-icon--home::after,
.smartarch-roof-help-icon::before,
.smartarch-roof-help-icon::after,
.smartarch-roof-title-icon::before,
.smartarch-roof-title-icon::after,
.smartarch-roof-header-icon::before,
.smartarch-roof-header-icon::after {
  display: none !important;
  content: none !important;
}