supaya halaman arsitek terasa beda, bukan re-skin halaman lain. Dimuat SETELAH css/style.css, css/tukang-cat.css, dan css/service-interactive.css. Catatan: var(--card), var(--ink) dst di bawah ini SEMUA ditulis dengan nilai cadangan (var(--card, #fff) dst) supaya kalau css/style.css atau css/tukang-cat.css gagal/telat ke-load di server, section-section baru di file ini TETAP punya warna dan bingkai — tidak polos putih. Kalau var aslinya ke-load normal, cadangan ini tidak dipakai sama sekali (transparan buat tema asli). ============================================================ */ .page-arsitek{ --ar-accent:#2c4a63; --ar-accent-soft:#eaf0f4; --ar-line:rgba(44,74,99,0.32); --ar-mono:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; /* Jaring pengaman terakhir: apapun penyebabnya, halaman ini tidak boleh bisa digeser ke samping di HP. */ overflow-x:hidden; max-width:100vw; } /* DIHAPUS: html:has(...){overflow-x:hidden} — memberi overflow pada membuat jadi scroll container, sehingga header position:sticky berhenti mengambang. body{overflow-x:hidden} di style.css sudah merambat ke viewport, jadi aturan ini memang tidak diperlukan. */ /* Gambar placeholder yang belum diganti foto asli (404) tampil sebagai kotak warna polos, bukan ikon "gambar patah" + teks alt yang berantakan dan bisa memicu halaman scroll ke samping. */ .page-arsitek img{ color:transparent;font-size:0;max-width:100%; } /* ---------- LANG SWITCH & TRANSLATE OVERLAY: jaga-jaga ---------- Duplikat dari service-interactive.css, dengan alasan sama seperti di atas: kalau file itu gagal ke-load, tombol ganti bahasa & overlay loading tetap tampil benar, bukan teks/tombol polos tanpa bingkai. */ @keyframes ar-translate-spin{to{transform:rotate(360deg);}} /* ---------- HERO: bingkai blueprint ---------- */ .page-arsitek .hero-blueprint{position:relative;} .page-arsitek .hero-blueprint::before{ content:'';position:absolute;inset:16px; border:1px dashed var(--ar-line);border-radius:2px; pointer-events:none;z-index:0; } .page-arsitek .hero-blueprint .hero-split{position:relative;z-index:1;} .page-arsitek .hero-blueprint .eyebrow{ font-family:var(--ar-mono);letter-spacing:.06em;text-transform:uppercase; border:1px solid var(--ar-line);background:var(--ar-accent-soft); color:var(--ar-accent);padding:5px 12px;border-radius:4px; display:inline-block;font-size:12px; } .page-arsitek .hero-blueprint .hero-media{ border-radius:6px;border:1px solid var(--ar-line);box-shadow:none; } /* ---------- FORM KONSULTASI: bingkai + layout lengkap (jaga-jaga) ---------- Rule layout (grid/flex/padding) di bawah ini SENGAJA diduplikasi dari css/service-interactive.css. Kalau file itu berhasil ke-load normal di server, nilainya sama persis jadi tidak mengubah apa-apa. Kalau file itu GAGAL ke-load (mis. cache-busting query string ?v= diblokir CDN/ hosting), halaman ini tetap tampil dengan layout form yang benar — bukan cuma label+input polos berbaris tanpa bingkai. */ .page-arsitek .wa-form-card{ background:var(--card, #ffffff); border:1px solid var(--card-border, #e4e2d8); box-shadow:0 24px 60px -30px rgba(23,23,15,0.2); border-radius:20px; padding:34px;max-width:620px;margin:0 auto; } .page-arsitek .wa-form-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px;} .page-arsitek .wa-form-field{display:flex;flex-direction:column;gap:7px;} .page-arsitek .wa-form-field.full{grid-column:1/-1;} .page-arsitek .wa-form-field label{font-size:13px;font-weight:600;color:var(--ink, #201f18);} .page-arsitek .wa-form-field input, .page-arsitek .wa-form-field select, .page-arsitek .wa-form-field textarea{ width:100%;box-sizing:border-box; padding:11px 14px;border-radius:10px; border:1px solid var(--card-border, #d8d6cb); background:var(--bg-alt, #f6f5ef); font-size:14px;color:var(--ink, #201f18);font-family:inherit;resize:vertical; } .page-arsitek .wa-form-field input:focus, .page-arsitek .wa-form-field select:focus, .page-arsitek .wa-form-field textarea:focus{ outline:2px solid var(--ar-accent);outline-offset:1px; } .page-arsitek .wa-form-submit{width:100%;margin-top:22px;justify-content:center;} .page-arsitek .wa-form-note{margin-top:14px;font-size:12.5px;color:var(--ink-muted, #6b6a5f);text-align:center;} @media(max-width:560px){ .page-arsitek .wa-form-grid{grid-template-columns:1fr;} .page-arsitek .wa-form-card{padding:24px 20px;} } /* ---------- TOC: aksen warna berbeda ---------- */ .page-arsitek .toc-card{border-left-color:var(--ar-accent);} .page-arsitek .toc-card a:hover{color:var(--ar-accent);} .page-arsitek .toc-card a::before{background:var(--ar-accent);} /* ---------- KALKULATOR: satu pembungkus utuh, form + panel tips ---------- Sama seperti form konsultasi di atas: .calc-grid/.calc-field di bawah ini duplikat jaga-jaga dari service-interactive.css supaya kalkulator tetap punya layout benar walau file itu gagal ke-load. */ .page-arsitek .calc-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px;} .page-arsitek .calc-field{display:flex;flex-direction:column;gap:7px;} .page-arsitek .calc-field label{font-size:13px;font-weight:600;color:var(--ink, #201f18);} .page-arsitek .calc-field input, .page-arsitek .calc-field select{ width:100%;box-sizing:border-box; padding:11px 14px;border-radius:10px; border:1px solid var(--card-border, #d8d6cb); background:var(--bg-alt, #f6f5ef); font-size:14px;color:var(--ink, #201f18);font-family:inherit; } .page-arsitek .calc-field input:focus, .page-arsitek .calc-field select:focus{outline:2px solid var(--ar-accent);outline-offset:1px;} .page-arsitek .calc-btn{width:100%;margin-top:22px;justify-content:center;} @media(max-width:560px){.page-arsitek .calc-grid{grid-template-columns:1fr;}} .page-arsitek .ar-calc-layout{ display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,0.75fr); gap:0;align-items:stretch; background:var(--card, #ffffff); border:1px solid var(--card-border, #e4e2d8); border-radius:20px;overflow:hidden; box-shadow:0 24px 60px -30px rgba(23,23,15,0.2); } .page-arsitek .ar-calc-layout .calc-card{ margin:0;max-width:none;background:transparent;border:none;box-shadow:none; border-radius:0;padding:32px; border-right:1px solid var(--card-border, #e4e2d8); } .page-arsitek .calc-result{ margin-top:24px;padding:20px 22px;border-radius:14px; font-size:14.5px;color:var(--ink, #201f18);line-height:1.7; border-left-color:var(--ar-accent); background:var(--bg-alt, #f6f5ef); border:1px solid var(--card-border, #e4e2d8); border-left:3px solid var(--ar-accent); } .page-arsitek .calc-result:empty{display:none;} .page-arsitek .ar-calc-tips{ background:var(--ar-accent-soft);border:none;border-radius:0;padding:32px 28px; display:flex;flex-direction:column;justify-content:center; } .page-arsitek .ar-calc-tips h4{ font-family:var(--serif, Georgia, serif);font-size:16px;color:var(--ar-accent);margin-bottom:12px; } .page-arsitek .ar-calc-tips ul{list-style:none;display:flex;flex-direction:column;gap:11px;} .page-arsitek .ar-calc-tips li{ font-size:13.5px;color:var(--ink-muted, #6b6a5f);padding-left:16px;position:relative;line-height:1.55; } .page-arsitek .ar-calc-tips li::before{content:'—';position:absolute;left:0;color:var(--ar-accent);} @media(max-width:860px){ .page-arsitek .ar-calc-layout{grid-template-columns:minmax(0,1fr);border-radius:16px;} .page-arsitek .ar-calc-layout .calc-card{ border-right:none;border-bottom:1px solid var(--card-border, #e4e2d8);padding:26px 22px; } .page-arsitek .ar-calc-tips{padding:24px 22px;} } /* ---------- KENAPA KAMI: grid 2 kolom bernomor, tidak memanjang ---------- */ .page-arsitek #kenapa-kami .why-grid.ar-feature-list{ display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0;counter-reset:ar-feature; background:var(--card, #ffffff);border:1px solid var(--card-border, #e4e2d8); border-radius:16px;overflow:hidden;margin-top:8px; } .page-arsitek #kenapa-kami .why-grid.ar-feature-list .why-card{ display:grid;grid-template-columns:40px minmax(0,1fr);gap:14px;align-items:start; padding:22px 46px 22px 22px; border-bottom:1px solid var(--card-border, #e4e2d8); border-right:1px solid var(--card-border, #e4e2d8); counter-increment:ar-feature;position:relative;background:transparent; box-shadow:none; } .page-arsitek #kenapa-kami .why-grid.ar-feature-list .why-card:nth-child(2n){border-right:none;} .page-arsitek #kenapa-kami .why-grid.ar-feature-list .why-card:nth-last-child(-n+2){border-bottom:none;} .page-arsitek #kenapa-kami .why-grid.ar-feature-list .why-card::after{ content:counter(ar-feature,decimal-leading-zero); font-family:var(--ar-mono);font-size:11px;color:var(--ar-accent); position:absolute;top:22px;right:22px;opacity:.7; } .page-arsitek #kenapa-kami .why-grid.ar-feature-list .why-ic{ grid-column:1;grid-row:1; width:40px;height:40px;border-radius:9px;flex-shrink:0; background:var(--ar-accent-soft);color:var(--ar-accent); display:flex;align-items:center;justify-content:center; } .page-arsitek #kenapa-kami .why-grid.ar-feature-list h3{ grid-column:2;grid-row:1;margin-bottom:4px;font-size:14.5px;color:var(--ink, #201f18); } .page-arsitek #kenapa-kami .why-grid.ar-feature-list p{ grid-column:2;grid-row:2;font-size:13px;line-height:1.5;color:var(--ink-muted, #6b6a5f);margin:0; } @media(max-width:640px){ .page-arsitek #kenapa-kami .why-grid.ar-feature-list{grid-template-columns:minmax(0,1fr);} .page-arsitek #kenapa-kami .why-grid.ar-feature-list .why-card{ padding:18px 40px 18px 16px;border-right:none; } .page-arsitek #kenapa-kami .why-grid.ar-feature-list .why-card:nth-last-child(-n+2){border-bottom:1px solid var(--card-border, #e4e2d8);} .page-arsitek #kenapa-kami .why-grid.ar-feature-list .why-card:last-child{border-bottom:none;} } /* ---------- LAYANAN: grid indeks 2 kolom dengan angka besar ---------- */ .page-arsitek #layanan .why-grid.ar-service-grid{ display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1px; background:var(--card-border, #e4e2d8);border:1px solid var(--card-border, #e4e2d8); border-radius:16px;overflow:hidden;counter-reset:ar-service; } .page-arsitek #layanan .why-grid.ar-service-grid .why-card{ background:var(--card, #ffffff);padding:26px 24px;position:relative; counter-increment:ar-service;box-shadow:none;border-radius:0; } .page-arsitek #layanan .why-grid.ar-service-grid .why-card::after{ content:counter(ar-service,decimal-leading-zero); position:absolute;top:18px;right:22px; font-family:var(--ar-mono);font-size:26px;font-weight:700; color:transparent;-webkit-text-stroke:1px var(--ar-line); } .page-arsitek #layanan .why-grid.ar-service-grid .why-ic.on-alt{ background:transparent;border:1px solid var(--ar-accent);color:var(--ar-accent); border-radius:8px; } @media(max-width:720px){.page-arsitek #layanan .why-grid.ar-service-grid{grid-template-columns:minmax(0,1fr);}} /* ---------- GAYA DESAIN: kartu bingkai putus-putus + label indeks ---------- */ .page-arsitek #gaya-desain .brand-grid.ar-style-grid{ display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px;counter-reset:ar-style; } .page-arsitek #gaya-desain .brand-grid.ar-style-grid .brand-card{ border:1px solid var(--ar-line);border-radius:4px;background:var(--card, #ffffff); position:relative;padding:26px 20px 20px;counter-increment:ar-style; box-shadow:none; } .page-arsitek #gaya-desain .brand-grid.ar-style-grid .brand-card::before{ content:counter(ar-style,decimal-leading-zero); position:absolute;top:-11px;left:16px;background:var(--ar-accent); color:#fff;font-family:var(--ar-mono);font-size:11px; padding:2px 8px;border-radius:3px; } .page-arsitek #gaya-desain .brand-grid.ar-style-grid .brand-tag{ background:var(--ar-accent-soft);color:var(--ar-accent);border:none; } .page-arsitek #gaya-desain .ar-style-thumbs{ display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin-top:16px; } .page-arsitek #gaya-desain .ar-thumb-link{ display:block;position:relative;border-radius:8px;overflow:hidden; aspect-ratio:4/3;min-width:0; } .page-arsitek #gaya-desain .ar-style-thumbs img{ width:100%;height:100%;object-fit:cover;display:block; min-width:0;background:var(--ar-accent-soft);font-size:0; transition:transform .25s ease; } .page-arsitek #gaya-desain .ar-thumb-link:hover img{transform:scale(1.07);} .page-arsitek #gaya-desain .ar-thumb-link::after{ content:'⤢ Lihat';position:absolute;right:6px;bottom:6px; background:rgba(20,26,32,0.68);color:#fff;font-size:11px;font-weight:600; padding:3px 8px;border-radius:5px;opacity:0;transition:opacity .2s ease; pointer-events:none; } .page-arsitek #gaya-desain .ar-thumb-link:hover::after, .page-arsitek #gaya-desain .ar-thumb-link:focus::after{opacity:1;} @media(max-width:900px){.page-arsitek #gaya-desain .brand-grid.ar-style-grid{grid-template-columns:repeat(2,minmax(0,1fr));}} @media(max-width:560px){ .page-arsitek #gaya-desain .brand-grid.ar-style-grid{grid-template-columns:minmax(0,1fr);} .page-arsitek #gaya-desain .ar-style-thumbs{grid-template-columns:repeat(2,minmax(0,1fr));} } /* ---------- PAKET & HARGA: kartu dua-warna, pakai warna dominan ASATURA sendiri (hijau lime + gold) — bukan navy ala goarsitek.com. ---------- */ .page-arsitek .ar-price-tabs{ display:flex;gap:8px;overflow-x:auto;padding:2px 2px 14px; margin:32px 0 6px;position:relative;z-index:1; /* border-top transparan: mencegah margin-top di atas "collapse" dengan margin-bottom elemen sebelumnya (section-head) — tanpa ini, jarak di atas tab bisa hilang/ketutupan kalau tema dasar punya margin negatif di situ. */ border-top:1px solid transparent; scrollbar-width:none; } .page-arsitek .ar-price-tabs::-webkit-scrollbar{display:none;} .page-arsitek .ar-ptab{ flex:0 0 auto;padding:9px 16px;border-radius:999px;white-space:nowrap; border:1px solid var(--card-border, #e4e2d8);background:var(--card, #ffffff); color:var(--ink, #201f18);font-size:13px;font-weight:600;cursor:pointer; transition:all .15s ease; } .page-arsitek .ar-ptab.active{ background:var(--lime-dark, #5c7a1a);border-color:var(--lime-dark, #5c7a1a);color:#fff; } .page-arsitek .ar-pricing-grid{ display:flex;gap:18px;overflow-x:auto;max-width:100%;scroll-snap-type:x mandatory; padding:14px 4px 18px;margin:0 -4px;align-items:stretch; scrollbar-width:thin;scrollbar-color:var(--lime-dark, #5c7a1a) transparent; } .page-arsitek .ar-price-card{ background:var(--card, #ffffff);border:1px solid var(--card-border, #e4e2d8); border-radius:16px;overflow:hidden;display:flex;flex-direction:column; position:relative;min-width:0; flex:0 0 270px;scroll-snap-align:start; } .page-arsitek .ar-price-card[hidden]{display:none;} .page-arsitek .ar-price-card.is-featured{ box-shadow:0 20px 44px -24px rgba(92,122,26,0.45); } .page-arsitek .ar-price-badge{ position:absolute;top:10px;right:10px;z-index:2; background:var(--gold, #c9a227);color:#2b2408;font-size:11px;font-weight:700; padding:4px 11px;border-radius:999px;white-space:nowrap; } .page-arsitek .ar-price-head{ background:var(--lime-dark, #5c7a1a);color:#fff;padding:22px 22px 20px; } .page-arsitek .ar-price-head h3{font-size:20px;font-weight:700;margin:2px 0 8px;color:#fff;} .page-arsitek .ar-price-old{ font-size:13px;color:rgba(255,255,255,0.6);text-decoration:line-through;margin:0; } .page-arsitek .ar-price-tag{margin:0;} .page-arsitek .ar-price-num{font-size:30px;font-weight:800;color:var(--gold, #e8c95c);} .page-arsitek .ar-price-tag span:last-child{font-size:14px;color:rgba(255,255,255,0.75);margin-left:3px;} .page-arsitek .ar-price-body{padding:22px;display:flex;flex-direction:column;flex-grow:1;} .page-arsitek .ar-price-list{list-style:none;display:flex;flex-direction:column;gap:10px;margin-bottom:18px;flex-grow:1;} .page-arsitek .ar-price-list li{ font-size:13px;color:var(--ink, #201f18);padding-left:22px;position:relative;line-height:1.4; } .page-arsitek .ar-price-list li::before{ content:'✓';position:absolute;left:0;color:var(--lime-dark, #5c7a1a);font-weight:700; } .page-arsitek .ar-price-btn{width:100%;justify-content:center;} .page-arsitek .ar-price-revisi{ display:flex;align-items:center;justify-content:center;gap:5px; font-size:11.5px;color:var(--ink-muted, #6b6a5f);margin-top:10px; } @media(min-width:860px){ .page-arsitek .ar-pricing-grid{ overflow-x:visible;scroll-snap-type:none;padding:0 0 8px; display:grid;grid-template-columns:repeat(4,minmax(0,1fr)); } .page-arsitek .ar-price-card{flex-basis:auto;} } /* ---------- PORTFOLIO: grid asimetris, satu proyek unggulan ---------- */ .page-arsitek #portfolio .portfolio-grid.ar-portfolio-grid{ display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:20px; } .page-arsitek #portfolio .portfolio-grid.ar-portfolio-grid .portfolio-card{min-width:0;} .page-arsitek #portfolio .portfolio-grid.ar-portfolio-grid .portfolio-card:nth-child(1){ grid-column:span 4;grid-row:span 2; } .page-arsitek #portfolio .portfolio-grid.ar-portfolio-grid .portfolio-card:nth-child(1) .portfolio-visual{ height:100%;min-height:260px; } .page-arsitek #portfolio .portfolio-grid.ar-portfolio-grid .portfolio-card:nth-child(2), .page-arsitek #portfolio .portfolio-grid.ar-portfolio-grid .portfolio-card:nth-child(3), .page-arsitek #portfolio .portfolio-grid.ar-portfolio-grid .portfolio-card:nth-child(4), .page-arsitek #portfolio .portfolio-grid.ar-portfolio-grid .portfolio-card:nth-child(5), .page-arsitek #portfolio .portfolio-grid.ar-portfolio-grid .portfolio-card:nth-child(6){ grid-column:span 2; } .page-arsitek #portfolio .portfolio-grid.ar-portfolio-grid .portfolio-visual img{ background:var(--ar-accent-soft); } @media(max-width:900px){ .page-arsitek #portfolio .portfolio-grid.ar-portfolio-grid{grid-template-columns:repeat(2,minmax(0,1fr));} .page-arsitek #portfolio .portfolio-grid.ar-portfolio-grid .portfolio-card{ grid-column:span 2 !important;grid-row:auto !important; } .page-arsitek #portfolio .portfolio-grid.ar-portfolio-grid .portfolio-card:nth-child(1) .portfolio-visual{ height:auto;min-height:0; } } /* ---------- TESTIMONI: carousel horizontal bergambar ---------- */ .page-arsitek #testimoni .testi-grid.ar-testi-carousel{ display:flex;gap:20px;overflow-x:auto;max-width:100%;scroll-snap-type:x mandatory; padding-bottom:10px;margin:0 -4px; scrollbar-width:thin;scrollbar-color:var(--ar-accent) transparent; } .page-arsitek #testimoni .testi-grid.ar-testi-carousel .testi-card{ flex:0 0 280px;max-width:280px;scroll-snap-align:start;position:relative; min-height:300px;display:flex;flex-direction:column;justify-content:flex-end; border-radius:16px;overflow:hidden;padding:22px;border:none; background-color:var(--ar-accent-soft); } .page-arsitek #testimoni .testi-grid.ar-testi-carousel .testi-card.has-bg{ background-size:cover;background-position:center;color:#fff; } .page-arsitek #testimoni .testi-grid.ar-testi-carousel .testi-card.has-bg::before{ content:'';position:absolute;inset:0; background:linear-gradient(180deg,rgba(20,26,32,0.15) 0%,rgba(20,26,32,0.55) 55%,rgba(20,26,32,0.92) 100%); z-index:0; } .page-arsitek #testimoni .testi-grid.ar-testi-carousel .testi-stars, .page-arsitek #testimoni .testi-grid.ar-testi-carousel .testi-quote, .page-arsitek #testimoni .testi-grid.ar-testi-carousel .testi-author{ position:relative;z-index:1; } .page-arsitek #testimoni .testi-grid.ar-testi-carousel .testi-stars{color:#ffc973;font-size:13px;margin-bottom:8px;} .page-arsitek #testimoni .testi-grid.ar-testi-carousel .testi-quote{ font-family:var(--serif, Georgia, serif);font-size:15.5px;font-style:italic;color:#fff;line-height:1.5; } .page-arsitek #testimoni .testi-grid.ar-testi-carousel .testi-author{ display:flex;align-items:center;gap:10px;margin-top:14px; } .page-arsitek #testimoni .testi-grid.ar-testi-carousel .testi-avatar{ background:rgba(255,255,255,0.18);color:#fff;border:1px solid rgba(255,255,255,0.4); } .page-arsitek #testimoni .testi-grid.ar-testi-carousel .testi-author h4{color:#fff;} .page-arsitek #testimoni .testi-grid.ar-testi-carousel .testi-author span{color:rgba(255,255,255,0.75);} .page-arsitek .ar-carousel-hint{ text-align:center;font-size:12.5px;color:var(--ink-muted, #6b6a5f);margin-top:10px; } @media(min-width:900px){.page-arsitek .ar-carousel-hint{display:none;}} /* ---------- PROSES: garis waktu vertikal ---------- */ .page-arsitek #proses .why-grid.ar-timeline{ display:flex;flex-direction:column;gap:0;position:relative; max-width:700px;margin:0 auto; } .page-arsitek #proses .why-grid.ar-timeline::before{ content:'';position:absolute;left:23px;top:6px;bottom:6px;width:1px; background:var(--ar-line); } .page-arsitek #proses .why-grid.ar-timeline .why-card{ display:grid;grid-template-columns:48px minmax(0,1fr);gap:20px; padding:0 0 32px;position:relative;background:transparent; border:none;box-shadow:none; } .page-arsitek #proses .why-grid.ar-timeline .why-card:last-child{padding-bottom:0;} .page-arsitek #proses .why-grid.ar-timeline .why-ic.is-step{ grid-column:1;grid-row:1; width:48px;height:48px;border-radius:999px;flex-shrink:0; background:var(--ar-accent);color:#fff; display:flex;align-items:center;justify-content:center; font-family:var(--ar-mono);font-weight:700;position:relative;z-index:1; } .page-arsitek #proses .why-grid.ar-timeline .why-card h3{ grid-column:2;grid-row:1;margin-bottom:4px;padding-top:10px; } .page-arsitek #proses .why-grid.ar-timeline .why-card p{ grid-column:2;grid-row:2;margin:0; } /* ---------- AREA: sentuhan ringan ---------- */ .page-arsitek #area .chip{border-radius:4px;} .page-arsitek #area .cta-card{border:1px dashed var(--ar-line);} /* ---------- FAQ: akordeon bernomor ---------- */ .page-arsitek #faq .faq-list.ar-faq-list{display:flex;flex-direction:column;gap:10px;counter-reset:ar-faq;} .page-arsitek #faq .faq-list.ar-faq-list .faq-item{ border:1px solid var(--card-border, #e4e2d8);border-left:3px solid var(--ar-accent); border-radius:8px;background:var(--card, #ffffff);counter-increment:ar-faq; } .page-arsitek #faq .faq-list.ar-faq-list .faq-item summary{padding-left:44px;position:relative;} .page-arsitek #faq .faq-list.ar-faq-list .faq-item summary::before{ content:counter(ar-faq,decimal-leading-zero); position:absolute;left:16px;top:50%;transform:translateY(-50%); font-family:var(--ar-mono);font-size:12px;color:var(--ar-accent); } /* ---------- SAFETY NET: cegah scroll horizontal dari elemen manapun ---------- */ .page-arsitek main{max-width:100vw;overflow-x:clip;} .page-arsitek .wrap{min-width:0;} /* --------------------------------------------------------- KARTU GAYA DESAIN — kartu kelebihan/kekurangan bergambar Memakai .lp-choice-card dari layanan.css, ditambah gambar render di kepala kartu. --------------------------------------------------------- */ .ar-gaya-card{overflow:hidden;} .ar-gaya-img{aspect-ratio:16/10;overflow:hidden;background:var(--bg-alt);} .ar-gaya-img img{width:100%;height:100%;object-fit:cover;display:block;} @media(min-width:900px){ .ar-gaya-card{display:grid;grid-template-columns:minmax(0,320px) 1fr;align-items:stretch;} .ar-gaya-img{aspect-ratio:auto;height:100%;} }