/* ============================ KlinikBurada Pro UI v3.0 Professional dental clinic theme ============================ */ /* ---- Base Polish ---- */ html { scroll-behavior: smooth; } body { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; } /* ---- HERO VIDEO ---- */ .wp-block-cover__video-background { object-fit: cover !important; width: 100% !important; height: 100% !important; } /* Hero overlay gradient - cinematic */ .entry-content > .wp-block-cover:first-child .wp-block-cover__background { background: linear-gradient(180deg, rgba(0,0,0,0.3) 0%, rgba(0,0,0,0.5) 100%) !important; } /* Hero text glow */ .entry-content > .wp-block-cover:first-child h1, .entry-content > .wp-block-cover:first-child h2, .entry-content > .wp-block-cover:first-child .hero-heading { text-shadow: 0 2px 30px rgba(0,0,0,0.4), 0 4px 60px rgba(0,0,0,0.2); } /* Hero CTA button shine */ .entry-content > .wp-block-cover:first-child .wp-block-button__link { position: relative; overflow: hidden; transition: transform 0.3s ease, box-shadow 0.3s ease !important; } .entry-content > .wp-block-cover:first-child .wp-block-button__link::after { content: ''; position: absolute; top: -50%; left: -75%; width: 50%; height: 200%; background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent); transform: skewX(-25deg); animation: kb-btn-shine 4s ease-in-out infinite; } @keyframes kb-btn-shine { 0%,100% { left: -75%; } 50% { left: 150%; } } .entry-content > .wp-block-cover:first-child .wp-block-button__link:hover { transform: translateY(-2px) scale(1.02); box-shadow: 0 8px 30px rgba(0,0,0,0.3); } /* ============================ SECTION TRANSITIONS — fade-in on scroll Only activated when JS adds .kb-anim-ready to ============================ */ html.kb-anim-ready .kb-animate { opacity: 0; transform: translateY(40px); transition: opacity 0.7s cubic-bezier(0.4, 0, 0.2, 1), transform 0.7s cubic-bezier(0.4, 0, 0.2, 1); } html.kb-anim-ready .kb-animate.kb-visible { opacity: 1 !important; transform: translateY(0) !important; } /* Fallback: if JS doesn't run, everything stays visible */ .kb-animate { opacity: 1; transform: none; } .kb-animate-delay-1 { transition-delay: 0.1s; } .kb-animate-delay-2 { transition-delay: 0.2s; } .kb-animate-delay-3 { transition-delay: 0.3s; } .kb-animate-delay-4 { transition-delay: 0.4s; } .kb-animate-delay-5 { transition-delay: 0.5s; } /* ============================ SECTION HEADINGS — underline accent ============================ */ .entry-content .wp-block-group h2.wp-block-heading { position: relative; display: inline-block; } .entry-content .wp-block-group h2.wp-block-heading::after { content: ''; position: absolute; bottom: -8px; left: 50%; transform: translateX(-50%); width: 60px; height: 3px; background: linear-gradient(90deg, #2563EB, #06B6D4); border-radius: 3px; transition: width 0.4s ease; } .entry-content .wp-block-group:hover h2.wp-block-heading::after { width: 100px; } /* ============================ HOVER CARDS (Güven + Hizmet) — Grid layout override Kadence flex-basis:100% on desktop — force 3-col grid ============================ */ /* Trust section: 3 cards side by side */ .entry-content > .wp-block-group .wp-block-columns:has(.kb-hover-card) { display: grid !important; grid-template-columns: repeat(3, 1fr) !important; gap: 24px !important; } /* Service section: can be 2 or 3 wide */ .entry-content > .wp-block-group .wp-block-columns + .wp-block-columns:has(.kb-hover-card) { grid-template-columns: repeat(3, 1fr) !important; } /* Cards fill their grid cell */ .entry-content .wp-block-column:has(.kb-hover-card) { flex-basis: unset !important; width: auto !important; } .kb-hover-card .wp-block-cover__inner-container { opacity: 1 !important; transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1) !important; } .kb-hover-card .wp-block-cover__background { opacity: 0.4 !important; transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1) !important; } .kb-hover-card .wp-block-cover__inner-container h3 { opacity: 1 !important; transform: translateY(0); transition: transform 0.4s ease; text-shadow: 0 2px 12px rgba(0,0,0,0.5); } .kb-hover-card .wp-block-cover__inner-container p { opacity: 0.85; transition: opacity 0.4s ease, transform 0.4s ease; } .kb-hover-card .wp-block-cover__inner-container .wp-block-buttons { opacity: 0.75; transition: all 0.4s ease; transform: translateY(8px); } /* Card base */ .kb-hover-card { transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.5s cubic-bezier(0.4, 0, 0.2, 1) !important; cursor: pointer; overflow: hidden; border-radius: 16px !important; position: relative; } /* Bottom accent line */ .kb-hover-card::after { content: ''; position: absolute; bottom: 0; left: 0; right: 0; height: 4px; background: linear-gradient(90deg, #2563EB, #06B6D4); transform: scaleX(0); transform-origin: center; transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1); z-index: 2; border-radius: 0 0 16px 16px; } /* HOVER state — desktop only */ @media (hover: hover) and (pointer: fine) { .kb-hover-card:hover { transform: translateY(-8px) !important; box-shadow: 0 20px 50px rgba(0,0,0,0.25) !important; } .kb-hover-card:hover .wp-block-cover__background { opacity: 0.6 !important; } .kb-hover-card:hover .wp-block-cover__inner-container p { opacity: 1; } .kb-hover-card:hover .wp-block-cover__inner-container .wp-block-buttons { opacity: 1; transform: translateY(0); } .kb-hover-card:hover .wp-block-cover__inner-container h3 { transform: translateY(-4px); } .kb-hover-card:hover::after { transform: scaleX(1); } } /* Touch devices: always visible */ @media (hover: none) { .kb-hover-card .wp-block-cover__inner-container { opacity: 1 !important; } .kb-hover-card .wp-block-cover__background { opacity: 0.5 !important; } .kb-hover-card .wp-block-cover__inner-container .wp-block-buttons { opacity: 1; transform: translateY(0); } } /* ============================ COUNTER SECTION ============================ */ .kb-counter-section-wrapper { background: linear-gradient(135deg, #0F172A 0%, #1E3A5F 50%, #1E40AF 100%); padding: 80px 5%; position: relative; overflow: hidden; } .kb-counter-section-wrapper::before { content: ''; position: absolute; top: -50%; left: -50%; width: 200%; height: 200%; background: radial-gradient(ellipse at 30% 50%, rgba(6,182,212,0.08) 0%, transparent 60%); animation: kb-shimmer 10s ease-in-out infinite; } @keyframes kb-shimmer { 0%,100% { transform: translate(-20%, -20%); } 50% { transform: translate(20%, 20%); } } .kb-counter-wrap { max-width: 1200px; margin: 0 auto; display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; position: relative; z-index: 1; } .kb-counter-item { text-align: center; padding: 35px 20px; border-radius: 20px; background: rgba(255,255,255,0.06); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border: 1px solid rgba(255,255,255,0.08); transition: transform 0.4s ease, background 0.4s ease, box-shadow 0.4s ease; } .kb-counter-item:hover { transform: translateY(-6px); background: rgba(255,255,255,0.12); box-shadow: 0 15px 40px rgba(0,0,0,0.3); } .kb-counter-icon { font-size: 40px; color: #06B6D4; margin-bottom: 16px; filter: drop-shadow(0 0 8px rgba(6,182,212,0.3)); } .kb-counter-number { font-size: 52px; font-weight: 800; color: #FFFFFF; line-height: 1.1; margin-bottom: 8px; font-variant-numeric: tabular-nums; } .kb-counter-label { font-size: 15px; color: rgba(255,255,255,0.75); font-weight: 500; letter-spacing: 0.5px; } /* ============================ TESTIMONIAL SLIDER ============================ */ .kb-testimonial-slider-wrap { max-width: 1000px; margin: 0 auto; padding: 0 20px; } .kb-testimonial-title { text-align: center; margin-bottom: 40px; } .kb-testimonial-title h2 { color: #1E293B; font-size: 36px; font-weight: 800; margin-bottom: 10px; position: relative; display: inline-block; } .kb-testimonial-title h2::after { content: ''; position: absolute; bottom: -8px; left: 50%; transform: translateX(-50%); width: 60px; height: 3px; background: linear-gradient(90deg, #2563EB, #06B6D4); border-radius: 3px; } .kb-testimonial-title p { color: #64748B; font-size: 17px; } .kb-testimonial-slider-wrap .splide__slide { padding: 10px; } .kb-testimonial-card { background: #FFFFFF; border-radius: 20px; padding: 32px 28px; border: 1px solid #E2E8F0; box-shadow: 0 4px 20px rgba(0,0,0,0.04); transition: box-shadow 0.4s ease, transform 0.4s ease; height: 100%; display: flex; flex-direction: column; position: relative; } .kb-testimonial-card::before { content: '\201C'; position: absolute; top: 16px; right: 24px; font-size: 72px; color: rgba(37,99,235,0.08); font-family: Georgia, serif; line-height: 1; } .kb-testimonial-card:hover { box-shadow: 0 12px 40px rgba(0,0,0,0.1); transform: translateY(-4px); } .kb-testimonial-stars { color: #F59E0B; font-size: 18px; margin-bottom: 12px; } .kb-testimonial-text { color: #475569; font-size: 15px; line-height: 1.8; margin-bottom: 16px; flex: 1; font-style: italic; } .kb-testimonial-author { color: #1E293B; font-size: 14px; font-weight: 700; } .kb-testimonial-slider-wrap .splide__pagination { margin-top: 24px; } .kb-testimonial-slider-wrap .splide__pagination__page { background: #CBD5E1; width: 10px; height: 10px; border-radius: 50%; transition: all 0.3s ease; border: none; margin: 0 5px; } .kb-testimonial-slider-wrap .splide__pagination__page.is-active { background: #2563EB; transform: scale(1.4); } /* ============================ APPOINTMENT FORM ============================ */ .kb-appointment-section-wrapper { background: linear-gradient(135deg, #F0F9FF 0%, #DBEAFE 100%); padding: 80px 5%; position: relative; } .kb-appointment-section-wrapper::before { content: ''; position: absolute; top: 0; right: 0; width: 300px; height: 300px; background: radial-gradient(circle, rgba(37,99,235,0.06) 0%, transparent 70%); border-radius: 50%; } .kb-appointment-inner { max-width: 1100px; margin: 0 auto; display: grid; grid-template-columns: 1fr 1fr; gap: 50px; align-items: start; } .kb-appointment-text h2 { color: #1E293B; font-size: 36px; font-weight: 800; margin-bottom: 15px; } .kb-appointment-text > p { color: #64748B; font-size: 17px; line-height: 1.7; margin-bottom: 25px; } .kb-appointment-features { display: flex; flex-direction: column; gap: 14px; } .kb-appointment-features span { color: #475569; font-size: 15px; display: flex; align-items: center; gap: 12px; } .kb-appointment-features i { color: #10B981; font-size: 20px; } .kb-appointment-form { background: #FFFFFF; border-radius: 24px; padding: 40px; box-shadow: 0 20px 60px rgba(0,0,0,0.08); border: 1px solid rgba(226,232,240,0.6); } .kb-form-group { margin-bottom: 18px; } .kb-form-group label { display: block; color: #1E293B; font-size: 14px; font-weight: 600; margin-bottom: 6px; } .kb-form-group label i { color: #2563EB; margin-right: 6px; } .kb-form-group input, .kb-form-group select, .kb-form-group textarea { width: 100%; padding: 14px 18px; border: 2px solid #E2E8F0; border-radius: 12px; font-size: 15px; color: #1E293B; transition: border-color 0.3s ease, box-shadow 0.3s ease; background: #F8FAFC; font-family: inherit; box-sizing: border-box; } .kb-form-group input:focus, .kb-form-group select:focus, .kb-form-group textarea:focus { outline: none; border-color: #2563EB; box-shadow: 0 0 0 4px rgba(37,99,235,0.1); background: #FFFFFF; } .kb-appointment-submit { width: 100%; padding: 18px; background: linear-gradient(135deg, #25D366 0%, #128C7E 100%); color: #FFFFFF; border: none; border-radius: 14px; font-size: 17px; font-weight: 700; cursor: pointer; transition: all 0.3s ease; display: flex; align-items: center; justify-content: center; gap: 10px; margin-top: 8px; position: relative; overflow: hidden; } .kb-appointment-submit::after { content: ''; position: absolute; top: -50%; left: -75%; width: 50%; height: 200%; background: linear-gradient(90deg, transparent, rgba(255,255,255,0.15), transparent); transform: skewX(-25deg); animation: kb-btn-shine 5s ease-in-out infinite; } .kb-appointment-submit:hover { transform: translateY(-2px); box-shadow: 0 12px 35px rgba(37,211,102,0.4); } .kb-appointment-submit i { font-size: 22px; } /* ============================ GALLERY ENHANCEMENT ============================ */ .wp-block-image { overflow: hidden; border-radius: 12px; } .wp-block-image img { transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1), filter 0.6s ease !important; border-radius: 12px; } .wp-block-image:hover img { transform: scale(1.05); filter: brightness(1.05); } /* ============================ BLOG GRID ============================ */ .wp-block-latest-posts__list li { transition: transform 0.4s ease, box-shadow 0.4s ease; border-radius: 16px; overflow: hidden; background: #fff; box-shadow: 0 2px 10px rgba(0,0,0,0.04); } .wp-block-latest-posts__list li:hover { transform: translateY(-6px); box-shadow: 0 15px 40px rgba(0,0,0,0.1); } .wp-block-latest-posts__featured-image img { transition: transform 0.6s ease !important; } .wp-block-latest-posts__list li:hover .wp-block-latest-posts__featured-image img { transform: scale(1.06); } /* ============================ SECTION SEPARATORS — subtle dividers ============================ */ .entry-content > .wp-block-group + .wp-block-group { border-top: 1px solid rgba(0,0,0,0.04); } /* White section padding consistency */ .entry-content > .wp-block-group { padding-top: 60px; padding-bottom: 60px; } /* Ensure all content blocks are visible by default */ .entry-content > .wp-block-group, .entry-content > .wp-block-cover, .entry-content .wp-block-column, .entry-content .wp-block-image, .entry-content .wp-block-latest-posts__list li { opacity: 1; } /* ============================ IMAGES — lazy load fix + reveal ============================ */ img[loading="lazy"] { opacity: 1 !important; } .wp-block-cover { position: relative; overflow: hidden; } .wp-block-cover__image-background, .wp-block-cover img { opacity: 1 !important; } /* ============================ CTA PULSE on gradient buttons ============================ */ .has-luminous-vivid-orange-to-vivid-red-gradient-background .wp-block-button__link { animation: kb-cta-pulse 2.5s ease-in-out infinite; } @keyframes kb-cta-pulse { 0%,100% { box-shadow: 0 0 0 0 rgba(255,255,255,0.4); } 50% { box-shadow: 0 0 0 15px rgba(255,255,255,0); } } /* ============================ DOCTOR SECTION — polish ============================ */ .entry-content .wp-block-column .wp-block-image img { border-radius: 16px; } /* ============================ RESPONSIVE ============================ */ @media (max-width: 1024px) { .entry-content > .wp-block-group .wp-block-columns:has(.kb-hover-card) { grid-template-columns: repeat(2, 1fr) !important; } .kb-counter-wrap { grid-template-columns: repeat(2, 1fr); gap: 16px; } .kb-counter-number { font-size: 40px; } .kb-appointment-inner { grid-template-columns: 1fr; gap: 30px; } } @media (max-width: 768px) { .entry-content > .wp-block-group .wp-block-columns:has(.kb-hover-card) { grid-template-columns: 1fr !important; } .kb-hover-card .wp-block-cover__inner-container { opacity: 1 !important; } .kb-hover-card .wp-block-cover__background { opacity: 0.5 !important; } .kb-hover-card .wp-block-cover__inner-container .wp-block-buttons { opacity: 1; transform: translateY(0); } .kb-counter-wrap { grid-template-columns: repeat(2, 1fr); gap: 12px; } .kb-counter-item { padding: 20px 12px; } .kb-counter-number { font-size: 34px; } .kb-counter-icon { font-size: 28px; } .kb-counter-label { font-size: 13px; } .kb-appointment-form { padding: 28px 22px; } .kb-appointment-text h2 { font-size: 28px; } .entry-content > .wp-block-group { padding-top: 40px; padding-bottom: 40px; } .entry-content .wp-block-group h2.wp-block-heading::after { bottom: -6px; width: 40px; } .wp-block-columns { flex-wrap: wrap !important; } } @media (max-width: 480px) { .kb-counter-wrap { grid-template-columns: repeat(2, 1fr); gap: 8px; } .kb-counter-number { font-size: 28px; } .kb-counter-item { padding: 14px 8px; border-radius: 12px; } } /* Demo site basliklar ortali — display block fix */ .entry-content h2.wp-block-heading, .entry-content h3.wp-block-heading, h2.wp-block-heading.has-text-align-center, h3.wp-block-heading.has-text-align-center { text-align: center !important; display: block !important; width: 100% !important; }