/*
  Small additions on top of the real main.css (wwwroot/assets/css/main.css, pulled directly from
  www.uab.gov.tr — see docs/mimari.md and memory/architecture_decisions.md for why). Two kinds of
  rules live here:

  1. Genuinely new components the live site has no equivalent for, because they're specific to a
     Genel Müdürlük home page rather than the ministry homepage: .birim-banner-hero (full-bleed
     birim photo + name, Views/Partials/Home/BirimBannerHero.cshtml — the live site doesn't need
     one since the ministry homepage doesn't identify a sub-unit), .home-row (the composable row
     layout, Views/Partials/Home/).
  2. Fixes for real layout bugs the ported components have, called out individually below.
*/

.home-row { padding: 45px 0; }
.home-row .row-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 10px;
}
.home-row .row-head h2.title-h2 {
  color: #353b45;
  margin-bottom: 0;
}

/* ===== Hızlı Erişim (Views/Partials/Home/QuickAccess.cshtml) ===== */
.quick-access { padding: 45px 0 0; }
.quick-access .row-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 24px; }
.quick-access .title-h2 { margin: 0; color: #353b45; }

/* grid-auto-rows: 1fr keeps every card the same height, whether or not it has a description or
   an icon; minmax(0, 1fr) stops a long unbroken title from widening its column. */
.qa-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-rows: 1fr; gap: 16px; }
.qa-grid > li { display: flex; }

.qa-card {
  display: flex; align-items: center; gap: 16px;
  flex: 1; min-height: 88px; padding: 20px 22px; cursor: pointer;
  background: #fff; border: 1px solid #e3e5e9; border-radius: 13px;
  color: #353b45; text-decoration: none;
  transition: background-color .2s, color .2s, border-color .2s, box-shadow .2s, transform .2s;
}
.qa-card:hover,
.qa-card:focus-visible { background: #f4f5f7; border-color: #353b45; box-shadow: 0 6px 18px rgba(53,59,69,.08); transform: translateY(-2px); }
.qa-card:focus-visible { outline: 3px solid #353b45; outline-offset: 3px; }

.qa-icon {
  flex: 0 0 48px; width: 48px; height: 48px; border-radius: 12px;
  display: grid; place-items: center;
  background: #eef0f3; color: #353b45; transition: background-color .2s, color .2s, transform .3s;
}
.qa-card:hover .qa-icon,
.qa-card:focus-visible .qa-icon { background: #353b45; color: #fff; transform: scale(1.08); }

.qa-text { flex: 1; min-width: 0; }
.qa-title {
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  font-weight: 600; font-size: 16px; line-height: 1.3;
}
.qa-desc { display: block; margin-top: 3px; font-size: 13px; line-height: 1.35; opacity: .75; }
/* Same hover cue as the site's other cards (main.css .news-box / .announcement-box: the arrow turns
   -45deg). */
.qa-arrow { flex: 0 0 auto; opacity: .5; transition: opacity .3s, transform .3s; }
.qa-card:hover .qa-arrow,
.qa-card:focus-visible .qa-arrow { opacity: 1; transform: rotate(-45deg); }

@media (max-width: 1200px) { .qa-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

@media (max-width: 600px) {
  .qa-grid { gap: 10px; }
  .qa-card { flex-direction: column; align-items: flex-start; gap: 12px; padding: 16px; }
  .qa-card--no-icon { justify-content: center; }
  .qa-text { flex: 0 0 auto; width: 100%; }
  .qa-desc, .qa-arrow { display: none; }
  .qa-title { font-size: 14px; }
}

@media (prefers-reduced-motion: reduce) {
  .qa-card, .qa-icon, .qa-arrow { transition: none; }
  .qa-card:hover, .qa-card:focus-visible,
  .qa-card:hover .qa-icon, .qa-card:focus-visible .qa-icon,
  .qa-card:hover .qa-arrow, .qa-card:focus-visible .qa-arrow { transform: none; }
}

/* ---------- Full-width slider, replacing the ministry's photo composite in
   .index-header-bottom .right (bespoke to a minister portrait + amblem layering, doesn't apply to
   a Genel Müdürlük). ---------- */
.index-header-bottom .container .flex .left {
  width: 100%;
}

/* ---------- Hero banner: designer-provided CSS (banner-hero.css), pasted in verbatim below and
   then patched for one real collision found on install: main.css has a same-specificity
   `.container > h1 { max-width:1000px; padding:0 40px; margin:60px auto 20px auto; width:100%; }`
   global rule (line ~1417) that was silently winning on every property this hero's own h1 rule
   didn't also set (which was all of them except color/font-size/weight/line-height) — that 60px
   auto-margined, 1000px-capped h1 is what was breaking the layout ("not loading"/looked broken).
   Fixed below via a `.birim-banner-hero .container > h1` override, which outweighs main.css's
   selector on specificity alone so load order can't flip it back. ---------- */
.birim-banner-hero {
  position: relative;
  overflow: hidden;
  background: linear-gradient(120deg, #1c2430, #12181f);
  margin-bottom: 24px;
}
.birim-banner-hero__media { position: absolute; inset: 0; }
.birim-banner-hero__media img { width: 100%; height: 100%; object-fit: cover; opacity: .85; }
.birim-banner-hero__scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(100deg, rgba(18,24,31,.65) 0%, rgba(21,27,35,.45) 42%, rgba(24,31,40,.2) 75%, transparent 100%);
}
.birim-banner-hero .container {
  /* padding-top/-bottom only (not the padding shorthand) so the standard .container left/right
     gutter (main.css: 0px 10px) still applies here — the shorthand version of this rule was
     zeroing it out, which is why the banner's text/icons sat flush against the viewport edge
     instead of lining up with the rest of the page's usual side margins. */
  position: relative;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
  padding-top: 64px;
  padding-bottom: 40px;
}
.birim-banner-hero h1 {
  font-size: 52px;
  font-weight: 800;
  color: #fff;
  line-height: 1.08;
}
/* Collision fix (see comment above): beats main.css's `.container > h1` on specificity, so the
   hero's own sizing/spacing always wins regardless of stylesheet order. */
.birim-banner-hero .container > h1 {
  margin: 0;
  max-width: 820px;
  padding: 0;
  width: auto;
  box-sizing: content-box;
}
.birim-banner-hero__social { display: flex; gap: 12px; flex-shrink: 0; }
.birim-banner-hero__social a {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,.4);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  transition: background .15s;
}
.birim-banner-hero__social a:hover { background: rgba(255,255,255,.15); }

@media (max-width: 767px) {
  .birim-banner-hero h1 { font-size: 30px; }
  .birim-banner-hero .container { padding-top: 36px; padding-bottom: 24px; }
}

/* ---------- Fix: news card titles that wrap to 2 lines shift the date/arrow below them out of
   alignment with 1-line neighbors, because .news-list uses `align-items:center` on main.css
   (flex row), and .title's line-clamp doesn't reserve space for a line it doesn't use. Reserving
   the full 2-line height keeps every card's date/arrow row starting at the same baseline
   regardless of how many lines its own title actually took. ---------- */
.news-list .news-box a .title.max-line-two,
.announcement-list .announcement-box a .title.max-line-three {
  min-height: 46px; /* 2 × 23px line-height, matches .news-list .news-box a .title in main.css */
}
.index-header-bottom .news-box a .title.max-line-two {
  min-height: 56px; /* 2 × 28px line-height, matches the larger slider variant */
}
.announcement-list .announcement-box a .title.max-line-three {
  min-height: 69px; /* 3 × 23px */
}

/* ---------- Proje Bilgileri block (Views/Partials/blocklist/Components/projeBilgileri.cshtml):
   a project's facts as a label/value table above its own photo gallery (the kit's .news-gallery). */
.proje-bilgileri__tablo { width: 100%; border-collapse: collapse; border: 1px solid #E6E6E6; border-radius: 10px; overflow: hidden; }
.proje-bilgileri__tablo th,
.proje-bilgileri__tablo td { padding: 14px 20px; text-align: left; vertical-align: top; border-bottom: 1px solid #E6E6E6; color: #353B45; }
.proje-bilgileri__tablo tr:last-child th,
.proje-bilgileri__tablo tr:last-child td { border-bottom: 0; }
.proje-bilgileri__tablo th { width: 32%; background: #F2F2F2; font-weight: 600; }
.proje-bilgileri .news-gallery .swiper-slide a img { aspect-ratio: 3 / 2; object-fit: cover; }
@media (max-width: 767px) {
  .proje-bilgileri__tablo th { width: 40%; }
  .proje-bilgileri__tablo th, .proje-bilgileri__tablo td { padding: 10px 12px; }
}

/* ---------- Left menu group headings (Views/Partials/LeftMenu.cshtml): when a page has no section
   menu of its own, the birim's main menu is shown grouped, like the source's "Ana Menu". */
.left-menu-fix-page .left-menu ul.top li.left-menu__group {
  padding: 18px 20px 6px;
  color: rgba(255, 255, 255, .55);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
}
.left-menu-fix-page .left-menu ul.top li.left-menu__group:first-child { padding-top: 8px; }

/* ---------- Tables in imported rich text (aygm İhaleler, denizcilik IMO Sözleşmeleri, ...): the
   source styled them with its own table classes, which the importer drops. Rounded, striped rows
   in the site's colours; scroll sideways on narrow screens. */
.text-content table { width: 100%; border-collapse: separate; border-spacing: 0; margin: 20px 0;
  border: 1px solid #E1E3E6; border-radius: 12px; overflow: hidden; }
.text-content table th,
.text-content table td { padding: 14px 18px; vertical-align: top; text-align: left; color: #353B45;
  border-bottom: 1px solid #E1E3E6; line-height: 1.5; }
.text-content table td + td,
.text-content table th + th { border-left: 1px solid #E1E3E6; }
.text-content table tr:last-child > td { border-bottom: 0; }
/* Header: real <th>/<thead>, or a first row the editor only made bold (the source's habit). */
.text-content table th,
.text-content table thead td,
.text-content table tbody tr:first-child > td:has(> b, > strong, > p > b, > p > strong) {
  background: #353B45; color: #FFF; font-weight: 600; font-size: 14px; letter-spacing: .02em; }
.text-content table tbody tr:first-child > td:has(> b, > strong, > p > b, > p > strong) * { color: #FFF; }
.text-content table tbody tr:nth-child(even) > td { background: #F7F8F9; }
.text-content table tbody tr:hover > td { background: #EEF0F2; }
.text-content table tbody tr:first-child:hover > td:has(> b, > strong, > p > b, > p > strong) { background: #353B45; }
/* One title split by the editor over several paragraphs and links reads as one line again. The
   full selector chain outweighs main.css's block paragraphs in page content
   (.left-menu-fix-page .flex-box .right-content .text-content p). */
.left-menu-fix-page .flex-box .right-content .text-content table td p,
.text-content table td p { display: inline; margin: 0; }
.left-menu-fix-page .flex-box .right-content .text-content table td p + p::before,
.text-content table td p + p::before { content: " "; }
.left-menu-fix-page .flex-box .right-content .text-content table td p:empty,
.left-menu-fix-page .flex-box .right-content .text-content table td p:has(> br:only-child),
.text-content table td p:empty,
.text-content table td p:has(> br:only-child) { display: none; }
.text-content table td a { color: #232A34; font-weight: 500; text-decoration: none; }
.text-content table td a:hover { text-decoration: underline; }
/* Two-column lists (title + date): the date stays on one line. */
.text-content table tr > td:nth-child(2):last-child { white-space: nowrap; width: 1%; color: #6B7280; }
@media (max-width: 767px) {
  .text-content table { display: block; overflow-x: auto; }
  .text-content table tr > td:nth-child(2):last-child { white-space: normal; }
}

/* ---------- İhaleler (Views/ihaleler.cshtml, ihaleDetay.cshtml): the tender list and a tender's
   facts card; its documents reuse the kit's .pdf-list / .file-link-row rows. */
.ihale-listesi { margin-top: 30px; }
.ihale-listesi__ara { display: block; margin-bottom: 16px; }
.ihale-listesi__ara input { width: 100%; max-width: 420px; padding: 12px 16px; border: 1px solid #C3C3C3; border-radius: 10px; font: inherit; color: #353B45; }
.ihale-listesi table { width: 100%; border-collapse: separate; border-spacing: 0; border: 1px solid #E1E3E6; border-radius: 12px; overflow: hidden; }
.ihale-listesi th, .ihale-listesi td { padding: 14px 18px; text-align: left; vertical-align: top; border-bottom: 1px solid #E1E3E6; color: #353B45; line-height: 1.5; }
.ihale-listesi th { background: #353B45; color: #FFF; font-size: 14px; font-weight: 600; }
.ihale-listesi tbody tr:last-child td { border-bottom: 0; }
.ihale-listesi tbody tr:nth-child(even) td { background: #F7F8F9; }
.ihale-listesi tbody tr:hover td { background: #EEF0F2; }
.ihale-listesi td a { color: #232A34; font-weight: 500; text-decoration: none; }
.ihale-listesi td a:hover { text-decoration: underline; }
.ihale-listesi__ref { min-width: 170px; }
.ihale-listesi__ref span { display: block; font-size: 14px; color: #6B7280; }
.ihale-listesi__tarih { white-space: nowrap; color: #6B7280; }
.ihale-listesi__bos { margin-top: 30px; color: #6B7280; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.ihale-kunye { margin: 24px 0 0; border: 1px solid #E1E3E6; border-radius: 12px; overflow: hidden; }
.ihale-kunye__satir { display: grid; grid-template-columns: 220px 1fr; border-bottom: 1px solid #E1E3E6; }
.ihale-kunye__satir:last-child { border-bottom: 0; }
.ihale-kunye dt { padding: 14px 18px; background: #F2F2F2; font-weight: 600; color: #353B45; }
.ihale-kunye dd { margin: 0; padding: 14px 18px; color: #353B45; }
.ihale-kunye dd span { display: block; }
.ihale-baslik { margin: 36px 0 0; font-size: 20px; font-weight: 600; color: #232A34; }
.ihale-dokumanlar__meta { display: block; margin-top: 2px; font-size: 13px; color: #6B7280; }
@media (max-width: 767px) {
  .ihale-listesi table { display: block; overflow-x: auto; }
  .ihale-kunye__satir { grid-template-columns: 1fr; }
  .ihale-kunye dt { padding-bottom: 6px; }
}