/*
 * SİTE STİLLERİ: ŞIRDANCI
 * Tema: Dramatik Türk Dizisi
 */

/* --------------------------------- */
/* TEMEL VE GENEL STİLLER (Основные и общие стили) */
/* --------------------------------- */

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: Arial, Helvetica, sans-serif; /* Okunaklı temel yazı tipi (Читаемый базовый шрифт) */
    font-size: 16px;
    line-height: 1.6;
    color: #333;

    max-width: 1090px; /* Maksimum genişlik (Максимальная ширина) */
    margin: 0 auto; /* Sayfayı ortalama (Центрирование) */
    background-color: #f0f2f5; /* Gövde dışı arka plan (Фон за пределами body) */
    overflow-x: hidden; /* Yatay kaydırmayı engelle (Запрет гориз. скролла) */
}

.container {
    /* HTML'de zaten var, ancak tam genişlikli arka planlar için padding'i bölümlere taşıyacağız */
    width: 95%;
    max-width: 960px; /* İçerik için maksimum genişlik */
    margin: 0 auto;
}

h1, h2, h3, h4, h5, h6 {
    /* Google Font olmadan dramatik bir görünüm için (Для драм. вида без Google Fonts) */
    font-family: Georgia, 'Times New Roman', Times, serif;
    font-weight: 700;
    letter-spacing: 0.5px;
}

section, header, footer {
    width: 100%;
    /* Bloklar arasında net bir ayrım için (Для четкого разделения блоков) */
    margin-bottom: 8px;
}

img, iframe {
    max-width: 100%;
}

ul {
    list-style: none;
}

a {
    text-decoration: none;
    color: #7B1E3B; /* Vurgu rengi (Акцентный цвет) */
}

/* Renk Paleti (Палитра): */
:root {
    --deep-blue: #0D1B2A;  /* Gece Mavisi (Глубокий синий) */
    --rich-wine: #7B1E3B;  /* Zengin Bordo (Насыщенный бордовый) */
    --elegant-cream: #FDF8E1; /* Zarif Krem (Элегантный кремовый) */
    --gold-accent: #E0A800; /* Altın Vurgu (Золотой акцент) */
    --dark-text: #1B1B1B;   /* Koyu Metin (Темный текст) */
    --light-text: #FFFFFF;  /* Açık Metin (Светлый текст) */
}


/* --------------------------------- */
/* BLOK 1: TEKLİF (Header/Offer) */
/* --------------------------------- */

header#anasayfa {
    min-height: 470px; /* İstenen yükseklik (Требуемая высота) */
    background-color: var(--deep-blue);
    color: var(--light-text);
    padding: 60px 30px;

    /* İçeriği dikey olarak ortalamak için (Для верт. центрирования) */
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;

    /* Dramatik bir etki için hafif gölge (Тень для драмы) */
    box-shadow: 0 5px 15px rgba(0,0,0,0.3);
    border-bottom: 4px solid var(--gold-accent);
}

header#anasayfa h1 {
    font-size: 2.8rem;
    color: var(--light-text);
    text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.5);
    margin-bottom: 15px;
}

header#anasayfa p {
    font-size: 1.2rem;
    color: #f0f0f0; /* Saf beyazdan biraz daha sönük (Чуть приглушенный) */
    max-width: 70%;
    margin-bottom: 25px;
}

/* Teklif bloğundaki özel bağlantı düğmesi (Стиль для CTA-кнопки) */
.cta-dugmesi {
    display: inline-block;
    padding: 15px 35px;
    background-color: var(--gold-accent);
    color: var(--dark-text);
    font-size: 1.1rem;
    font-weight: bold;
    font-family: Arial, Helvetica, sans-serif;
    text-transform: uppercase;
    border-radius: 5px;
    transition: all 0.3s ease-in-out;
    border: 2px solid var(--gold-accent);
    box-shadow: 0 4px 10px rgba(224, 168, 0, 0.2);
}

.cta-dugmesi:hover,
.cta-dugmesi:focus {
    background-color: var(--light-text);
    color: var(--gold-accent);
    transform: translateY(-3px); /* Hafif yükselme efekti (Эффект "подъема") */
    box-shadow: 0 6px 12px rgba(224, 168, 0, 0.3);
}

/* --------------------------------- */
/* KARIŞIK BLOKLAR (Перемешанные блоки) */
/* --------------------------------- */

/* BLOK 5: Yorumlar (Отзывы) */
section#yorumlar {
    background-color: var(--elegant-cream);
    color: var(--dark-text);
    padding: 50px 30px;
}

section#yorumlar h2 {
    color: var(--rich-wine);
    text-align: center;
    margin-bottom: 30px;
}

.yorum-listesi li {
    background: var(--light-text);
    border: 1px solid #ddd;
    border-left: 6px solid var(--rich-wine); /* Vurgu çizgisi (Акцентная линия) */
    padding: 25px;
    margin-bottom: 20px;
    border-radius: 0 8px 8px 0;
    box-shadow: 0 3px 8px rgba(0,0,0,0.05);
}

.yorum-listesi p {
    font-style: italic;
    font-size: 1.1rem;
    margin-bottom: 10px;
    color: #444;
}

.yorum-listesi strong {
    font-style: normal;
    color: var(--dark-text);
    font-weight: bold;
}

/* BLOK 4: Uzmanlar (Специалисты) */
section#uzmanlar {
    background-color: var(--light-text);
    padding: 50px 30px;
}

section#uzmanlar h2 {
    color: var(--deep-blue);
    text-align: center;
    margin-bottom: 30px;
}

.uzman-listesi {
    display: flex; /* Yan yana dizmek için (Для отображения в ряд) */
    flex-wrap: wrap;
    justify-content: space-around;
}

.uzman-listesi li {
    width: 45%;
    text-align: center;
    padding: 20px;
    margin-bottom: 15px;
    border: 1px solid #eee;
    border-radius: 5px;
}

.uzman-listesi h3 {
    color: var(--rich-wine);
    margin-bottom: 5px;
}

.uzman-listesi p {
    color: #555;
    font-size: 0.95rem;
}


/* BLOK 2: Abonelik Formu (Форма подписки) */
section#abone {
    background-color: var(--rich-wine);
    color: var(--light-text);
    padding: 50px 30px;
    text-align: center;
}

section#abone h2 {
    color: var(--light-text);
    margin-bottom: 10px;
}

section#abone p {
    color: #f0f0f0;
    margin-bottom: 25px;
}

form {
    max-width: 550px;
    margin: 0 auto;
}

.form-grup {
    margin-bottom: 20px;
    text-align: left;
}

.form-grup label {
    display: block;
    margin-bottom: 8px;
    font-weight: bold;
    font-size: 0.9rem;
}

.form-grup input[type="email"] {
    width: 100%;
    padding: 14px 18px;
    font-size: 1rem;
    border: 2px solid var(--light-text);
    border-radius: 5px;
    background: #fff;
    color: var(--dark-text);
    transition: all 0.3s ease;
}

.form-grup input[type="email"]:focus {
    outline: none;
    border-color: var(--gold-accent);
    box-shadow: 0 0 10px rgba(224, 168, 0, 0.5);
}

/* Tüm butonlar için genel stil (Общий стиль для всех кнопок) */
button[type="submit"] {
    display: inline-block;
    padding: 14px 30px;
    background-color: var(--gold-accent);
    color: var(--rich-wine); /* Koyu düğme metni (Темный текст на кнопке) */
    font-size: 1.1rem;
    font-weight: bold;
    font-family: Arial, Helvetica, sans-serif;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    transition: all 0.3s ease-in-out;
    width: 100%; /* Formda tam genişlik (Полная ширина в форме) */
    text-transform: uppercase;
}

button[type="submit"]:hover,
button[type="submit"]:focus {
    background-color: var(--light-text);
    color: var(--rich-wine);
    transform: scale(1.02); /* Hafif büyüme (Легкое увеличение) */
}


/* BLOK 4.1: Medya ve Eğitim (Медиа и обучение) */
section#medya {
    background-color: var(--deep-blue);
    color: #f0f0f0;
    padding: 50px 30px;
}

section#medya h2 {
    color: var(--gold-accent);
    margin-bottom: 15px;
}


/* BLOK 3: Hizmetler ve Makale (Услуги и статья) */
section#hizmetler {
    background-color: var(--light-text);
    padding: 50px 30px;
}

section#hizmetler h2 {
    color: var(--deep-blue);
    text-align: center;
    margin-bottom: 30px;
}

.urun-listesi li {
    padding: 15px 0;
    border-bottom: 1px dotted #ccc;
}

.urun-listesi strong {
    color: var(--rich-wine);
    font-size: 1.1rem;
    font-family: Georgia, 'Times New Roman', Times, serif;
    margin-right: 10px;
}

/* MAKALE STİLİ (Стиль статьи) */
.makale {
    margin-top: 50px;
    padding: 35px;
    background-color: var(--elegant-cream); /* Diğer bloktan ayırmak için (Для выделения) */
    border-radius: 8px;
    border-top: 5px solid var(--gold-accent);
    border-bottom: 5px solid var(--gold-accent);
    box-shadow: 0 4px 15px rgba(0,0,0,0.1);
}

.makale h2 {
    color: var(--rich-wine);
    text-align: left;
    border-bottom: 2px solid var(--gold-accent);
    padding-bottom: 10px;
    margin-bottom: 20px;
}

.makale p {
    margin-bottom: 15px;
    line-height: 1.7;
    color: #333;
}

.makale strong {
    /* İpuçlarını vurgulamak için (Для выделения советов) */
    color: var(--dark-text);
    font-weight: 900;
}


/* --------------------------------- */
/* BLOK 6: İLETİŞİM (Адрес) */
/* --------------------------------- */

section#iletisim {
    background-color: var(--elegant-cream);
    color: var(--dark-text);
    padding: 50px 30px;
}

section#iletisim h2 {
    color: var(--rich-wine);
    margin-bottom: 20px;
}

section#iletisim p {
    margin-bottom: 10px;
}

.harita-iframe {
    border: 3px solid var(--rich-wine);
    border-radius: 8px;
    margin-top: 20px;
    width: 100%; /* HTML'de zaten var ama burada garantileyelim */
    height: 400px;
}


/* --------------------------------- */
/* BLOK 7: FOOTER (Copyright) */
/* --------------------------------- */

footer {
    background-color: var(--dark-text);
    color: #aaa;
    padding: 40px 20px;
    text-align: center;
    border-top: 6px solid var(--gold-accent); /* Dramatik kapanış (Драматичное завершение) */
}

footer p {
    margin: 5px 0;
    font-size: 0.9rem;
}


/* --------------------------------- */
/* MOBİL UYUMLULUK (Медиа-запросы / Адаптация) */
/* --------------------------------- */

@media (max-width: 768px) {
    body {
        width: 100%;
        font-size: 15px;
    }

    section, header, footer {
        padding: 35px 20px;
        margin-bottom: 5px;
    }

    /* Blok 1: Header */
    header#anasayfa {
        min-height: 380px;
        padding: 40px 20px;
        align-items: center; /* Mobilde ortala (Центрирование на мобильных) */
        text-align: center;
    }

    header#anasayfa h1 {
        font-size: 2.1rem;
    }

    header#anasayfa p {
        font-size: 1.05rem;
        max-width: 100%;
    }

    .cta-dugmesi {
        padding: 14px 28px;
        font-size: 1rem;
        width: 100%;
        max-width: 350px;
    }

    /* Blok 4: Uzmanlar */
    .uzman-listesi li {
        width: 100%; /* Tam genişlik (Полная ширина) */
        margin-bottom: 10px;
    }

    /* Blok 2: Form */
    button[type="submit"] {
        width: 100%;
        padding: 15px;
    }

    /* Blok 3: Makale */
    .makale {
        padding: 25px;
        margin-top: 30px;
    }

    .makale h2 {
        font-size: 1.5rem;
    }

    /* Blok 6: Harita */
    .harita-iframe {
        height: 300px;
    }
}