/* Contact Page Styles */
.contact-page { background-color: var(--color-light); }
.contact-page__grid { display: grid; grid-template-columns: 1fr; gap: var(--space-2xl); }

/* Contact Info Cards */
.contact-info { display: grid; grid-template-columns: 1fr; gap: var(--space-lg); }

.contact-card { 
    background: var(--color-white); 
    border-radius: var(--radius-lg); 
    padding: var(--space-xl); 
    text-align: center; 
    box-shadow: var(--shadow-sm); 
    transition: all var(--transition-normal); 
    border: 1px solid transparent;
    /* Safari render fix */
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
    /* Touch feedback */
    -webkit-tap-highlight-color: transparent;
}

/* Masaüstü hover */
@media (hover: hover) {
    .contact-card:hover { 
        transform: translateY(-5px); 
        box-shadow: var(--shadow-lg); 
        border-color: var(--color-primary); 
    }
}

/* Touch active - kartlar için gerekli değil, kaldırıldı */

.contact-card__icon { width: 70px; height: 70px; display: flex; align-items: center; justify-content: center; background: var(--gradient-gold); border-radius: var(--radius-full); margin: 0 auto var(--space-lg); font-size: 1.75rem; color: var(--color-dark); }
.contact-card__title { font-family: var(--font-primary); font-size: 1.25rem; color: var(--color-dark); margin-bottom: var(--space-sm); }
.contact-card__text { color: var(--color-text-dark); line-height: 1.7; margin-bottom: var(--space-md); }

.contact-card__hours { text-align: left; }
.hours-row { display: flex; justify-content: space-between; padding: var(--space-sm) 0; border-bottom: 1px solid var(--color-light-soft); color: var(--color-text-dark); }
.hours-row:last-child { border-bottom: none; }

/* Telefon butonu tek satırda kalsın */
.btn--phone { white-space: nowrap; }

/* Contact Map */
.contact-map { background: var(--color-white); border-radius: var(--radius-lg); padding: var(--space-xl); box-shadow: var(--shadow-sm); }
.contact-map__title { font-family: var(--font-primary); font-size: 1.5rem; color: var(--color-dark); margin-bottom: var(--space-lg); text-align: center; }
.contact-map__wrapper { border-radius: var(--radius-md); overflow: hidden; margin-bottom: var(--space-lg); }
.contact-map__wrapper iframe { display: block; }
.contact-map__btn { display: block; width: 100%; max-width: 300px; margin: 0 auto; }

/* Contact Social */
.contact-social { margin-top: var(--space-3xl); text-align: center; background: var(--color-dark); border-radius: var(--radius-lg); padding: var(--space-2xl); }
.contact-social h2 { font-family: var(--font-primary); font-size: 1.5rem; color: var(--color-light); margin-bottom: var(--space-sm); }
.contact-social p { color: var(--color-light-soft); margin-bottom: var(--space-xl); }

.contact-social__links { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-lg); }
.contact-social__link { 
    display: flex; 
    align-items: center; 
    gap: var(--space-sm); 
    padding: var(--space-md) var(--space-xl); 
    border-radius: var(--radius-md); 
    color: var(--color-white); 
    font-weight: 500; 
    transition: all var(--transition-fast); 
    text-decoration: none;
    /* Touch feedback */
    -webkit-tap-highlight-color: transparent;
}
.contact-social__link--instagram { background: linear-gradient(45deg, #405DE6, #5851DB, #833AB4, #C13584, #E1306C, #FD1D1D); }
.contact-social__link--facebook { background: #1877F2; }

/* Masaüstü hover */
@media (hover: hover) {
    .contact-social__link:hover { 
        transform: translateY(-3px); 
        box-shadow: var(--shadow-lg); 
    }
}

/* Touch active */
@media (hover: none) {
    .contact-social__link:active { 
        transform: scale(0.95); 
        opacity: 0.9;
    }
}

.contact-social__link i { font-size: 1.5rem; }

@media (min-width: 480px) { .contact-info { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 768px) { 
    .contact-page__grid { grid-template-columns: 55% 45%; } 
    .contact-info { grid-template-columns: 1fr; } 
}
@media (min-width: 992px) {
    .contact-page__grid { grid-template-columns: 55% 45%; }
    .contact-info { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1200px) { 
    .contact-page__grid { grid-template-columns: 60% 40%; }
    .contact-info { grid-template-columns: repeat(2, 1fr); } 
}