/* Vitrin sayfası — sitenin v2 belirteçlerini (--bg, --surface, --line, --text, --acc …) kullanır;
   açık/koyu tema styles.css'teki [data-theme] kurallarından gelir. */

.vt-hero { padding: clamp(110px, 14vw, 160px) 0 clamp(40px, 6vw, 72px); position: relative; overflow: hidden; }
.vt-hero::before { content: ""; position: absolute; inset: -20% -10% auto; height: 80%; pointer-events: none;
  background: radial-gradient(50% 60% at 50% 0%, var(--acc-faint), transparent 70%); }
.vt-hero-ust { max-width: 820px; margin: 0 auto 36px; text-align: center; }
.vt-hero-ust h1 { font-family: var(--f-disp); font-size: clamp(36px, 6vw, 72px); line-height: 1.02; letter-spacing: -0.035em; margin: 16px 0 18px; }
.vt-hero-ust p { color: var(--text-dim); font-size: clamp(16px, 1.8vw, 19px); text-wrap: pretty; margin: 0 auto; max-width: 640px; }
.vt-film { max-width: 1180px; margin: 0 auto; }
.vt-ozet { list-style: none; padding: 0; margin: 28px auto 0; max-width: 1180px; display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.vt-ozet li { padding: 16px 18px; border: 1px solid var(--line-soft); border-radius: 14px; background: var(--surface); }
.vt-ozet b { display: block; font-family: var(--f-disp); font-size: 22px; letter-spacing: -0.02em; color: var(--text); }
.vt-ozet span { display: block; margin-top: 4px; font-size: 14px; color: var(--text-dim); }
@media (max-width: 760px) { .vt-ozet { grid-template-columns: repeat(2, 1fr); } }

/* süzgeç */
.vt-filtre { display: flex; flex-wrap: wrap; gap: 8px; margin: 28px 0 26px; }
.vt-cip { display: inline-flex; align-items: center; gap: 8px; padding: 9px 14px; border-radius: 999px; border: 1px solid var(--line);
  background: var(--surface); color: var(--text-dim); font: 600 14px/1 var(--f-body); cursor: pointer; transition: border-color .15s, color .15s, background .15s; }
.vt-cip small { font: 600 12px/1 var(--f-mono); color: var(--text-mute); }
.vt-cip:hover { color: var(--text); border-color: var(--acc-line); }
.vt-cip[aria-pressed="true"] { background: var(--acc); border-color: var(--acc); color: var(--acc-ink, #04110a); }
.vt-cip[aria-pressed="true"] small { color: inherit; opacity: .7; }
.vt-cip:focus-visible, .vt-kart-dugme:focus-visible, .vt-kapat:focus-visible { outline: 3px solid var(--acc); outline-offset: 3px; }

/* ızgara ve kartlar */
.vt-izgara { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 340px), 1fr)); gap: 18px; }
.vt-kart[hidden] { display: none; }
.vt-gir .vt-kart { opacity: 0; transform: translateY(18px); transition: opacity .6s cubic-bezier(.2,.8,.2,1) var(--g, 0ms), transform .6s cubic-bezier(.2,.8,.2,1) var(--g, 0ms); }
.vt-gir .vt-kart.in { opacity: 1; transform: none; }
.vt-kart-dugme { display: flex; flex-direction: column; width: 100%; height: 100%; padding: 0; text-align: left; cursor: zoom-in; color: inherit; font: inherit;
  background: var(--surface); border: 1px solid var(--line-soft); border-radius: 18px; overflow: hidden; transition: border-color .2s, transform .2s, box-shadow .2s; }
.vt-kart-dugme:hover { border-color: var(--acc-line); transform: translateY(-3px); box-shadow: 0 24px 50px rgba(0, 0, 0, .18); }
.vt-sahne { position: relative; display: block; aspect-ratio: 16 / 11; overflow: hidden;
  background: radial-gradient(80% 90% at 30% 0%, var(--acc-faint), transparent 70%), var(--bg); border-bottom: 1px solid var(--line-soft); }
.vt-tar { position: absolute; left: 6%; top: 9%; width: 84%; border-radius: 10px; overflow: hidden; border: 1px solid var(--line); background: var(--surface);
  box-shadow: 0 18px 40px rgba(0, 0, 0, .25); transition: transform .35s cubic-bezier(.2,.8,.2,1); }
.vt-tar-bar { display: flex; gap: 5px; padding: 7px 9px; background: var(--surface); border-bottom: 1px solid var(--line-soft); }
.vt-tar-bar i { width: 7px; height: 7px; border-radius: 50%; background: var(--line); }
.vt-tar img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 10; object-fit: cover; object-position: top left; }
.vt-tel { position: absolute; right: 5%; bottom: -18%; width: 27%; aspect-ratio: .485; padding: 2.2%; border-radius: 18% / 8.5%; background: linear-gradient(150deg, #39414c, #161a20 45%, #2a3039);
  box-shadow: 0 20px 40px rgba(0, 0, 0, .35); transition: transform .35s cubic-bezier(.2,.8,.2,1); }
.vt-tel img { display: block; width: 100%; height: 100%; border-radius: 15% / 7%; object-fit: cover; object-position: top; background: var(--bg); }
.vt-sahne.tel-sahne .vt-tel { right: auto; left: 50%; margin-left: -18%; width: 36%; bottom: -30%; }
.vt-sahne.web-sahne .vt-tar { left: 6%; top: 10%; width: 88%; }
.vt-kart-dugme:hover .vt-tar { transform: translateY(-4px) scale(1.015); }
.vt-kart-dugme:hover .vt-tel { transform: translateY(-14px) rotate(-2deg); }
.vt-kart-yazi { display: flex; flex-direction: column; gap: 6px; padding: 16px 18px 20px; }
.vt-kart-yazi b { font-family: var(--f-disp); font-size: 20px; letter-spacing: -0.015em; color: var(--text); }
.vt-kart-yazi > span:last-child { color: var(--text-dim); font-size: 15px; line-height: 1.45; }
.vt-kat { font: 600 11px/1 var(--f-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--acc); }

/* büyük görünüm */
.vt-buyuk { margin: auto; width: min(1240px, calc(100vw - 32px)); max-height: calc(100dvh - 32px); padding: 0; border: 1px solid var(--line); border-radius: 20px;
  background: var(--surface); color: var(--text); box-shadow: 0 40px 120px rgba(0, 0, 0, .5); }
.vt-buyuk::backdrop { background: rgba(3, 6, 10, .72); backdrop-filter: blur(6px); }
.vt-buyuk-ic { display: flex; flex-direction: column; max-height: calc(100dvh - 34px); }
.vt-buyuk header { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; padding: 18px 20px 12px; }
.vt-buyuk h3 { margin: 6px 0 4px; font-family: var(--f-disp); font-size: clamp(20px, 2.4vw, 28px); letter-spacing: -0.02em; }
.vt-buyuk header p { margin: 0; color: var(--text-dim); font-size: 15px; }
.vt-buyuk-kat { font: 600 11px/1 var(--f-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--acc); }
.vt-kapat { flex: none; width: 40px; height: 40px; display: grid; place-items: center; border-radius: 50%; border: 1px solid var(--line); background: var(--bg); color: var(--text); cursor: pointer; }
.vt-kapat svg { width: 18px; height: 18px; }
.vt-buyuk-gorsel { flex: 1; min-height: 0; overflow: auto; display: grid; grid-template-columns: 1fr minmax(160px, 24%); gap: 16px; padding: 4px 20px 12px; align-items: start; }
.vt-buyuk-gorsel.tek { grid-template-columns: 1fr; justify-items: center; }
.vt-buyuk-gorsel.tek .vt-b-tel { width: min(340px, 80%); }
.vt-buyuk figure { margin: 0; }
.vt-buyuk figure img { display: block; width: 100%; height: auto; border-radius: 12px; border: 1px solid var(--line); }
.vt-buyuk figcaption { margin-top: 8px; font-size: 13px; color: var(--text-mute); text-align: center; }
.vt-buyuk footer { display: flex; justify-content: space-between; align-items: center; padding: 12px 20px 18px; border-top: 1px solid var(--line-soft); color: var(--text-dim); font: 600 13px/1 var(--f-mono); }
@media (max-width: 700px) { .vt-buyuk-gorsel { grid-template-columns: 1fr; } .vt-b-tel { width: 70%; margin: 0 auto !important; } }

/* koyu / açık karşılaştırma */
.vt-tema .sec-head { margin-bottom: 30px; }
.vt-karsi { position: relative; border-radius: 18px; overflow: hidden; border: 1px solid var(--line); box-shadow: 0 30px 80px rgba(0, 0, 0, .22); --k: 50%; aspect-ratio: 16 / 10; }
.vt-karsi img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: top left; display: block; }
.vt-karsi-ust { position: absolute; inset: 0; clip-path: inset(0 calc(100% - var(--k)) 0 0); }
.vt-karsi-cizgi { position: absolute; top: 0; bottom: 0; left: var(--k); width: 3px; margin-left: -1.5px; background: #3ee08f; pointer-events: none; }
.vt-karsi-cizgi i { position: absolute; top: 50%; left: 50%; width: 44px; height: 44px; margin: -22px 0 0 -22px; border-radius: 50%; background: #3ee08f;
  box-shadow: 0 0 0 6px rgba(62, 224, 143, .25), 0 10px 30px rgba(0, 0, 0, .35); }
.vt-karsi-cizgi i::before, .vt-karsi-cizgi i::after { content: ""; position: absolute; top: 50%; margin-top: -6px; border: 6px solid transparent; }
.vt-karsi-cizgi i::before { left: 7px; border-right-color: #04110a; }
.vt-karsi-cizgi i::after { right: 7px; border-left-color: #04110a; }
.vt-karsi-et { position: absolute; bottom: 14px; padding: 6px 12px; border-radius: 999px; font: 600 12px/1 var(--f-mono); letter-spacing: .1em; text-transform: uppercase; pointer-events: none; }
.vt-karsi-et.sol { left: 14px; background: rgba(6, 8, 12, .8); color: #e6edf3; }
.vt-karsi-et.sag { right: 14px; background: rgba(255, 255, 255, .9); color: #0f172a; }
.vt-karsi input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: ew-resize; }
.vt-karsi input:focus-visible + .vt-karsi-cizgi, .vt-karsi:focus-within .vt-karsi-cizgi i { outline: 3px solid #3ee08f; outline-offset: 4px; }

@media (prefers-reduced-motion: reduce) {
  .vt-gir .vt-kart, .vt-kart-dugme, .vt-tar, .vt-tel { transition: none; }
  .vt-kart-dugme:hover, .vt-kart-dugme:hover .vt-tar, .vt-kart-dugme:hover .vt-tel { transform: none; }
}