/* ==========================================================================
   DRIPFORE — hareket sistemi
   Tek bir egri ailesi ve tek bir sure olcegi. Her hareket bir isi anlatir:
   icerigin geldigi yonu, secimin nereye gectigini, neyin acildigini.
   JS calismazsa (html.js yoksa) hicbir sey gizli kalmaz.
   ========================================================================== */

:root {
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --t-fast: 180ms;
  --t-base: 420ms;
  --t-slow: 900ms;
  --t-xslow: 1300ms;
}

/* --- Sayfa acilisi: ust bolumdeki ogeler sirayla gelir -------------------- */

[data-enter] {
  animation: enter var(--t-slow) var(--ease-out) both;
  animation-delay: calc(var(--enter-i, 0) * 90ms + 260ms);
}

@keyframes enter {
  from {
    opacity: 0;
    transform: translateY(18px);
  }
}

/* --- Baslik: kelimeler alttan, maskenin icinden yukselir ------------------ */

.js [data-split]:not(.is-split) {
  visibility: hidden;
}

.split-word {
  display: inline-block;
  overflow: hidden;
  /* Turkce ust isaretleri (I, S cengeli) kesilmesin */
  padding-block: 0.12em;
  margin-block: -0.12em;
  vertical-align: top;
}

.split-word > span {
  display: inline-block;
  animation: word-up var(--t-xslow) var(--ease-out) both;
  animation-delay: calc(var(--w, 0) * 55ms + 60ms);
}

.is-static .split-word > span {
  animation: none;
}

@keyframes word-up {
  from {
    transform: translateY(110%);
  }
}

/* --- Kaydirirken belirme ------------------------------------------------- */

.js [data-reveal] {
  opacity: 0;
  transform: translateY(28px);
  transition:
    opacity var(--t-slow) var(--ease-out),
    transform var(--t-xslow) var(--ease-out);
  transition-delay: var(--reveal-delay, 0ms);
}

.js [data-reveal].is-visible {
  opacity: 1;
  transform: none;
}

/* --- Gorseller: alttan yukari dogru acilan maske ------------------------- */

.js [data-reveal-image] {
  clip-path: inset(100% 0 0 0);
  transition: clip-path var(--t-xslow) var(--ease-out);
  transition-delay: var(--reveal-delay, 120ms);
}

.js [data-reveal-image] img {
  transform: scale(1.12);
  transition: transform 1800ms var(--ease-out);
  transition-delay: var(--reveal-delay, 120ms);
}

.js [data-reveal-image].is-visible {
  clip-path: inset(0 0 0 0);
}

.js [data-reveal-image].is-visible img {
  transform: none;
}

/* --- Header: asagi inerken cekilir, yukari cikinca geri gelir ------------ */

.site-header {
  transition: transform var(--t-base) var(--ease-out);
}

.site-header.is-hidden {
  transform: translateY(-100%);
}

/* --- Mobil menu: baglantilar sirayla dusmeden yerlesir ------------------- */

.mobile-nav__link,
.mobile-nav__lang,
.mobile-nav__meta {
  opacity: 0;
  transform: translateY(16px);
  transition:
    opacity var(--t-base) var(--ease-out),
    transform var(--t-slow) var(--ease-out);
}

.mobile-nav.is-open .mobile-nav__link,
.mobile-nav.is-open .mobile-nav__lang,
.mobile-nav.is-open .mobile-nav__meta {
  opacity: 1;
  transform: none;
  transition-delay: calc(var(--i, 0) * 50ms + 120ms);
}

/* --- Butonlar ve baglantilar --------------------------------------------- */

.btn {
  transition:
    background-color var(--t-fast) var(--ease-out),
    border-color var(--t-fast) var(--ease-out),
    color var(--t-fast) var(--ease-out),
    transform var(--t-fast) var(--ease-out);
}

.btn:hover {
  transform: none;
}

.btn:active,
.header-cta:active,
.bench__btn:active,
.copy-btn:active {
  transform: scale(0.97);
}

.btn__arrow,
.link-arrow .arrow,
.contact-row__arrow {
  display: inline-block;
  transition: transform var(--t-base) var(--ease-out);
}

.btn:hover .btn__arrow,
.link-arrow:hover .arrow,
a.glow-card:hover .link-arrow .arrow,
.contact-row:hover .contact-row__arrow {
  transform: translateX(4px);
}

/* Kart gorseli uzerine gelince cok hafif yaklasir */
.product-card .product-card__media img {
  transition: transform var(--t-xslow) var(--ease-out);
}

.product-card:hover .product-card__media.is-visible img,
html:not(.js) .product-card:hover .product-card__media img {
  transform: scale(1.03);
}

/* Durum satiri ve iletisim satiri: uzerine gelince baslik hafif kayar */
.status-row__name,
.contact-row__title {
  transition:
    color var(--t-fast) var(--ease-out),
    transform var(--t-base) var(--ease-out);
}

.status-row:hover .status-row__name,
.contact-row:hover .contact-row__title {
  transform: translateX(6px);
}

/* --- Sekmeler: kayan cizgi ve panel gecisi -------------------------------- */

.tabs__indicator,
.bench__indicator {
  transition:
    transform 560ms var(--ease-out),
    width 560ms var(--ease-out),
    height 560ms var(--ease-out);
}

.tabs__indicator.is-instant,
.bench__indicator.is-instant {
  transition: none;
}

.tabpanel.is-entering {
  animation: panel-in 620ms var(--ease-out) both;
}

@keyframes panel-in {
  from {
    opacity: 0;
    transform: translateY(12px);
  }
}

/* Sohbet balonlari sirayla gelir */
.tabpanel.is-entering .bubble,
.tabs.is-visible .tabpanel:not([hidden]) .bubble {
  animation: bubble-in 560ms var(--ease-out) both;
}

.tabpanel .bubble:nth-child(1) {
  animation-delay: 200ms;
}

.tabpanel .bubble:nth-child(2) {
  animation-delay: 700ms;
}

.tabpanel .bubble:nth-child(3) {
  animation-delay: 1100ms;
}

@keyframes bubble-in {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
}

.tabpanel.is-entering .tabpanel__list li {
  animation: enter 620ms var(--ease-out) both;
}

.tabpanel.is-entering .tabpanel__list li:nth-child(2) {
  animation-delay: 80ms;
}

.tabpanel.is-entering .tabpanel__list li:nth-child(3) {
  animation-delay: 160ms;
}

/* --- Olcum grafigi -------------------------------------------------------- */

.vram__fill {
  transition: transform var(--t-xslow) var(--ease-out);
}

.vram__cap {
  transition: opacity var(--t-slow) var(--ease-out) 600ms;
}

.js .bench:not(.is-visible) .vram__cap {
  opacity: 0;
}

.js .shrink__bar span {
  transform: scaleX(0);
  transition: transform 1500ms var(--ease-out);
}

.js .shrink.is-visible .shrink__bar span {
  transform: scaleX(1);
}

.js .shrink.is-visible .shrink__row:nth-of-type(2) .shrink__bar span {
  transition-delay: 150ms;
}

.js .shrink.is-visible .shrink__row:nth-of-type(3) .shrink__bar span {
  transition-delay: 300ms;
}

.js .shrink.is-visible .shrink__row:nth-of-type(4) .shrink__bar span {
  transition-delay: 450ms;
}

.js .shrink.is-visible .shrink__row:nth-of-type(5) .shrink__bar span {
  transition-delay: 600ms;
}

/* --- SSS: arti isareti carpiya donmez, dikey cizgi yatar ----------------- */

.faq__q::after {
  transition: transform var(--t-base) var(--ease-out);
}

.faq__item[open] .faq__q::after {
  transform: rotate(90deg);
  background:
    linear-gradient(var(--blush), var(--blush)) center / 100% 1.5px no-repeat,
    linear-gradient(var(--blush), var(--blush)) center / 1.5px 0% no-repeat;
}

.faq__item.is-closing .faq__q::after {
  transform: none;
}

.faq__q {
  transition: color var(--t-fast) var(--ease-out);
}

.faq__q:hover {
  color: var(--blush);
}

/* --- Hareket azaltma: hepsi kapanir, icerik hemen gorunur ---------------- */

@media (prefers-reduced-motion: reduce) {
  [data-enter],
  .split-word > span,
  .tabpanel.is-entering,
  .tabpanel .bubble,
  .tabpanel__list li {
    animation: none !important;
  }

  .js [data-reveal],
  .js [data-reveal-image],
  .js [data-reveal-image] img,
  .js .shrink__bar span,
  .mobile-nav__link,
  .mobile-nav__lang,
  .mobile-nav__meta {
    opacity: 1 !important;
    transform: none !important;
    clip-path: none !important;
    transition: none !important;
  }

  .js .bench .vram__cap {
    opacity: 1;
  }

  .site-header.is-hidden {
    transform: none;
  }
}