:root {
    --logo-dark-blue: #0047b3; 
    --logo-light-blue: #009ce4; 
    --glass-bg: rgba(255, 255, 255, 0.45); 
    --text-color: #0b2b5e; 
    --hover-color: #009ce4;
}

* { margin: 0; padding: 0; box-sizing: border-box; font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; }

/* ====================================================
   HEADER & KAPSAYICI
   ==================================================== */
.premium-glass-header { 
    position: absolute; top: 30px; left: 0; right: 0; z-index: 900; 
    padding: 0 40px; display: flex; justify-content: center; 
}

.header-container { 
    width: 100%; max-width: 1500px; position: relative; 
    background: var(--glass-bg); 
    backdrop-filter: blur(20px) saturate(160%); 
    -webkit-backdrop-filter: blur(20px) saturate(160%); 
    border-radius: 24px; 
    box-shadow: 0 15px 35px rgba(0,0,0,0.1), inset 0 0 15px rgba(255,255,255,0.3); 
    display: flex; justify-content: space-between; align-items: center; 
    padding: 12px 30px; 
}

.header-container::before { 
    content: ''; position: absolute; inset: 0; border-radius: 24px; padding: 1px; 
    background: linear-gradient(90deg, transparent 0%, transparent 45%, var(--logo-light-blue) 50%, transparent 55%, transparent 100%); 
    background-size: 300% 100%; opacity: 0.8; 
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); 
    -webkit-mask-composite: xor; mask-composite: exclude; 
    animation: borderTravel 5s ease-in-out infinite; pointer-events: none; 
}
@keyframes borderTravel { 0% { background-position: 100% 0; } 100% { background-position: -100% 0; } }

.header-logo { z-index: 2; display: flex; align-items: center; }
.header-logo img { max-height: 62px; width: auto; filter: drop-shadow(0 4px 6px rgba(0,0,0,0.1)); transition: 0.3s; }

/* ====================================================
   NAVİGASYON
   ==================================================== */
.header-nav { z-index: 2; }
.header-nav > ul { list-style: none; display: flex; gap: 30px; margin: 0; padding: 0; }
.header-nav > ul > li { display: flex; align-items: center; justify-content: center; position: relative; }

.header-nav a { text-decoration: none; color: var(--text-color); display: flex; flex-direction: column; align-items: center; gap: 6px; transition: all 0.3s; }
.header-nav a i:not(.drop-icon) { font-size: 20px; transition: transform 0.3s ease; filter: drop-shadow(0 2px 2px rgba(255,255,255,0.8)); }
.header-nav a span { font-size: 11px; font-weight: 700; letter-spacing: 0.5px; text-transform: uppercase; display: flex; align-items: center; gap: 4px; }
.drop-icon { font-size: 10px !important; margin-top: -2px; }
.header-nav a:hover { color: var(--hover-color); }
.header-nav a:hover i:not(.drop-icon) { transform: translateY(-4px) scale(1.1); }

.has-dropdown { position: relative; }
.has-dropdown::after { content: ''; position: absolute; top: 100%; left: 0; right: 0; height: 16px; background: transparent; }
.dropdown-menu { position: absolute; top: calc(100% + 16px); left: 50%; transform: translateX(-50%) translateY(4px); background: rgba(255, 255, 255, 0.96); backdrop-filter: blur(25px); border: 1px solid rgba(0, 156, 228, 0.12); border-radius: 14px; padding: 8px 0; min-width: 210px; box-shadow: 0 20px 40px rgba(0, 0, 0, 0.12), 0 4px 12px rgba(0, 156, 228, 0.08); opacity: 0; visibility: hidden; pointer-events: none; transition: opacity 0.22s ease, transform 0.22s ease, visibility 0.22s; list-style: none; z-index: 9999; }
.has-dropdown:hover .dropdown-menu { opacity: 1; visibility: visible; pointer-events: auto; transform: translateX(-50%) translateY(0); }
.projects-dropdown { min-width: 340px; padding: 12px !important; display: grid !important; grid-template-columns: 1fr 1fr; gap: 2px !important; }
.dropdown-menu li { display: block; width: 100%; }
.dropdown-menu a { display: flex; flex-direction: row; align-items: center; padding: 9px 18px; font-size: 13px; font-weight: 600; text-transform: none; color: var(--text-color); border-radius: 8px; text-decoration: none; transition: background 0.18s, color 0.18s, padding-left 0.18s; white-space: nowrap; margin: 0 6px; width: calc(100% - 12px); }
.projects-dropdown a { padding: 8px 10px; font-size: 12px; margin: 0; width: 100%; }
.dropdown-menu a:hover { background: rgba(0, 156, 228, 0.1); color: var(--logo-light-blue); padding-left: 24px; }
.projects-dropdown a:hover { padding-left: 14px; }

/* ====================================================
   SAĞ ARAÇLAR (Kusursuz Yuvarlak Tasarım)
   ==================================================== */
.header-tools { display: flex; gap: 12px; align-items: center; z-index: 2; }

/* Butonların net daire olması için katı kurallar */
.tool-btn { 
    background: rgba(255, 255, 255, 0.65); 
    border: 1px solid rgba(255, 255, 255, 0.9); 
    color: var(--text-color); 
    width: 44px; height: 44px; 
    border-radius: 50%; 
    font-size: 18px; 
    cursor: pointer; 
    display: flex; justify-content: center; align-items: center; 
    padding: 0; margin: 0; box-sizing: border-box; 
    transition: all 0.3s ease; 
}
.tool-btn:hover { 
    background: var(--logo-light-blue); color: #ffffff; 
    border-color: var(--logo-light-blue); transform: scale(1.08); 
}

/* ====================================================
   ARAMA BUTONU ÇARPI (X) DÖNÜŞÜMÜ
   ==================================================== */
.search-btn { position: relative; }
.search-icon-default, .search-icon-close { 
    position: absolute; 
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); 
}
.search-icon-close { opacity: 0; transform: scale(0) rotate(-90deg); }

.search-btn.is-active {
    background: var(--logo-light-blue);
    border-color: var(--logo-light-blue);
    color: #ffffff;
}
.search-btn.is-active .search-icon-default { opacity: 0; transform: scale(0) rotate(90deg); }
.search-btn.is-active .search-icon-close { opacity: 1; transform: scale(1) rotate(0); }

/* ====================================================
   ULTRA PREMIUM ARAMA KUTUSU (Masaüstü)
   ==================================================== */
.premium-search-box {
    position: absolute; top: calc(100% + 15px); right: 40px; 
    background: rgba(255, 255, 255, 0.96); backdrop-filter: blur(25px); 
    border: 1px solid rgba(0, 156, 228, 0.15); border-radius: 50px; 
    padding: 6px; display: flex; 
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.15); 
    opacity: 0; visibility: hidden; transform: translateY(-10px); 
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); z-index: 999;
}
.premium-search-box.active { opacity: 1; visibility: visible; transform: translateY(0); }
.premium-search-box form { display: flex; width: 100%; }
.premium-search-box input { background: transparent; border: none; outline: none; padding: 10px 20px; font-size: 14px; color: var(--text-color); width: 220px; font-weight: 500; }
.premium-search-box button { background: var(--logo-light-blue); color: #fff; border: none; width: 40px; height: 40px; border-radius: 50%; cursor: pointer; font-size: 14px; transition: 0.3s; display: flex; align-items: center; justify-content: center; }
.premium-search-box button:hover { background: var(--logo-dark-blue); transform: scale(1.05); }

/* ====================================================
   ASİMETRİK ÇİZGİLİ HAMBURGER MENÜ TASARIMI
   ==================================================== */
.desktop-extra-hamburger, .mobile-main-hamburger { overflow: visible; }
.hb-lines { display: flex; flex-direction: column; gap: 4px; align-items: flex-end; }
.hb-line { display: block; height: 1.5px; background: var(--text-color); border-radius: 2px; transition: all 0.35s cubic-bezier(0.4,0,0.2,1); transform-origin: right center; }
.hb-line-1 { width: 12px; }
.hb-line-2 { width: 18px; }
.hb-line-3 { width: 12px; }
.tool-btn:hover .hb-line { background: #ffffff; }
.tool-btn:hover .hb-line-1 { width: 18px; }
.tool-btn:hover .hb-line-2 { width: 12px; }
.tool-btn:hover .hb-line-3 { width: 18px; }

.mobile-main-hamburger { display: none; }

/* ====================================================
   E-KATALOG BUTON & DROPDOWN
   ==================================================== */
.catalog-dropdown-wrapper { position: relative; }
.catalog-dropdown-wrapper::after { content: ''; position: absolute; top: 100%; left: 0; right: 0; height: 16px; background: transparent; }
.catalog-dropdown { position: absolute; top: calc(100% + 16px); left: 50%; transform: translateX(-50%) translateY(4px); min-width: 190px; background: rgba(255, 255, 255, 0.96); backdrop-filter: blur(25px); border: 1px solid rgba(0, 156, 228, 0.12); border-radius: 14px; padding: 8px 0; box-shadow: 0 20px 40px rgba(0,0,0,0.12), 0 4px 12px rgba(0,156,228,0.08); opacity: 0; visibility: hidden; pointer-events: none; transition: opacity 0.22s ease, transform 0.22s ease, visibility 0.22s; list-style: none; z-index: 9999; }
.catalog-dropdown-wrapper:hover .catalog-dropdown { opacity: 1; visibility: visible; pointer-events: auto; transform: translateX(-50%) translateY(0); }
.catalog-dropdown li { display: block; width: 100%; }
.catalog-dropdown a { display: flex; flex-direction: row; align-items: center; padding: 9px 18px; font-size: 13px; font-weight: 600; color: var(--text-color); text-decoration: none; border-radius: 8px; margin: 0 6px; width: calc(100% - 12px); transition: background 0.18s, color 0.18s, padding-left 0.18s; white-space: nowrap; }
.catalog-dropdown a:hover { background: rgba(0, 156, 228, 0.1); color: var(--logo-light-blue); padding-left: 24px; }

.catalog-btn { position: relative; overflow: hidden; background: linear-gradient(135deg, #009ce4 0%, #0068c8 50%, #0047b3 100%); color: #ffffff; text-decoration: none; padding: 11px 26px; border-radius: 50px; display: flex; align-items: center; gap: 9px; font-size: 13px; font-weight: 700; letter-spacing: 0.6px; text-transform: uppercase; border: 1px solid rgba(255, 255, 255, 0.25); box-shadow: 0 8px 24px rgba(0, 104, 200, 0.35), 0 2px 6px rgba(0, 0, 0, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.25); transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1); white-space: nowrap; }
@keyframes autoShimmer { 0% { left: -75%; } 15% { left: 130%; } 100% { left: 130%; } }
.catalog-btn::before { content: ''; position: absolute; top: 0; left: -75%; width: 50%; height: 100%; background: linear-gradient(90deg, transparent, rgba(255,255,255,0.4), transparent); transform: skewX(-20deg); animation: autoShimmer 4s infinite; }
.catalog-btn::after { content: ''; position: absolute; top: 0; left: 12%; right: 12%; height: 1px; background: linear-gradient(90deg, transparent, rgba(255,255,255,0.5), transparent); border-radius: 50%; }
.catalog-btn:hover { transform: translateY(-3px) scale(1.02); box-shadow: 0 16px 36px rgba(0, 104, 200, 0.45), 0 4px 10px rgba(0, 0, 0, 0.15), inset 0 1px 0 rgba(255, 255, 255, 0.3); background: linear-gradient(135deg, #00b4f5 0%, #007ee0 50%, #0055cc 100%); }
.catalog-btn i.fa-book-open { font-size: 15px; filter: drop-shadow(0 1px 2px rgba(0,0,0,0.2)); }
.catalog-btn .drop-icon { font-size: 9px !important; color: rgba(255,255,255,0.7); margin-left: 1px; }

/* ====================================================
   MOBİL MENÜ (OVERLAY)
   ==================================================== */
.architectural-mobile-menu { position: fixed; top: 0; left: 0; width: 100%; height: 100vh; background: #ffffff; z-index: 9999; transform: translateX(100%); transition: transform 0.5s cubic-bezier(0.77, 0, 0.175, 1); overflow: hidden; }
.architectural-mobile-menu.active { transform: translateX(0); }
.menu-inner { display: flex; flex-direction: column; height: 100%; padding: 28px 22px; background: linear-gradient(160deg, #ffffff 0%, #eef4ff 100%); }
.menu-top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 24px; border-bottom: 1px solid rgba(0, 71, 179, 0.12); padding-bottom: 20px; }
.menu-logo { max-height: 44px; }
.close-menu { background: transparent; border: 1.5px solid rgba(0,71,179,0.2); width: 40px; height: 40px; border-radius: 50%; color: var(--text-color); font-size: 18px; cursor: pointer; transition: 0.3s; display: flex; align-items: center; justify-content: center; }
.close-menu:hover { background: var(--logo-light-blue); border-color: var(--logo-light-blue); color: #fff; transform: rotate(90deg); }

.menu-links { flex-grow: 1; overflow-y: auto; }
.menu-links ul { list-style: none; }
.menu-links > ul > li { border-bottom: 1px solid rgba(0,71,179,0.08); }
.menu-links > ul > li > a, .menu-links .mobile-sub-toggle { display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--text-color); font-size: 15px; font-weight: 700; letter-spacing: 0.2px; padding: 13px 4px; transition: 0.22s; background: none; border: none; width: 100%; cursor: pointer; text-align: left; font-family: inherit; }
.menu-links .mobile-sub-toggle { justify-content: space-between; }
.menu-links .mobile-sub-toggle .mobile-arrow { font-size: 11px; color: var(--logo-light-blue); transition: transform 0.3s ease; flex-shrink: 0; margin-left: auto; }
.menu-links a span, .menu-links button span { font-size: 10px; color: var(--logo-light-blue); font-weight: 500; opacity: 0.75; font-family: monospace; flex-shrink: 0; }
.menu-links > ul > li > a:hover, .menu-links .mobile-sub-toggle:hover { color: var(--logo-light-blue); padding-left: 10px; }

.mobile-sub-menu { padding: 4px 0 12px 32px; flex-direction: column; gap: 0; margin-bottom: 4px; }
.mobile-sub-menu.sub-hidden { display: none !important; }
.mobile-sub-menu.sub-open-grid { display: grid !important; grid-template-columns: 1fr 1fr; padding-left: 22px; }
.mobile-sub-menu.sub-open-flex { display: flex !important; flex-direction: column; }
.mobile-sub-menu a { display: block; font-size: 13px; font-weight: 500; color: #3a5a8a; padding: 7px 10px; border-radius: 6px; transition: 0.18s; text-decoration: none; }
.mobile-sub-menu a:hover { color: var(--logo-light-blue); background: rgba(0, 156, 228, 0.08); padding-left: 14px; }

.menu-bottom { margin-top: auto; padding-top: 18px; border-top: 1px solid rgba(0,71,179,0.1); }
.menu-catalog-btn { display: flex; justify-content: center; align-items: center; gap: 10px; background: linear-gradient(135deg, var(--logo-light-blue), var(--logo-dark-blue)); color: #fff; text-decoration: none; padding: 14px; border-radius: 12px; font-weight: 700; text-transform: uppercase; font-size: 13px; letter-spacing: 1px; box-shadow: 0 6px 20px rgba(0,156,228,0.28); }
.menu-copyright { text-align: center; color: rgba(0,43,94,0.3); font-size: 11px; margin-top: 12px; font-family: monospace; }

/* ====================================================
   RESPONSIVE (MOBİL OPTİMİZASYON)
   ==================================================== */
@media (max-width: 1150px) {
    .header-nav { display: none; }
    .header-container { padding: 12px 20px; }
    
    .desktop-extra-hamburger { display: none; }
    .mobile-main-hamburger { display: flex; }
}

@media (max-width: 768px) {
    .premium-glass-header { padding: 0 10px; top: 12px; }
    .header-container { padding: 8px 10px; border-radius: 20px; }
    .header-container::before { border-radius: 20px; }
    .header-logo img { max-height: 42px; }
    
    .header-tools { gap: 8px; }
    .tool-btn { width: 36px; height: 36px; font-size: 15px; }

    .premium-search-box { 
        top: 100%; left: 10px; right: 10px; margin-top: 15px; border-radius: 16px; 
        justify-content: space-between; padding: 8px; box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2); 
    }
    .premium-search-box input { width: 100%; font-size: 15px; }

    .catalog-btn { width: 36px; height: 36px; padding: 0; justify-content: center; border-radius: 50%; }
    .catalog-btn span { display: none; }
    .catalog-btn i { font-size: 14px; margin: 0; }
    
    .catalog-dropdown { left: auto; right: -5px; transform: translateY(10px); min-width: 160px; }
    .catalog-dropdown-wrapper.mobile-open .catalog-dropdown {
        opacity: 1; visibility: visible; pointer-events: auto; transform: translateY(0);
    }
}