/* BlueSys Feature Center 2.0 - isolated premium UI */ .bsfc-feature-page .entry-title,.bsfc-feature-page .page-title,.bsfc-feature-page .bs-page-title,.bsfc-feature-page .breadcrumb-area,.bsfc-feature-page .page-header{display:none!important} .bsfc-feature-page .site-main,.bsfc-feature-page .entry-content,.bsfc-feature-page .content-area{max-width:none!important;width:100%!important;margin:0!important;padding:0!important} .bsfc-wrap,.bsfc-wrap *{box-sizing:border-box} .bsfc-wrap{--bsfc-blue:#155eef;--bsfc-dark:#101828;--bsfc-muted:#667085;--bsfc-line:#e4e7ec;max-width:1360px!important;margin:0 auto!important;padding:54px 22px 74px!important;font-family:inherit!important;color:var(--bsfc-dark)!important} .bsfc-heading{position:relative!important;overflow:hidden!important;text-align:left!important;max-width:none!important;margin:0 0 24px!important;padding:30px 32px!important;border:1px solid #dce6ff!important;border-radius:24px!important;background:linear-gradient(135deg,#f7f9ff 0%,#fff 62%,#f4f0ff 100%)!important;box-shadow:0 16px 45px rgba(16,24,40,.06)!important} .bsfc-heading:after{content:"";position:absolute;right:-70px;top:-95px;width:260px;height:260px;border-radius:50%;background:radial-gradient(circle,rgba(21,94,239,.16),rgba(21,94,239,0) 68%)} .bsfc-heading h1{position:relative;z-index:1;font-size:clamp(29px,3.2vw,45px)!important;line-height:1.12!important;letter-spacing:-.035em!important;margin:0 0 10px!important;color:var(--bsfc-dark)!important;font-weight:800!important} .bsfc-heading p{position:relative;z-index:1;max-width:760px!important;font-size:16px!important;line-height:1.65!important;color:var(--bsfc-muted)!important;margin:0!important} .bsfc-toolbar{display:flex!important;gap:12px!important;align-items:center!important;justify-content:space-between!important;margin:0 0 20px!important;padding:12px!important;border:1px solid var(--bsfc-line)!important;border-radius:18px!important;background:#fff!important;box-shadow:0 10px 35px rgba(16,24,40,.045)!important;flex-wrap:wrap!important} .bsfc-search{display:flex!important;align-items:center!important;gap:9px!important;flex:1 1 310px!important;max-width:430px!important;min-width:240px!important;height:44px!important;padding:0 14px!important;border:1px solid #dfe5ee!important;border-radius:12px!important;background:#f9fafb!important;box-shadow:none!important;margin:0!important} .bsfc-search .dashicons{color:#667085!important;width:18px!important;height:18px!important;font-size:18px!important} .bsfc-search input{display:block!important;border:0!important;outline:0!important;box-shadow:none!important;background:transparent!important;width:100%!important;height:42px!important;padding:0!important;margin:0!important;font:inherit!important;font-size:14px!important;color:#101828!important} .bsfc-filters{display:flex!important;gap:7px!important;flex-wrap:wrap!important;align-items:center!important} .bsfc-filters button{appearance:none!important;border:1px solid #e4e7ec!important;background:#fff!important;color:#344054!important;padding:8px 12px!important;min-height:36px!important;border-radius:999px!important;cursor:pointer!important;font:inherit!important;font-size:12px!important;font-weight:700!important;line-height:1!important;transition:.2s!important} .bsfc-filters button:hover,.bsfc-filters button.is-active{background:var(--bsfc-blue)!important;color:#fff!important;border-color:var(--bsfc-blue)!important;box-shadow:0 7px 17px rgba(21,94,239,.19)!important} .bsfc-grid{display:grid!important;grid-template-columns:repeat(var(--bsfc-cols,4),minmax(0,1fr))!important;gap:14px!important;align-items:stretch!important} .bsfc-wrap[data-columns="1"]{--bsfc-cols:1}.bsfc-wrap[data-columns="2"]{--bsfc-cols:2}.bsfc-wrap[data-columns="3"]{--bsfc-cols:3}.bsfc-wrap[data-columns="4"]{--bsfc-cols:4}.bsfc-wrap[data-columns="5"]{--bsfc-cols:5}.bsfc-wrap[data-columns="6"]{--bsfc-cols:6} .bsfc-card{position:relative!important;display:flex!important;min-width:0!important;min-height:196px!important;margin:0!important;padding:0!important;border:1px solid #e4e8ef!important;border-radius:18px!important;background:#fff!important;overflow:hidden!important;box-shadow:0 8px 25px rgba(16,24,40,.045)!important;transition:transform .22s ease,box-shadow .22s ease,border-color .22s ease!important} .bsfc-card:before{content:""!important;position:absolute!important;left:0!important;top:0!important;width:100%!important;height:3px!important;background:linear-gradient(90deg,#155eef,#7f56d9)!important;opacity:0!important;transition:.2s!important} .bsfc-card:hover{transform:translateY(-4px)!important;border-color:#c8d5ff!important;box-shadow:0 18px 42px rgba(16,24,40,.11)!important}.bsfc-card:hover:before{opacity:1!important} .bsfc-card-hit{position:absolute!important;inset:0!important;z-index:5!important;width:100%!important;height:100%!important;border:0!important;background:transparent!important;padding:0!important;margin:0!important;cursor:pointer!important} .bsfc-card-body{position:relative!important;display:flex!important;flex-direction:column!important;width:100%!important;min-width:0!important;padding:16px!important} .bsfc-card-icon-wrap{display:flex!important;align-items:center!important;justify-content:center!important;width:38px!important;height:38px!important;flex:0 0 38px!important;margin:0 0 11px!important;border-radius:11px!important;background:linear-gradient(135deg,#edf3ff,#f4f0ff)!important;color:var(--bsfc-blue)!important} .bsfc-card-icon{font-size:19px!important;line-height:1!important;width:auto!important;height:auto!important}.bsfc-card-icon.dashicons{font-size:19px!important;width:19px!important;height:19px!important} .bsfc-card-top{display:flex!important;align-items:center!important;justify-content:space-between!important;gap:6px!important;min-height:18px!important;margin:0!important} .bsfc-note{display:block!important;min-width:0!important;overflow:hidden!important;text-overflow:ellipsis!important;white-space:nowrap!important;font-size:9.5px!important;line-height:1.2!important;font-weight:800!important;letter-spacing:.055em!important;text-transform:uppercase!important;color:var(--bsfc-blue)!important} .bsfc-badge{display:inline-flex!important;flex:0 0 auto!important;padding:4px 7px!important;border-radius:999px!important;background:#eef4ff!important;color:#3538cd!important;font-size:9px!important;line-height:1!important;font-weight:800!important} .bsfc-card h2{display:block!important;margin:7px 0 6px!important;padding:0!important;font-size:17px!important;line-height:1.28!important;letter-spacing:-.015em!important;font-weight:800!important;color:var(--bsfc-dark)!important} .bsfc-card p{display:-webkit-box!important;-webkit-box-orient:vertical!important;-webkit-line-clamp:3!important;overflow:hidden!important;margin:0 0 12px!important;padding:0!important;color:var(--bsfc-muted)!important;font-size:12.5px!important;line-height:1.52!important} .bsfc-card-footer{display:flex!important;align-items:center!important;justify-content:space-between!important;gap:8px!important;margin-top:auto!important;padding-top:10px!important;border-top:1px solid #f0f2f5!important;font-size:10.5px!important;line-height:1.2!important;color:var(--bsfc-muted)!important} .bsfc-open-label{position:relative!important;z-index:6!important;color:var(--bsfc-blue)!important;font-weight:800!important;white-space:nowrap!important;cursor:pointer!important}.bsfc-open-label b{font-size:14px!important} .bsfc-empty,.bsfc-no-result{grid-column:1/-1!important;text-align:center!important;padding:54px 20px!important;border:1px dashed #d0d5dd!important;border-radius:18px!important;background:#fafafa!important;color:#667085!important} .bsfc-modal{position:fixed!important;inset:0!important;z-index:9999999!important;display:none!important;margin:0!important;padding:0!important}.bsfc-modal.is-open{display:block!important} .bsfc-modal-backdrop{position:absolute!important;inset:0!important;background:rgba(16,24,40,.74)!important;backdrop-filter:blur(7px)!important} .bsfc-modal-dialog{position:absolute!important;inset:3vh 3vw!important;max-width:1480px!important;margin:auto!important;background:#fff!important;border:1px solid rgba(255,255,255,.5)!important;border-radius:26px!important;overflow:hidden!important;box-shadow:0 35px 120px rgba(0,0,0,.38)!important} .bsfc-modal-content{height:100%!important;overflow:auto!important;background:#fff!important}.bsfc-modal-close{position:absolute!important;right:18px!important;top:18px!important;z-index:20!important;display:flex!important;align-items:center!important;justify-content:center!important;width:42px!important;height:42px!important;padding:0!important;border:1px solid #e4e7ec!important;border-radius:50%!important;background:#fff!important;color:#101828!important;font-size:27px!important;line-height:1!important;cursor:pointer!important;box-shadow:0 8px 24px rgba(16,24,40,.14)!important} .bsfc-loader,.bsfc-error{display:grid!important;place-items:center!important;min-height:55vh!important;font-size:16px!important;color:#667085!important} .bsfc-detail{max-width:1260px!important;margin:0 auto!important;padding:56px 38px!important}.bsfc-detail-head{display:grid!important;grid-template-columns:minmax(0,1.05fr) minmax(340px,.95fr)!important;gap:40px!important;align-items:center!important;padding:0 0 34px!important;border-bottom:1px solid #e4e7ec!important}.bsfc-detail-head h2{margin:10px 0 12px!important;font-size:clamp(31px,4vw,52px)!important;line-height:1.08!important;letter-spacing:-.04em!important;color:#101828!important;font-weight:850!important}.bsfc-detail-head p{margin:0!important;font-size:16px!important;line-height:1.7!important;color:#667085!important}.bsfc-detail-meta{display:flex!important;gap:7px!important;flex-wrap:wrap!important}.bsfc-detail-meta span{display:inline-flex!important;padding:7px 10px!important;border-radius:999px!important;background:#eef4ff!important;color:#155eef!important;font-size:11px!important;line-height:1!important;font-weight:800!important}.bsfc-detail-image img{display:block!important;width:100%!important;height:auto!important;border-radius:20px!important;box-shadow:0 20px 45px rgba(16,24,40,.12)!important}.bsfc-detail-body{padding:34px 0 10px!important;font-size:16px!important;line-height:1.8!important;color:#344054!important}.bsfc-detail-body h2,.bsfc-detail-body h3,.bsfc-detail-body h4{color:#101828!important}.bsfc-detail-body img{max-width:100%!important;height:auto!important;border-radius:15px!important}.bsfc-modal-open{overflow:hidden!important} @media(max-width:1180px){.bsfc-wrap[data-columns]{--bsfc-cols:4}.bsfc-detail-head{grid-template-columns:1fr 1fr!important}} @media(max-width:920px){.bsfc-wrap[data-columns]{--bsfc-cols:3}.bsfc-detail-head{grid-template-columns:1fr!important}.bsfc-detail-image{order:-1!important}.bsfc-modal-dialog{inset:2vh 2vw!important}} @media(max-width:680px){.bsfc-wrap{padding:34px 14px 52px!important}.bsfc-heading{padding:24px 21px!important;border-radius:19px!important}.bsfc-wrap[data-columns]{--bsfc-cols:2}.bsfc-toolbar{display:block!important}.bsfc-search{max-width:none!important;min-width:0!important;margin:0 0 11px!important}.bsfc-modal-dialog{inset:0!important;border-radius:0!important}.bsfc-modal-close{right:11px!important;top:11px!important}.bsfc-detail{padding:60px 19px 28px!important}.bsfc-card{min-height:188px!important}} @media(max-width:430px){.bsfc-wrap[data-columns]{--bsfc-cols:1}.bsfc-card{min-height:174px!important}} /* WPBakery içeriklerinin AJAX modal içindeki yerleşim uyumluluğu */ .bsfc-detail-body .vc_row{margin-left:-15px!important;margin-right:-15px!important} .bsfc-detail-body .vc_column_container>.vc_column-inner{padding-left:15px!important;padding-right:15px!important} .bsfc-detail-body .wpb_content_element{margin-bottom:24px!important} .bsfc-detail-body .vc_row:last-child .wpb_content_element:last-child{margin-bottom:0!important} .bsfc-detail-body .vc_single_image-wrapper,.bsfc-detail-body .vc_single_image-img{max-width:100%!important;height:auto!important} .bsfc-detail-body .wpb_text_column p:first-child{margin-top:0!important} .bsfc-detail-body .wpb_text_column p:last-child{margin-bottom:0!important} @media(max-width:767px){.bsfc-detail-body .vc_row{margin-left:-8px!important;margin-right:-8px!important}.bsfc-detail-body .vc_column_container>.vc_column-inner{padding-left:8px!important;padding-right:8px!important}} /* WPBakery galeri / slider AJAX modal uyumluluğu */ .bsfc-detail-body .wpb_gallery,.bsfc-detail-body .wpb_gallery_slides{max-width:100%!important} .bsfc-detail-body .wpb_flexslider{position:relative!important;margin:0 0 24px!important;overflow:hidden!important;border:0!important;background:transparent!important;box-shadow:none!important} .bsfc-detail-body .wpb_flexslider .slides{margin:0!important;padding:0!important;list-style:none!important} .bsfc-detail-body .wpb_flexslider .slides>li{margin:0!important;padding:0!important;list-style:none!important} .bsfc-detail-body .wpb_flexslider .slides img{display:block!important;width:100%!important;height:auto!important;border-radius:16px!important} .bsfc-detail-body .flex-control-nav{display:flex!important;justify-content:center!important;gap:7px!important;margin:12px 0 0!important;padding:0!important;list-style:none!important} .bsfc-detail-body .flex-direction-nav{margin:0!important;padding:0!important;list-style:none!important} .bsfc-detail-body .flex-direction-nav a{display:flex!important;align-items:center!important;justify-content:center!important;width:40px!important;height:40px!important;margin-top:-20px!important;border-radius:50%!important;background:rgba(255,255,255,.94)!important;box-shadow:0 8px 25px rgba(16,24,40,.18)!important;color:#101828!important;text-indent:-9999px!important;opacity:1!important} .bsfc-detail-body .flex-direction-nav a:before{display:block!important;text-indent:0!important;font-size:22px!important;line-height:1!important} /* v2.5 - AJAX modal için WPBakery'den bağımsız sağlam galeri */ .bsfc-detail-body .bsfc-native-gallery{position:relative!important;width:100%!important;max-width:100%!important;overflow:hidden!important;border-radius:18px!important;background:#f5f7fb!important;margin:0 0 24px!important} .bsfc-detail-body .bsfc-native-gallery-track{position:relative!important;width:100%!important;min-height:120px!important;margin:0!important;padding:0!important;list-style:none!important} .bsfc-detail-body .bsfc-native-gallery-slide{display:none!important;width:100%!important;margin:0!important;padding:0!important;list-style:none!important;position:relative!important;float:none!important;left:auto!important;top:auto!important;transform:none!important} .bsfc-detail-body .bsfc-native-gallery-slide.is-active{display:block!important} .bsfc-detail-body .bsfc-native-gallery-slide>a{display:block!important;width:100%!important} .bsfc-detail-body .bsfc-native-gallery-slide img{display:block!important;width:100%!important;max-width:100%!important;height:auto!important;object-fit:contain!important;margin:0 auto!important;border-radius:18px!important} .bsfc-native-gallery-prev,.bsfc-native-gallery-next{position:absolute!important;z-index:8!important;top:50%!important;transform:translateY(-50%)!important;width:42px!important;height:42px!important;border:0!important;border-radius:50%!important;background:rgba(15,23,42,.82)!important;color:#fff!important;font-size:25px!important;line-height:42px!important;text-align:center!important;cursor:pointer!important;box-shadow:0 8px 24px rgba(15,23,42,.2)!important;padding:0!important} .bsfc-native-gallery-prev{left:14px!important}.bsfc-native-gallery-next{right:14px!important} .bsfc-native-gallery-prev:hover,.bsfc-native-gallery-next:hover{background:#2155d9!important} .bsfc-native-gallery-dots{display:flex!important;justify-content:center!important;align-items:center!important;gap:7px!important;padding:12px 10px!important;background:#fff!important} .bsfc-native-gallery-dot{width:8px!important;height:8px!important;border:0!important;border-radius:50%!important;background:#cbd5e1!important;padding:0!important;cursor:pointer!important} .bsfc-native-gallery-dot.is-active{width:22px!important;border-radius:10px!important;background:#2155d9!important} .bsfc-detail-body .wpb_image_grid_ul.bsfc-native-gallery-track{height:auto!important} .bsfc-detail-body .wpb_image_grid_ul.bsfc-native-gallery-track>li{position:relative!important;inset:auto!important} @media(max-width:767px){.bsfc-native-gallery-prev,.bsfc-native-gallery-next{width:36px!important;height:36px!important;line-height:36px!important;font-size:21px!important}.bsfc-native-gallery-prev{left:8px!important}.bsfc-native-gallery-next{right:8px!important}} /* v2.7 - AJAX galeri için body seviyesinde bağımsız lightbox */ .bsfc-lightbox{position:fixed!important;inset:0!important;z-index:2147483646!important;display:none!important;margin:0!important;padding:0!important} .bsfc-lightbox.is-open{display:block!important} .bsfc-lightbox-backdrop{position:absolute!important;inset:0!important;background:rgba(3,7,18,.94)!important;backdrop-filter:blur(10px)!important} .bsfc-lightbox-stage{position:absolute!important;inset:18px!important;display:flex!important;align-items:center!important;justify-content:center!important;overflow:hidden!important} .bsfc-lightbox-figure{position:relative!important;display:flex!important;align-items:center!important;justify-content:center!important;width:calc(100% - 150px)!important;height:calc(100% - 60px)!important;margin:0!important;padding:0!important} .bsfc-lightbox-image{display:block!important;max-width:100%!important;max-height:100%!important;width:auto!important;height:auto!important;object-fit:contain!important;border-radius:10px!important;box-shadow:0 24px 90px rgba(0,0,0,.48)!important} .bsfc-lightbox-caption{position:absolute!important;left:50%!important;bottom:-42px!important;transform:translateX(-50%)!important;max-width:80%!important;color:#fff!important;font-size:14px!important;line-height:1.45!important;text-align:center!important} .bsfc-lightbox-close,.bsfc-lightbox-prev,.bsfc-lightbox-next{position:absolute!important;z-index:4!important;display:flex!important;align-items:center!important;justify-content:center!important;border:1px solid rgba(255,255,255,.22)!important;background:rgba(17,24,39,.72)!important;color:#fff!important;cursor:pointer!important;box-shadow:none!important} .bsfc-lightbox-close{right:14px!important;top:14px!important;width:46px!important;height:46px!important;border-radius:50%!important;font-size:30px!important;line-height:1!important} .bsfc-lightbox-prev,.bsfc-lightbox-next{top:50%!important;transform:translateY(-50%)!important;width:52px!important;height:64px!important;border-radius:14px!important;font-size:40px!important;line-height:1!important} .bsfc-lightbox-prev{left:12px!important}.bsfc-lightbox-next{right:12px!important} .bsfc-lightbox-counter{position:absolute!important;left:50%!important;top:16px!important;transform:translateX(-50%)!important;padding:7px 12px!important;border-radius:999px!important;background:rgba(17,24,39,.72)!important;color:#fff!important;font-size:13px!important;font-weight:700!important} .bsfc-lightbox-open{overflow:hidden!important} .bsfc-native-gallery-slide a[data-bsfc-lightbox]{cursor:zoom-in!important} @media(max-width:680px){.bsfc-lightbox-stage{inset:8px!important}.bsfc-lightbox-figure{width:100%!important;height:calc(100% - 90px)!important}.bsfc-lightbox-prev,.bsfc-lightbox-next{width:42px!important;height:52px!important;font-size:32px!important;background:rgba(17,24,39,.58)!important}.bsfc-lightbox-prev{left:4px!important}.bsfc-lightbox-next{right:4px!important}.bsfc-lightbox-close{right:7px!important;top:7px!important}.bsfc-lightbox-caption{bottom:-50px!important;max-width:90%!important}} /* v2.8 compact card banners */ .bsfc-card{flex-direction:column!important;min-height:0!important} .bsfc-card-banner{position:relative!important;z-index:1!important;width:100%!important;aspect-ratio:16/9!important;overflow:hidden!important;background:linear-gradient(135deg,#eef4ff,#f5f3ff)!important;border-bottom:1px solid #edf0f5!important} .bsfc-card-banner img{display:block!important;width:100%!important;height:100%!important;object-fit:cover!important;transition:transform .35s ease!important} .bsfc-card:hover .bsfc-card-banner img{transform:scale(1.055)!important} .bsfc-card:has(.bsfc-card-banner) .bsfc-card-body{padding-top:14px!important} .bsfc-card:has(.bsfc-card-banner) h2{margin-top:7px!important} @media(max-width:680px){.bsfc-card-banner{aspect-ratio:16/8.8!important}} /* v3.0 integrated package comparison */ .bsxp-wrap{max-width:1480px;margin:34px auto;padding:0 18px}.bsxp-heading{text-align:center;margin-bottom:28px}.bsxp-heading h2{font-size:clamp(30px,4vw,52px);margin:0 0 10px}.bsxp-heading p{color:#667085;font-size:17px}.bsxp-scroll{overflow:auto;border:1px solid #e4e7ec;border-radius:22px;background:#fff;box-shadow:0 18px 55px rgba(16,24,40,.08)}.bsxp-table{width:100%;min-width:920px;border-collapse:separate;border-spacing:0}.bsxp-table th,.bsxp-table td{padding:15px 18px;border-right:1px solid #eaecf0;border-bottom:1px solid #eaecf0;text-align:center}.bsxp-table thead th{position:sticky;top:0;z-index:3;background:#fff;vertical-align:top}.bsxp-table .bsxp-feature-head,.bsxp-table tbody th{text-align:left;min-width:270px}.bsxp-package-head{border-top:5px solid var(--bsxp-color);padding-top:13px}.bsxp-package-head h3{font-size:20px;margin:4px 0}.bsxp-package-head p{font-size:13px;color:#667085;min-height:36px}.bsxp-price{font-size:23px;font-weight:800;color:#101828;margin:11px 0}.bsxp-price small{display:block;font-size:12px;font-weight:500;color:#667085}.bsxp-package-badge,.bsxp-cell-badge{display:inline-flex;padding:4px 9px;border-radius:999px;background:#eef4ff;color:#2457d6;font-size:11px;font-weight:800}.bsxp-button{display:inline-flex;padding:9px 14px;border-radius:10px;background:var(--bsxp-color);color:#fff!important;font-weight:700;text-decoration:none}.bsxp-group th{background:#f8fafc!important;color:#344054;font-size:14px;text-transform:uppercase;letter-spacing:.04em}.bsxp-feature-link{border:0;background:none;padding:0;color:#101828;font-weight:700;text-align:left;cursor:pointer}.bsxp-feature-link:not(:disabled):hover{color:#2457d6}.bsxp-feature-link:disabled{cursor:default}.bsxp-info{display:inline-flex;align-items:center;justify-content:center;width:18px;height:18px;margin-left:7px;border-radius:50%;background:#eef2f6;color:#667085;font-size:11px}.bsxp-yes{color:#12a150;font-size:22px;font-weight:900}.bsxp-no{color:#d92d20;font-size:24px;font-weight:500}.bsxp-table tr:last-child>*{border-bottom:0}.bsxp-table tr>*:last-child{border-right:0}@media(max-width:767px){.bsxp-wrap{padding:0 10px}.bsxp-table th,.bsxp-table td{padding:12px}.bsxp-scroll{border-radius:15px}} /* BlueBeauty kart ikon sistemi */ .bsfc-card .bsfc-card-icon-wrap{ display:flex!important; align-items:center!important; justify-content:center!important; width:44px!important; height:44px!important; flex:0 0 44px!important; border-radius:13px!important; background: linear-gradient( 135deg, #edf4ff 0%, #f5f1ff 100% )!important; border:1px solid #dde7ff!important; color:#155eef!important; box-shadow: 0 7px 18px rgba(21,94,239,.08)!important; } .bsfc-card .bsfc-card-icon.dashicons{ width:22px!important; height:22px!important; font-size:22px!important; line-height:22px!important; color:#155eef!important; } .bsfc-card:has(.bsfc-card-banner) .bsfc-card-icon-wrap{ margin-top:-34px!important; position:relative!important; z-index:3!important; background:#fff!important; border:2px solid #fff!important; box-shadow: 0 8px 24px rgba(16,24,40,.14)!important; } /* ========================================================== BlueBeauty Category Tabs v2 ========================================================== */ .bsfc-tabs-shell{ width:100%!important; max-width:100%!important; overflow:hidden!important; } .bsfc-filters{ display:flex!important; align-items:center!important; gap:8px!important; width:100%!important; overflow-x:auto!important; overflow-y:hidden!important; flex-wrap:nowrap!important; padding:3px 2px 8px!important; scroll-behavior:smooth!important; scrollbar-width:thin!important; -webkit-overflow-scrolling:touch!important; } .bsfc-filters::-webkit-scrollbar{ height:5px!important; } .bsfc-filters::-webkit-scrollbar-thumb{ background:#d0d5dd!important; border-radius:20px!important; } .bsfc-filters button{ display:inline-flex!important; align-items:center!important; justify-content:center!important; gap:7px!important; flex:0 0 auto!important; white-space:nowrap!important; min-height:40px!important; padding:9px 13px!important; border:1px solid #e1e6ef!important; border-radius:12px!important; background:#fff!important; color:#344054!important; font-size:12px!important; line-height:1!important; font-weight:750!important; box-shadow: 0 2px 6px rgba(16,24,40,.035)!important; transition: background .18s ease, color .18s ease, border-color .18s ease, box-shadow .18s ease, transform .18s ease!important; } .bsfc-filters button:hover{ border-color:#b9ccff!important; color:#155eef!important; transform:translateY(-1px)!important; } .bsfc-filters button.is-active{ background: linear-gradient( 135deg, #155eef 0%, #285fd7 100% )!important; color:#fff!important; border-color:#155eef!important; box-shadow: 0 8px 20px rgba(21,94,239,.20)!important; } .bsfc-filters button small{ display:inline-flex!important; align-items:center!important; justify-content:center!important; min-width:20px!important; height:20px!important; padding:0 5px!important; border-radius:20px!important; background:#f2f4f7!important; color:#667085!important; font-size:10px!important; line-height:20px!important; font-weight:800!important; } .bsfc-filters button.is-active small{ background:rgba(255,255,255,.18)!important; color:#fff!important; } .bsfc-result-count{ display:inline-flex!important; align-items:center!important; white-space:nowrap!important; padding:7px 11px!important; border-radius:999px!important; background:#f2f4f7!important; color:#667085!important; font-size:11px!important; line-height:1!important; font-weight:700!important; } @media(max-width:900px){ .bsfc-toolbar{ display:block!important; } .bsfc-search{ max-width:none!important; width:100%!important; margin-bottom:10px!important; } .bsfc-result-count{ margin:0 0 10px!important; } .bsfc-tabs-shell{ margin-left:0!important; margin-right:0!important; } .bsfc-filters{ padding-bottom:9px!important; } } @media(max-width:600px){ .bsfc-filters button{ min-height:38px!important; padding:8px 11px!important; border-radius:11px!important; font-size:11.5px!important; } } /* ========================================================== BlueBeauty Tabs - Framed Multi Row Layout ========================================================== */ .bsfc-tabs-shell{ width:100%!important; max-width:100%!important; overflow:visible!important; margin-top:2px!important; margin-bottom:4px!important; padding:14px!important; border:1px solid #e4e9f2!important; border-radius:18px!important; background: linear-gradient( 135deg, #fbfcff 0%, #ffffff 55%, #f8faff 100% )!important; box-shadow: 0 8px 24px rgba(16,24,40,.045)!important; } .bsfc-filters{ display:flex!important; flex-direction:row!important; flex-wrap:wrap!important; align-items:center!important; justify-content:flex-start!important; gap:9px!important; width:100%!important; overflow:visible!important; padding:0!important; margin:0!important; scrollbar-width:none!important; } .bsfc-filters::-webkit-scrollbar{ display:none!important; } /* * Sekmeler masaüstünde dengeli genişlikte. * Çok uzun olanlar gerektiğinde genişleyebilir. */ .bsfc-filters button{ flex: 1 1 clamp( 145px, 14.5%, 190px )!important; max-width:220px!important; min-width:145px!important; min-height:42px!important; padding:10px 13px!important; border-radius:12px!important; white-space:normal!important; text-align:center!important; line-height:1.2!important; } .bsfc-filters button span{ display:block!important; min-width:0!important; line-height:1.25!important; } .bsfc-filters button small{ flex:0 0 auto!important; } /* * Tümü sekmesini fazla büyütme. */ .bsfc-filters button[data-filter="*"]{ flex-grow:.65!important; } /* * Tablet */ @media(max-width:1100px){ .bsfc-tabs-shell{ padding:12px!important; } .bsfc-filters{ gap:8px!important; } .bsfc-filters button{ flex: 1 1 calc(25% - 8px)!important; max-width:none!important; min-width:150px!important; } } /* * Küçük tablet */ @media(max-width:780px){ .bsfc-tabs-shell{ padding:10px!important; border-radius:15px!important; } .bsfc-filters button{ flex: 1 1 calc(33.333% - 8px)!important; min-width:135px!important; min-height:40px!important; padding:9px 10px!important; } } /* * Mobil */ @media(max-width:560px){ .bsfc-tabs-shell{ padding:9px!important; } .bsfc-filters{ gap:7px!important; } .bsfc-filters button{ flex: 1 1 calc(50% - 7px)!important; min-width:0!important; max-width:none!important; font-size:11px!important; } .bsfc-filters button small{ min-width:18px!important; height:18px!important; line-height:18px!important; font-size:9px!important; } } /* * Çok dar telefonlarda hâlâ 2 kolon, * ama taşma olmasın. */ @media(max-width:380px){ .bsfc-filters button{ padding:8px 7px!important; font-size:10.5px!important; } } /* ========================================================== BlueBeauty Tabs - Framed Multi Row Layout ========================================================== */ .bsfc-tabs-shell{ width:100%!important; max-width:100%!important; overflow:visible!important; margin-top:2px!important; margin-bottom:4px!important; padding:14px!important; border:1px solid #e4e9f2!important; border-radius:18px!important; background: linear-gradient( 135deg, #fbfcff 0%, #ffffff 55%, #f8faff 100% )!important; box-shadow: 0 8px 24px rgba(16,24,40,.045)!important; } .bsfc-filters{ display:flex!important; flex-direction:row!important; flex-wrap:wrap!important; align-items:center!important; justify-content:flex-start!important; gap:9px!important; width:100%!important; overflow:visible!important; padding:0!important; margin:0!important; scrollbar-width:none!important; } .bsfc-filters::-webkit-scrollbar{ display:none!important; } /* * Sekmeler masaüstünde dengeli genişlikte. * Çok uzun olanlar gerektiğinde genişleyebilir. */ .bsfc-filters button{ flex: 1 1 clamp( 145px, 14.5%, 190px )!important; max-width:220px!important; min-width:145px!important; min-height:42px!important; padding:10px 13px!important; border-radius:12px!important; white-space:normal!important; text-align:center!important; line-height:1.2!important; } .bsfc-filters button span{ display:block!important; min-width:0!important; line-height:1.25!important; } .bsfc-filters button small{ flex:0 0 auto!important; } /* * Tümü sekmesini fazla büyütme. */ .bsfc-filters button[data-filter="*"]{ flex-grow:.65!important; } /* * Tablet */ @media(max-width:1100px){ .bsfc-tabs-shell{ padding:12px!important; } .bsfc-filters{ gap:8px!important; } .bsfc-filters button{ flex: 1 1 calc(25% - 8px)!important; max-width:none!important; min-width:150px!important; } } /* * Küçük tablet */ @media(max-width:780px){ .bsfc-tabs-shell{ padding:10px!important; border-radius:15px!important; } .bsfc-filters button{ flex: 1 1 calc(33.333% - 8px)!important; min-width:135px!important; min-height:40px!important; padding:9px 10px!important; } } /* * Mobil */ @media(max-width:560px){ .bsfc-tabs-shell{ padding:9px!important; } .bsfc-filters{ gap:7px!important; } .bsfc-filters button{ flex: 1 1 calc(50% - 7px)!important; min-width:0!important; max-width:none!important; font-size:11px!important; } .bsfc-filters button small{ min-width:18px!important; height:18px!important; line-height:18px!important; font-size:9px!important; } } /* * Çok dar telefonlarda hâlâ 2 kolon, * ama taşma olmasın. */ @media(max-width:380px){ .bsfc-filters button{ padding:8px 7px!important; font-size:10.5px!important; } } /* ========================================================== BlueBeauty Tabs Çok satırlı düzen + önceki premium buton görünümü ========================================================== */ .bsfc-tabs-shell{ width:100%!important; max-width:100%!important; overflow:visible!important; padding:14px!important; margin:0 0 8px!important; border:1px solid #e4e7ec!important; border-radius:18px!important; background:#fff!important; box-shadow: 0 10px 35px rgba(16,24,40,.045)!important; } .bsfc-filters{ display:flex!important; flex-wrap:wrap!important; align-items:stretch!important; justify-content:flex-start!important; gap:8px!important; width:100%!important; padding:0!important; margin:0!important; overflow:visible!important; } /* * Önceki premium buton görünümü */ .bsfc-filters button{ appearance:none!important; display:inline-flex!important; align-items:center!important; justify-content:center!important; gap:7px!important; flex:1 1 160px!important; min-width:150px!important; max-width:210px!important; min-height:40px!important; padding:9px 13px!important; border:1px solid #e4e7ec!important; border-radius:999px!important; background:#fff!important; color:#344054!important; font:inherit!important; font-size:12px!important; font-weight:700!important; line-height:1.15!important; white-space:normal!important; text-align:center!important; cursor:pointer!important; box-shadow:none!important; transition: background .2s ease, color .2s ease, border-color .2s ease, box-shadow .2s ease, transform .2s ease!important; } /* * Hover: * okunabilirlik kesin korunur */ .bsfc-filters button:hover{ background:#f5f8ff!important; color:#155eef!important; border-color:#b9c9ff!important; box-shadow: 0 7px 17px rgba(21,94,239,.10)!important; transform:translateY(-1px)!important; } .bsfc-filters button:hover span{ color:#155eef!important; } /* * Aktif tab */ .bsfc-filters button.is-active{ background:#155eef!important; color:#fff!important; border-color:#155eef!important; box-shadow: 0 7px 17px rgba(21,94,239,.19)!important; } .bsfc-filters button.is-active span{ color:#fff!important; } /* * Aktif buton hover olduğunda * yazı kesinlikle beyaz kalır */ .bsfc-filters button.is-active:hover{ background:#155eef!important; color:#fff!important; border-color:#155eef!important; transform:translateY(-1px)!important; box-shadow: 0 9px 22px rgba(21,94,239,.23)!important; } .bsfc-filters button.is-active:hover span{ color:#fff!important; } /* * Sayı rozeti */ .bsfc-filters button small{ display:inline-flex!important; align-items:center!important; justify-content:center!important; flex:0 0 auto!important; min-width:20px!important; height:20px!important; padding:0 5px!important; border-radius:999px!important; background:#f2f4f7!important; color:#667085!important; font-size:9.5px!important; font-weight:800!important; line-height:20px!important; } /* * Hover sırasında badge de okunabilir */ .bsfc-filters button:hover small{ background:#eaf0ff!important; color:#155eef!important; } .bsfc-filters button.is-active small, .bsfc-filters button.is-active:hover small{ background:rgba(255,255,255,.18)!important; color:#fff!important; } /* * Tümü butonu da diğerleriyle aynı hizada */ .bsfc-filters button[data-filter="*"]{ flex:1 1 120px!important; min-width:110px!important; max-width:150px!important; } /* * Masaüstünde 2-3 satıra dengeli dağılım */ @media(min-width:1200px){ .bsfc-filters button{ flex:1 1 calc(16.666% - 8px)!important; max-width:none!important; } .bsfc-filters button[data-filter="*"]{ flex:1 1 calc(16.666% - 8px)!important; max-width:none!important; } } /* * Orta ekran */ @media(max-width:1199px){ .bsfc-filters button{ flex:1 1 calc(25% - 8px)!important; max-width:none!important; } .bsfc-filters button[data-filter="*"]{ flex:1 1 calc(25% - 8px)!important; max-width:none!important; } } /* * Tablet */ @media(max-width:820px){ .bsfc-tabs-shell{ padding:11px!important; } .bsfc-filters button{ flex:1 1 calc(33.333% - 8px)!important; min-width:135px!important; max-width:none!important; } .bsfc-filters button[data-filter="*"]{ flex:1 1 calc(33.333% - 8px)!important; min-width:135px!important; max-width:none!important; } } /* * Mobil */ @media(max-width:560px){ .bsfc-tabs-shell{ padding:9px!important; border-radius:15px!important; } .bsfc-filters{ gap:7px!important; } .bsfc-filters button, .bsfc-filters button[data-filter="*"]{ flex:1 1 calc(50% - 7px)!important; min-width:0!important; max-width:none!important; min-height:38px!important; padding:8px 10px!important; font-size:11px!important; } } /* ========================================================== * BlueBeauty Mobile Category Select * ========================================================== */ .bb-mobile-category-box{ display:none; } @media (max-width:767px){ /* * Mobilde çok sıralı tab menüsünü tamamen kaldır. */ .bsfc-tabs-shell{ display:none!important; } .bb-mobile-category-box{ display:block; margin: 14px 0 22px; padding: 16px; background:#fff; border: 1px solid rgba(30,64,175,.12); border-radius: 18px; box-shadow: 0 8px 28px rgba(31,41,55,.07); } .bb-mobile-category-label{ display:block; margin: 0 0 8px; color:#344054; font-size: 13px; font-weight: 700; line-height: 1.4; } .bb-mobile-category-select-wrap{ position:relative; } .bb-mobile-category-select-wrap > .dashicons{ position:absolute; left:14px; top:50%; width:20px; height:20px; margin-top:-10px; color:#155eef; font-size:20px; line-height:20px; pointer-events:none; z-index:2; } .bb-mobile-category-select{ display:block!important; width:100%!important; max-width:none!important; height:50px!important; min-height:50px!important; margin:0!important; padding: 0 42px 0 44px!important; color:#101828!important; background-color:#f8fafc!important; border: 1px solid #d0d5dd!important; border-radius: 13px!important; box-shadow: 0 1px 2px rgba(16,24,40,.04)!important; font-size: 15px!important; font-weight: 650!important; line-height: 50px!important; appearance:auto!important; -webkit-appearance:auto!important; touch-action: manipulation!important; } .bb-mobile-category-select:focus{ border-color: #155eef!important; box-shadow: 0 0 0 3px rgba(21,94,239,.10)!important; outline:none!important; } /* * Mobil kartların filtre sonrası boşluk davranışı. */ .bsfc-card[hidden]{ display:none!important; } }