/* =================================================================
   CADDEBET — Hareket ve mobil uyum
   site.css + modules.css'in üstüne biner: animasyonlar, mikro
   etkileşimler ve 1024 px altındaki tüm düzen kuralları.
   ================================================================= */

/* =================================================================
   1. HAREKET — giriş animasyonları ve mikro etkileşimler
   ================================================================= */

/* Bölümler sırayla belirir; içindeki kartlar da kademeli gelir */
.rev .grid > *,
.rev .win-list > *,
.rev .quick > *,
.rev .score-wrap > *{
  opacity:0;transform:translateY(16px);
}
.rev.in .grid > *,
.rev.in .win-list > *,
.rev.in .quick > *,
.rev.in .score-wrap > *{
  opacity:1;transform:none;
  transition:opacity .5s ease,transform .55s cubic-bezier(.2,.8,.3,1);
}
.rev.in .grid > *:nth-child(1),.rev.in .win-list > *:nth-child(1),
.rev.in .quick > *:nth-child(1),.rev.in .score-wrap > *:nth-child(1){transition-delay:.02s}
.rev.in .grid > *:nth-child(2),.rev.in .win-list > *:nth-child(2),
.rev.in .quick > *:nth-child(2),.rev.in .score-wrap > *:nth-child(2){transition-delay:.07s}
.rev.in .grid > *:nth-child(3),.rev.in .win-list > *:nth-child(3),
.rev.in .quick > *:nth-child(3),.rev.in .score-wrap > *:nth-child(3){transition-delay:.12s}
.rev.in .grid > *:nth-child(4),.rev.in .win-list > *:nth-child(4),
.rev.in .quick > *:nth-child(4),.rev.in .score-wrap > *:nth-child(4){transition-delay:.17s}
.rev.in .grid > *:nth-child(5),.rev.in .win-list > *:nth-child(5),
.rev.in .quick > *:nth-child(5){transition-delay:.22s}
.rev.in .grid > *:nth-child(6),.rev.in .win-list > *:nth-child(6),
.rev.in .quick > *:nth-child(6){transition-delay:.27s}
.rev.in .grid > *:nth-child(n+7){transition-delay:.3s}

/* Bölüm başlığı ikonunun nabzı */
.sec-ic{position:relative}
.sec-ic::after{
  content:"";position:absolute;inset:-1px;border-radius:inherit;
  border:1px solid rgba(238,4,57,.5);opacity:0;
}
.rev.in .sec-ic::after{animation:secPulse 2.4s ease-out .3s 2}
@keyframes secPulse{
  0%{opacity:.9;transform:scale(1)}
  70%{opacity:0;transform:scale(1.32)}
  100%{opacity:0;transform:scale(1.32)}
}

/* Başlıklar hafifçe kayarak gelir */
.rev .sec-head{opacity:0;transform:translateY(10px)}
.rev.in .sec-head{opacity:1;transform:none;transition:opacity .45s ease,transform .5s cubic-bezier(.2,.8,.3,1)}

/* Slider yazıları her geçişte canlanır */
.slide-in > *{animation:slideUp .7s cubic-bezier(.2,.8,.3,1) both}
.slide-in > *:nth-child(2){animation-delay:.08s}
.slide-in > *:nth-child(3){animation-delay:.16s}
.slide-in > *:nth-child(4){animation-delay:.24s}
@keyframes slideUp{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:none}}

/* Marka butonunda ışık geçişi */
.btn.brand{position:relative;overflow:hidden}
.btn.brand::after{
  content:"";position:absolute;top:0;left:-120%;width:60%;height:100%;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.28),transparent);
  transform:skewX(-18deg);
}
.btn.brand:hover::after{animation:parla .8s ease}
@keyframes parla{to{left:130%}}

/* İş ortaklığı butonu: her zaman görünür, marka çerçeveli */
.btn.ortak{
  border-color:rgba(238,4,57,.45);background:rgba(238,4,57,.09);color:#ffd9e0;
}
.btn.ortak:hover{background:rgba(238,4,57,.18);border-color:var(--brand);color:#fff}

/* Kartlarda ışıklı kenar takibi */
.card,.wide,.tile,.quick-i,.win,.tv,.vid{will-change:transform}
.tile:active,.quick-i:active,.card:active{transform:scale(.985)}

/* Hikâye halkası dönerek nefes alır */
.story-ring{animation:ringSpin 9s linear infinite}
@keyframes ringSpin{to{filter:hue-rotate(360deg)}}
.story:hover .story-ring{animation-duration:2.2s}

/* Canlı rozetlerin nabzı zaten var; skor tahtası satırı da vurgulansın */
.match.is-live::before{
  content:"";position:absolute;left:0;top:0;bottom:0;width:2px;background:var(--err);
  animation:canliCizgi 1.6s ease-in-out infinite;
}
.match{position:relative}
@keyframes canliCizgi{0%,100%{opacity:1}50%{opacity:.35}}

/* Sayfa ilk açıldığında üst bar iner */
.hdr{animation:hdrIn .5s cubic-bezier(.2,.8,.3,1) both}
@keyframes hdrIn{from{opacity:0;transform:translateY(-14px)}to{opacity:1;transform:none}}

/* Yukarı çık düğmesi */
.top-btn{
  position:fixed;right:18px;bottom:18px;z-index:120;width:46px;height:46px;border-radius:50%;
  display:grid;place-items:center;cursor:pointer;border:1px solid rgba(238,4,57,.4);
  background:rgba(10,11,18,.85);backdrop-filter:blur(10px);color:var(--brand-2);font-size:19px;
  opacity:0;visibility:hidden;transform:translateY(14px);transition:.28s;
}
.top-btn.on{opacity:1;visibility:visible;transform:none}
.top-btn:hover{background:var(--brand);color:#fff;border-color:transparent}
.top-btn .ic{transform:rotate(-90deg)}

/* =================================================================
   2. MOBİL UYUM
   ================================================================= */

/* ---- 1024 px altı: tablet ---- */
@media(max-width:1024px){
  .wrap{padding:0 16px}
  .sec{padding:34px 0}
  .sec-head{margin-bottom:18px;gap:12px}
  .sec-ic{width:40px;height:40px;font-size:19px}
  .sec-tt{min-width:0;flex:1 1 100%}
  .sec-more{order:3}
  .cta{padding:24px;gap:18px}
  .grid-side,.grid.g2[style*="align-items:start"]{grid-template-columns:1fr}
}

/* ---- 760 px altı: telefon ---- */
@media(max-width:760px){
  body{font-size:14.5px}
  .wrap{padding:0 14px}
  .sec{padding:28px 0}

  /* Duyuru şeridi */
  .ticker-in{height:34px;gap:10px;font-size:12px}
  .ticker-tag{font-size:10px;padding:3px 9px}

  /* Üst bar */
  .hdr-in{height:62px;gap:10px}
  .hdr.stuck .hdr-in{height:56px}
  .brand-lockup .logo-mark{width:30px;height:30px}
  .brand-word{font-size:20px}
  .hdr-cta{gap:6px}
  .hdr-cta .btn{font-size:12.5px;padding:9px 12px}

  /* Slider */
  .slider{border-radius:20px}
  .slide{min-height:330px;padding:22px 18px 54px}
  .slide.sag,.slide.orta{justify-content:flex-start;text-align:left}
  .slide.sag .slide-in,.slide.orta .slide-in{margin:0}
  .slide.sag .slide-actions,.slide.orta .slide-actions{justify-content:flex-start}
  .slide.sag p,.slide.orta p{margin-left:0;margin-right:0}
  .slide h2{font-size:26px}
  .slide p{font-size:13.5px;margin-bottom:16px}
  .slide-actions .btn{padding:11px 18px;font-size:13.5px}
  .slider-arrow{display:none}
  .slider-nav{bottom:14px}

  /* Hikâyeler */
  .stories{gap:12px;padding-bottom:10px}
  .story{width:70px}
  .story-ring{width:66px;height:66px}
  .story-in{font-size:18px}
  .story b{font-size:10.5px}

  /* Kısayollar */
  .quick{grid-template-columns:repeat(2,1fr);gap:10px}
  .quick-i{padding:14px 13px 12px}
  .quick-ic{width:34px;height:34px;font-size:17px;margin-bottom:9px}
  .quick-i b{font-size:13.5px}
  .quick-go{top:13px;right:11px}

  /* Kartlar */
  .card-body{padding:13px 14px 15px}
  .card-body h3{font-size:14.5px}
  .grid{gap:12px}

  /* Geniş kart */
  .wide{flex-wrap:wrap;padding:16px;gap:14px}
  .wide-ic{width:56px;height:56px;font-size:19px}
  .wide-tt{flex:1 1 auto;min-width:140px}
  .wide-val{flex:1 1 100%;text-align:left;font-size:24px;max-width:100%}
  .wide-val small{display:inline;margin-left:8px}

  /* Kazanç listesi */
  .win{grid-template-columns:24px 48px 1fr;gap:9px;padding:9px 11px}
  .win-cover{width:48px;height:36px}
  .win-amount{grid-column:1/-1;text-align:left;font-size:15px;padding-left:81px;margin-top:-6px}
  .win-list.mini .win{grid-template-columns:24px 48px 1fr}
  .win-list.mini .win-amount{padding-left:81px}

  /* Maç satırı */
  .match{grid-template-columns:1fr;gap:10px;padding:13px;text-align:center}
  .match-time{display:flex;align-items:center;justify-content:center;gap:8px}
  .match-time b{font-size:14px}
  .match-time span{font-size:10px}
  .match-teams{gap:8px}
  .match-team,.match-team.away{flex-direction:column;gap:6px;text-align:center}
  .match-team b{font-size:12.5px;white-space:normal}
  .match-vs{padding:5px 10px;font-size:13px}
  .match-meta{justify-content:center;flex-wrap:wrap}
  .league-b .match{padding:12px 10px}
  .match.is-live::before{width:100%;height:2px;bottom:auto}

  /* Skor özeti */
  .score-top{padding:12px 14px;gap:12px}
  .ss{font-size:11.5px;padding:5px 10px}
  .score-date{font-size:12px}
  .league-h{padding:10px 13px}
  .league-h b{font-size:12.5px}

  /* Canlı TV */
  .player{border-radius:18px}
  .player-bar{padding:10px 12px;gap:8px}
  .player-name{font-size:13px;flex:1 1 100%;order:-1}
  .player-bar .btn{flex:1;font-size:12px;padding:8px 10px}
  .tv{padding:13px;aspect-ratio:16/11}
  .tv-in b{font-size:13.5px}

  /* RTP */
  .rtp-row{grid-template-columns:1fr 72px;padding:12px 13px;gap:8px}
  .rtp-name b{font-size:13.5px}
  .rtp-val{font-size:16px}
  .rtp-trend{display:none}

  /* Marka şeridi */
  .brand-chip{min-width:150px;height:72px;padding:0 16px}
  .bl{font-size:14px}
  .bl-daralt{font-size:15px}
  .bl-genis{font-size:12.5px;letter-spacing:.1em}

  /* İş ortakları başlığı */
  .partners .partner-head{flex-direction:column;align-items:flex-start;gap:12px}
  .partner-count{text-align:left}
  .partner-count b{font-size:26px}

  /* Kutucuklar ve iletişim */
  .tile{padding:13px 14px;gap:11px}
  .tile-ic{width:38px;height:38px;font-size:18px}
  .tile-tt b{font-size:13.5px}

  /* Duyurular */
  .ann{padding:14px;gap:11px}
  .ann-ic{width:34px;height:34px;font-size:16px}
  .ann-tt b{font-size:13.5px}

  /* Sayfa başlıkları */
  .page-head{padding:26px 0 4px}
  .page-head h1{font-size:26px}
  .page-head p{font-size:13.5px}
  .eyebrow{font-size:9.5px;padding:4px 10px}

  /* Çağrı bloğu */
  .cta{padding:20px;border-radius:20px}
  .cta-tt h2{font-size:20px}
  .cta-tt p{font-size:13px}
  .cta .btn,.cta a.btn{width:100%;justify-content:center}
  .cta > div:last-child{width:100%}

  /* Formlar */
  .form-card{padding:18px;border-radius:20px}
  .f2{grid-template-columns:1fr;gap:0}
  .steps{grid-template-columns:1fr 1fr;gap:10px}
  .step{padding:13px}
  .code-box{padding:16px;flex-direction:column;align-items:flex-start;gap:12px}
  .code-box b{font-size:24px}
  .code-box > div:last-child{width:100%;display:flex;gap:8px}
  .code-box .btn{flex:1;justify-content:center}

  /* Haber */
  .post-hero{min-height:240px;border-radius:20px}
  .post-hero h2{font-size:21px}
  .post-body{font-size:14.5px}

  /* Alt bilgi */
  .ftr{margin-top:36px}
  .ftr-top{padding:30px 0 22px;gap:24px}
  .ftr-social a span{display:none}
  .ftr-social a{padding:9px 11px}
  .ftr-social a .ic{font-size:18px}
  .compliance{gap:12px;padding:14px 0}
  .comp-badge{font-size:10.5px;padding:4px 8px}
  .comp-age{width:30px;height:30px;font-size:11px}
  .ftr-bottom{flex-direction:column;align-items:flex-start;gap:10px;font-size:11.5px}

  /* Hikâye görüntüleyici tam ekran */
  .sv-box{width:100vw;height:100vh;height:100dvh;border-radius:0;border:0}
  .sv-foot{padding:16px 16px 24px}
  .sv-foot p{font-size:13.5px}

  /* Video popup */
  .modal.open{padding:0;place-items:stretch}
  .modal-box{width:100%;border-radius:0;align-self:center}
  .modal-h{padding:11px 13px}
  .modal-h b{font-size:13px}
  .modal-h .muted{display:none}
  .modal-f{flex-direction:column;align-items:stretch;gap:8px}
  .modal-f .btn{justify-content:center}

  /* Süzgeç çubukları yatay kayar */
  .chips{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;padding-bottom:4px;
    margin-left:-14px;margin-right:-14px;padding-left:14px;padding-right:14px}
  .chips::-webkit-scrollbar{display:none}
  .chip{flex:none}

  /* Yukarı çık düğmesi biraz küçülür */
  .top-btn{width:42px;height:42px;right:14px;bottom:14px}
}

/* ---- 420 px altı: küçük telefon ---- */
@media(max-width:420px){
  .slide{min-height:300px}
  .slide h2{font-size:23px}
  .slide-actions{flex-direction:column;align-items:stretch}
  .slide-actions .btn{width:100%}
  .quick{grid-template-columns:1fr}
  .steps{grid-template-columns:1fr}
  .brand-word{font-size:18px}
  .win-amount{padding-left:0;margin-top:2px}
  .win{grid-template-columns:24px 1fr}
  .win-cover{display:none}
}

/* Dokunmatik cihazlarda "hover" takılmasın */
@media(hover:none){
  .card:hover,.tile:hover,.quick-i:hover,.wide:hover,.win:hover,.tv:hover,.vid:hover{
    transform:none;box-shadow:none;
  }
  .slider-arrow{opacity:1}
}

@media (prefers-reduced-motion:reduce){
  .rev .grid > *,.rev .win-list > *,.rev .quick > *,.rev .score-wrap > *,
  .rev .sec-head,.slide-in > *{opacity:1 !important;transform:none !important;animation:none !important}
  .story-ring,.hdr{animation:none !important}
}

/* =================================================================
   3. ANA SAYFA DÜZENİ
   ================================================================= */

/* Ara bantlar sayfaya ritim verir */
.sec-alt{position:relative}
.sec-alt::before{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:linear-gradient(180deg,transparent,rgba(255,255,255,.022) 18%,rgba(255,255,255,.022) 82%,transparent);
}

/* Günün özeti tek panel */
.ozet{
  padding:22px;border-radius:var(--r-xl);border:1px solid var(--line);
  background:linear-gradient(165deg,rgba(255,255,255,.04),rgba(255,255,255,.012));
}
.ozet-head{display:flex;align-items:center;justify-content:space-between;gap:14px;
  flex-wrap:wrap;margin-bottom:20px;padding-bottom:14px;border-bottom:1px solid var(--line)}
@media(max-width:760px){
  .ozet{padding:16px;border-radius:20px}
  .ozet-head{margin-bottom:14px;padding-bottom:11px}
}