/* ========================================= MOBILTEG - YENİ NESİL ÜRÜN SAYFALARI index.css'ten sonra yüklenir. Her sayfa kendi vurgu rengini ile verir. ========================================= */ :root { --pp-accent: #E60000; } .pp-hero { position: relative; margin-top: 80px; padding: 90px 0 80px; overflow: hidden; background: radial-gradient(circle at 85% 20%, color-mix(in srgb, var(--pp-accent) 18%, transparent) 0%, transparent 45%), radial-gradient(circle at 10% 90%, rgba(230, 0, 0, 0.08) 0%, transparent 40%), var(--dark-bg); border-bottom: 1px solid var(--glass-border); } .pp-hero-grid { display: grid; grid-template-columns: 1fr 1.05fr; gap: 60px; align-items: center; } .pp-breadcrumb { font-size: 0.85rem; color: var(--text-muted); margin-bottom: 18px; } .pp-breadcrumb a:hover { color: #fff; } .pp-badge { display: inline-flex; align-items: center; gap: 8px; background: color-mix(in srgb, var(--pp-accent) 14%, transparent); color: color-mix(in srgb, var(--pp-accent) 55%, #fff); border: 1px solid color-mix(in srgb, var(--pp-accent) 35%, transparent); padding: 7px 16px; border-radius: 30px; font-size: 0.85rem; font-weight: 600; margin-bottom: 22px; } .pp-badge::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: var(--pp-accent); box-shadow: 0 0 10px var(--pp-accent); } .pp-hero h1 { font-size: 3.2rem; line-height: 1.1; margin-bottom: 22px; color: #fff; } .pp-hero h1 .pp-grad { background: linear-gradient(120deg, #fff 0%, color-mix(in srgb, var(--pp-accent) 70%, #fff) 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; } .pp-lead { font-size: 1.15rem; color: var(--text-muted); line-height: 1.8; margin-bottom: 32px; } .pp-lead strong { color: #e5e7ef; } .pp-actions { display: flex; flex-wrap: wrap; gap: 14px; margin-bottom: 28px; } .pp-checks { display: flex; flex-wrap: wrap; gap: 10px 22px; list-style: none; font-size: 0.9rem; color: #cfd3de; } .pp-checks li::before { content: '✓'; color: #10b981; font-weight: 700; margin-right: 8px; } /* Tarayıcı çerçeveli ekran görüntüsü */ .pp-shot { position: relative; border-radius: 14px; overflow: hidden; border: 1px solid var(--glass-border); box-shadow: 0 30px 70px rgba(0, 0, 0, 0.55), 0 0 0 1px rgba(255, 255, 255, 0.02); background: #0f1422; } .pp-shot-bar { display: flex; align-items: center; gap: 7px; padding: 10px 14px; background: #161c2c; border-bottom: 1px solid var(--glass-border); font-size: 0.75rem; color: var(--text-muted); } .pp-shot-bar i { width: 10px; height: 10px; border-radius: 50%; background: #ef4444; } .pp-shot-bar i:nth-child(2) { background: #f59e0b; } .pp-shot-bar i:nth-child(3) { background: #10b981; margin-right: 8px; } .pp-shot img { display: block; width: 100%; height: auto; } .pp-hero-visual { position: relative; } .pp-hero-visual::after { content: ''; position: absolute; inset: 10% -5% -10% 10%; background: var(--pp-accent); filter: blur(110px); opacity: 0.18; z-index: -1; } /* Rakam şeridi */ .pp-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; margin: -40px auto 0; position: relative; z-index: 3; } .pp-stat { background: rgba(20, 25, 40, 0.9); backdrop-filter: blur(10px); border: 1px solid var(--glass-border); border-radius: 14px; padding: 22px 20px; text-align: center; } .pp-stat strong { display: block; font-family: var(--font-heading); font-size: 1.7rem; color: #fff; margin-bottom: 4px; } .pp-stat span { color: var(--text-muted); font-size: 0.9rem; } /* Bölümler */ .pp-section { padding: 90px 0 0; } .pp-section-head { max-width: 760px; margin-bottom: 45px; } .pp-section-head.center { text-align: center; margin-left: auto; margin-right: auto; } .pp-eyebrow { display: block; font-size: 0.8rem; letter-spacing: 2px; text-transform: uppercase; color: color-mix(in srgb, var(--pp-accent) 60%, #fff); font-weight: 700; margin-bottom: 12px; } .pp-section-head p { color: var(--text-muted); font-size: 1.1rem; line-height: 1.8; } /* Özellik kartları */ .pp-features { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 22px; } .pp-feature { background: var(--card-bg); border: 1px solid var(--card-border); border-radius: 14px; padding: 28px; transition: var(--transition-normal); } .pp-feature:hover { transform: translateY(-5px); border-color: color-mix(in srgb, var(--pp-accent) 40%, transparent); box-shadow: 0 20px 40px rgba(0, 0, 0, 0.45); } .pp-icon { width: 46px; height: 46px; border-radius: 12px; display: grid; place-items: center; margin-bottom: 18px; background: color-mix(in srgb, var(--pp-accent) 14%, transparent); color: color-mix(in srgb, var(--pp-accent) 60%, #fff); } .pp-icon svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; } .pp-feature h3 { font-size: 1.2rem; color: #fff; margin-bottom: 10px; } .pp-feature p { color: var(--text-muted); font-size: 0.95rem; line-height: 1.7; } /* Görsel + metin */ .pp-split { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: center; } .pp-split.reverse .pp-split-media { order: 2; } .pp-split h2 { font-size: 2.2rem; } .pp-split > div > p { color: var(--text-muted); line-height: 1.8; font-size: 1.05rem; margin-bottom: 20px; } .pp-list { list-style: none; display: grid; gap: 14px; } .pp-list li { position: relative; padding-left: 34px; color: #cfd3de; line-height: 1.6; } .pp-list li::before { content: '✓'; position: absolute; left: 0; top: 1px; width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; font-size: 0.75rem; font-weight: 700; color: #fff; background: color-mix(in srgb, var(--pp-accent) 70%, #000); } .pp-list li strong { color: #fff; } .pp-media-plain img { width: 100%; height: auto; display: block; border-radius: 14px; border: 1px solid var(--glass-border); box-shadow: 0 25px 60px rgba(0, 0, 0, 0.5); } /* Etiket bulutu (entegrasyonlar, sektörler) */ .pp-tags { display: flex; flex-wrap: wrap; gap: 12px; } .pp-tag { background: rgba(255, 255, 255, 0.04); border: 1px solid var(--glass-border); color: #e5e7ef; padding: 9px 18px; border-radius: 30px; font-size: 0.9rem; font-weight: 600; } .pp-tag a:hover { color: color-mix(in srgb, var(--pp-accent) 55%, #fff); } /* Paket kartları */ .pp-plans { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 22px; } .pp-plan { background: var(--card-bg); border: 1px solid var(--card-border); border-radius: 14px; padding: 30px; position: relative; } .pp-plan.featured { border-color: color-mix(in srgb, var(--pp-accent) 55%, transparent); box-shadow: 0 0 40px color-mix(in srgb, var(--pp-accent) 15%, transparent); } .pp-plan.featured::before { content: attr(data-label); position: absolute; top: -12px; right: 20px; background: var(--pp-accent); color: #fff; font-size: 0.72rem; font-weight: 700; padding: 4px 10px; border-radius: 20px; } .pp-plan h3 { color: #fff; font-size: 1.35rem; margin-bottom: 16px; } .pp-plan ul { list-style: none; display: grid; gap: 10px; color: var(--text-muted); font-size: 0.95rem; } .pp-plan li::before { content: '•'; color: var(--pp-accent); font-weight: 700; margin-right: 10px; } /* Demo kutusu */ .pp-demo { display: grid; grid-template-columns: 1.1fr 1fr; gap: 40px; align-items: center; background: linear-gradient(135deg, rgba(20, 25, 40, 0.9), rgba(11, 15, 25, 0.9)); border: 1px solid var(--glass-border); border-radius: 18px; padding: 45px; } .pp-demo h2 { font-size: 2rem; } .pp-demo p { color: var(--text-muted); line-height: 1.7; margin-bottom: 22px; } .pp-creds { width: 100%; border-collapse: collapse; font-size: 0.92rem; background: rgba(0, 0, 0, 0.25); border-radius: 12px; overflow: hidden; } .pp-creds th, .pp-creds td { text-align: left; padding: 12px 16px; border-bottom: 1px solid var(--glass-border); } .pp-creds th { color: var(--text-muted); font-weight: 600; font-size: 0.8rem; text-transform: uppercase; letter-spacing: 1px; } .pp-creds td { color: #fff; } .pp-creds code { font-family: Consolas, 'Courier New', monospace; background: rgba(255, 255, 255, 0.06); padding: 2px 7px; border-radius: 5px; color: color-mix(in srgb, var(--pp-accent) 45%, #fff); } .pp-note { font-size: 0.85rem; color: var(--text-muted); margin-top: 12px; } /* Süreç adımları */ .pp-steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 22px; counter-reset: step; } .pp-step { counter-increment: step; border-top: 2px solid color-mix(in srgb, var(--pp-accent) 60%, transparent); padding-top: 20px; } .pp-step::before { content: counter(step, decimal-leading-zero); display: block; font-family: var(--font-heading); font-size: 2rem; font-weight: 700; color: color-mix(in srgb, var(--pp-accent) 60%, #fff); margin-bottom: 8px; } .pp-step h3 { color: #fff; font-size: 1.15rem; margin-bottom: 8px; } .pp-step p { color: var(--text-muted); font-size: 0.95rem; line-height: 1.7; } /* Kapanış çağrısı */ .pp-cta { margin: 90px 0; padding: 60px; text-align: center; border-radius: 18px; background: radial-gradient(circle at 20% 0%, color-mix(in srgb, var(--pp-accent) 35%, transparent), transparent 60%), linear-gradient(135deg, #1a0a0d 0%, #0b0f19 100%); border: 1px solid rgba(230, 0, 0, 0.25); } .pp-cta h2 { font-size: 2.4rem; } .pp-cta p { color: var(--text-muted); font-size: 1.15rem; max-width: 700px; margin: 0 auto 30px; } .pp-cta .pp-actions { justify-content: center; margin-bottom: 0; } /* İlgili ürünler */ .pp-related { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 16px; } .pp-related a { display: block; padding: 18px 20px; border-radius: 12px; border: 1px solid var(--card-border); background: var(--card-bg); } .pp-related a strong { display: block; color: #fff; margin-bottom: 4px; } .pp-related a span { color: var(--text-muted); font-size: 0.88rem; } .pp-related a:hover { border-color: rgba(230, 0, 0, 0.35); } /* Duyarlı düzen */ @media (max-width: 1000px) { .pp-hero-grid, .pp-split, .pp-demo { grid-template-columns: 1fr; } .pp-split.reverse .pp-split-media { order: 0; } .pp-stats { grid-template-columns: repeat(2, 1fr); margin-top: 30px; } .pp-hero h1 { font-size: 2.6rem; } } @media (max-width: 600px) { .pp-hero { padding: 60px 0 50px; } .pp-hero h1 { font-size: 2.1rem; } .pp-stats { grid-template-columns: 1fr 1fr; gap: 12px; } .pp-stat strong { font-size: 1.35rem; } .pp-demo, .pp-cta { padding: 30px 22px; } .pp-cta h2, .pp-split h2, .pp-demo h2 { font-size: 1.7rem; } .pp-actions a { width: 100%; text-align: center; } .pp-creds th, .pp-creds td { padding: 10px; } }