/* Kütahyaspor premium accents */
:root{ color-scheme: light; }
html.dark{ color-scheme: dark; }

/* smoother typography */
body{ font-family: Inter, ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, 'Apple Color Emoji','Segoe UI Emoji'; }

/* subtle page fade */
@media (prefers-reduced-motion: no-preference){
  main{ animation: fadeIn .25s ease; }
  @keyframes fadeIn{ from{opacity:0; transform: translateY(6px);} to{opacity:1; transform: translateY(0);} }
}

/* utility: clamp lines (Tailwind plugin yok, basit) */
.line-clamp-2{
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
}

/* buttons (optional) */
.kbtn{
  display:inline-flex; align-items:center; justify-content:center;
  padding:.75rem 1rem; border-radius:1rem;
  font-weight:800;
  background: #F59E0B;
  color:#111827;
  transition: transform .15s ease, box-shadow .15s ease, opacity .15s ease;
}
.kbtn:hover{ transform: translateY(-1px); opacity:.96; box-shadow: 0 20px 60px rgba(0,0,0,.25); }
.kbtn:active{ transform: translateY(0); opacity:.92; }


/* News typography (Tailwind prose plugin alternative) */
.news-body{ color: rgb(15 23 42); }
html.dark .news-body{ color: rgb(226 232 240); }

.news-body p{ margin: .9rem 0; line-height: 1.75; }
.news-body a{ text-decoration: underline; text-underline-offset: 3px; }
.news-body h2{ font-size: 1.25rem; font-weight: 900; margin: 1.2rem 0 .5rem; }
.news-body ul{ list-style: disc; padding-left: 1.2rem; margin: .8rem 0; }
.news-body img{ max-width:100%; border-radius: 1.5rem; border: 1px solid rgba(148,163,184,.35); }
html.dark .news-body img{ border-color: rgba(255,255,255,.10); }
.news-body blockquote{ border-left: 4px solid rgba(245,158,11,.8); padding-left: 1rem; color: rgba(51,65,85,.9); margin: 1rem 0; }
html.dark .news-body blockquote{ color: rgba(226,232,240,.85); }


/* ------------------------------------------------------------
   Sponsors marquee (home footer area)
   ------------------------------------------------------------ */

.sponsor-marquee{
  overflow: hidden;
  position: relative;
  border-radius: 1.25rem;
  border: 1px solid rgba(148,163,184,.35);
  background: rgba(255,255,255,.55);
}
html.dark .sponsor-marquee{
  border-color: rgba(255,255,255,.10);
  background: rgba(255,255,255,.04);
}

.sponsor-track{
  display: flex;
  gap: .75rem;
  align-items: center;
  padding: .75rem;
  overflow-x: auto;
  scroll-behavior: smooth;
  scrollbar-width: none;
}
.sponsor-track::-webkit-scrollbar{ display:none; }

.sponsor-item{
  flex: 0 0 auto;
  min-width: 150px;
  height: 64px;
  display:flex;
  align-items:center;
  justify-content:center;
  padding: .75rem 1rem;
  border-radius: 1rem;
  border: 1px solid rgba(148,163,184,.35);
  background: rgba(255,255,255,.70);
  transition: transform .15s ease, box-shadow .15s ease, background-color .15s ease;
}
html.dark .sponsor-item{
  border-color: rgba(255,255,255,.10);
  background: rgba(0,0,0,.20);
}
.sponsor-item:hover{ transform: translateY(-1px); box-shadow: 0 20px 60px rgba(0,0,0,.12); }

.sponsor-nav{
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 3;
  width: 40px;
  height: 40px;
  border-radius: 9999px;
  border: 1px solid rgba(148,163,184,.35);
  background: rgba(255,255,255,.80);
  color: rgb(15 23 42);
  font-size: 24px;
  line-height: 1;
  font-weight: 900;
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  backdrop-filter: blur(8px);
  transition: transform .15s ease, opacity .15s ease;
}
html.dark .sponsor-nav{
  border-color: rgba(255,255,255,.10);
  background: rgba(0,0,0,.35);
  color: rgba(226,232,240,.92);
}
.sponsor-nav:hover{ transform: translateY(-50%) scale(1.04); }
.sponsor-nav:active{ transform: translateY(-50%) scale(.98); opacity:.9; }
.sponsor-nav-left{ left: -10px; }
.sponsor-nav-right{ right: -10px; }

@media (max-width: 640px){
  .sponsor-item{ min-width: 130px; }
  .sponsor-nav-left{ left: -6px; }
  .sponsor-nav-right{ right: -6px; }
}


/* ------------------------------------------------------------
   Reusable UI components (used by both public + admin pages)
   ------------------------------------------------------------ */

.card{
  border-radius: 1.5rem;
  border: 1px solid rgba(148,163,184,.35);
  background: rgba(255,255,255,.70);
  box-shadow: 0 20px 60px rgba(0,0,0,.08);
}
html.dark .card{
  border-color: rgba(255,255,255,.10);
  background: rgba(255,255,255,.05);
  box-shadow: 0 25px 60px rgba(0,0,0,.35);
}

.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:.5rem;
  padding:.65rem 1rem;
  border-radius: 1rem;
  border: 1px solid rgba(148,163,184,.35);
  background: rgba(255,255,255,.70);
  color: rgb(15 23 42);
  font-weight: 800;
  line-height: 1;
  transition: transform .15s ease, box-shadow .15s ease, opacity .15s ease, background-color .15s ease;
}
.btn:hover{ transform: translateY(-1px); box-shadow: 0 20px 60px rgba(0,0,0,.12); }
.btn:active{ transform: translateY(0); opacity: .92; }
html.dark .btn{
  border-color: rgba(255,255,255,.10);
  background: rgba(255,255,255,.05);
  color: rgb(226 232 240);
}

.btn.btn-primary,
.btn.primary{
  background: #F59E0B;
  border-color: rgba(245,158,11,.45);
  color: #111827;
  box-shadow: 0 20px 60px rgba(0,0,0,.18);
}
.btn.btn-primary:hover,
.btn.primary:hover{ opacity: .96; }

.btn.danger{
  background: rgba(239,68,68,.12);
  border-color: rgba(239,68,68,.30);
  color: rgb(185 28 28);
}
html.dark .btn.danger{
  background: rgba(239,68,68,.16);
  border-color: rgba(239,68,68,.25);
  color: rgb(254 202 202);
}

.btn[disabled],
.btn.disabled{
  opacity: .6;
  pointer-events:none;
}

.input{
  width:100%;
  padding: .75rem 1rem;
  border-radius: 1rem;
  border: 1px solid rgba(148,163,184,.35);
  background: rgba(255,255,255,.70);
  color: inherit;
  transition: box-shadow .15s ease, border-color .15s ease, background-color .15s ease;
}
.input:focus{
  outline: none;
  border-color: rgba(59,130,246,.55);
  box-shadow: 0 0 0 4px rgba(59,130,246,.18);
}
html.dark .input{
  border-color: rgba(255,255,255,.12);
  background: rgba(0,0,0,.20);
}
html.dark .input:focus{
  border-color: rgba(245,158,11,.45);
  box-shadow: 0 0 0 4px rgba(245,158,11,.18);
}

.pill{
  display:inline-flex;
  align-items:center;
  gap:.35rem;
  font-size: 12px;
  font-weight: 900;
  padding: .25rem .6rem;
  border-radius: 9999px;
  border: 1px solid rgba(148,163,184,.35);
  background: rgba(255,255,255,.55);
  color: rgb(51 65 85);
}
html.dark .pill{
  border-color: rgba(255,255,255,.10);
  background: rgba(255,255,255,.06);
  color: rgba(226,232,240,.85);
}
.pill-ok{
  border-color: rgba(16,185,129,.35);
  background: rgba(16,185,129,.12);
  color: rgb(4 120 87);
}
html.dark .pill-ok{ color: rgb(167 243 208); }

.muted{ color: rgba(51,65,85,.75); }
html.dark .muted{ color: rgba(226,232,240,.75); }

.pad{ padding: 1rem; }

.adminCard{
  display:block;
  padding: 1.1rem 1.1rem;
  border-radius: 1.5rem;
  border: 1px solid rgba(148,163,184,.35);
  background: rgba(255,255,255,.70);
  font-weight: 950;
  transition: transform .15s ease, box-shadow .15s ease, background-color .15s ease;
}
.adminCard:hover{ transform: translateY(-2px); box-shadow: 0 25px 60px rgba(0,0,0,.14); }
html.dark .adminCard{
  border-color: rgba(255,255,255,.10);
  background: rgba(255,255,255,.05);
}


/* ------------------------------------------------------------
   Home shop showcase (wow section)
   ------------------------------------------------------------ */

.shop-wow-shell{
  backdrop-filter: blur(8px);
}

.shop-wow-grid{
  background-image:
    linear-gradient(rgba(255,255,255,.8) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.8) 1px, transparent 1px);
  background-size: 34px 34px;
  mask-image: radial-gradient(circle at center, black 25%, transparent 80%);
}

.shop-wow-card,
.shop-wow-mini{
  position: relative;
  display: block;
  overflow: hidden;
  border-radius: 1.8rem;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.06);
  box-shadow: 0 24px 80px rgba(0,0,0,.28);
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
  isolation: isolate;
}

.shop-wow-card:hover,
.shop-wow-mini:hover{
  transform: translateY(-4px);
  border-color: rgba(245,158,11,.4);
  box-shadow: 0 28px 90px rgba(0,0,0,.36);
}

.shop-wow-media,
.shop-wow-mini-media{
  position: absolute;
  inset: 0;
  z-index: 0;
  background: linear-gradient(135deg, rgba(255,255,255,.05), rgba(255,255,255,.02));
}

.shop-wow-overlay{
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(180deg, rgba(3,7,18,.08) 0%, rgba(3,7,18,.20) 36%, rgba(3,7,18,.88) 100%);
}

.shop-wow-mini-overlay{
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(180deg, rgba(3,7,18,.10) 0%, rgba(3,7,18,.30) 42%, rgba(3,7,18,.92) 100%);
}

.shop-wow-shine{
  position: absolute;
  inset: -20%;
  z-index: 1;
  background: linear-gradient(110deg, transparent 35%, rgba(255,255,255,.18) 48%, transparent 60%);
  transform: translateX(-110%) rotate(8deg);
  transition: transform .9s ease;
  pointer-events: none;
}

.shop-wow-card:hover .shop-wow-shine{
  transform: translateX(110%) rotate(8deg);
}

@media (max-width: 1024px){
  .shop-wow-card{ min-height: 360px; }
}

@media (max-width: 640px){
  .shop-wow-card,
  .shop-wow-mini{ border-radius: 1.4rem; }
}

/* ------------------------------------------------------------
   Top level redesign additions
   ------------------------------------------------------------ */

.line-clamp-3{
  display:-webkit-box;
  -webkit-line-clamp:3;
  -webkit-box-orient:vertical;
  overflow:hidden;
}

.topbar-shell{
  background: linear-gradient(90deg, rgba(245,158,11,.12), rgba(59,130,246,.10));
  backdrop-filter: blur(10px);
}
html.dark .topbar-shell{
  background: linear-gradient(90deg, rgba(245,158,11,.10), rgba(59,130,246,.08));
}
.topbar-pill{
  display:inline-flex;
  align-items:center;
  padding:.32rem .7rem;
  border-radius:9999px;
  border:1px solid rgba(148,163,184,.35);
  background: rgba(255,255,255,.55);
  font-weight:800;
}
html.dark .topbar-pill{
  border-color: rgba(255,255,255,.10);
  background: rgba(255,255,255,.06);
}
.topbar-link{
  display:inline-flex;
  align-items:center;
  padding:.25rem .55rem;
  border-radius:9999px;
  color: inherit;
}
.topbar-link:hover{ background: rgba(255,255,255,.55); }
html.dark .topbar-link:hover{ background: rgba(255,255,255,.06); }

.brand-badge{
  position:relative;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:48px;
  height:48px;
  padding:2px;
  border-radius:18px;
  background: linear-gradient(135deg, #F59E0B, #3B82F6);
  box-shadow: 0 16px 40px rgba(15,23,42,.18);
}
.brand-badge-inner{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:100%;
  height:100%;
  border-radius:16px;
  background:#111827;
  color:#fff;
  font-weight:900;
}

.secondary-nav-grid{
  display:flex;
  flex-wrap:wrap;
  gap:.5rem;
}
.secondary-nav-item{
  display:inline-flex;
  align-items:center;
  padding:.55rem .9rem;
  border-radius:9999px;
  border:1px solid rgba(148,163,184,.30);
  background: rgba(255,255,255,.54);
  font-size:13px;
  font-weight:700;
  color: rgb(51 65 85);
}
.secondary-nav-item:hover{ background: rgba(255,255,255,.85); }
.secondary-nav-item.is-active{
  background:#111827;
  color:#fff;
  border-color:#111827;
}
html.dark .secondary-nav-item{
  border-color: rgba(255,255,255,.10);
  background: rgba(255,255,255,.05);
  color: rgba(226,232,240,.85);
}
html.dark .secondary-nav-item.is-active{
  background: rgba(255,255,255,.12);
  color:#fff;
}

.eyebrow{
  display:inline-flex;
  align-items:center;
  gap:.45rem;
  font-size:12px;
  letter-spacing:.18em;
  text-transform:uppercase;
  font-weight:900;
  color: rgb(71 85 105);
}
.eyebrow::before{
  content:"";
  width:28px;
  height:2px;
  border-radius:9999px;
  background: linear-gradient(90deg, #F59E0B, #3B82F6);
}
html.dark .eyebrow{ color: rgba(226,232,240,.68); }

.editorial-panel{
  position:relative;
  border-radius: 2rem;
  border:1px solid rgba(148,163,184,.30);
  background: linear-gradient(180deg, rgba(255,255,255,.82), rgba(255,255,255,.66));
  box-shadow: 0 24px 80px rgba(15,23,42,.08);
  overflow:hidden;
}
.editorial-panel::after{
  content:"";
  position:absolute;
  inset:auto 0 0 0;
  height:1px;
  background: linear-gradient(90deg, transparent, rgba(245,158,11,.45), rgba(59,130,246,.45), transparent);
}
html.dark .editorial-panel{
  border-color: rgba(255,255,255,.10);
  background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.04));
  box-shadow: 0 28px 90px rgba(0,0,0,.34);
}

.page-hero-card{
  position:relative;
  border-radius: 2rem;
  border:1px solid rgba(255,255,255,.08);
  background: linear-gradient(135deg, #0f172a 0%, #111827 55%, #1e293b 100%);
  box-shadow: 0 28px 90px rgba(15,23,42,.28);
}
.page-hero-pattern{
  position:absolute;
  inset:0;
  background-image:
    radial-gradient(circle at 18% 20%, rgba(245,158,11,.22), transparent 24%),
    radial-gradient(circle at 82% 15%, rgba(59,130,246,.20), transparent 24%),
    linear-gradient(rgba(255,255,255,.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px);
  background-size:auto, auto, 34px 34px, 34px 34px;
  opacity:.9;
}

.content-hub-card,
.mini-feature-card,
.fixture-card,
.story-row{
  position:relative;
  display:block;
  border-radius: 1.6rem;
  border:1px solid rgba(148,163,184,.30);
  background: rgba(255,255,255,.72);
  box-shadow: 0 20px 60px rgba(15,23,42,.06);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.content-hub-card:hover,
.mini-feature-card:hover,
.fixture-card:hover,
.story-row:hover{
  transform: translateY(-3px);
  box-shadow: 0 25px 70px rgba(15,23,42,.12);
  border-color: rgba(245,158,11,.35);
}
html.dark .content-hub-card,
html.dark .mini-feature-card,
html.dark .fixture-card,
html.dark .story-row{
  border-color: rgba(255,255,255,.10);
  background: rgba(255,255,255,.05);
  box-shadow: 0 24px 60px rgba(0,0,0,.30);
}

.content-hub-card{ padding:1.25rem; text-decoration:none; color:inherit; }
.content-hub-icon{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:44px;
  height:44px;
  border-radius:14px;
  background: linear-gradient(135deg, rgba(245,158,11,.18), rgba(59,130,246,.18));
  font-size:20px;
}
.content-hub-title,
.mini-feature-card h3{
  margin-top:1rem;
  font-size:1.08rem;
  font-weight:900;
  color: rgb(15 23 42);
}
html.dark .content-hub-title,
html.dark .mini-feature-card h3{ color:#fff; }
.content-hub-card p,
.mini-feature-card p{ margin-top:.65rem; font-size:.92rem; color: rgba(51,65,85,.84); }
html.dark .content-hub-card p,
html.dark .mini-feature-card p{ color: rgba(226,232,240,.78); }
.mini-feature-card{ padding:1.2rem; }

.kpi-list-item{
  padding: .95rem 1rem;
  border-radius: 1.15rem;
  border:1px solid rgba(148,163,184,.25);
  background: rgba(255,255,255,.46);
}
html.dark .kpi-list-item{
  border-color: rgba(255,255,255,.10);
  background: rgba(255,255,255,.04);
}

.faq-card{
  border-radius: 1.4rem;
  border:1px solid rgba(148,163,184,.28);
  background: rgba(255,255,255,.64);
  padding: 1rem 1.1rem;
}
html.dark .faq-card{
  border-color: rgba(255,255,255,.10);
  background: rgba(255,255,255,.04);
}
.faq-card summary{
  list-style:none;
  cursor:pointer;
  font-weight:900;
  color: rgb(15 23 42);
}
.faq-card summary::-webkit-details-marker{ display:none; }
html.dark .faq-card summary{ color:#fff; }
.faq-answer{
  margin-top:.8rem;
  font-size:.95rem;
  color: rgba(51,65,85,.84);
  line-height:1.7;
}
html.dark .faq-answer{ color: rgba(226,232,240,.78); }

.standings-table td{
  padding: .9rem .85rem;
  border-top:1px solid rgba(148,163,184,.18);
}
.standings-table tr:first-child td{ border-top:none; }
.standings-table .team-cell{ font-weight:800; }
.standings-table .is-featured-team{
  background: linear-gradient(90deg, rgba(245,158,11,.16), rgba(59,130,246,.08));
}
html.dark .standings-table .is-featured-team{
  background: linear-gradient(90deg, rgba(245,158,11,.12), rgba(59,130,246,.08));
}

.fixture-card{ padding:1.25rem; }
.fixture-badge{
  display:inline-flex;
  align-items:center;
  padding:.38rem .8rem;
  border-radius:9999px;
  font-size:12px;
  font-weight:900;
}
.fixture-badge.is-home{ background: rgba(16,185,129,.12); color: rgb(5 150 105); }
.fixture-badge.is-away{ background: rgba(59,130,246,.12); color: rgb(29 78 216); }
html.dark .fixture-badge.is-home{ color: rgb(167 243 208); }
html.dark .fixture-badge.is-away{ color: rgb(191 219 254); }

.feature-news-card{
  position:relative;
  display:block;
  min-height: 360px;
  border-radius: 1.8rem;
  overflow:hidden;
  background:#0f172a;
  box-shadow: 0 24px 80px rgba(15,23,42,.24);
}
.feature-news-media{ position:absolute; inset:0; }
.feature-news-content{
  position:relative;
  z-index:1;
  height:100%;
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
  padding:1.4rem;
  background: linear-gradient(180deg, rgba(15,23,42,.05), rgba(15,23,42,.18) 34%, rgba(15,23,42,.92));
}
.feature-news-meta{
  display:inline-flex;
  width:fit-content;
  padding:.35rem .7rem;
  border-radius:9999px;
  background: rgba(255,255,255,.10);
  color: rgba(255,255,255,.82);
  font-size:12px;
  font-weight:800;
}

.story-row{
  display:grid;
  grid-template-columns: 180px 1fr;
  gap:1rem;
  padding:1rem;
  text-decoration:none;
  color:inherit;
}
.story-row-media{
  border-radius:1.2rem;
  overflow:hidden;
  min-height:132px;
  background: linear-gradient(135deg, rgba(245,158,11,.18), rgba(59,130,246,.18));
}
.story-row-media img{
  width:100%;
  height:100%;
  object-fit:cover;
}
.story-row-fallback{
  height:100%;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:2rem;
  font-weight:900;
  color: rgb(51 65 85);
}
.story-row-content{ min-width:0; align-self:center; }

.footer-link-list{
  display:grid;
  gap:.7rem;
}
.footer-link-list a{
  color:inherit;
  text-decoration:none;
}
.footer-link-list a:hover{ text-decoration:underline; text-underline-offset:3px; }

@media (max-width: 768px){
  .story-row{
    grid-template-columns: 1fr;
  }
  .story-row-media{ min-height: 190px; }
  .feature-news-card{ min-height: 300px; }
}