/*
 * Adanacar v4 — main service card (partials/hizmet_kart.php): home services carousel and the
 * /hizmetlerimiz grid. "Yol çizgisi" language: one organic leaf corner, gold-ringed icon sitting on
 * the cover's edge, a red→gold hairline that draws on hover. Tokens only (temel.css), light + dark.
 * Motion: transform / opacity only, off under prefers-reduced-motion.
 */
@layer custom {
  .ac-hkart {
    --ac-leaf: 1.75rem;
    position: relative; isolation: isolate; display: flex; flex-direction: column; overflow: hidden; inline-size: 100%;
    background: var(--ac-surface-3); border: 1px solid var(--ac-line); border-radius: var(--ac-radius-lg) var(--ac-radius-lg) var(--ac-leaf) var(--ac-radius-lg);
    transition: transform var(--ac-dur-3) var(--ac-ease), border-color var(--ac-dur-2) var(--ac-ease), box-shadow var(--ac-dur-3) var(--ac-ease);
  }
  .ac-hkart::after {
    content: ""; position: absolute; inset: 0 0 auto; z-index: 2; block-size: 3px; background: linear-gradient(90deg, var(--ac-brand-red), var(--ac-gold));
    transform: scaleX(0); transform-origin: left; transition: transform 420ms var(--ac-ease); pointer-events: none;
  }
  .ac-hkart:hover { transform: translateY(-4px); border-color: var(--ac-gold); box-shadow: 0 22px 44px -28px rgb(17 17 20 / 0.55); }
  .ac-hkart:hover::after { transform: scaleX(1); }
  .ac-hkart:has(.ac-hkart__title a:focus-visible) { outline: 2px solid var(--ac-focus); outline-offset: 3px; }

  .ac-hkart__media { position: relative; aspect-ratio: 16 / 10; background: var(--ac-surface-2); }
  .ac-hkart__media img { display: block; inline-size: 100%; block-size: 100%; object-fit: cover; transition: transform var(--ac-dur-3) var(--ac-ease); }
  .ac-hkart:hover .ac-hkart__media img { transform: scale(1.04); }
  .ac-hkart__media:not(:has(img)) {
    background: radial-gradient(60% 70% at 85% 10%, rgb(201 169 106 / 0.22), transparent 70%), var(--ac-band);
  }
  .ac-hkart__ikon {
    position: absolute; inset: auto auto 0 var(--ac-space-5); z-index: 1; display: grid; place-items: center; inline-size: 3rem; block-size: 3rem;
    transform: translateY(50%); border: 1.5px solid var(--ac-gold); border-radius: 50% 50% 50% var(--ac-radius-sm);
    background: var(--ac-surface-3); color: var(--ac-gold-text); font-size: 1.2rem; box-shadow: 0 6px 16px -10px rgb(17 17 20 / 0.6);
  }
  .ac-hkart__no {
    position: absolute; inset: var(--ac-space-3) var(--ac-space-3) auto auto; padding: 0.2rem 0.55rem; border-radius: var(--ac-radius);
    background: rgb(17 17 20 / 0.72); color: #fff; font-size: 0.75rem; font-weight: 700; letter-spacing: 0.06em; backdrop-filter: blur(6px);
  }

  .ac-hkart__body { display: flex; flex-direction: column; flex: 1; gap: var(--ac-space-2); padding: calc(var(--ac-space-5) + 1.25rem) var(--ac-space-5) var(--ac-space-5); }
  .ac-hkart__title { margin: 0; font-size: var(--ac-step-1); font-weight: 800; letter-spacing: -0.01em; line-height: 1.3; }
  .ac-hkart__title a { color: var(--ac-ink); text-decoration: none; }
  .ac-hkart__title a::before { content: ""; position: absolute; inset: 0; z-index: 3; }   /* the whole card is the link */
  .ac-hkart__title a:focus-visible { outline: 0; }
  .ac-hkart:hover .ac-hkart__title a { color: var(--ac-red); }
  .ac-hkart__ozet {
    margin: 0; color: var(--ac-ink-2); font-size: 0.9375rem; line-height: 1.5;
    display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
  }
  .ac-hkart__git {
    display: inline-flex; align-items: center; gap: 0.4rem; align-self: flex-start; margin-block-start: auto; padding-block-start: var(--ac-space-3);
    color: var(--ac-red); font-size: var(--ac-step--1); font-weight: 750;
  }
  .ac-hkart__git i { transition: transform var(--ac-dur-2) var(--ac-ease); }
  .ac-hkart:hover .ac-hkart__git i { transform: translateX(4px); }

  /* /hizmetlerimiz: editorial grid (1 → 2 → 3 → 4 columns) */
  .ac-hkart-izgara { display: grid; gap: var(--ac-space-5); grid-template-columns: minmax(0, 1fr); list-style: none; margin: 0; padding: 0; }
  @media (width >= 576px) { .ac-hkart-izgara { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
  @media (width >= 992px) { .ac-hkart-izgara { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--ac-space-6) var(--ac-space-5); } }
  @media (width >= 1280px) { .ac-hkart-izgara { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
  .ac-hkart-izgara > li { display: flex; }

  @media (prefers-reduced-motion: reduce) {
    .ac-hkart, .ac-hkart::after, .ac-hkart__media img, .ac-hkart__git i { transition: none; }
    .ac-hkart:hover, .ac-hkart:hover .ac-hkart__media img { transform: none; }
  }
  @media (forced-colors: active) {
    .ac-hkart { border-color: CanvasText; }
    .ac-hkart__ikon { border-color: CanvasText; }
  }
}