/*
Theme Name: ReelsDizi
Theme URI: https://reelsdizi.net/
Author: Reels Dizi
Description: Kısa drama (reels dizi) kataloğu için sıfırdan yazılmış, mobil öncelikli uygulama hissi veren tema: poster duvarı, bulanık kapaklı dizi sayfası, alt sabit menü.
Version: 1.0.0
Requires at least: 6.5
Tested up to: 7.1
Requires PHP: 8.1
License: MIT
Text Domain: reelsdizi
*/

/* ================================================================ temel */
:root{
  --zg:#07060d;
  --zg2:#0e0c18;
  --yuzey:#141122;
  --yuzey2:#1c1830;
  --cizgi:#2a2440;
  --yazi:#f6f4ff;
  --soluk:#a79fbe;
  --vurgu:#ff2d75;
  --vurgu2:#7c3aed;
  --cam:#22d3ee;
  --grad:linear-gradient(135deg,#ff2d75 0%,#7c3aed 100%);
  --r:14px;
  --r-sm:10px;
  --golge:0 10px 30px rgba(0,0,0,.45);
  --sar:1200px;
  --ust-y:104px;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--zg);color:var(--yazi);
  font:16px/1.6 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
h1,h2,h3{line-height:1.22;margin:0 0 .5em;letter-spacing:-.015em}
h1{font-size:clamp(1.55rem,4.6vw,2.4rem)}
h2{font-size:clamp(1.15rem,3vw,1.6rem)}
h3{font-size:1rem}
p{margin:0 0 1em}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.atla{position:absolute;left:-9999px;top:0;z-index:99;background:var(--vurgu);color:#fff;padding:.6rem 1rem}
.atla:focus{left:8px;top:8px}
.sar{width:100%;max-width:var(--sar);margin:0 auto;padding:0 16px}
:focus-visible{outline:2px solid var(--cam);outline-offset:3px;border-radius:6px}

/* ================================================================ başlık */
.ust{position:sticky;top:0;z-index:40;background:rgba(7,6,13,.9);backdrop-filter:blur(14px);border-bottom:1px solid var(--cizgi)}
.ust .sar{display:flex;align-items:center;gap:14px;min-height:62px}
.ust-sol{display:flex;align-items:center;gap:18px;min-width:0}
.logo{display:inline-flex;align-items:center;gap:8px;flex:0 0 auto}
.logo-ikon{display:block}
.logo-yazi{font-weight:800;font-size:1.22rem;letter-spacing:-.03em}
.logo-yazi em{font-style:normal;background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.ust-nav{display:none;gap:16px;font-size:.94rem;color:var(--soluk)}
.ust-nav a:hover{color:var(--yazi)}
.ara{display:flex;align-items:center;gap:8px;margin-left:auto;background:var(--yuzey);border:1px solid var(--cizgi);border-radius:999px;padding:8px 14px;min-width:0;flex:1 1 180px;max-width:340px}
.ara svg{fill:var(--soluk);flex:0 0 auto}
.ara input[type=search]{border:0;background:none;color:var(--yazi);width:100%;font-size:.95rem;outline:none;min-width:0}
.ara input::placeholder{color:#7b7394}

.cip-bar{border-top:1px solid var(--cizgi);background:rgba(14,12,24,.7)}
.cip-sar{display:flex;gap:8px;overflow-x:auto;padding:9px 16px;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.cip-sar::-webkit-scrollbar{display:none}
.cip{flex:0 0 auto;display:inline-flex;align-items:center;gap:6px;padding:6px 12px;border:1px solid var(--cizgi);border-radius:999px;font-size:.83rem;color:var(--soluk);background:var(--zg2);white-space:nowrap}
.cip span{font-size:.72rem;color:#6f6788}
.cip:hover{border-color:var(--vurgu);color:var(--yazi)}

.on-baslik{padding:22px 16px 2px}
.on-baslik h1{margin:0;font-size:clamp(1.5rem,5vw,2.3rem)}
.on-baslik h1 span{display:block;font-size:.82rem;font-weight:500;color:var(--soluk);letter-spacing:0;margin-top:6px}

/* ================================================================ hero */
.hero{position:relative;padding:18px 0 6px;overflow:hidden}
.hero-ray{position:relative;max-width:var(--sar);margin:0 auto;padding:0 16px}
.hero-kart{position:relative;border-radius:20px;overflow:hidden;box-shadow:var(--golge);display:none}
.hero-kart.aktif{display:block;animation:rd-gir .5s ease both}
@keyframes rd-gir{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.hero-kart>a{position:relative;display:flex;gap:14px;align-items:center;padding:22px 18px;min-height:250px;background:var(--zg2)}
.hero-arka{position:absolute;inset:-40px;background-size:cover;background-position:center;filter:blur(34px) saturate(1.3);opacity:.5;transform:scale(1.1)}
.hero-kart>a::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(7,6,13,.94) 0%,rgba(7,6,13,.72) 55%,rgba(7,6,13,.35) 100%)}
.hero-kapak{position:relative;width:112px;flex:0 0 auto;border-radius:var(--r-sm);box-shadow:0 12px 32px rgba(0,0,0,.55);z-index:2}
.hero-bilgi{position:relative;z-index:2;max-width:620px}
.hero-ust{font-size:.78rem;letter-spacing:.09em;text-transform:uppercase;color:var(--cam);margin:0 0 6px}
.hero-ad{margin:0 0 8px;font-size:clamp(1.3rem,4vw,2rem)}
.hero-ozet{color:#d9d4ea;font-size:.95rem;margin:0 0 14px;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.hero-nokta{display:flex;justify-content:center;gap:8px;padding:14px 0 4px}
.hero-nokta button{width:9px;height:9px;border-radius:50%;background:var(--cizgi)}
.hero-nokta button.aktif{background:var(--grad);width:22px;border-radius:999px}

/* ================================================================ bölümler */
.bolum{padding:26px 0 10px}
.bolum-ust{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin-bottom:14px}
.bolum-ust h2{margin:0}
.bolum-tum{font-size:.85rem;color:var(--vurgu);white-space:nowrap}
.bolum-tum:hover{text-decoration:underline}
.bolum h2{margin-bottom:14px}
.metin-kutu{background:var(--yuzey);border:1px solid var(--cizgi);border-radius:var(--r);padding:20px}
.metin-kutu h2{font-size:1.15rem}
.metin-kutu p{color:#cfc9e2;font-size:.94rem;margin-bottom:.7em}
.metin-kutu p:last-child{margin-bottom:0}

/* ================================================================ kart duvarı */
.duvar{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.kart{min-width:0}
.kart-link{display:block}
.kart-gorsel{position:relative;border-radius:var(--r);overflow:hidden;background:var(--yuzey2);aspect-ratio:2/3;box-shadow:0 6px 18px rgba(0,0,0,.35)}
.kart-gorsel img{width:100%;height:100%;object-fit:cover;transition:transform .35s ease}
.kart-link:hover .kart-gorsel img{transform:scale(1.04)}
.kart-yok{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-weight:800;color:#4b4468;font-size:1.1rem}
.kart-yok span{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.rozet{position:absolute;left:7px;bottom:7px;background:rgba(7,6,13,.82);border:1px solid var(--cizgi);border-radius:999px;padding:2px 8px;font-size:.7rem;letter-spacing:.02em;color:#e7e3f5}
.rozet-bolum{background:rgba(255,45,117,.9);border-color:transparent;color:#fff;font-weight:600}
.kart-ad{font-size:.92rem;font-weight:600;margin:8px 2px 2px;line-height:1.35;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.kart-alt{font-size:.76rem;color:var(--soluk);margin:0 2px}
.kart-yazi{background:var(--yuzey);border:1px solid var(--cizgi);border-radius:var(--r);padding:14px;aspect-ratio:auto}

/* daha fazla */
.daha{display:flex;justify-content:center;padding:22px 0 6px}
.dugme{display:inline-flex;align-items:center;gap:8px;background:var(--grad);color:#fff;border-radius:999px;padding:11px 22px;font-weight:600;font-size:.92rem;box-shadow:0 8px 22px rgba(255,45,117,.28)}
.dugme-cizgi{background:none;border:1px solid var(--cizgi);color:var(--yazi);box-shadow:none}
.dugme-cizgi:hover{border-color:var(--vurgu)}

/* ================================================================ tür kutuları */
.tur-izgara{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin-bottom:22px}
.tur-kutu{display:flex;flex-direction:column;gap:2px;background:var(--yuzey);border:1px solid var(--cizgi);border-radius:var(--r-sm);padding:14px}
.tur-kutu strong{font-size:.95rem}
.tur-kutu span{font-size:.78rem;color:var(--soluk)}
.tur-kutu:hover{border-color:var(--vurgu);background:var(--yuzey2)}
.ara-baslik{margin-top:26px}

/* ================================================================ kırıntı + sayfa başlığı */
.kirinti{display:flex;flex-wrap:wrap;gap:6px;font-size:.8rem;color:var(--soluk);padding:16px 16px 0}
.kirinti a:hover{color:var(--yazi)}
.kirinti strong{color:#ddd7ee;font-weight:600}
.sayfa-ust{padding:18px 16px 6px}
.sayfa-alt{color:var(--soluk);font-size:.9rem}
.filtre{display:flex;gap:8px;overflow-x:auto;padding:6px 0 12px;scrollbar-width:none}
.filtre::-webkit-scrollbar{display:none}
.filtre .cip{position:static}
.bos{color:var(--soluk)}

/* ================================================================ tek dizi sayfası */
.tek-arka{position:fixed;inset:0;background-size:cover;background-position:center top;filter:blur(60px) saturate(1.4);opacity:.28;z-index:-1;transform:scale(1.15)}
.tek{padding-bottom:10px}
.kirinti-tek{padding-top:18px}
.tek-ust{display:grid;grid-template-columns:132px minmax(0,1fr);gap:16px;align-items:start;padding:14px 0 22px}
.tek-kapak{border-radius:var(--r);overflow:hidden;background:var(--yuzey2);aspect-ratio:2/3;box-shadow:var(--golge)}
.tek-kapak img{width:100%;height:100%;object-fit:cover}
.tek-bilgi h1{margin-bottom:10px}
.rozetler{display:flex;flex-wrap:wrap;gap:7px;list-style:none;margin:0 0 12px;padding:0}
.rozetler .rozet{position:static}
.rozet-platform{background:rgba(124,58,237,.22);border-color:rgba(124,58,237,.55)}
.rozet-tur{background:rgba(34,211,238,.14);border-color:rgba(34,211,238,.4)}
.tek-giris{color:#dcd7ec;font-size:.98rem;margin-bottom:.7em}
.tek-karakter{font-size:.86rem;color:var(--soluk)}
.tek-eylem{display:flex;flex-wrap:wrap;gap:10px;margin-top:14px}
.tek-icerik,.metin{color:#e3dff0;font-size:1rem}
.metin h2{margin-top:1.6em;padding-bottom:.35em;border-bottom:1px solid var(--cizgi);font-size:1.2rem}
.metin h3{font-size:1rem;margin-top:1.3em}
.metin p,.metin li{color:#d5d0e6}
.metin a{color:var(--cam);text-decoration:underline}
.metin details{background:var(--yuzey);border:1px solid var(--cizgi);border-radius:var(--r-sm);padding:12px 14px;margin:0 0 10px}
.metin details summary{cursor:pointer;font-weight:600;list-style:none}
.metin details summary::-webkit-details-marker{display:none}
.metin details summary::after{content:"+";float:right;color:var(--vurgu);font-weight:700}
.metin details[open] summary::after{content:"–"}
.metin details p{margin:.7em 0 0;font-size:.95rem}
.benzer{margin-top:8px}

/* ================================================================ alt bilgi */
.alt{border-top:1px solid var(--cizgi);margin-top:34px;background:var(--zg2);padding-bottom:74px}
.alt-sar{display:grid;gap:22px;padding:26px 16px}
.alt-marka{font-weight:800;font-size:1.15rem;margin:0}
.alt-marka em{font-style:normal;background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.alt-not{color:var(--soluk);font-size:.82rem;max-width:44ch}
.alt-kol h2{font-size:.95rem;margin-bottom:10px}
.alt-kol ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:7px;font-size:.87rem;color:var(--soluk)}
.alt-kol a:hover{color:var(--yazi)}
.alt-alt{border-top:1px solid var(--cizgi);padding:14px 16px;font-size:.78rem;color:#6f6788}

/* ================================================================ mobil alt menü */
.altnav{position:fixed;left:0;right:0;bottom:0;z-index:50;display:flex;background:rgba(10,9,18,.96);backdrop-filter:blur(14px);border-top:1px solid var(--cizgi);padding-bottom:env(safe-area-inset-bottom)}
.altnav a{flex:1;display:flex;flex-direction:column;align-items:center;gap:3px;padding:9px 4px 8px;font-size:.68rem;color:var(--soluk)}
.altnav svg{fill:currentColor;opacity:.85}
.altnav a.aktif,.altnav a:hover{color:var(--yazi)}
.altnav a.aktif svg{fill:url(#lg)}
.altnav a.aktif{color:var(--vurgu)}

/* ================================================================ kırılma noktaları */
@media (min-width:480px){
  .duvar{grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
  .tur-izgara{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media (min-width:768px){
  .sar{padding:0 22px}
  .duvar{grid-template-columns:repeat(4,minmax(0,1fr))}
  .tur-izgara{grid-template-columns:repeat(4,minmax(0,1fr))}
  .hero-kart>a{gap:24px;padding:34px 30px;min-height:340px}
  .hero-kapak{width:180px}
  .tek-ust{grid-template-columns:230px minmax(0,1fr);gap:28px;padding:22px 0 30px}
  .kirinti-tek{padding-top:26px}
  .alt-sar{grid-template-columns:1.4fr 1fr 1fr;padding:34px 22px}
  .alt{padding-bottom:0}
  .altnav{display:none}
  .metin-kutu{padding:26px}
}
@media (min-width:1024px){
  .ust-nav{display:flex}
  .duvar{grid-template-columns:repeat(6,minmax(0,1fr));gap:16px}
  .tur-izgara{grid-template-columns:repeat(6,minmax(0,1fr))}
  .ara{flex:0 1 300px}
}

/* mobil: arama kendi satırına iner, taşma olmaz */
@media (max-width:479px){
  /* yalnızca ÜST BAR sarsın — çip şeridi (.cip-bar .sar) yatay kaydırma olarak kalsın */
  .ust > .sar{flex-wrap:wrap;gap:10px;padding-top:10px;padding-bottom:10px}
  .ust-sol{width:100%}
  .ara{order:2;flex:1 1 100%;max-width:none;margin-left:0}
  .on-baslik{padding:16px 16px 0}
  .on-baslik h1{font-size:1.5rem}
  .hero-kart>a{min-height:0;padding:16px 14px}
  .hero-kapak{width:96px}
  .hero-ozet{-webkit-line-clamp:3;font-size:.9rem}
  .bolum{padding:18px 0 8px}
}
/* mobil: taşma ve zıplama yok */
@media (max-width:767px){
  .cip-sar{padding-right:26px}
  .hero-ozet{-webkit-line-clamp:4;margin-bottom:16px}
  .alt{padding-bottom:88px}
  body,html{overflow-x:hidden}
  .hero-kart.aktif{animation:none}
  .kart-link:hover .kart-gorsel img{transform:none}
}
@media (hover:none){
  .kart-link:hover .kart-gorsel img{transform:none}
  .tur-kutu:hover{background:var(--yuzey)}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
}