* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}

:root{
	--a-primary-color:#2563eb;
	--c-primary:#0d6efd;
	--c-primary-100:#eef5ff;
	--c-border:#e6e6e6;
	--c-bg:#ffffff;
	--c-text:#222;
	--c-muted:#666;
	--radius:14px;
}
:root { --hero-bg-color:#2563eb; --card-w:240px; --card-h:280px; --gap-x:180px; }

body {
	font-family: Arial, sans-serif;
	line-height: 1.6;
	color: #333;
}

main {
	margin: 0 auto;
	padding: 20px;
	max-width: 1600px;
	width: 100%;
	box-sizing: border-box;
}

.header {
	background-color: white;
	box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

.contact-info,
.cart-info {
	display: flex;
	align-items: center;
	gap: 8px;
}

.contact-info i {
	color: #25d366;
}

.header-main {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 5px 20px;
	gap: 20px;
}

.logo h1 {
	font-size: 32px;
	font-weight: bold;
	color: #333;
}

.logo span {
	color: #e74c3c;
}

.search-bar {
	flex: 1;
	max-width: 100%;
	display: flex;
	position: relative;
}

.search-bar input {
	width: 100%;
	padding: 12px 20px;
	border: 2px solid #ddd;
	border-radius: 25px;
	font-size: 14px;
	outline: none;
}

.search-bar input:focus {
	border-color: #2d5a3d;
}

.search-bar button {
	position: absolute;
	right: 5px;
	top: 50%;
	transform: translateY(-50%);
	background-color: var(--a-primary-color);
	color: white;
	border: none;
	padding: 8px 15px;
	border-radius: 20px;
	cursor: pointer;
}

.user-actions {
	display: flex;
	gap: 20px;
}

.action-item {
	display: flex;
	flex-direction: column;
	align-items: center;
	cursor: pointer;
	font-size: 12px;
	position: relative;
	border: 1px solid var(--a-primary-color);;
	border-radius: 8px;
	padding: 6px 10px;
	background-color: white;
	transition: all 0.3s ease;
}

.action-item i {
	font-size: 20px;
	margin-bottom: 4px;
	color: #666;
}

.cart-count {
	position: absolute;
	top: -5px;
	right: -8px;
	background-color: #2d5a3d;
	color: white;
	border-radius: 50%;
	width: 18px;
	height: 18px;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 10px;
}

.main-nav {
	background-color: #f8f9fa;
	padding: 0 20px;
}

.main-nav ul {
	display: flex;
	list-style: none;
	gap: 30px;
	overflow-x: auto;
	justify-content: center;
	align-items: center;
}

.main-nav li a {
	display: block;
	padding: 15px 0;
	text-decoration: none;
	color: #333;
	font-weight: 500;
	font-size: 14px;
	white-space: nowrap;
	transition: color 0.3s;
}

.main-nav li a:hover {
	color: #2d5a3d;
}

.mobile-toggle {
	display: none;
	font-size: 22px;
	cursor: pointer;
}

@media (max-width: 768px) {
	.mobile-toggle {
		display: flex;
		align-items: center;
		justify-content: center;
		padding:7px;
	}

	.action-item {
		border:none;	
	}

	.action-item i {
		font-size:20px;
		color:black;
	}
	
	.action-item span {
		color:black;
	}
}

@media (max-width: 768px) {
	.main-nav {
		display: none;
		flex-direction: column;
		background: #fff;
		position: absolute;
		top: 60px;
		left: 0;
		width: 100%;
		border-top: 1px solid #ddd;
	}
	.main-nav.open {
		display: flex;
	}
}

/* 404 Error Page */
.error-page {
	text-align: center;
	padding: 80px 20px;
	min-height: 400px;
	display: flex;
	align-items: center;
	justify-content: center;
}

.error-code {
	font-size: 120px;
	font-weight: bold;
	color: #999;
	margin-bottom: 20px;
	line-height: 1;
}

.error-message {
	font-size: 18px;
	color: #666;
	margin-bottom: 15px;
}

.error-suggestion {
	font-size: 16px;
	color: #666;
}

.link {
	color: #2d5a3d;
	text-decoration: none;
	font-weight: bold;
}

.link:hover {
	text-decoration: underline;
}

/* Features Section */
.features {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
	gap: 30px;
	padding: 60px 20px;
	background-color: #f8f9fa;
}

.feature-item {
	text-align: center;
	padding: 20px;
}

.feature-icon {
	width: 80px;
	height: 80px;
	background-color: white;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	margin: 0 auto 20px;
	box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

.feature-icon i {
	font-size: 30px;
	color: #2d5a3d;
}

.feature-item h3 {
	font-size: 16px;
	color: #333;
	line-height: 1.4;
}

/* Footer */
.footer {
	background-color: #333;
	color: white;
	padding: 40px 20px 20px;
}

.footer-content {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
	gap: 30px;
	margin-bottom: 40px;
}

.footer-section h3 {
	font-size: 16px;
	margin-bottom: 15px;
	color: white;
}

.footer-section ul {
	list-style: none;
}

.footer-section ul li {
	margin-bottom: 8px;
}

.footer-section ul li a {
	color: #ccc;
	text-decoration: none;
	font-size: 14px;
	transition: color 0.3s;
}

.footer-section ul li a:hover {
	color: white;
}
.qr-code {
	text-align: left;
}

.qr-code img {
	width: 100px;
	height: 100px;
	margin-bottom: 10px;
}

.qr-code p {
	font-size: 12px;
	color: #ccc;
}

.payment-methods {
	border-top: 1px solid #555;
	padding-top: 30px;
	margin-bottom: 20px;
}

.payment-methods h4 {
	margin-bottom: 15px;
	font-size: 16px;
}

.footer-bottom {
	border-top: 1px solid #555;
	padding-top: 20px;
	text-align: center;
	font-size: 12px;
	color: #ccc;
}

.footer-bottom p {
	margin-bottom: 5px;
}

/* Mobile None */
@media (max-width: 768px) {

	.search-bar {
		display:none;
	}
}

/* Responsive Design */
@media (max-width: 768px) {
	.header-main {
		margin-top:10px;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
		gap: 0;
		padding: 0 10px;
	}

	.logo {
		order: 1;
		padding-bottom:2px;
		align-items: center;
	}

	.user-actions {
		order: 2;
		display: flex;
		gap: 15px;
	}

	.main-nav ul {
		gap: 15px;
		padding: 0 10px;
	}

	.error-code {
		font-size: 80px;
	}

	.features {
		grid-template-columns: 1fr;
		padding: 40px 20px;
	}

	.footer-content {
		grid-template-columns: 1fr;
		gap: 20px;
	}

	.newsletter {
		flex-direction: column;
	}

	.payment-icons {
		justify-content: center;
	}
}


@media (max-width: 480px) {
	.header-top {
		flex-direction: column;
		gap: 10px;
		text-align: center;
	}

	.logo h1 {
		font-size: 24px;
	}

	.main-nav ul {
		flex-direction: column;
		gap: 0;
	}

	.main-nav li a {
		padding: 12px 0;
		border-bottom: 1px solid #eee;
	}

	.error-code {
		font-size: 60px;
	}

	.error-message {
		font-size: 16px;
	}

	.error-suggestion {
		font-size: 14px;
	}
}

/* Kapsayıcı */
.products-page { padding: 12px 0 28px; }

/* Sticky üst bar (mobil-first) */
.toolbar {
	position: sticky; top: 0; z-index: 5;
	background: var(--c-bg);
	border-bottom: 1px solid var(--c-border);
	padding: 10px 0;
}

.toolbar-row {
	display: grid;
	grid-template-columns: 1fr auto;
	gap: 8px;
	align-items: center;
}

.searchbox {
	display: flex; gap: 8px;
}
.searchbox input[type="text"]{
	flex: 1;
	height: 42px; padding: 0 12px;
	border: 1px solid var(--c-border);
	border-radius: 10px; outline: none;
}

/* Grid (mobil 1, sm 2, md 3, lg 4) */
.grid {
	margin-top: 16px;
	display: grid; gap: 12px;
	grid-template-columns: 1fr;
}
@media(min-width:576px){ .grid{ grid-template-columns: repeat(2,1fr); } }
@media(min-width:992px){ .grid{ grid-template-columns: repeat(3,1fr); } }
@media(min-width:1200px){ .grid{ grid-template-columns: repeat(4,1fr); } }

.card {
	border: 1px solid var(--c-border);
	border-radius: var(--radius);
	overflow: hidden; background: var(--c-bg);
	display: flex; flex-direction: column;
	transition: transform .2s, box-shadow .2s;
}
.card:hover{ transform: translateY(-2px); box-shadow: 0 8px 24px rgba(0,0,0,.06); }

.media {
	position: relative; aspect-ratio: 1/1;
	background: #f7f7f7; overflow: hidden;
	display:flex; align-items:center; justify-content:center;
}
.media img{ width:100%; height:100%; object-fit:cover; display:block; transition: transform .3s; }
.card:hover .media img{ transform: scale(1.03); }

.badge {
	position:absolute; top:10px; left:10px;
	background:#d7263d; color:#fff; font-size:12px; font-weight:700;
	padding:6px 8px; border-radius:999px;
}

.body { padding: 12px 14px; display: grid; gap: 8px; }
.title {
	font-size: 15px; font-weight: 700; color: var(--c-text); line-height: 1.3;
	display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; min-height: 16px;
}
.meta { display:flex; gap:10px; flex-wrap:wrap; color:var(--c-muted); font-size:12px; }

.price-row{ display:flex; align-items:baseline; gap:10px; }
.price{ font-size:18px; font-weight:800; color:#111; }
.old-price{ font-size:13px; color:#999; text-decoration:line-through; }

.actions{ display:grid; grid-template-columns: 1fr auto; gap:8px; margin-top:4px; }
.btn.secondary{ border:1px solid var(--c-border); background:#f8f8f8; color:#222; }

/* Boş durum */
.empty {
	margin-top: 16px; border:1px dashed var(--c-border);
	border-radius: 12px; padding: 20px; text-align:center; color:var(--c-muted);
}

/* Basit sayfalama mock */
.pagination {
	margin-top: 18px; display:flex; gap:8px; justify-content:center; list-style:none; padding:0;
}
.pagination a, .pagination span{
	min-width:40px; height:40px; display:inline-flex; align-items:center; justify-content:center;
	border:1px solid var(--c-border); border-radius:10px; text-decoration:none; color:#333;
}
.pagination .active span{ background:var(--c-primary); color:#fff; border-color:var(--c-primary); }

/* Daha büyük ekranlarda toolbar satırlarını genişlet */
@media(min-width:768px){
	.toolbar-row{
		grid-template-columns: 1fr auto auto;
	}
	.filter-panel{
		display: grid; /* md ve üstünde her zaman görünsün */
		grid-template-columns: 1fr 1fr 1fr;
	}
	.toolbar .toggle-adv{ display:none; } /* md+ ekranlarda gizle */
}


/* Pagination - bağımsız çalışır */
.pagination {
	display: flex;
	gap: 8px;
	justify-content: center;
	align-items: center;
	list-style: none;
	padding: 0;
	margin: 16px 0;
}

.page-item { display: inline-flex; }

.page-link, .pagination li a, .pagination li span {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 40px;
	height: 40px;
	padding: 0 12px;
	border: 1px solid #e6e6e6;
	border-radius: 10px;
	font-size: 14px;
	color: #333;
	text-decoration: none;
	background: #fff;
	transition: background .2s, border-color .2s, color .2s;
}

.page-item.active .page-link,
.pagination li.active span {
	background: #0d6efd;
	color: #fff;
	border-color: #0d6efd;
}

.page-item.disabled .page-link,
.pagination li.disabled span {
	opacity: .5;
	pointer-events: none;
}

.page-link:hover { background:#f7f9ff; }


.product-detail {
	display: flex;
	flex-wrap: wrap;
	gap: 30px;
	background: #fff;
	border-radius: 8px;
	padding: 20px;
	box-shadow: 0 3px 15px rgba(0,0,0,0.08);
	margin: auto;
}

.product-detail img {
	width: 100%;
	max-width: 350px;
	height: auto;
	border-radius: 8px;
	object-fit: cover;
	border: 1px solid #eee;
}

.product-info {
	flex: 1;
	min-width: 250px;
}

.product-info h1 {
	font-size: 24px;
	margin-bottom: 15px;
	color: #222;
}

.product-meta {
	font-size: 15px;
	margin-bottom: 15px;
	color: #555;
}

.product-meta span {
	display: block;
	margin-bottom: 5px;
}

.product-actions {
	margin-top: 20px;
}

.btn-primary {
	display: inline-block;
	padding: 10px 20px;
	background: #007bff;
	color: #fff;
	font-weight: bold;
	border-radius: 5px;
	text-decoration: none;
	transition: background 0.3s ease;
}

.btn-primary:hover {
	background: #0056b3;
}

@media (max-width: 768px) {
	.product-detail {
		flex-direction: column;
		text-align: center;
	}

	.product-info h1 {
		font-size: 20px;
	}

	.product-meta {
		font-size: 14px;
	}
}


.contact-section {
	max-width: 1100px;
	margin: 40px auto;
	padding: 20px;
	background: #fff;
	border-radius: 10px;
	box-shadow: 0 4px 20px rgba(0,0,0,0.08);
	font-family: 'Arial', sans-serif;
	color: #333;
}
.contact-section h1 {
	text-align: center;
	font-size: 32px;
	margin-bottom: 30px;
	color: #222;
}
.contact-content {
	display: flex;
	gap: 30px;
	flex-wrap: wrap;
}
.left-col, .right-col {
	flex: 1;
	min-width: 300px;
}
.contact-info {
	display: grid;
	gap: 20px;
}
.contact-card {
	background: #f9f9f9;
	border-radius: 8px;
	padding: 20px;
	box-shadow: 0 2px 10px rgba(0,0,0,0.05);
	display: flex;
	align-items: center;
	gap: 15px;
}
.contact-card i {
	font-size: 28px;
	color: #007bff;
}
.contact-card h3 {
	margin-bottom: 5px;
	font-size: 18px;
	color: #007bff;
}
.contact-card p {
	margin: 0;
	font-size: 14px;
}
.contact-form-wrapper {
	border: 1px solid #ddd;
	border-radius: 8px;
	padding: 20px;
	background: #fafafa;
}
.contact-form {
	display: grid;
	gap: 15px;
}
.contact-form input,
.contact-form textarea {
	width: 100%;
	padding: 12px;
	border-radius: 6px;
	border: 1px solid #ccc;
	font-size: 14px;
}
.contact-form button {
	padding: 12px;
	background: #007bff;
	border: none;
	color: white;
	font-size: 16px;
	border-radius: 6px;
	cursor: pointer;
	transition: background 0.3s;
}
.contact-form button:hover {
	background: #0056b3;
}
.map-container {
	margin-top: 30px;
	border-radius: 8px;
	overflow: hidden;
	box-shadow: 0 2px 10px rgba(0,0,0,0.05);
}
@media (max-width: 768px) {
	.contact-section {
		padding: 15px;
	}
	.contact-content {
		flex-direction: column;
	}
}

.about-section {
	max-width: 1000px;
	margin: 50px auto;
	padding: 40px;
	background: #fff;
	border-radius: 12px;
	box-shadow: 0 4px 25px rgba(0,0,0,0.08);
	font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
	color: #333;
}
.about-section h1 {
	text-align: center;
	font-size: 34px;
	font-weight: bold;
	margin-bottom: 10px;
	color: #1a1a1a;
	position: relative;
}
.about-section h1::after {
	content: "";
	width: 60px;
	height: 4px;
	background: #007bff;
	display: block;
	margin: 12px auto 0;
	border-radius: 2px;
}
.about-section img {
	width: 100%;
	max-height: 400px;
	object-fit: cover;
	border-radius: 10px;
	margin: 25px 0;
	box-shadow: 0 4px 15px rgba(0,0,0,0.1);
	transition: transform 0.4s ease;
}
.about-section img:hover {
	transform: scale(1.02);
}
.about-text {
	display: grid;
	gap: 20px;
}
.about-text p {
	background: #f9f9f9;
	padding: 18px;
	border-radius: 8px;
	font-size: 16px;
	line-height: 1.7;
	box-shadow: 0 2px 8px rgba(0,0,0,0.03);
	transition: background 0.3s ease;
}
.about-text p:hover {
	background: #f1f7ff;
}
@media (max-width: 768px) {
	.about-section {
		padding: 25px;
	}
	.about-section h1 {
		font-size: 28px;
	}
	.about-text p {
		font-size: 15px;
	}
}

.breadcrumb-wrapper {
	background: #f8f9fa;
	padding: 5px 5px;
	border-radius: 6px;
	margin-bottom: 5px;
}
.breadcrumb {
	margin: 0;
	padding: 0;
	list-style: none;
	display: flex;
	flex-wrap: wrap;
}
.breadcrumb-item {
	font-size: 14px;
	color: #6c757d;
}
.breadcrumb-item a {
	color: var(--a-primary-color);
	text-decoration: none;
}
.breadcrumb-item a:hover {
	text-decoration: underline;
}
.breadcrumb-item + .breadcrumb-item::before {
	content: "›";
	padding: 0 8px;
	color: #6c757d;
}
.breadcrumb-item.active {
	color: #495057;
	font-weight: 500;
}
.section-title {
	text-align: center;
	font-size: 28px;
	font-weight: bold;
	margin-bottom: 20px;
	position: relative;
	display: center;
}
.section-title::after {
	content: "";
	display: block;
	width: 60px;
	height: 3px;
	background-color: var(--a-primary-color);
	margin: 8px auto 0;
	border-radius: 2px;
}

.home-products-grid {
	display: flex;
	flex-wrap: wrap;
	gap: 20px;
}
.home-product-card {
	flex: 1 1 calc(25% - 20px);
	background: #fff;
	border-radius: 8px;
	box-shadow: 0 2px 10px rgba(0,0,0,0.05);
	overflow: hidden;
	display: flex;
	flex-direction: column;
	transition: transform 0.2s ease;
}
.home-product-card:hover {
	transform: translateY(-5px);
}
.home-product-image img {
	width: 100%;
	height: 220px;
	object-fit: contain;
}
.home-product-body {
	padding: 15px;
	flex: 1;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	text-align: center;
}
.home-product-title {
	font-size: 16px;
	font-weight: bold;
	margin-bottom: 8px;
	color: #333;
}
.home-product-price {
	font-size: 14px;
	color: #666;
	margin-bottom: 12px;
}
.home-product-btn {
	display: inline-block;
	padding: 8px 15px;
	background: var(--a-primary-color);
	color: #fff;
	border-radius: 4px;
	text-decoration: none;
	font-size: 14px;
	transition: background 0.3s;
}
.home-product-btn:hover {
	background: #0056b3;
}

@media (max-width: 992px) {
	.home-product-card {
		flex: 1 1 calc(33.333% - 20px);
	}
}
@media (max-width: 768px) {
	.home-product-card {
		flex: 1 1 calc(50% - 20px);
	}
}
@media (max-width: 576px) {
	.home-product-card {
		flex: 1 1 100%;
	}
	.home-product-image img {
		height: 180px;
	}
}

.hero-section{background:var(--hero-bg-color);padding:50px 20px;  margin-bottom:25px;}
.hero-container{max-width:1200px;margin:0 auto;display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:center;}

.hero-text h1{font-size:36px;margin-bottom:12px; color:black;}
.hero-text p{font-size:16px;color:#555;margin-bottom:20px;color:black;}
.hero-btn{display:inline-block;padding:12px 22px;border-radius:8px;background:#007bff;color:#fff;text-decoration:none;font-weight:600;transition:transform .2s,filter .2s;}
.hero-btn:hover{filter:brightness(.92);transform:translateY(-1px);}

.hero-slider{position:relative;}
.carousel-stage{
	position:relative; height:calc(var(--card-h) + 10px);
	perspective: 1100px; transform-style:preserve-3d; overflow:visible;
}
.loading{color:#666;font-size:14px;text-align:center;padding:20px;}

.slide{
	position:absolute; top:0; left:50%;
	width:var(--card-w); height:var(--card-h);
	transform:translateX(-50%) scale(.85) translateZ(-140px);
	opacity:.45; z-index:1;
	background:#fff; border-radius:14px; padding:12px;
	box-shadow:0 10px 24px rgba(0,0,0,.12);
	display:flex; flex-direction:column; align-items:center; text-align:center;
	transition:transform .55s ease, opacity .55s ease, filter .55s ease, box-shadow .55s ease;
}
.slide img{width:100%; height:190px; object-fit:contain; border-radius:10px; margin-bottom:10px;}
.slide h4{
	font-size:15px;font-weight:700;color:#222;line-height:1.3;
	display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}
.slide a{text-decoration:none;color:inherit;display:block;width:100%;height:100%;}

.slide.active{ transform:translateX(-50%) scale(1) translateZ(0); z-index:4; opacity:1; }
.slide.left{   transform:translateX(calc(-50% - var(--gap-x)))  scale(.93) translateZ(-60px) rotateY(12deg);  z-index:3; opacity:.9; }
.slide.right{  transform:translateX(calc(-50% + var(--gap-x)))  scale(.93) translateZ(-60px) rotateY(-12deg); z-index:3; opacity:.9; }
.slide.back{   transform:translateX(-50%) scale(.83) translateZ(-180px); z-index:2; opacity:.55; }

.slide.active:hover{box-shadow:0 14px 34px rgba(0,0,0,.16);}

@media (max-width: 992px){
	.hero-container{grid-template-columns:1fr;}
	:root{ --card-w:280px; --card-h:300px; --gap-x:150px; }
}
@media (max-width: 576px) {
	.hero-slider {
		overflow: hidden;
	}

	:root {
		--card-w: 78vw;
		--card-h: 280px;
		--gap-x: 55vw;
	}

	.slide.left {
		transform: translateX(calc(-50% - var(--gap-x))) scale(0.85) translateZ(-40px) rotateY(8deg) !important;
		opacity: 0.8;
	}
	.slide.right {
		transform: translateX(calc(-50% + var(--gap-x))) scale(0.85) translateZ(-40px) rotateY(-8deg) !important;
		opacity: 0.8;
	}
	.slide.back {
		transform: translateX(-50%) scale(0.75) translateZ(-120px) !important;
		opacity: 0.5;
	}
	.slide.active {
		transform: translateX(-50%) scale(1) translateZ(0) !important;
		opacity: 1 !important;
	}
}
.cta-wrap{
	position: relative;
	padding: 64px 20px;
	background: linear-gradient(135deg, var(--cta-bg), var(--cta-bg2));
	overflow: hidden;
	isolation: isolate;
}
.cta-container{
	max-width: 1200px; margin: 0 auto; position: relative;
}
.cta-content{
	position: relative;
	z-index: 2;
	margin: 0 auto;
	max-width: 780px;
	text-align: center;
	color: #fff;
	padding: 28px 20px;
	backdrop-filter: blur(6px);
}
.cta-title{
	font-size: 34px; font-weight: 800; letter-spacing:.2px; margin: 0 0 10px;
}
.cta-title::after{
	content:""; display:block; width:64px; height:4px; margin:12px auto 0;
	background: var(--cta-accent); border-radius: 2px; opacity:.9;
}
.cta-desc{
	margin: 14px auto 22px; color: rgba(255,255,255,.9); font-size: 16px; line-height: 1.7;
	max-width: 680px;
}
.cta-actions{ display:flex; gap:12px; justify-content:center; flex-wrap: wrap; }

.cta-btn{
	display:inline-flex; align-items:center; gap:10px;
	padding: 12px 18px; border-radius: 12px; text-decoration:none; font-weight:700;
	border:1px solid rgba(255,255,255,.25); transition: transform .18s ease, filter .18s ease, background .2s;
	will-change: transform;
}
.cta-btn svg{ transform: translateX(0); transition: transform .2s ease; }
.cta-btn:hover svg{ transform: translateX(2px); }

.cta-btn.primary{
	background: #fff; color:#0f172a; border-color: #fff;
	box-shadow: 0 8px 24px rgba(0,0,0,.12);
}
.cta-btn.primary:hover{ transform: translateY(-2px); filter: brightness(.98); }

.cta-btn.ghost{
	color:#fff; background: rgba(255,255,255,.08);
}
.cta-btn.ghost:hover{ transform: translateY(-2px); background: rgba(255,255,255,.12); }

.cta-bullets{
	margin: 18px auto 0; padding:0; list-style:none;
	display:flex; gap:14px 26px; justify-content:center; flex-wrap:wrap; color:rgba(255,255,255,.92);
	font-weight:600;
}
.cta-bullets li{ display:flex; align-items:center; gap:8px; }
.cta-bullets svg{ color: #a7f3d0; }

/* Dekoratif şekiller */
.cta-art{ position:absolute; inset:0; z-index:1; pointer-events:none; }
.blob{
	position:absolute; filter: blur(26px); opacity:.45; mix-blend-mode: screen;
	width: 360px; height: 360px; border-radius: 50%;
	background: radial-gradient(closest-side, #ffffff, transparent 70%);
	animation: float 10s ease-in-out infinite;
}
.blob.b1{ top:-80px; left:-60px; }
.blob.b2{ bottom:-120px; right:-80px; animation-delay: -4s; }

.ring{
	position:absolute; width: 260px; height:260px; border-radius:50%;
	border: 1px solid rgba(255,255,255,.25);
	animation: spin 20s linear infinite;
}
.ring.r1{ top: -40px; right: 18%; }
.ring.r2{ bottom: -60px; left: 12%; animation-direction: reverse; animation-duration: 28s; }

.shine{
	position:absolute; inset:0; background:
		radial-gradient(60% 50% at 50% 0%, rgba(255,255,255,.18) 0%, transparent 60%);
	opacity:.7;
}

@keyframes float{
	0%,100%{ transform: translateY(0) }
	50%{ transform: translateY(-14px) }
}
@keyframes spin{
	to{ transform: rotate(360deg) }
}

@media (max-width: 768px){
	.cta-title{ font-size: 28px; }
	.cta-desc{ font-size: 15px; }
}
@media (max-width: 480px){
	.cta-btn{ width:100%; justify-content:center; }
	.cta-title{ font-size: 24px; }
}

.auth-wrapper {
	min-height: 100vh;
	display: flex;
	align-items: center;
	justify-content: center;
	background: linear-gradient(120deg, #007bff, #00b4d8);
	padding: 20px;
}

.auth-card {
	background: #fff;
	border-radius: 12px;
	padding: 30px;
	max-width: 420px;
	width: 100%;
	box-shadow: 0 8px 25px rgba(0,0,0,0.1);
	animation: fadeIn 0.6s ease;
}

.auth-title {
	font-size: 26px;
	font-weight: bold;
	margin-bottom: 5px;
	color: #333;
	text-align: center;
}

.auth-subtitle {
	font-size: 14px;
	color: #777;
	margin-bottom: 25px;
	text-align: center;
}

.form-group {
	margin-bottom: 18px;
}

.form-group label {
	display: block;
	font-size: 14px;
	margin-bottom: 6px;
	color: #555;
}

.form-group input {
	width: 100%;
	padding: 12px;
	border-radius: 8px;
	border: 1px solid #ddd;
	outline: none;
	transition: all 0.3s ease;
}

.form-group input:focus {
	border-color: #007bff;
	box-shadow: 0 0 0 3px rgba(0,123,255,0.2);
}

.auth-btn {
	background: #007bff;
	color: white;
	border: none;
	padding: 12px;
	width: 100%;
	border-radius: 8px;
	cursor: pointer;
	font-size: 15px;
	transition: background 0.3s ease;
}

.auth-btn:hover {
	background: #0056b3;
}

.auth-footer {
	margin-top: 15px;
	font-size: 14px;
	color: #555;
	text-align: center;
}

.auth-footer a {
	color: #007bff;
	text-decoration: none;
}

.auth-footer a:hover {
	text-decoration: underline;
}

@keyframes fadeIn {
	from { opacity: 0; transform: translateY(15px); }
	to { opacity: 1; transform: translateY(0); }
}

@media (max-width: 576px) {
	.auth-card {
		padding: 20px;
	}
	.auth-title {
		font-size: 22px;
	}
}