/* ========================================================================== TP header kabugu β€” RENDER-BLOCKING. Amac: header-inject.js (defer) calisana kadar eski WP/Elementor header'inin ekranda "stilsiz kod" gibi gorunmesini engellemek ve yerini onceden ayirmak. icinde, diger stillerden SONRA yuklenmelidir. ========================================================================== */ /* 1) Eski header konteynerlerini ILK BOYAMADAN once gizle (header-inject.js'in JS ile enjekte ettigi listeyle ayni) */ .pxl-header,.pxl-header-default,header#pxl-header,.pxl-header-main, .pxl-header-mobile,.pxl-topbar,.case-header,.case-topbar, .elementor-location-header,header.site-header,#masthead,.site-header, .aimo-header,.aimo-topbar, .pxl-header-elementor-main,.pxl-header-elementor-sticky,.pxl-header-content, .pxl-border-header,#pxl-header-mobile,header.pxl-header,.bd-px-header, #pxl-header-elementor,.pxl-header-elementor,#pxl-header-mobile-default,.pxl-header-mobile-default{ display:none !important; } /* 2) Yeni header henuz basilmadiysa yerini ayir -> icerik zipzip oynamaz. .tp-wp-wrap DOM'a girdigi anda bu bosluk kendiliginden kalkar. */ body:not(:has(.tp-wp-wrap))::before{ content:''; display:block; height:118px; background:#fff; } @media(max-width:980px){ body:not(:has(.tp-wp-wrap))::before{ height:96px; } } /* 3) :has() desteklemeyen eski tarayicilarda bosluk olusmaz; header biraz gec gelir ama eski header yine de gorunmez. Kabul edilebilir gerileme. */ /* 4) TAM header stili β€” nav artik HTML'e ONCEDEN BASILDIGI icin stil de JS ile degil buradan gelir. header-inject.js sadece eksik kalan sayfalarda yedek olarak devreye girer. */ /* Üst mor banner */ .tp-banner{background:#f5f5f7;color:#1d1d1f;text-align:center;padding:10px 16px;font-size:13.5px;font-weight:500;letter-spacing:0.2px;} .tp-banner a{color:#0a0a0a;text-decoration:none;} .tp-banner .tp-bn-link{color:#0a0a0a;font-weight:600;margin-left:6px;border-bottom:1px solid rgba(0,0,0,0.25);} /* Floating pill header */ .tp-wp-wrap{position:sticky;top:0;z-index:100;padding:16px 24px;background:transparent;} .tp-wp-bar{max-width:1300px;margin:0 auto;display:flex;justify-content:space-between;align-items:center;padding:14px 18px 14px 26px;background:rgba(255,255,255,0.78);backdrop-filter:saturate(180%) blur(20px);-webkit-backdrop-filter:saturate(180%) blur(20px);border:1px solid rgba(0,0,0,0.09);border-radius:80px;box-shadow:0 1px 2px rgba(0,0,0,0.04),0 10px 30px rgba(0,0,0,0.06);font-family:'Inter','DM Sans',-apple-system,BlinkMacSystemFont,sans-serif;position:relative;} .tp-wp-logo{display:flex;align-items:center;flex-shrink:0;text-decoration:none;} .tp-wp-logo img{height:26px;width:auto;display:block;} @media(max-width:980px){.tp-wp-logo img{height:22px;}} .tp-wp-nav-host{flex:1;display:flex;justify-content:center;} /* CTA pill */ .tp-wp-cta{display:inline-flex;align-items:center;gap:10px;background:#0a0a0a;color:#fff !important;padding:12px 22px 12px 24px;border-radius:100px;font-size:14px;font-weight:600;text-decoration:none;transition:transform 0.2s,box-shadow 0.3s;flex-shrink:0;box-shadow:0 6px 20px rgba(0,0,0,0.12);} .tp-wp-cta:hover{transform:translateY(-1px);box-shadow:0 10px 30px rgba(0,0,0,0.20);color:#fff !important;} .tp-wp-cta-arrow{width:32px;height:32px;border-radius:50%;background:#fff;color:#0a0a0a;display:flex;align-items:center;justify-content:center;margin-left:8px;font-size:16px;} .tp-wp-burger{display:none !important;width:40px;height:40px;border-radius:12px;background:#f5f5f7;border:1px solid rgba(0,0,0,0.09);align-items:center;justify-content:center;cursor:pointer;padding:0;} @media(max-width:980px){ .tp-wp-nav-host{display:none;} .tp-wp-burger{display:flex !important;} .tp-wp-bar{padding:10px 12px 10px 18px;border-radius:24px;} .tp-wp-wrap{padding:10px 12px;} .tp-wp-cta{padding:10px 14px 10px 16px;font-size:12px;} .tp-wp-cta-arrow{width:26px;height:26px;font-size:13px;margin-left:4px;} .tp-banner{font-size:12px;padding:8px 12px;} } /* Mobile menu */ .tp-wp-mobile{position:fixed;top:60px;left:12px;right:12px;background:#fff;border:1px solid rgba(0,0,0,0.09);border-radius:24px;padding:18px;display:none;flex-direction:column;gap:4px;z-index:99;box-shadow:0 16px 40px rgba(0,0,0,0.1);max-height:calc(100vh - 80px);overflow-y:auto;} .tp-wp-mobile.open{display:flex;} .tp-wp-mobile a{padding:14px 16px;border-radius:12px;font-size:15px;font-weight:600;color:#1d1d1f;text-decoration:none;} .tp-wp-mobile a.active{background:#0a0a0a;color:#fff;} .tp-wp-mobile a:not(.active):hover{background:#f5f5f7;color:#0a0a0a;} .tp-wp-mobile .tp-mob-sub{padding-left:20px;display:flex;flex-direction:column;gap:2px;border-left:2px solid rgba(0,0,0,0.09);margin-left:14px;} .tp-wp-mobile .tp-mob-sub a{font-size:13.5px;font-weight:500;padding:10px 12px;color:#555;} /* 5) Liquid pill + dropdown (nav-effect.js ile ayni) */ .tp-fx-nav{position:relative;display:flex;align-items:center;gap:4px;} .tp-fx-nav > a, .tp-fx-nav > .tp-fx-item > a{position:relative;display:inline-flex;align-items:center;gap:6px;padding:10px 18px;font-size:15px;font-weight:500;color:#1d1d1f;text-decoration:none;border-radius:100px;transition:color 0.3s cubic-bezier(0.16,1,0.3,1);z-index:2;white-space:nowrap;} .tp-fx-nav > a:hover, .tp-fx-nav > .tp-fx-item > a:hover, .tp-fx-nav > a.active, .tp-fx-nav > .tp-fx-item > a.active{color:#fff;} .tp-fx-nav > .tp-fx-item{position:relative;} .tp-fx-caret{font-size:9px;opacity:0.6;transition:transform 0.25s ease;display:inline-block;line-height:1;} .tp-fx-nav > .tp-fx-item:hover > a .tp-fx-caret{transform:rotate(180deg);opacity:1;} .tp-fx-pill{position:absolute;top:0;height:100%;border-radius:100px;background:#0a0a0a;box-shadow:0 6px 20px rgba(0,0,0,0.12),0 2px 6px rgba(0,0,0,0.09);transition:left 0.45s cubic-bezier(0.34,1.56,0.64,1),width 0.45s cubic-bezier(0.34,1.56,0.64,1),opacity 0.3s,transform 0.3s;will-change:left,width,transform;opacity:0;z-index:1;pointer-events:none;} .tp-fx-pill.visible{opacity:1;} .tp-fx-pill.hovering{transform:scale(1.04);} .tp-fx-sub{position:absolute;top:calc(100% + 4px);left:50%;transform:translateX(-50%) translateY(-4px);opacity:0;pointer-events:none;transition:opacity 0.22s ease,transform 0.22s cubic-bezier(0.16,1,0.3,1);z-index:200;padding-top:14px;} .tp-fx-item:hover .tp-fx-sub, .tp-fx-item:focus-within .tp-fx-sub{opacity:1;pointer-events:auto;transform:translateX(-50%) translateY(0);} .tp-fx-sub-grid{display:grid;gap:4px;min-width:280px;background:#fff;border:1px solid rgba(0,0,0,0.09);border-radius:18px;padding:10px;box-shadow:0 24px 60px rgba(0,0,0,0.10),0 4px 14px #f5f5f7;} .tp-fx-item[data-cols="2"] .tp-fx-sub-grid{min-width:540px;} .tp-fx-item[data-cols="3"] .tp-fx-sub-grid{min-width:780px;} .tp-fx-sub-grid > a{display:flex;flex-direction:column;gap:2px;padding:10px 14px;border-radius:12px;text-decoration:none;color:#1d1d1f;transition:background 0.18s ease,color 0.18s ease,transform 0.18s ease;} .tp-fx-sub-grid > a:hover{background:#f5f5f7;transform:translateX(2px);} .tp-fx-sub-label{font-size:14px;font-weight:600;color:#1d1d1f;line-height:1.25;} .tp-fx-sub-desc{font-size:12px;font-weight:400;color:rgba(0,0,0,0.52);line-height:1.35;} .tp-fx-sub-grid > a:hover .tp-fx-sub-label{color:#0a0a0a;} /* 6) AKTIF OGE β€” JS'e bagimli OLMADAN siyah pill. Onceden nav-effect.js'in yuzen pill'i olmadan aktif ogenin metni beyaz kalip beyaz zeminde KAYBOLUYORDU. Bu kural onu bitirir. */ .tp-fx-nav > a.active, .tp-fx-nav > .tp-fx-item > a.active{ background:#0a0a0a; color:#fff !important; border-radius:100px; } .tp-fx-nav > .tp-fx-item > a.active .tp-fx-caret{opacity:.85;} /* JS yuklenmeden once de hover geri bildirimi olsun */ .tp-fx-nav > a:not(.active):hover, .tp-fx-nav > .tp-fx-item > a:not(.active):hover{color:#0a0a0a;}