/**
 * Ana yerleşim, geri sayım barı, yapışkan CTA, modal ve accordion stilleri.
 *
 * @package Seviye_Onkayit
 */

/* --------------------------------------------------------------------- *
 * Temel
 * --------------------------------------------------------------------- */
* { box-sizing: border-box; }

body {
	margin: 0;
	font-family: var(--seviye-font);
	color: var(--seviye-text);
	background: var(--seviye-bg);
	line-height: 1.6;
	-webkit-font-smoothing: antialiased;
}

.seviye-container {
	width: 100%;
	max-width: var(--seviye-container);
	margin-inline: auto;
	padding-inline: clamp(1rem, 4vw, 2rem);
}

.seviye-section { padding-block: clamp(2rem, 6vw, 4.5rem); }

.screen-reader-text {
	position: absolute !important;
	width: 1px; height: 1px;
	overflow: hidden; clip: rect(1px, 1px, 1px, 1px);
	white-space: nowrap;
}

.skip-link:focus {
	position: fixed; top: 8px; left: 8px;
	z-index: 1000; width: auto; height: auto; clip: auto;
	padding: .75rem 1rem; background: var(--seviye-primary); color: #fff;
	border-radius: var(--seviye-radius-sm);
}

/* --------------------------------------------------------------------- *
 * Butonlar
 * --------------------------------------------------------------------- */
.seviye-btn {
	display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
	padding: .85rem 1.5rem;
	font: inherit; font-weight: 600;
	border: 1px solid transparent; border-radius: var(--seviye-radius-sm);
	cursor: pointer; text-decoration: none;
	transition: transform var(--seviye-transition), background-color var(--seviye-transition);
}

.seviye-btn:hover { transform: translateY(-1px); }
.seviye-btn:focus-visible { outline: 3px solid var(--seviye-primary); outline-offset: 2px; }

.seviye-btn--primary { background: var(--seviye-cta); color: #fff; }
.seviye-btn--primary:hover { background: var(--seviye-cta-hover); }
.seviye-btn--ghost { background: transparent; border-color: var(--seviye-border); color: var(--seviye-text); }
.seviye-btn--wa { background: #25d366; color: #fff; }
.seviye-btn--block { width: 100%; }

/* --------------------------------------------------------------------- *
 * Geri sayım barı (FOMO)
 * --------------------------------------------------------------------- */
.seviye-countdown {
	position: sticky; top: 0; z-index: 60;
	background: linear-gradient(90deg, var(--seviye-primary-dark), var(--seviye-primary));
	color: #fff;
}

.seviye-countdown.is-urgent {
	background: linear-gradient(90deg, #b91c1c, #dc2626);
	animation: seviye-pulse 2.4s ease-in-out infinite;
}

@keyframes seviye-pulse {
	0%, 100% { filter: brightness(1); }
	50% { filter: brightness(1.15); }
}

.seviye-countdown__inner {
	max-width: var(--seviye-container);
	margin-inline: auto;
	padding: .6rem clamp(1rem, 4vw, 2rem);
	display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
	gap: .75rem 1.25rem;
	font-size: .95rem;
}

.seviye-countdown__text { margin: 0; display: flex; align-items: center; gap: .6rem; }

.seviye-countdown__badge {
	background: rgba(255, 255, 255, .2);
	padding: .15rem .6rem; border-radius: 999px;
	font-size: .75rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
}

.seviye-countdown__clock { display: flex; gap: .5rem; }

.seviye-countdown__unit {
	display: flex; flex-direction: column; align-items: center;
	min-width: 52px; padding: .3rem .5rem;
	background: rgba(0, 0, 0, .18); border-radius: var(--seviye-radius-sm);
}

.seviye-countdown__value { font-size: 1.15rem; font-weight: 700; font-variant-numeric: tabular-nums; line-height: 1.1; }
.seviye-countdown__label { font-size: .65rem; opacity: .85; text-transform: uppercase; letter-spacing: .05em; }

.seviye-countdown.is-expired .seviye-countdown__clock,
.seviye-countdown.is-expired .seviye-countdown__text { display: none; }

.seviye-countdown__message { margin: 0; font-weight: 600; }

/* --------------------------------------------------------------------- *
 * Başlık / alt bilgi
 * --------------------------------------------------------------------- */
.seviye-header { border-bottom: 1px solid var(--seviye-border); background: var(--seviye-bg); }

/* Sol ve sağ sütun eşit (1fr) → logo her koşulda görsel olarak tam ortada. */
.seviye-header__inner {
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	align-items: center;
	gap: 1rem;
	padding-block: .9rem;
}

.seviye-header__brand { justify-self: center; display: flex; align-items: center; }
.seviye-header__brand img,
.seviye-header__brand .custom-logo { display: block; max-height: 64px; width: auto; }

.seviye-header__title { font-size: 1.25rem; font-weight: 800; color: var(--seviye-primary); text-decoration: none; }

.seviye-header__lead {
	justify-self: start; min-width: 0;
	display: flex; align-items: center; gap: 1.25rem; flex-wrap: wrap;
}

.seviye-header__lead-text {
	font-size: 1.15rem; font-weight: 800; letter-spacing: -.01em;
	color: var(--seviye-primary); text-decoration: none; white-space: nowrap;
}

.seviye-header__lead-text:hover { color: var(--seviye-primary-dark); }
.seviye-header__lead-text:focus-visible { outline: 3px solid var(--seviye-primary); outline-offset: 3px; border-radius: 4px; }

.seviye-header__nav { min-width: 0; }
.seviye-menu { display: flex; flex-wrap: wrap; gap: 1.25rem; list-style: none; margin: 0; padding: 0; }
.seviye-menu a { color: var(--seviye-text); text-decoration: none; font-weight: 500; }
.seviye-menu a:hover { color: var(--seviye-primary); }

.seviye-header__aside {
	justify-self: end;
	display: flex; align-items: center; gap: 1rem;
}

.seviye-header__phone { font-weight: 700; color: var(--seviye-primary); text-decoration: none; white-space: nowrap; }

/* --------------------------------------------------------------------- *
 * Sosyal medya ikonları
 * --------------------------------------------------------------------- */
.seviye-social { display: flex; align-items: center; gap: .35rem; list-style: none; margin: 0; padding: 0; }

.seviye-social__link {
	display: grid; place-items: center;
	width: 2.25rem; height: 2.25rem;
	border-radius: 50%;
	color: var(--seviye-text-muted);
	text-decoration: none;
	transition: color var(--seviye-transition), background-color var(--seviye-transition), transform var(--seviye-transition);
}

.seviye-social__link:hover { transform: translateY(-2px); color: #fff; }
.seviye-social__link:focus-visible { outline: 3px solid var(--seviye-primary); outline-offset: 2px; }

/* Marka renkleri yalnızca hover'da; nötr durumda başlık sade kalır. */
.seviye-social__link--x:hover         { background: #000000; }
.seviye-social__link--instagram:hover { background: linear-gradient(45deg, #f09433, #dc2743, #bc1888); }
.seviye-social__link--facebook:hover  { background: #1877f2; }
.seviye-social__link--linkedin:hover  { background: #0a66c2; }
.seviye-social__link--youtube:hover   { background: #ff0000; }

.seviye-social__icon { display: block; }

/* --------------------------------------------------------------------- *
 * Başlık — mobil
 * --------------------------------------------------------------------- */
@media (max-width: 860px) {
	.seviye-header__inner {
		grid-template-columns: 1fr;
		justify-items: center;
		text-align: center;
		gap: .75rem;
	}

	.seviye-header__lead,
	.seviye-header__aside { justify-self: center; justify-content: center; }

	.seviye-header__brand { order: -1; }
	.seviye-header__aside { flex-wrap: wrap; justify-content: center; }
	.seviye-menu { justify-content: center; gap: 1rem; }
}

.seviye-footer { margin-top: 3rem; padding-block: 2rem; border-top: 1px solid var(--seviye-border); background: var(--seviye-bg-soft); }
.seviye-footer__inner { display: flex; flex-wrap: wrap; gap: 1rem; align-items: center; justify-content: space-between; }
.seviye-footer__menu { display: flex; gap: 1rem; list-style: none; margin: 0; padding: 0; font-size: .9rem; }

/* --------------------------------------------------------------------- *
 * Hero / landing
 * --------------------------------------------------------------------- */
.seviye-hero { padding-block: clamp(2rem, 5vw, 3.5rem); background: var(--seviye-bg-soft); }

.seviye-hero__grid {
	display: grid; gap: clamp(1.5rem, 4vw, 3rem);
	grid-template-columns: 1fr;
	align-items: start;
}

@media (min-width: 960px) {
	.seviye-hero__grid { grid-template-columns: 1fr minmax(420px, 46%); }
	.seviye-hero__form { position: sticky; top: 5.5rem; }
}

.seviye-hero__title { font-size: clamp(1.9rem, 4vw, 2.9rem); line-height: 1.15; margin: 0 0 .75rem; }
.seviye-hero__subtitle { font-size: 1.1rem; color: var(--seviye-text-muted); margin: 0 0 1.5rem; }

.seviye-usp { list-style: none; margin: 0 0 1.75rem; padding: 0; display: grid; gap: .6rem; }
.seviye-usp li { position: relative; padding-left: 1.9rem; }
.seviye-usp li::before {
	content: "✓";
	position: absolute; left: 0; top: 0;
	width: 1.35rem; height: 1.35rem;
	display: grid; place-items: center;
	background: var(--seviye-success); color: #fff;
	border-radius: 50%; font-size: .75rem; font-weight: 700;
}

.seviye-trust { display: flex; flex-wrap: wrap; gap: 1.5rem; padding-top: 1rem; border-top: 1px solid var(--seviye-border); }
.seviye-trust__item { display: flex; flex-direction: column; }
.seviye-trust__item strong { font-size: 1.5rem; color: var(--seviye-primary); }
.seviye-trust__item span { font-size: .85rem; color: var(--seviye-text-muted); }

.seviye-form-card {
	background: var(--seviye-bg);
	border: 1px solid var(--seviye-border);
	border-radius: var(--seviye-radius);
	box-shadow: var(--seviye-shadow);
	padding: clamp(1.25rem, 3vw, 2rem);
}

.seviye-form-card__legal { margin: 1rem 0 0; font-size: .8rem; color: var(--seviye-text-muted); text-align: center; }

/* --------------------------------------------------------------------- *
 * Bildirimler
 * --------------------------------------------------------------------- */
.seviye-notice { padding: .9rem 1.1rem; border-radius: var(--seviye-radius-sm); border-left: 4px solid; margin-bottom: 1.25rem; font-size: .92rem; }
.seviye-notice--warning { background: #fffbeb; border-color: var(--seviye-warning); color: #92400e; }
.seviye-notice--error { background: #fef2f2; border-color: var(--seviye-danger); color: #991b1b; }
.seviye-notice--success { background: #f0fdf4; border-color: var(--seviye-success); color: #14532d; }

.seviye-quota { font-size: .82rem; font-weight: 700; padding: .15rem .55rem; border-radius: 999px; }
.seviye-quota--available { background: #dcfce7; color: #14532d; }
.seviye-quota--critical { background: #fef3c7; color: #92400e; }
.seviye-quota--full { background: #fee2e2; color: #991b1b; }

/* --------------------------------------------------------------------- *
 * Şube paneli + SSS accordion
 * --------------------------------------------------------------------- */
.seviye-branch-panel {
	margin-top: 1.5rem; padding: 1.25rem;
	border: 1px solid var(--seviye-border); border-radius: var(--seviye-radius);
	background: var(--seviye-bg-soft);
	opacity: 0; transform: translateY(8px);
	transition: opacity var(--seviye-transition), transform var(--seviye-transition);
}

.seviye-branch-panel.is-visible { opacity: 1; transform: none; }
.seviye-branch-panel[hidden] { display: none; }

.seviye-branch-panel__head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: .5rem; }
.seviye-branch-panel__title { margin: 0; font-size: 1.1rem; }
.seviye-branch-panel__phone { font-weight: 700; color: var(--seviye-primary); text-decoration: none; }
.seviye-branch-panel__address { margin: .4rem 0 0; font-size: .88rem; color: var(--seviye-text-muted); }
.seviye-branch-panel__quota { margin: .5rem 0 0; font-size: .9rem; color: #991b1b; }

.seviye-branch-panel__map { margin: 1rem 0; border-radius: var(--seviye-radius-sm); overflow: hidden; }
.seviye-branch-panel__map iframe { display: block; width: 100%; height: 220px; border: 0; }

.seviye-accordion { display: grid; gap: .5rem; }

.seviye-accordion__item {
	border: 1px solid var(--seviye-border); border-radius: var(--seviye-radius-sm);
	background: var(--seviye-bg); overflow: hidden;
}

.seviye-accordion__item.is-open { border-color: var(--seviye-primary); }
.seviye-accordion__heading { margin: 0; font-size: 1rem; }

.seviye-accordion__trigger {
	width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 1rem;
	padding: .9rem 1rem;
	background: none; border: 0; cursor: pointer;
	font: inherit; font-weight: 600; text-align: left; color: inherit;
}

.seviye-accordion__trigger:hover { background: var(--seviye-bg-soft); }
.seviye-accordion__trigger:focus-visible { outline: 3px solid var(--seviye-primary); outline-offset: -3px; }

.seviye-accordion__icon {
	flex: 0 0 auto; width: 1rem; height: 1rem; position: relative;
	transition: transform var(--seviye-transition);
}

.seviye-accordion__icon::before,
.seviye-accordion__icon::after {
	content: ""; position: absolute; top: 50%; left: 0;
	width: 100%; height: 2px; background: var(--seviye-primary);
	transform: translateY(-50%);
	transition: transform var(--seviye-transition);
}

.seviye-accordion__icon::after { transform: translateY(-50%) rotate(90deg); }
.seviye-accordion__item.is-open .seviye-accordion__icon::after { transform: translateY(-50%) rotate(0); }

.seviye-accordion__panel {
	max-height: 0; overflow: hidden;
	transition: max-height var(--seviye-transition);
}

.seviye-accordion__content { padding: 0 1rem 1rem; color: var(--seviye-text-muted); }

/* --------------------------------------------------------------------- *
 * Yapışkan CTA + modal
 * --------------------------------------------------------------------- */
.seviye-sticky-cta {
	position: fixed; right: clamp(.75rem, 3vw, 1.5rem); bottom: clamp(.75rem, 3vw, 1.5rem);
	z-index: 80; display: flex; flex-direction: column; align-items: flex-end; gap: .6rem;
}

.seviye-sticky-cta__btn {
	display: inline-flex; align-items: center; gap: .5rem;
	padding: .85rem 1.35rem;
	background: var(--seviye-cta); color: #fff;
	border: 0; border-radius: 999px; box-shadow: var(--seviye-shadow-lg);
	font: inherit; font-weight: 700; cursor: pointer;
	transition: transform var(--seviye-transition);
}

.seviye-sticky-cta__btn:hover { transform: scale(1.04); }
.seviye-sticky-cta__btn:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }

.seviye-sticky-cta__wa {
	width: 3rem; height: 3rem; display: grid; place-items: center;
	background: #25d366; color: #fff; border-radius: 50%;
	box-shadow: var(--seviye-shadow-lg); text-decoration: none; font-size: 1.35rem;
}

@media (max-width: 600px) {
	.seviye-sticky-cta__text { display: none; }
	.seviye-sticky-cta__btn { padding: .9rem; border-radius: 50%; font-size: 1.3rem; }
}

body.seviye-modal-open { overflow: hidden; }

.seviye-modal { position: fixed; inset: 0; z-index: 100; display: grid; place-items: center; padding: 1rem; }
.seviye-modal[hidden] { display: none; }
.seviye-modal__overlay { position: absolute; inset: 0; background: rgba(15, 23, 42, .6); backdrop-filter: blur(2px); }

.seviye-modal__dialog {
	position: relative; width: min(420px, 100%);
	background: var(--seviye-bg); border-radius: var(--seviye-radius);
	box-shadow: var(--seviye-shadow-lg); padding: 1.75rem;
	animation: seviye-modal-in 260ms cubic-bezier(.4, 0, .2, 1);
}

@keyframes seviye-modal-in {
	from { opacity: 0; transform: translateY(16px) scale(.98); }
	to { opacity: 1; transform: none; }
}

.seviye-modal__close {
	position: absolute; top: .5rem; right: .75rem;
	background: none; border: 0; font-size: 1.75rem; line-height: 1;
	color: var(--seviye-text-muted); cursor: pointer;
}

.seviye-modal__title { margin: 0 0 .35rem; font-size: 1.3rem; }
.seviye-modal__desc { margin: 0 0 1.25rem; color: var(--seviye-text-muted); font-size: .93rem; }
.seviye-modal__form { display: grid; gap: .9rem; }

.seviye-field { display: grid; gap: .35rem; }
.seviye-field__label { font-size: .85rem; font-weight: 600; }

.seviye-field input[type="text"],
.seviye-field input[type="tel"] {
	width: 100%; padding: .75rem .9rem;
	border: 1px solid var(--seviye-border); border-radius: var(--seviye-radius-sm);
	font: inherit; background: var(--seviye-bg); color: var(--seviye-text);
}

.seviye-field input:focus { outline: 2px solid var(--seviye-primary); outline-offset: 1px; border-color: var(--seviye-primary); }

.seviye-field--check { grid-template-columns: auto 1fr; align-items: start; gap: .6rem; font-size: .82rem; color: var(--seviye-text-muted); }
.seviye-field--check input { margin-top: .2rem; }

.seviye-modal__status { margin: 0; font-size: .88rem; min-height: 1.2em; }
.seviye-modal__status.is-error { color: var(--seviye-danger); }
.seviye-modal__status.is-success { color: var(--seviye-success); }

/* --------------------------------------------------------------------- *
 * Teşekkürler sayfası + referans kutusu
 * --------------------------------------------------------------------- */
.seviye-thankyou { padding-block: clamp(2rem, 6vw, 4rem); }
.seviye-thankyou__hero { text-align: center; margin-bottom: 2.5rem; }

.seviye-thankyou__check {
	width: 4.5rem; height: 4.5rem; margin: 0 auto 1rem;
	display: grid; place-items: center;
	background: var(--seviye-success); color: #fff;
	border-radius: 50%; font-size: 2.25rem;
}

.seviye-thankyou__ref { font-size: 1.05rem; }
.seviye-thankyou__lead { max-width: 46ch; margin-inline: auto; color: var(--seviye-text-muted); }

.seviye-steps { display: grid; gap: 1rem; padding-left: 1.25rem; }
.seviye-steps strong { display: block; }
.seviye-steps span { color: var(--seviye-text-muted); font-size: .92rem; }

.seviye-referral {
	margin-top: 2.5rem; padding: 1.5rem;
	border: 2px dashed var(--seviye-primary); border-radius: var(--seviye-radius);
	background: var(--seviye-bg-soft);
}

.seviye-referral__title { margin: 0 0 .35rem; }
.seviye-referral__desc { margin: 0 0 1rem; color: var(--seviye-text-muted); font-size: .93rem; }
.seviye-referral__row { display: flex; gap: .5rem; margin-bottom: .75rem; }

.seviye-referral__input {
	flex: 1; min-width: 0; padding: .7rem .8rem;
	border: 1px solid var(--seviye-border); border-radius: var(--seviye-radius-sm);
	font: inherit; font-size: .85rem; background: var(--seviye-bg); color: var(--seviye-text);
}

.seviye-referral__count { margin: .75rem 0 0; font-size: .9rem; color: var(--seviye-success); font-weight: 600; }

.seviye-calendly { margin-top: 1rem; border-radius: var(--seviye-radius); overflow: hidden; }

.seviye-prose { max-width: 72ch; }