/* —— Anasayfa kategori vitrini (blocks/home-category-showcase.blade.php) ——
   Kart yazıları görselin içine gömülü değildir: başlık, açıklama ve buton gerçek metindir,
   görselin üstüne bindirilir. Panelden (Kategori Vitrini bloğu) düzenlenir.

   Metin boyutları kartın genişliğine göre ölçeklenir (container query birimi: cqw);
   desteklemeyen tarayıcılar önceki satırdaki vw tabanlı clamp()'e düşer. */

.hcs-card {
  position: relative;
  display: block;
  container-type: inline-size;
  isolation: isolate;
  --hcs-ink: #0b3d2e;            /* koyu tema: yazı + buton zemini */
  --hcs-on-ink: #ffffff;         /* koyu tema: buton yazısı */
  --hcs-scrim: 255, 250, 243;    /* koyu tema: açık, krem okunabilirlik katmanı */
  --hcs-o: .45;                  /* katman yoğunluğu */
}

.hcs-card[data-theme="light"] {
  --hcs-ink: #ffffff;
  --hcs-on-ink: #0b3d2e;
  --hcs-scrim: 10, 20, 15;
}

.hcs-card[data-overlay="none"]   { --hcs-o: 0; }
.hcs-card[data-overlay="soft"]   { --hcs-o: .45; }
.hcs-card[data-overlay="medium"] { --hcs-o: .7; }
.hcs-card[data-overlay="strong"] { --hcs-o: .9; }

/* Okunabilirlik katmanı: yazının olduğu taraftan şeffafa doğru yumuşak geçiş */
.hcs-card__scrim {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(
    90deg,
    rgba(var(--hcs-scrim), var(--hcs-o)) 0%,
    rgba(var(--hcs-scrim), calc(var(--hcs-o) * .6)) 45%,
    rgba(var(--hcs-scrim), 0) 78%
  );
}

.hcs-card[data-align="right"] .hcs-card__scrim {
  background: linear-gradient(
    270deg,
    rgba(var(--hcs-scrim), var(--hcs-o)) 0%,
    rgba(var(--hcs-scrim), calc(var(--hcs-o) * .6)) 45%,
    rgba(var(--hcs-scrim), 0) 78%
  );
}

.hcs-card[data-align="center"] .hcs-card__scrim {
  background: rgba(var(--hcs-scrim), calc(var(--hcs-o) * .55));
}

/* Metin kutusu */
.hcs-card__content {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  padding: clamp(.9rem, 4vw, 1.5rem);
  padding: clamp(.9rem, 6.5cqw, 2rem);
  color: var(--hcs-ink);
  text-align: left;
}

.hcs-card[data-align="center"] .hcs-card__content { justify-content: center; text-align: center; }
.hcs-card[data-align="right"]  .hcs-card__content { justify-content: flex-end; text-align: right; }
.hcs-card[data-valign="top"]    .hcs-card__content { align-items: flex-start; }
.hcs-card[data-valign="bottom"] .hcs-card__content { align-items: flex-end; }

.hcs-card__text {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  max-width: 62%;
}

.hcs-card[data-align="center"] .hcs-card__text { align-items: center; max-width: 82%; }
.hcs-card[data-align="right"]  .hcs-card__text { align-items: flex-end; }

.hcs-card__title {
  margin: 0;
  font-weight: 800;
  line-height: 1.02;
  letter-spacing: -.01em;
  text-transform: uppercase;
  font-size: clamp(1.2rem, 4.6vw, 1.9rem);
  font-size: clamp(1.15rem, 8.4cqw, 2.4rem);
  /* Kelimeyi ortadan bölme: yalnızca sığmayacak kadar uzunsa böl */
  overflow-wrap: break-word;
  hyphens: manual;
}

/* Başlıkta her kelime kendi satırında (blade her kelimeyi ayrı span'e sarar).
   Dil fark etmez: iki kelime yan yana gelmez, uzun tek kelime gerekirse bölünür. */
.hcs-card__word {
  display: block;
}

/* Başlığın altındaki dalgalı çizgi */
.hcs-card__wave {
  display: block;
  width: clamp(3.5rem, 28cqw, 7rem);
  height: auto;
  margin-top: .45em;
  color: currentColor;
  opacity: .9;
}

.hcs-card__desc {
  margin: .7em 0 0;
  max-width: 32ch;
  font-size: clamp(.72rem, 2.6vw, .9rem);
  font-size: clamp(.7rem, 3.4cqw, .95rem);
  line-height: 1.4;
  opacity: .85;
}

.hcs-card__btn {
  display: inline-flex;
  align-items: center;
  gap: .5em;
  margin-top: 1.1em;
  padding: .6em 1.15em;
  border-radius: .35rem;
  background: var(--hcs-ink);
  color: var(--hcs-on-ink);
  font-size: clamp(.68rem, 2.4vw, .82rem);
  font-size: clamp(.66rem, 3.1cqw, .85rem);
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  line-height: 1;
}

.hcs-card__btn svg {
  width: 1.1em;
  height: 1.1em;
  transition: transform .2s ease;
}

.hcs-card:hover .hcs-card__btn svg,
.hcs-card:focus-visible .hcs-card__btn svg {
  transform: translateX(.25em);
}

.hcs-card:focus-visible {
  outline: 3px solid var(--hcs-ink);
  outline-offset: 3px;
}

/* Dar kartlar (tek kolon, küçük telefon): metin kutusu biraz genişler */
@container (max-width: 300px) {
  .hcs-card__text { max-width: 68%; }
}