/* ==========================================================
   KUZEY MATBAACILIK
   HAKKIMIZDA SAYFASI
   ANA VURGU RENGİ: #c79b6a
========================================================== */


/* ==========================================================
   RENK DEĞİŞKENLERİ
========================================================== */

:root{

    --brand:#c79b6a;
    --brand-light:#d5b38d;
    --brand-dark:#a98258;

    --bg:#0b0b0b;
    --bg-secondary:#0e0e0e;
    --bg-card:#111111;

    --white:#ffffff;

    --text-muted:rgba(255,255,255,.62);
    --text-soft:rgba(255,255,255,.52);

    --border:rgba(255,255,255,.06);

}


/* ==========================================================
   GENEL
========================================================== */

.about-hero,
.about-story,
.timeline,
.stats,
.mission,
.about-cta{
    position:relative;
    z-index:2;
}


.about-hero .container,
.about-story .container,
.timeline .container,
.stats .container,
.mission .container,
.about-cta .container{

    width:min(1200px, calc(100% - 60px));

    margin:0 auto;

}


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

.about-hero{

    min-height:620px;

    display:flex;

    align-items:center;

    padding:150px 0 110px;

    background:
        radial-gradient(
            circle at 20% 45%,
            rgba(155, 155, 155, 0.178),
            transparent 35%
        ),
        radial-gradient(
            circle at 80% 30%,
            rgba(255,255,255,.035),
            transparent 35%
        ),
        var(--bg);

    overflow:hidden;

}


/* sağ tarafta çok hafif ışık */

.about-hero::after{

    content:"";

    position:absolute;

    width:350px;
    height:350px;

    right:-180px;
    top:15%;

    background:rgba(199,155,106,.035);

    filter:blur(100px);

    border-radius:50%;

    pointer-events:none;

}


.about-hero .container{

    position:relative;

    z-index:2;

    max-width:900px;

    text-align:center;

}


/* badge */

.hero-badge{

    display:inline-flex;

    align-items:center;
    justify-content:center;

    padding:9px 18px;

    border:1px solid rgba(199,155,106,.38);

    border-radius:50px;

    color:var(--brand);

    font-size:12px;

    font-weight:600;

    letter-spacing:2px;

    background:rgba(199,155,106,.05);

    margin-bottom:25px;

}


/* başlık */

.about-hero h1{

    margin:0;

    font-size:clamp(48px, 6vw, 82px);

    line-height:.98;

    letter-spacing:-3px;

    font-weight:700;

    color:var(--white);

}


.about-hero h1::first-line{

    color:var(--brand);

}


.about-hero p{

    max-width:700px;

    margin:30px auto 0;

    color:var(--text-muted);

    font-size:17px;

    line-height:1.8;

}


/* ==========================================================
   BİZ KİMİZ
========================================================== */

.about-story > .container{
    display:flex;
    justify-content:center;
}

.about-story .about-content{
    width:100%;
    max-width:900px;
    margin:0 auto;
}

.about-story .section-tag{
    display:block;
    text-align:center;
}

.about-story .about-content h2{
    text-align:center;
    max-width:800px;
    margin:0 auto 30px;
}

.about-story .about-content p{
    max-width:850px;
    margin-left:auto;
    margin-right:auto;
}

/* içerik */

.about-content{

    max-width:600px;

}


.section-tag{

    display:inline-block;

    color:var(--brand);

    font-size:12px;

    font-weight:600;

    letter-spacing:3px;

    margin-bottom:20px;

}


.about-content h2{

    margin:0 0 28px;

    color:var(--white);

    font-size:clamp(32px, 4vw, 50px);

    line-height:1.1;

    letter-spacing:-1.5px;

}


.about-content p{

    margin:0 0 20px;

    color:var(--text-muted);

    font-size:15px;

    line-height:1.9;

}


.about-content strong{

    color:var(--white);

    font-weight:600;

}


/* ==========================================================
   TARİHÇE
========================================================== */

.timeline{

    padding:120px 0;

    background:var(--bg);

}


.timeline .container{

    text-align:center;

}


.timeline > .container > h2{

    margin:0 0 70px;

    color:var(--white);

    font-size:clamp(32px, 4vw, 48px);

    letter-spacing:-1px;

}


.timeline-items{

    position:relative;

    display:grid;

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

    gap:50px;

}


/* yatay çizgi */

.timeline-items::before{

    content:"";

    position:absolute;

    left:10%;

    right:10%;

    top:28px;

    height:1px;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(199,155,106,.45),
            transparent
        );

}


/* timeline item */

.timeline-item{

    position:relative;

    z-index:2;

}


.timeline-item > span{

    display:flex;

    align-items:center;

    justify-content:center;

    width:58px;

    height:58px;

    margin:0 auto 25px;

    border-radius:50%;

    background:#111;

    border:1px solid rgba(199,155,106,.45);

    color:var(--brand);

    font-size:12px;

    font-weight:700;

    letter-spacing:.5px;

    box-shadow:
        0 0 0 8px var(--bg);

}


.timeline-item h3{

    margin:0 0 12px;

    color:var(--white);

    font-size:20px;

    font-weight:600;

}


.timeline-item p{

    max-width:280px;

    margin:0 auto;

    color:var(--text-soft);

    font-size:14px;

    line-height:1.7;

}


/* ==========================================================
   İSTATİSTİKLER
========================================================== */

.stats{

    padding:75px 0;

    background:
        linear-gradient(
            180deg,
            #111111,
            #0d0d0d
        );

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

    border-bottom:1px solid rgba(255,255,255,.04);

}


.stats .container{

    display:grid;

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

    gap:30px;

}


.stat{

    text-align:center;

    padding:10px 20px;

}


.stat h2{

    margin:0 0 8px;

    color:var(--brand);

    font-size:42px;

    line-height:1;

    font-weight:700;

    letter-spacing:-1px;

}


.stat p{

    margin:0;

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

    font-size:13px;

    letter-spacing:.5px;

}


/* ==========================================================
   MİSYON / VİZYON / KALİTE
========================================================== */

.mission{

    padding:120px 0;

    background:var(--bg-secondary);

}


.cards{

    display:grid;

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

    gap:22px;

}


.card{

    position:relative;

    padding:45px 38px;

    min-height:270px;

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

    background:
        linear-gradient(
            145deg,
            rgba(255,255,255,.035),
            rgba(255,255,255,.012)
        );

    transition:
        transform .45s cubic-bezier(.22,1,.36,1),
        border-color .45s ease,
        background .45s ease;

    overflow:hidden;

}


/* kart glow */

.card::before{

    content:"";

    position:absolute;

    width:180px;

    height:180px;

    top:-100px;

    right:-100px;

    background:rgba(199,155,106,.08);

    border-radius:50%;

    filter:blur(30px);

    transition:.5s ease;

}


.card:hover{

    transform:translateY(-8px);

    border-color:rgba(199,155,106,.30);

    background:
        linear-gradient(
            145deg,
            rgba(199,155,106,.07),
            rgba(255,255,255,.015)
        );

}


.card:hover::before{

    transform:scale(1.4);

}


/* ikon */

.card > i{

    display:flex;

    align-items:center;

    justify-content:center;

    width:54px;

    height:54px;

    margin-bottom:25px;

    border-radius:50%;

    background:rgba(199,155,106,.08);

    border:1px solid rgba(199,155,106,.20);

    color:var(--brand);

    font-size:20px;

}


.card h3{

    margin:0 0 15px;

    color:var(--white);

    font-size:21px;

    font-weight:600;

}


.card p{

    margin:0;

    color:var(--text-muted);

    font-size:14px;

    line-height:1.8;

}


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

.about-cta{

    padding:130px 0;

    text-align:center;

    background:
        radial-gradient(
            circle at center,
            rgba(199,155,106,.13),
            transparent 42%
        ),
        var(--bg);

    overflow:hidden;

}


.about-cta .container{

    max-width:850px;

}


.about-cta h2{

    margin:0;

    color:var(--white);

    font-size:clamp(34px, 5vw, 58px);

    line-height:1.08;

    letter-spacing:-2px;

}


.about-cta p{

    max-width:620px;

    margin:25px auto 35px;

    color:var(--text-muted);

    font-size:16px;

    line-height:1.8;

}


.about-cta .btn{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    min-height:52px;

    padding:0 30px;

    border-radius:4px;

    background:var(--brand);

    color:#0b0b0b;

    text-decoration:none;

    font-size:14px;

    font-weight:700;

    transition:
        transform .3s ease,
        background .3s ease,
        box-shadow .3s ease;

}


.about-cta .btn:hover{

    transform:translateY(-3px);

    background:var(--brand-light);

    box-shadow:
        0 12px 35px rgba(199,155,106,.20);

}


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

@media (max-width:991px){

    .about-hero .container,
    .about-story .container,
    .timeline .container,
    .stats .container,
    .mission .container,
    .about-cta .container{

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

    }


    /* HERO */

    .about-hero{

        min-height:550px;

        padding:130px 0 90px;

    }


    .about-hero h1{

        font-size:clamp(44px, 8vw, 68px);

    }


    /* STORY */

    .about-grid{

        grid-template-columns:1fr;

        gap:55px;

    }


    .about-image{

        max-width:700px;

        margin:auto;

    }


    .about-image img{

        height:450px;

    }


    .about-content{

        max-width:700px;

        margin:auto;

    }


    /* TIMELINE */

    .timeline-items{

        gap:25px;

    }


    /* CARDS */

    .cards{

        grid-template-columns:1fr;

        max-width:650px;

        margin:auto;

    }


    .card{

        min-height:auto;

    }


    /* STATS */

    .stats .container{

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

        row-gap:45px;

    }

}


/* ==========================================================
   TELEFON
========================================================== */

@media (max-width:576px){

    .about-hero .container,
    .about-story .container,
    .timeline .container,
    .stats .container,
    .mission .container,
    .about-cta .container{

        width:calc(100% - 30px);

    }


    /* HERO */

    .about-hero{

        min-height:auto;

        padding:115px 0 80px;

    }


    .hero-badge{

        padding:8px 14px;

        font-size:10px;

        letter-spacing:1.5px;

        margin-bottom:20px;

    }


    .about-hero h1{

        font-size:43px;

        letter-spacing:-2px;

        line-height:1;

    }


    .about-hero p{

        margin-top:22px;

        font-size:14px;

        line-height:1.75;

    }


    /* STORY */

    .about-story{

        padding:75px 0;

    }


    .about-grid{

        gap:38px;

    }


    .about-image{

        border-radius:3px;

    }


    .about-image img{

        height:330px;

    }


    .section-tag{

        font-size:10px;

        letter-spacing:2px;

        margin-bottom:14px;

    }


    .about-content h2{

        font-size:32px;

        margin-bottom:22px;

    }


    .about-content p{

        font-size:13px;

        line-height:1.8;

        margin-bottom:17px;

    }


    /* TIMELINE */

    .timeline{

        padding:75px 0;

    }


    .timeline .container > h2{

        margin-bottom:45px;

        font-size:34px;

    }


    .timeline-items{

        display:flex;

        flex-direction:column;

        gap:42px;

    }


    .timeline-items::before{

        top:0;

        bottom:0;

        left:50%;

        right:auto;

        width:1px;

        height:auto;

    }


    .timeline-item > span{

        width:52px;

        height:52px;

        margin-bottom:18px;

        box-shadow:
            0 0 0 7px var(--bg);

        font-size:11px;

    }


    .timeline-item h3{

        font-size:18px;

    }


    .timeline-item p{

        font-size:13px;

        max-width:280px;

    }


    /* STATS */

    .stats{

        padding:55px 0;

    }


    .stats .container{

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

        gap:35px 10px;

    }


    .stat h2{

        font-size:34px;

    }


    .stat p{

        font-size:11px;

    }


    /* CARDS */

    .mission{

        padding:75px 0;

    }


    .cards{

        gap:15px;

    }


    .card{

        padding:32px 26px;

    }


    .card > i{

        width:48px;

        height:48px;

        margin-bottom:20px;

        font-size:18px;

    }


    .card h3{

        font-size:19px;

    }


    .card p{

        font-size:13px;

        line-height:1.75;

    }


    /* CTA */

    .about-cta{

        padding:90px 0;

    }


    .about-cta h2{

        font-size:34px;

        letter-spacing:-1px;

    }


    .about-cta p{

        font-size:13px;

        line-height:1.75;

        margin:20px auto 28px;

    }


    .about-cta .btn{

        min-height:50px;

        padding:0 25px;

        font-size:13px;

    }

}


/* ==========================================================
   KÜÇÜK TELEFON
========================================================== */

@media (max-width:390px){

    .about-hero{

        padding-top:105px;

    }


    .about-hero h1{

        font-size:37px;

        letter-spacing:-1.5px;

    }


    .about-hero p{

        font-size:13px;

    }


    .about-image img{

        height:280px;

    }


    .about-content h2{

        font-size:29px;

    }


    .timeline .container > h2{

        font-size:30px;

    }


    .stat h2{

        font-size:30px;

    }


    .about-cta h2{

        font-size:30px;

    }

}