/* ==========================================================================
   YILDIZ FAYANS — Mobile-First Clean Design
   ========================================================================== */

/* --- Variables --- */
:root {
    --primary: #0A192F;
    --primary-light: #112240;
    --accent: #D4AF37;
    --accent-hover: #B8962D;
    --text: #334155;
    --text-light: #64748B;
    --bg: #FFFFFF;
    --bg-alt: #F8FAFC;
    --whatsapp: #25D366;
    --font-h: 'Outfit', sans-serif;
    --font-b: 'Inter', sans-serif;
    --ease: 0.3s cubic-bezier(0.4,0,0.2,1);
    --shadow: 0 4px 20px rgba(0,0,0,0.08);
    --shadow-lg: 0 12px 40px rgba(0,0,0,0.12);
}

/* --- Reset --- */
*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:smooth; }
html, body { overflow-x:hidden; width:100%; }
body { font-family:var(--font-b); color:var(--text); background:var(--bg); line-height:1.7; -webkit-font-smoothing:antialiased; }
h1,h2,h3,h4 { font-family:var(--font-h); color:var(--primary); line-height:1.25; }
a { text-decoration:none; color:inherit; transition:var(--ease); }
ul { list-style:none; }
img { max-width:100%; height:auto; display:block; }
.container { width:100%; max-width:1140px; margin:0 auto; padding:0 20px; }

/* --- Section Spacing (mobile-first) --- */
section { padding: 60px 0; }
.section-header { text-align:center; margin-bottom:40px; }
.section-subtitle {
    display:inline-block; color:var(--accent); font-weight:600;
    text-transform:uppercase; letter-spacing:2px; font-size:0.8rem;
    margin-bottom:8px;
}
.section-title { font-size:1.75rem; margin-bottom:12px; }
.section-title span { color:var(--accent); }
.section-header p, .section-desc { color:var(--text-light); font-size:0.95rem; max-width:500px; margin:0 auto; }

/* --- Buttons --- */
.btn {
    display:inline-flex; align-items:center; justify-content:center; gap:8px;
    padding:14px 28px; border-radius:10px; font-weight:600; font-size:0.95rem;
    border:none; cursor:pointer; transition:var(--ease); font-family:var(--font-b);
}
.btn-primary { background:var(--accent); color:#fff; }
.btn-primary:hover { background:var(--accent-hover); transform:translateY(-2px); box-shadow:var(--shadow); }
.btn-secondary { background:rgba(255,255,255,0.15); color:#fff; border:2px solid rgba(255,255,255,0.4); backdrop-filter:blur(4px); }
.btn-secondary:hover { background:rgba(255,255,255,0.25); transform:translateY(-2px); }
.btn-whatsapp { background:var(--whatsapp); color:#fff; padding:8px 16px; border-radius:8px; }
.btn-whatsapp:hover { background:#1EBE5D; }
.btn-whatsapp-large { background:var(--whatsapp); color:#fff; padding:16px 32px; font-size:1.1rem; border-radius:12px; }
.btn-whatsapp-large:hover { background:#1EBE5D; transform:translateY(-2px); box-shadow:var(--shadow); }

/* ==========================================================================
   HEADER
   ========================================================================== */
.header {
    position:fixed; top:0; left:0; width:100%; z-index:1000;
    background:rgba(255,255,255,0.97); backdrop-filter:blur(10px);
    padding:14px 0; transition:var(--ease); box-shadow:0 1px 0 rgba(0,0,0,0.06);
}
.header.scrolled { padding:10px 0; box-shadow:var(--shadow); }
.header-container { display:flex; justify-content:space-between; align-items:center; }
.logo { display:flex; align-items:center; gap:8px; font-family:var(--font-h); font-size:1.35rem; font-weight:700; color:var(--primary); }
.logo-icon { color:var(--accent); }
.logo-accent { color:var(--accent); }
.logo-img { height:52px; width:auto; object-fit:contain; border-radius: 4px; filter: drop-shadow(0 2px 4px rgba(0,0,0,0.1)); }
.nav-menu { display:flex; gap:28px; }
.nav-link { font-weight:500; color:var(--text); font-size:0.9rem; }
.nav-link:hover, .nav-link.active { color:var(--accent); }
.header-actions { display:flex; align-items:center; gap:12px; }
.menu-toggle { display:none; background:none; border:none; font-size:1.4rem; color:var(--primary); cursor:pointer; padding:8px; }
.btn-whatsapp .btn-text { display:inline; }

/* Mobile Nav */
@media (max-width:768px) {
    .menu-toggle { display:block; z-index:1001; }
    .btn-whatsapp .btn-text { display:none; }
    .nav-menu {
        position:fixed; top:0; left:0; width:100%; height:100vh;
        background:#fff; flex-direction:column; align-items:center;
        justify-content:center; gap:32px;
        transform:translateX(-100%); transition:var(--ease); z-index:1000;
    }
    .nav-menu.active { transform:translateX(0); }
    .nav-link { font-size:1.3rem; }
}

/* ==========================================================================
   HERO
   ========================================================================== */
.hero {
    min-height:100vh; display:flex; align-items:center;
    position:relative; color:#fff; padding-top:80px;
}
.hero-bg {
    position:absolute; inset:0;
    background:url('./assets/images/hero_bg.jpg') center/cover no-repeat;
    z-index:-2;
}
.hero-bg::after {
    content:''; position:absolute; inset:0;
    background:linear-gradient(135deg, rgba(10,25,47,0.92), rgba(10,25,47,0.75));
    z-index:-1;
}
.hero-content { max-width:650px; }
.hero-badge {
    display:inline-block; background:rgba(255,107,53,0.15); border:1px solid rgba(255,107,53,0.3);
    color:var(--accent); padding:6px 16px; border-radius:50px;
    font-size:0.8rem; font-weight:600; margin-bottom:20px;
}
.hero-title { font-size:2rem; color:#fff; margin-bottom:16px; }
.hero-title span { color:var(--accent); }
.hero-description { color:rgba(255,255,255,0.8); font-size:1rem; margin-bottom:28px; line-height:1.8; }
.hero-buttons { display:flex; gap:12px; flex-wrap:wrap; }

@media (max-width:480px) {
    .hero { min-height:90vh; }
    .hero-title { font-size:1.65rem; }
    .hero-buttons { flex-direction:column; }
    .hero-buttons .btn { width:100%; }
}
@media (min-width:769px) {
    .hero-title { font-size:3.2rem; }
    .hero-description { font-size:1.1rem; }
}

/* ==========================================================================
   TRUST / STATS
   ========================================================================== */
.trust-section {
    background:var(--primary); color:#fff; padding:28px 0;
    position:relative; z-index:10;
}
.trust-container {
    display:flex; justify-content:center; align-items:center;
    flex-wrap:wrap; gap:40px;
}
.trust-item { display:flex; align-items:center; gap:14px; }
.trust-icon {
    width:52px; height:52px; border-radius:50%;
    background:rgba(255,255,255,0.1);
    display:flex; align-items:center; justify-content:center;
    color:var(--accent); font-size:1.2rem; flex-shrink:0;
}
.trust-text h3 { color:#fff; font-size:1.6rem; font-weight:700; margin-bottom:2px; }
.trust-text p { color:rgba(255,255,255,0.6); font-size:0.85rem; }

@media (max-width:768px) {
    .trust-container { gap:24px; }
    .trust-item { flex-direction:row; gap:12px; min-width:140px; }
    .trust-icon { width:44px; height:44px; font-size:1rem; }
    .trust-text h3 { font-size:1.4rem; }
    .trust-text p { font-size:0.8rem; }
}
@media (max-width:480px) {
    .trust-container { flex-direction:column; align-items:center; gap:20px; }
    .trust-text h3 { font-size:1.5rem; }
}

/* ==========================================================================
   ABOUT
   ========================================================================== */
.about { background:var(--bg); }
.about-container { display:grid; grid-template-columns:1fr; gap:32px; align-items:center; }
.about-image-wrapper { position:relative; margin-bottom:20px; }
.about-image { border-radius:16px; overflow:hidden; box-shadow:var(--shadow-lg); }
.about-image img { width:100%; display:block; }
.experience-badge {
    position:absolute; bottom:-15px; right:15px;
    background:var(--accent); color:#fff;
    width:95px; height:95px; border-radius:50%;
    display:flex; flex-direction:column; align-items:center; justify-content:center;
    border:4px solid var(--bg); box-shadow:var(--shadow); z-index:2;
}
.exp-number { font-family:var(--font-h); font-size:1.8rem; font-weight:700; line-height:1; }
.exp-text { font-size:0.65rem; font-weight:600; text-align:center; }
.about-content .section-subtitle { text-align:left; }
.about-content p { color:var(--text-light); margin-bottom:20px; }
.about-list { display:grid; gap:12px; }
.about-list li { display:flex; align-items:flex-start; gap:10px; font-size:0.95rem; }
.about-list i { color:var(--whatsapp); flex-shrink:0; margin-top:4px; }

@media (min-width:769px) {
    .about-container { grid-template-columns:1fr 1fr; gap:60px; }
    .experience-badge { width:130px; height:130px; bottom:-25px; right:-20px; border-width:7px; }
    .exp-number { font-size:2.5rem; }
    .exp-text { font-size:0.8rem; }
}

/* ==========================================================================
   SERVICES
   ========================================================================== */
.services { background:var(--bg-alt); }
.services-grid { display:grid; grid-template-columns:1fr; gap:20px; }
.service-card {
    background:#fff; border-radius:14px; overflow:hidden;
    box-shadow:var(--shadow); transition:var(--ease);
}
.service-card:hover { transform:translateY(-6px); box-shadow:var(--shadow-lg); }
.service-image { height:200px; overflow:hidden; }
.service-image img { width:100%; height:100%; object-fit:cover; transition:transform 0.5s; }
.service-card:hover .service-image img { transform:scale(1.05); }
.service-content { padding:24px; position:relative; }
.service-icon {
    position:absolute; top:-22px; right:20px;
    width:44px; height:44px; background:var(--primary); color:#fff;
    border-radius:10px; display:flex; align-items:center; justify-content:center;
    box-shadow:var(--shadow); font-size:1rem;
}
.service-content h3 { font-size:1.15rem; margin-bottom:8px; }
.service-content p { color:var(--text-light); font-size:0.9rem; line-height:1.7; }

@media (min-width:769px) {
    .services-grid { grid-template-columns:repeat(3,1fr); gap:24px; }
    .service-image { height:220px; }
}

/* ==========================================================================
   PROCESS / HOW WE WORK
   ========================================================================== */
.process {
    background:linear-gradient(135deg, var(--primary), var(--primary-light));
    color:#fff;
}
.process .section-subtitle { color:rgba(255,255,255,0.5); }
.process .section-title { color:#fff; }
.process .section-header p { color:rgba(255,255,255,0.65); }
.process-grid { display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.process-step {
    text-align:center; padding:24px 16px;
    background:rgba(255,255,255,0.07); border:1px solid rgba(255,255,255,0.1);
    border-radius:14px; transition:var(--ease);
}
.process-step:hover { background:rgba(255,255,255,0.12); transform:translateY(-4px); }
.step-number { font-family:var(--font-h); font-size:2rem; font-weight:700; color:var(--accent); margin-bottom:8px; }
.step-icon {
    width:52px; height:52px; margin:0 auto 14px;
    background:linear-gradient(135deg, var(--accent), var(--accent-hover));
    border-radius:50%; display:flex; align-items:center; justify-content:center;
    color:#fff; font-size:1.2rem;
}
.process-step h3 { font-size:1rem; color:#fff; margin-bottom:6px; }
.process-step p { color:rgba(255,255,255,0.6); font-size:0.8rem; line-height:1.6; }

@media (max-width:480px) { .process-grid { grid-template-columns:1fr; } }
@media (min-width:769px) {
    .process-grid { grid-template-columns:repeat(4,1fr); gap:20px; }
    .step-number { font-size:2.5rem; }
    .step-icon { width:60px; height:60px; font-size:1.4rem; }
}

/* ==========================================================================
   PROJECTS
   ========================================================================== */
.projects { background:var(--bg-alt); }
.projects-grid { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.project-card {
    border-radius:12px; overflow:hidden; box-shadow:var(--shadow);
    transition:var(--ease);
}
.project-card:hover { transform:translateY(-4px); box-shadow:var(--shadow-lg); }
.project-card img { width:100%; height:180px; object-fit:cover; display:block; }
.project-overlay { padding:14px 16px; background:#fff; }
.project-badge {
    display:inline-block; padding:2px 8px; border-radius:4px;
    font-size:0.65rem; font-weight:700; letter-spacing:1px;
    background:var(--bg-alt); color:var(--text-light); border:1px solid #e2e8f0;
    margin-bottom:4px;
}
.badge-after { background:var(--accent); border-color:var(--accent); color:#fff; }
.project-overlay h4 { font-size:0.9rem; color:var(--primary); margin-bottom:2px; }
.project-overlay p { font-size:0.8rem; color:var(--text-light); }

@media (max-width:480px) { .projects-grid { grid-template-columns:1fr; } }
@media (min-width:769px) {
    .projects-grid { grid-template-columns:repeat(4,1fr); gap:20px; }
    .project-card img { height:220px; }
}

/* ==========================================================================
   TESTIMONIALS
   ========================================================================== */
.testimonials { background:var(--bg); }
.slider-wrapper { position:relative; display:flex; align-items:center; gap:12px; }
.testimonials-slider {
    display:flex; gap:16px; overflow-x:auto;
    padding:8px 0 20px; -webkit-overflow-scrolling:touch;
    scrollbar-width:none; scroll-behavior: smooth;
}
.testimonials-slider::-webkit-scrollbar { display:none; }
.testimonial-card {
    min-width:300px; flex:0 0 80%;
    background:var(--bg-alt); border-radius:14px; padding:28px;
    border:1px solid #e2e8f0;
}
.stars { color:#FBBF24; font-size:0.9rem; margin-bottom:14px; display:flex; gap:2px; }
.testimonial-text { font-size:0.92rem; line-height:1.8; color:var(--text); margin-bottom:18px; font-style:italic; }
.testimonial-author { display:flex; align-items:center; gap:12px; }
.author-avatar { width:44px; height:44px; border-radius:50%; overflow:hidden; border:2px solid var(--accent); flex-shrink:0; }
.author-avatar img { width:100%; height:100%; object-fit:cover; }
.author-info h4 { font-size:0.9rem; color:var(--primary); }
.author-info span { font-size:0.8rem; color:var(--text-light); }

/* Slider Buttons */
.slider-btn {
    display:none; width:40px; height:40px; border-radius:50%;
    background:var(--primary); color:#fff; border:none; cursor:pointer;
    font-size:0.9rem; flex-shrink:0; transition:var(--ease);
}
.slider-btn:hover { background:var(--accent); }

/* Slider Dots Indicator */
.slider-dots {
    display:flex; justify-content:center; gap:8px; margin-top:8px;
}
.slider-dot {
    width:8px; height:8px; border-radius:50%; background:#cbd5e1;
    border:none; cursor:pointer; transition:var(--ease); padding:0;
}
.slider-dot.active { background:var(--accent); width:24px; border-radius:4px; }

@media (max-width:480px) {
    .testimonial-card { min-width:260px; flex:0 0 88%; padding:22px; }
}
@media (min-width:769px) {
    .slider-btn { display:flex; align-items:center; justify-content:center; }
    .testimonial-card { min-width:340px; flex:0 0 45%; }
}

/* ==========================================================================
   FAQ
   ========================================================================== */
.faq { background:var(--bg-alt); }
.faq-container { max-width:700px; margin:0 auto; }
.faq-item { background:#fff; border-radius:12px; margin-bottom:10px; overflow:hidden; border:1px solid #e2e8f0; }
.faq-item.active { border-color:var(--accent); }
.faq-header {
    padding:20px 24px; display:flex; justify-content:space-between; align-items:center;
    cursor:pointer; transition:var(--ease);
}
.faq-header h3 { font-size:1.05rem; font-weight:600; color:var(--primary); padding-right:16px; }
.faq-header i { color:var(--accent); transition:transform 0.3s; flex-shrink:0; font-size:1.1rem; }
.faq-item.active .faq-header i { transform:rotate(180deg); }
.faq-body { max-height:0; overflow:hidden; transition:max-height 0.4s ease; }
.faq-body p { padding:0 24px 20px; color:var(--text-light); font-size:0.95rem; line-height:1.7; }

/* ==========================================================================
   CTA
   ========================================================================== */
.cta-section {
    background:linear-gradient(135deg, var(--primary), var(--primary-light));
    color:#fff; text-align:center;
}
.cta-content h2 { color:#fff; font-size:1.6rem; margin-bottom:12px; }
.cta-content p { color:rgba(255,255,255,0.7); margin-bottom:24px; font-size:0.95rem; max-width:500px; margin-left:auto; margin-right:auto; }
@media (min-width:769px) { .cta-content h2 { font-size:2.2rem; } }

/* ==========================================================================
   REGIONS
   ========================================================================== */
.regions { background:var(--bg); }
.regions-grid { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.region-card {
    background:var(--bg-alt); padding:14px; border-radius:10px;
    display:flex; align-items:center; gap:8px;
    font-weight:500; font-size:0.85rem; color:var(--primary);
    border:1px solid transparent; transition:var(--ease);
}
.region-card:hover { border-color:var(--accent); background:#fff; }
.region-card i { color:#e74c3c; }

@media (min-width:769px) {
    .regions-grid { grid-template-columns:repeat(auto-fit, minmax(180px,1fr)); gap:14px; }
    .region-card { padding:18px; font-size:0.9rem; }
}

/* ==========================================================================
   FOOTER
   ========================================================================== */
.footer { background:#050d18; color:rgba(255,255,255,0.65); padding-top:50px; }
.footer-container { display:grid; grid-template-columns:1fr; gap:32px; margin-bottom:32px; }
.footer-logo { color:#fff; margin-bottom:12px; }
.footer-brand p { margin-bottom:16px; font-size:0.9rem; }
.social-links { display:flex; gap:10px; }
.social-links a {
    width:38px; height:38px; border-radius:50%; background:rgba(255,255,255,0.08);
    display:flex; align-items:center; justify-content:center; color:#fff;
    transition:var(--ease);
}
.social-links a:hover { transform:translateY(-3px); filter:brightness(1.1); }
.social-links a.social-fb { background: #1877F2; }
.social-links a.social-ig { background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285AEB 90%); }
.social-links a.social-wa { background: #25D366; }
.footer h3 { color:#fff; font-size:1.1rem; margin-bottom:14px; }
.footer-links ul { display:flex; flex-direction:column; gap:8px; }
.footer-links a { font-size:0.9rem; }
.footer-links a:hover { color:var(--accent); }
.footer-contact ul { display:flex; flex-direction:column; gap:10px; }
.footer-contact li { display:flex; align-items:flex-start; gap:10px; font-size:0.9rem; }
.footer-contact i { color:var(--accent); flex-shrink:0; }
.footer-bottom { background:#03080f; padding:16px 0; text-align:center; font-size:0.8rem; }

@media (min-width:769px) {
    .footer-container { grid-template-columns:2fr 1fr 1.5fr; gap:48px; }
}

/* ==========================================================================
   STICKY WHATSAPP
   ========================================================================== */
.sticky-whatsapp {
    position:fixed; bottom:20px; right:20px;
    width:52px; height:52px; background:var(--whatsapp); color:#fff;
    border-radius:50%; display:flex; align-items:center; justify-content:center;
    font-size:28px; box-shadow:var(--shadow-lg); z-index:1000;
    opacity:0; visibility:hidden; transform:translateY(20px);
    transition:var(--ease);
}
.sticky-whatsapp.visible {
    opacity:1; visibility:visible; transform:translateY(0);
}
.sticky-whatsapp:hover { background:#1EBE5D; transform:scale(1.1) translateY(0); color:#fff; }

@media (min-width:769px) {
    .sticky-whatsapp { bottom:28px; right:28px; width:56px; height:56px; font-size:30px; }
}

/* ==========================================================================
   ANIMATIONS & PRELOADER
   ========================================================================== */
@keyframes bounceIn { 0%{transform:scale(0);opacity:0} 50%{transform:scale(1.1);opacity:1} 100%{transform:scale(1);opacity:1} }

.preloader {
    position:fixed; inset:0; background:var(--primary);
    display:flex; align-items:center; justify-content:center;
    z-index:9999; transition:opacity 0.5s, visibility 0.5s;
}
.preloader.hidden { opacity:0; visibility:hidden; }
.preloader-inner {
    display:flex; flex-direction:column; align-items:center; gap:12px;
    color:#fff; font-family:var(--font-h); font-size:1.4rem; font-weight:700;
}
.preloader-icon { font-size:2.5rem; color:var(--accent); animation:spin 1.5s ease-in-out infinite; }
@keyframes spin { 0%,100%{transform:rotate(0)} 50%{transform:rotate(180deg) scale(1.2)} }

/* Desktop enhancements */
@media (min-width:769px) {
    section { padding:80px 0; }
    .section-title { font-size:2.25rem; }
    .section-header { margin-bottom:50px; }
}

/* Custom Additions */
.btn-white { background:#fff; color:#111; font-weight:700; }
.btn-white:hover { background:#f8fafc; color:#111; transform:translateY(-2px); box-shadow:var(--shadow); }
.badge-before { background:#1e293b; border-color:#1e293b; color:#fff; }
.footer-contact i.icon-phone { color: #3498db; }
.footer-contact i.icon-wa { color: #25D366; }
.footer-contact i.icon-loc { color: #e74c3c; }