/*
Theme Name: Bodrum Hidrofor Premium
Theme URI: https://bodrumhidrofor.com/
Author: Bodrum Hidrofor
Author URI: https://bodrumhidrofor.com/
Description: Bodrum'da hidrofor, su pompası ve basınç sistemleri için premium servis, satış ve teknik destek teması.
Version: 1.0.0
Text Domain: bodrum-hidrofor
*/

:root {
  --navy: #072743;
  --navy-deep: #041a30;
  --blue: #007cc3;
  --cyan: #15a8d8;
  --ice: #edf7fb;
  --sand: #f5f1e9;
  --ink: #15283b;
  --muted: #607487;
  --line: #dce9ee;
  --white: #fff;
  --shadow: 0 22px 60px rgba(7, 39, 67, .12);
  --radius: 22px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--white);
  color: var(--ink);
  font-family: "Manrope", system-ui, sans-serif;
  font-size: 16px;
  line-height: 1.7;
}
body, button, input, textarea, select { -webkit-font-smoothing: antialiased; }
a { color: inherit; text-decoration: none; }
a:hover { color: var(--blue); }
img { max-width: 100%; height: auto; }
.container { width: min(1180px, calc(100% - 40px)); margin-inline: auto; }
.screen-reader-text {
  clip: rect(1px,1px,1px,1px); clip-path: inset(50%); height: 1px;
  overflow: hidden; position: absolute !important; width: 1px; word-wrap: normal !important;
}

.announcement {
  background: var(--navy-deep);
  color: #dff6ff;
  overflow: hidden;
  font-size: 12px;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.announcement__track {
  display: flex; width: max-content; gap: 80px; padding: 9px 0;
  animation: marquee 26s linear infinite;
}
.announcement__track span::before { content: "✦"; color: var(--cyan); margin-right: 13px; }
@keyframes marquee { to { transform: translateX(-50%); } }

.site-header { position: relative; z-index: 20; background: rgba(255,255,255,.96); border-bottom: 1px solid rgba(220,233,238,.8); }
.header-row { min-height: 86px; display: flex; align-items: center; justify-content: space-between; gap: 26px; }
.brand { display: inline-flex; align-items: center; gap: 12px; }
.brand img { width: 104px; height: 104px; object-fit: contain; margin: -10px 0; }
.brand__fallback { font-weight: 900; letter-spacing: -.05em; color: var(--navy); font-size: 20px; line-height: 1; }
.brand__fallback span { display: block; color: var(--blue); font-size: 10px; letter-spacing: .22em; margin-top: 6px; }
.main-nav ul { list-style: none; padding: 0; margin: 0; display: flex; align-items: center; gap: 27px; }
.main-nav a { color: var(--navy); font-size: 13px; font-weight: 800; }
.main-nav a:hover { color: var(--blue); }
.header-actions { display: flex; align-items: center; gap: 9px; }
.button {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  border: 1px solid transparent; border-radius: 999px; padding: 13px 20px;
  font-size: 13px; font-weight: 800; line-height: 1; transition: .25s ease;
  cursor: pointer;
}
.button--primary { background: var(--blue); color: var(--white); box-shadow: 0 10px 24px rgba(0,124,195,.22); }
.button--primary:hover { color: var(--white); background: var(--navy); transform: translateY(-2px); }
.button--ghost { border-color: var(--line); color: var(--navy); background: var(--white); }
.button--ghost:hover { border-color: var(--blue); color: var(--blue); }
.button--dark { background: var(--navy); color: var(--white); }
.button--dark:hover { background: var(--blue); color: var(--white); transform: translateY(-2px); }
.mobile-toggle { display: none; background: none; border: 0; color: var(--navy); font-size: 26px; cursor: pointer; }

.hero { overflow: hidden; position: relative; background: linear-gradient(115deg, #fbfdfd 0%, #edf8fb 56%, #fff 100%); }
.hero__grid { min-height: 650px; display: grid; grid-template-columns: minmax(0, 1.02fr) minmax(420px, .98fr); align-items: center; gap: 30px; }
.eyebrow { display: inline-flex; align-items: center; gap: 9px; color: var(--blue); font-size: 11px; letter-spacing: .16em; font-weight: 900; text-transform: uppercase; }
.eyebrow::before { content: ""; width: 29px; height: 2px; background: var(--cyan); }
h1, h2, h3, h4 { font-family: "DM Sans", system-ui, sans-serif; color: var(--navy); line-height: 1.08; margin: 0 0 18px; letter-spacing: -.045em; }
h1 { font-size: clamp(42px, 5.2vw, 70px); max-width: 740px; }
h2 { font-size: clamp(32px, 3.7vw, 48px); }
h3 { font-size: 22px; }
.hero h1 em { color: var(--blue); font-style: normal; position: relative; }
.hero h1 em::after { content: ""; position: absolute; left: 3px; right: 3px; bottom: -4px; height: 5px; border-radius: 99px; background: rgba(21,168,216,.3); transform: rotate(-2deg); }
.lead { font-size: 18px; color: var(--muted); max-width: 610px; }
.hero__buttons { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
.hero__note { display: flex; align-items: center; gap: 12px; margin-top: 26px; font-size: 13px; color: var(--muted); }
.hero__note strong { color: var(--navy); }
.pulse-dot { width: 10px; height: 10px; border-radius: 50%; background: #1db783; box-shadow: 0 0 0 7px rgba(29,183,131,.12); }

.bodrum-scene { height: 520px; position: relative; perspective: 900px; }
.scene__halo { position: absolute; width: 420px; height: 420px; right: 3%; top: 9%; border-radius: 50%; background: radial-gradient(circle, rgba(21,168,216,.28), rgba(21,168,216,0) 67%); filter: blur(2px); }
.scene__sun { position: absolute; right: 23%; top: 14%; width: 80px; height: 80px; border-radius: 50%; background: #ffd878; box-shadow: 0 0 0 18px rgba(255,216,120,.12), 0 0 70px rgba(255,202,73,.42); }
.scene__sea { position: absolute; left: 4%; right: 0; bottom: 4%; height: 55%; background: linear-gradient(170deg, #55c8e4 0%, #0984bf 55%, #065987 100%); border-radius: 50% 50% 0 0 / 25% 25% 0 0; transform: rotateX(16deg) rotateZ(-2deg); box-shadow: 0 -28px 50px rgba(0,132,191,.16); overflow: hidden; }
.scene__sea::before, .scene__sea::after { content: ""; position: absolute; left: -5%; width: 110%; height: 38px; border-top: 3px solid rgba(255,255,255,.65); border-radius: 50%; animation: wave 7s ease-in-out infinite alternate; }
.scene__sea::before { top: 33%; transform: rotate(-3deg); }
.scene__sea::after { top: 56%; transform: rotate(4deg); animation-delay: -2s; opacity: .55; }
@keyframes wave { to { transform: translateX(35px) rotate(2deg); } }
.scene__hill { position: absolute; bottom: 38%; background: var(--navy); transform: rotateX(18deg) rotateZ(-2deg); }
.scene__hill--left { left: -2%; width: 74%; height: 180px; clip-path: polygon(0 100%, 0 61%, 11% 61%, 24% 32%, 34% 44%, 47% 18%, 63% 45%, 73% 37%, 100% 100%); background: linear-gradient(135deg, #0b3d63, #06233e); }
.scene__hill--right { right: -4%; width: 57%; height: 145px; clip-path: polygon(0 100%, 28% 53%, 44% 62%, 63% 22%, 100% 66%, 100% 100%); background: linear-gradient(135deg, #0c5479, #062540); }
.scene__villa { position: absolute; right: 23%; bottom: 32%; width: 135px; height: 105px; background: #f9f6ed; box-shadow: 12px 11px 0 rgba(5,29,51,.16); transform: rotateY(-7deg) rotateZ(-1deg); }
.scene__villa::before { content: ""; position: absolute; top: -37px; left: -9px; width: 154px; height: 47px; background: #d95d3b; clip-path: polygon(50% 0, 100% 100%, 0 100%); }
.scene__villa::after { content: "▦"; position: absolute; left: 21px; top: 30px; width: 43px; height: 41px; color: #087fae; font-size: 45px; line-height: 1; text-shadow: 44px 0 0 #087fae; }
.scene__pump { position: absolute; left: 17%; bottom: 29%; width: 105px; height: 184px; z-index: 2; filter: drop-shadow(16px 19px 9px rgba(4,26,48,.23)); animation: floatPump 5s ease-in-out infinite; }
.scene__pump::before { content: ""; position: absolute; left: 26px; top: 0; width: 54px; height: 72px; border-radius: 13px 13px 9px 9px; background: linear-gradient(90deg, #0b3c61, #1591c0 48%, #06223b); box-shadow: inset 0 0 0 8px rgba(255,255,255,.07); }
.scene__pump::after { content: ""; position: absolute; left: 38px; top: 64px; width: 32px; height: 107px; border-radius: 4px 4px 10px 10px; background: linear-gradient(90deg, #7897a5, #e9f2f4 32%, #9cb5bd 68%, #456779); border-bottom: 18px solid #0b527d; }
@keyframes floatPump { 50% { transform: translateY(-10px) rotate(1deg); } }
.scene__droplet { position: absolute; right: 9%; top: 36%; color: #16a8d9; font-size: 80px; line-height: 1; transform: rotate(12deg); opacity: .8; animation: droplet 3.8s ease-in-out infinite; }
@keyframes droplet { 50% { transform: translate(9px, 14px) rotate(4deg); } }

.trust-bar { position: relative; z-index: 3; margin-top: -30px; }
.trust-bar__inner { background: var(--white); border: 1px solid var(--line); box-shadow: var(--shadow); border-radius: 18px; display: grid; grid-template-columns: repeat(4,1fr); gap: 0; padding: 20px 24px; }
.trust-item { display: flex; align-items: center; gap: 12px; padding: 0 20px; border-right: 1px solid var(--line); }
.trust-item:last-child { border: 0; }
.trust-item__icon { color: var(--blue); font-size: 25px; }
.trust-item strong { display: block; font-size: 13px; color: var(--navy); }
.trust-item span { display: block; font-size: 11px; color: var(--muted); }

.section { padding: 110px 0; }
.section--ice { background: var(--ice); }
.section--sand { background: var(--sand); }
.section-head { display: flex; justify-content: space-between; align-items: end; gap: 30px; margin-bottom: 42px; }
.section-head p { max-width: 520px; margin: 0; color: var(--muted); }
.service-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.service-card { position: relative; background: var(--white); border: 1px solid var(--line); border-radius: var(--radius); padding: 29px; min-height: 260px; transition: .3s ease; overflow: hidden; }
.service-card:hover { transform: translateY(-7px); border-color: rgba(0,124,195,.35); box-shadow: var(--shadow); }
.service-card::after { content: ""; position: absolute; right: -28px; bottom: -55px; width: 130px; height: 130px; border: 22px solid rgba(0,124,195,.06); border-radius: 50%; }
.service-card__number { color: #8bbdcc; font-size: 12px; font-weight: 900; letter-spacing: .12em; }
.service-card__icon { display: grid; place-items: center; width: 52px; height: 52px; margin: 22px 0; border-radius: 15px; background: var(--ice); color: var(--blue); font-size: 22px; }
.service-card p { color: var(--muted); font-size: 14px; margin: 0; }
.service-card a { display: inline-flex; margin-top: 19px; color: var(--blue); font-size: 12px; font-weight: 900; }

.split { display: grid; grid-template-columns: .9fr 1.1fr; align-items: center; gap: 80px; }
.check-list { list-style: none; padding: 0; margin: 25px 0 0; display: grid; gap: 14px; }
.check-list li { display: flex; align-items: start; gap: 11px; color: var(--muted); }
.check-list li::before { content: "✓"; flex: 0 0 auto; display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: rgba(21,168,216,.15); color: var(--blue); font-weight: 900; }
.process { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.process-card { padding: 25px; border-top: 3px solid var(--blue); background: rgba(255,255,255,.78); border-radius: 4px 4px 18px 18px; }
.process-card b { display: block; color: var(--cyan); font-size: 12px; letter-spacing: .15em; margin-bottom: 10px; }
.process-card p { color: var(--muted); margin: 0; font-size: 14px; }
.service-illustration { min-height: 430px; position: relative; background: linear-gradient(145deg, #07365d, #0ba4d2); border-radius: 42px; overflow: hidden; box-shadow: var(--shadow); }
.service-illustration::before { content: ""; position: absolute; inset: 20px; border: 1px solid rgba(255,255,255,.2); border-radius: 32px; }
.service-illustration__circle { position: absolute; width: 320px; height: 320px; right: -56px; top: 50px; border-radius: 50%; background: rgba(255,255,255,.1); }
.service-illustration__quote { position: absolute; left: 50px; top: 44px; max-width: 260px; color: var(--white); font-size: 28px; line-height: 1.15; font-family: "DM Sans", sans-serif; font-weight: 800; }
.service-illustration__pump { position: absolute; left: 50%; bottom: 45px; transform: translateX(-50%) scale(1.4); }

.cta { padding: 64px 0; background: var(--navy); color: var(--white); position: relative; overflow: hidden; }
.cta::after { content: ""; position: absolute; width: 480px; height: 480px; right: -160px; top: -220px; border: 80px solid rgba(21,168,216,.13); border-radius: 50%; }
.cta h2 { color: var(--white); margin: 0; font-size: clamp(29px, 3.4vw, 44px); }
.cta p { color: #b9d1dd; margin: 10px 0 0; }
.cta__inner { position: relative; z-index: 1; display: flex; justify-content: space-between; align-items: center; gap: 30px; }

.post-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.post-card { border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; background: var(--white); transition: .3s ease; }
.post-card:hover { transform: translateY(-5px); box-shadow: var(--shadow); }
.post-card__visual { min-height: 168px; background: linear-gradient(145deg, #dff5f8, #8ed3e0); padding: 22px; position: relative; overflow: hidden; }
.post-card__visual::before { content: "B H"; position: absolute; right: -6px; bottom: -30px; font-size: 150px; font-weight: 900; color: rgba(255,255,255,.38); line-height: 1; }
.post-card__body { padding: 23px; }
.post-card__body time { color: var(--blue); font-size: 11px; letter-spacing: .1em; font-weight: 900; text-transform: uppercase; }
.post-card__body h3 { margin: 10px 0 8px; font-size: 20px; }
.post-card__body p { color: var(--muted); font-size: 13px; margin: 0; }

.page-hero { padding: 82px 0; background: linear-gradient(120deg, var(--ice), #fff); }
.page-hero h1 { margin-bottom: 12px; }
.breadcrumbs { color: var(--muted); font-size: 12px; margin-bottom: 19px; }
.content-wrap { max-width: 830px; margin: 0 auto; }
.content-wrap p, .content-wrap li { color: var(--muted); }
.content-wrap h2 { margin-top: 45px; font-size: 34px; }
.content-wrap h3 { margin-top: 30px; }
.post-meta { color: var(--blue); font-size: 12px; font-weight: 800; margin-bottom: 24px; }
.contact-grid { display: grid; grid-template-columns: .8fr 1.2fr; gap: 28px; }
.contact-card { border-radius: var(--radius); background: var(--navy); color: var(--white); padding: 34px; }
.contact-card h2 { color: var(--white); font-size: 32px; }
.contact-card p { color: #b8cfdb; }
.contact-links { display: grid; gap: 14px; margin-top: 28px; }
.contact-links a { display: flex; gap: 12px; color: var(--white); font-weight: 800; }
.contact-links a span { color: var(--cyan); }
.contact-form { border: 1px solid var(--line); border-radius: var(--radius); padding: 34px; background: var(--white); }
.contact-form label { display: block; color: var(--navy); font-size: 12px; font-weight: 900; margin-bottom: 7px; }
.contact-form input, .contact-form textarea { width: 100%; border: 1px solid var(--line); border-radius: 10px; padding: 13px; margin-bottom: 17px; font: inherit; }
.contact-form textarea { min-height: 130px; resize: vertical; }
.site-footer { background: #f7fafb; border-top: 1px solid var(--line); padding: 60px 0 28px; }
.footer-grid { display: grid; grid-template-columns: 1.3fr .8fr .8fr 1fr; gap: 30px; }
.footer-brand p, .footer-col a { color: var(--muted); font-size: 13px; }
.footer-col h4 { font-size: 14px; margin-bottom: 16px; }
.footer-col ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 7px; }
.footer-bottom { border-top: 1px solid var(--line); margin-top: 45px; padding-top: 22px; display: flex; justify-content: space-between; color: var(--muted); font-size: 11px; }
.floating-actions { position: fixed; z-index: 30; right: 22px; bottom: 22px; display: grid; gap: 9px; }
.floating-action { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 50%; color: var(--white); font-size: 20px; box-shadow: 0 10px 25px rgba(0,0,0,.18); transition: .25s ease; }
.floating-action:hover { color: var(--white); transform: translateY(-4px) scale(1.05); }
.floating-action--whatsapp { background: #1ab56d; }
.floating-action--phone { background: var(--blue); }
.menu-open { overflow: hidden; }

@media (max-width: 980px) {
  .main-nav { display: none; position: absolute; left: 20px; right: 20px; top: 76px; padding: 20px; background: var(--white); box-shadow: var(--shadow); border: 1px solid var(--line); border-radius: 16px; }
  .main-nav.is-open { display: block; }
  .main-nav ul { display: grid; gap: 17px; }
  .mobile-toggle { display: block; }
  .header-actions .button--ghost { display: none; }
  .hero__grid { grid-template-columns: 1fr; padding: 76px 0 30px; }
  .bodrum-scene { height: 430px; }
  .trust-bar__inner { grid-template-columns: repeat(2,1fr); gap: 20px; }
  .trust-item:nth-child(2) { border-right: 0; }
  .split { grid-template-columns: 1fr; gap: 45px; }
  .footer-grid { grid-template-columns: repeat(2,1fr); }
}
@media (max-width: 650px) {
  .container { width: min(100% - 28px, 1180px); }
  .header-row { min-height: 70px; }
  .brand img { width: 82px; height: 82px; }
  .header-actions .button { padding: 12px 14px; font-size: 11px; }
  .hero__grid { padding-top: 58px; }
  h1 { font-size: 43px; }
  .lead { font-size: 16px; }
  .bodrum-scene { height: 350px; transform: scale(.9); transform-origin: center top; margin-bottom: -30px; }
  .scene__pump { left: 8%; }
  .scene__villa { right: 14%; }
  .trust-bar { margin-top: 0; }
  .trust-bar__inner { grid-template-columns: 1fr 1fr; padding: 17px 10px; }
  .trust-item { padding: 0 9px; }
  .trust-item strong { font-size: 11px; }
  .trust-item span { font-size: 10px; }
  .section { padding: 75px 0; }
  .section-head { display: block; margin-bottom: 28px; }
  .section-head .button { margin-top: 20px; }
  .service-grid, .post-grid, .process, .contact-grid { grid-template-columns: 1fr; }
  .service-card { min-height: auto; }
  .service-illustration { min-height: 350px; }
  .service-illustration__quote { left: 32px; top: 32px; font-size: 24px; }
  .cta__inner { display: block; }
  .cta__inner .button { margin-top: 22px; }
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 28px 15px; }
  .footer-brand { grid-column: 1 / -1; }
  .footer-bottom { display: block; }
  .footer-bottom span { display: block; margin-top: 8px; }
  .floating-actions { right: 15px; bottom: 15px; }
}