/* ═══════════════════════════════════════════════════════════════
   Kategori Kartı — CategoryCarousel içinde kullanılır

   Görseller YAZISIZ üretiliyor; kategori adı ve açıklaması HTML metin
   olarak görselin altında basılıyor (editörden düzenlenebilir).
   ═══════════════════════════════════════════════════════════════ */

/* ─── Düzen anahtarı ───────────────────────────────────────────
   Metin görselin ALTINDA mı ÜSTÜNDE mi — bunu üst bölüm (CategoryCarousel)
   `--cc-ov` değişkeniyle söyler: 0 = altta, 1 = üstünde.

   NEDEN DEĞİŞKEN, neden `.catcar--card-overlay .catcard` gibi bir seçici
   değil: CSS bileşen başına `.cc_<componentId> <seçici>` diye kapsanıyor,
   yani üst bölümün kök sınıfı buradan görünmüyor. Kural global.css'e
   konabilir ama global.css editöre yalnızca dev sunucusunun WebSocket el
   sıkışmasında gidiyor — bağlantı koptuğu bir anda düzenlenirse editör eski
   kopyayla kalıyor ve canlı ile editör ayrışıyor (bu bir kez yaşandı).
   Özel özellikler DOM'da kalıtımla iner, kapsamdan etkilenmez ve bileşenle
   birlikte import_section ile gider. ─────────────────────────────── */

.cc_vf4ft4MdSc_iPvVtNMnqj .catcard {
  display: flex;
  flex-direction: column;
  position: relative;
  /* Boşluk margin ile DEĞİL gap ile: editör başlık margin'lerini sıfırlıyor
     (h1..h6 { margin: 0 !important }) ve margin-bottom sessizce yutuluyor.
     Overlay'de metin akıştan çıktığı için boşluk 0'a iner. */
  gap: calc((1 - var(--cc-ov, 0)) * 12px);
  width: 100%;
  text-decoration: none;
  color: inherit;
}

/* ─── Görsel ─── */

.cc_vf4ft4MdSc_iPvVtNMnqj .catcard-media {
  position: relative;
  width: 100%;
  /* Görseller 3:4 üretildi — kutu da aynı oranda ki kırpma olmasın ve
     kartlar yan yana dizilince üst/alt hizaları birebir tutsun. */
  aspect-ratio: 3 / 4;
  overflow: hidden;
  border-radius: 8px;
  background: var(--color-surface-alt);
}

.cc_vf4ft4MdSc_iPvVtNMnqj .catcard-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
  -webkit-user-drag: none;
  transition: transform 400ms cubic-bezier(0.16, 1, 0.3, 1);
}

.cc_vf4ft4MdSc_iPvVtNMnqj a.catcard:hover .catcard-image, .cc_vf4ft4MdSc_iPvVtNMnqj a.catcard:focus-visible .catcard-image {
  transform: scale(1.04);
}

.cc_vf4ft4MdSc_iPvVtNMnqj a.catcard:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 3px;
}

/* ─── Metin ─── */

.cc_vf4ft4MdSc_iPvVtNMnqj .catcard-body {
  display: flex;
  flex-direction: column;
  gap: 4px;
  text-align: center;
  padding: 0 4px;

  /* Overlay'de akıştan çıkıp görselin alt kısmında yüzer.
     `position: static` iken bottom/left/right yok sayılır, bu yüzden
     değerleri koşulsuz vermek güvenli. */
  position: var(--cc-body-pos, static);
  left: 0;
  right: 0;
  bottom: calc(var(--cc-ov, 0) * var(--cc-body-b, 54px));
  z-index: 2;
}

/* Vaat kartlarıyla aynı aile: 800 ağırlık, masaüstünde 22px. */
.cc_vf4ft4MdSc_iPvVtNMnqj .catcard-title {
  font-family: var(--font-display);
  font-size: 17px;
  font-weight: 800;
  line-height: 1.25;
  letter-spacing: -0.01em;
  color: var(--cc-title-c, var(--color-accent-dark));
  text-shadow: var(--cc-text-shadow, none);
  margin: 0;
  text-wrap: balance;
}

.cc_vf4ft4MdSc_iPvVtNMnqj .catcard-desc {
  font-family: var(--font-body);
  font-size: var(--text-small, 14px);
  line-height: 1.45;
  color: var(--cc-desc-c, var(--color-text-primary));
  text-shadow: var(--cc-text-shadow, none);
  margin: 0;
  text-wrap: pretty;
}

@media (min-width: 1024px) {
  .cc_vf4ft4MdSc_iPvVtNMnqj .catcard-title { font-size: 22px; }
  /* Overlay'de metin butonun üstünde kalsın (buton 34px + alttan 16px) */
  .cc_vf4ft4MdSc_iPvVtNMnqj .catcard { --cc-body-b: 58px; }
}

@media (max-width: 480px) {
  .cc_vf4ft4MdSc_iPvVtNMnqj .catcard { --cc-body-b: 40px; }
}

@media (max-width: 380px) {
  .cc_vf4ft4MdSc_iPvVtNMnqj .catcard { gap: calc((1 - var(--cc-ov, 0)) * 8px); }
  .cc_vf4ft4MdSc_iPvVtNMnqj .catcard-title { font-size: 15px; }
  .cc_vf4ft4MdSc_iPvVtNMnqj .catcard-desc { font-size: 12px; }
}

@media (prefers-reduced-motion: reduce) {
  .cc_vf4ft4MdSc_iPvVtNMnqj .catcard-image { transition: none; }
  .cc_vf4ft4MdSc_iPvVtNMnqj a.catcard:hover .catcard-image, .cc_vf4ft4MdSc_iPvVtNMnqj a.catcard:focus-visible .catcard-image { transform: none; }
}

/* Karartma perdesi — yalnızca overlay düzeninde görünür (--cc-ov = 1).
   Opaklığı editörden gelir (--cc-scrim). Görseller alt tarafı koyu
   üretildiği için %30 yetiyor: ölçüldü, en kötü kartta kontrast 13.1:1. */
.cc_vf4ft4MdSc_iPvVtNMnqj .catcard-media::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 62%;
  background: linear-gradient(
    to top,
    rgba(0, 0, 0, var(--cc-scrim, 30%)) 0%,
    rgba(0, 0, 0, 0) 100%
  );
  opacity: var(--cc-ov, 0);
  pointer-events: none;
  z-index: 1;
}

/* ═══ "Sipariş Ver" butonu — görselin üstünde, altta ═══
   karstanyoresel.com'daki düzenin dengi: buton ayrı bir alanda değil,
   görselin alt kısmında yüzüyor. Ölçülen referans: yeşil dolgu, 2px aynı
   renk çerçeve, 8px/24px iç boşluk, 4px köşe, 16px/500 metin, 10px gap,
   ve ikon `transform-origin: center top` ile 2sn'de ±10° sallanıyor. */

.cc_vf4ft4MdSc_iPvVtNMnqj .catcard-media {
  /* Butonun konumlanabilmesi için — .catcard-media zaten position: relative */
  display: block;
}

.cc_vf4ft4MdSc_iPvVtNMnqj .catcard-btn {
  position: absolute;
  left: 50%;
  bottom: 16px;
  transform: translateX(-50%);
  z-index: 2;

  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  white-space: nowrap;

  padding: 6px 14px;
  border-radius: 4px;
  border: 2px solid var(--color-accent);
  background: var(--color-accent);
  color: var(--color-white, #fff);

  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 600;
  line-height: 1;

  /* Görsel koyu/açık ne olursa olsun buton okunsun */
  box-shadow: 0 2px 10px rgba(27, 36, 19, 0.25);
  transition: background 250ms ease, border-color 250ms ease, transform 250ms ease;
}

.cc_vf4ft4MdSc_iPvVtNMnqj a.catcard:hover .catcard-btn, .cc_vf4ft4MdSc_iPvVtNMnqj a.catcard:focus-visible .catcard-btn {
  background: var(--color-accent-dark);
  border-color: var(--color-accent-dark);
}

/* İkon: sapından asılı sepet gibi sallanır.
   `center top` şart — merkezden döndürülürse sarkaç hissi kaybolur. */
.cc_vf4ft4MdSc_iPvVtNMnqj .catcard-btn-icon {
  font-size: 15px;
  flex: none;
  transform-origin: center top;
  animation: cc_vf4ft4MdSc_iPvVtNMnqj_catcard-basket-swing 2s ease-in-out infinite;
}

@keyframes cc_vf4ft4MdSc_iPvVtNMnqj_catcard-basket-swing {
  0%   { transform: rotate(-10deg); }
  50%  { transform: rotate(10deg); }
  100% { transform: rotate(-10deg); }
}

@media (min-width: 1024px) {
  .cc_vf4ft4MdSc_iPvVtNMnqj .catcard-btn { font-size: 13px; padding: 7px 16px; bottom: 16px; }
  .cc_vf4ft4MdSc_iPvVtNMnqj .catcard-btn-icon { font-size: 16px; }
}

/* Dar telefonda kart ~171px — buton taşmasın diye sıkışır */
@media (max-width: 480px) {
  .cc_vf4ft4MdSc_iPvVtNMnqj .catcard-btn { font-size: 11px; padding: 5px 10px; gap: 5px; bottom: 10px; }
  .cc_vf4ft4MdSc_iPvVtNMnqj .catcard-btn-icon { font-size: 13px; }
}

/* Hareket hassasiyeti olan kullanıcıda sallanma durur
   (referans site bunu yapmıyor, biz yapıyoruz). */
@media (prefers-reduced-motion: reduce) {
  .cc_vf4ft4MdSc_iPvVtNMnqj .catcard-btn-icon { animation: none; }
  .cc_vf4ft4MdSc_iPvVtNMnqj .catcard-btn { transition: none; }
}