/* vardIK tanıtım sitesi — Tailwind'e ek özel stiller. */
:root {
    --brand: #ba1f24;
    --brand-dark: #9c191d;
    --ink: #16181d;
    --cream: #f6f3ef;
}

html { -webkit-tap-highlight-color: transparent; }
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
::selection { background: var(--brand); color: #fff; }

.material-symbols-outlined { font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24; }
.icon-fill { font-variation-settings: 'FILL' 1, 'wght' 500, 'GRAD' 0, 'opsz' 24; }

/* Marka yazımı: vard + kırmızı IK */
.brand-word b { color: var(--brand); font-weight: inherit; }

/* Arka plan desenleri */
.grid-bg {
    background-image:
        linear-gradient(rgba(255,255,255,.09) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,.09) 1px, transparent 1px);
    background-size: 36px 36px;
}
.grid-bg-light {
    background-image:
        linear-gradient(rgba(15,23,42,.05) 1px, transparent 1px),
        linear-gradient(90deg, rgba(15,23,42,.05) 1px, transparent 1px);
    background-size: 44px 44px;
    -webkit-mask-image: radial-gradient(ellipse at 30% 20%, #000 20%, transparent 70%);
            mask-image: radial-gradient(ellipse at 30% 20%, #000 20%, transparent 70%);
}
.noise::after {
    content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .06; mix-blend-mode: overlay;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence baseFrequency='.8' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* Kayan şerit */
.marquee { -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.marquee-track { display: flex; width: max-content; animation: marquee 38s linear infinite; }
.marquee:hover .marquee-track { animation-play-state: paused; }
@keyframes marquee { to { transform: translateX(-50%); } }

/* Yüzen telefon */
.float-y { animation: floatY 6s ease-in-out infinite; }
.float-y-slow { animation: floatY 8s ease-in-out infinite; }
@keyframes floatY { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-14px); } }

/* Hero giriş animasyonu (JS olmadan da çalışır) */
.hero-in > * { opacity: 0; transform: translateY(24px); animation: heroIn .9s cubic-bezier(.2,.7,.2,1) forwards; }
.hero-in > *:nth-child(1) { animation-delay: .05s; }
.hero-in > *:nth-child(2) { animation-delay: .15s; }
.hero-in > *:nth-child(3) { animation-delay: .28s; }
.hero-in > *:nth-child(4) { animation-delay: .4s; }
.hero-in > *:nth-child(5) { animation-delay: .52s; }
.hero-in > *:nth-child(6) { animation-delay: .64s; }
@keyframes heroIn { to { opacity: 1; transform: none; } }

/* Bildirim kartı geçişi */
.toast-swap { transition: opacity .45s ease, transform .45s ease; }
.toast-swap.is-out { opacity: 0; transform: translateY(8px) scale(.98); }

/* Radar / konum */
.radar-ring { position: absolute; inset: 0; border-radius: 9999px; border: 2px solid rgba(186,31,36,.55); animation: radar 2.6s ease-out infinite; }
.radar-ring:nth-child(2) { animation-delay: .85s; }
.radar-ring:nth-child(3) { animation-delay: 1.7s; }
@keyframes radar { from { transform: scale(.25); opacity: 1; } to { transform: scale(1); opacity: 0; } }
.pin-drop { animation: pinBounce 2.6s ease-in-out infinite; }
@keyframes pinBounce { 0%, 100% { transform: translate(-50%, -100%); } 50% { transform: translate(-50%, calc(-100% - 6px)); } }

/* Canlı QR */
.qr-live svg { transition: opacity .35s ease; }
.qr-live.is-swapping svg { opacity: 0; }
.qr-ring { transform: rotate(-90deg); }
.qr-ring circle:last-child { transition: stroke-dashoffset 1s linear; }

/* Doğrulama sekmeleri */
.mode-tab { position: relative; overflow: hidden; }
.mode-tab .mode-progress { position: absolute; left: 0; bottom: 0; height: 3px; width: 0; background: var(--brand); }
.mode-tab[aria-selected="true"] .mode-progress { animation: modeProgress var(--mode-duration, 7s) linear forwards; }
.mode-tab[aria-selected="true"].is-paused .mode-progress { animation-play-state: paused; }
@keyframes modeProgress { to { width: 100%; } }
.mode-stage [data-show] { transition: opacity .5s ease, transform .5s ease, filter .5s ease; }
.mode-stage [data-show].is-hidden { opacity: .14; transform: scale(.96); filter: grayscale(1); }
/* Mobilde alt alta dizildiği için seçili olmayan demo kartı soluk bir boşluk bırakmasın */
@media (max-width: 639px) { .mode-stage [data-show].is-hidden { display: none; } }

/* Akış çizgisi */
.flow-line-fill { transform-origin: left center; transform: scaleX(0); }
@media (max-width: 1023px) { .flow-line-fill { transform-origin: top center; transform: scaleY(0); } }

/* SSS */
details.faq summary::-webkit-details-marker { display: none; }
details.faq summary { list-style: none; }
details.faq .faq-icon { transition: transform .3s ease; }
details.faq[open] .faq-icon { transform: rotate(45deg); }
details.faq[open] { background: #fff; box-shadow: 0 10px 30px -12px rgba(15,23,42,.15); border-color: transparent; }

/* Form seçim kutucukları */
.chip input { position: absolute; opacity: 0; pointer-events: none; }
.chip > span {
    display: inline-flex; align-items: center; gap: .4rem; cursor: pointer; user-select: none;
    padding: .6rem .95rem; border-radius: .8rem; border: 1px solid #e2e8f0; background: #fff;
    font-size: .875rem; font-weight: 600; color: #334155; transition: all .18s ease;
}
.chip > span:hover { border-color: #f7caca; color: var(--brand); }
.chip input:checked + span { border-color: var(--brand); background: #fdf3f3; color: var(--brand-dark); box-shadow: 0 0 0 3px rgba(186,31,36,.12); }
.chip input:focus-visible + span { outline: 2px solid var(--brand); outline-offset: 2px; }

.field { position: relative; }
.field input, .field textarea {
    width: 100%; border-radius: .9rem; border: 1px solid #e2e8f0; background: #fff;
    padding: 1.35rem 1rem .55rem 2.9rem; font-size: 1rem; color: var(--ink); transition: border-color .18s, box-shadow .18s;
}
.field textarea { padding-left: 1rem; min-height: 96px; resize: vertical; }
.field input:focus, .field textarea:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 4px rgba(186,31,36,.12); }
.field label {
    position: absolute; left: 2.9rem; top: 1rem; font-size: 1rem; color: #94a3b8; pointer-events: none;
    transition: all .18s ease; transform-origin: left top;
}
.field textarea + label { left: 1rem; }
.field input:focus + label, .field input:not(:placeholder-shown) + label,
.field textarea:focus + label, .field textarea:not(:placeholder-shown) + label { top: .45rem; font-size: .72rem; font-weight: 600; color: #64748b; letter-spacing: .01em; }
.field .field-icon { position: absolute; left: 1rem; top: 50%; transform: translateY(-50%); color: #94a3b8; font-size: 20px; pointer-events: none; transition: color .18s; }
.field input:focus ~ .field-icon { color: var(--brand); }
.field.is-invalid input { border-color: #dc2626; box-shadow: 0 0 0 4px rgba(220,38,38,.1); }
.field.is-valid input { border-color: #10b981; }
.field .field-ok { position: absolute; right: 1rem; top: 50%; transform: translateY(-50%) scale(.6); opacity: 0; color: #10b981; transition: all .2s; }
.field.is-valid .field-ok { opacity: 1; transform: translateY(-50%) scale(1); }
.field-error { display: none; margin-top: .35rem; font-size: .8rem; color: #dc2626; font-weight: 500; }
.field.is-invalid + .field-error { display: block; }

.spinner { width: 18px; height: 18px; border-radius: 50%; border: 2.5px solid rgba(255,255,255,.35); border-top-color: #fff; animation: spin .7s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

.success-check path { stroke-dasharray: 48; stroke-dashoffset: 48; animation: draw .6s .25s ease forwards; }
.success-check circle { stroke-dasharray: 160; stroke-dashoffset: 160; animation: draw .7s ease forwards; }
@keyframes draw { to { stroke-dashoffset: 0; } }

/* Sabit WhatsApp butonu */
.wa-btn { box-shadow: 0 12px 30px -8px rgba(22,163,74,.6); }
.wa-btn::before {
    content: ""; position: absolute; inset: 0; border-radius: 9999px; background: #25d366; z-index: -1;
    animation: waPulse 2.4s ease-out infinite;
}
@keyframes waPulse { 0% { transform: scale(1); opacity: .55; } 100% { transform: scale(1.7); opacity: 0; } }
.wa-tip { opacity: 0; transform: translateX(-6px); transition: all .2s ease; pointer-events: none; }
.wa-wrap:hover .wa-tip, .wa-wrap:focus-within .wa-tip { opacity: 1; transform: none; }

/* Kaydırma ilerleme çubuğu */
#scroll-progress { transform-origin: left; transform: scaleX(0); }

/* Başlık gölgesi */
#site-header.is-scrolled { box-shadow: 0 8px 30px -12px rgba(15,23,42,.18); background: rgba(255,255,255,.92); }

/* Tablo */
.compare tbody tr { transition: background .2s; }
.compare tbody tr:hover { background: #faf8f6; }

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
    .hero-in > * { opacity: 1; transform: none; }
}

/* Lenis olmayan cihazlarda (mobil) çapa bağlantıları yumuşak kaysın */
html:not(.lenis) { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html:not(.lenis) { scroll-behavior: auto; } }