/* ==========================================================================
   TEMA: NACİDEN - by avusor | 2026
   ========================================================================== */

:root {
    --primary-color: #cca353;
    --primary-hover: #2f4853;
    --secondary-color: #1f2937;
    --text-color: #4b5563;
    --bg-light: #f3f4f6;
    --border-color: #e5e7eb;
    --border-radius: 8px;
    --box-shadow: 0 2px 8px rgba(0,0,0,0.04);
}

body {font-family: 'Inter', 'Segoe UI', 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; }
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; }
.native-section-header {display: flex;justify-content: space-between;align-items: center;margin-bottom: 20px;padding-bottom: 10px;border-bottom: 2px solid var(--border-color);}
.native-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-native-link {font-size: 0.9rem;color: var(--text-color);font-weight: 500;}
.btn-native-link:hover {color: var(--primary-color);}

/* --- NATIVE: HEADER & NAVBAR STYLES --- */
.top-bar { background-color: var(--bg-light); border-bottom: 1px solid var(--border-color); font-size: 13px; font-weight: 500; padding: 8px 0; }
.top-bar a { color: var(--text-color); transition: color 0.2s; }
.top-bar a:hover { color: var(--primary-color); }
.main-header { background-color: #fff; padding: 25px 0; border-bottom: 1px solid var(--border-color); }
.header-grid { display: grid; grid-template-columns: 240px 1fr auto; align-items: center; gap: 40px; }
.search-area { position: relative; width: 100%; max-width: 700px; margin: 0 auto; }
.search-box { display: flex; align-items: center; background: #fff; border: 2px solid var(--primary-color); border-radius: 8px; overflow: hidden; }
.search-box input { flex-grow: 1; border: none; padding: 14px 20px; font-size: 15px; outline: none; }
.search-box button { background: var(--primary-color); color: #fff; border: none; padding: 0 25px; height: 100%; font-size: 16px; cursor: pointer; transition: background 0.2s; }
.search-box button:hover { background: var(--primary-hover); }
.header-actions { display: flex; gap: 35px; align-items: center; }
.action-item { display: flex; flex-direction: column; align-items: center; color: var(--secondary-color); font-size: 13px; font-weight: 600; text-decoration: none; position: relative; transition: color 0.2s; }
.action-item i { font-size: 22px; margin-bottom: 6px; color: var(--secondary-color); transition: color 0.2s; }
.action-item:hover, .action-item:hover i { color: var(--primary-color); }
.badge-count { position: absolute; top: -6px; right: -2px; background-color: var(--primary-color); color: #fff; font-size: 11px; font-weight: 700; width: 20px; height: 20px; border-radius: 50%; display: flex; align-items: center; justify-content: center; border: 2px solid #fff; }
.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-horizontal-menu { display: flex; list-style: none; margin: 0; padding: 0; align-items: center; gap: 10px; }
.native-has-sub { position: relative; }
.native-horizontal-menu > li > a { color: var(--secondary-color); text-decoration: none; font-weight: 500; font-size: 12px; padding: 18px 12px; display: block; transition: all 0.2s; letter-spacing: 0.5px; }
.native-horizontal-menu > li:hover > a { color: var(--primary-color); background-color: #f8fafc; }
.native-dropdown { position: absolute; top: 100%; left: 0; min-width: 220px; background: #fff; list-style: none; padding: 10px 0; display: none; z-index: 1000; border: 1px solid var(--border-color); border-top: 2px solid var(--primary-color); box-shadow: 0 10px 25px rgba(0,0,0,0.08); }
.native-has-sub:hover .native-dropdown { display: block; }
.native-dropdown li a { display: block; padding: 10px 20px; color: var(--secondary-color); text-decoration: none; font-size: 14px; font-weight: 500; transition: all 0.2s; }
.native-dropdown li a:hover { background-color: #f0fdf4; color: var(--primary-color); padding-left: 25px; }

/* --- NATIVE: HERO SLIDER & THUMBNAILS STYLES (FULL IMAGE) --- */
.hero-slider-wrapper { border-radius: var(--border-radius); overflow: hidden; box-shadow: var(--box-shadow); border: 1px solid var(--border-color); position: relative; height: 350px; }
@media (min-width: 768px) { .hero-slider-wrapper { height: 450px; } }
.hero-slider-img { width: 100%; height: 100%; object-fit: cover; }
.carousel-item, .carousel-item > a, .carousel-item > div { height: 100%; }
.slider-overlay { position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: linear-gradient(to top, rgba(0,0,0,0.8) 0%, rgba(0,0,0,0.2) 40%, rgba(0,0,0,0) 100%); pointer-events: none; }
.carousel-control-prev, .carousel-control-next { width: 8%; opacity: 0; transition: opacity 0.3s ease; z-index: 10; }
.hero-slider-wrapper:hover .carousel-control-prev, .hero-slider-wrapper:hover .carousel-control-next { opacity: 1; }
.slider-nav-icon { background-color: rgba(255, 255, 255, 0.8); color: var(--secondary-color); width: 44px; height: 44px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 1.2rem; box-shadow: 0 4px 12px rgba(0,0,0,0.1); transition: all 0.2s ease; }
.slider-nav-icon:hover { background-color: var(--primary-color); color: #fff; }
.custom-thumbnails { display: flex; justify-content: center; gap: 12px; margin-top: 15px !important; }
.custom-thumbnails button { width: 80px !important; height: 60px !important; text-indent: 0 !important; border: 2px solid transparent !important; border-radius: 8px; overflow: hidden; opacity: 0.5; transition: all 0.3s ease; padding: 0; background-color: #fff !important; box-shadow: 0 2px 5px rgba(0,0,0,0.05); }
.custom-thumbnails button.active, .custom-thumbnails button:hover { opacity: 1; border-color: var(--primary-color) !important; transform: translateY(-3px); }
.custom-thumbnails img { width: 100%; height: 100%; object-fit: cover; border-radius: 6px; }

/* --- 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: FOOTER, MODAL & MOBILE NAV STYLES --- */
.site-footer { background-color: var(--secondary-color); color: #d1d5db; padding-top: 5rem; margin-top: auto; font-size: 0.9rem; }
.footer-title { color: #fff; font-size: 1.15rem; font-weight: 600; margin-bottom: 1.5rem; letter-spacing: 0.5px; }
.footer-link { color: silver; text-decoration: none; transition: all 0.2s; display: inline-block; margin-bottom: 0.8rem; }
.footer-link:hover { color: var(--primary-color); transform: translateX(4px); }
.footer-social-btn { width: 38px; height: 38px; background-color: rgba(255, 255, 255, 0.05); color: #fff; display: inline-flex; align-items: center; justify-content: center; border-radius: 8px; transition: all 0.2s; text-decoration: none; font-size: 1.1rem; }
.footer-social-btn:hover { background-color: var(--primary-color); transform: translateY(-3px); }
.footer-bottom { background-color: #111827; padding: 1.5rem 0; margin-top: 4rem; }
.mobile-bottom-nav { position: fixed; bottom: 0; left: 0; width: 100%; background-color: #fff; box-shadow: 0 -4px 20px rgba(0,0,0,0.06); z-index: 1040; padding-bottom: env(safe-area-inset-bottom); border-top: 1px solid var(--border-color); }
.mobile-bottom-nav .nav-container { display: flex; justify-content: space-around; padding: 10px 0; }
.mobile-bottom-nav .nav-item { display: flex; flex-direction: column; align-items: center; text-decoration: none; color: #6b7280; font-size: 11px; font-weight: 500; transition: color 0.2s; }
.mobile-bottom-nav .nav-item i { font-size: 20px; margin-bottom: 4px; }
.mobile-bottom-nav .nav-item.active, .mobile-bottom-nav .nav-item:hover { 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; } }