/* Basic reset */
*{box-sizing:border-box}
:root{
	--bg:#070707; /* page background */
	--panel:#0f0f10; /* sidebar / panels */
	--muted:#bdbdbd; /* body text */
	--accent:#930808; /* user requested accent */
	--card:#121212; /* card backgrounds */
	--glass: rgba(255,255,255,0.03);
	--container-width:1100px;
}
html,body{height:100%;font-family:Inter, Arial, Helvetica, sans-serif;background:var(--bg);color:var(--muted);-webkit-font-smoothing:antialiased}

.container{max-width:var(--container-width);margin:0 auto;padding:0 20px}

/* Layout */
.site-wrapper{display:flex;min-height:100vh;background:var(--bg)}
/* Make the sidebar fixed on the left so it remains visible while navigating pages */
.sidebar{width:300px;padding:28px;border-right:1px solid rgba(255,255,255,0.03);background:linear-gradient(180deg,var(--panel), #0b0b0b);position:fixed;left:0;top:0;bottom:0;overflow-y:auto;overflow-x:hidden;height:100vh;z-index:40}
/* push the main content to the right to make room for the fixed sidebar */
.main-area{flex:1;margin-left:300px}

/* Mobile overlay + slide-in behavior */
body.sidebar-open .sidebar{transform:translateX(0);transition:transform 240ms ease}
.sidebar{transform:translateX(0);transition:transform 240ms ease}
.sidebar--hidden{transform:translateX(-110%)}
.sidebar-overlay{position:fixed;inset:0;background:rgba(0,0,0,0.5);z-index:35;display:none}
body.sidebar-open .sidebar-overlay{display:block}

/* Mobile toggle button in header */
.menu-toggle{
    display:none;
    background:var(--card);
    border:none;
    color:var(--muted);
    font-size:20px;
    width:44px;
    height:44px;
    border-radius:8px;
    cursor:pointer;
    position:relative;
}
.menu-toggle:hover{
    background:var(--accent);
    color:#fff;
}
.menu-toggle:focus{
    outline:2px solid rgba(147,8,8,0.3)
}
.menu-toggle .menu-icon,
.menu-toggle .close-icon {
    position:absolute;
    top:50%;
    left:50%;
    transform:translate(-50%, -50%);
    transition:all 0.2s;
}
.menu-toggle .close-icon {
    font-size:24px;
    color:#fff;
}

/* When sidebar is open, lock body scroll */
body.sidebar-open{overflow:hidden}

/* Small pop-in animation when sidebar opens */
.sidebar.animate-in{animation:sidebar-pop 260ms cubic-bezier(.2,.9,.3,1)}
@keyframes sidebar-pop{
	0%{transform:translateX(-110%) scale(.98);opacity:0}
	60%{transform:translateX(6%) scale(1.02);opacity:1}
	100%{transform:translateX(0) scale(1);opacity:1}
}

/* Button variants */
.menu-toggle.open{color:#fff}

/* Sidebar search */
.search{display:flex;margin-bottom:22px}
.search input{flex:1;padding:12px;border:1px solid rgba(255,255,255,0.06);border-right:none;background:transparent;color:var(--muted);border-radius:6px 0 0 6px}
.search input::placeholder{color:rgba(189,189,189,0.6)}
.search button{padding:12px 14px;border:1px solid rgba(255,255,255,0.06);background:var(--accent);color:#fff;border-radius:0 6px 6px 0;cursor:pointer}

.profile-box h4{font-size:15px;margin:6px 0 12px;padding-left:6px;border-left:4px solid var(--accent);letter-spacing:1px;color:#fff}
.profile-photo img{width:100%;height:auto;border-radius:6px;display:block;margin-bottom:14px;box-shadow:0 6px 18px rgba(0,0,0,0.6)}
.profile-desc{font-size:13px;color:var(--muted);line-height:1.6}
.profile-desc a{color:var(--accent);text-decoration:none}

.side-menu ul{list-style:none;padding:18px 0;margin:0}
.side-menu li{padding:10px 8px;border-top:1px solid rgba(255,255,255,0.02);font-weight:600;color:var(--muted);display:flex;align-items:center;justify-content:space-between}
.side-menu li a{color:var(--muted);text-decoration:none}
.side-menu li a:hover{color:#fff}
.side-menu .has-sub{cursor:pointer}
.side-menu .caret{float:right;color:rgba(255,255,255,0.35)}
.admin-link{display:inline-block;margin-top:6px;padding:8px 10px;background:transparent;border:1px solid rgba(255,255,255,0.04);border-radius:6px;color:var(--muted)}
.admin-link:hover{background:rgba(255,255,255,0.02);color:var(--accent)}

/* Buttons and cards */
.btn{display:inline-flex;align-items:center;gap:8px;background:rgba(255,255,255,0.06);color:#fff;border:0;padding:10px 14px;border-radius:8px;cursor:pointer;text-decoration:none}
.btn:hover{background:rgba(255,255,255,0.1)}
.btn-primary{background:var(--accent)}
.btn-primary:hover{background:#b80a0a}
.btn-danger{background:#7a0a0a}
.card{background:var(--card);padding:16px;border-radius:10px;box-shadow:0 6px 20px rgba(0,0,0,0.5)}
.small{font-size:12px;color:rgba(255,255,255,0.55)}

/* Back / home action bar */
.action-bar{display:flex;gap:10px;margin:14px 0 20px}
.back-link{display:inline-flex;align-items:center;gap:8px;color:#fff;text-decoration:none;background:rgba(255,255,255,0.06);padding:8px 12px;border-radius:8px}
.back-link:hover{background:rgba(255,255,255,0.1)}

/* Bize Ulaşın card polish */
.contact-card{background:var(--card);border:1px solid rgba(255,255,255,0.04);border-radius:10px;padding:14px}
.contact-card h4{color:#fff;margin:0 0 10px}
.contact-card input,.contact-card textarea{width:100%;padding:10px 12px;margin-bottom:10px;border-radius:8px;border:1px solid rgba(255,255,255,0.08);background:transparent;color:#e8e8e8}
.contact-card input::placeholder,.contact-card textarea::placeholder{color:rgba(232,232,232,0.5)}

/* Top nav */
.top-nav{background:transparent;border-bottom:1px solid rgba(255,255,255,0.02)}
.top-nav .container{display:flex;align-items:center;justify-content:space-between;height:64px}
.nav-left{display:flex;align-items:center;gap:16px}
.home-button{
    display: inline-flex;
    align-items: center;
    padding: 8px 16px;
    background: var(--accent);
    color: #fff;
    text-decoration: none;
    border-radius: 6px;
    font-size: 14px;
    font-weight: 500;
    transition: background 0.2s;
}
.home-button:hover{
    background: #ab0909;
}
.top-links{list-style:none;display:flex;gap:18px;margin:0;padding:0}
.top-links li{font-size:13px}
.top-links a{color:var(--muted);text-decoration:none;padding:8px 6px;border-radius:6px}
.top-links a:hover{color:#fff;background:rgba(255,255,255,0.02)}

/* Hero / banner */
.hero{padding:48px 0 40px;text-align:center}
.hero .hero-banner{max-width:820px;margin:0 auto;position:relative}
.hero .hero-banner img{width:100%;height:auto;border-radius:10px;box-shadow:0 20px 50px rgba(0,0,0,0.6);display:block;margin:0 auto}
.hero-title{margin-top:16px;font-weight:700;color:var(--accent);font-size:20px;letter-spacing:0.6px}

/* Make the large hero/profile image display smaller on wide screens (approx 50%) */
@media(min-width:1100px){
	.hero .hero-banner{max-width:420px}
}
.hero .lead{color:var(--muted);margin-top:8px;font-size:14px}
.social-row{margin-top:12px}
.social-row a{color:rgba(255,255,255,0.75);margin:0 8px;text-decoration:none;padding:8px;border-radius:8px;display:inline-block}
.social-row a:hover{background:rgba(255,255,255,0.03);color:var(--accent)}

/* News grid similar to screenshot */
.news-grid{padding:40px 0}
.news-grid #news-preview{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.news-large{position:relative;border-radius:10px;overflow:hidden;aspect-ratio:16/9}
.news-large img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.news-caption{position:absolute;left:0;right:0;bottom:18px;padding:18px;text-align:center;color:#fff}
.news-caption h3{margin:0;font-size:22px;text-shadow:0 6px 18px rgba(0,0,0,0.6)}
.news-caption .date{margin-top:8px;color:rgba(255,255,255,0.85);font-size:13px}

.news-row{grid-column:1/3;display:flex;gap:18px;margin-top:0}
.news-small img{width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;border-radius:8px}
.news-small{flex:1;background:var(--card);padding:8px;border-radius:8px}

.news-card{background:var(--card);padding:14px;border-radius:8px;color:var(--muted);box-shadow:0 6px 20px rgba(0,0,0,0.6)}
.news-card h4{color:#fff;margin:0 0 8px}
.news-card p{font-size:13px;color:rgba(255,255,255,0.8);margin:0}

/* News page */
.news-page{padding:24px 0 40px}
.news-hero{margin-bottom:16px;text-align:center}
.news-hero h1{color:#fff;margin:0;font-size:30px}
.news-sub{margin-top:6px;color:rgba(255,255,255,0.7);font-size:14px}
.news-filters{display:flex;gap:8px;justify-content:center;margin:14px 0 18px}
.chip{display:inline-flex;padding:8px 12px;border-radius:999px;background:rgba(255,255,255,0.06);color:#fff;text-decoration:none;font-size:12px}
.chip:hover{background:rgba(255,255,255,0.12)}
.chip.active{background:var(--accent)}
.news-list .card{transition:transform .15s ease, box-shadow .15s ease}
.news-list .card:hover{transform:translateY(-2px);box-shadow:0 10px 26px rgba(0,0,0,0.6)}

/* News page list layout */
.news-list{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.news-card-item{display:flex;gap:14px;background:var(--card);border:1px solid rgba(255,255,255,0.06);border-radius:12px;padding:12px;box-shadow:0 10px 26px rgba(0,0,0,0.35)}
.news-card-item img{width:160px;height:auto;aspect-ratio:16/9;object-fit:cover;border-radius:8px}
.news-card-item .nc-body h3{margin:0 0 6px;color:#fff;font-size:18px}
.news-card-item .nc-body p{margin:8px 0 0;font-size:13px;color:rgba(255,255,255,0.8)}

@media(max-width:900px){
  .news-list{grid-template-columns:1fr}
  .news-card-item img{width:120px;height:88px}
}

/* Footer */
footer{border-top:1px solid rgba(255,255,255,0.03);padding:20px 0;background:transparent}
.footer-inner{display:flex;justify-content:space-between;align-items:center}
.footer-inner p{color:rgba(255,255,255,0.45)}
.footer-right a{color:rgba(255,255,255,0.45);margin-left:8px}

.muted-small{font-size:12px;color:rgba(255,255,255,0.45)}

/* Biography/About Page Styles */
.about-page {
  padding: 40px 0;
}

.about-page h1 {
  color: #fff;
  font-size: 32px;
  margin-bottom: 40px;
  text-align: center;
  position: relative;
}

.about-page h1:after {
  content: '';
  display: block;
  width: 60px;
  height: 4px;
  background: var(--accent);
  margin: 20px auto 0;
  border-radius: 2px;
}

.biography-section {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 30px;
  margin-top: 30px;
}

.bio-card {
  background: var(--card);
  padding: 30px;
  border-radius: 12px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.2);
}

.bio-card h2 {
  color: var(--accent);
  font-size: 22px;
  margin: 0 0 25px;
  padding-bottom: 15px;
  border-bottom: 1px solid rgba(255,255,255,0.1);
}

.timeline {
  list-style: none;
  padding: 0;
  margin: 0;
}

.timeline li {
  position: relative;
  padding-left: 24px;
  margin-bottom: 20px;
  color: var(--muted);
  line-height: 1.6;
  font-size: 15px;
}

.timeline li:before {
  content: '';
  position: absolute;
  left: 0;
  top: 8px;
  width: 8px;
  height: 8px;
  background: var(--accent);
  border-radius: 50%;
}

.timeline li:last-child {
  margin-bottom: 0;
}

@media (max-width: 768px) {
  .biography-section {
    grid-template-columns: 1fr;
  }
  
  .bio-card {
    padding: 20px;
  }
  
  .about-page h1 {
    font-size: 28px;
  }
}

/* Responsive */
@media(max-width:1000px){
  /* Sidebar hidden visually; will slide in when toggled */
  .sidebar{display:block;position:fixed;left:0;top:0;bottom:0;width:280px;transform:translateX(-110%);box-shadow:0 30px 60px rgba(0,0,0,0.6);overflow:auto}
  .sidebar-overlay{display:none}
  .main-area{margin-left:0}
  .site-wrapper{flex-direction:column}
  .top-nav .container{padding:0 20px}
  .menu-toggle{display:inline-block}
  .news-grid #news-preview{grid-template-columns:repeat(2,1fr)}
  .news-row{flex-direction:row}
  .news-card-item img{aspect-ratio:16/9;object-fit:cover}
}

@media(max-width:600px){
	    /* Mobile header: nav in two rows, cleaner buttons */
	    .top-nav .container{
	        flex-direction:column;
	        align-items:stretch;
	        gap:8px;
	        height:auto;
	        padding:8px 16px;
	    }
	    .nav-left{
	        width:100%;
	        justify-content:space-between;
	    }
	    .home-button{
	        flex:1;
	        justify-content:center;
	    }
	    .top-links{
	        display:flex;
	        flex-wrap:wrap;
	        justify-content:center;
	        gap:6px;
	        margin-left:0;
	    }
	    .top-links a{
	        background:rgba(255,255,255,0.06);
	        padding:6px 10px;
	        border-radius:999px;
	        font-size:12px;
	    }
	    .hero .hero-banner{display:flex;justify-content:center;align-items:center;padding:0 20px}
	    .hero .hero-banner img{max-width:320px;width:100%;margin:0 auto}
	    .news-large{aspect-ratio:16/9}
	    .news-row{flex-direction:column}
	    .main-area{padding:0;margin-left:0}
	    .news-hero h1{font-size:24px}
	    .news-sub{font-size:13px}
	    .news-grid #news-preview{grid-template-columns:1fr}
	}

/* Hide admin panel link in menus; access via /admin */
.admin-link{display:none !important}

/* Live broadcast section */
.live-section{position:relative;margin:10px 0 24px}
.live-card{background:linear-gradient(135deg, rgba(147,8,8,0.85), rgba(147,8,40,0.85));border:1px solid rgba(255,255,255,0.08);border-radius:14px;padding:18px;color:#fff;box-shadow:0 16px 50px rgba(147,8,8,0.35)}
.live-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:12px}
.live-head .badge{background:#00000030;padding:6px 10px;border-radius:999px;font-weight:700;letter-spacing:.6px}
.live-head .channel{font-weight:700}
.live-timer{display:flex;gap:12px;justify-content:center;align-items:baseline;margin:8px 0}
.live-timer .unit{display:flex;flex-direction:column;align-items:center;background:rgba(0,0,0,0.18);padding:10px;border-radius:10px;min-width:68px}
.live-timer .num{font-size:22px;font-weight:800;line-height:1}
.live-timer .label{font-size:11px;opacity:.9;margin-top:4px}
.live-foot{display:flex;justify-content:space-between;align-items:center;margin-top:10px;color:#ffe}
.live-foot .date{font-size:13px;opacity:.95}
.live-foot .cta{background:#fff;color:#900;padding:8px 10px;border-radius:8px;text-decoration:none;font-weight:700}
.live-live{animation:pulse 1.2s infinite;display:inline-flex;align-items:center;gap:6px}
.live-live i{color:#ffb}
@keyframes pulse{0%{transform:scale(1)}50%{transform:scale(1.04)}100%{transform:scale(1)}}

/* Live embed container below card */
.live-embed{margin-top:14px;position:relative;width:100%;aspect-ratio:16/9;border-radius:12px;overflow:hidden;box-shadow:0 20px 50px rgba(0,0,0,0.6);border:1px solid rgba(255,255,255,0.08)}
.live-embed iframe{position:absolute;inset:0;width:100%;height:100%;border:0}