*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif; background: #fff; color: #111; font-size: 15px; line-height: 1.6; -webkit-font-smoothing: antialiased; }
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; }
button { font-family: inherit; cursor: pointer; } :root {
--siyah: #111111;
--beyaz: #ffffff;
--bej: #f5f4f2;
--bej2: #ece9e4;
--gri: #888888;
--gri2: #cccccc;
--border: #e8e6e1;
--yesil-wa: #25D366;
--radius: 10px;
--radius-sm: 6px;
--radius-pill: 100px;
--transition: 0.2s ease;
--max-w: 1200px;
--header-h: 64px;
} .btn {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 12px 24px;
border-radius: var(--radius-pill);
font-size: 14px;
font-weight: 500;
border: none;
cursor: pointer;
transition: var(--transition);
text-decoration: none;
white-space: nowrap;
}
.btn-beyaz { background: #fff; color: #111; }
.btn-beyaz:hover { background: #f0efed; }
.btn-siyah { background: #111; color: #fff; }
.btn-siyah:hover { background: #333; }
.btn-wa { background: var(--yesil-wa); color: #fff; }
.btn-wa:hover { background: #1ebe59; }
.btn-outline { background: transparent; color: #fff; border: 1px solid rgba(255,255,255,0.3); }
.btn-outline:hover { background: rgba(255,255,255,0.1); } .site-header {
position: sticky;
top: 0;
z-index: 1000;
background: var(--siyah);
border-bottom: 1px solid rgba(255,255,255,0.07);
height: var(--header-h);
}
.header-inner {
max-width: var(--max-w);
margin: 0 auto;
padding: 0 1.5rem;
height: 100%;
display: flex;
align-items: center;
gap: 2rem;
}
.site-logo { display: flex; align-items: center; flex-shrink: 0; }
.site-logo img { width: 130px; }
.logo-text { font-size: 18px; font-weight: 600; color: #fff; letter-spacing: -0.02em; }
.main-nav { flex: 1; }
.nav-list { display: flex; align-items: center; gap: 2px; }
.nav-item { position: relative; }
.nav-link {
display: flex;
align-items: center;
gap: 5px;
padding: 8px 14px;
font-size: 14px;
color: rgba(255,255,255,0.65);
border-radius: var(--radius-sm);
transition: var(--transition);
background: none;
border: none;
white-space: nowrap;
}
.nav-link:hover, .nav-toggle[aria-expanded="true"] { color: #fff; background: rgba(255,255,255,0.08); }
.icon-chevron {
display: inline-block;
width: 10px; height: 10px;
border-right: 1.5px solid currentColor;
border-bottom: 1.5px solid currentColor;
transform: rotate(45deg) translateY(-2px);
transition: var(--transition);
}
.nav-toggle[aria-expanded="true"] .icon-chevron { transform: rotate(-135deg) translateY(-2px); } .mega-menu {
display: none;
position: absolute;
top: calc(100% + 8px);
left: 0;
background: #fff;
border: 1px solid var(--border);
border-radius: var(--radius);
box-shadow: 0 8px 32px rgba(0,0,0,0.12);
min-width: 380px;
z-index: 100;
}
.has-dropdown:hover .mega-menu,
.has-dropdown:focus-within .mega-menu { display: block; }
.mega-inner { display: flex; gap: 0; padding: 1.25rem; }
.mega-col { flex: 1; padding: 0 1rem; }
.mega-col:first-child { padding-left: 0; border-right: 1px solid var(--border); }
.mega-col:last-child { padding-right: 0; }
.mega-baslik { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em; color: var(--gri); display: block; margin-bottom: 10px; }
.mega-col ul li { margin-bottom: 2px; }
.mega-col ul li a { font-size: 14px; color: #333; padding: 5px 8px; display: block; border-radius: var(--radius-sm); transition: var(--transition); }
.mega-col ul li a:hover { background: var(--bej); color: #111; }
.header-actions { display: flex; align-items: center; gap: 10px; margin-left: auto; }
.header-tel { display: flex; align-items: center; gap: 6px; font-size: 13px; color: rgba(255,255,255,0.6); transition: var(--transition); }
.header-tel:hover { color: #fff; }
.btn-wa-header { display: flex; align-items: center; gap: 7px; background: var(--yesil-wa); color: #fff; font-size: 13px; font-weight: 500; padding: 8px 16px; border-radius: var(--radius-pill); transition: var(--transition); }
.btn-wa-header:hover { background: #1ebe59; }
.hamburger { display: none; flex-direction: column; gap: 5px; background: none; border: none; padding: 4px; }
.hamburger span { display: block; width: 22px; height: 2px; background: #fff; border-radius: 2px; transition: var(--transition); } .teklif-overlay {
position: fixed;
inset: 0;
background: rgba(0,0,0,0.6);
z-index: 9999;
display: flex;
align-items: center;
justify-content: center;
opacity: 0;
pointer-events: none;
transition: opacity 0.25s ease;
padding: 1rem;
}
.teklif-overlay.aktif { opacity: 1; pointer-events: all; }
.teklif-modal {
background: #fff;
border-radius: var(--radius);
max-width: 480px;
width: 100%;
position: relative;
transform: translateY(16px);
transition: transform 0.25s ease;
overflow: hidden;
}
.teklif-overlay.aktif .teklif-modal { transform: translateY(0); }
.teklif-kapat {
position: absolute;
top: 14px; right: 16px;
background: none;
border: none;
font-size: 24px;
color: var(--gri);
line-height: 1;
padding: 4px;
transition: var(--transition);
z-index: 1;
}
.teklif-kapat:hover { color: #111; }
.teklif-modal-icerik { padding: 2rem; }
.teklif-modal-icerik h2 { font-size: 20px; font-weight: 600; margin-bottom: 4px; letter-spacing: -0.02em; }
.teklif-alt { font-size: 13px; color: var(--gri); margin-bottom: 1.5rem; }
.form-group { margin-bottom: 14px; }
.form-group label { display: block; font-size: 13px; font-weight: 500; margin-bottom: 5px; color: #333; }
.zorunlu { color: #c0392b; }
.form-group input,
.form-group textarea {
width: 100%;
padding: 10px 12px;
border: 1px solid var(--border);
border-radius: var(--radius-sm);
font-family: inherit;
font-size: 14px;
color: #111;
background: #fff;
transition: border-color var(--transition);
outline: none;
resize: vertical;
}
.form-group input:focus,
.form-group textarea:focus { border-color: #111; }
.btn-teklif-gonder {
width: 100%;
padding: 12px;
background: #111;
color: #fff;
border: none;
border-radius: var(--radius-sm);
font-size: 14px;
font-weight: 500;
cursor: pointer;
transition: var(--transition);
margin-top: 4px;
}
.btn-teklif-gonder:hover { background: #333; }
.teklif-sonuc { margin-top: 12px; font-size: 13px; padding: 10px 12px; border-radius: var(--radius-sm); display: none; }
.teklif-sonuc.basarili { background: #e8f5e9; color: #2e7d32; display: block; }
.teklif-sonuc.hata { background: #ffebee; color: #c62828; display: block; } .hero-section { background: var(--siyah); padding: 5rem 1.5rem 4rem; overflow: hidden; }
.hero-inner { max-width: var(--max-w); margin: 0 auto; display: grid; grid-template-columns: 1fr 1fr; gap: 4rem; align-items: center; }
.hero-eyebrow { font-size: 12px; font-weight: 500; letter-spacing: 0.08em; color: rgba(255,255,255,0.4); margin-bottom: 1rem; }
.hero-baslik { font-size: clamp(32px, 5vw, 52px); font-weight: 700; color: #fff; line-height: 1.1; letter-spacing: -0.03em; margin-bottom: 1.25rem; }
.hero-baslik span { color: rgba(255,255,255,0.5); }
.hero-alt { font-size: 16px; color: rgba(255,255,255,0.55); line-height: 1.7; max-width: 480px; margin-bottom: 2rem; }
.hero-aksiyonlar { display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 2.5rem; }
.hero-istatistikler { display: flex; gap: 2rem; flex-wrap: wrap; padding-top: 2rem; border-top: 1px solid rgba(255,255,255,0.08); }
.hero-stat strong { display: block; font-size: 26px; font-weight: 700; color: #fff; letter-spacing: -0.03em; line-height: 1; }
.hero-stat span { font-size: 12px; color: rgba(255,255,255,0.4); text-transform: uppercase; letter-spacing: 0.05em; } .hero-gorsel { display: flex; justify-content: center; }
.hero-app-mockup {
background: #1a1a1a;
border: 1px solid rgba(255,255,255,0.1);
border-radius: 16px;
padding: 1.5rem;
width: 280px;
font-size: 13px;
}
.app-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 1.25rem; padding-bottom: 1rem; border-bottom: 1px solid rgba(255,255,255,0.08); }
.app-baslik { font-weight: 500; color: #fff; font-size: 14px; }
.app-durum { font-size: 12px; }
.app-durum.aktif { color: #4caf50; }
.app-satirlar { display: flex; flex-direction: column; gap: 10px; margin-bottom: 1.25rem; }
.app-satir { display: flex; justify-content: space-between; align-items: center; }
.app-satir span:first-child { color: rgba(255,255,255,0.5); }
.durum-yesil { color: #4caf50; font-weight: 500; }
.durum-gri { color: rgba(255,255,255,0.3); }
.app-footer { font-size: 11px; color: rgba(255,255,255,0.25); padding-top: 1rem; border-top: 1px solid rgba(255,255,255,0.06); } .info-bant { background: #fff; border-bottom: 1px solid var(--border); }
.bant-inner { max-width: var(--max-w); margin: 0 auto; padding: 0 1.5rem; display: flex; align-items: center; justify-content: center; gap: 3rem; flex-wrap: wrap; }
.bant-item { display: flex; align-items: center; gap: 8px; font-size: 13px; color: #555; padding: 14px 0; font-weight: 500; }
.bant-item svg { color: #111; flex-shrink: 0; } .section-inner { max-width: var(--max-w); margin: 0 auto; padding: 5rem 1.5rem; }
.section-baslik { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 2rem; gap: 1rem; }
.section-baslik.ortali { flex-direction: column; align-items: center; text-align: center; }
.section-baslik h2 { font-size: clamp(22px, 3vw, 32px); font-weight: 700; letter-spacing: -0.02em; }
.section-baslik p { font-size: 15px; color: var(--gri); margin-top: 8px; }
.tumu-link { font-size: 14px; color: var(--gri); white-space: nowrap; transition: var(--transition); }
.tumu-link:hover { color: #111; } .kategoriler-section { background: var(--bej); }
.kategoriler-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 1rem; }
.kat-kart {
display: flex;
align-items: center;
gap: 14px;
background: #fff;
border: 1px solid var(--border);
border-radius: var(--radius);
padding: 1.1rem 1.25rem;
transition: var(--transition);
}
.kat-kart:hover { border-color: #bbb; transform: translateY(-1px); }
.kat-ikon { width: 48px; height: 48px; background: var(--bej); border-radius: 10px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.kat-bilgi { flex: 1; }
.kat-bilgi strong { display: block; font-size: 14px; font-weight: 600; margin-bottom: 2px; }
.kat-bilgi span { font-size: 12px; color: var(--gri); }
.kat-ok { color: var(--gri2); flex-shrink: 0; }
.kat-kart:hover .kat-ok { color: #111; } .urun-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 1.25rem; }
.urun-kart {
background: #fff;
border: 1px solid var(--border);
border-radius: var(--radius);
overflow: hidden;
display: flex;
flex-direction: column;
transition: var(--transition);
}
.urun-kart:hover { border-color: #bbb; transform: translateY(-2px); }
.urun-kart-gorsel {
position: relative;
background: var(--bej);
height: 190px;
display: flex;
align-items: center;
justify-content: center;
padding: 1.25rem;
overflow: hidden;
}
.urun-kart-gorsel img { width: 100%; height: 100%; object-fit: contain; transition: transform 0.35s ease; }
.urun-kart:hover .urun-kart-gorsel img { transform: scale(1.05); }
.gorsel-placeholder { color: var(--bej2); }
.urun-rozet {
position: absolute;
top: 10px; left: 10px;
font-size: 10px;
font-weight: 600;
padding: 3px 8px;
border-radius: var(--radius-pill);
line-height: 1.4;
z-index: 1;
}
.rozet-indirim { background: #111; color: #fff; }
.rozet-badge { background: #f0f0ee; color: #555; border: 1px solid var(--border); top: auto; bottom: 10px; }
.urun-kart-govde { padding: 1rem; flex: 1; display: flex; flex-direction: column; }
.urun-kart-kategori { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.07em; color: var(--gri); margin-bottom: 5px; display: block; }
.urun-kart-adi { font-size: 14px; font-weight: 600; line-height: 1.35; margin-bottom: 6px; letter-spacing: -0.01em; }
.urun-kart-adi a { color: #111; }
.urun-kart-adi a:hover { text-decoration: underline; }
.urun-kart-aciklama { font-size: 12px; color: var(--gri); line-height: 1.5; margin-bottom: 12px; flex: 1; }
.urun-kart-alt { margin-top: auto; padding-top: 12px; border-top: 1px solid var(--border); display: flex; align-items: flex-end; justify-content: space-between; gap: 8px; }
.urun-fiyat-blok {}
.fiyat-eski { display: block; font-size: 11px; color: var(--gri2); text-decoration: line-through; line-height: 1; }
.fiyat-ana { display: block; font-size: 19px; font-weight: 700; letter-spacing: -0.02em; line-height: 1.1; }
.fiyat-tl { display: block; font-size: 11px; color: var(--gri); }
.stok-durum { display: inline-block; font-size: 10px; font-weight: 600; padding: 2px 7px; border-radius: var(--radius-pill); margin-top: 5px; }
.stok-var { background: #e8f5e9; color: #2e7d32; }
.stok-yok { background: #fff3e0; color: #e65100; }
.stok-siparis { background: #e3f2fd; color: #1565c0; }
.urun-kart-butonlar { display: flex; gap: 6px; flex-shrink: 0; }
.btn-detay { font-size: 12px; font-weight: 500; background: #111; color: #fff; padding: 8px 14px; border-radius: var(--radius-sm); transition: var(--transition); }
.btn-detay:hover { background: #333; }
.btn-kart-wa { display: flex; align-items: center; justify-content: center; width: 34px; height: 34px; background: var(--yesil-wa); color: #fff; border-radius: var(--radius-sm); transition: var(--transition); }
.btn-kart-wa:hover { background: #1ebe59; }
.bos-mesaj { color: var(--gri); font-size: 14px; grid-column: 1/-1; } .neden-section { background: var(--siyah); }
.neden-section .section-baslik h2, .neden-section .section-baslik p { color: #fff; }
.neden-section .section-baslik p { color: rgba(255,255,255,0.5); }
.ozellik-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 1.5rem; }
.ozellik-kart { padding: 1.75rem; border: 1px solid rgba(255,255,255,0.1); border-radius: var(--radius); }
.ozellik-no { font-size: 11px; font-weight: 600; color: rgba(255,255,255,0.25); letter-spacing: 0.08em; margin-bottom: 1rem; }
.ozellik-kart h3 { font-size: 16px; font-weight: 600; color: #fff; margin-bottom: 8px; }
.ozellik-kart p { font-size: 14px; color: rgba(255,255,255,0.45); line-height: 1.65; } .cta-section { background: var(--bej); }
.cta-kutu { background: var(--siyah); border-radius: 16px; padding: 3rem; text-align: center; }
.cta-kutu h2 { font-size: clamp(22px, 3vw, 32px); font-weight: 700; color: #fff; letter-spacing: -0.02em; margin-bottom: 12px; }
.cta-kutu p { font-size: 15px; color: rgba(255,255,255,0.5); margin-bottom: 2rem; }
.cta-aksiyonlar { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; } .site-footer { background: var(--siyah); padding: 4rem 1.5rem 2rem; }
.footer-inner { max-width: var(--max-w); margin: 0 auto; }
.footer-top { display: grid; grid-template-columns: 280px 1fr; gap: 4rem; margin-bottom: 3rem; padding-bottom: 3rem; border-bottom: 1px solid rgba(255,255,255,0.08); }
.footer-logo .logo-text { color: #fff; }
.footer-desc { font-size: 13px; color: rgba(255,255,255,0.4); line-height: 1.7; margin-top: 14px; margin-bottom: 20px; }
.footer-sosyal { display: flex; gap: 12px; }
.footer-sosyal a { color: rgba(255,255,255,0.4); transition: var(--transition); }
.footer-sosyal a:hover { color: #fff; }
.footer-links { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2rem; }
.footer-col strong { font-size: 13px; font-weight: 600; color: #fff; display: block; margin-bottom: 12px; }
.footer-col ul li { margin-bottom: 6px; }
.footer-col ul li a { font-size: 13px; color: rgba(255,255,255,0.4); transition: var(--transition); }
.footer-col ul li a:hover { color: #fff; }
.footer-bottom { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 12px; }
.footer-bottom p { font-size: 12px; color: rgba(255,255,255,0.25); }
.footer-bottom-links { display: flex; gap: 12px; align-items: center; }
.footer-bottom-links a { font-size: 12px; color: rgba(255,255,255,0.25); transition: var(--transition); }
.footer-bottom-links a:hover { color: #fff; }
.footer-bottom-links span { color: rgba(255,255,255,0.15); } @media (max-width: 900px) {
.hero-inner { grid-template-columns: 1fr; gap: 2rem; }
.hero-gorsel { display: none; }
.footer-top { grid-template-columns: 1fr; gap: 2rem; }
.footer-links { grid-template-columns: repeat(2, 1fr); }
.main-nav { display: none; }
.hamburger { display: flex; }
.header-tel { display: none; }
.bant-inner { gap: 1.5rem; justify-content: flex-start; overflow-x: auto; padding: 0 1.5rem; flex-wrap: nowrap; }
}
@media (max-width: 640px) {
.hero-section { padding: 3rem 1rem 2.5rem; }
.section-inner { padding: 3rem 1rem; }
.footer-links { grid-template-columns: 1fr; }
.hero-istatistikler { gap: 1.25rem; }
.cta-kutu { padding: 2rem 1.25rem; }
.ozellik-grid { grid-template-columns: 1fr; }
} .main-nav.acik {
display: flex;
flex-direction: column;
position: fixed;
top: var(--header-h);
left: 0; right: 0;
background: var(--siyah);
padding: 1.5rem;
border-top: 1px solid rgba(255,255,255,0.07);
z-index: 999;
max-height: calc(100vh - var(--header-h));
overflow-y: auto;
}
.main-nav.acik .nav-list { flex-direction: column; gap: 4px; }
.main-nav.acik .nav-link { padding: 12px 14px; border-radius: var(--radius-sm); font-size: 16px; }
.main-nav.acik .mega-menu { display: none !important; }  .breadcrumb-bar { background: #fff; border-bottom: 1px solid var(--border); }
.bc-inner { max-width: var(--max-w); margin: 0 auto; padding: 10px 1.5rem; display: flex; align-items: center; gap: 6px; font-size: 13px; color: var(--gri); }
.bc-inner a { color: var(--gri); transition: var(--transition); }
.bc-inner a:hover { color: #111; }
.bc-sep { opacity: 0.4; } .arsiv-hero { background: var(--siyah); padding: 2.5rem 1.5rem; }
.arsiv-hero-inner { max-width: var(--max-w); margin: 0 auto; }
.arsiv-hero h1 { font-size: clamp(24px, 3vw, 36px); font-weight: 700; color: #fff; letter-spacing: -0.02em; margin-bottom: 8px; }
.arsiv-hero p { font-size: 15px; color: rgba(255,255,255,0.5); } .arsiv-layout { background: var(--bej); padding: 2rem 0 4rem; }
.arsiv-inner { max-width: var(--max-w); margin: 0 auto; padding: 0 1.5rem; display: grid; grid-template-columns: 220px 1fr; gap: 2rem; align-items: start; } .arsiv-sidebar { position: sticky; top: calc(var(--header-h) + 1rem); }
.filter-kutu { background: #fff; border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; }
.filter-baslik { padding: 14px 16px; border-bottom: 1px solid var(--border); display: flex; justify-content: space-between; align-items: center; }
.filter-baslik strong { font-size: 13px; font-weight: 600; }
.filter-temizle { font-size: 12px; color: var(--gri); text-decoration: none; transition: var(--transition); }
.filter-temizle:hover { color: #111; }
.filter-liste { padding: 10px 10px; }
.filter-link { display: flex; justify-content: space-between; align-items: center; padding: 8px 10px; border-radius: var(--radius-sm); font-size: 13px; color: #444; transition: var(--transition); }
.filter-link:hover { background: var(--bej); }
.filter-link.aktif { background: #111; color: #fff; font-weight: 500; }
.filter-count { font-size: 11px; background: rgba(0,0,0,0.08); padding: 2px 7px; border-radius: var(--radius-pill); font-weight: 600; min-width: 22px; text-align: center; }
.filter-link.aktif .filter-count { background: rgba(255,255,255,0.18); color: #fff; } .arsiv-bar { display: flex; justify-content: space-between; align-items: center; margin-bottom: 1.25rem; }
.arsiv-sayi { font-size: 13px; color: var(--gri); }
.arsiv-sayi strong { color: #111; font-weight: 600; }
.siralama-select { padding: 7px 28px 7px 10px; border: 1px solid var(--border); border-radius: var(--radius-sm); font-size: 13px; font-family: inherit; background: #fff; color: #111; appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='11' height='11' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23999' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 8px center; cursor: pointer; outline: none; } .sayfalama { margin-top: 2.5rem; }
.sayfalama .nav-links { display: flex; gap: 6px; flex-wrap: wrap; }
.sayfalama .page-numbers { display: inline-flex; align-items: center; justify-content: center; min-width: 36px; height: 36px; padding: 0 10px; border: 1px solid var(--border); border-radius: var(--radius-sm); font-size: 13px; color: #444; background: #fff; transition: var(--transition); }
.sayfalama .page-numbers:hover { border-color: #111; color: #111; }
.sayfalama .page-numbers.current { background: #111; color: #fff; border-color: #111; font-weight: 600; } .bos-arsiv { text-align: center; padding: 4rem 1rem; color: var(--gri); }
.bos-arsiv svg { margin: 0 auto 1rem; color: var(--bej2); }
.bos-arsiv h2 { font-size: 18px; font-weight: 600; color: #111; margin-bottom: 1rem; }
.btn-geri { display: inline-flex; align-items: center; gap: 6px; background: #111; color: #fff; padding: 10px 20px; border-radius: var(--radius-pill); font-size: 14px; font-weight: 500; transition: var(--transition); }
.btn-geri:hover { background: #333; }
@media (max-width: 860px) {
.arsiv-inner { grid-template-columns: 1fr; }
.arsiv-sidebar { position: static; }
.filter-liste { display: flex; flex-wrap: wrap; gap: 6px; padding: 10px; }
.filter-link { padding: 6px 12px; border: 1px solid var(--border); }
} .detay-wrap { background: #fff; padding: 3rem 1.5rem; }
.detay-inner { max-width: var(--max-w); margin: 0 auto; display: grid; grid-template-columns: 1fr 1fr; gap: 4rem; align-items: start; } .detay-gorsel-bolum {}
.detay-gorsel-ana { position: relative; background: var(--bej); border-radius: var(--radius); overflow: hidden; display: flex; align-items: center; justify-content: center; min-height: 400px; padding: 2rem; }
.detay-gorsel-ana img { max-height: 360px; width: 100%; object-fit: contain; }
.gorsel-yok { color: var(--bej2); display: flex; align-items: center; justify-content: center; min-height: 300px; }
.detay-rozet { position: absolute; top: 14px; left: 14px; background: #111; color: #fff; font-size: 12px; font-weight: 700; padding: 4px 10px; border-radius: var(--radius-pill); }
.detay-thumbnails { display: flex; gap: 8px; margin-top: 12px; }
.thumb-btn { width: 72px; height: 72px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--bej); overflow: hidden; cursor: pointer; padding: 4px; transition: var(--transition); }
.thumb-btn:hover { border-color: #111; }
.thumb-btn img { width: 100%; height: 100%; object-fit: contain; } .detay-bilgi {}
.detay-kategori { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.07em; color: var(--gri); margin-bottom: 10px; display: inline-block; }
.detay-baslik { font-size: clamp(22px, 3vw, 32px); font-weight: 700; letter-spacing: -0.02em; line-height: 1.2; margin-bottom: 10px; }
.detay-sku { font-size: 12px; color: var(--gri); margin-bottom: 10px; }
.detay-stok { display: inline-block; font-size: 12px; font-weight: 600; padding: 4px 10px; border-radius: var(--radius-pill); margin-bottom: 1.5rem; }
.detay-fiyat-blok { margin-bottom: 1.5rem; padding: 1.25rem; background: var(--bej); border-radius: var(--radius); }
.detay-liste-fiyat { font-size: 16px; color: var(--gri); display: block; margin-bottom: 6px; }
.detay-liste-fiyat del { color: var(--gri2); }
.detay-fiyat-ana { display: flex; align-items: baseline; gap: 8px; margin-bottom: 4px; }
.detay-fiyat-usd { font-size: 32px; font-weight: 700; letter-spacing: -0.03em; color: #111; }
.detay-kdv { font-size: 13px; color: var(--gri); }
.detay-fiyat-tl { font-size: 14px; color: #555; }
.detay-fiyat-tl span { font-size: 12px; color: var(--gri); }
.detay-ozet { font-size: 15px; color: #444; line-height: 1.7; margin-bottom: 1.5rem; } .detay-butonlar { display: flex; gap: 10px; margin-bottom: 1.5rem; flex-wrap: wrap; }
.btn-wa-detay { flex: 1; min-width: 200px; display: flex; align-items: center; justify-content: center; gap: 9px; background: var(--yesil-wa); color: #fff; font-size: 15px; font-weight: 600; padding: 14px 20px; border-radius: var(--radius-sm); transition: var(--transition); border: none; cursor: pointer; }
.btn-wa-detay:hover { background: #1ebe59; }
.btn-teklif-detay { flex: 1; min-width: 160px; display: flex; align-items: center; justify-content: center; gap: 9px; background: #111; color: #fff; font-size: 15px; font-weight: 600; padding: 14px 20px; border-radius: var(--radius-sm); border: none; cursor: pointer; transition: var(--transition); }
.btn-teklif-detay:hover { background: #333; } .detay-guven { display: flex; gap: 1rem; flex-wrap: wrap; margin-bottom: 1.5rem; padding-bottom: 1.5rem; border-bottom: 1px solid var(--border); }
.guven-item { display: flex; align-items: center; gap: 6px; font-size: 12px; color: #555; font-weight: 500; }
.guven-item svg { color: #111; flex-shrink: 0; } .detay-ozet-tablo { width: 100%; border-collapse: collapse; font-size: 13px; }
.detay-ozet-tablo td { padding: 8px 0; border-bottom: 1px solid var(--border); }
.detay-ozet-tablo td:first-child { color: var(--gri); width: 40%; }
.detay-ozet-tablo td:last-child { font-weight: 500; }
.detay-ozet-tablo tr:last-child td { border-bottom: none; } .detay-sekmeler-wrap { background: var(--bej); border-top: 1px solid var(--border); }
.detay-sekmeler-inner { max-width: var(--max-w); margin: 0 auto; padding: 0 1.5rem 3rem; }
.sekme-navlar { display: flex; gap: 0; border-bottom: 1px solid var(--border); margin-bottom: 2rem; background: #fff; border-radius: var(--radius) var(--radius) 0 0; margin-top: 0; overflow: hidden; }
.sekme-btn { padding: 14px 24px; font-size: 14px; font-weight: 500; color: var(--gri); background: none; border: none; border-bottom: 2px solid transparent; cursor: pointer; transition: var(--transition); }
.sekme-btn:hover { color: #111; }
.sekme-btn.aktif { color: #111; border-bottom-color: #111; }
.sekme-panel { display: none; }
.sekme-panel.aktif { display: block; }
.detay-icerik { font-size: 15px; line-height: 1.8; color: #333; }
.detay-icerik h2, .detay-icerik h3 { font-weight: 700; letter-spacing: -0.02em; margin: 1.75rem 0 0.75rem; color: #111; }
.detay-icerik h2 { font-size: 22px; }
.detay-icerik h3 { font-size: 17px; }
.detay-icerik p { margin-bottom: 1rem; }
.detay-icerik ul, .detay-icerik ol { padding-left: 1.5rem; margin-bottom: 1rem; }
.detay-icerik li { margin-bottom: 4px; }
.detay-icerik table { width: 100%; border-collapse: collapse; font-size: 14px; margin: 1.5rem 0; }
.detay-icerik table th, .detay-icerik table td { padding: 10px 12px; border: 1px solid var(--border); text-align: left; }
.detay-icerik table th { background: var(--bej); font-weight: 600; }
.detay-icerik table tr:nth-child(even) td { background: #fafaf9; }
.video-wrap { position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; border-radius: var(--radius); }
.video-wrap iframe { position: absolute; inset: 0; width: 100%; height: 100%; }
.bos-panel { color: var(--gri); font-size: 14px; padding: 2rem 0; } .ilgili-urunler { background: #fff; border-top: 1px solid var(--border); padding: 3rem 1.5rem; }
.ilgili-inner { max-width: var(--max-w); margin: 0 auto; }
.ilgili-inner h2 { font-size: 22px; font-weight: 700; letter-spacing: -0.02em; margin-bottom: 1.5rem; }
@media (max-width: 860px) {
.detay-inner { grid-template-columns: 1fr; gap: 2rem; }
.detay-gorsel-ana { min-height: 280px; }
.btn-wa-detay, .btn-teklif-detay { min-width: unset; }
}
@media (max-width: 640px) {
.detay-wrap { padding: 1.5rem 1rem; }
.detay-fiyat-usd { font-size: 26px; }
.sekme-btn { padding: 12px 14px; font-size: 13px; }
} .cozumler-wrap{background:var(--bej);padding:3rem 0 5rem}
.cozumler-inner{max-width:var(--max-w);margin:0 auto;padding:0 1.5rem}
.cozum-grup{margin-bottom:4rem}
.cozum-grup-baslik{font-size:20px;font-weight:700;letter-spacing:-0.02em;margin-bottom:1.5rem;padding-bottom:1rem;border-bottom:1px solid var(--border)}
.cozum-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:1.25rem}
.cozum-kart{background:#fff;border:1px solid var(--border);border-radius:var(--radius);padding:1.75rem;display:flex;flex-direction:column;gap:12px;transition:var(--transition)}
.cozum-kart:hover{border-color:#bbb;transform:translateY(-2px)}
.cozum-kart--vurgulu{border:2px solid #111}
.cozum-ikon{width:56px;height:56px;background:var(--bej);border-radius:12px;display:flex;align-items:center;justify-content:center}
.cozum-rozet{display:inline-block;font-size:11px;font-weight:600;background:#111;color:#fff;padding:3px 10px;border-radius:var(--radius-pill);letter-spacing:0.05em;width:fit-content}
.cozum-kart h3{font-size:17px;font-weight:700;letter-spacing:-0.01em}
.cozum-kart p{font-size:14px;color:#555;line-height:1.65}
.cozum-liste{padding-left:1.1rem;display:flex;flex-direction:column;gap:5px}
.cozum-liste li{font-size:13px;color:#555;list-style:disc}
.cozum-btn{display:inline-block;font-size:13px;font-weight:600;color:#111;margin-top:auto;transition:var(--transition)}
.cozum-btn:hover{text-decoration:underline}
.cozum-cta{background:var(--siyah);border-radius:16px;padding:3rem;text-align:center;margin-top:2rem}
.cozum-cta h2{font-size:26px;font-weight:700;color:#fff;letter-spacing:-0.02em;margin-bottom:10px}
.cozum-cta p{font-size:15px;color:rgba(255,255,255,0.5);margin-bottom:2rem} .iletisim-wrap{background:var(--bej);padding:3rem 0 5rem}
.iletisim-inner{max-width:var(--max-w);margin:0 auto;padding:0 1.5rem;display:grid;grid-template-columns:1fr 400px;gap:3rem;align-items:start}
.iletisim-form-bolum h2{font-size:22px;font-weight:700;letter-spacing:-0.02em;margin-bottom:6px}
.iletisim-alt{font-size:14px;color:var(--gri);margin-bottom:1.75rem}
.iletisim-form{background:#fff;border:1px solid var(--border);border-radius:var(--radius);padding:2rem}
.form-iki-kolon{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.form-select{width:100%;padding:10px 12px;border:1px solid var(--border);border-radius:var(--radius-sm);font-family:inherit;font-size:14px;color:#111;background:#fff;outline:none;appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='11' height='11' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23999' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' d='M6 9l6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 12px center}
.btn-ic-gonder{width:100%;padding:13px;background:#111;color:#fff;border:none;border-radius:var(--radius-sm);font-size:14px;font-weight:600;cursor:pointer;transition:var(--transition);margin-top:4px;font-family:inherit}
.btn-ic-gonder:hover{background:#333}
.iletisim-sonuc{margin-top:12px;font-size:13px;padding:10px 12px;border-radius:var(--radius-sm);display:none}
.iletisim-sonuc.basarili{background:#e8f5e9;color:#2e7d32;display:block}
.iletisim-sonuc.hata{background:#ffebee;color:#c62828;display:block}
.iletisim-bilgi-bolum{display:flex;flex-direction:column;gap:1.25rem}
.iletisim-bilgi-kutu{background:#fff;border:1px solid var(--border);border-radius:var(--radius);padding:1.75rem}
.iletisim-bilgi-kutu h3{font-size:16px;font-weight:700;margin-bottom:1.25rem}
.bilgi-satirlari{display:flex;flex-direction:column;gap:1rem}
.bilgi-satir{display:flex;align-items:flex-start;gap:12px}
.bilgi-ikon{width:36px;height:36px;background:var(--bej);border-radius:8px;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.bilgi-satir strong{display:block;font-size:12px;font-weight:600;text-transform:uppercase;letter-spacing:0.05em;color:var(--gri);margin-bottom:2px}
.bilgi-satir a, .bilgi-satir span{font-size:14px;color:#111}
.bilgi-satir a:hover{text-decoration:underline}
.calisma-saatleri{background:#fff;border:1px solid var(--border);border-radius:var(--radius);padding:1.5rem}
.calisma-saatleri h3{font-size:15px;font-weight:700;margin-bottom:1rem}
.calisma-saatleri table{width:100%;border-collapse:collapse;font-size:13px}
.calisma-saatleri td{padding:6px 0;border-bottom:1px solid var(--border)}
.calisma-saatleri tr:last-child td{border-bottom:none}
.calisma-saatleri td:last-child{text-align:right;font-weight:500}
.btn-wa-iletisim{display:flex;align-items:center;justify-content:center;gap:8px;background:var(--yesil-wa);color:#fff;padding:14px;border-radius:var(--radius-sm);font-size:15px;font-weight:600;transition:var(--transition)}
.btn-wa-iletisim:hover{background:#1ebe59}
@media(max-width:900px){.iletisim-inner{grid-template-columns:1fr}.form-iki-kolon{grid-template-columns:1fr}} .hakkimizda-wrap{background:var(--bej);padding:3rem 0 5rem}
.hakkimizda-inner{max-width:var(--max-w);margin:0 auto;padding:0 1.5rem;display:flex;flex-direction:column;gap:4rem}
.hakkimizda-giris{display:grid;grid-template-columns:1fr 340px;gap:3rem;align-items:center}
.hakkimizda-metin h2{font-size:26px;font-weight:700;letter-spacing:-0.02em;margin-bottom:1rem}
.hakkimizda-metin p{font-size:15px;color:#444;line-height:1.8;margin-bottom:0.75rem}
.hakkimizda-istatistikler{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
.hk-stat{background:#fff;border:1px solid var(--border);border-radius:var(--radius);padding:1.25rem;text-align:center}
.hk-stat strong{display:block;font-size:28px;font-weight:700;letter-spacing:-0.03em;margin-bottom:4px}
.hk-stat span{font-size:12px;color:var(--gri);text-transform:uppercase;letter-spacing:0.05em;font-weight:500}
.hakkimizda-degerler h2{font-size:24px;font-weight:700;letter-spacing:-0.02em;margin-bottom:1.5rem}
.deger-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:1.25rem}
.deger-kart{background:#fff;border:1px solid var(--border);border-radius:var(--radius);padding:1.75rem}
.deger-ikon{width:48px;height:48px;background:var(--bej);border-radius:10px;display:flex;align-items:center;justify-content:center;margin-bottom:1rem}
.deger-kart h3{font-size:15px;font-weight:700;margin-bottom:8px}
.deger-kart p{font-size:13px;color:#555;line-height:1.65}
.hakkimizda-cta{background:var(--siyah);border-radius:16px;padding:3rem;text-align:center}
.hakkimizda-cta h2{font-size:24px;font-weight:700;color:#fff;letter-spacing:-0.02em;margin-bottom:10px}
.hakkimizda-cta p{font-size:15px;color:rgba(255,255,255,0.5);margin-bottom:1.75rem}
@media(max-width:860px){.hakkimizda-giris{grid-template-columns:1fr}.hakkimizda-istatistikler{grid-template-columns:repeat(4,1fr)}}
@media(max-width:560px){.hakkimizda-istatistikler{grid-template-columns:1fr 1fr}} .sss-wrap{background:var(--bej);padding:3rem 0 5rem}
.sss-inner{max-width:760px;margin:0 auto;padding:0 1.5rem}
.sss-liste{display:flex;flex-direction:column;gap:6px;margin-bottom:3rem}
.sss-item{background:#fff;border:1px solid var(--border);border-radius:var(--radius);overflow:hidden}
.sss-soru{width:100%;display:flex;justify-content:space-between;align-items:center;padding:1.1rem 1.25rem;background:none;border:none;font-size:15px;font-weight:600;color:#111;text-align:left;cursor:pointer;gap:12px;transition:var(--transition);font-family:inherit}
.sss-soru:hover{background:var(--bej)}
.sss-soru[aria-expanded="true"]{background:var(--bej)}
.sss-ok{flex-shrink:0;transition:transform var(--transition)}
.sss-soru[aria-expanded="true"] .sss-ok{transform:rotate(180deg)}
.sss-cevap{padding:0 1.25rem 1.25rem;font-size:14px;color:#444;line-height:1.75}
.sss-iletisim-cta{background:var(--siyah);border-radius:16px;padding:2.5rem;text-align:center}
.sss-iletisim-cta h3{font-size:20px;font-weight:700;color:#fff;margin-bottom:8px}
.sss-iletisim-cta p{font-size:14px;color:rgba(255,255,255,0.5);margin-bottom:1.5rem} .blog-wrap{background:var(--bej);padding:3rem 0 5rem}
.blog-inner{max-width:var(--max-w);margin:0 auto;padding:0 1.5rem}
.blog-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:1.5rem;margin-bottom:2.5rem}
.blog-kart{background:#fff;border:1px solid var(--border);border-radius:var(--radius);overflow:hidden;display:flex;flex-direction:column;transition:var(--transition)}
.blog-kart:hover{border-color:#bbb;transform:translateY(-2px)}
.blog-kart-gorsel-link{display:block}
.blog-kart-gorsel{height:200px;overflow:hidden;background:var(--bej);display:flex;align-items:center;justify-content:center}
.blog-kart-gorsel img{width:100%;height:100%;object-fit:cover;transition:transform 0.35s ease}
.blog-kart:hover .blog-kart-gorsel img{transform:scale(1.04)}
.blog-gorsel-yok{color:var(--bej2)}
.blog-kart-govde{padding:1.25rem;flex:1;display:flex;flex-direction:column}
.blog-meta{display:flex;align-items:center;gap:10px;font-size:12px;color:var(--gri);margin-bottom:10px}
.blog-cat{background:var(--bej);padding:2px 8px;border-radius:var(--radius-pill);font-weight:500}
.blog-kart-baslik{font-size:16px;font-weight:700;letter-spacing:-0.01em;line-height:1.35;margin-bottom:8px}
.blog-kart-baslik a{color:#111}
.blog-kart-baslik a:hover{text-decoration:underline}
.blog-kart-ozet{font-size:13px;color:#555;line-height:1.6;flex:1;margin-bottom:1rem}
.blog-devami{font-size:13px;font-weight:600;color:#111;transition:var(--transition)}
.blog-devami:hover{text-decoration:underline} .yazi-wrap{background:var(--bej);padding:3rem 0 5rem}
.yazi-inner{max-width:720px;margin:0 auto;padding:0 1.5rem}
.yazi-meta{font-size:13px;color:var(--gri);margin-bottom:12px;display:flex;gap:8px}
.yazi-baslik{font-size:clamp(24px,4vw,38px);font-weight:700;letter-spacing:-0.03em;line-height:1.2;margin-bottom:1rem}
.yazi-ozet{font-size:17px;color:#555;line-height:1.7;margin-bottom:2rem;padding-bottom:2rem;border-bottom:1px solid var(--border)}
.yazi-kapak{border-radius:var(--radius);overflow:hidden;margin-bottom:2.5rem}
.yazi-kapak img{width:100%;height:auto}
.yazi-icerik{font-size:16px;line-height:1.85;color:#333}
.yazi-icerik h2{font-size:22px;font-weight:700;letter-spacing:-0.02em;margin:2rem 0 0.75rem;color:#111}
.yazi-icerik h3{font-size:18px;font-weight:700;margin:1.75rem 0 0.5rem;color:#111}
.yazi-icerik p{margin-bottom:1.25rem}
.yazi-icerik ul,.yazi-icerik ol{padding-left:1.5rem;margin-bottom:1.25rem}
.yazi-icerik li{margin-bottom:6px}
.yazi-icerik blockquote{border-left:3px solid #111;padding-left:1.25rem;margin:1.5rem 0;font-style:italic;color:#555}
.yazi-icerik table{width:100%;border-collapse:collapse;margin:1.5rem 0;font-size:14px}
.yazi-icerik th,.yazi-icerik td{padding:10px 12px;border:1px solid var(--border);text-align:left}
.yazi-icerik th{background:var(--bej);font-weight:600}
.yazi-footer{margin-top:2.5rem;padding-top:1.5rem;border-top:1px solid var(--border)}
.yazi-etiketler{font-size:13px;color:var(--gri);display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.yazi-etiketler a{background:var(--bej);padding:3px 10px;border-radius:var(--radius-pill);font-size:12px;color:#555;transition:var(--transition)}
.yazi-etiketler a:hover{background:#111;color:#fff}
.yazi-navigasyon{display:grid;grid-template-columns:1fr 1fr;gap:1rem;margin-top:3rem;padding-top:2rem;border-top:1px solid var(--border)}
.nav-yazi{background:#fff;border:1px solid var(--border);border-radius:var(--radius);padding:1rem 1.25rem;display:flex;flex-direction:column;gap:4px;transition:var(--transition)}
.nav-yazi:hover{border-color:#111}
.nav-yazi span{font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:0.06em;color:var(--gri)}
.nav-yazi strong{font-size:14px;font-weight:600;color:#111;line-height:1.35}
.nav-yazi--sonraki{text-align:right} .sayfa-wrap{background:#fff;padding:3rem 0 5rem}
.sayfa-inner{max-width:860px;margin:0 auto;padding:0 1.5rem}
.sayfa-baslik{font-size:32px;font-weight:700;letter-spacing:-0.02em;margin-bottom:2rem}
.sayfa-icerik{font-size:15px;line-height:1.85;color:#333}
.sayfa-icerik p{margin-bottom:1rem}
.sayfa-icerik h2{font-size:22px;font-weight:700;margin:2rem 0 0.75rem}
.sayfa-icerik ul,.sayfa-icerik ol{padding-left:1.5rem;margin-bottom:1rem} .hata-wrap{min-height:60vh;display:flex;align-items:center;justify-content:center;padding:4rem 1.5rem;text-align:center}
.hata-kod{font-size:96px;font-weight:800;letter-spacing:-0.05em;color:var(--bej2);line-height:1}
.hata-wrap h1{font-size:28px;font-weight:700;margin:0.5rem 0 1rem}
.hata-wrap p{font-size:15px;color:var(--gri);margin-bottom:2rem} .btn-siyah{background:#111;color:#fff}
.btn-siyah:hover{background:#333} .detay-icerik blockquote,
.sayfa-icerik blockquote,
.yazi-icerik blockquote {
position: relative;
margin: 2rem 0;
padding: 1.25rem 1.5rem 1.25rem 1.75rem;
background: #f5f4f2;
border-left: 3px solid #111;
border-radius: 0 8px 8px 0;
font-size: 15px;
font-style: italic;
color: #444;
line-height: 1.75;
}
.detay-icerik blockquote::before,
.sayfa-icerik blockquote::before,
.yazi-icerik blockquote::before {
content: '\201C';
position: absolute;
top: -10px;
left: 14px;
font-size: 48px;
color: #ddd;
font-family: Georgia, serif;
font-style: normal;
line-height: 1;
}
.detay-icerik blockquote p,
.sayfa-icerik blockquote p,
.yazi-icerik blockquote p {
margin: 0;
}
.detay-icerik blockquote cite,
.sayfa-icerik blockquote cite,
.yazi-icerik blockquote cite {
display: block;
margin-top: 10px;
font-size: 13px;
font-style: normal;
font-weight: 600;
color: #888;
}
.detay-icerik blockquote cite::before,
.sayfa-icerik blockquote cite::before,
.yazi-icerik blockquote cite::before {
content: '— ';
}
*{box-sizing:border-box;margin:0;padding:0}
.hero{background:#111;padding:3rem 2rem;display:grid;grid-template-columns:1fr 1fr;gap:3rem;align-items:center;min-height:480px;border-radius:16px}
.hero-left{}
.eyebrow{font-size:11px;font-weight:500;letter-spacing:0.1em;text-transform:uppercase;color:rgba(255,255,255,0.4);margin-bottom:14px}
.hero-h1{font-size:36px;font-weight:700;color:#fff;line-height:1.15;letter-spacing:-0.03em;margin-bottom:14px}
.hero-h1 span{color:rgba(255,255,255,0.4)}
.hero-p{font-size:14px;color:rgba(255,255,255,0.5);line-height:1.75;margin-bottom:2rem;max-width:340px}
.hero-btns{display:flex;gap:10px;flex-wrap:wrap}
.btn-w{display:inline-flex;align-items:center;gap:7px;background:#fff;color:#111;font-size:13px;font-weight:600;padding:10px 20px;border-radius:100px;border:none;cursor:pointer}
.btn-g{display:inline-flex;align-items:center;gap:7px;background:#25D366;color:#fff;font-size:13px;font-weight:600;padding:10px 20px;border-radius:100px;border:none;cursor:pointer}
.hero-stats{display:flex;gap:2rem;margin-top:2rem;padding-top:2rem;border-top:1px solid rgba(255,255,255,0.08)}
.stat strong{display:block;font-size:22px;font-weight:700;color:#fff;letter-spacing:-0.03em;line-height:1}
.stat span{font-size:11px;color:rgba(255,255,255,0.35);text-transform:uppercase;letter-spacing:0.06em;font-weight:500}
.hero-right{display:flex;justify-content:center;gap:16px;align-items:flex-start}
.phone{width:180px;background:#1c1c1e;border-radius:32px;border:6px solid #2c2c2e;overflow:hidden;box-shadow:0 0 0 1px rgba(255,255,255,0.08)}
.phone-notch{height:28px;background:#1c1c1e;display:flex;align-items:center;justify-content:center}
.notch-pill{width:72px;height:10px;background:#000;border-radius:10px}
.phone-screen{background:#000;padding:0}
.app-bar{padding:10px 14px 6px;display:flex;justify-content:space-between;align-items:center}
.app-logo{font-size:13px;font-weight:700;color:#fff;letter-spacing:-0.01em}
.app-dot{width:8px;height:8px;border-radius:50%;background:#30d158}
.section-label{font-size:9px;font-weight:600;text-transform:uppercase;letter-spacing:0.08em;color:rgba(255,255,255,0.3);padding:6px 14px 4px}
.hub-card{margin:0 10px 8px;background:#1c1c1e;border:0.5px solid rgba(255,255,255,0.1);border-radius:14px;padding:10px 12px}
.hub-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:6px}
.hub-name{font-size:11px;font-weight:600;color:#fff}
.hub-badge{font-size:9px;background:#30d158;color:#000;font-weight:700;padding:2px 7px;border-radius:100px}
.hub-rows{display:flex;flex-direction:column;gap:4px}
.hub-row{display:flex;justify-content:space-between;align-items:center}
.hub-row-label{font-size:10px;color:rgba(255,255,255,0.4)}
.hub-row-val{font-size:10px;font-weight:600;color:rgba(255,255,255,0.8)}
.zone-list{padding:0 10px;display:flex;flex-direction:column;gap:5px;margin-bottom:8px}
.zone-item{background:#1c1c1e;border:0.5px solid rgba(255,255,255,0.07);border-radius:10px;padding:8px 10px;display:flex;align-items:center;justify-content:space-between}
.zone-left{display:flex;align-items:center;gap:7px}
.zone-icon{width:24px;height:24px;border-radius:7px;display:flex;align-items:center;justify-content:center;font-size:11px}
.zone-text{}
.zone-name{font-size:10px;font-weight:600;color:#fff;line-height:1}
.zone-sub{font-size:9px;color:rgba(255,255,255,0.3);margin-top:1px}
.zone-status{font-size:9px;font-weight:600;padding:2px 7px;border-radius:100px}
.ok{background:rgba(48,209,88,0.15);color:#30d158}
.warn{background:rgba(255,159,10,0.15);color:#ff9f0a}
.notif-card{margin:0 10px 10px;background:#1c1c1e;border:0.5px solid rgba(255,159,10,0.3);border-radius:12px;padding:8px 10px;display:flex;gap:8px;align-items:flex-start}
.notif-dot{width:8px;height:8px;border-radius:50%;background:#ff9f0a;margin-top:2px;flex-shrink:0}
.notif-text{}
.notif-title{font-size:10px;font-weight:600;color:#fff}
.notif-desc{font-size:9px;color:rgba(255,255,255,0.4);margin-top:1px}
.tab-bar{display:flex;justify-content:space-around;padding:8px 0 12px;border-top:0.5px solid rgba(255,255,255,0.08)}
.tab{display:flex;flex-direction:column;align-items:center;gap:2px;font-size:8px;color:rgba(255,255,255,0.3)}
.tab.active{color:#0a84ff}
.tab-icon{font-size:16px}
.phone2{width:155px;margin-top:40px}
.screen2{background:#000;padding:0}
.map-mock{height:110px;background:#1a1a2e;margin:0 10px 6px;border-radius:10px;overflow:hidden;position:relative}
.map-grid{position:absolute;inset:0;opacity:0.15}
.map-line-h{position:absolute;left:0;right:0;height:0.5px;background:#4a6fa5}
.map-line-v{position:absolute;top:0;bottom:0;width:0.5px;background:#4a6fa5}
.map-pin{position:absolute;top:40%;left:48%;width:10px;height:10px;border-radius:50%;background:#0a84ff;border:2px solid rgba(10,132,255,0.3)}
.map-ring{position:absolute;top:calc(40% - 8px);left:calc(48% - 8px);width:26px;height:26px;border-radius:50%;border:1px solid rgba(10,132,255,0.3)}
.map-label{position:absolute;bottom:8px;left:10px;font-size:9px;color:rgba(255,255,255,0.5);font-weight:500}
.device-list{padding:0 10px;display:flex;flex-direction:column;gap:4px;margin-bottom:8px}
.device-row{display:flex;justify-content:space-between;align-items:center;padding:5px 0;border-bottom:0.5px solid rgba(255,255,255,0.05)}
.device-row:last-child{border-bottom:none}
.device-name{font-size:10px;color:rgba(255,255,255,0.7)}
.device-val{font-size:10px;font-weight:600;color:#30d158}
.arm-btn{margin:0 10px 10px;background:#0a84ff;border-radius:10px;padding:9px;text-align:center;font-size:11px;font-weight:700;color:#fff}