/* TT AI Lists – v0.3.3
   - breadcrumb class="breadcrumb"
   - hero + pills
   - cards (logo centered, meta below title)
   - mobile stack
*/

.tt-ai-list-page{ background:transparent; padding:0; margin:0; text-align:left; }
.tt-ai-list-page img{ max-width:100%; height:auto; }

/* Breadcrumb (senin istediğin class) */
.breadcrumb{ display:flex; flex-wrap:wrap; gap:8px; align-items:center; margin:0 0 10px; }
.breadcrumb a{ text-decoration:none; }
.breadcrumb .sep{ opacity:.55; }
.breadcrumb .current{ font-weight:600; }

/* Hero */
.ttl-hero{
  background:#fff;
  border:1px solid #e6e9f0;
  border-radius:18px;
  padding:22px;
  margin: 0 0 14px;
}

.ttl-hero__title{
  margin:0;
  font-size:34px;
  line-height:1.12;
  letter-spacing:-0.2px;
}

.ttl-hero__meta{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin:12px 0 0;
}

.ttl-hero-pill{
  display:inline-flex;
  align-items:center;
  height:36px;
  padding:0 14px;
  border-radius:999px;
  font-size:14px;
    font-weight: 400;
    color: #000c3a;
    background: #f6f7fb;
    border: 1px solid #f6f7fb;
  white-space:nowrap;
}

.ttl-hero__intro{
  margin:14px 0 0;
  color:#6b7280;
  font-size:15px;
  line-height:1.6;
}

/* Empty */
.tt-ai-list-empty{
  background:#fff;
  border:1px dashed #e6e9f0;
  border-radius:16px;
  padding:16px;
  color:#6b7280;
}

/* Cards */
.tt-ai-list-cards{ display:flex; flex-direction:column; gap:14px; }

.ttl-card{
  background:#fff;
  border:1px solid #e6e9f0;
  border-radius:18px;
  overflow:hidden;
}

.ttl-card__inner{
  display:flex;
  gap:16px;
  padding:18px;
  align-items:flex-start;
}

/* Rank artık kartın içinde, sol üst */
.ttl-card__rank{
  font-weight:400;
  font-size:1rem;
  color:#111827;
  line-height:1;
  margin-top: 6px;
  min-width: 28px;
}

/* Logo: tam ortalı + contain */
.ttl-card__logo{
  width:74px;
  height:74px;
  border-radius:99999px;
  overflow:hidden;
  border:1px solid #eef1f6;
  background:#f6f7fb;
  flex:0 0 74px;
  display:flex;
  align-items:center;
  justify-content:center;
}

.ttl-card__logo img.ttl-logo-img{
    width: 64px;
    height: 64px;
    object-fit: contain;
    display: block;
    border-radius: 9999px;
}

/* Content */
.ttl-card__content{ min-width:0; flex:1; text-align:left; }

.ttl-card__title{
  margin:0;
  font-size:22px;
  line-height:1.2;
  font-weight:900;
  letter-spacing:-0.2px;
}

.ttl-card__title a{
  color:#2563eb;
  text-decoration:none;
}

.ttl-card__title a:hover{ text-decoration:underline; }

/* Meta: title altı */
.ttl-card__meta{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin:10px 0 10px;
}

.ttl-pill{
    display: inline-flex;
    align-items: center;
    height: 30px;
    padding: 0 12px;
    border-radius: 999px;
    font-size: 13px;
    font-weight: 400;
    color: #001950;
    background: #edf7ff;
    border: 1px solid #ceeaff;
    white-space: nowrap;
}

/* Desc */
.ttl-card__desc{
  margin:0 0 12px;
  font-size:15px;
  line-height:1.55;
  color:#374151;
}

/* Button */
.ttl-card__actions{ display:flex; gap:10px; }

.ttl-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  height:38px;
  padding:0 3rem;
  border-radius:9999px;
  font-weight:600;
  text-decoration:none;
  color:#fff !important;
  background:#0b84ff;
  border:1px solid rgba(0,0,0,.02);
  -webkit-appearance:none;
  appearance:none;
}

.ttl-btn:hover{ filter:brightness(.97); }

/* Mobile: stack */
@media (max-width:600px){
  .ttl-hero__title{ font-size:26px; }

  .ttl-card__inner{
    flex-direction:column;
    align-items:flex-start;
    gap:12px;
    padding:14px;
  }

  .ttl-card__rank{ margin:0; }

  .ttl-card__logo{
    width:64px;
    height:64px;
    flex:0 0 64px;
    border-radius:14px;
  }

  .ttl-card__logo img.ttl-logo-img{
    width:52px;
    height:52px;
  }

  .ttl-card__title{ font-size:18px; }
  .ttl-card__desc{ font-size:14px; }
  .ttl-btn{ height:40px; padding:0 16px; }
}