/* ─────────────────────────────────────────────────────────────────────────
 *  thePlus.so — kose yaricapi ve dugme ikonu standardi
 * ─────────────────────────────────────────────────────────────────────────
 *
 *  NEDEN CSS KATMANI: sitede sekiz ayri yaricap sinifi kullaniliyordu
 *  (rounded-lg 240, rounded-sm 156, rounded 140, rounded-xl 109,
 *  rounded-2xl 51, rounded-3xl 37, rounded-md 16, rounded-none 1).
 *  Yuzlerce sinif adini elle degistirmek hem riskli hem de kalici degil:
 *  yarin yazilan yeni sayfa yine standardin disina cikardi. Sinif adlari
 *  oldugu gibi kaliyor, urettikleri deger tek yerden belirleniyor.
 *
 *  OLCEK: adlandirilmis basamaklar. Sayfa yazarken deger degil AD kullanilir.
 *
 *    radius-sm     kontroller  dugme, giris alani, rozet, kucuk kutu
 *    radius-lg     yuzeyler    kart, panel, pencere, buyuk kutu
 *    radius-full   hap         etiket, avatar
 *
 *  radius-sm bilerek ust seritteki dugmelerin bugunku degeri. Referans o
 *  gorunum oldugu icin header hic degismiyor, geri kalan ona uyuyor.
 *
 *  KAPSAM DISI: /embed/ altindaki widget ciktisi. Oradaki yaricapi
 *  degistirmek insanlarin Notion sayfasinda duran widget'larin gorunumunu
 *  degistirir. Widget'a dokunmuyoruz.
 */

:root {
  /* ── Yaricap olcegi ──────────────────────────────────────────────────
   *  Adlandirilmis basamaklar. Sayfa yazarken degeri degil ADI kullan.
   *  Olcum birimi rem: koke bagli, tarayici yazi boyutu ayariyla birlikte
   *  olceklenir. Sabit piksel yazmiyoruz.
   */
  --tp-radius-sm:   0.5rem;    /* kontroller: dugme, giris alani, rozet   */
  --tp-radius-lg:   1rem;      /* yuzeyler:   kart, panel, pencere        */
  --tp-radius-full: 9999px;    /* hap:        etiket, avatar              */

  --tp-ikon-mesafe: 0.25rem;   /* header'daki translate-x-1 ile ayni */
  --tp-ikon-sure: .18s;
}

/* ── Yaricap ──────────────────────────────────────────────────────────
 *
 *  Tailwind sinif adlari HTML'de oldugu gibi kaliyor, her biri olcekteki
 *  bir basamaga baglaniyor:
 *
 *    rounded-sm  rounded  rounded-md  rounded-lg   ->  radius-sm
 *    rounded-xl  rounded-2xl  rounded-3xl          ->  radius-lg
 *    rounded-full                                  ->  radius-full
 *
 *  radius-sm bilerek header'in bugunku degeri: ust serit degismiyor,
 *  geri kalan ona uyuyor.
 */

.rounded-sm, .rounded, .rounded-md, .rounded-lg { border-radius: var(--tp-radius-sm) !important; }
.rounded-xl, .rounded-2xl, .rounded-3xl         { border-radius: var(--tp-radius-lg) !important; }
.rounded-full                                   { border-radius: var(--tp-radius-full) !important; }

/* Tek kenar varyantlari da ayni olcege bagli kalsin */
.rounded-t-sm, .rounded-t, .rounded-t-md, .rounded-t-lg {
  border-top-left-radius: var(--tp-radius-sm) !important;
  border-top-right-radius: var(--tp-radius-sm) !important;
}
.rounded-b-sm, .rounded-b, .rounded-b-md, .rounded-b-lg {
  border-bottom-left-radius: var(--tp-radius-sm) !important;
  border-bottom-right-radius: var(--tp-radius-sm) !important;
}
.rounded-l-sm, .rounded-l, .rounded-l-md, .rounded-l-lg {
  border-top-left-radius: var(--tp-radius-sm) !important;
  border-bottom-left-radius: var(--tp-radius-sm) !important;
}
.rounded-r-sm, .rounded-r, .rounded-r-md, .rounded-r-lg {
  border-top-right-radius: var(--tp-radius-sm) !important;
  border-bottom-right-radius: var(--tp-radius-sm) !important;
}
.rounded-t-xl, .rounded-t-2xl, .rounded-t-3xl {
  border-top-left-radius: var(--tp-radius-lg) !important;
  border-top-right-radius: var(--tp-radius-lg) !important;
}
.rounded-b-xl, .rounded-b-2xl, .rounded-b-3xl {
  border-bottom-left-radius: var(--tp-radius-lg) !important;
  border-bottom-right-radius: var(--tp-radius-lg) !important;
}

/* Kendi isimleriyle de kullanilabilsin: yeni yazilan yerde tercih edilen yol */
.tp-radius-sm   { border-radius: var(--tp-radius-sm)   !important; }
.tp-radius-lg   { border-radius: var(--tp-radius-lg)   !important; }
.tp-radius-full { border-radius: var(--tp-radius-full) !important; }

/* rounded-full ve rounded-none bilerek disarida: biri hap ve avatar icin,
   digeri kasitli olarak kosesiz. */

/* ── Dugme ikonlarinda mikro etkilesim ────────────────────────────────────
 *
 *  KURAL: ok nereyi gosteriyorsa hover'da o yone hareket eder.
 *  Sag ok saga, sol ok sola, yukari ok yukari, indirme asagi.
 *
 *  Bu kural burada garanti altina alinmistir. Tailwind'in group-hover
 *  yardimcisina birakilmiyor: o yardimci sayfa Tailwind'i yuklemediyse ya
 *  da sinif uretilmediyse sessizce calismaz ve ok hic kimildamaz. Burasi
 *  tek kaynak, her sayfada ayni sekilde calisir.
 *
 *  Tetikleyici uc durum: baglantinin uzerine gelmek, dugmenin uzerine
 *  gelmek, ya da ikonu iceren .group kutusunun uzerine gelmek.
 *
 *  animate- tasiyan ikonlar disarida: onlarin kendi animasyonu var
 *  (ziplayan megafon gibi), donusum eklemek onu bozardi.
 *
 *  Yon belirtmeyen ikonlara (disli, roket, arti) dokunulmuyor; onlarin
 *  sayfa icindeki kendi group-hover hareketleri aynen calisir.
 */

a i[class*="fa-"]:not([class*="animate-"]),
button i[class*="fa-"]:not([class*="animate-"]),
label i[class*="fa-"]:not([class*="animate-"]),
summary i[class*="fa-"]:not([class*="animate-"]),
.group i[class*="fa-"]:not([class*="animate-"]) {
  transition: transform var(--tp-ikon-sure) ease;
}

/* saga */
a:hover i.fa-arrow-right:not([class*="animate-"]),
button:hover i.fa-arrow-right:not([class*="animate-"]),
.group:hover i.fa-arrow-right:not([class*="animate-"]),
a:hover i.fa-arrow-right-long:not([class*="animate-"]),
button:hover i.fa-arrow-right-long:not([class*="animate-"]),
.group:hover i.fa-arrow-right-long:not([class*="animate-"]),
a:hover i.fa-long-arrow-alt-right:not([class*="animate-"]),
button:hover i.fa-long-arrow-alt-right:not([class*="animate-"]),
.group:hover i.fa-long-arrow-alt-right:not([class*="animate-"]),
a:hover i.fa-chevron-right:not([class*="animate-"]),
button:hover i.fa-chevron-right:not([class*="animate-"]),
.group:hover i.fa-chevron-right:not([class*="animate-"]),
a:hover i.fa-angle-right:not([class*="animate-"]),
button:hover i.fa-angle-right:not([class*="animate-"]),
.group:hover i.fa-angle-right:not([class*="animate-"]),
a:hover i.fa-angles-right:not([class*="animate-"]),
button:hover i.fa-angles-right:not([class*="animate-"]),
.group:hover i.fa-angles-right:not([class*="animate-"]),
a:hover i.fa-caret-right:not([class*="animate-"]),
button:hover i.fa-caret-right:not([class*="animate-"]),
.group:hover i.fa-caret-right:not([class*="animate-"]),
a:hover i.fa-circle-arrow-right:not([class*="animate-"]),
button:hover i.fa-circle-arrow-right:not([class*="animate-"]),
.group:hover i.fa-circle-arrow-right:not([class*="animate-"]),
a:hover i.fa-square-arrow-right:not([class*="animate-"]),
button:hover i.fa-square-arrow-right:not([class*="animate-"]),
.group:hover i.fa-square-arrow-right:not([class*="animate-"]),
a:hover i.fa-arrow-right-to-bracket:not([class*="animate-"]),
button:hover i.fa-arrow-right-to-bracket:not([class*="animate-"]),
.group:hover i.fa-arrow-right-to-bracket:not([class*="animate-"]) {
  transform: translateX(var(--tp-ikon-mesafe)) !important;
}

/* sola */
a:hover i.fa-arrow-left:not([class*="animate-"]),
button:hover i.fa-arrow-left:not([class*="animate-"]),
.group:hover i.fa-arrow-left:not([class*="animate-"]),
a:hover i.fa-arrow-left-long:not([class*="animate-"]),
button:hover i.fa-arrow-left-long:not([class*="animate-"]),
.group:hover i.fa-arrow-left-long:not([class*="animate-"]),
a:hover i.fa-long-arrow-alt-left:not([class*="animate-"]),
button:hover i.fa-long-arrow-alt-left:not([class*="animate-"]),
.group:hover i.fa-long-arrow-alt-left:not([class*="animate-"]),
a:hover i.fa-chevron-left:not([class*="animate-"]),
button:hover i.fa-chevron-left:not([class*="animate-"]),
.group:hover i.fa-chevron-left:not([class*="animate-"]),
a:hover i.fa-angle-left:not([class*="animate-"]),
button:hover i.fa-angle-left:not([class*="animate-"]),
.group:hover i.fa-angle-left:not([class*="animate-"]),
a:hover i.fa-angles-left:not([class*="animate-"]),
button:hover i.fa-angles-left:not([class*="animate-"]),
.group:hover i.fa-angles-left:not([class*="animate-"]),
a:hover i.fa-caret-left:not([class*="animate-"]),
button:hover i.fa-caret-left:not([class*="animate-"]),
.group:hover i.fa-caret-left:not([class*="animate-"]),
a:hover i.fa-circle-arrow-left:not([class*="animate-"]),
button:hover i.fa-circle-arrow-left:not([class*="animate-"]),
.group:hover i.fa-circle-arrow-left:not([class*="animate-"]),
a:hover i.fa-square-arrow-left:not([class*="animate-"]),
button:hover i.fa-square-arrow-left:not([class*="animate-"]),
.group:hover i.fa-square-arrow-left:not([class*="animate-"]) {
  transform: translateX(calc(-1 * var(--tp-ikon-mesafe))) !important;
}

/* yukari */
a:hover i.fa-arrow-up:not([class*="animate-"]),
button:hover i.fa-arrow-up:not([class*="animate-"]),
.group:hover i.fa-arrow-up:not([class*="animate-"]),
a:hover i.fa-chevron-up:not([class*="animate-"]),
button:hover i.fa-chevron-up:not([class*="animate-"]),
.group:hover i.fa-chevron-up:not([class*="animate-"]),
a:hover i.fa-angle-up:not([class*="animate-"]),
button:hover i.fa-angle-up:not([class*="animate-"]),
.group:hover i.fa-angle-up:not([class*="animate-"]),
a:hover i.fa-angles-up:not([class*="animate-"]),
button:hover i.fa-angles-up:not([class*="animate-"]),
.group:hover i.fa-angles-up:not([class*="animate-"]),
a:hover i.fa-caret-up:not([class*="animate-"]),
button:hover i.fa-caret-up:not([class*="animate-"]),
.group:hover i.fa-caret-up:not([class*="animate-"]),
a:hover i.fa-circle-arrow-up:not([class*="animate-"]),
button:hover i.fa-circle-arrow-up:not([class*="animate-"]),
.group:hover i.fa-circle-arrow-up:not([class*="animate-"]),
a:hover i.fa-arrow-up-long:not([class*="animate-"]),
button:hover i.fa-arrow-up-long:not([class*="animate-"]),
.group:hover i.fa-arrow-up-long:not([class*="animate-"]) {
  transform: translateY(calc(-1 * var(--tp-ikon-mesafe))) !important;
}

/* asagi */
a:hover i.fa-arrow-down:not([class*="animate-"]),
button:hover i.fa-arrow-down:not([class*="animate-"]),
.group:hover i.fa-arrow-down:not([class*="animate-"]),
a:hover i.fa-chevron-down:not([class*="animate-"]),
button:hover i.fa-chevron-down:not([class*="animate-"]),
.group:hover i.fa-chevron-down:not([class*="animate-"]),
a:hover i.fa-angle-down:not([class*="animate-"]),
button:hover i.fa-angle-down:not([class*="animate-"]),
.group:hover i.fa-angle-down:not([class*="animate-"]),
a:hover i.fa-angles-down:not([class*="animate-"]),
button:hover i.fa-angles-down:not([class*="animate-"]),
.group:hover i.fa-angles-down:not([class*="animate-"]),
a:hover i.fa-caret-down:not([class*="animate-"]),
button:hover i.fa-caret-down:not([class*="animate-"]),
.group:hover i.fa-caret-down:not([class*="animate-"]),
a:hover i.fa-circle-arrow-down:not([class*="animate-"]),
button:hover i.fa-circle-arrow-down:not([class*="animate-"]),
.group:hover i.fa-circle-arrow-down:not([class*="animate-"]),
a:hover i.fa-arrow-down-long:not([class*="animate-"]),
button:hover i.fa-arrow-down-long:not([class*="animate-"]),
.group:hover i.fa-arrow-down-long:not([class*="animate-"]),
a:hover i.fa-download:not([class*="animate-"]),
button:hover i.fa-download:not([class*="animate-"]),
.group:hover i.fa-download:not([class*="animate-"]),
a:hover i.fa-file-arrow-down:not([class*="animate-"]),
button:hover i.fa-file-arrow-down:not([class*="animate-"]),
.group:hover i.fa-file-arrow-down:not([class*="animate-"]),
a:hover i.fa-cloud-arrow-down:not([class*="animate-"]),
button:hover i.fa-cloud-arrow-down:not([class*="animate-"]),
.group:hover i.fa-cloud-arrow-down:not([class*="animate-"]) {
  transform: translateY(var(--tp-ikon-mesafe)) !important;
}

/* capraz saga yukari */
a:hover i.fa-arrow-up-right-from-square:not([class*="animate-"]),
button:hover i.fa-arrow-up-right-from-square:not([class*="animate-"]),
.group:hover i.fa-arrow-up-right-from-square:not([class*="animate-"]),
a:hover i.fa-up-right-from-square:not([class*="animate-"]),
button:hover i.fa-up-right-from-square:not([class*="animate-"]),
.group:hover i.fa-up-right-from-square:not([class*="animate-"]),
a:hover i.fa-external-link:not([class*="animate-"]),
button:hover i.fa-external-link:not([class*="animate-"]),
.group:hover i.fa-external-link:not([class*="animate-"]),
a:hover i.fa-external-link-alt:not([class*="animate-"]),
button:hover i.fa-external-link-alt:not([class*="animate-"]),
.group:hover i.fa-external-link-alt:not([class*="animate-"]),
a:hover i.fa-cloud-arrow-up:not([class*="animate-"]),
button:hover i.fa-cloud-arrow-up:not([class*="animate-"]),
.group:hover i.fa-cloud-arrow-up:not([class*="animate-"]),
a:hover i.fa-file-arrow-up:not([class*="animate-"]),
button:hover i.fa-file-arrow-up:not([class*="animate-"]),
.group:hover i.fa-file-arrow-up:not([class*="animate-"]),
a:hover i.fa-paper-plane:not([class*="animate-"]),
button:hover i.fa-paper-plane:not([class*="animate-"]),
.group:hover i.fa-paper-plane:not([class*="animate-"]) {
  transform: translate(var(--tp-ikon-mesafe), calc(-1 * var(--tp-ikon-mesafe))) !important;
}

/* donerek */
a:hover i.fa-rotate-right:not([class*="animate-"]),
button:hover i.fa-rotate-right:not([class*="animate-"]),
.group:hover i.fa-rotate-right:not([class*="animate-"]),
a:hover i.fa-arrows-rotate:not([class*="animate-"]),
button:hover i.fa-arrows-rotate:not([class*="animate-"]),
.group:hover i.fa-arrows-rotate:not([class*="animate-"]),
a:hover i.fa-sync:not([class*="animate-"]),
button:hover i.fa-sync:not([class*="animate-"]),
.group:hover i.fa-sync:not([class*="animate-"]) {
  transform: rotate(90deg) !important;
}

/* geri donerek */
a:hover i.fa-rotate-left:not([class*="animate-"]),
button:hover i.fa-rotate-left:not([class*="animate-"]),
.group:hover i.fa-rotate-left:not([class*="animate-"]),
a:hover i.fa-arrow-rotate-left:not([class*="animate-"]),
button:hover i.fa-arrow-rotate-left:not([class*="animate-"]),
.group:hover i.fa-arrow-rotate-left:not([class*="animate-"]) {
  transform: rotate(-90deg) !important;
}

/* Hareket azaltma tercihi: animasyonlar kapanir, yaricap standardi kalir. */
@media (prefers-reduced-motion: reduce) {
  a i[class*="fa-"], button i[class*="fa-"], .group i[class*="fa-"] { transition: none !important; }
  a:hover i[class*="fa-"], button:hover i[class*="fa-"], .group:hover i[class*="fa-"] { transform: none !important; }
}

/* ── Tema dugmesi ─────────────────────────────────────────────────────
   Burada duruyor, karanlik katmaninda degil. Sebep: /docs kendi elle
   yazilmis dark: siniflarini kullaniyor ve tp-karanlik.css'i bilerek
   yuklemiyor. Dugme stilleri orada olunca docs'ta gunes ve ay ikonlarinin
   IKISI BIRDEN gorunuyordu. Bu dosya her sayfada yuklu. */
.tp-tema {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    border-radius: var(--tp-radius-sm, .5rem);
    color: inherit;
    background: transparent;
    border: 0;
    cursor: pointer;
    transition: opacity .18s ease;
}
.tp-tema:hover { opacity: .6; }

/* Acik temada ay (karanliga gec), karanlikta gunes (aciga gec) */
.tp-tema .tp-ay    { display: none; }
.tp-tema .tp-gunes { display: inline-block; }
html.dark .tp-tema .tp-ay    { display: inline-block; }
html.dark .tp-tema .tp-gunes { display: none; }