/* ════════════════════════════════════════════════════════════════════════
   KONSEPTSOFT SATIŞ VİTRİNİ — Cunnet tasarım dili uyarlaması
   Yalnız vitrin host'unda yüklenir; kiracı temalarıyla HİÇBİR paylaşım yok.
   Renk/tipografi token'ları burada tanımlıdır (spec §4).
   ════════════════════════════════════════════════════════════════════════ */

:root {
  --vt-aksan: #BE1E2D;
  --vt-aksan-parlak: #e0293a;
  --vt-koyu: #141414;
  --vt-koyu-2: #1c1c1e;
  --vt-koyu-cizgi: rgba(255, 255, 255, .12);
  --vt-acik: #f5f5f6;
  --vt-beyaz: #ffffff;
  --vt-metin: #16181d;
  --vt-metin-soluk: #5c6066;
  --vt-acik-cizgi: #e4e4e7;
  --vt-hero-grad: radial-gradient(120% 130% at 50% -20%, #7a0e18 0%, #3a060c 48%, #150507 100%);
  --vt-final-grad: radial-gradient(110% 120% at 50% 115%, #7a0e18 0%, #2c0509 55%, #150507 100%);
  --vt-radius: 18px;
  --vt-radius-buyuk: 26px;
  --vt-radius-hap: 999px;
  --vt-font: "Urbanist", sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  font-family: var(--vt-font);
  font-size: 1rem;
  line-height: 1.6;
  color: var(--vt-metin);
  background: var(--vt-beyaz);
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }

/* ── Cila: odak, seçim, dokunma ─────────────────────────────────────── */
/* Klavye odağı her zaman görünür; fare tıklamasında halka çıkmaz */
:focus-visible {
  outline: 2px solid var(--vt-aksan-parlak);
  outline-offset: 3px;
  border-radius: 4px;
}
.vt-hero :focus-visible, .vt-final :focus-visible,
.vt-bolum--koyu :focus-visible, .tp-inn-govde :focus-visible { outline-color: #fff; }
::selection { background: var(--vt-aksan-parlak); color: #fff; }
/* Mobilde dokunuşta gri kutu yerine markanın kendi vurgusu */
a, button, summary { -webkit-tap-highlight-color: rgba(224, 41, 58, .18); }
/* Sticky nav bölüm başlığını örtmesin (#fiyat, #temalar bağlantıları) */
[id] { scroll-margin-top: 116px; }

.vt-wrap { max-width: 1430px; margin: 0 auto; padding: 0 24px; }
/* Cunnet container-1620 / container-1230 karşılıkları — yan dolgu hariç iç
   genişlik hedef değere eşit olsun (1230 içinde 5×224 kart sığar). */
.vt-wrap--genis { max-width: 1668px; }
.vt-wrap--dar { max-width: 1278px; }

/* Erişilebilirlik: içeriğe atla */
.vt-atla {
  position: absolute; left: -9999px; top: 0;
  background: var(--vt-beyaz); color: var(--vt-metin);
  padding: 10px 18px; border-radius: 0 0 10px 0; z-index: 3000;
}
.vt-atla:focus { left: 0; }

/* ── Tipografi dili ─────────────────────────────────────────────────── */
.vt-kicker {
  display: inline-block;
  margin: 0 0 18px;
  font-size: .8rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--vt-aksan-parlak);
}
.vt-dev {
  margin: 0 0 22px;
  font-size: clamp(2.2rem, 5.2vw, 4.4rem);
  font-weight: 800;
  line-height: 1.04;
  letter-spacing: -.03em;
  text-transform: uppercase;
}
.vt-dev em { font-style: normal; color: var(--vt-aksan-parlak); }
.vt-alt-metin {
  margin: 0;
  max-width: 560px;
  font-size: 1.06rem;
  color: var(--vt-metin-soluk);
}
.vt-bolum--koyu .vt-alt-metin, .vt-hero .vt-alt-metin, .vt-final .vt-alt-metin { color: rgba(255, 255, 255, .66); }

/* ── Butonlar / haplar ──────────────────────────────────────────────── */
.vt-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 52px;
  padding: 14px 30px;
  border: 0;
  border-radius: 12px;
  font-family: inherit;
  font-size: 1rem;
  font-weight: 700;
  text-decoration: none;
  cursor: pointer;
  transition: transform .2s ease, background-color .2s, color .2s, border-color .2s;
}
.vt-cta:hover { transform: translateY(-2px); }
.vt-cta--kirmizi { background: var(--vt-aksan-parlak); color: #fff; }
.vt-cta--kirmizi:hover { background: var(--vt-aksan); color: #fff; }
.vt-cta--beyaz { background: #fff; color: var(--vt-metin); }
.vt-cta--hayalet { background: transparent; color: #fff; border: 1px solid rgba(255, 255, 255, .35); }
.vt-cta--hayalet:hover { border-color: #fff; color: #fff; }
.vt-cta--hap { border-radius: var(--vt-radius-hap); }

.vt-hap {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 20px;
  border-radius: var(--vt-radius-hap);
  border: 1px solid var(--vt-koyu-cizgi);
  background: rgba(255, 255, 255, .04);
  color: rgba(255, 255, 255, .88);
  font-size: .92rem;
  font-weight: 600;
  white-space: nowrap;
}
.vt-bolum--acik .vt-hap {
  border-color: var(--vt-acik-cizgi);
  background: #fff;
  color: var(--vt-metin);
}

/* ── Bölüm iskeleti ─────────────────────────────────────────────────── */
.vt-bolum { padding: 120px 0; }
.vt-bolum--acik { background: var(--vt-acik); }
.vt-bolum--beyaz { background: var(--vt-beyaz); }
.vt-bolum--koyu { background: var(--vt-koyu); color: #fff; }
.vt-bolum--koyu2 { background: var(--vt-koyu-2); color: #fff; }
.vt-bolum-bas { max-width: 780px; margin-bottom: 56px; }

/* ── NAV ────────────────────────────────────────────────────────────── */
.vt-nav {
  position: sticky;
  top: 0;
  z-index: 1000;
  background: rgba(21, 5, 7, .82);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid rgba(255, 255, 255, .08);
}
/* Satış sayfası: nav hero degradesinin ÜSTÜNDE şeffaf yüzer (Cunnet imzası).
   Yalnız koyu hero'lu sayfada açılır (ViewData["NavSeffaf"]) — açık zeminli iç
   sayfalarda beyaz linkler okunmaz olurdu. */
.vt-nav--seffaf {
  position: absolute;
  left: 0;
  right: 0;
  background: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border-bottom: 0;
}
.vt-nav-ic {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  min-height: 100px; /* 75px logo + nefes payı */
}
.vt-nav-logo { display: inline-flex; align-items: center; text-decoration: none; }
.vt-nav-logo img { height: 75px; width: auto; }
.vt-nav-linkler { display: flex; align-items: center; gap: 34px; }
.vt-nav-linkler a {
  display: inline-flex;
  align-items: center;
  min-height: 44px; /* dokunma hedefi */
  font-size: .95rem;
  font-weight: 600;
  color: rgba(255, 255, 255, .85);
  text-decoration: none;
  transition: color .2s;
}
.vt-nav-linkler a:hover { color: #fff; }
.vt-nav-cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 46px;
  padding: 11px 24px;
  border-radius: var(--vt-radius-hap);
  background: #fff;
  color: var(--vt-metin);
  font-weight: 700;
  font-size: .95rem;
  text-decoration: none;
  transition: transform .2s;
}
.vt-nav-cta:hover { transform: translateY(-1px); }
/* Panel içi CTA yalnız mobil menüde görünür (masaüstünde bardaki tekil CTA kalır) */
@media (min-width: 900px) { .vt-nav-linkler .vt-nav-cta { display: none; } }

.vt-nav-burger {
  display: none;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  border: 1px solid rgba(255, 255, 255, .3);
  border-radius: 10px;
  background: none;
  color: #fff;
  font-size: 22px;
  cursor: pointer;
}
@media (max-width: 899.98px) {
  .vt-nav-linkler {
    position: fixed;
    inset: 76px 0 auto 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 10px 24px 26px;
    background: #150507;
    border-bottom: 1px solid rgba(255, 255, 255, .12);
    display: none;
  }
  .vt-nav-linkler.acik { display: flex; }
  .vt-nav-linkler a { padding: 15px 4px; border-bottom: 1px solid rgba(255, 255, 255, .08); }
  .vt-nav-cta { display: none; }
  .vt-nav-linkler .vt-nav-cta {
    display: inline-flex; justify-content: center; margin-top: 16px; border-bottom: 0;
  }
  .vt-nav-burger { display: inline-flex; }
}

/* ── HERO ───────────────────────────────────────────────────────────── */
.vt-hero {
  position: relative;
  background: var(--vt-hero-grad);
  color: #fff;
  padding: 180px 0 0; /* şeffaf-absolute nav (~100px) hero'nun üstünde yüzer */
  overflow: hidden;
  text-align: center;
}
.vt-rozet {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 30px;
  padding: 9px 22px;
  border: 1px solid rgba(255, 255, 255, .25);
  border-radius: var(--vt-radius-hap);
  font-size: .88rem;
  font-weight: 600;
  color: rgba(255, 255, 255, .85);
}
.vt-hero h1 {
  margin: 0 auto 24px;
  max-width: 900px;
  font-size: clamp(2.6rem, 6.5vw, 5rem);
  font-weight: 800;
  line-height: 1.03;
  letter-spacing: -.03em;
}
.vt-hero .vt-alt-metin { margin: 0 auto 34px; max-width: 640px; }
.vt-hero-cta { display: flex; justify-content: center; gap: 14px; flex-wrap: wrap; margin-bottom: 18px; }
.vt-hero-not { font-size: .88rem; color: rgba(255, 255, 255, .55); margin: 0 0 46px; }

.vt-ikon-satir {
  display: flex;
  justify-content: center;
  gap: 28px;
  flex-wrap: nowrap; /* 4 özellik TEK sırada yan yana (mobilde aşağıda sarar) */
  margin: 0 auto 70px;
  padding: 0;
  list-style: none;
  max-width: 1280px;
}
.vt-ikon-satir li { display: flex; align-items: flex-start; gap: 12px; text-align: left; flex: 1 1 0; min-width: 0; color: #fff; }
@media (max-width: 899.98px) {
  .vt-ikon-satir { flex-wrap: wrap; }
  .vt-ikon-satir li { flex: 1 1 100%; max-width: 420px; margin-inline: auto; }
}
.vt-ikon-satir .ikon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  flex: 0 0 auto;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, .3);
  color: #fff;
}
.vt-ikon-satir b { display: block; font-size: .98rem; color: #fff; }
.vt-ikon-satir span { font-size: .82rem; color: #fff; }

/* Kolaj: 7'li mockup YELPAZESİ (Cunnet birebir) — merkez kart büyük ve önde,
   kenarlara doğru kartlar küçülür, alçalır ve bir altta kalan kartın üstüne biner;
   dışa taşan alt kenarlar hero'nun overflow'unda kırpılır. */
/* ── Hero kolajı: Cunnet main.css'ten BİREBİR (tp-hero-inner-img-*) ──
   Mekanizma: kartların ALTLARI hizalı (align-items: flex-end), merdiven etkisi
   görsellerin kendi yükseklik farkından gelir (194×100 → 520×273 önceden
   boyutlanmış kartlar); yanlar translateX ile içeri çekilip bindirilir. */
.tp-hero-inner-img-wrap {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  margin-top: 10px;
}
.tp-hero-inner-img img {
  max-width: inherit;
  border-radius: 10px 10px 0 0;
  filter: drop-shadow(-20px 10px 40px rgba(0, 0, 0, 0.34));
}
.tp-hero-inner-img.img-1 { transform: translateX(370px); }
.tp-hero-inner-img.img-2 { transform: translateX(300px); }
.tp-hero-inner-img.img-3 { transform: translateX(180px); }
.tp-hero-inner-img.img-4 { position: relative; z-index: 9; }
.tp-hero-inner-img.img-5 { transform: translateX(-180px); position: relative; z-index: 2; }
.tp-hero-inner-img.img-6 { position: relative; z-index: 1; transform: translateX(-330px); }
.tp-hero-inner-img.img-7 { transform: translateX(-370px); }
@media (max-width: 767px) {
  .tp-hero-inner-img.img-4 { width: 100%; }
  .tp-hero-inner-img.img-4 img { max-width: 100%; height: auto; }
}

/* ── MARQUEE şeritleri ──────────────────────────────────────────────── */
/* Kırmızı metin şeridi — Cunnet main.css birebir (tp-text-slider):
   üstte kalınlaşan SVG çizgiler + bant; kırmızı = --vt-aksan-parlak. */
.tp-text-slider-shape { margin-bottom: -6px; }
.tp-text-slider-shape svg { display: block; width: 100%; height: auto; }
.tp-text-slider-shape rect { fill: var(--vt-aksan-parlak); }
.tp-text-slider-wrapper {
  padding: 32px 0;
  background: var(--vt-aksan-parlak);
  display: flex;
  overflow: hidden;
}
.tp-text-slider-title, .vt-marquee-ic.tp-text-slider-title {
  font-size: 54px;
  font-weight: 700;
  color: #F6F6F6;
  letter-spacing: 0.54px;
  text-transform: uppercase;
}
@media (max-width: 1199.98px) {
  .tp-text-slider-title, .vt-marquee-ic.tp-text-slider-title { font-size: 44px; }
}

.vt-marquee-sarma { overflow: hidden; }
.vt-marquee {
  display: flex;
  gap: 0;
  overflow: hidden;
  background: var(--vt-aksan-parlak);
  color: #fff;
  padding: 18px 0;
}
.vt-marquee--beyaz { background: #fff; color: var(--vt-metin); }
.vt-marquee-ic {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 48px;
  padding-right: 48px;
  white-space: nowrap;
  font-size: clamp(1.6rem, 3.4vw, 2.6rem);
  font-weight: 800;
  letter-spacing: -.02em;
  text-transform: uppercase;
  animation: vt-kaydir 26s linear infinite;
}
.vt-marquee--beyaz .vt-marquee-ic { font-size: clamp(1.1rem, 2vw, 1.5rem); animation-duration: 30s; }
@keyframes vt-kaydir { to { transform: translateX(-100%); } }
@media (prefers-reduced-motion: reduce) { .vt-marquee-ic { animation: none; } }

/* ── SAYAÇ (tema sayısı) — Cunnet main.css tp-demo-heading birebir ──── */
.p-relative { position: relative; }
.tp-demo-heading-row { display: grid; grid-template-columns: 7fr 5fr; }
.tp-section-subtitle {
  font-size: 16px;
  font-weight: 600;
  display: inline-block;
  margin-bottom: 20px;
  letter-spacing: -0.078px;
  text-transform: uppercase;
  color: var(--vt-aksan-parlak);
}
.tp-section-title {
  margin: 0;
  font-size: 68px;
  font-weight: 800;
  line-height: 106%;
  letter-spacing: -0.02em;
  text-transform: uppercase;
  color: #1e1e1e;
}
.tp-section-title span, .tp-section-title em { position: relative; color: var(--vt-aksan-parlak); font-style: normal; }
.tp-demo-title-box { padding-left: 250px; margin-bottom: 60px; }
.tp-demo-title-home {
  position: relative;
  font-size: 240px;
  font-style: italic;
  font-weight: 800;
  line-height: 1;
  text-align: end;
  letter-spacing: -0.02em;
  color: var(--vt-aksan-parlak);
}
/* swoosh.svg — skew ile kaynaktaki eğik duruştan düz görünüme çekilir */
.tp-demo-title-home span {
  right: -10px;
  bottom: -65px;
  position: absolute;
  transform: skew(-50deg, 15deg);
}
.tp-demo-heading-right { margin-bottom: 50px; padding-left: 100px; padding-top: 200px; }
.tp-demo-heading-right-shape { top: 50%; left: -20px; position: absolute; }
.tp-demo-ff-marck {
  font-size: 24px;
  font-weight: 400;
  margin-bottom: 60px;
  display: inline-block;
  color: #1e1e1e;
}
.tp-demo-right-text {
  font-size: 24px;
  font-weight: 500;
  line-height: 1.2;
  margin: 0 0 34px;
  letter-spacing: -0.72px;
  color: #1e1e1e;
}
.tp-demo-right-text span { color: #686868; }
.tp-demo-heading-feature-wrap {
  display: inline-flex;
  gap: 22px;
  padding: 5px 2px;
  border-top: 1px solid rgba(30, 30, 30, 0.08);
  border-bottom: 1px solid rgba(30, 30, 30, 0.08);
}
.tp-demo-heading-feature {
  font-size: 14px;
  font-weight: 600;
  color: #464646;
  letter-spacing: -0.2px;
  text-transform: uppercase;
}
.tp-demo-heading-feature span { margin-right: 5px; display: inline-block; transform: translateY(-2px); color: var(--vt-aksan-parlak); }
.tp-demo-heading-feature-wrap .tp-demo-heading-feature:not(:last-of-type) {
  padding-right: 20px;
  border-right: 1px solid rgba(30, 30, 30, 0.08);
}
@media (max-width: 1399.98px) {
  .tp-section-title { font-size: 60px; }
  .tp-demo-title-home { font-size: 225px; }
  .tp-demo-title-box { padding-left: 220px; }
  .tp-demo-heading-right { padding-left: 72px; }
}
@media (max-width: 1199.98px) {
  .tp-section-title { font-size: 50px; }
  .tp-demo-title-home { font-size: 174px; }
  .tp-demo-title-box { padding-left: 0; }
}
@media (max-width: 899.98px) {
  .tp-demo-heading-row { grid-template-columns: 1fr; }
  .tp-section-title { font-size: 45px; }
  .tp-demo-heading-right { padding-left: 0; padding-top: 40px; }
  .tp-demo-heading-right-shape { display: none; }
  .tp-demo-title-home span { right: auto; left: 20px; }
  .tp-demo-ff-marck { margin-bottom: 20px; }
}

/* ── TEMA GALERİSİ — Cunnet tp-demo-item birebir ────────────────────── */
.tp-demo-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0 24px;
  margin-top: 40px;
}
.tp-demo-item { margin-bottom: 40px; }
.tp-demo-item > a { display: block; text-decoration: none; color: inherit; }
.tp-demo-thumb { position: relative; overflow: hidden; border-radius: 16px; }
.tp-demo-thumb img { border-radius: 16px; transition: 0.9s; width: 100%; }
.tp-demo-item:hover .tp-demo-thumb img { transform: scale(1.1); }
.tp-demo-content-wrap { padding: 25px 15px 5px; text-align: center; }
.tp-demo-title {
  font-size: 18px;
  font-weight: 600;
  line-height: 1.2;
  margin: 0;
  letter-spacing: -1px;
  color: #1e1e1e;
}
.tp-demo-title span {
  font-size: 12px;
  font-weight: 700;
  margin-left: 4px;
  padding: 3px 6px;
  letter-spacing: 0;
  border-radius: 4px;
  display: inline-block;
  text-transform: uppercase;
  color: #fff;
  background: #1e1e1e;
  transform: translateY(-2px);
}
.tp-demo-title span.dahil { background: #157347; }
/* "Bu Tema Yakında" kartları: blurlu görsel + ortada beyaz rozet */
.tp-demo-item--yakinda .tp-demo-thumb img { filter: blur(7px); transform: scale(1.06); }
.tp-demo-item--yakinda:hover .tp-demo-thumb img { transform: scale(1.06); }
.tp-demo-yakinda-rozet {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
}
.tp-demo-yakinda-rozet span {
  padding: 10px 24px;
  border-radius: 42px;
  border: 1px solid #fff;
  background: #fff;
  color: #0E0F11;
  font-size: 14px;
  font-weight: 600;
  box-shadow: 0 14px 14px rgba(0, 0, 0, .2);
}
.vt-tema-bos {
  display: flex; align-items: center; justify-content: center;
  aspect-ratio: 1092 / 800;
  border-radius: 16px;
  background: linear-gradient(150deg, #2a2a2e, #131315);
  color: #fff; font-size: 3rem; font-weight: 800;
}
.vt-tema-daha { text-align: center; margin-top: 20px; }
@media (max-width: 1099.98px) { .tp-demo-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 639.98px)  { .tp-demo-grid { grid-template-columns: 1fr; } }

/* ── İÇ SAYFA ALANI — Cunnet main.css tp-inn-ptb birebir ────────────── */
/* Üst/alt geçiş çizgileri: rect rengi gövdeyle (üst) ya da bantla (alt)
   birebir aynı — çizgiler bölüme "büyüyerek" bağlanır. */
.tp-inn-top-shape { margin-bottom: -6px; }
.tp-inn-top-shape svg, .tp-inn-bottom-shape svg { display: block; width: 100%; height: auto; }
.tp-inn-top-shape rect { fill: var(--vt-koyu); }
.tp-inn-govde { background: var(--vt-koyu); padding-top: 160px; }
.tp-inn-heading-row { display: grid; grid-template-columns: 1fr 1fr; gap: 0 30px; }
.tp-inn-heading-wrap { margin-bottom: 80px; }
.tp-inn-heading-wrap .tp-section-title { color: #fff; }
.tp-inn-heading-wrap .tp-demo-title-home { font-style: normal; }
.tp-inn-heading-right { margin-bottom: 80px; padding-top: 175px; }
/* Kıvrık ok + okun gösterdiği kısa üst not aynı satırda */
.tp-inn-shape-satir { display: flex; align-items: flex-start; gap: 20px; margin-bottom: 30px; }
.tp-inn-shape { flex: 0 0 auto; }
.tp-inn-ustnot {
  margin: 0;
  font-family: "Segoe Script", "Bradley Hand", cursive;
  font-size: 26px;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: #fff;
}
.tp-inn-heading-right-wrap { padding-left: 100px; }
.tp-inn-text p {
  margin: 0 0 35px;
  font-size: 20px;
  font-weight: 500;
  letter-spacing: -0.03em;
  color: #fff;
}
/* Cunnet tp-btn — hover'da text-1 yukarı kayar, text-2 alttan gelir */
.tp-btn {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-size: 24px;
  font-weight: 600;
  line-height: 1;
  border-radius: 8px;
  padding: 13px 44px;
  text-transform: uppercase;
  text-decoration: none;
  color: #fffeef;
  background-color: var(--vt-aksan-parlak);
}
.tp-btn > span { position: relative; z-index: 1; overflow: hidden; display: inline-block; }
.tp-btn span span { line-height: 1.3; display: block; transition: .3s; }
.tp-btn span span.text-1 { position: relative; }
.tp-btn span span.text-2 { position: absolute; top: 100%; }
.tp-btn:hover { color: #fff; }
.tp-btn:hover span span.text-1 { transform: translateY(-150%); }
.tp-btn:hover span span.text-2 { top: 50%; transform: translateY(-50%); }
/* Çift sıra görsel kaydırması — Cunnet swiper karşılığı (üst LTR, alt ters) */
.tp-inn-slider-wrapper { padding-bottom: 160px; overflow: hidden; }
.tp-inn-slide { display: flex; overflow: hidden; }
.tp-inn-slide + .tp-inn-slide { margin-top: 30px; }
.tp-inn-slide-ic {
  display: flex;
  flex: 0 0 auto;
  gap: 30px;
  padding-right: 30px;
  animation: vt-kaydir 46s linear infinite;
}
.tp-inn-slide--ters .tp-inn-slide-ic { animation-direction: reverse; }
@media (prefers-reduced-motion: reduce) { .tp-inn-slide-ic { animation: none; } }
.tp-inn-slider-thumb { flex: 0 0 auto; width: min(486px, 78vw); }
.tp-inn-slider-thumb img { width: 100%; border-radius: 12px; }
/* Alt bant (marquee-2 metni) + açık geçiş çizgileri */
.tp-inn-bottom-bg { padding: 25px 0 15px; background: #f6f6f6; }
.tp-inn-bottom-bg p {
  margin: 0;
  line-height: 1.2;
  font-size: 30px;
  font-weight: 600;
  color: var(--vt-aksan-parlak);
  text-align: center;
  text-transform: uppercase;
}
.tp-inn-bottom-shape { margin-top: -6px; }
.tp-inn-bottom-shape rect { fill: #f6f6f6; }
@media (max-width: 1399.98px) { .tp-inn-heading-right-wrap { padding-left: 0; } }
@media (max-width: 1199.98px) { .tp-inn-bottom-bg p { font-size: 34px; } }
@media (max-width: 899.98px) {
  .tp-inn-heading-row { grid-template-columns: 1fr; }
  .tp-inn-govde { padding-top: 90px; }
  .tp-inn-heading-wrap { margin-bottom: 40px; }
  .tp-inn-heading-right { padding-top: 0; margin-bottom: 60px; }
  .tp-inn-slider-wrapper { padding-bottom: 90px; }
}
@media (max-width: 639.98px) { .tp-inn-bottom-bg p { font-size: 20px; padding: 0 16px; } }

/* ── PLATFORM + BENTO ───────────────────────────────────────────────── */
.vt-platform-izgara {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 44px 70px;
  align-items: start;
  margin: 0 0 120px;
}
.vt-platform-ozellikler {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 30px 34px;
  margin: 0; padding: 0;
  list-style: none;
}
.vt-platform-ozellikler .ikon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 46px; height: 46px;
  border-radius: 50%;
  border: 1px solid #f0b9be;
  color: var(--vt-aksan-parlak);
  margin-bottom: 12px;
}
.vt-platform-ozellikler b { display: block; font-size: 1.02rem; margin-bottom: 4px; }
.vt-platform-ozellikler span { font-size: .9rem; color: var(--vt-metin-soluk); }
@media (max-width: 899.98px) {
  .vt-platform-izgara { grid-template-columns: 1fr; }
  .vt-platform-ozellikler { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 639.98px) { .vt-platform-ozellikler { grid-template-columns: 1fr; } }

.vt-bento {
  display: grid;
  grid-template-columns: 280px 1fr 280px; /* yan kartlar 280px genişlik; ortadaki kalan alana genişler */
  grid-template-rows: 260px 260px;        /* kart yüksekliği 260px; kırmızı iki sırayı kaplar */
  gap: 24px;
}
.vt-bento-kart {
  border-radius: var(--vt-radius);
  background: #fff;
  border: 1px solid var(--vt-acik-cizgi);
  padding: 28px;
  overflow: hidden;
}
.vt-bento-kart h3 { margin: 0 0 8px; font-size: 1.08rem; font-weight: 800; letter-spacing: -.01em; }
.vt-bento-kart p { margin: 0; font-size: .92rem; color: var(--vt-metin-soluk); }
.vt-bento-kart--kirmizi {
  grid-row: 1 / 3; grid-column: 2;
  display: flex; flex-direction: column; justify-content: flex-start; gap: 14px;
  background: linear-gradient(160deg, #e0293a, #7a0e18);
  border: 0; color: #fff; text-align: center;
  padding: 40px 34px 0;
}
.vt-bento-kart--kirmizi h3 { font-size: clamp(1.4rem, 2.4vw, 2rem); text-transform: uppercase; }
.vt-bento-kart--kirmizi p { color: rgba(255, 255, 255, .8); }
.vt-bento-kart--kirmizi img, .vt-bento-kart--kirmizi picture {
  border-radius: 10px 10px 0 0;
  margin: auto auto 0; /* yatay ortalı, kartın dibine yapışık (bottom 0) */
  box-shadow: 0 -14px 40px rgba(0, 0, 0, .3);
}
.vt-bento-kart--koyu { background: var(--vt-koyu); border: 0; color: #fff; }
.vt-bento-kart--koyu p { color: rgba(255, 255, 255, .6); }
.vt-bento-kart--bej { background: #f6efe4; border: 0; }

/* Görselli bento kartı: görsel kartın TAMAMINI kaplar, yazı (varsa) üstüne biner */
.vt-bento-kart--gorselli { position: relative; min-height: 240px; }
.vt-bento-kart--gorselli .vt-bento-zemin {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  margin: 0;
  border-radius: 0;
  box-shadow: none;
}
/* Yazı okunsun diye üstten karartma — yazı yoksa karartma da yok */
.vt-bento-kart--gorselli::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(10, 10, 12, .6), rgba(10, 10, 12, .1) 70%);
  pointer-events: none;
}
.vt-bento-kart--gorselli:not(:has(h3)):not(:has(p))::after { display: none; }
.vt-bento-kart--gorselli h3, .vt-bento-kart--gorselli p { position: relative; z-index: 1; }
.vt-bento-kart--gorselli h3 { color: #fff; }
.vt-bento-kart--gorselli p { color: rgba(255, 255, 255, .85); }
@media (max-width: 899.98px) {
  .vt-bento { grid-template-columns: 1fr 1fr; grid-template-rows: none; }
  .vt-bento-kart--kirmizi { grid-row: auto; grid-column: 1 / -1; order: -1; }
}
@media (max-width: 639.98px) { .vt-bento { grid-template-columns: 1fr; } }

/* ── MODÜLLER — Cunnet main.css tp-elements-ptb birebir ─────────────── */
.tp-elements-ptb { padding: 140px 0; background: var(--vt-koyu-2); color: #fff; overflow: hidden; }
.tp-elements-row { display: grid; grid-template-columns: 1fr 1fr; gap: 0 30px; align-items: start; }
.tp-elements-left-side { display: flex; align-items: center; gap: 90px; margin-bottom: 85px; }
.tp-elements-left-side .tp-demo-title-home { font-style: normal; }
.tp-elements-shape { flex: 0 0 auto; color: #fff; text-align: center; }
.tp-elements-shape svg { display: block; margin: 0 auto 12px; }
.tp-elements-shape > span {
  display: inline-block;
  font-family: "Segoe Script", "Bradley Hand", cursive;
  font-size: 19px;
  line-height: 1.35;
}
.tp-elements-right-side { padding-top: 30px; margin-bottom: 55px; padding-left: 70px; }
.tp-elements-right-side .tp-section-title { color: #fff; font-size: 60px; line-height: 0.9; }
.tp-elements-right-text p {
  margin: 20px 0 0;
  max-width: 480px;
  font-size: 18px;
  font-weight: 500;
  letter-spacing: -0.45px;
  color: rgba(255, 255, 255, 0.5);
}
/* 3 sıra hap kaydırması — Cunnet swiper karşılığı; 2. sıra ters, 2-3. sıra soluk */
.tp-eleman-satir { display: flex; overflow: hidden; margin-bottom: 20px; }
.tp-eleman-satir-ic {
  display: flex;
  flex: 0 0 auto;
  gap: 20px;
  padding-right: 20px;
  animation: vt-kaydir 55s linear infinite;
}
.tp-eleman-satir--ters .tp-eleman-satir-ic { animation-direction: reverse; }
@media (prefers-reduced-motion: reduce) { .tp-eleman-satir-ic { animation: none; } }
.tp-elements-slider-opacity { opacity: 0.5; }
.tp-elements-slider-opacity-2 { opacity: 0.7; }
.tp-feature-slide-element { flex: 0 0 auto; }
.tp-elements-slider-style .tp-feature-slide-element span {
  display: flex;
  align-items: center;
  height: 60px;
  padding: 0 32px;
  border-radius: 8px;
  font-weight: 500;
  font-size: 16px;
  letter-spacing: -0.32px;
  text-transform: capitalize;
  white-space: nowrap;
  color: rgba(255, 255, 255, 0.7);
  background: rgba(255, 255, 255, 0.1);
  box-shadow: 0 10px 10px -10px rgba(3, 4, 28, 0.12);
}
.tp-elements-slider-style .tp-feature-slide-element span svg { margin-right: 15px; flex: 0 0 auto; }
/* Ters satır pill'leri kaynakta dir=rtl için "yazı + ikon" sırasıyla yazılmış;
   row-reverse ile ikon yine solda durur (Cunnet görünümü). */
.tp-eleman-satir--ters .tp-feature-slide-element span { flex-direction: row-reverse; }
@media (max-width: 1399.98px) {
  .tp-elements-right-side .tp-section-title { font-size: 48px; }
  .tp-elements-left-side { gap: 60px; }
}
@media (max-width: 1199.98px) {
  .tp-elements-right-side { padding-left: 0; }
  .tp-elements-left-side { gap: 40px; }
}
@media (max-width: 899.98px) {
  .tp-elements-ptb { padding: 80px 0; }
  .tp-elements-row { grid-template-columns: 1fr; }
  .tp-elements-left-side { margin-bottom: 30px; }
  .tp-elements-right-side { padding-top: 0; margin-bottom: 40px; }
  .tp-elements-right-side .tp-section-title { font-size: 34px; }
}
@media (max-width: 639.98px) { .tp-elements-shape { display: none; } }

/* ── UYUMLU DÜZEN — Cunnet main.css tp-responsive-area birebir ──────── */
.tp-responsive-area { background: var(--vt-koyu-2); color: #fff; padding-bottom: 120px; }
.tp-responsive-row { display: grid; grid-template-columns: 1fr 1fr; gap: 40px 24px; }
.tp-responsive-layout-wrap {
  position: relative;
  overflow: hidden;
  border-radius: 30px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  padding-bottom: 480px;
}
.tp-responsive-layout-content { position: relative; z-index: 2; padding: 80px 100px; text-align: center; }
.tp-responsive-layout-subtitle {
  display: inline-block;
  margin-bottom: 20px;
  font-family: "Segoe Script", "Bradley Hand", cursive;
  font-size: 20px;
  font-weight: 400;
  color: #fff;
}
.tp-responsive-layout-wrap .tp-section-title { margin-bottom: 20px; font-size: 40px; line-height: 1; color: #fff; }
.tp-responsive-layout-para {
  margin: 0;
  font-size: 17px;
  font-weight: 500;
  line-height: 153%;
  color: rgba(255, 255, 255, 0.6);
}
/* Görsel kartın dibine oturur; luminosity Cunnet'in tek renk dokusunu verir */
.tp-responsive-layout-gorsel {
  position: absolute;
  left: 50%;
  bottom: 0;
  width: 86%;
  transform: translateX(-50%);
  mix-blend-mode: luminosity;
}
.tp-responsive-layout-gorsel img {
  width: 100%;
  border-radius: 14px 14px 0 0;
  box-shadow: -20px 20px 20px 0 rgba(0, 0, 0, 0.35);
}
.tp-responsive-layout-wrap--2 .tp-responsive-layout-gorsel { width: 92%; bottom: 40px; }
@media (max-width: 1399.98px) {
  .tp-responsive-layout-content { padding: 50px; }
  .tp-responsive-layout-wrap .tp-section-title { font-size: 34px; }
}
@media (max-width: 991.98px) {
  .tp-responsive-row { grid-template-columns: 1fr; }
  .tp-responsive-layout-wrap { padding-bottom: 350px; }
}
@media (max-width: 767.98px) {
  .tp-responsive-area { padding-bottom: 70px; }
  .tp-responsive-layout-content { padding: 30px 20px 20px; }
  .tp-responsive-layout-wrap .tp-section-title { font-size: 30px; }
  .tp-responsive-layout-wrap { padding-bottom: 260px; }
}

/* ── ÖZELLİK KARTLARI — Cunnet main.css tp-feature-area birebir ─────── */
.tp-feature-area { background: var(--vt-koyu-2); color: #fff; padding-bottom: 135px; }
.tp-feature-include-title-wrap { text-align: center; margin-bottom: 75px; }
.tp-feature-include-title-wrap .tp-section-title { margin-bottom: 40px; color: #fff; }
.tp-feature-include-tag { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; }
.tp-feature-include-tag span {
  display: inline-block;
  padding: 8px 28px;
  font-weight: 700;
  font-size: 16px;
  letter-spacing: -0.02em;
  text-align: center;
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 50px;
}
.tp-feature-include-wrap { display: flex; flex-wrap: wrap; justify-content: center; gap: 20px; }
.tp-feature-include-item {
  width: 224px;
  padding: 50px 20px 30px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 24px;
  text-align: center;
  transition: border-color .25s, transform .25s;
}
.tp-feature-include-item:hover { border-color: rgba(255, 255, 255, .35); transform: translateY(-4px); }
.tp-feature-include-ikon { display: inline-block; height: 54px; margin-bottom: 30px; }
.tp-feature-include-ikon svg { display: block; }
.tp-feature-include-item p { margin: 0; font-weight: 700; font-size: 16px; line-height: 1.5; color: #fff; }
@media (max-width: 1399.98px) {
  .tp-feature-include-item { width: 206px; padding: 45px 20px 25px; }
}
@media (max-width: 767.98px) {
  .tp-feature-area { padding-bottom: 70px; }
  .tp-feature-include-title-wrap { margin-bottom: 45px; }
  .tp-feature-include-wrap { gap: 12px; }
  /* Sabit 175px dar ekranda tek sütuna düşüyordu; iki eşit sütun ekranı doldurur */
  .tp-feature-include-item { width: calc(50% - 6px); padding: 28px 12px 20px; }
  .tp-feature-include-ikon { height: 44px; margin-bottom: 18px; }
  .tp-feature-include-ikon svg { width: 40px; height: auto; }
  .tp-feature-include-item p { font-size: 14px; }
}

/* ── ARAÇLAR — Cunnet main.css tp-build-area birebir ────────────────── */
.tp-build-area { background: var(--vt-koyu-2); color: #fff; padding: 135px 0 110px; }
.tp-build-ust { display: grid; grid-template-columns: 2fr 1fr; gap: 30px; align-items: end; margin-bottom: 85px; }
.tp-build-title-wrap .tp-section-title { color: #fff; }
.tp-section-title-120 { font-size: 72px; line-height: 111%; }
.tp-build-top-shape img, .tp-build-top-shape picture { border-radius: 15px; box-shadow: 0 24px 60px rgba(0, 0, 0, .45); }
.tp-build-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 25px; }
/* Kart oranı Cunnet referansındaki gibi kare-uzun; görsel kırpılmadan tam oturur */
.tp-build-item {
  position: relative;
  aspect-ratio: 29 / 30;
  min-height: 300px;
  border-radius: 20px;
  overflow: hidden;
}
.tp-build-item--1 { background: linear-gradient(150deg, #3b2a68, #191233); }
.tp-build-item--2 { background: linear-gradient(150deg, #6a1030, #2a0713); }
.tp-build-item--3 { background: linear-gradient(150deg, #133b34, #081712); }
.tp-build-item--4 { background: linear-gradient(150deg, #59371c, #1f1207); }
.tp-build-item--5 { background: linear-gradient(150deg, #16324f, #081420); }
.tp-build-item--6 { background: linear-gradient(150deg, #4a1258, #190721); }
/* Görsel kartı olduğu gibi kaplar (karartma yok — görseller kendi koyu tonunda);
   degrade arka plan yalnız görsel yokken/yüklenirken görünür. */
.tp-build-thumb { position: absolute; inset: 0; line-height: 0; }
.tp-build-thumb img { width: 100%; height: 100%; object-fit: cover; border-radius: 20px; }
.tp-build-content { position: absolute; inset: 0; z-index: 2; padding: 40px; padding-top: 30px; }
.tp-build-subtitle {
  display: inline-block;
  margin-bottom: 10px;
  font-size: 16px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.02em;
  text-transform: uppercase;
  background: linear-gradient(15deg, #FFA963 0%, #FFE7D3 100%);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.tp-build-main-title { margin: 0 0 10px; font-size: 24px; font-weight: 700; line-height: 133%; color: #fff; }
.tp-build-para { margin: 0; font-size: .95rem; line-height: 1.6; color: rgba(255, 255, 255, .6); }
@media (max-width: 1399.98px) { .tp-section-title-120 { font-size: 60px; } }
@media (max-width: 1199.98px) { .tp-section-title-120 { font-size: 50px; } }
@media (max-width: 899.98px) {
  .tp-build-area { padding: 80px 0 60px; }
  .tp-build-ust { grid-template-columns: 1fr; margin-bottom: 45px; }
  .tp-build-grid { grid-template-columns: repeat(2, 1fr); }
  .tp-section-title-120 { font-size: 40px; }
  .tp-build-main-title { font-size: 20px; }
}
@media (max-width: 639.98px) {
  .tp-build-grid { grid-template-columns: 1fr; }
  .tp-build-item { min-height: 240px; }
  .tp-build-content { padding: 26px; }
}

/* ── FİYAT BANDI ────────────────────────────────────────────────────── */
.vt-fiyat-izgara {
  display: grid;
  grid-template-columns: 1fr 1.1fr;
  gap: 50px;
  align-items: center;
}
.vt-fiyat-kart {
  border-radius: var(--vt-radius-buyuk);
  background: var(--vt-beyaz);
  border: 1px solid var(--vt-acik-cizgi);
  box-shadow: 0 30px 70px rgba(20, 20, 20, .08);
  padding: 40px;
}
.vt-fiyat-plan { font-size: .8rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--vt-aksan-parlak); }
.vt-fiyat-tutar { font-size: clamp(2.6rem, 5vw, 3.6rem); font-weight: 800; letter-spacing: -.03em; margin: 8px 0 4px; }
.vt-fiyat-tutar span { font-size: 1.1rem; font-weight: 600; color: var(--vt-metin-soluk); }
.vt-fiyat-kart ul { list-style: none; margin: 22px 0 28px; padding: 0; }
.vt-fiyat-kart li { display: flex; align-items: flex-start; gap: 10px; padding: 9px 0; border-top: 1px solid var(--vt-acik); font-size: .96rem; }
.vt-fiyat-kart li svg { flex: 0 0 auto; margin-top: 3px; color: var(--vt-aksan-parlak); }
@media (max-width: 899.98px) { .vt-fiyat-izgara { grid-template-columns: 1fr; } }

/* ── SSS — Cunnet main.css tp-faq-area birebir ──────────────────────── */
.tp-faq-area { background: var(--vt-koyu-2); color: #fff; padding: 130px 0 110px; }
.tp-faq-row { display: grid; grid-template-columns: 4fr 8fr; gap: 30px; align-items: start; }
.tp-faq-title-wrap .tp-section-title { margin-bottom: 30px; line-height: 0.9; color: #fff; }
.tp-btn-black { background-color: var(--vt-koyu); font-size: 20px; padding: 13px 34px; }
.tp-btn-black:hover { background-color: #000; }
.tp-faq-item {
  border: none;
  border-radius: 12px;
  margin-bottom: 5px;
  background: rgba(255, 255, 255, 0.04);
  box-shadow: 0 2px 3px 0 rgba(50, 41, 73, 0.1);
  overflow: hidden;
}
.tp-faq-btn {
  position: relative;
  display: block;
  padding: 25px 53px 25px 30px;
  cursor: pointer;
  font-weight: 600;
  font-size: 20px;
  color: #fff;
  list-style: none;
}
.tp-faq-btn::-webkit-details-marker { display: none; }
/* Artı/eksi düğmesi: dikey çubuk açılınca 90° döner (Cunnet accordion-btn) */
.tp-faq-btn .accordion-btn {
  position: absolute;
  top: 50%;
  right: 24px;
  transform: translateY(-50%);
  height: 34px;
  width: 34px;
  border-radius: 34px;
  background-color: rgba(255, 255, 255, 0.06);
}
.tp-faq-btn .accordion-btn::before,
.tp-faq-btn .accordion-btn::after {
  position: absolute;
  content: "";
  left: 50%;
  top: 50%;
  background-color: #fff;
  border-radius: 2px;
  transform: translate(-50%, -50%);
}
.tp-faq-btn .accordion-btn::before { width: 2px; height: 12px; transition: transform .4s; }
.tp-faq-btn .accordion-btn::after { width: 12px; height: 2px; }
.tp-faq-item[open] .accordion-btn::before { transform: translate(-50%, -50%) rotate(90deg); }
.tp-faq-details-para { padding: 0 120px 35px 30px; }
.tp-faq-details-para p { margin: 0; font-size: 16px; line-height: 162%; font-weight: 500; color: #87878b; }
@media (max-width: 991.98px) {
  .tp-faq-row { grid-template-columns: 1fr; }
  .tp-faq-title-wrap { margin-bottom: 40px; }
  .tp-faq-details-para { padding: 0 30px 35px; }
}
@media (max-width: 767.98px) {
  .tp-faq-area { padding: 70px 0 60px; }
  .tp-faq-btn { font-size: 17px; padding: 20px 50px 20px 22px; }
}

/* ── YORUMLAR — Cunnet main.css tp-review-area birebir ──────────────── */
.tp-review-area { background: var(--vt-koyu-2); color: #fff; padding: 125px 0 90px; }
.tp-review-title-wrap { text-align: center; margin-bottom: 55px; }
.tp-review-title-wrap .tp-section-title { color: #fff; }
/* Sabit yükseklikli pencere + üst/alt fade perdesi; sütunlar içinde dikey kayma */
.tp-review-wrapper { position: relative; overflow: hidden; height: 1080px; }
/* Sütun sayısı yorum adedine göre inline gelir (Razor) */
.tp-review-wrapper-ic { display: grid; gap: 20px; height: 100%; }
.tp-review-wrapper::before,
.tp-review-wrapper::after {
  content: "";
  position: absolute;
  left: 0;
  height: 150px;
  width: 100%;
  z-index: 10;
  pointer-events: none;
}
.tp-review-wrapper::before { bottom: 0; background: linear-gradient(0deg, var(--vt-koyu-2) 40.65%, rgba(28, 28, 30, 0) 100%); }
.tp-review-wrapper::after { top: 0; background: linear-gradient(-180deg, var(--vt-koyu-2) 40.65%, rgba(28, 28, 30, 0) 100%); }
.tp-review-sutun { overflow: hidden; }
.tp-review-scrool-item { display: flex; flex-direction: column; gap: 20px; animation: TestimonialScroll 30s linear infinite; }
@keyframes TestimonialScroll { from { transform: translateY(0); } to { transform: translateY(-50%); } }
@media (prefers-reduced-motion: reduce) { .tp-review-scrool-item { animation: none; } }
.tp-review-item {
  border-radius: 24px;
  padding: 30px 40px 40px;
  border: 1px solid rgba(255, 255, 255, 0.1);
}
.tp-review-ratings { display: flex; gap: 2px; margin-bottom: 25px; }
.tp-review-status { display: inline-block; margin-bottom: 25px; font-weight: 600; font-size: 18px; color: #fff; }
.tp-review-dec { margin: 0 0 20px; font-weight: 400; font-size: 18px; line-height: 156%; letter-spacing: -0.01em; color: rgba(255, 255, 255, 0.6); }
.tp-review-customer { display: flex; align-items: center; }
.tp-review-customer .icons {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  margin-right: 12px;
  border-radius: 50px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: #87E64B;
}
.tp-review-customer .emails { font-size: 15px; font-weight: 600; color: rgba(255, 255, 255, 0.9); }
.vt-puan-rozet {
  position: relative;
  z-index: 11;
  margin: -40px auto 0;
  width: fit-content;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 28px;
  border-radius: var(--vt-radius-hap);
  background: #f6c790;
  color: #3c2506;
  box-shadow: 0 16px 40px rgba(0, 0, 0, .35);
}
.vt-puan-rozet b { font-size: 1.8rem; font-weight: 800; }
/* Yalnız doğrudan çocuk: içteki yıldız span'leri satır içi kalsın */
.vt-puan-rozet > span { display: block; font-size: .85rem; font-weight: 600; line-height: 1.5; }
@media (max-width: 1199.98px) {
  .tp-review-wrapper { height: 900px; }
  .tp-review-wrapper-ic { grid-template-columns: repeat(3, 1fr) !important; }
  .tp-review-item { padding: 26px 28px 30px; }
  .tp-review-dec { font-size: 16px; }
}
@media (max-width: 899.98px) {
  .tp-review-wrapper { height: 760px; }
  .tp-review-wrapper-ic { grid-template-columns: repeat(2, 1fr) !important; }
}
@media (max-width: 639.98px) {
  .tp-review-area { padding: 70px 0 60px; }
  .tp-review-wrapper { height: 620px; }
  .tp-review-wrapper-ic { grid-template-columns: 1fr !important; }
}

/* ── DESTEK KARTLARI — Cunnet tp-documentation-area birebir ─────────── */
.tp-documentation-area { background: var(--vt-koyu-2); color: #fff; padding: 120px 0 125px; }
.tp-documentation-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; }
.tp-documentation-item {
  display: flex;
  padding: 34px;
  border: 1px solid #161613;
  border-radius: 16px;
  box-shadow: 8px 8px 0 0 rgba(255, 255, 255, 0.1);
  transition: box-shadow 0.3s ease-in-out;
  background: linear-gradient(294deg, #8CE9FF -36.29%, #EFF2B3 100.83%);
}
.tp-documentation-item:hover { box-shadow: none; }
.tp-documentation-item--2 { background: linear-gradient(289deg, #EE9CA7 -21.69%, #FFDDE1 95.51%); }
.tp-documentation-item--3 { background: linear-gradient(90deg, #FEE 0%, #DDEFBB 100%); }
.tp-documentation-icon { flex: 0 0 auto; margin-right: 24px; }
.tp-documentation-content h2,
.tp-documentation-content h3 {
  margin: 0 0 4px;
  font-weight: 600;
  font-size: 20px;
  line-height: 130%;
  letter-spacing: -0.02em;
  color: #161613;
}
.tp-documentation-content p { margin: 0 0 18px; font-size: 16px; color: #5e5d63; }
.tp-documentation-content a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 10px 22px;
  font-size: 14px;
  font-weight: 600;
  border-radius: 10px;
  text-decoration: none;
  color: #fff;
  background: #161613;
  box-shadow: 0 0 1px 0 #05060f, 0 1px 2px 0 rgba(5, 6, 15, 0.24);
}
.tp-documentation-para { padding-top: 40px; }
.tp-documentation-para p { margin: 0; font-weight: 500; font-size: 14px; text-align: center; color: rgba(255, 255, 255, 0.7); }
.tp-documentation-para p span { font-weight: 700; color: #ffa963; }
@media (max-width: 899.98px) {
  .tp-documentation-area { padding: 70px 0; }
  .tp-documentation-grid { grid-template-columns: 1fr; }
}

/* ── FİNAL CTA ──────────────────────────────────────────────────────── */
.vt-final {
  background: var(--vt-final-grad);
  color: #fff;
  text-align: center;
  padding: 120px 0 130px;
}
.vt-final h2 {
  margin: 0 auto 18px;
  max-width: 860px;
  font-size: clamp(2.4rem, 6vw, 4.6rem);
  font-weight: 800;
  line-height: 1.02;
  letter-spacing: -.03em;
  text-transform: uppercase;
}
.vt-final .vt-alt-metin { margin: 0 auto 36px; }

/* ── FOOTER ─────────────────────────────────────────────────────────── */
.vt-foot { background: #100304; color: rgba(255, 255, 255, .75); }
.vt-foot-ust {
  display: grid;
  grid-template-columns: 1.7fr 1fr 1fr 1fr;
  gap: 40px;
  /* .vt-wrap ile ayni elemanda: kisayol yazarken yan dolguyu (24px) koru,
     yoksa footer metni ekranin soluna yapisir. */
  padding: 64px 24px 40px;
}
.vt-foot-marka img { height: 44px; width: auto; margin-bottom: 16px; }
.vt-foot-marka p { margin: 0; font-size: .93rem; color: #fff; max-width: 420px; }
.vt-foot h2 { margin: 0 0 14px; font-size: .82rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--vt-aksan); }
.vt-foot-kol { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; }
.vt-foot-kol a {
  display: inline-block;
  padding: 5px 0;
  margin: 2px 0;
  border-radius: var(--vt-radius-hap);
  font-size: .88rem;
  font-weight: 200;
  color: #fff;
  text-decoration: none;
  transition: border-color .2s, color .2s;
}
.vt-foot-kol a:hover { border-color: #fff; color: #fff; }
/* Dokunmatik cihazda parmak hedefi 44px; farede kompakt görünüm korunur */
@media (hover: none) {
  .vt-foot-kol a { min-height: 44px; display: inline-flex; align-items: center; }
}
.vt-foot-alt {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
  padding: 20px 24px 26px;
  border-top: 1px solid rgba(255, 255, 255, .1);
  font-size: .84rem;
  color: #fff;
}
/* Künye (PayTR site denetimi: unvan + açık adres + telefon her sayfanın altında) */
.vt-foot-kunye {
  display: grid;
  gap: 5px;
  margin-top: 20px;
  max-width: 460px;
  font-style: normal;
  font-size: .86rem;
  font-weight: 200;
  line-height: 1.5;
  color: #fff;
}
.vt-foot-kunye strong { font-weight: 700; letter-spacing: .02em; }
.vt-foot-kunye .vt-foot-kunye-not { color: rgba(255, 255, 255, .7); }
.vt-foot-kunye a { color: #fff; text-decoration: none; border-bottom: 1px solid rgba(255, 255, 255, .35); transition: border-color .2s; }
.vt-foot-kunye a:hover { border-color: #fff; }
.vt-foot-not {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 28px;
  padding: 0 24px 22px;
  font-size: .82rem;
  font-weight: 200;
  color: rgba(255, 255, 255, .75);
}
.vt-foot-not span::before { content: "✦ "; color: var(--vt-aksan-parlak); }
@media (max-width: 1199.98px) {
  .vt-foot-ust { grid-template-columns: 1fr 1fr 1fr; }
  .vt-foot-marka { grid-column: 1 / -1; }
}
@media (max-width: 899.98px) { .vt-foot-ust { grid-template-columns: 1fr; gap: 30px; } }

/* ── Cila: derinlik ve etkileşim ────────────────────────────────────
   Hepsi transform/opacity/shadow üzerinden — düzen kaymaz (CLS yok). */
.vt-cta--kirmizi {
  box-shadow: 0 8px 22px -10px rgba(224, 41, 58, .75);
}
.vt-cta--kirmizi:hover { box-shadow: 0 14px 30px -12px rgba(224, 41, 58, .9); }
.vt-cta:active { transform: translateY(0) scale(.985); }
.tp-btn { transition: transform .2s var(--vt-ease, ease), box-shadow .2s; }
.tp-btn:hover { transform: translateY(-2px); box-shadow: 0 12px 26px -12px rgba(224, 41, 58, .8); }
.tp-btn:active { transform: translateY(0) scale(.985); }
/* Kart yüzeyleri: kenarlık + gölge birlikte yumuşasın */
.tp-demo-item, .tp-feature-include-item, .tp-documentation-item,
.tp-build-item, .vt-bento-kart, .tp-review-item {
  transition: transform .28s ease, box-shadow .28s ease, border-color .28s ease;
}
.tp-demo-item:hover { transform: translateY(-4px); }
.tp-build-item:hover { transform: translateY(-4px); box-shadow: 0 26px 50px -28px rgba(0, 0, 0, .9); }
.tp-review-item:hover { border-color: rgba(255, 255, 255, .22); }
/* SSS satırı: açıkken hafif vurgulanır */
.tp-faq-item { transition: background .25s ease; }
.tp-faq-item[open] { background: rgba(255, 255, 255, .06); }
.tp-faq-btn:hover .accordion-btn { background-color: rgba(255, 255, 255, .14); }
/* Görsel yüklenene kadar zemin boş beyaz parlamasın */
.tp-demo-thumb, .tp-inn-slider-thumb, .tp-responsive-layout-gorsel { background: var(--vt-koyu-2); }
/* Dokunmatik cihazda hover'a takılı kalan efektleri kapat */
@media (hover: none) {
  .tp-demo-item:hover, .tp-build-item:hover, .vt-cta:hover, .tp-btn:hover { transform: none; }
}

/* ── Kısa/yatay ekran uyarlaması ────────────────────────────────────
   Telefon yatay tutulduğunda (yükseklik ≤ 520px) hero'nun dev dikey
   boşluğu tüm ekranı yer; başlık ve butonlar tek bakışta görünsün. */
@media (max-height: 520px) and (orientation: landscape) {
  .vt-hero { padding-top: 96px; }
  .vt-hero h1 { font-size: clamp(2rem, 5vw, 3rem); margin-bottom: 16px; }
  .vt-hero .vt-alt-metin { margin-bottom: 20px; }
  .vt-rozet { margin-bottom: 16px; }
  .vt-bolum { padding: 64px 0; }
  .tp-elements-ptb, .tp-build-area, .tp-faq-area,
  .tp-review-area, .tp-documentation-area { padding-top: 64px; padding-bottom: 64px; }
  .tp-inn-govde { padding-top: 64px; }
  .vt-final { padding: 64px 0 72px; }
}

/* ── REVEAL animasyonu (IntersectionObserver — vitrin.js) ───────────── */
.js .vt-reveal { opacity: 0; transform: translateY(22px); transition: opacity .6s ease, transform .6s ease; }
.js .vt-reveal.gorunur { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .js .vt-reveal { opacity: 1; transform: none; transition: none; }
}

/* ── İÇ SAYFALAR — anasayfa dilinin kompakt sürümü ───────────────────
   Temalar, fiyatlandırma, kurulum, satın alma, iletişim ve yasal metinler
   anasayfayla aynı bileşenleri kullanır (tp-demo-*, tp-faq-*, tp-documentation-*,
   vt-fiyat-*). Burada yalnız iç sayfalara özgü parçalar tanımlıdır; dikey
   ritim anasayfanın yaklaşık yarısıdır (120px → 72px). ── */

/* Anasayfadan devralınan üç yardımcı (fiyat bandı ve butonlar kullanır) */
.muted { color: var(--vt-metin-soluk); }
.arw { display: inline-block; transition: transform .2s; }
a:hover > .arw, .vt-cta:hover .arw, .vt-metin-baglanti:hover .arw { transform: translateX(4px); }
.vt-metin-baglanti {
  display: inline-flex; align-items: center; gap: 8px;
  min-height: 44px; /* dokunma hedefi */
  font-weight: 700; color: var(--vt-aksan-parlak); text-decoration: none;
}

/* ── Üst bant: hero degradesinin kısa kardeşi ────────────────────────
   Nav iç sayfalarda sticky (şeffaf değil) → üstten ekstra boşluk gerekmez. */
.vt-ic-bas { background: var(--vt-hero-grad); color: #fff; padding: 72px 0 78px; }
.vt-ic-bas h1 {
  margin: 0;
  max-width: 20ch;
  font-size: clamp(2.1rem, 4.6vw, 3.5rem);
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: -.02em;
  text-transform: uppercase;
}
.vt-ic-bas h1 em { font-style: normal; color: #ff8a94; }
.vt-ic-bas p { margin: 18px 0 0; max-width: 620px; font-size: 1.05rem; color: rgba(255, 255, 255, .7); }
.vt-ic-bas .vt-kicker { color: rgba(255, 255, 255, .55); }
.vt-ic-bas-cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; }

/* Kırıntı izi */
.vt-ic-iz { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 20px; font-size: .85rem; }
.vt-ic-iz a { color: rgba(255, 255, 255, .7); text-decoration: none; }
.vt-ic-iz a:hover { color: #fff; }
.vt-ic-iz span { color: rgba(255, 255, 255, .38); }

/* Anasayfadan devralinan koyu bolumler ic sayfada daha dar nefes alir */
.vt-ic-kompakt { padding-top: 72px; padding-bottom: 78px; }
/* Izgara dogrudan ust bandin altina geliyorsa ustten ikinci bosluga gerek yok */
.vt-ic-bolum > .vt-wrap > .tp-demo-grid:first-child { margin-top: 0; }

/* ── Kompakt bölüm iskeleti ──────────────────────────────────────── */
.vt-ic-bolum { padding: 72px 0; }
.vt-ic-bolum--acik { background: var(--vt-acik); }
.vt-ic-bolum--beyaz { background: var(--vt-beyaz); }
.vt-ic-baslik { max-width: 720px; margin-bottom: 34px; }
.vt-ic-baslik h2 {
  margin: 0;
  font-size: clamp(1.5rem, 3vw, 2.1rem);
  font-weight: 800;
  letter-spacing: -.02em;
  text-transform: uppercase;
}
.vt-ic-baslik p { margin: 12px 0 0; color: var(--vt-metin-soluk); }
.vt-ic-not {
  margin: 34px auto 0;
  max-width: 780px;
  text-align: center;
  font-size: .95rem;
  color: var(--vt-metin-soluk);
}

/* ── Tema detayı ─────────────────────────────────────────────────── */
.vt-tema-detay { display: grid; grid-template-columns: 1.5fr 1fr; gap: 44px; align-items: start; }
.vt-tema-onizleme {
  border-radius: var(--vt-radius-buyuk);
  background: linear-gradient(150deg, #2a2a2e, #131315);
  padding: 22px;
}
.vt-tema-onizleme img { display: block; width: 100%; border-radius: 10px; box-shadow: 0 18px 44px rgba(0, 0, 0, .35); }
.vt-tema-yan .vt-fiyat-rozet {
  display: inline-block;
  padding: 8px 18px;
  border-radius: var(--vt-radius-hap);
  background: var(--vt-koyu);
  color: #fff;
  font-weight: 700;
}
.vt-tema-yan .vt-fiyat-rozet.dahil { background: #157347; }
.vt-tema-yan h2 { margin: 16px 0 8px; font-size: 1.5rem; font-weight: 800; letter-spacing: -.02em; }
.vt-tema-yan .vt-cta { margin-top: 22px; }
.vt-tema-yan .vt-kucuk-not { margin: 16px 0 0; font-size: .9rem; color: var(--vt-metin-soluk); }
@media (max-width: 899.98px) { .vt-tema-detay { grid-template-columns: 1fr; gap: 28px; } }

/* ── Kurulum adımları ────────────────────────────────────────────── */
/* Beş adım tek sırada: 1230px içinde 5 × ~230px — özellik kartlarıyla aynı ölçek. */
.vt-adim-izgara { display: grid; grid-template-columns: repeat(5, 1fr); gap: 16px; }
.vt-adim {
  background: var(--vt-beyaz);
  border: 1px solid var(--vt-acik-cizgi);
  border-radius: var(--vt-radius);
  padding: 22px 18px;
}
.vt-adim-no {
  display: inline-flex; align-items: center; justify-content: center;
  width: 30px; height: 30px; margin-bottom: 12px;
  border-radius: 50%;
  background: var(--vt-aksan-parlak);
  color: #fff; font-size: .88rem; font-weight: 800;
}
.vt-adim h3 { margin: 0 0 7px; font-size: .98rem; font-weight: 700; letter-spacing: -.01em; }
.vt-adim p { margin: 0; font-size: .88rem; line-height: 1.5; color: var(--vt-metin-soluk); }
@media (max-width: 1199.98px) { .vt-adim-izgara { grid-template-columns: repeat(3, 1fr); gap: 18px; } }
@media (max-width: 899.98px) { .vt-adim-izgara { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 599.98px) { .vt-adim-izgara { grid-template-columns: 1fr; } }

/* DNS kayıt kutuları — değer tek tıkla kopyalanır (vitrin.js) */
.vt-dns { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; margin-top: 28px; }
.vt-dns-satir {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  background: var(--vt-koyu);
  color: #fff;
  border-radius: 14px;
  padding: 16px 18px;
}
.vt-dns-satir dt { margin: 0; font-size: .74rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: rgba(255, 255, 255, .5); }
.vt-dns-satir dd { margin: 5px 0 0; font-family: ui-monospace, "Cascadia Mono", Consolas, monospace; font-size: 1.02rem; font-weight: 600; }
.vt-kopyala {
  flex: 0 0 auto;
  min-height: 40px; padding: 9px 16px;
  border: 1px solid rgba(255, 255, 255, .25); border-radius: 10px;
  background: transparent; color: #fff;
  font: inherit; font-size: .85rem; font-weight: 600;
  cursor: pointer; transition: background-color .2s, border-color .2s;
}
.vt-kopyala:hover { background: rgba(255, 255, 255, .12); }
.vt-kopyala.kopyalandi { background: #157347; border-color: #157347; }
@media (max-width: 767.98px) { .vt-dns { grid-template-columns: 1fr; } }

/* ── Satın alma: solda özet, sağda form ──────────────────────────── */
.vt-al-izgara { display: grid; grid-template-columns: 1fr 1.15fr; gap: 44px; align-items: start; }
.vt-al-ozet ul { list-style: none; margin: 22px 0 0; padding: 0; }
.vt-al-ozet li { display: flex; align-items: flex-start; gap: 10px; padding: 11px 0; border-top: 1px solid var(--vt-acik-cizgi); font-size: .96rem; }
.vt-al-ozet li svg { flex: 0 0 auto; margin-top: 3px; color: var(--vt-aksan-parlak); }
.vt-form {
  background: var(--vt-beyaz);
  border: 1px solid var(--vt-acik-cizgi);
  border-radius: var(--vt-radius-buyuk);
  box-shadow: 0 26px 60px rgba(20, 20, 20, .07);
  padding: 32px;
}
.vt-alan { margin-bottom: 16px; }
.vt-alan label { display: block; margin-bottom: 6px; font-size: .9rem; font-weight: 700; }
.vt-alan label .vt-ipucu { font-weight: 500; color: var(--vt-metin-soluk); }
.vt-alan input {
  width: 100%; min-height: 48px; padding: 12px 15px;
  border: 1px solid var(--vt-acik-cizgi); border-radius: 12px;
  font: inherit; background: var(--vt-beyaz); color: var(--vt-metin);
}
.vt-alan input:focus { outline: 2px solid var(--vt-aksan-parlak); outline-offset: 1px; border-color: transparent; }
.vt-uyari {
  margin-bottom: 18px; padding: 14px 18px;
  border: 1px solid #f3c1c7; border-radius: 12px;
  background: #fdecec; color: #7a1220; font-size: .94rem;
}
/* Sözleşme onayı (PayTR denetimi): kutu + metin tek satırda, dokunma hedefi rahat */
.vt-onay {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin: 4px 0 16px;
  padding: 14px 16px;
  border: 1px solid var(--vt-acik-cizgi);
  border-radius: 12px;
  background: var(--vt-beyaz);
  font-size: .88rem;
  line-height: 1.55;
  color: var(--vt-metin);
}
.vt-onay input { flex: 0 0 auto; width: 20px; height: 20px; margin: 2px 0 0; accent-color: var(--vt-aksan-parlak); cursor: pointer; }
.vt-onay label { cursor: pointer; }
.vt-onay a { color: var(--vt-aksan-parlak); font-weight: 600; text-decoration: underline; text-underline-offset: 2px; }
/* Bal kabı: gerçek kullanıcı görmez, ekran okuyucu okumaz, sekme sırası atlar */
.vt-tuzak { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
@media (max-width: 899.98px) { .vt-al-izgara { grid-template-columns: 1fr; gap: 28px; } }

/* ── İletişim kartları — destek kartlarının 4'lü varyantı ─────────── */
.tp-documentation-grid--4 { grid-template-columns: repeat(4, 1fr); }
.tp-documentation-grid--4 .tp-documentation-item { flex-direction: column; padding: 28px; }
.tp-documentation-grid--4 .tp-documentation-icon { margin: 0 0 16px; }
.tp-documentation-item--4 { background: linear-gradient(283deg, #C2E9FB -12%, #E6DEE9 104%); }
.tp-documentation-content .vt-iletisim-deger {
  display: block; margin: 0 0 14px;
  font-size: 15px; font-weight: 600; color: #161613;
  overflow-wrap: anywhere;
}
@media (max-width: 1199.98px) { .tp-documentation-grid--4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 599.98px) { .tp-documentation-grid--4 { grid-template-columns: 1fr; } }

/* ── İletişim künyesi (PayTR: unvan + adres + telefon) ─────────────── */
.vt-kunye {
  margin: 0;
  display: grid;
  gap: 14px;
  padding: 28px;
  border: 1px solid var(--vt-acik-cizgi);
  border-radius: var(--vt-radius-buyuk);
  background: var(--vt-beyaz);
  box-shadow: 0 26px 60px rgba(20, 20, 20, .06);
}
.vt-kunye > div { display: grid; grid-template-columns: 92px 1fr; gap: 12px; align-items: start; }
.vt-kunye dt { margin: 0; padding-top: 3px; font-size: .74rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--vt-metin-soluk); }
.vt-kunye dd { margin: 0; line-height: 1.55; color: var(--vt-metin); overflow-wrap: anywhere; }
.vt-kunye dd a { color: var(--vt-aksan-parlak); font-weight: 600; text-decoration: none; }
.vt-kunye dd a:hover { text-decoration: underline; }
@media (max-width: 599.98px) { .vt-kunye > div { grid-template-columns: 1fr; gap: 2px; } }

/* ── Yasal metinler: yapışkan içindekiler + gövde ─────────────────── */
.vt-yasal { display: grid; grid-template-columns: 268px 1fr; gap: 52px; align-items: start; }
.vt-yasal-nav { position: sticky; top: 124px; }
.vt-yasal-nav h2 { margin: 0 0 12px; font-size: .76rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--vt-metin-soluk); }
.vt-yasal-nav ol { list-style: none; margin: 0 0 30px; padding: 0; counter-reset: yasal; }
.vt-yasal-nav li { counter-increment: yasal; }
.vt-yasal-nav ol a {
  display: block; padding: 7px 0 7px 14px;
  border-left: 2px solid var(--vt-acik-cizgi);
  font-size: .92rem; font-weight: 600; color: var(--vt-metin-soluk); text-decoration: none;
  transition: color .2s, border-color .2s;
}
.vt-yasal-nav ol a::before { content: counter(yasal) ". "; font-weight: 800; color: var(--vt-aksan-parlak); }
.vt-yasal-nav ol a:hover { color: var(--vt-metin); border-left-color: var(--vt-aksan-parlak); }
.vt-yasal-diger { display: grid; gap: 8px; }
.vt-yasal-diger a {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  min-height: 44px; padding: 11px 16px;
  border: 1px solid var(--vt-acik-cizgi); border-radius: 12px;
  background: var(--vt-beyaz);
  font-size: .9rem; font-weight: 600; color: var(--vt-metin); text-decoration: none;
}
.vt-yasal-diger a:hover { border-color: var(--vt-aksan-parlak); color: var(--vt-aksan-parlak); }
.vt-yasal-govde { max-width: 780px; }
.vt-yasal-giris { margin: 0 0 36px; font-size: 1.06rem; line-height: 1.7; color: var(--vt-metin-soluk); }
.vt-yasal-madde { padding: 28px 0; border-top: 1px solid var(--vt-acik-cizgi); scroll-margin-top: 120px; }
.vt-yasal-madde:first-of-type { padding-top: 0; border-top: 0; }
.vt-yasal-madde h2 { margin: 0 0 10px; font-size: 1.18rem; font-weight: 800; letter-spacing: -.01em; }
.vt-yasal-madde h2 .vt-yasal-no { margin-right: 8px; color: var(--vt-aksan-parlak); }
.vt-yasal-madde p { margin: 0; line-height: 1.75; color: #3f434a; }
.vt-yasal-tarih {
  display: inline-block; margin-top: 22px; padding: 7px 16px;
  border-radius: var(--vt-radius-hap);
  background: rgba(255, 255, 255, .1);
  font-size: .82rem; font-weight: 600; color: rgba(255, 255, 255, .8);
}
@media (max-width: 991.98px) {
  .vt-yasal { grid-template-columns: 1fr; gap: 30px; }
  .vt-yasal-nav { position: static; }
}

/* ── ÖZELLİK KATALOĞU SAYFASI (/ozellikler) ─────────────────────────
   Kurgu: koyu bant + canlı sayaçlar → 6 bento "öne çıkan" kartı (ikisi gerçek
   ekran görüntülü) → 17 kategori kartı. Kart açılınca ızgarada TAM SATIRI kaplar
   ve listesi iki kolona yayılır — JS yok, davranış <details>'in kendisi. ── */

/* Sayaç şeridi (koyu üst bantta) */
.vt-oz-sayac { display: flex; flex-wrap: wrap; gap: 12px; margin: 30px 0 0; padding: 0; }
.vt-oz-sayac > div {
  flex: 1 1 128px; padding: 14px 18px;
  border: 1px solid rgba(255, 255, 255, .16); border-radius: var(--vt-radius);
  background: rgba(255, 255, 255, .05);
}
.vt-oz-sayac dt {
  margin: 0; font-size: clamp(1.5rem, 3vw, 2.1rem); font-weight: 800;
  letter-spacing: -.03em; line-height: 1; color: #fff; font-variant-numeric: tabular-nums;
}
.vt-oz-sayac dd {
  margin: 6px 0 0; font-size: .8rem; font-weight: 600; letter-spacing: .04em;
  text-transform: uppercase; color: rgba(255, 255, 255, .6);
}

/* ── Öne çıkanlar: bento ─────────────────────────────────────────── */
.vt-oz-bento { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.vt-oz-bk {
  display: flex; flex-direction: row; overflow: hidden;
  border: 1px solid var(--vt-acik-cizgi); border-radius: var(--vt-radius-buyuk);
  background: var(--vt-beyaz);
  transition: transform .25s ease, box-shadow .25s ease;
}
.vt-oz-bk:hover { transform: translateY(-3px); box-shadow: 0 22px 44px -26px rgba(20, 20, 20, .35); }
.vt-oz-bk--genis { grid-column: span 2; }

.vt-oz-bk-gorsel {
  flex: 0 0 52%; align-self: stretch;
  display: flex; align-items: center;      /* kart daha uzunsa görsel dikeyde ortalanır */
  background: linear-gradient(150deg, #2a2a2e, #131315);
  padding: 16px;
}
/* Görsel tam görünür: genişliğe oturur, oranı korunur, kırpılmaz. */
.vt-oz-bk-gorsel img {
  display: block; width: 100%; height: auto; border-radius: 10px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, .35);
}
.vt-oz-bk-metin { display: flex; flex-direction: column; justify-content: center; flex: 1; min-width: 0; padding: 20px 22px; }
.vt-oz-bk-ikon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 38px; height: 38px; margin-bottom: 12px;
  border-radius: 12px; background: var(--vt-acik); color: var(--vt-aksan);
}
.vt-oz-bk-etiket {
  align-self: flex-start; margin-bottom: 10px; padding: 3px 11px;
  border-radius: var(--vt-radius-hap);
  background: var(--vt-aksan-parlak); color: #fff;
  font-size: .7rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase;
}
.vt-oz-bk h3 {
  margin: 0 0 8px; font-size: clamp(1.05rem, 1.7vw, 1.25rem); font-weight: 800;
  letter-spacing: -.02em; line-height: 1.2;
}
.vt-oz-bk p { margin: 0; font-size: .9rem; line-height: 1.55; color: var(--vt-metin-soluk); }
.vt-oz-bk-link {
  display: inline-flex; align-items: center; gap: 7px; margin-top: auto; padding-top: 14px;
  font-size: .86rem; font-weight: 700; color: var(--vt-aksan-parlak); text-decoration: none;
}

/* Renk varyantları — anasayfanın bento diliyle aynı aile */
.vt-oz-bk--koyu { background: var(--vt-koyu); border-color: var(--vt-koyu); }
.vt-oz-bk--koyu h3 { color: #fff; }
.vt-oz-bk--koyu p { color: rgba(255, 255, 255, .66); }
.vt-oz-bk--koyu .vt-oz-bk-ikon { background: rgba(255, 255, 255, .08); color: #fff; }
.vt-oz-bk--koyu .vt-oz-bk-link { color: #ff8a94; }

.vt-oz-bk--kirmizi { background: var(--vt-aksan); border-color: var(--vt-aksan); }
.vt-oz-bk--kirmizi h3 { color: #fff; }
.vt-oz-bk--kirmizi p { color: rgba(255, 255, 255, .82); }
.vt-oz-bk--kirmizi .vt-oz-bk-ikon { background: rgba(255, 255, 255, .16); color: #fff; }
.vt-oz-bk--kirmizi .vt-oz-bk-etiket { background: #fff; color: var(--vt-aksan); }
.vt-oz-bk--kirmizi .vt-oz-bk-link { color: #fff; }

.vt-oz-bk--bej { background: #f2ede4; border-color: #e6ddcd; }
.vt-oz-bk--bej .vt-oz-bk-ikon { background: #fff; }

@media (max-width: 1099.98px) {
  .vt-oz-bento { grid-template-columns: repeat(2, 1fr); }
  .vt-oz-bk--genis { grid-column: span 2; }
}
@media (max-width: 767.98px) {
  /* Dar ekranda yan yana düzen sıkışır — görsel üstte, metin altta */
  .vt-oz-bk { flex-direction: column; }
  .vt-oz-bk-gorsel { flex: 0 0 auto; padding: 14px 14px 0; }
  .vt-oz-bk-gorsel img { border-radius: 10px 10px 0 0; }
}
@media (max-width: 639.98px) {
  .vt-oz-bento { grid-template-columns: 1fr; }
  .vt-oz-bk--genis { grid-column: span 1; }
}

/* ── Kategori akordeonu ──────────────────────────────────────────
   Tek sütun: açılan satır YERİNDE genişler (ızgara yok → alt satıra kayma yok).
   <details name="..."> sayesinde aynı anda TEK kategori açık kalır. */
.vt-oz-akordeon {
  border: 1px solid var(--vt-acik-cizgi); border-radius: var(--vt-radius);
  background: var(--vt-beyaz); overflow: hidden;
}
.vt-oz-satir { border-top: 1px solid var(--vt-acik-cizgi); scroll-margin-top: 112px; }
.vt-oz-satir:first-child { border-top: 0; }
.vt-oz-satir[open] { background: var(--vt-beyaz); }

.vt-oz-satir > summary {
  display: flex; align-items: center; gap: 14px;
  padding: 15px 20px; cursor: pointer; list-style: none;
}
.vt-oz-satir > summary::-webkit-details-marker { display: none; }
.vt-oz-satir > summary:hover { background: var(--vt-acik); }
.vt-oz-satir-ikon {
  display: inline-flex; align-items: center; justify-content: center;
  flex: 0 0 auto; width: 36px; height: 36px;
  border-radius: 10px; background: var(--vt-acik); color: var(--vt-aksan);
}
.vt-oz-satir[open] .vt-oz-satir-ikon { background: var(--vt-aksan-parlak); color: #fff; }
.vt-oz-satir-ad {
  flex: 1; min-width: 0;
  font-size: .98rem; font-weight: 800; letter-spacing: -.01em; text-transform: uppercase;
}
.vt-oz-satir-sayi {
  flex: 0 0 auto; padding: 2px 10px; border-radius: var(--vt-radius-hap);
  background: var(--vt-acik); color: var(--vt-metin-soluk);
  font-size: .8rem; font-weight: 800; font-variant-numeric: tabular-nums;
}
.vt-oz-satir[open] .vt-oz-satir-sayi { background: var(--vt-koyu); color: #fff; }

.vt-oz-ok { position: relative; flex: 0 0 auto; width: 26px; height: 26px; border-radius: 50%; background: var(--vt-acik); }
.vt-oz-ok::before, .vt-oz-ok::after {
  position: absolute; content: ""; left: 50%; top: 50%;
  background: var(--vt-metin); border-radius: 2px; transform: translate(-50%, -50%);
}
.vt-oz-ok::before { width: 2px; height: 10px; transition: transform .3s; }
.vt-oz-ok::after { width: 10px; height: 2px; }
.vt-oz-satir[open] .vt-oz-ok { background: var(--vt-aksan-parlak); }
.vt-oz-satir[open] .vt-oz-ok::before { transform: translate(-50%, -50%) rotate(90deg); }
.vt-oz-satir[open] .vt-oz-ok::before, .vt-oz-satir[open] .vt-oz-ok::after { background: #fff; }

/* Açılan gövde */
.vt-oz-govde { padding: 0 20px 20px 70px; }
.vt-oz-kat-ozet {
  margin: 0 0 14px; max-width: 82ch;
  font-size: .93rem; line-height: 1.6; color: var(--vt-metin-soluk);
}
.vt-oz-liste {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 32px;
}
.vt-oz-liste li {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 10px 0; border-top: 1px solid var(--vt-acik);
}
.vt-oz-tik { flex: 0 0 auto; margin-top: 2px; color: var(--vt-aksan-parlak); line-height: 0; }
.vt-oz-metin { min-width: 0; }
.vt-oz-metin strong { font-size: .93rem; font-weight: 700; }
.vt-oz-aciklama { display: block; margin-top: 2px; font-size: .86rem; line-height: 1.5; color: var(--vt-metin-soluk); }
.vt-oz-rozet {
  display: inline-block; margin-left: 7px; padding: 1px 8px;
  border-radius: var(--vt-radius-hap); background: var(--vt-koyu); color: #fff;
  font-size: .67rem; font-weight: 700; transform: translateY(-1px);
}

@media (max-width: 899.98px) {
  .vt-oz-liste { grid-template-columns: 1fr; gap: 0; }
  .vt-oz-satir { scroll-margin-top: 76px; }
  .vt-oz-govde { padding-left: 20px; }
  .vt-oz-satir > summary { padding: 13px 16px; gap: 11px; }
}

/* ── Durum sayfaları (404 / ödeme sonucu) ─────────────────────────── */
.vt-durum { background: var(--vt-hero-grad); color: #fff; text-align: center; padding: 96px 0 104px; }
.vt-durum-kod { font-size: clamp(3.4rem, 10vw, 6.4rem); font-weight: 800; line-height: 1; letter-spacing: -.04em; color: #ff8a94; }
.vt-durum h1 { margin: 14px 0; font-size: clamp(1.7rem, 3.6vw, 2.6rem); font-weight: 800; letter-spacing: -.02em; text-transform: uppercase; }
.vt-durum p { margin: 0 auto 10px; max-width: 620px; color: rgba(255, 255, 255, .72); }
.vt-durum-yol {
  display: inline-block; margin: 10px 0 0; padding: 6px 14px;
  border-radius: 8px; background: rgba(255, 255, 255, .08);
  font-family: ui-monospace, "Cascadia Mono", Consolas, monospace; font-size: .9rem;
}
.vt-durum-butonlar { display: flex; justify-content: center; flex-wrap: wrap; gap: 12px; margin-top: 28px; }

/* ── Kısa ekran uyarlaması ────────────────────────────────────────── */
@media (max-width: 767.98px) {
  .vt-ic-bas { padding: 48px 0 54px; }
  .vt-ic-bolum { padding: 52px 0; }
  .vt-durum { padding: 64px 0 72px; }
  .vt-form { padding: 24px; }
}