/*renkler*/
:root{ --brand:#0d6efd; --bg-soft:#f8fafc; }
.brand-badge{
  background:#fff; border:1px solid hsla(216, 98%, 52%, 0.2); box-shadow:0 10px 30px rgba(13,110,253,.08);
}
:root{
  --bg:#0f172a;         /* slate-900 */
  --card:#111826;       /* slate-950-ish */
  --GriSiyah:#1e1e1e;
  --text:#e2e8f0;       /* slate-200 */
  --muted:#94a3b8;      /* slate-400 */
  --card2:#f7f9fc;
  --accent:#f59e0b;     /* amber-500 */
  --koyuYesil:#22c55e;   /* green-500 */
  --camYesil :#01796F;
  --yesil:#20ff03;
  --pembe:#ff006a;  
  --kirmizi:#ff0303;
  --turuncu:#ff8800;
  --sari:#eeff00;
  --cyan:#00ffff;
  --turkuaz: #00c3ff;
  --mavi:#00c3ff;
  --acikMavi:#0084ff;
  --maviMor:#0004ff;

  --pembeMor:#ff00dd;
  --line:#1f2937;       /* slate-800 */


}
body {
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  margin-top: 50px;
  padding: 0;
  height: 100%;
}
/* Header Başlangıç*/
 /* ---------- HEADER ---------- */
.menu-active {
  color: var(--brand);
  animation: animateleft 0.4s;
  border-bottom: 2px solid var(--brand);
}
.dark-mode.menu-active {
  color: var(--brand);
  animation: animateleft 0.4s;
  border-bottom: 2px solid var(--brand);
}
.w3-button:hover {
  background-color: transparent !important;
  color: var(--brand) !important;
  border-bottom: 2px solid var(--brand); 
}
.dark-mode .w3-button:hover{
  color: var(--brand) !important;
  border-bottom: 2px solid var(--brand); 
}

header {
  background: #fff;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  border-radius: 50px;
  padding: 30px 20px;
  position: fixed;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 80%;
  height: 90px;
  z-index: 999;
  transition: width 0.6s ease, border-radius 0.6s ease, left 0.6s ease,
    transform 0.6s ease;
}
body.dark-mode header {
  background: var(--GriSiyah);
  box-shadow: 0 2px 8px rgba(255, 255, 255, 0.1);
}
header.full {
  width: 100%;
  border-radius: 0;
  left: 50%;
  transform: translateX(-50%);
}
header .nav-link {
  color: #333;
  font-weight: 500;
}
.logo {
  height: 35px;
}
.dark-mode .logo {
  content: url("/images/CamLogoBeyaz.png");
  background-color: var(--GriSiyah);
}
.line{
  min-width: 100%;
  height: 1px; /* çizgi kalınlığı */
  background-color: #0d6efd33; /* çizgi rengi */
  margin: 10px auto; /* ortalamak için */
  z-index: 999;
  border-radius: 20%;
}
.dark-mode .line{
  background-color: #fff;
}
@media (max-width: 768px) {
.line{
  display: none;
}
}
/* ---------- SIDEBAR ---------- */
#mySidebar {
  width: 250px;
  height: 100%;
  background: #fff;
  position: fixed;
  top: 0;
  left: -250px;
  transition: left 0.4s ease;
  z-index: 1000;
  box-shadow: 2px 0 5px rgba(0, 0, 0, 0.2);
  display: none;
}
body.dark-mode #mySidebar {
  background: #1f1f1f;
  color: #eee;
}
#mySidebar.active {
  display: block;
  animation: animateleft 0.4s;
  left: 0;
}
/* ---------- DARK MODE ---------- */
body.dark-mode {
  background-color: #121212;
  color: #e8e8e8;
}
body.dark-mode a.nav-link,
body.dark-mode .w3-bar-item {
  color: #ddd !important;
}
/*footer başlangıç*/
footer{
  position: static;
  bottom: 0;
  left: 0;
  width: 100%;
  background:  var(--card2);
}
body.dark-mode footer {
  background: #000;
  color: #bbb;
}
/*footer bitiş*/
/* ---------- TOGGLE ICON BAŞLANGIÇ---------- */
.theme-toggle {
  cursor: pointer;
  font-size: 1.4rem;
  transition: transform 0.4s ease, color 0.4s ease;
}
.theme-toggle:hover {
  transform: rotate(50deg);
}
.theme-toggle.sun {
  color: #fbc531; /* sarı */
}
.theme-toggle.moon {
  color: #74b9ff; /* mavi */
}
/* ---------- TOGGLE ICON BİTİŞ---------- */

/* ---------- RESPONSIVE ---------- */
@media (max-width: 768px) {
  .desktop-menu {
    display: none;
  }
  .desktop-logo {
    display: none;
  }
  .mobile-logo {
    display: block;
    margin: 0 auto;
    text-align: center;
  }
  .site-name {
    display: block;
    font-weight: bold;
    text-align: center;
    margin-top: 5px;
  }
  header {
    width: 100% !important;
    border-radius: 0 !important;
    left: 0;
    transform: none;
  }
}
@media (min-width: 769px) {
  .mobile-menu-btn {
    display: none;
  }
  .mobile-logo,
  .site-name {
    display: none;
  }
  }
  main {
    padding: 100px 20px;
    height: 1200px;
  }
/*header bitiş*/

/* mainPhoto Başlangıç */
.hero-container {
  top:50px;
  max-width: 1100px;
  margin: 60px auto;
  border-radius: 15px;
  overflow: hidden;
  position: relative;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.2);
}
.hero-container img,
.hero-container video {
  width: 100%;
  height: auto;
  display: block;
}
.hero-caption {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  background: rgba(0, 0, 0, 0.6);
  color: #fff;
  text-align: center;
  padding: 15px;
  font-size: 1.3rem;
  font-weight: 500;
}
/* Site özeti */
.summary {
  text-align: center;
  margin: 60px auto;
  max-width: 800px;
}
.summary h2 {
  font-weight: 700;
  margin-bottom: 20px;
}
.summary p {
  font-size: 1.1rem;
  color: #555;
}
/* mainPhoto bitiş */

/* Card Başlangıç */
.product-card {
  border: none;
  border-radius: 20px;
  overflow: hidden;
  background: #fff;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
  transition: all 0.3s ease;
  text-align: center;
}
.dark-mode .product-card{
  background:  #121212;
  box-shadow: 0 8px 20px rgba(255, 255, 255, 0.1);
}
.product-card:hover {
  transform: translateY(-10px);
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.2);
}
.dark-mode .product-card:hover {
  transform: translateY(-10px);
  box-shadow: 0 12px 30px rgba(255, 255, 255, 0.2);
}
.product-card img {
  width: 100%;
  height: auto;
  transition: transform 0.4s;
}
.product-card:hover img {
  transform: scale(1.05);
}
.product-card .card-body {
  padding: 25px;
  height: 190px;
}
.product-card h5 {
  font-weight: 600;
  margin-bottom: 10px;
}
.dark-mode .product-card h5 {color :#ffffff;}
.product-card p {
  color: #666;
  font-size: 0.95rem;
}

/* Select Box Özelleştirme */
.custom-select-wrapper {
  position: relative;
  max-width: 400px;
}
.custom-select {
  border: 2px solid #333; /* Daha belirgin kenarlık */
  padding: 12px 20px;
  font-size: 1.1rem;
  color: #333; /* Koyu metin */
  background-color: #f7f7f7; /* Hafif gri arkaplan */
  cursor: pointer;
  transition: all 0.3s;
  appearance: none; /* Bazı tarayıcılarda varsayılan oku gizle */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%23333' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 1rem center;
  background-size: 1.1rem 1.1rem;
}
.custom-select:focus {
  border-color: #0d6efd; /* Bootstrap primary color */
  box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25);
  background-color: #fff;
}
.dark-mode .custom-select{
  box-shadow: 0 8px 20px rgba(255, 255, 255, 0.1);
}
.custom-select:hover {
  border-color: #0d6efd;
}

/* Seçili Kategoriye Göre Renk Değişimi (Opsiyonel) */
.custom-select.category-all {
  color: #0d6efd;
  border-color: #0d6efd;
}
.dark-mode .custom-select.category-all {
  color: var(--muted);
  border-color: #0d6efd;
  background-color: #000000;
}
.custom-select.category-1 { /* Yazılım */
  color: #0d6efd;
  border-color: #0d6efd;
}
.dark-mode .custom-select.category-1 {
  color: var(--muted);
  border-color: #0d6efd;
  background-color: #000000;
}
.custom-select.category-2 { /* Hobi */
  color: #0d6efd;
  border-color: #0d6efd;
}
.dark-mode .custom-select.category-2 {
  color: var(--muted);
  border-color: #0d6efd;
  background-color: #000000;
}
.custom-select.category-3 { /* Diğer */
  color: #0d6efd;
  border-color: #0d6efd;
}
.dark-mode .custom-select.category-3 {
  color: var(--muted);
  border-color: #0d6efd;
  background-color: #000000;
}
.filter-item {
    transition: opacity 0.4s ease-in-out; 
}
/* Select Box Özelleştirme */
/* Card Bitiş */


/* Slider Başlangıç*/
.slide-bg{    
  height: 54vh; 
  min-height: 320px; 
  max-height: 72vh;
  /*background: linear-gradient(135deg, #eaf2ff, #dfe9ff);*/
  /*background: linear-gradient(135deg, #000000, #282828);*/
  display:flex; 
  align-items:center; 
  justify-content:center;
  position:relative; 
  overflow:hidden;
}
.dark-mode .slide-bg{
  /*background: linear-gradient(135deg, #001230, #00091f);*/
  /*background: linear-gradient(135deg, #282828, #000000);*/

}
.slide-bg-blur-img {
  position: absolute;
  top: 0;
  left: 0;
  min-width: 100%; 
  width: auto;
  height: auto;
  
  /* BU KOD ÇOK ÖNEMLİ: Resmi esnetmeden kutuyu doldurur, fazlalığı keser */
  object-fit: cover; 
  
  z-index: -1; /* İçeriğin en arkasına at */

  /* Bulanıklık ve Karartma Ayarları */
  filter: blur(20px) brightness(0.9); 
  -webkit-filter: blur(20px) brightness(0.9);

  /* Kenarlardaki bulanıklık bozulmasını önlemek için %10 büyütürüz */
  transform: scale(1.1); 
  pointer-events: none; /* Tıklanamaz yapar */
}

/* Dark Mode için arka planı biraz daha karartabiliriz */
.dark-mode .slide-bg-blur-img {
    filter: blur(25px) brightness(0.4); /* Daha karanlık */
    -webkit-filter: blur(25px) brightness(0.4);
}
.slide-bg .decor{
  position:absolute; inset:0; pointer-events:none;
  background:
    /*radial-gradient(600px 200px at 10% 20%, rgba(13,110,253,.10), transparent),
    radial-gradient(400px 160px at 90% 60%, rgba(13,110,253,.10), transparent);*/
    radial-gradient(600px 200px at 10% 20%, rgba(52, 52, 52, 0.4), transparent),
    radial-gradient(400px 160px at 90% 60%, rgba(0, 0, 0, 0.45), transparent);
}
.dark-mode .decor{
  position:absolute; inset:0; pointer-events:none;
  background:
    /*radial-gradient(600px 200px at 10% 20%, rgba(10, 30, 60, 0.45), transparent),
    radial-gradient(400px 160px at 90% 60%, rgba(15, 50, 90, 0.40), transparent);*/
    radial-gradient(600px 200px at 10% 20%, rgba(0, 0, 0, 0.45), transparent),
    radial-gradient(400px 160px at 90% 60%, rgba(52, 52, 52, 0.4), transparent);
}
.slide-illustration{
  width:min(680px, 90%); height:auto; opacity:.9;
}
.carousel-caption{ text-shadow:0 2px 12px rgba(0,0,0,.18); }
.carousel-indicators [data-bs-target]{ width:12px; height:12px; border-radius:50%; }   
.slide-bg img{
  width: 100%;       
  max-height: 60vh;
  border-radius: 15px;
  object-fit: contain;
}
.slide-metin h2, .slide-metin p{
    color: var(--text);
}
/* Mobilde kırpmasın, tamamını göstersin */
@media (max-width: 768px) {
  .slide-bg img {
    width: 100%;     
    height: 50vh;      /* ekranın %50'yi geçmesin */
    object-fit: cover;   
    border-radius: 15px;
  }
}
/* Slider Bitiş*/

/*hakkımızda Başlangıç*/
.about-card {
  transition: transform .3s;
}.about-card:hover {
  transform: translateY(-10px);
}
.dark-mode .card-body{ /*contact.php, codeCards.php için de geçerli*/
  background: #121212;
  border-radius: 5px ;
}
/*hakkımızda Bitiş*/
/*yazılar*/
.dark-mode .card-title{
  color :#ffffff !important;
}
.dark-mode .card-text{
  color: #bbbbbb !important;
}    
/*About Başlangıç*/
.text-justify {
  text-align: justify;
}
.dark-mode .shadow{
  box-shadow: 0 8px 20px rgba(255, 255, 255, 0.1) !important;
}
/*About bitiş*/
/*contact Başlangıç*/
.card-soft{ background:var(--bg-soft); border:1px solid rgba(13,110,253,.08); }
.dark-mode .card-soft{
  background: #000000;
}    
.form-control:focus, .form-select:focus{ box-shadow:0 0 0 .25rem rgba(13,110,253,.15); }
.map-skeleton{ background:repeating-linear-gradient( 45deg, #eef2ff, #eef2ff 10px, #e8edff 10px, #e8edff 20px ); border-radius:1rem; height:100%; min-height:320px; position:relative; overflow:hidden; }
.map-skeleton::after{ content:"Harita Alanı"; color:#6c757d; position:absolute; inset:0; display:grid; place-items:center; font-weight:600; letter-spacing:.08em; }
.floating-help{
  position:fixed; right:1rem; bottom:1rem; z-index:1040;
}
.dark-mode textarea::placeholder,
.dark-mode input::placeholder {
    color: #bbbbbb !important;
}
.dark-mode .modal-content{
  background-color: var(--line);
}
/*contact bitiş*/
/*codeCards Başlangıç*/
.code-card {
  border: none;
  border-radius: 20px;
  overflow: hidden;
  position: relative;
  box-shadow: 0 8px 20px rgba(0,0,0,0.1);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  min-height: 420px;
}
.dark-mode .code-card {
  background:   #121212;
  box-shadow: 0 8px 20px rgba(255, 255, 255, 0.1);
}   
.code-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 12px 25px rgba(0,0,0,0.2);
}
.dark-mode .code-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 12px 25px rgba(255, 255, 255, 0.2);
}
.code-card img {
  width: 100%;
  height: 220px;
  object-fit: cover;
  border-bottom-left-radius: 20px;
  border-bottom-right-radius: 20px;
}
.code-card .code-card-body {
  padding: 20px;
  background-color: var(--card2);
}
/*codeCards Bitiş*/

/*blogCardDetay Başlangıç*/
.code-blog-container {
  margin: auto;
  background: #fff;
  border-radius: 12px;
  -webkit-border-radius: 12px;
  -moz-border-radius: 12px;
  -ms-border-radius: 12px;
  -o-border-radius: 12px;
}
.dark-mode .code-blog-container {
  margin: auto;
  background: #121212;
  padding: 40px;
  border-radius: 12px;
  box-shadow: 0 4px 18px rgba(0,0,0,0.08);
}
.code-blog-header h1 {
  color: #0d6efd;
  font-weight: 700;
  margin-bottom: 10px;
}
.dark-mode .code-blog-header h1 {
  color: #b5d3ff;
  font-weight: 700;
  margin-bottom: 10px;
}
.code-blog-header p {
   color: #6c757d;
 }
.example-code-box {
  display: flex;
  gap: 20px;
  align-items: stretch;
  background: #f4f6f8;
  border-radius: 10px;
  padding: 20px;
  margin: 40px 0;
  border-left: 5px solid #0d6efd;
  box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.05);
}
 .dark-mode .example-code-box {
  background: #1e1e1e;
  border-left: 5px solid #b5d3ff;
  box-shadow: inset 0 0 6px rgba(241, 240, 240, 0.05);
}
.example-code {
  flex: 1;
  background: #1e1e1e;
  color: #dcdcdc;
  border-radius: 8px;
  padding: 15px;
  overflow-y: auto;
  font-family: "Courier New", monospace;
  font-size: 0.9rem;
  line-height: 1.5;
  white-space: pre;
}
.dark-mode .example-code {
  flex: 1;
  background: #1e1e1e;
  color: #dcdcdc;
  border-radius: 8px;
  padding: 15px;
  overflow-y: auto;
  font-family: "Courier New", monospace;
  font-size: 0.9rem;
  line-height: 1.5;
  white-space: pre;
}
.example-code-preview {
  flex: 1;
  background: #fff;
  padding: 15px;
  border-radius: 8px;
  display: flex;
  align-items: flex-start; 
  justify-content: center;
}
#previewFrame{
  position: relative;
  top:20px;
  width: 100%;
  min-height: 500px;
  border: 1px solid #ddd;
  border-radius: 6px;
}
.dark-mode .example-code-preview {
  background-color: #000;
}
.example-code-preview iframe {
  width: 16rem;
  transition: all 0.3s ease;
}
.dark-mode.example-code-preview iframe {
  background-color: var(--GriSiyah)!important;
}
@media (max-width: 768px) {
  .example-code-box {
    flex-direction: column;
  }
 }
/* Ekstra dokunuşlar */
.section-alt-title {
  border-bottom: 3px solid #0d6efd;
  display: inline-block;
  padding-bottom: 5px;
  margin-top: 40px;
 }
.dark-mode .section-alt-title {
  border-bottom: 3px solid #b5d3ff;
  display: inline-block;
  padding-bottom: 5px;
  margin-top: 40px;
}
.tip-code-box {
  margin-top: 20px;
  background: #e9f7ef;
  border-left: 4px solid #28a745;
  padding: 15px;
  border-radius: 8px;
}
.dark-mode .tip-code-box {
  margin-top: 20px;
  background: #28a745;
  border-left: 4px solid #e9f7ef;
  padding: 15px;
  border-radius: 8px;
}
.tip-code-box b {
  color: #1e7e34;
}
.dark-mode .tip-code-box b {
  color: #e9f7ef;
}
/*turu 2*/
.main-title {
  font-size: 3rem;
  font-weight: 700;
  text-align: center;
  margin-bottom: 20px;
  letter-spacing: -1px;
}
.subtitle {
  font-size: 1.2rem;
  max-width: 850px;
  margin: 0 auto;
  line-height: 1.8;
  text-align: center;
  color: var(--bg);
  margin-bottom: 60px;
}
.dark-mode .subtitle {
  color: var(--text);
}

.feature-image {
  width: 100%;
  height: 330px;
  object-fit: cover;
  border-radius: 18px;
  cursor: pointer;
  transition: 0.25s;
}
.feature-image:hover {
  transform: scale(1.02);
}
@media (max-width: 576px) {
  .feature-image {
    height: 220px;
  }
  .main-title {
    font-size: 2.2rem;
  }
}
.text-block {
  font-size: 1.08rem;
  color: #444;
  line-height: 1.7;
  margin-top: 10px;
  text-align: justify;
}
.dark-mode .text-block {
  color: var(--text);
}
.section-title {
  margin-top: 70px;
  font-weight: 600;
  text-align: center;
  margin-bottom: 30px;
  font-size: 1.8rem;
}
/* Modal boyutu */
.modal-img {
  width: 100%;
  border-radius: 12px;
}

/*blogCardDetay bitiş*/    
/*blogs kartlar*/
.dark-mode .blog-card{
  box-shadow: 0 8px 20px rgba(252, 252, 252, 0.1);
  background-color: #121212
}   
.dark-mode .blog-card:hover{box-shadow: 0 12px 25px rgba(255, 255, 255, 0.2);}
/*Yukarı Çık Butonu Başlangıç*/
#yukariBtn {
  display: none; /* Başta gizli */
  position: fixed;
  bottom: 40px;
  right: 40px;
  z-index: 99;
  font-size: 18px;
  border: none;
  outline: none;
  background-color: #000000a1;
  color: white;
  cursor: pointer;
  padding: 12px 16px;
  border-radius: 50%;
  transition: 0.3s;
}
#yukariBtn:hover {
  background-color: #000000e0;
}
/*Yukarı Çık Butonu Bitiş*/

/*yapimda.php Başlangıç*/
.yapimda-card-wrap{
  width: min(980px, 94vw);
  background: linear-gradient(180deg, rgba(255,255,255,0.04), rgba(255,255,255,0.02));
  backdrop-filter: blur(4px);
  border: 1px solid #263142;
  border-radius: 18px;
  box-shadow: 0 10px 40px rgba(0,0,0,0.35);
}
.brand{
  display:flex;gap:12px;align-items:center;
  font-weight:700; letter-spacing:.2px;
}
.brand .dot{width:10px;height:10px;border-radius:50%;background:var(--accent)}
.yapimda-content{padding: 26px 22px 30px}
 /* Canvas alanı */
.yapimda-hero{
  background: linear-gradient(180deg, #0e1627 0%, #0c1423 100%);
  border:1px solid #1e293b;
  border-radius:16px;
  position:relative;
  overflow:hidden;
}
/* Zemin çizgileri */
.yapimda-hero::after{
  content:"";
  position:absolute; inset:0;
  background:
    linear-gradient(to right, transparent 0 49%, rgba(255,255,255,0.04) 50%, transparent 51% 100%),
    linear-gradient(to bottom, transparent 0 49%, rgba(255,255,255,0.04) 50%, transparent 51% 100%);
  background-size: 48px 48px;
  opacity:.5; pointer-events:none;
}
/* Metin blokları */
.yapimda-title{font-weight:800; letter-spacing:.3px}
/* Animasyonlar */
@keyframes swing { /* asılı tabela */
  0% { transform: rotate(-5deg); }
  50% { transform: rotate(5deg); }
  100% { transform: rotate(-5deg); }
}
@keyframes blink { /* uyarı ışığı */
  0%, 60% { opacity: .25; }
  70% { opacity: 1; }
  100% { opacity: .25; }
}
@keyframes spin {
  to { transform: rotate(360deg); }
}
@keyframes floaty {
  0% { transform: translateY(0) }
  50% { transform: translateY(-6px) }
  100% { transform: translateY(0) }
}
/* İlerleme şeridi (dummy) */
.progress-lite{
  height: 8px; background:#0b1220; border:1px solid #1e293b; border-radius:999px; overflow:hidden;
}
.progress-lite > span{
  display:block; height:100%; width:95%;
  background: linear-gradient(90deg,var(--pembe), var(--sari), var(--sari), var(--yesil), var(--cyan));
  background-size:200% 100%;
  animation: progressMove 2.4s linear infinite;
}
@keyframes progressMove { to { background-position: 200% 0; } }
.btn-wrap .btn{border-radius: 999px}
/* SVG responsive */
.scene svg{width: 100%; height: auto; display:block}
/* Küçük ekran ayarları */
@media (max-width: 575.98px){
  .yapimda-title{font-size:1.5rem}
}
/*yapimda.php Bitiş*/