@import url('https://fonts.googleapis.com/css2?family=Vazirmatn:wght@300;400;500;600;700;800;900&display=swap');
@import url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css');

:root {
    --bg-main: #111C2A; --bg-card: rgba(11, 19, 29, 0.65); 
    --gold: #D4AF37; --gold-glow: rgba(212, 175, 55, 0.5);
    --silver-bright: #FFFFFF; --silver-dim: #94A3B8;
    --danger: #EF4444; --fib-red: #E11D48; --qi-blue: #0284C7;
    --border-gold: rgba(212, 175, 55, 0.35); --border-light: rgba(255, 255, 255, 0.15);
}

* { margin: 0; padding: 0; box-sizing: border-box; font-family: 'Vazirmatn', sans-serif; -webkit-tap-highlight-color: transparent; }
html[dir="ltr"] * { font-family: 'Helvetica Neue', Arial, sans-serif !important; }
html[dir="ltr"] .logo-text, html[dir="ltr"] h1, html[dir="ltr"] h2 { font-family: 'Georgia', serif !important; letter-spacing: 1px; }
html[dir="ltr"] .form-group { text-align: left; }
html[dir="ltr"] .detail-img-box { transform: scale(1); }

/* چارەسەری کێشەی سکرۆڵکردن لە مۆبایلدا */
html { scroll-behavior: smooth; }
body { color: var(--silver-bright); min-height: 100svh; overflow-x: hidden; position: relative; display: flex; flex-direction: column; -webkit-overflow-scrolling: touch; }

.base-bg { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: var(--bg-main); z-index: -10; }

.lang-switcher { display: flex; gap: 8px; font-size: 13px; color: var(--silver-dim); align-items: center; }
.lang-switcher button { background: none; border: none; color: var(--silver-dim); cursor: pointer; font-weight: 600; transition: 0.3s; font-family: 'Vazirmatn', sans-serif; }
.lang-switcher button:hover, .lang-switcher button.active { color: var(--gold); }

.site-logo { height: 45px; width: auto; object-fit: contain; transition: transform 0.3s; }
.welcome-logo { height: 80px; width: auto; margin-bottom: 20px; object-fit: contain; filter: drop-shadow(0 0 10px rgba(255,255,255,0.2)); }

.cart-icon-btn { position: relative; cursor: pointer; color: #FFF; font-size: 22px; transition: 0.3s; background: rgba(255,255,255,0.1); width: 40px; height: 40px; border-radius: 50%; display: flex; justify-content: center; align-items: center; border: 1px solid var(--border-light); z-index: 100; }
.cart-icon-btn:hover { background: var(--gold); color: #111C2A; border-color: var(--gold); }
.cart-badge { position: absolute; top: -5px; right: -5px; background: var(--danger); color: #FFF; font-size: 11px; font-weight: 900; width: 18px; height: 18px; border-radius: 50%; display: flex; justify-content: center; align-items: center; border: 2px solid #111C2A; }

.reveal { opacity: 0; transform: translateY(40px); transition: 0.8s cubic-bezier(0.25, 1, 0.5, 1); }
.reveal.active { opacity: 1; transform: translateY(0); }
@keyframes fadeUp { from { opacity: 0; transform: translateY(30px); } to { opacity: 1; transform: translateY(0); } }
.stagger-item { opacity: 0; animation: fadeUp 0.6s cubic-bezier(0.25, 1, 0.5, 1) forwards; }
.shimmer { position: relative; overflow: hidden; }
.shimmer::before { content: ''; position: absolute; top: 0; left: -150%; width: 50%; height: 100%; background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent); transform: skewX(-25deg); transition: 0.7s; z-index: 10; pointer-events: none; }
.shimmer:hover::before { left: 150%; transition: 0.7s; }

.dt-page-bg { position: fixed; top: -5%; left: -5%; width: 110%; height: 110%; background-size: cover; background-position: center; z-index: -5; opacity: 0; filter: blur(15px) saturate(1.2); transition: opacity 1.2s ease, transform 15s linear; transform: scale(1); pointer-events: none; }
.dt-page-bg.active { transform: scale(1.05); opacity: 0.8; }
.dt-page-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: linear-gradient(to bottom, rgba(17, 28, 42, 0.4) 0%, rgba(17, 28, 42, 0.9) 100%); z-index: -4; opacity: 0; transition: opacity 1s ease; pointer-events: none; }
.dt-page-overlay.active { opacity: 1; }

.ambient-light-1 { position: fixed; top: -10%; left: -10%; width: 600px; height: 600px; background: radial-gradient(circle, rgba(212, 175, 55, 0.15) 0%, transparent 70%); filter: blur(80px); z-index: -3; pointer-events: none; animation: pulseGlow 6s infinite alternate; }
.ambient-light-2 { position: fixed; bottom: -10%; right: -10%; width: 600px; height: 600px; background: radial-gradient(circle, rgba(255, 255, 255, 0.08) 0%, transparent 70%); filter: blur(80px); z-index: -3; pointer-events: none; animation: pulseGlow 8s infinite alternate-reverse; }
@keyframes pulseGlow { 0% { transform: scale(1); opacity: 0.7; } 100% { transform: scale(1.2); opacity: 1; } }

header { background: rgba(17, 28, 42, 0.75); backdrop-filter: blur(25px); border-bottom: 1px solid var(--border-gold); position: sticky; top: 0; z-index: 100; padding: 15px 6%; display: flex; justify-content: space-between; align-items: center; box-shadow: 0 10px 40px rgba(0,0,0,0.4); }
.logo { display: flex; align-items: center; gap: 12px; text-decoration: none; cursor: pointer; transition: transform 0.3s; }
.logo:hover { transform: scale(1.05); }

.view-section { display: none; opacity: 0; transition: opacity 0.4s ease-out; flex: 1; }
.view-section.active { display: block; opacity: 1; }

/* =========================================================
   دیزاینی سینەمایی - باکگراوندی جێگیر
   ========================================================= */
.hero-slider-wrap { position: relative; width: 100%; height: 75vh; min-height: 500px; max-height: 750px; background: #000; overflow: hidden; margin-bottom: 0; border-bottom: none; }

.hero-bg { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; z-index: 1; opacity: 1; filter: none; transform: scale(1.05); transition: opacity 0.5s ease; } 

.hero-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(17, 28, 42, 0.35); z-index: 2; }
html[dir="ltr"] .hero-overlay { background: rgba(17, 28, 42, 0.35); }

.hero-slide { position: absolute; top: 0; left: 0; width: 100%; height: 100%; opacity: 0; transition: opacity 0.8s ease; display: flex; align-items: center; justify-content: center; z-index: 3; pointer-events: none; }
.hero-slide.active { opacity: 1; z-index: 5; pointer-events: auto; }

.hero-content-flex { position: relative; z-index: 10; display: flex; align-items: center; justify-content: space-between; width: 100%; max-width: 1250px; margin: 0 auto; padding: 0 5%; gap: 40px; }
.hero-text-side { flex: 1.2; text-align: right; }
html[dir="ltr"] .hero-text-side { text-align: left; }
.hero-image-side { flex: 0.8; display: flex; justify-content: flex-end; }
html[dir="ltr"] .hero-image-side { justify-content: flex-start; }

.hero-poster { width: 100%; max-width: 320px; height: 460px; object-fit: cover; border-radius: 12px; box-shadow: 0 25px 60px rgba(0,0,0,0.9), 0 0 20px rgba(255,255,255,0.1); border: 1px solid rgba(255,255,255,0.15); transition: transform 0.6s ease; }
.hero-slide.active .hero-poster { animation: posterFloat 6s ease-in-out infinite alternate; }

@keyframes posterFloat { 0% { transform: translateY(0); } 100% { transform: translateY(-15px); } }

.hero-tag { background: rgba(212,175,55,0.15); border: 1px solid var(--gold); color: var(--gold); padding: 6px 16px; border-radius: 20px; font-size: 13px; font-weight: 800; display: inline-block; margin-bottom: 20px; letter-spacing: 1px; }
.hero-title { font-size: 44px; font-weight: 900; color: #FFF; margin-bottom: 15px; text-shadow: 0 5px 15px rgba(0,0,0,0.8); line-height: 1.3; }
.hero-desc { font-size: 16px; color: var(--silver-bright); margin-bottom: 25px; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; line-height: 1.8; max-width: 95%; text-shadow: 0 2px 5px rgba(0,0,0,0.8); }
.hero-price-tag { font-size: 26px; font-weight: 900; color: var(--gold); margin-bottom: 30px; text-shadow: 0 2px 10px rgba(0,0,0,0.5); }

.btn-hero-primary { background: linear-gradient(135deg, var(--gold), #AA8A2E); color: #111C2A; padding: 16px 35px; border-radius: 14px; border: none; font-weight: 900; font-size: 17px; cursor: pointer; transition: 0.3s; display: inline-flex; align-items: center; gap: 10px; box-shadow: 0 10px 25px var(--gold-glow); }
.btn-hero-primary:hover { transform: translateY(-5px); box-shadow: 0 15px 35px rgba(212,175,55,0.6); }

.hero-nav-dots { position: absolute; bottom: 30px; left: 50%; transform: translateX(-50%); display: flex; gap: 12px; z-index: 10; align-items: center; }
.hero-dot { width: 12px; height: 12px; border-radius: 50%; background: rgba(255,255,255,0.5); cursor: pointer; transition: 0.4s; box-shadow: 0 2px 5px rgba(0,0,0,0.5); }
.hero-dot.active { width: 35px; border-radius: 6px; background: var(--gold); box-shadow: 0 0 10px var(--gold-glow); }

/* =========================================================
   شریتی ئاگاداری (Ticker) - بەبێ هیچ بۆشایی و وەستانێک
   ========================================================= */
.news-ticker-wrap { 
    width: 100%; 
    background: rgba(17, 28, 42, 0.95); 
    border-bottom: 1px solid var(--border-gold); 
    border-top: 1px solid var(--border-gold); 
    overflow: hidden; 
    padding: 10px 0; 
    margin-bottom: 35px; 
    white-space: nowrap; 
    position: relative; 
    z-index: 10; 
    box-shadow: 0 5px 15px rgba(0,0,0,0.3); 
    direction: ltr; /* زۆر گرنگە بۆ ئەوەی بە دروستی لە چەپەوە بێت */
}
.news-ticker-content { 
    display: inline-block; 
    color: var(--gold); 
    font-size: 15px; 
    font-weight: 700; 
    padding-right: 15px; 
    padding-left: 15px;
    animation: tickerLTR 30s linear infinite; /* خێراییەکی نەرم و مامناوەند */
    direction: rtl; /* بۆ ئەوەی نووسینە کوردییەکە تێک نەچێت */
}
.news-ticker-content i { margin: 0 10px; color: var(--danger); font-size: 13px; }

/* لەسەرەتاوە تا کۆتایی بە یەکجاری دەڕوات و یەکسەر دووبارە دەبێتەوە بێ بۆشایی */
@keyframes tickerLTR { 
    0% { transform: translateX(-100%); } 
    100% { transform: translateX(100vw); } 
}

/* ڕەنگەکانی پاکێجینگ */
.color-options { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 10px; }
.color-btn { width: 35px; height: 35px; border-radius: 50%; border: 2px solid var(--border-light); cursor: pointer; transition: 0.3s; position: relative; }
.color-btn:hover { transform: scale(1.1); }
.color-btn.active { border-color: #FFF; transform: scale(1.2); box-shadow: 0 0 15px rgba(255,255,255,0.5); }
.color-btn.active::after { content: '✔'; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); color: #FFF; font-size: 14px; text-shadow: 0 0 5px #000; }
/* ========================================================= */

.filters { display: flex; justify-content: center; gap: 12px; flex-wrap: wrap; margin-bottom: 40px; padding: 0 10px; }
.filter-btn { background: rgba(255,255,255,0.03); border: 1px solid var(--border-gold); color: var(--gold); padding: 10px 26px; border-radius: 30px; cursor: pointer; transition: 0.3s; font-size: 14px; font-weight: 700; position: relative; overflow: hidden; }
.filter-btn.active, .filter-btn:hover { border-color: var(--gold); color: #111C2A; background: var(--gold); font-weight: 800; transform: translateY(-3px); box-shadow: 0 8px 25px var(--gold-glow); }

.container { max-width: 1250px; margin: 0 auto; padding: 0 5% 80px; }
.products-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: 35px; }

.product-card { background: var(--bg-card); border: 1px solid var(--border-light); border-radius: 24px; overflow: hidden; transition: all 0.4s ease; cursor: pointer; position: relative; display: flex; flex-direction: column; backdrop-filter: blur(20px); box-shadow: 0 15px 35px rgba(0,0,0,0.2); }
.product-card:hover { transform: translateY(-10px); box-shadow: 0 30px 60px rgba(0,0,0,0.5), 0 0 30px var(--gold-glow); background: rgba(17, 28, 42, 0.9); border-color: var(--gold); }
.img-wrapper { width: 100%; height: 320px; overflow: hidden; position: relative; background: #0B121C; }
.product-img { width: 100%; height: 100%; object-fit: cover; transition: transform 1s cubic-bezier(0.25, 1, 0.5, 1); opacity: 0.95; }
.product-card:hover .product-img { transform: scale(1.12) rotate(1deg); opacity: 1; }

.badge-925 { position: absolute; top: 15px; right: 15px; background: rgba(17, 28, 42, 0.9); border: 1px solid var(--gold); color: var(--gold); font-size: 10px; font-weight: 800; padding: 5px 12px; border-radius: 20px; z-index: 2; letter-spacing: 1px; backdrop-filter: blur(5px); }
.badge-offer { position: absolute; top: 15px; left: 15px; background: linear-gradient(135deg, var(--danger), #B91C1C); color: #FFF; font-size: 11px; font-weight: 800; padding: 5px 12px; border-radius: 20px; z-index: 2; box-shadow: 0 4px 15px rgba(239, 68, 68, 0.5); animation: pulseBadge 1.5s infinite; }
@keyframes pulseBadge { 0%, 100% { transform: scale(1); box-shadow: 0 4px 15px rgba(239, 68, 68, 0.5); } 50% { transform: scale(1.08); box-shadow: 0 4px 25px rgba(239, 68, 68, 0.8); } }

.card-info { padding: 25px; display: flex; flex-direction: column; flex: 1; justify-content: space-between; }
.cat-name { color: var(--gold); font-size: 11px; letter-spacing: 3px; text-transform: uppercase; margin-bottom: 6px; font-weight: 800; }
.prod-title { font-size: 19px; font-weight: 700; color: #FFF; margin-bottom: 12px; line-height: 1.5; transition: color 0.3s; }
.product-card:hover .prod-title { color: var(--gold); }
.price-box { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.prod-price { font-size: 24px; font-weight: 900; color: #FFF; transition: 0.3s; }
.product-card:hover .prod-price { color: var(--gold); }
.old-price { font-size: 15px; font-weight: 600; color: var(--silver-dim); text-decoration: line-through; text-decoration-color: var(--danger); text-decoration-thickness: 2px; }
.offer-title-label { font-size: 11px; color: #FCA5A5; background: rgba(239, 68, 68, 0.15); padding: 4px 12px; border-radius: 8px; border: 1px dashed rgba(239, 68, 68, 0.3); display: inline-block; margin-bottom: 10px; font-weight: 800; }

.btn-buy-card { margin-top: 20px; background: var(--gold); border: none; color: #111C2A; padding: 14px; border-radius: 14px; font-weight: 800; transition: 0.4s ease; display: flex; align-items: center; justify-content: center; gap: 10px; font-size: 15px; box-shadow: 0 8px 20px var(--gold-glow); overflow: hidden; position: relative; cursor: pointer;}
.product-card:hover .btn-buy-card { transform: scale(1.05); }

.detail-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 30px; flex-wrap: wrap; gap: 10px; }
.btn-back { background: var(--gold); border: none; color: #111C2A; padding: 12px 25px; border-radius: 14px; cursor: pointer; transition: 0.3s; display: flex; align-items: center; gap: 10px; font-weight: 800; font-size: 15px; box-shadow: 0 5px 20px var(--gold-glow); }
.btn-back:hover { transform: translateX(5px); }

.detail-layout { display: grid; grid-template-columns: 1.1fr 1fr; gap: 40px; align-items: start; }
.detail-img-box { border-radius: 30px; overflow: hidden; border: 2px solid var(--gold); background: #0B121C; position: relative; box-shadow: 0 30px 60px rgba(0,0,0,0.6); opacity: 0; animation: fadeUp 0.6s ease-out forwards; }

.slider-container { position: relative; width: 100%; height: 550px; overflow: hidden; }
.detail-img { width: 100%; height: 100%; object-fit: cover; opacity: 0.95; transition: opacity 0.2s ease-in-out; }
.detail-img:hover { transform: scale(1.02); }

.slider-arrow { position: absolute; top: 50%; transform: translateY(-50%); background: rgba(17, 28, 42, 0.6); border: 1.5px solid var(--gold); color: var(--gold); width: 45px; height: 45px; border-radius: 50%; cursor: pointer; z-index: 10; display: flex; justify-content: center; align-items: center; transition: 0.3s; backdrop-filter: blur(5px); font-size: 16px; }
.slider-arrow:hover { background: var(--gold); color: #111C2A; box-shadow: 0 0 15px var(--gold-glow); }
.slider-arrow.right { right: 15px; }
.slider-arrow.left { left: 15px; }

.slider-dots { position: absolute; bottom: 20px; left: 50%; transform: translateX(-50%); display: flex; gap: 8px; z-index: 10; }
.slider-dot { width: 10px; height: 10px; border-radius: 50%; background: rgba(255,255,255,0.4); cursor: pointer; transition: 0.3s; box-shadow: 0 2px 5px rgba(0,0,0,0.5); }
.slider-dot.active { background: var(--gold); transform: scale(1.3); }

.prod-desc-text { font-size: 15px; color: var(--silver-dim); line-height: 1.8; margin-bottom: 25px; white-space: pre-wrap; }

.size-options { display: flex; gap: 10px; flex-wrap: wrap; }
.size-btn { background: rgba(11, 19, 29, 0.8); border: 1.5px solid var(--border-light); color: var(--silver-dim); padding: 10px 20px; border-radius: 12px; cursor: pointer; transition: 0.3s; font-weight: 800; font-size: 14px; flex: 1; min-width: 60px; text-align: center; }
.size-btn:hover { border-color: var(--gold); color: #FFF; }
.size-btn.active { border-color: var(--gold); background: rgba(212, 175, 55, 0.15); color: var(--gold); box-shadow: 0 5px 15px rgba(212, 175, 55, 0.2); }

.detail-content, .form-container { background: rgba(17, 28, 42, 0.7); border: 1.5px solid var(--border-gold); border-radius: 30px; padding: 35px; backdrop-filter: blur(40px); box-shadow: 0 25px 50px rgba(0,0,0,0.5); opacity: 0; animation: fadeUp 0.6s ease-out 0.2s forwards; }
.form-container { max-width: 550px; margin: 10px auto; border-color: var(--gold); animation: fadeUp 0.8s ease-out forwards; }

.spec-grid { display: grid; grid-template-columns: 1fr; gap: 12px; margin: 15px 0 25px; }
.spec-box { background: rgba(11, 19, 29, 0.8); padding: 15px; border-radius: 12px; border: 1px solid var(--border-gold); font-size: 14px; display: flex; justify-content: space-between; align-items: center; transition: 0.3s; }
.spec-box:hover { transform: scale(1.02); background: rgba(212, 175, 55, 0.05); }

.pkg-section { margin-bottom: 30px; }
.section-title { font-size: 16px; font-weight: 800; color: #FFF; margin-bottom: 15px; display: flex; align-items: center; gap: 10px; }
.pkg-main-toggle { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 15px; }
.pkg-toggle-btn { background: rgba(11, 19, 29, 0.8); border: 2px solid var(--border-light); border-radius: 14px; padding: 16px; cursor: pointer; text-align: center; transition: 0.4s ease; color: var(--silver-dim); font-weight: 800; font-size: 15px; display: flex; flex-direction: column; align-items: center; gap: 8px; }
.pkg-toggle-btn i { font-size: 24px; }
.pkg-toggle-btn:hover { border-color: var(--gold); color: #FFF; }
.pkg-toggle-btn.active { border-color: var(--gold); background: rgba(212, 175, 55, 0.15); color: var(--gold); box-shadow: 0 10px 25px rgba(212, 175, 55, 0.2); transform: scale(1.02); }

.pkg-large-options { display: grid; grid-template-columns: 1fr; gap: 25px; }
.pkg-large-card { background: rgba(17, 28, 42, 0.9); border: 2px solid var(--border-light); border-radius: 24px; overflow: hidden; cursor: pointer; transition: 0.4s; box-shadow: 0 15px 30px rgba(0,0,0,0.3); }
.pkg-large-card:hover { border-color: var(--gold); transform: translateY(-8px); box-shadow: 0 20px 40px rgba(0,0,0,0.6), 0 0 25px var(--gold-glow); }
.pkg-large-card.active { border-color: var(--gold); box-shadow: 0 0 30px var(--gold-glow); transform: translateY(-5px); }
.pkg-large-img { width: 100%; height: 350px; object-fit: cover; border-bottom: 2px solid var(--border-gold); transition: 0.5s; }
.pkg-large-card:hover .pkg-large-img { transform: scale(1.05); }
.pkg-large-info { padding: 25px; display: flex; justify-content: space-between; align-items: center; position: relative; z-index: 2; background: rgba(17, 28, 42, 0.9); }
.pkg-large-title { font-size: 20px; font-weight: 900; color: #FFF; margin-bottom: 5px; }
.pkg-large-desc { font-size: 14px; color: var(--silver-dim); }
.pkg-large-price { font-size: 20px; font-weight: 900; color: #111C2A; background: var(--gold); padding: 10px 18px; border-radius: 14px; box-shadow: 0 5px 15px var(--gold-glow); }

.payment-methods { display: grid; gap: 12px; margin-bottom: 25px; }
.pay-tab { background: rgba(11, 19, 29, 0.8); border: 2px solid var(--border-light); padding: 15px 5px; border-radius: 14px; cursor: pointer; text-align: center; transition: 0.4s ease; display: flex; flex-direction: column; align-items: center; gap: 8px; font-size: 14px; font-weight: 800; }
.pay-tab i { font-size: 26px; transition: 0.3s; }
.pay-tab:hover { transform: translateY(-3px); }
.pay-tab.active.fib { border-color: var(--fib-red); background: rgba(225, 29, 72, 0.15); color: #FFF; box-shadow: 0 10px 20px rgba(225, 29, 72, 0.3); transform: scale(1.05); }
.pay-tab.active.qi { border-color: var(--qi-blue); background: rgba(2, 132, 199, 0.15); color: #FFF; box-shadow: 0 10px 20px rgba(2, 132, 199, 0.3); transform: scale(1.05); }
.pay-tab.active.cash { border-color: #22c55e; background: rgba(34, 197, 94, 0.15); color: #FFF; box-shadow: 0 10px 20px rgba(34, 197, 94, 0.3); transform: scale(1.05); }

.pay-info-box { background: rgba(11, 19, 29, 0.8); border: 2px dashed var(--gold); border-radius: 16px; padding: 20px; margin-bottom: 25px; display: none; font-size: 14px; box-shadow: inset 0 0 20px rgba(0,0,0,0.5); }
.pay-info-box.active { display: block; animation: fadeUp 0.5s forwards; }
.account-box { display: flex; justify-content: space-between; align-items: center; background: rgba(255,255,255,0.05); padding: 15px; border-radius: 10px; margin-top: 15px; border: 1px solid var(--border-light); }
.btn-copy { background: var(--gold); border: none; color: #111C2A; padding: 8px 18px; border-radius: 8px; cursor: pointer; font-size: 13px; font-weight: 800; transition: 0.3s; }
.btn-copy:hover { transform: scale(1.1); box-shadow: 0 5px 15px var(--gold-glow); }

.btn-confirm-order { background: linear-gradient(135deg, var(--gold), #AA8A2E); color: #111C2A; font-weight: 900; padding: 20px; border-radius: 16px; border: none; width: 100%; font-size: 17px; cursor: pointer; transition: 0.4s ease; display: flex; align-items: center; justify-content: center; gap: 12px; box-shadow: 0 10px 30px var(--gold-glow); position: relative; overflow: hidden; }
.btn-confirm-order:hover { transform: translateY(-4px) scale(1.02); box-shadow: 0 20px 40px rgba(212, 175, 55, 0.6); }

.form-group { margin-bottom: 20px; text-align: inherit; }
.form-group label { display: block; font-size: 14px; color: var(--gold); margin-bottom: 10px; font-weight: 800; }
.form-control { width: 100%; background: rgba(11, 19, 29, 0.8); border: 2px solid var(--border-gold); border-radius: 12px; padding: 15px 18px; color: #FFF; font-size: 15px; outline: none; transition: 0.3s; font-family: monospace; }
.form-control:focus { border-color: var(--gold); background: rgba(11, 19, 29, 1); box-shadow: 0 0 15px var(--gold-glow); }
textarea.form-control { resize: vertical; min-height: 100px; font-family: 'Vazirmatn', sans-serif; line-height: 1.6; }

/* سندوقی کڕینەکان */
.cart-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.7); z-index: 999998; opacity: 0; visibility: hidden; transition: opacity 0.3s ease; backdrop-filter: blur(5px); }
.cart-overlay.active { opacity: 1; visibility: visible; }

.cart-drawer { position: fixed; top: 0; right: 0; width: 400px; max-width: 100%; height: 100%; background: rgba(17, 28, 42, 0.98); border-left: 2px solid var(--gold); z-index: 999999; display: flex; flex-direction: column; box-shadow: -10px 0 30px rgba(0,0,0,0.8); backdrop-filter: blur(20px); transform: translateX(100%); transition: transform 0.4s cubic-bezier(0.25, 1, 0.5, 1); }
.cart-drawer.active { transform: translateX(0); }

html[dir="ltr"] .cart-drawer { right: auto; left: 0; border-left: none; border-right: 2px solid var(--gold); transform: translateX(-100%); box-shadow: 10px 0 30px rgba(0,0,0,0.8); }
html[dir="ltr"] .cart-drawer.active { transform: translateX(0); }

.cart-header { padding: 25px; border-bottom: 1px solid var(--border-light); display: flex; justify-content: space-between; align-items: center; }
.close-cart-btn { background: transparent; border: none; color: var(--silver-dim); font-size: 24px; cursor: pointer; transition: 0.3s; }
.close-cart-btn:hover { color: var(--danger); transform: rotate(90deg); }
.cart-items { flex: 1; overflow-y: auto; padding: 20px; display: flex; flex-direction: column; gap: 15px; }
.cart-item { display: flex; gap: 15px; background: rgba(255,255,255,0.05); padding: 15px; border-radius: 14px; border: 1px solid var(--border-light); position: relative; }
.cart-item-img { width: 70px; height: 70px; border-radius: 10px; object-fit: cover; border: 1px solid var(--gold); }
.cart-item-info { flex: 1; }
.cart-item-title { font-size: 15px; font-weight: 800; color: #FFF; margin-bottom: 5px; }
.cart-item-meta { font-size: 12px; color: var(--silver-dim); margin-bottom: 5px; }
.cart-item-price { font-size: 16px; font-weight: 900; color: var(--gold); }
.cart-item-remove { position: absolute; top: 15px; right: 15px; color: var(--danger); background: transparent; border: none; cursor: pointer; font-size: 16px; transition: 0.3s; }
html[dir="ltr"] .cart-item-remove { left: auto; right: 15px; }
.cart-item-remove:hover { transform: scale(1.2); }
.cart-footer { padding: 25px; border-top: 1px solid var(--border-light); background: rgba(11, 19, 29, 0.9); }

/* شاشەی سەرەتایی و مۆدڵەکان */
.lang-welcome-modal { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(3, 7, 13, 0.95); backdrop-filter: blur(25px); z-index: 1000; display: flex; justify-content: center; align-items: center; opacity: 1; transition: opacity 0.6s ease; }
.lang-welcome-modal.hidden { opacity: 0; pointer-events: none; visibility: hidden; }
.lang-welcome-content { background: rgba(17, 28, 42, 0.85); border: 2px solid var(--gold); border-radius: 30px; padding: 40px; width: 90%; max-width: 400px; box-shadow: 0 25px 60px rgba(0,0,0,0.8), inset 0 0 30px rgba(212,175,55,0.1); transform: translateY(0); animation: popUpLang 0.7s cubic-bezier(0.25, 1, 0.5, 1) forwards; }
@keyframes popUpLang { from { transform: translateY(50px) scale(0.9); opacity: 0; } to { transform: translateY(0) scale(1); opacity: 1; } }

.lang-options { display: flex; flex-direction: column; gap: 15px; width: 100%; align-items: center; }
.lang-options button { width: 90%; background: rgba(255,255,255,0.05); border: 1.5px solid var(--border-gold); color: var(--gold); padding: 15px; border-radius: 14px; font-size: 16px; font-weight: 800; cursor: pointer; transition: 0.4s ease; display: flex; justify-content: center; align-items: center; gap: 10px; }
.lang-options button:hover { background: var(--gold); color: #111C2A; transform: translateY(-3px); box-shadow: 0 10px 25px var(--gold-glow); }

.action-modal-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.8); z-index: 9999999; display: flex; justify-content: center; align-items: center; opacity: 1; transition: opacity 0.3s ease; backdrop-filter: blur(10px); }
.action-modal-overlay.hidden { opacity: 0; visibility: hidden; pointer-events: none; }
.action-modal-box { background: rgba(17, 28, 42, 0.95); border: 2px solid var(--border-gold); border-radius: 30px; padding: 40px; width: 90%; max-width: 450px; text-align: center; box-shadow: 0 25px 60px rgba(0,0,0,0.9); transform: scale(1); transition: transform 0.4s cubic-bezier(0.25, 1, 0.5, 1); }
.action-modal-overlay.hidden .action-modal-box { transform: scale(0.8); }
.action-options { display: flex; flex-direction: column; gap: 15px; width: 100%; align-items: center; }
.action-options button { width: 100%; padding: 15px; border-radius: 14px; font-size: 16px; font-weight: 800; cursor: pointer; transition: 0.4s ease; border: none; display: flex; justify-content: center; align-items: center; gap: 10px; font-family: 'Vazirmatn', sans-serif; }
.action-options button:hover { transform: translateY(-3px); box-shadow: 0 10px 25px rgba(0,0,0,0.5); }

/* پاسۆردی ئەدمین و ستۆک */
.admin-login-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: var(--bg-main); display: flex; justify-content: center; align-items: center; z-index: 9999; }
.admin-login-box { background: rgba(17, 28, 42, 0.9); border: 2px solid var(--gold); padding: 40px; border-radius: 20px; text-align: center; width: 90%; max-width: 400px; box-shadow: 0 15px 40px rgba(0,0,0,0.5), 0 0 20px var(--gold-glow); }
.stock-badge { position: absolute; bottom: 15px; right: 15px; background: rgba(17, 28, 42, 0.9); border: 1px solid var(--gold); color: var(--gold); font-size: 11px; font-weight: 800; padding: 5px 12px; border-radius: 20px; z-index: 2; display: flex; align-items: center; gap: 5px; }
.sold-out-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.6); z-index: 5; display: flex; justify-content: center; align-items: center; }
.sold-out-text { background: var(--danger); color: #FFF; padding: 8px 20px; font-size: 16px; font-weight: 900; transform: rotate(-15deg); border-radius: 8px; border: 2px dashed #FFF; letter-spacing: 2px; }
.product-card.sold-out { opacity: 0.7; pointer-events: none; }
.checkbox-container { display: flex; align-items: center; gap: 10px; margin-top: 10px; background: rgba(255,255,255,0.05); padding: 12px; border-radius: 10px; border: 1px solid var(--border-light); }
.checkbox-container input[type="checkbox"] { width: 18px; height: 18px; accent-color: var(--gold); }
.checkbox-container label { margin-bottom: 0 !important; color: #FFF !important; }

/* سۆشیاڵ میدیا */
.social-btn { display: flex; justify-content: center; align-items: center; width: 45px; height: 45px; border-radius: 50%; color: #FFF; font-size: 20px; transition: 0.3s; text-decoration: none; border: 1.5px solid var(--border-light); background: rgba(255,255,255,0.05); }
.social-btn:hover { transform: translateY(-5px); }
.social-btn.tiktok:hover { background: #000000; border-color: #00F2FE; box-shadow: 0 5px 15px rgba(0, 242, 254, 0.4); }
.social-btn.instagram:hover { background: linear-gradient(45deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%); border-color: #dc2743; box-shadow: 0 5px 15px rgba(220, 39, 67, 0.4); }

footer { padding: 50px 5% 30px; border-top: 1px solid var(--border-gold); color: var(--silver-dim); font-size: 14px; margin-top: auto; background: rgba(11, 19, 29, 0.95); position: relative; z-index: 10; }
.footer-content { max-width: 1200px; margin: 0 auto 30px; display: flex; justify-content: center; align-items: center; flex-direction: column; gap: 25px; border-bottom: 1px solid var(--border-light); padding-bottom: 35px; }
.contact-label { color: var(--gold); font-weight: 900; font-size: 17px; display: flex; align-items: center; gap: 10px; margin-bottom: 15px; justify-content: center; }
.phone-numbers { display: flex; gap: 20px; flex-wrap: wrap; justify-content: center; }
.phone-link { color: #111C2A; text-decoration: none; font-size: 16px; font-weight: 900; display: inline-flex; align-items: center; background: var(--gold); padding: 14px 28px; border-radius: 30px; transition: 0.3s; letter-spacing: 2px; box-shadow: 0 5px 15px var(--gold-glow); }
.phone-link:hover { transform: translateY(-5px) scale(1.05); box-shadow: 0 15px 30px var(--gold-glow); }
.footer-bottom { text-align: center; font-size: 13px; color: #94A3B8; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; }

/* Responsive (چارەسەری سکڕۆڵ و ڕێکخستنی شاشەکان) */
@media (max-width: 950px) {
    .detail-layout { grid-template-columns: 1fr; gap: 30px; }
    .slider-container { height: 450px; }
}

@media (max-width: 600px) {
    header { padding: 15px 5%; }
    .products-grid { grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 25px; }
    .img-wrapper { height: 300px; }
    .slider-container { height: 380px; }
    .detail-content, .form-container { padding: 22px; }
    .pkg-large-img { height: 250px; }
    .phone-numbers { width: 100%; flex-direction: column; gap: 15px;}
    .phone-link { justify-content: center; width: 100%; }
    
    .hero-slider-wrap { height: 220px !important; min-height: 220px !important; max-height: 220px !important; padding: 0; margin-bottom: 0; border-bottom: none; }
    
    .hero-content-flex { flex-direction: row; align-items: center; justify-content: space-between; gap: 15px; height: 100%; padding-top: 0; }
    html[dir="ltr"] .hero-content-flex { text-align: left; }
    
    .hero-text-side { order: 1; flex: 1; display: flex; flex-direction: column; justify-content: center; align-items: flex-start; text-align: right; }
    html[dir="ltr"] .hero-text-side { text-align: left; }
    
    .hero-image-side { order: 2; flex: 0 0 110px; justify-content: center; }
    
    .hero-poster { height: 150px !important; width: 110px !important; border-radius: 8px; box-shadow: 0 10px 20px rgba(0,0,0,0.8); }
    
    .hero-title { font-size: 20px; margin-bottom: 5px; text-shadow: 0 2px 5px rgba(0,0,0,0.8); }
    .hero-tag { font-size: 10px; padding: 3px 8px; margin-bottom: 8px; }
    .hero-desc { display: none; }
    .hero-price-tag { font-size: 16px; margin-bottom: 12px; }
    
    .btn-hero-primary { font-size: 12px; padding: 8px 15px; border-radius: 8px; width: fit-content; justify-content: flex-start; }
    .hero-nav-dots { bottom: 10px; }
    
    .news-ticker-wrap { margin-bottom: 30px; }
}