@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700;800&family=Amiri:wght@400;700&display=swap');
@import url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css');

:root {
  --green: #14532d;
  --green2: #1a6b3c;
  --gold: #d4af37;
  --gold2: #b8960f;
  --cream: #f7f3e8;
  --cream2: #ede8d8;
  --white: #ffffff;
  --text: #1a2e1a;
  --text2: #3d5c3d;
  --text3: #6b8f6b;
  --border: #d4c9a8;
  --red: #c0392b;
  --shadow: 0 4px 24px rgba(20,83,45,0.10);
  --shadow2: 0 8px 40px rgba(20,83,45,0.15);
}

*,*::before,*::after{margin:0;padding:0;box-sizing:border-box;}

body{font-family:'Outfit',sans-serif;background:var(--cream);color:var(--text);line-height:1.6;overflow-x:hidden;}

/* NAV */
header{background:#fff;border-bottom:2px solid var(--border);padding:0 5%;display:flex;align-items:center;justify-content:space-between;height:70px;position:sticky;top:0;z-index:1000;box-shadow:0 2px 20px rgba(0,0,0,0.06);}
.logo{display:flex;align-items:center;gap:12px;text-decoration:none;}
.logo-icon{width:44px;height:44px;background:var(--green);border-radius:12px;display:flex;align-items:center;justify-content:center;}
.logo-icon i{color:var(--gold);font-size:1.3rem;}
.logo-text h1{font-size:1.2rem;font-weight:800;color:var(--green);letter-spacing:1px;line-height:1;}
.logo-text span{font-size:0.7rem;color:var(--text3);letter-spacing:1px;}
nav ul{list-style:none;display:flex;gap:2rem;}
nav a{text-decoration:none;color:var(--text);font-weight:600;font-size:0.88rem;letter-spacing:0.5px;position:relative;padding-bottom:4px;}
nav a::after{content:'';position:absolute;bottom:0;left:0;width:0;height:2px;background:var(--gold);transition:width .3s;}
nav a:hover::after{width:100%;}
nav a:hover{color:var(--green);}
.menu-toggle{display:none;font-size:1.5rem;color:var(--green);cursor:pointer;border:none;background:none;}

/* HERO */
.hero-section{background:linear-gradient(135deg,var(--green) 0%,#0d3d1f 100%);padding:3rem 5%;position:relative;overflow:hidden;border-bottom:3px solid var(--gold);}
.hero-section::before{content:'';position:absolute;top:0;left:0;right:0;bottom:0;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='100'%3E%3Cpolygon points='50,5 55,35 85,20 65,45 90,50 65,55 85,80 55,65 50,95 45,65 15,80 35,55 10,50 35,45 15,20 45,35' fill='none' stroke='%23d4af37' stroke-width='0.8'/%3E%3C/svg%3E");opacity:0.06;pointer-events:none;}
.hero-inner{max-width:1300px;margin:0 auto;}
.bismillah{font-family:'Amiri',serif;font-size:1.8rem;color:rgba(212,175,55,0.7);text-align:center;margin-bottom:0.5rem;letter-spacing:2px;}
.hero-title{font-size:3rem;font-weight:300;color:#fff;text-align:center;letter-spacing:4px;margin-bottom:0.5rem;}
.hero-title span{color:var(--gold);font-weight:800;}
.hero-sub{text-align:center;color:rgba(255,255,255,0.6);font-size:0.9rem;letter-spacing:1px;margin-bottom:2rem;}

/* PLAYER CARD */
.player-card{background:rgba(255,255,255,0.05);backdrop-filter:blur(20px);border:1px solid rgba(212,175,55,0.3);border-radius:20px;padding:1.5rem 2rem;display:flex;align-items:center;gap:1.5rem;max-width:900px;margin:0 auto;box-shadow:0 8px 40px rgba(0,0,0,0.3);}
.player-art{width:80px;height:80px;border-radius:14px;background:rgba(212,175,55,0.15);border:1px solid rgba(212,175,55,0.3);display:flex;align-items:center;justify-content:center;position:relative;flex-shrink:0;overflow:hidden;}
.player-art img{width:100%;height:100%;object-fit:cover;border-radius:14px;}
.live-badge{position:absolute;top:0;left:0;background:var(--red);color:#fff;font-size:0.6rem;font-weight:700;padding:3px 7px;border-radius:0 0 8px 0;letter-spacing:1px;display:flex;align-items:center;gap:4px;}
.pulse{width:6px;height:6px;background:#fff;border-radius:50%;animation:pulse 1.5s infinite;}
@keyframes pulse{0%,100%{opacity:1;transform:scale(1);}50%{opacity:0.3;transform:scale(0.8);}}
.player-info{flex:1;min-width:0;}
.player-label{font-size:0.7rem;color:var(--gold);letter-spacing:2px;font-weight:700;margin-bottom:4px;}
.player-track{font-size:1.1rem;font-weight:700;color:#fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-bottom:6px;}
.player-stats{display:flex;gap:1rem;font-size:0.8rem;color:rgba(255,255,255,0.6);}
.player-stats span{display:flex;align-items:center;gap:5px;}
.play-btn{width:54px;height:54px;border-radius:50%;background:var(--gold);border:none;color:var(--green);font-size:1.3rem;cursor:pointer;flex-shrink:0;transition:all .2s;display:flex;align-items:center;justify-content:center;box-shadow:0 4px 20px rgba(212,175,55,0.4);}
.play-btn:hover{transform:scale(1.08);box-shadow:0 6px 28px rgba(212,175,55,0.6);}
.vol-wrap{display:flex;align-items:center;gap:8px;color:rgba(255,255,255,0.5);}
.vol-wrap input{width:90px;accent-color:var(--gold);}
.player-actions{display:flex;flex-direction:column;gap:8px;flex-shrink:0;}
.action-btn{background:transparent;border:1px solid rgba(212,175,55,0.4);color:var(--gold);padding:7px 14px;border-radius:8px;font-size:0.78rem;cursor:pointer;font-weight:600;letter-spacing:0.5px;transition:all .2s;white-space:nowrap;font-family:inherit;}
.action-btn:hover{background:var(--gold);color:var(--green);}

/* NAMAZ BAR */
.namaz-bar-wrapper{background:var(--gold);border-bottom:3px solid var(--gold2);padding:14px 5%;}
.namaz-bar{max-width:1300px;margin:0 auto;display:flex;align-items:center;gap:2rem;}
.namaz-title{font-size:0.75rem;color:var(--green);font-weight:800;letter-spacing:2px;white-space:nowrap;flex-shrink:0;}
.vakitler-container{display:flex;flex:1;justify-content:space-around;}
.vakit-box{text-align:center;padding:0 1rem;border-right:1px solid rgba(20,83,45,0.2);}
.vakit-box:last-child{border:none;}
.v-name{font-size:0.7rem;color:var(--green);font-weight:700;letter-spacing:2px;}
.v-time{font-size:1.5rem;font-weight:800;color:var(--green);line-height:1;}

/* MAIN */
.main-container{max-width:1300px;margin:2.5rem auto;padding:0 5%;display:grid;grid-template-columns:1fr 340px;gap:2rem;}

/* PALESTINE */
.pal-strip{background:#fff8f8;border:1px solid #f0c0c0;border-radius:12px;padding:12px 16px;display:flex;align-items:center;gap:12px;margin-bottom:1.5rem;}
.pal-dot{width:8px;height:8px;border-radius:50%;background:var(--red);flex-shrink:0;animation:pulse 2s infinite;}
.pal-text{font-size:0.85rem;color:var(--red);font-weight:600;flex:1;}
.pal-btn{font-size:0.75rem;color:var(--red);border:1px solid var(--red);padding:5px 12px;border-radius:6px;text-decoration:none;font-weight:600;white-space:nowrap;transition:all .2s;}
.pal-btn:hover{background:var(--red);color:#fff;}

/* SECTION TITLE */
.sec-title{display:flex;align-items:center;gap:10px;margin-bottom:1rem;}
.sec-bar{width:3px;height:18px;background:var(--green);border-radius:2px;}
.sec-title h2{font-size:0.75rem;letter-spacing:2.5px;color:var(--green);font-weight:800;}

/* DAILY CARDS */
.daily-card{background:#fff;border-radius:14px;padding:1.25rem 1.25rem 1.25rem 1.5rem;margin-bottom:1rem;border:1px solid var(--border);box-shadow:var(--shadow);position:relative;overflow:hidden;}
.daily-card::before{content:'';position:absolute;top:0;left:0;width:4px;height:100%;}
.daily-card.ayet::before{background:var(--green);}
.daily-card.hadis::before{background:var(--gold);}
.daily-card.dua::before{background:#2d8653;}
.daily-tag{font-size:0.7rem;letter-spacing:2px;font-weight:700;margin-bottom:10px;}
.daily-card.ayet .daily-tag{color:var(--green);}
.daily-card.hadis .daily-tag{color:var(--gold2);}
.daily-card.dua .daily-tag{color:#2d8653;}
.arabic{font-family:'Amiri',serif;font-size:1.4rem;color:var(--green);text-align:right;direction:rtl;line-height:2;margin-bottom:10px;}
.daily-text{font-size:0.9rem;color:var(--text);line-height:1.7;}
.daily-ref{font-size:0.75rem;color:var(--text3);margin-top:8px;}

/* CATEGORIES */
.cats-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:1.5rem;}
.cat-item{background:#fff;border:1px solid var(--border);border-radius:12px;padding:14px;text-decoration:none;transition:all .25s;display:block;}
.cat-item:hover{border-color:var(--green);box-shadow:var(--shadow);transform:translateY(-2px);}
.cat-icon{font-size:1.5rem;margin-bottom:8px;}
.cat-name{font-size:0.78rem;font-weight:800;color:var(--green);letter-spacing:0.5px;margin-bottom:4px;}
.cat-desc{font-size:0.72rem;color:var(--text3);line-height:1.4;}

/* SIDEBAR */
.sidebar{display:flex;flex-direction:column;gap:1.5rem;}
.side-block{background:#fff;border-radius:14px;padding:1.25rem;border:1px solid var(--border);box-shadow:var(--shadow);}
.form-title{font-size:0.72rem;letter-spacing:2px;color:var(--gold2);font-weight:800;margin-bottom:1rem;}
.form-input{width:100%;background:var(--green);border:1px solid var(--green2);border-radius:8px;padding:10px 12px;font-size:0.88rem;color:#f7f3e8;margin-bottom:10px;outline:none;font-family:inherit;transition:border-color .2s;display:block;}
.form-input::placeholder{color:#6a9a7a;}
.form-input:focus{border-color:var(--gold);}
.send-btn{width:100%;background:var(--gold);border:none;border-radius:8px;padding:11px;font-size:0.82rem;font-weight:800;color:var(--green);cursor:pointer;letter-spacing:1px;transition:all .2s;font-family:inherit;}
.send-btn:hover{background:var(--gold2);transform:translateY(-1px);}
.stats-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:0.5rem;}
.stat-box{background:var(--cream);border:1px solid var(--border);border-radius:10px;padding:12px;text-align:center;}
.stat-num{font-size:1.5rem;font-weight:800;color:var(--green);}
.stat-num.gold{color:var(--gold2);}
.stat-num.gr{color:#2d8653;}
.stat-label{font-size:0.65rem;color:var(--text3);letter-spacing:1px;font-weight:700;}
.track-item{display:flex;align-items:center;gap:10px;padding:10px 0;border-bottom:1px solid var(--cream2);}
.track-item:last-child{border:none;}
.track-num{font-size:0.7rem;color:var(--text3);width:14px;text-align:center;font-weight:700;}
.track-dot{width:32px;height:32px;border-radius:7px;background:var(--cream2);border:1px solid var(--border);display:flex;align-items:center;justify-content:center;flex-shrink:0;font-size:0.9rem;}
.track-info{flex:1;min-width:0;}
.track-name{font-size:0.82rem;font-weight:600;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.track-artist{font-size:0.7rem;color:var(--text3);}
.track-time{font-size:0.7rem;color:var(--text3);flex-shrink:0;}

/* FOOTER */
footer{background:var(--green);border-top:3px solid var(--gold);padding:3rem 5% 1.5rem;margin-top:3rem;}
.footer-grid{max-width:1300px;margin:0 auto;display:grid;grid-template-columns:1.5fr 1fr 1fr;gap:3rem;padding-bottom:2rem;border-bottom:1px solid rgba(212,175,55,0.2);}
.footer-logo{display:flex;align-items:center;gap:10px;margin-bottom:1rem;}
.footer-logo span{font-size:1rem;font-weight:800;color:var(--gold);letter-spacing:1px;}
.footer-about p{font-size:0.82rem;color:rgba(247,243,232,0.6);line-height:1.8;}
.footer-social{display:flex;gap:10px;margin-top:1rem;}
.footer-social a{width:32px;height:32px;border-radius:8px;border:1px solid rgba(212,175,55,0.3);color:rgba(247,243,232,0.6);display:flex;align-items:center;justify-content:center;text-decoration:none;transition:all .2s;font-size:0.85rem;}
.footer-social a:hover{border-color:var(--gold);color:var(--gold);}
.footer-col h3{font-size:0.7rem;letter-spacing:2px;color:var(--gold);font-weight:800;margin-bottom:1rem;}
.footer-col ul{list-style:none;}
.footer-col ul li{margin-bottom:8px;}
.footer-col ul li a{font-size:0.82rem;color:rgba(247,243,232,0.6);text-decoration:none;transition:color .2s;}
.footer-col ul li a:hover{color:var(--gold);}
.footer-contact p{font-size:0.82rem;color:rgba(247,243,232,0.6);margin-bottom:8px;display:flex;align-items:center;gap:8px;}
.footer-bottom{max-width:1300px;margin:1.5rem auto 0;text-align:center;font-size:0.78rem;color:rgba(247,243,232,0.3);}

/* MODALS */
.modal{display:none;position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,0.7);z-index:2000;align-items:center;justify-content:center;backdrop-filter:blur(4px);}
.modal-content{background:#fff;padding:2rem;border-radius:20px;width:90%;max-width:480px;position:relative;box-shadow:0 20px 60px rgba(0,0,0,0.4);animation:modalPop .3s ease;}
@keyframes modalPop{0%{transform:scale(0.92);opacity:0;}100%{transform:scale(1);opacity:1;}}
.close-modal{position:absolute;top:15px;right:18px;font-size:1.4rem;cursor:pointer;color:#999;border:none;background:none;line-height:1;}
.close-modal:hover{color:var(--red);}
.modal h2{color:var(--green);margin-bottom:0.5rem;font-size:1.2rem;border-bottom:2px solid var(--gold);padding-bottom:10px;}
.modal input,.modal textarea{width:100%;padding:10px;margin-top:10px;border-radius:8px;border:1.5px solid var(--border);font-family:inherit;font-size:0.9rem;outline:none;transition:border-color .2s;}
.modal input:focus,.modal textarea:focus{border-color:var(--green);}
.modal .action-btn{width:100%;margin-top:12px;justify-content:center;background:var(--green);color:#fff;border:none;padding:11px;border-radius:8px;font-size:0.9rem;font-weight:700;cursor:pointer;font-family:inherit;letter-spacing:0.5px;}

/* RESPONSIVE */
@media(max-width:1024px){.main-container{grid-template-columns:1fr;}}
@media(max-width:768px){
  nav ul{display:none;position:absolute;top:70px;left:0;right:0;background:#fff;flex-direction:column;padding:1rem 5%;border-bottom:2px solid var(--border);box-shadow:0 8px 20px rgba(0,0,0,0.1);}
  nav ul.active{display:flex;}
  .menu-toggle{display:flex;}
  .hero-title{font-size:2rem;}
  .player-card{flex-direction:column;text-align:center;}
  .player-actions{flex-direction:row;flex-wrap:wrap;justify-content:center;}
  .namaz-bar{flex-direction:column;gap:0.5rem;}
  .vakitler-container{flex-wrap:wrap;justify-content:center;gap:0.5rem;}
  .vakit-box{border:none;padding:0 0.75rem;}
  .footer-grid{grid-template-columns:1fr;gap:1.5rem;}
  .cats-grid{grid-template-columns:1fr 1fr;}
}

/* KAYAN İSTEK ŞERİDİ */
.istek-serit{background:var(--green);border-bottom:2px solid var(--gold);padding:8px 0;overflow:hidden;display:flex;align-items:center;}
.istek-serit-label{background:var(--gold);color:var(--green);font-size:0.7rem;font-weight:800;letter-spacing:1.5px;padding:4px 14px;white-space:nowrap;flex-shrink:0;margin-right:16px;}
.istek-serit-track{overflow:hidden;flex:1;}
.istek-serit-inner{display:inline-flex;animation:tickerScroll 35s linear infinite;white-space:nowrap;gap:3rem;}
.istek-serit-inner:hover{animation-play-state:paused;}
.istek-item{font-size:0.82rem;color:rgba(247,243,232,0.9);display:inline-flex;align-items:center;gap:6px;}
.istek-item i{color:var(--gold);}
@keyframes tickerScroll{0%{transform:translateX(0);}100%{transform:translateX(-50%);}}