/*

Theme Name: Zeka Kupu Egitim Temasi

Theme URI: https://zekakupuyayinlari.com.tr

Author: Zeka Kupu

Description: Zeka Kupu Yayinlari 1-8. Sinif ve LGS Hazirlik WooCommerce Uyumlu Premium E-Ticaret Temasi.

Version: 1.0.0

License: GNU General Public License v2 or later

Text Domain: zekakupu-tema

*/



:root {

    --primary: #0056b3;

    --primary-dark: #003d80;

    --secondary: #ff6f00;

    --secondary-hover: #e06200;

    --dark: #1e293b;

    --light: #f8fafc;

    --border: #e2e8f0;

    --white: #ffffff;

    --text: #334155;

    --text-muted: #64748b;

    --success: #10b981;

}



* {

    box-sizing: border-box;

    margin: 0;

    padding: 0;

}



body {

    font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;

    color: var(--text);

    background-color: var(--light);

    line-height: 1.5;

    -webkit-font-smoothing: antialiased;

}



a {

    text-decoration: none;

    color: inherit;

    transition: all 0.2s ease;

}



img {

    max-width: 100%;

    height: auto;

    display: block;

}



.container {

    width: 100%;

    max-width: 1280px;

    margin: 0 auto;

    padding: 0 20px;

}



.site-header {

    background: var(--white);

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

    position: sticky;

    top: 0;

    z-index: 1000;

    box-shadow: 0 2px 10px rgba(0,0,0,0.03);

}



.top-bar {

    background: var(--primary);

    color: var(--white);

    font-size: 13px;

    padding: 8px 0;

}



.top-bar .container {

    display: flex;

    justify-content: space-between;

    align-items: center;

}



.top-links a {

    margin-left: 15px;

    font-weight: 600;

}



.header-main {

    display: flex;

    justify-content: space-between;

    align-items: center;

    padding: 15px 0;

    gap: 20px;

}



.site-logo img {

    height: 50px;

    width: auto;

}



.search-wrapper {

    position: relative;

    flex: 1;

    max-width: 500px;

}



.search-form-ajax {

    display: flex;

    position: relative;

}



.search-form-ajax input {

    width: 100%;

    padding: 12px 16px;

    border: 2px solid var(--border);

    border-radius: 8px;

    font-size: 14px;

    outline: none;

    transition: border-color 0.2s;

}



.search-form-ajax input:focus {

    border-color: var(--primary);

}



.ajax-search-results {

    position: absolute;

    top: 100%;

    left: 0;

    right: 0;

    background: var(--white);

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

    border-radius: 8px;

    margin-top: 5px;

    box-shadow: 0 10px 25px rgba(0,0,0,0.1);

    z-index: 1001;

    max-height: 400px;

    overflow-y: auto;

    display: none;

}



.ajax-search-results ul {

    list-style: none;

}



.ajax-search-results li {

    padding: 10px 15px;

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

}



.ajax-search-results li:last-child {

    border-bottom: none;

}



.ajax-search-results a {

    display: flex;

    align-items: center;

    gap: 10px;

}



.header-actions {

    display: flex;

    align-items: center;

    gap: 20px;

}



.header-cart-btn, .header-b2b-btn {

    padding: 10px 18px;

    border-radius: 8px;

    font-weight: 600;

    font-size: 14px;

    display: flex;

    align-items: center;

    gap: 8px;

}



.header-cart-btn {

    background: var(--light);

    color: var(--primary);

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

}



.header-b2b-btn {

    background: var(--secondary);

    color: var(--white);

}



.header-b2b-btn:hover {

    background: var(--secondary-hover);

}



.main-nav {

    background: var(--white);

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

}



.main-nav ul {

    list-style: none;

    display: flex;

    gap: 25px;

}



.main-nav a {

    display: block;

    padding: 15px 0;

    font-weight: 600;

    color: var(--dark);

    font-size: 15px;

}



.main-nav a:hover {

    color: var(--primary);

}



.hero-slider {

    background: linear-gradient(135deg, #e0f2fe 0%, #bae6fd 100%);

    padding: 80px 0;

    position: relative;

    overflow: hidden;

}



.hero-content {

    max-width: 600px;

}



.hero-content h1 {

    font-size: 42px;

    color: var(--dark);

    font-weight: 800;

    line-height: 1.2;

    margin-bottom: 20px;

}



.hero-content p {

    font-size: 18px;

    color: var(--text-muted);

    margin-bottom: 30px;

}



.hero-btn {

    display: inline-block;

    background: var(--primary);

    color: var(--white);

    padding: 14px 28px;

    border-radius: 8px;

    font-weight: 700;

}



.hero-btn:hover {

    background: var(--primary-dark);

}



.class-grid-section {

    padding: 60px 0;

    background: var(--white);

}



.section-title {

    text-align: center;

    font-size: 28px;

    font-weight: 700;

    color: var(--dark);

    margin-bottom: 40px;

}



.class-cards {

    display: grid;

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

    gap: 15px;

}



.class-item {

    background: var(--light);

    border: 2px solid var(--border);

    border-radius: 12px;

    padding: 25px 15px;

    text-align: center;

    font-weight: 700;

    font-size: 16px;

    color: var(--dark);

    transition: all 0.3s ease;

}



.class-item:hover {

    border-color: var(--secondary);

    background: var(--white);

    transform: translateY(-5px);

    box-shadow: 0 10px 20px rgba(0,0,0,0.05);

    color: var(--secondary);

}



.product-section {

    padding: 60px 0;

}



.product-grid {

    display: grid;

    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));

    gap: 30px;

}



.product-item {

    background: var(--white);

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

    border-radius: 12px;

    padding: 20px;

    text-align: center;

    position: relative;

    transition: all 0.3s ease;

}



.product-item:hover {

    transform: translateY(-5px);

    box-shadow: 0 10px 25px rgba(0,0,0,0.05);

}



.product-badge {

    position: absolute;

    top: 15px;

    left: 15px;

    background: var(--secondary);

    color: var(--white);

    padding: 4px 10px;

    font-size: 11px;

    font-weight: 700;

    border-radius: 4px;

    text-transform: uppercase;

}



.product-image {

    margin-bottom: 15px;

    height: 220px;

    display: flex;

    align-items: center;

    justify-content: center;

}



.product-image img {

    max-height: 100%;

    object-fit: contain;

}



.product-title {

    font-size: 16px;

    font-weight: 700;

    color: var(--dark);

    margin-bottom: 10px;

    height: 48px;

    display: -webkit-box;

    -webkit-line-clamp: 2;

    -webkit-box-orient: vertical;

    overflow: hidden;

}



.product-meta-badges {

    display: flex;

    justify-content: center;

    gap: 5px;

    margin-bottom: 10px;

}



.meta-badge {

    font-size: 10px;

    padding: 2px 6px;

    border-radius: 3px;

    font-weight: 600;

}



.meta-badge.video-cozum {

    background: #fee2e2;

    color: #ef4444;

}



.meta-badge.akilli-tahta {

    background: #dcfce7;

    color: #15803d;

}



.product-price-box {

    margin-bottom: 15px;

}



.price del {

    color: var(--text-muted);

    font-size: 13px;

    margin-right: 8px;

}



.price ins {

    text-decoration: none;

    color: var(--primary);

    font-weight: 800;

    font-size: 18px;

}



.add-to-cart-container .button {

    background: var(--primary);

    color: var(--white);

    border: none;

    padding: 10px 20px;

    border-radius: 6px;

    font-weight: 700;

    width: 100%;

    display: block;

    cursor: pointer;

}



.add-to-cart-container .button:hover {

    background: var(--primary-dark);

}



.trust-section {

    background: var(--white);

    padding: 40px 0;

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

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

}



.trust-grid {

    display: grid;

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

    gap: 30px;

}



.trust-item {

    text-align: center;

}



.trust-item h4 {

    font-weight: 700;

    color: var(--dark);

    margin-bottom: 5px;

}



.trust-item p {

    font-size: 14px;

    color: var(--text-muted);

}



.site-footer {

    background: var(--dark);

    color: #94a3b8;

    padding: 60px 0 30px 0;

}



.footer-top {

    display: grid;

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

    gap: 40px;

    margin-bottom: 40px;

}



.footer-logo {

    color: var(--white);

    font-size: 24px;

    font-weight: 800;

    margin-bottom: 15px;

}



.footer-col h3 {

    color: var(--white);

    font-size: 16px;

    font-weight: 700;

    margin-bottom: 20px;

}



.footer-col ul {

    list-style: none;

}



.footer-col li {

    margin-bottom: 10px;

}



.footer-col a:hover {

    color: var(--white);

}



.footer-bottom {

    border-top: 1px solid #334155;

    padding-top: 30px;

    display: flex;

    justify-content: space-between;

    align-items: center;

    font-size: 14px;

}



.single-product-container {

    display: grid;

    grid-template-columns: 1fr 1.2fr;

    gap: 50px;

    background: var(--white);

    padding: 40px;

    border-radius: 16px;

    box-shadow: 0 4px 20px rgba(0,0,0,0.02);

    margin-top: 40px;

}



.product-gallery-outer {

    position: relative;

}



.product-detail-info h1 {

    font-size: 32px;

    color: var(--dark);

    font-weight: 800;

    margin-bottom: 15px;

    line-height: 1.2;

}



.product-actions-block {

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

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

    padding: 25px 0;

    margin: 25px 0;

}



.action-buttons-group {

    display: flex;

    gap: 15px;

    margin-top: 15px;

}



.whatsapp-order-btn {

    background: #25d366;

    color: var(--white);

    padding: 12px 24px;

    border-radius: 8px;

    font-weight: 700;

    display: inline-flex;

    align-items: center;

    gap: 8px;

}



.whatsapp-order-btn:hover {

    background: #1ebd58;

}



.tab-system-wrapper {

    margin-top: 50px;

    background: var(--white);

    padding: 30px;

    border-radius: 16px;

    box-shadow: 0 4px 20px rgba(0,0,0,0.02);

}



.tab-header-list {

    display: flex;

    border-bottom: 2px solid var(--border);

    list-style: none;

    margin-bottom: 25px;

    gap: 20px;

}



.tab-header-list li a {

    padding: 12px 20px;

    font-weight: 700;

    font-size: 15px;

    display: block;

    color: var(--text-muted);

    border-bottom: 2px solid transparent;

    margin-bottom: -2px;

}



.tab-header-list li.active a {

    color: var(--primary);

    border-color: var(--primary);

}



.tab-panel {

    display: none;

}



.tab-panel.active {

    display: block;

}



@media (max-width: 1024px) {

    .class-cards {

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

    }

    .footer-top {

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

    }

}



@media (max-width: 768px) {

    .header-main {

        flex-direction: column;

        align-items: stretch;

    }

    .class-cards {

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

    }

    .single-product-container {

        grid-template-columns: 1fr;

        padding: 20px;

    }

    .footer-top {

        grid-template-columns: 1fr;

    }

    .trust-grid {

        grid-template-columns: 1fr;

    }

    .action-buttons-group {

        flex-direction: column;

    }

}

/* Mağaza Sayfası Ürün Kartlarını Sizin Tasarımla Eşitle */
.woocommerce ul.products li.product, 
.woocommerce-page ul.products li.product {
    background: var(--white);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 20px;
    text-align: center;
    transition: all 0.3s ease;
}

.woocommerce ul.products li.product:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 25px rgba(0,0,0,0.05);
}

/* Fiyat ve Butonları Sizin Style'a Uydur */
.woocommerce ul.products li.product .price {
    color: var(--primary);
    font-weight: 800;
    margin-bottom: 10px;
}

.woocommerce ul.products li.product .button {
    background: var(--primary) !important;
    color: var(--white) !important;
    border-radius: 6px !important;
    font-weight: 700 !important;
    padding: 10px 20px !important;
}

/* Sepet Tablosunu Sizin Temaya Göre Düzenle */
.woocommerce table.shop_table {
    border: 1px solid var(--border);
    border-radius: 12px;
    overflow: hidden;
}

.woocommerce table.shop_table th {
    background: var(--light);
    color: var(--dark);
}

.woocommerce #respond input#submit, 
.woocommerce a.button, 
.woocommerce button.button {
    background: var(--primary) !important;
    color: var(--white) !important;
    border-radius: 8px !important;
}