/* bootstrap-grid.min.css */ /*! * Bootstrap Grid v5.3.3 (https://getbootstrap.com/) * Copyright 2011-2024 The Bootstrap Authors * Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE) */.container,.container-fluid,.container-lg,.container-md,.container-sm,.container-xl,.container-xxl{--bs-gutter-x:1.5rem;--bs-gutter-y:0;width:100%;padding-right:calc(var(--bs-gutter-x) * .5);padding-left:calc(var(--bs-gutter-x) * .5);margin-right:auto;margin-left:auto}@media (min-width:576px){.container,.container-sm{max-width:540px}}@media (min-width:768px){.container,.container-md,.container-sm{max-width:720px}}@media (min-width:992px){.container,.container-lg,.container-md,.container-sm{max-width:960px}}@media (min-width:1200px){.container,.container-lg,.container-md,.container-sm,.container-xl{max-width:1140px}}@media (min-width:1400px){.container,.container-lg,.container-md,.container-sm,.container-xl,.container-xxl{max-width:1320px}}:root{--bs-breakpoint-xs:0;--bs-breakpoint-sm:576px;--bs-breakpoint-md:768px;--bs-breakpoint-lg:992px;--bs-breakpoint-xl:1200px;--bs-breakpoint-xxl:1400px}.row{--bs-gutter-x:1.5rem;--bs-gutter-y:0;display:flex;flex-wrap:wrap;margin-top:calc(-1 * var(--bs-gutter-y));margin-right:calc(-.5 * var(--bs-gutter-x));margin-left:calc(-.5 * var(--bs-gutter-x))}.row>*{box-sizing:border-box;flex-shrink:0;width:100%;max-width:100%;padding-right:calc(var(--bs-gutter-x) * .5);padding-left:calc(var(--bs-gutter-x) * .5);margin-top:var(--bs-gutter-y)}.col{flex:1 0 0%}.row-cols-auto>*{flex:0 0 auto;width:auto}.row-cols-1>*{flex:0 0 auto;width:100%}.row-cols-2>*{flex:0 0 auto;width:50%}.row-cols-3>*{flex:0 0 auto;width:33.33333333%}.row-cols-4>*{flex:0 0 auto;width:25%}.row-cols-5>*{flex:0 0 auto;width:20%}.row-cols-6>*{flex:0 0 auto;width:16.66666667%}.col-auto{flex:0 0 auto;width:auto}.col-1{flex:0 0 auto;width:8.33333333%}.col-2{flex:0 0 auto;width:16.66666667%}.col-3{flex:0 0 auto;width:25%}.col-4{flex:0 0 auto;width:33.33333333%}.col-5{flex:0 0 auto;width:41.66666667%}.col-6{flex:0 0 auto;width:50%}.col-7{flex:0 0 auto;width:58.33333333%}.col-8{flex:0 0 auto;width:66.66666667%}.col-9{flex:0 0 auto;width:75%}.col-10{flex:0 0 auto;width:83.33333333%}.col-11{flex:0 0 auto;width:91.66666667%}.col-12{flex:0 0 auto;width:100%}.offset-1{margin-left:8.33333333%}.offset-2{margin-left:16.66666667%}.offset-3{margin-left:25%}.offset-4{margin-left:33.33333333%}.offset-5{margin-left:41.66666667%}.offset-6{margin-left:50%}.offset-7{margin-left:58.33333333%}.offset-8{margin-left:66.66666667%}.offset-9{margin-left:75%}.offset-10{margin-left:83.33333333%}.offset-11{margin-left:91.66666667%}.g-0,.gx-0{--bs-gutter-x:0}.g-0,.gy-0{--bs-gutter-y:0}.g-1,.gx-1{--bs-gutter-x:0.25rem}.g-1,.gy-1{--bs-gutter-y:0.25rem}.g-2,.gx-2{--bs-gutter-x:0.5rem}.g-2,.gy-2{--bs-gutter-y:0.5rem}.g-3,.gx-3{--bs-gutter-x:1rem}.g-3,.gy-3{--bs-gutter-y:1rem}.g-4,.gx-4{--bs-gutter-x:1.5rem}.g-4,.gy-4{--bs-gutter-y:1.5rem}.g-5,.gx-5{--bs-gutter-x:3rem}.g-5,.gy-5{--bs-gutter-y:3rem}@media (min-width:576px){.col-sm{flex:1 0 0%}.row-cols-sm-auto>*{flex:0 0 auto;width:auto}.row-cols-sm-1>*{flex:0 0 auto;width:100%}.row-cols-sm-2>*{flex:0 0 auto;width:50%}.row-cols-sm-3>*{flex:0 0 auto;width:33.33333333%}.row-cols-sm-4>*{flex:0 0 auto;width:25%}.row-cols-sm-5>*{flex:0 0 auto;width:20%}.row-cols-sm-6>*{flex:0 0 auto;width:16.66666667%}.col-sm-auto{flex:0 0 auto;width:auto}.col-sm-1{flex:0 0 auto;width:8.33333333%}.col-sm-2{flex:0 0 auto;width:16.66666667%}.col-sm-3{flex:0 0 auto;width:25%}.col-sm-4{flex:0 0 auto;width:33.33333333%}.col-sm-5{flex:0 0 auto;width:41.66666667%}.col-sm-6{flex:0 0 auto;width:50%}.col-sm-7{flex:0 0 auto;width:58.33333333%}.col-sm-8{flex:0 0 auto;width:66.66666667%}.col-sm-9{flex:0 0 auto;width:75%}.col-sm-10{flex:0 0 auto;width:83.33333333%}.col-sm-11{flex:0 0 auto;width:91.66666667%}.col-sm-12{flex:0 0 auto;width:100%}.offset-sm-0{margin-left:0}.offset-sm-1{margin-left:8.33333333%}.offset-sm-2{margin-left:16.66666667%}.offset-sm-3{margin-left:25%}.offset-sm-4{margin-left:33.33333333%}.offset-sm-5{margin-left:41.66666667%}.offset-sm-6{margin-left:50%}.offset-sm-7{margin-left:58.33333333%}.offset-sm-8{margin-left:66.66666667%}.offset-sm-9{margin-left:75%}.offset-sm-10{margin-left:83.33333333%}.offset-sm-11{margin-left:91.66666667%}.g-sm-0,.gx-sm-0{--bs-gutter-x:0}.g-sm-0,.gy-sm-0{--bs-gutter-y:0}.g-sm-1,.gx-sm-1{--bs-gutter-x:0.25rem}.g-sm-1,.gy-sm-1{--bs-gutter-y:0.25rem}.g-sm-2,.gx-sm-2{--bs-gutter-x:0.5rem}.g-sm-2,.gy-sm-2{--bs-gutter-y:0.5rem}.g-sm-3,.gx-sm-3{--bs-gutter-x:1rem}.g-sm-3,.gy-sm-3{--bs-gutter-y:1rem}.g-sm-4,.gx-sm-4{--bs-gutter-x:1.5rem}.g-sm-4,.gy-sm-4{--bs-gutter-y:1.5rem}.g-sm-5,.gx-sm-5{--bs-gutter-x:3rem}.g-sm-5,.gy-sm-5{--bs-gutter-y:3rem}}@media (min-width:768px){.col-md{flex:1 0 0%}.row-cols-md-auto>*{flex:0 0 auto;width:auto}.row-cols-md-1>*{flex:0 0 auto;width:100%}.row-cols-md-2>*{flex:0 0 auto;width:50%}.row-cols-md-3>*{flex:0 0 auto;width:33.33333333%}.row-cols-md-4>*{flex:0 0 auto;width:25%}.row-cols-md-5>*{flex:0 0 auto;width:20%}.row-cols-md-6>*{flex:0 0 auto;width:16.66666667%}.col-md-auto{flex:0 0 auto;width:auto}.col-md-1{flex:0 0 auto;width:8.33333333%}.col-md-2{flex:0 0 auto;width:16.66666667%}.col-md-3{flex:0 0 auto;width:25%}.col-md-4{flex:0 0 auto;width:33.33333333%}.col-md-5{flex:0 0 auto;width:41.66666667%}.col-md-6{flex:0 0 auto;width:50%}.col-md-7{flex:0 0 auto;width:58.33333333%}.col-md-8{flex:0 0 auto;width:66.66666667%}.col-md-9{flex:0 0 auto;width:75%}.col-md-10{flex:0 0 auto;width:83.33333333%}.col-md-11{flex:0 0 auto;width:91.66666667%}.col-md-12{flex:0 0 auto;width:100%}.offset-md-0{margin-left:0}.offset-md-1{margin-left:8.33333333%}.offset-md-2{margin-left:16.66666667%}.offset-md-3{margin-left:25%}.offset-md-4{margin-left:33.33333333%}.offset-md-5{margin-left:41.66666667%}.offset-md-6{margin-left:50%}.offset-md-7{margin-left:58.33333333%}.offset-md-8{margin-left:66.66666667%}.offset-md-9{margin-left:75%}.offset-md-10{margin-left:83.33333333%}.offset-md-11{margin-left:91.66666667%}.g-md-0,.gx-md-0{--bs-gutter-x:0}.g-md-0,.gy-md-0{--bs-gutter-y:0}.g-md-1,.gx-md-1{--bs-gutter-x:0.25rem}.g-md-1,.gy-md-1{--bs-gutter-y:0.25rem}.g-md-2,.gx-md-2{--bs-gutter-x:0.5rem}.g-md-2,.gy-md-2{--bs-gutter-y:0.5rem}.g-md-3,.gx-md-3{--bs-gutter-x:1rem}.g-md-3,.gy-md-3{--bs-gutter-y:1rem}.g-md-4,.gx-md-4{--bs-gutter-x:1.5rem}.g-md-4,.gy-md-4{--bs-gutter-y:1.5rem}.g-md-5,.gx-md-5{--bs-gutter-x:3rem}.g-md-5,.gy-md-5{--bs-gutter-y:3rem}}@media (min-width:992px){.col-lg{flex:1 0 0%}.row-cols-lg-auto>*{flex:0 0 auto;width:auto}.row-cols-lg-1>*{flex:0 0 auto;width:100%}.row-cols-lg-2>*{flex:0 0 auto;width:50%}.row-cols-lg-3>*{flex:0 0 auto;width:33.33333333%}.row-cols-lg-4>*{flex:0 0 auto;width:25%}.row-cols-lg-5>*{flex:0 0 auto;width:20%}.row-cols-lg-6>*{flex:0 0 auto;width:16.66666667%}.col-lg-auto{flex:0 0 auto;width:auto}.col-lg-1{flex:0 0 auto;width:8.33333333%}.col-lg-2{flex:0 0 auto;width:16.66666667%}.col-lg-3{flex:0 0 auto;width:25%}.col-lg-4{flex:0 0 auto;width:33.33333333%}.col-lg-5{flex:0 0 auto;width:41.66666667%}.col-lg-6{flex:0 0 auto;width:50%}.col-lg-7{flex:0 0 auto;width:58.33333333%}.col-lg-8{flex:0 0 auto;width:66.66666667%}.col-lg-9{flex:0 0 auto;width:75%}.col-lg-10{flex:0 0 auto;width:83.33333333%}.col-lg-11{flex:0 0 auto;width:91.66666667%}.col-lg-12{flex:0 0 auto;width:100%}.offset-lg-0{margin-left:0}.offset-lg-1{margin-left:8.33333333%}.offset-lg-2{margin-left:16.66666667%}.offset-lg-3{margin-left:25%}.offset-lg-4{margin-left:33.33333333%}.offset-lg-5{margin-left:41.66666667%}.offset-lg-6{margin-left:50%}.offset-lg-7{margin-left:58.33333333%}.offset-lg-8{margin-left:66.66666667%}.offset-lg-9{margin-left:75%}.offset-lg-10{margin-left:83.33333333%}.offset-lg-11{margin-left:91.66666667%}.g-lg-0,.gx-lg-0{--bs-gutter-x:0}.g-lg-0,.gy-lg-0{--bs-gutter-y:0}.g-lg-1,.gx-lg-1{--bs-gutter-x:0.25rem}.g-lg-1,.gy-lg-1{--bs-gutter-y:0.25rem}.g-lg-2,.gx-lg-2{--bs-gutter-x:0.5rem}.g-lg-2,.gy-lg-2{--bs-gutter-y:0.5rem}.g-lg-3,.gx-lg-3{--bs-gutter-x:1rem}.g-lg-3,.gy-lg-3{--bs-gutter-y:1rem}.g-lg-4,.gx-lg-4{--bs-gutter-x:1.5rem}.g-lg-4,.gy-lg-4{--bs-gutter-y:1.5rem}.g-lg-5,.gx-lg-5{--bs-gutter-x:3rem}.g-lg-5,.gy-lg-5{--bs-gutter-y:3rem}}@media (min-width:1200px){.col-xl{flex:1 0 0%}.row-cols-xl-auto>*{flex:0 0 auto;width:auto}.row-cols-xl-1>*{flex:0 0 auto;width:100%}.row-cols-xl-2>*{flex:0 0 auto;width:50%}.row-cols-xl-3>*{flex:0 0 auto;width:33.33333333%}.row-cols-xl-4>*{flex:0 0 auto;width:25%}.row-cols-xl-5>*{flex:0 0 auto;width:20%}.row-cols-xl-6>*{flex:0 0 auto;width:16.66666667%}.col-xl-auto{flex:0 0 auto;width:auto}.col-xl-1{flex:0 0 auto;width:8.33333333%}.col-xl-2{flex:0 0 auto;width:16.66666667%}.col-xl-3{flex:0 0 auto;width:25%}.col-xl-4{flex:0 0 auto;width:33.33333333%}.col-xl-5{flex:0 0 auto;width:41.66666667%}.col-xl-6{flex:0 0 auto;width:50%}.col-xl-7{flex:0 0 auto;width:58.33333333%}.col-xl-8{flex:0 0 auto;width:66.66666667%}.col-xl-9{flex:0 0 auto;width:75%}.col-xl-10{flex:0 0 auto;width:83.33333333%}.col-xl-11{flex:0 0 auto;width:91.66666667%}.col-xl-12{flex:0 0 auto;width:100%}.offset-xl-0{margin-left:0}.offset-xl-1{margin-left:8.33333333%}.offset-xl-2{margin-left:16.66666667%}.offset-xl-3{margin-left:25%}.offset-xl-4{margin-left:33.33333333%}.offset-xl-5{margin-left:41.66666667%}.offset-xl-6{margin-left:50%}.offset-xl-7{margin-left:58.33333333%}.offset-xl-8{margin-left:66.66666667%}.offset-xl-9{margin-left:75%}.offset-xl-10{margin-left:83.33333333%}.offset-xl-11{margin-left:91.66666667%}.g-xl-0,.gx-xl-0{--bs-gutter-x:0}.g-xl-0,.gy-xl-0{--bs-gutter-y:0}.g-xl-1,.gx-xl-1{--bs-gutter-x:0.25rem}.g-xl-1,.gy-xl-1{--bs-gutter-y:0.25rem}.g-xl-2,.gx-xl-2{--bs-gutter-x:0.5rem}.g-xl-2,.gy-xl-2{--bs-gutter-y:0.5rem}.g-xl-3,.gx-xl-3{--bs-gutter-x:1rem}.g-xl-3,.gy-xl-3{--bs-gutter-y:1rem}.g-xl-4,.gx-xl-4{--bs-gutter-x:1.5rem}.g-xl-4,.gy-xl-4{--bs-gutter-y:1.5rem}.g-xl-5,.gx-xl-5{--bs-gutter-x:3rem}.g-xl-5,.gy-xl-5{--bs-gutter-y:3rem}}@media (min-width:1400px){.col-xxl{flex:1 0 0%}.row-cols-xxl-auto>*{flex:0 0 auto;width:auto}.row-cols-xxl-1>*{flex:0 0 auto;width:100%}.row-cols-xxl-2>*{flex:0 0 auto;width:50%}.row-cols-xxl-3>*{flex:0 0 auto;width:33.33333333%}.row-cols-xxl-4>*{flex:0 0 auto;width:25%}.row-cols-xxl-5>*{flex:0 0 auto;width:20%}.row-cols-xxl-6>*{flex:0 0 auto;width:16.66666667%}.col-xxl-auto{flex:0 0 auto;width:auto}.col-xxl-1{flex:0 0 auto;width:8.33333333%}.col-xxl-2{flex:0 0 auto;width:16.66666667%}.col-xxl-3{flex:0 0 auto;width:25%}.col-xxl-4{flex:0 0 auto;width:33.33333333%}.col-xxl-5{flex:0 0 auto;width:41.66666667%}.col-xxl-6{flex:0 0 auto;width:50%}.col-xxl-7{flex:0 0 auto;width:58.33333333%}.col-xxl-8{flex:0 0 auto;width:66.66666667%}.col-xxl-9{flex:0 0 auto;width:75%}.col-xxl-10{flex:0 0 auto;width:83.33333333%}.col-xxl-11{flex:0 0 auto;width:91.66666667%}.col-xxl-12{flex:0 0 auto;width:100%}.offset-xxl-0{margin-left:0}.offset-xxl-1{margin-left:8.33333333%}.offset-xxl-2{margin-left:16.66666667%}.offset-xxl-3{margin-left:25%}.offset-xxl-4{margin-left:33.33333333%}.offset-xxl-5{margin-left:41.66666667%}.offset-xxl-6{margin-left:50%}.offset-xxl-7{margin-left:58.33333333%}.offset-xxl-8{margin-left:66.66666667%}.offset-xxl-9{margin-left:75%}.offset-xxl-10{margin-left:83.33333333%}.offset-xxl-11{margin-left:91.66666667%}.g-xxl-0,.gx-xxl-0{--bs-gutter-x:0}.g-xxl-0,.gy-xxl-0{--bs-gutter-y:0}.g-xxl-1,.gx-xxl-1{--bs-gutter-x:0.25rem}.g-xxl-1,.gy-xxl-1{--bs-gutter-y:0.25rem}.g-xxl-2,.gx-xxl-2{--bs-gutter-x:0.5rem}.g-xxl-2,.gy-xxl-2{--bs-gutter-y:0.5rem}.g-xxl-3,.gx-xxl-3{--bs-gutter-x:1rem}.g-xxl-3,.gy-xxl-3{--bs-gutter-y:1rem}.g-xxl-4,.gx-xxl-4{--bs-gutter-x:1.5rem}.g-xxl-4,.gy-xxl-4{--bs-gutter-y:1.5rem}.g-xxl-5,.gx-xxl-5{--bs-gutter-x:3rem}.g-xxl-5,.gy-xxl-5{--bs-gutter-y:3rem}}.d-inline{display:inline!important}.d-inline-block{display:inline-block!important}.d-block{display:block!important}.d-grid{display:grid!important}.d-inline-grid{display:inline-grid!important}.d-table{display:table!important}.d-table-row{display:table-row!important}.d-table-cell{display:table-cell!important}.d-flex{display:flex!important}.d-inline-flex{display:inline-flex!important}.d-none{display:none!important}.flex-fill{flex:1 1 auto!important}.flex-row{flex-direction:row!important}.flex-column{flex-direction:column!important}.flex-row-reverse{flex-direction:row-reverse!important}.flex-column-reverse{flex-direction:column-reverse!important}.flex-grow-0{flex-grow:0!important}.flex-grow-1{flex-grow:1!important}.flex-shrink-0{flex-shrink:0!important}.flex-shrink-1{flex-shrink:1!important}.flex-wrap{flex-wrap:wrap!important}.flex-nowrap{flex-wrap:nowrap!important}.flex-wrap-reverse{flex-wrap:wrap-reverse!important}.justify-content-start{justify-content:flex-start!important}.justify-content-end{justify-content:flex-end!important}.justify-content-center{justify-content:center!important}.justify-content-between{justify-content:space-between!important}.justify-content-around{justify-content:space-around!important}.justify-content-evenly{justify-content:space-evenly!important}.align-items-start{align-items:flex-start!important}.align-items-end{align-items:flex-end!important}.align-items-center{align-items:center!important}.align-items-baseline{align-items:baseline!important}.align-items-stretch{align-items:stretch!important}.align-content-start{align-content:flex-start!important}.align-content-end{align-content:flex-end!important}.align-content-center{align-content:center!important}.align-content-between{align-content:space-between!important}.align-content-around{align-content:space-around!important}.align-content-stretch{align-content:stretch!important}.align-self-auto{align-self:auto!important}.align-self-start{align-self:flex-start!important}.align-self-end{align-self:flex-end!important}.align-self-center{align-self:center!important}.align-self-baseline{align-self:baseline!important}.align-self-stretch{align-self:stretch!important}.order-first{order:-1!important}.order-0{order:0!important}.order-1{order:1!important}.order-2{order:2!important}.order-3{order:3!important}.order-4{order:4!important}.order-5{order:5!important}.order-last{order:6!important}.m-0{margin:0!important}.m-1{margin:.25rem!important}.m-2{margin:.5rem!important}.m-3{margin:1rem!important}.m-4{margin:1.5rem!important}.m-5{margin:3rem!important}.m-auto{margin:auto!important}.mx-0{margin-right:0!important;margin-left:0!important}.mx-1{margin-right:.25rem!important;margin-left:.25rem!important}.mx-2{margin-right:.5rem!important;margin-left:.5rem!important}.mx-3{margin-right:1rem!important;margin-left:1rem!important}.mx-4{margin-right:1.5rem!important;margin-left:1.5rem!important}.mx-5{margin-right:3rem!important;margin-left:3rem!important}.mx-auto{margin-right:auto!important;margin-left:auto!important}.my-0{margin-top:0!important;margin-bottom:0!important}.my-1{margin-top:.25rem!important;margin-bottom:.25rem!important}.my-2{margin-top:.5rem!important;margin-bottom:.5rem!important}.my-3{margin-top:1rem!important;margin-bottom:1rem!important}.my-4{margin-top:1.5rem!important;margin-bottom:1.5rem!important}.my-5{margin-top:3rem!important;margin-bottom:3rem!important}.my-auto{margin-top:auto!important;margin-bottom:auto!important}.mt-0{margin-top:0!important}.mt-1{margin-top:.25rem!important}.mt-2{margin-top:.5rem!important}.mt-3{margin-top:1rem!important}.mt-4{margin-top:1.5rem!important}.mt-5{margin-top:3rem!important}.mt-auto{margin-top:auto!important}.me-0{margin-right:0!important}.me-1{margin-right:.25rem!important}.me-2{margin-right:.5rem!important}.me-3{margin-right:1rem!important}.me-4{margin-right:1.5rem!important}.me-5{margin-right:3rem!important}.me-auto{margin-right:auto!important}.mb-0{margin-bottom:0!important}.mb-1{margin-bottom:.25rem!important}.mb-2{margin-bottom:.5rem!important}.mb-3{margin-bottom:1rem!important}.mb-4{margin-bottom:1.5rem!important}.mb-5{margin-bottom:3rem!important}.mb-auto{margin-bottom:auto!important}.ms-0{margin-left:0!important}.ms-1{margin-left:.25rem!important}.ms-2{margin-left:.5rem!important}.ms-3{margin-left:1rem!important}.ms-4{margin-left:1.5rem!important}.ms-5{margin-left:3rem!important}.ms-auto{margin-left:auto!important}.p-0{padding:0!important}.p-1{padding:.25rem!important}.p-2{padding:.5rem!important}.p-3{padding:1rem!important}.p-4{padding:1.5rem!important}.p-5{padding:3rem!important}.px-0{padding-right:0!important;padding-left:0!important}.px-1{padding-right:.25rem!important;padding-left:.25rem!important}.px-2{padding-right:.5rem!important;padding-left:.5rem!important}.px-3{padding-right:1rem!important;padding-left:1rem!important}.px-4{padding-right:1.5rem!important;padding-left:1.5rem!important}.px-5{padding-right:3rem!important;padding-left:3rem!important}.py-0{padding-top:0!important;padding-bottom:0!important}.py-1{padding-top:.25rem!important;padding-bottom:.25rem!important}.py-2{padding-top:.5rem!important;padding-bottom:.5rem!important}.py-3{padding-top:1rem!important;padding-bottom:1rem!important}.py-4{padding-top:1.5rem!important;padding-bottom:1.5rem!important}.py-5{padding-top:3rem!important;padding-bottom:3rem!important}.pt-0{padding-top:0!important}.pt-1{padding-top:.25rem!important}.pt-2{padding-top:.5rem!important}.pt-3{padding-top:1rem!important}.pt-4{padding-top:1.5rem!important}.pt-5{padding-top:3rem!important}.pe-0{padding-right:0!important}.pe-1{padding-right:.25rem!important}.pe-2{padding-right:.5rem!important}.pe-3{padding-right:1rem!important}.pe-4{padding-right:1.5rem!important}.pe-5{padding-right:3rem!important}.pb-0{padding-bottom:0!important}.pb-1{padding-bottom:.25rem!important}.pb-2{padding-bottom:.5rem!important}.pb-3{padding-bottom:1rem!important}.pb-4{padding-bottom:1.5rem!important}.pb-5{padding-bottom:3rem!important}.ps-0{padding-left:0!important}.ps-1{padding-left:.25rem!important}.ps-2{padding-left:.5rem!important}.ps-3{padding-left:1rem!important}.ps-4{padding-left:1.5rem!important}.ps-5{padding-left:3rem!important}@media (min-width:576px){.d-sm-inline{display:inline!important}.d-sm-inline-block{display:inline-block!important}.d-sm-block{display:block!important}.d-sm-grid{display:grid!important}.d-sm-inline-grid{display:inline-grid!important}.d-sm-table{display:table!important}.d-sm-table-row{display:table-row!important}.d-sm-table-cell{display:table-cell!important}.d-sm-flex{display:flex!important}.d-sm-inline-flex{display:inline-flex!important}.d-sm-none{display:none!important}.flex-sm-fill{flex:1 1 auto!important}.flex-sm-row{flex-direction:row!important}.flex-sm-column{flex-direction:column!important}.flex-sm-row-reverse{flex-direction:row-reverse!important}.flex-sm-column-reverse{flex-direction:column-reverse!important}.flex-sm-grow-0{flex-grow:0!important}.flex-sm-grow-1{flex-grow:1!important}.flex-sm-shrink-0{flex-shrink:0!important}.flex-sm-shrink-1{flex-shrink:1!important}.flex-sm-wrap{flex-wrap:wrap!important}.flex-sm-nowrap{flex-wrap:nowrap!important}.flex-sm-wrap-reverse{flex-wrap:wrap-reverse!important}.justify-content-sm-start{justify-content:flex-start!important}.justify-content-sm-end{justify-content:flex-end!important}.justify-content-sm-center{justify-content:center!important}.justify-content-sm-between{justify-content:space-between!important}.justify-content-sm-around{justify-content:space-around!important}.justify-content-sm-evenly{justify-content:space-evenly!important}.align-items-sm-start{align-items:flex-start!important}.align-items-sm-end{align-items:flex-end!important}.align-items-sm-center{align-items:center!important}.align-items-sm-baseline{align-items:baseline!important}.align-items-sm-stretch{align-items:stretch!important}.align-content-sm-start{align-content:flex-start!important}.align-content-sm-end{align-content:flex-end!important}.align-content-sm-center{align-content:center!important}.align-content-sm-between{align-content:space-between!important}.align-content-sm-around{align-content:space-around!important}.align-content-sm-stretch{align-content:stretch!important}.align-self-sm-auto{align-self:auto!important}.align-self-sm-start{align-self:flex-start!important}.align-self-sm-end{align-self:flex-end!important}.align-self-sm-center{align-self:center!important}.align-self-sm-baseline{align-self:baseline!important}.align-self-sm-stretch{align-self:stretch!important}.order-sm-first{order:-1!important}.order-sm-0{order:0!important}.order-sm-1{order:1!important}.order-sm-2{order:2!important}.order-sm-3{order:3!important}.order-sm-4{order:4!important}.order-sm-5{order:5!important}.order-sm-last{order:6!important}.m-sm-0{margin:0!important}.m-sm-1{margin:.25rem!important}.m-sm-2{margin:.5rem!important}.m-sm-3{margin:1rem!important}.m-sm-4{margin:1.5rem!important}.m-sm-5{margin:3rem!important}.m-sm-auto{margin:auto!important}.mx-sm-0{margin-right:0!important;margin-left:0!important}.mx-sm-1{margin-right:.25rem!important;margin-left:.25rem!important}.mx-sm-2{margin-right:.5rem!important;margin-left:.5rem!important}.mx-sm-3{margin-right:1rem!important;margin-left:1rem!important}.mx-sm-4{margin-right:1.5rem!important;margin-left:1.5rem!important}.mx-sm-5{margin-right:3rem!important;margin-left:3rem!important}.mx-sm-auto{margin-right:auto!important;margin-left:auto!important}.my-sm-0{margin-top:0!important;margin-bottom:0!important}.my-sm-1{margin-top:.25rem!important;margin-bottom:.25rem!important}.my-sm-2{margin-top:.5rem!important;margin-bottom:.5rem!important}.my-sm-3{margin-top:1rem!important;margin-bottom:1rem!important}.my-sm-4{margin-top:1.5rem!important;margin-bottom:1.5rem!important}.my-sm-5{margin-top:3rem!important;margin-bottom:3rem!important}.my-sm-auto{margin-top:auto!important;margin-bottom:auto!important}.mt-sm-0{margin-top:0!important}.mt-sm-1{margin-top:.25rem!important}.mt-sm-2{margin-top:.5rem!important}.mt-sm-3{margin-top:1rem!important}.mt-sm-4{margin-top:1.5rem!important}.mt-sm-5{margin-top:3rem!important}.mt-sm-auto{margin-top:auto!important}.me-sm-0{margin-right:0!important}.me-sm-1{margin-right:.25rem!important}.me-sm-2{margin-right:.5rem!important}.me-sm-3{margin-right:1rem!important}.me-sm-4{margin-right:1.5rem!important}.me-sm-5{margin-right:3rem!important}.me-sm-auto{margin-right:auto!important}.mb-sm-0{margin-bottom:0!important}.mb-sm-1{margin-bottom:.25rem!important}.mb-sm-2{margin-bottom:.5rem!important}.mb-sm-3{margin-bottom:1rem!important}.mb-sm-4{margin-bottom:1.5rem!important}.mb-sm-5{margin-bottom:3rem!important}.mb-sm-auto{margin-bottom:auto!important}.ms-sm-0{margin-left:0!important}.ms-sm-1{margin-left:.25rem!important}.ms-sm-2{margin-left:.5rem!important}.ms-sm-3{margin-left:1rem!important}.ms-sm-4{margin-left:1.5rem!important}.ms-sm-5{margin-left:3rem!important}.ms-sm-auto{margin-left:auto!important}.p-sm-0{padding:0!important}.p-sm-1{padding:.25rem!important}.p-sm-2{padding:.5rem!important}.p-sm-3{padding:1rem!important}.p-sm-4{padding:1.5rem!important}.p-sm-5{padding:3rem!important}.px-sm-0{padding-right:0!important;padding-left:0!important}.px-sm-1{padding-right:.25rem!important;padding-left:.25rem!important}.px-sm-2{padding-right:.5rem!important;padding-left:.5rem!important}.px-sm-3{padding-right:1rem!important;padding-left:1rem!important}.px-sm-4{padding-right:1.5rem!important;padding-left:1.5rem!important}.px-sm-5{padding-right:3rem!important;padding-left:3rem!important}.py-sm-0{padding-top:0!important;padding-bottom:0!important}.py-sm-1{padding-top:.25rem!important;padding-bottom:.25rem!important}.py-sm-2{padding-top:.5rem!important;padding-bottom:.5rem!important}.py-sm-3{padding-top:1rem!important;padding-bottom:1rem!important}.py-sm-4{padding-top:1.5rem!important;padding-bottom:1.5rem!important}.py-sm-5{padding-top:3rem!important;padding-bottom:3rem!important}.pt-sm-0{padding-top:0!important}.pt-sm-1{padding-top:.25rem!important}.pt-sm-2{padding-top:.5rem!important}.pt-sm-3{padding-top:1rem!important}.pt-sm-4{padding-top:1.5rem!important}.pt-sm-5{padding-top:3rem!important}.pe-sm-0{padding-right:0!important}.pe-sm-1{padding-right:.25rem!important}.pe-sm-2{padding-right:.5rem!important}.pe-sm-3{padding-right:1rem!important}.pe-sm-4{padding-right:1.5rem!important}.pe-sm-5{padding-right:3rem!important}.pb-sm-0{padding-bottom:0!important}.pb-sm-1{padding-bottom:.25rem!important}.pb-sm-2{padding-bottom:.5rem!important}.pb-sm-3{padding-bottom:1rem!important}.pb-sm-4{padding-bottom:1.5rem!important}.pb-sm-5{padding-bottom:3rem!important}.ps-sm-0{padding-left:0!important}.ps-sm-1{padding-left:.25rem!important}.ps-sm-2{padding-left:.5rem!important}.ps-sm-3{padding-left:1rem!important}.ps-sm-4{padding-left:1.5rem!important}.ps-sm-5{padding-left:3rem!important}}@media (min-width:768px){.d-md-inline{display:inline!important}.d-md-inline-block{display:inline-block!important}.d-md-block{display:block!important}.d-md-grid{display:grid!important}.d-md-inline-grid{display:inline-grid!important}.d-md-table{display:table!important}.d-md-table-row{display:table-row!important}.d-md-table-cell{display:table-cell!important}.d-md-flex{display:flex!important}.d-md-inline-flex{display:inline-flex!important}.d-md-none{display:none!important}.flex-md-fill{flex:1 1 auto!important}.flex-md-row{flex-direction:row!important}.flex-md-column{flex-direction:column!important}.flex-md-row-reverse{flex-direction:row-reverse!important}.flex-md-column-reverse{flex-direction:column-reverse!important}.flex-md-grow-0{flex-grow:0!important}.flex-md-grow-1{flex-grow:1!important}.flex-md-shrink-0{flex-shrink:0!important}.flex-md-shrink-1{flex-shrink:1!important}.flex-md-wrap{flex-wrap:wrap!important}.flex-md-nowrap{flex-wrap:nowrap!important}.flex-md-wrap-reverse{flex-wrap:wrap-reverse!important}.justify-content-md-start{justify-content:flex-start!important}.justify-content-md-end{justify-content:flex-end!important}.justify-content-md-center{justify-content:center!important}.justify-content-md-between{justify-content:space-between!important}.justify-content-md-around{justify-content:space-around!important}.justify-content-md-evenly{justify-content:space-evenly!important}.align-items-md-start{align-items:flex-start!important}.align-items-md-end{align-items:flex-end!important}.align-items-md-center{align-items:center!important}.align-items-md-baseline{align-items:baseline!important}.align-items-md-stretch{align-items:stretch!important}.align-content-md-start{align-content:flex-start!important}.align-content-md-end{align-content:flex-end!important}.align-content-md-center{align-content:center!important}.align-content-md-between{align-content:space-between!important}.align-content-md-around{align-content:space-around!important}.align-content-md-stretch{align-content:stretch!important}.align-self-md-auto{align-self:auto!important}.align-self-md-start{align-self:flex-start!important}.align-self-md-end{align-self:flex-end!important}.align-self-md-center{align-self:center!important}.align-self-md-baseline{align-self:baseline!important}.align-self-md-stretch{align-self:stretch!important}.order-md-first{order:-1!important}.order-md-0{order:0!important}.order-md-1{order:1!important}.order-md-2{order:2!important}.order-md-3{order:3!important}.order-md-4{order:4!important}.order-md-5{order:5!important}.order-md-last{order:6!important}.m-md-0{margin:0!important}.m-md-1{margin:.25rem!important}.m-md-2{margin:.5rem!important}.m-md-3{margin:1rem!important}.m-md-4{margin:1.5rem!important}.m-md-5{margin:3rem!important}.m-md-auto{margin:auto!important}.mx-md-0{margin-right:0!important;margin-left:0!important}.mx-md-1{margin-right:.25rem!important;margin-left:.25rem!important}.mx-md-2{margin-right:.5rem!important;margin-left:.5rem!important}.mx-md-3{margin-right:1rem!important;margin-left:1rem!important}.mx-md-4{margin-right:1.5rem!important;margin-left:1.5rem!important}.mx-md-5{margin-right:3rem!important;margin-left:3rem!important}.mx-md-auto{margin-right:auto!important;margin-left:auto!important}.my-md-0{margin-top:0!important;margin-bottom:0!important}.my-md-1{margin-top:.25rem!important;margin-bottom:.25rem!important}.my-md-2{margin-top:.5rem!important;margin-bottom:.5rem!important}.my-md-3{margin-top:1rem!important;margin-bottom:1rem!important}.my-md-4{margin-top:1.5rem!important;margin-bottom:1.5rem!important}.my-md-5{margin-top:3rem!important;margin-bottom:3rem!important}.my-md-auto{margin-top:auto!important;margin-bottom:auto!important}.mt-md-0{margin-top:0!important}.mt-md-1{margin-top:.25rem!important}.mt-md-2{margin-top:.5rem!important}.mt-md-3{margin-top:1rem!important}.mt-md-4{margin-top:1.5rem!important}.mt-md-5{margin-top:3rem!important}.mt-md-auto{margin-top:auto!important}.me-md-0{margin-right:0!important}.me-md-1{margin-right:.25rem!important}.me-md-2{margin-right:.5rem!important}.me-md-3{margin-right:1rem!important}.me-md-4{margin-right:1.5rem!important}.me-md-5{margin-right:3rem!important}.me-md-auto{margin-right:auto!important}.mb-md-0{margin-bottom:0!important}.mb-md-1{margin-bottom:.25rem!important}.mb-md-2{margin-bottom:.5rem!important}.mb-md-3{margin-bottom:1rem!important}.mb-md-4{margin-bottom:1.5rem!important}.mb-md-5{margin-bottom:3rem!important}.mb-md-auto{margin-bottom:auto!important}.ms-md-0{margin-left:0!important}.ms-md-1{margin-left:.25rem!important}.ms-md-2{margin-left:.5rem!important}.ms-md-3{margin-left:1rem!important}.ms-md-4{margin-left:1.5rem!important}.ms-md-5{margin-left:3rem!important}.ms-md-auto{margin-left:auto!important}.p-md-0{padding:0!important}.p-md-1{padding:.25rem!important}.p-md-2{padding:.5rem!important}.p-md-3{padding:1rem!important}.p-md-4{padding:1.5rem!important}.p-md-5{padding:3rem!important}.px-md-0{padding-right:0!important;padding-left:0!important}.px-md-1{padding-right:.25rem!important;padding-left:.25rem!important}.px-md-2{padding-right:.5rem!important;padding-left:.5rem!important}.px-md-3{padding-right:1rem!important;padding-left:1rem!important}.px-md-4{padding-right:1.5rem!important;padding-left:1.5rem!important}.px-md-5{padding-right:3rem!important;padding-left:3rem!important}.py-md-0{padding-top:0!important;padding-bottom:0!important}.py-md-1{padding-top:.25rem!important;padding-bottom:.25rem!important}.py-md-2{padding-top:.5rem!important;padding-bottom:.5rem!important}.py-md-3{padding-top:1rem!important;padding-bottom:1rem!important}.py-md-4{padding-top:1.5rem!important;padding-bottom:1.5rem!important}.py-md-5{padding-top:3rem!important;padding-bottom:3rem!important}.pt-md-0{padding-top:0!important}.pt-md-1{padding-top:.25rem!important}.pt-md-2{padding-top:.5rem!important}.pt-md-3{padding-top:1rem!important}.pt-md-4{padding-top:1.5rem!important}.pt-md-5{padding-top:3rem!important}.pe-md-0{padding-right:0!important}.pe-md-1{padding-right:.25rem!important}.pe-md-2{padding-right:.5rem!important}.pe-md-3{padding-right:1rem!important}.pe-md-4{padding-right:1.5rem!important}.pe-md-5{padding-right:3rem!important}.pb-md-0{padding-bottom:0!important}.pb-md-1{padding-bottom:.25rem!important}.pb-md-2{padding-bottom:.5rem!important}.pb-md-3{padding-bottom:1rem!important}.pb-md-4{padding-bottom:1.5rem!important}.pb-md-5{padding-bottom:3rem!important}.ps-md-0{padding-left:0!important}.ps-md-1{padding-left:.25rem!important}.ps-md-2{padding-left:.5rem!important}.ps-md-3{padding-left:1rem!important}.ps-md-4{padding-left:1.5rem!important}.ps-md-5{padding-left:3rem!important}}@media (min-width:992px){.d-lg-inline{display:inline!important}.d-lg-inline-block{display:inline-block!important}.d-lg-block{display:block!important}.d-lg-grid{display:grid!important}.d-lg-inline-grid{display:inline-grid!important}.d-lg-table{display:table!important}.d-lg-table-row{display:table-row!important}.d-lg-table-cell{display:table-cell!important}.d-lg-flex{display:flex!important}.d-lg-inline-flex{display:inline-flex!important}.d-lg-none{display:none!important}.flex-lg-fill{flex:1 1 auto!important}.flex-lg-row{flex-direction:row!important}.flex-lg-column{flex-direction:column!important}.flex-lg-row-reverse{flex-direction:row-reverse!important}.flex-lg-column-reverse{flex-direction:column-reverse!important}.flex-lg-grow-0{flex-grow:0!important}.flex-lg-grow-1{flex-grow:1!important}.flex-lg-shrink-0{flex-shrink:0!important}.flex-lg-shrink-1{flex-shrink:1!important}.flex-lg-wrap{flex-wrap:wrap!important}.flex-lg-nowrap{flex-wrap:nowrap!important}.flex-lg-wrap-reverse{flex-wrap:wrap-reverse!important}.justify-content-lg-start{justify-content:flex-start!important}.justify-content-lg-end{justify-content:flex-end!important}.justify-content-lg-center{justify-content:center!important}.justify-content-lg-between{justify-content:space-between!important}.justify-content-lg-around{justify-content:space-around!important}.justify-content-lg-evenly{justify-content:space-evenly!important}.align-items-lg-start{align-items:flex-start!important}.align-items-lg-end{align-items:flex-end!important}.align-items-lg-center{align-items:center!important}.align-items-lg-baseline{align-items:baseline!important}.align-items-lg-stretch{align-items:stretch!important}.align-content-lg-start{align-content:flex-start!important}.align-content-lg-end{align-content:flex-end!important}.align-content-lg-center{align-content:center!important}.align-content-lg-between{align-content:space-between!important}.align-content-lg-around{align-content:space-around!important}.align-content-lg-stretch{align-content:stretch!important}.align-self-lg-auto{align-self:auto!important}.align-self-lg-start{align-self:flex-start!important}.align-self-lg-end{align-self:flex-end!important}.align-self-lg-center{align-self:center!important}.align-self-lg-baseline{align-self:baseline!important}.align-self-lg-stretch{align-self:stretch!important}.order-lg-first{order:-1!important}.order-lg-0{order:0!important}.order-lg-1{order:1!important}.order-lg-2{order:2!important}.order-lg-3{order:3!important}.order-lg-4{order:4!important}.order-lg-5{order:5!important}.order-lg-last{order:6!important}.m-lg-0{margin:0!important}.m-lg-1{margin:.25rem!important}.m-lg-2{margin:.5rem!important}.m-lg-3{margin:1rem!important}.m-lg-4{margin:1.5rem!important}.m-lg-5{margin:3rem!important}.m-lg-auto{margin:auto!important}.mx-lg-0{margin-right:0!important;margin-left:0!important}.mx-lg-1{margin-right:.25rem!important;margin-left:.25rem!important}.mx-lg-2{margin-right:.5rem!important;margin-left:.5rem!important}.mx-lg-3{margin-right:1rem!important;margin-left:1rem!important}.mx-lg-4{margin-right:1.5rem!important;margin-left:1.5rem!important}.mx-lg-5{margin-right:3rem!important;margin-left:3rem!important}.mx-lg-auto{margin-right:auto!important;margin-left:auto!important}.my-lg-0{margin-top:0!important;margin-bottom:0!important}.my-lg-1{margin-top:.25rem!important;margin-bottom:.25rem!important}.my-lg-2{margin-top:.5rem!important;margin-bottom:.5rem!important}.my-lg-3{margin-top:1rem!important;margin-bottom:1rem!important}.my-lg-4{margin-top:1.5rem!important;margin-bottom:1.5rem!important}.my-lg-5{margin-top:3rem!important;margin-bottom:3rem!important}.my-lg-auto{margin-top:auto!important;margin-bottom:auto!important}.mt-lg-0{margin-top:0!important}.mt-lg-1{margin-top:.25rem!important}.mt-lg-2{margin-top:.5rem!important}.mt-lg-3{margin-top:1rem!important}.mt-lg-4{margin-top:1.5rem!important}.mt-lg-5{margin-top:3rem!important}.mt-lg-auto{margin-top:auto!important}.me-lg-0{margin-right:0!important}.me-lg-1{margin-right:.25rem!important}.me-lg-2{margin-right:.5rem!important}.me-lg-3{margin-right:1rem!important}.me-lg-4{margin-right:1.5rem!important}.me-lg-5{margin-right:3rem!important}.me-lg-auto{margin-right:auto!important}.mb-lg-0{margin-bottom:0!important}.mb-lg-1{margin-bottom:.25rem!important}.mb-lg-2{margin-bottom:.5rem!important}.mb-lg-3{margin-bottom:1rem!important}.mb-lg-4{margin-bottom:1.5rem!important}.mb-lg-5{margin-bottom:3rem!important}.mb-lg-auto{margin-bottom:auto!important}.ms-lg-0{margin-left:0!important}.ms-lg-1{margin-left:.25rem!important}.ms-lg-2{margin-left:.5rem!important}.ms-lg-3{margin-left:1rem!important}.ms-lg-4{margin-left:1.5rem!important}.ms-lg-5{margin-left:3rem!important}.ms-lg-auto{margin-left:auto!important}.p-lg-0{padding:0!important}.p-lg-1{padding:.25rem!important}.p-lg-2{padding:.5rem!important}.p-lg-3{padding:1rem!important}.p-lg-4{padding:1.5rem!important}.p-lg-5{padding:3rem!important}.px-lg-0{padding-right:0!important;padding-left:0!important}.px-lg-1{padding-right:.25rem!important;padding-left:.25rem!important}.px-lg-2{padding-right:.5rem!important;padding-left:.5rem!important}.px-lg-3{padding-right:1rem!important;padding-left:1rem!important}.px-lg-4{padding-right:1.5rem!important;padding-left:1.5rem!important}.px-lg-5{padding-right:3rem!important;padding-left:3rem!important}.py-lg-0{padding-top:0!important;padding-bottom:0!important}.py-lg-1{padding-top:.25rem!important;padding-bottom:.25rem!important}.py-lg-2{padding-top:.5rem!important;padding-bottom:.5rem!important}.py-lg-3{padding-top:1rem!important;padding-bottom:1rem!important}.py-lg-4{padding-top:1.5rem!important;padding-bottom:1.5rem!important}.py-lg-5{padding-top:3rem!important;padding-bottom:3rem!important}.pt-lg-0{padding-top:0!important}.pt-lg-1{padding-top:.25rem!important}.pt-lg-2{padding-top:.5rem!important}.pt-lg-3{padding-top:1rem!important}.pt-lg-4{padding-top:1.5rem!important}.pt-lg-5{padding-top:3rem!important}.pe-lg-0{padding-right:0!important}.pe-lg-1{padding-right:.25rem!important}.pe-lg-2{padding-right:.5rem!important}.pe-lg-3{padding-right:1rem!important}.pe-lg-4{padding-right:1.5rem!important}.pe-lg-5{padding-right:3rem!important}.pb-lg-0{padding-bottom:0!important}.pb-lg-1{padding-bottom:.25rem!important}.pb-lg-2{padding-bottom:.5rem!important}.pb-lg-3{padding-bottom:1rem!important}.pb-lg-4{padding-bottom:1.5rem!important}.pb-lg-5{padding-bottom:3rem!important}.ps-lg-0{padding-left:0!important}.ps-lg-1{padding-left:.25rem!important}.ps-lg-2{padding-left:.5rem!important}.ps-lg-3{padding-left:1rem!important}.ps-lg-4{padding-left:1.5rem!important}.ps-lg-5{padding-left:3rem!important}}@media (min-width:1200px){.d-xl-inline{display:inline!important}.d-xl-inline-block{display:inline-block!important}.d-xl-block{display:block!important}.d-xl-grid{display:grid!important}.d-xl-inline-grid{display:inline-grid!important}.d-xl-table{display:table!important}.d-xl-table-row{display:table-row!important}.d-xl-table-cell{display:table-cell!important}.d-xl-flex{display:flex!important}.d-xl-inline-flex{display:inline-flex!important}.d-xl-none{display:none!important}.flex-xl-fill{flex:1 1 auto!important}.flex-xl-row{flex-direction:row!important}.flex-xl-column{flex-direction:column!important}.flex-xl-row-reverse{flex-direction:row-reverse!important}.flex-xl-column-reverse{flex-direction:column-reverse!important}.flex-xl-grow-0{flex-grow:0!important}.flex-xl-grow-1{flex-grow:1!important}.flex-xl-shrink-0{flex-shrink:0!important}.flex-xl-shrink-1{flex-shrink:1!important}.flex-xl-wrap{flex-wrap:wrap!important}.flex-xl-nowrap{flex-wrap:nowrap!important}.flex-xl-wrap-reverse{flex-wrap:wrap-reverse!important}.justify-content-xl-start{justify-content:flex-start!important}.justify-content-xl-end{justify-content:flex-end!important}.justify-content-xl-center{justify-content:center!important}.justify-content-xl-between{justify-content:space-between!important}.justify-content-xl-around{justify-content:space-around!important}.justify-content-xl-evenly{justify-content:space-evenly!important}.align-items-xl-start{align-items:flex-start!important}.align-items-xl-end{align-items:flex-end!important}.align-items-xl-center{align-items:center!important}.align-items-xl-baseline{align-items:baseline!important}.align-items-xl-stretch{align-items:stretch!important}.align-content-xl-start{align-content:flex-start!important}.align-content-xl-end{align-content:flex-end!important}.align-content-xl-center{align-content:center!important}.align-content-xl-between{align-content:space-between!important}.align-content-xl-around{align-content:space-around!important}.align-content-xl-stretch{align-content:stretch!important}.align-self-xl-auto{align-self:auto!important}.align-self-xl-start{align-self:flex-start!important}.align-self-xl-end{align-self:flex-end!important}.align-self-xl-center{align-self:center!important}.align-self-xl-baseline{align-self:baseline!important}.align-self-xl-stretch{align-self:stretch!important}.order-xl-first{order:-1!important}.order-xl-0{order:0!important}.order-xl-1{order:1!important}.order-xl-2{order:2!important}.order-xl-3{order:3!important}.order-xl-4{order:4!important}.order-xl-5{order:5!important}.order-xl-last{order:6!important}.m-xl-0{margin:0!important}.m-xl-1{margin:.25rem!important}.m-xl-2{margin:.5rem!important}.m-xl-3{margin:1rem!important}.m-xl-4{margin:1.5rem!important}.m-xl-5{margin:3rem!important}.m-xl-auto{margin:auto!important}.mx-xl-0{margin-right:0!important;margin-left:0!important}.mx-xl-1{margin-right:.25rem!important;margin-left:.25rem!important}.mx-xl-2{margin-right:.5rem!important;margin-left:.5rem!important}.mx-xl-3{margin-right:1rem!important;margin-left:1rem!important}.mx-xl-4{margin-right:1.5rem!important;margin-left:1.5rem!important}.mx-xl-5{margin-right:3rem!important;margin-left:3rem!important}.mx-xl-auto{margin-right:auto!important;margin-left:auto!important}.my-xl-0{margin-top:0!important;margin-bottom:0!important}.my-xl-1{margin-top:.25rem!important;margin-bottom:.25rem!important}.my-xl-2{margin-top:.5rem!important;margin-bottom:.5rem!important}.my-xl-3{margin-top:1rem!important;margin-bottom:1rem!important}.my-xl-4{margin-top:1.5rem!important;margin-bottom:1.5rem!important}.my-xl-5{margin-top:3rem!important;margin-bottom:3rem!important}.my-xl-auto{margin-top:auto!important;margin-bottom:auto!important}.mt-xl-0{margin-top:0!important}.mt-xl-1{margin-top:.25rem!important}.mt-xl-2{margin-top:.5rem!important}.mt-xl-3{margin-top:1rem!important}.mt-xl-4{margin-top:1.5rem!important}.mt-xl-5{margin-top:3rem!important}.mt-xl-auto{margin-top:auto!important}.me-xl-0{margin-right:0!important}.me-xl-1{margin-right:.25rem!important}.me-xl-2{margin-right:.5rem!important}.me-xl-3{margin-right:1rem!important}.me-xl-4{margin-right:1.5rem!important}.me-xl-5{margin-right:3rem!important}.me-xl-auto{margin-right:auto!important}.mb-xl-0{margin-bottom:0!important}.mb-xl-1{margin-bottom:.25rem!important}.mb-xl-2{margin-bottom:.5rem!important}.mb-xl-3{margin-bottom:1rem!important}.mb-xl-4{margin-bottom:1.5rem!important}.mb-xl-5{margin-bottom:3rem!important}.mb-xl-auto{margin-bottom:auto!important}.ms-xl-0{margin-left:0!important}.ms-xl-1{margin-left:.25rem!important}.ms-xl-2{margin-left:.5rem!important}.ms-xl-3{margin-left:1rem!important}.ms-xl-4{margin-left:1.5rem!important}.ms-xl-5{margin-left:3rem!important}.ms-xl-auto{margin-left:auto!important}.p-xl-0{padding:0!important}.p-xl-1{padding:.25rem!important}.p-xl-2{padding:.5rem!important}.p-xl-3{padding:1rem!important}.p-xl-4{padding:1.5rem!important}.p-xl-5{padding:3rem!important}.px-xl-0{padding-right:0!important;padding-left:0!important}.px-xl-1{padding-right:.25rem!important;padding-left:.25rem!important}.px-xl-2{padding-right:.5rem!important;padding-left:.5rem!important}.px-xl-3{padding-right:1rem!important;padding-left:1rem!important}.px-xl-4{padding-right:1.5rem!important;padding-left:1.5rem!important}.px-xl-5{padding-right:3rem!important;padding-left:3rem!important}.py-xl-0{padding-top:0!important;padding-bottom:0!important}.py-xl-1{padding-top:.25rem!important;padding-bottom:.25rem!important}.py-xl-2{padding-top:.5rem!important;padding-bottom:.5rem!important}.py-xl-3{padding-top:1rem!important;padding-bottom:1rem!important}.py-xl-4{padding-top:1.5rem!important;padding-bottom:1.5rem!important}.py-xl-5{padding-top:3rem!important;padding-bottom:3rem!important}.pt-xl-0{padding-top:0!important}.pt-xl-1{padding-top:.25rem!important}.pt-xl-2{padding-top:.5rem!important}.pt-xl-3{padding-top:1rem!important}.pt-xl-4{padding-top:1.5rem!important}.pt-xl-5{padding-top:3rem!important}.pe-xl-0{padding-right:0!important}.pe-xl-1{padding-right:.25rem!important}.pe-xl-2{padding-right:.5rem!important}.pe-xl-3{padding-right:1rem!important}.pe-xl-4{padding-right:1.5rem!important}.pe-xl-5{padding-right:3rem!important}.pb-xl-0{padding-bottom:0!important}.pb-xl-1{padding-bottom:.25rem!important}.pb-xl-2{padding-bottom:.5rem!important}.pb-xl-3{padding-bottom:1rem!important}.pb-xl-4{padding-bottom:1.5rem!important}.pb-xl-5{padding-bottom:3rem!important}.ps-xl-0{padding-left:0!important}.ps-xl-1{padding-left:.25rem!important}.ps-xl-2{padding-left:.5rem!important}.ps-xl-3{padding-left:1rem!important}.ps-xl-4{padding-left:1.5rem!important}.ps-xl-5{padding-left:3rem!important}}@media (min-width:1400px){.d-xxl-inline{display:inline!important}.d-xxl-inline-block{display:inline-block!important}.d-xxl-block{display:block!important}.d-xxl-grid{display:grid!important}.d-xxl-inline-grid{display:inline-grid!important}.d-xxl-table{display:table!important}.d-xxl-table-row{display:table-row!important}.d-xxl-table-cell{display:table-cell!important}.d-xxl-flex{display:flex!important}.d-xxl-inline-flex{display:inline-flex!important}.d-xxl-none{display:none!important}.flex-xxl-fill{flex:1 1 auto!important}.flex-xxl-row{flex-direction:row!important}.flex-xxl-column{flex-direction:column!important}.flex-xxl-row-reverse{flex-direction:row-reverse!important}.flex-xxl-column-reverse{flex-direction:column-reverse!important}.flex-xxl-grow-0{flex-grow:0!important}.flex-xxl-grow-1{flex-grow:1!important}.flex-xxl-shrink-0{flex-shrink:0!important}.flex-xxl-shrink-1{flex-shrink:1!important}.flex-xxl-wrap{flex-wrap:wrap!important}.flex-xxl-nowrap{flex-wrap:nowrap!important}.flex-xxl-wrap-reverse{flex-wrap:wrap-reverse!important}.justify-content-xxl-start{justify-content:flex-start!important}.justify-content-xxl-end{justify-content:flex-end!important}.justify-content-xxl-center{justify-content:center!important}.justify-content-xxl-between{justify-content:space-between!important}.justify-content-xxl-around{justify-content:space-around!important}.justify-content-xxl-evenly{justify-content:space-evenly!important}.align-items-xxl-start{align-items:flex-start!important}.align-items-xxl-end{align-items:flex-end!important}.align-items-xxl-center{align-items:center!important}.align-items-xxl-baseline{align-items:baseline!important}.align-items-xxl-stretch{align-items:stretch!important}.align-content-xxl-start{align-content:flex-start!important}.align-content-xxl-end{align-content:flex-end!important}.align-content-xxl-center{align-content:center!important}.align-content-xxl-between{align-content:space-between!important}.align-content-xxl-around{align-content:space-around!important}.align-content-xxl-stretch{align-content:stretch!important}.align-self-xxl-auto{align-self:auto!important}.align-self-xxl-start{align-self:flex-start!important}.align-self-xxl-end{align-self:flex-end!important}.align-self-xxl-center{align-self:center!important}.align-self-xxl-baseline{align-self:baseline!important}.align-self-xxl-stretch{align-self:stretch!important}.order-xxl-first{order:-1!important}.order-xxl-0{order:0!important}.order-xxl-1{order:1!important}.order-xxl-2{order:2!important}.order-xxl-3{order:3!important}.order-xxl-4{order:4!important}.order-xxl-5{order:5!important}.order-xxl-last{order:6!important}.m-xxl-0{margin:0!important}.m-xxl-1{margin:.25rem!important}.m-xxl-2{margin:.5rem!important}.m-xxl-3{margin:1rem!important}.m-xxl-4{margin:1.5rem!important}.m-xxl-5{margin:3rem!important}.m-xxl-auto{margin:auto!important}.mx-xxl-0{margin-right:0!important;margin-left:0!important}.mx-xxl-1{margin-right:.25rem!important;margin-left:.25rem!important}.mx-xxl-2{margin-right:.5rem!important;margin-left:.5rem!important}.mx-xxl-3{margin-right:1rem!important;margin-left:1rem!important}.mx-xxl-4{margin-right:1.5rem!important;margin-left:1.5rem!important}.mx-xxl-5{margin-right:3rem!important;margin-left:3rem!important}.mx-xxl-auto{margin-right:auto!important;margin-left:auto!important}.my-xxl-0{margin-top:0!important;margin-bottom:0!important}.my-xxl-1{margin-top:.25rem!important;margin-bottom:.25rem!important}.my-xxl-2{margin-top:.5rem!important;margin-bottom:.5rem!important}.my-xxl-3{margin-top:1rem!important;margin-bottom:1rem!important}.my-xxl-4{margin-top:1.5rem!important;margin-bottom:1.5rem!important}.my-xxl-5{margin-top:3rem!important;margin-bottom:3rem!important}.my-xxl-auto{margin-top:auto!important;margin-bottom:auto!important}.mt-xxl-0{margin-top:0!important}.mt-xxl-1{margin-top:.25rem!important}.mt-xxl-2{margin-top:.5rem!important}.mt-xxl-3{margin-top:1rem!important}.mt-xxl-4{margin-top:1.5rem!important}.mt-xxl-5{margin-top:3rem!important}.mt-xxl-auto{margin-top:auto!important}.me-xxl-0{margin-right:0!important}.me-xxl-1{margin-right:.25rem!important}.me-xxl-2{margin-right:.5rem!important}.me-xxl-3{margin-right:1rem!important}.me-xxl-4{margin-right:1.5rem!important}.me-xxl-5{margin-right:3rem!important}.me-xxl-auto{margin-right:auto!important}.mb-xxl-0{margin-bottom:0!important}.mb-xxl-1{margin-bottom:.25rem!important}.mb-xxl-2{margin-bottom:.5rem!important}.mb-xxl-3{margin-bottom:1rem!important}.mb-xxl-4{margin-bottom:1.5rem!important}.mb-xxl-5{margin-bottom:3rem!important}.mb-xxl-auto{margin-bottom:auto!important}.ms-xxl-0{margin-left:0!important}.ms-xxl-1{margin-left:.25rem!important}.ms-xxl-2{margin-left:.5rem!important}.ms-xxl-3{margin-left:1rem!important}.ms-xxl-4{margin-left:1.5rem!important}.ms-xxl-5{margin-left:3rem!important}.ms-xxl-auto{margin-left:auto!important}.p-xxl-0{padding:0!important}.p-xxl-1{padding:.25rem!important}.p-xxl-2{padding:.5rem!important}.p-xxl-3{padding:1rem!important}.p-xxl-4{padding:1.5rem!important}.p-xxl-5{padding:3rem!important}.px-xxl-0{padding-right:0!important;padding-left:0!important}.px-xxl-1{padding-right:.25rem!important;padding-left:.25rem!important}.px-xxl-2{padding-right:.5rem!important;padding-left:.5rem!important}.px-xxl-3{padding-right:1rem!important;padding-left:1rem!important}.px-xxl-4{padding-right:1.5rem!important;padding-left:1.5rem!important}.px-xxl-5{padding-right:3rem!important;padding-left:3rem!important}.py-xxl-0{padding-top:0!important;padding-bottom:0!important}.py-xxl-1{padding-top:.25rem!important;padding-bottom:.25rem!important}.py-xxl-2{padding-top:.5rem!important;padding-bottom:.5rem!important}.py-xxl-3{padding-top:1rem!important;padding-bottom:1rem!important}.py-xxl-4{padding-top:1.5rem!important;padding-bottom:1.5rem!important}.py-xxl-5{padding-top:3rem!important;padding-bottom:3rem!important}.pt-xxl-0{padding-top:0!important}.pt-xxl-1{padding-top:.25rem!important}.pt-xxl-2{padding-top:.5rem!important}.pt-xxl-3{padding-top:1rem!important}.pt-xxl-4{padding-top:1.5rem!important}.pt-xxl-5{padding-top:3rem!important}.pe-xxl-0{padding-right:0!important}.pe-xxl-1{padding-right:.25rem!important}.pe-xxl-2{padding-right:.5rem!important}.pe-xxl-3{padding-right:1rem!important}.pe-xxl-4{padding-right:1.5rem!important}.pe-xxl-5{padding-right:3rem!important}.pb-xxl-0{padding-bottom:0!important}.pb-xxl-1{padding-bottom:.25rem!important}.pb-xxl-2{padding-bottom:.5rem!important}.pb-xxl-3{padding-bottom:1rem!important}.pb-xxl-4{padding-bottom:1.5rem!important}.pb-xxl-5{padding-bottom:3rem!important}.ps-xxl-0{padding-left:0!important}.ps-xxl-1{padding-left:.25rem!important}.ps-xxl-2{padding-left:.5rem!important}.ps-xxl-3{padding-left:1rem!important}.ps-xxl-4{padding-left:1.5rem!important}.ps-xxl-5{padding-left:3rem!important}}@media print{.d-print-inline{display:inline!important}.d-print-inline-block{display:inline-block!important}.d-print-block{display:block!important}.d-print-grid{display:grid!important}.d-print-inline-grid{display:inline-grid!important}.d-print-table{display:table!important}.d-print-table-row{display:table-row!important}.d-print-table-cell{display:table-cell!important}.d-print-flex{display:flex!important}.d-print-inline-flex{display:inline-flex!important}.d-print-none{display:none!important}} /*# sourceMappingURL=bootstrap-grid.min.css.map */ /* style.css */ @charset "UTF-8"; /* ========================================================================== ELİF ÖZKIZILTAŞ Beauty — Başiskele Güzellik Merkezi Ana sayfa stilleri -------------------------------------------------------------------------- İÇİNDEKİLER 00 · Fontlar 01 · Tasarım değişkenleri (tokens) 02 · Reset & temel tipografi 03 · Yardımcı sınıflar (container, section, başlık, ikon) 04 · Butonlar 05 · Üst iletişim çubuğu 06 · Sticky header + masaüstü menü 07 · Premium mobil menü 08 · Hero 09 · Güven kartları 10 · Hizmet kategorileri 11 · Tanıtım blokları 12 · Neden biz 13 · İstatistikler 14 · Uzman kadro 15 · Yatay kaydırmalı slider altyapısı 16 · Cihazlar & teknolojiler 17 · Öncesi / Sonrası 18 · Müşteri yorumları 19 · Paketler & fiyatlar 20 · Blog 21 · İletişim & harita 22 · Final CTA 23 · Footer 24 · Mobil sabit CTA · yüzen butonlar 25 · Breadcrumb altyapısı (alt sayfalar için hazır) 26 · Hareket azaltma & yazdırma ========================================================================== */ /* ═══════════════ 00 · FONTLAR ═══════════════ */ @font-face{ font-family:'Jost'; src:url('../fonts/jost-latin-ext.woff2') format('woff2'); font-weight:300 700; font-style:normal; font-display:swap; unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; } @font-face{ font-family:'Jost'; src:url('../fonts/jost-latin.woff2') format('woff2'); font-weight:300 700; font-style:normal; font-display:swap; unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; } @font-face{ font-family:'Playfair Display'; src:url('../fonts/playfair-latin-ext.woff2') format('woff2'); font-weight:400 800; font-style:normal; font-display:swap; unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; } @font-face{ font-family:'Playfair Display'; src:url('../fonts/playfair-latin.woff2') format('woff2'); font-weight:400 800; font-style:normal; font-display:swap; unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; } /* ═══════════════ 01 · TOKENS ═══════════════ */ :root{ /* renkler */ --rose:#A4635B; --rose-dark:#8B4E47; --rose-soft:#F0DED8; --copper:#B0743F; --copper-ink:#965C2E; /* küçük metinlerde AA kontrast */ --copper-soft:#E4CDB4; --ink:#241F1C; --ink-2:#3C3430; --muted:#6E625C; --muted-2:#665A54; /* üstü çizili / ikincil metin — AA kontrast */ --cream:#FBF6F2; --cream-2:#F7EDE5; --cream-3:#F2E4D9; --card:#FDFAF8; --card-tint:#FBF3ED; --line:#EBDCD1; --line-2:#E2D0C2; --dark:#17161A; --dark-2:#221F24; --white:#fff; --wa:#0E7F6E; /* beyaz metinle 4.9:1 — WCAG AA */ --wa-dark:#0A6455; --wa-bright:#25D366; /* yalnızca açık zemin üzerindeki ikonlarda */ /* tipografi */ --font-sans:'Jost',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Helvetica Neue',Arial,sans-serif; --font-display:'Playfair Display',Georgia,'Times New Roman',serif; /* ölçüler */ --header-h:64px; --topbar-h:0px; --mobar-h:64px; --sect-y:48px; --sect-y-tight:38px; --radius:16px; --radius-lg:22px; --radius-sm:10px; --shadow-sm:0 2px 10px rgba(90,60,45,.06); --shadow:0 10px 34px rgba(90,60,45,.10); --shadow-lg:0 22px 60px rgba(70,45,35,.16); --ease:cubic-bezier(.22,.85,.3,1); --gutter:20px; } @media (min-width:576px){ :root{ --gutter:24px; --sect-y:56px; --sect-y-tight:44px } } @media (min-width:768px){ :root{ --gutter:28px; --sect-y:64px; --sect-y-tight:50px; --mobar-h:66px } } @media (min-width:992px){ :root{ --gutter:32px; --sect-y:76px; --sect-y-tight:58px; --header-h:78px; --topbar-h:42px; --mobar-h:0px } } @media (min-width:1200px){ :root{ --sect-y:84px; --sect-y-tight:64px; --header-h:84px; --topbar-h:44px } } @media (min-width:1400px){ :root{ --sect-y:92px; --sect-y-tight:70px; --header-h:88px } } /* ═══════════════ 02 · RESET & TEMEL ═══════════════ */ *,*::before,*::after{ box-sizing:border-box } html{ overflow-x:clip; /* sticky'yi bozmadan yatay taşmayı keser */ scroll-behavior:smooth; scroll-padding-top:calc(var(--header-h) + 12px); -webkit-text-size-adjust:100%; } body{ margin:0; overflow-x:clip; font-family:var(--font-sans); font-size:15px; line-height:1.72; font-weight:400; color:var(--muted); background:var(--cream); padding-bottom:var(--mobar-h); -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; } @media (min-width:768px){ body{ font-size:15.5px } } @media (min-width:1200px){ body{ font-size:16px } } /* [hidden] her zaman kazanmalı — display:flex/grid tanımlı bileşenlerde de */ [hidden]{ display:none !important } img,svg,picture,video{ max-width:100%; display:block } img{ height:auto } ul,ol{ margin:0; padding:0; list-style:none } p{ margin:0 0 1em } p:last-child{ margin-bottom:0 } h1,h2,h3,h4{ margin:0 0 .5em; color:var(--ink); font-weight:700; line-height:1.22 } a{ color:var(--rose-dark); text-decoration:none; transition:color .22s ease } a:hover{ color:var(--rose) } address{ font-style:normal; margin:0 } button{ font:inherit; color:inherit; border:0; background:none; cursor:pointer } s{ text-decoration-thickness:1px } cite{ font-style:normal } blockquote{ margin:0 } figure{ margin:0 } :focus-visible{ outline:3px solid var(--rose); outline-offset:3px; border-radius:6px; } ::selection{ background:var(--rose); color:#fff } .skip-link{ position:fixed; left:12px; top:0; z-index:2000; transform:translateY(-140%); background:var(--rose); color:#fff; padding:12px 20px; border-radius:0 0 10px 10px; font-weight:600; transition:transform .2s ease; } .skip-link:focus{ transform:translateY(0); color:#fff } .visually-hidden{ position:absolute!important; width:1px; height:1px; margin:-1px; padding:0; overflow:hidden; clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap; border:0; } /* ═══════════════ 03 · YARDIMCILAR ═══════════════ */ .container-x{ width:100%; margin-inline:auto; padding-inline:var(--gutter); } @media (min-width:768px){ .container-x{ max-width:768px } } @media (min-width:992px){ .container-x{ max-width:992px } } @media (min-width:1200px){ .container-x{ max-width:1180px } } @media (min-width:1400px){ .container-x{ max-width:1320px } } @media (min-width:1700px){ .container-x{ max-width:1400px } } .section{ padding-block:var(--sect-y) } .section--tight{ padding-block:var(--sect-y-tight) } .section-title{ font-family:var(--font-sans); font-size:15px; font-weight:700; letter-spacing:.13em; text-transform:uppercase; color:var(--copper-ink); text-align:center; margin:0 0 26px; padding-bottom:13px; position:relative; line-height:1.4; } .section-title::after{ content:''; position:absolute; left:50%; bottom:0; transform:translateX(-50%); width:52px; height:2px; border-radius:2px; background:var(--copper); opacity:.6; } .section-title--left{ text-align:left; margin-bottom:20px } .section-title--left::after{ left:0; transform:none } @media (min-width:768px){ .section-title{ font-size:16px; margin-bottom:32px } } @media (min-width:1200px){ .section-title{ font-size:17px; letter-spacing:.15em; margin-bottom:38px } } .section-lead{ text-align:center; max-width:56ch; margin:-14px auto 30px; font-size:.95em; } .section-head{ display:flex; align-items:flex-start; justify-content:space-between; gap:16px; margin-bottom:18px; } .section-head .section-title{ margin-bottom:0 } .eyebrow{ font-size:12px; font-weight:600; letter-spacing:.18em; text-transform:uppercase; color:var(--copper-ink); margin:0 0 12px; } .eyebrow--light{ color:var(--copper) } @media (min-width:992px){ .eyebrow{ font-size:13px } } .ico{ width:1em; height:1em; display:inline-block; flex:none; fill:currentColor; vertical-align:-.14em; } .ico--xs{ width:.82em; height:.82em } .ico--lg{ width:1.7em; height:1.7em } .stars{ display:inline-flex; gap:1px; color:#E8A33D; font-size:12px; line-height:1 } @media (min-width:992px){ .stars{ font-size:13px } } .ticks{ display:grid; gap:8px; margin:0 0 18px } .ticks li{ display:flex; gap:9px; align-items:flex-start; font-size:13.5px; line-height:1.45; color:var(--ink-2); } .ticks .ico{ color:var(--rose); margin-top:.42em } @media (min-width:1200px){ .ticks li{ font-size:14.5px } } /* ═══════════════ 04 · BUTONLAR ═══════════════ */ .btn-brand,.btn-outline,.btn-wa{ --btn-py:12px; --btn-px:20px; display:inline-flex; align-items:center; justify-content:center; gap:9px; min-height:44px; /* dokunma alanı */ padding:var(--btn-py) var(--btn-px); border-radius:9px; font-size:13px; font-weight:600; letter-spacing:.055em; text-transform:uppercase; line-height:1.2; text-align:center; transition:background-color .24s ease,color .24s ease,border-color .24s ease,transform .24s var(--ease),box-shadow .24s ease; cursor:pointer; } .btn-brand{ background:var(--rose); color:#fff; box-shadow:0 6px 18px rgba(164,99,91,.26) } .btn-brand:hover,.btn-brand:focus-visible{ background:var(--rose-dark); color:#fff; transform:translateY(-2px) } .btn-outline{ background:transparent; color:var(--rose-dark); border:1.5px solid var(--line-2) } .btn-outline:hover,.btn-outline:focus-visible{ border-color:var(--rose); background:#fff; color:var(--rose-dark); transform:translateY(-2px) } .btn-wa{ background:var(--wa); color:#fff; box-shadow:0 6px 18px rgba(14,127,110,.28) } .btn-wa:hover,.btn-wa:focus-visible{ background:var(--wa-dark); color:#fff; transform:translateY(-2px) } .btn-brand--sm,.btn-outline--sm{ --btn-py:9px; --btn-px:16px; font-size:11.5px; min-height:40px } .btn-brand--lg,.btn-outline--lg,.btn-wa--lg{ --btn-py:14px; --btn-px:24px; font-size:13px; min-height:52px } .btn-brand--block{ display:flex; width:100% } @media (min-width:1200px){ .btn-brand--lg,.btn-outline--lg,.btn-wa--lg{ --btn-px:30px; font-size:13.5px; min-height:54px } } .iconbtn{ display:inline-flex; align-items:center; justify-content:center; width:44px; height:44px; border-radius:50%; font-size:17px; color:var(--rose); background:var(--rose-soft); transition:background-color .2s ease,color .2s ease; } .iconbtn:hover{ background:var(--rose); color:#fff } /* ═══════════════ 05 · ÜST İLETİŞİM ÇUBUĞU ═══════════════ */ .topbar{ display:none } @media (min-width:992px){ .topbar{ display:block; background:var(--cream-2); border-bottom:1px solid var(--line); font-size:12.5px; color:var(--ink-2); } .topbar__inner{ display:flex; align-items:center; gap:18px; min-height:var(--topbar-h); } .topbar__item{ display:flex; align-items:center; gap:7px; margin:0; white-space:nowrap; padding-block:5px } .topbar__item .ico{ color:var(--copper); font-size:14px } .topbar__addr{ margin-right:auto } .topbar__hours{ display:none } .topbar__tel{ color:var(--ink); font-weight:600; letter-spacing:.02em } .topbar__tel:hover{ color:var(--rose) } .topbar__cta{ --btn-py:8px; --btn-px:16px; min-height:34px; font-size:11px; border-radius:7px; box-shadow:none } } @media (min-width:1200px){ .topbar{ font-size:13px } .topbar__inner{ gap:26px } .topbar__hours{ display:flex } .topbar__hours:first-of-type{ margin-left:auto } .topbar__addr{ margin-right:0 } .topbar__tel{ margin-left:auto; font-size:14px } } @media (min-width:1400px){ .topbar__inner{ gap:34px } } /* ═══════════════ 06 · STICKY HEADER ═══════════════ */ .site-header{ position:sticky; top:0; z-index:1000; background:rgba(253,250,248,.94); backdrop-filter:saturate(160%) blur(10px); -webkit-backdrop-filter:saturate(160%) blur(10px); border-bottom:1px solid var(--line); transition:box-shadow .3s ease,background-color .3s ease; } .site-header.is-scrolled{ box-shadow:0 6px 26px rgba(90,60,45,.10); background:rgba(253,250,248,.97) } .site-header__inner{ display:flex; align-items:center; gap:16px; min-height:var(--header-h); } .brand{ display:flex; align-items:center; flex:none; margin-right:auto; padding-block:4px } .brand__logo{ width:auto; height:42px } @media (min-width:576px){ .brand__logo{ height:46px } } @media (min-width:992px){ .brand__logo{ height:42px } } @media (min-width:1200px){ .brand__logo{ height:50px } } @media (min-width:1400px){ .brand__logo{ height:56px } } /* 992–1199 arası menü + logo + buton tek satıra sığsın */ @media (min-width:992px) and (max-width:1199.98px){ .site-header__inner{ gap:10px } .mainnav__list{ gap:0 } .mainnav__link{ font-size:11.5px; padding:9px 8px; letter-spacing:.05em } .mainnav__link::after{ left:8px; right:8px } .site-header__actions .btn-brand{ --btn-px:14px; font-size:11.5px; min-height:40px } } .site-header__actions{ display:flex; align-items:center; gap:8px; flex:none } /* --- masaüstü menü --- */ .mainnav{ display:none } @media (min-width:992px){ .mainnav{ display:block } .mainnav__list{ display:flex; align-items:center; gap:4px } .mainnav__item{ position:relative } .mainnav__link{ display:inline-flex; align-items:center; gap:5px; padding:10px 11px; border-radius:8px; font-size:12.5px; font-weight:600; letter-spacing:.075em; text-transform:uppercase; color:var(--ink-2); position:relative; white-space:nowrap; } .mainnav__link::after{ content:''; position:absolute; left:11px; right:11px; bottom:4px; height:2px; background:var(--rose); border-radius:2px; transform:scaleX(0); transform-origin:center; transition:transform .28s var(--ease); } .mainnav__link:hover,.mainnav__link:focus-visible{ color:var(--rose) } .mainnav__link:hover::after,.mainnav__link:focus-visible::after{ transform:scaleX(1) } /* --rose (#A4635B) krem zeminde 4.47:1 kalıyor; AA için 4.5 gerekli. Aktif menü bağlantısı koyu tonu kullanır, altı çizgi rengi değişmez. */ .mainnav__link.is-active{ color:var(--rose-dark) } .mainnav__link.is-active::after{ transform:scaleX(1) } .mainnav__toggle .ico{ transition:transform .3s var(--ease) } .mainnav__toggle[aria-expanded="true"] .ico{ transform:rotate(180deg) } } @media (min-width:1200px){ .mainnav__list{ gap:8px } .mainnav__link{ font-size:13px; padding:11px 13px } .mainnav__link::after{ left:13px; right:13px } } @media (min-width:1400px){ .mainnav__list{ gap:12px } } .dropmenu{ position:absolute; top:calc(100% + 10px); left:50%; transform:translate(-50%,10px); min-width:250px; padding:10px; background:var(--card); border:1px solid var(--line); border-radius:14px; box-shadow:var(--shadow-lg); opacity:0; visibility:hidden; pointer-events:none; transition:opacity .24s ease,transform .24s var(--ease),visibility .24s; z-index:20; } .has-drop:hover .dropmenu, .has-drop:focus-within .dropmenu, .dropmenu.is-open{ opacity:1; visibility:visible; transform:translate(-50%,0); pointer-events:auto } .dropmenu a{ display:flex; align-items:center; gap:11px; padding:10px 13px; border-radius:9px; font-size:14px; font-weight:500; color:var(--ink-2); } .dropmenu a .ico{ color:var(--copper); font-size:15px } .dropmenu a:hover,.dropmenu a:focus-visible{ background:var(--cream-2); color:var(--rose) } /* --- hamburger --- */ .burger{ width:46px; height:44px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:5px; border-radius:10px; background:var(--cream-2); } .burger span{ display:block; width:20px; height:2px; border-radius:2px; background:var(--ink); transition:transform .3s var(--ease),opacity .2s ease,width .3s var(--ease); } .burger span:nth-child(2){ width:15px } .burger:hover span:nth-child(2){ width:20px } /* ═══════════════ 07 · PREMIUM MOBİL MENÜ ═══════════════ */ .mm-backdrop{ position:fixed; inset:0; z-index:1190; background:rgba(24,20,18,.55); backdrop-filter:blur(3px); opacity:0; transition:opacity .34s ease; } .mm-backdrop.is-open{ opacity:1 } .mm-backdrop[hidden]{ display:none } .mm{ position:fixed; top:0; right:0; bottom:0; z-index:1200; width:min(90vw,392px); display:flex; flex-direction:column; background: radial-gradient(120% 60% at 100% 0%,rgba(176,116,63,.22) 0%,transparent 60%), linear-gradient(168deg,#262124 0%,#1A1719 52%,#2C2225 100%); color:#F2EAE3; box-shadow:-26px 0 70px rgba(0,0,0,.42); transform:translateX(102%); transition:transform .42s var(--ease); overscroll-behavior:contain; } .mm[hidden]{ display:none } .mm.is-open{ transform:translateX(0) } .mm__head{ display:flex; align-items:center; justify-content:space-between; gap:12px; padding:16px var(--gutter); border-bottom:1px solid rgba(255,255,255,.09); flex:none; } .mm__logo{ width:auto; height:46px } .mm__close{ width:44px; height:44px; flex:none; display:flex; align-items:center; justify-content:center; border-radius:12px; font-size:17px; color:#F2EAE3; background:rgba(255,255,255,.09); transition:background-color .2s ease,transform .3s var(--ease); } .mm__close:hover{ background:var(--rose); transform:rotate(90deg) } .mm__body{ flex:1 1 auto; overflow-y:auto; overscroll-behavior:contain; padding:14px var(--gutter) 20px; -webkit-overflow-scrolling:touch; } .mm__nav{ display:grid; gap:2px } .mm__link{ display:flex; align-items:center; justify-content:space-between; gap:12px; width:100%; min-height:52px; padding:12px 14px; border-radius:12px; text-align:left; font-size:15.5px; font-weight:500; letter-spacing:.02em; color:#F2EAE3; transition:background-color .22s ease,color .22s ease,padding-left .22s var(--ease); } .mm__link .ico{ color:var(--copper-soft); opacity:.85 } .mm__link:hover,.mm__link:focus-visible{ background:rgba(255,255,255,.07); color:#fff; padding-left:18px } .mm__link.is-active{ background:rgba(176,116,63,.2); color:#fff } .mm__link.is-active .ico{ color:var(--copper-soft); opacity:1 } .mm__chev{ transition:transform .3s var(--ease) } .mm__sub-toggle[aria-expanded="true"]{ background:rgba(255,255,255,.07); color:#fff } .mm__sub-toggle[aria-expanded="true"] .mm__chev{ transform:rotate(180deg) } .mm__sub{ display:grid; gap:1px; margin:2px 0 6px 14px; padding-left:12px; border-left:1px solid rgba(255,255,255,.13); max-height:0; overflow:hidden; transition:max-height .36s var(--ease),opacity .28s ease,margin-bottom .3s ease; opacity:0; } .mm__sub.is-open{ opacity:1 } .mm__sub a{ display:flex; align-items:center; gap:11px; min-height:44px; padding:9px 12px; border-radius:10px; font-size:14px; font-weight:400; color:rgba(242,234,227,.82); } .mm__sub a .ico{ color:var(--copper-soft); font-size:15px } .mm__sub a:hover,.mm__sub a:focus-visible{ background:rgba(255,255,255,.07); color:#fff } .mm__info{ margin-top:20px; padding-top:18px; border-top:1px solid rgba(255,255,255,.09); display:grid; gap:6px; } .mm__info-row{ display:flex; align-items:flex-start; gap:12px; padding:9px 4px; border-radius:10px; color:rgba(242,234,227,.85); } a.mm__info-row:hover{ background:rgba(255,255,255,.06); color:#fff } .mm__info-ico{ flex:none; width:36px; height:36px; border-radius:10px; display:flex; align-items:center; justify-content:center; background:rgba(176,116,63,.2); color:var(--copper-soft); font-size:15px; } .mm__info-row small{ display:block; font-size:11px; letter-spacing:.09em; text-transform:uppercase; color:rgba(242,234,227,.5) } .mm__info-row strong{ display:block; font-size:13.5px; font-weight:500; line-height:1.45 } .mm__foot{ flex:none; display:grid; grid-template-columns:1fr 1fr; gap:10px; padding:14px var(--gutter) calc(14px + env(safe-area-inset-bottom)); background:rgba(0,0,0,.28); border-top:1px solid rgba(255,255,255,.09); } .mm__foot .btn-brand,.mm__foot .btn-wa{ font-size:11.5px; --btn-px:10px; box-shadow:none } body.mm-open{ overflow:hidden } @media (min-width:992px){ .mm,.mm-backdrop{ display:none!important } } /* ═══════════════ 08 · HERO ═══════════════ */ .hero{ position:relative; overflow:hidden; background:var(--cream-3) } .hero__bg{ position:absolute; inset:0; z-index:0; background: radial-gradient(90% 70% at 12% 18%,rgba(255,250,246,.85) 0%,rgba(255,250,246,0) 62%), linear-gradient(165deg,#F6E9DF 0%,#EFDFD1 46%,#E7D2C0 100%); } .hero__inner{ position:relative; z-index:2 } .hero__content{ padding-block:30px 26px } .hero__title{ font-family:var(--font-display); font-size:clamp(32px,8.6vw,42px); font-weight:700; line-height:1.08; letter-spacing:-.012em; color:var(--ink); margin:0 0 14px; } .hero__title span{ display:inline } .hero__lead{ font-size:14.5px; line-height:1.68; margin:0 0 22px; max-width:52ch; color:var(--ink-2) } .hero__lead-extra{ display:none } .hero__cta{ display:grid; grid-template-columns:1fr; gap:10px } .hero__media{ position:relative; z-index:1 } .hero__img{ width:100%; height:100%; object-fit:cover } /* mobil: içerik önce, görsel altta yuvarlak kart */ @media (max-width:767.98px){ .hero__media{ margin:0 calc(var(--gutter) * -1); padding:0 var(--gutter) 26px; } .hero__media picture{ display:block; border-radius:var(--radius-lg); overflow:hidden; box-shadow:var(--shadow) } .hero__img{ aspect-ratio:16/11 } } @media (min-width:480px) and (max-width:767.98px){ .hero__img{ aspect-ratio:16/9 } } @media (min-width:576px){ .hero__cta{ grid-template-columns:auto auto; justify-content:start } .hero__lead{ font-size:15px } } /* tablet: iki kolon, görsel yuvarlak kart */ @media (min-width:768px){ .hero__inner{ display:flex; align-items:center; gap:32px; padding-block:8px } .hero__content{ flex:1 1 52%; padding-block:44px } .hero__media{ flex:1 1 48%; align-self:stretch; display:flex; align-items:center; padding-block:30px } .hero__media picture{ display:block; width:100%; border-radius:var(--radius-lg); overflow:hidden; box-shadow:var(--shadow-lg) } .hero__img{ aspect-ratio:4/5; width:100% } .hero__title{ font-size:clamp(38px,5.1vw,46px) } .hero__lead{ font-size:15px } } @media (min-width:992px){ .hero__content{ flex-basis:50%; padding-block:56px } .hero__media{ flex-basis:50% } .hero__img{ aspect-ratio:1/1 } .hero__title{ font-size:clamp(42px,4.6vw,52px) } .hero__lead-extra{ display:inline } } /* masaüstü: referans düzeni — görsel sağ kenara tam taşar */ @media (min-width:1200px){ .hero__inner{ display:block; padding-block:0 } .hero__content{ position:relative; z-index:3; width:min(50%,600px); padding-block:76px 96px; } .hero__media{ position:absolute; top:0; right:0; bottom:0; left:auto; width:52%; padding:0; z-index:1; } .hero__media picture{ display:block; width:100%; height:100%; border-radius:0; box-shadow:none } .hero__img{ aspect-ratio:auto; height:100%; width:100% } .hero__media::before{ content:''; position:absolute; inset:0; z-index:2; pointer-events:none; background:linear-gradient(90deg,#EFDFD1 0%,rgba(239,223,209,.5) 8%,rgba(239,223,209,0) 22%); } .hero__title{ font-size:clamp(50px,3.9vw,60px); margin-bottom:20px } .hero__title span{ display:block } .hero__lead{ font-size:16px; margin-bottom:30px; max-width:46ch } .hero__cta{ gap:14px } } @media (min-width:1400px){ .hero__content{ padding-block:92px 112px; width:min(48%,640px) } .hero__title{ font-size:clamp(56px,3.7vw,66px) } } @media (min-width:1700px){ .hero__content{ padding-block:104px 124px } } /* sağ kenar hızlı erişim rayı — sayfayı takip eder (fixed). Yalnızca yan boşluğun yettiği geniş ekranlarda; içeriği asla ezmez. */ .quickrail{ display:none } @media (min-width:1400px){ .quickrail{ display:grid; gap:2px; position:fixed; z-index:1040; right:0; top:50%; transform:translateY(-50%); background:var(--card); border:1px solid var(--line); border-right:0; border-radius:14px 0 0 14px; padding:10px 6px; box-shadow:var(--shadow); transition:transform .35s var(--ease),opacity .3s ease; } .quickrail.is-away{ transform:translate(110%,-50%); opacity:0; pointer-events:none } .quickrail__item{ display:grid; justify-items:center; gap:5px; width:72px; padding:11px 4px; border-radius:10px; font-size:10.5px; font-weight:600; letter-spacing:.04em; color:var(--ink-2); text-align:center; transition:background-color .22s ease,color .22s ease; } .quickrail__item:hover{ background:var(--cream-2); color:var(--rose) } .quickrail__ico{ font-size:20px; color:var(--rose); line-height:1 } .quickrail__ico--wa{ color:var(--wa-bright) } } /* ═══════════════ 09 · GÜVEN KARTLARI ═══════════════ */ .trust{ position:relative; z-index:5; padding-block:0 } .trust__grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:10px; padding-block:22px 4px; } .trust__card{ display:flex; align-items:center; gap:11px; background:var(--card); border:1px solid var(--line); border-radius:14px; padding:13px 12px; box-shadow:var(--shadow-sm); min-width:0; } .trust__link{ display:flex; align-items:center; gap:11px; color:inherit; min-width:0; width:100%; min-height:44px } .trust__ico{ flex:none; width:38px; height:38px; border-radius:11px; display:flex; align-items:center; justify-content:center; background:var(--cream-2); color:var(--copper); font-size:18px; } .trust__ico--plain{ background:#fff; border:1px solid var(--line) } .trust__text{ min-width:0 } .trust__title{ display:flex; align-items:center; gap:6px; flex-wrap:wrap; font-size:13px; font-weight:600; color:var(--ink); line-height:1.3; } .trust__title b{ font-size:16px; font-weight:700 } .trust__text small{ display:block; font-size:11.5px; color:var(--muted); line-height:1.4 } @media (min-width:576px){ .trust__grid{ gap:12px } .trust__title{ font-size:14px } .trust__text small{ font-size:12px } } @media (min-width:768px){ .trust__grid{ grid-template-columns:repeat(4,1fr); gap:12px; padding-block:26px 0 } .trust__card{ padding:14px 12px } } @media (min-width:992px){ /* referanstaki gibi hero'nun altına binen tek beyaz panel */ .trust{ margin-top:-46px } .trust__grid{ grid-template-columns:repeat(4,1fr); gap:0; background:var(--card); border:1px solid var(--line); border-radius:16px; box-shadow:var(--shadow-lg); padding:0; overflow:hidden; } .trust__card{ border:0; border-radius:0; box-shadow:none; background:transparent; padding:18px 20px; } .trust__card + .trust__card{ border-left:1px solid var(--line) } .trust__title{ font-size:14.5px } } @media (min-width:1200px){ .trust{ margin-top:-54px } /* referanstaki gibi panel tam genişliği kaplamaz, sağda hızlı erişim rayına yer bırakır */ .trust__grid{ max-width:78%; margin-right:auto } .trust__card{ padding:20px 24px; gap:14px } .trust__ico{ width:42px; height:42px; font-size:20px } .trust__title{ font-size:15px } .trust__title b{ font-size:19px } .trust__text small{ font-size:12.5px } } /* ═══════════════ 10 · HİZMET KATEGORİLERİ ═══════════════ */ .services{ background:var(--cream) } .svc-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:12px; } @media (min-width:576px){ .svc-grid{ gap:16px } } @media (min-width:768px){ .svc-grid{ grid-template-columns:repeat(3,1fr); gap:20px } } @media (min-width:1200px){ .svc-grid{ grid-template-columns:repeat(6,1fr); gap:14px } } @media (min-width:1400px){ .svc-grid{ gap:20px } } .svc{ display:flex } .svc__link{ display:flex; flex-direction:column; width:100%; background:var(--card-tint); border:1px solid var(--line); border-radius:var(--radius); padding:8px 8px 14px; color:inherit; overflow:hidden; transition:transform .3s var(--ease),box-shadow .3s ease,border-color .3s ease,background-color .3s ease; } .svc__link:hover,.svc__link:focus-visible{ transform:translateY(-5px); box-shadow:var(--shadow); border-color:var(--copper-soft); background:var(--card); } .svc__media{ display:block; border-radius:12px; overflow:hidden; aspect-ratio:4/3; background:var(--cream-2); } .svc__media img{ width:100%; height:100%; object-fit:cover; transition:transform .6s var(--ease) } .svc__link:hover .svc__media img{ transform:scale(1.07) } .svc__body{ display:flex; flex-direction:column; flex:1 1 auto; padding:12px 6px 0; text-align:center } .svc__title{ font-family:var(--font-sans); font-size:12px; font-weight:700; letter-spacing:.075em; text-transform:uppercase; color:var(--ink); margin:0 0 7px; line-height:1.32; min-height:2.64em; /* 2 satır → tüm kartlarda başlık/açıklama aynı hizada */ display:flex; align-items:center; justify-content:center; } .svc__desc{ font-size:12px; line-height:1.5; color:var(--muted); margin:0 0 12px; min-height:4.5em; /* 3 satır */ display:-webkit-box; -webkit-line-clamp:3; line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; } .svc__more{ margin-top:auto; display:inline-flex; align-items:center; justify-content:center; gap:6px; font-size:11.5px; font-weight:600; letter-spacing:.03em; color:var(--copper-ink); } .svc__more .ico{ transition:transform .3s var(--ease) } .svc__link:hover .svc__more .ico{ transform:translateX(4px) } @media (min-width:576px){ .svc__title{ font-size:12.5px } .svc__desc{ font-size:12.5px } } @media (min-width:768px){ .svc__link{ padding:9px 9px 16px } .svc__media{ aspect-ratio:3/2 } .svc__title{ font-size:13.5px; margin-bottom:8px; min-height:1.32em } .svc__desc{ font-size:13px; min-height:3em; -webkit-line-clamp:2; line-clamp:2 } .svc__more{ font-size:12px } } @media (min-width:1200px){ .svc__link{ padding:8px 8px 15px } .svc__title{ font-size:12.5px; letter-spacing:.06em; min-height:2.64em } .svc__desc{ font-size:12px; min-height:4.5em; -webkit-line-clamp:3; line-clamp:3 } .svc__more{ font-size:11.5px } } @media (min-width:1400px){ .svc__title{ font-size:13.5px } .svc__desc{ font-size:13px } .svc__more{ font-size:12.5px } } /* ═══════════════ 11 · TANITIM BLOKLARI ═══════════════ */ .feats{ background:var(--cream) } .feat-grid{ display:grid; gap:16px } @media (min-width:992px){ .feat-grid{ grid-template-columns:repeat(3,1fr); gap:20px } } @media (min-width:1400px){ .feat-grid{ gap:26px } } .feat{ display:flex; flex-direction:column; background:var(--card-tint); border:1px solid var(--line); border-radius:var(--radius-lg); overflow:hidden; transition:box-shadow .3s ease,border-color .3s ease; } .feat:hover{ box-shadow:var(--shadow); border-color:var(--copper-soft) } .feat__body{ padding:22px 20px 24px; order:2 } .feat__media{ order:1; background:var(--cream-2) } .feat__media img{ width:100%; height:100%; object-fit:cover; object-position:center 20% } .feat__title{ font-family:var(--font-display); font-size:24px; margin:0 0 4px; line-height:1.2 } .feat__sub{ font-size:13.5px; color:var(--muted); margin:0 0 16px } @media (max-width:575.98px){ .feat__media img{ aspect-ratio:16/10 } } @media (min-width:576px){ .feat{ flex-direction:row; align-items:stretch } .feat__body{ order:1; flex:1 1 58%; padding:26px 24px; display:flex; flex-direction:column } .feat__body .btn-outline{ align-self:flex-start; margin-top:auto } .feat__media{ order:2; flex:0 0 42%; position:relative } .feat__media img{ position:absolute; inset:0; width:100%; height:100% } .feat__title{ font-size:27px } } @media (min-width:992px){ .feat__body{ flex-basis:56%; padding:24px 20px } .feat__media{ flex-basis:44% } .feat__title{ font-size:24px } .feat__sub{ font-size:13px; margin-bottom:14px } } @media (min-width:1200px){ .feat__body{ padding:28px 24px } .feat__title{ font-size:27px } .feat__sub{ font-size:14px } } @media (min-width:1400px){ .feat__body{ padding:32px 30px } .feat__title{ font-size:31px } } /* ═══════════════ 12 · NEDEN BİZ ═══════════════ */ .why{ background:var(--cream) } .why-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:20px 12px } .why__item{ text-align:center; padding:4px 6px; position:relative } .why__item .ico--lg{ color:var(--copper); margin-bottom:10px } .why__item h3{ font-family:var(--font-sans); font-size:12.5px; font-weight:700; letter-spacing:.045em; color:var(--ink); margin:0 0 5px; line-height:1.35; } .why__item p{ font-size:12px; line-height:1.5; margin:0; color:var(--muted) } @media (min-width:576px){ .why-grid{ grid-template-columns:repeat(3,1fr); gap:26px 16px } } @media (min-width:1200px){ .why-grid{ grid-template-columns:repeat(6,1fr); gap:0 } .why__item{ padding:4px 18px } .why__item + .why__item::before{ content:''; position:absolute; left:0; top:12%; bottom:12%; width:1px; background:var(--line-2); } .why__item h3{ font-size:13px } .why__item p{ font-size:12.5px } } @media (min-width:1400px){ .why__item{ padding:4px 24px } } /* ═══════════════ 13 · İSTATİSTİKLER ═══════════════ */ .stats{ background:var(--dark); color:#EFE6DE; padding-block:30px } .stats__grid{ display:flex; flex-wrap:wrap; justify-content:center; gap:24px 10px } .stat{ flex:0 1 calc(50% - 10px); display:flex; align-items:center; justify-content:center; gap:12px; position:relative; padding:2px 6px; min-width:0; } .stat__ico{ flex:none; width:42px; height:42px; border-radius:50%; display:flex; align-items:center; justify-content:center; border:1px solid rgba(196,148,96,.5); color:var(--copper-soft); font-size:17px; } .stat__num{ display:block; font-family:var(--font-display); font-size:23px; font-weight:700; color:#fff; line-height:1.1; letter-spacing:.01em; } .stat__text small{ display:block; font-size:11.5px; letter-spacing:.04em; color:rgba(239,230,222,.72); line-height:1.4 } @media (min-width:576px){ .stats{ padding-block:36px } .stats__grid{ gap:28px 12px } .stat{ flex-basis:calc(33.333% - 12px) } .stat__num{ font-size:25px } } @media (min-width:992px){ .stats{ padding-block:34px } .stats__grid{ flex-wrap:nowrap; gap:0 } .stat{ flex:1 1 0; padding:6px 14px } .stat + .stat::before{ content:''; position:absolute; left:0; top:6%; bottom:6%; width:1px; background:rgba(255,255,255,.10); } .stat__num{ font-size:26px } } @media (min-width:1200px){ .stats{ padding-block:40px } .stat{ padding:6px 20px; gap:15px } .stat__ico{ width:50px; height:50px; font-size:20px } .stat__num{ font-size:31px } .stat__text small{ font-size:12.5px } } /* ═══════════════ 14 · UZMAN KADRO ═══════════════ */ .team{ background:var(--cream-2) } .team-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:12px } @media (min-width:576px){ .team-grid{ gap:18px } } @media (min-width:768px){ .team-grid{ grid-template-columns:repeat(4,1fr); gap:18px } } @media (min-width:1200px){ .team-grid{ gap:24px } } .member{ display:flex } .member__card{ position:relative; display:flex; flex-direction:column; width:100%; background:var(--card); border:1px solid var(--line); border-radius:var(--radius-lg); overflow:hidden; box-shadow:var(--shadow-sm); transition:transform .32s var(--ease),box-shadow .32s ease,border-color .32s ease; } .member__card:hover{ transform:translateY(-6px); box-shadow:var(--shadow); border-color:var(--copper-soft) } .member__media{ position:relative; aspect-ratio:3/4; background:var(--cream-3); overflow:hidden } .member__media img{ width:100%; height:100%; object-fit:cover; transition:transform .65s var(--ease) } .member__card:hover .member__media img{ transform:scale(1.06) } .member__media::after{ content:''; position:absolute; inset:auto 0 0 0; height:46%; background:linear-gradient(180deg,rgba(23,20,18,0) 0%,rgba(23,20,18,.30) 100%); pointer-events:none; } .member__chip{ position:absolute; z-index:2; top:10px; left:10px; font-size:9.5px; font-weight:700; letter-spacing:.09em; text-transform:uppercase; padding:5px 9px; border-radius:99px; line-height:1; background:rgba(253,250,248,.92); color:var(--copper-ink); box-shadow:0 2px 8px rgba(0,0,0,.12); } /* Deneyim rozeti fotoğrafın alt kenarında durur: degrade zaten orayı koyulaştırdığı için beyaz metin okunur, gövde de metne kalır. */ .member__exp{ position:absolute; z-index:2; left:10px; bottom:10px; display:inline-flex; align-items:center; gap:5px; font-size:10.5px; font-weight:600; letter-spacing:.02em; line-height:1; padding:6px 10px; border-radius:99px; background:rgba(253,250,248,.94); color:var(--copper-ink); box-shadow:0 2px 8px rgba(0,0,0,.14); } .member__exp .ico{ color:var(--copper) } /* Gövde flex sütun: biyografi değişken uzunlukta olsa da buton hep en altta hizalanır, ızgaradaki dört kartın alt kenarı kayması engellenir. */ .member__body{ display:flex; flex-direction:column; flex:1 1 auto; padding:13px 13px 0; text-align:center; } .member__name{ font-family:var(--font-display); font-size:16px; margin:0 0 2px; line-height:1.25 } .member__role{ font-size:11.5px; color:var(--copper-ink); margin:0 0 5px; letter-spacing:.03em; font-weight:600 } .member__spec{ font-size:11.5px; color:var(--muted); margin:0; line-height:1.45 } .member__bio{ font-size:11.5px; line-height:1.55; color:var(--ink-soft,var(--muted)); margin:8px 0 0; text-align:left; display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:4; line-clamp:4; overflow:hidden; } /* Tam genişlik buton: dokunmatikte hover yok, klavyede görünmez hedef olmaz, yüksekliği 44px'in altına düşmez. */ .member__cta{ display:flex; align-items:center; justify-content:center; gap:8px; margin:13px 13px 13px; min-height:44px; padding:0 12px; border-radius:var(--radius-sm,10px); background:var(--wa); color:#fff; font-size:13px; font-weight:600; letter-spacing:.01em; text-decoration:none; transition:background-color .22s ease,box-shadow .22s ease,transform .22s var(--ease); } .member__cta .ico{ font-size:17px; flex:none } .member__cta:hover{ background:var(--wa-dark); color:#fff; box-shadow:0 6px 18px rgba(14,127,110,.34) } .member__cta:active{ transform:translateY(1px) } .member__cta:focus-visible{ outline:2px solid var(--wa-dark); outline-offset:2px } @media (min-width:768px){ .member__body{ padding:15px 14px 0 } .member__name{ font-size:17px } .member__role{ font-size:12px } .member__spec{ font-size:12px } .member__bio{ font-size:12px } .member__cta{ margin:14px; font-size:13.5px } } @media (min-width:1200px){ .member__body{ padding:18px 16px 0 } .member__name{ font-size:19px } .member__role{ font-size:12.5px } .member__spec{ font-size:12.5px } .member__bio{ font-size:12.5px; -webkit-line-clamp:5; line-clamp:5 } .member__cta{ margin:16px } .member__chip{ font-size:10px; padding:6px 11px; top:12px; left:12px } .member__exp{ font-size:11px; left:12px; bottom:12px } } /* ═══════════════ 15 · YATAY SLIDER ALTYAPISI ═══════════════ */ .hscroll{ --per:2.2; --hgap:12px; display:flex; gap:var(--hgap); overflow-x:auto; overscroll-behavior-x:contain; scroll-snap-type:x mandatory; scroll-behavior:smooth; padding:2px 0 14px; margin:0; scrollbar-width:thin; scrollbar-color:var(--line-2) transparent; } .hscroll > *{ flex:0 0 calc((100% - (var(--per) - 1) * var(--hgap)) / var(--per)); scroll-snap-align:start; min-width:0; } .hscroll::-webkit-scrollbar{ height:5px } .hscroll::-webkit-scrollbar-track{ background:transparent } .hscroll::-webkit-scrollbar-thumb{ background:var(--line-2); border-radius:99px } .hscroll:focus-visible{ outline-offset:6px } .slider-nav{ display:flex; gap:8px; flex:none } .slider-nav__btn,.slider-arrow{ width:40px; height:40px; border-radius:50%; flex:none; display:flex; align-items:center; justify-content:center; background:var(--card); border:1px solid var(--line-2); color:var(--copper-ink); font-size:15px; box-shadow:var(--shadow-sm); transition:background-color .22s ease,color .22s ease,border-color .22s ease,opacity .22s ease; } .slider-nav__btn:hover,.slider-arrow:hover{ background:var(--rose); border-color:var(--rose); color:#fff } .slider-nav__btn[disabled],.slider-arrow[disabled]{ opacity:.34; cursor:default; pointer-events:none } @media (min-width:1200px){ .slider-nav__btn,.slider-arrow{ width:44px; height:44px; font-size:16px } } /* ═══════════════ 16 · CİHAZLAR ═══════════════ */ .tech{ background:var(--cream-2) } .tech__track{ --per:2.6; --hgap:10px } @media (min-width:576px){ .tech__track{ --per:3.5; --hgap:14px } } @media (min-width:768px){ .tech__track{ --per:4.5; --hgap:18px } } @media (min-width:992px){ .tech__track{ --per:6; --hgap:18px } } @media (min-width:1400px){ .tech__track{ --hgap:26px } } .device{ text-align:center } .device__media{ width:100%; aspect-ratio:1/1; border-radius:50%; overflow:hidden; background:#fff; border:1px solid var(--line); margin-bottom:11px; box-shadow:var(--shadow-sm); transition:transform .35s var(--ease),box-shadow .35s ease; } .device:hover .device__media{ transform:translateY(-5px); box-shadow:var(--shadow) } .device__media img{ width:100%; height:100%; object-fit:cover } .device__name{ font-family:var(--font-sans); font-size:11.5px; font-weight:600; color:var(--ink); margin:0; line-height:1.4; min-height:2.8em; /* iki satırlık isimlerde daireler hizada kalsın */ } .device__name span{ display:block; font-weight:400; font-size:10.5px; color:var(--muted) } @media (min-width:768px){ .device__name{ font-size:12.5px } .device__name span{ font-size:11.5px } } @media (min-width:1200px){ .device__name{ font-size:13px } .device__name span{ font-size:12px } } /* ═══════════════ 17 · ÖNCESİ / SONRASI (sürüklenebilir) ═══════════════ */ .ba{ background:var(--cream-2) } .ba__track{ --per:1.3; --hgap:12px } @media (min-width:576px){ .ba__track{ --per:2.1; --hgap:16px } } @media (min-width:768px){ .ba__track{ --per:2.8; --hgap:18px } } @media (min-width:992px){ .ba__track{ --per:3.6; --hgap:20px } } @media (min-width:1400px){ .ba__track{ --per:4; --hgap:24px } } .ba__hint{ display:flex; align-items:center; gap:7px; margin:-8px 0 0; font-size:11.5px; color:var(--muted); } .ba__hint .ico{ color:var(--copper) } @media (min-width:768px){ .ba__hint{ font-size:12.5px } } .ba-compare{ position:relative; border-radius:var(--radius); overflow:hidden; aspect-ratio:4/3; background:var(--cream-3); box-shadow:var(--shadow-sm); user-select:none; --pos:50%; } .ba-compare img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; pointer-events:none; -webkit-user-drag:none; } .ba-compare__before{ position:absolute; inset:0; z-index:2; clip-path:inset(0 calc(100% - var(--pos)) 0 0); will-change:clip-path; } .ba-compare__tag{ position:absolute; z-index:3; bottom:9px; font-size:9.5px; font-weight:700; letter-spacing:.07em; text-transform:uppercase; padding:4px 9px; border-radius:6px; color:#fff; line-height:1; pointer-events:none; } .ba-compare__tag--b{ left:9px; background:rgba(28,24,22,.78) } .ba-compare__tag--a{ right:9px; background:var(--rose) } .ba-compare__handle{ position:absolute; z-index:4; top:0; bottom:0; left:var(--pos); width:44px; margin-left:-22px; display:flex; align-items:center; justify-content:center; cursor:ew-resize; touch-action:none; background:transparent; } .ba-compare__handle::before{ content:''; position:absolute; top:0; bottom:0; left:50%; width:2px; margin-left:-1px; background:#fff; box-shadow:0 0 0 1px rgba(0,0,0,.12); } .ba-compare__grip{ position:relative; z-index:1; width:34px; height:34px; border-radius:50%; display:flex; align-items:center; justify-content:center; gap:0; background:#fff; color:var(--rose); font-size:11px; box-shadow:0 4px 14px rgba(0,0,0,.26); transition:transform .22s var(--ease); } .ba-compare__handle:hover .ba-compare__grip, .ba-compare__handle:focus-visible .ba-compare__grip{ transform:scale(1.12) } .ba-compare__handle:focus-visible{ outline:3px solid var(--rose); outline-offset:-3px; border-radius:6px } .ba-compare.is-dragging{ cursor:ew-resize } .ba-compare.is-dragging .ba-compare__before{ will-change:clip-path } .bacard figcaption{ margin-top:11px; text-align:center } .bacard figcaption strong{ display:block; font-size:12.5px; font-weight:600; letter-spacing:.03em; color:var(--ink); } .bacard figcaption span{ display:block; font-size:11px; color:var(--muted); margin-top:2px } .ba__note{ margin:6px 0 0; font-size:11.5px; color:var(--muted); text-align:center } @media (min-width:768px){ .ba-compare__tag{ font-size:10.5px; padding:5px 10px } .ba-compare__grip{ width:38px; height:38px; font-size:12px } .bacard figcaption strong{ font-size:13.5px } .bacard figcaption span{ font-size:12px } .ba__note{ font-size:12.5px } } /* ═══════════════ 18 · MÜŞTERİ YORUMLARI ═══════════════ */ .reviews{ background:var(--cream) } .reviews__layout{ display:grid; gap:18px } @media (min-width:992px){ .reviews__layout{ grid-template-columns:minmax(210px,22%) 1fr; gap:26px; align-items:center } } @media (min-width:1400px){ .reviews__layout{ grid-template-columns:minmax(230px,20%) 1fr; gap:34px } } /* Google puan kartı */ .ratingcard{ display:grid; justify-items:center; text-align:center; gap:5px; background:var(--card); border:1px solid var(--line); border-radius:var(--radius-lg); padding:20px 18px; box-shadow:var(--shadow-sm); } .ratingcard__g{ width:28px; height:28px; margin-bottom:2px } .ratingcard__score{ font-family:var(--font-display); font-size:42px; font-weight:700; color:var(--ink); margin:0; line-height:1; } .ratingcard__label{ font-size:12px; color:var(--muted); margin:4px 0 10px } .ratingcard .btn-outline{ width:100% } .stars--lg{ font-size:16px } @media (min-width:992px){ .ratingcard{ padding:26px 20px } .ratingcard__score{ font-size:48px } } .reviews__wrap{ position:relative; min-width:0 } .reviews__track{ --per:1.1; --hgap:12px; align-items:stretch } @media (min-width:576px){ .reviews__track{ --per:1.55; --hgap:16px } } @media (min-width:768px){ .reviews__track{ --per:2.1; --hgap:18px } } @media (min-width:992px){ .reviews__track{ --per:2.2; --hgap:18px } } @media (min-width:1200px){ .reviews__track{ --per:3; --hgap:20px } } @media (min-width:1700px){ .reviews__track{ --per:3.4 } } .review{ display:flex } .review__card{ position:relative; width:100%; display:flex; flex-direction:column; background:var(--card); border:1px solid var(--line); border-radius:var(--radius-lg); padding:20px 20px 18px; box-shadow:var(--shadow-sm); overflow:hidden; transition:box-shadow .3s ease,border-color .3s ease,transform .3s var(--ease); } .review__card::before{ content:''; position:absolute; inset:0 0 auto 0; height:3px; background:linear-gradient(90deg,var(--copper) 0%,var(--rose) 100%); opacity:.85; } .review:hover .review__card{ box-shadow:var(--shadow); border-color:var(--copper-soft); transform:translateY(-5px) } .review__quote{ position:absolute; right:14px; top:16px; width:44px; height:44px; fill:var(--copper); opacity:.09; pointer-events:none; } .review__card .stars{ margin-bottom:10px } .review__card p{ margin:0 0 16px; font-size:13.5px; line-height:1.72; color:var(--ink-2); flex:1 1 auto; } .review__foot{ display:flex; align-items:center; gap:11px; padding-top:14px; border-top:1px solid var(--line); } .review__avatar{ flex:none; width:40px; height:40px; border-radius:50%; display:flex; align-items:center; justify-content:center; background:linear-gradient(140deg,var(--copper-soft) 0%,var(--rose) 100%); color:#fff; font-size:13px; font-weight:600; letter-spacing:.04em; } .review__who{ flex:1 1 auto; min-width:0 } .review__who cite{ display:block; font-size:13.5px; font-weight:600; color:var(--ink); line-height:1.3 } .review__who small{ display:block; font-size:11.5px; color:var(--muted) } .review__src{ flex:none; width:18px; height:18px; opacity:.9 } @media (min-width:1200px){ .review__card{ padding:24px 24px 20px } .review__card p{ font-size:14px } } .slider-arrow{ position:absolute; top:50%; transform:translateY(-50%); z-index:5; display:none } .slider-arrow--prev{ left:-18px } .slider-arrow--next{ right:-18px } @media (min-width:992px){ .slider-arrow{ display:flex } } @media (min-width:1400px){ .slider-arrow--prev{ left:-22px } .slider-arrow--next{ right:-22px } } /* ═══════════════ 19 · PAKETLER & FİYATLAR ═══════════════ */ .pricing{ background:var(--cream) } .price-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:12px } @media (min-width:576px){ .price-grid{ gap:16px } } @media (min-width:768px){ .price-grid{ grid-template-columns:repeat(3,1fr); gap:18px } } @media (min-width:1200px){ .price-grid{ grid-template-columns:repeat(6,1fr); gap:14px } } @media (min-width:1400px){ .price-grid{ gap:18px } } .price{ display:flex; flex-direction:column; text-align:center; background:var(--card-tint); border:1px solid var(--line); border-radius:var(--radius); padding:18px 12px 16px; transition:transform .3s var(--ease),box-shadow .3s ease,border-color .3s ease,background-color .3s ease; } .price:hover{ transform:translateY(-5px); box-shadow:var(--shadow); border-color:var(--copper-soft); background:var(--card) } .price__cat{ font-size:10.5px; font-weight:700; letter-spacing:.09em; text-transform:uppercase; color:var(--copper-ink); margin:0 0 9px; line-height:1.3; } .price__name{ font-family:var(--font-display); font-size:15px; font-weight:600; color:var(--ink); margin:0 0 2px; line-height:1.3; min-height:2.6em; /* 2 satır → fiyatlar aynı hizada başlar */ display:flex; align-items:center; justify-content:center; } .price__meta{ font-size:12px; color:var(--muted); margin:0 0 12px } .price__amount{ font-family:var(--font-display); font-size:23px; font-weight:700; color:var(--ink); margin:0 0 2px; line-height:1.15; letter-spacing:-.01em; } .price__old{ font-size:12.5px; color:var(--muted-2); margin:0 0 14px } .price .btn-brand{ margin-top:auto; --btn-py:10px; font-size:11px; min-height:42px } .pricing__note{ margin:16px 0 0; font-size:11.5px; color:var(--muted); text-align:center } @media (min-width:576px){ .price{ padding:20px 14px 18px } .price__name{ font-size:16px } .price__amount{ font-size:25px } } @media (min-width:1200px){ .price{ padding:22px 12px 18px } .price__cat{ font-size:10px } .price__name{ font-size:15px } .price__amount{ font-size:24px } .pricing__note{ font-size:12.5px } } @media (min-width:1400px){ .price{ padding:24px 16px 20px } .price__name{ font-size:16.5px } .price__amount{ font-size:27px } } /* ═══════════════ 20 · BLOG ═══════════════ */ .blog{ background:var(--cream-2) } .blog-grid{ display:grid; gap:14px } @media (min-width:576px){ .blog-grid{ gap:18px } } @media (min-width:992px){ .blog-grid{ grid-template-columns:repeat(3,1fr); gap:20px } } @media (min-width:1400px){ .blog-grid{ gap:26px } } .post{ display:flex } .post > article{ display:flex; width:100% } .post__link{ display:flex; flex-direction:column; width:100%; background:var(--card); border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; color:inherit; transition:transform .3s var(--ease),box-shadow .3s ease,border-color .3s ease; } .post__link:hover,.post__link:focus-visible{ transform:translateY(-5px); box-shadow:var(--shadow); border-color:var(--copper-soft) } .post__media{ display:block; order:1; overflow:hidden; background:var(--cream-3); flex:none } .post__media img{ width:100%; height:100%; object-fit:cover; aspect-ratio:16/10; transition:transform .6s var(--ease) } .post__link:hover .post__media img{ transform:scale(1.06) } .post__body{ display:flex; flex-direction:column; order:2; padding:16px 18px 18px; flex:1 1 auto } .post__cat{ display:inline-flex; align-self:flex-start; font-size:9.5px; font-weight:700; letter-spacing:.09em; text-transform:uppercase; color:var(--copper-ink); background:var(--cream-2); border:1px solid var(--line); padding:4px 9px; border-radius:99px; margin-bottom:10px; } .post__title{ font-family:var(--font-display); font-size:19px; margin:0 0 8px; line-height:1.25 } .post__excerpt{ font-size:13px; line-height:1.6; margin:0 0 14px; color:var(--muted) } .post__more{ margin-top:auto; display:inline-flex; align-items:center; gap:7px; font-size:12px; font-weight:600; color:var(--copper-ink); } .post__more .ico{ transition:transform .3s var(--ease) } .post__link:hover .post__more .ico{ transform:translateX(4px) } @media (min-width:576px){ .post__link{ flex-direction:row; align-items:stretch } .post__body{ order:1; flex:1 1 62%; padding:20px 22px } .post__media{ order:2; flex:0 0 38%; position:relative } .post__media img{ position:absolute; inset:0; width:100%; height:100%; aspect-ratio:auto } .post__title{ font-size:21px } } @media (min-width:992px){ .post__body{ flex-basis:60%; padding:18px 18px 20px } .post__media{ flex-basis:40% } .post__title{ font-size:18px } .post__excerpt{ font-size:12.5px } } @media (min-width:1400px){ .post__body{ padding:24px 24px 26px } .post__title{ font-size:21px } .post__excerpt{ font-size:13.5px } } /* ═══════════════ 21 · İLETİŞİM · RANDEVU · HARİTA ═══════════════ */ .contact{ background:var(--cream) } .contact__grid{ display:grid; gap:18px } @media (min-width:992px){ .contact__grid{ grid-template-columns:minmax(280px,40%) 1fr; gap:24px; align-items:start } } @media (min-width:1400px){ .contact__grid{ grid-template-columns:minmax(320px,36%) 1fr; gap:32px } } /* bilgi kartları */ .infocards{ display:grid; gap:10px } @media (min-width:576px) and (max-width:991.98px){ .infocards{ grid-template-columns:repeat(2,1fr) } } @media (min-width:1200px){ .infocards{ gap:12px } } .infocard{ display:flex; align-items:flex-start; gap:13px; background:var(--card); border:1px solid var(--line); border-radius:var(--radius); padding:15px 16px; box-shadow:var(--shadow-sm); transition:border-color .28s ease,box-shadow .28s ease; } .infocard:hover{ border-color:var(--copper-soft); box-shadow:var(--shadow) } .infocard > div{ min-width:0 } .infocard__ico{ flex:none; width:42px; height:42px; border-radius:12px; display:flex; align-items:center; justify-content:center; background:var(--cream-2); color:var(--copper); font-size:18px; } .infocard__ico--wa{ background:rgba(14,127,110,.11); color:var(--wa) } .infocard__label{ font-family:var(--font-sans); font-size:10.5px; font-weight:700; letter-spacing:.11em; text-transform:uppercase; color:var(--copper-ink); margin:0 0 4px; } .infocard__val{ margin:0; font-size:14px; line-height:1.55; color:var(--ink); font-weight:500 } .infocard__val a{ color:var(--ink); display:inline-flex; align-items:center; min-height:40px } .infocard__val a:hover{ color:var(--rose) } .infocard__note{ display:block; font-size:11.5px; color:var(--muted); margin-top:2px } .infocard__link{ display:inline-flex; align-items:center; gap:6px; min-height:34px; font-size:12px; font-weight:600; color:var(--copper-ink); margin-top:2px; } .infocard__link .ico{ transition:transform .28s var(--ease) } .infocard__link:hover .ico{ transform:translateX(4px) } @media (min-width:1200px){ .infocard{ padding:17px 18px } .infocard__val{ font-size:15px } } /* randevu formu */ .apform{ background:var(--card); border:1px solid var(--line); border-radius:var(--radius-lg); padding:20px 18px 22px; box-shadow:var(--shadow-sm); } .apform__title{ font-family:var(--font-display); font-size:21px; margin:0 0 5px } .apform__lead{ font-size:13px; color:var(--muted); margin:0 0 18px } .apform__row{ display:grid; gap:12px; margin-bottom:12px } @media (min-width:480px){ .apform__row{ grid-template-columns:1fr 1fr } } .field{ display:grid; gap:6px; min-width:0 } .field label{ font-size:11.5px; font-weight:600; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-2); } .field label span{ color:var(--rose) } .field input,.field select,.field textarea{ width:100%; min-height:46px; padding:11px 13px; font-family:inherit; font-size:14px; color:var(--ink); background:var(--cream); border:1px solid var(--line-2); border-radius:10px; transition:border-color .2s ease,box-shadow .2s ease,background-color .2s ease; -webkit-appearance:none; appearance:none; } .field textarea{ min-height:88px; resize:vertical; line-height:1.6 } .field select{ background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%236E625C'%3E%3Cpath d='M3.2 5.6 8 10.4l4.8-4.8'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 12px center; background-size:14px; padding-right:36px; } .field input::placeholder,.field textarea::placeholder{ color:#8A7C74 } .field input:focus,.field select:focus,.field textarea:focus{ outline:none; background:#fff; border-color:var(--rose); box-shadow:0 0 0 3px rgba(164,99,91,.16); } .field input:user-invalid,.field textarea:user-invalid{ border-color:#C0564C } .apform .field{ margin-bottom:12px } .apform__row .field{ margin-bottom:0 } .apform__error{ margin:0 0 12px; padding:10px 13px; border-radius:9px; background:#FBE9E7; border:1px solid #F0C7C2; color:#9A3B33; font-size:12.5px; font-weight:500; } .apform__submit{ width:100%; margin-top:4px } .apform__alt{ margin:14px 0 0; font-size:12.5px; color:var(--muted); text-align:center } .apform__alt a{ font-weight:600 } .apform__kvkk{ margin:10px 0 0; font-size:11px; line-height:1.6; color:var(--muted-2); text-align:center } .apform__kvkk a{ color:var(--copper-ink); text-decoration:underline } @media (min-width:768px){ .apform{ padding:24px 24px 26px } .apform__title{ font-size:23px } } @media (min-width:1400px){ .apform{ padding:30px 30px 32px } .apform__title{ font-size:26px } } /* gerçek Google Haritalar gömme */ .mapwrap{ position:relative; margin-top:18px; border-radius:var(--radius-lg); overflow:hidden; border:1px solid var(--line); box-shadow:var(--shadow); background:var(--cream-2); } .mapwrap__frame{ display:block; width:100%; height:300px; border:0; filter:saturate(.92); } .mapwrap__card{ position:absolute; z-index:2; left:14px; bottom:14px; width:min(calc(100% - 28px),278px); padding:14px 16px; border-radius:14px; background:rgba(253,250,248,.97); box-shadow:var(--shadow); backdrop-filter:blur(6px); } .mapwrap__card strong{ display:block; font-size:13.5px; color:var(--ink); letter-spacing:.02em; margin-bottom:4px } .mapwrap__card small{ display:block; font-size:11.5px; color:var(--muted); line-height:1.5; margin-bottom:11px } .mapwrap__btn{ display:inline-flex; align-items:center; justify-content:center; gap:7px; min-height:40px; padding:9px 16px; border-radius:9px; background:var(--rose); color:#fff; font-size:11px; font-weight:600; letter-spacing:.05em; text-transform:uppercase; transition:background-color .22s ease; } .mapwrap__btn:hover{ background:var(--rose-dark); color:#fff } .mapwrap__btn .ico{ transition:transform .28s var(--ease) } .mapwrap__btn:hover .ico{ transform:translateX(4px) } @media (min-width:768px){ .mapwrap__frame{ height:360px } .mapwrap__card{ left:18px; bottom:18px; padding:16px 18px } .mapwrap__card strong{ font-size:14.5px } .mapwrap__card small{ font-size:12px } } @media (min-width:992px){ .mapwrap{ margin-top:24px } .mapwrap__frame{ height:400px } } @media (min-width:1400px){ .mapwrap__frame{ height:440px } } /* ═══════════════ 22 · FİNAL CTA ═══════════════ */ .finalcta{ position:relative; overflow:hidden; isolation:isolate; text-align:center } /* Dekoratif arka plan: adres satır içi --finalcta-bg değişkeniyle gelir. ::before kullanılır çünkü ::after zaten koyulaştırma örtüsü. */ .finalcta--bg::before{ content:''; position:absolute; inset:0; z-index:-2; background-image:var(--finalcta-bg); background-size:cover; background-position:center; } .finalcta::after{ content:''; position:absolute; inset:0; z-index:-1; background:linear-gradient(180deg,rgba(23,22,26,.80) 0%,rgba(30,24,22,.86) 100%); } .finalcta__inner{ padding-block:52px } .finalcta__title{ font-family:var(--font-display); color:#fff; font-size:clamp(26px,6.4vw,34px); line-height:1.2; margin:0 0 12px; } .finalcta__lead{ color:rgba(244,236,229,.86); font-size:14.5px; max-width:56ch; margin:0 auto 26px; line-height:1.65; } .finalcta__actions{ display:grid; gap:12px; justify-content:center } @media (min-width:576px){ .finalcta__actions{ grid-template-columns:auto auto } .finalcta__inner{ padding-block:60px } } @media (min-width:992px){ .finalcta__inner{ padding-block:74px } .finalcta__title{ font-size:clamp(34px,3.2vw,42px) } .finalcta__lead{ font-size:16px; margin-bottom:32px } } @media (min-width:1400px){ .finalcta__inner{ padding-block:88px } } /* ═══════════════ 23 · FOOTER ═══════════════ */ .site-footer{ background:var(--dark); color:rgba(239,230,222,.78); padding-block:40px 26px; font-size:13.5px; } .footer__grid{ display:grid; gap:28px } @media (min-width:576px){ .footer__grid{ grid-template-columns:repeat(2,1fr); gap:28px 24px } .footer__brand{ grid-column:1 / -1 } } @media (min-width:992px){ .site-footer{ padding-block:52px 26px } .footer__grid{ grid-template-columns:1.5fr 1fr 1fr 1fr 1.4fr; gap:26px } .footer__brand{ grid-column:auto } } @media (min-width:1200px){ .site-footer{ padding-block:60px 28px } .footer__grid{ gap:34px } } .footer__logo{ width:auto; height:52px; margin-bottom:16px } .footer__brand p{ font-size:13px; line-height:1.75; max-width:42ch; margin:0 0 18px } .socials{ display:flex; gap:9px } .socials a{ width:40px; height:40px; border-radius:11px; display:flex; align-items:center; justify-content:center; background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.10); color:rgba(239,230,222,.82); font-size:16px; transition:background-color .22s ease,color .22s ease,border-color .22s ease,transform .22s var(--ease); } .socials a:hover{ background:var(--rose); border-color:var(--rose); color:#fff; transform:translateY(-3px) } .footer__head{ font-family:var(--font-sans); font-size:12.5px; font-weight:700; letter-spacing:.11em; text-transform:uppercase; color:#fff; margin:0 0 15px; } .footer__col ul{ display:grid; grid-template-columns:repeat(2,1fr); gap:4px 12px } .footer__col a{ display:inline-flex; align-items:center; min-height:40px; color:rgba(239,230,222,.76); font-size:13px } .footer__col a:hover{ color:var(--copper-soft) } @media (min-width:576px){ .footer__col ul{ grid-template-columns:1fr; gap:2px } } .footer__col--contact ul{ grid-template-columns:1fr; gap:2px } .footer__contact li{ display:flex; align-items:center; gap:11px; font-size:13px; line-height:1.6 } .footer__contact .ico{ color:var(--copper-soft); font-size:15px; flex:none } .footer__contact a{ min-height:40px } .footer__contact address{ color:rgba(239,230,222,.76) } .footer__bottom{ margin-top:30px; padding-top:20px; border-top:1px solid rgba(255,255,255,.09); display:grid; gap:6px; font-size:11.5px; color:rgba(239,230,222,.55); } .footer__bottom p{ margin:0 } @media (min-width:768px){ .footer__bottom{ grid-template-columns:1fr auto; align-items:center; font-size:12px } .footer__nap{ text-align:right } } /* ═══════════════ 24 · MOBİL SABİT CTA + YÜZEN BUTONLAR ═══════════════ */ .mobar{ position:fixed; left:0; right:0; bottom:0; z-index:1100; display:grid; grid-template-columns:1fr 1fr 1.35fr; gap:1px; background:var(--line); border-top:1px solid var(--line); padding-bottom:env(safe-area-inset-bottom); box-shadow:0 -6px 24px rgba(90,60,45,.12); } .mobar__btn{ display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px; min-height:var(--mobar-h); padding:8px 4px; background:var(--card); color:var(--ink-2); font-size:10.5px; font-weight:600; letter-spacing:.03em; line-height:1.2; transition:background-color .2s ease,color .2s ease; } .mobar__btn .ico{ font-size:18px; color:var(--rose) } .mobar__btn:active{ background:var(--cream-2) } .mobar__btn--wa .ico{ color:var(--wa-bright) } .mobar__btn--cta{ background:var(--rose); color:#fff } .mobar__btn--cta .ico{ color:#fff } .mobar__btn--cta:active{ background:var(--rose-dark) } @media (min-width:400px){ .mobar__btn{ font-size:11.5px } } @media (min-width:992px){ .mobar{ display:none } } .fab-wa{ position:fixed; right:20px; bottom:20px; z-index:1050; width:54px; height:54px; border-radius:50%; display:none; align-items:center; justify-content:center; background:var(--wa); color:#fff; font-size:26px; box-shadow:0 10px 28px rgba(14,127,110,.42); transition:transform .28s var(--ease),background-color .22s ease; } .fab-wa:hover{ background:var(--wa-dark); color:#fff; transform:scale(1.08) } @media (min-width:992px){ .fab-wa{ display:flex } } .totop{ position:fixed; z-index:1050; right:20px; bottom:calc(var(--mobar-h) + 16px); width:42px; height:42px; border-radius:50%; display:flex; align-items:center; justify-content:center; background:var(--card); border:1px solid var(--line-2); color:var(--rose); font-size:15px; box-shadow:var(--shadow); opacity:0; visibility:hidden; transform:translateY(10px); transition:opacity .3s ease,transform .3s var(--ease),visibility .3s,background-color .22s ease; } .totop.is-visible{ opacity:1; visibility:visible; transform:none } .totop:hover{ background:var(--rose); color:#fff; border-color:var(--rose) } @media (min-width:992px){ .totop{ right:20px; bottom:86px; width:46px; height:46px } } /* ═══════════════ 25 · BREADCRUMB (alt sayfalar için hazır) ═══════════════ */ .breadcrumb-nav{ background:var(--cream-2); border-bottom:1px solid var(--line); padding-block:10px } .breadcrumb-nav ol{ display:flex; flex-wrap:wrap; align-items:center; gap:6px; font-size:12.5px } .breadcrumb-nav li{ display:flex; align-items:center; gap:6px; color:var(--muted) } .breadcrumb-nav li + li::before{ content:'/'; color:var(--line-2) } .breadcrumb-nav a{ color:var(--copper-ink) } .breadcrumb-nav [aria-current="page"]{ color:var(--ink) } /* ═══════════════ 26 · HAREKET AZALTMA & YAZDIRMA ═══════════════ */ @media (prefers-reduced-motion:reduce){ html{ scroll-behavior:auto } *,*::before,*::after{ animation-duration:.001ms!important; animation-iteration-count:1!important; transition-duration:.001ms!important; scroll-behavior:auto!important; } .hscroll{ scroll-behavior:auto } } @media print{ .topbar,.site-header,.mm,.mm-backdrop,.mobar,.fab-wa,.totop,.quickrail,.slider-nav,.slider-arrow{ display:none!important } body{ padding-bottom:0; background:#fff; color:#000 } .hscroll{ overflow:visible; flex-wrap:wrap } } /* ═══════════════ 27 · HİZMET ALT SAYFASI ═══════════════ */ /* — hero — */ .shero{ position:relative; overflow:hidden; background: radial-gradient(88% 66% at 12% 16%,rgba(255,250,246,.9) 0%,rgba(255,250,246,0) 62%), linear-gradient(165deg,#F7EBE1 0%,#F1E1D3 48%,#E9D5C4 100%); } .shero__inner{ padding-block:30px 34px } .shero__title{ font-family:var(--font-display); font-size:clamp(29px,7.4vw,38px); font-weight:700; line-height:1.12; letter-spacing:-.012em; color:var(--ink); margin:0 0 14px; } .shero__lead{ font-size:14.5px; line-height:1.7; color:var(--ink-2); margin:0 0 18px; max-width:56ch } .shero__lead strong{ color:var(--ink); font-weight:600 } .shero__chips{ display:flex; flex-wrap:wrap; gap:7px; margin:0 0 22px } .shero__chips li{ display:inline-flex; align-items:center; gap:6px; padding:7px 12px; border-radius:99px; background:rgba(253,250,248,.86); border:1px solid var(--line); font-size:11.5px; font-weight:600; letter-spacing:.02em; color:var(--ink-2); } .shero__chips .ico{ color:var(--copper) } .shero__cta{ display:grid; grid-template-columns:1fr; gap:10px; margin-bottom:18px } .shero__price{ display:flex; align-items:baseline; flex-wrap:wrap; gap:6px; margin:0; font-size:12.5px; color:var(--muted); } .shero__price strong{ font-family:var(--font-display); font-size:26px; color:var(--rose-dark); line-height:1 } .shero__media{ margin-top:22px } .shero__media img{ width:100%; aspect-ratio:16/10; object-fit:cover; object-position:center 22%; border-radius:var(--radius-lg); box-shadow:var(--shadow); } @media (min-width:576px){ .shero__cta{ grid-template-columns:auto auto; justify-content:start } .shero__lead{ font-size:15px } } @media (min-width:768px){ .shero__inner{ display:flex; align-items:center; gap:32px; padding-block:42px 46px } .shero__content{ flex:1 1 56% } .shero__media{ flex:1 1 44%; margin-top:0 } .shero__media img{ aspect-ratio:4/5 } .shero__title{ font-size:clamp(34px,4.4vw,44px) } } @media (min-width:1200px){ .shero__inner{ padding-block:60px 64px; gap:52px } .shero__content{ flex-basis:54% } .shero__media{ flex-basis:46% } .shero__media img{ aspect-ratio:5/4 } .shero__title{ font-size:clamp(42px,3.4vw,50px) } .shero__lead{ font-size:16.5px } .shero__chips li{ font-size:12.5px; padding:8px 14px } .shero__price strong{ font-size:30px } } @media (min-width:1400px){ .shero__inner{ padding-block:72px 76px } } /* — makale düzeni + içindekiler — */ .article{ background:var(--cream) } .article__grid{ display:grid; gap:24px } @media (min-width:992px){ .article__grid{ grid-template-columns:264px minmax(0,1fr); gap:38px; align-items:start } } @media (min-width:1400px){ .article__grid{ grid-template-columns:290px minmax(0,1fr); gap:52px } } .toc{ min-width:0 } @media (min-width:992px){ .toc{ position:sticky; top:calc(var(--header-h) + 18px) } } .toc__box{ background:var(--card); border:1px solid var(--line); border-radius:var(--radius); padding:4px 16px; box-shadow:var(--shadow-sm); } .toc__box > summary{ display:flex; align-items:center; gap:8px; cursor:pointer; list-style:none; padding:13px 0; min-height:44px; font-size:12px; font-weight:700; letter-spacing:.11em; text-transform:uppercase; color:var(--copper-ink); } .toc__box > summary::-webkit-details-marker{ display:none } .toc__box > summary::after{ content:''; margin-left:auto; width:8px; height:8px; flex:none; border-right:2px solid var(--copper); border-bottom:2px solid var(--copper); transform:rotate(45deg) translateY(-2px); transition:transform .28s var(--ease); } .toc__box[open] > summary::after{ transform:rotate(-135deg) translateY(-2px) } .toc__list{ counter-reset:toc; padding:0 0 14px; margin:0; border-top:1px solid var(--line) } .toc__list li{ counter-increment:toc } .toc__list a{ display:flex; gap:9px; align-items:baseline; padding:9px 4px; min-height:40px; border-radius:8px; font-size:13.5px; line-height:1.4; color:var(--ink-2); } .toc__list a::before{ content:counter(toc,decimal-leading-zero); font-size:10.5px; font-weight:700; color:var(--copper); flex:none; letter-spacing:.04em; } .toc__list a:hover{ background:var(--cream-2); color:var(--rose-dark) } .toc__list a.is-current{ background:var(--cream-2); color:var(--rose-dark); font-weight:600 } .toc__cta{ margin-top:14px; padding:18px 18px 20px; border-radius:var(--radius); background:linear-gradient(160deg,#2A2226 0%,#1A1719 100%); color:#F2EAE3; } .toc__cta p{ font-size:13px; line-height:1.6; margin:0 0 14px; color:rgba(242,234,227,.86) } .toc__cta strong{ color:#fff } .toc__cta .btn-wa{ width:100%; font-size:11.5px } /* — makale tipografisi — */ .article__body{ min-width:0 } .article__body > h2{ font-family:var(--font-display); font-size:23px; line-height:1.25; margin:38px 0 14px; scroll-margin-top:calc(var(--header-h) + 20px); } .article__body > h2:first-of-type{ margin-top:30px } .article__body h3{ font-size:16px; margin:22px 0 8px; line-height:1.35 } .article__body p{ font-size:14.5px; line-height:1.78; margin:0 0 15px } .article__body strong{ color:var(--ink-2); font-weight:600 } .article__body a{ text-decoration:underline; text-underline-offset:3px; text-decoration-thickness:1px } @media (min-width:768px){ .article__body > h2{ font-size:27px; margin-top:46px } .article__body p{ font-size:15.5px } } @media (min-width:1200px){ .article__body > h2{ font-size:31px; margin-top:54px } .article__body h3{ font-size:17.5px } .article__body p{ font-size:16px; line-height:1.82 } } .bullets{ display:grid; gap:10px; margin:0 0 18px } .bullets li{ position:relative; padding-left:20px; font-size:14.5px; line-height:1.7 } .bullets li::before{ content:''; position:absolute; left:2px; top:.66em; width:6px; height:6px; border-radius:50%; background:var(--copper); } @media (min-width:1200px){ .bullets li{ font-size:15.5px } } /* — AEO: kısa cevap kutusu — */ .answer-box{ background:linear-gradient(150deg,#FBF3EC 0%,#F7E9DC 100%); border:1px solid var(--copper-soft); border-left:4px solid var(--copper); border-radius:var(--radius); padding:18px 18px 20px; margin:0 0 22px; } .answer-box__label{ display:flex; align-items:center; gap:7px; margin:0 0 8px; font-size:11px; font-weight:700; letter-spacing:.13em; text-transform:uppercase; color:var(--copper-ink); } .answer-box p:last-child{ margin:0; font-size:14.5px; line-height:1.75; color:var(--ink-2) } @media (min-width:1200px){ .answer-box{ padding:24px 26px 26px } .answer-box p:last-child{ font-size:16px } } /* — AEO: hızlı bilgi tablosu — */ .keyfacts{ background:var(--card); border:1px solid var(--line); border-radius:var(--radius); padding:18px; margin:0 0 26px; box-shadow:var(--shadow-sm); } .keyfacts__title{ font-family:var(--font-sans); font-size:12px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--copper-ink); margin:0 0 14px; padding-bottom:11px; border-bottom:1px solid var(--line); } .keyfacts__grid{ display:grid; gap:0; margin:0 } .keyfacts__grid > div{ display:grid; grid-template-columns:1fr; gap:2px; padding:10px 0; border-bottom:1px dashed var(--line); } .keyfacts__grid > div:last-child{ border-bottom:0; padding-bottom:0 } .keyfacts dt{ font-size:11.5px; font-weight:600; letter-spacing:.05em; text-transform:uppercase; color:var(--copper-ink) } .keyfacts dd{ margin:0; font-size:14px; line-height:1.55; color:var(--ink-2) } @media (min-width:576px){ .keyfacts__grid > div{ grid-template-columns:38% 1fr; gap:14px; align-items:baseline } .keyfacts dt{ text-transform:none; font-size:13px; letter-spacing:0 } } @media (min-width:1200px){ .keyfacts{ padding:24px 26px } .keyfacts dd{ font-size:15px } } /* — bilgi kutuları — */ .callout{ border-radius:var(--radius); padding:15px 17px; margin:0 0 20px; border:1px solid } .callout p{ margin:0; font-size:13.5px; line-height:1.7 } .callout--info{ background:#F4F0FA; border-color:#DED4EE; color:#4A4060 } .callout--warn{ background:#FDF3E8; border-color:#F0DAB9; color:#6B4E23 } .callout--price{ background:var(--cream-2); border-color:var(--copper-soft); color:var(--ink-2) } .callout strong{ color:inherit; font-weight:700 } @media (min-width:1200px){ .callout{ padding:18px 22px } .callout p{ font-size:14.5px } } .note{ font-size:12.5px; color:var(--muted); margin:-6px 0 20px } /* — veri tablosu — */ .tablewrap{ overflow-x:auto; margin:0 0 20px; border:1px solid var(--line); border-radius:var(--radius); background:var(--card); -webkit-overflow-scrolling:touch; } .dtable{ width:100%; min-width:520px; border-collapse:collapse; font-size:13.5px } .dtable caption{ caption-side:top; text-align:left; padding:14px 16px 12px; font-size:11.5px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--copper-ink); border-bottom:1px solid var(--line); } .dtable th,.dtable td{ padding:11px 14px; text-align:left; border-bottom:1px solid var(--line) } .dtable thead th{ background:var(--cream-2); font-size:11.5px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--ink); white-space:nowrap; } .dtable tbody th{ font-weight:600; color:var(--ink) } .dtable tbody tr:last-child th,.dtable tbody tr:last-child td{ border-bottom:0 } .dtable tbody tr:hover{ background:var(--cream) } .dtable--price td b{ font-size:15px; color:var(--rose-dark) } .dtable .is-highlight{ background:var(--cream-2) } .dtable .is-highlight:hover{ background:var(--cream-3) } .dtable .tag{ display:inline-block; margin-left:7px; padding:3px 8px; border-radius:99px; background:var(--rose); color:#fff; font-size:9.5px; font-weight:700; letter-spacing:.07em; text-transform:uppercase; vertical-align:middle; } .badge{ display:inline-block; padding:3px 9px; border-radius:99px; font-size:10.5px; font-weight:700; letter-spacing:.05em; } .badge--yes{ background:#E4F3EC; color:#1F6B52 } .badge--no{ background:#F6EAE8; color:#8C453C } @media (min-width:1200px){ .dtable{ font-size:14.5px } .dtable th,.dtable td{ padding:13px 18px } } /* — iki sütunlu listeler — */ .twocol{ display:grid; gap:14px; margin:0 0 22px } @media (min-width:768px){ .twocol{ grid-template-columns:1fr 1fr; gap:18px } } .checklist,.carecard{ background:var(--card); border:1px solid var(--line); border-radius:var(--radius); padding:18px; } .checklist h3,.carecard h3{ display:flex; align-items:center; gap:8px; margin:0 0 12px; padding-bottom:11px; border-bottom:1px solid var(--line); font-family:var(--font-sans); font-size:13px; font-weight:700; letter-spacing:.05em; text-transform:uppercase; } .checklist ul{ display:grid; gap:9px } .checklist li{ position:relative; padding-left:22px; font-size:13.5px; line-height:1.6; color:var(--ink-2) } .checklist li::before{ position:absolute; left:0; top:.05em; font-size:13px; font-weight:700; } .checklist--yes{ border-color:#CDE6DA } .checklist--yes h3{ color:#1F6B52; border-color:#CDE6DA } .checklist--yes li::before{ content:'✓'; color:#2E8B6A } .checklist--no{ border-color:#EFD5D1 } .checklist--no h3{ color:#8C453C; border-color:#EFD5D1 } .checklist--no li::before{ content:'✕'; color:#B65A4E } .carecard h3{ color:var(--copper-ink) } .carecard .ticks{ margin-bottom:0 } @media (min-width:1200px){ .checklist,.carecard{ padding:22px 24px } .checklist li{ font-size:14.5px } } /* — adım adım süreç — */ .steps{ counter-reset:step; display:grid; gap:12px; margin:0 0 24px; padding:0 } .steps > li{ counter-increment:step; position:relative; background:var(--card); border:1px solid var(--line); border-radius:var(--radius); padding:16px 18px 16px 58px; } .steps > li::before{ content:counter(step); position:absolute; left:16px; top:16px; width:30px; height:30px; border-radius:50%; display:flex; align-items:center; justify-content:center; background:var(--rose); color:#fff; font-size:13px; font-weight:700; } .steps h3{ margin:0 0 5px; font-family:var(--font-sans); font-size:14.5px; font-weight:700; letter-spacing:.01em } .steps p{ margin:0; font-size:13.5px; line-height:1.65; color:var(--muted) } @media (min-width:1200px){ .steps > li{ padding:20px 24px 20px 68px } .steps > li::before{ left:20px; top:20px; width:34px; height:34px; font-size:14px } .steps h3{ font-size:16px } .steps p{ font-size:14.5px } } /* — neden biz ızgarası — */ .whygrid{ display:grid; grid-template-columns:repeat(2,1fr); gap:12px; margin:0 0 26px } @media (min-width:768px){ .whygrid{ grid-template-columns:repeat(3,1fr); gap:16px } } .whygrid > div{ background:var(--card); border:1px solid var(--line); border-radius:var(--radius); padding:16px 15px; transition:border-color .28s ease,box-shadow .28s ease; } .whygrid > div:hover{ border-color:var(--copper-soft); box-shadow:var(--shadow-sm) } .whygrid .ico--lg{ color:var(--copper); margin-bottom:9px } .whygrid h3{ margin:0 0 4px; font-family:var(--font-sans); font-size:13px; font-weight:700; letter-spacing:.02em } .whygrid p{ margin:0; font-size:12.5px; line-height:1.55; color:var(--muted) } @media (min-width:1200px){ .whygrid > div{ padding:20px 18px } .whygrid h3{ font-size:14.5px } .whygrid p{ font-size:13.5px } } /* — E-E-A-T yazar kutusu — */ .authorbox{ display:grid; gap:16px; margin:30px 0; background:linear-gradient(150deg,var(--cream-2) 0%,var(--card-tint) 100%); border:1px solid var(--copper-soft); border-radius:var(--radius-lg); padding:20px; } @media (min-width:576px){ .authorbox{ grid-template-columns:110px 1fr; gap:20px; align-items:start } } @media (min-width:1200px){ .authorbox{ grid-template-columns:140px 1fr; gap:26px; padding:26px 28px } } .authorbox__img{ width:100%; max-width:130px; aspect-ratio:1/1; object-fit:cover; border-radius:50%; border:3px solid #fff; box-shadow:var(--shadow-sm); } .authorbox__label{ font-size:10.5px; font-weight:700; letter-spacing:.13em; text-transform:uppercase; color:var(--copper-ink); margin:0 0 5px; } .authorbox__name{ font-family:var(--font-display); font-size:21px; margin:0 0 3px } .authorbox__role{ font-size:12.5px; font-weight:600; color:var(--rose-dark); margin:0 0 10px } .authorbox__bio{ font-size:13.5px !important; line-height:1.7 !important; margin:0 0 12px !important; color:var(--muted) } .authorbox__meta{ display:flex; flex-wrap:wrap; gap:8px 18px } .authorbox__meta li{ display:flex; align-items:center; gap:6px; font-size:11.5px; color:var(--muted) } .authorbox__meta .ico{ color:var(--copper) } @media (min-width:1200px){ .authorbox__name{ font-size:24px } .authorbox__bio{ font-size:14.5px !important } } /* — SSS akordiyonu (JS gerektirmez) — */ .faq{ display:grid; gap:8px; margin:0 0 26px } .faq__item{ background:var(--card); border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; transition:border-color .25s ease,box-shadow .25s ease; } .faq__item[open]{ border-color:var(--copper-soft); box-shadow:var(--shadow-sm) } .faq__item > summary{ display:flex; align-items:center; justify-content:space-between; gap:14px; padding:15px 17px; min-height:52px; cursor:pointer; list-style:none; font-size:14.5px; font-weight:600; color:var(--ink); line-height:1.4; } .faq__item > summary::-webkit-details-marker{ display:none } .faq__item > summary:hover{ color:var(--rose-dark) } .faq__item > summary .ico{ flex:none; color:var(--copper); transition:transform .3s var(--ease) } .faq__item[open] > summary .ico{ transform:rotate(180deg) } .faq__a{ padding:0 17px 17px } .faq__a p{ margin:0; font-size:13.5px !important; line-height:1.75 !important; color:var(--muted) } @media (min-width:1200px){ .faq__item > summary{ padding:18px 22px; font-size:16px } .faq__a{ padding:0 22px 20px } .faq__a p{ font-size:14.5px !important } } /* — kaynaklar — */ .sources{ margin:30px 0 0; padding:20px; border-radius:var(--radius); background:var(--cream-2); border:1px solid var(--line); } .sources h2{ font-family:var(--font-sans) !important; font-size:12px !important; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--copper-ink); margin:0 0 12px !important; } .sources ul{ display:grid; gap:9px; margin:0 0 14px } .sources li{ font-size:12.5px; line-height:1.65; color:var(--muted); padding-left:16px; position:relative } .sources li::before{ content:'—'; position:absolute; left:0; color:var(--copper) } .sources__note{ margin:0 !important; font-size:12px !important; line-height:1.65 !important; color:var(--muted); font-style:italic } /* — ilgili hizmetler / blog / bölgeler — */ .related{ background:var(--cream-2) } .svc-grid--4{ grid-template-columns:repeat(2,1fr) } @media (min-width:768px){ .svc-grid--4{ grid-template-columns:repeat(4,1fr) } } @media (min-width:1200px){ .svc-grid--4{ grid-template-columns:repeat(4,1fr); gap:20px } } .section-title--sub{ margin-top:44px } .linklist{ display:grid; gap:10px; margin:0 0 8px } @media (min-width:768px){ .linklist{ grid-template-columns:repeat(3,1fr) } } .linklist a{ display:flex; align-items:flex-start; gap:10px; height:100%; min-width:0; background:var(--card); border:1px solid var(--line); border-radius:var(--radius); padding:15px 16px; font-size:14px; font-weight:600; color:var(--ink); line-height:1.4; transition:transform .28s var(--ease),box-shadow .28s ease,border-color .28s ease; } .linklist a:hover{ transform:translateY(-4px); box-shadow:var(--shadow); border-color:var(--copper-soft) } .linklist .ico{ color:var(--copper); margin-top:.32em; flex:none } .linklist__t{ min-width:0 } .linklist__t > span{ display:block; margin-top:4px; font-size:12px; font-weight:400; color:var(--muted); line-height:1.5 } .areas{ margin-top:36px; padding:22px 20px; border-radius:var(--radius-lg); background:var(--card); border:1px solid var(--line) } .areas__title{ font-family:var(--font-sans); font-size:13px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--copper-ink); margin:0 0 8px; } .areas > p{ font-size:13.5px; line-height:1.7; margin:0 0 16px; color:var(--muted) } .areas__list{ display:grid; grid-template-columns:repeat(2,1fr); gap:9px } @media (min-width:576px){ .areas__list{ grid-template-columns:repeat(3,1fr) } } @media (min-width:992px){ .areas__list{ grid-template-columns:repeat(6,1fr) } } .areas__list li{ text-align:center; padding:11px 8px; border-radius:10px; background:var(--cream-2); border:1px solid var(--line); } .areas__list strong{ display:block; font-size:13px; color:var(--ink) } .areas__list span{ display:block; font-size:11px; color:var(--muted); margin-top:2px } @media (min-width:1200px){ .areas{ padding:26px 28px } } /* öncesi/sonrası — sayfa içi varyant */ .ba__track--page{ --per:1.25; --hgap:12px; padding-top:2px } @media (min-width:576px){ .ba__track--page{ --per:1.8; --hgap:16px } } @media (min-width:992px){ .ba__track--page{ --per:2.2; --hgap:18px } } @media (min-width:1400px){ .ba__track--page{ --per:2.6; --hgap:20px } } /* ═══════════════ 28 · İÇ SAYFA ORTAK BLOKLARI ═══════════════ */ /* — sayfa hero'su — */ .phero{ background: radial-gradient(85% 62% at 14% 18%,rgba(255,250,246,.9) 0%,rgba(255,250,246,0) 60%), linear-gradient(165deg,#F8EDE4 0%,#F2E3D6 50%,#EBD8C8 100%); } .phero__inner{ padding-block:34px 36px; text-align:center } .phero__title{ font-family:var(--font-display); font-size:clamp(30px,7.6vw,40px); font-weight:700; line-height:1.12; letter-spacing:-.012em; color:var(--ink); margin:0 0 14px; } .phero__lead{ font-size:14.5px; line-height:1.75; color:var(--ink-2); margin:0 auto; max-width:64ch } .phero__lead strong{ color:var(--ink); font-weight:600 } .phero__cta{ display:grid; gap:10px; margin-top:22px; justify-content:center } .phero__chips{ display:flex; flex-wrap:wrap; justify-content:center; gap:7px; margin:18px 0 0 } .phero__chips li{ display:inline-flex; align-items:center; gap:6px; padding:7px 12px; border-radius:99px; background:rgba(253,250,248,.86); border:1px solid var(--line); font-size:11.5px; font-weight:600; color:var(--ink-2); } .phero__chips .ico{ color:var(--copper) } .phero__updated{ display:flex; align-items:center; justify-content:center; gap:7px; margin:16px 0 0; font-size:12.5px; color:var(--muted); } .phero__updated .ico{ color:var(--copper) } .phero--slim .phero__inner{ padding-block:30px 32px } .phero--split .phero__inner{ display:grid; gap:24px; text-align:left } .phero--split .phero__lead{ margin-inline:0 } .phero--split .phero__cta{ justify-content:start } .phero--split .phero__media img{ width:100%; aspect-ratio:16/10; object-fit:cover; border-radius:var(--radius-lg); box-shadow:var(--shadow); } @media (min-width:576px){ .phero__cta{ grid-template-columns:auto auto } .phero__lead{ font-size:15.5px } } @media (min-width:992px){ .phero__inner{ padding-block:52px 54px } .phero__title{ font-size:clamp(38px,3.6vw,48px) } .phero__lead{ font-size:17px } .phero--split .phero__inner{ grid-template-columns:1fr 1fr; gap:40px; align-items:center } .phero--split .phero__media img{ aspect-ratio:4/3 } .phero--slim .phero__inner{ padding-block:44px 46px } } @media (min-width:1400px){ .phero__inner{ padding-block:62px 64px } } /* — çip navigasyonu — */ .chipnav{ margin:0 0 26px } .chipnav ul{ display:flex; flex-wrap:wrap; gap:8px } .chip{ display:inline-flex; align-items:center; gap:7px; min-height:42px; padding:10px 16px; border-radius:99px; background:var(--card); border:1px solid var(--line); font-size:12.5px; font-weight:600; letter-spacing:.02em; color:var(--ink-2); transition:background-color .22s ease,color .22s ease,border-color .22s ease,transform .22s var(--ease); } .chip .ico{ color:var(--copper) } .chip:hover{ border-color:var(--copper-soft); color:var(--rose-dark); transform:translateY(-2px) } .chip.is-active{ background:var(--rose); border-color:var(--rose); color:#fff } .chip.is-active .ico{ color:#fff } .chipnav--anchor{ position:sticky; top:calc(var(--header-h) + 6px); z-index:20; padding-block:10px; background:var(--cream); margin-inline:calc(var(--gutter) * -1); padding-inline:var(--gutter); } .chipnav--anchor ul{ flex-wrap:nowrap; overflow-x:auto; padding-bottom:4px; scrollbar-width:thin } .chipnav--anchor .chip{ white-space:nowrap; flex:none } @media (min-width:992px){ .chipnav--anchor ul{ flex-wrap:wrap; overflow:visible } } /* — blog CTA bandı — */ .blogcta{ display:grid; gap:16px; margin-top:34px; padding:24px 22px; border-radius:var(--radius-lg); background:linear-gradient(155deg,#2A2226 0%,#1A1719 100%); color:#F2EAE3; } .blogcta h2{ font-family:var(--font-display); font-size:22px; color:#fff; margin:0 0 6px } .blogcta p{ margin:0; font-size:13.5px; line-height:1.7; color:rgba(242,234,227,.82) } .blogcta__actions{ display:grid; gap:10px } @media (min-width:576px){ .blogcta__actions{ grid-template-columns:auto auto; justify-content:start } } @media (min-width:992px){ .blogcta{ grid-template-columns:1fr auto; align-items:center; gap:28px; padding:30px 32px } .blogcta h2{ font-size:26px } .blogcta__actions{ grid-template-columns:auto auto } } /* ═══════════════ 29 · BLOG LİSTELEME ═══════════════ */ .bloglist{ background:var(--cream) } .feature{ margin:0 0 34px } .feature__link{ display:grid; gap:0; overflow:hidden; color:inherit; background:var(--card); border:1px solid var(--line); border-radius:var(--radius-lg); box-shadow:var(--shadow-sm); transition:transform .32s var(--ease),box-shadow .32s ease,border-color .32s ease; } .feature__link:hover{ transform:translateY(-5px); box-shadow:var(--shadow); border-color:var(--copper-soft) } .feature__media{ overflow:hidden; background:var(--cream-3) } .feature__media img{ width:100%; aspect-ratio:16/10; object-fit:cover; transition:transform .7s var(--ease) } .feature__link:hover .feature__media img{ transform:scale(1.05) } .feature__body{ padding:20px 20px 24px; display:flex; flex-direction:column } .feature__badge{ display:inline-flex; align-items:center; gap:6px; align-self:flex-start; padding:5px 11px; border-radius:99px; margin-bottom:12px; background:var(--rose); color:#fff; font-size:10px; font-weight:700; letter-spacing:.09em; text-transform:uppercase; } .feature__title{ font-family:var(--font-display); font-size:24px; line-height:1.22; margin:8px 0 10px } .feature__excerpt{ font-size:14px; line-height:1.7; color:var(--muted); margin:0 0 18px } .feature__body .btn-outline{ align-self:flex-start; margin-top:auto } @media (min-width:768px){ .feature__link{ grid-template-columns:1fr 1fr; align-items:stretch } .feature__media{ position:relative } .feature__media img{ position:absolute; inset:0; height:100%; aspect-ratio:auto } .feature__body{ padding:28px 28px 30px } .feature__title{ font-size:28px } } @media (min-width:1200px){ .feature__link{ grid-template-columns:1.05fr 1fr } .feature__body{ padding:38px 40px } .feature__title{ font-size:33px } .feature__excerpt{ font-size:15px } } .pgrid{ display:grid; gap:16px } @media (min-width:576px){ .pgrid{ grid-template-columns:repeat(2,1fr); gap:18px } } @media (min-width:992px){ .pgrid{ grid-template-columns:repeat(3,1fr); gap:22px } } @media (min-width:1400px){ .pgrid{ gap:26px } } .pgrid__empty{ text-align:center; padding:36px 0; color:var(--muted); font-size:14px } .pcard{ display:flex } .pcard > article{ display:flex; width:100% } .pcard__link{ display:flex; flex-direction:column; width:100%; color:inherit; overflow:hidden; background:var(--card); border:1px solid var(--line); border-radius:var(--radius); transition:transform .3s var(--ease),box-shadow .3s ease,border-color .3s ease; } .pcard__link:hover{ transform:translateY(-5px); box-shadow:var(--shadow); border-color:var(--copper-soft) } .pcard__media{ position:relative; display:block; overflow:hidden; background:var(--cream-3) } .pcard__media img{ width:100%; aspect-ratio:16/10; object-fit:cover; transition:transform .6s var(--ease) } .pcard__link:hover .pcard__media img{ transform:scale(1.06) } .pcard__cat{ position:absolute; z-index:2; left:11px; top:11px; padding:5px 10px; border-radius:99px; background:rgba(253,250,248,.94); color:var(--copper-ink); font-size:9.5px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; box-shadow:0 2px 8px rgba(0,0,0,.1); } .pcard__cat--inline{ position:static; box-shadow:none; background:var(--cream-2); border:1px solid var(--line) } .pcard__body{ display:flex; flex-direction:column; flex:1 1 auto; padding:16px 17px 18px } .pcard__meta{ display:flex; flex-wrap:wrap; align-items:center; gap:6px; font-size:11.5px; color:var(--muted); margin-bottom:8px; } .pcard__title{ font-family:var(--font-display); font-size:18px; line-height:1.28; margin:0 0 8px } .pcard__excerpt{ font-size:13px; line-height:1.65; color:var(--muted); margin:0 0 14px } .pcard__more{ margin-top:auto; display:inline-flex; align-items:center; gap:7px; font-size:12px; font-weight:600; color:var(--copper-ink); } .pcard__more .ico{ transition:transform .3s var(--ease) } .pcard__link:hover .pcard__more .ico{ transform:translateX(4px) } @media (min-width:1200px){ .pcard__body{ padding:20px 20px 22px } .pcard__title{ font-size:20px } .pcard__excerpt{ font-size:13.5px } } /* sayfalama */ .pager{ display:flex; align-items:center; justify-content:center; gap:12px; margin-top:30px } .pager__btn{ display:inline-flex; align-items:center; gap:7px; min-height:42px; padding:10px 16px; border-radius:9px; border:1px solid var(--line); background:var(--card); font-size:12.5px; font-weight:600; color:var(--ink-2); } .pager__btn.is-disabled{ opacity:.4; pointer-events:none } .pager__pages{ display:flex; gap:6px } .pager__page{ display:inline-flex; align-items:center; justify-content:center; width:42px; height:42px; border-radius:9px; font-size:13.5px; font-weight:600; border:1px solid var(--line); background:var(--card); color:var(--ink-2); } .pager__page.is-current{ background:var(--rose); border-color:var(--rose); color:#fff } /* ═══════════════ 30 · BLOG YAZI DETAYI ═══════════════ */ /* okuma ilerleme çubuğu */ .readbar{ position:fixed; top:0; left:0; right:0; z-index:1200; height:3px; background:transparent; pointer-events:none; } .readbar span{ display:block; height:100%; width:0; background:linear-gradient(90deg,var(--copper) 0%,var(--rose) 100%); transition:width .12s linear; } .postpage{ display:block } /* başlık alanı */ .posthero{ background:linear-gradient(180deg,#F8EDE4 0%,#F4E5D9 100%); padding-block:30px 0; position:relative; } .posthero::after{ content:''; position:absolute; left:0; right:0; bottom:0; height:52%; background:var(--cream); z-index:0; } .posthero > .container-x{ position:relative; z-index:1 } .posthero__inner{ max-width:780px; margin-inline:auto; text-align:center; padding-bottom:26px } .posthero__cat{ display:inline-block; padding:6px 15px; border-radius:99px; margin-bottom:16px; background:var(--rose); color:#fff; font-size:10.5px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; } .posthero__cat:hover{ background:var(--rose-dark); color:#fff } .posthero__title{ font-family:var(--font-display); font-size:clamp(28px,7vw,38px); line-height:1.16; letter-spacing:-.014em; margin:0 0 16px; color:var(--ink); } .posthero__lead{ font-size:15px; line-height:1.78; color:var(--muted); margin:0 auto 24px; max-width:60ch; } /* yazar şeridi */ .byline{ display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:12px 18px; padding:14px 18px; border-radius:99px; background:var(--card); border:1px solid var(--line); box-shadow:var(--shadow-sm); width:fit-content; margin-inline:auto; max-width:100%; } .byline__avatar{ width:42px; height:42px; border-radius:50%; object-fit:cover; flex:none; border:2px solid #fff; box-shadow:var(--shadow-sm); } .byline__who{ text-align:left; line-height:1.35 } .byline__who strong{ display:block; font-size:13.5px; color:var(--ink); font-weight:600 } .byline__who span{ display:block; font-size:11.5px; color:var(--muted) } .byline__meta{ display:flex; flex-wrap:wrap; gap:8px 16px } .byline__meta li{ display:flex; align-items:center; gap:6px; font-size:12px; color:var(--muted) } .byline__meta .ico{ color:var(--copper) } @media (max-width:575.98px){ .byline{ border-radius:var(--radius); flex-direction:column; gap:12px; width:100% } .byline__who{ text-align:center } .byline__meta{ justify-content:center } } /* kapak görseli */ .postcover{ margin:0 } .postcover img{ width:100%; aspect-ratio:16/9; object-fit:cover; border-radius:var(--radius-lg); box-shadow:var(--shadow); } .postcover figcaption{ margin-top:11px; text-align:center; font-size:11.5px; color:var(--muted); font-style:italic; } @media (min-width:992px){ .posthero{ padding-block:42px 0 } .posthero__inner{ padding-bottom:34px } .posthero__title{ font-size:clamp(36px,3.5vw,48px) } .posthero__lead{ font-size:17px } .postcover img{ aspect-ratio:21/9 } .postcover figcaption{ font-size:12.5px } } /* paylaş */ .share{ display:flex; align-items:center; gap:14px; flex-wrap:wrap; margin:28px 0 0; padding:18px 20px; border-radius:var(--radius); background:var(--cream-2); border:1px solid var(--line); } .share__label{ margin:0; font-size:11.5px; font-weight:700; letter-spacing:.11em; text-transform:uppercase; color:var(--copper-ink); } .share ul{ display:flex; gap:9px } .share a{ display:flex; align-items:center; justify-content:center; width:44px; height:44px; border-radius:12px; font-size:17px; background:var(--card); border:1px solid var(--line); color:var(--ink-2); transition:background-color .22s ease,color .22s ease,transform .22s var(--ease),border-color .22s ease; } .share a:hover{ background:var(--rose); border-color:var(--rose); color:#fff; transform:translateY(-3px) } /* ═══════════════ 31 · HAKKIMIZDA ═══════════════ */ .story{ background:var(--cream) } .story__grid{ display:grid; gap:26px } @media (min-width:992px){ .story__grid{ grid-template-columns:1fr 1.05fr; gap:44px; align-items:center } } @media (min-width:1400px){ .story__grid{ gap:60px } } .story__media{ position:relative } .story__media img{ width:100%; aspect-ratio:4/3; object-fit:cover; border-radius:var(--radius-lg); box-shadow:var(--shadow); } .story__badge{ position:absolute; right:-6px; bottom:-14px; z-index:2; display:flex; align-items:center; gap:10px; padding:14px 18px; border-radius:var(--radius); background:var(--card); border:1px solid var(--line); box-shadow:var(--shadow); } .story__badge strong{ font-family:var(--font-display); font-size:32px; color:var(--rose-dark); line-height:1 } .story__badge span{ font-size:11.5px; line-height:1.35; color:var(--muted) } .story__body p{ font-size:14.5px; line-height:1.8; margin:0 0 14px } .story__body .ticks{ margin-top:18px } @media (min-width:1200px){ .story__body p{ font-size:16px } } .values{ background:var(--cream-2) } .valgrid{ display:grid; grid-template-columns:repeat(2,1fr); gap:12px } @media (min-width:768px){ .valgrid{ grid-template-columns:repeat(3,1fr); gap:18px } } .valgrid li{ background:var(--card); border:1px solid var(--line); border-radius:var(--radius); padding:18px 16px; transition:transform .3s var(--ease),box-shadow .3s ease,border-color .3s ease; } .valgrid li:hover{ transform:translateY(-4px); box-shadow:var(--shadow-sm); border-color:var(--copper-soft) } .valgrid__ico{ display:flex; align-items:center; justify-content:center; width:44px; height:44px; border-radius:13px; margin-bottom:12px; background:var(--cream-2); color:var(--copper); font-size:20px; } .valgrid h3{ font-family:var(--font-sans); font-size:13.5px; font-weight:700; margin:0 0 5px; letter-spacing:.01em } .valgrid p{ margin:0; font-size:12.5px; line-height:1.6; color:var(--muted) } @media (min-width:1200px){ .valgrid li{ padding:24px 22px } .valgrid h3{ font-size:15px } .valgrid p{ font-size:13.5px } } .certs{ display:grid; grid-template-columns:repeat(2,1fr); gap:10px; margin-top:26px } @media (min-width:768px){ .certs{ grid-template-columns:repeat(4,1fr); gap:14px } } .certs li{ display:flex; align-items:flex-start; gap:11px; background:var(--card); border:1px solid var(--line); border-radius:var(--radius); padding:15px 14px; } .certs .ico{ color:var(--copper); font-size:19px; flex:none; margin-top:.1em } .certs strong{ display:block; font-size:12.5px; color:var(--ink); line-height:1.35 } .certs span{ display:block; font-size:11.5px; color:var(--muted); margin-top:3px; line-height:1.45 } /* ═══════════════ 32 · FİYATLAR SAYFASI ═══════════════ */ .pricepage{ background:var(--cream) } .pgroup{ margin-bottom:38px; scroll-margin-top:calc(var(--header-h) + 74px) } .pgroup__head{ display:flex; align-items:center; justify-content:space-between; gap:14px; flex-wrap:wrap; margin-bottom:14px; } .pgroup__head h2{ display:flex; align-items:center; gap:10px; margin:0; font-family:var(--font-display); font-size:23px; line-height:1.25; } .pgroup__head h2 .ico{ color:var(--copper); font-size:22px } .pgroup__link{ display:inline-flex; align-items:center; gap:6px; min-height:38px; font-size:12.5px; font-weight:600; color:var(--copper-ink); } .pgroup__link .ico{ transition:transform .28s var(--ease) } .pgroup__link:hover .ico{ transform:translateX(4px) } .dtable .muted{ color:var(--muted-2) } @media (min-width:1200px){ .pgroup__head h2{ font-size:28px } .pgroup{ margin-bottom:48px } } .packages{ display:grid; gap:16px } @media (min-width:768px){ .packages{ grid-template-columns:repeat(3,1fr); gap:20px } } .package{ position:relative; display:flex; flex-direction:column; background:var(--card); border:1px solid var(--line); border-radius:var(--radius-lg); padding:24px 20px 22px; transition:transform .3s var(--ease),box-shadow .3s ease,border-color .3s ease; } .package:hover{ transform:translateY(-5px); box-shadow:var(--shadow); border-color:var(--copper-soft) } .package--featured{ border-color:var(--rose); box-shadow:var(--shadow) } .package__tag{ position:absolute; top:-11px; left:20px; padding:5px 12px; border-radius:99px; background:var(--rose); color:#fff; font-size:9.5px; font-weight:700; letter-spacing:.09em; text-transform:uppercase; } .package__name{ font-family:var(--font-display); font-size:22px; margin:0 0 6px } .package__desc{ font-size:13px; line-height:1.6; color:var(--muted); margin:0 0 14px } .package__price{ display:flex; align-items:baseline; gap:10px; margin:0 0 16px } .package__price span{ font-family:var(--font-display); font-size:30px; font-weight:700; color:var(--rose-dark); line-height:1 } .package__price s{ font-size:14px; color:var(--muted-2) } .package__items{ display:grid; gap:9px; margin:0 0 20px } .package__items li{ display:flex; gap:9px; align-items:flex-start; font-size:13px; line-height:1.55; color:var(--ink-2) } .package__items .ico{ color:var(--rose); margin-top:.34em; flex:none } .package .btn-brand{ margin-top:auto } @media (min-width:1200px){ .package{ padding:28px 24px 26px } .package__name{ font-size:24px } } /* ═══════════════ 33 · İLETİŞİM EKLERİ ═══════════════ */ .hourscard{ margin-top:12px; background:var(--card); border:1px solid var(--line); border-radius:var(--radius); padding:18px; } .hourscard h3{ display:flex; align-items:center; gap:8px; margin:0 0 12px; padding-bottom:11px; border-bottom:1px solid var(--line); font-family:var(--font-sans); font-size:12.5px; font-weight:700; letter-spacing:.09em; text-transform:uppercase; color:var(--copper-ink); } .hours{ width:100%; border-collapse:collapse } .hours th,.hours td{ padding:8px 0; font-size:13.5px; text-align:left; border-bottom:1px dashed var(--line) } .hours th{ font-weight:500; color:var(--ink-2) } .hours td{ text-align:right; color:var(--ink); font-weight:600 } .hours tr:last-child th,.hours tr:last-child td{ border-bottom:0 } .hours .is-closed td{ color:var(--rose-dark) } .hourscard__note{ margin:12px 0 0; font-size:11.5px; line-height:1.6; color:var(--muted) } .reach{ margin-top:34px } .reach__grid{ display:grid; gap:14px } @media (min-width:768px){ .reach__grid{ grid-template-columns:repeat(3,1fr); gap:18px } } .reach__grid li{ background:var(--card); border:1px solid var(--line); border-radius:var(--radius); padding:20px 18px; } .reach__ico{ display:flex; align-items:center; justify-content:center; width:44px; height:44px; border-radius:13px; margin-bottom:12px; background:var(--cream-2); color:var(--copper); font-size:20px; } .reach__grid h3{ font-family:var(--font-sans); font-size:14px; font-weight:700; margin:0 0 6px } .reach__grid p{ margin:0; font-size:13px; line-height:1.65; color:var(--muted) } /* ═══════════════ 34 · HUKUKİ SAYFALAR ═══════════════ */ .legal > h2{ font-family:var(--font-display); font-size:21px !important; margin-top:34px !important } .legal > h2:first-child{ margin-top:0 !important } .legal p{ font-size:14.5px; line-height:1.85 } .legal .bullets li{ line-height:1.75 } @media (min-width:1200px){ .legal > h2{ font-size:25px !important } } /* ═══════════════ 35 · 404 ═══════════════ */ .err404{ min-height:60vh; display:flex; align-items:center; text-align:center; padding-block:56px 64px; background: radial-gradient(80% 60% at 50% 12%,rgba(255,250,246,.9) 0%,rgba(255,250,246,0) 60%), linear-gradient(165deg,#F8EDE4 0%,#F1E1D3 55%,#EAD6C5 100%); } .err404__code{ font-family:var(--font-display); font-size:clamp(72px,18vw,140px); font-weight:700; line-height:1; margin:0 0 14px; color:var(--copper); opacity:.26; letter-spacing:-.02em; } .err404__title{ font-family:var(--font-display); font-size:clamp(24px,5.4vw,34px); margin:0 0 12px } .err404__lead{ font-size:14.5px; line-height:1.75; color:var(--ink-2); margin:0 auto 26px; max-width:52ch } .err404__cta{ display:grid; gap:10px; justify-content:center; margin-bottom:40px } .err404__sub{ font-family:var(--font-sans); font-size:12px; font-weight:700; letter-spacing:.13em; text-transform:uppercase; color:var(--copper-ink); margin:0 0 16px; } .err404__links{ display:grid; grid-template-columns:repeat(2,1fr); gap:10px; max-width:680px; margin-inline:auto } .err404__links a{ display:flex; align-items:center; gap:10px; min-height:52px; padding:13px 16px; border-radius:var(--radius); background:var(--card); border:1px solid var(--line); font-size:13px; font-weight:600; color:var(--ink-2); text-align:left; transition:transform .28s var(--ease),box-shadow .28s ease,border-color .28s ease; } .err404__links a:hover{ transform:translateY(-3px); box-shadow:var(--shadow-sm); border-color:var(--copper-soft); color:var(--rose-dark) } .err404__links .ico{ color:var(--copper); font-size:17px; flex:none } @media (min-width:576px){ .err404__cta{ grid-template-columns:auto auto } } @media (min-width:768px){ .err404__links{ grid-template-columns:repeat(3,1fr) } } .section-more{ text-align:center; margin:24px 0 0 } .section-more .btn-outline .ico{ transition:transform .28s var(--ease) } .section-more .btn-outline:hover .ico{ transform:translateX(4px) } /* ══════════════════════ 36 · DOKUNMA HEDEFİ TABANI ══════════════════════ WCAG 2.2 "Target Size (Minimum)" ölçütü dokunmatik cihazlarda en az 44×44px hedef ister. Masaüstünde imleç hassas olduğu için küçük butonlar sorun değildir; bu yüzden kural yalnızca kaba işaretçili (parmak) cihazlarda uygulanır ve tasarımın masaüstü oranlarını bozmaz. Metin içi satır içi bağlantılar kapsam dışıdır (WCAG istisnası). */ @media (pointer: coarse) { /* .price .btn-brand ve benzeri bileşen kuralları min-height:42px veriyor; bu yüzden burada aynı özgüllükte seçicilerle üzerine yazılır. */ .btn-brand--sm, .btn-outline--sm, .btn-brand--block, .price .btn-brand, .package .btn-brand, .pgroup__link, .mapwrap__btn, .infocard__link, .chip { min-height: 44px; } /* İkon butonları kare kalmalı — yalnızca yükseklik artarsa oval görünür */ .slider-nav__btn, .slider-arrow { width: 44px; height: 44px; } /* Sadece metinden ibaret küçük bağlantılarda dikey nefes payı, satır yüksekliğini bozmadan tıklama alanını büyütür */ .infocard__link, .pgroup__link { display: inline-flex; align-items: center; padding-block: 10px; } } /* ══════════════════════ METİN İÇİ BAĞLANTI AYIRT EDİLEBİLİRLİĞİ ══════════════════════ WCAG 1.4.1 "Use of Color": bir bağlantı yalnızca renkle ayırt ediliyorsa, renk körü kullanıcılar onu düz metinden ayıramaz. Buton, menü ve kart gibi kendi görsel çerçevesi olan bağlantılar bu kuralın dışındadır; yalnızca paragraf içinde geçen bağlantılar altı çizili olur. `.article__body` zaten kapsanıyordu; aynı kural diğer içerik alanlarına da genişletilir. */ /* Metin akışı içindeki her bağlantı — kapsayıcıyı tek tek saymak yerine "içerik gövdesi" alanları hedeflenir. Butonlar, çipler, kartlar ve gezinme öğeleri kendi görsel çerçevelerine sahip olduğu için hariç tutulur. */ main p > a, main li > a, main dd > a, main td > a, main blockquote a { text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; } /* ── Altı çizgi HARİÇ tutulanlar ──────────────────────────────────────── Kart bağlantısı çoğu temada
  • ya da

    içinde doğrudan yer alır; bu yüzden yukarıdaki kural kartın TAMAMINI (başlık, açıklama, hatta telefon numarası) altı çizili yapıyordu. Sınıf adı saymak kırılgan — yeni bir kart eklendiğinde gözden kaçıyor. Doğru ölçüt biçimsel değil YAPISAL: Bir bağlantı görsel, başlık ya da paragraf taşıyorsa o bir karttır; metin akışı içinde geçen bir bağlantı değildir. :has() bunu tam olarak ifade eder ve Chrome 105+, Safari 15.4+, Firefox 121+ sürümlerinde desteklenir. Desteklemeyen eski tarayıcıda altta yer alan sınıf tabanlı liste devreye girer; en kötü ihtimalle fazladan bir alt çizgi görünür, düzen bozulmaz. */ main a:has(img), main a:has(h1), main a:has(h2), main a:has(h3), main a:has(h4), main a:has(h5), main a:has(h6), main a:has(p), main a:has(svg), main a:has(> span > span) { text-decoration: none; } /* :has() desteklemeyen tarayıcılar için sınıf tabanlı yedek liste. */ main p > a.btn-brand, main p > a.btn-outline, main p > a.btn-wa, main li > a.btn-brand, main li > a.btn-outline, main li > a.btn-wa, main li > a.chip, main a[class*="__link"], main a[class*="__cta"], main a[class*="card"], main a[class$="btn"], main a[class*="btn-"], main a[class*="chip"], main .toc__list a, main .chipnav a, main .infocards a, main .socials a, main .pager a, main .breadcrumb-nav a, main .areas__list a, main .quickrail__item, main .mobar__btn, main .svc a, main .pcard a, main .price a, main .package a, main .member a, main .sidelinks a, main .footer__areas a { text-decoration: none; } /* Kart içindeki metinler hiçbir koşulda altı çizili olmaz — bağlantı sarmalayıcısı hangi seviyede olursa olsun. */ main a h1, main a h2, main a h3, main a h4, main a h5, main a h6, main a p, main a span, main a strong, main a time, main a small { text-decoration: none; } /* ══════════════════════ YAN SÜTUN KUTULARI ══════════════════════ Blog yazısı ve hizmet sayfasındaki sol sütunda içindekilerin altında yer alan bilgi kutuları: yazar kimliği, ilgili hizmetler, diğer yazılar. Amaç sütunu doldurmak değil — okuyucuyu dönüşüm sayfasına taşıyan iç link kümesi kurmak. */ .sidecard{ background:var(--card); border:1px solid var(--line); border-radius:14px; padding:16px 16px 14px; margin:0 0 14px; } .sidecard__label{ margin:0 0 12px; font-size:10.5px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--copper-ink); } .sidecard__who{ display:flex; align-items:center; gap:12px } .sidecard__who img{ width:56px; height:56px; border-radius:50%; object-fit:cover; flex:none } .sidecard__name{ margin:0; font-family:var(--font-display); font-size:16px; color:var(--ink) } .sidecard__role{ margin:2px 0 0; font-size:12px; color:var(--rose-dark); font-weight:600 } .sidecard__exp{ margin:3px 0 0; font-size:11.5px; color:var(--muted) } .sidelinks{ list-style:none; margin:0; padding:0; display:grid; gap:2px } .sidelinks a{ display:flex; align-items:center; gap:9px; min-height:44px; padding:8px 10px; border-radius:9px; font-size:13px; color:var(--ink-2); text-decoration:none; transition:background-color .2s ease,color .2s ease; } .sidelinks a:hover{ background:var(--cream-2); color:var(--rose-dark) } .sidelinks a span{ flex:1; min-width:0 } .sidelinks a b{ font-size:11.5px; color:var(--copper-ink); font-weight:700; white-space:nowrap } .sidelinks .ico{ color:var(--copper); flex:none } .sidelinks--posts a{ flex-direction:column; align-items:flex-start; gap:3px; line-height:1.45 } .sidelinks--posts small{ font-size:11px; color:var(--muted-2) } .toc__tel{ display:flex; align-items:center; justify-content:center; gap:7px; min-height:44px; margin-top:8px; font-size:13px; font-weight:600; color:var(--rose-dark); text-decoration:none; } .toc__tel:hover{ color:var(--rose) } /* Fiyat ızgarası ile kampanya paketleri aynı konunun iki parçasıdır; aralarındaki iki bölüm boşluğu tek boşluğa indirilir. */ .pricing + .section--tight{ padding-top:0 } /* Açılır menüde hub sayfası bağlantısı — alt öğelerden görsel olarak ayrılır */ .dropmenu__all{ border-bottom:1px solid var(--line); margin-bottom:4px; padding-bottom:4px } .dropmenu__all a{ font-weight:700; color:var(--rose-dark) } /* Bölge listesi altındaki ulaşım sayfası bağlantısı */ .areas__more{ margin:16px 0 0; font-size:13px } .areas__more a{ display:inline-flex; align-items:center; gap:7px; min-height:44px; font-weight:600; color:var(--rose-dark); text-decoration:none } .areas__more a:hover{ color:var(--rose) } .areas__more .ico{ transition:transform .28s var(--ease) } .areas__more a:hover .ico{ transform:translateX(4px) } /* ═══════════════ FOOTER — ÇALIŞMA SAATİ VE HİZMET BÖLGELERİ ═══════════════ */ .footer__hours span{ line-height:1.6 } /* Bölge listesi sütun ızgarasının altında tam genişlikte bir şerittir; çip görünümü, uzun listede satır sonu sorunları olmadan sarmalanır. */ .footer__areas{ margin-top:26px; padding-top:22px; border-top:1px solid rgba(244,236,229,.14); } .footer__areas ul{ display:flex; flex-wrap:wrap; gap:8px; margin:12px 0 0; padding:0; list-style:none; } .footer__areas a{ display:inline-flex; align-items:center; min-height:34px; padding:6px 13px; border-radius:99px; border:1px solid rgba(244,236,229,.18); font-size:12.5px; line-height:1; text-decoration:none; color:rgba(244,236,229,.78); transition:border-color .22s ease,color .22s ease,background-color .22s ease; } .footer__areas a:hover, .footer__areas a:focus-visible{ color:#fff; border-color:var(--copper-soft,rgba(196,140,124,.6)); background:rgba(244,236,229,.07); } @media (min-width:768px){ .footer__areas a{ font-size:13px; min-height:36px } } /* ═══════════════ HİZMET DİZİNİ — KATEGORİ VİTRİNİ ═══════════════ /hizmetler/ sayfası önceden H1'den sonra doğrudan kart ızgaralarına geçiyordu; ekranın büyük kısmı boş kalıyordu. Vitrin, altı kategoriyi görsel + tanım + hizmet sayısı + başlangıç fiyatıyla tek ekranda veriyor. */ .cathub__grid{ display:grid; grid-template-columns:1fr; gap:14px; margin:22px 0 0; padding:0; list-style:none; } @media (min-width:576px){ .cathub__grid{ grid-template-columns:repeat(2,1fr); gap:16px } } @media (min-width:992px){ .cathub__grid{ grid-template-columns:repeat(3,1fr); gap:20px } } .cathub__item{ display:flex } .cathub__card{ position:relative; display:flex; flex-direction:column; width:100%; background:var(--card); border:1px solid var(--line); border-radius:var(--radius-lg); overflow:hidden; box-shadow:var(--shadow-sm); text-decoration:none; color:inherit; transition:transform .3s var(--ease),box-shadow .3s ease,border-color .3s ease; } .cathub__card:hover{ transform:translateY(-5px); box-shadow:var(--shadow); border-color:var(--copper-soft) } .cathub__card:focus-visible{ outline:2px solid var(--copper); outline-offset:3px } .cathub__media{ display:block; aspect-ratio:3/2; background:var(--cream-3); overflow:hidden } .cathub__media img{ width:100%; height:100%; object-fit:cover; transition:transform .6s var(--ease) } .cathub__card:hover .cathub__media img{ transform:scale(1.05) } /* Gövde flex sütun: farklı uzunluktaki tanımlarda "İncele" satırı hep altta hizalı. */ .cathub__body{ display:flex; flex-direction:column; flex:1 1 auto; padding:15px 16px 16px } .cathub__head{ display:flex; align-items:center; gap:9px; margin-bottom:7px } .cathub__head .ico{ color:var(--copper); font-size:19px; flex:none } .cathub__name{ font-family:var(--font-display); font-size:17px; line-height:1.25; margin:0 } .cathub__desc{ display:block; font-size:13px; line-height:1.6; color:var(--muted); margin:0 0 12px } .cathub__meta{ display:flex; flex-wrap:wrap; gap:7px; margin-top:auto; margin-bottom:12px } .cathub__count,.cathub__price{ display:inline-flex; align-items:center; padding:5px 10px; border-radius:99px; font-size:11.5px; font-weight:600; line-height:1; white-space:nowrap; } .cathub__count{ background:var(--cream-3); color:var(--ink-soft,var(--muted)) } .cathub__price{ background:var(--copper-wash,rgba(196,140,124,.12)); color:var(--copper-ink) } .cathub__go{ display:inline-flex; align-items:center; gap:6px; font-size:13px; font-weight:600; color:var(--copper-ink); } .cathub__card:hover .cathub__go{ gap:9px } .cathub__go .ico{ transition:transform .25s var(--ease) } @media (min-width:1200px){ .cathub__body{ padding:18px 18px 19px } .cathub__name{ font-size:18.5px } .cathub__desc{ font-size:13.5px } } /* Hedef → uygulama tablosu */ .goaltable{ width:100%; border-collapse:collapse; font-size:13.5px } .goaltable th,.goaltable td{ padding:11px 13px; text-align:left; vertical-align:top; border-bottom:1px solid var(--line); } .goaltable thead th{ font-size:11.5px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--copper-ink); background:var(--cream-2); white-space:nowrap; } .goaltable tbody tr:hover{ background:var(--cream-2) } .goaltable td:nth-child(3){ white-space:nowrap; color:var(--muted) } .goaltable a{ color:var(--copper-ink); font-weight:600 } @media (min-width:768px){ .goaltable{ font-size:14px } .goaltable th,.goaltable td{ padding:13px 16px } }