:root{--ie-primary:#0073aa;--ie-secondary:#005177;--ie-text:#333333;--ie-text-light:#666666;--ie-text-lighter:#777777;--ie-border:#dddddd;--ie-border-light:#eaeaea;--ie-bg:#f9f9f9;--ie-bg-light:#f5f5f5;--ie-bg-dark:#f1f1f1;--ie-white:#ffffff;--ie-success-bg:#d4edda;--ie-success-text:#155724;--ie-success-border:#c3e6cb;--ie-error-bg:#f8d7da;--ie-error-text:#721c24;--ie-error-border:#f5c6cb;--ie-warning:#ffa726;--ie-danger:#ff6b6b;--ie-count-comments:#0984B8;--ie-count-hadir:#329F0A;--ie-count-tidak-hadir:#FF0022;--ie-count-border-comments:#b8e6cc;--ie-count-border-tidak-hadir:#f9c5c5;--ie-shadow-sm:0 2px 5px rgba(0, 0, 0, 0.05);--ie-shadow-md:0 4px 8px rgba(0, 0, 0, 0.1);--ie-shadow-lg:0 4px 12px rgba(0, 0, 0, 0.05);--ie-transition:all 0.3s ease;--ie-spacing-xs:4px;--ie-spacing-sm:8px;--ie-spacing-md:12px;--ie-spacing-lg:16px;--ie-spacing-xl:20px}*{box-sizing:border-box;margin:0;padding:0}.ie-guestbook{max-width:100%;margin:0 auto;overflow:hidden}.entry-container{border-radius:8px;border:1px solid var(--ie-border);padding:15px 0;background:var(--ie-white)}.ie-form{padding:var(--ie-spacing-lg);margin-bottom:var(--ie-spacing-xl);border-radius:8px}.ie-form label{display:block;margin-bottom:var(--ie-spacing-sm);font-size:16px;color:var(--ie-text);font-weight:500;transition:var(--ie-transition)}.ie-form input[type="text"],.ie-form textarea,.ie-form select{width:100%;padding:var(--ie-spacing-md) var(--ie-spacing-lg);border:1px solid var(--ie-border);border-radius:6px;margin-bottom:var(--ie-spacing-lg);font-size:16px;font-family:inherit;color:var(--ie-text);background:var(--ie-white);transition:var(--ie-transition)}.ie-form input[type="text"]:focus,.ie-form textarea:focus,.ie-form select:focus{outline:none;border-color:var(--ie-primary);box-shadow:0 0 0 2px rgb(0 115 170 / .1)}.ie-form textarea{min-height:120px;resize:vertical}.ie-form select{cursor:pointer;appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23333' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 12px center;padding-right:40px}.ie-radio-wrapper{width:100%;position:relative;margin-bottom:var(--ie-spacing-lg)}.ie-radio-wrapper input[type="radio"]{position:absolute;opacity:0;cursor:pointer;height:0;width:0;appearance:none}.ie-radio-group{display:flex;flex-direction:row;flex-wrap:nowrap;gap:20px;padding:10px 0 var(--ie-spacing-lg);width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch}.ie-radio-label{display:inline-flex;align-items:center;position:relative;cursor:pointer;font-size:15px;white-space:nowrap;user-select:none;color:var(--ie-text);font-weight:500;flex-shrink:0;min-height:24px;line-height:1;transition:var(--ie-transition)}.ie-checkmark{position:relative;display:inline-block;vertical-align:middle;height:22px;width:22px;background-color:#f8f9fa;border-radius:50%;border:2px solid var(--ie-border);transition:var(--ie-transition);margin-right:var(--ie-spacing-sm);flex-shrink:0;aspect-ratio:1}.ie-checkmark:after{content:"";position:absolute;display:none;top:50%;left:50%;transform:translate(-50%,-50%);width:10px;height:10px;border-radius:50%;background:var(--ie-white);aspect-ratio:1}.ie-radio-label:hover .ie-checkmark{border-color:var(--ie-primary);background-color:rgb(0 115 170 / .1)}.ie-radio-label input[type="radio"]:checked~.ie-checkmark{background-color:var(--ie-primary);border-color:var(--ie-primary)}.ie-radio-label input[type="radio"]:checked~.ie-checkmark:after{display:block}.ie-radio-text{display:inline-block;vertical-align:middle;line-height:1}.ie-btn,.ie-form button[type="submit"]{width:100%;background:var(--ie-primary);color:var(--ie-white);border:none;padding:var(--ie-spacing-md) var(--ie-spacing-xl);border-radius:6px;cursor:pointer;font-size:16px;font-weight:500;transition:var(--ie-transition);display:block;text-align:center}.ie-btn:hover,.ie-form button[type="submit"]:hover{background:var(--ie-secondary);transform:translateY(-2px);box-shadow:var(--ie-shadow-md)}.ie-btn:active,.ie-form button[type="submit"]:active{transform:translateY(0);box-shadow:var(--ie-shadow-sm)}.comment-counts-container{display:flex;justify-content:center;align-items:center;margin-bottom:var(--ie-spacing-xl);width:100%;flex-wrap:nowrap;gap:5px}.count-item{display:flex;flex-direction:row;align-items:center;padding:6px 8px;border-radius:5px;gap:8px;flex:0 1 auto;min-width:0;width:auto;white-space:nowrap;transition:var(--ie-transition);background:var(--ie-white);border:1px solid var(--ie-border)}.count-item:hover{transform:translateY(-2px);box-shadow:var(--ie-shadow-md)}.count-item.comments{border-bottom:3px solid var(--ie-count-comments)}.count-item.hadir{border-bottom:3px solid var(--ie-count-hadir)}.count-item.tidak-hadir{border-bottom:3px solid var(--ie-count-tidak-hadir)}.count-content{display:flex;flex-direction:column;align-items:flex-start;justify-content:center;line-height:1.1;min-width:0}.count-number{display:block;font-size:22px;font-weight:700;line-height:1.1;white-space:nowrap;margin:0 0 1px 0;padding:0;color:var(--ie-text)}.count-label{display:block;font-size:11px;font-weight:500;white-space:nowrap;color:var(--ie-text);margin:0;padding:0;line-height:1.1}.count-icon{padding:3px;border-radius:50%;display:flex;align-items:center;justify-content:center;color:var(--ie-white);width:32px;height:32px;flex-shrink:0;transition:var(--ie-transition)}.count-icon.comments{background-color:var(--ie-count-comments)}.count-icon.hadir{background-color:var(--ie-count-hadir)}.count-icon.tidak-hadir{background-color:var(--ie-count-tidak-hadir)}.count-icon svg{width:20px;height:20px;stroke:currentColor;display:block}.comment-counts-container.no-icons .count-item{justify-content:center;padding:6px 12px}.comment-counts-container.no-icons .count-content{align-items:center;text-align:center}.comment-counts-container.no-icons .count-number,.comment-counts-container.no-icons .count-label{text-align:center;width:100%}.comment-counts-container.no-icons .count-item{min-width:80px}@media (max-width:768px){.comment-counts-container.no-icons .count-item{padding:4px 8px;min-width:70px}}@media (max-width:480px){.comment-counts-container.no-icons .count-item{padding:3px 6px;min-width:60px}}#guestbook-entries{max-height:500px;overflow-y:auto;padding-right:var(--ie-spacing-sm);margin:var(--ie-spacing-xl) 0 var(--ie-spacing-lg);transition:max-height 0.3s}.ie-entry{border:1px solid var(--ie-border);border-radius:12px;padding:18px;margin:10px;background:var(--ie-white);word-wrap:break-word;overflow:hidden;box-shadow:var(--ie-shadow-sm);transition:var(--ie-transition);position:relative}.ie-entry:hover{box-shadow:var(--ie-shadow-md);border-color:var(--ie-primary)}.ie-entry-header{display:flex;align-items:center;flex-wrap:nowrap;gap:var(--ie-spacing-md);margin-bottom:var(--ie-spacing-md);width:100%;min-height:40px}.ie-initials{display:flex;align-items:center;justify-content:center;border-radius:50%;width:44px;height:44px;min-width:44px;min-height:44px;aspect-ratio:1;font-weight:600;font-size:18px;color:var(--ie-white);flex-shrink:0;overflow:hidden;text-align:center;line-height:1;box-shadow:var(--ie-shadow-sm)}.ie-initials strong{color:var(--ie-white);line-height:1;display:block}.ie-name-status-wrapper{display:flex;align-items:center;flex-wrap:nowrap;justify-content:space-between;flex-grow:1;min-width:0;gap:10px;overflow:hidden}.ie-name{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:16px;font-weight:600;color:var(--ie-text);flex-shrink:1;flex-grow:1;min-width:0;max-width:200px;display:inline-block;vertical-align:middle}.ie-status{display:inline-flex;align-items:center;white-space:nowrap;border-radius:30px;padding:4px 14px;font-size:12px;font-weight:600;flex-shrink:0;gap:6px;background:#e8f5e9;color:#2e7d32;border:1px solid #a5d6a7}.ie-status.tidak-hadir{background:#ffebee;color:#c62828;border:1px solid #ef9a9a}.ie-status svg{width:14px;height:14px;vertical-align:middle;flex-shrink:0}.ie-message{font-size:15px;line-height:1.6;color:#555;margin:var(--ie-spacing-sm) 0 var(--ie-spacing-sm) 56px;word-break:break-word;padding-right:5px}.ie-time{font-size:12px;font-style:italic;color:var(--ie-text-lighter);margin-left:56px;display:block}.ie-no-entries{text-align:center;padding:40px var(--ie-spacing-xl);color:var(--ie-text-light);font-style:italic;background-color:var(--ie-bg);border-radius:12px;border:2px dashed var(--ie-border);margin:var(--ie-spacing-xl) 0}.ie-loading{text-align:center;padding:30px;color:var(--ie-primary);font-size:16px;font-weight:500}.character-counter{padding:var(--ie-spacing-sm) 0 var(--ie-spacing-xl);font-size:13px;color:var(--ie-text-lighter);display:flex;align-items:center;gap:var(--ie-spacing-sm);border-bottom:1px dashed var(--ie-border-light);margin-bottom:10px}.counter-text{font-weight:500;color:var(--ie-text)}.counter-number{font-weight:700;color:var(--ie-primary);min-width:35px;text-align:left;transition:color 0.2s}.counter-number.warning{color:var(--ie-warning)}.counter-number.danger{color:var(--ie-danger)}.counter-number.error{color:red}.ie-form-message,#form-message{margin-top:var(--ie-spacing-lg);padding:var(--ie-spacing-md) 18px;border-radius:8px;font-size:14px;text-align:center;font-weight:500;transition:var(--ie-transition)}.ie-form-message.success,#form-message.success{background-color:var(--ie-success-bg);color:var(--ie-success-text);border:1px solid var(--ie-success-border)}.ie-form-message.error,#form-message.error{background-color:var(--ie-error-bg);color:var(--ie-error-text);border:1px solid var(--ie-error-border)}.bukutamu-title{margin-bottom:var(--ie-spacing-xl);color:var(--ie-text);font-size:24px;font-weight:600}.ie-name[title]{position:relative;cursor:help}.ie-name[title]:hover::after{content:attr(title);position:absolute;background:var(--ie-text);color:var(--ie-white);padding:6px 12px;border-radius:6px;font-size:12px;font-weight:400;z-index:1000;white-space:normal;max-width:250px;bottom:100%;left:0;margin-bottom:5px;box-shadow:var(--ie-shadow-md);pointer-events:none}#guestbook-entries::-webkit-scrollbar{width:8px}#guestbook-entries::-webkit-scrollbar-track{background:var(--ie-bg-dark);border-radius:4px}#guestbook-entries::-webkit-scrollbar-thumb{background:#c1c1c1;border-radius:4px;transition:var(--ie-transition)}#guestbook-entries::-webkit-scrollbar-thumb:hover{background:#a8a8a8}#guestbook-entries{scrollbar-width:thin;scrollbar-color:#c1c1c1 var(--ie-bg-dark)}@media (max-width:1199px){.count-number{font-size:21px}.count-icon{width:30px;height:30px}.count-icon svg{width:19px;height:19px}}@media (max-width:1024px){.ie-form{padding:var(--ie-spacing-md)}.ie-form label,.ie-form input,.ie-form textarea,.ie-form select{font-size:15px}.ie-btn{padding:11px 18px;font-size:15px}.ie-radio-group{gap:15px}.ie-radio-label{font-size:14px}.ie-checkmark{height:20px;width:20px;margin-right:6px}.ie-checkmark:after{width:8px;height:8px}.count-item{padding:5px 7px;gap:5px}.count-number{font-size:20px}.count-label{font-size:10px}.count-icon{width:28px;height:28px}.count-icon svg{width:18px;height:18px}.ie-entry-header{gap:10px}.ie-initials{width:40px;height:40px;min-width:40px;min-height:40px;font-size:16px}.ie-name{font-size:15px;max-width:180px}.ie-status{padding:5px 12px;font-size:11px}.ie-message{margin-left:52px;font-size:14px}.ie-time{margin-left:52px;font-size:11px}}@media (max-width:768px){#guestbook-entries{max-height:400px}.comment-counts-container{gap:3px}.count-item{padding:4px 6px;gap:4px}.count-number{font-size:18px;margin-bottom:0}.count-label{font-size:9px}.count-icon{width:26px;height:26px}.count-icon svg{width:16px;height:16px}.ie-radio-group{gap:12px}.ie-radio-label{font-size:13px}.ie-checkmark{height:18px;width:18px;margin-right:5px;border-width:1.5px}.ie-checkmark:after{width:7px;height:7px}.ie-form{padding:10px}.ie-form label,.ie-form input,.ie-form textarea,.ie-form select{font-size:14px}.ie-btn{padding:10px 16px;font-size:14px}.ie-name{max-width:150px;font-size:14px}.ie-status{padding:4px 10px;font-size:10px}.ie-message{margin-left:48px;font-size:13px}.ie-time{margin-left:48px;font-size:10px}}@media (max-width:480px){#guestbook-entries{max-height:350px}.comment-counts-container{gap:2px}.count-item{padding:3px 4px;gap:4px}.count-number{font-size:16px;margin-bottom:0}.count-label{font-size:8px}.count-icon{width:24px;height:24px}.count-icon svg{width:14px;height:14px}.ie-radio-wrapper{margin:0 -10px var(--ie-spacing-lg);padding:0 10px}.ie-radio-group{gap:8px;padding:5px 0 10px}.ie-radio-label{font-size:12px}.ie-checkmark{height:16px;width:16px;margin-right:4px}.ie-checkmark:after{width:6px;height:6px}.ie-entry{padding:15px}.ie-entry-header{gap:var(--ie-spacing-sm)}.ie-initials{width:36px;height:36px;min-width:36px;min-height:36px;font-size:14px}.ie-name{max-width:120px;font-size:13px}.ie-status{padding:3px 8px;font-size:9px;border-radius:20px}.ie-status svg{width:11px;height:11px}.ie-message{margin-left:44px;font-size:12px;line-height:1.5}.ie-time{margin-left:44px;font-size:9px}.character-counter{font-size:11px;padding:5px 0 var(--ie-spacing-lg)}.bukutamu-title{font-size:20px;margin-bottom:var(--ie-spacing-lg)}}@media (max-width:360px){.count-item{padding:2px 3px}.count-number{font-size:14px}.count-label{font-size:7px}.count-icon{width:22px;height:22px}.count-icon svg{width:12px;height:12px}.ie-radio-group{gap:6px}.ie-radio-label{font-size:11px}.ie-name{max-width:100px;font-size:12px}.ie-status{padding:2px 6px;font-size:8px}.ie-initials{width:32px;height:32px;min-width:32px;min-height:32px;font-size:12px}.ie-message{margin-left:40px;font-size:11px}.ie-time{margin-left:40px;font-size:8px}}@media print{.ie-form,.ie-radio-wrapper,.comment-counts-container,.ie-btn,.character-counter{display:none!important}.ie-entry{border:1px solid #000;break-inside:avoid;page-break-inside:avoid;box-shadow:none;margin-bottom:10px;padding:10px}#guestbook-entries{max-height:none;overflow:visible}.ie-initials,.ie-initials strong,.ie-status{background:#fff!important;color:#000!important;border:1px solid #000}}@supports (-webkit-touch-callout:none){.ie-entry-header{-webkit-flex-wrap:nowrap;flex-wrap:nowrap}.ie-radio-group{-webkit-overflow-scrolling:touch}.count-item,.ie-entry,.ie-btn{-webkit-transform:translateZ(0);transform:translateZ(0)}}@supports (-ms-ime-align:auto){.ie-form select{padding-right:30px}}@media (prefers-contrast:high){.count-item,.ie-entry,.ie-btn{border:2px solid currentColor}.count-icon{background:#fff0;border:2px solid currentColor}}