/* =========================================================
   Nova App - Ana Stil Dosyası
   Renk sistemi: soğuk kağıt-mavi zemin + koyu lacivert panel + amber vurgu
   Tipografi: Sora (başlık) + Inter (gövde)
   ========================================================= */

:root {
	--bg: #F6F3FC;
	--bg-alt: #F1E9FB;
	--navy: #2A1B4D;
	--navy-2: #34215F;
	--ink: #241640;
	--muted: #6E5D8F;
	--amber: #8B5CF6;
	--amber-dark: #7C3AED;
	--white: #FFFFFF;
	--line: rgba(36, 22, 64, 0.12);
	--line-light: rgba(255, 255, 255, 0.16);

	--font-display: 'Sora', 'Segoe UI', sans-serif;
	--font-body: 'Inter', 'Segoe UI', sans-serif;

	--container: 1180px;
	--radius-lg: 28px;
	--radius-md: 18px;
	--nav-height: 76px;
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: var(--nav-height); }
body {
	margin: 0;
	background: var(--bg);
	color: var(--ink);
	font-family: var(--font-body);
	font-size: 16px;
	line-height: 1.6;
	-webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
ul { margin: 0; padding: 0; list-style: none; }
h1, h2, h3 { font-family: var(--font-display); margin: 0; line-height: 1.15; }
p { margin: 0; }
button { font: inherit; cursor: pointer; background: none; border: none; }

.skip-link {
	position: absolute;
	left: -999px;
	top: auto;
	background: var(--navy);
	color: var(--white);
	padding: 12px 20px;
	border-radius: 8px;
	z-index: 200;
}
.skip-link:focus {
	left: 20px;
	top: 20px;
}

:focus-visible {
	outline: 2px solid var(--amber-dark);
	outline-offset: 3px;
}

/* ---------- Layout kabı ---------- */
.nova-nav__inner,
.nova-hero__inner,
.nova-about__inner,
.nova-features__inner,
.nova-cta__inner,
.nova-footer__inner,
.nova-fallback__inner {
	max-width: var(--container);
	margin: 0 auto;
	padding-left: 28px;
	padding-right: 28px;
}

/* =========================================================
   ÜST MENÜ
   ========================================================= */
.nova-nav {
	position: sticky;
	top: 0;
	z-index: 100;
	height: var(--nav-height);
	display: flex;
	align-items: center;
	background: rgba(42, 27, 77, 0.92);
	backdrop-filter: blur(10px);
}
.nova-nav__inner {
	width: 100%;
	display: flex;
	align-items: center;
	gap: 28px;
}
.nova-nav__brand {
	display: flex;
	align-items: center;
	margin-right: auto;
}
.nova-nav__brand-text {
	font-family: var(--font-display);
	font-weight: 700;
	font-size: 1.25rem;
	color: var(--white);
	letter-spacing: -0.01em;
}
.nova-nav__brand img { max-height: 40px; width: auto; }

.nova-nav__nav { display: flex; }
.nova-nav__menu {
	display: flex;
	align-items: center;
	gap: 32px;
}
.nova-nav__link,
.nova-nav__menu a {
	color: rgba(255, 255, 255, 0.78);
	font-size: 0.95rem;
	font-weight: 500;
	padding: 6px 2px;
	border-bottom: 2px solid transparent;
	transition: color 0.2s ease, border-color 0.2s ease;
}
.nova-nav__link:hover,
.nova-nav__menu a:hover,
.nova-nav__link.is-active,
.nova-nav__menu a.is-active {
	color: var(--white);
	border-bottom-color: var(--amber);
}

.nova-nav__cta {
	display: inline-flex;
	align-items: center;
	background: var(--amber);
	color: var(--navy);
	font-weight: 600;
	font-size: 0.92rem;
	padding: 10px 20px;
	border-radius: 999px;
	white-space: nowrap;
	transition: background 0.2s ease, transform 0.2s ease;
}
.nova-nav__cta:hover { background: var(--amber-dark); transform: translateY(-1px); }

.nova-nav__toggle {
	display: none;
	flex-direction: column;
	gap: 5px;
	padding: 8px;
}
.nova-nav__toggle span {
	width: 22px;
	height: 2px;
	background: var(--white);
	border-radius: 2px;
}

/* =========================================================
   HERO / SLIDER
   ========================================================= */
.nova-hero {
	background: linear-gradient(180deg, var(--navy) 0%, var(--navy-2) 100%);
	padding: 88px 0 96px;
}
.nova-hero__inner {
	display: grid;
	grid-template-columns: 1.05fr 0.95fr;
	gap: 56px;
	align-items: center;
}
.nova-hero__title {
	color: var(--white);
	font-size: clamp(2.2rem, 3.4vw, 3.1rem);
	font-weight: 700;
	letter-spacing: -0.01em;
	max-width: 15ch;
}
.nova-hero__text {
	margin-top: 22px;
	color: rgba(255, 255, 255, 0.72);
	font-size: 1.08rem;
	max-width: 46ch;
}

.nova-store-badges {
	display: flex;
	flex-wrap: wrap;
	gap: 14px;
	margin-top: 34px;
}
.nova-store-badge {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	background: rgba(255, 255, 255, 0.08);
	border: 1px solid rgba(255, 255, 255, 0.22);
	color: var(--white);
	padding: 11px 20px;
	border-radius: 14px;
	font-weight: 600;
	font-size: 0.95rem;
	transition: background 0.2s ease, border-color 0.2s ease;
}
.nova-store-badge:hover { background: rgba(255, 255, 255, 0.16); border-color: rgba(255, 255, 255, 0.4); }
.nova-store-badge__small { display: block; font-size: 0.68rem; font-weight: 500; opacity: 0.7; }
.nova-store-badge--light {
	background: rgba(36, 22, 64, 0.06);
	border-color: rgba(36, 22, 64, 0.18);
	color: var(--ink);
}
.nova-store-badge--light:hover { background: rgba(36, 22, 64, 0.1); }

.nova-hero__slider { position: relative; display: flex; flex-direction: column; align-items: center; }
.nova-hero__slides {
	position: relative;
	width: 100%;
	max-width: 280px;
	aspect-ratio: 200 / 220;
}
.nova-hero__slide {
	position: absolute;
	inset: 0;
	opacity: 0;
	visibility: hidden;
	transform: scale(0.97);
	transition: opacity 0.5s ease, transform 0.5s ease, visibility 0.5s;
}
.nova-hero__slide.is-active { opacity: 1; visibility: visible; transform: scale(1); }
.nova-hero__phone { display: block; width: 100%; filter: drop-shadow(0 24px 40px rgba(0,0,0,0.35)); }
.nova-hero__phone img, .nova-hero__phone svg { width: 100%; height: 100%; border-radius: 28px; object-fit: cover; }
.nova-hero__slide-link { display: block; width: 100%; height: 100%; }
.nova-hero__slide-link:hover .nova-hero__phone { filter: drop-shadow(0 28px 46px rgba(0,0,0,0.42)); }

.nova-hero__dots { display: flex; gap: 10px; margin-top: 28px; }
.nova-hero__dot {
	width: 9px;
	height: 9px;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.3);
	transition: background 0.2s ease, transform 0.2s ease;
}
.nova-hero__dot.is-active { background: var(--amber); transform: scale(1.2); }

/* =========================================================
   BÖLÜM 1 - HAKKINDA (görsel + metin)
   ========================================================= */
.nova-about { padding: 110px 0; }
.nova-about__inner {
	display: grid;
	grid-template-columns: 0.9fr 1.1fr;
	gap: 64px;
	align-items: center;
}
.nova-about__media { display: block; border-radius: var(--radius-lg); overflow: hidden; }
.nova-about__media img, .nova-about__media svg { width: 100%; height: auto; display: block; }
.nova-about__title {
	font-size: clamp(1.8rem, 2.6vw, 2.4rem);
	color: var(--ink);
	max-width: 16ch;
}
.nova-about__text {
	margin-top: 20px;
	color: var(--muted);
	font-size: 1.05rem;
	max-width: 52ch;
}

/* =========================================================
   BÖLÜM 2 - ÖZELLİKLER (3'lü)
   ========================================================= */
.nova-features { background: var(--bg-alt); padding: 110px 0; }
.nova-features__head { max-width: 60ch; margin-bottom: 56px; }
.nova-features__title { font-size: clamp(1.8rem, 2.6vw, 2.3rem); color: var(--ink); }
.nova-features__desc { margin-top: 14px; color: var(--muted); font-size: 1.05rem; }

.nova-features__grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
}
.nova-features__item {
	padding: 4px 36px;
	border-left: 1px solid var(--line);
}
.nova-features__item:first-child { border-left: none; padding-left: 0; }
.nova-features__icon { display: inline-flex; width: 56px; height: 56px; }
.nova-features__icon svg, .nova-features__icon img { width: 56px; height: 56px; border-radius: 14px; }
.nova-features__item-title { margin-top: 24px; font-size: 1.2rem; color: var(--ink); }
.nova-features__item-text { margin-top: 12px; color: var(--muted); font-size: 0.98rem; max-width: 32ch; }

/* =========================================================
   BÖLÜM 3 - İNDİRME ÇAĞRISI
   ========================================================= */
.nova-cta { background: var(--navy); padding: 110px 0; }
.nova-cta__inner {
	display: grid;
	grid-template-columns: 1fr 0.85fr;
	gap: 64px;
	align-items: center;
}
.nova-cta__title { color: var(--white); font-size: clamp(1.9rem, 2.8vw, 2.5rem); max-width: 15ch; }
.nova-cta__text { margin-top: 20px; color: rgba(255, 255, 255, 0.72); font-size: 1.05rem; max-width: 48ch; }
.nova-cta__media { display: block; border-radius: var(--radius-lg); overflow: hidden; }
.nova-cta__media img, .nova-cta__media svg { width: 100%; height: auto; display: block; }

/* =========================================================
   FOOTER / İLETİŞİM
   ========================================================= */
.nova-footer { background: #1D1030; padding: 72px 0 0; }
.nova-footer__inner {
	display: grid;
	grid-template-columns: 1.3fr 1fr 1fr;
	gap: 48px;
	padding-bottom: 56px;
	border-bottom: 1px solid var(--line-light);
}
.nova-footer__brand { font-family: var(--font-display); font-weight: 700; font-size: 1.3rem; color: var(--white); }
.nova-footer__tagline { margin-top: 14px; color: rgba(255, 255, 255, 0.6); max-width: 32ch; }
.nova-footer__social { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 22px; }
.nova-footer__social a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 38px;
	height: 38px;
	border-radius: 50%;
	border: 1px solid var(--line-light);
	color: rgba(255, 255, 255, 0.75);
	transition: border-color 0.2s ease, color 0.2s ease;
}
.nova-footer__social a:hover { border-color: var(--amber); color: var(--amber); }

.nova-footer__heading { color: var(--white); font-weight: 600; font-size: 0.95rem; }
.nova-footer__links { margin-top: 18px; display: flex; flex-direction: column; gap: 12px; }
.nova-footer__links a, .nova-footer__links li {
	color: rgba(255, 255, 255, 0.62);
	font-size: 0.95rem;
	transition: color 0.2s ease;
}
.nova-footer__links a:hover { color: var(--white); }

.nova-footer__bottom {
	padding: 24px 28px;
	text-align: center;
}
.nova-footer__bottom p { color: rgba(255, 255, 255, 0.45); font-size: 0.85rem; }

/* =========================================================
   Fallback sayfa (Ana Sayfa şablonu dışı sayfalar)
   ========================================================= */
.nova-fallback { padding: 90px 0; }
.nova-fallback__content { margin-top: 24px; color: var(--muted); line-height: 1.8; }

/* =========================================================
   RESPONSIVE
   ========================================================= */
@media (max-width: 980px) {
	.nova-hero__inner,
	.nova-about__inner,
	.nova-cta__inner { grid-template-columns: 1fr; }
	.nova-about__inner { gap: 40px; }
	.nova-about__media { order: -1; max-width: 420px; margin: 0 auto; }
	.nova-cta__media { max-width: 420px; margin: 0 auto; }
	.nova-hero__text, .nova-hero__title { max-width: none; }
	.nova-features__grid { grid-template-columns: 1fr; gap: 40px; }
	.nova-features__item { border-left: none; padding-left: 0; border-top: 1px solid var(--line); padding-top: 32px; }
	.nova-features__item:first-child { border-top: none; padding-top: 0; }
	.nova-footer__inner { grid-template-columns: 1fr 1fr; }
	.nova-footer__col--brand { grid-column: 1 / -1; }
}

@media (max-width: 760px) {
	.nova-nav__nav {
		position: absolute;
		top: var(--nav-height);
		left: 0;
		right: 0;
		background: var(--navy);
		flex-direction: column;
		padding: 8px 28px 24px;
		display: none;
	}
	.nova-nav__nav.is-open { display: flex; }
	.nova-nav__menu { flex-direction: column; align-items: flex-start; gap: 4px; width: 100%; }
	.nova-nav__menu li, .nova-nav__item { width: 100%; }
	.nova-nav__link, .nova-nav__menu a { display: block; padding: 12px 0; border-bottom: 1px solid var(--line-light); width: 100%; }
	.nova-nav__cta { display: none; }
	.nova-nav__toggle { display: flex; }

	.nova-hero { padding: 56px 0 64px; }
	.nova-about, .nova-features, .nova-cta { padding: 72px 0; }
	.nova-footer__inner { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	.nova-hero__slide { transition: opacity 0.2s linear; }
}