/* KilerOtantik özel stilleri */

/* Logo PDF'indeki el yazısı font: Desyrel */
@font-face {
  font-family: "Desyrel";
  src: url("/static/img/desyrel.ttf") format("truetype");
  font-display: optional;
}

/* Login başlığı için el yazısı font: Kalam */
@font-face {
  font-family: "Kalam";
  src: url("/static/img/kalam.ttf") format("truetype");
  font-weight: 700;
  font-display: optional;
}

/* Mobil tarayıcılarda adres çubuğu açılıp kapanınca 100% yükseklik kaymasını
   önler; html'in varsayılan (koyu) zemini asla görünmesin, gerçek dinamik
   viewport yüksekliği (dvh) kullanılarak boşluk oluşması engellenir. */
html {
  background: rgb(238, 239, 247) !important;
  color-scheme: only light !important;
  min-height: 100%;
}
#login,
body {
  min-height: 100vh;
  min-height: 100dvh;
}
#login input {
  background: #fff !important;
  color: #222 !important;
}

/* Login sayfası logosu: 12em (varsayılan 4em'in 3 katı) */
#login img {
  width: 13.2em;
  height: 13.2em;
}

/* Üst bar (sol üst) logosu: 2.5em -> 3.75em (%50 büyük) + gölge */
header img {
  height: 3.75em;
  filter: drop-shadow(2px 2px 2px rgba(47, 59, 92, 0.45));
}

/* Filebrowser dar ekranlarda (≤736px) üst logoyu gizliyor; KilerOtantik'te
   her zaman görünsün. */
@media (max-width: 736px) {
  header img {
    display: inline-block !important;
  }
}

/* ---- İç sayfalar: KilerOtantik teması (login ile aynı palet) ---- */
:root,
:root.dark {
  color-scheme: only light; /* mobil tarayicilarin otomatik koyu tema cevirimini engelle */
  --background: rgb(238, 239, 247);
  --surfacePrimary: #ffffff;
  --surfaceSecondary: rgb(216, 219, 241);
  --divider: rgba(95, 127, 189, 0.18);
  --textPrimary: #5266c2;
  --textSecondary: #4053a8;
  --action: #5266c2;
  --iconPrimary: #5266c2;
  --iconSecondary: #ffffff;
  --iconTertiary: #b8c4df;
  --hover: rgba(95, 127, 189, 0.12);
  --borderPrimary: rgba(95, 127, 189, 0.15);
  --borderSecondary: rgba(95, 127, 189, 0.3);
  --input-red: #fcd0cd;
  --input-green: #c9f2da;
  --item-selected: #ffffff;
  --dividerPrimary: rgba(255, 255, 255, 0.4);
  --dividerSecondary: rgba(255, 255, 255, 0.9);
}

/* İç sayfa fonu: üst renk %10 daha beyaz */
body {
  background: linear-gradient(to top, rgb(95, 127, 189) 0%, rgb(216, 219, 241) 55%, rgb(247, 248, 252) 80%) fixed;
}

/* Sürüm/yardım yazısı da tema rengine uysun */
.credits,
.credits a,
.credits a:hover {
  color: #7583c9;
}

/* Sol menü: logo ağacının yeşilleri (piksellerden örneklendi) */
nav .action {
  color: #46792f;
}
nav .action i.material-icons {
  color: #60ac32;
  margin-left: 2ch;   /* sol kenardan 2 boşluk içeride */
  margin-right: 1ch;  /* yazıyla arasında 1 boşluk */
}

/* Sol menü yazıları: ince, nete yakın gölge — sol-üstten ışık vurmuş gibi 3B derinlik */
nav .action span {
  text-shadow: 3px 3px 1px rgba(42, 74, 26, 0.39);
}

/* Kullanıcı adı: altı çizili + kalın (menüde aria-label'ı olmayan tek öğe).
   Menüyle aynı font ailesi; sıkışıklığa karşı harf arası açık, 1 punto büyük. */
nav .action:not([aria-label]) span {
  text-decoration: underline;
  font-weight: bold;
  font-family: inherit;
  letter-spacing: 0.07em;
  font-size: 1.07em;
  text-shadow: 3px 3px 1px rgba(58, 74, 153, 0.42);
}

/* Kullanıcı adı satırı menü yeşiline uymaz, menekşe kalır */
nav .action:not([aria-label]),
nav .action:not([aria-label]) i.material-icons {
  color: #5266c2;
}

/* Login bloğu ekranın üst 1/3'ünde dursun (varsayılan: tam orta) */
#login form {
  top: 33%;
}

/* Login fonu: alttan rgb(95,127,189), geçiş erken tamamlanır (%55'te), üstü açık renk */
#login {
  background: linear-gradient(to top, rgb(95, 127, 189) 0%, rgb(216, 219, 241) 55%, rgb(238, 239, 247) 80%);
}

/* Kullanıcı adı / şifre kutularının içi beyaz */
#login input {
  background: #fff;
  color: #222;
  border: 1px solid #b8c0d8;
}

/* Açık fonda başlık okunsun; font: Pacifico (el yazısı, Comic Sans'tan farklı) */
#login h1 {
  color: #2f3b5c;
  font-family: "Kalam", "Comic Sans MS", cursive;
  font-style: normal;
  font-weight: 700;
  font-size: 2.08em; /* varsayilan 2.5em - 5 punto */
  text-transform: lowercase;
}

/* Sol alt: disk göstergesi bloğunun altına logo + karşılama.
   (Disk göstergesi inline style taşıyan .credits elemanı.) */
.credits[style]::after {
  content: "";
  display: block;
  padding-top: 240px;
  margin-top: 4.5em;
  background: url("/static/img/logo.svg") no-repeat top center;
  background-size: 213px auto;
  filter: drop-shadow(2px 2px 3px rgba(47, 59, 92, 0.45));
}

/* Karşılama yazısı (mobil / dar ekran): breadcrumb şeridinde, sola yaslı,
   Comic Sans italik — küçük ekranda okunaklı kalsın diye. */
.breadcrumbs::after {
  content: "Kilere hoşgeldin canım. Ne lazımdı?";
  margin-left: 0.6em;
  white-space: nowrap;
  font-family: "Comic Sans MS", "Comic Neue", cursive;
  font-style: italic;
  font-size: 1.05em;
  font-weight: 500;
  letter-spacing: 0.04em;
  color: #3a4a99;
}

/* Geniş ekran / PC: üst bar büyütülüp logo ortaya alınır, karşılama yazısı
   arama kutusunun yanına 2 satır + kalın olarak yerleşir. Header'ın yeni
   yüksekliğine bağımlı olan tüm ofsetler (body/nav/breadcrumbs) eşlenir. */
@media (min-width: 1000px) {
  header {
    height: 6.4em;
  }
  body {
    padding-top: 6.4em;
  }
  nav {
    top: 6.4em;
  }
  .breadcrumbs {
    top: 6.4em;
  }
  .breadcrumbs::after {
    content: "";
  }

  /* Arama kutusu eski kompakt boyutunda kalsın */
  #search {
    height: 3.2em;
    overflow: visible;
  }

  /* Logo: akıştan çıkarılıp header'ın gerçek ortasına sabitlenir — flex
     auto-margin diğer öğelerin genişliğine bağımlı kaldığı için güvenilir
     değildi, mutlak konumlama her genişlikte tam ortalar. */
  header img {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    height: 4.6em;
    margin: 0;
  }

  /* Karşılama yazısı: sade, gölgesiz, gökyüzü mavisi; genişliği içeriğe göre
     (max-content) olduğu için 2 satırdan fazlasına bölünmez. */
  #search::after {
    content: "Kilere hoşgeldin canım.\ANe lazımdı?";
    position: absolute;
    left: calc(100% + 1.2em);
    top: 50%;
    transform: translateY(-50%);
    width: max-content;
    white-space: pre-line;
    line-height: 1.3;
    pointer-events: none;
    font-family: "Roboto", Arial, sans-serif;
    font-style: italic;
    font-weight: 600;
    font-size: 1.15em;
    text-shadow: none;
    color: #4a9fdb;
  }
}

/* Opera/mobil: çift-dokunup-yakınlaştırma yerine tıklamanın anında
   tetiklenmesi için (singleClick zaten aktif, bu ekstra güvence) */
#listing .item,
nav .action {
  touch-action: manipulation;
}

/* "File Browser x.y.z / Yardım" sidebar'dan çıkar, sayfanın en altına sağa sabitle */
.credits:not([style]) {
  position: fixed;
  right: 1em;
  bottom: 0.3em;
  margin: 0;
  text-align: right;
  z-index: 100;
}