@charset "utf-8";
/* ==========================================================================
   GARAGE342 — Hizmetler (liste + detay) genişletmesi.
   Yalnızca vitrin.css'teki jetonları (renk, ritim, kesik köşe) tüketir;
   hiçbir renk burada sabit yazılmaz. Kart/renk temelleri vitrin.css'te
   kalır, burada yalnız hizmetler sayfasına özgü katmanlar eklenir.
   ========================================================================== */

/* ---------- 1. Liste — kategori etiketi (kesik köşeli, kırmızı) --------- */

.hizmet-etiket {
  position: absolute;
  top: 14px;
  left: 0;
  z-index: 2;
  background: var(--red);
  color: #fff;
  font-family: var(--sans);
  font-size: .6875rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  padding: 7px 16px 7px 12px;
  clip-path: polygon(0 0, calc(100% - 10px) 0, 100% 10px, 100% 100%, 0 100%);
}

/* ---------- 2. Liste — görsel yavaş yakınlaşma (yalnızca transform) ----- */

.satir-kart__gorsel img {
  transition: transform 1.2s cubic-bezier(.16, 1, .3, 1);
  transform-origin: center;
}

.satir-kart:hover .satir-kart__gorsel img,
.satir-kart:focus-within .satir-kart__gorsel img {
  transform: scale(1.06);
}

/* ---------- 3. Liste — kart üst satırı: çizgi ikon + mikro etiket ------- */

.satir-kart__ust {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 2px;
}

.satir-kart__ust .mikro { margin: 0; }

.satir-kart:hover .ikon-kutu,
.satir-kart:focus-within .ikon-kutu {
  border-color: var(--red);
}

/* çizgi ikonu: kendi kendine çizilme (SVG2 pathLength=1 ile normalize) */
.hizmet-ikon-cizim .cizim-yol {
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  transition: stroke-dashoffset 1s cubic-bezier(.16, 1, .3, 1);
}

.bel.gorundu .hizmet-ikon-cizim .cizim-yol { stroke-dashoffset: 0; }

.hizmet-ikon-cizim .cizim-yol:nth-child(2) { transition-delay: .16s; }
.hizmet-ikon-cizim .cizim-yol:nth-child(3) { transition-delay: .32s; }
.hizmet-ikon-cizim .cizim-yol:nth-child(4) { transition-delay: .48s; }

/* ---------- 4. Liste — kategori çipleri: kartların yeniden akışı -------- */

.satir-kart.sk-gizli { display: none; }

.satir-kart.sk-yenile { animation: skBelir .34s cubic-bezier(.16, 1, .3, 1); }

@keyframes skBelir {
  from { opacity: 0; transform: scale(.97); }
  to   { opacity: 1; transform: scale(1); }
}

/* ---------- 5. Detay — kapak: yavaş "Ken Burns" kayması (transform) ----- */

.kapak__kb {
  animation: kapakKb 24s ease-in-out infinite alternate;
  transform-origin: 62% 38%;
}

@keyframes kapakKb {
  from { transform: scale(1); }
  to   { transform: scale(1.09); }
}

/* ---------- 6. Detay — galeri şeridi (büyük ızgara, lightbox yok) ------- */

.hizmet-galeri-baslik {
  margin-top: clamp(36px, 4vw, 60px);
  margin-bottom: clamp(16px, 2vw, 26px);
  font-size: var(--fs-h3);
  letter-spacing: .03em;
}

.hizmet-galeri {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--gap);
}

.hizmet-galeri__oge {
  position: relative;
  overflow: hidden;
  background-color: var(--surf-2);
  background-image: var(--grid-1);
  box-shadow: inset 0 0 0 1px var(--foto-kenar);
  aspect-ratio: 4 / 3;
}

.hizmet-galeri__oge img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 1.1s cubic-bezier(.16, 1, .3, 1);
}

.hizmet-galeri__oge:hover img,
.hizmet-galeri__oge:focus-within img { transform: scale(1.06); }

@media (max-width: 820px) {
  .hizmet-galeri { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 480px) {
  .hizmet-galeri { grid-template-columns: minmax(0, 1fr); }
}

/* ---------- 7. Detay — ilgili iş bağlantısı ------------------------------ */

.hizmet-is-baglanti {
  color: inherit;
  text-decoration: none;
  transition: color .2s ease;
}

.hizmet-is-baglanti:hover,
.hizmet-is-baglanti:focus-visible { color: var(--red); }

/* ---------- 8. Hareket azaltma ------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  .satir-kart__gorsel img,
  .hizmet-galeri__oge img {
    transition: none !important;
  }
  .satir-kart:hover .satir-kart__gorsel img,
  .hizmet-galeri__oge:hover img { transform: none !important; }
  .satir-kart.sk-yenile { animation: none !important; }
  .kapak__kb { animation: none !important; }
  .hizmet-ikon-cizim .cizim-yol {
    stroke-dashoffset: 0 !important;
    transition: none !important;
  }
}