/* THSNET Web Portal - demo vitrin sayfaları (tanıtım, talep formu, KVKK, onay) */
:root{
    --v-marka:#34586e; --v-marka-koyu:#22394a; --v-marka-acik:#edf3f7; --v-vurgu:#e4761a;
    --v-murekkep:#14202b; --v-metin:#2a3744; --v-soluk:#5f6f7e; --v-cizgi:#e4e8ee; --v-zemin:#f6f7f9;
    --v-yaricap:12px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body.v-body{margin:0;font-family:"Segoe UI",system-ui,-apple-system,Arial,sans-serif;color:var(--v-metin);background:#fff;line-height:1.55;-webkit-font-smoothing:antialiased}
a{color:var(--v-marka)}
.v-kap{max-width:1140px;margin:0 auto;padding:0 20px}

/* üst bar */
.v-ust{position:sticky;top:0;z-index:20;background:rgba(255,255,255,.94);backdrop-filter:saturate(1.4) blur(8px);border-bottom:1px solid var(--v-cizgi)}
.v-ust-ic{display:flex;align-items:center;justify-content:space-between;gap:16px;height:64px}
.v-marka{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--v-murekkep);font-weight:700}
.v-marka img{height:34px;width:auto;border-radius:4px}
.v-marka span{font-size:15px;color:var(--v-soluk);font-weight:600;border-left:1px solid var(--v-cizgi);padding-left:10px}
.v-ust-nav{display:flex;align-items:center;gap:22px;font-size:14.5px}
.v-ust-nav a{text-decoration:none;color:var(--v-metin)}
.v-ust-nav a:hover{color:var(--v-marka)}
.v-ust-giris{font-weight:600}

/* butonlar */
.v-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:46px;padding:0 24px;border-radius:10px;border:0;cursor:pointer;
    background:var(--v-vurgu);color:#fff!important;font-weight:600;font-size:15.5px;text-decoration:none;transition:transform .12s,box-shadow .12s,background .12s}
.v-btn:hover{background:#cf6713;box-shadow:0 8px 20px rgba(228,118,26,.28);transform:translateY(-1px)}
.v-btn-kucuk{height:38px;padding:0 16px;font-size:14px}
.v-btn-ikincil{background:#fff;color:var(--v-marka)!important;border:1px solid #cdd7df}
.v-btn-ikincil:hover{background:var(--v-marka-acik);box-shadow:none}
.v-btn-koyu{background:var(--v-marka)}
.v-btn-koyu:hover{background:var(--v-marka-koyu);box-shadow:0 8px 20px rgba(52,88,110,.25)}
.v-btn-kirmizi{background:#b91c1c}
.v-btn-kirmizi:hover{background:#991b1b;box-shadow:none}

/* hero */
.v-hero{background:linear-gradient(160deg,#22394a 0%,#34586e 55%,#3f6a83 100%);color:#fff;position:relative;overflow:hidden}
.v-hero::after{content:"";position:absolute;right:-120px;top:-120px;width:460px;height:460px;border-radius:50%;background:radial-gradient(circle,rgba(228,118,26,.22),transparent 65%)}
.v-hero-ic{display:grid;grid-template-columns:1.15fr .85fr;gap:48px;align-items:center;padding:76px 20px 84px;position:relative;z-index:1}
.v-etiket{display:inline-block;font-size:12.5px;letter-spacing:.06em;text-transform:uppercase;background:rgba(255,255,255,.12);padding:5px 12px;border-radius:999px;margin-bottom:18px}
.v-hero h1{font-size:44px;line-height:1.12;margin:0 0 16px;font-weight:700;letter-spacing:-.01em}
.v-hero p{font-size:18px;opacity:.9;margin:0 0 28px;max-width:560px}
.v-hero-dugmeler{display:flex;gap:12px;flex-wrap:wrap}
.v-hero .v-btn-ikincil{background:transparent;color:#fff!important;border-color:rgba(255,255,255,.4)}
.v-hero .v-btn-ikincil:hover{background:rgba(255,255,255,.1)}
.v-hero-not{margin-top:18px;font-size:13.5px;opacity:.75}

/* hero görseli: sahte mizan kartı */
.v-ekran{background:#fff;border-radius:14px;box-shadow:0 30px 60px rgba(0,0,0,.28);color:var(--v-murekkep);overflow:hidden;font-size:12.5px}
.v-ekran-ust{display:flex;gap:6px;padding:10px 12px;background:#f1f4f7;border-bottom:1px solid var(--v-cizgi)}
.v-ekran-ust i{width:10px;height:10px;border-radius:50%;background:#d6dde4}
.v-ekran-govde{padding:14px 16px}
.v-ekran-baslik{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:10px}
.v-ekran-baslik b{font-size:15px}
.v-ekran-baslik span{color:#15803d;font-weight:600}
.v-ekran table{width:100%;border-collapse:collapse}
.v-ekran td{padding:6px 4px;border-bottom:1px solid #eef1f4;font-variant-numeric:tabular-nums}
.v-ekran td:last-child{text-align:right}
.v-ekran tr.l1 td{font-weight:600}
.v-ekran tr.l2 td:first-child{padding-left:16px;color:var(--v-soluk)}

/* bölümler */
.v-bolum{padding:76px 0}
.v-bolum-gri{background:var(--v-zemin)}
.v-bolum-baslik{text-align:center;max-width:680px;margin:0 auto 44px}
.v-bolum-baslik h2{font-size:31px;margin:0 0 10px;color:var(--v-murekkep);letter-spacing:-.01em}
.v-bolum-baslik p{margin:0;color:var(--v-soluk);font-size:16.5px}

.v-kartlar{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.v-kart{background:#fff;border:1px solid var(--v-cizgi);border-radius:var(--v-yaricap);padding:24px;position:relative;transition:box-shadow .15s,transform .15s}
.v-kart:hover{box-shadow:0 14px 30px rgba(20,32,43,.08);transform:translateY(-2px)}
.v-kart-ikon{width:46px;height:46px;border-radius:11px;background:var(--v-marka-acik);color:var(--v-marka);display:flex;align-items:center;justify-content:center;margin-bottom:16px}
.v-kart h3{margin:0 0 8px;font-size:18px;color:var(--v-murekkep)}
.v-kart p{margin:0;color:var(--v-soluk);font-size:14.5px}
.v-rozet{position:absolute;top:20px;right:20px;font-size:11.5px;font-weight:700;letter-spacing:.03em;padding:4px 9px;border-radius:999px}
.v-rozet-demo{background:#dcfce7;color:#166534}
.v-rozet-yakinda{background:#f1f4f7;color:var(--v-soluk)}

.v-ozellikler{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px;margin-top:40px}
.v-ozellik{display:flex;gap:10px;align-items:flex-start;font-size:14.5px}
.v-ozellik b{display:block;color:var(--v-murekkep)}
.v-ozellik span{color:var(--v-soluk)}
.v-tik{flex:0 0 22px;height:22px;border-radius:50%;background:#dcfce7;color:#15803d;display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:700}

.v-adimlar{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;counter-reset:adim}
.v-adim{text-align:center;padding:10px 14px}
.v-adim::before{counter-increment:adim;content:counter(adim);display:flex;align-items:center;justify-content:center;width:46px;height:46px;margin:0 auto 14px;border-radius:50%;
    background:var(--v-marka);color:#fff;font-weight:700;font-size:18px}
.v-adim h3{margin:0 0 6px;font-size:17px;color:var(--v-murekkep)}
.v-adim p{margin:0;color:var(--v-soluk);font-size:14.5px}

.v-cta{background:var(--v-marka-koyu);color:#fff;border-radius:16px;padding:44px;display:flex;justify-content:space-between;align-items:center;gap:24px;flex-wrap:wrap}
.v-cta h2{margin:0 0 6px;font-size:26px}
.v-cta p{margin:0;opacity:.85}

/* form sayfaları */
.v-sayfa{padding:56px 0 72px;background:var(--v-zemin);min-height:calc(100vh - 64px - 70px)}
.v-form-kap{display:grid;grid-template-columns:1fr 1.1fr;gap:40px;align-items:start}
.v-form-yan h1{font-size:32px;margin:0 0 12px;color:var(--v-murekkep)}
.v-form-yan p{color:var(--v-soluk);font-size:16px}
.v-form-yan ul{padding:0;margin:22px 0 0;list-style:none}
.v-form-yan li{display:flex;gap:10px;margin-bottom:12px}
.v-panel{background:#fff;border:1px solid var(--v-cizgi);border-radius:16px;padding:28px;box-shadow:0 10px 30px rgba(20,32,43,.05)}
.v-alanlar{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.v-alan{display:flex;flex-direction:column;gap:6px}
.v-alan.tam{grid-column:1/-1}
.v-alan label{font-size:13.5px;font-weight:600;color:var(--v-murekkep)}
.v-alan label small{font-weight:400;color:var(--v-soluk)}
.v-alan input,.v-alan textarea{font:inherit;font-size:15px;padding:11px 13px;border:1px solid #cfd8e0;border-radius:9px;background:#fff;color:var(--v-murekkep)}
.v-alan textarea{min-height:96px;resize:vertical}
.v-alan input:focus,.v-alan textarea:focus{outline:none;border-color:var(--v-marka);box-shadow:0 0 0 3px rgba(52,88,110,.15)}
.v-onay{display:flex;gap:10px;align-items:flex-start;font-size:14px;margin:18px 0 22px}
.v-onay input{width:18px;height:18px;margin-top:2px;flex:0 0 18px}
.v-gizli{position:absolute!important;left:-9999px!important;width:1px;height:1px;overflow:hidden}
.v-hata{background:#fef2f2;border:1px solid #fecaca;color:#991b1b;border-radius:10px;padding:12px 16px;margin-bottom:18px}
.v-hata ul{margin:0;padding-left:18px}
.v-basari{background:#f0fdf4;border:1px solid #bbf7d0;color:#166534;border-radius:10px;padding:12px 16px;margin-bottom:18px}
.v-bilgi{max-width:640px;margin:0 auto;text-align:center}
.v-bilgi .v-buyuk-ikon{width:72px;height:72px;margin:0 auto 18px;border-radius:50%;background:#dcfce7;color:#15803d;display:flex;align-items:center;justify-content:center;font-size:34px}
.v-bilgi h1{color:var(--v-murekkep);margin:0 0 10px}
.v-bilgi p{color:var(--v-soluk);font-size:16.5px}
.v-metin{max-width:820px;margin:0 auto}
.v-metin h1{color:var(--v-murekkep)}
.v-metin h2{font-size:19px;color:var(--v-murekkep);margin-top:28px}
.v-dl{display:grid;grid-template-columns:140px 1fr;gap:8px 16px;margin:18px 0}
.v-dl dt{color:var(--v-soluk)}
.v-dl dd{margin:0;font-weight:600;color:var(--v-murekkep)}

.v-alt{border-top:1px solid var(--v-cizgi);background:#fff}
.v-alt-ic{display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap;padding:24px 20px;font-size:13.5px;color:var(--v-soluk)}
.v-alt a{color:var(--v-soluk)}

@media(max-width:960px){
    .v-hero-ic,.v-form-kap{grid-template-columns:1fr}
    .v-hero h1{font-size:34px}
    .v-kartlar{grid-template-columns:1fr 1fr}
    .v-ozellikler{grid-template-columns:1fr 1fr}
    .v-ekran{display:none}
}
@media(max-width:640px){
    .v-ust-nav a:not(.v-btn):not(.v-ust-giris){display:none}
    .v-kartlar,.v-adimlar,.v-ozellikler,.v-alanlar{grid-template-columns:1fr}
    .v-hero-ic{padding:52px 20px 60px}
    .v-bolum{padding:56px 0}
    .v-cta{padding:30px}
    .v-dl{grid-template-columns:1fr}
}