/*
Theme Name: Cifci Custom
Theme URI: https://cifci.com.tr/
Author: Cifci
Version: 1.0.0
*/

:root {
  --cifci-primary: #172f38;
  --cifci-secondary: #b49a7c;
  --cifci-accent: #f6f3ee;
  --cifci-text: #1d2528;
  --cifci-border: rgba(23, 47, 56, .14);
}

.cifci-before-after { display: grid; grid-template-columns: .72fr 1.5fr; gap: 48px; padding: 90px max(32px, calc((100vw - 1280px) / 2)); background: linear-gradient(130deg, #fbf8f3, #f5f1e9); }
.cifci-before-after__intro { padding-top: 24px; }
.cifci-before-after__intro h2 { margin: 14px 0 22px; color: var(--cifci-primary); font-family: Georgia, serif; font-size: clamp(42px, 4vw, 62px); font-weight: 400; line-height: 1; }
.cifci-before-after__intro p { max-width: 410px; color: #687174; font-size: 17px; }
.cifci-before-after__intro blockquote { margin: 70px 0 0; padding-left: 18px; border-left: 2px solid var(--cifci-secondary); color: var(--cifci-secondary); font-family: Georgia, serif; font-size: 25px; font-style: italic; line-height: 1.3; }
.cifci-before-after__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.cifci-compare-card h3 { margin: 18px 0 0; color: var(--cifci-primary); font-family: Georgia, serif; font-size: 20px; font-weight: 400; text-align: center; }
.cifci-compare { position: relative; height: 410px; overflow: hidden; border-radius: 14px; background: var(--compare-before) center/cover no-repeat; box-shadow: 0 14px 28px rgba(23,47,56,.12); }
.cifci-compare__after { position: absolute; inset: 0 0 0 var(--compare-position,50%); background: var(--compare-after) center/cover no-repeat; }
.cifci-compare__line { position: absolute; inset: 0 auto 0 var(--compare-position,50%); width: 2px; background: #fff; transform: translateX(-1px); box-shadow: 0 0 0 1px rgba(23,47,56,.1); }
.cifci-compare__line button { position: absolute; top: 50%; left: 50%; width: 42px; height: 42px; border: 0; border-radius: 50%; background: #fff; color: var(--cifci-primary); transform: translate(-50%,-50%); cursor: ew-resize; }
.cifci-compare__label { position: absolute; bottom: 14px; padding: 7px 12px; border-radius: 8px; background: rgba(255,255,255,.86); color: #172f38; font-size: 10px; font-weight: 700; letter-spacing: .12em; }
.cifci-compare__before { left: 14px; }.cifci-compare__after-label { right: 14px; }
.cifci-compare__range { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: ew-resize; }
@media (max-width: 900px) {
  .cifci-before-after { grid-template-columns: 1fr; gap: 32px; padding: 64px 20px; }
  .cifci-before-after__intro blockquote { margin-top: 34px; }
  .cifci-before-after__grid { grid-template-columns: 1fr; }
  .cifci-compare { height: 430px; }
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; color: var(--cifci-text); background: #fff; font-family: Arial, sans-serif; line-height: 1.6; -webkit-font-smoothing: antialiased; }
body, button, a { -webkit-font-smoothing: antialiased; }
a { text-decoration: none; }
a, button { transition: color .25s ease, background-color .25s ease, border-color .25s ease, transform .25s ease, opacity .25s ease; }
a:focus-visible, button:focus-visible { outline: 3px solid rgba(180,154,124,.65); outline-offset: 4px; }
img { max-width: 100%; height: auto; }
.cifci-main { max-width: 1280px; margin: 0 auto; padding: 64px 32px; min-height: 360px; }
.cifci-nav ul { display: flex; align-items: center; gap: 24px; list-style: none; margin: 0; padding: 0; }
.cifci-nav li { margin: 0; }
.cifci-nav .menu-item-has-children { position: relative; }
.cifci-nav .menu-item-has-children > a { display: inline-flex; align-items: center; gap: 5px; }
.menu-arrow { font-size: 15px; line-height: 1; }
.cifci-nav .sub-menu { display: none; position: absolute; z-index: 10; top: calc(100% + 18px); left: -18px; min-width: 220px; padding: 12px 0; background: #fff; border: 1px solid var(--cifci-border); box-shadow: 0 12px 30px rgba(23, 47, 56, .12); flex-direction: column; align-items: stretch; gap: 0; }
.cifci-nav .menu-item-has-children.is-open > .sub-menu,
.cifci-nav .menu-item-has-children:focus-within > .sub-menu { display: flex; }
.cifci-nav .sub-menu li a { display: block; padding: 9px 18px; white-space: nowrap; }
.cifci-nav .sub-menu li a:hover { background: var(--cifci-accent); }
.cifci-nav .submenu-toggle { border: 0; background: transparent; color: currentColor; cursor: pointer; padding: 5px; font-size: 11px; transition: transform .25s ease; }
.cifci-nav .is-open > .submenu-toggle { transform: rotate(180deg); }
.cifci-topbar i, .cifci-appointment i { margin-right: 8px; }
.cifci-menu-backdrop { display: none; }
.cifci-menu-toggle { display: none; border: 0; background: transparent; cursor: pointer; padding: 8px; }
.cifci-menu-toggle span { display: block; width: 24px; height: 2px; margin: 5px 0; background: var(--cifci-primary); }
.screen-reader-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); }
.cifci-footer { background: var(--cifci-primary); color: #fff; }
.cifci-footer__inner { max-width: 1280px; margin: 0 auto; padding: 28px 32px; }
.cifci-card { border-bottom: 1px solid var(--cifci-border); padding: 24px 0; }
.cifci-card h1, .cifci-card h2 { margin-top: 0; }
.cifci-card a { color: var(--cifci-primary); }
.cifci-hero { position: relative; min-height: 680px; overflow: hidden; background: var(--cifci-accent); }
.cifci-slide { position: absolute; inset: 0; display: flex; align-items: center; opacity: 0; visibility: hidden; background: linear-gradient(90deg, rgba(246,243,238,.98) 0%, rgba(246,243,238,.9) 40%, rgba(246,243,238,.08) 75%), var(--slide-image) center right/cover no-repeat; transform: scale(1.03); transition: opacity .8s ease, visibility .8s ease, transform 1.2s ease; }
.cifci-slide.is-active { opacity: 1; visibility: visible; transform: scale(1); }
.cifci-slide__content { width: min(620px, 48%); margin-left: max(32px, calc((100vw - 1280px) / 2)); padding: 60px 0; }
.cifci-eyebrow { color: var(--cifci-secondary); font-size: 13px; letter-spacing: .28em; }
.cifci-slide h1 { max-width: 620px; margin: 18px 0; color: var(--cifci-primary); font-family: Georgia, serif; font-size: clamp(42px, 5vw, 76px); font-weight: 400; line-height: .98; }
.cifci-slide p { max-width: 520px; margin: 0 0 32px; font-size: 18px; color: #4d5556; }
.cifci-hero__actions { display: flex; align-items: center; flex-wrap: wrap; gap: 18px; }
.cifci-hero__actions .cifci-appointment { display: inline-flex; align-items: center; gap: 8px; }
.cifci-hero__secondary { display: inline-flex; align-items: center; gap: 12px; padding: 14px 25px; border: 1px solid var(--cifci-secondary); border-radius: 999px; color: var(--cifci-primary); text-decoration: none; }
.cifci-slider__arrow { position: absolute; z-index: 2; top: 50%; width: 56px; height: 56px; border: 0; border-radius: 50%; background: rgba(255,255,255,.78); color: var(--cifci-primary); cursor: pointer; transform: translateY(-50%); transition: background .25s ease, transform .25s ease; }
.cifci-slider__arrow:hover { background: #fff; transform: translateY(-50%) scale(1.08); }
.cifci-slider__prev { left: 32px; }.cifci-slider__next { right: 32px; }
.cifci-slider__dots { position: absolute; z-index: 2; bottom: 28px; left: 50%; display: flex; gap: 9px; transform: translateX(-50%); }
.cifci-slider__dots button { width: 42px; height: 5px; padding: 0; border: 0; border-radius: 999px; background: rgba(23,47,56,.18); cursor: pointer; transition: background .3s ease, width .3s ease; }
.cifci-slider__dots button.is-active { width: 58px; background: var(--cifci-secondary); }
.cifci-trust-strip { display: grid; grid-template-columns: repeat(4, 1fr); max-width: 1280px; margin: 0 auto; padding: 24px 32px; gap: 24px; }
.cifci-trust-item { display: flex; align-items: center; gap: 16px; padding: 8px 24px; border-right: 1px solid var(--cifci-border); }
.cifci-trust-item:last-child { border-right: 0; }
.cifci-trust-item > i { color: var(--cifci-secondary); font-size: 34px; }
.cifci-trust-item strong, .cifci-trust-item span { display: block; }
.cifci-trust-item strong { font-family: Georgia, serif; font-size: 16px; }
.cifci-trust-item span { color: #707878; font-size: 12px; line-height: 1.35; }
.cifci-about { display: grid; grid-template-columns: 1fr 1.35fr .55fr; min-height: 430px; background: var(--cifci-accent); }
.cifci-about__image { display: flex; flex-direction: column; justify-content: flex-end; gap: 12px; min-height: 430px; padding: 46px; color: #fff; background-position: center; background-size: cover; }
.cifci-about__image span { font-family: Georgia, serif; font-size: 25px; line-height: 1.25; }
.cifci-about__image small { font-size: 12px; }
.cifci-about__content { padding: 58px 64px; }
.cifci-about__content h2 { max-width: 620px; margin: 12px 0 24px; color: var(--cifci-primary); font-family: Georgia, serif; font-size: clamp(34px, 4vw, 54px); font-weight: 400; line-height: 1.05; }
.cifci-about__content p { max-width: 680px; color: #596163; }
.cifci-signature { margin-top: 26px; color: var(--cifci-secondary); font-family: Georgia, serif; font-size: 34px; font-style: italic; }
.cifci-about__role { color: #707878; font-size: 13px; }
.cifci-stats { display: flex; flex-direction: column; justify-content: center; gap: 24px; padding: 40px; border-left: 1px solid var(--cifci-border); }
.cifci-stats strong { color: var(--cifci-secondary); font-family: Georgia, serif; font-size: 46px; font-weight: 400; line-height: 1; }
.cifci-stats sup { font-size: 22px; }.cifci-stats span { display: block; margin-top: 7px; color: #707878; font-family: Arial, sans-serif; font-size: 14px; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

.cifci-header { background: #fff; color: var(--cifci-text); }
.cifci-header { position: relative; z-index: 20; }
body.cifci-menu-open .cifci-header { z-index: 100001; }
.cifci-topbar { background: var(--cifci-primary); color: #fff; font-size: 13px; }
.cifci-topbar__inner,
.cifci-header__inner { max-width: 1280px; margin: 0 auto; padding: 0 32px; }
.cifci-topbar__inner { min-height: 42px; display: flex; align-items: center; justify-content: space-between; }
.cifci-topbar__tools { display: flex; align-items: center; gap: 22px; }
.cifci-topbar__tools a, .cifci-topbar__tools button { color: #fff; background: transparent; border: 0; font-size: 16px; text-decoration: none; cursor: pointer; }
.cifci-topbar__divider { width: 1px; height: 18px; background: rgba(255,255,255,.35); }
.cifci-header__inner { min-height: 112px; display: flex; align-items: center; gap: 36px; position: relative; }
.cifci-brand { display: inline-flex; align-items: center; color: var(--cifci-primary); text-decoration: none; font-family: Georgia, serif; font-size: 29px; }
.cifci-brand img { max-width: 190px; max-height: 72px; width: auto; }
.cifci-nav { display: flex; align-items: center; gap: 20px; margin-left: auto; }
.cifci-nav a { color: var(--cifci-text); text-decoration: none; font-size: 16px; }
.cifci-nav > ul > li > a { padding: 7px 0; }
.cifci-nav a:hover { color: var(--cifci-secondary); }
.cifci-appointment { background: var(--cifci-secondary); color: #fff !important; border-radius: 999px; padding: 15px 26px; font-weight: 600; white-space: nowrap; }
.cifci-appointment:hover { background: var(--cifci-primary); transform: translateY(-2px); }

@media (max-width: 900px) {
  .cifci-hero { min-height: 650px; }
  .cifci-trust-strip { grid-template-columns: repeat(2, 1fr); padding: 24px 20px; }
  .cifci-trust-item { padding: 12px 8px; border-right: 0; }
  .cifci-about { grid-template-columns: 1fr; }
  .cifci-about__image { min-height: 420px; }
  .cifci-about__content { padding: 42px 24px; }
  .cifci-stats { display: grid; grid-template-columns: repeat(3, 1fr); padding: 28px 24px; border-left: 0; border-top: 1px solid var(--cifci-border); }
  .cifci-slide { align-items: flex-end; background: linear-gradient(0deg, rgba(246,243,238,.98) 0%, rgba(246,243,238,.88) 48%, rgba(246,243,238,.08) 100%), var(--slide-image) center/cover no-repeat; }
  .cifci-slide__content { width: auto; margin: 0; padding: 42px 24px 78px; }
  .cifci-slide h1 { font-size: clamp(38px, 11vw, 58px); }
  .cifci-slide p { font-size: 16px; }
  .cifci-slider__arrow { width: 44px; height: 44px; top: 42%; }
  .cifci-slider__prev { left: 16px; }.cifci-slider__next { right: 16px; }
  .cifci-header__inner { min-height: 82px; padding: 0 20px; }
  .cifci-topbar__inner { padding: 0 20px; }
  .cifci-topbar__tools { display: none; }
  .cifci-tagline { margin-left: auto; }
  .cifci-nav { gap: 14px; }
  .cifci-nav ul { gap: 14px; }
  .cifci-nav .sub-menu { position: static; box-shadow: none; border: 0; }
  .cifci-menu-toggle { display: block; margin-left: auto; color: var(--cifci-primary); font-size: 24px; transition: transform .25s ease; }
  .cifci-menu-toggle.is-open { transform: rotate(90deg); }
  .cifci-nav { display: block; position: fixed; z-index: 100000; top: 0; right: 0; bottom: 0; left: auto; width: min(86vw, 380px); height: 100vh; padding: 96px 28px 28px; background: #fff; box-shadow: -18px 0 45px rgba(23, 47, 56, .18); transform: translateX(105%); transition: transform .38s cubic-bezier(.22, .61, .36, 1); overflow-y: auto; filter: none; }
  .cifci-nav.is-open { transform: translateX(0); }
  .cifci-menu-backdrop { display: block; position: fixed; z-index: 99999; inset: 0; background: rgba(9, 24, 29, .28); opacity: 0; visibility: hidden; transition: opacity .3s ease, visibility .3s ease; backdrop-filter: none; }
  .cifci-menu-toggle { position: relative; z-index: 100001; }
  #wpadminbar { z-index: 100100; }
  body.admin-bar .cifci-nav { top: 32px; height: calc(100vh - 32px); }
  body.cifci-menu-open { overflow: hidden; }
  body.cifci-menu-open .cifci-menu-backdrop { opacity: 1; visibility: visible; }
  .cifci-nav > ul { display: block; }
  .cifci-nav > ul > li { border-bottom: 1px solid var(--cifci-border); padding: 10px 0; }
  .cifci-nav .sub-menu { display: none; padding: 4px 0 0 16px; }
  .cifci-nav .menu-item-has-children.is-open > .sub-menu { display: block; }
  .cifci-nav .menu-item-has-children:hover > .sub-menu { display: none; }
  .cifci-nav .menu-item-has-children.is-open:hover > .sub-menu { display: block; }
  .cifci-nav .sub-menu li a { padding: 7px 0; }
  .cifci-nav .cifci-appointment { display: inline-block; margin-top: 14px; }
}