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

body {
    background-color: #E5E5E5;
    font-family: 'DM Sans', sans-serif;
}

.main-container {
    width: 100%;
    max-width: 1920px;
    opacity: 1;
    margin: 0 auto;
    position: relative;
    background-color: #FFFFFF;
    overflow: hidden; /* Prevents margin collapse */
}

.header {
    width: 100%;
    max-width: 1920px;
    height: 90px;
    position: fixed; /* Header artık her zaman tepede sabit kalacak */
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(255, 255, 255, 0.95); /* Menü altından geçen içeriklerin hafif görünmesi ama metni bozmaması için hafif şeffaf */
    backdrop-filter: blur(8px); /* Modern cam efekti */
    z-index: 1000;
}

.header-content {
    width: 100%;
    max-width: 1300px;
    height: 100%;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.logo-container {
    width: 264.8860168457031px;
    height: 50.994903564453125px;
    display: flex;
    gap: 8px;
    align-items: center;
    opacity: 1;
    transform: rotate(0deg);
    cursor: pointer;
}

.nav-links {
    height: 30.200000762939453px;
    display: flex;
    gap: 30px;
    opacity: 1;
    transform: rotate(0deg);
    align-items: center;
}

.nav-links a {
    font-family: 'DM Sans', sans-serif;
    font-weight: 500;
    font-size: 16px;
    line-height: 19.2px;
    letter-spacing: 0%;
    vertical-align: middle;
    color: #333333; /* Dark gray/black for nav items */
    text-decoration: none;
    transition: color 0.3s ease; /* Renk değişimi için şık ve yumuşak bir geçiş */
    white-space: nowrap;
}

.nav-links a:hover {
    color: #B39B74; /* Logonun altın/kahve rengi */
}

.header-actions {
    display: flex;
    align-items: center;
    gap: 25px; /* Buton ile dil seçeneği arası mesafe */
}

.lang-switcher {
    position: relative;
    font-family: 'DM Sans', sans-serif;
    font-size: 16px;
    font-weight: 500;
    color: #333333;
    cursor: pointer;
}

.current-lang {
    display: flex;
    align-items: center;
    gap: 6px;
}

.lang-dropdown {
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    background: #FFFFFF;
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
    border-radius: 4px;
    padding: 8px 0;
    margin-top: 15px;
    opacity: 0;
    visibility: hidden;
    transition: all 0.2s ease;
    min-width: 60px;
    text-align: center;
}

.lang-switcher:hover .lang-dropdown,
.lang-switcher.active .lang-dropdown {
    opacity: 1;
    visibility: visible;
    margin-top: 5px;
}

.lang-dropdown a {
    display: block;
    padding: 8px 16px;
    color: #333333;
    text-decoration: none;
    font-size: 15px;
    transition: background 0.2s;
}

.lang-dropdown a:hover {
    background: #F4F4F4;
}

.contact-us-btn {
    width: 140px; /* Slightly reduced from 161.92px */
    height: 40px; /* Slightly reduced from 46px */
    opacity: 1;
    transform: rotate(0deg);
    border-radius: 6px;
    background: #B39B74;
    border: none;
    cursor: pointer;
    position: relative;
    transition: background-color 0.2s;
}

.contact-us-btn:hover {
    background: #a38c67;
}

.contact-text {
    width: 74.26103210449219px;
    height: 16px;
    position: absolute;
    top: 12px; /* Adjusted to vertically center in 40px height */
    left: 16px;
    font-family: 'DM Sans', sans-serif;
    font-weight: 500;
    font-size: 14px;
    line-height: 14px;
    letter-spacing: 0%;
    text-align: center;
    vertical-align: middle;
    color: #FFFFFF;
    opacity: 1;
    transform: rotate(0deg);
}

.contact-arrow {
    position: absolute;
    top: 12px; /* Adjusted to vertically center in 40px height */
    right: 14px; /* Pulled in slightly for smaller button */
}

/* Yeni Eklenenler: Hero Bölümü ve Container */
.hero-section {
    width: 100%;
    max-width: 1920px;
    height: 1030px;
    margin-top: 90px;
    background-image: linear-gradient(180deg, rgba(0, 0, 0, 0.48) 44.71%, rgba(0, 0, 0, 0.8) 100%), url('../assets/images/Background+Overlay.webp');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    position: relative;
    opacity: 1;
}

.container {
    width: 100%;
    max-width: 1920px;
    margin: 0 auto;
    padding: 0 140px; /* Header ile aynı hizalamayı sağlamak için */
    height: 100%;
}

.hero-content {
    display: flex;
    flex-direction: column;
    position: relative;
    height: 100%;
    width: 100%;
}

.hero-text-area {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-top: 250px; 
    width: 100%;
}

.hero-heading {
    width: 100%;
    max-width: 940px;
    font-family: 'DM Sans', sans-serif;
    font-size: 64px; 
    font-weight: 600;
    line-height: 1.2;
    color: #FFFFFF;
    text-align: center;
    margin-bottom: 24px;
}

.hero-subheading {
    width: 100%;
    max-width: 532.61px;
    font-family: 'Satoshi', sans-serif;
    font-weight: 400;
    font-style: normal;
    font-size: 16px;
    line-height: 25.92px;
    letter-spacing: 0%;
    color: #FFFFFF;
    text-align: center;
}

.hero-cards {
    position: absolute;
    top: 754px;
    left: 50%;
    transform: translateX(-50%);
    width: 1300px;
    height: 178px;
    display: flex;
    justify-content: space-between;
}

.card {
    width: 316px;
    height: 178px;
    border-radius: 6px;
    padding: 40px 30px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    gap: 10px;
    cursor: pointer;
    transition: transform 0.2s;
}

.card:hover {
    transform: translateY(-5px);
}

.card-light {
    background: #E6E6E6;
}

.card-gold {
    background: #B39B74;
}

.card-dark {
    background: #323131;
}

.card-title {
    font-family: 'DM Sans', sans-serif;
    font-weight: 700;
    font-size: 24px;
    color: #000000;
}

.card-desc {
    font-family: 'Satoshi', sans-serif;
    font-weight: 400;
    font-style: normal;
    font-size: 16px;
    line-height: 25.92px;
    letter-spacing: 0%;
    color: #333333;
    text-align: left;
    vertical-align: middle;
}

.card-dark .card-title,
.card-dark .card-desc {
    color: #FFFFFF;
}

/* About Section */
.about-section {
    width: 100%;
    max-width: 1920px;
    margin: 0 auto;
    background-color: #FFFFFF;
    padding: 150px 0; 
}

.about-container {
    width: 100%;
    max-width: 1300px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: center; 
}

.about-images {
    position: relative;
    width: 684px; 
    height: 532px; 
}

.img-back {
    width: 568px;
    height: 423px;
    object-fit: cover;
    position: absolute;
    top: 0;
    left: 0;
}

.img-front {
    width: 400px;
    height: 320px;
    object-fit: cover;
    position: absolute;
    right: 0;
    bottom: 0;
    border: 6px solid #FFFFFF;
    box-sizing: content-box;
    box-shadow: 0px 10px 30px rgba(0, 0, 0, 0.05); /* Soft shadow to enhance layering */
}

.about-text {
    width: 584px;
    display: flex;
    flex-direction: column;
    gap: 30px; 
}

.about-heading {
    font-family: 'DM Sans', sans-serif;
    font-size: 44px; 
    font-weight: 700;
    color: #000000;
    line-height: 1.2;
}

.about-paragraph {
    font-family: 'Satoshi', sans-serif;
    font-weight: 400;
    font-size: 16px;
    line-height: 25.92px;
    color: #333333;
}

.about-paragraph p {
    margin-bottom: 20px;
}

.about-paragraph p:last-child {
    margin-bottom: 0;
}

.about-paragraph em {
    font-style: italic;
    font-weight: 600;
}

.btn-discover {
    width: 200px;
    height: 54px;
    background: #B39B74;
    border: none;
    border-radius: 6px;
    font-family: 'DM Sans', sans-serif;
    font-weight: 500;
    font-size: 16px;
    color: #FFFFFF;
    cursor: pointer;
    transition: background-color 0.2s;
    align-self: flex-start;
}

.btn-discover:hover {
    background: #a38c67;
}

/* Services / Collections Section */
.services-section {
    width: 100%;
    background-color: #EFEFEF; /* Light gray background matching the design */
    padding: 120px 0;
}

.services-container {
    width: 100%;
    max-width: 1300px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.services-main-title {
    font-family: 'DM Sans', sans-serif;
    font-size: 48px;
    font-weight: 700;
    color: #333333;
    margin-bottom: 60px;
    text-align: center;
}

.services-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
    width: 100%;
}

.service-card {
    background: #FFFFFF;
    border-radius: 12px;
    padding: 40px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    box-shadow: 0px 10px 30px rgba(0, 0, 0, 0.03);
    transition: transform 0.2s, box-shadow 0.2s;
    height: 100%;
}

.service-card:hover {
    transform: translateY(-5px);
    box-shadow: 0px 15px 40px rgba(0, 0, 0, 0.06);
}

.service-desc {
    font-family: 'Satoshi', sans-serif;
    font-weight: 400;
    font-size: 15px;
    line-height: 1.6;
    color: #666666;
    text-align: left;
    width: 100%;
    margin-bottom: 20px;
}

.service-icon {
    width: auto;
    max-width: 120px;
    height: 120px;
    object-fit: contain;
    margin-bottom: 20px;
}

.service-title {
    font-family: 'DM Sans', sans-serif;
    font-size: 20px;
    font-weight: 700;
    color: #000000;
    text-align: center;
    width: 100%;
}

/* Redefining The Journey Of Fabric Section */
.journey-section {
    width: 100%;
    position: relative;
    /* Dark overlay further lightened to make the background image much more visible */
    background-image: linear-gradient(180deg, rgba(10, 15, 20, 0.15) 0%, rgba(10, 15, 20, 0.45) 100%), url('../assets/images/IMG_1836 1.webp');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    padding: 120px 0;
}

/* Paralaks efektini hızlandırmak için masaüstünde görseli daha büyük yapıyoruz */
@media (min-width: 993px) {
    .journey-section {
        /* Hızın %30 daha yavaşlatılması isteği üzerine 300vw'den 210vw'ye düşürüldü */
        background-size: 210vw auto;
    }
}

/* Mobilde de aynı paralaks ve hızlı hissi vermek için dikeyde büyütüyoruz */
@media (max-width: 992px) {
    .journey-section {
        /* Yükseklik her zaman container'dan %30 daha büyük olsun ki alttan/üstten boşluk kalmasın */
        background-size: auto 130%; 
    }
}

.journey-container {
    width: 100%;
    max-width: 1300px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.journey-logo {
    display: flex;
    gap: 8px;
    height: 60px;
    margin-bottom: 60px;
    /* CSS filter to turn the black logo into the golden color (#B39B74) seen in the design */
    filter: brightness(0) saturate(100%) invert(69%) sepia(31%) saturate(545%) hue-rotate(352deg) brightness(91%) contrast(86%);
}

.journey-logo img {
    height: 100%;
    object-fit: contain;
}

.journey-images-row {
    display: flex;
    justify-content: space-between;
    width: 100%;
    gap: 20px;
    margin-bottom: 80px;
}

.journey-images-row img {
    width: calc(25% - 15px); /* 4 items with 3 gaps of 20px */
    height: 220px;
    object-fit: cover;
    border-radius: 12px;
    box-shadow: 0px 10px 30px rgba(0, 0, 0, 0.5); /* Soft shadow on dark background */
}

/* --- Journey görselleri: yumuşak geliş animasyonu ---
   Gizleme yalnızca "reveal-armed" sınıfı ile devreye girer; bu sınıfı JS ekler.
   Böylece JS çalışmazsa görseller normal şekilde görünür kalır. */
/* Gizlenme anlık olmalı (transition YOK); yoksa sayfa kaydırılmış halde
   yenilendiğinde görseller önce silinip sonra geri gelir. */
.journey-images-row.reveal-armed img {
    opacity: 0;
    transform: translateY(28px);
    transition: none;
}

/* Animasyon yalnızca açılış yönünde çalışır. */
.journey-images-row.reveal-armed.is-revealed img {
    opacity: 1;
    transform: none;
    transition: opacity 1s cubic-bezier(0.22, 0.61, 0.36, 1),
                transform 1s cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* Zincirleme gecikme: soldan sağa sırayla açılır */
.journey-images-row.reveal-armed.is-revealed img:nth-child(1) { transition-delay: 0s; }
.journey-images-row.reveal-armed.is-revealed img:nth-child(2) { transition-delay: 0.12s; }
.journey-images-row.reveal-armed.is-revealed img:nth-child(3) { transition-delay: 0.24s; }
.journey-images-row.reveal-armed.is-revealed img:nth-child(4) { transition-delay: 0.36s; }

/* Hareket azaltma tercihi olan kullanıcılarda animasyon devre dışı */
@media (prefers-reduced-motion: reduce) {
    .journey-images-row img,
    .journey-images-row.reveal-armed img {
        opacity: 1;
        transform: none;
        transition: none;
    }
}

.journey-heading {
    font-family: 'DM Sans', sans-serif;
    font-size: 56px;
    font-weight: 700;
    color: #FFFFFF;
    margin-bottom: 40px;
    text-align: center;
    letter-spacing: 2px; /* Hafif açılmış harf aralığı */
}

.journey-text {
    width: 100%;
    max-width: 1250px; /* Genişletildi ki satırlar kendi içinde kırılsın, ikinci satıra taşmasın */
    text-align: center;
    font-family: 'Satoshi', sans-serif;
    font-weight: 400;
    font-size: 16px;
    line-height: 1.8;
    color: #E0E0E0; /* Slightly off-white for readability against dark background */
    white-space: nowrap; /* Her satırın zorla tek satırda kalmasını garanti altına alır */
}

.journey-text p {
    margin-bottom: 15px;
}

.journey-text p:last-child {
    margin-bottom: 0;
}

/* Stats Section */
.stats-section {
    width: 100%;
    background-color: #B39B74;
    padding: 60px 0;
}

.stats-container {
    width: 100%;
    max-width: 1300px;
    margin: 0 auto;
    display: flex;
    justify-content: center;
    align-items: center;
}

.stat-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    flex: 1;
    text-align: center;
}

.stat-divider {
    width: 1px;
    height: 100px;
    background-color: rgba(255, 255, 255, 0.5);
}

.stat-number {
    font-family: 'DM Sans', sans-serif;
    font-size: 56px;
    font-weight: 300;
    color: #FFFFFF;
    margin-bottom: 10px;
    line-height: 1;
}

.stat-label {
    font-family: 'Satoshi', sans-serif;
    font-size: 16px;
    font-weight: 400;
    color: #FFFFFF;
    line-height: 1.5;
}

/* Contact Section */
.contact-section {
    position: relative;
    z-index: 10; /* Footer görselinin üzerinde kalmasını sağlamak için eklendi */
    width: 100%;
    background-color: #FFFFFF; /* Degrade iptal edildi, orijinal dümdüz beyaz renge dönüldü */
    padding: 120px 0 40px 0; /* Alttaki boşluk tamamen sıfırlandı */
}

.contact-container {
    width: 100%;
    max-width: 1300px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
}

.contact-main-heading {
    font-family: 'DM Sans', sans-serif;
    font-size: 56px;
    font-weight: 700;
    color: #333333;
    text-align: center;
    margin-bottom: 80px;
    line-height: 1.2;
}

.contact-content {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
}

.contact-info {
    width: 32%; /* Genişleyen iletişim kutusuna yer açmak için daraltıldı */
    padding-top: 20px;
}

.contact-title {
    font-family: 'DM Sans', sans-serif;
    font-size: 28px;
    font-weight: 700;
    color: #000000;
    margin-bottom: 40px;
}

.contact-details p {
    font-family: 'Satoshi', sans-serif;
    font-size: 16px;
    color: #666666;
    line-height: 1.8;
    margin-bottom: 30px;
}

.contact-details p:last-child {
    margin-bottom: 0;
}

.contact-form-wrapper {
    width: 63%; /* İletişim kutusu enine doğru genişletildi */
    background-color: #F8F8F8;
    padding: 25px; /* Gri çerçeve daha ince görünsün diye iç boşluk azaltıldı */
    border-radius: 4px;
}

.contact-form {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.form-row {
    display: flex;
    gap: 20px;
}

.input-group {
    position: relative;
    width: 100%;
}

.input-group input,
.input-group textarea {
    width: 100%;
    background-color: #FFFFFF;
    border: none;
    border-radius: 4px;
    padding: 18px 45px 18px 20px;
    font-family: 'Satoshi', sans-serif;
    font-size: 15px;
    color: #333333;
    outline: none;
    box-sizing: border-box;
}

.input-group input::placeholder,
.input-group textarea::placeholder {
    color: #999999;
}

.input-group textarea {
    resize: vertical;
    min-height: 120px;
}

.input-icon {
    position: absolute;
    right: 15px;
    top: 18px;
    width: 20px;
    height: 20px;
    color: #999999;
    pointer-events: none;
}

.btn-send {
    width: 100%;
    background-color: #B39B74;
    color: #FFFFFF;
    border: none;
    border-radius: 4px;
    padding: 18px;
    font-family: 'DM Sans', sans-serif;
    font-size: 16px;
    font-weight: 500;
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
    transition: background-color 0.2s;
}

.btn-send:hover {
    background-color: #a38c67;
}

.btn-send svg {
    width: 20px;
    height: 20px;
}

/* Footer Wrapper */
.footer-wrapper {
    position: relative;
    z-index: 20; /* İletişim katmanının üzerine alındı */
    width: 100%;
    margin-top: -40px; /* Görseli biraz daha aşağıya kaydırdık */
}

/* Footer Image Container */
.footer-image-only {
    position: relative;
    width: 100%;
    /* Siyaha geçiş kısmı biraz daha yukarıya çekildi */
    background: linear-gradient(to bottom, #FFFFFF 0%, #FFFFFF 5%, transparent 15%, transparent 25%, #000000 45%, #000000 100%);
}

.footer-black-space {
    width: 100%;
    height: 200px; /* En alttaki gereksiz boşluk silinerek alan daraltıldı */
    background-color: #000000;
}

.footer-map-overlay {
    position: absolute;
    bottom: 0; /* Siyah alan daraltıldığı için alt değere sıfırlandı, konumu aynı kaldı */
    left: 0;
    width: 100%;
    height: 400px; /* Haritanın boyutu sabitlendi, bozulmaz */
    background-image: url('../assets/images/7c6d3e50a1669157474a9b085bbdeb0025b3f9ed (1).webp');
    background-size: contain; /* Haritanın tamamının görünmesi için */
    background-position: center bottom;
    background-repeat: no-repeat;
    opacity: 0.40; /* Opaklık daha da düşürüldü */
    z-index: 2;
    pointer-events: none;
}

.footer-container {
    position: absolute;
    bottom: 140px; /* Alttaki boşluk silinmesine rağmen 1 satır daha yukarı kaldırıldı */
    z-index: 3;
    width: 100%;
    max-width: 1300px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
}

.footer-brand {
    display: flex;
    flex-direction: column;
    height: 100%;
    justify-content: space-between;
}

.footer-logo {
    display: flex;
    gap: 8px;
    height: 50px;
    /* CSS filter to turn the black logo into the golden color (#B39B74) */
    filter: brightness(0) saturate(100%) invert(69%) sepia(31%) saturate(545%) hue-rotate(352deg) brightness(91%) contrast(86%);
    margin-bottom: 120px;
}

.footer-logo img {
    height: 100%;
    object-fit: contain;
}

.footer-slogan {
    font-family: 'DM Sans', sans-serif;
    font-size: 16px;
    font-weight: 500;
    color: #B39B74;
}

.footer-heading {
    font-family: 'DM Sans', sans-serif;
    font-size: 16px;
    font-weight: 700;
    color: #B39B74;
    margin-bottom: 30px;
}

.footer-menu, .footer-address, .footer-contact {
    display: flex;
    flex-direction: column;
}

.footer-links {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.footer-links a {
    text-decoration: none;
    font-family: 'Satoshi', sans-serif;
    font-size: 14px;
    color: #FFFFFF;
    transition: color 0.2s;
}

.footer-links a:hover {
    color: #B39B74;
}

.footer-address p, .footer-contact p {
    font-family: 'Satoshi', sans-serif;
    font-size: 14px;
    color: #FFFFFF;
    line-height: 1.8;
    margin: 0;
}

.social-heading {
    margin-top: 40px;
}

.footer-socials {
    display: flex;
    gap: 20px;
}

.footer-socials a {
    color: #FFFFFF;
    transition: color 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
}

.footer-socials a:hover {
    color: #B39B74;
}

.footer-socials svg {
    width: 20px;
    height: 20px;
}

/* ========================================= */
/* MOBİL UYUMLULUK (Responsive Design)        */
/* Masaüstü (992px üstü) HİÇ etkilenmeyecek.  */
/* ========================================= */

/* Hide mobile elements on desktop by default */
.hamburger-menu, .mobile-nav-overlay {
    display: none;
}

@media (max-width: 992px) {
    /* --- GLOBAL & TYPOGRAPHY --- */
    body, html {
        overflow-x: hidden;
        width: 100%;
    }
    
    .main-container {
        overflow-x: hidden;
        width: 100%;
        max-width: 100vw;
    }

    .hamburger-menu {
        display: flex !important; /* Forces it to show if overridden */
    }

    /* --- HEADER (Hamburger Menu & Logo) --- */
    .header {
        padding: 0 20px;
    }
    
    .header-content {
        padding: 0;
    }
    
    .logo-container {
        width: auto;
        height: 35px; /* Logo mobilde çok büyük durmasın diye küçültüldü */
    }

    .nav-links, .contact-btn-desktop {
        display: none !important;
    }

    .hamburger-menu {
        display: flex;
        flex-direction: column;
        gap: 5px;
        cursor: pointer;
        z-index: 2000;
        margin-left: auto; /* Push it to the far right if there is space */
    }
    
    .hamburger-menu span {
        display: block;
        width: 25px;
        height: 3px;
        background: #000;
        border-radius: 3px;
        transition: all 0.3s ease;
    }

    .hamburger-menu.active span:nth-child(1) {
        transform: rotate(45deg) translate(5.5px, 5.5px);
    }
    .hamburger-menu.active span:nth-child(2) {
        opacity: 0;
    }
    .hamburger-menu.active span:nth-child(3) {
        transform: rotate(-45deg) translate(5.5px, -5.5px);
    }

    .mobile-nav-overlay {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100vh;
        background: rgba(0, 0, 0, 0.6); /* Ekranı karartan yarı saydam arka plan */
        z-index: 1500;
        display: flex;
        justify-content: flex-end; /* İçeriği sağa yasla */
        opacity: 0;
        visibility: hidden;
        transition: all 0.3s ease;
    }

    .mobile-nav-overlay.active {
        opacity: 1;
        visibility: visible;
    }

    .mobile-nav-links {
        width: 75%;
        max-width: 320px;
        height: 100vh;
        background-color: rgba(255, 255, 255, 0.85); /* Hafif şeffaf beyaz */
        backdrop-filter: blur(10px); /* Ekstra şıklık için cam efekti (destekleyen cihazlar için) */
        -webkit-backdrop-filter: blur(10px);
        box-shadow: -5px 0 15px rgba(0,0,0,0.1);
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        padding: 30px 30px 40px 30px; /* Üstteki 100px boşluğu 30px'e çektik, böylece logo X ile hizalanacak */
        gap: 25px;
        transform: translateX(100%); /* Sağda ekran dışında bekle */
        transition: transform 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
        text-align: left;
        overflow-y: auto; /* Dikey kaydırmaya izin ver */
        -ms-overflow-style: none; /* IE and Edge için scrollbar gizleme */
        scrollbar-width: none; /* Firefox için scrollbar gizleme */
    }

    .mobile-nav-links::-webkit-scrollbar {
        display: none; /* Chrome, Safari and Opera için scrollbar gizleme */
    }

    .mobile-nav-overlay.active .mobile-nav-links {
        transform: translateX(0); /* Menü açıldığında içeri kayar */
    }
    
    .mobile-nav-links a {
        font-family: 'DM Sans', sans-serif;
        font-size: 20px;
        font-weight: 500;
        color: #333;
        text-decoration: none;
        border-bottom: 1px solid #F0F0F0;
        padding-bottom: 15px;
    }

    body.no-scroll {
        overflow: hidden;
    }

    /* --- COMMON HERO SECTIONS (Collections, Woven, About, etc.) --- */
    /* Make the content below hero start at exactly the same distance on all pages */
    .collections-grid-wrapper, 
    .woven-grid-wrapper, 
    .ap-content-section, 
    .sust-content-section, 
    .know-how-content-section, 
    .contact-section, 
    .product-detail-body {
        margin-top: 120px !important;
        padding-top: 0 !important;
    }
    
    .cert-main-title {
        margin-top: 120px !important;
        padding-top: 0 !important;
    }
    
    .collections-hero, .woven-hero, .about-hero, .sustainability-hero, .know-how-hero, .certificates-hero, .contact-hero, .product-detail-hero {
        height: 500px !important;
    }
    
    .collections-hero-content, .woven-hero-content, .about-hero-content, .sustainability-hero-content, .know-how-hero-content, .certificates-hero-content, .contact-hero-content, .product-detail-hero-content {
        justify-content: center;
        align-items: center;
        padding: 0 20px;
    }
    
    .collections-hero-title, .woven-hero-title, .about-hero-title, .sustainability-hero-title, .know-how-hero-title, .certificates-hero-title, .contact-hero-title, .product-detail-hero-title {
        position: relative !important;
        top: 0 !important;
        left: 0 !important;
        width: 100% !important;
        height: auto !important;
        font-size: 36px !important;
        line-height: 1.2 !important;
        text-align: center !important;
        justify-content: center;
        margin-top: 0 !important;
    }

    .collections-hero-breadcrumbs, .woven-hero-breadcrumbs, .about-hero-breadcrumbs, .sustainability-hero-breadcrumbs, .know-how-hero-breadcrumbs, .certificates-hero-breadcrumbs, .contact-hero-breadcrumbs, .product-detail-hero-breadcrumbs {
        position: absolute !important;
        top: unset !important;
        bottom: 40px !important;
        left: 20px !important; /* Sol tarafa (resmin soluna) yaslandı */
        transform: none !important; /* Ortalama iptal edildi */
        width: calc(100% - 40px) !important;
        justify-content: flex-start !important; /* Sola hizalama */
    }
    
    .collections-hero-breadcrumbs a, .woven-hero-breadcrumbs a, .about-hero-breadcrumbs a, .sustainability-hero-breadcrumbs a, .know-how-hero-breadcrumbs a, .certificates-hero-breadcrumbs a, .contact-hero-breadcrumbs a, .product-detail-hero-breadcrumbs a,
    .collections-hero-breadcrumbs span, .woven-hero-breadcrumbs span, .about-hero-breadcrumbs span, .sustainability-hero-breadcrumbs span, .know-how-hero-breadcrumbs span, .certificates-hero-breadcrumbs span, .contact-hero-breadcrumbs span, .product-detail-hero-breadcrumbs span {
        font-size: 13px !important; /* Metin boyutları küçültüldü */
    }
    
    .collections-hero-breadcrumbs .separator svg, .woven-hero-breadcrumbs .separator svg, .about-hero-breadcrumbs .separator svg, .sustainability-hero-breadcrumbs .separator svg, .know-how-hero-breadcrumbs .separator svg, .certificates-hero-breadcrumbs .separator svg, .contact-hero-breadcrumbs .separator svg, .product-detail-hero-breadcrumbs .separator svg {
        width: 5px !important; /* Araya konulan ok simgeleri küçültüldü */
        height: auto !important;
    }

    /* Mobilde kırıntı menüsü (Ana Sayfa > Koleksiyonlar > ...) uzun olduğunda
       ikinci satıra taşıp üstteki başlığın üzerine biniyordu. Artık tek satırda
       kalıyor; sığmazsa yalnızca son öğe (sayfa/ürün adı) "…" ile kısalıyor. */
    .collections-hero-breadcrumbs, .woven-hero-breadcrumbs, .about-hero-breadcrumbs, .sustainability-hero-breadcrumbs, .know-how-hero-breadcrumbs, .certificates-hero-breadcrumbs, .contact-hero-breadcrumbs, .product-detail-hero-breadcrumbs {
        flex-wrap: nowrap !important;
        overflow: hidden;
    }

    .collections-hero-breadcrumbs > a, .woven-hero-breadcrumbs > a, .about-hero-breadcrumbs > a, .sustainability-hero-breadcrumbs > a, .know-how-hero-breadcrumbs > a, .certificates-hero-breadcrumbs > a, .contact-hero-breadcrumbs > a, .product-detail-hero-breadcrumbs > a,
    .collections-hero-breadcrumbs > .separator, .woven-hero-breadcrumbs > .separator, .about-hero-breadcrumbs > .separator, .sustainability-hero-breadcrumbs > .separator, .know-how-hero-breadcrumbs > .separator, .certificates-hero-breadcrumbs > .separator, .contact-hero-breadcrumbs > .separator, .product-detail-hero-breadcrumbs > .separator {
        flex-shrink: 0;
        white-space: nowrap;
    }

    .collections-hero-breadcrumbs > span:last-child, .woven-hero-breadcrumbs > span:last-child, .about-hero-breadcrumbs > span:last-child, .sustainability-hero-breadcrumbs > span:last-child, .know-how-hero-breadcrumbs > span:last-child, .certificates-hero-breadcrumbs > span:last-child, .contact-hero-breadcrumbs > span:last-child, .product-detail-hero-breadcrumbs > span:last-child {
        min-width: 0;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
    }

    /* --- INDEX PAGE --- */
    .container {
        padding: 0 20px !important;
    }
    .hero-section {
        height: auto;
        min-height: 600px;
        padding-top: 90px;
        padding-bottom: 40px;
    }
    .hero-text-area {
        padding-top: 40px;
    }
    .hero-heading {
        font-size: 32px;
        padding: 0;
    }
    .hero-subheading {
        font-size: 14px;
        padding: 0;
        margin-top: 15px;
    }
    .hero-cards {
        position: static;
        transform: none;
        width: 100%;
        height: auto;
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 12px;
        padding: 0;
        margin-top: 40px;
    }
    .card {
        width: 100%;
        height: 140px; /* Sabit bir yükseklik verip daha kibar gösterdik */
        padding: 15px;
        gap: 5px;
        justify-content: center;
        align-items: center;
        text-align: center;
    }
    .card-title {
        font-size: 16px !important;
        line-height: 1.2;
    }
    .card-desc {
        font-size: 12px !important;
        line-height: 1.4;
        text-align: center !important;
    }
    .about-container {
        flex-direction: column-reverse;
        padding: 0 20px;
        gap: 40px;
    }
    .about-images, .about-text {
        width: 100%;
        height: auto;
    }
    .img-back {
        width: 100%;
        height: auto;
        position: relative;
    }
    .img-front {
        width: 60%;
        height: auto;
        bottom: -20px;
        right: -10px;
    }
    .about-heading {
        font-size: 32px;
    }
    .services-section {
        padding: 60px 20px;
    }
    .services-main-title {
        font-size: 32px;
        margin-bottom: 40px;
        padding: 0;
    }
    .services-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 15px;
        padding: 0;
    }
    .service-card {
        height: 160px;
        padding: 15px;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        text-align: center;
        gap: 10px;
    }
    .service-icon {
        width: 55px; /* İkonlar belirginleşsin diye büyütüldü (40px -> 55px) */
        height: 55px;
        margin-bottom: 5px;
        position: static;
        top: auto;
    }
    .service-title {
        font-size: 14px;
        position: static;
        bottom: auto;
        left: auto;
    }
    .service-desc {
        display: none; /* Mobilde uzun yazıları gizleyerek kutuları şık ve minimal ikon-başlık formatına çevirdik */
    }
    .journey-images-row {
        flex-wrap: wrap;
        padding: 0;
    }
    .journey-images-row img {
        width: calc(50% - 10px);
        margin-bottom: 10px;
    }
    .journey-heading {
        font-size: 32px;
        padding: 0 20px;
        line-height: 1.2;
    }
    .journey-text {
        padding: 0;
        white-space: normal !important;
    }
    .stats-section {
        padding: 40px 20px;
    }
    .stats-container {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 30px 15px; /* Dikey boşluk 30px, yatay boşluk 15px */
    }
    .stat-divider {
        display: none !important;
    }
    .stat-item {
        width: 100%;
        flex: none;
        align-items: center;
        justify-content: flex-start; /* İçerikleri yukarıya hizala */
    }
    .stat-number {
        font-size: 32px; /* Kaba durmaması için boyut küçültüldü */
        margin-bottom: 5px;
    }
    .stat-label {
        font-size: 13px; /* Mobilde alt alta yan yana 2'li sığsın diye küçültüldü */
        line-height: 1.4;
    }
    
    .contact-section {
        padding-top: 60px;
    }
    .contact-main-heading {
        font-size: 36px;
        margin-bottom: 40px;
    }
    .contact-content {
        flex-direction: column;
        padding: 0 20px;
        gap: 40px;
    }
    .contact-info {
        width: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
        text-align: center;
    }
    .contact-title {
        text-align: center;
    }
    .contact-form-wrapper {
        width: 100%;
    }
    .form-row {
        flex-direction: column;
    }

    /* --- COLLECTIONS & WOVEN --- */
    .collections-grid-container, .woven-grid-container {
        grid-template-columns: 1fr !important;
        padding: 0 20px;
    }
    .woven-grid-wrapper {
        padding: 60px 0;
    }
    
    /* Woven Product Cards Mobile Fix */
    .woven-product-card {
        height: auto;
        flex-direction: column;
        padding: 20px;
        gap: 20px;
    }
    .woven-product-image {
        width: 100%;
        height: auto;
        aspect-ratio: 1 / 1;
    }
    .woven-product-content {
        width: 100%;
        height: auto;
        padding-left: 0;
        gap: 20px;
    }
    .woven-product-features {
        grid-template-columns: 1fr;
    }
    
    /* --- PRODUCT DETAIL --- */
    .pd-overview-container {
        flex-direction: column;
        padding: 0 20px;
        gap: 30px;
    }
    .pd-image-col, .pd-text-col {
        width: 100%;
    }
    .pd-main-img {
        height: auto;
    }
    .pd-features-container {
        padding: 0 20px;
    }
    .pd-features-grid {
        grid-template-columns: 1fr;
    }
    .pd-specs-container {
        padding: 0 20px;
    }
    .pd-table {
        display: block;
        overflow-x: auto;
        white-space: nowrap;
    }
    .pd-related-container {
        padding: 0 20px;
    }
    .pd-related-grid {
        grid-template-columns: 1fr;
    }

    /* --- ABOUT PAGE (Internal) --- */
    .ap-content-section {
        flex-direction: column;
        padding: 0 20px;
        gap: 40px;
    }
    .ap-text-column, .ap-image-column, .ap-video-column {
        width: 100%;
        height: auto;
    }
    .ap-img-back, .ap-img-front, .ap-video-placeholder {
        width: 100%;
        position: static;
        height: auto;
        margin-bottom: 20px;
    }
    .ap-img-front {
        display: none; /* Hide second floating image to save space */
    }
    .ap-mission-vision {
        padding: 0 20px;
        flex-direction: column;
        gap: 40px;
    }
    .ap-mv-col {
        width: 100%;
    }

    /* --- CERTIFICATES --- */
    .cert-main-title {
        font-size: 32px;
        line-height: normal;
        padding: 40px 0;
        margin-top: 40px;
    }
    .cert-item {
        padding: 20px;
    }

    /* --- COMMON SPACING BELOW HERO (MOBILE) --- */
    .collections-grid-wrapper, 
    .woven-grid-wrapper, 
    .ap-content-section, 
    .sust-content-section, 
    .know-how-content-section, 
    .contact-section, 
    .product-detail-body {
        margin-top: 40px !important;
        padding-top: 0 !important;
    }
    
    .cert-main-title {
        margin-top: 40px !important;
        padding-top: 0 !important;
    }

    /* --- FOOTER --- */
    .footer-menu {
        display: none !important; /* Sadece mobilde gizlendi */
    }
    .footer-container {
        flex-direction: column;
        align-items: center;
        text-align: center;
        gap: 40px;
        padding: 0 20px;
        bottom: 20px; /* Reduced from 140px to sit lower */
        height: auto;
    }
    .footer-brand {
        align-items: center;
    }
    .footer-logo {
        margin-bottom: 20px;
    }
    .footer-map-overlay {
        background-size: cover;
    }
    .footer-black-space {
        height: 650px; /* Space for the stacked elements */
    }
    .footer-links {
        align-items: center;
    }
    
    /* Global Adjustments to hide default hamburger icon visibility if any */
    .hamburger-menu {
        display: flex;
    }
}


/* ------------------------------------------------------------------
   WhatsApp İletişim Butonu (sabit, sağ alt köşe)
   Sadece genel sayfalarda görünür: yönetim paneli footer.php'yi dahil etmez.
   z-index 900 -> mobil menü (1500) ve header (1000) üstte kalır.
   ------------------------------------------------------------------ */
.whatsapp-float {
    position: fixed;
    right: 24px;
    bottom: 24px;
    z-index: 900;
    width: 58px;
    height: 58px;
    border-radius: 50%;
    background-color: #25D366;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.28);
    transition: transform 0.25s ease, box-shadow 0.25s ease;
    -webkit-tap-highlight-color: transparent;
}

.whatsapp-float:hover,
.whatsapp-float:focus-visible {
    transform: translateY(-3px) scale(1.04);
    box-shadow: 0 10px 26px rgba(0, 0, 0, 0.35);
}

.whatsapp-float:focus-visible {
    outline: 3px solid #FFFFFF;
    outline-offset: 3px;
}

.whatsapp-float svg {
    width: 32px;
    height: 32px;
    fill: #FFFFFF;
    display: block;
}

@media (max-width: 992px) {
    .whatsapp-float {
        right: 16px;
        bottom: 16px;
        width: 52px;
        height: 52px;
    }
    .whatsapp-float svg {
        width: 28px;
        height: 28px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .whatsapp-float {
        transition: none;
    }
    .whatsapp-float:hover,
    .whatsapp-float:focus-visible {
        transform: none;
    }
}

/* ------------------------------------------------------------------
   Dar masaüstü ekranlarda içerik kenarlara yapışmasın.
   Sayfa yerleşimi 1300px'lik ortalanmış kutulara dayanıyor; ekran bunun
   altına düştüğünde (ör. Windows %150 ölçekli 1920px ekran = ~1280px)
   yanlarda hiç boşluk kalmıyor ve yazılar kenarda kesik duruyordu.

   Yalnızca 993-1350px aralığında çalışır:
   - 1350px üstü  -> hiçbir şey değişmez, mevcut görünüm birebir korunur
   - 992px altı   -> mobil kuralları geçerli, onlara dokunulmaz
   ------------------------------------------------------------------ */
@media (min-width: 993px) and (max-width: 1350px) {
    .header-content,
    .about-container,
    .services-container,
    .journey-container,
    .stats-container,
    .contact-container,
    .footer-container,
    .about-hero-content,
    .about-content-section,
    .mission-vision-container,
    .collections-hero-content,
    .collections-grid-container,
    .woven-hero-content,
    .woven-products-container,
    .product-detail-hero-content,
    .product-overview-container,
    .fabric-specs-wrapper,
    .related-products-wrapper,
    .certificates-hero-content,
    .cert-container,
    .contact-hero-content,
    .offices-section,
    .sustainability-hero-content,
    .sust-content-section,
    .know-how-hero-content,
    .kh-content-section {
        padding-left: 40px;
        padding-right: 40px;
    }

    /* Hero başlıkları ve kırıntı menüleri mutlak konumlu olduğu için üstteki
       boşluğu görmezler; onları ayrıca kaydırıyoruz ki metinle aynı hizada dursun. */
    body .about-hero-title,
    body .about-hero-breadcrumbs,
    body .collections-hero-title,
    body .collections-hero-breadcrumbs,
    body .woven-hero-title,
    body .woven-hero-breadcrumbs,
    body .product-detail-hero-title,
    body .product-detail-hero-breadcrumbs,
    body .certificates-hero-title,
    body .certificates-hero-breadcrumbs,
    body .contact-hero-title,
    body .contact-hero-breadcrumbs,
    body .sustainability-hero-title,
    body .sustainability-hero-breadcrumbs,
    body .know-how-hero-title,
    body .know-how-hero-breadcrumbs {
        left: 40px;
    }
}

/* ------------------------------------------------------------------
   Ürün sayfalarında (kategori listeleri + ürün detayı) footer görünümü.
   Footer dosyası tüm sitede TEK ve ortaktır; burada yalnızca gövdedeki
   "urun-sayfasi" sınıfına bağlı olarak görünümü değişir. Yönetim paneli
   header/footer kullanmadığı için etkilenmez.
   ------------------------------------------------------------------ */
body.urun-sayfasi .footer-image-only {
    /* Beyazdan siyaha yumuşak geçiş yerine doğrudan siyah.
       Görselin oranı kadar yer kaplamasına gerek yok; siyah alan
       yalnızca footer içeriği + harita için gereken kadar.
       240 + 200 (siyah şerit) = 440px  →  içerik 216px, alttan 140px. */
    background: #000000;
    height: 240px;
    padding-top: 0;
}

body.urun-sayfasi .footer-image-only img {
    /* Dekoratif footer fotoğrafı bu sayfalarda gösterilmiyor; indirilmesin de.
       !important şart: görselin kendi etiketinde satır içi "display: block" var. */
    display: none !important;
}

body.urun-sayfasi .footer-wrapper {
    /* Geçiş kalktığı için üstteki bölümün üzerine binmesine gerek yok */
    margin-top: 0;
}

@media (max-width: 992px) {
    body.urun-sayfasi .footer-image-only {
        /* Mobilde footer içeriği alt alta dizildiği için siyah şerit zaten 650px;
           üstte ek boşluğa gerek yok. */
        height: 40px;
    }
}

/* ------------------------------------------------------------------
   Aşağı kaydırma ipucu (yalnızca masaüstü)
   Sayfa ilk açıldığında ekranın alt ortasında yukarı-aşağı hareket eden
   bir ok gösterilir; kullanıcı kaydırmaya başlayınca kaybolur.
   ------------------------------------------------------------------ */
.scroll-ipucu {
    position: fixed;
    left: 50%;
    /* Ana sayfada hero kartları ekranın altına yakın durduğu için ok biraz
       daha aşağıda: kartların üzerine binmesin, koyu zeminde kalsın. */
    bottom: 12px;
    transform: translateX(-50%);
    z-index: 850; /* WhatsApp butonu (900) ve header (1000) üstte kalır */
    pointer-events: none; /* Tıklamayı engellemesin */
    opacity: 0;
    transition: opacity 0.45s ease;
}

.scroll-ipucu.gorunur {
    opacity: 1;
}

/* Okun arkasındaki yumuşak hale.
   Kenarı yok, tam bir daire gibi görünmez; koyu fotoğraf üzerinde fark
   edilmez, beyaz/açık zeminde (iç sayfalar, açık renkli kart) oku
   ortaya çıkarır. Ok aşağı-yukarı hareket ederken hale sabit kalır,
   bu yüzden okun hareket alanından geniş tutuldu. */
.scroll-ipucu::before {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    width: 64px;
    height: 64px;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    background: radial-gradient(circle,
        rgba(0, 0, 0, 0.34) 0%,
        rgba(0, 0, 0, 0.20) 42%,
        rgba(0, 0, 0, 0) 72%);
    pointer-events: none;
}

.scroll-ipucu svg {
    display: block;
    width: 28px;
    height: 28px;
    color: #FFFFFF;
    /* Çizgi bir tık kalın: uzaktan da okunur, ama hâlâ ince bir ok. */
    stroke-width: 2.25;
    /* İki katmanlı gölge: içteki sert gölge oku her zeminde (açık kart,
       altın kart, açık fotoğraf) çevreleyip ayırır, dıştaki yumuşak gölge
       sert bir kontur gibi görünmesini engeller. */
    filter:
        drop-shadow(0 1px 2px rgba(0, 0, 0, 0.90))
        drop-shadow(0 4px 10px rgba(0, 0, 0, 0.55));
    animation: orbeyKaydirmaOku 1.7s ease-in-out infinite;
}

@keyframes orbeyKaydirmaOku {
    /* Hareket payı 10px'ten 6px'e indi: ok ekranın alt kenarına daha
       yakın durduğu için aşağı inerken dışarı taşmasın. */
    0%, 100% { transform: translateY(0); opacity: 0.95; }
    50%      { transform: translateY(6px); opacity: 1; }
}

/* Mobilde ve tablette gösterilmez */
@media (max-width: 992px) {
    .scroll-ipucu {
        display: none !important;
    }
}

@media (prefers-reduced-motion: reduce) {
    .scroll-ipucu svg {
        animation: none;
    }
}

/* ------------------------------------------------------------------
   Hero başlıkları: tüm sayfalarda ana sayfadaki ile aynı tipografi.
   Sayfaların kendi <style> blokları bu dosyadan sonra geldiği için
   seçiciler "body" ile güçlendirildi.

   Punto bilerek verilmedi: ana sayfa ve iç sayfalar 64px kalır,
   ürün detayında kısaltılmış hero için ayarlanan 30px korunur.
   ------------------------------------------------------------------ */
body .collections-hero-title,
body .about-hero-title,
body .sustainability-hero-title,
body .know-how-hero-title,
body .certificates-hero-title,
body .contact-hero-title,
body .woven-hero-title,
body .product-detail-hero-title {
    font-family: 'Satoshi', sans-serif; /* Başlıklarda Satoshi */
    font-weight: 700;                   /* Satoshi'de 600 yok */
    line-height: 1.2;                   /* iç sayfalarda 73.6px idi */
    letter-spacing: normal;             /* iç sayfalarda -1.28px idi */
    text-transform: none;               /* iç sayfalarda capitalize idi */
}

/* ------------------------------------------------------------------
   Başlıklarda Satoshi kullanılır (gövde metni, menü ve butonlar DM Sans).
   Satoshi'de 600 kalınlık yoktur (300/400/500/700/900), bu yüzden
   başlıklar 700 olarak yazılır; tarayıcı zaten 600'ü 700'e yuvarlıyordu.
   Sayfaların kendi <style> blokları bu dosyadan sonra geldiği için
   seçiciler "body" ile güçlendirildi.
   ------------------------------------------------------------------ */
body .hero-heading,
body .services-main-title,
body .service-title,
body .about-heading,
body .journey-heading,
body .contact-main-heading,
body .contact-title,
body .card-title,
body .footer-heading,
body .category-card h3,
body .woven-product-title {
    font-family: 'Satoshi', sans-serif;
}

body .hero-heading {
    font-weight: 700; /* Satoshi'de 600 yok */
}

/* ------------------------------------------------------------------
   ANA SAYFA HERO — ilk açılışta alttaki 4 kart da ekrana sığsın.
   Yalnızca masaüstünde (993px ve üzeri) geçerlidir; 992px altındaki
   mobil/tablet kuralları olduğu gibi kalır. .hero-section sınıfı
   sadece index.php'de kullanıldığı için başka sayfa etkilenmez.

   Ekran yüksekliği 1120px ve üzerindeyse ölçüler eskisiyle BİREBİR
   aynıdır (bölüm 1030px, metin üst boşluğu 250px, kartlar 754px'te).
   Ekran kısaldıkça metin yukarı çekilir ve kartlar alt kenara
   yaklaşır. Yatay ölçülere (genişlik, yan boşluklar) dokunulmaz.
   ------------------------------------------------------------------ */
@media (min-width: 993px) {
    .hero-section {
        /* 90px = üstteki sabit header payı */
        height: min(1030px, calc(100vh - 90px));
        min-height: 620px;
    }

    .hero-text-area {
        /* 1120px+ ekranda 250px (eski değer), kısaldıkça 56px'e kadar iner */
        padding-top: clamp(56px, calc(44.3vh - 246px), 250px);
    }

    .hero-cards {
        /* Üstten sabit 754px yerine alt kenara sabitlenir; böylece bölüm
           kısaldığında kartlar ekranın dışında kalmaz. En düşük 64px:
           altta kalan boşluk, aşağı kaydırma okuna yer bırakır. (Kartlar
           178'den 164 piksele indiği için bu pay biraz büyütüldü; 50px'te
           kısa ekranlarda ok kartların alt kenarına değiyordu.) */
        top: auto;
        bottom: clamp(64px, calc(19.5vh - 120px), 98px);
    }
}

/* Dar (1100px altı) VE kısa (800px altı) masaüstü pencerelerde hero başlığı
   4 satıra taşıp kartların üzerine biniyordu; yalnızca bu dar aralıkta
   bir punto küçültülür. Yaygın boyutlar (1366x768, 1600x900, 1920x1080)
   bu koşula girmediği için 64px olarak kalır. */
@media (min-width: 993px) and (max-width: 1100px) and (max-height: 800px) {
    .hero-heading {
        font-size: 48px;
    }
}