/* EMKAN v180 consolidated public override stack. Generated in original cascade order. */ /* ===== emkan-v133.css ===== */ /* EMKAN v133 — final shared visual normalization. */ /* Exact Welcome Font Awesome Regular moon availability on every page. */ @font-face { font-family: "Font Awesome 5 Free"; font-style: normal; font-weight: 400; font-display: swap; src: url("data:font/woff2;base64,d09GMgABAAAAADOoAA0AAAAAg8gAADNOAUuGJAAAAAAAAAAAAAAAAAAAAAAAAAAAP0ZGVE0cGh4GYACHWhEICoHaXIGrIgE2AiQDhFQLgjYABCAFilsHjysb8Wllh4yFjQOAcc+nJorywUpm///1uDFEIkGzWj9EnJVk1RqyVdiVQxUSzn3WrT7CWWs36Razj6O36Kfp+3YVhIQiTE0d3sPvNwoWuQ7rdJSHi7vwFRXEhJpWmB823mC8Q/rPi2raEx1yRBU/e0hSNOH752h/p215Yy27WWHARR7HAUYUBdIJvP7CM0S61aTtbpJNIyEJSSQVCC0hJgFFMIFQeiCFUkMxQdADaQFRqUKwHGA5RDwJnpz1bHeigPfWgqW+YunX9FoVPVzXHpVUJTEIPB0+hLG730LLQsqS6CH23X6kKxZJJ56RpNQnKZXUjCgbKWvAoIMVB5JhYhq17f+4wZppUvOTkt/AQqDgNSwkLQcIRqOkmI1751f58dF8R18yJGx7DAFe9DoMA0VYdGV9MIGBfd6a7l6nu7frhC2wDtlyJDuzpO5vYJ45T/AFIoPhGPoK+5+qDaPD+qCjqNm414x52dqw7BmcF/KIg7D86dvuM9t9DmChp7CIX2k46bZTui/KsQqIh87QX6QTrwBVeACWJn4RMP/qrFqYWTakrA3dXqw3ptff67co9f+XhL++BBZYtoWcgEkYJxFmjBnPgZA9gmHmYY5x2pATwZ6QsTekXFQXUuxCLvp9V6W2Su0VbXOqU4xpe3RX7CQMYJrEsaYGyBpusogiIp54umPaPj7NIHNanlrdUwrYCirywnvJJ0T3HhYgAF73txAA75AVgBOidHUjgAmABgycQULwwsMBtIYf1AcB0EZ2AHvyBf/HdAIaCGPgPKLjFlsGWj/4XXieiEahK1gwxGmpUQA7JjZ9YSX3Nz7gbv/fW4EfHQVwpxVIwIcADAcJMhTMJ4YcPqKaWupZRitd9LCBT3Gzg7Nc4Cnf8Ys/Rxx5ClQbY5xJpmky3wV2uc4vvOhV7/vCb/098lKJpZZXQXUtbXVrG2u8yb7uVDd71A8He+Qn74yeG5d+v7j/X+YcW7o127LRfbWjO7UL/8Vn4dwi65jN1u3HPH90bqlU082zzJX2L47tpDXeatllSU22w3uc7PqxZX9y01r2ybbvyxrzvyNoP7/ySz/0FZ/3YY/Y7a3+1Ju80X3+2J1e5qV2Otc5jvYcqxxsudmmm0b9i/qtt/WqXtTz+n/dqq9qd/XV8lpa1WUvW1mLjplqoMJUPOUD5T/Kt5TXlLuUO5R9lL2UPZTdlB2UzZR+ShtlMSWB4oVeR0dRB/kyeZgsI7PIONIM/U56T3pOekK6S7oxLf4qklYIgcrKEDuLklP/6QEOhvOAaTQpP2+pAf1XAzCQBcBQWboZT8krPznNOIDc4IbgQpEQh4zgfp4IgTAuxp9sWAz7NAiBOakSBoChjImIl6sIQKxAXUyiCh5ALsb5hKiP8VwkGTmxrkhAycEyAjyqeACigBH1z2j6K0qIjdFiTtgQpxUgEQufC5MIAytoQRtDP0wVnJ1IAdcDDywNveXEDSjO0srABoHDpHWMworMkWJCYxUttuY6NmmdqXNXIkkp4LH0ppSrygTVABT6QLdeO53fm5ucy0AOMKLB+2CMUIg6h8R7UXFS7xzQVFI8X3g3EpQ8r3HD+kCgZRI0R0s+pDSOdEHA8Ydv3UgdAqWEcgLh3VqEHhNcJhxZm3gUpP1IzbuhKUBjtxFVzvcaWFG67pwzmJLC99WlcjGbaEaVbLU+/tnwxedkffmYfZGyAsAYuQb8PKQZyqkaDNrU0sAvvcJihNxt9wo1F0zbB8pAJS9oXQ0hI2X+ZQklvRBlA0Nn9DDLr3n3HTGlJJnhJMF0Ffh44/MrQ1EnE7dzFQVqupBY51zU6L1EcORdCJl6WichSOXgoel7EeeUCuqpnE63tb1FD0IwYT54tXOyGWFiQyIDl7U3pkywqwn0CEbNxoDEJqxMBnAMAVqP5WYiCrOO8C23FSfLutGKbkLa3spWmF2ez0GcnWY5Iu3vakcMh5Qaadeptvqpq45lKK3wXkL26+k6DnEoyfMIYA1U2YKOBOs2v0sgXiDeQryD+AxIVsVewiMW+8/Yc/7S+2mBw/ieP/DEC4Rs1FX5LHhSgEgjKwq8CUbFaRq08TWPgAASIvEIJhTMmg18aEPW8Fte24IOr6bAaTABsNQjxBhxM5iE/jQVbN5AtAdqzV4GMsawIgK/K5XF4KHgxqqMu3dwsOushwqqv9QsryeB97W5gsYCBIxDWnYR1HW1qmccitI66Odt+31ZaPPciiZz9joO/WilMrJ7hnQ3efK795g0Wnt3x4GDyt6398Ahbe7ZV5+TevgvHRzpRq6XhiMsVwkQ6MN0sUa1CjoArCtpW2uIOmK1B7j7JtbzsOXQfrUQtsTqQlh6VDIjfA24yrOToQ38zhMaQxZ3oi8kyDAEovWtxcC2NZY5GijRPCchJJ5P/dTKTsXEeOLTw0vbi+J4P8+suIcKWuTcoiWN4SiiQ3kRgNGBzQW7x/HZJqnTDn0kJpidV1Bz/6xaJtyqbRTE9/0JyraunOt/AUHaqSxoRa6n2BMMZQau9PrRfRdS5p4DMGjtReUZv9DjFJPxTtHFgUNgqODWgWLXgv+js/fzbX1VjVOy7RPEY0ux4wwkI8s32sowhWeyKU1ZRNxZRYwXKuvRF2iD2l40g5AriEaiCHRooIZbY8kVE0aQGW1DvNgo7WsJnedYmcxAbUBZfXkA7S5saP7c/tc50SMOHzl+PHwW3rp19bJRvTNzsl8fO3rqVPIyuXv3ypgdkMpMqnrrzq3Qix4/cbyn2MkEd2/fTez76tTJU3FJGJfDuULUlX0q2aS/Qx7fqg/00F0XQa/G8ADPZnIxfQVFHofdrZOp96Azpz8Aq/01UxNmbKnnoGcoZsaR7GFPYnwBLkyHhu2DhvkQbNv6XKWN9RhkEN6GaKHAOQjEYtEoZk+nQC3Cqdd1xdLHrNBTvmCSQ7zEuYB4itUsnTFlDjZxDgUzNTRBC/mhq3kxv7VAWZa0ij18krMjpiiZx3EqycD6wlafKpcRQWfAlI0/gCra+2gLKq0hzbHcFU9i4YXNETW4JPQGYctSk/UWBIR6Teq10voAfzKfh1ermbXcRC+uJNCxXtUNddWIwK6W+C+gzxBvQLSDKVu3vBn6oidgrb0GYJGrefZu431hWNJK/rCK+ZgtA/s2dMR9qLi4kRJYIz6sKWys+RNQv/ILcigdUUcW1qARNPdz6PUWgoAj/+aq/wBhrVQoLH0CedSaDjJ8yAMNloskTIpv6l96zp75L7yIt72W32DYWDe86svZNkFYU9awAt2Gv24fnOMfHdFoUnV+va5aVrz0Iy6ZQJwGCV+Nc+h+mMaM4eKrsxaqj3gEWi3O9yDPvrTuHER8KAUauf6WBNPXF62ubUnycoo2wtaU2smtbxNEu4u3un0n0DTlwTmJCIRGfL2Zz5+BOVGMBzYmjP+GoH0rMczTgbpDWMGODeCPuaPUIRKX00TfeQfk+HIB9s4M586CTkBdWURji7LjyQx0YADR5DqXJZyJlEU3SBJUbG6yyPumcnQgS8Y1f62q6JrZ4Uk5NvqtFfI1smiIutXys6KqyvaBkMG7hUHlaYxnzNeVzuYQzTB0Ofrp6OdBzcMQDdOdp7rMCiIC3FceJTMcUYeOwPyjF9SE/87yR8c+nRqGB0wfXUCu6aO44MnJ78rYsvHgMXz7yHpLjwYnY4hV57aNUYiHuf3UBbx8/LqNnwbtKB+ttIOxsQzRNqeDaqEY1dRPtlQNdBR0s/LgPaJlU21HCJyv+eOQNlMsHqZQnW+FN4+oQFxmk0jRWA+FiAbAClWFnR4JsmQEccHBnAZ2ksRP0YFSuMk4Ju+ULshDy1/GIz3sR6K/tUyaqlbI8qatT53D9+56HOywmDpeoUKWS2tQ5TqahYa4No3C+HuNC/F3050vMTfk3FKePWmpG9YhMJVgcaDBec25pd/JdEnBRnkbooyWR63Ti5WgYIgMq3PdlJHJg4qGuAjHGkttJyVDpN3VRb9vrThQamfdy+xyy+0Bsk4KOHANDZo986hLHZeELAdoOGOyHNr1ZvxpNjozp4I1UDtzONW4Boo2jV3PTocfcqlrwUoWhTFEsqxeANO8O89UywEU/xNtxT+nyX0V8Q6b9me8j7Bm4mUwsWnmFocuxdW84A+FL++g2Bzyzr8xVJZVFh3t11d65dzSwF2H6YrdoD4rmdpzpux632Gi6ylZs3Pju8nvPuxQHU95fh/Ew692FfcpnSwiApke1W4fkzG4pBoYMP3Xeojc+tTbxawGOlxwtdulNFJZpHELUVcEOqCi+NVc9X3K4qJ4Zi0Xiozskqg5B2JMXfIjbGgA4WsYoFN+H1KbhuHoCRjyKAMpnfbP9lOYhhXywKv7VfZ9IOXOZcJaKWr/CLmvJdhpz1KVwGyyrKiXu+0e6xrAqtZegZ1QSU6htVceg40679JYXH+1DAM4jU/PdIHgWpc0FnSdUNnL/pCW4w5O8GV7721NIOgJdjg55y3cfeFNd9JfvOfhFuc0G9l38Z1C8LhnfzFVMEDQNV5uQe/rJzNk3fvko4OEkteyhSh0LiPGbpzQpe3ztl/b5xasdJw19MbWxWAHde+tfo3sggfrXHf5iTXk/rZFa9GD77i0rEKYkTfKLNv4gHHocUl70gz6ctUepO9Dnplejg6PDgJfSMMQsiHYzDUP4A0e6bOtXFqwIqR+dmn7AzFJnbezfCDfC0f6qweeaUTiocFaIUEHt9US2jTXsYa0ZF/ZA8EQjJvSCF9kVaOc3AXvge4PsYjUYaMKqLTMVFtoalrqmNPKwF6QXm2leNyZG/Z6M4WjxHL2gBJSh7ogvYMRdhH7CllZRwudiz2dCfdwgo6GB/wMXMAwajcQnIEpAOxgWWL+OunAARR3spE8+UnEzJHgSNHx7CJ4cr2cJ4yDGb+NDxcACdx5JwsXT0QlCrUZgBkAMYNpk9DehTjfDQuvvOhlLAJYjyOWGgS/vmvKU5Y7Ax1P3zuWLGnzXHCbQNSr0JpWX+9I6WulZVlqjjTbHdFPdSHoFIarG63llk9l2u8Vcb8OnEtGgsdgBzRxj6vyw1tSLZoEDxXi3+hXZ/uRP+N1cefWL156OEBubiETADudcgTqsWyqocNyFYaZz1WNkknUBg3F0i7ZB8zYr5oA8l6hnJGsyq+fsReibTVyAKLvvlSp9WniVLPnTdGNpLEUAHmDlFUWSiDDORyiCK50WxBD7fdclRpnPkqeywSPe1/rr3SxpOKsfczRrSo/CuRxdIaV3KreEKta2BGQsHY2ulwTZ6rbXxh7DHKXiuOmY7BDK3R5BxjLBVcOJquXuPWDNYbjVS2yvrIEGrQTotx8UAdloXuRu4m49PB+L3HrsfzBxATi2orIj73O+oRKkMkyIAryZQe0WO7kEAqFLcCMrmUZE/+NJs8mr1TEhsJxULIPjuxilzE2W4GoDZzsHlqug1VaT4bqaViU6oOvdLOeUNzsjyqAyg3vJPNMo9iq0IM98d0lHVYWFta9kDiN2pivnurR7UxOMNN/y6hMJMr7HS7xXYrZ8M67nG4gRrk7gy6aGiiavP+4fuBv/nr12nKNxuW61To1tAr5Am2/PZFOjtn9S6S9KCdtCmNXoaDhCGbKQGjoZ0rDINKM0ucWav34QmS6VLd1EPBaTTbN6ACEFe/0W6ruV0UDfXUE0PlXdaXxyFBjlFc7ld2vzccmb8qaqsODl7somM3sno6wLYAwOKT8L7Lk5x3mdIGni6Uy4TFUXBoT6JX8aDx22p7QYOSS6d/KjjMeQe+us+9XO3zW5eH8TZXJvW/NTawrfAxLsuRY9iepBlim35swNBdx9DgeIzpXgn5N0Iqm0mr0iundQlmDTYKEnvysClV+IC85Je/SeVJ4YcpyXbBz4xycmGXXhGUpz94H9x3x5VX2gsWJsMVJ4vd9cbbWJqGuc723tj9YqphL5u/jbC1NQuDu3pkjj2RoHrbvBgPVn15pzF0WC1y7F79XEywg1E2oflFhvJtvvOMYv9p/2GHH+7iCU16MdbN4UKHggf5N6s70sQtYxdQCraAfz/7KB9in3Isdp/OaJXPFP4iAi+/1z9EHZgGzGlBcOShO49QOKs5fwrga+n89bIo4RRdusQpj6pINwcHanLIBFsUJ9eKP8qvg1IBTW8DcXAWetP1z4Vv/v7cJ+BJ1+MrBPdrHg0Nc3FUzRf8r204gUNgrpGEIkGlKLFulJ4t2gm3lm/cF5Ays0zQy3gELdAsqsWzdl0ycek3XWwbx8xPdnk7/SwnYukrH63ieiV45k2HDxlV2Jcs4CV+hDuRpDWIg7LQqV4IerFAyikmpaKQkuHtp7FMVavw4EuFbg1nhK88eGlSe5mZuSHPJjGwrGXeJ7LEYqhz0m8KGcZjL1eVZVeXFIeN1eWgkKSn168XObCdfA+Ufd8e53/HXb/RWWJ1zn0QwiiAkTfSVeB0iCiCAV+2TPAVL7y9ZoTCq6dXSOHx1y+YrbV7hcSkuKhQTd3+sX3OzNO8wCWQf5zKAMrDbQk+Xd9p7S/vKfk+PoFfh//lnIaheBXF8n4b/AIAj+WGzmugRgJyRWDuKPQ8Q+l0Noo//GQeC1auB5Kq57AlM84OXa5aYTjpEFKS2PWGx+bE08eq3Xt95lb1q5aeXSGagtUt50K+VxvIVUtBYb2KYFf6MZ7fXVVNxsi/B2lLsmUTcPR3mg0wU7g4Rl1b6J7D2PU1coexkSPMOMxq/y7Uh38J6fSMsqNt8C3945+ZrG759qzjdRVqbzfBZOKi0PdXr/IIY/Afjx/fie5xlPDdjpVNC5X1mO0FSpWO+kGzat1oumF8RkVMauBb68dqg/0LEk0Pq3SThEblqxLEfRqOVMR4Trr4PexTeUlXDEL5lqbqRAqyD1c08TMSBBaMtCvqHvlyvqZgFLMZUiwuM8NMoEWvMiLMKz45lpp/wVVYJGVhMBWf6D7wYwl86GbrMP05F9plIH/buFdB4Ck2L6EzgpdPK867R1mZtIovzr55q6fSyoUGN0mOWA8kzU5I163xSC3bQpglTTSVx+3wNf7S0IA633HI7EzShrsM5Yo4jhI6PQMMKLaxK17WyCBMW4R/TERFHe4fN4GAPv2fECXUbLDtiGrJ3BpDR+dH0yNHShMg+oBKNDG7qDAmU0MDUTsWQZkOk5SvNTrsKevJ9PIc1w1N+l0dfzkvfHgjN5wH1JPNp/tYXjpgu7TbEKp2UhqNSMsVP8WY52rzOuvUzZco/QczgYooxZT9hEku2+AemProsNgV/kojs5tD0kZBHmFC56r9rrGLXiuGLLfM5Fs/UPfsOzgTNZLE9nmkc8/zP6pDBwSjKfHI1S3UvjXBMIjlWm3pPlXV1/0GpFNCYqsPTC+3cfsnvSLuBjcQ/JLvoQvv0YVW/p76jTd6WvaCR0uJVzMjljS56trFXNUe1kmBub1haWhiPNcmy2TzPt1qKUqMrHuZJJVJcr7d3L+4cxftuf6PZfPI7htKdxyiw6ci1vj6N2q74vK6uCAG1RBqg7Sgqskk+jlZ2LfRaCKaG8xfd3rzBXgiyNLLB6bEwj4uiF4C0bCwX/z+Id8wxL6vuXD0wVgXp+U17eD/yCs4bfOxCdtT3ZtgF0+3YT5YLPB/qwQD9N+4U9kf+D9a2ceZHWDjPe4HQe+7U27AUozcwHmdNsq4fryK+rvUQ7mmAIJY0Db1mMNVyJYqqPUNEjOFkg+Of84fEfpwNHwhx/posKysd9Ntn1Ouh/pZC+9c/D8Jc9YzH/Wyz1eC2XoagHKJqkknMgSAQQt8NVLXKwfFxSK+H/ibubrC/G3xn79zewX3T041Ou7O7W7vTGwPJGU6WZOt9zNW9Z7erMTf3C2Jet71r1zhduZec3cMp+roIgQh2gsJ+MkQ675s3by8T0V4aPeJEeddXXTmxet8X+gmJ6xgOhEqlXl9w2jQFff45KgdwqIteBtl86b7+xgHbmNE94dIz4t2GFSmy6Isu9rwR0MS2IATNkBaB1Nab2wnwa0fQYP18QfYSr1/Vev7rF9GaPFDt2c8KNtNzKCBRGDYfWD8sR9FTThH5MgYt8rOy6g5NPx4n96FtLN0hmoOsafX6hLAmlYsDbAGzuSfYOHx7Y9NebWKFclofnEQ/tpnxtKw4Pi5z5je1qaDTLHu/m9HqJu1Q7VcPPouw54EpHWuS9XSCxaynuOzHaU/PuyteIwK0J4IDb4wtd/l985Cf2caG7F/4zXzHXT63wCr2zXTpXqGxpTmlBawpIjgJr22R7VnviueCULMmiV0a1OS9SkTpvE6RUNIvkn4qVIxLAL3nAjAjFwfsBZsnaVFjd731dm3zs5ufR9MmNxuwE2HRTQWZesf/qpKQsuyIsK9C1PVeUYVR+bK0P1aF9JHzfWhoZqpT8Ugq+5sEYyPsOckwxuRVryalZh7LvgfC+WHtBuR3KbcPZ+00u59Vz4rBVD9o4NrRwdGzYSxn2ICvYdrgs7TWGVWbn3v7/agp758gkkTWQ7FCg0EYG2jFunePbJhO39LaWVSUgFzEbIHttbX2akAjTbangSIICnjapWuxQdDup7shqKdUjqIJo0yXdJxsEZevnwsFobdW03rSraqHtrr8k9teVK/bGl5q1W7Flwtbn7YeT+FJjnKKx1kD9molQKJXK+PnqCLgaIWnxORHwnVT9BQR+hoVeVV244jxALtWyzzUTw/wlqE8az01hqo96WF4D0sahO/7ED+i/eWzA6pkH65n5Jax3hWPCIN/9bCmjxJ4AfjrlslDZd4B9P5DTO1aLIgnvq+WZPKTeCqi4QhVDl8mAT+ZzzxvkPBoRe/YlkhPbrKP6sBnv2hH4j/04YOkrD3wMDVmcNObvHBR3Y90cCPzdLVsSz+TtdGKtWItjUepA6L7ZlWgl+XZ7iP11hkTpYjv63hmXfgBpk/y2ydfrPzzzdX0wZ6/XMd0lmXE8uyeeQWqzPdFoI4IXCH5mbQjyapPMzcenCk8UvrVN39WXiznk8w8EK4z8+reE99mTGy/aXCSg8unWShrkpUeMmwOvS+wlzVde3Lo0VQ4chIEaSDIHH4pmzRNyq4ITvxgZohlzHgsSQ8ORuYh2uwqUNZ0qrg1vbWJBkF4LCM1tSwNPqCRcqIQhFaeT1Af5bhkpjEa9A5nhbaQQxmZUwrqs+phpds/sDQVM3a/EkEq749h9qYEDv/ungiMDaWvfLC1gdvV+6CT/lQMBPurYBfVBfOsPO+9LHf6LQ10BxKkdXHENGJcndQ4lWi3J0YffPLSHgKzg9y/hGiTkrSa5MTQkF/cQWw4xP7yycHo+LJyMGbtQSke1FaqBwXtAR7vYGZ0UHi8daknRcKTUDyXvpsQHsSMht95LIHmTJRhgCIqKl9fpQJgynouaSz8Vj5ouUyGzWvMk9eaT56sPnB1s+yETMtqJj4kZcv7D1fbFeXZpIfEZhZaBaoNCToN1UV67oMwrn5cyeMx5ZRuHCiaEqFodrZYoq+NU7TeNghnUy62GKOUhYC+u3JnCaI71sD8tyY/L0v1PTPz7Ya3mczvVVmQPdt2NUGVP1q0ojWTuaBBlbXVtBXEYB2CfstI06w5CJx6QJtNtqdhb4wiBHn6VwF061rcg6KC0/IX8X0nNy4+RQt/GXfnlKxtWTxuuU/oznigtwVNdGmwy78XbsH+qwO1N8YEY/vLxpZTr1OXj6k9++lkiu0qqPxs7Mlbp/DKyz/1kbSxqNfmQ+f9xFU9j6sbXVYXUImn5dO9vfadolDcNpFzf/aBxqCk4Hlh1/UfErBzRTsWiKN6tZ9iufjnI33Zcl7U3UbuFyu/v3DzOndy20bzGBxYwoo6URRPrAnzEuMyK7IeHhHkRR5W50X1Jm3vjTrXzckb6fMiyeFM0yLL3p9DCi0lJU5nXHZLYVJLS4dE98Y8/XVPttyfv+2r2E899hWNd9UlBdOsFIJW/gprOnhJcnLKlFEkKieTcW4gPC9A0Z2jP3snSjafoZOPOZmuv9k83TIvJQVntB6PG9xw2/4zFJJr5uDouOAY5guGP4Wsp0goP9rvaOmmD7ul49f4wVItp0smY0p4SanvkF3wGyo1i17ucYFJmVWbyHBS4maczQMlT3gt8vH10ROjxvpjLJTjkd54fI8nYcpkXRytNJh/bVy6+8MmeNgDfKwe7SbTbsUxg4vuN6eGXGj4b5sj3Wta7E3PolLfwLuQdy39Y8QovY/vIh+vCTLqUe+cocQ5GYm1syjMCx7gh2f8QP5RSpzm3TtDHKX5ZODB5h5lmNZSYo/e5afNXQ4EHcCaqyIrUjQpakZuLkN91aTc9AR6i5qRF/SP/5555bhveokC9GDrKjZuvK3HUMEtNZi6/Z+lynQ240MCNzHCoQqfymxq2mvfg8wQi/y0mdaxyDpbZR6QAJpkkE///pgcU/fEy1Fsn5D+u+zod8fzAloCacLJdxQtu2xWEThKmialm+lHGcT53SoEk+4v2L9oA1sZXk+fp/sa3GOC2Hv/RE6ZFCpJ6uD/PvY9mospe7p8U+qXWCrOx0cyq/tEv2DslJMaHau/I6UDLvVwig6VEzZyi7mk42+2i3aLEDkjnkv0InEDvSpCPBsJDJKXRxEOg4U4xXIihcRl27AYHCAwbV6Hqm7thyu1Qe7gVG0lPAv28fh8gupznl2pDU69PVDb5rdSPdB8qoov3YmisQLZLFS9ZdVv2xiIB1YpBX6pclFlCZd8jXOVzAXQJKzSy8LgI9h6+r188tgGWoQil3QtOp6xrfr8N2aBMd2B5tWH0EX0dHf/WUbmnFezX8d72BLHsElBK/lKttKQdIeDA62J1Gues5Ja0IIfuXPwDoJAHfsKkWfbWfbBVfXjmnDN7gEHgK/25RVHGLmaHOYw+CCTSLm9Sh+wscSaiZHgcZKVCxastK/bGGO1ov9Ot6qS2z3yV0ObPHSS2+4qHFFa+txM+2YUsIfBzCSFhu+rv49hsdossDNBD/ta9bWYqCjqo7t1j6jB33NwZPxTeuS8jtDwUZTUXhW8+3rHP2zLEuXEvK07HkSl3ZaGtw+/rwy6eXRndPPqi+AFKiwuGLMJ8/yMHQXclF2Mino8MZFaFicL9Dqm/slw+pukD595d5Z9ad7QH+6HpHzhF5zEOHYZ1VCWsO7nomPGvcCvBfICP3IAh65PNzC1jaaLR+jIn/QnM3M3F4+LcKKobfEEnLhKozxd7lzNDSJNOk62SLlvdDm6xTx6BFAWhI9vGRoat940Oloqx55wxdKvlvH4twjoJmJofik5lf82izsNht3Z58ve1zGHxVFjqo/fTGguXWRaekSE0Rgxz6Qm4DwEFTsPi2WfSiT9Mtn/1X3qcCaOsC700z9hlaqHMvC/KRV6dQbWJfGgaM33fpX4nPs2RnuDJ5XuCT8IO0treFPh7v8tWvCLDgWopAnec1D9V8oQCD/WE2Krx7fEQI+c6Kebc5xtWi40aCzad+MIp7qvumh/9ZwUFE3hAvUT1A3a9PSQw822BhTZ+GRY5LywOg064Sd/Lx5K50R1qWV9qDtMd8ecDbw+mxvHocuqguOl9D1ZwpJa8hAyaKTZbE+tZjB1XHqTQ0LOdp/rwdQyHuhwKW/RuNcXucypF6jq1alqfvghZB1+VkFnifg78zQpSZUVklPc3mrApmpddKC8htsZUDpHTPPxv/bzhEcIBBwOgwFg1FKsmStt9uMm+Kkz9ZnLt8Rfq6Fv2UKDXTD8VstjbJnOt3aU0z9N8w+11oVAhgUGxD/5GzjXu9RmCeGRHsGsJQGlyaAu7cx9705O7Kz2AAr6mLGlYedvDUVnyCvEfn8wjRjNmzli3vVO1MufkgIC2CGb0QAvdAh4WWgTfAzleaFfw5ugkvjB0Nf0GppZPrrQUJxTM3KJ1xACZpykfvgvrDRbuDtit7AASfO45MxyXuoL204uDvXwu8o5U9bAK0ZilXFY+nhRntOukjuLQ98M5WoRnGhU95sp8NVQ+HoyCvXAY/T79+ljcE85UQK0fx0qqM5q0XX9IGhLkGzZ04RSHxW+E1eUkKllNcIz4ndixFfe109f/1EK+0D/swqK718b/yeTUO4wC4tbCqppNQw7A0E6KWdKfG/DNC74NXnEE+HO/WkwJiy4EhM5nmddIJql+drJyfAnz1p4Covn/d7wRlxxJy6hjQc9b0zQj1AzdKYxHdcR/LlAsEpkOqIUbg7iRSiOzB8zzw/YHnwkUliuO2NIkzb1ywgds3V7JnKGcq3fB2AqBdsWggUouVtqQdi8hrgUziHJvEWDPV9+RGAPswuS8I7ES1BDR9KnElnEQzQFrwGDtQyEiJo7eqL+Ns8dpaiXTcrvD8U/aT0MGTa4EXK5EfbcyZAlEVxXW7kIlqQgnQpR6U40WDjzlyaJq800rvqJQ4sPJIX17XXWO/d6pCEFI3iT2bNFyo1xdZghsAm8Y/S1a8eIxnRR8tzwocJDPkW6USwOtoyOrwgtTiBfbYIxUilpJbyFNhD2UeaILKz1SfrhGwh/EhrwRrtVXe+xSSSmf+Dw9cA4xEXRlBRI0neHp2rHyqrc7HweAJ3hab6XpVxYAuh2Wq3ObtDopjcGhqflvzwGSf6M876wdm13Y1KSVLjLsY8WS8rhvv5657LDBjTrSKR1eyJ2zRfhboqlzPVuCfZWeq1QYMbegU/+E2vB8eM8K09k9+9bViDGo6jFFtT2FolgF9yqQe+27IuIVl10w6p9yW9bhASHGKyRrwq6Og/gD19ZufmQ052ANdoBpGsCUs/qw4Oahv8nh/y82UrbSIklmXj7XtKDhpkZ9oJD20ej9lBcVBdlIzbOUpnZRT91zaXlWUrmYsSY6YBWgS1rHLflZ2NXz60aS2xHQmvwVTHOQpvQz6tnOTL1C0om9ni/8ct2k1q9WJlLFHjHo3AgxlsOZntXFyZhNjzo7Vr7eiIbMKVp+OgPWEZ61BzM5w8q6ZX3d2BeWmPpuA+0+SaFJ5s+WfRPwk//Z9EnTc8auyr/NSv8W9nVCL4UsvSs8bR7HGsR3RoJCYs3Kt169/iUxnr8ARkcJV5CmNxiAX6ARhvAC4q5TOQScYX5tn/Sa3tqG9+fgTz5Pw2k2imoSudrBlNZz+Tk5CweOyf01uCt/QvFhpb6Gw+8Z31zoksmNejN4ziRWW/o0OMSZYk4/asvs5uXCRdOuUXuoiKVIbE5w+u5v2k3I3oqEuM8El1+D9wcY2vk/4pKSvHa8ODhnm/d3/rBE+EJ3g45hjmACk+mruuvDxfp9SFCwOMAR/LNgT7Ll9+zt7ErMl5kjHmy0uP9Lbv37J5jL4JLAbsgOuyCFT27d+9RU9VDlnh/Vrrn5xkvinM92+2mU5mKcDMq2PPZo+lGT6NJl5Q+6o+oyODa7y0HulVu8UzCcW2mpbM/Aw3RKiAL178I15FXG1/QyPT0AZPT6TffdRP3rqBMcJd7UCBYI/DAFeJODqeL0pOVGUGnYXp83GpbQQ96CAmCfpWlbg4px1h3oUsMecjFkp2F6molpNv5q9bhiPni49NFwEgMbSIpnTdsMi9rxSPcud4CQQEyvlOQrYFnyVKlunecQ7LedQakMKa01OmM2yKmEDEAOBsb1QU9jLn5K8urwupQ0mXke5KElVSRz/DlzQ0wik8dhzSl6+MymRYpKs3azLifIjI4RTlXXRSDFKHmlGovzV909S7tdQ4bhtW2n1lLH269NICjTA+Lyhc0VtO9gI4g9GwEocLmb2Y/KcDLF44uetgdWj498scM9ky0z1FJc/Nj+Cnhwv5Ena7Yyu+vXHF1Wxtd1sUbrd2uQDNof68WztvucR7G8VMvLrPq4wnSpSvds6GsLfrcv/kq5fJ4MfzGsmmn71GX5Q0szj5rHa+Cu+a9i898H7dvNbpPE4k/2t5nIq4zctr7/PUHdaa+9iMJyP37zEPv39du5KwDeG/3VEzSrQyGle4Wuj75QX1bB04ylK8MnZLL5XnpRFjMgwE5ix16apoW95G2VXnS6hjLVR7o7Tmxy/t2lZofcTIJudxO1VDbLyNJTyHEn9FUPKGX4hRx5Qjsgp1crqNFHH7cEO4ftqPq7HNwEHk4L0xQGJdbTG+VuGScE5USbNI9jOKMl6xp70gtdwJw/nyCZ/YrDOaVO7Ta0z8cZx/kOkjlf1+eshZDs+S+8lnQaZ/Ws75nW30GMTdFwVVh0DMvQXCMFJHmXIHXZUbahdeUTLCjPJpPyXZihtlVGviV3FH4Ig5D/0OxMNxcgZsxi/fxmNi4sJTxQPHH1XqMVZGxjF8epaUM3SxmR7bc+JmoY8ZyvjKkPfollrGEs79s6og/32iJZBffHHq/89mTfhesYlJxzQHDjsd1RqWJakrxpefpzHSEvWbXQJ1Ob8eTMyQzN4ZyZrlyNNTbwB9YEJ/giEgqS/4u1Lz5EXPF0o6zWmkMZ8SVkOBQ/1qS1xF8X41Gc0Wb002RUTPIZudwiZg+okHTx+zPYWuJkphrkWT+GORT9VgW+lSrYJoHzawXZmqpuQ1PaSLONCCV62XvWCTWO5leLh0w4etU79+r6nCpga3Losz4OGNA3fHK1aV4eKsiZ+Dt+gxypXG/t7gyfIWOKPbe31oYXnPU/L1uB7FgTeuJoxILsw+Q4quKNizX8z9mRP4z4gFPatTTCfsQxN2exAtkU9n8gKTt3EBeHI9vOYiEF87lyGrmrgWQSHJQaVgJUWGlQeRjPyOO8xAMLXaQqhfj8bCLndNAWO+KnZOkFXSQSfSeOzdZ3xZ0PpmwjfDWr6viBuqytn1r7XyDiHOkTc03aJ4BhezQooK8mRb/14Ed1ezgYDZ91XUM5EkwQQleCZCKrIISePFwBsROf7ZqqyC9TNpmKmCD3wAG4C99+g6P6G0gOwXN8j4af3lmvMvJh1+TSwmgXM1WBLNpq27oe0AZMPDaTAQ2hJBYwy7fXZsYoxA/Ai/OH2S+hCfhi3k5I8WAZfLsl7NNUToJ5pBOvuTXd+6QHeyXGoeJHe5dORTkbciib7eKMFJ68IRpSFJU/RLr6va/mVzFRkxwIyE/Zp6CqsjLmE9ohFO6epUN2+GQzLVO4gjyEAgdw/MsBVDuIRx5upm6x46fiztJ1vCsz8gl38dSAcM+kwbQrqRD4RXboC4pnh8zETF4jA+NldgZLD4Tz8qj8Ew+i/Hh/iXFxjPs24KOr6f8s7t/bEpHFTW9qSYqOHDBfmHgM+qQ6q3VdRQm4eTIrfJHU9hSTaRBQdAQbGO1LTsliShwMOvrxZnLfAHm1et+a+CLbqUxKyuEyeiWdDOYIPLxvX6nIc+2NfjvYmd9h2WUFoYby0nO0heHv8pHWyrqGIs/NvrkE4cNWfu2Sc83F5N4iNbGIUMnRY2iZAiJg3s9BdF5/rnvzQB20toGgFSeFMKMQvtLVToJiBZgXt5BUTqZrdSmE+k8LcDc3yyxULeuRCQDqi2dZCl/kctaITCGWDh1flVxskGjqw3yvxIwF5MZb7fOE4hB88jkOKuAWU8w0FC86s/xGrBiEIJtgvUxtaNgAK0vsqb5j3i0iH/khQVO0hei3TNmJ+IigJ40VcBXne85aBQLaNy+aLv9tYHvxz5muvGBNmi3AL3/xK1THMg5GeNDETBGN3dm1IADEcAAGflxjgh0dX1EM5/iO/WGH1kKze2MU4srVRKUObwJfvrUbCkjTBMjZlY+80Mzh6S6JBGL3ZakZ1OP9oAiHNIkvEm4WRimK+3miU3KULexcM5WZ2o4oN+iD2DgkCR134AZ01x2WA3pCD+e2lmRAG7shQpUF8XBmWWtK2VOw+YFoQ9K+PRQDbDDVJNEOKqFr0KqzVcXqM6jwI2YIgnKBoqMk58oOmZVFANcK+WB343YU217YGVX+k8TZhEBABoUkFIYoTIoLKpRCifG/xRe6PhSBCmzlIKEzHuKJDvhFJkiJyk63xIpBmpjKQ+hLcCe1HbQyn4xfgARxUmRXVQt5Er9QiSOyDFtlBtk6196CbozvHIq7bEu8tJfRHGS6xJ1Q5OEdznUhbY4VaHwtZigXcOAuivg67poRXGKuJhwbwx6p2eXLQY74Y6WgirMXmO1zWkVKv0NamqE1W68ioLWbJoON2hBaYBr1ZCS/Gszofqfsz+g3iqFdrZGJC9v4QZUI8n/ippg8l/prJ1/VP84Hbvk/1hv4VSLiMvqVFY/bZTFYjbTSPWU4ooILhby5QYXtVBZqlgWLOoIU9hxmmr1DFguLk5cf6pdFovVpVpKadNdFnrJSy3WpTiHpU6ED6rPYLziegyYfyld0d64YwJ5LnudyV35r8X+VSrtkis06Qp5LpXUvyn780M1NQcwZj50GNm/8mtFMPMPc/jN5F9lqoZpsdrsDqfL7fH6/AAiTCjjQiptrPNBGMVJmuVFWdVN2/XDOM3Luu3Hed3P+/0AIAgMgcLgCGREoTFYHJ5A9N8G/3tQqLRQZzBZbA6XxxcIRWKJVCZXKFVq6hqaWto6unr6BoZGxiamZuYWllbrzXa3PxxP58v1dn88X+/P9/dX6kX/FEFrZxW0a4baexZ/DExWHXDtNoZ9WEWOBHr0lGDHDgPVuVJCc57UM84+oj+e+n94aWiVJO8Cj3ji6K/JGYPF2QNjDqDA63zykhLmetmEA+oUrddJwTz6CFrdCjpkcNlYwTW4CLz1jEny5BXF9JwHDY8xhI8RcnBFKFf3k2/+8HJVxq2+Ww5pRfGEg9xy56WcncErXuylgeKA+RVZCo4M9JDXxmu3IvMQxQpV4KlwM5dRuNTU21uiUNq0sA08JozDgecqoGFoMshRD2eXtSbKxmwLsk+SxZAlsI00Bcw+eSLWBIQ3/cN5bCuf16gFQrqNGIcAdrZ2rLGl1bKJ0w0WcU8ereUuiWRw2F2zr0Eq0oWHtREHyjuQv4RtvAZvouG6isAfHvmDwi831JZlzmjSkJlEgvpIr7jtgBZI7h2vFFCKq/UC38i04X8SeZ8KFFRXGDJetlZX4THjzZL4a38w02p1nzyLYXAeSiXJRuuZZf0PfXW7Sivvn9wtb0pPVskfp8tSsaeVM45Rmu4MZuO0CKr443pDVpix87HmyUzUJi/TGzSckeKia5onlIyasxvB47spD0eM872ABj/hgGZUAkGnzscEZXoD4PBFzQWaYY+ABshSHgjxfBbhwHfjFs2jvjOEoGjm5rD9Cb4zXVMz1L6NpeBWCDs+XWHKRj/cKAe5uQQ/KNEbittQtr0vomhVFEfLKLcxHDhWBYvVJJc+D7PRM5V3wPsNVLODZNYimnopJHDcZf5O0GjO/OWw9lYed0zvk2Q83UrMHcQiQ9PBMbddMEi16/zETlXV0UPe9ewDvb2dTxs3iziO4ZuLWi32aVdK4LHjrjwEaP6ga/eKkD6swp3dEOokoh9TwR7nbC+Ncv0U6SqC2jXmrHskYfRvukreG35+sPnSPr7CqjMo4C2kO8hsDJhKIQoTGSThPUPb4zVEqcJ8ZyBZGQKTEqbWMoD/eJuaCjPl3eGJ9mQQnNdz4LCqbBfCotY0WNOiZNhXUgwA") format("woff2"); } .far { font-family: "Font Awesome 5 Free"; font-style: normal; font-weight: 400; font-variant: normal; text-rendering: auto; line-height: 1; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } .fa-sun::before { content: "\f185"; } .fa-moon::before { content: "\f186"; } /* Quiet site-wide text selection. */ ::selection{background:rgba(124,128,132,.18)!important;color:inherit!important} ::-moz-selection{background:rgba(124,128,132,.18)!important;color:inherit!important} /* ------------------------------------------------------------------ Theme icon: exact Welcome geometry, exactly ONE icon at a time. ------------------------------------------------------------------ */ .site-header .theme-button,.menu-page .theme-button,.theme-toggle,.auth-theme-inline{appearance:none!important;border:0!important;background:transparent!important;box-shadow:none!important;color:inherit!important} .site-header .theme-button,.menu-page .theme-button{width:32px!important;height:32px!important;padding:0!important;display:inline-grid!important;place-items:center!important} .site-header .theme-button .theme-icon-wrap,.menu-page .theme-button .theme-icon-wrap{width:16px!important;height:16px!important;display:grid!important;place-items:center!important;position:relative!important;overflow:visible!important} .emkan-v133-theme-icon{display:block!important;visibility:visible!important;opacity:.58!important;color:currentColor!important;pointer-events:none!important} .site-header i.emkan-v133-theme-icon,.menu-page i.emkan-v133-theme-icon,.theme-toggle i.emkan-v133-theme-icon,.auth-theme-inline i.emkan-v133-theme-icon{font-size:15px!important;line-height:16px!important;width:16px!important;height:16px!important;text-align:center!important} .site-header svg.emkan-v133-theme-icon,.menu-page svg.emkan-v133-theme-icon,.theme-toggle svg.emkan-v133-theme-icon,.auth-theme-inline svg.emkan-v133-theme-icon{width:15px!important;height:15px!important;overflow:visible!important} .theme-toggle,.auth-theme-inline{width:32px!important;height:32px!important;padding:0!important;display:grid!important;place-items:center!important} .theme-toggle>.emkan-v133-theme-icon,.auth-theme-inline>.emkan-v133-theme-icon{grid-area:1/1!important} @media(min-width:901px){ html body .site-header .nav-frame>.theme-button, html body .nav-frame>#themeButton.theme-button{position:absolute!important;top:50%!important;inset-inline-end:12px!important;inset-inline-start:auto!important;transform:translateY(-50%)!important;margin:0!important;align-self:auto!important} } @media(max-width:900px){ html body .site-header .nav-frame>.theme-button, html body .nav-frame>#themeButton.theme-button{transform:none!important;margin:0!important;align-self:center!important;justify-self:center!important} } /* ------------------------------------------------------------------ One canonical disclosure glyph everywhere — store Category model. Always visible; open state swaps the two line lengths. ------------------------------------------------------------------ */ .emkan-v133-disclosure-host{list-style:none!important} .emkan-v133-disclosure-host::-webkit-details-marker{display:none!important} .emkan-v133-disclosure-host::before,.emkan-v133-disclosure-host::after{content:none!important;display:none!important} .emkan-v133-disclosure-host :is(.category-chevron,.article-category-chevron,.detail-subcategory-chevron,.v49-filter-chevron,.emkan-disclosure-mark,.store-subcategory-mark,.store-sort-mark,.message-subject-chevron,.emkan-v131-disclosure-mark,.emkan-v132-disclosure-mark){display:none!important} :is(.podcast-filter,.rail-filter,.store-subcategory-filter,.store-sort-filter)>summary::after{content:none!important;display:none!important} .emkan-v133-disclosure-mark{position:relative!important;display:inline-block!important;visibility:visible!important;opacity:.78!important;width:12px!important;height:10px!important;flex:0 0 12px!important;color:currentColor!important;border:0!important;background:transparent!important;transform:none!important} .emkan-v133-disclosure-mark::before,.emkan-v133-disclosure-mark::after{content:""!important;display:block!important;position:absolute!important;inset-inline-end:0!important;height:1px!important;background:currentColor!important;border:0!important;transform:none!important;transition:width .22s cubic-bezier(.22,.61,.36,1),opacity .18s ease!important} .emkan-v133-disclosure-mark::before{top:2px!important;width:6px!important} .emkan-v133-disclosure-mark::after{top:7px!important;width:11px!important} details[open]>summary>.emkan-v133-disclosure-mark::before, .emkan-v133-disclosure-host[aria-expanded="true"]>.emkan-v133-disclosure-mark::before, .category-panel.is-open>.category-toggle>.emkan-v133-disclosure-mark::before{width:11px!important} details[open]>summary>.emkan-v133-disclosure-mark::after, .emkan-v133-disclosure-host[aria-expanded="true"]>.emkan-v133-disclosure-mark::after, .category-panel.is-open>.category-toggle>.emkan-v133-disclosure-mark::after{width:6px!important} /* Keep geometry identical in RTL and LTR. Only its logical side changes with flex order. */ .emkan-v133-disclosure-host{align-items:center!important} /* ------------------------------------------------------------------ Category spacing: Architecture is the canonical rhythm everywhere. ------------------------------------------------------------------ */ :is(.category-list ul,.article-category-list,.detail-subcategory-list,.v49-filter-list,.podcast-filter-list,.podcast-topics,.podcast-seasons,.store-subcategory-list,.store-sort-list,.civil-filter-list,.research-filter-list){padding-top:8px!important;padding-bottom:0!important} :is(.category-list li,.article-category-list li){margin:0!important;padding:0!important} :is(.category-button,.article-category-choice,.detail-subcategory-list a,.v49-filter-option,.podcast-filter-list button,.podcast-topics button,.podcast-seasons button,.store-subcategory-list a,.store-sort-list button,.civil-filter-list button,.research-filter-list button,.emkan-landing-category,.detail-nav a){ min-height:0!important;margin:0!important;padding:8px 0!important;line-height:1.65!important;font-size:12.5px!important;border:0!important;background:transparent!important;box-shadow:none!important } :is(html[lang="fa"],html[lang="ar"]) :is(.category-button,.article-category-choice,.detail-subcategory-list a,.v49-filter-option,.podcast-filter-list button,.podcast-topics button,.podcast-seasons button,.store-subcategory-list a,.store-sort-list button,.civil-filter-list button,.research-filter-list button,.emkan-landing-category,.detail-nav a){text-align:right!important} html[lang="en"] :is(.category-button,.article-category-choice,.detail-subcategory-list a,.v49-filter-option,.podcast-filter-list button,.podcast-topics button,.podcast-seasons button,.store-subcategory-list a,.store-sort-list button,.civil-filter-list button,.research-filter-list button,.emkan-landing-category,.detail-nav a){text-align:left!important} /* ------------------------------------------------------------------ Article: tighter context spacing, equal medium footer labels, clean rules. ------------------------------------------------------------------ */ body .article-page{padding-top:18px!important} body .article-page>.emkan-context-bar{width:100%!important;max-width:none!important;margin:0 0 28px!important;padding:0 0 12px!important;border-top:0!important;border-bottom:1px solid var(--line)!important} body .article-page>.article-page-back{display:none!important} #articleFooter{display:grid!important;gap:0!important;border:0!important} #articleFooter .emkan-article-keyword-row{display:flex!important;align-items:baseline!important;flex-wrap:wrap!important;gap:7px!important;margin:0!important;padding:14px 0!important;border-top:1px solid var(--line)!important;border-bottom:0!important} #articleFooter .emkan-article-keyword-row h2, #articleFooter #articleReferences>h2, #articleFooter .article-author .article-meta-label{margin:0!important;font-size:12px!important;line-height:1.8!important;font-weight:650!important;color:var(--fg,var(--ink))!important} #articleFooter .article-tags{display:inline-flex!important;flex-wrap:wrap!important;gap:0!important;font-size:10.5px!important;line-height:1.8!important} #articleFooter .article-tags a{text-decoration:none!important} #articleFooter .article-tags a:not(:last-child)::after{content:",";margin-inline-end:4px;color:currentColor!important} #articleFooter #articleReferences{display:block!important;margin:0!important;padding:14px 0!important;border:0!important;border-top:1px solid var(--line)!important} #articleFooter #articleReferences>h2{margin:0 0 7px!important} #articleFooter #articleReferencesList{font-size:10.5px!important;line-height:1.9!important} #articleFooter .article-author{display:flex!important;align-items:baseline!important;flex-wrap:wrap!important;gap:6px!important;margin:0!important;padding:14px 0!important;border:0!important;border-top:1px solid var(--line)!important;font-size:10.5px!important;line-height:1.9!important} #articleFooter .article-author .article-meta-value{font-size:10.5px!important;color:var(--category-muted,var(--muted))!important} .article-flow-link,.article-flow-text a{font-weight:600!important;text-decoration:none!important;color:color-mix(in srgb,var(--hover-accent,#4b7c91) 72%,var(--fg,#15181d))!important} /* Softer article media progress line. */ html:not([data-theme="dark"]) .article-page input.emkan-media-seek::-webkit-slider-runnable-track{background:rgba(21,24,29,.23)!important;height:1px!important} html:not([data-theme="dark"]) .article-page input.emkan-media-seek::-moz-range-track{background:rgba(21,24,29,.23)!important;height:1px!important} html:not([data-theme="dark"]) .article-page input.emkan-media-seek::-moz-range-progress{background:rgba(21,24,29,.34)!important;height:1px!important} html:not([data-theme="dark"]) .article-page input.emkan-media-seek::-webkit-slider-thumb{background:#7b8085!important;border-color:#7b8085!important} html:not([data-theme="dark"]) .article-page input.emkan-media-seek::-moz-range-thumb{background:#7b8085!important;border-color:#7b8085!important} /* ------------------------------------------------------------------ Account: theme beside language rail and visible with exact Welcome glyph. ------------------------------------------------------------------ */ .account-language-rail{display:flex!important;align-items:center!important;justify-content:center!important;gap:8px!important} .account-language-rail #themeToggle{position:static!important;display:grid!important;place-items:center!important;width:32px!important;height:32px!important;margin-inline-start:6px!important;transform:none!important;color:var(--ink)!important;opacity:.68!important} html[data-theme="dark"] .account-language-rail #themeToggle{color:var(--ink)!important;opacity:.78!important} /* ------------------------------------------------------------------ Admin: keep every setting, but make dense interfaces quiet and usable. ------------------------------------------------------------------ */ body.emkan-admin-compact :is(.card,.panel,.section,.admin-section,.settings-card,.editor-card,.article-block-card){padding:11px 13px!important;margin-bottom:9px!important} body.emkan-admin-compact :is(input:not([type="checkbox"]):not([type="radio"]):not([type="color"]),select,textarea){min-height:30px!important;padding:4px 7px!important;font-size:10px!important;line-height:1.5!important} body.emkan-admin-compact :is(button,.btn,.button){min-height:28px!important;padding:4px 8px!important;font-size:9px!important;line-height:1.4!important} body.emkan-admin-compact :is(.rich-toolbar,.format-toolbar,.editor-toolbar,.toolbar,.article-block-actions){gap:4px!important} body.emkan-admin-compact :is(.rich-toolbar,.format-toolbar,.editor-toolbar,.toolbar) button{min-width:26px!important;min-height:26px!important;padding:3px 6px!important} body.emkan-admin-compact input[type="color"]{width:28px!important;height:26px!important;padding:2px!important} @media(prefers-reduced-motion:reduce){.emkan-v133-disclosure-mark::before,.emkan-v133-disclosure-mark::after{transition:none!important}} /* ===== emkan-v134.css ===== */ /* EMKAN v134 — precision stabilization pass. Keeps the approved minimal / linear visual language and only normalizes shared geometry, RTL, dropdown rhythm and the requested registration rail. */ /* Header: shorter shared hairlines, enough breathing room for all nav labels. */ @media (min-width:1280px){ html body .site-header{width:min(calc(100% - 300px),1340px)!important;max-width:1340px!important;margin-inline:auto!important} html body .site-header .primary-nav{padding-inline:116px!important} html body .site-header .nav-list{width:max-content!important;max-width:calc(100% - 232px)!important;gap:clamp(21px,1.55vw,30px)!important;margin-inline:auto!important} html body .site-header .language-button{left:18px!important;right:auto!important} html body .site-header .nav-frame>.theme-button, html body .site-header .nav-frame>#themeButton.theme-button{right:18px!important;left:auto!important;inset-inline:auto!important} } @media (min-width:901px) and (max-width:1279px){ html body .site-header{width:min(calc(100% - 72px),1100px)!important;max-width:1100px!important;margin-inline:auto!important} html body .site-header .primary-nav{padding-inline:72px!important} html body .site-header .nav-list{width:max-content!important;max-width:calc(100% - 144px)!important;gap:clamp(14px,1.35vw,22px)!important;margin-inline:auto!important} html body .site-header .language-button{left:14px!important;right:auto!important} html body .site-header .nav-frame>.theme-button, html body .site-header .nav-frame>#themeButton.theme-button{right:14px!important;left:auto!important;inset-inline:auto!important} } /* Theme control: never touch the Welcome pair. Elsewhere keep one slightly smaller icon. */ .site-header .theme-button,.menu-page .theme-button{width:30px!important;height:30px!important;padding:0!important} .site-header .theme-button .theme-icon-wrap,.menu-page .theme-button .theme-icon-wrap{width:15px!important;height:15px!important} .site-header i.emkan-v133-theme-icon,.menu-page i.emkan-v133-theme-icon{font-size:13.5px!important;line-height:15px!important;width:15px!important;height:15px!important} .site-header svg.emkan-v133-theme-icon,.menu-page svg.emkan-v133-theme-icon{width:13.5px!important;height:13.5px!important} @media (min-width:901px){ html body .site-header .nav-frame>.theme-button, html body .site-header .nav-frame>#themeButton.theme-button{position:absolute!important;top:50%!important;transform:translateY(-50%)!important;margin:0!important;align-self:auto!important} } /* Dropdown/submenu rhythm: deliberately tighter everywhere, while leaving main nav untouched. */ :is(.category-list ul,.article-category-list,.detail-subcategory-list,.v49-filter-list,.podcast-filter-list,.podcast-topics,.podcast-seasons,.store-subcategory-list,.store-sort-list,.civil-filter-list,.research-filter-list){padding-top:4px!important;padding-bottom:0!important} :is(.category-button,.article-category-choice,.detail-subcategory-list a,.v49-filter-option,.podcast-filter-list button,.podcast-topics button,.podcast-seasons button,.store-subcategory-list a,.store-sort-list button,.civil-filter-list button,.research-filter-list button,.emkan-landing-category,.detail-nav a){padding:4px 0!important;line-height:1.42!important;font-size:12px!important} :is(.store-subcategory-list,.store-sort-list,.v49-filter-list) > * + *{margin-top:0!important} /* Registration: three labels sit directly above one fine baseline; active state overlays it. */ body.v115-course-detail #contentApp .v49-progress, #contentApp .v49-progress{ position:relative!important;display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr))!important; width:100%!important;gap:0!important;margin:0 0 24px!important;padding:0!important; border:0!important;border-bottom:1px solid var(--line)!important;list-style:none!important; } body.v115-course-detail #contentApp .v49-progress li, #contentApp .v49-progress li{ position:relative!important;margin:0!important;padding:0 8px 10px!important;border:0!important; font-size:10.5px!important;line-height:1.55!important;text-align:center!important;white-space:nowrap!important;color:var(--category-muted)!important; } body.v115-course-detail #contentApp .v49-progress li[aria-current="step"], #contentApp .v49-progress li[aria-current="step"]{color:var(--fg)!important;font-weight:600!important} body.v115-course-detail #contentApp .v49-progress li[aria-current="step"]::after, #contentApp .v49-progress li[aria-current="step"]::after{ content:""!important;position:absolute!important;z-index:2!important;left:14%!important;right:14%!important;bottom:-1px!important;height:1px!important;background:var(--hover-accent)!important; } /* Content / education RTL: rail belongs on the right in Persian/Arabic. */ @media (min-width:481px){ :is(html[lang="fa"],html[lang="ar"]) body.content-section-page #contentApp .v49-layout:not(.v69-content-detail-layout){ grid-template-columns:minmax(0,1fr) 190px!important;direction:ltr!important; } :is(html[lang="fa"],html[lang="ar"]) body.content-section-page #contentApp .v49-layout:not(.v69-content-detail-layout)>.v49-rail{ grid-column:2!important;grid-row:1!important;direction:rtl!important;text-align:right!important; } :is(html[lang="fa"],html[lang="ar"]) body.content-section-page #contentApp .v49-layout:not(.v69-content-detail-layout)>.v49-results-wrap{ grid-column:1!important;grid-row:1!important;direction:rtl!important;text-align:right!important; } } @media (min-width:481px) and (max-width:720px){ :is(html[lang="fa"],html[lang="ar"]) body.content-section-page #contentApp .v49-layout:not(.v69-content-detail-layout){grid-template-columns:minmax(0,1fr) 130px!important} } :is(html[lang="fa"],html[lang="ar"]) body.content-section-page #contentApp :is(.v49-rail,.v49-results-wrap,.v49-detail,.v49-reading,.v49-section,.v69-content-search-rail){direction:rtl!important;text-align:right!important} html[lang="en"] body.content-section-page #contentApp :is(.v49-rail,.v49-results-wrap,.v49-detail,.v49-reading,.v49-section,.v69-content-search-rail){direction:ltr!important;text-align:left!important} :is(html[lang="fa"],html[lang="ar"]) body.content-section-page #contentApp :is(.project-search,.v49-search-group,.v69-content-search,.emkan-standard-search) input[type="search"]{direction:rtl!important;text-align:right!important} html[lang="en"] body.content-section-page #contentApp :is(.project-search,.v49-search-group,.v69-content-search,.emkan-standard-search) input[type="search"]{direction:ltr!important;text-align:left!important} /* Store search + Category / Sort share the same quiet geometry. */ .store-category-side :is(.product-search,.emkan-store-search-proxy){position:relative!important;display:block!important} .store-category-side :is(.product-search,.emkan-store-search-proxy) .emkan-v134-store-search-icon{ position:absolute!important;z-index:2!important;top:50%!important;width:10px!important;height:10px!important; fill:none!important;stroke:currentColor!important;stroke-width:1.35!important;stroke-linecap:round!important;color:var(--category-muted)!important;opacity:.62!important;pointer-events:none!important;transform:translateY(-58%)!important; } :is(html[lang="fa"],html[lang="ar"]) .store-category-side :is(.product-search,.emkan-store-search-proxy) .emkan-v134-store-search-icon{left:6px!important;right:auto!important} html[lang="en"] .store-category-side :is(.product-search,.emkan-store-search-proxy) .emkan-v134-store-search-icon{right:6px!important;left:auto!important} :is(html[lang="fa"],html[lang="ar"]) .store-category-side :is(.product-search,.emkan-store-search-proxy) input[type="search"]{padding-left:24px!important;padding-right:0!important;text-align:right!important;direction:rtl!important} html[lang="en"] .store-category-side :is(.product-search,.emkan-store-search-proxy) input[type="search"]{padding-right:24px!important;padding-left:0!important;text-align:left!important;direction:ltr!important} .store-category-side :is(.store-subcategory-filter,.store-sort-filter)>summary{display:flex!important;align-items:center!important;justify-content:space-between!important;gap:10px!important} .store-category-side :is(.store-subcategory-filter,.store-sort-filter)>summary>.emkan-v133-disclosure-mark{margin:0!important;flex:0 0 12px!important} /* Client samples: understated and clearly demo-only until replaced in admin. */ .emkan-client-demo-badge{font-size:7.5px!important;line-height:1!important;letter-spacing:.04em!important;color:var(--category-muted)!important;opacity:.7!important} /* Editorial metadata for long-form content: same linear grammar as article footer. */ .emkan-editorial-meta{margin-top:26px!important;padding:0!important;border-top:1px solid var(--line)!important} .emkan-editorial-meta-row{display:flex!important;align-items:baseline!important;flex-wrap:wrap!important;gap:7px!important;padding:12px 0!important;border-bottom:1px solid var(--line)!important;font-size:10.5px!important;line-height:1.9!important} .emkan-editorial-meta-label{font-size:11px!important;font-weight:650!important;color:var(--fg)!important} .emkan-editorial-meta-value{color:var(--category-muted)!important;white-space:pre-line!important} /* Central navigation editor — deliberately inherits admin's existing cards/fields. */ .emkan-v134-nav-grid{display:grid;gap:0!important;margin-top:12px;border-top:1px solid var(--line,#d7d9dd)} .emkan-v134-nav-row{display:grid;grid-template-columns:82px repeat(3,minmax(0,1fr));gap:12px;align-items:end;padding:12px 0;border-bottom:1px solid var(--line,#d7d9dd)} .emkan-v134-nav-row>label{margin:0!important} .emkan-v134-nav-row .emkan-v134-nav-visible{align-self:center;display:flex;align-items:center;gap:7px;font-size:11px} @media(max-width:760px){.emkan-v134-nav-row{grid-template-columns:1fr}.emkan-v134-nav-row .emkan-v134-nav-visible{padding-bottom:4px}} /* Education item pages: reassert the approved right-hand rail in RTL after all legacy layers. */ @media (min-width:901px){ :is(html[lang="fa"],html[lang="ar"]) body.v90-education-item-page.has-emkan-context.content-section-page #contentApp > .v69-content-detail-layout.v90-education-detail-layout{ display:grid!important;grid-template-columns:minmax(0,648px) 190px!important;grid-template-areas:"content rail"!important;direction:ltr!important;gap:0!important; } :is(html[lang="fa"],html[lang="ar"]) body.v90-education-item-page #contentApp > .v69-content-detail-layout.v90-education-detail-layout > .v69-content-search-rail{ grid-area:rail!important;grid-column:2!important;direction:rtl!important;text-align:right!important; } :is(html[lang="fa"],html[lang="ar"]) body.v90-education-item-page #contentApp > .v69-content-detail-layout.v90-education-detail-layout > .v69-content-detail-body{ grid-area:content!important;grid-column:1!important;direction:rtl!important;text-align:right!important; } html[lang="en"] body.v90-education-item-page.has-emkan-context.content-section-page #contentApp > .v69-content-detail-layout.v90-education-detail-layout{ display:grid!important;grid-template-columns:190px minmax(0,648px)!important;grid-template-areas:"rail content"!important;direction:ltr!important;gap:0!important; } } :is(html[lang="fa"],html[lang="ar"]) body.v90-education-item-page #contentApp .v69-content-search{direction:rtl!important;text-align:right!important} :is(html[lang="fa"],html[lang="ar"]) body.v90-education-item-page #contentApp .v69-content-search input[type="search"]{direction:rtl!important;text-align:right!important} html[lang="en"] body.v90-education-item-page #contentApp .v69-content-search{direction:ltr!important;text-align:left!important} html[lang="en"] body.v90-education-item-page #contentApp .v69-content-search input[type="search"]{direction:ltr!important;text-align:left!important} /* Store rail: normalize both the original side wrapper and the dynamic filter rail. */ :is(.store-category-side,.emkan-store-filter-rail) :is(.product-search,.emkan-store-search-proxy){position:relative!important;display:block!important} :is(.store-category-side,.emkan-store-filter-rail) :is(.product-search,.emkan-store-search-proxy) .emkan-v134-store-search-icon{ position:absolute!important;z-index:2!important;top:50%!important;width:10px!important;height:10px!important;fill:none!important;stroke:currentColor!important;stroke-width:1.35!important;stroke-linecap:round!important;color:var(--category-muted)!important;opacity:.62!important;pointer-events:none!important;transform:translateY(-58%)!important; } :is(html[lang="fa"],html[lang="ar"]) :is(.store-category-side,.emkan-store-filter-rail) :is(.product-search,.emkan-store-search-proxy) .emkan-v134-store-search-icon{left:6px!important;right:auto!important} html[lang="en"] :is(.store-category-side,.emkan-store-filter-rail) :is(.product-search,.emkan-store-search-proxy) .emkan-v134-store-search-icon{right:6px!important;left:auto!important} :is(html[lang="fa"],html[lang="ar"]) :is(.store-category-side,.emkan-store-filter-rail) :is(.product-search,.emkan-store-search-proxy) input[type="search"]{padding-left:24px!important;padding-right:0!important;text-align:right!important;direction:rtl!important} html[lang="en"] :is(.store-category-side,.emkan-store-filter-rail) :is(.product-search,.emkan-store-search-proxy) input[type="search"]{padding-right:24px!important;padding-left:0!important;text-align:left!important;direction:ltr!important} :is(.store-category-side,.emkan-store-filter-rail) :is(.store-subcategory-filter,.store-sort-filter)>summary{display:flex!important;align-items:center!important;justify-content:space-between!important;gap:10px!important;min-height:25px!important;padding-block:4px!important;font-size:10px!important;line-height:1.4!important} :is(.store-category-side,.emkan-store-filter-rail) :is(.store-subcategory-filter,.store-sort-filter)>summary :is(.emkan-v133-disclosure-mark,.store-subcategory-mark,.store-sort-mark){margin:0!important;flex:0 0 12px!important} /* Clients: a quiet six-column logo strip that follows the site's linear language. */ .emkan-clients-section{margin-top:clamp(52px,8vh,88px)!important;padding-top:20px!important;border-top:1px solid var(--line)!important} .emkan-clients-head{display:flex!important;justify-content:space-between!important;align-items:end!important;gap:24px!important;margin-bottom:24px!important} .emkan-clients-head h2{margin:0!important;font-size:10px!important;font-weight:650!important} .emkan-clients-head p{margin:0!important;max-width:520px!important;font-size:8.7px!important;line-height:1.8!important;color:var(--category-muted)!important;text-align:end!important} .emkan-clients-grid{display:grid!important;grid-template-columns:repeat(6,minmax(0,1fr))!important;gap:clamp(18px,2.6vw,44px)!important;border:0!important;align-items:start!important} .emkan-client{min-width:0!important;min-height:0!important;padding:0!important;border:0!important;background:transparent!important;display:flex!important;flex-direction:column!important;align-items:center!important;justify-content:flex-start!important;gap:9px!important;text-decoration:none!important;color:var(--fg)!important} .emkan-client-mark{width:100%!important;aspect-ratio:1.7/1!important;display:grid!important;place-items:center!important;border:0!important;background:transparent!important} .emkan-client-mark img{max-width:72%!important;max-height:62%!important;width:auto!important;height:auto!important;object-fit:contain!important;filter:grayscale(1)!important;opacity:.78!important;transition:filter .24s ease,opacity .24s ease!important} .emkan-client:hover .emkan-client-mark img{filter:none!important;opacity:1!important} .emkan-client-placeholder{width:54px!important;height:54px!important;display:grid!important;place-items:center!important;border:1px solid color-mix(in srgb,var(--fg) 18%,transparent)!important;border-radius:50%!important;font-size:8px!important;letter-spacing:.12em!important;color:var(--category-muted)!important} .emkan-client-caption,.emkan-client-name{font-size:8.6px!important;line-height:1.55!important;text-align:center!important;color:var(--category-muted)!important} @media(max-width:900px){.emkan-clients-grid{grid-template-columns:repeat(3,minmax(0,1fr))!important}.emkan-clients-head{align-items:start!important;flex-direction:column!important}.emkan-clients-head p{text-align:start!important}} @media(max-width:520px){.emkan-clients-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}} /* ===== emkan-v135.css ===== */ /* EMKAN v135 — precision / virtual-learning pass. This layer intentionally preserves the approved minimal, linear visual language. */ /* -------------------------------------------------------------------------- 1 + 2 + 9 — shared header geometry and one canonical theme-control size -------------------------------------------------------------------------- */ @media (min-width:1280px){ html body .site-header{ width:min(calc(100% - 240px),1320px)!important; max-width:1320px!important; margin-inline:auto!important; } html body .site-header .nav-frame{position:relative!important} html body .site-header .primary-nav{padding-inline:105px!important} html body .site-header .nav-list{ width:max-content!important; max-width:calc(100% - 210px)!important; gap:clamp(21px,1.55vw,30px)!important; margin-inline:auto!important; } html body .site-header .language-button{ position:absolute!important;left:30px!important;right:auto!important; inset-inline:auto!important;top:50%!important;transform:translateY(-50%)!important; margin:0!important;z-index:12!important; } html body .site-header .nav-frame>#themeButton.theme-button, html body .site-header .nav-frame>.theme-button{ position:absolute!important;right:30px!important;left:auto!important; inset-inline:auto!important;top:50%!important;transform:translateY(-50%)!important; margin:0!important;z-index:12!important; } } @media (min-width:901px) and (max-width:1279px){ html body .site-header{ width:min(calc(100% - 110px),1060px)!important; max-width:1060px!important; margin-inline:auto!important; } html body .site-header .nav-frame{position:relative!important} html body .site-header .primary-nav{padding-inline:82px!important} html body .site-header .nav-list{ width:max-content!important; max-width:calc(100% - 164px)!important; gap:clamp(14px,1.35vw,22px)!important; margin-inline:auto!important; } html body .site-header .language-button{ position:absolute!important;left:24px!important;right:auto!important; inset-inline:auto!important;top:50%!important;transform:translateY(-50%)!important; margin:0!important;z-index:12!important; } html body .site-header .nav-frame>#themeButton.theme-button, html body .site-header .nav-frame>.theme-button{ position:absolute!important;right:24px!important;left:auto!important; inset-inline:auto!important;top:50%!important;transform:translateY(-50%)!important; margin:0!important;z-index:12!important; } } /* The Welcome screen is deliberately excluded: its sun and moon remain a pair. */ .site-header .theme-button, .menu-page .theme-button, .account-language-rail .theme-toggle, .account-language-rail .auth-theme-inline{ width:30px!important;height:30px!important;min-width:30px!important;min-height:30px!important; padding:0!important;display:inline-grid!important;place-items:center!important; } .site-header .theme-button .theme-icon-wrap, .menu-page .theme-button .theme-icon-wrap, .account-language-rail .theme-toggle .theme-icon-wrap, .account-language-rail .auth-theme-inline .theme-icon-wrap{ width:15px!important;height:15px!important;display:grid!important;place-items:center!important; } .site-header .theme-button :is(svg,i), .menu-page .theme-button :is(svg,i), .account-language-rail .theme-toggle :is(svg,i), .account-language-rail .auth-theme-inline :is(svg,i){ width:13.5px!important;height:13.5px!important;font-size:13.5px!important;line-height:13.5px!important; } /* -------------------------------------------------------------------------- 4 — registration steps: identical grammar to Store product tabs -------------------------------------------------------------------------- */ body.v115-course-detail #contentApp .v49-progress, #contentApp .v49-progress{ display:flex!important;align-items:flex-end!important;justify-content:space-between!important; width:min(430px,100%)!important;max-width:100%!important; margin:0 0 26px!important;padding:0!important;gap:26px!important; border:0!important;border-bottom:1px solid var(--line)!important; list-style:none!important;overflow:visible!important; } body.v115-course-detail #contentApp .v49-progress li, #contentApp .v49-progress li{ position:relative!important;flex:1 1 0!important;min-width:0!important; margin:0!important;padding:0 0 10px!important;border:0!important; color:var(--category-muted)!important;font-size:10.5px!important;line-height:1.55!important; text-align:center!important;white-space:nowrap!important; } body.v115-course-detail #contentApp .v49-progress li::after, #contentApp .v49-progress li::after{ content:""!important;position:absolute!important;left:0!important;right:0!important;bottom:-1px!important; height:1px!important;background:var(--hover-accent)!important;transform:scaleX(0)!important; transform-origin:center!important;transition:transform .18s ease!important; } body.v115-course-detail #contentApp .v49-progress li[aria-current="step"], #contentApp .v49-progress li[aria-current="step"]{color:var(--fg)!important;font-weight:600!important} body.v115-course-detail #contentApp .v49-progress li[aria-current="step"]::after, #contentApp .v49-progress li[aria-current="step"]::after{transform:scaleX(1)!important} :is(html[lang="fa"],html[lang="ar"]) #contentApp .v49-progress{direction:rtl!important} html[lang="en"] #contentApp .v49-progress{direction:ltr!important} @media(max-width:520px){ #contentApp .v49-progress{width:100%!important;gap:14px!important} #contentApp .v49-progress li{font-size:9.5px!important} } /* -------------------------------------------------------------------------- 6 — one canonical Store search field/icon -------------------------------------------------------------------------- */ body[class] :is(.store-category-side,.emkan-store-filter-rail) :is(.product-search,.emkan-store-search-proxy,.emkan-v135-store-search){ position:relative!important;display:block!important; } .emkan-v135-store-search-icon{ position:absolute!important;z-index:5!important;top:50%!important;width:11px!important;height:11px!important; fill:none!important;stroke:currentColor!important;stroke-width:1.35!important;stroke-linecap:round!important; color:var(--category-muted,var(--fg))!important;opacity:.66!important;pointer-events:none!important; transform:translateY(-52%)!important; } :is(html[lang="fa"],html[lang="ar"]) .emkan-v135-store-search-icon{left:5px!important;right:auto!important} html[lang="en"] .emkan-v135-store-search-icon{right:5px!important;left:auto!important} :is(html[lang="fa"],html[lang="ar"]) :is(.store-category-side,.emkan-store-filter-rail) input[type="search"]{ padding-left:25px!important;padding-right:0!important;direction:rtl!important;text-align:right!important; } html[lang="en"] :is(.store-category-side,.emkan-store-filter-rail) input[type="search"]{ padding-right:25px!important;padding-left:0!important;direction:ltr!important;text-align:left!important; } /* -------------------------------------------------------------------------- 7 — always-visible quantity control (browser-native hover spinner replaced) -------------------------------------------------------------------------- */ .emkan-v135-number-shell{position:relative!important;display:block!important;width:100%!important;min-width:0!important} .emkan-v135-number-shell>input[type="number"]{ width:100%!important;height:100%!important;padding-inline-end:22px!important; -moz-appearance:textfield!important;appearance:textfield!important; } .emkan-v135-number-shell>input[type="number"]::-webkit-inner-spin-button, .emkan-v135-number-shell>input[type="number"]::-webkit-outer-spin-button{-webkit-appearance:none!important;margin:0!important} .emkan-v135-number-steps{ position:absolute!important;z-index:3!important;top:1px!important;bottom:1px!important;inset-inline-end:0!important; width:20px!important;display:grid!important;grid-template-rows:1fr 1fr!important; } .emkan-v135-number-step{ appearance:none!important;border:0!important;background:transparent!important;color:var(--category-muted,var(--fg))!important; width:20px!important;min-width:20px!important;min-height:0!important;padding:0!important;margin:0!important; display:grid!important;place-items:center!important;cursor:pointer!important;opacity:.72!important; } .emkan-v135-number-step+ .emkan-v135-number-step{border-top:1px solid var(--line)!important} .emkan-v135-number-step svg{width:8px!important;height:8px!important;fill:none!important;stroke:currentColor!important;stroke-width:1.45!important;stroke-linecap:round!important;stroke-linejoin:round!important} .emkan-v135-number-step:hover,.emkan-v135-number-step:focus-visible{color:var(--hover-accent)!important;opacity:1!important;outline:0!important} /* -------------------------------------------------------------------------- 3 — virtual education. Fine rules, no visual card system. -------------------------------------------------------------------------- */ .emkan-v135-virtual-program{ margin-top:34px!important;padding-top:0!important;border-top:1px solid var(--line)!important; color:var(--fg)!important; } .emkan-v135-virtual-head{display:flex!important;align-items:flex-end!important;justify-content:space-between!important;gap:24px!important;padding:17px 0 15px!important;border-bottom:1px solid var(--line)!important} .emkan-v135-virtual-head h2{margin:0!important;font-size:15px!important;font-weight:600!important;line-height:1.7!important} .emkan-v135-virtual-head p{margin:3px 0 0!important;color:var(--category-muted)!important;font-size:10.5px!important;line-height:1.9!important;max-width:690px!important} .emkan-v135-virtual-badges{display:flex!important;align-items:center!important;gap:13px!important;flex-wrap:wrap!important;white-space:nowrap!important} .emkan-v135-virtual-badge{font-size:9px!important;color:var(--category-muted)!important;padding-bottom:3px!important;border-bottom:1px solid var(--line)!important} .emkan-v135-access-gate{padding:18px 0!important;border-bottom:1px solid var(--line)!important;max-width:650px!important} .emkan-v135-access-gate p{margin:0 0 12px!important;font-size:11px!important;line-height:2!important;color:var(--category-muted)!important} .emkan-v135-access-row{display:grid!important;grid-template-columns:minmax(0,1fr) auto!important;gap:14px!important;align-items:end!important} .emkan-v135-access-row label{display:grid!important;gap:4px!important;font-size:10px!important;color:var(--category-muted)!important} .emkan-v135-access-row input{border:0!important;border-bottom:1px solid var(--line)!important;background:transparent!important;color:var(--fg)!important;padding:8px 0!important;outline:0!important;font:inherit!important;letter-spacing:.05em!important} .emkan-v135-access-row input:focus{border-bottom-color:var(--hover-accent)!important} .emkan-v135-access-row button,.emkan-v135-lesson-complete,.emkan-v135-materials a{ appearance:none!important;border:0!important;border-bottom:1px solid var(--line)!important;background:transparent!important;color:var(--fg)!important; padding:8px 0!important;text-decoration:none!important;font:inherit!important;font-size:10.5px!important;cursor:pointer!important; } .emkan-v135-access-row button:hover,.emkan-v135-lesson-complete:hover,.emkan-v135-materials a:hover{color:var(--hover-accent)!important;border-bottom-color:var(--hover-accent)!important} .emkan-v135-access-status{min-height:18px!important;margin:8px 0 0!important;font-size:9.5px!important;color:var(--category-muted)!important} .emkan-v135-lessons{display:block!important} .emkan-v135-lesson{position:relative!important;display:grid!important;grid-template-columns:minmax(220px,.8fr) minmax(0,1.2fr)!important;gap:32px!important;padding:22px 0!important;border-bottom:1px solid var(--line)!important} .emkan-v135-lesson.is-locked{opacity:.52!important} .emkan-v135-lesson.is-complete .emkan-v135-lesson-number{color:var(--hover-accent)!important} .emkan-v135-lesson-copy{min-width:0!important} .emkan-v135-lesson-kicker{display:flex!important;align-items:center!important;justify-content:space-between!important;gap:12px!important;margin:0 0 7px!important;color:var(--category-muted)!important;font-size:9px!important} .emkan-v135-lesson h3{margin:0 0 8px!important;font-size:13px!important;font-weight:600!important;line-height:1.8!important} .emkan-v135-lesson p{margin:0 0 11px!important;font-size:10.5px!important;line-height:2!important;color:var(--category-muted)!important;white-space:pre-line!important} .emkan-v135-video-wrap{position:relative!important;width:100%!important;aspect-ratio:16/9!important;background:rgba(127,127,127,.045)!important;overflow:hidden!important} .emkan-v135-video-wrap video{display:block!important;width:100%!important;height:100%!important;object-fit:contain!important;background:#050607!important} .emkan-v135-video-lock{position:absolute!important;inset:0!important;display:grid!important;place-items:center!important;background:color-mix(in srgb,var(--bg) 86%,transparent)!important;font-size:10px!important;color:var(--category-muted)!important;text-align:center!important;padding:20px!important} .emkan-v135-progress-line{height:1px!important;background:var(--line)!important;margin-top:12px!important;overflow:hidden!important} .emkan-v135-progress-line>span{display:block!important;height:1px!important;width:0;background:var(--hover-accent)!important;transition:width .18s linear!important} .emkan-v135-materials{padding:18px 0!important;border-bottom:1px solid var(--line)!important} .emkan-v135-materials h3{margin:0 0 8px!important;font-size:12px!important;font-weight:600!important} .emkan-v135-materials-list{display:flex!important;gap:20px!important;flex-wrap:wrap!important} .emkan-v135-material-disabled{font-size:10px!important;color:var(--category-muted)!important;padding-bottom:6px!important;border-bottom:1px solid var(--line)!important;opacity:.65!important} :is(html[lang="fa"],html[lang="ar"]) .emkan-v135-virtual-program{direction:rtl!important;text-align:right!important} html[lang="en"] .emkan-v135-virtual-program{direction:ltr!important;text-align:left!important} @media(max-width:760px){ .emkan-v135-virtual-head{align-items:flex-start!important;flex-direction:column!important;gap:8px!important} .emkan-v135-lesson{grid-template-columns:1fr!important;gap:14px!important;padding:18px 0!important} .emkan-v135-access-row{grid-template-columns:1fr!important} } /* Admin controls for virtual programmes: same line-based form language. */ .emkan-v135-virtual-admin{grid-column:1/-1!important;margin:10px 0 4px!important;padding:16px 0 0!important;border-top:1px solid var(--line,#d7d9dd)!important} .emkan-v135-virtual-admin>h3{margin:0 0 12px!important;font-size:13px!important;font-weight:650!important} .emkan-v135-virtual-admin>p{margin:0 0 14px!important;font-size:10px!important;line-height:1.9!important;color:var(--muted,#6e747c)!important} .emkan-v135-virtual-admin-grid{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:12px 18px!important} .emkan-v135-virtual-admin-grid>label{margin:0!important} .emkan-v135-virtual-admin-grid>.emkan-v135-full{grid-column:1/-1!important} .emkan-v135-virtual-check{display:flex!important;align-items:center!important;gap:8px!important;min-height:34px!important} @media(max-width:760px){.emkan-v135-virtual-admin-grid{grid-template-columns:1fr!important}.emkan-v135-virtual-admin-grid>.emkan-v135-full{grid-column:auto!important}} /* -------------------------------------------------------------------------- 8 — common project-style image enlargement -------------------------------------------------------------------------- */ .emkan-v135-viewer{ position:fixed!important;inset:0!important;z-index:2147482500!important;display:grid!important; grid-template-columns:54px minmax(0,1fr) 54px!important;grid-template-rows:54px minmax(0,1fr)!important; padding:10px!important;background:rgba(7,9,12,.95)!important;color:#fff!important; } .emkan-v135-viewer[hidden]{display:none!important} .emkan-v135-viewer-stage{grid-column:1/-1!important;grid-row:2!important;display:flex!important;align-items:center!important;justify-content:center!important;min-width:0!important;min-height:0!important;overflow:hidden!important} .emkan-v135-viewer-stage img{display:block!important;max-width:calc(100vw - 36px)!important;max-height:calc(100vh - 78px)!important;width:auto!important;height:auto!important;object-fit:contain!important;box-shadow:none!important;border:0!important} .emkan-v135-viewer button{appearance:none!important;border:0!important;background:transparent!important;color:#fff!important;cursor:pointer!important;box-shadow:none!important;opacity:.82!important} .emkan-v135-viewer button:hover,.emkan-v135-viewer button:focus-visible{opacity:1!important;outline:0!important} .emkan-v135-viewer-close{grid-column:3!important;grid-row:1!important;justify-self:end!important;align-self:center!important;width:38px!important;height:38px!important;padding:0!important;font:300 29px/1 Arial,sans-serif!important} .emkan-v135-viewer-prev,.emkan-v135-viewer-next{grid-row:2!important;z-index:2!important;width:44px!important;height:60px!important;padding:0!important;align-self:center!important} .emkan-v135-viewer-prev{grid-column:1!important}.emkan-v135-viewer-next{grid-column:3!important} .emkan-v135-viewer-prev svg,.emkan-v135-viewer-next svg{width:18px!important;height:30px!important;fill:none!important;stroke:currentColor!important;stroke-width:1.15!important;stroke-linecap:round!important;stroke-linejoin:round!important} body.emkan-v135-viewer-open{overflow:hidden!important} .v120-report-gallery img,.v49-course img,.learning-panel img{cursor:zoom-in!important} /* remove old oversized report-viewer line/rail if a legacy layer created one */ .emkan-gallery-lightbox{display:none!important} .emkan-gallery-lightbox[hidden]{display:none!important} /* Existing Store product lightbox is normalized to the same project-style geometry. */ .emkan-product-lightbox{background:rgba(7,9,12,.95)!important} .emkan-product-lightbox-close{top:10px!important;right:10px!important;width:38px!important;height:38px!important;font-size:29px!important;font-weight:300!important} .emkan-product-lightbox-stage{overflow:hidden!important;border:0!important} .emkan-product-lightbox-stage::after{display:none!important} /* Small language/layout stabilization: language changes must not leave stale direction. */ html[lang="fa"],html[lang="ar"]{direction:rtl} html[lang="en"]{direction:ltr} /* Legacy v127 report viewer is neutralized to the same project-style viewer: no oversized bottom track; close stays in the corner. */ .emkan-report-viewer-foot{display:none!important} .emkan-report-viewer{background:rgba(7,9,12,.95)!important;padding-bottom:10px!important} .emkan-report-viewer-head{min-height:46px!important;border:0!important;padding:0 10px!important} .emkan-report-viewer-close{width:38px!important;height:38px!important;font:300 29px/1 Arial,sans-serif!important} .emkan-report-viewer-stage{inset-block-end:10px!important;border:0!important} .emkan-report-viewer-slides{border:0!important;scrollbar-width:none!important} .emkan-report-viewer-slides::-webkit-scrollbar{display:none!important} /* ===== emkan-v136.css ===== */ /* EMKAN v136 — final geometry, canonical controls/search, education rail, square covers. Loaded after v135. Preserve the approved minimal / linear language. */ :root{ --emkan-v136-menu-max:1320px; --emkan-v136-content-max:1430px; --emkan-v136-page-gutter:48px; } /* -------------------------------------------------------------------------- Header: narrower than the page content. Utilities are physical left/right, independent of RTL/LTR, so changing language cannot move them into the nav. -------------------------------------------------------------------------- */ @media (min-width:901px){ html body .site-header{ width:min(calc(100% - 96px),var(--emkan-v136-menu-max))!important; max-width:var(--emkan-v136-menu-max)!important; margin-inline:auto!important; } html body .site-header .nav-frame{ position:relative!important; display:block!important; min-height:52px!important; } html body .site-header .primary-nav{ width:100%!important; min-height:52px!important; padding-inline:112px!important; box-sizing:border-box!important; display:flex!important; align-items:center!important; justify-content:center!important; } html body .site-header .nav-list{ width:max-content!important; max-width:100%!important; margin-inline:auto!important; gap:clamp(18px,1.45vw,28px)!important; align-items:center!important; justify-content:center!important; } html body .site-header .language-button, html[dir="rtl"] body .site-header .language-button, html[dir="ltr"] body .site-header .language-button{ position:absolute!important; left:16px!important;right:auto!important;inset-inline:auto!important; top:50%!important;bottom:auto!important; transform:translateY(-50%)!important; margin:0!important;z-index:30!important; } html body .site-header .theme-button, html body .site-header .nav-frame>#themeButton.theme-button, html[dir="rtl"] body .site-header .theme-button, html[dir="ltr"] body .site-header .theme-button{ position:absolute!important; right:16px!important;left:auto!important;inset-inline:auto!important; top:50%!important;bottom:auto!important; transform:translateY(-50%)!important; margin:0!important;z-index:30!important; } } /* One exact utility size everywhere except the dedicated Welcome pair. */ body:not(.welcome-page) .site-header :is(.theme-button,.language-button), .menu-page :is(.theme-button,.language-button), .account-language-rail :is(.theme-toggle,.auth-theme-inline){ min-height:30px!important;height:30px!important; padding-block:0!important; } body:not(.welcome-page) .site-header .theme-button, .menu-page .theme-button, .account-language-rail :is(.theme-toggle,.auth-theme-inline){ width:30px!important;min-width:30px!important;padding-inline:0!important; display:inline-grid!important;place-items:center!important; } body:not(.welcome-page) .site-header .theme-button .theme-icon-wrap, .menu-page .theme-button .theme-icon-wrap, .account-language-rail :is(.theme-toggle,.auth-theme-inline) .theme-icon-wrap{ width:15px!important;height:15px!important;display:grid!important;place-items:center!important; } body:not(.welcome-page) .site-header .theme-button :is(svg,i), .menu-page .theme-button :is(svg,i), .account-language-rail :is(.theme-toggle,.auth-theme-inline) :is(svg,i){ width:13.5px!important;height:13.5px!important;font-size:13.5px!important; } /* -------------------------------------------------------------------------- Page geometry: breadcrumb/back line is one step wider than the menu and all page content uses exactly that same outer measure. -------------------------------------------------------------------------- */ @media (min-width:901px){ body :is( .architecture-main,.module-main,.store-main,.store-category-main,.product-main, .checkout-main,.articles-main,.article-page,.detail-main,.v49-main,.podcast-main, .about-main,.contact-main,.careers-main,.emkan-search-main,.emkan-member-main, .project-main,.account-shell ){ width:min(calc(100% - 96px),var(--emkan-v136-content-max))!important; max-width:var(--emkan-v136-content-max)!important; margin-inline:auto!important; box-sizing:border-box!important; } body :is(.emkan-context-bar,.store-context-bar,.podcast-context-bar,.product-toolbar,.detail-nav,.short-back,.article-page-back){ width:100%!important;max-width:none!important;box-sizing:border-box!important; } /* Education details previously re-shrank themselves to 1050px. Keep their outer line aligned to the same breadcrumb/content width. */ body.content-section-page .v49-main:has(.v86-course-detail), body.content-section-page .v49-main:has(.v49-reading){ width:min(calc(100% - 96px),var(--emkan-v136-content-max))!important; max-width:var(--emkan-v136-content-max)!important; } body.content-section-page #contentApp>.v69-content-detail-layout{ width:100%!important;max-width:100%!important;margin-inline:0!important; } } /* -------------------------------------------------------------------------- Store search — exact canonical line + magnifier used by other sections. -------------------------------------------------------------------------- */ .store-category-side .product-search{ position:relative!important;display:block!important;width:100%!important; height:28px!important;min-height:28px!important;margin:0 0 18px!important; padding:0!important;border:0!important;background:transparent!important; } .store-category-side .product-search>.lang-fa, .store-category-side .product-search>.lang-en, .store-category-side .product-search>.lang-ar{ position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important; overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important; } .store-category-side .product-search input[type="search"]{ display:block!important;width:100%!important;height:28px!important;min-height:28px!important; margin:0!important;padding-block:0 5px!important;border:0!important;border-bottom:1px solid var(--line)!important; border-radius:0!important;background:transparent!important;color:var(--fg)!important;box-shadow:none!important;outline:0!important; font:inherit!important;font-size:10px!important;line-height:1.5!important; -webkit-appearance:none!important;appearance:none!important; } .store-category-side .product-search input[type="search"]:is(:hover,:focus){border-bottom-color:var(--hover-accent)!important} :is(html[lang="fa"],html[lang="ar"]) .store-category-side .product-search input[type="search"]{ direction:rtl!important;text-align:right!important;padding-inline:0 26px!important; } html[lang="en"] .store-category-side .product-search input[type="search"]{ direction:ltr!important;text-align:left!important;padding-inline:0 26px!important; } .store-category-side .product-search>.search-icon.emkan-v136-store-search-icon{ position:absolute!important;z-index:4!important;top:50%!important;width:12px!important;height:12px!important; transform:translateY(-58%)!important;color:var(--category-muted,var(--fg))!important;opacity:.54!important; fill:none!important;stroke:currentColor!important;stroke-width:1.55!important;pointer-events:none!important; } :is(html[lang="fa"],html[lang="ar"]) .store-category-side .product-search>.search-icon.emkan-v136-store-search-icon{left:9px!important;right:auto!important} html[lang="en"] .store-category-side .product-search>.search-icon.emkan-v136-store-search-icon{right:9px!important;left:auto!important} /* -------------------------------------------------------------------------- Education: FA/AR rail is physically right, EN rail physically left. The main column begins at the same vertical level and receives a topic lead. -------------------------------------------------------------------------- */ @media (min-width:901px){ :is(html[lang="fa"],html[lang="ar"]) body.content-section-page #contentApp .v69-content-detail-layout:has(.v49-reading), :is(html[lang="fa"],html[lang="ar"]) body.content-section-page #contentApp .v69-content-detail-layout:has(.v86-course-detail){ display:grid!important;direction:ltr!important; grid-template-columns:minmax(0,1fr) 190px!important; grid-template-areas:"content rail"!important; column-gap:clamp(42px,4vw,62px)!important;align-items:start!important; } html[lang="en"] body.content-section-page #contentApp .v69-content-detail-layout:has(.v49-reading), html[lang="en"] body.content-section-page #contentApp .v69-content-detail-layout:has(.v86-course-detail){ display:grid!important;direction:ltr!important; grid-template-columns:190px minmax(0,1fr)!important; grid-template-areas:"rail content"!important; column-gap:clamp(42px,4vw,62px)!important;align-items:start!important; } body.content-section-page #contentApp .v69-content-detail-layout:has(.v49-reading)>.v69-content-search-rail, body.content-section-page #contentApp .v69-content-detail-layout:has(.v86-course-detail)>.v69-content-search-rail{ grid-area:rail!important;width:190px!important;max-width:190px!important;margin:0!important;padding:0!important; } body.content-section-page #contentApp .v69-content-detail-layout:has(.v49-reading)>.v69-content-detail-body, body.content-section-page #contentApp .v69-content-detail-layout:has(.v86-course-detail)>.v69-content-detail-body{ grid-area:content!important;width:100%!important;max-width:none!important;margin:0!important;padding:0!important;min-width:0!important; } } .emkan-v136-learning-lead{ width:100%!important;margin:0 0 26px!important;padding:0 0 18px!important; border-bottom:1px solid var(--line)!important;box-sizing:border-box!important; } .emkan-v136-learning-lead h1{margin:0 0 8px!important;font-size:21px!important;font-weight:620!important;line-height:1.65!important;color:var(--fg)!important} .emkan-v136-learning-lead p{margin:0!important;max-width:760px!important;font-size:11px!important;line-height:2!important;color:var(--category-muted,var(--fg))!important} :is(html[lang="fa"],html[lang="ar"]) .emkan-v136-learning-lead{text-align:right!important;direction:rtl!important} html[lang="en"] .emkan-v136-learning-lead{text-align:left!important;direction:ltr!important} body.content-section-page #contentApp .v49-reading.v136-has-lead>.v49-top{display:none!important} /* -------------------------------------------------------------------------- Covers: cards / project covers / product covers / service covers are square. Gallery frames, videos, office photos and long-form editorial imagery are not forcibly cropped unless they are a cover component. -------------------------------------------------------------------------- */ :is( .img-wrapper,.category-square,.store-square,.product-card-media,.related-item-media, .related-media,.v49-card-media,.v49-course-media,.v49-course-cover,.v49-work-media, .research-entry-media,.research-index-media,.dx-card-media,.dx-card-placeholder, .podcast-series-cover,.episode-cover,.player-cover,.v115-course-poster, .product-main-image,.learning-course-cover,.civil-entry-media img ){aspect-ratio:1/1!important;height:auto!important;min-height:0!important;overflow:hidden!important} :is( .img-wrapper,.category-square,.store-square,.product-card-media,.related-item-media, .related-media,.v49-card-media,.v49-course-media,.v49-course-cover,.v49-work-media, .research-entry-media,.research-index-media,.dx-card-media,.v115-course-poster, .product-main-image,.learning-course-cover ) > img, :is(.dx-card-media,.podcast-series-cover,.episode-cover,.player-cover,.learning-course-cover,.civil-entry-media img){ width:100%!important;height:100%!important;object-fit:cover!important; } .product-main #productMainImage{aspect-ratio:1/1!important;height:auto!important;max-width:330px!important} .product-main #productMainImage img{width:100%!important;height:100%!important;object-fit:cover!important} /* Responsive: leave established mobile composition intact, only retain square covers. */ @media (max-width:900px){ .emkan-v136-learning-lead{margin-bottom:20px!important;padding-bottom:14px!important} .emkan-v136-learning-lead h1{font-size:18px!important} } /* ========================================================================== v136 finalization — unified enlargement, checkbox grammar, R&D rhythm ========================================================================== */ /* Education/report thumbnails stay square in-page. */ .v120-report-gallery img, .v106-course-gallery-thumbs img, .v73-sample-gallery img, .learning-gallery img{ aspect-ratio:1/1!important; width:100%!important; height:auto!important; object-fit:cover!important; } /* Expanded educational galleries follow the Architecture project viewer: a wide rectangular stage, natural image ratio, no square crop / bottom rail. */ .emkan-v135-viewer{ position:fixed!important; inset:0!important; display:block!important; padding:0!important; background:rgba(8,10,13,.95)!important; backdrop-filter:blur(8px)!important; -webkit-backdrop-filter:blur(8px)!important; color:#f7f8fa!important; } .emkan-v135-viewer[hidden]{display:none!important} .emkan-v135-viewer-stage{ position:absolute!important; inset:46px 48px 48px!important; width:auto!important;height:auto!important; display:grid!important;place-items:center!important; overflow:hidden!important; background:transparent!important; border:0!important; } .emkan-v135-viewer-stage img{ display:block!important; width:auto!important;height:auto!important; max-width:100%!important;max-height:100%!important; aspect-ratio:auto!important; object-fit:contain!important; object-position:center!important; border:0!important;box-shadow:none!important; border-radius:0!important; user-select:none!important;-webkit-user-drag:none!important; } .emkan-v135-viewer-close{ position:absolute!important;z-index:8!important; top:12px!important;right:16px!important;left:auto!important; width:34px!important;height:34px!important; display:grid!important;place-items:center!important; padding:0!important; font:200 25px/1 Arial,sans-serif!important; opacity:.68!important; } .emkan-v135-viewer-prev,.emkan-v135-viewer-next{ position:absolute!important;z-index:8!important; top:50%!important;transform:translateY(-50%)!important; width:38px!important;height:56px!important; display:grid!important;place-items:center!important; padding:0!important;opacity:.5!important; } .emkan-v135-viewer-prev:hover,.emkan-v135-viewer-next:hover, .emkan-v135-viewer-prev:focus-visible,.emkan-v135-viewer-next:focus-visible{ color:var(--hover-accent)!important;opacity:1!important; } html[lang="en"] .emkan-v135-viewer-prev{left:0!important;right:auto!important} html[lang="en"] .emkan-v135-viewer-next{right:0!important;left:auto!important} :is(html[lang="fa"],html[lang="ar"]) .emkan-v135-viewer-prev{right:0!important;left:auto!important} :is(html[lang="fa"],html[lang="ar"]) .emkan-v135-viewer-next{left:0!important;right:auto!important} :is(html[lang="fa"],html[lang="ar"]) .emkan-v135-viewer-prev svg, :is(html[lang="fa"],html[lang="ar"]) .emkan-v135-viewer-next svg{transform:scaleX(-1)!important} .emkan-v135-viewer-prev svg,.emkan-v135-viewer-next svg{ width:17px!important;height:29px!important;fill:none!important; stroke:currentColor!important;stroke-width:1.15!important; stroke-linecap:round!important;stroke-linejoin:round!important; } /* Fully neutralize legacy education report viewers so there is only one visual system. */ .emkan-report-lightbox,.emkan-report-viewer,.emkan-gallery-lightbox{display:none!important} body.emkan-lightbox-open:not(.emkan-v135-viewer-open){overflow:auto!important} @media(max-width:700px){ .emkan-v135-viewer-stage{inset:46px 28px 42px!important} .emkan-v135-viewer-close{right:8px!important} .emkan-v135-viewer-prev,.emkan-v135-viewer-next{width:28px!important} } /* Canonical checkbox: one restrained square everywhere, including admin. Removes inconsistent browser ticks / blue fills while keeping a clear state. */ html body input[type="checkbox"]{ -webkit-appearance:none!important;appearance:none!important; width:14px!important;height:14px!important;min-width:14px!important;min-height:14px!important; margin:0!important;padding:0!important; border:1px solid color-mix(in srgb,var(--fg,#15181d) 34%,transparent)!important; border-radius:0!important; background-color:transparent!important; background-repeat:no-repeat!important;background-position:center!important;background-size:10px 10px!important; box-shadow:none!important;outline:0!important; vertical-align:middle!important;cursor:pointer!important; transition:border-color .16s ease,background-color .16s ease,opacity .16s ease!important; } html body input[type="checkbox"]:hover, html body input[type="checkbox"]:focus-visible{border-color:var(--hover-accent,var(--accent,#4b7c91))!important} html body input[type="checkbox"]:checked{ border-color:var(--hover-accent,var(--accent,#4b7c91))!important; background-color:var(--hover-accent,var(--accent,#4b7c91))!important; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.1 8.2 6.35 11.25 12.9 4.8' fill='none' stroke='%23fff' stroke-width='1.55' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")!important; } html body input[type="checkbox"]:disabled{opacity:.38!important;cursor:not-allowed!important} html body label:has(>input[type="checkbox"]), html body label:has(input[type="checkbox"]){align-items:center!important} /* R&D now uses the same post-navigation vertical rhythm as the rest of EMKAN. */ body.emkan-v136-rd-landing .module-main{padding-top:36px!important} body.emkan-v136-rd-section .detail-main{padding-top:34px!important} body.emkan-v136-rd-articles .articles-main--architecture-tools{padding-top:34px!important} body.emkan-v136-rd-article .article-page{padding-top:34px!important} @media(max-width:900px){ body.emkan-v136-rd-landing .module-main, body.emkan-v136-rd-section .detail-main, body.emkan-v136-rd-articles .articles-main--architecture-tools, body.emkan-v136-rd-article .article-page{padding-top:28px!important} } @media(max-width:560px){ body.emkan-v136-rd-landing .module-main, body.emkan-v136-rd-section .detail-main, body.emkan-v136-rd-articles .articles-main--architecture-tools, body.emkan-v136-rd-article .article-page{padding-top:22px!important} } /* Keep the site visually one system: no module may override the shared line, accent, theme timing or cover radius with a local visual language. */ body:not([class*="admin"]) { --theme-duration:620ms; --theme-ease:cubic-bezier(.22,.61,.36,1); } body:not([class*="admin"]) :is(.category-card,.store-card,.product-card,.research-index-card,.v49-card,.v49-course){border-radius:0!important} /* v136 final small guarantees */ body:not(:has(.sidebar)):not(:has(.side)){font-size:var(--emkan-v136-base-size,16px)} .store-category-side .product-search:not(:has(.emkan-v136-store-search-icon))::after{ content:"";position:absolute;z-index:4;top:50%;width:12px;height:12px;transform:translateY(-58%);opacity:.54;pointer-events:none; background:currentColor;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='black' stroke-width='1.55'%3E%3Ccircle cx='10.8' cy='10.8' r='6.1'/%3E%3Cpath d='M15.4 15.4 20 20'/%3E%3C/g%3E%3C/svg%3E") center/contain no-repeat; -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='black' stroke-width='1.55'%3E%3Ccircle cx='10.8' cy='10.8' r='6.1'/%3E%3Cpath d='M15.4 15.4 20 20'/%3E%3C/g%3E%3C/svg%3E") center/contain no-repeat; } :is(html[lang="fa"],html[lang="ar"]) .store-category-side .product-search:not(:has(.emkan-v136-store-search-icon))::after{left:9px;right:auto} html[lang="en"] .store-category-side .product-search:not(:has(.emkan-v136-store-search-icon))::after{right:9px;left:auto} /* ===== emkan-v138.css ===== */ /* EMKAN v138 — final public geometry + unified utilities/search/education/covers. This is a narrow corrective layer over v136; it does not restyle the approved theme. */ :root{ --emkan-v138-menu-max:1288px; --emkan-v138-content-max:1430px; --emkan-v138-utility-inset:12px; --emkan-v138-menu-gap:24px; --emkan-v138-line:var(--line,#d8dadd); } /* 1) Header is intentionally one step narrower than breadcrumb/page content. */ @media (min-width:901px){ html body .site-header{ width:min(calc(100% - 96px),var(--emkan-v138-menu-max))!important; max-width:var(--emkan-v138-menu-max)!important; margin-inline:auto!important; } html body .site-header .nav-frame{ position:relative!important; display:block!important; width:100%!important; min-height:52px!important; } html body .site-header .primary-nav{ width:100%!important; min-height:52px!important; padding-inline:104px!important; box-sizing:border-box!important; display:flex!important; align-items:center!important; justify-content:center!important; } html body .site-header .nav-list{ width:max-content!important; max-width:100%!important; margin:0 auto!important; gap:clamp(18px,var(--emkan-v138-menu-gap),28px)!important; align-items:center!important; justify-content:center!important; } /* Explicitly clear old logical offsets BEFORE physical coordinates. */ html body .site-header .language-button, html[dir="rtl"] body .site-header .language-button, html[dir="ltr"] body .site-header .language-button{ position:absolute!important; inset-inline-start:auto!important; inset-inline-end:auto!important; left:var(--emkan-v138-utility-inset)!important; right:auto!important; top:50%!important; bottom:auto!important; transform:translateY(-50%)!important; margin:0!important; z-index:40!important; } html body .site-header .theme-button, html body .site-header .nav-frame>#themeButton.theme-button, html[dir="rtl"] body .site-header .theme-button, html[dir="ltr"] body .site-header .theme-button{ position:absolute!important; inset-inline-start:auto!important; inset-inline-end:auto!important; right:var(--emkan-v138-utility-inset)!important; left:auto!important; top:50%!important; bottom:auto!important; transform:translateY(-50%)!important; margin:0!important; z-index:40!important; } /* Outer page measure: breadcrumb/back and every main page shell align exactly. */ body:not(.welcome-page):not(.menu-page) .page-shell>main, body :is( .architecture-main,.module-main,.store-main,.store-category-main,.product-main, .checkout-main,.articles-main,.article-page,.detail-main,.v49-main,.podcast-main, .about-main,.contact-main,.careers-main,.emkan-search-main,.emkan-member-main, .project-main,.account-shell ){ width:min(calc(100% - 96px),var(--emkan-v138-content-max))!important; max-width:var(--emkan-v138-content-max)!important; margin-inline:auto!important; box-sizing:border-box!important; } body :is(.emkan-context-bar,.store-context-bar,.podcast-context-bar,.product-toolbar,.detail-nav,.short-back,.article-page-back){ width:100%!important; max-width:none!important; margin-inline:0!important; box-sizing:border-box!important; } } /* 2) Store search: same line, same magnifier, including the generated proxy search. */ :is(.store-category-side,.emkan-store-filter-rail) :is(.product-search,.emkan-store-search-proxy){ position:relative!important; display:block!important; width:100%!important; min-height:28px!important; margin:0 0 14px!important; padding:0!important; border:0!important; background:transparent!important; } :is(.store-category-side,.emkan-store-filter-rail) :is(.product-search,.emkan-store-search-proxy)>span[class^="lang-"]{ position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important; overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important; } :is(.store-category-side,.emkan-store-filter-rail) :is(.product-search,.emkan-store-search-proxy) input[type="search"]{ display:block!important; width:100%!important;height:28px!important;min-height:28px!important; margin:0!important;padding-block:0 5px!important; border:0!important;border-bottom:1px solid var(--line)!important;border-radius:0!important; background:transparent!important;color:var(--fg)!important;box-shadow:none!important;outline:0!important; font:inherit!important;font-size:10px!important;line-height:1.5!important; -webkit-appearance:none!important;appearance:none!important; } :is(.store-category-side,.emkan-store-filter-rail) :is(.product-search,.emkan-store-search-proxy) input[type="search"]:is(:hover,:focus){ border-bottom-color:var(--hover-accent)!important; } :is(html[lang="fa"],html[lang="ar"]) :is(.store-category-side,.emkan-store-filter-rail) :is(.product-search,.emkan-store-search-proxy) input[type="search"]{ direction:rtl!important;text-align:right!important;padding-inline:0 25px!important; } html[lang="en"] :is(.store-category-side,.emkan-store-filter-rail) :is(.product-search,.emkan-store-search-proxy) input[type="search"]{ direction:ltr!important;text-align:left!important;padding-inline:0 25px!important; } :is(.store-category-side,.emkan-store-filter-rail) :is(.product-search,.emkan-store-search-proxy)>.emkan-v138-store-search-icon{ display:block!important; visibility:visible!important; position:absolute!important;z-index:5!important;top:50%!important; width:12px!important;height:12px!important; transform:translateY(-58%)!important; color:var(--category-muted,var(--fg))!important;opacity:.58!important; fill:none!important;stroke:currentColor!important;stroke-width:1.5!important; stroke-linecap:round!important;stroke-linejoin:round!important; pointer-events:none!important; } :is(html[lang="fa"],html[lang="ar"]) :is(.store-category-side,.emkan-store-filter-rail) :is(.product-search,.emkan-store-search-proxy)>.emkan-v138-store-search-icon{left:7px!important;right:auto!important} html[lang="en"] :is(.store-category-side,.emkan-store-filter-rail) :is(.product-search,.emkan-store-search-proxy)>.emkan-v138-store-search-icon{right:7px!important;left:auto!important} /* 3) Education detail: rail/search/tree on the correct physical side; lead fills the formerly empty area. */ @media (min-width:901px){ body.emkan-v138-education-detail #contentApp .v69-content-detail-layout{ display:grid!important; direction:ltr!important; width:100%!important; max-width:100%!important; margin-inline:0!important; column-gap:clamp(40px,4vw,60px)!important; align-items:start!important; } :is(html[lang="fa"],html[lang="ar"]) body.emkan-v138-education-detail #contentApp .v69-content-detail-layout{ grid-template-columns:minmax(0,1fr) 190px!important; grid-template-areas:"content rail"!important; } html[lang="en"] body.emkan-v138-education-detail #contentApp .v69-content-detail-layout{ grid-template-columns:190px minmax(0,1fr)!important; grid-template-areas:"rail content"!important; } body.emkan-v138-education-detail #contentApp .v69-content-search-rail{ grid-area:rail!important; width:190px!important;max-width:190px!important; margin:0!important;padding:0!important; align-self:start!important; } body.emkan-v138-education-detail #contentApp .v69-content-detail-body{ grid-area:content!important; width:100%!important;max-width:none!important;min-width:0!important; margin:0!important;padding:0!important; } } .emkan-v138-learning-lead{ width:100%!important; margin:0 0 24px!important; padding:0 0 18px!important; border-bottom:1px solid var(--line)!important; box-sizing:border-box!important; } .emkan-v138-learning-lead h1{margin:0 0 8px!important;font-size:21px!important;font-weight:620!important;line-height:1.65!important;color:var(--fg)!important} .emkan-v138-learning-lead p{margin:0!important;max-width:790px!important;font-size:11px!important;line-height:2!important;color:var(--category-muted,var(--muted,var(--fg)))!important} :is(html[lang="fa"],html[lang="ar"]) .emkan-v138-learning-lead{text-align:right!important;direction:rtl!important} html[lang="en"] .emkan-v138-learning-lead{text-align:left!important;direction:ltr!important} body.emkan-v138-education-detail .emkan-v136-learning-lead{display:none!important} /* 4) Every listing/card cover is square. Fullscreen/gallery images are intentionally excluded. */ :is( .category-square,.store-square,.img-wrapper,.product-card-media,.related-item-media,.related-media, .v49-card-media,.v49-course-media,.v49-course-cover,.v49-work-media,.research-entry-media,.research-index-media, .dx-card-media,.dx-card-placeholder,.podcast-series-cover,.episode-cover,.player-cover,.v115-course-poster, .product-main-image,.learning-course-cover,.civil-entry-media,.person-card-media,.v115-course-media,.category-media,.v106-course-thumb,.v73-sample-thumb,.emkan-v138-square-cover ){ aspect-ratio:1/1!important; overflow:hidden!important; min-height:0!important; } :is( .category-square,.store-square,.img-wrapper,.product-card-media,.related-item-media,.related-media, .v49-card-media,.v49-course-media,.v49-course-cover,.v49-work-media,.research-entry-media,.research-index-media, .dx-card-media,.podcast-series-cover,.episode-cover,.player-cover,.v115-course-poster, .product-main-image,.learning-course-cover,.civil-entry-media,.person-card-media,.v115-course-media,.category-media,.v106-course-thumb,.v73-sample-thumb,.emkan-v138-square-cover )>img, :is(.emkan-v138-square-cover,img.emkan-v138-square-image){ width:100%!important;height:100%!important;object-fit:cover!important; } /* Keep image enlargement natural / rectangular, never inherited from square covers. */ :is(.emkan-v135-viewer-stage,.project-lightbox-stage,.project-viewer-stage) img{ aspect-ratio:auto!important; width:auto!important;height:auto!important; max-width:100%!important;max-height:100%!important; object-fit:contain!important; } /* 5) Module-level visual variables from admin: restrained overrides only. */ body:not([class*="admin"]){ --line:var(--emkan-v138-line,var(--line)); font-size:var(--emkan-v138-base-size,inherit); } body:not([class*="admin"]) :is(.category-grid,.store-grid,.project-grid,.v49-grid,.research-index-grid){ gap:var(--emkan-v138-card-gap,inherit)!important; } @media (max-width:900px){ .emkan-v138-learning-lead{margin-bottom:18px!important;padding-bottom:14px!important} .emkan-v138-learning-lead h1{font-size:18px!important} } /* ===== emkan-v139.css ===== */ /* EMKAN v139 — regression correction pass. Purpose: restore the approved thin/linear system after v138, without redesigning modules. */ /* -------------------------------------------------------------------------- 1) GLOBAL HEADER — thin again, and one clear step narrower than page content. Desktop geometry intentionally follows the older 34px approved nav rhythm. -------------------------------------------------------------------------- */ @media (min-width:1280px){ html body .site-header{ width:min(calc(100% - 240px),1300px)!important; max-width:1300px!important; margin-inline:auto!important; } html body .site-header .nav-frame{ min-height:34px!important; height:34px!important; margin-top:14px!important; } html body .site-header .primary-nav{ min-height:34px!important; height:34px!important; padding-inline:82px!important; display:flex!important; align-items:center!important; } html body .site-header .nav-list{ min-height:0!important; height:auto!important; gap:clamp(18px,1.35vw,26px)!important; } html body .site-header .language-button{left:10px!important;right:auto!important;} html body .site-header .theme-button, html body .site-header .nav-frame>#themeButton.theme-button{right:10px!important;left:auto!important;} } @media (min-width:901px) and (max-width:1279px){ html body .site-header{ width:min(calc(100% - 72px),1100px)!important; max-width:1100px!important; margin-inline:auto!important; } html body .site-header .nav-frame{min-height:36px!important;height:36px!important;margin-top:14px!important;} html body .site-header .primary-nav{min-height:36px!important;height:36px!important;padding-inline:62px!important;display:flex!important;align-items:center!important;} html body .site-header .nav-list{min-height:0!important;height:auto!important;gap:clamp(10px,1.05vw,17px)!important;} html body .site-header .language-button{left:8px!important;right:auto!important;} html body .site-header .theme-button, html body .site-header .nav-frame>#themeButton.theme-button{right:8px!important;left:auto!important;} } @media (min-width:901px){ html body .site-header .nav-frame{padding-block:0!important;box-sizing:border-box!important;align-items:center!important;} html body .site-header .primary-nav{margin:0!important;box-sizing:border-box!important;} html body .site-header .nav-list>li{min-height:0!important;height:auto!important;margin:0!important;padding:0!important;align-items:center!important;} html body .site-header .nav-link{padding-block:0!important;line-height:1.25!important;} html body .site-header :is(.language-button,.theme-button){top:50%!important;transform:translateY(-50%)!important;margin:0!important;} } /* -------------------------------------------------------------------------- 2) CARD/COVER RHYTHM — same breathing room as Architecture. v138 accidentally made some grids inherit a zero gap; explicitly restore it. -------------------------------------------------------------------------- */ @media (min-width:901px){ body:not([class*="admin"]) :is( .category-grid,.store-grid,.product-grid,.related-grid,.people-grid, .research-index-grid,.v49-grid,.v49-work-grid,.v74-level2-grid, .v74-sample-grid,.v73-portfolio-grid,.dx-grid ){ column-gap:clamp(26px,3vw,48px)!important; row-gap:clamp(46px,5.2vw,70px)!important; } } @media (max-width:900px){ body:not([class*="admin"]) :is( .category-grid,.store-grid,.product-grid,.related-grid,.people-grid, .research-index-grid,.v49-grid,.v49-work-grid,.v74-level2-grid, .v74-sample-grid,.v73-portfolio-grid,.dx-grid ){ column-gap:14px!important; row-gap:26px!important; } } /* -------------------------------------------------------------------------- 3) DROPDOWNS / FILTERS — compact, linear, no inflated vertical rhythm. Main navigation is deliberately excluded. -------------------------------------------------------------------------- */ :is( .category-list ul,.article-category-list ul,.detail-subcategory-list, .v49-filter-list,.podcast-filter-list,.podcast-topics,.podcast-seasons, .store-subcategory-list,.store-sort-list,.civil-filter-list,.research-filter-list, .research-category-list,.article-filter-list,.emkan-filter-list ){ gap:0!important; row-gap:0!important; padding-top:2px!important; padding-bottom:0!important; margin-top:0!important; } :is( .category-button,.article-category-choice,.detail-subcategory-list a, .v49-filter-option,.podcast-filter-list button,.podcast-topics button, .podcast-seasons button,.store-subcategory-list a,.store-sort-list button, .civil-filter-list button,.research-filter-list button,.research-category-list button, .emkan-landing-category,.emkan-filter-list button,.emkan-filter-list a ){ min-height:0!important; margin:0!important; padding:2px 0!important; line-height:1.34!important; } :is( .store-subcategory-filter,.store-sort-filter,.research-filter, .article-category-filter,.category-filter )>summary{ min-height:22px!important; padding-block:2px!important; line-height:1.35!important; } /* -------------------------------------------------------------------------- 4) STORE SEARCH — exactly one search. The legacy generated proxy is retired. -------------------------------------------------------------------------- */ .store-category-side .emkan-store-search-proxy, .emkan-store-filter-rail .emkan-store-search-proxy{display:none!important;} .store-category-side>.product-search, .store-category-side .product-search:has(#productSearch){ display:block!important; visibility:visible!important; position:relative!important; width:100%!important; min-height:28px!important; margin:0 0 14px!important; padding:0!important; border:0!important; background:transparent!important; } .store-category-side .product-search>span[class^="lang-"]{display:none!important;} .store-category-side .product-search::before, .store-category-side .product-search::after{display:none!important;content:none!important;} .store-category-side .product-search>:is(svg,i):not(.emkan-v139-store-search-icon){display:none!important;} .store-category-side .product-search #productSearch{ display:block!important; width:100%!important; height:28px!important; min-height:28px!important; margin:0!important; padding-block:0 5px!important; border:0!important; border-bottom:1px solid var(--line)!important; border-radius:0!important; background:transparent!important; color:var(--fg)!important; box-shadow:none!important; outline:0!important; font:inherit!important; font-size:10px!important; line-height:1.5!important; -webkit-appearance:none!important; appearance:none!important; } .store-category-side .product-search #productSearch:is(:hover,:focus){border-bottom-color:var(--hover-accent)!important;} :is(html[lang="fa"],html[lang="ar"]) .store-category-side .product-search #productSearch{ direction:rtl!important;text-align:right!important;padding-inline:0 24px!important; } html[lang="en"] .store-category-side .product-search #productSearch{ direction:ltr!important;text-align:left!important;padding-inline:0 24px!important; } .store-category-side .product-search>.emkan-v139-store-search-icon{ display:block!important;visibility:visible!important;position:absolute!important;z-index:6!important; top:50%!important;width:12px!important;height:12px!important;transform:translateY(-58%)!important; fill:none!important;stroke:currentColor!important;stroke-width:1.5!important; stroke-linecap:round!important;stroke-linejoin:round!important; color:var(--category-muted,var(--fg))!important;opacity:.58!important;pointer-events:none!important; } :is(html[lang="fa"],html[lang="ar"]) .store-category-side .product-search>.emkan-v139-store-search-icon{left:7px!important;right:auto!important;} html[lang="en"] .store-category-side .product-search>.emkan-v139-store-search-icon{right:7px!important;left:auto!important;} /* -------------------------------------------------------------------------- 5) R&D / ARTICLES — same post-nav vertical rhythm as the other modules. v136's 34px module padding was the source of the visible oversized gap. -------------------------------------------------------------------------- */ @media (min-width:901px){ body.emkan-v136-rd-landing .module-main, body.emkan-v136-rd-section .detail-main, body.emkan-v136-rd-articles .articles-main--architecture-tools, body.emkan-v136-rd-article .article-page{ padding-top:7px!important; margin-top:0!important; } body.emkan-v136-rd-section .emkan-context-bar, body.emkan-v136-rd-articles .emkan-context-bar, body.emkan-v136-rd-article .emkan-context-bar{ margin-top:5px!important; margin-bottom:18px!important; } } /* -------------------------------------------------------------------------- 6) ACCOUNT THEME ICON — same physical size as the rest of the site. -------------------------------------------------------------------------- */ .account-language-rail #themeToggle, .account-language-rail .theme-toggle, .account-language-rail .auth-theme-inline{ width:30px!important;height:30px!important;min-width:30px!important;min-height:30px!important; padding:0!important;margin-inline-start:6px!important;display:inline-grid!important;place-items:center!important; } .account-language-rail #themeToggle :is(svg,i), .account-language-rail .theme-toggle :is(svg,i), .account-language-rail .auth-theme-inline :is(svg,i), .account-language-rail #themeToggle .emkan-v133-theme-icon, .account-language-rail #themeToggle .emkan-v132-theme-moon, .account-language-rail #themeToggle .emkan-v132-theme-sun{ width:13.5px!important;height:13.5px!important;font-size:13.5px!important;line-height:13.5px!important; } /* Guardrail: card radius and thin rules remain one language everywhere. */ body:not([class*="admin"]) :is(.category-card,.store-card,.product-card,.research-index-card,.v49-card,.v49-course,.gallery-item){border-radius:0!important;} /* Specificity guard for older module sheets that used !important on opened lists. */ html body :is( .category-list ul,.article-category-list ul,.detail-subcategory-list, .v49-filter-list,.podcast-filter-list,.podcast-topics,.podcast-seasons, .store-subcategory-list,.store-sort-list,.civil-filter-list,.research-filter-list, .research-category-list,.article-filter-list,.emkan-filter-list ){gap:0!important;row-gap:0!important;padding-top:2px!important;padding-bottom:0!important;margin-top:0!important;} html body .articles-main--architecture-tools .article-category-list ul{gap:0!important;row-gap:0!important;} html body :is( .category-button,.article-category-choice,.detail-subcategory-list a, .v49-filter-option,.podcast-filter-list button,.podcast-topics button, .podcast-seasons button,.store-subcategory-list a,.store-sort-list button, .civil-filter-list button,.research-filter-list button,.research-category-list button, .emkan-landing-category,.emkan-filter-list button,.emkan-filter-list a ){min-height:0!important;margin:0!important;padding:2px 0!important;line-height:1.34!important;} /* ===== emkan-v140.css ===== */ /* EMKAN v140 — precision regression pass. Targeted fixes only: narrower/thinner navigation across breakpoints, canonical Store controls, article reading spacing, and account theme sizing. */ /* -------------------------------------------------------------------------- 1) HEADER / MENU — keep the approved thin two-line language. Desktop menu is deliberately much narrower than the page-content frame. -------------------------------------------------------------------------- */ @media (min-width:1280px){ html body .site-header{ width:min(calc(100% - 320px),1120px)!important; max-width:1120px!important; margin-inline:auto!important; } html body .site-header .nav-frame{ min-height:34px!important; height:34px!important; margin-top:14px!important; padding:0!important; } html body .site-header .primary-nav{ height:34px!important; min-height:34px!important; padding-inline:64px!important; margin:0!important; display:flex!important; align-items:center!important; justify-content:center!important; } html body .site-header .nav-list{ gap:clamp(15px,1.15vw,22px)!important; min-height:0!important; } html body .site-header .language-button{left:4px!important;right:auto!important;} html body .site-header .theme-button, html body .site-header .nav-frame>#themeButton.theme-button{right:4px!important;left:auto!important;} } @media (min-width:901px) and (max-width:1279px){ html body .site-header{ width:min(calc(100% - 120px),980px)!important; max-width:980px!important; margin-inline:auto!important; } html body .site-header .nav-frame{ min-height:34px!important; height:34px!important; margin-top:13px!important; padding:0!important; } html body .site-header .primary-nav{ height:34px!important; min-height:34px!important; padding-inline:58px!important; margin:0!important; display:flex!important; align-items:center!important; justify-content:center!important; } html body .site-header .nav-list{ gap:clamp(8px,.9vw,14px)!important; min-height:0!important; } html body .site-header .language-button{left:3px!important;right:auto!important;} html body .site-header .theme-button, html body .site-header .nav-frame>#themeButton.theme-button{right:3px!important;left:auto!important;} } @media (min-width:901px){ html body .site-header .nav-frame{box-sizing:border-box!important;align-items:center!important;} html body .site-header .nav-list>li{margin:0!important;padding:0!important;min-height:0!important;height:auto!important;} html body .site-header .nav-link{padding-block:0!important;line-height:1.22!important;} html body .site-header :is(.language-button,.theme-button){ top:50%!important;bottom:auto!important;transform:translateY(-50%)!important;margin:0!important; } } /* Mobile/tablet: same thin rhythm, with utilities close to the actual edge. */ @media (max-width:900px){ html body .site-header{ width:calc(100% - 20px)!important; max-width:720px!important; margin-inline:auto!important; } html body .site-header .nav-frame{ margin-top:14px!important; min-height:40px!important; grid-template-columns:38px minmax(0,1fr) 38px!important; grid-template-areas:"lang toggle theme" "nav nav nav"!important; align-items:center!important; padding:0!important; overflow:hidden!important; } html body .site-header .language-button, html body .site-header .theme-button{ position:static!important; inset:auto!important; transform:none!important; margin:0!important; min-height:30px!important; height:30px!important; } html body .site-header .language-button{ grid-area:lang!important; justify-self:start!important; min-width:34px!important; padding-inline:0!important; } html body .site-header .theme-button, html body .site-header .nav-frame>#themeButton.theme-button{ grid-area:theme!important; justify-self:end!important; width:30px!important; min-width:30px!important; padding:0!important; } html body .site-header .mobile-menu-button{ grid-area:toggle!important; justify-self:center!important; width:32px!important; height:32px!important; } html body .site-header .mobile-menu-icon{width:17px!important;height:9px!important;} html body .site-header .mobile-menu-icon span{width:17px!important;} html body .site-header .primary-nav{ grid-area:nav!important; padding-inline:0!important; } html body .site-header .nav-list{ padding:4px 0 6px!important; gap:0!important; } html body .site-header .nav-link, :is(html[lang="fa"],html[lang="ar"]) body .site-header .nav-link{ padding:6px 3px!important; line-height:1.25!important; font-size:12px!important; } html body .site-header .theme-icon-wrap, html body .site-header .theme-icon{width:13.5px!important;height:13.5px!important;} html body .site-header .theme-icon--moon{font-size:13px!important;line-height:13.5px!important;} } @media (max-width:420px){ html body .site-header{width:calc(100% - 14px)!important;} html body .site-header .nav-frame{grid-template-columns:36px minmax(0,1fr) 36px!important;min-height:38px!important;} html body .site-header .language-button{min-width:32px!important;font-size:.67rem!important;} html body .site-header .theme-button{width:28px!important;min-width:28px!important;height:28px!important;min-height:28px!important;} } /* -------------------------------------------------------------------------- 2) STORE SEARCH — copy the Architecture search geometry exactly. No proxy, no double line, one real magnifier, same hover/focus behavior. -------------------------------------------------------------------------- */ .store-category-side .emkan-store-search-proxy, .emkan-store-filter-rail .emkan-store-search-proxy{display:none!important;} html body .store-category-side>.product-search, html body .store-category-side .product-search:has(#productSearch){ width:100%!important; margin:0 0 12px!important; position:relative!important; display:block!important; min-height:28px!important; height:auto!important; padding:0!important; border:0!important; background:transparent!important; } html body .store-category-side .product-search>span[class^="lang-"]{ position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important; overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important; } html body .store-category-side .product-search #productSearch{ width:100%!important; height:28px!important; min-height:28px!important; margin:0!important; padding:0 26px 2px 2px!important; border:0!important; border-bottom:1px solid var(--line)!important; border-radius:0!important; outline:0!important; background:transparent!important; color:var(--category,var(--fg))!important; box-shadow:none!important; font:inherit!important; font-size:clamp(10.5px,.76vw,12px)!important; font-weight:400!important; line-height:1.4!important; opacity:.72!important; -webkit-appearance:none!important; appearance:none!important; transition:border-color 420ms var(--theme-ease),color var(--theme-duration) var(--theme-ease),opacity 420ms ease!important; } :is(html[lang="fa"],html[lang="ar"]) body .store-category-side .product-search #productSearch{ direction:rtl!important;text-align:right!important;padding:0 2px 2px 26px!important;font-family:var(--font-fa)!important; } html[lang="en"] body .store-category-side .product-search #productSearch{ direction:ltr!important;text-align:left!important;font-family:var(--font-en)!important; } html body .store-category-side .product-search #productSearch::placeholder{color:var(--category-muted)!important;opacity:.62!important;} html body .store-category-side .product-search #productSearch:hover, html body .store-category-side .product-search #productSearch:focus{border-bottom-color:var(--hover-accent)!important;opacity:1!important;} /* Hide all legacy Store SVG/icon variants and draw one non-DOM-dependent magnifier. This cannot disappear because of script ordering. */ html body .store-category-side .product-search>:is(svg,i,.search-icon,.article-search-icon,.emkan-search-icon){display:none!important;} html body .store-category-side .product-search::after{ content:""!important; display:block!important; position:absolute!important; z-index:10!important; top:50%!important; right:8px!important; left:auto!important; width:13px!important; height:13px!important; transform:translateY(-50%)!important; pointer-events:none!important; opacity:.62!important; background:var(--category-muted,var(--fg))!important; -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='10.5' cy='10.5' r='5.75' fill='none' stroke='black' stroke-width='1.55'/%3E%3Cpath d='m15 15 4.25 4.25' fill='none' stroke='black' stroke-width='1.55' stroke-linecap='round'/%3E%3C/svg%3E") center/contain no-repeat!important; mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='10.5' cy='10.5' r='5.75' fill='none' stroke='black' stroke-width='1.55'/%3E%3Cpath d='m15 15 4.25 4.25' fill='none' stroke='black' stroke-width='1.55' stroke-linecap='round'/%3E%3C/svg%3E") center/contain no-repeat!important; } :is(html[lang="fa"],html[lang="ar"]) body .store-category-side .product-search::after{right:auto!important;left:8px!important;} /* Store category + sort use the exact same disclosure mark as every other module. */ html body .store-category-side :is(.store-subcategory-filter,.store-sort-filter)>summary{ min-height:24px!important; padding:3px 0!important; border:0!important; border-bottom:1px solid var(--line)!important; background:transparent!important; color:var(--category-muted,var(--fg))!important; line-height:1.35!important; } html body .store-category-side :is(.store-subcategory-filter,.store-sort-filter)>summary:hover, html body .store-category-side :is(.store-subcategory-filter,.store-sort-filter)>summary:focus-visible{ color:var(--hover-accent)!important; border-bottom-color:var(--hover-accent)!important; background:transparent!important; } html body .store-category-side :is(.store-subcategory-list,.store-sort-list){ gap:0!important;row-gap:0!important;padding:3px 0 1px!important;margin:0!important; } html body .store-category-side :is(.store-subcategory-list a,.store-sort-list button){ min-height:0!important;margin:0!important;padding:2px 0!important;line-height:1.35!important; } /* Product purchase row: keep the button label optically centered with quantity field. */ html body .product-info .buy-row>button#addToCart{ display:flex!important; align-items:center!important; justify-content:center!important; padding:0!important; line-height:1.25!important; } html body .product-info .buy-row>button#addToCart>span{display:block!important;transform:translateY(1px)!important;} /* -------------------------------------------------------------------------- 3) ARTICLE READING — remove the remaining oversized post-menu void. -------------------------------------------------------------------------- */ @media (min-width:901px){ html body .article-page{ padding-top:10px!important; margin-top:0!important; } html body .article-page>.article-page-back{margin-top:0!important;} } @media (max-width:900px){ html body .article-page{padding-top:8px!important;margin-top:0!important;} } /* -------------------------------------------------------------------------- 4) ACCOUNT THEME — exact same visual footprint as the public site control. -------------------------------------------------------------------------- */ html body .account-language-rail #themeToggle.theme-toggle{ width:30px!important; min-width:30px!important; height:30px!important; min-height:30px!important; padding:0!important; margin-inline-start:6px!important; display:inline-grid!important; place-items:center!important; line-height:1!important; } html body .account-language-rail #themeToggle.theme-toggle :is(svg,i), html body .account-language-rail #themeToggle.theme-toggle :is(.theme-sun,.theme-moon,.emkan-v132-theme-sun,.emkan-v132-theme-moon,.emkan-v133-theme-icon){ width:13.5px!important; height:13.5px!important; max-width:13.5px!important; max-height:13.5px!important; font-size:13px!important; line-height:13.5px!important; padding:0!important; margin:0!important; } /* ===== emkan-v141.css ===== */ /* EMKAN v141 — strategic geometry repair. Loaded last. Scope is deliberately narrow: preserve the established thin/linear language, do not touch page loading/transition timing. */ /* -------------------------------------------------------------------------- 1. CANONICAL COVER START + GRID RHYTHM Architecture is the reference and remains untouched. Civil, R&D, Content and Store now start at the exact same vertical rhythm as Architecture. Civil/R&D/Store are four columns on desktop, with the same 192px square cover and 36/34 spacing language. -------------------------------------------------------------------------- */ @media (min-width:921px){ /* Same post-menu start used by the approved Architecture landing. */ html body.emkan-primary-landing .module-main, html body.emkan-v141-store-landing .store-main{ padding-top:clamp(92px,12vh,138px)!important; margin-top:0!important; } /* Only the three requested landing pages become four-column. */ html body:is(.emkan-v141-civil-landing,.emkan-v141-research-landing) .category-grid, html body:is(.emkan-v141-civil-landing,.emkan-v141-research-landing) .category-grid.category-grid--five, html body.emkan-v141-store-landing .store-grid{ width:876px!important; max-width:100%!important; grid-template-columns:repeat(4,192px)!important; grid-auto-rows:auto!important; column-gap:36px!important; row-gap:34px!important; margin-top:0!important; margin-inline:auto!important; justify-content:center!important; align-items:start!important; } html body:is(.emkan-v141-civil-landing,.emkan-v141-research-landing) .category-card, html body.emkan-v141-store-landing .store-card{ width:192px!important; max-width:192px!important; } /* Content creation keeps its own card count, but its cover start/rhythm matches Architecture. */ html body.emkan-content-landing .category-grid, html body.emkan-content-landing .category-grid.category-grid--five{ margin-top:0!important; row-gap:34px!important; align-items:start!important; } } @media (min-width:701px) and (max-width:920px){ html body.emkan-primary-landing .module-main, html body.emkan-v141-store-landing .store-main{padding-top:72px!important;margin-top:0!important;} html body:is(.emkan-v141-civil-landing,.emkan-v141-research-landing) .category-grid, html body:is(.emkan-v141-civil-landing,.emkan-v141-research-landing) .category-grid.category-grid--five, html body.emkan-v141-store-landing .store-grid{ width:min(648px,100%)!important; grid-template-columns:repeat(3,minmax(0,192px))!important; gap:28px 36px!important; margin-top:0!important; justify-content:center!important; } } @media (max-width:700px){ html body.emkan-primary-landing .module-main, html body.emkan-v141-store-landing .store-main{padding-top:52px!important;margin-top:0!important;} html body:is(.emkan-v141-civil-landing,.emkan-v141-research-landing) .category-grid, html body:is(.emkan-v141-civil-landing,.emkan-v141-research-landing) .category-grid.category-grid--five, html body.emkan-v141-store-landing .store-grid{ width:min(420px,100%)!important; grid-template-columns:repeat(2,minmax(0,192px))!important; gap:22px 14px!important; margin-top:0!important; justify-content:center!important; } } @media (max-width:430px){ html body:is(.emkan-v141-civil-landing,.emkan-v141-research-landing) .category-grid, html body:is(.emkan-v141-civil-landing,.emkan-v141-research-landing) .category-grid.category-grid--five, html body.emkan-v141-store-landing .store-grid{ width:min(192px,100%)!important; grid-template-columns:1fr!important; } } /* -------------------------------------------------------------------------- 2. VIRTUAL EDUCATION — restore its dedicated v135 visual system. Later generic content/card rules must not turn this into the ordinary section theme. -------------------------------------------------------------------------- */ body.content-section-page.emkan-v141-virtual-learning #contentApp .emkan-v135-virtual-program{ margin-top:34px!important;padding-top:0!important;border-top:1px solid var(--line)!important; color:var(--fg)!important;display:block!important;position:relative!important;overflow:visible!important; width:100%!important;max-width:none!important;background:transparent!important;box-shadow:none!important; } body.content-section-page.emkan-v141-virtual-learning #contentApp .emkan-v135-virtual-head{ display:flex!important;align-items:flex-end!important;justify-content:space-between!important;gap:24px!important; padding:17px 0 15px!important;margin:0!important;border:0!important;border-bottom:1px solid var(--line)!important;background:transparent!important; } body.content-section-page.emkan-v141-virtual-learning #contentApp .emkan-v135-virtual-head h2{margin:0!important;font-size:15px!important;font-weight:600!important;line-height:1.7!important;} body.content-section-page.emkan-v141-virtual-learning #contentApp .emkan-v135-virtual-head p{margin:3px 0 0!important;color:var(--category-muted)!important;font-size:10.5px!important;line-height:1.9!important;max-width:690px!important;} body.content-section-page.emkan-v141-virtual-learning #contentApp .emkan-v135-virtual-badges{display:flex!important;align-items:center!important;gap:13px!important;flex-wrap:wrap!important;white-space:nowrap!important;} body.content-section-page.emkan-v141-virtual-learning #contentApp .emkan-v135-virtual-badge{font-size:9px!important;color:var(--category-muted)!important;padding:0 0 3px!important;border:0!important;border-bottom:1px solid var(--line)!important;background:transparent!important;border-radius:0!important;} body.content-section-page.emkan-v141-virtual-learning #contentApp .emkan-v135-access-gate{padding:18px 0!important;margin:0!important;border:0!important;border-bottom:1px solid var(--line)!important;max-width:650px!important;background:transparent!important;box-shadow:none!important;} body.content-section-page.emkan-v141-virtual-learning #contentApp .emkan-v135-access-gate p{margin:0 0 12px!important;font-size:11px!important;line-height:2!important;color:var(--category-muted)!important;} body.content-section-page.emkan-v141-virtual-learning #contentApp .emkan-v135-access-row{display:grid!important;grid-template-columns:minmax(0,1fr) auto!important;gap:14px!important;align-items:end!important;} body.content-section-page.emkan-v141-virtual-learning #contentApp .emkan-v135-access-row label{display:grid!important;gap:4px!important;font-size:10px!important;color:var(--category-muted)!important;} body.content-section-page.emkan-v141-virtual-learning #contentApp .emkan-v135-access-row input{border:0!important;border-bottom:1px solid var(--line)!important;background:transparent!important;color:var(--fg)!important;padding:8px 0!important;outline:0!important;font:inherit!important;letter-spacing:.05em!important;border-radius:0!important;box-shadow:none!important;} body.content-section-page.emkan-v141-virtual-learning #contentApp .emkan-v135-access-row input:focus{border-bottom-color:var(--hover-accent)!important;} body.content-section-page.emkan-v141-virtual-learning #contentApp :is(.emkan-v135-access-row button,.emkan-v135-lesson-complete,.emkan-v135-materials a){appearance:none!important;border:0!important;border-bottom:1px solid var(--line)!important;background:transparent!important;color:var(--fg)!important;padding:8px 0!important;text-decoration:none!important;font:inherit!important;font-size:10.5px!important;cursor:pointer!important;border-radius:0!important;box-shadow:none!important;} body.content-section-page.emkan-v141-virtual-learning #contentApp :is(.emkan-v135-access-row button,.emkan-v135-lesson-complete,.emkan-v135-materials a):hover{color:var(--hover-accent)!important;border-bottom-color:var(--hover-accent)!important;} body.content-section-page.emkan-v141-virtual-learning #contentApp .emkan-v135-access-status{min-height:18px!important;margin:8px 0 0!important;font-size:9.5px!important;color:var(--category-muted)!important;} body.content-section-page.emkan-v141-virtual-learning #contentApp .emkan-v135-lessons{display:block!important;margin:0!important;padding:0!important;} body.content-section-page.emkan-v141-virtual-learning #contentApp .emkan-v135-lesson{position:relative!important;display:grid!important;grid-template-columns:minmax(220px,.8fr) minmax(0,1.2fr)!important;gap:32px!important;padding:22px 0!important;margin:0!important;border:0!important;border-bottom:1px solid var(--line)!important;background:transparent!important;box-shadow:none!important;border-radius:0!important;} body.content-section-page.emkan-v141-virtual-learning #contentApp .emkan-v135-lesson.is-locked{opacity:.52!important;} body.content-section-page.emkan-v141-virtual-learning #contentApp .emkan-v135-lesson.is-complete .emkan-v135-lesson-number{color:var(--hover-accent)!important;} body.content-section-page.emkan-v141-virtual-learning #contentApp .emkan-v135-lesson-copy{min-width:0!important;} body.content-section-page.emkan-v141-virtual-learning #contentApp .emkan-v135-lesson-kicker{display:flex!important;align-items:center!important;justify-content:space-between!important;gap:12px!important;margin:0 0 7px!important;color:var(--category-muted)!important;font-size:9px!important;} body.content-section-page.emkan-v141-virtual-learning #contentApp .emkan-v135-lesson h3{margin:0 0 8px!important;font-size:13px!important;font-weight:600!important;line-height:1.8!important;} body.content-section-page.emkan-v141-virtual-learning #contentApp .emkan-v135-lesson p{margin:0 0 11px!important;font-size:10.5px!important;line-height:2!important;color:var(--category-muted)!important;white-space:pre-line!important;} body.content-section-page.emkan-v141-virtual-learning #contentApp .emkan-v135-video-wrap{position:relative!important;width:100%!important;aspect-ratio:16/9!important;background:rgba(127,127,127,.045)!important;overflow:hidden!important;border:0!important;border-radius:0!important;box-shadow:none!important;} body.content-section-page.emkan-v141-virtual-learning #contentApp .emkan-v135-video-wrap video{display:block!important;width:100%!important;height:100%!important;object-fit:contain!important;background:#050607!important;} body.content-section-page.emkan-v141-virtual-learning #contentApp .emkan-v135-video-lock{position:absolute!important;inset:0!important;display:grid!important;place-items:center!important;background:color-mix(in srgb,var(--bg) 86%,transparent)!important;font-size:10px!important;color:var(--category-muted)!important;text-align:center!important;padding:20px!important;} body.content-section-page.emkan-v141-virtual-learning #contentApp .emkan-v135-progress-line{height:1px!important;background:var(--line)!important;margin-top:12px!important;overflow:hidden!important;} body.content-section-page.emkan-v141-virtual-learning #contentApp .emkan-v135-progress-line>span{display:block!important;height:1px!important;width:0;background:var(--hover-accent)!important;transition:width .18s linear!important;} body.content-section-page.emkan-v141-virtual-learning #contentApp .emkan-v135-materials{padding:18px 0!important;margin:0!important;border:0!important;border-bottom:1px solid var(--line)!important;background:transparent!important;} body.content-section-page.emkan-v141-virtual-learning #contentApp .emkan-v135-materials h3{margin:0 0 8px!important;font-size:12px!important;font-weight:600!important;} body.content-section-page.emkan-v141-virtual-learning #contentApp .emkan-v135-materials-list{display:flex!important;gap:20px!important;flex-wrap:wrap!important;} :is(html[lang="fa"],html[lang="ar"]) body.content-section-page.emkan-v141-virtual-learning #contentApp .emkan-v135-virtual-program{direction:rtl!important;text-align:right!important;} html[lang="en"] body.content-section-page.emkan-v141-virtual-learning #contentApp .emkan-v135-virtual-program{direction:ltr!important;text-align:left!important;} @media(max-width:760px){ body.content-section-page.emkan-v141-virtual-learning #contentApp .emkan-v135-virtual-head{align-items:flex-start!important;flex-direction:column!important;gap:8px!important;} body.content-section-page.emkan-v141-virtual-learning #contentApp .emkan-v135-lesson{grid-template-columns:1fr!important;gap:14px!important;padding:18px 0!important;} body.content-section-page.emkan-v141-virtual-learning #contentApp .emkan-v135-access-row{grid-template-columns:1fr!important;} } body.content-section-page.emkan-v141-virtual-learning #contentApp .emkan-v135-material-disabled{ font-size:10px!important; color:var(--category-muted)!important; padding-bottom:6px!important; border-bottom:1px solid var(--line)!important; opacity:.65!important; } /* -------------------------------------------------------------------------- 3. STORE + PODCAST FILTER RHYTHM Store mirrors Podcast: search, first disclosure, second disclosure. A separator appears below the last option ONLY while the first disclosure is open. -------------------------------------------------------------------------- */ html body .store-category-side{display:block!important;min-width:0!important;} html body .store-category-side .product-search{margin:0 0 18px!important;} html body .store-category-side :is(.store-subcategory-filter,.store-sort-filter){border:0!important;border-bottom:1px solid var(--line)!important;margin:0!important;padding:0!important;background:transparent!important;} html body .store-category-side :is(.store-subcategory-filter,.store-sort-filter)>summary{ display:flex!important;align-items:center!important;justify-content:space-between!important;gap:12px!important; list-style:none!important;cursor:pointer!important;padding:11px 0!important;margin:0!important; font-size:10.5px!important;line-height:1.4!important;color:var(--category-muted,var(--fg))!important; border:0!important;background:transparent!important;box-shadow:none!important; } html body .store-category-side :is(.store-subcategory-filter,.store-sort-filter)>summary::-webkit-details-marker{display:none!important;} html body .store-category-side :is(.store-subcategory-list,.store-sort-list){display:grid!important;gap:7px!important;padding:3px 0 12px!important;margin:0!important;border:0!important;} html body .store-category-side :is(.store-subcategory-list a,.store-sort-list button){ display:block!important;width:100%!important;min-height:0!important;margin:0!important;padding:0!important; border:0!important;background:transparent!important;box-shadow:none!important;text-align:start!important;text-decoration:none!important; color:var(--fg)!important;font:inherit!important;font-size:11.5px!important;line-height:1.7!important;cursor:pointer!important; } html body .store-category-side :is(.store-subcategory-list a,.store-sort-list button):is(:hover,:focus-visible,.is-active){color:var(--hover-accent)!important;outline:0!important;} html body .store-category-side .store-sort-list button.is-active{font-weight:600!important;} html body .store-category-side .product-sort-wrap{margin:0!important;padding:0!important;border:0!important;} html body .store-category-side .product-sort-label{display:none!important;} html body .store-category-side #productSort.emkan-v141-sort-source{display:none!important;} /* Open-only separator after the LAST option of the first group. */ html body .store-category-side .store-subcategory-filter[open]>.store-subcategory-list, html body .podcast-controls .podcast-filter-row>.podcast-disclosure:first-child[open]>.podcast-filter-list{ padding-bottom:16px!important; margin-bottom:8px!important; border-bottom:1px solid var(--line)!important; } /* Prevent the container's permanent border from visually doubling the temporary open line. */ html body .store-category-side .store-subcategory-filter[open], html body .podcast-controls .podcast-filter-row>.podcast-disclosure:first-child[open]{border-bottom-color:transparent!important;} /* -------------------------------------------------------------------------- 4. STORE ADD-TO-CART — exactly one localized label, never three in parallel. -------------------------------------------------------------------------- */ html body #addToCart>.lang-fa, html body #addToCart>.lang-en, html body #addToCart>.lang-ar{display:none!important;} html[lang="fa"] body #addToCart>.lang-fa{display:inline!important;} html[lang="en"] body #addToCart>.lang-en{display:inline!important;} html[lang="ar"] body #addToCart>.lang-ar{display:inline!important;} /* -------------------------------------------------------------------------- 5. R&D INTERNAL PAGES — context/content starts with the same tight rhythm as other modules. The landing page remains governed by the Architecture-matched cover start defined above. -------------------------------------------------------------------------- */ @media (min-width:901px){ html body.emkan-v136-rd-section .detail-main, html body.emkan-v136-rd-articles .articles-main--architecture-tools, html body.emkan-v136-rd-article .article-page{ padding-top:4px!important; margin-top:0!important; } html body.emkan-v136-rd-section :is(.emkan-context-bar,.detail-context-bar), html body.emkan-v136-rd-articles :is(.emkan-context-bar,.articles-context-bar), html body.emkan-v136-rd-article :is(.emkan-context-bar,.article-context-bar){ margin-top:0!important; } } @media (max-width:900px){ html body.emkan-v136-rd-section .detail-main, html body.emkan-v136-rd-articles .articles-main--architecture-tools, html body.emkan-v136-rd-article .article-page{padding-top:6px!important;margin-top:0!important;} } /* -------------------------------------------------------------------------- 6. CIVIL SERVICES NESTING — same thin disclosure language, including second level. -------------------------------------------------------------------------- */ html body .detail-nav .detail-subcategory-filter{border:0!important;border-bottom:1px solid var(--line)!important;margin:0!important;padding:0!important;} html body .detail-nav .detail-subcategory-filter>summary{padding:10px 0!important;} html body .detail-nav .detail-subcategory-list{padding:2px 0 10px!important;gap:6px!important;} html body .detail-nav .detail-subcategory-children{margin-top:4px!important;} /* Explicitly DO NOT alter .page-shell transitions / is-preload / is-leaving. v141 preserves the established loader and 260 ms navigation timing. */ /* ===== emkan-v142.css ===== */ /* EMKAN v142 — final geometry + store filter correction. Purpose: repair only the four reported regressions without changing the established visual language. */ /* -------------------------------------------------------------------------- A. ONE CANONICAL GAP BETWEEN THE MAIN NAV AND THE LOWER CONTEXT/BREADCRUMB BAR -------------------------------------------------------------------------- */ @media (min-width:901px){ /* Internal modules with an injected/hard-coded context bar must not add their own top padding. */ html body.emkan-v136-rd-section .detail-main, html body.emkan-v136-rd-articles .articles-main--architecture-tools, html body.emkan-v136-rd-article .article-page, html body .store-category-main, html body .product-main, html body .podcast-main{ padding-top:0!important; margin-top:0!important; } /* Same distance everywhere: nav bottom -> context row, then the same lower breathing room. */ html body main>.emkan-context-bar, html body .store-category-main>.store-context-bar, html body .podcast-main>.podcast-context-bar, html body .product-main>.product-toolbar{ margin-top:22px!important; margin-bottom:24px!important; padding-top:0!important; padding-bottom:13px!important; } /* R&D must not be compressed closer to the menu than other internal pages. */ html body.emkan-v136-rd-section :is(.emkan-context-bar,.detail-context-bar), html body.emkan-v136-rd-articles :is(.emkan-context-bar,.articles-context-bar), html body.emkan-v136-rd-article :is(.emkan-context-bar,.article-context-bar){ margin-top:22px!important; margin-bottom:24px!important; padding-bottom:13px!important; } } @media (max-width:900px){ html body main>.emkan-context-bar, html body .store-category-main>.store-context-bar, html body .podcast-main>.podcast-context-bar, html body .product-main>.product-toolbar{ margin-top:16px!important; margin-bottom:20px!important; padding-bottom:11px!important; } } /* -------------------------------------------------------------------------- B. LANDING COVER RHYTHM — compact enough that <= 6 covers do not need scroll on a normal laptop viewport. Architecture's approved start rhythm is the reference. -------------------------------------------------------------------------- */ @media (min-width:921px){ html body:is(.emkan-v142-civil-landing,.emkan-v142-research-landing,.emkan-v142-content-landing) .module-main, html body.emkan-v142-store-landing .store-main{ padding-top:clamp(46px,6vh,60px)!important; padding-bottom:24px!important; margin-top:0!important; } html body:is(.emkan-v142-civil-landing,.emkan-v142-research-landing) .category-grid, html body:is(.emkan-v142-civil-landing,.emkan-v142-research-landing) .category-grid.category-grid--five, html body.emkan-v142-store-landing .store-grid{ width:876px!important; max-width:100%!important; grid-template-columns:repeat(4,192px)!important; grid-auto-rows:auto!important; column-gap:36px!important; row-gap:28px!important; margin:0 auto!important; justify-content:center!important; align-items:start!important; } html body:is(.emkan-v142-civil-landing,.emkan-v142-research-landing) .category-card, html body.emkan-v142-store-landing .store-card{ width:192px!important; max-width:192px!important; } /* Content Creation has 6 covers: keep its intended column count, but fit the page cleanly. */ html body.emkan-v142-content-landing .category-grid, html body.emkan-v142-content-landing .category-grid.category-grid--five{ margin-top:0!important; row-gap:24px!important; align-items:start!important; } } @media (min-width:701px) and (max-width:920px){ html body:is(.emkan-v142-civil-landing,.emkan-v142-research-landing,.emkan-v142-content-landing) .module-main, html body.emkan-v142-store-landing .store-main{ padding-top:40px!important; padding-bottom:24px!important; margin-top:0!important; } html body:is(.emkan-v142-civil-landing,.emkan-v142-research-landing) .category-grid, html body:is(.emkan-v142-civil-landing,.emkan-v142-research-landing) .category-grid.category-grid--five, html body.emkan-v142-store-landing .store-grid{ width:min(648px,100%)!important; grid-template-columns:repeat(3,192px)!important; gap:24px 36px!important; margin:0 auto!important; justify-content:center!important; } html body.emkan-v142-content-landing .category-grid, html body.emkan-v142-content-landing .category-grid.category-grid--five{ margin-top:0!important; row-gap:22px!important; } } @media (max-width:700px){ html body:is(.emkan-v142-civil-landing,.emkan-v142-research-landing,.emkan-v142-content-landing) .module-main, html body.emkan-v142-store-landing .store-main{ padding-top:30px!important; padding-bottom:28px!important; margin-top:0!important; } html body:is(.emkan-v142-civil-landing,.emkan-v142-research-landing) .category-grid, html body:is(.emkan-v142-civil-landing,.emkan-v142-research-landing) .category-grid.category-grid--five, html body.emkan-v142-store-landing .store-grid{ width:min(420px,100%)!important; grid-template-columns:repeat(2,minmax(0,192px))!important; gap:20px 14px!important; margin:0 auto!important; justify-content:center!important; } html body.emkan-v142-content-landing .category-grid, html body.emkan-v142-content-landing .category-grid.category-grid--five{ margin-top:0!important; row-gap:20px!important; } } @media (max-width:430px){ html body:is(.emkan-v142-civil-landing,.emkan-v142-research-landing) .category-grid, html body:is(.emkan-v142-civil-landing,.emkan-v142-research-landing) .category-grid.category-grid--five, html body.emkan-v142-store-landing .store-grid{ width:min(192px,100%)!important; grid-template-columns:1fr!important; } } /* -------------------------------------------------------------------------- C. STORE FILTERS = PODCAST DISCLOSURE LANGUAGE Permanent line stays under each heading. When the FIRST filter opens, a SECOND, new hairline appears after its last option before Sort / Season. -------------------------------------------------------------------------- */ html body .store-category-side{ display:block!important; min-width:0!important; } html body .store-category-side .product-search{ margin:0 0 18px!important; } html body .store-category-side :is(.store-subcategory-filter,.store-sort-filter){ width:100%!important; margin:0!important; padding:0!important; border:0!important; background:transparent!important; } html body .store-category-side :is(.store-subcategory-filter,.store-sort-filter)>summary{ display:flex!important; align-items:center!important; justify-content:space-between!important; gap:12px!important; min-height:0!important; margin:0!important; padding:11px 0!important; list-style:none!important; cursor:pointer!important; border:0!important; border-bottom:1px solid var(--line)!important; background:transparent!important; box-shadow:none!important; color:var(--category-muted,var(--fg))!important; font-size:10.5px!important; line-height:1.4!important; } html body .store-category-side :is(.store-subcategory-filter,.store-sort-filter)>summary::-webkit-details-marker{display:none!important;} html body .store-category-side :is(.store-subcategory-list,.store-sort-list){ display:grid!important; gap:7px!important; margin:0!important; padding:3px 0 12px!important; border:0!important; background:transparent!important; } html body .store-category-side :is(.store-subcategory-list a,.store-sort-list button){ display:block!important; width:100%!important; min-height:0!important; margin:0!important; padding:0!important; border:0!important; background:transparent!important; box-shadow:none!important; color:var(--fg)!important; text-align:start!important; text-decoration:none!important; font:inherit!important; font-size:11.5px!important; line-height:1.7!important; cursor:pointer!important; } /* Extra open-only separator: it is NOT the original title line moved downward. */ html body .store-category-side .store-subcategory-filter[open]>.store-subcategory-list, html body .podcast-controls .podcast-filter-row>.podcast-disclosure:first-child[open]>.podcast-filter-list{ margin-bottom:8px!important; padding-bottom:16px!important; border-bottom:1px solid var(--line)!important; } /* Keep the original heading hairline visible while open. */ html body .store-category-side .store-subcategory-filter[open]>summary, html body .podcast-controls .podcast-filter-row>.podcast-disclosure:first-child[open]>summary{ border-bottom:1px solid var(--line)!important; } /* Cancel v141's old trick that made the original line transparent. */ html body .store-category-side .store-subcategory-filter[open], html body .podcast-controls .podcast-filter-row>.podcast-disclosure:first-child[open]{ border-bottom-color:transparent!important; } /* Preserve the compact Podcast-like vertical rhythm between the two headings. */ html body .store-category-side .store-subcategory-filter + .product-sort-wrap, html body .store-category-side .store-subcategory-filter + .store-sort-filter, html body .podcast-controls .podcast-disclosure + .podcast-disclosure{ margin-top:0!important; } /* ===== emkan-v143.css ===== */ /* EMKAN v143 — precision stabilization pass. Scope: responsive header geometry, canonical context rhythm, compact contact, disclosure icon normalization, Civil service cards, product-grid rhythm, and virtual-learning password-eye cleanup. */ /* 1) RESPONSIVE HEADER — two thin rails, less vertical white space, utilities inset. */ @media (max-width:900px){ html body .site-header{ width:min(680px,calc(100% - 48px))!important; max-width:680px!important; margin-inline:auto!important; } html body .site-header .nav-frame{ margin-top:11px!important; min-height:36px!important; height:auto!important; grid-template-columns:50px minmax(0,1fr) 50px!important; grid-template-areas:"lang toggle theme" "nav nav nav"!important; padding-inline:10px!important; padding-block:0!important; border-top:1px solid var(--line)!important; border-bottom:1px solid var(--line)!important; overflow:hidden!important; box-sizing:border-box!important; } html body .site-header .language-button, html body .site-header .theme-button{ min-height:28px!important; height:28px!important; margin:0!important; } html body .site-header .language-button{justify-self:start!important;padding:0!important;} html body .site-header .theme-button, html body .site-header .nav-frame>#themeButton.theme-button{justify-self:end!important;width:28px!important;min-width:28px!important;padding:0!important;} html body .site-header .mobile-menu-button{width:30px!important;height:30px!important;min-height:30px!important;} html body .site-header .nav-list{ border-top:0!important; padding:3px 0 5px!important; } html body .site-header .nav-link, :is(html[lang="fa"],html[lang="ar"]) body .site-header .nav-link{ padding:5px 3px!important; line-height:1.2!important; } } @media (max-width:560px){ html body .site-header{width:calc(100% - 36px)!important;} html body .site-header .nav-frame{ margin-top:9px!important; min-height:34px!important; grid-template-columns:46px minmax(0,1fr) 46px!important; padding-inline:9px!important; } html body .site-header .language-button{font-size:.67rem!important;} html body .site-header .theme-icon-wrap, html body .site-header .theme-icon{width:13px!important;height:13px!important;} html body .site-header .theme-icon--moon{font-size:12.5px!important;line-height:13px!important;} } /* 2) ONE CANONICAL DISTANCE FROM MENU TO CONTEXT/BREADCRUMB LINE. Article reading pages are included explicitly so they cannot drift. */ @media (min-width:901px){ html body main>.emkan-context-bar, html body .article-page>.emkan-context-bar, html body .store-category-main>.store-context-bar, html body .podcast-main>.podcast-context-bar, html body .product-main>.product-toolbar{ margin-top:16px!important; margin-bottom:22px!important; padding-top:0!important; padding-bottom:12px!important; } html body.emkan-v136-rd-article .article-page, html body.emkan-v136-rd-articles .articles-main--architecture-tools, html body.emkan-v136-rd-section .detail-main{ padding-top:0!important; margin-top:0!important; } html body.emkan-v136-rd-article .article-page>.emkan-context-bar{ margin-top:16px!important; margin-bottom:22px!important; } } @media (max-width:900px){ html body main>.emkan-context-bar, html body .article-page>.emkan-context-bar, html body .store-category-main>.store-context-bar, html body .podcast-main>.podcast-context-bar, html body .product-main>.product-toolbar{ margin-top:13px!important; margin-bottom:18px!important; padding-bottom:10px!important; } } /* 3) CONTACT — remove the oversized central void; keep the same linear language. */ @media (min-width:761px){ html body .contact-main--compact{ width:min(840px,calc(100% - 48px))!important; max-width:840px!important; padding-top:42px!important; } html body .contact-composition{ grid-template-columns:minmax(0,1.03fr) minmax(300px,.97fr)!important; gap:30px!important; } html body .contact-signal{padding-inline-start:16px!important;} } /* 4) DISCLOSURES — one plus/minus mark everywhere, always visible when open or closed. */ html body :is( .emkan-v133-disclosure-mark,.emkan-v132-disclosure-mark,.emkan-v131-disclosure-mark, .emkan-disclosure-mark,.category-chevron,.article-category-chevron,.detail-subcategory-chevron, .v49-filter-chevron,.store-subcategory-mark,.store-sort-mark,.store-sort-filter-mark, .message-subject-chevron ){ position:relative!important; display:inline-block!important; visibility:visible!important; opacity:.72!important; flex:0 0 11px!important; width:11px!important; height:11px!important; border:0!important; background:transparent!important; transform:none!important; } html body :is( .emkan-v133-disclosure-mark,.emkan-v132-disclosure-mark,.emkan-v131-disclosure-mark, .emkan-disclosure-mark,.category-chevron,.article-category-chevron,.detail-subcategory-chevron, .v49-filter-chevron,.store-subcategory-mark,.store-sort-mark,.store-sort-filter-mark, .message-subject-chevron )::before, html body :is( .emkan-v133-disclosure-mark,.emkan-v132-disclosure-mark,.emkan-v131-disclosure-mark, .emkan-disclosure-mark,.category-chevron,.article-category-chevron,.detail-subcategory-chevron, .v49-filter-chevron,.store-subcategory-mark,.store-sort-mark,.store-sort-filter-mark, .message-subject-chevron )::after{ content:""!important; position:absolute!important; left:50%!important; top:50%!important; background:currentColor!important; transform:translate(-50%,-50%)!important; transform-origin:center!important; transition:opacity .18s ease!important; } html body :is( .emkan-v133-disclosure-mark,.emkan-v132-disclosure-mark,.emkan-v131-disclosure-mark, .emkan-disclosure-mark,.category-chevron,.article-category-chevron,.detail-subcategory-chevron, .v49-filter-chevron,.store-subcategory-mark,.store-sort-mark,.store-sort-filter-mark, .message-subject-chevron )::before{width:10px!important;height:1px!important;} html body :is( .emkan-v133-disclosure-mark,.emkan-v132-disclosure-mark,.emkan-v131-disclosure-mark, .emkan-disclosure-mark,.category-chevron,.article-category-chevron,.detail-subcategory-chevron, .v49-filter-chevron,.store-subcategory-mark,.store-sort-mark,.store-sort-filter-mark, .message-subject-chevron )::after{width:1px!important;height:10px!important;} html body details[open]>summary :is(.emkan-v133-disclosure-mark,.emkan-v132-disclosure-mark,.emkan-v131-disclosure-mark,.emkan-disclosure-mark,.detail-subcategory-chevron,.v49-filter-chevron,.store-subcategory-mark,.store-sort-mark,.store-sort-filter-mark)::after, html body :is(.category-toggle,.article-category-toggle,.message-subject-trigger)[aria-expanded="true"] :is(.emkan-v133-disclosure-mark,.emkan-v132-disclosure-mark,.category-chevron,.article-category-chevron,.message-subject-chevron)::after, html body .category-panel.is-open .category-toggle :is(.emkan-v133-disclosure-mark,.emkan-v132-disclosure-mark,.category-chevron)::after{ opacity:0!important; } html body details[open]>summary :is(.emkan-v133-disclosure-mark,.emkan-v132-disclosure-mark,.emkan-v131-disclosure-mark,.emkan-disclosure-mark,.detail-subcategory-chevron,.v49-filter-chevron,.store-subcategory-mark,.store-sort-mark,.store-sort-filter-mark), html body :is(.category-toggle,.article-category-toggle,.message-subject-trigger)[aria-expanded="true"] :is(.emkan-v133-disclosure-mark,.emkan-v132-disclosure-mark,.category-chevron,.article-category-chevron,.message-subject-chevron){ display:inline-block!important;visibility:visible!important;opacity:.9!important; } /* 5) CIVIL / SERVICES — four square covers before entering detailed sub-services. */ .emkan-v143-service-grid{ display:grid!important; grid-template-columns:repeat(4,minmax(0,1fr))!important; gap:30px 24px!important; margin-top:28px!important; } .emkan-v143-service-card{display:block!important;color:var(--fg)!important;text-decoration:none!important;min-width:0!important;} .emkan-v143-service-media{width:100%!important;aspect-ratio:1/1!important;overflow:hidden!important;background:var(--panel)!important;} .emkan-v143-service-media img{display:block!important;width:100%!important;height:100%!important;object-fit:cover!important;filter:grayscale(100%)!important;transition:filter .5s ease,transform .6s ease!important;} .emkan-v143-service-card:hover .emkan-v143-service-media img{filter:grayscale(0)!important;transform:scale(1.018)!important;} .emkan-v143-service-copy{padding-top:9px!important;} .emkan-v143-service-title{display:block!important;font-size:11.5px!important;font-weight:600!important;line-height:1.55!important;} .emkan-v143-service-desc{display:block!important;margin-top:4px!important;color:var(--category-muted)!important;font-size:9px!important;line-height:1.75!important;} @media(max-width:900px){.emkan-v143-service-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:26px 18px!important;}} @media(max-width:520px){.emkan-v143-service-grid{grid-template-columns:1fr!important;max-width:320px!important;margin-inline:auto!important;}} /* 6) STORE PRODUCT GRID — same compact row rhythm as Architecture. */ @media(min-width:901px){ html body .store-category-content .product-grid{ row-gap:32px!important; column-gap:36px!important; } } @media(min-width:601px) and (max-width:900px){ html body .store-category-content .product-grid{row-gap:30px!important;column-gap:22px!important;} } @media(max-width:600px){ html body .store-category-content .product-grid{row-gap:24px!important;column-gap:14px!important;} } /* 7) VIRTUAL LEARNING PASSWORD EYE — never inherit the submit-button underline. */ html body .emkan-v135-access-row .password-eye{ border:0!important; border-bottom:0!important; box-shadow:none!important; background:var(--bg)!important; padding:4px!important; width:30px!important; height:30px!important; min-height:30px!important; } /* Desktop header width: another measured step inward, utilities stay inside the rails. */ @media (min-width:1280px){ html body .site-header{width:min(calc(100% - 400px),1060px)!important;max-width:1060px!important;} html body .site-header .language-button{left:12px!important;right:auto!important;} html body .site-header .theme-button, html body .site-header .nav-frame>#themeButton.theme-button{right:12px!important;left:auto!important;} html body .site-header .primary-nav{padding-inline:72px!important;} } @media (min-width:901px) and (max-width:1279px){ html body .site-header{width:min(calc(100% - 170px),920px)!important;max-width:920px!important;} html body .site-header .language-button{left:10px!important;right:auto!important;} html body .site-header .theme-button, html body .site-header .nav-frame>#themeButton.theme-button{right:10px!important;left:auto!important;} html body .site-header .primary-nav{padding-inline:66px!important;} } /* ===== emkan-v144-final.css ===== */ /* EMKAN v144 FINAL STABILIZATION Purpose: restore one visual system without disturbing the established layout. Scope: disclosure marks, language visibility, Civil services, store product detail, responsive product gallery, and shared hairline/control consistency. */ /* -------------------------------------------------------------------------- A. LANGUAGE VISIBILITY — never show labels from two/three languages together. -------------------------------------------------------------------------- */ html[lang="fa"] :is(.lang-en,.lang-ar), html[lang="en"] :is(.lang-fa,.lang-ar), html[lang="ar"] :is(.lang-fa,.lang-en){display:none!important;} /* -------------------------------------------------------------------------- B. ONE DISCLOSURE ICON EVERYWHERE — restore the original EMKAN stepped lines. Both lines remain visible when CLOSED and OPEN; only their lengths swap. -------------------------------------------------------------------------- */ html body :is( .emkan-v133-disclosure-mark,.emkan-v132-disclosure-mark,.emkan-v131-disclosure-mark, .emkan-disclosure-mark,.category-chevron,.article-category-chevron,.detail-subcategory-chevron, .v49-filter-chevron,.store-subcategory-mark,.store-sort-mark,.store-sort-filter-mark, .message-subject-chevron ){ position:relative!important; display:inline-block!important; visibility:visible!important; opacity:.78!important; width:12px!important; height:10px!important; flex:0 0 12px!important; border:0!important; background:transparent!important; box-shadow:none!important; transform:none!important; color:currentColor!important; } html body :is( .emkan-v133-disclosure-mark,.emkan-v132-disclosure-mark,.emkan-v131-disclosure-mark, .emkan-disclosure-mark,.category-chevron,.article-category-chevron,.detail-subcategory-chevron, .v49-filter-chevron,.store-subcategory-mark,.store-sort-mark,.store-sort-filter-mark, .message-subject-chevron )::before, html body :is( .emkan-v133-disclosure-mark,.emkan-v132-disclosure-mark,.emkan-v131-disclosure-mark, .emkan-disclosure-mark,.category-chevron,.article-category-chevron,.detail-subcategory-chevron, .v49-filter-chevron,.store-subcategory-mark,.store-sort-mark,.store-sort-filter-mark, .message-subject-chevron )::after{ content:""!important; display:block!important; position:absolute!important; inset-inline-end:0!important; left:auto!important; height:1px!important; background:currentColor!important; border:0!important; opacity:1!important; transform:none!important; transition:width .2s cubic-bezier(.22,.61,.36,1)!important; } html body :is( .emkan-v133-disclosure-mark,.emkan-v132-disclosure-mark,.emkan-v131-disclosure-mark, .emkan-disclosure-mark,.category-chevron,.article-category-chevron,.detail-subcategory-chevron, .v49-filter-chevron,.store-subcategory-mark,.store-sort-mark,.store-sort-filter-mark, .message-subject-chevron )::before{top:2px!important;width:6px!important;} html body :is( .emkan-v133-disclosure-mark,.emkan-v132-disclosure-mark,.emkan-v131-disclosure-mark, .emkan-disclosure-mark,.category-chevron,.article-category-chevron,.detail-subcategory-chevron, .v49-filter-chevron,.store-subcategory-mark,.store-sort-mark,.store-sort-filter-mark, .message-subject-chevron )::after{top:auto!important;bottom:2px!important;width:11px!important;} html body details[open]>summary :is( .emkan-v133-disclosure-mark,.emkan-v132-disclosure-mark,.emkan-v131-disclosure-mark, .emkan-disclosure-mark,.detail-subcategory-chevron,.v49-filter-chevron, .store-subcategory-mark,.store-sort-mark,.store-sort-filter-mark )::before, html body :is(.category-toggle,.article-category-toggle,.message-subject-trigger)[aria-expanded="true"] :is( .emkan-v133-disclosure-mark,.emkan-v132-disclosure-mark,.emkan-v131-disclosure-mark, .category-chevron,.article-category-chevron,.message-subject-chevron )::before, html body .category-panel.is-open .category-toggle :is(.emkan-v133-disclosure-mark,.emkan-v132-disclosure-mark,.category-chevron)::before{width:11px!important;} html body details[open]>summary :is( .emkan-v133-disclosure-mark,.emkan-v132-disclosure-mark,.emkan-v131-disclosure-mark, .emkan-disclosure-mark,.detail-subcategory-chevron,.v49-filter-chevron, .store-subcategory-mark,.store-sort-mark,.store-sort-filter-mark )::after, html body :is(.category-toggle,.article-category-toggle,.message-subject-trigger)[aria-expanded="true"] :is( .emkan-v133-disclosure-mark,.emkan-v132-disclosure-mark,.emkan-v131-disclosure-mark, .category-chevron,.article-category-chevron,.message-subject-chevron )::after, html body .category-panel.is-open .category-toggle :is(.emkan-v133-disclosure-mark,.emkan-v132-disclosure-mark,.category-chevron)::after{width:6px!important;opacity:1!important;} /* Legacy disclosure summaries that use their own pseudo element. */ html body :is(.podcast-filter,.rail-filter)>summary::after{ content:""!important; display:inline-block!important; visibility:visible!important; opacity:.78!important; width:12px!important; height:10px!important; flex:0 0 12px!important; border:0!important; transform:none!important; background: linear-gradient(currentColor,currentColor) 100% 2px/6px 1px no-repeat, linear-gradient(currentColor,currentColor) 100% 8px/11px 1px no-repeat!important; } html body :is(.podcast-filter,.rail-filter)[open]>summary::after{ display:inline-block!important; visibility:visible!important; opacity:.9!important; background: linear-gradient(currentColor,currentColor) 100% 2px/11px 1px no-repeat, linear-gradient(currentColor,currentColor) 100% 8px/6px 1px no-repeat!important; } /* -------------------------------------------------------------------------- C. SHARED LINE/CONTROL FINISH — no accidental heavy controls in public UI. -------------------------------------------------------------------------- */ html body :is( .category-toggle,.article-category-toggle,.detail-subcategory-filter>summary, .v49-plain-filter>summary,.store-subcategory-filter>summary,.store-sort-filter>summary, .podcast-filter>summary,.rail-filter>summary ){box-shadow:none!important;} /* -------------------------------------------------------------------------- D. CIVIL / SERVICES — four real entry covers, then each opens its own detail tree. -------------------------------------------------------------------------- */ .emkan-v143-service-grid{ grid-template-columns:repeat(4,minmax(0,1fr))!important; gap:28px 22px!important; width:100%!important; margin-top:24px!important; } .emkan-v143-service-media{aspect-ratio:1/1!important;} @media(max-width:900px){ .emkan-v143-service-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:22px 16px!important;} } @media(max-width:520px){ .emkan-v143-service-grid{grid-template-columns:1fr!important;max-width:310px!important;margin:20px auto 0!important;gap:20px!important;} } /* -------------------------------------------------------------------------- E. STORE PRODUCT DETAIL — compact editorial gallery, centered hero, small thumbs. This intentionally overrides the accumulated historical product CSS layers. -------------------------------------------------------------------------- */ html body .product-main{ width:min(1040px,calc(100% - 48px))!important; margin:0 auto!important; padding:24px 0 64px!important; } html body .product-stage{ display:grid!important; grid-template-columns:minmax(0,1fr) minmax(320px,.9fr)!important; grid-template-areas:"media info"!important; gap:28px!important; align-items:start!important; padding-top:22px!important; border-bottom:1px solid var(--line)!important; } html body .product-gallery-panel{ grid-area:media!important; min-width:0!important; padding:0 20px 26px!important; border-inline-end:1px solid var(--line)!important; } html body .product-gallery, html[dir="ltr"] body .product-gallery{ display:grid!important; grid-template-columns:52px minmax(0,1fr)!important; grid-template-areas:"thumbs hero"!important; gap:10px!important; align-items:start!important; width:min(100%,430px)!important; max-width:430px!important; margin-inline:auto!important; } html body .product-main-image{ grid-area:hero!important; width:min(100%,350px)!important; max-width:350px!important; aspect-ratio:1/1!important; margin-inline:auto!important; align-self:start!important; overflow:hidden!important; border:1px solid var(--line)!important; background:var(--panel)!important; } html body .product-main-image img{ width:100%!important; height:100%!important; object-fit:contain!important; object-position:center!important; display:block!important; } html body .product-thumbs{ grid-area:thumbs!important; display:grid!important; grid-template-columns:1fr!important; grid-auto-rows:52px!important; gap:7px!important; margin:0!important; padding:0!important; align-content:start!important; } html body .product-thumb{ width:52px!important; height:52px!important; min-width:52px!important; aspect-ratio:1/1!important; margin:0!important; padding:0!important; border:1px solid var(--line)!important; background:transparent!important; overflow:hidden!important; } html body .product-thumb img{ width:100%!important; height:100%!important; object-fit:cover!important; object-position:center!important; display:block!important; } html body .product-info{ grid-area:info!important; min-width:0!important; position:static!important; padding:0 20px 26px!important; } html body .buy-row{ display:grid!important; grid-template-columns:74px minmax(0,1fr)!important; gap:10px!important; align-items:end!important; margin-top:20px!important; } html body #addToCart{ display:flex!important; align-items:center!important; justify-content:center!important; height:34px!important; min-height:34px!important; padding:0 14px!important; line-height:1.2!important; } /* Exactly one add-to-cart label even before JS finishes. */ html body #addToCart>.lang-fa, html body #addToCart>.lang-en, html body #addToCart>.lang-ar{display:none!important;} html[lang="fa"] body #addToCart>.lang-fa, html[lang="en"] body #addToCart>.lang-en, html[lang="ar"] body #addToCart>.lang-ar{display:inline!important;} @media(max-width:900px){ html body .product-main{width:min(100% - 36px,900px)!important;padding-top:20px!important;} html body .product-stage{ grid-template-columns:1fr!important; grid-template-areas:"media" "info"!important; gap:22px!important; padding-top:18px!important; } html body .product-gallery-panel{ padding:0 0 20px!important; border-inline-end:0!important; border-bottom:1px solid var(--line)!important; } html body .product-info{padding:0 0 24px!important;} html body .product-gallery,html[dir="ltr"] body .product-gallery{ width:min(100%,390px)!important; max-width:390px!important; } html body .product-main-image{width:min(100%,330px)!important;max-width:330px!important;} } @media(max-width:620px){ html body .product-main{width:calc(100% - 28px)!important;padding:16px 0 52px!important;} html body .product-stage{gap:18px!important;padding-top:14px!important;} html body .product-gallery,html[dir="ltr"] body .product-gallery{ grid-template-columns:1fr!important; grid-template-areas:"hero" "thumbs"!important; width:100%!important; max-width:340px!important; gap:9px!important; margin-inline:auto!important; } html body .product-main-image{ width:min(100%,300px)!important; max-width:300px!important; margin-inline:auto!important; } html body .product-thumbs{ display:flex!important; flex-wrap:nowrap!important; justify-content:center!important; align-items:center!important; gap:7px!important; overflow-x:auto!important; scrollbar-width:none!important; padding:0 2px 2px!important; } html body .product-thumbs::-webkit-scrollbar{display:none!important;} html body .product-thumb{ flex:0 0 44px!important; width:44px!important; height:44px!important; min-width:44px!important; } html body .buy-row{grid-template-columns:68px minmax(0,1fr)!important;gap:8px!important;} } /* Related product cards stay square and compact on every breakpoint. */ html body .related-media{aspect-ratio:1/1!important;} html body .related-media img{width:100%!important;height:100%!important;object-fit:cover!important;} /* -------------------------------------------------------------------------- F. FINAL RESPONSIVE SAFETY — prevent public page horizontal overflow. -------------------------------------------------------------------------- */ html,body{max-width:100%;} body{overflow-x:hidden;} img,video,svg{max-width:100%;} /* ===== emkan-v146-foundation.css ===== */ /* EMKAN v146 — SAFE FOUNDATION RESET This replaces v145's over-broad layout overrides. It centralizes only the shared geometry that is truly common: header rails, context/breadcrumb row, disclosure rhythm, responsive rails. Module-specific content layouts are deliberately left to their own stable CSS (especially Education/RTL). */ :root{ --emkan-nav-width:1040px; --emkan-context-width:1380px; --emkan-context-top:14px; --emkan-context-bottom:20px; --emkan-context-rule-pad:11px; --emkan-disclosure-row:28px; --emkan-disclosure-pad:3px; --emkan-disclosure-leading:1.5; } /* ---------- 1) HEADER: shorten the whole rail, do not crush labels ---------- */ @media (min-width:1280px){ html body .site-header{ width:min(var(--emkan-nav-width),calc(100% - 160px))!important; max-width:var(--emkan-nav-width)!important; margin-inline:auto!important; } html body .site-header .nav-frame{ width:100%!important;height:34px!important;min-height:34px!important; margin-top:13px!important;padding:0!important; border-top:1px solid var(--line)!important;border-bottom:1px solid var(--line)!important; box-sizing:border-box!important; } html body .site-header .primary-nav{ width:100%!important;height:34px!important;min-height:34px!important; margin:0!important;padding-inline:92px!important; display:flex!important;align-items:center!important;justify-content:center!important; box-sizing:border-box!important; } html body .site-header .nav-list{ width:max-content!important;max-width:100%!important;margin-inline:auto!important; gap:clamp(18px,1.35vw,26px)!important;min-height:0!important; } html body .site-header .language-button{ position:absolute!important;top:50%!important;left:24px!important;right:auto!important; transform:translateY(-50%)!important;margin:0!important; } html body .site-header .theme-button, html body .site-header .nav-frame>#themeButton.theme-button{ position:absolute!important;top:50%!important;right:24px!important;left:auto!important; transform:translateY(-50%)!important;margin:0!important; } } @media (min-width:901px) and (max-width:1279px){ html body .site-header{ width:min(1000px,calc(100% - 64px))!important;max-width:1000px!important;margin-inline:auto!important; } html body .site-header .nav-frame{ width:100%!important;height:34px!important;min-height:34px!important;margin-top:12px!important;padding:0!important; border-top:1px solid var(--line)!important;border-bottom:1px solid var(--line)!important;box-sizing:border-box!important; } html body .site-header .primary-nav{ width:100%!important;height:34px!important;min-height:34px!important;margin:0!important;padding-inline:82px!important; display:flex!important;align-items:center!important;justify-content:center!important;box-sizing:border-box!important; } html body .site-header .nav-list{ width:max-content!important;max-width:100%!important;margin-inline:auto!important;gap:clamp(13px,1.25vw,20px)!important;min-height:0!important; } html body .site-header .language-button{ position:absolute!important;top:50%!important;left:18px!important;right:auto!important;transform:translateY(-50%)!important;margin:0!important; } html body .site-header .theme-button, html body .site-header .nav-frame>#themeButton.theme-button{ position:absolute!important;top:50%!important;right:18px!important;left:auto!important;transform:translateY(-50%)!important;margin:0!important; } } @media (min-width:901px){ html body .site-header .nav-list>li{margin:0!important;padding:0!important;min-height:0!important} html body .site-header .nav-link{padding:0!important;line-height:1.24!important} } /* ---------- 2) MOBILE/TABLET HEADER: two thin rails, compact permanent row ---------- */ @media (max-width:900px){ :root{--emkan-context-top:12px;--emkan-context-bottom:16px;--emkan-context-rule-pad:10px} html body .site-header{width:min(720px,calc(100% - 34px))!important;max-width:720px!important;margin-inline:auto!important} html body .site-header .nav-frame{ width:100%!important;min-height:34px!important;height:auto!important;margin-top:9px!important;padding:0 9px!important; display:grid!important;grid-template-columns:76px minmax(0,1fr) 38px!important; grid-template-areas:"lang toggle theme" "nav nav nav"!important;align-items:center!important; border-top:1px solid var(--line)!important;border-bottom:1px solid var(--line)!important;overflow:hidden!important;box-sizing:border-box!important; } html body .site-header .language-button, html body .site-header .theme-button, html body .site-header .nav-frame>#themeButton.theme-button{ position:static!important;inset:auto!important;transform:none!important;margin:0!important;min-height:28px!important;height:28px!important; } html body .site-header .language-button{grid-area:lang!important;justify-self:start!important;padding:0!important} html body .site-header .theme-button, html body .site-header .nav-frame>#themeButton.theme-button{grid-area:theme!important;justify-self:end!important;width:28px!important;min-width:28px!important;padding:0!important} html body .site-header .mobile-menu-button{grid-area:toggle!important;justify-self:center!important;width:30px!important;height:30px!important;min-height:30px!important;margin:0!important} html body .site-header .primary-nav{grid-area:nav!important;width:100%!important;padding-inline:0!important;margin:0!important} html body .site-header .nav-list{width:100%!important;max-width:none!important;margin:0!important;padding:4px 0 6px!important;gap:0!important} html body .site-header .nav-link, :is(html[lang="fa"],html[lang="ar"]) body .site-header .nav-link{padding:5px 3px!important;line-height:1.3!important} } @media (max-width:560px){ html body .site-header{width:calc(100% - 28px)!important} html body .site-header .nav-frame{min-height:33px!important;margin-top:8px!important;padding-inline:8px!important;grid-template-columns:74px minmax(0,1fr) 36px!important} html body .site-header .theme-icon-wrap,html body .site-header .theme-icon{width:13px!important;height:13px!important} } /* ---------- 3) ONE CONTEXT / BREADCRUMB FRAME ---------- */ @media (min-width:901px){:root{--emkan-context-physical-width:min(var(--emkan-context-width),calc(100vw - 96px))}} @media (max-width:900px){:root{--emkan-context-physical-width:min(720px,calc(100vw - 34px))}} @media (max-width:560px){:root{--emkan-context-physical-width:calc(100vw - 28px)}} html body .page-shell>main:has(>:is(.emkan-context-bar,.store-context-bar,.podcast-context-bar,.product-toolbar)), html body :is(.detail-main,.articles-main--architecture-tools,.article-page,.store-category-main,.podcast-main,.product-main):has(>:is(.emkan-context-bar,.store-context-bar,.podcast-context-bar,.product-toolbar)){ padding-top:0!important;margin-top:0!important; } html body :is(main>.emkan-context-bar,.article-page>.emkan-context-bar,.store-category-main>.store-context-bar,.podcast-main>.podcast-context-bar,.product-main>.product-toolbar){ position:relative!important;left:50%!important;right:auto!important;transform:translateX(-50%)!important; width:var(--emkan-context-physical-width)!important;max-width:none!important;box-sizing:border-box!important; margin-top:var(--emkan-context-top)!important;margin-right:0!important;margin-bottom:var(--emkan-context-bottom)!important;margin-left:0!important; padding:0 0 var(--emkan-context-rule-pad)!important;min-height:32px!important; border-top:0!important;border-bottom:1px solid var(--line)!important; } /* Historic R&D/article top offsets are the only module-specific offsets neutralized centrally. */ html body.emkan-v136-rd-section .detail-main, html body.emkan-v136-rd-articles .articles-main--architecture-tools, html body.emkan-v136-rd-article .article-page{margin-top:0!important;padding-top:0!important} /* ---------- 4) ONE DISCLOSURE RHYTHM ---------- */ html body :is(.category-list ul,.article-category-list ul,.detail-subcategory-list,.v49-filter-list,.podcast-filter-list,.podcast-topics,.podcast-seasons,.store-subcategory-list,.store-sort-list,.civil-filter-list,.research-filter-list,.research-category-list,.article-filter-list,.emkan-filter-list){ gap:0!important;row-gap:0!important;margin-top:0!important;margin-bottom:0!important;padding-top:2px!important;padding-bottom:3px!important; } html body :is(.category-button,.article-category-choice,.detail-subcategory-list a,.v49-filter-option,.podcast-filter-list button,.podcast-topics button,.podcast-seasons button,.store-subcategory-list a,.store-sort-list button,.civil-filter-list button,.research-filter-list button,.research-category-list button,.article-filter-list button,.emkan-filter-list button,.emkan-filter-list a,.emkan-landing-category){ min-height:0!important;margin:0!important;padding:var(--emkan-disclosure-pad) 0!important;line-height:var(--emkan-disclosure-leading)!important; } html body :is(.category-toggle,.article-category-toggle,.detail-subcategory-filter>summary,.v49-plain-filter>summary,.podcast-filter>summary,.rail-filter>summary,.store-subcategory-filter>summary,.store-sort-filter>summary){ min-height:var(--emkan-disclosure-row)!important;margin:0!important;padding:5px 0!important;line-height:1.45!important;box-sizing:border-box!important; } /* ---------- 5) EDUCATION: DO NOT REORDER MODULE COLUMNS HERE. v90/v115 are the authoritative education layouts. Only enforce native text direction. ---------- */ :is(html[lang="fa"],html[lang="ar"]) body.content-section-page #contentApp :is(.v49-rail,.v49-results-wrap,.v49-detail,.v49-reading,.v49-section,.v69-content-search-rail,.v69-content-detail-body,.learning-side,.learning-tree,.learning-panels){direction:rtl!important;text-align:right!important} html[lang="en"] body.content-section-page #contentApp :is(.v49-rail,.v49-results-wrap,.v49-detail,.v49-reading,.v49-section,.v69-content-search-rail,.v69-content-detail-body,.learning-side,.learning-tree,.learning-panels){direction:ltr!important;text-align:left!important} :is(html[lang="fa"],html[lang="ar"]) body.content-section-page #contentApp input[type="search"]{direction:rtl!important;text-align:right!important} html[lang="en"] body.content-section-page #contentApp input[type="search"]{direction:ltr!important;text-align:left!important} /* Education physical placement stays with the proven v72/v74/v134 module rules. Do not redefine its grid here: the former foundation did that and shifted search/cards to the wrong physical side in RTL. */ /* ---------- 6) EDUCATION POSTER: always square ---------- */ html body.v115-course-detail #contentApp .v115-course-poster{aspect-ratio:1/1!important;width:min(320px,100%)!important;height:auto!important;overflow:hidden!important} html body.v115-course-detail #contentApp .v115-course-poster img{width:100%!important;height:100%!important;aspect-ratio:1/1!important;object-fit:cover!important;display:block!important} @media (min-width:901px){html body.v115-course-detail #contentApp .v115-course-poster{height:320px!important}} /* ---------- 7) VIRTUAL LESSONS: compact article-like disclosures ---------- */ html body.content-section-page #contentApp .emkan-v135-lessons{display:block!important;margin:0!important;padding:0!important} html body.content-section-page #contentApp details.emkan-v135-lesson{ display:block!important;margin:0!important;padding:0!important;border:0!important;border-bottom:1px solid var(--line)!important;background:transparent!important;box-shadow:none!important;border-radius:0!important;opacity:1!important; } html body.content-section-page #contentApp details.emkan-v135-lesson.is-locked{opacity:.52!important} html body.content-section-page #contentApp .emkan-v146-lesson-summary{ list-style:none!important;display:grid!important;grid-template-columns:minmax(0,1fr) auto!important;gap:16px!important;align-items:center!important; min-height:46px!important;padding:10px 0!important;cursor:pointer!important;color:var(--fg)!important; } html body.content-section-page #contentApp .emkan-v146-lesson-summary::-webkit-details-marker{display:none!important} html body.content-section-page #contentApp .emkan-v146-lesson-summary-main{min-width:0!important;display:flex!important;align-items:baseline!important;gap:12px!important;flex-wrap:wrap!important} html body.content-section-page #contentApp .emkan-v146-lesson-summary-title{font-size:11.5px!important;font-weight:600!important;line-height:1.65!important} html body.content-section-page #contentApp .emkan-v146-lesson-summary-meta{font-size:9.5px!important;color:var(--category-muted)!important;line-height:1.5!important;white-space:nowrap!important} html body.content-section-page #contentApp .emkan-v146-lesson-mark{position:relative!important;width:12px!important;height:12px!important;flex:0 0 12px!important} html body.content-section-page #contentApp .emkan-v146-lesson-mark::before, html body.content-section-page #contentApp .emkan-v146-lesson-mark::after{content:""!important;position:absolute!important;left:50%!important;top:50%!important;background:currentColor!important;transform:translate(-50%,-50%)!important;transition:opacity .18s ease!important} html body.content-section-page #contentApp .emkan-v146-lesson-mark::before{width:10px!important;height:1px!important} html body.content-section-page #contentApp .emkan-v146-lesson-mark::after{width:1px!important;height:10px!important} html body.content-section-page #contentApp details.emkan-v135-lesson[open] .emkan-v146-lesson-mark::after{opacity:0!important} html body.content-section-page #contentApp .emkan-v146-lesson-body{display:grid!important;grid-template-columns:minmax(220px,.8fr) minmax(0,1.2fr)!important;gap:28px!important;padding:10px 0 18px!important} html body.content-section-page #contentApp .emkan-v146-lesson-body .emkan-v135-lesson-copy{min-width:0!important} html body.content-section-page #contentApp .emkan-v146-lesson-body .emkan-v135-video-wrap{width:100%!important;aspect-ratio:16/9!important} @media(max-width:760px){ html body.content-section-page #contentApp .emkan-v146-lesson-summary{min-height:42px!important;padding:9px 0!important;gap:10px!important} html body.content-section-page #contentApp .emkan-v146-lesson-body{grid-template-columns:1fr!important;gap:13px!important;padding:8px 0 15px!important} } /* ---------- 8) responsive safety ---------- */ html,body{max-width:100%}html body .page-shell{overflow-x:clip} html body :is(.site-header,.emkan-context-bar,.store-context-bar,.podcast-context-bar,.product-toolbar){box-sizing:border-box!important} /* ===== emkan-v147-final.css ===== */ /* EMKAN v147 — focused layout repair Scope: one canonical context strip, Civil/Services grid, Education/Learning RTL + square poster, and unified stepped disclosure icons. Loaded last, after v146. */ :root{ --emkan-v147-context-max:1380px; --emkan-v147-context-desktop-gutter:48px; --emkan-v147-context-mobile-gutter:14px; } /* ========================================================================== 1) ONE CONTEXT STRIP EVERYWHERE The line, breadcrumb/address and Back button now live inside the SAME inner frame. No viewport-edge overflow and no per-module width drift. ========================================================================== */ html body :is(.emkan-context-bar,.store-context-bar,.podcast-context-bar,.product-toolbar){ position:relative!important; left:auto!important; right:auto!important; transform:none!important; width:100%!important; max-width:none!important; min-height:0!important; margin:14px 0 20px!important; padding:0!important; border:0!important; display:block!important; box-sizing:border-box!important; color:var(--category-muted,var(--fg))!important; } html body .emkan-v147-context-inner{ position:relative!important; left:50%!important; right:auto!important; transform:translateX(-50%)!important; width:min(var(--emkan-v147-context-max),calc(100vw - (var(--emkan-v147-context-desktop-gutter) * 2)))!important; max-width:var(--emkan-v147-context-max)!important; min-height:32px!important; margin:0!important; padding:0 0 11px!important; border:0!important; border-bottom:1px solid var(--line)!important; display:flex!important; align-items:center!important; justify-content:space-between!important; gap:22px!important; box-sizing:border-box!important; font-size:10.5px!important; line-height:1.7!important; } html body .emkan-v147-context-inner > :is(.emkan-context-path,.product-context-path,#podcastPath,#storeCategoryPath,#productPath){ min-width:0!important; flex:1 1 auto!important; overflow:hidden!important; text-overflow:ellipsis!important; white-space:nowrap!important; margin:0!important; padding:0!important; } html body .emkan-v147-context-inner > :is(.emkan-context-back,#productBack,.product-back,.podcast-back,.store-back){ flex:0 0 auto!important; margin:0!important; padding:0!important; white-space:nowrap!important; position:static!important; inset:auto!important; transform:none!important; } html[dir="rtl"] body .emkan-v147-context-inner{direction:rtl!important;text-align:right!important} html[dir="ltr"] body .emkan-v147-context-inner{direction:ltr!important;text-align:left!important} @media (max-width:900px){ html body :is(.emkan-context-bar,.store-context-bar,.podcast-context-bar,.product-toolbar){margin:12px 0 17px!important} html body .emkan-v147-context-inner{ width:calc(100vw - (var(--emkan-v147-context-mobile-gutter) * 2))!important; max-width:720px!important; min-height:30px!important; padding-bottom:9px!important; gap:14px!important; font-size:10px!important; } } /* ========================================================================== 2) CIVIL / SERVICES — no sidebar. Four equal covers in one centred row. Each service opens its own three-sample grid. ========================================================================== */ body.emkan-v147-civil-services .detail-main{padding-top:0!important} body.emkan-v147-civil-services .detail-layout{ width:100%!important; max-width:none!important; display:block!important; margin:0!important; padding:0!important; } body.emkan-v147-civil-services #detailNav{display:none!important} body.emkan-v147-civil-services .detail-layout > article{ width:100%!important; max-width:none!important; margin:0!important; padding:0!important; } .emkan-v147-services-view{width:100%!important;max-width:1040px!important;margin:0 auto!important;padding:8px 0 0!important} .emkan-v147-services-grid{ display:grid!important; grid-template-columns:repeat(4,192px)!important; justify-content:center!important; align-items:start!important; gap:28px!important; margin:18px auto 0!important; padding:0!important; } .emkan-v147-service-card, .emkan-v147-sample-card{ display:block!important; width:192px!important; min-width:0!important; color:var(--fg)!important; text-decoration:none!important; background:transparent!important; border:0!important; } .emkan-v147-service-media, .emkan-v147-sample-media{ display:block!important; width:100%!important; aspect-ratio:1/1!important; overflow:hidden!important; border:1px solid var(--line)!important; background:var(--bg)!important; } .emkan-v147-service-media img, .emkan-v147-sample-media img{ display:block!important; width:100%!important; height:100%!important; object-fit:cover!important; filter:grayscale(1)!important; transform:scale(1.005)!important; transition:filter .45s ease,transform .55s cubic-bezier(.22,.61,.36,1)!important; } .emkan-v147-service-card:is(:hover,:focus-visible) img, .emkan-v147-sample-card:is(:hover,:focus-visible) img{filter:grayscale(0)!important;transform:scale(1.018)!important} .emkan-v147-service-caption, .emkan-v147-sample-caption{ display:grid!important; gap:7px!important; padding-top:10px!important; font-size:10.5px!important; font-weight:520!important; line-height:1.55!important; color:var(--fg)!important; } .emkan-v147-service-rule, .emkan-v147-sample-rule{position:relative!important;display:block!important;width:100%!important;height:1px!important;background:var(--line)!important;overflow:hidden!important} .emkan-v147-service-rule::after, .emkan-v147-sample-rule::after{content:""!important;position:absolute!important;inset-block:0!important;inset-inline-start:0!important;width:22%!important;background:var(--hover-accent)!important;opacity:0!important;transform:scaleX(.25)!important;transform-origin:inset-inline-start center!important;transition:opacity .2s ease,transform .3s ease!important} .emkan-v147-service-card:is(:hover,:focus-visible) .emkan-v147-service-caption, .emkan-v147-sample-card:is(:hover,:focus-visible) .emkan-v147-sample-caption{color:var(--hover-accent)!important} .emkan-v147-service-card:is(:hover,:focus-visible) .emkan-v147-service-rule::after, .emkan-v147-sample-card:is(:hover,:focus-visible) .emkan-v147-sample-rule::after{opacity:1!important;transform:scaleX(1)!important} .emkan-v147-service-head{max-width:840px!important;margin:0 auto 20px!important;padding:0 0 13px!important;border-bottom:1px solid var(--line)!important} .emkan-v147-service-head h1{margin:0 0 7px!important;font-size:20px!important;font-weight:620!important;line-height:1.65!important} .emkan-v147-service-head p{margin:0!important;font-size:11px!important;line-height:1.95!important;color:var(--category-muted)!important} .emkan-v147-samples-grid{display:grid!important;grid-template-columns:repeat(3,192px)!important;justify-content:center!important;align-items:start!important;gap:28px!important;margin:0 auto!important;padding:0!important} .emkan-v147-sample-detail{max-width:840px!important;margin:0 auto!important;padding:4px 0!important} .emkan-v147-sample-detail h1{margin:0 0 10px!important;font-size:21px!important;font-weight:620!important;line-height:1.65!important} .emkan-v147-sample-detail p{margin:0 0 18px!important;font-size:11px!important;line-height:2!important;color:var(--category-muted)!important} .emkan-v147-sample-hero{width:min(100%,620px)!important;aspect-ratio:16/10!important;margin:22px auto 0!important;overflow:hidden!important;border:1px solid var(--line)!important} .emkan-v147-sample-hero img{width:100%!important;height:100%!important;object-fit:cover!important;display:block!important} :is(html[lang="fa"],html[lang="ar"]) body.emkan-v147-civil-services :is(.emkan-v147-service-head,.emkan-v147-sample-detail,.emkan-v147-service-caption,.emkan-v147-sample-caption){direction:rtl!important;text-align:right!important} html[lang="en"] body.emkan-v147-civil-services :is(.emkan-v147-service-head,.emkan-v147-sample-detail,.emkan-v147-service-caption,.emkan-v147-sample-caption){direction:ltr!important;text-align:left!important} @media (max-width:900px){ .emkan-v147-services-view{padding-top:4px!important} .emkan-v147-services-grid{grid-template-columns:repeat(2,minmax(0,192px))!important;gap:24px 20px!important} .emkan-v147-samples-grid{grid-template-columns:repeat(2,minmax(0,192px))!important;gap:24px 20px!important} .emkan-v147-service-card,.emkan-v147-sample-card{width:100%!important} } @media (max-width:520px){ .emkan-v147-services-grid,.emkan-v147-samples-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:20px 12px!important} .emkan-v147-service-caption,.emkan-v147-sample-caption{font-size:10px!important;padding-top:8px!important} .emkan-v147-service-head{margin-bottom:15px!important} } /* ========================================================================== 3) EDUCATION > LEARNING RESOURCE FA/AR rail (search + tree) is physically on the RIGHT. EN is on the LEFT. The square poster + topic title/intro sit at the top beside that rail. ========================================================================== */ @media (min-width:901px){ body.emkan-v147-learning-resource #contentApp > .v69-content-detail-layout, body.emkan-v147-learning-resource #contentApp > .v69-content-detail-layout.v90-education-detail-layout{ width:100%!important; max-width:1180px!important; margin-inline:auto!important; display:grid!important; align-items:start!important; gap:34px!important; direction:ltr!important; } :is(html[lang="fa"],html[lang="ar"]) body.emkan-v147-learning-resource #contentApp > .v69-content-detail-layout{ grid-template-columns:minmax(0,1fr) 190px!important; grid-template-areas:"content rail"!important; } html[lang="en"] body.emkan-v147-learning-resource #contentApp > .v69-content-detail-layout{ grid-template-columns:190px minmax(0,1fr)!important; grid-template-areas:"rail content"!important; } body.emkan-v147-learning-resource #contentApp > .v69-content-detail-layout > .v69-content-search-rail{ grid-area:rail!important; width:190px!important; max-width:190px!important; min-width:0!important; margin:0!important; padding:0!important; position:static!important; transform:none!important; } body.emkan-v147-learning-resource #contentApp > .v69-content-detail-layout > .v69-content-detail-body{ grid-area:content!important; width:100%!important; max-width:none!important; min-width:0!important; margin:0!important; padding:0!important; } :is(html[lang="fa"],html[lang="ar"]) body.emkan-v147-learning-resource #contentApp .v69-content-search-rail{direction:rtl!important;text-align:right!important} html[lang="en"] body.emkan-v147-learning-resource #contentApp .v69-content-search-rail{direction:ltr!important;text-align:left!important} } body.emkan-v147-learning-resource #contentApp .emkan-v137-learning-lead, body.emkan-v147-learning-resource #contentApp .emkan-v136-learning-lead, body.emkan-v147-learning-resource #contentApp .learning-course-cover{display:none!important} body.emkan-v147-learning-resource #contentApp .emkan-v147-learning-header{ width:100%!important; margin:0 0 24px!important; padding:0 0 18px!important; border-bottom:1px solid var(--line)!important; display:grid!important; align-items:start!important; gap:22px!important; } :is(html[lang="fa"],html[lang="ar"]) body.emkan-v147-learning-resource #contentApp .emkan-v147-learning-header{ grid-template-columns:minmax(0,1fr) 190px!important; grid-template-areas:"copy poster"!important; direction:ltr!important; } html[lang="en"] body.emkan-v147-learning-resource #contentApp .emkan-v147-learning-header{ grid-template-columns:190px minmax(0,1fr)!important; grid-template-areas:"poster copy"!important; direction:ltr!important; } body.emkan-v147-learning-resource #contentApp .emkan-v147-learning-poster{ grid-area:poster!important; width:190px!important; height:190px!important; aspect-ratio:1/1!important; overflow:hidden!important; border:1px solid var(--line)!important; background:var(--bg)!important; } body.emkan-v147-learning-resource #contentApp .emkan-v147-learning-poster img{display:block!important;width:100%!important;height:100%!important;object-fit:cover!important} body.emkan-v147-learning-resource #contentApp .emkan-v147-learning-copy{grid-area:copy!important;min-width:0!important} body.emkan-v147-learning-resource #contentApp .emkan-v147-learning-copy h1{margin:0 0 9px!important;font-size:20px!important;font-weight:620!important;line-height:1.7!important;color:var(--fg)!important} body.emkan-v147-learning-resource #contentApp .emkan-v147-learning-copy p{margin:0!important;font-size:11px!important;line-height:2!important;color:var(--category-muted)!important;white-space:pre-line!important} :is(html[lang="fa"],html[lang="ar"]) body.emkan-v147-learning-resource #contentApp .emkan-v147-learning-copy{direction:rtl!important;text-align:right!important} html[lang="en"] body.emkan-v147-learning-resource #contentApp .emkan-v147-learning-copy{direction:ltr!important;text-align:left!important} /* Learning workspace/tree also mirrors physically: right in FA/AR, left in EN. */ @media (min-width:901px){ body.emkan-v147-learning-resource #contentApp .learning-workspace, body.emkan-v147-learning-resource #contentApp .learning-workspace.v90-learning-workspace{ width:100%!important; max-width:none!important; display:grid!important; align-items:start!important; gap:26px!important; direction:ltr!important; } :is(html[lang="fa"],html[lang="ar"]) body.emkan-v147-learning-resource #contentApp .learning-workspace{ grid-template-columns:minmax(0,1fr) 180px!important; grid-template-areas:"panels tree"!important; } html[lang="en"] body.emkan-v147-learning-resource #contentApp .learning-workspace{ grid-template-columns:180px minmax(0,1fr)!important; grid-template-areas:"tree panels"!important; } body.emkan-v147-learning-resource #contentApp .learning-workspace > .learning-side{grid-area:tree!important;width:180px!important;max-width:180px!important;position:static!important;transform:none!important;margin:0!important;padding:0!important} body.emkan-v147-learning-resource #contentApp .learning-workspace > .learning-panels{grid-area:panels!important;width:100%!important;min-width:0!important;margin:0!important;padding:0!important} } /* One stepped two-line disclosure icon, same visual family as the rest of the site. */ body.emkan-v147-learning-resource #contentApp details > summary::after{content:none!important;display:none!important} body.emkan-v147-learning-resource #contentApp .emkan-v147-disclosure-mark, body.emkan-v147-learning-resource #contentApp .emkan-v146-lesson-mark{ position:relative!important; display:inline-block!important; width:12px!important; height:10px!important; flex:0 0 12px!important; visibility:visible!important; opacity:.72!important; border:0!important; background:transparent!important; color:currentColor!important; } body.emkan-v147-learning-resource #contentApp :is(.emkan-v147-disclosure-mark,.emkan-v146-lesson-mark)::before, body.emkan-v147-learning-resource #contentApp :is(.emkan-v147-disclosure-mark,.emkan-v146-lesson-mark)::after{ content:""!important; position:absolute!important; inset-inline-end:0!important; left:auto!important; top:auto!important; height:1px!important; background:currentColor!important; transform:none!important; transition:width .2s cubic-bezier(.22,.61,.36,1)!important; } body.emkan-v147-learning-resource #contentApp :is(.emkan-v147-disclosure-mark,.emkan-v146-lesson-mark)::before{top:2px!important;width:6px!important} body.emkan-v147-learning-resource #contentApp :is(.emkan-v147-disclosure-mark,.emkan-v146-lesson-mark)::after{bottom:2px!important;width:11px!important;opacity:1!important} body.emkan-v147-learning-resource #contentApp details[open] > summary :is(.emkan-v147-disclosure-mark,.emkan-v146-lesson-mark)::before{width:11px!important} body.emkan-v147-learning-resource #contentApp details[open] > summary :is(.emkan-v147-disclosure-mark,.emkan-v146-lesson-mark)::after{width:6px!important} @media (max-width:900px){ body.emkan-v147-learning-resource #contentApp > .v69-content-detail-layout{display:block!important;width:100%!important;max-width:none!important} body.emkan-v147-learning-resource #contentApp > .v69-content-detail-layout > .v69-content-search-rail{width:100%!important;max-width:none!important;margin:0 0 18px!important} body.emkan-v147-learning-resource #contentApp .emkan-v147-learning-header{grid-template-columns:120px minmax(0,1fr)!important;grid-template-areas:"poster copy"!important;gap:16px!important;margin-bottom:18px!important;padding-bottom:15px!important} :is(html[lang="fa"],html[lang="ar"]) body.emkan-v147-learning-resource #contentApp .emkan-v147-learning-header{grid-template-columns:minmax(0,1fr) 120px!important;grid-template-areas:"copy poster"!important} body.emkan-v147-learning-resource #contentApp .emkan-v147-learning-poster{width:120px!important;height:120px!important} body.emkan-v147-learning-resource #contentApp .emkan-v147-learning-copy h1{font-size:17px!important} body.emkan-v147-learning-resource #contentApp .learning-workspace{display:block!important} } @media (max-width:560px){ body.emkan-v147-learning-resource #contentApp .emkan-v147-learning-header, :is(html[lang="fa"],html[lang="ar"]) body.emkan-v147-learning-resource #contentApp .emkan-v147-learning-header{ grid-template-columns:92px minmax(0,1fr)!important; grid-template-areas:"poster copy"!important; gap:13px!important; } :is(html[lang="fa"],html[lang="ar"]) body.emkan-v147-learning-resource #contentApp .emkan-v147-learning-header{grid-template-columns:minmax(0,1fr) 92px!important;grid-template-areas:"copy poster"!important} body.emkan-v147-learning-resource #contentApp .emkan-v147-learning-poster{width:92px!important;height:92px!important} body.emkan-v147-learning-resource #contentApp .emkan-v147-learning-copy h1{font-size:15px!important;margin-bottom:6px!important} body.emkan-v147-learning-resource #contentApp .emkan-v147-learning-copy p{font-size:10px!important;line-height:1.85!important} } /* ===== emkan-v148-repair.css ===== */ /* EMKAN v148 — focused correction only 1) restore the canonical v146 context/breadcrumb geometry (one line only), 2) force Education/Learning rail/tree to the physical right in RTL, 3) use the site's canonical stepped two-line disclosure mark, 4) keep Civil/Services as a clean four-card page with no search/secondary row. */ /* ========================================================================== A. CONTEXT / BACK / BREADCRUMB — exactly one canonical row and one rule. v147 accidentally expanded the outer row to 100% and added a second rule to its inner wrapper. Restore the v146 central frame and let ONLY the outer row draw the bottom hairline. ========================================================================== */ @media (min-width:901px){ :root{--emkan-v148-context-physical-width:min(var(--emkan-context-width,1380px),calc(100vw - 96px))} } @media (max-width:900px){ :root{--emkan-v148-context-physical-width:min(720px,calc(100vw - 34px))} } @media (max-width:560px){ :root{--emkan-v148-context-physical-width:calc(100vw - 28px)} } html body :is( main>.emkan-context-bar, .article-page>.emkan-context-bar, .store-category-main>.store-context-bar, .podcast-main>.podcast-context-bar, .product-main>.product-toolbar ){ position:relative!important; left:50%!important; right:auto!important; transform:translateX(-50%)!important; width:var(--emkan-v148-context-physical-width)!important; max-width:none!important; min-height:32px!important; box-sizing:border-box!important; margin-top:var(--emkan-context-top,14px)!important; margin-right:0!important; margin-bottom:var(--emkan-context-bottom,20px)!important; margin-left:0!important; padding:0 0 var(--emkan-context-rule-pad,11px)!important; border:0!important; border-bottom:1px solid var(--line)!important; background:transparent!important; } /* Kill any decorative or inherited second line on the row itself. */ html body :is(.emkan-context-bar,.store-context-bar,.podcast-context-bar,.product-toolbar)::before, html body :is(.emkan-context-bar,.store-context-bar,.podcast-context-bar,.product-toolbar)::after{ content:none!important; display:none!important; border:0!important; } /* v147 wrapper is layout-only now. It MUST NOT create another line or a viewport-sized translated frame. */ html body .emkan-v147-context-inner{ position:static!important; left:auto!important; right:auto!important; transform:none!important; width:100%!important; max-width:none!important; min-height:20px!important; margin:0!important; padding:0!important; border:0!important; border-top:0!important; border-bottom:0!important; display:flex!important; align-items:center!important; justify-content:space-between!important; gap:22px!important; box-sizing:border-box!important; font-size:10.5px!important; line-height:1.7!important; background:transparent!important; } html body .emkan-v147-context-inner::before, html body .emkan-v147-context-inner::after{content:none!important;display:none!important} html body .emkan-v147-context-inner > *{ border-top:0!important; border-bottom:0!important; margin-block:0!important; } html body .emkan-v147-context-inner > :is(.emkan-context-path,.product-context-path,#podcastPath,#storeCategoryPath,#productPath){ flex:1 1 auto!important; min-width:0!important; padding:0!important; overflow:hidden!important; white-space:nowrap!important; text-overflow:ellipsis!important; } html body .emkan-v147-context-inner > :is(.emkan-context-back,#productBack,.product-back,.podcast-back,.store-back){ flex:0 0 auto!important; position:static!important; inset:auto!important; transform:none!important; padding:0!important; white-space:nowrap!important; } html[dir="rtl"] body .emkan-v147-context-inner{direction:rtl!important;text-align:right!important} html[dir="ltr"] body .emkan-v147-context-inner{direction:ltr!important;text-align:left!important} /* Older article rules also drew their own line. The canonical row above owns the line now. */ html body .article-page>.emkan-context-bar{border-bottom:1px solid var(--line)!important} html body .article-page>.article-page-back, html body .emkan-context-bar + .article-page-back{display:none!important} @media (max-width:900px){ html body .emkan-v147-context-inner{gap:14px!important;font-size:10px!important} } /* ========================================================================== B. EDUCATION > LEARNING — physical placement, not logical guessing. DOM order is rail then content. In RTL use row-reverse so the rail is physically on the RIGHT; in LTR use row so it is on the LEFT. ========================================================================== */ @media (min-width:901px){ html body.emkan-v147-learning-resource #contentApp > .v69-content-detail-layout, html body.emkan-v147-learning-resource #contentApp > .v69-content-detail-layout.v90-education-detail-layout{ width:100%!important; max-width:1180px!important; margin-inline:auto!important; display:flex!important; align-items:flex-start!important; gap:34px!important; direction:ltr!important; grid-template-columns:none!important; grid-template-areas:none!important; } html[dir="rtl"] body.emkan-v147-learning-resource #contentApp > .v69-content-detail-layout{ flex-direction:row-reverse!important; } html[dir="ltr"] body.emkan-v147-learning-resource #contentApp > .v69-content-detail-layout{ flex-direction:row!important; } html body.emkan-v147-learning-resource #contentApp > .v69-content-detail-layout > .v69-content-search-rail{ order:initial!important; flex:0 0 190px!important; width:190px!important; max-width:190px!important; min-width:190px!important; margin:0!important; padding:0!important; position:static!important; inset:auto!important; transform:none!important; grid-area:auto!important; } html body.emkan-v147-learning-resource #contentApp > .v69-content-detail-layout > .v69-content-detail-body{ order:initial!important; flex:1 1 auto!important; width:auto!important; max-width:none!important; min-width:0!important; margin:0!important; padding:0!important; grid-area:auto!important; } html[dir="rtl"] body.emkan-v147-learning-resource #contentApp .v69-content-search-rail, html[dir="rtl"] body.emkan-v147-learning-resource #contentApp .v69-content-detail-body{ direction:rtl!important; text-align:right!important; } html[dir="ltr"] body.emkan-v147-learning-resource #contentApp .v69-content-search-rail, html[dir="ltr"] body.emkan-v147-learning-resource #contentApp .v69-content-detail-body{ direction:ltr!important; text-align:left!important; } /* Internal learning tree follows the same physical rule: side/tree on right for FA/AR, on left for EN. */ html body.emkan-v147-learning-resource #contentApp .learning-workspace, html body.emkan-v147-learning-resource #contentApp .learning-workspace.v90-learning-workspace{ width:100%!important; max-width:none!important; display:flex!important; align-items:flex-start!important; gap:26px!important; direction:ltr!important; grid-template-columns:none!important; grid-template-areas:none!important; } html[dir="rtl"] body.emkan-v147-learning-resource #contentApp .learning-workspace{flex-direction:row-reverse!important} html[dir="ltr"] body.emkan-v147-learning-resource #contentApp .learning-workspace{flex-direction:row!important} html body.emkan-v147-learning-resource #contentApp .learning-workspace > .learning-side{ order:initial!important; flex:0 0 180px!important; width:180px!important; max-width:180px!important; min-width:180px!important; position:static!important; inset:auto!important; transform:none!important; margin:0!important; padding:0!important; grid-area:auto!important; } html body.emkan-v147-learning-resource #contentApp .learning-workspace > .learning-panels{ order:initial!important; flex:1 1 auto!important; width:auto!important; min-width:0!important; margin:0!important; padding:0!important; grid-area:auto!important; } html[dir="rtl"] body.emkan-v147-learning-resource #contentApp .learning-workspace > :is(.learning-side,.learning-panels){direction:rtl!important;text-align:right!important} html[dir="ltr"] body.emkan-v147-learning-resource #contentApp .learning-workspace > :is(.learning-side,.learning-panels){direction:ltr!important;text-align:left!important} } /* Mobile/tablet stack stays clean; rail first, then content. */ @media (max-width:900px){ html body.emkan-v147-learning-resource #contentApp > .v69-content-detail-layout{ display:flex!important; flex-direction:column!important; width:100%!important; max-width:none!important; gap:18px!important; } html body.emkan-v147-learning-resource #contentApp > .v69-content-detail-layout > .v69-content-search-rail, html body.emkan-v147-learning-resource #contentApp > .v69-content-detail-layout > .v69-content-detail-body{ width:100%!important; max-width:none!important; min-width:0!important; flex:0 0 auto!important; } } /* Canonical dropdown mark: the site's stepped two-line icon. Remove every native/legacy plus, minus, square and marker inside this learning page. */ html body.emkan-v147-learning-resource #contentApp details > summary{ list-style:none!important; } html body.emkan-v147-learning-resource #contentApp details > summary::-webkit-details-marker{display:none!important} html body.emkan-v147-learning-resource #contentApp details > summary::before, html body.emkan-v147-learning-resource #contentApp details > summary::after{ content:none!important; display:none!important; } html body.emkan-v147-learning-resource #contentApp details > summary > :is( .emkan-v146-lesson-mark, .emkan-v147-disclosure-mark, .emkan-disclosure-mark, .category-chevron, .detail-subcategory-chevron, .v49-filter-chevron ){display:none!important} html body.emkan-v147-learning-resource #contentApp .emkan-v148-disclosure-mark{ position:relative!important; display:inline-block!important; visibility:visible!important; opacity:.82!important; width:13px!important; height:13px!important; flex:0 0 13px!important; border:0!important; background:transparent!important; color:currentColor!important; } html body.emkan-v147-learning-resource #contentApp .emkan-v148-disclosure-mark::before, html body.emkan-v147-learning-resource #contentApp .emkan-v148-disclosure-mark::after{ content:""!important; display:block!important; position:absolute!important; inset-inline-start:1px!important; left:auto!important; height:1px!important; background:currentColor!important; border:0!important; transform:none!important; transition:width .22s ease!important; } html body.emkan-v147-learning-resource #contentApp .emkan-v148-disclosure-mark::before{top:2px!important;width:6px!important} html body.emkan-v147-learning-resource #contentApp .emkan-v148-disclosure-mark::after{bottom:2px!important;width:11px!important} html body.emkan-v147-learning-resource #contentApp details[open] > summary .emkan-v148-disclosure-mark::before{width:11px!important} html body.emkan-v147-learning-resource #contentApp details[open] > summary .emkan-v148-disclosure-mark::after{width:6px!important} /* ========================================================================== C. CIVIL > SERVICES — this page has no search/sidebar/secondary row. Keep only the four service covers on the root Services view. Old observers may inject legacy rows later, so hide them by scope as well. ========================================================================== */ html body.emkan-v147-civil-services :is( #detailNav, .detail-nav, .civil-search, .project-search, .research-search, .secondary-rail, .civil-filter-rail, .project-filter-rail, .category-rail, .emkan-civil-results, .detail-note, .detail-copy, .detail-title:not(#detailTitle) ){display:none!important} html body.emkan-v147-civil-services .detail-layout{ display:block!important; width:100%!important; max-width:none!important; margin:0!important; padding:0!important; } html body.emkan-v147-civil-services .detail-layout > article{ display:block!important; width:100%!important; max-width:none!important; margin:0!important; padding:0!important; } /* On Services root, anything legacy injected beside our one canonical view is hidden. */ html body.emkan-v148-civil-services-root .detail-layout > article > :not(.emkan-v147-services-view){display:none!important} html body.emkan-v148-civil-services-root .emkan-v147-services-view{ display:block!important; width:100%!important; max-width:1040px!important; margin:0 auto!important; padding-top:8px!important; } html body.emkan-v148-civil-services-root .emkan-v147-services-grid{ grid-template-columns:repeat(4,192px)!important; justify-content:center!important; align-items:start!important; gap:28px!important; margin:18px auto 0!important; } @media (max-width:900px){ html body.emkan-v148-civil-services-root .emkan-v147-services-grid{grid-template-columns:repeat(2,minmax(0,192px))!important;gap:24px 20px!important} } @media (max-width:520px){ html body.emkan-v148-civil-services-root .emkan-v147-services-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:20px 12px!important} } /* Final context inset: keep Back and breadcrumb visibly INSIDE the canonical rule instead of sitting on/over its endpoints. The rule width itself stays the shared context width. */ html body .emkan-v147-context-inner{padding-inline:10px!important} @media (max-width:900px){html body .emkan-v147-context-inner{padding-inline:7px!important}} /* ===== emkan-v149-complete.css ===== */ /* EMKAN v149 — geometry + Civil Services + Education/Learning final repair Loaded after v148. Keep this layer narrow: it fixes only the regressions confirmed in the v148 package and leaves the approved visual system intact. */ /* ========================================================================== 1) CONTEXT / BACK / BREADCRUMB The context strip must live INSIDE the page main measure. Earlier versions translated a 1380px strip by 50% relative to an already centred main, which produced the asymmetric overflow visible in internal pages. No transforms. ========================================================================== */ html body :is( main>.emkan-context-bar, .article-page>.emkan-context-bar, .store-category-main>.store-context-bar, .podcast-main>.podcast-context-bar, .product-main>.product-toolbar ){ position:relative!important; left:auto!important; right:auto!important; inset-inline:auto!important; transform:none!important; width:100%!important; max-width:100%!important; min-width:0!important; margin-top:var(--emkan-context-top,14px)!important; margin-right:auto!important; margin-bottom:var(--emkan-context-bottom,20px)!important; margin-left:auto!important; padding:0 0 var(--emkan-context-rule-pad,11px)!important; box-sizing:border-box!important; border:0!important; border-bottom:1px solid var(--line)!important; overflow:visible!important; } html body .emkan-v147-context-inner{ position:static!important; inset:auto!important; left:auto!important; right:auto!important; transform:none!important; width:100%!important; max-width:100%!important; min-width:0!important; margin:0!important; padding:0!important; border:0!important; box-sizing:border-box!important; display:flex!important; align-items:center!important; justify-content:space-between!important; gap:22px!important; background:transparent!important; } html body .emkan-v147-context-inner::before, html body .emkan-v147-context-inner::after{content:none!important;display:none!important} html body .emkan-v147-context-inner > :is(.emkan-context-path,.product-context-path,#podcastPath,#storeCategoryPath,#productPath){ flex:1 1 auto!important; min-width:0!important; max-width:100%!important; overflow:hidden!important; white-space:nowrap!important; text-overflow:ellipsis!important; } html body .emkan-v147-context-inner > :is(.emkan-context-back,#productBack,.product-back,.podcast-back,.store-back){ flex:0 0 auto!important; position:static!important; inset:auto!important; transform:none!important; white-space:nowrap!important; } @media(max-width:900px){ html body .emkan-v147-context-inner{gap:14px!important} } /* ========================================================================== 2) CIVIL > SERVICES - legacy v143 grid is the extra second row: never render it here. - internal service pages use the canonical side-search rail. - remove the redundant service heading/intro above the sample covers. ========================================================================== */ body.emkan-v147-civil-services .emkan-v143-service-grid{display:none!important} body.emkan-v149-civil-service-page .emkan-v147-service-head{display:none!important} body.emkan-v149-civil-service-page .emkan-v147-services-view, body.emkan-v149-civil-sample-page .emkan-v147-services-view{ max-width:1040px!important; margin-inline:auto!important; padding-top:8px!important; } @media(min-width:901px){ body.emkan-v149-civil-service-page .emkan-v149-civil-internal-layout, body.emkan-v149-civil-sample-page .emkan-v149-civil-internal-layout{ width:100%!important; max-width:1040px!important; margin-inline:auto!important; display:grid!important; align-items:start!important; gap:34px!important; direction:ltr!important; } :is(html[lang="fa"],html[lang="ar"]) body.emkan-v149-civil-service-page .emkan-v149-civil-internal-layout, :is(html[lang="fa"],html[lang="ar"]) body.emkan-v149-civil-sample-page .emkan-v149-civil-internal-layout{ grid-template-columns:minmax(0,1fr) 190px!important; grid-template-areas:"content rail"!important; } html[lang="en"] body.emkan-v149-civil-service-page .emkan-v149-civil-internal-layout, html[lang="en"] body.emkan-v149-civil-sample-page .emkan-v149-civil-internal-layout{ grid-template-columns:190px minmax(0,1fr)!important; grid-template-areas:"rail content"!important; } body:is(.emkan-v149-civil-service-page,.emkan-v149-civil-sample-page) .emkan-v149-civil-search-rail{ grid-area:rail!important; width:190px!important; min-width:0!important; margin:0!important; padding:0!important; position:static!important; } body:is(.emkan-v149-civil-service-page,.emkan-v149-civil-sample-page) .emkan-v149-civil-internal-content{ grid-area:content!important; width:100%!important; min-width:0!important; margin:0!important; padding:0!important; } body.emkan-v149-civil-service-page .emkan-v147-samples-grid{ grid-template-columns:repeat(3,minmax(0,192px))!important; justify-content:start!important; margin:0!important; } :is(html[lang="fa"],html[lang="ar"]) body.emkan-v149-civil-service-page .emkan-v147-samples-grid{ justify-content:end!important; } } .emkan-v149-civil-search{ position:relative!important; display:block!important; width:100%!important; min-height:28px!important; margin:0 0 14px!important; padding:0!important; border:0!important; background:transparent!important; } .emkan-v149-civil-search input[type="search"]{ display:block!important; width:100%!important; height:28px!important; min-height:28px!important; margin:0!important; padding-block:0 5px!important; border:0!important; border-bottom:1px solid var(--line)!important; border-radius:0!important; outline:0!important; box-shadow:none!important; background:transparent!important; color:var(--fg)!important; font:inherit!important; font-size:10px!important; line-height:1.5!important; -webkit-appearance:none!important; appearance:none!important; } .emkan-v149-civil-search input[type="search"]:is(:hover,:focus){border-bottom-color:var(--hover-accent)!important} .emkan-v149-civil-search .search-icon{ position:absolute!important; z-index:2!important; top:50%!important; width:12px!important; height:12px!important; color:var(--category-muted,var(--fg))!important; opacity:.65!important; transform:translateY(-62%)!important; pointer-events:none!important; fill:none!important; stroke:currentColor!important; stroke-width:1.35!important; stroke-linecap:round!important; } :is(html[lang="fa"],html[lang="ar"]) .emkan-v149-civil-search input[type="search"]{ direction:rtl!important;text-align:right!important;padding-inline:0 25px!important } :is(html[lang="fa"],html[lang="ar"]) .emkan-v149-civil-search .search-icon{left:5px!important;right:auto!important} html[lang="en"] .emkan-v149-civil-search input[type="search"]{ direction:ltr!important;text-align:left!important;padding-inline:0 25px!important } html[lang="en"] .emkan-v149-civil-search .search-icon{right:5px!important;left:auto!important} .emkan-v149-civil-search-status{ margin:6px 0 0!important; font-size:9px!important; line-height:1.55!important; color:var(--category-muted,var(--fg))!important; } @media(max-width:900px){ body:is(.emkan-v149-civil-service-page,.emkan-v149-civil-sample-page) .emkan-v149-civil-internal-layout{ width:100%!important; max-width:none!important; margin:0!important; display:flex!important; flex-direction:column!important; gap:18px!important; } body:is(.emkan-v149-civil-service-page,.emkan-v149-civil-sample-page) .emkan-v149-civil-search-rail, body:is(.emkan-v149-civil-service-page,.emkan-v149-civil-sample-page) .emkan-v149-civil-internal-content{ width:100%!important; max-width:none!important; min-width:0!important; } body.emkan-v149-civil-service-page .emkan-v147-samples-grid{margin-inline:auto!important} } /* ========================================================================== 3) CONTENT CREATION > EDUCATION > LEARNING RESOURCE Stable explicit grid. Language, not fragile inherited flex direction, decides the physical side of Search + learning tree. ========================================================================== */ @media(min-width:901px){ html body.emkan-v149-learning-resource #contentApp > .v69-content-detail-layout, html body.emkan-v149-learning-resource #contentApp > .v69-content-detail-layout.v90-education-detail-layout{ width:100%!important; max-width:1180px!important; margin-inline:auto!important; display:grid!important; align-items:start!important; gap:34px!important; direction:ltr!important; flex-direction:initial!important; } :is(html[lang="fa"],html[lang="ar"]) body.emkan-v149-learning-resource #contentApp > .v69-content-detail-layout{ grid-template-columns:minmax(0,1fr) 190px!important; grid-template-areas:"content rail"!important; } html[lang="en"] body.emkan-v149-learning-resource #contentApp > .v69-content-detail-layout{ grid-template-columns:190px minmax(0,1fr)!important; grid-template-areas:"rail content"!important; } html body.emkan-v149-learning-resource #contentApp > .v69-content-detail-layout > .v69-content-search-rail{ grid-area:rail!important; order:initial!important; width:190px!important; min-width:190px!important; max-width:190px!important; flex:none!important; margin:0!important; padding:0!important; position:static!important; inset:auto!important; transform:none!important; } html body.emkan-v149-learning-resource #contentApp > .v69-content-detail-layout > .v69-content-detail-body{ grid-area:content!important; order:initial!important; width:100%!important; min-width:0!important; max-width:none!important; flex:none!important; margin:0!important; padding:0!important; } :is(html[lang="fa"],html[lang="ar"]) body.emkan-v149-learning-resource #contentApp :is(.v69-content-search-rail,.v69-content-detail-body){ direction:rtl!important;text-align:right!important } html[lang="en"] body.emkan-v149-learning-resource #contentApp :is(.v69-content-search-rail,.v69-content-detail-body){ direction:ltr!important;text-align:left!important } /* v90 moves .learning-side to the top-level rail. If an older layer leaves it in the workspace, v149 JS relocates it. Either way it never consumes a second internal column beside the learning body. */ html body.emkan-v149-learning-resource #contentApp .learning-workspace, html body.emkan-v149-learning-resource #contentApp .learning-workspace.v90-learning-workspace{ display:block!important; width:100%!important; max-width:none!important; margin:0!important; padding:0!important; } html body.emkan-v149-learning-resource #contentApp .learning-panels{ display:block!important; width:100%!important; min-width:0!important; max-width:none!important; margin:0!important; padding:0!important; } html body.emkan-v149-learning-resource #contentApp .v69-content-search-rail > .learning-side, html body.emkan-v149-learning-resource #contentApp .v69-content-search-rail > .v90-rail-learning-side{ display:block!important; width:100%!important; min-width:0!important; max-width:100%!important; margin:12px 0 0!important; padding:0!important; position:static!important; inset:auto!important; transform:none!important; } html body.emkan-v149-learning-resource #contentApp .emkan-v147-learning-header{ display:grid!important; width:100%!important; max-width:none!important; align-items:start!important; gap:22px!important; margin:0 0 24px!important; padding:0 0 18px!important; direction:ltr!important; } :is(html[lang="fa"],html[lang="ar"]) body.emkan-v149-learning-resource #contentApp .emkan-v147-learning-header{ grid-template-columns:minmax(0,1fr) 190px!important; grid-template-areas:"copy poster"!important; } html[lang="en"] body.emkan-v149-learning-resource #contentApp .emkan-v147-learning-header{ grid-template-columns:190px minmax(0,1fr)!important; grid-template-areas:"poster copy"!important; } html body.emkan-v149-learning-resource #contentApp .emkan-v147-learning-poster{ grid-area:poster!important; width:190px!important; height:190px!important; min-width:0!important; max-width:190px!important; margin:0!important; } html body.emkan-v149-learning-resource #contentApp .emkan-v147-learning-copy{ grid-area:copy!important; width:100%!important; min-width:0!important; margin:0!important; } :is(html[lang="fa"],html[lang="ar"]) body.emkan-v149-learning-resource #contentApp .emkan-v147-learning-copy{ direction:rtl!important;text-align:right!important } html[lang="en"] body.emkan-v149-learning-resource #contentApp .emkan-v147-learning-copy{ direction:ltr!important;text-align:left!important } } @media(max-width:900px){ html body.emkan-v149-learning-resource #contentApp > .v69-content-detail-layout{ width:100%!important; max-width:none!important; display:grid!important; grid-template-columns:minmax(0,1fr)!important; grid-template-areas:"rail" "content"!important; gap:18px!important; direction:ltr!important; } html body.emkan-v149-learning-resource #contentApp > .v69-content-detail-layout > .v69-content-search-rail{ grid-area:rail!important; width:100%!important; max-width:none!important; min-width:0!important; margin:0!important; padding:0!important; } html body.emkan-v149-learning-resource #contentApp > .v69-content-detail-layout > .v69-content-detail-body{ grid-area:content!important; width:100%!important; max-width:none!important; min-width:0!important; } html body.emkan-v149-learning-resource #contentApp .v69-content-search-rail > .learning-side{ width:100%!important;max-width:none!important;margin-top:10px!important } } @media(max-width:560px){ html body.emkan-v149-learning-resource #contentApp .emkan-v147-learning-header, :is(html[lang="fa"],html[lang="ar"]) body.emkan-v149-learning-resource #contentApp .emkan-v147-learning-header, html[lang="en"] body.emkan-v149-learning-resource #contentApp .emkan-v147-learning-header{ grid-template-columns:minmax(0,1fr) 92px!important; grid-template-areas:"copy poster"!important; gap:13px!important; } html[lang="en"] body.emkan-v149-learning-resource #contentApp .emkan-v147-learning-header{ grid-template-columns:92px minmax(0,1fr)!important; grid-template-areas:"poster copy"!important; } html body.emkan-v149-learning-resource #contentApp .emkan-v147-learning-poster{ width:92px!important;height:92px!important;max-width:92px!important } } /* Responsive safety: no patch element may generate horizontal page overflow. */ html body :is(.emkan-v149-civil-internal-layout,.v69-content-detail-layout,.emkan-v147-learning-header){box-sizing:border-box!important;max-inline-size:100%} /* ========================================================================== 4) ADMIN-DRIVEN PAGE OVERRIDES / EDITORIAL METADATA Defaults are inert; styles are applied only when an editor explicitly sets values in the v149 page/item controls. ========================================================================== */ body.emkan-v149-page-custom main{font-size:var(--emkan-v149-page-font-size,inherit)!important;color:var(--emkan-v149-page-text-color,inherit)!important} body.emkan-v149-page-custom main :is(h1,.detail-title,.v49-headcopy h1,.emkan-v147-learning-copy h1,.emkan-v147-sample-detail h1){font-size:var(--emkan-v149-page-title-size,inherit)!important} body.emkan-v149-page-custom main{font-family:var(--emkan-v149-page-font-family,inherit)!important} .emkan-v149-editorial-meta{width:100%;margin:28px 0 0;padding:0;border-top:1px solid var(--line);font-size:10px;line-height:1.9;color:var(--category-muted,var(--fg))} .emkan-v149-editorial-row{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap;padding:10px 0;border-bottom:1px solid var(--line)} .emkan-v149-editorial-row strong{font-size:9.5px;font-weight:600;color:var(--fg)} .emkan-v149-editorial-row span{white-space:pre-line} body.emkan-v149-disabled-page main>*:not(.emkan-context-bar):not(.store-context-bar):not(.podcast-context-bar):not(.product-toolbar){display:none!important} .emkan-v149-disabled-message{display:block!important;margin:28px auto!important;max-width:720px!important;padding:18px 0!important;border-top:1px solid var(--line)!important;border-bottom:1px solid var(--line)!important;font-size:11px!important;line-height:1.9!important;color:var(--category-muted,var(--fg))!important} .civil-entry-meta{margin-top:18px;border-top:1px solid var(--line)} .civil-entry-meta-row{display:flex;gap:8px;align-items:baseline;flex-wrap:wrap;padding:9px 0;border-bottom:1px solid var(--line);font-size:10px;line-height:1.85;color:var(--category-muted,var(--fg))} .civil-entry-meta-row strong{font-size:9.5px;color:var(--fg);font-weight:600} body.emkan-v149-learning-resource #contentApp :is(.emkan-v138-learning-lead,.emkan-v137-learning-lead,.emkan-v136-learning-lead){display:none!important} /* ===== emkan-v150-precision.css ===== */ /* EMKAN v150 — precision repair layer Scope: shared header/context geometry, Civil > Services, Store product divider, Education > Learning resource layout, and Global Search heading only. Loaded after v149 so no other module styling is changed. */ /* ========================================================================== 1) SHARED HEADER + CONTEXT GEOMETRY One invariant on desktop/tablet: the navigation rail is always narrower than the breadcrumb/back rule below it. Context rows stay centred without translate-based overflow. ========================================================================== */ @media (min-width:1280px){ html body .site-header{ width:min(1040px,calc(100% - 160px))!important; max-width:1040px!important; margin-inline:auto!important; } :root{--emkan-v150-context-width:min(1180px,calc(100vw - 96px))} } @media (min-width:901px) and (max-width:1279px){ html body .site-header{ width:min(1000px,calc(100% - 64px))!important; max-width:1000px!important; margin-inline:auto!important; } :root{--emkan-v150-context-width:min(1120px,calc(100vw - 32px))} } @media (max-width:900px){ html body .site-header{ width:min(720px,calc(100% - 34px))!important; max-width:720px!important; margin-inline:auto!important; } :root{--emkan-v150-context-width:min(752px,calc(100vw - 18px))} } @media (max-width:560px){ html body .site-header{width:calc(100% - 28px)!important} :root{--emkan-v150-context-width:calc(100vw - 16px)} } html body :is( main>.emkan-context-bar, .article-page>.emkan-context-bar, .store-category-main>.store-context-bar, .podcast-main>.podcast-context-bar, .product-main>.product-toolbar ){ position:relative!important; left:auto!important; right:auto!important; inset-inline:auto!important; transform:none!important; width:var(--emkan-v150-context-width)!important; max-width:none!important; min-width:0!important; margin-top:var(--emkan-context-top,14px)!important; margin-bottom:var(--emkan-context-bottom,20px)!important; margin-left:calc((100% - var(--emkan-v150-context-width))/2)!important; margin-right:calc((100% - var(--emkan-v150-context-width))/2)!important; padding:0 0 var(--emkan-context-rule-pad,11px)!important; box-sizing:border-box!important; border:0!important; border-bottom:1px solid var(--line)!important; overflow:visible!important; } html body .emkan-v147-context-inner{ width:100%!important; max-width:none!important; min-width:0!important; margin:0!important; padding:0!important; border:0!important; box-sizing:border-box!important; } /* ========================================================================== 2) CIVIL > SERVICES A dedicated breadcrumb/back pair avoids legacy breadcrumb observers that do not understand the newer service/sample query parameters. ========================================================================== */ body.emkan-v150-civil-context-active .emkan-v147-context-inner > :is(.emkan-context-path,.emkan-context-back){display:none!important} body.emkan-v150-civil-context-active .emkan-v150-civil-path{ flex:1 1 auto!important; min-width:0!important; margin:0!important; padding:0!important; overflow:hidden!important; white-space:nowrap!important; text-overflow:ellipsis!important; color:var(--category-muted,var(--fg))!important; font:inherit!important; line-height:1.7!important; } body.emkan-v150-civil-context-active .emkan-v150-civil-back{ flex:0 0 auto!important; margin:0!important; padding:0!important; color:var(--category-muted,var(--fg))!important; text-decoration:none!important; white-space:nowrap!important; font:inherit!important; line-height:1.7!important; } body.emkan-v150-civil-context-active :is(.emkan-v150-civil-path a,.emkan-v150-civil-back){color:inherit!important;text-decoration:none!important} body.emkan-v150-civil-context-active :is(.emkan-v150-civil-path a,.emkan-v150-civil-back):is(:hover,:focus-visible){color:var(--hover-accent)!important;outline:0!important} :is(html[lang="fa"],html[lang="ar"]) body.emkan-v150-civil-context-active .emkan-v150-civil-path{direction:rtl!important;text-align:right!important} html[lang="en"] body.emkan-v150-civil-context-active .emkan-v150-civil-path{direction:ltr!important;text-align:left!important} /* Service landing remains untouched. Once a service is opened, use the same balanced three-column geometry used elsewhere instead of three fixed cards pinned to one edge. */ @media(min-width:901px){ html body.emkan-v149-civil-service-page .emkan-v149-civil-internal-layout{ width:100%!important; max-width:1040px!important; margin-inline:auto!important; gap:34px!important; } html body.emkan-v149-civil-service-page .emkan-v149-civil-internal-content{ width:100%!important; max-width:none!important; min-width:0!important; } html body.emkan-v149-civil-service-page .emkan-v147-samples-grid{ display:grid!important; grid-template-columns:repeat(3,minmax(0,1fr))!important; gap:28px!important; justify-content:stretch!important; align-items:start!important; width:100%!important; max-width:none!important; margin:0!important; padding:0!important; } html body.emkan-v149-civil-service-page .emkan-v147-sample-card{ width:100%!important; max-width:none!important; min-width:0!important; margin:0!important; } } /* Civil service search: explicit physical padding/positioning prevents older logical-direction rules from placing the icon on top of the placeholder. */ :is(html[lang="fa"],html[lang="ar"]) body:is(.emkan-v149-civil-service-page,.emkan-v149-civil-sample-page) .emkan-v149-civil-search input[type="search"]{ direction:rtl!important; text-align:right!important; padding:0 2px 5px 30px!important; } :is(html[lang="fa"],html[lang="ar"]) body:is(.emkan-v149-civil-service-page,.emkan-v149-civil-sample-page) .emkan-v149-civil-search > svg.search-icon{ left:8px!important; right:auto!important; top:50%!important; transform:translateY(-58%)!important; } html[lang="en"] body:is(.emkan-v149-civil-service-page,.emkan-v149-civil-sample-page) .emkan-v149-civil-search input[type="search"]{ direction:ltr!important; text-align:left!important; padding:0 30px 5px 2px!important; } html[lang="en"] body:is(.emkan-v149-civil-service-page,.emkan-v149-civil-sample-page) .emkan-v149-civil-search > svg.search-icon{ right:8px!important; left:auto!important; top:50%!important; transform:translateY(-58%)!important; } /* ========================================================================== 3) STORE > PRODUCT Historical layers draw both a border and a ::after separator. Remove only this duplicated central divider; the stage/tab/specification rules remain. ========================================================================== */ html body .product-main .product-gallery-panel{ border-inline-end:0!important; } html body .product-main .product-gallery-panel::before, html body .product-main .product-gallery-panel::after{ content:none!important; display:none!important; width:0!important; height:0!important; background:transparent!important; border:0!important; } /* ========================================================================== 4) CONTENT CREATION > EDUCATION > LEARNING RESOURCE Important: older compiled CSS uses #contentApp#contentApp and forces the detail layout to display:block. Match/exceed that specificity here so the rail and body really form two columns in FA/AR/EN. ========================================================================== */ @media(min-width:901px){ html body.emkan-v149-learning-resource #contentApp#contentApp > .v69-content-detail-layout, html body.emkan-v149-learning-resource #contentApp#contentApp > .v69-content-detail-layout.v90-education-detail-layout{ display:grid!important; width:100%!important; max-width:1180px!important; min-width:0!important; margin:0 auto!important; padding:0!important; align-items:start!important; grid-auto-flow:row!important; gap:34px!important; direction:ltr!important; transform:none!important; } :is(html[lang="fa"],html[lang="ar"]) body.emkan-v149-learning-resource #contentApp#contentApp > .v69-content-detail-layout{ grid-template-columns:minmax(0,1fr) 190px!important; grid-template-areas:"content rail"!important; } html[lang="en"] body.emkan-v149-learning-resource #contentApp#contentApp > .v69-content-detail-layout{ grid-template-columns:190px minmax(0,1fr)!important; grid-template-areas:"rail content"!important; } html body.emkan-v149-learning-resource #contentApp#contentApp > .v69-content-detail-layout > .v69-content-search-rail{ display:block!important; grid-area:rail!important; align-self:start!important; width:190px!important; min-width:190px!important; max-width:190px!important; margin:0!important; padding:0!important; position:static!important; inset:auto!important; transform:none!important; } html body.emkan-v149-learning-resource #contentApp#contentApp > .v69-content-detail-layout > .v69-content-detail-body, html body.emkan-v149-learning-resource #contentApp#contentApp > .v69-content-detail-layout > article.v69-content-detail-body, html body.emkan-v149-learning-resource #contentApp#contentApp > .v69-content-detail-layout > article.v86-course-detail{ display:block!important; grid-area:content!important; align-self:start!important; width:100%!important; min-width:0!important; max-width:none!important; margin:0!important; padding:0!important; position:static!important; inset:auto!important; transform:none!important; } html body.emkan-v149-learning-resource #contentApp#contentApp .v69-content-search-rail > :is(.learning-side,.v90-rail-learning-side){ display:block!important; visibility:visible!important; width:100%!important; min-width:0!important; max-width:100%!important; margin:12px 0 0!important; padding:0!important; position:static!important; inset:auto!important; transform:none!important; } html body.emkan-v149-learning-resource #contentApp#contentApp .learning-workspace, html body.emkan-v149-learning-resource #contentApp#contentApp .learning-workspace.v90-learning-workspace, html body.emkan-v149-learning-resource #contentApp#contentApp .learning-panels{ display:block!important; width:100%!important; max-width:none!important; min-width:0!important; margin:0!important; padding:0!important; transform:none!important; } html body.emkan-v149-learning-resource #contentApp#contentApp .emkan-v147-learning-header{ display:grid!important; align-self:start!important; width:100%!important; max-width:none!important; min-width:0!important; margin:0 0 24px!important; padding:0 0 18px!important; gap:22px!important; position:static!important; inset:auto!important; transform:none!important; direction:ltr!important; } :is(html[lang="fa"],html[lang="ar"]) body.emkan-v149-learning-resource #contentApp#contentApp .emkan-v147-learning-header{ grid-template-columns:minmax(0,1fr) 190px!important; grid-template-areas:"copy poster"!important; } html[lang="en"] body.emkan-v149-learning-resource #contentApp#contentApp .emkan-v147-learning-header{ grid-template-columns:190px minmax(0,1fr)!important; grid-template-areas:"poster copy"!important; } html body.emkan-v149-learning-resource #contentApp#contentApp .emkan-v147-learning-poster{ display:block!important; grid-area:poster!important; align-self:start!important; width:190px!important; height:190px!important; max-width:190px!important; min-width:0!important; margin:0!important; padding:0!important; position:static!important; transform:none!important; } html body.emkan-v149-learning-resource #contentApp#contentApp .emkan-v147-learning-poster img{ display:block!important; width:100%!important; height:100%!important; object-fit:cover!important; } html body.emkan-v149-learning-resource #contentApp#contentApp .emkan-v147-learning-copy{ display:block!important; grid-area:copy!important; align-self:start!important; width:100%!important; min-width:0!important; max-width:none!important; margin:0!important; padding:0!important; position:static!important; transform:none!important; } :is(html[lang="fa"],html[lang="ar"]) body.emkan-v149-learning-resource #contentApp#contentApp :is(.v69-content-search-rail,.v69-content-detail-body,.emkan-v147-learning-copy){direction:rtl!important;text-align:right!important} html[lang="en"] body.emkan-v149-learning-resource #contentApp#contentApp :is(.v69-content-search-rail,.v69-content-detail-body,.emkan-v147-learning-copy){direction:ltr!important;text-align:left!important} } @media(max-width:900px){ html body.emkan-v149-learning-resource #contentApp#contentApp > .v69-content-detail-layout{ display:grid!important; grid-template-columns:minmax(0,1fr)!important; grid-template-areas:"rail" "content"!important; gap:18px!important; width:100%!important; max-width:none!important; margin:0!important; padding:0!important; } html body.emkan-v149-learning-resource #contentApp#contentApp > .v69-content-detail-layout > .v69-content-search-rail, html body.emkan-v149-learning-resource #contentApp#contentApp > .v69-content-detail-layout > .v69-content-detail-body{ display:block!important; width:100%!important; min-width:0!important; max-width:none!important; margin:0!important; position:static!important; transform:none!important; } html body.emkan-v149-learning-resource #contentApp#contentApp .v69-content-search-rail > :is(.learning-side,.v90-rail-learning-side){display:block!important;visibility:visible!important;width:100%!important;max-width:none!important;margin-top:10px!important} } /* ========================================================================== 5) GLOBAL SEARCH — quieter, more editorial page title. ========================================================================== */ html body.emkan-global-search-page .emkan-search-head #searchTitle{ display:block!important; margin:0!important; font-size:clamp(20px,2.25vw,31px)!important; font-weight:430!important; line-height:1.45!important; letter-spacing:-.012em!important; } /* ===== emkan-v151-final-tuning.css ===== */ /* EMKAN v151 — final precision tuning Only the nine requested final adjustments are touched here. This sheet is loaded after v150 so established module/admin behavior remains intact. */ /* ========================================================================== 1) GLOBAL HORIZONTAL GEOMETRY Desktop reference: nav rail 1200px, context/breadcrumb rule 1320px. Both are centred, so left/right outer breathing room is always equal. ========================================================================== */ @media (min-width:1280px){ html body .site-header{ width:min(1200px,calc(100% - 132px))!important; max-width:1200px!important; margin-inline:auto!important; } :root{--emkan-v150-context-width:min(1320px,calc(100vw - 72px))} html body .site-header .primary-nav{padding-inline:96px!important} html body .site-header .nav-list{ width:max-content!important; max-width:100%!important; gap:clamp(18px,1.35vw,27px)!important; margin-inline:auto!important; } html body .site-header .language-button{left:26px!important;right:auto!important} html body .site-header .theme-button, html body .site-header .nav-frame>#themeButton.theme-button{right:26px!important;left:auto!important} } @media (min-width:901px) and (max-width:1279px){ html body .site-header{ width:calc(100% - 80px)!important; max-width:1120px!important; margin-inline:auto!important; } :root{--emkan-v150-context-width:min(1200px,calc(100vw - 40px))} html body .site-header .primary-nav{padding-inline:82px!important} html body .site-header .nav-list{gap:clamp(13px,1.25vw,21px)!important} } /* Keep responsive/mobile geometry from v150; only guarantee exact centring. */ html body :is( main>.emkan-context-bar, .article-page>.emkan-context-bar, .store-category-main>.store-context-bar, .podcast-main>.podcast-context-bar, .product-main>.product-toolbar ){ left:auto!important;right:auto!important;inset-inline:auto!important;transform:none!important; margin-left:auto!important;margin-right:auto!important;margin-inline:auto!important; } /* ========================================================================== 2) BREADCRUMBS DOM cleanup is performed by v151 JS. Keep surviving ancestors compact. ========================================================================== */ .emkan-context-path,.emkan-v150-civil-path,#storeCategoryPath,#podcastPath,#productPath,.product-context-path{ min-width:0!important; } /* ========================================================================== 3) CIVIL > SERVICES — same 192px cover system as the approved grids. ========================================================================== */ @media (min-width:901px){ html body.emkan-v149-civil-service-page .emkan-v149-civil-internal-layout, html body.emkan-v149-civil-sample-page .emkan-v149-civil-internal-layout{ width:100%!important;max-width:1040px!important;margin-inline:auto!important; } html body.emkan-v149-civil-service-page .emkan-v147-samples-grid, html body.emkan-v149-civil-sample-page .emkan-v147-samples-grid{ display:grid!important; grid-template-columns:repeat(3,192px)!important; column-gap:28px!important;row-gap:28px!important; justify-content:center!important;align-items:start!important; width:100%!important;max-width:100%!important;margin:0 auto!important;padding:0!important; } html body:is(.emkan-v149-civil-service-page,.emkan-v149-civil-sample-page) .emkan-v147-sample-card{ width:192px!important;max-width:192px!important;min-width:192px!important;margin:0!important; } html body:is(.emkan-v149-civil-service-page,.emkan-v149-civil-sample-page) .emkan-v147-sample-media, html body:is(.emkan-v149-civil-service-page,.emkan-v149-civil-sample-page) .emkan-v147-sample-card :is(img,.emkan-v147-media){ width:192px!important;height:192px!important;aspect-ratio:1/1!important;object-fit:cover!important; } } @media (max-width:900px){ html body:is(.emkan-v149-civil-service-page,.emkan-v149-civil-sample-page) .emkan-v147-sample-card{max-width:192px!important} } /* ========================================================================== 4) EDUCATION > LEARNING RESOURCE TREE The spine and diamond centres share the exact same x coordinate. ========================================================================== */ body.emkan-v149-learning-resource #contentApp .learning-tree{ position:relative!important; padding-inline-start:24px!important; } body.emkan-v149-learning-resource #contentApp .learning-tree::before{ content:""!important;display:block!important;position:absolute!important; inset-inline-start:4px!important;width:1px!important; top:19px!important;bottom:19px!important; background:var(--line)!important; } body.emkan-v149-learning-resource #contentApp .learning-branch{ position:relative!important;min-height:38px!important;padding:8px 0!important; } body.emkan-v149-learning-resource #contentApp .learning-branch::before{ content:""!important;display:block!important;position:absolute!important; inset-inline-start:-23px!important;top:50%!important; width:7px!important;height:7px!important;box-sizing:border-box!important; border:1px solid var(--line)!important;background:var(--bg)!important; transform:translateY(-50%) rotate(45deg)!important; } body.emkan-v149-learning-resource #contentApp .learning-branch:is(:hover,:focus-visible,.is-active)::before{ background:var(--hover-accent)!important;border-color:var(--hover-accent)!important; } @media(max-width:480px){ body.emkan-v149-learning-resource #contentApp .learning-side>.learning-tree{padding-inline-start:0!important} body.emkan-v149-learning-resource #contentApp .learning-side>.learning-tree::before{display:none!important} body.emkan-v149-learning-resource #contentApp .learning-side .learning-branch::before{display:none!important} } /* ========================================================================== 5) EDUCATION REGISTRATION CHECKBOX — one tick only. v120 used a pseudo tick while v136 added a background SVG; suppress the older pseudo mark and keep the canonical v136 background check. ========================================================================== */ body.v115-course-detail #registrationApp input[type="checkbox"]::before, body.v115-course-detail #registrationApp input[type="checkbox"]::after{ content:none!important;display:none!important;border:0!important; } body.v115-course-detail #registrationApp input[type="checkbox"]{ -webkit-appearance:none!important;appearance:none!important; width:14px!important;height:14px!important;min-width:14px!important;min-height:14px!important; border:1px solid var(--line-strong,var(--line))!important;border-radius:0!important; background-color:transparent!important;background-repeat:no-repeat!important;background-position:center!important;background-size:100% 100%!important; box-shadow:none!important; } body.v115-course-detail #registrationApp input[type="checkbox"]:checked{ border-color:var(--hover-accent)!important;background-color:var(--hover-accent)!important; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.1 8.2 6.35 11.25 12.9 4.8' fill='none' stroke='%23fff' stroke-width='1.55' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")!important; } /* ========================================================================== 6) REGISTRATION STEPS = STORE PRODUCT TAB VISUAL GRAMMAR ========================================================================== */ body.v115-course-detail #contentApp #registration{ border-bottom:1px solid var(--line)!important; padding-bottom:30px!important; } body.v115-course-detail #contentApp .v49-progress{ display:flex!important;align-items:flex-end!important;justify-content:flex-start!important; width:100%!important;max-width:100%!important; gap:26px!important;margin:0 0 24px!important;padding:0!important; border:0!important;border-bottom:1px solid var(--line)!important; list-style:none!important;overflow:visible!important; } body.v115-course-detail #contentApp .v49-progress li{ position:relative!important;flex:0 0 auto!important;min-width:0!important; margin:0!important;padding:0 0 10px!important;border:0!important; color:var(--category-muted)!important;font-size:8.8px!important;font-weight:400!important; line-height:1.6!important;text-align:start!important;white-space:nowrap!important; } body.v115-course-detail #contentApp .v49-progress li::after{ content:""!important;display:block!important;position:absolute!important; left:0!important;right:0!important;bottom:-1px!important;width:auto!important;height:1px!important; background:var(--hover-accent)!important;transform:scaleX(0)!important;transform-origin:center!important; transition:transform .22s ease!important; } body.v115-course-detail #contentApp .v49-progress li[aria-current="step"]{ color:var(--fg)!important;font-weight:400!important; } body.v115-course-detail #contentApp .v49-progress li[aria-current="step"]::after{transform:scaleX(1)!important} :is(html[lang="fa"],html[lang="ar"]) body.v115-course-detail #contentApp .v49-progress{direction:rtl!important} html[lang="en"] body.v115-course-detail #contentApp .v49-progress{direction:ltr!important} @media(max-width:520px){ body.v115-course-detail #contentApp .v49-progress{gap:20px!important;overflow-x:auto!important;scrollbar-width:none!important} body.v115-course-detail #contentApp .v49-progress::-webkit-scrollbar{display:none!important} } /* ========================================================================== 7) STORE CATEGORY — one quiet vertical divider between rail and products. JS measures the two real columns and places the hairline at the exact middle of their gap, so RTL/LTR and future rail widths cannot put it on the wrong side. ========================================================================== */ @media(min-width:761px){ html body .store-category-layout{position:relative!important} html body .store-category-layout::after{ content:""!important;display:block!important;position:absolute!important;z-index:1!important; top:0!important;bottom:0!important;left:var(--emkan-v151-store-divider-x,50%)!important; width:1px!important;background:var(--line)!important;pointer-events:none!important; } } @media(max-width:760px){html body .store-category-layout::after{display:none!important;content:none!important}} /* ========================================================================== 8) ABOUT — vertical spine passes exactly through 7px diamond centres. Desktop only; mobile/horizontal variants remain untouched. ========================================================================== */ @media(min-width:901px){ html body .about-main .company-axis{ position:relative!important;padding-inline-start:22px!important; } html body .about-main .company-axis::before{ inset-inline-start:5px!important;width:1px!important; } html body .about-main .company-axis .practice-button::before{ inset-inline-start:-20px!important;width:7px!important;height:7px!important;box-sizing:border-box!important; } } /* ========================================================================== 9) ONLY THE THREE APPROVED FOUR-COVER LANDINGS — lower the row slightly. Content Creation and every internal page are intentionally excluded. ========================================================================== */ @media(min-width:921px){ html body:is(.emkan-v142-civil-landing,.emkan-v142-research-landing) .category-grid, html body:is(.emkan-v142-civil-landing,.emkan-v142-research-landing) .category-grid.category-grid--five, html body.emkan-v142-store-landing .store-grid{ margin-top:16px!important; } } /* ===== emkan-v152-final-fixes.css ===== */ /* ====================================================================== EMKAN v152 — final geometry / alignment fixes Loaded after v151. Scope: shared layout geometry + requested page fixes. ====================================================================== */ /* ---------------------------------------------------------------------- 1) Global desktop geometry Header/menu = narrower line Context/subnav rows = wider line ---------------------------------------------------------------------- */ @media (min-width: 1280px) { :root { --emkan-v152-header-width: min(1440px, calc(100vw - 96px)); } html body .site-header { width: var(--emkan-v152-header-width) !important; max-width: 1440px !important; margin-inline: auto !important; } /* Architecture inner-project title/back strip must follow the wide lower line. */ } @media (min-width: 901px) and (max-width: 1279px) { html body .site-header { width: min(1120px, calc(100% - 80px)) !important; max-width: 1120px !important; margin-inline: auto !important; } } /* ---------------------------------------------------------------------- 2) ABOUT — vertical axis must pass through diamond centres Explicit physical sides avoid RTL/LTR logical-property cascade conflicts. ---------------------------------------------------------------------- */ @media (min-width: 721px) { html[lang="fa"] body .company-axis, html[lang="ar"] body .company-axis { direction: rtl !important; padding: 4px 18px 4px 0 !important; } html[lang="fa"] body .company-axis::before, html[lang="ar"] body .company-axis::before { inset-inline-start: auto !important; inset-inline-end: auto !important; left: auto !important; right: 5px !important; width: 1px !important; } html[lang="fa"] body .company-axis button::before, html[lang="ar"] body .company-axis button::before { inset-inline-start: auto !important; inset-inline-end: auto !important; left: auto !important; right: -16px !important; width: 7px !important; height: 7px !important; box-sizing: border-box !important; } html[lang="en"] body .company-axis { direction: ltr !important; padding: 4px 0 4px 18px !important; } html[lang="en"] body .company-axis::before { inset-inline-start: auto !important; inset-inline-end: auto !important; right: auto !important; left: 5px !important; width: 1px !important; } html[lang="en"] body .company-axis button::before { inset-inline-start: auto !important; inset-inline-end: auto !important; right: auto !important; left: -16px !important; width: 7px !important; height: 7px !important; box-sizing: border-box !important; } } /* ---------------------------------------------------------------------- 3) CONTACT — restore deliberately compact composition width ---------------------------------------------------------------------- */ @media (min-width: 761px) { html body main.contact-main.contact-main--compact { width: min(840px, calc(100% - 48px)) !important; max-width: 840px !important; margin-inline: auto !important; padding-top: 42px !important; } html body .contact-main--compact .contact-composition { width: 100% !important; max-width: 840px !important; grid-template-columns: minmax(0, 1.03fr) minmax(300px, 0.97fr) !important; gap: 30px !important; } } /* ---------------------------------------------------------------------- 4) EDUCATIONAL CONTENT — line / diamonds exact centre alignment ---------------------------------------------------------------------- */ @media (min-width: 721px) { html[lang="fa"] body.emkan-v149-learning-resource #contentApp .learning-tree, html[lang="ar"] body.emkan-v149-learning-resource #contentApp .learning-tree { direction: rtl !important; padding: 0 24px 0 0 !important; } html[lang="fa"] body.emkan-v149-learning-resource #contentApp .learning-tree::before, html[lang="ar"] body.emkan-v149-learning-resource #contentApp .learning-tree::before { inset-inline-start: auto !important; inset-inline-end: auto !important; left: auto !important; right: 4px !important; width: 1px !important; } html[lang="fa"] body.emkan-v149-learning-resource #contentApp .learning-branch::before, html[lang="ar"] body.emkan-v149-learning-resource #contentApp .learning-branch::before { inset-inline-start: auto !important; inset-inline-end: auto !important; left: auto !important; right: -23px !important; width: 7px !important; height: 7px !important; box-sizing: border-box !important; } html[lang="en"] body.emkan-v149-learning-resource #contentApp .learning-tree { direction: ltr !important; padding: 0 0 0 24px !important; } html[lang="en"] body.emkan-v149-learning-resource #contentApp .learning-tree::before { inset-inline-start: auto !important; inset-inline-end: auto !important; right: auto !important; left: 4px !important; width: 1px !important; } html[lang="en"] body.emkan-v149-learning-resource #contentApp .learning-branch::before { inset-inline-start: auto !important; inset-inline-end: auto !important; right: auto !important; left: -23px !important; width: 7px !important; height: 7px !important; box-sizing: border-box !important; } } /* ---------------------------------------------------------------------- 5) CIVIL / SERVICES — architecture-equivalent 3-card grid + clean search ---------------------------------------------------------------------- */ @media (min-width: 901px) { html body.emkan-v147-civil-services .emkan-v147-services-view, html body.emkan-v149-civil-service-page .emkan-v149-civil-detail-layout, html body.emkan-v149-civil-sample-page .emkan-v149-civil-detail-layout { width: 952px !important; max-width: 952px !important; margin-inline: auto !important; } html[lang="fa"] body.emkan-v149-civil-service-page .emkan-v149-civil-internal-layout, html[lang="ar"] body.emkan-v149-civil-service-page .emkan-v149-civil-internal-layout, html[lang="fa"] body.emkan-v149-civil-sample-page .emkan-v149-civil-internal-layout, html[lang="ar"] body.emkan-v149-civil-sample-page .emkan-v149-civil-internal-layout { width: 952px !important; max-width: 952px !important; grid-template-columns: 648px 176px !important; grid-template-areas: "content rail" !important; column-gap: 128px !important; direction: ltr !important; } html[lang="en"] body.emkan-v149-civil-service-page .emkan-v149-civil-internal-layout, html[lang="en"] body.emkan-v149-civil-sample-page .emkan-v149-civil-internal-layout { width: 952px !important; max-width: 952px !important; grid-template-columns: 176px 648px !important; grid-template-areas: "rail content" !important; column-gap: 128px !important; direction: ltr !important; } html body:is(.emkan-v149-civil-service-page,.emkan-v149-civil-sample-page) .emkan-v149-civil-search-rail { width: 176px !important; max-width: 176px !important; } html body:is(.emkan-v149-civil-service-page,.emkan-v149-civil-sample-page) .emkan-v149-civil-internal-content { width: 648px !important; max-width: 648px !important; } html body:is(.emkan-v149-civil-service-page,.emkan-v149-civil-sample-page) .emkan-v147-samples-grid { width: 648px !important; max-width: 648px !important; grid-template-columns: repeat(3, 192px) !important; column-gap: 36px !important; row-gap: 32px !important; justify-content: start !important; margin: 0 !important; } html[lang="fa"] body:is(.emkan-v149-civil-service-page,.emkan-v149-civil-sample-page) .emkan-v147-samples-grid, html[lang="ar"] body:is(.emkan-v149-civil-service-page,.emkan-v149-civil-sample-page) .emkan-v147-samples-grid { direction: rtl !important; } html[lang="en"] body:is(.emkan-v149-civil-service-page,.emkan-v149-civil-sample-page) .emkan-v147-samples-grid { direction: ltr !important; } } /* Search field: reserve icon space and pin icon to the physical opposite side. */ html body.emkan-v147-civil-services .v70-canonical-search, html body.emkan-v149-civil-service-page .emkan-v149-civil-search, html body.emkan-v149-civil-sample-page .emkan-v149-civil-search { position: relative !important; } html[lang="fa"] body.emkan-v147-civil-services .v70-canonical-search input, html[lang="ar"] body.emkan-v147-civil-services .v70-canonical-search input, html[lang="fa"] body.emkan-v149-civil-service-page .emkan-v149-civil-search input, html[lang="ar"] body.emkan-v149-civil-service-page .emkan-v149-civil-search input, html[lang="fa"] body.emkan-v149-civil-sample-page .emkan-v149-civil-search input, html[lang="ar"] body.emkan-v149-civil-sample-page .emkan-v149-civil-search input { direction: rtl !important; text-align: right !important; padding-left: 32px !important; padding-right: 2px !important; } html[lang="fa"] body.emkan-v147-civil-services .v70-canonical-search svg, html[lang="ar"] body.emkan-v147-civil-services .v70-canonical-search svg, html[lang="fa"] body.emkan-v149-civil-service-page .emkan-v149-civil-search svg, html[lang="ar"] body.emkan-v149-civil-service-page .emkan-v149-civil-search svg, html[lang="fa"] body.emkan-v149-civil-sample-page .emkan-v149-civil-search svg, html[lang="ar"] body.emkan-v149-civil-sample-page .emkan-v149-civil-search svg { left: 8px !important; right: auto !important; } html[lang="en"] body.emkan-v147-civil-services .v70-canonical-search input, html[lang="en"] body.emkan-v149-civil-service-page .emkan-v149-civil-search input, html[lang="en"] body.emkan-v149-civil-sample-page .emkan-v149-civil-search input { direction: ltr !important; text-align: left !important; padding-left: 2px !important; padding-right: 32px !important; } html[lang="en"] body.emkan-v147-civil-services .v70-canonical-search svg, html[lang="en"] body.emkan-v149-civil-service-page .emkan-v149-civil-search svg, html[lang="en"] body.emkan-v149-civil-sample-page .emkan-v149-civil-search svg { right: 8px !important; left: auto !important; } /* ---------------------------------------------------------------------- 6) STORE — category has NO divider; single product HAS one clean divider ---------------------------------------------------------------------- */ html body .store-category-layout::after { content: none !important; display: none !important; width: 0 !important; background: transparent !important; } @media (min-width: 901px) { html body .product-stage { display: grid !important; grid-template-columns: minmax(0, 1fr) 1px minmax(320px, 0.9fr) !important; grid-template-areas: "media divider info" !important; column-gap: 14px !important; align-items: stretch !important; } html body .product-stage::after { content: "" !important; display: block !important; grid-column: 2 !important; grid-row: 1 !important; width: 1px !important; min-width: 1px !important; height: 100% !important; align-self: stretch !important; justify-self: center !important; background: var(--line, #d7d9dc) !important; pointer-events: none !important; } html body .product-gallery-panel { grid-area: media !important; border-inline-end: 0 !important; } html body .product-info { grid-area: info !important; } } @media (max-width: 900px) { html body .product-stage::after { content: none !important; display: none !important; } } /* ---------------------------------------------------------------------- 7) Landing pages — remove small desktop viewport overflow without hiding content ---------------------------------------------------------------------- */ @media (min-width: 901px) { /* Architecture: keep card proportions; reclaim only excessive white spacing. */ html body .architecture-main .projects-layout { margin-top: clamp(24px, 3.2vh, 32px) !important; } html body .architecture-main .gallery-items-container { row-gap: 18px !important; } /* Content creation had a repeatable ~5px overflow caused by bottom padding. */ html body.emkan-v142-content-landing .module-main { padding-bottom: 14px !important; } } /* Short desktop viewports: responsive compaction instead of page clipping. */ @media (min-width: 901px) and (max-height: 840px) { html body .architecture-main .projects-layout { margin-top: 18px !important; } html body .architecture-main .gallery-items-container { grid-template-columns: repeat(3, 156px) !important; row-gap: 12px !important; justify-content: center !important; } } /* ====================================================================== v152.1 — specificity/centering hardening after full cascade validation ====================================================================== */ /* Center header against the viewport even when the shared page-shell has horizontal padding and the requested header width is wider than its content box. */ @media (min-width: 901px) { html body .page-shell > .site-header { position: relative !important; left: 50% !important; transform: translateX(-50%) !important; margin-left: 0 !important; margin-right: 0 !important; } } /* About: match the high-specificity v151 selector and cancel its logical inset. */ @media (min-width: 721px) { html[lang="fa"] body .about-main .company-axis .practice-button::before, html[lang="ar"] body .about-main .company-axis .practice-button::before { inset-inline-start: auto !important; inset-inline-end: auto !important; left: auto !important; right: -16px !important; width: 7px !important; height: 7px !important; } html[lang="en"] body .about-main .company-axis .practice-button::before { inset-inline-start: auto !important; inset-inline-end: auto !important; right: auto !important; left: -16px !important; width: 7px !important; height: 7px !important; } } /* Contact: override the global page-shell > main geometry selector, not just the page's own max-width declaration. */ @media (min-width: 761px) { html body:not(.welcome-page):not(.menu-page) .page-shell > main.contact-main.contact-main--compact { width: min(840px, calc(100% - 48px)) !important; max-width: 840px !important; margin-left: auto !important; margin-right: auto !important; padding-top: 42px !important; } } /* Landing pages: content itself already fits; remove only surplus flow height. */ @media (min-width: 901px) { html body .architecture-main { margin-bottom: -16px !important; } html body.emkan-v142-content-landing .module-main { margin-bottom: -8px !important; } } /* v152.2 — symmetrical explicit margins keep wide lines truly viewport-centred even when they are wider than the padded page-shell content box. */ @media (min-width: 901px) { html body .page-shell > .site-header { left: auto !important; transform: none !important; margin-left: calc((100% - var(--emkan-v152-header-width, min(1120px, calc(100vw - 80px)))) / 2) !important; margin-right: calc((100% - var(--emkan-v152-header-width, min(1120px, calc(100vw - 80px)))) / 2) !important; } } @media (min-width: 901px) and (max-width: 1279px) { :root { --emkan-v152-header-width: min(1120px, calc(100vw - 80px)); } } /* Civil search icon hardening: prevent any inherited/static SVG rule from pulling the magnifier back onto the placeholder text. */ html body:is(.emkan-v149-civil-service-page,.emkan-v149-civil-sample-page) .emkan-v149-civil-search > svg.search-icon { position: absolute !important; z-index: 2 !important; top: 50% !important; width: 12px !important; height: 12px !important; transform: translateY(-58%) !important; pointer-events: none !important; } /* Very short laptop viewport: one more proportional step so the Architecture landing still fits without a stray desktop scrollbar. */ @media (min-width: 901px) and (max-height: 760px) { html body .architecture-main .projects-layout { margin-top: 12px !important; } html body .architecture-main .gallery-items-container { grid-template-columns: repeat(3, 142px) !important; row-gap: 10px !important; justify-content: center !important; } } /* ===== emkan-v153-user-fixes.css ===== */ /* ====================================================================== EMKAN v153 — final user-requested fixes Scope: 1) global menu/context widths 2) architecture & civil project/list cover sizing and spacing 3) educational tree alignment on desktop/mobile 4) unified grayscale -> color hover with soft zoom and no jitter ====================================================================== */ /* -------------------------------------------------- 1) GLOBAL WIDTH SYSTEM Blue line / top navigation width = site header. Red line / lower contextual strip width = context width. -------------------------------------------------- */ @media (min-width: 1280px) { :root { --emkan-v153-header-width: min(1296px, calc(100vw - 120px)); } html body .page-shell > .site-header, html body .site-header { width: var(--emkan-v153-header-width) !important; max-width: var(--emkan-v153-header-width) !important; margin-left: calc((100% - var(--emkan-v153-header-width)) / 2) !important; margin-right: calc((100% - var(--emkan-v153-header-width)) / 2) !important; left: auto !important; transform: none !important; } } @media (min-width: 901px) and (max-width: 1279px) { :root { --emkan-v153-header-width: min(1080px, calc(100vw - 88px)); } html body .page-shell > .site-header, html body .site-header { width: var(--emkan-v153-header-width) !important; max-width: var(--emkan-v153-header-width) !important; margin-left: calc((100% - var(--emkan-v153-header-width)) / 2) !important; margin-right: calc((100% - var(--emkan-v153-header-width)) / 2) !important; left: auto !important; transform: none !important; } } /* -------------------------------------------------- 2) ARCHITECTURE / CIVIL — cover size restored -------------------------------------------------- */ @media (min-width: 1181px) { html body .architecture-main .gallery-item, html body .civil-projects-main .gallery-item, html body .civil-projects-page .gallery-item { width: 100% !important; justify-self: stretch !important; } } @media (min-width: 901px) and (max-width: 1180px) { html body .architecture-main .gallery-item, html body .civil-projects-main .gallery-item, html body .civil-projects-page .gallery-item { width: 100% !important; justify-self: stretch !important; } } /* Project detail pages: more breathing room below the lower strip, with a slightly broader visual stage. */ @media (min-width: 901px) { html body .project-main { margin-top: 26px !important; } } /* -------------------------------------------------- 3) EDUCATIONAL TREE — precise alignment Covers both old and current course/resource structures. -------------------------------------------------- */ @media (min-width: 721px) { /* Modern .learning-tree structure */ html[lang="fa"] body.content-section-page #contentApp .learning-side > .learning-tree, html[lang="ar"] body.content-section-page #contentApp .learning-side > .learning-tree, html[lang="fa"] body.emkan-v149-learning-resource #contentApp .learning-tree, html[lang="ar"] body.emkan-v149-learning-resource #contentApp .learning-tree { direction: rtl !important; padding: 0 22px 0 0 !important; } html[lang="fa"] body.content-section-page #contentApp .learning-side > .learning-tree::before, html[lang="ar"] body.content-section-page #contentApp .learning-side > .learning-tree::before, html[lang="fa"] body.emkan-v149-learning-resource #contentApp .learning-tree::before, html[lang="ar"] body.emkan-v149-learning-resource #contentApp .learning-tree::before { left: auto !important; right: 5px !important; inset-inline-start: auto !important; inset-inline-end: auto !important; width: 1px !important; } html[lang="fa"] body.content-section-page #contentApp .learning-side .learning-branch::before, html[lang="ar"] body.content-section-page #contentApp .learning-side .learning-branch::before, html[lang="fa"] body.emkan-v149-learning-resource #contentApp .learning-branch::before, html[lang="ar"] body.emkan-v149-learning-resource #contentApp .learning-branch::before { left: auto !important; right: -17px !important; inset-inline-start: auto !important; inset-inline-end: auto !important; width: 7px !important; height: 7px !important; box-sizing: border-box !important; } html[lang="en"] body.content-section-page #contentApp .learning-side > .learning-tree, html[lang="en"] body.emkan-v149-learning-resource #contentApp .learning-tree { direction: ltr !important; padding: 0 0 0 22px !important; } html[lang="en"] body.content-section-page #contentApp .learning-side > .learning-tree::before, html[lang="en"] body.emkan-v149-learning-resource #contentApp .learning-tree::before { right: auto !important; left: 5px !important; inset-inline-start: auto !important; inset-inline-end: auto !important; width: 1px !important; } html[lang="en"] body.content-section-page #contentApp .learning-side .learning-branch::before, html[lang="en"] body.emkan-v149-learning-resource #contentApp .learning-branch::before { right: auto !important; left: -17px !important; inset-inline-start: auto !important; inset-inline-end: auto !important; width: 7px !important; height: 7px !important; box-sizing: border-box !important; } /* v115 detached tree structure */ html[lang="fa"] body.v115-course-detail #contentApp .v115-learning-tree, html[lang="ar"] body.v115-course-detail #contentApp .v115-learning-tree { direction: rtl !important; padding: 0 20px 0 0 !important; } html[lang="fa"] body.v115-course-detail #contentApp .v115-learning-tree::before, html[lang="ar"] body.v115-course-detail #contentApp .v115-learning-tree::before { left: auto !important; right: 5px !important; width: 1px !important; } html[lang="fa"] body.v115-course-detail #contentApp .v115-tree-branch::before, html[lang="ar"] body.v115-course-detail #contentApp .v115-tree-branch::before { left: auto !important; right: -15px !important; width: 7px !important; height: 7px !important; box-sizing: border-box !important; } html[lang="en"] body.v115-course-detail #contentApp .v115-learning-tree { direction: ltr !important; padding: 0 0 0 20px !important; } html[lang="en"] body.v115-course-detail #contentApp .v115-learning-tree::before { right: auto !important; left: 5px !important; width: 1px !important; } html[lang="en"] body.v115-course-detail #contentApp .v115-tree-branch::before { right: auto !important; left: -15px !important; width: 7px !important; height: 7px !important; box-sizing: border-box !important; } } /* Mobile / compact layouts: keep the tree clean and stable. */ @media (max-width: 720px) { html body.content-section-page #contentApp .v69-content-search-rail > .learning-side .learning-tree, html body.v115-course-detail #contentApp .v115-learning-tree { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 0 14px !important; width: 100% !important; max-width: 100% !important; padding: 0 !important; margin: 0 !important; } html body.content-section-page #contentApp .v69-content-search-rail > .learning-side .learning-tree::before, html body.v115-course-detail #contentApp .v115-learning-tree::before, html body.content-section-page #contentApp .v69-content-search-rail > .learning-side .learning-branch::before, html body.v115-course-detail #contentApp .v115-tree-branch::before { display: none !important; content: none !important; } html body.content-section-page #contentApp .v69-content-search-rail > .learning-side .learning-branch, html body.v115-course-detail #contentApp .v115-tree-branch { min-width: 0 !important; min-height: 34px !important; padding: 7px 0 !important; border-bottom: 1px solid var(--line) !important; transform: none !important; } } /* -------------------------------------------------- 4) UNIFIED IMAGE HOVER — grayscale to color + soft zoom, no shake -------------------------------------------------- */ html body .img-wrapper, html body .category-square, html body .category-media, html body .person-card-media, html body .team-portrait, html body .vthumb-media, html body .project-viewer, html body .people-photo, html body .article-cover, html body .store-card-media { overflow: hidden !important; transform: translateZ(0); backface-visibility: hidden; } html body .project-card, html body .category-card, html body .person-card, html body .team-preview, html body .vthumb, html body .article-row, html body .store-product-card, html body .people-card { transform: translateZ(0); backface-visibility: hidden; } html body .category-card:hover, html body .category-card:focus-visible, html body .project-card:hover, html body .project-card:focus-visible, html body .vthumb:hover, html body .vthumb:focus-visible, html body .person-card:hover, html body .person-card:focus-within, html body .team-preview:hover, html body .team-preview:focus-within { transform: none !important; } html body .category-media img, html body .img-wrapper img, html body .person-card-media img, html body .team-portrait img, html body .vthumb-media img, html body .vthumb-media video, html body .project-viewer img, html body .people-photo img, html body .article-cover img, html body .store-card-media img { will-change: transform, filter, opacity; transform-origin: center center; } @media (hover: hover) and (pointer: fine) { html body .category-card:hover .category-media img, html body .category-card:focus-visible .category-media img, html body .project-card:hover .img-wrapper img, html body .project-card:focus-visible .img-wrapper img, html body .person-card:hover .person-card-media img, html body .person-card:focus-within .person-card-media img, html body .team-preview:hover .team-portrait img, html body .team-preview:focus-within .team-portrait img, html body .vthumb:hover .vthumb-media img, html body .vthumb:hover .vthumb-media video, html body .vthumb.is-selected .vthumb-media img, html body .vthumb.is-selected .vthumb-media video { filter: grayscale(0%) !important; opacity: 1 !important; transform: scale(1.03) translateZ(0) !important; } html body .category-media img, html body .img-wrapper img, html body .person-card-media img, html body .team-portrait img, html body .vthumb-media img, html body .vthumb-media video, html body .project-viewer img, html body .people-photo img, html body .article-cover img, html body .store-card-media img { transition: filter .62s ease, opacity .34s ease, transform .72s cubic-bezier(.22,.61,.36,1) !important; } } /* ===== emkan-v154-final.css ===== */ /* EMKAN v154 — final visual hardening requested 1405/06/28 */ /* 1) One site-wide geometry rule: blue/header line narrower, lower/context line wider. */ @media (min-width:1280px){ :root{--emkan-v154-header-width:min(1296px,calc(100vw - 120px));} html body .page-shell>.site-header,html body .site-header{width:var(--emkan-v154-header-width)!important;max-width:var(--emkan-v154-header-width)!important;margin-left:calc((100% - var(--emkan-v154-header-width))/2)!important;margin-right:calc((100% - var(--emkan-v154-header-width))/2)!important;left:auto!important;right:auto!important;transform:none!important} } @media (min-width:901px) and (max-width:1279px){ :root{--emkan-v154-header-width:min(1080px,calc(100vw - 88px));} html body .page-shell>.site-header,html body .site-header{width:var(--emkan-v154-header-width)!important;max-width:var(--emkan-v154-header-width)!important;margin-left:calc((100% - var(--emkan-v154-header-width))/2)!important;margin-right:calc((100% - var(--emkan-v154-header-width))/2)!important;left:auto!important;right:auto!important;transform:none!important} } /* 2) Architecture + Civil project listings: restore approved cover scale and the vertical rhythm of Civil/Execution. */ @media (min-width:901px){ html body .architecture-main .projects-layout{margin-top:clamp(46px,6vh,64px)!important} html body .architecture-main .gallery-items-container{grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:clamp(38px,4.7vw,62px) clamp(26px,3vw,48px)!important} html body .architecture-main .gallery-item{width:100%!important;max-width:none!important;justify-self:stretch!important} html body .architecture-main .img-wrapper{width:100%!important;aspect-ratio:1/1!important} /* cancel short-viewport rules that had reduced project cards to 142/156px */ html body .architecture-main .gallery-items-container{justify-content:stretch!important} } /* Project detail stage should not stick to the lower line. */ @media (min-width:901px){ html body .project-main{margin-top:26px!important} } /* 3) Learning-resource tree: hairline passes through the exact diamond centres. */ @media (min-width:721px){ html[lang=fa] body.content-section-page #contentApp .learning-side>.learning-tree, html[lang=ar] body.content-section-page #contentApp .learning-side>.learning-tree, html[lang=fa] body.emkan-v149-learning-resource #contentApp .learning-tree, html[lang=ar] body.emkan-v149-learning-resource #contentApp .learning-tree{ position:relative!important;direction:rtl!important;padding:0 23px 0 0!important;margin:0!important } html[lang=fa] body.content-section-page #contentApp .learning-side>.learning-tree::before, html[lang=ar] body.content-section-page #contentApp .learning-side>.learning-tree::before, html[lang=fa] body.emkan-v149-learning-resource #contentApp .learning-tree::before, html[lang=ar] body.emkan-v149-learning-resource #contentApp .learning-tree::before{ display:block!important;content:""!important;position:absolute!important;top:11px!important;bottom:11px!important;left:auto!important;right:4px!important;inset-inline-start:auto!important;inset-inline-end:auto!important;width:1px!important;background:var(--line)!important } html[lang=fa] body.content-section-page #contentApp .learning-side .learning-branch::before, html[lang=ar] body.content-section-page #contentApp .learning-side .learning-branch::before, html[lang=fa] body.emkan-v149-learning-resource #contentApp .learning-branch::before, html[lang=ar] body.emkan-v149-learning-resource #contentApp .learning-branch::before{ display:block!important;content:""!important;position:absolute!important;top:50%!important;left:auto!important;right:-22px!important;inset-inline-start:auto!important;inset-inline-end:auto!important;width:7px!important;height:7px!important;box-sizing:border-box!important;transform:translateY(-50%) rotate(45deg)!important } html[lang=en] body.content-section-page #contentApp .learning-side>.learning-tree, html[lang=en] body.emkan-v149-learning-resource #contentApp .learning-tree{position:relative!important;direction:ltr!important;padding:0 0 0 23px!important;margin:0!important} html[lang=en] body.content-section-page #contentApp .learning-side>.learning-tree::before, html[lang=en] body.emkan-v149-learning-resource #contentApp .learning-tree::before{display:block!important;content:""!important;position:absolute!important;top:11px!important;bottom:11px!important;right:auto!important;left:4px!important;inset-inline-start:auto!important;inset-inline-end:auto!important;width:1px!important;background:var(--line)!important} html[lang=en] body.content-section-page #contentApp .learning-side .learning-branch::before, html[lang=en] body.emkan-v149-learning-resource #contentApp .learning-branch::before{display:block!important;content:""!important;position:absolute!important;top:50%!important;right:auto!important;left:-22px!important;inset-inline-start:auto!important;inset-inline-end:auto!important;width:7px!important;height:7px!important;box-sizing:border-box!important;transform:translateY(-50%) rotate(45deg)!important} } @media (max-width:720px){ html body.content-section-page #contentApp .v69-content-search-rail>.learning-side .learning-tree{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:0 14px!important;padding:0!important;margin:0!important} html body.content-section-page #contentApp .v69-content-search-rail>.learning-side .learning-tree::before, html body.content-section-page #contentApp .v69-content-search-rail>.learning-side .learning-branch::before{display:none!important;content:none!important} html body.content-section-page #contentApp .v69-content-search-rail>.learning-side .learning-branch{transform:none!important;min-height:34px!important;padding:7px 0!important;border-bottom:1px solid var(--line)!important} } /* 4) One hover language for all public image cards. No parent movement = no shake. */ html body :is(.project-card,.category-card,.v49-card,.v49-course,.v49-work-card,.civil-entry-card,.store-card,.product-card,.person-card,.team-preview,.vthumb,.research-entry,.related-item){transform:none!important;backface-visibility:hidden!important} html body :is(.img-wrapper,.category-media,.category-square,.v49-card-media,.v49-course-cover,.v49-course-media,.v49-work-media,.civil-entry-media,.store-big,.store-small,.store-card-media,.product-card-media,.product-main-image,.person-card-media,.team-portrait,.vthumb-media,.research-index-media,.article-cover,.people-photo){overflow:hidden!important;backface-visibility:hidden!important;transform:translateZ(0)!important} html body :is(.img-wrapper img,.category-media img,.v49-card-media img,.v49-course-cover img,.v49-course-media img,.v49-work-media img,.civil-entry-media img,.store-big img,.store-small img,.store-card-media img,.product-card-media img,.product-main-image img,.person-card-media img,.team-portrait img,.vthumb-media img,.vthumb-media video,.research-index-media img,.article-cover img,.people-photo img){filter:grayscale(100%)!important;transform:scale(1.002) translateZ(0)!important;transform-origin:center center!important;will-change:transform,filter,opacity;transition:filter .62s ease,opacity .34s ease,transform .72s cubic-bezier(.22,.61,.36,1)!important} @media (hover:hover) and (pointer:fine){ html body :is(.project-card,.category-card,.v49-card,.v49-course,.v49-work-card,.civil-entry-card,.store-card,.product-card,.person-card,.team-preview,.vthumb,.research-entry,.related-item):is(:hover,:focus-visible,:focus-within) :is(.img-wrapper img,.category-media img,.v49-card-media img,.v49-course-cover img,.v49-course-media img,.v49-work-media img,.civil-entry-media img,.store-big img,.store-small img,.store-card-media img,.product-card-media img,.product-main-image img,.person-card-media img,.team-portrait img,.vthumb-media img,.vthumb-media video,.research-index-media img,.article-cover img,.people-photo img){filter:grayscale(0%)!important;opacity:1!important;transform:scale(1.03) translateZ(0)!important} html body .vthumb.is-selected :is(.vthumb-media img,.vthumb-media video){filter:grayscale(0%)!important;opacity:1!important;transform:scale(1.03) translateZ(0)!important} } /* ===== emkan-v155-geometry-search.css ===== */ /* ====================================================================== EMKAN v155 — geometry + search-only patch Changes are intentionally limited to: 1) global desktop header/menu width 2) one global context/back/path/rule width based on Architecture 3) search result vertical spacing when a specific filter is selected ====================================================================== */ /* ---------------------------------------------------------------------- SINGLE SOURCE OF TRUTH Previous desktop edge deductions: header: 120px -> now 360px (3x) context: 32px -> now 96px (3x) Previous laptop edge deductions: header: 88px -> now 264px (3x) context: 40px -> now 120px (3x) ---------------------------------------------------------------------- */ @media (min-width: 1280px) { :root { --emkan-v155-header-width: min(1296px, calc(100vw - 360px)); } /* Mega menu / header: same width everywhere. */ html body .page-shell > .site-header, html body .site-header { width: var(--emkan-v155-header-width) !important; max-width: var(--emkan-v155-header-width) !important; margin-left: calc((100% - var(--emkan-v155-header-width)) / 2) !important; margin-right: calc((100% - var(--emkan-v155-header-width)) / 2) !important; left: auto !important; right: auto !important; transform: none !important; } /* Architecture is the reference for every path/back/rule strip. */ } @media (min-width: 901px) and (max-width: 1279px) { :root { --emkan-v155-header-width: min(1080px, calc(100vw - 264px)); } html body .page-shell > .site-header, html body .site-header { width: var(--emkan-v155-header-width) !important; max-width: var(--emkan-v155-header-width) !important; margin-left: calc((100% - var(--emkan-v155-header-width)) / 2) !important; margin-right: calc((100% - var(--emkan-v155-header-width)) / 2) !important; left: auto !important; right: auto !important; transform: none !important; } } /* ---------------------------------------------------------------------- SEARCH With only a few filtered results, the grid's min-height used to stretch the auto rows. Pin all result rows to content height so filtered views keep exactly the same rhythm as the "All" view. ---------------------------------------------------------------------- */ html body .emkan-search-results { align-content: start !important; grid-auto-rows: max-content !important; row-gap: 0 !important; } html body .emkan-search-result { align-self: start !important; min-height: 0 !important; margin-block: 0 !important; } /* ===== emkan-v156-context-store-tree.css ===== */ /* ====================================================================== EMKAN v156 — tightly scoped final patch Scope only: 1) lower context/breadcrumb/back strip geometry (header/mega-menu untouched) 2) Store selected filter/category state 3) Education disclosure icon consistency 4) Tree spine/node alignment ====================================================================== */ /* ---------------------------------------------------------------------- 1) ONE SOURCE OF TRUTH FOR EVERY LOWER CONTEXT STRIP IMPORTANT: v155 mega-menu/header values are intentionally NOT touched. v155 desktop context deduction was 96px total = 48px each side. Requested: 3x the current side distance -> 144px each side. Therefore the new total deduction is 288px. v155 laptop context deduction was 120px total = 60px each side. Requested: 3x -> 180px each side = 360px total deduction. ---------------------------------------------------------------------- */ @media (min-width:1280px){ } @media (min-width:901px) and (max-width:1279px){ } @media (min-width:901px){ /* Covers Architecture first, then every current/future public inner page using a context bar, plus the two legacy equivalents. Viewport-centering is deliberate: older rules calculate margins against different parent widths, which is why pages drifted apart. */ } /* ---------------------------------------------------------------------- 2) STORE — hover stays accent; selected state returns to normal black/fg. No bold retained after click. ---------------------------------------------------------------------- */ html body .store-category-nav a.is-active, html body .store-subcategory-list a.is-active, html body .store-sort-list button.is-active, html body .store-subcategory-list a[aria-current="page"], html body .store-sort-list button[aria-pressed="true"]{ color:var(--fg)!important; font-weight:400!important; transform:none!important; } html body .store-category-nav a.is-active:is(:hover,:focus-visible), html body .store-subcategory-list a.is-active:is(:hover,:focus-visible), html body .store-sort-list button.is-active:is(:hover,:focus-visible), html body .store-subcategory-list a[aria-current="page"]:is(:hover,:focus-visible), html body .store-sort-list button[aria-pressed="true"]:is(:hover,:focus-visible){ color:var(--fg)!important; font-weight:400!important; transform:none!important; } /* ---------------------------------------------------------------------- 3) EDUCATION — remove legacy + / − and use the site's canonical quiet two-line disclosure mark everywhere inside educational pages. ---------------------------------------------------------------------- */ body.content-section-page #contentApp .v49-section details > summary::after, body.v90-education-item-page #contentApp .v49-section details > summary::after, body.v90-education-item-page #contentApp .v97-mobile-accordion-item > summary::after{ content:""!important; display:inline-block!important; visibility:visible!important; width:12px!important; height:10px!important; min-width:12px!important; flex:0 0 12px!important; margin:0!important; padding:0!important; border:0!important; color:currentColor!important; opacity:.78!important; transform:none!important; background: linear-gradient(currentColor,currentColor) 100% 2px/6px 1px no-repeat, linear-gradient(currentColor,currentColor) 100% 8px/11px 1px no-repeat!important; } body.content-section-page #contentApp .v49-section details[open] > summary::after, body.v90-education-item-page #contentApp .v49-section details[open] > summary::after, body.v90-education-item-page #contentApp .v97-mobile-accordion-item[open] > summary::after{ content:""!important; background: linear-gradient(currentColor,currentColor) 100% 2px/11px 1px no-repeat, linear-gradient(currentColor,currentColor) 100% 8px/6px 1px no-repeat!important; } /* ---------------------------------------------------------------------- 4) TREE DIAGRAMS — mathematical centre alignment. Spine and every diamond share exactly the same physical X coordinate. ---------------------------------------------------------------------- */ @media (min-width:721px){ /* About / company tree: 18px content inset, 7px node. 18 - 16 + 3.5 = 5.5px node centre; 5 + .5 = 5.5px spine centre. */ html[dir="rtl"] body .company-axis{ padding-left:0!important; padding-right:18px!important; } html[dir="rtl"] body .company-axis::before{ inset-inline-start:auto!important; inset-inline-end:auto!important; left:auto!important; right:5px!important; width:1px!important; } html[dir="rtl"] body .company-axis .practice-button::before{ inset-inline-start:auto!important; inset-inline-end:auto!important; left:auto!important; right:-16px!important; width:7px!important; height:7px!important; box-sizing:border-box!important; } html[dir="ltr"] body .company-axis{ padding-right:0!important; padding-left:18px!important; } html[dir="ltr"] body .company-axis::before{ inset-inline-start:auto!important; inset-inline-end:auto!important; right:auto!important; left:5px!important; width:1px!important; } html[dir="ltr"] body .company-axis .practice-button::before{ inset-inline-start:auto!important; inset-inline-end:auto!important; right:auto!important; left:-16px!important; width:7px!important; height:7px!important; box-sizing:border-box!important; } /* Learning-resource tree: 24px content inset, 7px node. 24 - 23 + 3.5 = 4.5px; spine centre = 4 + .5 = 4.5px. */ html[dir="rtl"] body #contentApp .learning-tree{ padding-left:0!important; padding-right:24px!important; } html[dir="rtl"] body #contentApp .learning-tree::before{ inset-inline-start:auto!important; inset-inline-end:auto!important; left:auto!important; right:4px!important; width:1px!important; } html[dir="rtl"] body #contentApp .learning-branch::before{ inset-inline-start:auto!important; inset-inline-end:auto!important; left:auto!important; right:-23px!important; width:7px!important; height:7px!important; box-sizing:border-box!important; } html[dir="ltr"] body #contentApp .learning-tree{ padding-right:0!important; padding-left:24px!important; } html[dir="ltr"] body #contentApp .learning-tree::before{ inset-inline-start:auto!important; inset-inline-end:auto!important; right:auto!important; left:4px!important; width:1px!important; } html[dir="ltr"] body #contentApp .learning-branch::before{ inset-inline-start:auto!important; inset-inline-end:auto!important; right:auto!important; left:-23px!important; width:7px!important; height:7px!important; box-sizing:border-box!important; } /* Current course-detail tree uses v115 class names; keep the exact same law. */ html[dir="rtl"] body #contentApp .v115-learning-tree{ padding-left:0!important; padding-right:24px!important; } html[dir="rtl"] body #contentApp .v115-learning-tree::before{ inset-inline-start:auto!important; inset-inline-end:auto!important; left:auto!important; right:4px!important; width:1px!important; } html[dir="rtl"] body #contentApp .v115-tree-branch::before{ inset-inline-start:auto!important; inset-inline-end:auto!important; left:auto!important; right:-23px!important; width:7px!important; height:7px!important; box-sizing:border-box!important; } html[dir="ltr"] body #contentApp .v115-learning-tree{ padding-right:0!important; padding-left:24px!important; } html[dir="ltr"] body #contentApp .v115-learning-tree::before{ inset-inline-start:auto!important; inset-inline-end:auto!important; right:auto!important; left:4px!important; width:1px!important; } html[dir="ltr"] body #contentApp .v115-tree-branch::before{ inset-inline-start:auto!important; inset-inline-end:auto!important; right:auto!important; left:-23px!important; width:7px!important; height:7px!important; box-sizing:border-box!important; } } /* ===== emkan-v157-precision.css ===== */ /* ====================================================================== EMKAN v157 — precision-only correction Scope is deliberately limited to: A) lower breadcrumb/back/context strip (mega-menu untouched) B) Store selected state C) Education disclosure glyphs + virtual lesson glyph D) About / education tree spine-node alignment ====================================================================== */ /* A) Context strip: one width/edge law for every internal page. The exact placement is also reinforced by v157 JS because these bars live inside parents with different widths across modules. */ @media (min-width:1280px){ } @media (min-width:901px) and (max-width:1279px){ } @media (min-width:901px){ } /* B) Store: hover can be accent, but an already-selected choice is normal foreground and normal weight — including while the pointer still sits on it. */ html body .emkan-store-filter-rail .store-category-nav a.is-active, html body .store-category-side .store-category-nav a.is-active, html body .store-category-side .store-subcategory-list a.is-active, html body .store-category-side .store-subcategory-list a[aria-current="page"], html body .store-category-side .store-sort-list button.is-active, html body .store-category-side .store-sort-list button[aria-pressed="true"], html body .emkan-store-filter-rail .store-sort-list button.is-active, html body .emkan-store-filter-rail .store-sort-list button[aria-pressed="true"]{ color:var(--fg)!important; font-weight:400!important; text-shadow:none!important; transform:none!important; } html body .emkan-store-filter-rail .store-category-nav a.is-active:is(:hover,:focus-visible), html body .store-category-side .store-category-nav a.is-active:is(:hover,:focus-visible), html body .store-category-side .store-subcategory-list a.is-active:is(:hover,:focus-visible), html body .store-category-side .store-sort-list button.is-active:is(:hover,:focus-visible), html body .emkan-store-filter-rail .store-sort-list button.is-active:is(:hover,:focus-visible){ color:var(--fg)!important; font-weight:400!important; } /* C1) Education FAQ/mobile accordions: remove legacy +/- completely and draw the same stepped two-line disclosure symbol used elsewhere in the site. */ html body.content-section-page #contentApp .v49-section details > summary::-webkit-details-marker, html body.v90-education-item-page #contentApp .v97-mobile-accordion-item > summary::-webkit-details-marker, html body.v115-course-detail #contentApp .v97-mobile-accordion-item > summary::-webkit-details-marker{display:none!important} html body.content-section-page #contentApp .v49-section details > summary::after, html body.v90-education-item-page #contentApp .v97-mobile-accordion-item > summary::after, html body.v115-course-detail #contentApp .v97-mobile-accordion-item > summary::after{ content:""!important; display:inline-block!important; visibility:visible!important; width:12px!important; height:10px!important; min-width:12px!important; flex:0 0 12px!important; margin:0!important; padding:0!important; border:0!important; color:currentColor!important; opacity:.78!important; transform:none!important; background: linear-gradient(currentColor,currentColor) 100% 2px/6px 1px no-repeat, linear-gradient(currentColor,currentColor) 100% 7px/11px 1px no-repeat!important; } html body.content-section-page #contentApp .v49-section details[open] > summary::after, html body.v90-education-item-page #contentApp .v97-mobile-accordion-item[open] > summary::after, html body.v115-course-detail #contentApp .v97-mobile-accordion-item[open] > summary::after{ content:""!important; background: linear-gradient(currentColor,currentColor) 100% 2px/11px 1px no-repeat, linear-gradient(currentColor,currentColor) 100% 7px/6px 1px no-repeat!important; } /* C2) Virtual-learning lessons use a real span, not summary::after. Convert its old plus/minus construction to the same stepped two-line symbol. */ html body.content-section-page #contentApp .emkan-v146-lesson-mark{ position:relative!important; display:inline-block!important; width:12px!important; height:10px!important; min-width:12px!important; flex:0 0 12px!important; color:currentColor!important; background:transparent!important; transform:none!important; } html body.content-section-page #contentApp .emkan-v146-lesson-mark::before, html body.content-section-page #contentApp .emkan-v146-lesson-mark::after{ content:""!important; display:block!important; position:absolute!important; right:0!important; left:auto!important; inset-inline-start:auto!important; inset-inline-end:auto!important; height:1px!important; background:currentColor!important; transform:none!important; opacity:.78!important; transition:width .22s cubic-bezier(.22,.61,.36,1)!important; } html body.content-section-page #contentApp .emkan-v146-lesson-mark::before{top:2px!important;width:6px!important} html body.content-section-page #contentApp .emkan-v146-lesson-mark::after{top:7px!important;width:11px!important} html body.content-section-page #contentApp details.emkan-v135-lesson[open] > summary .emkan-v146-lesson-mark::before{width:11px!important} html body.content-section-page #contentApp details.emkan-v135-lesson[open] > summary .emkan-v146-lesson-mark::after{width:6px!important;opacity:.78!important} /* D) TREE SYSTEM — one physical law per tree. The line centre and diamond centre are mathematically identical. Strong selectors intentionally beat the historical v83/v88/v91/v115 rules without changing surrounding layout. */ @media (min-width:721px){ /* About tree */ html[dir="rtl"] body .about-main .about-company-text-column .company-axis{ position:relative!important;padding-left:0!important;padding-right:18px!important } html[dir="rtl"] body .about-main .about-company-text-column .company-axis::before{ display:block!important;content:""!important;position:absolute!important; left:auto!important;right:5px!important;inset-inline-start:auto!important;inset-inline-end:auto!important; top:10px!important;bottom:10px!important;width:1px!important;height:auto!important;background:var(--line)!important } html[dir="rtl"] body .about-main .about-company-text-column .company-axis .practice-button::before{ display:block!important;content:""!important;position:absolute!important; left:auto!important;right:-16px!important;inset-inline-start:auto!important;inset-inline-end:auto!important; top:50%!important;width:7px!important;height:7px!important;box-sizing:border-box!important; transform:translateY(-50%) rotate(45deg)!important } html[dir="ltr"] body .about-main .about-company-text-column .company-axis{ position:relative!important;padding-right:0!important;padding-left:18px!important } html[dir="ltr"] body .about-main .about-company-text-column .company-axis::before{ display:block!important;content:""!important;position:absolute!important; right:auto!important;left:5px!important;inset-inline-start:auto!important;inset-inline-end:auto!important; top:10px!important;bottom:10px!important;width:1px!important;height:auto!important;background:var(--line)!important } html[dir="ltr"] body .about-main .about-company-text-column .company-axis .practice-button::before{ display:block!important;content:""!important;position:absolute!important; right:auto!important;left:-16px!important;inset-inline-start:auto!important;inset-inline-end:auto!important; top:50%!important;width:7px!important;height:7px!important;box-sizing:border-box!important; transform:translateY(-50%) rotate(45deg)!important } /* Legacy/current education rail tree */ html[dir="rtl"] body.content-section-page #contentApp .learning-side > .learning-tree, html[dir="rtl"] body.v90-education-item-page #contentApp .v69-content-search-rail > .learning-side.v90-rail-learning-side > .learning-tree{ position:relative!important;padding-left:0!important;padding-right:24px!important } html[dir="rtl"] body.content-section-page #contentApp .learning-side > .learning-tree::before, html[dir="rtl"] body.v90-education-item-page #contentApp .v69-content-search-rail > .learning-side.v90-rail-learning-side > .learning-tree::before{ display:block!important;content:""!important;position:absolute!important; left:auto!important;right:4px!important;inset-inline-start:auto!important;inset-inline-end:auto!important; top:11px!important;bottom:11px!important;width:1px!important;background:var(--line)!important } html[dir="rtl"] body.content-section-page #contentApp .learning-side .learning-branch::before, html[dir="rtl"] body.v90-education-item-page #contentApp .v69-content-search-rail > .learning-side.v90-rail-learning-side .learning-branch::before{ display:block!important;content:""!important;position:absolute!important; left:auto!important;right:-23px!important;inset-inline-start:auto!important;inset-inline-end:auto!important; top:50%!important;width:7px!important;height:7px!important;box-sizing:border-box!important; transform:translateY(-50%) rotate(45deg)!important } html[dir="ltr"] body.content-section-page #contentApp .learning-side > .learning-tree, html[dir="ltr"] body.v90-education-item-page #contentApp .v69-content-search-rail > .learning-side.v90-rail-learning-side > .learning-tree{ position:relative!important;padding-right:0!important;padding-left:24px!important } html[dir="ltr"] body.content-section-page #contentApp .learning-side > .learning-tree::before, html[dir="ltr"] body.v90-education-item-page #contentApp .v69-content-search-rail > .learning-side.v90-rail-learning-side > .learning-tree::before{ display:block!important;content:""!important;position:absolute!important; right:auto!important;left:4px!important;inset-inline-start:auto!important;inset-inline-end:auto!important; top:11px!important;bottom:11px!important;width:1px!important;background:var(--line)!important } html[dir="ltr"] body.content-section-page #contentApp .learning-side .learning-branch::before, html[dir="ltr"] body.v90-education-item-page #contentApp .v69-content-search-rail > .learning-side.v90-rail-learning-side .learning-branch::before{ display:block!important;content:""!important;position:absolute!important; right:auto!important;left:-23px!important;inset-inline-start:auto!important;inset-inline-end:auto!important; top:50%!important;width:7px!important;height:7px!important;box-sizing:border-box!important; transform:translateY(-50%) rotate(45deg)!important } /* Current v115 tree */ html[dir="rtl"] body.v115-course-detail #contentApp .v115-tree-side .v115-learning-tree{ position:relative!important;padding-left:0!important;padding-right:24px!important } html[dir="rtl"] body.v115-course-detail #contentApp .v115-tree-side .v115-learning-tree::before{ display:block!important;content:""!important;position:absolute!important; left:auto!important;right:4px!important;inset-inline-start:auto!important;inset-inline-end:auto!important; top:11px!important;bottom:11px!important;width:1px!important;background:var(--line)!important } html[dir="rtl"] body.v115-course-detail #contentApp .v115-tree-side .v115-tree-branch::before{ display:block!important;content:""!important;position:absolute!important; left:auto!important;right:-23px!important;inset-inline-start:auto!important;inset-inline-end:auto!important; top:50%!important;width:7px!important;height:7px!important;box-sizing:border-box!important; transform:translateY(-50%) rotate(45deg)!important } html[dir="ltr"] body.v115-course-detail #contentApp .v115-tree-side .v115-learning-tree{ position:relative!important;padding-right:0!important;padding-left:24px!important } html[dir="ltr"] body.v115-course-detail #contentApp .v115-tree-side .v115-learning-tree::before{ display:block!important;content:""!important;position:absolute!important; right:auto!important;left:4px!important;inset-inline-start:auto!important;inset-inline-end:auto!important; top:11px!important;bottom:11px!important;width:1px!important;background:var(--line)!important } html[dir="ltr"] body.v115-course-detail #contentApp .v115-tree-side .v115-tree-branch::before{ display:block!important;content:""!important;position:absolute!important; right:auto!important;left:-23px!important;inset-inline-start:auto!important;inset-inline-end:auto!important; top:50%!important;width:7px!important;height:7px!important;box-sizing:border-box!important; transform:translateY(-50%) rotate(45deg)!important } } /* ===== emkan-v158-final-corrections.css ===== */ /* ====================================================================== EMKAN v158 — ONLY the three requested corrections 1) Internal R&D / Content context strip geometry 2) Tree diagrams geometry 3) Store filter/category hover + selected state Mega-menu and every other site area are intentionally untouched. ====================================================================== */ /* ---------------------------------------------------------------------- 1) INTERNAL R&D / CONTENT CONTEXT STRIPS These pages mount the breadcrumb/back bar inside narrower centered parents. The rule below converts the viewport target (same geometry already correct elsewhere) into a parent-relative physical left margin. ---------------------------------------------------------------------- */ @media (min-width:1280px){ } @media (min-width:901px) and (max-width:1279px){ } @media (min-width:901px){ } /* ---------------------------------------------------------------------- 2) TREE DIAGRAMS One law for all existing desktop tree variants: - 24px reserved node rail - spine at 5px from the outer edge - 7px diamond centre exactly on the spine - no legacy li/branch connector marks ---------------------------------------------------------------------- */ @media (min-width:721px){ /* ABOUT tree */ html body .about-main .about-company-text-column .company-axis{ position:relative!important; display:flex!important; flex-direction:column!important; grid-template-columns:none!important; gap:0!important; width:min(100%,210px)!important; max-width:210px!important; min-width:0!important; padding-top:0!important; padding-bottom:0!important; margin-top:20px!important; overflow:visible!important; } html[dir="rtl"] body .about-main .about-company-text-column .company-axis{ padding-left:0!important; padding-right:24px!important; } html[dir="ltr"] body .about-main .about-company-text-column .company-axis{ padding-right:0!important; padding-left:24px!important; } html body .about-main .about-company-text-column .company-axis::before{ content:""!important; display:block!important; position:absolute!important; top:22px!important; bottom:22px!important; width:1px!important; height:auto!important; background:var(--line)!important; z-index:0!important; } html[dir="rtl"] body .about-main .about-company-text-column .company-axis::before{ right:5px!important;left:auto!important;inset-inline:auto!important; } html[dir="ltr"] body .about-main .about-company-text-column .company-axis::before{ left:5px!important;right:auto!important;inset-inline:auto!important; } html body .about-main .about-company-text-column .company-axis li{ position:relative!important; display:block!important; width:100%!important; min-width:0!important; min-height:44px!important; margin:0!important; padding:0!important; border:0!important; } html body .about-main .about-company-text-column .company-axis li::before, html body .about-main .about-company-text-column .company-axis li::after, html body .about-main .about-company-text-column .company-axis .axis-line{ content:none!important; display:none!important; } html body .about-main .about-company-text-column .company-axis .practice-button{ position:relative!important; display:flex!important; align-items:center!important; width:100%!important; min-width:0!important; min-height:44px!important; margin:0!important; padding:0!important; border:0!important; background:transparent!important; box-shadow:none!important; } html[dir="rtl"] body .about-main .about-company-text-column .company-axis .practice-button{ justify-content:flex-start!important; text-align:right!important; } html[dir="ltr"] body .about-main .about-company-text-column .company-axis .practice-button{ justify-content:flex-start!important; text-align:left!important; } html body .about-main .about-company-text-column .company-axis .practice-button::before{ content:""!important; display:block!important; position:absolute!important; top:50%!important; width:7px!important; height:7px!important; box-sizing:border-box!important; border:1px solid var(--line)!important; background:var(--bg)!important; transform:translateY(-50%) rotate(45deg)!important; transform-origin:center!important; z-index:2!important; } html[dir="rtl"] body .about-main .about-company-text-column .company-axis .practice-button::before{ right:-22px!important;left:auto!important;inset-inline:auto!important; } html[dir="ltr"] body .about-main .about-company-text-column .company-axis .practice-button::before{ left:-22px!important;right:auto!important;inset-inline:auto!important; } html body .about-main .about-company-text-column .company-axis .practice-button::after{ content:none!important;display:none!important; } html body .about-main .about-company-text-column .company-axis .practice-button .axis-name{ display:block!important; width:100%!important; margin:0!important; padding:0!important; white-space:normal!important; overflow:visible!important; font-size:11px!important; line-height:1.65!important; } html[dir="rtl"] body .about-main .about-company-text-column .company-axis .practice-button .axis-name{text-align:right!important} html[dir="ltr"] body .about-main .about-company-text-column .company-axis .practice-button .axis-name{text-align:left!important} html body .about-main .about-company-text-column .company-axis .practice-button:is(:hover,:focus-visible,.is-active)::before{ border-color:var(--hover-accent)!important; } html body .about-main .about-company-text-column .company-axis .practice-button.is-active::before{ background:var(--hover-accent)!important; } /* EDUCATION trees — legacy/current and v115 detail */ html body #contentApp :is(.learning-tree,.v115-learning-tree){ position:relative!important; display:flex!important; flex-direction:column!important; grid-template-columns:none!important; gap:0!important; width:100%!important; min-width:0!important; max-width:none!important; margin:0!important; overflow:visible!important; } html[dir="rtl"] body #contentApp :is(.learning-tree,.v115-learning-tree){ padding:0 24px 0 0!important; } html[dir="ltr"] body #contentApp :is(.learning-tree,.v115-learning-tree){ padding:0 0 0 24px!important; } html body #contentApp :is(.learning-tree,.v115-learning-tree)::before{ content:""!important; display:block!important; position:absolute!important; top:22px!important; bottom:22px!important; width:1px!important; height:auto!important; background:var(--line)!important; z-index:0!important; } html[dir="rtl"] body #contentApp :is(.learning-tree,.v115-learning-tree)::before{ right:5px!important;left:auto!important;inset-inline:auto!important; } html[dir="ltr"] body #contentApp :is(.learning-tree,.v115-learning-tree)::before{ left:5px!important;right:auto!important;inset-inline:auto!important; } html body #contentApp :is(.learning-branch,.v115-tree-branch){ position:relative!important; display:flex!important; align-items:center!important; width:100%!important; min-width:0!important; min-height:44px!important; margin:0!important; padding:7px 0!important; border:0!important; background:transparent!important; transform:none!important; white-space:normal!important; overflow:visible!important; overflow-wrap:break-word!important; line-height:1.7!important; } html[dir="rtl"] body #contentApp :is(.learning-branch,.v115-tree-branch){text-align:right!important;justify-content:flex-start!important} html[dir="ltr"] body #contentApp :is(.learning-branch,.v115-tree-branch){text-align:left!important;justify-content:flex-start!important} html body #contentApp :is(.learning-branch,.v115-tree-branch)::before{ content:""!important; display:block!important; position:absolute!important; top:50%!important; width:7px!important; height:7px!important; box-sizing:border-box!important; border:1px solid var(--line)!important; background:var(--bg)!important; transform:translateY(-50%) rotate(45deg)!important; transform-origin:center!important; z-index:2!important; } html[dir="rtl"] body #contentApp :is(.learning-branch,.v115-tree-branch)::before{ right:-22px!important;left:auto!important;inset-inline:auto!important; } html[dir="ltr"] body #contentApp :is(.learning-branch,.v115-tree-branch)::before{ left:-22px!important;right:auto!important;inset-inline:auto!important; } html body #contentApp :is(.learning-branch,.v115-tree-branch)::after{ content:none!important; display:none!important; } html body #contentApp :is(.learning-branch,.v115-tree-branch):is(:hover,:focus-visible,.is-active){ color:var(--hover-accent)!important; } html body #contentApp :is(.learning-branch,.v115-tree-branch):is(:hover,:focus-visible,.is-active)::before{ border-color:var(--hover-accent)!important; } html body #contentApp :is(.learning-branch,.v115-tree-branch).is-active::before{ background:var(--hover-accent)!important; } } /* Preserve the existing mobile accordion/grid behavior; tree rail is desktop-only. */ @media (max-width:720px){ html body #contentApp :is(.learning-tree,.v115-learning-tree)::before, html body #contentApp :is(.learning-branch,.v115-tree-branch)::before{ display:none!important; content:none!important; } } /* ---------------------------------------------------------------------- 3) STORE FILTER/CATEGORY INTERACTION Resting item = normal. Hover/focus = accent only while pointer/focus is on it. Selected after click = bold foreground/black. Selected + hovered = accent but stays bold; when pointer leaves it is black. ---------------------------------------------------------------------- */ html body .store-category-side :is( .store-category-nav a, .store-subcategory-list a, .store-sort-list button ){ color:var(--category-muted,var(--fg))!important; font-weight:400!important; text-shadow:none!important; transform:none!important; } html body .store-category-side :is( .store-category-nav a, .store-subcategory-list a, .store-sort-list button ):is(:hover,:focus-visible){ color:var(--hover-accent)!important; font-weight:400!important; transform:none!important; } html body .store-category-side :is( .store-category-nav a.is-active, .store-subcategory-list a.is-active, .store-subcategory-list a[aria-current="page"], .store-sort-list button.is-active, .store-sort-list button[aria-pressed="true"] ){ color:var(--fg)!important; font-weight:700!important; text-shadow:none!important; transform:none!important; } html body .store-category-side :is( .store-category-nav a.is-active, .store-subcategory-list a.is-active, .store-subcategory-list a[aria-current="page"], .store-sort-list button.is-active, .store-sort-list button[aria-pressed="true"] ):is(:hover,:focus-visible){ color:var(--hover-accent)!important; font-weight:700!important; } /* ===== emkan-v164-canonical-context-tree.css ===== */ /* ====================================================================== EMKAN v164 — canonical context strip + canonical tree geometry This file intentionally owns ONLY these two UI systems. ====================================================================== */ :root{ --emkan-context-edge:112px; --emkan-context-row-height:38px; --emkan-context-row-gap:14px; --emkan-tree-inset:24px; --emkan-tree-spine:4px; --emkan-tree-node:7px; --emkan-tree-row:32px; } /* ---------------------------------------------------------------------- A) ONE context strip. Legacy bars are data sources only and are hidden by JS with inline !important. This is the only visible strip. ---------------------------------------------------------------------- */ html body .page-shell > .emkan-v164-context-portal{ box-sizing:border-box!important; position:relative!important; z-index:80!important; display:flex!important; align-items:center!important; justify-content:space-between!important; gap:24px!important; direction:ltr!important; height:var(--emkan-context-row-height)!important; min-height:var(--emkan-context-row-height)!important; max-height:var(--emkan-context-row-height)!important; margin-top:0!important; margin-bottom:var(--emkan-context-row-gap)!important; margin-left:calc(var(--emkan-context-edge) - var(--page-pad))!important; margin-right:calc(var(--emkan-context-edge) - var(--page-pad))!important; padding:0!important; border:0!important; border-bottom:1px solid var(--line)!important; background:transparent!important; box-shadow:none!important; overflow:visible!important; width:calc(100% + (2 * var(--page-pad)) - (2 * var(--emkan-context-edge)))!important; max-width:none!important; min-width:0!important; left:auto!important; right:auto!important; transform:none!important; pointer-events:auto!important; } html body .page-shell > .emkan-v164-context-portal.is-project-context{margin-bottom:0!important} html body .emkan-v164-context-path, html body .emkan-v164-context-back{ box-sizing:border-box!important; position:static!important; inset:auto!important; transform:none!important; margin:0!important; padding:0!important; width:auto!important; height:100%!important; min-width:0!important; max-width:100%!important; display:flex!important; align-items:center!important; background:transparent!important; border:0!important; box-shadow:none!important; line-height:1.55!important; white-space:nowrap!important; text-decoration:none!important; color:var(--muted,#707981)!important; font-weight:400!important; opacity:.86!important; cursor:pointer!important; pointer-events:auto!important; touch-action:manipulation!important; -webkit-tap-highlight-color:transparent!important; } html body .emkan-v164-context-path{ flex:1 1 auto!important; overflow:hidden!important; text-overflow:ellipsis!important; font-size:11.5px!important; } html body .emkan-v164-context-back{ flex:0 0 auto!important; font-size:10.5px!important; } /* FA/AR: address at start/right, back at end/left. */ html[lang="fa"] body .emkan-v164-context-path, html[lang="ar"] body .emkan-v164-context-path{ order:2!important; direction:rtl!important; text-align:right!important; justify-content:flex-start!important; } html[lang="fa"] body .emkan-v164-context-back, html[lang="ar"] body .emkan-v164-context-back{ order:1!important; direction:rtl!important; text-align:left!important; justify-content:flex-start!important; } /* EN: address at start/left, back at end/right. Geometry is identical. */ html[lang="en"] body .emkan-v164-context-path{ order:1!important; direction:ltr!important; text-align:left!important; justify-content:flex-start!important; } html[lang="en"] body .emkan-v164-context-back{ order:2!important; direction:ltr!important; text-align:right!important; justify-content:flex-end!important; } html body .emkan-v164-context-path:hover, html body .emkan-v164-context-path:focus-visible, html body .emkan-v164-context-back:hover, html body .emkan-v164-context-back:focus-visible{ color:var(--hover-accent,var(--accent,#6f9fb2))!important; opacity:1!important; outline:0!important; } @media (min-width:901px) and (max-width:1279px){:root{--emkan-context-edge:148px}} @media (max-width:900px){ :root{--emkan-context-edge:16px;--emkan-context-row-height:42px;--emkan-context-row-gap:12px} html body .page-shell > .emkan-v164-context-portal{ width:calc(100% + (2 * var(--page-pad)) - 32px)!important; gap:12px!important; } html body .emkan-v164-context-path{font-size:10.5px!important} html body .emkan-v164-context-back{font-size:10px!important} } /* ---------------------------------------------------------------------- B) ONE vertical tree system. All old li/button connector pseudos are neutralized. Only the canonical container spine + canonical item diamond remain visible. ---------------------------------------------------------------------- */ @media (min-width:721px){ /* Learning trees (all education/readings/course subtrees). */ html body #contentApp#contentApp .emkan-v164-tree[data-emkan-v164-tree="1"]{ box-sizing:border-box!important; position:relative!important; display:block!important; margin:0!important; border:0!important; background:transparent!important; list-style:none!important; min-width:0!important; } html[lang="fa"] body #contentApp#contentApp .emkan-v164-tree[data-emkan-v164-tree="1"], html[lang="ar"] body #contentApp#contentApp .emkan-v164-tree[data-emkan-v164-tree="1"]{ direction:rtl!important; text-align:right!important; padding:0 var(--emkan-tree-inset) 0 0!important; } html[lang="en"] body #contentApp#contentApp .emkan-v164-tree[data-emkan-v164-tree="1"]{ direction:ltr!important; text-align:left!important; padding:0 0 0 var(--emkan-tree-inset)!important; } html body #contentApp#contentApp .emkan-v164-tree[data-emkan-v164-tree="1"]::before{ content:""!important; display:block!important; position:absolute!important; z-index:0!important; top:calc(var(--emkan-tree-row) / 2)!important; bottom:calc(var(--emkan-tree-row) / 2)!important; width:1px!important; height:auto!important; background:var(--line)!important; border:0!important; transform:none!important; opacity:1!important; pointer-events:none!important; } html[lang="fa"] body #contentApp#contentApp .emkan-v164-tree[data-emkan-v164-tree="1"]::before, html[lang="ar"] body #contentApp#contentApp .emkan-v164-tree[data-emkan-v164-tree="1"]::before{right:var(--emkan-tree-spine)!important;left:auto!important} html[lang="en"] body #contentApp#contentApp .emkan-v164-tree[data-emkan-v164-tree="1"]::before{left:var(--emkan-tree-spine)!important;right:auto!important} html body #contentApp#contentApp .emkan-v164-tree[data-emkan-v164-tree="1"]::after{content:none!important;display:none!important} /* About tree. */ html body .about-main.about-main .about-company-text-column .company-axis.emkan-v164-tree[data-emkan-v164-tree="1"]{ box-sizing:border-box!important; position:relative!important; display:block!important; margin:0!important; border:0!important; background:transparent!important; list-style:none!important; min-width:0!important; } html[lang="fa"] body .about-main.about-main .about-company-text-column .company-axis.emkan-v164-tree[data-emkan-v164-tree="1"], html[lang="ar"] body .about-main.about-main .about-company-text-column .company-axis.emkan-v164-tree[data-emkan-v164-tree="1"]{ direction:rtl!important;text-align:right!important;padding:0 var(--emkan-tree-inset) 0 0!important; } html[lang="en"] body .about-main.about-main .about-company-text-column .company-axis.emkan-v164-tree[data-emkan-v164-tree="1"]{ direction:ltr!important;text-align:left!important;padding:0 0 0 var(--emkan-tree-inset)!important; } html body .about-main.about-main .about-company-text-column .company-axis.emkan-v164-tree[data-emkan-v164-tree="1"]::before{ content:""!important;display:block!important;position:absolute!important;z-index:0!important; top:calc(var(--emkan-tree-row) / 2)!important;bottom:calc(var(--emkan-tree-row) / 2)!important; width:1px!important;height:auto!important;background:var(--line)!important;border:0!important; transform:none!important;opacity:1!important;pointer-events:none!important; } html[lang="fa"] body .about-main.about-main .about-company-text-column .company-axis.emkan-v164-tree[data-emkan-v164-tree="1"]::before, html[lang="ar"] body .about-main.about-main .about-company-text-column .company-axis.emkan-v164-tree[data-emkan-v164-tree="1"]::before{right:var(--emkan-tree-spine)!important;left:auto!important} html[lang="en"] body .about-main.about-main .about-company-text-column .company-axis.emkan-v164-tree[data-emkan-v164-tree="1"]::before{left:var(--emkan-tree-spine)!important;right:auto!important} html body .about-main.about-main .about-company-text-column .company-axis.emkan-v164-tree[data-emkan-v164-tree="1"]::after{content:none!important;display:none!important} /* Kill ALL legacy connector pseudos on wrappers. */ html body #contentApp#contentApp .emkan-v164-tree[data-emkan-v164-tree="1"] > li::before, html body #contentApp#contentApp .emkan-v164-tree[data-emkan-v164-tree="1"] > li::after, html body .about-main.about-main .about-company-text-column .company-axis.emkan-v164-tree[data-emkan-v164-tree="1"] > li::before, html body .about-main.about-main .about-company-text-column .company-axis.emkan-v164-tree[data-emkan-v164-tree="1"] > li::after{ content:none!important;display:none!important;border:0!important;background:none!important;box-shadow:none!important; } html body #contentApp#contentApp .emkan-v164-tree[data-emkan-v164-tree="1"] > li, html body .about-main.about-main .about-company-text-column .company-axis.emkan-v164-tree[data-emkan-v164-tree="1"] > li{ position:relative!important;margin:0!important;padding:0!important;border:0!important;min-height:0!important;list-style:none!important; } /* Canonical item geometry. */ html body #contentApp#contentApp .emkan-v164-tree[data-emkan-v164-tree="1"] > .emkan-v164-tree-item, html body #contentApp#contentApp .emkan-v164-tree[data-emkan-v164-tree="1"] > li > .emkan-v164-tree-item, html body .about-main.about-main .about-company-text-column .company-axis.emkan-v164-tree[data-emkan-v164-tree="1"] > li > .emkan-v164-tree-item{ box-sizing:border-box!important; position:relative!important; z-index:1!important; width:100%!important; min-width:0!important; min-height:var(--emkan-tree-row)!important; margin:0!important; padding:6px 0!important; border:0!important; background:transparent!important; box-shadow:none!important; display:flex!important; align-items:center!important; justify-content:flex-start!important; line-height:1.65!important; transform:none!important; white-space:normal!important; overflow:visible!important; } html[lang="fa"] body .emkan-v164-tree-item, html[lang="ar"] body .emkan-v164-tree-item{direction:rtl!important;text-align:right!important} html[lang="en"] body .emkan-v164-tree-item{direction:ltr!important;text-align:left!important} /* One and only one diamond per item. */ html body #contentApp#contentApp .emkan-v164-tree[data-emkan-v164-tree="1"] .emkan-v164-tree-item::before, html body .about-main.about-main .about-company-text-column .company-axis.emkan-v164-tree[data-emkan-v164-tree="1"] .emkan-v164-tree-item::before{ content:""!important; display:block!important; position:absolute!important; z-index:3!important; top:50%!important; width:var(--emkan-tree-node)!important; height:var(--emkan-tree-node)!important; box-sizing:border-box!important; margin:0!important; padding:0!important; border:1px solid var(--muted,#8d959c)!important; background:var(--bg)!important; box-shadow:none!important; transform:translateY(-50%) rotate(45deg)!important; opacity:1!important; pointer-events:none!important; } html[lang="fa"] body #contentApp#contentApp .emkan-v164-tree[data-emkan-v164-tree="1"] .emkan-v164-tree-item::before, html[lang="ar"] body #contentApp#contentApp .emkan-v164-tree[data-emkan-v164-tree="1"] .emkan-v164-tree-item::before, html[lang="fa"] body .about-main.about-main .about-company-text-column .company-axis.emkan-v164-tree[data-emkan-v164-tree="1"] .emkan-v164-tree-item::before, html[lang="ar"] body .about-main.about-main .about-company-text-column .company-axis.emkan-v164-tree[data-emkan-v164-tree="1"] .emkan-v164-tree-item::before{ right:calc(-1 * (var(--emkan-tree-inset) - var(--emkan-tree-spine) + (var(--emkan-tree-node) / 2) - .5px))!important; left:auto!important; } html[lang="en"] body #contentApp#contentApp .emkan-v164-tree[data-emkan-v164-tree="1"] .emkan-v164-tree-item::before, html[lang="en"] body .about-main.about-main .about-company-text-column .company-axis.emkan-v164-tree[data-emkan-v164-tree="1"] .emkan-v164-tree-item::before{ left:calc(-1 * (var(--emkan-tree-inset) - var(--emkan-tree-spine) + (var(--emkan-tree-node) / 2) - .5px))!important; right:auto!important; } html body #contentApp#contentApp .emkan-v164-tree[data-emkan-v164-tree="1"] .emkan-v164-tree-item::after, html body .about-main.about-main .about-company-text-column .company-axis.emkan-v164-tree[data-emkan-v164-tree="1"] .emkan-v164-tree-item::after{ content:none!important;display:none!important;background:none!important;border:0!important; } html body .emkan-v164-tree-item .axis-line{display:none!important} html body .emkan-v164-tree-item:is(.is-active,[aria-selected="true"]){color:var(--hover-accent)!important} html body .emkan-v164-tree-item:is(.is-active,[aria-selected="true"])::before{ background:var(--hover-accent)!important;border-color:var(--hover-accent)!important; } html body .emkan-v164-tree-item:is(:hover,:focus-visible)::before{border-color:var(--hover-accent)!important} } /* v166: scoped repairs. Preserve existing colors, typography and mobile layout. */ @media(min-width:721px){ html body #contentApp#contentApp .emkan-v164-tree[data-emkan-v164-tree="1"] .emkan-v164-tree-item:is(:hover,:focus-visible,.is-active,[aria-selected="true"])::before, html body .about-main.about-main .about-company-text-column .company-axis.emkan-v164-tree[data-emkan-v164-tree="1"] .emkan-v164-tree-item:is(:hover,:focus-visible,.is-active,[aria-selected="true"])::before{ background:var(--hover-accent,var(--fg))!important;border-color:var(--hover-accent,var(--fg))!important; } } html body .emkan-v164-context-path{cursor:default!important;gap:5px!important} html body .emkan-v164-context-path a{color:inherit;text-decoration:none;pointer-events:auto;flex-shrink:0} html body .emkan-v164-context-path a:is(:hover,:focus-visible){color:var(--hover-accent)!important;text-decoration:underline} html body .emkan-v164-context-path a:focus-visible,html body .emkan-v164-context-back:focus-visible{outline:1px solid currentColor!important;outline-offset:3px!important} /* Keep the existing two-line icon, suppress duplicate generated markers. */ html body #contentApp#contentApp details>summary:has(:is(.emkan-v146-lesson-mark,.emkan-v148-disclosure-mark,.emkan-v147-disclosure-mark,.emkan-v133-disclosure-mark,.emkan-v132-disclosure-mark,.emkan-v131-disclosure-mark,.emkan-disclosure-mark,.v49-filter-chevron))::before, html body #contentApp#contentApp details>summary:has(:is(.emkan-v146-lesson-mark,.emkan-v148-disclosure-mark,.emkan-v147-disclosure-mark,.emkan-v133-disclosure-mark,.emkan-v132-disclosure-mark,.emkan-v131-disclosure-mark,.emkan-disclosure-mark,.v49-filter-chevron))::after{content:none!important;display:none!important} html body #contentApp#contentApp details>summary{list-style:none!important} html body #contentApp#contentApp details>summary::marker{content:""!important} html body #contentApp#contentApp details>summary::-webkit-details-marker{display:none!important} @media(min-width:901px){ html body .architecture-main .gallery-items-container{row-gap:20px!important;align-content:start!important;grid-auto-rows:max-content!important} html body:is(.emkan-v166-four,.emkan-v166-graphic) #contentApp .v74-level2-wrap{width:100%!important;padding-top:clamp(28px,4vh,44px)!important} html body.emkan-v166-four #contentApp .v74-level2-grid{width:100%!important;grid-template-columns:repeat(4,minmax(0,192px))!important;gap:24px!important;justify-content:center!important} html body.emkan-v166-four #contentApp .v74-level2-grid :is(.category-card,.category-square){width:100%!important;max-width:192px!important;height:auto!important;aspect-ratio:auto!important} html body.emkan-v166-four #contentApp .v74-level2-grid .category-square{aspect-ratio:1!important} html body.emkan-v166-graphic #contentApp .v74-level2-grid{--compact-card:clamp(100px,calc((100vh - 300px)/2),192px);width:100%!important;grid-template-columns:repeat(3,minmax(0,var(--compact-card)))!important;gap:16px 32px!important;justify-content:center!important} html body.emkan-v166-graphic #contentApp .v74-level2-grid :is(.category-card,.category-square){width:100%!important;max-width:var(--compact-card)!important;height:auto!important} html body.emkan-v166-graphic #contentApp .v74-level2-grid .category-square{aspect-ratio:1!important} html body:is(.emkan-v142-civil-landing,.emkan-v142-research-landing) .module-main{padding-top:clamp(32px,5vh,52px)!important} html body.content-section-page:not(.emkan-v166-four):not(.emkan-v166-graphic) #contentApp .v74-level2-wrap{padding-top:clamp(28px,4vh,44px)!important} } html body #contentApp#contentApp summary:has(>.emkan-v148-disclosure-mark) :is(.emkan-v146-lesson-mark,.emkan-v147-disclosure-mark,.emkan-disclosure-mark,.category-chevron,.detail-subcategory-chevron,.v49-filter-chevron){display:none!important} /* v167: readable, independent breadcrumb links without inherited hidden markup. */ html body .emkan-v164-context-path{overflow-x:auto!important;overflow-y:hidden!important;text-overflow:clip!important;scrollbar-width:thin;white-space:nowrap!important;gap:5px!important} html body .emkan-v164-context-path>.emkan-v167-crumb{display:inline-block!important;flex:0 0 auto!important;visibility:visible!important;max-width:none!important;color:inherit;background:none;border:0;padding:0;margin:0;font:inherit} html body .emkan-v164-context-path>.emkan-v167-crumb-sep{display:inline-block!important;flex:0 0 auto!important;opacity:.6} html body .page-shell>.emkan-v164-context-portal[hidden]{display:none!important} /* ===== emkan-v168-final.css ===== */ /* v168: a single outer content rail, preserving internal page layouts. */ :root{--emkan-content-width:min(1280px,calc(100vw - 224px))} @media(min-width:901px) and (max-width:1279px){:root{--emkan-content-width:calc(100vw - 96px)}} @media(max-width:900px){:root{--emkan-content-width:calc(100vw - 32px)}} html body .page-shell > main:not(.welcome):not(.menu-page), html body .page-shell > .emkan-v164-context-portal{ box-sizing:border-box!important;width:var(--emkan-content-width)!important;max-width:var(--emkan-content-width)!important;min-width:0!important; margin-left:calc((100% - var(--emkan-content-width))/2)!important;margin-right:calc((100% - var(--emkan-content-width))/2)!important; left:auto!important;right:auto!important;transform:none!important; } html body .page-shell > main.detail-main, html body .page-shell > main.articles-main, html body .page-shell > main.article-page{padding-inline:0!important} .emkan-v168-deadline{display:flex;align-items:center;gap:6px;margin:10px 0;font-size:11px;line-height:1.8;color:var(--muted,var(--fg));font-weight:400;white-space:normal} .emkan-v168-clock{display:inline-block;width:13px;height:13px;flex:0 0 13px;vertical-align:-2px;color:inherit} .v49-facts dt .emkan-v168-clock{margin-inline-end:5px} .category-card>.emkan-v168-deadline{font-size:10px;margin-block:5px 0;justify-content:center} /* Detail dividers reach the same outer rail in civil and research pages. */ html body .page-shell > main.detail-main > .detail-layout, html body .page-shell > main.detail-main .civil-entry-detail, html body .page-shell > main.detail-main .research-entry-detail{ width:100%!important;max-width:100%!important;margin-inline:0!important;box-sizing:border-box!important; } /* v169: independent breadcrumb hover, gallery and sample breathing room. */ html body .emkan-v164-context-path:is(:hover,:focus-visible){color:var(--muted,#707981)!important;opacity:.86!important} html body .emkan-v164-context-path > a.emkan-v167-crumb:is(:hover,:focus-visible){color:var(--hover-accent,var(--accent,#6f9fb2))!important;opacity:1!important;text-decoration:underline!important} html body.content-section-page #contentApp > .v74-sample-index, html body.content-section-page #contentApp > .v73-sample-detail, html body.content-section-page #contentApp > .v71-sample-detail{padding-top:clamp(28px,4vh,44px)!important} html body.content-section-page #contentApp .v73-sample-main{cursor:zoom-in} html body.content-section-page #contentApp .v73-sample-thumb{cursor:pointer} /* v170: individual colour-only breadcrumb feedback. */ html body .emkan-v164-context-path > a.emkan-v167-crumb, html body .emkan-v164-context-path > a.emkan-v167-crumb:is(:hover,:focus-visible){text-decoration:none!important} .emkan-v168-clock,.emkan-v168-deadline{display:none!important} html body #contentApp #registrationApp[data-closed="1"]{display:block!important} /* Registration steps mirror the restrained product tabs. */ html body #contentApp#contentApp .v49-progress{ display:flex!important;flex-wrap:nowrap!important;justify-content:flex-start!important;align-items:stretch!important; gap:clamp(16px,3vw,36px)!important;width:100%!important;box-sizing:border-box!important; border-top:1px solid var(--line)!important;border-bottom:1px solid var(--line)!important; padding:0!important;margin:18px 0 24px!important;list-style:none!important; } html body #contentApp#contentApp .v49-progress li{ position:relative!important;display:flex!important;align-items:center!important;min-height:44px!important; padding:0 0 1px!important;margin:0 0 -1px!important;border:0!important;border-bottom:1px solid transparent!important; font-size:11px!important;font-weight:400!important;line-height:1.7!important;white-space:normal!important;background:none!important;color:var(--fg)!important; } html body #contentApp#contentApp .v49-progress li::before, html body #contentApp#contentApp .v49-progress li::after{content:none!important;display:none!important} html body #contentApp#contentApp .v49-progress li[aria-current="step"]{color:var(--hover-accent,var(--accent))!important;border-bottom-color:currentColor!important} /* Exclude both architectural and civil single-project viewers entirely. */ html body:not(:has(main.project-main)) main :is(.category-square,.img-wrapper,.v73-sample-main,.v73-sample-thumb,.v106-course-thumb,.emkan-related-media,.product-main-image,.product-thumb,.store-card-media){overflow:hidden!important} html body:not(:has(main.project-main)) main img:not(.emkan-no-hover){ filter:grayscale(1)!important;transform:scale(1)!important;transform-origin:center!important; transition:filter .35s ease,transform .35s ease!important;backface-visibility:hidden; } html body:not(:has(main.project-main)) main img:not(.emkan-no-hover):hover, html body:not(:has(main.project-main)) main :is(.category-card,.gallery-item,.v73-sample-thumb,.product-thumb,.emkan-related-item):hover img{ filter:grayscale(0)!important;transform:scale(1.025)!important; } html body:not(:has(main.project-main)) main :is(.category-card,.gallery-item,.v73-sample-thumb,.product-thumb,.emkan-related-item):hover{transform:none!important} @media(prefers-reduced-motion:reduce){html body:not(:has(main.project-main)) main img{transition:none!important}} /* v171: sample galleries use the exact store gallery measurements. */ html body #contentApp#contentApp .v73-sample-gallery, html[dir="ltr"] body #contentApp#contentApp .v73-sample-gallery{ display:grid!important; grid-template-columns:52px minmax(0,1fr)!important; grid-template-areas:"thumbs hero"!important; gap:10px!important; align-items:start!important; width:min(100%,430px)!important; max-width:430px!important; margin-inline:auto!important; } html body #contentApp#contentApp .v73-sample-main{ grid-area:hero!important; width:min(100%,350px)!important; max-width:350px!important; aspect-ratio:1/1!important; margin-inline:auto!important; align-self:start!important; overflow:hidden!important; border:1px solid var(--line)!important; background:var(--panel)!important; } html body #contentApp#contentApp .v73-sample-main img{ width:100%!important; height:100%!important; object-fit:contain!important; object-position:center!important; display:block!important; } html body #contentApp#contentApp .v73-sample-thumbs{ grid-area:thumbs!important; display:grid!important; grid-template-columns:1fr!important; grid-auto-rows:52px!important; gap:7px!important; margin:0!important; padding:0!important; align-content:start!important; } html body #contentApp#contentApp .v73-sample-thumb{ width:52px!important; height:52px!important; min-width:52px!important; aspect-ratio:1/1!important; margin:0!important; padding:0!important; border:1px solid var(--line)!important; background:transparent!important; overflow:hidden!important; } html body #contentApp#contentApp .v73-sample-thumb img{ width:100%!important; height:100%!important; object-fit:cover!important; object-position:center!important; display:block!important; } html body #contentApp#contentApp .v73-sample-gallery{direction:inherit!important} html body:not(:has(main.project-main)) main :is(.product-main-image,.v73-sample-main,.v106-course-gallery-main){position:relative!important;overflow:hidden!important} html body:not(:has(main.project-main)) main :is(.product-main-image,.v73-sample-main,.v106-course-gallery-main,.v115-course-poster,.learning-course-cover,.emkan-v147-learning-poster,.article-body,.article-flow,.v49-section) img:not(.emkan-v171-outgoing), html body:not(:has(main.project-main)) main :is(.product-main-image,.v73-sample-main,.v106-course-gallery-main,.v115-course-poster,.learning-course-cover,.emkan-v147-learning-poster,.article-body,.article-flow,.v49-section):hover img:not(.emkan-v171-outgoing){filter:none!important;transform:none!important;opacity:1!important;transition:none!important} html body:not(:has(main.project-main)) main :is(.product-thumb,.v73-sample-thumb,.v106-course-thumb) img{filter:grayscale(1)!important;transform:scale(1)!important;transition:filter .3s ease,transform .3s ease!important} html body:not(:has(main.project-main)) main :is(.product-thumb,.v73-sample-thumb,.v106-course-thumb):is(:hover,:focus-visible) img{filter:grayscale(0)!important;transform:scale(1.025)!important} html body .about-main :is(.person-card,.person-card-media,.team-member,.team-member-photo) img, html body .about-main :is(.person-card,.person-card-media,.team-member,.team-member-photo):hover img{transform:none!important;scale:1!important} @media(max-width:900px){html body #contentApp#contentApp .v73-sample-gallery{width:min(100%,390px)!important;max-width:390px!important}html body #contentApp#contentApp .v73-sample-main{width:min(100%,330px)!important;max-width:330px!important}} @media(max-width:620px){ html body #contentApp#contentApp .v73-sample-gallery{grid-template-columns:1fr!important;grid-template-areas:"hero" "thumbs"!important;width:100%!important;max-width:340px!important;gap:9px!important} html body #contentApp#contentApp .v73-sample-main{width:min(100%,300px)!important;max-width:300px!important} html body #contentApp#contentApp .v73-sample-thumbs{display:flex!important;flex-wrap:nowrap!important;justify-content:center!important;gap:7px!important;overflow-x:auto!important;padding:0 2px 2px!important} html body #contentApp#contentApp .v73-sample-thumb{flex:0 0 44px!important;width:44px!important;height:44px!important;min-width:44px!important} } /* The same miniature rail for the existing course gallery. */ html body #contentApp#contentApp .v106-course-gallery, html[dir="ltr"] body #contentApp#contentApp .v106-course-gallery{ display:grid!important; grid-template-columns:52px minmax(0,1fr)!important; grid-template-areas:"thumbs hero"!important; gap:10px!important; align-items:start!important; width:min(100%,430px)!important; max-width:430px!important; margin-inline:auto!important; } html body #contentApp#contentApp .v106-course-gallery-main{ grid-area:hero!important; width:min(100%,350px)!important; max-width:350px!important; aspect-ratio:1/1!important; margin-inline:auto!important; align-self:start!important; overflow:hidden!important; border:1px solid var(--line)!important; background:var(--panel)!important; } html body #contentApp#contentApp .v106-course-gallery-main img{ width:100%!important; height:100%!important; object-fit:contain!important; object-position:center!important; display:block!important; } html body #contentApp#contentApp .v106-course-gallery-thumbs{ grid-area:thumbs!important; display:grid!important; grid-template-columns:1fr!important; grid-auto-rows:52px!important; gap:7px!important; margin:0!important; padding:0!important; align-content:start!important; } html body #contentApp#contentApp .v106-course-thumb{ width:52px!important; height:52px!important; min-width:52px!important; aspect-ratio:1/1!important; margin:0!important; padding:0!important; border:1px solid var(--line)!important; background:transparent!important; overflow:hidden!important; } html body #contentApp#contentApp .v106-course-thumb img{ width:100%!important; height:100%!important; object-fit:cover!important; object-position:center!important; display:block!important; } @media(max-width:620px){html body #contentApp#contentApp .v106-course-gallery{grid-template-columns:1fr!important;grid-template-areas:"hero" "thumbs"!important;max-width:340px!important}html body #contentApp#contentApp .v106-course-gallery-thumbs{display:flex!important;justify-content:center!important;gap:7px!important}html body #contentApp#contentApp .v106-course-thumb{width:44px!important;height:44px!important;min-width:44px!important}} /* v172: exact scoped corrections; project viewers remain excluded. */ html body .about-main .person-card.person-card .person-card-media, html body .about-main .person-card.person-card .person-card-media img, html body .about-main .person-card.person-card:is(:hover,:focus-within) .person-card-media, html body .about-main .person-card.person-card:is(:hover,:focus-within) .person-card-media img{ transform:none!important;scale:1!important;translate:none!important; } html body .about-main .person-card.person-card .person-card-media img{filter:grayscale(1)!important;transition:filter .3s ease!important;opacity:1!important} html body .about-main .person-card.person-card:is(:hover,:focus-within) .person-card-media img{filter:grayscale(0)!important} html body main.emkan-member-main .emkan-member-photo, html body main.emkan-member-main .emkan-member-photo img, html body main.emkan-member-main .emkan-member-photo:hover img{filter:none!important;transform:none!important;scale:1!important;transition:none!important;opacity:1!important} html body main.emkan-member-main .emkan-member-grid{min-width:0!important;max-width:100%!important} html body main.emkan-member-main .emkan-member-copy{min-width:0!important;overflow-wrap:anywhere} html body #contentApp#contentApp .v73-sample-gallery, html body #contentApp#contentApp .v106-course-gallery{direction:ltr!important} html[lang="fa"] body #contentApp#contentApp .v73-sample-gallery, html[lang="ar"] body #contentApp#contentApp .v73-sample-gallery, html[lang="fa"] body #contentApp#contentApp .v106-course-gallery, html[lang="ar"] body #contentApp#contentApp .v106-course-gallery{direction:rtl!important} html body #contentApp#contentApp :is(.v73-sample-thumbs,.v106-course-gallery-thumbs){grid-area:thumbs!important;position:static!important;inset:auto!important;transform:none!important;order:initial!important} html body #contentApp#contentApp :is(.v73-sample-main,.v106-course-gallery-main){grid-area:hero!important;position:relative!important;inset:auto!important;transform:none!important;order:initial!important} html body #contentApp#contentApp .v73-sample-thumb{position:relative!important;inset:auto!important;transform:none!important;pointer-events:auto!important;z-index:1!important} html body:not(:has(main.project-main)) main :is(.v115-course-poster,.v115-course-media,.learning-course-cover,.emkan-v147-learning-poster,.v71-sample-visual,.v73-sample-main,.v106-course-gallery-main,.article-cover,.article-body,.article-flow,.article-media,.v49-section,.research-entry-media) img:not(.emkan-v171-outgoing), html body:not(:has(main.project-main)) main :is(.v115-course-poster,.v115-course-media,.learning-course-cover,.emkan-v147-learning-poster,.v71-sample-visual,.v73-sample-main,.v106-course-gallery-main,.article-cover,.article-body,.article-flow,.article-media,.v49-section,.research-entry-media):hover img:not(.emkan-v171-outgoing){filter:none!important;transform:none!important;scale:1!important;opacity:1!important;transition:none!important} @media(max-width:900px){ html body .site-header .nav-frame{grid-template-columns:76px minmax(0,1fr) 76px!important;grid-template-rows:34px auto!important;align-items:center!important} html body .site-header .nav-frame .mobile-menu-button{position:static!important;inset:auto!important;transform:none!important;align-self:center!important;justify-self:center!important;display:flex!important;align-items:center!important;justify-content:center!important;padding:0!important;margin:0!important;height:30px!important;line-height:1!important} html body .site-header .mobile-menu-button .mobile-menu-icon{position:relative!important;top:auto!important;left:auto!important;right:auto!important;bottom:auto!important;transform:none!important;margin:0!important;align-self:center!important} } @media(max-width:760px){ html body main.emkan-member-main .emkan-member-grid{grid-template-columns:minmax(0,1fr)!important;gap:24px!important} html body main.emkan-member-main .emkan-member-photo{width:min(100%,300px)!important;max-width:100%!important;aspect-ratio:1!important;height:auto!important;margin-inline:auto!important} html body main.emkan-member-main .emkan-member-photo img{width:100%!important;height:100%!important;object-fit:cover!important} html body .about-main .person-card{min-width:0!important;max-width:100%!important} } /* ===== emkan-v177-final.css ===== */ /* ========================================================================== EMKAN v177 — FINAL DELIVERY STABILIZATION Scope: public UI only. Loaded after all historical style layers. Purpose: requested pre-launch corrections 1–12 without changing content/CMS. ========================================================================== */ /* 1 — Architecture listing covers use the canonical site-wide square cover ratio. Detail-page thumbnails are a separate component and stay landscape. */ html body main.architecture-main .img-wrapper{aspect-ratio:1/1!important;height:auto!important;min-height:0!important} html body main.architecture-main .img-wrapper>img{width:100%!important;height:100%!important;object-fit:cover!important;object-position:center!important} /* 2 + 4 — Completed education reports: horizontal thumbnails ONLY. The obsolete second/vertical gallery is never shown on completed programmes. */ html body.emkan-v177-completed-course #contentApp :is(.v106-course-gallery,.learning-course-cover), html body:has(#contentApp .v120-report) #contentApp :is(.v106-course-gallery,.learning-course-cover){display:none!important} html body.v115-course-detail #contentApp .v120-report-gallery{ display:flex!important;grid-template-columns:none!important;flex-wrap:nowrap!important; align-items:center!important;justify-content:flex-start!important; gap:10px!important;width:100%!important;max-width:100%!important; margin:18px 0 0!important;padding:0 0 7px!important; overflow-x:auto!important;overflow-y:hidden!important;direction:ltr!important; scroll-snap-type:x proximity!important;overscroll-behavior-inline:contain!important; scrollbar-width:thin!important;-webkit-overflow-scrolling:touch!important; } html body.v115-course-detail #contentApp .v120-report-gallery img{ flex:0 0 clamp(132px,11vw,162px)!important;width:clamp(132px,11vw,162px)!important; height:auto!important;aspect-ratio:16/10!important;object-fit:cover!important;object-position:center!important; display:block!important;margin:0!important;border:1px solid var(--line)!important; outline:0!important;scroll-snap-align:start!important;cursor:zoom-in!important; filter:grayscale(100%)!important;transform:none!important;transition:filter .25s ease,opacity .2s ease!important; } @media(hover:hover) and (pointer:fine){ html body.v115-course-detail #contentApp .v120-report-gallery img:hover{filter:grayscale(0)!important;opacity:.9!important;transform:none!important} } /* 2 + 3 — One robust report viewer. Full image always visible. */ .emkan-v177-report-viewer{ position:fixed!important;inset:0!important;z-index:1000000!important;background:rgba(8,10,13,.965)!important;color:#fff!important; display:grid!important;grid-template-rows:minmax(0,1fr) 48px!important;opacity:1!important;visibility:visible!important; } .emkan-v177-report-viewer[hidden]{display:none!important} .emkan-v177-report-stage{ min-width:0!important;min-height:0!important;display:flex!important;overflow-x:auto!important;overflow-y:hidden!important; scroll-snap-type:x mandatory!important;scroll-behavior:smooth!important;overscroll-behavior:contain!important; scrollbar-width:none!important;direction:ltr!important;padding:42px 54px 20px!important; } .emkan-v177-report-stage::-webkit-scrollbar{display:none!important} .emkan-v177-report-slide{ min-width:100%!important;width:100%!important;height:100%!important;flex:0 0 100%!important; display:grid!important;place-items:center!important;scroll-snap-align:start!important;margin:0!important;padding:0!important; } .emkan-v177-report-slide img{ display:block!important;width:auto!important;height:auto!important;max-width:100%!important;max-height:100%!important; aspect-ratio:auto!important;object-fit:contain!important;object-position:center!important;filter:none!important; transform:none!important;scale:1!important;border:0!important;box-shadow:none!important;user-select:none!important;-webkit-user-drag:none!important; } .emkan-v177-report-close{ position:absolute!important;z-index:4!important;top:12px!important;right:16px!important;width:40px!important;height:40px!important; display:grid!important;place-items:center!important;border:0!important;background:transparent!important;color:#fff!important; box-shadow:none!important;font:200 29px/1 Arial,sans-serif!important;cursor:pointer!important;opacity:.78!important; } .emkan-v177-report-close:hover,.emkan-v177-report-close:focus-visible{color:var(--hover-accent,#6f9fb2)!important;opacity:1!important;outline:0!important} .emkan-v177-report-footer{display:flex!important;justify-content:center!important;align-items:center!important;gap:18px!important;padding:4px 20px 10px!important;font:500 9px/1.4 var(--font-en,Arial,sans-serif)!important;letter-spacing:.08em!important} .emkan-v177-report-nav{border:0!important;background:transparent!important;color:#fff!important;padding:5px 9px!important;cursor:pointer!important;font:inherit!important;box-shadow:none!important} .emkan-v177-report-nav:hover{color:var(--hover-accent,#6f9fb2)!important} body.emkan-v177-viewer-open{overflow:hidden!important} /* 3 — ALL enlargement / lightbox images use CONTAIN, not crop. */ html body :is( .fullscreen-image,.fullscreen-stage img,.fullscreen-viewer img,.fullscreen-dialog img,.fullscreen-slide img, .emkan-product-lightbox img,.emkan-product-lightbox.is-zoomed img, .emkan-v135-viewer-stage img,.project-lightbox-stage img,.project-viewer-stage img, .emkan-gallery-lightbox-stage img,.emkan-report-lightbox img,.emkan-report-viewer-slide img, .dx-marker-stage img,.media-lightbox img,.lightbox img ){ width:auto!important;height:auto!important;max-width:calc(100vw - 72px)!important;max-height:calc(100dvh - 84px)!important; aspect-ratio:auto!important;object-fit:contain!important;object-position:center!important; transform:none!important;scale:1!important;inset:auto!important; } html body :is( .fullscreen-stage,.fullscreen-slide,.emkan-product-lightbox-stage,.project-lightbox-stage,.project-viewer-stage, .emkan-v135-viewer-stage,.emkan-gallery-lightbox-stage,.emkan-report-lightbox,.emkan-report-viewer-slide,.dx-marker-stage ){place-items:center!important;align-items:center!important;justify-content:center!important} html body :is(.fullscreen-stage,.emkan-product-lightbox-stage,.project-lightbox-stage,.project-viewer-stage,.emkan-v135-viewer-stage,.emkan-gallery-lightbox-stage){overflow:hidden!important} html body .emkan-product-lightbox.is-zoomed img{cursor:default!important} @media(max-width:600px){ html body :is(.fullscreen-image,.fullscreen-stage img,.fullscreen-viewer img,.fullscreen-dialog img,.fullscreen-slide img,.emkan-product-lightbox img,.emkan-v135-viewer-stage img,.project-lightbox-stage img,.project-viewer-stage img,.emkan-gallery-lightbox-stage img,.emkan-report-lightbox img,.emkan-report-viewer-slide img,.dx-marker-stage img){max-width:calc(100vw - 28px)!important;max-height:calc(100dvh - 64px)!important} .emkan-v177-report-stage{padding:44px 14px 14px!important} } /* 6 — Remove decorative underlines from interactive text. Structural rules remain. */ html body :is( .learning-next .v49-button,.v49-actions .v49-button,.v115-course-action .v49-button,.v115-course-action a,.v115-course-action button, .v49-preview a,.emkan-inline-action,.detail-actions a,.detail-actions button, .emkan-v135-virtual-badge,.emkan-v135-access-row button,.emkan-v135-lesson-complete,.emkan-v135-materials a,.emkan-v135-material-disabled, .v49-prev,.v49-next,.previous-link,.next-link,.prev-link,.continue-link,[data-prev-action],[data-next-action] ){border-bottom:0!important;box-shadow:none!important;text-decoration:none!important} html body :is(.learning-next .v49-button,.v49-actions .v49-button,.v115-course-action .v49-button,.v115-course-action a,.v115-course-action button,.emkan-v135-access-row button,.emkan-v135-lesson-complete,.emkan-v135-materials a){background:transparent!important} html body :is(.learning-next .v49-button,.v49-actions .v49-button,.v115-course-action .v49-button,.emkan-v135-access-row button,.emkan-v135-lesson-complete,.emkan-v135-materials a):is(:hover,:focus-visible){color:var(--hover-accent)!important;outline:0!important;border-bottom:0!important} html body .emkan-v135-virtual-badge{padding-bottom:0!important} html body .v49-progress li::after{display:none!important;content:none!important} /* 7 — No search UI on true single/detail/sample pages. */ html body.emkan-v177-single :is( .project-search,.article-project-search,.research-search,.product-search,.civil-search,.emkan-standard-search, .v49-search-group,.v69-content-search,.emkan-landing-search-wrap,.articles-controls .emkan-search-shell, [data-detail-search],.detail-search,.single-search ){display:none!important} /* 8 — Store and Education sample share the same media / text geometry. */ @media(min-width:901px){ /* One short divider only. Older product-stage divider is disabled. */ html body .product-main .product-stage::after{content:none!important;display:none!important} html body .product-main .product-gallery-panel{ position:relative!important;border-inline-end:0!important; padding-inline-end:clamp(28px,3.8vw,46px)!important;padding-bottom:30px!important; } html body .product-main .product-gallery-panel::before{content:none!important;display:none!important} html body .product-main .product-gallery-panel::after{ content:""!important;display:block!important;position:absolute!important; inset-inline-end:0!important;inset-inline-start:auto!important; top:14%!important;bottom:auto!important;width:1px!important;height:62%!important; background:var(--line)!important;border:0!important;pointer-events:none!important; } html body .product-main .product-gallery{gap:10px!important} /* Mirror exactly like Store: EN media left / info right; FA+AR info left / media right. */ html body.content-section-page #contentApp .v73-sample-hero{ display:grid!important;direction:ltr!important;gap:0!important;align-items:start!important;width:100%!important; } html[lang="en"] body.content-section-page #contentApp .v73-sample-hero{ grid-template-columns:minmax(0,1fr) minmax(330px,.92fr)!important;grid-template-areas:"media info"!important; } :is(html[lang="fa"],html[lang="ar"]) body.content-section-page #contentApp .v73-sample-hero{ grid-template-columns:minmax(330px,.92fr) minmax(0,1fr)!important;grid-template-areas:"info media"!important; } html body.content-section-page #contentApp .v73-sample-gallery{ grid-area:media!important;position:relative!important;direction:ltr!important;display:grid!important; gap:10px!important;width:100%!important;max-width:none!important;margin:0!important;padding-bottom:30px!important;justify-content:center!important; } html[lang="en"] body.content-section-page #contentApp .v73-sample-gallery{ grid-template-columns:58px minmax(0,360px)!important;grid-template-areas:"thumbs hero"!important; padding-inline-start:0!important;padding-inline-end:clamp(28px,3.8vw,46px)!important; } :is(html[lang="fa"],html[lang="ar"]) body.content-section-page #contentApp .v73-sample-gallery{ grid-template-columns:minmax(0,360px) 58px!important;grid-template-areas:"hero thumbs"!important; padding-inline-start:clamp(28px,3.8vw,46px)!important;padding-inline-end:0!important; } html body.content-section-page #contentApp .v73-sample-gallery::before{content:none!important;display:none!important} html body.content-section-page #contentApp .v73-sample-gallery::after{ content:""!important;display:block!important;position:absolute!important;top:14%!important;bottom:auto!important; width:1px!important;height:62%!important;background:var(--line)!important;border:0!important;pointer-events:none!important; } html[lang="en"] body.content-section-page #contentApp .v73-sample-gallery::after{ right:0!important;left:auto!important;inset-inline-start:auto!important;inset-inline-end:0!important; } :is(html[lang="fa"],html[lang="ar"]) body.content-section-page #contentApp .v73-sample-gallery::after{ left:0!important;right:auto!important;inset-inline-start:0!important;inset-inline-end:auto!important; } html body.content-section-page #contentApp .v73-sample-main{ grid-area:hero!important;width:100%!important;max-width:360px!important;aspect-ratio:1/1!important;margin:0!important;overflow:hidden!important; } html body.content-section-page #contentApp .v73-sample-main img{width:100%!important;height:100%!important;object-fit:cover!important} html body.content-section-page #contentApp .v73-sample-thumbs{ grid-area:thumbs!important;width:58px!important;display:grid!important;grid-template-columns:1fr!important; grid-auto-rows:min-content!important;gap:8px!important;margin:0!important;padding:0!important;align-content:start!important; } html body.content-section-page #contentApp .v73-sample-thumb{width:58px!important;min-width:58px!important;height:auto!important;aspect-ratio:1/1!important;margin:0!important} html[lang="en"] body.content-section-page #contentApp .v73-sample-info{ grid-area:info!important;padding:4px 0 30px clamp(28px,3.8vw,46px)!important;min-width:0!important;direction:ltr!important;text-align:left!important; } :is(html[lang="fa"],html[lang="ar"]) body.content-section-page #contentApp .v73-sample-info{ grid-area:info!important;padding:4px clamp(28px,3.8vw,46px) 30px 0!important;min-width:0!important;direction:rtl!important;text-align:right!important; } } @media(max-width:900px){ html body .product-main .product-stage::after, html body .product-main .product-gallery-panel::after, html body.content-section-page #contentApp .v73-sample-gallery::after{display:none!important;content:none!important} } /* 9 — Every selected category/filter/tab is bold. */ html body :is( button.is-active,a.is-active,[role="tab"].is-active,[role="tab"][aria-selected="true"], [data-filter].is-active,[data-filter][aria-pressed="true"],[aria-pressed="true"],[aria-selected="true"], .category-button.is-active,.article-category-choice.is-active,.detail-subcategory-list a.is-active,.detail-nav a.is-active, .v49-filter-option.is-active,.podcast-filter-list button.is-active,.podcast-topics button.is-active,.podcast-seasons button.is-active, .store-subcategory-list a.is-active,.store-sort-list button.is-active,.civil-filter-list .is-active,.research-filter-list .is-active, .emkan-landing-category.is-active,.product-tab.is-active,.color-choice.is-active,.language-direct-choice.is-active, .people-group-button.is-active,.practice-button.is-active,.team-member-button.is-active,.episode.is-active, .message-subject-option.is-active,.message-subject-choice.is-active,.v84-sample-tab.is-active,.library-filter.is-active,.dx-filter.is-active, .emkan-search-filter.is-active,.emkan-ai-tab.is-active,.emkan-v177-selected, a[aria-current="page"]:not(.nav-link) ){font-weight:700!important} /* 5 — Mobile covers/cards: compact 2-up layout site-wide where content is a cover grid. */ @media(max-width:760px){ html body main.architecture-main .with-section-nav{display:block!important;grid-template-columns:minmax(0,1fr)!important} html body main.architecture-main .category-panel{position:static!important;width:100%!important;max-width:none!important;margin:0 0 18px!important;transform:none!important} html body :is( .gallery-items-container,.category-grid,.store-grid,.product-grid,.projects-grid,.card-grid, .v74-level2-grid,.v74-sample-grid,.v49-grid,.v49-work-grid,.v71-sample-grid,.v72-sample-grid,.v73-portfolio-grid, .research-index-grid,.research-entry-grid,.people-grid,.related-grid,.emkan-related-grid,.civil-project-listing, .dx-grid,.vthumb-grid,.emkan-clients-grid,.library-grid,.media-library-grid,.article-media-library-grid ){ display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important; gap:18px 10px!important;width:100%!important;max-width:none!important;justify-content:stretch!important;align-items:start!important; } html body :is( .gallery-item,.project-card,.category-card,.store-card,.product-card,.v49-card,.v49-course,.v49-work-card,.v71-sample-card, .research-index-card,.research-entry,.person-card,.related-item,.emkan-related-card,.dx-card,.vthumb,.emkan-client-card,.library-card ){width:100%!important;max-width:none!important;min-width:0!important;margin:0!important} html body :is(.fixed-caption,.category-caption,.v49-card-copy,.store-card-caption,.product-card-caption,.research-index-title,.person-card-caption){font-size:9.5px!important;line-height:1.55!important} html body main.architecture-main .img-wrapper{aspect-ratio:1/1!important} html body.v115-course-detail #contentApp .v120-report-gallery img{flex-basis:108px!important;width:108px!important;aspect-ratio:16/10!important} } @media(max-width:430px){ html body main.architecture-main, html body main.module-main, html body main.store-main, html body main.store-category-main, html body .content-section-page #contentApp{width:calc(100% - 28px)!important;max-width:calc(100% - 28px)!important;margin-inline:auto!important} html body :is(.gallery-items-container,.category-grid,.store-grid,.product-grid,.projects-grid,.card-grid,.v74-level2-grid,.v74-sample-grid,.v49-grid,.v49-work-grid,.v71-sample-grid,.v72-sample-grid,.v73-portfolio-grid,.research-index-grid,.research-entry-grid,.people-grid,.related-grid,.emkan-related-grid,.civil-project-listing,.dx-grid,.vthumb-grid,.emkan-clients-grid,.library-grid,.media-library-grid,.article-media-library-grid){gap:15px 9px!important} } /* 12 — EMKAN AI: same header line/measure as the rest of site, no centre line, clearer use. */ html body.emkan-ai-page .emkan-ai-hero::before{display:none!important;content:none!important} /* Do not override .site-header/.nav-frame width here: canonical site header rules must win. */ html body.emkan-ai-page .emkan-ai-main{ width:var(--emkan-content-width,min(1280px,calc(100vw - 224px)))!important; max-width:var(--emkan-content-width,min(1280px,calc(100vw - 224px)))!important; margin-inline:auto!important; } html body.emkan-ai-page .emkan-ai-contextbar{border-bottom:0!important;padding-bottom:0!important} html body.emkan-ai-page .emkan-ai-hero{border-top:0!important} html body.emkan-ai-page .emkan-ai-tab{min-height:66px!important} html body.emkan-ai-page .emkan-ai-tab.is-active{font-weight:700!important} html body.emkan-ai-page .emkan-ai-howto{ display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:0!important; margin:-12px 0 34px!important;border-top:1px solid var(--ai-line)!important;border-bottom:1px solid var(--ai-line)!important; } html body.emkan-ai-page .emkan-ai-howto>span{ min-height:46px!important;display:flex!important;align-items:center!important;gap:9px!important;padding:8px 14px!important; border-inline-start:1px solid var(--ai-line)!important;color:var(--ai-muted)!important;font-size:8.5px!important;line-height:1.7!important; } html body.emkan-ai-page .emkan-ai-howto>span:first-child{border-inline-start:0!important} html body.emkan-ai-page .emkan-ai-howto b{font-family:var(--font-en,Arial,sans-serif)!important;font-size:7px!important;font-weight:600!important;color:var(--ai-ink)!important} html body.emkan-ai-page .emkan-ai-prompt-form textarea{min-height:132px!important} @media(max-width:760px){ html body.emkan-ai-page .emkan-ai-main{width:calc(100vw - 28px)!important;max-width:calc(100vw - 28px)!important} html body.emkan-ai-page .emkan-ai-howto{grid-template-columns:1fr!important;margin-top:0!important} html body.emkan-ai-page .emkan-ai-howto>span{border-inline-start:0!important;border-top:1px solid var(--ai-line)!important;min-height:40px!important;padding-inline:0!important} html body.emkan-ai-page .emkan-ai-howto>span:first-child{border-top:0!important} } /* v177 divider hard-lock: paint the separator on the INNER edge with background, avoiding conflicts from historical ::after rules. */ @media(min-width:901px){ html body .product-main .product-stage::after, html body .product-main .product-gallery-panel::before, html body .product-main .product-gallery-panel::after, html body.content-section-page #contentApp .v73-sample-gallery::before, html body.content-section-page #contentApp .v73-sample-gallery::after{content:none!important;display:none!important} html[lang="en"] body .product-main .product-gallery-panel, html[lang="en"] body.content-section-page #contentApp .v73-sample-gallery{ background-image:linear-gradient(var(--line),var(--line))!important; background-repeat:no-repeat!important;background-position:right 14%!important;background-size:1px 72%!important; } :is(html[lang="fa"],html[lang="ar"]) body .product-main .product-gallery-panel, :is(html[lang="fa"],html[lang="ar"]) body.content-section-page #contentApp .v73-sample-gallery{ background-image:linear-gradient(var(--line),var(--line))!important; background-repeat:no-repeat!important;background-position:left 14%!important;background-size:1px 72%!important; } } /* v177 education/store geometry final specificity lock (beats v168 #contentApp#contentApp). */ @media(min-width:901px){ /* Education: preserve compact Store-like gallery, mirror thumbnails by language. */ html[lang="en"] body.content-section-page #contentApp#contentApp .v73-sample-gallery{ direction:ltr!important;display:grid!important;width:min(100%,430px)!important;max-width:430px!important; grid-template-columns:52px minmax(0,1fr)!important;grid-template-areas:"thumbs hero"!important; gap:10px!important;margin-inline:auto!important;padding:0!important;background:none!important; } :is(html[lang="fa"],html[lang="ar"]) body.content-section-page #contentApp#contentApp .v73-sample-gallery{ direction:ltr!important;display:grid!important;width:min(100%,430px)!important;max-width:430px!important; grid-template-columns:minmax(0,1fr) 52px!important;grid-template-areas:"hero thumbs"!important; gap:10px!important;margin-inline:auto!important;padding:0!important;background:none!important; } html body.content-section-page #contentApp#contentApp .v73-sample-main{ grid-area:hero!important;width:min(100%,350px)!important;max-width:350px!important;margin-inline:auto!important; } html body.content-section-page #contentApp#contentApp .v73-sample-thumbs{grid-area:thumbs!important;width:52px!important;gap:7px!important} html body.content-section-page #contentApp#contentApp .v73-sample-thumb{width:52px!important;height:52px!important;min-width:52px!important} /* Separator belongs to the boundary between media and text, never beside thumbnails. */ html body.content-section-page #contentApp .v73-sample-gallery::before, html body.content-section-page #contentApp .v73-sample-gallery::after{content:none!important;display:none!important} html[lang="en"] body.content-section-page #contentApp .v73-sample-info{ background-image:linear-gradient(var(--line),var(--line))!important;background-repeat:no-repeat!important; background-position:left 14%!important;background-size:1px 72%!important; padding:4px 0 30px clamp(28px,3.8vw,46px)!important; } :is(html[lang="fa"],html[lang="ar"]) body.content-section-page #contentApp .v73-sample-info{ background-image:linear-gradient(var(--line),var(--line))!important;background-repeat:no-repeat!important; background-position:right 14%!important;background-size:1px 72%!important; padding:4px clamp(28px,3.8vw,46px) 30px 0!important; } } @media(max-width:900px){html body.content-section-page #contentApp .v73-sample-info{background-image:none!important}} /* v177 mobile grid specificity lock: legacy module files contain late !important one-column/192px rules; these are intentionally overridden for delivery. */ @media(max-width:760px){ html body main.module-main .category-grid, html body main.module-main .category-grid.category-grid--five, html body main.store-main .store-grid, html body main.store-category-main .product-grid, html body main.architecture-main .gallery-items-container, html body main.civil-main .gallery-items-container, html body.content-section-page #contentApp :is(.v74-level2-grid,.v74-sample-grid,.v49-grid,.v49-work-grid,.v71-sample-grid,.v72-sample-grid,.v73-portfolio-grid), html body .research-index-grid, html body .people-grid, html body .emkan-related-grid, html body .related-grid, html body .dx-grid, html body .vthumb-grid, html body .emkan-clients-grid{ display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important; width:100%!important;max-width:none!important;min-width:0!important; gap:18px 10px!important;justify-content:stretch!important;align-items:start!important;grid-auto-rows:auto!important; } html body main.module-main .category-grid > .category-card, html body main.store-main .store-grid > .store-card, html body main.store-category-main .product-grid > .product-card, html body main.architecture-main .gallery-items-container > .gallery-item, html body main.civil-main .gallery-items-container > .gallery-item, html body.content-section-page #contentApp :is(.v74-level2-grid,.v74-sample-grid,.v49-grid,.v49-work-grid,.v71-sample-grid,.v72-sample-grid,.v73-portfolio-grid) > *, html body .research-index-grid > *,html body .people-grid > *,html body .emkan-related-grid > *,html body .related-grid > *,html body .dx-grid > *,html body .vthumb-grid > *,html body .emkan-clients-grid > *{ width:100%!important;max-width:none!important;min-width:0!important;margin-inline:0!important; } } @media(max-width:430px){ html body main.module-main .category-grid, html body main.module-main .category-grid.category-grid--five, html body main.store-main .store-grid, html body main.store-category-main .product-grid, html body main.architecture-main .gallery-items-container, html body main.civil-main .gallery-items-container{gap:15px 9px!important} } /* v177 interaction cleanup: choices rely on hover + selected weight, not a line under every item. */ html body :is( .category-button,.category-choice,.article-category-choice,.v49-filter-option, .podcast-filter-list button,.podcast-topics button,.podcast-seasons button, .store-subcategory-list a,.store-sort-list button,.civil-filter-list button,.research-filter-list button, .emkan-landing-category,.people-group-button,.practice-button,.team-member-button,.episode-filter, .language-direct-choice,.library-filter,.dx-filter,.emkan-search-filter ){border-bottom:0!important;text-decoration:none!important;box-shadow:none!important} html body :is(.learning-next .v49-button,.v49-actions .v49-button){padding-inline:0!important} /* ===== emkan-v178-final.css ===== */ /* ========================================================================== EMKAN v178 — user-requested final corrections (1–6) ========================================================================== */ /* 1 — Listing covers stay canonical square. Detail thumbnails are separate. */ html body main.architecture-main .img-wrapper{aspect-ratio:1/1!important;height:auto!important;min-height:0!important} html body main.architecture-main .img-wrapper>img{width:100%!important;height:100%!important;object-fit:cover!important} @media(max-width:760px){html body main.architecture-main .img-wrapper{aspect-ratio:1/1!important}} /* 2 — Small rail thumbnails inside single project pages stay landscape. */ html body:has(main.project-main) .vthumb, html body:has(main.project-main) .vthumb-media{width:104px!important;height:66px!important;aspect-ratio:104/66!important;flex-basis:66px!important} html body:has(main.project-main) .vthumb-media img{width:100%!important;height:100%!important;object-fit:cover!important} /* 3 — Civil single SAMPLE: no search rail; its large poster is inert. */ html body.emkan-v149-civil-sample-page .emkan-v149-civil-search-rail, html body.emkan-v149-civil-sample-page .emkan-v149-civil-search{display:none!important} @media(min-width:901px){ html body.emkan-v149-civil-sample-page .emkan-v149-civil-internal-layout{display:block!important;width:100%!important;max-width:1040px!important;margin-inline:auto!important} html body.emkan-v149-civil-sample-page .emkan-v149-civil-internal-content{width:100%!important;max-width:none!important;margin:0!important;padding:0!important} } html body.emkan-v149-civil-sample-page .emkan-v147-sample-hero, html body.emkan-v149-civil-sample-page .emkan-v147-sample-hero:hover{transform:none!important;filter:none!important;cursor:default!important} html body.emkan-v149-civil-sample-page .emkan-v147-sample-hero img, html body.emkan-v149-civil-sample-page .emkan-v147-sample-hero:hover img, html body.emkan-v149-civil-sample-page .emkan-v147-sample-hero img:hover{filter:grayscale(100%)!important;transform:none!important;transition:none!important;cursor:default!important} /* 4 — Navigation entry is EMKAN AI everywhere; remove legacy search glyph. */ html body .emkan-ai-nav-link{display:inline-flex!important;align-items:center!important;gap:5px!important} html body .emkan-ai-nav-star{font-size:.85em;line-height:1;font-weight:400} html body .menu-item--search[href*="emkan-ai"]::after{display:none!important;content:none!important} /* 5 — Article title itself opens the article. */ html body .article-title-button{text-decoration:none!important;color:inherit!important;cursor:pointer!important} html body .article-title-button:hover .article-title, html body .article-title-button:focus-visible .article-title{color:var(--hover-accent)!important} /* 6 — AI: no breadcrumb/back/address strip; no contextual line beneath it. */ html body.emkan-ai-page .emkan-ai-contextbar{display:none!important} html body.emkan-ai-page .emkan-ai-main{padding-top:0!important} html body.emkan-ai-page .emkan-ai-hero{border-top:0!important;padding-top:clamp(58px,9vh,108px)!important} html body.emkan-ai-page .emkan-context-bar, html body.emkan-ai-page .store-context-bar, html body.emkan-ai-page .podcast-context-bar, html body.emkan-ai-page .product-toolbar{display:none!important} html body.emkan-ai-page .emkan-ai-kicker .lang-fa, html body.emkan-ai-page .emkan-ai-kicker .lang-ar, html body.emkan-ai-page .emkan-ai-section-label .lang-fa, html body.emkan-ai-page .emkan-ai-section-label .lang-ar{font-family:var(--font-fa,var(--font-body))!important;letter-spacing:0!important;direction:rtl} /* ===== emkan-v179-final.css ===== */ /* ========================================================================== EMKAN v179 — final pre-delivery corrections 1) completed-course report strip 2) Civil sample poster colour 3) article two-stage open/read + complete action borders 4) EMKAN AI nav lock 5) responsive context rule geometry ========================================================================== */ /* 1 — Completed course report: the report images are thumbnails, not covers. Match the canonical square detail-thumbnail size and place the row between two quiet hairlines with exactly equal vertical breathing room. */ html body.v115-course-detail #contentApp .v120-report-gallery{ display:flex!important; grid-template-columns:none!important; flex-wrap:nowrap!important; align-items:center!important; justify-content:flex-start!important; gap:8px!important; width:100%!important; max-width:100%!important; margin:14px 0 0!important; padding:16px 0!important; border-top:1px solid var(--line)!important; border-bottom:1px solid var(--line)!important; overflow-x:auto!important; overflow-y:hidden!important; direction:ltr!important; scrollbar-width:thin!important; scroll-snap-type:x proximity!important; -webkit-overflow-scrolling:touch!important; box-sizing:border-box!important; } html body.v115-course-detail #contentApp .v120-report-gallery img{ flex:0 0 52px!important; width:52px!important; min-width:52px!important; height:52px!important; aspect-ratio:1/1!important; object-fit:cover!important; object-position:center!important; margin:0!important; border:1px solid var(--line)!important; outline:0!important; filter:grayscale(100%)!important; opacity:.84!important; transform:none!important; cursor:zoom-in!important; scroll-snap-align:start!important; transition:filter .28s ease,opacity .22s ease,border-color .22s ease!important; box-sizing:border-box!important; } @media(hover:hover) and (pointer:fine){ html body.v115-course-detail #contentApp .v120-report-gallery img:is(:hover,:focus-visible){ filter:grayscale(0)!important; opacity:1!important; border-color:var(--hover-accent)!important; } } @media(max-width:760px){ html body.v115-course-detail #contentApp .v120-report-gallery{ gap:7px!important; padding:14px 0!important; } html body.v115-course-detail #contentApp .v120-report-gallery img{ flex-basis:48px!important; width:48px!important; min-width:48px!important; height:48px!important; } } /* 2 — Civil single-sample hero is a poster: full colour, inert, no hover. */ html body.emkan-v149-civil-sample-page .emkan-v147-sample-hero, html body.emkan-v149-civil-sample-page .emkan-v147-sample-hero:hover, html body.emkan-v149-civil-sample-page .emkan-v147-sample-hero:focus-within{ transform:none!important; filter:none!important; cursor:default!important; } html body.emkan-v149-civil-sample-page .emkan-v147-sample-hero img, html body.emkan-v149-civil-sample-page .emkan-v147-sample-hero:hover img, html body.emkan-v149-civil-sample-page .emkan-v147-sample-hero img:hover{ filter:none!important; opacity:1!important; transform:none!important; scale:1!important; transition:none!important; cursor:default!important; } /* 3 — Articles: first title click opens softly, second follows the title link. Keep closed rows truly closed even on hover so the two-stage interaction is predictable. Actions retain a complete 1px rectangular border. */ html body .article-row-card, html body :is(html[lang="fa"],html[lang="ar"]) .article-row-card{ transition:grid-template-columns .62s cubic-bezier(.22,.61,.36,1),border-color .28s ease!important; } html body .article-detail{ transition:grid-template-rows .62s cubic-bezier(.22,.61,.36,1),opacity .42s ease,padding .62s cubic-bezier(.22,.61,.36,1)!important; } html body .article-side, html body :is(html[lang="fa"],html[lang="ar"]) .article-side{ transition:max-height .62s cubic-bezier(.22,.61,.36,1),padding .62s cubic-bezier(.22,.61,.36,1),opacity .34s ease,visibility .34s ease!important; } @media(min-width:901px){ html body .article-row:not(.is-open) .article-row-card{ grid-template-columns:minmax(0,1fr) 0fr!important; } html[lang="fa"] body .article-row:not(.is-open) .article-row-card, html[lang="ar"] body .article-row:not(.is-open) .article-row-card{ grid-template-columns:0fr minmax(0,1fr)!important; } } html body .article-row:not(.is-open) .article-detail{ grid-template-rows:0fr!important; opacity:0!important; padding-bottom:0!important; } html body .article-row:not(.is-open) .article-side, html[lang="fa"] body .article-row:not(.is-open) .article-side, html[lang="ar"] body .article-row:not(.is-open) .article-side{ max-height:0!important; padding-top:0!important; padding-bottom:0!important; border:0!important; opacity:0!important; visibility:hidden!important; pointer-events:none!important; } html body .article-row.is-open .article-detail{ grid-template-rows:1fr!important; opacity:1!important; padding-bottom:18px!important; } html body .article-action, html body .article-action:hover, html body .article-action:focus-visible{ box-sizing:border-box!important; border:1px solid var(--line)!important; border-radius:0!important; background:transparent!important; box-shadow:none!important; text-decoration:none!important; } html body .article-action:hover, html body .article-action:focus-visible{ color:var(--hover-accent)!important; border-color:var(--hover-accent)!important; outline:0!important; } /* 4 — Header / mega-menu utility is EMKAN AI only. */ html body .emkan-ai-nav-link, html body .primary-menu .menu-item--search{ white-space:nowrap!important; } html body .primary-menu .menu-item--search::after, html body .primary-menu .menu-item--search::before{ content:none!important; display:none!important; } /* 5 — Responsive rule immediately below the main navigation/context area. Preserve the approved hierarchy: the lower context/submenu rule is slightly wider than the header, but it must stay centred and inside the viewport. */ @media(max-width:900px){ :root{--emkan-v179-context-width:min(752px,calc(100vw - 18px));} html body :is( main>.emkan-context-bar, .article-page>.emkan-context-bar, .store-category-main>.store-context-bar, .podcast-main>.podcast-context-bar, .product-main>.product-toolbar, main>.detail-context-bar, main>.articles-context-bar, main>.article-context-bar, .detail-context-bar, .articles-context-bar, .article-context-bar ){ position:relative!important; width:var(--emkan-v179-context-width)!important; max-width:var(--emkan-v179-context-width)!important; min-width:0!important; left:auto!important; right:auto!important; margin-left:calc((100% - var(--emkan-v179-context-width))/2)!important; margin-right:calc((100% - var(--emkan-v179-context-width))/2)!important; margin-inline-start:calc((100% - var(--emkan-v179-context-width))/2)!important; margin-inline-end:calc((100% - var(--emkan-v179-context-width))/2)!important; transform:none!important; box-sizing:border-box!important; } html body .emkan-v147-context-inner{ width:100%!important; max-width:100%!important; box-sizing:border-box!important; } } @media(max-width:560px){ :root{--emkan-v179-context-width:calc(100vw - 16px);} } /* ===== emkan-v180-final.css ===== */ /* ========================================================================== EMKAN v180 — delivery hardening Scope: article actions, mega-menu utility, product/content single-detail geometry, responsive normalization, performance-friendly visual rules. ========================================================================== */ /* 1) Articles — action buttons must never visually collide or lose an edge. */ html body .article-side{ box-sizing:border-box!important; overflow:visible!important; } html body .article-actions{ display:grid!important; grid-template-columns:1fr!important; gap:10px!important; width:100%!important; min-width:0!important; padding:0!important; margin:0!important; } html body .article-action{ position:relative!important; isolation:isolate!important; box-sizing:border-box!important; width:100%!important; min-width:0!important; min-height:38px!important; margin:0!important; padding:8px 10px!important; border:1px solid var(--line)!important; background:transparent!important; overflow:visible!important; line-height:1.4!important; } html body .article-action::before, html body .article-action::after{content:none!important;display:none!important} @media(max-width:900px){ html body .article-actions{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:8px!important} html body .article-action{min-height:40px!important} } @media(max-width:430px){ html body .article-actions{grid-template-columns:1fr!important} } /* 2) Mega menu — EMKAN AI is a normal navigable item, never a search trigger. */ html body .primary-menu .menu-item--search, html body .primary-menu .menu-item--search:hover, html body .primary-menu .menu-item--search:focus-visible{ pointer-events:auto!important; cursor:pointer!important; text-decoration:none!important; white-space:nowrap!important; } /* 3) Store single product — separator equals the large image height exactly. */ html body .product-gallery-panel{ border-inline-end:0!important; padding-inline-end:clamp(22px,3vw,38px)!important; padding-bottom:0!important; } html body .product-gallery{ position:relative!important; box-sizing:border-box!important; border-inline-end:1px solid var(--line)!important; padding-inline-end:clamp(22px,3vw,38px)!important; width:100%!important; max-width:500px!important; min-width:0!important; } html body .product-main-image{ width:100%!important; max-width:390px!important; aspect-ratio:4/5!important; } html body .product-main-image>img{object-fit:contain!important} html body .product-thumbs{align-self:start!important} html body .product-thumb{aspect-ratio:1!important} @media(max-width:860px){ html body .product-gallery-panel{padding-inline-end:0!important} html body .product-gallery{ max-width:560px!important; margin-inline:auto!important; border-inline-end:0!important; padding-inline-end:0!important; } } /* 4) Content Creation single samples — mirror the Store product geometry. */ html body.content-section-page #contentApp .v73-sample-detail{ width:min(1040px,calc(100% - 48px))!important; max-width:1040px!important; margin-inline:auto!important; box-sizing:border-box!important; } html body.content-section-page #contentApp .v73-sample-hero{ display:grid!important; grid-template-columns:minmax(0,1fr) minmax(330px,.92fr)!important; gap:0!important; align-items:start!important; width:100%!important; max-width:100%!important; padding:28px 0 0!important; margin:0!important; border-bottom:1px solid var(--line)!important; box-sizing:border-box!important; } html[dir="rtl"] body.content-section-page #contentApp .v73-sample-hero{ grid-template-areas:"media info"!important; } html[dir="ltr"] body.content-section-page #contentApp .v73-sample-hero{ grid-template-areas:"media info"!important; } html body.content-section-page #contentApp .v73-sample-gallery{ grid-area:media!important; position:relative!important; display:grid!important; grid-template-columns:58px minmax(0,1fr)!important; grid-template-areas:"thumbs hero"!important; gap:10px!important; align-items:start!important; width:100%!important; max-width:500px!important; min-width:0!important; margin:0!important; padding:0 clamp(22px,3vw,38px) 0 0!important; border:0!important; border-inline-end:1px solid var(--line)!important; box-sizing:border-box!important; } html[dir="rtl"] body.content-section-page #contentApp .v73-sample-gallery{ padding:0 0 0 clamp(22px,3vw,38px)!important; } html body.content-section-page #contentApp .v73-sample-gallery::after{content:none!important;display:none!important} html body.content-section-page #contentApp .v73-sample-main{ grid-area:hero!important; width:100%!important; max-width:390px!important; aspect-ratio:4/5!important; margin:0!important; padding:0!important; overflow:hidden!important; border:1px solid var(--line)!important; background:var(--panel,var(--bg))!important; box-sizing:border-box!important; } html body.content-section-page #contentApp .v73-sample-main img{ width:100%!important; height:100%!important; display:block!important; object-fit:contain!important; object-position:center!important; margin:0!important; transform:none!important; } html body.content-section-page #contentApp .v73-sample-thumbs{ grid-area:thumbs!important; display:grid!important; grid-template-columns:1fr!important; grid-auto-rows:min-content!important; gap:8px!important; align-content:start!important; align-self:start!important; margin:0!important; padding:0!important; width:58px!important; } html body.content-section-page #contentApp .v73-sample-thumb{ width:58px!important; height:58px!important; min-width:58px!important; aspect-ratio:1!important; margin:0!important; padding:0!important; border:1px solid var(--line)!important; overflow:hidden!important; background:transparent!important; box-sizing:border-box!important; } html body.content-section-page #contentApp .v73-sample-thumb img{ width:100%!important; height:100%!important; display:block!important; object-fit:contain!important; transform:none!important; } html body.content-section-page #contentApp .v73-sample-info{ grid-area:info!important; min-width:0!important; padding:4px 0 30px clamp(24px,3.2vw,42px)!important; margin:0!important; box-sizing:border-box!important; align-self:start!important; } html[dir="rtl"] body.content-section-page #contentApp .v73-sample-info{ padding:4px clamp(24px,3.2vw,42px) 30px 0!important; } html body.content-section-page #contentApp .v73-sample-info h1{ margin:0!important; font-size:clamp(21px,2.4vw,32px)!important; font-weight:440!important; line-height:1.55!important; letter-spacing:-.01em!important; } html body.content-section-page #contentApp .v73-sample-info p{ margin:16px 0 0!important; max-width:34rem!important; font-size:10.5px!important; line-height:2!important; color:var(--caption-sub)!important; } html body.content-section-page #contentApp .v84-sample-lower{ width:100%!important; max-width:100%!important; margin:0!important; padding:24px 0 0!important; box-sizing:border-box!important; } /* Responsive equivalent of the Store detail experience. */ @media(max-width:860px){ html body.content-section-page #contentApp .v73-sample-detail{ width:min(100% - 32px,760px)!important; } html body.content-section-page #contentApp .v73-sample-hero{ grid-template-columns:1fr!important; grid-template-areas:"media" "info"!important; gap:26px!important; padding-top:24px!important; } html body.content-section-page #contentApp .v73-sample-gallery{ max-width:560px!important; margin-inline:auto!important; border-inline-end:0!important; padding-inline:0!important; } html body.content-section-page #contentApp .v73-sample-info, html[dir="rtl"] body.content-section-page #contentApp .v73-sample-info{ padding:0 0 24px!important; } } @media(max-width:620px){ html body.content-section-page #contentApp .v73-sample-detail{width:calc(100% - 24px)!important} html body.content-section-page #contentApp .v73-sample-gallery{ grid-template-columns:1fr!important; grid-template-areas:"hero" "thumbs"!important; gap:10px!important; } html body.content-section-page #contentApp .v73-sample-main{ width:min(100%,420px)!important; max-width:420px!important; margin-inline:auto!important; } html body.content-section-page #contentApp .v73-sample-thumbs{ width:min(100%,420px)!important; max-width:420px!important; grid-template-columns:repeat(4,minmax(0,1fr))!important; margin-inline:auto!important; gap:7px!important; } html body.content-section-page #contentApp .v73-sample-thumb{ width:100%!important; min-width:0!important; height:auto!important; } } /* 5) Responsive normalization — preserve two-column cover rhythm on phones, scale gutters per device, prevent horizontal drift and clipped headers. */ html,body{max-width:100%;overflow-x:hidden} html body .page-shell{box-sizing:border-box!important} @media(max-width:1180px){ html body .page-shell{ padding-left:max(clamp(18px,3.2vw,34px),env(safe-area-inset-left))!important; padding-right:max(clamp(18px,3.2vw,34px),env(safe-area-inset-right))!important; } html body .site-header{width:100%!important;max-width:min(920px,100%)!important} } @media(max-width:900px){ html body .page-shell{ padding-top:max(18px,env(safe-area-inset-top))!important; padding-bottom:max(38px,env(safe-area-inset-bottom))!important; } html body .brand-home-link{margin-top:0!important;transform:none!important} html body .brand-word{font-size:clamp(17px,4.2vw,20px)!important} html body .nav-frame{width:100%!important;max-width:100%!important;margin-top:18px!important} html body :is(.architecture-main,.civil-main,.research-main,.articles-main,.article-page,.product-main,.podcast-main,.v49-main,.detail-main){ width:100%!important; max-width:100%!important; min-width:0!important; box-sizing:border-box!important; } } @media(max-width:700px){ html body :is(.gallery-items-container,.category-grid,.v49-grid,.v49-work-grid,.civil-entry-grid,.research-grid,.store-category-grid,.store-grid){ grid-template-columns:repeat(2,minmax(0,1fr))!important; gap:clamp(18px,5vw,28px) clamp(10px,3vw,16px)!important; } html body :is(.gallery-item,.category-card,.v49-work-card){ width:100%!important; min-width:0!important; max-width:none!important; margin:0!important; } } @media(max-width:430px){ html body .page-shell{ padding-left:max(12px,env(safe-area-inset-left))!important; padding-right:max(12px,env(safe-area-inset-right))!important; } html body :is(.gallery-items-container,.category-grid,.v49-grid,.v49-work-grid,.civil-entry-grid,.research-grid,.store-category-grid,.store-grid){ gap:18px 9px!important; } html body :is(.project-title,.category-caption-text,.v49-work-card>span){font-size:11px!important;line-height:1.55!important} } /* 6) Reduced-motion and rendering-cost guardrails. */ @media(prefers-reduced-motion:reduce){ html body *,html body *::before,html body *::after{scroll-behavior:auto!important} } /* v180.1 — article action rail: every edge remains visible inside the animated side rail. */ html body .article-row.is-open .article-row-card, html body .article-row:focus-within .article-row-card{ grid-template-columns:minmax(0,1fr) 150px!important; } html[lang="fa"] body .article-row.is-open .article-row-card, html[lang="ar"] body .article-row.is-open .article-row-card, html[lang="fa"] body .article-row:focus-within .article-row-card, html[lang="ar"] body .article-row:focus-within .article-row-card{ grid-template-columns:150px minmax(0,1fr)!important; } html body .article-row.is-open .article-side, html body .article-row:focus-within .article-side{ padding:14px 13px!important; overflow:visible!important; } html body .article-actions{ box-sizing:border-box!important; padding:1px!important; gap:9px!important; overflow:visible!important; } html body .article-action{ display:flex!important; align-items:center!important; justify-content:center!important; gap:7px!important; border-top:1px solid var(--line)!important; border-right:1px solid var(--line)!important; border-bottom:1px solid var(--line)!important; border-left:1px solid var(--line)!important; overflow:hidden!important; background-clip:padding-box!important; } @media(max-width:900px){ html body .article-row.is-open .article-row-card, html body .article-row:focus-within .article-row-card, html[lang="fa"] body .article-row.is-open .article-row-card, html[lang="ar"] body .article-row.is-open .article-row-card, html[lang="fa"] body .article-row:focus-within .article-row-card, html[lang="ar"] body .article-row:focus-within .article-row-card{ grid-template-columns:1fr!important; } html body .article-row.is-open .article-side, html body .article-row:focus-within .article-side{padding:12px 15px!important} } /* v180.2 — one shared geometry for Store and Content Creation sample detail. */ :root{--emkan-single-hero:390px;--emkan-single-thumb:58px;--emkan-single-gap:10px;--emkan-single-separator-gap:clamp(22px,3vw,38px)} html body .product-gallery, html body.content-section-page #contentApp .v73-sample-gallery{ grid-template-columns:var(--emkan-single-thumb) minmax(0,1fr)!important; gap:var(--emkan-single-gap)!important; max-width:calc(var(--emkan-single-hero) + var(--emkan-single-thumb) + var(--emkan-single-gap) + var(--emkan-single-separator-gap))!important; border-inline-end:1px solid var(--line)!important; padding-inline-end:var(--emkan-single-separator-gap)!important; box-sizing:border-box!important; } html body .product-main-image, html body.content-section-page #contentApp .v73-sample-main{ width:100%!important; max-width:var(--emkan-single-hero)!important; aspect-ratio:4/5!important; box-sizing:border-box!important; } html body .product-thumbs, html body.content-section-page #contentApp .v73-sample-thumbs{width:var(--emkan-single-thumb)!important} html body .product-thumb, html body.content-section-page #contentApp .v73-sample-thumb{ width:var(--emkan-single-thumb)!important; min-width:var(--emkan-single-thumb)!important; height:var(--emkan-single-thumb)!important; aspect-ratio:1!important; box-sizing:border-box!important; } html body.content-section-page #contentApp .v73-sample-main img, html body.content-section-page #contentApp .v73-sample-main:hover img, html body.content-section-page #contentApp .v73-sample-thumb img, html body.content-section-page #contentApp .v73-sample-thumb:hover img{ filter:none!important;transform:none!important;scale:1!important;object-fit:contain!important } @media(max-width:860px){ html body .product-gallery, html body.content-section-page #contentApp .v73-sample-gallery{ border-inline-end:0!important; padding-inline-end:0!important; } } @media(max-width:620px){ :root{--emkan-single-thumb:48px;--emkan-single-gap:8px} html body .product-gallery, html body.content-section-page #contentApp .v73-sample-gallery{ grid-template-columns:1fr!important; grid-template-areas:"hero" "thumbs"!important; max-width:100%!important; } html body .product-main-image, html body.content-section-page #contentApp .v73-sample-main{ width:min(100%,420px)!important; max-width:420px!important; margin-inline:auto!important; } html body .product-thumbs, html body.content-section-page #contentApp .v73-sample-thumbs{ width:min(100%,420px)!important; max-width:420px!important; grid-template-columns:repeat(4,minmax(0,1fr))!important; margin-inline:auto!important; } html body .product-thumb, html body.content-section-page #contentApp .v73-sample-thumb{ width:100%!important;min-width:0!important;height:auto!important } } /* v180.3 — device-scale normalization without forcing desktop dimensions on small screens. */ html body img,html body video,html body svg{max-width:100%} html body :is(.page-shell,.site-header,.nav-frame,main,section,article,aside){min-width:0} @media(max-width:1024px){ html body .site-header{max-width:100%!important} html body :is(.product-main,.content-main,.content-section-main,.articles-main,.article-page,.research-main,.architecture-main,.civil-main){width:min(100%,920px)!important} } @media(max-width:768px){ html body .page-shell{padding-inline:max(16px,env(safe-area-inset-left))!important} html body :is(.product-main,.articles-main,.article-page,.research-main,.architecture-main,.civil-main){padding-top:22px!important} html body :is(.product-stage,.v73-sample-hero){scroll-margin-top:72px} } @media(max-width:520px){ html body .page-shell{padding-inline:max(12px,env(safe-area-inset-left))!important} html body .brand-word{font-size:18px!important;letter-spacing:.24em!important} html body :is(.product-main,.content-section-main,.articles-main,.article-page,.research-main,.architecture-main,.civil-main){padding-bottom:42px!important} } @media(max-width:360px){ html body .page-shell{padding-inline:max(10px,env(safe-area-inset-left))!important} html body :is(.gallery-items-container,.category-grid,.v49-grid,.v49-work-grid,.civil-entry-grid,.research-grid,.store-category-grid,.store-grid){gap:15px 8px!important} } /* Keep layout motion calm and avoid unnecessary image work below the fold. */ html{scroll-behavior:smooth} @media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}} /* v180.4 — article action frames: inset, complete, and independent from the side divider. */ html body .article-row.is-open .article-actions, html body .article-row:focus-within .article-actions{ display:flex!important; flex-direction:column!important; gap:10px!important; width:100%!important; padding:1px 3px!important; box-sizing:border-box!important; overflow:visible!important; } html body .article-row.is-open .article-action, html body .article-row:focus-within .article-action{ flex:0 0 auto!important; width:100%!important; min-height:40px!important; margin:0!important; padding:8px 11px!important; border:0!important; border-radius:0!important; background:transparent!important; box-shadow:inset 0 0 0 1px var(--line)!important; overflow:visible!important; box-sizing:border-box!important; } html body .article-row.is-open .article-action:hover, html body .article-row.is-open .article-action:focus-visible, html body .article-row:focus-within .article-action:hover, html body .article-row:focus-within .article-action:focus-visible{ box-shadow:inset 0 0 0 1px var(--hover-accent)!important; } html body .article-row.is-open .article-side::before, html body .article-row:focus-within .article-side::before{z-index:0!important} html body .article-row.is-open .article-actions, html body .article-row:focus-within .article-actions, html body .article-row.is-open .article-meta-stack, html body .article-row:focus-within .article-meta-stack{position:relative!important;z-index:1!important} @media(max-width:900px){ html body .article-row.is-open .article-actions, html body .article-row:focus-within .article-actions{ display:grid!important; grid-template-columns:repeat(2,minmax(0,1fr))!important; gap:9px!important; padding:1px!important; } } @media(max-width:430px){ html body .article-row.is-open .article-actions, html body .article-row:focus-within .article-actions{grid-template-columns:1fr!important} } /* v180.5 — final single-detail alignment. Store and Content Creation share one media rail, one hero size and one divider whose height is the hero. */ html body .product-gallery, html body.content-section-page #contentApp .v73-sample-gallery{ align-self:start!important; min-height:0!important; height:auto!important; } html body .product-main-image, html body.content-section-page #contentApp .v73-sample-main{ align-self:start!important; } html body .product-gallery::after, html body.content-section-page #contentApp .v73-sample-gallery::after{content:none!important;display:none!important} html body .product-info, html body.content-section-page #contentApp .v73-sample-info{min-width:0!important} /* v180.6 — device-safe geometry: controls and content never inherit desktop minimum widths; tap targets stay usable while the approved two-column cover rhythm remains intact on phones. */ @media(max-width:900px){ html body :is(input,textarea,select,button,a){max-width:100%} html body :is(.product-stage,.v73-sample-hero,.article-row-card,.emkan-ai-workspace){min-width:0!important} } @media(max-width:700px){ html body :is(.gallery-items-container,.category-grid,.v49-grid,.v49-work-grid,.civil-entry-grid,.research-grid,.store-category-grid,.store-grid) > *{min-width:0!important} html body :is(.gallery-items-container,.category-grid,.v49-grid,.v49-work-grid,.civil-entry-grid,.research-grid,.store-category-grid,.store-grid) img{width:100%!important;height:auto!important;display:block!important} } @media(max-width:390px){ html body .page-shell{padding-inline:max(10px,env(safe-area-inset-left))!important} html body :is(.gallery-items-container,.category-grid,.v49-grid,.v49-work-grid,.civil-entry-grid,.research-grid,.store-category-grid,.store-grid){column-gap:8px!important} } /* v180.7 — the Store/Content divider is anchored to the large image itself, so its visible height can never exceed the hero image even with many thumbs. */ html body .product-gallery, html body.content-section-page #contentApp .v73-sample-gallery{ border-inline-end:0!important; } html body .product-main-image, html body.content-section-page #contentApp .v73-sample-main{ position:relative!important; overflow:visible!important; } html body .product-main-image::after, html body.content-section-page #contentApp .v73-sample-main::after{ content:""!important; display:block!important; position:absolute!important; inset-inline-end:calc(-1 * var(--emkan-single-separator-gap))!important; top:0!important; width:1px!important; height:100%!important; background:var(--line)!important; pointer-events:none!important; } html body .product-main-image>img, html body .product-main-image:hover>img, html body.content-section-page #contentApp .v73-sample-main>img, html body.content-section-page #contentApp .v73-sample-main:hover>img{ transform:none!important; scale:1!important; } @media(max-width:860px){ html body .product-main-image::after, html body.content-section-page #contentApp .v73-sample-main::after{display:none!important} } /* v180.8 — canonical Store ↔ Content single-detail parity. Uses the Content app's historical double-id specificity so no older patch can shrink the sample gallery on tablet/mobile. */ html body .product-main, html body.content-section-page #contentApp#contentApp .v73-sample-detail{ width:min(1040px,calc(100% - 48px))!important; max-width:1040px!important; margin-inline:auto!important; box-sizing:border-box!important; } html body .product-stage, html body.content-section-page #contentApp#contentApp .v73-sample-hero{ display:grid!important; grid-template-columns:minmax(0,1fr) minmax(330px,.92fr)!important; gap:0!important; align-items:start!important; padding-top:28px!important; border-bottom:1px solid var(--line)!important; box-sizing:border-box!important; } html body .product-gallery-panel{ padding-inline-end:0!important; border-inline-end:0!important; padding-bottom:30px!important; min-width:0!important; } html body .product-gallery, html body.content-section-page #contentApp#contentApp .v73-sample-gallery{ display:grid!important; grid-template-columns:var(--emkan-single-thumb) minmax(0,1fr)!important; grid-template-areas:"thumbs hero"!important; gap:var(--emkan-single-gap)!important; align-items:start!important; width:100%!important; max-width:calc(var(--emkan-single-hero) + var(--emkan-single-thumb) + var(--emkan-single-gap) + var(--emkan-single-separator-gap))!important; margin:0!important; padding:0 var(--emkan-single-separator-gap) 0 0!important; border:0!important; box-sizing:border-box!important; } html[dir="rtl"] body .product-gallery, html[dir="rtl"] body.content-section-page #contentApp#contentApp .v73-sample-gallery{ padding:0 0 0 var(--emkan-single-separator-gap)!important; } html body .product-main-image, html body.content-section-page #contentApp#contentApp .v73-sample-main{ grid-area:hero!important; width:100%!important; max-width:var(--emkan-single-hero)!important; aspect-ratio:4/5!important; margin:0!important; box-sizing:border-box!important; } html body .product-thumbs, html body.content-section-page #contentApp#contentApp .v73-sample-thumbs{ grid-area:thumbs!important; display:grid!important; grid-template-columns:1fr!important; grid-auto-rows:min-content!important; gap:8px!important; align-content:start!important; width:var(--emkan-single-thumb)!important; margin:0!important; padding:0!important; } html body .product-thumb, html body.content-section-page #contentApp#contentApp .v73-sample-thumb{ width:var(--emkan-single-thumb)!important; min-width:var(--emkan-single-thumb)!important; height:var(--emkan-single-thumb)!important; aspect-ratio:1!important; margin:0!important; box-sizing:border-box!important; } html body .product-info, html body.content-section-page #contentApp#contentApp .v73-sample-info{ min-width:0!important; padding:4px 0 30px clamp(24px,3.2vw,42px)!important; margin:0!important; box-sizing:border-box!important; } html[dir="rtl"] body .product-info, html[dir="rtl"] body.content-section-page #contentApp#contentApp .v73-sample-info{ padding:4px clamp(24px,3.2vw,42px) 30px 0!important; } @media(max-width:860px){ html body .product-main, html body.content-section-page #contentApp#contentApp .v73-sample-detail{ width:min(100% - 32px,1040px)!important; } html body .product-stage, html body.content-section-page #contentApp#contentApp .v73-sample-hero{ grid-template-columns:1fr!important; grid-template-areas:"media" "info"!important; gap:26px!important; padding-top:24px!important; } html body .product-gallery, html body.content-section-page #contentApp#contentApp .v73-sample-gallery{ max-width:520px!important; margin-inline:auto!important; padding-inline:0!important; } html body .product-info, html[dir="rtl"] body .product-info, html body.content-section-page #contentApp#contentApp .v73-sample-info, html[dir="rtl"] body.content-section-page #contentApp#contentApp .v73-sample-info{ padding:0 0 24px!important; } } @media(max-width:620px){ html body .product-main, html body.content-section-page #contentApp#contentApp .v73-sample-detail{ width:min(100% - 28px,1040px)!important; } html body .product-gallery, html body.content-section-page #contentApp#contentApp .v73-sample-gallery{ grid-template-columns:1fr!important; grid-template-areas:"hero" "thumbs"!important; width:100%!important; max-width:100%!important; gap:9px!important; } html body .product-main-image, html body.content-section-page #contentApp#contentApp .v73-sample-main{ width:100%!important; max-width:none!important; margin-inline:auto!important; } html body .product-thumbs, html body.content-section-page #contentApp#contentApp .v73-sample-thumbs{ width:100%!important; max-width:none!important; grid-template-columns:repeat(4,minmax(0,1fr))!important; gap:7px!important; margin-inline:auto!important; } html body .product-thumb, html body.content-section-page #contentApp#contentApp .v73-sample-thumb{ width:100%!important; min-width:0!important; height:auto!important; } } /* v180.9 — hard lock for Store ↔ Content Creation single-detail parity. Older page-specific patches used high-specificity three-column grids and panel paddings. These selectors intentionally outrank them. The divider is drawn only by the hero image pseudo-element, so its height is exactly the large image height. */ @media (min-width:861px){ html body .product-main.product-main .product-stage.product-stage, html body.content-section-page #contentApp#contentApp .v73-sample-hero.v73-sample-hero{ display:grid!important; grid-template-columns:minmax(0,1fr) minmax(330px,.92fr)!important; grid-template-areas:"media info"!important; column-gap:0!important; row-gap:0!important; gap:0!important; align-items:start!important; direction:inherit!important; padding-top:28px!important; border-bottom:1px solid var(--line)!important; } html body .product-main.product-main .product-stage.product-stage::before, html body .product-main.product-main .product-stage.product-stage::after, html body.content-section-page #contentApp#contentApp .v73-sample-hero.v73-sample-hero::before, html body.content-section-page #contentApp#contentApp .v73-sample-hero.v73-sample-hero::after{ content:none!important; display:none!important; } html body .product-main.product-main .product-gallery-panel.product-gallery-panel{ grid-area:media!important; min-width:0!important; width:100%!important; max-width:none!important; padding:0 0 30px!important; border:0!important; align-self:start!important; } html body .product-main.product-main .product-gallery.product-gallery, html body.content-section-page #contentApp#contentApp .v73-sample-gallery.v73-sample-gallery{ grid-area:media!important; display:grid!important; grid-template-columns:var(--emkan-single-thumb) minmax(0,1fr)!important; grid-template-areas:"thumbs hero"!important; gap:var(--emkan-single-gap)!important; direction:inherit!important; align-items:start!important; align-self:start!important; width:100%!important; max-width:calc(var(--emkan-single-hero) + var(--emkan-single-thumb) + var(--emkan-single-gap) + var(--emkan-single-separator-gap))!important; min-width:0!important; margin:0!important; padding:0 var(--emkan-single-separator-gap) 0 0!important; border:0!important; box-sizing:border-box!important; } html[dir="rtl"] body .product-main.product-main .product-gallery.product-gallery, html[dir="rtl"] body.content-section-page #contentApp#contentApp .v73-sample-gallery.v73-sample-gallery{ padding:0 0 0 var(--emkan-single-separator-gap)!important; } html body .product-main.product-main .product-main-image.product-main-image, html body.content-section-page #contentApp#contentApp .v73-sample-main.v73-sample-main{ grid-area:hero!important; position:relative!important; width:100%!important; max-width:var(--emkan-single-hero)!important; aspect-ratio:4/5!important; height:auto!important; min-height:0!important; margin:0!important; padding:0!important; align-self:start!important; box-sizing:border-box!important; overflow:visible!important; } html body .product-main.product-main .product-main-image.product-main-image>img, html body.content-section-page #contentApp#contentApp .v73-sample-main.v73-sample-main>img{ width:100%!important; height:100%!important; display:block!important; object-fit:contain!important; object-position:center!important; margin:0!important; transform:none!important; } html body .product-main.product-main .product-thumbs.product-thumbs, html body.content-section-page #contentApp#contentApp .v73-sample-thumbs.v73-sample-thumbs{ grid-area:thumbs!important; width:var(--emkan-single-thumb)!important; max-width:var(--emkan-single-thumb)!important; min-width:var(--emkan-single-thumb)!important; margin:0!important; padding:0!important; align-self:start!important; } html body .product-main.product-main .product-info.product-info, html body.content-section-page #contentApp#contentApp .v73-sample-info.v73-sample-info{ grid-area:info!important; min-width:0!important; width:auto!important; max-width:none!important; margin:0!important; padding:4px 0 30px clamp(24px,3.2vw,42px)!important; align-self:start!important; box-sizing:border-box!important; } html[dir="rtl"] body .product-main.product-main .product-info.product-info, html[dir="rtl"] body.content-section-page #contentApp#contentApp .v73-sample-info.v73-sample-info{ padding:4px clamp(24px,3.2vw,42px) 30px 0!important; } } /* ===== EMKAN v181 final corrections ===== */ /* Article action frames: independent, complete rectangles with breathing room. */ html body .article-row.is-open .article-side,html body .article-row:focus-within .article-side{overflow:visible!important;padding-inline:12px!important} html body .article-row.is-open .article-actions,html body .article-row:focus-within .article-actions{display:grid!important;grid-template-columns:1fr!important;gap:9px!important;width:calc(100% - 8px)!important;margin-inline:4px!important;padding:0!important;overflow:visible!important;box-sizing:border-box!important} html body .article-row.is-open .article-action,html body .article-row:focus-within .article-action{display:flex!important;align-items:center!important;justify-content:center!important;width:100%!important;min-height:40px!important;margin:0!important;padding:8px 10px!important;border:1px solid var(--line)!important;box-shadow:none!important;background:transparent!important;box-sizing:border-box!important;overflow:hidden!important;isolation:isolate!important} html body .article-row.is-open .article-action:is(:hover,:focus-visible),html body .article-row:focus-within .article-action:is(:hover,:focus-visible){border-color:var(--hover-accent)!important;color:var(--hover-accent)!important} @media(min-width:901px){html body .article-row.is-open .article-row-card,html body .article-row:focus-within .article-row-card{grid-template-columns:minmax(0,1fr) 164px!important}html[lang="fa"] body .article-row.is-open .article-row-card,html[lang="ar"] body .article-row.is-open .article-row-card,html[lang="fa"] body .article-row:focus-within .article-row-card,html[lang="ar"] body .article-row:focus-within .article-row-card{grid-template-columns:164px minmax(0,1fr)!important}} @media(max-width:900px){html body .article-row.is-open .article-actions,html body .article-row:focus-within .article-actions{width:100%!important;margin:0!important;grid-template-columns:repeat(2,minmax(0,1fr))!important}}@media(max-width:430px){html body .article-row.is-open .article-actions,html body .article-row:focus-within .article-actions{grid-template-columns:1fr!important}} /* Store and Content Creation single samples share one exact gallery geometry. */ :root{--emkan-detail-hero:390px;--emkan-detail-thumb:58px;--emkan-detail-gap:10px;--emkan-detail-divider-gap:clamp(22px,3vw,38px)} @media(min-width:861px){ html body .product-main.product-main .product-stage.product-stage,html body.content-section-page #contentApp#contentApp .v73-sample-hero.v73-sample-hero{display:grid!important;grid-template-columns:minmax(0,1fr) minmax(330px,.92fr)!important;grid-template-areas:"media info"!important;gap:0!important;align-items:start!important;padding-top:28px!important;border-bottom:1px solid var(--line)!important} html body .product-main.product-main .product-gallery-panel.product-gallery-panel{grid-area:media!important;padding:0 0 30px!important;border:0!important;min-width:0!important} html body .product-main.product-main .product-gallery.product-gallery,html body.content-section-page #contentApp#contentApp .v73-sample-gallery.v73-sample-gallery{grid-area:media!important;display:grid!important;grid-template-columns:var(--emkan-detail-thumb) minmax(0,1fr)!important;grid-template-areas:"thumbs hero"!important;gap:var(--emkan-detail-gap)!important;align-items:start!important;width:100%!important;max-width:calc(var(--emkan-detail-hero) + var(--emkan-detail-thumb) + var(--emkan-detail-gap) + var(--emkan-detail-divider-gap))!important;margin:0!important;padding:0 var(--emkan-detail-divider-gap) 0 0!important;border:0!important;box-sizing:border-box!important} html[dir="rtl"] body .product-main.product-main .product-gallery.product-gallery,html[dir="rtl"] body.content-section-page #contentApp#contentApp .v73-sample-gallery.v73-sample-gallery{padding:0 0 0 var(--emkan-detail-divider-gap)!important} html body .product-main.product-main .product-main-image.product-main-image,html body.content-section-page #contentApp#contentApp .v73-sample-main.v73-sample-main{grid-area:hero!important;position:relative!important;width:100%!important;max-width:var(--emkan-detail-hero)!important;aspect-ratio:4/5!important;height:auto!important;margin:0!important;overflow:visible!important;box-sizing:border-box!important} html body .product-main.product-main .product-main-image.product-main-image::after,html body.content-section-page #contentApp#contentApp .v73-sample-main.v73-sample-main::after{content:""!important;display:block!important;position:absolute!important;inset-inline-end:calc(-1 * var(--emkan-detail-divider-gap))!important;top:0!important;width:1px!important;height:100%!important;background:var(--line)!important;pointer-events:none!important} html body .product-main.product-main .product-main-image.product-main-image>img,html body.content-section-page #contentApp#contentApp .v73-sample-main.v73-sample-main>img{width:100%!important;height:100%!important;display:block!important;object-fit:contain!important;object-position:center!important;transform:none!important;filter:none!important} html body .product-main.product-main .product-thumbs.product-thumbs,html body.content-section-page #contentApp#contentApp .v73-sample-thumbs.v73-sample-thumbs{grid-area:thumbs!important;display:grid!important;grid-template-columns:1fr!important;grid-auto-rows:min-content!important;gap:8px!important;align-content:start!important;width:var(--emkan-detail-thumb)!important;min-width:var(--emkan-detail-thumb)!important;margin:0!important;padding:0!important} html body .product-main.product-main .product-thumb.product-thumb,html body.content-section-page #contentApp#contentApp .v73-sample-thumb.v73-sample-thumb{width:var(--emkan-detail-thumb)!important;min-width:var(--emkan-detail-thumb)!important;height:var(--emkan-detail-thumb)!important;aspect-ratio:1!important;margin:0!important} html body .product-main.product-main .product-info.product-info,html body.content-section-page #contentApp#contentApp .v73-sample-info.v73-sample-info{grid-area:info!important;min-width:0!important;margin:0!important;padding:4px 0 30px clamp(24px,3.2vw,42px)!important;box-sizing:border-box!important} html[dir="rtl"] body .product-main.product-main .product-info.product-info,html[dir="rtl"] body.content-section-page #contentApp#contentApp .v73-sample-info.v73-sample-info{padding:4px clamp(24px,3.2vw,42px) 30px 0!important} } @media(max-width:860px){html body .product-main.product-main,html body.content-section-page #contentApp#contentApp .v73-sample-detail.v73-sample-detail{width:min(100% - 32px,760px)!important;margin-inline:auto!important}html body .product-stage,html body.content-section-page #contentApp#contentApp .v73-sample-hero{grid-template-columns:1fr!important;grid-template-areas:"media" "info"!important;gap:24px!important;padding-top:22px!important}html body .product-main-image::after,html body.content-section-page #contentApp .v73-sample-main::after{display:none!important}html body .product-gallery,html body.content-section-page #contentApp#contentApp .v73-sample-gallery{max-width:520px!important;margin-inline:auto!important;padding-inline:0!important}html body .product-info,html[dir="rtl"] body .product-info,html body.content-section-page #contentApp#contentApp .v73-sample-info,html[dir="rtl"] body.content-section-page #contentApp#contentApp .v73-sample-info{padding:0 0 24px!important}} @media(max-width:620px){html body .product-main.product-main,html body.content-section-page #contentApp#contentApp .v73-sample-detail.v73-sample-detail{width:calc(100% - 28px)!important}html body .product-gallery,html body.content-section-page #contentApp#contentApp .v73-sample-gallery{grid-template-columns:1fr!important;grid-template-areas:"hero" "thumbs"!important;gap:9px!important;width:100%!important;max-width:100%!important}html body .product-main-image,html body.content-section-page #contentApp#contentApp .v73-sample-main{width:100%!important;max-width:none!important;margin-inline:auto!important}html body .product-thumbs,html body.content-section-page #contentApp#contentApp .v73-sample-thumbs{width:100%!important;min-width:0!important;grid-template-columns:repeat(4,minmax(0,1fr))!important;gap:7px!important}html body .product-thumb,html body.content-section-page #contentApp#contentApp .v73-sample-thumb{width:100%!important;min-width:0!important;height:auto!important;aspect-ratio:1!important}} /* Responsive hardening across real device widths. */ html,body{max-width:100%;overflow-x:hidden}img,video,svg,canvas{max-width:100%}main,section,article,aside,nav,header,footer,div{min-width:0} @media(max-width:1200px){html body .page-shell{max-width:100%!important}html body :is(.architecture-main,.civil-main,.research-main,.articles-main,.article-page,.product-main,.podcast-main,.content-main,.content-section-main){max-width:calc(100vw - 36px)!important}} @media(max-width:900px){html body :is(.site-header,.nav-frame){max-width:calc(100vw - 24px)!important;margin-inline:auto!important}html body :is(.gallery-items-container,.category-grid,.v49-grid,.v49-work-grid,.civil-entry-grid,.research-grid,.store-category-grid,.store-grid){min-width:0!important}} @media(max-width:620px){html body :is(.gallery-items-container,.category-grid,.v49-grid,.v49-work-grid,.civil-entry-grid,.research-grid,.store-category-grid,.store-grid){grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:14px 8px!important}html body :is(.gallery-items-container,.category-grid,.v49-grid,.v49-work-grid,.civil-entry-grid,.research-grid,.store-category-grid,.store-grid)>*{min-width:0!important;max-width:100%!important}html body :is(.gallery-items-container,.category-grid,.v49-grid,.v49-work-grid,.civil-entry-grid,.research-grid,.store-category-grid,.store-grid) img{width:100%!important;height:auto!important;display:block!important}} @media(max-width:390px){html body .page-shell{padding-inline:max(9px,env(safe-area-inset-left))!important}html body :is(.site-header,.nav-frame){max-width:calc(100vw - 18px)!important}html body :is(.gallery-items-container,.category-grid,.v49-grid,.v49-work-grid,.civil-entry-grid,.research-grid,.store-category-grid,.store-grid){gap:12px 7px!important}} /* Rendering cost: delay layout/paint for genuinely below-fold sections. */ @supports(content-visibility:auto){html body :is(.related,.related-section,.article-related,.v49-related,.product-related,.course-related){content-visibility:auto;contain-intrinsic-size:1px 420px}} /* ===== EMKAN v181.1 deadline hardening ===== */ /* Articles: deliberate first-click reveal, separate complete action frames. */ html body .article-row:not(.is-open):hover .article-detail, html body .article-row:not(.is-open):focus-within .article-detail{ grid-template-rows:0fr!important;opacity:0!important;padding-bottom:0!important; } html body .article-row:not(.is-open):hover .article-side, html body .article-row:not(.is-open):focus-within .article-side{ opacity:0!important;pointer-events:none!important; } html body .article-detail{ transition:grid-template-rows .68s cubic-bezier(.22,.61,.36,1),opacity .38s ease,padding .68s cubic-bezier(.22,.61,.36,1)!important; } html body .article-side{ transition:opacity .38s ease,transform .58s cubic-bezier(.22,.61,.36,1),max-height .58s cubic-bezier(.22,.61,.36,1)!important; } html body .article-row.is-open .article-side, html body .article-row:focus-within.is-open .article-side{ padding:14px 12px 16px!important; } html body .article-row.is-open .article-actions, html body .article-row:focus-within.is-open .article-actions{ display:grid!important;grid-template-columns:1fr!important;gap:10px!important; width:100%!important;margin:0!important;padding:0!important;box-sizing:border-box!important; } html body .article-row.is-open .article-action, html body .article-row:focus-within.is-open .article-action{ display:flex!important;width:100%!important;min-height:40px!important;margin:0!important; padding:8px 12px!important;border:1px solid color-mix(in srgb,var(--fg) 24%,var(--line))!important; background:var(--bg)!important;box-sizing:border-box!important;overflow:visible!important; } html body .article-row.is-open .article-action:hover, html body .article-row.is-open .article-action:focus-visible{ border-color:var(--hover-accent)!important;color:var(--hover-accent)!important; } @media(max-width:900px){ html body .article-row.is-open .article-side{padding:13px 16px 15px!important} html body .article-row.is-open .article-actions{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:9px!important} } @media(max-width:430px){html body .article-row.is-open .article-actions{grid-template-columns:1fr!important}} /* Store and Content Creation detail pages: one geometry, one image-height divider. */ :root{--emkan-detail-max:1040px;--emkan-detail-image:390px;--emkan-detail-thumb:58px;--emkan-detail-thumb-gap:8px;--emkan-detail-divider-gap:clamp(24px,3.2vw,42px)} html body .product-main.product-main, html body.content-section-page #contentApp#contentApp .v73-sample-detail.v73-sample-detail{ width:min(var(--emkan-detail-max),calc(100% - 48px))!important;max-width:var(--emkan-detail-max)!important; margin-inline:auto!important;box-sizing:border-box!important; } @media(min-width:861px){ html body .product-main.product-main .product-stage.product-stage, html body.content-section-page #contentApp#contentApp .v73-sample-hero.v73-sample-hero{ display:grid!important;grid-template-columns:minmax(0,calc(var(--emkan-detail-thumb) + 10px + var(--emkan-detail-image) + var(--emkan-detail-divider-gap))) minmax(330px,1fr)!important; grid-template-areas:"media info"!important;gap:0!important;align-items:start!important; padding-top:28px!important;border-bottom:1px solid var(--line)!important; } html body .product-main.product-main .product-gallery-panel.product-gallery-panel{ grid-area:media!important;padding:0!important;border:0!important;min-width:0!important; } html body .product-main.product-main .product-gallery.product-gallery, html body.content-section-page #contentApp#contentApp .v73-sample-gallery.v73-sample-gallery{ grid-area:media!important;display:grid!important; grid-template-columns:var(--emkan-detail-thumb) minmax(0,var(--emkan-detail-image))!important; grid-template-areas:"thumbs hero"!important;gap:10px!important;align-items:start!important; width:max-content!important;max-width:100%!important;margin:0!important; padding:0 var(--emkan-detail-divider-gap) 30px 0!important;border:0!important;box-sizing:border-box!important; } html[dir="rtl"] body .product-main.product-main .product-gallery.product-gallery, html[dir="rtl"] body.content-section-page #contentApp#contentApp .v73-sample-gallery.v73-sample-gallery{ padding:0 0 30px var(--emkan-detail-divider-gap)!important; } html body .product-main.product-main .product-main-image.product-main-image, html body.content-section-page #contentApp#contentApp .v73-sample-main.v73-sample-main{ grid-area:hero!important;position:relative!important;width:var(--emkan-detail-image)!important; max-width:100%!important;aspect-ratio:4/5!important;height:auto!important;margin:0!important; overflow:visible!important;box-sizing:border-box!important; } html body .product-main.product-main .product-main-image.product-main-image::after, html body.content-section-page #contentApp#contentApp .v73-sample-main.v73-sample-main::after{ content:""!important;display:block!important;position:absolute!important; inset-inline-end:calc(-1 * var(--emkan-detail-divider-gap))!important;top:0!important; width:1px!important;height:100%!important;background:var(--line)!important;pointer-events:none!important; } html body .product-main.product-main .product-main-image.product-main-image>img, html body.content-section-page #contentApp#contentApp .v73-sample-main.v73-sample-main>img{ width:100%!important;height:100%!important;display:block!important;object-fit:contain!important; object-position:center!important;transform:none!important;filter:none!important; } html body .product-main.product-main .product-thumbs.product-thumbs, html body.content-section-page #contentApp#contentApp .v73-sample-thumbs.v73-sample-thumbs{ grid-area:thumbs!important;display:grid!important;grid-template-columns:1fr!important; grid-auto-rows:min-content!important;gap:var(--emkan-detail-thumb-gap)!important;align-content:start!important; width:var(--emkan-detail-thumb)!important;min-width:var(--emkan-detail-thumb)!important;margin:0!important;padding:0!important; } html body .product-main.product-main .product-thumb.product-thumb, html body.content-section-page #contentApp#contentApp .v73-sample-thumb.v73-sample-thumb{ width:var(--emkan-detail-thumb)!important;min-width:var(--emkan-detail-thumb)!important; height:var(--emkan-detail-thumb)!important;aspect-ratio:1!important;margin:0!important;padding:0!important;overflow:hidden!important; } html body .product-main.product-main .product-info.product-info, html body.content-section-page #contentApp#contentApp .v73-sample-info.v73-sample-info{ grid-area:info!important;min-width:0!important;margin:0!important;padding:4px 0 30px var(--emkan-detail-divider-gap)!important;box-sizing:border-box!important; } html[dir="rtl"] body .product-main.product-main .product-info.product-info, html[dir="rtl"] body.content-section-page #contentApp#contentApp .v73-sample-info.v73-sample-info{ padding:4px var(--emkan-detail-divider-gap) 30px 0!important; } html body.content-section-page #contentApp#contentApp .v73-sample-info h1{ margin:0!important;font-size:clamp(21px,2.4vw,32px)!important;font-weight:440!important;line-height:1.55!important;letter-spacing:-.01em!important; } html body.content-section-page #contentApp#contentApp .v73-sample-info p{ margin:16px 0 0!important;max-width:34rem!important;font-size:10.5px!important;line-height:2!important;color:var(--caption-sub)!important; } } @media(max-width:1180px) and (min-width:861px){:root{--emkan-detail-image:360px;--emkan-detail-thumb:54px;--emkan-detail-divider-gap:28px}} @media(max-width:980px) and (min-width:861px){:root{--emkan-detail-image:330px;--emkan-detail-thumb:52px;--emkan-detail-divider-gap:22px}} @media(max-width:860px){ html body .product-main.product-main, html body.content-section-page #contentApp#contentApp .v73-sample-detail.v73-sample-detail{width:min(100% - 32px,760px)!important} html body .product-stage,html body.content-section-page #contentApp#contentApp .v73-sample-hero{ grid-template-columns:1fr!important;grid-template-areas:"media" "info"!important;gap:24px!important;padding-top:22px!important; } html body .product-gallery,html body.content-section-page #contentApp#contentApp .v73-sample-gallery{ width:100%!important;max-width:520px!important;margin-inline:auto!important;padding:0 0 22px!important; } html body .product-main-image::after,html body.content-section-page #contentApp .v73-sample-main::after{display:none!important} html body .product-info,html[dir="rtl"] body .product-info, html body.content-section-page #contentApp#contentApp .v73-sample-info, html[dir="rtl"] body.content-section-page #contentApp#contentApp .v73-sample-info{padding:0 0 24px!important} } @media(max-width:620px){ html body .product-main.product-main, html body.content-section-page #contentApp#contentApp .v73-sample-detail.v73-sample-detail{width:calc(100% - 28px)!important} html body .product-gallery,html body.content-section-page #contentApp#contentApp .v73-sample-gallery{ grid-template-columns:1fr!important;grid-template-areas:"hero" "thumbs"!important;gap:9px!important;max-width:100%!important; } html body .product-main-image,html body.content-section-page #contentApp#contentApp .v73-sample-main{ width:100%!important;max-width:none!important;margin-inline:auto!important; } html body .product-thumbs,html body.content-section-page #contentApp#contentApp .v73-sample-thumbs{ width:100%!important;min-width:0!important;grid-template-columns:repeat(4,minmax(0,1fr))!important;gap:7px!important; } html body .product-thumb,html body.content-section-page #contentApp#contentApp .v73-sample-thumb{ width:100%!important;min-width:0!important;height:auto!important;aspect-ratio:1!important; } } /* Responsive device hardening: no fixed desktop geometry leaks into phones/tablets. */ html,body{width:100%;max-width:100%;overflow-x:hidden} img,picture,video,svg,canvas,iframe{max-width:100%;height:auto} input,select,textarea,button{max-width:100%;box-sizing:border-box} @media(max-width:1024px){ html body :is(.architecture-main,.civil-main,.research-main,.articles-main,.article-page,.product-main,.podcast-main,.content-main,.content-section-main){width:min(100% - 32px,920px)!important;max-width:920px!important;margin-inline:auto!important} } @media(max-width:768px){ html body :is(.site-header,.nav-frame){width:calc(100% - 24px)!important;max-width:calc(100% - 24px)!important;margin-inline:auto!important} html body :is(.gallery-items-container,.category-grid,.v49-grid,.v49-work-grid,.civil-entry-grid,.research-grid,.store-category-grid,.store-grid){grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:14px 9px!important} html body :is(.gallery-items-container,.category-grid,.v49-grid,.v49-work-grid,.civil-entry-grid,.research-grid,.store-category-grid,.store-grid)>*{min-width:0!important;max-width:100%!important} } @media(max-width:480px){ html body :is(.architecture-main,.civil-main,.research-main,.articles-main,.article-page,.product-main,.podcast-main,.content-main,.content-section-main){width:calc(100% - 22px)!important;max-width:none!important} html body :is(.site-header,.nav-frame){width:calc(100% - 18px)!important;max-width:calc(100% - 18px)!important} html body :is(.gallery-items-container,.category-grid,.v49-grid,.v49-work-grid,.civil-entry-grid,.research-grid,.store-category-grid,.store-grid){gap:12px 7px!important} } @media(max-width:360px){ html body :is(.architecture-main,.civil-main,.research-main,.articles-main,.article-page,.product-main,.podcast-main,.content-main,.content-section-main){width:calc(100% - 16px)!important} html body :is(.site-header,.nav-frame){width:calc(100% - 14px)!important;max-width:calc(100% - 14px)!important} } #panel-registration:has(#registrationApp[data-closed="1"]) .v49-progress{display:none!important}