/* ============================================================================
   Vera Soğutma — Tema Eklemeleri (custom.css SONRASINDA yüklenir)
   Axiron değişkenleri kullanılır: --primary-color, --accent-color, --bg-color,
   --text-color, --white-color, --divider-color, --accent-font, --default-font
   ============================================================================ */


/************************************/
/***   Product Category Variant   ***/
/************************************/

.our-product-categories{
    padding: 120px 0;
}

/* Card box */
.project-item.product-category-item{
    position: relative;
    background: var(--white-color);
    border: 1px solid var(--divider-color);
    display: grid;
    grid-template-columns: .82fr 1.18fr;
    padding: 0;
    height: calc(100% - 30px);
    margin-bottom: 30px;
    overflow: hidden;
    transition: transform 0.4s ease-in-out, box-shadow 0.4s ease-in-out;
}

/* Top accent stripe — design signature */
.project-item.product-category-item::before{
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 60px;
    height: 3px;
    background: var(--accent-color);
    z-index: 3;
    transition: width 0.5s cubic-bezier(.4,0,.2,1);
}

.project-item.product-category-item:hover::before{
    width: 100%;
}

.project-item.product-category-item:hover{
    transform: translateY(-5px);
    box-shadow: 0 24px 60px rgba(0,0,0,0.10);
}

/* Image side */
.project-item.product-category-item .project-item-image{
    position: relative;
    height: 100%;
    overflow: hidden;
}

.project-item.product-category-item .project-item-image figure,
.project-item.product-category-item .project-item-image figure a{
    display: block;
    height: 100%;
}

.project-item.product-category-item .project-item-image img{
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: all 0.6s ease-in-out;
}

.project-item.product-category-item:hover .project-item-image img{
    transform: scale(1.05);
}

/* Image badge — floating tag bottom-left of image */
.pc-image-badge{
    position: absolute;
    left: 18px;
    bottom: 18px;
    background: var(--white-color);
    color: var(--primary-color);
    font-family: var(--accent-font);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.02em;
    padding: 7px 12px;
    border-radius: 4px;
    border-left: 2px solid var(--accent-color);
    z-index: 2;
}

/* Content side */
.project-item.product-category-item .project-item-content{
    background: var(--white-color);
    padding: 32px 32px 28px;
    display: flex;
    flex-direction: column;
    gap: 0;
}

/* Eyebrow with line accent */
.pc-eyebrow{
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-family: var(--accent-font);
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.18em;
    color: var(--accent-color);
    margin-bottom: 12px;
}

.pc-eyebrow i{
    display: inline-block;
    width: 22px;
    height: 1.5px;
    background: var(--accent-color);
}

/* Title — slightly more compact */
.project-item.product-category-item .project-item-content h3{
    font-size: 24px;
    line-height: 1.2em;
    margin: 0 0 4px;
}

.project-item.product-category-item .project-item-content h3 a{
    color: var(--primary-color);
    transition: color 0.3s ease-in-out;
}

.project-item.product-category-item:hover .project-item-content h3 a{
    color: var(--accent-color);
}

/* Italic tagline under title */
.pc-tagline{
    font-family: var(--accent-font);
    font-style: italic;
    font-weight: 400;
    font-size: 15px;
    color: var(--accent-color);
    line-height: 1.4em;
    margin: 0 0 16px;
}

/* Description — tighter */
.pc-desc{
    font-size: 14.5px;
    line-height: 1.55em;
    color: var(--text-color);
    margin: 0 0 18px;
}

/* Mini-stats inline strip */
.pc-stats{
    list-style: none;
    margin: 0 0 16px;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
}

.pc-stats li{
    position: relative;
    font-size: 13px;
    color: var(--text-color);
    line-height: 1.2em;
    padding: 0;
    padding-right: 14px;
}

.pc-stats li::before{
    display: none; /* kill default bullet */
}

.pc-stats li::after{
    content: '';
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 3px;
    height: 3px;
    background: var(--accent-color);
    border-radius: 50%;
}

.pc-stats li:last-child{
    padding-right: 0;
}

.pc-stats li:last-child::after{
    display: none;
}

.pc-stats li strong{
    color: var(--primary-color);
    font-family: var(--accent-font);
    font-weight: 600;
    font-size: 14px;
    margin-right: 3px;
}

/* Hairline divider */
.pc-divider{
    display: block;
    width: 100%;
    height: 1px;
    background: var(--divider-color);
    margin: 0 0 18px;
}

/* Model chips — clickable pills */
.pc-models{
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 20px;
}

.pc-models a{
    display: inline-block;
    font-family: var(--accent-font);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.04em;
    color: var(--primary-color);
    background: var(--bg-color);
    border: 1px solid transparent;
    padding: 6px 12px;
    border-radius: 100px;
    transition: all 0.3s ease-in-out;
}

.pc-models a:hover{
    background: var(--accent-color);
    color: var(--white-color);
    border-color: var(--accent-color);
}

/* CTA */
.product-cat-cta{
    margin-top: auto;
    align-self: flex-start;
    color: var(--accent-color);
    font-family: var(--accent-font);
    font-weight: 600;
    font-size: 13px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    border-bottom: 1.5px solid var(--accent-color);
    padding-bottom: 4px;
    transition: gap 0.3s ease-in-out, color 0.3s ease-in-out, border-color 0.3s ease-in-out;
}

.product-cat-cta .arrow{
    transition: transform 0.3s ease-in-out;
}

.product-cat-cta:hover{
    color: var(--primary-color);
    border-color: var(--primary-color);
    gap: 12px;
}

.product-cat-cta:hover .arrow{
    transform: translateX(3px);
}

/* Responsive — stack vertically on mobile */
@media only screen and (max-width: 991px){
    .project-item.product-category-item{
        grid-template-columns: .9fr 1.1fr;
    }
    .project-item.product-category-item .project-item-content{
        padding: 24px;
    }
    .project-item.product-category-item .project-item-content h3{
        font-size: 20px;
    }
}

@media only screen and (max-width: 767px){
    .our-product-categories{
        padding: 60px 0;
    }
    .project-item.product-category-item{
        grid-template-columns: 1fr;
    }
    .project-item.product-category-item .project-item-image{
        aspect-ratio: 16/10;
    }
    .project-item.product-category-item .project-item-content{
        padding: 22px 20px;
    }
    .pc-image-badge{
        left: 14px;
        bottom: 14px;
        font-size: 11px;
    }
    .pc-stats{
        gap: 10px;
    }
}

/* 1. Üstteki kırmızı accent stripe'ı kaldır */
.project-item.product-category-item::before{
    display: none;
}

/* 2. Görseli kartın kenarına yapışık yap (yukarı, aşağı, sola) */
.project-item.product-category-item{
    padding: 0;
    align-items: stretch;
}

.project-item.product-category-item .project-item-image{
    margin: 0;
    padding: 0;
    overflow: hidden;
}

.project-item.product-category-item .project-item-image figure,
.project-item.product-category-item .project-item-image figure a,
.project-item.product-category-item .project-item-image img{
    margin: 0;
    padding: 0;
    display: block;
    width: 100%;
    height: 100%;
}

/* Görsel artık üstte kart sınırına yapışacağı için, sol-üst köşesi 
   kartın border-radius'unu takip etmeli — pürüzsüz kavis için: */
.project-item.product-category-item{
    overflow: hidden; /* zaten vardı ama explicit olsun */
}

/************************************/
/***   Vera — Ürün Kart Rozetleri  ***/
/************************************/
/* urun-kategori.aspx repeater'ında kullanılan ek rozetler (uk-badge-popular/yeni sayfa içinde tanımlı) */
.uk-badge-premium{ background: var(--accent-color); }
.uk-badge-new{ background: #00773c; }
.uk-badge-frigomat{ background: var(--primary-color); }
.uk-badge-cross{
    position: absolute;
    top: 18px;
    right: 18px;
    background: var(--white-color);
    color: var(--primary-color);
    font-family: var(--accent-font);
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    padding: 6px 12px;
    border-radius: 4px;
    border-left: 2px solid var(--accent-color);
    z-index: 2;
}

/************************************/
/***   Vera — Grid satır boşluğu   ***/
/************************************/
.vera-row-gap > [class*="col-"]{ margin-bottom: 30px; }

/************************************/
/***   Vera — Spec Chip'leri       ***/
/************************************/
.vera-specs{
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 16px;
}
.vera-specs span{
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-family: var(--accent-font);
    font-size: 12px;
    font-weight: 500;
    color: var(--text-color);
    padding: 5px 12px;
    background: var(--bg-color);
    border-radius: 100px;
}
.vera-specs span i{ color: var(--accent-color); font-size: 11px; }
.light-section .vera-specs span,
.service-item-body .vera-specs span{ background: var(--bg-color); }

/************************************/
/***   Vera — Hızlı Özellik Kutusu ***/
/***   (urun-detay: .udh-quick)    ***/
/************************************/
.udh-quick{
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
    padding: 24px;
    background: var(--bg-color);
    border-radius: 14px;
    margin: 30px 0;
}
.udh-quick-item{
    display: flex;
    align-items: flex-start;
    gap: 12px;
    font-family: var(--accent-font);
    font-size: 15px;
    font-weight: 500;
    color: var(--primary-color);
    line-height: 1.4em;
}
.udh-quick-item i{ color: var(--accent-color); margin-top: 3px; flex-shrink: 0; }
.udh-price{
    display: flex;
    align-items: baseline;
    gap: 10px;
    margin-bottom: 30px;
}
.udh-price-value{
    font-family: var(--accent-font);
    font-size: 30px;
    font-weight: 600;
    color: var(--primary-color);
    line-height: 1em;
}

/************************************/
/***   Vera — Boyut Kartları       ***/
/************************************/
.ud-size{
    position: relative;
    background: var(--white-color);
    border: 1px solid var(--divider-color);
    border-radius: 14px;
    padding: 30px 24px;
    text-align: center;
    height: 100%;
    transition: all 0.4s ease-in-out;
}
.ud-size:hover{ border-color: var(--accent-color); transform: translateY(-5px); }
.ud-size.popular{ border-color: var(--accent-color); }
.ud-size-badge{
    position: absolute;
    top: -12px;
    left: 50%;
    transform: translateX(-50%);
    background: var(--accent-color);
    color: var(--white-color);
    font-family: var(--accent-font);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    padding: 5px 14px;
    border-radius: 100px;
}
.ud-size-name{ font-family: var(--accent-font); font-size: 24px; font-weight: 600; color: var(--primary-color); }
.ud-size-dim{ font-family: var(--accent-font); font-size: 16px; font-weight: 500; color: var(--accent-color); margin: 6px 0 14px; }
.ud-size-olcu{ font-size: 13px; color: var(--text-color); margin-bottom: 14px; }
.ud-size-price{ font-family: var(--accent-font); font-weight: 600; color: var(--primary-color); margin-bottom: 18px; }

/************************************/
/***   Vera — Proje Künyesi        ***/
/************************************/
.pd-info-card{
    background: var(--white-color);
    border-radius: 14px;
    padding: 30px;
    margin-top: 30px;
}
.pd-info-card h3{ font-size: 20px; margin-bottom: 15px; }
.pd-info-item{
    display: flex;
    justify-content: space-between;
    gap: 16px;
    padding: 12px 0;
    border-bottom: 1px solid var(--divider-color);
    font-size: 15px;
}
.pd-info-item:last-child{ border-bottom: 0; }
.pd-info-label{ color: var(--text-color); }
.pd-info-value{ font-family: var(--accent-font); font-weight: 500; color: var(--primary-color); text-align: right; }

/************************************/
/***   Vera — Frigomat Detay       ***/
/************************************/
.fd-qs-item{
    display: flex;
    align-items: flex-start;
    gap: 12px;
}
.fd-qs-item i{ color: var(--accent-color); margin-top: 4px; }
.fd-qs-item strong{
    display: block;
    font-family: var(--accent-font);
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-color);
}
.fd-qs-item span{ display: block; font-family: var(--accent-font); font-size: 16px; font-weight: 500; color: var(--primary-color); }

.fd-spec-table{
    background: var(--white-color);
    border: 1px solid var(--divider-color);
    border-radius: 14px;
    overflow: hidden;
}
.fd-spec-row{
    display: grid;
    grid-template-columns: 240px 1fr;
    align-items: center;
    padding: 16px 24px;
    border-bottom: 1px solid var(--divider-color);
}
.fd-spec-row:last-child{ border-bottom: 0; }
.fd-spec-row:nth-child(even){ background: var(--bg-color); }
.fd-spec-label{ display: flex; align-items: center; gap: 10px; font-size: 14px; color: var(--text-color); }
.fd-spec-label i{ color: var(--accent-color); }
.fd-spec-value{ font-family: var(--accent-font); font-weight: 500; color: var(--primary-color); }
.fd-ek-item{
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 18px;
    background: var(--white-color);
    border: 1px solid var(--divider-color);
    border-radius: 14px;
    font-size: 14px;
}
.fd-ek-item i{ color: var(--accent-color); }

/* Frigomat İtalya rozeti */
.fg-flag{
    position: absolute;
    top: 18px;
    right: 18px;
    z-index: 2;
    padding: 3px;
    border-radius: 100px;
    background: linear-gradient(90deg, #008c45 33%, #ffffff 33% 66%, #cd212a 66%);
}
.fg-flag span{
    display: inline-block;
    background: var(--white-color);
    color: var(--primary-color);
    font-family: var(--accent-font);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    padding: 4px 12px;
    border-radius: 100px;
}
/* Frigomat PNG görselleri (transparan) için açık zemin */
.service-item.fg-item{ background: var(--bg-color); }
.service-item.fg-item .service-item-image img{
    object-fit: contain;
    padding: 40px 40px 160px;
    background: var(--bg-color);
}

/************************************/
/***   Vera — Form Mesajları       ***/
/************************************/
.form-msg{
    padding: 14px 18px;
    border-radius: 5px;
    margin-bottom: 24px;
    font-size: 15px;
}
.form-msg-ok{ background: #e6f4ea; color: #1e6b3a; border: 1px solid #b8dfc5; }
.form-msg-err{ background: #fdecec; color: #8f1d1d; border: 1px solid #f3c2c2; }
.newsletter-msg{ margin-top: 10px; font-size: 14px; }
.newsletter-ok{ color: #7ed49a; }
.newsletter-err{ color: #ff8a8a; }
.contact-form .form-check{ margin-bottom: 24px; font-size: 14px; }
.contact-form .form-check a{ color: var(--accent-color); text-decoration: underline; text-underline-offset: 3px; }
.contact-form select.form-control{ appearance: none; }

/************************************/
/***   Vera — WhatsApp Float       ***/
/************************************/
.wa-float{
    position: fixed;
    right: 24px;
    bottom: 24px;
    width: 58px;
    height: 58px;
    background: #25D366;
    color: var(--white-color);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 10px 30px rgba(37,211,102,0.35);
    font-size: 28px;
    z-index: 99;
    transition: transform 0.3s ease-in-out;
}
.wa-float:hover{ transform: scale(1.08); color: var(--white-color); }

/************************************/
/***   Vera — Yardımcılar          ***/
/************************************/
.vera-il-list{ columns: 4; column-gap: 30px; list-style: none; margin: 0; padding: 0; }
.vera-il-list li{ break-inside: avoid; padding: 10px 0; border-bottom: 1px solid var(--divider-color); }
.vera-il-list li a{ font-family: var(--accent-font); font-weight: 500; color: var(--primary-color); transition: color 0.3s; }
.vera-il-list li a:hover{ color: var(--accent-color); }
@media (max-width: 991px){ .vera-il-list{ columns: 3; } }
@media (max-width: 575px){ .vera-il-list{ columns: 2; } }
.page-category-list ul li a.active{ color: var(--accent-color); }
.post-entry h2, .post-entry h3{ margin-top: 30px; }

/************************************/
/***   Vera — Axiron FontAwesome   ***/
/***   icon-box içinde <i> desteği ***/
/************************************/
/* Axiron icon-box'ları <img> bekler; DB'den gelen IconClass için <i> varyantı */
.service-capability-item .icon-box i,
.contact-info-item .icon-box i,
.faq-contact-item .icon-box i,
.approach-item-header .icon-box i,
.sidebar-cta-box-header .icon-box i{
    position: relative;
    z-index: 1;
    color: var(--white-color);
    font-size: 18px;
    line-height: 1;
}
.approach-item-header .icon-box i{ font-size: 16px; }
.project-category-item-header i{
    color: var(--accent-color);
    font-size: 20px;
    width: 24px;
    text-align: center;
}
.service-item-content h2 a i{
    color: var(--accent-color);
    font-size: 16px;
    margin-right: 4px;
}

/************************************/
/***   Vera — Blog kategori filtre ***/
/************************************/
/* page-category-list'in yatay (pill) varyantı */
.page-category-list.blog-category-filter{
    background: transparent;
    border-radius: 0;
    margin-bottom: 0;
    overflow: visible;
}
.page-category-list.blog-category-filter ul{
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
    padding: 0;
}
.page-category-list.blog-category-filter ul li{
    border: none;
    margin: 0;
    padding: 0;
}
.page-category-list.blog-category-filter ul li a{
    display: inline-block;
    font-family: var(--accent-font);
    font-size: 14px;
    font-weight: 500;
    color: var(--primary-color);
    background: var(--white-color);
    border: 1px solid var(--divider-color);
    border-radius: 100px;
    padding: 10px 22px;
    text-transform: none;
}
.page-category-list.blog-category-filter ul li a::before{ display: none; }
.page-category-list.blog-category-filter ul li a:hover,
.page-category-list.blog-category-filter ul li a.active{
    background: var(--accent-color);
    border-color: var(--accent-color);
    color: var(--white-color);
}

/************************************/
/***   Vera — Newsletter varyant   ***/
/************************************/
/* Blog sayfası: dark-section içinde tam genişlik */
.our-features .footer-newsletter-box{ display: block; }
.our-features .footer-newsletter-box .footer-newsletter-form{ width: 100%; max-width: 520px; }
/* 404 sayfası: açık zemin üstünde arama kutusu */
.error-page .footer-newsletter-form{
    width: 100%;
    max-width: 520px;
    margin: 0 auto 30px;
}
.error-page .footer-newsletter-form .form-group{ background: var(--bg-color); }
.error-page .footer-newsletter-form .form-group .form-control{ color: var(--primary-color); }
.error-page .footer-newsletter-form .form-group .form-control::placeholder{ color: var(--primary-color); }
.error-page .footer-newsletter-form .form-group .newsletter-btn:hover{ background: var(--primary-color); }
.error-page .footer-newsletter-form .form-group .newsletter-btn:hover img{ filter: none; }

/************************************/
/***   Vera — Çözüm ürün kartı     ***/
/************************************/
a.service-work-item{ display: block; color: inherit; }
a.service-work-item:hover .service-work-item-content h3{ color: var(--accent-color); }
.service-work-item-content h3{ transition: color 0.3s ease-in-out; }

/************************************/
/***   Vera — Frigomat ek          ***/
/************************************/
.fg-flag-static{
    position: static;
    display: inline-block;
    margin-left: 10px;
    vertical-align: middle;
}
.fg-single-image{ position: relative; }
.fd-ek-list{
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}
@media only screen and (max-width: 767px){
    .fd-ek-list{ grid-template-columns: 1fr; }
}
.sidebar-cta-content-box .btn-default{ margin-top: 20px; }

/* Ürün kartı rozeti — service-item (Frigomat kategori) içinde */
.service-item-image .uk-badge{
    position: absolute;
    top: 18px;
    left: 18px;
    z-index: 2;
    color: var(--white-color);
    background: var(--accent-color);
    font-family: var(--accent-font);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    padding: 6px 12px;
    border-radius: 4px;
}
.service-item-image .uk-badge-popular{ background: var(--primary-color); }

/* Section footer text içindeki HyperLink */
.section-footer-text p a{ color: var(--accent-color); }

/* Teklif formu radyo grubu */
.contact-form .form-check span{ margin-right: 14px; font-weight: 500; color: var(--primary-color); }
.contact-form .form-check input[type="radio"],
.contact-form .form-check input[type="checkbox"]{ margin-right: 6px; accent-color: var(--accent-color); }
.contact-form .form-check label{ margin-right: 16px; cursor: pointer; }

/* service-single içindeki SSS bloğu (Axiron'da sadece .page-faqs altında tanımlı) */
.service-single-content .page-single-faqs{ margin-top: 60px; }

/************************************/
/***   Vera — Kategori Kartı v2    ***/
/***   (.vera-cat-item)            ***/
/************************************/
/* Anasayfa + Ürünler: 3 sütunlu, görsel üstte, Axiron project-item'dan bağımsız.
   Tokenlar custom.css ile aynı: 14px radius, --accent-color, --accent-font, --divider-color */
.our-product-categories .row{ row-gap: 30px; }

.vera-cat-item{
    position: relative;
    height: 100%;
    display: flex;
    flex-direction: column;
    background: var(--white-color);
    border: 1px solid var(--divider-color);
    border-radius: 14px;
    overflow: hidden;
    transition: transform 0.4s ease-in-out, box-shadow 0.4s ease-in-out, border-color 0.4s ease-in-out;
}
.vera-cat-item::after{
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 3px;
    background: var(--accent-color);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.5s cubic-bezier(.4,0,.2,1);
}
.vera-cat-item:hover{
    transform: translateY(-6px);
    border-color: transparent;
    box-shadow: 0 30px 60px rgba(0,0,0,0.10);
}
.vera-cat-item:hover::after{ transform: scaleX(1); }

/* Görsel */
.vera-cat-image{
    position: relative;
    overflow: hidden;
}
.vera-cat-image figure{
    display: block;
    margin: 0;
}
.vera-cat-image figure a{
    display: block;
    cursor: none;
}
.vera-cat-image img{
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    transition: transform 0.7s ease-in-out;
}
.vera-cat-item:hover .vera-cat-image img{ transform: scale(1.06); }

.vera-cat-number{
    position: absolute;
    top: 16px;
    left: 16px;
    z-index: 2;
    min-width: 40px;
    height: 40px;
    padding: 0 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--accent-color);
    color: var(--white-color);
    font-family: var(--accent-font);
    font-size: 15px;
    font-weight: 600;
    border-radius: 8px;
}
.vera-cat-count{
    position: absolute;
    right: 16px;
    bottom: 16px;
    z-index: 2;
    background: var(--white-color);
    color: var(--primary-color);
    font-family: var(--accent-font);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.02em;
    padding: 7px 12px;
    border-radius: 6px;
    border-left: 2px solid var(--accent-color);
}

/* Gövde */
.vera-cat-body{
    display: flex;
    flex-direction: column;
    flex: 1;
    padding: 28px 28px 26px;
}
.vera-cat-slogan{
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-family: var(--accent-font);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--accent-color);
    margin-bottom: 12px;
}
.vera-cat-slogan::before{
    content: '';
    display: inline-block;
    width: 22px;
    height: 1.5px;
    background: var(--accent-color);
}
.vera-cat-body h3{
    font-size: 22px;
    line-height: 1.2em;
    margin: 0 0 12px;
}
.vera-cat-body h3 a{
    color: var(--primary-color);
    transition: color 0.3s ease-in-out;
}
.vera-cat-item:hover .vera-cat-body h3 a{ color: var(--accent-color); }
.vera-cat-body p{
    font-size: 15px;
    line-height: 1.6em;
    color: var(--text-color);
    margin: 0 0 20px;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Model çipleri */
.vera-cat-models{
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin: 0 0 22px;
    padding: 0;
}
.vera-cat-models li{
    font-family: var(--accent-font);
    font-size: 12.5px;
    font-weight: 500;
    color: var(--primary-color);
    background: var(--bg-color);
    border-radius: 100px;
    padding: 6px 12px;
    line-height: 1.2em;
}

/* Alt satır */
.vera-cat-footer{
    margin-top: auto;
    padding-top: 18px;
    border-top: 1px solid var(--divider-color);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}
.vera-cat-footer .readmore-btn{ font-size: 15px; }
.vera-cat-footer .vera-cat-temp{
    font-family: var(--accent-font);
    font-size: 13px;
    font-weight: 500;
    color: var(--text-color);
}

@media only screen and (max-width: 991px){
    .vera-cat-body{ padding: 24px; }
    .vera-cat-body h3{ font-size: 20px; }
}

/* Frigomat varyantı: transparan PNG ürün görselleri için açık zemin + contain */
.vera-cat-item.fg .vera-cat-image{ background: var(--bg-color); }
.vera-cat-item.fg .vera-cat-image img{
    object-fit: contain;
    padding: 28px 28px 34px;
}
.vera-cat-item.fg .vera-cat-number{
    background: var(--primary-color);
    font-size: 12px;
    letter-spacing: 0.04em;
}
.vera-cat-badge{
    position: absolute;
    top: 16px;
    right: 16px;
    z-index: 2;
    background: var(--accent-color);
    color: var(--white-color);
    font-family: var(--accent-font);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    padding: 6px 12px;
    border-radius: 6px;
}
.vera-cat-models li i{
    color: var(--accent-color);
    font-size: 11px;
    margin-right: 5px;
}
/* Model çipi link (gerçek ürün adı → ürün detay sayfası) */
.vera-cat-models li a{
    color: inherit;
    text-decoration: none;
    transition: color 0.3s ease;
}
.vera-cat-models li:hover{ background: rgba(193,39,45,0.08); }
.vera-cat-models li a:hover{ color: var(--accent-color); }

/* ==============================================
   Anasayfa blog kartları (blog hub kartlarıyla aynı — css/blog.css)
   ============================================== */
.our-blog .blog-kartlar{ row-gap: 30px; }
.our-blog .section-row .btn-default{ margin-bottom: 6px; }
@media(max-width: 991px){ .our-blog .section-row .text-lg-end{ margin-top: 16px; } }

/* ==============================================
   Ürün kartı (.ui-kart) ve metin link (.btn-text-link)
   Ürün detay "İlgili ürünler" ile anasayfa "Öne Çıkan Ürünler" ortak kullanır
   (eski yeri: css/urun-detay.css SECTION 6)
   ============================================== */
.btn-text-link{
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: var(--accent-font);
    font-size: 15px;
    font-weight: 500;
    color: var(--primary-color);
    text-decoration: none;
    transition: color 0.3s ease;
}

.btn-text-link span{
    color: var(--accent-color);
    transition: transform 0.3s ease;
}

.btn-text-link:hover{
    color: var(--accent-color);
}

.btn-text-link:hover span{
    transform: translateX(4px);
}

.ui-kart{
    display: block;
    background: var(--white-color);
    border: 1px solid var(--divider-color);
    border-radius: 12px;
    overflow: hidden;
    text-decoration: none;
    color: inherit;
    height: 100%;
    transition: all 0.4s ease;
}

.ui-kart:hover{
    transform: translateY(-4px);
    box-shadow: 0 18px 36px rgba(0,0,0,0.08);
    border-color: var(--accent-color);
}

.uik-image{
    aspect-ratio: 4/3;
    overflow: hidden;
}

.uik-image figure{
    margin: 0;
    width: 100%;
    height: 100%;
}

.uik-image img{
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.6s ease;
}

.ui-kart:hover .uik-image img{
    transform: scale(1.06);
}

.uik-body{
    padding: 20px 22px 20px;
}

.uik-body h3{
    font-size: 17px;
    color: var(--primary-color);
    margin-bottom: 8px;
    line-height: 1.3em;
    letter-spacing: -0.01em;
    transition: color 0.3s ease;
}

.ui-kart:hover .uik-body h3{
    color: var(--accent-color);
}

.uik-body p{
    font-size: 13px;
    line-height: 1.6em;
    color: var(--text-color);
    margin-bottom: 14px;
    min-height: 42px;
}

.uik-arrow{
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-family: var(--accent-font);
    font-size: 12.5px;
    font-weight: 600;
    color: var(--accent-color);
    transition: gap 0.3s ease;
}

.ui-kart:hover .uik-arrow{
    gap: 10px;
}

/* Kart üstünde kategori etiketi (anasayfa) */
.uik-image{ position: relative; }
.uik-kat{
    position: absolute;
    top: 14px;
    left: 14px;
    z-index: 2;
    padding: 5px 12px;
    background: rgba(20,20,24,0.78);
    color: var(--white-color);
    font-family: var(--accent-font);
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    border-radius: 4px;
    backdrop-filter: blur(3px);
}

/* Anasayfa — Öne Çıkan Ürünler */
.one-cikan-urunler .one-cikan-kartlar{ row-gap: 24px; }
@media(max-width: 991px){
    .one-cikan-urunler .text-lg-end{ margin-top: 10px; }
}

/* ==============================================
   Referans kartı (.project-card) ve 4'lü ızgara (.projects-grid)
   Referanslar sayfası ile anasayfa "Referans Projeler" ortak kullanır
   (eski yeri: css/projeler.css SECTION 3)
   ============================================== */
.projects-grid{
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
}

@media(max-width: 1199px){
    .projects-grid{
        grid-template-columns: repeat(3, 1fr);
    }
}

@media(max-width: 991px){
    .projects-grid{
        grid-template-columns: repeat(2, 1fr);
        gap: 18px;
    }
}

@media(max-width: 575px){
    .projects-grid{
        grid-template-columns: 1fr;
    }
}

.project-card{
    display: block;
    text-decoration: none;
    color: inherit;
    background: var(--white-color);
    border: 1px solid var(--divider-color);
    border-radius: 10px;
    overflow: hidden;
    transition: all 0.4s ease;
    position: relative;
}

.project-card:hover{
    border-color: var(--accent-color);
    transform: translateY(-6px);
    box-shadow: 0 20px 50px rgba(0,0,0,0.10);
}

.proj-image{
    position: relative;
    aspect-ratio: 4/3;
    overflow: hidden;
}

.proj-image img{
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.6s ease;
}

.project-card:hover .proj-image img{
    transform: scale(1.07);
}

.proj-sector-pill{
    position: absolute;
    top: 14px;
    left: 14px;
    background: var(--white-color);
    color: var(--accent-color);
    font-family: var(--accent-font);
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    padding: 6px 12px;
    border-radius: 4px;
    z-index: 2;
}

.proj-flag{
    position: absolute;
    top: 14px;
    right: 14px;
    background: rgba(255,255,255,0.95);
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    z-index: 2;
    box-shadow: 0 4px 12px rgba(0,0,0,0.10);
}

.proj-featured-badge{
    position: absolute;
    bottom: 14px;
    right: 14px;
    background: var(--accent-color);
    color: var(--white-color);
    font-family: var(--accent-font);
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    padding: 6px 12px;
    border-radius: 4px;
    z-index: 2;
    box-shadow: 0 4px 12px rgba(193,39,45,0.30);
}

.proj-featured{
    border: 2px solid var(--accent-color);
}

.proj-content{
    padding: 22px 24px 22px;
}

.proj-content h3{
    font-size: 19px;
    color: var(--primary-color);
    margin-bottom: 12px;
    line-height: 1.3em;
    transition: color 0.3s ease;
    letter-spacing: -0.01em;
}

.project-card:hover .proj-content h3{
    color: var(--accent-color);
}

.proj-meta{
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
}

.proj-meta span{
    font-family: var(--accent-font);
    font-size: 12.5px;
    color: var(--text-color);
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.proj-meta i{
    font-size: 11px;
    color: var(--accent-color);
}

/* Anasayfa — Referans Projeler */
.our-projects .anasayfa-projeler{ margin-top: 10px; }

/* Breadcrumb ayırıcı: tema paketindeki bootstrap.min.css'de varsayılan "/" yerine
   "https://html.awaikenthemes.com/" yazılmıştı (Anasayfa › [adres] › Kurumsal). Sabitlenir. */
.breadcrumb{ --bs-breadcrumb-divider: "/"; }

/* Dil değiştirici: üst barda iki bölmeli TR | EN anahtarı (etkin dil kırmızı) */
.vs-dil{ display: inline-flex; align-items: center; gap: 2px; padding: 3px 3px 3px 10px; margin-left: 16px; border-radius: 30px; background: var(--bg-color); border: 1px solid var(--divider-color); flex-shrink: 0; }
.vs-dil .vs-dil-ikon{ font-size: 13px; color: rgba(0,0,0,0.45); margin-right: 6px; }
.vs-dil a, .vs-dil span{ display: inline-flex; align-items: center; justify-content: center; min-width: 42px; height: 32px; padding: 0 12px; border-radius: 30px; font-family: var(--accent-font); font-weight: 600; font-size: 14px; letter-spacing: 0.05em; line-height: 1; color: rgba(0,0,0,0.55); transition: color 0.25s, background 0.25s; }
.vs-dil a:hover{ color: var(--primary-color); background: rgba(0,0,0,0.05); }
.vs-dil .active{ background: var(--accent-color); color: var(--white-color); box-shadow: 0 4px 12px rgba(252,16,14,0.3); }
@media (max-width: 991px){
    .vs-dil{ margin-left: auto; margin-right: 12px; }
    .vs-dil a, .vs-dil span{ min-width: 38px; height: 30px; padding: 0 10px; font-size: 13px; }
}
@media (max-width: 575px){
    .vs-dil{ padding-left: 3px; }
    .vs-dil .vs-dil-ikon{ display: none; }
}

/* Bölgeler hub — bölge kartları (görsel + il çipleri) */
.bolgeler-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:24px; }
@media(max-width:1199px){ .bolgeler-grid{ grid-template-columns:repeat(2,1fr); } }
@media(max-width:767px){ .bolgeler-grid{ grid-template-columns:1fr; gap:16px; } }
.bolge-kart{ position:relative; display:flex; flex-direction:column; background:var(--white-color); border:1px solid var(--divider-color); border-radius:20px; overflow:hidden; transition:transform .35s ease, box-shadow .35s ease, border-color .35s ease; }
.bolge-kart:hover{ transform:translateY(-6px); box-shadow:0 18px 40px rgba(0,0,0,.08); border-color:rgba(252,16,14,.35); }
.bk-gorsel{ position:relative; display:block; height:180px; overflow:hidden; background:var(--primary-color); }
.bk-gorsel img{ width:100%; height:100%; object-fit:cover; display:block; transition:transform .6s ease; }
.bolge-kart:hover .bk-gorsel img{ transform:scale(1.06); }
.bk-gorsel::after{ content:''; position:absolute; inset:0; background:linear-gradient(180deg, rgba(0,0,0,.05) 0%, rgba(0,0,0,.55) 100%); }
.bk-ust{ position:absolute; left:22px; right:22px; top:18px; z-index:2; display:flex; align-items:flex-start; justify-content:space-between; gap:12px; }
.bk-no{ font-family:var(--accent-font); font-weight:600; font-size:46px; line-height:.9; letter-spacing:-.02em; color:var(--white-color); opacity:.9; text-shadow:0 2px 12px rgba(0,0,0,.35); }
.bk-rozet{ display:inline-flex; align-items:center; gap:6px; padding:6px 12px; border-radius:30px; background:var(--accent-color); color:var(--white-color); font-size:12px; font-weight:700; letter-spacing:.04em; text-transform:uppercase; white-space:nowrap; }
.bk-rozet.bos{ background:rgba(255,255,255,.92); color:var(--primary-color); }
.bk-rozet i{ font-size:11px; }
.bk-govde{ display:flex; flex-direction:column; flex:1; padding:22px 26px 22px; }
.bolge-kart h3{ font-family:var(--accent-font); font-weight:600; font-size:26px; line-height:1.15; margin:0 0 6px; }
.bolge-kart h3 a{ color:var(--primary-color); }
.bolge-kart h3 a:hover{ color:var(--accent-color); }
.bk-baslik p{ color:var(--text-color); font-size:15px; line-height:1.55; margin:0 0 16px; }
.bk-iller{ list-style:none; margin:0 0 18px; padding:0; display:flex; flex-wrap:wrap; gap:7px; }
.bk-iller li a, .bk-iller li span{ display:inline-flex; align-items:center; gap:6px; padding:5px 10px 5px 8px; border-radius:8px; background:var(--bg-color); color:var(--primary-color); font-size:13px; font-weight:500; line-height:1.3; transition:background .3s, color .3s; }
.bk-iller li a small{ font-family:var(--accent-font); font-weight:600; font-size:11px; color:rgba(0,0,0,.45); min-width:18px; }
.bk-iller li a:hover{ background:var(--primary-color); color:var(--white-color); }
.bk-iller li a:hover small{ color:rgba(255,255,255,.6); }
.bk-iller li.var a{ background:rgba(252,16,14,.08); }
.bk-iller li.var a::after{ content:''; width:6px; height:6px; border-radius:50%; background:var(--accent-color); }
.bk-iller li.daha span{ color:rgba(0,0,0,.55); background:transparent; border:1px dashed var(--divider-color); }
.bk-alt{ margin-top:auto; padding-top:16px; border-top:1px solid var(--divider-color); display:flex; align-items:center; gap:18px; }
.bk-stat{ font-size:13px; color:var(--text-color); }
.bk-stat strong{ font-family:var(--accent-font); font-weight:600; font-size:20px; color:var(--primary-color); margin-right:3px; }
.bk-link{ margin-left:auto; display:inline-flex; align-items:center; gap:8px; font-family:var(--accent-font); font-weight:600; color:var(--primary-color); white-space:nowrap; }
.bk-link i{ width:30px; height:30px; border-radius:50%; background:var(--primary-color); color:var(--white-color); display:inline-flex; align-items:center; justify-content:center; font-size:12px; transition:background .3s, transform .3s; }
.bk-link:hover{ color:var(--accent-color); }
.bk-link:hover i{ background:var(--accent-color); transform:translateX(3px); }
/* 3'lü ızgarada tek kalan son kart: tam genişlik, görsel solda, yatay düzen */
@media(min-width:1200px){
.bolgeler-grid .bolge-kart:nth-child(3n+1):last-child{ grid-column:1 / -1; display:grid; grid-template-columns:minmax(0,1fr) minmax(0,2fr); }
.bolgeler-grid .bolge-kart:nth-child(3n+1):last-child .bk-gorsel{ height:100%; min-height:240px; }
.bolgeler-grid .bolge-kart:nth-child(3n+1):last-child .bk-govde{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.4fr) auto; column-gap:28px; align-items:center; padding:26px 28px; }
.bolgeler-grid .bolge-kart:nth-child(3n+1):last-child .bk-baslik p{ margin-bottom:0; }
.bolgeler-grid .bolge-kart:nth-child(3n+1):last-child .bk-iller{ margin:0; }
.bolgeler-grid .bolge-kart:nth-child(3n+1):last-child .bk-alt{ flex-direction:column; align-items:flex-start; gap:10px; margin:0; padding:0 0 0 28px; border-top:0; border-left:1px solid var(--divider-color); }
.bolgeler-grid .bolge-kart:nth-child(3n+1):last-child .bk-link{ margin-left:0; margin-top:6px; }
}
@media(min-width:768px) and (max-width:1199px){
.bolgeler-grid .bolge-kart:nth-child(2n+1):last-child{ grid-column:1 / -1; }
}

/* Bölge detay — referans kartları ve il listesi */
.page-projects .bolge-projeler{ padding-bottom: 0; }
.page-projects .bolge-projeler-btn{ margin-top: 40px; }
.page-iller{ padding: 120px 0; }
.vera-il-list li a .il-proje{ display: inline-block; margin-left: 8px; padding: 2px 9px; border-radius: 30px; background: var(--accent-color); color: var(--white-color); font-size: 12px; font-weight: 600; line-height: 1.4; vertical-align: middle; }
@media (max-width: 767px){ .page-iller{ padding: 60px 0; } }