@charset "utf-8";
/* hr pill button bar*/
.hr-pill-button-bar {
    margin: 0 auto;
}
.hr-pill-button-bar .hr-button-bar-container {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 15px;
    padding-top: 10px;
    padding-bottom: 10px;
}
.hr-pill-button-bar .hr-button-bar-container a {
    display: flex;
    align-items: center;
    padding: 12px 20px;
    border-radius: 30px;
    text-decoration: none;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
    transition: all 0.3s ease;
    background: white;
    border: 1px solid #eaeaea;
    user-select: none;
}
.hr-pill-button-bar .hr-button-bar-container :is(a, a *) {
    cursor: pointer;
}
.hr-pill-button-bar .hr-button-bar-container a:hover {
    box-shadow: 0 4px 10px rgba(0,0,0,0.15);
    transform: translateY(-2px);
}
.hr-pill-button-bar .hr-button-bar-container a .icon {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 10px;
}
.hr-pill-button-bar .hr-button-bar-container a .icon i {
    color: white;
    font-size: 18px;
}
.hr-pill-button-bar .hr-button-bar-container a .label {
    font-weight: 600;
    color: #2c3e50;
    font-size: 1rem;
}
@media screen and (min-width: 1536px) {
    .hr-pill-button-bar{
        max-width: 1536px;
    }
}

@media screen and (min-width: 1280px) and (max-width: 1535px) {
    .hr-pill-button-bar{
        max-width: 1280px;
    }
}

@media screen and (min-width: 1024px) and (max-width: 1279px) {
    .hr-pill-button-bar{
        max-width: 1024px;
    }
}

@media screen and (min-width: 768px) and (max-width: 1023px) {
    .hr-pill-button-bar{
        max-width: 768px;
    }
    
    .hr-pill-button-bar a {
        padding: 11px 18px;
    }
    .hr-pill-button-bar .hr-button-bar-container a .icon {
        width: 32px;
        height: 32px;
    }
    .hr-pill-button-bar .label {
        font-size: 0.9rem;
    }
}

@media screen and (min-width: 641px) and (max-width: 767px) {
    .hr-pill-button-bar{
        max-width: 641px;
    }
    
    .hr-pill-button-bar a {
        padding: 9px 14px;
    }
    .hr-pill-button-bar .hr-button-bar-container a .icon {
        width: 30px;
        height: 30px;
    }
    .hr-pill-button-bar .label {
        font-size: 0.9rem;
    }
}

@media screen and (max-width: 640px) {
    /* .hr-pill-button-bar {} */

    .hr-pill-button-bar .hr-button-bar-container a {
        padding: 8px 12px;
        border-radius: 30px;
    }

    .hr-pill-button-bar .hr-button-bar-container a .icon {
        width: 26px;
        height: 26px;
    }

    .hr-pill-button-bar .hr-button-bar-container a .icon i {
        color: white;
        font-size: 12px;
    }

    .hr-pill-button-bar .hr-button-bar-container a .label {
        font-weight: 600;
        color: #2c3e50;
        font-size: 0.8rem;
    }
}

/* hr rounded square button bar*/
.hr-rounded-square-button-bar {
    margin: 0 auto;
}

.hr-rounded-square-button-bar  .hr-button-bar-container {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 20px;
}

.hr-rounded-square-button-bar  .hr-button-bar-container a {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 20px 15px;
    border-radius: 16px;
    text-decoration: none;
    box-shadow: 0 3px 8px rgba(0,0,0,0.08);
    transition: all 0.3s ease;
    background: white;
    border: 1px solid #f0f0f0;
    width: 140px;
    text-align: center;
}

.hr-rounded-square-button-bar .hr-button-bar-container a:hover {
    box-shadow: 0 6px 15px rgba(0,0,0,0.12);
    transform: translateY(-5px);
}

.hr-rounded-square-button-bar  .hr-button-bar-container a .icon {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 15px;
}

.hr-rounded-square-button-bar  .hr-button-bar-container a .icon i {
    color: white;
    font-size: 24px;
}

.hr-rounded-square-button-bar .hr-button-bar-container a .label {
    font-weight: 600;
    color: #2c3e50;
    font-size: 0.95rem;
    line-height: 1.3;
    word-wrap: break-word;
    max-width: 100%;
}

@media screen and (min-width: 1536px) {
    .hr-rounded-square-button-bar {
        max-width: 1536px;
    }
}
@media screen and (min-width: 1280px) and (max-width: 1535px) {
    .hr-rounded-square-button-bar {
        max-width: 1280px;
    }
}
@media screen and (min-width: 1024px) and (max-width: 1279px) {
    .hr-rounded-square-button-bar {
        max-width: 1024px;
    }
}
@media screen and (min-width: 768px) and (max-width: 1023px) {
    .hr-rounded-square-button-bar {
        max-width: 768px;
    }
}
@media screen and (min-width: 641px) and (max-width: 767px) {
    .hr-rounded-square-button-bar {
        max-width: 641px;
    }
    .hr-rounded-square-button-bar .hr-button-bar-container {
        gap: 15px;
    }
    
    .hr-rounded-square-button-bar .hr-button-bar-container a{
        width: 120px;
        padding: 15px 10px;
    }
    
    .hr-rounded-square-button-bar .hr-button-bar-container a .icon {
        width: 50px;
        height: 50px;
    }
    
    .hr-rounded-square-button-bar .hr-button-bar-container a .icon i {
        font-size: 20px;
    }
    
    .hr-rounded-square-button-bar .hr-button-bar-container a .label {
        font-size: 0.9rem;
    }
}

@media screen and (max-width: 640px) {
    .hr-rounded-square-button-bar {
        width: 100%;
    }
    
    .hr-rounded-square-button-bar .hr-button-bar-container {
        gap: 10px;
    }
    
    .hr-rounded-square-button-bar .hr-button-bar-container a{
        width: calc(50% - 15px);
        max-width: 140px;
    }
}

@media (max-width: 360px) {
    .hr-rounded-square-button-bar .hr-button-bar-container a{
        width: 100%;
        max-width: 160px;
    }
}

/* hr circle-button bar*/
.hr-button-bar-container {
    /* display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 30px; */

    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    scrollbar-width: none;
    gap: 8px;

    max-width: fit-content;
    margin: 0 auto;
}

.hr-circle-button-bar .hr-button-bar-container a {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-decoration: none;
    transition: all 0.3s ease;
    padding: 15px;
    border-radius: 16px;
}

.hr-circle-button-bar .hr-button-bar-container a:hover {
    transform: translateY(-8px);
}

.hr-circle-button-bar .hr-button-bar-container a .icon {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 15px;
    box-shadow: 0 6px 15px rgba(0,0,0,0.15);
    transition: all 0.3s ease;
}

.hr-circle-button-bar .hr-button-bar-container a:hover .hr-circle-button-bar .hr-button-bar-container a .icon {
    transform: scale(1.1);
    box-shadow: 0 8px 20px rgba(0,0,0,0.2);
}

.hr-circle-button-bar .hr-button-bar-container a .icon i {
    color: white;
    font-size: 32px;
}

.hr-circle-button-bar .hr-button-bar-container a .label {
    font-weight: 600;
    color: #2c3e50;
    font-size: 1rem;
    text-align: center;
    max-width: 100px;
    line-height: 1.3;
}

/* Responsive Tasarım */
@media (max-width: 768px) {
    .hr-button-bar-container {
        gap: 6px;
    }

    .hr-circle-button-bar .hr-button-bar-container a {
        padding: 8px;
    }
    
    .hr-circle-button-bar .hr-button-bar-container a .icon {
        width: 50px;
        height: 50px;
    }
    
    .hr-circle-button-bar .hr-button-bar-container a .icon i {
        font-size: 20px;
    }
    
    .hr-circle-button-bar .hr-button-bar-container a .label {
        font-size: 0.9rem;
        max-width: 90px;
    }
}

@media (max-width: 480px) {
    
    .hr-button-bar-container {
        gap: 4px;
    }
    
    .hr-circle-button-bar .hr-button-bar-container a {
        width: calc(33.333% - 20px);
    }
    
    .hr-circle-button-bar .hr-button-bar-container a .icon {
        width: 45px;
        height: 45px;
    }
    
    .hr-circle-button-bar .hr-button-bar-container a .icon i {
        font-size: 20px;
    }
    
    .hr-circle-button-bar .hr-button-bar-container a .label {
        font-size: 0.85rem;
        max-width: 80px;
    }
}

/* gradient backgrounds */
:root {
    --linear-gradient-green: linear-gradient(135deg, #4caf50, #2e7d32);
    --linear-gradient-tomato: linear-gradient(135deg, #FF5252, #D32F2F);
    --linear-gradient-blue: linear-gradient(135deg, #2196F3, #0D47A1);
    --linear-gradient-lightorange: linear-gradient(135deg, #FF9800, #F57C00);
    --linear-gradient-purple: linear-gradient(135deg, #9C27B0, #7B1FA2);
    --linear-gradient-red: linear-gradient(135deg, #E91E63, #C2185B);
    --linear-gradient-orange: linear-gradient(135deg, #FF5722, #E64A19);
    --linear-gradient-yellow: linear-gradient(135deg, #FFEB3B, #FBC02D); color: #333;
    --linear-gradient-turkuaz: linear-gradient(135deg, #00BCD4, #0097A7);
    --linear-gradient-lightgreen: linear-gradient(135deg, #00E676, #00C853);
    --linear-gradient-gray: linear-gradient(135deg, #9E9E9E, #616161);
    --linear-gradient-lightblue: linear-gradient(135deg, #03A9F4, #0288D1);
    --linear-gradient-white: linear-gradient(135deg, #ffffff, #ddd);
    --linear-gradient-selamgreen: linear-gradient(135deg, #002233, #002f46);
    --linear-gradient-black: linear-gradient(135deg, #000000, #414141);
    --pale-rose-blush: linear-gradient(135deg, #FF9A9E, #FAD0C4);
    --sky-blue-serenity: linear-gradient(135deg, #A1C4FD, #C2E9FB);
    --peach-sunset-glow: linear-gradient(135deg, #FFECD2, #FCB69F);
    --mint-ocean-breeze: linear-gradient(135deg, #84FAB0, #8FD3F4);
    --lime-tech-fusion: linear-gradient(135deg, #D4FC79, #96E6A1);
    --healthy-pink-tint: linear-gradient(135deg, #FF9A9E, #FECFEF);
    --indigo-slate-blue: linear-gradient(135deg, #A3Bded, #6991c7);
    --gold-sunset-economy: linear-gradient(135deg, #f6d365, #fda085);
}

.pale-rose-blush { background: var(--pale-rose-blush); }     /* Family: Solgun Gül/Allık */
.sky-blue-serenity { background: var(--sky-blue-serenity); }   /* Law: Gökyüzü Mavisi/Huzur */
.peach-sunset-glow { background: var(--peach-sunset-glow); }   /* Religion: Şeftali/Gün Batımı Işıltısı */
.mint-ocean-breeze { background: var(--mint-ocean-breeze); }   /* Life: Nane/Okyanus Esintisi */
.lime-tech-fusion { background: var(--lime-tech-fusion); }    /* Tech: Misket Limonu/Teknoloji Füzyonu */
.healthy-pink-tint { background: var(--healthy-pink-tint); }   /* Health: Sağlıklı Pembe Tonu */
.indigo-slate-blue { background: var(--indigo-slate-blue); }   /* Education: İndigo/Kaya Mavisi */
.gold-sunset-economy { background: var(--gold-sunset-economy); } /* Economy: Altın/Gün Batımı Ekonomisi */

.bg-linear-gradient-green { background: var(--linear-gradient-green); }
.bg-linear-gradient-tomato { background: var(--linear-gradient-tomato); }
.bg-linear-gradient-blue { background: var(--linear-gradient-blue); }
.bg-linear-gradient-lightorange { background: var(--linear-gradient-lightorange); }
.bg-linear-gradient-purple { background: var(--linear-gradient-purple); }
.bg-linear-gradient-red { background: var(--linear-gradient-red); }
.bg-linear-gradient-orange { background: var(--linear-gradient-orange); }
.bg-linear-gradient-yellow { background: var(--linear-gradient-yellow); }
.bg-linear-gradient-turkuaz { background: var(--linear-gradient-turkuaz); }
.bg-linear-gradient-lightgreen { background: var(--linear-gradient-lightgreen); }
.bg-linear-gradient-gray { background: var(--linear-gradient-gray); }
.bg-linear-gradient-lightblue { background: var(--linear-gradient-lightblue); }
.bg-linear-gradient-white { background: var(--linear-gradient-white); }
.bg-linear-gradient-selamgreen { background: var(--linear-gradient-selamgreen); }
.bg-linear-gradient-black { background: var(--linear-gradient-black);}