/**
 * Anadolu Üniversitesi Kütüphane - Base Styles
 * Reset, genel HTML elemanları, typography
 */

@charset "utf-8";

/* Font Imports */
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans:wght@400;500;600;700&family=Inter:wght@400;500;600;700&family=Roboto:wght@400;500;700&family=Open+Sans:wght@400;500;600;700&family=Poppins:wght@400;500;600;700&display=swap');

/* Reset ve Base */
html, body {
  margin: 0;
  padding: 0;
  width: 100%;
  position: relative;
  overflow-x: hidden;
}

* {
  box-sizing: border-box;
}

body {
  /* SAYFADAKI METNIN COGU KENDI BOYUTUNU YAZMIYOR, buradan miras aliyor.
     Baglanmadan once tarayici varsayilani 16px'te takili kaliyordu:
     olculdu (2026-09-25, makale-islem-ucretleri) 254 gorunur metin
     elemanindan 136'si yazi boyutu ayarina HIC tepki vermiyordu. Kendi
     font-size'i olan bildirimleri baglamak yetmiyor; miras alan metin
     icin KOK de baglanmali. */
  font-size: var(--fs-7);
  background-color: var(--bg-color);
  font-family: var(--font-family-primary);
  color: var(--text-color);
  line-height: var(--line-height-normal);
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  scrollbar-gutter: stable;
  transition: background-color 0.3s ease, color 0.3s ease;
}

/* Typography */
h1, h2, h3, h4, h5, h6 {
  margin-top: 0;
  color: var(--primary-color);
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-tight);
}

h1 { font-size: var(--fs-13); }
h2 { font-size: var(--fs-12); }
h3 { font-size: var(--fs-11); }
h4 { font-size: var(--fs-10); }
h5 { font-size: var(--fs-9); }
h6 { font-size: var(--fs-7); }

p {
  margin-top: 0;
  margin-bottom: 1rem;
}

/* Links */
a {
  color: var(--primary-color);
  text-decoration: none;
  transition: var(--transition);
}

a:hover {
  color: var(--secondary-color);
}

a:focus {
  outline: 2px solid var(--primary-color);
  outline-offset: 2px;
}

/* METİN İÇİ BAĞLANTILAR (2026-10-05): Genel Ayarlar › Metin İçi Bağlantılar.
   Yalnızca metin çeviricisinin ürettiği bağlantılar (a.md-link, utils.js > mdToHtml).
   app.js > applyLinkStyle <html>'e data-baglanti-* yazar; ayar boşsa öznitelik YOK ve
   bugünkü görünüm (bileşenin kendi kuralı ya da yukarıdaki genel kural) aynen kalır.
   Seçiciler [href] ile güçlendirildi: .accordion-body a, .news-modal-content a,
   .kdmm-metin a gibi bileşen kuralları ayarı ezmesin. */
html[data-baglanti-renk="metin"] a.md-link[href] {
  color: inherit;
}
html[data-baglanti-renk="metin"] a.md-link[href]:hover {
  color: var(--secondary-color);
}
html[data-baglanti-cizgi="her-zaman"] a.md-link[href] {
  text-decoration: underline;
  text-underline-offset: 2px;
}
html[data-baglanti-cizgi="uzerine"] a.md-link[href]:hover,
html[data-baglanti-cizgi="uzerine"] a.md-link[href]:focus-visible {
  text-decoration: underline;
  text-underline-offset: 2px;
}
html[data-baglanti-uzerine="ana"] a.md-link[href]:hover {
  color: var(--primary-color);
}
html:not([data-theme="dark"])[data-baglanti-uzerine="koyu"] a.md-link[href]:hover {
  color: var(--primary-dark);
}
/* Koyu zeminli kutu (kat başlığı gibi): bağlantı AYARDAN BAĞIMSIZ okunur kalır —
   yazının rengini alır ve altı çizilir. Ana renk koyu zeminde kayboluyordu. */
.koyu-zemin a[href] {
  color: inherit !important;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.koyu-zemin a[href]:hover {
  opacity: 0.85;
}

/* Lists */
ul, ol {
  padding-left: 1.5rem;
}

/* Images */
img {
  max-width: 100%;
  height: auto;
  display: block;
}

/* Görsel ikon (core/ikon.js, "img:assets/images/ikonlar/x.svg").
   Kutusu Bootstrap Icons'unkiyle AYNI: 1em x 1em, satır içi, taban çizgisinin
   .125em altında — böylece font ikonu yerine konunca satırlar kaymaz
   (tarayıcıda 2.398 ikonda ölçüldü). Rengi kendindedir; yazının rengini almaz.
   `img` kuralı yukarıda display:block + height:auto verdiği için burada
   açıkça ezilir. Bu kural HER sayfanın yüklediği base.css'te durmalı:
   inner-page-components.css ana sayfada yüklenmiyor. */
.kdm-ikon-gorsel {
  font-style: normal;
}
.kdm-ikon-gorsel > img {
  display: inline-block;
  width: 1em;
  height: 1em;
  max-width: none;
  object-fit: contain;
  vertical-align: -0.125em;
}
/* "imgw:" — yatay logo: yükseklik ikon kadar, en görselin oranına göre
   (en çok 6em). Editörün "burada yer var" dediği yerde kullanılır. */
.kdm-ikon-gorsel.kdm-ikon-genis > img {
  width: auto;
  max-width: 6em;
}

/* Layout Containers */
.main-container {
  margin-top: var(--header-height);
  padding-top: 10px;
  flex: 1 0 auto;
  width: 100%;
}

/* Sayfalarda main "container main-container" iki sinifini birlikte tasiyor.
   Asagidaki `.container { margin: 0 auto }` ayni ozgullukte ve SONRA geldigi
   icin yukaridaki margin-top'u eziyordu: menu payi CSS'te hic calismiyor,
   main 0'da baslayip header.js satir ici 80px yazinca asagi kayiyordu
   (ana sayfa duzen kaymasinin 0,05'i; Lighthouse, 2026-10-14, olculdu).
   Yalnizca margin-top guclendirildi: padding-top'u da guclendirmek
   .container'in yatay/dikey dolgusunu degistirirdi. has-hero (0,2,1) ve
   has-toc kurallari bunu yine yener. */
.container.main-container {
  margin-top: var(--header-height);
}

/* HERO VARSA bu margin GEREKSIZ: .page-hero zaten
   `margin-top: var(--header-height)` ile sabit header'i klirliyor ve
   main'den ONCE geliyor. Ikinci kez eklenince hero ile ilk kart arasinda
   masaustunde 80px + 10px = 90px olu bosluk kaliyordu (2026-09-23, olculdu).
   Sinifi hero.js hero GERCEKTEN cizildiginde ekliyor; hero'su olmayan
   index.html bu margin'e muhtac oldugu icin orada eklenmiyor.
   Hero ile icerik arasindaki bosluk artik Genel Ayarlar > Hero >
   "Icerikle Arasindaki Bosluk" (contentGap) ile ayarlaniyor. */
body.has-hero .main-container {
  margin-top: 0;
}

.container {
  max-width: var(--container-max-width);
  width: 100%;
  margin: 0 auto;
  padding: 0 15px;
}

.full-width {
  width: 100vw;
  position: relative;
  overflow: visible;
  margin-left: calc(-50vw + 50%);
  margin-right: calc(-50vw + 50%);
}

.full-width .container {
  max-width: var(--container-max-width);
  margin: 0 auto;
  padding: 0 15px;
}

/* Section Title */
.section-title {
  font-size: var(--fs-9);
  font-weight: 700;
  margin: 0;
  padding-bottom: 0.4rem;
  position: relative;
  color: var(--primary-color);
  display: inline-block;
  border-bottom: 2px solid var(--accent-color);
}

/* Variants */
.section-title.title-large {
  font-size: var(--fs-10);
}

.section-title.title-small {
  font-size: var(--fs-8);
}

.section-title.no-border {
  border-bottom: none;
  padding-bottom: 0;
}

.text-center.section-title {
  display: block;
  text-align: center;
}

/* Utility Classes */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.text-muted {
  color: var(--text-muted);
}

/* Forms */
input[type="text"],
input[type="search"],
input[type="email"],
input[type="number"],
select,
textarea {
  width: 100%;
  padding: 0.75rem 1rem;
  border: 1px solid var(--border-color);
  border-radius: var(--radius-sm);
  font-family: inherit;
  font-size: var(--font-size-base);
  background-color: var(--bg-input);
  color: var(--text-color);
  transition: var(--transition);
}

input::placeholder {
  color: var(--text-muted);
  opacity: 0.7;
}

input:focus,
select:focus,
textarea:focus {
  outline: none;
  border-color: var(--primary-color);
  box-shadow: 0 0 0 0.25rem rgba(31, 76, 138, 0.25);
}

/* Dark Theme Adjustments */
html[data-theme="dark"] input[type="text"],
html[data-theme="dark"] input[type="search"],
html[data-theme="dark"] input[type="email"],
html[data-theme="dark"] input[type="number"],
html[data-theme="dark"] select,
html[data-theme="dark"] textarea {
  background-color: var(--bg-input);
  color: white;
  border: 1px solid var(--border-color);
}

html[data-theme="dark"] input::placeholder {
  color: #999999;
}

html[data-theme="dark"] input:focus,
html[data-theme="dark"] select:focus,
html[data-theme="dark"] textarea:focus {
  border-color: var(--secondary-color);
  box-shadow: 0 0 0 0.25rem rgba(219, 74, 57, 0.25);
}

/* Responsive */
@media (max-width: 767px) {
  :root {
    --header-height: 60px;
  }
  
  body {
    overflow-x: hidden;
  }
  
  .container {
    padding-left: 12px;
    padding-right: 12px;
  }
  
  .section-title {
    font-size: var(--fs-8);
    padding-bottom: 0.35rem;
  }

  .section-title.title-large {
    font-size: var(--fs-10);
  }
  
  h1 { font-size: var(--fs-12); }
  h2 { font-size: var(--fs-11); }
  h3 { font-size: var(--fs-10); }
  h4 { font-size: var(--fs-9); }
}

@media (max-width: 575.98px) {
  .section-title {
    font-size: var(--fs-8);
    padding-bottom: 0.3rem;
  }

  .section-title.title-large {
    font-size: var(--fs-9);
  }
}

/* Print Styles */
@media print {
  body {
    background: white;
    color: black;
  }
  
  .main-header,
  .footer,
  .quick-actions-panel {
    display: none;
  }
}

/* ====================================================================
   SAYFA BAZINDA ÜST MENÜ / ALT BİLGİ GİZLEME
   Veri : data/pages/<sayfa>.json > chrome.hideHeader / chrome.hideFooter
   Yazan: app.js > applyChrome — öznitelikleri koyan TEK yer.

   NEDEN ÖZNİTELİK, NEDEN "init'i atlama": bileşenler her zaman
   başlatılır, yalnızca GÖRÜNMEZ olurlar. Böylece yönetim aracındaki
   canlı önizleme kutuyu işaretleyip kaldırdığında menü geri gelir;
   başlatma atlanırsa geri getirmenin yolu tam sayfa yenilemek olurdu
   (aynı aile: "bayatlayan disabled durumu", DERSLER.md).

   NEDEN --header-height SIFIRLANIYOR: sabit menünün bıraktığı boşluğun
   TEK otoritesi bu değişken — hero'nun margin-top'u, .main-container'ın
   margin'i ve içindekiler listesinin sticky offset'i (hybrid-toc) hepsi
   ona bağlı (ölçüldü: 16 yerde geçiyor). Tek tek düzeltmek yerine
   değişken sıfırlanıyor; menü gizliyken hiçbir yerde ölü boşluk kalmaz.

   NEDEN !important: header.js > setupHeaderOffset .main-container'a
   SATIR İÇİ margin-top yazıyor (header.offsetHeight). Satır içi stil
   sınıf kurallarını yener; menü sonradan (önizlemede) gizlenirse o
   80px orada kalırdı. */
body[data-ust-menu="gizli"] {
  --header-height: 0px;
}

body[data-ust-menu="gizli"] #header-container {
  display: none;
}

body[data-ust-menu="gizli"] .main-container {
  margin-top: 0 !important;
}

/* Mobil alt bar üst menünün dar ekran karşılığıdır (aynı gezinme
   ağacını çizer), bu yüzden menüyle birlikte gizlenir; alt bilgiyle
   değil. Panelleri ve karartması da gitmeli, yoksa açık kalan bir
   panel ekranı kaplar. */
body[data-ust-menu="gizli"] .mobile-bottom-bar,
body[data-ust-menu="gizli"] .bottom-bar-overlay,
body[data-ust-menu="gizli"] .bottom-bar-panel {
  display: none;
}

body[data-alt-bilgi="gizli"] #footer-container {
  display: none;
}

/* SITE UYARILARI (2026-09-28). Metinler Yonetim > Genel Ayarlar > Site
   Uyarilari'ndan gelir; yonetim/sayfa_bloklari.py her sayfaya gomer.
   .kdm-noscript: JavaScript kapaliyken (JS yok, yani bu kural tek basina
   calismali). .kdm-uyari: icerik yuklenemedi / haber-duyuru bulunamadi. */
.kdm-noscript,
.kdm-uyari {
  max-width: var(--container-max-width, 1200px);
  margin: 1.5rem auto;
  padding: 1rem 1.25rem;
  border: 1px solid var(--border-color, #eaedf0);
  border-left: 4px solid var(--accent-dark, #f5b520);
  border-radius: var(--radius-sm, 0.5rem);
  background: var(--bg-card, #fff);
  color: var(--text-color, #212529);
}
.kdm-noscript {
  margin: 1rem;
}
.kdm-noscript p,
.kdm-uyari p {
  margin: 0 0 0.5rem;
}
.kdm-uyari-baslik {
  display: block;
  font-weight: 700;
  margin-bottom: 0.25rem;
}
.kdm-uyari-baglantilar {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.25rem;
  margin: 0.75rem 0 0;
  padding: 0;
}
.kdm-uyari-baglantilar a {
  color: var(--primary-color, #1F4C8A);
}

/* Sosyal medya şeridi (core/sosyal-serit.js) — haber, duyuru, Genel Modallar
   ve ana sayfa duyurusu pencerelerinin altında, kayıtta işaretliyse.
   Kural BURADA: ana sayfa inner-page-components.css yüklemiyor.
   Yer tutucu veri gelene kadar (ya da hesap yoksa) boştur ve yer kaplamaz. */
.kdm-sosyal {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.5rem 0.875rem;
  width: 100%;
  margin: 0;
  padding-top: 0.875rem;
  border-top: 1px dashed var(--border-color, #e0e0e0);
  font-size: var(--fs-4, 0.875rem);
  line-height: 1.4;
  color: var(--text-muted, #6b7280);
  text-align: center;
}
.kdm-sosyal:empty {
  display: none;
}
/* Alt bölümde şeritten önce hiçbir şey yoksa (düğmesiz modal) ayırıcı çizgi
   gereksiz: bölümün kendi üst çizgisi zaten var. */
.kdm-sosyal:first-child {
  padding-top: 0;
  border-top: 0;
}
.kdm-sosyal-hesaplar {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}
.kdm-sosyal-hesap {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  border: 1px solid var(--border-color, #e0e0e0);
  border-radius: 50%;
  background: var(--bg-card, #fff);
  color: var(--primary-color, #1F4C8A);
  font-size: 1rem;
  line-height: 1;
  text-decoration: none;
  transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.kdm-sosyal-hesap:hover,
.kdm-sosyal-hesap:focus-visible {
  background: var(--primary-color, #1F4C8A);
  border-color: var(--primary-color, #1F4C8A);
  color: #fff;
}
[data-theme="dark"] .kdm-sosyal-hesap {
  background: transparent;
  color: var(--text-color, #e5e7eb);
}
[data-theme="dark"] .kdm-sosyal-hesap:hover,
[data-theme="dark"] .kdm-sosyal-hesap:focus-visible {
  background: var(--primary-color, #1F4C8A);
  color: #fff;
}

/* ZİYARETÇİ İSTATİSTİKLERİ ONAY ŞERİDİ (2026-10-14, core/analitik.js). Google kodu yalnız "Kabul et"ten
   sonra yüklenir. Mobilde alt çubuğun (≈76 px) ÜSTÜNDE durur; menü gizli sayfada alt çubuk da gizli olduğu
   için şerit en alta iner. z-index SİTEDEKİ HER ÖRTÜNÜN ÜSTÜNDE (en yüksek 10000): ölçüldü, ana sayfada duyuru
   modalının örtüsü (#autoModal) şeridi kapatıyor, "Kabul et / Reddet" tıklanamıyordu. */
.kdm-cerez-serit {
  position: fixed;
  left: 16px;
  right: 16px;
  bottom: 16px;
  z-index: 10050;
  max-width: 960px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 14px 18px;
  background: var(--bg-card);
  color: var(--text-color);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
  font-size: var(--fs-6);
  line-height: 1.5;
}
.kdm-cerez-metin { flex: 1 1 auto; min-width: 0; }
.kdm-cerez-metin p { margin: 0; }
.kdm-cerez-metin p + p { margin-top: 0.5em; }
.kdm-cerez-dugmeler { display: flex; gap: 8px; flex: 0 0 auto; }
.kdm-cerez-dugmeler button {
  font: inherit;
  padding: 8px 16px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--primary-color);
  cursor: pointer;
  white-space: nowrap;
}
.kdm-cerez-kabul { background: var(--primary-color); color: var(--white); }
.kdm-cerez-red { background: transparent; color: var(--primary-color); }
.kdm-cerez-dugmeler button:focus-visible { outline: 2px solid var(--primary-color); outline-offset: 2px; }
[data-theme="dark"] .kdm-cerez-red { color: var(--text-color); border-color: var(--text-color); }
@media (max-width: 767px) {
  .kdm-cerez-serit {
    left: 8px;
    right: 8px;
    bottom: 96px; /* yedek; JS alt cubugun GERCEK konumunu olcup yazar (analitik.js > konumla) */
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
    padding: 12px 14px;
  }
  .kdm-cerez-dugmeler button { flex: 1 1 0; }
  body[data-ust-menu="gizli"] .kdm-cerez-serit { bottom: 8px; }
}