/*
Theme Name: Emlak Hesaplama Pro
Description: Modern ve profesyonel gayrimenkul hesaplama araçları WordPress teması - Güncellenmiş Sürüm
Version: 2.1
Author: Salih Kanpara
Text Domain: gayrimenkul-modern
Requires at least: 5.0
Tested up to: 6.4
Requires PHP: 7.4
License: GPL v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
*/
/* Modern CSS Reset */
*, *::before, *::after{
box-sizing: border-box;
margin: 0;
padding: 0;
}
html{
scroll-behavior: smooth;
}
body{
font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
line-height: 1.6;
color: #0f172a;
background: #ffffff;
overflow-x: hidden;
}
/* Modern Container */
.container{
max-width: 1400px;
margin: 0 auto;
padding: 0 1.5rem;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
text-align: center;
}
/* Modern Header */
.site-header{
position: fixed;
top: 0;
left: 0;
right: 0;
z-index: 1000;
background: rgba(255, 255, 255, 0.95);
backdrop-filter: blur(20px);
border-bottom: 1px solid rgba(0, 0, 0, 0.08);
transition: all 0.3s ease;
}
.site-header.scrolled{
background: rgba(255, 255, 255, 0.98);
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
}
.header-content{
display: flex;
align-items: center;
justify-content: space-between;
padding: 1rem 0;
max-width: 1400px;
margin: 0 auto;
padding-left: 1.5rem;
padding-right: 1.5rem;
width: 100%;
}
/* Modern Logo */
.logo{
display: flex;
align-items: center;
gap: 0.75rem;
text-decoration: none;
color: #0f172a;
font-weight: 700;
font-size: 1.25rem;
transition: transform 0.3s ease;
}
.logo:hover{
transform: scale(1.05);
}
.logo img{
width: 48px;
height: 48px;
border-radius: 12px;
box-shadow: 0 4px 12px rgba(0, 61, 165, 0.15);
transition: all 0.3s ease;
object-fit: contain;
display: block;
}
.logo:hover img{
box-shadow: 0 6px 20px rgba(0, 61, 165, 0.25);
transform: scale(1.05);
}
/* Logo cache busting */
.logo img{
transition: all 0.3s ease;
}
.logo img[src*="logo-modern-house"]{
filter: drop-shadow(0 2px 4px rgba(0, 61, 165, 0.1));
}
/* Modern Navigation */
.main-nav{
display: flex;
gap: 2rem;
align-items: center;
}
.nav-item{
position: relative;
}
.nav-link{
color: #374151;
text-decoration: none;
font-weight: 500;
font-size: 0.95rem;
padding: 0.5rem 1rem;
border-radius: 8px;
transition: all 0.3s ease;
display: flex;
align-items: center;
gap: 0.5rem;
}
.nav-link:hover{
color: #003DA5;
background: rgba(0, 61, 165, 0.08);
transform: translateY(-1px);
}
/* Modern Dropdown */
.dropdown{
position: relative;
}
.dropdown-content{
position: absolute;
top: 100%;
left: 0;
background: white;
border-radius: 16px;
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
border: 1px solid rgba(0, 0, 0, 0.08);
opacity: 0;
visibility: hidden;
transform: translateY(-10px);
transition: all 0.3s ease;
z-index: 1000;
min-width: 280px;
padding: 1rem 0;
}
.dropdown:hover .dropdown-content{
opacity: 1;
visibility: visible;
transform: translateY(0);
}
.dropdown-item{
display: block;
padding: 0.75rem 1.5rem;
color: #374151;
text-decoration: none;
font-size: 0.9rem;
transition: all 0.2s ease;
border-left: 3px solid transparent;
}
.dropdown-item:hover{
background: rgba(0, 61, 165, 0.05);
color: #003DA5;
border-left-color: #003DA5;
transform: translateX(4px);
}
/* Modern CTA Button */
.cta-button{
display: inline-flex;
align-items: center;
gap: 0.5rem;
background: linear-gradient(135deg, #003DA5, #002A7A);
color: white;
padding: 0.75rem 1.5rem;
border-radius: 50px;
text-decoration: none;
font-weight: 600;
font-size: 0.9rem;
box-shadow: 0 4px 15px rgba(0, 61, 165, 0.3);
transition: all 0.3s ease;
border: none;
cursor: pointer;
}
.cta-button:hover{
transform: translateY(-2px);
box-shadow: 0 8px 25px rgba(0, 61, 165, 0.4);
background: linear-gradient(135deg, #002A7A, #001F5C);
}
/* Modern Hero Section */
.hero{
background: linear-gradient(135deg, #f8fafc 0%, #ffffff 50%, #f1f5f9 100%);
border-radius: 24px;
padding: 6rem 0;
text-align: center;
position: relative;
overflow: hidden;
margin-top: 2rem;
width: 100%;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
.hero::before{
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><defs><pattern id="grain" width="100" height="100" patternUnits="userSpaceOnUse"><circle cx="50" cy="50" r="1" fill="%23003DA5" opacity="0.1"/></pattern></defs><rect width="100" height="100" fill="url(%23grain)"/></svg>');
opacity: 0.3;
}
.hero-content{
position: relative;
z-index: 10;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
width: 100%;
max-width: 100%;
}
.hero-badge{
display: inline-block;
background: rgba(0, 61, 165, 0.1);
color: #003DA5;
padding: 0.75rem 1.5rem;
border-radius: 50px;
font-size: 0.9rem;
font-weight: 600;
margin-bottom: 2rem;
border: 1px solid rgba(0, 61, 165, 0.2);
backdrop-filter: blur(10px);
}
.hero-title{
font-size: 4rem;
font-weight: 800;
line-height: 1.1;
color: #1a202c;
margin-bottom: 1.5rem;
letter-spacing: -0.02em;
}
.hero-title .gradient-text{
background: linear-gradient(135deg, #003DA5, #DC1C2E);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
.hero-description{
font-size: 1.25rem;
color: #374151;
margin-bottom: 3rem;
max-width: 800px;
margin-left: auto;
margin-right: auto;
line-height: 1.7;
}
/* Modern Feature Tags */
.feature-tags{
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 1rem;
margin-bottom: 3rem;
}
.feature-tag{
display: inline-flex;
align-items: center;
gap: 0.5rem;
background: rgba(255, 255, 255, 0.9);
backdrop-filter: blur(10px);
color: #003DA5;
padding: 0.75rem 1.25rem;
border-radius: 50px;
font-weight: 600;
font-size: 0.9rem;
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
border: 1px solid rgba(0, 61, 165, 0.2);
transition: all 0.3s ease;
cursor: pointer;
}
.feature-tag:hover{
transform: translateY(-3px);
box-shadow: 0 8px 25px rgba(0, 61, 165, 0.2);
background: rgba(0, 61, 165, 0.05);
}
/* Modern CTA Buttons */
.hero-cta{
display: flex;
flex-direction: column;
gap: 1rem;
justify-content: center;
align-items: center;
}
.primary-cta{
display: inline-flex;
align-items: center;
gap: 0.75rem;
background: linear-gradient(135deg, #003DA5, #002A7A);
color: white;
padding: 1.25rem 2.5rem;
border-radius: 16px;
font-weight: 700;
font-size: 1.1rem;
text-decoration: none;
box-shadow: 0 8px 25px rgba(0, 61, 165, 0.3);
transition: all 0.3s ease;
border: none;
cursor: pointer;
}
.primary-cta:hover{
transform: translateY(-3px);
box-shadow: 0 15px 35px rgba(0, 61, 165, 0.4);
background: linear-gradient(135deg, #002A7A, #001F5C);
}
.secondary-cta{
display: inline-flex;
align-items: center;
gap: 0.75rem;
background: rgba(255, 255, 255, 0.9);
backdrop-filter: blur(10px);
color: #003DA5;
padding: 1.25rem 2.5rem;
border-radius: 16px;
font-weight: 700;
font-size: 1.1rem;
text-decoration: none;
border: 2px solid rgba(0, 61, 165, 0.2);
transition: all 0.3s ease;
cursor: pointer;
}
.secondary-cta:hover{
transform: translateY(-3px);
background: rgba(0, 61, 165, 0.05);
border-color: #003DA5;
}
/* Modern Tools Section */
.tools-section{
padding: 6rem 0;
}
.tools-header{
text-align: center;
margin-bottom: 4rem;
}
.tools-badge{
display: inline-block;
background: rgba(0, 61, 165, 0.1);
color: #003DA5;
padding: 0.75rem 1.5rem;
border-radius: 50px;
font-size: 0.9rem;
font-weight: 600;
margin-bottom: 1.5rem;
border: 1px solid rgba(0, 61, 165, 0.2);
}
.tools-title{
font-size: 3.5rem;
font-weight: 800;
color: #1a202c;
margin-bottom: 1.5rem;
letter-spacing: -0.02em;
}
.tools-title .gradient-text{
background: linear-gradient(135deg, #003DA5, #DC1C2E);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
.tools-description{
font-size: 1.25rem;
color: #374151;
max-width: 700px;
margin: 0 auto;
line-height: 1.7;
}
/* Modern Tools Grid */
.tools-grid{
display: grid;
grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
gap: 2rem;
margin-top: 4rem;
}
.tool-card{
background: rgba(255, 255, 255, 0.9);
backdrop-filter: blur(20px);
border: 1px solid rgba(0, 0, 0, 0.08);
border-radius: 20px;
padding: 2rem;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
transition: all 0.4s ease;
position: relative;
overflow: hidden;
text-decoration: none;
color: inherit;
cursor: pointer;
}
.tool-card::before{
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: linear-gradient(135deg, rgba(0, 61, 165, 0.05), rgba(220, 28, 46, 0.05));
opacity: 0;
transition: opacity 0.4s ease;
}
.tool-card:hover{
transform: translateY(-8px);
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
border-color: rgba(0, 61, 165, 0.2);
}
.tool-card:hover::before{
opacity: 1;
}
.tool-content{
position: relative;
z-index: 10;
}
.tool-header{
display: flex;
align-items: flex-start;
gap: 1.5rem;
margin-bottom: 1.5rem;
}
.tool-icon{
font-size: 3rem;
transition: transform 0.3s ease;
}
.tool-card:hover .tool-icon{
transform: scale(1.1);
}
.tool-info{
flex: 1;
}
.tool-title-row{
display: flex;
align-items: center;
gap: 1rem;
margin-bottom: 0.75rem;
}
.tool-title{
font-weight: 700;
font-size: 1.25rem;
color: #1a202c;
transition: color 0.3s ease;
}
.tool-card:hover .tool-title{
color: #003DA5;
}
.tool-category{
background: linear-gradient(135deg, rgba(0, 61, 165, 0.1), rgba(220, 28, 46, 0.1));
color: #003DA5;
padding: 0.25rem 0.75rem;
border-radius: 20px;
font-size: 0.75rem;
font-weight: 600;
border: 1px solid rgba(0, 61, 165, 0.2);
}
.tool-description{
font-size: 0.95rem;
color: #374151;
line-height: 1.6;
transition: color 0.3s ease;
}
.tool-card:hover .tool-description{
color: #2d3748;
}
.tool-footer{
display: flex;
align-items: center;
justify-content: space-between;
margin-top: 1.5rem;
}
.tool-cta{
font-size: 0.9rem;
font-weight: 600;
color: #003DA5;
display: flex;
align-items: center;
gap: 0.5rem;
transition: all 0.3s ease;
}
.tool-card:hover .tool-cta{
color: #002A7A;
}
.tool-cta-arrow{
transition: transform 0.3s ease;
}
.tool-card:hover .tool-cta-arrow{
transform: translateX(4px);
}
.tool-cta-icon{
width: 40px;
height: 40px;
background: linear-gradient(135deg, rgba(0, 61, 165, 0.1), rgba(220, 28, 46, 0.1));
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
transition: all 0.3s ease;
}
.tool-card:hover .tool-cta-icon{
background: linear-gradient(135deg, rgba(0, 61, 165, 0.2), rgba(220, 28, 46, 0.2));
transform: scale(1.1);
}
.tool-cta-icon span{
color: #003DA5;
font-size: 1.25rem;
font-weight: 700;
}
/* Modern Advisor Section */
.advisor-section{
background: linear-gradient(135deg, #003DA5 0%, #002A7A 50%, #DC1C2E 100%);
border-radius: 24px;
color: white;
padding: 6rem 0;
position: relative;
overflow: hidden;
margin: 4rem 0;
}
.advisor-section::before{
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><defs><pattern id="advisor-grain" width="100" height="100" patternUnits="userSpaceOnUse"><circle cx="50" cy="50" r="1" fill="white" opacity="0.1"/></pattern></defs><rect width="100" height="100" fill="url(%23advisor-grain)"/></svg>');
opacity: 0.3;
}
.advisor-content{
position: relative;
z-index: 10;
}
.advisor-header{
text-align: center;
margin-bottom: 4rem;
}
.advisor-badge{
display: inline-block;
background: rgba(255, 255, 255, 0.2);
backdrop-filter: blur(10px);
color: white;
padding: 0.75rem 1.5rem;
border-radius: 50px;
font-size: 0.9rem;
font-weight: 600;
margin-bottom: 2rem;
border: 1px solid rgba(255, 255, 255, 0.3);
}
.advisor-title{
font-size: 3.5rem;
font-weight: 800;
margin-bottom: 1.5rem;
letter-spacing: -0.02em;
}
.advisor-title .gradient-text{
background: linear-gradient(135deg, white, #f1f5f9);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
.advisor-description{
font-size: 1.25rem;
opacity: 0.9;
max-width: 700px;
margin: 0 auto;
line-height: 1.7;
}
/* Modern Advisor Card */
.advisor-card{
max-width: 900px;
margin: 0 auto;
background: rgba(255, 255, 255, 0.15);
backdrop-filter: blur(20px);
border: 1px solid rgba(255, 255, 255, 0.2);
border-radius: 20px;
padding: 2rem;
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
display: flex;
gap: 2rem;
align-items: center;
}
.advisor-photo{
width: 80px;
height: 80px;
border-radius: 50%;
object-fit: cover;
background: rgba(255, 255, 255, 0.2);
border: 3px solid rgba(255, 255, 255, 0.3);
flex-shrink: 0;
transition: all 0.3s ease;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
display: block;
}
.advisor-photo:hover{
transform: scale(1.05);
box-shadow: 0 6px 25px rgba(0, 0, 0, 0.15);
border-color: rgba(0, 61, 165, 0.3);
}
.advisor-info{
flex: 1;
min-width: 0;
}
.advisor-name{
font-weight: 700;
color: white;
font-size: 1.5rem;
margin-bottom: 0.5rem;
}
.advisor-title-text{
font-size: 1rem;
color: rgba(255, 255, 255, 0.8);
margin-bottom: 0.5rem;
}
.advisor-phone{
font-size: 1rem;
color: rgba(255, 255, 255, 0.9);
margin-bottom: 1.5rem;
font-weight: 600;
}
.advisor-actions{
display: flex;
gap: 1rem;
}
.advisor-btn{
display: inline-flex;
align-items: center;
padding: 0.75rem 1.5rem;
border-radius: 50px;
font-size: 0.9rem;
font-weight: 600;
text-decoration: none;
transition: all 0.3s ease;
border: none;
cursor: pointer;
}
.advisor-btn-primary{
background: white;
color: #003DA5;
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
}
.advisor-btn-primary:hover{
background: rgba(255, 255, 255, 0.9);
transform: translateY(-2px);
box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
}
.advisor-btn-secondary{
background: rgba(255, 255, 255, 0.2);
color: white;
border: 1px solid rgba(255, 255, 255, 0.3);
}
.advisor-btn-secondary:hover{
background: rgba(255, 255, 255, 0.3);
transform: translateY(-2px);
}
/* Modern Footer */
.site-footer{
background: #f8fafc;
color: #374151;
margin-top: 6rem;
padding: 3rem 0;
}
.footer-content{
max-width: 1400px;
margin: 0 auto;
padding: 0 1.5rem;
font-size: 0.9rem;
display: flex;
flex-direction: column;
gap: 0.5rem;
align-items: center;
text-align: center;
}
/* Mobile Menu Styles */
.mobile-menu-toggle{
display: none;
background: none;
border: none;
cursor: pointer;
padding: 0.5rem;
color: #1a202c;
transition: all 0.3s ease;
}
.mobile-menu{
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(255, 255, 255, 0.98);
backdrop-filter: blur(20px);
z-index: 9999;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 2rem;
}
.mobile-menu-content{
display: flex;
flex-direction: column;
gap: 2rem;
align-items: center;
text-align: center;
width: 100%;
max-width: 400px;
}
.mobile-nav-link{
display: block;
padding: 1rem 2rem;
color: #1a202c;
text-decoration: none;
font-weight: 600;
font-size: 1.125rem;
border-radius: 12px;
transition: all 0.3s ease;
width: 100%;
text-align: center;
}
.mobile-nav-link:hover{
background: rgba(0, 61, 165, 0.1);
color: #003DA5;
transform: translateY(-2px);
}
/* Responsive Design */
@media (max-width: 768px){
.main-nav{
display: none;
}
.mobile-menu-toggle{
display: block;
}
.container{
padding: 0 1rem;
text-align: center;
}
.hero{
padding: 4rem 1rem;
margin-top: 1rem;
border-radius: 16px;
}
.hero-title{
font-size: 2.5rem;
line-height: 1.2;
margin-bottom: 1rem;
}
.hero-description{
font-size: 1.125rem;
margin-bottom: 2rem;
padding: 0 1rem;
}
.tools-title{
font-size: 2.5rem;
line-height: 1.2;
}
.advisor-title{
font-size: 2.5rem;
line-height: 1.2;
}
.tools-grid{
grid-template-columns: 1fr;
gap: 1.5rem;
padding: 0 1rem;
}
.tool-card{
padding: 1.5rem;
margin: 0 auto;
max-width: 100%;
}
.advisor-card{
flex-direction: column;
text-align: center;
padding: 1.5rem;
margin: 0 1rem;
}
.hero-cta{
flex-direction: column;
align-items: center;
gap: 1rem;
width: 100%;
}
.primary-cta, .secondary-cta{
width: 100%;
max-width: 300px;
justify-content: center;
}
.feature-tags{
flex-direction: column;
align-items: center;
gap: 0.75rem;
margin-bottom: 2rem;
}
.feature-tag{
width: 100%;
max-width: 250px;
justify-content: center;
}
.tools-section{
padding: 4rem 0;
}
.advisor-section{
padding: 4rem 1rem;
margin: 2rem 0;
border-radius: 16px;
}
.footer-content{
padding: 0 1rem;
}
.footer-main{
grid-template-columns: 1fr;
gap: 2rem;
text-align: center;
}
.footer-section{
align-items: center;
}
}
/* iPhone Safari specific optimizations */
@supports (-webkit-touch-callout: none){
.hero{
-webkit-transform: translateZ(0);
transform: translateZ(0);
}
.tool-card{
-webkit-transform: translateZ(0);
transform: translateZ(0);
}
.site-header{
-webkit-backdrop-filter: blur(20px);
backdrop-filter: blur(20px);
}
.mobile-menu{
-webkit-backdrop-filter: blur(20px);
backdrop-filter: blur(20px);
}
}
/* iPhone specific viewport fixes */
@media screen and (max-width: 414px) and (-webkit-min-device-pixel-ratio: 2){
.hero{
padding: 3rem 0.5rem;
}
.hero-title{
font-size: 2rem;
}
.tools-title, .advisor-title{
font-size: 2rem;
}
.container{
padding: 0 0.5rem;
}
.tool-card{
padding: 1rem;
}
.advisor-card{
padding: 1rem;
margin: 0 0.5rem;
}
}
/* iPhone landscape optimization */
@media screen and (max-height: 500px) and (orientation: landscape){
.hero{
padding: 2rem 0;
}
.hero-title{
font-size: 2rem;
}
.tools-section{
padding: 2rem 0;
}
.advisor-section{
padding: 2rem 1rem;
}
}
/* Additional iPhone Safari optimizations */
@media screen and (-webkit-min-device-pixel-ratio: 2){
.hero{
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
.tool-card{
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
.site-header{
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
}
/* Touch optimizations for mobile */
@media (hover: none) and (pointer: coarse){
.tool-card:hover{
transform: none;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
}
.tool-card:active{
transform: scale(0.98);
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}
.feature-tag:hover{
transform: none;
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
}
.feature-tag:active{
transform: scale(0.95);
}
.primary-cta:hover, .secondary-cta:hover{
transform: none;
}
.primary-cta:active, .secondary-cta:active{
transform: scale(0.98);
}
}
/* Safe area insets for iPhone X and newer */
@supports (padding: max(0px)){
.site-header{
padding-left: max(1.5rem, env(safe-area-inset-left));
padding-right: max(1.5rem, env(safe-area-inset-right));
}
.container{
padding-left: max(1.5rem, env(safe-area-inset-left));
padding-right: max(1.5rem, env(safe-area-inset-right));
}
.mobile-menu{
padding-left: max(2rem, env(safe-area-inset-left));
padding-right: max(2rem, env(safe-area-inset-right));
padding-top: max(2rem, env(safe-area-inset-top));
padding-bottom: max(2rem, env(safe-area-inset-bottom));
}
}
/* iOS specific fixes */
@supports (-webkit-touch-callout: none){
.hero{
-webkit-overflow-scrolling: touch;
}
.tools-grid{
-webkit-overflow-scrolling: touch;
}
.mobile-menu{
-webkit-overflow-scrolling: touch;
}
/* Fix for iOS Safari viewport issues */
.hero-title{
-webkit-text-size-adjust: 100%;
}
.tools-title, .advisor-title{
-webkit-text-size-adjust: 100%;
}
}
@media (min-width: 769px){
.hero-cta{
flex-direction: row;
}
.footer-content{
flex-direction: row;
justify-content: space-between;
}
}
/* Modern Animations */
@keyframes fadeInUp{
from{
opacity: 0;
transform: translateY(30px);
}
to{
opacity: 1;
transform: translateY(0);
}
}
@keyframes fadeIn{
from{
opacity: 0;
}
to{
opacity: 1;
}
}
.animate-fade-in{
animation: fadeInUp 0.6s ease-out forwards;
}
.animate-fade-in-up{
animation: fadeInUp 0.8s ease-out forwards;
}
/* Loading Animation */
@keyframes spin{
to{
transform: rotate(360deg);
}
}
.animate-spin{
animation: spin 1s linear infinite;
}
/* Hover Effects */
.hover-lift:hover{
transform: translateY(-4px);
}
.hover-scale:hover{
transform: scale(1.05);
}
/* Utility Classes */
.text-center{
text-align: center;
}
.mb-4{
margin-bottom: 1rem;
}
.mb-6{
margin-bottom: 1.5rem;
}
.mb-8{
margin-bottom: 2rem;
}
.mb-10{
margin-bottom: 2.5rem;
}
.mb-16{
margin-bottom: 4rem;
}
.mt-4{
margin-top: 1rem;
}
.mt-12{
margin-top: 3rem;
}
.mt-16{
margin-top: 4rem;
}
.py-16{
padding-top: 4rem;
padding-bottom: 4rem;
}
.py-20{
padding-top: 5rem;
padding-bottom: 5rem;
}
.px-4{
padding-left: 1rem;
padding-right: 1rem;
}
.px-8{
padding-left: 2rem;
padding-right: 2rem;
}
.py-2{
padding-top: 0.5rem;
padding-bottom: 0.5rem;
}
.py-3{
padding-top: 0.75rem;
padding-bottom: 0.75rem;
}
.py-4{
padding-top: 1rem;
padding-bottom: 1rem;
}
.py-6{
padding-top: 1.5rem;
padding-bottom: 1.5rem;
}
.py-8{
padding-top: 2rem;
padding-bottom: 2rem;
}
.rounded-2xl{
border-radius: 1rem;
}
.rounded-3xl{
border-radius: 1.5rem;
}
.rounded-full{
border-radius: 9999px;
}
.shadow-sm{
box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
}
.shadow-lg{
box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
}
.shadow-xl{
box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1);
}
.shadow-2xl{
box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
}
.transition-all{
transition: all 0.3s ease;
}
.transition-colors{
transition: color 0.3s ease;
}
.transition-transform{
transition: transform 0.3s ease;
}
.transition-opacity{
transition: opacity 0.3s ease;
}
.duration-300{
transition-duration: 0.3s;
}
.duration-500{
transition-duration: 0.5s;
}
/* Preloader Styles */
.sk-preloader{
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: linear-gradient(135deg, #f8fafc 0%, #ffffff 50%, #f1f5f9 100%);
display: flex;
align-items: center;
justify-content: center;
z-index: 9999;
transition: opacity 0.5s ease, visibility 0.5s ease;
}
.sk-preloader.fade-out{
opacity: 0;
visibility: hidden;
}
.sk-preloader-content{
text-align: center;
animation: fadeInUp 0.8s ease-out;
}
.sk-preloader-logo{
width: 80px;
height: 80px;
margin-bottom: 1.5rem;
border-radius: 20px;
box-shadow: 0 8px 32px rgba(0, 61, 165, 0.2);
animation: pulse 2s infinite;
}
.sk-preloader-text{
font-size: 1.75rem;
font-weight: 800;
color: #003DA5;
margin-bottom: 0.75rem;
letter-spacing: -0.02em;
text-shadow: 0 3px 6px rgba(0, 61, 165, 0.3);
background: linear-gradient(135deg, #003DA5 0%, #002A7A 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
.sk-preloader-subtitle{
font-size: 1rem;
color: #1a202c;
margin-bottom: 2rem;
font-weight: 600;
text-align: center;
text-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
background: rgba(255, 255, 255, 0.9);
padding: 0.5rem 1rem;
border-radius: 20px;
backdrop-filter: blur(10px);
border: 1px solid rgba(0, 61, 165, 0.1);
}
.sk-preloader-photo-small{
width: 4px !important;
height: 4px !important;
border-radius: 50% !important;
object-fit: cover !important;
border: 0.5px solid rgba(0, 61, 165, 0.4) !important;
box-shadow: 0 0.5px 1px rgba(0, 0, 0, 0.1) !important;
flex-shrink: 0 !important;
max-width: 4px !important;
max-height: 4px !important;
min-width: 4px !important;
min-height: 4px !important;
display: inline-block !important;
vertical-align: middle !important;
}
/* WordPress cache busting */
body .sk-preloader-photo-small{
width: 4px !important;
height: 4px !important;
max-width: 4px !important;
max-height: 4px !important;
}
/* Extra strong rules */
html body .sk-preloader-photo-small{
width: 4px !important;
height: 4px !important;
max-width: 4px !important;
max-height: 4px !important;
min-width: 4px !important;
min-height: 4px !important;
}
.sk-preloader-spinner{
width: 40px;
height: 40px;
border: 3px solid rgba(0, 61, 165, 0.1);
border-top: 3px solid #003DA5;
border-radius: 50%;
animation: spin 1s linear infinite;
margin: 0 auto;
}
@keyframes pulse{
0%, 100%{
transform: scale(1);
}
50%{
transform: scale(1.05);
}
}
@keyframes spin{
0%{
transform: rotate(0deg);
}
100%{
transform: rotate(360deg);
}
}
/* Examples Section */
.examples-section{
padding: 4rem 0;
background: linear-gradient(135deg, #f8fafc 0%, #ffffff 50%, #f1f5f9 100%);
border-radius: 24px;
margin: 2rem 0;
}
.examples-container{
max-width: 1200px;
margin: 0 auto;
padding: 0 1.5rem;
}
.examples-title{
text-align: center;
font-size: 2.5rem;
font-weight: 800;
color: #1a202c;
margin-bottom: 3rem;
letter-spacing: -0.02em;
}
.examples-grid{
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 2rem;
}
.example-card{
background: rgba(255, 255, 255, 0.9);
backdrop-filter: blur(20px);
border: 1px solid rgba(0, 0, 0, 0.08);
border-radius: 16px;
padding: 2rem;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
transition: all 0.3s ease;
}
.example-card:hover{
transform: translateY(-4px);
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12);
border-color: rgba(0, 61, 165, 0.2);
}
.example-title{
font-size: 1.25rem;
font-weight: 700;
color: #1a202c;
margin-bottom: 1.5rem;
text-align: center;
}
.example-details{
display: flex;
flex-direction: column;
gap: 0.75rem;
}
.example-item{
display: flex;
justify-content: space-between;
align-items: center;
padding: 0.75rem;
background: rgba(0, 61, 165, 0.05);
border-radius: 8px;
font-size: 0.95rem;
}
.example-item span:first-child{
color: #374151;
font-weight: 500;
}
.example-item span:last-child{
color: #003DA5;
font-weight: 700;
}
.example-item.example-total{
background: linear-gradient(135deg, rgba(0, 61, 165, 0.1), rgba(220, 28, 46, 0.1));
border: 1px solid rgba(0, 61, 165, 0.2);
font-weight: 700;
}
.example-item.example-total span:last-child{
color: #DC1C2E;
font-size: 1.1rem;
}
/* Responsive Design for Examples */
@media (max-width: 768px){
.examples-grid{
grid-template-columns: 1fr;
gap: 1.5rem;
}
.examples-title{
font-size: 2rem;
}
.example-card{
padding: 1.5rem;
}
}
/* Modern Scrollbar */
::-webkit-scrollbar{
width: 8px;
}
::-webkit-scrollbar-track{
background: #f1f5f9;
}
::-webkit-scrollbar-thumb{
background: #003DA5;
border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover{
background: #002A7A;
}
/* Calculator Section Styles */
.calculator-section{
padding: 4rem 0;
background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%);
min-height: 80vh;
}
.calculator-container{
max-width: 800px;
margin: 0 auto;
background: #ffffff;
border-radius: 24px;
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
overflow: hidden;
}
.calculator-header{
background: linear-gradient(135deg, #003DA5 0%, #002A7A 100%);
color: white;
padding: 3rem 2rem;
text-align: center;
}
.calculator-title{
font-size: 2.5rem;
font-weight: 700;
margin-bottom: 1rem;
color: white;
}
.calculator-description{
font-size: 1.125rem;
opacity: 0.9;
margin-bottom: 0;
}
.calculator-form-container{
padding: 3rem 2rem;
}
.calculator-form{
display: flex;
flex-direction: column;
gap: 2rem;
}
.form-group{
display: flex;
flex-direction: column;
gap: 0.75rem;
}
.form-label{
display: flex;
align-items: center;
gap: 0.5rem;
font-weight: 600;
color: #1a202c;
font-size: 1rem;
}
.label-text{
color: #1a202c;
}
.required{
color: #e53e3e;
font-weight: 700;
}
.input-group{
position: relative;
display: flex;
align-items: center;
}
.form-input{
width: 100%;
padding: 1rem 1.25rem;
border: 2px solid #e2e8f0;
border-radius: 12px;
font-size: 1rem;
font-weight: 500;
background: #ffffff;
transition: all 0.3s ease;
outline: none;
}
.form-input:focus{
border-color: #003DA5;
box-shadow: 0 0 0 3px rgba(0, 61, 165, 0.1);
}
.input-suffix{
position: absolute;
right: 1rem;
color: #64748b;
font-weight: 600;
pointer-events: none;
}
.form-help{
font-size: 0.875rem;
color: #64748b;
margin-top: 0.25rem;
}
.radio-group{
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 1rem;
}
.radio-option{
display: flex;
align-items: center;
gap: 0.75rem;
padding: 1rem;
border: 2px solid #e2e8f0;
border-radius: 12px;
cursor: pointer;
transition: all 0.3s ease;
background: #ffffff;
}
.radio-option:hover{
border-color: #003DA5;
background: #f8fafc;
}
.radio-option input[type="radio"]{
display: none;
}
.radio-custom{
width: 20px;
height: 20px;
border: 2px solid #e2e8f0;
border-radius: 50%;
position: relative;
transition: all 0.3s ease;
}
.radio-option input[type="radio"]:checked + .radio-custom{
border-color: #003DA5;
background: #003DA5;
}
.radio-option input[type="radio"]:checked + .radio-custom::after{
content: '';
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 8px;
height: 8px;
background: white;
border-radius: 50%;
}
.radio-option input[type="radio"]:checked ~ .radio-text{
color: #003DA5;
font-weight: 600;
}
.radio-text{
font-weight: 500;
color: #1a202c;
transition: all 0.3s ease;
}
.form-actions{
display: flex;
gap: 1rem;
justify-content: center;
margin-top: 2rem;
}
.btn-primary, .btn-secondary{
display: flex;
align-items: center;
gap: 0.5rem;
padding: 1rem 2rem;
border: none;
border-radius: 12px;
font-size: 1rem;
font-weight: 600;
cursor: pointer;
transition: all 0.3s ease;
text-decoration: none;
min-width: 140px;
justify-content: center;
}
.btn-primary{
background: linear-gradient(135deg, #003DA5 0%, #002A7A 100%);
color: white;
box-shadow: 0 4px 12px rgba(0, 61, 165, 0.3);
}
.btn-primary:hover{
transform: translateY(-2px);
box-shadow: 0 8px 20px rgba(0, 61, 165, 0.4);
}
.btn-secondary{
background: #f1f5f9;
color: #64748b;
border: 2px solid #e2e8f0;
}
.btn-secondary:hover{
background: #e2e8f0;
color: #475569;
}
.btn-icon{
font-size: 1.125rem;
}
/* Result Container Styles */
.result-container{
margin-top: 2rem;
background: #f8fafc;
border-radius: 16px;
padding: 2rem;
border: 1px solid #e2e8f0;
}
.result-header{
margin-bottom: 1.5rem;
}
.result-title{
font-size: 1.5rem;
font-weight: 700;
color: #1a202c;
margin: 0;
}
.result-content{
display: flex;
flex-direction: column;
gap: 1rem;
}
.result-item{
display: flex;
justify-content: space-between;
align-items: center;
padding: 1rem;
background: white;
border-radius: 12px;
border: 1px solid #e2e8f0;
}
.result-item.result-total{
background: linear-gradient(135deg, #003DA5 0%, #002A7A 100%);
color: white;
font-weight: 700;
font-size: 1.125rem;
}
.result-label{
font-weight: 500;
color: #475569;
}
.result-item.result-total .result-label{
color: white;
}
.result-value{
font-weight: 700;
color: #1a202c;
font-size: 1.125rem;
}
.result-item.result-total .result-value{
color: white;
}
/* Info Section Styles */
.info-section{
padding: 4rem 0;
background: #ffffff;
}
.info-container{
max-width: 1200px;
margin: 0 auto;
}
.info-title{
text-align: center;
font-size: 2.5rem;
font-weight: 700;
color: #1a202c;
margin-bottom: 3rem;
}
.info-grid{
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 2rem;
}
.info-card{
background: #ffffff;
padding: 2rem;
border-radius: 16px;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
border: 1px solid #e2e8f0;
transition: all 0.3s ease;
}
.info-card:hover{
transform: translateY(-4px);
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
}
.info-icon{
font-size: 2.5rem;
margin-bottom: 1rem;
}
.info-card-title{
font-size: 1.25rem;
font-weight: 700;
color: #1a202c;
margin-bottom: 1rem;
}
.info-card-text{
color: #64748b;
line-height: 1.6;
}
/* Examples Section Styles */
.examples-section{
padding: 4rem 0;
background: #f8fafc;
}
.examples-container{
max-width: 1200px;
margin: 0 auto;
}
.examples-title{
text-align: center;
font-size: 2.5rem;
font-weight: 700;
color: #1a202c;
margin-bottom: 3rem;
}
.examples-grid{
display: grid;
grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
gap: 2rem;
}
.example-card{
background: #ffffff;
padding: 2rem;
border-radius: 16px;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
border: 1px solid #e2e8f0;
}
.example-title{
font-size: 1.25rem;
font-weight: 700;
color: #1a202c;
margin-bottom: 1.5rem;
text-align: center;
}
.example-details{
display: flex;
flex-direction: column;
gap: 0.75rem;
}
.example-item{
display: flex;
justify-content: space-between;
align-items: center;
padding: 0.75rem;
background: #f8fafc;
border-radius: 8px;
}
.example-item.example-total{
background: linear-gradient(135deg, #003DA5 0%, #002A7A 100%);
color: white;
font-weight: 700;
}
/* Responsive Design */
@media (max-width: 768px){
.calculator-container{
margin: 0 1rem;
border-radius: 16px;
}
.calculator-header{
padding: 2rem 1.5rem;
}
.calculator-title{
font-size: 2rem;
}
.calculator-form-container{
padding: 2rem 1.5rem;
}
.radio-group{
grid-template-columns: 1fr;
}
.form-actions{
flex-direction: column;
}
.btn-primary, .btn-secondary{
width: 100%;
}
.result-item{
flex-direction: column;
align-items: flex-start;
gap: 0.5rem;
}
.info-grid, .examples-grid{
grid-template-columns: 1fr;
}
}
/* Mobile Dropdown Styles */
.mobile-dropdown{
margin-bottom: 1rem;
}
.mobile-dropdown-header{
display: flex;
align-items: center;
justify-content: space-between;
padding: 1rem;
background: rgba(255, 255, 255, 0.1);
border-radius: 12px;
cursor: pointer;
transition: all 0.3s ease;
color: #1a202c;
font-weight: 500;
}
.mobile-dropdown-header:hover{
background: rgba(255, 255, 255, 0.2);
}
.mobile-dropdown-header svg{
transition: transform 0.3s ease;
}
.mobile-dropdown-header.active svg{
transform: rotate(180deg);
}
.mobile-dropdown-content{
max-height: 0;
overflow: hidden;
transition: max-height 0.3s ease;
background: rgba(255, 255, 255, 0.05);
border-radius: 12px;
margin-top: 0.5rem;
}
.mobile-dropdown-content.show{
max-height: 500px;
}
.mobile-dropdown-item{
display: block;
padding: 0.75rem 1rem;
color: #374151;
text-decoration: none;
font-size: 0.9rem;
transition: all 0.2s ease;
border-left: 3px solid transparent;
}
.mobile-dropdown-item:hover{
background: rgba(0, 61, 165, 0.1);
color: #003DA5;
border-left-color: #003DA5;
transform: translateX(4px);
}