@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&display=swap');
:root {
    --bg-dark: #101820; --bg-light: #1D2939; --primary: #8A63D2; --primary-light: #A881E3;
    --text-light: #F2F4F7; --text-dark: #98A2B3; --border-color: #344054;
}
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;font-size:16px}
body{font-family:'Poppins',sans-serif;background-color:var(--bg-dark);color:var(--text-light);line-height:1.6;-webkit-font-smoothing:antialiased}
img{display:block;max-width:100%}
a{color:var(--primary);text-decoration:none;transition:color .3s ease}
a:hover{color:var(--primary-light)}
h1,h2,h3,h4,h5,h6{font-weight:600;line-height:1.2;text-wrap:balance}
.container{width:100%;max-width:1240px;margin:0 auto;padding:0 20px}
.btn{display:inline-block;padding:10px 24px;background:var(--primary);color:var(--text-light)!important;border-radius:8px;font-weight:600;text-align:center;border:2px solid transparent;cursor:pointer;transition:all .3s ease}
.btn:hover{background:var(--primary-light);transform:translateY(-2px)}
.btn-secondary{background:transparent;color:var(--text-dark)!important;border:2px solid var(--border-color)}
.btn-secondary:hover{background:var(--bg-light);color:var(--text-light)!important;border-color:var(--bg-light)}

.header {
    padding: 20px 0;
    position: fixed;
    width: 100%;
    top: 0;
    left: 0;
    z-index: 1000;
    transition: all 0.3s ease;
    background: transparent;
}
.header.scrolled {
    background: rgba(16, 24, 32, 0.85);
    backdrop-filter: blur(10px);
    padding: 15px 0;
    border-bottom: 1px solid var(--border-color);
}
.navbar { display: flex; justify-content: space-between; align-items: center; }
.logo { font-size: 2.5rem; font-weight: 700; color: var(--text-light); text-decoration: none !important; }
.logo span { color: var(--primary); }
.nav-menu { display: block; }
.nav-links { list-style: none; display: flex; gap: 40px; }
.nav-links a { color: var(--text-dark); font-weight: 600; position: relative; padding-bottom: 5px; transition: color 0.3s ease; }
.nav-links a::after { content: ''; position: absolute; bottom: 0; left: 0; width: 0; height: 2px; background-color: var(--primary); transition: width 0.3s ease; }
.nav-links a:hover::after, .nav-links a.active::after { width: 100%; }
.nav-links a:hover, .nav-links a.active { color: var(--text-light); }
.nav-actions { display: flex; align-items: center; gap: 15px; }
.auth-buttons { display: flex; gap: 10px; }
.nav-actions .btn,
.nav-actions .btn-secondary {
    font-weight: 600;
    font-size: 0.9rem;
    padding: 10px 24px;
    border-radius: 8px;
    border: 1px solid rgba(255, 255, 255, 0.15);
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    color: var(--text-light) !important;
    transition: all 0.3s ease;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
}
.nav-actions .btn:hover,
.nav-actions .btn-secondary:hover {
    background: rgba(255, 255, 255, 0.2);
    border-color: rgba(255, 255, 255, 0.3);
    transform: translateY(-2px);
}
.nav-actions .btn {
    background: rgba(138, 99, 210, 0.2);
    border-color: rgba(138, 99, 210, 0.3);
}
.nav-actions .btn:hover {
    background: rgba(138, 99, 210, 0.4);
    border-color: rgba(138, 99, 210, 0.5);
}
.cart-button {
    position: relative;
    width: 42px;
    height: 42px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    border: 1px solid rgba(255, 255, 255, 0.15);
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    color: var(--text-dark);
    transition: all 0.3s ease;
}
.cart-button:hover {
    color: var(--text-light);
    background: rgba(255, 255, 255, 0.2);
    border-color: rgba(255, 255, 255, 0.3);
}
.cart-button svg { width: 26px; height: 26px; }
.cart-count { position: absolute; top: -5px; right: -8px; background-color: var(--primary); color: white; width: 20px; height: 20px; border-radius: 50%; display: flex; justify-content: center; align-items: center; font-size: 0.75rem; font-weight: 700; border: 2px solid var(--bg-dark); box-sizing: content-box; }
.header.scrolled .cart-count { border-color: #101820; }
.profile-menu-container { position: relative; }
.profile-avatar { width: 42px; height: 42px; border-radius: 50%; cursor: pointer; border: 2px solid var(--border-color); padding: 0; overflow: hidden; background:var(--primary); }
.profile-avatar img { width: 100%; height: 100%; object-fit: cover; }
.profile-dropdown { position: absolute; top: 55px; right: 0; background: var(--bg-light); border: 1px solid var(--border-color); border-radius: 8px; width: 200px; box-shadow: 0 5px 25px rgba(0,0,0,0.3); opacity: 0; visibility: hidden; transform: translateY(10px); transition: all 0.3s ease; }
.profile-menu-container.active .profile-dropdown { opacity: 1; visibility: visible; transform: translateY(0); }
.dropdown-header { padding: 15px; border-bottom: 1px solid var(--border-color); }
.dropdown-header span { font-weight: 600; }
.profile-dropdown a { display: block; padding: 12px 15px; color: var(--text-dark); }
.profile-dropdown a:hover { background: var(--bg-dark); color: var(--text-light); }
.mobile-menu-toggle { display: none; background: none; border: none; z-index: 1001; }
.mobile-menu-toggle span { display: block; width: 25px; height: 3px; background-color: var(--text-light); margin: 5px 0; transition: all 0.3s ease; }
.mobile-nav-panel { display: none; }

.price-ribbon {
    width: 150px;
    height: 32px;
    position: absolute;
    top: 20px;
    left: -40px;
    transform: rotate(-45deg);
    background: var(--primary);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.9rem;
    font-weight: 700;
    text-align: center;
    box-shadow: 0 4px 10px rgba(0,0,0,0.3);
    z-index: 5;
}
.price-ribbon.free { background: #10B981; }
.price-ribbon::before,
.price-ribbon::after { content: ''; position: absolute; border-style: solid; border-color: transparent; }
.price-ribbon::before { bottom: -5px; left: 0; border-width: 0 5px 5px 0; border-right-color: #5d3b9e; }
.price-ribbon::after { bottom: -5px; right: 0; border-width: 5px 5px 0 0; border-top-color: #5d3b9e; }

.footer-masterpiece {
    background-color: var(--bg-dark);
    color: var(--text-dark);
}
.footer-contact-section {
    background-color: #161F2C;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='100' viewBox='0 0 100 100'%3E%3Cg fill-rule='evenodd'%3E%3Cg fill='%232d3748' fill-opacity='0.1'%3E%3Cpath opacity='.5' d='M96 95h4v1h-4v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4H0v-1h4v-9H0v-1h4v-9H0v-1h4v-9H0v-1h4v-9H0v-1h4v-9H0v-1h4v-9H0v-1h4v-9H0v-1h4v-9H0v-1h4V0h1v4h9V0h1v4h9V0h1v4h9V0h1v4h9V0h1v4h9V0h1v4h9V0h1v4h9V0h1v4h9V0h1v4h4v1h-4v9h4v1h-4v9h4v1h-4v9h4v1h-4v9h4v1h-4v9h4v1h-4v9h4v1h-4v9h4v1h-4v9zm-1 0v-1h-9v1h9zm-10 0v-1h-9v1h9zm-10 0v-1h-9v1h9zm-10 0v-1h-9v1h9zm-10 0v-1h-9v1h9zm-10 0v-1h-9v1h9zm-10 0v-1h-9v1h9zm-10 0v-1h-9v1h9zm-9-10h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm9-10v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-9-10h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm9-10v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-9-10h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm9-10v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-9-10h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm9-10v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9z'/%3E%3Cpath d='M6 5V0h1v5h4V0h1v5h4V0h1v5h4V0h1v5h4V0h1v5h4V0h1v5h4V0h1v5h4V0h1v5h4V0h1v5h4V0h1v5h4V0h1v5h4V0h1v5h4V0h1v5h5v1h-5v4h5v1h-5v4h5v1h-5v4h5v1h-5v4h5v1h-5v4h5v1h-5v4h5v1h-5v4h5v1h-5v4h-1v-4h-4v4h-1v-4h-4v4h-1v-4h-4v4h-1v-4h-4v4h-1v-4h-4v4h-1v-4h-4v4h-1v-4h-4v4h-1v-4h-4v4h-1v-4h-4v4H6v-1h4v-4H6v-1h4v-4H6v-1h4v-4H6v-1h4v-4H6v-1h4v-4H6v-1h4V5H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
    padding: 80px 0;
    color: white;
    border-top: 1px solid var(--border-color);
}
.footer-contact-content {
    display: grid;
    grid-template-columns: 1fr 1.2fr;
    gap: 50px;
    align-items: center;
}
.footer-contact-text h2 {
    font-size: 2.5rem;
    margin-bottom: 15px;
    color: white;
}
.footer-contact-text .sub {
    font-size: 1.1rem;
    opacity: 0.9;
    color: var(--text-dark);
}
.footer-contact-form .form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 15px;
    margin-bottom: 15px;
}
.footer-contact-form input, .footer-contact-form textarea {
    width: 100%;
    padding: 14px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    color: white;
    font-family: inherit;
    font-size: 1rem;
}
.footer-contact-form input::placeholder, .footer-contact-form textarea::placeholder {
    color: var(--text-dark);
}
.footer-contact-form input[name="phone"] {
    margin-bottom: 15px;
}
.footer-contact-form textarea {
    margin-bottom: 15px;
    resize: vertical;
}
.footer-contact-form .btn {
    width: 100%;
    background: var(--primary);
    color: white !important;
    padding: 14px;
    font-size: 1rem;
}
.form-success-message {
    display: none;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 40px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid var(--border-color);
    border-radius: 8px;
}
.form-success-message svg { color: #34D399; }
.form-success-message h4 { font-size: 1.5rem; color: var(--text-light); margin: 15px 0 10px 0; }
.form-success-message p { color: var(--text-dark); }

.footer-main {
    padding: 80px 0;
    background: var(--bg-light);
}
.footer-grid {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr 1.5fr;
    gap: 30px;
}
.footer-col.about .logo {
    margin-bottom: 20px;
    font-size: 2.5rem;
}
.footer-col.about p {
    line-height: 1.7;
    padding-right: 20px;
}
.social-links {
    display: flex;
    gap: 10px;
    margin-top: 20px;
}
.social-links a {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bg-dark);
    border-radius: 50%;
    color: var(--text-dark);
    transition: all 0.3s ease;
}
.social-links a:hover {
    background: var(--primary);
    color: white;
}
.footer-col h3 {
    color: var(--text-light);
    font-size: 1.1rem;
    margin-bottom: 20px;
    font-weight: 600;
}
.footer-col ul {
    list-style: none;
    padding: 0;
    margin: 0;
}
.footer-col ul li {
    margin-bottom: 10px;
}
.footer-col ul li a, .footer-col.contact a {
    color: var(--text-dark);
    text-decoration: none;
}
.footer-col ul li a:hover, .footer-col.contact a:hover {
    color: var(--primary);
}
.footer-col.contact p {
    margin-bottom: 10px;
}
.footer-bottom {
    background: var(--bg-dark);
    border-top: 1px solid var(--border-color);
    padding: 25px 0;
    text-align: center;
    font-size: 0.9rem;
}

.fab-container { position: fixed; bottom: 40px; right: 40px; z-index: 1000; }
.fab-toggle { width: 60px; height: 60px; border-radius: 50%; background: var(--primary); display: flex; align-items: center; justify-content: center; cursor: pointer; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25); transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275); position: relative; z-index: 10; }
.fab-toggle:hover { background: var(--primary-light); }
.fab-toggle svg { width: 28px; height: 28px; color: white; position: absolute; }
#fab-icon-open, #fab-icon-close { transition: opacity 0.3s ease, transform 0.3s ease; }
#fab-icon-close { opacity: 0; transform: scale(0.5) rotate(-45deg); }
.fab-container.active .fab-toggle { transform: rotate(180deg); }
.fab-container.active #fab-icon-open { opacity: 0; transform: scale(0.5) rotate(45deg); }
.fab-container.active #fab-icon-close { opacity: 1; transform: scale(1) rotate(0); }
.fab-menu { position: absolute; bottom: 75px; right: 2.5px; display: flex; flex-direction: column; gap: 15px; pointer-events: none; }
.fab-item { display: block; transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275); opacity: 0; transform: translateY(20px); }
.fab-icon-wrapper { width: 55px; height: 55px; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: white; text-decoration: none; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2); transition: transform 0.2s ease-out; }
.fab-item:hover .fab-icon-wrapper { transform: scale(1.15); }
.fab-container.active .fab-menu { pointer-events: auto; }
.fab-container.active .fab-item { opacity: 1; transform: translateY(0); }
.fab-item.whatsapp .fab-icon-wrapper { background-color: #25d366; }
.fab-item.twitter .fab-icon-wrapper { background-color: #1da1f2; }
.fab-item.facebook .fab-icon-wrapper { background-color: #1877f2; }
.fab-item.tiktok .fab-icon-wrapper { background-color: #010101; }
.fab-item.instagram .fab-icon-wrapper { background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285aeb 90%); }
.fab-item.linkedin .fab-icon-wrapper { background-color: #0077b5; }

.fab-icon-wrapper::before { content: ''; width: 28px; height: 28px; background-color: white; -webkit-mask-repeat: no-repeat; -webkit-mask-position: center; -webkit-mask-size: contain; }

.fab-item.whatsapp .fab-icon-wrapper::before { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'%3E%3Cpath fill='currentColor' d='M380.9 97.1C339 55.1 283.2 32 223.9 32c-122.4 0-222 99.6-222 222 0 39.1 10.2 77.3 29.6 111L0 480l117.7-30.9c32.4 17.7 68.9 27 106.1 27h.1c122.3 0 224.1-99.6 224.1-222 0-59.3-25.2-115-67.1-157zm-157 341.6c-33.8 0-67.6-9.5-97.2-27.2l-6.7-4-71.7 18.7 19.3-70.1-4.4-7c-18.5-29.4-28.2-63.3-28.2-98.2 0-101.7 82.8-184.5 184.6-184.5 49.3 0 95.6 19.2 130.4 54.1 34.8 34.9 56.2 81.2 56.1 130.5 0 101.8-84.9 184.6-186.6 184.6zm101.2-138.2c-5.5-2.8-32.8-16.2-37.9-18-5.1-1.9-8.8-2.8-12.5 2.8-3.7 5.6-14.3 18-17.6 21.8-3.2 3.7-6.5 4.2-12 1.4-32.6-16.3-54-29.1-75.5-66-5.7-9.8 5.7-9.1 16.3-30.3 1.8-3.7.9-6.9-.5-9.7-1.4-2.8-12.5-30.1-17.1-41.2-4.5-10.8-9.1-9.3-12.5-9.5-3.2-.2-6.9-.2-10.6-.2-3.7 0-9.7 1.4-14.8 6.9-5.1 5.6-19.4 19-19.4 46.3 0 27.3 19.9 53.7 22.6 57.4 2.8 3.7 39.1 59.7 94.8 83.8 35.2 15.2 49 16.5 66.6 13.9 10.7-1.6 32.8-13.4 37.4-26.4 4.6-13 4.6-24.1 3.2-26.4-1.3-2.5-5-3.9-10.5-6.6z'/%3E%3C/svg%3E"); }
.fab-item.twitter .fab-icon-wrapper::before { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='currentColor'%3E%3Cpath d='M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231 L18.244 2.25zM16.97 19.688h1.844L7.542 4.156H5.564l11.406 15.532z'/%3E%3C/svg%3E"); }
.fab-item.facebook .fab-icon-wrapper::before { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='currentColor'%3E%3Cpath d='M12 2.04C6.5 2.04 2 6.53 2 12.06c0 5.07 3.66 9.27 8.44 10.02v-7.03H7.9V12.06h2.54V9.84c0-2.5 1.5-3.89 3.8-3.89 1.1 0 2.22.2 2.22.2v2.5h-1.3c-1.22 0-1.6.73-1.6 1.52v1.88h2.8l-.45 2.99h-2.35v7.03c4.78-.75 8.44-4.95 8.44-10.02C22 6.53 17.5 2.04 12 2.04z'/%3E%3C/svg%3E"); }
.fab-item.tiktok .fab-icon-wrapper::before { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'%3E%3Cpath fill='currentColor' d='M448 209.91A210.06 210.06 0 0 1 325.23 170.66V349.38A162.55 162.55 0 1 1 185 188.31v89.89a74.62 74.62 0 1 0 52.23 71.18V0h88a121.18 121.18 0 0 0 1.86 22.17h0A122.18 122.18 0 0 0 381 102.39a121.43 121.43 0 0 0 67 20.14z'/%3E%3C/svg%3E"); }
.fab-item.instagram .fab-icon-wrapper::before { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='currentColor'%3E%3Cpath d='M12 2c2.72 0 3.05.01 4.12.06 1.06.05 1.79.22 2.42.46.65.25 1.13.59 1.62 1.08.49.49.83.97 1.08 1.62.24.63.41 1.36.46 2.42.05 1.07.06 1.4.06 4.12s-.01 3.05-.06 4.12c-.05 1.06-.22 1.79-.46 2.42a4.94 4.94 0 01-2.7 2.7c-.63.24-1.36.41-2.42.46-1.07.05-1.4.06-4.12.06s-3.05-.01-4.12-.06c-1.06-.05-1.79-.22-2.42-.46a4.94 4.94 0 01-2.7-2.7c-.24-.63-.41-1.36-.46-2.42C2.01 15.05 2 14.72 2 12s.01-3.05.06-4.12c.05-1.06.22-1.79.46-2.42.25-.65.59-1.13 1.08-1.62.49-.49.97-.83 1.62-1.08.63-.24 1.36-.41 2.42-.46C8.95 2.01 9.28 2 12 2zM12 6.88a5.12 5.12 0 100 10.24 5.12 5.12 0 000-10.24zm0 8.44a3.32 3.32 0 110-6.64 3.32 3.32 0 010 6.64zm6.44-9.32a1.2 1.2 0 100-2.4 1.2 1.2 0 000 2.4z'/%3E%3C/svg%3E"); }
.fab-item.linkedin .fab-icon-wrapper::before { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='currentColor'%3E%3Cpath d='M20.5 2h-17A1.5 1.5 0 002 3.5v17A1.5 1.5 0 003.5 22h17a1.5 1.5 0 001.5-1.5v-17A1.5 1.5 0 0020.5 2zM8 19H5v-9h3zM6.5 8.25A1.75 1.75 0 118.25 6.5 1.75 1.75 0 016.5 8.25zM19 19h-3v-4.75c0-1.4-1.2-2.5-2.5-2.5S11 12.85 11 14.25V19h-3v-9h3v1.38c.6-.98 1.9-1.63 3-1.63 2.5 0 4.5 2.25 4.5 5v5.25z'/%3E%3C/svg%3E"); }

@media(max-width:992px){
    .nav-menu { display: none; }
    .mobile-menu-toggle { display: block; }
    .mobile-nav-panel { display: flex; flex-direction: column; position: fixed; top: 0; right: -100%; width: 300px; height: 100vh; background: var(--bg-light); padding: 100px 40px; z-index: 999; transition: right 0.4s ease; box-shadow: -5px 0 25px rgba(0,0,0,0.2); }
    .mobile-nav-panel.open { right: 0; }
    .mobile-nav-panel nav { display: flex; flex-direction: column; gap: 25px; }
    .mobile-nav-panel a { color: var(--text-light); font-size: 1.5rem; font-weight: 600; }
    .mobile-menu-toggle.open span:nth-child(1) { transform: rotate(45deg) translate(5px, 5px); }
    .mobile-menu-toggle.open span:nth-child(2) { opacity: 0; }
    .mobile-menu-toggle.open span:nth-child(3) { transform: rotate(-45deg) translate(7px, -7px); }
    .footer-grid{grid-template-columns:1fr 1fr}
    #footer-about{grid-column:1/-1}
}

::-webkit-scrollbar {
    width: 8px;
}
::-webkit-scrollbar-track {
    background: #0d0d1f;
    border-radius: 10px;
}
::-webkit-scrollbar-thumb {
    background: #7c3aed;
    border-radius: 10px;
}
::-webkit-scrollbar-thumb:hover {
    background: #a78bfa;
}
#hakkimizda_bolumu h2 span, #iletisim h2 span {
    color: var(--primary);
}
.coming-soon-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(16, 24, 32, 0.75);
    display: flex;
    justify-content: center;
    align-items: center;
    color: white;
    font-size: 1.5rem;
    font-weight: 700;
    letter-spacing: 2px;
    backdrop-filter: blur(5px);
    z-index: 4;
}
.disabled-btn {
    pointer-events: none;
    opacity: 0.5;
    background-color: var(--border-color);
    border-color: var(--border-color);
}
body.no-scroll {
    overflow: hidden;
}

@media (max-width: 992px) {
    .navbar {
        justify-content: space-between;
    }
    .nav-menu, .nav-actions {
        display: none;
    }
    .mobile-menu-toggle {
        display: flex;
        flex-direction: column;
        justify-content: space-around;
        width: 30px;
        height: 30px;
        background: transparent;
        border: none;
        cursor: pointer;
        padding: 0;
        z-index: 1001;
    }
    .mobile-menu-toggle span {
        width: 30px;
        height: 3px;
        background-color: var(--text-light);
        border-radius: 10px;
        transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
        position: relative;
        transform-origin: 1px;
    }
    .mobile-menu-toggle.open span:nth-child(1) {
        transform: rotate(45deg) translate(2px, -1px);
    }
    .mobile-menu-toggle.open span:nth-child(2) {
        opacity: 0;
        transform: translateX(20px);
    }
    .mobile-menu-toggle.open span:nth-child(3) {
        transform: rotate(-45deg) translate(1px, 2px);
    }
    .mobile-nav-panel {
        display: flex;
        flex-direction: column;
        position: fixed;
        top: 0;
        right: -100%;
        width: 320px;
        max-width: 90%;
        height: 100vh;
        background: var(--bg-light);
        padding: 100px 30px 40px 30px;
        z-index: 1000;
        transition: right 0.4s ease-in-out;
        box-shadow: -5px 0 25px rgba(0,0,0,0.2);
        overflow-y: auto;
    }
    .mobile-nav-panel.open {
        right: 0;
    }
    .mobile-nav-panel nav {
        display: flex;
        flex-direction: column;
        gap: 15px;
        border-bottom: 1px solid var(--border-color);
        padding-bottom: 30px;
        margin-bottom: 30px;
    }
    .mobile-nav-panel a {
        color: var(--text-light);
        font-size: 1.2rem;
        font-weight: 600;
        padding: 10px;
        border-radius: 8px;
        transition: background-color 0.2s ease;
    }
     .mobile-nav-panel a:hover {
        background-color: var(--bg-dark);
    }
    .mobile-nav-panel .nav-actions {
        display: flex;
        flex-direction: column;
        gap: 15px;
    }
    .mobile-nav-panel .auth-buttons {
        display: flex;
        flex-direction: column;
        gap: 15px;
    }
    .mobile-nav-panel .auth-buttons .btn {
        width: 100%;
        text-align: center;
        padding: 12px;
    }
    .mobile-nav-panel .profile-section {
        display: flex;
        flex-direction: column;
        gap: 10px;
    }
    .mobile-nav-panel .profile-section a {
        display: flex;
        align-items: center;
        gap: 10px;
    }
    .mobile-cart-section {
        border-bottom: 1px solid var(--border-color);
        padding-bottom: 30px;
        margin-bottom: 30px;
    }
    .mobile-cart-section > a {
        display: flex;
        justify-content: space-between;
        align-items: center;
    }
    .mobile-cart-section .cart-info {
        display: flex;
        align-items: center;
        gap: 8px;
        color: var(--text-dark);
    }
    .mobile-cart-section .cart-info svg {
        stroke: var(--primary);
    }
    .mobile-cart-section .cart-count {
        position: static;
        border: none;
        width: auto;
        height: auto;
        background-color: var(--primary);
        padding: 2px 8px;
        font-size: 0.8rem;
        border-radius: 6px;
        color: white;
        font-weight: 600;
    }
    .footer-grid{grid-template-columns:1fr 1fr}
    #footer-about{grid-column:1/-1}
    .auth-wrapper { grid-template-columns: 1fr; }
    .auth-branding-panel { display: none; }
    .auth-form-panel { min-height: 100vh; }
}

@media (max-width: 576px) {
    .footer-grid{grid-template-columns:1fr}
    .form-row:first-of-type,
    .form-row:nth-of-type(2) {
        grid-template-columns: 1fr;
    }
}

.v-menu-button {
    display: none;
    background-color: transparent;
    border: none;
    color: var(--text-light);
    cursor: pointer;
    padding: 5px;
    z-index: 1010;
}

.v-menu-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(5px);
    z-index: 1000;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}

.v-menu-overlay.is-open {
    opacity: 1;
    visibility: visible;
}

.v-mobile-nav {
    position: fixed;
    top: 0;
    right: 0;
    width: 320px;
    max-width: 90%;
    height: 100%;
    background-color: var(--bg-dark);
    border-left: 1px solid var(--border-color);
    z-index: 1005;
    transform: translateX(100%);
    transition: transform 0.4s cubic-bezier(0.23, 1, 0.32, 1);
    display: flex;
    flex-direction: column;
}

.v-mobile-nav.is-open {
    transform: translateX(0);
}

.v-nav-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px;
    border-bottom: 1px solid var(--border-color);
    flex-shrink: 0;
}

.v-close-button {
    background: none;
    border: none;
    color: var(--text-dark);
    font-size: 2.5rem;
    line-height: 1;
    cursor: pointer;
    padding: 5px;
}

.v-nav-body {
    padding: 20px;
    overflow-y: auto;
    flex-grow: 1;
}

.v-nav-links {
    display: flex;
    flex-direction: column;
}

.v-nav-links a, .v-action-link {
    color: var(--text-light);
    padding: 15px 10px;
    font-size: 1.1rem;
    font-weight: 500;
    border-radius: 8px;
    transition: background-color 0.2s ease, color 0.2s ease;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.v-nav-links a:hover, .v-action-link:hover {
    background-color: var(--bg-light);
    color: white;
}

.v-nav-separator {
    height: 1px;
    background-color: var(--border-color);
    margin: 20px 0;
}

.v-nav-actions {
    display: flex;
    flex-direction: column;
}

.cart-badge {
    background-color: var(--primary);
    color: white;
    font-size: 0.8rem;
    padding: 3px 8px;
    border-radius: 10px;
    font-weight: 600;
}

.v-nav-footer {
    padding: 20px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 15px;
    border-top: 1px solid var(--border-color);
}

.v-nav-footer .btn {
    width: 100%;
    padding: 12px;
}

@media (max-width: 992px) {
    .nav-menu, .nav-actions {
        display: none !important;
    }
    .v-menu-button {
        display: block;
    }
}
.profile-menu-container:hover .profile-dropdown {
    opacity: 1 !important;
    visibility: visible !important;
    transform: translateY(0) !important;
    background-color: #1d2939; 
}
.footer-col.contact .contact-item {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
}
.footer-col.contact .contact-item svg {
    width: 20px;
    height: 20px;
    color: var(--primary);
    flex-shrink: 0;
}
.nav-links .nav-icon {
    display: flex;
    align-items: center;
    justify-content: center;
}
.header-right {
    display: flex;
    align-items: center;
    gap: 30px;
    margin-left: auto;
}
@media (max-width: 992px) {
    .header-right {
        display: none !important;
    }
}