.header { position: absolute; } .hero.home-slider-ready .home-hero-slide, .hero:not(.inner-hero) .home-hero-slide{ filter:none!important; background-size:cover!important; background-position:center center!important; background-repeat:no-repeat!important; transition:none!important; } /* Keep catalogue artwork and legal-page hero artwork visible as one image. */ html body #app#app#app .catalogue-card-expanded .catalogue-cover-clean{ position:relative!important; aspect-ratio:4/5!important; overflow:hidden!important; background:#d8ccc3!important; } html body #app#app#app .catalogue-card-expanded .catalogue-cover-clean>img{ position:absolute!important; inset:0!important; width:100%!important; height:100%!important; max-width:none!important; max-height:none!important; object-fit:cover!important; object-position:center!important; } html body #app#app#app .legal-hero{ background-position:center center!important; background-size:cover!important; background-repeat:no-repeat!important; } /* Mobil ana sayfa baslik/aksiyon satirlari ve Markalar iki sutun duzeni. */ @media (max-width: 560px) { html body #app#app#app > .hero + .split.intro + .section > .section-head, html body #app#app#app > .section.projects > .section-head { display: flex !important; width: 100% !important; flex-direction: row !important; align-items: center !important; justify-content: space-between !important; flex-wrap: nowrap !important; gap: 8px !important; } html body #app#app#app > .hero + .split.intro + .section > .section-head > h2, html body #app#app#app > .section.projects > .section-head > h2 { width: auto !important; max-width: none !important; min-width: 0 !important; flex: 1 1 auto !important; margin: 0 !important; white-space: nowrap !important; line-height: 1.08 !important; letter-spacing: -.025em !important; } html body #app#app#app > .hero + .split.intro + .section > .section-head > h2 { font-size: clamp(16px, 4.4vw, 18px) !important; } html body #app#app#app > .section.projects > .section-head > h2 { font-size: clamp(19px, 5.4vw, 21px) !important; } html body #app#app#app > .hero + .split.intro + .section > .section-head > a, html body #app#app#app > .section.projects > .section-head > a { width: auto !important; min-width: max-content !important; max-width: none !important; min-height: 38px !important; flex: 0 0 auto !important; margin: 0 !important; padding: 9px 12px !important; font-size: 9px !important; line-height: 1 !important; white-space: nowrap !important; } html body #app#app#app .brand-page-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; } html body #app#app#app .brand-page-grid > .brand-page-card { min-width: 0 !important; min-height: 125px !important; padding: 12px !important; } html body #app#app#app .product-index-section .products-grid .product-card > div > span, html body #app#app#app .catalog-section .catalog-grid .catalog-card .catalog-card-label, html body #app#app#app .related-products .related-product-card > b { display: none !important; } } /* Tablet teslim duzeltmeleri: metin genisligi ve eksik gorunen ayiricilar. */ @media (min-width: 561px) and (max-width: 900px) { html body #app .about-process .steps > article { min-width: 0 !important; padding-left: 16px !important; padding-right: 10px !important; } html body #app .about-process .steps > article > h3, html body #app .about-process .steps > article > p { width: 100% !important; max-width: none !important; white-space: normal !important; overflow-wrap: normal !important; word-break: normal !important; hyphens: none !important; } html body #app .references-index-section .other-refs > div, html body #app .product-detail-enhanced .legacy-detail-specs > div { border-bottom: 1px solid var(--line) !important; } html body #app > footer.footer { width: 100% !important; max-width: none !important; margin-left: 0 !important; margin-right: 0 !important; grid-template-columns: repeat(2, minmax(0, 280px)) !important; justify-content: center !important; column-gap: clamp(56px, 9vw, 72px) !important; row-gap: 34px !important; padding-left: clamp(20px, 4vw, 32px) !important; padding-right: clamp(20px, 4vw, 32px) !important; } html body #app > footer.footer > div:not(.legal) { width: 100% !important; min-width: 0 !important; justify-self: stretch !important; } html body #app > footer.footer > .legal { grid-column: 1 / -1 !important; width: 100% !important; display: flex !important; align-items: center !important; justify-content: space-between !important; flex-wrap: nowrap !important; gap: 18px !important; margin-top: 0 !important; font-size: clamp(7px, 1vw, 9px) !important; white-space: nowrap !important; } html body #app > footer.footer > .legal > span { display: flex !important; align-items: center !important; justify-content: flex-end !important; flex-wrap: nowrap !important; gap: clamp(10px, 1.8vw, 18px) !important; margin-top: 0 !important; white-space: nowrap !important; } html body #app > footer.footer > .legal a { display: inline-block !important; margin: 0 !important; white-space: nowrap !important; } } /* Yalnizca sorunlu kart gorsellerini kutularina tam oturt. */ .related-product-thumb, .reference-card-image{ background-size:cover!important; background-position:center center!important; background-repeat:no-repeat!important; } .blog-side-post img{ object-fit:cover!important; object-position:center center!important; } /* Final contact details order: address alone, email and phone below. */ body:has(.contact) .contact-details-grid{ grid-template-columns:repeat(2,minmax(0,1fr))!important; grid-template-areas:"address address" "email phone"!important; } body:has(.contact) .contact-details-grid [data-contact-kind="hours"]{ display:none!important; } html body:has(.contact) #app .contact.section>div:first-child .contact-details-grid{ grid-template-columns:repeat(2,minmax(0,1fr))!important; grid-template-areas:"address address" "email phone"!important; } html body:has(.contact) #app .contact.section>div:first-child .contact-details-grid>[data-contact-kind="hours"]{ display:none!important; } /* Laptop/tablet brand intro: image-free, single-line title. */ @media(min-width:561px){ html body #app .brands-carousel .brands-story{ display:block!important; position:relative!important; margin-bottom:38px!important; } html body #app .brands-carousel .brands-story-image{ display:none!important; } html body #app .brands-carousel .brands-story-copy{ width:100%!important; max-width:none!important; } html body #app .brands-carousel .brands-story-copy h2{ white-space:nowrap!important; font-size:clamp(34px,4.2vw,64px)!important; letter-spacing:-.045em!important; } html body #app .brands-carousel .brands-story-copy h2 br{ display:inline-block!important; width:.22em!important; content:""!important; } } @media(min-width:561px) and (max-width:900px){ html body #app .brands-carousel .brands-story{ margin-bottom:32px!important; } html body #app .brands-carousel .brands-story-copy{ padding-right:150px!important; } html body #app .brands-carousel .brands-carousel-bar{ position:absolute!important; right:0!important; bottom:-4px!important; margin:0!important; min-height:0!important; transform:none!important; align-items:center!important; } } /* Final contact text sizing and rhythm. */ html body:has(.contact) #app .contact.section>div:first-child .contact-details-grid>[data-contact-kind="address"] .contact-item-copy{ width:auto!important; max-width:none!important; overflow:visible!important; } html body:has(.contact) #app .contact.section>div:first-child .contact-details-grid>[data-contact-kind="address"] .contact-item-copy span{ width:auto!important; max-width:none!important; white-space:nowrap!important; overflow:visible!important; overflow-wrap:normal!important; word-break:normal!important; } @media(max-width:850px){ html body:has(.contact) #app .contact.section>div:first-child .contact-details-grid .contact-item-copy b{ font-size:15px!important; line-height:1.35!important; letter-spacing:.012em!important; margin-bottom:5px!important; } html body:has(.contact) #app .contact.section>div:first-child .contact-details-grid .contact-item-copy span{ font-size:13px!important; line-height:1.5!important; letter-spacing:.012em!important; overflow-wrap:normal!important; } html body:has(.contact) #app .contact.section>div:first-child .contact-details-grid>[data-contact-kind="email"] .contact-item-copy span{ letter-spacing:.025em!important; white-space:nowrap!important; } } @media(max-width:560px){ html body:has(.contact) #app .contact.section>div:first-child .contact-details-grid .contact-item-copy b{ font-size:14px!important; } html body:has(.contact) #app .contact.section>div:first-child .contact-details-grid .contact-item-copy span{ font-size:11px!important; line-height:1.55!important; } html body:has(.contact) #app .contact.section>div:first-child .contact-details-grid>[data-contact-kind="email"] .contact-item-copy span{ letter-spacing:.02em!important; } } @media(max-width:360px){ html body:has(.contact) #app .contact.section>div:first-child .contact-details-grid .contact-item-copy span{ font-size:10.5px!important; } } /* Keep every mobile brand wordmark fully inside and optically centred. */ @media(max-width:560px){ html body #app .brands-carousel .brand-logo-card{ display:flex!important; align-items:center!important; justify-content:center!important; padding:10px!important; text-align:center!important; } html body #app .brands-carousel .brand-logo-card .brand-logo{ display:flex!important; align-items:center!important; justify-content:center!important; width:100%!important; max-width:100%!important; min-width:0!important; margin:0 auto!important; transform:scale(.74)!important; transform-origin:center center!important; white-space:nowrap!important; } html body #app .brands-carousel .brand-logo-card:hover .brand-logo, html body #app .brands-carousel .brand-logo-card:focus-visible .brand-logo, html body #app .brands-carousel .brand-logo-card.selected .brand-logo{ transform:scale(.74)!important; } } /* Keep mobile brand navigation visible beside (not inside/below) the frame. */ @media(max-width:560px){ html body #app .brands-carousel .brands-carousel-window{ overflow:visible!important; } .brands-carousel .brands-carousel-window>.brands-carousel-actions{ display:flex!important; visibility:visible!important; opacity:1!important; z-index:99!important; pointer-events:none!important; } .brands-carousel .brands-carousel-window>.brands-carousel-actions button{ display:grid!important; place-items:center!important; visibility:visible!important; opacity:1!important; background:#e7ddd6!important; border:1px solid rgba(33,29,26,.5)!important; color:#211d1a!important; pointer-events:auto!important; } .brands-carousel .brands-carousel-window>.brands-carousel-actions button svg{ display:block!important; visibility:visible!important; opacity:1!important; stroke:currentColor!important; } } .header .lang { display:none !important; } /* Both contact forms share one measured grid cell, so switching tabs never changes the outer panel's size or border position. */ body:has(.contact) .contact, body:has(.contact) .contact:has([data-contact-panel="general"].active), body:has(.contact) .contact:has([data-contact-panel="professional"].active){ grid-template-columns:minmax(0,.85fr) minmax(0,1.25fr)!important; } .contact-form-area{ display:grid!important; grid-template-columns:minmax(0,1fr)!important; grid-template-rows:auto auto!important; align-content:start!important; padding:28px 30px 30px!important; box-sizing:border-box!important; overflow:hidden!important; } .contact-form-area>.contact-form-tabs, body:has(.contact) .contact-form-area:has([data-contact-panel="general"].active)>.contact-form-tabs, body:has(.contact) .contact-form-area:has([data-contact-panel="professional"].active)>.contact-form-tabs{ grid-column:1!important; grid-row:1!important; margin-bottom:30px!important; } .contact-form-area>.contact-form-tabs button, body:has(.contact) .contact-form-area:has([data-contact-panel="general"].active)>.contact-form-tabs button, body:has(.contact) .contact-form-area:has([data-contact-panel="professional"].active)>.contact-form-tabs button{ padding:15px 10px!important; } .contact-form-area>.contact-choice-panel{ display:block!important; grid-column:1!important; grid-row:2!important; min-width:0!important; visibility:hidden!important; opacity:0!important; pointer-events:none!important; } .contact-form-area>.contact-choice-panel.active{ visibility:visible!important; opacity:1!important; pointer-events:auto!important; } @media(max-width:560px){ .contact-form-area{padding:24px 20px 28px!important} } @media(max-width:1180px) and (min-width:851px){ body:has(.contact) .contact, body:has(.contact) .contact:has([data-contact-panel="general"].active), body:has(.contact) .contact:has([data-contact-panel="professional"].active){ grid-template-columns:minmax(0,.78fr) minmax(0,1.22fr)!important; } } @media(max-width:850px){ body:has(.contact) .contact, body:has(.contact) .contact:has([data-contact-panel="general"].active), body:has(.contact) .contact:has([data-contact-panel="professional"].active){grid-template-columns:1fr!important} } /* Related products keep the same image-first card language at every size: four cards on desktop, three on tablet and two on mobile. */ body:has(.related-products) .related-product-card{ flex:0 0 calc((100% - 36px)/4)!important; grid-template-columns:1fr!important; align-content:start!important; align-items:start!important; gap:10px!important; min-height:0!important; padding:10px!important; } body:has(.related-products) .related-product-thumb{ width:100%!important; height:auto!important; aspect-ratio:1/1!important; } body:has(.related-products) .related-product-card>b{ grid-column:1!important; justify-self:start!important; } @media(max-width:1100px) and (min-width:561px){ body:has(.related-products) .related-product-card{ flex-basis:calc((100% - 24px)/3)!important; } } /* Mobile product journey: keep the same two-column rhythm used on tablet. */ @media(max-width:560px){ body:has(.product-index-section) .product-index-section .products-grid, body:has(.catalog-section) .catalog-section .catalog-grid{ display:grid!important; grid-template-columns:repeat(2,minmax(0,1fr))!important; gap:6px!important; } body:has(.product-index-section) .product-index-section .product-card, body:has(.catalog-section) .catalog-section .catalog-card{ grid-column:auto!important; grid-row:auto!important; width:100%!important; min-width:0!important; min-height:0!important; aspect-ratio:.82/1!important; padding:12px!important; } body:has(.product-index-section) .product-index-section .product-card>div, body:has(.catalog-section) .catalog-section .catalog-card>div{ position:relative!important; display:block!important; width:100%!important; min-width:0!important; padding-right:0!important; padding-bottom:0!important; } body:has(.product-index-section) .product-index-section .product-card h3, body:has(.catalog-section) .catalog-section .catalog-card h3{ width:100%!important; max-width:100%!important; margin:0!important; font-size:14px!important; line-height:1.18!important; overflow-wrap:normal!important; word-break:normal!important; hyphens:none!important; } body:has(.product-index-section) .product-index-section .product-card>div>span, body:has(.catalog-section) .catalog-section .catalog-card .catalog-card-label{ display:none!important; } body:has(.product-index-section) .product-index-section .product-card>div>span::after, body:has(.catalog-section) .catalog-section .catalog-card .catalog-card-label::after{ content:none!important; display:none!important; } body:has(.related-products) .related-product-card{ flex:0 0 calc((100% - 8px)/2)!important; grid-template-columns:1fr!important; align-content:start!important; gap:8px!important; min-height:0!important; padding:8px!important; } body:has(.related-products) .related-product-thumb{ width:100%!important; height:auto!important; aspect-ratio:1/1!important; } body:has(.related-products) .related-product-card>b{ grid-column:1!important; justify-self:start!important; padding:6px 9px!important; font-size:8px!important; } .hero.inner-hero>.hero-breadcrumb{ top:96px!important; left:18px!important; right:18px!important; flex-wrap:wrap!important; gap:4px 6px!important; overflow:visible!important; white-space:normal!important; font-size:10px!important; line-height:1.35!important; letter-spacing:.01em!important; } /* Satır kırılınca "•" işareti satır sonunda tek kalmasın: ayırıcı bir sonraki öğeyle birlikte taşınsın */ .hero.inner-hero>.hero-breadcrumb>span{ display:none!important; } .hero.inner-hero>.hero-breadcrumb>a:not(:first-child)::before, .hero.inner-hero>.hero-breadcrumb>strong:not(:first-child)::before{ content:"•"; display:inline-block; margin-right:6px; opacity:.7; } } .header .lang > svg { width: 18px; height: 12px; border-radius: 2px; overflow: hidden; } .header:has(.language-switch-inline){grid-template-columns:120px minmax(0,1fr) auto!important} .language-menu.language-switch-inline { position:static; z-index:1000; display:flex!important; grid-column:3; align-items:center; justify-content:flex-end; gap:8px; width:auto; padding:0; border:0; border-radius:0; background:transparent; box-shadow:none; color:#fff; } .language-menu button { display:flex; align-items:center; justify-content:center; width:38px; height:38px; min-height:38px; padding:7px; border:1px solid rgba(255,255,255,.4); border-radius:50%; background:rgba(20,19,18,.3); color:inherit; cursor:pointer; } .language-menu button{transition:opacity .18s ease,transform .18s ease,background .18s ease,box-shadow .18s ease!important} .language-menu button:not(.selected){opacity:.7} .language-menu button.selected{opacity:1;border-color:rgba(255,255,255,.88)!important;background:rgba(17,17,17,.5)!important;box-shadow:0 2px 8px rgba(0,0,0,.24)!important;transform:none} .language-menu button:hover,.language-menu button:focus-visible { background: rgba(255,255,255,.12); outline: none; } .language-menu svg { width:22px; height:15px; flex:0 0 22px; border-radius:2px; overflow:hidden; } @media(max-width:850px){.header:has(.language-switch-inline){grid-template-columns:72px minmax(0,1fr) auto!important}.language-menu.language-switch-inline{gap:5px}.language-menu button{width:34px;height:34px;min-height:34px;padding:6px}} @media(max-width:560px){.header:has(.language-switch-inline){grid-template-columns:72px 1fr auto!important}.language-menu.language-switch-inline{position:absolute;top:16px;right:14px}.header .lang>svg{width:18px!important;height:12px!important}} /* Keep the product enquiry fully visible in laptop and reduced-height views. */ .product-inquiry-modal{box-sizing:border-box!important;padding:clamp(12px,2vh,24px)!important;overflow-y:auto!important;overscroll-behavior:contain} .product-inquiry-modal .product-inquiry-panel{box-sizing:border-box!important;width:min(560px,calc(100vw - 32px))!important;height:auto!important;min-height:0!important;max-height:calc(100dvh - 32px)!important;overflow-y:auto!important;margin:auto!important;padding:clamp(22px,3vh,32px) clamp(22px,3vw,36px)!important} .product-inquiry-modal .product-inquiry-form{gap:8px!important;align-content:start!important} .product-inquiry-modal .product-inquiry-form label{min-width:0!important} .product-inquiry-modal .product-inquiry-form input:not([type=checkbox]){height:42px!important;min-height:42px!important} .product-inquiry-modal .product-inquiry-form textarea{height:82px!important;min-height:82px!important;resize:vertical} .product-inquiry-modal .project-inquiry-consent,.product-inquiry-modal label:has(input[type=checkbox]){display:grid!important;grid-template-columns:18px minmax(0,1fr)!important;align-items:start!important;gap:9px!important;white-space:normal!important;overflow-wrap:anywhere!important;line-height:1.35!important} .product-inquiry-modal .form-consent-box span{min-width:0!important;white-space:normal!important;overflow-wrap:anywhere!important;font-size:10px!important} .product-inquiry-modal input[type=checkbox]{width:16px!important;height:16px!important;margin:1px 0 0!important} @media(max-height:760px){.product-inquiry-modal .product-inquiry-panel{padding:18px 24px!important}.product-inquiry-modal .product-inquiry-panel h2{font-size:30px!important;margin:3px 0 6px!important}.product-inquiry-modal .project-inquiry-intro{margin-bottom:8px!important}.product-inquiry-modal .product-inquiry-form textarea{height:64px!important;min-height:64px!important}} /* The visual button captions are supplied by legacy ::after rules. Translate that visible layer as well as the underlying accessible DOM text. */ html[lang="en"] body #app .split.intro a::after{content:"About Us"!important} html[lang="en"] body #app .section-head>a[href="/urunler"]::after{content:"View All Products"!important} html[lang="en"] body #app .image-card span::after{content:"View"!important} html[lang="en"] body #app .product-card span::after{content:"View"!important} html[lang="en"] body #app .reference-grid a span::after, html[lang="en"] body #app .project-grid a span::after{content:"View"!important} html[lang="en"] body #app .projects .section-head>a::after{content:"View All Projects"!important} html[lang="en"] body #app .split.showroom a::after{content:"Book an Appointment"!important} html[lang="en"] body #app .cta a::after{content:"Contact Us"!important} html[lang="en"] body #app .catalog-card-label.collection-label::after{content:"Explore Collections"!important} html[lang="en"] body #app .catalog-card-label.product-label::after{content:"View Product"!important} /* Catalog category and brand pages: readable labels and clean button copy. */ html body #app#app#app .catalog-section > .kicker{ font-size:12px!important; } html body #app#app#app .catalog-grid .catalog-card .catalog-card-label{ display:inline-flex!important; align-items:center!important; justify-content:center!important; min-height:38px!important; padding:10px 16px!important; font-size:13px!important; line-height:1.15!important; letter-spacing:.02em!important; font-weight:600!important; white-space:nowrap!important; } html body #app#app#app .catalog-grid .catalog-card .catalog-card-label::after{ content:none!important; display:none!important; } @media (max-width:560px){ html body #app#app#app .catalog-grid .catalog-card .catalog-card-label{ min-height:34px!important; padding:8px 13px!important; font-size:12px!important; } } html[lang="en"] body #app .pro-share-badge::after{content:"Share Your Project With Us"!important} html[lang="en"] body #app .related-product-card>b::after{content:"View"!important} /* Comfortable bottom breathing room and scrolling for both language variants. */ .product-inquiry-modal .product-inquiry-panel{padding-bottom:32px!important;scroll-padding-bottom:32px!important} .product-inquiry-modal .project-inquiry-submit{display:inline-flex!important;align-items:center!important;justify-content:center!important;min-height:48px!important;height:auto!important;flex:0 0 auto!important;margin:6px 0 2px!important;padding:13px 24px!important;line-height:1.25!important} /* Definitive product-form sizing: all content, including the submit button, stays inside the viewport in both Turkish and English. */ html body .product-inquiry-modal.is-open{align-items:center!important;padding:18px!important;overflow:auto!important} html body .product-inquiry-modal.is-open .product-inquiry-panel.product-inquiry-panel{ width:min(560px,calc(100vw - 36px))!important;height:auto!important;min-height:0!important; max-height:calc(100dvh - 36px)!important;overflow-y:auto!important; padding:24px 32px 28px!important;margin:auto!important;border-radius:0!important; } /* Header scale and spacing by device class. */ @media(min-width:1025px){ #app>.hero>.header{ height:104px!important;grid-template-columns:168px minmax(0,1fr) 124px!important; padding:0 5vw!important; } #app>.hero>.header .logo,#app>.hero>.header .logo img{width:92px!important;height:78px!important} #app>.hero>.header nav{gap:42px!important} #app>.hero>.header nav a{font-size:15px!important;font-weight:600!important} #app>.hero>.header .language-menu.language-switch-inline{gap:9px!important} #app>.hero>.header .language-menu button{width:45px!important;height:45px!important;min-height:45px!important;padding:8px!important} #app>.hero>.header .language-menu svg{width:25px!important;height:17px!important} } @media(min-width:561px) and (max-width:1024px){ #app>.hero>.header{ height:124px!important;grid-template-columns:126px minmax(0,1fr) 110px!important; padding:0 18px!important;column-gap:8px!important; } #app>.hero>.header .logo,#app>.hero>.header .logo img{width:118px!important;height:99px!important} #app>.hero>.header nav{ min-width:0!important;gap:clamp(7px,1.15vw,16px)!important; justify-content:center!important;white-space:nowrap!important; } #app>.hero>.header nav a{font-size:clamp(12px,1.5vw,15px)!important;font-weight:600!important} #app>.hero>.header .language-menu.language-switch-inline{gap:8px!important} #app>.hero>.header .language-menu button{width:49px!important;height:49px!important;min-height:49px!important;padding:9px!important} #app>.hero>.header .language-menu svg{width:27px!important;height:18px!important} #app>.hero.home-slider-ready .hero-copy, #app>.hero:not(.inner-hero):has(.home-hero-slide) .hero-copy{bottom:230px!important} /* Başlık 6px büyüdüğü için breadcrumb logonun altında kalsın */ #app>.hero.inner-hero>.hero-breadcrumb{top:132px!important} } /* Küçük tablet (561-767px): menü tek satıra sığmadığı için logo + diller üst satırda, menü alt satırda */ @media(min-width:561px) and (max-width:767px){ #app>.hero>.header{ height:auto!important;min-height:0!important; grid-template-columns:minmax(0,1fr) auto!important; grid-template-rows:auto auto!important; align-items:center!important; padding:12px 22px 10px!important;row-gap:2px!important;column-gap:12px!important; } #app>.hero>.header .logo{grid-column:1!important;grid-row:1!important;justify-self:start!important} #app>.hero>.header .logo,#app>.hero>.header .logo img{width:104px!important;height:87px!important} #app>.hero>.header .language-menu.language-switch-inline{grid-column:2!important;grid-row:1!important;justify-self:end!important} #app>.hero>.header nav{ grid-column:1 / -1!important;grid-row:2!important; width:100%!important;justify-content:center!important; gap:clamp(10px,2vw,24px)!important; } #app>.hero>.header nav a{font-size:clamp(11.5px,2.05vw,14px)!important} #app>.hero.inner-hero>.hero-breadcrumb{top:152px!important} } @media(max-width:560px){ :root{--mobile-header-height:86px!important} #app>.hero>.header{height:var(--mobile-header-height)!important;grid-template-columns:88px minmax(0,1fr) auto auto!important;padding:0 13px!important;column-gap:7px!important} #app>.hero>.header .logo,#app>.hero>.header .logo img{width:80px!important;height:68px!important} #app>.hero>.header .language-menu.language-switch-inline{gap:5px!important} #app>.hero>.header .language-menu button{width:38px!important;height:38px!important;min-height:38px!important;padding:7px!important} #app>.hero>.header .language-menu svg{width:22px!important;height:15px!important} #app>.hero>.header .mobile-menu-toggle{width:46px!important;height:46px!important} #app>.hero>.header .mobile-menu-toggle span{width:20px!important} } /* Mobile footer: keep every group on one centered visual axis. */ @media(max-width:560px){ .footer{ grid-template-columns:minmax(0,1fr)!important; justify-items:center!important; text-align:center!important; } .footer>div:not(.legal){ width:min(100%,340px)!important; justify-self:center!important; text-align:center!important; } .footer .footer-logo{ display:block!important; margin-left:auto!important; margin-right:auto!important; } .footer>div:first-child p, .footer h4{ text-align:center!important; } .footer .footer-contact{ display:inline-grid!important; width:auto!important; max-width:100%!important; margin-left:auto!important; margin-right:auto!important; transform:translateX(12px)!important; text-align:left!important; } .footer .footer-contact-item{ justify-content:flex-start!important; text-align:left!important; } .footer .socials{ justify-content:center!important; } .footer .legal{ width:100%!important; justify-items:center!important; text-align:center!important; } .footer .legal span{ justify-content:center!important; } } .footer .socials .facebook-modern-icon{ width:15px!important; height:15px!important; fill:currentColor!important; stroke:none!important; } /* Reference material selector: clean rows and gallery-style navigation. */ .reference-layout-refresh .reference-used-products-head.is-refresh-head{ border:0!important; } .reference-layout-refresh .reference-products-viewport, .reference-layout-refresh .reference-products-viewport .reference-used-products-grid, .reference-layout-refresh .reference-products-viewport .reference-used-product, .reference-layout-refresh .reference-products-viewport .reference-used-product.is-page-visible{ border-top:0!important; border-bottom:0!important; } .reference-layout-refresh .reference-refresh-controls{ align-self:center!important; transform:translateY(-24px)!important; } .reference-layout-refresh .reference-refresh-controls button, .reference-layout-refresh .reference-products-viewport .reference-used-product-link{ display:grid!important; place-items:center!important; width:44px!important; height:44px!important; border:1px solid rgba(42,35,30,.2)!important; border-radius:50%!important; background:rgba(250,247,244,.92)!important; color:var(--ink,#211d1a)!important; box-shadow:0 5px 16px rgba(24,20,17,.12)!important; font-size:0!important; line-height:0!important; transition:background .2s,color .2s,border-color .2s,transform .2s!important; } .reference-layout-refresh .reference-refresh-controls button:hover:not(:disabled), .reference-layout-refresh .reference-products-viewport .reference-used-product:hover .reference-used-product-link{ background:var(--ink,#211d1a)!important; border-color:var(--ink,#211d1a)!important; color:#fff!important; } .reference-layout-refresh .reference-refresh-controls button::before, .reference-layout-refresh .reference-refresh-controls button::after, .reference-layout-refresh .reference-products-viewport .reference-used-product-link::before, .reference-layout-refresh .reference-products-viewport .reference-used-product-link::after{ display:none!important; content:none!important; } .reference-layout-refresh .has-modern-chevron svg{ display:block!important; width:18px!important; height:18px!important; margin:0!important; fill:none!important; stroke:currentColor!important; stroke-width:1.8!important; stroke-linecap:round!important; stroke-linejoin:round!important; pointer-events:none!important; } /* Catalogue archive: search catalogues, brands and categories in place. */ .catalogue-archive .catalogue-search{ position:relative; display:grid; grid-template-columns:22px minmax(0,1fr) auto; align-items:center; gap:12px; width:100%; min-height:58px; margin:0 0 28px; padding:0 17px; border:1px solid rgba(42,35,30,.24); border-radius:999px; background:rgba(255,255,255,.34); color:var(--ink,#211d1a); transition:border-color .2s,box-shadow .2s,background .2s; } .catalogue-archive .catalogue-search:focus-within{ border-color:rgba(42,35,30,.58); background:rgba(255,255,255,.58); box-shadow:0 0 0 3px rgba(42,35,30,.07); } .catalogue-archive .catalogue-search>svg{ width:21px;height:21px;fill:none;stroke:currentColor;stroke-width:1.6; stroke-linecap:round;stroke-linejoin:round;opacity:.72; } .catalogue-archive .catalogue-search-label{ position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden; clip:rect(0,0,0,0);white-space:nowrap;border:0; } .catalogue-archive .catalogue-search input{ width:100%;min-width:0;padding:0;border:0;outline:0;background:transparent; color:inherit;font:inherit;font-size:16px;line-height:1.3; } .catalogue-archive .catalogue-search input::placeholder{color:rgba(42,35,30,.58)} .catalogue-archive .catalogue-search input::-webkit-search-cancel-button, .catalogue-archive .catalogue-search input::-webkit-search-decoration{ display:none!important; -webkit-appearance:none!important; appearance:none!important; } .catalogue-archive .catalogue-search button{ display:grid;place-items:center;width:30px;height:30px;padding:0;border:0;border-radius:50%; background:rgba(42,35,30,.08);color:inherit;font-size:21px;line-height:1;cursor:pointer; opacity:0;pointer-events:none;transition:opacity .18s,background .18s; } .catalogue-archive .catalogue-search.has-value button{opacity:1;pointer-events:auto} .catalogue-archive .catalogue-search button:hover{background:rgba(42,35,30,.15)} @media(max-width:560px){ .product-detail-enhanced .detail-actions, .reference-layout-refresh .detail-actions, .detail-section.reference-detail-enhanced:not(.product-detail-enhanced) .detail-actions{ display:grid!important; grid-template-columns:minmax(0,1fr) minmax(0,1fr)!important; align-items:stretch!important; gap:8px!important; } .product-detail-enhanced .detail-actions a, .reference-layout-refresh .detail-actions a, .detail-section.reference-detail-enhanced:not(.product-detail-enhanced) .detail-actions a{ width:100%!important; min-width:0!important; min-height:46px!important; padding:9px 7px!important; font-size:10px!important; line-height:1.25!important; text-align:center!important; white-space:normal!important; } .detail-section.reference-detail-enhanced:not(.product-detail-enhanced) .detail-actions a:first-child::before{ font-size:10px!important; } .reference-layout-refresh .reference-refresh-controls{ transform:translateY(-18px)!important; } .reference-layout-refresh .reference-refresh-controls button, .reference-layout-refresh .reference-products-viewport .reference-used-product-link{ width:36px!important; height:36px!important; } .reference-layout-refresh .has-modern-chevron svg{width:16px!important;height:16px!important} .catalogue-archive .catalogue-search{ min-height:52px;margin-bottom:22px;padding:0 14px;gap:10px; } .catalogue-archive .catalogue-search input{font-size:14px} } /* Unified detail gallery: touch devices open the active, source-matched image in a full-screen viewer; desktop keeps the existing hover lens. */ body.detail-gallery-lightbox-open{overflow:hidden!important} .detail-gallery-lightbox{ position:fixed;inset:0;z-index:2147483646;display:flex;align-items:center;justify-content:center; width:100%;height:100dvh;padding:clamp(18px,4vw,48px);background:rgba(20,17,15,.96); opacity:1;visibility:visible;overscroll-behavior:contain;touch-action:pan-y; } .detail-gallery-lightbox img{ display:block;max-width:min(1180px,calc(100vw - 36px));max-height:calc(100dvh - 36px); width:auto;height:auto;object-fit:contain;user-select:none;-webkit-user-drag:none; } .detail-gallery-lightbox-close,.detail-gallery-lightbox-nav{ position:absolute;z-index:2;display:grid;place-items:center;border:1px solid rgba(255,255,255,.58); border-radius:50%;background:rgba(20,17,15,.72);color:#fff;cursor:pointer;line-height:1; } .detail-gallery-lightbox-close{top:18px;right:18px;width:46px;height:46px;font-size:32px;font-weight:300} .detail-gallery-lightbox-nav{top:50%;width:48px;height:48px;font-size:35px;transform:translateY(-50%)} .detail-gallery-lightbox-nav.is-prev{left:18px}.detail-gallery-lightbox-nav.is-next{right:18px} .detail-gallery-lightbox button:focus-visible{outline:2px solid #fff;outline-offset:3px} /* Reference detail desktop lens: keep the preview fully inside the viewport. The legacy 115% width pushed it beyond the left edge on wide galleries. */ @media(min-width:851px) and (hover:hover){ .reference-detail-enhanced .product-gallery-zoom{ left:auto!important;right:calc(100% + 38px)!important;top:64px!important; width:min(42vw,720px)!important;height:min(58vh,520px)!important; max-width:calc(100vw - 80px)!important; background-size:260% 260%!important; border-radius:12px!important;overflow:hidden!important; } } @media(max-width:850px),(hover:none){ .product-gallery-stage{cursor:zoom-in!important} .detail-gallery-lightbox{padding:12px} .detail-gallery-lightbox img{max-width:calc(100vw - 24px);max-height:calc(100dvh - 24px)} .detail-gallery-lightbox-close{top:12px;right:12px} .detail-gallery-lightbox-nav{width:42px;height:42px;font-size:30px} .detail-gallery-lightbox-nav.is-prev{left:10px}.detail-gallery-lightbox-nav.is-next{right:10px} } html body .product-inquiry-modal.is-open .product-inquiry-panel h2{font-size:36px!important;line-height:1.04!important;margin:5px 0 8px!important} html body .product-inquiry-modal.is-open .project-inquiry-intro{font-size:12px!important;line-height:1.4!important;margin:0 0 10px!important} html body .product-inquiry-modal.is-open .product-inquiry-form{display:grid!important;gap:7px!important;align-content:start!important} html body .product-inquiry-modal.is-open .product-inquiry-form label{gap:4px!important;font-size:10px!important;line-height:1.25!important} html body .product-inquiry-modal.is-open .product-inquiry-form input:not([type=checkbox]){height:42px!important;min-height:42px!important;padding:9px 12px!important} html body .product-inquiry-modal.is-open .product-inquiry-form textarea{height:78px!important;min-height:78px!important;padding:9px 12px!important} html body .product-inquiry-modal.is-open .form-consent-box{min-height:46px!important;margin:3px 0!important;padding:9px 11px!important} html body .product-inquiry-modal.is-open .form-consent-box{display:grid!important;grid-template-columns:18px minmax(0,1fr)!important;align-items:center!important;column-gap:9px!important} html body .product-inquiry-modal.is-open .form-consent-box input[type=checkbox]{align-self:center!important;margin:0!important} html body .product-inquiry-modal.is-open .form-consent-box span{align-self:center!important;font-size:9px!important;line-height:1.35!important;white-space:normal!important} html body .product-inquiry-modal.is-open .project-inquiry-submit{min-height:44px!important;margin:5px 0 0!important;padding:11px 22px!important} @media(max-height:820px){ html body .product-inquiry-modal.is-open .product-inquiry-panel.product-inquiry-panel{padding:18px 26px 22px!important} html body .product-inquiry-modal.is-open .product-inquiry-panel h2{font-size:31px!important} html body .product-inquiry-modal.is-open .product-inquiry-form input:not([type=checkbox]){height:38px!important;min-height:38px!important} html body .product-inquiry-modal.is-open .product-inquiry-form textarea{height:62px!important;min-height:62px!important} html body .product-inquiry-modal.is-open .form-consent-box{min-height:42px!important} html body .product-inquiry-modal.is-open .project-inquiry-submit{min-height:40px!important} } /* Mobile navigation: top fixed header + accessible hamburger drawer. */ .mobile-menu-toggle{display:none} .mobile-navigation-drawer{display:none} .references-index-section .reference-card{ content-visibility:auto; contain-intrinsic-size:auto 420px; contain:layout paint style; } @media(max-width:560px){ :root{--mobile-nav-height:0px!important;--mobile-header-height:66px} body{padding-bottom:0!important} html:has(body.mobile-menu-page-open){height:100%!important;overflow:hidden!important;overscroll-behavior:none!important} body.mobile-menu-page-open{ position:fixed!important;inset:0!important;width:100%!important;height:100dvh!important; overflow:hidden!important;overscroll-behavior:none!important;touch-action:auto!important; } .header{ position:fixed!important;inset:0 0 auto 0!important;z-index:120!important; height:var(--mobile-header-height)!important; overflow:visible!important;isolation:isolate!important; display:grid!important;grid-template-columns:64px minmax(0,1fr) auto auto!important; align-items:center!important;column-gap:8px!important;padding:0 14px 0 16px!important; background:linear-gradient(180deg,rgba(18,16,15,.9),rgba(18,16,15,.72))!important; box-shadow:0 8px 24px rgba(0,0,0,.12)!important;backdrop-filter:blur(10px)!important; } .header .logo{grid-column:1!important;position:relative!important;z-index:2!important} .header .language-menu.language-switch-inline{ grid-column:3!important;position:static!important;top:auto!important;right:auto!important; justify-self:end!important;gap:4px!important;z-index:2!important; } .header .language-menu button{width:31px!important;height:31px!important;min-height:31px!important;padding:6px!important} .mobile-menu-toggle{ grid-column:4;display:inline-flex!important;flex-direction:column;align-items:center;justify-content:center; width:40px;height:40px;padding:0;border:1px solid rgba(255,255,255,.32);border-radius:50%; background:rgba(17,17,17,.28);color:#fff;cursor:pointer;z-index:2; } .mobile-menu-toggle span{display:block;width:17px;height:1.5px;margin:2px 0;background:currentColor;border-radius:3px;transition:transform .2s ease,opacity .2s ease} .header.mobile-menu-open .mobile-menu-toggle span:nth-child(1){transform:translateY(5.5px) rotate(45deg)} .header.mobile-menu-open .mobile-menu-toggle span:nth-child(2){opacity:0} .header.mobile-menu-open .mobile-menu-toggle span:nth-child(3){transform:translateY(-5.5px) rotate(-45deg)} .header nav{ position:fixed!important;left:12px!important;right:12px!important;top:calc(var(--mobile-header-height) + 8px)!important;bottom:auto!important; z-index:1000!important;width:auto!important;height:auto!important;max-height:calc(100dvh - 86px)!important; display:flex!important;flex-direction:column!important;align-items:stretch!important;justify-content:flex-start!important; gap:3px!important;overflow-y:auto!important;overflow-x:hidden!important; padding:12px!important;border:1px solid rgba(255,255,255,.13)!important;border-radius:14px!important; background:rgba(20,19,18,.98)!important;box-shadow:0 18px 45px rgba(0,0,0,.3)!important; opacity:0!important;visibility:hidden!important;pointer-events:none!important; transform:translateY(-10px) scale(.985)!important;transform-origin:top right!important; transition:opacity .18s ease,transform .18s ease,visibility .18s ease!important; } .header.mobile-menu-open nav{opacity:1!important;visibility:visible!important;pointer-events:auto!important;transform:none!important} body.mobile-menu-page-open .header{overflow:visible!important} body.mobile-menu-page-open .header{ z-index:2147483001!important;background:var(--paper,#e7ddd6)!important; box-shadow:none!important;backdrop-filter:none!important;border:0!important; } body.mobile-menu-page-open .header .logo img{filter:brightness(0) saturate(100%)!important} body.mobile-menu-page-open .header .mobile-menu-toggle{ color:var(--ink,#211d1a)!important;border-color:var(--line,#b9aaa0)!important;background:transparent!important; } body.mobile-menu-page-open .header .language-menu button{border-color:var(--line,#b9aaa0)!important;background:transparent!important} body.mobile-menu-page-open .header nav{ display:flex!important;opacity:1!important;visibility:visible!important;pointer-events:auto!important; transform:none!important;clip:auto!important;clip-path:none!important; } .header nav a,.header nav a:last-child{ flex:0 0 auto!important;display:flex!important;align-items:center!important;justify-content:space-between!important; width:100%!important;min-height:44px!important;padding:11px 14px!important;border:0!important;border-radius:9px!important; color:#fff!important;font-size:14px!important;line-height:1.25!important;text-align:left!important;white-space:normal!important; } .header nav a.active{background:rgba(255,255,255,.11)!important;color:#fff!important} .header nav a:hover,.header nav a:focus-visible{background:rgba(255,255,255,.08)!important;outline:none!important} .footer{padding-bottom:34px!important} #mobile-navigation-drawer.mobile-navigation-drawer{ position:fixed!important;left:0!important;right:0!important;top:0!important;bottom:0!important; z-index:2147483000!important;width:100%!important;height:100dvh!important;max-height:none!important; display:flex!important;flex-direction:column!important;align-items:stretch!important;justify-content:flex-start!important; gap:0!important;overflow:hidden!important;overscroll-behavior:none!important; padding:calc(var(--mobile-header-height) + 24px) 24px 24px!important;border:0!important;border-radius:0!important; background:var(--paper,#e7ddd6)!important;box-shadow:none!important; opacity:0!important;visibility:hidden!important;pointer-events:none!important; transform:none!important;transform-origin:right center!important; transition:none!important; } body.mobile-menu-page-open #mobile-navigation-drawer.mobile-navigation-drawer{ opacity:1!important;visibility:visible!important;pointer-events:auto!important;transform:none!important; } #mobile-navigation-drawer a{ flex:0 0 auto!important;display:flex!important;align-items:center!important;justify-content:space-between!important; width:100%!important;min-height:clamp(50px,9dvh,62px)!important;padding:10px 2px!important;border:0!important;border-radius:0!important; color:var(--ink,#211d1a)!important;font-size:clamp(20px,6vw,23px)!important;font-weight:600!important;line-height:1.2!important;text-decoration:none!important; text-align:left!important;white-space:normal!important;touch-action:manipulation!important; } #mobile-navigation-drawer a:hover,#mobile-navigation-drawer a:focus-visible{background:rgba(31,27,25,.055)!important;outline:none!important} #mobile-navigation-drawer a span{font-size:30px!important;font-weight:300!important;line-height:1!important;opacity:.65} /* The dedicated full-screen drawer replaces the legacy header nav completely. */ .header nav{ display:none!important;opacity:0!important;visibility:hidden!important;pointer-events:none!important; border:0!important;box-shadow:none!important;transition:none!important; } .header.mobile-menu-open nav{display:none!important} .mobile-menu-toggle,.mobile-menu-toggle span{transition:none!important} /* Home brand discovery: logos only, with navigation on both sides. */ .brands-carousel .brands-story-image{display:none!important} .brands-carousel .brands-story{display:block!important;margin-bottom:20px!important} .brands-carousel .brands-carousel-bar:empty{display:none!important} .brands-carousel .brands-carousel-window{ position:relative!important;margin:18px 26px 0!important;border-top:0!important; overflow:visible!important;padding:0!important;background:#d8cfc8!important; } .brands-carousel .brands-carousel-track{ position:relative!important;z-index:1!important;overflow-x:auto!important;overflow-y:hidden!important; } .brands-carousel .brands-carousel-window>.brands-carousel-actions{ position:absolute!important;top:0!important;right:-38px!important;bottom:0!important;left:-38px!important;z-index:3!important; display:flex!important;align-items:center!important;justify-content:space-between!important; gap:0!important;pointer-events:none!important; } .brands-carousel .brands-carousel-window>.brands-carousel-actions button{ width:32px!important;height:32px!important;flex:0 0 32px!important; border-color:rgba(33,29,26,.38)!important;background:var(--paper,#e7ddd6)!important; color:var(--ink,#211d1a)!important;pointer-events:auto!important; } .brands-carousel .brand-logo-card{ flex:0 0 50%!important; min-width:0!important; overflow:hidden!important; border-right:1px solid #bfb3aa!important; } /* Product categories stay on one touch-scrollable row on mobile. */ .product-index-section .filters{ display:flex!important;flex-wrap:nowrap!important;justify-content:flex-start!important; width:calc(100% + 36px)!important;margin-left:-18px!important;margin-right:-18px!important; gap:28px!important;overflow-x:auto!important;overflow-y:hidden!important; padding:0 18px 8px!important;scrollbar-width:none!important;-ms-overflow-style:none!important; scroll-snap-type:x proximity!important;overscroll-behavior-x:contain!important; touch-action:pan-x!important;-webkit-overflow-scrolling:touch!important; } .product-index-section .filters::-webkit-scrollbar{display:none!important} .product-index-section .filters button{ flex:0 0 auto!important;white-space:nowrap!important;scroll-snap-align:start!important; margin:0!important;padding:8px 0!important; } } /* Final mobile sizing override (kept after the legacy mobile navigation rules). */ @media(max-width:560px){ :root{--mobile-header-height:86px!important} #app>.hero>.header{ height:var(--mobile-header-height)!important; grid-template-columns:88px minmax(0,1fr) auto auto!important; padding:0 13px!important;column-gap:7px!important; } #app>.hero>.header .logo,#app>.hero>.header .logo img{width:80px!important;height:68px!important} #app>.hero>.header .language-menu.language-switch-inline{gap:5px!important} #app>.hero>.header .language-menu button{width:38px!important;height:38px!important;min-height:38px!important;padding:7px!important} #app>.hero>.header .language-menu svg{width:22px!important;height:15px!important} #app>.hero>.header .mobile-menu-toggle{width:46px!important;height:46px!important} #app>.hero>.header .mobile-menu-toggle span{width:20px!important} } /* ===================================================================== BLOG 1) Blog listesi: her yazı kartı bir kutu içinde 2) Tablet blog detayı: "Bize Ulaşın" ve "Son Yazılar" eşit çerçeve, altta boşluk yok ===================================================================== */ /* 1) Blog listesi kartları */ .blog-index .blog-grid>article.blog-card{ display:flex;flex-direction:column;overflow:hidden; border:1px solid rgba(128,111,100,.28);border-radius:12px; background:rgba(255,255,255,.25); transition:border-color .2s ease,box-shadow .2s ease; } .blog-index .blog-grid>article.blog-card:hover{ border-color:rgba(128,111,100,.5);box-shadow:0 12px 30px rgba(33,29,26,.08); } .blog-index .blog-card .blog-card-copy{ display:flex;flex-direction:column;flex:1 1 auto;padding:24px 26px 26px!important; } .blog-index .blog-card .blog-card-copy>p:not(.blog-meta){margin-bottom:22px} .blog-index .blog-card .blog-read{margin-top:auto!important;align-self:flex-start} @media(max-width:700px){ .blog-index .blog-card .blog-card-copy{padding:20px 20px 22px!important} } /* Blog "Bize Ulaşın" formundaki onay kutusu: metin sarılsın, panel genişlemesin */ .blog-detail .blog-sidebar .blog-contact-form .form-consent-box{min-width:0;box-sizing:border-box} .blog-detail .blog-sidebar .blog-contact-form .form-consent-box span{ white-space:normal!important;min-width:0;overflow-wrap:break-word; } /* 2) Tablet: iki eşit çerçeve, içerik çerçeveyi tamamen doldurur (sayfadaki sonraki