/*
Theme Name: Telegram Kanalları 3
Theme URI: https://example.com
Author: Site Sahibi
Author URI: https://example.com
Description: Telegram kanallarını listelemek ve tanıtmak için tasarlanmış, SEO uyumlu, hızlı ve renkli bir WordPress teması.
Version: 1.1
Requires at least: 5.8
Requires PHP: 7.4
Text Domain: telegram-kanallari
*/

/* ---------- Değişkenler ---------- */
:root{
  --renk-ana: #229ED9;      /* telegram mavisi */
  --renk-vurgu: #FF6B6B;    /* enerjik kırmızı/pembe */
  --renk-vurgu2: #FFB800;   /* sarı */
  --renk-vurgu3: #7C5CFF;   /* mor */
  --renk-arka: #F5F7FB;
  --renk-kart: #FFFFFF;
  --renk-metin: #1B2733;
  --renk-metin-soft: #5A6B7B;
  --radius: 18px;
  --golge: 0 10px 30px rgba(34,158,217,0.12);
  --golge-hover: 0 16px 40px rgba(34,158,217,0.22);
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  font-family:'Segoe UI', system-ui, -apple-system, sans-serif;
  background:var(--renk-arka);
  color:var(--renk-metin);
  line-height:1.6;
}
img{max-width:100%; height:auto; display:block;}
a{color:var(--renk-ana); text-decoration:none;}
a:hover{color:var(--renk-vurgu);}
h1,h2,h3{line-height:1.25; margin:0 0 .5em;}

.container{
  max-width:1200px;
  margin:0 auto;
  padding:0 20px;
}

/* ---------- Breadcrumb (SEO) ---------- */
.tk-breadcrumb{
  padding:14px 0;
  font-size:14px;
  color:var(--renk-metin-soft);
}
.tk-breadcrumb a{
  color:var(--renk-metin-soft);
  text-decoration:none;
}
.tk-breadcrumb a:hover{
  color:var(--renk-ana);
  text-decoration:underline;
}
.tk-breadcrumb span[aria-current]{
  color:var(--renk-metin);
  font-weight:600;
}

/* ---------- Header ---------- */
.site-header{
  background:linear-gradient(120deg, var(--renk-ana), var(--renk-vurgu3));
  padding:14px 0;
  box-shadow:0 4px 20px rgba(0,0,0,0.08);
  position:sticky;
  top:0;
  z-index:100;
}
.site-header .container{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  flex-wrap:wrap;
}
.site-branding a{
  color:#fff;
  font-size:26px;
  font-weight:800;
  letter-spacing:-.5px;
}
.site-branding .site-description{
  color:rgba(255,255,255,.85);
  font-size:13px;
  margin-top:2px;
}
.main-nav ul{
  list-style:none;
  display:flex;
  gap:22px;
  margin:0;
  padding:0;
  flex-wrap:wrap;
}
.main-nav a{
  color:#fff;
  font-weight:600;
  font-size:15px;
  opacity:.92;
}
.main-nav a:hover{opacity:1; color:#FFE86B;}

/* ---------- Arama Çubuğu (Header Altı) ---------- */
.search-bar-section{
  background:var(--renk-kart);
  padding:20px 0;
  border-bottom:1px solid rgba(34,158,217,0.12);
}
.header-search-big{
  display:flex;
  align-items:center;
  max-width:560px;
  margin:0 auto;
  position:relative;
}
.header-search-big input[type="search"]{
  width:100%;
  border:2px solid var(--renk-arka);
  background:var(--renk-arka);
  border-radius:30px;
  padding:15px 54px 15px 22px;
  font-size:16px;
  outline:none;
  transition:border-color .2s ease, background .2s ease;
}
.header-search-big input[type="search"]:focus{
  border-color:var(--renk-ana);
  background:#fff;
}
.header-search-big button{
  position:absolute;
  right:6px;
  top:50%;
  transform:translateY(-50%);
  border:none;
  background:linear-gradient(90deg, var(--renk-ana), var(--renk-vurgu3));
  color:#fff;
  width:42px;
  height:42px;
  border-radius:50%;
  cursor:pointer;
  font-size:17px;
  display:flex;
  align-items:center;
  justify-content:center;
}

/* ---------- Kanal Ekle Banner ---------- */
.kanal-ekle-banner{
  background:linear-gradient(90deg, #fff 0%, var(--renk-arka) 100%);
  border-bottom:1px solid rgba(34,158,217,0.15);
}
.kanal-ekle-inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  flex-wrap:wrap;
  padding:16px 20px;
}
.kanal-ekle-text{
  display:flex;
  align-items:center;
  gap:14px;
}
.kanal-ekle-emoji{
  font-size:28px;
  flex-shrink:0;
  filter:drop-shadow(0 2px 4px rgba(34,158,217,.25));
}
.kanal-ekle-text strong{
  display:block;
  font-size:16px;
  color:var(--renk-metin);
}
.kanal-ekle-text p{
  margin:2px 0 0;
  font-size:13.5px;
  color:var(--renk-metin-soft);
}
.btn-ekle{
  background:linear-gradient(90deg, var(--renk-vurgu3), var(--renk-ana));
  color:#fff;
  white-space:nowrap;
  box-shadow:0 6px 16px rgba(124,92,255,.28);
}
.btn-ekle:hover{color:#fff;}

@media (max-width:640px){
  .kanal-ekle-inner{flex-direction:column; align-items:flex-start; text-align:left;}
  .btn-ekle{width:100%; text-align:center;}
}

/* ---------- Online Ziyaretçi Sayacı ---------- */
.tk-online-counter{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:7px;
  width:fit-content;
  margin:14px auto;
  padding:6px 16px;
  background:#16213e;
  color:#E5E9F0;
  font-size:12.5px;
  font-weight:500;
  letter-spacing:.2px;
  border-radius:999px;
  box-shadow:0 4px 12px rgba(22,33,62,.18);
}
.tk-online-dot{
  width:8px;
  height:8px;
  border-radius:50%;
  background:#22C55E;
  box-shadow:0 0 6px #22C55E;
  flex-shrink:0;
}

/* ---------- Reklam Ver Banner (Kanal Ekle sayfası) ---------- */
.tk-reklam-banner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  flex-wrap:wrap;
  margin:0 0 26px;
  padding:16px 20px;
  border-radius:var(--radius);
  background:linear-gradient(90deg, #fff 0%, var(--renk-arka) 100%);
  border:1px solid rgba(34,158,217,0.15);
}
.tk-reklam-banner-text{
  display:flex;
  align-items:center;
  gap:14px;
}
.tk-reklam-banner-icon{
  font-size:26px;
  flex-shrink:0;
  filter:drop-shadow(0 2px 4px rgba(34,158,217,.25));
}
.tk-reklam-banner-text strong{
  display:block;
  font-size:16px;
  color:var(--renk-metin);
}
.tk-reklam-banner-text p{
  margin:2px 0 0;
  font-size:13.5px;
  color:var(--renk-metin-soft);
}

@media (max-width:640px){
  .tk-reklam-banner{flex-direction:column; align-items:flex-start; text-align:left;}
  .tk-reklam-banner .btn-ekle{width:100%; text-align:center;}
}

/* ---------- Hero ---------- */
.page-hero{
  padding:46px 0 30px;
  text-align:center;
}
.page-hero h1{
  font-size:34px;
  font-weight:800;
  background:linear-gradient(90deg, var(--renk-ana), var(--renk-vurgu3) 60%, var(--renk-vurgu));
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}
.page-hero p{
  color:var(--renk-metin-soft);
  max-width:640px;
  margin:0 auto;
  font-size:16px;
}

/* ---------- Kanal Grid ---------- */
.channel-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(260px, 1fr));
  gap:26px;
  padding:20px 0 60px;
}
.channel-card{
  background:var(--renk-kart);
  border-radius:var(--radius);
  box-shadow:var(--golge);
  padding:26px 22px;
  text-align:center;
  transition:transform .25s ease, box-shadow .25s ease;
  border:2px solid transparent;
  position:relative;
  overflow:hidden;
}
.channel-card::before{
  content:"";
  position:absolute;
  top:-40%; left:-40%;
  width:180%; height:180%;
  background:radial-gradient(circle at top left, rgba(124,92,255,.06), transparent 60%);
  pointer-events:none;
}
.channel-card:hover{
  transform:translateY(-6px);
  box-shadow:var(--golge-hover);
  border-color:var(--renk-ana);
}
.channel-card .avatar-wrap{
  position:relative;
  width:92px;
  margin:0 auto 16px;
}
.channel-card .avatar{
  width:92px;
  height:92px;
  border-radius:50%;
  overflow:hidden;
  border:4px solid var(--renk-arka);
  box-shadow:0 0 0 3px var(--renk-ana);
}
.channel-card .avatar img{width:100%; height:100%; object-fit:cover;}

/* ---------- Sponsorlu Rozeti ---------- */
.sponsor-badge{
  position:absolute;
  left:50%;
  bottom:-9px;
  transform:translateX(-50%);
  display:inline-flex;
  align-items:center;
  gap:4px;
  background:linear-gradient(90deg, var(--renk-vurgu2), var(--renk-vurgu));
  color:#1B2733;
  font-size:10px;
  font-weight:800;
  letter-spacing:.3px;
  text-transform:uppercase;
  padding:3px 11px;
  border-radius:20px;
  border:2px solid #fff;
  box-shadow:0 4px 10px rgba(255,107,107,.35);
  white-space:nowrap;
  z-index:2;
}
.sponsor-badge::before{
  content:"★";
  font-size:9px;
  line-height:1;
}
.avatar-big-wrap .sponsor-badge{
  font-size:12px;
  padding:4px 16px;
  bottom:-11px;
  border-width:3px;
}
.avatar-big-wrap .sponsor-badge::before{font-size:11px;}
.channel-card h2{
  font-size:19px;
  margin-bottom:8px;
}
.channel-card h2 a{color:var(--renk-metin);}
.channel-card h2 a:hover{color:var(--renk-ana);}
.channel-card .desc{
  color:var(--renk-metin-soft);
  font-size:14px;
  min-height:42px;
  margin-bottom:16px;
}
.btn{
  display:inline-block;
  padding:10px 22px;
  border-radius:30px;
  font-weight:700;
  font-size:14px;
  border:none;
  cursor:pointer;
  transition:transform .2s ease, box-shadow .2s ease;
}
.btn-primary{
  background:linear-gradient(90deg, var(--renk-ana), var(--renk-vurgu3));
  color:#fff;
}
.btn-join{
  background:linear-gradient(90deg, var(--renk-vurgu2), var(--renk-vurgu));
  color:#1B2733;
}
.btn:hover{transform:scale(1.05); box-shadow:0 8px 18px rgba(0,0,0,.15); color:#fff;}

/* ---------- Tekil Kanal Sayfası ---------- */
.channel-single{
  max-width:760px;
  margin:0 auto;
  padding:40px 20px 26px;
}
.channel-single .head{
  text-align:center;
  margin-bottom:30px;
}
.channel-single .avatar-big-wrap{
  position:relative;
  width:140px;
  margin:0 auto 20px;
}
.channel-single .avatar-big{
  width:140px;
  height:140px;
  border-radius:50%;
  overflow:hidden;
  border:5px solid #fff;
  box-shadow:0 0 0 4px var(--renk-ana), var(--golge);
}
.channel-single .avatar-big img{width:100%; height:100%; object-fit:cover;}
.channel-single h1{font-size:30px;}
.channel-single .meta-badges{
  display:flex;
  justify-content:center;
  gap:10px;
  margin:14px 0 22px;
  flex-wrap:wrap;
}
.badge{
  background:var(--renk-arka);
  color:var(--renk-metin-soft);
  padding:6px 14px;
  border-radius:20px;
  font-size:13px;
  font-weight:600;
}
.channel-single .content-box{
  background:var(--renk-kart);
  border-radius:var(--radius);
  box-shadow:var(--golge);
  padding:30px;
  font-size:16px;
}
.join-cta{
  text-align:center;
  margin:30px 0;
}
.join-cta .btn{font-size:16px; padding:14px 36px;}

.related-title{
  margin:22px 0 20px;
  font-size:22px;
  text-align:center;
}

/* ---------- Sayfalama ---------- */
.pagination{
  display:flex;
  justify-content:center;
  gap:10px;
  padding:20px 0 60px;
  flex-wrap:wrap;
}
.pagination a, .pagination span{
  padding:8px 14px;
  border-radius:10px;
  background:#fff;
  box-shadow:var(--golge);
  font-weight:600;
  color:var(--renk-metin);
}
.pagination .current{
  background:var(--renk-ana);
  color:#fff;
}

/* ---------- Footer ---------- */
.site-footer{
  background:#161C27;
  color:#c8d2dc;
  padding:36px 0;
  margin-top:40px;
  text-align:center;
  font-size:14px;
}
.site-footer a{color:#8FD3FF;}

/* ---------- 404 / Arama ---------- */
.not-found{
  text-align:center;
  padding:80px 20px;
}
.not-found h1{font-size:80px; margin-bottom:0; color:var(--renk-vurgu);}

/* ---------- Responsive ---------- */
@media (max-width:640px){
  .site-header .container{flex-direction:column; align-items:flex-start;}
  .page-hero h1{font-size:26px;}
  .channel-grid{grid-template-columns:repeat(auto-fill, minmax(150px,1fr)); gap:16px;}
  .channel-card{padding:18px 14px;}
}