/* NavKing site bicemleri.
 * Bu dosya ONCEDEN includes/header.php ve includes/footer.php icinde
 * satir ici <style> bloklariydi. Panelin SEO taramasi urun listeleme
 * sayfalarini "Sayfa agir" (page_heavy, 500 KB ustu) diye isaretliyordu;
 * olcum: /urunler ham HTML 1.003.132 bayt, bunun 49.260 bayti satir ici
 * CSS/JS idi. Ayri dosyaya tasinan bu blok artik tarayici onbelleginden
 * gelir ve her sayfanin HTML'ine yeniden yazilmaz.
 */

        .navking-btn {
            position: relative;
            overflow: hidden;
            transition: all 0.3s;
        }
        
        .navking-btn:after {
            content: '';
            position: absolute;
            top: 50%;
            left: 50%;
            width: 5px;
            height: 5px;
            background: rgba(255, 255, 255, 0.5);
            opacity: 0;
            border-radius: 100%;
            transform: scale(1, 1) translate(-50%);
            transform-origin: 50% 50%;
        }
        
        .navking-btn:hover:after {
            animation: ripple 1s ease-out;
        }
        
        @keyframes ripple {
            0% {
                transform: scale(0, 0);
                opacity: 1;
            }
            20% {
                transform: scale(25, 25);
                opacity: 1;
            }
            100% {
                opacity: 0;
                transform: scale(40, 40);
            }
        }
        
        .nav-item {
            position: relative;
        }
        
        .nav-item:after {
            content: '';
            position: absolute;
            width: 0;
            height: 2px;
            bottom: -5px;
            left: 0;
            background-color: #3b82f6;
            transition: width 0.3s;
        }
        
        .nav-item:hover:after {
            width: 100%;
        }
        
        .nav-item.active:after {
            width: 100%;
        }
        
        /* Kapali off-canvas menu sayfanin sagindan tasip yatay kaydirma
           yaratiyordu (320-768 px arasi olculdu). Govdeyi kirpiyoruz. */
        html, body { overflow-x: hidden; max-width: 100%; }
        .sr-only {
            position: absolute; width: 1px; height: 1px; padding: 0;
            margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
        }
        .atla-baglantisi {
            position: absolute; left: -9999px; top: 0; z-index: 100;
            background: #b91c1c; color: #fff; padding: .75rem 1.25rem;
            border-radius: 0 0 .5rem 0; font-weight: 600;
        }
        .atla-baglantisi:focus { left: 0; }
        :focus-visible { outline: 3px solid #1d4ed8; outline-offset: 2px; }

        /* Urun karti (products.php).
           Kart eskiden tek bir <a> idi ve baginin erisilebilir adi
           "STOKTA <marka> <ad> <kod> <kategori> ★★★★★ (0) Detayları Gör"
           olarak okunuyordu. Artik kart bir <article>; yalnizca urun adini
           tasiyan bag var ve onun ::after'i butun karti kapliyor. Bu kural
           OLMADAN kartin yalnizca ad metni tiklanabilir olur -- canlida
           oyle olcuLdu, bu yuzden burada duruyor. */
        .urun-kart { cursor: pointer; }
        .urun-kart .urun-bag::after { content: ""; position: absolute; inset: 0; z-index: 1; }
        .urun-kart .urun-bag:focus-visible { outline: 3px solid #1d4ed8; outline-offset: 2px; }

        /* Mobilde govde metni en az 16px, kart basligi okunabilir kalsin. */
        @media (max-width: 640px) {
            body { font-size: 16px; }
            .urun-kart h3 { font-size: 1rem; line-height: 1.4; }
        }
        .mobile-menu {
            transform: translateX(100%);
            transition: transform 0.3s ease-out;
        }
        @media (prefers-reduced-motion: reduce) {
            .mobile-menu { transition: none; }
        }
        
        .mobile-menu.open {
            transform: translateX(0);
        }
        
        .search-bar {
            opacity: 0;
            width: 0;
            transition: all 0.3s ease;
            overflow: hidden;
        }
        
        .search-bar.open {
            opacity: 1;
            width: 250px;
        }
        
        @media (max-width: 1024px) {
            .search-bar.open {
                width: 180px;
            }
        }
        
        .dropdown-menu {
            opacity: 0;
            visibility: hidden;
            transform: translateY(10px);
            transition: all 0.3s ease;
        }
        
        .dropdown:hover .dropdown-menu {
            opacity: 1;
            visibility: visible;
            transform: translateY(0);
        }
        
        .cart-count {
            position: absolute;
            top: -8px;
            right: -8px;
            background-color: #ef4444;
            color: white;
            font-size: 0.7rem;
            width: 18px;
            height: 18px;
            border-radius: 50%;
            display: flex;
            justify-content: center;
            align-items: center;
        }

/* --- altbilgi (eski includes/footer.php satir ici blogu) --- */
        .back-to-top {
            opacity: 0;
            transition: opacity 0.3s, transform 0.3s;
            transform: translateY(20px);
        }
        .back-to-top.show {
            opacity: 1;
            transform: translateY(0);
        }
        .footer-links a {
            position: relative;
        }
        .footer-links a:after {
            content: '';
            position: absolute;
            width: 0;
            height: 2px;
            bottom: -4px;
            left: 0;
            background-color: #3b82f6;
            transition: width 0.3s;
        }
        .footer-links a:hover:after {
            width: 100%;
        }
        .newsletter-input:focus {
            outline: none;
            box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.5);
        }
        /* Uzun e-posta adresi 1024 px'te sutunu asip sayfayi yatay
           kaydirtiyordu (olculdu: 1077 px / 1024 px). */
        .footer-iletisim a { overflow-wrap: anywhere; word-break: break-word; }

/* ------------------------------------------------------------------
   SUNUCUDA BASILAN URUN KARTI (.uk)

   NEDEN AYRI SINIF: /urunler sayfasi 411 urun kartini sunucuda basiyor.
   Kart basina yaklasik 900 bayt yalnizca Tailwind sinif adlarindan
   olusuyordu; 411 kartta bu 370 KB demek. Panelin SEO taramasi sayfayi
   "Sayfa agir" (page_heavy, 500 KB ustu) diye isaretliyordu -- olculen
   ham HTML 1.003.132 bayt idi.

   Kisa sinif adlari + buradaki kurallar ayni gorunumu uretir. Sayfa
   yuklendikten sonra betik ayni kartlari Tailwind siniflariyla yeniden
   bastigi icin iki bicimin AYNI gorunmesi sart; asagidaki degerler
   Tailwind karsiliklarindan birebir alindi.
   ------------------------------------------------------------------ */
.uk {
    position: relative; background: #fff; border-radius: .5rem;
    box-shadow: 0 4px 6px -1px rgba(0,0,0,.1), 0 2px 4px -2px rgba(0,0,0,.1);
    overflow: hidden; transition: box-shadow .3s; cursor: pointer;
}
.uk:hover { box-shadow: 0 20px 25px -5px rgba(0,0,0,.1), 0 8px 10px -6px rgba(0,0,0,.1); }
.uk-g {
    position: relative; overflow: hidden; height: 18rem; background: #f9fafb;
    display: flex; align-items: center; justify-content: center; padding: 1rem;
}
.uk-g img { height: 100%; width: 100%; object-fit: contain; transition: transform .3s; }
.uk:hover .uk-g img { transform: scale(1.05); }
.uk-r {
    position: absolute; top: .5rem; right: .5rem; z-index: 10; background: #b91c1c;
    color: #fff; font-size: .75rem; line-height: 1rem; font-weight: 700;
    padding: .25rem .5rem; border-radius: 9999px; display: inline-flex; align-items: center;
}
.uk-r.yok { background: #4b5563; }
.uk-b { padding: 1.25rem; }
.uk-b h3 {
    font-size: 1rem; line-height: 1.4; font-weight: 700; color: #111827; margin: 0 0 .5rem;
    display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
@media (min-width: 640px) { .uk-b h3 { font-size: .875rem; line-height: 1.25rem; } }
.uk-b h3 a { color: inherit; text-decoration: none; transition: color .15s; }
.uk-b h3 a:hover { color: #b91c1c; }
.uk .urun-bag::after { content: ""; position: absolute; inset: 0; z-index: 1; }
.uk .urun-bag:focus-visible { outline: 3px solid #1d4ed8; outline-offset: 2px; }
.uk-m { display: flex; align-items: center; justify-content: space-between; gap: .5rem; flex-wrap: wrap; }
.uk-m p { font-size: .75rem; line-height: 1rem; color: #374151; margin: 0; }
/*
   Etiketler (Urun kodu / Kategori) eskiden her kartta <span class="sr-only">
   olarak HTML'e yaziliyordu: kart basina 70 bayt, 411 kartta 28 KB. Ayni
   bilgi burada ::before ile veriliyor; uretilen icerik ekran okuyucular
   tarafindan da seslendirilir ve artik goren kullanici da etiketi gorur.
*/
.uk-m p:first-child::before { content: "Ürün kodu: "; color: #6b7280; }
.uk-m p:last-child::before  { content: "Kategori: ";  color: #6b7280; }
.uk-m p:first-child:empty { display: none; }
.uk-b hr, .uk-l { border: 0; }
.uk-l {
    width: 5rem; aspect-ratio: 3 / 2; margin: .75rem auto; background: #fff;
    display: flex; align-items: center; justify-content: center;
    border-top: 1px solid #e5e7eb; border-bottom: 1px solid #e5e7eb;
}
.uk-l img { max-height: 100%; max-width: 100%; object-fit: contain; }
/*
   FIYAT SATIRININ YERINI TEKLIF BAGI ALDI.

   Urun fiyati yalnizca 724kampanya.com'da yayinlanir; Navking tanitim
   katalogudur. Bag fiyatin durdugu yerde, ayni hizada duruyor ki kart
   duzeni degismesin. Dokunma hedefi 44 piksel.

   z-index ZORUNLU: .urun-bag::after butun karti z-index:1 ile kapliyor;
   bag z-index:2 olmadan tiklanamaz.
*/
.uk-f { display: flex; align-items: center; justify-content: flex-end; gap: .5rem; margin-bottom: .5rem; flex-wrap: wrap; }
.uk-tk {
    position: relative; z-index: 2; display: inline-flex; align-items: center;
    min-height: 44px; font-size: .875rem; font-weight: 600; color: #b91c1c;
    text-decoration: underline; text-underline-offset: 2px;
}
.uk-tk:hover, .uk-tk:focus-visible { color: #7f1d1d; }
.uk-d {
    width: 100%; display: inline-flex; align-items: center; justify-content: center;
    color: #fff; font-weight: 500; font-size: .875rem; background: #b91c1c;
    padding: .75rem; border-radius: .5rem; min-height: 44px; transition: background .15s;
}
.uk:hover .uk-d { background: #991b1b; }
.uk-d::after { content: "Detayları Gör"; }

/* ------------------------------------------------------------------
   SIKCA SORULAN SORULAR BOLUMU (kav-urun-sss.php ciktisi)

   Gorunur bolum ile FAQPage semasi AYNI diziden uretilir; sayfada
   gorunmeyen soruyu semaya yazmak Google'in yapisal veri kurallarina
   aykiridir. Bicim burada, uretim kav-urun-sss.php icinde.
   ------------------------------------------------------------------ */
.kav-sss {
    max-width: 80rem; margin: 2.5rem auto; padding: 1.75rem 1.25rem;
    background: #fff; border: 1px solid #e5e7eb; border-radius: 1rem;
}
.kav-sss > h2 {
    font-size: 1.5rem; line-height: 2rem; font-weight: 800; color: #111827;
    margin: 0 0 .25rem; letter-spacing: -.01em;
}
.kav-sss > h2 + .kav-sss-oge { margin-top: 1.25rem; }
.kav-sss-oge {
    border-top: 1px solid #f3f4f6; padding: 1rem 0 .25rem;
}
.kav-sss-oge:first-of-type { border-top: 0; }
.kav-sss-soru {
    font-size: 1rem; line-height: 1.5rem; font-weight: 600; color: #991b1b;
    margin: 0 0 .4rem; overflow-wrap: anywhere;
}
.kav-sss-cevap {
    font-size: 1rem; line-height: 1.65; color: #374151; margin: 0;
    overflow-wrap: anywhere;
}
@media (min-width: 768px) {
    .kav-sss { padding: 2rem 2.25rem; }
    .kav-sss-cevap { font-size: .95rem; }
}