/* Genel */
:root { color-scheme: light dark; }
html.no-js { /* JS kapalıyken animasyonları azalt */ }
body { font-family: "Plus Jakarta Sans", system-ui, -apple-system, Segoe UI, Roboto, sans-serif; }

/* Skip link */
.skip-link{
	position:absolute; left:-9999px; top:auto; width:1px; height:1px; overflow:hidden;
}
.skip-link:focus{
	left:1rem; top:1rem; width:auto; height:auto; z-index:9999;
	background:#fff; color:#000; padding:.5rem .75rem; border-radius:.5rem; box-shadow:0 10px 30px -12px rgba(0,0,0,.35);
}

/* Material Symbols (Outlined) */
.material-symbols-outlined{
	font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
}

/* Marquee */
@keyframes marquee {
	0% { transform: translateX(0); }
	100% { transform: translateX(-50%); }
}
.animate-marquee{
	display:flex; width:max-content; animation: marquee 30s linear infinite;
}
.animate-marquee:hover{ animation-play-state: paused; }
@media (prefers-reduced-motion: reduce){
	.animate-marquee{ animation: none !important; }
}

/* Marquee item */
.marquee-item{
	display:flex; flex-direction:column; align-items:center; gap:.75rem; cursor:pointer; width:160px; flex-shrink:0;
}
.marquee-item span{
	font-weight:700; color:rgb(27 13 13); transition:color .2s ease;
}
.dark .marquee-item span{ color:#fff; }
.marquee-item:hover span{ color:rgb(236 19 19); }
.marquee-avatar{
	height:9.5rem; width:9.5rem; overflow:hidden; border-radius:9999px;
	border:4px solid #fff; box-shadow:0 10px 30px -16px rgba(0,0,0,.35);
	transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease;
}
.marquee-item:hover .marquee-avatar{
	transform:scale(1.08); box-shadow:0 18px 40px -20px rgba(208,32,52,.45); border-color:rgba(208,32,52,.25);
}

/* Buttons */
.btn-primary{
	display:inline-flex; align-items:center; justify-content:center;
	padding:.9rem 1.25rem; font-weight:800; border-radius:.75rem;
	background:#d02034; color:#fff; box-shadow:0 12px 32px -16px rgba(208,32,52,.5);
	transition:transform .15s ease, background .15s ease, box-shadow .15s ease;
}
.btn-primary:hover{ transform:translateY(-1px); background:#b41a2b; box-shadow:0 16px 42px -18px rgba(208,32,52,.6); }

.btn-outline{
	display:inline-flex; align-items:center; justify-content:center;
	padding:.9rem 1.25rem; font-weight:800; border-radius:.75rem;
	border:2px solid #d02034; color:#d02034; background:transparent;
	transition:all .15s ease;
}
.btn-outline:hover{ background:#d02034; color:#fff; }

.btn-secondary{
	background:#fff; color:#d02034;
	border-radius:.75rem; padding:.65rem 1rem; font-weight:800; box-shadow:0 8px 22px -14px rgba(0,0,0,.45);
	transition:transform .15s ease, background .15s ease;
}
.btn-secondary:hover{ transform:scale(1.04); background:#f7f7f7; }

/* Icon buttons */
.icon-btn{
	display:flex; align-items:center; justify-content:center; height:3rem; width:3rem;
	border-radius:9999px; transition:all .15s ease; box-shadow:0 8px 22px -14px rgba(0,0,0,.35);
}
.icon-btn.ghost{ border:1px solid #e5e7eb; background:#fff; color:#6b7280; }
.icon-btn.ghost:hover{ border-color:rgb(236 19 19); color:rgb(236 19 19); }
.icon-btn.primary{ background:#d02034; color:#fff; }
.icon-btn.primary:hover{ background:#b41a2b; }

/* Nav links */
.nav-link{
	color:rgba(255,255,255,.9); font-weight:700; font-size:.9rem;
	border-bottom:2px solid transparent; padding:.25rem 0; transition:color .15s ease, border-color .15s ease;
}
.nav-link:hover{ color:#fff; border-color:#fff; }
.nav-link.active{ color:#fff; border-color:#fff; }

.mobile-link{
	display:block; color:white; padding:.6rem 0; font-weight:700; transition:opacity .15s ease, transform .15s ease;
	opacity:.95;
}
.mobile-link:hover{ opacity:1; transform:translateX(2px); }
.mobile-link.active{ text-decoration:underline; text-underline-offset:6px; }

/* Store buttons */
.store-btn{
	display:flex; align-items:center; gap:.75rem; padding:.8rem 1rem; border-radius:.9rem; font-weight:800;
	transition:transform .15s ease, background .15s ease, box-shadow .15s ease;
}
.store-ios{ background:#fff; color:#111827; box-shadow:0 10px 30px -16px rgba(0,0,0,.25); }
.store-ios:hover{ transform:translateY(-1px); background:#fafafa; }
.store-android{ background:rgba(0,0,0,.3); color:#fff; border:1px solid rgba(255,255,255,.25); backdrop-filter: blur(6px); }
.store-android:hover{ transform:translateY(-1px); background:rgba(0,0,0,.4); }
.store-text{ display:flex; flex-direction:column; line-height:1; }
.store-text small{ font-size:10px; letter-spacing:.12em; opacity:.75; text-transform:uppercase; }
.store-text strong{ font-size:.95rem; }

/* Cards */
.card-hero{
	position:relative; overflow:hidden; border-radius:1.5rem; background:#fff; box-shadow:0 14px 50px -18px rgba(0,0,0,.25);
	aspect-ratio:16/9;
}
@media (min-width:768px){ .card-hero{ height:350px; aspect-ratio:auto; } }
.card-media{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transition:transform .7s ease; }
.card-hero:hover .card-media{ transform:scale(1.08); }
.card-overlay{ position:absolute; inset:0; background:linear-gradient(0deg, rgba(0,0,0,.8), rgba(0,0,0,.2), transparent); }
.card-body{ position:absolute; left:0; right:0; bottom:0; color:#fff; padding:2rem; }
.badge{
	display:inline-block; margin-bottom:.5rem; border-radius:.5rem; background:rgb(236 19 19); padding:.3rem .6rem;
	font-size:.7rem; letter-spacing:.12em; text-transform:uppercase; font-weight:800;
}
.badge.badge-alt{ background:#fff; color:rgb(236 19 19); }
.card-title{ font-size:1.5rem; font-weight:800; margin-bottom:.35rem; }
.link-inline{
	display:inline-flex; align-items:center; gap:.4rem; font-weight:800;
	transition:color .15s ease; color:#fff;
}
.link-inline:hover{ color:#ffd3d3; }

/* Feature cards */
.feature{
	display:flex; flex-direction:column; gap:.75rem; border:1px solid #e7cfcf; background:#fff; padding:2rem; border-radius:.9rem;
	transition:border-color .15s ease, box-shadow .15s ease;
}
.dark .feature{ background:#1b1b1b; border-color:rgba(255,255,255,.08); }
.feature:hover{ border-color:rgba(208,32,52,.5); box-shadow:0 12px 32px -20px rgba(208,32,52,.25); }
.feature-icon{
	display:inline-flex; height:3.5rem; width:3.5rem; align-items:center; justify-content:center;
	border-radius:9999px; background:rgba(208,32,52,.1); color:#d02034;
	transition:background .15s ease, color .15s ease;
}
.feature:hover .feature-icon{ background:#d02034; color:#fff; }
.feature-title{ font-weight:800; font-size:1.15rem; }
.feature-text{ color:#9a4c4c; }
.dark .feature-text{ color:#e9caca; }

/* Footer */
.menu-col{ display:flex; flex-direction:column; gap:.65rem; color:rgba(255,255,255,.85); font-size:.95rem; }
.menu-col a{ transition:transform .15s ease, color .15s ease; }
.menu-col a:hover{ transform:translateX(4px); color:#fff; }
.social{
	height:2.5rem; width:2.5rem; display:flex; align-items:center; justify-content:center;
	border-radius:9999px; background:rgba(255,255,255,.12); transition:all .15s ease; color:#fff;
}
.social:hover{ background:#fff; color:#d02034; }

/* Utility */
.line-clamp-2{
	display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; overflow:hidden;
}

/* Reveal on scroll */
[data-reveal]{
	opacity:0; transform:translateY(16px); transition:opacity .6s ease, transform .6s ease;
}
[data-reveal].is-visible{
	opacity:1; transform:none;
}

/* Dark mode icons toggle */
html.dark [data-icon-light]{ display:none !important; }
html.dark [data-icon-dark]{ display:inline-block !important; }

/* Kalıcı açık arkaplan fallback'leri (Tailwind config olmayan sayfalar için) */
.bg-background-light { background-color: #ffffff !important; }
.bg-background-subtle { background-color: #fcf8f8 !important; }
/* Dark mode'da da açık kalsın */
html.dark .bg-background-light { background-color: #ffffff !important; }
html.dark .bg-background-subtle { background-color: #fcf8f8 !important; }
/* Metin renkleri */
.text-text-main { color: #1b0d0d !important; }
.text-text-muted { color: #9a4c4c !important; }

/* Header brand logos responsive sizing (height override) */
.brand-logos img.brand-logo { display: inline-block; vertical-align: middle; }
/* Mobil: base h-6 = 1.5rem (24px) -> logo1 -10%, logo2 -40% */
@media (max-width: 639.9px) {
	.brand-logos img.brand-logo-1 { height: 1.35rem !important; } /* 24px * 0.9 */
	.brand-logos img.brand-logo-2 { height: 0.9rem !important; }  /* 24px * 0.6 */
}

/* 640px ve üzeri: base h-8 = 2rem (32px), masaüstünde logo2 -20% */
@media (min-width: 640px) {
	.brand-logos img.brand-logo-1 { height: 2rem !important; }   /* 32px (koru) */
	.brand-logos img.brand-logo-2 { height: 1.6rem !important; } /* 32px * 0.8 */
}