/*
  Koyu tema.

  style.css satin alinmis bir sablon (6900 satir) ve renkleri dogrudan
  yaziyor; oraya dokunmak yerine butun koyu kurallar burada, en son yuklenen
  dosyada toplandi. Boylece sablon guncellenirse koyu tema kaybolmuyor ve
  acik tema tek satir bile degismiyor.

  Kurallar html[data-tema="koyu"] altinda; isaret <head> icinde, sayfa
  boyanmadan once konuyor (bkz. templates/part/_tema_bas.html).

  Hangi kutularin koyulasmasi gerektigi tahminle degil, calisan site
  taranarak bulundu: acik zeminli her ogenin sinifi cikarilip karsiligi
  buraya yazildi.
*/

html[data-tema="koyu"] {
    --k-zemin: #0f1319;      /* sayfa zemini */
    --k-yuzey: #161b23;      /* kartlar, beyaz kutular */
    --k-yuzey2: #131820;     /* genis bolum zeminleri (sky-blue, gray-bg) */
    --k-cizgi: #2a323f;
    --k-baslik: #eef1f6;
    --k-metin: #c3cad6;
    --k-soluk: #8b95a5;
    color-scheme: dark;      /* kaydirma cubugu ve form denetimleri de koyu */
}

/* ---- Zemin ve tipografi ----

   Basliklarda nitelik secici iki kez yaziliyor: sablon renkleri
   ".slider-area .hero__caption h1" gibi iki-uc sinifli secicilerle
   veriyor ve tek "html[data-tema] h1" onlari gecemiyor. Tekrar, ozgulugu
   !important'a basvurmadan yukseltiyor. */

html[data-tema="koyu"] body {
    background: var(--k-zemin);
    color: var(--k-metin);
}

html[data-tema="koyu"][data-tema="koyu"] h1,
html[data-tema="koyu"][data-tema="koyu"] h2,
html[data-tema="koyu"][data-tema="koyu"] h3,
html[data-tema="koyu"][data-tema="koyu"] h4,
html[data-tema="koyu"][data-tema="koyu"] h5,
html[data-tema="koyu"][data-tema="koyu"] h6,
html[data-tema="koyu"] .slider-area .hero__caption h1,
html[data-tema="koyu"] .applic-apps .single-cases-info h3,
html[data-tema="koyu"] .best-features-area .single-features .features-caption h3,
html[data-tema="koyu"] .service-area .services-caption h3,
html[data-tema="koyu"] .footer-area .footer-tittle h4 {
    color: var(--k-baslik);
}

html[data-tema="koyu"][data-tema="koyu"] p,
html[data-tema="koyu"][data-tema="koyu"] li,
/* Sablon b/strong/u/del icin #222 veriyor; koyu kartta okunmuyordu. */
html[data-tema="koyu"][data-tema="koyu"] b,
html[data-tema="koyu"][data-tema="koyu"] strong,
html[data-tema="koyu"][data-tema="koyu"] u,
html[data-tema="koyu"][data-tema="koyu"] del,
html[data-tema="koyu"][data-tema="koyu"] sup,
html[data-tema="koyu"][data-tema="koyu"] sub,
html[data-tema="koyu"] .slider-area .hero__caption p {
    color: var(--k-metin);
}

html[data-tema="koyu"][data-tema="koyu"] .section-tittle p,
html[data-tema="koyu"] .slider-area .hero__caption span,
html[data-tema="koyu"] .footer-area .footer-tittle ul li a,
html[data-tema="koyu"] .footer-area .footer-pera p {
    color: var(--k-soluk);
}

/* Renkli zeminlerin (mavi-yesil gradyan, mor kutular) uzerindeki beyaz
   yazilar oldugu gibi kalmali: o bolumler koyu temada da renkli duruyor. */
html[data-tema="koyu"] .section-tittle2 h2,
html[data-tema="koyu"] .available-app-area .app-caption h2,
html[data-tema="koyu"] .available-app-area .app-caption p,
html[data-tema="koyu"] .available-app-area .app-caption .section-tittle3 h2 {
    color: #fff;
}

/* ---- Genis bolum zeminleri ---- */

html[data-tema="koyu"] .sky-blue,
html[data-tema="koyu"] .gray-bg,
html[data-tema="koyu"] .section-bg {
    background: var(--k-yuzey2);
}

/* ---- Kutular ve kartlar ---- */

html[data-tema="koyu"] .white-bg,
html[data-tema="koyu"] .sample-text-area,
html[data-tema="koyu"] .service-area .services-caption,
html[data-tema="koyu"] .pricing-card-area .single-card,
html[data-tema="koyu"] .our-customer .single-customer,
html[data-tema="koyu"] .single-blog,
html[data-tema="koyu"] .card {
    background: var(--k-yuzey);
}

html[data-tema="koyu"] .pricing-card-area .single-card .card-top,
html[data-tema="koyu"] hr {
    border-color: var(--k-cizgi);
}

/* Kaydiraklarin ok dugmeleri beyaz saydamdi; koyu zeminde parliyordu. */
html[data-tema="koyu"] .owl-carousel .owl-prev,
html[data-tema="koyu"] .owl-carousel .owl-next {
    background: rgba(22, 27, 35, 0.85);
    color: var(--k-metin);
}

/* ---- Ust bar ---- */

/* Menu sayfa basinda hero'nun uzerinde saydam duruyor; asagi kayinca
   "sticky-bar" ile beyaza donuyordu. */
html[data-tema="koyu"] .header-area .main-header.sticky-bar,
html[data-tema="koyu"] .header-sticky.sticky-bar,
html[data-tema="koyu"] .sticky-bar {
    background: rgba(15, 19, 25, 0.94);
    box-shadow: 0 2px 14px rgba(0, 0, 0, 0.5);
}

html[data-tema="koyu"] .main-menu ul li a {
    color: var(--k-baslik);
}

/* Mobil menu (slicknav) beyaz bir katman aciyor. */
html[data-tema="koyu"] .slicknav_menu,
html[data-tema="koyu"] .slicknav_nav,
html[data-tema="koyu"] .slicknav_nav .slicknav_row {
    background: var(--k-yuzey);
}

html[data-tema="koyu"] .slicknav_nav a,
html[data-tema="koyu"] .slicknav_btn {
    color: var(--k-metin);
}

/* ---- Dugmeler ---- */

/* Beyaz zeminli, mor cerceveli dugme koyu zeminde beyaz bir lekeydi. */
html[data-tema="koyu"] .boxed-btn {
    background: transparent;
    border-color: #a855f7;
    color: #c084fc !important;
}

html[data-tema="koyu"] .boxed-btn:hover {
    background: #8f1bdc;
    color: #fff !important;
}

/* ---- Formlar ---- */

html[data-tema="koyu"] input,
html[data-tema="koyu"] select,
html[data-tema="koyu"] textarea,
html[data-tema="koyu"] .form-control,
html[data-tema="koyu"] .form-contact .form-control {
    background: var(--k-yuzey);
    border-color: var(--k-cizgi);
    color: var(--k-metin);
}

html[data-tema="koyu"] input::placeholder,
html[data-tema="koyu"] textarea::placeholder,
html[data-tema="koyu"] .form-contact .form-control::placeholder {
    color: var(--k-soluk);
}

/* ---- Acilis perdesi ---- */

/* Perde beyazdi: koyu temada sayfa acilirken bir anlik beyaz parlama
   yapiyordu — yani head'deki script ile onlenen "flash"i geri getiriyordu. */
html[data-tema="koyu"] #preloader-active,
html[data-tema="koyu"] .preloader,
html[data-tema="koyu"] .preloader .preloader-circle {
    background: var(--k-zemin);
}

/* ---- Tema dugmesi ---- */

.tema-dugmesi {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    padding: 0;
    margin-left: 18px;
    border: 1px solid rgba(127, 127, 127, 0.45);
    border-radius: 50%;
    background: transparent;
    color: inherit;
    cursor: pointer;
    vertical-align: middle;
    transition: background .2s ease, border-color .2s ease;
}

.tema-dugmesi:hover {
    background: rgba(127, 127, 127, 0.16);
}

.tema-dugmesi:focus-visible {
    outline: 2px solid #8f1bdc;
    outline-offset: 2px;
}

/* Dugme "su an ne oldugunu" degil "basinca ne olacagini" gosteriyor:
   acik temada ay, koyu temada gunes. */
.tema-dugmesi .tema-gunes {
    display: none;
}

html[data-tema="koyu"] .tema-dugmesi .tema-ay {
    display: none;
}

html[data-tema="koyu"] .tema-dugmesi .tema-gunes {
    display: block;
}

/* ---- Anasayfadaki rakamlar ---- */

/* Renkler index.html'de satir ici yazilmisti; satir ici stil her seciciyi
   gectigi icin koyu temada duzeltilemiyordu, sinifa alindi. */
.sayac-rakam {
    margin: 0;
    font-weight: 800;
    color: #5f39ea;
}

.sayac-etiket {
    margin: 0;
    color: #8a8a8a;
}

/* Marka moru koyu zeminde okunmuyor (kontrast 2.9); ayni morun acik tonu. */
html[data-tema="koyu"] .sayac-rakam {
    color: #a78bfa;
}

html[data-tema="koyu"] .sayac-etiket {
    color: var(--k-soluk);
}

/* ---- Fiyat karti ---- */

html[data-tema="koyu"] .pricing-card-area .single-card .card-top span {
    color: var(--k-soluk);
}

html[data-tema="koyu"] .pricing-card-area .single-card .card-top h4,
html[data-tema="koyu"] .pricing-card-area .single-card .card-top h4 span {
    color: #c4b5fd;
}

.abonelik-notu {
    color: #8a8a8a;
    font-size: 14px;
    margin-top: 10px;
}

html[data-tema="koyu"] .abonelik-notu {
    color: var(--k-soluk);
}

/* ---- Oyunlar sayfasi ---- */

/* Bu sayfa kendi <style> blogunda beyaz kartlar kuruyor. Genel yazi
   kurallari yaziyi acikca cevirince kart uzerinde beyaz-uzerine-beyaz
   ciktisi olusuyordu; kartlarin da koyulasmasi gerekiyor. */
html[data-tema="koyu"] .oyun-kart,
html[data-tema="koyu"] .siralama-kutu {
    background: var(--k-yuzey);
}

html[data-tema="koyu"] .oyun-slogan,
html[data-tema="koyu"] .siralama-satir span,
html[data-tema="koyu"] .siralama-nokta {
    color: var(--k-soluk);
}

html[data-tema="koyu"] .oyun-etiket {
    background: var(--k-yuzey2);
    color: var(--k-metin);
}

html[data-tema="koyu"] .siralama-satir {
    border-bottom-color: var(--k-cizgi);
}

/* Kullanicinin kendi satiri acik yesil bir seritti. */
html[data-tema="koyu"] .siralama-ben {
    background: rgba(119, 200, 60, 0.16);
}

/* ---- Sik sorulanlar ---- */

/* Bu sayfa da kendi <style> blogunda beyaz kart kuruyor. */
html[data-tema="koyu"] .sss-kart {
    background: var(--k-yuzey);
}

html[data-tema="koyu"] .sss-grup {
    border-bottom-color: var(--k-cizgi);
}

/* Mobil bardaki dugme: slicknav'in actigi menu simgesinin karsisinda,
   sagda duruyor. Menu listesinin ICINE konsaydi slicknav onu bir menu
   maddesi gibi kopyalardi. */
.tema-dugme-mobil {
    position: absolute;
    top: 8px;
    right: 15px;
    z-index: 3;
}