/* * Monador Ana Sayfa İçerik Stili * Kapsam: #mn-root (hero slider → blog; header/footer hariç) * Bağımlılık: yok — herhangi bir theme veya Elementor sürümüyle çalışır */ /* ─── RESET (sadece #mn-root altında) ───────────────────────────── */ #mn-root { font-family:"Helvetica Neue",Helvetica,Arial,sans-serif; color:#1a1a2e; line-height:1.6; background:#fff; -webkit-font-smoothing:antialiased; } #mn-root *,#mn-root *::before,#mn-root *::after { box-sizing:border-box; } #mn-root h1,#mn-root h2,#mn-root h3,#mn-root h4,#mn-root h5,#mn-root h6 { font-family:"Helvetica Neue",Helvetica,Arial,sans-serif; color:inherit; margin:0; padding:0; font-weight:800; line-height:1.15; letter-spacing:-.02em; } #mn-root p { margin:0; color:inherit; } #mn-root a { color:inherit; text-decoration:none; } #mn-root ul { list-style:none; margin:0; padding:0; } #mn-root li { margin:0; padding:0; } #mn-root img { display:block; max-width:100%; } #mn-root button { font-family:"Helvetica Neue",Helvetica,Arial,sans-serif; } /* ─── YARDIMCI ──────────────────────────────────────────────────── */ #mn-root .wrap { max-width:1380px; margin-left:auto; margin-right:auto; padding-left:clamp(16px,4vw,48px); padding-right:clamp(16px,4vw,48px); } #mn-root .eyebrow { display:inline-flex; align-items:center; gap:8px; font-size:.75rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:#7a7a8c; margin-bottom:14px; } #mn-root .eyebrow::before { content:""; display:block; width:24px; height:2px; background:#ED1C24; border-radius:2px; flex-shrink:0; } #mn-root .eyebrow--light { color:rgba(255,255,255,.55); } #mn-root .eyebrow--light::before { background:rgba(255,255,255,.5); } #mn-root .section-title { font-size:clamp(1.6rem,3vw,2.4rem); font-weight:800; line-height:1.15; letter-spacing:-.02em; } #mn-root .section-title .hl { position:relative; white-space:nowrap; } #mn-root .section-title .hl::after { content:""; position:absolute; bottom:-3px; left:0; right:0; height:3px; background:#ED1C24; border-radius:2px; } /* ─── BUTONLAR ──────────────────────────────────────────────────── */ #mn-root .btn { display:inline-flex; align-items:center; gap:6px; padding:11px 26px; border-radius:10px; font-size:.9rem; font-weight:600; text-decoration:none; border:1.5px solid transparent; transition:all .25s; cursor:pointer; white-space:nowrap; font-family:"Helvetica Neue",Helvetica,Arial,sans-serif; line-height:1.4; } #mn-root .btn-accent { background:#09008B; color:#fff; border-color:#09008B; } #mn-root .btn-accent:hover { background:#0d00ad; border-color:#0d00ad; color:#fff; } #mn-root .btn-outline { background:transparent; color:#09008B; border-color:#09008B; } #mn-root .btn-outline:hover { background:#09008B; color:#fff; } #mn-root .btn-white { background:#fff; color:#09008B; border-color:#fff; } #mn-root .btn-white:hover { background:transparent; color:#fff; border-color:#fff; } #mn-root .btn-block { display:flex; justify-content:center; width:100%; } @media (max-width:768px) { #mn-root .hide-mob { display:none !important; } } @media (min-width:769px) { #mn-root .show-mob { display:none !important; } } /* ═══════════════════════════════════════════════════════════════════ 1 · HERO SLİDER ═══════════════════════════════════════════════════════════════════ */ #mn-root #monador-v14-wrapper { position:relative; width:100%; height:72vh; min-height:560px; overflow:hidden; user-select:none; background:#000; } #mn-root #mv14-track { display:flex; height:100%; overflow-x:auto; overflow-y:hidden; scroll-snap-type:x mandatory; scrollbar-width:none; touch-action:pan-y; will-change:scroll-position; } #mn-root #mv14-track::-webkit-scrollbar { display:none; } #mn-root .mv14-slide { position:relative; flex:0 0 100%; height:100%; scroll-snap-align:start; display:flex; align-items:center; padding-left:clamp(6%,10vw,180px); padding-right:5%; overflow:hidden; } #mn-root .mv14-bg { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:1; pointer-events:none; } #mn-root .img-center { object-position:center; } #mn-root .img-up { object-position:center 20%; } #mn-root .mv14-overlay { position:absolute; inset:0; background:linear-gradient(100deg,rgba(0,0,0,.55) 35%,rgba(0,0,0,.15) 100%); z-index:2; } #mn-root .mv14-content { position:relative; z-index:3; max-width:720px; } #mn-root .mv14-title { color:#fff; font-size:clamp(1.75rem,4vw,3.25rem); font-weight:800; line-height:1.1; letter-spacing:-.02em; margin-bottom:18px; } #mn-root .mv14-desc { color:rgba(255,255,255,.9); font-size:clamp(.95rem,1.5vw,1.15rem); line-height:1.65; margin-bottom:32px; } #mn-root a.mv14-btn { display:inline-flex; align-items:center; padding:13px 32px; border:1.5px solid rgba(255,255,255,.8); border-radius:10px; color:#fff; background:rgba(255,255,255,.08); backdrop-filter:blur(6px); font-weight:600; font-size:.95rem; text-decoration:none; transition:all .3s; } #mn-root a.mv14-btn:hover { background:#fff; color:#000; border-color:#fff; } #mn-root .mv14-arrow { position:absolute; top:50%; transform:translateY(-50%); z-index:10; background:rgba(255,255,255,.12); backdrop-filter:blur(6px); border:1px solid rgba(255,255,255,.2); border-radius:50%; width:52px; height:52px; display:flex; align-items:center; justify-content:center; cursor:pointer; opacity:.8; transition:opacity .25s,background .25s; } #mn-root .mv14-arrow:hover { opacity:1; background:rgba(255,255,255,.25); } #mn-root .mv14-arrow svg { width:22px; height:22px; fill:none; stroke:#fff; stroke-width:2; stroke-linecap:round; } #mn-root .mv14-prev { left:20px; } #mn-root .mv14-next { right:20px; } #mn-root .mv14-dots { position:absolute; bottom:28px; left:50%; transform:translateX(-50%); z-index:10; display:flex; gap:8px; } #mn-root .mv14-dot { width:8px; height:8px; background:rgba(255,255,255,.35); border-radius:50%; cursor:pointer; transition:all .3s; } #mn-root .mv14-dot.active { background:#fff; width:24px; border-radius:4px; } @media (max-width:768px) { #mn-root #monador-v14-wrapper { height:78vh; min-height:520px; } #mn-root .mv14-arrow { display:none; } } /* ═══════════════════════════════════════════════════════════════════ 2 · ÜRÜNLER ═══════════════════════════════════════════════════════════════════ */ #mn-root #urunlerikesfedin { background:#292929; } #mn-root .products-header { display:flex; align-items:flex-end; justify-content:space-between; gap:24px; padding-top:52px; padding-bottom:28px; } #mn-root .products-header h2 { color:#fff; font-size:clamp(1.5rem,2.5vw,2rem); } #mn-root .products-header p { color:rgba(255,255,255,.55); font-size:.92rem; margin-top:6px; } #mn-root .products-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:2px; } #mn-root .product-card { position:relative; display:block; text-decoration:none; aspect-ratio:4/3; overflow:hidden; } #mn-root .product-card__bg { position:absolute; inset:0; background-size:cover; background-position:center; filter:brightness(.72); transition:transform .7s,filter .5s; } #mn-root .product-card:hover .product-card__bg { transform:scale(1.06); filter:brightness(.55); } #mn-root .product-card__grad { position:absolute; inset:0; background:linear-gradient(to top,rgba(0,0,0,.7) 0%,transparent 55%); } #mn-root .product-card__body { position:absolute; bottom:0; left:0; right:0; padding:20px 22px 22px; z-index:2; display:flex; align-items:flex-end; justify-content:space-between; gap:12px; } #mn-root .product-card__title { color:#fff; font-size:clamp(.9rem,1.4vw,1.15rem); font-weight:700; line-height:1.25; } #mn-root .product-card__arrow { flex-shrink:0; width:32px; height:32px; border:1.5px solid rgba(255,255,255,.4); border-radius:50%; display:flex; align-items:center; justify-content:center; opacity:0; transform:translateX(-6px); transition:opacity .3s,transform .3s; } #mn-root .product-card__arrow svg { width:14px; height:14px; fill:none; stroke:#fff; stroke-width:2; } #mn-root .product-card:hover .product-card__arrow { opacity:1; transform:translateX(0); } @media (max-width:900px) { #mn-root .products-grid { grid-template-columns:repeat(2,1fr); } } @media (max-width:560px) { #mn-root .products-grid { grid-template-columns:1fr; } #mn-root .product-card { aspect-ratio:16/9; } } /* ═══════════════════════════════════════════════════════════════════ 3 · ÇÖZÜMLER ═══════════════════════════════════════════════════════════════════ */ #mn-root #cozumlerimiz-section { background:#292929; padding-top:88px; padding-bottom:88px; border-top:1px solid rgba(255,255,255,.06); } #mn-root .solutions-grid { display:grid; grid-template-columns:1fr 1fr; gap:clamp(32px,5vw,72px); align-items:center; } #mn-root .solutions-text .section-title { color:#fff; margin-bottom:20px; } #mn-root .solutions-text p { color:rgba(255,255,255,.65); font-size:.97rem; line-height:1.75; } #mn-root .solutions-video { position:relative; border-radius:28px; overflow:hidden; aspect-ratio:16/10; background:url("https://www.monador.com.tr/wp-content/uploads/2024/10/Security.jpg") center/cover no-repeat; box-shadow:0 32px 64px rgba(0,0,0,.4); } #mn-root .solutions-video__veil { position:absolute; inset:0; background:rgba(0,0,0,.3); } #mn-root .solutions-video__play { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; z-index:2; text-decoration:none; transition:transform .3s; } #mn-root .solutions-video__play:hover { transform:scale(1.08); } #mn-root .play-ring { width:76px; height:76px; border-radius:50%; background:rgba(255,255,255,.18); backdrop-filter:blur(8px); border:2px solid rgba(255,255,255,.5); display:flex; align-items:center; justify-content:center; box-shadow:0 8px 32px rgba(0,0,0,.3); } #mn-root .play-ring svg { width:28px; height:28px; fill:#fff; margin-left:4px; } @media (max-width:768px) { #mn-root .solutions-grid { grid-template-columns:1fr; } #mn-root .solutions-video { aspect-ratio:16/9; } } /* ═══════════════════════════════════════════════════════════════════ 4 · BAKIM PAKETLERİ ═══════════════════════════════════════════════════════════════════ */ #mn-root #bakimpaketleri { background:#f4f4f7; padding-top:88px; padding-bottom:88px; } #mn-root .packages-intro { display:flex; align-items:flex-end; justify-content:space-between; gap:32px; margin-bottom:40px; } #mn-root .packages-intro__left { max-width:560px; } #mn-root .packages-intro .section-title { margin-bottom:14px; color:#292929; } #mn-root .packages-intro p { color:#7a7a8c; font-size:.95rem; line-height:1.7; margin-top:12px; } #mn-root .packages-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:20px; } #mn-root .pkg { background:#fff; border-radius:28px; overflow:hidden; display:flex; flex-direction:column; box-shadow:0 2px 12px rgba(0,0,0,.06); transition:box-shadow .3s,transform .3s; } #mn-root .pkg:hover { box-shadow:0 12px 40px rgba(9,0,139,.12); transform:translateY(-4px); } #mn-root .pkg__bar { height:5px; } #mn-root .pkg--silver .pkg__bar { background:linear-gradient(90deg,#8e9eab,#c8d6df); } #mn-root .pkg--gold .pkg__bar { background:linear-gradient(90deg,#c8952a,#f0c040); } #mn-root .pkg--plat .pkg__bar { background:linear-gradient(90deg,#09008B,#6b5ce7); } #mn-root .pkg__head { padding:28px 28px 20px; } #mn-root .pkg__badge { display:inline-block; padding:4px 12px; border-radius:20px; font-size:.72rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase; margin-bottom:14px; } #mn-root .pkg--silver .pkg__badge { background:#ecf1f4; color:#607080; } #mn-root .pkg--gold .pkg__badge { background:#fdf6e3; color:#9a7000; } #mn-root .pkg--plat .pkg__badge { background:#eeeeff; color:#09008B; } #mn-root .pkg__name { font-size:1.25rem; font-weight:800; color:#292929; margin-bottom:6px; } #mn-root .pkg__cta { padding:0 28px 24px; } #mn-root .pkg__features { padding:0 28px 28px; display:flex; flex-direction:column; gap:11px; flex:1; } #mn-root .pkg__features li { display:flex; align-items:flex-start; gap:10px; font-size:.875rem; color:#444; line-height:1.45; } #mn-root .pkg__features li svg { flex-shrink:0; width:15px; height:15px; margin-top:1px; } #mn-root .pkg--silver li svg { fill:#607080; } #mn-root .pkg--gold li svg { fill:#c8952a; } #mn-root .pkg--plat li svg { fill:#09008B; } @media (max-width:960px) { #mn-root .packages-intro { flex-direction:column; align-items:flex-start; } #mn-root .packages-grid { grid-template-columns:1fr 1fr; } } @media (max-width:600px) { #mn-root .packages-grid { grid-template-columns:1fr; } } /* ═══════════════════════════════════════════════════════════════════ 5 · SERVİS TALEBİ ═══════════════════════════════════════════════════════════════════ */ #mn-root #servis-talebi { background:#292929; padding-top:72px; padding-bottom:72px; position:relative; overflow:hidden; } #mn-root #servis-talebi::before { content:""; position:absolute; top:-80px; right:-80px; width:400px; height:400px; background:rgba(255,255,255,.03); border-radius:50%; } #mn-root .service-grid { display:grid; grid-template-columns:auto 1fr; gap:clamp(32px,5vw,80px); align-items:center; position:relative; z-index:1; } #mn-root .service-img img { width:clamp(240px,30vw,460px); object-fit:contain; filter:drop-shadow(0 20px 40px rgba(0,0,0,.3)); } #mn-root .service-text .section-title { color:#fff; margin-bottom:14px; } #mn-root .service-text p { color:rgba(255,255,255,.75); font-size:.97rem; line-height:1.7; margin-bottom:28px; } @media (max-width:680px) { #mn-root .service-grid { grid-template-columns:1fr; text-align:center; } #mn-root .service-img { display:flex; justify-content:center; } #mn-root .service-img img { width:220px; } } /* ═══════════════════════════════════════════════════════════════════ 6 · PROJELERİMİZ ═══════════════════════════════════════════════════════════════════ */ #mn-root #projects { padding-top:88px; padding-bottom:88px; background:#fff; } #mn-root .projects-header { display:flex; align-items:center; justify-content:space-between; gap:20px; margin-bottom:32px; } #mn-root .projects-header h3 { font-size:clamp(1.3rem,2vw,1.75rem); font-weight:800; color:#292929; letter-spacing:-.02em; } #mn-root .projects-mosaic { display:grid; grid-template-columns:1fr 1fr; gap:10px; align-items:stretch; } #mn-root .proj-left { display:flex; } #mn-root .proj-right { display:grid; grid-template-columns:1fr 1fr; gap:10px; } #mn-root .proj-tile { display:block; position:relative; border-radius:20px; overflow:hidden; text-decoration:none; background-size:cover; background-position:center; background-color:#222; } #mn-root .proj-tile--tall { flex:1; min-height:420px; } #mn-root .proj-tile--sq { aspect-ratio:16/10; } #mn-root .proj-tile::before { content:""; position:absolute; inset:0; background:linear-gradient(to top,rgba(0,0,0,.65) 0%,rgba(0,0,0,.08) 55%); transition:background .35s; } #mn-root .proj-tile:hover::before { background:rgba(0,0,0,.3); } #mn-root .proj-tile__label { position:absolute; bottom:16px; left:16px; right:16px; color:#fff; font-size:clamp(.78rem,1.1vw,.92rem); font-weight:700; line-height:1.3; z-index:1; } @media (max-width:860px) { #mn-root .projects-mosaic { grid-template-columns:1fr; } #mn-root .proj-tile--tall { min-height:260px; } #mn-root .proj-tile--sq { aspect-ratio:16/9; } } @media (max-width:560px) { #mn-root .proj-right { grid-template-columns:1fr; } } /* ═══════════════════════════════════════════════════════════════════ 7 · 4 ADIM ═══════════════════════════════════════════════════════════════════ */ #mn-root #secim-adim { padding-top:88px; padding-bottom:88px; background-color:#1a1a2e; background-image:linear-gradient(160deg,rgba(26,26,46,.88) 0%,rgba(34,33,46,.88) 100%),url("https://img.monador.com.tr/wp-content/uploads/2024/10/Manyetik-Kayar-Kapi-Slide-Image-7-768x504.webp"); background-size:cover; background-position:center; } #mn-root .steps-grid { display:grid; grid-template-columns:1fr 1fr; gap:56px; align-items:center; } #mn-root .steps-text .section-title { color:#fff; margin-bottom:16px; } #mn-root .steps-text p { color:rgba(255,255,255,.6); font-size:.95rem; line-height:1.7; } #mn-root .steps-cards { display:grid; grid-template-columns:1fr 1fr; gap:16px; } #mn-root .step-card { background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.1); border-radius:20px; padding:22px 20px; transition:background .3s,border-color .3s; } #mn-root .step-card:hover { background:rgba(255,255,255,.11); border-color:rgba(255,255,255,.2); } #mn-root .step-num { display:inline-flex; align-items:center; justify-content:center; width:30px; height:30px; border-radius:8px; background:rgba(255,255,255,.12); color:rgba(255,255,255,.8); font-size:.75rem; font-weight:800; margin-bottom:14px; } #mn-root .step-card h3 { color:#fff; font-size:.97rem; font-weight:700; margin-bottom:8px; } #mn-root .step-card p { color:rgba(255,255,255,.55); font-size:.82rem; line-height:1.55; margin-bottom:14px; } #mn-root .step-card img { width:100%; max-height:110px; object-fit:contain; border-radius:8px; } @media (max-width:860px) { #mn-root .steps-grid { grid-template-columns:1fr; gap:36px; } #mn-root .steps-text { text-align:center; } } @media (max-width:500px) { #mn-root .steps-cards { grid-template-columns:1fr; } } /* ═══════════════════════════════════════════════════════════════════ 8 · SSS ═══════════════════════════════════════════════════════════════════ */ #mn-root #sss { padding-top:88px; padding-bottom:88px; background:#fff; border-top:1px solid #e8e8f0; } #mn-root .faq-grid { display:grid; grid-template-columns:380px 1fr; gap:clamp(40px,6vw,80px); align-items:start; } #mn-root .faq-side .section-title { margin-bottom:14px; color:#292929; } #mn-root .faq-side p { color:#7a7a8c; font-size:.93rem; line-height:1.7; margin-bottom:24px; } #mn-root .faq-side img { width:100%; border-radius:20px; margin-bottom:24px; aspect-ratio:16/9; object-fit:cover; } #mn-root .faq-list { border:1px solid #e8e8f0; border-radius:28px; overflow:hidden; } #mn-root .faq-item { border-bottom:1px solid #e8e8f0; } #mn-root .faq-item:last-child { border-bottom:none; } #mn-root .faq-item summary { display:flex; align-items:center; justify-content:space-between; gap:20px; padding:20px 24px; font-size:.93rem; font-weight:600; color:#292929; cursor:pointer; list-style:none; transition:background .2s; outline:none; font-family:"Helvetica Neue",Helvetica,Arial,sans-serif; } #mn-root .faq-item summary::-webkit-details-marker { display:none; } #mn-root .faq-item summary:hover { background:#f4f4f7; } #mn-root .faq-item[open] summary { background:#f0f0ff; color:#09008B; } #mn-root .faq-icon { flex-shrink:0; width:28px; height:28px; border-radius:50%; border:1.5px solid #e8e8f0; display:flex; align-items:center; justify-content:center; font-size:1.1rem; font-weight:300; color:#7a7a8c; transition:all .25s; } #mn-root .faq-item[open] .faq-icon { background:#09008B; border-color:#09008B; color:#fff; transform:rotate(45deg); } #mn-root .faq-item__answer { padding:4px 24px 20px; font-size:.9rem; color:#7a7a8c; line-height:1.75; } @media (max-width:900px) { #mn-root .faq-grid { grid-template-columns:1fr; } #mn-root .faq-side img { display:none; } } /* ═══════════════════════════════════════════════════════════════════ 9 · BLOG ═══════════════════════════════════════════════════════════════════ */ #mn-root #blog-section { background:#f4f4f7; padding-top:88px; padding-bottom:88px; } #mn-root .blog-header { display:flex; align-items:flex-end; justify-content:space-between; gap:24px; margin-bottom:36px; } #mn-root .blog-header .section-title { margin-bottom:8px; color:#292929; } #mn-root .blog-header p { color:#7a7a8c; font-size:.92rem; } #mn-root .blog-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:24px; } #mn-root .blog-card { background:#fff; border-radius:28px; overflow:hidden; text-decoration:none; display:flex; flex-direction:column; box-shadow:0 1px 4px rgba(0,0,0,.06); border:1px solid #e8e8f0; transition:transform .3s,box-shadow .3s; color:#1a1a2e; } #mn-root .blog-card:hover { transform:translateY(-5px); box-shadow:0 16px 40px rgba(0,0,0,.1); } #mn-root .blog-thumb { aspect-ratio:16/9; overflow:hidden; } #mn-root .blog-thumb img { width:100%; height:100%; object-fit:cover; transition:transform .5s; } #mn-root .blog-card:hover .blog-thumb img { transform:scale(1.06); } #mn-root .blog-body { padding:20px 22px 22px; flex:1; display:flex; flex-direction:column; } #mn-root .blog-cat { display:inline-block; font-size:.7rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:#09008B; background:#eeeeff; padding:3px 10px; border-radius:20px; margin-bottom:12px; } #mn-root .blog-title { font-size:.97rem; font-weight:700; color:#292929; line-height:1.45; flex:1; } #mn-root .blog-title a { text-decoration:none; color:#292929; transition:color .2s; } #mn-root .blog-title a:hover { color:#09008B; } #mn-root .blog-meta { display:flex; align-items:center; gap:6px; margin-top:14px; font-size:.8rem; color:#7a7a8c; } #mn-root .blog-meta svg { width:13px; height:13px; fill:none; stroke:currentColor; stroke-width:1.5; } #mn-root .blog-footer { display:flex; justify-content:flex-end; margin-top:28px; } @media (max-width:900px) { #mn-root .blog-grid { grid-template-columns:1fr 1fr; } } @media (max-width:600px) { #mn-root .blog-grid { grid-template-columns:1fr; } #mn-root .blog-header { flex-direction:column; align-items:flex-start; } #mn-root .blog-footer { justify-content:center; } }