/* Reset ve Temel Stiller */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

:root {
    --primary-color: #1a1a1a;
    --secondary-color: #c9a961;
    --text-light: #ffffff;
    --text-dark: #333333;
    --bg-overlay: rgba(0, 0, 0, 0.4);
    --transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    --antrasit: #2d2d2d;
    --orange: #ff7043;
    --antrasit-light: #d0d0d0;
    --bg-color: #0E0E0E;
    --primary-color-new: #FFD700;
    --secondary-color-new: #E0E0E0;
    --accent-color: #6B4EFF;
    --text-color: #FFFFFF;
    
    /* Sparkle background değişkenleri */
    --bg: #000000;
    --gold: #f6d36b;
    --gold-2: #ffd76a;
    --gold-dim: rgba(255, 215, 130, 0.35);
}

body {
    font-family: 'Arial', 'Helvetica Neue', Helvetica, sans-serif;
    color: var(--text-dark);
    line-height: 1.6;
    overflow-x: hidden;
    background: #fff;
    margin: 0;
    padding: 0;
}

.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

/* Header Stilleri - Sparkle Background */
.site-header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    isolation: isolate;
    background:
        radial-gradient(1200px 600px at 50% 30%, rgba(255, 255, 255, 0.06), transparent 60%),
        radial-gradient(800px 400px at 50% 70%, rgba(255, 255, 255, 0.04), transparent 65%),
        var(--bg);
    background-blend-mode: screen, screen, normal;
    overflow: hidden;
    box-shadow: 0 2px 20px rgba(0, 0, 0, 0.1);
    z-index: 1000;
    transition: var(--transition);
}

.site-header::before,
.site-header::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
}

.site-header::before {
    /* İri ve orta taneler - optimize edilmiş (daha az gradient) */
    background-image:
        radial-gradient(2px 2px at 15% 20%, var(--gold) 50%, transparent 51%),
        radial-gradient(1.5px 1.5px at 45% 35%, var(--gold-2) 50%, transparent 51%),
        radial-gradient(2px 2px at 75% 25%, var(--gold) 50%, transparent 51%),
        radial-gradient(1.5px 1.5px at 25% 65%, var(--gold-2) 50%, transparent 51%),
        radial-gradient(2px 2px at 55% 70%, var(--gold) 50%, transparent 51%),
        radial-gradient(1.5px 1.5px at 85% 80%, var(--gold-2) 50%, transparent 51%);
    background-repeat: repeat;
    background-size: 150px 150px, 180px 180px, 200px 200px, 160px 160px, 190px 190px, 210px 210px;
    opacity: 1;
    will-change: background-position;
}

.site-header::after {
    /* İnce altın tozu - optimize edilmiş (daha az gradient) */
    background-image:
        radial-gradient(1px 1px at 10% 12%, var(--gold-dim) 60%, transparent 61%),
        radial-gradient(0.8px 0.8px at 35% 18%, var(--gold-dim) 60%, transparent 61%),
        radial-gradient(1px 1px at 60% 10%, var(--gold-dim) 60%, transparent 61%),
        radial-gradient(0.8px 0.8px at 85% 20%, var(--gold-dim) 60%, transparent 61%),
        radial-gradient(1px 1px at 20% 55%, var(--gold-dim) 60%, transparent 61%),
        radial-gradient(0.8px 0.8px at 50% 58%, var(--gold-dim) 60%, transparent 61%),
        radial-gradient(1px 1px at 80% 62%, var(--gold-dim) 60%, transparent 61%),
        radial-gradient(0.8px 0.8px at 15% 88%, var(--gold-dim) 60%, transparent 61%),
        radial-gradient(1px 1px at 55% 90%, var(--gold-dim) 60%, transparent 61%),
        radial-gradient(0.8px 0.8px at 85% 92%, var(--gold-dim) 60%, transparent 61%);
    background-repeat: repeat;
    background-size: 50px 50px, 55px 55px, 60px 60px, 65px 65px, 70px 70px, 52px 52px, 57px 57px, 62px 62px, 67px 67px, 72px 72px;
    opacity: 1;
    will-change: background-position;
}

/* Shimmer efekti için - isteğe bağlı */
.site-header .shimmer {
    position: absolute;
    inset: -40% -60%;
    background: linear-gradient(75deg, transparent 30%, rgba(255, 255, 255, 0.08) 45%, transparent 60%);
    mix-blend-mode: screen;
    animation: sweep 6s linear infinite;
    pointer-events: none;
    z-index: 1;
}

@keyframes sweep {
    0% {
        transform: translateX(-40%) translateY(-10%) rotate(8deg);
    }
    100% {
        transform: translateX(40%) translateY(10%) rotate(8deg);
    }
}

/* Üst Bar */
.top-bar {
    width: 100%;
    height: 35px;
    background: transparent;
    display: flex;
    align-items: center;
    position: relative;
    z-index: 2;
}

.top-bar-inner {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.top-bar-left {
    display: flex;
    align-items: center;
    gap: 20px;
}

.contact-link {
    display: flex;
    align-items: center;
    gap: 6px;
    text-decoration: none;
    color: var(--text-light);
    font-size: 0.7rem;
    font-weight: 400;
    white-space: nowrap;
    transition: opacity 0.3s ease;
}

.contact-link:hover {
    opacity: 0.8;
}

.contact-link .icon {
    font-size: 0.75rem;
}

.top-bar-right {
    display: flex;
    align-items: center;
    gap: 15px;
}

.language-switcher {
    display: flex;
    align-items: center;
    gap: 5px;
}

.lang-link {
    color: var(--text-light);
    text-decoration: none;
    font-size: 0.7rem;
    font-weight: 500;
    transition: opacity 0.3s ease;
    padding: 2px 4px;
}

.lang-link:hover {
    opacity: 0.7;
}

.lang-link.active {
    font-weight: 600;
    opacity: 1;
}

.lang-separator {
    color: var(--text-light);
    font-size: 0.7rem;
    opacity: 0.6;
}

.dealer-login-btn {
    background: var(--orange);
    color: var(--text-light);
    text-decoration: none;
    font-size: 0.7rem;
    font-weight: 600;
    padding: 4px 12px;
    border-radius: 3px;
    transition: all 0.3s ease;
    white-space: nowrap;
    display: inline-block;
}

.dealer-login-btn:hover {
    background: #ff5722;
    transform: translateY(-1px);
    box-shadow: 0 2px 4px rgba(255, 112, 67, 0.3);
}

.header-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 20px;
    min-height: 70px;
    overflow: visible;
    position: relative;
    z-index: 2;
}

.header-left {
    display: flex;
    align-items: center;
    gap: 40px;
    overflow: visible;
    flex: 1;
    min-width: 0;
}

.header-right {
    display: flex;
    align-items: center;
    gap: 15px;
}

.logo {
    display: flex;
    align-items: center;
    gap: 12px;
    text-decoration: none;
    color: var(--text-light);
    font-weight: 600;
    font-size: 1.25rem;
    transition: var(--transition);
}

.logo img {
    height: 50px;
    width: auto;
    object-fit: contain;
}

.logo:hover {
    transform: scale(1.05);
}

/* Navigasyon */
.main-nav {
    margin-left: 25px;
    overflow: visible;
}

.main-nav ul {
    display: flex;
    list-style: none;
    gap: 30px;
    align-items: center;
    flex-wrap: nowrap;
}

.main-nav a {
    text-decoration: none;
    color: var(--text-light);
    font-weight: 500;
    font-size: 0.95rem;
    position: relative;
    transition: var(--transition);
    padding: 5px 0;
}

.main-nav a::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 0;
    height: 2px;
    background: var(--primary-color-new);
    transition: var(--transition);
}

.main-nav a:hover {
    color: var(--primary-color-new);
}

.main-nav a:hover::after {
    width: 100%;
}

/* Arama Kutusu */
.search-form {
    display: flex;
    align-items: center;
}

.search-box {
    display: flex;
    align-items: center;
    background: rgba(255, 255, 255, 0.2);
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: 20px;
    padding: 0;
    transition: var(--transition);
    overflow: hidden;
    height: 36px;
}

.search-box:focus-within {
    border-color: var(--primary-color-new);
    box-shadow: 0 0 0 3px rgba(255, 215, 0, 0.2);
    background: rgba(255, 255, 255, 0.3);
}

.search-input {
    border: none;
    outline: none;
    background: transparent;
    padding: 6px 12px;
    font-size: 0.85rem;
    color: var(--text-light);
    width: 200px;
    font-family: 'Poppins', sans-serif;
    height: 100%;
}

.search-input::placeholder {
    color: rgba(255, 255, 255, 0.6);
}

.search-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    background: var(--primary-color-new);
    border: none;
    border-radius: 50%;
    cursor: pointer;
    color: var(--bg-color);
    transition: var(--transition);
    padding: 0;
    margin-right: 2px;
    flex-shrink: 0;
}

.search-btn:hover {
    background: #ffed4e;
    transform: scale(1.05);
}

.search-btn svg {
    width: 14px;
    height: 14px;
}

/* Mobil Menü Toggle */
.nav-toggle {
    display: none;
    flex-direction: column;
    gap: 5px;
    background: none;
    border: none;
    cursor: pointer;
    padding: 5px;
}

.nav-toggle span {
    width: 25px;
    height: 3px;
    background: var(--text-light);
    transition: var(--transition);
    border-radius: 2px;
}

/* Hero Slider */
.hero-slider {
    position: relative;
    width: calc(100% - 10px);
    height: 75vh;
    overflow: hidden;
    margin: 105px 5px 0 5px; /* 70px header + 35px top bar, sağ-sol 5px boşluk */
}

.slides {
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
    overflow: hidden;
}

.slide {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    transform: translateX(100%);
    transition: transform 1.2s cubic-bezier(0.4, 0, 0.2, 1), opacity 1.2s ease-in-out;
    background-image: var(--bg);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    flex-shrink: 0;
}

.slide:first-child {
    transform: translateX(0);
}

.slide.active {
    opacity: 1;
    transform: translateX(0) !important;
    z-index: 1;
}

.slide.prev {
    transform: translateX(-100%);
    opacity: 0;
}

.slide.next {
    transform: translateX(100%);
    opacity: 0;
}

.slide::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(
        to bottom,
        rgba(0, 0, 0, 0.3) 0%,
        rgba(0, 0, 0, 0.1) 50%,
        rgba(0, 0, 0, 0.5) 100%
    );
    z-index: 1;
}

.slide .caption {
    position: absolute;
    left: 80px;
    bottom: 100px;
    z-index: 2;
    max-width: 600px;
    animation: fadeInUp 1s ease-out 0.3s both;
}

.slide .caption p {
    font-size: 2.5rem;
    font-weight: 300;
    color: var(--text-light);
    line-height: 1.4;
    text-shadow: 2px 2px 8px rgba(0, 0, 0, 0.5);
    letter-spacing: 1px;
}

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

/* Slider Kontrolleri */
.slider-controls {
    position: absolute;
    bottom: 40px;
    right: 80px;
    z-index: 10;
    display: flex;
    gap: 15px;
}

.slider-controls button {
    width: 50px;
    height: 50px;
    border: 2px solid rgba(255, 255, 255, 0.8);
    background: rgba(255, 255, 255, 0.2);
    color: var(--text-light);
    font-size: 2rem;
    cursor: pointer;
    border-radius: 50%;
    transition: var(--transition);
    display: flex;
    align-items: center;
    justify-content: center;
    backdrop-filter: blur(10px);
}

.slider-controls button:hover {
    background: rgba(255, 255, 255, 0.4);
    border-color: var(--text-light);
    transform: scale(1.1);
}

/* Slider Dots */
.dots {
    position: absolute;
    bottom: 40px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 10;
    display: flex;
    gap: 12px;
}

.dots .dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.5);
    cursor: pointer;
    transition: var(--transition);
    border: 2px solid rgba(255, 255, 255, 0.8);
}

.dots .dot.active {
    background: var(--text-light);
    transform: scale(1.3);
}

/* Bölümler */
.section {
    padding: 100px 20px;
    min-height: 60vh;
}

#kataloglar,
#magazalar,
#hakkimizda {
	padding: 2px 0;
	margin-bottom: 0;
	margin-top: 5px;
	min-height: auto;
	display: block;
}

#hizmetlerimiz {
	padding: 2px 0;
	margin-bottom: 0;
	margin-top: 0;
	min-height: auto;
	display: block;
}

#kataloglar .container,
#magazalar .container,
#hizmetlerimiz .container,
#hakkimizda .container {
	height: auto;
	display: block;
}

#kataloglar h2,
#magazalar h2,
#hizmetlerimiz h2,
#hakkimizda h2 {
	color: var(--text-light);
	margin: 0;
	text-align: center;
	text-transform: uppercase;
	letter-spacing: 1.5px;
	font-size: 1.2rem;
	font-weight: 300;
	line-height: 1.2;
}

/* Mağazalar Başlık - Altın Renk ve Büyük Boyut */
#magazalar h2 {
	color: var(--gold);
	font-size: 1.5rem;
	font-weight: 500;
	text-shadow: 0 2px 8px rgba(246, 211, 107, 0.4);
}

#kataloglar + .section {
	padding-top: 20px;
}

/* Hizmetler İçerik */
.hizmetler-icerik {
	width: calc(100% - 10px);
	margin: 5px 5px 20px 5px;
	padding: 0;
	background: transparent;
	border: none;
	border-radius: 0;
}

/* Accordion Stilleri - Siyah ve Altın Tema */
.accordion-item {
	margin-bottom: 10px;
	background: var(--bg);
	border: 2px solid var(--gold);
	border-radius: 4px;
	overflow: hidden;
	transition: all 0.3s ease;
	box-shadow: 0 2px 8px rgba(246, 211, 107, 0.2);
}

.accordion-item:hover {
	border-color: var(--gold-2);
	box-shadow: 0 4px 12px rgba(246, 211, 107, 0.3);
}

.accordion-item:last-child {
	margin-bottom: 0;
}

.accordion-header {
	width: 100%;
	padding: 15px 20px;
	background: linear-gradient(135deg, #1a1a1a 0%, #0a0a0a 100%);
	border: none;
	cursor: pointer;
	text-align: left;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	transition: all 0.3s ease;
	font-family: inherit;
	position: relative;
}

.accordion-header::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 2px;
	background: linear-gradient(90deg, transparent, var(--gold), transparent);
	opacity: 0;
	transition: opacity 0.3s ease;
}

.accordion-header:hover {
	background: linear-gradient(135deg, #252525 0%, #151515 100%);
}

.accordion-header:hover::before {
	opacity: 1;
}

.accordion-header[aria-expanded="true"] {
	background: linear-gradient(135deg, #2a2a2a 0%, #1a1a1a 100%);
	border-bottom: 2px solid var(--gold);
}

.accordion-header[aria-expanded="true"]::before {
	opacity: 1;
	background: linear-gradient(90deg, transparent, var(--gold-2), transparent);
}

.accordion-header[aria-expanded="true"] .accordion-icon {
	transform: rotate(45deg);
	color: var(--gold-2);
}

.accordion-title {
	flex: 1;
	color: var(--gold);
	font-size: 1.1rem;
	font-weight: 600;
	line-height: 1.3;
	text-shadow: 0 1px 3px rgba(246, 211, 107, 0.3);
}

.accordion-header[aria-expanded="true"] .accordion-title {
	color: var(--gold-2);
	text-shadow: 0 1px 5px rgba(255, 215, 106, 0.5);
}

.hizmet-icon {
	font-size: 1rem;
	margin-right: 0;
	flex-shrink: 0;
	filter: drop-shadow(0 1px 2px rgba(246, 211, 107, 0.4));
}

.accordion-icon {
	font-size: 24px;
	font-weight: 300;
	color: var(--gold);
	transition: all 0.3s ease;
	flex-shrink: 0;
	line-height: 1;
	text-shadow: 0 1px 3px rgba(246, 211, 107, 0.4);
}

.accordion-content {
	max-height: 0;
	overflow: hidden;
	transition: max-height 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.accordion-header[aria-expanded="true"] + .accordion-content {
	/* JavaScript ile dinamik olarak ayarlanacak */
}

.accordion-body {
	padding: 20px;
	color: #e0e0e0;
	font-size: 0.9rem;
	line-height: 1.6;
	background: linear-gradient(135deg, #0a0a0a 0%, #1a1a1a 100%);
	border-top: 1px solid rgba(246, 211, 107, 0.2);
}

.accordion-body p {
	margin: 0;
	color: #e0e0e0;
	font-size: 0.9rem;
	line-height: 1.6;
}

.urun-listesi {
	list-style: none;
	padding: 0;
	margin: 4px 0 0 0;
}

.urun-listesi li {
	color: #e0e0e0;
	font-size: 0.9rem;
	line-height: 1.4;
	margin-bottom: 8px;
	padding-left: 20px;
	position: relative;
}

.urun-listesi li:last-child {
	margin-bottom: 0;
}

.urun-listesi li:before {
	content: "✦";
	color: var(--gold);
	font-size: 0.85rem;
	position: absolute;
	left: 0;
	top: 2px;
	text-shadow: 0 0 4px rgba(246, 211, 107, 0.6);
}

.urun-listesi li strong {
	color: var(--gold-2);
	font-weight: 600;
	text-shadow: 0 0 3px rgba(255, 215, 106, 0.4);
}

.hakkimizda-icerik {
	width: calc(100% - 10px);
	margin: 5px 5px 20px 5px;
	padding: 20px;
	text-align: center;
}

.hakkimizda-icerik p {
	color: #444;
	font-size: 1rem;
	line-height: 1.6;
	margin: 0;
	max-width: 800px;
	margin-left: auto;
	margin-right: auto;
}

@media (max-width: 768px) {
	.hizmetler-icerik {
		padding: 0;
		margin: 5px;
	}

	.accordion-item {
		margin-bottom: 8px;
	}

	.accordion-header {
		padding: 12px 15px;
	}

	.accordion-title {
		font-size: 1rem;
	}

	.accordion-body {
		padding: 15px;
		font-size: 0.85rem;
	}

	.accordion-body p {
		font-size: 0.85rem;
	}

	.accordion-icon {
		font-size: 20px;
	}

	.accordion-item {
		border-width: 1.5px;
	}

	.urun-listesi li {
		font-size: 0.85rem;
	}
}

/* Mağazalar İçerik */
/* Mağazalar Bölümü - Siyah Arka Plan ve Altın Noktalar */
#magazalar.section-fullwidth {
	background: var(--bg);
	position: relative;
	overflow: hidden;
	isolation: isolate;
}

#magazalar.section-fullwidth::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 0;
	pointer-events: none;
	background-image:
		radial-gradient(2px 2px at 15% 25%, var(--gold) 50%, transparent 51%),
		radial-gradient(1.5px 1.5px at 45% 35%, var(--gold-2) 50%, transparent 51%),
		radial-gradient(2px 2px at 75% 30%, var(--gold) 50%, transparent 51%),
		radial-gradient(1.5px 1.5px at 25% 65%, var(--gold-2) 50%, transparent 51%),
		radial-gradient(2px 2px at 55% 70%, var(--gold) 50%, transparent 51%),
		radial-gradient(1.5px 1.5px at 85% 80%, var(--gold-2) 50%, transparent 51%);
	background-repeat: repeat;
	background-size: 150px 150px, 180px 180px, 200px 200px, 160px 160px, 190px 190px, 210px 210px;
	opacity: 1;
	will-change: background-position;
}

#magazalar.section-fullwidth::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 0;
	pointer-events: none;
	background-image:
		radial-gradient(1px 1px at 10% 12%, var(--gold-dim) 60%, transparent 61%),
		radial-gradient(0.8px 0.8px at 35% 18%, var(--gold-dim) 60%, transparent 61%),
		radial-gradient(1px 1px at 60% 10%, var(--gold-dim) 60%, transparent 61%),
		radial-gradient(0.8px 0.8px at 85% 20%, var(--gold-dim) 60%, transparent 61%),
		radial-gradient(1px 1px at 20% 55%, var(--gold-dim) 60%, transparent 61%),
		radial-gradient(0.8px 0.8px at 50% 58%, var(--gold-dim) 60%, transparent 61%),
		radial-gradient(1px 1px at 80% 62%, var(--gold-dim) 60%, transparent 61%),
		radial-gradient(0.8px 0.8px at 15% 88%, var(--gold-dim) 60%, transparent 61%),
		radial-gradient(1px 1px at 55% 90%, var(--gold-dim) 60%, transparent 61%),
		radial-gradient(0.8px 0.8px at 85% 92%, var(--gold-dim) 60%, transparent 61%);
	background-repeat: repeat;
	background-size: 50px 50px, 55px 55px, 60px 60px, 65px 65px, 70px 70px, 52px 52px, 57px 57px, 62px 62px, 67px 67px, 72px 72px;
	opacity: 1;
	will-change: background-position;
}

#magazalar.section-fullwidth .container {
	position: relative;
	z-index: 2;
}

.magazalar-icerik {
	width: calc(100% - 10px);
	margin: 5px 5px 5px 5px;
	margin-top: 5px;
	margin-bottom: 0;
	padding: 20px;
	background: var(--bg);
	position: relative;
	isolation: isolate;
}

.magazalar-icerik::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 0;
	pointer-events: none;
	background-image:
		radial-gradient(2px 2px at 15% 25%, var(--gold) 50%, transparent 51%),
		radial-gradient(1.5px 1.5px at 45% 35%, var(--gold-2) 50%, transparent 51%),
		radial-gradient(2px 2px at 75% 30%, var(--gold) 50%, transparent 51%),
		radial-gradient(1.5px 1.5px at 25% 65%, var(--gold-2) 50%, transparent 51%),
		radial-gradient(2px 2px at 55% 70%, var(--gold) 50%, transparent 51%),
		radial-gradient(1.5px 1.5px at 85% 80%, var(--gold-2) 50%, transparent 51%);
	background-repeat: repeat;
	background-size: 150px 150px, 180px 180px, 200px 200px, 160px 160px, 190px 190px, 210px 210px;
	opacity: 1;
	will-change: background-position;
}

.magazalar-icerik::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 0;
	pointer-events: none;
	background-image:
		radial-gradient(1px 1px at 10% 12%, var(--gold-dim) 60%, transparent 61%),
		radial-gradient(0.8px 0.8px at 35% 18%, var(--gold-dim) 60%, transparent 61%),
		radial-gradient(1px 1px at 60% 10%, var(--gold-dim) 60%, transparent 61%),
		radial-gradient(0.8px 0.8px at 85% 20%, var(--gold-dim) 60%, transparent 61%),
		radial-gradient(1px 1px at 20% 55%, var(--gold-dim) 60%, transparent 61%),
		radial-gradient(0.8px 0.8px at 50% 58%, var(--gold-dim) 60%, transparent 61%),
		radial-gradient(1px 1px at 80% 62%, var(--gold-dim) 60%, transparent 61%),
		radial-gradient(0.8px 0.8px at 15% 88%, var(--gold-dim) 60%, transparent 61%),
		radial-gradient(1px 1px at 55% 90%, var(--gold-dim) 60%, transparent 61%),
		radial-gradient(0.8px 0.8px at 85% 92%, var(--gold-dim) 60%, transparent 61%);
	background-repeat: repeat;
	background-size: 50px 50px, 55px 55px, 60px 60px, 65px 65px, 70px 70px, 52px 52px, 57px 57px, 62px 62px, 67px 67px, 72px 72px;
	opacity: 1;
	will-change: background-position;
}

.magaza-cards {
	display: flex;
	gap: 30px;
	flex-wrap: wrap;
	justify-content: center;
	position: relative;
	z-index: 1;
}

.magaza-card {
	flex: 1;
	min-width: 260px;
	max-width: 320px;
	background: #fff;
	border-radius: 8px;
	overflow: visible;
	box-shadow: 0 4px 12px rgba(0,0,0,0.1);
	display: flex;
	flex-direction: column;
	transition: transform 0.3s ease, box-shadow 0.3s ease;
	position: relative;
}

.magaza-card:hover {
	transform: translateY(-5px);
	box-shadow: 0 8px 20px rgba(0,0,0,0.15);
}

.magaza-resim {
	width: 100%;
	aspect-ratio: 4 / 3;
	overflow: hidden;
	background: #f5f5f5;
	position: relative;
	z-index: 2;
	flex-shrink: 0;
}

.magaza-resim img {
	width: 100%;
	height: 100%;
	object-fit: fill;
	object-position: center;
	display: block;
}

.magaza-isim-bar {
	width: 100%;
	background: var(--antrasit);
	padding: 6px 15px;
	margin-bottom: 0;
	flex-shrink: 0;
}

.magaza-isim-bar h3 {
	margin: 0;
	color: #fff;
	font-size: 0.9rem;
	font-weight: 600;
	text-align: left;
	line-height: 1.2;
}

.magaza-harita {
	width: 100%;
	aspect-ratio: 4 / 3;
	background: #e0e0e0;
	position: relative;
	z-index: 1;
	flex-shrink: 0;
	display: block;
	overflow: hidden;
	margin-top: 0;
}

.magaza-harita iframe {
	width: 100%;
	height: 100%;
	border: none;
	display: block;
	position: relative;
	z-index: 1;
}

.magaza-bilgi {
	padding: 15px;
	background: #fff;
}

.magaza-bilgi h3 {
	margin: 0 0 8px 0;
	color: var(--antrasit);
	font-size: 1.2rem;
	font-weight: 600;
}

.magaza-bilgi p {
	margin: 0;
	color: #666;
	font-size: 12px;
	line-height: 1.3;
}

.magaza-bilgi a {
	color: var(--orange);
	text-decoration: none;
	transition: color 0.2s ease;
}

.magaza-bilgi a:hover {
	color: var(--antrasit);
	text-decoration: underline;
}

.magaza-bilgi .adres {
	font-weight: 500;
	color: var(--antrasit);
	margin-bottom: 2px;
	text-transform: uppercase;
}

.magaza-bilgi .telefon,
.magaza-bilgi .email {
	margin-top: 2px;
}

@media (max-width: 768px) {
	.magaza-cards {
		flex-direction: column;
		gap: 15px;
	}

	.magaza-card {
		min-width: 100%;
		max-width: 100%;
	}

	.magaza-resim {
		height: 180px;
	}

	.magaza-harita {
		height: 200px;
	}
}

.section-fullwidth {
	width: calc(100% - 10px);
	position: relative;
	isolation: isolate;
	background:
		radial-gradient(1200px 600px at 50% 30%, rgba(255, 255, 255, 0.06), transparent 60%),
		radial-gradient(800px 400px at 50% 70%, rgba(255, 255, 255, 0.04), transparent 65%),
		var(--bg);
	background-blend-mode: screen, screen, normal;
	color: var(--text-light);
	padding: 2px 0;
	margin: 5px 5px 5px 5px;
	overflow: hidden;
}

.section-fullwidth::before,
.section-fullwidth::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 0;
	pointer-events: none;
}

.section-fullwidth::before {
	background-image:
		radial-gradient(2px 2px at 15% 20%, var(--gold) 50%, transparent 51%),
		radial-gradient(1.5px 1.5px at 45% 35%, var(--gold-2) 50%, transparent 51%),
		radial-gradient(2px 2px at 75% 25%, var(--gold) 50%, transparent 51%),
		radial-gradient(1.5px 1.5px at 25% 65%, var(--gold-2) 50%, transparent 51%),
		radial-gradient(2px 2px at 55% 70%, var(--gold) 50%, transparent 51%),
		radial-gradient(1.5px 1.5px at 85% 80%, var(--gold-2) 50%, transparent 51%);
	background-repeat: repeat;
	background-size: 150px 150px, 180px 180px, 200px 200px, 160px 160px, 190px 190px, 210px 210px;
	opacity: 1;
	will-change: background-position;
}

.section-fullwidth::after {
	background-image:
		radial-gradient(1px 1px at 10% 12%, var(--gold-dim) 60%, transparent 61%),
		radial-gradient(0.8px 0.8px at 35% 18%, var(--gold-dim) 60%, transparent 61%),
		radial-gradient(1px 1px at 60% 10%, var(--gold-dim) 60%, transparent 61%),
		radial-gradient(0.8px 0.8px at 85% 20%, var(--gold-dim) 60%, transparent 61%),
		radial-gradient(1px 1px at 20% 55%, var(--gold-dim) 60%, transparent 61%),
		radial-gradient(0.8px 0.8px at 50% 58%, var(--gold-dim) 60%, transparent 61%),
		radial-gradient(1px 1px at 80% 62%, var(--gold-dim) 60%, transparent 61%),
		radial-gradient(0.8px 0.8px at 15% 88%, var(--gold-dim) 60%, transparent 61%),
		radial-gradient(1px 1px at 55% 90%, var(--gold-dim) 60%, transparent 61%),
		radial-gradient(0.8px 0.8px at 85% 92%, var(--gold-dim) 60%, transparent 61%);
	background-repeat: repeat;
	background-size: 50px 50px, 55px 55px, 60px 60px, 65px 65px, 70px 70px, 52px 52px, 57px 57px, 62px 62px, 67px 67px, 72px 72px;
	opacity: 1;
	will-change: background-position;
}

.section-fullwidth .container {
	position: relative;
	z-index: 1;
}

#urunler {
    padding-top: 0;
    padding-bottom: 0;
    min-height: auto;
}

#urunler h2 {
    color: var(--text-light);
    margin: 0;
    text-align: center;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    font-size: 1.2rem;
    font-weight: 300;
    line-height: 1.2;
}

/* Ürün Kategorileri Barları */
.product-categories {
    width: calc(100% - 10px);
    display: flex;
    flex-direction: row;
    margin: 0 5px;
    margin-bottom: 5px;
    gap: 5px;
}

#kataloglar {
	margin-top: 0;
}

/* Tüm kategori barları için yükseklik ayarları */
.product-categories .category-bar {
	height: 32px !important;
	min-height: 32px !important;
	position: relative;
	isolation: isolate;
	overflow: hidden;
}

.product-categories .category-bar::before,
.product-categories .category-bar::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 0;
	pointer-events: none;
}

.product-categories .category-bar::before {
	background-image:
		radial-gradient(2px 2px at 22% 70%, var(--gold) 50%, transparent 51%),
		radial-gradient(1.5px 1.5px at 55% 65%, var(--gold-2) 50%, transparent 51%),
		radial-gradient(2px 2px at 72% 45%, var(--gold) 50%, transparent 51%),
		radial-gradient(1.5px 1.5px at 15% 60%, var(--gold-2) 50%, transparent 51%),
		radial-gradient(2px 2px at 85% 30%, var(--gold) 50%, transparent 51%);
	background-repeat: repeat;
	background-size: 140px 32px, 160px 32px, 180px 32px, 150px 32px, 170px 32px;
	opacity: 1;
}

.product-categories .category-bar::after {
	background-image:
		radial-gradient(1px 1px at 12% 28%, var(--gold-dim) 60%, transparent 61%),
		radial-gradient(0.8px 0.8px at 28% 72%, var(--gold-dim) 60%, transparent 61%),
		radial-gradient(1px 1px at 42% 38%, var(--gold-dim) 60%, transparent 61%),
		radial-gradient(0.8px 0.8px at 58% 68%, var(--gold-dim) 60%, transparent 61%),
		radial-gradient(1px 1px at 75% 48%, var(--gold-dim) 60%, transparent 61%),
		radial-gradient(0.8px 0.8px at 92% 78%, var(--gold-dim) 60%, transparent 61%),
		radial-gradient(1px 1px at 18% 62%, var(--gold-dim) 60%, transparent 61%),
		radial-gradient(0.8px 0.8px at 48% 22%, var(--gold-dim) 60%, transparent 61%),
		radial-gradient(1px 1px at 68% 82%, var(--gold-dim) 60%, transparent 61%),
		radial-gradient(0.8px 0.8px at 88% 32%, var(--gold-dim) 60%, transparent 61%);
	background-repeat: repeat;
	background-size: 80px 32px, 100px 32px, 120px 32px, 140px 32px, 160px 32px, 90px 32px, 110px 32px, 130px 32px, 150px 32px, 170px 32px;
	opacity: 1;
}

/* İçerik yüksekliği barı doldursun */
.product-categories .category-bar .container {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
	position: relative;
	z-index: 1;
}

/* Yazıyı biraz büyüt */
.category-bar span {
	color: #f7d774;
	font-size: 1rem;
	font-weight: 500;
	letter-spacing: 1px;
	text-align: center;
	line-height: normal;
	text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}

.category-1,
.category-2,
.category-3,
.category-4,
.category-5,
.category-6 {
    background:
		radial-gradient(1200px 600px at 50% 30%, rgba(255, 255, 255, 0.06), transparent 60%),
		radial-gradient(800px 400px at 50% 70%, rgba(255, 255, 255, 0.04), transparent 65%),
		linear-gradient(180deg, #0e0e0e 0%, #1a1a1a 100%);
	background-blend-mode: screen, screen, normal;
    color: #f7d774;
}

/* Aplik Container */
.aplik-container {
    flex: 1;
    display: flex;
    flex-direction: column;
    border: 2px solid #000;
    border-radius: 0;
    overflow: hidden;
    align-self: flex-start;
    min-height: 47px;
}

.aplik-container .category-bar {
    width: 100%;
    margin: 0;
    flex-shrink: 0;
}

/* Aplik Ürün Card */
.aplik-product-card {
    width: 100%;
    margin: 0;
    margin-top: 0;
    display: flex;
    justify-content: flex-start;
    flex: 1;
}

.product-card-image {
    width: 100%;
    background: var(--text-light);
    box-shadow: none;
    border-radius: 0;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 0;
    height: 320px;
    box-sizing: border-box;
    padding: 0;
}

.product-card-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
}

/* Aplik, Avizeler, Lambader kartlarına padding yok - çerçeveyi bozmadan */
.product-categories .aplik-container:nth-of-type(-n+3) .product-card-image {
	padding: 0;
}

.section h2 {
    font-size: 3rem;
    font-weight: 600;
    margin-bottom: 30px;
    color: var(--primary-color);
    text-align: center;
}

.section p {
    font-size: 1.2rem;
    color: #666;
    text-align: center;
    max-width: 800px;
    margin: 0 auto;
}

/* Footer */
.site-footer {
    background: var(--primary-color);
    color: var(--text-light);
    padding: 40px 20px;
    text-align: center;
}

.site-footer p {
	font-size: 0.95rem;
}

/* WhatsApp Butonu */
.whatsapp-btn {
	position: fixed;
	bottom: 20px;
	right: 20px;
	background: #25D366;
	color: #fff;
	padding: 14px 20px;
	border-radius: 50px;
	display: flex;
	align-items: center;
	gap: 10px;
	text-decoration: none;
	font-size: 0.95rem;
	font-weight: 500;
	box-shadow: 0 4px 12px rgba(37, 211, 102, 0.4);
	z-index: 9999;
	transition: all 0.3s ease;
	border: none;
	cursor: pointer;
}

.whatsapp-btn:hover {
	background: #20BA5A;
	transform: translateY(-2px);
	box-shadow: 0 6px 16px rgba(37, 211, 102, 0.5);
}

.whatsapp-btn svg {
	flex-shrink: 0;
	width: 24px;
	height: 24px;
}

.whatsapp-btn span {
	white-space: nowrap;
}

@media (max-width: 768px) {
	.whatsapp-btn {
		bottom: 15px;
		right: 15px;
		padding: 12px 16px;
		font-size: 0.85rem;
	}

	.whatsapp-btn span {
		display: none;
	}

	.whatsapp-btn svg {
		width: 28px;
		height: 28px;
	}
}

/* Katalog Kapak */
.katalog-kapak-wrap {
	width: calc(100% - 10px);
	margin: 5px 5px 5px 5px;
	margin-top: 5px;
	margin-bottom: 5px;
	display: flex;
	justify-content: center;
	align-items: center;
	position: relative;
	isolation: isolate;
	background:
		radial-gradient(1200px 600px at 50% 30%, rgba(255, 255, 255, 0.06), transparent 60%),
		radial-gradient(800px 400px at 50% 70%, rgba(255, 255, 255, 0.04), transparent 65%),
		var(--bg);
	background-blend-mode: screen, screen, normal;
	border-radius: 8px;
	overflow: hidden;
	padding: 20px;
}

.katalog-kapak-wrap::before,
.katalog-kapak-wrap::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 0;
	pointer-events: none;
}

.katalog-kapak-wrap::before {
	background-image:
		radial-gradient(2px 2px at 10% 15%, var(--gold) 50%, transparent 51%),
		radial-gradient(1.5px 1.5px at 25% 25%, var(--gold-2) 50%, transparent 51%),
		radial-gradient(2px 2px at 40% 10%, var(--gold) 50%, transparent 51%),
		radial-gradient(1.5px 1.5px at 55% 30%, var(--gold-2) 50%, transparent 51%),
		radial-gradient(2px 2px at 70% 20%, var(--gold) 50%, transparent 51%),
		radial-gradient(1.5px 1.5px at 85% 40%, var(--gold-2) 50%, transparent 51%),
		radial-gradient(2px 2px at 15% 60%, var(--gold) 50%, transparent 51%),
		radial-gradient(1.5px 1.5px at 30% 70%, var(--gold-2) 50%, transparent 51%),
		radial-gradient(2px 2px at 50% 65%, var(--gold) 50%, transparent 51%),
		radial-gradient(1.5px 1.5px at 65% 75%, var(--gold-2) 50%, transparent 51%),
		radial-gradient(2px 2px at 80% 60%, var(--gold) 50%, transparent 51%),
		radial-gradient(1.5px 1.5px at 90% 80%, var(--gold-2) 50%, transparent 51%);
	background-repeat: repeat;
	background-size: 100px 100px, 120px 120px, 140px 140px, 160px 160px, 180px 180px, 200px 200px, 110px 110px, 130px 130px, 150px 150px, 170px 170px, 190px 190px, 210px 210px;
	opacity: 1;
}

.katalog-kapak-wrap::after {
	background-image:
		radial-gradient(1px 1px at 5% 10%, var(--gold-dim) 60%, transparent 61%),
		radial-gradient(0.8px 0.8px at 20% 5%, var(--gold-dim) 60%, transparent 61%),
		radial-gradient(1px 1px at 35% 15%, var(--gold-dim) 60%, transparent 61%),
		radial-gradient(0.8px 0.8px at 50% 8%, var(--gold-dim) 60%, transparent 61%),
		radial-gradient(1px 1px at 65% 12%, var(--gold-dim) 60%, transparent 61%),
		radial-gradient(0.8px 0.8px at 80% 18%, var(--gold-dim) 60%, transparent 61%),
		radial-gradient(1px 1px at 90% 22%, var(--gold-dim) 60%, transparent 61%),
		radial-gradient(0.8px 0.8px at 12% 50%, var(--gold-dim) 60%, transparent 61%),
		radial-gradient(1px 1px at 28% 55%, var(--gold-dim) 60%, transparent 61%),
		radial-gradient(0.8px 0.8px at 45% 52%, var(--gold-dim) 60%, transparent 61%),
		radial-gradient(1px 1px at 62% 58%, var(--gold-dim) 60%, transparent 61%),
		radial-gradient(0.8px 0.8px at 78% 62%, var(--gold-dim) 60%, transparent 61%),
		radial-gradient(1px 1px at 88% 68%, var(--gold-dim) 60%, transparent 61%),
		radial-gradient(0.8px 0.8px at 8% 85%, var(--gold-dim) 60%, transparent 61%),
		radial-gradient(1px 1px at 22% 88%, var(--gold-dim) 60%, transparent 61%),
		radial-gradient(0.8px 0.8px at 38% 82%, var(--gold-dim) 60%, transparent 61%),
		radial-gradient(1px 1px at 55% 90%, var(--gold-dim) 60%, transparent 61%),
		radial-gradient(0.8px 0.8px at 72% 85%, var(--gold-dim) 60%, transparent 61%),
		radial-gradient(1px 1px at 85% 92%, var(--gold-dim) 60%, transparent 61%);
	background-repeat: repeat;
	background-size: 40px 40px, 45px 45px, 50px 50px, 55px 55px, 60px 60px, 65px 65px, 70px 70px, 42px 42px, 47px 47px, 52px 52px, 57px 57px, 62px 62px, 67px 67px, 72px 72px, 43px 43px, 48px 48px, 53px 53px, 58px 58px, 63px 63px;
	opacity: 1;
}

.katalog-kapak {
	position: relative;
	z-index: 1;
	width: 25% !important;
	max-width: 25% !important;
	height: auto;
	border-radius: 6px;
	box-shadow: 0 4px 12px rgba(0,0,0,0.1);
	transition: transform 0.3s ease, box-shadow 0.3s ease;
	cursor: pointer;
	display: inline-block;
	padding: 14px;
	background: transparent;
}

.katalog-kapak img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: 4px;
	position: relative;
	z-index: 1;
	box-shadow: 0 2px 8px rgba(0,0,0,0.2);
}

.katalog-kapak:hover {
	transform: scale(1.02);
	box-shadow: 0 6px 20px rgba(0,0,0,0.15);
}

/* PDF Modal - Tam Ekran */
.pdf-modal {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: rgba(0, 0, 0, 0.95);
	z-index: 10000;
	display: flex;
	align-items: center;
	justify-content: center;
	backdrop-filter: blur(5px);
}

.pdf-modal[hidden] {
	display: none !important;
}

.pdf-modal-content {
	width: 100%;
	height: 100%;
	display: flex;
	flex-direction: column;
	background: #111;
	position: relative;
}

.pdf-modal-close {
	position: absolute;
	top: 15px;
	right: 15px;
	width: 45px;
	height: 45px;
	background: rgba(255, 255, 255, 0.15);
	border: 1px solid rgba(255, 255, 255, 0.2);
	border-radius: 50%;
	color: #fff;
	font-size: 28px;
	cursor: pointer;
	z-index: 10001;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: background 0.2s ease, transform 0.1s ease;
	line-height: 1;
	font-family: Arial, sans-serif;
}

.pdf-modal-close:hover {
	background: rgba(255, 255, 255, 0.25);
	transform: scale(1.05);
}

.pdf-modal .pdf-toolbar {
	border-bottom: 1px solid #2a2a2a;
	flex-shrink: 0;
}

.pdf-modal .pdf-canvas-wrap {
	flex: 1;
	overflow: auto;
	min-height: 0;
	max-height: calc(100vh - 70px);
	background: #1b1b1b;
	display: flex;
	align-items: flex-start;
	justify-content: center;
	-webkit-overflow-scrolling: touch;
}

#pdfFrame {
	width: 100%;
	height: 100%;
	min-height: 100%;
	border: none;
	-webkit-overflow-scrolling: touch;
}

/* PDF Viewer - Toolbar ve Canvas Stilleri */
.pdf-toolbar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	padding: 10px 12px;
	background: linear-gradient(180deg, #1a1a1a, #141414);
	border-bottom: 1px solid #2a2a2a;
	color: #e8e8e8;
}
.pdf-toolbar .left, .pdf-toolbar .right { display: flex; align-items: center; gap: 8px; }
.pdf-toolbar .btn {
	background: #222;
	color: #e8e8e8;
	border: 1px solid #2c2c2c;
	border-radius: 5px;
	padding: 6px 10px;
	cursor: pointer;
	font-size: 13px;
	transition: background .2s ease, transform .1s ease, border-color .2s ease;
}
.pdf-toolbar .btn:hover { background: #2a2a2a; border-color: #3a3a3a; }
.pdf-toolbar .btn:active { transform: scale(0.98); }
.pdf-toolbar .btn.primary { background: #3a3a3a; }
.page-info { font-variant-numeric: tabular-nums; min-width: 60px; text-align: center; }

/* Eski pdf-canvas-wrap stili kaldırıldı, modal içinde kullanılıyor */
#pdfCanvas { width: 100%; height: auto; max-width: 1200px; background: #fff; border-radius: 4px; }
.pdf-error { color: #ffb3b3; padding: 12px; text-align: center; }

@media (max-width: 768px) {
	.katalog-kapak-wrap {
		padding: 15px;
	}
	.pdf-modal {
		padding: 0;
	}
	.pdf-modal-content {
		padding: 0;
	}
	.pdf-modal .pdf-canvas-wrap {
		max-height: calc(100vh - 50px);
		overflow: auto;
		-webkit-overflow-scrolling: touch;
		padding: 0;
	}
	#pdfFrame {
		width: 100%;
		height: 100%;
		min-height: calc(100vh - 50px);
	}
	.pdf-modal-close {
		top: 10px;
		right: 10px;
		width: 38px;
		height: 38px;
		font-size: 24px;
		z-index: 10002;
	}
	.pdf-modal .pdf-toolbar {
		padding: 8px 10px;
		font-size: 12px;
	}
	.pdf-toolbar .btn { 
		padding: 5px 8px; 
		font-size: 11px; 
	}
}

/* Responsive Tasarım */
@media (max-width: 768px) {
    .header-left {
        gap: 15px;
    }

    .main-nav {
        display: none;
    }

    .nav-toggle {
        display: flex;
    }

    .main-nav.mobile-nav {
        position: fixed;
        top: 105px; /* 70px header + 35px top bar */
        left: -100%;
        width: 100%;
        background: var(--antrasit);
        backdrop-filter: blur(10px);
        transition: left 0.3s ease-in-out;
        box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
        display: block;
        z-index: 999;
        height: auto;
        margin: 0;
        padding: 0;
    }

    .main-nav.mobile-nav.active {
        left: 0;
    }

    .top-bar-left {
        gap: 10px;
    }

    .contact-link {
        font-size: 0.65rem;
    }

    .contact-link span:not(.icon) {
        display: none;
    }

    .top-bar-right {
        gap: 10px;
    }

    .dealer-login-btn {
        font-size: 0.65rem;
        padding: 3px 10px;
    }

    .search-input {
        width: 150px;
        font-size: 0.85rem;
        padding: 6px 12px;
    }

    .search-box {
        border-radius: 20px;
        height: 34px;
    }

    .search-btn {
        width: 30px;
        height: 30px;
    }

    .search-btn svg {
        width: 14px;
        height: 14px;
    }

    .main-nav.mobile-nav ul {
        flex-direction: column;
        padding: 30px 20px;
        gap: 20px;
        text-align: center;
        margin: 0;
    }

    .main-nav.mobile-nav a {
        font-size: 1.1rem;
        display: block;
        width: 100%;
    }

    .slide .caption {
        left: 30px;
        bottom: 150px;
        max-width: 90%;
    }

    .slide .caption p {
        font-size: 1.5rem;
    }

    .slider-controls {
        right: 30px;
        bottom: 30px;
    }

    .slider-controls button {
        width: 40px;
        height: 40px;
        font-size: 1.5rem;
    }

    .dots {
        bottom: 30px;
    }

    .section {
        padding: 60px 20px;
    }

    .section h2 {
        font-size: 2rem;
    }

    .section p {
        font-size: 1rem;
    }

	/* Kategori barları mobilde 3x2 grid */
	.product-categories {
		display: grid;
		grid-template-columns: repeat(3, 1fr);
		gap: 8px;
		margin-bottom: 16px;
	}

	.aplik-container {
		width: 100%;
	}

	.product-categories .category-bar {
		height: 32px !important;
		min-height: 32px !important;
	}

	.category-bar span {
		font-size: 0.85rem;
	}

	/* Kartlar mobilde sabit ve okunabilir yükseklik */
	.aplik-product-card {
		display: block;
	}

	.product-card-image {
		height: 200px;
	}
}

@media (max-width: 480px) {
    .logo img {
        height: 40px;
    }

    .logo span {
        font-size: 1rem;
    }

    .search-input {
        width: 120px;
        font-size: 0.8rem;
        padding: 5px 10px;
    }

    .search-box {
        height: 32px;
    }

    .search-btn {
        width: 28px;
        height: 28px;
    }

    .search-btn svg {
        width: 12px;
        height: 12px;
    }

    .slide .caption p {
        font-size: 1.2rem;
    }

    main {
        margin: 0;
        padding: 0;
        width: 100%;
        overflow-x: hidden;
    }
    
    #anasayfa {
        margin: 0;
        padding: 0;
        overflow-x: hidden;
    }
    
    .hero-slider {
        margin-top: 105px !important; /* 70px header + 35px top bar */
        margin-left: 0 !important;
        margin-right: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
        left: 0 !important;
        position: relative;
        height: 40vh !important;
    }

    .top-bar {
        height: 32px;
    }

    .contact-link {
        font-size: 0.6rem;
    }

    .lang-link {
        font-size: 0.6rem;
    }

    .dealer-login-btn {
        font-size: 0.6rem;
        padding: 2px 8px;
    }

    .header-inner {
        min-height: 70px;
        padding: 12px 20px;
    }

	/* Küçük telefonlarda da 3 sütun korunur */
	.product-categories {
		display: grid;
		grid-template-columns: repeat(3, 1fr);
		gap: 6px;
		margin-bottom: 14px;
	}

	.product-categories .category-bar {
		height: 30px !important;
		min-height: 30px !important;
	}

	.category-bar span {
		font-size: 0.8rem;
	}

	.product-card-image {
		height: 160px;
	}
}