/* =====================================================================
   📁 Dosya: /assets/css/sayfa-alt-blog.css — FINAL (GLOBAL)
   Amaç:
   - Her tool sayfasının altına “SEO + Değerli içerik” bloğu eklemek
   - Dark/Light + Mobil uyumlu
   - Çakışma olmasın diye namespace: aill-sab-*
   ===================================================================== */

.aill-sab {
  width: 100%;
  padding: 26px 0;
  margin: 10px 0 0;
}

/* ✅ ÇAKIŞMA ÖNLEME + TAŞMA FIX
   sadece sayfa-alt-blog bloğu içinde geçerli */
.aill-sab,
.aill-sab *{
  box-sizing: border-box;
}

.aill-sab__wrap{
  width: min(1100px, calc(100% - 32px));
  margin: 0 auto;
  border-radius: 18px;
  border: 1px solid rgba(0,0,0,0.10);
  background: rgba(255,255,255,0.92);
  box-shadow: 0 10px 28px rgba(0,0,0,0.06);
  overflow: hidden;
}

body.dark .aill-sab__wrap{
  border-color: rgba(255,255,255,0.12);
  background: rgba(11,20,39,0.78);
  box-shadow: 0 10px 28px rgba(0,0,0,0.35);
}

/* Header */
.aill-sab__head{
  padding: 18px 18px 10px;
}

.aill-sab__badge{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  border-radius: 999px;
  font-weight: 800;
  font-size: 12px;
  background: rgba(53,119,255,0.12);
  color: #1a3fb8;
  border: 1px solid rgba(53,119,255,0.18);
}

body.dark .aill-sab__badge{
  background: rgba(29,209,161,0.12);
  color: #9ff3dc;
  border-color: rgba(29,209,161,0.20);
}

.aill-sab__title{
  margin: 10px 0 8px;
  font-size: 20px;
  line-height: 1.25;
}

.aill-sab__desc{
  margin: 0;
  opacity: 0.80;
  line-height: 1.55;
  font-size: 14px;
}

/* Grid */
.aill-sab__grid{
  display: grid;
  grid-template-columns: 1.55fr 0.95fr;
  gap: 16px;
  padding: 14px 18px 18px;
}

@media (max-width: 900px){
  .aill-sab__grid{
    grid-template-columns: 1fr;
  }
}

/* Content */
.aill-sab__content{
  border-radius: 14px;
  border: 1px solid rgba(0,0,0,0.08);
  background: rgba(0,0,0,0.02);
  padding: 14px 14px;
}

body.dark .aill-sab__content{
  border-color: rgba(255,255,255,0.10);
  background: rgba(255,255,255,0.04);
}

.aill-sab__content h3{
  margin: 12px 0 8px;
  font-size: 16px;
}

.aill-sab__content p{
  margin: 10px 0;
  line-height: 1.75;
  opacity: 0.92;
  font-size: 14px;
}

.aill-sab__content ul{
  margin: 10px 0 10px 20px;
  line-height: 1.7;
  font-size: 14px;
}

/* Aside cards */
.aill-sab__aside{
  display: grid;
  gap: 12px;
}

.aill-sab__card{
  border-radius: 14px;
  border: 1px solid rgba(0,0,0,0.08);
  background: rgba(255,255,255,0.70);
  padding: 14px;
}

body.dark .aill-sab__card{
  border-color: rgba(255,255,255,0.10);
  background: rgba(255,255,255,0.05);
}

.aill-sab__card h3{
  margin: 0 0 8px 0;
  font-size: 15px;
}

.aill-sab__card ul{
  margin: 0 0 0 18px;
  line-height: 1.7;
  font-size: 13.5px;
  opacity: 0.92;
}

/* Soft CTA card */
.aill-sab__card--soft{
  background: linear-gradient(180deg, rgba(53,119,255,0.10), rgba(53,119,255,0.04));
}

body.dark .aill-sab__card--soft{
  background: linear-gradient(180deg, rgba(29,209,161,0.14), rgba(15,23,42,0.55));
}

.aill-sab__btn{
  display: flex;              /* inline-flex yerine taşmayı azaltır */
  align-items: center;
  justify-content: center;
  width: 100%;
  max-width: 100%;            /* ✅ taşma kilidi */
  box-sizing: border-box;     /* ✅ width + padding taşmasın */
  padding: 10px 12px;
  margin-top: 10px;
  border-radius: 12px;
  text-decoration: none;
  font-weight: 800;
  border: 1px solid rgba(53,119,255,0.55);
  background: #3577FF;
  color: #fff;
  transition: transform .12s ease, opacity .2s ease;
}


.aill-sab__btn:hover{
  transform: translateY(-1px);
  opacity: 0.95;
}

body.dark .aill-sab__btn{
  border-color: rgba(29,209,161,0.60);
  background: #1DD1A1;
  color: #0C1B33;
}

/* Varyantlar (her sayfada farklı “tema hissi”) */
.aill-sab--v1 .aill-sab__wrap{ border-left: 6px solid rgba(53,119,255,0.60); }
.aill-sab--v2 .aill-sab__wrap{ border-left: 6px solid rgba(255,138,0,0.60); }
.aill-sab--v3 .aill-sab__wrap{ border-left: 6px solid rgba(29,209,161,0.60); }
.aill-sab--v4 .aill-sab__wrap{ border-left: 6px solid rgba(170,0,255,0.50); }
.aill-sab--v5 .aill-sab__wrap{ border-left: 6px solid rgba(0,176,255,0.55); }
.aill-sab--v6 .aill-sab__wrap{ border-left: 6px solid rgba(255,51,102,0.55); }