/* ------------------------------------------------------
   GLOBAL
------------------------------------------------------ */
:root {
    --header-height: 210px; /* masaüstü için */
}

body {
    font-family: 'Inter', sans-serif;
    background: #f7f7f9;
    color: #333;
}

a {
    text-decoration: none;
    color: inherit;
}

img {
    max-width: 100%;
    display: block;
}

#site-wrapper {
    transition: opacity 0.8s;
}

/* ------------------------------------------------------
   HEADER & NAVBAR
------------------------------------------------------ */
#site-header .topbar {
    background: #0d6efd;
    color: #fff;
    padding: 6px 0;
    font-size: 14px;
}

#site-header .topbar a {
    color: #fff;
    margin-left: 10px;
}

#site-header .navbar .logo {
    height: 55px;
    object-fit: contain;
}

.navbar-nav .nav-link {
    font-weight: 500;
    padding: 10px 12px;
}

/* Mega menu */
.mega-dropdown:hover .mega-menu {
    display: block;
}

.mega-menu {
    display: none;
    position: absolute;
    left: 0;
    right: 0;
    background: #fff;
    border-radius: 8px;
    margin-top: 0;
    padding: 20px;
    z-index: 999;
}

.mega-title {
    font-size: 14px;
    font-weight: 600;
    margin-bottom: 10px;
}

.mega-list {
    list-style: none;
    padding: 0;
}

.mega-list li {
    margin-bottom: 6px;
}

.mega-list li a {
    color: #444;
}

.small-product-grid .sp-item {
    display: block;
    text-align: center;
    font-size: 13px;
}

.small-product-grid .sp-img {
    width: 100%;
    height: 120px;
    object-fit: cover;
    border-radius: 6px;
    margin-bottom: 6px;
}

/* ------------------------------------------------------
   HERO
------------------------------------------------------ */
.hero-section {
    background: radial-gradient(circle at top left, #0d6efd 0, #002b72 40%, #020813 100%);
    color: #fff;
    padding: 60px 0 50px;
}

.hero-text h1 {
    font-size: 34px;
    font-weight: 700;
    margin-bottom: 10px;
}

.hero-text .lead {
    font-size: 17px;
    opacity: 0.9;
}

.hero-bullets {
    list-style: none;
    padding: 0;
    margin: 18px 0;
}

.hero-bullets li {
    margin-bottom: 6px;
    font-size: 14px;
}

.hero-bullets i {
    color: #00e676;
    margin-right: 4px;
}

.hero-actions .btn {
    margin-top: 10px;
}

.hero-visual .hero-card {
    background: rgba(255,255,255,0.05);
    border-radius: 14px;
    padding: 20px;
    border: 1px solid rgba(255,255,255,0.15);
    box-shadow: 0 10px 30px rgba(0,0,0,0.4);
}

.hero-visual .stats {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    margin-top: 10px;
}

.hero-visual .stats span {
    font-size: 20px;
    font-weight: 600;
}

/* ------------------------------------------------------
   SECTIONS
------------------------------------------------------ */
.section-grey {
    background: #f3f4f7;
    padding: 40px 0;
}

.section-white {
    background: #fff;
    padding: 40px 0;
}

.section-title {
    font-size: 24px;
    font-weight: 600;
}

.section-subtitle {
    font-size: 14px;
    color: #666;
}

/* ------------------------------------------------------
   SEKTÖR KARTLARI
------------------------------------------------------ */
.sector-card {
    background: #fff;
    border-radius: 10px;
    padding: 14px;
    text-align: center;
    border: 1px solid #e0e0e0;
    transition: transform 0.15s ease, box-shadow 0.15s;
    font-size: 13px;
}

.sector-card i {
    font-size: 22px;
    display: block;
    margin-bottom: 4px;
    color: #0d6efd;
}

.sector-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.06);
}

/* ------------------------------------------------------
   ÜRÜN KARTLARI
------------------------------------------------------ */
.product-grid {
    margin-top: 10px;
}

.product-card {
    background: #fff;
    border-radius: 12px;
    overflow: hidden;
    border: 1px solid #e1e1e1;
    transition: transform 0.15s ease, box-shadow 0.15s;
}

.product-card a {
    color: inherit;
}

.product-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 6px 16px rgba(0,0,0,0.08);
}

.product-img-wrap {
    width: 100%;
    height: 170px;
    overflow: hidden;
    background: #f3f3f3;
}

.product-img-wrap img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.product-body {
    padding: 10px 12px 12px;
}

.product-title {
    font-size: 14px;
    font-weight: 600;
}

.product-meta {
    font-size: 12px;
    color: #777;
}

.product-price {
    font-size: 14px;
    font-weight: 600;
    margin-top: 4px;
}

.product-price.muted {
    color: #999;
}

/* Büyük kart (liste sayfasında) */
.product-card-lg {
    padding: 8px 10px;
}

/* Checkbox alanı */
.product-check {
    display: flex;
    align-items: center;
    padding-right: 6px;
}

.product-check input[type="checkbox"] {
    width: 18px;
    height: 18px;
}

/* ------------------------------------------------------
   ABOUT / STATS BLOK
------------------------------------------------------ */
.about-stats {
    display: grid;
    grid-template-columns: repeat(2, minmax(0,1fr));
    gap: 10px;
}

.about-stats > div {
    background: #fff;
    border-radius: 10px;
    border: 1px solid #e1e1e1;
    padding: 10px 12px;
    text-align: center;
}

.about-stats span {
    display: block;
    font-size: 20px;
    font-weight: 600;
}

/* ------------------------------------------------------
   ÜRÜN DETAY
------------------------------------------------------ */
.product-detail-img {
    background: #f3f3f3;
    border-radius: 12px;
    padding: 10px;
}

.product-detail-title {
    font-size: 24px;
    font-weight: 600;
}

.product-detail-meta .badge {
    margin-right: 2px;
}

.product-detail-price {
    font-size: 20px;
    font-weight: 600;
    margin-top: 6px;
}

.product-detail-price.muted {
    color: #888;
}

/* ------------------------------------------------------
   FILTER BAR
------------------------------------------------------ */
.filter-bar .form-control,
.filter-bar .form-select {
    font-size: 14px;
}

/* ------------------------------------------------------
   FOOTER
------------------------------------------------------ */
.site-footer {
    background: #1d1f24;
    color: #b0b0b0;
}

.footer-logo {
    height: 60px;
}

.footer-list {
    padding: 0;
    list-style: none;
}

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

.footer-list li a {
    color: #ddd;
}

.footer-list li a:hover {
    color: #fff;
}

.footer-social a {
    display: inline-block;
    font-size: 18px;
    margin-right: 10px;
    color: #ddd;
}

.footer-social a:hover {
    color: #fff;
}

.footer-bottom {
    background: #141518;
}

/* ------------------------------------------------------
   INTRO OVERLAY
------------------------------------------------------ */
#intro-overlay {
    position: fixed;
    inset: 0;
    background: #000;
    z-index: 9999;
    display: flex;
    justify-content: center;
    align-items: center;
}

#intro-overlay video {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

#intro-skip {
    position: absolute;
    right: 20px;
    bottom: 20px;
    z-index: 10000;
    background: rgba(0,0,0,0.6);
    color: #fff;
    border: 0;
    padding: 8px 14px;
    border-radius: 999px;
    font-size: 14px;
    display: flex;
    align-items: center;
    gap: 4px;
}

.intro-fade-out {
    opacity: 0;
    transition: opacity 0.8s;
}

/* ------------------------------------------------------
   GENEL RESPONSIVE
------------------------------------------------------ */
@media (max-width: 992px) {
    .hero-section {
        text-align: center;
    }
    .hero-visual {
        margin-top: 20px;
    }
}

/* İletişim sayfası tablo + harita responsive düzeltme */
.iletisim-tablosu {
    width: 100%;
    border-collapse: collapse;
}

.iletisim-tablosu td {
    vertical-align: top;
    padding: 5px 10px;
}

/* Mobilde alt alta gelsin */
@media (max-width: 768px) {
    .iletisim-tablosu,
    .iletisim-tablosu tbody,
    .iletisim-tablosu tr,
    .iletisim-tablosu td {
        display: block;
        width: 100% !important;
    }

    .iletisim-tablosu td {
        padding-right: 0;
        padding-left: 0;
    }

    .iletisim-tablosu iframe {
        width: 100% !important;
        height: 260px;
    }
}

/* --- KURUMSAL İLETİŞİM SAYFASI --- */

.contact-card {
    background: #ffffff;
    border: 1px solid #eee;
}

.contact-card h4 {
    font-size: 1.4rem;
}

.info-item p {
    font-size: 1rem;
    color: #333;
}

.map-wrapper iframe {
    border-radius: 12px;
}

/* FORM STİLİ */
.contact-form-wrapper {
    background: #ffffff;
    border: 1px solid #eee;
}

.contact-form-wrapper .form-control-lg {
    border-radius: 10px;
    padding: 12px 16px;
}

/* Mobil iyileştirme */
@media (max-width: 768px) {
    .contact-card, .map-wrapper, .contact-form-wrapper {
        padding: 18px !important;
    }
}

.service-box {
    background: #ffffff;
    border-radius: 12px;
    box-shadow: 0 4px 18px rgba(0,0,0,0.08);
    padding: 25px;
    transition: all .25s ease;
    text-decoration: none;
    display: block;
    height: 100%;
}

.service-box:hover {
    transform: translateY(-6px);
    box-shadow: 0 8px 22px rgba(0,0,0,0.12);
}

.service-box h4 {
    font-size: 1.2rem;
    font-weight: 600;
    margin-bottom: .4rem;
    color: #222;
}

.service-box p {
    font-size: .92rem;
    margin: 0;
}

.service-box img.service-icon {
    width: 70px;
    height: 70px;
    object-fit: contain;
}

/* =================================================
   PREMIUM HİZMET KUTULARI – FINAL (KÜÇÜK KART)
================================================= */

/* KART */
.premium-service-box {
    display: block;
    padding: 14px;
    border-radius: 12px;
    background: #ffffff;
    border: 1px solid #e5e5e5;
    text-align: center;
    height: 100%;
    min-height: 160px;           /* NET küçültme */
    box-shadow: 0 4px 14px rgba(0,0,0,0.06);
    transition: all .25s ease;
}

/* HOVER – bakır saydam iç */
.premium-service-box:hover {
    transform: translateY(-3px);
    border-color: #b87333;
    background: rgba(184,115,51,0.08);
    box-shadow: 0 8px 22px rgba(0,0,0,0.10);
}

/* =================================================
   GÖRSEL ALANI (YUVARLAK YOK)
================================================= */
.service-icon-wrapper {
    width: 100%;
    height: 70px;               /* KÜÇÜLTÜLDÜ */
    margin-bottom: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
}

/* FA ICON */
.service-icon-wrapper i {
    font-size: 40px;            /* KÜÇÜLTÜLDÜ */
    background: linear-gradient(135deg, #8a4b12, #d69646, #f3c37a);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    color: #b87333;
}

/* RESİM ICON */
.service-icon-wrapper img {
    width: 80px;                /* RESİM BÜYÜK */
    height: 80px;
    object-fit: contain;
    filter: sepia(1) saturate(1.2) hue-rotate(-10deg) brightness(1.05);
}

/* =================================================
   METİN
================================================= */
.premium-service-box h4 {
    font-size: 0.95rem;
    font-weight: 700;
    margin-bottom: 4px;
}

.premium-service-box p {
    font-size: 0.82rem;
    color: #666;
    min-height: 34px;
}

/* DETAY LİNK */
.premium-service-box .read-more {
    display: inline-block;
    margin-top: 6px;
    font-size: 0.82rem;
    font-weight: 600;
    color: #b87333;
    opacity: 0.85;
    transition: .25s;
}

.premium-service-box:hover .read-more {
    opacity: 1;
    color: #d6904a;
}

/* =====================================================
   HİZMET KARTLARI – ÜRÜN KATEGORİSİYLE AYNI ORAN
===================================================== */

.service-card {
    display: block;
    background: #fff;
    border-radius: 14px;
    border: 1px solid #e6e6e6;
    overflow: hidden;
    height: 100%;
    transition: all .25s ease;
}

.service-card:hover {
    border-color: #b87333;
    background: rgba(184,115,51,0.06);
    box-shadow: 0 10px 24px rgba(0,0,0,0.12);
    transform: translateY(-4px);
}

/* GÖRSEL ALANI – ürün kategorisi gibi */
.service-img {
    height: 150px;
    background: #f3f3f3;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* FA ikon */
.service-img i {
    font-size: 52px;
    background: linear-gradient(135deg, #8a4b12, #d69646, #f3c37a);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* Resim ikon */
.service-img img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    padding: 18px;
    filter: sepia(1) saturate(1.2) hue-rotate(-10deg);
}

/* METİN */
.service-body {
    padding: 14px;
    text-align: center;
}

.service-body h5 {
    font-size: 0.95rem;
    font-weight: 700;
    margin-bottom: 4px;
}

.service-body p {
    font-size: 0.82rem;
    color: #666;
    min-height: 34px;
}

.service-link {
    font-size: 0.82rem;
    font-weight: 600;
    color: #b87333;
}


/* Hafif iç boşluk hissi */
.service-img {
    padding: 8px;
}

/* Hover’da görsel hafif yaklaşsın */
.service-card:hover .service-img img {
    transform: scale(1.03);
    transition: transform .25s ease;
}

/* Hizmet kartı içindeki görsel kenarları */
.service-img img {
    border-radius: 10px;
}

/* Hizmet görsel alanını yuvarlat (GARANTİ) */
.service-img{
    border-radius: 12px;
    overflow: hidden;
}

/* İçteki görsel de uyumlu olsun */
.service-img img{
    border-radius: 12px;
}

/* =====================================================
   HİZMET KARTI GÖRSEL KÖŞE YUVARLATMA – TEK & GARANTİ
===================================================== */

/* Görsel alan */
.service-card .service-img {
    border-radius: 14px;
    overflow: hidden;      /* ASIL KRİTİK SATIR */
    background: #f3f3f3;
}

/* Görselin kendisi */
.service-card .service-img img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    border-radius: 14px;
}

/* =====================================================
   HİZMET DETAY – GÖRSEL / İKON
===================================================== */

.service-detail-media {
    width: 100%;
    max-height: 320px;
    border-radius: 16px;
    overflow: hidden;
    background: #f3f3f3;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Görsel */
.service-detail-img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    padding: 20px;
    border-radius: 16px;
}

/* FA ikon */
.service-detail-icon i {
    font-size: 110px;
    background: linear-gradient(135deg, #8a4b12, #d69646, #f3c37a);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    color: #b87333;
}

/* ================================
   HİZMET DETAY – STICKY SAĞ PANEL
================================ */
.service-sticky {
    position: sticky;
    top: 90px;              /* header yüksekliğine göre */
}

@media (max-width: 768px) {
    .service-sticky {
        position: static;   /* mobilde kapalı */
    }
}

/* ======================================
   HİZMET DETAY – CAM EFEKTLİ SAĞ PANEL
====================================== */
.service-sticky .card {
    background: rgba(255, 255, 255, 0.75);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);

    border: 1px solid rgba(184,115,51,0.25);
    border-radius: 16px;

    box-shadow:
        0 10px 30px rgba(0,0,0,0.10),
        inset 0 1px 0 rgba(255,255,255,0.6);

    transition: all .3s ease;
}

.service-sticky .card:hover {
    box-shadow:
        0 14px 36px rgba(0,0,0,0.14),
        inset 0 1px 0 rgba(255,255,255,0.8);
}

/* ================================
   PDF KARTI – VURGULU
================================ */
.pdf-icon {
    font-size: 1.6rem;
    background: linear-gradient(135deg, #8a4b12, #d69646, #f3c37a);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.pdf-btn {
    font-weight: 600;
    border-radius: 10px;
    border-color: rgba(184,115,51,0.5);
}

.pdf-btn:hover {
    background: rgba(184,115,51,0.12);
    border-color: #b87333;
    color: #7a3f10;
}

/* ================================
   BAKIR GRADIENT CTA BUTON
================================ */
.copper-btn {
    background: linear-gradient(
        135deg,
        #8a4b12,
        #b87333,
        #e0a96d
    );
    border: none;
    color: #fff;
    font-weight: 700;
    letter-spacing: .3px;
    padding: 12px;
    border-radius: 12px;

    box-shadow:
        0 8px 20px rgba(184,115,51,0.45),
        inset 0 1px 0 rgba(255,255,255,0.35);

    transition: all .3s ease;
}

.copper-btn:hover {
    transform: translateY(-2px);
    box-shadow:
        0 12px 28px rgba(184,115,51,0.55),
        inset 0 1px 0 rgba(255,255,255,0.45);
    color: #fff;
}

/* ======================================
   PDF VIEWER – CAM EFEKTLİ OVERLAY
====================================== */
.pdf-overlay {
    position: fixed;
    inset: 0;
    z-index: 9999;

    background: rgba(0,0,0,0.55);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);

    display: flex;
    align-items: center;
    justify-content: center;
}

.pdf-overlay-inner {
    width: 92%;
    max-width: 1100px;
    height: 90%;

    background: rgba(255,255,255,0.85);
    border-radius: 18px;
    border: 1px solid rgba(184,115,51,0.35);

    box-shadow:
        0 20px 50px rgba(0,0,0,0.35),
        inset 0 1px 0 rgba(255,255,255,0.6);

    position: relative;
    overflow: hidden;
}

/* PDF iframe */
.pdf-overlay-inner iframe {
    width: 100%;
    height: 100%;
    border: none;
}

/* Kapat Butonu */
.pdf-close {
    position: absolute;
    top: 14px;
    right: 14px;

    background: linear-gradient(
        135deg,
        #8a4b12,
        #b87333,
        #e0a96d
    );

    color: #fff;
    border: none;
    border-radius: 999px;
    padding: 8px 16px;
    font-weight: 700;
    font-size: 0.9rem;

    cursor: pointer;

    box-shadow:
        0 6px 16px rgba(184,115,51,0.45),
        inset 0 1px 0 rgba(255,255,255,0.4);

    transition: all .25s ease;
}

.pdf-close:hover {
    transform: translateY(-1px);
    box-shadow:
        0 10px 22px rgba(184,115,51,0.55);
}

/* ===============================
   GLASS CARD – SAĞ PANEL
=============================== */
.glass-card {
    background: rgba(255,255,255,0.75);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);

    border-radius: 16px;
    border: 1px solid rgba(184,115,51,0.35);
    padding: 20px;

    box-shadow:
        0 10px 30px rgba(0,0,0,0.12),
        inset 0 1px 0 rgba(255,255,255,0.5);
}

/* Bakır gradient buton */
.btn-copper {
    background: linear-gradient(
        135deg,
        #8a4b12,
        #b87333,
        #e0a96d
    );
    color: #fff;
    border: none;
    font-weight: 700;
}

.btn-copper:hover {
    opacity: 0.95;
}

/* ===============================
   PDF OVERLAY
=============================== */
.pdf-overlay {
    position: fixed;
    inset: 0;
    z-index: 9999;
    background: rgba(0,0,0,0.6);
    backdrop-filter: blur(6px);
    display: flex;
    align-items: center;
    justify-content: center;
}

.pdf-overlay-inner {
    width: 95%;
    max-width: 1200px;
    height: 92%;
    background: rgba(255,255,255,0.9);
    border-radius: 18px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

/* Toolbar */
.pdf-toolbar {
    display: flex;
    justify-content: space-between;
    padding: 10px;
    background: rgba(184,115,51,0.15);
}

.pdf-toolbar button {
    background: #b87333;
    color: #fff;
    border: none;
    border-radius: 8px;
    padding: 6px 12px;
    font-weight: 700;
    margin-right: 6px;
}

/* PDF */
#pdfFrame {
    flex: 1;
    transform-origin: top center;
}

/* ===============================
   HİZMET DETAY – HERO GÖRSEL
=============================== */
.service-detail-hero {
    background: #f3f3f3;
    border-radius: 18px;
    overflow: hidden;
    padding: 14px;
    box-shadow: 0 6px 18px rgba(0,0,0,0.08);
}

/* Resim */
.service-detail-img {
    width: 100%;
    max-height: 360px;
    object-fit: contain;
    border-radius: 14px;
}

/* FA ikon fallback */
.service-detail-icon {
    height: 260px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.service-detail-icon i {
    font-size: 96px;
    background: linear-gradient(135deg, #8a4b12, #d69646, #f3c37a);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* =========================================
   HİZMET DETAY – SAĞ PANEL BAKIR CAM KART
========================================= */
.glass-card {
    background: linear-gradient(
        135deg,
        rgba(184,115,51,0.22),
        rgba(255,255,255,0.65)
    );
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);

    border: 1px solid rgba(184,115,51,0.45);
    border-radius: 18px;
    padding: 22px;

    box-shadow:
        0 10px 30px rgba(0,0,0,0.15),
        inset 0 0 0 rgba(255,255,255,0.3);

    transition: all .35s ease;
}

/* Hover – bakır derinlik */
.glass-card:hover {
    transform: translateY(-3px);
    box-shadow:
        0 16px 36px rgba(0,0,0,0.22),
        inset 0 0 0 rgba(255,255,255,0.4);
}

/* Başlık */
.glass-card h5 {
    font-size: 1.05rem;
    font-weight: 700;
    margin-bottom: 10px;
    color: #6a3b14;
    display: flex;
    align-items: center;
    gap: 6px;
}

/* PDF Görüntüle */
.glass-card .btn-outline-secondary {
    border: 1px solid rgba(184,115,51,0.55);
    color: #6a3b14;
    font-weight: 600;
    background: rgba(255,255,255,0.7);
}

.glass-card .btn-outline-secondary:hover {
    background: rgba(184,115,51,0.18);
    color: #4a260e;
}

/* PDF İndir */
.glass-card .btn-outline-dark {
    border-color: rgba(184,115,51,0.6);
    color: #6a3b14;
    font-weight: 600;
}

.glass-card .btn-outline-dark:hover {
    background: rgba(184,115,51,0.22);
    color: #3a1e0c;
}

/* =========================================
   BAKIR GRADIENT CTA
========================================= */
.btn-copper {
    background: linear-gradient(
        135deg,
        #8a4b12,
        #d69646,
        #f3c37a
    );
    color: #3a1e0c;
    font-weight: 700;
    border-radius: 12px;
    padding: 12px 18px;
    border: none;

    box-shadow:
        0 6px 16px rgba(0,0,0,0.25),
        inset 0 1px 0 rgba(255,255,255,0.35);

    transition: all .3s ease;
}

.btn-copper:hover {
    transform: translateY(-2px);
    box-shadow:
        0 10px 26px rgba(0,0,0,0.35),
        inset 0 1px 0 rgba(255,255,255,0.45);
    color: #2a1509;
}

/* =========================================
   HİZMET DETAY – GÖRSEL BAKIR EFEKT
========================================= */
.service-detail-image {
    position: relative;
    border-radius: 18px;
    overflow: hidden;

    background: linear-gradient(
        135deg,
        rgba(184,115,51,0.18),
        rgba(255,255,255,0.35)
    );

    border: 1px solid rgba(184,115,51,0.45);

    box-shadow:
        0 12px 30px rgba(0,0,0,0.18),
        inset 0 0 0 rgba(255,255,255,0.25);

    margin-bottom: 18px;
}

.service-detail-image img {
    width: 100%;
    display: block;

    border-radius: 18px;

    /* Bakır tonu */
    filter:
        sepia(0.35)
        saturate(1.15)
        hue-rotate(-8deg)
        brightness(1.02);

    transition: transform .4s ease, filter .4s ease;
}

.service-detail-image:hover img {
    transform: scale(1.015);
    filter:
        sepia(0.45)
        saturate(1.25)
        hue-rotate(-10deg)
        brightness(1.05);
}

.service-detail-image::after {
    content: "";
    position: absolute;
    inset: 0;

    background: linear-gradient(
        120deg,
        rgba(255,255,255,0.18),
        rgba(184,115,51,0.25),
        rgba(255,255,255,0.12)
    );

    opacity: 0.45;
    pointer-events: none;
}

/* ======================================================
   BAKIR (COPPER) BUTON – GLOBAL
====================================================== */

.btn-copper,
.btn-primary,
.btn-info {
    background: linear-gradient(135deg, #8a4b12, #d69646, #f3c37a);
    border: none;
    color: #fff !important;
    font-weight: 600;
    border-radius: 10px;
    box-shadow: 0 6px 18px rgba(184,115,51,0.35);
    transition: all .25s ease;
}

/* Hover */
.btn-copper:hover,
.btn-primary:hover,
.btn-info:hover {
    background: linear-gradient(135deg, #6f3a0e, #c68138, #e6b46d);
    box-shadow: 0 10px 26px rgba(184,115,51,0.55);
    transform: translateY(-2px);
    color: #fff !important;
}

/* Active */
.btn-copper:active,
.btn-primary:active,
.btn-info:active {
    transform: translateY(0);
    box-shadow: 0 4px 12px rgba(184,115,51,0.4);
}

.product-card .btn {
    width: 100%;
    margin-top: 6px;
}

.product-detail .btn {
    padding: 14px 18px;
    font-size: 1rem;
}

/* ======================================================
   TÜM MAVİ BUTONLAR – ZORUNLU BAKIR OVERRIDE
====================================================== */

.btn-primary,
.btn-info,
.btn-outline-primary,
.btn-outline-info {
    background: linear-gradient(135deg, #8a4b12, #d69646, #f3c37a) !important;
    border-color: transparent !important;
    color: #fff !important;
    font-weight: 600;
    border-radius: 10px;
    box-shadow: 0 6px 18px rgba(184,115,51,0.35);
    transition: all .25s ease;
}

.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active,
.btn-info:hover,
.btn-info:focus,
.btn-info:active,
.btn-outline-primary:hover,
.btn-outline-primary:focus,
.btn-outline-primary:active,
.btn-outline-info:hover,
.btn-outline-info:focus,
.btn-outline-info:active {
    background: linear-gradient(135deg, #6f3a0e, #c68138, #e6b46d) !important;
    border-color: transparent !important;
    color: #fff !important;
    box-shadow: 0 10px 26px rgba(184,115,51,0.55);
    transform: translateY(-2px);
}

.btn-outline-primary {
    background: linear-gradient(135deg, #8a4b12, #d69646, #f3c37a) !important;
    border: none !important;
    color: #fff !important;
}

.product-card .btn,
.product-card-lg .btn {
    background: linear-gradient(135deg, #8a4b12, #d69646, #f3c37a) !important;
    border: none !important;
    color: #fff !important;
}

/* ======================================================
   DETAY BUTONU – BEYAZ / HOVER BAKIR
====================================================== */

/* Normal hali */
.btn-detail,
.product-card .btn-outline-primary {
    background: #ffffff !important;
    color: #333 !important;
    border: 1px solid #e0e0e0 !important;
    font-weight: 600;
    border-radius: 10px;
    box-shadow: none;
    transition: all .25s ease;
}

/* Hover / Focus */
.btn-detail:hover,
.product-card .btn-outline-primary:hover,
.btn-detail:focus,
.product-card .btn-outline-primary:focus {
    background: linear-gradient(135deg, #8a4b12, #d69646, #f3c37a) !important;
    color: #fff !important;
    border-color: transparent !important;
    box-shadow: 0 8px 22px rgba(184,115,51,0.45);
    transform: translateY(-2px);
}

/* ======================================================
   ÜRÜN DETAY – FİYAT BİLGİ KUTUSU (AÇIK BAKIR)
====================================================== */

.product-detail-price-note,
.price-contact-box,
.alert-info {
    background: rgba(184, 115, 51, 0.12) !important; /* açık bakır */
    border: 1px solid rgba(184, 115, 51, 0.35) !important;
    color: #6a3b12 !important;
    border-radius: 12px;
    font-weight: 500;
    padding: 14px 16px;
}

/* İçteki metin */
.product-detail-price-note strong,
.price-contact-box strong {
    color: #8a4b12;
    font-weight: 600;
}

/* ============================================
   HİZMET KARTI – ALT METİN ALANI HOVER BAKIR
============================================ */

/* Normal durum – beyaz */
.service-card .service-body {
    background: #ffffff;
    transition: background .25s ease, color .25s ease;
}

/* Hover – bakır zemin */
.service-card:hover .service-body {
    background: rgba(184, 115, 51, 0.12); /* açık bakır */
}

/* Başlık rengi hover’da biraz koyulaşsın */
.service-card:hover .service-body h5 {
    color: #7a3f12;
}

/* Açıklama metni */
.service-card:hover .service-body p {
    color: #5f3a18;
}

/* ============================================
   ÜRÜN KARTLARI – HOVER BAKIR ZEMİN
============================================ */

/* Normal durum – tamamen beyaz */
.product-card {
    background: #ffffff;
    transition: background .25s ease, border-color .25s ease, box-shadow .25s ease;
}

/* Hover – bakır iç zemin */
.product-card:hover {
    background: rgba(184,115,51,0.08); /* açık bakır */
    border-color: #b87333;
    box-shadow: 0 10px 24px rgba(0,0,0,0.12);
    transform: translateY(-4px);
}

/* Metin renkleri hover’da uyumlu */
.product-card:hover h5,
.product-card:hover .product-title {
    color: #7a3f12;
}

.product-card:hover p,
.product-card:hover .product-meta {
    color: #5f3a18;
}

/* Görsel hover’da hafif yaklaşsın */
.product-card:hover .product-img-wrap img {
    transform: scale(1.03);
    transition: transform .25s ease;
}

.product-card .btn-outline-primary,
.product-card .btn-outline-secondary {
    background: #ffffff;
    color: #333;
    border-color: #ddd;
}

.product-card .btn-outline-primary:hover,
.product-card .btn-outline-secondary:hover {
    background: linear-gradient(135deg, #8a4b12, #d69646, #f3c37a);
    color: #fff;
    border-color: #b87333;
}

.product-card .btn-primary {
    background: linear-gradient(135deg, #8a4b12, #d69646, #f3c37a);
    border: none;
    color: #fff;
}

.product-card .btn-primary:hover {
    filter: brightness(1.05);
}

/* =====================================================
   ÜRÜN KATEGORİLERİ – FINAL HOVER
   - Resim etrafı: BEYAZ (DEĞİŞMEZ)
   - Yazı altı alan: BAKIR
===================================================== */

/* Kart dışı */
.cat-box{
  border-radius: 14px;
  border: 1px solid #e6e6e6;
  transition: all .25s ease;
}

/* İç alan */
.cat-box .cat-inner{
  background: #fff;
  border-radius: 14px;
  padding: 12px;
  transition: background .25s ease;
}

/* RESİM – HER ZAMAN BEYAZ */
.cat-box .cat-img{
  background: #fff !important;
  border-radius: 12px;
  padding: 0;                 /* çerçeve hissi yok */
  border: none !important;
}

/* Hover genel */
.cat-box:hover{
  border-color: #b87333;
  box-shadow: 0 10px 24px rgba(0,0,0,0.12);
  transform: translateY(-4px);
}

/* Hover: SADECE yazıların olduğu alan bakır */
.cat-box:hover .cat-inner{
  background: rgba(184,115,51,0.12);
}

/* Hover: yazı renkleri */
.cat-box:hover h5{
  color: #7a3f12;
}

.cat-box:hover .cat-desc{
  color: #5f3a18;
}

/* =========================================================
   ÜRÜN KATEGORİLERİ – KIRMIZI ÇİZGİ KESİN ÇÖZÜM
========================================================= */

/* a etiketi MUTLAKA blok olsun */
a.cat-box{
    display: block;
    background: transparent !important;
    padding: 0 !important;
    margin: 0 !important;
    border: none !important;
}

/* İç kart */
.cat-box .cat-inner{
    background: #ffffff;
    border-radius: 14px;
    padding: 14px;
    height: 100%;
    transition: background .25s ease;
}

/* Hover'da SADECE iç alan bakır olsun */
.cat-box:hover .cat-inner{
    background: rgba(184,115,51,0.14);
}

/* Resim alanı ASLA bakır olmasın */
.cat-box .cat-img{
    background: #fff !important;
    border-radius: 10px;
}

/* Kırmızıyla işaretlenen ince boşlukların KÖKÜNÜ KES */
.cat-box::before,
.cat-box::after{
    content: none !important;
    display: none !important;
}

/* Bootstrap kolonlardan gelen olası çizgileri iptal */
.row > [class^="col-"]{
    background: transparent !important;
}

/* =========================================================
   ÜRÜN KATEGORİLERİ – PREMIUM HOVER (FINAL)
========================================================= */

a.cat-box{
    display: block;
    background: transparent;
    text-decoration: none;
}

/* İç kart */
.cat-box .cat-inner{
    background: #ffffff;
    border-radius: 14px;
    padding: 14px;
    height: 100%;
    position: relative;
    transition: 
        background .35s ease,
        box-shadow .35s ease,
        transform .35s ease;
}

/* Premium bakır gradient hover */
.cat-box:hover .cat-inner{
    background: linear-gradient(
        145deg,
        rgba(184,115,51,0.22),
        rgba(214,150,70,0.16),
        rgba(255,255,255,0.9)
    );
    box-shadow:
        0 10px 28px rgba(0,0,0,0.14),
        inset 0 1px 0 rgba(255,255,255,0.45);
    transform: translateY(-4px);
}

/* Başlık hover rengi */
.cat-box:hover h5{
    color: #8a4b12;
}

/* Açıklama hover rengi */
.cat-box:hover .cat-desc{
    color: #5a3a1e;
}

/* Resim ASLA etkilenmesin */
.cat-box .cat-img{
    background: #ffffff !important;
    border-radius: 10px;
    position: relative;
    z-index: 2;
}

/* =========================================================
   ÇİFT ÇERÇEVE SORUNU – NET ÇÖZÜM
========================================================= */

/* Dış kapsayıcıda HİÇBİR çerçeve olmasın */
.cat-box{
    border: none !important;
    box-shadow: none !important;
    background: transparent !important;
}

/* İç kart varsayılan */
.cat-box .cat-inner{
    border: 1px solid #e6e6e6;   /* TEK gri çerçeve */
    box-shadow: none;
    transition:
        border-color .3s ease,
        background .3s ease,
        box-shadow .3s ease,
        transform .3s ease;
}

/* Hover’da SADECE bu çerçeve bakır olsun */
.cat-box:hover .cat-inner{
    border-color: #b87333;       /* bakır */
    box-shadow:
        0 10px 26px rgba(0,0,0,0.14);
}

/* Alt gri çizgiyi tamamen öldür */
.cat-box:hover{
    box-shadow: none !important;
}

/* =========================================================
   MOBİL DOKUNMA EFEKTİ
========================================================= */

@media (hover: none) {

    .cat-box:active .cat-inner{
        background: linear-gradient(
            145deg,
            rgba(184,115,51,0.28),
            rgba(214,150,70,0.20)
        );
        box-shadow:
            0 6px 18px rgba(0,0,0,0.18);
        transform: scale(0.985);
    }

}

/* ===============================
   BAKIR ÇERÇEVE ÇİZGİSİNİ KALDIR
================================ */

/* Pseudo-element artık kenarlara yapışmasın */
.product-card::before,
.cat-box::before {
    inset: 6px;                 /* <-- ÇERÇEVEYİ GERİ ÇEK */
    border-radius: 14px;
    background: transparent;
    box-shadow: none;
}

/* Hover’da SADECE yumuşak iç bakır glow */
.product-card:hover::before,
.cat-box:hover::before {
    background: radial-gradient(
        circle at top,
        rgba(218,147,80,0.18),
        rgba(184,115,51,0.10),
        rgba(184,115,51,0.0)
    );
    opacity: 1;
}

/* ==================================================
   BLOG DETAIL – SOL GERÇEK SABİT TOC (FINAL)
================================================== */

/* SOL TOC – GERÇEK SABİT */
body.page-blog-detail .toc-fixed {
    position: fixed;
    top: calc(var(--header-height) + 96px);
    left: 24px;
    width: 280px;
    max-height: calc(100vh - var(--header-height) - 32px);
    overflow-y: auto;
    background:  var(--page-bg);
    border-left: 2px solid #e5e7eb;
    padding-left: 12px;
    z-index: 900; /* header üstte kalsın */
    font-size: .82rem;
    color: #555;
}

body.page-blog-detail .blog-scroll{
  margin-left:320px;
  padding-right:40px;
}

.toc-title {
    font-weight: 600;
    font-size: .8rem;
    margin-bottom: 10px;
    color: #444;
}

/* TOC link – normal */
.toc-fixed a {
    display: block;
    padding: 2px 0 2px 10px;
    color: #555;
    text-decoration: none;
    border-left: 2px solid transparent;
    transition: color .2s ease, border-color .2s ease;
}

/* TOC link – aktif (bakır bar) */
.toc-fixed a.active {
    color: #b87333;
    font-weight: 600;
    border-left: 2px solid #b87333; /* 🔥 SADECE BURADA BAKIR */
}

/* Hover – çok hafif bakır */
.toc-fixed a:hover {
    color: #333;
    border-left-color: rgba(184, 115, 51, 0.35);
}

/* PDF İNDİR – NORMAL */
.toc-fixed button {
    background: transparent;
    color: #555;
    border: 1px solid #ccc;
    transition: 
        background-color .2s ease,
        border-color .2s ease,
        color .2s ease;
}

/* PDF İNDİR – HOVER (ÜRÜN BUTONLARI GİBİ) */
.toc-fixed button:hover {
    background: #b87333;     /* bakır */
    border-color: #b87333;
    color: #fff;
}

@media (max-width: 992px) {
    body.page-blog-detail .toc-fixed {
        display: none !important;
    }

    body.page-blog-detail .blog-scroll {
        margin-left: 0;
        padding-right: 0;
    }
}

/* ================================
   PRINT / PDF – BLOG DETAIL
================================ */
@media print {

    /* GENEL */
    body {
        background: #fff !important;
        color: #000 !important;
    }

    /* NORMAL HEADER / FOOTER / TOC KAPALI */
    header,
    nav,
    .toc-fixed,
    #readingProgress,
    .btn,
    .breadcrumb,
    .site-footer {
        display: none !important;
    }

    /* 🔥 LOGO – MUTLAKA AÇ */
    .print-logo {
        display: block !important;
        text-align: center;
        margin: 0 0 24px 0;
    }

    .print-logo img {
        max-width: 120px;
        height: auto;
    }

    /* BLOG İÇERİK */
    .blog-content {
        max-width: 100% !important;
        margin: 0 !important;
        font-size: 11.5pt;
        line-height: 1.6;
    }

    /* 🔥 ALT İLETİŞİM */
    .print-footer {
        display: block !important;
        margin-top: 40px;
        padding-top: 16px;
        border-top: 1px solid #ccc;
        font-size: 9pt;
        color: #333;
    }

	    /* PRINT HEADER */
    .print-header {
        display: flex !important;
        align-items: center;
        gap: 20px;
        margin-bottom: 12px;
    }

    .print-header-left img {
        max-width: 120px; /* logo küçük ve kurumsal */
        height: auto;
    }

    .print-header-right h1 {
        font-size: 18pt;
        font-weight: 600;
        line-height: 1.25;
        margin: 0;
        color: #000;
    }

    /* İNCE AYIRICI */
    .print-divider {
        display: block !important;
        border: none;
        border-top: 1px solid #bbb;
        margin: 10px 0 24px;
    }

    /* EKRAN BAŞLIĞINI PDF’TE GİZLE */
    .blog-title {
        display: none !important;
    }
}

/* EKRANDA GÖRÜNMEZ */
.print-header,
.print-divider {
    display: none;
}

/* EKRANDA ASLA GÖRÜNMEZ */
.print-logo,
.print-footer {
    display: none;
}