/* e-Fatura sayfası. Renkler css/renkler.css, ortak parçalar css/site.css */
.crumbs { display: flex; align-items: center; gap: 8px; font-size: 13.5px; color: var(--muted); margin-bottom: 22px; }
.crumbs a:hover { color: var(--primary); }
.crumbs svg { width: 12px; height: 12px; }

/* ---------- Hero ---------- */
.ef-hero { position: relative; overflow: hidden; padding: 48px 0 88px; background: radial-gradient(55% 70% at 88% 30%, var(--blue-50) 0%, transparent 70%), radial-gradient(40% 50% at 0% 100%, var(--cyan-50) 0%, transparent 70%); }
.ef-hero .container { position: relative; z-index: 1; display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center; }
.ef-ribbon { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 30%, #000 75%, transparent 100%); mask-image: linear-gradient(90deg, transparent 0%, #000 30%, #000 75%, transparent 100%); }
.ef-ribbon g { opacity: .12; } .ef-ribbon path { fill: none; stroke-width: 34; }
.ef-ribbon .k1 { stroke: var(--logo-blue); } .ef-ribbon .k2 { stroke: var(--logo-mid); } .ef-ribbon .k3 { stroke: var(--logo-cyan); }
.kicker { display: inline-flex; align-items: center; gap: 8px; padding: 6px 14px; border-radius: 999px; background: var(--card); border: 1px solid var(--line); font: 700 12px var(--font-body); letter-spacing: .06em; text-transform: uppercase; color: var(--primary); }
.kicker::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--brand-gradient); }
.ef-hero h1 { margin-top: 20px; font: 800 clamp(36px, 4vw, 58px)/1.06 var(--font-head); letter-spacing: -.035em; color: var(--navy); }
.ef-hero h1 em { font-style: normal; color: var(--primary); }
.ef-hero .lead { margin: 20px 0 30px; max-width: 520px; font-size: 18px; color: var(--ink-2); }
.ef-ctas { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 24px; }
.ef-points { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 30px; }
.ef-points > span { display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border-radius: 12px; background: var(--card); border: 1px solid var(--line); font-size: 14px; font-weight: 600; color: var(--ink); }
.ef-points svg { width: 16px; height: 16px; color: var(--green); }

/* Hero görseli: e-Fatura formu maketi (HTML) */
.ef-visual { position: relative; height: 560px; }
.inv { position: absolute; left: 0; top: 10px; width: 72%; padding: 26px; border-radius: 26px; background: var(--card); border: 1px solid var(--line); box-shadow: 0 40px 80px -36px color-mix(in srgb, var(--navy-700) 45%, transparent); }
.inv-head { display: flex; align-items: center; justify-content: space-between; }
.inv-head b { font: 800 13px var(--font-head); letter-spacing: .08em; color: var(--primary); }
.inv-head small { padding: 3px 10px; border-radius: 999px; background: var(--bg); font-weight: 700; color: var(--muted); }
.inv-steps { display: flex; gap: 6px; margin: 14px 0 20px; }
.inv-steps i { flex: 1; height: 5px; border-radius: 5px; background: var(--primary); }
.inv-steps i:last-child { background: var(--line); }
.inv-field { padding: 12px 14px; border-radius: 14px; background: var(--bg); margin-bottom: 10px; }
.inv-field small { display: block; font-size: 12px; font-weight: 700; letter-spacing: .06em; color: var(--muted); }
.inv-field b { font-size: 16px; color: var(--ink); }
.inv-lines { margin: 6px 0 12px; border-top: 1px dashed var(--line); }
.inv-lines div { display: flex; justify-content: space-between; padding: 10px 2px; border-bottom: 1px dashed var(--line); font-size: 14px; color: var(--ink-2); }
.inv-total { display: flex; align-items: baseline; justify-content: space-between; margin: 6px 2px 16px; }
.inv-total span { font-weight: 600; color: var(--ink-2); }
.inv-total b { font: 800 26px var(--font-head); color: var(--navy); }
.inv-send { display: flex; align-items: center; justify-content: center; gap: 10px; height: 50px; border-radius: 14px; background: var(--primary); color: #fff; font-weight: 700; position: relative; overflow: hidden; }
.inv-send svg { width: 18px; height: 18px; }
.inv-send::after { content: ""; position: absolute; inset: 0; background: linear-gradient(100deg, transparent 30%, color-mix(in srgb, #fff 35%, transparent) 50%, transparent 70%); transform: translateX(-100%); animation: shine 3.2s ease-in-out infinite; }
@keyframes shine { 60%, 100% { transform: translateX(100%); } }
.ef-float { position: absolute; z-index: 2; padding: 16px 18px; border-radius: 20px; background: var(--card); border: 1px solid var(--line); box-shadow: var(--shadow); animation: bob 5s ease-in-out infinite; }
.ef-float small { display: block; font-size: 12px; color: var(--muted); }
.ef-float b { font: 800 22px var(--font-head); color: var(--navy); }
.ef-float em { font-style: normal; margin-left: 6px; font-size: 12px; font-weight: 700; color: var(--green-700); }
.ef-float.sum { right: 0; top: 70px; }
.ef-float.ok { right: 0; bottom: -6px; display: flex; align-items: center; gap: 12px; animation-delay: -2.5s; }
.ef-float.ok i { width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; background: var(--success-soft); color: var(--green); }
.ef-float.ok i svg { width: 18px; height: 18px; }
.ef-float.ok b { font-size: 15px; }

/* Boş görsel alanı (fotoğraf/ekran görüntüsü sonradan eklenecek) */
.ph { position: relative; display: grid; place-items: center; text-align: center; border-radius: var(--radius-xl); background: var(--bg); border: 1.5px dashed color-mix(in srgb, var(--primary) 30%, transparent); color: var(--muted); font-size: 13px; }
.ph b { display: block; font: 700 15px var(--font-head); color: var(--ink-2); }
.ph svg { width: 28px; height: 28px; margin: 0 auto 6px; color: var(--primary); opacity: .6; }

/* ---------- Tek ekran (giriş) ---------- */
.ef-intro { display: grid; grid-template-columns: 1.1fr 1fr; gap: 56px; align-items: center; }
.ef-intro .ph { height: 420px; }
.ef-intro h2, .ef-split h2 { font: 800 clamp(30px, 3.2vw, 44px)/1.12 var(--font-head); letter-spacing: -.025em; color: var(--navy); }
.ef-intro h2 em, .ef-split h2 em { font-style: normal; color: var(--primary); }
.ef-intro p { margin: 16px 0 26px; font-size: 17px; color: var(--ink-2); max-width: 520px; }
.chips-row { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 18px; }
.chips-row span { padding: 6px 12px; border-radius: 999px; background: var(--primary-soft); color: var(--primary); font: 700 12px var(--font-body); letter-spacing: .05em; text-transform: uppercase; }

/* ---------- Başvuru adımları ---------- */
.apply { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; counter-reset: ap; }
.ap { position: relative; padding: 28px 24px; border-radius: var(--radius-lg); background: var(--card); border: 1px solid var(--line); }
.ap::before { counter-increment: ap; content: "0" counter(ap); display: grid; place-items: center; width: 44px; height: 44px; border-radius: 14px; background: var(--primary-soft); color: var(--primary); font: 800 15px var(--font-head); }
.ap:not(:last-child)::after { content: ""; position: absolute; top: 49px; right: -14px; width: 14px; border-top: 2px dashed color-mix(in srgb, var(--primary) 35%, transparent); }
.ap h3 { margin: 18px 0 8px; font: 800 19px var(--font-head); color: var(--navy); }
.ap p { font-size: 14.5px; color: var(--ink-2); }
.ap.last { background: var(--navy); border-color: var(--navy); }
.ap.last::before { background: color-mix(in srgb, #fff 12%, transparent); color: var(--logo-cyan); }
.ap.last h3 { color: #fff; } .ap.last p { color: color-mix(in srgb, #fff 75%, transparent); }

/* ---------- Oluşturun, yönetin, takip edin ---------- */
.ef-split { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: start; }
.ef-split .ph { height: 100%; min-height: 460px; position: sticky; top: 110px; }
.ef-split > div > p { margin: 16px 0 28px; font-size: 17px; color: var(--ink-2); }
.feat-list { display: grid; gap: 12px; margin-bottom: 28px; }
.fl { display: flex; gap: 16px; padding: 20px; border-radius: 20px; background: var(--card); border: 1px solid var(--line); transition: border-color .25s, transform .25s; }
.fl:hover { border-color: color-mix(in srgb, var(--primary) 30%, transparent); transform: translateX(4px); }
.fl i { width: 44px; height: 44px; flex-shrink: 0; border-radius: 14px; display: grid; place-items: center; background: var(--primary-soft); color: var(--primary); }
.fl i svg { width: 21px; height: 21px; }
/* Kompakt özellik satırı: büyük kartların altında üç sütun (ör. /bilink) */
.feat-list.c3 { grid-template-columns: repeat(3, minmax(0, 1fr)); margin: 20px 0 0; }
@media (max-width: 960px) { .feat-list.c3 { grid-template-columns: 1fr; } }
.fl b { display: block; font: 800 16.5px var(--font-head); color: var(--navy); }
.fl div > span { font-size: 14.5px; color: var(--ink-2); }

/* ---------- Mükellefiyet ---------- */
.who { display: grid; grid-template-columns: 1fr auto 1fr; gap: 20px; align-items: stretch; }
.who-card { padding: 32px; border-radius: var(--radius-xl); background: var(--card); border: 1px solid var(--line); }
.who-card.must { background: var(--navy); border-color: var(--navy); color: #fff; }
.who-card small { display: inline-block; padding: 5px 12px; border-radius: 999px; font: 700 12px var(--font-body); letter-spacing: .06em; text-transform: uppercase; background: var(--primary-soft); color: var(--primary); }
.who-card.must small { background: color-mix(in srgb, #fff 12%, transparent); color: var(--logo-cyan); }
.who-card h3 { margin: 14px 0 18px; font: 800 24px var(--font-head); color: var(--navy); }
.who-card.must h3 { color: #fff; }
.who-card ul { list-style: none; display: grid; gap: 12px; }
.who-card li { display: flex; gap: 12px; font-size: 15px; color: var(--ink-2); }
.who-card.must li { color: color-mix(in srgb, #fff 82%, transparent); }
.who-card li svg { width: 20px; height: 20px; flex-shrink: 0; margin-top: 1px; color: var(--green); }
.who-card.must li svg { color: var(--logo-cyan); }
.who-or { align-self: center; width: 64px; height: 64px; border-radius: 50%; display: grid; place-items: center; background: var(--card); border: 1px solid var(--line); font: 800 13px var(--font-head); color: var(--muted); }

/* ---------- Karşılaştırma tablosu ---------- */
.cmp { max-width: 940px; margin: 0 auto; padding: 10px; border-radius: var(--radius-xl); border: 1px solid var(--line); background: var(--card); }
.cmp table { width: 100%; border-collapse: separate; border-spacing: 0; }
.cmp th, .cmp td { padding: 16px 20px; text-align: left; vertical-align: middle; font-size: 14.5px; line-height: 1.5; }
.cmp thead th { padding-top: 14px; padding-bottom: 14px; font: 700 12px var(--font-body); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.cmp thead th.me { border-radius: 18px 18px 0 0; background: var(--primary-soft); color: var(--primary); font-size: 13px; }
.cmp tbody th, .cmp tbody td { border-top: 1px solid var(--line); }
.cmp tbody th { width: 26%; font: 700 15px var(--font-head); color: var(--navy); }
.cmp td { color: var(--muted); }
.cmp td.me { background: var(--primary-soft); color: var(--ink); border-top-color: color-mix(in srgb, var(--primary) 12%, transparent); }
.cmp tbody tr:last-child td.me { border-radius: 0 0 18px 18px; }

/* ---------- Diğer e-Belgeler ---------- */
.docs { display: grid; grid-template-columns: repeat(5, 1fr); gap: 14px; }
.doc { display: flex; flex-direction: column; padding: 24px; border-radius: var(--radius-lg); background: var(--card); border: 1px solid var(--line); transition: border-color .25s, transform .25s, box-shadow .25s; }
.doc:hover { transform: translateY(-4px); box-shadow: var(--shadow); border-color: color-mix(in srgb, var(--c) 35%, transparent); }
.doc .fcard-ic { margin-bottom: 16px; }
.doc b { font: 800 19px var(--font-head); color: var(--navy); }
.doc p { margin: 8px 0 16px; font-size: 14px; color: var(--ink-2); flex: 1; }
.doc .tags { display: flex; flex-wrap: wrap; gap: 6px; }
.doc .tags span { padding: 4px 9px; border-radius: 8px; background: var(--bg); font-size: 12px; font-weight: 600; color: var(--ink-2); }

/* ---------- Yorumlar (fotoğrafsız) ---------- */
.quotes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.quote { display: flex; flex-direction: column; padding: 30px; border-radius: var(--radius-lg); background: var(--card); border: 1px solid var(--line); }
.quote::before { content: "\201C"; font: 800 64px/0.7 var(--font-head); color: var(--primary); opacity: .25; }
.quote h3 { margin: 14px 0 10px; font: 800 19px var(--font-head); color: var(--navy); }
.quote p { flex: 1; font-size: 15px; color: var(--ink-2); }
.quote .review-who { margin-top: 22px; }

@media (max-width: 1100px) {
  .ef-hero .container, .ef-intro, .ef-split { grid-template-columns: 1fr; }
  .ef-split .ph { position: static; min-height: 300px; }
  .apply { grid-template-columns: 1fr 1fr; }
  .ap::after { display: none; }
  .docs { grid-template-columns: 1fr 1fr; }
  .quotes { grid-template-columns: 1fr; }
}
@media (max-width: 760px) {
  .ef-visual { height: 460px; }
  .inv { left: 0; width: 88%; }
  .apply, .docs { grid-template-columns: 1fr; }
  .who { grid-template-columns: 1fr; }
  .who-or { justify-self: center; }
  .cmp { overflow-x: auto; }
  .cmp table { min-width: 620px; }
}
@media (prefers-reduced-motion: reduce) { .inv-send::after, .ef-float { animation: none; } }

/* ---------- e-SMM hesaplayıcı ---------- */
.calc { display: grid; grid-template-columns: 1fr 1fr; border-radius: var(--radius-xl); overflow: hidden; border: 1px solid var(--line); background: var(--card); }
.calc-in, .calc-out { padding: 36px; }
.calc-out { background: var(--navy); color: #fff; display: flex; flex-direction: column; }
.calc-step { display: block; margin-bottom: 18px; font: 700 12px var(--font-body); letter-spacing: .08em; text-transform: uppercase; color: var(--primary); }
.calc-out .calc-step { color: var(--logo-cyan); }
.calc-label { display: block; margin: 18px 0 8px; font-size: 14px; font-weight: 600; color: var(--ink-2); }
.seg { display: flex; flex-wrap: wrap; gap: 6px; padding: 4px; border-radius: 14px; background: var(--bg); }
.seg button { flex: 1; min-width: 60px; padding: 10px 12px; border: 0; border-radius: 10px; background: none; font: 600 14px var(--font-body); color: var(--ink-2); cursor: pointer; transition: background .2s, color .2s; }
.seg button.on { background: var(--card); color: var(--primary); box-shadow: 0 2px 8px -2px color-mix(in srgb, var(--navy-700) 25%, transparent); }
.calc-amount { display: flex; align-items: center; border: 1.5px solid var(--line); border-radius: 14px; padding: 0 16px; transition: border-color .2s; }
.calc-amount:focus-within { border-color: var(--primary); }
.calc-amount input { flex: 1; min-width: 0; height: 54px; border: 0; outline: 0; background: none; font: 800 22px var(--font-head); color: var(--navy); }
.calc-amount span { font-weight: 700; color: var(--muted); }
.calc-out dl { display: grid; gap: 4px; }
.calc-out dl div { display: flex; justify-content: space-between; padding: 12px 0; border-bottom: 1px solid color-mix(in srgb, #fff 10%, transparent); }
.calc-out dt { color: color-mix(in srgb, #fff 72%, transparent); }
.calc-out dd { font: 700 17px var(--font-head); }
.calc-out dl .tot { border-bottom: 0; margin-top: 6px; padding: 16px 18px; border-radius: 14px; background: color-mix(in srgb, #fff 8%, transparent); }
.calc-out dl .tot dd { font-size: 24px; color: var(--logo-cyan); }
.calc-note { margin: 18px 0 22px; font-size: 13px; color: color-mix(in srgb, #fff 60%, transparent); }
.calc-out .fin-btn { margin-top: auto; max-width: none; font-size: 16px; }
.formulas { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-top: 14px; }
.formulas div { padding: 16px 18px; border-radius: 16px; background: var(--card); border: 1px solid var(--line); font-size: 14px; color: var(--ink-2); }
.formulas b { display: block; font: 800 15px var(--font-head); color: var(--navy); margin-bottom: 2px; }

/* ---------- e-İmza: imza maketi ve paketler ---------- */
.sig-line { height: 90px; margin: 4px 0 16px; border-radius: 14px; background: var(--bg); border: 1.5px dashed var(--line); display: grid; place-items: center; color: var(--primary); }
.sig-line svg { width: 70%; height: 60px; stroke-dasharray: 600; stroke-dashoffset: 600; animation: sign 3.5s ease-in-out infinite; }
@keyframes sign { 50%, 85% { stroke-dashoffset: 0; } 100% { stroke-dashoffset: 0; opacity: 0; } }
.packs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; align-items: stretch; }
.pack { position: relative; display: flex; flex-direction: column; padding: 32px; border-radius: var(--radius-xl); background: var(--card); border: 1px solid var(--line); }
.pack.best { background: var(--navy); border-color: var(--navy); color: #fff; box-shadow: 0 30px 60px -30px color-mix(in srgb, var(--navy-700) 70%, transparent); }
.pack-badge { position: absolute; top: -13px; left: 32px; padding: 5px 12px; border-radius: 999px; background: var(--accent); color: var(--navy); font: 700 12px var(--font-body); }
.pack small { font: 700 12px var(--font-body); letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.pack.best small { color: var(--logo-cyan); }
.pack h3 { margin-top: 6px; font: 800 26px var(--font-head); color: var(--navy); }
.pack.best h3 { color: #fff; }
.pack-price { display: flex; align-items: baseline; gap: 6px; margin-top: 18px; }
.pack-price b { font: 800 52px/1 var(--font-head); letter-spacing: -.03em; color: var(--navy); }
.pack.best .pack-price b { color: #fff; }
.pack-price span { font: 800 24px var(--font-head); color: var(--muted); }
.pack-vat { margin-top: 4px; font-size: 13px; color: var(--muted); }
.pack ul { list-style: none; display: grid; gap: 10px; margin: 22px 0 28px; flex: 1; }
.pack li { display: flex; gap: 10px; font-size: 15px; color: var(--ink-2); }
.pack.best li { color: color-mix(in srgb, #fff 82%, transparent); }
.pack li svg { width: 18px; height: 18px; color: var(--green); flex-shrink: 0; margin-top: 2px; }
.pack.best li svg { color: var(--logo-cyan); }
.pack .btn { justify-content: space-between; }
.pack.best .btn-primary { background: #fff; color: var(--navy); }
.pack-legal { max-width: 820px; margin: 24px auto 0; text-align: center; font-size: 13px; color: var(--muted); }
@media (max-width: 1100px) { .calc, .packs { grid-template-columns: 1fr; } .formulas { grid-template-columns: 1fr 1fr; } }
@media (max-width: 760px) { .apply[style] { grid-template-columns: 1fr !important; } .formulas { grid-template-columns: 1fr; } .calc-in, .calc-out { padding: 26px 20px; } }
@media (prefers-reduced-motion: reduce) { .sig-line svg { animation: none; stroke-dashoffset: 0; } }

/* Animasyonlu ekran görselleri için çerçeve */
/* SVG kendi pencere kartını ve gölgesini çizer; çerçeve ek katman eklemez */
.shot-frame { background: none; }
.shot-frame img { display: block; width: 100%; height: auto; }
.shot-frame.sticky { position: sticky; top: 110px; }
@media (max-width: 1100px) { .shot-frame.sticky { position: static; } }

/* Dar ekran: paket kartı butonu taşmasın */
.pack { min-width: 0; }
.pack .btn { max-width: 100%; }
@media (max-width: 360px) { .pack { padding: 24px 20px; } }

/* Hero maketi: kutu maketin yüksekliğini alır, yüzen kartlar maketin köşelerine oturur */
.ef-visual { height: auto; padding: 10px 0 44px; }
.ef-visual .inv { position: relative; top: 0; }
.ef-float.sum { top: 64px; right: 0; }
.ef-float.ok { bottom: 0; right: 4%; }
@media (max-width: 1100px) { .ef-visual { height: auto; } }
.ef-float.sum { right: auto; left: calc(72% - 40px); }
@media (max-width: 760px) { .ef-float.sum { left: auto; right: 0; } }
.ef-float.ok { right: auto; left: calc(72% - 180px); }
@media (max-width: 760px) { .ef-float.ok { left: calc(88% - 180px); } }
.ef-hero .lead b { font-weight: 700; color: var(--navy); }
.pack.best .pack-vat { color: color-mix(in srgb, #fff 72%, transparent); }
.pack.best .pack-price span { color: color-mix(in srgb, #fff 75%, transparent); }

/* e-SMM hesaplayıcı: hero'nun sağında sade kart */
.ef-calc { position: relative; width: 100%; max-width: 460px; justify-self: end; }
.calc-min { padding: 22px; border-radius: var(--radius-xl); border: 1px solid var(--line); background: var(--card); box-shadow: var(--shadow); }
.calc-min .calc-label { margin: 12px 0 5px; font-size: 12.5px; }
.calc-min .calc-label:first-child { margin-top: 0; }
.calc-min > .seg:first-child { margin-bottom: 2px; }
.calc-min .calc-amount input { height: 42px; font-size: 18px; }
.calc-min .seg button { min-width: 0; min-height: 44px; padding: 8px 6px; font-size: 13px; white-space: nowrap; }
.calc-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.calc-min dl { margin-top: 14px; padding-top: 4px; border-top: 1px solid var(--line); }
.calc-min dl div { display: flex; justify-content: space-between; padding: 4px 0; font-size: 13px; color: var(--ink-2); }
.calc-min dd { font: 700 14px var(--font-head); color: var(--navy); }
.calc-min dl .tot { margin-top: 6px; padding: 10px 12px; border-radius: 12px; background: var(--blue-50); color: var(--navy); font-weight: 600; }
.calc-min dl .tot dd { font-size: 18px; color: var(--primary); }
.calc-min-note { margin-top: 10px; font-size: 12.5px; line-height: 1.5; color: var(--muted); }
@media (max-width: 480px) { .calc-row { grid-template-columns: 1fr; } .calc-min { padding: 22px 18px; } .calc-min .seg { gap: 4px; } .calc-min .seg button { padding: 8px 3px; font-size: 12.5px; } }
@media (max-width: 380px) { .calc-min .seg button { white-space: normal; line-height: 1.15; } }
/* Zorunluluk / kullanım kontrol listesi: başlık solda, kriterler tek kartta satır satır */
.duty { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: 56px; align-items: center; }
.duty-head h2 { font-size: clamp(28px, 4vw, 44px); font-weight: 800; color: var(--ink); }
.duty-head p { margin-top: 14px; font-size: 17px; color: var(--ink-2); }
.duty-list { padding: 10px; border-radius: var(--radius-xl); border: 1px solid var(--line); background: var(--card); box-shadow: var(--shadow); }
.duty-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 18px 20px; }
.duty-row + .duty-row { border-top: 1px solid var(--line); }
.duty-row b, .duty-foot b { display: block; font: 700 16px var(--font-head); color: var(--navy); }
.duty-row span:not(.nw), .duty-foot div > span { display: block; margin-top: 3px; font-size: 14px; color: var(--muted); }
.duty-tag { flex-shrink: 0; padding: 5px 11px; border-radius: 999px; font: 700 12px var(--font-body); font-style: normal; letter-spacing: .04em; text-transform: uppercase; background: var(--navy); color: #fff; }
.duty-tag.info { background: var(--primary-soft); color: var(--primary); text-transform: none; letter-spacing: 0; }
.duty-foot { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-top: 6px; padding: 18px 20px; border-radius: 18px; background: var(--primary-soft); }
.duty-foot div > span { color: var(--ink-2); }
.duty-foot .btn { flex-shrink: 0; }
.duty-foot div > span a { color: var(--primary); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
@media (max-width: 960px) { .duty { grid-template-columns: 1fr; gap: 28px; } }
@media (max-width: 560px) { .duty-row, .duty-foot { flex-direction: column; align-items: flex-start; gap: 10px; } }
/* Zorunluluk bölümü: başlıktan karta noktalı ok, alt kenarda yoldan geçen TIR'lar */
.duty-band { position: relative; overflow: hidden; }
.duty-band > .container { position: relative; z-index: 1; }
.duty-band .duty { grid-template-columns: minmax(0, .85fr) 120px minmax(0, 1.15fr); gap: 20px; }
.duty-arrow { width: 120px; height: 160px; overflow: visible; align-self: center; }
.duty-arrow path { fill: none; stroke: var(--primary); stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
.duty-arrow .dash { stroke-dasharray: 2 9; animation: dutyDash 2.4s linear infinite; }
.duty-road { position: absolute; left: 0; right: 0; bottom: 0; height: 52px; pointer-events: none; }
.duty-road::before { content: ""; position: absolute; left: 0; right: 0; bottom: 0; border-top: 2px dashed color-mix(in srgb, var(--primary) 35%, transparent); }
.duty-truck { position: absolute; bottom: 2px; left: 0; width: 108px; animation: dutyTruck 22s linear infinite; }
.duty-truck svg { display: block; width: 100%; height: auto; overflow: visible; filter: drop-shadow(0 6px 8px color-mix(in srgb, var(--navy-600) 18%, transparent)); }
.duty-truck.t2 { width: 92px; animation-delay: -8s; animation-duration: 26s; }
.duty-truck.t3 { width: 100px; animation-delay: -16s; animation-duration: 24s; }
.tr-box { fill: var(--card); stroke: var(--line); stroke-width: 1.5; }
.tr-line { fill: none; stroke: var(--logo-blue); stroke-width: 3; stroke-linecap: round; }
.tr-line.t2 { stroke: var(--logo-cyan); }
.tr-cab { fill: var(--primary); }
.tr-win { fill: var(--blue-100); }
.tr-chassis { fill: none; stroke: var(--navy); stroke-width: 3; stroke-linecap: round; }
.tr-wh { fill: var(--navy); stroke: var(--card); stroke-width: 2; }
@keyframes dutyTruck { from { transform: translateX(-130px); } to { transform: translateX(calc(100vw + 20px)); } }
@keyframes dutyDash { to { stroke-dashoffset: -44; } }
@media (prefers-reduced-motion: reduce) { .duty-arrow .dash, .duty-truck { animation: none; } .duty-truck.t1 { left: 24px; } .duty-truck.t2, .duty-truck.t3 { display: none; } }
/* e-İhracat: tırların yolunda rulaj yapan, ortada havalanıp tekerleklerini toplayan uçak */
.duty-band:has(.duty-plane) { padding-bottom: 170px; } /* kalkış için gökyüzü payı; uçak içeriğin arkasına girmez */
.duty-plane { position: absolute; bottom: 1px; left: 0; width: 120px; transform-origin: 70% 90%; animation: dutyPlane 18s infinite; }
.duty-plane svg { display: block; width: 100%; height: auto; overflow: visible; filter: drop-shadow(0 8px 10px color-mix(in srgb, var(--navy-600) 22%, transparent)); }
.pl-body { fill: var(--card); stroke: var(--line); stroke-width: 1.5; }
.pl-stripe { fill: none; stroke: var(--logo-blue); stroke-width: 3; stroke-linecap: round; }
.pl-cock { fill: var(--blue-100); }
.pl-wing, .pl-tail { fill: var(--primary); }
.pl-gear path { fill: none; stroke: var(--navy); stroke-width: 2; stroke-linecap: round; }
.pl-gear circle { fill: var(--navy); stroke: var(--card); stroke-width: 1.5; }
.pl-gear { animation: plGear 18s infinite; transform-box: fill-box; transform-origin: center top; }
@keyframes dutyPlane {
  0% { transform: translate(-140px, 0) rotate(0); opacity: 0; animation-timing-function: ease-in; }
  4% { opacity: 1; }
  46% { transform: translate(46vw, 0) rotate(0); animation-timing-function: ease-out; }
  52% { transform: translate(54vw, -4px) rotate(-9deg); animation-timing-function: linear; }
  76% { transform: translate(84vw, -78px) rotate(-11deg) scale(.82); opacity: 1; }
  84%, 100% { transform: translate(96vw, -104px) rotate(-11deg) scale(.7); opacity: 0; }
}
@keyframes plGear { 0%, 54% { opacity: 1; transform: none; } 60%, 100% { opacity: 0; transform: scaleY(.2); } }
@media (prefers-reduced-motion: reduce) { .duty-plane, .pl-gear { animation: none; } .duty-plane { left: 24px; } }
@media (max-width: 960px) { .duty-band .duty { grid-template-columns: 1fr; } .duty-arrow { display: none; } }
/* e-Fatura mobil hero: rozetlerin hemen altında maketin üst kısmı, "Faturayı Gönder" ilk ekranda */
@media (max-width: 560px) {
  .ef-hero-m { padding-top: 20px; }
  .ef-hero-m .container { gap: 12px; }
  .ef-hero-m h1 { margin-top: 12px; }
  .ef-hero-m .lead { margin: 12px 0 18px; font-size: 16px; }
  .ef-hero-m .ef-ctas { gap: 8px 20px; }
  .ef-hero-m .ef-points { flex-wrap: nowrap; overflow-x: auto; margin: 12px -16px 0; padding: 0 16px 2px; scrollbar-width: none; }
  .ef-hero-m .ef-points::-webkit-scrollbar { display: none; }
  .ef-hero-m .ef-points span { flex-shrink: 0; }
  .ef-hero-m .ef-visual { padding: 0; }
  .ef-hero-m .inv { width: 100%; padding: 16px; border-radius: 20px; }
  .ef-hero-m .inv-head { margin-bottom: 12px; }
  .ef-hero-m .inv-steps, .ef-hero-m .inv-field + .inv-field, .ef-hero-m .inv-lines, .ef-hero-m .inv-total, .ef-hero-m .ef-float { display: none; }
  .ef-hero-m .inv-field { margin-bottom: 12px; }
  .ef-hero-m .inv-send { height: 46px; }
}
/* Buton altı mikro metin */
.cta-micro { margin-top: 12px; font-size: 14px; color: var(--muted); }
/* e-İmza: fiyat kartları ile kampanyadaki ücretsiz e-İmzayı bağlayan bilgi şeridi */
.pack-note { display: flex; gap: 14px; align-items: flex-start; max-width: 980px; margin: 22px auto 0; padding: 16px 18px; border-radius: 16px; background: var(--primary-soft); color: var(--ink-2); font-size: 14.5px; }
.pack-note i { flex-shrink: 0; width: 36px; height: 36px; border-radius: 10px; display: grid; place-items: center; background: var(--card); color: var(--primary); }
.pack-note i svg { width: 18px; height: 18px; }
.pack-note b { color: var(--navy); }
.pack-note a { color: var(--primary); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; white-space: nowrap; }
.pack-micro { margin-top: 18px; text-align: center; font-size: 14px; color: var(--muted); }
/* e-İmza teslim hikâyesi: 16 sn'lik döngüde dört sahne, yandaki adım ve alttaki ilerleme çubuğu eşzamanlı */
.jr { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 40px; align-items: center; }
.jr-stage { position: relative; }
.jr-scene { display: block; width: 100%; height: auto; border-radius: 28px; box-shadow: 0 40px 80px -40px color-mix(in srgb, var(--navy) 70%, transparent); }
.jr-bg { fill: var(--navy); } .jr-glow.g1 { fill: var(--logo-blue); opacity: .55; } .jr-glow.g2 { fill: var(--logo-cyan); opacity: .35; }
.jr-scene .ph { opacity: 0; animation: jrPhase 16s infinite; }
.jr-scene .ph2 { animation-delay: 4s; } .jr-scene .ph3 { animation-delay: 8s; } .jr-scene .ph4 { animation-delay: 12s; }
@keyframes jrPhase { 0% { opacity: 0; } 3%, 23% { opacity: 1; } 26%, 100% { opacity: 0; } }
.jr-phone { fill: #0b1a33; stroke: color-mix(in srgb, #fff 18%, transparent); stroke-width: 2; }
.jr-screen { fill: var(--card); } .jr-head { fill: var(--primary); }
.jr-browser { fill: var(--card); } .jr-bar { fill: var(--blue-50); } .jr-url { fill: var(--card); stroke: var(--line); }
.jr-dot.r { fill: #ef6b6b; } .jr-dot.y { fill: #f5c451; } .jr-dot.g { fill: #4cc38a; }
.jr-opt2 { fill: var(--card); stroke: var(--line); stroke-width: 1.5; }
.jr-cursor { fill: var(--navy); stroke: #fff; stroke-width: 1.5; stroke-linejoin: round; transform-box: fill-box; animation: jrCursor 16s infinite; }
@keyframes jrCursor { 0% { transform: translate(-120px, 40px); } 12% { transform: none; } 100% { transform: none; } }
.jr-t-w { fill: #fff; } .jr-t-n { fill: var(--navy); } .jr-t-m { fill: var(--muted); } .jr-t-g { fill: var(--green-700); }
.jr-line { fill: var(--blue-100); }
.jr-line.l1, .jr-line.l2, .jr-line.l3 { transform-box: fill-box; transform-origin: left; animation: jrFill 16s infinite; }
.jr-line.l2 { animation-delay: .3s; } .jr-line.l3 { animation-delay: .6s; }
@keyframes jrFill { 0%, 2% { transform: scaleX(0); } 8%, 100% { transform: scaleX(1); } }
.jr-opt { fill: var(--blue-50); stroke: var(--primary); stroke-width: 1.5; }
.jr-btn { transform-box: fill-box; transform-origin: center; animation: jrPress 16s infinite; }
@keyframes jrPress { 0%, 13% { transform: none; } 15% { transform: scale(.94); } 17%, 100% { transform: none; } }
.jr-tap { fill: none; stroke: var(--primary); stroke-width: 3; opacity: 0; transform-box: fill-box; transform-origin: center; animation: jrTap 16s infinite; }
@keyframes jrTap { 0%, 13% { opacity: 0; transform: scale(.4); } 15% { opacity: .9; } 20%, 100% { opacity: 0; transform: scale(2.2); } }
.jr-scan { fill: var(--blue-50); stroke: var(--primary); stroke-width: 2; }
.jr-ok { fill: none; stroke: var(--green-700); stroke-width: 4; stroke-linecap: round; stroke-linejoin: round; }
.jr-ok.s { stroke-width: 3; } .jr-ok.w { stroke: #fff; stroke-width: 5; }
.jr-field { fill: var(--card); stroke: var(--line); stroke-width: 1.5; }
.jr-type { transform-box: fill-box; transform-origin: left; animation: jrType 16s infinite; animation-delay: 8s; }
@keyframes jrType { 0%, 3% { transform: scaleX(0); } 9%, 100% { transform: scaleX(1); } }
.jr-verify { fill: var(--navy); transform-box: fill-box; transform-origin: center; animation: jrPress 16s infinite; animation-delay: 3s; }
.jr-fieldok { opacity: 0; transform-box: fill-box; transform-origin: center; animation: jrPop 16s infinite; animation-delay: 8s; }
.jr-flow { fill: none; stroke: var(--logo-cyan); stroke-width: 3; stroke-linecap: round; stroke-dasharray: 2 9; animation: jrFlow .8s linear infinite; }
@keyframes jrFlow { to { stroke-dashoffset: -22; } }
.jr-wave { fill: none; stroke: var(--logo-cyan); stroke-width: 3; stroke-linecap: round; opacity: 0; animation: jrWave 1.2s ease-out infinite; }
.jr-wave.w2 { animation-delay: .2s; } .jr-wave.w3 { animation-delay: .4s; }
@keyframes jrWave { 0% { opacity: 0; } 30% { opacity: 1; } 100% { opacity: 0; } }
.jr-id { transform-box: fill-box; animation: jrSlide 16s infinite; animation-delay: 8s; }
@keyframes jrSlide { 0% { transform: translateX(80px) rotate(6deg); } 8%, 100% { transform: none; } }
.jr-card { fill: var(--card); stroke: var(--line); stroke-width: 1.5; } .jr-card-h { fill: var(--blue-700); }
.jr-chip { fill: var(--yellow-50); stroke: var(--yellow-700); stroke-width: 1.5; } .jr-photo { fill: var(--blue-100); }
.jr-pill { fill: var(--card); } .jr-pill2 { fill: color-mix(in srgb, #fff 14%, transparent); stroke: color-mix(in srgb, #fff 25%, transparent); }
.jr-badge { opacity: 0; animation: jrPop 16s infinite; animation-delay: 8s; transform-box: fill-box; transform-origin: center; }
@keyframes jrPop { 0%, 10% { opacity: 0; transform: scale(.8); } 13%, 100% { opacity: 1; transform: none; } }
.jr-bld { fill: color-mix(in srgb, #fff 10%, transparent); stroke: color-mix(in srgb, #fff 22%, transparent); }
.jr-win { fill: color-mix(in srgb, var(--logo-cyan) 45%, transparent); } .jr-door { fill: var(--primary); }
.jr-road { fill: #071226; } .jr-lane { stroke: color-mix(in srgb, #fff 45%, transparent); stroke-width: 3; stroke-dasharray: 22 18; animation: jrLane .9s linear infinite; }
@keyframes jrLane { to { stroke-dashoffset: -40; } }
.jr-van { animation: jrDrive 16s infinite; animation-delay: 4s; }
@keyframes jrDrive { 0% { transform: translateX(-380px); } 14%, 100% { transform: translateX(0); } }
.jr-vbox { fill: var(--card); } .jr-vs { stroke: var(--logo-blue); stroke-width: 4; stroke-linecap: round; } .jr-vs.s2 { stroke: var(--logo-cyan); }
.jr-vcab { fill: var(--primary); } .jr-vwin { fill: var(--blue-100); } .jr-wh { fill: #0b1a33; stroke: #fff; stroke-width: 3; }
.jr-pkg { opacity: 0; animation: jrDrop 16s infinite; animation-delay: 4s; }
@keyframes jrDrop { 0%, 15% { opacity: 0; transform: translateY(-30px); } 19%, 100% { opacity: 1; transform: none; } }
.jr-box { fill: var(--yellow-50); stroke: var(--yellow-700); stroke-width: 1.5; } .jr-tape { stroke: var(--yellow-700); stroke-width: 1.5; }
.jr-reader { fill: #0b1a33; stroke: color-mix(in srgb, #fff 22%, transparent); stroke-width: 2; }
.jr-led { fill: var(--logo-cyan); animation: jrBlink 1s steps(2) infinite; }
@keyframes jrBlink { 50% { opacity: .2; } }
.jr-doc { fill: var(--card); } .jr-sigline { stroke: var(--line); stroke-width: 2; stroke-dasharray: 4 6; }
.jr-sig { fill: none; stroke: var(--navy); stroke-width: 3.5; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 420; stroke-dashoffset: 420; animation: jrSign 16s infinite; animation-delay: 12s; }
@keyframes jrSign { 0%, 3% { stroke-dashoffset: 420; } 14%, 100% { stroke-dashoffset: 0; } }
.jr-stamp { opacity: 0; transform-box: fill-box; transform-origin: center; animation: jrStamp 16s infinite; animation-delay: 12s; }
@keyframes jrStamp { 0%, 14% { opacity: 0; transform: scale(1.6) rotate(-12deg); } 17%, 100% { opacity: 1; transform: rotate(-8deg); } }
.jr-stamp-c { fill: var(--green-700); }
.jr-prog { position: absolute; left: 28px; right: 28px; bottom: 18px; display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.jr-prog i { height: 4px; border-radius: 4px; background: color-mix(in srgb, #fff 18%, transparent); overflow: hidden; position: relative; }
.jr-prog i::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, var(--logo-blue), var(--logo-cyan)); transform: scaleX(0); transform-origin: left; animation: jrBar 16s linear infinite; }
.jr-prog i:nth-child(2)::after { animation-delay: 4s; } .jr-prog i:nth-child(3)::after { animation-delay: 8s; } .jr-prog i:nth-child(4)::after { animation-delay: 12s; }
@keyframes jrBar { 0% { transform: scaleX(0); } 25% { transform: scaleX(1); } 25.1%, 100% { transform: scaleX(0); } }
.jr-steps { list-style: none; display: grid; gap: 10px; }
.jr-steps li { display: flex; gap: 14px; align-items: flex-start; padding: 16px 18px; border-radius: 18px; border: 1px solid transparent; animation: jrStep 16s infinite; }
.jr-steps li.j2 { animation-delay: 4s; } .jr-steps li.j3 { animation-delay: 8s; } .jr-steps li.j4 { animation-delay: 12s; }
@keyframes jrStep { 0%, 24% { background: var(--card); border-color: var(--line); box-shadow: var(--shadow); } 26%, 100% { background: transparent; border-color: transparent; box-shadow: none; } }
.jr-steps i { flex-shrink: 0; width: 44px; height: 44px; border-radius: 14px; display: grid; place-items: center; background: var(--primary-soft); color: var(--primary); }
.jr-steps i svg { width: 22px; height: 22px; }
.jr-steps b { display: block; font: 800 17px var(--font-head); color: var(--navy); }
.jr-steps span:not(.nw) { display: block; margin-top: 4px; font-size: 14.5px; line-height: 1.55; color: var(--ink-2); }
@media (max-width: 960px) { .jr { grid-template-columns: 1fr; gap: 24px; } }
@media (prefers-reduced-motion: reduce) {
  .jr *, .jr *::after { animation: none !important; }
  .jr-scene .ph { opacity: 0; } .jr-scene .ph4 { opacity: 1; }
  .jr-sig { stroke-dashoffset: 0; } .jr-stamp, .jr-pkg, .jr-badge { opacity: 1; }
  .jr-steps li { background: var(--card); border-color: var(--line); }
}
/* Kampanya alt sayfaları (QNB Dijital Köprü, Davet Et Kazan): hero'da iş ortağı logosu ve görsel */
.cp-logos { margin-top: 18px; }
.cp-logos img { width: auto; height: 34px; }
.cp-hero h1 { margin-top: 16px; }
.cp-visual { display: grid; place-items: center; }
.cp-visual img { width: min(100%, 440px); height: auto; filter: drop-shadow(0 30px 40px color-mix(in srgb, var(--navy) 25%, transparent)); }
@media (max-width: 960px) { .cp-visual img { width: min(80%, 320px); } }

/* Davet Et Kazan: hero'da siz ↔ arkadaşınız sahnesi */
.dv-scene { display: block; width: min(100%, 520px); height: auto; }
.dv-box { fill: var(--card); stroke: var(--line); stroke-width: 1.5; filter: drop-shadow(0 20px 30px color-mix(in srgb, var(--navy) 14%, transparent)); }
.dv-av.a1 { fill: var(--primary); } .dv-av.a2 { fill: var(--logo-cyan); }
.dv-av-i { fill: none; stroke: #fff; stroke-width: 3; stroke-linecap: round; }
.dv-t { fill: var(--navy); } .dv-s { fill: var(--muted); } .dv-bt { fill: #fff; }
.dv-link { fill: none; stroke: var(--primary); stroke-width: 3; stroke-linecap: round; stroke-dasharray: 2 10; animation: dvFlow 1.4s linear infinite; }
@keyframes dvFlow { to { stroke-dashoffset: -24; } }
.dv-env { animation: dvEnv 3.2s ease-in-out infinite; }
@keyframes dvEnv { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }
.dv-env-b { fill: var(--card); stroke: var(--primary); stroke-width: 2; } .dv-env-f { fill: none; stroke: var(--primary); stroke-width: 2; stroke-linejoin: round; }
.dv-badge { transform-box: fill-box; transform-origin: center; animation: dvPop 3.2s ease-in-out infinite; }
.dv-badge.b2 { animation-delay: .4s; }
@keyframes dvPop { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.08); } }
.dv-pill { fill: var(--navy); } .dv-pt { fill: #fff; }
@media (prefers-reduced-motion: reduce) { .dv-link, .dv-env, .dv-badge { animation: none; } }
/* SSS sayfası başlığı */
.sss-hero { padding-top: 40px; }
.sss-hero .section-head { margin-top: 18px; }
.sss-hero h1 { font: 800 clamp(34px, 5vw, 56px)/1.08 var(--font-head); letter-spacing: -.03em; color: var(--navy); }
@media (max-width: 960px) { .sss-page .faq-side { order: 2; } }

/* Kullanım videoları: YouTube küçük resimleri, bağlantı (gömme yok) */
.vd-hero { padding-top: 40px; }
.vd-top { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: 48px; align-items: center; margin-top: 18px; }
.vd-hero h1 { font: 800 clamp(34px, 5vw, 56px)/1.08 var(--font-head); letter-spacing: -.03em; color: var(--navy); }
.vd-hero h1 em { font-style: normal; color: var(--primary); }
.vd-hero .lead { margin: 16px 0 28px; font-size: 18px; color: var(--ink-2); max-width: 540px; }
.vd-nav { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 10px; padding: 14px; border-radius: var(--radius-xl); background: var(--card); border: 1px solid var(--line); }
.vd-nav-h { margin-right: 6px; font: 700 13px var(--font-body); letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.vd-topics + .vd-group { padding-top: 28px !important; }
.vd-nav a { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 8px 14px; border-radius: 999px; border: 1px solid var(--line); background: var(--card); font: 600 14px var(--font-body); color: var(--ink); text-decoration: none; transition: border-color .2s, color .2s; }
.vd-nav a:hover { border-color: var(--primary); color: var(--primary); }
.vd-nav svg { width: 18px; height: 18px; color: var(--primary); }
.vd-nav a > span { padding: 1px 8px; border-radius: 999px; background: var(--primary-soft); color: var(--blue-700); font-size: 12px; font-weight: 700; }
.vd-group { scroll-margin-top: 90px; }
.vd-head { display: flex; gap: 16px; align-items: flex-start; margin-bottom: 24px; }
.vd-ic { flex-shrink: 0; display: grid; place-items: center; width: 48px; height: 48px; border-radius: 14px; background: var(--primary-soft); color: var(--primary); }
.vd-ic svg { width: 24px; height: 24px; }
.vd-head h2 { font: 800 clamp(24px, 3vw, 32px)/1.15 var(--font-head); color: var(--navy); letter-spacing: -.02em; }
.vd-head p { margin-top: 4px; color: var(--ink-2); }
.vd-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; }
.vd { display: flex; flex-direction: column; border-radius: var(--radius-lg); background: var(--card); border: 1px solid var(--line); overflow: hidden; text-decoration: none; color: inherit; transition: transform .25s, box-shadow .25s, border-color .25s; }
.vd:hover { transform: translateY(-4px); box-shadow: var(--shadow); border-color: var(--blue-200); }
.vd:focus-visible { outline: 3px solid var(--primary); outline-offset: 3px; }
.vd-thumb { position: relative; display: block; aspect-ratio: 16 / 9; background: var(--gray-200); }
.vd-thumb img { display: block; width: 100%; height: 100%; object-fit: cover; }
.vd-play { position: absolute; left: 10px; bottom: 10px; width: 40px; height: 40px; border-radius: 50%; background: color-mix(in srgb, var(--navy-900) 80%, transparent); box-shadow: 0 6px 18px -6px color-mix(in srgb, var(--navy-900) 70%, transparent); transition: transform .25s, background .25s; }
.vd-play::after { content: ""; position: absolute; left: 15px; top: 12px; border-style: solid; border-width: 8px 0 8px 13px; border-color: transparent transparent transparent #fff; }
.vd:hover .vd-play { transform: scale(1.1); background: var(--primary); }
.vd-time { position: absolute; right: 10px; bottom: 10px; padding: 2px 8px; border-radius: 6px; background: color-mix(in srgb, var(--navy-900) 80%, transparent); color: #fff; font: 700 12.5px var(--font-body); }
.vd-body { display: flex; flex-direction: column; gap: 8px; flex: 1; padding: 16px 18px 18px; }
.vd-body b { font: 700 16px/1.35 var(--font-head); color: var(--navy); }
.vd-body small { display: inline-flex; align-items: center; gap: 6px; margin-top: auto; font: 600 13.5px var(--font-body); color: var(--blue-700); }
.vd-body small svg { width: 14px; height: 14px; }
.vd-feat { box-shadow: var(--shadow); }
.vd-feat .vd-play { left: 16px; bottom: 16px; width: 56px; height: 56px; }
.vd-feat .vd-play::after { left: 22px; top: 18px; border-width: 10px 0 10px 16px; }
.vd-feat .vd-body b { font-size: 20px; }
.vd-tag { align-self: flex-start; padding: 3px 10px; border-radius: 999px; background: var(--accent); color: var(--navy); font: 800 12px var(--font-body); letter-spacing: .04em; text-transform: uppercase; font-style: normal; }
@media (max-width: 1100px) { .vd-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 900px) { .vd-top { grid-template-columns: 1fr; gap: 32px; } .vd-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .vd-grid { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: reduce) { .vd, .vd-play { transition: none; } .vd:hover { transform: none; } }

/* Referanslar */
.ref-hero { padding-top: 40px; }
.ref-hero .section-head { margin-top: 18px; text-align: center; margin-left: auto; margin-right: auto; }
.ref-hero h1 { font: 800 clamp(38px, 6vw, 68px)/1.05 var(--font-head); letter-spacing: -.035em; color: var(--navy); }
.ref-hero h1 em { font-style: normal; background: var(--brand-gradient); -webkit-background-clip: text; background-clip: text; color: transparent; }
.ref-stats { display: flex; justify-content: center; flex-wrap: wrap; gap: 16px; margin: 28px 0 8px; }
.ref-stats > div { display: flex; flex-direction: column; align-items: center; gap: 2px; min-width: 220px; padding: 16px 24px; border-radius: var(--radius-lg); background: var(--card); border: 1px solid var(--line); }
.ref-stats b { font: 800 32px/1.1 var(--font-head); color: var(--navy); }
.ref-stats b small { font-size: 18px; color: var(--muted); }
.ref-stats > div > span { font-size: 14px; color: var(--ink-2); }
.ref-stats .stars { color: var(--yellow-600); letter-spacing: 1px; }
.ref-partners h2 { text-align: center; font: 700 14px var(--font-body); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.ref-logos { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 24px 56px; margin-top: 24px; padding: 28px; border-radius: var(--radius-xl); background: var(--card); border: 1px solid var(--line); }
.ref-logos img { height: 40px; width: auto; max-width: 200px; object-fit: contain; }
.qt-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.qt { display: flex; flex-direction: column; gap: 14px; margin: 0; padding: 24px; border-radius: var(--radius-xl); background: var(--card); border: 1px solid var(--line); border-top: 4px solid var(--c-accent); }
.qt-stars { color: var(--yellow-600); letter-spacing: 2px; }
.qt blockquote { margin: 0; flex: 1; }
.qt blockquote p { font-size: 16px; line-height: 1.6; color: var(--ink); }
.qt figcaption { display: flex; align-items: center; gap: 12px; padding-top: 14px; border-top: 1px solid var(--line); }
.qt figcaption i { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: var(--bg-a); color: var(--c); font: 800 16px var(--font-head); font-style: normal; }
.qt figcaption b { display: block; color: var(--navy); }
.qt figcaption small { color: var(--muted); font-size: 13px; }
@media (max-width: 960px) { .qt-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) { .qt-grid { grid-template-columns: 1fr; } .ref-stats > div { min-width: 0; flex: 1 1 100%; } .ref-logos { gap: 20px 32px; padding: 20px; } .ref-logos img { height: 30px; } }

/* İletişim */
.ct-hero { padding-top: 40px; }
.ct-hero .lf-info h1 { margin-top: 18px; }
.ct-channels { display: grid; gap: 12px; margin-top: 32px; max-width: 520px; }
.ct-ch { display: flex; align-items: center; gap: 14px; padding: 14px 18px; border-radius: var(--radius-lg); background: var(--card); border: 1px solid var(--line); text-decoration: none; color: inherit; transition: border-color .2s, transform .2s, box-shadow .2s; }
.ct-ch:hover { border-color: var(--blue-200); transform: translateY(-2px); box-shadow: var(--shadow); }
.ct-ch i { flex-shrink: 0; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 12px; background: var(--primary-soft); color: var(--primary); }
.ct-ch i svg { width: 20px; height: 20px; }
.ct-ch div { flex: 1; min-width: 0; }
.ct-ch small { display: block; font-size: 13px; color: var(--muted); }
.ct-ch b { font: 700 17px var(--font-head); color: var(--navy); overflow-wrap: anywhere; }
.ct-ch > svg { width: 16px; height: 16px; color: var(--primary); }
.ct-self { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; margin-top: 24px; font-size: 14px; color: var(--ink-2); }
.ct-self a { display: inline-flex; align-items: center; min-height: 44px; font-weight: 600; color: var(--blue-700); }
.ct-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 16px; }
.lf-field em { font-style: normal; font-weight: 500; color: var(--muted); }
.lf-field textarea { min-height: 128px; padding: 12px 16px; border-radius: 14px; border: 1px solid var(--line); background: var(--bg); font: 500 16px/1.5 var(--font-body); color: var(--ink); resize: vertical; }
.lf-field textarea:focus { outline: none; background: var(--card); border-color: var(--primary); box-shadow: 0 0 0 4px var(--primary-soft); }
.lf-field textarea[aria-invalid="true"] { border-color: var(--danger); box-shadow: 0 0 0 4px var(--red-50); }
.ct-consent { display: flex; align-items: flex-start; gap: 12px; margin-top: 18px; font-size: 14.5px; line-height: 1.8; color: var(--ink-2); cursor: pointer; }
.ct-consent input { flex-shrink: 0; width: 24px; height: 24px; margin: 1px 0 0; accent-color: var(--primary); }
.ct-consent input[aria-invalid="true"] { outline: 2px solid var(--danger); outline-offset: 2px; }
.ct-consent-2 { margin-top: 10px; }
.ct-consent em { font-style: normal; color: var(--muted); }
.ct-consent a { display: inline-block; padding: 6px 0; margin: -6px 0; color: var(--blue-700); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.ct-offices { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; }
.ct-office { display: flex; flex-direction: column; gap: 10px; padding: 24px; border-radius: var(--radius-xl); background: var(--card); border: 1px solid var(--line); }
.ct-office.hq { background: var(--navy); border-color: var(--navy); color: #fff; }
.ct-o-top { display: flex; align-items: center; gap: 12px; margin-bottom: 6px; }
.ct-code { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 12px; background: var(--primary-soft); color: var(--blue-700); font: 800 14px var(--font-head); letter-spacing: .04em; }
.ct-office.hq .ct-code { background: var(--accent); color: var(--navy); }
.ct-office h3 { font: 800 20px var(--font-head); color: var(--navy); }
.ct-office.hq h3 { color: #fff; }
.ct-o-top small { font-size: 12.5px; font-weight: 700; color: var(--cyan-300); letter-spacing: .04em; text-transform: uppercase; }
.ct-office b { font-size: 15px; color: var(--ink); }
.ct-office.hq b { color: #fff; }
.ct-office address { font-style: normal; font-size: 14.5px; line-height: 1.6; color: var(--ink-2); }
.ct-office.hq address { color: color-mix(in srgb, #fff 80%, transparent); }
.ct-legal { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 28px; margin-top: 24px; padding: 16px 24px; border-radius: var(--radius-lg); background: var(--card); border: 1px dashed var(--line); font-size: 14px; color: var(--ink-2); }
.ct-legal b { color: var(--navy); }
@media (max-width: 1100px) { .ct-offices { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) { .ct-offices, .ct-row { grid-template-columns: 1fr; } .ct-legal { justify-content: flex-start; flex-direction: column; } }

/* Kullanım videoları: tıklanınca açılan oynatıcı (iframe yalnızca açılınca yüklenir) */
.vd-modal { position: fixed; inset: 0; margin: auto; width: min(960px, calc(100vw - 32px)); max-width: none; height: fit-content; max-height: calc(100dvh - 32px); padding: 0; border: 0; border-radius: var(--radius-xl); background: var(--navy-900); color: #fff; box-shadow: 0 40px 80px -20px color-mix(in srgb, var(--navy-900) 80%, transparent); overflow: hidden; }
.vd-modal::backdrop { background: color-mix(in srgb, var(--navy-900) 78%, transparent); backdrop-filter: blur(4px); }
.vd-m-head { display: flex; align-items: center; gap: 16px; padding: 12px 12px 12px 20px; }
.vd-m-head b { flex: 1; min-width: 0; font: 700 16px/1.3 var(--font-head); }
.vd-m-form { display: contents; }
.vd-m-close { flex-shrink: 0; display: grid; place-items: center; width: 44px; height: 44px; border: 0; border-radius: 12px; background: color-mix(in srgb, #fff 10%, transparent); color: #fff; font: 400 28px/1 var(--font-body); cursor: pointer; }
.vd-m-close:hover, .vd-m-close:focus-visible { background: color-mix(in srgb, #fff 20%, transparent); }
.vd-m-close:focus-visible, .vd-m-yt:focus-visible { outline: 3px solid var(--logo-cyan); outline-offset: 2px; }
.vd-m-frame { aspect-ratio: 16 / 9; background: #000; }
.vd-m-frame iframe { display: block; width: 100%; height: 100%; border: 0; }
.vd-m-foot { display: flex; justify-content: flex-end; padding: 10px 16px; }
.vd-m-yt { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 8px; font: 600 14px var(--font-body); color: var(--cyan-300); text-decoration: none; }
.vd-m-yt svg { width: 20px; height: 20px; }
body.vd-lock { overflow: hidden; }

/* Hero fatura kartı: gönder butonu yerine durum satırı (CTA ile karışmasın) */
.inv-status { display: grid; gap: 10px; padding: 14px 16px; border-radius: 14px; background: var(--primary-soft); border: 1px solid var(--blue-100); }
.inv-st-row { display: flex; align-items: center; gap: 10px; font: 600 14.5px var(--font-body); color: var(--blue-700); }
.inv-spin { flex-shrink: 0; width: 16px; height: 16px; border-radius: 50%; border: 2px solid var(--blue-200); border-top-color: var(--primary); animation: invSpin 1s linear infinite; }
@keyframes invSpin { to { transform: rotate(360deg); } }
.inv-bar { height: 6px; border-radius: 999px; background: var(--blue-100); overflow: hidden; }
.inv-bar i { display: block; height: 100%; border-radius: inherit; background: var(--primary); transform-origin: left; animation: invFill 4s ease-in-out infinite; }
@keyframes invFill { 0% { transform: scaleX(.08); } 70%, 100% { transform: scaleX(1); } }
@media (prefers-reduced-motion: reduce) { .inv-spin { animation: none; } .inv-bar i { animation: none; transform: scaleX(.72); } }
/* SSS: erken CTA, sosyal kanıt ve öne çıkan özellikler */
.sss-ctas { justify-content: center; margin-top: 24px; }
.sss-proof { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 20px; margin-top: 18px; font-size: 14px; color: var(--ink-2); }
.sss-proof b { font: 800 15px var(--font-head); color: var(--navy); }
.sss-proof i { margin-left: 2px; font-style: normal; color: var(--yellow-600); }
.sss-proof span + span::before { content: "·"; margin-right: 20px; color: var(--line); }
.sss-usp { list-style: none; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-top: 36px; }
.sss-usp a { display: flex; align-items: center; gap: 12px; height: 100%; padding: 16px; border-radius: 18px; background: var(--card); border: 1px solid var(--line); text-decoration: none; color: inherit; transition: border-color .2s, transform .2s; }
.sss-usp a:hover { border-color: var(--blue-200); transform: translateY(-2px); }
.sss-usp i { flex-shrink: 0; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; background: var(--primary-soft); color: var(--primary); }
.sss-usp i svg { width: 20px; height: 20px; }
.sss-usp b { display: block; font: 800 14.5px/1.3 var(--font-head); color: var(--navy); }
.sss-usp small { display: block; margin-top: 2px; font-size: 12.5px; color: var(--ink-2); }
.final-cta p a { color: #fff; font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
@media (max-width: 1060px) { .sss-usp { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .sss-usp { grid-template-columns: 1fr; } .sss-proof span + span::before { display: none; } }
.ct-route { list-style: none; display: grid; gap: 10px; margin-top: 18px; max-width: 540px; }
.ct-route li { display: flex; align-items: flex-start; gap: 12px; }
.ct-r-ic { flex-shrink: 0; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 10px; background: var(--primary-soft); color: var(--primary); }
.ct-r-ic svg { width: 16px; height: 16px; }
.ct-route p { margin: 4px 0 0; font-size: 17px; line-height: 1.5; color: var(--ink-2); }
.ct-route a { font-weight: 700; color: var(--blue-700); text-decoration: underline; text-underline-offset: 3px; white-space: nowrap; }
#iletisim-form { scroll-margin-top: 100px; }
.ct-start { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; margin-top: 18px; max-width: 520px; padding: 14px 18px; border-radius: var(--radius-lg); background: var(--primary-soft); font-size: 15px; color: var(--ink-2); }
.ct-start a { display: inline-flex; align-items: center; gap: 6px; min-height: 32px; font-weight: 700; color: var(--blue-700); }
.ct-start a svg { width: 15px; height: 15px; transition: transform .2s; }
.ct-start a:hover svg { transform: translate(2px, -2px); }
/* SSS: liste boyunca görünen dönüşüm noktası */
.faq-start { display: grid; gap: 6px; margin-bottom: 16px; padding: 20px; border-radius: var(--radius-lg); background: var(--navy); color: #fff; }
.faq-start b { font: 800 18px var(--font-head); }
.faq-start span { font-size: 14px; color: color-mix(in srgb, #fff 78%, transparent); }
.faq-start .btn { justify-self: start; margin-top: 8px; }

/* QNB kampanyası: ücretsiz kullanım zaman çizgisi */
.tl { list-style: none; position: relative; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.tl::before { content: ""; position: absolute; left: 8%; right: 8%; top: 17px; height: 2px; background: linear-gradient(90deg, var(--blue-200), var(--primary), var(--navy)); }
.tl-step { position: relative; display: flex; flex-direction: column; gap: 12px; }
.tl-when { position: relative; z-index: 1; align-self: flex-start; padding: 7px 14px; border-radius: 999px; background: var(--primary); color: #fff; font: 800 14px var(--font-head); box-shadow: 0 0 0 6px var(--bg); }
.tl-step.dark .tl-when { background: var(--navy); }
.tl-card { flex: 1; padding: 24px; border-radius: var(--radius-xl); background: var(--card); border: 1px solid var(--line); }
.tl-step.dark .tl-card { background: var(--navy); border-color: var(--navy); color: #fff; }
.tl-ic { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 14px; background: var(--primary-soft); color: var(--primary); }
.tl-ic svg { width: 22px; height: 22px; }
.tl-step.dark .tl-ic { background: color-mix(in srgb, #fff 12%, transparent); color: var(--accent); }
.tl-card h3 { margin-top: 14px; font: 800 20px/1.25 var(--font-head); color: var(--navy); }
.tl-step.dark .tl-card h3 { color: #fff; }
.tl-card p { margin-top: 6px; font-size: 15px; color: var(--ink-2); }
.tl-step.dark .tl-card p { color: color-mix(in srgb, #fff 78%, transparent); }
.tl-cond { padding: 0 6px; font-size: 13.5px; font-weight: 600; color: var(--ink-2); }
.tl-cond a { color: var(--blue-700); }
.cp-faq { max-width: 860px; }
.cp-hero .cta-note a { color: var(--blue-700); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
@media (max-width: 900px) { .tl { grid-template-columns: 1fr; gap: 16px; } .tl::before { left: 17px; right: auto; top: 8px; bottom: 8px; width: 2px; height: auto; background: linear-gradient(180deg, var(--blue-200), var(--primary), var(--navy)); } .tl-step { padding-left: 0; } }

/* Davet Et Kazan: kampanya şartları kartları */
.dv-terms { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.dv-term { display: flex; flex-direction: column; gap: 18px; padding: 28px; border-radius: var(--radius-xl); background: var(--card); border: 1px solid var(--line); }
.dv-term-h { display: flex; align-items: center; gap: 12px; }
.dv-term-ic { flex-shrink: 0; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 14px; background: var(--primary-soft); color: var(--primary); }
.dv-term-ic svg { width: 22px; height: 22px; }
.dv-term h3 { font: 800 19px var(--font-head); color: var(--navy); }
.dv-term dl { display: grid; gap: 14px; margin: 0; }
.dv-term dl > div { padding-top: 14px; border-top: 1px solid var(--line); }
.dv-term dt { font: 700 15px var(--font-head); color: var(--navy); }
.dv-term dd { margin: 4px 0 0; font-size: 14.5px; line-height: 1.55; color: var(--ink-2); }
.dv-term dd b { color: var(--blue-700); }
.dv-term.dark { background: var(--navy); border-color: var(--navy); }
.dv-term.dark .dv-term-ic { background: color-mix(in srgb, #fff 12%, transparent); color: var(--accent); }
.dv-term.dark h3, .dv-term.dark dt { color: #fff; }
.dv-term.dark dd { color: color-mix(in srgb, #fff 80%, transparent); }
.dv-term.dark dl > div { border-top-color: color-mix(in srgb, #fff 16%, transparent); }
.dv-term.dark dd b { color: var(--accent); }
.dv-terms-note { margin-top: 16px; text-align: center; font-size: 13.5px; color: var(--muted); }
.dv-start { display: flex; align-items: center; justify-content: space-between; gap: 20px 32px; margin-top: 28px; padding: 24px 28px; border-radius: var(--radius-xl); background: var(--primary-soft); border: 1px solid var(--blue-100); }
.dv-start b { display: block; font: 800 18px var(--font-head); color: var(--navy); }
.dv-start span { display: block; margin-top: 4px; font-size: 15px; color: var(--ink-2); }
@media (max-width: 960px) { .dv-terms { grid-template-columns: 1fr; } .dv-start { flex-direction: column; align-items: flex-start; } }

/* Davet Et Kazan hero: davetiye sahnesi, renkli arka plan, konfeti */
.dv-hero { background: radial-gradient(45% 60% at 85% 20%, color-mix(in srgb, var(--logo-cyan) 22%, transparent), transparent 70%), radial-gradient(40% 55% at 60% 95%, color-mix(in srgb, var(--accent) 26%, transparent), transparent 70%), radial-gradient(45% 60% at 5% 10%, color-mix(in srgb, var(--logo-blue) 16%, transparent), transparent 70%), var(--bg); }
.dv-hero h1 .dv-grad { background: linear-gradient(90deg, var(--logo-blue), var(--logo-mid) 55%, var(--logo-cyan)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.dv-hero h1 .dv-grad .nw { color: inherit; }
.dv2 { display: block; width: min(100%, 560px); height: auto; overflow: visible; }
.dv2-glow.g1 { fill: color-mix(in srgb, var(--logo-blue) 14%, transparent); } .dv2-glow.g2 { fill: color-mix(in srgb, var(--accent) 22%, transparent); }
.dv2-path { fill: none; stroke: var(--primary); stroke-width: 2.5; stroke-linecap: round; stroke-dasharray: 2 9; animation: dv2Flow 1.4s linear infinite; }
@keyframes dv2Flow { to { stroke-dashoffset: -22; } }
.dv2-env-back { fill: var(--navy-600); }
.dv2-env-front { fill: var(--navy); }
.dv2-env-line { fill: none; stroke: color-mix(in srgb, #fff 18%, transparent); stroke-width: 2; stroke-linejoin: round; }
.dv2-card { animation: dv2Rise 2.8s .4s cubic-bezier(.25, .7, .25, 1) both, dv2Bob 5s 3.2s ease-in-out infinite; }
@keyframes dv2Rise { from { transform: translateY(200px); } to { transform: translateY(0); } }
@keyframes dv2Bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }
.dv2-card-bg { fill: var(--card); }
.dv2-pill { fill: var(--accent); } .dv2-pill-t { fill: var(--navy); }
.dv2-t { fill: var(--navy); } .dv2-s { fill: var(--ink-2); }
.dv2-seal-c { fill: var(--accent); stroke: var(--card); stroke-width: 4; } .dv2-seal-i { fill: none; stroke: var(--navy); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.dv2-seal { transform-box: fill-box; transform-origin: center; animation: dv2Pop 2.6s 3.2s ease-in-out infinite; }
@keyframes dv2Pop { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.12); } }
.dv2-av.a1 .dv2-av-c { fill: var(--primary); } .dv2-av.a2 .dv2-av-c { fill: var(--logo-cyan); }
.dv2-av-i { fill: none; stroke: #fff; stroke-width: 3; stroke-linecap: round; }
.dv2-av.a2 .dv2-av-i { stroke: var(--navy); }
.dv2-tag { fill: var(--navy); } .dv2-tag-t { fill: #fff; }
.dv2-av { animation: dv2Bob 4.4s ease-in-out infinite; } .dv2-av.a2 { animation-delay: -2.2s; }
.dv2-conf .k1 { fill: var(--accent); } .dv2-conf .k2 { fill: var(--logo-cyan); } .dv2-conf .k3 { fill: var(--primary); } .dv2-conf .k4 { fill: var(--indigo-500); }
.dv2-conf > * { transform-box: fill-box; transform-origin: center; animation: dv2Tw 3.2s ease-in-out infinite; }
.dv2-conf .d2 { animation-delay: -.8s; } .dv2-conf .d3 { animation-delay: -1.6s; } .dv2-conf .d4 { animation-delay: -2.4s; }
@keyframes dv2Tw { 0%, 100% { transform: translateY(0) rotate(0); opacity: .9; } 50% { transform: translateY(-8px) rotate(25deg); opacity: .5; } }
@media (prefers-reduced-motion: reduce) { .dv2-path, .dv2-card, .dv2-seal, .dv2-av, .dv2-conf > * { animation: none; } }

/* QNB kampanyası: KolayBi ile neler yapabilirsiniz */
.kb-feats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.kb-feat { display: flex; flex-direction: column; gap: 8px; padding: 22px; border-radius: var(--radius-xl); background: var(--card); border: 1px solid var(--line); text-decoration: none; color: inherit; transition: border-color .2s, transform .2s, box-shadow .2s; }
.kb-feat:hover { border-color: var(--blue-200); transform: translateY(-3px); box-shadow: var(--shadow); }
.kb-feat i { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 14px; background: var(--primary-soft); color: var(--primary); }
.kb-feat i svg { width: 22px; height: 22px; }
.kb-feat b { margin-top: 6px; font: 800 17px var(--font-head); color: var(--navy); }
.kb-feat > span { font-size: 14.5px; color: var(--ink-2); }
@media (max-width: 1060px) { .kb-feats { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .kb-feats { grid-template-columns: 1fr; } }

/* Sahne şeridi (e-Fatura, e-Arşiv): bölüm alt kenarında iki kişi arasında giden belge / kağıt uçak */
.scene-band { position: relative; overflow: hidden; padding-bottom: 290px; }
.scene-band > .container { position: relative; z-index: 1; }
.scene { position: absolute; left: 0; right: 0; bottom: 56px; height: 160px; pointer-events: none; } /* altındaki bölüme (kampanya kartı) değmesin */
.scene::before { content: ""; position: absolute; left: 0; right: 0; bottom: 0; border-top: 2px dashed color-mix(in srgb, var(--primary) 35%, transparent); }
.scene svg { display: block; width: 100%; height: auto; overflow: visible; }
.sc-desk-l, .sc-desk-r { position: absolute; bottom: 0; width: 168px; }
.sc-desk-l { left: max(16px, 7%); }
.sc-desk-r { right: max(16px, 7%); transform: scaleX(-1); }
.sc-stand { position: absolute; bottom: 0; right: max(16px, 9%); width: 104px; }
.sc-chair { fill: none; stroke: var(--navy-500); stroke-width: 4; stroke-linecap: round; }
.sc-seat { fill: var(--navy-500); }
.sc-leg { fill: none; stroke: var(--navy); stroke-width: 3; stroke-linecap: round; }
.sc-pants { fill: none; stroke: var(--navy); stroke-width: 7; stroke-linecap: round; stroke-linejoin: round; }
.sc-torso { fill: var(--primary); }
.sc-torso.sc-alt { fill: var(--logo-cyan); }
.sc-head { fill: var(--navy-100); }
.sc-hair { fill: var(--navy); }
.sc-arm { fill: none; stroke: var(--blue-700); stroke-width: 5; stroke-linecap: round; stroke-linejoin: round; }
.sc-desk { fill: var(--navy); }
.sc-mon { fill: var(--card); stroke: var(--line); stroke-width: 1.5; }
.sc-screen { fill: var(--blue-50); }
.sc-desk-r .sc-check { transform: scaleX(-1); transform-box: fill-box; transform-origin: center; } /* aynalı masada onay işareti düz görünsün */
.sc-check { fill: none; stroke: var(--green-500, #1F9D55); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; opacity: 0; }
.sc-sheet { fill: var(--card); stroke: var(--line); stroke-width: 1.5; }
.sc-fold { fill: var(--blue-50); stroke: var(--line); stroke-width: 1.5; stroke-linejoin: round; }
.sc-line { fill: none; stroke: var(--logo-blue); stroke-width: 2.6; stroke-linecap: round; }
/* Uçan parça: soldaki ekrandan (e-Arşiv'de elden) çıkar, yay çizerek karşıya iner */
.sc-fly { position: absolute; bottom: 92px; left: calc(max(16px, 7%) + 116px); width: 36px; opacity: 0; animation: scFlyX 5s cubic-bezier(.45, 0, .55, 1) infinite; }
.sc-fly svg { animation: scFlyY 5s ease-in-out infinite; filter: drop-shadow(0 8px 10px color-mix(in srgb, var(--navy-600) 22%, transparent)); }
@keyframes scFlyX { 0%, 8% { left: calc(max(16px, 7%) + 116px); opacity: 0; } 14% { opacity: 1; } 70% { left: calc(100% - max(16px, 7%) - 152px); opacity: 1; } 78%, 100% { left: calc(100% - max(16px, 7%) - 152px); opacity: 0; } }
@keyframes scFlyY { 0%, 8% { transform: translateY(0) rotate(0); } 40% { transform: translateY(-58px) rotate(-8deg); } 70%, 100% { transform: translateY(0) rotate(6deg); } }
/* e-Arşiv: karşıdaki kişi bilgisayardan gelen ipi çeker, ipe asılı kâğıt fatura ona doğru kayar */
.sc-rope { position: absolute; left: calc(max(16px, 7%) + 150px); right: calc(max(16px, 9%) + 96px); bottom: 80px; height: 3px; border-radius: 3px; background: repeating-linear-gradient(90deg, var(--navy) 0 7px, var(--navy-500) 7px 10px); animation: scRope 1.1s linear infinite; }
@keyframes scRope { to { background-position-x: 20px; } }
.sc-paper { position: absolute; bottom: 41px; left: calc(max(16px, 7%) + 150px); width: 30px; animation: scPaper 11s ease-in-out infinite; }
.sc-paper svg { filter: drop-shadow(0 6px 8px color-mix(in srgb, var(--navy-600) 22%, transparent)); transform-origin: 50% 0; animation: scSway 1.4s ease-in-out infinite; }
.sc-clip { fill: var(--navy); }
@keyframes scPaper { 0%, 6% { left: calc(max(16px, 7%) + 150px); opacity: 0; } 12% { opacity: 1; } 80%, 94% { left: calc(100% - max(16px, 9%) - 126px); opacity: 1; } 100% { left: calc(100% - max(16px, 9%) - 126px); opacity: 0; } }
@keyframes scSway { 0%, 100% { transform: rotate(-5deg); } 50% { transform: rotate(5deg); } }
.sc-pull1, .sc-pull2 { animation: scPull 1.1s ease-in-out infinite alternate; }
.sc-pull2 { animation-delay: -.55s; }
@keyframes scPull { from { transform: translateX(-5px); } to { transform: translateX(4px); } }
/* e-SMM: kağıt uçak ekrandan çıkar, dalgalanarak süzülüp uzaklaşır */
.sc-pl { fill: var(--card); stroke: var(--primary); stroke-width: 1.6; stroke-linejoin: round; }
.sc-pl2 { fill: var(--blue-100); stroke: var(--primary); stroke-width: 1.6; stroke-linejoin: round; }
.sc-glide { position: absolute; bottom: 92px; left: calc(max(16px, 7%) + 120px); width: 46px; opacity: 0; animation: scGlideX 12s linear infinite; }
.sc-glide > span { display: block; animation: scGlideY 12s ease-in-out infinite; }
.sc-glide svg { filter: drop-shadow(0 10px 10px color-mix(in srgb, var(--navy-600) 20%, transparent)); }
@keyframes scGlideX { 0% { left: calc(max(16px, 7%) + 120px); opacity: 0; } 5% { opacity: 1; } 88% { opacity: 1; } 100% { left: calc(100% + 20px); opacity: 0; } }
@keyframes scGlideY {
  0% { transform: translateY(0) rotate(-12deg); }
  14% { transform: translateY(-46px) rotate(-6deg); }
  28% { transform: translateY(-14px) rotate(10deg); }
  44% { transform: translateY(-62px) rotate(-10deg); }
  60% { transform: translateY(-26px) rotate(9deg); }
  76% { transform: translateY(-72px) rotate(-8deg); }
  100% { transform: translateY(-40px) rotate(6deg); }
}
/* Belge ulaşınca sağdaki ekranda onay işareti */
.sc-desk-r .sc-check { animation: scCheck 5s infinite; }
@keyframes scCheck { 0%, 70% { opacity: 0; } 74%, 94% { opacity: 1; } 100% { opacity: 0; } }
@media (max-width: 600px) { .sc-desk-l, .sc-desk-r { width: 112px; } .sc-stand { width: 70px; } .scene { height: 120px; bottom: 40px; } .scene-band { padding-bottom: 220px; } .sc-fly { bottom: 64px; left: calc(max(16px, 7%) + 76px); }
  .sc-efatura .sc-fly { animation-name: scFlyXm; }
  .sc-glide { width: 34px; bottom: 62px; left: calc(max(16px, 7%) + 84px); animation-name: scGlideXm; }
  .sc-rope { left: calc(max(16px, 7%) + 100px); right: calc(max(16px, 9%) + 64px); bottom: 53px; }
  .sc-paper { width: 22px; bottom: 23px; animation-name: scPaperM; } }
@keyframes scGlideXm { 0% { left: calc(max(16px, 7%) + 84px); opacity: 0; } 5% { opacity: 1; } 88% { opacity: 1; } 100% { left: calc(100% + 20px); opacity: 0; } }
@keyframes scPaperM { 0%, 6% { left: calc(max(16px, 7%) + 100px); opacity: 0; } 12% { opacity: 1; } 80%, 94% { left: calc(100% - max(16px, 9%) - 86px); opacity: 1; } 100% { left: calc(100% - max(16px, 9%) - 86px); opacity: 0; } }
@keyframes scFlyXm { 0%, 8% { left: calc(max(16px, 7%) + 76px); opacity: 0; } 14% { opacity: 1; } 70% { left: calc(100% - max(16px, 7%) - 104px); opacity: 1; } 78%, 100% { left: calc(100% - max(16px, 7%) - 104px); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .sc-fly, .sc-fly svg, .sc-check, .sc-arm, .sc-rope, .sc-paper, .sc-glide, .sc-glide > span { animation: none; } .sc-glide { opacity: 1; left: 40%; } .sc-fly { display: none; } .sc-desk-r .sc-check { opacity: 1; } }

/* e-Arşiv: "GİB Portal mı, KolayBi mi?" — sağda ücretsiz portal rehberi kaynak olarak */
.gib-vs { align-items: center; }
.gib-vs-src { display: grid; gap: 12px; align-content: center; }
.gib-vs-lbl { font: 700 13px var(--font-body); letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.gib-vs-src .posts { grid-template-columns: 1fr; max-width: 440px; }
/* Video kartı: başlığın altında tek satırlık sonuç cümlesi */
.vd-sum { font-size: 14px; line-height: 1.45; color: var(--ink-2); }