/* FB Art Life Tema · v1.0.0 */ /* ── FONTLAR ── */ @font-face { font-family: "Albert Sans"; font-style: normal; font-weight: 100 900; font-display: swap; src: url("../fonts/albert-sans-latin-ext.woff2") format("woff2"); 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: "Albert Sans"; font-style: normal; font-weight: 100 900; font-display: swap; src: url("../fonts/albert-sans-latin.woff2") format("woff2"); 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: "DM Sans"; font-style: normal; font-weight: 100 1000; font-display: swap; src: url("../fonts/dm-sans-latin-ext.woff2") format("woff2"); 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: "DM Sans"; font-style: normal; font-weight: 100 1000; font-display: swap; src: url("../fonts/dm-sans-latin.woff2") format("woff2"); 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; } /* ── DEĞİŞKENLER ── */ :root { --fb-altin: #c5a059; --fb-altin-acik: #e6c88b; --fb-koyu: #242424; --fb-siyah: #000; --fb-gri-koyu: #363636; --fb-beyaz: #fff; --fb-kenar: rgba(255, 255, 255, .24); --fb-egri: cubic-bezier(.1, .75, .25, 1); --fb-egri-2: cubic-bezier(.645, .045, .355, 1); --fb-gecis: all .25s var(--fb-egri-2); --fb-font-baslik: "Albert Sans", system-ui, sans-serif; --fb-font-metin: "DM Sans", system-ui, sans-serif; } /* ── TABAN ── */ *, ::before, ::after { box-sizing: border-box; } body { margin: 0; padding: 0; font-family: var(--fb-font-metin); font-size: 16px; font-weight: 400; line-height: 28px; letter-spacing: 0; color: #b0b0b0; background: var(--fb-beyaz); overflow-x: hidden; overflow-wrap: break-word; -webkit-font-smoothing: antialiased; font-optical-sizing: auto; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; } h1, h2, h3, h4, h5, h6 { margin: 0 0 .5rem; font-family: var(--fb-font-baslik); font-weight: 600; line-height: 1.2; color: var(--fb-beyaz); } h1, h2 { font-size: 55px; } h3 { font-size: 42px; } h4 { font-size: 27px; } h5 { font-size: 20px; } h6 { font-size: 16px; } p { margin: 0 0 1rem; } ul { margin: 0 0 1rem; padding-left: 2rem; } ul ul { margin-bottom: 0; } b, strong { font-weight: bolder; } a, span { display: inline-block; color: inherit; font-size: inherit; font-family: inherit; font-weight: inherit; text-transform: inherit; text-decoration: none; transition: inherit; } a:hover, a:focus { color: inherit; text-decoration: none; outline: none; } a:focus-visible, button:focus-visible { outline: 2px solid var(--fb-altin); outline-offset: 3px; } img { max-width: 100%; vertical-align: middle; } :where(img[height]) { height: auto; } svg { vertical-align: middle; } label { display: inline-block; } button { margin: 0; padding: 0; border: 0; border-radius: 0; background: transparent; outline: none; font: inherit; color: inherit; text-transform: none; cursor: pointer; } input, textarea { margin: 0; font-family: inherit; font-size: inherit; line-height: inherit; } textarea { resize: vertical; } input::placeholder, textarea::placeholder { font: inherit; color: inherit; } input:focus::placeholder, textarea:focus::placeholder { opacity: 0; } ::selection { background: #3065d0; color: #fff; text-shadow: none; } [hidden] { display: none !important; } .screen-reader-text { position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } .screen-reader-text:focus { top: 5px; left: 5px; z-index: 100000; display: block; width: auto; height: auto; padding: 15px 23px 14px; clip: auto; font-size: 1em; line-height: normal; color: #444; background: #ddd; } .fbart-icerige-gec:focus { position: fixed !important; top: 16px; left: 16px; padding: 14px 22px; font-size: 15px; font-weight: 500; color: var(--fb-beyaz); background: var(--fb-koyu); } [tabindex="-1"]:focus { outline: none; } .fbart-ikon { display: inline-block; width: 1em; height: 1em; flex: 0 0 auto; } .swiper-notification { position: absolute; top: 0; left: 0; z-index: -1000; opacity: 0; pointer-events: none; } @media (min-width: 1200px) { ::-webkit-scrollbar { width: 7px; background: #000; } ::-webkit-scrollbar-track { background: transparent; } ::-webkit-scrollbar-thumb { background: var(--fb-altin); border-radius: 0; } } /* ── YARDIMCILAR ── */ .fbart-sayfa { margin-top: -1px; overflow: hidden; overflow: clip; } .fbart-kap { width: 100%; margin: 0 auto; padding: 0 12px; } @media (min-width: 576px) { .fbart-kap { max-width: 540px; } } @media (min-width: 768px) { .fbart-kap { max-width: 720px; } } @media (min-width: 992px) { .fbart-kap { max-width: 960px; } } @media (min-width: 1200px) { .fbart-kap { max-width: 1140px; } } @media (min-width: 1400px) { .fbart-kap { max-width: 1320px; } } @media (min-width: 1600px) { .fbart-kap { max-width: 1344px; } } .fbart-kirp { overflow: hidden; } .fbart-kapla img { width: 100%; height: 100% !important; object-fit: cover; } .fbart-arka { background-size: cover; background-position: center; background-repeat: no-repeat; } .fbart-liste-sade { margin: 0; padding: 0; list-style: none; } .fbart-satir-1, .fbart-satir-2, .fbart-satir-3 { overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; } .fbart-satir-1 { -webkit-line-clamp: 1; line-clamp: 1; } .fbart-satir-2 { -webkit-line-clamp: 2; line-clamp: 2; } .fbart-satir-3 { -webkit-line-clamp: 3; line-clamp: 3; } /* ── YAZI TİPLERİ ── */ .fbart-yazi-baslik { margin-bottom: 0; font-family: var(--fb-font-baslik); font-weight: 600; line-height: 1.076; letter-spacing: -.03em; color: var(--fb-koyu); } .fbart-yazi-baslik-2 { margin-bottom: 0; font-family: var(--fb-font-baslik); font-weight: 600; line-height: 1.2; color: var(--fb-siyah); } .fbart-yazi-govde { margin-bottom: 0; font-family: var(--fb-font-metin); font-size: 18px; font-weight: 400; line-height: 1.555; color: var(--fb-gri-koyu); } .fbart-bolum-baslik { margin-bottom: 0; font-family: var(--fb-font-baslik); font-size: 52px; font-weight: 600; line-height: 1.076; letter-spacing: -.03em; color: var(--fb-koyu); } @media (min-width: 992px) and (max-width: 1199px) { .fbart-bolum-baslik { font-size: 50px; } } @media (min-width: 768px) and (max-width: 991px) { .fbart-bolum-baslik { font-size: 45px; } } @media (min-width: 576px) and (max-width: 767px) { .fbart-bolum-baslik { font-size: 40px; } } @media (max-width: 575px) { .fbart-bolum-baslik { font-size: 35px; } } /* ── ETİKET (BÖLÜM ÜST BAŞLIĞI) ── */ .fbart-etiket { position: relative; display: flex; width: 100%; margin: 0 0 60px; padding-bottom: 13px; overflow: hidden; border-bottom: 1px solid #d9d9d9; font-family: var(--fb-font-baslik); font-size: 16px; font-weight: 600; line-height: 20px; text-transform: uppercase; color: var(--fb-koyu); } .fbart-etiket-yazi { flex: 0 0 auto; white-space: nowrap; } .fbart-etiket-ikon { position: absolute; right: 0; bottom: 0; } /* ── BUTON ── */ .fbart-btn { position: relative; z-index: 1; margin-left: 16px; padding: 11px 31px; border: 1px solid var(--fb-koyu); background: var(--fb-beyaz); font-family: var(--fb-font-baslik); font-size: 18px; font-weight: 500; line-height: 1.5; color: var(--fb-koyu); transition: .8s var(--fb-egri); } .fbart-btn-cizgi-1, .fbart-btn-cizgi-2 { position: absolute; top: 0; left: 0; z-index: -2; width: 100%; height: 100%; } .fbart-btn-cizgi-1::after, .fbart-btn-cizgi-1::before, .fbart-btn-cizgi-2::after, .fbart-btn-cizgi-2::before { content: ""; position: absolute; z-index: 1; width: 16px; height: 16px; border-style: solid; border-color: var(--fb-altin); transition: .5s ease-in-out; } .fbart-btn-cizgi-1::after { top: -16px; left: -16px; border-width: 0 1px 1px 0; transform-origin: right bottom; } .fbart-btn-cizgi-1::before { right: -16px; bottom: -16px; border-width: 1px 0 0 1px; transform-origin: left top; } .fbart-btn-cizgi-2::after { top: -16px; right: -16px; border-width: 0 0 1px 1px; transform-origin: left bottom; } .fbart-btn-cizgi-2::before { bottom: -16px; left: -16px; border-width: 1px 1px 0 0; transform-origin: right top; } .fbart-btn-kutu { position: absolute; z-index: -1; width: 50%; height: 50%; background: var(--fb-altin); transform: scale(0); transition: .4s var(--fb-egri); } .fbart-btn-kutu.k1 { top: 0; left: 0; transform-origin: left top; } .fbart-btn-kutu.k2 { top: 0; right: 0; transform-origin: right top; } .fbart-btn-kutu.k3 { right: 0; bottom: 0; transform-origin: right bottom; } .fbart-btn-kutu.k4 { bottom: 0; left: 0; transform-origin: left bottom; } .fbart-btn-yazi { position: relative; z-index: 1; margin-bottom: -3px; overflow: hidden; line-height: 1; } .fbart-btn-yazi::before { content: attr(data-on); position: relative; top: 0; left: 0; display: block; color: var(--fb-koyu); opacity: 1; transform: translateY(0); transition: .4s var(--fb-egri-2); } .fbart-btn-yazi::after { content: attr(data-arka); position: absolute; top: 0; left: 0; display: block; width: 100%; color: var(--fb-beyaz); opacity: 0; transform: translateY(100%); transition: .4s var(--fb-egri-2); } .fbart-btn:hover { border-color: var(--fb-altin); } .fbart-btn:hover .fbart-btn-kutu { transform: scale(1); } .fbart-btn:hover .fbart-btn-yazi::before { opacity: 0; transform: translateY(-100%); } .fbart-btn:hover .fbart-btn-yazi::after { opacity: 1; transform: translateY(0); } /* ── PERDE · ÖN YÜKLEME · YUKARI ── */ .fbart-perde { position: fixed; top: 0; left: 0; z-index: 4; width: 100%; height: 100%; background: rgba(0, 0, 0, .8); opacity: 0; transform: scaleX(0); transform-origin: right center; transition: opacity .5s; } .fbart-perde.is-acik { opacity: 1; transform: scaleX(1); } .fbart-onyukleme { position: fixed; top: 0; left: 0; z-index: 99999999; display: flex; align-items: center; justify-content: center; width: 100%; height: 100vh; overflow: hidden; background: var(--fb-beyaz); transition: all 1s cubic-bezier(.55, .085, 0, .99); animation: fbart-onyukleme-kac .4s 4s forwards; } @keyframes fbart-onyukleme-kac { to { opacity: 0; visibility: hidden; } } .fbart-onyukleme::after { content: ""; position: absolute; top: 50%; left: 50%; width: 200px; height: 110px; border: 2px solid var(--fb-altin); transform: translate(-50%, -50%); transition: all 1s cubic-bezier(.55, .085, 0, .99); } .fbart-onyukleme-ic { width: 200px; overflow: hidden; transition: all 1s cubic-bezier(.55, .085, 0, .99); } .fbart-onyukleme-logo { display: flex; gap: 90px; width: max-content; animation: fbart-kay 6s linear infinite; } .fbart-onyukleme-logo img { flex: 0 0 auto; } @media (prefers-reduced-motion: reduce) { .fbart-onyukleme-logo { animation: none; } } .fbart-onyukleme.is-bitti::after, .fbart-onyukleme.is-bitti .fbart-onyukleme-ic { width: 0; } .fbart-yukari { position: fixed; right: 1.5%; bottom: -12.5%; z-index: 4; width: 40px; height: 40px; padding: 0; border: 1px solid #000; background: #fff; color: inherit; font: inherit; text-align: start; visibility: hidden; transform: rotate(45deg); transition: .3s; cursor: pointer; } .fbart-yukari::after { content: ""; position: absolute; top: 0; left: 0; z-index: -1; width: 100%; height: 100%; border: 1px solid #000; background: transparent; opacity: 0; transition: .3s; } .fbart-yukari-yazi { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; font-size: 14px; font-weight: 500; transform: rotate(-45deg); transition: .3s; } .fbart-yukari.is-acik { bottom: 2.5%; visibility: visible; } .fbart-yukari.is-acik:hover { bottom: 3.5%; } .fbart-yukari.is-acik:hover .fbart-yukari-yazi { transform: rotate(-45deg) translateY(5px); } .fbart-yukari.is-acik:hover::after { top: 5px; left: 5px; opacity: .5; } @media (max-width: 767px) { .fbart-yukari { right: 3%; } } /* ── İMLEÇ ── */ .fbart-imlec { position: fixed; top: 0; left: 0; z-index: 99; contain: layout style size; pointer-events: none; will-change: transform; transition: opacity .3s, color .4s; } .fbart-imlec::before { content: ""; position: absolute; top: -30px; left: -30px; display: block; width: 60px; height: 60px; border-radius: 50%; background: var(--fb-altin); transform: scale(0); transition: transform .3s ease-in-out, opacity .1s; } .fbart-imlec-yazi { position: absolute; top: -15px; left: -15px; display: flex; align-items: center; justify-content: center; width: 30px; height: 30px; font-size: 16px; line-height: 20px; letter-spacing: -.01em; text-align: center; color: #fff; opacity: 0; transform: scale(0) rotate(10deg); transition: opacity .4s, transform .3s; } .fbart-imlec.is-gorunur::before { transform: scale(.2); } .fbart-imlec.is-gorunur.is-basili::before { transform: scale(.23); transition-duration: .2s; } .fbart-imlec.is-isaret::before { transform: scale(0); } .fbart-imlec.is-opak::before { transform: scale(1.5); } .fbart-imlec.is-opak.is-basili::before { transform: scale(1.2); } .fbart-imlec.is-yazili { mix-blend-mode: normal; } .fbart-imlec.is-yazili::before { background: #000; opacity: .8; transform: scale(1.5); } .fbart-imlec.is-yazili.is-basili::before { transform: scale(1.6); transition-duration: .2s; } .fbart-imlec.is-yazili .fbart-imlec-yazi { opacity: 1; transform: scale(1); } @supports (mix-blend-mode: exclusion) { .fbart-imlec.is-opak { mix-blend-mode: exclusion; } .fbart-imlec.is-opak::before { background: #fff; } } @media (hover: none), (pointer: coarse) { .fbart-imlec { display: none; } } /* ── ÜST (HEADER) ── */ .fbart-ust { position: fixed; top: 35px; right: 0; left: 0; z-index: 8; width: 100%; transition: 400ms ease-in-out; } .fbart-ust.is-yapiskan { transform: translateY(-190%); } .fbart-ust.is-yapiskan.is-goster { top: 0; background: var(--fb-beyaz); box-shadow: 0 4px 20px rgba(0, 0, 0, .06); transform: translateY(0); } .fbart-ust-satir { display: flex; align-items: center; justify-content: space-between; gap: 30px; padding: 0 45px; } .fbart-ust-logo img { width: auto; height: 64px; } .fbart-ust-nav { display: none; } .fbart-ust-nav .fbart-menu { display: inline-flex; flex-flow: nowrap; gap: 50px; margin: 0; padding: 0; list-style: none; } .fbart-ust-nav .fbart-menu-oge { position: relative; } .fbart-ust-nav .fbart-menu-oge > a { position: relative; z-index: 1; display: inline-block; padding: 21px 0; font-family: var(--fb-font-baslik); font-size: 18px; font-weight: 500; line-height: 1; text-transform: uppercase; color: var(--fb-siyah); transition: all .4s var(--fb-egri); } .fbart-ust-nav .fbart-menu-oge > a::after, .fbart-ust-nav .fbart-menu-oge > a::before { content: "*"; position: absolute; font-size: 23px; line-height: 1; opacity: 0; transform: translateX(-50%); transition: all .4s var(--fb-egri); } .fbart-ust-nav .fbart-menu-oge > a::after { top: 0; left: 0; } .fbart-ust-nav .fbart-menu-oge > a::before { bottom: -8px; left: 100%; } .fbart-ust-nav .fbart-menu-oge:hover > a, .fbart-ust-nav .fbart-menu-oge.fbart-menu-aktif > a { color: var(--fb-altin); } .fbart-ust-nav .fbart-menu-oge:hover > a::after, .fbart-ust-nav .fbart-menu-oge:hover > a::before { left: 50%; opacity: 1; } .fbart-ust-nav .fbart-menu-alt { position: absolute; top: 100%; left: 0; z-index: 100; display: block; color: #212529; min-width: 200px; width: max-content; max-width: 400px; height: auto; margin: 0; padding: 5px 0; list-style: none; text-align: left; background: var(--fb-beyaz); border: 0; border-top: 2px solid var(--fb-altin); border-radius: 8px; box-shadow: 0 10px 50px 0 rgba(0, 0, 0, .05); opacity: 0; visibility: hidden; transform: scaleY(0); transform-origin: center top; transition: opacity .4s cubic-bezier(.19, 1, .22, 1), visibility .4s cubic-bezier(.19, 1, .22, 1), transform .4s cubic-bezier(.19, 1, .22, 1); } .fbart-ust-nav .fbart-menu-oge:hover > .fbart-menu-alt, .fbart-ust-nav .fbart-menu-oge:focus-within > .fbart-menu-alt { opacity: 1; visibility: visible; transform: scaleY(1); } .fbart-ust-nav .fbart-menu-alt .fbart-menu-oge { display: block; margin: 0; } .fbart-ust-nav .fbart-menu-alt .fbart-menu-oge > a { display: block; width: 100%; padding: 12px 20px 12px 30px; font-size: 16px; font-weight: 500; } .fbart-ust-nav .fbart-menu-alt .fbart-menu-oge > a::after { top: 55%; left: 10px; transform: translateY(-50%); } .fbart-ust-nav .fbart-menu-alt .fbart-menu-oge > a::before { display: none; } .fbart-ust-eylem { display: flex; align-items: center; gap: 42px; } .fbart-ust-sosyal { display: flex; gap: 30px; } .fbart-ust-sosyal-link { font-size: 20px; color: var(--fb-siyah); transition: .5s var(--fb-egri); } .fbart-ust-sosyal-link:hover { color: var(--fb-altin); } .fbart-menu-ac { position: relative; z-index: 1; display: inline-flex; gap: 0; color: #000; flex-direction: column; align-items: center; justify-content: space-between; width: 28px; height: 20px; padding: 0; overflow: visible; background: transparent; border: 0; transition: var(--fb-gecis); } .fbart-menu-ac-cizgi { width: 100%; height: 2px; background: var(--fb-siyah); transition: var(--fb-gecis); } .fbart-menu-ac:hover .fbart-menu-ac-cizgi { background: var(--fb-altin); } .fbart-menu-ac:hover .fbart-menu-ac-cizgi:nth-child(2) { transform: translateX(-10px); } @media (min-width: 992px) { .fbart-ust-nav { display: block; } } @media (min-width: 1200px) and (max-width: 1399px) { .fbart-ust-satir { padding: 0 20px; } } @media (min-width: 1200px) and (max-width: 1439px) { .fbart-ust-nav .fbart-menu { gap: 36px; } } @media (min-width: 1200px) and (max-width: 1299px) { .fbart-ust-sosyal { display: none; } } @media (max-width: 1199px) { .fbart-ust-satir { padding: 10px 20px; } } @media (min-width: 992px) and (max-width: 1199px) { .fbart-ust-sosyal { display: none; } .fbart-ust-logo img { height: 52px; } .fbart-ust-nav .fbart-menu { gap: 22px; } .fbart-ust-nav .fbart-menu-oge > a { font-size: 16px; } } @media (max-width: 575px) { .fbart-ust-sosyal { display: none; } } /* ── YAN MENÜ (MOBİL) ── */ .fbart-yan-menu { position: fixed; top: 0; right: 0; z-index: 9; width: 100%; max-width: 450px; height: 100%; padding: 50px; overflow: scroll; background: var(--fb-beyaz); opacity: 0; visibility: hidden; transform: translateX(105%); transition: .5s ease-in-out; scrollbar-width: none; } .fbart-yan-menu::-webkit-scrollbar { display: none; } .fbart-yan-menu.is-acik { opacity: 1; visibility: visible; transform: translateX(0); transition: transform .5s ease-in-out, opacity .2s ease-in-out; } .fbart-yan-menu-ust { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-bottom: 50px; } .fbart-yan-menu-logo { flex: 0 0 auto; } .fbart-yan-menu-logo img { width: auto; height: 54px; } .fbart-yan-menu-kapat { position: relative; color: #000; display: flex; flex: 0 0 auto; flex-direction: column; align-items: center; justify-content: center; gap: 10px; width: 25px; height: 25px; background: transparent; transition: .3s; } .fbart-yan-menu-kapat span { position: absolute; width: 100%; height: 3px; background: #000; transition: .3s; } .fbart-yan-menu-kapat span:nth-child(1) { transform: rotate(45deg); } .fbart-yan-menu-kapat span:nth-child(2) { transform: rotate(-45deg); } .fbart-yan-menu-kapat:hover span { transform: rotate(0); } .fbart-mobil-nav { display: block; margin-bottom: 50px; } .fbart-mobil-nav .fbart-menu { display: flex; flex-direction: column; flex-wrap: wrap; margin: 0; padding: 0; list-style: none; } .fbart-mobil-nav .fbart-menu-oge { position: relative; padding: 20px 0; } .fbart-mobil-nav .fbart-menu-oge:not(:last-child) { border-bottom: 1px solid rgba(0, 0, 0, .1); } .fbart-mobil-nav .fbart-menu-oge > a { width: 100%; font-family: var(--fb-font-baslik); font-size: 18px; font-weight: 500; line-height: 1; transition: .3s; } .fbart-mobil-nav .fbart-menu-oge:hover > a, .fbart-mobil-nav .fbart-menu-aktif > a { color: var(--fb-altin); } .fbart-mobil-ac { position: absolute; top: 0; right: 0; display: flex; align-items: center; justify-content: flex-end; width: 56px; height: 69px; font-size: 18px; color: #000; background: transparent; cursor: pointer; transition: .3s; } .fbart-mobil-ac .fbart-ikon { transition: .3s; } .fbart-mobil-ac.is-acik .fbart-ikon { transform: rotate(90deg); } .fbart-mobil-nav .fbart-menu-alt { position: static; display: none; color: #212529; text-align: left; margin: 0 0 0 30px; padding: 0; list-style: none; background: transparent; border: 0; border-radius: 0; } .fbart-mobil-nav .fbart-menu-alt .fbart-menu-oge { padding: 13px 0; } .fbart-mobil-nav .fbart-menu-alt .fbart-menu-oge > a { font-size: 16px; } .fbart-yan-menu-sosyal-baslik { margin: 0 0 20px; font-family: var(--fb-font-baslik); font-size: 20px; font-weight: 500; line-height: 1.2; color: #000; } .fbart-yan-menu-sosyal-liste { display: flex; flex-wrap: wrap; gap: 10px; } .fbart-yan-menu-sosyal-link { display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; font-size: 18px; color: #000; border: 1px solid rgba(0, 0, 0, .3); transition: .3s; } .fbart-yan-menu-sosyal-link:hover { color: var(--fb-altin); } @media (min-width: 992px) { .fbart-mobil-nav { display: none; } } /* ── ALT (FOOTER) ── */ .fbart-alt { position: relative; z-index: 1; padding-top: 140px; overflow: hidden; background: var(--fb-koyu); } .fbart-alt-ust { margin-bottom: 100px; padding-bottom: 60px; border-bottom: 1px solid var(--fb-kenar); } .fbart-alt-ust-sira { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 50px; } .fbart-alt-logo { display: inline-block; } .fbart-alt-logo img { width: auto; height: 68px; } .fbart-alt-logo-svg { display: block; width: auto; height: 68px; } .fbart-alt-logo-svg :is(path, polygon):not([style]), .fbart-alt-logo-svg [style*="#3a1f0e"] { fill: var(--fb-beyaz) !important; } .fbart-alt-logo-svg :is([style*="#424242"], [style*="#91765c"]) { fill: var(--fb-altin) !important; } .fbart-alt-slogan { display: flex; align-items: center; gap: 32px; } .fbart-alt-slogan-baslik { font-size: 28px; color: var(--fb-beyaz); } .fbart-alt-govde { display: grid; grid-template-columns: 1.38fr 1fr; gap: 52px; margin-bottom: 140px; } .fbart-alt-widgetlar { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 50px; } .fbart-alt-ayrac { width: 1px; background: #fff; opacity: .24; } .fbart-alt-widget { margin-bottom: 55px; } .fbart-alt-widget-baslik { margin-bottom: 31px; font-weight: 700; text-transform: uppercase; color: var(--fb-altin); } .fbart-alt-widget-menuler { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 120px; } .fbart-alt-menu { margin: 0; padding: 0; list-style: none; } .fbart-alt-menu li:not(:last-child) { margin-bottom: 11px; } .fbart-alt-menu a { font-family: var(--fb-font-metin); font-size: 18px; line-height: 30px; color: var(--fb-beyaz); transition: .4s var(--fb-egri); } .fbart-alt-menu a:hover { color: var(--fb-altin); transform: translateX(3px); } .fbart-alt-iletisim { display: flex; padding-top: 48px; border-top: 1px solid var(--fb-kenar); } .fbart-alt-iletisim-oge { display: flex; align-items: center; gap: 24px; } .fbart-alt-iletisim-ikon { display: flex; flex: 0 0 auto; align-items: center; justify-content: center; width: 68px; height: 68px; font-size: 30px; color: var(--fb-altin); background: #252525; border-radius: 8px; } .fbart-alt-iletisim-oge:hover .fbart-alt-iletisim-ikon svg { animation: fbart-kutudan .9s ease 1; } .fbart-alt-iletisim-metin p { color: var(--fb-beyaz); } .fbart-alt-iletisim-metin a { color: inherit; } .fbart-alt-bulten { padding: 55px 52px; background: #252525; border-radius: 16px; } .fbart-alt-bulten-baslik { margin-bottom: 20px; font-size: 36px; color: var(--fb-beyaz); text-wrap: balance; } .fbart-alt-bulten-metin { margin-bottom: 39px; color: var(--fb-beyaz); opacity: .8; } .fbart-alt-bulten-form { position: relative; z-index: 1; margin-bottom: 38px; } .fbart-alt-bulten-girdi { width: 100%; height: 56px; padding: 0 24px; font-family: var(--fb-font-metin); color: rgba(255, 255, 255, .52); background: #2c2c2c; border: 1px solid rgba(255, 255, 255, .5); border-radius: 6px; } .fbart-alt-bulten-btn { position: absolute; top: 6px; right: 6px; display: flex; align-items: center; justify-content: center; width: 48px; height: 44px; font-size: 16px; color: rgba(255, 255, 255, .8); background: rgba(255, 255, 255, .1); border-radius: 4px; transition: .4s var(--fb-egri); } .fbart-alt-bulten-btn:hover { color: var(--fb-beyaz); background: var(--fb-altin); } .fbart-alt-bulten-btn:hover svg { animation: fbart-kutudan .9s ease 1; } .fbart-alt-sosyal { display: flex; justify-content: center; gap: 12px; } .fbart-alt-sosyal-link { display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; font-size: 16px; color: var(--fb-beyaz); border: 1px solid; border-radius: 50%; opacity: .4; transition: .4s var(--fb-egri); } .fbart-alt-sosyal-link:hover { color: var(--fb-altin); border-color: var(--fb-altin); opacity: 1; } .fbart-alt-sosyal-link:hover svg { animation: fbart-kutudan .9s ease 1; } .fbart-alt-telif { padding: 26px 0; border-top: 1px solid var(--fb-kenar); } .fbart-alt-telif-sira { display: flex; align-items: center; justify-content: space-between; } .fbart-alt-telif-yazi { display: flex; align-items: center; justify-content: space-between; width: 100%; font-size: 16px; color: rgba(255, 255, 255, .64); } .fbart-alt-telif-yazi a { color: var(--fb-beyaz); text-decoration: none; transition: .4s var(--fb-egri); } .fbart-alt-telif-yazi a:hover { color: var(--fb-altin); } .fbart-alt-arka { position: absolute; bottom: 0; left: 0; z-index: -1; width: 100%; height: 695px; overflow: hidden; opacity: .24; filter: grayscale(1); } .fbart-alt-arka img { width: 100%; height: 100% !important; object-fit: cover; } .fbart-bulten-durum { margin: 10px 0 0; font-size: 14px; color: var(--fb-altin); } .fbart-bulten-durum:empty { display: none; } .fbart-tuzak { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; } @media (max-width: 1199px) { .fbart-alt-slogan-baslik { font-size: 24px; } .fbart-alt-ayrac { display: none; } .fbart-alt-iletisim { flex-wrap: wrap; gap: 10px; } .fbart-alt-bulten { padding: 55px 30px; } } @media (max-width: 1399px) { .fbart-alt-widget-menuler { gap: 50px; } .fbart-alt-bulten-baslik { font-size: 30px; } } @media (min-width: 992px) and (max-width: 1199px) { .fbart-alt-govde { align-items: start; } } @media (max-width: 991px) { .fbart-alt-govde { grid-template-columns: 1fr; align-items: start; } .fbart-alt-telif-sira { flex-wrap: wrap; justify-content: space-around; gap: 10px; } } @media (max-width: 767px) { .fbart-alt-slogan { flex-wrap: wrap; } .fbart-alt-telif-yazi { flex-direction: column; align-items: flex-start; gap: 6px; font-size: 15px; } } /* ── ANİMASYONLAR ── */ @keyframes fbart-kay { from { transform: translateX(0); } to { transform: translateX(-50%); } } @keyframes fbart-kutudan { 0% { opacity: 0; transform: scale(.1) rotate(30deg); transform-origin: center bottom; } 50% { transform: rotate(-10deg); } 70% { transform: rotate(3deg); } 100% { opacity: 1; transform: scale(1); } } /* ── ANA SAYFA · HERO ── */ .fbart-bosluk { height: 20px; } .fbart-hero { position: relative; z-index: 1; margin-top: 6px; overflow: hidden; } .fbart-hero-icerik { position: relative; z-index: 2; max-width: 830px; } .fbart-hero-baslik { margin-bottom: 33px; padding-top: 150px; font-size: 68px; line-height: 1.058; letter-spacing: -.03em; } .fbart-hero-baslik b { font-weight: inherit; } .fbart-hero-kelimeler { position: relative; display: inline-block; overflow: hidden; text-align: left; vertical-align: top; } .fbart-hero-kelimeler::after { content: ""; position: absolute; top: 0; right: 0; width: 2px; height: 100%; background: var(--fb-altin); } .fbart-hero-kelimeler b { position: absolute; top: 0; left: 0; display: inline-block; white-space: nowrap; opacity: 0; } .fbart-hero-kelimeler b.is-gorunur { position: relative; opacity: 1; } .fbart-hero-alt { display: flex; gap: 35px; margin-bottom: 60px; } .fbart-hero-slider { position: relative; z-index: 1; max-width: 1824px; margin: -224px auto 0; } .fbart-hero-slayt { position: relative; z-index: 1; height: 820px; } .fbart-hero-slayt::after { content: ""; position: absolute; bottom: 0; left: 0; z-index: -2; width: 100%; height: calc(50% - 190px); background: #dfe4de; transition: 1s var(--fb-egri); } .fbart-hero-slayt-gorsel { width: 100%; height: 100%; } .fbart-hero-slayt-gorsel img { transform: translateY(100%); transform-origin: 50% 100%; transition: 1s var(--fb-egri); transition-delay: 0s; } .swiper-slide-active .fbart-hero-slayt::after { height: calc(100% - 190px); } .swiper-slide-active .fbart-hero-slayt-gorsel img { transform: translateY(0); transition-delay: .7s; } .fbart-hero-slayt-etiket { position: absolute; bottom: 24px; left: 24px; z-index: 1; padding: 17px 16px; background: #fff; } .fbart-hero-slayt-baslik { margin-bottom: 8px; font-size: 20px; color: #4a556c; } .fbart-hero-slayt-alt { font-size: 14px; font-weight: 500; color: #555f75; } .fbart-hero-kucukler { position: absolute; right: 24px; bottom: 24px; z-index: 1; max-width: 692px; } .fbart-hero-kucuk { height: 128px; } .fbart-hero-buyuk { position: absolute; top: 63px; left: 0; font-size: 235px; font-weight: 700; line-height: 1; text-transform: uppercase; color: #cdd3d1; opacity: .32; } .fbart-hero-arka { position: absolute; top: 0; left: 0; z-index: -1; width: 100%; height: 600px; } @media (min-width: 1600px) and (max-width: 1799px) { .fbart-hero-buyuk { font-size: 200px; } } @media (min-width: 1400px) and (max-width: 1599px) { .fbart-hero-baslik { font-size: 60px; } .fbart-hero-slayt { height: 720px; } .fbart-hero-buyuk { font-size: 140px; } } @media (min-width: 1200px) and (max-width: 1399px) { .fbart-hero-baslik { font-size: 55px; } .fbart-hero-slider { margin-top: -184px; } .fbart-hero-slayt { height: 620px; } .fbart-hero-buyuk { font-size: 110px; } } @media (min-width: 992px) and (max-width: 1199px) { .fbart-hero-baslik { font-size: 50px; } .fbart-hero-slider { margin-top: -150px; } .fbart-hero-slayt { height: 520px; } .fbart-hero-kucukler { max-width: 370px; } .fbart-hero-buyuk { font-size: 80px; } } @media (min-width: 768px) and (max-width: 991px) { .fbart-hero-baslik { font-size: 45px; } .fbart-hero-slayt { height: 500px; } .fbart-hero-kucukler { max-width: 370px; } .fbart-hero-buyuk { font-size: 60px; } } @media (max-width: 991px) { .fbart-hero-slider { margin-top: -100px; } } @media (max-width: 767px) { .fbart-hero-baslik { font-size: 35px; } .fbart-hero-alt { flex-wrap: wrap; } .fbart-hero-slayt { height: 450px; } .fbart-hero-slayt-etiket { display: none; } .fbart-hero-kucukler { max-width: 300px; } .fbart-hero-buyuk { display: none; } .fbart-hero-arka { height: 100%; } } @media (min-width: 576px) and (max-width: 767px) { .fbart-hero-baslik { font-size: 40px; } .fbart-hero-alt { flex-wrap: nowrap; } .fbart-hero-arka { height: 600px; } } /* ── ANA SAYFA · ÖZELLİKLER ── */ .fbart-ozl { max-width: 1824px; margin: 0 auto; padding: 80px 0; } .fbart-ozl-cizgi { width: 100%; height: 1px; background: #d9d9d9; } .fbart-ozl-izgara { display: grid; grid-template-columns: repeat(4, 1fr); gap: 52px; padding: 48px 52px; } .fbart-ozl-oge { padding: 30px 0; } .fbart-ozl-oge:not(:last-child) { padding-right: 52px; border-right: 1px solid #d9d9d9; } .fbart-ozl-baslik { margin-bottom: 45px; font-size: 20px; transition: .4s var(--fb-egri); } .fbart-ozl-baslik:hover { color: var(--fb-altin); transform: translateY(2px); } .fbart-ozl-ikon { margin-bottom: 43px; } .fbart-ozl-oge:hover .fbart-ozl-ikon img { animation: fbart-kutudan 1s ease 1; } @media (min-width: 1200px) and (max-width: 1799px) { .fbart-ozl-izgara { gap: 30px; padding: 48px 30px; } .fbart-ozl-oge:not(:last-child) { padding-right: 30px; } } @media (min-width: 992px) and (max-width: 1199px) { .fbart-ozl-izgara { grid-template-columns: 1fr 1fr; } } @media (min-width: 768px) and (max-width: 991px) { .fbart-ozl-izgara { grid-template-columns: 1fr 1fr; gap: 30px; padding: 48px 30px; } .fbart-ozl-oge:not(:last-child) { padding-right: 30px; } } @media (max-width: 767px) { .fbart-ozl-izgara { grid-template-columns: 1fr; padding: 48px 25px; } .fbart-ozl-oge:not(:last-child) { padding-right: 0; border-right: 0; } } @media (min-width: 576px) and (max-width: 767px) { .fbart-ozl-izgara { padding: 48px 52px; } } /* ── ANA SAYFA · HAKKIMIZDA ── */ .fbart-hakk { padding: 45px 0 125px; overflow: hidden; } .fbart-hakk-izgara { display: grid; grid-template-columns: 1.08fr 1fr; gap: 80px; } .fbart-hakk-baslik { margin-bottom: 24px; } .fbart-hakk-alt { padding-left: 125px; } .fbart-hakk-metin { margin-bottom: 46px; } .fbart-hakk-btn { margin-bottom: 50px; } .fbart-hakk-cizim { margin-bottom: 40px; } .fbart-hakk-maddeler { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; } .fbart-hakk-madde-ikon { position: relative; z-index: 1; display: flex; align-items: center; justify-content: center; width: 60px; height: 60px; margin-bottom: 30px; font-size: 35px; color: var(--fb-koyu); background: #f5f5f5; } .fbart-hakk-madde-ikon::after { content: ""; position: absolute; top: 0; right: -5px; width: 1px; height: 65px; background: #060606; opacity: .24; } .fbart-hakk-madde-ikon::before { content: ""; position: absolute; bottom: -5px; left: 0; width: 65px; height: 1px; background: #060606; opacity: .24; } .fbart-hakk-madde-baslik { margin-bottom: 12px; font-size: 20px; transition: .4s var(--fb-egri); } .fbart-hakk-madde-baslik:hover { color: var(--fb-altin); transform: translateX(-2px); } .fbart-hakk-madde-metin { font-size: 17px; line-height: 24px; } .fbart-hakk-madde:hover .fbart-hakk-madde-ikon svg { animation: fbart-kutudan 1s ease 1; } .fbart-hakk-sag { position: relative; z-index: 1; margin-right: -116px; } .fbart-hakk-cizim-2 { position: absolute; bottom: 30%; left: -29%; z-index: -1; width: 88%; } .fbart-hakk-gorsel { max-width: 540px; height: 710px; margin-left: auto; } .fbart-hakk-kart { position: absolute; bottom: 0; left: 0; max-width: 285px; padding: 45px 25px; border-top: 24px solid #fff; border-right: 24px solid #fff; } .fbart-hakk-kart-ikon { margin-bottom: 60px; font-size: 56px; line-height: 0; color: var(--fb-beyaz); transition: .4s var(--fb-egri); } .fbart-hakk-kart-ikon:hover { color: var(--fb-altin); transform: translateX(4px); } .fbart-hakk-kart-baslik { margin-bottom: 18px; font-size: 24px; color: var(--fb-beyaz); } .fbart-hakk-kart-metin { color: var(--fb-beyaz); opacity: .8; } .fbart-hakk-kart:hover .fbart-hakk-kart-ikon svg { animation: fbart-kutudan 1s ease 1; } @media (max-width: 1599px) { .fbart-hakk-sag { margin-right: 0; } } @media (max-width: 991px) { .fbart-hakk-izgara { grid-template-columns: 1fr; } .fbart-hakk-alt { padding-left: 0; } } @media (max-width: 767px) { .fbart-hakk-maddeler { grid-template-columns: 1fr; } } @media (min-width: 576px) and (max-width: 767px) { .fbart-hakk-maddeler { grid-template-columns: 1fr 1fr; } } /* ── ORTAK · AÇIK VARYANTLAR ── */ .fbart-etiket.fbart-etiket-acik { color: var(--fb-beyaz); border-color: rgba(255, 255, 255, .32); } .fbart-btn.fbart-btn-acik { background: transparent; border-color: rgba(255, 255, 255, .72); } .fbart-btn.fbart-btn-acik .fbart-btn-yazi::before { color: var(--fb-beyaz); } .fbart-btn.fbart-btn-acik:hover { border-color: transparent; } /* ── ANA SAYFA · BANT ── */ .fbart-bant-icerik { position: relative; z-index: 1; height: 710px; } .fbart-bant-yazi { position: absolute; bottom: -62px; left: 0; width: 100%; } .fbart-bant-yazi-oge { flex: 0 0 auto; font-size: 235px; font-weight: 800; line-height: 1; text-transform: uppercase; color: var(--fb-koyu); text-shadow: 4px 4px 0 #6a6a6a; } .fbart-bant-yazi-oge .fbart-satir div div { transform-origin: center bottom; transition: var(--fb-gecis); } .fbart-bant-yazi-oge .fbart-satir div div:hover { color: var(--fb-altin); transform: scaleY(1.3); } @media (min-width: 1600px) and (max-width: 1799px) { .fbart-bant-yazi-oge { font-size: 210px; } } @media (min-width: 1400px) and (max-width: 1599px) { .fbart-bant-icerik { height: 650px; } .fbart-bant-yazi-oge { font-size: 190px; } } @media (min-width: 1200px) and (max-width: 1399px) { .fbart-bant-icerik { height: 600px; } .fbart-bant-yazi-oge { font-size: 170px; } } @media (min-width: 992px) and (max-width: 1199px) { .fbart-bant-icerik { height: 550px; } .fbart-bant-yazi-oge { font-size: 150px; } } @media (max-width: 1199px) { .fbart-bant-yazi { bottom: -10px; } } @media (max-width: 991px) { .fbart-bant-icerik { height: 500px; } } @media (min-width: 768px) and (max-width: 991px) { .fbart-bant-yazi-oge { font-size: 130px; } } @media (max-width: 767px) { .fbart-bant-yazi-oge { font-size: 90px; } } @media (min-width: 576px) and (max-width: 767px) { .fbart-bant-yazi-oge { font-size: 110px; } } /* ── ANA SAYFA · HİZMETLER ── */ .fbart-hzm { position: relative; z-index: 1; padding-top: 100px; overflow: hidden; background-color: var(--fb-koyu); } .fbart-hzm-gorsel { position: absolute; bottom: 0; left: 0; width: 15.7%; height: 353px; border-top: 15px solid #202020; border-right: 15px solid #202020; } .fbart-hzm-izgara { display: grid; grid-template-columns: 1fr 1.08fr; gap: 80px; } .fbart-hzm-baslik { margin-bottom: 25px; color: var(--fb-beyaz); } .fbart-hzm-metin { max-width: 520px; margin-bottom: 47px; color: var(--fb-beyaz); opacity: .8; } .fbart-hzm-kartlar { display: flex; justify-content: flex-end; } .fbart-hzm-kart { position: relative; z-index: 1; width: 108px; padding: 68px 50px; background-color: #fff; transition: 1s var(--fb-egri); } .fbart-hzm-kart-aktif { opacity: 0; transition: .5s var(--fb-egri); } .fbart-hzm-kart-varsayilan { position: absolute; top: 0; left: 0; z-index: -1; display: flex; flex-direction: column; align-items: center; justify-content: space-between; width: 100%; height: 100%; padding: 72px 16px; background-color: #383838; transition: .5s var(--fb-egri); } .fbart-hzm-kart:nth-child(2) .fbart-hzm-kart-varsayilan { background-color: #6a6a6a; } .fbart-hzm-kart:nth-child(3) .fbart-hzm-kart-varsayilan { background-color: #4c4c4c; } .fbart-hzm-kart-baslik { margin-bottom: 54px; font-size: 56px; font-weight: 800; line-height: 1.071; letter-spacing: -.03em; text-transform: uppercase; opacity: 0; transform: translateY(10px); transition: 1s var(--fb-egri); transition-delay: 0s; } .fbart-hzm-kart-baslik a { transition: .4s var(--fb-egri); } .fbart-hzm-kart-baslik a:hover { color: var(--fb-altin); transform: translateY(3px); } .fbart-hzm-kart-dikey { margin: 0; font-size: 24px; letter-spacing: -.02em; text-transform: uppercase; color: var(--fb-beyaz); writing-mode: sideways-lr; } .fbart-hzm-kart-metin { opacity: 0; transform: translateY(10px); transition: 1s var(--fb-egri); transition-delay: 0s; } .fbart-hzm-kart-btn { margin-top: 24px; opacity: 0; transform: translateY(10px); transition: opacity 1s var(--fb-egri), transform 1s var(--fb-egri), border-color .8s var(--fb-egri); } .fbart-hzm-kart-gorsel { max-width: 272px; height: 320px; margin-bottom: 34px; } .fbart-hzm-kart-kucuk { height: 90px; filter: grayscale(1); } .fbart-hzm-kart.is-aktif { width: 620px; } .fbart-hzm-kart.is-aktif .fbart-hzm-kart-varsayilan { opacity: 0; } .fbart-hzm-kart.is-aktif .fbart-hzm-kart-aktif { opacity: 1; } .fbart-hzm-kart.is-aktif .fbart-hzm-kart-baslik { opacity: 1; transform: translateY(0); transition-delay: .4s; } .fbart-hzm-kart.is-aktif .fbart-hzm-kart-metin { opacity: 1; transform: translateY(0); transition-delay: .6s; } .fbart-hzm-kart.is-aktif .fbart-hzm-kart-btn { opacity: 1; transform: translateY(0); transition-delay: .75s, .75s, 0s; } @media (min-width: 1800px) { .fbart-hzm-izgara { margin-right: -296px; } } @media (max-width: 1399px) { .fbart-hzm-gorsel { display: none; } } @media (min-width: 992px) and (max-width: 1799px) { .fbart-hzm-kart { padding: 68px 30px; } .fbart-hzm-kart-baslik { margin-bottom: 24px; font-size: 30px; } .fbart-hzm-kart.is-aktif { width: 400px; } } @media (max-width: 1199px) { .fbart-hzm-izgara { grid-template-columns: 1fr; } .fbart-hzm-kart-gorsel { height: 250px; } } @media (max-width: 991px) { .fbart-hzm-kart, .fbart-hzm-kart.is-aktif { width: 100%; } .fbart-hzm-kart-varsayilan { opacity: 0; } .fbart-hzm-kart-aktif, .fbart-hzm-kart-metin, .fbart-hzm-kart-btn { opacity: 1; transform: translateY(0); } .fbart-hzm-kart-baslik { margin-bottom: 24px; font-size: 30px; opacity: 1; transform: translateY(0); } } @media (min-width: 768px) and (max-width: 991px) { .fbart-hzm-kartlar { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; } } @media (max-width: 767px) { .fbart-hzm-kartlar { display: grid; grid-template-columns: 1fr; gap: 10px; } .fbart-hzm-kart { padding: 68px 20px; } } @media (min-width: 576px) and (max-width: 767px) { .fbart-hzm-kart { padding: 68px 50px; } } /* ── ANA SAYFA · EKİP ── */ .fbart-ekip { padding: 130px 0 100px; overflow: hidden; } .fbart-ekip-izgara { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; margin-bottom: 32px; } .fbart-ekip-icerik { max-width: 543px; } .fbart-ekip-baslik { margin-bottom: 25px; } .fbart-ekip-metin { margin-bottom: 47px; } .fbart-ekip-gorsel { height: 478px; } .fbart-ekip-uyeler { display: grid; grid-template-columns: repeat(4, 1fr); gap: 32px; perspective: 2000px; transform-style: preserve-3d; } .fbart-ekip-uye-gorsel { height: 400px; } .fbart-ekip-uye-gorsel a { width: 100%; height: 100%; } .fbart-ekip-uye-gorsel img { transform: perspective(0) rotateX(0) rotateY(0) scaleX(1) scaleY(1); transform-origin: center; transition: transform .5s; } .fbart-ekip-uye:hover .fbart-ekip-uye-gorsel img { transform: perspective(2000px) rotateX(.1deg) rotateY(0) scaleX(1.05) scaleY(1.05); } .fbart-ekip-uye-kart { position: relative; z-index: 1; max-width: 258px; margin: -50px auto 0; padding: 21px 10px; text-align: center; background: var(--fb-beyaz); border: 1px solid rgba(54, 54, 54, .52); } .fbart-ekip-uye-kart::after, .fbart-ekip-uye-kart::before { content: ""; position: absolute; z-index: 1; width: 16px; height: 16px; border-style: solid; border-color: var(--fb-altin); transition: .5s ease-in-out; } .fbart-ekip-uye-kart::after { top: -16px; right: -16px; border-width: 0 0 1px 1px; transform-origin: left bottom; } .fbart-ekip-uye-kart::before { bottom: -16px; left: -16px; border-width: 1px 1px 0 0; transform-origin: right top; } .fbart-ekip-cizgi { position: absolute; background: var(--fb-altin); transition: 1s var(--fb-egri); } .fbart-ekip-cizgi.c1 { top: -1px; left: 0; width: 100%; height: 1px; transform: scaleX(0); transform-origin: right center; } .fbart-ekip-cizgi.c2 { top: 0; right: -1px; width: 1px; height: 100%; transform: scaleY(0); transform-origin: center top; } .fbart-ekip-cizgi.c3 { bottom: -1px; left: 0; width: 100%; height: 1px; transform: scaleX(0); transform-origin: left center; } .fbart-ekip-cizgi.c4 { top: 0; left: -1px; width: 1px; height: 100%; transform: scaleY(0); transform-origin: center bottom; } .fbart-ekip-uye:hover .fbart-ekip-cizgi.c1, .fbart-ekip-uye:hover .fbart-ekip-cizgi.c3 { transform: scaleX(1); } .fbart-ekip-uye:hover .fbart-ekip-cizgi.c2, .fbart-ekip-uye:hover .fbart-ekip-cizgi.c4 { transform: scaleY(1); } .fbart-ekip-uye-ad { margin-bottom: 5px; font-size: 22px; transition: .4s var(--fb-egri); } .fbart-ekip-uye-ad:hover { color: var(--fb-altin); transform: translateY(-3px); } .fbart-ekip-uye-unvan { letter-spacing: -.03em; } .fbart-ekip-bio { grid-column: 3 / 5; align-self: start; margin-top: -7px; padding-left: 57px; font-family: var(--fb-font-metin); font-size: 16px; line-height: 1.8; color: #666; } .fbart-ekip-bio p { margin-bottom: 16px; } .fbart-ekip-bio p:last-child { margin-bottom: 0; } @media (min-width: 1800px) { .fbart-ekip-gorsel { margin-right: -300px; } } @media (max-width: 1199px) { .fbart-ekip-bio { padding-left: 0; } } @media (max-width: 991px) { .fbart-ekip-izgara { grid-template-columns: 1fr; } } @media (min-width: 768px) and (max-width: 991px) { .fbart-ekip-uyeler { grid-template-columns: repeat(3, 1fr); } .fbart-ekip-bio { grid-column: 2 / 4; margin-top: 0; } } @media (max-width: 767px) { .fbart-ekip-uyeler { grid-template-columns: 1fr; } .fbart-ekip-bio { grid-column: 1 / -1; margin-top: 20px; } } @media (min-width: 576px) and (max-width: 767px) { .fbart-ekip-uyeler { grid-template-columns: 1fr 1fr; } } /* ── ANA SAYFA · UZMANLIK ── */ .fbart-uzm { overflow: hidden; } .fbart-uzm-izgara { position: relative; z-index: 1; height: 445px; overflow: hidden; } .fbart-uzm-baslik { position: absolute; top: 40%; left: 50%; width: 100%; margin: 0; font-size: 167px; font-weight: 900; line-height: 1; text-align: center; text-transform: uppercase; color: var(--fb-altin); opacity: .16; transform: translate(-50%, -50%); } .fbart-uzm-baslik > span:nth-child(2) { margin-top: -30px; } .fbart-uzm-baslik .fbart-satir { overflow: hidden; } .fbart-uzm-kutu { position: relative; height: 645px; margin-top: -200px; overflow: hidden; } .fbart-uzm-etiket { position: absolute; top: 0; left: 0; display: inline-block; margin-bottom: 0; user-select: none; pointer-events: auto; } .fbart-uzm-etiket-ic { display: inline-flex; align-items: center; gap: 6px; font-size: 22px; font-weight: 500; user-select: none; pointer-events: auto; filter: drop-shadow(4px 16px 32px rgba(0, 0, 0, .08)); } .fbart-uzm-etiket-ikon { display: flex; align-items: center; justify-content: center; width: 68px; height: 68px; font-size: 20px; color: var(--fb-beyaz); background: #fce8a4; border-radius: 50%; } .fbart-uzm-etiket-ikon.is-seftali { background: #ffd5bf; } .fbart-uzm-etiket-ikon.is-yesil { background: #e4fbc1; } .fbart-uzm-etiket-yazi { padding: 17px 40px; background: var(--fb-beyaz); border-radius: 100px; } .fbart-uzm-kutu.is-durgun { display: flex; flex-wrap: wrap; align-content: flex-end; justify-content: center; gap: 16px; padding: 24px; } .fbart-uzm-kutu.is-durgun .fbart-uzm-etiket { position: static; } @media (min-width: 1200px) and (max-width: 1399px) { .fbart-uzm-baslik { font-size: 127px; } } @media (min-width: 992px) and (max-width: 1199px) { .fbart-uzm-baslik { font-size: 97px; } } @media (min-width: 768px) and (max-width: 991px) { .fbart-uzm-baslik { font-size: 70px; } } @media (max-width: 767px) { .fbart-uzm-baslik { font-size: 30px; } .fbart-uzm-etiket-ic { font-size: 18px; } .fbart-uzm-etiket-ikon { width: 40px; height: 40px; font-size: 18px; } .fbart-uzm-etiket-yazi { padding: 10px 20px; } } @media (min-width: 576px) and (max-width: 767px) { .fbart-uzm-baslik { font-size: 50px; } } /* ── ANA SAYFA · NEDEN BİZ ── */ .fbart-neden { overflow: hidden; background-color: var(--fb-koyu); } .fbart-neden-izgara { display: grid; grid-template-columns: 1.33fr 1fr; align-items: start; } .fbart-neden-yukseklik { height: 1000px; } .fbart-neden-icerik { position: relative; z-index: 1; padding: 120px 0 95px; transform-origin: left top; } .fbart-neden-icerik::after { content: ""; position: absolute; top: 0; right: 0; z-index: -1; width: 200%; height: 100%; background: #3c3d40; } .fbart-neden-baslik { max-width: 570px; margin-bottom: 25px; color: var(--fb-beyaz); } .fbart-neden-metin { max-width: 565px; margin-bottom: 47px; color: var(--fb-beyaz); opacity: .8; } .fbart-neden-daireler { display: flex; margin-top: -300px; } .fbart-neden-daire-dis { flex: 0 0 auto; } .fbart-neden-daire-dis:not(:first-child) { margin-left: -150px; } .fbart-neden-daire-dis:hover { position: relative; z-index: 2; } .fbart-neden-daire { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; width: 445px; height: 445px; padding: 30px; background: rgba(6, 6, 6, .06); border: 1px solid transparent; border-radius: 50%; backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); transition: 1s var(--fb-egri); } .fbart-neden-daire::before { content: ""; position: absolute; inset: 0; z-index: -1; padding: 1px; background: linear-gradient(270deg, #3c3d40, #b9b8b3); border-radius: 50%; -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#fff 0 0) content-box exclude, linear-gradient(#fff 0 0); transition: .5s var(--fb-egri); } .fbart-neden-daire:hover { border-color: var(--fb-altin); } .fbart-neden-daire:hover::before { opacity: 0; } .fbart-neden-daire-ikon { display: flex; align-items: center; justify-content: center; width: 104px; height: 104px; margin-bottom: 34px; font-size: 50px; color: var(--fb-beyaz); background: var(--fb-gri-koyu); border-radius: 50%; } .fbart-neden-daire:hover .fbart-neden-daire-ikon svg { animation: fbart-kutudan 1s ease 1; } .fbart-neden-daire-baslik { margin-bottom: 14px; font-size: 24px; color: var(--fb-beyaz); transition: .4s var(--fb-egri); } .fbart-neden-daire-baslik:hover { color: var(--fb-altin); transform: translateY(-2px); } .fbart-neden-daire-metin { max-width: 301px; text-align: center; color: var(--fb-beyaz); opacity: .8; } @media (min-width: 1400px) and (max-width: 1799px) { .fbart-neden-daireler { margin-top: -200px; } } @media (min-width: 992px) and (max-width: 1399px) { .fbart-neden-daireler { flex-wrap: wrap; gap: 10px; margin-top: -200px; } } @media (min-width: 992px) and (max-width: 1599px) { .fbart-neden-daire { width: 400px; height: 400px; } } @media (max-width: 1399px) { .fbart-neden-daire-dis:not(:first-child) { margin-left: 0; } .fbart-neden-daire-metin { max-width: 221px; } } @media (max-width: 991px) { .fbart-neden-izgara { grid-template-columns: 1fr; gap: 50px; margin-bottom: 50px; } .fbart-neden-yukseklik { height: auto; } .fbart-neden-daireler { flex-wrap: wrap; gap: 10px; margin-top: 0; } } @media (max-width: 767px) { .fbart-neden-daire-dis { width: 100%; } .fbart-neden-daire { width: 100%; border-radius: 0; } .fbart-neden-daire::before { border-radius: 0; } } @media (min-width: 576px) and (max-width: 767px) { .fbart-neden-daire-dis { width: 49%; } } /* ── ANA SAYFA · PROJELER ── */ .fbart-prj { padding: 120px 0 0; overflow: hidden; } .fbart-prj-yukseklik { height: 3000px; } .fbart-prj-yazi-buyuk, .fbart-prj-yazi-ikili { display: flex; justify-content: center; margin: 0; font-size: 240px; font-weight: 800; line-height: 1; letter-spacing: -.04em; text-transform: uppercase; will-change: transform, opacity; } .fbart-prj-yazi-ikili { justify-content: space-between; margin-top: 0; } .fbart-prj-deste { position: relative; height: 100%; will-change: transform, opacity; } .fbart-prj-kart { position: absolute; top: 0; left: 0; width: 100%; transform-origin: center top; will-change: transform, opacity; } .fbart-prj-kart:nth-child(1) { z-index: 1; } .fbart-prj-kart:nth-child(2) { z-index: -1; } .fbart-prj-kart:nth-child(3) { z-index: -2; } .fbart-prj-kart:nth-child(4) { z-index: -3; } .fbart-prj-kart-gorsel { width: 100%; height: 575px; box-shadow: 0 -12px 20px rgba(0, 0, 0, .08); } .fbart-prj-kart-gorsel a { width: 100%; height: 100%; } .fbart-prj-kart-icerik { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 34px 0; border-bottom: 1px solid #d9d9d9; opacity: 0; } .fbart-prj-kart-baslik { max-width: 495px; font-size: 32px; transition: .4s var(--fb-egri); } .fbart-prj-kart-baslik:hover { color: var(--fb-altin); transform: translateY(-2px); } .fbart-prj-kart-bilgi { display: flex; gap: 50px; } .fbart-prj-kart-bilgi li { color: var(--fb-koyu); } .fbart-prj-kart-bilgi li span { display: block; font-size: 16px; color: #7a7a7a; } @media (min-width: 1600px) and (max-width: 1799px) { .fbart-prj-yazi-buyuk, .fbart-prj-yazi-ikili { font-size: 200px; } } @media (min-width: 992px) and (max-width: 1599px) { .fbart-prj-yazi-buyuk, .fbart-prj-yazi-ikili { font-size: 180px; } .fbart-prj-deste { margin-top: 50px; } } @media (min-width: 1200px) and (max-width: 1599px) { .fbart-prj-kart-gorsel { height: 500px; } } @media (min-width: 992px) and (max-width: 1199px) { .fbart-prj-kart-gorsel { height: 450px; } } @media (max-width: 991px) { .fbart-prj-yukseklik { height: auto; } .fbart-prj-yazi-ikili { justify-content: center; margin-bottom: 50px; } .fbart-prj-kart { position: unset; margin-bottom: 50px; } .fbart-prj-kart-gorsel { height: 400px; } .fbart-prj-kart-icerik { opacity: 1; } } @media (min-width: 768px) and (max-width: 991px) { .fbart-prj-yazi-buyuk, .fbart-prj-yazi-ikili { font-size: 130px; } .fbart-prj-kart-baslik { font-size: 26px; } } @media (max-width: 767px) { .fbart-prj-yazi-buyuk, .fbart-prj-yazi-ikili { font-size: 70px; } .fbart-prj-kart-icerik { flex-wrap: wrap; } .fbart-prj-kart-baslik { font-size: 22px; } } @media (min-width: 576px) and (max-width: 767px) { .fbart-prj-yazi-buyuk, .fbart-prj-yazi-ikili { font-size: 100px; } } /* ── ANA SAYFA · YORUMLAR ── */ .fbart-yrm { position: relative; z-index: 1; margin: -200px 40px 0; padding: 125px 0 50px; overflow: hidden; } .fbart-yrm-arka { position: absolute; top: 0; left: 0; z-index: -1; width: 100%; height: 630px; background-color: #f7f6f1; } .fbart-yrm-ust { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 30px; } .fbart-yrm-baslik { max-width: 700px; } .fbart-yrm-btn { flex: 0 0 auto; } .fbart-yrm-slider { margin: 0 -300px 0 -260px; } .fbart-yrm-kap { padding: 50px 0; } .fbart-yrm-kart { position: relative; z-index: 0; display: grid; grid-template-columns: 1fr 2.1fr; align-items: center; gap: 48px; padding: 40px; background: #fff; border: 1px solid rgba(154, 123, 79, .18); } .fbart-yrm-kart-gorsel { display: flex; align-items: center; justify-content: center; width: 120px; height: 120px; overflow: hidden; background: rgba(255, 191, 0, .34); border-radius: 50%; filter: grayscale(1); } .fbart-yrm-kart-gorsel img { width: 100%; height: 100% !important; object-fit: cover; object-position: center top; } .fbart-yrm-kart-metin { margin-bottom: 72px; font-size: 22px; line-height: 1.545; color: var(--fb-koyu); } .fbart-yrm-kart-ad { font-size: 22px; font-weight: 600; color: var(--fb-koyu); } .fbart-yrm-kontrol { display: flex; align-items: center; justify-content: center; gap: 30px; } .fbart-yrm-ilerleme { position: relative; z-index: 1; display: flex; width: 100%; max-width: 300px; } .fbart-yrm-ilerleme .fbart-yrm-ilerleme-cubuk { position: absolute; top: 0; left: 0; width: 100%; height: 2px; background: #e4e4e4; } .fbart-yrm-ilerleme-cubuk .swiper-pagination-progressbar-fill { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: var(--fb-koyu); transform: scale(0); transform-origin: left top; } .fbart-yrm-ok { display: flex; align-items: center; gap: 10px; padding: 0; font-size: 16px; font-weight: 500; line-height: 1; letter-spacing: 3px; text-transform: uppercase; color: inherit; background: transparent; border: 0; opacity: .5; cursor: pointer; transition: .4s var(--fb-egri); } .fbart-yrm-ok:hover { opacity: 1; } @media (min-width: 1600px) { .fbart-kap.fbart-kap-standart { max-width: 1320px; } } @media (max-width: 1399px) { .fbart-yrm { margin-right: 15px; margin-left: 15px; } .fbart-yrm-slider { margin-right: 0; margin-left: 0; } .fbart-yrm-kart-metin { margin-bottom: 22px; font-size: 20px; } } @media (max-width: 767px) { .fbart-yrm-kart { grid-template-columns: 1fr; } } @media (max-width: 575px) { .fbart-yrm-kart { padding: 32px 28px; } } @media (min-width: 576px) and (max-width: 767px) { .fbart-yrm-kart { grid-template-columns: 1fr 2.1fr; } } /* ── ANA SAYFA · BLOG ── */ .fbart-blog { padding: 95px 0 125px; } .fbart-blog-icerik { margin-bottom: 49px; } .fbart-blog-ust { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 30px; } .fbart-blog-baslik { max-width: 700px; } .fbart-blog-btn { flex: 0 0 auto; } .fbart-blog-izgara { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; } .fbart-blog-kart-gorsel { height: 500px; filter: grayscale(1); } .fbart-blog-kart-gorsel a { width: 100%; height: 100%; } .fbart-blog-kart-gorsel img { transform: perspective(0) rotateX(0) rotateY(0) scaleX(1) scaleY(1); transform-origin: center; transition: transform .5s; } .fbart-blog-kart:hover .fbart-blog-kart-gorsel { filter: grayscale(0); } .fbart-blog-kart:hover .fbart-blog-kart-gorsel img { transform: perspective(2000px) rotateX(.1deg) rotateY(0) scaleX(1.1) scaleY(1.1); } .fbart-blog-kart-baslik { margin-bottom: 22px; font-size: 28px; line-height: 1.142; letter-spacing: -.02em; transition: .4s var(--fb-egri); } .fbart-blog-kart-baslik:hover { color: var(--fb-altin); transform: translateY(-3px); } .fbart-blog-kart-meta { display: flex; flex-wrap: wrap; gap: 10px; padding: 12px 0; font-size: 16px; border-top: 1px solid #ddd; border-bottom: 1px solid #ddd; } .fbart-blog-kart-kategori { position: relative; z-index: 1; padding-right: 12px; font-weight: 500; color: var(--fb-koyu); } .fbart-blog-kart-kategori::after { content: ""; position: absolute; top: 11px; right: 0; width: 4px; height: 4px; background: #000; border-radius: 50%; } .fbart-blog-kart-okuma { margin-left: auto; } @media (min-width: 1200px) and (max-width: 1399px) { .fbart-blog-kart-gorsel { height: 450px; } } @media (min-width: 992px) and (max-width: 1199px) { .fbart-blog-kart-gorsel { height: 400px; } } @media (min-width: 768px) and (max-width: 1399px) { .fbart-blog-kart-baslik { font-size: 24px; } } @media (max-width: 991px) { .fbart-blog-kart-gorsel { height: 350px; } } @media (min-width: 768px) and (max-width: 991px) { .fbart-blog-izgara { grid-template-columns: 1fr 1fr; } } @media (max-width: 767px) { .fbart-blog-izgara { grid-template-columns: 1fr; } .fbart-blog-kart-baslik { font-size: 22px; } } @media (min-width: 576px) and (max-width: 767px) { .fbart-blog-izgara { grid-template-columns: 1fr 1fr; } } /* ── ANA SAYFA · İLETİŞİM ── */ .fbart-ilt { position: relative; z-index: 1; padding: 460px 0 172px; overflow: hidden; } .fbart-ilt-arka { position: absolute; top: 0; left: 0; z-index: -1; width: 100%; height: 1070px; } .fbart-ilt-arka .fbart-ilt-parilti { position: absolute; top: 0; left: 0; z-index: 1; width: 100%; height: 340px !important; } .fbart-ilt-izgara { display: grid; grid-template-columns: 1.2fr 1fr auto; margin-right: -95px; } .fbart-ilt-form { margin-top: 180px; padding: 68px 60px; background: #f7f6f1; } .fbart-ilt-form-baslik { margin-bottom: 29px; font-size: 36px; font-weight: 700; color: var(--fb-koyu); } .fbart-ilt-baslik { align-self: end; margin: 0 0 -80px 65px; } .fbart-ilt-gorsel { width: 290px; height: 686px; } @media (min-width: 1400px) and (max-width: 1599px) { .fbart-ilt-arka { height: 800px; } .fbart-ilt-arka .fbart-ilt-parilti { height: 250px !important; } } @media (min-width: 1200px) and (max-width: 1399px) { .fbart-ilt { padding-top: 360px; } .fbart-ilt-arka { height: 700px; } .fbart-ilt-arka .fbart-ilt-parilti { height: 200px !important; } } @media (min-width: 1200px) and (max-width: 1599px) { .fbart-ilt-izgara { margin-right: 0; } .fbart-ilt-gorsel { height: 556px; } } @media (max-width: 1399px) { .fbart-ilt-form { padding: 68px 30px; } .fbart-ilt-form-baslik { font-size: 30px; } } @media (max-width: 1199px) { .fbart-ilt { padding-top: 200px; } .fbart-ilt-arka .fbart-ilt-parilti { height: 150px !important; } .fbart-ilt-izgara { grid-template-columns: 1.2fr 1fr; gap: 50px; margin-right: 0; } .fbart-ilt-baslik { margin-bottom: 0; margin-left: 0; } .fbart-ilt-gorsel { width: 100%; height: 500px; } } @media (min-width: 992px) and (max-width: 1199px) { .fbart-ilt-arka { height: 600px; } } @media (max-width: 991px) { .fbart-ilt-arka { height: 500px; } .fbart-ilt-izgara { grid-template-columns: 1fr; } } @media (max-width: 767px) { .fbart-ilt-form-baslik { font-size: 24px; } } /* ── ANA SAYFA · MARKALAR ── */ .fbart-marka { padding: 0 0 120px; overflow: hidden; } .fbart-marka-izgara { display: inline-flex; flex: 0 0 auto; gap: 32px; overflow: hidden; } .fbart-marka-oge { display: flex; flex: 0 0 auto; align-items: center; justify-content: center; width: 280px; height: 120px; padding: 20px; overflow: hidden; background-color: #fff; border: 1px solid #ddd; border-radius: 8px; transition: .4s var(--fb-egri); } .fbart-marka-oge:hover { transform: scale(.9); } .fbart-marka-oge:hover img { animation: fbart-yakinlas 1s ease 1; } @keyframes fbart-yakinlas { from { opacity: 0; transform: scale3d(.1, .1, .1) translate3d(0, -500px, 0); animation-timing-function: cubic-bezier(.55, .055, .675, .19); } 30% { opacity: 1; transform: scale3d(.475, .475, .475) translate3d(0, 60px, 0); animation-timing-function: cubic-bezier(.175, .885, .32, 1); } } /* ── FORM VE ONAY PENCERESİ ── */ .fbart-form-gonder { margin-bottom: 90px; } .fbart-form-gonder[disabled] { opacity: .6; cursor: progress; } .fbart-modal-onay { display: table; margin: 10px auto 0; } .fb-grid-wrapper { display: grid; grid-template-columns: repeat(2, 1fr); gap: 30px; width: 100%; box-sizing: border-box; } .fb-grid-wrapper * { box-sizing: border-box; } .fb-grid-wrapper p { margin: 0 !important; padding: 0 !important; } .fb-grid-col { display: flex; flex-direction: column; width: 100%; } .fb-grid-full { grid-column: 1 / -1; display: flex; flex-direction: column; width: 100%; } .fb-form-label { display: flex; align-items: center; gap: 10px; font-size: 14px; font-weight: 600; color: #111; text-transform: uppercase; letter-spacing: 1px; margin-bottom: 5px; } .fb-form-label img { width: 16px; height: auto; } .fb-grid-wrapper input[type="text"], .fb-grid-wrapper input[type="email"], .fb-grid-wrapper input[type="tel"], .fb-grid-wrapper textarea { width: 100% !important; background: transparent !important; border: none !important; border-bottom: 1px solid #111 !important; padding: 12px 0 !important; font-size: 15px !important; color: #111 !important; border-radius: 0 !important; box-shadow: none !important; outline: none !important; transition: border-color .3s ease; } .fb-grid-wrapper input:focus, .fb-grid-wrapper textarea:focus { border-bottom: 1px solid #c5a059 !important; } .fb-grid-wrapper input:focus-visible, .fb-grid-wrapper textarea:focus-visible { box-shadow: 0 2px 0 #c5a059 !important; } .fb-grid-wrapper textarea { min-height: 40px; height: 50px; resize: vertical; } .fb-checkbox-row { display: flex; align-items: flex-start; width: 100%; } .fb-checkbox-row input[type="checkbox"] { width: 18px !important; height: 18px !important; margin: 2px 12px 0 0 !important; flex-shrink: 0; cursor: pointer; accent-color: #c5a059; } .fb-text-part { font-size: 14px; color: #666; line-height: 1.5; } .fb-link { color: #c5a059; font-weight: 600; text-decoration: underline; cursor: pointer; transition: color .3s; background: none; border: 0; padding: 0; font: inherit; } .fb-link:hover { color: #111; } .fbart-onay-ilk { margin-top: 15px; } .fb-grid-wrapper .fb-checkbox-row { min-height: 29px; } .fbart-form-durum { margin: 10px 0; text-align: center; font-size: 15px; line-height: 1.5; } .fbart-form-durum.ok { color: #2f7d4f; } .fbart-form-durum.hata { color: #b3261e; } .fbart-form-hata { display: block; font-size: 13px; line-height: 1.4; color: #b3261e; margin-top: 6px; } .fbart-form-hata:empty { display: none; } .fbart-tuzak { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; } .fb-submit-wrap { align-items: flex-start; } .fbart-ts { width: 100%; max-width: 420px; } .fb-submit-wrap .fbart-ts.is-gorunur { margin-bottom: 18px; } .fbart-bulten .fbart-ts.is-gorunur { margin: -20px 0 24px; } .fb-modal-backdrop { position: fixed; z-index: 999999; inset: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, .7); overflow-y: auto; overscroll-behavior: contain; backdrop-filter: blur(5px); opacity: 0; transition: opacity .3s ease; } .fb-modal-backdrop[hidden] { display: none; } .fb-modal-backdrop.is-acik { opacity: 1; } .fb-modal-card { background: #fff; margin: 10% auto; padding: 30px; width: 90%; max-width: 500px; position: relative; border-top: 4px solid #c5a059; box-shadow: 0 25px 50px rgba(0, 0, 0, .2); transform: translateY(24px) scale(.98); transition: transform .5s cubic-bezier(.16, 1, .3, 1); } .fb-modal-backdrop.is-acik .fb-modal-card { transform: none; } @media (prefers-reduced-motion: reduce) { .fb-modal-backdrop, .fb-modal-card { transition: none; } .fb-modal-card { transform: none; } } .fb-modal-card h3 { font-size: 22px; color: #111; margin-top: 0; margin-bottom: 15px; } .fb-close { position: absolute; right: 6px; top: 8px; display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; font-size: 30px; cursor: pointer; color: #666; transition: color .3s; line-height: 1; background: none; border: 0; padding: 0; } .fb-close:hover { color: #111; } .fb-modal-body { max-height: 350px; overflow-y: auto; padding: 15px 0; margin: 15px 0; border-top: 1px solid #eee; border-bottom: 1px solid #eee; font-size: 15px; color: #555; line-height: 1.6; } .fb-modal-body a { color: #c5a059; font-weight: 600; } @media (max-width: 768px) { .fb-grid-wrapper { grid-template-columns: 1fr; gap: 20px; } } .fb-grid-wrapper .fb-alan-sarici { display: block !important; width: 100% !important; } .fb-checkbox-row .fb-alan-sarici { width: auto !important; display: inline-block !important; } .fb-checkbox-row span.fb-onay-oge { margin: 0 !important; padding: 0 !important; display: flex; align-items: flex-start; } /* ── ORTAK · SAYFA BAŞLIĞI (KIRINTI) ── */ @media (min-width: 1600px) { .fbart-kap.fbart-kap-genis { max-width: 1484px; } } .fbart-kirinti { position: relative; z-index: 1; margin-top: 120px; padding-top: 250px; } .fbart-kirinti-arka { position: absolute; inset: 0; z-index: -1; background: #000; } .fbart-kirinti-arka img { opacity: .28; } .fbart-kirinti-ic { position: relative; z-index: 1; display: flex; flex-direction: column; gap: 100px; } .fbart-kirinti-baslik { margin: 0; font-family: var(--fb-font-baslik); font-size: 90px; font-weight: 700; line-height: 1; letter-spacing: -.01em; color: var(--fb-beyaz); } @media (min-width: 1200px) and (max-width: 1399px) { .fbart-kirinti-baslik { font-size: 80px; } } @media (min-width: 992px) and (max-width: 1199px) { .fbart-kirinti-baslik { font-size: 70px; } } @media (min-width: 768px) and (max-width: 991px) { .fbart-kirinti-baslik { font-size: 60px; } } @media (min-width: 576px) and (max-width: 767px) { .fbart-kirinti-baslik { font-size: 50px; } } @media (max-width: 575px) { .fbart-kirinti-baslik { font-size: 40px; } } .fbart-kirinti-yol { position: relative; z-index: 1; display: inline-block; margin-left: auto; padding: 16px 32px; background: var(--fb-beyaz); } @media (max-width: 575px) { .fbart-kirinti-yol { padding-right: 20px; padding-left: 20px; } } .fbart-kirinti-sekil { position: absolute; right: 113%; bottom: 220%; z-index: -1; } @media (max-width: 1199px) { .fbart-kirinti-sekil { display: none; } } .fbart-kirinti-liste { display: flex; flex-wrap: wrap; margin: 0; padding: 0; list-style: none; } .fbart-kirinti-liste li { display: flex; align-items: center; } .fbart-kirinti-liste a, .fbart-kirinti-liste span { font-family: var(--fb-font-baslik); font-size: 18px; font-weight: 500; line-height: 28px; letter-spacing: -.01em; text-transform: uppercase; color: var(--fb-koyu); opacity: .6; } .fbart-kirinti-liste a { transition: color .3s; } .fbart-kirinti-liste a:hover { color: var(--fb-altin); } .fbart-kirinti-ok { margin: 0 5px 0 7px; font-size: 18px; color: var(--fb-altin); } /* ── ORTAK · ÖZELLİK ŞERİDİ ── */ .fbart-seridi { padding-top: 120px; } .fbart-seridi-sira { display: flex; flex-wrap: wrap; justify-content: center; gap: 60px; } @media (max-width: 1399px) { .fbart-seridi-sira { gap: 50px 30px; } } .fbart-seridi-ayrac { padding-top: 17px; } @media (max-width: 1199px) { .fbart-seridi-ayrac { display: none; } } .fbart-seridi-oge { text-align: center; } .fbart-seridi-ikon { max-width: 80px; height: 80px; margin: 0 auto 14px; } .fbart-seridi-icerik { clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%); transition: clip-path .5s var(--fb-egri-2) .25s; } @media (min-width: 1200px) { .fbart-seridi.is-bekle .fbart-seridi-icerik { clip-path: polygon(0 0, 100% 0, 100% 0, 0 0); } } .fbart-seridi-baslik { margin-bottom: 6px; font-size: 25px; font-weight: 800; letter-spacing: -.03em; transition: .4s var(--fb-egri); } @media (max-width: 1399px) { .fbart-seridi-baslik { font-size: 22px; } } .fbart-seridi-baslik:hover { color: var(--fb-altin); transform: translateY(2px); } .fbart-seridi-metin { margin: 0; font-family: var(--fb-font-baslik); font-size: 17px; line-height: 1.555; color: #352828; } /* ── ORTAK · BAŞLIK ALANI ── */ .fbart-kutu { max-width: 1505px; margin: 0 auto; padding: 10px; } .fbart-baslik-alan { padding-top: 90px; } .fbart-ust-baslik { display: inline-flex; align-items: baseline; gap: 10px; margin: 0 0 8px; font-family: var(--fb-font-baslik); font-size: 18px; font-weight: 500; line-height: 1.5; color: var(--fb-siyah); } .fbart-baslik-1 { margin: 0; font-family: var(--fb-font-baslik); font-size: 70px; font-weight: 600; line-height: 1; letter-spacing: -.03em; color: var(--fb-siyah); } @media (min-width: 1400px) and (max-width: 1599px) { .fbart-baslik-1 { font-size: 65px; } } @media (min-width: 1200px) and (max-width: 1399px) { .fbart-baslik-1 { font-size: 60px; } } @media (min-width: 992px) and (max-width: 1199px) { .fbart-baslik-1 { font-size: 55px; } } @media (min-width: 768px) and (max-width: 991px) { .fbart-baslik-1 { font-size: 50px; } } @media (min-width: 576px) and (max-width: 767px) { .fbart-baslik-1 { font-size: 40px; } } @media (max-width: 575px) { .fbart-baslik-1 { font-size: 35px; } } .fbart-hk-metin { margin-top: 50px; font-size: 15px; color: #1b1b1b; } .fbart-ust-baslik-2 { display: inline-flex; gap: 40px; margin: 0 0 16px; overflow: hidden; font-family: var(--fb-font-metin); font-size: 16px; font-weight: 400; line-height: 20px; color: var(--fb-koyu); } .fbart-hk-baslik-alan { margin-bottom: 50px; } /* ── HAKKIMIZDA · GALERİ ── */ .fbart-hk-galeri { max-width: 1475px; margin: 0 auto; padding-top: 30px; } .fbart-hk-galeri-alan { position: relative; z-index: 1; margin-right: -500px; cursor: none; } @media (min-width: 1400px) and (max-width: 1599px) { .fbart-hk-galeri-alan { margin-right: -200px; } } @media (min-width: 1200px) and (max-width: 1399px) { .fbart-hk-galeri-alan { margin-right: -100px; } } @media (max-width: 1199px) { .fbart-hk-galeri-alan { margin-right: 0; } } .fbart-hk-galeri-oge { display: block; width: 100%; height: 400px; cursor: none; } .fbart-hk-galeri-oge img { transition: transform .5s; } .fbart-hk-galeri-oge:hover img { transform: scale(1.1); } .fbart-hk-galeri-surukle { position: absolute; top: 50%; left: 50%; z-index: 2; display: inline-flex; align-items: center; justify-content: center; width: 60px; height: 60px; margin: -30px 0 0 -30px; border-radius: 50%; background: var(--fb-altin); font-size: 15px; font-weight: 400; color: var(--fb-beyaz); pointer-events: none; } .fbart-buyut { max-width: none; max-height: none; width: 100%; height: 100%; margin: 0; padding: 40px 70px; border: 0; background: transparent; } .fbart-buyut[open] { display: flex; align-items: center; justify-content: center; } .fbart-buyut::backdrop { background: rgba(11, 11, 11, .88); } .fbart-buyut img { max-width: 100%; max-height: 100%; object-fit: contain; box-shadow: 0 0 8px rgba(0, 0, 0, .6); } .fbart-buyut button { position: absolute; display: inline-flex; align-items: center; justify-content: center; width: 48px; height: 48px; font-size: 28px; color: var(--fb-beyaz); opacity: .7; transition: opacity .3s; } .fbart-buyut button:hover { opacity: 1; } .fbart-buyut-kapat { top: 10px; right: 10px; } .fbart-buyut-onceki { top: 50%; left: 10px; margin-top: -24px; } .fbart-buyut-sonraki { top: 50%; right: 10px; margin-top: -24px; } @media (max-width: 575px) { .fbart-buyut { padding: 60px 12px; } .fbart-buyut-onceki, .fbart-buyut-sonraki { top: auto; bottom: 6px; margin-top: 0; } } /* ── HAKKIMIZDA · BİLGİ ── */ .fbart-hk-bilgi { margin-top: 30px; } .fbart-hk-bilgi-ic { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 30px; } .fbart-hk-bilgi-metin { max-width: 920px; margin: 0; font-family: var(--fb-font-baslik); font-size: 35px; font-weight: 400; line-height: 1.285; color: var(--fb-siyah); } @media (min-width: 992px) and (max-width: 1399px) { .fbart-hk-bilgi-metin { font-size: 30px; } } @media (max-width: 991px) { .fbart-hk-bilgi-metin { font-size: 26px; } } .fbart-hk-bilgi-btn { flex: 0 0 auto; } /* ── HAKKIMIZDA · SAYAÇLAR ── */ .fbart-hk-sayac { padding: 100px 0 120px; } .fbart-hk-sayac-cizgi { width: 100%; height: 1px; background: #d9d9d9; } .fbart-hk-sayac-izgara { display: grid; grid-template-columns: repeat(4, 1fr); padding: 32px 0; } .fbart-hk-sayac-oge { padding: 32px; } .fbart-hk-sayac-oge:not(:last-child) { border-right: 1px solid #d9d9d9; } @media (max-width: 1199px) { .fbart-hk-sayac-izgara { grid-template-columns: 1fr 1fr; gap: 32px; } .fbart-hk-sayac-oge, .fbart-hk-sayac-oge:not(:last-child) { border: 1px solid #d9d9d9; } } @media (max-width: 767px) { .fbart-hk-sayac-izgara { grid-template-columns: 1fr; } } .fbart-hk-sayac-baslik { margin-bottom: 27px; font-size: 20px; font-weight: 500; } .fbart-hk-sayac-deger { margin-bottom: 22px; font-size: 32px; font-weight: 500; line-height: 1; letter-spacing: -.02em; color: var(--fb-altin); } .fbart-hk-sayac-sayi { font-size: 68px; color: var(--fb-koyu); overflow-wrap: normal; } @media (max-width: 1399px) { .fbart-hk-sayac-sayi { font-size: 55px; } } /* ── HAKKIMIZDA · VİDEO ── */ .fbart-hk-video-ic { position: relative; z-index: 1; } .fbart-hk-video-gorsel { position: relative; z-index: 1; height: 870px; } @media (min-width: 1200px) and (max-width: 1399px) { .fbart-hk-video-gorsel { height: 770px; } } @media (min-width: 992px) and (max-width: 1199px) { .fbart-hk-video-gorsel { height: 670px; } } @media (min-width: 768px) and (max-width: 991px) { .fbart-hk-video-gorsel { height: 570px; } } @media (max-width: 767px) { .fbart-hk-video-gorsel { height: 500px; } } .fbart-hk-video-baslik { position: absolute; bottom: -30px; left: 0; z-index: 1; display: flex; flex-wrap: wrap; align-items: center; gap: 0 30px; width: 100%; padding: 0 0 20px 20px; font-family: var(--fb-font-baslik); font-size: 120px; font-weight: 900; line-height: 1; letter-spacing: -.03em; text-transform: uppercase; color: var(--fb-beyaz); } @media (max-width: 1599px) { .fbart-hk-video-baslik { bottom: 0; } } @media (min-width: 992px) and (max-width: 1199px) { .fbart-hk-video-baslik { font-size: 90px; } } @media (min-width: 768px) and (max-width: 991px) { .fbart-hk-video-baslik { font-size: 80px; } } @media (min-width: 576px) and (max-width: 767px) { .fbart-hk-video-baslik { font-size: 60px; } } @media (max-width: 575px) { .fbart-hk-video-baslik { font-size: 40px; } } .fbart-hk-video-liste { display: grid; grid-template-columns: 1.3fr 1fr; align-items: center; gap: 40px; max-width: 600px; background: #2c2c2c; } @media (max-width: 575px) { .fbart-hk-video-liste { grid-template-columns: 1fr; } } .fbart-hk-video-kucuk { height: 105px; font-size: 0; } .fbart-hk-video-bilgi li { font-size: 16px; font-weight: 400; line-height: 1.5; letter-spacing: 0; text-transform: none; } .fbart-hk-video-bilgi li:not(:last-child) { margin-bottom: 5px; } /* ── HAKKIMIZDA · SÜREÇ ── */ .fbart-hk-surec { max-width: 1720px; margin: 0 auto; padding-top: 135px; overflow: hidden; background-color: #f5f5f5; border-radius: 24px; } @media (max-width: 991px) { .fbart-hk-surec { padding-bottom: 100px; } } .fbart-hk-surec-izgara { display: grid; grid-template-columns: 1fr 1.52fr; gap: 66px; } @media (min-width: 992px) and (max-width: 1199px) { .fbart-hk-surec-izgara { gap: 40px; } } @media (max-width: 991px) { .fbart-hk-surec-izgara { grid-template-columns: 1fr; gap: 50px; } } .fbart-hk-surec-gorsel { max-width: 428px; height: 540px; } @media (min-width: 768px) and (max-width: 1199px) { .fbart-hk-surec-gorsel { height: 440px; } } @media (max-width: 767px) { .fbart-hk-surec-gorsel { height: 400px; } } .fbart-hk-surec-liste li:not(:last-child) { margin-bottom: 20px; } .fbart-hk-surec-adim { position: relative; z-index: 1; display: flex; align-items: center; gap: 32px; padding: 18px 28px; border: 1px solid rgba(6, 6, 6, .2); border-radius: 6px; transition: .4s var(--fb-egri); } @media (max-width: 575px) { .fbart-hk-surec-adim { flex-wrap: wrap; } } .fbart-hk-surec-no { font-size: 48px; font-weight: 800; line-height: 1; opacity: .08; transition: .4s var(--fb-egri); } .fbart-hk-surec-adim-baslik { font-size: 24px; font-weight: 400; transition: .4s var(--fb-egri); } @media (max-width: 1199px) { .fbart-hk-surec-no { font-size: 36px; } .fbart-hk-surec-adim-baslik { font-size: 22px; } } .fbart-hk-surec-ok { display: inline-flex; flex: 0 0 auto; align-items: center; justify-content: center; width: 48px; height: 48px; margin-left: auto; font-size: 18px; color: var(--fb-gri-koyu); border: 1px solid var(--fb-gri-koyu); border-radius: 50%; opacity: .72; transform: rotate(-45deg); transition: .4s var(--fb-egri); } .fbart-hk-surec-resim { position: absolute; z-index: 1; opacity: 0; pointer-events: none; transition: none; } .fbart-hk-surec-adim:hover { z-index: 2; background-color: var(--fb-koyu); } .fbart-hk-surec-adim:hover .fbart-hk-surec-no, .fbart-hk-surec-adim:hover .fbart-hk-surec-adim-baslik { color: var(--fb-beyaz); opacity: 1; } .fbart-hk-surec-adim:hover .fbart-hk-surec-ok { color: var(--fb-beyaz); border-color: var(--fb-beyaz); opacity: 1; } /* ── HAKKIMIZDA · VİZYON ── */ .fbart-hk-vizyon { padding: 135px 0 170px; } .fbart-hk-vizyon-baslik-alan { max-width: 790px; margin-bottom: 90px; } .fbart-hk-vizyon-izgara { display: grid; grid-template-columns: repeat(4, 1fr); } @media (min-width: 768px) and (max-width: 991px) { .fbart-hk-vizyon-izgara { grid-template-columns: repeat(3, 1fr); gap: 10px; } } @media (min-width: 576px) and (max-width: 767px) { .fbart-hk-vizyon-izgara { grid-template-columns: 1fr 1fr; gap: 10px; } } @media (max-width: 575px) { .fbart-hk-vizyon-izgara { grid-template-columns: 1fr; gap: 10px; } } .fbart-hk-vizyon-kart { position: relative; z-index: 1; display: flex; flex-direction: column; justify-content: space-between; margin-left: -1px; padding: 48px 40px; overflow: hidden; background: var(--fb-beyaz); border: 1px solid #a3adaf; transition: .4s var(--fb-egri); } @media (max-width: 1399px) { .fbart-hk-vizyon-kart { padding: 48px 20px; } } .fbart-hk-vizyon-kart-arka { position: absolute; bottom: 0; left: 0; z-index: -1; width: 100%; opacity: 0; transform: translateY(50px); transition: .4s var(--fb-egri); } .fbart-hk-vizyon-kart-baslik { margin-bottom: 18px; font-size: 24px; font-weight: 500; letter-spacing: -.02em; transition: .4s var(--fb-egri); } .fbart-hk-vizyon-kart-metin { margin-bottom: 165px; opacity: .8; transition: .4s var(--fb-egri); } @media (max-width: 1199px) { .fbart-hk-vizyon-kart-metin { margin-bottom: 100px; } } .fbart-hk-vizyon-kart-no { margin: 0; font-size: 95px; font-weight: 700; line-height: .75; text-align: right; -webkit-text-stroke: 1px #a3adaf; -webkit-text-fill-color: transparent; transition: .4s var(--fb-egri); } .fbart-hk-vizyon-kart:hover { background: var(--fb-koyu); } .fbart-hk-vizyon-kart:hover .fbart-hk-vizyon-kart-baslik, .fbart-hk-vizyon-kart:hover .fbart-hk-vizyon-kart-metin { color: var(--fb-beyaz); } .fbart-hk-vizyon-kart:hover .fbart-hk-vizyon-kart-arka { opacity: 1; transform: translateY(0); } /* ── HİZMETLER · KARTLAR ── */ .fbart-hz { margin-top: 70px; padding: 100px 0 110px; background: #f5f5f5; } .fbart-hz-liste { display: flex; flex-wrap: wrap; justify-content: center; gap: 30px; } .fbart-hz-kart { position: relative; z-index: 0; display: flex; flex: 0 0 calc((100% - 60px) / 3); flex-direction: column; align-items: center; padding: var(--hz-ust) 40px 52px; text-align: center; --hz-ust: 64px; background: var(--fb-beyaz); transition: transform .45s var(--fb-egri); } .fbart-hz-doku { position: absolute; top: 0; right: 0; left: 0; z-index: -1; height: 64%; background-image: radial-gradient(circle at 50% calc(var(--hz-ust) + 42px), transparent 0 61px, rgba(197, 160, 89, .45) 61.5px 62.5px, transparent 63px), linear-gradient(rgba(197, 160, 89, .2) 1px, transparent 1px), linear-gradient(90deg, rgba(197, 160, 89, .2) 1px, transparent 1px), linear-gradient(rgba(197, 160, 89, .08) 1px, transparent 1px), linear-gradient(90deg, rgba(197, 160, 89, .08) 1px, transparent 1px); background-position: 0 0, center -1px, center -1px, center -1px, center -1px; background-size: auto, 40px 40px, 40px 40px, 8px 8px, 8px 8px; -webkit-mask-image: linear-gradient(to bottom, #000 0%, rgba(0, 0, 0, .55) 50%, transparent 100%); mask-image: linear-gradient(to bottom, #000 0%, rgba(0, 0, 0, .55) 50%, transparent 100%); opacity: .75; transition: opacity .45s var(--fb-egri); } .fbart-hz-kose { position: absolute; width: 20px; height: 20px; border: 0 solid var(--fb-altin); pointer-events: none; transition: transform .45s var(--fb-egri); } .fbart-hz-kose.is-sol-ust { top: 14px; left: 14px; border-top-width: 1.5px; border-left-width: 1.5px; } .fbart-hz-kose.is-sag-ust { top: 14px; right: 14px; border-top-width: 1.5px; border-right-width: 1.5px; } .fbart-hz-kose.is-sol-alt { bottom: 14px; left: 14px; border-bottom-width: 1.5px; border-left-width: 1.5px; } .fbart-hz-kose.is-sag-alt { right: 14px; bottom: 14px; border-right-width: 1.5px; border-bottom-width: 1.5px; } .fbart-hz-ikon { display: grid; place-items: center; width: 84px; height: 84px; margin-bottom: 34px; font-size: 64px; color: var(--fb-koyu); transition: transform .45s var(--fb-egri); } .fbart-hz-ikon img { width: 100%; height: 100% !important; object-fit: contain; } .fbart-hz-baslik { margin: 0 0 14px; font-family: var(--fb-font-baslik); font-size: 21px; font-weight: 800; line-height: 1.2; letter-spacing: .01em; text-transform: uppercase; text-wrap: balance; color: var(--fb-koyu); } .fbart-hz-link { color: inherit; outline: none; } .fbart-hz-link::after { content: ""; position: absolute; inset: 0; z-index: 1; } .fbart-hz-link:focus-visible::after { outline: 2px solid var(--fb-altin); outline-offset: 4px; } .fbart-hz-ozet { max-width: 34ch; margin: 0 0 32px; font-size: 16px; line-height: 1.7; color: #5a5a5a; text-wrap: pretty; } .fbart-hz-btn { margin: auto 0 0; padding: 10px 26px; font-size: 16px; pointer-events: none; } @media (hover: hover) { .fbart-hz-kart:hover { transform: translateY(-6px); } .fbart-hz-kart:hover .fbart-hz-doku { opacity: 1; } .fbart-hz-kart:hover .fbart-hz-ikon { transform: translateY(-4px); } .fbart-hz-kart:hover .is-sol-ust { transform: translate(-6px, -6px); } .fbart-hz-kart:hover .is-sag-ust { transform: translate(6px, -6px); } .fbart-hz-kart:hover .is-sol-alt { transform: translate(-6px, 6px); } .fbart-hz-kart:hover .is-sag-alt { transform: translate(6px, 6px); } .fbart-hz-kart:hover .fbart-btn { border-color: var(--fb-altin); } .fbart-hz-kart:hover .fbart-btn-kutu { transform: scale(1); } .fbart-hz-kart:hover .fbart-btn-yazi::before { opacity: 0; transform: translateY(-100%); } .fbart-hz-kart:hover .fbart-btn-yazi::after { opacity: 1; transform: translateY(0); } } @media (max-width: 1199px) { .fbart-hz-kart { --hz-ust: 56px; padding-right: 28px; padding-bottom: 44px; padding-left: 28px; } } @media (max-width: 991px) { .fbart-hz { margin-top: 50px; padding: 70px 0 80px; } .fbart-hz-kart { flex-basis: calc((100% - 30px) / 2); } } @media (max-width: 575px) { .fbart-hz-liste { gap: 20px; } .fbart-hz-kart { --hz-ust: 52px; flex-basis: 100%; padding-right: 24px; padding-left: 24px; } } @media (prefers-reduced-motion: reduce) { .fbart-hz-kart, .fbart-hz-ikon, .fbart-hz-kose { transition: none; } .fbart-hz-kart:hover, .fbart-hz-kart:hover .fbart-hz-ikon, .fbart-hz-kart:hover .fbart-hz-kose { transform: none; } } /* ── ORTAK · PROJE SEKMELERİ ── */ .fbart-sekme-alan { max-width: 1480px; margin: 30px auto 0; } .fbart-sekme { display: grid; grid-template-columns: 1fr 1.25fr; align-items: center; } @media (max-width: 991px) { .fbart-sekme { grid-template-columns: 1fr; gap: 50px; } } .fbart-sekme-btn { position: relative; z-index: 1; display: block; font-family: var(--fb-font-baslik); font-size: 50px; font-weight: 200; line-height: 1.9; letter-spacing: -.03em; transition: .5s; } @media (min-width: 1400px) and (max-width: 1599px) { .fbart-sekme-btn { font-size: 40px; } } @media (min-width: 1200px) and (max-width: 1399px) { .fbart-sekme-btn { font-size: 30px; } } @media (max-width: 1199px) { .fbart-sekme-btn { font-size: 25px; } } .fbart-sekme-btn:not(:last-child) { margin-bottom: 20px; } .fbart-sekme-btn::after { content: ""; position: absolute; top: 0; left: 0; z-index: -2; width: 220px; height: 100%; background: #efefef; border-radius: 50px 0 0 50px; opacity: 0; transition: .5s; } .fbart-sekme-kucuk { position: absolute; bottom: 0; left: 0; z-index: -1; width: 123px; max-width: 100%; opacity: 0; transition: .5s; } .fbart-sekme-yil { margin-left: 20px; font-size: 15px; font-weight: 400; letter-spacing: 2px; opacity: 0; transform: translateY(-13px); transition: .5s; } .fbart-sekme-ok { position: absolute; top: 44%; left: 93%; width: 185px; opacity: 0; transform: translateY(-50%); transition: .5s; } .fbart-sekme-btn.is-aktif { padding-left: 90px; font-weight: 600; } .fbart-sekme-btn.is-aktif::after { left: -75px; opacity: 1; } .fbart-sekme-btn.is-aktif .fbart-sekme-kucuk { left: -76px; opacity: 1; } .fbart-sekme-btn.is-aktif .fbart-sekme-ok { left: 105%; opacity: 1; } .fbart-sekme-btn.is-aktif .fbart-sekme-yil { opacity: 1; } @media (max-width: 991px) { .fbart-sekme-ok { display: none; } } @media (max-width: 767px) { .fbart-sekme-btn::after, .fbart-sekme-kucuk { display: none; } .fbart-sekme-btn.is-aktif { padding-left: 0; } } .fbart-sekme-panel { opacity: 0; transition: opacity .15s linear; } .fbart-sekme-panel.is-goster { opacity: 1; } .fbart-sekme-oge { position: relative; z-index: 1; perspective: 2000px; transform-style: preserve-3d; } .fbart-sekme-gorsel { transform: translateY(50px); transition: var(--fb-gecis); } .fbart-sekme-tablo { position: relative; z-index: 1; display: grid; grid-template-columns: 1fr 1fr .7fr; margin-top: -27px; overflow: hidden; background: var(--fb-beyaz); border: 1px solid var(--fb-siyah); transform: rotateX(-39deg) translateY(60px); transform-origin: 50% 100%; transition: all .5s var(--fb-egri-2) .25s; } .fbart-sekme-panel.is-goster .fbart-sekme-gorsel { transform: translateY(0); } .fbart-sekme-panel.is-goster .fbart-sekme-tablo { transform: rotateX(0) translateY(0); } .fbart-sekme-tablo-baslik { margin: 0; padding: 22px 10px; font-size: 14px; font-weight: 900; text-align: center; text-transform: uppercase; border-right: 1px solid var(--fb-siyah); border-bottom: 1px solid var(--fb-siyah); } .fbart-sekme-tablo-deger { margin: 0; padding: 11px 10px; font-family: var(--fb-font-baslik); font-size: 15px; font-weight: 500; line-height: 1.555; text-align: center; color: #545454; border-right: 1px solid var(--fb-siyah); } .fbart-sekme-tarih { display: grid; grid-template-columns: 1fr 1fr; } @media (min-width: 768px) and (max-width: 1399px) { .fbart-sekme-tarih { height: 100%; } } @media (max-width: 767px) { .fbart-sekme-tablo { grid-template-columns: 1fr; } .fbart-sekme-tablo-baslik { border-right: 0; } .fbart-sekme-tablo-deger { border-bottom: 1px solid var(--fb-siyah); } } .fbart-sekme-paylas { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; padding: 10px; } .fbart-paylas { display: inline-flex; flex-wrap: wrap; gap: 10px; } .fbart-paylas a { display: inline-flex; flex: 0 0 auto; align-items: center; justify-content: center; width: 30px; height: 30px; font-size: 14px; color: var(--fb-siyah); border: 1px solid var(--fb-siyah); opacity: .7; } .fbart-sekme-dekor { margin-top: -150px; line-height: 0; } /* ── ORTAK · İLETİŞİM BLOĞU ── */ .fbart-ib { position: relative; z-index: 1; padding: 140px 0 100px; } .fbart-ib-zemin { position: absolute; top: 0; left: 0; z-index: -1; width: 100%; height: calc(100% - 260px); background: #f5f5f5; } @media (max-width: 991px) { .fbart-ib-zemin { height: calc(100% - 220px); } } .fbart-ib-baslik { margin-bottom: 45px; text-align: center; } .fbart-ib-izgara { display: grid; grid-template-columns: 1fr 1fr; gap: 110px; } @media (min-width: 992px) and (max-width: 1399px) { .fbart-ib-izgara { gap: 50px; } } @media (max-width: 991px) { .fbart-ib-izgara { grid-template-columns: 1fr; gap: 50px; } } .fbart-ib-gorsel { height: 635px; } @media (min-width: 576px) and (max-width: 767px) { .fbart-ib-gorsel { height: 500px; } } @media (max-width: 575px) { .fbart-ib-gorsel { height: 400px; } } .fbart-ib-kucuk { position: relative; z-index: 1; max-width: 295px; height: 315px; margin: -230px 0 0 auto; padding: 50px; text-align: right; } .fbart-ib-kucuk-arka { position: absolute; bottom: 0; left: 0; z-index: -1; width: 100%; height: 100%; } .fbart-ib-form { margin-bottom: 100px; } /* ── ORTAK · İÇERİK BLOKLARI ── */ .fbb-sayfa { display: grid; grid-template-columns: minmax(0, 1fr) 370px; align-items: start; gap: 80px; padding: 120px 0 110px; } @media (max-width: 1399px) { .fbb-sayfa { grid-template-columns: minmax(0, 1fr) 330px; gap: 50px; } } @media (max-width: 991px) { .fbb-sayfa { grid-template-columns: minmax(0, 1fr); gap: 70px; padding: 80px 0 90px; } } .fbb-giris, .fbb-bolum { scroll-margin-top: 110px; } .fbb-kapak { aspect-ratio: 16 / 9; margin-bottom: 50px; } .fbb-giris-baslik { margin: 0 0 20px; font-family: var(--fb-font-baslik); font-size: 48px; font-weight: 600; line-height: 1.08; letter-spacing: -.03em; color: var(--fb-koyu); } .fbb-giris-ozet { max-width: 62ch; margin: 0; font-size: 20px; line-height: 1.65; color: var(--fb-gri-koyu); } .fbb-sol > .fbb-bloklar { margin-top: 70px; } .fbb-bloklar:not(.is-genis) > .fbb-bolum + .fbb-bolum { margin-top: 70px; } .fbb-baslik { margin: 0 0 22px; font-family: var(--fb-font-baslik); font-size: 36px; font-weight: 600; line-height: 1.15; letter-spacing: -.03em; color: var(--fb-koyu); } .fbb-metin p, .fbb-giris-metin { max-width: 70ch; margin: 0 0 18px; font-size: 17px; line-height: 1.8; color: #4d4d4d; } .fbb-metin p:last-child { margin-bottom: 0; } .fbb-giris-metin { margin: -6px 0 32px; } @media (max-width: 767px) { .fbb-giris-baslik { font-size: 34px; } .fbb-giris-ozet { font-size: 18px; } .fbb-baslik { font-size: 28px; } } .fbb-slider-cerceve { aspect-ratio: 16 / 10; background: #eee; } .fbb-slider-track { display: flex; height: 100%; transition: transform .8s var(--fb-egri); } .fbb-slider-track img { flex: 0 0 100%; width: 100%; height: 100% !important; object-fit: cover; } .fbb-slider-alt { display: flex; align-items: center; gap: 24px; margin-top: 22px; } .fbb-slider-sayac { flex: 0 0 auto; font-family: var(--fb-font-baslik); font-size: 16px; color: #8a8a8a; } .fbb-slider-sayac b { font-weight: 700; color: var(--fb-koyu); } .fbb-slider-cizgi { position: relative; flex: 1; height: 2px; background: #e3e3e3; } .fbb-slider-cizgi span { position: absolute; top: 0; left: 0; height: 100%; background: var(--fb-altin); transition: width .8s var(--fb-egri); } .fbb-slider-btn { display: inline-flex; flex: 0 0 auto; align-items: center; justify-content: center; width: 52px; height: 52px; font-size: 18px; color: var(--fb-koyu); border: 1px solid rgba(6, 6, 6, .2); border-radius: 50%; transition: background-color .4s var(--fb-egri), border-color .4s var(--fb-egri), color .4s var(--fb-egri); } .fbb-slider-btn:not(.is-sonraki) svg { transform: rotate(180deg); } .fbb-slider-btn:hover { color: var(--fb-beyaz); background: var(--fb-koyu); border-color: var(--fb-koyu); } .fbb-oz-liste { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; } .fbb-oz-kart { padding: 34px 30px 32px; background: var(--fb-beyaz); border: 1px solid #e2e2e2; transition: background-color .4s var(--fb-egri), border-color .4s var(--fb-egri); } .fbb-oz-ikon { display: inline-flex; align-items: center; justify-content: center; width: 52px; height: 52px; margin-bottom: 22px; font-size: 22px; color: var(--fb-altin); border: 1px solid rgba(197, 160, 89, .5); border-radius: 50%; transition: background-color .4s var(--fb-egri), color .4s var(--fb-egri); } .fbb-oz-ikon img { width: 26px; height: 26px !important; object-fit: contain; } .fbb-oz-kart h3, .fbb-sr-adim h3 { margin: 0 0 10px; font-family: var(--fb-font-baslik); font-size: 20px; font-weight: 600; line-height: 1.25; letter-spacing: -.01em; color: var(--fb-koyu); transition: color .4s var(--fb-egri); } .fbb-oz-kart p, .fbb-sr-adim p { margin: 0; font-size: 15.5px; line-height: 1.7; color: #555; transition: color .4s var(--fb-egri); } .fbb-oz-kart:hover, .fbb-sr-adim:hover { background: var(--fb-koyu); border-color: var(--fb-koyu); } .fbb-oz-kart:hover h3, .fbb-sr-adim:hover h3 { color: var(--fb-beyaz); } .fbb-oz-kart:hover p, .fbb-sr-adim:hover p { color: rgba(255, 255, 255, .75); } .fbb-oz-kart:hover .fbb-oz-ikon { color: var(--fb-beyaz); background: var(--fb-altin); } @media (max-width: 575px) { .fbb-oz-liste { grid-template-columns: minmax(0, 1fr); } } .fbb-sr-liste li + li { margin-top: 16px; } .fbb-sr-adim { display: flex; align-items: flex-start; gap: 30px; padding: 26px 30px; border: 1px solid rgba(6, 6, 6, .2); border-radius: 6px; transition: background-color .4s var(--fb-egri), border-color .4s var(--fb-egri); } .fbb-sr-adim h3 { margin-top: 6px; font-size: 22px; font-weight: 500; } .fbb-sr-no { flex: 0 0 auto; min-width: 44px; font-family: var(--fb-font-baslik); font-size: 48px; font-weight: 800; line-height: 1; color: var(--fb-koyu); opacity: .1; transition: color .4s var(--fb-egri), opacity .4s var(--fb-egri); } .fbb-sr-adim:hover .fbb-sr-no { color: var(--fb-altin); opacity: 1; } @media (max-width: 575px) { .fbb-sr-adim { gap: 18px; padding: 22px 20px; } .fbb-sr-no { min-width: 30px; font-size: 36px; } } .fbb-sss { padding: 110px 0 100px; border-top: 1px solid #ececec; } .fbb-sss-baslik { max-width: 760px; margin-bottom: 50px; } .fbb-sss-izgara { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; gap: 16px 30px; } .fbb-sss-oge { background: var(--fb-beyaz); border: 1px solid rgba(6, 6, 6, .15); transition: border-color .4s var(--fb-egri); } .fbb-sss-oge.is-acik { border-color: var(--fb-altin); } .fbb-sss-soru { display: flex; align-items: center; justify-content: space-between; gap: 20px; width: 100%; padding: 22px 26px; font-family: var(--fb-font-baslik); font-size: 18px; font-weight: 600; line-height: 1.35; text-align: left; color: var(--fb-koyu); } .fbb-sss-arti { position: relative; flex: 0 0 auto; width: 40px; height: 40px; color: var(--fb-koyu); border: 1px solid rgba(6, 6, 6, .2); border-radius: 50%; transition: transform .5s var(--fb-egri), background-color .4s var(--fb-egri), border-color .4s var(--fb-egri), color .4s var(--fb-egri); } .fbb-sss-arti::before, .fbb-sss-arti::after { content: ""; position: absolute; top: 50%; left: 50%; width: 14px; height: 1.5px; background: currentColor; transform: translate(-50%, -50%); } .fbb-sss-arti::after { transform: translate(-50%, -50%) rotate(90deg); } .fbb-sss-oge.is-acik .fbb-sss-arti { color: var(--fb-beyaz); background: var(--fb-altin); border-color: var(--fb-altin); transform: rotate(45deg); } .fbb-sss-cevap { max-height: 0; overflow: hidden; transition: max-height .5s var(--fb-egri); } .fbb-sss-cevap p { margin: 0; padding: 0 26px 24px; font-size: 16px; line-height: 1.75; color: #555; } @media (max-width: 767px) { .fbb-sss { padding: 80px 0 70px; } .fbb-sss-izgara { grid-template-columns: minmax(0, 1fr); } .fbb-sss-soru { padding: 18px 20px; font-size: 17px; } } .fbb-form { position: relative; z-index: 1; padding: 120px 0 110px; } .fbb-form-zemin { position: absolute; inset: 0; z-index: -1; background: #f5f5f5; } .fbb-form-izgara { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; gap: 90px; } .fbb-form-izgara.is-tek { grid-template-columns: minmax(0, 760px); justify-content: center; } .fbb-form-gorsel { height: 640px; } .fbb-form-baslik span { color: var(--fb-altin); } .fbb-form-metin { max-width: 60ch; margin: 18px 0 40px; font-size: 17px; line-height: 1.75; color: #4d4d4d; } .fbb-form .fbart-form-gonder { margin-bottom: 0; } @media (max-width: 1399px) { .fbb-form-izgara { gap: 50px; } } @media (max-width: 991px) { .fbb-form { padding: 80px 0; } .fbb-form-izgara { grid-template-columns: minmax(0, 1fr); } .fbb-form-gorsel { height: 420px; } } .fbb-video { aspect-ratio: 16 / 9; background: #eee; } .fbb-video iframe { display: block; width: 100%; height: 100%; border: 0; } .fbb-instagram { display: flex; justify-content: center; } .fbb-instagram iframe { width: 100%; max-width: 420px; min-height: 560px; border: 0; } .fbb-gorsel { margin: 0; } .fbb-gorsel img { display: block; width: 100%; } .fbb-gorsel figcaption { margin-top: 12px; font-size: 14px; color: #777; } .fbb-musteri-logo { display: flex; flex-direction: column; align-items: center; gap: 14px; padding: 40px; border: 1px solid #e2e2e2; } .fbb-musteri-logo img { max-width: 200px; max-height: 80px; object-fit: contain; } .fbb-musteri-logo p { margin: 0; font-family: var(--fb-font-baslik); font-size: 16px; font-weight: 600; color: var(--fb-koyu); } .fbb-musteri-kart { position: relative; margin: 0; padding: 44px 40px 36px; background: #f5f5f5; } .fbb-musteri-kart-tirnak { position: absolute; top: 26px; right: 30px; font-size: 54px; color: var(--fb-altin); opacity: .5; } .fbb-musteri-kart blockquote { margin: 0 0 24px; } .fbb-musteri-kart blockquote p { margin: 0; font-family: var(--fb-font-baslik); font-size: 22px; font-weight: 500; line-height: 1.5; color: var(--fb-koyu); } .fbb-musteri-kart figcaption { display: flex; align-items: center; gap: 14px; font-size: 14px; color: #6b6b6b; } .fbb-musteri-kart figcaption b { display: block; font-family: var(--fb-font-baslik); font-size: 16px; font-weight: 700; color: var(--fb-koyu); } .fbb-musteri-kart-foto { width: 56px; height: 56px; border-radius: 50%; } .fbb-cg { position: relative; left: 50%; width: 100vw; transform: translateX(-50%); } .fbb-cg-sahne { position: sticky; top: 0; height: 100vh; overflow: hidden; background: #f5f5f5; } .fbb-cg-kare { position: absolute; inset: 0; overflow: hidden; opacity: 0; transform-origin: center center; box-shadow: 0 30px 70px rgba(0, 0, 0, .28); will-change: opacity, transform; } .fbb-cg-kare:first-child { opacity: 1; } .fbb-cg-img { display: block; width: 100%; height: 100% !important; object-fit: cover; transform: scale(1.06); transform-origin: center center; will-change: transform; } .fbb-cg-golge { position: absolute; inset: 0; background: linear-gradient(to top, rgba(0, 0, 0, .75) 0%, rgba(0, 0, 0, .15) 55%, transparent 100%); pointer-events: none; } .fbb-cg-yazi { position: absolute; right: 60px; bottom: 52px; left: 60px; } .fbb-cg-sayac { display: block; margin-bottom: 10px; font-size: 10px; font-weight: 700; letter-spacing: .28em; text-transform: uppercase; color: rgba(197, 160, 89, .9); opacity: 0; transform: translateY(10px); transition: opacity .5s ease, transform .5s ease; } .fbb-cg-baslik { margin: 0; font-family: var(--fb-font-baslik); font-size: clamp(26px, 4vw, 48px); font-weight: 700; line-height: 1.12; letter-spacing: -.02em; color: var(--fb-beyaz); opacity: 0; transform: translateY(16px); transition: opacity .6s .12s ease, transform .6s .12s ease; } .fbb-cg-kare.is-metin .fbb-cg-sayac, .fbb-cg-kare.is-metin .fbb-cg-baslik { opacity: 1; transform: translateY(0); } .fbb-cg-ilerleme { position: absolute; right: 0; bottom: 0; left: 0; z-index: 10; height: 2px; background: rgba(255, 255, 255, .1); } .fbb-cg-cubuk { width: 0; height: 100%; background: var(--fb-altin); transition: width .08s linear; } .fbb-cg-parcalar { position: absolute; inset: 0; display: none; pointer-events: none; will-change: transform; } .fbb-cg-parca { position: absolute; overflow: hidden; will-change: transform, opacity; } .fbb-cg-parca img { position: absolute; display: block; max-width: none; object-fit: cover; } .fbb-kg-kart { position: sticky; overflow: hidden; background: #eee; box-shadow: 0 18px 50px rgba(0, 0, 0, .16); transform-origin: center top; will-change: transform; } .fbb-kg-kart + .fbb-kg-kart { margin-top: 36px; } .fbb-kg-kart img { display: block; width: 100%; aspect-ratio: 16 / 10; object-fit: cover; } .fbb-kg-golge { position: absolute; inset: 0; background: linear-gradient(to top, rgba(0, 0, 0, .5) 0%, transparent 45%); pointer-events: none; } .fbb-kg-baslik { position: absolute; right: 24px; bottom: 18px; left: 24px; margin: 0; font-family: var(--fb-font-baslik); font-size: 20px; font-weight: 600; letter-spacing: -.01em; color: var(--fb-beyaz); } @media (max-width: 768px) { .fbb-cg-yazi { right: 24px; bottom: 28px; left: 24px; } .fbb-cg-baslik { font-size: 22px; } .fbb-kg-kart img { aspect-ratio: 4 / 3; } } .fbb-yan { align-self: stretch; } .fbb-yan-ic { position: sticky; top: 120px; display: flex; flex-direction: column; gap: 30px; } @media (max-width: 991px) { .fbb-yan-ic { position: static; } } .fbb-kutu { padding: 34px 32px; background: var(--fb-beyaz); border: 1px solid #e2e2e2; } .fbb-kutu-baslik { position: relative; margin: 0 0 18px; padding-bottom: 14px; font-family: var(--fb-font-baslik); font-size: 17px; font-weight: 700; letter-spacing: .02em; text-transform: uppercase; color: var(--fb-koyu); border-bottom: 1px solid #e2e2e2; } .fbb-kutu-baslik::after { content: ""; position: absolute; bottom: -1px; left: 0; width: 46px; height: 1px; background: var(--fb-altin); } .fbb-icindekiler a { display: flex; gap: 14px; padding: 11px 0; font-family: var(--fb-font-baslik); font-size: 16px; font-weight: 500; line-height: 1.4; color: #6b6b6b; transition: color .3s; } .fbb-icindekiler-no { flex: 0 0 auto; width: 22px; padding-top: 2px; font-size: 13px; font-weight: 700; color: #9d9d9d; transition: color .3s; } .fbb-icindekiler a:hover, .fbb-icindekiler a.is-aktif { color: var(--fb-koyu); } .fbb-icindekiler a.is-aktif .fbb-icindekiler-no { color: var(--fb-altin); } .fbb-hizmetler li + li { border-top: 1px solid #ececec; } .fbb-hizmetler a { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 15px 0; font-family: var(--fb-font-baslik); font-size: 16px; font-weight: 600; line-height: 1.35; color: var(--fb-koyu); transition: color .3s; } .fbb-hizmetler a svg { flex: 0 0 auto; color: var(--fb-altin); transition: transform .4s var(--fb-egri); } .fbb-hizmetler a:hover svg { transform: translateX(4px); } .fbb-hizmetler a.is-aktif { color: var(--fb-altin); } .fbb-kunye { margin: 0; } .fbb-kunye div { display: flex; align-items: baseline; justify-content: space-between; gap: 18px; padding: 13px 0; } .fbb-kunye div + div { border-top: 1px solid #ececec; } .fbb-kunye dt { flex: 0 0 auto; font-size: 12px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: #8a6d3b; } .fbb-kunye dd { margin: 0; font-family: var(--fb-font-baslik); font-size: 16px; font-weight: 600; line-height: 1.35; text-align: right; color: var(--fb-koyu); } .fbb-sosyal { display: flex; flex-wrap: wrap; gap: 10px; } .fbb-sosyal a { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; font-size: 18px; color: var(--fb-koyu); border: 1px solid #dcdcdc; border-radius: 50%; transition: background-color .4s var(--fb-egri), border-color .4s var(--fb-egri), color .4s var(--fb-egri); } .fbb-sosyal a:hover { color: var(--fb-beyaz); background: var(--fb-altin); border-color: var(--fb-altin); } .fbb-cta { position: relative; z-index: 1; padding: 48px 34px 44px; overflow: hidden; isolation: isolate; } .fbb-cta::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(to top, rgba(24, 24, 24, .94) 15%, rgba(24, 24, 24, .58)); } .fbb-cta-baslik { margin: 0 0 14px; font-family: var(--fb-font-baslik); font-size: 28px; font-weight: 600; line-height: 1.15; letter-spacing: -.02em; color: var(--fb-beyaz); } .fbb-cta-metin { margin: 0 0 22px; font-size: 16px; line-height: 1.7; color: rgba(255, 255, 255, .82); } .fbb-cta-tel { display: inline-flex; align-items: center; gap: 10px; margin-bottom: 34px; font-family: var(--fb-font-baslik); font-size: 20px; font-weight: 600; color: var(--fb-beyaz); } .fbb-cta-tel svg { color: var(--fb-altin); } @media (prefers-reduced-motion: reduce) { .fbb-cg-img { transform: none !important; } .fbb-slider-track, .fbb-slider-cizgi span, .fbb-sss-cevap, .fbb-sss-arti, .fbb-hizmetler a svg { transition: none; } } /* ── PROJELER · SAYFA ── */ .fbart-pr-bolum { padding: 10px; } .fbart-pr-ic { display: flex; flex-direction: column; gap: 20px; max-width: 1140px; margin: 0 auto; } @media (min-width: 768px) { .fbart-pr-bolum.is-genis .fbart-pr-ic { max-width: 1391px; } } .fbart-pr-tum-baslik { margin: 0; font-family: var(--fb-font-baslik); font-size: 55px; font-weight: 600; line-height: 1; letter-spacing: -.03em; text-align: center; color: #181818; } @media (max-width: 767px) { .fbart-pr-tum-baslik { font-size: 38px; } } /* ── PROJELER · DAKTİLO ── */ .fbdk1 { position: relative; overflow: hidden; padding: 70px 0 130px; color: #1d1d1d; } .fbdk-kolonlar { display: flex; align-items: flex-end; justify-content: space-between; gap: 56px; } .fbdk-sol { flex: 1 1 auto; min-width: 0; } .fbdk-baslik { display: flex; flex-direction: column; align-items: flex-start; margin: 0 0 28px; font-family: var(--fb-font-baslik); font-size: clamp(36px, 4.8vw, 62px); font-weight: 600; line-height: 1.16; letter-spacing: -.02em; color: #1d1d1d; } .fbdk-daktilo { min-height: 1.16em; } .fbdk-imlec { display: inline-block; width: 3px; height: .82em; margin-left: 7px; background: var(--fb-altin); transform: translateY(.09em); animation: fbdk-yanip 1.05s steps(2, start) infinite; } @keyframes fbdk-yanip { to { visibility: hidden; } } .fbdk-metin { max-width: 620px; margin: 0; font-size: 16px; line-height: 1.75; color: rgba(29, 29, 29, .65); } .fbdk-yan { display: flex; flex: 0 1 440px; flex-direction: column; align-items: flex-end; text-align: right; } .fbdk-yan-etiket { display: inline-flex; align-items: center; gap: 10px; margin: 0 0 16px; font-size: 11px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: #9a7b4f; } .fbdk-yan-etiket::after { content: ""; width: 34px; height: 1px; background: var(--fb-altin); } .fbdk-yan p { margin: 0; font-size: 16px; line-height: 1.8; color: rgba(29, 29, 29, .65); } .fbdk-filigran { position: absolute; bottom: -.16em; left: 0; font-family: var(--fb-font-baslik); font-size: clamp(90px, 15vw, 260px); font-weight: 800; line-height: 1; letter-spacing: -.02em; text-transform: uppercase; color: rgba(29, 29, 29, .05); white-space: nowrap; pointer-events: none; user-select: none; } @media (prefers-reduced-motion: reduce) { .fbdk-imlec { animation: none; } } @media (max-width: 900px) { .fbdk1 { padding: 40px 0 90px; } .fbdk-kolonlar { flex-direction: column; align-items: flex-start; gap: 34px; } .fbdk-baslik { font-size: clamp(28px, 8vw, 40px); } .fbdk-yan { flex: 1 1 auto; align-items: flex-start; text-align: left; } } /* ── PROJELER · SON PROJELER ── */ .fbsp { --fbsp-yazi: #1d1d1d; position: relative; left: 50%; width: 100vw; color: var(--fbsp-yazi); transform: translateX(-50%); } .fbsp-sahne { position: sticky; top: 0; display: flex; flex-direction: column; height: 100vh; overflow: hidden; } .fbsp-ic { width: 100%; max-width: 1380px; margin: 0 auto; padding: 0 40px; } .fbsp-etiket-satir { display: flex; align-items: center; gap: 26px; padding: 34px 0 10px; } .fbsp-etiket { flex-shrink: 0; font-size: 12px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; white-space: nowrap; color: var(--fbsp-yazi); } .fbsp-cizgi-alan { position: relative; flex: 1; height: 36px; } .fbsp-cizgi { position: absolute; top: 50%; right: 36px; left: 0; height: 1px; background: rgba(29, 29, 29, .35); transform: scaleX(0); transform-origin: left center; } .fbsp-ikon { position: absolute; top: 50%; left: 0; display: block; width: auto; height: 32px !important; transform: translate(0, -50%); } .fbsp.is-canlan .fbsp-cizgi { transform: scaleX(1); transition: transform 1.7s cubic-bezier(.65, 0, .35, 1); } .fbsp.is-canlan .fbsp-ikon { transform: translate(var(--fbsp-mesafe, 0px), -50%); transition: transform 1.7s cubic-bezier(.65, 0, .35, 1); } .fbsp-orta { position: relative; flex: 1; min-height: 0; } .fbsp-baslik { position: absolute; inset: 0; z-index: 5; display: flex; flex-direction: column; align-items: center; justify-content: center; pointer-events: none; } .fbsp-ust, .fbsp-yarim { display: inline-block; font-family: var(--fb-font-baslik); font-size: clamp(70px, 12.5vw, 210px); font-weight: 900; line-height: .92; letter-spacing: -.03em; text-transform: uppercase; white-space: pre; color: var(--fbsp-yazi); will-change: transform, opacity; } .fbsp-alt { display: flex; } .fbsp-nokta { position: absolute; top: 11%; left: 58%; z-index: 6; width: 9px; height: 9px; background: var(--fb-altin); border-radius: 50%; will-change: transform; } .fbsp-deste { position: absolute; inset: 0; z-index: 10; } .fbsp-kart { position: absolute; top: 50%; left: 50%; display: block; width: min(100%, 124vh); aspect-ratio: 2 / 1; overflow: hidden; background: #eceae5; box-shadow: 0 -14px 32px rgba(0, 0, 0, .13), 0 28px 66px rgba(0, 0, 0, .22); transform: translate(-50%, -50%); cursor: none; will-change: transform, opacity; } .fbsp-kart img { display: block; width: 100%; height: 100% !important; object-fit: cover; } .fbsp-imlec { position: fixed; top: -200px; left: -200px; z-index: 9000; display: flex; align-items: center; justify-content: center; width: 118px; height: 118px; font-size: 14.5px; font-weight: 500; letter-spacing: .02em; color: var(--fb-beyaz); background: rgba(16, 16, 16, .92); border-radius: 50%; opacity: 0; pointer-events: none; transform: translate(-50%, -50%) scale(.35); transition: opacity .25s ease, transform .4s cubic-bezier(.25, .46, .45, .94); will-change: transform, opacity; } .fbsp-imlec.is-acik { opacity: 1; transform: translate(-50%, -50%) scale(1); } @media (hover: none), (pointer: coarse) { .fbsp-imlec { display: none; } .fbsp-kart { cursor: pointer; } } .fbsp-bilgi-alan { position: absolute; top: var(--fbsp-bilgi-top, 76vh); right: 0; left: 0; z-index: 600; opacity: 0; will-change: opacity; } .fbsp-bilgi { display: flex; align-items: flex-end; justify-content: space-between; gap: 40px; padding: 12px 0 14px; } .fbsp-bilgi-baslik { display: block; margin: 0; font-family: var(--fb-font-baslik); font-size: clamp(20px, 2.2vw, 30px); font-weight: 600; letter-spacing: -.015em; color: var(--fbsp-yazi); transition: color .25s ease; } .fbsp-bilgi-baslik:hover { color: #9a7b4f; } .fbsp-bilgi-sag { display: flex; flex-shrink: 0; gap: 56px; } .fbsp-bilgi-oge { display: flex; flex-direction: column; gap: 6px; } .fbsp-bilgi-etiket { font-size: 12.5px; color: rgba(29, 29, 29, .55); } .fbsp-bilgi-deger { font-size: 15.5px; font-weight: 500; color: var(--fbsp-yazi); } .fbsp-bilgi-cizgi { height: 1px; background: rgba(0, 0, 0, .1); } .fbsp.is-duz .fbsp-baslik { display: none; } .fbsp.is-duz .fbsp-bilgi-alan { opacity: 1; } @media (prefers-reduced-motion: reduce) { .fbsp-cizgi { transform: scaleX(1) !important; transition: none !important; } .fbsp-ikon { transform: translate(var(--fbsp-mesafe, 0px), -50%) !important; transition: none !important; } } @media (max-width: 768px) { .fbsp-ic { padding: 0 18px; } .fbsp-etiket-satir { gap: 14px; padding-top: 20px; } .fbsp-ikon { height: 24px !important; } .fbsp-ust, .fbsp-yarim { font-size: 17vw; } .fbsp-kart { width: 100%; aspect-ratio: 16 / 10; box-shadow: 0 14px 36px rgba(0, 0, 0, .16); } .fbsp-bilgi { flex-direction: column; align-items: flex-start; gap: 14px; padding: 18px 0 16px; } .fbsp-bilgi-sag { gap: 28px; } } /* ── PROJELER · IZGARA ── */ .fbart-pr-bolum.is-izgara { margin-top: 60px; padding: 100px 10px 110px; background: #f5f5f5; } .fbart-pr-bolum.is-izgara .fbart-pr-ic { gap: 56px; } .fbp-kart.fbart-hz-kart { padding: 30px 30px 48px; } .fbp-kart .fbart-hz-doku, .fbbl-kart .fbart-hz-doku, .fbyr-kart .fbart-hz-doku, .fbart-yrm-kart .fbart-hz-doku { height: 100%; background-image: linear-gradient(rgba(197, 160, 89, .2) 1px, transparent 1px), linear-gradient(90deg, rgba(197, 160, 89, .2) 1px, transparent 1px), linear-gradient(rgba(197, 160, 89, .08) 1px, transparent 1px), linear-gradient(90deg, rgba(197, 160, 89, .08) 1px, transparent 1px); background-position: center -1px; background-size: 40px 40px, 40px 40px, 8px 8px, 8px 8px; } .fbp-kart-gorsel { position: relative; align-self: stretch; aspect-ratio: 4 / 3; margin-bottom: 30px; overflow: hidden; background: #ebe7e0; } .fbp-kart-gorsel img { position: absolute; inset: 0; display: block; width: 100% !important; height: 100% !important; object-fit: cover !important; transition: transform .9s var(--fb-egri); } .fbp-kart-hizmet { margin: 0 0 10px; font-size: 12px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: #8a6d3b; } .fbp-kart .fbart-hz-baslik { margin-bottom: 30px; } @media (hover: hover) { .fbp-kart:hover .fbp-kart-gorsel img { transform: scale(1.05); } } @media (max-width: 991px) { .fbart-pr-bolum.is-izgara { margin-top: 40px; padding: 70px 10px 80px; } .fbart-pr-bolum.is-izgara .fbart-pr-ic { gap: 40px; } } @media (max-width: 575px) { .fbp-kart.fbart-hz-kart { padding: 24px 24px 40px; } } @media (prefers-reduced-motion: reduce) { .fbp-kart-gorsel img { transition: none; } .fbp-kart:hover .fbp-kart-gorsel img { transform: none; } } /* ── PROJELER · YORUMLAR ── */ .fbt { --fbt-zemin: #f4f1ea; --fbt-yazi: #1f1f1f; position: relative; left: 50%; width: 100vw; padding: 90px 0 70px; overflow: hidden; color: var(--fbt-yazi); background-color: var(--fbt-zemin); background-image: linear-gradient(to bottom, rgba(244, 241, 234, 0) 55%, var(--fbt-zemin) 92%), linear-gradient(rgba(154, 123, 79, .1) 1px, transparent 1px), linear-gradient(90deg, rgba(154, 123, 79, .1) 1px, transparent 1px); background-size: 100% 100%, 52px 52px, 52px 52px; transform: translateX(-50%); } .fbt-ust { max-width: 1200px; margin: 0 auto; padding: 0 40px; } .fbt-etiket-satir { display: flex; align-items: center; gap: 26px; margin-bottom: 44px; } .fbt-etiket { flex-shrink: 0; font-size: 12px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; white-space: nowrap; color: var(--fbt-yazi); } .fbt-cizgi-alan { position: relative; flex: 1; height: 36px; } .fbt-cizgi { position: absolute; top: 50%; right: 36px; left: 0; height: 1px; background: rgba(31, 31, 31, .35); transform: scaleX(0); transform-origin: left center; } .fbt-ikon { position: absolute; top: 50%; left: 0; display: block; width: auto; height: 34px !important; transform: translate(0, -50%); } .fbt.is-canlan .fbt-cizgi { transform: scaleX(1); transition: transform 1.7s cubic-bezier(.65, 0, .35, 1); } .fbt.is-canlan .fbt-ikon { transform: translate(var(--fbt-mesafe, 0px), -50%); transition: transform 1.7s cubic-bezier(.65, 0, .35, 1); } @media (prefers-reduced-motion: reduce) { .fbt-cizgi { transform: scaleX(1) !important; transition: none !important; } .fbt-ikon { transform: translate(var(--fbt-mesafe, 0px), -50%) !important; transition: none !important; } } .fbt-baslik-satir { display: flex; align-items: center; justify-content: space-between; gap: 40px; margin-bottom: 64px; } .fbt-baslik { max-width: 680px; margin: 0; font-family: var(--fb-font-baslik); font-size: clamp(30px, 4.4vw, 54px); font-weight: 600; line-height: 1.18; letter-spacing: -.02em; color: var(--fbt-yazi); } .fbt-buton { flex-shrink: 0; padding: 16px; } .fbt-carousel { position: relative; width: 100%; cursor: grab; } .fbt-carousel.is-tutuyor { cursor: grabbing; } .fbt-track { display: flex; gap: 30px; transition: transform .65s cubic-bezier(.25, .46, .45, .94); will-change: transform; } .fbt-carousel.is-tutuyor .fbt-track { transition: none; } .fbt-kart { display: flex; flex-shrink: 0; align-items: center; gap: 44px; width: clamp(320px, 46vw, 780px); margin: 0; padding: 52px 56px; background: var(--fb-beyaz); box-shadow: 0 14px 44px rgba(0, 0, 0, .07); } .fbt-foto { display: flex; flex-shrink: 0; align-items: center; justify-content: center; width: 112px; height: 112px; overflow: hidden; background: #eeebe6; border-radius: 50%; } .fbt-foto img { display: block; width: 100%; height: 100% !important; object-fit: cover; } .fbt-foto-harf { font-family: var(--fb-font-baslik); font-size: 38px; font-weight: 700; color: #9a7b4f; } .fbt-govde { flex: 1; min-width: 0; } .fbt-metin { margin: 0 0 30px; } .fbt-metin p { margin: 0; font-size: 16px; line-height: 1.85; color: var(--fbt-yazi); } .fbt-isim { margin: 0 0 4px; font-family: var(--fb-font-baslik); font-size: 18px; font-weight: 700; letter-spacing: -.01em; color: var(--fbt-yazi); } .fbt-unvan { margin: 0; font-size: 13px; color: rgba(31, 31, 31, .62); } .fbt-nav { display: flex; align-items: center; justify-content: center; gap: 34px; margin-top: 54px; } .fbt-nav-btn { display: inline-flex; align-items: center; gap: 10px; padding: 12px 4px; font-size: 12px; font-weight: 600; letter-spacing: .28em; text-transform: uppercase; color: rgba(31, 31, 31, .55); transition: color .25s ease; } .fbt-nav-btn:hover { color: var(--fbt-yazi); } .fbt-nav-btn svg { font-size: 13px; } .fbt-progress { position: relative; width: 280px; max-width: 34vw; height: 2px; background: rgba(31, 31, 31, .14); } .fbt-progress-bar { position: absolute; top: 0; left: 0; width: 0; height: 100%; background: var(--fbt-yazi); transition: width .5s cubic-bezier(.25, .46, .45, .94); } @media (max-width: 900px) { .fbt { padding: 60px 0 50px; } .fbt-ust { padding: 0 20px; } .fbt-etiket-satir { gap: 16px; margin-bottom: 30px; } .fbt-ikon { height: 26px !important; } .fbt-baslik-satir { flex-direction: column; align-items: flex-start; gap: 28px; margin-bottom: 40px; } .fbt-kart { flex-direction: column; align-items: flex-start; gap: 22px; width: 86vw; padding: 32px 26px; } .fbt-foto { width: 84px; height: 84px; } .fbt-metin p { font-size: 14.5px; } .fbt-metin { margin-bottom: 18px; } .fbt-nav { gap: 18px; margin-top: 34px; } .fbt-track { gap: 16px; } } /* ── ORTAK · SAYFA BAŞLIĞI · DETAY ── */ .fbart-kirinti.is-detay { padding-top: 180px; } .fbart-kirinti.is-detay .fbart-kirinti-ic { gap: 60px; } .fbart-kirinti.is-detay .fbart-kirinti-baslik { text-align: center; text-wrap: balance; } .fbart-kirinti-geri { display: inline-flex; align-self: flex-start; align-items: center; gap: 12px; font-family: var(--fb-font-baslik); font-size: 18px; letter-spacing: .02em; color: var(--fb-beyaz); transition: color .4s var(--fb-egri), transform .4s var(--fb-egri); } .fbart-kirinti-geri svg { color: var(--fb-altin); } .fbart-kirinti-geri:hover { color: var(--fb-altin); transform: translateX(-3px); } .fbart-kirinti-meta { display: inline-flex; flex-wrap: wrap; align-self: center; align-items: center; justify-content: center; gap: 10px 80px; margin: 50px 0 0; padding: 23px 59px; font-size: 18px; font-weight: 500; line-height: 20px; color: var(--fb-koyu); background: #f5f5f5; } .fbart-kirinti-meta span { display: inline-flex; align-items: center; gap: 8px; } .fbart-kirinti-meta svg { color: var(--fb-altin); } .fbart-kirinti-meta a { color: inherit; transition: color .3s; } .fbart-kirinti-meta a:hover { color: var(--fb-altin); } @media (max-width: 575px) { .fbart-kirinti-meta { gap: 10px 32px; padding: 18px 24px; font-size: 16px; } } /* ── BLOG · LİSTE ── */ @media (min-width: 992px) { .fbart-blog-sayfa .fbb-sayfa { padding: 140px 0 120px; } } .fbbl-liste { display: flex; flex-direction: column; gap: 30px; } .fbbl-kart.fbart-hz-kart { flex: none; align-items: stretch; padding: 32px 32px 44px; text-align: left; } .fbbl-gorsel { position: relative; height: 380px; margin-bottom: 28px; overflow: hidden; background: #ebe7e0; } .fbbl-gorsel img { position: absolute; inset: 0; display: block; width: 100% !important; height: 100% !important; object-fit: cover !important; transition: transform .9s var(--fb-egri); } .fbbl-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 36px; margin: 0 0 14px; font-size: 16px; line-height: 20px; color: #5a5a5a; } .fbbl-meta span { display: inline-flex; align-items: center; gap: 8px; } .fbbl-meta svg { font-size: 18px; color: var(--fb-altin); } .fbbl-baslik { margin: 0 0 14px; font-family: var(--fb-font-baslik); font-size: 32px; font-weight: 600; line-height: 1.25; letter-spacing: -.02em; text-wrap: balance; color: var(--fb-koyu); } .fbbl-ozet { max-width: 62ch; margin: 0 0 30px; font-size: 17px; line-height: 1.7; color: #5a5a5a; } .fbbl-kart .fbart-hz-btn { align-self: flex-start; } @media (hover: hover) { .fbbl-kart:hover .fbbl-gorsel img { transform: scale(1.04); } } .fbbl-bos { margin: 0; font-size: 18px; color: var(--fb-gri-koyu); } .fbbl-sayfalama { margin-top: 40px; } .fbbl-sayfalama .nav-links { display: flex; flex-wrap: wrap; gap: 8px; } .fbbl-sayfalama .page-numbers { display: inline-flex; align-items: center; justify-content: center; min-width: 48px; height: 48px; padding: 0 12px; font-family: var(--fb-font-baslik); font-size: 16px; font-weight: 600; color: var(--fb-koyu); border: 1px solid #e2e2e2; transition: color .3s, background-color .3s, border-color .3s; } .fbbl-sayfalama .page-numbers.current, .fbbl-sayfalama a.page-numbers:hover { color: var(--fb-beyaz); background: var(--fb-altin); border-color: var(--fb-altin); } .fbbl-ara { display: flex; } .fbbl-ara input { flex: 1; min-width: 0; height: 54px; padding: 0 20px; font: inherit; font-size: 16px; color: var(--fb-koyu); background: #f5f5f5; border: 1px solid #e2e2e2; border-right: 0; border-radius: 0; outline: none; transition: border-color .3s; } .fbbl-ara input::placeholder { color: #6b6b6b; } .fbbl-ara input:focus-visible { border-color: var(--fb-altin); } .fbbl-ara button { display: inline-flex; flex: 0 0 54px; align-items: center; justify-content: center; font-size: 20px; color: var(--fb-beyaz); background: var(--fb-altin); border: 0; border-radius: 0; cursor: pointer; transition: background-color .3s; } .fbbl-ara button:hover, .fbbl-ara button:focus-visible { background: var(--fb-koyu); } .fbbl-sayi { margin-left: auto; font-weight: 500; color: #6b6b6b; } .fbbl-son li { display: flex; align-items: center; gap: 16px; padding: 14px 0; } .fbbl-son li:first-child { padding-top: 0; } .fbbl-son li + li { border-top: 1px solid #ececec; } .fbbl-son-gorsel { flex: 0 0 76px; height: 76px; overflow: hidden; background: #ebe7e0; } .fbbl-son-gorsel img { display: block; width: 100% !important; height: 100% !important; object-fit: cover !important; } .fbbl-son-tarih { margin: 0 0 4px; font-size: 13px; font-weight: 600; line-height: 1.3; letter-spacing: .08em; color: #8a6d3b; } .fbbl-son-baslik { font-family: var(--fb-font-baslik); font-size: 16px; font-weight: 600; line-height: 1.35; color: var(--fb-koyu); transition: color .3s; } .fbbl-son-baslik:hover { color: var(--fb-altin); } @media (max-width: 767px) { .fbbl-kart.fbart-hz-kart { padding: 24px 20px 36px; } .fbbl-gorsel { height: 260px; } .fbbl-baslik { font-size: 22px; } } @media (prefers-reduced-motion: reduce) { .fbbl-gorsel img { transition: none; } .fbbl-kart:hover .fbbl-gorsel img { transform: none; } } /* ── BLOG · YAZI ── */ .fbart-yazi-icerik { max-width: 730px; } .fbart-yazi-icerik > :first-child { margin-top: 0; } .fbart-yazi-icerik :is(h2, h3) { scroll-margin-top: 110px; } .fbart-yazi-icerik :is(h2, h3, h4) { margin: 54px 0 24px; font-family: var(--fb-font-baslik); font-weight: 600; line-height: 1.23; color: var(--fb-koyu); } .fbart-yazi-icerik h2 { font-size: 32px; } .fbart-yazi-icerik h3 { font-size: 26px; } .fbart-yazi-icerik h4 { font-size: 28px; } .fbart-yazi-icerik :is(h3, h4) { margin-bottom: 7px; } .fbart-yazi-icerik :is(p, li) { font-size: 18px; line-height: 28px; color: #444; } .fbart-yazi-icerik p { margin: 0 0 16px; } .fbart-yazi-icerik :is(ul, ol) { margin: 0 0 24px; padding-left: 24px; } .fbart-yazi-icerik a { color: #8a6d3b; text-decoration: underline; text-underline-offset: 3px; } .fbart-yazi-icerik img { max-width: 100%; height: auto; } .fbart-yazi-icerik blockquote { margin: 32px 0; padding: 28px 32px; font-size: 20px; background: #f5f5f5; } @media (min-width: 768px) and (max-width: 991px) { .fbart-yazi-icerik h2 { font-size: 30px; } } @media (max-width: 767px) { .fbart-yazi-icerik :is(h2, h3, h4) { font-size: 22px; } } @media (min-width: 576px) and (max-width: 767px) { .fbart-yazi-icerik :is(h2, h3, h4) { font-size: 26px; } } .fbbl-toc { margin-bottom: 40px; background: var(--fb-beyaz); border: 1px solid #e2e2e2; } .fbbl-toc summary { display: flex; align-items: center; gap: 10px; min-height: 56px; padding: 0 22px; font-family: var(--fb-font-baslik); font-size: 16px; font-weight: 700; letter-spacing: .02em; text-transform: uppercase; color: var(--fb-koyu); list-style: none; cursor: pointer; } .fbbl-toc summary::-webkit-details-marker { display: none; } .fbbl-toc summary span { font-size: 13px; font-weight: 500; letter-spacing: 0; text-transform: none; color: #6b6b6b; } .fbbl-toc summary svg { margin-left: auto; font-size: 18px; color: var(--fb-altin); transition: transform .3s var(--fb-egri); } .fbbl-toc[open] summary svg { transform: rotate(180deg); } .fbbl-toc ol { padding: 0 22px 14px; } @media (min-width: 992px) { .fbbl-toc { display: none; } } @media (max-width: 991px) { .fbart-yazi-detay .fbb-yan nav[aria-label="İçindekiler"] { display: none; } } @media (prefers-reduced-motion: reduce) { .fbbl-toc summary svg { transition: none; } } /* ── İLETİŞİM · SAYFA ── */ .fbart-ozl.is-iletisim { max-width: none; padding: 125px 0 0; } .is-iletisim .fbart-ozl-izgara { grid-template-columns: none; grid-auto-columns: minmax(0, 1fr); grid-auto-flow: column; gap: 0; padding: 40px 0; } .is-iletisim .fbart-ozl-oge, .is-iletisim .fbart-ozl-oge:not(:last-child) { padding: 30px 68px; } @media (min-width: 1400px) { .is-iletisim .fbart-ozl-izgara:has(> :nth-child(4)) .fbart-ozl-oge { padding-right: 40px; padding-left: 40px; } } .is-iletisim .fbart-ozl-sosyal { margin-bottom: 16px; } .is-iletisim .fbart-ozl-ikon { height: 64px; font-size: 64px; line-height: 0; color: var(--fb-koyu); } .is-iletisim .fbart-ozl-oge:hover .fbart-ozl-ikon svg { animation: fbart-kutudan 1s ease 1; } .is-iletisim .fbart-ozl-metin { margin-bottom: 16px; } .is-iletisim .fbart-ozl-metin a { color: inherit; transition: color .3s; } .is-iletisim .fbart-ozl-metin a:hover { color: var(--fb-altin); } @media (max-width: 1399px) { .is-iletisim .fbart-ozl-oge, .is-iletisim .fbart-ozl-oge:not(:last-child) { padding: 30px 25px; } } @media (min-width: 768px) and (max-width: 991px) { .is-iletisim .fbart-ozl-izgara { grid-template-columns: 1fr 1fr; grid-auto-flow: row; } .is-iletisim .fbart-ozl-oge:nth-child(2n) { border-right: 0; } .is-iletisim .fbart-ozl-oge:nth-child(-n+2):not(:nth-last-child(-n+1)) { border-bottom: 1px solid #d9d9d9; } } @media (max-width: 767px) { .is-iletisim .fbart-ozl-izgara { grid-template-columns: 1fr; grid-auto-flow: row; padding: 20px 0; } .is-iletisim .fbart-ozl-oge:not(:last-child) { border-right: 0; border-bottom: 1px solid #d9d9d9; } .is-iletisim .fbart-ozl-baslik { margin-bottom: 24px; } .is-iletisim .fbart-ozl-ikon { margin-bottom: 24px; } } @media (prefers-reduced-motion: reduce) { .is-iletisim .fbart-ozl-oge:hover .fbart-ozl-ikon svg { animation: none; } } .fbart-harita { line-height: 0; } .fbart-harita iframe { display: block; width: 100%; height: 662px; border: 0; } .fbart-harita-onay { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 662px; padding: 60px 24px; text-align: center; line-height: 1.6; background-color: #f5f5f5; isolation: isolate; } .fbart-harita-onay::before { content: ""; position: absolute; inset: 0; z-index: -1; background-image: linear-gradient(rgba(197, 160, 89, .2) 1px, transparent 1px), linear-gradient(90deg, rgba(197, 160, 89, .2) 1px, transparent 1px), linear-gradient(rgba(197, 160, 89, .08) 1px, transparent 1px), linear-gradient(90deg, rgba(197, 160, 89, .08) 1px, transparent 1px); background-position: center; background-size: 40px 40px, 40px 40px, 8px 8px, 8px 8px; -webkit-mask-image: radial-gradient(ellipse at center, #000 25%, transparent 72%); mask-image: radial-gradient(ellipse at center, #000 25%, transparent 72%); } .fbart-harita-ikon { width: 64px; height: 64px; margin-bottom: 18px; padding: 17px; color: var(--fb-altin); background: var(--fb-beyaz); border: 1px solid rgba(197, 160, 89, .45); border-radius: 50%; } .fbart-harita-baslik { margin: 0 0 8px; font-family: var(--fb-font-baslik); font-size: 30px; font-weight: 600; line-height: 1.2; color: var(--fb-koyu); } .fbart-harita-metin { max-width: 52ch; margin: 0 0 28px; color: #555; } .fbart-harita-metin a, .fbart-cerez-metin a { color: var(--fb-koyu); text-decoration: underline; text-decoration-color: var(--fb-altin); text-underline-offset: 3px; } @media (max-width: 767px) { .fbart-harita iframe { height: 420px; } .fbart-harita-onay { min-height: 420px; } .fbart-harita-baslik { font-size: 24px; } } /* ── YORUMLAR · SAYFA ── */ .fbart-yorumlar-sayfa { padding: 120px 0; background: #f5f5f5; } .fbyr-liste { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 560px), 632px)); justify-content: center; gap: 30px; } .fbyr-kart { position: relative; z-index: 0; padding: 48px 44px; background: var(--fb-beyaz); } .fbyr-ic { display: grid; grid-template-columns: 120px minmax(0, 1fr); align-items: start; gap: 32px; margin: 0; } .fbyr-foto { display: grid; place-items: center; width: 120px; height: 120px; overflow: hidden; background: #ebe7e0; border-radius: 50%; font-family: var(--fb-font-baslik); font-size: 44px; font-weight: 600; color: #8a6d3b; } .fbyr-foto img { display: block; width: 100% !important; height: 100% !important; object-fit: cover !important; object-position: center top; } .fbyr-metin { margin: 0 0 24px; } .fbyr-metin p { margin: 0; font-size: 18px; line-height: 1.545; color: var(--fb-koyu); } .fbyr-ad { display: block; font-size: 22px; font-weight: 600; line-height: 1.3; color: var(--fb-koyu); } .fbyr-unvan { display: block; margin-top: 4px; font-size: 14px; letter-spacing: .02em; color: #6b6b6b; } .fbyr-bos { margin: 0; font-size: 18px; text-align: center; color: var(--fb-gri-koyu); } @media (max-width: 991px) { .fbart-yorumlar-sayfa { padding: 80px 0 90px; } } @media (max-width: 575px) { .fbyr-kart { padding: 36px 24px; } .fbyr-ic { grid-template-columns: 1fr; gap: 20px; } .fbyr-foto { width: 88px; height: 88px; font-size: 32px; } } /* ── ORTAK · METİN SAYFASI ── */ .fbart-sayfa-metin { padding: 120px 0; } .fbart-metin-icerik { max-width: 880px; margin: 0 auto; font-size: 17px; line-height: 1.65; color: #444; } .fbart-metin-icerik :is(h2, h3) { font-family: var(--fb-font-baslik); font-weight: 600; color: var(--fb-koyu); } .fbart-metin-icerik h2 { margin: 44px 0 14px; font-size: 26px; line-height: 1.3; } .fbart-metin-icerik h3 { margin: 32px 0 10px; font-size: 20px; line-height: 1.35; } .fbart-metin-icerik :is(p, ul, ol) { margin: 0 0 16px; } .fbart-metin-icerik :is(ul, ol) { padding-left: 22px; } .fbart-metin-icerik li { margin-bottom: 6px; } .fbart-metin-icerik a { color: #8a6d3b; text-decoration: underline; text-underline-offset: 3px; transition: color .3s; } .fbart-metin-icerik a:hover { color: var(--fb-koyu); } .fbart-metin-icerik strong { color: var(--fb-koyu); } .fbart-guncelleme { font-size: 14px; color: #6b6b6b; } @media (max-width: 991px) { .fbart-sayfa-metin { padding: 80px 0 90px; } } @media (max-width: 575px) { .fbart-metin-icerik h2 { font-size: 22px; } } /* ── 404 ── */ .fb404 { position: relative; display: flex; align-items: center; justify-content: center; min-height: 78vh; padding: 90px 24px 150px; overflow: hidden; color: var(--fb-koyu); background: var(--fb-beyaz); } .fb404-icerik { position: relative; z-index: 2; display: flex; flex-direction: column; align-items: center; max-width: 760px; text-align: center; } .fb404-kod { margin: 0; font-family: var(--fb-font-baslik); font-size: clamp(130px, 24vw, 340px); font-weight: 900; line-height: .92; letter-spacing: -.03em; color: transparent; -webkit-text-stroke: 2px rgba(197, 160, 89, .6); user-select: none; } .fb404-kod span { color: var(--fb-altin); -webkit-text-stroke: 0; } .fb404-baslik { display: flex; flex-direction: column; align-items: center; margin: 26px 0 0; font-family: var(--fb-font-baslik); font-size: clamp(28px, 4vw, 48px); font-weight: 600; line-height: 1.18; letter-spacing: -.02em; color: var(--fb-koyu); } .fb404-daktilo { min-height: 1.18em; color: #8a6d3b; } .fb404-imlec { display: inline-block; width: 3px; height: .82em; margin-left: 7px; background: var(--fb-altin); transform: translateY(.09em); animation: fbdk-yanip 1.05s steps(2, start) infinite; } .fb404-metin { max-width: 560px; margin: 22px 0 0; font-size: 16px; line-height: 1.75; color: #5a5a5a; } .fb404-butonlar { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 24px 36px; margin-top: 40px; padding: 16px; } .fb404-butonlar .fbart-btn { margin-left: 0; } .fb404-iletisim { margin: 18px 0 0; font-size: 14px; color: #6b6b6b; } .fb404-iletisim a { font-weight: 600; color: #8a6d3b; border-bottom: 1px solid rgba(154, 123, 79, .3); transition: border-color .25s ease; } .fb404-iletisim a:hover { border-color: #8a6d3b; } .fb404-filigran { position: absolute; bottom: -.16em; left: 50%; z-index: 1; font-family: var(--fb-font-baslik); font-size: clamp(80px, 14vw, 230px); font-weight: 800; line-height: 1; letter-spacing: -.02em; text-transform: uppercase; white-space: nowrap; color: rgba(29, 29, 29, .04); pointer-events: none; user-select: none; transform: translateX(-50%); } .fb404-gir { opacity: 0; transform: translateY(22px); animation: fb404-gir .9s cubic-bezier(.22, 1, .36, 1) forwards; } .fb404-gir-2 { animation-delay: .12s; } .fb404-gir-3 { animation-delay: .24s; } .fb404-gir-4 { animation-delay: .36s; } @keyframes fb404-gir { to { opacity: 1; transform: translateY(0); } } @media (max-width: 768px) { .fb404 { min-height: 64vh; padding: 60px 20px 110px; } .fb404-baslik { font-size: clamp(24px, 6.4vw, 32px); } .fb404-butonlar { flex-direction: column; } } @media (prefers-reduced-motion: reduce) { .fb404-gir { opacity: 1; transform: none; animation: none; } .fb404-imlec { animation: none; } } /* ── EKİP · ÜYE ── */ .fbek-giris { display: grid; grid-template-columns: 300px minmax(0, 1fr); align-items: end; gap: 44px; margin-bottom: 56px; scroll-margin-top: 110px; } .fbek-foto { aspect-ratio: 3 / 4; overflow: hidden; background: #ebe7e0; } .fbek-foto img { display: block; width: 100% !important; height: 100% !important; object-fit: cover !important; object-position: center top; } .fbek-unvan { margin: 0 0 12px; font-size: 13px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: #8a6d3b; } .fbek-bio p:last-child { margin-bottom: 0; } .fbek-bio strong { font-weight: 600; color: var(--fb-koyu); } @media (max-width: 767px) { .fbek-giris { grid-template-columns: 1fr; gap: 28px; } .fbek-foto { max-width: 300px; } } /* ── ÇEREZ ── */ .fbart-cerez { position: fixed; bottom: 24px; left: 24px; z-index: 90; width: min(440px, calc(100vw - 48px)); padding: 26px 28px 24px; font-size: 14.5px; line-height: 1.6; color: #555; background: var(--fb-beyaz); border-top: 2px solid var(--fb-altin); box-shadow: 0 10px 30px rgba(0, 0, 0, .12); animation: fbart-cerez-gir .6s cubic-bezier(.16, 1, .3, 1) both; } .fbart-cerez[hidden] { display: none; } .fbart-cerez.is-kapaniyor { animation: fbart-cerez-cik .3s ease forwards; } .fbart-cerez:focus { outline: none; } .fbart-cerez:focus-visible { outline: 2px solid var(--fb-altin); outline-offset: 3px; } .fbart-cerez-baslik { margin: 0 0 8px; font-family: var(--fb-font-baslik); font-size: 19px; font-weight: 600; line-height: 1.3; color: var(--fb-koyu); } .fbart-cerez-metin { margin: 0 0 18px; } .fbart-cerez-dugmeler { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; } .fbart-cerez-dugme, .fbart-cerez-ac-sayfa { min-height: 46px; padding: 0 18px; font: 500 15px/1 var(--fb-font-metin); color: var(--fb-koyu); background: transparent; border: 1px solid var(--fb-koyu); cursor: pointer; transition: color .35s var(--fb-egri), background-color .35s var(--fb-egri); } .fbart-cerez-dugme:hover, .fbart-cerez-ac-sayfa:hover { color: var(--fb-beyaz); background: var(--fb-koyu); } .fbart-cerez-ac { margin-left: .35em; padding: 0; font: inherit; color: var(--fb-beyaz); background: none; border: 0; cursor: pointer; transition: color .4s var(--fb-egri); } .fbart-cerez-ac::before { content: "·"; margin-right: .5em; color: rgba(255, 255, 255, .4); } .fbart-cerez-ac:hover { color: var(--fb-altin); } @keyframes fbart-cerez-gir { from { transform: translateY(calc(100% + 24px)); } } @keyframes fbart-cerez-cik { to { opacity: 0; transform: translateY(16px); } } @media (max-width: 575px) { .fbart-cerez { right: 12px; bottom: 12px; left: 12px; width: auto; padding: 20px 20px 18px; } } @media (max-width: 767px) { .fbart-cerez-ac { display: block; margin: 4px 0 0; } .fbart-cerez-ac::before { display: none; } } @media (prefers-reduced-motion: reduce) { .fbart-cerez, .fbart-cerez.is-kapaniyor { animation: none; } }