/*==================================================
    HENOK TIGLU PORTFOLIO V2
    Part 1
    Global Styles
==================================================*/

/*==========================
    Google Fonts
==========================*/

:root{

    --bg:#0F1115;
    --bg-light:#171B22;

    --gold:#F5B942;
    --gold-dark:#D99D18;

    --white:#ffffff;

    --text:#E6EAF0;

    --muted:#A4ADB8;

    --glass:rgba(255,255,255,.05);

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

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

    --radius:24px;

    --transition:.35s ease;

    --max-width:1200px;

}


/*==========================
    Reset
==========================*/

*{

    margin:0;
    padding:0;
    box-sizing:border-box;

}

html{

    scroll-behavior:smooth;

}

body{

    background:var(--bg);

    color:var(--text);

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

    overflow-x:hidden;

    line-height:1.7;

}

img{

    display:block;

    max-width:100%;

}

video{

    width:100%;

    display:block;

}

a{

    color:inherit;

    text-decoration:none;

}

ul{

    list-style:none;

}

button{

    border:none;

    outline:none;

    background:none;

    cursor:pointer;

    font-family:inherit;

}

/*==========================
    Typography
==========================*/

h1,
h2,
h3,
h4{

    font-family:"Poppins",sans-serif;

    color:#fff;

    line-height:1.2;

}

h1{

    font-size:clamp(2.6rem,5vw,4.8rem);

}

h2{

    font-size:clamp(2rem,4vw,3.2rem);

}

h3{

    font-size:1.3rem;

}

p{

    color:var(--muted);

}

/*==========================
Container
==========================*/

.container{

    width:min(92%,var(--max-width));

    margin:auto;

}

/*==========================
Section
==========================*/

.section{

    padding:110px 0;

}

.section-header{

    text-align:center;

    margin-bottom:70px;

}

.section-header span{

    color:var(--gold);

    letter-spacing:3px;

    font-size:.85rem;

    font-weight:700;

}

.section-header h2{

    margin:14px 0;

}

.section-header p{

    max-width:650px;

    margin:auto;

}

/*==========================
Background
==========================*/

.bg-gradient{

    position:fixed;

    inset:0;

    z-index:-3;

    background:
    radial-gradient(circle at top left,
    rgba(245,185,66,.09),
    transparent 45%),

    radial-gradient(circle at bottom right,
    rgba(245,185,66,.06),
    transparent 45%),

    var(--bg);

}

.blur{

    position:fixed;

    border-radius:50%;

    filter:blur(140px);

    z-index:-2;

}

.blur-one{

    width:340px;

    height:340px;

    background:#f5b94222;

    top:-100px;

    left:-80px;

}

.blur-two{

    width:420px;

    height:420px;

    background:#f5b94218;

    right:-120px;

    bottom:-120px;

}

/*==========================
Glass Card
==========================*/

.glass{

    background:var(--glass);

    backdrop-filter:blur(18px);

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

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

    border-radius:var(--radius);

    box-shadow:var(--shadow);

}

/*==========================
Buttons
==========================*/

.btn{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    gap:10px;

    padding:16px 32px;

    border-radius:100px;

    font-weight:600;

    transition:var(--transition);

}

.btn-primary{

    background:var(--gold);

    color:#111;

}

.btn-primary:hover{

    transform:translateY(-4px);

    background:#ffd06d;

    box-shadow:0 12px 35px rgba(245,185,66,.35);

}

.btn-secondary{

    border:1px solid rgba(255,255,255,.12);

    color:#fff;

}

.btn-secondary:hover{

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

    transform:translateY(-4px);

}

/*==========================
Header
==========================*/

.header{

    position:fixed;

    top:0;

    left:0;

    width:100%;

    z-index:999;

    transition:.4s;

}

.header.scrolled{

    background:rgba(15,17,21,.75);

    backdrop-filter:blur(18px);

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

}

.nav-container{

    display:flex;

    align-items:center;

    justify-content:space-between;

    padding:18px 0;

}

.logo img{

    width:58px;

}

.nav{

    display:flex;

    gap:34px;

}

.nav a{

    color:var(--muted);

    transition:var(--transition);

}

.nav a:hover{

    color:#fff;

}

.nav-actions{

    display:flex;

    align-items:center;

    gap:16px;

}

.menu-btn{

    display:none;

    color:#fff;

    font-size:1.7rem;

}

/*==========================
Hero
==========================*/

.hero{

    min-height:100vh;

    display:flex;

    align-items:center;

    padding-top:120px;

}

.hero-grid{

    display:grid;

    grid-template-columns:1.1fr .9fr;

    gap:70px;

    align-items:center;

}

.hero-badge{

    display:inline-block;

    background:rgba(245,185,66,.12);

    color:var(--gold);

    padding:10px 18px;

    border-radius:100px;

    font-weight:700;

    margin-bottom:22px;

}

.hero h1 span{

    color:var(--gold);

}

.hero p{

    margin:28px 0;

    max-width:620px;

    font-size:1.05rem;

}

.hero-buttons{

    display:flex;

    gap:18px;

    flex-wrap:wrap;

    margin-bottom:45px;

}

.hero-trust{

    display:flex;

    gap:26px;

    flex-wrap:wrap;

}

.hero-trust strong{

    display:block;

    color:#fff;

    font-size:1.25rem;

}

.hero-trust span{

    color:var(--muted);

    font-size:.9rem;

}

.hero-image{

    position:relative;

}

.image-frame{

    padding:12px;

    border-radius:30px;

    background:linear-gradient(145deg,
    rgba(245,185,66,.6),
    rgba(255,255,255,.05));

}

.image-frame img{

    border-radius:22px;

}
/*==================================================
    Part 2
    Hero Effects • Portfolio • Benefits
==================================================*/

/*==========================
Floating Cards
==========================*/

.floating-card{

    position:absolute;

    padding:18px 24px;

    border-radius:18px;

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

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

    backdrop-filter:blur(16px);

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

}

.floating-card h4{

    font-size:.95rem;

    color:#fff;

}

.card-one{

    top:8%;

    left:-45px;

}

.card-two{

    right:-35px;

    bottom:10%;

    animation-delay:2.5s;

}

/*==========================
Scroll Indicator
==========================*/

.scroll-indicator{

    position:absolute;

    bottom:40px;

    left:50%;

    transform:translateX(-50%);

    width:34px;

    height:60px;

    border:2px solid rgba(255,255,255,.18);

    border-radius:30px;

    display:flex;

    justify-content:center;

    align-items:flex-start;

    padding-top:10px;

}

.scroll-indicator span{

    width:6px;

    height:12px;

    background:var(--gold);

    border-radius:50px;

    animation:scrollDown 2s infinite;

}

/*==========================
Portfolio
==========================*/

.portfolio{

    position:relative;

}

.video-grid{

    display:grid;

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

    gap:32px;

}

.video-card{

    overflow:hidden;

    transition:.4s ease;

    position:relative;

}

.video-card::before{

    content:"";

    position:absolute;

    inset:0;

    background:linear-gradient(
        to top,
        rgba(0,0,0,.35),
        transparent
    );

    opacity:0;

    transition:.4s;

    pointer-events:none;

}

.video-card:hover{

    transform:translateY(-12px);

    box-shadow:
    0 25px 60px rgba(0,0,0,.45),
    0 0 35px rgba(245,185,66,.18);

}

.video-card:hover::before{

    opacity:1;

}

.video-card video{

    width:100%;

    aspect-ratio:9/16;

    object-fit:cover;

    border-radius:var(--radius);

    background:#000;

}

/*==========================
Benefits
==========================*/

.benefits-grid{

    display:grid;

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

    gap:28px;

}

.benefit-card{

    padding:34px 28px;

    transition:var(--transition);

    position:relative;

    overflow:hidden;

}

.benefit-card::after{

    content:"";

    position:absolute;

    inset:0;

    background:linear-gradient(
        135deg,
        rgba(245,185,66,.08),
        transparent
    );

    opacity:0;

    transition:.35s;

}

.benefit-card:hover{

    transform:translateY(-10px);

    border-color:rgba(245,185,66,.28);

}

.benefit-card:hover::after{

    opacity:1;

}

.benefit-icon{

    width:64px;

    height:64px;

    border-radius:18px;

    display:flex;

    align-items:center;

    justify-content:center;

    font-size:1.6rem;

    margin-bottom:22px;

    background:rgba(245,185,66,.12);

    color:var(--gold);

}

.benefit-card h3{

    margin-bottom:16px;

}

.benefit-card p{

    font-size:.95rem;

}

/*==========================
Reveal Animation
==========================*/

.reveal{

    opacity:0;

    transform:translateY(40px);

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

}

.reveal.active{

    opacity:1;

    transform:translateY(0);

}

/*==========================
Animations
==========================*/

@keyframes float{

    0%{

        transform:translateY(0);

    }

    50%{

        transform:translateY(-12px);

    }

    100%{

        transform:translateY(0);

    }

}

@keyframes scrollDown{

    0%{

        opacity:0;

        transform:translateY(0);

    }

    40%{

        opacity:1;

    }

    100%{

        opacity:0;

        transform:translateY(20px);

    }

}
/*==================================================
    Part 3
    Process • Free Sample • Pricing • Scarcity
==================================================*/

/*==========================
Process Timeline
==========================*/

.process{

    position:relative;

}

.timeline{

    display:grid;

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

    gap:28px;

    position:relative;

}

.timeline-card{

    padding:36px 28px;

    text-align:center;

    transition:var(--transition);

    position:relative;

}

.timeline-card:hover{

    transform:translateY(-10px);

    border:1px solid rgba(245,185,66,.25);

}

.timeline-number{

    width:70px;

    height:70px;

    margin:0 auto 24px;

    border-radius:50%;

    display:flex;

    align-items:center;

    justify-content:center;

    font-weight:700;

    font-size:1.2rem;

    color:#111;

    background:var(--gold);

    box-shadow:0 0 30px rgba(245,185,66,.35);

}

.timeline-card h3{

    margin-bottom:14px;

}

.timeline-card p{

    font-size:.95rem;

}

.timeline-line{

    display:none;

}

/*==========================
Free Sample
==========================*/

.sample{

    position:relative;

}

.sample-box{

    padding:70px;

    text-align:center;

    position:relative;

    overflow:hidden;

}

.sample-box::before{

    content:"";

    position:absolute;

    width:450px;

    height:450px;

    border-radius:50%;

    background:rgba(245,185,66,.08);

    top:-220px;

    right:-180px;

    filter:blur(80px);

}

.sample-tag{

    display:inline-block;

    padding:10px 18px;

    border-radius:999px;

    background:rgba(245,185,66,.12);

    color:var(--gold);

    font-weight:700;

    margin-bottom:22px;

}

.sample-box h2{

    margin-bottom:20px;

}

.sample-box p{

    max-width:700px;

    margin:0 auto 36px;

}

.sample-buttons{

    display:flex;

    justify-content:center;

    gap:18px;

    flex-wrap:wrap;

}

/*==========================
Pricing
==========================*/

.pricing-grid{

    display:grid;

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

    gap:32px;

}

.price-card{

    position:relative;

    padding:42px 34px;

    transition:var(--transition);

    overflow:hidden;

}

.price-card:hover{

    transform:translateY(-14px);

    border:1px solid rgba(245,185,66,.28);

    box-shadow:

    0 25px 60px rgba(0,0,0,.45),

    0 0 35px rgba(245,185,66,.18);

}

.featured{

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

    transform:scale(1.04);

}

.featured:hover{

    transform:scale(1.04) translateY(-12px);

}

.popular-badge{

    position:absolute;

    top:22px;

    right:22px;

    padding:8px 14px;

    background:var(--gold);

    color:#111;

    border-radius:999px;

    font-size:.75rem;

    font-weight:700;

}

.package{

    margin:16px 0;

    color:var(--muted);

}

.price{

    font-size:2.5rem;

    font-weight:700;

    color:#fff;

    font-family:"Poppins",sans-serif;

    margin-bottom:28px;

}

.price-features{

    display:flex;

    flex-direction:column;

    gap:14px;

    margin-bottom:36px;

}

.price-features li{

    color:var(--muted);

    font-size:.96rem;

}

/*==========================
Scarcity
==========================*/

.scarcity{

    padding-top:20px;

}

.scarcity-box{

    text-align:center;

    padding:55px;

    border:2px solid rgba(245,185,66,.25);

    position:relative;

    overflow:hidden;

}

.scarcity-box::before{

    content:"";

    position:absolute;

    inset:0;

    background:linear-gradient(

        135deg,

        rgba(245,185,66,.07),

        transparent

    );

}

.scarcity-box h2{

    position:relative;

    z-index:2;

    margin-bottom:18px;

}

.scarcity-box h2 span{

    color:var(--gold);

}

.scarcity-box p{

    position:relative;

    z-index:2;

    max-width:700px;

    margin:auto;

}
/*==================================================
    Part 4
    About • Contact • Footer • Responsive
==================================================*/

/*==========================
About
==========================*/

.about-grid{

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:70px;

    align-items:center;

}

.about-content h2{

    margin:16px 0;

}

.about-content h3{

    margin-bottom:18px;

    color:var(--gold);

}

.about-content p{

    margin-bottom:35px;

}

.about-stats{

    display:grid;

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

    gap:20px;

}

.stat-card{

    padding:28px;

    text-align:center;

    transition:var(--transition);

}

.stat-card:hover{

    transform:translateY(-8px);

}

.stat-card h3{

    color:var(--gold);

    font-size:1.8rem;

    margin-bottom:10px;

}

/*==========================
Contact
==========================*/

.contact-card{

    padding:80px 50px;

    text-align:center;

}

.contact-card span{

    color:var(--gold);

    font-weight:700;

    letter-spacing:2px;

}

.contact-card h2{

    margin:18px 0;

}

.contact-card p{

    max-width:700px;

    margin:0 auto 40px;

}

.contact-buttons{

    display:flex;

    justify-content:center;

    gap:18px;

    flex-wrap:wrap;

}

/*==========================
Footer
==========================*/

.footer{

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

    margin-top:80px;

}

.footer-content{

    display:grid;

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

    gap:40px;

    padding:60px 0;

}

.footer-brand img{

    width:65px;

    margin-bottom:18px;

}

.footer-brand h3{

    margin-bottom:10px;

}

.footer-links,

.footer-social{

    display:flex;

    flex-direction:column;

    gap:16px;

}

.footer-links a,

.footer-social a{

    color:var(--muted);

    transition:var(--transition);

}

.footer-links a:hover,

.footer-social a:hover{

    color:var(--gold);

}

.footer-bottom{

    text-align:center;

    padding:24px;

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

}

/*==========================
Floating Telegram
==========================*/

.floating-telegram{

    position:fixed;

    right:24px;

    bottom:24px;

    width:64px;

    height:64px;

    border-radius:50%;

    background:var(--gold);

    color:#111;

    display:flex;

    align-items:center;

    justify-content:center;

    box-shadow:0 12px 40px rgba(245,185,66,.35);

    z-index:999;

    transition:var(--transition);

}

.floating-telegram:hover{

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

}

/*==========================
Back To Top
==========================*/

.back-to-top{

    position:fixed;

    left:24px;

    bottom:24px;

    width:58px;

    height:58px;

    border-radius:50%;

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

    color:#fff;

    backdrop-filter:blur(14px);

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

    cursor:pointer;

    opacity:0;

    visibility:hidden;

    transition:.35s;

    z-index:999;

}

.back-to-top.show{

    opacity:1;

    visibility:visible;

}

/*==========================
Responsive
==========================*/

@media(max-width:992px){

.hero-grid,
.about-grid{

grid-template-columns:1fr;

text-align:center;

}

.hero p{

margin:auto;

}

.hero-buttons,
.hero-trust{

justify-content:center;

}

.image-frame{

max-width:450px;

margin:auto;

}

.timeline{

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

}

.pricing-grid{

grid-template-columns:1fr;

}

.featured{

transform:none;

}

.featured:hover{

transform:translateY(-12px);

}

.footer-content{

grid-template-columns:1fr;

text-align:center;

}

.footer-brand img{

margin:auto auto 18px;

}

.footer-links,
.footer-social{

align-items:center;

}

}

/*==========================
Mobile
==========================*/

@media(max-width:768px){

.section{

padding:90px 0;

}

.nav{

position:fixed;

top:82px;

left:-100%;

width:100%;

background:#13171d;

flex-direction:column;

padding:35px;

gap:24px;

transition:.4s;

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

}

.nav.active{

left:0;

}

.menu-btn{

display:block;

}

.nav-actions .btn{

display:none;

}

.hero{

padding-top:130px;

}

.hero-grid{

gap:50px;

}

.video-grid{

grid-template-columns:1fr;

}

.benefits-grid{

grid-template-columns:1fr;

}

.timeline{

grid-template-columns:1fr;

}

.about-stats{

grid-template-columns:1fr;

}

.sample-box{

padding:45px 28px;

}

.contact-card{

padding:55px 25px;

}

.floating-card{

display:none;

}

}

/*==========================
Small Phones
==========================*/

@media(max-width:480px){

.btn{

width:100%;

}

.hero-buttons{

flex-direction:column;

}

.contact-buttons{

flex-direction:column;

}

.hero-trust{

flex-direction:column;

gap:18px;

}

.logo img{

width:52px;

}

}

/*==========================
Selection
==========================*/

::selection{

background:var(--gold);

color:#111;

}

/*==========================
Scrollbar
==========================*/

::-webkit-scrollbar{

width:10px;

}

::-webkit-scrollbar-track{

background:#0f1115;

}

::-webkit-scrollbar-thumb{

background:var(--gold);

border-radius:10px;

}

::-webkit-scrollbar-thumb:hover{

background:#ffd06d;

}