/* Aturan layar kecil buat ISI halaman (TCK-0258). * * Kenapa berkas sendiri, bukan nempel di mockup.css: mockup.css DIBIKIN * OTOMATIS oleh tools/port_mockup.mjs dan berkasnya sendiri nulis "jangan * diedit tangan" — aturan apa pun yang ditaruh di sana bakal lenyap tanpa * suara pas dia digenerate ulang. Dan bukan di app.css juga: app.css itu * cangkang (sidebar, topbar, nav bawah), sedangkan ini isi halaman. * * Dimuat PALING AKHIR di index.html — sesudah mockup.css — supaya jaring * pengaman di bawah bisa ngalahin gaya yang nempel di template. * * Dua bagian, dan bedanya disengaja: * 1. DASHBOARD — digarap bener: layout-nya udah dipindah dari atribut style * di web/tpl/dashboard.html ke kelas di sini. NOL !important. * 2. JARING PENGAMAN — buat 25 template lain yang layout-nya masih dipaku * di atribut style. Di situ !important memang dipakai, karena atribut * style selalu menang atas berkas gaya. Ini tambalan sementara sampai * tiap halaman digarap seperti Dashboard, dan sengaja ditulis begitu * biar ketahuan mana yang belum beres. */ /* ================= 1. DASHBOARD (digarap bener) ================= */ .dash-kpis { display:grid; grid-template-columns:repeat(auto-fit,minmax(210px,1fr)); gap:16px; } .dash-split { display:grid; grid-template-columns:1.55fr 1fr; gap:20px; align-items:start; } .dash-col { display:flex; flex-direction:column; gap:20px; min-width:0; } .dash-card { background:var(--clay-surface); border:1px solid var(--line); border-radius:28px; padding:24px 26px; box-shadow:0 12px 26px rgba(var(--sh),.18), inset 0 2px 0 var(--hi); display:flex; flex-direction:column; } .dash-qa { display:grid; grid-template-columns:1fr 1fr; gap:12px; } /* Nilai-nilai di bawah PERSIS sama dengan yang tadinya nempel di atribut style tiap elemen di web/tpl/dashboard.html — cuma pindah tempat, ga ada yang diubah. Dipindah supaya bisa dikasih aturan layar kecil tanpa palu !important, dan supaya empat kartu angka ga ditulis empat kali. */ .dash-alert { display:flex; gap:14px; align-items:center; border-radius:28px; padding:18px 22px; border:1px solid var(--line); background:linear-gradient(150deg,#fdf0db,var(--clay-surface)); box-shadow:0 12px 26px rgba(var(--sh),.18), inset 0 2px 0 var(--hi); } .dash-alert-btn { flex:none; padding:11px 18px; font-family:inherit; font-size:13.5px; font-weight:900; color:#fff; border:1px solid rgba(255,255,255,.28); background:linear-gradient(180deg,var(--clay-primary-hi),var(--clay-primary)); border-radius:14px; cursor:pointer; box-shadow:0 10px 18px rgba(115,85,232,.42), inset 0 2px 0 rgba(255,255,255,.45), inset 0 -5px 9px rgba(0,0,0,.15); } .dash-kpi { background:var(--clay-surface); border:1px solid var(--line); border-radius:24px; padding:18px 20px; box-shadow:0 12px 26px rgba(var(--sh),.18), inset 0 2px 0 var(--hi); display:flex; align-items:center; gap:14px; } .dash-kpi-ic { width:52px; height:52px; border-radius:18px; display:grid; place-items:center; flex:none; background:var(--clay-well); box-shadow:0 8px 15px rgba(var(--sh),.24), inset 0 2px 0 var(--hi); transform:rotate(-5deg); } .dash-kpi-num { font-size:26px; font-weight:900; letter-spacing:-.02em; } .dash-kpi-lbl { font-size:12.5px; font-weight:800; color:var(--clay-ink-soft); } /* Panel "Laptop lo" (TCK-0259). */ .dash-laptop .laptop-head { display:flex; align-items:baseline; gap:10px; flex-wrap:wrap; } .dash-laptop .laptop-note { font-size:12px; font-weight:900; color:var(--clay-ink-soft); } .laptop-row { display:flex; align-items:flex-start; gap:12px; background:var(--clay-well); border-radius:18px; padding:12px 14px; box-shadow:inset 0 2px 6px rgba(var(--sh),.18); } .laptop-dot { width:12px; height:12px; border-radius:50%; flex:none; margin-top:5px; box-shadow:0 0 0 4px color-mix(in srgb, currentColor 14%, transparent); } .laptop-main { min-width:0; display:flex; flex-direction:column; gap:2px; } .laptop-main b { font-size:14px; font-weight:900; } .laptop-sub, .laptop-doing { font-size:12.5px; font-weight:800; color:var(--clay-ink-soft); } .laptop-doing { font-weight:900; color:var(--clay-ink); } .laptop-limit { margin:0; font-size:12px; font-weight:800; color:var(--clay-ink-soft); line-height:1.5; } .dash-foot { display:flex; align-items:center; gap:10px; } /* Kisi seminggu di Planner. Nilainya persis yang tadinya nempel di markup (tpl/calendar.html), dipindah biar bisa dikasih aturan layar kecil. */ .cal-week { display:grid; grid-template-columns:repeat(7,1fr); gap:8px; } /* ---- Susunan khusus HP (keputusan Angga 4 Sep 2026: "rombak susunannya") ---- * * Di desktop urutannya: panduan tiga langkah -> pengantar -> banner -> * angka -> pipeline/antrean -> kesiapan mesin. Itu urutan buat orang yang * lagi duduk dan mau MEMBACA keadaan. * * Di HP orang ga lagi baca — dia lagi ngecek. Jadi urutannya dibalik ke * "apa yang butuh gw sekarang": peringatan yang ada tombolnya naik paling * atas, angka nyusul, baru kerjaan yang lagi jalan. Panduan tiga langkah * turun paling bawah: dia penting buat user baru, tapi dia yang paling * makan layar dan dia ga minta tindakan segera. * * Caranya lewat `order`, bukan mindahin markup: markup-nya SATU buat dua * layar. Kalau susunannya dipisah jadi dua markup, dua-duanya harus dijaga * dan yang satu pasti ketinggalan. `.content` udah flex-column di app.css, * jadi `order` di anak langsungnya emang jalan. * * ISINYA SAMA PERSIS — ga ada satu kartu pun yang dihapus di HP. */ @media (max-width: 720px) { .content > * { order:4; } /* apa pun yang ga disebut = tengah */ .content > .dash-alert { order:1; } /* butuh tindakan lo */ .content > .dash-kpis { order:2; } /* angka sekilas */ .content > .dash-laptop { order:3; } /* keadaan laptop: jalan apa nunggu */ .content > .dash-split { order:4; } /* pipeline, antrean, kesiapan */ .content > .onboard { order:8; } /* panduan: penting, tapi ga mendesak */ .content > .dash-foot { order:9; } /* Peringatan: teks di atas, tombol selebar kartu di bawah. Tombolnya `flex:none` waktu masih nempel di atribut style — itu yang bikin dia nolak mengecil lalu nendang dirinya keluar layar. */ .dash-alert { flex-wrap:wrap; padding:16px; gap:10px; border-radius:22px; } .dash-alert > div { flex:1 1 100%; min-width:0; } .dash-alert-btn { flex:1 1 100%; min-height:44px; } /* Strip angka: empat angka satu baris, ikonnya diturunin. Ikon 52px x4 ga muat di 390px, dan angkanya yang dicari mata — bukan ikonnya. */ .dash-kpis { grid-template-columns:repeat(4,1fr); gap:8px; } .dash-kpi { flex-direction:column; align-items:flex-start; gap:2px; padding:12px 10px; border-radius:18px; } .dash-kpi-ic { display:none; } .dash-kpi-num { font-size:21px; } .dash-kpi-lbl { font-size:10.5px; line-height:1.25; } /* Dua kolom 1.55fr/1fr itu yang bikin Dashboard gepeng di HP: kolom kanan (kesiapan mesin, aksi cepat, hasil terakhir) nyempit jadi ga kebaca. Di HP dia turun ke bawah kolom kiri, urutannya tetap sama. */ .dash-split { grid-template-columns:1fr; gap:16px; } .dash-col { gap:16px; } /* CATATAN (11 Sep 2026): di sini DULU ada aturan kedua buat .dash-kpis (`1fr 1fr`, dua per baris) peninggalan 73ed621 20:30. Aturan empat-per-baris di atas ditulis BELAKANGAN (7fd7b1f 20:51) justru untuk menggantikannya -- ikonnya disembunyikan dan angkanya dikecilkan supaya empat muat di 390px. Tapi yang baru ditaruh di ATAS yang lama, jadi cascade memenangkan yang LAMA: keputusan yang lebih baru tak pernah berlaku, strip angkanya dua kali lebih tinggi dari yang dirancang, dan panel "Laptop lo" ikut terdorong ke bawah. Tidak ada error, cuma halaman yang lebih panjang dari seharusnya. Yang lama dihapus; yang baru sekarang benar-benar jalan. */ .dash-card { padding:18px 16px; border-radius:22px; } /* Aksi cepat tetap dua per baris — tombolnya pendek, ga perlu selebar layar. */ .dash-qa { gap:10px; } } /* ================= 2. JARING PENGAMAN (25 template lain) ================= */ @media (max-width: 720px) { /* * Template hasil ekspor desain naruh layout-nya di atribut style, mis. * `grid-template-columns:1.55fr 1fr`. Di layar 390px itu jadi dua kolom * gepeng, bukan turun ke bawah. Pemilih di bawah nyari elemen yang punya * tulisan itu di atributnya dan maksa jadi satu kolom. * * Kenapa !important: atribut style selalu menang atas berkas gaya. Ga ada * cara lain selain ngedit 25 berkas satu-satu — dan itu memang rencananya, * per halaman, nanti. Sampai itu kejadian, ini yang bikin halaman ga rusak. * * Sengaja TIDAK kena: elemen yang cuma `display:grid` tanpa kolom (mis. * kotak ikon `display:grid;place-items:center`) — itu bukan layout halaman, * dan kalau ikut dipaksa 1fr, ikonnya melar. */ .content [style*="grid-template-columns"] { grid-template-columns:1fr !important; } /* ...KECUALI kisi yang isinya UBIN KECIL. Bedanya dibaca dari ukuran minimum * yang ditulis perancangnya sendiri di markup — itu satu-satunya petunjuk * jujur soal "ini ubin angka" vs "ini kartu isi": * * <= 200px = ubin angka / ikon kecil -> dua per baris masih kebaca * >= 220px = kartu berisi teks -> satu per baris, biar ga jadi * satu kata per baris * * KOREKSI 4 Sep 2026: sebelumnya SEMUA kisi auto-fit dipaksa dua kolom. * Itu salah dan langsung kelihatan: panel Settings (minmax 320px) jadi dua * kolom selebar 190px lalu tumpang tindih, kartu channel (300px) jadi satu * kata per baris, dan pilihan di Niche Bending (260px) ikut kegencet. * Ukuran yang ditulis perancang itu memang informasi — jangan dibuang. */ .content [style*="minmax(120px"], .content [style*="minmax(150px"], .content [style*="minmax(160px"], .content [style*="minmax(170px"], .content [style*="minmax(180px"], .content [style*="minmax(190px"], .content [style*="minmax(200px"] { grid-template-columns:repeat(2,1fr) !important; } /* Baris mendatar di template ga pernah dikasih izin turun ke bawah, jadi * elemen terakhirnya (biasanya tombol) nongol di luar layar dan kepotong — * persis yang kejadian sama "+ Buat Channel" di halaman Channels. */ .content div[style*="display:flex"] { flex-wrap:wrap; } /* Padding kartu 24-34px kebanyakan di layar 390px: isinya tinggal ~330px. */ .content [style*="padding:24px 26px"] { padding:18px 16px !important; } .content [style*="padding:34px"] { padding:20px 16px !important; } .content [style*="border-radius:28px"] { border-radius:22px !important; } /* Apa pun yang lebih lebar dari layar digulung ke dalam kotaknya sendiri, bukan bikin SELURUH halaman geser ke samping. Tabel & blok kode yang lebar itu penyebab paling sering "halamannya bisa digeser-geser". */ .content table, .content pre { display:block; max-width:100%; overflow-x:auto; } .content img, .content svg { max-width:100%; } } /* CATATAN KESALAHAN (4 Sep 2026, dikoreksi di hari yang sama). * * Di sini sempat ada `body { overflow-x:hidden }`. Itu SALAH, dan salahnya * bukan soal rapi: dia cuma NYEMBUNYIIN elemen yang kelewar, ga benerin. Di HP * hasilnya tombol "Sambungin extension" di banner kepotong dan JADI GA BISA * DIPENCET — bukan cuma jelek. Aturan itu dicabut, dan gantinya tiap komponen * yang bikin melebar dibenerin satu-satu di bawah. */ /* ================= 4. KOMPONEN YANG BIKIN MELEBAR DI HP ================= */ @media (max-width: 720px) { /* --- Banner --------------------------------------------------------- * `.banner .btn` di ui.css punya `margin-left:auto; flex:none` — di layar * lebar itu bener (tombol nempel kanan, ga ikut menyusut). Di HP `flex:none` * artinya tombolnya nolak mengecil, jadi dia yang nendang keluar layar. * Di sini banner-nya dibikin turun ke bawah dan tombolnya selebar kartu. */ .banner { flex-wrap:wrap; padding:16px; gap:12px; } .banner > div { flex:1 1 100%; min-width:0; } .banner .b-ico { flex:none; } .banner .btn { margin-left:0; width:100%; text-align:center; } /* --- Baris atas ----------------------------------------------------- * Email panjang ("anggaata.info@gmail.com") makan seluruh baris dan * ngedorong sisanya keluar layar. Chip-nya dibatasin, emailnya dipotong * pakai titik-titik — identitas masih kebaca, tapi ga jadi rakus. * "+ New Content" disembunyiin di HP karena tugasnya udah diambil tab * "Buat" di bar bawah; dua pintu ke layar yang sama cuma makan tempat. */ .topbar { flex-wrap:wrap; } .user-chip { max-width:130px; padding:7px 10px; } .user-chip .chip-email { min-width:0; } .topbar-actions .pill.pill-primary { display:none; } /* --- Kartu & tombol -------------------------------------------------- */ .sec { padding:18px 16px; gap:14px; } .sec h2 { font-size:17px; } /* 44px = ukuran sentuh minimum yang kepegang jempol. Tombol yang lebih pendek dari itu kelihatan bisa dipencet tapi sering meleset. */ .btn { min-height:44px; display:inline-flex; align-items:center; justify-content:center; } /* --- Panduan tiga langkah ------------------------------------------- * Ini yang paling makan layar di HP: judulnya sebesar judul halaman dan * tiap langkah punya paragraf penuh. Dikecilin, bukan dibuang - user baru * justru dia yang paling butuh. */ .onboard { padding:18px 16px; } .onboard-head h2 { font-size:18px; } .onboard-list li { gap:12px; } .onboard-list p { font-size:13px; } .step-row { gap:12px; padding:14px 0; } /* --- Kisi angka ------------------------------------------------------ * minmax 210px bikin 390px cuma muat SATU per baris; halamannya jadi * panjang banget cuma buat empat angka. Dua per baris masih kebaca. */ .kpi-grid, .ready-grid { grid-template-columns:1fr 1fr; gap:12px; } .kpi { padding:14px; gap:10px; } .kpi .k-ic { width:40px; height:40px; border-radius:14px; } .kpi .k-ic .clayico { width:24px; height:24px; } .kpi b { font-size:22px; } .stat-grid { grid-template-columns:1fr 1fr; } /* --- Yang cuma bikin panjang di HP -------------------------------- * Kalimat pengantar Dashboard ("Monitor your content operating system, * active pipeline, queue, ...") itu kalimat pemasaran dari paket desain, * masih bahasa Inggris, dan ga ngasih satu pun keputusan ke user. Di * layar 390px dia makan tiga baris penuh sebelum ada angka pertama. * Disembunyiin di HP, TETAP ADA di desktop — dan penerjemahannya urusan * TCK-0041 (bahasa EN/ID menyeluruh), bukan tiket ini. */ .content > .page-lead { display:none; } /* --- Panduan tiga langkah: ringkas, bukan dipotong ------------------- * Panduan ini makan hampir seluruh layar pertama di HP: tiga langkah, * masing-masing satu paragraf penuh. Yang dilipat cuma PARAGRAF langkah * yang lagi ga digarap — judul ketiga langkah tetap kelihatan semua, dan * langkah yang lagi giliran tetap lengkap sama alasannya. Jadi ga ada * yang hilang, cuma yang belum relevan ga ikut teriak. */ .onboard-list li:not(.now) p { display:none; } .onboard-list li:not(.now) b { font-size:14px; } /* --- Deretan langkah: digulung ke samping, bukan dilipat ------------ * Keputusan Angga 4 Sep 2026 (nunjuk deretan "1. Sumber › 2. Pilih Ide › * 3. Naskah & Scene › 4. Kirim"): "semua item kaya gambar 5 di mobile * dibuat horizontal scroll aja". * * Sebelumnya `.wiz-steps` pakai flex-wrap: di HP dia patah jadi dua baris * dan langkah ke-4 nyangkut sendirian di baris bawah — urutannya jadi * susah kebaca sebagai satu alur. Digulung ke samping, urutannya tetap * satu garis. Pola ini bukan baru: `.journey` di Dashboard udah begitu * dari dulu (`overflow-x:auto`), tinggal disamain. * * `flex:none` di anaknya WAJIB — tanpa itu chip-nya ikut menyusut biar * muat, dan tulisannya yang jadi korban. */ .wiz-steps, .tabs { flex-wrap:nowrap; overflow-x:auto; -webkit-overflow-scrolling:touch; padding-bottom:4px; scrollbar-width:none; } .wiz-steps::-webkit-scrollbar, .tabs::-webkit-scrollbar { display:none; } .wiz-steps > *, .tabs > * { flex:none; } /* Cuma dua kelas ini yang beneran ada di markup — dicek satu-satu, bukan ditulis borongan. Kelas karangan di berkas gaya itu aturan mati yang kelihatan seolah kerja. */ /* --- Sebab paling sering halaman kelewar: anak kisi nolak mengecil ------ * Anak dari grid/flex punya `min-width:auto` — artinya dia ga mau lebih * sempit dari ISINYA. Satu