/* bilesenler.css — düğme, kart, üst menü, alt bilgi, ortak parçalar */

/* ---------- düğme ----------
   Matbu dilde düğme bir mürekkep bloğudur: keskin köşe, kalın çerçeve,
   büyük harf künye yazısı. Yumuşak çerçeve + normal yazım kurumsal
   dilin kalıntısıydı. */
.dugme {
  --d-zemin: transparent;
  --d-metin: var(--metin);
  --d-cizgi: var(--metin);
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: var(--bos-3);
  padding: var(--bos-4) var(--bos-6);
  background: var(--d-zemin);
  color: var(--d-metin);
  border: 2px solid var(--d-cizgi);
  border-radius: 0;
  font-size: var(--ol-2xs);
  font-weight: 800;
  font-stretch: 108%;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  cursor: pointer;
  overflow: hidden;
  transition: color var(--gecis-hizli), border-color var(--gecis-hizli);
}
/* mürekkep perdesi soldan basar */
.dugme::after {
  content: "";
  position: absolute; inset: 0;
  background: var(--vurgu);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--gecis);
  z-index: 0;
}
.dugme > * { position: relative; z-index: 1; }
.dugme:hover, .dugme:focus-visible { color: var(--zemin-kat); border-color: var(--vurgu); }
.dugme:hover::after, .dugme:focus-visible::after { transform: scaleX(1); }

.dugme-dolu { --d-zemin: var(--vurgu); --d-metin: var(--zemin-kat); --d-cizgi: var(--vurgu); }
.dugme-dolu::after { background: var(--metin); }

.dugme-sade {
  padding: 0; border: 0; background: none;
  border-bottom: 3px solid var(--metin);
  padding-bottom: var(--bos-2);
  border-radius: 0;
}
.dugme-sade::after { top: auto; height: 3px; background: var(--vurgu); }
.dugme-sade:hover, .dugme-sade:focus-visible { color: var(--vurgu); border-color: var(--vurgu); }

.ok { transition: transform var(--gecis-hizli); }
.dugme:hover .ok { transform: translateX(4px); }

/* ---------- üst menü ---------- */
.ust {
  position: fixed;
  inset-block-start: 0; inset-inline: 0;
  z-index: 90;
  transition: background var(--gecis), backdrop-filter var(--gecis),
              border-color var(--gecis), transform var(--gecis);
  /* Matbuda başlık şeridi her zaman vardır; kaybolan kenarlık kurumsal
     dilin alışkanlığıydı. */
  border-bottom: 3px solid var(--metin);
  background: var(--zemin);
}
.ust[data-durum="kaydi"] {
  background: var(--perde);
  backdrop-filter: blur(14px) saturate(1.2);
}
.ust[data-durum="gizli"] { transform: translateY(-100%); }

.ust-ic {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--bos-5);
  min-height: 4.75rem;
}

.marka {
  display: flex; align-items: baseline; gap: var(--bos-3);
  font-family: var(--yazi-baslik);
  font-weight: 900;
  font-stretch: 115%;
  font-size: var(--ol-s);
  letter-spacing: -0.01em;
  text-transform: uppercase;
  line-height: 1;
}
/* "AV." künyesi adın ÖNÜNDE; unvan önce okunur. */
.marka span {
  font-size: var(--ol-3xs);
  font-weight: 700;
  font-stretch: 100%;
  letter-spacing: 0.16em;
  color: var(--vurgu);
}

.menu { display: flex; align-items: center; gap: clamp(1rem, 2.2vw, 2.25rem); }
/* Menü 7 ögeye çıkınca 1024px'te İKİ SATIRA düşüyordu (ölçüldü). Bu
   genişlikte ara ve harf aralığı kısılır; tek satır kuralı korunur. */
@media (min-width: 64.01rem) and (max-width: 78rem) {
  .menu { gap: 0.85rem; }
  .menu a { font-size: var(--ol-3xs); letter-spacing: 0.05em; }
}
.menu a {
  position: relative;
  font-size: var(--ol-2xs);
  font-weight: 700;
  font-stretch: 104%;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--metin-sonuk);
  padding-block: var(--bos-2);
  transition: color var(--gecis-hizli);
}
.menu a::after {
  content: ""; position: absolute; left: 0; bottom: 0;
  width: 100%; height: 3px; background: var(--vurgu);
  transform: scaleX(0); transform-origin: right;
  transition: transform var(--gecis);
}
.menu a:hover, .menu a[aria-current="page"] { color: var(--metin); }
.menu a:hover::after, .menu a[aria-current="page"]::after {
  transform: scaleX(1); transform-origin: left;
}

.menu-dugme {
  display: none;
  width: 2.75rem; height: 2.75rem;
  background: none; border: 2px solid var(--metin);
  border-radius: 0; cursor: pointer;
  padding: 0; place-items: center;
}
.menu-dugme span, .menu-dugme span::before, .menu-dugme span::after {
  content: ""; display: block; width: 1.15rem; height: 1px;
  background: var(--metin); transition: transform var(--gecis), opacity var(--gecis-hizli);
}
.menu-dugme span::before { transform: translateY(-6px); }
.menu-dugme span::after  { transform: translateY(5px); }
.menu-dugme[aria-expanded="true"] span { background: transparent; }
.menu-dugme[aria-expanded="true"] span::before { transform: rotate(45deg); }
.menu-dugme[aria-expanded="true"] span::after  { transform: rotate(-45deg); }

@media (max-width: 64rem) {
  .menu-dugme { display: grid; }
  .ust-ic { gap: var(--bos-3); }
  .menu {
    position: fixed; inset: 4.75rem 0 auto 0;
    flex-direction: column; align-items: flex-start;
    gap: 0;
    background: var(--zemin-derin);
    border-block: 1px solid var(--cizgi);
    padding: var(--bos-4) var(--kenar) var(--bos-7);
    clip-path: inset(0 0 100% 0);
    transition: clip-path var(--gecis);
  }
  .menu[data-acik="evet"] { clip-path: inset(0 0 0 0); }
  .menu a { font-size: var(--ol-m); padding-block: var(--bos-4); width: 100%;
            border-bottom: 1px solid var(--cizgi); text-transform: none;
            letter-spacing: 0; font-family: var(--yazi-baslik); }
  .menu a::after { display: none; }
}

/* ---------- kart ---------- */
/* Kart bir kutu değil, üstünde kalın mürekkep çizgisi olan bir sütun.
   Yumuşak çerçeveli beyaz kutu jenerik arayüz dilidir; matbuda ayrımı
   çizgi ve boşluk yapar. */
.kart {
  position: relative;
  display: flex; flex-direction: column;
  background: none;
  border: 0;
  border-block-start: 3px solid var(--metin);
  border-radius: 0;
  padding-block-start: var(--bos-4);
  overflow: hidden;
  transition: border-color var(--gecis);
}
.kart:hover { border-block-start-color: var(--vurgu); }
.kart-gorsel { position: relative; aspect-ratio: 3 / 2; overflow: hidden; background: var(--zemin-derin); }
.kart-gorsel img { width: 100%; height: 100%; object-fit: cover;
                   transition: transform 800ms cubic-bezier(0.22,0.61,0.36,1); }
.kart:hover .kart-gorsel img { transform: scale(1.05); }
.kart-govde { display: flex; flex-direction: column; gap: var(--bos-3);
              padding: var(--bos-4) 0 var(--bos-6); flex: 1; }
.kart-tarih { font-size: var(--ol-3xs); font-weight: 700; letter-spacing: 0.12em;
              text-transform: uppercase; color: var(--vurgu); }
.kart-baslik { font-family: var(--yazi-baslik); font-size: var(--ol-l);
               font-weight: 800; font-stretch: 110%; text-transform: uppercase;
               line-height: 1.02; letter-spacing: -0.01em; text-wrap: balance; }
.kart-ozet { color: var(--metin-sonuk); font-size: var(--ol-xs); flex: 1;
             display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical;
             overflow: hidden; }
/* kartın tamamı tıklanabilir ama okuyucuya tek bağlantı görünür */
.kart-bag::after { content: ""; position: absolute; inset: 0; }

/* ---------- ızgara ---------- */
.izgara { display: grid; gap: var(--bos-5); }
.izgara-2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr)); }
.izgara-3 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr)); }

/* ---------- bölüm başlığı ---------- */
/* Bolum basligi. Ayni kalip sayfada dort kez geciyor; kart basligi gibi
   degil GAZETE BOLUM AYRACI gibi okunmasi icin ustune tam genislikte
   murekkep cizgisi kondu ve baslik cizginin altina oturdu. */
.bolum-bas {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: var(--bos-6); flex-wrap: wrap;
  margin-bottom: var(--bos-6);
  padding-block-start: var(--bos-4);
  border-block-start: 5px solid var(--metin);
}
.bolum-bas > div { display: flex; flex-direction: column; gap: var(--bos-4); }

/* ---------- alt bilgi ---------- */
.alt {
  border-top: 5px solid var(--metin);
  background: var(--zemin-derin);
  padding-block: var(--bos-8) var(--bos-6);
}
.alt-ic { display: grid; gap: var(--bos-7);
          grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr)); }
.alt h3 { font-size: var(--ol-3xs); color: var(--vurgu);
          margin-bottom: var(--bos-4); font-weight: 800;
          letter-spacing: 0.14em; text-transform: uppercase; }
.alt a { color: var(--metin-sonuk); font-size: var(--ol-xs); transition: color var(--gecis-hizli); }
.alt a:hover { color: var(--metin); }
.alt li + li { margin-top: var(--bos-3); }
.alt-son { margin-top: var(--bos-8); padding-top: var(--bos-5);
           border-top: 1px solid var(--cizgi);
           display: flex; justify-content: space-between; flex-wrap: wrap; gap: var(--bos-4);
           font-size: var(--ol-3xs); color: var(--metin-silik); }

/* ---------- sosyal ---------- */
.sosyal { display: flex; gap: var(--bos-3); }
.sosyal a {
  display: grid; place-items: center;
  width: 2.5rem; height: 2.5rem;
  border: 1px solid var(--cizgi); border-radius: 50%;
  transition: border-color var(--gecis-hizli), background var(--gecis-hizli),
              color var(--gecis-hizli);
}
.sosyal a:hover { border-color: var(--vurgu); background: var(--vurgu); color: var(--zemin-derin); }
.sosyal svg { width: 1.05rem; height: 1.05rem; fill: currentColor; }

/* ---------- yükleniyor / boş durum ---------- */
.durum {
  grid-column: 1 / -1;
  padding: var(--bos-8) var(--bos-5);
  text-align: center;
  color: var(--metin-silik);
  border: 1px dashed var(--cizgi);
  border-radius: var(--kose);
  font-size: var(--ol-xs);
}
.durum[data-tur="hata"] { color: var(--hata); border-color: var(--hata-cizgi); }

/* ---------- kaydırınca belirme ----------
   Varsayılan GÖRÜNÜR değil ama JS yoksa da görünür kalsın diye
   .js-var işaretine bağlı: betik çalışmazsa hiçbir şey gizlenmez. */
.js-var [data-belir] {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity 900ms cubic-bezier(0.22,0.61,0.36,1),
              transform 900ms cubic-bezier(0.22,0.61,0.36,1);
}
.js-var [data-belir="acik"] { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .js-var [data-belir] { opacity: 1; transform: none; }
}

/* Yazdirma: belirme durumu KAGIDA da tasiniyordu. Olculdu — ana sayfanin
   19 blogundan 14'u yazdirma goruntusunde opacity:0 kalip bos cikiyordu.
   Kagitta kaydirma diye bir sey yok, dolayisiyla gozcu hicbir zaman
   tetiklenmiyor. Yazdirirken belirme tamamen devre disi. */
@media print {
  .js-var [data-belir] { opacity: 1 !important; transform: none !important; }
  .gren, .jenerik { display: none !important; }
  .ust { position: static; }
}

/* ---------- tema anahtarı ---------- */
.tema-dugme {
  position: relative;
  display: grid;
  place-items: center;
  width: 2.6rem; height: 2.6rem;
  flex: 0 0 auto;
  background: none;
  border: 1px solid var(--cizgi);
  border-radius: 50%;
  cursor: pointer;
  color: var(--metin-sonuk);
  transition: color var(--gecis-hizli), border-color var(--gecis-hizli),
              background var(--gecis-hizli);
}
.tema-dugme:hover { color: var(--metin); border-color: var(--cizgi-guclu); }
.tema-dugme svg { width: 1.05rem; height: 1.05rem; fill: none;
                  stroke: currentColor; stroke-width: 1.5;
                  stroke-linecap: round; stroke-linejoin: round;
                  position: absolute;
                  transition: opacity var(--gecis), transform var(--gecis); }
/* koyu temada ay, açık temada güneş görünür */
.tema-dugme .ay    { opacity: 1; transform: none; }
.tema-dugme .gunes { opacity: 0; transform: rotate(-90deg) scale(0.6); }
:root[data-tema="acik"] .tema-dugme .ay    { opacity: 0; transform: rotate(90deg) scale(0.6); }
:root[data-tema="acik"] .tema-dugme .gunes { opacity: 1; transform: none; }

/* ---------- üst menü sağ araçları ---------- */
.ust-araclar { display: flex; align-items: center; gap: var(--bos-3); flex: 0 0 auto; }

/* ---------- alt bilgide mesleki blok ----------
   TBB Reklam Yasağı Yönetmeliği m.7/d'nin izin verdiği alanlarla sınırlı.
   Bilinçli olarak küçük ve sönük: tanıtım değil, künye. */
.alt-ozet {
  margin-top: var(--bos-4);
  color: var(--metin-sonuk);
  font-size: var(--ol-xs);
  max-width: 22rem;
}
.alt-meslek dl { display: grid; gap: var(--bos-2); margin: 0; }
.alt-meslek dl > div {
  display: flex; justify-content: space-between; gap: var(--bos-4);
  font-size: var(--ol-3xs);
  padding-bottom: var(--bos-2);
  border-bottom: 1px solid var(--cizgi);
}
.alt-meslek dt { color: var(--metin-silik); }
.alt-meslek dd { margin: 0; color: var(--metin-sonuk); text-align: right; }
.alt-meslek .alt-eksik { color: var(--metin-silik); opacity: 0.6; }

/* Kaynak hesap süzgeci — galeri ve video üstünde. */
.hesap-suzgec { display: flex; flex-wrap: wrap; gap: var(--bos-2); margin-bottom: var(--bos-5); }
.hesap-suzgec button {
  font: 600 0.74rem/1 var(--yazi-govde); letter-spacing: 0.12em; text-transform: uppercase;
  padding: 0.65em 1.1em; border: 1px solid var(--cizgi); border-radius: 999px;
  background: transparent; color: var(--metin-sonuk); cursor: pointer;
  transition: border-color 0.2s, color 0.2s, background 0.2s;
}
.hesap-suzgec button[aria-pressed="true"] {
  border-color: var(--vurgu); color: var(--vurgu); background: var(--hale);
}
.hesap-suzgec button:hover { border-color: var(--vurgu); color: var(--vurgu); }
.hesap-suzgec button:focus-visible { outline: 2px solid var(--vurgu); outline-offset: 2px; }

/* Bölüm başı ayracı matbu dönemden kalın beyaz kalmıştı; lacivert+altın
   dilinde ince altın çizgi. */
.bolum-bas { border-top: 1px solid var(--cizgi-guclu) !important; }