/* Ulukat Tema · Basın · v0.1.0 */

/* ── GİRİŞ + RENKLER ── */
.ubs { padding: 120px 0 70px; }
.ubs-bas { max-width: 900px; margin: 0 0 56px; }
.ubs-metin { max-width: 60ch; margin: 0; color: #c9c9c9; font: 500 17px/1.75 var(--ul-sans2); text-wrap: pretty; }
.ubs-h3 { margin: 0 0 22px; color: #fff; font: 700 24px/1.3 var(--ul-serif); }

.ubs-renkler { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; margin: 0; padding: 0; list-style: none; }
.ubs-renkler--vitrin .ubs-renk:nth-child(-n+2) { grid-column: span 2; }
.ubs-renk {
  position: relative; overflow: hidden; border: 1px solid rgba(255, 255, 255, .08); border-radius: 12px; background: #151311;
  transition: border-color .4s var(--ul-ease);
}
.ul-js .ubs-renkler > li[data-ul-reveal] { transition-delay: calc(var(--i, 0) * 70ms); }
.ubs-renk:hover { border-color: rgba(181, 123, 81, .5); }
.ubs-renk-ornek { display: block; height: 150px; background: var(--renk); border-bottom: 1px solid rgba(255, 255, 255, .08); }
.ubs-renkler--vitrin .ubs-renk:nth-child(-n+2) .ubs-renk-ornek { height: 220px; }
.ubs-renk-bilgi { display: flex; flex-direction: column; gap: 4px; padding: 18px 70px 20px 20px; }
.ubs-renk-ad { color: #fff; font: 600 15px/1.4 var(--ul-sans2); }
.ubs-renk-kod { color: #b0b0b0; font: 600 14px/1.4 var(--ul-font); letter-spacing: .04em; font-variant-numeric: tabular-nums; }

.ubs-kopya {
  position: absolute; right: 14px; bottom: 16px; display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px;
  border: 1px solid rgba(255, 255, 255, .16); border-radius: 50%; background: transparent; color: #ddd; cursor: pointer;
  transition: background-color .3s var(--ul-ease), border-color .3s var(--ul-ease), color .3s var(--ul-ease), transform .2s var(--ul-ease);
}
.ubs-kopya .ul-ikon { position: absolute; width: 18px; height: 18px; transition: opacity .25s var(--ul-ease), transform .35s var(--ul-ease-cikis); }
.ubs-kopya .ul-ikon:nth-of-type(2) { opacity: 0; transform: scale(.5); }
.ubs-kopya:hover { border-color: var(--ul-bronz); color: #fff; }
.ubs-kopya:active { transform: scale(.94); }
.ubs-kopya:focus-visible { outline: 2px solid var(--ul-gold); outline-offset: 3px; }
.ubs-kopya.is-kopyalandi { background: var(--ul-bronz); border-color: var(--ul-bronz); color: #fff; }
.ubs-kopya.is-kopyalandi .ul-ikon:nth-of-type(1) { opacity: 0; transform: scale(.5); }
.ubs-kopya.is-kopyalandi .ul-ikon:nth-of-type(2) { opacity: 1; transform: none; }
.ubs-kopya-yazi {
  position: absolute; right: calc(100% + 10px); top: 50%; padding: 5px 9px; border-radius: 5px; background: #000; color: #fff;
  font: 600 12px/1.2 var(--ul-sans2); white-space: nowrap; opacity: 0; transform: translate(4px, -50%); pointer-events: none;
  transition: opacity .25s var(--ul-ease), transform .3s var(--ul-ease);
}
.ubs-kopya:hover .ubs-kopya-yazi,
.ubs-kopya:focus-visible .ubs-kopya-yazi,
.ubs-kopya.is-kopyalandi .ubs-kopya-yazi { opacity: 1; transform: translate(0, -50%); }

/* ── TİPOGRAFİ ── */
.ubt { padding: 70px 0 60px; }
.ubt-liste { margin-top: 36px; border-top: 1px solid rgba(255, 255, 255, .1); }
.ubt-satir { display: grid; grid-template-columns: 250px minmax(0, 1fr); gap: 56px; align-items: start; padding: 42px 0; border-bottom: 1px solid rgba(255, 255, 255, .1); }
.ubt-meta { display: flex; flex-direction: column; gap: 6px; }
.ubt-etiket { color: var(--ul-fawn); font: 700 13px/1.4 var(--ul-sans2); letter-spacing: .06em; text-transform: uppercase; }
.ubt-font { color: #fff; font: 700 24px/1.3 var(--ul-serif); }
.ubt-font--raleway { font-family: var(--ul-sans2); font-weight: 600; }
.ubt-deger { color: #9d9d9d; font: 500 14px/1.5 var(--ul-sans2); }
.ubt-link { display: inline-flex; align-items: center; gap: 6px; margin-top: 8px; color: var(--ul-fawn); font: 600 13.5px/1.4 var(--ul-sans2); text-decoration: none; }
.ubt-link .ul-ikon { width: 14px; height: 14px; transition: transform .35s var(--ul-ease-cikis); }
.ubt-link:hover { color: #fff; }
.ubt-link:hover .ul-ikon { transform: translate(2px, -2px); }
.ubt-link:focus-visible { outline: 2px solid var(--ul-gold); outline-offset: 3px; border-radius: 2px; }

.ubt-ornek p { margin: 0; color: #fff; }
.ubt-ornek--h1 p:first-child { font: 700 clamp(38px, 5vw, 64px)/1.12 var(--ul-serif); text-wrap: balance; }
.ubt-ornek--h1 .ubt-harfler { margin-top: 18px; color: #8f8f8f; font: 400 clamp(18px, 2vw, 24px)/1.5 var(--ul-serif); letter-spacing: .04em; }
.ubt-ornek--h2 p { font: 700 clamp(28px, 3.2vw, 40px)/1.2 var(--ul-serif); text-wrap: balance; }
.ubt-ornek--p p { max-width: 62ch; color: #b0b0b0; font: 500 16px/1.8 var(--ul-sans2); }

/* ── MEDYA KİTİ ── */
.ubm { padding: 70px 0 40px; }
.ubm-liste { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; margin: 0; padding: 0; list-style: none; }
.ul-js .ubm-liste > li[data-ul-reveal] { transition-delay: calc(var(--i, 0) * 100ms); }
.ubm-kart { display: flex; flex-direction: column; overflow: hidden; border: 1px solid rgba(255, 255, 255, .08); border-radius: 14px; background: #151311; transition: border-color .4s var(--ul-ease); }
.ubm-kart:hover { border-color: rgba(181, 123, 81, .45); }
.ubm-onizle { position: relative; display: flex; align-items: center; justify-content: center; aspect-ratio: 4 / 3; padding: 36px; overflow: hidden; background: #f4f4f4; }
.ubm-kart--png .ubm-onizle { padding: 56px; }
.ubm-onizle img { width: 100%; height: 100%; object-fit: contain; mix-blend-mode: multiply; transition: transform .8s var(--ul-ease-cikis); }
.ubm-kart:hover .ubm-onizle img { transform: scale(1.04); }
.ubm-tur { position: absolute; top: 14px; left: 14px; padding: 6px 10px; border-radius: 6px; background: #121212; color: var(--ul-fawn); font: 700 12px/1 var(--ul-sans2); letter-spacing: .08em; }
.ubm-yazi { display: flex; flex: 1; flex-direction: column; padding: 24px 24px 26px; }
.ubm-ad { margin: 0 0 8px; color: #fff; font: 700 21px/1.3 var(--ul-serif); }
.ubm-metin { flex: 1; margin: 0 0 22px; color: #bdbdbd; font: 500 14.5px/1.6 var(--ul-sans2); }
.ubm-indir { align-self: flex-start; min-height: 52px; padding-left: 24px; font-size: 15px; }
.ubm-indir .uif-gonder-ok { width: 36px; height: 36px; }
.ubm-indir:hover .uif-gonder-ok { transform: translateY(2px); }
.ubm-boyut { margin-left: 8px; font-size: 13px; font-weight: 600; }

/* ── DUYARLI ── */
@media (max-width: 991px) {
  .ubs { padding: 90px 0 60px; }
  .ubs-renkler { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ubt-satir { grid-template-columns: 1fr; gap: 18px; padding: 32px 0; }
  .ubm-liste { grid-template-columns: 1fr; }
  .ubm-kart { flex-direction: row; }
  .ubm-onizle { flex: 0 0 38%; aspect-ratio: auto; min-height: 220px; }
}
@media (max-width: 575px) {
  .ubs { padding: 70px 0 50px; }
  .ubs-renkler { gap: 12px; }
  .ubs-renk-ornek { height: 110px; }
  .ubs-renkler--vitrin .ubs-renk:nth-child(-n+2) .ubs-renk-ornek { height: 150px; }
  .ubs-renk-bilgi { padding: 14px 60px 16px 14px; }
  .ubs-kopya { right: 10px; bottom: 12px; }
  .ubm-kart { flex-direction: column; }
  .ubm-onizle { flex: none; aspect-ratio: 4 / 3; min-height: 0; }
  .ubm-indir { width: 100%; justify-content: space-between; }
}