/* Genel reset: tüm elementlerde box-sizing ayarını border-box yapar */
*,*::before,*::after{box-sizing:border-box}

/* Sayfanın en dış wrapper'ı (arka plan renk geçişi, yazı rengi, üst-alt padding) */
.ectv24-root{
  --edge:20px;
  background: 
    linear-gradient(rgba(0,0,0,0.5), rgba(0,0,0,0.5)),  /* yarı transparan siyah */
    url("https://kaankarakas.com.tr/wp-content/uploads/2025/09/b70ac76e2421fd198ef7524eb0bfd68082d5f3cb.jpg") 
      center/cover no-repeat;
  color:#fff;
  padding:24px 0;
}

/* Grid düzeni: Sol (form) ve sağ (önizleme) kolon */
.ectv24-grid{
  max-width:1280px;
  margin:0 auto;
  padding:0 var(--edge);
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr); /* 2 sütun: sol ve sağ */
  gap:20px; /* kolonlar arası boşluk */
  align-items:start;
}

/* 1023px altı ekranlarda tek sütuna düşür */
@media(max-width:1023px){
  .ectv24-grid{grid-template-columns:1fr}
}

/* Kart kutuları: hem form hem önizleme aynı stil alıyor */
.ectv24-card{
  background: rgba(128,0,0,0.8);
  backdrop-filter:blur(10px);
  border:1px solid #FF0000;
  border-radius:20px;
  padding:18px;
  box-shadow:0 10px 25px rgba(0,0,0,.25);
}

/* Başlıklar (örn. “Bilgilerini Gir”, “Önizleme”) */
.ectv24-title{
  font-size:36px;
  margin:0 0 12px;
  font-weight:800;
}

/* Form genel container (dikey yönlü flex, arada boşluklar) */
.ectv24-form{
  display:flex;
  flex-direction:column;
  gap:12px;
}

/* Form satırları: yan yana input’lar */
.ectv24-row{
  display:grid;
  gap:10px;
  grid-template-columns:1fr 1fr 1fr; /* 3 sütun: pozisyon, ücret, forma no gibi */
}
/* Mobilde tek sütuna düşür */
@media(max-width:768px){
  .ectv24-row{grid-template-columns:1fr}
}

/* Etiket (label) stilleri */
.ectv24-label{
  display:flex;
  flex-direction:column;
  gap:6px;
  font-size:14px;
  color:rgba(255,255,255,.9);
}

/* Form input alanları */
.ectv24-input{
  width:100%;
  padding:5px 12px;
  border-radius:10px;
  border:1px solid #FF0000;
  background:rgba(255,255,255,.1);
  color:#ffffff;
}
/* Placeholder'ı da beyaz yap */
.ectv24-input::placeholder {
  color:#fff;
  opacity: 1;              /* tarayıcıların otomatik transparan yapmasını engeller */
}

/* Renk seçici input */
.ectv24-color{
  width:100%;
  height:44px;
  border-radius:10px;
  border:1px solid #FF0000;
  background:rgba(255,255,255,.1);
}

/* Dosya input’ları (profil foto, logo) satır davranışı */
.ectv24-files .ectv24-label{grid-column:span 1}

/* Dosya input kutusu görünümü */
.ectv24-file{
  display:block;
  width:100%;
  max-width:100%;
  padding:5px 10px;
  border-radius:10px;
  border:1px dashed rgba(255,255,255,.25);
  background:rgba(255,255,255,.06);
  color:#fff;
  font-size:14px;
}

/* Arka plan seçim grid’i (küçük thumbnail resimler) */
.ectv24-bggrid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:10px;
  margin-top:6px;
}

/* Arka plan seçenek kutuları */
.ectv24-bgopt{
  position:relative;
  display:block;
  border-radius:12px;
  overflow:hidden;
  border:2px solid rgba(255,255,255,.2);
}
/* Input’u gizle */
.ectv24-bgopt input{position:absolute;inset:8px;opacity:0}
/* Resim stil */
.ectv24-bgopt img{display:block;width:100%;height:100px;object-fit:cover}
/* Seçili olunca kenar rengi ve glow efekti */
.ectv24-bgopt:has(input:checked){
  border-color:#f59e0b;
  box-shadow:0 0 0 3px rgba(245,158,11,.4);
}

/* Alt butonların kapsayıcısı */
.ectv24-actions{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  margin-top:8px;
}

/* Buton genel stili */
.ectv24-btn{
  padding:10px 14px;
  border-radius:12px  !important;
  border:1px solid #FF0000;
  background:#B3B3B3 !important;
  color:#fff;
	  font-weight:400!important;

  cursor:pointer;
}

/* Sarı ana buton (“Görseli Oluştur”) */
.ectv24-primary{
  background:#f59e0b;
  color:#000;
  font-weight:700;
  border-color:#f59e0b;
	
}

/* Mavi buton (Tweet) */
.ectv24-x{
  background:#1d9bf0;
  border-color:#1d9bf0;
}

/* Küçük not yazıları */
.ectv24-note{font-size:12px;color:rgba(255,255,255,.7)}

/* Önizleme üst başlık kısmı (başlık ve sağdaki not alanı) */
.ectv24-preview-head{
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin-bottom:8px;
}

/* Canvas kapsayıcı (oran 1:1 kare) */
.ectv24-canvasWrap{
  position:relative;
  width:100%;
  aspect-ratio:1/1;
}

/* Canvas stil (arka plan, border) */
.ectv24-canvas{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  border-radius:16px;
  border:1px solid #FF0000;
  background:#000;
}

/* JS ile gizlenmesi gereken alanlar için yardımcı class */
.ectv-hide { display: none !important; }

.ectv24-error{
  border-color:#ef4444 !important;
  box-shadow:0 0 0 3px rgba(239,68,68,.35);
}
.ectv24-errmsg{
  margin-top:6px;
  font-size:12px;
  color:#ffb4b4;
  display:none;
}