/* ============================================================
   1. DEĞİŞKENLER VE TEMEL AYARLAR
   ============================================================ */
:root {
    --primary-gold: #f7b90f;
    --text-dark: #000000;
    --text-light: rgba(0, 0, 0, 0.5);
    --transition-speed: 0.4s;
    --button-size: 45px;
    --right-pos: 20px;
}

.call-button, .whatsapp-button {
    position: fixed;
    right: var(--right-pos);
    z-index: 1000;
    /* GPU İvmelendirmesi: Macbook ve 4K ekranlarda takılmayı önler */
    transform: translate3d(0, 0, 0);
    will-change: width;
}

/* Varsayılan (Mobil) Konumlar */
.whatsapp-button { bottom: 90px; font-size: 15px;font-weight: 300; }
.call-button { bottom: 140px; font-size: 15px;font-weight: 300;}

.contact-link {
    position: relative;
    display: flex;
    align-items: center;
    background: #fff;
    border-radius: 50px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, .15);
    width: var(--button-size);
    height: var(--button-size);
    transition: all var(--transition-speed) cubic-bezier(0.175, 0.885, 0.32, 1.275);
    overflow: hidden;
    text-decoration: none;
    border: 1px solid rgba(0,0,0,0.05);
}

.button-icon {
    position: absolute;
    right: 0;
    top: 0;
    width: var(--button-size);
    height: var(--button-size);
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    color: #fff;
    background: var(--primary-gold);
    z-index: 2;
}

.button-content {
    position: absolute;
    right: var(--button-size);
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 0 20px 0 15px;
    opacity: 0;
    white-space: nowrap;
    transition: opacity 0.3s ease;
    z-index: 1;
}

/* ============================================================
   2. EKREAN VE DONANIM OPTİMİZASYONLARI
   ============================================================ */

/* --- Retina / Macbook / Yüksek DPI Netlik Ayarı --- */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
    .contact-link { border-width: 0.5px; }
    .phone-number {font-size: 15px;font-weight: 700;}
    .call-text { font-size: 14px; }
    .contact-link.is-open, .contact-link:hover { width: 300px !important; }

}

/* --- Standart Windows & Laptop (1024px - 1920px) --- */
@media screen and (min-width: 1024px) {
    :root { --button-size: 50px; --right-pos: 20px; }
    .whatsapp-button { bottom: 15px; }
    .call-button { bottom: 70px; }
    .phone-number {font-size: 15px;font-weight: 700;}
    .call-text { font-size: 14px; }
    .contact-link.is-open, .contact-link:hover { width: 230x !important; }

}

/* --- 4K Ultra HD (2500px+) --- */
@media screen and (min-width: 2500px) {
    :root {--button-size: 60px;--right-pos: 20px;}
    .whatsapp-button {bottom: 10px;font-size: 2.2em;font-weight: 400;}
    .call-button {bottom: 75px;font-size: 1.2em;font-weight: 400;}
    .phone-number {font-size: 15px;font-weight: 700;}
    .call-text { font-size: 14px; }
    .contact-link.is-open, .contact-link:hover { width: 300px !important; }
}

/* ============================================================
   3. ETKİLEŞİM (DOKUNMATİK VS FARE) KONTROLÜ
   ============================================================ */

/* Fare Kullanan Cihazlar (Hover aktif) */
@media (hover: hover) and (pointer: fine) {
    .contact-link:hover { width: 250px; }
    .contact-link:hover .button-content { opacity: 1; }
}

/* Dokunmatik Cihazlar İçin (JS ile tetiklenen "Açık" durumu) */
.contact-link.is-open {
    width: 250px !important;
}
.contact-link.is-open .button-content {
    opacity: 1 !important;
}