/* ============================
   Beyaz İnci Diş Kliniği
   Custom Styles
   ============================ */

/* --- CSS Variables --- */
:root {
    --primary: #0077B6;
    --primary-dark: #005f92;
    --accent: #48CAE4;
    --accent-light: #90E0EF;
    --accent-pale: #CAF0F8;
}

/* --- Global --- */
html {
    scroll-behavior: smooth;
}

body {
    overflow-x: hidden;
}

::selection {
    background-color: var(--accent);
    color: #fff;
}

/* --- Animations --- */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes fadeInLeft {
    from {
        opacity: 0;
        transform: translateX(-30px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes fadeInRight {
    from {
        opacity: 0;
        transform: translateX(30px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes float {
    0%, 100% {
        transform: translateY(0px);
    }
    50% {
        transform: translateY(-10px);
    }
}

@keyframes pulse-glow {
    0%, 100% {
        box-shadow: 0 0 0 0 rgba(0, 119, 182, 0.4);
    }
    50% {
        box-shadow: 0 0 20px 10px rgba(0, 119, 182, 0.1);
    }
}

@keyframes whatsapp-pulse {
    0% {
        box-shadow: 0 0 0 0 rgba(37, 211, 102, 0.5);
    }
    70% {
        box-shadow: 0 0 0 15px rgba(37, 211, 102, 0);
    }
    100% {
        box-shadow: 0 0 0 0 rgba(37, 211, 102, 0);
    }
}

@keyframes tooth-bounce {
    0%, 100% {
        transform: rotate(0deg);
    }
    25% {
        transform: rotate(5deg);
    }
    75% {
        transform: rotate(-5deg);
    }
}

@keyframes shine {
    0% {
        left: -100%;
    }
    100% {
        left: 200%;
    }
}

@keyframes countUp {
    from {
        opacity: 0;
        transform: scale(0.5);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

/* --- Animation Classes --- */
.animate-fade-up {
    animation: fadeInUp 0.8s ease-out forwards;
}

.animate-fade-left {
    animation: fadeInLeft 0.8s ease-out forwards;
}

.animate-fade-right {
    animation: fadeInRight 0.8s ease-out forwards;
}

.animate-float {
    animation: float 3s ease-in-out infinite;
}

.whatsapp-pulse {
    animation: whatsapp-pulse 2s infinite;
}

.tooth-icon-bounce:hover i {
    animation: tooth-bounce 0.5s ease-in-out;
}

/* Stagger delays */
.delay-100 { animation-delay: 0.1s; }
.delay-200 { animation-delay: 0.2s; }
.delay-300 { animation-delay: 0.3s; }
.delay-400 { animation-delay: 0.4s; }
.delay-500 { animation-delay: 0.5s; }
.delay-600 { animation-delay: 0.6s; }

/* --- Hero Section --- */
.hero-gradient {
    background: linear-gradient(135deg, #0077B6 0%, #023E8A 50%, #0096C7 100%);
    position: relative;
    overflow: hidden;
}

.hero-gradient::before {
    content: '';
    position: absolute;
    top: -50%;
    right: -20%;
    width: 600px;
    height: 600px;
    border-radius: 50%;
    background: rgba(72, 202, 228, 0.1);
    pointer-events: none;
}

.hero-gradient::after {
    content: '';
    position: absolute;
    bottom: -30%;
    left: -10%;
    width: 400px;
    height: 400px;
    border-radius: 50%;
    background: rgba(144, 224, 239, 0.08);
    pointer-events: none;
}

/* Tooth pattern background */
.tooth-pattern {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' fill='none'%3E%3Cpath d='M50 10 C35 10 25 25 25 40 C25 55 30 60 35 75 C38 85 42 90 45 90 C48 90 50 85 50 80 C50 85 52 90 55 90 C58 90 62 85 65 75 C70 60 75 55 75 40 C75 25 65 10 50 10Z' fill='rgba(255,255,255,0.03)'/%3E%3C/svg%3E");
    background-size: 60px 60px;
}

/* --- Cards & Hover Effects --- */
.service-card {
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}

.service-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 4px;
    background: linear-gradient(90deg, var(--primary), var(--accent));
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.3s ease;
}

.service-card:hover::before {
    transform: scaleX(1);
}

.service-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 20px 40px rgba(0, 119, 182, 0.15);
}

.service-card .icon-wrap {
    transition: all 0.3s ease;
}

.service-card:hover .icon-wrap {
    background-color: var(--primary) !important;
    color: #fff !important;
    transform: scale(1.1);
}

/* Team card */
.team-card {
    transition: all 0.3s ease;
}

.team-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 30px rgba(0, 119, 182, 0.12);
}

.team-card .team-avatar {
    transition: all 0.3s ease;
}

.team-card:hover .team-avatar {
    transform: scale(1.05);
}

/* Blog card */
.blog-card {
    transition: all 0.3s ease;
}

.blog-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1);
}

/* Price card */
.price-card {
    transition: all 0.3s ease;
    border-left: 4px solid transparent;
}

.price-card:hover {
    border-left-color: var(--primary);
    transform: translateX(5px);
    box-shadow: 0 10px 25px rgba(0, 119, 182, 0.1);
}

/* --- Shine effect on buttons --- */
.btn-shine {
    position: relative;
    overflow: hidden;
}

.btn-shine::after {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 50%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.3), transparent);
    animation: shine 3s infinite;
}

/* --- Review / Testimonial --- */
.review-card {
    transition: all 0.3s ease;
}

.review-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.08);
}

/* Star rating */
.stars {
    color: #FBBF24;
}

/* --- Stats Counter --- */
.stat-item {
    position: relative;
}

.stat-item::after {
    content: '';
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 1px;
    height: 50%;
    background: rgba(255, 255, 255, 0.2);
}

.stat-item:last-child::after {
    display: none;
}

/* --- Before/After Slider --- */
.ba-container {
    position: relative;
    border-radius: 12px;
    overflow: hidden;
    cursor: pointer;
}

.ba-label {
    position: absolute;
    bottom: 10px;
    padding: 4px 16px;
    background: rgba(0,0,0,0.6);
    color: #fff;
    font-size: 12px;
    font-weight: 600;
    border-radius: 20px;
    text-transform: uppercase;
    letter-spacing: 1px;
}

/* --- Page Banner --- */
.page-banner {
    background: linear-gradient(135deg, #0077B6 0%, #023E8A 60%, #0096C7 100%);
    position: relative;
    overflow: hidden;
}

.page-banner::before {
    content: '';
    position: absolute;
    top: -30%;
    right: -10%;
    width: 400px;
    height: 400px;
    border-radius: 50%;
    background: rgba(72, 202, 228, 0.1);
    pointer-events: none;
}

/* --- Form Styles --- */
.form-input {
    transition: all 0.3s ease;
    border: 2px solid #e5e7eb;
}

.form-input:focus {
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(0, 119, 182, 0.1);
    outline: none;
}

/* --- Scrollbar --- */
::-webkit-scrollbar {
    width: 10px;
}

::-webkit-scrollbar-track {
    background: #f1f1f1;
}

::-webkit-scrollbar-thumb {
    background: var(--accent);
    border-radius: 5px;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--primary);
}

/* --- Section Divider --- */
.wave-divider {
    position: relative;
}

.wave-divider::after {
    content: '';
    position: absolute;
    bottom: -1px;
    left: 0;
    width: 100%;
    height: 60px;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 60'%3E%3Cpath fill='%23ffffff' d='M0,20 C360,60 720,0 1080,30 C1260,45 1380,25 1440,20 L1440,60 L0,60Z'/%3E%3C/svg%3E") no-repeat bottom center;
    background-size: cover;
}

/* --- Decorative Tooth --- */
.deco-tooth {
    opacity: 0.05;
    font-size: 200px;
    position: absolute;
    pointer-events: none;
    z-index: 0;
}

/* --- Technology grid image placeholder --- */
.tech-img-placeholder {
    background: linear-gradient(135deg, var(--accent-pale), #e0f2fe);
    display: flex;
    align-items: center;
    justify-content: center;
}

/* --- Responsive fixes --- */
@media (max-width: 768px) {
    .stat-item::after {
        display: none;
    }

    .hero-gradient::before,
    .hero-gradient::after {
        display: none;
    }
}

/* --- Loading animation --- */
.skeleton {
    background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
    background-size: 200% 100%;
    animation: shimmer 1.5s infinite;
}

@keyframes shimmer {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}


/* ===== Overflow / Tasma Korumasi ===== */
*, *::before, *::after {
    max-width: 100%;
}

img, video, iframe, embed, object {
    max-width: 100%;
    height: auto;
}

p, li, td, th, a, span, h1, h2, h3, h4, h5, h6, label, blockquote {
    overflow-wrap: break-word;
    word-break: break-word;
}

table {
    width: 100%;
    border-collapse: collapse;
}

.table-responsive {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

pre, code {
    overflow-x: auto;
    white-space: pre-wrap;
    word-break: break-word;
}