🎧 Radio Modern – Yeni Nesil Canlı Radyo ve Blogger Tema Deneyimi
Radio Modern, Blogger altyapısı için geliştirilmiş modern, hızlı ve kullanıcı odaklı bir radyo web sitesi temasıdır. Dark UI tasarımı ile birlikte profesyonel bir yayın deneyimi sunar.
Bu yapı özellikle canlı radyo yayın siteleri, müzik blogları ve dijital yayın platformları için optimize edilmiştir.
<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html>
<html b:css='false' b:defaultwidgetversion='2' b:layoutsversion='3' xmlns='http://www.w3.org/1999/xhtml' xmlns:b='http://www.google.com/2005/gml/b' xmlns:data='http://www.google.com/2005/gml/data' xmlns:expr='http://www.google.com/2005/gml/expr'>
<head>
<meta content='width=device-width, initial-scale=1' name='viewport'/>
<title><data:blog.pageTitle/></title>
<b:skin><![CDATA[
#navbar-iframe { display: none !important; }
body { margin: 0; padding: 0; background: #020202; color: #fff; font-family: 'Inter', sans-serif; overflow-x: hidden; }
.post-body img { max-width: 100%; height: auto; border-radius: 1.5rem; margin: 1.5rem 0; box-shadow: 0 20px 50px rgba(0,0,0,0.5); }
.post-body { font-size: 1.15rem; line-height: 1.8; color: #d1d5db; }
.post-body h1, .post-body h2, .post-body h3 { color: #fff; margin-top: 2.5rem; margin-bottom: 1.5rem; font-family: 'Poppins', sans-serif; font-weight: 800; }
]]></b:skin>
<link href='https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&family=Poppins:wght@400;600;700;800&display=swap' rel='stylesheet'/>
<script src='https://cdn.tailwindcss.com'/>
<script src='https://unpkg.com/lucide@latest'/>
<script>
tailwind.config = {
theme: {
extend: {
fontFamily: { sans: ['Inter', 'sans-serif'], poppins: ['Poppins', 'sans-serif'] },
colors: { dark: '#020202', primary: '#4f46e5', accent: '#818cf8' }
}
}
}
</script>
<style>
.glass { background: rgba(255, 255, 255, 0.03); backdrop-filter: blur(12px); border: 1px solid rgba(255, 255, 255, 0.08); }
.gradient-text { background: linear-gradient(90deg, #fff, #94a3b8); -webkit-background-clip: text; -webkit-text-fill-color: transparent; }
.play-btn-glow { box-shadow: 0 0 40px rgba(79, 70, 229, 0.5); }
.social-icon-box { width: 40px; height: 40px; background: rgba(255,255,255,0.05); border-radius: 12px; display: flex; align-items: center; justify-content: center; color: #9ca3af; transition: all 0.3s; border: 1px solid rgba(255,255,255,0.05); }
.social-icon-box:hover { background: #4f46e5; color: white; transform: translateY(-3px); }
</style>
</head>
<body class='bg-dark text-white selection:bg-primary'>
<!-- Navbar -->
<nav class='fixed top-0 w-full z-50 bg-black/80 backdrop-blur-md border-b border-white/10'>
<div class='max-w-7xl mx-auto px-4 sm:px-6 lg:px-8'>
<div class='flex items-center justify-between h-20'>
<div class='flex items-center gap-2'>
<div class='bg-primary p-2 rounded-lg shadow-lg'><i class='w-6 h-6 text-white' data-lucide='radio'/></div>
<span class='text-2xl font-bold gradient-text font-poppins tracking-tighter uppercase'>RADIO<span class='text-primary'>MODERN</span></span>
</div>
<div class='hidden md:flex items-baseline space-x-8 text-sm font-medium uppercase tracking-wider'>
<a class='text-white hover:text-primary transition-colors' href='/'>Ana Sayfa</a>
<a class='text-gray-400 hover:text-white transition-colors' href='#programs'>Programlar</a>
<a class='text-gray-400 hover:text-white transition-colors' href='#schedule'>Yayın Akışı</a>
<a class='text-gray-400 hover:text-white transition-colors' href='#footer'>İletişim</a>
</div>
<button class='hidden md:block bg-primary hover:bg-indigo-700 text-white px-6 py-2 rounded-full text-[10px] font-black tracking-widest transition-all'>DİNLE</button>
</div>
</div>
</nav>
<b:if cond='data:view.isHomepage'>
<!-- Hero Section -->
<div class='relative pt-32 pb-16 lg:pt-56 lg:pb-32 overflow-hidden'>
<div class='absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-[800px] h-[800px] bg-primary/10 blur-[150px] rounded-full -z-10 animate-pulse'/>
<div class='max-w-7xl mx-auto px-4 sm:px-6 lg:px-8'>
<div class='grid lg:grid-cols-2 gap-16 items-center'>
<div class='space-y-10 text-center lg:text-left'>
<div class='inline-flex items-center gap-3 px-4 py-2 rounded-full bg-red-500/10 border border-red-500/20 text-red-500 text-[10px] font-black uppercase tracking-[0.2em]'>
<span class='relative flex h-2 w-2'><span class='animate-ping absolute inline-flex h-full w-full rounded-full bg-red-400 opacity-75'/><span class='relative inline-flex rounded-full h-2 w-2 bg-red-500'/></span>
CANLI YAYIN
</div>
<h1 class='text-6xl lg:text-8xl font-black font-poppins text-white leading-[0.9] tracking-tighter uppercase'>MÜZİĞİN <br/><span class='text-transparent bg-clip-text bg-gradient-to-r from-indigo-400 via-purple-400 to-pink-400'>MODERN</span> <br/> SESİ</h1>
<p class='text-xl text-gray-400 max-w-xl mx-auto lg:mx-0 font-medium'>Kesintisiz müzik, kaliteli yayıncılık ve Türkiye'nin en sevilen radyocularıyla her an yanınızdayız.</p>
<button class='px-10 py-5 bg-primary hover:bg-indigo-700 text-white font-black rounded-2xl transition-all shadow-2xl flex items-center gap-4 text-xs tracking-widest uppercase mx-auto lg:mx-0'>
<i class='fill-current' data-lucide='play'/> ŞİMDİ DİNLE
</button>
</div>
<div class='relative hidden lg:block'>
<div class='glass p-10 rounded-[4rem] relative z-10 scale-105'>
<img class='rounded-[3rem] w-full aspect-square object-cover mb-10 shadow-2xl border border-white/10' src='https://images.unsplash.com/photo-1470225620780-dba8ba36b745?q=80&w=2070'/>
<div class='flex justify-between items-center'>
<div><h3 class='text-3xl font-black font-poppins text-white tracking-tighter uppercase'>Midnight Grooves</h3><p class='text-primary font-black tracking-[0.3em] text-[10px] uppercase mt-1'>DJ ELIF HARMONY</p></div>
<i class='w-8 h-8 text-primary animate-pulse' data-lucide='radio'/>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Popüler Programlar (8 Öğe) -->
<section class='py-32 bg-[#08080a]' id='programs'>
<div class='max-w-7xl mx-auto px-4'>
<div class='flex flex-col items-center mb-20'><h2 class='text-4xl font-black font-poppins text-white uppercase tracking-tighter mb-4'>Popüler Programlar</h2><div class='w-20 h-1.5 bg-primary rounded-full'/></div>
<div class='grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-10'>
<div class='group relative rounded-[3rem] overflow-hidden aspect-[3/4] border border-white/5'>
<img class='absolute inset-0 w-full h-full object-cover transition duration-1000 group-hover:scale-110' src='https://images.unsplash.com/photo-1571266028243-3716f02d2d2e?q=80&w=2070'/>
<div class='absolute inset-0 bg-gradient-to-t from-black via-black/40 to-transparent'/>
<div class='absolute bottom-0 p-10 transform transition duration-500 group-hover:-translate-y-2'><h3 class='text-2xl font-black text-white leading-tight uppercase'>Elektronik Geceler</h3><p class='text-primary font-bold text-[10px] uppercase tracking-widest mt-2 uppercase'>DJ ARAS</p></div>
</div>
<div class='group relative rounded-[3rem] overflow-hidden aspect-[3/4] border border-white/5'>
<img class='absolute inset-0 w-full h-full object-cover transition duration-1000 group-hover:scale-110' src='https://images.unsplash.com/photo-1511671782779-c97d3d27a1d4?q=80&w=2070'/>
<div class='absolute inset-0 bg-gradient-to-t from-black via-black/40 to-transparent'/>
<div class='absolute bottom-0 p-10 transform transition duration-500 group-hover:-translate-y-2'><h3 class='text-2xl font-black text-white leading-tight uppercase'>Akustik Sabah</h3><p class='text-primary font-bold text-[10px] uppercase tracking-widest mt-2 uppercase'>SELIN DOĞU</p></div>
</div>
<div class='group relative rounded-[3rem] overflow-hidden aspect-[3/4] border border-white/5'>
<img class='absolute inset-0 w-full h-full object-cover transition duration-1000 group-hover:scale-110' src='https://images.unsplash.com/photo-1496293455970-f8581aae0e3c?q=80&w=2070'/>
<div class='absolute inset-0 bg-gradient-to-t from-black via-black/40 to-transparent'/>
<div class='absolute bottom-0 p-10 transform transition duration-500 group-hover:-translate-y-2'><h3 class='text-2xl font-black text-white leading-tight uppercase'>R&B Rüzgarı</h3><p class='text-primary font-bold text-[10px] uppercase tracking-widest mt-2 uppercase'>KAAN VURAL</p></div>
</div>
<div class='group relative rounded-[3rem] overflow-hidden aspect-[3/4] border border-white/5'>
<img class='absolute inset-0 w-full h-full object-cover transition duration-1000 group-hover:scale-110' src='https://images.unsplash.com/photo-1514525253344-f814d871d6d5?q=80&w=1974'/>
<div class='absolute inset-0 bg-gradient-to-t from-black via-black/40 to-transparent'/>
<div class='absolute bottom-0 p-10 transform transition duration-500 group-hover:-translate-y-2'><h3 class='text-2xl font-black text-white leading-tight uppercase'>Jazz Saati</h3><p class='text-primary font-bold text-[10px] uppercase tracking-widest mt-2 uppercase'>LEYLA GENCER</p></div>
</div>
<!-- Alt Satır -->
<div class='group relative rounded-[3rem] overflow-hidden aspect-[3/4] border border-white/5'>
<img class='absolute inset-0 w-full h-full object-cover transition duration-1000 group-hover:scale-110' src='https://images.unsplash.com/photo-1493225255756-d9584f8606e9?q=80&w=2070'/>
<div class='absolute inset-0 bg-gradient-to-t from-black via-black/40 to-transparent'/>
<div class='absolute bottom-0 p-10 transform transition duration-500 group-hover:-translate-y-2'><h3 class='text-2xl font-black text-white leading-tight uppercase'>Retro Hits</h3><p class='text-primary font-bold text-[10px] uppercase tracking-widest mt-2 uppercase'>SELIN SU</p></div>
</div>
<div class='group relative rounded-[3rem] overflow-hidden aspect-[3/4] border border-white/5'>
<img class='absolute inset-0 w-full h-full object-cover transition duration-1000 group-hover:scale-110' src='https://images.unsplash.com/photo-1516280440614-37939bbacd81?q=80&w=2070'/>
<div class='absolute inset-0 bg-gradient-to-t from-black via-black/40 to-transparent'/>
<div class='absolute bottom-0 p-10 transform transition duration-500 group-hover:-translate-y-2'><h3 class='text-2xl font-black text-white leading-tight uppercase'>Gece Mavisi</h3><p class='text-primary font-bold text-[10px] uppercase tracking-widest mt-2 uppercase'>BURAK CAN</p></div>
</div>
<div class='group relative rounded-[3rem] overflow-hidden aspect-[3/4] border border-white/5'>
<img class='absolute inset-0 w-full h-full object-cover transition duration-1000 group-hover:scale-110' src='https://images.unsplash.com/photo-1524368535928-5b5e00ddc76b?q=80&w=2070'/>
<div class='absolute inset-0 bg-gradient-to-t from-black via-black/40 to-transparent'/>
<div class='absolute bottom-0 p-10 transform transition duration-500 group-hover:-translate-y-2'><h3 class='text-2xl font-black text-white leading-tight uppercase'>Piyano Vakti</h3><p class='text-primary font-bold text-[10px] uppercase tracking-widest mt-2 uppercase'>MERT AKIN</p></div>
</div>
<div class='group relative rounded-[3rem] overflow-hidden aspect-[3/4] border border-white/5'>
<img class='absolute inset-0 w-full h-full object-cover transition duration-1000 group-hover:scale-110' src='https://images.unsplash.com/photo-1511379938547-c1f69419868d?q=80&w=2070'/>
<div class='absolute inset-0 bg-gradient-to-t from-black via-black/40 to-transparent'/>
<div class='absolute bottom-0 p-10 transform transition duration-500 group-hover:-translate-y-2'><h3 class='text-2xl font-black text-white leading-tight uppercase'>Dünya Sahnesi</h3><p class='text-primary font-bold text-[10px] uppercase tracking-widest mt-2 uppercase'>MELIS YILDIZ</p></div>
</div>
</div>
</div>
</section>
<!-- Yayın Akışı (8 Öğe) -->
<section class='py-32 bg-black/40' id='schedule'>
<div class='max-w-7xl mx-auto px-4'>
<div class='flex items-center justify-between mb-20'><h2 class='text-4xl font-black font-poppins uppercase tracking-tighter'>Yayın Akışı</h2><span class='text-primary font-black tracking-widest text-[10px] uppercase underline underline-offset-8'>BUGÜN</span></div>
<div class='grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8'>
<div class='p-10 glass rounded-[2.5rem] border-l-8 border-l-primary/40'><div class='text-primary text-[10px] font-black mb-2 uppercase tracking-widest'>08:00 - 10:00</div><h3 class='text-xl font-black text-white'>Güne Merhaba</h3><p class='text-gray-500 font-medium text-sm uppercase'>Caner Aydın</p></div>
<div class='p-10 bg-primary/10 rounded-[2.5rem] border-2 border-primary relative shadow-2xl'><div class='absolute top-6 right-6 bg-red-500 text-[8px] font-black px-3 py-1 rounded-full animate-pulse'>CANLI</div><div class='text-indigo-400 text-[10px] font-black mb-2 uppercase tracking-widest'>10:00 - 12:00</div><h3 class='text-xl font-black text-white'>Pop Mix 2024</h3><p class='text-gray-300 font-medium text-sm uppercase'>Melis Yıldız</p></div>
<div class='p-10 glass rounded-[2.5rem] border-l-8 border-l-primary/40'><div class='text-primary text-[10px] font-black mb-2 uppercase tracking-widest'>12:00 - 14:00</div><h3 class='text-xl font-black text-white'>Öğle Arası</h3><p class='text-gray-500 font-medium text-sm uppercase'>Mert Akın</p></div>
<div class='p-10 glass rounded-[2.5rem] border-l-8 border-l-primary/40'><div class='text-primary text-[10px] font-black mb-2 uppercase tracking-widest'>14:00 - 16:00</div><h3 class='text-xl font-black text-white'>Retro Hits</h3><p class='text-gray-500 font-medium text-sm uppercase'>Selin Su</p></div>
<div class='p-10 glass rounded-[2.5rem] border-l-8 border-l-primary/40'><div class='text-primary text-[10px] font-black mb-2 uppercase tracking-widest'>16:00 - 18:00</div><h3 class='text-xl font-black text-white'>Akşam Üstü</h3><p class='text-gray-500 font-medium text-sm uppercase'>Burak Can</p></div>
<div class='p-10 glass rounded-[2.5rem] border-l-8 border-l-primary/40'><div class='text-primary text-[10px] font-black mb-2 uppercase tracking-widest'>18:00 - 20:00</div><h3 class='text-xl font-black text-white'>Drive Time</h3><p class='text-gray-500 font-medium text-sm uppercase'>Deniz Öz</p></div>
<div class='p-10 glass rounded-[2.5rem] border-l-8 border-l-primary/40'><div class='text-primary text-[10px] font-black mb-2 uppercase tracking-widest'>20:00 - 22:00</div><h3 class='text-xl font-black text-white'>Midnight Grooves</h3><p class='text-gray-500 font-medium text-sm uppercase'>Elif Harmony</p></div>
<div class='p-10 glass rounded-[2.5rem] border-l-8 border-l-primary/40'><div class='text-primary text-[10px] font-black mb-2 uppercase tracking-widest'>22:00 - 00:00</div><h3 class='text-xl font-black text-white'>Night Shift</h3><p class='text-gray-500 font-medium text-sm uppercase'>Müzik Maratonu</p></div>
</div>
</div>
</section>
</b:if>
<!-- Blogger Blog1 FULL FIX -->
<section expr:class='data:view.isPost ? "pt-40 pb-32" : "py-32"'>
<div class='max-w-7xl mx-auto px-4'>
<b:section class='main' id='main' showaddelement='yes'>
<b:widget id='Blog1' locked='true' title='Blog Kayıtları' type='Blog' version='2' visible='true'>
<b:widget-settings>
<b:widget-setting name='showDateHeader'>false</b:widget-setting>
<b:widget-setting name='style.textcolor'>#ffffff</b:widget-setting>
<b:widget-setting name='showShareButtons'>true</b:widget-setting>
<b:widget-setting name='showCommentLink'>true</b:widget-setting>
<b:widget-setting name='style.urlcolor'>#ffffff</b:widget-setting>
<b:widget-setting name='showAuthor'>false</b:widget-setting>
<b:widget-setting name='style.linkcolor'>#ffffff</b:widget-setting>
<b:widget-setting name='style.unittype'>TextAndImage</b:widget-setting>
<b:widget-setting name='style.bgcolor'>#ffffff</b:widget-setting>
<b:widget-setting name='timestampLabel'/>
<b:widget-setting name='reactionsLabel'/>
<b:widget-setting name='showAuthorProfile'>false</b:widget-setting>
<b:widget-setting name='style.layout'>1x1</b:widget-setting>
<b:widget-setting name='showLabels'>true</b:widget-setting>
<b:widget-setting name='showLocation'>true</b:widget-setting>
<b:widget-setting name='postLabelsLabel'/>
<b:widget-setting name='showTimestamp'>true</b:widget-setting>
<b:widget-setting name='postsPerAd'>3</b:widget-setting>
<b:widget-setting name='showBacklinks'>false</b:widget-setting>
<b:widget-setting name='style.bordercolor'>#ffffff</b:widget-setting>
<b:widget-setting name='showInlineAds'>true</b:widget-setting>
<b:widget-setting name='showReactions'>false</b:widget-setting>
</b:widget-settings>
<b:includable id='main'>
<!-- LİSTE SAYFASI -->
<b:if cond='data:view.isMultipleItems'>
<h2 class='text-4xl font-black font-poppins mb-16 uppercase tracking-tighter'>
Haberler & Blog
</h2>
<div class='grid grid-cols-1 md:grid-cols-3 gap-10'>
<b:loop values='data:posts' var='post'>
<article class='group glass rounded-[3rem] overflow-hidden hover:border-primary transition-all duration-500 border border-white/5'>
<!-- RESİM FIX -->
<div class='aspect-video overflow-hidden'>
<b:if cond='data:post.featuredImage'>
<img class='w-full h-full object-cover transition duration-500 group-hover:scale-105' expr:src='resizeImage(data:post.featuredImage, 600, "16:9")'/>
<b:elseif cond='data:post.firstImageUrl'/>
<img class='w-full h-full object-cover transition duration-500 group-hover:scale-105' expr:src='data:post.firstImageUrl'/>
<b:else/>
<img class='w-full h-full object-cover' src='https://via.placeholder.com/600x400?text=Resim+Yok'/>
</b:if>
</div>
<div class='p-10'>
<h3 class='text-xl font-black mb-4 group-hover:text-primary transition-colors uppercase tracking-tight'>
<a expr:href='data:post.url'>
<data:post.title/>
</a>
</h3>
<p class='text-gray-400 text-sm leading-relaxed line-clamp-2 mb-6'>
<data:post.snippet/>
</p>
<a class='text-[10px] font-black text-primary uppercase tracking-[0.2em] flex items-center gap-2' expr:href='data:post.url'>
OKUMAYA DEVAM ET
<i class='w-4 h-4' data-lucide='arrow-right'/>
</a>
</div>
</article>
</b:loop>
</div>
<!-- TEK YAZI SAYFASI -->
<b:else/>
<b:loop values='data:posts' var='post'>
<div class='max-w-3xl mx-auto bg-white/5 p-10 md:p-20 rounded-[4rem] border border-white/10 shadow-2xl'>
<h1 class='text-4xl md:text-5xl font-black font-poppins mb-10 leading-tight text-white tracking-tighter uppercase'>
<data:post.title/>
</h1>
<div class='post-body'>
<data:post.body/>
</div>
<!-- YORUMLAR AKTİF -->
<div class='mt-16'>
<b:include data='post' name='commentPicker'/>
</div>
</div>
</b:loop>
</b:if>
</b:includable>
<b:includable id='aboutPostAuthor'>
<div class='author-name'>
<a class='g-profile' expr:href='data:post.author.profileUrl' rel='author' title='author profile'>
<span>
<data:post.author.name/>
</span>
</a>
</div>
<div>
<span class='author-desc'>
<data:post.author.aboutMe/>
</span>
</div>
</b:includable>
<b:includable id='addComments'>
<a expr:href='data:post.commentsUrl' expr:onclick='data:post.commentsUrlOnclick'>
<b:message name='messages.postAComment'/>
</a>
</b:includable>
<b:includable id='blogThisShare'>
<b:with value='"window.open(this.href, \"_blank\", \"height=270,width=475\"); return false;"' var='onclick'>
<b:include name='platformShare'/>
</b:with>
</b:includable>
<b:includable id='bylineByName' var='byline'>
<b:switch var='data:byline.name'>
<b:case value='share'/>
<b:include cond='data:post.shareUrl' name='postShareButtons'/>
<b:case value='comments'/>
<b:include cond='data:post.allowComments' name='postCommentsLink'/>
<b:case value='location'/>
<b:include cond='data:post.location' name='postLocation'/>
<b:case value='timestamp'/>
<b:include cond='not data:view.isPage' name='postTimestamp'/>
<b:case value='author'/>
<b:include name='postAuthor'/>
<b:case value='labels'/>
<b:include cond='data:post.labels' name='postLabels'/>
<b:case value='icons'/>
<b:include cond='data:post.emailPostUrl' name='emailPostIcon'/>
</b:switch>
</b:includable>
<b:includable id='bylineRegion' var='regionItems'>
<b:loop values='data:regionItems' var='byline'>
<b:include data='byline' name='bylineByName'/>
</b:loop>
</b:includable>
<b:includable id='commentAuthorAvatar'>
<div class='avatar-image-container'>
<img class='author-avatar' expr:src='data:comment.authorAvatarSrc' height='35' width='35'/>
</div>
</b:includable>
<b:includable id='commentDeleteIcon' var='comment'>
<span expr:class='"item-control " + data:comment.adminClass'>
<b:if cond='data:showCmtPopup'>
<div class='goog-toggle-button'>
<div class='goog-inline-block comment-action-icon'/>
</div>
<b:else/>
<a class='comment-delete' expr:href='data:comment.deleteUrl' expr:title='data:messages.deleteComment'>
<img src='https://resources.blogblog.com/img/icon_delete13.gif'/>
</a>
</b:if>
</span>
</b:includable>
<b:includable id='commentForm' var='post'>
<div class='comment-form'>
<a name='comment-form'/>
<h4 id='comment-post-message'><data:messages.postAComment/></h4>
<b:if cond='data:this.messages.blogComment != ""'>
<p><data:this.messages.blogComment/></p>
</b:if>
<b:include data='post' name='commentFormIframeSrc'/>
<iframe allowtransparency='allowtransparency' class='blogger-iframe-colorize blogger-comment-from-post' expr:height='data:cmtIframeInitialHeight ?: "90px"' frameborder='0' id='comment-editor' name='comment-editor' src='' width='100%'/>
<data:post.cmtfpIframe/>
<script type='text/javascript'>
BLOG_CMT_createIframe('<data:post.appRpcRelayPath/>');
</script>
</div>
</b:includable>
<b:includable id='commentFormIframeSrc' var='post'>
<a expr:href='data:post.commentFormIframeSrc' id='comment-editor-src'/>
</b:includable>
<b:includable id='commentItem' var='comment'>
<div class='comment' expr:id='"c" + data:comment.id'>
<b:include cond='data:blog.enabledCommentProfileImages' name='commentAuthorAvatar'/>
<div class='comment-block'>
<div class='comment-author'>
<b:if cond='data:comment.authorUrl'>
<b:message name='messages.authorSaidWithLink'>
<b:param expr:value='data:comment.author' name='authorName'/>
<b:param expr:value='data:comment.authorUrl' name='authorUrl'/>
</b:message>
<b:else/>
<b:message name='messages.authorSaid'>
<b:param expr:value='data:comment.author' name='authorName'/>
</b:message>
</b:if>
</div>
<div expr:class='"comment-body" + (data:comment.isDeleted ? " deleted" : "")'>
<data:comment.body/>
</div>
<div class='comment-footer'>
<span class='comment-timestamp'>
<a expr:href='data:comment.url' title='comment permalink'>
<data:comment.timestamp/>
</a>
<b:include data='comment' name='commentDeleteIcon'/>
</span>
</div>
</div>
</div>
</b:includable>
<b:includable id='commentList' var='comments'>
<div id='comments-block'>
<b:loop values='data:comments' var='comment'>
<b:include data='comment' name='commentItem'/>
</b:loop>
</div>
</b:includable>
<b:includable id='commentPicker' var='post'>
<b:if cond='data:post.showThreadedComments'>
<b:include data='post' name='threadedComments'/>
<b:else/>
<b:include data='post' name='comments'/>
</b:if>
</b:includable>
<b:includable id='comments' var='post'>
<section expr:class='"comments" + (data:post.embedCommentForm ? " embed" : "")' expr:data-num-comments='data:post.numberOfComments' id='comments'>
<a name='comments'/>
<b:if cond='data:post.allowComments'>
<b:include name='commentsTitle'/>
<div expr:id='data:widget.instanceId + "_comments-block-wrapper"'>
<b:include cond='data:post.comments' data='post.comments' name='commentList'/>
</div>
<b:if cond='data:post.commentPagingRequired'>
<div class='paging-control-container'>
<b:if cond='data:post.hasOlderLinks'>
<a expr:class='data:post.oldLinkClass' expr:href='data:post.oldestLinkUrl'>
<data:messages.oldest/>
</a>
<a expr:class='data:post.oldLinkClass' expr:href='data:post.olderLinkUrl'>
<data:messages.older/>
</a>
</b:if>
<span class='comment-range-text'>
<data:post.commentRangeText/>
</span>
<b:if cond='data:post.hasNewerLinks'>
<a expr:class='data:post.newLinkClass' expr:href='data:post.newerLinkUrl'>
<data:messages.newer/>
</a>
<a expr:class='data:post.newLinkClass' expr:href='data:post.newestLinkUrl'>
<data:messages.newest/>
</a>
</b:if>
</div>
</b:if>
<div class='footer'>
<b:if cond='data:post.embedCommentForm'>
<b:if cond='data:post.allowNewComments'>
<b:include data='post' name='commentForm'/>
<b:else/>
<data:post.noNewCommentsText/>
</b:if>
<b:else/>
<b:if cond='data:post.allowComments'>
<b:include data='post' name='addComments'/>
</b:if>
</b:if>
</div>
</b:if>
<b:if cond='data:showCmtPopup'>
<div id='comment-popup'>
<iframe allowtransparency='allowtransparency' frameborder='0' id='comment-actions' name='comment-actions' scrolling='no'>
</iframe>
</div>
</b:if>
</section>
</b:includable>
<b:includable id='commentsLink'>
<a class='comment-link' expr:href='data:post.commentsUrl' expr:onclick='data:post.commentsUrlOnclick'>
<b:if cond='data:post.numberOfComments > 0'>
<b:message name='messages.numberOfComments'>
<b:param expr:value='data:post.numberOfComments' name='numComments'/>
</b:message>
<b:else/>
<data:messages.postAComment/>
</b:if>
</a>
</b:includable>
<b:includable id='commentsLinkIframe'>
<!-- G+ comments, no longer available. The includable is retained for backwards-compatibility. -->
</b:includable>
<b:includable id='commentsTitle'>
<h3 class='title'><data:messages.comments/></h3>
</b:includable>
<b:includable id='defaultAdUnit'>
<ins class='adsbygoogle' data-ad-format='auto' expr:data-ad-client='data:adClientId ?: data:blog.adsenseClientId' expr:data-ad-host='data:blog.adsenseHostId' expr:style='data:style ?: "display: block;"'>
<b:attr cond='not data:blog.analytics4' expr:value='data:blog.analyticsAccountNumber' name='data-analytics-uacct'/>
</ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
</b:includable>
<b:includable id='emailPostIcon'>
<span class='byline post-icons'>
<!-- email post links -->
<span class='item-action'>
<a expr:href='data:post.emailPostUrl' expr:title='data:messages.emailPost'>
<b:include data='{ iconClass: "touch-icon sharing-icon" }' name='emailIcon'/>
</a>
</span>
</span>
</b:includable>
<b:includable id='facebookShare'>
<b:with value='"window.open(this.href, \"_blank\", \"height=430,width=640\"); return false;"' var='onclick'>
<b:include name='platformShare'/>
</b:with>
</b:includable>
<b:includable id='feedLinks'>
<b:if cond='!data:view.isPost'> <!-- Blog feed links -->
<b:if cond='data:feedLinks'>
<div class='blog-feeds'>
<b:include data='feedLinks' name='feedLinksBody'/>
</div>
</b:if>
<b:else/> <!--Post feed links -->
<div class='post-feeds'>
<b:loop values='data:posts' var='post'>
<b:if cond='data:post.allowComments and data:post.feedLinks'>
<b:include data='post.feedLinks' name='feedLinksBody'/>
</b:if>
</b:loop>
</div>
</b:if>
</b:includable>
<b:includable id='feedLinksBody' var='links'>
<div class='feed-links'>
<data:messages.subscribeTo/>
<b:loop values='data:links' var='f'>
<a class='feed-link' expr:href='data:f.url' expr:type='data:f.mimeType' target='_blank'><data:f.name/> (<data:f.feedType/>)</a>
</b:loop>
</div>
</b:includable>
<b:includable id='footerBylines'>
<b:if cond='data:widgets.Blog.first.footerBylines'>
<b:loop index='i' values='data:widgets.Blog.first.footerBylines' var='region'>
<b:if cond='not data:region.items.empty'>
<div expr:class='"post-footer-line post-footer-line-" + (data:i + 1)'>
<b:with value='"footer-" + (data:i + 1)' var='regionName'>
<b:include data='region.items' name='bylineRegion'/>
</b:with>
</div>
</b:if>
</b:loop>
</b:if>
</b:includable>
<b:includable id='googlePlusShare'>
</b:includable>
<b:includable id='headerByline'>
<b:if cond='data:widgets.Blog.first.headerByline'>
<div class='post-header'>
<div class='post-header-line-1'>
<b:with value='"header-1"' var='regionName'>
<b:include data='data:widgets.Blog.first.headerByline.items' name='bylineRegion'/>
</b:with>
</div>
</div>
</b:if>
</b:includable>
<b:includable id='homePageLink'>
<a class='home-link' expr:href='data:blog.homepageUrl'>
<data:messages.home/>
</a>
</b:includable>
<b:includable id='iframeComments' var='post'>
<!-- G+ comments, no longer available. The includable is retained for backwards-compatibility. -->
</b:includable>
<b:includable id='inlineAd' var='post'>
<b:if cond='!data:view.isPreview'>
<b:if cond='data:this.adCode or data:this.adClientId or data:blog.adsenseClientId'>
<!-- Ad -->
<div class='inline-ad'>
<b:if cond='data:this.adCode != ""'>
<data:this.adCode/>
<b:else/>
<b:include cond='data:this.adClientId or data:blog.adsenseClientId' name='defaultAdUnit'/>
</b:if>
</div>
</b:if>
<b:else/>
<div class='inline-ad'>
<div class='inline-ad-placeholder'>
<span><b:message name='messages.adsGoHere'/></span>
</div>
</div>
</b:if>
</b:includable>
<b:includable id='linkShare'>
<b:with value='"window.prompt(\"Copy to clipboard: Ctrl+C, Enter\", \"" + data:originalUrl + "\"); return false;"' var='onclick'>
<b:include name='platformShare'/>
</b:with>
</b:includable>
<b:includable id='nextPageLink'>
<a class='blog-pager-older-link' expr:href='data:olderPageUrl' expr:id='data:widget.instanceId + "_blog-pager-older-link"' expr:title='data:messages.olderPosts'>
<data:messages.olderPosts/>
</a>
</b:includable>
<b:includable id='otherSharingButton'>
<span class='sharing-platform-button sharing-element-other' expr:aria-label='data:messages.shareToOtherApps.escaped' expr:data-url='data:originalUrl' expr:title='data:messages.shareToOtherApps.escaped' role='menuitem' tabindex='-1'>
<b:with value='{key: "sharingOther"}' var='platform'>
<b:include name='sharingPlatformIcon'/>
</b:with>
<span class='platform-sharing-text'><data:messages.shareOtherApps.escaped/></span>
</span>
</b:includable>
<b:includable id='platformShare'>
<a expr:class='"goog-inline-block sharing-" + data:platform.key' expr:data-url='data:originalUrl' expr:href='data:shareUrl + "&target=" + data:platform.target' expr:onclick='data:onclick ? data:onclick : ""' expr:title='data:platform.shareMessage' target='_blank'>
<span class='share-button-link-text'>
<data:platform.shareMessage/>
</span>
</a>
</b:includable>
<b:includable id='post' var='post'>
<div class='post'>
<b:include data='post' name='postMeta'/>
<b:include data='post' name='postTitle'/>
<b:include name='headerByline'/>
<b:if cond='data:view.isSingleItem'>
<b:include data='post' name='postBody'/>
<b:else/>
<b:include data='post' name='postBodySnippet'/>
<b:include data='post' name='postJumpLink'/>
</b:if>
<b:include data='post' name='postFooter'/>
</div>
</b:includable>
<b:includable id='postAuthor'>
<span class='byline post-author vcard'>
<span class='post-author-label'>
<data:byline.label/>
</span>
<span class='fn'>
<b:if cond='data:post.author.profileUrl'>
<meta expr:content='data:post.author.profileUrl'/>
<a class='g-profile' expr:href='data:post.author.profileUrl' rel='author' title='author profile'>
<span><data:post.author.name/></span>
</a>
<b:else/>
<span><data:post.author.name/></span>
</b:if>
</span>
</span>
</b:includable>
<b:includable id='postBody' var='post'>
<!-- If metaDescription is empty, use the post body as the schema.org description too, for G+/FB snippeting. -->
<div class='post-body entry-content float-container' expr:id='"post-body-" + data:post.id'>
<data:post.body/>
</div>
</b:includable>
<b:includable id='postBodySnippet' var='post'>
<b:include data='post' name='postBody'/>
</b:includable>
<b:includable id='postCommentsAndAd' var='post'>
<article class='post-outer-container'>
<!-- Post title and body -->
<div class='post-outer'>
<b:include data='post' name='post'/>
</div>
<!-- Comments -->
<b:include cond='data:view.isSingleItem' data='post' name='commentPicker'/>
<!-- Show ad inside post container, after comments, if single item. -->
<b:include cond='data:view.isSingleItem and data:post.includeAd' data='post' name='inlineAd'/>
</article>
<!-- Show ad outside post container (between posts) for feed pages. -->
<b:include cond='data:view.isMultipleItems and data:post.includeAd' data='post' name='inlineAd'/>
</b:includable>
<b:includable id='postCommentsLink'>
<b:if cond='data:view.isMultipleItems'>
<span class='byline post-comment-link container'>
<b:include cond='data:post.commentSource != 1' name='commentsLink'/>
</span>
</b:if>
</b:includable>
<b:includable id='postFooter' var='post'>
<div class='post-footer'>
<b:include name='footerBylines'/>
<b:include data='post' name='postFooterAuthorProfile'/>
</div>
</b:includable>
<b:includable id='postFooterAuthorProfile' var='post'>
<b:if cond='data:post.author.aboutMe and data:view.isPost'>
<div class='author-profile'>
<b:if cond='data:post.author.authorPhoto.url'>
<img class='author-image' expr:src='data:post.author.authorPhoto.url' width='50px'/>
<div class='author-about'>
<b:include data='post' name='aboutPostAuthor'/>
</div>
<b:else/>
<b:include data='post' name='aboutPostAuthor'/>
</b:if>
</div>
</b:if>
</b:includable>
<b:includable id='postHeader' var='post'>
<b:include name='headerByline'/>
</b:includable>
<b:includable id='postJumpLink' var='post'>
<div class='jump-link flat-button'>
<a expr:href='data:post.url fragment "more"' expr:title='data:post.title'>
<b:eval expr='data:blog.jumpLinkMessage'/>
</a>
</div>
</b:includable>
<b:includable id='postLabels'>
<span class='byline post-labels'>
<span class='byline-label'><data:byline.label/></span>
<b:loop index='i' values='data:post.labels' var='label'>
<a expr:href='data:label.url' rel='tag'>
<data:label.name/>
</a>
</b:loop>
</span>
</b:includable>
<b:includable id='postLocation'>
<span class='byline post-location'>
<data:byline.label/>
<a expr:href='data:post.location.mapsUrl' target='_blank'><data:post.location.name/></a>
</span>
</b:includable>
<b:includable id='postMeta' var='post'>
<b:include data='post' name='postMetadataJSON'/>
</b:includable>
<b:includable id='postMetadataJSONImage'>
"image": {
"@type": "ImageObject",
<b:if cond='data:post.featuredImage.isResizable'>
"url": "<b:eval expr='resizeImage(data:post.featuredImage, 1200, "1200:630")'/>",
"height": 630,
"width": 1200
<b:else/>
"url": "https://blogger.googleusercontent.com/img/b/U2hvZWJveA/AVvXsEgfMvYAhAbdHksiBA24JKmb2Tav6K0GviwztID3Cq4VpV96HaJfy0viIu8z1SSw_G9n5FQHZWSRao61M3e58ImahqBtr7LiOUS6m_w59IvDYwjmMcbq3fKW4JSbacqkbxTo8B90dWp0Cese92xfLMPe_tg11g/w1200/",
"height": 348,
"width": 1200
</b:if>
},
</b:includable>
<b:includable id='postMetadataJSONPublisher'>
"publisher": {
"@type": "Organization",
"name": "Blogger",
"logo": {
"@type": "ImageObject",
"url": "https://blogger.googleusercontent.com/img/b/U2hvZWJveA/AVvXsEgfMvYAhAbdHksiBA24JKmb2Tav6K0GviwztID3Cq4VpV96HaJfy0viIu8z1SSw_G9n5FQHZWSRao61M3e58ImahqBtr7LiOUS6m_w59IvDYwjmMcbq3fKW4JSbacqkbxTo8B90dWp0Cese92xfLMPe_tg11g/h60/",
"width": 206,
"height": 60
}
},
</b:includable>
<b:includable id='postPagination'>
<div class='blog-pager container' id='blog-pager'>
<b:include cond='data:newerPageUrl' name='previousPageLink'/>
<b:include cond='data:olderPageUrl' name='nextPageLink'/>
<b:include cond='data:view.url != data:blog.homepageUrl' name='homePageLink'/>
</div>
</b:includable>
<b:includable id='postReactions'>
<!-- Reaction feature no longer available. The includable is retained for backwards-compatibility. -->
</b:includable>
<b:includable id='postShareButtons'>
<div class='byline post-share-buttons goog-inline-block'>
<b:with value='data:sharingId ?: ((data:widget.instanceId ?: "sharing") + "-" + (data:regionName ?: "byline") + "-" + data:post.id)' var='sharingId'>
<!-- Note: 'sharingButtons' includable is from the default Sharing widget markup. -->
<b:include data='{ sharingId: data:sharingId, originalUrl: data:post.url, platforms: data:this.sharing.platforms, shareUrl: data:post.shareUrl, shareTitle: data:post.title, }' name='sharingButtons'/>
</b:with>
</div>
</b:includable>
<b:includable id='postTimestamp'>
<span class='byline post-timestamp'>
<data:byline.label/>
<b:if cond='data:post.url'>
<meta expr:content='data:post.url.canonical'/>
<a class='timestamp-link' expr:href='data:post.url' rel='bookmark' title='permanent link'>
<time class='published' expr:datetime='data:post.date.iso8601' expr:title='data:post.date.iso8601'>
<data:post.date/>
</time>
</a>
</b:if>
</span>
</b:includable>
<b:includable id='postTitle' var='post'>
<a expr:name='data:post.id'/>
<b:if cond='data:post.title != ""'>
<h3 class='post-title entry-title'>
<b:if cond='data:post.link or (data:post.url and data:view.url != data:post.url)'>
<a expr:href='data:post.link ?: data:post.url'><data:post.title/></a>
<b:else/>
<data:post.title/>
</b:if>
</h3>
</b:if>
</b:includable>
<b:includable id='previousPageLink'>
<a class='blog-pager-newer-link' expr:href='data:newerPageUrl' expr:id='data:widget.instanceId + "_blog-pager-newer-link"' expr:title='data:messages.newerPosts'>
<data:messages.newerPosts/>
</a>
</b:includable>
<b:includable id='sharingButton'>
<span expr:aria-label='data:platform.shareMessage' expr:class='"sharing-platform-button sharing-element-" + data:platform.key' expr:data-href='data:shareUrl + "&target=" + data:platform.target' expr:data-url='data:originalUrl' expr:title='data:platform.shareMessage' role='menuitem' tabindex='-1'>
<b:include name='sharingPlatformIcon'/>
<span class='platform-sharing-text'><data:platform.name/></span>
</span>
</b:includable>
<b:includable id='sharingButtonContent'>
<div class='flat-icon-button ripple'>
<b:include name='shareIcon'/>
</div>
</b:includable>
<b:includable id='sharingButtons'>
<div class='sharing' expr:aria-owns='"sharing-popup-" + data:sharingId' expr:data-title='data:shareTitle'>
<button class='sharing-button touch-icon-button' expr:aria-controls='"sharing-popup-" + data:sharingId' expr:aria-label='data:messages.share.escaped' expr:id='"sharing-button-" + data:sharingId' role='button'>
<b:include name='sharingButtonContent'/>
</button>
<b:include name='sharingButtonsMenu'/>
</div>
</b:includable>
<b:includable id='sharingButtonsMenu'>
<div class='share-buttons-container'>
<ul aria-hidden='true' class='share-buttons hidden' expr:aria-label='data:messages.share.escaped' expr:id='"sharing-popup-" + data:sharingId' role='menu'>
<b:loop values='(data:platforms ?: data:blog.sharing.platforms) filter (p => p.key not in {"blogThis"})' var='platform'>
<li>
<b:include name='sharingButton'/>
</li>
</b:loop>
<li aria-hidden='true' class='hidden'>
<b:include name='otherSharingButton'/>
</li>
</ul>
</div>
</b:includable>
<b:includable id='sharingPlatformIcon'>
<b:include data='{ iconClass: ("touch-icon sharing-" + data:platform.key) }' expr:name='data:platform.key + "Icon"'/>
</b:includable>
<b:includable id='threadedCommentForm' var='post'>
<div class='comment-form'>
<a name='comment-form'/>
<h4 id='comment-post-message'><data:messages.postAComment/></h4>
<b:if cond='data:this.messages.blogComment != ""'>
<p><data:this.messages.blogComment/></p>
</b:if>
<b:include data='post' name='commentFormIframeSrc'/>
<iframe allowtransparency='allowtransparency' class='blogger-iframe-colorize blogger-comment-from-post' expr:height='data:cmtIframeInitialHeight ?: "90px"' frameborder='0' id='comment-editor' name='comment-editor' src='' width='100%'/>
<data:post.cmtfpIframe/>
<script type='text/javascript'>
BLOG_CMT_createIframe('<data:post.appRpcRelayPath/>');
</script>
</div>
</b:includable>
<b:includable id='threadedCommentJs' var='post'>
<script async='async' expr:src='data:post.commentSrc' type='text/javascript'/>
<b:template-script inline='true' name='threaded_comments'/>
<script type='text/javascript'>
blogger.widgets.blog.initThreadedComments(
<data:post.commentJso/>,
<data:post.commentMsgs/>,
<data:post.commentConfig/>);
</script>
</b:includable>
<b:includable id='threadedComments' var='post'>
<section class='comments threaded' expr:data-embed='data:post.embedCommentForm' expr:data-num-comments='data:post.numberOfComments' id='comments'>
<a name='comments'/>
<b:include name='commentsTitle'/>
<div class='comments-content'>
<b:if cond='data:post.embedCommentForm'>
<b:include data='post' name='threadedCommentJs'/>
</b:if>
<div id='comment-holder'>
<data:post.commentHtml/>
</div>
</div>
<p class='comment-footer'>
<b:if cond='data:post.allowNewComments'>
<b:include data='post' name='threadedCommentForm'/>
<b:else/>
<data:post.noNewCommentsText/>
</b:if>
<b:if cond='data:post.showManageComments'>
<b:include data='post' name='manageComments'/>
</b:if>
</p>
<b:if cond='data:showCmtPopup'>
<div id='comment-popup'>
<iframe allowtransparency='allowtransparency' frameborder='0' id='comment-actions' name='comment-actions' scrolling='no'>
</iframe>
</div>
</b:if>
</section>
</b:includable>
<b:includable id='tooltipCss'>
<!-- LINT.IfChange -->
<style>
.post-body a.b-tooltip-container {
position: relative;
display: inline-block;
}
.post-body a.b-tooltip-container .b-tooltip {
display: block !important;
position: absolute;
top: 100%;
left: 50%;
transform: translate(-20%, 1px);
visibility: hidden;
opacity: 0;
z-index: 1;
transition: opacity 0.2s ease-in-out;
}
.post-body a.b-tooltip-container .b-tooltip iframe {
width: 200px;
height: 198px;
max-width: none;
border: none;
border-radius: 20px;
box-shadow: 1px 1px 3px 1px rgba(0, 0, 0, 0.2);
}
@media (hover: hover) {
.post-body a.b-tooltip-container:hover .b-tooltip {
visibility: visible;
opacity: 1;
}
}
</style>
<!-- LINT.ThenChange(//depot/google3/java/com/google/blogger/b2/layouts/widgets/v2-style.css) -->
</b:includable>
</b:widget>
</b:section>
</div>
</section>
<!-- Footer -->
<footer class='bg-[#030303] border-t border-white/5 pt-32 pb-48' id='footer'>
<div class='max-w-7xl mx-auto px-4 sm:px-6 lg:px-8'>
<div class='grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-16 mb-24'>
<div class='space-y-8'>
<div class='flex items-center gap-3'>
<div class='bg-primary p-2.5 rounded-xl shadow-lg'><i class='w-6 h-6 text-white' data-lucide='radio'/></div>
<span class='text-2xl font-bold text-white font-poppins uppercase tracking-tighter'>RADIO<span class='text-primary'>MODERN</span></span>
</div>
<p class='text-sm text-gray-500 leading-relaxed font-medium'>Türkiye'nin dijital yayın dünyasındaki en modern sesi. 7/24 kesintisiz yüksek kaliteli müzik deneyimi.</p>
</div>
<div>
<h4 class='text-white font-black mb-10 uppercase tracking-[0.2em] text-[11px] border-l-4 border-primary pl-4'>Navigasyon</h4>
<ul class='space-y-4 text-xs font-bold text-gray-500 uppercase tracking-widest'>
<li><a class='hover:text-primary transition-colors flex items-center gap-2' href='/'><i class='w-3 h-3 text-primary/40' data-lucide='chevron-right'/> Ana Sayfa</a></li>
<li><a class='hover:text-primary transition-colors flex items-center gap-2' href='#schedule'><i class='w-3 h-3 text-primary/40' data-lucide='chevron-right'/> Yayın Akışı</a></li>
<li><a class='hover:text-primary transition-colors flex items-center gap-2' href='#programs'><i class='w-3 h-3 text-primary/40' data-lucide='chevron-right'/> Programlar</a></li>
</ul>
</div>
<div>
<h4 class='text-white font-black mb-10 uppercase tracking-[0.2em] text-[11px] border-l-4 border-primary pl-4'>İletişim</h4>
<ul class='space-y-6 text-xs font-bold text-gray-500 uppercase tracking-widest'>
<li class='flex items-start gap-4'>
<i class='w-5 h-5 text-primary' data-lucide='mail'/>
<div><span class='block text-white mb-1 uppercase tracking-tighter'>Email</span><span class='text-gray-600 lowercase font-medium'>info@radiomodern.com</span></div>
</li>
<li class='flex items-start gap-4'>
<i class='w-5 h-5 text-primary' data-lucide='phone'/>
<div><span class='block text-white mb-1 uppercase tracking-tighter'>Telefon</span><span class='text-gray-600 font-medium'>+90 212 555 0101</span></div>
</li>
</ul>
</div>
<div>
<h4 class='text-white font-black mb-10 uppercase tracking-[0.2em] text-[11px] border-l-4 border-primary pl-4'>Haber Bülteni</h4>
<p class='text-gray-500 text-[11px] font-bold uppercase tracking-widest mb-6 leading-relaxed'>Yeniliklerden haberdar olun.</p>
<div class='relative'>
<input class='w-full bg-white/5 border border-white/10 rounded-2xl px-6 py-4 text-xs font-bold text-white focus:outline-none focus:border-primary pr-12' placeholder='EMAIL...' type='text'/>
<button class='absolute right-2 top-2 bottom-2 bg-primary text-white w-10 rounded-xl flex items-center justify-center'><i class='w-4 h-4' data-lucide='send'/></button>
</div>
</div>
</div>
<div class='pt-12 border-t border-white/5 flex flex-col md:flex-row justify-between items-center gap-8 text-[9px] font-black text-gray-700 uppercase tracking-[0.5em]'>
<div> 2026 RADIOMODERN. TÜM HAKLARI SAKLIDIR.</div>
</div>
</div>
</footer>
<!-- STICKY PLAYER -->
<div class='fixed bottom-0 left-0 right-0 z-[60] bg-black/95 backdrop-blur-3xl border-t border-white/10 px-8 py-6 flex items-center justify-between shadow-2xl'>
<div class='flex items-center gap-5 w-1/3'>
<img class='w-16 h-16 rounded-2xl object-cover shadow-2xl border border-white/10' src='https://images.unsplash.com/photo-1470225620780-dba8ba36b745?q=80&w=2070'/>
<div class='hidden sm:block truncate'><h4 class='text-lg font-black text-white uppercase tracking-tighter leading-none'>Midnight Grooves</h4><p class='text-[9px] text-primary font-black uppercase tracking-[0.2em] flex items-center gap-2 mt-2'><span class='w-2 h-2 bg-red-500 rounded-full animate-pulse'/> CANLI YAYIN</p></div>
</div>
<div class='flex flex-col items-center flex-1'>
<button class='w-16 h-16 bg-white text-black rounded-full flex items-center justify-center hover:scale-110 active:scale-95 transition-all shadow-xl play-btn-glow group'>
<i class='w-8 h-8 fill-current ml-1' data-lucide='play'/>
</button>
</div>
<div class='flex items-center justify-end gap-10 w-1/3 text-gray-500'>
<div class='hidden lg:flex items-center gap-3 w-40'><i class='w-5 h-5' data-lucide='volume-2'/><div class='flex-1 h-1 bg-white/10 rounded-full overflow-hidden'><div class='h-full w-2/3 bg-primary'/></div></div>
<div class='flex gap-6'><i class='w-6 h-6 hover:text-white cursor-pointer' data-lucide='list-music'/><i class='w-6 h-6 hover:text-white cursor-pointer' data-lucide='maximize'/></div>
</div>
</div>
<script>lucide.createIcons();</script>
</body>
</html>
🔥 Modern Radyo Tasarım Yapısı
Senin verdiğin tema kodlarına göre sistem tamamen modern UI üzerine kuruludur:
- Siyah (dark mode) profesyonel arayüz
- Tailwind CSS ile hızlı ve modern yapı
- Lucide ikon sistemi
- Glassmorphism (cam efekti) tasarım
- Hover animasyonlu kart sistemleri
Bu yapı sayesinde kullanıcı sadece içerik değil, premium bir dijital deneyim yaşar.
📡 Canlı Yayın Sistemi
Temada bulunan canlı yayın bölümü kullanıcıya anlık müzik deneyimi sunar:
- 🔴 Canlı yayın göstergesi
- ▶️ Tek tıkla oynatma sistemi
- 🎧 Sticky (sabit) müzik çalar
- 🔊 Ses kontrol barı
Bu sistem kullanıcıyı sitede daha uzun süre tutar ve etkileşimi artırır.
🎶 8 Özel Radyo Programı
Temada bulunan program sistemi tamamen görsel ve modern yapıya sahiptir:
- Elektronik Geceler
- Akustik Sabah
- R&B Rüzgarı
- Jazz Saati
- Retro Hits
- Gece Mavisi
- Piyano Vakti
- Dünya Sahnesi
Her program kartı hover efekti, DJ adı ve görsel odaklı tasarım içerir.
📅 Yayın Akışı Sistemi
Radio Modern içerisinde profesyonel yayın planı bulunmaktadır:
- Saat bazlı program listesi
- “CANLI” yayın etiketi
- Responsive grid yapı
- Minimal ve okunabilir tasarım
Bu yapı özellikle radyo siteleri için büyük avantaj sağlar.
📰 Blog + SEO Uyumlu Sistem
Blogger altyapısına entegre edilen blog sistemi SEO açısından optimize edilmiştir:
- H1-H2-H3 başlık yapısı
- Google dostu içerik düzeni
- Otomatik snippet desteği
- Kategori bazlı içerik yönetimi
Bu sayede site Google’da daha hızlı indekslenir.
🎧 Sticky Player (Sabit Müzik Çalar)
Sayfanın altında sabit kalan müzik çalar sistemi:
- Sayfa kaydırılsa bile görünür
- Play / Pause kontrolü
- Ses ayarı
- Playlist ve fullscreen ikonları
🚀 SEO Avantajları
Bu tema Google SEO açısından güçlü bir yapıya sahiptir:
- ⚡ Hızlı yükleme (Tailwind optimize)
- 📱 Mobil uyumlu responsive yapı
- 🧠 Temiz semantic HTML
- 🔍 SEO başlık hiyerarşisi
🔑 SEO Anahtar Kelimeler
radio modern, blogger radyo teması, canlı radyo sitesi, modern dark ui tasarım, online müzik yayını, radio streaming site, blogger müzik teması, profesyonel radyo web sitesi
🎯 Sonuç
Radio Modern, sadece bir Blogger teması değil; modern yayıncılık için geliştirilmiş güçlü bir dijital radyo platformudur. Hem tasarım hem SEO açısından üst seviye bir yapıya sahiptir.