/* =================== community-slider.css (CLEAN) =================== */
/* 1) Theme tokens  2) Slider layout  3) Card layout  4) Variants  5) Theme mapping */

/* ---------- 1) THEME TOKENS ---------- */
/* LIGHT (default) */
:root{
  --ih-bg:#ffffff;
  --ih-border:rgba(0,0,0,.18);
  --ih-text:#101828;
  --ih-muted:#667085;
  --ih-nav:#e2e6eb;
  --ih-nav-hover:#eaeef3;
  --ih-dot:#d0d5dd;
  --ih-dot-active:#101828;

  /* Boyut sabitleme */
  --ih-lh:1.32;             /* satır yüksekliği */
  --ih-lines-mixed:2;       /* görsel+metin kartı için satır sayısı */
  --ih-lines-text:3;        /* sadece metin kartı için satır sayısı */
  --ih-thumb-max:100px;     /* desktop görsel maks yüksekliği */
  --ih-thumb-max-sm:120px;  /* mobil görsel maks yüksekliği */
  --ih-thumb-col:28%;       /* görsel kolon genişliği (mixed) */
}
@media (max-width:576px){
  :root{
    --ih-lines-mixed:2;
    --ih-lines-text:3;
    --ih-thumb-col:32%;
  }
}

/* DARK (body class'ınızı buna göre değiştirin) */
body.dark-mode{
  --ih-bg:#1a1a1d;
  --ih-border:rgba(255,255,255,.06);
  --ih-text:#eaeaea;
  --ih-muted:#9a9aa3;
  --ih-nav:#2a2a2e;
  --ih-nav-hover:#34343a;
  --ih-dot:#4b4b51;
  --ih-dot-active:#ffffff;
}

/* ---------- 2) SLIDER LAYOUT ---------- */
.ih-comm-wrap{margin:0 0 1px 0}
.ih-comm-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px}
.ih-comm-title{font-size:1.05rem;color:var(--ih-text);margin:0}
.ih-comm-nav button{background:var(--ih-nav);border:0;color:var(--ih-text);width:34px;height:34px;border-radius:8px;cursor:pointer}
.ih-comm-nav button:hover{background:var(--ih-nav-hover)}

.ih-comm-track{
  display:grid;grid-auto-flow:column;gap:12px;overflow-x:auto;padding:2px;
  scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;scrollbar-width:none;
  grid-auto-columns:calc(50% - 6px); /* Desktop: 2 kart */
}
.ih-comm-track::-webkit-scrollbar{display:none}
@media (max-width:576px){ .ih-comm-track{ grid-auto-columns:100%; } } /* Mobile: 1 kart */

.ih-comm-dots{display:flex;gap:8px;justify-content:center;margin-top:10px}
.ih-dot{width:7px;height:7px;border-radius:99px;background:var(--ih-dot);border:0}
.ih-dot.is-active{background:var(--ih-dot-active);width:18px}

/* ---------- 3) CARD LAYOUT (ortak) ---------- */
.ih-card{
  scroll-snap-align:start;background:var(--ih-bg);color:var(--ih-text);
  border:1px solid var(--ih-border);border-radius:14px;
  display:flex;flex-direction:column;padding:12px; /* min-height yok → boşluk olmaz */
}

.ih-card-head{display:flex;align-items:center;gap:10px}
.ih-card-avatar img{width:36px;height:36px;border-radius:50%;object-fit:cover;display:block}
.ih-card-name{font-weight:600;color:var(--ih-text);text-decoration:none;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ih-card-time{display:block;font-size:.78rem;color:var(--ih-muted);margin-top:2px}
.ih-card-verified{display:inline-block;width:14px;height:14px;margin-left:1px;background:currentColor;mask:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="white" d="M12 2l2.2 2h3.1l1.2 2.8 2.5 1-.3 3 1.8 2-1.8 2 .3 3-2.5 1L17.3 20h-3.1L12 22l-2.2-2H6.7l-1.2-2.8-2.5-1 .3-3L1.5 12l1.8-2-.3-3 2.5-1L6.7 4h3.1L12 2zm-1.2 13.6l6-6-1.6-1.6-4.4 4.4-2-2-1.6 1.6 3.6 3.6z"/></svg>') center/contain no-repeat}

.ih-card-actions{display:flex;gap:16px;margin-top:auto;border-top:1px solid var(--ih-border);padding-top:8px}
.ih-act{font-size:.9rem;color:var(--ih-muted);text-decoration:none}
.ih-act i{margin-right:6px}
.ih-act:hover{color:var(--ih-text)}

/* ---------- 4) VARIANTS ---------- */
/* 4a) Görsel + Metin (mixed): görsel sağda küçük, metin sabit yükseklik */
.ih-card-body{
  display:grid;grid-template-columns:1fr var(--ih-thumb-col);gap:10px;
  align-items:start;text-decoration:none;color:inherit;
}
.ih-card-thumb{order:2;border-radius:10px;overflow:hidden;margin:0;aspect-ratio:16/11;
  max-height:var(--ih-thumb-max);
}
.ih-card-thumb img{width:100%;height:100%;object-fit:cover;display:block}
@media (max-width:576px){
  .ih-card-thumb{max-height:var(--ih-thumb-max-sm);}
}

/* Mixed text: 2 satır sabit yükseklik → CLS yok */
.ih-card-body .ih-card-text{
  order:1;margin:4px 0 0 0;font-size:.93rem;line-height:var(--ih-lh);
  display:-webkit-box;-webkit-line-clamp:var(--ih-lines-mixed);-webkit-box-orient:vertical;
  height:calc(var(--ih-lines-mixed)*1em*var(--ih-lh));overflow:hidden;text-overflow:ellipsis;
  color:var(--ih-text);
}

/* 4b) SADECE METİN */
.ih-card-body.no-media{grid-template-columns:1fr}
.ih-card-body.no-media .ih-card-text{
  margin:4px 0 0 0;font-size:.96rem;line-height:var(--ih-lh);
  display:-webkit-box;-webkit-line-clamp:var(--ih-lines-text);-webkit-box-orient:vertical;
  height:calc(var(--ih-lines-text)*1em*var(--ih-lh));overflow:hidden;text-overflow:ellipsis;
}

/* 4c) SADECE GÖRSEL (full-bleed, kompakt) */
.ih-card.is-media-only .ih-card-body{display:block}
.ih-card.is-media-only .ih-card-thumb{aspect-ratio:16/9;max-height:var(--ih-thumb-max)}
.ih-card.is-media-only .ih-card-actions{margin-top:10px}

/* ---------- 5) THEME MAPPING ---------- */
.ih-comm-title{color:var(--ih-text)}
.ih-comm-nav button{background:var(--ih-nav);color:var(--ih-text)}
.ih-comm-nav button:hover{background:var(--ih-nav-hover)}
.ih-dot{background:var(--ih-dot)}
.ih-dot.is-active{background:var(--ih-dot-active)}
.ih-btn-post {
  background: var(--ih-nav);
  border: none;
  padding: 6px 12px;
  border-radius: 8px;
  color: var(--ih-text);
  font-size: 0.9rem;
  cursor: pointer;
  line-height: 1.15;
  margin: 0px;
}
.ih-btn-post:hover {
  background: var(--ih-nav-hover);
}