/* ========================================================================
   FURKAN JENERATÖR
   STYLE.CSS

   Version : 1.0
   Author  : Furkan Jeneratör
   ======================================================================== */


/* ========================================================================
   GOOGLE FONT
   ======================================================================== */


/* ========================================================================
   RESET
   ======================================================================== */

*,
*::before,
*::after{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

html{

    scroll-behavior:smooth;
    -webkit-text-size-adjust:100%;

}

body{

    font-family:'Inter',sans-serif;

    background:#ffffff;

    color:#1f2937;

    line-height:1.7;

    overflow-x:hidden;

}

img{

    max-width:100%;
    display:block;

}

a{

    color:inherit;

    text-decoration:none;

}

ul{

    list-style:none;

}

button{

    border:none;

    background:none;

    cursor:pointer;

    font-family:inherit;

}

input,
textarea,
select{

    font:inherit;

}

section{

    position:relative;

}


/* ========================================================================
   ROOT VARIABLES
   ======================================================================== */

:root{

    --primary:#f4b400;

    --primary-dark:#db9b00;

    --secondary:#111827;

    --dark:#0f172a;

    --black:#030712;

    --white:#ffffff;

    --gray-50:#f9fafb;

    --gray-100:#f3f4f6;

    --gray-200:#e5e7eb;

    --gray-300:#d1d5db;

    --gray-400:#9ca3af;

    --gray-500:#6b7280;

    --gray-600:#4b5563;

    --gray-700:#374151;

    --gray-800:#1f2937;

    --gray-900:#111827;

    --radius-sm:8px;

    --radius:16px;

    --radius-lg:24px;

    --radius-xl:32px;

    --shadow-sm:0 10px 30px rgba(0,0,0,.06);

    --shadow:0 20px 60px rgba(0,0,0,.08);

    --shadow-lg:0 30px 80px rgba(0,0,0,.12);

    --transition:.35s ease;

    --container:1280px;

}


/* ========================================================================
   TYPOGRAPHY
   ======================================================================== */

h1,
h2,
h3,
h4,
h5{

    color:var(--secondary);

    line-height:1.15;

    font-weight:800;

}

h1{

    font-size:clamp(42px,5vw,72px);

}

h2{

    font-size:clamp(34px,4vw,56px);

}

h3{

    font-size:26px;

}

p{

    color:var(--gray-600);

    font-size:17px;

}


/* ========================================================================
   LAYOUT
   ======================================================================== */

.container{

    width:min(100% - 40px,var(--container));

    margin-inline:auto;

}

.section{

    padding:120px 0;

}

.bg-light{

    background:var(--gray-50);

}

.bg-dark{

    background:var(--dark);

}

.grid-2{

    display:grid;

    grid-template-columns:repeat(2,1fr);

    gap:80px;

    align-items:center;

}


/* ========================================================================
   BUTTONS
   ======================================================================== */

.btn{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    gap:10px;

    padding:16px 34px;

    border-radius:999px;

    font-weight:700;

    transition:var(--transition);

}

.btn-primary{

    background:var(--primary);

    color:#000;

}

.btn-primary:hover{

    transform:translateY(-4px);

    background:var(--primary-dark);

}

.btn-outline{

    border:2px solid var(--primary);

    color:var(--secondary);

}

.btn-outline:hover{

    background:var(--primary);

}

.btn-dark{

    background:var(--secondary);

    color:white;

}

.btn-dark:hover{

    transform:translateY(-4px);

}
/* ========================================================================
   HEADER
   ======================================================================== */

.site-header{

    position:fixed;

    top:0;

    left:0;

    width:100%;

    z-index:1000;

    transition:all .35s ease;

    background:rgba(255,255,255,.82);

    backdrop-filter:blur(18px);

    -webkit-backdrop-filter:blur(18px);

    border-bottom:1px solid rgba(229,231,235,.8);

}

.site-header.scrolled{

    box-shadow:var(--shadow-sm);

    background:rgba(255,255,255,.96);

}

.navbar{

    height:92px;

    display:flex;

    align-items:center;

    justify-content:space-between;

    gap:40px;

}

/* ========================================================================
   LOGO
   ======================================================================== */

.logo{

    display:flex;
    align-items:center;
    gap:18px;
    flex-shrink:0;

}

.logo img{

    width:72px;
    height:72px;
    object-fit:contain;
    display:block;

}

.logo-text{

    display:flex;

    flex-direction:column;

}

.logo-title{

    font-size:20px;

    font-weight:800;

    color:var(--secondary);

    line-height:1.1;

}

.logo-subtitle{

    font-size:13px;

    color:var(--gray-500);

    margin-top:4px;

}

/* ========================================================================
   DESKTOP MENU
   ======================================================================== */

.nav-menu{

    display:flex;

    align-items:center;

    gap:38px;

}

.nav-menu a{

    position:relative;

    font-weight:600;

    color:var(--gray-700);

    transition:var(--transition);

}

.nav-menu a::after{

    content:"";

    position:absolute;

    left:0;

    bottom:-10px;

    width:0;

    height:2px;

    background:var(--primary);

    transition:.35s;

}

.nav-menu a:hover{

    color:var(--secondary);

}

.nav-menu a:hover::after{

    width:100%;

}

/* ========================================================================
   RIGHT SIDE
   ======================================================================== */

.nav-actions{

    display:flex;

    align-items:center;

    gap:18px;

}

.phone-link{

    font-weight:700;

    color:var(--secondary);

    transition:var(--transition);

}

.phone-link:hover{

    color:var(--primary-dark);

}

/* ========================================================================
   MOBILE BUTTON
   ======================================================================== */

.mobile-toggle{

    display:none;

    width:48px;

    height:48px;

    border-radius:12px;

    background:var(--gray-100);

    position:relative;

}

.mobile-toggle span,

.mobile-toggle::before,

.mobile-toggle::after{

    content:"";

    position:absolute;

    left:12px;

    width:24px;

    height:2px;

    background:var(--secondary);

    transition:.35s;

}

.mobile-toggle span{

    top:23px;

}

.mobile-toggle::before{

    top:16px;

}

.mobile-toggle::after{

    bottom:16px;

}

/* ========================================================================
   MOBILE MENU
   ======================================================================== */

.menu-overlay{

    position:fixed;

    inset:0;

    background:rgba(0,0,0,.45);

    opacity:0;

    visibility:hidden;

    transition:.35s;

    z-index:999;

}

.menu-overlay.active{

    opacity:1;

    visibility:visible;

}

.mobile-menu{

    position:fixed;

    top:0;

    right:-380px;

    width:360px;

    max-width:90%;

    height:100vh;

    background:#fff;

    z-index:1001;

    padding:120px 40px 40px;

    display:flex;

    flex-direction:column;

    justify-content:space-between;

    transition:.4s;

    box-shadow:-20px 0 60px rgba(0,0,0,.15);

}

.mobile-menu.active{

    right:0;

}

.mobile-menu nav{

    display:flex;

    flex-direction:column;

    gap:8px;

}

.mobile-menu nav a{

    padding:18px 0;

    border-bottom:1px solid var(--gray-200);

    font-weight:600;

    color:var(--secondary);

    transition:.3s;

}

.mobile-menu nav a:hover{

    color:var(--primary-dark);

    padding-left:10px;

}

/* ========================================================================
   HERO
   ======================================================================== */

.hero{

    position:relative;

    overflow:hidden;

    min-height:100vh;

    display:flex;

    align-items:center;

    padding-top:92px;

    background:
        radial-gradient(circle at top right,
        rgba(244,180,0,.12),
        transparent 35%),

        linear-gradient(
            180deg,
            #ffffff 0%,
            #fafafa 100%
        );

}

.hero-container{

    display:grid;

    grid-template-columns:1.05fr .95fr;

    align-items:center;

    gap:80px;

}

.hero-content{

    position:relative;

    z-index:2;

}

.hero-badge{

    display:inline-flex;

    align-items:center;

    gap:10px;

    padding:10px 20px;

    border-radius:999px;

    background:#fff7dd;

    color:#8a6400;

    font-size:14px;

    font-weight:700;

    margin-bottom:28px;

}

.hero-title{

    margin-bottom:28px;

    max-width:760px;

}

.hero-description{

    max-width:640px;

    font-size:20px;

    margin-bottom:40px;

    color:var(--gray-600);

}

.hero-buttons{

    display:flex;

    flex-wrap:wrap;

    gap:18px;

    margin-bottom:50px;

}
/* ========================================================================
   HERO IMAGE
   ======================================================================== */

.hero-image{

    position:relative;

    display:flex;

    justify-content:center;

    align-items:center;

    z-index:2;

}

.hero-image img{

    position:relative;

    width:100%;

    max-width:680px;

    z-index:3;

    filter:drop-shadow(0 40px 70px rgba(0,0,0,.18));

    animation:generatorFloat 6s ease-in-out infinite;

}

.hero-glow{

    position:absolute;

    width:520px;

    height:520px;

    border-radius:50%;

    background:radial-gradient(circle,
        rgba(244,180,0,.28) 0%,
        rgba(244,180,0,.12) 45%,
        transparent 72%);

    filter:blur(20px);

    animation:pulseGlow 5s ease-in-out infinite;

}

/* ========================================================================
   HERO FEATURES
   ======================================================================== */

.hero-features{

    display:flex;

    flex-wrap:wrap;

    gap:18px;

}

.hero-feature{

    display:flex;

    align-items:center;

    gap:14px;

    padding:16px 22px;

    background:#ffffff;

    border:1px solid var(--gray-200);

    border-radius:999px;

    box-shadow:var(--shadow-sm);

    transition:var(--transition);

}

.hero-feature:hover{

    transform:translateY(-6px);

    box-shadow:var(--shadow);

}

.feature-icon{

    width:18px;

    height:18px;

    color:var(--primary);

    flex-shrink:0;

}

.hero-feature span{

    font-weight:600;

    color:var(--gray-700);

    white-space:nowrap;

}

/* ========================================================================
   HERO STATISTICS
   ======================================================================== */

.hero-statistics{

    margin-top:-80px;

    position:relative;

    z-index:20;

}

.statistics-grid{

    display:grid;

    grid-template-columns:repeat(4,1fr);

    gap:30px;

}

.stat-card{

    background:#ffffff;

    border-radius:24px;

    padding:36px 28px;

    text-align:center;

    box-shadow:var(--shadow);

    border:1px solid rgba(229,231,235,.9);

    transition:.35s;

}

.stat-card:hover{

    transform:translateY(-12px);

    box-shadow:var(--shadow-lg);

}

.stat-number{

    display:block;

    font-size:34px;

    font-weight:800;

    color:var(--primary-dark);

    margin-bottom:10px;

}

.stat-title{

    color:var(--gray-600);

    font-weight:600;

}

/* ========================================================================
   SECTION HEADER
   ======================================================================== */

.section-header{

    text-align:center;

    max-width:760px;

    margin:0 auto 70px;

}

.section-subtitle{

    display:inline-block;

    padding:10px 18px;

    background:#fff6da;

    color:#9a7000;

    border-radius:999px;

    font-size:14px;

    font-weight:700;

    letter-spacing:.04em;

    margin-bottom:20px;

}

.section-subtitle.light{

    background:rgba(255,255,255,.14);

    color:#ffffff;

}

.section-header h2{

    margin-bottom:22px;

}

.section-header p{

    font-size:18px;

}

/* ========================================================================
   ABOUT PREVIEW
   ======================================================================== */

.about-image{

    position:relative;

}

.about-image img{

    width:100%;

    border-radius:32px;

    box-shadow:var(--shadow-lg);

}

.about-content h2{

    margin-bottom:26px;

}

.about-content p{

    margin-bottom:24px;

}

/* ========================================================================
   SERVICES
   ======================================================================== */

.services-grid{

    display:grid;

    grid-template-columns:repeat(4,1fr);

    gap:30px;

}

.service-card{

    background:#ffffff;

    border-radius:24px;

    padding:40px 34px;

    border:1px solid var(--gray-200);

    transition:.35s;

    position:relative;

    overflow:hidden;

}

.service-card::before{

    content:"";

    position:absolute;

    top:0;

    left:0;

    width:100%;

    height:5px;

    background:var(--primary);

    transform:scaleX(0);

    transform-origin:left;

    transition:.35s;

}

.service-card:hover{

    transform:translateY(-12px);

    box-shadow:var(--shadow-lg);

}

.service-card:hover::before{

    transform:scaleX(1);

}

.service-image{

    width:100%;

    height:220px;

    overflow:hidden;

    border-radius:18px;

    margin-bottom:24px;

    background:#f8f8f8;

}

.service-image img{

    width:100%;

    height:100%;

    object-fit:cover;

    display:block;

    transition:transform .5s ease;

}

.service-card:hover .service-image img{

    transform:scale(1.05);

}

.service-card h3{

    margin-bottom:18px;

}

.service-card p{

    margin-bottom:28px;

    min-height:92px;

}

.service-link{

    display:inline-flex;

    align-items:center;

    gap:10px;

    font-weight:700;

    color:var(--primary-dark);

    transition:.3s;

}

.service-link:hover{

    gap:18px;

}
/* ========================================================================
   INDUSTRIES
   ======================================================================== */

.industry-grid{

    display:grid;

    grid-template-columns:repeat(4,1fr);

    gap:28px;

}

.industry-card{

    position:relative;

    padding:42px 28px;

    background:#ffffff;

    border-radius:24px;

    border:1px solid var(--gray-200);

    text-align:center;

    overflow:hidden;

    transition:var(--transition);

}

.industry-card::before{

    content:"";

    position:absolute;

    inset:0;

    background:linear-gradient(
        135deg,
        rgba(244,180,0,.08),
        transparent 70%
    );

    opacity:0;

    transition:.35s;

}

.industry-card:hover{

    transform:translateY(-10px);

    box-shadow:var(--shadow);

    border-color:rgba(244,180,0,.45);

}

.industry-card:hover::before{

    opacity:1;

}

.industry-card h3{

    position:relative;

    z-index:2;

    font-size:22px;

}

/* ========================================================================
   WHY US
   ======================================================================== */

.why-us{

    overflow:hidden;

}

.why-image{

    position:relative;

}

.why-image img{

    border-radius:32px;

    box-shadow:var(--shadow-lg);

}

.check-list{

    display:grid;

    gap:18px;

    margin:36px 0 42px;

}

.check-list li{

    display:flex;

    align-items:center;

    gap:16px;

    font-weight:600;

    color:var(--gray-700);

}

.check-list li::before{

    content:"✓";

    display:flex;

    justify-content:center;

    align-items:center;

    width:34px;

    height:34px;

    border-radius:50%;

    background:var(--primary);

    color:#000;

    font-weight:800;

    flex-shrink:0;

}

/* ========================================================================
   WORK PROCESS
   ======================================================================== */

.process-grid{

    display:grid;

    grid-template-columns:repeat(4,1fr);

    gap:28px;

}

.process-card{

    position:relative;

    padding:42px 34px;

    background:#ffffff;

    border-radius:26px;

    border:1px solid var(--gray-200);

    transition:.35s;

}

.process-card:hover{

    transform:translateY(-12px);

    box-shadow:var(--shadow-lg);

}

.process-number{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    width:62px;

    height:62px;

    border-radius:50%;

    background:var(--primary);

    color:#000;

    font-weight:800;

    font-size:22px;

    margin-bottom:28px;

}

.process-card h3{

    margin-bottom:18px;

}

/* ========================================================================
   BRANDS
   ======================================================================== */

.brand-slider{

    display:grid;

    grid-template-columns:repeat(5,1fr);

    gap:30px;

    align-items:center;

}

.brand-item{

    display:flex;

    justify-content:center;

    align-items:center;

    height:130px;

    padding:28px;

    border-radius:22px;

    background:#ffffff;

    border:1px solid var(--gray-200);

    transition:.35s;

}

.brand-item:hover{

    transform:translateY(-8px);

    box-shadow:var(--shadow);

}

.brand-item img{

    max-width:140px;

    max-height:60px;

    opacity:.75;

    filter:grayscale(100%);

    transition:.35s;

}

.brand-item:hover img{

    opacity:1;

    filter:none;

}

/* ========================================================================
   PROJECTS
   ======================================================================== */

.project-grid{

    display:grid;

    grid-template-columns:repeat(3,1fr);

    gap:34px;

}

.project-card{

    position:relative;

    overflow:hidden;

    border-radius:30px;

    box-shadow:var(--shadow);

    cursor:pointer;

}

.project-card img{

    width:100%;

    height:420px;

    object-fit:cover;

    transition:transform .6s ease;

}

.project-card:hover img{

    transform:scale(1.08);

}

.project-content{

    position:absolute;

    left:0;

    right:0;

    bottom:0;

    padding:34px;

    background:linear-gradient(
        transparent,
        rgba(0,0,0,.88)
    );

}

.project-content span{

    display:inline-block;

    color:var(--primary);

    font-weight:700;

    margin-bottom:10px;

}

.project-content h3{

    color:#ffffff;

    font-size:28px;

}

/* ========================================================================
   CTA
   ======================================================================== */

.cta-banner{

    padding:120px 0;

}

.cta-wrapper{

    display:flex;

    justify-content:space-between;

    align-items:center;

    gap:80px;

    padding:70px;

    border-radius:36px;

    background:linear-gradient(
        135deg,
        #111827,
        #1f2937
    );

    color:#ffffff;

    overflow:hidden;

    position:relative;

}

.cta-wrapper::before{

    content:"";

    position:absolute;

    width:500px;

    height:500px;

    right:-180px;

    top:-220px;

    border-radius:50%;

    background:rgba(244,180,0,.08);

}

.cta-content{

    position:relative;

    z-index:2;

}

.cta-content h2{

    color:#ffffff;

    margin:18px 0 24px;

}

.cta-content p{

    color:rgba(255,255,255,.78);

    max-width:620px;

}

.cta-buttons{

    display:flex;

    flex-wrap:wrap;

    gap:18px;

    position:relative;

    z-index:2;

}
/* ========================================================================
   FAQ
   ======================================================================== */

.faq{

    background:#ffffff;

}

.faq-wrapper{

    max-width:900px;

    margin:0 auto;

    display:flex;

    flex-direction:column;

    gap:22px;

}

.faq-item{

    border:1px solid var(--gray-200);

    border-radius:22px;

    overflow:hidden;

    background:#ffffff;

    transition:var(--transition);

}

.faq-item:hover{

    box-shadow:var(--shadow);

}

.faq-item[open]{

    border-color:rgba(244,180,0,.45);

}

.faq-item summary{

    list-style:none;

    cursor:pointer;

    padding:28px 34px;

    font-size:20px;

    font-weight:700;

    color:var(--secondary);

    display:flex;

    justify-content:space-between;

    align-items:center;

}

.faq-item summary::-webkit-details-marker{

    display:none;

}

.faq-item summary::after{

    content:"+";

    font-size:30px;

    color:var(--primary-dark);

    transition:.3s;

}

.faq-item[open] summary::after{

    transform:rotate(45deg);

}

.faq-item p{

    padding:0 34px 30px;

    color:var(--gray-600);

}

/* ========================================================================
   CONTACT
   ======================================================================== */

.contact-preview{

    color:#ffffff;

}

.contact-grid{

    display:grid;

    grid-template-columns:1fr 520px;

    gap:80px;

    align-items:center;

}

.contact-content h2{

    color:#ffffff;

    margin:18px 0 24px;

}

.contact-content p{

    color:rgba(255,255,255,.78);

    margin-bottom:42px;

}

.contact-list{

    display:flex;

    flex-direction:column;

    gap:24px;

}

.contact-list strong{

    display:block;

    color:#ffffff;

    margin-bottom:8px;

    font-size:18px;

}

.contact-list a{

    color:rgba(255,255,255,.82);

    transition:.3s;

}

.contact-list a:hover{

    color:var(--primary);

}

/* ========================================================================
   CONTACT FORM
   ======================================================================== */

.contact-form-card{

    background:#ffffff;

    padding:42px;

    border-radius:28px;

    box-shadow:var(--shadow-lg);

}

.form-group{

    margin-bottom:20px;

}

.form-group:last-child{

    margin-bottom:0;

}

.form-group input,

.form-group textarea{

    width:100%;

    padding:18px 20px;

    border-radius:16px;

    border:1px solid var(--gray-300);

    background:#ffffff;

    transition:.3s;

    resize:vertical;

}

.form-group input:focus,

.form-group textarea:focus{

    outline:none;

    border-color:var(--primary);

    box-shadow:0 0 0 4px rgba(244,180,0,.15);

}

/* ========================================================================
   FOOTER
   ======================================================================== */

.site-footer{

    background:#05070c;

    color:#ffffff;

    padding-top:90px;

}

.footer-grid{

    display:grid;

    grid-template-columns:2fr 1fr 1fr 1fr;

    gap:60px;

    padding-bottom:60px;

}

.footer-column img{

    width:180px;

    margin-bottom:24px;

}

.footer-column p{

    color:rgba(255,255,255,.65);

}

.footer-column h3{

    color:#ffffff;

    font-size:22px;

    margin-bottom:24px;

}

.footer-column ul{

    display:flex;

    flex-direction:column;

    gap:16px;

}

.footer-column ul a{

    color:rgba(255,255,255,.72);

    transition:.3s;

}

.footer-column ul a:hover{

    color:var(--primary);

    padding-left:8px;

}

.social-links{

    display:flex;

    gap:14px;

}

.social-links a{

    width:48px;

    height:48px;

    border-radius:50%;

    background:#1f2937;

    transition:.3s;

}

.social-links a:hover{

    background:var(--primary);

    transform:translateY(-5px);

}

.footer-bottom{

    border-top:1px solid rgba(255,255,255,.08);

    padding:28px 0;

    text-align:center;

}

.footer-bottom p{

    color:rgba(255,255,255,.55);

    font-size:15px;

}

/* ========================================================================
   FLOATING BUTTONS
   ======================================================================== */

.scroll-progress{

    position:fixed;

    top:0;

    left:0;

    width:0;

    height:4px;

    background:var(--primary);

    z-index:2000;

}

.page-loader{

    position:fixed;

    inset:0;

    display:flex;

    align-items:center;

    justify-content:center;

    background:#ffffff;

    z-index:3000;

    transition:.5s;

}

.loader-circle{

    width:70px;

    height:70px;

    border-radius:50%;

    border:5px solid var(--gray-200);

    border-top-color:var(--primary);

    animation:spin 1s linear infinite;

}

.page-loader.hide{

    opacity:0;

    visibility:hidden;

}

.whatsapp-float{

    position:fixed;

    right:28px;

    bottom:28px;

    width:64px;

    height:64px;

    border-radius:50%;

    background:#25D366;

    display:flex;

    align-items:center;

    justify-content:center;

    color:#ffffff;

    box-shadow:var(--shadow);

    transition:.3s;

    z-index:1000;

}

.whatsapp-float:hover{

    transform:translateY(-6px) scale(1.05);

}

.back-to-top{

    position:fixed;

    right:28px;

    bottom:108px;

    width:58px;

    height:58px;

    border-radius:50%;

    background:var(--secondary);

    color:#ffffff;

    opacity:0;

    visibility:hidden;

    transition:.3s;

    z-index:999;

}

.back-to-top.show{

    opacity:1;

    visibility:visible;

}

.back-to-top:hover{

    background:var(--primary);

    color:#000;

}
/* ========================================================================
   SCROLL ANIMATIONS
   ======================================================================== */

.fade-up,
.fade-left,
.fade-right,
.fade-in{

    opacity:0;

    transition:
        opacity .8s ease,
        transform .8s ease;

    will-change:transform,opacity;

}

.fade-up{

    transform:translateY(60px);

}

.fade-left{

    transform:translateX(-60px);

}

.fade-right{

    transform:translateX(60px);

}

.fade-in{

    transform:scale(.96);

}

.fade-up.active,
.fade-left.active,
.fade-right.active,
.fade-in.active{

    opacity:1;

    transform:none;

}

/* ========================================================================
   HOVER EFFECT HELPERS
   ======================================================================== */

.lift{

    transition:.35s ease;

}

.lift:hover{

    transform:translateY(-8px);

}

.shadow-hover{

    transition:.35s;

}

.shadow-hover:hover{

    box-shadow:var(--shadow-lg);

}

.zoom{

    overflow:hidden;

}

.zoom img{

    transition:transform .6s ease;

}

.zoom:hover img{

    transform:scale(1.08);

}

/* ========================================================================
   KEYFRAMES
   ======================================================================== */

@keyframes generatorFloat{

    0%{

        transform:translateY(0);

    }

    50%{

        transform:translateY(-18px);

    }

    100%{

        transform:translateY(0);

    }

}

@keyframes pulseGlow{

    0%{

        transform:scale(.95);

        opacity:.45;

    }

    50%{

        transform:scale(1.08);

        opacity:.9;

    }

    100%{

        transform:scale(.95);

        opacity:.45;

    }

}

@keyframes spin{

    from{

        transform:rotate(0deg);

    }

    to{

        transform:rotate(360deg);

    }

}

@keyframes fadeIn{

    from{

        opacity:0;

    }

    to{

        opacity:1;

    }

}

@keyframes slideUp{

    from{

        opacity:0;

        transform:translateY(50px);

    }

    to{

        opacity:1;

        transform:none;

    }

}

/* ========================================================================
   TABLET
   ======================================================================== */

@media (max-width:1200px){

    .services-grid{

        grid-template-columns:repeat(2,1fr);

    }

    .industry-grid{

        grid-template-columns:repeat(2,1fr);

    }

    .statistics-grid{

        grid-template-columns:repeat(2,1fr);

    }

    .process-grid{

        grid-template-columns:repeat(2,1fr);

    }

    .brand-slider{

        grid-template-columns:repeat(3,1fr);

    }

    .project-grid{

        grid-template-columns:repeat(2,1fr);

    }

}

/* ========================================================================
   MOBILE NAVIGATION
   ======================================================================== */

@media (max-width:992px){

    .nav-menu{

        display:none;

    }

    .phone-link{

        display:none;

    }

    .mobile-toggle{

        display:block;

    }

    .hero-container{

        grid-template-columns:1fr;

        text-align:center;

    }

    .hero-content{

        order:2;

    }

    .hero-image{

        order:1;

    }

    .hero-features{

        justify-content:center;

    }

    .grid-2{

        grid-template-columns:1fr;

    }

    .contact-grid{

        grid-template-columns:1fr;

    }

    .footer-grid{

        grid-template-columns:1fr 1fr;

    }

}

/* ========================================================================
   MOBILE
   ======================================================================== */

@media (max-width:768px){

    .section{

        padding:80px 0;

    }

    .hero{

        min-height:auto;

        padding-top:130px;

        padding-bottom:80px;

    }

    .hero-buttons{

        flex-direction:column;

    }

    .hero-buttons .btn{

        width:100%;

    }

    .services-grid,

    .industry-grid,

    .statistics-grid,

    .process-grid,

    .brand-slider,

    .project-grid{

        grid-template-columns:1fr;

    }

    .cta-wrapper{

        padding:40px;

        flex-direction:column;

        align-items:flex-start;

    }

    .footer-grid{

        grid-template-columns:1fr;

        gap:40px;

    }

}

/* ========================================================================
   SMALL MOBILE
   ======================================================================== */

@media (max-width:576px){

    .container{

        width:min(100% - 28px,var(--container));

    }

    .navbar{

        height:82px;

    }

    .logo img{

        width:46px;

        height:46px;

    }

    .logo-title{

        font-size:18px;

    }

    .hero-description{

        font-size:18px;

    }

    .stat-card{

        padding:26px;

    }

    .service-card{

        padding:30px;

    }

    .contact-form-card{

        padding:28px;

    }

}

/* ========================================================================
   PRINT
   ======================================================================== */

@media print{

    .site-header,

    .site-footer,

    .whatsapp-float,

    .back-to-top,

    .page-loader{

        display:none !important;

    }

    body{

        background:#ffffff;

        color:#000000;

    }

}
/* =======================================================
   LEGAL PAGES
======================================================= */

.content-area{

    max-width:900px;

    margin:0 auto;

    line-height:1.9;

}

.content-area h2{

    margin-bottom:24px;

}

.content-area h3{

    margin-top:40px;

    margin-bottom:16px;

    color:var(--primary-color);

}

.content-area p{

    margin-bottom:18px;

}

.content-area ul{

    margin:20px 0;

    padding-left:22px;

}

.content-area li{

    margin-bottom:10px;

}
.hero-trust{
    display:flex;
    gap:24px;
    flex-wrap:wrap;
    margin:25px 0;
    font-weight:600;
    color:#fff;
}

.hero-trust span{
    display:flex;
    align-items:center;
    gap:8px;
}
/* ===== FOOTER LOGO ===== */

.footer-logo{

    width:80px;
    height:80px;
    display:block;
    margin-bottom:18px;

}

.footer-brand{

    color:#fff;
    font-size:26px;
    font-weight:800;
    margin-bottom:16px;
    line-height:1.2;

}

.footer-phone{

    display:inline-block;
    margin-top:18px;
    color:#ffffff;
    font-weight:700;
    text-decoration:none;
    transition:.3s;

}

.footer-phone:hover{

    color:var(--primary);

}
<div class="certificate-grid">

    <article class="certificate-card">

        <img src="/assets/images/certificates/certificate-01.webp"
             alt="ISO 9001">

        <div class="certificate-overlay">

            <h3>ISO 9001</h3>

            <p>Kalite Yönetim Sistemi</p>

        </div>

    </article>

    <article class="certificate-card">

        <img src="/assets/images/certificates/certificate-02.webp"
             alt="Teknik Servis">

        <div class="certificate-overlay">

            <h3>Teknik Servis</h3>

            <p>Uzman Teknik Kadro</p>

        </div>

    </article>

    <article class="certificate-card">

        <img src="/assets/images/certificates/certificate-03.webp"
             alt="İş Güvenliği">

        <div class="certificate-overlay">

            <h3>İş Güvenliği</h3>

            <p>Kalite Standartları</p>

        </div>

    </article>

    <article class="certificate-card">

        <img src="/assets/images/certificates/certificate-04.webp"
             alt="Türkiye Geneli">

        <div class="certificate-overlay">

            <h3>Türkiye Geneli</h3>

            <p>Hızlı Destek</p>

        </div>

    </article>

</div>
.certificate-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
    gap:30px;
    margin-top:60px;
}

.certificate-card{
    background:#fff;
    border-radius:20px;
    overflow:hidden;
    box-shadow:0 12px 35px rgba(0,0,0,.08);
    transition:.35s;
    text-align:center;
}

.certificate-card:hover{
    transform:translateY(-8px);
    box-shadow:0 20px 50px rgba(0,0,0,.18);
}

.certificate-card img{
    width:100%;
    height:220px;
    object-fit:cover;
    display:block;
    transition:.35s;
}

.certificate-card:hover img{
    transform:scale(1.05);
}

.certificate-card h3{
    margin:20px 0 8px;
}

.certificate-card p{
    padding:0 20px 24px;
}
.location-wrapper{
    display:grid;
    grid-template-columns:2fr 1fr;
    gap:40px;
    margin-top:60px;
    align-items:stretch;
}

.location-map iframe{
    width:100%;
    height:500px;
    border:none;
    border-radius:24px;
    box-shadow:0 15px 40px rgba(0,0,0,.12);
}

.location-info{
    background:#fff;
    border-radius:24px;
    padding:40px;
    box-shadow:0 15px 40px rgba(0,0,0,.08);
    display:flex;
    flex-direction:column;
    justify-content:center;
}

.location-info h3{
    font-size:32px;
    margin-bottom:20px;
}

.location-info p{
    margin-bottom:20px;
    line-height:1.8;
}

.location-info a{
    display:block;
    margin-bottom:15px;
    font-weight:600;
    color:#111827;
    text-decoration:none;
}

@media(max-width:992px){

.location-wrapper{

grid-template-columns:1fr;

}

.location-map iframe{

height:420px;

}

}
/* CONTACT STRIP */

.contact-strip{
    padding:70px 0;
    background:#ffffff;
}

.contact-strip-grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:30px;
}

.contact-box{
    background:#fff;
    border:1px solid #ececec;
    border-radius:18px;
    padding:30px;
    text-align:center;
    box-shadow:0 10px 35px rgba(0,0,0,.06);
}

.contact-label{
    display:block;
    color:#d9a400;
    font-weight:700;
    margin-bottom:15px;
    text-transform:uppercase;
    font-size:13px;
    letter-spacing:1px;
}

.contact-box a,
.contact-box p{
    color:#1b2233;
    font-size:20px;
    font-weight:600;
    text-decoration:none;
    margin:0;
}

@media(max-width:768px){

.contact-strip-grid{
    grid-template-columns:1fr;
}

}
.social-links{
    display:flex;
    gap:15px;
    margin-top:20px;
}

.social-links a{
    width:52px;
    height:52px;
    border-radius:50%;
    background:#1d2433;
    display:flex;
    align-items:center;
    justify-content:center;
    color:#fff;
    text-decoration:none;
    transition:.3s;
    font-size:20px;
}

.social-links a:hover{
    background:#f4b400;
    color:#111827;
    transform:translateY(-4px);
}
.brand-item img{
    width:100%;
    height:100%;
    object-fit:cover;
    object-position:center;
    filter:grayscale(100%);
    transition:.35s;
}

.brand-item img{
    width:90%;
    height:90%;
    object-fit:contain;
    filter:grayscale(100%);
    opacity:.85;
    transition:.35s;
}

.brand-item:hover{
    transform:translateY(-8px);
    box-shadow:0 20px 45px rgba(0,0,0,.12);
}

.brand-item:hover img{
    filter:none;
    transform:scale(1.05);
}
.brand-slider{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
    gap:30px;
    margin-top:60px;
}

.brand-item{
    background:#fff;
    border-radius:24px;
    padding:28px;
    border:1px solid #ececec;
    text-align:center;
    transition:.35s;
    overflow:hidden;
    cursor:pointer;
    box-shadow:0 10px 30px rgba(0,0,0,.04);
}

.brand-image{
    height:210px;
    display:flex;
    justify-content:center;
    align-items:center;
    overflow:hidden;
}

.brand-image img{
    width:100%;
    height:100%;
    object-fit:contain;
    filter:grayscale(100%);
    transition:.45s;
}

.brand-item h3{
    margin-top:18px;
    font-size:22px;
    font-weight:700;
    color:#1a2233;
}

.brand-item:hover{
    transform:translateY(-10px);
    box-shadow:0 25px 50px rgba(0,0,0,.12);
}

.brand-item:hover img{
    filter:none;
    transform:scale(1.08);
}
/*=================================================
PREMIUM BRANDS
=================================================*/

.brand-grid{

    display:grid;

    grid-template-columns:repeat(auto-fit,minmax(220px,1fr));

    gap:30px;

    margin-top:60px;

}

.brand-card{

    background:#fff;

    border-radius:22px;

    overflow:hidden;

    border:1px solid #ececec;

    transition:.35s;

    box-shadow:0 10px 30px rgba(0,0,0,.05);

}

.brand-card:hover{

    transform:translateY(-8px);

    box-shadow:0 20px 45px rgba(0,0,0,.12);

}

.brand-image{

    height:220px;

    overflow:hidden;

}

.brand-image img{

    width:100%;

    height:100%;

    object-fit:cover;

    filter:grayscale(100%);

    transition:.45s;

}

.brand-card:hover img{

    filter:none;

    transform:scale(1.05);

}

.brand-info{

    padding:22px;

    text-align:center;

}

.brand-info h3{

    font-size:22px;

    margin-bottom:8px;

    color:#101828;

}

.brand-info p{

    color:#667085;

    font-size:15px;

}
/*=================================
TEKLİF HERO
=================================*/

.quote-hero{

    padding-top:170px;

}
/*=================================
QUOTE STEP
=================================*/

.quote-progress{

    display:flex;

    justify-content:space-between;

    align-items:center;

    gap:20px;

    margin-top:50px;

}

.step{

    flex:1;

    text-align:center;

    position:relative;

}

.step span{

    width:56px;

    height:56px;

    display:flex;

    justify-content:center;

    align-items:center;

    margin:0 auto 14px;

    border-radius:50%;

    background:#f4f4f4;

    color:#555;

    font-size:20px;

    font-weight:700;

    transition:.3s;

}

.step p{

    font-weight:600;

    color:#666;

    font-size:15px;

}

.step.active span{

    background:#f4b400;

    color:#fff;

    box-shadow:0 10px 25px rgba(244,180,0,.35);

}

.step.active p{

    color:#111827;

}

.step:not(:last-child)::after{

    content:"";

    position:absolute;

    top:28px;

    left:60%;

    width:80%;

    height:2px;

    background:#e5e7eb;

}
/*=================================
INNER PAGE HERO
=================================*/

.page-hero,
.inner-hero{

    padding-top:170px;

}
/*======================================
PROJECT FILTER
======================================*/

.project-filter{

    display:flex;
    justify-content:center;
    align-items:center;
    flex-wrap:wrap;
    gap:15px;

    margin:60px auto;

}

.project-filter button{

    background:#ffffff;

    color:#1b2435;

    border:1px solid #e5e5e5;

    padding:14px 28px;

    border-radius:50px;

    font-size:15px;

    font-weight:600;

    cursor:pointer;

    transition:.30s;

}

.project-filter button:hover{

    background:#f4b400;

    color:#111;

    border-color:#f4b400;

    transform:translateY(-3px);

    box-shadow:0 12px 25px rgba(244,180,0,.25);

}

.project-filter button.active{

    background:#f4b400;

    border-color:#f4b400;

    color:#111;

}