/* galipensarioglu.com · vekil sitesi düzeni: üst şerit, başlık, menü çubuğu, son eklenenler, manşet, faaliyetler + yan sütun */
:root {
  --lacivert: #0B2545;
  --lacivert-2: #133A6B;
  --kehribar: #F5A800;
  --kehribar-k: #DB9200;
  --zemin: #F2F4F7;
  --cizgi: #E2E6EC;
  --yazi: #1C2430;
  --soluk: #6B7585;
  --beyaz: #fff;
  --baslik: "Montserrat", "Segoe UI", sans-serif;
  --govde: "Open Sans", "Segoe UI", sans-serif;
  --r: 8px;
}
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 70px; }
body { margin: 0; font: 400 15px/1.6 var(--govde); color: var(--yazi); background: var(--zemin); -webkit-font-smoothing: antialiased; }
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
.wrap { width: min(1200px, 100% - 40px); margin-inline: auto; }
svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; flex: none; }
svg.fill { fill: currentColor; stroke: none; }
svg .dot { fill: currentColor; }
.muted { color: var(--soluk); }

/* üst şerit */
.topbar { background: var(--lacivert); color: #B9C5D6; font-size: 12.5px; }
.topbar-in { display: flex; justify-content: space-between; align-items: center; height: 36px; }
.tb-social { display: flex; gap: 14px; }
.tb-social a { color: #B9C5D6; transition: color .2s; }
.tb-social a:hover { color: var(--kehribar); }
.tb-social svg { width: 15px; height: 15px; }

/* başlık */
.masthead { background: var(--beyaz); position: sticky; top: 0; z-index: 40; box-shadow: 0 2px 14px rgba(11, 37, 69, .08); }
.masthead-in { display: flex; align-items: center; justify-content: space-between; height: 92px; }
.logo { display: flex; flex-direction: column; line-height: 1.1; border-left: 6px solid var(--kehribar); padding-left: 14px; }
.logo-name { font: 800 30px var(--baslik); color: var(--lacivert); text-transform: uppercase; letter-spacing: -.01em; }
.logo-name b { color: var(--kehribar-k); font-weight: 800; }
.logo-sub { font: 600 12.5px var(--baslik); color: var(--soluk); text-transform: uppercase; letter-spacing: .14em; margin-top: 6px; }
.masthead-right { display: flex; align-items: center; gap: 16px; }
.role-chip { display: inline-flex; align-items: center; gap: 8px; font: 600 13px var(--baslik); color: var(--lacivert); background: #EAF4EC; border: 1px solid #CFE6D4; padding: 8px 14px; border-radius: 999px; }
.role-chip svg { color: #1E8A4C; }
.btn { display: inline-flex; align-items: center; justify-content: center; height: 44px; padding: 0 22px; border-radius: 6px; font: 700 14px var(--baslik); cursor: pointer; border: 0; transition: background .2s, transform .2s; }
.btn-amber { background: var(--kehribar); color: var(--lacivert); }
.btn-amber:hover { background: var(--kehribar-k); }
.burger { display: none; background: none; border: 0; width: 44px; height: 44px; padding: 11px; cursor: pointer; }
.burger span { display: block; height: 2px; background: var(--lacivert); margin: 5px 0; transition: transform .25s, opacity .25s; }
.menubar { background: var(--lacivert); border-bottom: 4px solid var(--kehribar); }
.menu { display: flex; align-items: stretch; }
.menu a { display: flex; align-items: center; padding: 0 18px; height: 50px; font: 700 13.5px var(--baslik); color: var(--beyaz); text-transform: uppercase; letter-spacing: .03em; transition: background .2s, color .2s; }
.menu a:hover { background: var(--lacivert-2); color: var(--kehribar); }
.menu a.home { background: var(--kehribar); color: var(--lacivert); padding: 0 16px; }
.menu a.home svg { width: 20px; height: 20px; }

/* açılış: tam ekran slayt */
.hero { position: relative; height: calc(100svh - 128px); min-height: 560px; max-height: 860px; overflow: hidden; background: radial-gradient(120% 90% at 0% 100%, #133A6B 0%, #071A33 55%); color: var(--beyaz); }
.hero-slides { position: absolute; top: 0; bottom: 0; right: 0; left: 40%; }
.hs { position: absolute; inset: 0; background-size: cover; opacity: 0; transform: scale(1.12); transition: opacity 1.4s ease, transform 8s linear; }
.hs.on { opacity: 1; transform: scale(1); }
.hero-shade { position: absolute; inset: 0; background: linear-gradient(90deg, #071A33 0%, #071A33 40%, rgba(7, 26, 51, .55) 52%, rgba(7, 26, 51, 0) 68%), linear-gradient(0deg, rgba(7, 26, 51, .8) 0%, transparent 30%); }
.hero::after { content: ""; position: absolute; z-index: 1; left: 0; right: 0; bottom: 0; height: 5px; background: linear-gradient(90deg, var(--kehribar) 0 40%, transparent 40%); }
.hero-in { position: relative; z-index: 2; height: 100%; display: flex; flex-direction: column; justify-content: center; padding-bottom: 70px; }
.hero-kicker { display: flex; align-items: center; gap: 14px; margin: 0 0 18px; font: 700 13px var(--baslik); letter-spacing: .22em; text-transform: uppercase; color: var(--kehribar); }
.hero-kicker span { width: 0; height: 3px; background: var(--kehribar); border-radius: 2px; transition: width .9s .2s cubic-bezier(.2, .7, .2, 1); }
.ready .hero-kicker span { width: 54px; }
.hero-name { margin: 0; font: 900 clamp(42px, 5.6vw, 84px)/.98 var(--baslik); text-transform: uppercase; letter-spacing: -.02em; }
.hero-name span { display: block; overflow: hidden; }
.hero-name .l2 { color: var(--kehribar); }
.hero-role { margin: 22px 0 6px; font: 700 clamp(17px, 1.8vw, 22px) var(--baslik); padding-left: 16px; border-left: 4px solid var(--kehribar); }
.hero-motto { margin: 0 0 30px; padding-left: 20px; font-size: 17px; color: #C9D4E3; }
.hero-actions { display: flex; gap: 12px; flex-wrap: wrap; }
.btn-lg { height: 52px; padding: 0 28px; font-size: 15px; }
.btn-glass { background: rgba(255, 255, 255, .12); color: var(--beyaz); box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .5); backdrop-filter: blur(4px); }
.btn-glass:hover { background: rgba(255, 255, 255, .22); }
.hero-foot { position: absolute; z-index: 2; left: 0; right: 0; bottom: 26px; display: flex; align-items: end; justify-content: space-between; gap: 24px; }
.hero-cap { max-width: 520px; font: 700 14px/1.4 var(--baslik); color: var(--beyaz); border-left: 3px solid var(--kehribar); padding-left: 12px; opacity: .92; }
.hero-cap em { display: block; font-style: normal; font-size: 12px; color: var(--kehribar); margin-bottom: 3px; }
.hero-cap:hover { opacity: 1; text-decoration: underline; text-underline-offset: 4px; }
.hero-bars { display: flex; gap: 8px; }
.hero-bars button { width: 46px; height: 4px; border: 0; padding: 0; border-radius: 2px; background: rgba(255, 255, 255, .3); cursor: pointer; overflow: hidden; }
.hero-bars i { display: block; height: 100%; width: 0; background: var(--kehribar); }
.hero-bars button.on i { animation: dolu 7s linear forwards; }
@keyframes dolu { to { width: 100%; } }
.hero-down { position: absolute; z-index: 2; left: 50%; bottom: 22px; translate: -50% 0; color: var(--beyaz); opacity: .75; animation: zipla 2s infinite; }
.hero-down svg { width: 30px; height: 30px; }
@keyframes zipla { 50% { transform: translateY(6px); } }
/* açılış hareketi: yazılar sırayla yükselir */
.hero-in > * { opacity: 0; transform: translateY(26px); transition: opacity .9s, transform .9s cubic-bezier(.2, .7, .2, 1); }
.hero-name .l1, .hero-name .l2 { transform: translateY(105%); transition: transform 1s cubic-bezier(.2, .7, .2, 1); }
.ready .hero-in > * { opacity: 1; transform: none; }
.ready .hero-name .l1, .ready .hero-name .l2 { transform: none; }
.hero-in > :nth-child(2) { transition-delay: .1s; } .hero-name .l1 { transition-delay: .2s; } .hero-name .l2 { transition-delay: .38s; }
.hero-in > :nth-child(3) { transition-delay: .55s; } .hero-in > :nth-child(4) { transition-delay: .65s; } .hero-in > :nth-child(5) { transition-delay: .78s; }

/* son eklenenler */
.ticker { background: var(--beyaz); border-bottom: 1px solid var(--cizgi); }
.ticker-in { display: flex; align-items: center; gap: 16px; height: 46px; overflow: hidden; }
.ticker-label { flex: none; background: #C8102E; color: var(--beyaz); font: 700 12px var(--baslik); text-transform: uppercase; letter-spacing: .06em; padding: 6px 12px; border-radius: 4px; }
.ticker-track { flex: 1; overflow: hidden; mask-image: linear-gradient(90deg, #000 92%, transparent); }
.ticker-move { display: inline-flex; gap: 44px; white-space: nowrap; animation: kay 60s linear infinite; }
.ticker-move a { font-weight: 600; font-size: 14px; color: var(--lacivert); }
.ticker-move a:hover { color: var(--kehribar-k); }
.ticker-move a::before { content: "■"; color: var(--kehribar); font-size: 9px; margin-right: 10px; vertical-align: 2px; }
.ticker:hover .ticker-move { animation-play-state: paused; }
@keyframes kay { to { transform: translateX(-50%); } }

/* manşet */
.headline { display: grid; grid-template-columns: 1fr 340px; gap: 20px; margin-top: 22px; }
.slider { position: relative; border-radius: var(--r); overflow: hidden; aspect-ratio: 16 / 9; background: var(--lacivert); }
.slide { position: absolute; inset: 0; opacity: 0; transition: opacity .7s; }
.slide.on { opacity: 1; z-index: 1; }
.slide img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.04); transition: transform 7s linear; }
.slide.on img { transform: scale(1); }
.slide::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 40%, rgba(6, 20, 40, .92)); }
.slide-text { position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; padding: 28px 32px 44px; color: var(--beyaz); }
.slide-text em { display: inline-block; font-style: normal; background: var(--kehribar); color: var(--lacivert); font: 700 12px var(--baslik); padding: 5px 10px; border-radius: 4px; margin-bottom: 12px; }
.slide-text h2 { margin: 0; font: 800 clamp(20px, 2.4vw, 32px)/1.25 var(--baslik); text-shadow: 0 2px 12px rgba(0, 0, 0, .4); max-width: 820px; }
.dots { position: absolute; z-index: 3; left: 32px; bottom: 18px; display: flex; gap: 6px; }
.dots button { width: 26px; height: 4px; border: 0; border-radius: 2px; background: rgba(255, 255, 255, .45); cursor: pointer; padding: 0; }
.dots button.on { background: var(--kehribar); width: 40px; }
.nav-btn { position: absolute; z-index: 3; top: 50%; translate: 0 -50%; width: 44px; height: 44px; border-radius: 50%; border: 0; background: rgba(255, 255, 255, .18); color: var(--beyaz); cursor: pointer; display: grid; place-items: center; backdrop-filter: blur(4px); opacity: 0; transition: opacity .25s, background .2s; }
.slider:hover .nav-btn { opacity: 1; }
.nav-btn:hover { background: var(--kehribar); color: var(--lacivert); }
.prev { left: 16px; } .next { right: 16px; }
.side-list { display: flex; flex-direction: column; background: var(--beyaz); border-radius: var(--r); overflow: hidden; }
.side-item { display: grid; grid-template-columns: 104px 1fr; gap: 12px; padding: 12px; border-bottom: 1px solid var(--cizgi); align-items: center; flex: 1; cursor: pointer; transition: background .2s; border-left: 4px solid transparent; }
.side-item:last-child { border-bottom: 0; }
.side-item img { width: 104px; height: 70px; object-fit: cover; border-radius: 4px; }
.side-item span { font: 700 13.5px/1.35 var(--baslik); color: var(--lacivert); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.side-item em { display: block; font-style: normal; font: 600 11.5px var(--govde); color: var(--soluk); margin-bottom: 3px; }
.side-item.on, .side-item:hover { background: #FFF7E3; border-left-color: var(--kehribar); }

/* hızlı erişim */
.quick { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-top: 20px; }
.q { display: grid; grid-template-columns: 50px 1fr; grid-template-rows: auto auto; column-gap: 14px; align-items: center; background: var(--beyaz); border-radius: var(--r); padding: 18px; border-bottom: 3px solid var(--lacivert); transition: transform .2s, box-shadow .2s; }
.q svg { grid-row: span 2; width: 50px; height: 50px; padding: 12px; border-radius: 50%; background: var(--zemin); color: var(--lacivert); }
.q b { font: 800 15px var(--baslik); color: var(--lacivert); text-transform: uppercase; }
.q span { font-size: 13px; color: var(--soluk); }
.q:hover { transform: translateY(-3px); box-shadow: 0 12px 24px -14px rgba(11, 37, 69, .4); }
.q-amber { border-bottom-color: var(--kehribar); }
.q-amber svg { background: var(--kehribar); color: var(--lacivert); }

/* bölüm başlığı */
.sec-head { display: flex; align-items: center; gap: 14px; margin: 40px 0 18px; border-bottom: 2px solid var(--cizgi); }
.sec-head h2 { margin: 0 0 -2px; padding-bottom: 10px; border-bottom: 2px solid var(--kehribar); font: 800 21px var(--baslik); color: var(--lacivert); text-transform: uppercase; }
.sec-head a, .sec-head .sec-note { margin-left: auto; font: 700 12.5px var(--baslik); color: var(--soluk); text-transform: uppercase; letter-spacing: .04em; padding-bottom: 10px; }
.sec-head a:hover { color: var(--kehribar-k); }
.sec-head.light { border-color: rgba(255, 255, 255, .15); }
.sec-head.light h2 { color: var(--beyaz); }
.sec-head.light a { color: #B9C5D6; }

/* sütunlar */
.columns { display: grid; grid-template-columns: 1fr 340px; gap: 28px; align-items: start; }
.news-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; }
.news-card { background: var(--beyaz); border-radius: var(--r); overflow: hidden; display: flex; flex-direction: column; transition: transform .2s, box-shadow .2s; }
.news-card:hover { transform: translateY(-3px); box-shadow: 0 14px 28px -16px rgba(11, 37, 69, .45); }
.news-card .img { position: relative; aspect-ratio: 4 / 3; overflow: hidden; }
.news-card img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s; }
.news-card:hover img { transform: scale(1.05); }
.news-card .date { position: absolute; left: 12px; bottom: 12px; background: var(--lacivert); color: var(--beyaz); font: 700 11.5px var(--baslik); padding: 5px 9px; border-radius: 4px; }
.news-card .body { padding: 16px 18px 18px; }
.news-card h3 { margin: 0 0 8px; font: 800 16.5px/1.35 var(--baslik); color: var(--lacivert); }
.news-card p { margin: 0; font-size: 14px; color: var(--soluk); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.ilce-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.ilce { position: relative; aspect-ratio: 3 / 4; border-radius: var(--r); overflow: hidden; color: var(--beyaz); }
.ilce img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s; }
.ilce:hover img { transform: scale(1.06); }
.ilce::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 35%, rgba(6, 20, 40, .9)); }
.ilce span { position: absolute; z-index: 1; left: 14px; right: 14px; bottom: 14px; font: 700 13px/1.35 var(--baslik); }
.ilce b { display: inline-block; background: var(--kehribar); color: var(--lacivert); font: 800 12px var(--baslik); text-transform: uppercase; padding: 4px 9px; border-radius: 3px; margin-bottom: 8px; }

/* yan sütun */
.col-side { display: grid; gap: 20px; margin-top: 40px; position: sticky; top: 160px; }
.profile-card { background: var(--beyaz); border-radius: var(--r); overflow: hidden; }
.pc-photo { background: linear-gradient(180deg, var(--lacivert), var(--lacivert-2)); padding: 22px 22px 0; display: flex; justify-content: center; border-bottom: 4px solid var(--kehribar); }
.pc-photo img { width: 170px; height: 210px; object-fit: cover; object-position: top; border-radius: 6px 6px 0 0; }
.pc-body { padding: 18px 20px 20px; }
.pc-body b { display: block; font: 800 17px var(--baslik); color: var(--lacivert); }
.pc-body > span { font-size: 13px; color: var(--soluk); }
.pc-body ul { margin: 14px 0; padding: 0; list-style: none; display: grid; gap: 8px; }
.pc-body li { font-size: 13.5px; padding-left: 18px; position: relative; }
.pc-body li::before { content: ""; position: absolute; left: 0; top: 7px; width: 8px; height: 8px; background: var(--kehribar); border-radius: 2px; }
.link { font: 700 13px var(--baslik); color: var(--kehribar-k); text-transform: uppercase; }
.side-box { background: var(--beyaz); border-radius: var(--r); padding: 18px 20px; }
.sb-title { margin: 0 0 14px; font: 800 15px var(--baslik); color: var(--lacivert); text-transform: uppercase; border-bottom: 2px solid var(--cizgi); padding-bottom: 10px; }
.komisyon-box { background: linear-gradient(135deg, #0F5132, #1E8A4C); color: var(--beyaz); }
.sb-tag { font: 700 11px var(--baslik); text-transform: uppercase; letter-spacing: .1em; color: #CDEFD9; }
.komisyon-box h3 { margin: 6px 0 8px; font: 800 19px var(--baslik); }
.komisyon-box p { margin: 0 0 12px; font-size: 13.5px; color: #E2F5E8; }
.komisyon-box a { font: 700 13px var(--baslik); color: var(--beyaz); text-decoration: underline; text-underline-offset: 4px; }
.follow { display: flex; align-items: center; gap: 12px; padding: 11px 14px; border-radius: 6px; color: var(--beyaz); font: 700 14px var(--baslik); margin-bottom: 8px; transition: filter .2s; }
.follow:last-child { margin-bottom: 0; }
.follow span { margin-left: auto; font-size: 12px; opacity: .85; }
.follow:hover { filter: brightness(1.12); }
.follow.fb { background: #1877F2; } .follow.x { background: #111; } .follow.ig { background: linear-gradient(90deg, #F58529, #DD2A7B, #8134AF); }
.duyuru-item { display: grid; grid-template-columns: 64px 1fr; gap: 12px; align-items: center; padding: 10px 0; border-bottom: 1px solid var(--cizgi); }
.duyuru-item:last-child { border-bottom: 0; padding-bottom: 0; }
.duyuru-item img { width: 64px; height: 64px; object-fit: cover; border-radius: 4px; }
.duyuru-item span { font: 700 13px/1.35 var(--baslik); color: var(--lacivert); }
.duyuru-item em { display: block; font: 600 11.5px var(--govde); font-style: normal; color: var(--soluk); margin-bottom: 2px; }
.duyuru-item:hover span { color: var(--kehribar-k); }

/* TBMM çalışmaları */
.meclis { background: var(--lacivert); margin-top: 50px; padding: 10px 0 50px; color: var(--beyaz); }
.meclis-grid { display: grid; grid-template-columns: 1.4fr 1fr; grid-template-rows: auto auto; gap: 20px; }
.meclis-feature { position: relative; border-radius: var(--r); overflow: hidden; grid-row: span 2; min-height: 380px; }
.meclis-feature img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.meclis-feature::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 40%, rgba(6, 20, 40, .95)); }
.mf-text { position: absolute; z-index: 1; left: 24px; right: 24px; bottom: 22px; }
.mf-text em, .meclis-small em { display: block; font-style: normal; font: 700 12px var(--baslik); color: var(--kehribar); margin-bottom: 6px; }
.mf-text b { font: 800 22px/1.3 var(--baslik); }
.meclis-links { display: grid; gap: 8px; }
.meclis-links a { display: flex; align-items: center; gap: 14px; background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .1); padding: 13px 16px; border-radius: 6px; font: 700 14px var(--baslik); transition: background .2s, border-color .2s; }
.meclis-links svg { width: 22px; height: 22px; color: var(--kehribar); }
.meclis-links i { margin-left: auto; font-style: normal; color: var(--kehribar); }
.meclis-links a:hover { background: rgba(245, 168, 0, .12); border-color: var(--kehribar); }
.meclis-small { grid-column: 2; display: grid; grid-template-columns: 110px 1fr; gap: 14px; align-items: center; background: rgba(255, 255, 255, .06); border-radius: 6px; overflow: hidden; font: 700 14px/1.35 var(--baslik); }
.meclis-small img { width: 110px; height: 82px; object-fit: cover; }
.meclis-small span { padding-right: 12px; }
.meclis-feature { grid-column: 1; grid-row: 1 / 4; }
.meclis-links { grid-column: 2; grid-row: 1; }

/* özgeçmiş */
.oz-grid { display: grid; grid-template-columns: 300px 1fr; gap: 36px; align-items: start; background: var(--beyaz); border-radius: var(--r); padding: 30px; }
.oz-photo img { width: 100%; height: auto; aspect-ratio: 3 / 4; object-fit: cover; border-radius: 6px; border-bottom: 5px solid var(--kehribar); }
.oz-text h3 { margin: 0; font: 800 26px var(--baslik); color: var(--lacivert); }
.oz-sub { margin: 4px 0 16px; font: 600 14px var(--baslik); color: var(--kehribar-k); }
.oz-text p { margin: 0 0 14px; color: #3A4556; }
.timeline { list-style: none; margin: 22px 0 0; padding: 0; display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; }
.timeline li { background: var(--zemin); border-radius: 6px; padding: 12px; font: 700 13px/1.35 var(--baslik); color: var(--lacivert); border-top: 3px solid var(--lacivert); }
.timeline li span { display: block; font-size: 12px; color: var(--kehribar-k); margin-bottom: 4px; }
.timeline li.now { border-top-color: var(--kehribar); background: #FFF7E3; }

/* galeri */
.galeri { margin-top: 30px; }
.gallery { display: grid; grid-template-columns: repeat(6, 1fr); grid-auto-rows: 150px; gap: 10px; }
.gallery button { border: 0; padding: 0; border-radius: 6px; overflow: hidden; cursor: zoom-in; background: var(--lacivert); }
.gallery button:nth-child(1), .gallery button:nth-child(6) { grid-column: span 2; grid-row: span 2; }
.gallery img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s, opacity .3s; }
.gallery button:hover img { transform: scale(1.06); opacity: .9; }
.lightbox { position: fixed; inset: 0; z-index: 100; background: rgba(4, 12, 24, .94); display: grid; place-items: center; padding: 30px; }
.lightbox[hidden] { display: none; }
.lightbox img { max-width: min(1200px, 100%); max-height: 80vh; border-radius: 6px; }
.lightbox p { color: #D5DEEA; font: 600 15px var(--baslik); text-align: center; max-width: 900px; margin: 14px auto 0; }
.lb-close { position: absolute; top: 18px; right: 24px; font-size: 40px; line-height: 1; color: var(--beyaz); background: none; border: 0; cursor: pointer; }

/* vatandaş masası */
.masa { background: linear-gradient(120deg, var(--lacivert), var(--lacivert-2)); margin-top: 50px; padding: 54px 0; color: var(--beyaz); border-top: 4px solid var(--kehribar); }
.masa-grid { display: grid; grid-template-columns: .8fr 1.2fr; gap: 50px; align-items: start; }
.masa-intro h2 { margin: 0 0 12px; font: 800 30px var(--baslik); text-transform: uppercase; }
.masa-intro p { color: #C7D2E1; margin: 0 0 22px; }
.masa-intro ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.masa-intro li { display: flex; align-items: center; gap: 12px; font-weight: 600; }
.masa-intro li b { width: 32px; height: 32px; border-radius: 50%; background: var(--kehribar); color: var(--lacivert); display: grid; place-items: center; font: 800 14px var(--baslik); }
.masa-form { background: var(--beyaz); color: var(--yazi); border-radius: var(--r); padding: 26px; display: grid; gap: 14px; }
.row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.masa-form label { display: grid; gap: 6px; font: 700 12.5px var(--baslik); color: var(--lacivert); text-transform: uppercase; letter-spacing: .03em; }
.masa-form input, .masa-form select, .masa-form textarea { width: 100%; font: 400 15px var(--govde); padding: 11px 13px; border: 1.5px solid var(--cizgi); border-radius: 6px; background: #F8F9FB; color: var(--yazi); }
.masa-form input:focus, .masa-form select:focus, .masa-form textarea:focus { outline: none; border-color: var(--lacivert); background: var(--beyaz); }
.masa-form label.consent { display: flex; gap: 10px; align-items: flex-start; font: 400 13px var(--govde); text-transform: none; letter-spacing: 0; color: var(--soluk); }
.consent input { width: auto; margin-top: 3px; }
.masa-form .btn { justify-self: start; }
.form-note { margin: 0; font-size: 14px; min-height: 1em; }
.form-note.ok { color: #16794A; } .form-note.err { color: #B4232C; }

/* iletişim */
.iletisim { padding-bottom: 50px; }
.contact-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 20px; }
.ccard { background: var(--beyaz); border-radius: var(--r); padding: 24px; border-top: 4px solid var(--lacivert); }
.cc-tag { font: 700 11.5px var(--baslik); text-transform: uppercase; letter-spacing: .12em; color: var(--kehribar-k); }
.ccard h3 { margin: 6px 0 12px; font: 800 18px var(--baslik); color: var(--lacivert); }
.ccard p { margin: 0 0 8px; font-size: 14.5px; }
.ccard a { color: var(--lacivert); font-weight: 600; }
.ccard a:hover { color: var(--kehribar-k); }
.ccard-dark { background: var(--lacivert); border-top-color: var(--kehribar); }
.ccard-dark h3, .ccard-dark a { color: var(--beyaz); }
[data-config]:empty { display: none; }

/* alt bilgi: TBMM çizimi, künye, sosyal medya */
.footer { background: #1F2833; color: #E6EBF1; }
.footer-main { text-align: center; padding: 50px 0 40px; }
.f-tbmm { width: min(320px, 80%); height: auto; margin: 0 auto 22px; }
.footer-main p { margin: 0 0 8px; font-size: 15.5px; }
.footer-main a { color: #E6EBF1; }
.footer-main a:hover { color: var(--kehribar); }
.f-ad { font: 700 17px var(--baslik); color: var(--beyaz); }
.f-social { display: flex; justify-content: center; gap: 10px; margin-top: 24px; }
.f-social a { width: 42px; height: 42px; display: grid; place-items: center; background: #2B3542; border-radius: 4px; transition: background .2s, color .2s; }
.f-social a:hover { background: var(--kehribar); color: var(--lacivert); }
.f-social svg { width: 17px; height: 17px; }
.footer-bar { background: #171E27; font-size: 13px; color: #9AA7B8; }
.footer-bar-in { display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; padding: 16px 0; }
.footer-bar p { margin: 0; }
.footer-links { display: flex; gap: 18px; flex-wrap: wrap; }
.footer-links a { font: 600 13px var(--baslik); color: #C8D3E3; }
.footer-links a:hover { color: var(--kehribar); }

/* duyarlı */
@media (max-width: 1080px) {
  .headline, .columns { grid-template-columns: 1fr; }
  .side-list { display: grid; grid-template-columns: repeat(2, 1fr); }
  .side-item { border-bottom: 1px solid var(--cizgi); }
  .col-side { position: static; grid-template-columns: repeat(2, 1fr); margin-top: 10px; }
  .role-chip { display: none; }
  .gallery { grid-template-columns: repeat(4, 1fr); }
  .timeline { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 820px) {
  .masthead-in { height: 72px; }
  .logo-name { font-size: 21px; }
  .logo-sub { font-size: 10.5px; letter-spacing: .1em; }
  .masthead-right { display: none; }
  .burger { display: block; }
  .menubar { position: absolute; left: 0; right: 0; top: 100%; display: none; }
  body.menu-open .menubar { display: block; }
  .menu { flex-direction: column; }
  .menu a { height: 48px; border-bottom: 1px solid rgba(255, 255, 255, .08); }
  .menu a.home { display: none; }
  body.menu-open .burger span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  body.menu-open .burger span:nth-child(2) { opacity: 0; }
  body.menu-open .burger span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
  .masthead { position: sticky; }
  .side-list { grid-template-columns: 1fr; }
  .side-item:nth-child(n+4) { display: none; }
  .slider { aspect-ratio: 4 / 3; }
  .slide-text { padding: 20px 18px 36px; }
  .dots { left: 18px; }
  .quick { grid-template-columns: 1fr 1fr; gap: 10px; }
  .q { grid-template-columns: 1fr; text-align: center; justify-items: center; row-gap: 6px; padding: 16px 10px; }
  .q svg { grid-row: auto; }
  .q b { font-size: 13px; }
  .news-grid { grid-template-columns: 1fr; }
  .ilce-grid { grid-template-columns: 1fr 1fr; }
  .col-side { grid-template-columns: 1fr; }
  .meclis-grid { grid-template-columns: 1fr; }
  .meclis-feature { min-height: 260px; grid-row: auto; }
  .meclis-links, .meclis-small { grid-column: auto; grid-row: auto; }
  .oz-grid { grid-template-columns: 1fr; padding: 20px; }
  .oz-photo { max-width: 260px; }
  .timeline { grid-template-columns: 1fr 1fr; }
  .gallery { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 130px; }
  .masa-grid { grid-template-columns: 1fr; gap: 26px; }
  .row2 { grid-template-columns: 1fr; }
  .contact-cards { grid-template-columns: 1fr; }
  .ticker-label { font-size: 11px; padding: 5px 8px; }
  .hero { height: calc(100svh - 108px); min-height: 520px; }
  .hero-slides { left: 0; }
  .hero-shade { background: linear-gradient(0deg, rgba(6, 20, 42, .95) 0%, rgba(6, 20, 42, .7) 45%, rgba(6, 20, 42, .25) 100%); }
  .hero-in { justify-content: flex-end; padding-bottom: 90px; }
  .hero-cap, .hero-down { display: none; }
  .hero-foot { justify-content: flex-start; }
  .hero-motto { font-size: 15px; margin-bottom: 22px; }
  .wrap { width: calc(100% - 28px); }
}
@media (prefers-reduced-motion: reduce) {
  .ticker-move { animation: none; }
  .slide img, .slide.on img { transition: none; transform: none; }
}

/* haber sayfası, liste, hata */
.gizli-alan { position: absolute !important; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.duyuru-ikon { display: block; width: 64px; height: 64px; border-radius: 4px; background: var(--zemin) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230B2545' stroke-width='1.8'%3E%3Cpath d='M4 5h16v11H8l-4 4z'/%3E%3C/svg%3E") center/28px no-repeat; }
.crumbs { margin: 22px 0 6px; font: 600 13px var(--baslik); color: var(--soluk); }
.crumbs a:hover { color: var(--kehribar-k); }
.crumbs span { color: var(--lacivert); }
.detay-grid { display: grid; grid-template-columns: 1fr 320px; gap: 28px; align-items: start; margin: 14px 0 50px; }
.detay-main { background: var(--beyaz); border-radius: var(--r); padding: 30px; }
.detay-kat { display: inline-block; background: var(--kehribar); color: var(--lacivert); font: 800 12px var(--baslik); text-transform: uppercase; padding: 5px 10px; border-radius: 4px; }
.detay-main h1 { margin: 14px 0 6px; font: 800 clamp(24px, 3vw, 34px)/1.25 var(--baslik); color: var(--lacivert); }
.detay-tarih { margin: 0 0 18px; color: var(--soluk); font-weight: 600; font-size: 14px; }
.detay-img { width: 100%; border-radius: 6px; margin-bottom: 20px; }
.detay-main p { font-size: 16.5px; line-height: 1.75; color: #2E3847; }
.detay-ozet { font-weight: 600; color: var(--yazi) !important; }
.detay-kaynak a { font: 700 14px var(--baslik); color: var(--kehribar-k); }
.detay-side { background: var(--beyaz); border-radius: var(--r); padding: 18px 20px; position: sticky; top: 160px; }
.detay-masa { width: 100%; margin-top: 16px; }
.liste { padding-bottom: 50px; }
.liste-grid { grid-template-columns: repeat(3, 1fr); }
.liste-grid .img { background: var(--lacivert); }
.sayfalar { display: flex; gap: 6px; justify-content: center; margin-top: 28px; }
.sayfalar a { min-width: 40px; height: 40px; display: grid; place-items: center; border-radius: 6px; background: var(--beyaz); font: 700 14px var(--baslik); color: var(--lacivert); }
.sayfalar a.on, .sayfalar a:hover { background: var(--kehribar); }
.hata-sayfa { text-align: center; padding: 90px 0; }
.hata-sayfa b { display: block; font: 900 90px var(--baslik); color: var(--kehribar); line-height: 1; }
.hata-sayfa h1 { font: 700 22px var(--baslik); color: var(--lacivert); margin: 14px 0 26px; }
@media (max-width: 1080px) { .liste-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 820px) {
  .detay-grid { grid-template-columns: 1fr; }
  .detay-main { padding: 20px; }
  .detay-side { position: static; }
  .liste-grid { grid-template-columns: 1fr; }
}

/* açılış gösterisi (sberkekvoleybol.com'daki gibi): bina çizilir, bayrak çekilir, isim gelir, perde kalkar */
.intro { display: none; }
.intro-on .intro { position: fixed; inset: 0; z-index: 200; display: flex; flex-direction: column; align-items: center; justify-content: center; overflow: hidden; cursor: pointer;
  background: radial-gradient(120% 90% at 50% 100%, #133A6B 0%, #071A33 60%); color: var(--beyaz); animation: intro-cik .7s cubic-bezier(.7, 0, .2, 1) 3.05s forwards; }
.intro-on body { overflow: hidden; }
.intro-glow { position: absolute; inset: 0; background: radial-gradient(55% 45% at 50% 48%, rgba(201, 164, 76, .22) 0%, transparent 70%); animation: intro-belir 1.2s ease-out both; }
.intro-scene { position: relative; width: min(620px, 86vw); height: auto; overflow: visible; stroke: #C9A44C; stroke-width: 2; filter: drop-shadow(0 0 6px rgba(201, 164, 76, .35)); animation: intro-sahne-git .5s cubic-bezier(.6, 0, .3, 1) 1.95s forwards; }
.intro-scene .d { stroke-dasharray: 1; stroke-dashoffset: 1; animation: intro-ciz .55s cubic-bezier(.4, 0, .2, 1) forwards; animation-delay: calc(.12s + var(--n) * .17s); }
.i-bayrak { transform: translateY(66px); opacity: 0; animation: intro-bayrak .55s cubic-bezier(.2, .8, .2, 1) 1.15s forwards; }
.i-dalga { transform-box: fill-box; transform-origin: 0 50%; animation: intro-dalga .8s ease-in-out 1.6s infinite alternate; }
.intro-reveal { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 0 20px; pointer-events: none; }
.intro-reveal > * { opacity: 0; }
.intro-emblem { width: 92px; height: 92px; border-radius: 50%; display: grid; place-items: center; background: #0B1F3A; box-shadow: inset 0 0 0 4px #0B1F3A, inset 0 0 0 6px #C6A15B, 0 18px 50px rgba(0, 0, 0, .45);
  animation: intro-amblem .7s cubic-bezier(.2, 1.3, .3, 1) 2.05s forwards; }
.intro-emblem b { font: 700 36px Georgia, "Times New Roman", serif; color: #E2C88F; }
.intro-name { margin: 22px 0 0; font: 900 clamp(26px, 4.6vw, 56px)/1.05 var(--baslik); text-transform: uppercase; letter-spacing: -.01em; animation: intro-isim .65s cubic-bezier(.2, .7, .2, 1) 2.2s forwards; }
.intro-rule { width: 96px; height: 4px; border-radius: 2px; background: var(--kehribar); margin-top: 18px; transform: scaleX(0); animation: intro-cizgi .5s cubic-bezier(.2, .7, .2, 1) 2.38s forwards; }
.intro-sub { margin: 16px 0 0; font: 700 13px var(--baslik); letter-spacing: .26em; text-transform: uppercase; color: var(--kehribar); animation: intro-belir .5s ease-out 2.48s forwards; }
.intro-skip { position: absolute; left: 0; right: 0; bottom: 28px; margin: 0; text-align: center; font-size: 13px; color: #8FA0B6; opacity: 0; animation: intro-belir .4s ease-out .6s forwards, intro-kaybol .3s ease-in 1.6s forwards; }
@keyframes intro-ciz { to { stroke-dashoffset: 0; } }
@keyframes intro-bayrak { to { transform: none; opacity: 1; } }
@keyframes intro-dalga { from { transform: skewY(0) scaleX(1); } to { transform: skewY(-5deg) scaleX(.94); } }
@keyframes intro-sahne-git { to { opacity: 0; transform: translateY(-40px) scale(.86); } }
@keyframes intro-amblem { from { opacity: 0; transform: scale(.4); } to { opacity: 1; transform: none; } }
@keyframes intro-isim { from { opacity: 0; transform: translateY(26px); letter-spacing: .08em; } to { opacity: 1; transform: none; } }
@keyframes intro-cizgi { to { opacity: 1; transform: scaleX(1); } }
@keyframes intro-belir { from { opacity: 0; } to { opacity: 1; } }
@keyframes intro-kaybol { to { opacity: 0; } }
@keyframes intro-cik { to { transform: translateY(-100%); } }