/*
Theme Name: Porto Child
Theme URI: https://www.portotheme.com/wordpress/porto
Author: P-THEMES
Author URI: https://www.portotheme.com/
Description: Porto Responsive WordPress + eCommerce Theme.
Version: 1.1
Template: porto
License: Commercial
License URI: http://themeforest.net/licenses/regular_extended
Tags: woocommerce, corporate, ecommerce, responsive, blue, black, green, white, light, dark, red, two-columns, three-columns, four-columns, left-sidebar, right-sidebar, fixed-layout, responsive-layout, custom-menu, editor-style, featured-images, flexible-header, full-width-template, microformats, post-formats, rtl-language-support, sticky-post, theme-options, translation-ready, accessibility-ready
*/

/*************** ADD YOUR CUSTOM CSS HERE  ***************/

/* Genel stil ayarları */
.image-wrapper {
    display: inline-block;
    width: 120px;
    margin-right: 10px;
    vertical-align: top;
}

.image-wrapper:last-child {
    margin-right: 0;
}

.image-wrapper a img {
    width: 100%;
    height: auto;
    display: block;
    border: none;
    outline: 1px solid rgba(255, 255, 255, 0.8);
    outline-offset: 2px;
}

/* Bu CSS kodunu style.css veya Ek CSS alanına ekleyin */

#notificationPopup {
    position: fixed;
    bottom: 20px;
    right: 20px;
    background-color: #fff;
    border: 1px solid #ccc;
    padding: 20px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
    z-index: 1000;
    display: flex; /* Başlangıçta gizli olacak, JS ile görünür yapılacak */
    flex-direction: column;
    align-items: center;
    border-radius: 10px;
    gap: 10px;
    width: 350px;
    max-width: 90vw;
    display: none; /* Başlangıçta gizli olsun */
}

#notificationPopup img{
    width: 70px;
    height: 70px;
}

#notificationPopup p {
    text-align: center;
    font-weight: bold;
    color: #222529;
    font-size: 15px;
    margin-top: 0;
    margin-bottom: 10px;
}

#notificationPopup div {
    display: flex;
    gap: 10px;
}

#notificationPopup button {
    padding: 8px 15px; /* Biraz daha dolgun butonlar */
    border: none;
    cursor: pointer;
    border-radius: 5px;
    width: 150px;
    font-size: 14px; /* Font boyutu ekleyelim */
}

#allowNotifications{
    background-color: #222529;
    color: white;
}

#denyNotifications{
    background-color: #6c757d; /* Rengi biraz değiştirelim */
    color: white;
}

/* Butonlara hover efekti eklemek için bu kuralları ekleyin */

#notificationPopup button {
    /* Mevcut stilleriniz (padding, border, cursor, vs.) burada kalmalı */
    padding: 8px 15px;
    border: none;
    cursor: pointer;
    border-radius: 5px;
    width: 150px;
    font-size: 14px;
    /* --- YENİ EKLENENLER --- */
    opacity: 1; /* Normal durumdaki opaklık (tam görünür) */
    transition: opacity 0.3s ease; /* Opaklık değişiminin 0.3 saniyede yumuşakça gerçekleşmesini sağlar */
    /* İsteğe bağlı: Arka plan rengi değişimini de yumuşatmak için: */
    /* transition: opacity 0.3s ease, background-color 0.3s ease; */
}

#notificationPopup button:hover {
    opacity: 0.85; /* Fare üzerine gelince opaklığı %85'e düşür (daha soluk görünür) */
    /* İstediğiniz değere ayarlayabilirsiniz (örn: 0.8 veya 0.9) */
}

/* İSTEĞE BAĞLI: Her buton için farklı hover efekti isterseniz */
/*
#allowNotifications:hover {
    background-color: #495057; // Örnek: Arka planı biraz koyulaştır
    opacity: 0.9;
}

#denyNotifications:hover {
    background-color: #5a6268; // Örnek: Arka planı biraz koyulaştır
    opacity: 0.9;
}
*/