/* =========================
   HERO (MOBILE FIX)
   ========================= */
#home{padding:0;margin-top:67px}
@media (max-width:968px){#home{margin-top:67px}}

.hero-slider{
  position:relative;
  width:100%;
  height: 350px;
  overflow:hidden;
  background:#000;
}
@media (max-width:968px){ .hero-slider{height: 520px;} }
@media (max-width:420px){ .hero-slider{height: 560px;} }

.hero-track{display:flex;height:100%;width:200%;transform:translateX(0%);transition:transform .6s ease}
.hero-slide{
  width:50%;height:100%;
  position:relative;
  display:flex;align-items:center;justify-content:center;
  color:var(--hero-text, #fff);text-align:center;
  padding:0 14px;
  background:none;
}
.hero-slide::after{
  content:"";
  position:absolute;
  inset:0;
  background-image: var(--hero-bg);
  background-size: cover;
  background-position: center;
  transform: scale(1.06);
  filter: saturate(1.12) contrast(1.06) brightness(.82);
  z-index:0;
}
.hero-slide::before{
  content:"";position:absolute;inset:0;
  background: linear-gradient(var(--hero-overlay-1, rgba(0,0,0,.70)), var(--hero-overlay-2, rgba(0,0,0,.74)));
  z-index:1;
}
.hero-content{
  position:relative;
  z-index:2;
  width:min(980px,92%);
  margin:0 auto;
  padding:6px 0;

  font-family: var(--hero-font, 'Manrope');
}
.hero-content h1{
  font-size:2.12rem;
  line-height:1.12;
  letter-spacing:-.5px;
  margin-bottom:10px;
  text-shadow: 0 10px 28px rgba(0,0,0,.30);
}
.hero-content .hero-h2{
  font-size:2.02rem;
  line-height:1.12;
  letter-spacing:-.5px;
  margin-bottom:10px;
  text-shadow: 0 10px 28px rgba(0,0,0,.30);
  font-weight:900;
}
.hero-content p{
  font-size:.98rem;
  opacity:.95;
  max-width:720px;
  margin:0 auto 14px;
}
.hero-actions{display:flex;justify-content:center;gap:10px;flex-wrap:wrap}

.hero-arrow{
  position:absolute;top:50%;transform:translateY(-50%);
  width:42px;height:42px;
  display:flex;align-items:center;justify-content:center;
  background: rgba(255,255,255,.12);
  border:1px solid rgba(255,255,255,.18);
  color:#fff;cursor:pointer;
  transition:.2s ease;
  z-index:5;
}
.hero-arrow:hover{background: rgba(255,255,255,.18)}
.hero-prev{left:14px}
.hero-next{right:14px}

.hero-dots{
  position:absolute;left:50%;bottom:12px;transform:translateX(-50%);
  display:flex;gap:10px;z-index:5;
}
.hero-dot{
  width:10px;height:10px;border-radius:99px;
  background: rgba(255,255,255,.35);
  border:1px solid rgba(255,255,255,.25);
  cursor:pointer;
  transition:.2s ease;
}
.hero-dot.active{background:#fff}

@media (max-width:560px){
  .hero-content{ text-align:center; }
  .hero-content h1{font-size:1.55rem}
  .hero-content .hero-h2{font-size:1.45rem}
  .hero-content p{font-size:.93rem}
  .hero-arrow{display:none}
  .btn{width:100%;justify-content:center;max-width:420px}
}



/* =========================
   SERVICES
   ========================= */
.services-grid{
  display:grid;
  grid-template-columns:repeat(3, minmax(0,1fr));
  gap: var(--gap);
  margin-top: 12px;
}
.service-photo-card{
  position:relative;
  overflow:hidden;
  background:#ddd;
  box-shadow: var(--shadow-soft);
  border:1px solid rgba(44,62,80,.06);
  min-height: 240px;
}
.service-photo-card.is-linked{
  display:block;
  text-decoration:none;
  color:inherit;
}
.service-photo-card.is-linked:focus-visible{
  outline: 3px solid rgba(14,58,101,.35);
  outline-offset: 3px;
}
.service-photo-card img{
  width:100%;
  height: 240px;
  object-fit: cover;
  transition: transform .35s ease, filter .35s ease;
  filter: saturate(1.05) contrast(1.02);
}
.service-photo-card:hover img{transform: scale(1.06)}
.service-overlay{
  position:absolute;inset:0;
  background:
    radial-gradient(900px 280px at 50% 0%, rgba(0,0,0,.20), rgba(0,0,0,0) 55%),
    linear-gradient(transparent 28%, rgba(0,0,0,.82));
}
.service-cap{
  position:absolute;left:0;right:0;bottom:0;
  padding:14px 14px 14px;
  color:#fff;
  text-shadow: 0 10px 26px rgba(0,0,0,.35);
}
.service-cap h3{
  font-size:1.05rem;
  line-height:1.2;
  margin-bottom:6px;
  display:flex;
  align-items:center;
  gap:10px;
}
.service-cap p{font-size:.92rem;opacity:.94;max-width: 96%}
.service-cap .svc-ico{
  width:34px;height:34px;
  display:inline-flex;align-items:center;justify-content:center;
  background: rgba(255,255,255,.14);
  border:1px solid rgba(255,255,255,.20);
  backdrop-filter: blur(8px);
  flex:0 0 34px;
}

/* =========================
   ABOUT
   ========================= */
#about-wrap{background:#fff}
.about-container{
  display:grid;
  grid-template-columns: 1.05fr .95fr;
  gap: 34px;
  align-items:center;
}
.about-img img{
  box-shadow: 12px 12px 0 rgba(14,58,101,.20);
}
.about-text h2{font-size:1.85rem;color:var(--dark);line-height:1.2;margin-bottom:10px}
.about-text p{color:#52606d;font-size:.98rem}
.about-bullets{margin-top:12px;display:grid;gap:10px}
.bullet{
  display:flex;gap:10px;align-items:flex-start;
  background:rgba(44,62,80,.03);
  border:1px solid rgba(44,62,80,.06);
  padding:12px 12px;
  border-radius:7px;
}
.bullet .icon{color:var(--primary);margin-top:2px}

/* =========================
   GALLERY
   ========================= */
.gallery-grid{
  display:grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: var(--gap);
  margin-top: 12px;
}
.gallery-item{
  position:relative;
  border-radius: 9px;
  overflow:hidden;
  background:#ddd;
  box-shadow: var(--shadow-soft);
  border:1px solid rgba(44,62,80,.06);
}
.gallery-item.is-linked{
  display:block;
  text-decoration:none;
  color:inherit;
}
.gallery-item.is-linked:focus-visible{
  outline: 3px solid rgba(14,58,101,.35);
  outline-offset: 3px;
}
.gallery-item img{
  width:100%;
  height: 210px;
  object-fit: cover;
  transition: transform .35s ease;
}
.gallery-item:hover img{transform: scale(1.05)}
.gallery-cap{
  position:absolute;left:0;right:0;bottom:0;
  padding:12px 12px;
  background: linear-gradient(transparent, rgba(0,0,0,.65));
  color:#fff;
  font-weight:800;
  font-size:.95rem;
  text-shadow: 0 10px 26px rgba(0,0,0,.30);
  line-height:1.25;
  /* Uzun başlıklar taşmasın */
  display:-webkit-box;
  -webkit-box-orient:vertical;
  -webkit-line-clamp:2;
  overflow:hidden;
}

/* Sticky header kapalıysa */
body.ms-no-sticky .site-header{position:relative; top:0; padding:0 5%;}
body.ms-no-sticky #home{margin-top:0;}
body.ms-no-sticky .blog-wrap{padding-top:16px;}

/* =========================
   ABOUT ARKA PLAN
   ========================= */

#about-wrap{
  position:relative;
  padding:30px 0;

  background:
    linear-gradient(rgba(255,255,255,.94), rgba(255,255,255,.50)),
    url('https://www.marasseramikustasi.com/wp-content/uploads/2026/02/biz-kimiz-arka-pilan.webp');

  background-size:cover;
  background-position:center;
  background-repeat:no-repeat;
}

/* =========================
   FAQ
   ========================= */
.faq{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--gap);
  margin-top: 12px;
}
details.faq-item{
  background: var(--white);
  border:1px solid rgba(44,62,80,.06);
  border-radius: 9px;
  box-shadow: var(--shadow-soft);
  padding: 14px 14px;
}
details.faq-item summary{
  list-style:none;
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  font-weight:900;
  color:var(--dark);
  font-size:1rem;
}
details.faq-item summary::-webkit-details-marker{display:none}
.faq-icon{
  width:34px;height:34px;border-radius:12px;
  display:flex;align-items:center;justify-content:center;
  background: rgba(14,58,101,.10);
  color: var(--primary);
  flex:0 0 34px;
}
details.faq-item p{
  margin-top:10px;
  color:#52606d;
  font-size:.95rem;
  padding-left: 2px;
}

/* =========================
   CTA (FULL WIDTH + NO RADIUS)
   ========================= */
.cta{
  width:100vw;
  margin-left:calc(50% - 50vw);
  margin-right:calc(50% - 50vw);

  overflow:hidden;
  box-shadow:none;
  border:none;

  background: linear-gradient(90deg, var(--cta-bg-1, #0E3A65), var(--cta-bg-2, #0b2f52));
  color: var(--cta-text, #fff);
}

.cta-inner{
  max-width: var(--container);
  margin:0 auto;
  padding: 24px 16px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 14px;
  flex-wrap:wrap;
}

.cta h3{
  font-size:1.5rem;
  line-height:1.2;
  margin-bottom:6px;
}

.cta p{
  opacity:.95;
  max-width:720px;
}

.cta .btn{
  background:#fff;
  color:var(--dark);
  box-shadow:none;
}

.cta .btn:hover{
  background: rgba(255,255,255,.92);
}

.cta .btn-outline{
  background: rgba(255,255,255,.12);
  color:#fff;
  border:1px solid rgba(255,255,255,.25);
}


/* =========================
   MOBILE CENTER FIX
   ========================= */
@media (max-width:768px){

  .cta-inner{
    flex-direction:column;
    text-align:center;
    justify-content:center;
    align-items:center;
  }

  .cta p{
    max-width:100%;
  }

  .cta .btn,
  .cta .btn-outline{
    width:100%;
    max-width:280px;
  }

}
/* =========================
   CONTACT
   ========================= */
.contact-wrap{background: rgba(44,62,80,.03);} 
.contact-grid{
  display:grid;
  grid-template-columns: 1fr 1.2fr;
  gap: 16px;
  align-items:stretch;
}
.contact-card{
  background:#fff;
  border:1px solid rgba(44,62,80,.08);
  box-shadow: var(--shadow-soft);
  overflow:hidden;
}
.contact-card .pad{padding: 18px 18px;}
.contact-title{
  font-size:2.05rem;
  line-height:1.05;
  color:#111827;
  font-weight:900;
  margin-bottom:8px;
}
.contact-sub{color:#52606d;max-width:520px;font-size:.98rem}
.contact-list{margin-top:14px;display:grid;gap:12px}
.citem{
  display:flex;gap:12px;align-items:flex-start;
  padding: 12px 12px;
  border-radius:16px;
  background: rgba(44,62,80,.03);
  border:1px solid rgba(44,62,80,.06);
}
.cico{
  width:46px;height:46px;border-radius:16px;
  display:flex;align-items:center;justify-content:center;
  background: rgba(14,58,101,.10);
  color: var(--primary);
  flex:0 0 46px;
}
.citem b{display:block;font-size:1.03rem}
.citem a{color:#0b5bd3;text-decoration:none;font-weight:800}
.citem small{display:block;color:#64748b;margin-top:2px;font-weight:600}
.map-embed{width:100%;height: 260px;border:0;display:block}

.form-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;
  margin-bottom:10px;
  flex-wrap:wrap;
}
.form-title{
  font-size:1.7rem;
  font-weight:900;
  color:#111827;
  line-height:1.15;
}
.badge{
  display:inline-flex;align-items:center;gap:8px;
  padding:9px 12px;
  border:1px solid rgba(14,58,101,.18);
  background: rgba(14,58,101,.06);
  color: var(--primary);
  font-weight:900;
  white-space:nowrap;
}
.form-desc{color:#52606d;margin-top:4px}
.form-grid{
  margin-top:14px;
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.field{display:flex;flex-direction:column;gap:6px}
.field label{font-weight:900;color:#111827;font-size:.92rem}
.input, .select, .textarea{
  border:1px solid rgba(44,62,80,.14);
  border-radius: 12px;
  padding: 12px 12px;
  font-size:1rem;
  outline:none;
  background:#fff;
}
.textarea{min-height:120px;resize:vertical}
.input:focus, .select:focus, .textarea:focus{
  border-color: rgba(14,58,101,.55);
  box-shadow: 0 0 0 .25rem rgba(14,58,101,.14);
}
.form-actions{
  margin-top:14px;
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  flex-wrap:wrap;
}
.btn-send{
  width:100%;
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  padding: 14px 16px;
  border:1px solid rgba(255,255,255,.08);
  background: var(--primary);
  color:#fff;
  font-weight:900;
  cursor:pointer;
  box-shadow: 0 14px 24px rgba(14,58,101,.18);
  transition:.2s ease;
}
.btn-send:hover{background:var(--primary-2);transform:translateY(-1px)}
.form-note{color:#64748b;font-size:.9rem}

/* =========================
   RESPONSIVE (FRONT)
   ========================= */
@media (max-width: 980px){
  .services-grid{grid-template-columns:repeat(2, minmax(0,1fr))}
  .gallery-grid{grid-template-columns:repeat(2, minmax(0,1fr))}
  .faq{grid-template-columns:1fr}
  .about-container{grid-template-columns:1fr; gap:22px;}
  .contact-grid{grid-template-columns: 1fr;}
  .form-grid{grid-template-columns:1fr}
}
@media (max-width: 560px){
  .services-grid{grid-template-columns:1fr}
  .gallery-grid{grid-template-columns:1fr}
  .service-photo-card img{height: 220px}
  .service-photo-card{min-height: 220px}
}

/* ===== VIDEO BLOGU ===== */
.video-grid{
  display:grid;
  grid-template-columns: repeat(4, minmax(0,1fr));
  gap: var(--gap);
  margin-top: 12px;
}
@media (max-width: 1024px){
  .video-grid{ grid-template-columns: repeat(2, minmax(0,1fr)); }
}
@media (max-width: 540px){
  .video-grid{ grid-template-columns: 1fr; }
}
.video-item{
  position:relative;
  border-radius: 9px;
  overflow:hidden;
  background: rgba(0,0,0,.06);
  box-shadow: var(--shadow-soft);
  border:1px solid rgba(44,62,80,.06);
  aspect-ratio: 16/9;
}
.video-thumb{
  appearance:none;
  border:0;
  background: transparent;
  padding:0;
  cursor:pointer;
  display:block;
  width:100%;
  height:100%;
  position:relative;
}
.video-thumb img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
  transform: scale(1.02);
  transition: transform .25s ease;
}
.video-thumb:hover img{ transform: scale(1.06); }
.video-play{
  position:absolute;
  left:50%;
  top:50%;
  transform: translate(-50%,-50%);
  width:52px;
  height:52px;
  border-radius:999px;
  background: rgba(14,58,101,.92);
  color:#fff;
  display:flex;
  align-items:center;
  justify-content:center;
  box-shadow: 0 10px 26px rgba(2,6,23,.18);
}
.video-iframe{
  width:100%;
  height:100%;
  border:0;
  display:block;
}

/* =========================
   BLOK PADDING DÜZENİ (17 / 17)
   - HERO ALTI ve "Neler Yapıyoruz" HARİÇ
   ========================= */

/* Genel blok paddingleme: üst-alt 17 */
#about-wrap,
section.gallery-wrap,
section.faq-wrap,
section.cta,
section.contact-wrap,
section.video-wrap{
  padding-top:17px;
  padding-bottom:17px;
}

/* Eğer bazı bölümler <section id="..."> ise yakalasın */
section#about-wrap,
section#gallery,
section#faq,
section#contact,
section#video{
  padding-top:40px;
  padding-bottom:40px;
}