/* ==========================================================================
   ÜSKÜDAR BASKETBOL SPOR KULÜBÜ — Tema
   Tüm sınıflar .ub- ön ekiyle isimlendirildi; mevcut style.css ile çakışmaz.
   Bu dosya style.css'ten SONRA yüklenmelidir.
   ========================================================================== */

/* Tüm kutular kenarlık+boşluk dahil ölçülsün.
   Bu olmadan width:100% olan öğeler iç boşluk kadar taşıp
   sayfayı ekrandan geniş yapıyor, position:fixed öğeler de kayıyordu. */
*, *::before, *::after { box-sizing: border-box; }

/* tarayıcının varsayılan gövde boşluğu — sayfa tam genişlik olsun diye sıfırlanır */
html, body { margin: 0; padding: 0; }

:root {
	--ub-navy: #16255C;
	--ub-navy-2: #1E3070;
	--ub-navy-deep: #0F1B44;
	--ub-orange: #F5822B;
	--ub-red: #E3611A;   /* üst şerit — turuncuya yakın sıcak ton */
	--ub-ust: 177px;     /* üst şerit + menü yüksekliği (hero'yu ekrana oturtmak için) */
	--ub-orange-2: #FF9A4D;
	--ub-ink: #101828;
	--ub-body: #5A6478;
	--ub-muted: #8B94A8;
	--ub-line: #E6E9F0;
	--ub-bg: #F4F6FA;
	--ub-card: #FFFFFF;
	--ub-radius: 14px;
	--ub-radius-lg: 22px;
	--ub-shadow: 0 2px 14px rgba(16, 37, 92, .06);
	--ub-shadow-lg: 0 18px 48px rgba(16, 37, 92, .12);
	--ub-display: 'Barlow Condensed', 'Figtree', sans-serif;
	--ub-font: 'Figtree', 'Rubik', -apple-system, Segoe UI, sans-serif;
}

body.ub-body {
	font-family: var(--ub-font);
	color: var(--ub-body);
	background: #fff;
	font-size: 16px;
	line-height: 1.75;
	overflow-x: hidden;
}

.ub-body img { max-width: 100%; height: auto; }
.ub-body a { text-decoration: none; }

/* Sayfa gövdesi — tam genişlik, köşe yuvarlaması yok */
.ub-shell {
	background: #fff;
	border-radius: 0;
	margin: 0;
	overflow: hidden;
	box-shadow: none;
}

.ub-container {
	width: 100%;
	max-width: 1200px;
	margin: 0 auto;
	padding: 0 24px;
}

/* --------------------------------------------------------------------------
   Tipografi yardımcıları
   -------------------------------------------------------------------------- */

.ub-eyebrow {
	display: block;
	font-size: 13px;
	font-weight: 800;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--ub-orange);
	margin: 0 0 10px;
}

.ub-heading {
	font-family: var(--ub-display);
	font-weight: 700;
	font-size: clamp(28px, 3.2vw, 40px);
	line-height: 1.1;
	letter-spacing: .01em;
	text-transform: uppercase;
	color: var(--ub-navy);
	margin: 0;
}

.ub-section {
	padding: 68px 0;
	position: relative;
}

.ub-section--tight { padding: 48px 0; }

.ub-section-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	margin-bottom: 30px;
}

.ub-section-head .ub-eyebrow { margin-bottom: 0; }

/* turuncu kısa alt çizgi aksanı */
.ub-rule {
	display: block;
	width: 46px;
	height: 3px;
	background: var(--ub-orange);
	border-radius: 2px;
	margin-top: 8px;
}

.ub-more {
	font-size: 13px;
	font-weight: 800;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--ub-navy);
	white-space: nowrap;
	transition: color .2s ease;
}
.ub-more:hover { color: var(--ub-orange); }
.ub-more i { font-size: 11px; margin-left: 6px; }

/* --------------------------------------------------------------------------
   Butonlar
   -------------------------------------------------------------------------- */

.ub-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	padding: 14px 30px;
	border: 2px solid transparent;
	border-radius: 8px;
	font-family: var(--ub-font);
	font-size: 13px;
	font-weight: 800;
	letter-spacing: .12em;
	text-transform: uppercase;
	cursor: pointer;
	transition: transform .2s ease, background .2s ease, color .2s ease, border-color .2s ease, box-shadow .2s ease;
}
.ub-btn:hover { transform: translateY(-2px); }

.ub-btn--orange { background: var(--ub-orange); color: #fff; box-shadow: 0 10px 24px rgba(245, 130, 43, .28); }
.ub-btn--orange:hover { background: var(--ub-orange-2); color: #fff; }

.ub-btn--navy { background: var(--ub-navy); color: #fff; }
.ub-btn--navy:hover { background: var(--ub-navy-2); color: #fff; }

.ub-btn--ghost { background: #fff; color: var(--ub-navy); border-color: var(--ub-line); }
.ub-btn--ghost:hover { border-color: var(--ub-navy); color: var(--ub-navy); }

.ub-btn--sm { padding: 11px 22px; font-size: 12px; }

/* kapsayıcının tamamını kaplayan buton */
.ub-btn--blok { display: flex; width: 100%; }

/* --------------------------------------------------------------------------
   Header
   -------------------------------------------------------------------------- */

/* --------------------------------------------------------------------------
   Üst şerit (menünün üstündeki kırmızı alan)
   -------------------------------------------------------------------------- */

.ub-topbar {
	background: var(--ub-red);
	color: rgba(255, 255, 255, .92);
	font-size: 13px;
}

.ub-topbar__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 18px;
	min-height: 40px;
	flex-wrap: wrap;
}

.ub-topbar__sol,
.ub-topbar__sag { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; }

.ub-topbar a,
.ub-topbar span { display: inline-flex; align-items: center; gap: 7px; color: inherit; transition: color .2s ease; }
.ub-topbar a:hover { color: #fff; }
.ub-topbar i { font-size: 12px; opacity: .85; }

.ub-topbar__marka {
	font-weight: 700;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: #fff;
}

.ub-topbar__sag a[aria-label] {
	width: 26px; height: 26px;
	justify-content: center;
	border-radius: 50%;
	background: rgba(255, 255, 255, .16);
}
.ub-topbar__sag a[aria-label]:hover { background: rgba(255, 255, 255, .3); }
.ub-topbar__wa:hover { background: #25D366; }
.ub-topbar__sag a[aria-label] i { font-size: 12px; opacity: 1; }

.ub-header {
	position: sticky;
	top: 0;
	z-index: 900;
	background: #fff;
	border-bottom: 1px solid var(--ub-line);
}

.ub-header__inner {
	display: flex;
	align-items: center;
	gap: 28px;
	min-height: 136px;
}

.ub-logo { display: flex; align-items: center; flex-shrink: 0; }
.ub-logo img {
	max-height: 112px;
	width: auto;
	aspect-ratio: 1 / 1;
	object-fit: cover;
	border-radius: 50%;
}

.ub-nav { margin-left: auto; }

.ub-nav__list {
	display: flex;
	align-items: center;
	gap: 6px;
	list-style: none;
	margin: 0;
	padding: 0;
}

.ub-nav__list > li { position: relative; }

.ub-nav__list > li > a {
	display: block;
	padding: 10px 14px;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: .09em;
	text-transform: uppercase;
	color: var(--ub-navy);
	white-space: nowrap;
	transition: color .2s ease;
}
.ub-nav__list > li > a:hover,
.ub-nav__list > li.is-active > a { color: var(--ub-orange); }

/* açılır alt menü */
.ub-nav__list ul {
	position: absolute;
	top: 100%;
	left: 0;
	min-width: 240px;
	list-style: none;
	margin: 0;
	padding: 10px 0;
	background: #fff;
	border: 1px solid var(--ub-line);
	border-radius: var(--ub-radius);
	box-shadow: var(--ub-shadow-lg);
	opacity: 0;
	visibility: hidden;
	transform: translateY(10px);
	transition: opacity .2s ease, transform .2s ease, visibility .2s;
	z-index: 20;
}
.ub-nav__list > li:hover > ul { opacity: 1; visibility: visible; transform: translateY(0); }

.ub-nav__list ul a {
	display: block;
	padding: 9px 20px;
	font-size: 14px;
	font-weight: 600;
	color: var(--ub-navy);
	transition: background .2s ease, color .2s ease, padding-left .2s ease;
}
.ub-nav__list ul a:hover { background: var(--ub-bg); color: var(--ub-orange); padding-left: 25px; }

.ub-header__cta { flex-shrink: 0; }

.ub-burger {
	display: none;
	flex-direction: column;
	justify-content: center;
	gap: 5px;
	width: 44px;
	height: 44px;
	padding: 0 9px;
	margin-left: auto;
	background: none;
	border: 0;
	cursor: pointer;
}
.ub-burger span {
	display: block;
	height: 2px;
	background: var(--ub-navy);
	border-radius: 2px;
	transition: transform .25s ease, opacity .25s ease;
}

/* mobil menü paneli */
.ub-mobile {
	position: fixed;
	inset: 0;
	z-index: 1200;
	visibility: hidden;
	pointer-events: none;
}
.ub-mobile.is-open { visibility: visible; pointer-events: auto; }

.ub-mobile__overlay {
	position: absolute;
	inset: 0;
	background: rgba(15, 27, 68, .55);
	opacity: 0;
	transition: opacity .3s ease;
}
.ub-mobile.is-open .ub-mobile__overlay { opacity: 1; }

.ub-mobile__panel {
	position: absolute;
	top: 0;
	right: 0;
	width: min(340px, 88vw);
	height: 100%;
	background: #fff;
	padding: 26px 24px 40px;
	overflow-y: auto;
	transform: translateX(100%);
	transition: transform .32s cubic-bezier(.4, 0, .2, 1);
}
.ub-mobile.is-open .ub-mobile__panel { transform: translateX(0); }

.ub-mobile__close {
	position: absolute;
	top: 18px;
	right: 18px;
	width: 38px;
	height: 38px;
	border: 0;
	border-radius: 50%;
	background: var(--ub-bg);
	color: var(--ub-navy);
	font-size: 18px;
	line-height: 1;
	cursor: pointer;
}

.ub-mobile__logo { margin-bottom: 26px; }
.ub-mobile__logo img { max-height: 64px; aspect-ratio: 1 / 1; object-fit: cover; border-radius: 50%; }

.ub-mobile__list { list-style: none; margin: 0 0 26px; padding: 0; }
.ub-mobile__list li { border-bottom: 1px solid var(--ub-line); }
.ub-mobile__list a {
	display: block;
	padding: 13px 0;
	font-size: 14px;
	font-weight: 700;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--ub-navy);
}
.ub-mobile__list ul { list-style: none; margin: 0 0 10px; padding: 0 0 0 14px; }
.ub-mobile__list ul li { border: 0; }
.ub-mobile__list ul a {
	padding: 8px 0;
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0;
	text-transform: none;
	color: var(--ub-body);
}

.ub-mobile__contact { list-style: none; margin: 0 0 20px; padding: 0; font-size: 14px; }
.ub-mobile__contact li { display: flex; gap: 10px; padding: 6px 0; color: var(--ub-body); }
.ub-mobile__contact i { color: var(--ub-orange); margin-top: 6px; }
.ub-mobile__contact a { color: var(--ub-body); }

/* --------------------------------------------------------------------------
   Hero — tam boy arka plan görseli
   -------------------------------------------------------------------------- */

.ub-hero {
	position: relative;
	background: var(--ub-navy-deep);
	overflow: hidden;
}

.ub-hero__slide[hidden] { display: none !important; }

.ub-hero__slide {
	position: relative;
	display: flex;
	align-items: center;
	/* ekranın menü altında kalan kısmını tam doldurur; böylece "Kulübümüz"
	   ancak aşağı kaydırınca görünür */
	min-height: max(520px, calc(100vh - var(--ub-ust)));
	min-height: max(520px, calc(100svh - var(--ub-ust)));
	overflow: hidden;
}

/* tam boy fotoğraf — CSS arka planı yerine gerçek <img> (LCP için daha iyi) */
.ub-hero .ub-hero__foto {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
	z-index: 0;
}

/* metnin okunabilmesi için soldan sağa açılan koyu perde */
.ub-hero__perde {
	position: absolute;
	inset: 0;
	/* Yalnızca metnin oturduğu sol tarafı koyulaştırır; sağ taraf açık kalır ki
	   arka plan fotoğrafı görünsün. */
	background:
		linear-gradient(90deg,
			rgba(8, 15, 38, .92) 0%,
			rgba(8, 15, 38, .78) 30%,
			rgba(8, 15, 38, .42) 55%,
			rgba(8, 15, 38, .12) 80%,
			rgba(8, 15, 38, .05) 100%),
		linear-gradient(180deg, rgba(8, 15, 38, .28) 0%, rgba(8, 15, 38, 0) 35%);
}

.ub-hero__perde { z-index: 1; }

.ub-hero .ub-container { position: relative; z-index: 2; width: 100%; }

.ub-hero__content { max-width: 620px; padding: 60px 0 104px; }

.ub-hero__title {
	font-family: var(--ub-display);
	font-weight: 700;
	font-size: clamp(38px, 5.4vw, 74px);
	line-height: .98;
	letter-spacing: .01em;
	text-transform: uppercase;
	color: #fff;
	margin: 0 0 20px;
	text-shadow: 0 6px 30px rgba(0, 0, 0, .35);
}
.ub-hero__title .ub-hl { color: var(--ub-orange); display: block; }

.ub-hero__text {
	font-size: 16.5px;
	line-height: 1.8;
	color: rgba(255, 255, 255, .88);
	margin: 0 0 30px;
	max-width: 470px;
}

.ub-hero__actions { display: flex; flex-wrap: wrap; gap: 14px; }

/* cam görünümlü ikincil buton (koyu zemine uygun) */
.ub-btn--cam {
	background: rgba(255, 255, 255, .12);
	color: #fff;
	border-color: rgba(255, 255, 255, .55);
	backdrop-filter: blur(4px);
}
.ub-btn--cam:hover { background: #fff; color: var(--ub-navy); border-color: #fff; }

/* oklar altta, ortada */
.ub-hero__ok {
	position: absolute;
	bottom: 30px;
	z-index: 5;
	width: 50px;
	height: 50px;
	border: 1px solid rgba(255, 255, 255, .45);
	border-radius: 50%;
	background: rgba(10, 18, 44, .35);
	color: #fff;
	font-size: 17px;
	line-height: 1;
	cursor: pointer;
	backdrop-filter: blur(4px);
	transition: background .25s ease, border-color .25s ease;
}
.ub-hero__ok:hover { background: var(--ub-orange); border-color: var(--ub-orange); }
.ub-hero__ok--sol { left: calc(50% - 58px); }
.ub-hero__ok--sag { right: calc(50% - 58px); }

/* --------------------------------------------------------------------------
   İstatistik şeridi
   -------------------------------------------------------------------------- */

.ub-stats { padding: 8px 0 28px; }   /* haberler ile galeri arasında — üst/alt boşluk dengeli */

.ub-stats__grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 18px;
}

.ub-stat {
	display: flex;
	align-items: center;
	gap: 16px;
	padding: 22px 24px;
	background: var(--ub-card);
	border: 1px solid var(--ub-line);
	border-radius: var(--ub-radius);
	box-shadow: var(--ub-shadow);
	transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.ub-stat:hover { transform: translateY(-4px); border-color: rgba(245, 130, 43, .5); box-shadow: var(--ub-shadow-lg); }

.ub-stat__icon {
	flex-shrink: 0;
	width: 46px;
	height: 46px;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 26px;
	color: var(--ub-orange);
}

.ub-stat__num {
	font-family: var(--ub-display);
	font-size: 30px;
	font-weight: 700;
	line-height: 1;
	color: var(--ub-navy);
	margin: 0 0 4px;
}

.ub-stat__label {
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--ub-muted);
	margin: 0;
}

/* --------------------------------------------------------------------------
   Kulübümüz (hakkımızda)
   -------------------------------------------------------------------------- */

.ub-about__grid {
	display: grid;
	grid-template-columns: 1fr 1.1fr;
	align-items: center;
	gap: 56px;
}

.ub-about__text p {
	font-size: 15.5px;
	line-height: 1.9;
	color: var(--ub-body);
	margin: 0 0 18px;
}

.ub-about__title { margin-bottom: 20px; }

.ub-about__list { list-style: none; margin: 0 0 26px; padding: 0; }
.ub-about__list li {
	display: flex;
	align-items: flex-start;
	gap: 11px;
	font-size: 15px;
	color: var(--ub-body);
	margin-bottom: 9px;
}
.ub-about__list i { color: var(--ub-orange); font-size: 16px; margin-top: 5px; flex-shrink: 0; }

/* dört kare karo — düz, döndürmesiz */
.ub-karo {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 14px;
}

.ub-karo__item {
	position: relative;
	aspect-ratio: 1 / 1;
	overflow: hidden;
	border-radius: 14px;
	background: var(--ub-bg);
	box-shadow: var(--ub-shadow);
}
.ub-karo__item img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform .6s ease;
}
.ub-karo__item:hover img { transform: scale(1.06); }

/* --------------------------------------------------------------------------
   Maçlar (fikstür)
   -------------------------------------------------------------------------- */

.ub-fixtures { background: var(--ub-bg); }

.ub-fixtures__grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 20px;
}

.ub-match {
	background: var(--ub-card);
	border: 1px solid var(--ub-line);
	border-radius: var(--ub-radius);
	overflow: hidden;
	transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.ub-match:hover { transform: translateY(-4px); box-shadow: var(--ub-shadow-lg); border-color: rgba(22, 37, 92, .25); }

.ub-match__head {
	padding: 16px 18px 12px;
	text-align: center;
	border-bottom: 1px solid var(--ub-line);
}

.ub-match__date {
	display: block;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--ub-body);
	margin-bottom: 4px;
}

.ub-match__league {
	display: block;
	font-family: var(--ub-display);
	font-size: 17px;
	font-weight: 700;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--ub-navy);
}

.ub-match__body {
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	align-items: center;
	gap: 10px;
	padding: 24px 16px;
}

.ub-match__team { text-align: center; }

.ub-match__logo {
	width: 54px;
	height: 54px;
	margin: 0 auto 10px;
	object-fit: contain;
}

.ub-match__logo--ph {
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	background: var(--ub-bg);
	color: var(--ub-navy);
	font-family: var(--ub-display);
	font-size: 20px;
	font-weight: 700;
}

.ub-match__name {
	font-size: 12px;
	font-weight: 800;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--ub-navy);
	margin: 0;
	line-height: 1.4;
}

.ub-match__vs {
	font-family: var(--ub-display);
	font-size: 16px;
	font-weight: 700;
	letter-spacing: .06em;
	color: var(--ub-muted);
}

.ub-match__score {
	font-family: var(--ub-display);
	font-size: 26px;
	font-weight: 700;
	color: var(--ub-orange);
	white-space: nowrap;
}

.ub-match__foot {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 7px;
	padding: 12px 16px;
	border-top: 1px solid var(--ub-line);
	background: #FBFCFE;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--ub-muted);
}
.ub-match__foot i { color: var(--ub-orange); }

/* fikstür kaydırma okları */
.ub-fixtures__nav { display: flex; justify-content: flex-end; gap: 10px; margin-top: 22px; }

/* --------------------------------------------------------------------------
   CTA bandı
   -------------------------------------------------------------------------- */

.ub-cta {
	position: relative;
	overflow: hidden;
	background: linear-gradient(100deg, var(--ub-orange) 0%, var(--ub-orange-2) 100%);
}

.ub-cta__inner {
	position: relative;
	z-index: 2;
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 18px;
	padding: 18px 0;
}

.ub-cta__title {
	font-family: var(--ub-display);
	font-size: clamp(20px, 2.1vw, 27px);
	font-weight: 700;
	line-height: 1.1;
	letter-spacing: .01em;
	text-transform: uppercase;
	color: #fff;
	margin: 0 0 4px;
}

.ub-cta__text { color: rgba(255, 255, 255, .92); font-size: 13.5px; line-height: 1.5; margin: 0; }

/* logo + buton grubu — diğer bölümlerdeki "Tüm Haberler" bağlantısıyla aynı sağ hizada */
.ub-cta__sag {
	display: flex;
	align-items: center;
	gap: 18px;
	flex-shrink: 0;
}

.ub-cta__logo {
	width: 64px;
	height: 64px;
	object-fit: cover;
	border-radius: 50%;
	flex-shrink: 0;
	pointer-events: none;
}

/* --------------------------------------------------------------------------
   Haberler + Galeri
   -------------------------------------------------------------------------- */

.ub-news__grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 46px;
}

.ub-post {
	display: grid;
	grid-template-columns: 150px 1fr;
	gap: 16px;
	align-items: stretch;
	background: var(--ub-card);
	border: 1px solid var(--ub-line);
	border-radius: var(--ub-radius);
	overflow: hidden;
	margin-bottom: 16px;
	transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.ub-post:hover { transform: translateY(-3px); box-shadow: var(--ub-shadow-lg); border-color: rgba(22, 37, 92, .2); }

.ub-post__thumb { display: block; overflow: hidden; min-height: 118px; background: var(--ub-bg); }
.ub-post__thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s ease; }
.ub-post:hover .ub-post__thumb img { transform: scale(1.07); }

.ub-post__body { padding: 16px 18px 16px 0; display: flex; flex-direction: column; justify-content: center; }

.ub-post__date {
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--ub-orange);
	margin: 0 0 6px;
}

.ub-post__title {
	font-size: 16px;
	font-weight: 800;
	line-height: 1.4;
	color: var(--ub-navy);
	margin: 0 0 8px;
}
.ub-post__title a { color: inherit; transition: color .2s ease; }
.ub-post__title a:hover { color: var(--ub-orange); }

.ub-post__link {
	font-size: 11px;
	font-weight: 800;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--ub-orange);
}
.ub-post__link i { margin-left: 5px; font-size: 10px; }

/* galeri ızgarası */
.ub-gallery {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 12px;
}

/* galeri sayfası: geniş ekranda 4 sütun */
.ub-gallery--4 { grid-template-columns: repeat(4, 1fr); }
.ub-gallery--5 { grid-template-columns: repeat(5, 1fr); }

.ub-gallery__item {
	position: relative;
	display: block;
	aspect-ratio: 4 / 3;
	overflow: hidden;
	border-radius: 10px;
	background: var(--ub-bg);
}
.ub-gallery__item img { width: 100%; height: 100%; object-fit: cover; transition: transform .55s ease; }
.ub-gallery__item:hover img { transform: scale(1.09); }

.ub-gallery__item::after {
	content: "";
	position: absolute;
	inset: 0;
	background: rgba(22, 37, 92, .35);
	opacity: 0;
	transition: opacity .3s ease;
}
.ub-gallery__item:hover::after { opacity: 1; }

/* --------------------------------------------------------------------------
   Sponsorlar
   -------------------------------------------------------------------------- */

.ub-sponsors { border-top: 1px solid var(--ub-line); background: #fff; }

.ub-sponsors__row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 30px;
	padding: 34px 0;
}

.ub-sponsors__item {
	flex: 1 1 150px;
	display: flex;
	align-items: center;
	justify-content: center;
}
.ub-sponsors__item img {
	max-height: 46px;
	width: auto;
	filter: grayscale(1);
	opacity: .55;
	transition: filter .3s ease, opacity .3s ease;
}
.ub-sponsors__item:hover img { filter: grayscale(0); opacity: 1; }

/* --------------------------------------------------------------------------
   Footer
   -------------------------------------------------------------------------- */

.ub-footer {
	background: var(--ub-navy);
	color: rgba(255, 255, 255, .72);
	padding: 60px 0 0;
}

.ub-footer__grid {
	display: grid;
	grid-template-columns: 1.6fr 1fr 1fr 1fr 1.3fr;
	gap: 36px;
	padding-bottom: 44px;
}

.ub-footer__logo { margin-bottom: 18px; }
.ub-footer__logo img { max-height: 120px; width: auto; aspect-ratio: 1 / 1; object-fit: cover; border-radius: 50%; }

.ub-footer__about { font-size: 14px; line-height: 1.8; margin: 0 0 20px; color: rgba(255, 255, 255, .68); }

.ub-footer__title {
	font-family: var(--ub-display);
	font-size: 16px;
	font-weight: 700;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: #fff;
	margin: 0 0 18px;
}

.ub-footer__list { list-style: none; margin: 0; padding: 0; }
.ub-footer__list li { margin-bottom: 10px; }
.ub-footer__list a {
	font-size: 14px;
	color: rgba(255, 255, 255, .68);
	transition: color .2s ease, padding-left .2s ease;
}
.ub-footer__list a:hover { color: var(--ub-orange); padding-left: 5px; }

.ub-footer__contact { list-style: none; margin: 0; padding: 0; font-size: 14px; line-height: 1.7; }
.ub-footer__contact li { display: flex; gap: 10px; margin-bottom: 12px; color: rgba(255, 255, 255, .68); }
.ub-footer__contact i { color: var(--ub-orange); margin-top: 6px; flex-shrink: 0; }
.ub-footer__contact a { color: rgba(255, 255, 255, .68); transition: color .2s ease; }
.ub-footer__contact a:hover { color: var(--ub-orange); }

.ub-social { display: flex; gap: 10px; list-style: none; margin: 0; padding: 0; }
.ub-social a {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	border-radius: 8px;
	background: rgba(255, 255, 255, .09);
	color: #fff;
	font-size: 14px;
	transition: background .2s ease, transform .2s ease;
}
.ub-social a:hover { background: var(--ub-orange); transform: translateY(-3px); }

.ub-footer__bottom {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 18px;
	padding: 20px 0;
	border-top: 1px solid rgba(255, 255, 255, .12);
	font-size: 13px;
	color: rgba(255, 255, 255, .55);
}
.ub-footer__bottom a { color: rgba(255, 255, 255, .7); }
.ub-footer__bottom a:hover { color: var(--ub-orange); }

.ub-totop {
	width: 38px;
	height: 38px;
	border: 0;
	border-radius: 10px;
	background: rgba(255, 255, 255, .12);
	color: #fff;
	cursor: pointer;
	transition: background .2s ease, transform .2s ease;
}
.ub-totop:hover { background: var(--ub-orange); transform: translateY(-3px); }

/* --------------------------------------------------------------------------
   İç sayfalar
   -------------------------------------------------------------------------- */

.ub-page-hero {
	position: relative;
	padding: 14px 0;
	background: var(--ub-navy);
	background-size: cover;
	background-position: center;
	color: #fff;
	text-align: center;
}
.ub-page-hero::before {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(15, 27, 68, .82) 0%, rgba(22, 37, 92, .92) 100%);
}
.ub-page-hero .ub-container { position: relative; z-index: 2; }

.ub-page-hero__title {
	font-family: var(--ub-display);
	font-size: clamp(23px, 2.4vw, 28px);
	font-weight: 700;
	line-height: 1.12;
	letter-spacing: .02em;
	text-transform: uppercase;
	color: #fff;
	margin: 0 0 2px;
}

.ub-crumb { display: flex; justify-content: center; gap: 8px; flex-wrap: wrap; font-size: 12px; line-height: 1.35; }
.ub-crumb a { color: rgba(255, 255, 255, .7); }
.ub-crumb a:hover { color: var(--ub-orange); }
.ub-crumb span { color: var(--ub-orange); }

/* kart ızgarası (takımlar, ekip, sponsorlar) */
.ub-cards {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 22px;
}
.ub-cards--4 { grid-template-columns: repeat(4, 1fr); }

.ub-card {
	background: var(--ub-card);
	border: 1px solid var(--ub-line);
	border-radius: var(--ub-radius);
	overflow: hidden;
	transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.ub-card:hover { transform: translateY(-5px); box-shadow: var(--ub-shadow-lg); border-color: rgba(22, 37, 92, .2); }

.ub-card__thumb { display: block; aspect-ratio: 4 / 3; overflow: hidden; background: var(--ub-bg); }
.ub-card__thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s ease; }
.ub-card:hover .ub-card__thumb img { transform: scale(1.06); }

.ub-card__body { padding: 20px 22px 24px; }

.ub-card__title {
	font-size: 17px;
	font-weight: 800;
	line-height: 1.35;
	color: var(--ub-navy);
	margin: 0 0 8px;
}
.ub-card__title a { color: inherit; transition: color .2s ease; }
.ub-card__title a:hover { color: var(--ub-orange); }

.ub-card__text { font-size: 14.5px; line-height: 1.75; color: var(--ub-body); margin: 0 0 14px; }

.ub-card__meta {
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--ub-muted);
	margin: 0 0 8px;
}

/* içerik gövdesi (sayfa/haber detay) */
.ub-prose { font-size: 16px; line-height: 1.9; color: var(--ub-body); }
.ub-prose h1, .ub-prose h2, .ub-prose h3, .ub-prose h4, .ub-prose h5 {
	font-family: var(--ub-display);
	font-weight: 700;
	letter-spacing: .01em;
	color: var(--ub-navy);
	margin: 28px 0 14px;
	line-height: 1.2;
}
.ub-prose h2 { font-size: 28px; }
.ub-prose h3 { font-size: 23px; }
.ub-prose h4 { font-size: 20px; }
.ub-prose p { margin: 0 0 16px; }
.ub-prose img { border-radius: var(--ub-radius); margin: 12px 0; }
.ub-prose ul, .ub-prose ol { margin: 0 0 18px; padding-left: 22px; }
.ub-prose li { margin-bottom: 8px; }
.ub-prose a { color: var(--ub-orange); text-decoration: underline; }
.ub-prose table { width: 100%; border-collapse: collapse; margin: 0 0 20px; }
.ub-prose th, .ub-prose td { border: 1px solid var(--ub-line); padding: 10px 12px; }
.ub-prose th { background: var(--ub-bg); color: var(--ub-navy); font-weight: 700; }

.ub-figure { border-radius: var(--ub-radius-lg); overflow: hidden; margin-bottom: 26px; box-shadow: var(--ub-shadow); }
.ub-figure img { width: 100%; display: block; }

/* yan sütun */
.ub-layout { display: grid; grid-template-columns: 1fr 330px; gap: 42px; align-items: start; }
/* iki eşit sütun (iletişim sayfası: form + harita) */
.ub-layout--esit { grid-template-columns: 1fr 1fr; }

.ub-widget {
	background: var(--ub-card);
	border: 1px solid var(--ub-line);
	border-radius: var(--ub-radius);
	padding: 24px 22px;
	margin-bottom: 22px;
}
.ub-widget__title {
	font-family: var(--ub-display);
	font-size: 18px;
	font-weight: 700;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--ub-navy);
	margin: 0 0 16px;
	padding-bottom: 12px;
	border-bottom: 1px solid var(--ub-line);
}
.ub-widget__list { list-style: none; margin: 0; padding: 0; }
.ub-widget__list li { border-bottom: 1px solid var(--ub-line); }
.ub-widget__list li:last-child { border-bottom: 0; }
.ub-widget__list a {
	display: block;
	padding: 10px 0;
	font-size: 14.5px;
	font-weight: 600;
	color: var(--ub-navy);
	transition: color .2s ease, padding-left .2s ease;
}
.ub-widget__list a:hover { color: var(--ub-orange); padding-left: 6px; }

/* S.S.S akordeon */
.ub-faq { border: 1px solid var(--ub-line); border-radius: var(--ub-radius); overflow: hidden; background: #fff; }
.ub-faq__item + .ub-faq__item { border-top: 1px solid var(--ub-line); }
.ub-faq__q {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	width: 100%;
	padding: 18px 22px;
	background: none;
	border: 0;
	text-align: left;
	font-size: 16px;
	font-weight: 700;
	color: var(--ub-navy);
	cursor: pointer;
}
.ub-faq__q i { color: var(--ub-orange); transition: transform .25s ease; flex-shrink: 0; }
.ub-faq__item.is-open .ub-faq__q i { transform: rotate(45deg); }
.ub-faq__a { display: none; padding: 0 22px 20px; font-size: 15px; line-height: 1.85; color: var(--ub-body); }
.ub-faq__item.is-open .ub-faq__a { display: block; }

/* formlar */
.ub-form { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.ub-form .ub-full { grid-column: 1 / -1; }
.ub-form label {
	display: block;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--ub-navy);
	margin-bottom: 7px;
}
.ub-form input,
.ub-form textarea,
.ub-form select {
	width: 100%;
	padding: 13px 15px;
	background: #fff;
	border: 1px solid var(--ub-line);
	border-radius: 9px;
	font-family: var(--ub-font);
	font-size: 15px;
	color: var(--ub-ink);
	transition: border-color .2s ease, box-shadow .2s ease;
}
.ub-form input:focus,
.ub-form textarea:focus,
.ub-form select:focus {
	outline: 0;
	border-color: var(--ub-orange);
	box-shadow: 0 0 0 3px rgba(245, 130, 43, .14);
}
.ub-form textarea { min-height: 150px; resize: vertical; }

.ub-alert {
	padding: 13px 18px;
	border-radius: 9px;
	font-size: 14.5px;
	font-weight: 600;
	margin-bottom: 18px;
}
.ub-alert--ok { background: #E9F7EF; color: #1B7A46; border: 1px solid #BFE6D0; }

.ub-form-not { margin: 10px 0 0; font-size: 13.5px; font-weight: 600; color: #C42F2F; }
.g-recaptcha { margin-top: 4px; }
.g-recaptcha > div { max-width: 100%; }
.ub-alert--err { background: #FDECEC; color: #A32828; border: 1px solid #F5C6C6; }

/* iletişim bilgi kartları */
.ub-info { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-bottom: 34px; }
.ub-info__item {
	display: flex;
	gap: 15px;
	padding: 22px;
	background: var(--ub-card);
	border: 1px solid var(--ub-line);
	border-radius: var(--ub-radius);
}
.ub-info__icon {
	flex-shrink: 0;
	width: 46px;
	height: 46px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 11px;
	background: rgba(245, 130, 43, .12);
	color: var(--ub-orange);
	font-size: 19px;
}
.ub-info__label {
	font-size: 11px;
	font-weight: 800;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--ub-muted);
	margin: 0 0 4px;
}
.ub-info__value { font-size: 15px; font-weight: 600; color: var(--ub-navy); margin: 0; line-height: 1.6; }
.ub-info__value a { color: inherit; }
.ub-info__value a:hover { color: var(--ub-orange); }

.ub-map { border-radius: var(--ub-radius); overflow: hidden; border: 1px solid var(--ub-line); line-height: 0; }
.ub-map iframe { width: 100%; height: 420px; border: 0; display: block; }

.ub-empty {
	padding: 46px 24px;
	text-align: center;
	color: var(--ub-muted);
	background: var(--ub-card);
	border: 1px dashed var(--ub-line);
	border-radius: var(--ub-radius);
}

/* sayfa sağındaki hızlı erişim ikonları */
.ub-hizli {
	position: fixed;
	right: 16px;
	bottom: 22%;
	z-index: 990;
	display: flex;
	flex-direction: column;
	gap: 10px;
}
@supports (right: env(safe-area-inset-right)) {
	.ub-hizli { right: calc(16px + env(safe-area-inset-right)); }
}

.ub-hizli__link {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 46px;
	height: 46px;
	border-radius: 50%;
	color: #fff;
	font-size: 20px;
	box-shadow: 0 6px 18px rgba(0, 0, 0, .22);
	transition: transform .25s ease, filter .25s ease;
}
.ub-hizli__link:hover { transform: scale(1.09); color: #fff; filter: brightness(1.08); }

.ub-hizli--tel { background: var(--ub-navy); }
.ub-hizli--wa  { background: #25D366; }
.ub-hizli--fb  { background: #1877F2; }
.ub-hizli--ig  { background: linear-gradient(45deg, #F09433 0%, #DC2743 50%, #BC1888 100%); }

/* --------------------------------------------------------------------------
   Responsive
   -------------------------------------------------------------------------- */

@media (max-width: 1199px) {
	.ub-footer__grid { grid-template-columns: 1fr 1fr 1fr; }
	.ub-stats__grid { grid-template-columns: repeat(2, 1fr); }
	.ub-hero__title { font-size: clamp(38px, 6vw, 56px); }
}

@media (max-width: 991px) {
	.ub-nav, .ub-header__cta { display: none; }
	.ub-burger { display: flex; }

	.ub-topbar { font-size: 12px; }
	.ub-topbar__inner { justify-content: center; gap: 10px 16px; padding: 8px 0; }
	.ub-header__inner { min-height: 104px; }
	.ub-logo img { max-height: 84px; }

	.ub-hero__slide { min-height: 480px; }   /* tam ekran değil — fotoğraf alanı kadar */
	.ub-hero__perde { background: linear-gradient(180deg, rgba(10,18,44,.45) 0%, rgba(10,18,44,.78) 100%); }
	.ub-hero__content { padding: 30px 0 60px; max-width: none; }
	.ub-hero__ok { width: 38px; height: 38px; bottom: 12px; }
	.ub-hero__ok--sol { left: calc(50% - 46px); }
	.ub-hero__ok--sag { right: calc(50% - 46px); }

	.ub-karo { grid-template-columns: repeat(2, 1fr); }
	.ub-hizli { bottom: 16%; }
	.ub-hizli__link { width: 42px; height: 42px; font-size: 18px; }

	.ub-section { padding: 52px 0; }
	.ub-hero__slide { grid-template-columns: 1fr; min-height: auto; padding: 44px 0 90px; }
	.ub-hero__media { min-height: 300px; order: 2; }
	.ub-hero__img { background-position: center; }
	.ub-hero__content { order: 1; max-width: none; }
	.ub-hero__nav { right: 50%; transform: translateX(50%); bottom: 26px; }

	.ub-about__grid { grid-template-columns: 1fr; gap: 36px; }

	.ub-fixtures__grid { grid-template-columns: 1fr; }
	.ub-news__grid { grid-template-columns: 1fr; gap: 42px; }
	.ub-cards, .ub-cards--4 { grid-template-columns: repeat(2, 1fr); }
	.ub-gallery--4 { grid-template-columns: repeat(3, 1fr); }
	.ub-gallery--5 { grid-template-columns: repeat(3, 1fr); }
	.ub-layout,
	.ub-layout--esit { grid-template-columns: 1fr; }
	.ub-info { grid-template-columns: 1fr; }
	.ub-cta__inner { padding: 22px 0; }
}

@media (max-width: 767px) {

	/* dar ekranda telefon yerine kulüp adı yazar; arama için yüzen ikonlar var */
	.ub-topbar__sag a[href^="tel:"] { display: none; }
	.ub-topbar__marka { font-size: 11.5px; letter-spacing: .04em; }
	.ub-topbar__inner { min-height: 34px; }
	.ub-header__inner { min-height: 88px; }
	.ub-logo img { max-height: 72px; }
	.ub-hero__slide { min-height: 430px; }   /* fotoğraf alanı; altındaki Kulübümüz kaydırmadan görünsün */
	/* butonlar yan yana ve daha küçük — tam genişlik blok gibi durmasın */
	.ub-hero__content { padding: 18px 0 46px; }
	.ub-hero__title { font-size: clamp(23px, 6.6vw, 29px); margin-bottom: 10px; line-height: 1.04; }
	.ub-hero__text { font-size: 13px; line-height: 1.6; margin-bottom: 16px; }
	.ub-hero__actions { gap: 10px; }
	.ub-hero__actions .ub-btn { flex: 0 0 auto; padding: 11px 18px; font-size: 11px; letter-spacing: .08em; }
	.ub-cta__logo { width: 52px; height: 52px; }
	.ub-cta__sag { gap: 12px; }
	.ub-hizli { bottom: 11%; }
	.ub-container { padding: 0 18px; }
	.ub-section { padding: 44px 0; }

	.ub-section-head { flex-direction: column; align-items: flex-start; gap: 12px; margin-bottom: 24px; }

	.ub-stats__grid { grid-template-columns: 1fr; gap: 12px; }
	.ub-stat { padding: 16px 18px; }

	/* mockup'taki mobil maç kartı: koyu başlık şeridi */
	.ub-match__head { background: var(--ub-navy); border-bottom: 0; }
	.ub-match__date { color: rgba(255, 255, 255, .8); }
	.ub-match__league { color: #fff; }

	.ub-gallery,
	.ub-gallery--4,
	.ub-gallery--5 { grid-template-columns: repeat(2, 1fr); }
	.ub-cards, .ub-cards--4 { grid-template-columns: 1fr; }
	.ub-post { grid-template-columns: 110px 1fr; }
	.ub-post__body { padding: 12px 14px 12px 0; }
	.ub-post__title { font-size: 14.5px; }

	.ub-form { grid-template-columns: 1fr; }
	.ub-footer__grid { grid-template-columns: 1fr 1fr; gap: 28px; }
	.ub-footer__bottom { flex-direction: column; text-align: center; }
	.ub-sponsors__row { gap: 22px; }
	.ub-sponsors__item { flex-basis: 40%; }
	.ub-map iframe { height: 320px; }
}

@media (max-width: 479px) {
	/* çok dar ekranda üst şerit tek satırda kalsın */
	.ub-topbar__inner { gap: 6px 12px; }
	.ub-topbar__marka { font-size: 10px; letter-spacing: .01em; }
	.ub-topbar__sag { gap: 12px; }
	.ub-footer__grid { grid-template-columns: 1fr; }
	.ub-hero__actions .ub-btn { padding: 11px 16px; font-size: 11px; }
}