/* Pandora VIP Sakarya - Premium Dark Theme (Sparelax dark integrated)
   Loaded after existing theme CSS to avoid large refactors.
*/

:root{
  /* Base surfaces (dark) */
  --bg: #000000;
  --surface: #111111;
  --surface-2: #232323;
  --surface-3: #1A1A1A;

  /* Text (light) */
  --text: #F2EFE8;
  --text-muted: rgba(242, 239, 232, .72);
  --text-soft: rgba(242, 239, 232, .86);

  /* Gold accents */
  --gold: #D6BE8B;
  --gold-2: #C7AE7A;
  --gold-3: #B79C63;

  /* Borders + shadows */
  --border: rgba(242, 239, 232, .12);
  --border-2: rgba(242, 239, 232, .08);
  --shadow: 0 12px 28px rgba(0,0,0,.55);

  /* States */
  --success: #2DB27D;
  --warning: #D9A441;
  --danger: #D45454;

  /* Focus */
  --focus-ring: 0 0 0 .22rem rgba(214, 190, 139, .30);

  /* ------------------------------------------------------------------
     Sparelax variable overrides (critical for readability on dark UI)
     Sparelax styles use these vars for headings/body/link colors.
  ------------------------------------------------------------------ */
  --headings-color: var(--text);
  --text-color: var(--text-soft);
  --text-color2: var(--text-muted);
  --link-color: var(--gold);
  --link-hover-color: var(--gold-2);

  /* Some Sparelax blocks reference these legacy vars (ensure they exist) */
  --notech-black: var(--text);
  --notech-gray: var(--text-muted);
  --notech-base: var(--gold);

  /* Accent color mapping: make Sparelax accents match our gold identity */
  --theme-color1: var(--gold-2);
  --theme-color1-rgb: 199, 174, 122;
  --bg-theme-color1: var(--theme-color1);
  --theme-color2: #0B0B0D;
  --theme-color2-rgb: 11, 11, 13;
  --bg-theme-color2: var(--theme-color2);
}

html, body{
  background: var(--bg);
  color: var(--text);
}

/* Global typography tweaks */
body{
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Links */
a{

  font-family: var(--title-font);
  text-decoration: none;
  display: inline-block;
  color: inherit;
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
}
a:hover{
  color: var(--gold-2);
}

/* Selection */
::selection{
  background: rgba(214, 190, 139, .25);
  color: var(--text);
}

/* Helpers */
.text-gold{ color: var(--gold) !important; }
.border-gold{ border-color: var(--gold-2) !important; }
.card-dark{
  background: var(--surface);
  border: 1px solid var(--border);
  box-shadow: var(--shadow);
}
.input-dark{
  background: var(--surface-2) !important;
  border: 1px solid var(--border) !important;
  color: var(--text) !important;
}
.link-gold{
  color: var(--gold) !important;
  text-decoration-color: rgba(214, 190, 139, .35);
}
.link-gold:hover{
  color: var(--gold-2) !important;
  text-decoration: underline;
  text-underline-offset: 4px;
}

/* Buttons */
.btn-gold,
.btn.btn-gold{
  background: linear-gradient(180deg, var(--gold), var(--gold-2));
  color: #161411 !important;
  border: 1px solid var(--gold-3);
  box-shadow: 0 10px 26px rgba(214, 190, 139, .18);
}
.btn-gold:hover,
.btn.btn-gold:hover{
  background: linear-gradient(180deg, var(--gold-2), var(--gold-3));
  color: #0B0B0D !important;
}
.btn-outline-gold,
.btn.btn-outline-gold{
  background: transparent;
  color: var(--gold) !important;
  border: 1px solid rgba(214, 190, 139, .55);
}
.btn-outline-gold:hover,
.btn.btn-outline-gold:hover{
  background: rgba(214, 190, 139, .10);
  border-color: rgba(214, 190, 139, .75);
}

/* Theme existing button style (.btn-icon) -> premium light */
.btn.btn-icon{
  background: rgba(214, 190, 139, .12);
  border: 1px solid rgba(214, 190, 139, .55);
  color: var(--text) !important;
}
.btn.btn-icon span{
  color: var(--gold) !important;
}
.btn.btn-icon:hover{
  background: rgba(214, 190, 139, .16);
  border-color: rgba(214, 190, 139, .65);
}

/* Header CTA (İletişim) should be light on dark header */
header .header-button .btn.btn-icon{
  background: rgba(255, 255, 255, .92) !important;
  border: 1px solid rgba(214, 190, 139, .35) !important;
  color: #161411 !important;
  box-shadow: 0 12px 26px rgba(0,0,0,.22);
}
header .header-button .btn.btn-icon span{
  color: var(--gold-3) !important;
}
header .header-button .btn.btn-icon:hover{
  background: #ffffff !important;
  border-color: rgba(214, 190, 139, .55) !important;
}

/* Focus ring */
button:focus-visible,
a:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible{
  outline: none !important;
  box-shadow: var(--focus-ring) !important;
}

/* Surfaces used across templates */
.gray-bg{
  background: var(--surface-3) !important;
}
.breadcrumb-bg{
  background: var(--surface-2) !important;
}
.breadcrumb,
.breadcrumb .breadcrumb-item,
.breadcrumb .breadcrumb-item a{
  color: var(--text-muted) !important;
}
.breadcrumb .breadcrumb-item.active{
  color: var(--text) !important;
}

/* ------------------------------------------------------------------
   Breadcrumb bar (site-wide)
   Replace Sparelax "page-title" hero (175px padding + bg image) with a thin
   page navigation bar that fits the premium dark design.
------------------------------------------------------------------ */
section.page-title{
  padding: 18px 0 !important;
  background: radial-gradient(900px 240px at 15% 0%, rgba(214, 190, 139, .10), transparent 60%),
              var(--surface-2) !important;
  background-image: none !important; /* prevent inline background-image */
  border-bottom: 1px solid rgba(214, 190, 139, .14);
}
section.page-title:before{
  display: none !important; /* remove dark overlay used by hero version */
}
section.page-title .title{
  display: none !important; /* ensure no big page heading is shown */
}
section.page-title .title-outer{
  text-align: left !important;
  margin: 0 !important;
}
section.page-title .page-breadcrumb{
  margin: 0 !important;
  padding: 0 !important;
}
section.page-title nav{
  display: flex;
  justify-content: center;
}
section.page-title .auto-container{
  display: flex;
  justify-content: center;
}
section.page-title .page-breadcrumb li{
  color: var(--text-muted) !important;
  font-size: 13px;
  font-weight: 600;
}
section.page-title .page-breadcrumb li:after{
  color: rgba(242, 239, 232, .45) !important;
  top: 0 !important;
}
section.page-title .page-breadcrumb li a{
  color: var(--text-muted) !important;
  font-weight: 700;
}
section.page-title .page-breadcrumb li a:hover{
  color: var(--gold) !important;
}
section.page-title .page-breadcrumb li[aria-current="page"],
section.page-title .page-breadcrumb li:last-child{
  color: var(--text) !important;
  font-weight: 800;
}

/* Header / nav */
.header-menu-area{
  /* Dark header on premium-light site */
  background: rgba(11, 11, 13, .92);
  border-bottom: 1px solid rgba(214, 190, 139, .18);
  backdrop-filter: blur(10px);
}
.header__menu ul li a{
  color: rgba(242, 239, 232, .92) !important;
}
.header__menu ul li a:hover{
  color: var(--gold) !important;
}
.submenu{
  background: rgba(18, 18, 22, .98) !important;
  border: 1px solid rgba(214, 190, 139, .18);
}
.submenu li a{
  color: rgba(242, 239, 232, .86) !important;
}
.submenu li a:hover{
  color: var(--gold) !important;
}

/* Sparelax header dropdowns use `.sub-menu` / `.sub-sub-menu` and default to white.
   Force them to match our dark theme so text is always readable. */
.header__main .main-menu ul li .sub-menu,
.header__main .main-menu ul li .sub-menu li .sub-sub-menu{
  background: rgba(18, 18, 22, .98) !important;
  border-top-color: rgba(214, 190, 139, .75) !important;
  box-shadow: 0 18px 45px rgba(0,0,0,.55) !important;
}
.header__main .main-menu ul li .sub-menu li:not(:last-child),
.header__main .main-menu ul li .sub-menu li .sub-sub-menu li:not(:last-child){
  border-bottom-color: rgba(242, 239, 232, .10) !important;
}
.header__main .main-menu ul li .sub-menu li a,
.header__main .main-menu ul li .sub-menu li .sub-sub-menu li a{
  color: rgba(242, 239, 232, .90) !important;
}
.header__main .main-menu ul li .sub-menu li a.arrow:after,
.header__main .main-menu ul li .sub-menu li a i{
  color: rgba(242, 239, 232, .70) !important;
}
.header__main .main-menu ul li .sub-menu li:hover > a,
.header__main .main-menu ul li .sub-menu li .sub-sub-menu li:hover > a{
  background: rgba(214, 190, 139, .10) !important;
  color: var(--gold) !important;
}
.header__main .main-menu ul li .sub-menu li:hover > a.arrow:after,
.header__main .main-menu ul li .sub-menu li:hover > a i{
  color: var(--gold) !important;
}

/* About: make it a clean 50/50 split with a larger image (no small card feel) */
#about.about-section .image-column .inner-column{
  height: 100%;
}
#about.about-section .image-column .image-box{
  height: 100%;
  min-height: 520px;
  overflow: hidden;
  border-radius: 30px;
}
#about.about-section .image-column .image-box img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Marquee text scroller: make it readable/brand-aligned on dark background */
.marquee-area{
  background: transparent;
}
.marquee-area .marquee__item svg{
  color: var(--gold-2);
}
.marquee-area .marquee__item h2{
  -webkit-text-stroke: 1px rgba(214, 190, 139, .55) !important;
}
.marquee-area .marquee__item.item-bold h2.solid{
  color: var(--theme-color2);
}
.marquee-area .marquee__item h2:hover{
  color: var(--gold) !important;
}

/* ------------------------------------------------------------------
   Offcanvas / sidebar menu (Sparelax) - force premium dark panel
------------------------------------------------------------------ */
.sidebar-area.offcanvas{
  background: #0B0B0D !important;
  color: rgba(242, 239, 232, .92) !important;
  border-left: 1px solid rgba(214, 190, 139, .18);
}
.sidebar-area.offcanvas .offcanvas-header{
  background: #0B0B0D !important;
  border-bottom: 1px solid rgba(214, 190, 139, .12);
}
.sidebar-area.offcanvas .logo img{
  filter: drop-shadow(0 10px 22px rgba(0,0,0,.35));
}
.sidebar-area.offcanvas .btn-close{
  opacity: 1 !important;
  color: rgba(242, 239, 232, .92) !important;
  background: rgba(214, 190, 139, .12) !important;
  border: 1px solid rgba(214, 190, 139, .35) !important;
}
.sidebar-area.offcanvas .btn-close i{
  color: rgba(242, 239, 232, .92) !important;
}
.sidebar-area.offcanvas .offcanvas-body{
  background: #0B0B0D !important;
}

/* Meanmenu (mobile menu inside offcanvas)
   Sparelax sets `.sidebar__body .mean-nav` background to `var(--headings-color)`.
   Our dark theme maps `--headings-color` to light text, making the menu panel white.
   Force a dark surface + readable link colors ONLY inside the offcanvas. */
.sidebar-area.offcanvas .sidebar__body .mean-container .mean-nav{
  background: #0B0B0D !important;
}
.sidebar-area.offcanvas .sidebar__body .mean-container .mean-nav ul li a{
  background: transparent !important;
  color: rgba(242, 239, 232, .92) !important;
  border-top-color: rgba(242, 239, 232, .14) !important;
}
.sidebar-area.offcanvas .sidebar__body .mean-container .mean-nav ul li li a{
  color: rgba(242, 239, 232, .78) !important;
}
.sidebar-area.offcanvas .sidebar__body .mean-container .mean-nav ul li a:hover{
  background: rgba(214, 190, 139, .10) !important;
  color: var(--gold) !important;
}
.sidebar-area.offcanvas .sidebar__body .mean-container .mean-nav ul li a.mean-expand{
  background: rgba(214, 190, 139, .18) !important;
  border: 1px solid rgba(214, 190, 139, .45) !important;
  color: rgba(242, 239, 232, .92) !important;
}
.sidebar-area.offcanvas .sidebar__body .mean-container .mean-nav ul li a.mean-expand:hover{
  background: rgba(214, 190, 139, .26) !important;
  color: rgba(242, 239, 232, .98) !important;
}
.sidebar-area.offcanvas .sidebar__contact-info h5,
.sidebar-area.offcanvas .sidebar__contact-info,
.sidebar-area.offcanvas .sidebar__contact-info a,
.sidebar-area.offcanvas .sidebar__contact-info li{
  color: rgba(242, 239, 232, .92) !important;
}
.sidebar-area.offcanvas .sidebar__contact-info i{
  color: var(--gold-2) !important;
}
.sidebar-area.offcanvas .sidebar__contact-info a:hover{
  color: var(--gold) !important;
}

/* Backdrop should be dark, not gray */
.offcanvas-backdrop.show{
  opacity: .72 !important;
  background: #000 !important;
}

/* Footer (dark background, light text)
   If footer has bg-image, allow Sparelax `data-background` image to show. */
.footer-two-area:not(.bg-image),
.footer-top.primary-bg{
  background: #0B0B0D !important;
  color: rgba(242, 239, 232, .92) !important;
}
.footer-two-area.bg-image{
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  color: rgba(242, 239, 232, .92) !important;
}
.footer-bottom{
  border-top: 1px solid rgba(214, 190, 139, .14);
  background: #0B0B0D !important;
}
.footer-title h3,
.footer-contact-info h6,
.footer-emailing,
.footer-emailing a,
.footer-menu a,
.footer-copyright,
.footer-copyright p{
  color: rgba(242, 239, 232, .92) !important;
}
.footer-emailing i,
.footer-contact-info i{
  color: var(--gold-2) !important;
}
.footer-menu a:hover,
.footer-emailing a:hover{
  color: var(--gold) !important;
}

/* Cards / boxes (contact page etc.) */
.contact,
.form-wrapper{
  background: var(--surface);
  border: 1px solid var(--border);
  box-shadow: var(--shadow);
}
.contact i{
  color: var(--gold);
}

/* Contact page: make the form area look premium */
.contact-area{
  /* soften the "map" background section */
  background-color: var(--surface-2);
}

.contact-area .contact{
  border-radius: 18px;
  padding: 28px 22px;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.contact-area .contact:hover{
  transform: translateY(-2px);
  border-color: rgba(214, 190, 139, .28);
  box-shadow: 0 16px 32px rgba(22, 20, 17, .12);
}
.contact-area .contact h3{
  color: var(--text);
  letter-spacing: .2px;
}
.contact-area .contact p,
.contact-area .contact a{
  color: var(--text-muted) !important;
}
.contact-area .contact a:hover{
  color: var(--gold-2) !important;
}

.contact-form-area{
  background: radial-gradient(1200px 400px at 20% 0%, rgba(214, 190, 139, .12), transparent 60%),
              radial-gradient(1000px 360px at 90% 10%, rgba(214, 190, 139, .08), transparent 55%),
              var(--surface-3) !important;
}
.contact-form-area .form-wrapper{
  border-radius: 22px;
  padding: 42px 34px;
  background: rgba(255,255,255,.86);
  backdrop-filter: blur(10px);
}
.contact-form-area .section-title p{
  color: var(--text-muted);
}
.contact-form-area .section-title p span{
  background: rgba(214, 190, 139, .55);
}
.contact-form-area .section-title h1{
  color: var(--text);
}

.contact-form-area .form-box{
  border-radius: 16px;
}
.contact-form-area .form-box input,
.contact-form-area .form-box textarea{
  background: #fff !important;
  border: 1px solid rgba(22, 20, 17, .10) !important;
  border-radius: 16px !important;
  padding: 14px 16px;
  box-shadow: 0 10px 22px rgba(22, 20, 17, .06);
  transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}
.contact-form-area .form-box textarea{
  min-height: 180px;
  resize: vertical;
}
.contact-form-area .form-box input:focus,
.contact-form-area .form-box textarea:focus{
  border-color: rgba(214, 190, 139, .65) !important;
  box-shadow: 0 0 0 .22rem rgba(214, 190, 139, .22), 0 14px 28px rgba(22, 20, 17, .08) !important;
}

.contact-form-area .contact-btn .btn{
  border-radius: 999px;
  padding: 12px 26px;
  font-weight: 700;
  letter-spacing: .2px;
}

/* Note: page titles are rendered inside content; breadcrumb bar is nav-only. */

/* Home: Services module (mp_service) - premium minimal */
.premium-services{
  background: radial-gradient(1100px 420px at 10% 0%, rgba(214, 190, 139, .10), transparent 60%),
              radial-gradient(900px 360px at 95% 10%, rgba(214, 190, 139, .06), transparent 55%),
              var(--surface-2);
}
.premium-services__bg{
  opacity: .10;
  filter: grayscale(1);
  pointer-events: none;
}
.premium-services__header .section-icon{
  opacity: .0; /* keep structure, hide noisy icon */
}
.premium-services__header .section-line img{
  opacity: .25;
  filter: grayscale(1);
}
.premium-services__title{
  color: var(--text);
  letter-spacing: -0.3px;
}

.premium-services__card{
  border-radius: 20px;
  border: 1px solid rgba(22, 20, 17, .10);
  background: rgba(255,255,255,.88);
  backdrop-filter: blur(10px);
  box-shadow: 0 14px 30px rgba(22, 20, 17, .10);
  overflow: hidden;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.premium-services__card:hover{
  transform: translateY(-3px);
  border-color: rgba(214, 190, 139, .40);
  box-shadow: 0 18px 40px rgba(22, 20, 17, .14);
}

.premium-services .service-thumb{
  position: relative;
}
.premium-services .h4services-tag,
.premium-services__tag{
  display: none !important;
}

/* Sparelax services: allow using images as icons */
.service-section .service-block .icon-box{
  display: grid;
  place-items: center;
  margin-bottom: 18px;
}
.service-section .service-block .icon-box .sparelax-service-thumb{
  width: 84px;
  height: 84px;
  border-radius: 999px;
  object-fit: cover;
  border: 1px solid rgba(214, 190, 139, .28);
  box-shadow: 0 14px 26px rgba(0,0,0,.40);
}
.premium-services .service-thumb img{
  aspect-ratio: 4/3;
  object-fit: cover;
  transform: scale(1.001);
}

/* Services list (`views/web/service/list.twig`) - keep thumbnails consistent */
.service-block-two .inner-box .image-box .image{
  /* Use an explicit (responsive) height so img height:100% actually works.
     This avoids "tall/short" cards when images have different intrinsic sizes. */
  height: clamp(200px, 18vw, 280px);
  overflow: hidden;
}
.service-block-two .inner-box .image-box .image > a{
  display: block;
  width: 100%;
  height: 100%;
}
.service-block-two .inner-box .image-box .image img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Service detail sidebar (`views/web/service/detail.twig`) - match premium dark theme */
.services-details .sidebar-service-list li a{
  background: rgba(255,255,255,.06) !important;
  border: 1px solid rgba(214, 190, 139, .20);
  color: rgba(242, 239, 232, .90) !important;
  box-shadow: 0 14px 34px rgba(0,0,0,.35);
}
.services-details .sidebar-service-list li a span{
  color: inherit !important;
}
.services-details .sidebar-service-list li a i{
  background: rgba(214, 190, 139, .12) !important;
  border: 1px solid rgba(214, 190, 139, .25);
  color: rgba(242, 239, 232, .92) !important;
}
.services-details .sidebar-service-list li a:hover{
  background: rgba(214, 190, 139, .10) !important;
  border-color: rgba(214, 190, 139, .45);
  color: var(--gold) !important;
}
.services-details .sidebar-service-list li a:hover i{
  background: linear-gradient(180deg, var(--gold), var(--gold-2)) !important;
  border-color: rgba(214, 190, 139, .75);
  color: #161411 !important;
}
.services-details .sidebar-service-list li.current a{
  background: rgba(214, 190, 139, .12) !important;
  border-color: rgba(214, 190, 139, .55);
  color: var(--gold) !important;
}
.services-details .sidebar-service-list li.current a i{
  background: linear-gradient(180deg, var(--gold), var(--gold-2)) !important;
  border-color: rgba(214, 190, 139, .75);
  color: #161411 !important;
}

.services-details .service-details-help{
  background: radial-gradient(900px 300px at 20% 0%, rgba(214, 190, 139, .16), transparent 60%),
              var(--surface-2) !important;
  border: 1px solid rgba(214, 190, 139, .20);
  box-shadow: 0 18px 45px rgba(0,0,0,.45);
}
.services-details .help-title{
  color: rgba(242, 239, 232, .96) !important;
}
.services-details .help-contact p{
  color: rgba(242, 239, 232, .72) !important;
  opacity: 1 !important;
}
.services-details .help-contact a{
  color: rgba(242, 239, 232, .96) !important;
}
.services-details .help-contact a:hover{
  color: var(--gold) !important;
}
.services-details .help-icon{
  background: rgba(214, 190, 139, .14) !important;
  border: 1px solid rgba(214, 190, 139, .35);
  color: rgba(242, 239, 232, .96) !important;
}
.services-details .help-icon:hover{
  background: linear-gradient(180deg, var(--gold), var(--gold-2)) !important;
  border-color: rgba(214, 190, 139, .75);
  color: #161411 !important;
}

/* "İletişime Geç" button inside sidebar */
.services-details .service-sidebar-single-btn .btn-two{
  background: linear-gradient(180deg, var(--gold), var(--gold-2)) !important;
  border: 1px solid rgba(214, 190, 139, .75) !important;
  color: #161411 !important;
}
.services-details .service-sidebar-single-btn .btn-two:hover{
  background: linear-gradient(180deg, var(--gold-2), var(--gold-3)) !important;
  color: #0B0B0D !important;
}

/* Service detail content - premium card + more readable typography */
.services-details .services-details__content{
  background: radial-gradient(1100px 380px at 10% 0%, rgba(214, 190, 139, .10), transparent 60%),
              rgba(255,255,255,.04);
  border: 1px solid rgba(214, 190, 139, .16);
  border-radius: 22px;
  padding: 28px 26px;
  box-shadow: 0 22px 55px rgba(0,0,0,.45);
}
.services-details .services-details__content > img.w-100{
  border-radius: 18px;
  border: 1px solid rgba(214, 190, 139, .18);
  box-shadow: 0 18px 45px rgba(0,0,0,.45);
}
.services-details .services-details__content h3{
  font-family: "Unbounded", "Montserrat", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  font-weight: 800;
  letter-spacing: -.3px;
  color: rgba(242, 239, 232, .96);
}
.services-details .services-details__content .post-content{
  font-family: "Montserrat", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  font-size: 16.5px;
  line-height: 1.78;
  color: rgba(242, 239, 232, .86);
}
.services-details .services-details__content .post-content p{
  margin-bottom: 14px;
}
.services-details .services-details__content .post-content strong,
.services-details .services-details__content .post-content b{
  color: rgba(242, 239, 232, .96);
  font-weight: 800;
}
.services-details .services-details__content .post-content em{
  color: rgba(242, 239, 232, .90);
}
.services-details .services-details__content .post-content a{
  color: var(--gold) !important;
  text-decoration-color: rgba(214, 190, 139, .35);
  text-underline-offset: 4px;
}
.services-details .services-details__content .post-content a:hover{
  color: var(--gold-2) !important;
  text-decoration: underline;
}
.services-details .services-details__content .post-content ul,
.services-details .services-details__content .post-content ol{
  padding-left: 18px;
  margin: 12px 0 16px;
}
.services-details .services-details__content .post-content li{
  margin: 6px 0;
}

/* Pagination (web) - match premium dark theme */
.page-wrapper .pagination{
  gap: 8px;
  margin: 0;
}
.page-wrapper .pagination .page-item{
  margin: 0;
}
.page-wrapper .pagination .page-link{
  border-radius: 12px !important;
  padding: 10px 14px;
  min-width: 44px;
  text-align: center;
  font-weight: 800;
  letter-spacing: .2px;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(214, 190, 139, .22);
  color: rgba(242, 239, 232, .88);
  box-shadow: 0 10px 24px rgba(0,0,0,.35);
}
.page-wrapper .pagination .page-link:hover{
  background: rgba(214, 190, 139, .14);
  border-color: rgba(214, 190, 139, .45);
  color: var(--gold);
}
.page-wrapper .pagination .page-item.active .page-link{
  background: linear-gradient(180deg, var(--gold), var(--gold-2));
  border-color: rgba(214, 190, 139, .75);
  color: #161411;
  box-shadow: 0 14px 30px rgba(214, 190, 139, .18);
}
.page-wrapper .pagination .page-item.disabled .page-link{
  opacity: .45;
  background: rgba(255,255,255,.04);
  border-color: rgba(214, 190, 139, .14);
  box-shadow: none;
  pointer-events: none;
}

/* Service categories tabs (Hizmetlerimiz) */
.service-category-tabs .nav{
  scrollbar-width: thin;
  gap: 10px;
  padding-bottom: 6px;
}
.service-category-tabs .nav-link{
  white-space: nowrap;
  border-radius: 999px !important;
  padding: 10px 16px;
  font-weight: 800;
  letter-spacing: .15px;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(214, 190, 139, .22);
  color: rgba(242, 239, 232, .88);
}
.service-category-tabs .nav-link:hover{
  background: rgba(214, 190, 139, .12);
  border-color: rgba(214, 190, 139, .45);
  color: var(--gold);
}
.service-category-tabs .nav-link.active{
  background: linear-gradient(180deg, var(--gold), var(--gold-2));
  border-color: rgba(214, 190, 139, .75);
  color: #161411;
}

/* Homepage banner slider (banner-two__slider) - add nav buttons + video cover */
.banner-two-area{
  /* Keep header + banner within a single viewport height */
  height: calc(100svh - var(--header-h, 90px));
  max-height: calc(100svh - var(--header-h, 90px));
  position: relative;
  overflow: hidden;
}
/* Fallback for browsers without svh */
@supports not (height: 100svh) {
  .banner-two-area{
    height: calc(100vh - var(--header-h, 90px));
    max-height: calc(100vh - var(--header-h, 90px));
  }
}

.banner-two__slider,
.banner-two__slider .swiper-wrapper,
.banner-two__slider .swiper-slide{
  height: 100%;
}
.banner-two__slider .swiper-slide{
  position: relative;
}
.banner-two__slider .swiper-slide > .container{
  height: 100%;
}

/* Banner premium overlay (image + video) for readability */
.banner-two__slider .slide-bg{
  position: absolute;
  inset: 0;
}
.banner-two__slider .slide-bg::before{
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(900px 420px at 18% 18%, rgba(214, 190, 139, .10), transparent 55%),
    radial-gradient(700px 360px at 82% 12%, rgba(214, 190, 139, .07), transparent 60%),
    linear-gradient(180deg, rgba(0,0,0,.18) 0%, rgba(11,11,13,.56) 78%, rgba(11,11,13,.72) 100%);
  z-index: 1;
  pointer-events: none;
}
.banner-two__content{
  /* Override Sparelax huge paddings so content fits in (header + banner) viewport */
  height: 100%;
  padding-top: 0 !important;
  padding-bottom: clamp(70px, 10vh, 140px) !important;
  display: flex;
  flex-direction: column;
  align-items: flex-start; /* match Sparelax index-2 banner layout */
  justify-content: flex-end;
  text-align: left;
}
.banner-two__content{
  position: relative;
  z-index: 2; /* above slide-bg overlay */
  max-width: 760px;
  /* remove "glass panel" look (it felt heavy/ugly). Keep clean hero copy. */
  padding-left: 0;
  padding-right: 0;
  padding-top: 0 !important;
  border-radius: 0;
  background: transparent;
  border: none;
  backdrop-filter: none;
}
.banner-two__content .sub-title{
  font-weight: 600;
  opacity: .95;
  letter-spacing: .2px;
  text-shadow: 0 10px 28px rgba(0,0,0,.55);
  font-size: 22px;
}
.banner-two__content .btn-two-light{
  align-self: flex-start;
}
.banner-two__content .title{
  line-height: 1.05;
  letter-spacing: -0.6px;
  text-shadow: 0 16px 40px rgba(0,0,0,.65);
}
.banner-two__content .text{
  max-width: 720px;
  text-shadow: 0 10px 26px rgba(0,0,0,.55);
  font-size: 19px;
  line-height: 1.75;
}

.banner-two__slider .slide-bg.is-video{
  background-color: #000;
}
.banner-two__slider .slide-bg.is-video .banner-slide-video{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
}
.banner-two__arry-prev,
.banner-two__arry-next{
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 3;
  width: 46px;
  height: 46px;
  border-radius: 999px;
  border: 1px solid rgba(214, 190, 139, .28);
  background: rgba(11, 11, 13, .55);
  color: rgba(242, 239, 232, .92);
  display: grid;
  place-items: center;
  backdrop-filter: blur(10px);
}
.banner-two__arry-prev{ left: 24px; }
.banner-two__arry-next{ right: 24px; }
.banner-two__arry-prev:hover,
.banner-two__arry-next:hover{
  background: rgba(214, 190, 139, .16);
  border-color: rgba(214, 190, 139, .55);
  color: var(--gold);
}

/* Banner pagination bullets - gold */
.banner-two__pagination{
  z-index: 3;
}
.banner-two__pagination .swiper-pagination-bullet{
  width: 12px;
  height: 12px;
  opacity: 1;
  background: rgba(242, 239, 232, .32);
  border: 1px solid rgba(214, 190, 139, .22);
  transition: transform .18s ease, background .18s ease, border-color .18s ease;
}
.banner-two__pagination .swiper-pagination-bullet-active{
  background: var(--gold);
  border-color: rgba(214, 190, 139, .75);
  transform: scale(1.05);
}

@media (max-width: 767px){
  .banner-two__content{
    padding-left: 0;
    padding-right: 0;
    border-radius: 0;
    max-width: 100%;
  }
  .banner-two__content .sub-title{
    font-size: 20px;
  }
  .banner-two__content .text{
    font-size: 16.5px;
    line-height: 1.7;
  }
  .banner-two__arry-prev,
  .banner-two__arry-next{
    display: none;
  }
}

/* News cards (`mp_news` / blog-section-two) - force equal image sizes */
.blog-block-two .inner-box .image{
  /* fixed visual size regardless of original image dimensions */
  aspect-ratio: 4 / 3;
}
.blog-block-two .inner-box .image img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Home Services slider (`mp_service` / service-section-two): remove big mask cutout, add small notch + badge */
.service-section-two .service-block-two{
  --svc-card-bg: #2b2b2b;
  --svc-card-bg-2: #242424;
  --svc-text: rgba(242, 239, 232, .92);
  --svc-text-muted: rgba(242, 239, 232, .68);
  --svc-badge-bg: #E9A6A1;
}
.service-section-two .service-block-two .inner-box{
  background: linear-gradient(180deg, var(--svc-card-bg), var(--svc-card-bg-2));
  border-radius: 32px;
  padding: 26px 26px 22px;
  border: 1px solid rgba(255,255,255,.08);
  box-shadow: 0 18px 50px rgba(0,0,0,.45);
  overflow: hidden;
}
.service-section-two .service-block-two .image-box{
  margin-bottom: 18px;
}
/* disable Sparelax masking that creates the "big dent" */
.service-section-two .service-block-two .inner-box .image-box .image{
  -webkit-mask-image: none !important;
  mask-image: none !important;
  -webkit-mask-size: auto !important;
  mask-size: auto !important;
  -webkit-mask-position: initial !important;
  mask-position: initial !important;
}
.service-section-two .service-block-two .inner-box .image-box .icon{
  display: none !important; /* old template badge */
}
.service-section-two .service-block-two .service-media{
  position: relative;
  display: block;
  border-radius: 26px;
  overflow: hidden;
}
.service-section-two .service-block-two .service-img{
  width: 100%;
  height: 230px;
  object-fit: cover;
  display: block;
  border-radius: 26px;
}
/* NOTCH: only top-right, sized to the badge (no giant cutout) */
.service-section-two .service-block-two .service-media::after{
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  width: 78px;
  height: 78px;
  background: var(--svc-card-bg);
  border-bottom-left-radius: 46px;
  z-index: 2;
}
.service-section-two .service-block-two .service-badge{
  position: absolute;
  top: 12px;
  right: 12px;
  width: 56px;
  height: 56px;
  border-radius: 999px;
  background: var(--svc-badge-bg);
  border: 4px solid #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 3;
}
.service-section-two .service-block-two .service-badge-icon{
  width: 26px;
  height: 26px;
  object-fit: contain;
  display: block;
}
.service-section-two .service-block-two .service-badge-icon.is-svg{
  display: grid;
  place-items: center;
}
.service-section-two .service-block-two .service-badge-icon.is-svg svg{
  width: 26px;
  height: 26px;
  display: block;
}
.service-section-two .service-block-two .service-badge-icon.is-svg svg *{
  fill: #ffffff !important;
  stroke: #ffffff !important;
}
.service-section-two .service-block-two .content{
  max-width: none;
  margin-top: 18px;
  text-align: center;
  position: relative;
  z-index: 1;
}
.service-section-two .service-block-two .content .title a{
  color: var(--svc-text) !important;
}
.service-section-two .service-block-two .content .text{
  color: var(--svc-text-muted);
}
/* keep decorative bottom shape but subtle */
.service-section-two .service-block-two .inner-box .shape{
  z-index: 0;
  opacity: .18;
  pointer-events: none;
  left: 0;
  bottom: 0;
}

@media (max-width: 767px){
  .service-section-two .service-block-two .inner-box{
    padding: 20px 20px 18px;
    border-radius: 28px;
  }
  .service-section-two .service-block-two .service-img{
    height: 195px;
    border-radius: 22px;
  }
  .service-section-two .service-block-two .service-media{
    border-radius: 22px;
  }
  .service-section-two .service-block-two .service-media::after{
    width: 68px;
    height: 68px;
    border-bottom-left-radius: 40px;
  }
  .service-section-two .service-block-two .service-badge{
    width: 48px;
    height: 48px;
    border-width: 4px;
    top: 10px;
    right: 10px;
  }
  .service-section-two .service-block-two .service-badge-icon,
  .service-section-two .service-block-two .service-badge-icon.is-svg svg{
    width: 22px;
    height: 22px;
  }
}

/* Content detail (`views/web/contents/content.twig`) - premium blog details + "Diğer Yazılar" */
.blog-details .blog-details__img img{
  width: 100%;
  border-radius: 22px;
  border: 1px solid rgba(214, 190, 139, .18);
  box-shadow: 0 18px 46px rgba(0,0,0,.55);
}
.blog-details .blog-details__left{
  background: radial-gradient(800px 300px at 80% 10%, rgba(214, 190, 139, .08), transparent 60%),
              var(--surface);
  border: 1px solid var(--border);
  box-shadow: var(--shadow);
  border-radius: 22px;
  padding: 22px;
}
.blog-details .blog-details__content{
  padding-top: 18px;
}
.blog-details .blog-details__meta{
  gap: 14px;
}
.blog-details .blog-details__meta li a{
  color: rgba(242, 239, 232, .82) !important;
}
.blog-details .blog-details__meta li i{
  color: var(--gold-2);
}
.blog-details .blog-details__title{
  font-family: 'Unbounded', sans-serif;
  font-weight: 650;
  letter-spacing: -0.4px;
  color: var(--text);
  margin-top: 10px;
}
.blog-details .post-content{
  font-family: 'Montserrat', sans-serif;
  font-size: 16.5px;
  line-height: 1.82;
  color: var(--text-soft);
}
.blog-details .post-content p{
  margin-bottom: 14px;
}
.blog-details .post-content a{
  color: var(--gold) !important;
  text-decoration-color: rgba(214, 190, 139, .35);
}
.blog-details .post-content a:hover{
  color: var(--gold-2) !important;
  text-decoration: underline;
  text-underline-offset: 4px;
}
.blog-details .post-content h2,
.blog-details .post-content h3,
.blog-details .post-content h4{
  color: var(--text);
  font-family: 'Unbounded', sans-serif;
  letter-spacing: -0.3px;
  margin-top: 22px;
  margin-bottom: 10px;
}
.blog-details .post-content img{
  max-width: 100%;
  border-radius: 18px;
  border: 1px solid rgba(214, 190, 139, .14);
  box-shadow: 0 16px 40px rgba(0,0,0,.45);
}
.blog-details .post-content blockquote{
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(214, 190, 139, .22);
  border-left: 4px solid rgba(214, 190, 139, .65);
  border-radius: 18px;
  padding: 16px 18px;
  color: rgba(242, 239, 232, .90);
}

/* Sidebar "Diğer Yazılar" */
.blog-details .sidebar__single{
  background: var(--surface);
  border: 1px solid var(--border);
  box-shadow: var(--shadow);
  border-radius: 22px;
  padding: 18px;
}
.blog-details .sidebar__title{
  color: var(--text);
  font-family: 'Unbounded', sans-serif;
  letter-spacing: -0.2px;
}
.blog-details .sidebar__post-list li{
  display: flex;
  gap: 12px;
  padding: 12px 0;
  border-bottom: 1px solid var(--border-2);
}
.blog-details .sidebar__post-list li:last-child{
  border-bottom: 0;
}
.blog-details .sidebar__post-image{
  width: 72px;
  height: 56px;
  flex: 0 0 auto;
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid rgba(214, 190, 139, .16);
}
.blog-details .sidebar__post-image img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.blog-details .sidebar__post-content-meta{
  color: rgba(242, 239, 232, .62);
}
.blog-details .sidebar__post-content h3 a{
  color: rgba(242, 239, 232, .92) !important;
}
.blog-details .sidebar__post-content h3 a:hover{
  color: var(--gold) !important;
}

/* Reuse premium help card styles in content sidebar too */
.blog-details .service-details-help{
  background: radial-gradient(900px 300px at 20% 0%, rgba(214, 190, 139, .16), transparent 60%),
              var(--surface-2) !important;
  border-radius: 18px;
  box-shadow: 0 18px 45px rgba(0,0,0,.45);
  border: 1px solid rgba(214, 190, 139, .18);
}
.blog-details .help-title{
  color: rgba(242, 239, 232, .96) !important;
}
.blog-details .help-contact p{
  color: rgba(242, 239, 232, .72) !important;
  opacity: 1 !important;
}
.blog-details .help-contact a{
  color: rgba(242, 239, 232, .96) !important;
}
.blog-details .help-contact a:hover{
  color: var(--gold) !important;
}
.blog-details .help-icon{
  background: rgba(214, 190, 139, .14) !important;
  border: 1px solid rgba(214, 190, 139, .35);
  color: rgba(242, 239, 232, .96) !important;
}
.blog-details .help-icon:hover{
  background: linear-gradient(180deg, var(--gold), var(--gold-2)) !important;
  border-color: rgba(214, 190, 139, .75);
  color: #161411 !important;
}

@media (max-width: 767px){
  .blog-details .blog-details__left{
    padding: 16px;
    border-radius: 18px;
  }
  .blog-details .blog-details__img img{
    border-radius: 18px;
  }
  .blog-details .sidebar__single{
    border-radius: 18px;
  }
}

/* Pricing packages (pricing-section-five) - decorative shapes bottom left/right */
.pricing-section-five{
  position: relative;
  overflow: hidden;
}
.pricing-section-five .pricing-five-shape{
  position: absolute;
  bottom: clamp(-120px, -8vw, -70px);
  z-index: 0; /* behind cards */
  pointer-events: none;
  opacity: .28;
  filter: drop-shadow(0 22px 50px rgba(0,0,0,.45));
}
.pricing-section-five .pricing-five-shape img{
  width: clamp(220px, 32vw, 440px);
  height: auto;
  display: block;
}
.pricing-section-five .pricing-five-shape--left{
  left: clamp(-120px, -6vw, -40px);
}
.pricing-section-five .pricing-five-shape--right{
  right: clamp(-120px, -6vw, -40px);
  opacity: .22;
}
/* keep content above decorative shapes */
.pricing-section-five .container{
  position: relative;
  z-index: 1;
}
@media (max-width: 767px){
  .pricing-section-five .pricing-five-shape{
    opacity: .14;
    bottom: -120px;
  }
  .pricing-section-five .pricing-five-shape img{
    width: 260px;
  }
}

.premium-services .h4services-content{
  padding: 18px 18px 20px;
}
.premium-services .h4services-content h3 a{
  color: var(--text) !important;
}
.premium-services .h4services-content h3 a:hover{
  color: var(--gold-3) !important;
}
.premium-services .h4services-content p{
  color: var(--text-muted);
}
.premium-services__link{
  color: var(--gold-3) !important;
  font-weight: 700;
}
.premium-services__link:hover{
  color: var(--gold-2) !important;
  text-decoration: underline;
  text-underline-offset: 4px;
}

/* Home: Contact/Appointment module (mp_contact) - template-aligned premium */
.premium-contact{
  background: var(--surface-2);
}
.premium-contact__thumb{
  position: relative;
}
.premium-contact__thumb:before{
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg,
    rgba(11,11,13,.65) 0%,
    rgba(11,11,13,.40) 35%,
    rgba(11,11,13,.10) 70%,
    rgba(11,11,13,0) 100%
  );
  pointer-events: none;
}

.premium-contact__card{
  border-radius: 22px;
  background: rgba(255,255,255,.92);
  border: 1px solid rgba(22,20,17,.10);
  box-shadow: 0 18px 45px rgba(22,20,17,.14);
  backdrop-filter: blur(12px);
}
.premium-contact__title{
  color: var(--text);
  letter-spacing: -0.4px;
}

.premium-contact .h4appoinment-input input,
.premium-contact .h4appoinment-input textarea{
  background: #fff !important;
  border: 1px solid rgba(22,20,17,.10) !important;
  border-radius: 16px !important;
  padding: 14px 16px 14px 44px; /* icon space */
  box-shadow: 0 10px 22px rgba(22,20,17,.06);
  transition: border-color .18s ease, box-shadow .18s ease;
}
.premium-contact .h4appoinment-input textarea{
  padding-left: 44px;
  min-height: 140px;
}
.premium-contact .h4appoinment-input input:focus,
.premium-contact .h4appoinment-input textarea:focus{
  border-color: rgba(214,190,139,.65) !important;
  box-shadow: 0 0 0 .22rem rgba(214,190,139,.22), 0 14px 28px rgba(22,20,17,.08) !important;
}

.premium-contact .h4input-icon{
  left: 16px;
}
.premium-contact .h4input-icon i{
  color: var(--gold-3);
  opacity: .9;
}

.premium-contact .h4appoinment-button .btn{
  border-radius: 999px;
  padding: 12px 26px;
  font-weight: 800;
  letter-spacing: .2px;
}

/* Alert box spacing inside the module */
#h4appoinment-form-message .alert{
  border-radius: 16px;
  border: 1px solid rgba(22,20,17,.10);
  box-shadow: 0 10px 22px rgba(22,20,17,.06);
}

/* Forms (contact form fields) */
input,
textarea,
select{
  background: var(--surface) !important;
  border-color: var(--border) !important;
  color: var(--text) !important;
}
input::placeholder,
textarea::placeholder{
  color: rgba(184, 178, 167, .85) !important;
}

/* Tables */
table,
.table{
  color: var(--text) !important;
}
.table thead th{
  background: var(--surface-2) !important;
  border-color: var(--border) !important;
}
.table td,
.table th{
  border-color: var(--border-2) !important;
}

/* Slider (home) accents */
#slider .slider-arrow-left,
#slider .slider-arrow-right{
  background: rgba(255, 255, 255, .80) !important;
  border: 1px solid rgba(214, 190, 139, .40) !important;
  box-shadow: 0 12px 30px rgba(22, 20, 17, .18) !important;
  color: var(--gold) !important; /* SVG uses currentColor */
}
#slider .slider-arrow-left:hover,
#slider .slider-arrow-right:hover{
  background: rgba(255, 255, 255, .95) !important;
  border-color: rgba(214, 190, 139, .70) !important;
}
#slider .swiper-pagination-bullet{
  background: rgba(214, 190, 139, .35) !important;
  opacity: 1 !important;
}
#slider .swiper-pagination-bullet-active{
  background: var(--gold) !important;
}