/*
Theme Name: Okul Öncesi Forum
Theme URI: https://www.okuloncesiforum.com/forum/
Description: okuloncesiforum.com forumu için "sınıf panosu" tasarım dilinde WordPress teması. XenForo içeriği bu temaya aktarılır; forum URL şeması birebir korunur.
Author: TemaFabrika
Version: 0.1.0
Requires at least: 6.4
Requires PHP: 8.0
Text Domain: okuloncesiforum
Tags: forum, egitim, tailwind
*/

/* Tailwind CDN çalışma anında kendi <style>'ını head'in sonuna basar; bu dosya
   ondan önce yüklendiği için yardımcı sınıflar buradaki kuralları ezebilir.
   index.html'deki sıralama da aynıydı, bilerek korundu. */

:root{ --ink:#241C3B; }

  html{ scroll-behavior:smooth; scroll-padding-top:96px; }
  body{
    background-color:#E9F3FB;
    background-image:
      radial-gradient(rgba(36,28,59,.075) 1.4px, transparent 1.4px);
    background-size: 26px 26px;
    background-position: -13px -13px;
    color:var(--ink);
    -webkit-font-smoothing:antialiased;
  }

  /* ---- İmza: pano bandı ---- */
  .bant{
    position:absolute; top:-11px; left:20px; z-index:10;
    background:var(--c); color:#fff;
    font-weight:700; font-size:.875rem; letter-spacing:.045em;
    padding:.4rem .95rem .45rem;
    transform:rotate(-2.4deg);
    transform-origin:left center;
    clip-path:polygon(0 8%, 100% 0, 99% 92%, 1% 100%);
    box-shadow:0 8px 16px -10px rgba(36,28,59,.8);
    transition:transform .35s cubic-bezier(.2,.8,.3,1);
    white-space:nowrap;
  }
  .bant--koyu{ color:var(--ink); }
  .bant--foto{ top:10px; left:10px; }
  .bant--orta{ left:50%; transform-origin:center; transform:translateX(-50%) rotate(-1.6deg); font-size:1rem; padding:.55rem 1.5rem .6rem; }
  .pano{ transition:transform .35s cubic-bezier(.2,.8,.3,1), box-shadow .35s ease; }
  .pano:hover{ transform:translateY(-6px); }
  .pano:hover .bant{ transform:rotate(0deg); }

  /* ---- Ana menü ---- */
  .nav-oge{
    position:relative; display:inline-flex; align-items:center; gap:.5rem;
    padding:.6rem .85rem; border-radius:999px;
    font-weight:600; font-size:.9375rem; line-height:1; white-space:nowrap;
    transition:background-color .2s ease, color .2s ease;
  }
  .nav-oge i{ font-size:1.0625rem; color:var(--c); transition:transform .2s ease; }
  .nav-oge:hover i{ transform:translateY(-2px); }
  .nav-oge:hover{ background:var(--cb); color:var(--c); }
  .nav-oge:hover i{ color:var(--c); }
  .nav-oge[aria-current="page"]{ color:var(--c); }
  .nav-oge[aria-current="page"] i{ color:var(--c); }
  .nav-oge[aria-current="page"]::after{
    content:""; position:absolute; left:.85rem; right:.85rem; bottom:-2px;
    height:3px; border-radius:99px; background:var(--c);
  }

  /* açık zeminde sosyal ikonlar (mobil menü) */
  #mobilMenu .sos{ background:rgba(36,28,59,.07); color:rgba(36,28,59,.55); }
  #mobilMenu .sos:hover{ color:#fff; }

  /* ---- Mobil menü ---- */
  .mmenu-oge{
    display:flex; align-items:center; gap:.9rem;
    padding:.7rem .8rem; border-radius:16px;
    font-weight:700; font-size:1.0625rem; line-height:1;
    transition:background-color .2s ease, color .2s ease;
  }
  .mmenu-ikon{
    display:grid; place-items:center; height:44px; width:44px; flex:none;
    border-radius:14px; background:var(--cb); color:var(--c); font-size:1.05rem;
    transition:background-color .2s ease;
  }
  .mmenu-ok{ color:rgba(36,28,59,.2); font-size:.85rem; transition:color .2s ease, transform .2s ease; }
  .mmenu-oge:hover{ background:var(--cb); color:var(--c); }
  .mmenu-oge:hover .mmenu-ikon{ background:var(--c); color:#fff; }
  .mmenu-oge:hover .mmenu-ok{ color:var(--c); transform:translateX(3px); }
  .mmenu-oge[aria-current="page"]{ background:var(--cb); color:var(--c); }
  .mmenu-oge[aria-current="page"] .mmenu-ikon{ background:var(--c); color:#fff; }

  /* ---- Sosyal ikonlar (üst şerit) ---- */
  .sos{
    display:grid; place-items:center; height:32px; width:32px; border-radius:999px;
    background:rgba(255,255,255,.1); color:rgba(255,255,255,.85);
    transition:background-color .2s ease, color .2s ease, transform .2s ease;
  }
  .sos:hover{ color:#fff; transform:translateY(-2px); }

  /* ---- Karalama alt çizgi ---- */
  .karala{ position:relative; display:inline-block; }
  .karala svg{ position:absolute; left:0; right:0; bottom:-.3em; width:100%; height:.4em; overflow:visible; }
  .karala path{ stroke:var(--c); stroke-width:7; fill:none; stroke-linecap:round;
    stroke-dasharray:400; stroke-dashoffset:400; animation:ciz 1.1s .25s forwards cubic-bezier(.4,0,.2,1); }
  @keyframes ciz{ to{ stroke-dashoffset:0; } }

  /* ---- Dar ekran emniyeti: ızgara/esnek öğeler min-content'e kilitlenmesin ---- */
  #kartlar, #kartlar > *, #kartlar .grup > *,
  .kart > div, .kart > div > *, .kart .grid > *,
  #hero-izgara > *, #hero-izgara .pano > div{ min-width:0; }
  .kart img, .blog-kart img{ max-width:100%; }

  /* ---- Paylaşımlar bölümü: zemin dokusu ---- */
  #paylasim .zemin{
    position:absolute; inset:0; pointer-events:none;
    background-image:
      repeating-linear-gradient(to bottom, transparent 0 33px, rgba(36,28,59,.055) 33px 34px);
    -webkit-mask-image:linear-gradient(to bottom, transparent 0, #000 14%, #000 86%, transparent 100%);
            mask-image:linear-gradient(to bottom, transparent 0, #000 14%, #000 86%, transparent 100%);
  }
  #paylasim .isik{ position:absolute; pointer-events:none; border-radius:50%; }
  #paylasim .ikon{ position:absolute; pointer-events:none; color:#241C3B; opacity:.075; }
  #paylasim .ikon svg{ width:100%; height:100%; }
  @media (max-width:1023px){
    #paylasim .ikon{ opacity:.055; }
    #paylasim .ikon--gizle{ display:none; }
  }

  /* ---- Blog listeleme kartı ---- */
  .blog-kart:hover h3{ color:var(--c); }

  /* ---- Filtre çipleri ---- */
  .filtre, .kfiltre{ transition:background-color .2s ease, border-color .2s ease, color .2s ease; }
  .filtre:hover, .filtre.aktif, .kfiltre:hover, .kfiltre.aktif{
    background:var(--c,#241C3B); border-color:var(--c,#241C3B); color:var(--ct,#fff);
  }

  /* ---- Beğeni ---- */
  .begen.aktif{ color:#EF4136; }
  .begen.aktif i{ font-weight:900; }
  .begen.patla i{ animation:patla .45s cubic-bezier(.3,1.6,.5,1); }
  @keyframes patla{ 0%{transform:scale(1)} 40%{transform:scale(1.5) rotate(-12deg)} 100%{transform:scale(1)} }
  .kaydet.aktif{ color:#1FA8DC; }

  .gizli{ display:none !important; }

  /* Header görseli beyaz zeminini düşür */
  .serit-gorsel{ mix-blend-mode:multiply; }

  a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible, [tabindex]:focus-visible{
    outline:3px solid #7A4FD6; outline-offset:3px; border-radius:6px;
  }

  .aç{ animation:ac .45s cubic-bezier(.2,.8,.3,1); }
  @keyframes ac{ from{ opacity:0; transform:translateY(-8px);} to{ opacity:1; transform:none;} }

  .sallan{ animation:sallan 6s ease-in-out infinite; }
  @keyframes sallan{ 0%,100%{ transform:translateY(0) } 50%{ transform:translateY(-9px) } }

  @media (prefers-reduced-motion: reduce){
    html{ scroll-behavior:auto; }
    *, *::before, *::after{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; }
    .karala path{ stroke-dashoffset:0; }
  }

/* ---- Forum içeriği (BBCode çıktısı) ---- */
.oof-icerik{ line-height:1.7; overflow-wrap:anywhere; }
.oof-icerik a{ color:#1FA8DC; text-decoration:underline; text-underline-offset:2px; }
.oof-icerik a:hover{ color:#241C3B; }

/* Canlıdaki özel [IMG] kodu görseli %60'a sınırlıyor; geniş ekranda aynı ölçü,
   telefonda %60 okunmaz küçüklükte kaldığı için tam genişlik. */
.oof-gorsel{ max-width:100%; height:auto; border-radius:14px; margin:.6rem 0; }
@media (min-width:640px){ .oof-gorsel{ max-width:60%; } }
.oof-ek-gorsel{ max-width:100%; }

.oof-ekler{ margin-top:1.25rem; padding-top:1rem; border-top:2px solid rgba(36,28,59,.08); }
.oof-ekler__baslik{ font-weight:700; margin-bottom:.6rem; }
.oof-ekler__liste{ display:flex; flex-wrap:wrap; gap:.75rem; }
.oof-ekler__bag{
  display:flex; flex-direction:column; gap:.3rem; width:10.5rem; max-width:100%; padding:.5rem;
  border:2px solid rgba(36,28,59,.08); border-radius:14px; background:#fff; text-decoration:none !important; color:inherit !important;
}
.oof-ekler__bag:hover{ border-color:#1FA8DC; }
.oof-ekler__onizleme{ width:100%; height:6.5rem; object-fit:cover; border-radius:10px; }
.oof-ekler__simge{ display:grid; place-items:center; height:6.5rem; border-radius:10px; background:#E9F3FB; color:#1FA8DC; font-size:1.6rem; }
.oof-ekler__ad{ font-weight:600; overflow-wrap:anywhere; line-height:1.35; }
.oof-ekler__boy{ color:rgba(36,28,59,.55); font-size:.9375rem; }

/* Görsel büyütme (assets/js/icerik.js) */
.oof-mesaj img.oof-gorsel, .oof-mesaj img.oof-ekler__onizleme{ cursor:zoom-in; }
.oof-isik-acik, .oof-isik-acik body{ overflow:hidden; }
.oof-isik{
  position:fixed; inset:0; z-index:100000; display:flex; align-items:center; justify-content:center;
  padding:3.5rem 1rem; background:rgba(20,15,34,.92);
}
.oof-isik[hidden]{ display:none; }
.oof-isik__resim{ max-width:100%; max-height:100%; object-fit:contain; border-radius:10px; background:#fff; box-shadow:0 10px 40px rgba(0,0,0,.4); }
.oof-isik button{
  position:absolute; display:grid; place-items:center; width:2.9rem; height:2.9rem; border-radius:999px;
  background:rgba(255,255,255,.14); color:#fff; font-size:1.25rem; transition:background .15s;
}
.oof-isik button:hover, .oof-isik button:focus-visible{ background:rgba(255,255,255,.28); outline:2px solid #fff; outline-offset:2px; }
.oof-isik button[hidden]{ display:none; }
.oof-isik__kapat{ top:.75rem; right:.75rem; }
.oof-isik__ok--geri{ left:.75rem; top:50%; transform:translateY(-50%); }
.oof-isik__ok--ileri{ right:.75rem; top:50%; transform:translateY(-50%); }
.oof-isik__sayac{ position:absolute; bottom:1rem; left:50%; transform:translateX(-50%); color:#fff; font-weight:600; }
@media (max-width:639px){ .oof-isik__ok--geri, .oof-isik__ok--ileri{ top:auto; bottom:.6rem; transform:none; } }

.oof-medya-bag{ display:block; margin:1rem 0; font-weight:700; }

.oof-orta{ text-align:center; }
.oof-sol{ text-align:left; }
.oof-sag{ text-align:right; }
.oof-yasla{ text-align:justify; }
.oof-girinti{ padding-left:1.5rem; border-left:3px solid rgba(36,28,59,.12); }
.oof-baslik{ font-family:"Baloo 2", system-ui, sans-serif; font-size:1.35rem; font-weight:600; margin:1.2rem 0 .5rem; }

.oof-alinti{
  margin:1rem 0; padding:.9rem 1.1rem;
  background:#FFF4E2; border:2px solid rgba(36,28,59,.08);
  border-left:4px solid #FDC500; border-radius:14px;
}
.oof-alinti-bas{ font-weight:700; margin-bottom:.35rem; }
.oof-alinti .oof-alinti{ background:#fff; border-left-color:#1FA8DC; }

/* Alıntı yığılması derinleştikçe okunmaz hale gelmesin: forumda 5 kat iç içe
   alıntı gerçek bir durum. Dördüncü kattan sonra girinti sıfırlanıyor. */
.oof-alinti .oof-alinti .oof-alinti .oof-alinti{ padding-left:.6rem; }

.oof-kod{
  margin:1rem 0; padding:.9rem 1.1rem; overflow-x:auto;
  background:#241C3B; color:#F3F6FB; border-radius:14px;
  font-size:.9375rem; line-height:1.55;
}
.oof-kod code{ font-family:"Courier New", monospace; white-space:pre; }
.oof-kod-satir{
  padding:.1rem .4rem; border-radius:6px;
  background:rgba(36,28,59,.08); font-family:"Courier New", monospace; font-size:.9375rem;
}

.oof-liste{ margin:.6rem 0 .6rem 1.4rem; }
.oof-liste li{ margin:.25rem 0; }
ul.oof-liste{ list-style:disc; }
ol.oof-liste{ list-style:decimal; }

.oof-tablo-kap{ overflow-x:auto; margin:1rem 0; }
.oof-tablo{ border-collapse:collapse; min-width:100%; }
.oof-tablo td, .oof-tablo th{ border:1px solid rgba(36,28,59,.15); padding:.5rem .75rem; }
.oof-tablo th{ background:#E9F3FB; font-weight:700; }

.oof-spoiler{ margin:1rem 0; border:2px solid rgba(36,28,59,.08); border-radius:14px; background:#fff; }
.oof-spoiler summary{ cursor:pointer; padding:.7rem 1rem; font-weight:700; }
.oof-spoiler-govde{ padding:0 1rem 1rem; }
.oof-ispoiler{ background:#241C3B; color:transparent; border-radius:5px; cursor:pointer; }
.oof-ispoiler:hover, .oof-ispoiler:focus{ color:#fff; }

.oof-medya{
  display:grid; place-items:center; min-height:200px; margin:1rem 0;
  background:#241C3B; color:#fff; border-radius:16px;
  font-weight:700; cursor:pointer; overflow:hidden;
}
.oof-medya iframe{ width:100%; aspect-ratio:16/9; border:0; display:block; }

.oof-uye-bag{ font-weight:700; text-decoration:none !important; }
.oof-ek{ display:inline-flex; align-items:center; gap:.4rem; font-weight:600; }

/* Uzun bant.
   .bant white-space:nowrap ve mutlak konumlu; kategori adı uzun olunca
   (ör. "ÖĞRETMENLER ARASI BİLGİ VE BELGE PAYLAŞIMLARI") kartın dışına, dar
   ekranda sayfanın dışına taşıyor. Ölçüldü: 390px'te 64px taşma.
   Bant dili bozulmasın diye kaldırılmıyor, yalnız sarılabilir yapılıyor. */
.bant--uzun{
  white-space:normal;
  max-width:calc(100% - 40px);
  line-height:1.25;
}

/* ---- Üyelik formları ---- */
/* Alanlar alt alta, tam genişlik; ızgara yok. */
.oof-alan{ display:block; margin-top:1.15rem; }
.oof-alan > span{ display:block; font-weight:700; font-size:1rem; margin-bottom:.45rem; }
.oof-girdi{
  width:100%; height:52px; padding:0 1.05rem;
  border:2px solid rgba(36,28,59,.12); border-radius:16px;
  background:#fff; font:inherit; font-weight:500; outline:none;
  transition:border-color .2s ease;
}
.oof-girdi:focus{ border-color:#1FA8DC; }
textarea.oof-girdi{ height:auto; min-height:170px; padding:.9rem 1.05rem; line-height:1.6; resize:vertical; }
.oof-alan__ad{ display:block; font-weight:700; font-size:1rem; margin-bottom:.45rem; }
.oof-araclar{ display:flex; flex-wrap:wrap; gap:.4rem; margin-bottom:.5rem; }
.oof-araclar[hidden]{ display:none; }
.oof-arac{
  display:grid; place-items:center; width:2.75rem; height:2.75rem; border-radius:12px;
  border:2px solid rgba(36,28,59,.12); background:#fff; color:#241C3B; font-size:1rem; cursor:pointer;
  transition:border-color .15s ease, color .15s ease;
}
.oof-arac:hover, .oof-arac:focus-visible{ border-color:#1FA8DC; color:#1FA8DC; outline:none; }
.oof-yardim{ margin-top:.4rem; font-size:.9375rem; color:rgba(36,28,59,.55); font-weight:500; }
.oof-dugme{
  display:inline-flex; align-items:center; justify-content:center; gap:.5rem;
  width:100%; height:54px; margin-top:1.6rem; padding:0 1.5rem;
  border-radius:999px; background:#1FA8DC; color:#fff; font-weight:700; font-size:1rem;
  border:0; cursor:pointer; transition:background-color .2s ease;
}
.oof-dugme:hover{ background:#241C3B; }
.oof-dugme--ikincil{ background:#fff; color:#241C3B; border:2px solid rgba(36,28,59,.12); }
.oof-dugme--ikincil:hover{ background:#fff; border-color:#241C3B; }
.oof-onay{ display:flex; align-items:center; gap:.6rem; margin-top:1.15rem; font-weight:600; }
.oof-onay input{ width:20px; height:20px; }

/* Bal küpü: ekran okuyucudan da gizli, göze de görünmez. */
.oof-kupa{ position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }

/* ---- Yönetim paneli ---- */
.oof-panel-sekme{
  display:inline-flex; align-items:center; gap:.55rem; white-space:nowrap;
  height:44px; padding:0 1.05rem; border-radius:999px;
  border:2px solid rgba(36,28,59,.12); background:#fff;
  font-weight:700; font-size:.9375rem; transition:border-color .2s, background-color .2s, color .2s;
}
.oof-panel-sekme:hover{ border-color:#241C3B; }
.oof-panel-sekme[aria-current="page"]{ background:#241C3B; border-color:#241C3B; color:#fff; }
.oof-panel-sekme i{ color:var(--c); }
.oof-panel-sekme[aria-current="page"] i{ color:#fff; }
.oof-rozet{
  display:inline-grid; place-items:center; min-width:24px; height:24px; padding:0 .4rem;
  border-radius:999px; background:#EF4136; color:#fff; font-size:.875rem; font-weight:700;
}

.oof-satir{
  display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:1rem;
  padding:1rem 1.15rem; border:2px solid rgba(36,28,59,.08); border-radius:18px;
  background:#fff; min-width:0;
}
.oof-satir + .oof-satir{ margin-top:.7rem; }
.oof-satir__orta{ min-width:0; }
.oof-satir__baslik{ font-weight:700; font-size:1.0625rem; line-height:1.35; word-break:break-word; }
.oof-satir__alt{ margin-top:.25rem; font-weight:500; color:rgba(36,28,59,.55); }

.oof-durum{
  display:inline-flex; align-items:center; gap:.4rem;
  padding:.28rem .7rem; border-radius:999px;
  font-size:.9375rem; font-weight:700; white-space:nowrap;
}
.oof-durum--yayinda{ background:rgba(67,176,42,.14); color:#2f7d1d; }
.oof-durum--beklemede{ background:rgba(253,197,0,.2); color:#8a6b00; }
.oof-durum--copte{ background:rgba(239,65,54,.13); color:#c22c22; }
.oof-durum--askida{ background:rgba(122,79,214,.14); color:#5a37a5; }

.oof-panel-arac{
  display:flex; flex-wrap:wrap; align-items:center; gap:.7rem;
  padding:1rem 1.15rem; border:2px solid rgba(36,28,59,.08); border-radius:18px;
  background:#fff; margin-bottom:1.1rem;
}
.oof-mini{
  height:44px; padding:0 1rem; border-radius:14px;
  border:2px solid rgba(36,28,59,.12); background:#fff; font:inherit; font-weight:600;
}
.oof-mini--dugme{ cursor:pointer; background:#241C3B; color:#fff; border-color:#241C3B; }
.oof-mini--dugme:hover{ background:#1FA8DC; border-color:#1FA8DC; }

/* Onay kutusu */
.oof-modal[hidden]{ display:none !important; }
.oof-modal{
  position:fixed; inset:0; z-index:100; display:grid; place-items:center;
  background:rgba(36,28,59,.55); padding:1rem;
}
.oof-modal__kutu{
  width:100%; max-width:30rem; background:#fff; border-radius:22px;
  border:2px solid rgba(36,28,59,.1); padding:1.6rem;
}

/* Uzun seçenek metni <select>'i kabından taşırıyor: forum adları uzun ve
   select'in doğal genişliği en uzun seçeneğe göre hesaplanıyor. 390px'te
   107px taşma ölçüldü. */
.oof-mini{ max-width:100%; min-width:0; }
select.oof-mini{ width:auto; max-width:100%; text-overflow:ellipsis; }
.oof-panel-arac > *{ min-width:0; }

/* ---------- panel: ana sayfa bölümleri ---------- */
.oof-durum--acik{ background:rgba(67,176,42,.14); color:#2f7d1d; }
.oof-durum--kapali{ background:rgba(36,28,59,.09); color:rgba(36,28,59,.6); }

.oof-agac{
	max-height:26rem; overflow-y:auto; padding:.35rem;
	border:2px solid rgba(36,28,59,.1); border-radius:16px; background:#fff;
}
.oof-agac__satir{
	display:flex; align-items:center; gap:.65rem;
	padding:.4rem .6rem; border-radius:10px; font-weight:600; cursor:pointer;
}
.oof-agac__satir:hover{ background:rgba(31,168,220,.08); }
.oof-agac__satir input{ width:18px; height:18px; flex:0 0 auto; }
.oof-agac__satir > span:nth-of-type(1){ min-width:0; flex:1 1 auto; overflow-wrap:anywhere; }
.oof-agac__sayi{ flex:0 0 auto; font-weight:600; color:rgba(36,28,59,.5); }

/* ---------- ana sayfa: görseli olmayan konunun kapağı ---------- */
.oof-kapak{
	position:relative; display:block; width:100%; height:100%;
	border-radius:16px; overflow:hidden;
	background-color:var(--kc,#241C3B);
	background-image:radial-gradient(rgba(255,255,255,.22) 1.6px, transparent 1.6px);
	background-size:22px 22px; background-position:-11px -11px;
}
.oof-kapak__ikon{
	position:absolute; inset:0; display:grid; place-items:center;
	color:rgba(255,255,255,.85); font-size:2.6rem;
}
.oof-kapak--kucuk .oof-kapak__ikon{ font-size:1.8rem; }

/* Kategori kartının vurgusu forum renginden (dinamik Tailwind sınıfı üretilemez —
   feedback-tailwind-dinamik-sinif-adi). */
.kat-kart:hover{ border-color: var(--hc, rgba(36,28,59,.3)); }