/* Vaka çalışmaları (modules/home-v2 › CaseShowcaseV2): CİHAZ VİTRİNİ. 10.10 akşam, sahibi dizüstü maketi örneğine bakarak:
   "vakalar alanında bu şekilde müşterilerimizin sitelerini gösterebiliriz mesela, o alan hâlâ bana clean ve modern görünmüyor";
   ölçüt "eşsiz sadelik", "estetik ve clean"; ardından "daha estetik olmalı, animasyonlu ama clean yapıda". Editoryal liste kalktı.
   - Masaüstü (≥ 1024): iki sütun (5,5 / 6,5: başlık 1440'ta iki satır). Solda başlık, dikey sekmeler (ince ray; etkin sekmede 2 px
     Mor 40 çizgi, diğerleri %55; kayarken altında ince ilerleme çizgisi), hemen altında etkin vakanın "Vakayı oku" bağlantısı ve
     tek ana düğme. Sağda açık lila sahnede (28 px köşe, düz #F3EEFF, parlama yok) saf CSS dizüstü; sahne dizüstünü sarar (iç boşluk
     28–40 px, dizüstü sahne genişliğinin ~%87'si; ara inceleme: müşteri sitesi okunur olsun), sol sütuna göre dikeyde ortalı.
   - Telefon / tablet: başlık → yatay logo çipleri (kaydırılır, mıknatıslı) → tam genişlikte dizüstü → kısa başlık + bağlantı → düğme.
   - Dizüstü ölçüleri cihaz kutusunun genişliğinden (kapsayıcı birimi cqw): çerçeve, köşe, taban oranı her boyda aynı kalır. Ekran
     16:10 kutusu baştan ayrılır (görüntü gelince yerleşim kaymaz); altında tek yumuşak elips gölge.
   - Hareket (vaka-vitrin.js sürer; yalnız transform / opacity): (1) etkin sitenin uzun görüntüsü ekranda yukarıdan aşağı kayar,
     ilerleme çizgisi aynı sürede dolar (Web Animations, betikte); (2) vaka değişince ekran katmanı opaklıkla geçer, gelen görüntü
     0,985 → 1 (400 ms; yeni katman eskisinin üstünde belirir, eskisi ancak sonra gizlenir: arada zemin görünmez); (3) bölüm ilk
     göründüğünde sahne belirir, dizüstü 24 px aşağıdan ve 6° eğik yerine oturur (700 ms, bir kez; html.vv-anim kapısı betikten,
     bölüm o an ekrandaysa açılmaz). Boşta salınım yok. "Hareketi azalt" tercihinde hepsi kapalı, sitenin üstü durağan
     (?hareket=1 → html.hv2-motion tercihi yok sayar).
   Renkler yalnız marka paleti: Mor 10/40/90, gri #6E6E73, açık gri #F5F5F7, beyaz, siyah (ve bunların saydam tonları). */

.vv { --vv-line: rgba(44, 4, 93, 0.1); --vv-stage: #F3EEFF; }

/* ---------- Yerleşim ---------- */
.vv-grid {
  display: grid; grid-template-columns: minmax(0, 5.5fr) minmax(0, 6.5fr); column-gap: clamp(40px, 4.5vw, 64px);
  grid-template-areas: "head stage" "tabs stage" "foot stage"; grid-template-rows: auto auto 1fr;
}
.vv .vv-head.section-head { grid-area: head; margin-bottom: 40px; }

/* ---------- Sekmeler (masaüstü: dikey liste) ---------- */
.vv-tabs { grid-area: tabs; display: flex; flex-direction: column; border-left: 1px solid var(--vv-line); }
.vv-tab {
  position: relative; display: grid; grid-template-columns: 88px minmax(0, 1fr); align-items: center; column-gap: 24px;
  width: 100%; min-height: 76px; margin: 0; padding: 14px 8px 14px 24px; border: 0; border-radius: 0; background: none;
  font: inherit; color: var(--wa-mor-90); text-align: left; cursor: pointer; -webkit-tap-highlight-color: transparent;
}
.vv-tab::before {
  content: ""; position: absolute; left: -1px; top: 0; bottom: 0; width: 2px; background: var(--wa-mor-40);
  opacity: 0; transition: opacity 0.25s ease;
}
.vv-tab-logo, .vv-tab-t { opacity: 0.55; transition: opacity 0.25s ease; }
.vv-tab[aria-selected="true"]::before, .vv-tab[aria-selected="true"] :is(.vv-tab-logo, .vv-tab-t) { opacity: 1; }
@media (hover: hover) { .vv-tab:hover :is(.vv-tab-logo, .vv-tab-t) { opacity: 0.85; } .vv-tab[aria-selected="true"]:hover :is(.vv-tab-logo, .vv-tab-t) { opacity: 1; } }
.vv-tab:focus-visible { outline: 2px solid var(--wa-mor-40); outline-offset: -2px; border-radius: 8px; }
.vv-tab-logo { display: flex; align-items: center; height: 28px; }
.vv-tab-img { display: block; width: auto; height: auto; max-width: 88px; max-height: 22px; object-fit: contain; object-position: left center; }
.vv-word { font-size: 16px; font-weight: 600; letter-spacing: -0.01em; color: var(--wa-mor-90); white-space: nowrap; }
.vv-tab-t { font-size: 16px; font-weight: 500; line-height: 1.4; letter-spacing: -0.01em; text-wrap: balance; }
/* İlerleme çizgisi: yalnız etkin sekmede ve kendiliğinden geçiş açıkken (.vv.is-auto); dolumu betik (scaleX 0 → 1, soldan) */
.vv-prog {
  position: absolute; left: 24px; right: 8px; bottom: 8px; height: 2px; overflow: hidden; border-radius: 2px;
  background: rgba(44, 4, 93, 0.07); opacity: 0; transition: opacity 0.25s ease; pointer-events: none;
}
.vv-prog i { display: block; width: 100%; height: 100%; border-radius: inherit; background: var(--wa-mor-40); transform: scaleX(0); transform-origin: 0 50%; }
.vv.is-auto .vv-tab[aria-selected="true"] .vv-prog { opacity: 1; }

/* ---------- Sahne + dizüstü ---------- */
.vv-stage {
  grid-area: stage; align-self: center; display: flex; align-items: center; justify-content: center;
  padding: clamp(28px, 2.8vw, 40px); border-radius: 28px; background: var(--vv-stage);
}
.vv-device { container-type: inline-size; position: relative; width: 100%; }
/* Altında tek yumuşak elips gölge (cihazın arkasında, sahneden taşmaz) */
.vv-device::after {
  content: ""; position: absolute; z-index: -1; left: 6cqw; right: 6cqw; bottom: -2.2cqw; height: 4.4cqw; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(44, 4, 93, 0.18), rgba(44, 4, 93, 0));
}
.vv-stage, .vv-device { isolation: isolate; }
/* Kapak: ince siyah çerçeve, gümüş kenar çizgisi, küçük kamera noktası */
.vv-lid {
  --vv-bz: clamp(5px, 1.8cqw, 12px);
  position: relative; width: 90cqw; margin: 0 auto; padding: var(--vv-bz); border-radius: clamp(10px, 2.6cqw, 17px);
  background: #000; box-shadow: 0 0 0 1px rgba(110, 110, 115, 0.4);
}
.vv-cam {
  position: absolute; top: calc(var(--vv-bz) / 2); left: 50%; width: max(3px, 0.55cqw); height: max(3px, 0.55cqw);
  border-radius: 50%; background: rgba(110, 110, 115, 0.75); transform: translate(-50%, -50%);
}
.vv-screen { position: relative; aspect-ratio: 16 / 10; overflow: hidden; border-radius: max(2px, 0.5cqw); background: var(--wa-beyaz); touch-action: pan-y; }
/* Taban: kapaktan biraz geniş ince klavye kenarı; uçlar incelir, ortada başparmak oyuğu */
.vv-base {
  position: relative; height: 2.5cqw; border-radius: 0.4cqw 0.4cqw 7cqw 7cqw / 0.4cqw 0.4cqw 2.5cqw 2.5cqw;
  background: linear-gradient(180deg, rgba(110, 110, 115, 0) 30%, rgba(110, 110, 115, 0.45) 100%), #F5F5F7;
  box-shadow: inset 0 1px 0 var(--wa-beyaz);
}
.vv-base::before {
  content: ""; position: absolute; top: 0; left: 50%; width: 15cqw; height: 0.95cqw; border-radius: 0 0 1cqw 1cqw;
  background: rgba(110, 110, 115, 0.24); transform: translateX(-50%);
}

/* Ekran katmanları: etkin katman üstte belirir; eskisi 400 ms sonra (geçiş bitince) gizlenir */
.vv-pane {
  position: absolute; inset: 0; z-index: 0; display: flex; flex-direction: column; background: var(--wa-beyaz);
  opacity: 0; visibility: hidden; transition: opacity 0s linear 0.4s, visibility 0s linear 0.4s;
}
.vv-pane.is-on { z-index: 1; opacity: 1; visibility: visible; transition: opacity 0.4s ease; }
/* Tarayıcı çubuğu: üç nokta + ortada alan adı (11 px gri; dar ekranda yalnız boş adres kutusu) */
.vv-bar {
  flex: none; position: relative; display: flex; align-items: center; height: clamp(14px, 4.7cqw, 28px); padding: 0 1.8cqw;
  background: #F5F5F7; border-bottom: 1px solid rgba(44, 4, 93, 0.07);
}
.vv-dots { display: flex; gap: 0.7cqw; }
.vv-dots i { display: block; width: clamp(3px, 1cqw, 6px); height: clamp(3px, 1cqw, 6px); border-radius: 50%; background: rgba(110, 110, 115, 0.3); }
.vv-url {
  position: absolute; left: 50%; top: 50%; display: flex; align-items: center; justify-content: center;
  width: 32cqw; height: clamp(8px, 3.1cqw, 18px); border-radius: 999px; background: var(--wa-beyaz); transform: translate(-50%, -50%);
}
.vv-url-t { font-size: 11px; line-height: 1; letter-spacing: 0; color: var(--wa-gri); white-space: nowrap; }
@container (max-width: 460px) { .vv-url-t { display: none; } }
/* Görüş alanı: uzun görüntü üstten başlar, betik translateY ile kaydırır; durağan görüntü üstten kırpılır */
.vv-view { position: relative; display: block; flex: 1 1 0; min-height: 0; overflow: hidden; background: var(--wa-beyaz); }
.vv-page { display: block; width: 100%; height: 100%; object-fit: cover; object-position: top center; }
.vv-page.is-tall { position: absolute; top: 0; left: 0; height: auto; object-fit: fill; }
/* Gelen görüntü 0,985 → 1 (scale özelliği: betiğin translateY'si transform'da, ikisi birbirini ezmez); giden ancak gizlenince küçülür */
.vv-page, .vv-blank { scale: 0.985; transform-origin: 50% 0; transition: scale 0s linear 0.4s; }
.vv-pane.is-on :is(.vv-page, .vv-blank) { scale: 1; transition: scale 0.4s var(--ease-out); }
/* Görüntüsü olmayan vaka: beyaz ekranda ortalı logo (bilerek sade) */
.vv-blank { display: grid; place-items: center; width: 100%; height: 100%; background: var(--wa-beyaz); }
.vv-blank-logo { display: block; width: auto; height: auto; max-width: 24cqw; max-height: 5.4cqw; object-fit: contain; }
.vv-blank-logo.vv-word { font-size: 3.6cqw; }

/* ---------- Giriş (bir kez): sahne belirir, dizüstü 24 px aşağıdan ve 6° eğik yerine oturur ---------- */
html.vv-anim .vv-stage { opacity: 0; }
html.vv-anim .vv-device { transform: perspective(1600px) translateY(24px) rotateX(6deg); transform-origin: 50% 100%; }
html.vv-anim .vv.is-in .vv-stage { opacity: 1; transition: opacity 0.7s var(--ease-out); }
html.vv-anim .vv.is-in .vv-device { transform: perspective(1600px) translateY(0) rotateX(0deg); transition: transform 0.7s var(--ease-out); }

/* ---------- Alt: etkin vakanın bağlantısı + tek ana düğme ---------- */
.vv-foot { grid-area: foot; align-self: start; display: flex; flex-direction: column; align-items: flex-start; gap: 20px; margin-top: 24px; }
/* Tüm vakaların satırı aynı hücrede üst üste: yükseklik en uzununa göre sabit (geçişte aşağısı kaymaz) */
.vv-caps { display: grid; padding-left: 25px; }
.vv-cap { grid-area: 1 / 1; visibility: hidden; }
.vv-cap.is-on { visibility: visible; }
.vv-cap-t { display: none; }
.vv .vv-read.v2-btn.v2-btn > span { display: inline; }

/* ---------- Telefon / tablet (< 1024) ---------- */
@media (max-width: 1023px) {
  .vv-grid { grid-template-columns: minmax(0, 1fr); grid-template-areas: "head" "tabs" "stage" "foot"; grid-template-rows: none; }
  .vv .vv-head.section-head { margin-bottom: 32px; }
  /* Çipler: yatay kaydırılır; kenarlara taşar (sayfa taşmaz: negatif boşluk = kapsayıcı kenar payı) */
  .vv-tabs {
    flex-direction: row; gap: 8px; margin: 0 calc(var(--gutter) * -1) 16px; padding: 2px var(--gutter); border-left: 0;
    overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: var(--gutter); scrollbar-width: none; overscroll-behavior-x: contain;
  }
  .vv-tabs::-webkit-scrollbar { display: none; }
  .vv-tab {
    flex: none; display: flex; justify-content: center; width: auto; min-width: 104px; min-height: 48px; padding: 0 20px;
    border: 1px solid var(--vv-line); border-radius: 999px; background: var(--wa-beyaz); scroll-snap-align: start;
    transition: border-color 0.25s ease;
  }
  .vv-tab::before { display: none; }
  .vv-tab[aria-selected="true"] { border-color: var(--wa-mor-40); }
  .vv-tab:focus-visible { outline-offset: 2px; border-radius: 999px; }
  .vv-tab-logo { height: 24px; }
  .vv-tab-img { max-width: 80px; max-height: 20px; }
  .vv-tab-t { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .vv-prog { left: 20px; right: 20px; bottom: 6px; }
  .vv-stage { padding: clamp(24px, 5vw, 48px) clamp(12px, 4vw, 40px); border-radius: 20px; }
  .vv-foot { margin-top: 20px; gap: 16px; }
  .vv-caps { padding-left: 0; }
  .vv-cap-t { display: block; margin: 0; font-size: 18px; font-weight: 600; line-height: 1.35; letter-spacing: -0.015em; color: var(--wa-mor-90); text-wrap: balance; }
  .vv-read.v2-btn.v2-btn { margin-top: 2px; }
}
@media (max-width: 720px) {
  .vv-foot .vv-cta.v2-btn.v2-btn { width: 100%; min-height: 52px; white-space: normal; text-align: center; line-height: 1.3; padding-top: 9px; padding-bottom: 9px; }
}

@media (prefers-reduced-motion: reduce) {
  html:not(.hv2-motion) .vv :is(.vv-pane, .vv-pane.is-on, .vv-tab, .vv-tab-logo, .vv-tab-t, .vv-prog, .vv-page, .vv-blank) { transition: none; }
  html:not(.hv2-motion) .vv .vv-tab::before { transition: none; }
  html:not(.hv2-motion) .vv :is(.vv-page, .vv-blank) { scale: 1; }
}