.ss-btn {
  margin-top: 18px;
  background: linear-gradient(90deg,#e63946 70%,#20ffe4 150%);
  color: #fff;
  border: none;
  font-family: 'Inter', Arial, sans-serif;
  font-weight: 600;
  font-size: 1em;
  border-radius: 13px;
  padding: 11px 32px;
  cursor: pointer;
  letter-spacing: .9px;
  box-shadow: 0 2px 12px #e6394633, 0 1px 3px #20ffe466;
  transition: background .19s, color .16s, transform .15s, box-shadow .19s;
  outline: none;
}
.ss-btn:hover {
  background: linear-gradient(100deg,#20ffe4 22%,#e63946 140%);
  color: #1e2331;
  transform: translateY(-2px) scale(1.04);
  box-shadow: 0 6px 32px #20ffe499, 0 2px 10px #e6394680;
}
body {
  background: #17181d;
  color: #f6f6f6;
  font-family: 'Inter', Arial, sans-serif;
  margin: 0;
}
.ss-header {
  text-align: center;
  margin: 50px 0 30px 0;
}
.ss-redline {
  width: 100px; height: 5px;
  background: #e63946;
  margin: 0 auto 16px auto;
  border-radius: 12px;
  box-shadow: 0 0 10px 2px #e6394630;
}
.ss-title {
  font-family: 'Inter', Arial, sans-serif;
  font-weight: 700;
  font-size: 2.35rem;
  color: #efeff0;
  margin: 0;
  letter-spacing: 1.5px;
  text-shadow: 0 2px 20px #e6394615;
}
.ss-desc {
  color: #ffffff;
  font-size: 1.11rem;
  margin-top: 12px;
  font-family: 'Inter', Arial, sans-serif;
  opacity: 0.95;
}
.ss-section {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 32px;
  max-width: 1080px;
  margin: 0 auto 60px auto;
  padding: 10px 18px 30px 18px;
}
.ss-card {
  background: #20212b;
  border-radius: 15px;
  box-shadow: 0 2px 12px #e6394636;
  padding: 30px 18px 18px 18px;
  display: flex;
  flex-direction: column;
  align-items: center;
  transition: box-shadow .19s, transform .15s;
  min-height: 290px;
  position: relative;
  overflow: hidden;
  border: 2.2px solid transparent;
}
.ss-card:hover {
  transform: translateY(-4px) scale(1.021);
  box-shadow: 0 8px 32px #f9001155, 0 0 20px #e6394670;
  border-color: #b30707;
  background: #222234;
}
.ss-ikon {
  font-size: 3.2em;
  margin-bottom: 19px;
  text-shadow: 0 0 13px #e639463c, 0 0 5px #fff2;
  transition: text-shadow 0.19s, color 0.2s;
}
.ss-cocuk { color: #20ffe4;}
.ss-agac { color: #27c43c;}
.ss-su    { color: #2ab2f7;}
.ss-suc   { color: #e63946;}
.ss-card:hover .ss-ikon {
  text-shadow: 0 0 22px #20ffe499, 0 0 10px #e639467a;
}
.ss-card h3 {
  font-family: 'Inter', Arial, sans-serif;
  font-weight: 700;
  font-size: 1.13rem;
  color: #fff;
  margin: 0 0 12px 0;
  text-align: center;
  letter-spacing: .6px;
}
.ss-card p {
  font-size: 1rem;
  color: #ebebeb;
  text-align: center;
  font-family: 'Inter', Arial, sans-serif;
  font-weight: 400;
}
@media (max-width: 700px) {
  .ss-section { gap: 16px; padding: 2px;}
  .ss-card { padding: 19px 4px 12px 4px; min-height: 195px;}
  .ss-title { font-size: 1.7em;}
}
.ss-popup-overlay {
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  width: 100vw; height: 100vh;
  background: rgba(30,33,41,0.87);
  z-index: 2222;
  display: none;
  align-items: center;
  justify-content: center;
  animation: fadeIn .2s;
}
@keyframes fadeIn {
  from { opacity: 0; } to { opacity: 1; }
}
.ss-popup {
  background: #20212b;
  border-radius: 16px;
  box-shadow: 0 0 28px #490205bb, 0 0 10px #e6394680;
  padding: 44px 36px 34px 36px;
  min-width: 310px;
  max-width: 96vw;
  text-align: center;
  position: relative;
  animation: popScale .22s cubic-bezier(.4,1.2,.53,1.08);
}
@keyframes popScale {
  from { transform: scale(.78);}
  to   { transform: scale(1);}
}
.ss-popup h2 {
  font-family: 'Inter', Arial, sans-serif;
  color: #f9f9f9;
  margin-bottom: 22px;
  letter-spacing: 1.2px;
  font-weight: 700;
  font-size: 1.27em;
}
.ss-popup-form {
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.ss-popup-form input {
  padding: 10px 15px;
  border-radius: 9px;
  border: 1.7px solid #470305;
  background: #17181d;
  color: #fff;
  font-size: 1.03em;
  font-family: 'Inter', Arial, sans-serif;
  transition: border .18s, box-shadow .19s;
  box-shadow: 0 1px 9px #e6394632;
  outline: none;
}
.ss-popup-form input:focus {
  border-color: #e63946;
  box-shadow: 0 0 8px #e6394699;
}
.ss-popup-close {
  position: absolute;
  top: 14px; right: 18px;
  font-size: 2.1em;
  background: none;
  border: none;
  color: #e63946;
  cursor: pointer;
  transition: color .2s, transform .2s;
  z-index: 12;
}
.ss-popup-close:hover {
  color: #350303;
  transform: scale(1.11);
}
.ss-popup .ss-btn {
  width: 100%;
  margin-top: 7px;
}