/* =============================================================
   MOSSAICA - KOYU TEMA  (v2)
   -------------------------------------------------------------
   style.css ve color1.css'ten SONRA yuklenir.
   Mevcut tema dosyalarina dokunulmaz; bu dosya uzerine yazar.
   Geri almak: layouts/home.php'deki tek <link> satirini sil.

   Renk degistirmek icin sadece asagidaki :root blogu duzenlenir.
   ============================================================= */

:root {
  /* --- Zeminler (logonun lacivertinden turetildi) ---
     Bu dosya body arka planini !important ile basiyor; jetonlari
     mossaica.css'e bagladik ki paleti tek yerden acip kapatalim,
     eski/yeni bolumler arasinda ton farki olusmasin. */
  --mos-bg:          var(--ink-900);
  --mos-surface:     var(--ink-800);
  --mos-surface-2:   #1D2C44;
  --mos-surface-3:   #22334D;
  --mos-border:      #2B3D59;
  --mos-border-soft: rgba(255, 255, 255, 0.07);

  /* --- Metin --- */
  --mos-text:        #E6EDF5;
  --mos-text-dim:    #9BA9BC;
  --mos-text-faint:  #6E7C90;

  /* --- Vurgu (logonun celik/gok mavisi) --- */
  --mos-accent:      #6BA3D4;
  --mos-accent-soft: #A9D3F0;
  --mos-accent-deep: #1E3A5F;

  /* Temada 28 yerde gecen #ffc30c sarisi logoyla uyumsuzdu.
     Sariyi geri istersen: #ffc30c yaz. */
  --mos-warm:        var(--mos-accent);

  /* --- Header seridi ---
     KARAR: logonun renklerine DOKUNULMUYOR. Logo lacivert oldugu
     icin header acik tonda birakildi; logonun en acik mavisiyle
     ayni aileden soguk bir beyaz. */
  --mos-logo-filter:   none;
  --mos-header-bg:     #EFF4FA;
  --mos-header-text:   #16243A;
  --mos-header-dim:    #5A6B84;
  --mos-header-border: #D8E2EF;

  /* --- Olcu / ritim --- */
  --mos-radius:    10px;
  --mos-radius-sm: 6px;
  --mos-gecis:     0.25s cubic-bezier(0.4, 0, 0.2, 1);

  /* Kart gorsel orani - tum kartlar ayni boyda olsun diye */
  --mos-kart-oran: 4 / 3;
}


/* =============================================================
   1 - ZEMIN VE TIPOGRAFI
   ============================================================= */

body,
body.page,
#wrapper,
#page,
.site-main,
#main-content,
#site-content,
#inner-content,
.page-content,
#content-wrap {
  background-color: var(--mos-bg) !important;
  color: var(--mos-text);
}

body {
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6,
.heading, .widget-title, .post-title {
  color: var(--mos-text) !important;
  letter-spacing: -0.01em;
  line-height: 1.25;
}

h1 { font-size: 2.3rem; font-weight: 600; }
h2 { font-size: 1.85rem; font-weight: 600; }
h3 { font-size: 1.4rem;  font-weight: 600; }
h4 { font-size: 1.18rem; font-weight: 600; }
h5 { font-size: 1.02rem; font-weight: 600; }

p {
  color: var(--mos-text-dim);
  line-height: 1.75;
  margin-bottom: 1.1em;
}

li, td, span.text, .sub-heading {
  color: var(--mos-text-dim);
}

a {
  color: var(--mos-accent);
  transition: color var(--mos-gecis);
}

a:hover, a:focus {
  color: var(--mos-accent-soft);
  text-decoration: none;
}

hr { border-color: var(--mos-border) !important; }

::selection { background: var(--mos-accent-deep); color: #fff; }

* { scrollbar-color: var(--mos-border) var(--mos-bg); scrollbar-width: thin; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--mos-bg); }
::-webkit-scrollbar-thumb { background: var(--mos-border); border-radius: 5px; }
::-webkit-scrollbar-thumb:hover { background: var(--mos-accent-deep); }


/* =============================================================
   2-3 - ESKI HEADER VE SLIDER KURALLARI KALDIRILDI
   Bu bolumler artik mossaica.css tarafindan yonetiliyor
   (#site-header / .rev_slider / .slider-tam markup'i kalmadi).
   ============================================================= */

/* =============================================================
   4 - SAYFA BASLIGI + ICERIK ALANI
   ============================================================= */

#featured-title {
  background-color: var(--mos-surface) !important;
  border-bottom: 1px solid var(--mos-border-soft);
}

#featured-title .featured-title-inner-wrap {
  padding: 20px 0 22px 0 !important;
}

.feautured-title-heading {
  color: var(--mos-text) !important;
  font-size: 1.45rem !important;
  font-weight: 600;
  margin: 0;
}

#breadcrumbs, #breadcrumbs a,
.breadcrumb-trail, .breadcrumb-trail a,
.breadcrumb-trail .sep, .breadcrumb-trail .trail-end {
  color: var(--mos-text-faint) !important;
  font-size: 12.5px;
  background: transparent !important;
}

#breadcrumbs a:hover { color: var(--mos-accent) !important; }

/* Ana sayfada slider en ustte durur, ustunde bosluk olmamali.
   Ic sayfalarda ustte #featured-title var; bosluk orada verilir. */
#main-content { padding: 0 0 48px !important; }
#featured-title + #main-content { padding-top: 44px !important; }


/* =============================================================
   5 - BOLUMLER
   Cozulen: koyu sayfa ortasinda kalan beyaz/acik gri adacikar
   ============================================================= */

.row-services,
.row-about,
.row-project,
.row-iconbox,
.row-quote,
.row-testimonial,
.bg-row-1,
.bg-light-grey,
.bg-white,
.bg-f2,
.half-background {
  background-color: transparent !important;
}

/* "Polidot Sistem" bloguorijinalde beyazdi */
.row-about .bg-light-grey {
  background-color: var(--mos-surface) !important;
  border-radius: 0;
}

.row-about .col-md-6.half-background.style-1 {
  background-size: cover !important;
  background-position: center !important;
}

/* CTA seridi (Projeniz icin bize ulasin)
   Tema burada background shorthand ile acik bir foto basiyordu
   (bg-quote.jpg) - sadece background-color ezmek yetmiyor. */
.row-quote,
.row-quote.bg-row-1,
.bg-row-1 {
  background-image: none !important;
  background-color: var(--mos-surface-2) !important;
  border-top: 1px solid var(--mos-border-soft);
  border-bottom: 1px solid var(--mos-border-soft);
}

.row-quote .heading,
.row-quote h2,
.row-quote h3,
.themesflat-quote .heading {
  color: var(--mos-text) !important;
  font-size: 1.5rem !important;
}

/* Tema'nin acik zemin varsayan yardimci siniflari */
.text-gray-dark,
.text-gray,
.text-dark,
.text-black {
  color: var(--mos-text) !important;
}

.text-white { color: #fff !important; }

/* Parallax bolumler (Projelerimiz arkasi) */
.row-project.parallax {
  background-color: var(--mos-surface) !important;
  background-image: none !important;
}

.parallax-overlay .bg-parallax-overlay.overlay-black,
.overlay-black {
  background-color: rgba(19, 28, 40, 0.72) !important;
}

/* --- Bolum basliklari --- */
.themesflat-headings .heading,
.themesflat-headings h2 {
  color: var(--mos-text) !important;
  font-size: 1.8rem !important;
}

.themesflat-headings .sub-heading {
  color: var(--mos-text-dim) !important;
  font-size: 14.5px;
}

/* Baslik alti ayrac - orijinalde dolu kutu gibi duruyordu */
.sep.has-width,
.themesflat-headings .sep.has-width {
  height: 2px !important;
  background-color: var(--mos-accent) !important;
  border: none !important;
  opacity: 0.9;
}

/* Ikonlu ayrac: ortadaki kucuk ikon jenerik ve bulanik duruyordu,
   yerine sade bir cizgi + vurgu noktasi */
.sep.has-icon .icon-wrap {
  display: none !important;
}

.sep.has-icon .sep-icon-before,
.sep.has-icon .sep-icon-after {
  background-color: var(--mos-border) !important;
  height: 1px !important;
  width: 54px !important;
}

.sep.has-icon .sep-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
}

.sep.has-icon .sep-icon:after {
  content: "";
  order: 0;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background-color: var(--mos-accent);
}

/* --- Dikey ritim ---
   Tema data-desktop="111" gibi devasa bosluklar veriyordu; sayfa
   gereksiz uzuyor ve bolumler birbirinden kopuyordu. */
.themesflat-spacer {
  max-height: 42px !important;
}

/* --- Ikon kutulari (En Iyi Kalite / En Hizli Uretim ...) --- */
.themesflat-icon-box {
  background-color: var(--mos-surface) !important;
  border: 1px solid var(--mos-border) !important;
  border-radius: var(--mos-radius);
  padding: 30px 24px !important;
  transition: transform var(--mos-gecis), border-color var(--mos-gecis);
}

.themesflat-icon-box:hover {
  transform: translateY(-3px);
  border-color: var(--mos-accent-deep) !important;
}

.themesflat-icon-box .heading,
.themesflat-icon-box h3,
.themesflat-icon-box h5 {
  color: var(--mos-text) !important;
  font-size: 15px !important;
  letter-spacing: 0.04em;
}

/* alt aciklama yazilari neredeyse gorunmezdi */
.themesflat-icon-box p,
.themesflat-icon-box .sub-heading,
.themesflat-icon-box .text {
  color: var(--mos-text-dim) !important;
  font-size: 13.5px;
}

/* Yuvarlak ikon rozeti sadece ana sayfadaki style-1'de guzel duruyor;
   iletisim sayfasindaki style-3'te tum genisligi kaplayan acik bir
   dikdortgen olusturuyordu. */
.themesflat-icon-box.style-1 .icon-wrap,
.themesflat-icon-box.light-bg .icon-wrap {
  background-color: var(--mos-surface-3) !important;
  color: var(--mos-accent) !important;
}

.themesflat-icon-box .icon-wrap {
  color: var(--mos-accent) !important;
}

.themesflat-icon-box.style-3 .icon-wrap,
.themesflat-icon-box.bg-light-snow .icon-wrap {
  background-color: transparent !important;
}

.themesflat-icon-box.style-3 .icon-wrap i,
.themesflat-icon-box.style-3 .icon-wrap span {
  font-size: 32px !important;
  color: var(--mos-accent) !important;
}

.themesflat-icon-box.light-bg .icon-wrap:before {
  background-color: var(--mos-accent-deep) !important;
}

/* Tema'nin acik zemin varsayan kutu siniflari */
.bg-light-snow,
.themesflat-icon-box.bg-light-snow {
  background-color: var(--mos-surface) !important;
}

/* ESIT YUKSEKLIK: ayni satirdaki ikon kutulari farkli boyda kaliyordu
   (ornegin iletisim sayfasinda adres 3 satir, telefon 1 satir) */
.row:has(> [class*="col-"] > .themesflat-icon-box) {
  display: flex;
  flex-wrap: wrap;
}

.row:has(> [class*="col-"] > .themesflat-icon-box) > [class*="col-"] {
  display: flex;
  margin-bottom: 24px;
}

.row:has(> [class*="col-"] > .themesflat-icon-box) > [class*="col-"] > .themesflat-icon-box {
  width: 100%;
}

/* --- Ikonlu liste (Polidot maddeleri) --- */
.themesflat-list .item .text {
  color: var(--mos-text-dim) !important;
  line-height: 1.7;
}

.themesflat-list .item .icon,
.themesflat-list .item .icon i {
  color: var(--mos-accent) !important;
}


/* =============================================================
   6 - KARTLAR  (proje / urun)
   Cozulen: kartlarin boylari birbirini tutmuyordu.
   Cozum: gorsele sabit en-boy orani + object-fit,
          metin blokuna sabit yukseklik.
   Ayrica: gorsellerin %33'unde JPEG'e gomulu ince beyaz kenarlik
          vardi; scale() ile kirpiliyor.
   ============================================================= */

/* DIKKAT: burada height:100% KULLANILMAZ.
   Urunler sayfasinda isotope kartlari mutlak konumluyor; height:100%
   her karti kapsayici boyuna (6750px) sisirip ust uste bindiriyordu.
   Esit boy zaten gorsele verilen sabit oran + metin blogunun sabit
   yuksekligi ile saglaniyor. */
.themesflat-project .project-item,
.themesflat-project .project-item .inner {
  height: auto !important;
}

.themesflat-project .project-item .inner {
  background-color: var(--mos-surface) !important;
  border: 1px solid var(--mos-border) !important;
  border-radius: var(--mos-radius);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: transform var(--mos-gecis),
              border-color var(--mos-gecis),
              box-shadow var(--mos-gecis);
}

.themesflat-project .project-item .inner:hover {
  transform: translateY(-4px);
  border-color: var(--mos-accent-deep) !important;
  box-shadow: 0 16px 38px rgba(0, 0, 0, 0.45);
}

/* SABIT ORAN - butun kartlar ayni boyda */
.themesflat-project .thumb {
  position: relative;
  width: 100%;
  aspect-ratio: var(--mos-kart-oran);
  overflow: hidden !important;
  /* tema burada beyaz zemin veriyordu; gorsel kenarlarindan sizip
     kartin altinda acik bir seride donusuyordu */
  background-color: var(--mos-surface-3) !important;
  line-height: 0;
  flex: 0 0 auto;
}

.themesflat-project .thumb img,
.themesflat-project .thumb a {
  background-color: transparent !important;
}

.themesflat-project .thumb > a {
  display: block;
  width: 100%;
  height: 100%;
}

.themesflat-project .thumb img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover;
  display: block;
  transform: scale(1.055);   /* gomulu beyaz kenarligi kirp */
  transition: transform 0.55s cubic-bezier(0.4, 0, 0.2, 1);
}

.themesflat-project .project-item .inner:hover .thumb img {
  transform: scale(1.11);
}

/* Metin blogu - sabit yukseklik, kartlar hizali bitsin */
.themesflat-project .text-wrap {
  background-color: transparent !important;
  padding: 15px 18px !important;
  min-height: 62px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  flex: 1 1 auto;
}

.themesflat-project .text-wrap .heading,
.themesflat-project .text-wrap .heading a {
  color: var(--mos-text) !important;
  font-size: 14.5px !important;
  font-weight: 600;
  line-height: 1.4;
  margin: 0;
  /* uzun basliklar kartin boyunu bozmasin */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.themesflat-project .project-item .inner:hover .text-wrap .heading a {
  color: var(--mos-accent) !important;
}

.themesflat-project .elm-meta,
.themesflat-project .elm-meta a,
.themesflat-project .elm-meta span {
  color: var(--mos-text-faint) !important;
  font-size: 12px !important;
}

/* Ana sayfadaki karusel kartlarinda baslik gorselin USTUNDE duruyor.
   Tema bunu varsayilan olarak gizliyordu (opacity:0), sadece hoverda
   ortada beliriyordu - proje adlari hic gorunmuyordu. Artik hep gorunur,
   alta yasli ve gradyan uzerinde. */
.themesflat-project.style-1 .thumb .text-wrap,
.themesflat-project.style-1 .text-wrap {
  position: absolute !important;
  left: 0 !important;
  right: 0 !important;
  top: auto !important;
  bottom: 0 !important;
  width: 100% !important;
  height: auto !important;
  min-height: 0;
  margin-left: 0 !important;
  transform: none !important;
  opacity: 1 !important;
  visibility: visible !important;
  padding: 40px 18px 16px !important;
  background: linear-gradient(to top,
              rgba(9, 15, 24, 0.94) 0%,
              rgba(9, 15, 24, 0.6) 55%,
              rgba(9, 15, 24, 0) 100%) !important;
  z-index: 3;
  text-align: left !important;
}

.themesflat-project.style-1 .heading,
.themesflat-project.style-1 .heading a {
  color: #fff !important;
  font-size: 15px !important;
  line-height: 1.4 !important;
}

/* tema burada sari kullaniyordu */
.themesflat-project.style-1 .elm-meta a {
  color: var(--mos-accent-soft) !important;
}

.themesflat-project.style-1 .thumb .overlay-effect {
  background-color: rgba(30, 58, 95, 0.35) !important;
  opacity: 0;
  transition: opacity var(--mos-gecis);
}

.themesflat-project.style-1 .project-item:hover .thumb .overlay-effect {
  opacity: 1;
}

/* Proje listesi sayfasinda kartlar arasi bosluk */
.row-services .col-md-4 .themesflat-project {
  margin-bottom: 30px;
}


/* =============================================================
   7 - KARUSELLER (sertifikalar, urun karuselleri)
   ============================================================= */

/* DIKKAT: asagisi SADECE .themesflat-image-box icindir (sertifikalar).
   Once .themesflat-carousel-box'a yazilmisti; ayni karusel sinifini
   proje kartlari da kullandigi icin proje gorsellerini kucultuyordu. */
.themesflat-image-box .thumb {
  aspect-ratio: var(--mos-kart-oran);
  overflow: hidden;
  border-radius: var(--mos-radius);
  background-color: #fff;   /* sertifikalar belge, beyaz dogru */
  border: 1px solid var(--mos-border);
}

.themesflat-image-box .thumb img {
  width: 100% !important;
  height: 100% !important;
  object-fit: contain;      /* belge kirpilmasin */
  padding: 10px;
  background: #fff;
}

.themesflat-image-box .text-wrap {
  padding: 14px 4px 0;
}

.themesflat-image-box .text-wrap .heading,
.themesflat-image-box .text-wrap .heading a {
  color: var(--mos-text) !important;
  font-size: 14px !important;
  font-weight: 600;
}

.themesflat-image-box .text-wrap p {
  color: var(--mos-text-faint) !important;
  font-size: 12.5px !important;
  margin: 4px 0 0;
}

/* Karusel oklari */
.owl-nav .owl-prev,
.owl-nav .owl-next,
.arrow-circle .owl-nav > div {
  background-color: var(--mos-surface-2) !important;
  border: 1px solid var(--mos-border) !important;
  color: var(--mos-text) !important;
  border-radius: 50% !important;
  transition: all var(--mos-gecis);
}

.owl-nav .owl-prev:hover,
.owl-nav .owl-next:hover {
  background-color: var(--mos-accent-deep) !important;
  border-color: var(--mos-accent) !important;
  color: #fff !important;
}

.owl-dots .owl-dot span {
  background-color: var(--mos-border) !important;
}

.owl-dots .owl-dot.active span {
  background-color: var(--mos-accent) !important;
}


/* =============================================================
   8 - BILESENLER
   ============================================================= */

/* --- Kategori filtresi ---
   Ozgulluk notu: color1.css ".themesflat-filter.style-1 li.active a"
   ile !important yaziyor; ayni ozgullukte yazmazsak aktif buton
   yazisi zeminle ayni renk kaliyor (gorunmez oluyordu). */
.themesflat-filter.style-1 li a,
.themesflat-filter li a {
  color: var(--mos-text-dim) !important;
  background-color: var(--mos-surface) !important;
  border: 1px solid var(--mos-border) !important;
  border-radius: 999px;
  padding: 7px 16px !important;
  font-size: 13px !important;
  line-height: 1.6 !important;
  display: inline-block;
  margin: 0 8px 10px 0 !important;
  transition: all var(--mos-gecis);
}

.themesflat-filter.style-1 li a:hover,
.themesflat-filter.style-1 li.active a,
.themesflat-filter li a:hover,
.themesflat-filter li.active a {
  color: #FFFFFF !important;
  background-color: var(--mos-accent-deep) !important;
  border-color: var(--mos-accent) !important;
}

/* Butonlar arasindaki dikey "|" cizgileri hap tasarimda gereksiz */
.themesflat-filter.style-1 li:before,
.themesflat-filter li:before {
  display: none !important;
  content: none !important;
}

.themesflat-filter li { margin: 0 !important; }
/* view'daki <br> etiketleri satiri kiriyordu */
.themesflat-filter br { display: none !important; }

/* --- Butonlar --- */
button,
input[type="button"],
input[type="reset"],
input[type="submit"],
.themesflat-button,
.themesflat-button.bg-accent,
.themesflat-button.bg-white {
  background-color: var(--mos-accent-deep) !important;
  border: 1px solid var(--mos-accent-deep) !important;
  color: #fff !important;
  border-radius: var(--mos-radius-sm) !important;
  letter-spacing: 0.04em;
  font-weight: 600;
  transition: all var(--mos-gecis) !important;
}

button:hover,
input[type="submit"]:hover,
.themesflat-button:hover {
  background-color: var(--mos-accent) !important;
  border-color: var(--mos-accent) !important;
  color: #0D1520 !important;
  transform: translateY(-1px);
}

.themesflat-button span { color: inherit !important; }

/* --- Form alanlari --- */
input[type="text"], input[type="email"], input[type="password"],
input[type="tel"], input[type="number"], input[type="search"],
input[type="url"], input[type="date"], select, textarea, .form-control {
  background-color: var(--mos-surface) !important;
  border: 1px solid var(--mos-border) !important;
  color: var(--mos-text) !important;
  border-radius: var(--mos-radius-sm) !important;
  box-shadow: none !important;
  transition: border-color var(--mos-gecis), box-shadow var(--mos-gecis);
}

input:focus, select:focus, textarea:focus, .form-control:focus {
  border-color: var(--mos-accent) !important;
  box-shadow: 0 0 0 3px rgba(107, 163, 212, 0.16) !important;
  outline: none !important;
}

input::placeholder, textarea::placeholder { color: var(--mos-text-faint) !important; }
select option { background-color: var(--mos-surface); color: var(--mos-text); }
label { color: var(--mos-text-dim) !important; }

/* Header icindeki form alanlari acik zeminde kalir */
#site-header input,
#site-header select {
  background-color: #fff !important;
  border-color: var(--mos-header-border) !important;
  color: var(--mos-header-text) !important;
}

/* --- Google Harita (iletisim) ---
   Iframe icine mudahale edemiyoruz; filtre ile koyu temaya yaklastiriliyor.
   Istenmezse asagidaki filter satirini silmek yeterli. */
iframe[src*="google.com/maps"],
iframe[src*="maps.google"],
.map-wrap iframe {
  filter: invert(0.92) hue-rotate(180deg) saturate(0.75) brightness(0.95) contrast(0.95);
  border-radius: var(--mos-radius);
  border: 1px solid var(--mos-border) !important;
  display: block;
}

/* --- Tablolar --- */
table { color: var(--mos-text) !important; border-color: var(--mos-border) !important; }
table th {
  background-color: var(--mos-surface-2) !important;
  color: var(--mos-text) !important;
  border-color: var(--mos-border) !important;
}
table td { border-color: var(--mos-border) !important; }
table tr:nth-child(even) td { background-color: rgba(255, 255, 255, 0.02); }

/* --- Panel benzeri kutular --- */
.panel, .card, .well,
.themesflat-tabs .tab-content,
.themesflat-testimonials .testimonial-item {
  background-color: var(--mos-surface) !important;
  color: var(--mos-text);
  border-color: var(--mos-border) !important;
  border-radius: var(--mos-radius);
}

/* Yazi icerigi (icerik sayfalari) */
.post-content, .post-content p, .post-excerpt,
.entry-content, .entry-content p {
  color: var(--mos-text-dim) !important;
}

.post-content h1, .post-content h2, .post-content h3,
.post-content h4, .post-content strong, .post-content b {
  color: var(--mos-text) !important;
}


/* =============================================================
   8.5 - DESEN OLUSTUR EKRANI (sitenin imza ozelligi)
   Not: bu sayfa kendi CSS'ini hic yuklemiyordu (create_sheet.php'ye
   eklendi). Asagisi o aracin koyu temaya uyarlanmasi.
   ============================================================= */

/* Mozaik secme satirlari */
.box-piezas .container-piezas p {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
}

.img-pieza {
  width: 42px !important;
  height: 42px !important;
  border-radius: var(--mos-radius-sm);
  border: 1px solid var(--mos-border) !important;
  background-color: var(--mos-surface-3);
  object-fit: cover;
  cursor: pointer;
  padding: 0;
  transition: border-color var(--mos-gecis), transform var(--mos-gecis);
}

.img-pieza:hover {
  border-color: var(--mos-accent) !important;
  transform: scale(1.06);
}

.select-pieza {
  flex: 1 1 auto;
  cursor: pointer;
}

.select-cantidad {
  width: 82px !important;
  text-align: center;
}

.box-piezas .boton,
input.boton {
  background-color: var(--mos-surface) !important;
  border: 1px dashed var(--mos-border) !important;
  color: var(--mos-text-dim) !important;
  border-radius: var(--mos-radius-sm) !important;
  padding: 9px 18px !important;
  margin-top: 6px;
}

.box-piezas .boton:hover,
input.boton:hover {
  border-color: var(--mos-accent) !important;
  color: var(--mos-accent) !important;
  background-color: var(--mos-surface-3) !important;
  transform: none;
}

/* Mozaik secici penceresi - yari saydamdi, arkasi karisiyordu */
#selector.popup,
.popup {
  background-color: var(--mos-surface) !important;
  border: 1px solid var(--mos-border) !important;
  border-radius: var(--mos-radius) !important;
  box-shadow: 0 26px 70px rgba(0, 0, 0, 0.6) !important;
  color: var(--mos-text) !important;
  z-index: 800 !important;
  overflow: hidden;
}

.popup-content {
  padding-top: 14px !important;
  border-top: 1px solid var(--mos-border) !important;
}

#selector > .popup-content {
  height: 52vh !important;
  padding: 14px !important;
}

.close-popup {
  width: 44px !important;
  height: 44px !important;
  border-right: 1px solid var(--mos-border) !important;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background-color var(--mos-gecis);
}

.close-popup:hover { background-color: var(--mos-surface-3) !important; }
.close-popup .close-img { filter: invert(1) opacity(0.7); width: 16px; }

#coleccion {
  padding: 0 14px;
  min-height: 44px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
}

#coleccion p { margin: 0 !important; color: var(--mos-text-dim); }

#coleccion select {
  background-color: var(--mos-surface-3) !important;
  color: var(--mos-text) !important;
  border: 1px solid var(--mos-border) !important;
  border-radius: var(--mos-radius-sm) !important;
  padding: 6px 10px !important;
  margin-top: 0 !important;
}

#coleccion select > option { background-color: var(--mos-surface) !important; }

/* Secicideki mozaik kutucuklari */
.item-container,
.items-container .item {
  color: var(--mos-text-dim) !important;
}

.items-container img {
  border-radius: var(--mos-radius-sm);
  border: 1px solid var(--mos-border);
  transition: transform var(--mos-gecis), border-color var(--mos-gecis);
}

.items-container img:hover {
  border-color: var(--mos-accent);
  transform: scale(1.05);
}

/* Uretilen desen / desen duvari onizlemeleri */
#malla-titulo,
#tablero-titulo {
  color: var(--mos-text) !important;
  font-weight: 600;
  letter-spacing: 0.04em;
  margin-bottom: 14px !important;
}

#malla, #tablero {
  border-color: var(--mos-border) !important;
  background-color: var(--mos-surface) !important;
}

#malla td, #tablero td {
  border-color: rgba(255, 255, 255, 0.08) !important;
}

#box-malla, #box-tablero {
  background-color: var(--mos-surface) !important;
  border: 1px solid var(--mos-border);
  border-radius: var(--mos-radius);
  padding: 20px;
}

#opciones .generar {
  width: 100%;
  margin-bottom: 10px;
}

#opciones .generar:disabled,
input.generar:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

#opciones p { color: var(--mos-text-dim) !important; }

.alert_antideslizantes {
  color: var(--mos-text-faint) !important;
  font-size: 13px;
}


/* =============================================================
   9 - FOOTER
   Cozulen: infos / baglantilar / kategoriler bloklarinin
            arkaplanlari birbirini tutmuyordu
   ============================================================= */

#footer,
footer#footer {
  background-color: var(--mos-surface-2) !important;
  background-image: none !important;   /* arkadaki harita gorseli kalksin */
  border-top: 1px solid var(--mos-border-soft);
  padding: 52px 0 40px 0 !important;
  color: var(--mos-text-dim) !important;
}

/* Butun footer bloklari ayni zemin - hicbiri panel gibi durmasin */
#footer .widget,
#footer-widgets .widget,
#footer .widget_text,
#footer .widget_lastest,
#footer .textwidget,
#footer .col,
#footer [class*="span_1_of"] {
  background-color: transparent !important;
  background-image: none !important;
  border: none !important;
  box-shadow: none !important;
}

#footer-widgets .widget .widget-title,
#footer .widget .widget-title,
#footer-widgets .widget .widget-title span,
#footer .widget .widget-title span {
  color: var(--mos-text) !important;
  font-size: 14px !important;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-weight: 600;
}

#footer-widgets .widget .widget-title span:after,
#footer .widget .widget-title span:after {
  background-color: var(--mos-accent) !important;
  height: 2px !important;
}

#footer a,
#footer-widgets .widget ul li a,
#footer-widgets .widget.widget_lastest h3,
#footer-widgets .widget.widget_lastest h3 a,
#footer .textwidget .text,
#footer-widgets .widget p,
#footer .widget li {
  color: var(--mos-text-dim) !important;
  font-size: 13.5px;
}

#footer a:hover,
#footer-widgets .widget.widget_lastest h3 a:hover {
  color: var(--mos-accent) !important;
}

#footer-widgets .widget.widget_lastest ul li {
  border-top: 1px solid var(--mos-border-soft) !important;
  padding-top: 10px;
  margin-top: 10px;
}

/* Adres/telefon satirlari - uzun adres alt satira gecince ikonun
   altina kayiyordu, hizalama bozuluyordu */
#footer .widget_text .textwidget ul li .inner {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 12px;
}

#footer .widget_text .textwidget ul li .inner .text {
  flex: 1 1 auto;
  line-height: 1.6;
}

#footer-widgets .widget.widget_text span.fa,
#footer .widget_text .fa {
  background-color: var(--mos-surface-3) !important;
  color: var(--mos-accent) !important;
  border-radius: var(--mos-radius-sm);
  flex: 0 0 auto;
  width: 30px;
  height: 30px;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  font-size: 13px;
}

#footer .widget_lastest h3 .fa {
  color: var(--mos-accent) !important;
  background: transparent !important;
}

/* Alt serit */
#bottom {
  background-color: var(--mos-bg) !important;
  border-top: 1px solid var(--mos-border-soft);
  color: var(--mos-text-faint) !important;
}

#bottom .bottom-bar-inner-wrap { padding: 16px 0 18px 0 !important; }

#bottom #copyright span,
#bottom ul.bottom-nav > li > a { color: var(--mos-text-faint) !important; }

#bottom ul.bottom-nav > li > a:hover { color: var(--mos-accent) !important; }


/* =============================================================
   10 - HAREKET VE DETAY
   ============================================================= */

#scroll-top:before {
  background-color: var(--mos-accent-deep) !important;
  color: #fff !important;
  border-radius: var(--mos-radius-sm);
}

#scroll-top:hover:before { background-color: var(--mos-accent) !important; }

.data-effect .data-effect-item .overlay {
  background-color: rgba(13, 21, 32, 0.5) !important;
}

a:focus-visible,
button:focus-visible,
input:focus-visible {
  outline: 2px solid var(--mos-accent) !important;
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  *, *:before, *:after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}


/* =============================================================
   11 - MOBIL
   ============================================================= */

@media only screen and (max-width: 991px) {
  #site-header .wrap-inner {
    display: block !important;
    padding-top: 9px !important;
    padding-bottom: 9px !important;
  }

  #site-logo { float: left !important; }
  #site-logo .main-logo img { max-height: 44px; }

  #main-nav.main-nav {
    display: block;
    position: absolute !important;
    background-color: #fff !important;
    border-top: 1px solid var(--mos-header-border);
  }

  #main-nav > ul.menu { display: block; }
  #main-nav > ul > li { float: none !important; display: block; }

  #main-nav ul li {
    border-bottom: 1px solid var(--mos-header-border) !important;
  }

  #main-nav ul li a {
    color: var(--mos-header-text) !important;
    font-size: 14px !important;
    padding: 13px 18px !important;
    white-space: normal;
  }

  #main-nav .sub-menu {
    background-color: #F6F9FC !important;
    border: none !important;
    box-shadow: none !important;
    border-radius: 0;
  }

  #main-content { padding: 32px 0 !important; }
  #footer { padding: 36px 0 28px 0 !important; }

  h1 { font-size: 1.7rem; }
  h2 { font-size: 1.4rem; }
  h3 { font-size: 1.18rem; }

  .themesflat-headings .heading,
  .themesflat-headings h2 { font-size: 1.35rem !important; }

  .feautured-title-heading { font-size: 1.15rem !important; }

  .rev_slider .tp-caption .themesflat-button {
    padding: 11px 22px !important;
    font-size: 11.5px !important;
  }
}

@media only screen and (max-width: 767px) {
  #top-bar .top-bar-inner-wrap { padding: 5px 0 !important; }
  #top-bar, #top-bar a { font-size: 11.5px; }

  .themesflat-filter li a { padding: 6px 13px !important; font-size: 12px; }

  /* mobilde kartlar biraz daha kare - dikeyde az yer kaplasin */
  .themesflat-project .thumb { aspect-ratio: 3 / 2; }
}