/* ================================================================
   ui-micro.css — Tilbe Home Micro UI Interactions
   Kaynak: misc.css'den ayristirildi (FAZ 2.2)
   JS bagimliliklari: yok
   Yukleme: global (lazy)
   ================================================================ */

/* === kaynak: components.css 2768-4521 (BOLUM 9+: micro-interactions, analytics, legacy) - Z-2 sprint === */

   BOLUM 9: MICRO-INTERACTIONS & UX POLISH
   ═══════════════════════════════════════════════════════════════════ */

/* ── 9B: Toast Notification Animations ── */
.th-toast,
[role="status"],
.th-pdp__toast {
  animation: th-toast-in 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}
.th-toast.hiding,
.th-pdp__toast.hiding {
  animation: th-toast-out 0.3s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}
@keyframes th-toast-in {
  from { opacity: 0; transform: translateY(16px) scale(0.96); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes th-toast-out {
  from { opacity: 1; transform: translateY(0) scale(1); }
  to   { opacity: 0; transform: translateY(-8px) scale(0.96); }
}

/* ── 9C: Smooth Collapsible/Accordion Transitions ── */
.th-collapse {
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  transition: max-height 0.35s cubic-bezier(0.4, 0, 0.2, 1),
              opacity 0.25s ease;
}
.th-collapse.open {
  max-height: 2000px;
  opacity: 1;
}

/* ── 9E: WhatsApp Footer Icon ── */
.tf2-c-icon--whatsapp { color: var(--th-whatsapp-bg); }

/* ── 9F: Checkbox/Radio Transitions ── */
input[type="checkbox"],
input[type="radio"] {
  transition: box-shadow 0.15s ease;
}
input[type="checkbox"]:focus-visible,
input[type="radio"]:focus-visible {
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--th-color-primary) 20%, transparent);
}

/* ── 9G: Smooth Image Load Fade-in ── */
.th-card__image img,
.tilbe-anasayfa01-image img {
  opacity: 0;
  transition: opacity 0.3s ease;
}
.th-card__image img.loaded,
.tilbe-anasayfa01-image img.loaded,
.th-card__image img[src],
.tilbe-anasayfa01-image img[src] {
  opacity: 1;
}

/* ── 9H: Button Press Feedback ── */
.th-btn:active,
button:active {
  transform: scale(0.97);
  transition: transform 0.1s ease;
}

/* ── 9I: Link Underline Animation ── */
.th-card__body:hover .th-card__title {
  text-decoration-color: var(--th-color-primary);
}

/* ── 9J: Focus Ring for Carousel Indicators ── */
.carousel-indicators li:focus-visible {
  outline: 2px solid var(--th-color-primary);
  outline-offset: 2px;
  border-radius: var(--th-radius-circle);
}


/* === legacy.css'ten taşındı — B3 @keyframes inset-blink === */
@keyframes inset-blink {
    0%,to {
        opacity: 1
    }

    50% {
        opacity: .6
    }
}

/* === legacy.css'ten taşındı — B3 @keyframes scroll-left === */
@keyframes scroll-left {
    0% {
        transform: translateZ(0)
    }

    to {
        transform: translate3d(-100%,0,0)
    }
}

/* === legacy.css'ten taşındı — B3 @keyframes fadeInOut === */
@keyframes fadeInOut {
    0% {
        opacity: 1
    }

    to {
        opacity: 0
    }
}

/* === legacy.css'ten taşındı — B3 @keyframes fadeIn9d === */
@keyframes fadeIn9d {
    0% {
        opacity: 0;
        transform: translateY(-5px)
    }

    to {
        opacity: 1;
        transform: translateY(0)
    }
}

/* === legacy.css'ten taşındı — B3 @keyframes unique-slideUp === */
@keyframes unique-slideUp {
    0%,30%,to {
        transform: translateY(0)
    }

    35%,50% {
        transform: translateY(-30px)
    }

    55%,70% {
        transform: translateY(-60px)
    }

    75%,90% {
        transform: translateY(-90px)
    }
}

/* === legacy.css'ten taşındı — B3 @keyframes blink === */
@keyframes blink {
    0%,to {
        opacity: 1
    }

    50% {
        opacity: .5
    }
}

/* === legacy.css'ten taşındı — B3 @keyframes slideKampanya === */
@keyframes slideKampanya {
    0%,10%,to {
        transform: translateX(0)
    }

    14.29%,24.29% {
        transform: translateX(-100%)
    }

    28.57%,38.57% {
        transform: translateX(-200%)
    }

    42.86%,52.86% {
        transform: translateX(-300%)
    }

    57.14%,67.14% {
        transform: translateX(-400%)
    }

    71.43%,81.43% {
        transform: translateX(-500%)
    }

    85.71%,95.71% {
        transform: translateX(-600%)
    }
}