/*
 * Anthic — tema ayarlari koprusu + betiksiz bilesenler.
 *
 * TASARIM NASIL CALISIYOR
 * Sayfalar ozgun HTML'in Tailwind siniflarini AYNEN kullaniyor; index-*.css
 * o siniflarin derlenmis halini tasiyor. Yani gorunumun buyuk kismi oradan
 * geliyor, burada iki is yapiyoruz:
 *
 *   1) Ozgun tasarimda SABIT yazilmis renkleri (#b4f32e, #050505, #1a1a1a...)
 *      yonetim panelindeki ayarlara bagliyoruz. Bu dosya index-*.css'ten SONRA
 *      yuklendigi icin ayni ozgullukteki kurallar bunu eziyor; !important yok.
 *   2) Ozgun tasarimda JS ile calisan parcalari (mobil menu, S.S.S. akordeonu,
 *      EX sekmeleri) betiksiz yeniden yaziyoruz. Tema JS dosyasi yuklemiyor;
 *      betik bloklanirsa sayfa yine calissin diye bilerek boyle.
 */

:root {
  --anthic-accent: #b4f32e;
  --anthic-accent-dark: #8fc424;
  --anthic-accent-fg: #000;
  --anthic-bg: #000;
  --anthic-surface: #111;
  --anthic-accent2: #8b5cf6; /* EX serisi / ikincil vurgu */

  /* Turetilmis tonlar — ayar degisince hepsi birlikte kayar */
  --anthic-accent-05: color-mix(in oklab, var(--anthic-accent) 5%, transparent);
  --anthic-accent-10: color-mix(in oklab, var(--anthic-accent) 10%, transparent);
  --anthic-accent-20: color-mix(in oklab, var(--anthic-accent) 20%, transparent);
  --anthic-accent-30: color-mix(in oklab, var(--anthic-accent) 30%, transparent);
  --anthic-accent-50: color-mix(in oklab, var(--anthic-accent) 50%, transparent);
  --anthic-accent-hover: color-mix(in srgb, var(--anthic-accent) 82%, #fff);
  --anthic-surface-2: color-mix(in srgb, var(--anthic-surface) 70%, var(--anthic-bg));
  --anthic-surface-3: color-mix(in srgb, var(--anthic-surface) 40%, var(--anthic-bg));
}

/* ============================================================ VURGU RENGI */

.bg-\[\#b4f32e\]              { background-color: var(--anthic-accent); }
.bg-\[\#b4f32e\]\/5           { background-color: var(--anthic-accent-05); }
.bg-\[\#b4f32e\]\/10          { background-color: var(--anthic-accent-10); }
.text-\[\#b4f32e\]            { color: var(--anthic-accent); }
.border-\[\#b4f32e\]          { border-color: var(--anthic-accent); }
.border-\[\#b4f32e\]\/10      { border-color: var(--anthic-accent-10); }
.border-\[\#b4f32e\]\/20      { border-color: var(--anthic-accent-20); }
.decoration-\[\#b4f32e\]      { text-decoration-color: var(--anthic-accent); }
.fill-\[\#b4f32e\]\/10        { fill: var(--anthic-accent-10); }
.from-\[\#b4f32e\]            { --tw-gradient-from: var(--anthic-accent); }
.from-\[\#b4f32e\]\/5         { --tw-gradient-from: var(--anthic-accent-05); }
.from-\[\#b4f32e\]\/10        { --tw-gradient-from: var(--anthic-accent-10); }
.to-\[\#b4f32e\]\/10          { --tw-gradient-to: var(--anthic-accent-10); }

.hover\:bg-\[\#c6ff4d\]:hover     { background-color: var(--anthic-accent-hover); }
.hover\:text-\[\#c6ff4d\]:hover   { color: var(--anthic-accent-hover); }
.hover\:bg-\[\#b4f32e\]\/5:hover  { background-color: var(--anthic-accent-05); }
.hover\:bg-\[\#b4f32e\]\/10:hover { background-color: var(--anthic-accent-10); }
.hover\:text-\[\#b4f32e\]:hover   { color: var(--anthic-accent); }
.hover\:border-\[\#b4f32e\]:hover     { border-color: var(--anthic-accent); }
.hover\:border-\[\#b4f32e\]\/30:hover { border-color: var(--anthic-accent-30); }
.hover\:border-\[\#b4f32e\]\/50:hover { border-color: var(--anthic-accent-50); }
.focus\:border-\[\#b4f32e\]:focus     { border-color: var(--anthic-accent); }
.group:hover .group-hover\:bg-\[\#b4f32e\] { background-color: var(--anthic-accent); }

/* Vurgu uzerine gelen yazi rengi. Bu tasarimda text-black YALNIZCA vurgu
   zeminlerde kullaniliyor; ayardan degistirilebilsin diye baglandi. */
.text-black { color: var(--anthic-accent-fg); }
.fill-black { fill: var(--anthic-accent-fg); }

/* ======================================================== ZEMIN / YUZEYLER */

.bg-black,
.bg-\[\#050505\]        { background-color: var(--anthic-bg); }
.bg-\[\#0f0f0f\]        { background-color: var(--anthic-surface-3); }
.bg-\[\#1a1a1a\]        { background-color: var(--anthic-surface); }
.bg-\[\#0a0a0a\]        { background-color: var(--anthic-surface-2); }
.bg-\[\#0a0a0a\]\/80    { background-color: color-mix(in srgb, var(--anthic-surface-2) 80%, transparent); }
.bg-\[\#0a0a0a\]\/95    { background-color: color-mix(in srgb, var(--anthic-surface-2) 95%, transparent); }

.from-black             { --tw-gradient-from: var(--anthic-bg); }
.from-black\/80         { --tw-gradient-from: color-mix(in srgb, var(--anthic-bg) 80%, transparent); }
.via-black              { --tw-gradient-via: var(--anthic-bg); }
.via-black\/20          { --tw-gradient-via: color-mix(in srgb, var(--anthic-bg) 20%, transparent); }
.via-black\/70          { --tw-gradient-via: color-mix(in srgb, var(--anthic-bg) 70%, transparent); }
.to-black               { --tw-gradient-to: var(--anthic-bg); }
.to-\[\#050505\]        { --tw-gradient-to: var(--anthic-bg); }
.via-\[\#050505\]       { --tw-gradient-via: var(--anthic-bg); }
.from-\[\#0f0f0f\]      { --tw-gradient-from: var(--anthic-surface-3); }
.to-\[\#0a0a0a\]        { --tw-gradient-to: var(--anthic-surface-2); }

/* EX serisi moru — ikinci vurgu ayarina bagli */
.bg-\[\#8b5cf6\]        { background-color: var(--anthic-accent2); }
.bg-\[\#8b5cf6\]\/5     { background-color: color-mix(in oklab, var(--anthic-accent2) 5%, transparent); }
.text-\[\#8b5cf6\]      { color: var(--anthic-accent2); }
.border-\[\#8b5cf6\]    { border-color: var(--anthic-accent2); }
.from-\[\#8b5cf6\]      { --tw-gradient-from: var(--anthic-accent2); }
.to-\[\#8b5cf6\]        { --tw-gradient-to: var(--anthic-accent2); }
.via-\[\#8b5cf6\]\/10   { --tw-gradient-via: color-mix(in oklab, var(--anthic-accent2) 10%, transparent); }
.bg-\[\#2d1b4e\]        { background-color: color-mix(in srgb, var(--anthic-accent2) 30%, #120a20); }
.text-\[\#2d1b4e\]      { color: color-mix(in srgb, var(--anthic-accent2) 30%, #120a20); }

body { background: var(--anthic-bg); color: #fff; }

/* ============================================================ BASLIK VURGU */

/*
 * theme_html() guvenlik icin OZNITELIKLERI siliyor: ayara <span class="...">
 * yazilsa bile class'i atiyor. Bu yuzden vurgu, ciplak <span> ile veriliyor —
 * musteri ayarda sadece <span>kelime</span> yaziyor, rengi buradan geliyor.
 */
.anthic-vurgu span,
.anthic-vurgu strong,
.anthic-vurgu b { color: var(--anthic-accent); font-weight: inherit; }

/* ======================================================= BETIKSIZ BILESENLER */

/* --- mobil menu: gizli onay kutusu --- */
.anthic-mobil-kutu { position: absolute; opacity: 0; pointer-events: none; }
.anthic-mobil-menu { display: none; }
.anthic-mobil-kutu:checked ~ .anthic-mobil-menu { display: block; }
@media (min-width: 1024px) {
  .anthic-mobil-dugme, .anthic-mobil-menu { display: none !important; }
}

/* --- S.S.S. akordeonu: <details>/<summary>, JS yok --- */
.anthic-sss { list-style: none; }
.anthic-sss > summary { list-style: none; cursor: pointer; }
.anthic-sss > summary::-webkit-details-marker { display: none; }
.anthic-sss > summary::marker { content: ''; }

.anthic-sss .anthic-sss-arti { display: flex; }
.anthic-sss .anthic-sss-eksi { display: none; }
.anthic-sss[open] .anthic-sss-arti { display: none; }
.anthic-sss[open] .anthic-sss-eksi { display: flex; }
/* Kenar RENGI tamamen buradan yonetiliyor; sablonda "border-white/10"
   utility'si KULLANILMIYOR. Kullanildiginda acik durumdaki vurgu rengi
   uygulanmiyordu: o utility Tailwind'in "utilities" katmaninda ve bu
   dosyadaki kurali eziyordu. Genislik sablondaki "border" sinifindan gelir. */
.anthic-sss { border-color: rgb(255 255 255 / 0.1); }

/* BILINEN EKSIK: acik sorunun kenarligi vurgu rengine donmuyor.
   Kural eslesiyor (ayni secicideki arti/eksi ikonu degisimi calisiyor) ama
   border-color ve box-shadow uygulanmiyor; ozgulluk artirmak ve !important
   denendi, ikisi de sonuc vermedi — Tailwind v4'un @layer/--tw-* uretimiyle
   ilgili. Akordeonun ISLEVI etkilenmiyor: acilip kapaniyor, ikon degisiyor,
   cevap goruntuleniyor. Kozmetik; ayri ele alinacak. */
.anthic-sss[open] { border-color: var(--anthic-accent); box-shadow: 0 0 30px var(--anthic-accent-10); }

/* --- EX serisi sekmeleri: gizli radyo dugmeleri --- */
.anthic-sekme-kutu { position: absolute; opacity: 0; pointer-events: none; }
.anthic-sekme-govde { display: none; }
/* Govde bir Tailwind grid'i; display:flex verilirse 12 sutunluk yerlesim
   bozulur. Acik sekme yine GRID olarak gosteriliyor. */
#anthic-ex-1:checked ~ .anthic-ex-govde-1,
#anthic-ex-2:checked ~ .anthic-ex-govde-2,
#anthic-ex-3:checked ~ .anthic-ex-govde-3 { display: grid; }
#anthic-ex-1:checked ~ * .anthic-ex-etiket-1,
#anthic-ex-2:checked ~ * .anthic-ex-etiket-2,
#anthic-ex-3:checked ~ * .anthic-ex-etiket-3 {
  background: var(--anthic-surface-3);
  border-color: var(--anthic-accent2);
  color: var(--anthic-accent2);
}

/* --- kayit formu: bireysel / kurumsal secimi (gizli radyo, JS yok) ---

   Ocean bunu Alpine ile yapiyor (x-show); Anthic hic betik yuklemedigi icin
   ayni is EX sekmeleriyle ayni kalipla, salt CSS ile yapiliyor.
   Kurumsal alanlarin ZORUNLULUGU sunucuda: required_if kuralı. */
.anthic-tur-kutu { position: absolute; opacity: 0; pointer-events: none; }
.anthic-kurumsal { display: none; }
#anthicTurKurumsal:checked ~ .anthic-kurumsal { display: grid; }

#anthicTurBireysel:checked ~ * .anthic-tur-etiket-1,
#anthicTurKurumsal:checked ~ * .anthic-tur-etiket-2 {
  background: var(--anthic-surface);
  border-color: var(--anthic-accent);
  color: var(--anthic-accent);
}

/* --- konum satirlarindaki sinyal cubuklari --- */
.anthic-cubuk { width: 6px; border-radius: 2px; background: #374151; }
.anthic-cubuk.dolu { background: var(--anthic-accent); }

/* ================================================================ YARDIMCI */

/* Ust menu sabit oldugu icin ic sayfalar altina girmesin */
.anthic-main-bosluk { padding-top: 104px; }

/* Ayni sebeple: #games / #paketler bagi tiklandiginda baslik menunun
   altinda kalmasin. */
html { scroll-behavior: smooth; }
[id] { scroll-margin-top: 96px; }

/* ===================================================== EKSIK TAILWIND SINIFLARI

   index-*.css yalnizca ozgun tasarimin ANASAYFADA kullandigi siniflari tasiyor.
   Alt sayfalar icin gereken birkac sinif o pakette yok; node/npm olmadigi icin
   yeniden derlenemiyor, o yuzden elle yaziliyor.

   NOT: pt-24 / lg:pt-28 zaten layout'ta (akis mesajlari serididi) kullaniliyordu
   ama pakette olmadigi icin hicbir sey yapmiyordu — bu blok onu da duzeltiyor. */

.py-24 { padding-top: 6rem; padding-bottom: 6rem; }
.pt-24 { padding-top: 6rem; }
.top-24 { top: 6rem; }
.top-28 { top: 7rem; }
@media (min-width: 1024px) { .lg\:pt-28 { padding-top: 7rem; } }

.aspect-video { aspect-ratio: 16 / 9; }

/* Bosluk / olcu yardimcilari */
.gap-2\.5 { gap: 0.625rem; }
.gap-10   { gap: 2.5rem; }
.mt-5  { margin-top: 1.25rem; }
.mt-6  { margin-top: 1.5rem; }
.mt-10 { margin-top: 2.5rem; }
.mb-1\.5 { margin-bottom: 0.375rem; }
.mb-5  { margin-bottom: 1.25rem; }
.mb-7  { margin-bottom: 1.75rem; }
.p-10  { padding: 2.5rem; }
.pb-6  { padding-bottom: 1.5rem; }
.pt-6  { padding-top: 1.5rem; }
.pl-5  { padding-left: 1.25rem; }
.px-1  { padding-left: 0.25rem; padding-right: 0.25rem; }
.py-3\.5 { padding-top: 0.875rem; padding-bottom: 0.875rem; }
.left-3 { left: 0.75rem; }
.h-px   { height: 1px; }
.h-2\.5 { height: 0.625rem; }
.w-2\.5 { width: 0.625rem; }
.w-auto { width: auto; }
.max-w-xl { max-width: 36rem; }
.space-y-1  > :not([hidden]) ~ :not([hidden]) { margin-top: 0.25rem; }
.space-y-16 > :not([hidden]) ~ :not([hidden]) { margin-top: 4rem; }
.border-dashed { border-style: dashed; }
.list-disc { list-style-type: disc; }

/* Renkler */
.bg-white\/10       { background-color: rgb(255 255 255 / 0.1); }
.bg-black\/80       { background-color: color-mix(in srgb, var(--anthic-bg) 80%, transparent); }
.border-red-500\/60 { border-color: rgb(239 68 68 / 0.6); }
.text-red-400       { color: #f87171; }
.text-gray-700      { color: #374151; }
.text-\[11px\]      { font-size: 11px; line-height: 1.45; }
.text-\[\#b4f32e\]\/20 { color: var(--anthic-accent-20); }

/* Kirilma noktalari — Tailwind: sm 640px, lg 1024px, xl 1280px */
@media (min-width: 640px) {
  .sm\:items-center { align-items: center; }
  .sm\:grid-cols-3  { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .sm\:grid-cols-4  { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .sm\:h-8  { height: 2rem; }
  .sm\:h-16 { height: 4rem; }
  .sm\:w-16 { width: 4rem; }
  .sm\:p-10 { padding: 2.5rem; }
  .sm\:mb-14 { margin-bottom: 3.5rem; }
  .sm\:py-28 { padding-top: 7rem; padding-bottom: 7rem; }
}
@media (min-width: 1024px) { .lg\:gap-16 { gap: 4rem; } }
@media (min-width: 1280px) { .xl\:text-3xl { font-size: 1.875rem; line-height: 2.25rem; } }

.line-clamp-2,
.line-clamp-3 {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.line-clamp-2 { -webkit-line-clamp: 2; }
.line-clamp-3 { -webkit-line-clamp: 3; }

/* ============================================================ ZENGIN ICERIK

   Blog yazisi ve ozel sayfalar yoneticiden HTML olarak geliyor; hangi etiketin
   gelecegi onceden bilinmiyor. Tailwind'in "prose" eklentisi bu pakette YOK,
   o yuzden okunabilir bir tipografi burada tanimlaniyor. */

.anthic-icerik { color: #d1d5db; line-height: 1.75; }
.anthic-icerik > * + * { margin-top: 1.25rem; }

.anthic-icerik :is(h1, h2, h3, h4) {
  color: #fff;
  font-weight: 900;
  letter-spacing: -0.025em;
  line-height: 1.25;
  margin-top: 2.5rem;
}
.anthic-icerik h1 { font-size: 1.875rem; }
.anthic-icerik h2 { font-size: 1.5rem; }
.anthic-icerik h3 { font-size: 1.25rem; }
.anthic-icerik h4 { font-size: 1.075rem; }

.anthic-icerik a { color: var(--anthic-accent); text-decoration: underline; text-underline-offset: 3px; }
.anthic-icerik strong { color: #fff; font-weight: 700; }
.anthic-icerik :is(ul, ol) { padding-left: 1.5rem; }
.anthic-icerik ul { list-style: disc; }
.anthic-icerik ol { list-style: decimal; }
.anthic-icerik li + li { margin-top: 0.5rem; }
.anthic-icerik li::marker { color: var(--anthic-accent); }

.anthic-icerik blockquote {
  border-left: 3px solid var(--anthic-accent);
  padding: 0.25rem 0 0.25rem 1.25rem;
  color: #9ca3af;
  font-style: italic;
}

.anthic-icerik :is(img, video) { border-radius: 1rem; max-width: 100%; height: auto; }

.anthic-icerik code {
  background: var(--anthic-surface);
  border: 1px solid rgb(255 255 255 / 0.1);
  border-radius: 0.375rem;
  padding: 0.125rem 0.375rem;
  font-size: 0.875em;
  color: var(--anthic-accent);
}
.anthic-icerik pre {
  background: var(--anthic-surface);
  border: 1px solid rgb(255 255 255 / 0.1);
  border-radius: 1rem;
  padding: 1rem 1.25rem;
  overflow-x: auto;
}
.anthic-icerik pre code { background: none; border: 0; padding: 0; color: inherit; }

/* Genis tablo sayfayi yatay kaydirmasin; kendi icinde kaysin. */
.anthic-icerik table { width: 100%; border-collapse: collapse; display: block; overflow-x: auto; }
.anthic-icerik :is(th, td) { border: 1px solid rgb(255 255 255 / 0.1); padding: 0.625rem 0.875rem; text-align: left; }
.anthic-icerik th { color: #fff; font-weight: 700; background: var(--anthic-surface-3); }

/* Anasayfa disindaki sayfalar (giris, iletisim, urun...) ozgun tasarimin
   siniflarini kullanmiyor; en azindan okunur dursunlar. */
.anthic-main-bosluk :is(h1, h2, h3) { color: #fff; }
.anthic-main-bosluk a { color: var(--anthic-accent); }

/* Zengin icerikte baglanti rengini yukaridaki kural belirlesin. */
.anthic-main-bosluk .anthic-icerik a { color: var(--anthic-accent); }

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}