/* Laravel geçişiyle eklenen bileşenler: form durumları, blog görselleri, doküman okuyucu */

.blog-card__image { display: block; width: 100%; height: 201px; object-fit: cover; border-radius: 4px; }

/* Bot tuzağı alanı: kullanıcıya görünmez */
.form-hp { position: absolute !important; left: -10000px; width: 1px; height: 1px; overflow: hidden; }

/* Sunucu hataları (JavaScript kapalıysa) */
.form-alert { margin: 0 0 28px; padding: 16px 20px; border: 1px solid #f1b8b8; border-radius: 10px; background: #fdf1f1; color: #8a1f1f; font-size: 13px; line-height: 1.5; }
.form-alert ul { margin: 6px 0 0; padding-left: 18px; }

/* Alan bazlı hata mesajları */
.is-invalid, input.is-invalid, select.is-invalid, textarea.is-invalid { border-color: #d64545 !important; box-shadow: 0 0 0 3px rgba(214, 69, 69, .12); }
.field-error { display: block; margin-top: 6px; color: #c03434; font-size: 12px; font-weight: 500; line-height: 1.4; font-style: normal; }

/* Gönderim sırasında buton */
button[aria-busy="true"] { cursor: progress; opacity: .75; }
button[aria-busy="true"]::after { content: ''; display: inline-block; width: 14px; height: 14px; margin-left: 10px; vertical-align: -2px; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: esart-spin .7s linear infinite; }
@keyframes esart-spin { to { transform: rotate(360deg); } }

/* SweetAlert2 – site renkleri ve tipografisi */
.swal2-popup.esart-swal { padding: 36px 32px 30px; border-radius: 16px; font-family: Inter, system-ui, sans-serif; color: #202523; }
.esart-swal .swal2-title { padding: 0; color: #0f2a22; font-size: 24px; font-weight: 700; }
.esart-swal .swal2-html-container { margin: 14px 0 0; color: #55605c; font-size: 14px; line-height: 1.6; }
.esart-swal .esart-swal__tracking { display: block; margin: 18px auto 12px; padding: 14px 18px; border: 1px dashed #7fb8a6; border-radius: 10px; background: #eef7f3; color: #00533f; font-size: 22px; font-weight: 700; letter-spacing: .04em; }
.esart-swal .esart-swal__note { display: block; margin-top: 10px; font-size: 12px; color: #6b7672; }
.esart-swal .swal2-actions { margin-top: 26px; }
.esart-swal .swal2-confirm { min-width: 160px; padding: 13px 26px; border-radius: 6px; background: #00533f !important; font-size: 14px; font-weight: 600; box-shadow: none !important; }
.esart-swal .swal2-icon.swal2-success { border-color: #00785d; color: #00785d; }
.esart-swal .swal2-icon.swal2-success [class^='swal2-success-line'] { background-color: #00785d; }
.esart-swal .swal2-icon.swal2-success .swal2-success-ring { border-color: rgba(0, 120, 93, .25); }

/* Hukuki metinler (KVKK, Açık Rıza, Gizlilik, Çerez) – içerik panelden gelir */
.kvkk-page { height: auto; min-height: 787px; }
.kvkk-page__content.legal-content { display: block; overflow-y: auto; padding: 16px 24px; }
.legal-content h2 { margin: 18px 0 6px; color: #004d3b; font-size: 20px; line-height: 30px; }
.legal-content h3 { margin: 16px 0 4px; font-size: 18px; line-height: 28px; }
.legal-content p, .legal-content li { margin: 0 0 10px; font-size: 14px; line-height: 26px; }
.legal-content ul, .legal-content ol { margin: 0 0 12px; padding-left: 22px; }
.legal-content a { color: #00644f; text-decoration: underline; }
.legal-content > :first-child { margin-top: 0; }
.legal-article { width: min(calc(100% - 196px), 1244px); margin: 0 auto 60px; padding: 30px 40px; border: 1px solid rgb(51 51 51 / .15); border-radius: 8px; }
@media (max-width: 900px) {
  .kvkk-page { min-height: 0; }
  .kvkk-page__content.legal-content { height: 420px; padding: 12px 14px; }
  .legal-article { width: calc(100% - 32px); padding: 20px 18px; }
}
.analysis-request-option small a { color: inherit; text-decoration: underline; }

/* Blog liste ve detay (esart klasöründeki tasarımdan) */
.blog-list { min-height: 0; padding: 40px 0 72px; }
.blog-list__grid { grid-template-columns: repeat(3, 1fr); margin-top: 0; }
.blog-card h3 a { display: block; color: inherit; font: inherit; }
.blog-list__grid .blog-card:hover { border-color: #00634c; }

.blog-article { padding: 40px 0 72px; }
.blog-body-grid { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 0 56px; align-items: start; }

.blog-head { padding-bottom: 24px; border-bottom: 1px solid #e2e7e4; }
.blog-head__label { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 18px 0 0; color: #004d3b; font-size: 11px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; }
.blog-head__label time,
.blog-head__read { color: #6b7671; font-weight: 600; letter-spacing: .08em; }
.blog-head__sep { color: #c3ccc8; }
.blog-head__title { margin: 0; font-size: clamp(26px, 4vw, 38px); font-weight: 700; line-height: 1.2; letter-spacing: -.015em; }

.blog-figure { display: grid; height: 320px; margin: 28px 0 34px; place-items: center; background: #d9d9d9; border-radius: 8px; font-size: 12px; font-weight: 700; }

.blog-body > p,
.blog-body ul { max-width: 90ch; text-align: justify; }
.blog-body > p { margin: 0 0 20px; font-size: 16.5px; line-height: 1.78; }
.blog-body h2 { margin: 36px 0 14px; font-size: 21px; line-height: 1.35; }
.blog-body ul { margin: 0 0 22px; padding: 0; list-style: none; }
.blog-body li { position: relative; margin-bottom: 10px; padding-left: 22px; font-size: 15.5px; line-height: 1.7; }
.blog-body li::before { content: ""; position: absolute; top: 11px; left: 2px; width: 7px; height: 7px; border-radius: 50%; background: #004d3b; }
.blog-body a { color: #004d3b; font-weight: 600; }
.blog-body a:hover { text-decoration: underline; }

.blog-note { margin: 28px 0; padding: 18px 20px 18px 22px; background: #f4f7f6; border-left: 2px solid #004d3b; }
.blog-note strong { display: block; margin-bottom: 6px; color: #004d3b; font-size: 12px; letter-spacing: .12em; text-transform: uppercase; }
.blog-note p { margin: 0; color: #2c3a34; font-size: 15px; line-height: 1.7; }

/* Sağ ray: son yazılar */
.blog-side__title { margin: 0 0 16px; padding-bottom: 10px; border-bottom: 1px solid #e2e7e4; color: #004d3b; font-size: 12px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; }
.blog-side ol { margin: 0; padding: 0; list-style: none; }
.blog-side li + li { margin-top: 16px; padding-top: 16px; border-top: 1px solid #eef1f0; }
.blog-side a { display: block; color: #111; font-size: 15px; font-weight: 600; line-height: 1.45; }
.blog-side a:hover { color: #004d3b; }
.blog-side li > span { display: block; margin-top: 5px; color: #6b7671; font-size: 12px; font-weight: 400; }
.blog-side .blog-side__all { display: inline-block; margin-top: 18px; color: #004d3b; font-size: 13px; font-weight: 600; white-space: nowrap; }
.blog-side .blog-side__all:hover { text-decoration: underline; }

/* Önceki / sonraki */
.blog-pager { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; margin-top: 40px; }
.blog-pager a { display: grid; gap: 5px; padding: 18px 20px; background: #fff; border: 1px solid #e2e7e4; border-radius: 8px; }
.blog-pager a:hover { border-color: #00634c; }
.blog-pager span { color: #6b7671; font-size: 11px; letter-spacing: .14em; text-transform: uppercase; }
.blog-pager strong { color: #111; font-size: 15px; font-weight: 600; line-height: 1.4; }
.blog-pager__next { text-align: right; }

.blog-body a:focus-visible,
.blog-side a:focus-visible,
.blog-pager a:focus-visible { outline: 2px solid #004d3b; outline-offset: 2px; }

.blog-notfound { width: min(100%, 620px); margin: 60px auto 90px; padding: 44px 40px; text-align: center; background: #fff; border: 1px solid #e2e7e4; border-radius: 12px; }
.blog-notfound h1 { margin: 0 0 14px; font-size: 28px; }
.blog-notfound p { margin: 0 0 26px; color: #666; font-size: 15px; line-height: 1.7; }

@media (max-width: 1100px) {
  .blog-list__grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 1023px) {
  .blog-body-grid { grid-template-columns: 1fr; gap: 40px; }
}
@media (max-width: 840px) {
  .blog-list__grid { grid-template-columns: 1fr; }
  .blog-list { padding: 28px 0 48px; }
  .blog-article { padding: 28px 0 48px; }
  .blog-figure { height: 200px; }
  .blog-body > p { font-size: 15.5px; line-height: 1.72; }
  .blog-body > p:first-child { font-size: 17px; }
  .blog-body h2 { margin-top: 30px; font-size: 19px; }
  .blog-pager { grid-template-columns: 1fr; }
  .blog-pager__next { text-align: left; }
}

.blog-card h3 a { color: inherit; }
.blog-body img { max-width: 100%; height: auto; border-radius: 6px; }
.blog-figure img { width: 100%; height: 100%; object-fit: cover; border-radius: inherit; }
.blog-pagination { display: flex; justify-content: center; gap: 8px; margin-top: 40px; }
.blog-pagination a, .blog-pagination span { min-width: 40px; padding: 9px 14px; border: 1px solid #d8dedd; border-radius: 6px; background: #fff; color: #202523; font-size: 14px; text-align: center; }
.blog-pagination .is-current { border-color: #00533f; background: #00533f; color: #fff; }

/* Bilgilendirme dokümanı okuma sayfası */
.document-reader { width: min(calc(100% - 196px), 1044px); margin: 0 auto 72px; padding: 30px; border: 1px solid rgb(51 51 51 / .15); border-radius: 8px; background: #fff; }
.document-reader__bar { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding-bottom: 22px; margin-bottom: 26px; border-bottom: 1px solid #e2e7e4; }
.document-reader__bar h2 { margin: 0; color: #004d3b; font-size: 20px; line-height: 1.4; text-align: right; }
.document-reader__back { display: inline-flex; align-items: center; gap: 8px; padding: 10px 16px; border: 1px solid #004d3b; border-radius: 6px; color: #004d3b; font-size: 14px; font-weight: 600; white-space: nowrap; }
.document-reader__back:hover { background: #004d3b; color: #fff; }
.document-viewer { padding: 24px; border-radius: 10px; background: #eef3f1; user-select: none; -webkit-user-select: none; }
.document-viewer__pages { display: flex; flex-direction: column; gap: 20px; }
.document-viewer__page { display: block; width: 100%; height: auto; border-radius: 4px; background: #fff; box-shadow: 0 6px 24px rgb(15 42 34 / .12); }
.document-viewer__status { margin: 0; padding: 60px 0; color: #55605c; font-size: 14px; text-align: center; }
@media (max-width: 900px) {
  .document-reader { width: calc(100% - 32px); padding: 18px 14px; }
  .document-reader__bar { flex-direction: column-reverse; align-items: flex-start; }
  .document-reader__bar h2 { text-align: left; font-size: 18px; }
  .document-viewer { padding: 10px; }
  .document-viewer__pages { gap: 12px; }
}

/* Ana sayfa slider'ı: panelden yüklenen görseller yumuşak geçişle değişir */
.hero__slides { position: absolute; inset: 0; }
.hero__slide { opacity: 0; transition: opacity 900ms ease; }
.hero__slide.is-active { opacity: 1; animation: hero-pan 900ms ease; }

/* İç sayfalardaki play butonları artık tıklanabilir */
button.service-intro__play, button.wastewater-hero__play, button.water-hero__play { padding: 0; border: 0; background: transparent; cursor: pointer; transition: opacity 200ms ease, transform 200ms ease; }
button.service-intro__play:hover, button.wastewater-hero__play:hover, button.water-hero__play:hover,
button.service-intro__play:focus-visible, button.wastewater-hero__play:focus-visible, button.water-hero__play:focus-visible { opacity: .9; }
.sludge-content__hero { position: relative; }
.sludge-content__play { position: absolute; top: 50%; left: 50%; display: block; width: 93px; height: 93px; padding: 0; border: 0; background: transparent; opacity: .25; transform: translate(-50%, -50%); cursor: pointer; transition: opacity 200ms ease; }
.sludge-content__play img { display: block; width: 100%; height: 100%; }
.sludge-content__play:hover, .sludge-content__play:focus-visible { opacity: .9; }
@media (max-width: 840px) { .sludge-content__play { width: 64px; height: 64px; } }
.service-content p { margin: 0 0 1em; } .service-content > :last-child { margin-bottom: 0; } .service-content h2, .service-content h3 { margin: 1.2em 0 .5em; color: #004d3b; }
.service-page .service-intro { height: auto; min-height: 859px; } @media (max-width: 900px) { .service-page .service-intro { min-height: 0; } }
.service-page .service-intro { height: auto; min-height: 859px; } @media (max-width: 900px) { .service-page .service-intro { min-height: 0; } }
.hero__play[hidden] { display: none !important; }

/* Mobil görseller: panelden isteğe bağlı yüklenir, yoksa masaüstü görseli kullanılır */
.service-intro__media > picture { display: block; width: 100%; height: 100%; }
.service-intro__media > picture > img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center 48%; }
@media (max-width: 840px) {
  /* Ayrı mobil görsel varsa ortalanır; masaüstü görselindeki sağa kaydırma uygulanmaz */
  .hero__image.has-mobile-image { object-position: center; }
  /* Faaliyet alanında mobil görsel kendi oranıyla gösterilir, kesilmez */
  .service-intro__media.has-mobile-image { height: auto; }
  .service-intro__media.has-mobile-image > picture > img { height: auto; object-fit: initial; }
}

/* Slayt metinleri: aktif slaytın içeriği görünür, geçişte yumuşakça belirir */
.hero__content[hidden] { display: none !important; }
.hero__content { animation: hero-content-in 600ms ease; }
@keyframes hero-content-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* Blog kategori filtresi ve kart üzerindeki kategori bağlantısı */
.blog-filter { display: flex; flex-wrap: wrap; gap: 10px; margin: 0 0 32px; }
.blog-filter a { padding: 9px 18px; border: 1px solid #cfd9d5; border-radius: 999px; background: #fff; color: #33403b; font-size: 14px; font-weight: 500; transition: border-color 150ms ease, background 150ms ease, color 150ms ease; }
.blog-filter a:hover { border-color: #00533f; color: #00533f; }
.blog-filter a.is-active { border-color: #00533f; background: #00533f; color: #fff; }
.blog-card__category { color: inherit; }
.blog-card__category:hover { text-decoration: underline; }
.blog-head__label a { color: inherit; }
.blog-head__label a:hover { text-decoration: underline; }
@media (max-width: 840px) { .blog-filter { gap: 8px; margin-bottom: 24px; } .blog-filter a { padding: 8px 14px; font-size: 13px; } }

/* Atık Su ve Su Analizleri üst görseli <picture> içinde (mobil görsel desteği) */
.wastewater-hero > picture, .water-hero > picture { display: contents; }
.water-hero > picture > img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center; }
/* Tasarımdaki ilk görsel Figma'daki kırpmayla gösterilir */
.wastewater-hero > picture > img { position: absolute; top: -42.2%; left: -64.5%; display: block; width: 199.2%; max-width: none; height: 234%; object-fit: cover; }
/* Panelden yüklenen görsel kutuyu ortalanmış şekilde doldurur */
.wastewater-hero.has-custom-image > picture > img { top: 0; left: 0; width: 100%; height: 100%; object-position: center; }
@media (max-width: 840px) {
  .wastewater-hero > picture > img { top: 0; left: 0; width: 100%; height: 100%; }
}

/* Panelden yüklenen kart ikonu: tasarım ikonlarıyla aynı yükseklikte, taşmadan */
.service-custom-icon { max-width: 72px; object-fit: contain; }
.water-type__icon img.service-custom-icon, .water-analysis__icon img.service-custom-icon { max-width: 100%; }

/* Hakkımızda: tasarım görseline özel kırpma (object-view-box) yüklenen görselde uygulanmaz; görsel zaten 1225 × 340 oranında kırpılır */
.corporate-page__hero.has-custom-image { object-view-box: none; object-position: center; }

/* Kurumsal sayfalar panelden düzenlenir: görsel <picture> içinde, metin uzarsa sayfa da uzar */
.corporate-page > picture, .policy-page > picture, .narrative-page > picture, .vision-page > picture { display: contents; }
.policy-page { height: auto; min-height: 954px; }
.narrative-page--sustainability { height: auto; min-height: 1050px; }
.narrative-page--isg { height: auto; min-height: 1227px; }
@media (max-width: 840px) {
  .policy-page, .narrative-page--sustainability, .narrative-page--isg { min-height: 0; }
  /* Mobil görsel yüklendiyse kendi oranıyla, kesilmeden gösterilir */
  .corporate-page__hero.has-mobile-image, .policy-page__hero.has-mobile-image, .narrative-page__hero.has-mobile-image, .vision-page__hero.has-mobile-image { height: auto; object-fit: initial; object-view-box: none; }
}