/* =====================================================================
   hover.css — TEK HOVER DİLİ (en son yüklenir; sayfa CSS'lerinin üstüne yazar)
   İlke: sakin ve tutarlı. Kart yerinden zıplamaz; çerçeve koyulaşır, gölge
   yumuşakça belirir, görsel yavaşça yakınlaşır, ok dairesi dolar, başlığın
   altına çizgi uzar. Tüm kart tıklanabilir (başlık bağlantısı kartı kaplar).
   Yalnız fare/izleme dörtgeni olan cihazlarda; dokunmatikte durağan.
   ===================================================================== */
:root {
  --hv-ease: cubic-bezier(.22, .61, .36, 1);
  --hv-dur: .7s;
  --hv-shadow: 0 1px 2px rgba(var(--c-black-rgb), .04), 0 28px 48px -30px rgba(27, 42, 18, .32);
  --hv-line: rgba(var(--c-primary-rgb), .22);
}

/* ---------- 1. Ortak kart kabuğu ---------- */
.s-hizmetler__card, .s-blog__card, .s-hizmetler__kart, .s-makale-diger__kart, .s-sertifikalar__kart, .s-iletisim__kanal-link, .s-yorumlar__card {
  transition: border-color var(--hv-dur) var(--hv-ease), box-shadow var(--hv-dur) var(--hv-ease), background-color var(--hv-dur) var(--hv-ease) !important;
  transform: none !important;
}
/* Görsel kutuları: yakınlaşma + alttan hafif koyulaşma */
.s-hizmetler__media, .s-blog__media, .s-hizmetler__gorsel, .s-makale-diger__gorsel, .s-sertifikalar__cerceve { position: relative; isolation: isolate; }
.s-hizmetler__media::after, .s-blog__media::after, .s-hizmetler__gorsel::after, .s-makale-diger__gorsel::after {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(180deg, rgba(27, 42, 18, 0) 45%, rgba(27, 42, 18, .22) 100%);
  opacity: 0; transition: opacity var(--hv-dur) var(--hv-ease);
}
.s-hizmetler__media img, .s-blog__media img, .s-hizmetler__gorsel img, .s-makale-diger__gorsel img, .s-sertifikalar__cerceve img {
  transition: transform 1.6s var(--hv-ease) !important; will-change: transform;
}

/* ---------- 2. Kartın tamamı tıklanabilir ---------- */
.s-hizmetler__card, .s-blog__card, .s-hizmetler__kart { position: relative; }
.s-hizmetler__baslik a::after { content: ""; position: absolute; inset: 0; z-index: 2; border-radius: inherit; }
.s-hizmetler__devam { position: relative; z-index: 3; }
.s-hizmetler__kart:has(a:focus-visible) { outline: 2px solid var(--c-brand); outline-offset: 3px; }
.s-hizmetler__title a::after, .s-blog__title a::after { content: ""; position: absolute; inset: 0; z-index: 2; border-radius: inherit; }
.s-hizmetler__card, .s-blog__card { border-radius: 24px; }
.s-blog__cat, .s-hizmetler__more, .s-blog__more { position: relative; z-index: 3; }
.s-hizmetler__card:has(a:focus-visible), .s-blog__card:has(a:focus-visible) { outline: 2px solid var(--c-brand); outline-offset: 3px; }
.s-hizmetler__title a:focus-visible, .s-blog__title a:focus-visible { outline: none; }

/* ---------- 3. Başlık: alttan uzayan ince çizgi ---------- */
.s-hizmetler__title a, .s-blog__title a, .s-hizmetler__baslik a {
  text-decoration: none !important;
  background-image: linear-gradient(currentColor, currentColor); background-repeat: no-repeat;
  background-position: 0 100%; background-size: 0 1px; padding-bottom: 2px;
  transition: background-size .9s var(--hv-ease);
}

/* ---------- 4. "İncele / Devamını oku": ok dairesi ---------- */
.s-hizmetler__more, .s-blog__more, .s-hizmetler__devam { gap: 12px !important; color: var(--c-primary) !important; }
.s-hizmetler__more svg, .s-blog__more svg, .s-hizmetler__devam svg {
  box-sizing: content-box; width: 14px !important; height: 14px !important; padding: 10px;
  border: 1px solid var(--hv-line); border-radius: 50%; color: var(--c-primary);
  transition: background-color var(--hv-dur) var(--hv-ease), border-color var(--hv-dur) var(--hv-ease), color var(--hv-dur) var(--hv-ease), transform var(--hv-dur) var(--hv-ease) !important;
}
.s-hizmetler__no { transition: color var(--hv-dur) var(--hv-ease), opacity var(--hv-dur) var(--hv-ease); }
.s-hizmetler__etiket { transition: background-color var(--hv-dur) var(--hv-ease), color var(--hv-dur) var(--hv-ease); }

/* ---------- 5. Butonlar: zıplama yok, renk + ok ---------- */
.c-btn:hover, .c-btn:active { transform: none !important; box-shadow: none !important; }

/* ---------- 6. Hover durumları (yalnız ince imleçli cihazlar) ---------- */
@media (hover: hover) and (pointer: fine) {
  .s-hizmetler__card:hover, .s-blog__card:hover, .s-hizmetler__kart:hover, .s-sertifikalar__kart:hover, .s-iletisim__kanal-link:hover, .s-yorumlar__card:hover {
    border-color: var(--hv-line) !important; box-shadow: var(--hv-shadow) !important;
  }
  .s-makale-diger__kart:hover { box-shadow: var(--hv-shadow); }
  .s-hizmetler__card:hover .s-hizmetler__media img, .s-blog__card:hover .s-blog__media img, .s-hizmetler__kart:hover .s-hizmetler__gorsel img,
  .s-makale-diger__kart:hover .s-makale-diger__gorsel img, .s-sertifikalar__kart:hover .s-sertifikalar__cerceve img { transform: scale(1.035) !important; }
  .s-hizmetler__card:hover .s-hizmetler__media::after, .s-blog__card:hover .s-blog__media::after,
  .s-hizmetler__kart:hover .s-hizmetler__gorsel::after, .s-makale-diger__kart:hover .s-makale-diger__gorsel::after { opacity: 1; }
  .s-hizmetler__card:hover .s-hizmetler__title a, .s-blog__card:hover .s-blog__title a, .s-hizmetler__kart:hover .s-hizmetler__baslik a { background-size: 100% 1px; }
  .s-hizmetler__kart:hover .s-hizmetler__sayi { color: var(--c-brand); opacity: 1; }
  .s-hizmetler__card:hover .s-hizmetler__more svg, .s-blog__card:hover .s-blog__more svg, .s-hizmetler__kart:hover .s-hizmetler__devam svg {
    background-color: var(--c-primary); border-color: var(--c-primary); color: var(--c-on-dark); transform: translateX(4px) !important;
  }
  .s-hizmetler__card:hover .s-hizmetler__no { color: var(--c-brand); opacity: 1; }
  .s-hizmetler__card:hover .s-hizmetler__etiket { background-color: var(--c-primary); color: var(--c-on-dark); }
  .s-blog__cat:hover { background-color: var(--c-primary) !important; color: var(--c-on-dark) !important; }
}
@media (prefers-reduced-motion: reduce) {
  .s-hizmetler__media img, .s-blog__media img, .s-hizmetler__gorsel img, .s-makale-diger__gorsel img, .s-sertifikalar__cerceve img { transform: none !important; }
}