/* ============================================================
   OTOPLAKAM - Ana Stil Dosyasi
   Indigo (#383080) + Altin marka renkleri
   ============================================================ */

:root {
    --brand-black: #1e1a4d;
    --brand-dark: #383080;
    --brand-gray: #4a4299;
    --brand-light: #f8f8f8;
    --brand-orange: #d9a441;
    --brand-orange-dark: #b8862c;
    --brand-orange-light: #f0c46b;
    --text-dark: #22203f;
    --text-muted: #6c757d;
    --border-light: #e5e5e5;
    --shadow-sm: 0 1px 3px rgba(0,0,0,0.08);
    --shadow-md: 0 4px 12px rgba(0,0,0,0.1);
    --shadow-lg: 0 10px 30px rgba(0,0,0,0.15);
}

/* ============ Global ============ */
body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    color: var(--text-dark);
    background: #fff;
    line-height: 1.6;
}

a { color: var(--brand-black); text-decoration: none; transition: color .2s; }
a:hover { color: var(--brand-orange); }

.btn-brand {
    background: var(--brand-orange);
    border-color: var(--brand-orange);
    color: #fff;
    font-weight: 600;
    padding: .625rem 1.5rem;
    border-radius: 6px;
    transition: all .2s;
}
.btn-brand:hover, .btn-brand:focus {
    background: var(--brand-orange-dark);
    border-color: var(--brand-orange-dark);
    color: #fff;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(217,164,65,0.35);
}

.btn-dark-brand {
    background: var(--brand-black);
    border-color: var(--brand-black);
    color: #fff;
    font-weight: 600;
}
.btn-dark-brand:hover { background: var(--brand-orange); border-color: var(--brand-orange); color: #fff; }

.text-brand { color: var(--brand-orange) !important; }
.bg-brand { background: var(--brand-orange) !important; color: #fff; }
.bg-brand-dark { background: var(--brand-black) !important; color: #fff; }

/* ============ Top Bar ============ */
.topbar {
    background: var(--brand-black);
    color: #fff;
    padding: .5rem 0;
    font-size: .85rem;
}
.topbar a { color: #fff; }
.topbar a:hover { color: var(--brand-orange); }

/* ============ Header ============ */
.site-header {
    background: #fff;
    box-shadow: var(--shadow-sm);
    padding: 1rem 0;
    position: sticky;
    top: 0;
    z-index: 1000;
}
.site-header .logo img { max-height: 60px; width: auto; }

.main-nav .nav-link {
    color: var(--brand-black);
    font-weight: 500;
    padding: .5rem 1rem;
    position: relative;
}
.main-nav .nav-link:hover, .main-nav .nav-link.active {
    color: var(--brand-orange);
}
.main-nav .nav-link.active::after {
    content: '';
    position: absolute;
    bottom: -4px;
    left: 1rem;
    right: 1rem;
    height: 2px;
    background: var(--brand-orange);
}

/* ============ Hero ============ */
.hero {
    background: linear-gradient(135deg, var(--brand-black) 0%, var(--brand-dark) 100%);
    color: #fff;
    padding: 5rem 0;
    position: relative;
    overflow: hidden;
}
.hero::before {
    content: '';
    position: absolute;
    top: -50%;
    right: -20%;
    width: 60%;
    height: 200%;
    background: radial-gradient(ellipse, rgba(217,164,65,0.18) 0%, transparent 70%);
    transform: rotate(15deg);
}
.hero h1 { font-size: clamp(2rem, 5vw, 3.5rem); font-weight: 800; margin-bottom: 1.5rem; }
.hero h1 span { color: var(--brand-orange); }
.hero p { font-size: 1.15rem; opacity: .9; margin-bottom: 2rem; }
.hero .btn-brand { padding: .875rem 2rem; font-size: 1.05rem; }

/* ============ Section ============ */
.section { padding: 4rem 0; }
.section-title { text-align: center; margin-bottom: 3rem; }
.section-title h2 { font-weight: 800; font-size: 2rem; margin-bottom: .5rem; }
.section-title .accent { color: var(--brand-orange); }
.section-title p { color: var(--text-muted); max-width: 600px; margin: 0 auto; }
.section-title::after {
    content: '';
    display: block;
    width: 60px;
    height: 3px;
    background: var(--brand-orange);
    margin: 1rem auto 0;
}

/* ============ Kategori Kartlari ============ */
.category-card {
    background: #fff;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: var(--shadow-sm);
    transition: all .3s;
    height: 100%;
    border: 1px solid var(--border-light);
}
.category-card:hover {
    box-shadow: var(--shadow-lg);
    transform: translateY(-4px);
    border-color: var(--brand-orange);
}
.category-card .img-wrap {
    aspect-ratio: 4/3;
    background: linear-gradient(135deg, #f5f5f5 0%, #e8e8e8 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}
.category-card .img-wrap img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .5s;
}
.category-card:hover .img-wrap img { transform: scale(1.08); }
.category-card .icon {
    font-size: 3.5rem;
    color: var(--brand-orange);
}
.category-card .body { padding: 1.5rem; text-align: center; }
.category-card h3 { font-size: 1.15rem; font-weight: 700; margin-bottom: .5rem; }
.category-card .count { color: var(--text-muted); font-size: .875rem; }

/* ============ Urun Kartlari ============ */
.product-card {
    background: #fff;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: var(--shadow-sm);
    transition: all .3s;
    height: 100%;
    border: 1px solid var(--border-light);
    display: flex;
    flex-direction: column;
}
.product-card:hover {
    box-shadow: var(--shadow-md);
    transform: translateY(-2px);
    border-color: var(--brand-orange);
}
.product-card .img-wrap {
    aspect-ratio: 1;
    background: #fafafa;
    overflow: hidden;
    position: relative;
}
.product-card .img-wrap img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .4s;
}
.product-card:hover .img-wrap img { transform: scale(1.06); }
.product-card .badge-featured {
    position: absolute;
    top: 10px;
    left: 10px;
    background: var(--brand-orange);
    color: #fff;
    padding: .25rem .625rem;
    border-radius: 4px;
    font-size: .75rem;
    font-weight: 600;
}
.product-card .body {
    padding: 1rem 1.25rem 1.25rem;
    flex: 1;
    display: flex;
    flex-direction: column;
}
.product-card .cat { color: var(--text-muted); font-size: .75rem; text-transform: uppercase; letter-spacing: .5px; margin-bottom: .25rem; }
.product-card h4 { font-size: 1rem; font-weight: 600; margin-bottom: .5rem; line-height: 1.4; }
.product-card h4 a { color: var(--brand-black); }
.product-card .price {
    color: var(--brand-orange);
    font-weight: 700;
    font-size: 1.15rem;
    margin-top: auto;
}
.product-card .price .old { color: var(--text-muted); text-decoration: line-through; font-size: .85rem; font-weight: 400; margin-right: .5rem; }
.product-card .btn-order {
    margin-top: 1rem;
    background: var(--brand-black);
    color: #fff;
    border: none;
    padding: .5rem 1rem;
    border-radius: 6px;
    font-weight: 600;
    font-size: .875rem;
    display: block;
    width: 100%;
    text-align: center;
    transition: all .2s;
}
.product-card .btn-order:hover { background: var(--brand-orange); color: #fff; }

/* ============ Ozellikler serit ============ */
.features-strip {
    background: var(--brand-light);
    padding: 2.5rem 0;
    border-top: 1px solid var(--border-light);
    border-bottom: 1px solid var(--border-light);
}
.feature-item { text-align: center; padding: 1rem; }
.feature-item .icon {
    width: 56px;
    height: 56px;
    background: var(--brand-orange);
    color: #fff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    margin: 0 auto 1rem;
}
.feature-item h4 { font-size: 1rem; font-weight: 700; margin-bottom: .25rem; }
.feature-item p { font-size: .875rem; color: var(--text-muted); margin: 0; }

/* ============ Breadcrumb ============ */
.breadcrumb-wrap {
    background: #f8f8f8;
    padding: 1rem 0;
    border-bottom: 1px solid var(--border-light);
}
.breadcrumb { margin: 0; background: none; padding: 0; font-size: .875rem; }
.breadcrumb-item + .breadcrumb-item::before { color: var(--brand-orange); }
.breadcrumb-item a { color: var(--text-muted); }
.breadcrumb-item.active { color: var(--brand-black); font-weight: 600; }

/* ============ Urun Detay ============ */
.product-gallery .main-image {
    aspect-ratio: 1;
    background: #fafafa;
    border-radius: 12px;
    overflow: hidden;
    margin-bottom: 1rem;
}
.product-gallery .main-image img { width: 100%; height: 100%; object-fit: cover; }
.product-gallery .thumbs {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: .5rem;
}
.product-gallery .thumb {
    aspect-ratio: 1;
    background: #fafafa;
    border-radius: 8px;
    overflow: hidden;
    cursor: pointer;
    border: 2px solid transparent;
    transition: border-color .2s;
}
.product-gallery .thumb.active, .product-gallery .thumb:hover {
    border-color: var(--brand-orange);
}
.product-gallery .thumb img { width: 100%; height: 100%; object-fit: cover; }

.product-info h1 { font-size: 1.75rem; font-weight: 800; margin-bottom: .5rem; }
.product-info .sku { color: var(--text-muted); font-size: .875rem; margin-bottom: 1rem; }
.product-info .price-block {
    background: var(--brand-light);
    padding: 1.25rem 1.5rem;
    border-radius: 10px;
    margin: 1.25rem 0;
    border-left: 4px solid var(--brand-orange);
}
.product-info .price-block .price { color: var(--brand-orange); font-size: 2rem; font-weight: 800; }
.product-info .price-block .old { color: var(--text-muted); text-decoration: line-through; font-size: 1.1rem; margin-right: .75rem; }
.product-info .desc { color: #444; margin-bottom: 1.5rem; }
.product-info .btn-cta {
    background: var(--brand-orange);
    color: #fff;
    padding: .875rem 2rem;
    border-radius: 8px;
    font-weight: 700;
    display: inline-block;
    margin-right: .5rem;
    transition: all .2s;
}
.product-info .btn-cta:hover { background: var(--brand-orange-dark); color: #fff; transform: translateY(-1px); }
.product-info .btn-whatsapp {
    background: #25D366;
    color: #fff;
    padding: .875rem 2rem;
    border-radius: 8px;
    font-weight: 700;
    display: inline-block;
    transition: all .2s;
}
.product-info .btn-whatsapp:hover { background: #1da851; color: #fff; }

/* ============ Footer ============ */
.site-footer {
    background: var(--brand-black);
    color: #ccc;
    padding: 3rem 0 0;
}
.site-footer h5 { color: #fff; font-weight: 700; margin-bottom: 1.25rem; font-size: 1rem; text-transform: uppercase; letter-spacing: 1px; }
.site-footer h5::after { content: ''; display: block; width: 40px; height: 2px; background: var(--brand-orange); margin-top: .5rem; }
.site-footer a { color: #ccc; display: block; padding: .25rem 0; }
.site-footer a:hover { color: var(--brand-orange); padding-left: 4px; }
.site-footer .footer-logo img { max-height: 70px; margin-bottom: 1rem; filter: brightness(1.1); }
.site-footer .contact-info li { margin-bottom: .5rem; display: flex; align-items: start; gap: .5rem; }
.site-footer .contact-info i { color: var(--brand-orange); margin-top: .25rem; }
.site-footer .social a {
    display: inline-flex;
    width: 40px;
    height: 40px;
    background: rgba(255,255,255,0.08);
    border-radius: 8px;
    align-items: center;
    justify-content: center;
    margin-right: .5rem;
    padding: 0;
    font-size: 1.15rem;
    transition: all .2s;
}
.site-footer .social a:hover {
    background: var(--brand-orange);
    color: #fff;
    padding: 0;
}
.footer-bottom {
    background: #000;
    padding: 1.25rem 0;
    margin-top: 3rem;
    color: #888;
    font-size: .875rem;
    text-align: center;
}
.footer-bottom .tagline { color: var(--brand-orange); font-weight: 700; letter-spacing: 2px; }

/* ============ Forms ============ */
.form-label { font-weight: 600; font-size: .9rem; }
.form-control, .form-select {
    padding: .625rem .875rem;
    border: 1px solid var(--border-light);
    border-radius: 6px;
}
.form-control:focus, .form-select:focus {
    border-color: var(--brand-orange);
    box-shadow: 0 0 0 .2rem rgba(217,164,65,0.18);
}

/* ============ Alerts ============ */
.alert-brand {
    background: rgba(217,164,65,0.1);
    border: 1px solid var(--brand-orange);
    color: var(--brand-orange-dark);
}

/* ============ Sidebar (kategori sayfasi) ============ */
.sidebar-box {
    background: #fff;
    border: 1px solid var(--border-light);
    border-radius: 10px;
    padding: 1.5rem;
    margin-bottom: 1.5rem;
}
.sidebar-box h4 { font-size: 1rem; font-weight: 700; margin-bottom: 1rem; text-transform: uppercase; letter-spacing: 1px; }
.sidebar-box h4::after { content: ''; display: block; width: 30px; height: 2px; background: var(--brand-orange); margin-top: .5rem; }
.sidebar-box ul { list-style: none; padding: 0; margin: 0; }
.sidebar-box li a {
    display: flex;
    justify-content: space-between;
    padding: .5rem 0;
    border-bottom: 1px dashed #eee;
    color: #555;
}
.sidebar-box li a:hover, .sidebar-box li a.active {
    color: var(--brand-orange);
    padding-left: 4px;
}
.sidebar-box li:last-child a { border: none; }

/* ============ Pagination ============ */
.pagination .page-link {
    color: var(--brand-black);
    border-color: var(--border-light);
}
.pagination .page-item.active .page-link {
    background: var(--brand-orange);
    border-color: var(--brand-orange);
    color: #fff;
}
.pagination .page-link:hover { color: var(--brand-orange); }

/* ============ HERO SLIDER ============ */
.hero-slider .carousel-item {
    min-height: 550px;
    background: linear-gradient(135deg, var(--brand-black) 0%, var(--brand-dark) 100%);
    background-size: cover;
    background-position: center;
    position: relative;
}
/* Bootstrap'in gorunurluk mantigini bozmadan dikey ortalama.
   (Dogrudan .carousel-item'a display:flex verilirse Bootstrap'in
   display:none kurali ezilir ve TUM slaytlar ust uste biner.) */
.hero-slider .carousel-item.active,
.hero-slider .carousel-item-next,
.hero-slider .carousel-item-prev {
    display: flex;
    align-items: center;
}
.hero-overlay {
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background: linear-gradient(90deg, rgba(0,0,0,0.75) 0%, rgba(0,0,0,0.4) 60%, rgba(0,0,0,0.2) 100%);
    z-index: 1;
}
.hero-slider .container { position: relative; z-index: 2; }
.hero-content { max-width: 700px; padding: 3rem 0; animation: fadeInUp .8s ease-out; }
.hero-title { font-size: clamp(2rem, 4.5vw, 3.5rem); font-weight: 800; margin-bottom: 1.25rem; line-height: 1.15; text-shadow: 0 2px 20px rgba(0,0,0,0.3); }
.hero-subtitle { font-size: clamp(1rem, 1.75vw, 1.35rem); opacity: .95; margin-bottom: 2rem; text-shadow: 0 1px 10px rgba(0,0,0,0.3); }
.hero-cta { padding: .875rem 2.25rem; font-size: 1.1rem; box-shadow: 0 8px 30px rgba(217,164,65,0.4); }
.hero-slider .carousel-indicators button { width: 40px; height: 4px; border-radius: 2px; background: rgba(255,255,255,0.5); border: none; }
.hero-slider .carousel-indicators button.active { background: var(--brand-orange); }
.hero-slider .carousel-control-prev, .hero-slider .carousel-control-next { width: 5%; opacity: .8; }

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

/* ============ Trust Band ============ */
.trust-band {
    background: linear-gradient(135deg, #fff8ec 0%, #ffffff 100%);
    padding: 2rem 0;
    border-bottom: 1px solid var(--border-light);
}
.trust-item {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: .5rem;
}
.trust-icon {
    width: 56px;
    height: 56px;
    background: var(--brand-orange);
    color: #fff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.4rem;
    flex-shrink: 0;
    box-shadow: 0 4px 12px rgba(217,164,65,0.3);
}
.trust-item h5 { font-size: 1rem; font-weight: 700; margin: 0 0 .1rem; }
.trust-item p { margin: 0; color: var(--text-muted); font-size: .85rem; }

/* ============ Category Card Modern ============ */
.category-card-modern {
    display: block;
    background: #fff;
    border-radius: 16px;
    padding: 2rem 1rem;
    text-align: center;
    text-decoration: none;
    color: var(--brand-black);
    box-shadow: 0 4px 20px rgba(0,0,0,0.05);
    border: 2px solid transparent;
    transition: all .3s;
    position: relative;
    overflow: hidden;
    height: 100%;
}
.category-card-modern::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 4px;
    background: linear-gradient(90deg, var(--brand-orange) 0%, #ffb84d 100%);
    transform: scaleX(0);
    transition: transform .3s;
}
.category-card-modern:hover {
    transform: translateY(-6px);
    box-shadow: 0 15px 40px rgba(217,164,65,0.2);
    border-color: rgba(217,164,65,0.3);
    color: var(--brand-black);
}
.category-card-modern:hover::before { transform: scaleX(1); }
.cat-icon-wrap {
    width: 70px;
    height: 70px;
    margin: 0 auto 1rem;
    background: linear-gradient(135deg, #fff8ec 0%, #ffe4b8 100%);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.75rem;
    color: var(--brand-orange);
    transition: transform .3s;
}
.category-card-modern:hover .cat-icon-wrap {
    transform: rotate(10deg) scale(1.1);
    background: linear-gradient(135deg, var(--brand-orange) 0%, #ffb84d 100%);
    color: #fff;
}
.cat-icon-wrap img { width: 40px; height: 40px; object-fit: contain; }
.category-card-modern h3 { font-size: 1rem; font-weight: 700; margin-bottom: .25rem; }
.category-card-modern .count { color: var(--text-muted); font-size: .8rem; margin-bottom: .5rem; }
.category-card-modern .cat-arrow {
    color: var(--brand-orange);
    font-size: .9rem;
    opacity: 0;
    transform: translateX(-8px);
    transition: all .3s;
}
.category-card-modern:hover .cat-arrow {
    opacity: 1;
    transform: translateX(0);
}

/* ============ Section Alt (light bg) ============ */
.section-alt { background: linear-gradient(180deg, #fafafa 0%, #f5f5f5 100%); }

/* ============ Why Section ============ */
.why-card {
    background: #fff;
    padding: 2rem 1.5rem;
    border-radius: 12px;
    text-align: center;
    height: 100%;
    box-shadow: 0 2px 10px rgba(0,0,0,0.05);
    transition: all .3s;
    border-bottom: 4px solid transparent;
}
.why-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 40px rgba(0,0,0,0.1);
    border-bottom-color: var(--brand-orange);
}
.why-icon {
    width: 80px;
    height: 80px;
    margin: 0 auto 1.25rem;
    background: linear-gradient(135deg, var(--brand-black) 0%, var(--brand-dark) 100%);
    color: var(--brand-orange);
    border-radius: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2rem;
    transform: rotate(-5deg);
    transition: transform .3s;
}
.why-card:hover .why-icon { transform: rotate(5deg) scale(1.1); }
.why-card h4 { font-weight: 700; margin-bottom: .75rem; }
.why-card p { color: var(--text-muted); margin: 0; }

/* ============ Promo Banner ============ */
.promo-banner { padding: 3rem 0; }
.promo-content {
    background: linear-gradient(135deg, var(--brand-black) 0%, var(--brand-dark) 100%);
    color: #fff;
    padding: 3rem;
    border-radius: 20px;
    position: relative;
    overflow: hidden;
}
.promo-content::before {
    content: '';
    position: absolute;
    top: -50%;
    right: -10%;
    width: 60%;
    height: 200%;
    background: radial-gradient(ellipse, rgba(217,164,65,0.2) 0%, transparent 60%);
    transform: rotate(15deg);
}
.promo-content > * { position: relative; z-index: 1; }
.promo-content h2 { font-weight: 800; font-size: 2rem; margin-bottom: .5rem; }
.promo-content p { font-size: 1.1rem; opacity: .9; margin: 0; }

/* ============ Stats Section ============ */
.stats-section {
    background: linear-gradient(135deg, var(--brand-orange) 0%, #d48d15 100%);
    color: #fff;
    padding: 4rem 0;
    position: relative;
    overflow: hidden;
}
.stats-section::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='60' viewBox='0 0 60 60'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.05'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
    opacity: .5;
}
.stat-item { position: relative; z-index: 1; }
.stat-icon {
    width: 60px;
    height: 60px;
    margin: 0 auto 1rem;
    background: rgba(255,255,255,0.15);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    backdrop-filter: blur(4px);
}
.stat-value { font-size: 2.75rem; font-weight: 800; margin-bottom: .25rem; text-shadow: 0 2px 8px rgba(0,0,0,0.15); }
.stat-label { font-size: .95rem; opacity: .95; text-transform: uppercase; letter-spacing: 1px; }

/* ============ Testimonials ============ */
.testimonial-card {
    background: #fff;
    padding: 2rem;
    border-radius: 12px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.06);
    height: 100%;
    position: relative;
    transition: all .3s;
    border-top: 4px solid var(--brand-orange);
}
.testimonial-card:hover { transform: translateY(-4px); box-shadow: 0 15px 40px rgba(0,0,0,0.1); }
.testimonial-card .quote-icon {
    position: absolute;
    top: 1rem;
    right: 1.5rem;
    font-size: 2.5rem;
    color: var(--brand-orange);
    opacity: .15;
}
.testimonial-card .rating {
    color: #ffc107;
    margin-bottom: 1rem;
    font-size: .95rem;
}
.testimonial-card .content {
    font-style: italic;
    color: #444;
    margin-bottom: 1.5rem;
    line-height: 1.7;
}
.testimonial-card .author {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding-top: 1rem;
    border-top: 1px solid #eee;
}
.testimonial-card .avatar, .testimonial-card .avatar-placeholder {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    object-fit: cover;
}
.testimonial-card .avatar-placeholder {
    background: linear-gradient(135deg, var(--brand-orange) 0%, #d48d15 100%);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 1.15rem;
}
.testimonial-card .name { font-weight: 700; color: var(--brand-black); }
.testimonial-card .company { color: var(--text-muted); font-size: .85rem; }

/* ============ Blog Card (yeni) ============ */
.blog-card {
    background: #fff;
    border-radius: 12px;
    overflow: hidden;
    height: 100%;
    box-shadow: 0 4px 20px rgba(0,0,0,0.06);
    transition: all .3s;
    display: flex;
    flex-direction: column;
}
.blog-card:hover { transform: translateY(-4px); box-shadow: 0 15px 40px rgba(0,0,0,0.1); }
.blog-card .blog-img {
    display: block;
    aspect-ratio: 16/10;
    background: #fafafa;
    position: relative;
    overflow: hidden;
}
.blog-card .blog-img img {
    width: 100%; height: 100%;
    object-fit: cover;
    transition: transform .5s;
}
.blog-card:hover .blog-img img { transform: scale(1.08); }
.blog-card .blog-img-placeholder {
    width: 100%; height: 100%;
    display: flex; align-items: center; justify-content: center;
    background: linear-gradient(135deg, var(--brand-orange) 0%, #ffb84d 100%);
    color: #fff;
    font-size: 3.5rem;
    opacity: .5;
}
.blog-card .blog-date {
    position: absolute;
    top: 12px;
    left: 12px;
    background: var(--brand-orange);
    color: #fff;
    padding: .4rem .75rem;
    border-radius: 6px;
    font-size: .8rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
}
.blog-card .blog-body {
    padding: 1.5rem;
    flex: 1;
    display: flex;
    flex-direction: column;
}
.blog-card h3 { font-size: 1.15rem; font-weight: 700; margin-bottom: .5rem; line-height: 1.4; }
.blog-card h3 a { color: var(--brand-black); }
.blog-card h3 a:hover { color: var(--brand-orange); }
.blog-card p { color: var(--text-muted); font-size: .9rem; margin-bottom: 1rem; flex: 1; }
.blog-card .read-more {
    color: var(--brand-orange);
    font-weight: 700;
    font-size: .875rem;
}

/* ============ CTA Band ============ */
.cta-band {
    background: linear-gradient(135deg, var(--brand-black) 0%, var(--brand-dark) 100%);
    color: #fff;
    padding: 3rem 0;
    position: relative;
    overflow: hidden;
}
.cta-band::before {
    content: '';
    position: absolute;
    top: -100%;
    right: -20%;
    width: 60%;
    height: 300%;
    background: radial-gradient(ellipse, rgba(217,164,65,0.2) 0%, transparent 60%);
    transform: rotate(-15deg);
}
.cta-band > .container { position: relative; z-index: 1; }
.cta-band h2 { font-weight: 800; font-size: 2rem; }

/* ============ Kademeli Fiyat Secici ============ */
.tier-selector {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: .5rem;
}
.tier-option {
    display: block;
    cursor: pointer;
    border: 2px solid var(--border-light);
    border-radius: 8px;
    padding: .75rem;
    text-align: center;
    background: #fff;
    transition: all .2s;
    position: relative;
    margin: 0;
}
.tier-option input[type="radio"] {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}
.tier-option:hover {
    border-color: var(--brand-orange);
    transform: translateY(-1px);
}
.tier-option.active {
    border-color: var(--brand-orange);
    background: rgba(217,164,65,0.06);
    box-shadow: 0 4px 12px rgba(217,164,65,0.18);
}
.tier-option .tier-qty {
    font-weight: 700;
    color: var(--brand-black);
    font-size: 1.05rem;
}
.tier-option.active .tier-qty { color: var(--brand-orange); }
.tier-option .tier-total {
    font-weight: 700;
    color: var(--brand-orange);
    font-size: 1.15rem;
    margin-top: .25rem;
}
.tier-option .tier-unit {
    font-size: .75rem;
    color: var(--text-muted);
    margin-top: .25rem;
}
.tier-option .tier-label {
    margin-top: .5rem;
    background: var(--brand-orange);
    color: #fff;
    font-size: .7rem;
    padding: .15rem .5rem;
    border-radius: 4px;
    display: inline-block;
    font-weight: 600;
}

/* ============ PLAKA TASARIM ARACI (CUSTOMIZER) ============ */
.customizer {
    background: #fff;
    border-radius: 16px;
    padding: 2rem;
    box-shadow: 0 4px 30px rgba(0,0,0,0.08);
    border: 2px solid var(--brand-orange);
    position: relative;
}
.customizer::before {
    content: 'TASARIM ARACI';
    position: absolute;
    top: -12px;
    left: 20px;
    background: var(--brand-orange);
    color: #fff;
    padding: .25rem .75rem;
    border-radius: 6px;
    font-size: .7rem;
    font-weight: 700;
    letter-spacing: 2px;
}
.customizer-header { margin-bottom: 1.5rem; padding-bottom: 1rem; border-bottom: 1px solid #eee; }
.customizer-header h3 { font-weight: 800; color: var(--brand-black); font-size: 1.5rem; }

/* Plaka önizleme */
.customizer-preview {
    background: linear-gradient(180deg, #f4f4f4 0%, #e8e8e8 100%);
    padding: 3rem 1rem;
    border-radius: 12px;
    margin-bottom: 2rem;
    display: flex;
    justify-content: center;
    align-items: center;
    box-shadow: inset 0 2px 10px rgba(0,0,0,0.1);
}
.plate-frame {
    width: 100%;
    max-width: 1200px;
    /* Fiziksel plakalık: 532.975mm × 147.256mm ≈ 3.62:1 fakat mevcut layout
       4.5:1 üzerine kurulu — SVG'ler mask-size 100% 100% ile hafifçe esner. */
    aspect-ratio: 4.5 / 1;
    /* SVG boşluklarından (LED çubuk aralarından) görünen ışık rengi.
       Zemin siyah SVG mask'ı bunun üzerine biner. */
    background: #ffffff;
    border-radius: 14px;
    position: relative;
    box-shadow: 0 14px 40px rgba(0,0,0,0.5), 0 3px 8px rgba(0,0,0,0.25);
    transition: all .3s;
    overflow: hidden;
    margin: 0 auto;
}

/* === ZEMİN katmanı (üst %84.7) — kenardaki LED çubuklar + dış çerçeve.
       Rengi sabit; SVG mask ile yalnız siyah alanlar boyanır, boşluklar zeminden geçer. === */
.plate-frame::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    height: 84.7%;
    background-color: var(--plate-bg, #0d0d0d);
    -webkit-mask-image: url('/assets/img/plate-zemin.svg');
            mask-image: url('/assets/img/plate-zemin.svg');
    -webkit-mask-size: 100% 100%;
            mask-size: 100% 100%;
    -webkit-mask-repeat: no-repeat;
            mask-repeat: no-repeat;
    -webkit-mask-position: center;
            mask-position: center;
    filter: var(--plate-filter, none);
    pointer-events: none;
    z-index: 1;
}

/* === ÇITA katmanı (alt %15.3) — yazının olduğu yatay şerit.
       Rengi kullanıcı tarafından seçilir (--plate-strip). === */
.plate-frame::before {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 15.3%;
    background-color: var(--plate-strip, #2b2a29);
    -webkit-mask-image: url('/assets/img/plate-cita.svg');
            mask-image: url('/assets/img/plate-cita.svg');
    -webkit-mask-size: 100% 100%;
            mask-size: 100% 100%;
    -webkit-mask-repeat: no-repeat;
            mask-repeat: no-repeat;
    -webkit-mask-position: center;
            mask-position: center;
    filter: var(--plate-strip-filter, none);
    pointer-events: none;
    z-index: 2;
}

/* Kullanıcı metni: alttaki ÇITA (yazı bandı) içinde dikey ortalı */
.plate-text {
    position: absolute;
    left: 8%;
    right: 8%;
    bottom: 0;
    height: 15.3%;                       /* çıta yüksekliği ile eşit */
    display: flex;
    align-items: center;                 /* dikey ortalama */
    justify-content: center;             /* yatay ortalama (JS ile değişir) */
    z-index: 3;
    color: #fff;
    font-size: clamp(0.85rem, 2.4vw, 1.5rem);
    font-weight: 800;
    letter-spacing: 2px;
    text-align: center;
    line-height: 1;
    transition: all .3s;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    pointer-events: none;
    text-transform: uppercase;
}
.plate-text > * { max-width: 100%; overflow: hidden; text-overflow: ellipsis; }

/* Sol/sağ emoji - MERKEZİ çıta ile LED sınırında (%84 civarı).
   Emoji dikey olarak yarı çıtada / yarı LED alanında durur ve font-size ile büyür. */
.plate-ornament {
    position: absolute;
    top: 84%;                              /* çıta üst kenarına yakın; emoji merkezi burada */
    z-index: 3;
    color: #fff;
    font-size: clamp(2rem, 6vw, 4rem);
    line-height: 1;
    transition: all .3s;
    pointer-events: none;
}
.plate-ornament.left  { left: 14%;  right: auto; transform: translate(-50%, -50%); }
.plate-ornament.right { left: auto; right: 14%;  transform: translate( 50%, -50%); }
.plate-ornament img {
    width: 3.75rem;
    height: auto;
    max-width: 100%;
    display: block;
    object-fit: contain;
    filter: brightness(0) invert(1);
    transition: filter .3s;
}

/* ============ Kademe seçici (üstte) ============ */
.tier-selector-top {
    background: #f8f8f8;
    padding: 1rem;
    border-radius: 12px;
    border: 1px solid var(--border-light);
}
.tier-selector-label {
    font-weight: 700;
    color: var(--brand-black);
    margin-bottom: .5rem;
    font-size: .95rem;
    text-transform: uppercase;
    letter-spacing: 1px;
}
.tier-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
}
.tier-pill {
    flex: 1 1 130px;
    background: #fff;
    border: 2px solid var(--border-light);
    border-radius: 10px;
    padding: .75rem 1rem;
    cursor: pointer;
    transition: all .2s;
    min-width: 130px;
    text-align: center;
}
.tier-pill:hover { border-color: var(--brand-orange); transform: translateY(-2px); }
.tier-pill.active {
    border-color: var(--brand-orange);
    background: rgba(217,164,65,0.08);
    box-shadow: 0 4px 12px rgba(217,164,65,0.2);
}
.tier-pill-qty { font-weight: 700; color: var(--brand-black); font-size: .95rem; }
.tier-pill.active .tier-pill-qty { color: var(--brand-orange); }
.tier-pill-price { color: var(--brand-orange); font-weight: 800; font-size: 1.15rem; margin-top: .25rem; }

/* ============ Toplam fiyat kutusu ============ */
.total-price-box {
    background: linear-gradient(135deg, var(--brand-black) 0%, var(--brand-dark) 100%);
    color: #fff;
    padding: 1.25rem 1.75rem;
    border-radius: 12px;
    margin-bottom: 1.5rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
}
.total-price-label {
    font-size: .8rem;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: var(--brand-orange);
    font-weight: 700;
}
.total-price-detail {
    font-size: .875rem;
    opacity: .85;
    margin-top: .25rem;
}
.total-price-value {
    font-size: 2.25rem;
    font-weight: 900;
    color: var(--brand-orange);
    line-height: 1;
    text-shadow: 0 2px 8px rgba(217,164,65,0.4);
}

/* ============ Zemin butonları (dinamik) ============ */
.bg-picker { display: flex; flex-wrap: wrap; gap: .5rem; }
.bg-btn {
    background: #fff;
    border: 2px solid var(--border-light);
    border-radius: 10px;
    padding: .625rem 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: all .2s;
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    font-size: .9rem;
    color: var(--brand-black);
    position: relative;
    flex-direction: column;
    align-items: flex-start;
    min-width: 130px;
}
.bg-btn:hover { border-color: var(--brand-orange); transform: translateY(-2px); }
.bg-btn.active {
    border-color: var(--brand-orange);
    background: rgba(217,164,65,0.08);
    box-shadow: 0 4px 12px rgba(217,164,65,0.2);
}
.bg-btn > span:not(.bg-dot):not(.bg-surcharge) { display: inline; }
.bg-btn .bg-dot { width: 24px; height: 24px; border-radius: 6px; display: inline-block; border: 1px solid rgba(0,0,0,0.1); }
.bg-surcharge {
    font-size: .7rem;
    color: var(--brand-orange);
    font-weight: 700;
    display: block;
    margin-top: .1rem;
}
.bg-btn { flex-direction: row; align-items: center; }
.bg-btn > span:first-child + .bg-surcharge { align-self: flex-end; }

/* ============ Emoji grid (resim destekli) ============ */
.orn-btn img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    display: block;
}
.orn-btn.active img { filter: brightness(0) invert(1); }

/* Renk swatch'leri */
.color-swatches { display: flex; flex-wrap: wrap; gap: .5rem; }
.swatch {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    border: 2px solid transparent;
    cursor: pointer;
    transition: all .2s;
    padding: 0;
    position: relative;
}
.swatch:hover { transform: scale(1.15); }
.swatch.active {
    transform: scale(1.15);
    border-color: var(--brand-orange);
    box-shadow: 0 0 0 3px rgba(217,164,65,0.3);
}
.swatch-custom {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(45deg, #ff6b6b, #4ecdc4, #ffe66d);
    color: #fff;
    font-size: 1rem;
}

/* Font seçici */
.font-picker { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: .75rem; }
.font-btn {
    background: #fff;
    border: 2px solid #e5e5e5;
    border-radius: 10px;
    padding: 1rem;
    cursor: pointer;
    transition: all .2s;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .5rem;
    text-align: center;
}
.font-btn:hover { border-color: var(--brand-orange); transform: translateY(-2px); }
.font-btn.active {
    border-color: var(--brand-orange);
    background: rgba(217,164,65,0.08);
    box-shadow: 0 4px 12px rgba(217,164,65,0.2);
}
.font-btn span { font-size: 1.5rem; font-weight: 700; color: var(--brand-black); line-height: 1; }
.font-btn small { color: var(--text-muted); font-size: .75rem; font-weight: 600; text-transform: uppercase; letter-spacing: 1px; }

/* Zemin seçici */
.bg-picker, .align-picker { display: flex; gap: .5rem; flex-wrap: wrap; }
.bg-btn, .align-btn {
    background: #fff;
    border: 2px solid #e5e5e5;
    border-radius: 8px;
    padding: .625rem 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: all .2s;
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    font-size: .9rem;
    color: var(--brand-black);
}
.bg-btn:hover, .align-btn:hover { border-color: var(--brand-orange); }
.bg-btn.active, .align-btn.active {
    background: var(--brand-orange);
    border-color: var(--brand-orange);
    color: #fff;
}
.bg-dot {
    display: inline-block;
    width: 20px;
    height: 20px;
    border-radius: 50%;
}

/* Süsleme hedef sekmesi (sol/sağ) */
.orn-target-tabs {
    display: flex;
    gap: .5rem;
    background: #f8f8f8;
    padding: .35rem;
    border-radius: 10px;
}
.orn-target-btn {
    flex: 1;
    background: transparent;
    border: none;
    padding: .625rem 1rem;
    border-radius: 8px;
    font-weight: 600;
    cursor: pointer;
    transition: all .2s;
    color: var(--brand-black);
}
.orn-target-btn.active {
    background: var(--brand-orange);
    color: #fff;
    box-shadow: 0 2px 6px rgba(217,164,65,0.3);
}

/* Süsleme kategori sekmesi */
.orn-cat-tabs { border: 1px solid #eee; border-radius: 10px; padding: .35rem; background: #fafafa; flex-wrap: wrap; }
.orn-cat-tabs .nav-link {
    background: transparent;
    color: var(--brand-black);
    padding: .5rem 1rem;
    border-radius: 6px;
    font-weight: 600;
    font-size: .875rem;
    border: none;
    transition: all .2s;
}
.orn-cat-tabs .nav-link:hover { background: rgba(217,164,65,0.1); color: var(--brand-orange); }
.orn-cat-tabs .nav-link.active { background: var(--brand-orange); color: #fff; }

/* Süsleme grid */
.orn-tab-content {
    background: #fafafa;
    border-radius: 10px;
    padding: 1rem;
    max-height: 240px;
    overflow-y: auto;
}
.ornament-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(56px, 1fr));
    gap: .5rem;
}
.orn-btn {
    background: #fff;
    border: 2px solid #e5e5e5;
    border-radius: 10px;
    padding: .5rem;
    font-size: 1.75rem;
    cursor: pointer;
    transition: all .2s;
    aspect-ratio: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
}
.orn-btn:hover { border-color: var(--brand-orange); transform: scale(1.05); }
.orn-btn.active {
    background: var(--brand-orange);
    border-color: var(--brand-orange);
    color: #fff;
    transform: scale(1.05);
    box-shadow: 0 4px 12px rgba(217,164,65,0.4);
}
.orn-none {
    font-size: .875rem;
    aspect-ratio: auto;
    padding: 1rem;
    grid-column: span 3;
}

/* Mobil */
@media (max-width: 767px) {
    .customizer { padding: 1.25rem; }
    .customizer-preview { padding: 2rem 1rem; }
    .plate-frame { padding: 0 1rem; }
}

/* ============ WhatsApp float ============ */
.whatsapp-float {
    position: fixed;
    bottom: 20px;
    right: 20px;
    width: 56px;
    height: 56px;
    background: #25D366;
    color: #fff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.75rem;
    box-shadow: 0 4px 20px rgba(37,211,102,0.4);
    z-index: 999;
    transition: transform .2s;
}
.whatsapp-float:hover { transform: scale(1.1); color: #fff; }

/* ============ Responsive ============ */
@media (max-width: 767px) {
    .hero { padding: 3rem 0; }
    .section { padding: 2.5rem 0; }
    .site-header .logo img { max-height: 45px; }
}


/* ============================================================
   FİNAL PLAKALIK TASARIMI — logo + siyah zemin + çıta
   (dosyanın sonuna eklenmiş, tüm önceki .plate-frame kurallarını override eder)
   ============================================================ */
.plate-frame {
    width: 100% !important;
    max-width: 1200px !important;
    aspect-ratio: 4.5 / 1 !important;
    background: linear-gradient(
        to bottom,
        var(--plate-bg, #0d0d0d) 0%, var(--plate-bg, #0d0d0d) 84.7%,
        var(--plate-strip, #0d0d0d) 84.7%, var(--plate-strip, #0d0d0d) 100%
    ) !important;
    background-color: #0d0d0d !important;
    border-radius: 14px !important;
    position: relative !important;
    box-shadow: 0 14px 40px rgba(0,0,0,0.5), 0 3px 8px rgba(0,0,0,0.25) !important;
    overflow: hidden !important;
    margin: 0 auto !important;
}
.plate-frame::before,
.plate-frame::after {
    display: none !important;
    content: none !important;
    background: none !important;
    -webkit-mask-image: none !important;
            mask-image: none !important;
}
.plate-logo {
    position: absolute !important;
    left: 50% !important;
    top: 42.35% !important;
    transform: translate(-50%, -50%) !important;
    max-height: 45% !important;
    max-width: 25% !important;
    height: auto !important;
    width: auto !important;
    z-index: 1 !important;
    pointer-events: none;
    object-fit: contain;
}
.plate-text {
    position: absolute !important;
    left: 8% !important;
    right: 8% !important;
    bottom: 0 !important;
    top: auto !important;
    height: 15.3% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    z-index: 3 !important;
    color: #fff !important;
    font-size: clamp(0.85rem, 2.4vw, 1.5rem) !important;
    font-weight: 800 !important;
    letter-spacing: 2px !important;
    line-height: 1 !important;
    text-align: center !important;
    text-transform: uppercase !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    pointer-events: none !important;
}
.plate-ornament {
    position: absolute !important;
    top: 92.35% !important;
    bottom: auto !important;
    z-index: 3 !important;
    color: #fff !important;
    font-size: clamp(1rem, 2.6vw, 2rem) !important;
    line-height: 1 !important;
    pointer-events: none !important;
}
.plate-ornament.left  { left: 6% !important; right: auto !important; transform: translate(-50%, -50%) !important; }
.plate-ornament.right { left: auto !important; right: 6% !important; transform: translate( 50%, -50%) !important; }
.plate-ornament img {
    width: 2.5rem !important;
    max-width: 100% !important;
    max-height: 100% !important;
    height: auto !important;
    display: block !important;
    object-fit: contain !important;
    filter: brightness(0) invert(1) !important;
}


/* ==========================================================================
   FARK PLAKALIK — TEMA v3 (2026)
   Acik zemin + koyu ust menu + logo sarisi (#f9c206)
   ========================================================================== */
:root{
    --fp-y:#f9c206; --fp-y-d:#d9a600; --fp-y-soft:rgba(249,194,6,.14);
    --fp-ink:#101317; --fp-ink-2:#1a1f26; --fp-page:#f4f5f7; --fp-card:#fff;
    --fp-line:#e5e7eb; --fp-text:#171a20; --fp-muted:#6b7280;

    --brand-black:#101317; --brand-dark:#1a1f26; --brand-gray:#2a303a;
    --brand-orange:#f9c206; --brand-orange-dark:#d9a600; --brand-orange-light:#ffd84d;
    --text-dark:#171a20; --text-muted:#6b7280; --border-light:#e5e7eb;
}
body{background:var(--fp-page);color:var(--fp-text);}
h1,h2,h3,h4,h5{color:var(--fp-ink);letter-spacing:-.02em;}
a{color:var(--fp-ink);} a:hover{color:var(--fp-y-d);}
.accent,.text-brand{color:var(--fp-y-d) !important;}
.btn-brand,.btn-primary{background:var(--fp-y);border-color:var(--fp-y);color:#14161a;font-weight:700;border-radius:10px;}
.btn-brand:hover,.btn-primary:hover{background:var(--fp-y-d);border-color:var(--fp-y-d);color:#14161a;box-shadow:0 10px 26px rgba(249,194,6,.35);}
.btn-dark-brand{background:var(--fp-ink);border-color:var(--fp-ink);color:#fff;border-radius:10px;font-weight:700;}
.btn-dark-brand:hover{background:#000;border-color:#000;color:var(--fp-y);}

/* ---- Ust bar / header (koyu) ---- */
.topbar{background:#0a0c0f;color:#9aa3ae;border:0;font-size:.8rem;padding:.45rem 0;}
.topbar a,.topbar i{color:var(--fp-y);}
.site-header{background:var(--fp-ink);border-bottom:1px solid rgba(255,255,255,.07);box-shadow:0 6px 24px rgba(0,0,0,.18);position:sticky;top:0;z-index:1030;padding:.55rem 0;}
.site-header .logo img{max-height:44px;width:auto;}
.main-nav .nav-link{color:rgba(255,255,255,.8) !important;font-weight:600;font-size:.93rem;padding:.7rem .95rem;border-radius:8px;}
.main-nav .nav-link:hover{color:#fff !important;background:rgba(255,255,255,.06);}
.main-nav .nav-link.active{color:var(--fp-y) !important;}
.main-nav .nav-item:last-child .nav-link{background:var(--fp-y);color:#14161a !important;font-weight:700;margin-left:.4rem;}
.main-nav .nav-item:last-child .nav-link:hover{background:var(--fp-y-d);color:#14161a !important;}
.dropdown-menu{background:var(--fp-ink-2);border:1px solid rgba(255,255,255,.08);border-radius:12px;padding:.4rem;}
.dropdown-item{color:rgba(255,255,255,.85);border-radius:8px;}
.dropdown-item:hover{background:rgba(249,194,6,.14);color:var(--fp-y);}
.offcanvas{background:var(--fp-ink);color:#fff;}
.offcanvas .nav-link{color:rgba(255,255,255,.85);padding:.7rem 0;border-bottom:1px solid rgba(255,255,255,.06);}
.offcanvas .nav-link:hover{color:var(--fp-y);}
.offcanvas .btn-close{filter:invert(1) grayscale(100%) brightness(200%);}
.site-header .btn-brand{padding:.5rem .8rem;}

/* ---- HERO ---- */
.fp-hero{position:relative;background:linear-gradient(160deg,#0d1014 0%,#161b22 60%,#0d1014 100%);color:#fff;overflow:hidden;padding:clamp(48px,7vw,86px) 0;}
.fp-hero::before{content:"";position:absolute;inset:0;background-image:radial-gradient(rgba(255,255,255,.06) 1px,transparent 1px);background-size:22px 22px;opacity:.6;}
.fp-hero::after{content:"";position:absolute;right:-140px;top:-120px;width:520px;height:520px;border-radius:50%;background:radial-gradient(circle,rgba(249,194,6,.22) 0%,transparent 65%);}
.fp-hero .container{position:relative;z-index:2;}
.fp-eyebrow{display:inline-flex;align-items:center;gap:8px;background:rgba(249,194,6,.14);border:1px solid rgba(249,194,6,.35);color:var(--fp-y);padding:6px 14px;border-radius:99px;font-size:.76rem;font-weight:700;letter-spacing:1.4px;text-transform:uppercase;}
.fp-hero h1{color:#fff;font-size:clamp(2rem,4.6vw,3.4rem);font-weight:800;line-height:1.1;margin:18px 0 14px;}
.fp-hero h1 em{font-style:normal;color:var(--fp-y);}
.fp-hero .lead{color:rgba(255,255,255,.72);font-size:clamp(.98rem,1.5vw,1.12rem);max-width:520px;margin-bottom:26px;}
.fp-hero-actions{display:flex;flex-wrap:wrap;gap:12px;margin-bottom:30px;}
.fp-btn-wa{background:#25d366;border-color:#25d366;color:#fff;font-weight:700;border-radius:10px;}
.fp-btn-wa:hover{background:#1eb857;color:#fff;}
.fp-btn-ghost{border:1px solid rgba(255,255,255,.25);color:#fff;font-weight:600;border-radius:10px;}
.fp-btn-ghost:hover{background:#fff;color:#14161a;}
.fp-hero-stats{display:flex;flex-wrap:wrap;gap:28px;padding-top:22px;border-top:1px solid rgba(255,255,255,.1);}
.fp-hero-stats b{display:block;color:var(--fp-y);font-size:1.5rem;font-weight:800;line-height:1.1;}
.fp-hero-stats span{color:rgba(255,255,255,.6);font-size:.82rem;}
.fp-hero-visual{position:relative;}
.fp-hero-visual img{width:100%;border-radius:18px;box-shadow:0 30px 70px rgba(0,0,0,.55);border:1px solid rgba(255,255,255,.1);transform:rotate(-1.5deg);}
.fp-hero-tag{position:absolute;left:-10px;bottom:-16px;background:var(--fp-y);color:#14161a;font-weight:800;font-size:.85rem;padding:10px 16px;border-radius:12px;box-shadow:0 12px 28px rgba(0,0,0,.35);}
@media(max-width:991px){.fp-hero-visual{margin-top:34px;} .fp-hero-stats{gap:18px;}}

/* ---- Serit (ozellikler) ---- */
.fp-strip{background:#fff;border-bottom:1px solid var(--fp-line);}
.fp-strip .row{--bs-gutter-y:0;}
.fp-strip-item{display:flex;align-items:center;gap:12px;padding:22px 10px;}
.fp-strip-item i{width:42px;height:42px;flex:0 0 42px;border-radius:12px;background:var(--fp-y-soft);color:var(--fp-y-d);display:flex;align-items:center;justify-content:center;font-size:1.05rem;}
.fp-strip-item b{display:block;font-size:.95rem;color:var(--fp-ink);}
.fp-strip-item span{font-size:.82rem;color:var(--fp-muted);}

/* ---- Bolum basliklari ---- */
.fp-sec{padding:clamp(46px,6vw,78px) 0;}
.fp-sec-light{background:#fff;}
.fp-head{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;margin-bottom:30px;}
.fp-head h2{font-size:clamp(1.5rem,3vw,2.15rem);font-weight:800;margin:0;}
.fp-head h2 em{font-style:normal;color:var(--fp-y-d);}
.fp-head p{color:var(--fp-muted);margin:8px 0 0;font-size:.96rem;}
.fp-head a{font-weight:700;font-size:.9rem;white-space:nowrap;color:var(--fp-ink);}
.fp-head a:hover{color:var(--fp-y-d);}
@media(max-width:575px){.fp-head{flex-direction:column;align-items:flex-start;}}

/* ---- Urun kartlari (yeni) ---- */
.fp-card{display:block;background:var(--fp-card);border:1px solid var(--fp-line);border-radius:16px;overflow:hidden;height:100%;transition:transform .2s,box-shadow .2s,border-color .2s;}
.fp-card:hover{transform:translateY(-5px);border-color:rgba(249,194,6,.6);box-shadow:0 18px 38px rgba(16,19,23,.13);}
.fp-card-img{position:relative;aspect-ratio:4/3;background:#eef0f3;overflow:hidden;}
.fp-card-img img{width:100%;height:100%;object-fit:cover;transition:transform .5s;}
.fp-card:hover .fp-card-img img{transform:scale(1.06);}
.fp-card-badge{position:absolute;top:12px;left:12px;background:var(--fp-y);color:#14161a;font-size:.7rem;font-weight:800;padding:5px 10px;border-radius:99px;letter-spacing:.4px;}
.fp-card-body{padding:16px 16px 18px;}
.fp-card-cat{font-size:.74rem;text-transform:uppercase;letter-spacing:1px;color:var(--fp-muted);font-weight:700;}
.fp-card-body h3{font-size:1rem;font-weight:700;margin:6px 0 8px;line-height:1.35;color:var(--fp-ink);}
.fp-card-body p{font-size:.85rem;color:var(--fp-muted);margin-bottom:12px;}
.fp-card-foot{display:flex;align-items:center;justify-content:space-between;border-top:1px solid var(--fp-line);padding-top:12px;}
.fp-price{font-weight:800;color:var(--fp-ink);}
.fp-price small{display:block;font-weight:600;font-size:.72rem;color:var(--fp-muted);}
.fp-go{width:34px;height:34px;border-radius:50%;background:var(--fp-y-soft);color:var(--fp-y-d);display:flex;align-items:center;justify-content:center;font-size:.8rem;transition:.2s;}
.fp-card:hover .fp-go{background:var(--fp-y);color:#14161a;}

/* ---- Kategori pill ---- */
.fp-cat{display:flex;align-items:center;gap:12px;background:#fff;border:1px solid var(--fp-line);border-radius:14px;padding:14px 16px;height:100%;transition:.2s;}
.fp-cat:hover{border-color:var(--fp-y);box-shadow:0 12px 26px rgba(16,19,23,.10);transform:translateY(-3px);}
.fp-cat i{width:40px;height:40px;flex:0 0 40px;border-radius:11px;background:var(--fp-ink);color:var(--fp-y);display:flex;align-items:center;justify-content:center;}
.fp-cat b{display:block;font-size:.92rem;color:var(--fp-ink);line-height:1.2;}
.fp-cat span{font-size:.78rem;color:var(--fp-muted);}

/* ---- Adimlar (koyu bant) ---- */
.fp-steps{background:var(--fp-ink);color:#fff;padding:clamp(46px,6vw,74px) 0;}
.fp-steps h2{color:#fff;}
.fp-steps .fp-head p{color:rgba(255,255,255,.6);}
.fp-step{position:relative;padding:26px 22px;border:1px solid rgba(255,255,255,.1);border-radius:16px;height:100%;background:rgba(255,255,255,.03);}
.fp-step-no{font-size:2.2rem;font-weight:800;color:var(--fp-y);line-height:1;opacity:.9;}
.fp-step h3{color:#fff;font-size:1.02rem;margin:10px 0 8px;}
.fp-step p{color:rgba(255,255,255,.62);font-size:.88rem;margin:0;}

/* ---- Neden biz ---- */
.fp-why{background:#fff;border:1px solid var(--fp-line);border-radius:16px;padding:26px 22px;height:100%;transition:.2s;}
.fp-why:hover{border-color:rgba(249,194,6,.6);box-shadow:0 14px 34px rgba(16,19,23,.10);}
.fp-why i{width:48px;height:48px;border-radius:14px;background:var(--fp-y-soft);color:var(--fp-y-d);display:flex;align-items:center;justify-content:center;font-size:1.2rem;margin-bottom:14px;}
.fp-why h3{font-size:1.05rem;margin-bottom:8px;}
.fp-why p{color:var(--fp-muted);font-size:.9rem;margin:0;}

/* ---- CTA bandi ---- */
.fp-cta{background:linear-gradient(120deg,var(--fp-y) 0%,#ffd84d 100%);border-radius:20px;padding:clamp(28px,4vw,44px);display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:20px;}
.fp-cta h2{font-size:clamp(1.35rem,2.6vw,1.9rem);margin:0 0 6px;color:#14161a;}
.fp-cta p{margin:0;color:rgba(20,22,26,.72);font-weight:500;}
.fp-cta .btn{border-radius:10px;font-weight:700;}
.fp-cta .btn-dark{background:#101317;border-color:#101317;color:#fff;}
.fp-cta .btn-dark:hover{background:#000;color:var(--fp-y);}

/* ---- SSS ---- */
.fp-faq .accordion-item{background:#fff;border:1px solid var(--fp-line);border-radius:14px !important;margin-bottom:10px;overflow:hidden;}
.fp-faq .accordion-button{font-weight:700;color:var(--fp-ink);background:#fff;box-shadow:none;font-size:.98rem;}
.fp-faq .accordion-button:not(.collapsed){color:var(--fp-y-d);background:#fffdf5;}
.fp-faq .accordion-button::after{filter:grayscale(1);}
.fp-faq .accordion-body{color:var(--fp-muted);font-size:.92rem;}

/* ---- Yorumlar ---- */
.fp-quote{background:#fff;border:1px solid var(--fp-line);border-radius:16px;padding:24px;height:100%;}
.fp-quote .stars{color:var(--fp-y);font-size:.85rem;margin-bottom:10px;}
.fp-quote p{color:var(--fp-text);font-size:.93rem;}
.fp-quote b{font-size:.9rem;}
.fp-quote span{color:var(--fp-muted);font-size:.8rem;}

/* ---- Blog ---- */
.fp-post{background:#fff;border:1px solid var(--fp-line);border-radius:16px;overflow:hidden;height:100%;transition:.2s;}
.fp-post:hover{transform:translateY(-4px);box-shadow:0 16px 34px rgba(16,19,23,.10);}
.fp-post img{width:100%;aspect-ratio:16/9;object-fit:cover;}
.fp-post .p{padding:18px;}
.fp-post h3{font-size:1rem;margin:6px 0 8px;}
.fp-post span{font-size:.78rem;color:var(--fp-muted);}

/* ---- Tasarim araci bolumu ---- */
.designer-home-wrap .customizer{background:#fff;border:1px solid var(--fp-line);border-radius:18px;}
.customizer-preview{background:#101317;border-radius:14px;}

/* ---- Footer ---- */
.site-footer{background:var(--fp-ink);color:rgba(255,255,255,.62);padding-top:54px;}
.site-footer h5{color:#fff;font-size:.82rem;letter-spacing:1.2px;text-transform:uppercase;margin-bottom:14px;}
.site-footer a{color:rgba(255,255,255,.62);display:block;padding:4px 0;font-size:.9rem;}
.site-footer a:hover{color:var(--fp-y);}
.site-footer .footer-logo img{max-height:50px;margin-bottom:14px;}
.site-footer .social a{display:inline-flex;width:38px;height:38px;align-items:center;justify-content:center;border-radius:10px;background:rgba(255,255,255,.07);color:#fff;margin-right:8px;}
.site-footer .social a:hover{background:var(--fp-y);color:#14161a;}
.site-footer .contact-info li{padding:5px 0;font-size:.9rem;}
.site-footer .contact-info i{color:var(--fp-y);width:20px;}
.footer-bottom{background:#0a0c0f;color:rgba(255,255,255,.45);margin-top:40px;padding:16px 0;font-size:.84rem;}
.footer-bottom .tagline{color:var(--fp-y);letter-spacing:2.5px;font-weight:800;font-size:.8rem;}

/* ---- Genel kart/form uyumu ---- */
.card,.sidebar-box,.testimonial-card,.blog-card,.product-card,.category-card,.category-card-modern,.why-card{background:#fff;border:1px solid var(--fp-line);border-radius:16px;}
.form-control,.form-select{border-radius:10px;border-color:var(--fp-line);}
.form-control:focus,.form-select:focus{border-color:var(--fp-y);box-shadow:0 0 0 .2rem rgba(249,194,6,.18);}
.breadcrumb-wrap{background:#fff;border-bottom:1px solid var(--fp-line);}
.page-item.active .page-link{background:var(--fp-y);border-color:var(--fp-y);color:#14161a;}
.page-link{color:var(--fp-ink);}
.section-alt{background:#fff !important;}
.whatsapp-float{box-shadow:0 12px 30px rgba(37,211,102,.35);}

/* ---- CLS (sayfa kaymasi) onleme ---- */
.site-header .logo img{height:44px;width:auto;display:block;}
.site-footer .footer-logo img{height:50px;width:auto;display:block;}
.offcanvas-header img{height:40px;width:auto;}
.fp-hero-visual img{aspect-ratio:16/10;object-fit:cover;display:block;}
.fp-hero{min-height:clamp(420px,50vw,600px);display:flex;align-items:center;}
.fp-strip-item{min-height:86px;}
img{max-width:100%;}

/* ---- Ikonlar icin sabit genislik (CLS) ---- */
i.fas,i.fab,i.far{display:inline-block;min-width:1em;text-align:center;font-style:normal;}
.topbar{min-height:34px;}
.site-header{min-height:66px;}
.fp-eyebrow{min-height:30px;}
.fp-hero-stats{min-height:62px;}
.fp-card-body{min-height:150px;}
.visually-hidden{position:absolute !important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;}

/* ---- Yazi tipi yuklenirken kayma olmasin (CLS) ---- */
@font-face{
    font-family:'Inter Yedek';
    src:local('Segoe UI'),local('Arial');
    size-adjust:107%;
    ascent-override:90%;
    descent-override:22%;
    line-gap-override:0%;
}
body,.btn,.form-control,.form-select,h1,h2,h3,h4,h5,h6{
    font-family:'Inter','Inter Yedek',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
}
.fp-hero h1{min-height:1.1em;}
.fp-cat,.fp-why,.fp-step{min-height:96px;}

/* ---- Kontrast duzeltmeleri (erisilebilirlik) ---- */
:root{
    --fp-y-text:#7a5800;   /* acik zeminde okunakli altin */
    --fp-muted:#5c6370;
    --text-muted:#5c6370;
}
.accent,.text-brand,.text-muted{color:var(--fp-muted);}
.accent,.text-brand{color:var(--fp-y-text) !important;}
.fp-head h2 em,.fp-head a:hover,h2 em{color:var(--fp-y-text);}
.fp-card-cat,.fp-price small,.fp-head p,.fp-why p,.fp-post span,.fp-quote span,.form-text{color:var(--fp-muted);}
.fp-strip-item span{color:var(--fp-muted);}
.fp-strip-item i,.fp-why i,.fp-go{color:var(--fp-y-text);}
.fp-faq .accordion-button:not(.collapsed){color:var(--fp-y-text);}
a:hover{color:var(--fp-y-text);}
.fp-cta p{color:#2b2a23;}
.fp-quote .stars{color:#a37700;}
/* koyu zeminlerde parlak sari kalsin */
.fp-hero h1 em,.fp-eyebrow,.fp-hero-stats b,.fp-step-no,.site-footer a:hover,
.footer-bottom .tagline,.fp-cat i,.main-nav .nav-link.active,.site-footer .contact-info i,
.topbar a,.topbar i{color:var(--fp-y) !important;}
.fp-cat i{background:var(--fp-ink);}
/* Footer basliklari (h3) */
.site-footer h3.footer-h{color:#fff;font-size:.82rem;letter-spacing:1.2px;text-transform:uppercase;margin-bottom:14px;}