/* =====================================================================
   URUN-DETAY.CSS — urun-detay.html ile birebir
   NOT: .site-main genişliği, proje talimatı gereği orijinal 990px'den
   diğer tüm sayfalarla (ana sayfa / kategori) aynı olan 1200px'e
   çıkarılmıştır. Diğer tüm değerler orijinal tasarımla birebir aynıdır.
   ===================================================================== */

.site-main { flex-grow: 1; width: 100%; max-width: 1200px; margin: 0 auto; padding: 30px 20px; display: flex; flex-direction: column; gap: 15px; }
.sayfa-ust-bilgi { display: flex; justify-content: space-between; align-items: center; gap: 20px; margin-bottom: 5px; flex-wrap: wrap; }
.breadcrumb { font-size: 0.9rem; color: var(--text-muted); display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.breadcrumb a { color: var(--efor-acik-yesil); text-decoration: none; transition: color var(--transition-hizi) ease; }
.breadcrumb a:hover { color: var(--efor-koyu-yesil); text-decoration: underline; }
.breadcrumb-ayrac { color: #ccc; font-size: 0.8rem; }
.breadcrumb-aktif { color: var(--text-main); font-weight: 600; }
.arama-alani { flex-grow: 1; max-width: 320px; height: 38px; display: flex; align-items: stretch; border: 1px solid var(--border-dark); border-radius: 19px; overflow: hidden; background-color: #fff; transition: border-color var(--transition-hizi) ease; box-shadow: 0 2px 5px rgba(0,0,0,0.02); }
.arama-alani:focus-within { border-color: var(--efor-koyu-yesil); box-shadow: 0 0 0 3px rgba(37, 68, 53, 0.1); }
.arama-input { flex-grow: 1; border: none; padding: 0 15px; background: transparent; outline: none; font-size: 0.9rem; color: var(--text-main); }
.arama-buton { background-color: var(--efor-koyu-yesil); color: white; border: none; padding: 0 20px; cursor: pointer; font-weight: 600; font-size: 0.9rem; transition: background-color var(--transition-hizi) ease; }
.arama-buton:hover { background-color: var(--efor-acik-yesil); }

/* --- ÜRÜN DETAY BİLEŞENİ --- */
.katalog-sayfasi { background-color: #ffffff; width: 100%; padding: 25px; box-shadow: 0 10px 30px rgba(0,0,0,0.08); border-radius: 8px; display: flex; flex-direction: column; gap: 20px; }
.baski-antet { display: none; }
.urun-header { display: flex; height: 50px; border: 1px solid var(--border-dark); border-radius: 25px; overflow: hidden; color: #ffffff; font-size: 1.15rem; font-weight: 500; letter-spacing: 0.5px; box-shadow: 0 4px 6px rgba(0,0,0,0.05); }
.hdr-parca { display: flex; align-items: center; justify-content: center; position: relative; height: 100%; }
.hdr-kod::after, .hdr-tr::after { content: ""; position: absolute; right: -18px; top: calc(50% - 18px); width: 36px; height: 36px; border-top: 1px solid var(--border-dark); border-right: 1px solid var(--border-dark); transform: rotate(45deg); }
.hdr-kod { background-color: var(--efor-koyu-yesil); flex: 1.5; z-index: 3; }
.hdr-kod::after { background-color: var(--efor-koyu-yesil); }
.hdr-tr { background-color: var(--efor-acik-yesil); flex: 2; z-index: 2; padding-left: 25px; }
.hdr-tr::after { background-color: var(--efor-acik-yesil); }
.hdr-en { background-color: var(--efor-koyu-yesil); flex: 2.2; z-index: 1; padding-left: 25px; }

.urun-govde { display: grid; grid-template-columns: 35% 1fr; gap: 25px; align-items: stretch; }
.gorsel-kutu { background-color: var(--bg-light); border: 1px solid var(--border-dark); border-radius: 12px; display: flex; align-items: center; justify-content: center; min-height: 320px; overflow: hidden; }
.gorsel-kutu img { width: 100%; height: 100%; object-fit: cover; }
.sag-panel { display: flex; flex-direction: column; }
.teknik-cizimler { display: grid; grid-template-columns: repeat(3, 1fr); gap: 15px; margin-bottom: 10px; }
.cizim-karti { display: flex; flex-direction: column; }
.cizim-cerceve {
    border: 1px solid var(--border-dark);
    border-radius: 6px;
    aspect-ratio: 1;
    position: relative;          /* img absolute için bağlam */
    overflow: hidden;
    background-color: var(--bg-light);
    /* Görsel yoksa metin placeholder ortalanır */
    display: flex;
    align-items: center;
    justify-content: center;
    color: #777;
    font-size: 0.9rem;
    text-align: center;
    padding: 10px;               /* sadece metin için; img bunu geçersiz kılar */
}
.cizim-cerceve img {
    position: absolute;
    inset: 0;                    /* top:0 right:0 bottom:0 left:0 */
    width: 100%;
    height: 100%;
    object-fit: cover;           /* kutuyu tamamen doldur */
    border-radius: 5px;
}

/* --- İKİYE BÖLÜNMÜŞ BİLGİ KUTUSU --- */
.makine-bilgi-tam-satir { border: 1px solid var(--border-dark); border-radius: 6px; background-color: #fff; margin-bottom: auto; overflow: hidden; }
.makine-bilgi-ikili { display: grid; grid-template-columns: 1fr 1fr; }
.bilgi-sutun { padding: 10px 15px; }
.sutun-ayrac { border-left: 1px solid var(--border-color); }
.makine-baslik { font-weight: 600; border-bottom: 1px solid #e0e0e0; padding-bottom: 4px; margin-bottom: 8px; font-size: 0.85rem; color: var(--text-main); }

.makine-liste { list-style: none; padding: 0; margin: 0; font-size: 0.8rem; color: #555; line-height: 1.5; }
.makine-liste li { position: relative; padding-left: 14px; margin-bottom: 4px; }
.makine-liste li::before { content: "■"; position: absolute; left: 0; top: 0; font-size: 0.6rem; color: var(--efor-acik-yesil); line-height: 2.2; }

/* --- AKSİYON BUTONLARI --- */
.aksiyon-alani { display: flex; gap: 15px; margin-top: 20px; margin-bottom: auto; flex-wrap: wrap; }
.btn { flex: 1; min-width: 140px; padding: 12px 10px; border-radius: 6px; font-size: 0.95rem; font-weight: 600; text-align: center; cursor: pointer; transition: all var(--transition-hizi) ease; text-decoration: none; display: flex; align-items: center; justify-content: center; gap: 8px; border: none; }
.btn-teklif { background-color: var(--efor-koyu-yesil); color: #fff; border: 2px solid var(--efor-koyu-yesil); box-shadow: 0 4px 10px rgba(37, 68, 53, 0.2); }
.btn-teklif:hover { background-color: var(--efor-acik-yesil); border-color: var(--efor-acik-yesil); transform: translateY(-2px); }
.btn-pdf { background-color: transparent; color: var(--efor-koyu-yesil); border: 2px solid var(--efor-koyu-yesil); }
.btn-pdf:hover { background-color: var(--bg-light); transform: translateY(-2px); }
.btn-whatsapp { background-color: #25D366; color: #fff; border: 2px solid #25D366; box-shadow: 0 4px 10px rgba(37, 211, 102, 0.2); }
.btn-whatsapp:hover { background-color: #128C7E; border-color: #128C7E; transform: translateY(-2px); color: #fff; }

.olcu-alani { display: flex; flex-direction: column; gap: 6px; margin-top: 25px; overflow-x: auto; }
.olcu-satir { display: grid; grid-template-columns: 45px repeat(auto-fit, 32px); gap: 4px; }
.kalinlik-satir { display: grid; grid-template-columns: 65px repeat(auto-fit, 32px); gap: 4px; margin-top: 4px; }
.hucre { height: 32px; border: 1px solid var(--border-dark); border-radius: 4px; display: flex; align-items: center; justify-content: center; font-size: 0.85rem; color: var(--text-main); background-color: #fff; }
.hucre-baslik { font-weight: 700; background-color: var(--bg-light); }
.kalinlik-baslik { display: flex; flex-direction: column; font-size: 0.65rem; line-height: 1.1; }

/* --- TEKLİF FORMU MODALI --- */
.modal-overlay { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.6); z-index: 2000; align-items: center; justify-content: center; backdrop-filter: blur(4px); opacity: 0; transition: opacity 0.3s ease; }
.modal-overlay.aktif { display: flex; opacity: 1; }
.modal-kutu { background-color: #ffffff; padding: 30px; border-radius: 12px; width: 100%; max-width: 450px; position: relative; box-shadow: 0 15px 30px rgba(0,0,0,0.3); transform: translateY(-20px); transition: transform 0.3s ease; max-height: 90vh; overflow-y: auto; }
.modal-overlay.aktif .modal-kutu { transform: translateY(0); }
.modal-kapat { position: absolute; top: 15px; right: 20px; font-size: 1.5rem; color: #888; cursor: pointer; transition: color 0.3s ease; line-height: 1; background: none; border: none; }
.modal-kapat:hover { color: var(--efor-koyu-yesil); }
.modal-baslik { font-size: 1.4rem; color: var(--text-main); margin-bottom: 10px; font-weight: 700; }
.modal-aciklama { font-size: 0.9rem; color: var(--text-muted); margin-bottom: 20px; line-height: 1.5; }
.form-grubu { display: flex; flex-direction: column; gap: 12px; margin-bottom: 20px; }
.form-input { width: 100%; padding: 12px 15px; border: 1px solid var(--border-color); border-radius: 6px; font-family: inherit; font-size: 0.95rem; outline: none; transition: border-color 0.3s ease; }
.form-input:focus { border-color: var(--efor-koyu-yesil); }

.urun-aciklama-metni {
    font-size: 0.93rem;
    color: var(--text-main);
    line-height: 1.75;
    padding: 12px 16px;
    background-color: var(--bg-light);
    border-left: 3px solid var(--efor-acik-yesil);
    border-radius: 0 6px 6px 0;
    margin-bottom: 14px;
}

/* =====================================================================
   GÖRSEL BÜYÜTME (LIGHTBOX)
   Ana ürün görseli ve teknik çizimler object-fit:cover ile kırpıldığı
   için, tam halini görmek isteyen kullanıcıya modal içinde gösterilir.
   ===================================================================== */

/* Büyütülebilir görsellerde imleç ve hover efekti */
.buyutulebilir {
    cursor: zoom-in;
    transition: transform var(--transition-hizi) ease, filter var(--transition-hizi) ease;
}
.gorsel-kutu:hover .buyutulebilir,
.cizim-cerceve:hover .buyutulebilir {
    transform: scale(1.04);
    filter: brightness(0.92);
}

/* Hover'da "büyütme" ikonu göster */
.gorsel-kutu, .cizim-cerceve { position: relative; }
.gorsel-kutu:has(.buyutulebilir)::after,
.cizim-cerceve:has(.buyutulebilir)::after {
    content: "⤢";
    position: absolute;
    right: 8px;
    bottom: 8px;
    width: 26px;
    height: 26px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: rgba(37, 68, 53, 0.85);
    color: #fff;
    font-size: 0.85rem;
    border-radius: 4px;
    opacity: 0;
    transform: translateY(4px);
    transition: opacity var(--transition-hizi) ease, transform var(--transition-hizi) ease;
    pointer-events: none;
}
.gorsel-kutu:hover::after,
.cizim-cerceve:hover::after {
    opacity: 1;
    transform: translateY(0);
}

/* Modal katmanı */
.gorsel-modal {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 3000;
    background-color: rgba(0, 0, 0, 0.88);
    align-items: center;
    justify-content: center;
    padding: 40px 20px;
    cursor: zoom-out;
    animation: gorselModalGiris 0.2s ease;
}
.gorsel-modal.aktif { display: flex; }

@keyframes gorselModalGiris {
    from { opacity: 0; }
    to   { opacity: 1; }
}

.gorsel-modal img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;   /* tam hali — kırpma YOK */
    border-radius: 6px;
    box-shadow: 0 10px 50px rgba(0, 0, 0, 0.5);
    cursor: default;
    animation: gorselModalZoom 0.22s ease;
}

@keyframes gorselModalZoom {
    from { transform: scale(0.94); opacity: 0; }
    to   { transform: scale(1);    opacity: 1; }
}

.gorsel-modal-kapat {
    position: absolute;
    top: 18px;
    right: 24px;
    width: 42px;
    height: 42px;
    background-color: rgba(255, 255, 255, 0.12);
    border: none;
    border-radius: 50%;
    color: #fff;
    font-size: 1.8rem;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-color var(--transition-hizi) ease;
}
.gorsel-modal-kapat:hover { background-color: rgba(255, 255, 255, 0.25); }

.gorsel-modal-baslik {
    position: absolute;
    bottom: 20px;
    left: 0;
    right: 0;
    text-align: center;
    color: rgba(255, 255, 255, 0.85);
    font-size: 0.9rem;
    padding: 0 20px;
    pointer-events: none;
}

/* --- RESPONSIVE --- */
@media (max-width: 768px) {
    .sayfa-ust-bilgi { flex-direction: column; align-items: stretch; gap: 12px; }
    .arama-alani { max-width: 100%; }
    .urun-govde { grid-template-columns: 1fr; }
    .makine-bilgi-ikili { grid-template-columns: 1fr; }
    .sutun-ayrac { border-left: none; border-top: 1px solid var(--border-color); }
    .aksiyon-alani { flex-direction: column; }

    /* Şevron başlık (kod / TR adı / EN adı): dar ekranda 3 parça yan yana
       sıkışıp metinler birbirine giriyordu. Dikey (alt alta) düzene geçiyor,
       şevron çıkıntıları (::after) kaldırılıyor, her satır kendi genişliğinde
       tam metni gösterebiliyor. */
    .urun-header {
        flex-direction: column;
        height: auto;
        border-radius: 12px;
    }
    .hdr-parca {
        width: 100%;
        padding: 10px 16px !important;
        justify-content: flex-start;
        text-align: left;
        font-size: 1rem;
        white-space: normal;
        word-break: break-word;
    }
    .hdr-kod::after, .hdr-tr::after {
        content: none; /* şevron çıkıntısı dar ekranda kaldırılır */
    }
}


/* =====================================================================
   @MEDIA PRINT — "PDF İndir / Yazdır" butonuna basıldığında
   • Sayfa boyutu  : A4 yatay
   • Dış çerçeve   : katalog-sayfasi etrafında 1px solid siyah
   • Antet solu    : sitedeki logo ile aynı stil (koyu yeşil bg, turuncu+beyaz)
   • Antet sağı    : iletişim bilgisi (mevcut düzen korunur)
   • Görsel boyutu : sitedeki ile aynı (min-height 320px)
   ===================================================================== */
@media print {

    /* Renk doğruluğu */
    * { -webkit-print-color-adjust: exact !important; print-color-adjust: exact !important; }

    /* A4 yatay, kenar boşlukları */
    @page { size: A4 landscape; margin: 10mm 12mm; }

    /* Body */
    html, body {
        background: #fff !important;
        margin: 0 !important;
        padding: 0 !important;
        display: block !important;
        font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
    }

    /* Site arayüzü tamamen gizle */
    .site-header, .sayfa-ust-bilgi, .aksiyon-alani,
    .site-footer, .modal-overlay, .gorsel-modal, .bildirim { display: none !important; }

    .site-main {
        padding: 0 !important; margin: 0 !important;
        max-width: 100% !important; width: 100% !important;
        display: block !important;
    }

    /* ── Dış çerçeve ───────────────────────────────────── */
    .katalog-sayfasi {
        box-shadow: none !important;
        border: 1px solid #000 !important;   /* İstenen 1px siyah çerçeve */
        padding: 0 !important;
        margin: 0 !important;
        gap: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
        overflow: hidden !important;   /* antet'in köşeli arka planı yuvarlak köşeyi bozmasın */
        page-break-inside: avoid;
        break-inside: avoid;
    }

    /* ── Antet (baski-antet) ────────────────────────────
       Ekranda display:none, baskıda görünür.
       Alt kenar, çerçevenin üst bölümünü içerikten ayırır. */
    .baski-antet {
        display: flex !important;
        justify-content: space-between !important;
        align-items: center !important;
        background-color: #f4f6f5 !important;
        border-bottom: 1px solid #000 !important;
        padding: 10px 14px !important;
        margin: 0 !important;
    }

    /* SOL: Sitedeki logo ile birebir aynı stil */
    .baski-logo {
        display: inline-flex !important;
        align-items: center !important;
        gap: 6px !important;
        background-color: #254435 !important;   /* --efor-koyu-yesil */
        padding: 6px 13px !important;
        border-radius: 5px !important;
        font-size: 1.3rem !important;
        font-weight: 800 !important;
        color: #FF8C00 !important;              /* Turuncu — EFOR */
        letter-spacing: -0.5px;
        line-height: 1;
    }
    .baski-logo span {
        font-size: 1.3rem !important;
        font-weight: 600 !important;
        color: #ffffff !important;              /* Beyaz — APARAT */
    }

    /* SAĞ: İletişim bilgisi (düzen korunuyor) */
    .baski-iletisim {
        text-align: right !important;
        font-size: 0.73rem !important;
        color: #333 !important;
        line-height: 1.5;
    }

    /* ── İçerik alanı: çerçeve içi padding ────────────── */
    /* NOT: @media (max-width:768px) mobil kuralı, bazı tarayıcıların
       print önizlemesini dar viewport olarak render etmesi nedeniyle
       yanlışlıkla print'e de bulaşıyor (urun-header'ı dikey/şevronsuz
       yapıyordu). Aşağıda mobil kuralın etkisi açıkça geri alınıp
       sitedeki orijinal yatay şevron tasarımı zorlanıyor. */
    .urun-header {
        display: flex !important;
        flex-direction: row !important;
        margin: 12px 14px 0 !important;
        height: 42px !important;
        border-radius: 21px !important;
        font-size: 0.95rem !important;
    }
    .hdr-parca {
        width: auto !important;
        padding: 0 !important;
        justify-content: center !important;
        text-align: center !important;
        white-space: nowrap !important;
    }
    .hdr-tr, .hdr-en {
        padding-left: 25px !important;   /* mobil kuralın ezdiği şevron-metin boşluğu geri getiriliyor */
    }
    .hdr-kod::after, .hdr-tr::after {
        content: "" !important;   /* mobil kuralın kaldırdığı şevron çıkıntısı geri getiriliyor */
        width: 28px !important; height: 28px !important;
        right: -14px !important; top: calc(50% - 14px) !important;
    }

    .urun-govde {
        margin: 10px 14px 14px !important;
        gap: 16px !important;
        display: grid !important;
        grid-template-columns: 34% 1fr !important;   /* responsive'in 1fr yapmasını engelle */
        align-items: start !important;   /* stretch kaldırıldı: sağ panel uzunsa sayfa taşmasına
                                             yol açıyordu (Chrome'un print'te CSS Grid sayfalama
                                             desteği zayıf) — bu yüzden görsel için SABİT, güvenli
                                             bir yükseklik kullanıyoruz (aşağıda) */
    }

    /* ── Görsel kutusu: sabit yükseklik — A4 tek sayfaya
       her zaman sığması garanti (sağ panel içeriğine bağımlı değil) ── */
    .gorsel-kutu {
        position: relative !important;   /* img absolute için bağlam */
        height: 380px !important;        /* sitedeki 320px'ten daha uzun, ama sağ panel ne kadar
                                             uzun olursa olsun sabit kaldığı için sayfa taşması yok */
        min-height: 0 !important;
        max-height: none !important;
        border-radius: 8px !important;
        border: 1px solid #ccc !important;
        background-color: #f8f9fa !important;
        overflow: hidden !important;
    }
    .gorsel-kutu img {
        position: absolute !important;
        inset: 0 !important;
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important;    /* sitedeki ile aynı doldurma davranışı */
    }

    /* ── Ürün açıklaması ───────────────────────────────── */
    .urun-aciklama-metni {
        display: block !important;
        font-size: 0.79rem !important;
        color: #333 !important;
        line-height: 1.55 !important;
        margin-bottom: 10px !important;
        background: none !important;
        border-left: 2px solid #254435 !important;
        border-radius: 0 !important;
        padding: 3px 8px !important;
    }

    /* ── Teknik çizimler ───────────────────────────────── */
    .teknik-cizimler { gap: 8px !important; margin-bottom: 8px !important; }
    .cizim-cerceve {
        border: 1px solid #999 !important;
        border-radius: 4px !important;
        font-size: 0.75rem !important;
        padding: 6px !important;
    }
    .cizim-cerceve img {
        position: absolute !important;
        inset: 0 !important;
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important;
        border-radius: 3px !important;
    }

    /* ── İkili bilgi kutusu ────────────────────────────── */
    .makine-bilgi-tam-satir { border: 1px solid #bbb !important; border-radius: 4px !important; }
    /* Bazı tarayıcılar print'i dar viewport'ta render eder, responsive kural
       grid'i tek sütuna düşürür. Açıkça 2 sütun zorlanıyor: */
    .makine-bilgi-ikili {
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
    }
    .bilgi-sutun { padding: 7px 10px !important; }
    .makine-baslik {
        font-size: 0.78rem !important;
        border-bottom: 1px solid #ccc !important;
        padding-bottom: 3px !important;
        margin-bottom: 5px !important;
        color: #222 !important;
    }
    .makine-liste { font-size: 0.73rem !important; }
    .makine-liste li { margin-bottom: 2px !important; }
    .sutun-ayrac {
        border-left: 1px solid #ccc !important;
        border-top: none !important;   /* responsive'in eklediği border-top'ı temizle */
    }

    /* ── Ölçü tablosu ──────────────────────────────────── */
    .olcu-alani { margin-top: 10px !important; gap: 3px !important; overflow-x: visible !important; }
    .olcu-satir, .kalinlik-satir { gap: 2px !important; }
    .hucre {
        height: 26px !important;
        font-size: 0.72rem !important;
        border: 1px solid #aaa !important;
        border-radius: 3px !important;
    }
    .hucre-baslik { background-color: #f0f0f0 !important; font-weight: 700 !important; }
}