/* ==========================================================================
   TEMA: Bugday - by avusor | 2026
   ========================================================================== */

:root {
    --primary-color: #728156;
    --primary-hover: #5a6644;
    --secondary-color: #D4A373;
    --secondary-hover: #bc8f63;
    --text-color: #2C3E2D;
    --text-white: #ffffff;
    --text-muted: #6C757D;
    --bg-light: #FDFCF8;
    --card-bg: #FFFFFF;
    --border-color: #EFEBE1;
    --border-radius: 12px;
    --box-shadow: 0 4px 15px rgba(114, 129, 86, 0.05);
}

body {font-family: 'Poppins', 'Roboto', sans-serif;background-color: var(--bg-light);color: var(--text-color);margin: 0;padding: 0;line-height: 1.6;}
h1, h2, h3, h4, h5, h6 { color: var(--secondary-color); font-weight: 600; margin-top: 0; font-family: 'Poppins', sans-serif; }
a { text-decoration: none; color: inherit; transition: color 0.2s ease; }
a:hover { color: var(--primary-color); }
ul, ol { list-style: none; padding: 0; margin: 0; }
.text-primary { color: var(--primary-color) !important; }
.bg-primary { background-color: var(--primary-color) !important; }
.btn-primary { background-color: var(--primary-color); border-color: var(--primary-color); color: #fff; font-weight: 500; transition: all 0.3s ease; }
.btn-primary:hover { background-color: var(--primary-hover); border-color: var(--primary-hover); color: #fff; }
.text-secondary { color: var(--secondary-color) !important; }
.bg-secondary { background-color: var(--secondary-color) !important; }
.btn-secondary { background-color: var(--secondary-color); border-color: var(--secondary-color); color: #fff; font-weight: 500; transition: all 0.3s ease; }
.btn-secondary:hover { background-color: var(--secondary-hover); border-color: var(--secondary-hover); color: #fff; }
.card { background-color: var(--card-bg); border: 1px solid var(--border-color); border-radius: var(--border-radius); box-shadow: var(--box-shadow); transition: all 0.3s ease; }
.form-control, .form-select { border: 1px solid var(--border-color); border-radius: var(--border-radius); padding: 0.75rem 1rem; transition: all 0.3s ease; background-color: #fff; }
.form-control:focus, .form-select:focus { border-color: var(--secondary-color); box-shadow: 0 0 0 0.25rem rgba(212, 163, 115, 0.2); }
.badge { font-weight: 500; padding: 0.5em 0.8em; border-radius: 6px; }
.bugday-section-header {display: flex;justify-content: space-between;align-items: center;margin-bottom: 20px;padding-bottom: 10px;border-bottom: 2px solid var(--border-color);}
.bugday-section-title {font-size: 1.25rem;font-weight: 700;margin: 0;position: relative;padding-bottom: 10px;margin-bottom: -12px;border-bottom: 2px solid var(--primary-color);}
.btn-bugday-link {font-size: 0.9rem;color: var(--text-color);font-weight: 500;}
.btn-bugday-link:hover {color: var(--primary-color);}

.bugday-horizontal-menu { display: flex; gap: 30px; margin: 0; padding: 15px 0; list-style: none; justify-content: center; font-family: 'Poppins', sans-serif; }
.bugday-horizontal-menu > li > a { font-weight: 600; font-size: 14px; color: var(--text-dark); text-transform: uppercase; letter-spacing: 0.5px; padding: 10px 0; position: relative; }
.bugday-horizontal-menu > li > a::after { content: ''; position: absolute; bottom: 0; left: 0; width: 0; height: 2px; background-color: var(--primary-color); transition: all 0.3s ease; }
.bugday-horizontal-menu > li:hover > a::after { width: 100%; }
.bugday-has-sub { position: relative; }
.bugday-dropdown { position: absolute; top: 100%; left: 0; background: #fff; min-width: 220px; box-shadow: 0 4px 15px rgba(0,0,0,0.05); border-radius: 8px; border: 1px solid var(--border-color); opacity: 0; visibility: hidden; transition: all 0.3s ease; transform: translateY(10px); z-index: 1000; padding: 10px 0; }
.bugday-has-sub:hover .bugday-dropdown { opacity: 1; visibility: visible; transform: translateY(0); }
.bugday-dropdown li a { display: block; padding: 8px 20px; font-size: 14px; color: var(--text-color); font-weight: 500; transition: all 0.3s ease; }
.bugday-dropdown li a:hover { background-color: var(--bg-light); color: var(--primary-color); padding-left: 25px; }
.search-box { display: flex; background: var(--bg-light); border-radius: 50px; overflow: hidden; border: 1px solid var(--border-color); transition: all 0.3s ease; }
.search-box:focus-within { border-color: var(--primary-color); background: #fff; box-shadow: 0 0 0 3px rgba(114, 129, 86, 0.1); }
.search-box input { border: none; background: transparent; padding: 12px 20px; width: 400px; font-size: 14px; outline: none; color: var(--text-dark); }
.search-box button { background: var(--secondary-color); color: #fff; border: none; padding: 0 25px; cursor: pointer; transition: all 0.3s ease; }
.search-box button:hover { background: var(--secondary-hover); }
.header-actions { display: flex; gap: 25px; align-items: center; }
.action-item { display: flex; flex-direction: column; align-items: center; color: var(--text-dark); text-decoration: none; position: relative; gap: 4px; transition: all 0.3s ease; }
.action-item i { font-size: 20px; color: var(--primary-color); transition: all 0.3s ease; }
.action-item span { font-size: 12px; font-weight: 500; }
.action-item:hover { color: var(--secondary-color); }
.action-item:hover i { color: var(--secondary-color); transform: translateY(-2px); }
.badge-count { position: absolute; top: -6px; right: 6px; background: var(--secondary-color); color: #fff; font-size: 10px; font-weight: 700; width: 18px; height: 18px; border-radius: 50%; display: flex; align-items: center; justify-content: center; border: 2px solid #fff; }
.top-bar { background-color: var(--bg-light); border-bottom: 1px solid var(--border-color); padding: 8px 0; font-size: 13px; }
.top-bar a { color: var(--text-muted); font-weight: 500; transition: all 0.3s ease; }
.top-bar a:hover { color: var(--primary-color); }
.header-grid { display: flex; justify-content: space-between; align-items: center; padding: 20px 0; }
@media (max-width: 991px) { .search-box input { width: 100%; } .header-grid { padding: 15px 12px; } }

.bugday-slider-container { margin-top: 2rem; margin-bottom: 3rem; }
.bugday-slider-wrapper { border-radius: 20px; overflow: hidden; box-shadow: 0 10px 30px rgba(0,0,0,0.06); position: relative; background: var(--bg-light); }
.bugday-slider-img { width: 100%; height: 500px; object-fit: cover; transform: scale(1.08); transition: transform 6s cubic-bezier(0.25, 1, 0.5, 1); }
.carousel-item.active .bugday-slider-img { transform: scale(1); }
.bugday-slider-card {position: absolute;top: 50%;left: 8%;transform: translateY(-50%);background: rgba(253, 252, 248, 0.95);backdrop-filter: blur(8px);border: 1px solid rgba(239, 235, 225, 0.8);padding: 45px 40px;border-radius: 16px;max-width: 480px;text-align: left;box-shadow: 0 15px 35px rgba(0,0,0,0.08);opacity: 0;animation: sliderCardFadeIn 0.8s ease forwards 0.3s;z-index: 10;}
@keyframes sliderCardFadeIn {from { opacity: 0; margin-top: 30px; }
    to { opacity: 1; margin-top: 0; }
}
.bugday-slider-title { font-family: 'Poppins', sans-serif; font-size: 2.2rem; font-weight: 700; color: var(--text-dark); line-height: 1.2; margin-bottom: 15px; letter-spacing: -0.5px; }
.bugday-slider-desc { font-family: 'Inter', sans-serif; font-size: 1.05rem; color: var(--text-muted); margin-bottom: 30px; line-height: 1.6; }
.btn-slider-action { background-color: var(--primary-color); color: #fff; font-weight: 600; padding: 12px 28px; border-radius: 8px; transition: all 0.3s ease; border: none; display: inline-flex; align-items: center; gap: 10px; }
.btn-slider-action:hover { background-color: var(--primary-hover); color: #fff; transform: translateY(-2px); box-shadow: 0 6px 15px rgba(114, 129, 86, 0.3); }
.bugday-nav-btn { width: 45px; height: 45px; background: #fff; color: var(--primary-color); border-radius: 50%; display: flex; align-items: center; justify-content: center; box-shadow: 0 4px 12px rgba(0,0,0,0.15); transition: all 0.3s ease; opacity: 0; font-size: 1.1rem; }
.bugday-slider-wrapper:hover .bugday-nav-btn { opacity: 1; }
.bugday-nav-btn:hover { background: var(--primary-color); color: #fff; }
.carousel-control-prev, .carousel-control-next { width: 80px; opacity: 1; }
.bugday-indicators { position: absolute; bottom: 25px; left: 50%; transform: translateX(-50%); display: flex; gap: 10px; margin: 0; padding: 0; list-style: none; z-index: 15; }
.bugday-indicators button { width: 10px !important; height: 10px !important; border-radius: 50%; background-color: rgba(255,255,255,0.6) !important; border: none !important; transition: all 0.4s ease !important; text-indent: -999px; }
.bugday-indicators button.active { width: 30px !important; border-radius: 10px !important; background-color: var(--primary-color) !important; }

@media (max-width: 768px) {
    .bugday-slider-img { height: 450px; }
    .bugday-slider-card { top: auto; bottom: 15%; left: 5%; right: 5%; transform: none; padding: 30px 25px; max-width: none; text-align: center; }
    .bugday-slider-title { font-size: 1.6rem; }
    .bugday-slider-desc { font-size: 0.95rem; margin-bottom: 20px; }
    .bugday-nav-btn { display: none; /* Mobilde okları gizle, kaydırma yeterli */ }
}

.bugday-product-card {background: #fff;border: 1px solid var(--border-color);border-radius: 16px;overflow: hidden;transition: all 0.3s ease;height: 100%;display: flex;flex-direction: column;position: relative;}
.bugday-product-card:hover {box-shadow: 0 10px 25px rgba(114, 129, 86, 0.1);transform: translateY(-5px);border-color: var(--secondary-color);}
.card-image-area {position: relative;padding: 10px;overflow: hidden;}
.card-image-area .main-img {border-radius: 12px;transition: transform 0.5s ease;width: 100%;aspect-ratio: 1/1;object-fit: cover;}
.bugday-product-card:hover .main-img {transform: scale(1.05);}
.bugday-fav-btn {position: absolute;top: 20px;right: 20px;width: 35px;height: 35px;background: #fff;border-radius: 50%;display: flex;align-items: center;justify-content: center;cursor: pointer;z-index: 5;box-shadow: 0 4px 10px rgba(0,0,0,0.05);transition: all 0.3s ease;color: var(--text-muted);}
.bugday-fav-btn:hover {transform: scale(1.1);color: var(--primary-color);}
.bugday-fav-btn.active {color: #e74c3c;background: #fff;}
.bugday-badges {position: absolute;top: 20px;left: 20px;display: flex;flex-direction: column;gap: 5px;z-index: 5;}
.badge-item {font-size: 10px;font-weight: 700;padding: 4px 8px;border-radius: 6px;text-transform: uppercase;}
.card-body-area {padding: 15px;display: flex;flex-direction: column;flex-grow: 1;text-align: center;}
.bugday-product-brand {font-size: 11px;font-weight: 600;color: var(--secondary-color);text-transform: uppercase;margin-bottom: 5px;letter-spacing: 0.5px;}
.bugday-product-title {font-size: 14px;font-weight: 600;color: var(--text-dark);margin-bottom: 12px;display: -webkit-box;-webkit-line-clamp: 2;-webkit-box-orient: vertical;overflow: hidden;height: 42px;line-height: 1.5;}
.bugday-price-box {margin-bottom: 15px;display: flex;flex-direction: column;align-items: center;gap: 2px;}
.old-price {font-size: 12px;color: var(--text-muted);text-decoration: line-through;}
.current-price {font-size: 18px;font-weight: 800;color: var(--primary-color);}
.current-price small {font-size: 12px;font-weight: 600;}
.price-login-info {font-size: 13px;color: var(--secondary-color);font-weight: 600;}
.card-action-area {margin-top: auto;}
.btn-bugday-cart {background: var(--primary-color);color: #fff;border: none;padding: 10px 15px;border-radius: 10px;font-weight: 600;font-size: 13px;transition: all 0.3s ease;display: flex;align-items: center;justify-content: center;gap: 8px;}
.btn-bugday-cart:hover {background: var(--primary-hover);transform: translateY(-2px);}
.btn-bugday-cart.outline {background: transparent;border: 1.5px solid var(--primary-color);color: var(--primary-color);}
.btn-bugday-cart.outline:hover {background: var(--primary-color);color: #fff;}
.btn-bugday-cart.out-of-stock {background: #f8f9fa;color: #cbd5e1;cursor: not-allowed;}



















.bugday-trust-bar {padding: 20px 0;margin-bottom: 20px;}
.trust-wrapper {background: #fff;border: 1px solid var(--border-color);border-radius: 20px;padding: 30px 20px;box-shadow: var(--box-shadow);}
.trust-item {display: flex;align-items: center;gap: 15px;justify-content: center;}
.trust-icon {width: 50px;height: 50px;background: var(--bg-light);color: var(--primary-color);display: flex;align-items: center;justify-content: center;border-radius: 12px;font-size: 1.4rem;transition: all 0.3s ease;}
.trust-item:hover .trust-icon {background: var(--primary-color);color: #fff;transform: scale(1.1) rotate(5deg);}
.trust-title {font-size: 0.95rem;font-weight: 700;margin: 0;color: var(--text-dark);font-family: 'Poppins', sans-serif;}
.trust-text {font-size: 0.8rem;color: var(--text-muted);margin: 0;}
@media (max-width: 991px) {.trust-item {flex-direction: column;text-align: center;}.trust-wrapper {padding: 30px 10px;}}
@media (max-width: 575px) {.trust-title {font-size: 0.85rem;}.trust-text {font-size: 0.75rem;}.trust-icon {width: 40px;height: 40px;font-size: 1.1rem;}}

.bugday-footer {background-color: var(--text-dark);color: #fff;padding-top: 0;position: relative;overflow: hidden;}
.footer-wave {position: relative;top: 0;left: 0;width: 100%;overflow: hidden;line-height: 0;transform: rotate(180deg);background-color: var(--bg-light);}
.footer-wave svg {display: block;width: calc(100% + 1.3px);height: 60px;}
.footer-wave .shape-fill {fill: var(--text-dark);}
.footer-brand-box {margin-top: 40px;}
.footer-about-text {color: #6C757D;font-size: 0.95rem;line-height: 1.8;margin-bottom: 25px;}
.footer-social-links {display: flex;gap: 12px;}
.footer-social-links a {width: 40px;height: 40px; background: rgba(153,153,153,0.53);color: #fff;display: flex;align-items: center;justify-content: center;border-radius: 10px;transition: all 0.3s ease;}
.footer-social-links a:hover {background: var(--primary-color);transform: translateY(-3px);}
.footer-heading {font-size: 1.15rem;font-weight: 700;margin-bottom: 25px;position: relative;padding-bottom: 12px;color: #728156;margin-top: 40px;}
.footer-heading::after {content: '';position: absolute;bottom: 0;left: 0;width: 35px;height: 3px;background: var(--secondary-color);border-radius: 2px;}
.footer-nav-list {list-style: none;padding: 0;margin: 0;}
.footer-nav-list li {margin-bottom: 12px;}
.footer-nav-list li a {color: #6C757D;font-size: 0.95rem;transition: all 0.2s ease;}
.footer-nav-list li a:hover {color: var(--secondary-color);padding-left: 5px;}
.footer-contact-info .contact-item {display: flex;align-items: flex-start;gap: 15px;margin-bottom: 20px;}
.footer-contact-info .contact-item i {color: var(--primary-color);font-size: 1.1rem;margin-top: 3px;}
.footer-contact-info .contact-item span, .footer-contact-info .contact-item a {color: #6C757D;font-size: 0.95rem;}
.footer-copyright {background: rgba(0,0,0,0.2);padding: 25px 0;margin-top: 50px;border-top: 1px solid rgba(255,255,255,0.05);}
.footer-copyright p {color: #888;font-size: 0.9rem;}
.footer-payment-icons {max-height: 35px;opacity: 0.8;}
.mobile-nav {position: fixed;bottom: 0;left: 0;width: 100%;height: 65px;background: #fff;display: flex;justify-content: space-around;align-items: center;box-shadow: 0 -5px 20px rgba(0,0,0,0.1);z-index: 1000;border-top: 1px solid var(--border-color);}
.mob-nav-link {display: flex;flex-direction: column;align-items: center;text-decoration: none;color: var(--text-muted);font-size: 0.75rem;}
.mob-nav-link i {font-size: 1.3rem;margin-bottom: 3px;}
.mob-nav-link.active {color: var(--primary-color);}
.mob-cart-count {position: absolute;top: 5px;right: 15px;padding: 3px 6px;font-size: 0.65rem;}
.bugday-cookie-bar {position: fixed;bottom: 20px;left: 20px;right: 20px;background: #fff;box-shadow: 0 10px 40px rgba(0,0,0,0.15);padding: 25px;border-radius: 20px;z-index: 9999;border: 1px solid var(--border-color);animation: cookieSlideUp 0.6s ease forwards;}
.cookie-content {font-size: 0.9rem;color: var(--text-color);line-height: 1.6;}
@keyframes cookieSlideUp {from {transform: translateY(120%);}to {transform: translateY(0);}}
@media (max-width: 991px) {.bugday-cookie-bar {bottom: 80px;}}




























.bottom-nav-wrapper { background-color: #fff; border-bottom: 1px solid var(--border-color); box-shadow: 0 4px 6px -1px rgba(0,0,0,0.05); }
.all-categories-btn { background-color: var(--primary-color); color: #fff; padding: 15px 25px; font-weight: 700; font-size: 14px; display: flex; align-items: center; gap: 12px; cursor: pointer; min-width: 240px; text-transform: uppercase; letter-spacing: 0.5px; }
.nav-links-area { display: flex; gap: 20px; margin: 0; padding: 0; list-style: none; align-items: center; }
.nav-links-area a { color: var(--secondary-color); text-decoration: none; font-weight: 600; font-size: 14px; padding: 15px 5px; display: block; transition: color 0.2s; }
.nav-links-area a:hover { color: var(--primary-color); }
.mega-dropdown-menu { width: 240px; border-radius: 0 0 8px 8px; border: 1px solid var(--border-color); border-top: none; box-shadow: 0 10px 25px rgba(0,0,0,0.08); margin-top: 0 !important; padding: 0; }
.mega-dropdown-menu .dropdown-item { padding: 12px 25px; font-size: 14px; font-weight: 500; border-bottom: 1px solid var(--bg-light); color: var(--secondary-color); transition: all 0.2s; }
.mega-dropdown-menu .dropdown-item:last-child { border-bottom: none; }
.mega-dropdown-menu .dropdown-item:hover { background-color: #f0fdf4; color: var(--primary-color); padding-left: 30px; }
@media (max-width: 991px) { .header-grid { grid-template-columns: 1fr auto; gap: 15px; padding: 15px 10px; } .search-area { grid-column: 1 / -1; order: 3; } }

/* --- NATIVE: PRODUCT CARD STYLES --- */
.product-card { background-color: #fff; border: 1px solid var(--border-color); border-radius: var(--border-radius); transition: all 0.2s ease; overflow: hidden; position: relative; display: flex; flex-direction: column; height: 100%; }
.product-card:hover { border-color: var(--primary-color); box-shadow: var(--box-shadow); }
.btn-fav-trigger { position: absolute; top: 12px; right: 12px; width: 34px; height: 34px; background: #fff; border: 1px solid var(--border-color); border-radius: 50%; color: #9ca3af; display: flex; align-items: center; justify-content: center; z-index: 10; transition: all 0.2s; cursor: pointer; box-shadow: 0 2px 4px rgba(0,0,0,0.02); }
.btn-fav-trigger:hover, .btn-fav-trigger.active { color: var(--primary-color); border-color: var(--primary-color); background-color: #ecfdf5; }
.product-badges { position: absolute; top: 12px; left: 12px; display: flex; flex-direction: column; gap: 6px; z-index: 10; }
.product-badge { font-size: 11px; font-weight: 600; padding: 4px 8px; border-radius: 4px; color: #fff; line-height: 1; letter-spacing: 0.5px; }
.badge-new { background-color: #3b82f6; }
.badge-discount { background-color: #ef4444; }
.badge-shipping { background-color: var(--primary-color); }
.product-image-link { display: flex; padding: 20px; height: 230px; align-items: center; justify-content: center; }
.product-image-link img { max-height: 100%; max-width: 100%; object-fit: contain; transition: transform 0.3s; }
.product-card:hover .product-image-link img { transform: scale(1.05); }
.product-info { padding: 0 15px 15px 15px; flex-grow: 1; display: flex; flex-direction: column; }
.product-brand { font-size: 12px; color: #6b7280; font-weight: 600; text-transform: uppercase; margin-bottom: 4px; display: inline-block; }
.product-title { font-size: 14px; color: var(--secondary-color); font-weight: 500; line-height: 1.4; margin-bottom: 12px; height: 39px; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.product-price-container { margin-top: auto; }
.old-price { font-size: 13px; color: #9ca3af; text-decoration: line-through; margin-bottom: 2px; }
.current-price { font-size: 18px; font-weight: 700; color: var(--primary-color); }
.price-currency { font-size: 14px; font-weight: 600; }
.product-action { padding: 0 15px 15px 15px; }
.btn-card { width: 100%; padding: 10px 0; font-size: 14px; font-weight: 600; border-radius: 6px; text-align: center; border: 1px solid transparent; transition: all 0.2s; cursor: pointer; }
.btn-add-cart { background-color: var(--primary-color); color: #fff; }
.btn-add-cart:hover { background-color: var(--primary-hover); }
.btn-options { background-color: #f3f4f6; color: var(--text-color); border-color: var(--border-color); }
.btn-options:hover { background-color: #e5e7eb; color: var(--secondary-color); }
.btn-out-of-stock { background-color: #f9fafb; color: #9ca3af; border-color: #e5e7eb; cursor: not-allowed; }

/* --- NATIVE: BRANDS SECTION STYLES --- */
.brand-card { display: flex; align-items: center; justify-content: center; height: 90px; background-color: #fff; border: 1px solid var(--border-color); border-radius: var(--border-radius); transition: all 0.3s ease; padding: 15px; text-decoration: none; overflow: hidden; }
.brand-card:hover { border-color: var(--primary-color); box-shadow: 0 4px 15px rgba(0,0,0,0.04); transform: translateY(-3px); }
.brand-card img { max-width: 100%; max-height: 100%; object-fit: contain; filter: grayscale(100%); opacity: 0.6; transition: all 0.3s ease; }
.brand-card:hover img { filter: grayscale(0%); opacity: 1; }
.brand-text { font-size: 13px; font-weight: 700; color: #9ca3af; text-transform: uppercase; letter-spacing: 0.5px; transition: color 0.3s ease; }
.brand-card:hover .brand-text { color: var(--primary-color); }

/* --- NATIVE: USER PANEL SIDEBAR STYLES --- */
.user-sidebar { background-color: #fff; border: 1px solid var(--border-color); border-radius: var(--border-radius); overflow: hidden; }
.user-sidebar-header { background-color: #ffffff; padding: 30px 20px; text-align: center; border-bottom: 1px solid var(--border-color); }
.user-avatar { width: 70px; height: 70px; background-color: var(--primary-color); color: #fff; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 28px; font-weight: bold; margin: 0 auto 15px auto; box-shadow: 0 4px 10px rgba(16, 185, 129, 0.2); }
.user-menu-item { padding: 15px 20px; color: var(--text-color); text-decoration: none; font-size: 14px; font-weight: 500; display: flex; align-items: center; border-left: 3px solid transparent; border-bottom: 1px solid var(--bg-light); transition: all 0.2s; }
.user-menu-item i { width: 24px; font-size: 16px; color: #9ca3af; transition: color 0.2s; }
.user-menu-item:hover, .user-menu-item.active { background-color: #f0fdf4; color: var(--primary-color); border-left-color: var(--primary-color); }
.user-menu-item:hover i, .user-menu-item.active i { color: var(--primary-color); }
.user-menu-logout { color: #ef4444; border-top: 1px solid var(--border-color); border-bottom: none; }
.user-menu-logout i { color: #f87171; }
.user-menu-logout:hover { background-color: #fef2f2; color: #dc2626; border-left-color: #ef4444; }
.user-menu-logout:hover i { color: #dc2626; }

/* --- NATIVE: 404 ERROR PAGE STYLES --- */
.error-page-wrapper { min-height: 60vh; display: flex; align-items: center; justify-content: center; }
.error-number { font-size: 140px; font-weight: 800; line-height: 1; color: var(--primary-color); text-shadow: 0 10px 20px rgba(16, 185, 129, 0.15); letter-spacing: -5px; margin-bottom: 10px; }
.search-box-404 form { display: flex; max-width: 500px; margin: 0 auto; background: #fff; border: 2px solid var(--border-color); border-radius: var(--border-radius); overflow: hidden; transition: border-color 0.3s; }
.search-box-404 form:focus-within { border-color: var(--primary-color); }
.search-box-404 input { flex-grow: 1; border: none; padding: 15px 20px; outline: none; font-size: 15px; }
.search-box-404 button { background: var(--bg-light); color: var(--secondary-color); border: none; padding: 0 25px; cursor: pointer; transition: all 0.2s; font-size: 18px; }
.search-box-404 button:hover { background: var(--primary-color); color: #fff; }
.quick-link-card { display: flex; flex-direction: column; align-items: center; padding: 25px 15px; background: #fff; border: 1px solid var(--border-color); border-radius: var(--border-radius); text-decoration: none; color: var(--text-color); transition: all 0.3s ease; box-shadow: var(--box-shadow); height: 100%; }
.quick-link-card i { font-size: 32px; color: #9ca3af; margin-bottom: 12px; transition: color 0.3s; }
.quick-link-card span { font-weight: 600; font-size: 14px; transition: color 0.3s; }
.quick-link-card:hover { border-color: var(--primary-color); transform: translateY(-3px); box-shadow: 0 6px 15px rgba(0,0,0,0.05); }
.quick-link-card:hover i, .quick-link-card:hover span { color: var(--primary-color); }

/* --- NATIVE: MY ADDRESSES STYLES --- */
.address-card { background-color: #fff; border: 1px solid var(--border-color); border-radius: var(--border-radius); height: 100%; display: flex; flex-direction: column; position: relative; transition: all 0.3s ease; overflow: hidden; }
.address-card:hover { box-shadow: var(--box-shadow); border-color: #d1d5db; }
.address-card.is-default { border-color: var(--primary-color); background-color: #f0fdf4; }
.address-card.is-default:hover { box-shadow: 0 4px 15px rgba(16, 185, 129, 0.1); }
.address-header { padding: 16px 20px; border-bottom: 1px solid var(--border-color); display: flex; justify-content: space-between; align-items: center; }
.address-card.is-default .address-header { border-bottom-color: rgba(16, 185, 129, 0.2); }
.address-title { font-size: 15px; font-weight: 600; color: var(--secondary-color); display: flex; align-items: center; gap: 8px; }
.address-card.is-default .address-title { color: var(--primary-color); }
.default-badge { background-color: var(--primary-color); color: #fff; font-size: 11px; font-weight: 600; padding: 3px 8px; border-radius: 4px; }
.address-body { padding: 20px; flex-grow: 1; font-size: 14px; color: var(--text-color); line-height: 1.6; }
.address-actions { padding: 15px 20px; border-top: 1px solid var(--border-color); display: flex; gap: 10px; background-color: var(--bg-light); }
.address-card.is-default .address-actions { background-color: transparent; border-top-color: rgba(16, 185, 129, 0.2); }
.btn-address-action { flex: 1; padding: 8px 0; font-size: 13px; font-weight: 500; text-align: center; border-radius: 6px; background-color: #fff; border: 1px solid var(--border-color); color: var(--secondary-color); text-decoration: none; transition: all 0.2s; cursor: pointer; }
.btn-address-action:hover { background-color: var(--bg-light); color: var(--primary-color); border-color: #9ca3af; }
.btn-address-delete { flex: 0 0 auto; width: 40px; color: #ef4444; }
.btn-address-delete:hover { background-color: #fef2f2; color: #dc2626; border-color: #fca5a5; }
.btn-add-new { border: 2px dashed var(--border-color); background-color: var(--bg-light); display: flex; flex-direction: column; align-items: center; justify-content: center; color: var(--text-color); font-weight: 500; min-height: 250px; cursor: pointer; transition: all 0.3s; }
.btn-add-new i { font-size: 32px; color: #9ca3af; margin-bottom: 15px; transition: all 0.3s; }
.btn-add-new:hover { border-color: var(--primary-color); color: var(--primary-color); background-color: #f0fdf4; }
.btn-add-new:hover i { color: var(--primary-color); transform: scale(1.1); }
.native-modal .modal-content { border-radius: var(--border-radius); border: none; }
.native-modal .form-control, .native-modal .form-select { border-color: var(--border-color); box-shadow: none !important; border-radius: 6px; }
.native-modal .form-control:focus, .native-modal .form-select:focus {border-color: var(--primary-color);box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.15) !important;}

/* --- NATIVE: SEARCH PAGE STYLES --- */
.search-header-box { background-color: #fff; border-radius: var(--border-radius); padding: 25px 30px; margin-bottom: 30px; border: 1px solid var(--border-color); display: flex; flex-direction: column; justify-content: center; box-shadow: var(--box-shadow); }
.search-title { font-size: 1.25rem; color: var(--secondary-color); margin-bottom: 8px; font-weight: 500; }
.search-title strong { color: var(--primary-color); font-weight: 700; }
.search-meta { font-size: 0.9rem; color: #6b7280; }
.empty-state-card { background-color: #fff; border: 1px dashed #d1d5db; border-radius: var(--border-radius); padding: 60px 20px; text-align: center; max-width: 600px; margin: 40px auto; box-shadow: var(--box-shadow); }
.empty-state-icon { width: 80px; height: 80px; background-color: #f0fdf4; color: var(--primary-color); border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: 32px; margin-bottom: 20px; box-shadow: 0 4px 10px rgba(16, 185, 129, 0.1); }
.empty-state-title { font-size: 1.25rem; font-weight: 700; color: var(--secondary-color); margin-bottom: 12px; }
.empty-state-desc { color: #6b7280; margin-bottom: 25px; font-size: 0.95rem; line-height: 1.6; }

/* --- NATIVE: BLOG LIST PAGE STYLES --- */
.blog-page-title { font-size: 1.75rem; font-weight: 700; color: var(--secondary-color); margin-bottom: 1.5rem; }
.blog-list-card { display: flex; background-color: #fff; border: 1px solid var(--border-color); border-radius: var(--border-radius); overflow: hidden; transition: all 0.3s ease; text-decoration: none; color: inherit; box-shadow: var(--box-shadow); }
.blog-list-card:hover { box-shadow: 0 8px 25px rgba(0,0,0,0.06); border-color: var(--primary-color); transform: translateY(-3px); }
.blog-list-img-wrapper { width: 35%; flex-shrink: 0; position: relative; border-right: 1px solid var(--border-color); }
.blog-list-img { width: 100%; height: 100%; min-height: 220px; object-fit: cover; }
.blog-list-content { padding: 25px; display: flex; flex-direction: column; justify-content: center; width: 65%; }
.blog-list-meta { display: flex; align-items: center; gap: 15px; font-size: 0.85rem; margin-bottom: 12px; }
.blog-list-category { background-color: #f0fdf4; color: var(--primary-color); padding: 4px 10px; border-radius: 6px; font-weight: 600; }
.blog-list-date { color: #6b7280; }
.blog-list-title { font-size: 1.25rem; font-weight: 600; color: var(--secondary-color); margin-bottom: 12px; line-height: 1.4; transition: color 0.2s; }
.blog-list-card:hover .blog-list-title { color: var(--primary-color); }
.blog-list-desc { color: var(--text-color); font-size: 0.95rem; line-height: 1.6; margin-bottom: 20px; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.blog-list-footer { display: flex; justify-content: space-between; align-items: center; margin-top: auto; }
.btn-read-more { font-size: 0.875rem; font-weight: 600; color: var(--primary-color); text-decoration: none; display: inline-flex; align-items: center; gap: 5px; }
.blog-views { color: #9ca3af; font-size: 0.85rem; }
.blog-sidebar-card { background-color: #fff; border: 1px solid var(--border-color); border-radius: var(--border-radius); padding: 25px; box-shadow: var(--box-shadow); }
.sidebar-title { font-size: 1.1rem; font-weight: 600; color: var(--secondary-color); margin-bottom: 1rem; padding-bottom: 10px; border-bottom: 1px solid var(--border-color); }
.sidebar-cat-link { display: flex; justify-content: space-between; align-items: center; padding: 10px 0; color: var(--text-color); text-decoration: none; font-weight: 500; border-bottom: 1px solid var(--bg-light); transition: color 0.2s; }
.sidebar-cat-link:last-child { border-bottom: none; }
.sidebar-cat-link i { font-size: 0.8rem; color: #d1d5db; transition: transform 0.2s, color 0.2s; }
.sidebar-cat-link:hover, .sidebar-cat-link.active { color: var(--primary-color); }
.sidebar-cat-link:hover i, .sidebar-cat-link.active i { color: var(--primary-color); transform: translateX(3px); }
.native-pagination { margin-top: 3rem; }
.native-pagination .page-link { border: 1px solid var(--border-color); color: var(--secondary-color); border-radius: 8px; margin: 0 4px; font-weight: 600; padding: 10px 16px; background-color: #fff; transition: all 0.2s; }
.native-pagination .page-link:hover { background-color: var(--bg-light); color: var(--primary-color); }
.native-pagination .page-item.active .page-link { background-color: var(--primary-color); color: #fff; border-color: var(--primary-color); box-shadow: 0 4px 10px rgba(16, 185, 129, 0.2); }
@media (max-width: 768px) { .blog-list-card { flex-direction: column; } .blog-list-img-wrapper, .blog-list-content { width: 100%; } .blog-list-img-wrapper { border-right: none; border-bottom: 1px solid var(--border-color); } .blog-list-img { min-height: 200px; height: 200px; } .blog-list-content { padding: 20px; } }

/* --- NATIVE: BLOG DETAIL PAGE STYLES --- */
.blog-header { margin-bottom: 2.5rem; }
.blog-breadcrumb .breadcrumb-item, .blog-breadcrumb .breadcrumb-item a { color: #6b7280; text-decoration: none; font-size: 0.875rem; }
.blog-breadcrumb .breadcrumb-item.active { color: var(--primary-color); font-weight: 500; }
.blog-title { font-size: 2.5rem; font-weight: 700; color: var(--secondary-color); line-height: 1.3; margin-bottom: 1rem; }
.blog-meta { display: flex; align-items: center; justify-content: center; gap: 20px; color: #9ca3af; font-size: 0.95rem; padding-bottom: 1.5rem; border-bottom: 1px solid var(--border-color); }
.blog-meta span { display: flex; align-items: center; }
.blog-meta i { color: var(--primary-color); margin-right: 8px; }
.blog-featured-image { width: 100%; max-height: 500px; object-fit: cover; border-radius: var(--border-radius); box-shadow: var(--box-shadow); margin-bottom: 2.5rem; border: 1px solid var(--border-color); }
.blog-content-wrapper { background: #fff; padding: 40px; border-radius: var(--border-radius); border: 1px solid var(--border-color); box-shadow: var(--box-shadow); margin-bottom: 3rem; }
.blog-content-article { line-height: 1.8; font-size: 1.125rem; color: var(--text-color); }
.blog-content-article img { max-width: 100%; height: auto !important; border-radius: var(--border-radius); margin: 2rem 0; box-shadow: var(--box-shadow); border: 1px solid var(--border-color); }
.blog-content-article h2, .blog-content-article h3, .blog-content-article h4 { color: var(--secondary-color); font-weight: 600; margin-top: 2.5rem; margin-bottom: 1rem; }
.blog-content-article p { margin-bottom: 1.5rem; }
.blog-content-article a { color: var(--primary-color); text-decoration: none; font-weight: 500; }
.blog-content-article a:hover { text-decoration: underline; }

/* --- NATIVE: MY REVIEWS PAGE STYLES --- */
.review-tab-nav { display: flex; gap: 10px; border-bottom: 1px solid var(--border-color); padding-bottom: 15px; margin-bottom: 25px; }
.review-tab-nav .nav-link { color: #6b7280; font-weight: 500; border-radius: 8px; padding: 10px 20px; transition: all 0.2s ease; border: none; background: transparent; }
.review-tab-nav .nav-link:hover { background-color: var(--bg-light); color: var(--primary-color); }
.review-tab-nav .nav-link.active { background-color: #f0fdf4; color: var(--primary-color); font-weight: 600; border: 1px solid rgba(16, 185, 129, 0.2); }
.review-pending-card { background: #fff; border: 1px solid var(--border-color); border-radius: var(--border-radius); padding: 20px; display: flex; gap: 20px; align-items: center; transition: box-shadow 0.2s ease, border-color 0.2s ease; }
.review-pending-card:hover { box-shadow: var(--box-shadow); border-color: #d1d5db; }
.review-img { width: 80px; height: 80px; object-fit: contain; border-radius: 8px; border: 1px solid var(--border-color); padding: 5px; background-color: #fff; flex-shrink: 0; }
.review-info { flex-grow: 1; }
.review-action { flex-shrink: 0; }
.past-review-card { background: #fff; border: 1px solid var(--border-color); border-radius: var(--border-radius); padding: 24px; transition: box-shadow 0.2s ease; }
.past-review-card:hover { box-shadow: var(--box-shadow); }
.past-review-header { display: flex; gap: 15px; align-items: center; padding-bottom: 15px; margin-bottom: 15px; border-bottom: 1px solid var(--border-color); }
.past-review-header img { width: 60px; height: 60px; object-fit: contain; border-radius: 8px; border: 1px solid var(--border-color); padding: 4px; }
.star-rating i { color: #f59e0b; font-size: 14px; }
.star-rating i.empty { color: #e5e7eb; }
.store-reply { background-color: var(--bg-light); border-left: 4px solid var(--primary-color); padding: 16px; border-radius: 0 8px 8px 0; margin-top: 20px; }
.star-select { direction: rtl; display: inline-flex; font-size: 40px; gap: 8px; justify-content: center; }
.star-select i { color: #e5e7eb; cursor: pointer; transition: color 0.2s, transform 0.2s; }
.star-select i.active, .star-select i:hover, .star-select i:hover ~ i { color: #f59e0b; }
.star-select i:active { transform: scale(0.9); }
@media (max-width: 576px) { .review-pending-card { flex-direction: column; align-items: flex-start; gap: 15px; } .review-action, .review-action .btn { width: 100%; } }

/* --- NATIVE: TICKET DETAIL / CHAT STYLES --- */
.ticket-header { display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid var(--border-color); padding-bottom: 20px; margin-bottom: 25px; }
.ticket-back-btn { width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; border-radius: 8px; background-color: var(--bg-light); color: var(--secondary-color); text-decoration: none; transition: all 0.2s; border: 1px solid var(--border-color); }
.ticket-back-btn:hover { background-color: #f0fdf4; color: var(--primary-color); border-color: rgba(16, 185, 129, 0.2); }
.chat-container { background-color: #f8f9fa; border: 1px solid var(--border-color); border-radius: var(--border-radius); padding: 20px; height: 450px; overflow-y: auto; display: flex; flex-direction: column; gap: 15px; margin-bottom: 20px; }
.msg-bubble { max-width: 75%; padding: 14px 18px; border-radius: 16px; font-size: 15px; line-height: 1.5; position: relative; box-shadow: 0 2px 5px rgba(0,0,0,0.02); }
.msg-customer { align-self: flex-end; background-color: var(--primary-color); color: #fff; border-bottom-right-radius: 4px; }
.msg-store { align-self: flex-start; background-color: #fff; color: var(--secondary-color); border: 1px solid var(--border-color); border-bottom-left-radius: 4px; }
.msg-meta { font-size: 11px; margin-top: 6px; display: flex; align-items: center; gap: 5px; }
.msg-customer .msg-meta { justify-content: flex-end; color: rgba(255, 255, 255, 0.8); }
.msg-store .msg-meta { justify-content: flex-start; color: #9ca3af; }
.chat-input-wrapper { background-color: #fff; border: 1px solid var(--border-color); border-radius: var(--border-radius); padding: 10px 15px; display: flex; gap: 15px; align-items: flex-end; transition: border-color 0.2s, box-shadow 0.2s; }
.chat-input-wrapper:focus-within { border-color: var(--primary-color); box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.1); }
.chat-input-wrapper textarea { border: none; resize: none; box-shadow: none; padding: 8px 0; width: 100%; background: transparent; font-size: 15px; color: var(--text-color); }
.chat-input-wrapper textarea:focus { outline: none; }
.btn-send-msg { background-color: var(--primary-color); color: #fff; border-radius: 50%; width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; border: none; flex-shrink: 0; transition: all 0.2s; margin-bottom: 5px; box-shadow: 0 2px 5px rgba(16, 185, 129, 0.2); }
.btn-send-msg:hover { transform: scale(1.05); background-color: #059669; }
.status-badge { padding: 6px 14px; border-radius: 50px; font-size: 13px; font-weight: 600; display: inline-flex; align-items: center; gap: 6px; }
@media (max-width: 768px) { .ticket-header { flex-direction: column; align-items: flex-start; gap: 15px; } .msg-bubble { max-width: 90%; } }

/* --- NATIVE: SUPPORT TICKETS LIST STYLES --- */
.ticket-tab-nav { display: flex; gap: 10px; border-bottom: 1px solid var(--border-color); padding-bottom: 15px; margin-bottom: 25px; } .ticket-tab-nav .nav-link { color: #6b7280; font-weight: 500; border-radius: 8px; padding: 10px 20px; transition: all 0.2s ease; border: none; background: transparent; } .ticket-tab-nav .nav-link:hover { background-color: var(--bg-light); color: var(--primary-color); } .ticket-tab-nav .nav-link.active { background-color: #f0fdf4; color: var(--primary-color); font-weight: 600; border: 1px solid rgba(16, 185, 129, 0.2); } .ticket-list-card { display: flex; justify-content: space-between; align-items: center; background: #fff; border: 1px solid var(--border-color); border-radius: var(--border-radius); padding: 20px 24px; text-decoration: none; transition: all 0.2s ease; } .ticket-list-card:hover { box-shadow: var(--box-shadow); border-color: var(--primary-color); transform: translateY(-2px); } .ticket-info { flex-grow: 1; } .ticket-meta { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; font-size: 13px; } .ticket-id { font-weight: 600; color: #9ca3af; } .ticket-dept { background-color: var(--bg-light); color: var(--text-color); padding: 2px 10px; border-radius: 6px; font-weight: 500; border: 1px solid var(--border-color); } .priority-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 4px; } .priority-low { background-color: #10b981; } .priority-med { background-color: #f59e0b; } .priority-high { background-color: #ef4444; } .ticket-subject { font-size: 16px; font-weight: 600; color: var(--secondary-color); margin-bottom: 6px; transition: color 0.2s; } .ticket-list-card:hover .ticket-subject { color: var(--primary-color); } .ticket-date { font-size: 13px; color: #6b7280; } .ticket-status { flex-shrink: 0; margin-left: 20px; } @media (max-width: 576px) { .ticket-list-card { flex-direction: column; align-items: flex-start; gap: 15px; } .ticket-status { margin-left: 0; width: 100%; } .ticket-status .status-badge { width: 100%; justify-content: center; } }

/* --- NATIVE: EMAIL VERIFY PAGE STYLES --- */
.verify-page-wrapper { min-height: 50vh; display: flex; align-items: center; justify-content: center; }
.verify-card { background-color: #fff; border: 1px solid var(--border-color); border-radius: var(--border-radius); padding: 50px 30px; max-width: 450px; width: 100%; text-align: center; box-shadow: var(--box-shadow); }
.verify-icon-wrapper { width: 90px; height: 90px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; margin: 0 auto 25px auto; font-size: 40px; }
.icon-success { background-color: #f0fdf4; color: var(--primary-color); box-shadow: 0 4px 15px rgba(16, 185, 129, 0.1); }
.icon-error { background-color: #fef2f2; color: #ef4444; box-shadow: 0 4px 15px rgba(239, 68, 68, 0.1); }
.verify-title { font-size: 24px; font-weight: 700; color: var(--secondary-color); margin-bottom: 15px; }
.verify-text { color: var(--text-color); font-size: 15px; line-height: 1.6; margin-bottom: 35px; }

/* --- NATIVE: FAVORITES PAGE STYLES --- */
.fav-product-card { background-color: #fff; border: 1px solid var(--border-color); border-radius: var(--border-radius); height: 100%; display: flex; flex-direction: column; position: relative; transition: all 0.3s ease; overflow: hidden; }
.fav-product-card:hover { box-shadow: var(--box-shadow); border-color: var(--primary-color); transform: translateY(-3px); }
.fav-img-wrapper { position: relative; width: 100%; padding-top: 100%; background-color: #fff; border-bottom: 1px solid var(--border-color); }
.fav-img-wrapper img { position: absolute; top: 0; left: 0; right: 0; bottom: 0; width: 100%; height: 100%; object-fit: contain; padding: 15px; transition: transform 0.3s ease; }
.fav-product-card:hover .fav-img-wrapper img { transform: scale(1.05); }
.btn-remove-favorite { position: absolute; top: 10px; right: 10px; width: 32px; height: 32px; border-radius: 50%; background-color: #fff; color: #9ca3af; display: flex; align-items: center; justify-content: center; border: 1px solid var(--border-color); box-shadow: 0 2px 5px rgba(0,0,0,0.05); z-index: 10; transition: all 0.2s; }
.btn-remove-favorite:hover { background-color: #fef2f2; color: #ef4444; border-color: #fca5a5; transform: scale(1.1); }
.fav-content { padding: 15px; display: flex; flex-direction: column; flex-grow: 1; }
.fav-brand { font-size: 11px; font-weight: 600; color: #6b7280; text-transform: uppercase; margin-bottom: 4px; letter-spacing: 0.5px; }
.fav-title { font-size: 14px; font-weight: 500; color: var(--secondary-color); text-decoration: none; line-height: 1.4; margin-bottom: 10px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; transition: color 0.2s; }
.fav-product-card:hover .fav-title { color: var(--primary-color); }
.fav-price-wrap { margin-top: auto; display: flex; flex-direction: column; margin-bottom: 15px; }
.fav-old-price { font-size: 12px; color: #9ca3af; text-decoration: line-through; margin-bottom: 2px; }
.fav-price { font-size: 18px; font-weight: 700; color: var(--primary-color); }
.btn-fav-add-cart { width: 100%; padding: 8px 0; border-radius: 8px; font-size: 13px; font-weight: 600; text-align: center; background-color: #fff; color: var(--primary-color); border: 1px solid var(--primary-color); transition: all 0.2s; cursor: pointer; }
.btn-fav-add-cart:hover { background-color: var(--primary-color); color: #fff; }
.btn-fav-out-stock { width: 100%; padding: 8px 0; border-radius: 8px; font-size: 13px; font-weight: 600; text-align: center; background-color: var(--bg-light); color: #9ca3af; border: 1px solid var(--border-color); cursor: not-allowed; }
.fav-empty-state { text-align: center; padding: 60px 20px; background-color: var(--bg-light); border: 1px dashed var(--border-color); border-radius: var(--border-radius); }
.fav-empty-state i { font-size: 48px; color: #d1d5db; margin-bottom: 20px; }

/* --- NATIVE: BANK TRANSFER PAGE STYLES --- */
.bank-card { background-color: #fff; border: 1px solid var(--border-color); border-radius: var(--border-radius); padding: 24px; transition: all 0.3s ease; position: relative; overflow: hidden; height: 100%; box-shadow: var(--box-shadow); }
.bank-card:hover { border-color: var(--primary-color); transform: translateY(-3px); }
.bank-card-accent { position: absolute; top: 0; left: 0; right: 0; height: 4px; background-color: var(--primary-color); }
.bank-name { font-size: 1.15rem; font-weight: 700; color: var(--secondary-color); margin-bottom: 6px; display: flex; align-items: center; gap: 8px; }
.bank-owner { color: var(--text-color); font-size: 0.95rem; margin-bottom: 15px; padding-bottom: 15px; border-bottom: 1px dashed var(--border-color); }
.bank-iban { font-family: 'Courier New', Courier, monospace; font-weight: 700; color: var(--primary-color); font-size: 1.1rem; margin-bottom: 6px; letter-spacing: 0.5px; background-color: var(--bg-light); padding: 8px 12px; border-radius: 6px; border: 1px solid var(--border-color); display: inline-block; }
.bank-branch { font-size: 0.9rem; color: var(--text-color); margin-top: 10px; }
.havale-form .form-control, .havale-form .form-select { border-color: var(--border-color); box-shadow: none !important; border-radius: 6px; }
.havale-form .form-control:focus, .havale-form .form-select:focus { border-color: var(--primary-color); box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.15) !important; }

/* --- NATIVE: PROFILE SETTINGS STYLES --- */
.profile-section-title { font-size: 1.15rem; font-weight: 700; color: var(--secondary-color); margin-bottom: 20px; display: flex; align-items: center; gap: 10px; } .profile-section-title i { color: var(--primary-color); } .hesabim-form .form-floating > label { color: var(--text-color); font-size: 14px; } .hesabim-form .form-control { border: 1px solid var(--border-color); border-radius: var(--border-radius); box-shadow: none !important; transition: all 0.3s ease; } .hesabim-form .form-control:focus { border-color: var(--primary-color); box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.15) !important; } .password-box { background-color: var(--bg-light); border: 1px solid var(--border-color); border-radius: var(--border-radius); padding: 25px; margin-top: 30px; margin-bottom: 30px; } .password-box .form-control { background-color: #fff; }

/* --- NATIVE: CONTACT PAGE STYLES --- */
.contact-header-title { font-size: 2.5rem; font-weight: 700; color: var(--secondary-color); margin-bottom: 1rem; }
.contact-info-item { display: flex; align-items: flex-start; margin-bottom: 2rem; }
.contact-icon-wrapper { width: 56px; height: 56px; border-radius: 50%; background-color: #f0fdf4; color: var(--primary-color); display: flex; align-items: center; justify-content: center; font-size: 1.25rem; flex-shrink: 0; margin-right: 1.2rem; transition: all 0.3s ease; border: 1px solid rgba(16, 185, 129, 0.1); }
.contact-info-item:hover .contact-icon-wrapper { background-color: var(--primary-color); color: #fff; transform: translateY(-3px); box-shadow: 0 4px 12px rgba(16, 185, 129, 0.2); }
.contact-text h6 { font-size: 1.1rem; font-weight: 700; color: var(--secondary-color); margin-bottom: 5px; }
.contact-text p, .contact-text a { color: var(--text-color); text-decoration: none; font-size: 0.95rem; line-height: 1.6; }
.contact-form-card { background-color: #fff; border: 1px solid var(--border-color); border-radius: var(--border-radius); padding: 40px; box-shadow: var(--box-shadow); }
.contact-form-card .form-control { border: 1px solid var(--border-color); border-radius: 8px; box-shadow: none !important; }
.contact-form-card .form-control:focus { border-color: var(--primary-color); background-color: #fcfdfc; }
.captcha-box { background-color: var(--bg-light); border: 1px solid var(--border-color); border-radius: 8px; padding: 15px 20px; display: flex; align-items: center; justify-content: space-between; }
.captcha-text { font-size: 1.25rem; font-weight: 700; color: var(--primary-color); }
.map-wrapper { border-radius: var(--border-radius); overflow: hidden; box-shadow: var(--box-shadow); border: 1px solid var(--border-color); margin-bottom: 3rem; }
.map-wrapper iframe { width: 100% !important; height: 450px !important; border: 0; display: block; filter: grayscale(0.2); }

/* --- NATIVE: CANCELLATION & RETURN PAGE STYLES --- */
.return-card { background-color: #fff; border: 1px solid var(--border-color); border-radius: var(--border-radius); padding: 24px; margin-bottom: 20px; transition: all 0.3s ease; border-left: 4px solid #e5e7eb; box-shadow: var(--box-shadow); }
.return-card:hover { border-left-width: 6px; transform: translateY(-2px); }
.return-card-0 { border-left-color: #f59e0b; } /* Bekliyor */
.return-card-1 { border-left-color: var(--primary-color); } /* Onaylandı */
.return-card-2 { border-left-color: #ef4444; } /* Reddedildi */
.return-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 15px; padding-bottom: 15px; border-bottom: 1px dashed var(--border-color); }
.return-title { font-size: 1.1rem; font-weight: 700; color: var(--secondary-color); margin-bottom: 4px; }
.return-date { font-size: 0.85rem; color: var(--text-color); opacity: 0.8; }
.return-status-badge { padding: 6px 14px; border-radius: 4px; font-size: 0.85rem; font-weight: 600; display: inline-flex; align-items: center; gap: 6px; }
.return-type { display: inline-flex; align-items: center; gap: 6px; background-color: var(--bg-light); color: var(--text-color); padding: 6px 12px; border-radius: 4px; font-size: 0.85rem; font-weight: 600; margin-bottom: 15px; border: 1px solid var(--border-color); }
.return-reason { font-size: 0.95rem; color: var(--text-color); margin-bottom: 10px; }
.return-reason strong { color: var(--secondary-color); font-weight: 700; }
.return-desc { background-color: var(--bg-light); padding: 15px; border-radius: 6px; font-size: 0.9rem; color: var(--text-color); margin-bottom: 15px; border: 1px solid var(--border-color); }
.return-reply { background-color: #f0fdf4; border-left: 3px solid var(--primary-color); padding: 15px; border-radius: 0 6px 6px 0; font-size: 0.9rem; }
.native-form .form-control, .native-form .form-select { border-color: var(--border-color); }
.native-form .form-control:focus, .native-form .form-select:focus { border-color: var(--primary-color); box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.1) !important; }
@media (max-width: 768px) { .return-header { flex-direction: column; align-items: flex-start; gap: 15px; } }

/* --- NATIVE: CATEGORY PAGE STYLES --- */
.category-breadcrumb-wrap { background-color: var(--bg-light); border-bottom: 1px solid var(--border-color); padding: 15px 0; margin-bottom: 30px; }
.category-header-bar { background: #fff; border: 1px solid var(--border-color); border-radius: var(--border-radius); padding: 20px 24px; margin-bottom: 30px; box-shadow: var(--box-shadow); }
.category-title { font-size: 1.25rem; font-weight: 700; color: var(--secondary-color); margin: 0; }
.category-count { font-size: 0.9rem; color: var(--text-color); font-weight: 600; background-color: var(--bg-light); padding: 4px 12px; border-radius: 50px; margin-left: 10px; border: 1px solid var(--border-color); }
.filter-select { background-color: #fff; border: 1px solid var(--border-color); border-radius: 8px; font-size: 0.85rem; font-weight: 600; color: var(--secondary-color); padding: 8px 30px 8px 12px; cursor: pointer; transition: all 0.2s ease; min-width: 140px; }
.filter-select:hover { border-color: var(--primary-color); }
.filter-select:focus { border-color: var(--primary-color); box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.1); outline: none; }
.filter-label { font-size: 0.85rem; color: #6b7280; font-weight: 600; margin-right: 8px; }
.native-pagination { margin-top: 40px; margin-bottom: 20px; }
.native-pagination .page-link { border: 1px solid var(--border-color); color: var(--secondary-color); background-color: #fff; margin: 0 3px; border-radius: 6px; font-weight: 700; padding: 10px 18px; transition: all 0.2s; }
.native-pagination .page-link:hover { background-color: var(--bg-light); color: var(--primary-color); border-color: var(--primary-color); }
.native-pagination .page-item.active .page-link { background-color: var(--primary-color); color: #fff; border-color: var(--primary-color); box-shadow: 0 4px 12px rgba(16, 185, 129, 0.2); }
@media (max-width: 768px) { .category-header-bar { padding: 15px; flex-direction: column; align-items: flex-start !important; gap: 15px; } .filters-wrapper { width: 100%; overflow-x: auto; padding-bottom: 5px; white-space: nowrap; } }

/* --- NATIVE: REGISTER PAGE STYLES --- */
.auth-page-wrapper { min-height: 75vh; display: flex; align-items: center; justify-content: center; padding: 40px 0; }
.auth-card { background-color: #fff; border: 1px solid var(--border-color); border-radius: var(--border-radius); padding: 40px; box-shadow: var(--box-shadow); }
.auth-icon-wrapper { width: 64px; height: 64px; border-radius: 50%; background-color: #f0fdf4; color: var(--primary-color); display: flex; align-items: center; justify-content: center; font-size: 1.5rem; margin: 0 auto 20px auto; border: 1px solid rgba(16, 185, 129, 0.1); }
.auth-title { font-size: 1.5rem; font-weight: 700; color: var(--secondary-color); margin-bottom: 5px; text-align: center; }
.auth-subtitle { font-size: 0.95rem; color: var(--text-color); text-align: center; margin-bottom: 30px; }
.auth-form .form-floating > label { color: var(--text-color); font-size: 14px; }
.auth-form .form-control { border: 1px solid var(--border-color); border-radius: 8px; box-shadow: none !important; transition: all 0.3s ease; }
.auth-form .form-control:focus { border-color: var(--primary-color); box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.1) !important; background-color: #fcfdfc; }
.auth-link { color: var(--primary-color); font-weight: 700; text-decoration: none; transition: color 0.2s; }
.auth-link:hover { color: #059669; text-decoration: underline; }
@media (max-width: 768px) { .auth-card { padding: 25px 20px; } }

/* --- NATIVE: BRAND PAGE STYLES --- */
.brand-breadcrumb-wrap { background-color: var(--bg-light); border-bottom: 1px solid var(--border-color); padding: 15px 0; margin-bottom: 30px; }
.brand-header-card { background: #fff; border: 1px solid var(--border-color); border-radius: var(--border-radius); padding: 30px; margin-bottom: 40px; box-shadow: var(--box-shadow); display: flex; align-items: center; gap: 30px; }
.brand-logo-box { width: 130px; height: 130px; background: #fff; border: 1px solid var(--border-color); border-radius: 12px; display: flex; align-items: center; justify-content: center; padding: 15px; flex-shrink: 0; }
.brand-logo-box img { max-width: 100%; max-height: 100%; object-fit: contain; }
.brand-initial { width: 130px; height: 130px; background: var(--primary-color); color: #fff; border-radius: 12px; display: flex; align-items: center; justify-content: center; font-size: 4rem; font-weight: 800; flex-shrink: 0; box-shadow: 0 8px 20px rgba(16, 185, 129, 0.2); }
.brand-title { font-size: 2.25rem; font-weight: 800; color: var(--secondary-color); margin-bottom: 8px; }
.brand-meta { color: var(--text-color); font-size: 1.05rem; opacity: 0.8; }
.brand-count-badge { background-color: var(--bg-light); color: var(--secondary-color); border: 1px solid var(--border-color); padding: 6px 16px; border-radius: 50px; font-size: 0.85rem; font-weight: 700; display: inline-block; margin-top: 12px; }
@media (max-width: 768px) { .brand-header-card { flex-direction: column; text-align: center; padding: 25px; gap: 20px; } .brand-title { font-size: 1.75rem; } }

/* --- NATIVE: CHECKOUT PAGE STYLES --- */
.checkout-card { background: #fff; border: 1px solid var(--border-color); border-radius: var(--border-radius); padding: 30px; box-shadow: var(--box-shadow); margin-bottom: 25px; }
.checkout-title { font-size: 1.15rem; font-weight: 700; color: var(--secondary-color); margin-bottom: 20px; display: flex; align-items: center; gap: 10px; border-bottom: 1px solid var(--border-color); padding-bottom: 15px; }
.checkout-title i { color: var(--primary-color); }
.select-card { border: 2px solid var(--border-color); border-radius: 12px; transition: all 0.2s ease; cursor: pointer; background: #fff; height: 100%; position: relative; }
.select-card:hover { border-color: var(--primary-color); }
.card-input-element:checked + .select-card { border-color: var(--primary-color); background-color: #f0fdf4; }
.card-input-element:checked + .select-card .check-icon { display: block !important; }
.checkout-form .form-floating > label { color: var(--text-color); font-size: 14px; }
.checkout-form .form-select, .checkout-form .form-control { border-color: var(--border-color); border-radius: 8px; box-shadow: none !important; }
.checkout-form .form-select:focus, .checkout-form .form-control:focus { border-color: var(--primary-color); background-color: #fcfdfc; }
.summary-box { background: var(--bg-light); border-radius: var(--border-radius); padding: 25px; border: 1px solid var(--border-color); }
.summary-item { display: flex; justify-content: space-between; margin-bottom: 12px; color: var(--text-color); font-size: 0.95rem; }
.summary-total { display: flex; justify-content: space-between; align-items: center; border-top: 1px solid var(--border-color); padding-top: 15px; margin-top: 15px; font-weight: 700; }
.contract-accordion .accordion-item { border: 1px solid var(--border-color); border-radius: 8px !important; margin-bottom: 10px; overflow: hidden; }
.contract-accordion .accordion-button { font-weight: 700; color: var(--secondary-color); background-color: #fff; box-shadow: none; }
.contract-accordion .accordion-button:not(.collapsed) { background-color: var(--bg-light); color: var(--primary-color); }
.contract-accordion .accordion-body { background-color: var(--bg-light); font-size: 0.85rem; color: var(--text-color); max-height: 250px; overflow-y: auto; }
@media (max-width: 768px) { .checkout-card { padding: 20px; } }

/* --- NATIVE: DYNAMIC PAGE STYLES --- */
.page-breadcrumb-wrap { background-color: var(--bg-light); border-bottom: 1px solid var(--border-color); padding: 15px 0; margin-bottom: 30px; }
.page-card { background-color: #fff; border: 1px solid var(--border-color); border-radius: var(--border-radius); padding: 50px; box-shadow: var(--box-shadow); }
.page-title { font-size: 2.25rem; font-weight: 800; color: var(--secondary-color); margin-bottom: 30px; padding-bottom: 20px; border-bottom: 1px solid var(--border-color); }
.page-content { font-size: 1.1rem; line-height: 1.8; color: var(--text-color); }
.page-content img { max-width: 100%; height: auto; border-radius: 8px; margin: 1.5rem 0; box-shadow: 0 4px 12px rgba(0,0,0,0.08); }
.page-content h2, .page-content h3 { color: var(--secondary-color); margin-top: 2.5rem; margin-bottom: 1.25rem; font-weight: 700; }
.page-content ul, .page-content ol { padding-left: 1.5rem; margin-bottom: 1.5rem; }
.page-content li { margin-bottom: 0.75rem; }
.page-content a { color: var(--primary-color); text-decoration: none; font-weight: 700; transition: all 0.2s; border-bottom: 1px solid transparent; }
.page-content a:hover { border-bottom-color: var(--primary-color); opacity: 0.8; }
.page-content blockquote { border-left: 5px solid var(--primary-color); background-color: var(--bg-light); padding: 25px 30px; margin: 2rem 0; border-radius: 0 8px 8px 0; font-style: italic; color: var(--secondary-color); font-size: 1.2rem; }
@media (max-width: 768px) { .page-card { padding: 30px 20px; } .page-title { font-size: 1.75rem; } .page-content { font-size: 1rem; } }

/* --- NATIVE: CART PAGE STYLES --- */
.cart-breadcrumb-wrap { background-color: var(--bg-light); border-bottom: 1px solid var(--border-color); padding: 15px 0; margin-bottom: 30px; }
.cart-card { background: #fff; border: 1px solid var(--border-color); border-radius: var(--border-radius); box-shadow: var(--box-shadow); overflow: hidden; margin-bottom: 30px; }
.cart-header { display: flex; justify-content: space-between; align-items: center; padding: 20px 25px; border-bottom: 1px solid var(--border-color); background: #fff; }
.cart-item { padding: 25px; border-bottom: 1px solid var(--border-color); transition: all 0.2s ease; display: flex; align-items: center; }
.cart-item:last-child { border-bottom: none; }
.cart-item:hover { background-color: #fcfdfc; }
.cart-img-box { width: 100px; height: 100px; background: #fff; border: 1px solid var(--border-color); border-radius: 12px; padding: 10px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.cart-img-box img { max-width: 100%; max-height: 100%; object-fit: contain; }
.cart-product-title { font-size: 1.05rem; font-weight: 700; color: var(--secondary-color); text-decoration: none; display: block; margin-bottom: 4px; }
.cart-product-title:hover { color: var(--primary-color); }
.qty-wrapper { display: inline-flex; align-items: center; background: var(--bg-light); border-radius: 8px; padding: 4px; border: 1px solid var(--border-color); }
.qty-btn { width: 32px; height: 32px; border-radius: 6px; border: 1px solid var(--border-color); background: #fff; color: var(--secondary-color); font-weight: bold; display: flex; align-items: center; justify-content: center; cursor: pointer; transition: 0.2s; }
.qty-btn:hover { background: var(--primary-color); color: #fff; border-color: var(--primary-color); }
.qty-input { width: 40px; text-align: center; border: none; background: transparent; font-weight: 700; color: var(--secondary-color); pointer-events: none; }
.cart-remove-btn { color: #ef4444; background: #fef2f2; border: 1px solid #fee2e2; border-radius: 8px; padding: 8px 12px; font-size: 0.85rem; transition: 0.2s; display: inline-flex; align-items: center; }
.cart-remove-btn:hover { background: #ef4444; color: #fff; }
.summary-card { background: #fff; border: 1px solid var(--border-color); border-radius: var(--border-radius); padding: 30px; box-shadow: var(--box-shadow); }
.summary-title { font-size: 1.25rem; font-weight: 800; color: var(--secondary-color); margin-bottom: 25px; padding-bottom: 15px; border-bottom: 1px solid var(--border-color); }
.summary-row { display: flex; justify-content: space-between; margin-bottom: 15px; font-size: 0.95rem; color: var(--text-color); }
.summary-total { display: flex; justify-content: space-between; align-items: center; padding-top: 20px; margin-top: 10px; border-top: 2px solid var(--bg-light); font-weight: 800; }
.empty-cart-box { background: #fff; border: 2px dashed var(--border-color); border-radius: var(--border-radius); padding: 60px 20px; text-align: center; }

@media (max-width: 768px) {
    .cart-item { flex-direction: column; align-items: flex-start !important; gap: 15px; }
    .cart-item-actions { width: 100%; display: flex; justify-content: space-between; align-items: center; }
}

/* --- NATIVE: FORGOT PASSWORD PAGE STYLES --- */
.auth-page-wrapper { min-height: 70vh; display: flex; align-items: center; justify-content: center; padding: 40px 0; }
.auth-card { background-color: #fff; border: 1px solid var(--border-color); border-radius: var(--border-radius); padding: 40px; box-shadow: var(--box-shadow); }
.auth-icon-wrapper { width: 64px; height: 64px; border-radius: 50%; background-color: #f0fdf4; color: var(--primary-color); display: flex; align-items: center; justify-content: center; font-size: 1.5rem; margin: 0 auto 20px auto; border: 1px solid rgba(16, 185, 129, 0.1); }
.auth-title { font-size: 1.5rem; font-weight: 700; color: var(--secondary-color); margin-bottom: 5px; text-align: center; }
.auth-subtitle { font-size: 0.95rem; color: var(--text-color); text-align: center; margin-bottom: 30px; }
.auth-form .form-floating > label { color: var(--text-color); font-size: 14px; }
.auth-form .form-control { border: 1px solid var(--border-color); border-radius: 8px; box-shadow: none !important; transition: all 0.3s ease; }
.auth-form .form-control:focus { border-color: var(--primary-color); box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.1) !important; background-color: #fcfdfc; }
.auth-footer-link { color: var(--primary-color); font-weight: 700; text-decoration: none; transition: color 0.2s; }
.auth-footer-link:hover { color: #059669; text-decoration: underline; }
@media (max-width: 768px) { .auth-card { padding: 25px 20px; } }

.native-trust-bar { background-color: #f9f8f7; padding: 50px 0; border-top: 1px solid var(--border-color); border-bottom: 1px solid var(--border-color); }
.trust-item { text-align: center; padding: 0 15px; }
.trust-icon { font-size: 32px; color: var(--primary-color); margin-bottom: 15px; transition: transform 0.3s; }
.trust-item:hover .trust-icon { transform: translateY(-5px); }
.trust-title { font-family: 'Inter', sans-serif; font-size: 14px; font-weight: 700; color: var(--secondary-color); margin-bottom: 8px; letter-spacing: 0.5px; }
.trust-desc { font-size: 12px; color: #343434; margin-bottom: 0; line-height: 1.5; font-weight: 400; }
@media (max-width: 767px) { .native-trust-bar { padding: 30px 0; } .trust-item { margin-bottom: 20px; } .trust-icon { font-size: 26px; } .trust-title { font-size: 13px; } }

/* Instagram Akış Stilleri */
.instagram-feed-section {
    padding: 40px 0;
    background-color: #fff;
    text-align: center;
}
.instagram-title {
    font-size: 24px;
    font-weight: 700;
    margin-bottom: 25px;
    color: var(--secondary-color);
}
.instagram-title i {
    color: #e4405f;
    margin-right: 10px;
}
.instagram-grid {
    display: grid;
    grid-template-columns: repeat(8, 1fr);
    gap: 10px;
    padding: 0 10px;
}
.instagram-item {
    position: relative;
    overflow: hidden;
    aspect-ratio: 1 / 1;
    border-radius: 8px;
}
.instagram-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}
.instagram-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.4);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 24px;
    opacity: 0;
    transition: opacity 0.3s ease;
}
.instagram-item:hover img {
    transform: scale(1.1);
}
.instagram-item:hover .instagram-overlay {
    opacity: 1;
}

@media (max-width: 1200px) { .instagram-grid { grid-template-columns: repeat(4, 1fr); } }
@media (max-width: 768px) { .instagram-grid { grid-template-columns: repeat(2, 1fr); } }