/* ==== Dentiora Diş Kliniği — Custom Theme (Dentiora tasarımına göre) ==== */
:root{
  --brand-green:#c9a15a;
  --brand-green-dark:#b78a3d;
  --brand-navy:#123328;
  --brand-navy-2:#0d251c;
  --text-muted:#5b6b76;
  --border-soft:#e5e9ec;
  --brand-gold:#c9a15a;
  --brand-cream:#f6efe2;

  /* The stock theme (style.css) drives underlines, buttons, hover states,
     the scrollbar thumb, text selection, etc. off these variables — they
     were still the old template's blue. Overriding them here cascades our
     green/navy palette onto every page (hakkımızda, blog, iletişim, …)
     and every widget (footer headings, "text-primary-color" utilities)
     without having to chase each usage individually. */
  --primary-color: var(--brand-green);
  --primary-color-rgb: 122, 184, 44;
  --primary-color2: var(--brand-green-dark);
  --primary-color2-rgb: 94, 148, 33;
  --secondary-color: var(--brand-navy);
  --secondary-color-rgb: 16, 28, 40;
  --secondary-color2: var(--brand-navy-2);
  --secondary-color2-rgb: 22, 35, 47;
  --heading-text-color: var(--brand-navy);
}

/* Scrollbar thumb + text selection follow --primary-color automatically
   (see style.css), this just gives the scrollbar track a matching tone. */
::-webkit-scrollbar{ background-color:#e9edf0; }

*{ box-sizing:border-box; }

/* main.js (theme-provided, line ~101) reads header.height() at script-parse
   time and locks it in as an inline `height:` — on a slow/variable first
   paint (webfonts, topbar rotator, wider nav) it can capture a bogus,
   much-too-tall transient value and freeze the header at that height
   forever. Force auto height so the header always sizes to its real
   content instead of that one-shot inline value. */
header.header-style-two{ height:auto !important; }

/* Inner-page title banners (Hakkımızda, Hizmetlerimiz, İletişim, …) all share
   the theme's default background image + blue/maroon gradient overlay
   (style.css .page-title-section / :after) — leftover from the previous
   client. Swap the overlay to our green/gold brand gradient and darken it
   enough that the generic stock banner photo underneath barely reads. */
.page-title-section:after{
  background: linear-gradient(266deg, var(--brand-navy), var(--brand-navy-2)) !important;
  opacity: .93;
}

/* ---------- Topbar ---------- */
.header-top-area{ background:var(--brand-navy) !important; padding:10px 0; }
.header-top-left-part{ display:flex; align-items:center; gap:26px; }
.header-top-left-part .phone{ color:#cfd8dc; font-size:13px; display:inline-flex; align-items:center; gap:8px; }
.header-top-left-part .webexflaticon{ color:var(--brand-green); }
.header-top-right-part{ display:flex; align-items:center; justify-content:flex-end; gap:16px; }
.header-top-area .header-top-left-part .topbar-linkedin{
  display:inline-flex; align-items:center; justify-content:center;
  width:28px; height:28px; min-width:28px; flex-shrink:0; padding:0; border-radius:50%;
  background:var(--brand-green);
  box-shadow:0 3px 8px rgba(122,184,44,.45);
  transition:.25s;
}
.header-top-area .header-top-left-part .topbar-linkedin i,
.header-top-area .header-top-left-part .topbar-linkedin i:before{
  display:block; margin:0 !important; padding:0; width:auto; height:auto;
  font-size:13px !important; line-height:1 !important; vertical-align:middle !important;
  color:#fff !important;
}
.header-top-area .header-top-left-part .topbar-linkedin:hover{
  background:#fff; transform:translateY(-2px);
}
.header-top-area .header-top-left-part .topbar-linkedin:hover i,
.header-top-area .header-top-left-part .topbar-linkedin:hover i:before{
  color:var(--brand-green) !important;
}
.topbar-rotator{
  color:var(--brand-green); font-weight:600; font-size:13px; min-width:230px;
  display:inline-flex; align-items:center; justify-content:flex-end; gap:8px;
  white-space:nowrap;
}
.topbar-rotator-icon-img{
  width:20px; height:20px; min-width:20px; object-fit:contain; display:inline-block;
}
.topbar-rotator-text{ display:inline-block; }
.topbar-rotator.tb-caret .topbar-rotator-text:after{
  content:""; display:inline-block; width:2px; height:13px; margin-left:3px;
  background:var(--brand-green); vertical-align:-2px; animation: tbBlink 1s steps(1) infinite;
}
@keyframes tbBlink{ 0%,50%{opacity:1;} 51%,100%{opacity:0;} }
.social-links a{ color:#cfd8dc !important; }
.social-links a:hover{ color:var(--brand-green) !important; }

/* ---------- Header nav ---------- */
.header-navigation-area{ background:#ffffff; box-shadow:0 2px 12px rgba(16,28,40,.06); padding:10px 0; position:relative; }
.header-navigation-area .container > .row{ margin:0; }
.header-navigation-area .col-md-12{
  display:flex; align-items:center; justify-content:flex-start; flex-wrap:nowrap;
  position:relative; min-height:64px;
  /* Don't touch left/right padding here — Bootstrap's .row negative margin
     (-6px) and this column's own default padding (+6px) cancel out exactly,
     which is what lines the logo up with the hero's plain .container text.
     Overriding padding to 0 broke that cancellation and shifted the logo
     6px left of where "GÜVENDE OLMAK İÇİN" starts. */
}
/* meanmenu sometimes leaves .mobile-menu-right classed as .mean-container
   (and thus a real, order:0 flex item) even on desktop widths. With
   justify-content:space-between that phantom item ate up a chunk of the
   row's free space *before* the logo, visually shoving it toward center.
   flex-start (above) packs items with no forced gaps, and margin-left:auto
   on the CTA button (below) is what pushes the right-hand side to the edge
   instead — so the logo now sits flush left regardless of that quirk. */

/* Logo — her zaman solda, hiç ortalanmaz */
.header-navigation-area .navbar-brand.logo,
.navbar-brand.logo{
  float:none !important; order:1; margin:0 !important;
  display:flex !important; align-items:center; flex-shrink:0;
  text-align:left !important;
}
.header-navigation-area .navbar-brand.logo img,
.navbar-brand.logo img{
  max-height:68px !important; width:auto; display:block;
  /* Logo daha görünür olsun */
  filter:drop-shadow(0 2px 6px rgba(16,28,40,.12));
  transition:filter .25s;
}
.header-navigation-area .navbar-brand.logo img:hover,
.navbar-brand.logo img:hover{
  filter:drop-shadow(0 4px 12px rgba(122,184,44,.35));
}

.header-navigation-area .main-menu.f-right{
  float:none; order:2; margin-right:0; margin-left:24px;
  display:flex; align-items:center; justify-content:center;
  /* Takes up all the leftover space between the logo and the CTA button,
     then centers the actual link list within that space — so the menu
     sits in the true middle of the header, not just "next to the logo". */
  flex:1 1 auto; min-width:0;
}
.header-navigation-area .header-searchbox-style-two{
  float:none; order:3; margin:0 0 0 auto !important; display:flex; align-items:center;
}
.header-navigation-area .side-panel-content{ order:4; }

/* Büyük ekran */
@media (min-width: 992px){
  .header-navigation-area{ padding:8px 0; }
  .header-navigation-area .navbar-brand.logo img,
  .navbar-brand.logo img{ max-height:80px !important; }
}

/* ---- Mobil hamburger (meanmenu) — 768px ve altı ----
   meanmenu, toggle butonunu ve açılır menüyü .mobile-menu-right
   div'ine enjekte eder. Bunu flex satırından çıkarıp header'ın
   tam altına absolute olarak konumlandırıyoruz; böylece logo
   satırı bozulmaz ve menü tam genişlikte açılır. */
@media (max-width: 991px){
  /* Logo zorunlu sola */
  .header-navigation-area .navbar-brand.logo,
  .navbar-brand.logo{
    margin:0 !important; padding:0 !important;
    justify-content:flex-start !important;
  }

  /* mobile-menu-right: flex sırasından çık, absolute konteyner */
  .header-navigation-area .mobile-menu-right{
    order:0; flex:0 0 0; width:0; overflow:visible;
  }
  .header-navigation-area .mobile-menu-right.mean-container{
    position:absolute; top:0; left:0; width:100%; z-index:9999;
    overflow:visible;
  }

  /* mean-bar: hamburger butonunun arka planı */
  .mean-container .mean-bar{
    position:relative;
    background:transparent !important;
    min-height:64px;
    padding:0;
  }

  /* Hamburger butonu */
  .mean-container a.meanmenu-reveal{
    position:absolute !important;
    top:50% !important;
    right:12px !important;
    left:auto !important;
    margin-top:0 !important;
    transform:translateY(-50%) !important;
    width:44px !important;
    height:44px !important;
    padding:0 !important;
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    flex-direction:column !important;
    gap:5px !important;
    border:none !important;
    border-radius:8px !important;
    background:var(--brand-navy) !important;
    color:#fff !important;
    font-size:0 !important;    /* span kullanıyoruz, harf gösterme */
    line-height:1 !important;
    text-indent:-9999px !important;
    overflow:hidden;
    z-index:10000 !important;
    box-shadow:0 4px 14px rgba(16,28,40,.3) !important;
    transition:background .2s !important;
  }
  .mean-container a.meanmenu-reveal:hover{
    background:var(--brand-green) !important;
  }

  /* Hamburger çizgileri */
  .mean-container a.meanmenu-reveal span{
    display:block !important;
    background:#ffffff !important;
    height:2px !important;
    width:22px !important;
    margin:0 auto !important;
    border-radius:2px !important;
    text-indent:0 !important;
    font-size:0 !important;
    line-height:0 !important;
    float:none !important;
    transition:background .2s !important;
  }
  .mean-container a.meanmenu-reveal:hover span{
    background:#fff !important;
  }

  /* X (kapat) ikonu — meanmenu .close class ekler */
  .mean-container a.meanmenu-reveal.meanclose{
    background:var(--brand-navy) !important;
  }

  /* Açılır navigasyon menüsü */
  .mean-container .mean-nav{
    position:absolute !important;
    top:64px !important;
    left:0 !important;
    width:100% !important;
    margin-top:0 !important;
    max-height:80vh;
    overflow-y:auto;
    box-shadow:0 12px 28px rgba(16,28,40,.22);
    background:#fff;
    z-index:9998;
    border-top:3px solid var(--brand-green);
  }
  .mean-container .mean-nav ul{ margin:0; padding:0; list-style:none; }
  .mean-container .mean-nav ul li a{
    color:var(--brand-navy) !important;
    font-weight:600;
    border-top:1px solid #edf0f2 !important;
    padding:14px 20px !important;
    display:block;
  }
  .mean-container .mean-nav ul li a:hover{ color:var(--brand-green) !important; background:#f6f8f7; }
  .mean-container .mean-nav ul li li a{ padding-left:36px !important; font-size:13px; }

  /* meanmenu'nun eklediği +/- toggle butonları */
  .mean-container .mean-nav ul li a.mean-expand{
    background:var(--brand-navy) !important;
    color:#fff !important;
    width:40px !important; height:40px !important;
    line-height:40px !important; text-align:center !important;
    padding:0 !important; margin-top:1px !important;
    border-radius:0 !important;
    font-size:18px !important;
  }
  .mean-container .mean-nav ul li a.mean-expand:hover{ background:var(--brand-green) !important; }
}
.nav-menu > li > a, .main-menu ul li a{ color:var(--brand-navy) !important; font-weight:600; }
.nav-menu > li > a:hover, .nav-menu > li.current > a, .main-menu ul li a:hover{ color:var(--brand-green) !important; }

/* Submenu items (Kurumsal / Hizmetlerimiz dropdowns): the stock theme fills
   the hovered row with var(--primary-color) — now our green — while the text
   stays dark/green too, so it disappears into its own background. We want
   only the TEXT to go green on hover, background stays as-is. */
.main-menu ul li ul.sub-menu li:hover > a,
.main-menu ul li ul.sub-menu li ul.sub-menu li:hover > a{
  background:#f6f8f7 !important;
  color:var(--brand-green) !important;
}
.bo-header-cta{
  display:inline-flex; align-items:center; gap:8px;
  background:var(--brand-green); color:#fff !important; font-weight:700;
  padding:12px 24px; border-radius:6px; text-decoration:none; transition:.25s;
}
.bo-header-cta:hover{ background:var(--brand-navy); color:#fff !important; }

/* ---------- Generic buttons ---------- */
.bo-btn{ display:inline-flex; align-items:center; gap:10px; font-weight:700; padding:14px 28px; border-radius:6px; text-decoration:none; transition:.25s; border:none; cursor:pointer; font-size:15px; }
.bo-btn-green{ background:var(--brand-green); color:#fff; }
.bo-btn-green:hover{ background:var(--brand-green-dark); color:#fff; }
.bo-btn-dark{ background:var(--brand-navy); color:#fff; }
.bo-btn-dark:hover{ background:#000; color:#fff; }
.bo-btn-block{ width:100%; justify-content:center; }
.bo-btn-outline{ background:transparent; color:#fff; border:2px solid rgba(255,255,255,.55); }
.bo-btn-outline:hover{ background:#fff; color:var(--brand-navy); border-color:#fff; }

.bo-hero-btns{ display:flex; flex-wrap:wrap; gap:16px; margin-top:8px; margin-bottom:36px; }

.bo-hero-quicklist{ display:flex; flex-wrap:wrap; gap:28px; }
.bo-hero-quickitem{ display:flex; align-items:center; gap:12px; color:#fff; }
.bo-hero-quickitem i{ font-size:22px; color:var(--brand-green); width:44px; height:44px; border:1px solid rgba(255,255,255,.3); border-radius:50%; display:flex; align-items:center; justify-content:center; flex:none; }
.bo-hero-quickitem span{ font-size:12px; line-height:1.4; color:#dfe6e2; }

.bo-eyebrow{ color:var(--brand-green); font-weight:700; font-size:13px; letter-spacing:1px; text-transform:uppercase; display:block; margin-bottom:14px; }
.bo-hero-text .bo-eyebrow{ font-size:15px; }
.bo-eyebrow-line{ position:relative; padding-left:26px; }
.bo-eyebrow-line:before{ content:""; position:absolute; left:0; top:50%; transform:translateY(-50%); width:18px; height:3px; background:var(--brand-green); }

.bo-section{ padding:80px 0; }
.bo-bg-silver{ background:#f6f8f7; }
.bo-section-head{ margin-bottom:36px; }
.bo-section-head h2{ color:var(--brand-navy); font-weight:800; margin-top:6px; }
.bo-section-head-split{ display:flex; align-items:flex-end; justify-content:space-between; flex-wrap:wrap; gap:16px; }
.bo-muted{ color:var(--text-muted); margin:0; }
.bo-link{ color:var(--brand-navy); font-weight:700; text-decoration:none; display:inline-flex; align-items:center; gap:8px; }
.bo-link:hover{ color:var(--brand-green); }

/* ---------- Hero ---------- */
/* --header-h is measured live by JS (topbar + nav row actual height) so the
   hero always fills exactly "100vh minus header" — see includes/footer.php */
:root{ --header-h: 130px; }
.bo-hero{
  position:relative;
  background-size:cover;
  background-position:center top;
  padding:60px 0 40px;
  min-height:max(560px, calc(100vh - var(--header-h)));
  display:flex;
  flex-direction:column;
  justify-content:center;
  overflow:visible;
}
.bo-hero-overlay{
  position:absolute; inset:0;
  /* Darkens the left side (behind the text) for legibility over the photo,
     fading out toward the right where the portrait sits. */
  background:linear-gradient(100deg, rgba(10,20,35,.93) 0%, rgba(10,20,35,.82) 35%, rgba(10,20,35,.5) 65%, rgba(10,20,35,.15) 100%);
}
.bo-hero-inner{
  position:relative; z-index:2; width:100%;
  flex:1; display:flex; align-items:center;
}

.bo-hero-text{ max-width:640px; }
.bo-hero-text h1{
  color:#fff;
  font-size:44px;
  font-weight:800;
  line-height:1.18;
  margin:10px 0 18px;
  text-shadow:0 2px 12px rgba(0,0,0,.3);
}
.bo-hero-text p{
  color:#ccd6de;
  font-size:16px;
  line-height:1.75;
  margin-bottom:32px;
  max-width:560px;
}
.bo-hero-text h1 .bo-title-accent{ color:var(--brand-green); }

/* Stats bar — sits in normal flow near the bottom of the hero (inside the
   photo area), never overlapping/spilling into the section below. */
.bo-hero-stats{ position:relative; z-index:3; width:100%; margin-top:40px; }
.bo-stats-bar{
  background:rgba(13,22,32,.9);
  border-radius:12px;
  padding:22px 28px;
  display:flex;
  flex-wrap:wrap;
  justify-content:space-between;
  gap:16px;
  box-shadow:0 20px 40px rgba(0,0,0,.3);
  border:1px solid rgba(122,184,44,.2);
}
.bo-stat{ display:flex; align-items:center; gap:12px; color:#fff; flex:1 1 auto; min-width:140px; }
.bo-stat i{ color:var(--brand-green); font-size:24px; }
.bo-stat h3{ color:#fff; font-size:24px; font-weight:800; margin:0; }
.bo-stat span{ color:#a0b0ba; font-size:11px; text-transform:uppercase; letter-spacing:.5px; display:block; margin-top:2px; }

/* ---------- Services ---------- */
.bo-service-grid{ display:grid; grid-template-columns:repeat(auto-fit, minmax(300px,1fr)); gap:30px; }
.bo-service-card{ background:#fff; border-radius:10px; overflow:hidden; box-shadow:0 6px 24px rgba(16,28,40,.08); transition:.3s; }
.bo-service-card:hover{ transform:translateY(-6px); box-shadow:0 16px 34px rgba(16,28,40,.15); }
.bo-service-thumb{ position:relative; height:220px; }
.bo-service-thumb img{ width:100%; height:100%; object-fit:cover; display:block; }
.bo-service-icon{
  position:absolute; left:20px; bottom:-22px; width:52px; height:52px; border-radius:10px;
  background:#fff; color:var(--brand-green); display:flex; align-items:center; justify-content:center;
  font-size:22px; box-shadow:0 8px 18px rgba(16,28,40,.18);
}
.bo-service-body{ padding:38px 24px 26px; }
.bo-service-body h4{ color:var(--brand-navy); font-weight:700; margin-bottom:10px; }
.bo-service-body p{ color:var(--text-muted); font-size:14px; line-height:1.7; margin-bottom:18px; }
.bo-service-body .bo-link{
  border:1px solid var(--border-soft); border-radius:6px;
  padding:9px 16px; font-size:13px; color:var(--brand-navy);
}
.bo-service-body .bo-link:hover{ border-color:var(--brand-green); background:#f6f8f7; color:var(--brand-green); }

/* ---------- About + contact ---------- */
.bo-about-grid{ display:grid; grid-template-columns:1.1fr .9fr; gap:60px; align-items:flex-start; }
.bo-about-text p{ color:var(--text-muted); line-height:1.8; margin-bottom:26px; }
.bo-check-grid{ display:grid; grid-template-columns:1fr 1fr; gap:14px 20px; margin-bottom:32px; }
.bo-check-item{ display:flex; align-items:center; gap:10px; color:var(--brand-navy); font-weight:600; font-size:14px; }
.bo-check-item i{ color:var(--brand-green); font-size:16px; }

.bo-contact-card{ background:var(--brand-navy); border-radius:12px; padding:40px; color:#fff; box-shadow:0 10px 34px rgba(16,28,40,.25); }
.bo-contact-card h3{ color:#fff; font-weight:700; margin-bottom:10px; }
.bo-contact-card p{ color:#b9c3ca; margin-bottom:24px; font-size:14px; }
.bo-form-group{ margin-bottom:16px; position:relative; }
.bo-form-group i{
  position:absolute; right:16px; top:50%; transform:translateY(-50%);
  color:#7c8a93; font-size:14px; pointer-events:none;
}
.bo-form-group textarea ~ i{ top:20px; transform:none; }
.bo-input{
  width:100%; background:var(--brand-navy-2); border:1px solid #26343f; color:#fff;
  border-radius:6px; padding:14px 40px 14px 16px; font-size:14px;
}
.bo-input::placeholder{ color:#7c8a93; }
.bo-input:focus{ outline:none; border-color:var(--brand-green); background:var(--brand-navy-2); }

/* ---------- Blog ---------- */
.bo-blog-grid{ display:grid; grid-template-columns:repeat(auto-fit, minmax(260px,1fr)); gap:26px; }
.bo-blog-card{ background:#fff; border-radius:10px; overflow:hidden; box-shadow:0 6px 20px rgba(16,28,40,.07); transition:.3s; }
.bo-blog-card:hover{ transform:translateY(-4px); }
.bo-blog-card img{ width:100%; height:180px; object-fit:cover; display:block; }
.bo-blog-body{ padding:20px; }
.bo-blog-date{ color:var(--brand-green); font-size:12px; font-weight:700; }
.bo-blog-body h4{ margin:10px 0 12px; font-size:16px; line-height:1.4; }
.bo-blog-body h4 a{ color:var(--brand-navy); text-decoration:none; }
.bo-blog-body h4 a:hover{ color:var(--brand-green); }

/* ---------- Testimonials + CTA ---------- */
.bo-testimonial-section{ background:var(--brand-navy); padding:80px 0; }
.bo-testimonial-grid{ display:grid; grid-template-columns:1.6fr 1fr; gap:40px; align-items:stretch; }
.bo-testimonial-cards{ display:grid; grid-template-columns:repeat(auto-fit, minmax(220px,1fr)); gap:20px; margin-top:20px; }
.bo-testimonial-card{ background:#fff; border-radius:10px; padding:26px; }
.bo-stars{ color:#f5b942; font-size:13px; margin-bottom:12px; }
.bo-testimonial-card p{ color:var(--text-muted); font-size:14px; line-height:1.7; margin-bottom:18px; min-height:80px; }
.bo-testimonial-card h5{ color:var(--brand-navy); margin:0 0 2px; font-size:15px; }
.bo-testimonial-card span{ color:var(--brand-green); font-size:12px; }

.bo-cta-panel{ background:var(--brand-navy-2); border:1px solid rgba(255,255,255,.08); border-radius:12px; padding:40px; display:flex; flex-direction:column; justify-content:center; }
.bo-cta-panel h3{ color:#fff; font-weight:800; margin-bottom:14px; }
.bo-cta-panel p{ color:#c7d3cb; margin-bottom:26px; }
.bo-cta-panel .bo-btn-dark{ background:var(--brand-green); color:var(--brand-navy); }
.bo-cta-panel .bo-btn-dark:hover{ background:#fff; color:var(--brand-navy); }

/* ---------- Footer ---------- */
.footer-area, footer{ background:var(--brand-navy) !important; }
.footer-widget a{ color:#b9c3ca !important; }
.footer-widget a:hover{ color:var(--brand-green) !important; }
.footer-widget-list li a:hover{ color: var(--brand-green) !important;}

/* E-Posta / Telefon / Adres icons — match the site's green/navy theme */
.footer-contact-info .contact-info-icon i:before{
  background:var(--brand-green) !important;
  color:#fff !important;
}

/* Bottom bar: credit right-aligned, copyright left-aligned */
.footer-bottom-area .row > .col-xl-12{
  display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:10px;
}
.footer-bottom-area .text-center{ text-align:left !important; }
.footer-bottom-credit{ text-align:right; }
@media (max-width: 767px){
  .footer-bottom-area .row > .col-xl-12{ justify-content:center; text-align:center; }
  .footer-bottom-area .text-center, .footer-bottom-credit{ text-align:center !important; width:100%; }
}

/* ---------- Periyodik kontrol: sol menü + sağda tıklamayla değişen içerik ---------- */
.pk-layout{ display:grid; grid-template-columns:290px 1fr; gap:30px; align-items:start; }
.pk-drawer{
  background:#fff; border-radius:10px; overflow:hidden;
  box-shadow:0 6px 24px rgba(16,28,40,.08); position:sticky; top:20px;
}
.pk-drawer-head{
  background:var(--brand-navy); color:#fff; font-weight:700; font-size:14px;
  padding:18px 20px; display:flex; align-items:center; gap:10px;
}
.pk-drawer-head i{ color:var(--brand-green); }
.pk-drawer-menu{ list-style:none; margin:0; padding:8px 0; }
.pk-drawer-item{ border-bottom:1px solid var(--border-soft); }
.pk-drawer-item:last-child{ border-bottom:none; }
.pk-drawer-link{
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  padding:16px 20px; color:var(--brand-navy); font-weight:700; font-size:14.5px;
  text-decoration:none; transition:.2s; border-left:3px solid transparent;
}
.pk-drawer-link span{ display:flex; align-items:center; gap:10px; }
.pk-drawer-link span i{ color:var(--brand-green); font-size:15px; width:18px; text-align:center; }
.pk-drawer-link > i{ color:#c3ccd1; font-size:12px; transition:.2s; }
.pk-drawer-link:hover{ background:#f6f8f7; color:var(--brand-green); border-left-color:var(--brand-green); }
.pk-drawer-link:hover > i{ color:var(--brand-green); transform:translateX(3px); }
.pk-drawer-link.pk-active{ background:#f0f6e9; color:var(--brand-green); border-left-color:var(--brand-green); }

.pk-drawer-cta{
  display:flex; align-items:center; justify-content:center; gap:10px;
  margin:16px; padding:14px; background:var(--brand-green); color:#fff !important;
  font-weight:700; border-radius:8px; text-decoration:none; transition:.2s;
  box-shadow:0 8px 18px rgba(122,184,44,.35);
}
.pk-drawer-cta:hover{ background:var(--brand-green-dark); }
.pk-drawer-cta i{ font-size:18px; }

/* Sağ içerik alanı — sayfa ilk açıldığında SEO açıklama metni burada */
.pk-drawer-content{ min-height:320px; }
.pk-intro-panel{
  background:#fff; border-radius:10px; padding:36px 40px;
  box-shadow:0 6px 24px rgba(16,28,40,.06);
}
.pk-intro-panel p{ color:var(--text-muted); line-height:1.85; margin-bottom:18px; }
.pk-intro-panel p:last-child{ margin-bottom:0; }

/* "Periyodik Kontrol"e tıklanınca çıkan, yan yana kısa/dar karo resimler */
.pk-tile-row{ display:flex; flex-wrap:wrap; gap:16px; }
.pk-tile{
  position:relative; display:block; width:150px; height:170px; border-radius:8px; overflow:hidden;
  text-decoration:none; box-shadow:0 6px 16px rgba(16,28,40,.12); transition:.25s;
}
.pk-tile:hover{ transform:translateY(-4px); box-shadow:0 12px 24px rgba(16,28,40,.2); }
.pk-tile img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transition:.35s; }
.pk-tile:before{ content:""; position:absolute; inset:0; background:linear-gradient(180deg, rgba(16,28,40,.1) 0%, rgba(16,28,40,.88) 100%); }
.pk-tile:hover img{ transform:scale(1.1); }
.pk-tile-title{
  position:absolute; left:0; right:0; bottom:0; z-index:2; padding:10px 8px;
  color:#fff; font-weight:800; font-size:13px; line-height:1.25; text-align:center;
}

/* Bir karoya tıklanınca açılan kategori açıklaması + madde listesi */
.pk-back-link{
  display:inline-flex; align-items:center; gap:8px; color:var(--brand-green);
  font-weight:700; font-size:13px; text-decoration:none; margin-bottom:18px;
}
.pk-back-link:hover{ color:var(--brand-navy); }
.pk-cat-panel{ background:#fff; border-radius:10px; padding:30px; box-shadow:0 6px 24px rgba(16,28,40,.08); }
.pk-cat-panel-head{ display:flex; align-items:center; gap:18px; margin-bottom:20px; }
.pk-cat-panel-head img{ width:90px; height:90px; object-fit:cover; border-radius:8px; }
.pk-cat-panel-head h3{ color:var(--brand-navy); margin:0 0 4px; }
.pk-cat-panel-head span{ color:var(--brand-green); font-size:13px; font-weight:600; }
.pk-cat-panel-desc{ color:var(--text-muted); line-height:1.7; margin-bottom:24px; padding-bottom:24px; border-bottom:1px solid var(--border-soft); }

@media (max-width: 991px){
  .pk-layout{ grid-template-columns:1fr; }
  .pk-drawer{ position:static; }
  .pk-tile{ width:calc(50% - 8px); height:150px; }
}
@media (max-width: 480px){
  .pk-tile{ width:100%; height:170px; }
  .pk-cat-panel-head{ flex-direction:column; text-align:center; }
  .pk-item-list{ columns:1; }
  .pk-intro-panel{ padding:26px 22px; }
}

/* ---------- Periyodik kontrol category grid ---------- */
.pk-cat-grid{ display:grid; grid-template-columns:repeat(auto-fill, minmax(260px,1fr)); gap:24px; }
.pk-cat-card{ position:relative; border-radius:10px; overflow:hidden; height:220px; display:flex; align-items:flex-end; box-shadow:0 6px 20px rgba(16,28,40,.12); }
.pk-cat-card img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transition:.4s; }
.pk-cat-card:hover img{ transform:scale(1.08); }
.pk-cat-card:before{ content:""; position:absolute; inset:0; background:linear-gradient(180deg, rgba(16,28,40,0) 30%, rgba(16,28,40,.9) 100%); }
.pk-cat-card .pk-cat-title{ position:relative; z-index:2; color:#fff; padding:18px; font-weight:700; font-size:18px; }
.pk-cat-card .pk-cat-count{ position:relative; z-index:2; color:var(--brand-green); font-size:13px; font-weight:600; padding:0 18px 14px; margin-top:-10px; }

/* Kontrol kalemleri — kart/karo değil, gerçek madde listesi görünümü */
.pk-item-list{
  list-style:none; margin:0; padding:0; columns:2; column-gap:32px;
}
.pk-item-list li{
  display:flex; align-items:flex-start; gap:10px;
  padding:10px 0; border-bottom:1px solid var(--border-soft);
  font-weight:500; color:var(--brand-navy); font-size:14px;
  break-inside:avoid;
}
.pk-item-list li:before{
  content:"\f00c"; font-family:"Font Awesome 5 Free"; font-weight:900;
  color:var(--brand-green); font-size:11px; margin-top:3px; flex-shrink:0;
}

.group-simple-list{ list-style:none; margin:0; padding:0; }
.group-simple-list li{ display:flex; gap:14px; align-items:flex-start; padding:18px 0; border-bottom:1px solid var(--border-soft); }
.group-simple-list li .gsl-check{ color:#fff; background:var(--brand-green); width:28px; height:28px; min-width:28px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:13px; }
.group-simple-list li h4{ margin:0 0 4px; color:var(--brand-navy); font-size:17px; }
.group-simple-list li p{ margin:0; color:var(--text-muted); font-size:14px; }

.breadcrumb-area{ text-align:center; }

/* ---------- Responsive ---------- */
@media (max-width: 1200px){
  .bo-hero-text h1{ font-size:36px; }
}
@media (max-width: 991px){
  /* Hero: full-bleed image stays, text centers; the stats bar is already
     in normal flow (see .bo-hero-stats above) so it can never overlap or
     spill into the section below on any screen size. */
  .bo-hero{ min-height:max(480px, calc(100vh - var(--header-h))); }
  .bo-hero-text{ max-width:100%; text-align:center; margin:0 auto; }
  .bo-hero-text p{ max-width:100%; margin-left:auto; margin-right:auto; }

  .bo-about-grid{ grid-template-columns:1fr; }
  .bo-testimonial-grid{ grid-template-columns:1fr; }
  .bo-check-grid{ grid-template-columns:1fr; }

  /* Topbar mobilde görünsün */
  .header-top-area.d-none.d-lg-block{ display:block !important; }
  .header-top-area{ padding:8px 0; }
  .header-top-area .row{ flex-direction:column; align-items:flex-start; gap:6px; }
  .header-top-left-part{ flex-wrap:wrap; gap:14px !important; width:100%; }
  .header-top-left-part .phone{ font-size:11px; }
  .header-top-left-part .topbar-linkedin{ display:none !important; }
  .header-top-right-part{ width:100%; justify-content:flex-start !important; }
  .topbar-rotator{ min-width:0; justify-content:flex-start; font-size:12px; }
}
@media (max-width: 576px){
  .bo-hero-text h1{ font-size:28px; }
  .bo-hero-text p{ font-size:14px; }
  .bo-stats-bar{ flex-wrap:wrap; justify-content:space-around; padding:16px 14px; gap:12px; border-radius:10px; }
  .bo-stat{ flex:0 0 calc(50% - 8px); min-width:0; }
}

/* ---------- Sertifikalar sayfası ---------- */
.alert-info-box{ background:#fff; border-radius:10px; padding:40px; text-align:center; color:var(--text-muted); box-shadow:0 6px 24px rgba(16,28,40,.06); }
.cert-grid{ display:grid; grid-template-columns:repeat(auto-fill, minmax(230px,1fr)); gap:26px; }
.cert-card{
  background:#fff; border-radius:10px; overflow:hidden;
  box-shadow:0 6px 20px rgba(16,28,40,.08); transition:.25s;
}
.cert-card:hover{ transform:translateY(-5px); box-shadow:0 14px 30px rgba(16,28,40,.15); }
.cert-card-img{
  position:relative; display:block; aspect-ratio:4/5; background:#f6f8f7;
  border-bottom:3px solid var(--brand-green);
}
.cert-card-img img{ width:100%; height:100%; object-fit:contain; padding:14px; display:block; }
.cert-zoom{
  position:absolute; right:10px; bottom:10px; width:34px; height:34px; border-radius:50%;
  background:var(--brand-navy); color:#fff; display:flex; align-items:center; justify-content:center;
  font-size:13px; opacity:0; transition:.2s;
}
.cert-card-img:hover .cert-zoom{ opacity:1; background:var(--brand-green); }

/* PDF sertifikaları — resim yerine ikon + etiket */
.cert-card-pdf{
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:10px;
  color:var(--brand-navy); text-decoration:none; transition:.2s; background:#f6f8f7;
}
.cert-card-pdf i{ font-size:56px; color:#e2574c; }
.cert-pdf-label{ font-weight:700; font-size:13px; color:var(--brand-navy); }
.cert-card-pdf:hover{ background:#eef1f0; }
.cert-card-pdf:hover .cert-pdf-label{ color:var(--brand-green); }

.cert-card-title{
  padding:16px 18px; font-weight:700; font-size:14px; color:var(--brand-navy);
  text-align:center; line-height:1.4;
}

@media (max-width: 480px){
  .cert-grid{ grid-template-columns:repeat(2, 1fr); gap:14px; }
  .cert-card-title{ padding:12px 10px; font-size:12.5px; }
}