/* =========================================
   Eloksal — assets/css/pages/eloksal.css
   Prefix: top-
========================================= */

.top-eloksal{
  padding: clamp(22px, 2.8vw, 40px) 0 clamp(54px, 6vw, 92px);
  background:
    radial-gradient(900px 420px at 12% 10%, rgba(209,18,31,.07), transparent 55%),
    radial-gradient(70 rgba(0,0,0,.06), transparent 60%),
    #f6f6f7;
  color:#111;
}

.top-eloksal__wrap{
  width: min(var(--wrap, 1280px), 100%);
  margin: 0 auto;
  padding: 0 var(--pad, 24px);
}

/* Intro */
.top-eloksalIntro{
  border: 1px solid rgba(0,0,0,.08);
  border-radius: 18px;
  background:#fff;
  box-shadow: 0 10px 26px rgba(0,0,0,.06);
  margin-bottom: clamp(16px, 2.6vw, 22px);
}
.top-eloksalIntro__kicker{
  margin:0 0 10px;
  display:inline-flex;
  align-items:center;
  gap:10px;
  font-size: 12px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: rgba(0,0,0,.70);
}
.top-eloksalIntro__kicker i{ color: var(--top-accent, #c40018); }
.top-eloksalIntro__lead{
  margin:0;
  line-height: 1.8;
  color: rgba(0,0,0,.78);
  font-size: clamp(15px, 1.1vw, 16px);
}

/* Grid */
.top-eloksal__grid{
  display:grid;
  grid-template-columns: 1fr 340px;
  gap: clamp(16px, 2.4vw, 26px);
  align-items:start;
}
@media (max-width: 980px){
  .top-eloksal__grid{ grid-template-columns: 1fr; }
}

/* Surfaces (page-level, compatible with existing style) */
.top-surface{
  background:#fff;
  border: 1px solid rgba(0,0,0,.08);
  border-radius: 18px;
  box-shadow: 0 10px 26px rgba(0,0,0,.06);
}
.top-surface__pad{
  padding: clamp(16px, 2vw, 22px);
}

/* Content */
.top-eloksalContent h2{
  scroll-margin-top: calc(var(--headerH, 96px) + 18px);
  margin: 26px 0 12px;
  font-size: clamp(18px, 1.55vw, 22px);
  letter-spacing: .01em;
}
.top-eloksalContent p{
  margin: 0 0 14px;
  line-height: 1.75;
  color: rgba(0,0,0,.78);
}
.top-eloksalContent ul{
  margin: 0 0 16px 18px;
  line-height: 1.75;
  color: rgba(0,0,0,.78);
}
.top-eloksalContent strong{ color: rgba(0,0,0,.92); }

/* Icon list */
.top-iconList{
  list-style:none;
  padding:0;
  margin: 10px 0 18px;
  display:grid;
  gap:10px;
}
.top-iconList li{
  display:grid;
  grid-template-columns: 18px 1fr;
  gap:10px;
  align-items:start;
  padding: 10px 12px;
  border-radius: 14px;
  border: 1px solid rgba(0,0,0,.08);
  background: rgba(0,0,0,.02);
}
.top-iconList i{ color: var(--top-accent, #c40018); margin-top: 2px; }

/* Callout */
.top-callout{
  margin: 18px 0 6px;
  border-left: 4px solid var(--top-accent, #c40018);
  background: rgba(196,0,24,.06);
  padding: 14px 14px;
  border-radius: 14px;
  color: rgba(0,0,0,.80);
}

/* Steps */
.top-eloksalSteps{
  margin-top: 12px;
  display:grid;
  gap: 12px;
}
.top-eloksalStep{
  display:grid;
  grid-template-columns: 44px 1fr;
  gap: 12px;
  padding: 12px 12px;
  border-radius: 16px;
  border: 1px solid rgba(0,0,0,.08);
  background: rgba(0,0,0,.02);
}
.top-eloksalStep__no{
  width: 44px;
  height: 44px;
  border-radius: 14px;
  display:grid;
  place-items:center;
  font-weight: 800;
  color:#fff;
  background: var(--top-accent, #c40018);
}
.top-eloksalStep__body h3{
  margin:0 0 6px;
  font-size: 15px;
}
.top-eloksalStep__body p{
  margin:0;
  color: rgba(0,0,0,.76);
}

/* Cards (types) */
.top-eloksalCards{
  display:grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin-top: 10px;
}
@media (max-width: 720px){
  .top-eloksalCards{ grid-template-columns: 1fr; }
}
.top-eloksalCard{
  border: 1px solid rgba(0,0,0,.10);
  border-radius: 16px;
  background:#fff;
  padding: 14px 14px 12px;
}
.top-eloksalCard h3{
  margin:0 0 8px;
  font-size: 15px;
  display:flex;
  align-items:center;
  gap:10px;
}
.top-eloksalCard h3 i{ color: var(--top-accent, #c40018); }
.top-eloksalCard p{
  margin:0 0 10px;
  color: rgba(0,0,0,.76);
}
.top-eloksalCard__link{
  display:inline-flex;
  align-items:center;
  gap:8px;
  text-decoration:none;
  font-weight: 650;
  color: rgba(0,0,0,.88);
}
.top-eloksalCard__link:hover{
  color: var(--top-accent, #c40018);
}

/* Info grid (thickness quick facts) */
.top-eloksalInfoGrid{
  display:grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin: 14px 0 6px;
}
@media (max-width: 720px){
  .top-eloksalInfoGrid{ grid-template-columns: 1fr; }
}
.top-infoCard{
  border-radius: 16px;
  border: 1px solid rgba(0,0,0,.10);
  background: #fff;
  padding: 14px 14px 12px;
}
.top-infoCard__k{
  display:flex;
  align-items:center;
  gap:10px;
  font-size: 13px;
  letter-spacing: .02em;
  color: rgba(0,0,0,.72);
  margin:0 0 6px;
}
.top-infoCard__k i{ color: var(--top-accent, #c40018); }
.top-infoCard__v{
  margin:0;
  font-weight: 750;
  color: rgba(0,0,0,.90);
}

/* Checklist */
.top-eloksalChecklist{
  display:grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin-top: 10px;
}
@media (max-width: 720px){
  .top-eloksalChecklist{ grid-template-columns: 1fr; }
}
.top-eloksalChecklist__item{
  display:flex;
  align-items:center;
  gap:10px;
  padding: 10px 12px;
  border-radius: 14px;
  border: 1px solid rgba(0,0,0,.08);
  background: rgba(0,0,0,.02);
  color: rgba(0,0,0,.78);
}
.top-eloksalChecklist__item i{ color: var(--top-accent, #c40018); }

/* Aside */
.top-eloksalAside{
  position: sticky;
  top: calc(var(--headerH, 96px) + 18px);
  display:grid;
  gap: 14px;
}
@media (max-width: 980px){
  .top-eloksalAside{ position: relative; top: auto; }
}

/* TOC */
.top-toc__title{
  display:flex;
  align-items:center;
  gap:10px;
  margin:0 0 12px;
  font-size: 14px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: rgba(0,0,0,.72);
}
.top-toc__title i{ color: var(--top-accent, #c40018); }

.top-toc__list{
  list-style:none;
  margin:0;
  padding:0;
  display:grid;
  gap:6px;
}
.top-toc__a{
  display:block;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid rgba(0,0,0,.08);
  background: rgba(0,0,0,.02);
  color: rgba(0,0,0,.78);
  text-decoration:none;
  transition: transform .15s ease, background .15s ease, border-color .15s ease;
  font-size: 13px;
}
.top-toc__a:hover{
  background: rgba(196,0,24,.06);
  border-color: rgba(196,0,24,.18);
  transform: translateY(-1px);
}
.top-toc__a.is-active{
  background: rgba(196,0,24,.10);
  border-color: rgba(196,0,24,.25);
  color: rgba(0,0,0,.90);
}

/* FAQ (reuse style language) */
.top-faq{
  margin-top: 6px;
  display:grid;
  gap:10px;
}
.top-faq details{
  border: 1px solid rgba(0,0,0,.10);
  border-radius: 16px;
  background:#fff;
  overflow:hidden;
}
.top-faq summary{
  list-style:none;
  cursor:pointer;
  padding: 14px 14px;
  display:flex;
  align-items:center;
  justify-content: space-between;
  gap:12px;
  font-weight: 750;
  color: rgba(0,0,0,.88);
}
.top-faq summary::-webkit-details-marker{ display:none; }
.top-faq summary i{ color: var(--top-accent, #c40018); }
.top-faq .top-faq__a{
  padding: 0 14px 14px;
  color: rgba(0,0,0,.76);
  line-height: 1.75;
}

/* Badges (Intro altındaki ikonlu etiketler) */
.top-badges{
  margin-top: 14px;
  display:flex;
  flex-wrap:wrap;
  gap:10px;
}

.top-badge{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding: 8px 12px;
  border-radius: 999px;
  border: 1px solid rgba(0,0,0,.08);
  background: rgba(0,0,0,.02);
  color: rgba(0,0,0,.78);
  font-size: 13px;
  line-height: 1.2;
}

/* Font Awesome icon hizalama + boyut sabitleme */
.top-badge i,
.top-badge svg{
  flex: 0 0 16px;
  width: 16px;
  height: 16px;
  font-size: 14px;
  line-height: 1;
  display:inline-block;
  vertical-align: -0.125em; /* FA için ideal baseline düzeltmesi */
  color: var(--top-accent, #c40018);
}

/* Kicker içindeki ikon da aynı hizada olsun */
.top-eloksalIntro__kicker i,
.top-eloksalIntro__kicker svg{
  vertical-align: -0.125em;
}