/* SiteVitrin ortak temel CSS — yalnızca yapısal/paylaşılan bileşenler.
   Her tema kendi tasarımını kendi CSS dosyasında yapar; buradaki renkler
   --sv-accent / --sv-accent-text değişkenleriyle temaya uyarlanır. */
:root { --sv-accent: #0ea5e9; --sv-accent-text: #fff; --sv-radius: 12px; }
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body { margin: 0; -webkit-font-smoothing: antialiased; }
img, svg, video, iframe { max-width: 100%; display: block; }
img { height: auto; }
a { color: inherit; }
button { font: inherit; cursor: pointer; }
input, select, textarea { font: inherit; }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---- Hero slider ---- */
.sv-slider { position: relative; overflow: hidden; }
/* Fade: yalnızca aktif slayt akışta durur, diğerleri üst üste bindirilir.
   position kuralları !important — tema CSS'i aynı özgüllükte kural yazıp
   slaytları alt alta yığmasın (aksi halde slider yüksekliği slayt sayısıyla katlanır). */
.sv-effect-fade .slide { position: absolute !important; inset: 0; opacity: 0; visibility: hidden; transition: opacity .9s ease, visibility .9s; }
.sv-effect-fade .slide.is-active { opacity: 1; visibility: visible; position: relative !important; inset: auto; }
.sv-effect-slide .sv-track { display: flex; width: 100%; height: 100%; transition: transform .8s cubic-bezier(.77,0,.18,1); }
.sv-effect-slide .slide { flex: 0 0 100%; min-width: 100%; }
.sv-slider .slide > img.bg, .sv-slider .slide-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; }
.sv-slider [data-dots] { display: flex; gap: 8px; }
.sv-slider [data-dots] button { width: 10px; height: 10px; border-radius: 50%; border: 0; padding: 0; background: rgba(255,255,255,.45); transition: .3s; }
.sv-slider [data-dots] button.is-active { background: var(--sv-accent); transform: scale(1.25); }
.sv-slider [data-prev], .sv-slider [data-next] { z-index: 5; }
/* slayt içi animasyon: .slide.is-active [data-anim] görünür olur */
.sv-slider [data-anim] { opacity: 0; transform: translateY(24px); transition: opacity .8s ease, transform .8s ease; }
.sv-slider .slide.is-active [data-anim] { opacity: 1; transform: none; }
.sv-slider .slide.is-active [data-anim="2"] { transition-delay: .2s; }
.sv-slider .slide.is-active [data-anim="3"] { transition-delay: .4s; }
.sv-slider .slide.is-active [data-anim="4"] { transition-delay: .6s; }

/* ---- Kart kaydırıcı ---- */
.sv-carousel { position: relative; }
.sv-carousel .track { display: flex; gap: 24px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; -ms-overflow-style: none; padding-bottom: 4px; }
.sv-carousel .track::-webkit-scrollbar { display: none; }
.sv-carousel .track > * { scroll-snap-align: start; flex: 0 0 calc(25% - 18px); }
@media (max-width: 1024px) { .sv-carousel .track > * { flex-basis: calc(33.333% - 16px); } }
@media (max-width: 768px) { .sv-carousel .track > * { flex-basis: calc(50% - 12px); } }
@media (max-width: 480px) { .sv-carousel .track > * { flex-basis: 85%; } }

/* ---- Reveal ---- */
[data-reveal] { opacity: 0; transform: translateY(28px); transition: opacity .8s cubic-bezier(.2,.7,.2,1), transform .8s cubic-bezier(.2,.7,.2,1); }
[data-reveal="left"] { transform: translateX(-40px); }
[data-reveal="right"] { transform: translateX(40px); }
[data-reveal="zoom"] { transform: scale(.92); }
[data-reveal].is-visible { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { [data-reveal] { opacity: 1; transform: none; transition: none; } }

/* ---- Yukarı çık ---- */
.sv-totop { position: fixed; right: 22px; bottom: 22px; z-index: 900; width: 48px; height: 48px; border-radius: 50%; border: 0; display: grid; place-items: center; background: var(--sv-accent); color: var(--sv-accent-text); box-shadow: 0 10px 30px rgba(0,0,0,.2); opacity: 0; transform: translateY(20px) scale(.8); pointer-events: none; transition: .35s; }
.sv-totop.is-visible { opacity: 1; transform: none; pointer-events: auto; }
.sv-totop:hover { transform: translateY(-4px); }

/* ---- Akordeon / sekme ---- */
[data-accordion] .acc-body { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .4s ease; }
[data-accordion] .acc-body > * { overflow: hidden; }
[data-accordion] .acc-item.is-open .acc-body { grid-template-rows: 1fr; }
[data-accordion] .acc-head { width: 100%; text-align: left; background: none; border: 0; padding: 0; color: inherit; }
[data-tabs] [data-panel] { display: none; }
[data-tabs] [data-panel].is-active { display: block; animation: svFade .4s ease; }
@keyframes svFade { from { opacity: 0; transform: translateY(6px);} to { opacity: 1; transform: none;} }

/* ---- Lightbox ---- */
.sv-lightbox { position: fixed; inset: 0; z-index: 1000; background: rgba(8,10,20,.92); display: none; align-items: center; justify-content: center; padding: 40px; }
.sv-lightbox.is-open { display: flex; animation: svFade .25s ease; }
.sv-lightbox img { max-height: 85vh; max-width: 90vw; border-radius: 8px; box-shadow: 0 30px 80px rgba(0,0,0,.5); }
.sv-lightbox button { position: absolute; background: rgba(255,255,255,.1); color: #fff; border: 0; width: 48px; height: 48px; border-radius: 50%; font-size: 30px; line-height: 1; display: grid; place-items: center; transition: .2s; }
.sv-lightbox button:hover { background: var(--sv-accent); }
.sv-lb-close { top: 20px; right: 20px; }
.sv-lb-prev { left: 20px; top: 50%; transform: translateY(-50%); }
.sv-lb-next { right: 20px; top: 50%; transform: translateY(-50%); }
.sv-lb-cap { position: absolute; bottom: 20px; left: 0; right: 0; text-align: center; color: #fff; font-size: 14px; opacity: .85; }

/* ---- Toast ---- */
.sv-toasts { position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%); z-index: 1100; display: flex; flex-direction: column; gap: 10px; pointer-events: none; }
.sv-toast { background: #111827; color: #fff; padding: 12px 20px; border-radius: 999px; font-size: 14px; box-shadow: 0 10px 30px rgba(0,0,0,.25); opacity: 0; transform: translateY(16px); transition: .3s; border-left: 4px solid var(--sv-accent); }
.sv-toast.is-in { opacity: 1; transform: none; }
.sv-toast.err { border-left-color: #ef4444; }

/* ---- Sepet rozeti ---- */
[data-cart-count].is-empty { display: none; }

/* ---- Yardımcılar ---- */
.sv-ratio { position: relative; overflow: hidden; }
.sv-ratio > img, .sv-ratio > iframe { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.sv-ratio-16x9 { aspect-ratio: 16 / 9; }
.sv-ratio-4x3 { aspect-ratio: 4 / 3; }
.sv-ratio-1x1 { aspect-ratio: 1; }
.sv-ratio-3x4 { aspect-ratio: 3 / 4; }
.sv-yt-play { position: absolute; inset: 0; display: grid; place-items: center; }
.sv-yt-play::after { content: ""; width: 64px; height: 64px; border-radius: 50%; background: rgba(255,0,0,.9) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'%3E%3Cpath d='M8 5v14l11-7z'/%3E%3C/svg%3E") center/30px no-repeat; box-shadow: 0 8px 24px rgba(0,0,0,.3); transition: .3s; }
a:hover .sv-yt-play::after { transform: scale(1.1); }