/* ==========================================================================
   Tema: BORDO KULÜP — seçkin atletik kulüp. Stitch: Tasarim/Stitch/kulup.png
   Güç temasının kardeşi: derin bordo #6E0F1A ve siyah #0E0E0E, kırık beyaz #F5F1EC bölümler, kızıl #C1121F, ince turuncu-altın #E07A2F.
   Anton dev büyük harf + Archivo. 2px köşe, kontur rakamlar, bordo isim plakaları.
   Border yok (kontur rakam metin efektidir), çok hafif gölge.
   ========================================================================== */
:root {
    --bg: #f5f1ec; --bg2: #ece5dc; --card: #ffffff; --ink: #141414; --muted: #5f5852;
    --accent: #c1121f; --accent2: #9e0e19; --on-accent: #fff; --soft: #f3dcdc; --field: #fff;
    --r: 2px; --r-sm: 2px;
    --sh: 0 6px 24px rgba(20,20,20,.08); --sh-lg: 0 24px 60px rgba(0,0,0,.3);
    --fh: 'Anton', 'Arial Narrow', sans-serif; --fb: 'Archivo', system-ui, sans-serif; --w: 1260px;
    --kb-bordo: #6e0f1a; --kb-bordo2: #4f0a13; --kb-siyah: #0e0e0e; --kb-altin: #e07a2f;
}
.kb h1, .kb h2, .kb h3 { font-family: var(--fh); font-weight: 400; text-transform: uppercase; letter-spacing: .005em; }
.kb .ic-btn { border-radius: 2px; }

.kb-btn { display: inline-flex; white-space: nowrap; align-items: center; justify-content: center; gap: 10px; padding: 16px 28px; border: 0; border-radius: 2px; background: var(--accent); color: #fff; font: 700 15px var(--fb); letter-spacing: .1em; text-transform: uppercase; cursor: pointer; transition: background .2s, transform .2s; }
.kb-btn:hover { background: var(--accent2); transform: translateY(-2px); }
.kb-btn--siyah { background: var(--kb-siyah); }
.kb-btn--siyah:hover { background: #262626; }
.kb-btn--kucuk { padding: 11px 18px; font-size: 14px; }
.kb-btn .material-symbols-outlined { font-size: 20px; }
.kb-etiket { display: inline-block; padding: 5px 12px; background: var(--kb-altin); color: #fff; font: 700 14px var(--fb); letter-spacing: .14em; text-transform: uppercase; }
.kb-ust-yazi { font: 700 14px var(--fb); letter-spacing: .18em; text-transform: uppercase; color: var(--kb-altin); }
.kb-mini { display: inline-block; padding: 3px 10px; background: var(--accent); color: #fff; font: 700 14px var(--fb); letter-spacing: .06em; text-transform: uppercase; }

/* Üst — siyah */
.kb-ust { position: sticky; top: 0; z-index: 900; background: var(--kb-siyah); transition: box-shadow .2s; }
.kb-ust.kaydi { box-shadow: 0 2px 24px rgba(0,0,0,.5); }
.kb-ust-ic { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding-top: 16px; padding-bottom: 16px; }
.kb-logo img { max-height: 46px; width: auto; }
.kb-logo span { font: 400 24px var(--fh); text-transform: uppercase; color: #f5f1ec; white-space: nowrap; }
.kb-menu { display: flex; gap: 30px; }
.kb-menu a { font: 700 14px var(--fb); letter-spacing: .14em; text-transform: uppercase; color: #cfc8c0; transition: color .2s; }
.kb-menu a:hover, .kb-menu a.on { color: #fff; }
.kb-menu a.on { box-shadow: inset 0 -2px 0 var(--accent); padding-bottom: 4px; }
.kb-menu-tel { display: none !important; }
.kb-ust-sag { display: flex; align-items: center; gap: 16px; }
.kb-tel { display: inline-flex; align-items: center; gap: 6px; color: #f5f1ec; font-weight: 600; white-space: nowrap; }
.kb-tel .material-symbols-outlined { font-size: 18px; color: var(--kb-altin); }
.kb-hamburger { display: none; width: 46px; height: 46px; border: 0; background: #222; color: #fff; cursor: pointer; }

/* Hero — tam ekran fotoğraf, bordo-siyah karartma */
.kb-hero { position: relative; height: calc(100vh - 78px); min-height: 620px; max-height: 920px; overflow: hidden; background: var(--kb-siyah); color: #f5f1ec; }
.kb-hero-foto { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; clip-path: inset(100% 0 0 0); transform: scale(1.08); transition: clip-path 1.1s cubic-bezier(.77,0,.18,1); }
.kb-hero-foto.aktif { clip-path: inset(0 0 0 0); z-index: 1; animation: kb-zoom calc(var(--sure, 6500ms) + 1500ms) ease-out forwards; }
.kb-hero-foto.onceki { clip-path: inset(0 0 0 0); z-index: 0; }
@keyframes kb-zoom { from { transform: scale(1.08); } to { transform: scale(1); } }
.kb-hero::after { content: ""; position: absolute; inset: 0; z-index: 2; background: linear-gradient(90deg, rgba(78,10,19,.94) 0%, rgba(110,15,26,.72) 38%, rgba(14,14,14,.25) 75%, rgba(14,14,14,.1) 100%), linear-gradient(0deg, rgba(14,14,14,.75) 0%, transparent 35%); pointer-events: none; }
.kb-hero-ic { position: relative; z-index: 3; height: 100%; display: flex; align-items: center; }
.kb-hero-metinler { display: grid; max-width: 760px; }
.kb-slayt { grid-area: 1 / 1; opacity: 0; visibility: hidden; transition: opacity .5s, visibility 0s .5s; }
.kb-slayt.aktif { opacity: 1; visibility: visible; transition: opacity .5s; }
.kb-hero-btn { grid-area: auto; }
.kb-hero h1, .kb-hero .kb-h1 { font-size: clamp(60px, 8vw, 124px); line-height: .92; margin: 22px 0 20px; color: #fff; }
.kb-hero h1 em, .kb-hero .kb-h1 em { font-style: normal; display: block; color: #f0c8b8; }
.kb-slayt h1, .kb-slayt .kb-h1 { clip-path: inset(0 0 100% 0); transition: clip-path 1s cubic-bezier(.77,0,.18,1) .2s; }
.kb-slayt.aktif h1, .kb-slayt.aktif .kb-h1 { clip-path: inset(0 0 0 0); }
.kb-slayt p { max-width: 520px; color: #ecdcd8; font-size: 18px; margin: 0; opacity: 0; transition: opacity .8s .7s; }
.kb-slayt.aktif p { opacity: 1; }
.kb-hero-btn { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 32px; }
.kb-btn--cam { background: rgba(255,255,255,.12); backdrop-filter: blur(6px); }
.kb-btn--cam:hover { background: rgba(255,255,255,.22); }
.kb-sayac { position: absolute; z-index: 3; left: 0; right: 0; bottom: 34px; display: flex; align-items: center; gap: 10px; font: 400 18px var(--fh); color: #ecdcd8; }
.kb-sayac b { font-weight: 400; font-size: 30px; color: #fff; }
.kb-noktalar { display: flex; gap: 6px; margin-left: 14px; }
.kb-noktalar button { width: 40px; height: 3px; padding: 0; border: 0; background: rgba(255,255,255,.3); cursor: pointer; transition: background .3s; }
.kb-noktalar button.aktif { background: var(--kb-altin); }

/* Rakamlar — siyah */
.kb-rakamlar { background: var(--kb-siyah); color: #cfc8c0; padding: 90px 0; }
.kb-rakam-izgara { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.kb-rakam-izgara > div { padding: 30px; background: #191919; }
.kb-rakam-izgara b { display: block; font: 400 clamp(60px, 7vw, 92px) var(--fh); line-height: 1; color: transparent; -webkit-text-stroke: 2px #f5f1ec; }
.kb-rakam-izgara span { display: block; margin: 14px 0 8px; font: 700 14px var(--fb); letter-spacing: .14em; text-transform: uppercase; color: var(--kb-altin); }
.kb-rakam-izgara p { margin: 0; font-size: 15px; }

/* Bölümler */
.kb-bolum { padding: 110px 0; }
.kb-bolum--krem { background: var(--bg); }
.kb-bolum--kum { background: var(--bg2); }
.kb-bolum--bordo { background: var(--kb-bordo); color: #f5f1ec; }
.kb-bolum--siyah { background: var(--kb-siyah); color: #cfc8c0; }
.kb-baslik { display: grid; grid-template-columns: 1.3fr 1fr; gap: 40px; align-items: end; margin-bottom: 52px; }
.kb-baslik--tek { display: block; }
.kb-baslik h2 { font-size: clamp(46px, 6vw, 84px); line-height: .92; margin: 16px 0 0; }
.kb-bolum--bordo h2, .kb-bolum--siyah h2 { color: #fff; }
.kb-baslik p { margin: 0; color: var(--muted); }

/* Disiplinler */
.kb-programlar { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.kb-program { display: flex; flex-direction: column; background: #fff; box-shadow: var(--sh); padding-bottom: 22px; }
.kb-program-gorsel { position: relative; aspect-ratio: 4/3.2; overflow: hidden; margin-bottom: 18px; background: #222; }
.kb-program-gorsel img { width: 100%; height: 100%; object-fit: cover; transition: transform 1s; }
.kb-program:hover .kb-program-gorsel img { transform: scale(1.06); }
.kb-program-gorsel em { position: absolute; top: 12px; left: 12px; padding: 4px 10px; background: var(--kb-bordo); color: #fff; font: 700 14px var(--fb); font-style: normal; letter-spacing: .08em; text-transform: uppercase; }
.kb-program h3, .kb-program p, .kb-program-btn { margin-left: 20px; margin-right: 20px; }
.kb-program h3 { font-size: 26px; line-height: 1; margin-top: 0; margin-bottom: 10px; }
.kb-program p { color: var(--muted); font-size: 15px; margin-top: 0; flex: 1; }
.kb-program-btn { display: block; padding: 11px; background: var(--bg2); text-align: center; font: 700 14px var(--fb); letter-spacing: .12em; text-transform: uppercase; transition: background .2s, color .2s; }
.kb-program-btn:hover { background: var(--kb-bordo); color: #fff; }

/* Seans programı */
.kb-sekmeler { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 20px; }
.kb-sekmeler button { padding: 11px 20px; border: 0; background: #fff; color: var(--ink); font: 700 14px var(--fb); letter-spacing: .1em; text-transform: uppercase; cursor: pointer; transition: background .2s, color .2s; }
.kb-sekmeler button.aktif { background: var(--kb-bordo); color: #fff; }
.kb-program-liste { display: none; flex-direction: column; gap: 10px; }
.kb-program-liste.aktif { display: flex; animation: kb-gir .4s ease; }
@keyframes kb-gir { from { opacity: 0; transform: translateY(10px); } }
.kb-seans { display: grid; grid-template-columns: 150px 1fr auto; align-items: center; gap: 24px; padding: 22px 26px; background: #fff; box-shadow: var(--sh); }
.kb-seans > b { font: 400 42px var(--fh); color: var(--accent); }
.kb-seans h3 { font-size: 26px; margin: 6px 0 2px; }
.kb-seans small { color: var(--muted); font-size: 14px; }

/* Koçlar */
.kb-koclar { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.kb-koc { background: var(--kb-bordo2); }
.kb-koc-foto { aspect-ratio: 3/3.5; overflow: hidden; background: #000; }
.kb-koc-foto img { width: 100%; height: 100%; object-fit: cover; object-position: center 25%; filter: grayscale(.4); transition: filter .5s, transform .8s; }
.kb-koc:hover .kb-koc-foto img { filter: none; transform: scale(1.05); }
.kb-koc-plaka { padding: 20px 22px 24px; }
.kb-koc-plaka small { font: 700 14px var(--fb); letter-spacing: .12em; text-transform: uppercase; color: var(--kb-altin); }
.kb-koc-plaka b { display: block; margin: 6px 0 8px; font: 400 28px var(--fh); text-transform: uppercase; color: #fff; }
.kb-koc-plaka p { margin: 0; font-size: 15px; color: #e6d6d2; }

/* Yorumlar */
.kb-yorumlar { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.kb-yorum { margin: 0; padding: 32px; background: #191919; }
.kb-tirnak { display: block; font: 400 90px var(--fh); line-height: .7; color: var(--accent); }
.kb-yorum blockquote { margin: 18px 0 24px; font-size: 17px; color: #e6e1dc; }
.kb-yorum figcaption { padding: 14px 16px; background: #222; }
.kb-yorum b { display: block; font: 400 22px var(--fh); text-transform: uppercase; color: #fff; }
.kb-yorum small { font-size: 14px; color: #a39b94; }

/* Deneme */
.kb-deneme { display: grid; grid-template-columns: 1.1fr 1fr; gap: 56px; align-items: center; padding: 60px; background: linear-gradient(135deg, var(--kb-bordo), var(--kb-bordo2)); color: #f5f1ec; }
.kb-deneme h2 { font-size: clamp(48px, 6vw, 86px); line-height: .92; color: #fff; margin: 18px 0; }
.kb-deneme p { color: #e6d6d2; margin: 0 0 26px; }
.kb-form { display: flex; flex-direction: column; gap: 16px; }
.kb-form label { display: flex; flex-direction: column; gap: 8px; }
.kb-form label span { font: 700 14px var(--fb); letter-spacing: .12em; text-transform: uppercase; color: #f0c8b8; }
.kb-form input, .kb-form select { width: 100%; padding: 15px 16px; border: 0; background: rgba(0,0,0,.28); color: #fff; font: 400 16px var(--fb); outline: none; box-shadow: inset 0 -2px 0 rgba(255,255,255,.2); transition: box-shadow .2s; }
.kb-form input::placeholder { color: rgba(255,255,255,.5); }
.kb-form input:focus, .kb-form select:focus { box-shadow: inset 0 -2px 0 var(--kb-altin); }
.kb-form select option { color: var(--ink); }
.kb-form .kb-btn { width: 100%; }

/* Alt bilgi */
.kb-alt { background: #090909; color: #a39b94; padding: 76px 0 0; }
.kb-alt-izgara { display: grid; grid-template-columns: 1.5fr 1fr 1.3fr; gap: 50px; padding-bottom: 46px; }
.kb-alt p { font-size: 15px; margin: 14px 0; }
.kb-alt h4 { font: 400 22px var(--fh); text-transform: uppercase; color: #fff; margin: 0 0 16px; }
.kb-alt-izgara > div > a:not(.kb-logo) { display: block; padding: 5px 0; font-size: 15px; }
.kb-alt a:hover { color: var(--kb-altin); }
.kb-alt-iletisim p { display: flex; gap: 10px; margin: 0 0 10px; }
.kb-alt-iletisim .material-symbols-outlined { color: var(--accent); font-size: 20px; }
.kb-sosyal { display: flex; gap: 8px; }
.kb-sosyal a { width: 42px; height: 42px; background: #1c1c1c; color: #fff; display: flex; align-items: center; justify-content: center; }
.kb-alt-son { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 10px; padding-top: 22px; padding-bottom: 26px; box-shadow: inset 0 1px 0 #1f1f1f; font-size: 14px; }
.kb-wa { position: fixed; right: 22px; bottom: 22px; z-index: 950; width: 58px; height: 58px; border-radius: 50%; background: #25d366; color: #fff; display: flex; align-items: center; justify-content: center; box-shadow: 0 10px 26px rgba(37,211,102,.35); }

@media (max-width: 1100px) {
    .kb-menu { position: fixed; inset: 78px 0 auto 0; flex-direction: column; gap: 0; padding: 12px 24px 24px; background: var(--kb-siyah); box-shadow: var(--sh-lg); transform: translateY(-130%); transition: transform .3s; z-index: 899; visibility: hidden; }
    .kb-menu.acik { transform: none; visibility: visible; }
    .kb-menu a { padding: 13px 0; }
    .kb-menu a.on { box-shadow: none; }
    .kb-menu-tel { display: flex !important; align-items: center; gap: 8px; color: var(--kb-altin) !important; }
    .kb-hamburger { display: inline-flex; align-items: center; justify-content: center; }
    .kb-tel { display: none; }
    .kb-baslik, .kb-deneme { grid-template-columns: 1fr; gap: 24px; }
    .kb-hero::after { background: linear-gradient(0deg, rgba(78,10,19,.95) 0%, rgba(110,15,26,.7) 50%, rgba(14,14,14,.3) 100%); }
    .kb-programlar, .kb-koclar { grid-template-columns: repeat(2, 1fr); }
    .kb-yorumlar, .kb-rakam-izgara { grid-template-columns: 1fr 1fr; }
    .kb-alt-izgara { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 640px) {
    .kb-ust-sag .kb-btn { display: none; }
    .kb-logo span { font-size: 20px; }
    .kb-hero { min-height: 560px; }
    .kb-hero-ic { align-items: flex-end; padding-bottom: 90px; }
    .kb-hero h1, .kb-hero .kb-h1 { font-size: 60px; }
    .kb-rakamlar { padding: 70px 0; }
    .kb-bolum { padding: 76px 0; }
    .kb-programlar, .kb-koclar, .kb-yorumlar, .kb-rakam-izgara, .kb-alt-izgara { grid-template-columns: 1fr; }
    .kb-seans { grid-template-columns: 1fr; gap: 8px; }
    .kb-deneme { padding: 30px 22px; }
    .kb-btn { width: 100%; }
}