/* ───────────────────────────────────────────────────────────────────────────── Gong Global — Redesign Overrides Loads after style.css → gong.css, so every rule here wins. ───────────────────────────────────────────────────────────────────────────── */ /* ── Design tokens ──────────────────────────────────────────────────────── */ :root { --gg-dark: #0f0f0f; --gg-gold: #b8942a; --gg-gold-lt: #d4aa40; --gg-light: #f5f4f0; --gg-mid: #555; --gg-radius: 6px; --gg-shadow: 0 4px 24px rgba(0, 0, 0, .09); --gg-trans: all .3s ease; } /* ── RTL (Arabic) fixes ───────────────────────────────────────────────────── The theme (style.css/gong.css) is LTR-only — dir="rtl" on flips default text alignment and list bullets automatically, but directional icons meant to point "forward" (arrows/chevrons used for "read more", breadcrumbs, card links, etc.) don't mirror on their own and end up pointing the wrong way for Arabic readers. Flip them here. */ html[dir="rtl"] .bi-arrow-right, html[dir="rtl"] .bi-chevron-right, html[dir="rtl"] .news-card-more .bi-arrow-right, html[dir="rtl"] .ss-arrow.bi-arrow-right, html[dir="rtl"] .hero-breadcrumb .bi-chevron-right, html[dir="rtl"] .about-hero-breadcrumb .bi-chevron-right { display: inline-block; transform: scaleX(-1); } /* Mobile services carousel prev/next: swap sides and mirror icons so "previous" sits on the reading-start side in Arabic too. */ html[dir="rtl"] .ss-mobile-prev { left: auto; right: 8px; } html[dir="rtl"] .ss-mobile-next { right: auto; left: 8px; } /* ── Typography ─────────────────────────────────────────────────────────── */ body { color: #222; } h1, h2, h3, h4, h5, h6 { font-family: 'Montserrat', sans-serif; letter-spacing: -.01em; } /* ── Top bar ────────────────────────────────────────────────────────────── */ #top-bar { background: var(--gg-dark) !important; border-bottom: 1px solid #222; font-size: 12px; letter-spacing: .04em; } /* ── Header ─────────────────────────────────────────────────────────────── */ #header { background: var(--gg-dark) !important; border-bottom: 1px solid rgba(255, 255, 255, .08) !important; overflow: visible !important; } #header-wrap { background: var(--gg-dark) !important; box-shadow: 0 2px 24px rgba(0, 0, 0, .4); overflow: visible !important; } /* Logo: flag style handled in Header.astro — kill any theme animation */ #logo { animation: none !important; transition: none !important; } /* Nav link color (premium dark header) */ .is-expanded-menu .menu-container>.menu-item>.menu-link { color: rgba(255, 255, 255, .85) !important; font-size: .8rem !important; font-weight: 600 !important; text-transform: uppercase !important; letter-spacing: .08em !important; } .is-expanded-menu .menu-container>.menu-item>.menu-link:hover, .is-expanded-menu .menu-container>.menu-item.current>.menu-link { color: var(--gg-gold) !important; } /* Nav link hover underline: the base theme points this at images/border.svg and images/border-white.svg, neither of which exists in this project (404 on every page load) — a plain gold gradient bar gives the same hover accent without the missing asset. */ .menu-container>.menu-item>.menu-link div::after, .dark .menu-container>.menu-item>.menu-link div::after { background: linear-gradient(90deg, var(--gg-gold), var(--gg-gold-lt)) !important; } /* Hamburger bars: light for the dark header */ .cnvs-hamburger .cnvs-hamburger-inner, .cnvs-hamburger .cnvs-hamburger-inner::before, .cnvs-hamburger .cnvs-hamburger-inner::after { background-color: #fff !important; } /* ── Mobile: logo ortada, burger sağda ─────────────────────────────────── */ @media (max-width: 991.98px) { #logo { left: 50% !important; transform: translateX(-50%) translateY(-50%) !important; } } /* ── Mega-menu dropdown: premium dark card ──────────────────────────────── */ body.is-expanded-menu .menu-item.mega-menu>.mega-menu-content { background: #141414 !important; border: none !important; border-top: 2px solid var(--gg-gold) !important; box-shadow: 0 28px 56px rgba(0, 0, 0, .5) !important; border-radius: 0 0 12px 12px !important; padding: 36px 8px !important; } body.is-expanded-menu .mega-menu-content .menu-link { color: rgba(255, 255, 255, .78) !important; font-size: .84rem !important; padding: 9px 5px !important; transition: color .2s ease, padding-left .2s ease; } body.is-expanded-menu .mega-menu-content .menu-link:hover { color: var(--gg-gold-lt) !important; padding-left: 9px !important; } body.is-expanded-menu .mega-menu-content .sub-menu-container .menu-item:not(:first-child) { border-top: 1px solid rgba(255, 255, 255, .07) !important; } body.is-expanded-menu .mega-menu-style-2 .mega-menu-column:not(:first-child) { border-left: 1px solid rgba(255, 255, 255, .08) !important; } /* Backdrop while the mobile nav dropdown (Header.astro) is open */ @media (max-width: 991.98px) { body.gg-menu-open { overflow: hidden; } body.gg-menu-open::after { content: ''; position: fixed; inset: 0; background: rgba(0, 0, 0, .5); z-index: 90; } } /* Quote CTA pill in nav */ .menu-container .button.bg-gradient { background: var(--gg-dark) !important; color: #fff !important; font-size: .75rem !important; letter-spacing: .06em; padding: 8px 20px !important; } .menu-container .button.bg-gradient:hover { background: var(--gg-gold) !important; } /* ── Hero slider ────────────────────────────────────────────────────────── */ /* Dark background on the outer shell too (not just the slide) — Swiper's own JS-calculated height can momentarily mismatch the slide's actual content height (especially right after resize/orientation change on mobile), and without this the page's white background shows through as a seam between the slider and the section below it. */ #home-slider, #home-slider .swiper, #home-slider .swiper-wrapper { background-color: var(--gg-dark); } #home-slider .swiper-slide { min-height: 80vh; background-color: var(--gg-dark) !important; background-position: center center !important; background-size: cover !important; position: relative; } /* Dark overlay */ #home-slider .swiper-slide::before { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(0, 0, 0, .72) 0%, rgba(0, 0, 0, .3) 65%, transparent 100%); z-index: 0; } #home-slider .container { position: relative; z-index: 1; } /* The slider photography is composed as a giant "GONG" letter-shaped cutout sitting in the right two-thirds of a wide canvas, with the left third left blank for the text caption. On narrow viewports "center center" crops straight through that blank gap, hiding the letter entirely. */ @media (max-width: 767.98px) { #home-slider .swiper-slide { /* Fixed 70-80vh was designed for wide desktop banners; on a tall narrow phone screen it turned into mostly empty dark space around one huge zoomed-in circular cutout. A shorter, content-driven height plus a fuller-width scrim keeps the same wide/landscape photo treatment while giving the caption text room to actually be read. */ min-height: 0 !important; padding: 44px 0 36px; background-position: 88% center !important; } #home-slider .swiper-slide::before { background: linear-gradient(180deg, rgba(0, 0, 0, .78) 0%, rgba(0, 0, 0, .6) 55%, rgba(0, 0, 0, .78) 100%); } .slider-caption { padding: 0; margin-top: 0 !important; } } .slider-caption { max-width: 600px; padding: 40px 0; } /* Arabic slides: the slider shell stays dir="ltr" (Swiper's own controls assume LTR), but the caption text itself needs to read/align right. */ .slider-caption[dir="rtl"] { text-align: right; margin-left: auto; } .slider-caption[dir="rtl"] .emphasis-title h2, .slider-caption[dir="rtl"] .emphasis-title p.lead { text-align: right; } .slider-caption .emphasis-title h2 { color: #fff !important; font-size: clamp(2rem, 5vw, 4rem) !important; line-height: 1.15 !important; font-weight: 700 !important; margin-bottom: 1.5rem !important; max-width: 560px; text-shadow: 0 2px 12px rgba(0, 0, 0, .3); } .slider-caption .emphasis-title p.lead { color: rgba(255, 255, 255, .82) !important; font-size: 1.05rem !important; font-family: 'Lato', sans-serif !important; line-height: 1.6; margin-top: 0 !important; } @media (max-width: 767.98px) { .slider-caption .emphasis-title h2 { font-size: 1.7rem !important; margin-bottom: .9rem !important; } .slider-caption .emphasis-title p.lead.hero-slide-text { display: block !important; font-size: .92rem !important; line-height: 1.55; color: rgba(255, 255, 255, .88) !important; } } /* Swiper pagination dots */ .swiper-pagination-bullet { background: rgba(255, 255, 255, .5) !important; } .swiper-pagination-bullet-active { background: var(--gg-gold) !important; } /* ── Stats strip ────────────────────────────────────────────────────────── */ .stats-strip, .about-stats-strip { background: var(--gg-dark); padding: 56px 0; } .stats-strip .stat-item, .about-stats-strip .stat-item { text-align: center; padding: 0 20px; border-right: 1px solid rgba(255, 255, 255, .1); } .stats-strip .stat-item:last-child, .about-stats-strip .stat-item:last-child { border-right: none; } .stat-number { display: block; font-family: 'Montserrat', sans-serif; font-size: clamp(2.2rem, 4vw, 3.2rem); font-weight: 700; color: var(--gg-gold); line-height: 1; margin-bottom: 8px; } .stat-label { display: block; font-size: .78rem; font-weight: 600; text-transform: uppercase; letter-spacing: .12em; color: rgba(255, 255, 255, .6); } @media (max-width: 767.98px) { .stats-strip .stat-item, .about-stats-strip .stat-item { border-right: none; border-bottom: 1px solid rgba(255, 255, 255, .1); padding: 16px 0; } .stats-strip .stat-item:last-child, .about-stats-strip .stat-item:last-child { border-bottom: none; } } /* ── Feature / service boxes ────────────────────────────────────────────── */ .section.m-0 .row.col-mb-50 { align-items: stretch; } .section.m-0 .row.col-mb-50>[class*="col-"] { display: flex; } .feature-box.fbox-plain { flex: 1; background: #fff; border: 1px solid #eeecea; border-radius: var(--gg-radius); padding: 32px 28px; transition: var(--gg-trans); position: relative; overflow: hidden; } .feature-box.fbox-plain::after { content: ''; position: absolute; bottom: 0; left: 0; right: 0; height: 3px; background: var(--gg-gold); transform: scaleX(0); transition: transform .35s ease; } .feature-box.fbox-plain:hover { box-shadow: var(--gg-shadow); transform: translateY(-3px); } .feature-box.fbox-plain:hover::after { transform: scaleX(1); } .feature-box.fbox-plain .fbox-icon img { height: 52px !important; filter: grayscale(1) brightness(.6); transition: filter .3s ease; } .feature-box.fbox-plain:hover .fbox-icon img { filter: grayscale(0) brightness(1); } .fbox-content h3 { font-size: .95rem !important; font-weight: 700 !important; letter-spacing: .02em !important; margin-bottom: 8px !important; } .fbox-content h3 a { color: var(--gg-dark) !important; } .fbox-content h3 a:hover { color: var(--gg-gold) !important; } .fbox-content p { font-size: .875rem; line-height: 1.6; color: var(--gg-mid); margin-bottom: 0; } /* ── Highlight two-panel section ────────────────────────────────────────── */ .row.align-items-stretch>[class*=col-md] { position: relative; } .section-content { max-width: 360px; width: 88%; top: auto !important; bottom: 36px; left: 50%; transform: translateX(-50%); } .section-content h3 { color: #fff !important; font-size: 1.5rem !important; font-weight: 700 !important; margin-bottom: 10px !important; text-shadow: 0 2px 8px rgba(0, 0, 0, .4); } .section-content span.font-primary { color: rgba(255, 255, 255, .82) !important; font-size: .85rem; } .more-link { color: var(--gg-gold) !important; border-bottom-color: var(--gg-gold) !important; font-size: .8rem !important; letter-spacing: .06em; } .more-link:hover { color: var(--gg-gold-lt) !important; border-bottom-color: var(--gg-gold-lt) !important; } /* ── Mission points ─────────────────────────────────────────────────────── */ .heading-block.fancy-title.title-bottom-border h4 { font-size: 1rem !important; font-weight: 700 !important; color: var(--gg-dark); padding-bottom: 10px; border-bottom: 2px solid var(--gg-gold) !important; } /* ── Category grid ──────────────────────────────────────────────────────── */ .ecommerce-categories [class^=col-]>a { height: 280px !important; border-radius: var(--gg-radius); overflow: hidden; } .ecommerce-categories [class^=col-]>a::before { background: linear-gradient(to top, rgba(0, 0, 0, .75) 0%, rgba(0, 0, 0, .15) 60%, transparent 100%) !important; opacity: 1 !important; transition: var(--gg-trans); } .ecommerce-categories [class^=col-]>a:hover::before { background: linear-gradient(to top, rgba(0, 0, 0, .88) 0%, rgba(0, 0, 0, .35) 60%, transparent 100%) !important; } .ecommerce-categories .heading-block h3 { color: #fff !important; font-size: 1.1rem !important; font-weight: 600 !important; letter-spacing: .04em !important; text-shadow: 0 2px 8px rgba(0, 0, 0, .5); } /* ── Reference logos ────────────────────────────────────────────────────── */ .logo-strip-item img { filter: grayscale(1) opacity(.55) !important; transition: filter .4s ease, transform .3s ease !important; } .logo-strip-item img:hover { filter: grayscale(0) opacity(1) !important; transform: scale(1.05); } /* ── Buttons ────────────────────────────────────────────────────────────── */ .button.button-3d { background-color: var(--gg-dark) !important; color: #fff !important; border-radius: 4px !important; font-size: .82rem !important; font-weight: 600 !important; letter-spacing: .06em !important; padding: 10px 28px !important; border: none !important; box-shadow: 0 4px 14px rgba(0, 0, 0, .18) !important; transition: background .25s ease, transform .2s ease !important; } .button.button-3d:hover { background-color: var(--gg-gold) !important; transform: translateY(-1px); } /* Kill the theme's default blue-green gradient CTA (e.g. "TEKLİF AL" nav button) — replace with premium gold */ .gradient-blue-green, .h-gradient-blue-green:hover { background-image: linear-gradient(90deg, var(--gg-gold) 0%, var(--gg-gold-lt) 100%) !important; } /* ── Section headings ───────────────────────────────────────────────────── */ .heading-block h3 { font-size: 1.75rem !important; font-weight: 700 !important; color: var(--gg-dark); } .heading-block.border-bottom-0>span, .heading-block>span { font-size: .875rem !important; color: var(--gg-gold) !important; font-weight: 600 !important; letter-spacing: .08em !important; text-transform: uppercase; } /* ── FiveStarBand ───────────────────────────────────────────────────────── */ .five-star-band { background: var(--gg-light); } /* ── Go-to-top button ───────────────────────────────────────────────────── */ #gotoTop { background-color: var(--gg-gold) !important; border-radius: 50% !important; box-shadow: 0 4px 16px rgba(0, 0, 0, .2) !important; } /* ── Footer redesign ────────────────────────────────────────────────────── */ #footer { background: #101010 !important; border-top: 1px solid #222 !important; color: #aaa !important; } #footer h4 { color: #fff !important; font-size: .85rem !important; font-weight: 700 !important; text-transform: uppercase !important; letter-spacing: .1em !important; margin-bottom: 18px !important; padding-bottom: 10px; border-bottom: 2px solid var(--gg-gold) !important; display: inline-block; } #footer h5 { color: #ccc !important; font-size: .875rem !important; font-weight: 400 !important; } #footer .widget_links li a, #footer .widget_links li { color: #888 !important; font-size: .82rem !important; } #footer .widget_links li a:hover { color: var(--gg-gold) !important; } #footer .copy-link a { color: rgba(255, 255, 255, .62) !important; font-size: .78rem !important; } #footer .copy-link a:hover { color: var(--gg-gold) !important; } #footer .copy-link i { color: var(--gg-gold) !important; margin-right: 2px; } #footer .copy-link .middot { color: rgba(255, 255, 255, .25); } #footer .line { border-color: #2a2a2a !important; } #footer .subscribe-widget h5 { font-size: .92rem !important; line-height: 1.6 !important; margin-bottom: 16px !important; } #footer .subscribe-widget h5 strong { color: #fff !important; } #footer .subscribe-widget .input-group { position: relative; border-radius: 6px; overflow: hidden; box-shadow: 0 4px 18px rgba(0, 0, 0, .25); } #footer .subscribe-widget .subscribe-input-icon { position: absolute; left: 16px; top: 50%; transform: translateY(-50%); color: var(--gg-gold); font-size: .95rem; z-index: 2; pointer-events: none; } #footer .subscribe-widget .form-control { background: #1a1a1a !important; border: 1px solid #2c2c2c !important; border-right: none !important; color: #fff !important; padding-left: 42px !important; transition: border-color .2s ease, background .2s ease; } #footer .subscribe-widget .form-control::placeholder { color: rgba(255, 255, 255, .55) !important; opacity: 1; } #footer .subscribe-widget .form-control:focus { background: #202020 !important; border-color: var(--gg-gold) !important; box-shadow: none !important; } #footer .subscribe-widget .button { background: var(--gg-gold) !important; color: #141414 !important; font-weight: 700 !important; border: none !important; transition: background .2s ease; } #footer .subscribe-widget .button:hover { background: var(--gg-gold-lt) !important; } /* KVKK consent checkbox under the newsletter form */ #footer .subscribe-consent { display: flex; align-items: flex-start; gap: 10px; margin: 14px 0 0; cursor: pointer; } #footer .subscribe-consent input[type='checkbox'] { flex-shrink: 0; width: 16px; height: 16px; margin-top: 2px; accent-color: var(--gg-gold); cursor: pointer; } #footer .subscribe-consent span { font-size: .74rem; line-height: 1.6; color: rgba(255, 255, 255, .55); } #footer .subscribe-consent a { color: var(--gg-gold-lt) !important; text-decoration: underline; } #footer .widget-subscribe-form-result { font-size: .78rem; margin-bottom: 8px; min-height: 0; } #footer .widget-subscribe-success { display: flex; align-items: center; gap: 10px; padding: 14px 16px; background: rgba(111, 207, 151, .08); border: 1px solid rgba(111, 207, 151, .35); border-radius: 8px; color: #6fcf97; font-size: .88rem; font-weight: 500; animation: gg-subscribe-success-in .35s ease; } #footer .widget-subscribe-success i { font-size: 1.3rem; flex-shrink: 0; } @keyframes gg-subscribe-success-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } } #footer .widget-subscribe-form-result.is-success { color: #6fcf97; } #footer .widget-subscribe-form-result.is-error { color: #eb8e8e; } /* Footer copyrights bar (legal links + cookie preferences) */ #footer .footer-copyrights { border-top: 1px solid rgba(255, 255, 255, .08); padding: 22px 0; font-size: .78rem; color: rgba(255, 255, 255, .4); } #footer .footer-copyrights-links { display: flex; gap: 20px; align-items: center; } #footer .footer-copyrights-links a, #footer .footer-copyrights-links button { color: rgba(255, 255, 255, .55); background: none; border: none; padding: 0; font-size: .78rem; font-family: inherit; cursor: pointer; transition: color .2s ease; } #footer .footer-copyrights-links a:hover, #footer .footer-copyrights-links button:hover { color: var(--gg-gold); } @media (max-width: 767.98px) { #footer .footer-copyrights .row { text-align: center; } #footer .footer-copyrights-links { justify-content: center; margin-top: 10px; flex-wrap: wrap; } } /* Social icons in footer — theme's .social-icon defaults to float:left, which collapses its wrapper's height and lets the next widget (newsletter) ride up alongside it instead of stacking below. Switch to flex and clear the float. */ #footer .widget .mb-4 { display: flex; flex-wrap: wrap; gap: 8px; overflow: hidden; } #footer .social-icon { float: none !important; margin: 0 !important; } /* Footer-bottom copyright */ #copyrights { background: #080808 !important; color: #555 !important; font-size: .78rem !important; padding: 16px 0 !important; } /* ── Footer: spacing polish + mobile stack ──────────────────────────────── */ #footer .widget { margin-bottom: 8px; } #footer .footer-widgets-wrap { padding: 64px 0 56px !important; } #footer .copy-link { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 0; line-height: 2; } #footer .copy-link .middot { color: #444; padding: 0 4px; } @media (max-width: 991.98px) { #footer .footer-widgets-wrap { padding: 48px 0 40px !important; } /* Stacked columns get no vertical gutter by default — add breathing room */ #footer .footer-widgets-wrap .row>[class*='col-'] { margin-bottom: 32px; } #footer .footer-widgets-wrap .row>[class*='col-']:last-child { margin-bottom: 0; } #footer .row .row>[class*='col-'] { margin-bottom: 24px; } #footer .row .row>[class*='col-']:last-child { margin-bottom: 0; } #footer .line { margin: 20px 0 !important; } /* One contact detail per line reads far better than a run-on inline strip */ #footer .copy-link { flex-direction: column; align-items: flex-start; gap: 10px; } #footer .copy-link .middot { display: none; } } /* ── Scroll-reveal: elements start invisible, JS adds .gg-visible ───────── */ .gg-reveal { opacity: 0; transform: translateY(24px); transition: opacity .6s ease, transform .6s ease; } .gg-reveal.gg-visible { opacity: 1; transform: translateY(0); } .gg-reveal-delay-1 { transition-delay: .1s; } .gg-reveal-delay-2 { transition-delay: .2s; } .gg-reveal-delay-3 { transition-delay: .3s; } .gg-reveal-delay-4 { transition-delay: .4s; } /* ── Page title hero ────────────────────────────────────────────────────── */ .page-title { background-color: var(--gg-dark) !important; } .page-title h1 { font-size: clamp(1.6rem, 4vw, 2.8rem) !important; font-weight: 700 !important; } /* ── Service page hero ──────────────────────────────────────────────────── */ .entry-image img { border-radius: var(--gg-radius); box-shadow: var(--gg-shadow); } /* ── Content sections — better spacing ─────────────────────────────────── */ #content .content-wrap { padding-top: 60px; padding-bottom: 60px; } /* ── Misc: section background light ────────────────────────────────────── */ .section.m-0 { background: var(--gg-light) !important; padding: 64px 0 !important; } /* ── Testimonials ───────────────────────────────────────────────────────── */ .testimonials-section { background: var(--gg-light); padding: 72px 0 80px; /* Pull up over #content .content-wrap's generic 60px padding-bottom (same issue as services-showcase's margin-top fix) so this, the last section before the footer, doesn't leave a transparent gap showing the page's white background before the dark footer starts. */ margin-bottom: -60px; } .testimonial-card { background: #fff; border: 1px solid #eeecea; border-radius: var(--gg-radius); padding: 32px 28px 28px; height: 100%; display: flex; flex-direction: column; position: relative; transition: var(--gg-trans); } .testimonial-card:hover { box-shadow: var(--gg-shadow); transform: translateY(-3px); } .testimonial-quote { font-family: Georgia, serif; font-size: 5rem; line-height: .6; color: var(--gg-gold); margin-bottom: 16px; user-select: none; } .testimonial-text { font-size: .875rem; line-height: 1.7; color: var(--gg-mid); flex: 1; margin-bottom: 24px; } .testimonial-author { border-top: 1px solid #f0eeeb; padding-top: 14px; display: flex; flex-direction: column; gap: 3px; } .testimonial-name { font-size: .85rem; font-weight: 700; color: var(--gg-dark); } .testimonial-role { font-size: .75rem; color: var(--gg-mid); letter-spacing: .02em; } /* ── Services Showcase (dark premium grid) ──────────────────────────────── */ .services-showcase { background: var(--gg-dark); padding: 88px 0 96px; /* Pull up over #content .content-wrap's generic 60px padding-top so the dark background starts flush against the stats strip above it, instead of leaving a pale gap where the page's default white shows through. */ margin-top: -60px; } .ss-badge { display: inline-block; font-size: .68rem; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: var(--gg-gold); border: 1px solid rgba(184, 148, 42, .4); padding: 5px 18px; border-radius: 20px; margin-bottom: 16px; } .ss-heading { color: #fff !important; font-size: clamp(1.1rem, 2.5vw, 1.7rem) !important; font-weight: 300 !important; letter-spacing: -.01em !important; max-width: 560px; margin: 0 auto 0 !important; line-height: 1.5 !important; } .ss-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: rgba(255, 255, 255, .05); border-radius: 10px; overflow: hidden; margin-top: 52px; } .ss-card { background: #111; text-decoration: none; position: relative; overflow: hidden; transition: background .25s ease; min-height: 220px; } .ss-card::after { content: ''; position: absolute; bottom: 0; left: 0; right: 0; height: 2px; background: linear-gradient(90deg, var(--gg-gold), var(--gg-gold-lt)); transform: scaleX(0); transform-origin: left; transition: transform .35s ease; z-index: 3; } .ss-card:hover { background: #171717; } .ss-card:hover::after { transform: scaleX(1); } /* Photo reveal: slides in from left on hover, sits under the text with a dark scrim */ .ss-card-media { position: absolute; inset: 0; background-size: cover; background-position: left center; /* Sub-pixel rounding on -100% can leave a hairline sliver of the image visible at the card's left edge; a small extra offset guarantees a fully clean hide regardless of the card's rendered width. */ transform: translateX(calc(-100% - 4px)); transition: transform .55s cubic-bezier(.4, 0, .2, 1); filter: brightness(1.15) saturate(1.15); z-index: 0; } .ss-card-media::after { content: ''; position: absolute; inset: 0; background: linear-gradient(100deg, rgba(10, 10, 10, .62) 0%, rgba(10, 10, 10, .3) 55%, rgba(10, 10, 10, .12) 100%); } .ss-card:hover .ss-card-media { transform: translateX(0); } .ss-card-body { position: relative; z-index: 2; padding: 36px 28px 32px; display: flex; flex-direction: column; gap: 10px; height: 100%; } .ss-num { font-size: .62rem; font-weight: 700; letter-spacing: .14em; color: rgba(255, 255, 255, .18); font-family: 'Montserrat', sans-serif; } .ss-icon { font-size: 2rem; color: var(--gg-gold); line-height: 1; transition: transform .3s ease; margin: 8px 0 6px; display: block; } .ss-card:hover .ss-icon { transform: scale(1.15) translateY(-2px); } .ss-card h3 { font-size: .88rem !important; font-weight: 700 !important; color: #fff !important; letter-spacing: .02em; margin: 0 !important; } .ss-card p { font-size: .78rem; color: rgba(255, 255, 255, .72); line-height: 1.6; margin: 0; flex: 1; } .ss-arrow { font-size: .9rem; color: var(--gg-gold); opacity: 0; transform: translateX(-8px); transition: opacity .3s, transform .3s; margin-top: 4px; display: block; } .ss-card:hover .ss-arrow { opacity: 1; transform: translateX(0); } /* Mobile: swipeable horizontal carousel instead of a stacked grid */ @media (max-width: 767.98px) { .ss-grid { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; gap: 12px; background: none; border-radius: 0; padding-bottom: 6px; } /* Hide the native scrollbar sliver — it read as an unstyled leftover element rather than an intentional swipe hint; the dots below (ss-dots) communicate position instead. */ .ss-grid { scrollbar-width: none; -ms-overflow-style: none; padding-bottom: 0; } .ss-grid::-webkit-scrollbar { display: none; } .ss-card { /* Full width — no adjacent-card sliver peeking in from the edges, which read as garbled/cut-off text rather than an intentional carousel. */ flex: 0 0 100%; scroll-snap-align: start; border-radius: 10px; } .ss-dots { display: flex; justify-content: center; gap: 8px; margin-top: 20px; } .ss-dot { width: 7px; height: 7px; border-radius: 50%; background: rgba(255, 255, 255, .2); transition: var(--gg-trans); } .ss-dot-active { background: var(--gg-gold); width: 20px; border-radius: 4px; } } @media (min-width: 768px) { .ss-dots { display: none; } } /* ── Why Gong (4 differentiators) ────────────────────────────────────────── */ .why-gong { padding: 88px 0 96px; background: #fff; } /* ── Hakkımızda (About) premium hero — no photo, dark + gold ─────────────── */ .about-hero { background: var(--gg-dark); padding: 64px 0 56px; } .about-hero-breadcrumb { display: flex; align-items: center; gap: 8px; font-size: .78rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--gg-gold-lt); margin-bottom: 14px; } .about-hero-breadcrumb a { color: rgba(255, 255, 255, .7); } .about-hero-breadcrumb a:hover { color: var(--gg-gold-lt); } .about-hero-breadcrumb i { font-size: .65rem; color: rgba(255, 255, 255, .4); } .about-hero h1 { color: #fff; font-size: clamp(1.6rem, 3.6vw, 2.6rem); font-weight: 700; margin: 0; } /* ── Hakkımızda: değerler bölümü ──────────────────────────────────────────── */ .about-values { padding: 88px 0 96px; background: #fff; } .about-values-heading { font-size: clamp(1.1rem, 2.5vw, 1.7rem) !important; font-weight: 300 !important; color: var(--gg-dark) !important; max-width: 560px; margin: 0 auto !important; line-height: 1.5 !important; } .about-values-grid { grid-template-columns: repeat(3, 1fr) !important; } @media (max-width: 991.98px) { .about-values-grid { grid-template-columns: repeat(2, 1fr) !important; } } @media (max-width: 479.98px) { .about-values-grid { grid-template-columns: 1fr !important; } } .wg-badge { display: inline-block; font-size: .68rem; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: var(--gg-dark); border: 1px solid #ccc; padding: 5px 18px; border-radius: 20px; margin-bottom: 10px; } .wg-sub { font-size: .9rem; color: var(--gg-mid); max-width: 480px; margin: 0 auto 0; } .wg-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; margin-top: 52px; } .wg-item { background: #fafaf8; border: 1px solid #eeecea; border-radius: 10px; padding: 40px 28px 36px; text-align: center; transition: var(--gg-trans); position: relative; overflow: hidden; } .wg-item::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: linear-gradient(90deg, var(--gg-gold), var(--gg-gold-lt)); transform: scaleX(0); transition: transform .4s ease; } .wg-item:hover { transform: translateY(-5px); box-shadow: var(--gg-shadow); } .wg-item:hover::before { transform: scaleX(1); } .wg-icon-wrap { width: 68px; height: 68px; border-radius: 50%; background: var(--gg-dark); display: flex; align-items: center; justify-content: center; margin: 0 auto 20px; transition: transform .3s ease; } .wg-item:hover .wg-icon-wrap { transform: scale(1.1) rotate(-5deg); } .wg-icon-wrap i { font-size: 1.7rem; color: var(--gg-gold); display: block; } .wg-item h3 { font-size: .85rem !important; font-weight: 700 !important; text-transform: uppercase !important; letter-spacing: .07em !important; color: var(--gg-dark) !important; margin-bottom: 14px !important; } .wg-item p { font-size: .8rem; color: var(--gg-mid); line-height: 1.7; margin: 0; } @media (max-width: 991.98px) { .wg-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 479.98px) { .wg-grid { grid-template-columns: 1fr; } } /* ── Slide-in from sides (for how-we-work steps) ─────────────────────────── */ .gg-reveal.gg-from-left { transform: translateX(-60px); } .gg-reveal.gg-from-right { transform: translateX(60px); } .gg-reveal.gg-from-left.gg-visible, .gg-reveal.gg-from-right.gg-visible { transform: translateX(0); opacity: 1; } /* ── How We Work timeline ────────────────────────────────────────────────── */ .how-we-work { background: var(--gg-light); padding: 88px 0 96px; } .hww-badge { display: inline-block; font-size: .68rem; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: var(--gg-dark); border: 1px solid #ccc; padding: 5px 18px; border-radius: 20px; margin-bottom: 10px; } .hww-title { font-size: clamp(1.1rem, 2.5vw, 1.7rem) !important; font-weight: 300 !important; color: var(--gg-dark) !important; max-width: 480px; margin: 0 auto 0 !important; line-height: 1.5 !important; } .hww-steps { display: flex; flex-direction: column; gap: 20px; margin-top: 52px; } .hww-step { display: grid; grid-template-columns: 1fr 80px 1fr; align-items: center; gap: 0; min-height: 140px; } .hww-cell { padding: 36px 40px; border-radius: 10px; min-height: 140px; display: flex; flex-direction: column; justify-content: center; } .hww-cell--fill { background: #fff; border: 1px solid #eeecea; box-shadow: 0 2px 12px rgba(0, 0, 0, .04); } .hww-cell i { font-size: 1.8rem; color: var(--gg-gold); margin-bottom: 10px; display: block; } .hww-cell h3 { font-size: .95rem !important; font-weight: 700 !important; color: var(--gg-dark) !important; margin-bottom: 8px !important; } .hww-cell p { font-size: .82rem; color: var(--gg-mid); line-height: 1.7; margin: 0; } .hww-node { display: flex; align-items: center; justify-content: center; } .hww-node-circle { width: 56px; height: 56px; flex-shrink: 0; border-radius: 50%; border: 2px solid var(--gg-gold); background: var(--gg-dark); color: var(--gg-gold); font-size: .75rem; font-weight: 900; font-family: 'Montserrat', sans-serif; letter-spacing: .08em; display: flex; align-items: center; justify-content: center; position: relative; z-index: 1; box-shadow: 0 4px 16px rgba(0, 0, 0, .18); } .hww-node-circle::before, .hww-node-circle::after { content: ''; position: absolute; left: 50%; width: 1px; background: rgba(0, 0, 0, .1); transform: translateX(-50%); } .hww-node-circle::before { bottom: 100%; height: 40px; } .hww-node-circle::after { top: 100%; height: 40px; } .hww-step:first-child .hww-node-circle::before { display: none; } .hww-step:last-child .hww-node-circle::after { display: none; } @media (max-width: 767.98px) { .hww-steps { gap: 0; } .hww-step { grid-template-columns: 56px 1fr; grid-template-rows: auto; min-height: 0; } .hww-cell:not(.hww-cell--fill) { display: none; } .hww-node { grid-column: 1; grid-row: 1; align-items: flex-start; align-self: stretch; padding-top: 36px; } .hww-cell--fill { grid-column: 2; grid-row: 1; padding: 24px 20px; } .hww-node-circle::before, .hww-node-circle::after { display: none; } /* Desktop connects circles with a line above/below each node; mobile stacks the same circles in one left-hand column, so a single line down that column — masked by each opaque circle where it passes behind one — reads as one continuous connected path instead. The circle's vertical center sits 64px down (36px padding-top + half of the 56px circle), so the line is trimmed to start/end there for the first/last step instead of dangling above or below the timeline. */ .hww-node { position: relative; } .hww-node::before { content: ''; position: absolute; left: 50%; top: 0; bottom: 0; width: 2px; transform: translateX(-50%); background: rgba(184, 148, 42, .35); z-index: 0; } .hww-step:first-child .hww-node::before { top: 64px; } .hww-step:last-child .hww-node::before { bottom: auto; height: 64px; } } /* ── Hizmetlerimiz: mobile-only Swiper carousel ───────────────────────────── */ .ss-mobile-swiper-wrap { display: none; } @media (max-width: 767.98px) { .ss-grid, .ss-dots { display: none; } .ss-mobile-swiper-wrap { display: block; margin: 56px auto; max-width: 420px; } .ss-mobile-swiper { position: relative; padding-bottom: 44px; overflow: visible; } .ss-mobile-swiper .swiper-wrapper { /* Let autoplay/transition timing settle without layout jump. */ align-items: stretch; } .ss-mobile-card { position: relative; height: 360px; overflow: hidden; background: #111; border: 1px solid rgba(255, 255, 255, .08); border-radius: 14px; box-shadow: 0 12px 32px rgba(0, 0, 0, .35); display: block; } .ss-mobile-card-media { position: absolute; inset: 0; background-size: cover; background-position: center; z-index: 0; } .ss-mobile-card-media::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(10, 10, 10, .3) 0%, rgba(10, 10, 10, .86) 78%); } .ss-mobile-card-body { position: relative; z-index: 1; height: 100%; display: flex; flex-direction: column; padding: 32px 46px; } .ss-mobile-num { font-size: .7rem; font-weight: 900; letter-spacing: .1em; color: rgba(255, 255, 255, .3); font-family: 'Montserrat', sans-serif; } .ss-mobile-icon { font-size: 1.7rem; color: var(--gg-gold); margin: 10px 0 12px; display: block; } .ss-mobile-card-body h3 { font-size: 1rem !important; font-weight: 700 !important; color: #fff !important; margin-bottom: 8px !important; } .ss-mobile-card-body p { font-size: .84rem; color: rgba(255, 255, 255, .72); line-height: 1.65; margin: 0; } .ss-mobile-pagination { position: absolute; bottom: 0; left: 0; right: 0; } .ss-mobile-pagination .swiper-pagination-bullet { background: rgba(255, 255, 255, .3); opacity: 1; } .ss-mobile-pagination .swiper-pagination-bullet-active { background: var(--gg-gold); } /* Clickable prev/next controls, positioned as circular buttons straddling the card's vertical center — the reliable way to advance this carousel, alongside the native horizontal swipe gesture Swiper already handles without fighting the page's own vertical scroll. */ .ss-mobile-nav { position: absolute; top: 45%; transform: translateY(-50%); z-index: 5; width: 36px; height: 36px; border-radius: 50%; background: rgba(15, 15, 15, .55); border: 1px solid rgba(255, 255, 255, .18); color: #fff; font-size: 1rem; display: flex; align-items: center; justify-content: center; cursor: pointer; } .ss-mobile-prev { left: 8px; } .ss-mobile-next { right: 8px; } .ss-mobile-nav.swiper-button-disabled { opacity: .35; } } /* ── Logo marquee (infinite scroll) ──────────────────────────────────────── */ @keyframes gg-marquee { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } } .logo-marquee { overflow: hidden; padding: 8px 0; } .logo-marquee-track { display: flex; gap: 48px; align-items: center; width: max-content; animation: gg-marquee 32s linear infinite; } .logo-marquee-track:hover { animation-play-state: paused; } .logo-marquee .logo-strip-item img { max-height: 56px; width: auto; filter: grayscale(1) opacity(.45); transition: filter .4s ease; } .logo-marquee .logo-strip-item img:hover { filter: grayscale(0) opacity(1); } /* ── Desktop mega-menu safety override ───────────────────────────────────── */ @media (min-width: 992px) { /* CSS :hover shows the container; JS .menu-item-hover also shows it as backup */ body.is-expanded-menu .menu-item.mega-menu:hover>.mega-menu-content, body.is-expanded-menu .menu-item.mega-menu.menu-item-hover>.mega-menu-content { display: block !important; opacity: 1 !important; visibility: visible !important; pointer-events: auto !important; z-index: 399 !important; margin-top: 0 !important; } /* Unhide inner children (Canvas theme hides them without .menu-item-hover) */ body.is-expanded-menu .menu-item.mega-menu.menu-item-hover>.mega-menu-content>* { display: block !important; } } /* ── Animation keyframes ─────────────────────────────────────────────────── */ @keyframes gg-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } } @keyframes gg-pulse-ring { 0% { box-shadow: 0 0 0 0 rgba(184, 148, 42, .45); } 70% { box-shadow: 0 0 0 14px rgba(184, 148, 42, 0); } 100% { box-shadow: 0 0 0 0 rgba(184, 148, 42, 0); } } @keyframes gg-shimmer { 0% { background-position: -200% center; } 100% { background-position: 200% center; } } @keyframes gg-shine-sweep { 0% { left: -120%; } 100% { left: 120%; } } @keyframes gg-badge-glow { 0%, 100% { box-shadow: 0 0 0 0 rgba(184, 148, 42, 0); } 50% { box-shadow: 0 0 12px 3px rgba(184, 148, 42, .35); } } /* Apply float to icons on hover (overrides scale-only) */ .ss-card:hover .ss-icon { animation: gg-float 2s ease-in-out infinite !important; transform: none !important; } /* Pulse ring on wg icon hover */ .wg-item:hover .wg-icon-wrap { animation: gg-pulse-ring 1.2s ease-out infinite; transform: scale(1.05) !important; } /* Gold badge glow */ .ss-badge { animation: gg-badge-glow 3s ease-in-out infinite; } /* Shine sweep overlay on ss-card hover */ .ss-card { overflow: hidden; } .ss-card::before { content: ''; position: absolute; top: 0; left: -120%; width: 60%; height: 100%; background: linear-gradient(105deg, transparent 40%, rgba(255, 255, 255, .04) 50%, transparent 60%); pointer-events: none; transition: none; } .ss-card:hover::before { animation: gg-shine-sweep .6s ease forwards; } /* Gradient text shimmer for showcase heading */ .ss-heading { background: linear-gradient(90deg, #fff 0%, var(--gg-gold-lt) 40%, #fff 60%, #ccc 100%); background-size: 200% auto; -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; animation: gg-shimmer 5s linear infinite !important; } /* Stats number count-up visual: bold gold color */ .stat-number { color: var(--gg-gold); font-weight: 700; } /* ── Testimonials Swiper ──────────────────────────────────────────────────── */ .testimonials-swiper { padding-bottom: 48px !important; } .testimonials-swiper .swiper-slide { height: auto; } .testimonials-swiper .testimonial-card { height: 100%; } .testimonials-pagination { bottom: 0 !important; } .testimonials-pagination .swiper-pagination-bullet { background: var(--gg-gold) !important; opacity: .35; width: 8px; height: 8px; } .testimonials-pagination .swiper-pagination-bullet-active { opacity: 1; width: 24px; border-radius: 4px; transition: width .3s ease; } /* ═══════════════════════════════════════════════════════════════════════════ Inner pages (service pages, hakkımızda, iletişim, İK, referanslar, projeler) — bring the rest of the site up to the same premium bar as the homepage. ═══════════════════════════════════════════════════════════════════════════ */ /* ── Global form styling (Contact / HR / Quote forms all share these classes) */ .form-group label, .form-widget label, #template-contactform label, .card-body label { font-size: .8rem; font-weight: 700; letter-spacing: .02em; color: var(--gg-dark); margin-bottom: 6px; display: inline-block; } /* Dark-card forms (e.g. teklif-al) need light labels instead of the default dark ones */ .card.bg-dark label, .card.dark label, .dark .form-group label { color: rgba(255, 255, 255, .85) !important; } .card.bg-dark label small, .card.dark label small { color: var(--gg-gold) !important; } .form-group label small, .card-body label small { color: var(--gg-gold); } .form-control, .form-select { border: 1px solid #e3e1dc !important; border-radius: var(--gg-radius) !important; padding: 11px 14px !important; font-size: .9rem !important; transition: border-color .2s ease, box-shadow .2s ease !important; } .form-control:focus, .form-select:focus { border-color: var(--gg-gold) !important; box-shadow: 0 0 0 3px rgba(184, 148, 42, .14) !important; } .form-check-input:checked { background-color: var(--gg-gold) !important; border-color: var(--gg-gold) !important; } .form-check-input:focus { border-color: var(--gg-gold) !important; box-shadow: 0 0 0 3px rgba(184, 148, 42, .14) !important; } .btn-check:checked+.btn-outline-secondary, .btn-check:active+.btn-outline-secondary { background-color: var(--gg-dark) !important; border-color: var(--gg-dark) !important; color: #fff !important; } .btn-outline-secondary { border-color: #ddd !important; color: var(--gg-mid) !important; } .btn-outline-secondary:hover { border-color: var(--gg-gold) !important; color: var(--gg-gold) !important; background: transparent !important; } /* Submit buttons across all forms */ #template-contactform button[type='submit'], .form-widget button[type='submit'], .card-body button[type='submit'] { background: var(--gg-dark) !important; color: #fff !important; border: none !important; font-weight: 700 !important; letter-spacing: .05em !important; padding: 13px 32px !important; transition: background .25s ease, transform .2s ease !important; } #template-contactform button[type='submit']:hover, .form-widget button[type='submit']:hover, .card-body button[type='submit']:hover { background: var(--gg-gold) !important; transform: translateY(-1px); } /* ── Rich content pages: hero title/breadcrumb overlay ──────────────────── */ .hero-banner { position: relative; } .hero-banner::after { content: ''; position: absolute; inset: 0; background: linear-gradient(to top, rgba(0, 0, 0, .78) 0%, rgba(0, 0, 0, .25) 55%, transparent 100%); z-index: 1; pointer-events: none; } .hero-banner-caption { position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; padding: 0 0 36px; } .hero-banner-caption .container { position: relative; } .hero-banner-caption h1 { color: #fff !important; font-size: clamp(1.5rem, 3.6vw, 2.4rem) !important; font-weight: 700 !important; margin: 0 !important; text-shadow: 0 2px 12px rgba(0, 0, 0, .4); } .hero-banner-caption .hero-breadcrumb { display: flex; align-items: center; gap: 8px; font-size: .78rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--gg-gold-lt); margin-bottom: 10px; } .hero-banner-caption .hero-breadcrumb a { color: rgba(255, 255, 255, .7); } .hero-banner-caption .hero-breadcrumb a:hover { color: var(--gg-gold-lt); } .hero-banner-caption .hero-breadcrumb i { font-size: .65rem; color: rgba(255, 255, 255, .4); } /* ── Rich content typography ─────────────────────────────────────────────── */ #content .postcontent h3, #content main h3 { font-size: 1.5rem !important; font-weight: 700 !important; color: var(--gg-dark); margin-bottom: 18px !important; } #content .postcontent p, #content main p { line-height: 1.85; color: var(--gg-mid); } #content .postcontent .dropcap, #content main .dropcap { color: var(--gg-gold) !important; font-family: 'Montserrat', sans-serif; font-weight: 700 !important; } /* ── Promo CTA band (service-page bottom banner) ────────────────────────── */ .promo.promo-light { background: var(--gg-dark) !important; border-radius: var(--gg-radius); position: relative; overflow: hidden; } /* .promo-full is meant to sit flush (no radius, no side gaps) against the FiveStarBand directly below it; the rule above out-specifies promo-full's own radius reset, leaving rounded corners that show the page's white background peeking through right at the seam between the two dark bands. */ .promo.promo-light.promo-full { border-radius: 0; } .promo.promo-light::before { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(184, 148, 42, .12), transparent 60%); pointer-events: none; } .promo.promo-light h3 { color: #fff !important; font-size: 1.15rem !important; font-weight: 600 !important; position: relative; } .promo.promo-light .button { background: linear-gradient(90deg, var(--gg-gold), var(--gg-gold-lt)) !important; color: #141414 !important; font-weight: 700 !important; border: none !important; position: relative; } .promo.promo-light .button:hover { filter: brightness(1.08); } /* ── FiveStarBand: trust strip, gold accents on dark ────────────────────── */ .section.dark.mb-0:has(.gong-cards) { background: var(--gg-dark) !important; padding: 40px 0 !important; } .payments-info h3 { color: #fff !important; font-size: 1.15rem !important; font-weight: 600 !important; } .payments-info h3 span { color: var(--gg-gold) !important; font-weight: 700 !important; } .gong-cards img { filter: sepia(1) saturate(4) hue-rotate(2deg) brightness(.95); } @media (max-width: 991.98px) { .payments-info { flex-wrap: nowrap; align-items: center; justify-content: space-between; gap: 16px; } .payments-info>[class*='col-'] { flex: 1 1 auto; min-width: 0; width: auto; max-width: none; display: flex; align-items: center; } .payments-info>[class*='col-']:last-child { flex: 0 0 auto; } .payments-info h3 { font-size: 1rem !important; line-height: 1.3; margin: 0 !important; } .gong-cards { margin: 0 !important; display: flex !important; flex-wrap: nowrap !important; align-items: center; justify-content: flex-end; } .gong-cards li { width: 22px; margin: 0 2px; } .gong-cards img { width: 22px; height: 22px; display: block; } } @media (max-width: 479.98px) { .payments-info h3 { font-size: .88rem !important; } .gong-cards li { width: 17px; margin: 0 1px; flex-shrink: 0; } .gong-cards img { width: 17px; height: 17px; display: block; } } /* ── References page: premium logo grid ─────────────────────────────────── */ .references-grid-wrap { background: var(--gg-light); padding: 20px 0 10px; } .references-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 16px; } .references-grid .reference-item { background: #fff; border: 1px solid #eeecea; border-radius: var(--gg-radius); display: flex; align-items: center; justify-content: center; padding: 24px 16px; min-height: 110px; transition: var(--gg-trans); } .references-grid .reference-item:hover { box-shadow: var(--gg-shadow); transform: translateY(-3px); border-color: var(--gg-gold); } .references-grid .reference-item img { max-width: 100%; max-height: 56px; width: auto; filter: grayscale(1) opacity(.7); transition: filter .3s ease; } .references-grid .reference-item:hover img { filter: grayscale(0) opacity(1); } /* ── Projects page: premium card hover ───────────────────────────────────── */ .project-card, .portfolio-item { border-radius: var(--gg-radius); overflow: hidden; transition: var(--gg-trans); } .project-card:hover, .portfolio-item:hover { box-shadow: var(--gg-shadow); transform: translateY(-4px); } /* ── Contact page polish ─────────────────────────────────────────────────── */ .gmap-embed { filter: grayscale(.25); } aside.sidebar address { font-size: .88rem; line-height: 1.8; color: var(--gg-mid); font-style: normal; } aside.sidebar strong { color: var(--gg-dark); } /* ── Haberler (News) — listing hero + card grid ──────────────────────────── */ .news-hero { background: var(--gg-dark); padding: 64px 0 48px; text-align: center; } .news-hero-badge { display: inline-block; font-size: .68rem; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: var(--gg-gold); border: 1px solid rgba(184, 148, 42, .4); padding: 5px 18px; border-radius: 20px; margin-bottom: 16px; } .news-hero h1 { color: #fff; font-size: clamp(1.2rem, 2.6vw, 1.8rem); font-weight: 300; max-width: 640px; margin: 0 auto; } .news-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 28px; margin-top: 8px; } .news-card { display: block; text-decoration: none; background: #fff; border: 1px solid #eeecea; border-radius: var(--gg-radius); overflow: hidden; transition: var(--gg-trans); } .news-card:hover { box-shadow: var(--gg-shadow); transform: translateY(-4px); border-color: var(--gg-gold); } .news-card-media { height: 190px; background-size: cover; background-position: center; } .news-card-body { padding: 22px 24px 26px; } .news-card-date { font-size: .72rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--gg-gold); } .news-card h3 { font-size: 1.05rem !important; font-weight: 700 !important; color: var(--gg-dark) !important; margin: 10px 0 8px !important; line-height: 1.35 !important; } .news-card p { font-size: .85rem; color: var(--gg-mid); line-height: 1.6; margin-bottom: 12px; } .news-card-more { font-size: .78rem; font-weight: 700; color: var(--gg-dark); display: inline-flex; align-items: center; gap: 6px; } .news-card:hover .news-card-more { color: var(--gg-gold); } .news-pagination { display: flex; justify-content: center; gap: 8px; margin-top: 40px; } .news-pagination a { display: flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 50%; border: 1px solid #eeecea; color: var(--gg-mid); font-size: .82rem; font-weight: 700; } .news-pagination a:hover, .news-pagination a.active { background: var(--gg-dark); border-color: var(--gg-dark); color: var(--gg-gold); } /* ── Haberler — article detail page ──────────────────────────────────────── */ .news-video-embed { position: relative; padding-top: 56.25%; margin-bottom: 32px; border-radius: var(--gg-radius); overflow: hidden; background: #000; } .news-video-embed iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: none; } .news-article-body { font-size: .96rem; line-height: 1.9; color: #333; } .news-article-body h1, .news-article-body h2, .news-article-body h3 { color: var(--gg-dark); font-weight: 700; margin: 1.4em 0 .6em; } .news-article-body img { max-width: 100%; height: auto; border-radius: var(--gg-radius); margin: 20px 0; } .news-article-body blockquote { border-left: 3px solid var(--gg-gold); padding-left: 20px; margin: 24px 0; color: var(--gg-mid); font-style: italic; } .news-article-body a { color: var(--gg-gold); } .news-share { display: flex; align-items: center; gap: 10px; margin-top: 40px; padding-top: 24px; border-top: 1px solid #eeecea; } .news-share-label { font-size: .78rem; font-weight: 700; color: var(--gg-mid); text-transform: uppercase; letter-spacing: .04em; margin-right: 4px; } .news-share-btn { width: 36px; height: 36px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: var(--gg-dark); color: #fff; border: none; font-size: .85rem; cursor: pointer; transition: var(--gg-trans); text-decoration: none; } .news-share-btn:hover { background: var(--gg-gold); color: #141414; transform: translateY(-2px); } /* ── 404 page ─────────────────────────────────────────────────────────────── */ .error-404-section { position: relative; min-height: 70vh; display: flex; align-items: center; justify-content: center; background: var(--gg-dark); overflow: hidden; padding: 80px 0; } .error-404-grid { position: absolute; inset: 0; background-image: linear-gradient(rgba(184, 148, 42, .05) 1px, transparent 1px), linear-gradient(90deg, rgba(184, 148, 42, .05) 1px, transparent 1px); background-size: 60px 60px; animation: gg-404-grid-pan 20s linear infinite; pointer-events: none; } @keyframes gg-404-grid-pan { to { background-position: 60px 60px; } } .error-404-glow { position: absolute; width: 600px; height: 600px; max-width: 90vw; max-height: 90vw; border-radius: 50%; background: radial-gradient(circle, rgba(184, 148, 42, .14) 0%, transparent 70%); top: 50%; left: 50%; transform: translate(-50%, -50%); pointer-events: none; animation: gg-404-pulse 4s ease-in-out infinite; } @keyframes gg-404-pulse { 0%, 100% { opacity: .6; transform: translate(-50%, -50%) scale(1); } 50% { opacity: 1; transform: translate(-50%, -50%) scale(1.12); } } .error-404-wrap { position: relative; z-index: 1; text-align: center; max-width: 680px; } .error-404-card { background: rgba(255, 255, 255, .03); border: 1px solid rgba(184, 148, 42, .18); border-radius: 20px; padding: 56px 40px; backdrop-filter: blur(6px); box-shadow: 0 30px 60px -20px rgba(0, 0, 0, .5); } @media (max-width: 575.98px) { .error-404-card { padding: 40px 20px; border-radius: 16px; } } .error-404-eyebrow { display: inline-block; font-size: .72rem; font-weight: 700; letter-spacing: 3px; color: var(--gg-gold); text-transform: uppercase; padding: 6px 16px; border: 1px solid rgba(184, 148, 42, .35); border-radius: 30px; margin-bottom: 18px; } .error-404-code { font-family: 'Montserrat', sans-serif; font-size: clamp(88px, 16vw, 140px); font-weight: 900; line-height: 1; letter-spacing: -4px; background: linear-gradient(135deg, #fff 30%, var(--gg-gold) 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; margin-bottom: 8px; } .error-404-divider { width: 60px; height: 3px; background: linear-gradient(90deg, var(--gg-gold), var(--gg-gold-lt)); margin: 20px auto 28px; border-radius: 2px; } .error-404-section h1 { font-size: clamp(1.4rem, 4vw, 2rem) !important; font-weight: 700 !important; color: #fff !important; margin-bottom: 14px !important; } .error-404-section p { font-size: 1rem; color: rgba(255, 255, 255, .6); line-height: 1.7; margin-bottom: 36px; } .error-404-actions { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; margin-bottom: 48px; } .error-404-btn-ghost.button { background: rgba(255, 255, 255, .04) !important; border: 1px solid rgba(255, 255, 255, .28) !important; color: #fff !important; } .error-404-btn-ghost.button:hover { background: rgba(184, 148, 42, .12) !important; border-color: var(--gg-gold) !important; color: var(--gg-gold) !important; } .error-404-links { border-top: 1px solid rgba(255, 255, 255, .1); padding-top: 32px; } .error-404-links-label { display: block; font-size: .8rem; color: rgba(255, 255, 255, .45); margin-bottom: 18px; } .error-404-links-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; } @media (max-width: 575.98px) { .error-404-links-grid { grid-template-columns: repeat(2, 1fr); } } .error-404-link-card { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 16px 10px; border-radius: 12px; background: rgba(255, 255, 255, .03); border: 1px solid rgba(255, 255, 255, .08); color: rgba(255, 255, 255, .78); font-size: .82rem; font-weight: 500; transition: transform .2s ease, border-color .2s ease, background .2s ease, color .2s ease; } .error-404-link-card i { font-size: 1.3rem; color: var(--gg-gold); } .error-404-link-card:hover { transform: translateY(-3px); background: rgba(184, 148, 42, .1); border-color: rgba(184, 148, 42, .4); color: #fff; }