/* --- CORE --- */
:root {
    --bg: #ffffff; --container-bg: #ffffff; --text-main: #333333;
    --border: #dddddd; --accent: #f8f9fa; --panel-bg: #ffffff;
    --highlight-bg: #fff176; 
    --f-family: sans-serif; --f-size: 16px;
    --f-style: normal; --f-weight: normal; --f-color: #333333;
}
[data-theme="dark"] {
    --bg: #1a1a1a; --container-bg: #242424; --text-main: #e0e0e0;
    --border: #444444; --accent: #333333; --panel-bg: #2d2d2d;
    --highlight-bg: #ffd600;
}
a:link { text-decoration: none; }
body { background-color: var(--bg); color: var(--text-main); font-family: var(--f-family); margin: 0; padding: 0; }
.container { max-width: 800px; margin: 0 auto; background-color: var(--container-bg); position: relative; border-left: 1px solid var(--border); border-right: 1px solid var(--border); width: 100%; box-sizing: border-box; min-height: 100vh; display: flex; flex-direction: column; }

/* ---HEADER---*/
.header-nav { position: sticky; top: 0; z-index: 9000; background-color: var(--container-bg); width: 100%; border-bottom: 1px solid var(--border); }
.head { display: flex; justify-content: space-between; align-items: center; padding: 10px 20px; background-color: var(--accent); }
.brand-wrapper { display: flex; flex-direction: column; align-items: flex-start; }
.brand-logo { font-size: 10px; line-height: 1.2; font-weight: bold; }
.settings-box { display: flex; align-items: center; gap: 15px; }
.theme-switch-wrapper { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: bold; }
.theme-switch { position: relative; display: inline-block; width: 40px; height: 20px; cursor: pointer; }
.slider-round { position: absolute; top: 0; left: 0; right: 0; bottom: 0; background-color: #ccc; transition: .4s; border-radius: 20px; }
.slider-round:before { position: absolute; content: ""; height: 14px; width: 14px; left: 3px; bottom: 3px; background-color: white; transition: .4s; border-radius: 50%; }
#theme-toggle:checked + .slider-round { background-color: #2196F3; }
#theme-toggle:checked + .slider-round:before { transform: translateX(20px); }

.gear-wrapper { position: relative; display: flex; align-items: center; }
.gear-btn { cursor: pointer; font-size: 22px; line-height: 1; display: block; }
.nav-links { display: flex; flex-wrap: wrap; gap: 8px; padding: 10px 15px; justify-content: center; border-bottom: 1px solid var(--border); }
.nav-links a { padding: 6px 15px; background: var(--accent); color: var(--text-main); text-decoration: none; border-radius: 20px; border: 1px solid var(--border); font-size: 13px; font-weight: bold; }
.form { padding: 15px; border-bottom: 1px solid var(--border); text-align: center; background-color: var(--accent); }
.search-wrapper { display: flex; align-items: center; justify-content: center; gap: 10px; }
.search-input { width: 60%; padding: 8px; border: 1px solid var(--border); border-radius: 4px; background: var(--container-bg); color: var(--text-main); }
.btn-search { background: #2196F3; color: #fff; border: none; padding: 8px 15px; border-radius: 4px; cursor: pointer; font-weight: bold; }
.arrow-head-toggle { cursor: pointer; font-size: 18px; transition: transform 0.3s; display: inline-block; }
#toggle-head-check:checked ~ .header-nav .arrow-head-toggle { transform: rotate(180deg); }
#toggle-head-check:checked ~ .header-nav .head, #toggle-head-check:checked ~ .header-nav .nav-links { display: none; }

/* --- PANEL --- */
#gear-check, #toggle-head-check, #theme-toggle, #toggle-tts-controls, #toggle-foot { display: none; }
.panel { display: none; position: absolute; right: 0; top: 40px; background-color: var(--panel-bg); border: 1px solid var(--border); padding: 15px; width: 220px; z-index: 9999; border-radius: 8px; box-shadow: 0 10px 25px rgba(0,0,0,0.3); }
#gear-check:checked ~ .panel { display: block; }
.panel label { display: block; font-size: 11px; margin-top: 10px; font-weight: bold; text-align: left; }
.panel select, .panel input { width: 100%; padding: 6px; margin-top: 5px; border-radius: 4px; border: 1px solid var(--border); background: var(--container-bg); color: var(--text-main); box-sizing: border-box; }
.btn-reset { width: 100%; margin-top: 10px; background: #dc3545; color: #fff; border: none; padding: 8px; border-radius: 4px; cursor: pointer; font-weight: bold; }

/* ---CONTROLS--- */
.sticky-controls-wrapper { position: sticky; z-index: 8000; background-color: var(--container-bg); border-bottom: 2px solid var(--border); box-shadow: 0 4px 10px rgba(0,0,0,0.1); top: 165px; transition: top 0.3s ease; }
#toggle-head-check:checked ~ .sticky-controls-wrapper { top: 65px; }
.result-header { position: relative; background-color: var(--accent); border-bottom: 1px solid var(--border); }
.result { display:flex;justify-content: space-between; 
  align-items: center; 
padding: 12px 20px 12px 45px; font-size:var(--f-size); font-style: var(--f-style); font-weight: var(--f-weight); 
 color: var(--text-main); transition: padding 0.3s; }
.result h1{text-align:left;font-size:var(--f-size);}
.result span{ font-size: 14px;text-align:right;}
.result a{color: #2196F3; }



/*---TTS ---*/
.arrow-tts-toggle { position: absolute; left: 10px; top: 50%; transform: translateY(-50%); cursor: pointer; font-size: 18px; transition: transform 0.3s; z-index: 8500; padding: 5px; color: var(--text-main); }
#toggle-tts-controls:not(:checked) ~ .sticky-controls-wrapper .result { padding-left: 45px; }
#toggle-tts-controls:checked ~ .sticky-controls-wrapper .arrow-tts-toggle { transform: translateY(-50%) rotate(180deg); }
.collapsible-tts-area { max-height: 500px; overflow: hidden; transition: max-height 0.4s ease, opacity 0.3s ease; opacity: 1; }
#toggle-tts-controls:checked ~ .sticky-controls-wrapper .collapsible-tts-area { max-height: 0; opacity: 0; }
.btn-group { display: flex; gap: 8px; justify-content: center; padding: 10px; }
.btn-group button { cursor: pointer; padding: 10px 15px; border-radius: 6px; border: none; font-weight: bold; color: white; }
.btn-play { background-color: #28a745; } 
.btn-pause { background-color: #ffc107; color: #333; } 
.btn-resume { background-color: #007bff; } 
.btn-stop { background-color: #dc3545; }
.eq-container { padding: 10px; text-align: center; border-top: 1px solid var(--border); }
.eq-slider-wrapper { width: 80%; margin: 0 auto; }
#speedRange { width: 100%; cursor: pointer; background: linear-gradient(to right, var(--border) 1px, transparent 1px); background-size: 25% 100%; }
.voice{  display: flex;   justify-content: center;   gap: 25px;   margin-bottom: 5px; line-height: 1;}
.voice input[type="radio"] {   display: none; }
.emoji-label { font-size: 2.2rem;  cursor: pointer;transition: all 0.3s ease;   filter: grayscale(100%);opacity: 0.3; }
#male:checked ~ label.male-emoji, 
#female:checked ~ label.female-emoji { filter:grayscale(0%);  opacity: 1; transform: scale(1.2); }
.btn-info{background-color: #8A4117;}
.infoplay-overlay { display: none; position: fixed;  top: 0; left: 0;width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.8); z-index: 9999;}
.infoplay-content { position: relative;background-color: #fff;margin: 10% auto; padding: 20px; width: 80%; max-width: 800px; border-radius: 8px; box-shadow: 0 4px 15px rgba(0,0,0,0.3); max-height: 70vh; overflow-y: auto; }
.infoplay-close { position: sticky;  float: right;  top: 0; right: 0;  color: #aaa; font-size: 28px; font-weight: bold; cursor: pointer;z-index: 100;line-height: 1;}
.infoplay-close:hover {  color: #000;}


/* ---LIST --- */
.konten { flex: 1; padding: 10px;position:relative;font-size:var(--f-size); font-style: var(--f-style); font-weight: var(--f-weight); 
 color: var(--text-main); }
.list-item { background-color: var(--container-bg); border: 1px solid var(--border); padding: 15px; margin-bottom: 15px; border-radius: 8px; transition: transform 0.2s; }
.list-item h3 { margin: 0 0 10px 0; font-size: 18px; }
.list-item h3 a { color: #2196F3; text-decoration: none; }
.preview-text { font-size: 14px; line-height: 1.5; color: var(--text-main); margin-bottom: 12px; opacity: 0.9; }
.meta-data { font-size: 12px; font-weight: bold; margin-bottom: 10px; color: #888; }
.meta-data a { color: var(--text-main); text-decoration: none; background: var(--accent); padding: 3px 8px; border-radius: 4px; border: 1px solid var(--border); }
.read-more { display: inline-block; font-size: 13px; font-weight: bold; color: #fff; background: #2196F3; padding: 6px 15px; border-radius: 4px; text-decoration: none; }
.pagination { display: flex; justify-content: center; gap: 5px; padding: 20px 0; }
.page-link { padding: 8px 14px; background: var(--accent); color: var(--text-main); text-decoration: none; border-radius: 4px; border: 1px solid var(--border); font-weight: bold; font-size: 14px; }
.page-link.active { background: #2196F3; color: #fff; border-color: #2196F3; }

/* ---HIGHLIGHT--- */
#content-area { line-height: 1.8; padding: 20px; }
#content-area h2{text-align:center;}
.tts-highlight, .tts-span.highlight { background-color: var(--highlight-bg) !important; color: #000000 !important; border-radius: 3px; padding: 0 2px; }
.status { padding: 5px; font-size: 12px; text-align: center; color: #888; display: flex;          
    justify-content: center;
    gap: 15px;     

}

/* ---FOOTER --- */
.foot { position: sticky; bottom: 0; z-index: 9000; background-color: var(--container-bg); border-top: 1px solid var(--border); width: 100%; }
.category-wrapper { max-height: 0; overflow: hidden; transition: max-height 0.4s, padding 0.3s; display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; background-color: var(--accent); }
#toggle-foot:checked ~ .category-wrapper { max-height: 200px; padding: 15px; border-bottom: 1px solid var(--border); }
.foot-bottom-row { display: flex; justify-content: space-between; align-items: center; padding: 10px 20px; }
.arrow-btn { cursor: pointer; font-size: 18px; transition: transform 0.3s; color: var(--text-main); }
#toggle-foot:checked ~ .foot-bottom-row .arrow-btn { transform: rotate(180deg); }
.copyright-text { font-size: 12px; color: #888; font-weight: bold; }
.foot span{padding:2px;}


/*---SHARE---*/
.share {position: fixed;left: calc(50% + 360px); right: auto;top: 50%;transform: translateY(-50%);display: flex; align-items: center;z-index: 9999;}
@media (max-width: 768px) { .share {position: fixed;  right: 0; left:auto; top: 50%;transform: translateY(-50%); }
}
.share-toggle{display: flex; justify-content: center;align-items: center;border-radius: 20px 0 0 20px; width: 30px;  height: 30px;background-color:#4D4D4F;  }
.share-toggle span{color:#f8f9fa;}
.share.active .share-links {display: flex;}
.share-links {display: none;  flex-direction: column; background: var(--container-bg); border: 1px solid var(--border);padding: 8px;gap: 10px;box-shadow: -2px 2px 10px rgba(0,0,0,0.1); border-radius: 0 4px 4px 0; 
}
.share-links img { width: 25px; height: 25px;transition: transform 0.2s;}
.share-links img:hover {transform: scale(1.1); }
body.modal-open .list-item, 
body.modal-open .konten { filter: blur(5px); pointer-events: none;}
.modal-overlay {display: none;position: fixed;z-index: 99999;left: 0;top: 0; width: 100%;height: 100%;background-color: rgba(0, 0, 0, 0.7);justify-content: center;align-items: center;}
.modal-content {position: relative;max-width: 85%;max-height: 85%;}
.modal-content img {width: 100%;height: auto;border-radius: 10px;box-shadow: 0 0 20px rgba(0,0,0,0.5);}
.close-btn {position: absolute;top: -40px;right: 0; color: white;  font-size: 40px;cursor: pointer;}
body.modal-open {overflow: hidden;}
.qr-wrapper { display: inline-block;padding: 15px;border: 4px solid var(--qr-border); border-radius: 20px;background: white;box-shadow: 0 0 20px var(--glow-color);transition: all 0.4s ease-in-out;cursor: pointer;}
#qrcode img, #qrcode canvas {display: block;width: 100% !important;height: auto !important;}



/*---ADS---*/
.ads{padding:2px;border:1px solid #fffff;text-align:center;}