1702 lines
94 KiB
HTML
1702 lines
94 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="tr">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
<title>NovaX Akıllı Saat — Geleceğin Bileğinizde</title>
|
||
<meta name="description" content="NovaX Pro akıllı saati ile sağlığınızı, sporunuzu ve hayatınızı bir adım öteye taşıyın.">
|
||
<link rel="icon" href="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Crect width='100' height='100' rx='20' fill='%232563eb'/%3E%3Ctext x='50' y='68' font-size='55' font-family='Arial' font-weight='bold' fill='white' text-anchor='middle'%3EN%3C/text%3E%3C/svg%3E">
|
||
<style>
|
||
/* ============================================================
|
||
NOVAX AKILLI SAAT — ÜRÜN SAYFASI
|
||
Bölüm 1: Temel Değişkenler, Reset & Genel Stiller
|
||
============================================================ */
|
||
:root{
|
||
--renk-birincil:#2563eb;
|
||
--renk-birincil-koyu:#1d4ed8;
|
||
--renk-koyu:#0f172a;
|
||
--renk-koyu-2:#1e293b;
|
||
--renk-acik:#f8fafc;
|
||
--renk-gri:#64748b;
|
||
--renk-basari:#16a34a;
|
||
--renk-uyari:#f59e0b;
|
||
--renk-tehlike:#dc2626;
|
||
--yazitip-baslik:'Segoe UI', system-ui, sans-serif;
|
||
--yazitip-metin:'Inter', system-ui, sans-serif;
|
||
--golge-yumusak:0 10px 30px rgba(0,0,0,.08);
|
||
--golge-orta:0 18px 45px rgba(0,0,0,.12);
|
||
--kenar-yari-capli-kucuk:10px;
|
||
--kenar-yari-capli-orta:18px;
|
||
--kenar-yari-capli-buyuk:30px;
|
||
--gecis-hizi:.3s;
|
||
--max-genislik:1200px;
|
||
}
|
||
*{margin:0;padding:0;box-sizing:border-box}
|
||
html{scroll-behavior:smooth}
|
||
body{
|
||
font-family:var(--yazitip-metin);
|
||
background:linear-gradient(180deg,#f8fafc 0,#fff 60%,#f1f5f9 100%);
|
||
color:var(--renk-koyu);
|
||
line-height:1.6;
|
||
overflow-x:hidden;
|
||
}
|
||
a{text-decoration:none;color:inherit}
|
||
ul{list-style:none}
|
||
img{max-width:100%;display:block}
|
||
button{font-family:inherit;cursor:pointer;border:none;background:none}
|
||
.kapsayici{max-width:var(--max-genislik);margin:0 auto;padding:0 24px}
|
||
.baslik-kabugu{text-align:center;margin-bottom:48px}
|
||
.baslik-kabugu .rozet{
|
||
display:inline-block;background:rgba(37,99,235,.1);
|
||
color:var(--renk-birincil);padding:6px 16px;border-radius:50px;
|
||
font-weight:600;font-size:14px;letter-spacing:.5px;
|
||
margin-bottom:16px;text-transform:uppercase;
|
||
}
|
||
.baslik-kabugu h2{
|
||
font-family:var(--yazitip-baslik);
|
||
font-size:clamp(1.75rem,4vw,2.8rem);
|
||
font-weight:800;line-height:1.15;margin-bottom:12px;
|
||
}
|
||
.baslik-kabugu p{
|
||
color:var(--renk-gri);max-width:600px;margin:0 auto;font-size:1.05rem;
|
||
}
|
||
.buton{
|
||
display:inline-block;padding:14px 32px;border-radius:50px;
|
||
font-weight:600;font-size:1rem;transition:all var(--gecis-hizi);
|
||
text-align:center;
|
||
}
|
||
.buton-birincil{background:var(--renk-birincil);color:#fff}
|
||
.buton-birincil:hover{background:var(--renk-birincil-koyu);transform:translateY(-2px);box-shadow:var(--golge-orta)}
|
||
.buton-outline{background:transparent;color:var(--renk-birincil);border:2px solid var(--renk-birincil)}
|
||
.buton-outline:hover{background:var(--renk-birincil);color:#fff}
|
||
.buton-acik{background:#fff;color:var(--renk-koyu);box-shadow:var(--golge-yumusak)}
|
||
.buton-acik:hover{transform:translateY(-2px);box-shadow:var(--golge-orta)}
|
||
|
||
/* ============================================================
|
||
Bölüm 2: Üst Bar & Navigasyon
|
||
============================================================ */
|
||
.ust-bar{
|
||
background:var(--renk-koyu);color:#cbd5e1;
|
||
padding:8px 0;font-size:13px;
|
||
}
|
||
.ust-bar-icerik{
|
||
max-width:var(--max-genislik);margin:0 auto;padding:0 24px;
|
||
display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;
|
||
}
|
||
.ust-bar-bilgi{display:flex;gap:20px;align-items:center;flex-wrap:wrap}
|
||
.ust-bar-bilgi span{display:flex;gap:6px;align-items:center}
|
||
.ust-bar-bilgi svg{width:15px;height:15px;fill:var(--renk-birincil)}
|
||
.ust-bar-sosyal{display:flex;gap:12px}
|
||
.ust-bar-sosyal a{transition:color var(--gecis-hizi);display:flex}
|
||
.ust-bar-sosyal a:hover{color:#fff}
|
||
.ust-bar-sosyal svg{width:18px;height:18px;fill:#94a3b8}
|
||
.ust-bar-sosyal a:hover svg{fill:#fff}
|
||
|
||
.navbar{
|
||
position:sticky;top:0;z-index:1000;
|
||
background:rgba(255,255,255,.92);
|
||
backdrop-filter:blur(12px);
|
||
border-bottom:1px solid rgba(0,0,0,.06);
|
||
transition:box-shadow var(--gecis-hizi);
|
||
}
|
||
.navbar.golgelendi{box-shadow:0 6px 25px rgba(0,0,0,.08)}
|
||
.nav-icerik{
|
||
max-width:var(--max-genislik);margin:0 auto;padding:14px 24px;
|
||
display:flex;justify-content:space-between;align-items:center;gap:20px;
|
||
}
|
||
.logo{display:flex;align-items:center;gap:10px;font-weight:800;font-size:1.35rem;font-family:var(--yazitip-baslik)}
|
||
.logo-ikon{
|
||
width:38px;height:38px;border-radius:12px;background:linear-gradient(135deg,var(--renk-birincil),#7c3aed);
|
||
display:flex;align-items:center;justify-content:center;color:#fff;font-weight:900;font-size:1.1rem;
|
||
}
|
||
.nav-linkler{display:flex;gap:28px;align-items:center;font-weight:500;font-size:.95rem}
|
||
.nav-linkler a{position:relative;transition:color var(--gecis-hizi)}
|
||
.nav-linkler a::after{
|
||
content:'';position:absolute;left:0;bottom:-5px;width:0;height:2px;
|
||
background:var(--renk-birincil);transition:width var(--gecis-hizi);border-radius:2px;
|
||
}
|
||
.nav-linkler a:hover{color:var(--renk-birincil)}
|
||
.nav-linkler a:hover::after{width:100%}
|
||
.nav-aksesuar{display:flex;align-items:center;gap:14px}
|
||
.tema-dugmesi{
|
||
width:42px;height:42px;border-radius:12px;background:#f1f5f9;
|
||
display:flex;align-items:center;justify-content:center;transition:all var(--gecis-hizi);
|
||
}
|
||
.tema-dugmesi:hover{background:#e2e8f0;transform:rotate(20deg)}
|
||
.tema-dugmesi svg{width:20px;height:20px;fill:var(--renk-koyu)}
|
||
.nav-sepet{
|
||
position:relative;display:flex;align-items:center;justify-content:center;
|
||
width:42px;height:42px;border-radius:12px;background:#f1f5f9;transition:all var(--gecis-hizi);
|
||
}
|
||
.nav-sepet:hover{background:#e2e8f0}
|
||
.nav-sepet svg{width:20px;height:20px;fill:var(--renk-koyu)}
|
||
.sepet-sayac{
|
||
position:absolute;top:-6px;right:-6px;background:var(--renk-tehlike);color:#fff;
|
||
font-size:11px;font-weight:700;width:20px;height:20px;border-radius:50%;
|
||
display:flex;align-items:center;justify-content:center;
|
||
}
|
||
.mobil-menu-dugme{display:none;width:42px;height:42px;border-radius:12px;background:#f1f5f9;align-items:center;justify-content:center}
|
||
.mobil-menu-dugme svg{width:22px;height:22px;fill:var(--renk-koyu)}
|
||
|
||
/* ============================================================
|
||
Bölüm 3: Hero (Manşet) Alanı
|
||
============================================================ */
|
||
.hero{position:relative;overflow:hidden;padding:72px 0 90px;background:linear-gradient(180deg,#eef2ff 0,#f8fafc 100%)}
|
||
.hero::before{
|
||
content:'';position:absolute;top:-120px;right:-120px;width:420px;height:420px;border-radius:50%;
|
||
background:radial-gradient(circle,rgba(37,99,235,.18),transparent 65%);
|
||
}
|
||
.hero::after{
|
||
content:'';position:absolute;bottom:-80px;left:-80px;width:320px;height:320px;border-radius:50%;
|
||
background:radial-gradient(circle,rgba(124,58,237,.14),transparent 65%);
|
||
}
|
||
.hero-icerik{position:relative;z-index:2;display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center}
|
||
.hero-sol{max-width:560px}
|
||
.hero-etiket{
|
||
display:inline-flex;align-items:center;gap:8px;background:#fff;border:1px solid #e2e8f0;
|
||
padding:8px 18px;border-radius:50px;font-size:13px;font-weight:600;color:var(--renk-koyu-2);
|
||
box-shadow:var(--golge-yumusak);margin-bottom:22px;
|
||
}
|
||
.hero-etiket-dot{width:9px;height:9px;border-radius:50%;background:var(--renk-basari);box-shadow:0 0 0 4px rgba(22,163,74,.15);animation:ping 2s infinite}
|
||
@keyframes ping{0%,100%{transform:scale(1);opacity:1}50%{transform:scale(1.4);opacity:.6}}
|
||
.hero h1{
|
||
font-family:var(--yazitip-baslik);
|
||
font-size:clamp(2.3rem,5.5vw,3.9rem);
|
||
font-weight:900;line-height:1.08;margin-bottom:20px;
|
||
}
|
||
.hero h1 .vurgu{background:linear-gradient(120deg,var(--renk-birincil),#7c3aed);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
|
||
.hero-aciklama{font-size:1.13rem;color:var(--renk-gri);margin-bottom:32px;max-width:470px}
|
||
.hero-dugme-grubu{display:flex;gap:16px;align-items:center;flex-wrap:wrap;margin-bottom:36px}
|
||
.hero-kucuk-not{font-size:.85rem;color:var(--renk-gri);display:flex;align-items:center;gap:8px;margin-top:14px}
|
||
.hero-kucuk-not svg{width:16px;height:16px;fill:var(--renk-basari)}
|
||
.hero-istatistikler{
|
||
display:flex;gap:36px;padding-top:26px;border-top:1px solid #e2e8f0;
|
||
}
|
||
.hero-istatistikler .istatistik-deger{font-family:var(--yazitip-baslik);font-size:1.9rem;font-weight:900;color:var(--renk-koyu)}
|
||
.hero-istatistikler .istatistik-etiket{font-size:.85rem;color:var(--renk-gri)}
|
||
.hero-sag{position:relative;display:flex;justify-content:center}
|
||
.hero-urun-cerceve{
|
||
position:relative;width:340px;height:420px;background:linear-gradient(160deg,#1e293b,#0f172a);
|
||
border-radius:60px;box-shadow:0 40px 80px rgba(15,23,42,.35);
|
||
display:flex;align-items:flex-end;padding:26px;overflow:hidden;
|
||
border:3px solid rgba(148,163,184,.2);
|
||
}
|
||
.hero-urun-cerceve::before{
|
||
content:'';position:absolute;top:10px;height:8px;width:120px;background:rgba(15,23,42,.6);border-radius:20px;left:50%;transform:translateX(-50%);
|
||
}
|
||
.hero-urun-ekran{
|
||
position:relative;width:100%;height:86%;background:linear-gradient(180deg,#2563eb,#7c3aed);
|
||
border-radius:44px;display:flex;flex-direction:column;align-items:center;justify-content:center;
|
||
color:#fff;font-family:var(--yazitip-baslik);
|
||
}
|
||
.hero-urun-saat{font-size:3rem;font-weight:800;letter-spacing:2px}
|
||
.hero-urun-tarih{font-size:.85rem;opacity:.85;margin-top:6px}
|
||
.hero-urun-nabiz{background:rgba(255,255,255,.18);padding:10px 20px;border-radius:30px;margin-top:18px;font-size:.9rem}
|
||
.hero-dolgu{
|
||
position:absolute;background:rgba(255,255,255,.14);border-radius:50%;
|
||
backdrop-filter:blur(4px);
|
||
}
|
||
.hero-dolgu.d1{width:50px;height:50px;top:30px;right:30px;animation:yuzen 5s ease-in-out infinite}
|
||
.hero-dolgu.d2{width:28px;height:28px;bottom:80px;left:24px;animation:yuzen 4s ease-in-out infinite .5s}
|
||
.hero-dolgu.d3{width:70px;height:70px;top:-20px;left:-20px;opacity:.5;animation:yuzen 6s ease-in-out infinite 1s}
|
||
@keyframes yuzen{0%,100%{transform:translateY(0)}50%{transform:translateY(-14px)}}
|
||
.hero-kaydirma{
|
||
position:absolute;bottom:6px;left:50%;transform:translateX(-50%);
|
||
display:flex;flex-direction:column;align-items:center;gap:6px;color:var(--renk-gri);font-size:.75rem;
|
||
}
|
||
.hero-kaydirma svg{width:20px;height:20px;fill:var(--renk-gri);animation:kaydirmaOku 2s ease-in-out infinite}
|
||
@keyframes kaydirmaOku{0%,100%{transform:translateY(0)}50%{transform:translateY(6px)}}
|
||
|
||
/* ============================================================
|
||
Bölüm 4: Marka Logoları Bandı
|
||
============================================================ */
|
||
.marka-bandi{padding:36px 0;background:#fff;border-top:1px solid #eef2f7;border-bottom:1px solid #eef2f7}
|
||
.marka-bandi p{text-align:center;color:var(--renk-gri);font-size:.8rem;letter-spacing:1.5px;text-transform:uppercase;margin-bottom:22px}
|
||
.marka-logolar{display:flex;justify-content:space-around;align-items:center;flex-wrap:wrap;gap:26px}
|
||
.marka-logo{font-family:var(--yazitip-baslik);font-weight:800;font-size:1.25rem;color:#94a3b8;display:flex;align-items:center;gap:8px;transition:color var(--gecis-hizi)}
|
||
.marka-logo svg{width:26px;height:26px;fill:#94a3b8;transition:fill var(--gecis-hizi)}
|
||
.marka-logo:hover{color:var(--renk-koyu-2)}
|
||
.marka-logo:hover svg{fill:var(--renk-koyu-2)}
|
||
|
||
/* ============================================================
|
||
Bölüm 5: Ürün Özellikleri (Grid Kartlar)
|
||
============================================================ */
|
||
.ozellikler{padding:90px 0;background:#fff}
|
||
.ozellik-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:28px}
|
||
.ozellik-kart{
|
||
background:var(--renk-acik);border:1px solid #eef2f7;border-radius:var(--kenar-yari-capli-orta);
|
||
padding:34px 28px;transition:all var(--gecis-hizi);position:relative;overflow:hidden;
|
||
}
|
||
.ozellik-kart::before{
|
||
content:'';position:absolute;top:0;left:0;width:100%;height:4px;
|
||
background:linear-gradient(90deg,var(--renk-birincil),#7c3aed);
|
||
transform:scaleX(0);transform-origin:left;transition:transform .4s ease;
|
||
}
|
||
.ozellik-kart:hover{transform:translateY(-8px);box-shadow:var(--golge-orta)}
|
||
.ozellik-kart:hover::before{transform:scaleX(1)}
|
||
.ozellik-ikon{
|
||
width:60px;height:60px;border-radius:16px;background:rgba(37,99,235,.1);
|
||
display:flex;align-items:center;justify-content:center;margin-bottom:22px;
|
||
}
|
||
.ozellik-ikon svg{width:30px;height:30px;fill:var(--renk-birincil)}
|
||
.ozellik-kart-renk-2 .ozellik-ikon{background:rgba(124,58,237,.1)}
|
||
.ozellik-kart-renk-2 .ozellik-ikon svg{fill:#7c3aed}
|
||
.ozellik-kart-renk-3 .ozellik-ikon{background:rgba(22,163,74,.1)}
|
||
.ozellik-kart-renk-3 .ozellik-ikon svg{fill:var(--renk-basari)}
|
||
.ozellik-kart-renk-4 .ozellik-ikon{background:rgba(245,158,11,.12)}
|
||
.ozellik-kart-renk-4 .ozellik-ikon svg{fill:var(--renk-uyari)}
|
||
.ozellik-kart-renk-5 .ozellik-ikon{background:rgba(220,38,38,.1)}
|
||
.ozellik-kart-renk-5 .ozellik-ikon svg{fill:var(--renk-tehlike)}
|
||
.ozellik-kart-renk-6 .ozellik-ikon{background:rgba(14,165,233,.1)}
|
||
.ozellik-kart-renk-6 .ozellik-ikon svg{fill:#0ea5e9}
|
||
.ozellik-kart h3{font-family:var(--yazitip-baslik);font-size:1.2rem;font-weight:700;margin-bottom:10px}
|
||
.ozellik-kart p{color:var(--renk-gri);font-size:.94rem}
|
||
|
||
/* ============================================================
|
||
Bölüm 6: Yan Bölüm — Ürün Tanıtım (Resim + Metin)
|
||
============================================================ */
|
||
.tanitim{padding:90px 0;background:linear-gradient(180deg,#f8fafc,#fff)}
|
||
.tanitim-grid{display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:center}
|
||
.tanitim-gorsel{position:relative}
|
||
.tanitim-gorsel-resim{
|
||
border-radius:var(--kenar-yari-capli-buyuk);overflow:hidden;box-shadow:var(--golge-orta);
|
||
background:linear-gradient(135deg,#312e81,#6d28d9);height:440px;position:relative;
|
||
}
|
||
.tanitim-gorsel-resim::after{
|
||
content:'';position:absolute;inset:0;background:
|
||
radial-gradient(circle at 70% 20%,rgba(255,255,255,.15),transparent 45%);
|
||
}
|
||
.tanitim-acilir{
|
||
position:absolute;bottom:-26px;right:-16px;background:#fff;border-radius:var(--kenar-yari-capli-orta);
|
||
box-shadow:var(--golge-orta);padding:18px 24px;display:flex;align-items:center;gap:14px;
|
||
}
|
||
.tanitim-acilir-ikon{width:46px;height:46px;border-radius:12px;background:rgba(22,163,74,.12);display:flex;align-items:center;justify-content:center}
|
||
.tanitim-acilir-ikon svg{width:24px;height:24px;fill:var(--renk-basari)}
|
||
.tanitim-acilir-deger{font-weight:800;font-family:var(--yazitip-baslik);font-size:1.1rem}
|
||
.tanitim-acilir-etiket{font-size:.8rem;color:var(--renk-gri)}
|
||
.tanitim-metin h2{
|
||
font-family:var(--yazitip-baslik);font-size:clamp(1.6rem,3.5vw,2.4rem);
|
||
font-weight:800;line-height:1.2;margin-bottom:18px;
|
||
}
|
||
.tanitim-metin p{color:var(--renk-gri);margin-bottom:26px;font-size:1.02rem}
|
||
.ticaret-ozellikler{display:flex;flex-direction:column;gap:18px;margin-bottom:34px}
|
||
.ticaret-madde{display:flex;gap:14px;align-items:flex-start}
|
||
.ticaret-madde-ikon{width:34px;height:34px;flex-shrink:0;border-radius:10px;background:rgba(37,99,235,.1);display:flex;align-items:center;justify-content:center}
|
||
.ticaret-madde-ikon svg{width:18px;height:18px;fill:var(--renk-birincil)}
|
||
.ticaret-madde strong{font-weight:600;color:var(--renk-koyu)}
|
||
.ticaret-madde span{display:block;font-size:.88rem;color:var(--renk-gri)}
|
||
|
||
/* ============================================================
|
||
Bölüm 7: Teknik Özellikler Tablosu
|
||
============================================================ */
|
||
.teknik{padding:90px 0;background:var(--renk-koyu);color:#e2e8f0}
|
||
.teknik .baslik-kabugu h2{color:#fff}
|
||
.teknik .baslik-kabugu p{color:#94a3b8}
|
||
.teknik-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:24px}
|
||
.teknik-bar{
|
||
background:var(--renk-koyu-2);border:1px solid rgba(148,163,184,.12);
|
||
border-radius:var(--kenar-yari-capli-orta);padding:26px;
|
||
}
|
||
.teknik-bar-baslik{display:flex;align-items:center;gap:12px;color:#fff;font-weight:700;font-family:var(--yazitip-baslik);margin-bottom:18px;font-size:1.05rem}
|
||
.teknik-bar-baslik svg{width:22px;height:22px;fill:var(--renk-birincil)}
|
||
.teknik-satir{
|
||
display:flex;justify-content:space-between;align-items:center;
|
||
padding:11px 0;border-bottom:1px solid rgba(148,163,184,.1);font-size:.92rem;
|
||
}
|
||
.teknik-satir:last-child{border-bottom:none}
|
||
.teknik-ad{color:#94a3b8}
|
||
.teknik-deger{color:#fff;font-weight:600;text-align:right}
|
||
.nisan-kartlari{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:46px}
|
||
.nisan-kart{background:rgba(255,255,255,.04);border:1px solid rgba(148,163,184,.12);border-radius:var(--kenar-yari-capli-orta);padding:26px;text-align:center;transition:all var(--gecis-hizi)}
|
||
.nisan-kart:hover{background:rgba(255,255,255,.08);transform:translateY(-4px)}
|
||
.nisan-kart svg{width:38px;height:38px;fill:var(--renk-uyari);margin:0 auto 14px}
|
||
.nisan-kart h4{color:#fff;font-family:var(--yazitip-baslik);font-size:1.05rem;margin-bottom:6px}
|
||
.nisan-kart p{color:#94a3b8;font-size:.85rem}
|
||
|
||
/* ============================================================
|
||
Bölüm 8: Fiyatlandırma Kartları
|
||
============================================================ */
|
||
.fiyatlandirma{padding:90px 0;background:#fff}
|
||
.fiyat-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:30px;align-items:stretch}
|
||
.fiyat-kart{
|
||
background:var(--renk-acik);border:2px solid #eef2f7;border-radius:var(--kenar-yari-capli-buyuk);
|
||
padding:38px 30px;display:flex;flex-direction:column;position:relative;transition:all var(--gecis-hizi);
|
||
}
|
||
.fiyat-kart-ozel{border-color:var(--renk-birincil);background:#fff;box-shadow:var(--golge-orta)}
|
||
.fiyat-kart-ozel-rozet{
|
||
position:absolute;top:-14px;left:50%;transform:translateX(-50%);
|
||
background:var(--renk-birincil);color:#fff;padding:6px 18px;border-radius:50px;
|
||
font-size:.78rem;font-weight:700;letter-spacing:.5px;text-transform:uppercase;white-space:nowrap;
|
||
}
|
||
.fiyat-kart:hover{transform:translateY(-8px);box-shadow:var(--golge-orta)}
|
||
.fiyat-kart h3{font-family:var(--yazitip-baslik);font-size:1.25rem;margin-bottom:8px}
|
||
.fiyat-aciklama{color:var(--renk-gri);font-size:.9rem;margin-bottom:22px}
|
||
.fiyat-deger{display:flex;align-items:flex-end;gap:6px;margin-bottom:26px}
|
||
.fiyat-deger .para{font-size:1.3rem;font-weight:700;color:var(--renk-koyu-2);margin-bottom:8px}
|
||
.fiyat-deger .rakam{font-family:var(--yazitip-baslik);font-size:3.2rem;font-weight:900;line-height:1;color:var(--renk-koyu)}
|
||
.fiyat-deger .donem{color:var(--renk-gri);font-size:.9rem;margin-bottom:10px}
|
||
.fiyat-ozellik-list{display:flex;flex-direction:column;gap:14px;margin-bottom:30px;flex-grow:1}
|
||
.fiyat-ozellik-item{display:flex;gap:12px;align-items:flex-start;font-size:.93rem}
|
||
.fiyat-ozellik-item.kapali{color:#94a3b8}
|
||
.fiyat-ozellik-item-ikon{flex-shrink:0;width:22px;height:22px;border-radius:50%;background:rgba(22,163,74,.12);display:flex;align-items:center;justify-content:center;margin-top:2px}
|
||
.fiyat-ozellik-item-ikon svg{width:13px;height:13px;fill:var(--renk-basari)}
|
||
.fiyat-ozellik-item.kapali .fiyat-ozellik-item-ikon{background:rgba(148,163,184,.15)}
|
||
.fiyat-ozellik-item.kapali .fiyat-ozellik-item-ikon svg{fill:#94a3b8}
|
||
.fiyat-not{text-align:center;color:var(--renk-gri);font-size:.85rem;margin-top:32px}
|
||
|
||
/* ============================================================
|
||
Bölüm 9: Galeri / Ürün Görselleri
|
||
============================================================ */
|
||
.galeri{padding:90px 0;background:#f8fafc}
|
||
.galeri-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
|
||
.galeri-kutu{border-radius:var(--kenar-yari-capli-orta);overflow:hidden;position:relative;height:240px;cursor:pointer;transition:all var(--gecis-hizi)}
|
||
.galeri-kutu:hover{transform:scale(1.02);box-shadow:var(--golge-orta)}
|
||
.galeri-kutu-renk{width:100%;height:100%;display:flex;align-items:center;justify-content:center;color:#fff;font-family:var(--yazitip-baslik);font-weight:700;font-size:1.15rem;position:relative}
|
||
.galeri-cap{position:absolute;top:16px;left:16px;background:rgba(0,0,0,.4);color:#fff;font-size:.72rem;padding:4px 12px;border-radius:30px;backdrop-filter:blur(4px)}
|
||
.galeri-kutu-etiket{position:absolute;bottom:0;left:0;right:0;background:linear-gradient(transparent,rgba(0,0,0,.6));color:#fff;padding:30px 20px 18px;font-family:var(--yazitip-baslik);font-weight:600}
|
||
|
||
/* ============================================================
|
||
Bölüm 10: Kullanıcı Yorumları
|
||
============================================================ */
|
||
.yorumlar{padding:90px 0;background:#fff}
|
||
.yorum-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:26px}
|
||
.yorum-kart{background:var(--renk-acik);border-radius:var(--kenar-yari-capli-orta);padding:30px;border:1px solid #eef2f7;transition:all var(--gecis-hizi)}
|
||
.yorum-kart:hover{transform:translateY(-6px);box-shadow:var(--golge-yumusak)}
|
||
.yorum-yildizlar{display:flex;gap:3px;margin-bottom:16px;color:var(--renk-uyari)}
|
||
.yorum-yildizlar svg{width:18px;height:18px;fill:var(--renk-uyari)}
|
||
.yorum-metin{font-size:.95rem;color:var(--renk-koyu-2);margin-bottom:22px;font-style:italic;line-height:1.7}
|
||
.yorum-kisi{display:flex;align-items:center;gap:14px}
|
||
.yorum-avatar{
|
||
width:48px;height:48px;border-radius:50%;background:linear-gradient(135deg,var(--renk-birincil),#7c3aed);
|
||
display:flex;align-items:center;justify-content:center;color:#fff;font-weight:700;font-size:1.1rem;flex-shrink:0;
|
||
}
|
||
.yorum-ad{font-weight:700;font-size:.95rem}
|
||
.yorum-unvan{font-size:.8rem;color:var(--renk-gri)}
|
||
|
||
/* ============================================================
|
||
Bölüm 11: Sık Sorulan Sorular
|
||
============================================================ */
|
||
.sss{padding:90px 0;background:#f8fafc}
|
||
.sss-liste{max-width:820px;margin:0 auto;display:flex;flex-direction:column;gap:16px}
|
||
.sss-madde{background:#fff;border:1px solid #eef2f7;border-radius:var(--kenar-yari-capli-orta);overflow:hidden;transition:box-shadow var(--gecis-hizi)}
|
||
.sss-madde.acik{box-shadow:var(--golge-yumusak);border-color:rgba(37,99,235,.3)}
|
||
.sss-soru{
|
||
display:flex;justify-content:space-between;align-items:center;gap:16px;
|
||
padding:22px 26px;cursor:pointer;font-weight:700;font-family:var(--yazitip-baslik);font-size:1.02rem;color:var(--renk-koyu);
|
||
}
|
||
.sss-cevap-icon{width:34px;height:34px;flex-shrink:0;border-radius:12px;background:rgba(37,99,235,.1);display:flex;align-items:center;justify-content:center;transition:transform .3s ease}
|
||
.sss-madde.acik .sss-cevap-icon{transform:rotate(45deg)}
|
||
.sss-cevap-icon svg{width:16px;height:16px;fill:var(--renk-birincil)}
|
||
.sss-cevap{
|
||
max-height:0;overflow:hidden;transition:max-height .4s ease;
|
||
}
|
||
.sss-cevap-ic{color:var(--renk-gri);font-size:.95rem;padding:0 26px 24px;line-height:1.7}
|
||
.sss-madde.acik .sss-cevap{max-height:300px}
|
||
|
||
/* ============================================================
|
||
Bölüm 12: Harekete Geçirme (CTA) Bandı
|
||
============================================================ */
|
||
.cta{padding:100px 0;background:linear-gradient(135deg,var(--renk-birincil-koyu),#7c3aed);color:#fff;position:relative;overflow:hidden}
|
||
.cta::before{
|
||
content:'';position:absolute;top:-60px;right:-60px;width:360px;height:360px;border-radius:50%;
|
||
background:rgba(255,255,255,.08);
|
||
}
|
||
.cta::after{
|
||
content:'';position:absolute;bottom:-80px;left:40%;width:300px;height:300px;border-radius:50%;
|
||
background:rgba(255,255,255,.05);
|
||
}
|
||
.cta-icerik{position:relative;z-index:2;text-align:center;max-width:640px;margin:0 auto}
|
||
.cta h2{font-family:var(--yazitip-baslik);font-size:clamp(1.8rem,4vw,2.7rem);font-weight:800;margin-bottom:18px}
|
||
.cta p{font-size:1.05rem;opacity:.92;margin-bottom:36px}
|
||
.cta-dugme-grubu{display:flex;gap:16px;justify-content:center;flex-wrap:wrap}
|
||
.cta-garanti{font-size:.85rem;opacity:.8;margin-top:20px;display:flex;align-items:center;justify-content:center;gap:8px}
|
||
.cta-garanti svg{width:16px;height:16px;fill:#fff}
|
||
|
||
/* ============================================================
|
||
Bölüm 13: İletişim Bölümü
|
||
============================================================ */
|
||
.iletisim{padding:90px 0;background:#fff}
|
||
.iletisim-grid{display:grid;grid-template-columns:1fr 1fr;gap:50px;align-items:flex-start}
|
||
.iletisim-bilgi h2{font-family:var(--yazitip-baslik);font-size:clamp(1.6rem,3.5vw,2.3rem);font-weight:800;margin-bottom:16px}
|
||
.iletisim-bilgi>p{color:var(--renk-gri);margin-bottom:34px}
|
||
.iletisim-kart-grup{display:flex;flex-direction:column;gap:18px;margin-bottom:34px}
|
||
.iletisim-kart{display:flex;gap:16px;align-items:center;background:var(--renk-acik);border-radius:var(--kenar-yari-capli-orta);padding:20px;border:1px solid #eef2f7}
|
||
.iletisim-kart-ikon{width:50px;height:50px;flex-shrink:0;border-radius:14px;background:rgba(37,99,235,.1);display:flex;align-items:center;justify-content:center}
|
||
.iletisim-kart-ikon svg{width:24px;height:24px;fill:var(--renk-birincil)}
|
||
.iletisim-kart strong{display:block;font-weight:700;margin-bottom:3px}
|
||
.iletisim-kart span{color:var(--renk-gri);font-size:.88rem}
|
||
.iletisim-sosyal{display:flex;gap:12px}
|
||
.iletisim-sosyal a{width:46px;height:46px;border-radius:14px;background:#f1f5f9;display:flex;align-items:center;justify-content:center;transition:all var(--gecis-hizi)}
|
||
.iletisim-sosyal a:hover{background:var(--renk-birincil);transform:translateY(-3px)}
|
||
.iletisim-sosyal svg{width:22px;height:22px;fill:var(--renk-koyu-2)}
|
||
.iletisim-sosyal a:hover svg{fill:#fff}
|
||
.iletisim-form{background:var(--renk-acik);border:1px solid #eef2f7;border-radius:var(--kenar-yari-capli-buyuk);padding:36px;box-shadow:var(--golge-yumusak)}
|
||
.form-grup{margin-bottom:20px}
|
||
.form-etiket{display:block;font-weight:600;font-size:.9rem;margin-bottom:8px;color:var(--renk-koyu)}
|
||
.form-alan{
|
||
width:100%;padding:14px 18px;border:2px solid #e2e8f0;border-radius:14px;font-family:inherit;
|
||
font-size:1rem;transition:all var(--gecis-hizi);background:#fff;
|
||
}
|
||
.form-alan:focus{outline:none;border-color:var(--renk-birincil);box-shadow:0 0 0 4px rgba(37,99,235,.1)}
|
||
textarea.form-alan{resize:vertical;min-height:130px}
|
||
.form-ikili{display:grid;grid-template-columns:1fr 1fr;gap:18px}
|
||
.form-gonder{width:100%;padding:16px;border-radius:14px;background:var(--renk-birincil);color:#fff;font-size:1.05rem;font-weight:700;transition:all var(--gecis-hizi)}
|
||
.form-gonder:hover{background:var(--renk-birincil-koyu)}
|
||
.form-basari{
|
||
display:none;margin-top:18px;padding:14px;border-radius:12px;background:rgba(22,163,74,.1);
|
||
color:var(--renk-basari);font-weight:600;font-size:.92rem;text-align:center;
|
||
}
|
||
.form-basari.goster{display:block}
|
||
|
||
/* ============================================================
|
||
Bölüm 14: Footer
|
||
============================================================ */
|
||
.footer{background:var(--renk-koyu);color:#94a3b8;padding:70px 0 0}
|
||
.footer-grid{display:grid;grid-template-columns:2fr 1fr 1fr 1fr 1fr;gap:40px;padding-bottom:50px}
|
||
.footer-kolon h4{color:#fff;font-family:var(--yazitip-baslik);font-size:1rem;margin-bottom:20px;font-weight:700}
|
||
.footer-kolon ul{display:flex;flex-direction:column;gap:12px;font-size:.9rem}
|
||
.footer-kolon ul a{transition:color var(--gecis-hizi)}
|
||
.footer-kolon ul a:hover{color:#fff}
|
||
.footer-brand .logo{color:#fff;margin-bottom:16px}
|
||
.footer-brand>p{font-size:.9rem;margin-bottom:22px;line-height:1.7}
|
||
.footer-alt{
|
||
border-top:1px solid rgba(148,163,184,.15);padding:22px 0;
|
||
display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;font-size:.85rem;
|
||
}
|
||
.footer-yasal{display:flex;gap:20px}
|
||
.footer-yasal a:hover{color:#fff}
|
||
.float-sapka{
|
||
position:fixed;bottom:26px;right:26px;width:56px;height:56px;border-radius:50%;
|
||
background:var(--renk-birincil);color:#fff;display:flex;align-items:center;justify-content:center;
|
||
box-shadow:var(--golge-orta);z-index:999;transition:all var(--gecis-hizi);
|
||
}
|
||
.float-sapka:hover{transform:scale(1.1);background:var(--renk-birincil-koyu)}
|
||
.float-sapka svg{width:26px;height:26px;fill:#fff}
|
||
|
||
/* ============================================================
|
||
Bölüm 15: Modal (Sepet) & Çerez
|
||
============================================================ */
|
||
.modal-arkaplan{display:none;position:fixed;inset:0;background:rgba(15,23,42,.55);backdrop-filter:blur(4px);z-index:2000;align-items:center;justify-content:center}
|
||
.modal-arkaplan.acik{display:flex;animation:modalGir .3s ease}
|
||
@keyframes modalGir{from{opacity:0}to{opacity:1}}
|
||
.modal-kutu{
|
||
background:#fff;border-radius:var(--kenar-yari-capli-buyuk);max-width:520px;width:92%;
|
||
padding:36px;box-shadow:var(--golge-orta);position:relative;max-height:85vh;overflow-y:auto;animation:modalKutuGir .35s ease;
|
||
}
|
||
@keyframes modalKutuGir{from{transform:translateY(30px);opacity:0}to{transform:translateY(0);opacity:1}}
|
||
.modal-kapat{position:absolute;top:18px;right:18px;width:38px;height:38px;border-radius:12px;background:#f1f5f9;display:flex;align-items:center;justify-content:center;transition:all var(--gecis-hizi)}
|
||
.modal-kapat:hover{background:#e2e8f0;transform:rotate(90deg)}
|
||
.modal-kapat svg{width:18px;height:18px;fill:var(--renk-koyu-2)}
|
||
.modal-baslik{font-family:var(--yazitip-baslik);font-size:1.5rem;font-weight:800;margin-bottom:22px}
|
||
.sepet-bos{text-align:center;color:var(--renk-gri);padding:30px 0}
|
||
.sepet-girdi{display:flex;justify-content:space-between;align-items:center;padding:16px 0;border-bottom:1px solid #eef2f7}
|
||
.sepet-girdi-ad{font-weight:600}
|
||
.sepet-girdi-fiyat{color:var(--renk-birincil);font-weight:700}
|
||
.sepet-toplam{display:flex;justify-content:space-between;padding:18px 0;font-weight:800;font-family:var(--yazitip-baslik);font-size:1.15rem}
|
||
.cerez-bildirimi{
|
||
position:fixed;bottom:26px;left:26px;background:#fff;border-radius:var(--kenar-yari-capli-orta);
|
||
box-shadow:var(--golge-orta);padding:22px;max-width:360px;z-index:1500;display:none;
|
||
border:1px solid #eef2f7;
|
||
}
|
||
.cerez-bildirimi.goster{display:block;animation:modalKutuGir .4s ease}
|
||
.cerez-bildirimi p{font-size:.88rem;color:var(--renk-gri);margin-bottom:16px}
|
||
.cerez-dugme-grup{display:flex;gap:10px}
|
||
.cerez-dugme{flex:1;padding:10px;border-radius:10px;font-weight:600;font-size:.85rem;transition:all var(--gecis-hizi)}
|
||
.cerez-onay{background:var(--renk-birincil);color:#fff}
|
||
.cerez-onay:hover{background:var(--renk-birincil-koyu)}
|
||
.cerez-red{background:#f1f5f9;color:var(--renk-koyu-2)}
|
||
.cerez-red:hover{background:#e2e8f0}
|
||
|
||
/* ============================================================
|
||
Bölüm 16: Çeşitli Yardımcılar & Animasyonlar
|
||
============================================================ */
|
||
.gorunur-olmadan{opacity:0;transform:translateY(30px)}
|
||
.gorunen{opacity:1;transform:translateY(0);transition:opacity .7s ease,transform .7s ease}
|
||
.satir-vurgu{transition:transform var(--gecis-hizi)}
|
||
.satir-vurgu:hover{transform:scale(1.03)}
|
||
|
||
/* ============================================================
|
||
Bölüm 17: Responsive Tasarım (Media Query)
|
||
============================================================ */
|
||
@media (max-width:1024px){
|
||
.ozellik-grid{grid-template-columns:repeat(2,1fr)}
|
||
.tanitim-grid{grid-template-columns:1fr;gap:44px}
|
||
.galeri-grid{grid-template-columns:repeat(2,1fr)}
|
||
.yorum-grid{grid-template-columns:1fr 1fr}
|
||
.fiyat-grid{grid-template-columns:1fr;max-width:480px;margin:0 auto}
|
||
.footer-grid{grid-template-columns:1fr 1fr;gap:30px}
|
||
.iletisim-grid{grid-template-columns:1fr}
|
||
}
|
||
@media (max-width:768px){
|
||
.nav-linkler{
|
||
display:none;position:absolute;top:100%;left:0;right:0;background:#fff;
|
||
flex-direction:column;padding:20px 24px;border-bottom:1px solid #eef2f7;box-shadow:var(--golge-yumusak);gap:18px;
|
||
}
|
||
.nav-linkler.acik{display:flex}
|
||
.mobil-menu-dugme{display:flex}
|
||
.hero-icerik{grid-template-columns:1fr;gap:48px}
|
||
.hero-urun-cerceve{width:280px;height:360px}
|
||
.hero-istatistikler{gap:24px;flex-wrap:wrap}
|
||
.ozellik-grid{grid-template-columns:1fr;max-width:440px;margin:0 auto}
|
||
.teknik-grid{grid-template-columns:1fr}
|
||
.nisan-kartlari{grid-template-columns:1fr}
|
||
.yorum-grid{grid-template-columns:1fr}
|
||
.galeri-grid{grid-template-columns:1fr}
|
||
.form-ikili{grid-template-columns:1fr}
|
||
.tanitim-acilir{right:8px;left:8px}
|
||
.footer-grid{grid-template-columns:1fr}
|
||
.ust-bar-bilgi span:last-child{display:none}
|
||
}
|
||
@media (max-width:480px){
|
||
.hero h1{font-size:2rem}
|
||
.buton{width:100%;text-align:center}
|
||
.hero-dugme-grubu{flex-direction:column;align-items:stretch}
|
||
.cerez-bildirimi{left:16px;right:16px;max-width:none;bottom:16px}
|
||
.float-sapka{bottom:18px;right:18px;width:50px;height:50px}
|
||
.kapsayici{padding:0 18px}
|
||
}
|
||
|
||
/* Karanlık tema — gece modu (toggle ile body'ye eklenen sınıf) */
|
||
body.karanlik{
|
||
background:linear-gradient(180deg,#0f172a 0,#111827 60%,#1e293b 100%);
|
||
color:#e2e8f0;
|
||
}
|
||
body.karanlik .navbar{background:rgba(15,23,42,.92);border-bottom-color:rgba(148,163,184,.12)}
|
||
body.karanlik .nav-aksesuar .tema-dugmesi,
|
||
body.karanlik .nav-aksesuar .nav-sepet,
|
||
body.karanlik .mobil-menu-dugme{background:var(--renk-koyu-2)}
|
||
body.karanlik .nav-linkler.acik{background:var(--renk-koyu)}
|
||
body.karanlik .hero{background:linear-gradient(180deg,#111827 0,#0f172a 100%)}
|
||
body.karanlik .hero-etiket{background:var(--renk-koyu-2);border-color:rgba(148,163,184,.15);color:#e2e8f0}
|
||
body.karanlik .marka-bandi{background:var(--renk-koyu);border-color:rgba(148,163,184,.1)}
|
||
body.karanlik .ozellikler,
|
||
body.karanlik .fiyatlandirma,
|
||
body.karanlik .yorumlar,
|
||
body.karanlik .iletisim{background:var(--renk-koyu)}
|
||
body.karanlik .ozellik-kart{background:var(--renk-koyu-2);border-color:rgba(148,163,184,.12)}
|
||
body.karanlik .ozellik-kart h3,
|
||
body.karanlik .yorum-ad,
|
||
body.karanlik .modal-baslik{color:#fff}
|
||
body.karanlik .yorum-kart{background:var(--renk-koyu-2);border-color:rgba(148,163,184,.12)}
|
||
body.karanlik .tanitim{background:linear-gradient(180deg,var(--renk-koyu),var(--renk-koyu-2))}
|
||
body.karanlik .galeri{background:var(--renk-koyu)}
|
||
body.karanlik .sss{background:var(--renk-koyu)}
|
||
body.karanlik .sss-madde{background:var(--renk-koyu-2);border-color:rgba(148,163,184,.12)}
|
||
body.karanlik .sss-soru{color:#fff}
|
||
body.karanlik .fiyat-kart{background:var(--renk-koyu-2);border-color:rgba(148,163,184,.12)}
|
||
body.karanlik .fiyat-kart-ozel{background:var(--renk-koyu-2)}
|
||
body.karanlik .fiyat-deger .rakam,
|
||
body.karanlik .fiyat-deger .para{color:#fff}
|
||
body.karanlik .iletisim-kart{background:var(--renk-koyu-2);border-color:rgba(148,163,184,.12)}
|
||
body.karanlik .iletisim-form{background:var(--renk-koyu-2);border-color:rgba(148,163,184,.12)}
|
||
body.karanlik .form-alan{background:var(--renk-koyu);border-color:rgba(148,163,184,.2);color:#e2e8f0}
|
||
body.karanlik .form-etiket{color:#e2e8f0}
|
||
body.karanlik .modal-kutu{background:var(--renk-koyu-2)}
|
||
body.karanlik .modal-kapat{background:var(--renk-koyu)}
|
||
body.karanlik .modal-kapat svg{fill:#e2e8f0}
|
||
body.karanlik .cerez-bildirimi{background:var(--renk-koyu-2);border-color:rgba(148,163,184,.15)}
|
||
body.karanlik .cerez-red{background:var(--renk-koyu);color:#e2e8f0}
|
||
body.karanlik .tema-dugmesi svg,
|
||
body.karanlik .nav-sepet svg{fill:#fff}
|
||
body.karanlik .baslik-kabugu h2{color:#fff}
|
||
body.karanlik .baslik-kabugu p{color:#94a3b8}
|
||
|
||
</style>
|
||
</head>
|
||
<body>
|
||
|
||
<!-- ============================================================
|
||
BÖLÜM 1: ÜST BAR
|
||
============================================================ -->
|
||
<div class="ust-bar">
|
||
<div class="ust-bar-icerik">
|
||
<div class="ust-bar-bilgi">
|
||
<span>
|
||
<svg viewBox="0 0 24 24"><path d="M12 2C8.13 2 5 5.13 5 9c0 5.25 7 13 7 13s7-7.75 7-13c0-3.87-3.13-7-7-7zm0 9.5c-1.38 0-2.5-1.12-2.5-2.5s1.12-2.5 2.5-2.5 2.5 1.12 2.5 2.5-1.12 2.5-2.5 2.5z"/></svg>
|
||
Türkiye'nin her yerine ücretsiz kargo
|
||
</span>
|
||
<span>
|
||
<svg viewBox="0 0 24 24"><path d="M12 1L3 5v6c0 5.55 3.84 10.74 9 12 5.16-1.26 9-6.45 9-12V5l-9-4z"/></svg>
|
||
2 yıl resmi garanti
|
||
</span>
|
||
<span>
|
||
<svg viewBox="0 0 24 24"><path d="M21 6h-2v2h-2V6h-2V4h2V2h2v2h2v2zm-10 3c1.66 0 3-1.34 3-3s-1.34-3-3-3-3 1.34-3 3 1.34 3 3 3zm0 4c-2.33 0-7 1.17-7 3.5V19h14v-2.5c0-2.33-4.67-3.5-7-3.5z"/></svg>
|
||
Uzman destek ekibi yanınızda
|
||
</span>
|
||
</div>
|
||
<div class="ust-bar-sosyal">
|
||
<a href="#" aria-label="Facebook"><svg viewBox="0 0 24 24"><path d="M9 8H6v4h3v12h5V12h3.642L18 8h-4V6.333C14 5.378 14.192 5 15.115 5H18V0h-3.808C10.596 0 9 1.583 9 4.615V8z"/></svg></a>
|
||
<a href="#" aria-label="Instagram"><svg viewBox="0 0 24 24"><path d="M12 2.163c3.204 0 3.584.012 4.85.07 3.252.148 4.771 1.691 4.919 4.919.058 1.265.069 1.645.069 4.849 0 3.205-.012 3.584-.069 4.849-.149 3.225-1.664 4.771-4.919 4.919-1.266.058-1.644.07-4.85.07-3.204 0-3.584-.012-4.849-.07-3.26-.149-4.771-1.699-4.919-4.92-.058-1.265-.07-1.644-.07-4.849 0-3.204.013-3.583.07-4.849.149-3.227 1.664-4.771 4.919-4.919 1.266-.057 1.645-.069 4.849-.069zm0-2.163c-3.259 0-3.667.014-4.947.072-4.358.2-6.78 2.618-6.98 6.98-.059 1.281-.073 1.689-.073 4.948 0 3.259.014 3.668.072 4.948.2 4.358 2.618 6.78 6.98 6.98 1.281.058 1.689.072 4.948.072 3.259 0 3.668-.014 4.948-.072 4.354-.2 6.782-2.618 6.979-6.98.059-1.28.073-1.689.073-4.948 0-3.259-.014-3.667-.072-4.947-.196-4.354-2.617-6.78-6.979-6.98-1.281-.059-1.69-.073-4.949-.073zm0 5.838c-3.403 0-6.162 2.759-6.162 6.162s2.759 6.163 6.162 6.163 6.162-2.759 6.162-6.163c0-3.403-2.759-6.162-6.162-6.162zm0 10.162c-2.209 0-4-1.79-4-4 0-2.209 1.791-4 4-4s4 1.791 4 4c0 2.21-1.791 4-4 4zm6.406-11.845c-.796 0-1.441.645-1.441 1.44s.645 1.44 1.441 1.44c.795 0 1.439-.645 1.439-1.44s-.644-1.44-1.439-1.44z"/></svg></a>
|
||
<a href="#" aria-label="X / Twitter"><svg viewBox="0 0 24 24"><path d="M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231zm-1.161 17.52h1.833L7.084 4.126H5.117z"/></svg></a>
|
||
<a href="#" aria-label="YouTube"><svg viewBox="0 0 24 24"><path d="M23.498 6.186a3.016 3.016 0 00-2.122-2.136C19.505 3.545 12 3.545 12 3.545s-7.505 0-9.377.505A3.017 3.017 0 00.502 6.186C0 8.07 0 12 0 12s0 3.93.502 5.814a3.016 3.016 0 002.122 2.136c1.871.505 9.376.505 9.376.505s7.505 0 9.377-.505a3.015 3.015 0 002.122-2.136C24 15.93 24 12 24 12s0-3.93-.502-5.814zM9.545 15.568V8.432L15.818 12l-6.273 3.568z"/></svg></a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- ============================================================
|
||
BÖLÜM 2: NAVİGASYON
|
||
============================================================ -->
|
||
<header class="navbar">
|
||
<div class="nav-icerik">
|
||
<a href="#" class="logo">
|
||
<span class="logo-ikon">N</span>
|
||
<span>NovaX</span>
|
||
</a>
|
||
<nav class="nav-linkler" id="navLinkler">
|
||
<a href="#ozellikler">Özellikler</a>
|
||
<a href="#tanitim">Tanıtım</a>
|
||
<a href="#teknik">Teknik</a>
|
||
<a href="#fiyat">Fiyatlar</a>
|
||
<a href="#yorumlar">Yorumlar</a>
|
||
<a href="#sss">SSS</a>
|
||
<a href="#iletisim">İletişim</a>
|
||
</nav>
|
||
<div class="nav-aksesuar">
|
||
<button class="tema-dugmesi" id="temaDugme" aria-label="Tema değiştir">
|
||
<svg viewBox="0 0 24 24"><path d="M12 3c-4.97 0-9 4.03-9 9s4.03 9 9 9 9-4.03 9-9c0-.46-.04-.92-.1-1.36-.98 1.37-2.58 2.26-4.4 2.26-2.98 0-5.4-2.42-5.4-5.4 0-1.81.89-3.42 2.26-4.4-.44-.06-.9-.1-1.36-.1z"/></svg>
|
||
</button>
|
||
<button class="nav-sepet" id="sepetDugme" aria-label="Sepeti aç">
|
||
<svg viewBox="0 0 24 24"><path d="M7 18c-1.1 0-1.99.9-1.99 2S5.9 22 7 22s2-.9 2-2-.9-2-2-2zM1 2v2h2l3.6 7.59-1.35 2.45c-.16.28-.25.61-.25.96 0 1.1.9 2 2 2h12v-2H7.42c-.14 0-.25-.11-.25-.25l.03-.12.9-1.63h7.45c.75 0 1.41-.41 1.75-1.03l3.58-6.49c.08-.14.12-.31.12-.48 0-.55-.45-1-1-1H5.21l-.94-2H1zm16 16c-1.1 0-1.99.9-1.99 2s.89 2 1.99 2 2-.9 2-2-.9-2-2-2z"/></svg>
|
||
<span class="sepet-sayac" id="sepetSayac">0</span>
|
||
</button>
|
||
<button class="mobil-menu-dugme" id="mobilMenuDugme" aria-label="Menüyü aç">
|
||
<svg viewBox="0 0 24 24"><path d="M3 18h18v-2H3v2zm0-5h18v-2H3v2zm0-7v2h18V6H3z"/></svg>
|
||
</button>
|
||
</div>
|
||
</div>
|
||
</header>
|
||
|
||
<!-- ============================================================
|
||
BÖLÜM 3: HERO / MANŞET
|
||
============================================================ -->
|
||
<section class="hero">
|
||
<div class="hero-dolgu d1"></div>
|
||
<div class="hero-dolgu d2"></div>
|
||
<div class="hero-dolgu d3"></div>
|
||
<div class="kapsayici">
|
||
<div class="hero-icerik">
|
||
<div class="hero-sol">
|
||
<span class="hero-etiket"><span class="hero-etiket-dot"></span> Yeni Nesil NovaX Pro 2</span>
|
||
<h1>Gelecek, <span class="vurgu">bileğinizde</span> canlanıyor</h1>
|
||
<p class="hero-aciklama">
|
||
AMOLED ekran, çift bant GPS ve devrim niteliğindeki biyometrik sensörleriyle NovaX Pro 2;
|
||
sağlığınızı, sporunuzu ve günlük hayatınızı tek bir dokunuşla yönetir.
|
||
</p>
|
||
<div class="hero-dugme-grubu">
|
||
<a href="#fiyat" class="buton buton-birincil">Hemen Satin Al</a>
|
||
<a href="#tanitim" class="buton buton-outline">Özellikleri Keşfet</a>
|
||
</div>
|
||
<p class="hero-kucuk-not">
|
||
<svg viewBox="0 0 24 24"><path d="M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z"/></svg>
|
||
14 gün iade garantisi ve 2 yıl resmi güvence
|
||
</p>
|
||
<div class="hero-istatistikler">
|
||
<div>
|
||
<div class="istatistik-deger" data-sayac="120000">0</div>
|
||
<div class="istatistik-etiket">Mutlu Kullanıcı</div>
|
||
</div>
|
||
<div>
|
||
<div class="istatistik-deger" data-sayac="97">0</div>
|
||
<div class="istatistik-etiket">Memnuniyet Oranı</div>
|
||
</div>
|
||
<div>
|
||
<div class="istatistik-deger" data-sayac="35">0</div>
|
||
<div class="istatistik-etiket">Gün Pil Ömrü</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="hero-sag">
|
||
<div class="hero-urun-cerceve">
|
||
<div class="hero-urun-ekran">
|
||
<div class="hero-urun-tarih" id="canliTarih">--</div>
|
||
<div class="hero-urun-saat" id="canliSaat">--:--</div>
|
||
<div class="hero-urun-nabiz" id="canliNabiz">Nabız: -- bpm</div>
|
||
</div>
|
||
<div class="hero-dolgu d1"></div>
|
||
<div class="hero-dolgu d2"></div>
|
||
<div class="hero-dolgu d3"></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="hero-kaydirma">
|
||
<span>Aşağı kaydır</span>
|
||
<svg viewBox="0 0 24 24"><path d="M7.41 8.59L12 13.17l4.59-4.58L18 10l-6 6-6-6 1.41-1.41z"/></svg>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- ============================================================
|
||
BÖLÜM 4: MARKA BANDI
|
||
============================================================ -->
|
||
<div class="marka-bandi">
|
||
<div class="kapsayici">
|
||
<p>Güçlü teknoloji ortaklarımız</p>
|
||
<div class="marka-logolar">
|
||
<div class="marka-logo">
|
||
<svg viewBox="0 0 24 24"><path d="M8 6.82v10.36c0 .79.87 1.27 1.54.84l8.14-5.18c.62-.39.62-1.29 0-1.69L9.54 5.98C8.87 5.55 8 6.03 8 6.82z"/></svg>
|
||
TechSport
|
||
</div>
|
||
<div class="marka-logo">
|
||
<svg viewBox="0 0 24 24"><path d="M7 5h10v2H7zm0 6h10v2H7zm0 6h10v2H7z"/></svg>
|
||
HealthPro
|
||
</div>
|
||
<div class="marka-logo">
|
||
<svg viewBox="0 0 24 24"><path d="M4 6h16v2H4zm2-4h12v2H6zm10 10H8v2h8zm-4 6h4v2h-4z"/></svg>
|
||
FitLab
|
||
</div>
|
||
<div class="marka-logo">
|
||
<svg viewBox="0 0 24 24"><path d="M12 2l9 5v5c0 5.55-3.84 10.74-9 12-5.16-1.26-9-6.45-9-12V7l9-5z"/></svg>
|
||
LifeWatch
|
||
</div>
|
||
<div class="marka-logo">
|
||
<svg viewBox="0 0 24 24"><path d="M11 9H9V2H7v7H5V2H3v7c0 2.12 1.66 3.84 3.75 3.97V22h2.5v-9.03C11.34 12.84 13 11.12 13 9V2h-2v7zm5-3v8h2.5v8H21V2c-2.76 0-5 2.24-5 4z"/></svg>
|
||
RunnerMax
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- ============================================================
|
||
BÖLÜM 5: ÜRÜN ÖZELLİKLERİ
|
||
============================================================ -->
|
||
<section class="ozellikler" id="ozellikler">
|
||
<div class="kapsayici">
|
||
<div class="baslik-kabugu gorunur-olmadan">
|
||
<span class="rozet">Neden NovaX?</span>
|
||
<h2>İhtiyacınız olan her şey tek cihazda</h2>
|
||
<p>NovaX Pro 2, sporcudan profesyonel iş insanına kadar herkes için tasarlandı.</p>
|
||
</div>
|
||
<div class="ozellik-grid">
|
||
<div class="ozellik-kart ozellik-kart-renk-1 gorunur-olmadan">
|
||
<div class="ozellik-ikon">
|
||
<svg viewBox="0 0 24 24"><path d="M12 2c-5.33 4.55-8 8.48-8 11.8 0 4.98 3.8 8.2 8 8.2s8-3.22 8-8.2c0-3.32-2.67-7.25-8-11.8zm0 18c-3.35 0-6-2.57-6-6.2 0-2.34 1.95-5.44 6-9.14 4.05 3.7 6 6.8 6 9.14 0 3.63-2.65 6.2-6 6.2z"/></svg>
|
||
</div>
|
||
<h3>24/7 Sağlık Takibi</h3>
|
||
<p>Kalp atış hızı, oksijen seviyesi, uyku kalitesi ve stres analizi gün boyu sürekli izlenir.</p>
|
||
</div>
|
||
<div class="ozellik-kart ozellik-kart-renk-2 gorunur-olmadan">
|
||
<div class="ozellik-ikon">
|
||
<svg viewBox="0 0 24 24"><path d="M22 11.2l-2-2.3c-.2-.2-.4-.4-.6-.5-1-.7-2.1-1.2-3.3-1.4l-2.4-.5-.4-2.5C13.1 2.7 12.5 2 11.5 2c-.3 0-.6.1-.8.3-.3.3-.4.7-.4 1l.6 4.1c.1.4.3.7.6.9l2.9 2.4-1.4 1.4-2.1-.9-.03.03-3.2-2.25c-.4-.3-.9-.4-1.4-.2-.5.2-.8.6-.9 1.2-.1.5.1 1 .4 1.4l1.53 1.61c.3.3.6.5 1 .6l1 .17-2.71 2.7c-.35.34-.55.8-.6 1.3-.02.07-.05.14-.05.2v.03c-.02.5.2 1 .6 1.3l.5.5c.6.6 1.5.8 2.3.5.3-.1.5-.3.7-.5l2.5-2.5c1-.3 1.9-.9 2.6-1.7l2.5-2.5c.1-.1.2-.2.29-.4l.17-.3 2.1-2.1c.5-.5.5-1.2 0-1.7zM4.5 10.5c1.2-1.7 2.4-3.5 4.5-4l-1 6-3.5-2zm17 4c-1.7-1.2-3.5-2.4-4-4.5l6 1c-.5 2.1-2.3 3.3-4 4.5z"/></svg>
|
||
</div>
|
||
<h3>120+ Spor Modu</h3>
|
||
<p>Koşudan yüzmeye, yoga'dan bisiklete 120'den fazla aktivite modu ve otomatik algılama.</p>
|
||
</div>
|
||
<div class="ozellik-kart ozellik-kart-renk-3 gorunur-olmadan">
|
||
<div class="ozellik-ikon">
|
||
<svg viewBox="0 0 24 24"><path d="M7.24 2C4.65 3.79 3 6.62 3 9.88c0 5.76 7.53 11.12 8.22 11.65.45.35 1.11.35 1.56 0 .69-.53 8.22-5.89 8.22-11.65 0-3.26-1.65-6.09-4.24-7.88C15.07 5.95 13.65 7 12 7s-3.07-1.05-4.76-5z"/></svg>
|
||
</div>
|
||
<h3>Gelişmiş Nabız Sensörü</h3>
|
||
<p>Beş LED'lik optik kalp atış sensörü ile egzersiz sırasında bile milimetrik doğruluk.</p>
|
||
</div>
|
||
<div class="ozellik-kart ozellik-kart-renk-4 gorunur-olmadan">
|
||
<div class="ozellik-ikon">
|
||
<svg viewBox="0 0 24 24"><path d="M12 2a10 10 0 00-10 10c0 5.52 4.48 10 10 10s10-4.48 10-10S17.52 2 12 2zm5.5 10h-1c-.28-2.42-2.08-4.22-4.5-4.5v-1c0-.28.22-.5.5-.5 0-.55-.45-1-1-1s-1 .45-1 1v3.28c-.81.32-1.5 1.06-1.5 2.22 0 1.18.94 2 2 2 .24 0 1.5 0 2.5-1v3c-.83.15-1.66.11-2.5-.12v1.34c1.19.4 2.5.45 3.55.16l.45-.16V12h1c.55 0 1-.45 1-1s-.45-1-1-1zm-5.5 5c-.55 0-1-.45-1-1s.45-1 1-1 1 .45 1 1-.45 1-1 1z"/></svg>
|
||
</div>
|
||
<h3>35 Gün Pil Ömrü</h3>
|
||
<p>Tek şarjda 35 güne varan kullanım süresi; hızlı şarj ile 10 dakikada 2 günlük güç.</p>
|
||
</div>
|
||
<div class="ozellik-kart ozellik-kart-renk-5 gorunur-olmadan">
|
||
<div class="ozellik-ikon">
|
||
<svg viewBox="0 0 24 24"><path d="M21.71 11.29l-9-9a1 1 0 00-1.42 0L4.29 9.29a1 1 0 000 1.42L9 15.42V21a1 1 0 001 1h4a1 1 0 001-1v-5.58l5.71-5.71a1 1 0 000-1.42zM13 20h-2v-5a1 1 0 00-1-1H8.41L12 10.41 15.59 14H14a1 1 0 00-1 1z"/></svg>
|
||
</div>
|
||
<h3>Roket Dayanıklılığı</h3>
|
||
<p>Safir cam koruma, 5 ATM su geçirmezlik ve MIL-STD-810H standartlarında gövd.</p>
|
||
</div>
|
||
<div class="ozellik-kart ozellik-kart-renk-6 gorunur-olmadan">
|
||
<div class="ozellik-ikon">
|
||
<svg viewBox="0 0 24 24"><path d="M12 3C7.03 3 3 7.03 3 12s4.03 9 9 9 9-4.03 9-9-4.03-9-9-9zm1 15h-2v-2h2v2zm1.36-8.31l-1.49 1.49c-.54.54-.87 1.1-.87 1.82H10v-.5c0-.6.26-1.17.73-1.64l1.84-1.85c.27-.28.43-.66.43-1.02C13 6.5 12.35 6 11.5 6c-.84 0-1.53.5-1.86 1.22L8.34 6.13A4.65 4.65 0 0111.5 4c2.48 0 4.5 2.02 4.5 4.5 0 1.01-.41 1.92-1.14 2.19zm-1.36 8.31h-2v-2h2v2z"/></svg>
|
||
</div>
|
||
<h3>Akıllı Bildirimler</h3>
|
||
<p>Mesajlar, çağrılar ve uygulama bildirimleri bileğinizde; kontrol tamamen sizde.</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- ============================================================
|
||
BÖLÜM 6: TANITIM / ÜRÜN HİKAYESİ
|
||
============================================================ -->
|
||
<section class="tanitim" id="tanitim">
|
||
<div class="kapsayici">
|
||
<div class="tanitim-grid">
|
||
<div class="tanitim-gorsel gorunur-olmadan">
|
||
<div class="tanitim-gorsel-resim"></div>
|
||
<div class="tanitim-acilir">
|
||
<div class="tanitim-acilir-ikon">
|
||
<svg viewBox="0 0 24 24"><path d="M9 12h6m-3-3v6M12 3c4.97 0 9 4.03 9 9s-4.03 9-9 9-9-4.03-9-9 4.03-9 9-9z"/></svg>
|
||
</div>
|
||
<div>
|
||
<div class="tanitim-acilir-deger">%98 Doğruluk</div>
|
||
<div class="tanitim-acilir-etiket">Klinik test onaylı sensör</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="tanitim-metin">
|
||
<div class="baslik-kabugu" style="text-align:left">
|
||
<span class="rozet">NovaX Pro 2</span>
|
||
<h2>Sağlığınız, artık ilişkinizi yönlendiriyor</h2>
|
||
</div>
|
||
<p>
|
||
NovaX Pro 2, yalnızca bir saat değil; sağlık koçunuz, spor partneriniz ve günlük asistanınızdır.
|
||
Gelişmiş AI alt yapısı sayesinde verilerinizi analiz eder ve size anlamlı öneriler sunar.
|
||
</p>
|
||
<div class="ticaret-ozellikler">
|
||
<div class="ticaret-madde">
|
||
<div class="ticaret-madde-ikon">
|
||
<svg viewBox="0 0 24 24"><path d="M9 16.2L4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4z"/></svg>
|
||
</div>
|
||
<div>
|
||
<strong>Kişisel Sağlık Skoru</strong>
|
||
<span>Günlük aktivite verilerinizle benzersiz bir sağlık skoru oluşturulur.</span>
|
||
</div>
|
||
</div>
|
||
<div class="ticaret-madde">
|
||
<div class="ticaret-madde-ikon">
|
||
<svg viewBox="0 0 24 24"><path d="M9 16.2L4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4z"/></svg>
|
||
</div>
|
||
<div>
|
||
<strong>Akıllı Koç Yapay Zekası</strong>
|
||
<span>AI koç, koşu temponuzu ve formunuzu gerçek zamanlı iyileştirir.</span>
|
||
</div>
|
||
</div>
|
||
<div class="ticaret-madde">
|
||
<div class="ticaret-madde-ikon">
|
||
<svg viewBox="0 0 24 24"><path d="M9 16.2L4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4z"/></svg>
|
||
</div>
|
||
<div>
|
||
<strong>Kadın Sağlığı Takibi</strong>
|
||
<span>Döngü ve doğurganlık penceresi takibi doğru ve gizli bir şekilde.</span>
|
||
</div>
|
||
</div>
|
||
<div class="ticaret-madde">
|
||
<div class="ticaret-madde-ikon">
|
||
<svg viewBox="0 0 24 24"><path d="M9 16.2L4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4z"/></svg>
|
||
</div>
|
||
<div>
|
||
<strong>Kesintisiz Uyku Analizi</strong>
|
||
<span>REM, hafif ve derin uyku fazlarınızı ayrıntılı olarak ölçer.</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<a href="#fiyat" class="buton buton-birincil">Detaylı İncele</a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- ============================================================
|
||
BÖLÜM 7: TEKNİK ÖZELLİKLER
|
||
============================================================ -->
|
||
<section class="teknik" id="teknik">
|
||
<div class="kapsayici">
|
||
<div class="baslik-kabugu gorunur-olmadan">
|
||
<span class="rozet">Teknik Detaylar</span>
|
||
<h2>Mühendisliğin zirvesi</h2>
|
||
<p>Her bir bileşen, günlük kullanımın zorluklarına karşı test edildi ve doğrulandı.</p>
|
||
</div>
|
||
<div class="teknik-grid">
|
||
<div class="teknik-bar gorunur-olmadan">
|
||
<div class="teknik-bar-baslik">
|
||
<svg viewBox="0 0 24 24"><path d="M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z"/></svg>
|
||
Ekran & Gövde
|
||
</div>
|
||
<div class="teknik-satir"><span class="teknik-ad">Ekran</span><span class="teknik-deger">1.43" AMOLED, 466x466</span></div>
|
||
<div class="teknik-satir"><span class="teknik-ad">Cam</span><span class="teknik-deger">Safir Kristal Kaplama</span></div>
|
||
<div class="teknik-satir"><span class="teknik-ad">Kasa</span><span class="teknik-deger">Titanyum + Alüminyum</span></div>
|
||
<div class="teknik-satir"><span class="teknik-ad">Ağırlık</span><span class="teknik-deger">36 gram</span></div>
|
||
</div>
|
||
<div class="teknik-bar gorunur-olmadan">
|
||
<div class="teknik-bar-baslik">
|
||
<svg viewBox="0 0 24 24"><path d="M9 16.5c1.66 0 3-1.34 3-3v-5a3 3 0 10-2 .41v4.59a1 1 0 11-1 1v-1.5H7.5v3.5A1.5 1.5 0 109 16.5zm8.5-2.5v-.5a.75.75 0 00-1.5 0v.5h-1v-2h1V12a2.25 2.25 0 014.5 0v.5h1v2h-1-.5v1a2.5 2.5 0 01-5 0v-1z"/></svg>
|
||
Sensörler
|
||
</div>
|
||
<div class="teknik-satir"><span class="teknik-ad">Kalp Atış</span><span class="teknik-deger">5x LED Optik</span></div>
|
||
<div class="teknik-satir"><span class="teknik-ad">Oksijen (SpO2)</span><span class="teknik-deger">Nokta ve sürekli ölçüm</span></div>
|
||
<div class="teknik-satir"><span class="teknik-ad">EKG</span><span class="teknik-deger">Uygulama destekli</span></div>
|
||
<div class="teknik-satir"><span class="teknik-ad">Termometre</span><span class="teknik-deger">Cilt sıcaklığı</span></div>
|
||
</div>
|
||
<div class="teknik-bar gorunur-olmadan">
|
||
<div class="teknik-bar-baslik">
|
||
<svg viewBox="0 0 24 24"><path d="M13 3c-4.97 0-9 4.03-9 9H1l3.89 3.89.07.14L9 12H6c0-3.87 3.13-7 7-7s7 3.13 7 7c0 3.87-3.13 7-7 7-1.93 0-3.68-.79-4.94-2.06l-1.42 1.42A8.954 8.954 0 0013 21c4.97 0 9-4.03 9-9s-4.03-9-9-9zm-1 5v5l4.28 2.54.72-1.21-3.5-2.08V8H12z"/></svg>
|
||
Performans
|
||
</div>
|
||
<div class="teknik-satir"><span class="teknik-ad">Uydu Takibi</span><span class="teknik-deger">Çift Band GPS + GLONASS</span></div>
|
||
<div class="teknik-satir"><span class="teknik-ad">İşlemci</span><span class="teknik-deger">2 çekirdekli Cortex-A53 @1.2GHz</span></div>
|
||
<div class="teknik-satir"><span class="teknik-ad">Depolama</span><span class="teknik-deger">4GB müzik + veri</span></div>
|
||
<div class="teknik-satir"><span class="teknik-ad">Bağlantı</span><span class="teknik-deger">Bluetooth 5.3, NFC, Wi-Fi</span></div>
|
||
</div>
|
||
<div class="teknik-bar gorunur-olmadan">
|
||
<div class="teknik-bar-baslik">
|
||
<svg viewBox="0 0 24 24"><path d="M11.99 2C6.47 2 2 6.48 2 12s4.47 10 9.99 10C17.52 22 22 17.52 22 12S17.52 2 11.99 2zM12 20c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8zm3.5-9c.83 0 1.5-.67 1.5-1.5S16.33 8 15.5 8 14 8.67 14 9.5s.67 1.5 1.5 1.5zm-7 0c.83 0 1.5-.67 1.5-1.5S9.33 8 8.5 8 7 8.67 7 9.5 7.67 11 8.5 11zm3.5 6.5c2.33 0 4.31-1.46 5.11-3.5H6.89c.8 2.04 2.78 3.5 5.11 3.5z"/></svg>
|
||
Pil & Dayanıklılık
|
||
</div>
|
||
<div class="teknik-satir"><span class="teknik-ad">Pil Ömrü</span><span class="teknik-deger">35 güne kadar</span></div>
|
||
<div class="teknik-satir"><span class="teknik-ad">Şarj Süresi</span><span class="teknik-deger">65 dakika tam şarj</span></div>
|
||
<div class="teknik-satir"><span class="teknik-ad">Su Direnci</span><span class="teknik-deger">5 ATM / 50m</span></div>
|
||
<div class="teknik-satir"><span class="teknik-ad">Dayanıklılık</span><span class="teknik-deger">MIL-STD-810H</span></div>
|
||
</div>
|
||
</div>
|
||
<div class="nisan-kartlari">
|
||
<div class="nisan-kart gorunur-olmadan">
|
||
<svg viewBox="0 0 24 24"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z"/></svg>
|
||
<h4>ISO 13485</h4>
|
||
<p>Tıbbi cihaz üretim standardında kalite yönetimi</p>
|
||
</div>
|
||
<div class="nisan-kart gorunur-olmadan">
|
||
<svg viewBox="0 0 24 24"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z"/></svg>
|
||
<h4>CE Sertifikası</h4>
|
||
<p>Avrupa güvenlik ve sağlık standartlarına uygun</p>
|
||
</div>
|
||
<div class="nisan-kart gorunur-olmadan">
|
||
<svg viewBox="0 0 24 24"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z"/></svg>
|
||
<h4>IP68 Sertifikası</h4>
|
||
<p>Toza ve suya karşı en yüksek dayanıklılık</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- ============================================================
|
||
BÖLÜM 8: FİYATLANDIRMA
|
||
============================================================ -->
|
||
<section class="fiyatlandirma" id="fiyat">
|
||
<div class="kapsayici">
|
||
<div class="baslik-kabugu gorunur-olmadan">
|
||
<span class="rozet">Fiyatlandırma</span>
|
||
<h2>Size uygun paketi seçin</h2>
|
||
<p>Esnek ödeme seçenekleri ve kampanyalarla NovaX'i bir tık uzağınıza getirin.</p>
|
||
</div>
|
||
<div class="fiyat-grid">
|
||
<div class="fiyat-kart gorunur-olmadan">
|
||
<h3>NovaX Lite</h3>
|
||
<p class="fiyat-aciklama">Temel ihtiyaçlarınız için ideal giriş modeli</p>
|
||
<div class="fiyat-deger">
|
||
<span class="para">₺</span>
|
||
<span class="rakam">4.999</span>
|
||
<span class="donem">/ tek seferlik</span>
|
||
</div>
|
||
<ul class="fiyat-ozellik-list">
|
||
<li class="fiyat-ozellik-item"><span class="fiyat-ozellik-item-ikon"><svg viewBox="0 0 24 24"><path d="M9 16.2L4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4z"/></svg></span>Temel sağlık takibi</li>
|
||
<li class="fiyat-ozellik-item"><span class="fiyat-ozellik-item-ikon"><svg viewBox="0 0 24 24"><path d="M9 16.2L4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4z"/></svg></span>40+ spor modu</li>
|
||
<li class="fiyat-ozellik-item"><span class="fiyat-ozellik-item-ikon"><svg viewBox="0 0 24 24"><path d="M9 16.2L4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4z"/></svg></span>14 gün pil ömrü</li>
|
||
<li class="fiyat-ozellik-item kapali"><span class="fiyat-ozellik-item-ikon"><svg viewBox="0 0 24 24"><path d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"/></svg></span>EKG desteği</li>
|
||
<li class="fiyat-ozellik-item kapali"><span class="fiyat-ozellik-item-ikon"><svg viewBox="0 0 24 24"><path d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"/></svg></span>NFC ödeme</li>
|
||
<li class="fiyat-ozellik-item kapali"><span class="fiyat-ozellik-item-ikon"><svg viewBox="0 0 24 24"><path d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"/></svg></span>Kişisel AI koç</li>
|
||
</ul>
|
||
<button class="buton buton-outline" data-urun="NovaX Lite" data-fiyat="4999">Sepete Ekle</button>
|
||
</div>
|
||
<div class="fiyat-kart fiyat-kart-ozel gorunur-olmadan">
|
||
<span class="fiyat-kart-ozel-rozet">En Popüler</span>
|
||
<h3>NovaX Pro 2</h3>
|
||
<p class="fiyat-aciklama">Sağlık ve spor rezgimi tam performans</p>
|
||
<div class="fiyat-deger">
|
||
<span class="para">₺</span>
|
||
<span class="rakam">7.999</span>
|
||
<span class="donem">/ tek seferlik</span>
|
||
</div>
|
||
<ul class="fiyat-ozellik-list">
|
||
<li class="fiyat-ozellik-item"><span class="fiyat-ozellik-item-ikon"><svg viewBox="0 0 24 24"><path d="M9 16.2L4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4z"/></svg></span>Gelişmiş sağlık takibi</li>
|
||
<li class="fiyat-ozellik-item"><span class="fiyat-ozellik-item-ikon"><svg viewBox="0 0 24 24"><path d="M9 16.2L4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4z"/></svg></span>120+ spor modu</li>
|
||
<li class="fiyat-ozellik-item"><span class="fiyat-ozellik-item-ikon"><svg viewBox="0 0 24 24"><path d="M9 16.2L4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4z"/></svg></span>35 gün pil ömrü</li>
|
||
<li class="fiyat-ozellik-item"><span class="fiyat-ozellik-item-ikon"><svg viewBox="0 0 24 24"><path d="M9 16.2L4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4z"/></svg></span>EKG desteği</li>
|
||
<li class="fiyat-ozellik-item"><span class="fiyat-ozellik-item-ikon"><svg viewBox="0 0 24 24"><path d="M9 16.2L4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4z"/></svg></span>NFC ödeme</li>
|
||
<li class="fiyat-ozellik-item"><span class="fiyat-ozellik-item-ikon"><svg viewBox="0 0 24 24"><path d="M9 16.2L4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4z"/></svg></span>Kişisel AI koç</li>
|
||
</ul>
|
||
<button class="buton buton-birincil" data-urun="NovaX Pro 2" data-fiyat="7999">Sepete Ekle</button>
|
||
</div>
|
||
<div class="fiyat-kart gorunur-olmadan">
|
||
<h3>NovaX Ultra</h3>
|
||
<p class="fiyat-aciklama">En kaliteli deneyim, titanyum kasa</p>
|
||
<div class="fiyat-deger">
|
||
<span class="para">₺</span>
|
||
<span class="rakam">11.999</span>
|
||
<span class="donem">/ tek seferlik</span>
|
||
</div>
|
||
<ul class="fiyat-ozellik-list">
|
||
<li class="fiyat-ozellik-item"><span class="fiyat-ozellik-item-ikon"><svg viewBox="0 0 24 24"><path d="M9 16.2L4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4z"/></svg></span>Titanyum gövde</li>
|
||
<li class="fiyat-ozellik-item"><span class="fiyat-ozellik-item-ikon"><svg viewBox="0 0 24 24"><path d="M9 16.2L4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4z"/></svg></span>Çift bant GPS</li>
|
||
<li class="fiyat-ozellik-item"><span class="fiyat-ozellik-item-ikon"><svg viewBox="0 0 24 24"><path d="M9 16.2L4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4z"/></svg></span>İnstant EKG haritası</li>
|
||
<li class="fiyat-ozellik-item"><span class="fiyat-ozellik-item-ikon"><svg viewBox="0 0 24 24"><path d="M9 16.2L4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4z"/></svg></span>İnteraktif AI koç +</li>
|
||
<li class="fiyat-ozellik-item"><span class="fiyat-ozellik-item-ikon"><svg viewBox="0 0 24 24"><path d="M9 16.2L4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4z"/></svg></span>5 yıl pil garantisi</li>
|
||
<li class="fiyat-ozellik-item"><span class="fiyat-ozellik-item-ikon"><svg viewBox="0 0 24 24"><path d="M9 16.2L4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4z"/></svg></span>Sınırsız ek kayış</li>
|
||
</ul>
|
||
<button class="buton buton-outline" data-urun="NovaX Ultra" data-fiyat="11999">Sepete Ekle</button>
|
||
</div>
|
||
</div>
|
||
<p class="fiyat-not">* Tüm fiyatlara KDV dahildir. Taksit seçenekleri ödeme aşamasında gösterilir.</p>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- ============================================================
|
||
BÖLÜM 9: GALERİ / ÜRÜN GÖRSELLERİ
|
||
============================================================ -->
|
||
<section class="galeri">
|
||
<div class="kapsayici">
|
||
<div class="baslik-kabugu gorunur-olmadan">
|
||
<span class="rozet">Galeri</span>
|
||
<h2>NovaX'i her açıdan keşfedin</h2>
|
||
<p>Ürünümüzü detaylı bir biçimde tanıyın.</p>
|
||
</div>
|
||
<div class="galeri-grid">
|
||
<div class="galeri-kutu gorunur-olmadan">
|
||
<div class="galeri-kutu-renk" style="background:linear-gradient(135deg,#2563eb,#1e40af)">
|
||
<span class="galeri-cap">Canlı yüzler</span>
|
||
<span style="font-size:1.4rem">NovaX</span>
|
||
<span class="galeri-kutu-etiket">Canlı yüzler & kişisel kadranlar</span>
|
||
</div>
|
||
</div>
|
||
<div class="galeri-kutu gorunur-olmadan">
|
||
<div class="galeri-kutu-renk" style="background:linear-gradient(135deg,#7c3aed,#5b21b6)">
|
||
<span class="galeri-cap">Spor modları</span>
|
||
<span style="font-size:1.4rem">120+</span>
|
||
<span class="galeri-kutu-etiket">Her spora uygun profesyonel modlar</span>
|
||
</div>
|
||
</div>
|
||
<div class="galeri-kutu gorunur-olmadan">
|
||
<div class="galeri-kutu-renk" style="background:linear-gradient(135deg,#0ea5e9,#0369a1)">
|
||
<span class="galeri-cap">Sağlık</span>
|
||
<span style="font-size:1.4rem">EKG</span>
|
||
<span class="galeri-kutu-etiket">Klinik onaylı EKG ve SpO2 ölçümü</span>
|
||
</div>
|
||
</div>
|
||
<div class="galeri-kutu gorunur-olmadan">
|
||
<div class="galeri-kutu-renk" style="background:linear-gradient(135deg,#16a34a,#166534)">
|
||
<span class="galeri-cap">Dayanıklılık</span>
|
||
<span style="font-size:1.4rem">5 ATM</span>
|
||
<span class="galeri-kutu-etiket">50 metreye kadar suya dayanıklı</span>
|
||
</div>
|
||
</div>
|
||
<div class="galeri-kutu gorunur-olmadan">
|
||
<div class="galeri-kutu-renk" style="background:linear-gradient(135deg,#f59e0b,#b45309)">
|
||
<span class="galeri-cap">Pil</span>
|
||
<span style="font-size:1.4rem">35 Gun</span>
|
||
<span class="galeri-kutu-etiket">Tek şarjda 35 güne kadar kullanım</span>
|
||
</div>
|
||
</div>
|
||
<div class="galeri-kutu gorunur-olmadan">
|
||
<div class="galeri-kutu-renk" style="background:linear-gradient(135deg,#dc2626,#991b1b)">
|
||
<span class="galeri-cap">Titanyum</span>
|
||
<span style="font-size:1.4rem">Ultra</span>
|
||
<span class="galeri-kutu-etiket">Ultra modelde titanyum gövde</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- ============================================================
|
||
BÖLÜM 10: KULLANICI YORUMLARI
|
||
============================================================ -->
|
||
<section class="yorumlar" id="yorumlar">
|
||
<div class="kapsayici">
|
||
<div class="baslik-kabugu gorunur-olmadan">
|
||
<span class="rozet">Müşteri Yorumları</span>
|
||
<h2>Binlerce sporcu NovaX'e güveniyor</h2>
|
||
<p>Gerçek kullanıcıların deneyimlerinden birkaç kesit.</p>
|
||
</div>
|
||
<div class="yorum-grid">
|
||
<div class="yorum-kart gorunur-olmadan">
|
||
<div class="yorum-yildizlar">
|
||
<svg viewBox="0 0 24 24"><path d="M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z"/></svg>
|
||
<svg viewBox="0 0 24 24"><path d="M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z"/></svg>
|
||
<svg viewBox="0 0 24 24"><path d="M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z"/></svg>
|
||
<svg viewBox="0 0 24 24"><path d="M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z"/></svg>
|
||
<svg viewBox="0 0 24 24"><path d="M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z"/></svg>
|
||
</div>
|
||
<p class="yorum-metin">Maraton antrenmanlarımda tam bir devrim yaşattı. GPS doğruluğu muazzam ve AI koç gerçekten tempo bile veriyor. Pil ömrü de reklamda söylendiği gibi.</p>
|
||
<div class="yorum-kisi">
|
||
<div class="yorum-avatar">EA</div>
|
||
<div>
|
||
<div class="yorum-ad">Elif Aydın</div>
|
||
<div class="yorum-unvan">Maraton Koşucusu</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="yorum-kart gorunur-olmadan">
|
||
<div class="yorum-yildizlar">
|
||
<svg viewBox="0 0 24 24"><path d="M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z"/></svg>
|
||
<svg viewBox="0 0 24 24"><path d="M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z"/></svg>
|
||
<svg viewBox="0 0 24 24"><path d="M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z"/></svg>
|
||
<svg viewBox="0 0 24 24"><path d="M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z"/></svg>
|
||
<svg viewBox="0 0 24 24"><path d="M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z"/></svg>
|
||
</div>
|
||
<p class="yorum-metin">İlk kez bu kadar eksiksiz bir akıllı saat kullanıyorum. Uyku analizi gerçekten çok başarılı. Sabahları kendimi daha dinç hissediyorum.</p>
|
||
<div class="yorum-kisi">
|
||
<div class="yorum-avatar">MK</div>
|
||
<div>
|
||
<div class="yorum-ad">Murat Kaya</div>
|
||
<div class="yorum-unvan">Fitness Antrenörü</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="yorum-kart gorunur-olmadan">
|
||
<div class="yorum-yildizlar">
|
||
<svg viewBox="0 0 24 24"><path d="M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z"/></svg>
|
||
<svg viewBox="0 0 24 24"><path d="M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z"/></svg>
|
||
<svg viewBox="0 0 24 24"><path d="M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z"/></svg>
|
||
<svg viewBox="0 0 24 24"><path d="M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z"/></svg>
|
||
<svg viewBox="0 0 24 24"><path d="M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z"/></svg>
|
||
</div>
|
||
<p class="yorum-metin">Tasarımı çok şık, iş toplantılarında da spor yaparken de göz dolduruyor. Bildirimler ve takvim entegrasyonu iş hayatımı ciddi rahatlattı.</p>
|
||
<div class="yorum-kisi">
|
||
<div class="yorum-avatar">SD</div>
|
||
<div>
|
||
<div class="yorum-ad">Selin Demir</div>
|
||
<div class="yorum-unvan">Yazılım Mühendisi</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- ============================================================
|
||
BÖLÜM 11: SIK SORULAN SORULAR
|
||
============================================================ -->
|
||
<section class="sss" id="sss">
|
||
<div class="kapsayici">
|
||
<div class="baslik-kabugu gorunur-olmadan">
|
||
<span class="rozet">SSS</span>
|
||
<h2>Sıkça Sorulan Sorular</h2>
|
||
<p>Merak ettikleriniz için aradığınız cevaplar burada.</p>
|
||
</div>
|
||
<div class="sss-liste">
|
||
<div class="sss-madde gorunur-olmadan">
|
||
<div class="sss-soru">
|
||
<span>NovaX Pro 2 su geçirir mi?</span>
|
||
<span class="sss-cevap-icon"><svg viewBox="0 0 24 24"><path d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z"/></svg></span>
|
||
</div>
|
||
<div class="sss-cevap"><p class="sss-cevap-ic">Evet, 5 ATM (50 metreye kadar) su direncine sahiptir. Yüzme dahil su sporlarında rahatlıkla kullanabilirsiniz. Derin dalış gibi yüksek basınçlı ortamlar için tavsiye edilmez.</p></div>
|
||
</div>
|
||
<div class="sss-madde gorunur-olmadan">
|
||
<div class="sss-soru">
|
||
<span>Pil ömrü ne kadar?</span>
|
||
<span class="sss-cevap-icon"><svg viewBox="0 0 24 24"><path d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z"/></svg></span>
|
||
</div>
|
||
<div class="sss-cevap"><p class="sss-cevap-ic">Tipik kullanımda 35 güne kadar, yoğun GPS kullanımında ise yaklaşık 15 saat kesintisiz spor takibi sunar. 10 dakikalık hızlı şarj ile 2 günlük kullanım elde edebilirsiniz.</p></div>
|
||
</div>
|
||
<div class="sss-madde gorunur-olmadan">
|
||
<div class="sss-soru">
|
||
<span>Telefonumla uyumlu mu?</span>
|
||
<span class="sss-cevap-icon"><svg viewBox="0 0 24 24"><path d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z"/></svg></span>
|
||
</div>
|
||
<div class="sss-cevap"><p class="sss-cevap-ic">Hem Android (7.0+) hem de iOS (13.0+) cihazlarla tam uyumludur. NovaX uygulaması üzerinden tüm ayarları yönetebilir ve verilerinizi eşitleyebilirsiniz.</p></div>
|
||
</div>
|
||
<div class="sss-madde gorunur-olmadan">
|
||
<div class="sss-soru">
|
||
<span>Garanti kapsamı nedir?</span>
|
||
<span class="sss-cevap-icon"><svg viewBox="0 0 24 24"><path d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z"/></svg></span>
|
||
</div>
|
||
<div class="sss-cevap"><p class="sss-cevap-ic">Ürünümüz tüm arızalar için 2 yıl resmi garanti kapsamındadır. İlk 14 gün içinde koşulsuz iade ve değişim desteği sağlanır. Ayrıca 7/24 teknik destek hattımız hizmetinizdedir.</p></div>
|
||
</div>
|
||
<div class="sss-madde gorunur-olmadan">
|
||
<div class="sss-soru">
|
||
<span>NFC ile temassız ödeme nasıl çalışır?</span>
|
||
<span class="sss-cevap-icon"><svg viewBox="0 0 24 24"><path d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z"/></svg></span>
|
||
</div>
|
||
<div class="sss-cevap"><p class="sss-cevap-ic">NovaX uygulaması üzerinden kredi kartınızı dijital olarak ekleyebilir, telefonunuzu yanınızda taşımadan benzettiğiniz kartlarla güvenli temassız ödemeler yapabilirsiniz.</p></div>
|
||
</div>
|
||
<div class="sss-madde gorunur-olmadan">
|
||
<div class="sss-soru">
|
||
<span>Topluluk verilerim gizli mi işleniyor?</span>
|
||
<span class="sss-cevap-icon"><svg viewBox="0 0 24 24"><path d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z"/></svg></span>
|
||
</div>
|
||
<div class="sss-cevap"><p class="sss-cevap-ic">Evet, sağlık verileriniz uçtan uca şifrelenir ve cihazınızdan asla izinsiz çıkmaz. Gizlilik politikamız KVKK ile tamamen uyumludur; verileriniz üçüncü kişilerle paylaşılmaz.</p></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- ============================================================
|
||
BÖLÜM 12: HAREKETE GEÇİRME (CTA) BANDI
|
||
============================================================ -->
|
||
<section class="cta">
|
||
<div class="kapsayici">
|
||
<div class="cta-icerik gorunur-olmadan">
|
||
<h2>Sağlığınızı bugün yükseltmeye başlayın</h2>
|
||
<p>NovaX Pro 2 ile hedefe ulaşmak artık çok daha kolay. Stoklarla sınırlı — hızlı davranın ve özel lansman indiriminden yararlanın.</p>
|
||
<div class="cta-dugme-grubu">
|
||
<a href="#fiyat" class="buton buton-acik">Hemen Sipariş Ver</a>
|
||
<a href="#iletisim" class="buton" style="border:2px solid #fff;color:#fff">Ürünü Sor</a>
|
||
</div>
|
||
<p class="cta-garanti">
|
||
<svg viewBox="0 0 24 24"><path d="M9 16.2L4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4z"/></svg>
|
||
14 gün iade · 2 yıl garanti · Ücretsiz kargo
|
||
</p>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- ============================================================
|
||
BÖLÜM 13: İLETİŞİM
|
||
============================================================ -->
|
||
<section class="iletisim" id="iletisim">
|
||
<div class="kapsayici">
|
||
<div class="iletisim-grid">
|
||
<div class="iletisim-bilgi">
|
||
<div class="baslik-kabugu" style="text-align:left">
|
||
<span class="rozet">İletişim</span>
|
||
<h2>Bizimle iletişime geçin</h2>
|
||
</div>
|
||
<p>Sorularınız için ekibimiz hafta içi 09:00-18:00 arası hizmetinizdedir. Ortalama yanıt süremiz 2 saattir.</p>
|
||
<div class="iletisim-kart-grup">
|
||
<div class="iletisim-kart">
|
||
<div class="iletisim-kart-ikon"><svg viewBox="0 0 24 24"><path d="M6.62 10.79c1.44 2.83 3.76 5.14 6.59 6.59l2.2-2.2c.27-.27.67-.36 1.02-.24 1.12.37 2.33.57 3.57.57.55 0 1 .45 1 1V20c0 .55-.45 1-1 1-9.39 0-17-7.61-17-17 0-.55.45-1 1-1h3.5c.55 0 1 .45 1 1 0 1.25.2 2.45.57 3.57.11.35.03.74-.25 1.02l-2.2 2.2z"/></svg></div>
|
||
<div>
|
||
<strong>Telefon</strong>
|
||
<span>+90 212 000 00 00</span>
|
||
</div>
|
||
</div>
|
||
<div class="iletisim-kart">
|
||
<div class="iletisim-kart-ikon"><svg viewBox="0 0 24 24"><path d="M20 4H4c-1.1 0-1.99.9-1.99 2L2 18c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zm0 4l-8 5-8-5V6l8 5 8-5v2z"/></svg></div>
|
||
<div>
|
||
<strong>E-posta</strong>
|
||
<span>destek@novax.com.tr</span>
|
||
</div>
|
||
</div>
|
||
<div class="iletisim-kart">
|
||
<div class="iletisim-kart-ikon"><svg viewBox="0 0 24 24"><path d="M12 2C8.13 2 5 5.13 5 9c0 5.25 7 13 7 13s7-7.75 7-13c0-3.87-3.13-7-7-7zm0 9.5c-1.38 0-2.5-1.12-2.5-2.5s1.12-2.5 2.5-2.5 2.5 1.12 2.5 2.5-1.12 2.5-2.5 2.5z"/></svg></div>
|
||
<div>
|
||
<strong>Adres</strong>
|
||
<span>Numex Teknoloji, İstanbul / Türkiye</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="iletisim-sosyal">
|
||
<a href="#" aria-label="Facebook"><svg viewBox="0 0 24 24"><path d="M9 8H6v4h3v12h5V12h3.642L18 8h-4V6.333C14 5.378 14.192 5 15.115 5H18V0h-3.808C10.596 0 9 1.583 9 4.615V8z"/></svg></a>
|
||
<a href="#" aria-label="Instagram"><svg viewBox="0 0 24 24"><path d="M12 2.163c3.204 0 3.584.012 4.85.07 3.252.148 4.771 1.691 4.919 4.919.058 1.265.069 1.645.069 4.849 0 3.205-.012 3.584-.069 4.849-.149 3.225-1.664 4.771-4.919 4.919-1.266.058-1.644.07-4.85.07-3.204 0-3.584-.012-4.849-.07-3.26-.149-4.771-1.699-4.919-4.92-.058-1.265-.07-1.644-.07-4.849 0-3.204.013-3.583.07-4.849.149-3.227 1.664-4.771 4.919-4.919 1.266-.057 1.645-.069 4.849-.069zm0-2.163c-3.259 0-3.667.014-4.947.072-4.358.2-6.78 2.618-6.98 6.98-.059 1.281-.073 1.689-.073 4.948 0 3.259.014 3.668.072 4.948.2 4.358 2.618 6.78 6.98 6.98 1.281.058 1.689.072 4.948.072 3.259 0 3.668-.014 4.948-.072 4.354-.2 6.782-2.618 6.979-6.98.059-1.28.073-1.689.073-4.948 0-3.259-.014-3.667-.072-4.947-.196-4.354-2.617-6.78-6.979-6.98-1.281-.059-1.69-.073-4.949-.073zm0 5.838c-3.403 0-6.162 2.759-6.162 6.162s2.759 6.163 6.162 6.163 6.162-2.759 6.162-6.163c0-3.403-2.759-6.162-6.162-6.162zm0 10.162c-2.209 0-4-1.79-4-4 0-2.209 1.791-4 4-4s4 1.791 4 4c0 2.21-1.791 4-4 4zm6.406-11.845c-.796 0-1.441.645-1.441 1.44s.645 1.44 1.441 1.44c.795 0 1.439-.645 1.439-1.44s-.644-1.44-1.439-1.44z"/></svg></a>
|
||
<a href="#" aria-label="X / Twitter"><svg viewBox="0 0 24 24"><path d="M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231zm-1.161 17.52h1.833L7.084 4.126H5.117z"/></svg></a>
|
||
<a href="#" aria-label="YouTube"><svg viewBox="0 0 24 24"><path d="M23.498 6.186a3.016 3.016 0 00-2.122-2.136C19.505 3.545 12 3.545 12 3.545s-7.505 0-9.377.505A3.017 3.017 0 00.502 6.186C0 8.07 0 12 0 12s0 3.93.502 5.814a3.016 3.016 0 002.122 2.136c1.871.505 9.376.505 9.376.505s7.505 0 9.377-.505a3.015 3.015 0 002.122-2.136C24 15.93 24 12 24 12s0-3.93-.502-5.814zM9.545 15.568V8.432L15.818 12l-6.273 3.568z"/></svg></a>
|
||
</div>
|
||
</div>
|
||
<div class="iletisim-form gorunur-olmadan">
|
||
<form id="iletisimForm">
|
||
<div class="form-ikili">
|
||
<div class="form-grup">
|
||
<label class="form-etiket" for="ad">Ad Soyad</label>
|
||
<input class="form-alan" type="text" id="ad" placeholder="Adınız Soyadınız" required>
|
||
</div>
|
||
<div class="form-grup">
|
||
<label class="form-etiket" for="eposta">E-posta</label>
|
||
<input class="form-alan" type="email" id="eposta" placeholder="ornek@eposta.com" required>
|
||
</div>
|
||
</div>
|
||
<div class="form-grup">
|
||
<label class="form-etiket" for="konu">Konu</label>
|
||
<select class="form-alan" id="konu">
|
||
<option>Ürün hakkında soru</option>
|
||
<option>Sipariş durumu</option>
|
||
<option>İade / Değişim</option>
|
||
<option>Teknik destek</option>
|
||
<option>Kurumsal / B2B</option>
|
||
<option>Diğer</option>
|
||
</select>
|
||
</div>
|
||
<div class="form-grup">
|
||
<label class="form-etiket" for="mesaj">Mesajınız</label>
|
||
<textarea class="form-alan" id="mesaj" placeholder="Size nasıl yardımcı olabiliriz?"></textarea>
|
||
</div>
|
||
<button type="submit" class="form-gonder">Mesajı Gönder</button>
|
||
<div class="form-basari" id="formBasari">✓ Mesajınız başarıyla gönderildi. En kısa sürede size dönüş yapacağız.</div>
|
||
</form>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- ============================================================
|
||
BÖLÜM 14: FOOTER
|
||
============================================================ -->
|
||
<footer class="footer">
|
||
<div class="kapsayici">
|
||
<div class="footer-grid">
|
||
<div class="footer-brand footer-kolon">
|
||
<a href="#" class="logo">
|
||
<span class="logo-ikon">N</span>
|
||
<span>NovaX</span>
|
||
</a>
|
||
<p>Sağlığınız ve performansınız için tasarlanmış, geleceğin teknolojisi akıllı saat. Türkiye'nin yerli teknoloji gücüyle hayata geçti.</p>
|
||
<div class="iletisim-sosyal">
|
||
<a href="#" aria-label="Facebook"><svg viewBox="0 0 24 24"><path d="M9 8H6v4h3v12h5V12h3.642L18 8h-4V6.333C14 5.378 14.192 5 15.115 5H18V0h-3.808C10.596 0 9 1.583 9 4.615V8z"/></svg></a>
|
||
<a href="#" aria-label="Instagram"><svg viewBox="0 0 24 24"><path d="M7.3 12.5c0-2.6 2-4.7 4.6-4.9l.1-.9-.9-.1c-3.2.2-5.7 2.9-5.7 6 0 2.5 1.5 4.6 3.6 5.5l.7-1.1c-1.5-.7-2.4-1.9-2.4-3.5zm10.4 0c0 2-1.6 3.7-3.6 3.9l-.1.9.9.1c3.2-.2 5.7-2.9 5.7-6 0-2.5-1.5-4.6-3.6-5.5l-.7 1.1c1.5.7 2.4 1.9 2.4 3.5zM12 5.5l-.9 1c.3.2.6.5.9.9.3-.4.6-.7.9-.9l-.9-1zM9.4 12c0 2 1.1 3.7 2.6 3.7s2.6-1.7 2.6-3.7-1.1-3.7-2.6-3.7-2.6 1.7-2.6 3.7z"/></svg></a>
|
||
<a href="#" aria-label="X / Twitter"><svg viewBox="0 0 24 24"><path d="M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231zm-1.161 17.52h1.833L7.084 4.126H5.117z"/></svg></a>
|
||
</div>
|
||
</div>
|
||
<div class="footer-kolon">
|
||
<h4>Ürünler</h4>
|
||
<ul>
|
||
<li><a href="#fiyat">NovaX Lite</a></li>
|
||
<li><a href="#fiyat">NovaX Pro 2</a></li>
|
||
<li><a href="#fiyat">NovaX Ultra</a></li>
|
||
<li><a href="#fiyat">Aksesuarlar</a></li>
|
||
<li><a href="#teknik">Karşılaştır</a></li>
|
||
</ul>
|
||
</div>
|
||
<div class="footer-kolon">
|
||
<h4>Şirket</h4>
|
||
<ul>
|
||
<li><a href="#">Hakkımızda</a></li>
|
||
<li><a href="#">Kariyer</a></li>
|
||
<li><a href="#">Basın</a></li>
|
||
<li><a href="#">Yatırımcı</a></li>
|
||
<li><a href="#iletisim">İletişim</a></li>
|
||
</ul>
|
||
</div>
|
||
<div class="footer-kolon">
|
||
<h4>Destek</h4>
|
||
<ul>
|
||
<li><a href="#sss">Yardım Merkezi</a></li>
|
||
<li><a href="#sss">Kullanım Kılavuzu</a></li>
|
||
<li><a href="#sss">Garanti & Servis</a></li>
|
||
<li><a href="#sss">Kargo Takibi</a></li>
|
||
<li><a href="#sss">İade Politikası</a></li>
|
||
</ul>
|
||
</div>
|
||
<div class="footer-kolon">
|
||
<h4>Yasal</h4>
|
||
<ul>
|
||
<li><a href="#">Gizlilik Politikası</a></li>
|
||
<li><a href="#">KVKK</a></li>
|
||
<li><a href="#">Kullanım Şartları</a></li>
|
||
<li><a href="#">Çerez Politikası</a></li>
|
||
<li><a href="#">Yasal Uyarı</a></li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
<div class="footer-alt">
|
||
<span>© 2026 NovaX Teknoloji. Tüm hakları saklıdır. Türkiye'de üretildi.</span>
|
||
<div class="footer-yasal">
|
||
<a href="#">Gizlilik</a>
|
||
<a href="#">Şartlar</a>
|
||
<a href="#">KVKK</a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</footer>
|
||
|
||
<!-- ============================================================
|
||
BÖLÜM 15: MODAL (SEPET) + ÇEREZ + YUKARI ÇIK
|
||
============================================================ -->
|
||
<div class="modal-arkaplan" id="sepetModal">
|
||
<div class="modal-kutu" role="dialog" aria-modal="true" aria-labelledby="sepetBaslik">
|
||
<button class="modal-kapat" id="sepetKapat" aria-label="Sepeti kapat">
|
||
<svg viewBox="0 0 24 24"><path d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"/></svg>
|
||
</button>
|
||
<h3 class="modal-baslik" id="sepetBaslik">Sepetiniz</h3>
|
||
<div id="sepetIcerik">
|
||
<div class="sepet-bos">Sepetiniz henüz boş. Haydi NovaX ürünlerinizi keşfedin!</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="cerez-bildirimi" id="cerezBildirimi">
|
||
<p>Veri güvenliğinizi önemsiyoruz. Web sitemizde çerezler aracılığıyla deneyiminizi iyileştiriyoruz. Detaylar için çerez politikamızı inceleyin.</p>
|
||
<div class="cerez-dugme-grup">
|
||
<button class="cerez-dugme cerez-onay" id="cerezOnay">Kabul Et</button>
|
||
<button class="cerez-dugme cerez-red" id="cerezRed">Reddet</button>
|
||
</div>
|
||
</div>
|
||
|
||
<a href="#" class="float-sapka" id="yukariCik" aria-label="Yukarı çık">
|
||
<svg viewBox="0 0 24 24"><path d="M7.41 15.41L12 10.83l4.59 4.58L18 14l-6-6-6 6 1.41 1.41z"/></svg>
|
||
</a>
|
||
|
||
<!-- ============================================================
|
||
BÖLÜM 16: JAVASCRIPT — TÜM ETKİLEŞİMLER
|
||
============================================================ -->
|
||
<script>
|
||
/* ------------------------------------------------------------
|
||
1) Canlı Saat & Tarih (Hero ürün ekranı)
|
||
------------------------------------------------------------ */
|
||
function saatGuncelle(){
|
||
const simdi = new Date();
|
||
const saatEl = document.getElementById('canliSaat');
|
||
const tarihEl = document.getElementById('canliTarih');
|
||
if(!saatEl || !tarihEl) return;
|
||
const saat = String(simdi.getHours()).padStart(2,'0');
|
||
const dakika = String(simdi.getMinutes()).padStart(2,'0');
|
||
const saniye = String(simdi.getSeconds()).padStart(2,'0');
|
||
saatEl.textContent = saat + ':' + dakika + ':' + saniye;
|
||
const gunler = ['Pazar','Pazartesi','Salı','Çarşamba','Perşembe','Cuma','Cumartesi'];
|
||
const aylar = ['Oca','Şub','Mar','Nis','May','Haz','Tem','Ağu','Eyl','Eki','Kas','Ara'];
|
||
tarihEl.textContent = gunler[simdi.getDay()] + ', ' + simdi.getDate() + ' ' + aylar[simdi.getMonth()];
|
||
}
|
||
setInterval(saatGuncelle, 1000);
|
||
saatGuncelle();
|
||
|
||
/* ------------------------------------------------------------
|
||
2) Canlı (simüle) Nabız göstergesi
|
||
------------------------------------------------------------ */
|
||
function nabizGuncelle(){
|
||
const el = document.getElementById('canliNabiz');
|
||
if(!el) return;
|
||
const deger = Math.floor(64 + Math.random() * 22);
|
||
el.textContent = 'Nabız: ' + deger + ' bpm';
|
||
}
|
||
setInterval(nabizGuncelle, 2500);
|
||
nabizGuncelle();
|
||
|
||
/* ------------------------------------------------------------
|
||
3) Sayı Sayaç Animasyonları (istatistikler)
|
||
------------------------------------------------------------ */
|
||
function sayiSaydir(){
|
||
const elemanlar = document.querySelectorAll('[data-sayac]');
|
||
elemanlar.forEach(function(el){
|
||
const hedef = parseInt(el.getAttribute('data-sayac'), 10);
|
||
const sure = 1800;
|
||
const baslangic = performance.now();
|
||
function adim(now){
|
||
const gecen = now - baslangic;
|
||
const oran = Math.min(gecen / sure, 1);
|
||
const yumusak = 1 - Math.pow(1 - oran, 3);
|
||
el.textContent = Math.floor(hedef * yumusak).toLocaleString('tr-TR');
|
||
if(oran < 1) requestAnimationFrame(adim);
|
||
}
|
||
requestAnimationFrame(adim);
|
||
});
|
||
}
|
||
|
||
/* ------------------------------------------------------------
|
||
4) Kaydırarak Görünür Olma Animasyonu (IntersectionObserver)
|
||
------------------------------------------------------------ */
|
||
const gizliElemanlar = document.querySelectorAll('.gorunur-olmadan');
|
||
const gozlemci = new IntersectionObserver(function(girdiler){
|
||
girdiler.forEach(function(girdi){
|
||
if(girdi.isIntersecting){
|
||
girdi.target.classList.add('gorunen');
|
||
girdi.target.classList.remove('gorunur-olmadan');
|
||
gozlemci.unobserve(girdi.target);
|
||
if(girdi.target.querySelector && girdi.target.querySelector('[data-sayac]')){
|
||
sayiSaydir();
|
||
}
|
||
}
|
||
});
|
||
}, { threshold: 0.15 });
|
||
|
||
gizliElemanlar.forEach(function(el){
|
||
gozlemci.observe(el);
|
||
});
|
||
|
||
// Hero istatistikleri de hemen başlatılsın
|
||
sayiSaydir();
|
||
|
||
/* ------------------------------------------------------------
|
||
5) Navbar Scroll Gölgesi
|
||
------------------------------------------------------------ */
|
||
const navbar = document.querySelector('.navbar');
|
||
window.addEventListener('scroll', function(){
|
||
if(!navbar) return;
|
||
if(window.scrollY > 40){
|
||
navbar.classList.add('golgelendi');
|
||
} else {
|
||
navbar.classList.remove('golgelendi');
|
||
}
|
||
});
|
||
|
||
/* ------------------------------------------------------------
|
||
6) Mobil Menü Aç/Kapa
|
||
------------------------------------------------------------ */
|
||
const mobilMenuDugme = document.getElementById('mobilMenuDugme');
|
||
const navLinkler = document.getElementById('navLinkler');
|
||
if(mobilMenuDugme && navLinkler){
|
||
mobilMenuDugme.addEventListener('click', function(){
|
||
navLinkler.classList.toggle('acik');
|
||
});
|
||
navLinkler.querySelectorAll('a').forEach(function(link){
|
||
link.addEventListener('click', function(){
|
||
navLinkler.classList.remove('acik');
|
||
});
|
||
});
|
||
}
|
||
|
||
/* ------------------------------------------------------------
|
||
7) Tema Değiştirici (Karanlık / Açık Mod)
|
||
------------------------------------------------------------ */
|
||
const temaDugme = document.getElementById('temaDugme');
|
||
function temaUygula(){
|
||
const karanlik = document.body.classList.toggle('karanlik');
|
||
localStorage.setItem('novax-tema', karanlik ? 'karanlik' : 'acik');
|
||
}
|
||
if(temaDugme){
|
||
temaDugme.addEventListener('click', temaUygula);
|
||
if(localStorage.getItem('novax-tema') === 'karanlik'){
|
||
document.body.classList.add('karanlik');
|
||
}
|
||
}
|
||
|
||
/* ------------------------------------------------------------
|
||
8) Sepet Mantığı (LocalStorage destekli)
|
||
------------------------------------------------------------ */
|
||
let sepet = [];
|
||
try {
|
||
const kayitli = localStorage.getItem('novax-sepet');
|
||
if(kayitli) sepet = JSON.parse(kayitli);
|
||
} catch(e){ sepet = []; }
|
||
|
||
function sepetKaydet(){
|
||
localStorage.setItem('novax-sepet', JSON.stringify(sepet));
|
||
}
|
||
function sepetSayaciGuncelle(){
|
||
const sayac = document.getElementById('sepetSayac');
|
||
if(sayac) sayac.textContent = sepet.length;
|
||
}
|
||
function sepetGoster(){
|
||
const alan = document.getElementById('sepetIcerik');
|
||
const modal = document.getElementById('sepetModal');
|
||
if(!alan || !modal) return;
|
||
if(sepet.length === 0){
|
||
alan.innerHTML = '<div class="sepet-bos">Sepetiniz henüz boş. Haydi NovaX ürünlerinizi keşfedin!</div>';
|
||
} else {
|
||
let html = '';
|
||
let toplam = 0;
|
||
sepet.forEach(function(urun, i){
|
||
toplam += urun.fiyat;
|
||
html += '<div class="sepet-girdi">' +
|
||
'<span class="sepet-girdi-ad">' + urun.ad + '</span>' +
|
||
'<span class="sepet-girdi-fiyat">₺' + urun.fiyat.toLocaleString('tr-TR') + '</span>' +
|
||
'<button class="modal-kapat" style="position:static;width:30px;height:30px" onclick="sepetttenCikar(' + i + ')" aria-label="Kaldır">' +
|
||
'<svg viewBox="0 0 24 24"><path d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"/></svg>' +
|
||
'</button></div>';
|
||
});
|
||
html += '<div class="sepet-toplam"><span>Toplam</span><span>₺' + toplam.toLocaleString('tr-TR') + '</span></div>';
|
||
html += '<a href="#iletisim" class="buton buton-birincil" style="width:100%;text-align:center" onclick="sepetKapat()">Siparişi Tamamla</a>';
|
||
alan.innerHTML = html;
|
||
}
|
||
modal.classList.add('acik');
|
||
}
|
||
function sepetttenCikar(i){
|
||
sepet.splice(i, 1);
|
||
sepetKaydet();
|
||
sepetSayaciGuncelle();
|
||
sepetGoster();
|
||
}
|
||
function sepetKapat(){
|
||
const modal = document.getElementById('sepetModal');
|
||
if(modal) modal.classList.remove('acik');
|
||
}
|
||
|
||
const sepetDugme = document.getElementById('sepetDugme');
|
||
const sepetKapatBtn = document.getElementById('sepetKapat');
|
||
if(sepetDugme) sepetDugme.addEventListener('click', sepetGoster);
|
||
if(sepetKapatBtn) sepetKapatBtn.addEventListener('click', sepetKapat);
|
||
|
||
// "Sepete Ekle" butonları
|
||
document.querySelectorAll('[data-urun]').forEach(function(btn){
|
||
btn.addEventListener('click', function(){
|
||
const ad = btn.getAttribute('data-urun');
|
||
const fiyat = parseInt(btn.getAttribute('data-fiyat'), 10);
|
||
sepet.push({ ad: ad, fiyat: fiyat });
|
||
sepetKaydet();
|
||
sepetSayaciGuncelle();
|
||
// Küçük geri bildirim
|
||
const orijinal = btn.textContent;
|
||
btn.textContent = '✓ Eklendi!';
|
||
setTimeout(function(){ btn.textContent = orijinal; }, 1300);
|
||
sepetGoster();
|
||
});
|
||
});
|
||
|
||
// Modal arka plana tıklayınca kapat
|
||
const sepetModal = document.getElementById('sepetModal');
|
||
if(sepetModal){
|
||
sepetModal.addEventListener('click', function(e){
|
||
if(e.target === sepetModal) sepetModal.classList.remove('acik');
|
||
});
|
||
}
|
||
|
||
sepetSayaciGuncelle();
|
||
|
||
/* ------------------------------------------------------------
|
||
9) SSS Akordeon
|
||
------------------------------------------------------------ */
|
||
document.querySelectorAll('.sss-soru').forEach(function(soru){
|
||
soru.addEventListener('click', function(){
|
||
const madde = soru.parentElement;
|
||
const acikMu = madde.classList.contains('acik');
|
||
// Diğerlerini kapat
|
||
document.querySelectorAll('.sss-madde.acik').forEach(function(d){
|
||
d.classList.remove('acik');
|
||
});
|
||
if(!acikMu){
|
||
madde.classList.add('acik');
|
||
}
|
||
});
|
||
});
|
||
|
||
/* ------------------------------------------------------------
|
||
10) İletişim Form Gönderimi (simülasyon)
|
||
------------------------------------------------------------ */
|
||
const iletisimForm = document.getElementById('iletisimForm');
|
||
const formBasari = document.getElementById('formBasari');
|
||
if(iletisimForm){
|
||
iletisimForm.addEventListener('submit', function(e){
|
||
e.preventDefault();
|
||
if(formBasari){
|
||
formBasari.classList.add('goster');
|
||
setTimeout(function(){ formBasari.classList.remove('goster'); }, 5000);
|
||
}
|
||
iletisimForm.reset();
|
||
});
|
||
}
|
||
|
||
/* ------------------------------------------------------------
|
||
11) Çerez Bildirimi
|
||
------------------------------------------------------------ */
|
||
const cerezBildirimi = document.getElementById('cerezBildirimi');
|
||
if(cerezBildirimi){
|
||
if(localStorage.getItem('novax-cerez') === 'onaylandi' || localStorage.getItem('novax-cerez') === 'reddedildi'){
|
||
cerezBildirimi.style.display = 'none';
|
||
} else {
|
||
setTimeout(function(){ cerezBildirimi.classList.add('goster'); }, 1800);
|
||
}
|
||
const cerezOnay = document.getElementById('cerezOnay');
|
||
const cerezRed = document.getElementById('cerezRed');
|
||
if(cerezOnay) cerezOnay.addEventListener('click', function(){
|
||
localStorage.setItem('novax-cerez', 'onaylandi');
|
||
cerezBildirimi.classList.remove('goster');
|
||
});
|
||
if(cerezRed) cerezRed.addEventListener('click', function(){
|
||
localStorage.setItem('novax-cerez', 'reddedildi');
|
||
cerezBildirimi.classList.remove('goster');
|
||
});
|
||
}
|
||
|
||
/* ------------------------------------------------------------
|
||
12) Yukarı Çık Butonu (yumuşak kaydırma)
|
||
------------------------------------------------------------ */
|
||
const yukariCik = document.getElementById('yukariCik');
|
||
if(yukariCik){
|
||
yukariCik.addEventListener('click', function(e){
|
||
e.preventDefault();
|
||
window.scrollTo({ top: 0, behavior: 'smooth' });
|
||
});
|
||
}
|
||
|
||
/* ------------------------------------------------------------
|
||
13) Aktif Nav Bağlantısını Vurgula (scroll-spy)
|
||
------------------------------------------------------------ */
|
||
const bolumler = document.querySelectorAll('section[id]');
|
||
window.addEventListener('scroll', function(){
|
||
const pozisyon = window.scrollY + 120;
|
||
bolumler.forEach(function(bolum){
|
||
const ust = bolum.offsetTop;
|
||
const alt = ust + bolum.offsetHeight;
|
||
if(pozisyon >= ust && pozisyon < alt){
|
||
navLinkler.querySelectorAll('a').forEach(function(a){
|
||
const hedef = a.getAttribute('href') === '#' + bolum.id;
|
||
a.style.color = hedef ? 'var(--renk-birincil)' : '';
|
||
a.style.fontWeight = hedef ? '700' : '';
|
||
});
|
||
if(bolum.id === 'ozellikler' && navLinkler){
|
||
// hero istatistikleri tekrar tetikleme gerektirmez
|
||
}
|
||
}
|
||
});
|
||
});
|
||
|
||
console.log('%cNovaX Pro 2 — ürün sayfası yüklendi 🚀', 'color:#2563eb;font-weight:bold;font-size:14px');
|
||
</script>
|
||
|
||
</body>
|
||
</html>
|