<!DOCTYPE html>
<html lang="ku" dir="rtl">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <title>RX PHONE | ئاڕ ئێکس فۆن</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <style>
        @import url('https://fonts.googleapis.com/css2?family=Noto+Kufi+Arabic:wght@400;700;900&display=swap');
        
        * { 
            box-sizing: border-box; 
            margin: 0; 
            padding: 0; 
            scroll-behavior: smooth; 
            -webkit-tap-highlight-color: transparent; 
        }
        
        body { font-family: 'Noto Kufi Arabic', sans-serif; background-color: #f0f2f5; color: #1a1a1a; transition: 0.3s; }
        
        /* چاککردنی کێشەی زمانەکان: ئێستا Absoluteـە واتە لەگەڵت نایەتە خوارەوە */
        .lang-switcher { 
            position: absolute; /* ئەمە وای لێ دەکات لە شوێنی خۆی "بمێنێتەوە" و نەجووڵێت */
            top: 20px; 
            left: 20px; 
            z-index: 2000; 
            display: flex; 
            gap: 8px; 
            background: rgba(255,255,255,0.9); 
            padding: 8px; 
            border-radius: 12px; 
            box-shadow: 0 4px 15px rgba(0,0,0,0.1); 
        }
        .lang-switcher button { 
            padding: 8px 12px; 
            cursor: pointer; 
            border: none; 
            border-radius: 8px; 
            background: #1e3a8a; 
            color: white; 
            font-weight: bold; 
            font-size: 13px; 
            transition: 0.3s; 
            font-family: inherit; 
        }
        .lang-switcher button:hover { background: #3b82f6; }

        header { background: linear-gradient(135deg, #1e3a8a 0%, #3b82f6 100%); padding: 60px 20px 40px; text-align: center; color: white; position: relative; }

        .brand-logo { 
            width: 400px; 
            max-width: 90%; 
            height: auto; 
            background: transparent !important; 
            border: none !important; 
            display: block;
            margin: 0 auto; 
            object-fit: contain;
            filter: drop-shadow(0 10px 15px rgba(0,0,0,0.2));
        }
        
        .brand-subtitle { font-size: 16px; margin-top: 15px; opacity: 0.9; line-height: 1.6; }

        nav { background: #fff; padding: 15px; position: sticky; top: 0; z-index: 1000; box-shadow: 0 2px 15px rgba(0,0,0,0.1); display: flex; justify-content: center; gap: 10px; flex-wrap: wrap; }
        nav a { text-decoration: none; color: #1e3a8a; font-size: 13px; font-weight: bold; padding: 10px 15px; border-radius: 12px; background: #f1f5f9; transition: 0.3s; }
        nav a:hover { background: #3b82f6; color: white; }

        .container { max-width: 1200px; margin: 0 auto; padding: 20px; }
        .section-title { text-align: center; margin: 60px 0 40px; color: #1e3a8a; font-size: 32px; font-weight: 900; position: relative; padding-bottom: 15px; }
        .section-title::after { content: ''; position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); width: 100px; height: 5px; background: #3b82f6; border-radius: 5px; }
        
        .grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 30px; }
        .card { background: white; border-radius: 30px; padding: 40px 25px; text-align: center; box-shadow: 0 10px 30px rgba(0,0,0,0.05); border: 1px solid #e5e7eb; transition: 0.4s; }
        .card:hover { transform: translateY(-12px); box-shadow: 0 20px 40px rgba(0,0,0,0.1); }
        
        .price { font-size: 32px; font-weight: 900; color: #1e3a8a; margin: 15px 0; }
        .gift-tag { background: #dcfce7; color: #166534; padding: 5px 15px; border-radius: 20px; font-size: 14px; font-weight: bold; display: inline-block; margin-bottom: 20px; }
        .btn-order { background: #3b82f6; color: white; padding: 16px; width: 100%; border-radius: 15px; text-decoration: none; display: block; font-weight: bold; font-size: 18px; transition: 0.3s; }
        .btn-order:hover { background: #1e3a8a; }

        .num-list { background: #f8fafc; border-radius: 20px; padding: 15px; margin-bottom: 20px; }
        .num-row { display: flex; justify-content: space-between; padding: 12px; border-bottom: 1px solid #e2e8f0; font-family: sans-serif; font-weight: 800; font-size: 18px; color: #334155; }
        .badge-vip { background: gold; color: #000; padding: 2px 8px; border-radius: 5px; font-size: 10px; }
        .review-card { background: white; padding: 25px; border-radius: 20px; border-right: 5px solid #3b82f6; box-shadow: 0 5px 15px rgba(0,0,0,0.02); }
        .stars { color: #fbbf24; margin-bottom: 10px; }
        
        .modern-footer { background: #1e293b; color: white; padding: 80px 20px 30px; margin-top: 100px; border-radius: 50px 50px 0 0; }
        .footer-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 40px; max-width: 1100px; margin: 0 auto; }
        
        .contact-btn { 
            display: flex; 
            align-items: center; 
            gap: 15px; 
            background: rgba(255,255,255,0.05); 
            padding: 15px; 
            border-radius: 15px; 
            margin-bottom: 15px; 
            text-decoration: none; 
            color: white; 
            border: 1px solid rgba(255,255,255,0.1); 
            transition: 0.3s ease; 
        }
        .contact-btn:hover { 
            background: #3b82f6;
            border-color: #3b82f6;
            transform: translateY(-3px);
        }
        
        /* ستایلی نوێ بۆ سۆشیاڵ میدیاکان (ڕەنگی تایبەت) */
        .social-flex { display: flex; gap: 15px; margin-top: 20px; }
        .social-flex a { 
            width: 45px; height: 45px; 
            background: rgba(255,255,255,0.1); 
            border-radius: 50%; 
            display: flex; align-items: center; justify-content: center; 
            color: white; 
            font-size: 20px; 
            transition: 0.3s; 
            text-decoration: none; 
        }
        
        /* ڕەنگەکان کاتێک ماوس دەخەیتە سەری */
        .social-flex a.fb:hover { background: #1877F2; transform: translateY(-5px); } /* فەیسبووک */
        .social-flex a.insta:hover { background: linear-gradient(45deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%); transform: translateY(-5px); } /* ئینستاگرام */
        .social-flex a.tik:hover { background: #000000; transform: translateY(-5px); } /* تیکتۆک */
        .social-flex a.tele:hover { background: #0088cc; transform: translateY(-5px); } /* تێلیگرام */
        
        .wa-float { position: fixed; bottom: 30px; left: 30px; background: #22c55e; color: white; width: 65px; height: 65px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 35px; z-index: 2000; text-decoration: none; box-shadow: 0 5px 20px rgba(34, 197, 94, 0.4); }
/* ڕەنگەکان بۆ دۆخی تاریک */
body.dark-mode {
    background-color: #121212 !important;
    color: #ffffff !important;
}

body.dark-mode .card, 
body.dark-mode nav, 
body.dark-mode .review-card,
body.dark-mode .num-list {
    background-color: #1e1e1e !important;
    color: #ffffff !important;
    border-color: #333 !important;
}

body.dark-mode .section-title,
body.dark-mode h3,
body.dark-mode .price,
body.dark-mode .num-row {
    color: #ffffff !important;
}

body.dark-mode .contact-btn {
    background: rgba(255,255,255,0.1) !important;
}

/* دوگمەی گۆڕینی دۆخەکە */
.mode-toggle {
    padding: 8px 12px;
    border-radius: 8px;
    border: none;
    cursor: pointer;
    background: #fbbf24;
    color: #000;
    font-size: 16px;
    margin-right: 8px;
}
    </style>
</head>
<body>

<div class="lang-switcher">
    <button onclick="changeLanguage('ku')">کوردی</button>
    <button onclick="changeLanguage('ar')">عربي</button>
    <button onclick="changeLanguage('en')">English</button>
<button class="mode-toggle" onclick="toggleDarkMode()">
    <i id="dark-icon" class="fas fa-moon"></i>
</button>
</div>

<a href="https://wa.me/9647515225470" class="wa-float"><i class="fab fa-whatsapp"></i></a>

<header>
    <img src="logo.png" alt="RX PHONE" class="brand-logo">
    <div class="brand-subtitle translate" 
         data-ku="خزمەتگوزاری سیمکارت و مامەڵەی ئەلیکتڕۆنی" 
         data-ar="خدمات شرائح الاتصال والمعاملات الإلكترونية" 
         data-en="SIM Card Services & Electronic Transactions">
         خزمەتگوزاری سیمکارت و مامەڵەی ئەلیکتڕۆنی
    </div>
</header>
<nav>
    <a href="#simcards" class="translate" data-ku="سیمکارت" data-ar="شرائح" data-en="SIM Cards">سیمکارت</a>
    <a href="#numbers" class="translate" data-ku="ژمارەکان" data-ar="الأرقام" data-en="Numbers">ژمارەکان</a>
    <a href="#services" class="translate" data-ku="خزمەتگوزاری" data-ar="خدماتنا" data-en="Services">خزمەتگوزاری</a>
    <a href="#reviews" class="translate" data-ku="کۆمێنتەکان" data-ar="التعليقات" data-en="Reviews">کۆمێنتەکان</a>
    <a href="#contact" class="translate" data-ku="پەیوەندی" data-ar="اتصل بنا" data-en="Contact">پەیوەندی</a>
</nav>

<div class="container">
    <h2 class="section-title translate" id="simcards" data-ku="سیمکارتە بەردەستەکان" data-ar="الشرائح المتوفرة" data-en="Available SIM Cards">سیمکارتە بەردەستەکان</h2>
    <div class="grid">
        <div class="card">
            <i class="fas fa-sim-card" style="color: #0056b3; font-size: 55px;"></i>
            <h3 class="translate" data-ku="کۆڕەک تێلیکۆم" data-ar="كورك تليكوم" data-en="Korek Telecom">کۆڕەک تێلیکۆم</h3>
            <div class="price">8,000 <span class="translate" data-ku="د.ع" data-ar="د.ع" data-en="IQD">د.ع</span></div>
            <div class="gift-tag translate" data-ku="5 هەزار باڵانس + بەناوکردن" data-ar="5 آلاف رصيد + تسجيل" data-en="5k Balance + Registration">5 هەزار باڵانس + بەناوکردن</div>
            <a href="https://wa.me/9647515225470" class="btn-order translate" data-ku="داوا بکە" data-ar="معرفة المزید" data-en="Learn More">زیاتر بزانە</a>
        </div>
        <div class="card">
            <i class="fas fa-sim-card" style="color: #ff0000; font-size: 55px;"></i>
            <h3 class="translate" data-ku="ئاسیاسێڵ" data-ar="آسياسيل" data-en="Asiacell">ئاسیاسێڵ</h3>
            <div class="price">10,000 <span class="translate" data-ku="د.ع" data-ar="د.ع" data-en="IQD">د.ع</span></div>
            <div class="gift-tag translate" data-ku="5 هەزار باڵانس + بەناوکردن" data-ar="5 آلاف رصيد + تسجيل" data-en="5k Balance + Registration">5 هەزار باڵانس + بەناوکردن</div>
            <a href="https://wa.me/9647515225470" class="btn-order translate" data-ku="داوا بکە" data-ar="معرفة المزید" data-en="Learn More">زیاتر بزانە</a>
        </div>
        <div class="card">
            <i class="fas fa-sim-card" style="color: #7c3aed; font-size: 55px;"></i>
            <h3 class="translate" data-ku="زین عێراق" data-ar="زين العراق" data-en="Zain Iraq">زین عێراق</h3>
            <div class="price">10,000 <span class="translate" data-ku="د.ع" data-ar="د.ع" data-en="IQD">د.ع</span></div>
            <div class="gift-tag translate" data-ku="5 هەزار باڵانس + بەناوکردن" data-ar="5 آلاف رصيد + تسجيل" data-en="5k Balance + Registration">5 هەزار باڵانس + بەناوکردن</div>
            <a href="https://wa.me/9647515225470" class="btn-order translate" data-ku="داوا بکە" data-ar="معرفة المزید" data-en="Learn More">زیاتر بزانە</a>
        </div>
    </div>

    <h2 class="section-title translate" id="numbers" data-ku="ژمارە بەردەستەکان (VIP)" data-ar="الأرقام المميزة (VIP)" data-en="Available Numbers (VIP)">ژمارە بەردەستەکان (VIP)</h2>
    <div class="grid">
        <div class="card">
            <h3 style="color: #0056b3;"><i class="fas fa-crown"></i> Korek VIP</h3>
            <div class="num-list">
                <div class="num-row">0750 111 22 33 <span class="badge-vip">Gold</span></div>
                <div class="num-row">0750 444 00 00 <span class="badge-vip">Diamond</span></div>
            </div>
            <a href="https://wa.me/9647515225470" class="btn-order translate" data-ku="نرخ بزانە" data-ar="استفسر عن السعر" data-en="Check Price">نرخ بزانە</a>
        </div>
        <div class="card">
            <h3 style="color: #ff0000;"><i class="fas fa-crown"></i> Asiacell VIP</h3>
            <div class="num-list">
                <div class="num-row">0770 777 88 99 <span class="badge-vip">Gold</span></div>
                <div class="num-row">0770 123 45 67 <span class="badge-vip">Silver</span></div>
            </div>
            <a href="https://wa.me/9647515225470" class="btn-order translate" data-ku="نرخ بزانە" data-ar="استفسر عن السعر" data-en="Check Price">نرخ بزانە</a>
        </div>
        <div class="card">
            <h3 style="color: #7c3aed;"><i class="fas fa-crown"></i> Zain VIP</h3>
            <div class="num-list">
                <div class="num-row">0780 000 00 11 <span class="badge-vip">Diamond</span></div>
                <div class="num-row">0780 555 66 77 <span class="badge-vip">Gold</span></div>
            </div>
            <a href="https://wa.me/9647515225470" class="btn-order translate" data-ku="نرخ بزانە" data-ar="استفسر عن السعر" data-en="Check Price">نرخ بزانە</a>
        </div>
    </div>

    <h2 class="section-title translate" id="services" data-ku="خزمەتگوزارییەکانی ترمان" data-ar="خدماتنا الأخرى" data-en="Our Other Services">خزمەتگوزارییەکانی ترمان</h2>
    <div class="grid">
        <div class="card">
            <i class="fas fa-credit-card" style="font-size: 45px; color: #1e3a8a;"></i>
            <h3 class="translate" data-ku="کارتی بانکی" data-ar="البطاقات المصرفية" data-en="Bank Cards">کارتی بانکی</h3>
            <p class="translate" data-ku="درووستکردنی ماستەرکارد و ڤیزاکارد بە خێراترین کات." data-ar="إصدار بطاقات ماستركارد وفيزا بأسرع وقت." data-en="Fast issuance of Mastercard and Visa cards.">درووستکردنی ماستەرکارد و ڤیزاکارد بە خێراترین کات.</p>
            <a href="https://wa.me/9647515225470" class="btn-order translate" data-ku="زیاتر بزانە" data-ar="معرفة المزید" data-en="Learn More">زیاتر بزانە</a>
        </div>
        <div class="card">
            <i class="fas fa-ad" style="font-size: 45px; color: #ec4899;"></i>
            <h3 class="translate" data-ku="سپۆنسەر" data-ar="تمويل الإعلانات" data-en="Sponsorship">سپۆنسەر</h3>
            <p class="translate" data-ku="سپۆنسەرکردنی تیکتۆک و ئینستاگرام و فەیسبووک." data-ar="تمويل حسابات تيك توك، إنستغرام، وفيسبوك." data-en="Sponsorship for TikTok, Instagram, and Facebook.">سپۆنسەرکردنی تیکتۆک و ئینستاگرام و فەیسبووک.</p>
            <a href="https://wa.me/9647515225470" class="btn-order translate" data-ku="زیاتر بزانە" data-ar="معرفة المزید" data-en="Learn More">زیاتر بزانە</a>
        </div>
        <div class="card">
            <i class="fas fa-id-card-alt" style="font-size: 45px; color: #10b981;"></i>
            <h3 class="translate" data-ku="کارتی نیشتمانی" data-ar="البطاقة الوطنية" data-en="National ID">کارتی نیشتمانی</h3>
            <p class="translate" data-ku="وەرگرتنی نۆرە و بەڵگەنامە پێویستەکان." data-ar="حجز موعد وتجهيز المستندات المطلوبة." data-en="Booking appointments and document preparation.">وەرگرتنی نۆرە و بەڵگەنامە پێویستەکان.</p>
            <a href="https://wa.me/9647515225470" class="btn-order translate" data-ku="زیاتر بزانە" data-ar="معرفة المزید" data-en="Learn More">زیاتر بزانە</a>
        </div>
        <div class="card">
            <i class="fas fa-passport" style="font-size: 45px; color: #3b82f6;"></i>
            <h3 class="translate" data-ku="پاسپۆرتی عێڕاقی" data-ar="الجواز العراقي" data-en="Iraqi Passport">پاسپۆرتی عێڕاقی</h3>
            <p class="translate" data-ku="وەرگرتنی نۆرە و بەڵگەنامە پێویستەکان." data-ar="حجز موعد وتجهيز المستندات." data-en="Booking appointments and documents.">وەرگرتنی نۆرە و بەڵگەنامە پێویستەکان.</p>
            <a href="https://wa.me/9647515225470" class="btn-order translate" data-ku="زیاتر بزانە" data-ar="معرفة المزید" data-en="Learn More">زیاتر بزانە</a>
        </div>
        <div class="card">
            <i class="fas fa-wallet" style="font-size: 45px; color: #f59e0b;"></i>
            <h3 class="translate" data-ku="پارەدانی ئۆنلاین" data-ar="الدفع الإلكتروني" data-en="Online Payment">پارەدانی ئۆنلاین</h3>
            <p class="translate" data-ku="کڕینی کارتەکانی یاری و بەرنامەکان بە ئۆنلاین." data-ar="شراء بطاقات الألعاب والتطبيقات أونلاين." data-en="Buy game cards and apps online.">کڕینی کارتەکانی یاری و بەرنامەکان بە ئۆنلاین.</p>
            <a href="https://wa.me/9647515225470" class="btn-order translate" data-ku="زیاتر بزانە" data-ar="معرفة المزید" data-en="Learn More">زیاتر بزانە</a>
        </div>
    </div>

    <h2 class="section-title translate" id="reviews" data-ku="ڕای کڕیارەکانمان" data-ar="آراء العملاء" data-en="Customer Reviews">ڕای کڕیارەکانمان</h2>
    <div style="text-align: center; margin-bottom: 30px;">
        <button onclick="openReviewForm()" style="background: #fbbf24; color: #000; padding: 15px 30px; border-radius: 50px; border: none; font-weight: bold; cursor: pointer; box-shadow: 0 4px 15px rgba(251, 191, 36, 0.4); font-family: inherit;">
            <i class="fas fa-pen"></i> <span class="translate" data-ku="ڕای خۆت بنووسە" data-ar="أكتب رأيك" data-en="Write a Review">ڕای خۆت بنووسە</span>
        </button>
    </div>
    <div class="grid" id="reviews-container">
        <div class="review-card">
            <div class="stars"><i class="fas fa-star"></i><i class="fas fa-star"></i><i class="fas fa-star"></i><i class="fas fa-star"></i><i class="fas fa-star-half-alt"></i></div>
            <h4>رابەر خۆشناو</h4>
            <p class="translate" data-ku="شازە :)" data-ar="رائع :)" data-en="Amazing :)">شازە :)</p>
        </div>
       </div>
</div>

<footer class="modern-footer" id="contact">
    <div class="footer-grid">
        <div class="footer-box">
            <h3 class="translate" data-ku="دەربارەی ئێمە" data-ar="حولنا" data-en="About Us">دەربارەی ئێمە</h3>
            <p class="translate" data-ku="RX PHONE خزمەتگوزاری مۆبایل و مامەڵە ئەلیکترۆنییەکانە لە شاری هەولێر." data-ar="RX PHONE لخدمات الهاتف والمحمول والمعاملات الإلكترونية في أربيل." data-en="RX PHONE for mobile services and electronic transactions in Erbil.">RX PHONE خزمەتگوزاری مۆبایل و مامەڵە ئەلیکترۆنییەکانە لە شاری هەولێر.</p>
            <div class="social-flex">
                <a href="https://www.facebook.com/share/17yuKn3rTQ/" class="fb"><i class="fab fa-facebook-f"></i></a>
                <a href="https://www.instagram.com/rxphone990?igsh=MTc4MzgzcmNneWIxdg==" class="insta"><i class="fab fa-instagram"></i></a>
                <a href="https://www.tiktok.com/@rxphone99?_r=1&_t=ZS-944wxk9vu5q" class="tik"><i class="fab fa-tiktok"></i></a>
                <a href="https://t.me/rxphone" class="tele"><i class="fab fa-telegram-plane"></i></a>
            </div>
        </div>
        <div class="footer-box">
            <h3 class="translate" data-ku="پەیوەندی" data-ar="اتصل بنا" data-en="Contact Us">پەیوەندی</h3>
            <a href="tel:07515225470" class="contact-btn">
                <i class="fas fa-phone-alt"></i>
                <div><strong>07515225470</strong></div>
            </a>
            <a href="https://maps.app.goo.gl/ZBiRv2bs9skmxEMi8" target="_blank" class="contact-btn" style="cursor: pointer;">
                <i class="fas fa-map-marker-alt"></i>
                <div class="translate" data-ku="هەولێر - سێتاقان" data-ar="أربيل - سيتاقان" data-en="Erbil - Sitaqan">هەولێر - سێتاقان</div>
            </a>
        </div>
    </div>
    <div style="text-align: center; margin-top: 50px; opacity: 0.5;">© 2026 RX PHONE RABAR XOSHNAW. <span class="translate" data-ku="هەموو مافەکان پارێزراوە." data-ar="جميع الحقوق محفوظة." data-en="All rights reserved.">هەموو مافەکان پارێزراوە.</span></div>
</footer>

<script>
    // ئەمە فەرمانی گۆڕینی زمانەکانە
    function changeLanguage(lang) {
        const elements = document.querySelectorAll('.translate');
        elements.forEach(el => {
            const text = el.getAttribute('data-' + lang);
            if (text) el.textContent = text;
        });
        document.documentElement.dir = (lang === 'en') ? "ltr" : "rtl";
    }

    // ئەمە فەرمانی نوێیە بۆ ئەوەی ئەستێرەکانیش بنێرێت
    function openReviewForm() {
        // 1. داوای ناو دەکات
        let name = prompt("ناوی خۆت بنووسە / Write your name:");
        if (!name) return; // ئەگەر ناوی نەنووسی، فۆرمەکە دادەخرێت

        // 2. داوای ئەستێرە دەکات
        let starsNum = prompt("چەند ئەستێرە دەدەیت؟ (ژمارە بنووسە لە نێوان 1 بۆ 5):");
        
        // ئەگەر کڕیارەکە ژمارەیەکی تری نووسی یان هیچی نەنووسی، با بیکەین بە 5 ئەستێرە
        let starsInt = parseInt(starsNum);
        if (isNaN(starsInt) || starsInt < 1 || starsInt > 5) {
            starsInt = 5; 
        }

        // دروستکردنی ئەستێرەکان بە شێوەی ئیمۆجی (⭐⭐⭐⭐⭐)
        let starEmojis = "⭐".repeat(starsInt);

        // 3. داوای تێبینییەکە دەکات
        let review = prompt("ڕا و تێبینییەکەت بنووسە / Write your review:");
        if (!review) return;

        // 4. کۆکردنەوەی هەموو زانیارییەکان بۆ نامەی واتسئەپ
        let message = "سڵاو RX PHONE\n" +
                      "دەمەوێت ڕای خۆم دەربڕم دەربارەی خزمەتگوزارییەکانتان:\n\n" +
                      "👤 ناو: " + name + "\n" +
                      "⭐ پلەبەندی: " + starEmojis + " (" + starsInt + "/5)\n" +
                      "📝 ڕا: " + review;

        // ناردن بۆ واتسئەپی تۆ
        window.location.href = "https://wa.me/9647515225470?text=" + encodeURIComponent(message);
    }
function toggleDarkMode() {
    // چالاککردنی دۆخی تاریک لەسەر هەموو جەستەی لاپەڕەکە
    document.body.classList.toggle('dark-mode');
    
    const icon = document.getElementById('dark-icon');
    if (document.body.classList.contains('dark-mode')) {
        icon.classList.replace('fa-moon', 'fa-sun'); // گۆڕین بۆ ئایکۆنی خۆر
    } else {
        icon.classList.replace('fa-sun', 'fa-moon'); // گۆڕین بۆ ئایکۆنی مانگ
    }
}
</script></body>
</html>