/* wp-content/plugins/gentug-dinamik-linkler/assets/css/gentug-dinamik-linkler.css */

/* Temel Link Kutusu Stilleri (Aktif olmayan veya varsayılan durum) */
.link-kutusu {
    display: inline-flex;   /* Kutuyu yan yana göstermek ve içeriği ortalamak için */
    justify-content: center; /* İçeriği (rakamı) yatayda ortala */
    align-items: center;    /* İçeriği (rakamı) dikeyde ortala */
    width: 35px;            /* Kutunun genişliği */
    height: 35px;           /* Kutunun yüksekliği (kare olması için genişliğe eşit) */
    background-color: #7997a5; /* Varsayılan: Gri arka plan rengi */
    color: #fff;            /* Varsayılan: Beyaz metin rengi */
    text-decoration: none;  /* Linkin alt çizgisini kaldır */
    margin: 5px;            /* Kutular arasında boşluk bırak */
    border-radius: 4px;     /* Köşeleri hafifçe yuvarla (isteğe bağlı, estetik için) */
    font-weight: bold;      /* Metni kalın yap */
    transition: all 0.2s ease-in-out; /* Fare üzerine gelme (hover) efekti için yumuşak geçiş */
    box-sizing: border-box; /* Padding ve border'ın elementin toplam genişlik/yüksekliğine dahil olmasını sağlar */
    border: 2px solid transparent; /* Varsayılan olarak şeffaf bir kenarlık, aktif durum için yer tutar */
}

/* Link Kutusu Hover Stilleri (Aktif olmayan linkler için) */
.link-kutusu:hover {
    background-color: #5a6268; /* Fare üzerine geldiğinde biraz daha koyu gri */
    transform: translateY(-1px); /* Hafif yukarı kalkma efekti */
    cursor: pointer; /* Fare imlecini işaretçi olarak değiştir */
}

/* Aktif Sayfanın Link Kutusu Stilleri */
.aktif-link-kutusu {
    background-color: #fff;       /* Aktif: İç rengi beyaz */
    color: #7997a5;               /* Aktif: Rakam rengi gri */
    border: 2px solid #7997a5;    /* Aktif: Gri kenarlık */
}

/* Aktif Link Kutusu Hover Stilleri (Aktif linklerin fare üzerine gelme durumu) */
.aktif-link-kutusu:hover {
    background-color: #7997a5; /* Hafif kirli beyaz veya çok hafif gri */
    border-color: #5a6268;     /* Kenarlığı biraz daha koyu gri yap */
    transform: translateY(-1px); /* Hover efektini koru */
}