body.page-template-elementor_canvas{background:linear-gradient(rgb(15 35 25 / .75),rgb(0 0 0 / .85)),url(https://khatma.sadakatalmohbeen.online/wp-content/uploads/2026/01/meka.gif) no-repeat center center fixed;background-size:cover;font-family:'Noto Kufi Arabic',sans-serif;color:#fff;text-align:center;margin:0;padding:0;min-height:100vh;display:flex;justify-content:center;align-items:center;direction:rtl}#khatma-container{width:100%;max-width:480px;padding:20px 15px;box-sizing:border-box;display:flex;flex-direction:column;justify-content:center;min-height:100vh}.khatma-top-actions{display:flex;justify-content:space-between;align-items:center;width:100%;margin-bottom:20px}.action-icon-btn{background:rgb(255 255 255 / .1);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);border:1px solid rgb(255 255 255 / .2);color:#fff;padding:8px 15px;border-radius:20px;display:flex;align-items:center;gap:8px;font-family:inherit;font-size:13px;font-weight:700;cursor:pointer;transition:all 0.3s ease}.action-icon-btn:hover{background:rgb(255 255 255 / .25);transform:translateY(-2px)}.install-btn{background:rgb(20 77 67 / .7);border-color:#029c23}.khatma-header #khatma-title{font-family:'Aref Ruqaa',serif;font-size:clamp(22px, 5vw, 28px);font-weight:700;color:khaki;text-shadow:1px 1px 5px rgb(0 0 0 / .8);margin-bottom:15px}#khatma-image{width:clamp(120px, 35vw, 160px);height:clamp(120px, 35vw, 160px);border-radius:50%;border:3px solid khaki;box-shadow:0 5px 20px rgb(0 0 0 / .5);object-fit:cover;margin-bottom:10px;transition:transform 0.5s ease,box-shadow 0.5s ease}#khatma-image.playing{transform:scale(1.05);box-shadow:0 0 30px rgb(240 230 140 / .6)}.khatma-dedication{font-size:15px;margin:10px 0 0 0;opacity:.9}#khatma-person-name{font-family:'Aref Ruqaa',serif;font-size:clamp(24px, 6vw, 34px);font-weight:700;color:#98fb98;margin:5px 0 20px 0;text-shadow:0 2px 4px rgb(0 0 0 / .5);animation:pulseColor 3s infinite alternate}.khatma-player-wrapper{background:rgb(20 77 67 / .4);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border:1px solid rgb(255 255 255 / .15);border-radius:25px;padding:20px;margin-bottom:20px;box-shadow:0 10px 30px rgb(0 0 0 / .4)}#khatma-parts-list{width:100%;padding:15px 20px;border-radius:12px;border:2px solid khaki;background-color:#ffffff!important;color:#144d43!important;font-family:inherit;font-size:17px;font-weight:900;outline:none;margin-bottom:20px;cursor:pointer;box-shadow:0 4px 15px rgb(0 0 0 / .2);appearance:none;-webkit-appearance:none;-moz-appearance:none;background-image:url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23144d43' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e");background-repeat:no-repeat;background-position:left 15px center;background-size:20px;text-align:center;text-align-last:center}#khatma-parts-list option{background-color:#fff;color:#000;font-weight:700}#khatma-parts-list:focus{box-shadow:0 0 0 4px rgb(240 230 140 / .4)}.khatma-progress-container{width:100%;height:8px;background:rgb(255 255 255 / .2);border-radius:10px;cursor:pointer;position:relative;margin-bottom:10px}.khatma-progress-bar{height:100%;width:0%;background:khaki;border-radius:10px;position:absolute;right:0;top:0;transition:width 0.1s linear}.khatma-progress-bar::after{content:'';position:absolute;left:-6px;top:-4px;width:16px;height:16px;background:#fff;border-radius:50%;box-shadow:0 2px 5px rgb(0 0 0 / .5)}#khatma-time-info{display:flex;justify-content:space-between;font-size:13px;font-family:monospace;opacity:.8;margin-bottom:20px}.play-btn{width:100%;background:linear-gradient(135deg,#029c23,#144d43);color:#fff;border:none;padding:15px;font-size:18px;font-weight:700;border-radius:15px;cursor:pointer;display:flex;justify-content:center;align-items:center;gap:10px;box-shadow:0 5px 15px rgb(2 156 35 / .4);transition:transform 0.2s,box-shadow 0.2s;font-family:inherit}.play-btn:active{transform:scale(.96)}#khatma-marquee{width:100%;overflow:hidden;white-space:nowrap;background-color:rgb(255 255 255 / .1);backdrop-filter:blur(5px);color:#fff;padding:12px 0;border-radius:12px;font-family:'Aref Ruqaa',serif;font-size:20px;border:1px solid rgb(255 255 255 / .1)}#khatma-marquee div{display:inline-block;padding-left:100%;animation:marquee-animation 30s linear infinite}@keyframes pulseColor{0%{color:#98fb98;text-shadow:0 0 10px rgb(152 251 152 / .5)}100%{color:#fff;text-shadow:0 0 15px rgb(255 255 255 / .8)}}@keyframes marquee-animation{0%{transform:translateX(100%)}100%{transform:translateX(-100%)}}@media (max-height:700px){.khatma-header #khatma-title{margin-bottom:5px}#khatma-image{width:100px;height:100px}#khatma-person-name{margin-bottom:10px}.khatma-player-wrapper{padding:15px;margin-bottom:10px}.play-btn{padding:12px;font-size:16px}}