/*
=================================================================
  MAIN.CSS — Clean responsive stylesheet tailored to index.php
  - Designed for Kumtel Luxell Yetkili Servis & Satış Mağazası
  - Minimal, accessible, responsive, animation-friendly
=================================================================
*/

:root{
    --bg:#000;
    --overlay:#020026;
    --accent:#0b5ed7;
    --text:#fff;
    --muted:rgba(255,255,255,0.85);
    --maxWidth:1200px;
}

/* ===== Base & Reset ===== */
*{box-sizing:border-box}
html{font-size:10px}
body{
    margin:0;
    font-family: 'Roboto', sans-serif;
    font-weight:300;
    background:var(--bg);
    color:var(--text);
    -webkit-font-smoothing:antialiased;
    overflow-y:auto; /* allow scrolling when needed */
}

img{max-width:100%;height:auto;display:block}

/* Links / Accessibility */
a{color:var(--text); text-decoration:none}
a:focus, a:hover{outline:none;text-decoration:underline;color:#e6f3ff}

/* ===== Preloader ===== */
.preloader{
    position:fixed;left:0;top:0;right:0;bottom:0;z-index:9999;
    display:flex;align-items:center;justify-content:center;
    background:#000;
    transition:height .5s ease .3s, opacity .3s ease;
}
.preloader.preloader-hidden{height:0;opacity:0;pointer-events:none}
.preloader .spinner{display:flex;gap:.8rem}
.preloader .spinner > div{width:18px;height:18px;border-radius:50%;background:#fff;animation:spinner-bounce 1.4s infinite ease-in-out}
.preloader .spinner .bounce-1{animation-delay:-.32s}
.preloader .spinner .bounce-2{animation-delay:-.16s}
@keyframes spinner-bounce{0%,80%,100%{transform:scale(0)}40%{transform:scale(1)}}

/* ===== Hero & Layout ===== */
.hero{position:relative;width:100%;min-height:100vh;overflow:hidden}

/* FRONT content centered */
.hero .front-content{position:relative;z-index:2;display:flex;align-items:center;justify-content:center;min-height:100vh}

.container-mid{
    width:100%;max-width:var(--maxWidth);padding:6vh 2rem;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;margin:0 auto;gap:1.2rem;
}

/* LOGO */
.container-mid img.logo{width:auto;max-width:260px;height:auto;margin-bottom:0}
/* Scale down logo gently on small screens */
.container-mid img.logo{max-width:calc(22vw + 70px)}

h1{font-size:5.2rem;line-height:1.05;margin:0 0 .4em;font-weight:700}
h2{font-size:2.4rem;margin:0 .2em .6em}

.subline{font-size:1.8rem;color:var(--muted);margin:0 .2em;max-width:36rem;margin-left:auto;margin-right:auto}

/* Responsive typography */
h1{font-size:clamp(2.8rem, 6.25vw, 5.2rem)}
h2{font-size:clamp(1.6rem, 3.2vw, 2.4rem)}
.subline{font-size:clamp(1rem, 2.2vw, 1.8rem)}

/* Buttons */
.open-popup{display:inline-block;padding:0 2.6em;height:3.6rem;line-height:3.6rem;border-radius:2em;border:3px solid var(--text);color:var(--text);background:transparent;cursor:pointer}
.open-popup:hover{background:var(--text);color:#111}

/* Services list */
.services ul{list-style:none;padding:0;margin:0.6rem 0;display:inline-block;text-align:left}
/* Services list flows to single column at smaller widths */
@media (max-width:700px){
    .services ul,.services-list{display:block;text-align:center;max-width:30rem;margin-left:auto;margin-right:auto}
    .services ul li,.services-list li{font-size:1.4rem}
}
.services ul li{padding:0.2rem 0;font-size:1.6rem}

/* Custom classes for services section used in HTML */
.services-title{font-weight:500;margin-top:10px;font-size:clamp(1.6rem, 3.2vw, 2.2rem)}
.services-list{list-style:none;padding:0;margin:0.6rem auto;display:inline-block;text-align:left;font-size:1.6rem}
.services-lead{max-width:38rem;margin:20px auto 0;font-size:clamp(1rem,2.2vw,1.4rem);line-height:1.5;opacity:.9;text-align:center}

/* Footer (non-absolute inside container) */
footer.footer{width:100%;text-align:center;margin-top:2.2rem}
footer.footer .subline{font-size:1.3rem}

/* ===== Background content ===== */
.hero .background-content{position:absolute;z-index:1;left:0;top:0;width:100%;height:100%;pointer-events:none}
.hero .background-content.parallax-on{left:50%;top:50%;width:110%;height:110%;transform:translate3d(-50%,-50%,0)}
@media (max-width:800px){
    .hero .background-content.parallax-on{left:0;top:0;width:100%;height:100%;transform:none}
    .background-overlay{opacity:.85}
    .background-img{background-position:center center;background-size:cover}
}
.background-overlay{position:absolute;left:0;top:0;width:100%;height:100%;background:var(--overlay);opacity:.75;z-index:2}
.background-img{position:absolute;left:0;top:0;width:100%;height:100%;background:url('../img/background.webp') center/cover no-repeat;z-index:1}

/* ===== Animations (fade-in/left/right/up/down) ===== */
.animation-container{transition:transform .6s ease,opacity .45s ease;opacity:0}
.animation-container.run-animation{opacity:1;transform:none}

.animation-container.animation-fade-up{transform:translateY(6vh)}
.animation-container.animation-fade-up.run-animation{transform:translateY(0)}

.animation-container.animation-fade-down{transform:translateY(-6vh)}
.animation-container.animation-fade-down.run-animation{transform:translateY(0)}

.animation-container.animation-fade-left{transform:translateX(6vh)}
.animation-container.animation-fade-left.run-animation{transform:translateX(0)}

.animation-container.animation-fade-right{transform:translateX(-6vh)}
.animation-container.animation-fade-right.run-animation{transform:translateX(0)}

/* ===== Popup ===== */
.popup{position:fixed;z-index:9998;left:0;top:0;width:100%;height:100%;display:flex;align-items:center;justify-content:center;opacity:0;pointer-events:none;background:rgba(0,0,0,0.5);transition:opacity .3s ease}
.popup.show{opacity:1;pointer-events:auto}
.popup .card{width:100%;max-width:420px;background:linear-gradient(0deg, rgba(34,34,34,.95), rgba(34,34,34,.95));padding:2.8rem;border-radius:8px;border:4px solid var(--text);color:var(--text);position:relative}
.popup .card .close-button{position:absolute;top:12px;right:12px;width:28px;height:28px;cursor:pointer}
.popup .card .close-button:before,.popup .card .close-button:after{content:'';display:block;position:absolute;left:0;top:50%;width:100%;height:2px;background:#fff}
.popup .card .close-button:before{transform:rotate(45deg)}
.popup .card .close-button:after{transform:rotate(-45deg)}
.popup .card input{width:100%;padding:.6rem;border-radius:6px;border:none}
.popup .card button{width:100%;padding:.6rem;border-radius:6px;border:none;background:var(--accent);color:#fff;cursor:pointer}

/* ===== Subscribe form messages ===== */
.form-error .error-message{display:block;color:#ff6677}
.form-success .success-message{display:block;color:lawngreen}

/* ===== Accessibility focus styles ===== */
:focus{outline:3px solid rgba(11,94,215,0.3);outline-offset:2px}

/* ===== Responsive ===== */
@media (max-width:900px){
    h1{font-size:4rem}
    .subline{font-size:1.6rem}
    .container-mid{padding:5vh 1.2rem}
}

@media (max-width:560px){
    html{font-size:8px}
    h1{font-size:3.2rem}
    h2{font-size:1.8rem}
    .subline{font-size:1.4rem}
    .open-popup{padding:0 1.6rem;height:3rem;line-height:3rem}
    .container-mid{padding:4vh 1rem;gap:0.8rem}
    .hero{min-height:85vh}
    .hero .front-content{align-items:flex-start;padding-top:2vh}
    .container-mid img.logo{max-width:180px}
    .services ul li{font-size:1.3rem}
    footer.footer .subline{font-size:1.1rem}
}

@media (orientation:landscape) and (max-height:420px){
    html{font-size:8px}
    .popup .card{max-width:370px}
}

@media (max-width:420px){
    h1{font-size:2.4rem}
    .container-mid{padding:4vh 0.8rem}
    .hero{min-height:78vh}
    .background-overlay{opacity:.9}
    .subline{max-width:22rem}
    .services ul{max-width:20rem}
}

/* small utilities */
.center{display:flex;align-items:center;justify-content:center}
.hidden{display:none}

/* margin utility */
.mt-1{margin-top:.6rem}

/* end of file */