:root {
	--wd-text-font: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,"Helvetica Neue",sans-serif;
	--wd-text-font-weight: 400;
	--wd-text-color: #D9D9D9;
	--wd-text-font-size: 14px;
	--wd-title-font: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,"Helvetica Neue",sans-serif;
	--wd-title-font-weight: 700;
	--wd-title-color: #FFFFFF;
	--wd-entities-title-font: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,"Helvetica Neue",sans-serif;
	--wd-entities-title-font-weight: 500;
	--wd-entities-title-color: #D9D9D9;
	--wd-entities-title-color-hover: #FF6A00;
	--wd-alternative-font: var(--wd-text-font);
	--wd-widget-title-font: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,"Helvetica Neue",sans-serif;
	--wd-widget-title-font-weight: 700;
	--wd-widget-title-transform: uppercase;
	--wd-widget-title-color: #FFFFFF;
	--wd-widget-title-font-size: 16px;
	--wd-header-el-font: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,"Helvetica Neue",sans-serif;
	--wd-header-el-font-weight: 700;
	--wd-header-el-transform: uppercase;
	--wd-header-el-font-size: 13px;
	--wd-otl-style: dotted;
	--wd-otl-width: 2px;
	--wd-primary-color: rgb(248,101,2);
	--wd-alternative-color: #FF8A00;
	--btn-default-font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,"Helvetica Neue",sans-serif;
	--btn-default-font-weight: 700;
	--btn-default-transform: uppercase;
	--btn-default-font-size: 14px;
	--btn-default-bgcolor: rgb(255,106,0);
	--btn-default-bgcolor-hover: #E85D00;
	--btn-accented-font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,"Helvetica Neue",sans-serif;
	--btn-accented-font-weight: 700;
	--btn-accented-transform: uppercase;
	--btn-accented-font-size: 14px;
	--btn-accented-bgcolor: #FF6A00;
	--btn-accented-bgcolor-hover: #E85D00;
	--wd-form-brd-width: 2px;
	--notices-success-bg: #459647;
	--notices-success-color: #fff;
	--notices-warning-bg: #E0B252;
	--notices-warning-color: #fff;
	--wd-link-color: #333333;
	--wd-link-color-hover: #242424;
}
.wd-age-verify-wrap {
	--wd-popup-width: 500px;
}
.wd-popup.wd-promo-popup {
	background-color: #111111;
	background-image: none;
	background-repeat: no-repeat;
	background-size: contain;
	background-position: left center;
}
.wd-promo-popup-wrap {
	--wd-popup-width: 800px;
}
:is(.woodmart-woocommerce-layered-nav, .wd-product-category-filter) .wd-scroll-content {
	max-height: 223px;
}
.wd-page-title .wd-page-title-bg img {
	object-fit: cover;
	object-position: center center;
}
.wd-footer {
	background-color: #0D0D0D;
	background-image: none;
}
:is(.page, .search-no-results, .error404) :is(.wd-page-content, .whb-header) {
	background-color: #0A0A0A;
	background-image: none;
}
.woodmart-archive-shop:not(.single-product) :is(.wd-page-content, .whb-header) {
	background-color: #0D0D0D;
	background-image: none;
}
.single-product :is(.wd-page-content, .whb-header) {
	background-color: #0A0A0A;
	background-image: none;
}
.woodmart-archive-blog :is(.wd-page-content, .whb-header) {
	background-color: #0A0A0A;
	background-image: none;
}
.single-post :is(.wd-page-content, .whb-header) {
	background-color: #0A0A0A;
	background-image: none;
}
.woodmart-archive-portfolio :is(.wd-page-content, .whb-header) {
	background-color: #0A0A0A;
	background-image: none;
}
.single-portfolio :is(.wd-page-content, .whb-header) {
	background-color: #0A0A0A;
	background-image: none;
}
.mfp-wrap.wd-popup-quick-view-wrap {
	--wd-popup-width: 920px;
}
:root{
--wd-container-w: 1600px;
--wd-form-brd-radius: 0px;
--btn-default-color: #fff;
--btn-default-color-hover: #fff;
--btn-accented-color: #fff;
--btn-accented-color-hover: #fff;
--btn-default-brd-radius: 0px;
--btn-default-box-shadow: none;
--btn-default-box-shadow-hover: none;
--btn-default-box-shadow-active: none;
--btn-default-bottom: 0px;
--btn-accented-brd-radius: 0px;
--btn-accented-box-shadow: none;
--btn-accented-box-shadow-hover: none;
--btn-accented-box-shadow-active: none;
--btn-accented-bottom: 0px;
--wd-brd-radius: 5px;
}

@media (min-width: 1600px) {
section.elementor-section.wd-section-stretch > .elementor-container {
margin-left: auto;
margin-right: auto;
}
}


.wd-page-title {
background-color: #111111;
}

<?php
/**
 * OFFROADCU PREMIUM PRODUCT PAGE
 * WooCommerce + WordPress
 *
 * Child Theme:
 * /wp-content/themes/woodmart-child/single-product.php
 */

defined('ABSPATH') || exit;

global $product;

if (!$product || !is_a($product, 'WC_Product')) {
    $product = wc_get_product(get_the_ID());
}

if (!$product) {
    return;
}


/* ==========================================================
   AYARLAR
   ========================================================== */

/*
 * WhatsApp numaranı buraya yaz.
 * Örnek:
 * 905321234567
 */
$off_whatsapp = '905XXXXXXXXX';


/* Logo */
$custom_logo_id = get_theme_mod('custom_logo');

$off_logo = $custom_logo_id
    ? wp_get_attachment_image_url($custom_logo_id, 'full')
    : '';


/* Ürün */
$product_id    = $product->get_id();
$product_name  = $product->get_name();
$product_price = $product->get_price_html();
$product_sku   = $product->get_sku();


/* Galeri */
$image_ids = $product->get_gallery_image_ids();

$main_image_id = $product->get_image_id();

$gallery_ids = array();

if ($main_image_id) {
    $gallery_ids[] = $main_image_id;
}

foreach ($image_ids as $image_id) {
    if ($image_id != $main_image_id) {
        $gallery_ids[] = $image_id;
    }
}


/* Kategoriler */
$categories = wp_get_post_terms(
    $product_id,
    'product_cat',
    array(
        'fields' => 'all'
    )
);


/* ==========================================================
   ÜRÜN ÖZELLİKLERİ
   ========================================================== */

$attributes = $product->get_attributes();


/*
 * WooCommerce özelliklerini otomatik oluştur.
 */
$feature_items = array();

foreach ($attributes as $attribute) {

    if ($attribute->is_taxonomy()) {

        $terms = wc_get_product_terms(
            $product_id,
            $attribute->get_name(),
            array(
                'fields' => 'names'
            )
        );

        if (!empty($terms)) {

            $feature_items[] = array(
                'name'  => wc_attribute_label($attribute->get_name()),
                'value' => implode(', ', $terms)
            );

        }

    } else {

        $feature_items[] = array(
            'name'  => wc_attribute_label($attribute->get_name()),
            'value' => implode(', ', $attribute->get_options())
        );

    }
}


/*
 * Üründe özellik yoksa örnek değerleri kullanma.
 * Bunun yerine açıklamadan hiçbir şey uydurmayacağız.
 */


/* ==========================================================
   WHATSAPP
   ========================================================== */

$whatsapp_text =
    'Merhaba OFFROADCU, "' .
    $product_name .
    '" ürünü hakkında bilgi almak ve sipariş oluşturmak istiyorum.';

$whatsapp_url =
    'https://wa.me/' .
    preg_replace('/[^0-9]/', '', $off_whatsapp) .
    '?text=' .
    rawurlencode($whatsapp_text);


/* ==========================================================
   WORDPRESS HEAD
   ========================================================== */

wp_head();

?>

<style>

/* ============================================================
   OFFROADCU PRODUCT PAGE
   ============================================================ */

:root {

    --off-orange:#ff6900;
    --off-orange-2:#ff8500;

    --off-black:#07090a;
    --off-black-2:#0d1012;
    --off-black-3:#15191b;

    --off-white:#f5f6f7;

    --off-gray:#969b9e;

    --off-border:
        rgba(255,255,255,.09);

    --off-radius:14px;
}


/* ============================================================
   RESET
   ============================================================ */

.off-product-page,
.off-product-page * {
    box-sizing:border-box;
}

.off-product-page {

    min-height:100vh;

    margin:0;

    background:
        radial-gradient(
            circle at 80% 10%,
            rgba(255,105,0,.07),
            transparent 28%
        ),
        #07090a;

    color:#fff;

    font-family:
        Inter,
        Arial,
        Helvetica,
        sans-serif;
}

.off-product-page a {

    text-decoration:none;

    color:inherit;
}


/* ============================================================
   HEADER
   ============================================================ */

.off-header {

    height:76px;

    border-bottom:
        1px solid
        rgba(255,255,255,.08);

    background:
        rgba(7,9,10,.96);

    display:flex;

    align-items:center;
}

.off-header-inner {

    width:
        min(1400px,calc(100% - 60px));

    margin:auto;

    display:flex;

    align-items:center;

    gap:22px;
}


/* LOGO */

.off-logo {

    width:215px;

    flex-shrink:0;

    display:flex;

    align-items:center;
}

.off-logo img {

    width:100%;

    max-height:46px;

    object-fit:contain;
}

.off-logo-text {

    font-size:27px;

    font-weight:900;

    letter-spacing:-1.5px;
}

.off-logo-text span {

    color:
        var(--off-orange);
}


/* ARACINI SEÇ */

.off-vehicle-button {

    height:43px;

    padding:
        0 17px;

    border:
        1px solid
        rgba(255,255,255,.20);

    background:
        #111416;

    border-radius:5px;

    color:#fff;

    display:flex;

    align-items:center;

    gap:9px;

    font-size:12px;

    font-weight:700;

    white-space:nowrap;

    cursor:pointer;

    transition:.25s;
}

.off-vehicle-button:hover {

    border-color:
        var(--off-orange);

    color:
        var(--off-orange);
}


/* SEARCH */

.off-search {

    flex:1;

    max-width:510px;

    margin-left:12px;

    position:relative;
}

.off-search input {

    width:100%;

    height:43px;

    border:
        1px solid
        rgba(255,255,255,.08);

    background:
        #15191b;

    border-radius:5px;

    color:#fff;

    padding:
        0 45px 0 16px;

    outline:none;
}

.off-search input:focus {

    border-color:
        var(--off-orange);
}

.off-search button {

    position:absolute;

    right:0;

    top:0;

    width:45px;

    height:43px;

    border:0;

    background:transparent;

    color:#aaa;

    cursor:pointer;

    font-size:18px;
}


/* HEADER ACTIONS */

.off-header-actions {

    margin-left:auto;

    display:flex;

    align-items:center;

    gap:22px;

    color:#bbb;
}

.off-header-action {

    position:relative;

    font-size:20px;

    cursor:pointer;

    transition:.25s;
}

.off-header-action:hover {

    color:
        var(--off-orange);
}

.off-cart-count {

    position:absolute;

    top:-9px;

    right:-10px;

    width:17px;

    height:17px;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:50%;

    background:
        var(--off-orange);

    color:#000;

    font-size:9px;

    font-weight:900;
}


/* ============================================================
   CONTAINER
   ============================================================ */

.off-container {

    width:
        min(1400px,calc(100% - 60px));

    margin:auto;
}


/* ============================================================
   BREADCRUMB
   ============================================================ */

.off-breadcrumb {

    padding:
        19px 0;

    font-size:12px;

    color:#7e8487;

    white-space:nowrap;

    overflow:hidden;

    text-overflow:ellipsis;
}

.off-breadcrumb span {

    color:#ddd;
}

.off-breadcrumb a:hover {

    color:
        var(--off-orange);
}


/* ============================================================
   PRODUCT GRID
   ============================================================ */

.off-product-grid {

    display:grid;

    grid-template-columns:
        minmax(0,1.42fr)
        minmax(420px,.78fr);

    gap:28px;

    align-items:start;
}


/* ============================================================
   GALLERY
   ============================================================ */

.off-gallery {

    background:
        linear-gradient(
            145deg,
            #15191b,
            #0b0d0e
        );

    border:
        1px solid
        var(--off-border);

    border-radius:
        var(--off-radius);

    padding:12px;

    box-shadow:
        0 25px 70px
        rgba(0,0,0,.32);
}


/* MAIN IMAGE */

.off-main-image {

    width:100%;

    aspect-ratio:
        16 / 10;

    position:relative;

    overflow:hidden;

    background:#080a0b;

    border-radius:10px;
}

.off-main-image img {

    width:100%;

    height:100%;

    object-fit:cover;

    display:block;

    transition:
        transform .45s
        cubic-bezier(.2,.7,.2,1);
}

.off-main-image:hover img {

    transform:
        scale(1.025);
}


/* ZOOM */

.off-zoom {

    position:absolute;

    top:15px;

    right:15px;

    width:43px;

    height:43px;

    border-radius:50%;

    border:
        1px solid
        rgba(0,0,0,.2);

    background:
        rgba(255,255,255,.82);

    color:#222;

    cursor:pointer;

    font-size:19px;

    transition:.25s;
}

.off-zoom:hover {

    background:#fff;

    transform:scale(1.05);
}


/* THUMBNAILS */

.off-thumbnails {

    display:grid;

    grid-template-columns:
        repeat(6,1fr);

    gap:9px;

    margin-top:10px;
}

.off-thumb {

    aspect-ratio:
        1 / .72;

    border:
        1px solid
        rgba(255,255,255,.10);

    border-radius:7px;

    overflow:hidden;

    cursor:pointer;

    opacity:.52;

    transition:.25s;
}

.off-thumb img {

    width:100%;

    height:100%;

    object-fit:cover;
}

.off-thumb:hover {

    opacity:1;

    border-color:
        rgba(255,105,0,.5);
}

.off-thumb.active {

    opacity:1;

    border-color:
        var(--off-orange);
}


/* GALLERY COUNTER */

.off-gallery-counter {

    display:flex;

    align-items:center;

    justify-content:center;

    gap:20px;

    height:34px;

    color:#999;

    font-size:12px;
}

.off-gallery-arrow {

    border:0;

    background:none;

    color:#ccc;

    font-size:25px;

    cursor:pointer;
}

.off-gallery-arrow:hover {

    color:
        var(--off-orange);
}


/* ============================================================
   PRODUCT CARD
   ============================================================ */

.off-product-card {

    background:
        linear-gradient(
            145deg,
            #15191b,
            #0c0f10
        );

    border:
        1px solid
        var(--off-border);

    border-radius:
        var(--off-radius);

    padding:
        29px;

    box-shadow:
        0 25px 70px
        rgba(0,0,0,.32);

    position:relative;

    overflow:hidden;
}


/* TURUNCU ÇİZGİ */

.off-product-card::before {

    content:"";

    position:absolute;

    top:0;

    left:0;

    width:100%;

    height:3px;

    background:
        linear-gradient(
            90deg,
            var(--off-orange),
            var(--off-orange-2),
            transparent
        );
}


/* CATEGORY */

.off-product-category {

    color:#81878a;

    font-size:11px;

    margin-bottom:11px;

    line-height:1.6;
}

.off-product-category a:hover {

    color:
        var(--off-orange);
}


/* TITLE */

.off-product-title {

    margin:0 0 13px;

    color:#fff;

    font-size:
        clamp(27px,3vw,39px);

    line-height:1.08;

    font-weight:800;

    letter-spacing:-.8px;
}


/* BRAND */

.off-product-brand {

    display:inline-flex;

    align-items:center;

    padding:
        7px 11px;

    background:#fff;

    color:#333;

    border-radius:4px;

    font-size:10px;

    margin-bottom:13px;
}


/* RATING */

.off-rating {

    display:flex;

    align-items:center;

    gap:8px;

    margin-bottom:17px;
}

.off-stars {

    color:
        var(--off-orange);

    font-size:16px;

    letter-spacing:1px;
}

.off-review-count {

    color:#777;

    font-size:11px;
}


/* PRICE */

.off-price {

    color:
        var(--off-orange);

    font-size:34px;

    line-height:1;

    font-weight:900;

    letter-spacing:-1px;

    padding-bottom:23px;

    margin-bottom:21px;

    border-bottom:
        1px solid
        rgba(255,255,255,.08);
}


/* DESCRIPTION */

.off-description {

    color:#c4c8ca;

    font-size:13px;

    line-height:1.7;

    margin-bottom:20px;
}

.off-description p {

    margin:
        0 0 11px;
}

.off-description ul {

    list-style:none;

    padding:0;

    margin:15px 0;
}

.off-description li {

    position:relative;

    padding-left:22px;

    margin-bottom:7px;

    color:#cbd0d2;
}

.off-description li::before {

    content:"✓";

    position:absolute;

    left:0;

    top:0;

    color:
        var(--off-orange);

    font-weight:900;
}


/* ============================================================
   QUICK FEATURES
   ============================================================ */

.off-features {

    display:grid;

    grid-template-columns:
        1fr 1fr;

    gap:7px;

    margin:
        18px 0 20px;
}

.off-feature {

    display:flex;

    align-items:center;

    gap:9px;

    min-height:44px;

    padding:
        8px 10px;

    background:
        rgba(255,255,255,.035);

    border:
        1px solid
        rgba(255,255,255,.07);

    border-radius:8px;

    color:#d8dcde;

    font-size:11px;

    transition:.25s;
}

.off-feature:hover {

    border-color:
        rgba(255,105,0,.4);

    background:
        rgba(255,105,0,.05);
}

.off-feature-icon {

    width:25px;

    height:25px;

    flex-shrink:0;

    border-radius:50%;

    display:flex;

    align-items:center;

    justify-content:center;

    background:
        rgba(255,105,0,.10);

    color:
        var(--off-orange);

    font-size:12px;
}


/* ============================================================
   ACTIONS
   ============================================================ */

.off-actions {

    display:grid;

    grid-template-columns:
        1fr 1fr;

    gap:9px;

    margin-bottom:10px;
}

.off-action {

    height:43px;

    border:
        1px solid
        rgba(255,255,255,.16);

    border-radius:6px;

    background:
        rgba(255,255,255,.025);

    color:#ddd;

    cursor:pointer;

    font-size:12px;

    transition:.25s;
}

.off-action:hover {

    border-color:
        var(--off-orange);

    color:
        var(--off-orange);
}


/* ============================================================
   WHATSAPP
   ============================================================ */

.off-whatsapp {

    width:100%;

    min-height:62px;

    display:flex;

    align-items:center;

    justify-content:center;

    gap:11px;

    border:
        1px solid
        var(--off-orange);

    border-radius:8px;

    background:
        transparent;

    color:#fff;

    cursor:pointer;

    font-size:15px;

    font-weight:800;

    transition:.3s;
}

.off-whatsapp:hover {

    background:
        var(--off-orange);

    transform:
        translateY(-2px);

    box-shadow:
        0 15px 35px
        rgba(255,105,0,.25);
}

.off-whatsapp-icon {

    width:31px;

    height:31px;

    border-radius:50%;

    display:flex;

    align-items:center;

    justify-content:center;

    background:#25d366;

    color:#fff;

    font-size:16px;
}


/* ============================================================
   SHARE
   ============================================================ */

.off-share {

    display:flex;

    align-items:center;

    gap:9px;

    margin-top:20px;

    color:#858b8e;

    font-size:12px;
}

.off-social {

    width:30px;

    height:30px;

    display:flex;

    align-items:center;

    justify-content:center;

    border:
        1px solid
        rgba(255,255,255,.12);

    border-radius:50%;

    color:#aaa;

    transition:.25s;
}

.off-social:hover {

    border-color:
        var(--off-orange);

    color:
        var(--off-orange);
}


/* ============================================================
   META
   ============================================================ */

.off-meta {

    margin-top:18px;

    padding-top:17px;

    border-top:
        1px solid
        rgba(255,255,255,.08);

    color:#686f72;

    font-size:10px;

    line-height:1.8;
}

.off-meta a {

    color:#aaa;
}

.off-meta a:hover {

    color:
        var(--off-orange);
}


/* ============================================================
   TABS
   ============================================================ */

.off-tabs {

    margin-top:28px;

    background:
        linear-gradient(
            145deg,
            #111416,
            #0b0d0e
        );

    border:
        1px solid
        rgba(255,255,255,.08);

    border-radius:
        var(--off-radius);

    overflow:hidden;
}

.off-tab-buttons {

    display:flex;

    border-bottom:
        1px solid
        rgba(255,255,255,.08);

    overflow-x:auto;
}

.off-tab-button {

    position:relative;

    flex-shrink:0;

    padding:
        19px 22px;

    border:0;

    background:none;

    color:#858b8e;

    font-size:12px;

    font-weight:700;

    cursor:pointer;
}

.off-tab-button.active {

    color:
        var(--off-orange);
}

.off-tab-button.active::after {

    content:"";

    position:absolute;

    bottom:-1px;

    left:15px;

    right:15px;

    height:2px;

    background:
        var(--off-orange);
}


/* TAB CONTENT */

.off-tab-content {

    display:none;

    padding:
        27px 30px 35px;

    color:#bfc4c6;

    font-size:13px;

    line-height:1.8;
}

.off-tab-content.active {

    display:block;
}

.off-tab-content h2 {

    color:#fff;

    font-size:21px;

    margin:
        0 0 17px;
}

.off-tab-content p {

    margin-bottom:12px;
}


/* ============================================================
   SPECIFICATIONS TABLE
   ============================================================ */

.off-spec-grid {

    display:grid;

    grid-template-columns:
        1fr 1fr;

    column-gap:60px;
}

.off-spec {

    display:grid;

    grid-template-columns:
        1fr 1fr;

    min-height:43px;

    align-items:center;

    border-bottom:
        1px solid
        rgba(255,105,0,.35);

    font-size:12px;
}

.off-spec strong {

    color:#ddd;

    font-weight:500;
}

.off-spec span {

    color:#858b8e;
}


/* ============================================================
   DESCRIPTION IMAGES / HTML
   ============================================================ */

.off-tab-content img {

    max-width:100%;

    height:auto;

    border-radius:9px;
}

.off-tab-content a {

    color:
        var(--off-orange);
}


/* ============================================================
   RELATED PRODUCTS
   ============================================================ */

.off-related {

    margin-top:45px;

    padding-bottom:60px;
}

.off-related-title {

    display:flex;

    align-items:center;

    justify-content:space-between;

    margin-bottom:20px;
}

.off-related-title h2 {

    margin:0;

    color:#fff;

    font-size:25px;
}


/* ============================================================
   MODAL
   ============================================================ */

.off-modal {

    position:fixed;

    inset:0;

    z-index:999999;

    display:none;

    align-items:center;

    justify-content:center;

    background:
        rgba(0,0,0,.88);

    padding:30px;
}

.off-modal.active {

    display:flex;
}

.off-modal img {

    max-width:
        95vw;

    max-height:
        90vh;

    object-fit:contain;

    border-radius:8px;
}

.off-modal-close {

    position:absolute;

    top:20px;

    right:25px;

    width:45px;

    height:45px;

    border:0;

    border-radius:50%;

    background:#fff;

    color:#111;

    cursor:pointer;

    font-size:22px;
}


/* ============================================================
   DESKTOP
   ============================================================ */

@media(max-width:1100px) {

    .off-header-inner {

        width:
            calc(100% - 30px);
    }

    .off-container {

        width:
            calc(100% - 30px);
    }

    .off-product-grid {

        grid-template-columns:
            minmax(0,1fr)
            minmax(370px,.8fr);
    }

    .off-product-card {

        padding:25px;
    }

}


/* ============================================================
   TABLET
   ============================================================ */

@media(max-width:900px) {

    .off-search {

        display:none;
    }

    .off-product-grid {

        grid-template-columns:
            1fr;
    }

    .off-product-card {

        padding:27px;
    }

    .off-main-image {

        aspect-ratio:
            16 / 10;
    }

}


/* ============================================================
   MOBİL
   ============================================================ */

@media(max-width:600px) {

    .off-header {

        height:64px;
    }

    .off-header-inner {

        width:
            calc(100% - 22px);

        gap:12px;
    }

    .off-logo {

        width:150px;
    }

    .off-logo img {

        max-height:37px;
    }

    .off-logo-text {

        font-size:21px;
    }

    .off-vehicle-button {

        display:none;
    }

    .off-header-actions {

        gap:15px;
    }

    .off-container {

        width:
            calc(100% - 20px);
    }

    .off-breadcrumb {

        padding:
            14px 0;

        font-size:10px;
    }

    .off-gallery {

        padding:7px;

        border-radius:11px;
    }

    .off-main-image {

        aspect-ratio:
            4 / 3;

        border-radius:8px;
    }

    .off-thumbnails {

        grid-template-columns:
            repeat(5,1fr);

        gap:5px;
    }

    .off-thumb:nth-child(n+6) {

        display:none;
    }

    .off-product-card {

        padding:
            21px 17px;

        border-radius:12px;
    }

    .off-product-title {

        font-size:26px;

        line-height:1.08;
    }

    .off-price {

        font-size:30px;
    }

    .off-description {

        font-size:13px;
    }

    .off-features {

        grid-template-columns:
            1fr;
    }

    .off-actions {

        grid-template-columns:
            1fr 1fr;
    }

    .off-tabs {

        margin-top:18px;

        border-radius:12px;
    }

    .off-tab-button {

        padding:
            17px 16px;

        font-size:11px;
    }

    .off-tab-content {

        padding:
            22px 17px 27px;

        font-size:12px;
    }

    .off-spec-grid {

        grid-template-columns:
            1fr;

        column-gap:0;
    }

    .off-spec {

        min-height:45px;
    }

}


/* ============================================================
   VERY SMALL PHONE
   ============================================================ */

@media(max-width:380px) {

    .off-logo {

        width:135px;
    }

    .off-header-action {

        font-size:18px;
    }

    .off-product-title {

        font-size:23px;
    }

    .off-price {

        font-size:28px;
    }

}


/* ============================================================
   BODY SCROLLBAR
   ============================================================ */

.off-product-page::-webkit-scrollbar {

    width:7px;
}

.off-product-page::-webkit-scrollbar-track {

    background:#080a0b;
}

.off-product-page::-webkit-scrollbar-thumb {

    background:#333;

    border-radius:20px;
}

.off-product-page::-webkit-scrollbar-thumb:hover {

    background:
        var(--off-orange);
}

</style>


<div class="off-product-page">


<!-- ==========================================================
     HEADER
     ========================================================== -->

<header class="off-header">

    <div class="off-header-inner">


        <!-- LOGO -->

        <a
            href="<?php echo esc_url(home_url('/')); ?>"
            class="off-logo"
        >

            <?php if ($off_logo): ?>

                <img
                    src="<?php echo esc_url($off_logo); ?>"
                    alt="OFFROADCU"
                >

            <?php else: ?>

                <div class="off-logo-text">
                    OFFROAD<span>CU</span>
                </div>

            <?php endif; ?>

        </a>


        <!-- ARACINI SEÇ -->

        <button
            class="off-vehicle-button"
            type="button"
        >

            ☰

            <span>🚙</span>

            <span>ARACINI SEÇ</span>

            <span>⌄</span>

        </button>


        <!-- SEARCH -->

        <form
            class="off-search"
            action="<?php echo esc_url(home_url('/')); ?>"
            method="get"
        >

            <input
                type="search"
                name="s"
                placeholder="Ürün, kategori veya marka ara..."
            >

            <input
                type="hidden"
                name="post_type"
                value="product"
            >

            <button type="submit">
                ⌕
            </button>

        </form>


        <!-- ACTIONS -->

        <div class="off-header-actions">

            <a
                href="<?php echo esc_url(get_permalink(get_option('woocommerce_myaccount_page_id'))); ?>"
                class="off-header-action"
                title="Hesabım"
            >
                ♙
            </a>


            <a
                href="<?php echo esc_url(wc_get_cart_url()); ?>"
                class="off-header-action"
                title="Sepet"
            >

                🛒

                <?php if (WC()->cart): ?>

                    <span class="off-cart-count">
                        <?php echo WC()->cart->get_cart_contents_count(); ?>
                    </span>

                <?php endif; ?>

            </a>

        </div>

    </div>

</header>



<main class="off-container">


<!-- ==========================================================
     BREADCRUMB
     ========================================================== -->

<div class="off-breadcrumb">

    <a href="<?php echo esc_url(home_url('/')); ?>">
        Anasayfa
    </a>

    <?php foreach ($categories as $category): ?>

        &nbsp; / &nbsp;

        <a
            href="<?php echo esc_url(get_term_link($category)); ?>"
        >
            <?php echo esc_html($category->name); ?>
        </a>

    <?php endforeach; ?>

    &nbsp; / &nbsp;

    <span>
        <?php echo esc_html($product_name); ?>
    </span>

</div>



<!-- ==========================================================
     PRODUCT GRID
     ========================================================== -->

<section class="off-product-grid">


<!-- ==========================================================
     LEFT — GALLERY
     ========================================================== -->

<div class="off-gallery">


    <?php if (!empty($gallery_ids)): ?>

        <div class="off-main-image">

            <?php

            $first_image_url =
                wp_get_attachment_image_url(
                    $gallery_ids[0],
                    'large'
                );

            ?>

            <img
                id="offMainImage"
                src="<?php echo esc_url($first_image_url); ?>"
                alt="<?php echo esc_attr($product_name); ?>"
            >


            <button
                class="off-zoom"
                type="button"
                onclick="offOpenImage()"
            >
                ⌕
            </button>

        </div>


        <!-- THUMBNAILS -->

        <div class="off-thumbnails">

            <?php foreach ($gallery_ids as $index => $image_id): ?>

                <?php

                $thumb =
                    wp_get_attachment_image_url(
                        $image_id,
                        'thumbnail'
                    );

                $large =
                    wp_get_attachment_image_url(
                        $image_id,
                        'large'
                    );

                ?>

                <div
                    class="
                        off-thumb
                        <?php echo $index === 0 ? 'active' : ''; ?>
                    "
                    data-image="<?php echo esc_url($large); ?>"
                    onclick="offChangeImage(this)"
                >

                    <img
                        src="<?php echo esc_url($thumb); ?>"
                        alt=""
                    >

                </div>

            <?php endforeach; ?>

        </div>


        <!-- COUNTER -->

        <div class="off-gallery-counter">

            <button
                class="off-gallery-arrow"
                onclick="offPreviousImage()"
                type="button"
            >
                ‹
            </button>

            <span>
                <strong id="offImageNumber">1</strong>
                /
                <?php echo count($gallery_ids); ?>
            </span>

            <button
                class="off-gallery-arrow"
                onclick="offNextImage()"
                type="button"
            >
                ›
            </button>

        </div>


    <?php else: ?>

        <div
            class="off-main-image"
            style="display:flex;align-items:center;justify-content:center;"
        >

            <?php echo wc_placeholder_img('large'); ?>

        </div>

    <?php endif; ?>


</div>



<!-- ==========================================================
     RIGHT — PRODUCT INFO
     ========================================================== -->

<div class="off-product-card">


    <!-- CATEGORY -->

    <div class="off-product-category">

        <?php foreach ($categories as $index => $category): ?>

            <?php if ($index > 0): ?>
                &nbsp; / &nbsp;
            <?php endif; ?>

            <a href="<?php echo esc_url(get_term_link($category)); ?>">
                <?php echo esc_html($category->name); ?>
            </a>

        <?php endforeach; ?>

    </div>


    <!-- BRAND -->

    <?php

    $brand_terms =
        wp_get_post_terms(
            $product_id,
            'product_brand'
        );

    ?>

    <?php if (!empty($brand_terms) && !is_wp_error($brand_terms)): ?>

        <div class="off-product-brand">

            <?php echo esc_html($brand_terms[0]->name); ?>

        </div>

    <?php endif; ?>


    <!-- TITLE -->

    <h1 class="off-product-title">

        <?php echo esc_html($product_name); ?>

    </h1>


    <!-- RATING -->

    <div class="off-rating">

        <div class="off-stars">

            <?php

            $rating =
                $product->get_average_rating();

            $rating_number =
                $product->get_rating_count();

            ?>

            <?php

            $stars =
                $rating
                    ? round((float)$rating)
                    : 0;

            for ($i = 1; $i <= 5; $i++) {

                echo $i <= $stars
                    ? '★'
                    : '☆';

            }

            ?>

        </div>

        <span class="off-review-count">

            <?php echo intval($rating_number); ?>

            değerlendirme

        </span>

    </div>


    <!-- PRICE -->

    <div class="off-price">

        <?php echo wp_kses_post($product_price); ?>

    </div>


    <!-- DESCRIPTION -->

    <?php

    $short_description =
        $product->get_short_description();

    ?>

    <?php if ($short_description): ?>

        <div class="off-description">

            <?php
            echo wp_kses_post(
                wpautop($short_description)
            );
            ?>

        </div>

    <?php endif; ?>


    <!-- FEATURES -->

    <?php if (!empty($feature_items)): ?>

        <div class="off-features">

            <?php foreach (array_slice($feature_items, 0, 8) as $feature): ?>

                <div class="off-feature">

                    <div class="off-feature-icon">
                        ✓
                    </div>

                    <div>

                        <strong>
                            <?php echo esc_html($feature['name']); ?>
                        </strong>

                        <br>

                        <span>
                            <?php echo esc_html($feature['value']); ?>
                        </span>

                    </div>

                </div>

            <?php endforeach; ?>

        </div>

    <?php endif; ?>


    <!-- ACTIONS -->

    <div class="off-actions">

        <button
            class="off-action"
            type="button"
            onclick="offCompare()"
        >
            ⚖ &nbsp; Karşılaştır
        </button>


        <button
            class="off-action"
            type="button"
            onclick="offWishlist()"
        >
            ♡ &nbsp; İstek Listesi
        </button>

    </div>


    <!-- WHATSAPP -->

    <a
        href="<?php echo esc_url($whatsapp_url); ?>"
        target="_blank"
        rel="noopener"
        class="off-whatsapp"
    >

        <span class="off-whatsapp-icon">
            ☎
        </span>

        <span>
            WhatsApp'tan Sipariş Ver
        </span>

    </a>


    <!-- SHARE -->

    <div class="off-share">

        <span>Paylaş:</span>

        <a
            class="off-social"
            href="https://www.facebook.com/sharer/sharer.php?u=<?php echo rawurlencode(get_permalink()); ?>"
            target="_blank"
            rel="noopener"
        >
            f
        </a>

        <a
            class="off-social"
            href="https://www.instagram.com/"
            target="_blank"
            rel="noopener"
        >
            ◎
        </a>

        <a
            class="off-social"
            href="https://www.youtube.com/"
            target="_blank"
            rel="noopener"
        >
            ▶
        </a>

        <a
            class="off-social"
            href="mailto:?subject=<?php echo rawurlencode($product_name); ?>&body=<?php echo rawurlencode(get_permalink()); ?>"
        >
            ✉
        </a>

    </div>


    <!-- META -->

    <div class="off-meta">

        <?php if ($product_sku): ?>

            Stok kodu:
            <?php echo esc_html($product_sku); ?>

            <br>

        <?php endif; ?>


        Kategoriler:

        <?php

        $cat_links = array();

        foreach ($categories as $cat) {

            $cat_links[] =
                '<a href="' .
                esc_url(get_term_link($cat)) .
                '">' .
                esc_html($cat->name) .
                '</a>';

        }

        echo implode(', ', $cat_links);

        ?>

    </div>


</div>

</section>



<!-- ==========================================================
     TABS
     ========================================================== -->

<section class="off-tabs">


    <div class="off-tab-buttons">

        <button
            class="off-tab-button active"
            onclick="offTab(this,'offDescription')"
        >
            AÇIKLAMA
        </button>

        <button
            class="off-tab-button"
            onclick="offTab(this,'offFeatures')"
        >
            ÖZELLİKLER
        </button>

        <button
            class="off-tab-button"
            onclick="offTab(this,'offShipping')"
        >
            KARGO & TESLİMAT
        </button>

        <button
            class="off-tab-button"
            onclick="offTab(this,'offReturn')"
        >
            İADE & DEĞİŞİM
        </button>

        <button
            class="off-tab-button"
            onclick="offTab(this,'offExtra')"
        >
            EK BİLGİ
        </button>

    </div>



    <!-- DESCRIPTION -->

    <div
        id="offDescription"
        class="off-tab-content active"
    >

        <h2>
            <?php echo esc_html($product_name); ?>
        </h2>

        <?php

        $description =
            $product->get_description();

        if ($description) {

            echo wp_kses_post(
                apply_filters(
                    'the_content',
                    $description
                )
            );

        } else {

            echo '<p>Bu ürün için henüz detaylı açıklama eklenmemiş.</p>';

        }

        ?>

    </div>



    <!-- FEATURES -->

    <div
        id="offFeatures"
        class="off-tab-content"
    >

        <h2>
            Teknik Özellikler
        </h2>


        <?php if (!empty($feature_items)): ?>

            <div class="off-spec-grid">

                <?php foreach ($feature_items as $feature): ?>

                    <div class="off-spec">

                        <strong>
                            <?php echo esc_html($feature['name']); ?>
                        </strong>

                        <span>
                            <?php echo esc_html($feature['value']); ?>
                        </span>

                    </div>

                <?php endforeach; ?>

            </div>

        <?php else: ?>

            <p>
                Bu ürün için teknik özellik bilgisi henüz
                girilmemiş.
            </p>

        <?php endif; ?>

    </div>



    <!-- SHIPPING -->

    <div
        id="offShipping"
        class="off-tab-content"
    >

        <h2>
            Kargo & Teslimat
        </h2>

        <p>
            Ürünlerin kargo ve teslimat koşulları ürün
            bazında değişebilir.
        </p>

        <p>
            Sipariş ve teslimat detayları için
            WhatsApp üzerinden OFFROADCU ekibine
            ulaşabilirsiniz.
        </p>

    </div>



    <!-- RETURN -->

    <div
        id="offReturn"
        class="off-tab-content"
    >

        <h2>
            İade & Değişim
        </h2>

        <p>
            İade ve değişim koşulları için OFFROADCU
            satış ve destek ekibiyle iletişime geçebilirsiniz.
        </p>

    </div>



    <!-- EXTRA -->

    <div
        id="offExtra"
        class="off-tab-content"
    >

        <h2>
            Ek Bilgi
        </h2>

        <?php

        if ($product_sku) {

            echo '<p><strong>Stok Kodu:</strong> ' .
                esc_html($product_sku) .
                '</p>';

        }

        ?>

        <p>
            OFFROADCU ürünleri arazi, kamp ve overland
            kullanım ihtiyaçlarına yönelik olarak
            sunulmaktadır.
        </p>

    </div>


</section>



<!-- ==========================================================
     RELATED PRODUCTS
     ========================================================== -->

<section class="off-related">

    <div class="off-related-title">

        <h2>
            Benzer Off-Road Ürünleri
        </h2>

    </div>


    <?php

    /*
     * WooCommerce related products.
     * WoodMart kartlarının yerine daha sonra
     * OFFROADCU özel kart sistemi bağlanabilir.
     */

    woocommerce_output_related_products();

    ?>

</section>


</main>


<!-- ==========================================================
     IMAGE MODAL
     ========================================================== -->

<div
    id="offImageModal"
    class="off-modal"
    onclick="offCloseImage()"
>

    <button
        class="off-modal-close"
        type="button"
        onclick="event.stopPropagation();offCloseImage();"
    >
        ×
    </button>

    <img
        id="offModalImage"
        src=""
        alt=""
        onclick="event.stopPropagation();"
    >

</div>


</div>


<script>

/* ============================================================
   OFFROADCU PRODUCT JAVASCRIPT
   ============================================================ */

(function(){

    const thumbs =
        document.querySelectorAll('.off-thumb');

    const mainImage =
        document.getElementById('offMainImage');

    const imageNumber =
        document.getElementById('offImageNumber');

    let currentIndex = 0;


    /* --------------------------------------------------------
       IMAGE CHANGE
       -------------------------------------------------------- */

    window.offChangeImage = function(element) {

        if (!mainImage) return;

        const image =
            element.getAttribute('data-image');

        mainImage.src = image;

        thumbs.forEach(function(item){

            item.classList.remove('active');

        });

        element.classList.add('active');

        currentIndex =
            Array.from(thumbs).indexOf(element);

        if (imageNumber) {

            imageNumber.textContent =
                currentIndex + 1;

        }

    };


    /* --------------------------------------------------------
       NEXT
       -------------------------------------------------------- */

    window.offNextImage = function(){

        if (!thumbs.length) return;

        currentIndex++;

        if (currentIndex >= thumbs.length) {

            currentIndex = 0;

        }

        offChangeImage(
            thumbs[currentIndex]
        );

    };


    /* --------------------------------------------------------
       PREVIOUS
       -------------------------------------------------------- */

    window.offPreviousImage = function(){

        if (!thumbs.length) return;

        currentIndex--;

        if (currentIndex < 0) {

            currentIndex =
                thumbs.length - 1;

        }

        offChangeImage(
            thumbs[currentIndex]
        );

    };


    /* --------------------------------------------------------
       KEYBOARD
       -------------------------------------------------------- */

    document.addEventListener(
        'keydown',
        function(e){

            if (e.key === 'ArrowRight') {

                offNextImage();

            }

            if (e.key === 'ArrowLeft') {

                offPreviousImage();

            }

            if (e.key === 'Escape') {

                offCloseImage();

            }

        }
    );


    /* --------------------------------------------------------
       IMAGE MODAL
       -------------------------------------------------------- */

    window.offOpenImage = function(){

        if (!mainImage) return;

        const modal =
            document.getElementById(
                'offImageModal'
            );

        const modalImage =
            document.getElementById(
                'offModalImage'
            );

        modalImage.src =
            mainImage.src;

        modal.classList.add('active');

        document.body.style.overflow =
            'hidden';

    };


    window.offCloseImage = function(){

        const modal =
            document.getElementById(
                'offImageModal'
            );

        modal.classList.remove('active');

        document.body.style.overflow =
            '';

    };


    /* --------------------------------------------------------
       TABS
       -------------------------------------------------------- */

    window.offTab = function(button,id){

        document
            .querySelectorAll('.off-tab-button')
            .forEach(function(btn){

                btn.classList.remove('active');

            });

        document
            .querySelectorAll('.off-tab-content')
            .forEach(function(content){

                content.classList.remove('active');

            });

        button.classList.add('active');

        const target =
            document.getElementById(id);

        if (target) {

            target.classList.add('active');

        }

    };


    /* --------------------------------------------------------
       COMPARE
       -------------------------------------------------------- */

    window.offCompare = function(){

        alert(
            'Ürün karşılaştırma özelliği hazırlanıyor.'
        );

    };


    /* --------------------------------------------------------
       WISHLIST
       -------------------------------------------------------- */

    window.offWishlist = function(){

        alert(
            'İstek listesi özelliği hazırlanıyor.'
        );

    };


})();

</script>


<?php

/*
 * WordPress footer.
 * wp_footer() mutlaka çalışmalı.
 */

wp_footer();

?>