@charset "utf-8";
@import url("cookie-bar.css");
@import url("404.css");
@import url("cf7.css");
@import url("velemenyek.css");
/* CSS Document */
/*
Theme Name: Vinexpert
Theme URI: https://www.vinexpert.hu
Author: tigaman
Author URI: https://www.tigaman.hu
Description: A VIN Expert Kft 2008 óta végez eredetiségvizsgálatot, okmányirodai jármű ügyintézést (átírást).
Version: 1.0
*/
@font-face {
  font-family: 'Roboto';
  src: url('fonts/Roboto/Roboto-VariableFont_wdth,wght.ttf') format('truetype');
  font-weight: 100 900; 
  font-stretch: 75% 125%; 
  font-style: normal;
  font-display: swap; /* Javasolt: gyorsabb betöltési élmény */
}

@font-face {
  font-family: 'Dosis';
  src: url('fonts/Dosis/Dosis-VariableFont_wght.ttf') format('truetype');
  font-weight: 200 800; /* A Dosis valós tartománya */
  font-style: normal;
  font-display: swap;
}
* { box-sizing: border-box; }
html{ scroll-behavior: smooth; }
body {
	font-size: 1.5vw;
	font-family: 'Roboto', sans-serif;
	background-color: #195894;
	background-image: radial-gradient(circle, rgba(25,88,148,1) 0%, rgba(0,0,0,.7) 71%), url(images/logo.webp);
	margin: 0;
	padding: 0;
	background-size: auto, 200px auto;
}
a { transition: all 1s; text-decoration: none; }
a:hover { text-decoration: underline; }
h1,h2,h3,h4,h5{ font-family: 'Dosis', sans-serif; letter-spacing: .08vw; text-transform: uppercase; font-weight: 500; }
.clear { clear: both; }
.dosis { font-family: 'Dosis', sans-serif; }
.frosted { color: #FFFFFF; background-color: rgba(0,0,0,0.3); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border: 1px solid rgba(255, 255, 255, 0.2); border-radius: 5px; box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1); padding: 1em 2em; }
header { width: 100%; display: flex; justify-content: center; align-items: center; position: sticky; top: 0; z-index: 1000; }
header nav { display: flex; align-items: center; justify-content: center; width: 100%; position: relative; }
header nav .logo img { position: absolute; left: 0; top: 50%; transform: translateY(-50%); height: 50px; width: auto; }
header nav ul { display: flex; list-style: none; margin: 0; padding: 0; z-index: 1; transition: max-height 0.3s ease; overflow: hidden; }
header nav ul li { position: relative; margin: 0 1em; }
header nav ul li a { display: block; color: #fff; text-transform: uppercase; font-weight: 600; padding: 0.5em 0; transition: color 0.3s; }
header nav ul li a:hover { color: rgba(245,208,0,1.0); }
header nav ul li::after { content: ""; position: absolute; top: 50%; right: -0.7em; transform: translateY(-50%); width: 1px; height: 60%; background-color: #fff; }
header nav ul li:last-child::after { content: none; }

/* Hamburger */
.hamburger { display: none; flex-direction: column; justify-content: space-between; width: 30px; height: 22px; background: none; border: none; cursor: pointer; z-index: 2; }
.hamburger span { display: block; height: 3px; width: 100%; background: #fff; border-radius: 3px; transition: all 0.3s; }
.hamburger.active span:nth-child(1) { transform: rotate(45deg) translate(5px,5px); }
.hamburger.active span:nth-child(2) { opacity: 0; }
.hamburger.active span:nth-child(3) { transform: rotate(-45deg) translate(5px,-5px); }

.container { width: 95%; margin: 0 auto; }
.homecontainer { display: grid; grid-template-columns: 1fr 2fr; gap: .5em; margin: 1em auto; }
.head { border-radius: 5px; overflow: hidden; display: flex; }
.head img { width: 100%; height: 100%; object-fit: cover; display: block; }
.head_info {
	text-align: left;
	letter-spacing: 0.2vw;
	text-transform: uppercase;
	font-weight: 600;
}
.content { font-weight: 400; font-size: 90%; margin: 1em 0; }
.content h1 { margin-top: 0; letter-spacing: 0.2vw; }
.content h2 { font-weight: bold; color: #ffcc00; }


.services-list {
    list-style: none;
    padding: 0;
    margin: 1.5em 0;
}

.services-list li {
    margin: 0 0 5px 0;
    position: relative;
    /* Ez a kulcs: a li kapja meg a bal oldali helyet a pipának */
    padding: 4px 10px 4px 40px; 
    color: #fff;

    display: block;
    transition: all 0.4s ease;
}

/* A PIPA - Mindig fixen balra rakjuk a paddingen belülre */
.services-list li::before {
    content: "✓";
    position: absolute;
    left: 10px;
    top: 50%;
    transform: translateY(-50%);
    color: #ffcc00;
    font-weight: bold;
    font-size: 1.2rem;
    z-index: 5;
}

/* HA VAN BENNE LINK (HREF) */
.services-list li:has(a) {
    padding: 0; 
}

.services-list li a {
	display: block;
	width: 100%;
	height: 100%;
    padding: 10px 10px 10px 40px; 
	color: #fff;
	text-decoration: none;
	border: 1px solid #fff;
	border-radius: 5px;
	position: relative;
	overflow: hidden;
	z-index: 1;
	transition: all 0.4s ease;
	text-transform: uppercase;
}

/* Átfutó háttér csak a linknél */
.services-list li a::after {
    content: "";
    position: absolute;
    top: 0;
    right: -100%;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    transition: right 0.4s ease;
    z-index: -1;
}

/* Hover effektek */
.services-list li a:hover {
    color: #ffcc00;
}

.services-list li a:hover::after {
    right: 0;
}

/* Biztosítjuk, hogy a link szövege ne csússzon a pipára */
.services-list li strong {
    color: inherit;
}
/* Blockquote - Elegáns, sárga szegéllyel kiemelt idézet */
.content blockquote {
    margin: 2em 0;
    padding: 1.5em 2em;
    background-color: rgba(0, 0, 0, 0.2); /* Sötétebb áttetsző háttér */
    border-left: 5px solid #ffcc00; /* VIN sárga hangsúly */
    border-radius: 0 5px 5px 0;
    font-style: italic;
    color: #f0f0f0;
    position: relative;
    backdrop-filter: blur(5px);
}

.content blockquote p {
    margin: 0;
    line-height: 1.6;
}

/* Idézőjel ikon (opcionális, de jól néz ki) */
.content blockquote::before {
    content: "\201C"; /* Nyitó idézőjel */
    position: absolute;
    top: -10px;
    left: 10px;
    font-size: 10rem;
    color: rgba(255, 204, 0, 0.2);
    font-family: 'Dosis', sans-serif;
    line-height: 1;
}
Igazad van, a forrásmegjelölés (cite) lemaradt a díszítésből. Ahhoz, hogy stílusos legyen, érdemes a jobb alsó sarokba pozicionálni, és a cég arculati színeit (sárga/fehér) használni.

Így egészítsd ki a CSS-t:
CSS

/* Blockquote forrásmegjelölés (cite) stílusa */
.content blockquote cite {
    display: block;               /* Új sorba teszi */
    text-align: right;            /* Jobbra igazítja */
    margin-top: 1em;              /* Távolság az idézett szövegtől */
    font-family: 'Dosis', sans-serif; /* A címsorok betűtípusa a hangsúlyhoz */
    font-size: 0.9rem;            /* Kicsit kisebb, mint a főszöveg */
    font-style: normal;           /* Alapértelmezett dőlt betű kikapcsolása */
    color: #ffcc00;               /* VIN sárga szín */
    font-weight: 600;
    text-transform: uppercase;    /* Elegáns nagybetűs megjelenés */
    letter-spacing: 0.1vw;
}

/* Egy kis kötőjel a név elé */
.content blockquote cite::before {
    content: "— ";                /* Gondolatjel a név előtt */
    margin-right: 5px;
    opacity: 0.7;
}


/* Ordered List (ol) - Egyedi sárga számozással */
.content ol {
    counter-reset: vin-counter;
    list-style: none;
    padding: 0;
    margin: 1.5em 0;
}

.content ol li {
    counter-increment: vin-counter;
    position: relative;
    padding: 10px 10px 10px 50px; /* Hely a számnak */
    margin-bottom: 10px;
    color: #fff;
    line-height: 1.5;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 5px;
    transition: background 0.3s ease;
}

.content ol li:hover {
    background: rgba(255, 255, 255, 0.1);
}

/* A számok stílusa */
.content ol li::before {
    content: counter(vin-counter) ".";
    position: absolute;
    left: 0;
    top: 0;
    width: 40px;
    height: 100%;
    background-color: rgba(255, 204, 0, 0.1); /* Halvány sárga háttér a számnak */
    color: #ffcc00;
    font-family: 'Dosis', sans-serif;
    font-weight: bold;
    font-size: 1.2rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 5px 0 0 5px;
}

/* Reszponzív javítás mobiltelóra */
@media (max-width: 768px) {
    .content blockquote {
        padding: 1em 1.2em;
        margin: 1.5em 0.5em;
    }
    
    .content ol li {
        padding-left: 45px;
    }
}

.arak { list-style: none; padding: 0; margin: 1em 0; }
.arak li { display: flex; justify-content: space-between; padding: 0.5em 1em; border-bottom: 1px dashed rgba(255,255,255,0.3); font-weight: 600; text-transform: uppercase; }
.arak li:last-child { border-bottom: none; }
.szolgaltatas { color: #fff; flex: 1; }
.ar { color: #ffcc00; margin-left: 1em; white-space: nowrap; }



        :root {
            /* Hosszúkásabb képarány (pl. mozi arány) */
            --aspect-ratio: 8 / 3;
            /* Összes kép száma frissítve 5-re */
            --total-slides: 5;
            --display-duration: 4s;
            --fade-duration: 1s;
            --cycle-duration: calc(var(--total-slides) * (var(--display-duration) + var(--fade-duration)));
        }




        .slider-container {
	width: 100%;

	margin: 1em auto;
	position: relative;
	aspect-ratio: var(--aspect-ratio);
	background-color: #000;
	overflow: hidden;
	box-shadow: 0 20px 40px rgba(0,0,0,0.25);
        }

        .slide {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            opacity: 0;
            animation: fadeAnimation var(--cycle-duration) infinite ease-in-out;
        }

        .slide img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            /* A filter: brightness(0.7); el lett távolítva, nincs sötét overlay */
        }

        /* Caption stílusok */
        .caption {
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	padding: 1em; /* Alulra pozicionálva */
	color: white;
	/* Erősebb szövegárnyék az olvashatóságért overlay nélkül */
	text-shadow: 0 2px 15px rgba(0,0,0,1);
	z-index: 2;
	/* Finom gradiens csak a szöveg alatt az olvashatóságért, nem sötétíti az egész képet */
	background: linear-gradient(to top, rgba(0,0,0,0.7) 0%, rgba(0,0,0,0) 100%);
        }

        .caption h2 {
	font-size: 150%;
	margin: 0 0 10px 0;
	color: #ffcc00; /* Kiemelő szín */
	letter-spacing: 0.vw;
        }

        .caption p {
	font-size: 80%;

	margin: 0;
	font-weight: 500;
	text-transform: uppercase;
        }

        /* Időzítések 5 diára optimalizálva */
        .slide:nth-child(1) { animation-delay: 0s; }
        .slide:nth-child(2) { animation-delay: calc((var(--cycle-duration) / var(--total-slides)) * 1); }
        .slide:nth-child(3) { animation-delay: calc((var(--cycle-duration) / var(--total-slides)) * 2); }
        .slide:nth-child(4) { animation-delay: calc((var(--cycle-duration) / var(--total-slides)) * 3); }
        .slide:nth-child(5) { animation-delay: calc((var(--cycle-duration) / var(--total-slides)) * 4); }

        @keyframes fadeAnimation {
            0% { opacity: 0; }
            5% { opacity: 1; }
            20% { opacity: 1; } /* Kicsit rövidebb kijelzési idő az 5 kép miatt */
            25% { opacity: 0; }
            100% { opacity: 0; }
        }


  

    /* Ikon Blokk Konténer */
    .vin-icon-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
        gap: 25px;
        max-width: 1200px;
        margin: 40px auto;
        padding: 20px;
        font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    }

    /* Egyedi Kártya Stílus */
    .vin-card {
        padding: 45px 25px;
        text-align: center;
        text-decoration: none;
        color: #333;
        transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
        box-shadow: 0 5px 15px rgba(0,0,0,0.05);
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    /* Hover effektus */
    .vin-card:hover {
        transform: translateY(-8px);
        box-shadow: 0 15px 30px rgba(0,0,0,0.12);
    }

    /* Ikonok stílusa */
.vin-card img {
    display: block;
    margin: 0.5em auto;      /* Középre helyezés */
    width: 60px;             /* Fix szélesség (az 50% helyett ez stabilabb) */
    height: 60px;            /* Fix magasság */
    object-fit: contain;     /* Megakadályozza a torzulást */
    transition: transform 0.3s ease, filter 0.3s ease;
    
    /* Ha az eredeti SVG fájlod fekete, ezzel tudod alapból kékre színezni (opcionális): */
    /* filter: invert(24%) sepia(91%) saturate(2284%) hue-rotate(202deg) brightness(91%) contrast(105%); */
}

/* Hover állapot: Kiemelés és színváltás trükkel */
.vin-card:hover img {
    transform: scale(1.1);   /* Enyhe nagyítás */
    
    /* Sárgás/Arany elszíneződés (VIN sárga jellegű) filterrel */
    /* Mivel külső képnél nincs fill, ez az egyetlen mód a színezésre: */
    filter: hue-rotate(180deg) brightness(0.8) saturate(1.5);
}

    /* Szövegek */
    .vin-card h3 {
        margin: 10px 0;
        font-size: 1.4rem;
        color: #ffcc00;
        font-weight: 700;
    }

    .vin-card p {
	font-size: 1rem;
	color: #FFFFFF;
	line-height: 1.5;
	margin: 0;
	text-transform: uppercase;
	font-weight: 500;
    }


  





footer { position: relative; margin: 2em 0 0 0; padding-top: 3em; }
.top { position: absolute; top: 0; left: 50%; transform: translate(-50%, -50%); z-index: 2; width: 40px; height: 40px; background-color: #ffcc00; border-radius: 20%; display: flex; justify-content: center; align-items: center; box-shadow: 0 4px 8px rgba(0,0,0,0.2); transition: transform 0.2s; }
.top:hover { transform: translate(-50%, -50%) scale(1.2); }
.copy { font-size: 60%; font-weight: bold; }
.copy a { color: #ffcc00; }

.map-responsive{
position:relative;
padding-bottom:56.25%;
height:0;
overflow:hidden;
max-width:100%;
}
.map-responsive iframe{
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
border:0;
}

@media (max-width: 768px) {
	
    body { font-size: 18px; }
	
	
	
    .arak li { flex-direction: column; align-items: flex-start; }
    .ar { margin-left: 0; margin-top: 0.3em; }
    .homecontainer { grid-template-columns: 1fr; width: 95%; }
    .head img { height: 350px; }

    header nav ul { position: absolute; top: 100%; left: 0; right: 0; background: rgba(0,0,0,0.9); flex-direction: column; max-height: 0; }
    header nav ul.open { max-height: 500px; }
    header nav ul li { margin: 0; text-align: center; }
    header nav ul li::after { display: none; }
    .hamburger { display: flex; position: absolute; right: 0; top: 50%; transform: translateY(-50%); }
        .vin-icon-grid {
            grid-template-columns: 1fr; /* Nagyon kicsi kijelzőn 1 oszlop */
        }


 .container { width: 98%; margin: 0 auto; }
           :root {
                --aspect-ratio: 16 / 9; /* Mobilon maradjunk a kevésbé széles aránynál */
            }
           
            .slider-container { width: 100%; margin: 20px auto; }

}