/* BFT PREMIUM STYLE - Clean & Enterprise */
:root {
    --bft-red: #de1f26;         /* BFT Kurumsal Kırmızı */
    --dark-grey: #1a1a1a;       /* Başlıklar */
    --soft-grey: #f4f4f4;       /* Arka Planlar */
    --text-grey: #666666;       /* Açıklamalar */
    --white: #ffffff;
    --shadow-soft: 0 10px 40px rgba(0,0,0,0.05);
    --shadow-hover: 0 20px 60px rgba(0,0,0,0.1);
    --transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
}

body {
    overflow-x: hidden; /* Yatay kaymayı engelle */
    width: 100%;
    background-color: #fff;
    font-family: 'Montserrat', 'Inter', sans-serif; /* Modern Font */
}

/* HERO SECTION */
.bft-hero-section {
    padding: 140px 0 70px; /* Header payı artırıldı */
    text-align: center;
    position: relative;
    overflow: hidden;
    background-color: #fff;
    border-bottom: 1px solid #eee;
}

/* 1. Katman: Merkezden Yayılan İlahi Işık (Beyaz) */
.bft-hero-section::before {
    content: '';
    position: absolute;
    top: -20%;
    left: 50%;
    transform: translateX(-50%);
    width: 120%;
    height: 120%;
    background: radial-gradient(circle at 50% 20%, rgba(255,255,255,1) 10%, rgba(240,240,240,0.5) 50%, rgba(255,255,255,0) 80%);
    z-index: 0;
    filter: blur(20px);
}

/* 2. Katman: Marka Rengi Işık Hüzmeleri (Kırmızı/Gri) */
.bft-hero-section::after {
    content: '';
    position: absolute;
    top: -50%;
    left: 50%;
    transform: translateX(-50%);
    width: 150%;
    height: 150%;
    background: conic-gradient(
        from 180deg at 50% 50%,
        transparent 0deg,
        rgba(222, 31, 38, 0.02) 20deg,
        transparent 40deg,
        rgba(200, 200, 200, 0.05) 60deg,
        transparent 80deg,
        rgba(222, 31, 38, 0.02) 100deg,
        transparent 120deg,
        rgba(200, 200, 200, 0.05) 140deg,
        transparent 160deg,
        rgba(222, 31, 38, 0.02) 180deg,
        transparent 360deg
    );
    z-index: 0;
    filter: blur(40px);
    opacity: 0.8;
}

/* İçeriği öne çıkar */
.bft-hero-section .container {
    position: relative;
    z-index: 2;
}

.hero-badge {
    background-color: rgba(222, 31, 38, 0.1);
    color: var(--bft-red);
    padding: 6px 16px;
    border-radius: 50px;
    font-size: 0.8rem;
    font-weight: 700;
    display: inline-block;
    margin-bottom: 15px;
}

.bft-hero-section h1 {
    font-size: 3rem;
    font-weight: 800;
    color: var(--dark-grey);
    margin: 0 0 15px;
    letter-spacing: -1px;
}

.bft-hero-section h1 span {
    color: var(--bft-red);
}

.bft-hero-section p {
    color: var(--text-grey);
    font-size: 1.1rem;
    max-width: 700px;
    margin: 0 auto;
}

/* GRID SYSTEM */
.product-grid-system {
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* İsteğin üzerine 3'lü Grid */
    gap: 30px;
    margin-top: 60px;
    margin-bottom: 100px;
}

/* CARD STRUCTURE (3D FLIP) */
.product-card-3d {
    height: 650px; /* Sabit yükseklik */
    perspective: 1500px;
    background: transparent;
}

.card-inner {
    position: relative;
    width: 100%;
    height: 100%;
    transition: transform 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    transform-style: preserve-3d;
}

.card-inner.flipped {
    transform: rotateY(180deg);
}

.card-front, .card-back {
    position: absolute;
    width: 100%;
    height: 100%;
    backface-visibility: hidden;
    border-radius: 20px;
    background: var(--white);
    box-shadow: var(--shadow-soft);
    border: 1px solid #f0f0f0;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

/* FRONT DESIGN */
.card-front {
    z-index: 2;
}

.card-image-area {
    height: 45%;
    background: #fbfbfb;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    cursor: pointer;
}

.series-tag {
    position: absolute;
    top: 20px;
    left: 20px;
    font-size: 0.7rem;
    font-weight: 800;
    color: #ccc;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.p-image {
    max-width: 90%;
    max-height: 200px;
    transition: var(--transition);
    filter: drop-shadow(0 15px 25px rgba(0,0,0,0.1));
}

.product-card-3d:hover .p-image {
    transform: scale(1.05) translateY(-5px);
}

.badges-row {
    position: absolute;
    bottom: 15px;
    display: flex;
    gap: 8px;
}

.tech-badge {
    background: var(--white);
    color: var(--dark-grey);
    padding: 5px 12px;
    border-radius: 20px;
    font-size: 0.7rem;
    font-weight: 700;
    box-shadow: 0 4px 10px rgba(0,0,0,0.05);
}

.card-content {
    padding: 30px;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
}

.card-content h3 {
    font-size: 1.5rem;
    font-weight: 800;
    color: var(--dark-grey);
    margin-bottom: 10px;
}

.desc {
    font-size: 0.9rem;
    color: var(--text-grey);
    line-height: 1.5;
    margin-bottom: 20px;
    flex-grow: 1;
}

/* MODEL SELECTOR BUTTONS */
.model-selector {
    display: flex;
    gap: 8px;
    margin-bottom: 25px;
    flex-wrap: wrap;
}

.model-btn {
    padding: 8px 16px;
    border: 1px solid #e0e0e0;
    background: transparent;
    border-radius: 8px;
    font-size: 0.85rem;
    font-weight: 600;
    color: #888;
    cursor: pointer;
    transition: 0.2s;
}

.model-btn:hover {
    border-color: #bbb;
    color: #333;
}

.model-btn.active {
    border-color: var(--bft-red);
    background: var(--bft-red);
    color: var(--white);
    box-shadow: 0 4px 12px rgba(222, 31, 38, 0.2);
}

.action-buttons {
    display: flex;
    gap: 10px;
}

.btn-details {
    width: 100%;
    flex: 1;
    padding: 15px;
    background: var(--dark-grey);
    color: var(--white);
    border: none;
    border-radius: 12px;
    font-weight: 700;
    cursor: pointer;
    transition: 0.3s;
    font-size: 0.9rem;
}

.btn-details:hover {
    background: var(--bft-red);
    transform: translateY(-2px);
}

.btn-go-detail {
    flex: 1;
    padding: 15px;
    background: var(--bft-red);
    color: var(--white);
    border-radius: 12px;
    font-weight: 700;
    text-align: center;
    text-decoration: none;
    font-size: 0.9rem;
    transition: 0.3s;
    display: flex;
    align-items: center;
    justify-content: center;
}
.btn-go-detail:hover {
    background: #b0181e;
    transform: translateY(-2px);
    color: #fff;
}

/* BACK DESIGN (TECH TABLE) */
.card-back {
    transform: rotateY(180deg);
    background: #111; /* Koyu Mod Arka Yüz */
    color: #fff;
    padding: 30px;
}

.back-header {
    border-bottom: 1px solid #333;
    padding-bottom: 15px;
    margin-bottom: 20px;
}

.back-header h4 {
    font-size: 1rem;
    color: #888;
    margin-bottom: 5px;
}

.active-model-name {
    font-size: 1.3rem;
    font-weight: 700;
    color: var(--white);
}

.specs-table {
    display: flex;
    flex-direction: column;
    gap: 0;
    flex-grow: 1;
}

.spec-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 0;
    border-bottom: 1px solid #222;
}

.spec-label {
    font-size: 0.85rem;
    color: #999;
}

.spec-val {
    font-size: 0.95rem;
    color: #fff;
    font-family: monospace; /* Teknik his için */
}

.spec-val strong {
    color: var(--bft-red); /* Değerleri vurgula */
}

.btn-return {
    width: 100%;
    padding: 12px;
    background: transparent;
    border: 1px solid #444;
    color: #aaa;
    border-radius: 10px;
    cursor: pointer;
    font-weight: 600;
    transition: 0.3s;
    margin-top: 20px;
}

.btn-return:hover {
    border-color: #fff;
    color: #fff;
}

/* RESPONSIVE */
@media (max-width: 1100px) {
    .product-grid-system {
        grid-template-columns: repeat(2, 1fr); /* Tablette 2'li */
    }
}

@media (max-width: 768px) {
    .product-grid-system {
        grid-template-columns: 1fr; /* Mobilde Tekli */
        gap: 40px;
    }
    .bft-hero-section h1 {
        font-size: 1.8rem;
    }
    .product-card-3d {
        height: 720px; /* 3D kartlar için sabit yükseklik şarttır, auto çalışmaz */
    }
}

/* CROSS LINKS SECTION (İlginizi Çekebilir) */
.bft-cross-links {
    padding: 80px 0 100px;
    background: #fcfcfc;
    border-top: 1px solid #eee;
}

.cross-header {
    text-align: center;
    margin-bottom: 50px;
}

.cross-header h3 {
    font-size: 1.8rem;
    font-weight: 800;
    color: var(--dark-grey);
    margin-bottom: 10px;
}

.cross-header p {
    color: var(--text-grey);
    font-size: 1rem;
}

.cross-slider {
    display: flex;
    gap: 30px;
    justify-content: center; /* Kartları ortala */
    flex-wrap: wrap;
}

@media (max-width: 768px) {
    .cross-slider {
        flex-wrap: nowrap; /* Mobilde yan yana diz */
        overflow-x: auto; /* Yatay kaydırma */
        justify-content: flex-start;
        padding-bottom: 20px; /* Scrollbar payı */
        -webkit-overflow-scrolling: touch;
        scroll-padding: 20px;
        scroll-snap-type: x mandatory; /* Kartların tam durması için */
    }
    .cross-card {
        flex: 0 0 280px; /* Sabit genişlik */
        margin-left: 20px;
    }
    .cross-card:last-child {
        margin-right: 20px;
    }
}

.cross-card {
    flex: 0 0 300px;
    background: #fff;
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(0,0,0,0.05);
    text-decoration: none;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    border: 1px solid #f0f0f0;
    display: flex;
    flex-direction: column;
    scroll-snap-align: start; /* Mobilde hizalama */
}

.cross-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 20px 50px rgba(0,0,0,0.1);
    border-color: transparent;
}

.cc-img {
    height: 200px;
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

.cc-img img {
    max-width: 90%;
    max-height: 90%;
    object-fit: contain;
    transition: transform 0.3s ease;
}

.cross-card:hover .cc-img img {
    transform: scale(1.1);
}

.cc-title {
    padding: 20px;
    text-align: center;
    font-weight: 700;
    color: var(--dark-grey);
    font-size: 1rem;
    background: #f9f9f9;
    border-top: 1px solid #eee;
    transition: color 0.3s ease;
}

.cross-card:hover .cc-title {
    color: var(--bft-red);
    background: #fff;
}