/* Sigaram FM template style */
:root {
    --bg: #0b0d10;
    --surface: #15191d;
    --surface-soft: #22282d;
    --text: #f7f3ee;
    --muted: #aeb7b6;
    --accent: #ff6b4a;
    --accent-2: #16c7b7;
    --accent-soft: #ffd8cd;
    --border: rgba(255,255,255,0.1);
    --shadow: 0 24px 70px rgba(0,0,0,.34);
}
* { box-sizing: border-box; }
body { margin:0; font-family: Inter,system-ui,-apple-system,Segoe UI, sans-serif; color: var(--text); background: var(--bg); }
a { color: inherit; text-decoration:none; }
img { max-width:100%; display:block; }
.container { width:min(1140px, calc(100% - 2rem)); margin:0 auto; }
.site-header { position: sticky; top:0; z-index:10; background: rgba(10,12,14,.92); backdrop-filter: blur(14px); border-bottom:1px solid rgba(255,255,255,0.08); }
.header-inner { display:flex; align-items:center; justify-content:space-between; gap:1.25rem; padding:.8rem 0; }
.brand { display:grid; grid-template-columns:auto 1fr; grid-template-rows:auto auto; align-items:center; column-gap:.9rem; min-width:260px; }
.brand a { grid-column:2; font-size:1.18rem; font-weight:800; letter-spacing:0; line-height:1.05; }
.brand span { grid-column:2; display:block; font-size:.8rem; color:var(--accent); font-weight:800; line-height:1; }
.brand-logo { grid-row:1 / span 2; max-height:72px; width:auto; max-width:180px; object-fit:contain; }
.site-nav { display:flex; flex-wrap:wrap; gap:1rem; }
.site-nav a { font-size:.95rem; color:var(--muted); transition:.2s; }
.site-nav a:hover { color:var(--text); }
.header-socials, .footer-socials, .social-list, .share-links { display:flex; flex-wrap:wrap; gap:.55rem; align-items:center; }
.header-socials a, .footer-socials a, .social-list a, .share-links a { display:inline-flex; align-items:center; justify-content:center; width:38px; height:38px; border:1px solid rgba(255,255,255,.12); border-radius:8px; color:var(--muted); font-size:.82rem; font-weight:800; transition:.2s; background:rgba(255,255,255,.035); }
.header-socials svg, .footer-socials svg, .social-list svg, .share-links svg { width:18px; height:18px; fill:currentColor; display:block; }
.share-links a { width:42px; height:42px; color:var(--text); background:rgba(22,199,183,.08); }
.header-socials a:hover, .footer-socials a:hover, .social-list a:hover, .share-links a:hover { color:var(--text); border-color:rgba(22,199,183,.45); background:rgba(22,199,183,.08); }
.section { padding:4rem 0; }
.section-light { background:#0f1314; }
.section-dark { background:#090b0d; }
.hero { padding:5rem 0 3rem; position:relative; overflow:hidden; }
.hero-with-bg { background-size:cover; background-position:center; }
.hero-with-bg::before { content:''; position:absolute; inset:0; background:linear-gradient(90deg, rgba(7,8,9,.88) 0%, rgba(7,8,9,.68) 52%, rgba(7,8,9,.44) 100%); }
.hero-grid { display:grid; grid-template-columns:1.25fr .95fr; gap:2rem; align-items:center; position:relative; z-index:1; }
.eyebrow { text-transform:uppercase; letter-spacing:.16em; color:var(--accent); font-size:.78rem; font-weight:800; margin-bottom:1rem; }
.hero-copy h1 { font-size:clamp(3rem, 4vw, 4.6rem); margin:.2rem 0 1rem; line-height:1; }
.hero-text { max-width:45rem; margin-bottom:1.75rem; color:var(--muted); line-height:1.8; }
.hero-actions { display:flex; flex-wrap:wrap; gap:1rem; margin-bottom:2rem; }
.audio-player-wrapper { margin-bottom:2rem; }
.player-note { color: #d1d7ff; margin:0 0 1rem; font-size:.98rem; }
.player-note a { color: var(--accent); text-decoration:underline; }
.audio-label { margin:0 0 .75rem; color:var(--muted); font-size:.95rem; text-transform:uppercase; letter-spacing:.12em; }
.audio-player { width:100%; border-radius:18px; background:var(--surface-soft); border:1px solid rgba(255,255,255,.1); padding:.6rem; }
.button { display:inline-flex; align-items:center; justify-content:center; border-radius:8px; padding:.9rem 1.45rem; font-weight:800; transition:.2s; border:0; cursor:pointer; }
.button.primary { background:var(--accent); color:#16100d; box-shadow:0 14px 30px rgba(255,107,74,.2); }
.button.secondary { border:1px solid rgba(255,255,255,.14); color:var(--text); background:rgba(255,255,255,.04); }
.button.outline { border:1px solid rgba(255,255,255,.14); color:var(--text); background:transparent; }
.button:hover { transform:translateY(-1px); }
.button.small { padding:.75rem 1.25rem; font-size:.95rem; }
.hero-stats { display:flex; gap:1.25rem; list-style:none; padding:0; margin:0; }
.hero-stats li { display:flex; flex-direction:column; gap:.4rem; font-size:.95rem; color:var(--muted); }
.share-box { display:grid; gap:.7rem; margin-top:1.5rem; }
.share-box span { color:var(--muted); font-size:.88rem; font-weight:800; text-transform:uppercase; letter-spacing:.1em; }
.share-box.compact { margin:1.3rem 0; }
.hero-card { background:linear-gradient(180deg, rgba(255,107,74,.16), rgba(21,25,29,.95)); border:1px solid rgba(255,255,255,.09); border-radius:8px; overflow:hidden; box-shadow:var(--shadow); }
.hero-image { width:100%; min-height:320px; object-fit:cover; }
.show-card { padding:1.75rem; }
.show-card h2 { margin:.5rem 0 1rem; font-size:1.85rem; }
.tag, .show-card .tag { display:inline-flex; padding:.38rem .75rem; border-radius:999px; background:rgba(22,199,183,.12); color:var(--accent-2); font-size:.82rem; font-weight:800; margin-bottom:.75rem; }
.show-meta { display:flex; flex-wrap:wrap; gap:1rem; color:var(--muted); font-size:.95rem; margin:1rem 0 0; }
.section-header { display:flex; flex-direction:column; gap:.6rem; margin-bottom:2rem; }
.section-header h2 { font-size:2.2rem; margin:0; }
.section-header.light h2 { color:#f8f9ff; }
.grid { display:grid; gap:1.5rem; }
.cards { grid-template-columns:repeat(2, minmax(0, 1fr)); }
.card { background:var(--surface); border:1px solid var(--border); border-radius:8px; overflow:hidden; box-shadow:0 16px 40px rgba(0,0,0,.18); }
.card img { width:100%; height:260px; object-fit:cover; }
.card-body { padding:1.4rem; }
.card h3 { margin:.8rem 0 .5rem; font-size:1.35rem; }
.card-meta { color:var(--muted); margin-bottom:1rem; }
.schedule-grid { grid-template-columns:repeat(3, minmax(0, 1fr)); }
.schedule-card { padding:1.5rem; background:var(--surface-soft); border:1px solid var(--border); border-radius:8px; }
.schedule-card h3 { margin-top:0; }
.schedule-time { color:var(--accent); font-weight:700; margin-top:1rem; }
.stats-grid { display:grid; grid-template-columns:repeat(4, minmax(0, 1fr)); gap:1rem; }
.stat-box { padding:1.75rem; background:linear-gradient(180deg, rgba(255,107,74,.16), rgba(21,25,29,.98)); border:1px solid rgba(255,255,255,.08); border-radius:8px; text-align:center; }
.stat-box strong { display:block; font-size:2rem; margin-bottom:.5rem; }
.show-detail-card { display:grid; gap:1.5rem; background:var(--surface); border:1px solid var(--border); border-radius:8px; overflow:hidden; padding:0; }
.show-detail-card img { width:100%; height:auto; display:block; }
.show-detail-body { padding:1.75rem; }
.show-detail-body .tag { display:inline-flex; padding:.4rem .85rem; border-radius:999px; background:rgba(247,95,93,.15); color:var(--accent); font-size:.85rem; margin-bottom:.85rem; }
.show-detail-body p { color:var(--muted); line-height:1.8; }
.testimonials-grid { grid-template-columns:repeat(3, minmax(0, 1fr)); }
.testimonial { padding:1.75rem; border:1px solid var(--border); border-radius:8px; background:var(--surface); }
.testimonial p { color:var(--muted); line-height:1.8; }
.contact-grid { display:grid; grid-template-columns:1.2fr .8fr; gap:2rem; align-items:start; }
.contact-card, .contact-info { background:var(--surface); border:1px solid var(--border); border-radius:8px; padding:2rem; }
.contact-form { display:flex; gap:1rem; flex-wrap:wrap; margin-top:1.25rem; }
.contact-form input { flex:1; border:1px solid rgba(255,255,255,.12); background:rgba(255,255,255,.04); color:var(--text); border-radius:14px; padding:1rem 1.1rem; min-width:220px; }
.contact-info h3 { margin-top:0; }
.social-list { margin-top:1.25rem; }
.footer { border-top:1px solid rgba(255,255,255,.08); padding:1.5rem 0; }
.footer-inner { display:flex; gap:1rem; justify-content:space-between; align-items:center; color:var(--muted); flex-wrap:wrap; }
.footer-links { display:flex; gap:1rem; flex-wrap:wrap; }
.admin-message { margin-top:1rem; color: #bef264; font-weight:800; }
.admin-page { background:#0b0d10; }
.admin-shell { display:grid; grid-template-columns:280px minmax(0,1fr); gap:1.5rem; width:min(1440px, calc(100% - 2rem)); margin:0 auto; padding:1.5rem 0 3rem; }
.admin-sidebar { position:sticky; top:86px; align-self:start; min-height:calc(100vh - 110px); padding:1.25rem; background:#15191d; border:1px solid var(--border); border-radius:8px; }
.admin-sidebar h1 { margin:.25rem 0 1.5rem; font-size:1.8rem; }
.admin-side-nav { display:grid; gap:.4rem; }
.admin-side-nav a { padding:.75rem .85rem; border-radius:8px; color:var(--muted); font-weight:800; }
.admin-side-nav a:hover { background:rgba(255,255,255,.06); color:var(--text); }
.admin-workspace { display:grid; gap:1rem; }
.admin-hero-panel { display:flex; justify-content:space-between; gap:1rem; align-items:flex-start; padding:1.5rem; background:linear-gradient(135deg, rgba(255,107,74,.16), rgba(22,199,183,.08)), #15191d; border:1px solid var(--border); border-radius:8px; box-shadow:var(--shadow); }
.admin-hero-panel h2 { margin:.2rem 0 .6rem; font-size:2rem; }
.admin-hero-panel p { color:var(--muted); max-width:760px; }
.admin-metrics { display:grid; grid-template-columns:repeat(4, minmax(0, 1fr)); gap:1rem; }
.metric-card { padding:1.2rem; background:#15191d; border:1px solid var(--border); border-radius:8px; }
.metric-card span { display:block; color:var(--muted); font-size:.9rem; font-weight:700; }
.metric-card strong { display:block; margin-top:.55rem; font-size:2rem; }
.admin-grid { display:grid; grid-template-columns:1fr 1fr; gap:1.5rem; margin-bottom:2rem; }
.admin-card { background:var(--surface); border:1px solid var(--border); border-radius:8px; padding:1.5rem; scroll-margin-top:110px; }
.admin-card h3 { margin-top:0; }
.asset-preview-grid { display:grid; grid-template-columns:1fr 1fr; gap:1rem; margin:1rem 0 1.5rem; }
.asset-preview-grid figure { margin:0; border:1px solid var(--border); border-radius:8px; overflow:hidden; background:rgba(255,255,255,.03); }
.asset-preview-grid span { display:block; padding:.7rem .85rem; color:var(--muted); font-size:.86rem; font-weight:800; }
.asset-preview-grid img { width:100%; height:180px; object-fit:cover; background:#0b0d10; }
.admin-card label { display:block; margin-bottom:1rem; color:var(--muted); font-size:.95rem; }
.admin-card input, .admin-card textarea, .admin-card select { width:100%; border:1px solid rgba(255,255,255,.12); background:rgba(255,255,255,.04); color:var(--text); border-radius:8px; padding:.9rem 1rem; margin-top:.4rem; }
.admin-card input:focus, .admin-card textarea:focus, .admin-card select:focus { outline:none; border-color:rgba(22,199,183,.85); box-shadow:0 0 0 4px rgba(22,199,183,.1); }
.admin-card h4 { grid-column:1/-1; margin:1rem 0 0; padding-top:1rem; border-top:1px solid var(--border); color:#fff; }
.admin-wide { grid-column:1/-1; }
.admin-list .admin-section { margin-bottom:2rem; }
.admin-list { overflow:auto; border:1px solid var(--border); border-radius:8px; }
.admin-list table { width:100%; border-collapse:collapse; min-width:680px; }
.admin-list th, .admin-list td { padding:.85rem 1rem; border-bottom:1px solid rgba(255,255,255,.08); text-align:left; vertical-align:middle; }
.admin-list th { background: rgba(255,255,255,.05); color:#fff; font-size:.86rem; text-transform:uppercase; letter-spacing:.08em; }
.admin-list tr:hover td { background:rgba(255,255,255,.03); }
.login-page {
    background-image: radial-gradient(circle at top left, rgba(247,95,93,.18), transparent 24%),
                      radial-gradient(circle at bottom right, rgba(79,106,255,.12), transparent 28%),
                      linear-gradient(180deg, #060914 0%, #0d1224 100%);
}
.login-panel {
    max-width: 540px;
    margin: 5rem auto 4rem;
    padding: 2.25rem 2.25rem 2.5rem;
    background: rgba(12, 18, 35, 0.92);
    border: 1px solid rgba(255,255,255,.08);
    border-radius: 28px;
    box-shadow: 0 30px 90px rgba(0,0,0,.35);
}
.login-intro {
    margin-bottom: 2rem;
}
.login-intro h1 {
    margin: 0.4rem 0 1rem;
    font-size: clamp(2rem, 3vw, 2.7rem);
    line-height: 1.05;
}
.auth-form {
    display: grid;
    gap: 1rem;
}
.auth-field {
    display: grid;
    gap: 0.5rem;
}
.auth-field span {
    color: var(--muted);
    font-size: 0.95rem;
}
.auth-field input {
    width: 100%;
    border: 1px solid rgba(255,255,255,.12);
    background: rgba(255,255,255,.04);
    color: var(--text);
    border-radius: 16px;
    padding: 1rem 1.1rem;
    transition: border-color .2s, box-shadow .2s;
}
.auth-field input:focus {
    outline: none;
    border-color: rgba(247,95,93,.8);
    box-shadow: 0 0 0 4px rgba(247,95,93,.08);
}
.auth-error {
    padding: 1rem 1rem 0.85rem;
    border-radius: 16px;
    background: rgba(247,95,93,.08);
    border: 1px solid rgba(247,95,93,.18);
    color: #ffb3b3;
    font-weight: 600;
}
@media (max-width: 960px) {
    .hero-grid, .cards, .schedule-grid, .stats-grid, .testimonials-grid, .contact-grid, .admin-shell, .admin-metrics, .asset-preview-grid { grid-template-columns:1fr; }
    .admin-sidebar { position:static; min-height:auto; }
    .site-nav { justify-content:center; }
    .header-inner { align-items:flex-start; }
}
@media (max-width: 680px) {
    .header-inner { flex-direction:column; align-items:flex-start; }
    .brand { width:100%; min-width:0; grid-template-columns:auto minmax(0,1fr); }
    .brand-logo { max-height:62px; max-width:160px; }
    .site-nav, .header-socials { width:100%; gap:.5rem; }
    .site-nav a { flex:1 1 auto; text-align:center; }
    .header-socials a { width:40px; height:40px; }
    .hero { padding-top:3rem; }
    .hero-copy h1 { font-size:2.6rem; }
    .hero-stats { flex-direction:column; }
    .admin-grid { grid-template-columns:1fr; gap:1rem; }
    .button { width:100%; justify-content:center; }
}