/* css/style.css */

/* Google Font */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap');

:root {
    /* LOGO RENKLERİN (Sabit Değişkenler) */
    --tmz-cyan: #00c4cc;  
    --tmz-blue: #2c7be5;  
    --tmz-dark: #222222;
    --tmz-light: #f0fdfd; /* Çok açık, ferah zemin rengi */
}

body {
    font-family: 'Poppins', sans-serif;
    color: #444;
    background-color: #fff;
    overflow-x: hidden;
}

/* === 1. TMZ-TOPBAR (En Üst Şerit) === */
.tmz-topbar {
    background: linear-gradient(90deg, var(--tmz-blue) 0%, var(--tmz-cyan) 100%);
    padding: 8px 0;
    font-size: 14px;
    color: #fff;
}
.tmz-topbar a {
    color: #fff;
    text-decoration: none;
    opacity: 0.9;
    transition: 0.3s;
}
.tmz-topbar a:hover {
    opacity: 1;
}

/* === 2. TMZ-NAVBAR (Menü Alanı) === */
.tmz-navbar {
    background-color: #fff;
    padding: 15px 0;
    box-shadow: 0 4px 20px rgba(0,0,0,0.05);
}
.tmz-nav-link {
    color: #555 !important; /* Bootstrap'i ezmek için !important */
    font-weight: 600;
    margin-left: 20px;
    transition: 0.3s;
}
.tmz-nav-link:hover, .tmz-nav-link.active {
    color: var(--tmz-blue) !important;
}

/* Özel Buton Tasarımı */
.tmz-btn {
    background-color: var(--tmz-cyan);
    color: #fff !important;
    padding: 10px 30px;
    border-radius: 50px;
    font-weight: 600;
    border: 2px solid var(--tmz-cyan);
    text-decoration: none;
    display: inline-block;
    transition: all 0.3s ease;
}
.tmz-btn:hover {
    background-color: #fff;
    color: var(--tmz-cyan) !important;
    transform: translateY(-2px);
}
.tmz-btn-outline {
    background-color: transparent;
    border: 2px solid #555;
    color: #555 !important;
    padding: 10px 30px;
    border-radius: 50px;
    font-weight: 600;
    text-decoration: none;
    display: inline-block;
    transition: 0.3s;
}
.tmz-btn-outline:hover {
    background-color: #555;
    color: #fff !important;
}

/* === 3. TMZ-HERO (Giriş Bölümü) === */
.tmz-hero {
    background-color: var(--tmz-light);
    padding: 100px 0;
    position: relative;
}
.tmz-hero-title {
    font-size: 3rem;
    font-weight: 700;
    color: var(--tmz-dark);
    line-height: 1.2;
}
.tmz-highlight {
    color: var(--tmz-cyan);
}

/* === 4. TMZ-SERVICE-BOX (Hizmet Kutuları) === */
.tmz-service-box {
    background: #fff;
    padding: 40px 30px;
    border-radius: 15px;
    border: 1px solid #eee;
    transition: all 0.4s ease;
    height: 100%; /* Eşit yükseklik için */
}
.tmz-service-box:hover {
    border-color: var(--tmz-cyan);
    transform: translateY(-10px);
    box-shadow: 0 15px 30px rgba(0, 196, 204, 0.15);
}
.tmz-icon-circle {
    width: 80px;
    height: 80px;
    background-color: var(--tmz-light);
    color: var(--tmz-cyan);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 32px;
    margin: 0 auto 20px auto;
    transition: 0.3s;
}
.tmz-service-box:hover .tmz-icon-circle {
    background-color: var(--tmz-cyan);
    color: #fff;
}

/* === 5. TMZ-FOOTER (Alt Kısım) === */
.tmz-footer {
    background-color: #1a1a1a;
    color: #aaa;
    padding-top: 60px;
    padding-bottom: 20px;
    margin-top: auto;
}
.tmz-footer-title {
    color: #fff;
    font-weight: 700;
    margin-bottom: 20px;
    font-size: 18px;
}
.tmz-footer a {
    color: #aaa;
    text-decoration: none;
    line-height: 2.2;
    transition: 0.3s;
}
.tmz-footer a:hover {
    color: var(--tmz-cyan);
    padding-left: 5px; /* Hafif sağa kayma efekti */
}
.tmz-logo-bg {
    background-color: #fff;
    padding: 10px 15px;
    border-radius: 8px;
    display: inline-block;
    margin-bottom: 15px;
}

/* css/style.css dosyasının en altına eklenecek kod */

/* === 6. TMZ-WHATSAPP (Yüzen İkon) === */
.tmz-whatsapp-float {
    position: fixed;
    width: 60px;
    height: 60px;
    bottom: 25px;
    left: 25px; /* İsteğin üzerine SOLDA */
    background-color: #25D366; /* WhatsApp Yeşili */
    color: #FFF;
    border-radius: 50%;
    text-align: center;
    font-size: 28px; /* İkonu büyüttük */
    line-height: 60px; /* İkonu ortalamak için */
    box-shadow: 0 4px 12px rgba(0,0,0,0.2);
    z-index: 1000; /* Her şeyin üstünde */
    transition: all 0.3s ease;
}
.tmz-whatsapp-float:hover {
    color: #FFF;
    background-color: #128C7E; /* Koyu yeşil */
    transform: scale(1.1) rotate(15deg); /* Hafif efekt */
}