/*
Theme Name: Momentus Healthcare
Theme URI: https://momentus-healthcare.com/
Author: (Adınız)
Author URI: https://siteniz.com/
Description: Momentus Healthcare (Onkoloji) için özel olarak geliştirilmiş WordPress teması.
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Tags: oncology, healthcare, custom-theme
Text Domain: momentus
*/

/* --- 1. TEMEL AYARLAR VE SIFIRLAMA --- */

* {
    box-sizing: border-box;
}

body {
    font-family: 'Inter', sans-serif; /* functions.php'de eklediğimiz Google Font */
    font-size: 16px;
    line-height: 1.6;
    color: #333;
    background-color: #f9f9f9;
    margin: 0;
}

.container {
    /* Bu sarmalayıcıyı header.php ve footer.php'de kullanacağız */
    max-width: 1200px;
    margin: 0 auto;
    padding: 20px;
}

a {
    color: #0073aa;
    text-decoration: none;
}

a:hover {
    text-decoration: underline;
}

img {
    max-width: 100%;
    height: auto;
    display: block;
}

h1, h2, h3, h4, h5, h6 {
    margin: 0 0 15px 0;
    font-weight: 600;
}

/* --- 2. ANA SAYFA YAPISI (İÇERİK + SIDEBAR) --- */

.site-content-wrapper {
    display: flex;
    flex-wrap: wrap;
    gap: 30px; /* İçerik ve sidebar arası boşluk */
}

#primary {
    /* Ana içerik alanı (70% genişlik) */
    flex: 1;
    min-width: 0; /* Flex-item'ların küçülebilmesi için */
    flex-basis: 70%;
}

#secondary {
    /* Sidebar alanı (30% genişlik) */
    flex: 1;
    flex-basis: 30%;
    min-width: 280px; /* Sidebar çok daralmasın */
}

/* --- 3. WIDGET STİLLERİ (SIDEBAR VE FOOTER) --- */

.widget-area .widget {
    background-color: #ffffff;
    padding: 20px;
    border-radius: 8px;
    margin-bottom: 20px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.05);
}

.widget-title {
    font-size: 1.25rem;
    border-bottom: 2px solid #f0f0f0;
    padding-bottom: 10px;
}

/* Özel İletişim Widget'ı */
.contact-widget-info .contact-item {
    display: flex;
    align-items: center;
    margin-bottom: 10px;
    font-size: 0.95rem;
}
.contact-widget-info .contact-icon {
    margin-right: 10px;
}


/* --- 4. ARŞİV SAYFALARI (KART GRİDLERİ) --- */

.momentus-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); /* Responsive grid */
    gap: 20px;
}

/* Kartların genel stili */
.center-card,
.team-member-card,
.treatment-card {
    background-color: #ffffff;
    border-radius: 8px;
    overflow: hidden; /* Resmin köşelerini de yuvarlatmak için */
    box-shadow: 0 4px 10px rgba(0,0,0,0.08);
    transition: transform 0.2s ease;
}

.center-card:hover,
.team-member-card:hover,
.treatment-card:hover {
    transform: translateY(-5px);
}

/* Kart Resimleri */
.center-card-image img,
.team-member-image img,
.treatment-card-image img {
    width: 100%;
    height: 200px; /* Kart resim yüksekliğini sabitle */
    object-fit: cover; /* Resmin orantısını bozmadan kaplamasını sağlar */
}

/* Kart İçerikleri */
.center-card-content,
.team-member-info,
.treatment-card-content {
    padding: 20px;
}

.center-card-title,
.team-member-name,
.treatment-card-title {
    font-size: 1.2rem;
    margin-bottom: 10px;
}
.center-card-title a,
.team-member-name a,
.treatment-card-title a {
    color: #333;
}

/* Merkez Kartı Özel Stilleri */
.center-card-location {
    font-size: 0.9rem;
    color: #666;
    display: block;
    margin-bottom: 10px;
}
.center-card-services .service-tag {
    display: inline-block;
    background-color: #eef7ff;
    color: #005a9e;
    padding: 3px 8px;
    border-radius: 4px;
    font-size: 0.8rem;
    margin-right: 5px;
    margin-top: 5px;
}

/* Ekip Kartı Özel Stilleri */
.team-member-position {
    font-size: 1rem;
    color: #0073aa;
    font-weight: 500;
}
.team-member-specialty {
    font-size: 0.9rem;
    color: #555;
    margin-top: 5px;
}

/* --- 5. TEKİL GÖNDERİ (DETAY SAYFALARI) --- */

.entry-header {
    margin-bottom: 20px;
    border-bottom: 2px solid #f0f0f0;
    padding-bottom: 15px;
}
.entry-title {
    font-size: 2.2rem;
    font-weight: 700;
}
.entry-content {
    background-color: #ffffff;
    padding: 25px;
    border-radius: 8px;
}

/* Tekil Merkez Sayfası (single-merkez.php) */
.entry-layout-wrapper {
    display: flex;
    flex-wrap: wrap;
    gap: 30px;
}
.entry-layout-wrapper .entry-content {
    flex-basis: 70%;
    flex-grow: 1;
}
.center-details-sidebar {
    flex-basis: 30%;
    flex-grow: 1;
    min-width: 280px;
}
.center-details-box, .center-services-box {
    background-color: #ffffff;
    padding: 20px;
    border-radius: 8px;
    margin-bottom: 20px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.05);
}
.center-details-box h3, .center-services-box h3 {
    font-size: 1.2rem;
    border-bottom: 1px solid #eee;
    padding-bottom: 10px;
}
.services-list {
    list-style: none;
    padding-left: 0;
}
.services-list .service-list-item {
    padding: 5px 0;
    border-bottom: 1px dashed #f0f0f0;
}

/* Tekil Ekip Sayfası (single-team_member.php) */
.team-member-layout-wrapper {
    display: flex;
    flex-wrap: wrap;
    gap: 30px;
}
.team-member-sidebar {
    flex-basis: 30%;
    min-width: 280px;
}
.team-member-content {
    flex-basis: 70%;
    flex-grow: 1;
    min-width: 0;
}
.team-member-photo .profile-photo {
    border-radius: 8px;
    width: 100%;
}
.team-member-contact-box {
    background-color: #ffffff;
    padding: 20px;
    border-radius: 8px;
    margin-top: 20px;
}
.team-member-position-title, .team-member-specialty-title {
    font-size: 1.1rem;
    color: #555;
    margin-bottom: 10px;
}
/* --- 6. HEADER VE MENÜ STİLLERİ --- */

.site-header {
    background-color: #ffffff;
    padding: 10px 0;
    border-bottom: 1px solid #e0e0e0;
    box-shadow: 0 2px 5px rgba(0,0,0,0.05);
}

/* Header'ı (Logo + Menü) Flexbox ile yan yana getir */
.site-header > .container {
    display: flex;
    justify-content: space-between; /* Logo sola, menü sağa yaslanır */
    align-items: center; /* Dikey olarak ortalar */
    flex-wrap: wrap; /* Mobilde alt alta inmeleri için */
}

/* Logo alanı */
.site-branding {
    flex-grow: 1; /* Büyüyebilsin */
    max-width: 300px;
}
.site-branding img {
    max-width: 100%;
    height: auto;
}
.site-title {
    font-size: 1.8rem;
    font-weight: 700;
    margin: 0;
}
.site-title a {
    color: #222;
    text-decoration: none;
}
.site-description {
    font-size: 0.9rem;
    color: #777;
    margin: 0;
}


/* Ana Navigasyon Menüsü */
.main-navigation {
    flex-shrink: 1; /* Küçülebilsin */
}
.main-navigation ul {
    list-style: none; /* Madde imlerini kaldır */
    margin: 0;
    padding: 0;
    display: flex; /* YATAY HALE GETİR */
    flex-wrap: wrap; /* Mobilde alt alta inmeleri için */
}
.main-navigation li {
    margin-left: 20px; /* Menü öğeleri arası boşluk */
}
.main-navigation a {
    display: block;
    padding: 15px 5px;
    text-decoration: none;
    font-weight: 600;
    font-size: 1rem;
    color: #333;
    border-bottom: 3px solid transparent; /* Hover efekti için */
    transition: all 0.2s ease-in-out;
}
.main-navigation a:hover,
.main-navigation a:focus {
    color: #0073aa;
    border-bottom-color: #0073aa;
}

/* WordPress'in aktif sayfayı işaretlemesi için */
.main-navigation .current_page_item > a,
.main-navigation .current-menu-item > a {
    color: #0073aa;
    border-bottom-color: #0073aa;
}

/* (Varsa) Alt Menüler */
.main-navigation ul ul {
    display: none; /* Alt menüleri normalde gizle */
    position: absolute;
    background-color: #ffffff;
    box-shadow: 0 4px 10px rgba(0,0,0,0.1);
    padding: 10px 0;
    min-width: 200px;
    z-index: 999;
}
.main-navigation li:hover > ul {
    display: block; /* Üzerine gelince göster */
}
.main-navigation ul ul li {
    margin-left: 0; /* Alt menüde sıfırla */
    width: 100%;
}
.main-navigation ul ul a {
    padding: 10px 15px;
    border-bottom: none; /* Alt menüde çizgi olmasın */
}


/* --- 7. FOOTER STİLLERİ --- */

.site-footer {
    background-color: #2c3e50; /* Koyu mavi/gri */
    color: #ecf0f1;
    padding: 50px 0 20px 0;
    margin-top: 40px;
    font-size: 0.95rem;
}
.site-footer a {
    color: #ffffff;
    text-decoration: underline;
}
.site-footer a:hover {
    color: #bdc3c7;
}

/* Footer Widget Alanı (Grid ile 3 sütunlu yapı) */
.footer-widget-area {
    display: grid;
    /* 3 sütunlu, mobil uyumlu (mobilde 250px'den küçükse tek sütun) */
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); 
    gap: 30px;
    margin-bottom: 30px;
    padding-bottom: 30px;
    border-bottom: 1px solid #34495e;
}

.site-footer .widget-title {
    color: #ffffff;
    font-size: 1.2rem;
    border-bottom-color: #46627f;
}
.site-footer .widget {
    background: none; /* Footer'da widget arka planı olmasın */
    box-shadow: none;
    padding: 0;
}
.site-footer .contact-widget-info .contact-item {
    color: #bdc3c7;
}


/* Footer Menüsü ve Telif Hakkı */
.footer-navigation {
    margin-bottom: 20px;
}
.footer-navigation ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 15px; /* Menü öğeleri arası boşluk */
}
.footer-navigation a {
    text-decoration: none;
    color: #ecf0f1;
}

.site-info {
    text-align: center;
    font-size: 0.9rem;
    color: #95a5a6;
}
/* --- 8. KART TASARIMLARI (İyileştirme) --- */

/* Tüm kartları (merkez, ekip, tedavi, yazı)
   içeren ana grid (.momentus-grid) için varsayılanlar.
*/
.momentus-grid {
    display: grid;
    /* minmax(320px, 1fr): 
       Bir kartın minimum genişliği 320px olsun.
       Yeterli alan varsa (1fr) ekranı dolduracak şekilde büyüsün.
       Bu, mobil ve masaüstü için harika bir responsive yapı sağlar.
    */
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 30px; /* Kartlar arası boşluk */
}

/* Tüm kartlar için genel iyileştirmeler 
   (Daha önce eklediğimiz .center-card vb. üzerine yazar)
*/
.center-card,
.team-member-card,
.treatment-card,
.post-card {
    background-color: #ffffff;
    border-radius: 12px; /* Köşeleri daha yumuşak yapalım */
    overflow: hidden;
    /* Daha yumuşak, katmanlı bir gölge efekti.
       Önceki 'box-shadow' kuralının yerine geçer.
    */
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05), 0 1px 3px rgba(0, 0, 0, 0.08);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    
    /* Kartların aynı hizada durması için flexbox */
    display: flex;
    flex-direction: column;
}

.center-card:hover,
.team-member-card:hover,
.treatment-card:hover,
.post-card:hover {
    transform: translateY(-7px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08), 0 3px 6px rgba(0, 0, 0, 0.1);
}

/* Kart içerik alanlarının (resim hariç)
   kartın alt kısmını doldurmasını sağlarız.
*/
.center-card-content,
.team-member-info,
.treatment-card-content,
.post-card-content {
    padding: 20px 25px 25px 25px; /* İç boşluklar */
    display: flex;
    flex-direction: column;
    flex-grow: 1; /* Bu, kartın alt kısmının büyümesini sağlar */
}

/* Kart Başlıkları */
.center-card-title,
.team-member-name,
.treatment-card-title,
.post-card-content .entry-title {
    font-size: 1.3rem; /* Başlıkları biraz büyütelim */
    margin-bottom: 12px;
}
.post-card-content .entry-title a {
    color: #333;
}


/* --- Kartlara Özel İyileştirmeler --- */

/* 1. Merkez Kartı (.center-card) */
.center-card-image,
.treatment-card-image,
.post-card-image {
    height: 220px; /* Resim yüksekliğini biraz artıralım */
}
.center-card-image a,
.treatment-card-image a,
.post-card-image a {
    display: block;
    height: 100%;
    width: 100%;
}
.center-card-image img,
.treatment-card-image img,
.post-card-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.center-card-excerpt,
.treatment-card-excerpt,
.post-card-content .entry-summary {
    font-size: 0.95rem;
    color: #555;
    flex-grow: 1; /* İçeriğin büyümesini ve "Devamını Oku" linkini aşağı itmesini sağlar */
    margin-bottom: 20px;
}

.center-card-location {
    font-weight: 500;
    color: #0073aa;
}

/* Hizmet Etiketleri */
.center-card-services {
    margin-top: auto; /* Kendini kartın en altına iter */
    padding-top: 15px;
    border-top: 1px solid #f0f0f0;
}
.center-card-services .service-tag {
    display: inline-block;
    background-color: #f0f7ff;
    color: #005a9e;
    padding: 4px 10px;
    border-radius: 20px; /* Hap şeklinde */
    font-size: 0.8rem;
    font-weight: 500;
    margin-right: 5px;
    margin-top: 5px;
}

/* 2. Ekip Kartı (.team-member-card) */
.team-member-image {
    /* Kare (1:1) resim alanı */
    height: 0;
    padding-bottom: 100%; /* Genişliğe eşit yükseklik sağlar */
    position: relative;
    overflow: hidden;
}
.team-member-image img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.team-member-info {
    text-align: center; /* Ekip kartı içeriği ortalı olsun */
}

/* 3. "Devamını Oku" Linkleri (Düğme Gibi) */
.treatment-card .read-more-link,
.post-card .read-more-link {
    margin-top: auto; /* Kendini kartın en altına iter */
    padding-top: 15px;
    font-weight: 600;
    color: #0073aa;
    text-decoration: none;
    transition: color 0.2s;
}
.treatment-card .read-more-link:hover,
.post-card .read-more-link:hover {
    color: #005a9e;
}
/* --- 9. DÜĞMELER (BUTTONS) VE FORM STİLLERİ --- */

/* * 1. GENEL DÜĞMELER
 * .button sınıfı (Haritada Gör linki gibi)
 * <button> etiketi
 * <input type="submit"> (Form gönderme düğmesi)
*/
.button,
button,
input[type="submit"],
input[type="button"],
input[type="reset"] {
    display: inline-block;
    padding: 12px 24px;
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.2;
    text-align: center;
    text-decoration: none;
    color: #ffffff;
    background-color: #0073aa; /* Ana tema rengimiz (Mavi) */
    border: none;
    border-radius: 8px; /* Yumuşak köşeler */
    cursor: pointer;
    transition: background-color 0.2s ease, transform 0.2s ease;
}

.button:hover,
button:hover,
input[type="submit"]:hover,
input[type="button"]:hover,
input[type="reset"]:hover {
    background-color: #005a9e; /* Koyu mavi */
    color: #ffffff;
    transform: translateY(-2px); /* Hafif yukarı kalkma efekti */
}

/* * 2. GENEL FORM GİRİŞ ALANLARI
 * (Arama kutusu, yorum formu, iletişim formu vb. için)
*/
input[type="text"],
input[type="email"],
input[type="url"],
input[type="password"],
input[type="search"],
input[type="tel"],
input[type="number"],
textarea {
    width: 100%;
    padding: 12px 15px;
    font-size: 1rem;
    font-family: 'Inter', sans-serif; /* Ana fontumuzu kullansın */
    color: #333;
    border: 1px solid #dcdcdc;
    border-radius: 8px; /* Düğmelerle aynı köşe yarıçapı */
    background-color: #fdfdfd;
    box-shadow: inset 0 1px 2px rgba(0,0,0,0.05);
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

/* Odaklanma (Focus) durumu */
input[type="text"]:focus,
input[type="email"]:focus,
input[type:"url"]:focus,
input[type="password"]:focus,
input[type="search"]:focus,
input[type="tel"]:focus,
input[type="number"]:focus,
textarea:focus {
    border-color: #0073aa; /* Odaklanınca tema renginde çerçeve */
    box-shadow: 0 0 0 3px rgba(0,115,170,0.15);
    outline: none; /* Varsayılan tarayıcı çerçevesini kaldır */
}

textarea {
    min-height: 150px;
}

/* * 3. FORM ETİKETLERİ VE YAPISI
*/
label {
    display: block;
    font-weight: 500;
    margin-bottom: 8px; /* Etiket ile giriş alanı arası boşluk */
    color: #444;
}

/* WordPress'in varsayılan arama widget'ı için özel stil */
.widget_search form {
    display: flex;
    gap: 5px; /* Arama kutusu ve düğme arası boşluk */
}
.widget_search input[type="search"] {
    flex-grow: 1; /* Arama kutusu tüm alanı kaplasın */
}
.widget_search input[type="submit"] {
    padding: 10px 15px; /* Düğme yanda olacağı için biraz daha küçük */
}

/* WordPress yorum formu için temel boşluklar */
.comment-form p {
    margin-bottom: 20px;
}
.comment-form .comment-form-cookies-consent {
    display: flex;
    align-items: center;
    gap: 10px;
}
.comment-form .comment-form-cookies-consent input {
    width: auto;
}
/* --- 10. TİPOGRAFİ STİLLERİ --- */

/* * 1. TEMEL BODY (GÖVDE) METNİ
 * Paragraflar, listeler ve genel metinler için.
*/
body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    font-size: 17px; /* Okunabilirlik için 16px'den biraz daha büyük */
    line-height: 1.7; /* Satır aralığını artıralım */
    color: #3d3d3d; /* Saf siyahtan daha yumuşak bir renk */
    -webkit-font-smoothing: antialiased; /* Fontları daha pürüzsüz gösterir */
    -moz-osx-font-smoothing: grayscale;
}

p {
    margin-top: 0;
    margin-bottom: 1.5rem; /* Paragraflar arası dikey boşluk */
}

/* * 2. BAŞLIKLAR (H1 - H6 HİYERARŞİSİ)
 * Başlıklar için net boyutlar ve ağırlıklar tanımlar.
*/
h1, h2, h3, h4, h5, h6 {
    font-family: 'Inter', sans-serif;
    font-weight: 700; /* Başlıklar kalın olsun */
    line-height: 1.3;
    color: #1a1a1a; /* Başlıklar için daha koyu bir renk */
    margin: 0 0 1.5rem 0; /* Başlık altı boşluğu */
}

h1, .entry-title {
    font-size: 2.8rem; /* Ana sayfa başlığı veya sayfa başlığı */
    font-weight: 800; /* En belirgin başlık */
}

h2 {
    font-size: 2.2rem;
}

h3, .widget-title {
    font-size: 1.7rem;
}

h4 {
    font-size: 1.3rem;
}

h5 {
    font-size: 1.1rem;
}

h6 {
    font-size: 1rem;
}

/* Tekil gönderilerdeki (sayfa, yazı, merkez vb.)
 * ana başlıklar için özel ayar.
*/
.entry-header .entry-title {
    margin-bottom: 0.5rem; /* Başlık altı boşluğunu azalt */
}

/* * 3. LİNKLER VE DİĞER ELEMANLAR
*/
a {
    color: #0073aa; /* Ana tema rengimiz */
    text-decoration: none;
    transition: color 0.2s ease;
}

a:hover {
    color: #005a9e; /* Hover rengi */
    text-decoration: underline;
}

/* Kalın metin */
strong {
    font-weight: 700;
}

/* Yatay çizgi */
hr {
    border: 0;
    border-top: 1px solid #e0e0e0;
    margin: 2rem 0;
}

/* * 4. İÇERİK (ENTRY-CONTENT) ÖZEL STİLLERİ
 * WordPress editöründen eklenen içeriğin (yazılar, sayfalar)
 * içindeki başlıklar ve listeler için.
*/
.entry-content {
    background-color: #ffffff;
    padding: 30px 40px; /* İçeriğe daha fazla nefes alma alanı */
    border-radius: 12px;
}

/* Yazı/Sayfa içeriğindeki başlıklar */
.entry-content h2 {
    font-size: 1.8rem;
    font-weight: 700;
    margin-top: 2.5rem; /* Başlıktan önce boşluk bırak */
    margin-bottom: 1.5rem;
    border-bottom: 2px solid #f0f0f0; /* İçerik başlıklarını ayır */
    padding-bottom: 10px;
}
.entry-content h3 {
    font-size: 1.5rem;
    font-weight: 600;
    margin-top: 2rem;
}

/* İçerik listeleri */
.entry-content ul,
.entry-content ol {
    margin: 0 0 1.5rem 1.5rem;
    padding-left: 1rem;
}
.entry-content li {
    margin-bottom: 0.5rem;
}
/* --- 11. ANA SAYFA ÖZEL STİLLERİ --- */

/* Ana sayfa içeriği tam genişlikte olsun */
.content-area-full {
    width: 100%;
}

/* Ana sayfa bölümleri (Merkezler, Ekip vb.) */
.homepage-section {
    padding: 60px 0;
    border-bottom: 1px solid #f0f0f0;
}

/* Arka planları farklılaştır (Zebra deseni) */
.homepage-section:nth-child(odd) {
    background-color: #fcfcfc;
}
.homepage-section:nth-child(even) {
    background-color: #ffffff;
}
/* Hero alanı bu kuralın dışında kalsın */
.hero-area {
    background-color: #eaf3f9;
    padding: 40px 0;
}

/* Bölüm Başlıkları (Merkezlerimiz, Ekibimiz) */
.section-title {
    font-size: 2.4rem;
    font-weight: 700;
    color: #222;
    text-align: center;
    margin-bottom: 40px;
    position: relative;
}
/* Başlık altına küçük bir çizgi */
.section-title::after {
    content: '';
    display: block;
    width: 60px;
    height: 3px;
    background-color: #0073aa;
    margin: 15px auto 0 auto;
}

/* "Tümünü Gör" Düğmesi */
.section-cta {
    text-align: center;
    margin-top: 40px;
}
/* --- 12. ANA SAYFA HERO ALANI GÜZELLEŞTİRME --- */

/* front-page.php'deki ana sarmalayıcı */
#hero-area-wrapper {
    /* Daha önce eklediğimiz soluk maviyi, daha güçlü bir renkle veya
       bir görselle değiştirelim. */
    background-color: #005a9e; /* Koyu, güven veren bir mavi */
    
    /* OPSİYONEL: Arka plana bir resim eklemek isterseniz:
       1. "Ortam > Yeni Ekle" ile bir resim yükleyin (örn: hero-bg.jpg).
       2. Resmin URL'sini kopyalayın.
       3. Aşağıdaki satırı aktifleştirin (/* ve */ işaretlerini kaldırın)
       4. 'URL_BURAYA' kısmını kendi resim URL'nizle değiştirin.
    */
    /*
    background-image: linear-gradient(rgba(0, 90, 158, 0.85), rgba(0, 40, 70, 0.95)), url('URL_BURAYA');
    background-size: cover;
    background-position: center center;
    */
    
    color: #ffffff;
    padding: 60px 20px; /* Boşluğu azalttık */
    text-align: center;
    border-bottom: 5px solid #0073aa; /* Altına bir vurgu çizgisi */
}

/* Widget'a eklediğimiz .hero-content'i ortala */
.hero-content {
    max-width: 800px; /* İçerik çok genişlemesin */
    margin: 0 auto;
}

/* Widget'a eklediğimiz başlık */
.hero-title {
    font-size: 3.5rem; /* Çok büyük, etkileyici başlık */
    font-weight: 800;
    color: #ffffff;
    margin-bottom: 20px;
    line-height: 1.2;
}

/* Widget'a eklediğimiz alt başlık */
.hero-tagline {
    font-size: 1.3rem;
    font-weight: 300; /* İnce font */
    color: #e0e0e0;
    margin-bottom: 40px;
    opacity: 0.9;
}

/* Widget'a eklediğimiz düğme */
.hero-button.button {
    background-color: #ffffff; /* Beyaz düğme */
    color: #0073aa; /* Yazı rengi mavi */
    padding: 15px 35px; /* Daha büyük bir düğme */
    font-size: 1.1rem;
    font-weight: 700;
    transform: scale(1.0);
    transition: transform 0.2s ease, background-color 0.2s ease;
}

.hero-button.button:hover {
    background-color: #f0f0f0; /* Hafif kirli beyaz */
    color: #005a9e;
    transform: scale(1.05); /* Hover'da hafifçe büyüsün */
}