/* Shared reading scale for public pages, including CMS-rendered content. */
:root {
  --profile-content-width: 1120px;
  --profile-section-space: 96px;
  --profile-heading-size: clamp(26px, 2.5vw, 34px);
  --profile-image-height: 240px;
}
body { font-size: 16px; line-height: 1.65; }
body .vb-site-main .container,
body .bs-footer-2-area .container {
  max-width: var(--profile-content-width) !important;
  padding-inline: 24px;
}
/*
  Every section gets at least one screen to itself. The room comes from empty
  space, never from scaling the content: type and images keep their own size and
  the block sits in the vertical middle. A section with more content than one
  screen simply grows past it, and the padding keeps two such sections from
  running into each other.

  Three sections are left out. Each is a single compact row — the four values,
  the career facts and the interest tags — and a whole screen around one row of
  small items reads as a gap in the page rather than as breathing room. They keep
  their natural height and rely on the section padding for separation.
*/
body .vb-site-main section:not(.bs-hero-1-area):not(.breadcrumb-area) {
  padding-block: var(--profile-section-space);
  margin-block: 0;
}
body .vb-site-main section:not(.bs-hero-1-area):not(.breadcrumb-area):not(.bs-core-features-1-area):not(.bs-core-feature-5-area):not(.bs-brand-4-area) {
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
/*
  Those three carry Bootstrap's `py-5 !important` from the theme, which would
  leave them with less air than every other section. Give them the same spacing.
*/
body .vb-site-main section:is(.bs-core-features-1-area, .bs-core-feature-5-area, .bs-brand-4-area) {
  padding-block: var(--profile-section-space) !important;
}

/*
  The closing frame gets a screen of its own, on the same terms. Its two striped
  rules are the footer's top and bottom edge, so they stay pinned there and only
  the content block is centred in the space between them.
*/
body .bs-footer-2-area {
  min-height: 100svh;
  display: flex;
  flex-direction: column;
}
body .bs-footer-2-area > .container { margin-block: auto; }
body .vb-site-main :is(.bs-p-1, .bs-p-3, .bs-p-4) {
  font-size: 16px;
  line-height: 1.65;
}
body .vb-site-main :is(.bs-sec-title-1, .bs-sec-title-3) {
  font-size: var(--profile-heading-size) !important;
  line-height: 1.25;
  letter-spacing: -0.025em;
  overflow-wrap: break-word;
}
body .vb-site-main .bs-subtitle-1 {
  font-size: 14px;
  line-height: 1.5;
  gap: 8px;
  margin-bottom: 10px;
}
body .vb-site-main :is(.bs-about-1-sec-title, .bs-projects-2-sec-title,
  .bs-services-3-sec-title, .bs-blog-1-sec-title, .bs-faq-1-sec-title,
  .bs-faq-1-tabs-btn) { margin-bottom: 28px; }

/*
  Opening slide fills the viewport. The header sits on top of the hero, so the
  top padding is larger than the bottom one: with `align-items: center` that
  pushes the headline into the optical centre of the area below the header
  instead of behind it. `svh` keeps mobile browser chrome from resizing the
  slide mid-scroll.
*/
body .bs-hero-1-area { min-height: 0; }
body .vb-site-main .bs-hero-1-slide {
  min-height: 100vh;
  min-height: 100svh;
  padding-top: clamp(150px, 20vh, 200px);
  padding-bottom: clamp(72px, 10vh, 110px);
}
/* Darker, warmer scrim: the headline sits on busy photographs. */
body .bs-hero-1-slide-overlay {
  background:
    linear-gradient(90deg, rgba(3, 12, 32, 0.84) 0%, rgba(3, 12, 32, 0.58) 46%, rgba(3, 12, 32, 0.18) 100%),
    linear-gradient(0deg, rgba(3, 12, 32, 0.55) 0%, rgba(3, 12, 32, 0) 42%);
}
body .bs-hero-1-title {
  /* Scaled up to carry a full-height opening slide. */
  font-size: clamp(34px, 4.2vw, 62px);
  line-height: 1.18;
  max-width: 22ch;
  margin-bottom: 16px;
  overflow-wrap: break-word;
}
body .bs-hero-1-slide-content { max-width: 680px; }
body .bs-hero-1-slide-content .bs-hero-1-desc {
  font-size: 16px;
  line-height: 1.65;
  max-width: 58ch;
  margin-bottom: 22px;
}
body .vb-site-main .bs-btn-1 {
  font-size: 14px;
  padding: 11px 20px;
  min-height: 44px;
}
body .vb-site-main .bs-btn-1 .text { font-size: 14px; }
body .vb-site-main .bs-pr-btn-2 { font-size: 14px; padding: 11px 20px; min-height: 44px; }
body .vb-site-main section.breadcrumb-area { padding-top: 48px; padding-bottom: 32px; }
body .vb-site-main section.breadcrumb-area .breadcrumb-wrap { gap: 18px; }
body .vb-site-main section.breadcrumb-area .breadcrumb-title {
  font-size: clamp(28px, 3vw, 38px);
  line-height: 1.22;
}
body .vb-site-main section.breadcrumb-area .breadcrumb-list { padding: 8px 16px; }
body .vb-site-main section.breadcrumb-area .breadcrumb-list :is(a, span) { font-size: 13px; }

body .vb-site-main .bs-about-1-content { gap: 20px !important; }
body .vb-site-main .bs-about-1-content .disc {
  font-size: 16px;
  line-height: 1.75;
  max-width: 70ch !important;
}
body .vb-site-main .bs-about-1-slider { margin-right: 0; margin-bottom: 28px; }
body .vb-site-main .bs-about-1-item { height: var(--profile-image-height); }
.bs-about-1-item img[src*="dr-veysel-bodakci"] { object-position: center 25%; }
body .vb-site-main .bs-core-features-1-wrap { gap: 24px; }
body .vb-site-main .bs-core-features-1-item .icon {
  height: 42px;
  width: 48px;
  margin-bottom: 12px;
}
body .vb-site-main .bs-core-features-1-item .icon i { font-size: 30px !important; }
body .vb-site-main .bs-core-features-1-item .item-title { font-size: 19px; }
body .vb-site-main .bs-core-features-1-item .item-disc { font-size: 15px; }
body .vb-site-main .profile-fact {
  font-size: clamp(22px, 2vw, 28px);
  line-height: 1.25;
  overflow-wrap: anywhere;
}
body .vb-site-main .site-counters-layout { padding: 16px 0 !important; gap: 12px !important; }
body .vb-site-main .site-counters-layout .bs-core-feature-4-item { padding: 18px 12px !important; }
body .vb-site-main .site-counters-layout .item-title { font-size: 14px !important; margin-bottom: 12px; }
.profile-career-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 20px; }
.vb-references-cell.profile-career { display: block; height: auto; padding: 24px; text-align: left; }
.profile-career h2 { font-size: 23px; line-height: 1.35; margin-bottom: 16px; }
.profile-career h3 { font-size: 18px; line-height: 1.4; margin-bottom: 16px; }
.profile-career p { font-size: 16px; line-height: 1.7; }
body .vb-site-main .bs-brand-4-item { width: 170px; height: 100px; }
body .vb-site-main .bs-brand-4-item span { font-size: 14px !important; }

body .vb-site-main .bs-projects-2-wrap { gap: 28px; }
body .vb-site-main .bs-projects-2-item { margin-bottom: 28px; }
body .vb-site-main .bs-projects-2-item .item-img {
  height: var(--profile-image-height);
  margin-bottom: 16px;
}
body .vb-site-main .bs-projects-2-item .item-title { font-size: 21px; line-height: 1.4; }
body .vb-site-main .bs-projects-2-all-btn { margin-top: 28px; }
body .vb-site-main .bs-services-3-wrap { gap: 20px; margin-bottom: 28px; }
body .vb-site-main .bs-services-3-card { padding: 18px; }
body .vb-site-main .bs-services-3-card .card-image { height: 150px; margin-bottom: 14px; }
body .vb-site-main .bs-services-3-card .card-title { font-size: 18px; line-height: 1.4; }
body .vb-site-main .bs-accordion-item { padding-bottom: 16px; }
body .vb-site-main .bs-accordion-item:not(:last-child) { margin-bottom: 16px; }
body .vb-site-main .bs-accordion-item .item-title { font-size: 18px; line-height: 1.45; gap: 14px; min-height: 44px; }
body .vb-site-main .bs-accordion-item .item-title .shape { width: 44px; height: 44px; padding: 10px; }
body .vb-site-main .bs-accordion-item .item-title .shape img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}
body .vb-site-main .bs-accordion-item .item-title .icon { font-size: 18px; }
body .vb-site-main .bs-accordion-item .item-body p { font-size: 16px; line-height: 1.7; padding-left: 58px; padding-bottom: 0; }

body .vb-site-main .bs-blog-1-item { padding: 28px; gap: 28px; }
body .vb-site-main .bs-blog-1-item .item-img { height: 220px; }
body .vb-site-main .bs-blog-1-item .item-title { font-size: 25px; line-height: 1.35; margin-bottom: 12px; }
body .vb-site-main .bs-blog-1-item .item-disc { font-size: 16px; margin-bottom: 16px; }
body .vb-site-main .bs-blog-4-item .item-img { height: 200px; margin-bottom: 18px; }
body .vb-site-main .bs-blog-4-item .title { font-size: 21px; line-height: 1.4; }
body .vb-site-main .bs-blog-page-sidebar-widget { padding: 24px; }
body .vb-site-main .bs-blog-details-content {
  max-width: 68ch !important;
  width: 100%;
  margin-inline: auto;
  padding: 0;
  font-size: 16px;
  line-height: 1.75;
  overflow-wrap: break-word;
}
body .vb-site-main .bs-blog-details-content :is(p, li) { font-size: 16px; line-height: 1.75; }
body .vb-site-main .bs-blog-details-content :is(h2, h3, h4) { font-size: 23px; line-height: 1.4; }
body .vb-site-main .bs-blog-details-content > p:first-of-type::first-letter,
body .vb-site-main .bs-blog-details-content > div:first-of-type > p:first-of-type::first-letter,
body .vb-site-main .bs-blog-details-content > *:first-child::first-letter {
  font-size: inherit;
  font-weight: inherit;
  line-height: inherit;
  float: none;
  margin: 0;
}
body .vb-site-main .bs-services-details-slider { gap: 24px; margin-bottom: 32px; }
body .vb-site-main .bs-services-details-slider-1-img { height: 320px; }
body .vb-site-main .bs-services-details-content { max-width: 72ch; margin-inline: auto; }
body .vb-site-main .bs-services-details-content :is(h1, h2, h3, h4, h5, h6) {
  font-size: 24px;
  line-height: 1.4;
  margin-top: 28px;
  margin-bottom: 16px;
}
body .vb-site-main .bs-services-details-content :is(p, span, li) { font-size: 16px; line-height: 1.75; }
body .vb-site-main :is(.bs-contact-1-img, .bs-contact-6-img) { height: 360px; }
body .vb-site-main :is(.bs-contact-1-wrap, .bs-contact-6-wrap) { gap: 36px; }
body .vb-site-main .bs-core-feature-6-wrap { padding-block: 16px; }
body .vb-site-main .bs-core-feature-6-wrap .bs-core-feature-4-item { padding: 18px; min-width: 0; }
body .vb-site-main .bs-core-feature-6-wrap .item-disc { overflow-wrap: anywhere; }

body .bs-footer-2-wrap { padding-top: 48px; }
body .bs-footer-2-top { margin-bottom: 32px; }
body .bs-footer-2-logo { margin-bottom: 24px; }
body .bs-footer-2-logo img { height: 52px; width: auto; }
body .bs-footer-2-top-content .title { font-size: 25px; line-height: 1.4; }
body .bs-footer-2-top-content .disc { font-size: 15px; line-height: 1.65; }
body .bs-footer-2-top-content-link li a { font-size: 14px; }
body .bs-footer-2-area .bs-footer-1-widget-title { font-size: 16px; margin-bottom: 16px; }
body .bs-footer-2-area .bs-footer-1-menu a { font-size: 14px; }
body .bs-footer-2-widgets { margin-bottom: 24px; }
body .bs-footer-2-copyright { font-size: 13px; margin-bottom: 24px; }

@media (max-width: 991px) {
  :root { --profile-section-space: 72px; --profile-image-height: 220px; }
  body .vb-site-main .bs-services-details-slider { grid-template-columns: 1fr; }
  body .vb-site-main .bs-services-details-slider-1-img { height: 280px; }
}
@media (max-width: 767px) {
  :root { --profile-section-space: 56px; --profile-heading-size: 27px; --profile-image-height: 200px; }
  body .vb-site-main .container,
  body .bs-footer-2-area .container { padding-inline: 18px; }
  body .vb-site-main .bs-hero-1-slide { padding-top: 132px; padding-bottom: 88px; }
  body .bs-hero-1-title { font-size: 32px; }
  body .vb-site-main section.breadcrumb-area { padding-top: 32px; padding-bottom: 24px; }
  body .vb-site-main section.breadcrumb-area .breadcrumb-title { font-size: 28px; }
  body .vb-site-main .bs-core-features-1-wrap { gap: 22px; }
  body .vb-site-main .bs-core-feature-6-wrap { grid-template-columns: 1fr; }
  body .vb-site-main .bs-accordion-item .item-body p { padding-left: 0; padding-top: 12px; }
  .profile-career-grid { grid-template-columns: 1fr !important; }
  .vb-references-cell.profile-career { padding: 20px; }
  body .vb-site-main .bs-brand-4-item { width: 150px; height: 84px; }
  body .vb-site-main .bs-projects-2-wrap { gap: 0; }
  body .vb-site-main .bs-blog-1-item { padding: 20px; gap: 20px; }
  body .vb-site-main .bs-blog-1-item .item-img { height: 190px; }
  body .vb-site-main .bs-blog-1-item .item-title { font-size: 22px; }
  body .vb-site-main .bs-services-details-slider-1-img { height: 220px; }
  body .vb-site-main :is(.bs-contact-1-img, .bs-contact-6-img) { height: 260px; }
  body .vb-site-main :is(.bs-contact-1-wrap, .bs-contact-6-wrap) { gap: 24px; }
  body .bs-footer-2-wrap { padding-top: 36px; }
  body .bs-footer-2-top-content .title { font-size: 23px; }
}

/* ------------------------------------------------------------------ *
 * Fixes for theme defaults that do not fit this site's content.
 * ------------------------------------------------------------------ */

/*
  The four core values were clipped away on desktop and only revealed while the
  row was hovered, so the band read as an empty strip of icons. The copy is the
  point of the section, so it is always visible now; hover keeps a quiet lift.
*/
body .vb-site-main .bs-core-features-1-item .content { clip-path: none; }
body .vb-site-main .bs-core-features-1-item {
  transition: transform 0.35s var(--bs-cube-1, ease);
}
body .vb-site-main .bs-core-features-1-item:hover { transform: translateY(-4px); }

/*
  `text-transform: capitalize` is wrong for Turkish: it turns "iletişim" into
  "Iletişim" (the dotted İ is lost) and shouts conjunctions such as "ve". Panel
  copy is already written with the right casing, so the transform is switched
  off. Deliberate uppercase styling is untouched.
*/
body .vb-site-main :is(.bs-h-1, .bs-h-2, .bs-h-4,
  .bs-sec-title-1, .bs-sec-title-3, .bs-sec-title-4,
  .bs-subtitle-1, .bs-subtitle-5,
  .bs-pr-btn-2, .bs-pr-btn-3, .nav-link,
  .item-title, .item-disc, .card-title, .profile-fact,
  .bs-about-1-slider-drag),
body .bs-footer-2-area :is(.bs-h-1, .bs-h-2, .title, .bs-footer-1-widget-title),
body :is(.wa-capitalize, .wa-capitalize-hidden) .split-line div div:nth-child(1) {
  text-transform: none;
}

/*
  Accordion row reads shape · question · chevron. The theme leaves the question
  as a bare text node after the chevron, and the chevron's `margin-left: auto`
  dragged the question to the right edge of an otherwise left-aligned section.
*/
body .vb-site-main .bs-accordion-item .item-title .icon { order: 1; }
body .vb-site-main .bs-accordion-item .item-title { gap: 14px; }

/*
  The contact block reuses the theme's counter slot for a name. That slot is
  styled for a two-digit number — a 6px underline on a `line-height: 1` box —
  so a two-word name wraps straight into the rule.
*/
body .vb-site-main .bs-contact-1-counter-item { align-items: baseline; gap: 16px; }
body .vb-site-main .bs-contact-1-counter-item .number {
  line-height: 1.2;
  border-bottom-width: 3px;
  padding-bottom: 8px;
}

/*
  The floating contact/share stack is pinned bottom-right at the top of the
  stacking order, so it covered the hero slider's pause control. Pull the slider
  controls clear of that column.
*/
body .vb-site-main .bs-hero-1-nav { right: clamp(84px, 6vw, 100px); }

/*
  The opening slide deliberately runs a little past the fold (the header is
  pulled up over it), so controls pinned to the slide's own bottom edge fall
  below the viewport on phones. Lift them, and drop the decorative mouse-scroll
  hint there — it means nothing on a touch screen and crowded the controls.
*/
@media (max-width: 767px) {
  body .vb-site-main .bs-hero-1-nav { bottom: 96px; }
  body .vb-site-main .bs-hero-1-scroll-indicator { display: none; }
}

/*
  The theme's secondary button draws 16px corner brackets 16px *outside* its own
  box. The hero clips its content so they do not overflow the slide, which left
  the brackets sliced in half and reading as a rendering fault next to the solid
  primary button. The brackets go, and the button becomes a plain outline twin of
  the primary one. It is only used on the hero slides, over a dark photograph.
*/
body .vb-site-main .bs-pr-btn-2 :is(.line-1, .line-2, .box) { display: none; }
body .vb-site-main .bs-pr-btn-2 {
  margin-left: 0;
  background: transparent;
  color: var(--bs-clr-white-1, #fff);
  border: 1px solid rgba(255, 255, 255, 0.7);
  border-radius: 30px;
  transition: background-color 0.3s ease, border-color 0.3s ease, color 0.3s ease;
}
body .vb-site-main .bs-pr-btn-2:hover,
body .vb-site-main .bs-pr-btn-2:focus-visible {
  background: var(--bs-clr-white-1, #fff);
  border-color: var(--bs-clr-white-1, #fff);
  color: var(--bs-clr-pr-1, #01236a);
}
body .vb-site-main .bs-hero-1-slide-btns { gap: 14px; }

/*
  The outlined word in the headline is a transparent fill with a 1px hairline;
  over a photograph it all but disappears. A thicker stroke and a faint fill keep
  the effect while leaving the word readable.
*/
body .vb-site-main .bs-hero-1-title .bs-stroke-text {
  -webkit-text-stroke-width: 1.5px;
  -webkit-text-fill-color: rgba(255, 255, 255, 0.2);
}

/*
  The slide controls now hold only the pause toggle, and that toggle removes
  itself when there is nothing to autoplay (a single slide). Without this the
  empty pill would still be painted.
*/
body .vb-site-main .bs-hero-1-nav:not(:has(button)) { display: none; }

/* ==========================================================================
   Menu headings that open on a click
   ========================================================================== */

/*
  The theme opens a heading's list when the pointer passes over it. A pointer is
  not something a phone or a tablet has, and a list that opens by accident while
  the visitor is on the way somewhere else is noise. The list now waits for a
  click, which `assets/js/veysel-nav.js` turns into the class below. Both rules
  carry the same weight as the theme's own, and this file is loaded after it.
*/
.bs-main-navigation .navbar-nav li:hover > .dropdown-menu {
  opacity: 0;
  visibility: hidden;
  transform: scaleY(0);
}
.bs-main-navigation .navbar-nav li.is-open > .dropdown-menu {
  opacity: 1;
  visibility: visible;
  transform: scaleY(1);
}

/* The caret turns over while the list below it is open. */
.bs-header-5-row .bs-main-navigation .navbar-nav li:is(.dropdown) > a::before {
  transition: transform 0.3s ease;
}
.bs-header-5-row .bs-main-navigation .navbar-nav li.dropdown.is-open > a::before {
  transform: translateY(-50%) rotate(-180deg);
}

/* A heading of the section being read is marked, open or closed. */
.bs-main-navigation .navbar-nav > li.is-current-page > a {
  color: var(--bs-clr-pr-1);
  font-weight: 700;
}

/* ==========================================================================
   Channel colours
   ========================================================================== */

/*
  The theme shipped colours for the five networks it knew about. These are the
  rest, so no channel is left wearing another one's badge.
*/
.vb-social-rail__link--x { background: #000; }
.vb-social-rail__link--researchgate { background: #00ccbb; }
.vb-social-rail__link--whatsapp { background: #25d366; }
.vb-social-rail__link--email { background: #01236a; }
.vb-social-rail__link--phone { background: #0f766e; }

.vb-top-bar-name { font-weight: 600; }
.vb-top-bar-link i { margin-right: 6px; }

/* ==========================================================================
   Media page
   ========================================================================== */

.veysel-media-head { margin-bottom: 40px; }
.veysel-media-section-title { margin: 0 0 12px; }
.veysel-media-lead { max-width: 62ch; margin: 0; }

.veysel-media-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 40px 30px;
}

.veysel-media-card__frame {
  position: relative;
  aspect-ratio: 16 / 9;
  border-radius: 12px;
  overflow: hidden;
  background: #0d1b3a;
}
.veysel-media-card__frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s cubic-bezier(0.19, 1, 0.22, 1);
}
.veysel-media-card:hover .veysel-media-card__frame img { transform: scale(1.04); }

.veysel-media-card__link {
  display: block;
  width: 100%;
  height: 100%;
}

/*
  A video with no cover image still needs something to click: the frame keeps its
  shape and the play badge sits on the plain panel rather than on nothing.
*/
.veysel-media-card__frame.is-blank {
  background: linear-gradient(135deg, #1a2744 0%, #243652 100%);
}

.veysel-media-card__play {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.92);
  color: var(--bs-clr-pr-1, #01236a);
  font-size: 20px;
  padding-left: 4px;
  transition: transform 0.3s ease, background 0.3s ease;
}
.veysel-media-card__link:hover .veysel-media-card__play {
  transform: translate(-50%, -50%) scale(1.08);
  background: #fff;
}

.veysel-media-card__body { padding-top: 20px; }
.veysel-media-card__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 18px;
  margin: 0 0 8px;
  opacity: 0.7;
}
.veysel-media-card__title { margin: 0 0 10px; font-size: 22px; line-height: 1.35; }
.veysel-media-card__title a { color: inherit; }
.veysel-media-card__title a:hover { color: var(--bs-clr-pr-1, #01236a); }
.veysel-media-card__disc { margin: 0; opacity: 0.85; }

.veysel-media-press { margin-top: 110px; }
.veysel-press-list { margin: 0; padding: 0; }
.veysel-press-item { border-top: 1px solid rgba(1, 35, 106, 0.12); }
.veysel-press-item:last-child { border-bottom: 1px solid rgba(1, 35, 106, 0.12); }

.veysel-press-item__link {
  position: relative;
  display: grid;
  gap: 6px;
  padding: 28px 56px 28px 0;
  color: inherit;
  transition: color 0.3s ease, padding-left 0.3s ease;
}
a.veysel-press-item__link:hover {
  color: var(--bs-clr-pr-1, #01236a);
  padding-left: 10px;
}
.veysel-press-item__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 18px;
  font-size: 14px;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  opacity: 0.6;
}
.veysel-press-item__title { font-size: 21px; font-weight: 600; line-height: 1.4; }
.veysel-press-item__disc { opacity: 0.8; max-width: 70ch; }
.veysel-press-item__icon {
  position: absolute;
  top: 50%;
  right: 8px;
  transform: translateY(-50%);
  font-size: 18px;
  opacity: 0.45;
  transition: opacity 0.3s ease, transform 0.3s ease;
}
a.veysel-press-item__link:hover .veysel-press-item__icon {
  opacity: 1;
  transform: translateY(-50%) translateX(4px);
}

.veysel-media-empty { opacity: 0.75; }

@media (max-width: 575px) {
  .veysel-media-grid { grid-template-columns: 1fr; gap: 32px; }
  .veysel-media-press { margin-top: 70px; }
  .veysel-press-item__link { padding: 22px 40px 22px 0; }
  .veysel-press-item__title { font-size: 19px; }
}

/*
  The theme capitalises every word in the footer lists. That is right for a page
  name and wrong for an address: an e-mail printed as "Merhaba@Example.Com" reads
  as a typing mistake, even though the link under it is correct. The contact
  column holds values exactly as they were typed, so it keeps its own casing.
*/
.footer-widget--contact .bs-footer-1-menu a,
.footer-widget--contact .vb-footer-contact-text {
  text-transform: none;
}

/*
  The contact grid was built for exactly three boxes. It now holds however many
  channels were filled in, so the column count follows the content and the last
  box in a row never carries a divider into empty space.
*/
body .vb-site-main .bs-core-feature-6-wrap[data-channels="1"] { grid-template-columns: 1fr; }
body .vb-site-main .bs-core-feature-6-wrap[data-channels="2"] { grid-template-columns: repeat(2, 1fr); }
body .vb-site-main .bs-core-feature-6-wrap[data-channels="4"] { grid-template-columns: repeat(4, 1fr); }
@media (min-width: 992px) and (max-width: 1199px) {
  body .vb-site-main .bs-core-feature-6-wrap[data-channels="4"] { grid-template-columns: repeat(2, 1fr); }
  body .vb-site-main .bs-core-feature-6-wrap[data-channels="4"] .bs-core-feature-4-item:nth-child(2) { border-right: none; }
  body .vb-site-main .bs-core-feature-6-wrap[data-channels="4"] .bs-core-feature-4-item:nth-child(-n+2) {
    border-bottom: 1px solid #D9D9D9;
    padding-bottom: 24px;
  }
}

/* ==========================================================================
   Page title band
   ========================================================================== */

/*
  The band behind the page title was flat black, which belongs to no part of this
  palette. It now carries the same navy the top bar uses, so an inner page opens
  in the site's own colour rather than in a hole.
*/
section.breadcrumb-area .breadcrumb-bg-img::before {
  background: linear-gradient(100deg, #0d1b3a 0%, #1a2744 52%, #243652 100%);
}

/* ==========================================================================
   About — one portrait, identity beside it
   ========================================================================== */

/*
  Replaces the four-slide carousel that used to stand here. One photograph at a
  size worth looking at, and next to it the plain answer to "who is this": the
  name, the title, where he is, and the channels filled in from the panel.
*/
.veysel-portrait {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: center;
  gap: clamp(28px, 4vw, 64px);
  margin-bottom: 56px;
}

.veysel-portrait__frame {
  margin: 0;
  border-radius: 16px;
  overflow: hidden;
  background: #eef1f6;
  aspect-ratio: 4 / 5;
  max-height: 560px;
}
.veysel-portrait__frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
  display: block;
}

.veysel-portrait__card { min-width: 0; }

.veysel-portrait__eyebrow {
  margin: 0 0 14px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--bs-clr-pr-1, #01236a);
  opacity: 0.7;
}
.veysel-portrait__name {
  margin: 0 0 10px;
  font-size: clamp(28px, 3.4vw, 44px);
  line-height: 1.15;
  letter-spacing: -0.02em;
}
.veysel-portrait__role {
  margin: 0 0 28px;
  font-size: clamp(17px, 1.3vw, 20px);
  line-height: 1.5;
  opacity: 0.78;
}

.veysel-portrait__facts {
  margin: 0;
  padding: 24px 0 0;
  border-top: 1px solid rgba(1, 35, 106, 0.14);
  display: grid;
  gap: 14px;
}
.veysel-portrait__facts li {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 16px;
  line-height: 1.5;
}
.veysel-portrait__facts i {
  width: 34px;
  height: 34px;
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: rgba(1, 35, 106, 0.08);
  color: var(--bs-clr-pr-1, #01236a);
  font-size: 14px;
}
.veysel-portrait__facts a {
  min-width: 0;
  overflow-wrap: anywhere;
  color: inherit;
  border-bottom: 1px solid rgba(1, 35, 106, 0.3);
  padding-bottom: 1px;
}
.veysel-portrait__facts a:hover,
.veysel-portrait__facts a:focus-visible {
  color: var(--bs-clr-pr-1, #01236a);
  border-bottom-color: currentColor;
}

@media (max-width: 767px) {
  .veysel-portrait {
    grid-template-columns: 1fr;
    gap: 28px;
    margin-bottom: 40px;
  }
  .veysel-portrait__frame { aspect-ratio: 3 / 4; max-height: 420px; }
  .veysel-portrait__role { margin-bottom: 22px; }
}

/* ==========================================================================
   Experience & education
   ========================================================================== */

/*
  Records are grouped under the type chosen for them in the panel, and run down a
  single line in date order. What stood here was a row of equal-height boxes, so a
  short entry left a tall empty rectangle next to a long one.
*/
.veysel-career {
  max-width: 820px;
  margin-inline: auto;
}
.veysel-career__group + .veysel-career__group { margin-top: clamp(48px, 6vw, 76px); }

.veysel-career__heading {
  margin: 0 0 28px;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--bs-clr-pr-1, #01236a);
}

.veysel-career__list {
  margin: 0;
  padding: 0 0 0 30px;
  border-left: 2px solid rgba(1, 35, 106, 0.12);
}
.veysel-career__item {
  position: relative;
  padding-bottom: 38px;
}
.veysel-career__item:last-child { padding-bottom: 0; }

/* The marker sits on the line, not beside it. */
.veysel-career__item::before {
  content: "";
  position: absolute;
  left: -37px;
  top: 7px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--bs-clr-pr-1, #01236a);
  box-shadow: 0 0 0 4px #fff;
}

.veysel-career__period {
  margin: 0 0 6px;
  font-size: 14px;
  letter-spacing: 0.02em;
  opacity: 0.65;
}
.veysel-career__title {
  margin: 0 0 4px;
  font-size: clamp(20px, 2vw, 25px);
  line-height: 1.3;
}
.veysel-career__org {
  margin: 0 0 12px;
  font-size: 16px;
  font-weight: 600;
  color: var(--bs-clr-pr-1, #01236a);
}
.veysel-career__disc { margin: 0; }
.veysel-career__disc p { margin: 0 0 10px; }
.veysel-career__disc p:last-child { margin-bottom: 0; }

@media (max-width: 575px) {
  .veysel-career__list { padding-left: 22px; }
  .veysel-career__item::before { left: -29px; width: 10px; height: 10px; }
  .veysel-career__item { padding-bottom: 30px; }
}

/* ==========================================================================
   Articles — list and detail
   ========================================================================== */

/*
  The list had a sidebar that repeated three of the articles standing next to it.
  With it gone the cards take the whole width, in as many columns as fit.
*/
body .vb-site-main .bs-blog-page-2-wrap { grid-template-columns: 1fr; }
.bs-blog-page-2-item {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 44px 32px;
}
body .vb-site-main .bs-blog-page-2-item .bs-blog-4-item { margin-bottom: 0; }

/* The label on a card is the article's category, so it carries the theme colour. */
body .vb-site-main .bs-blog-4-item .author {
  color: var(--bs-clr-pr-1, #01236a);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-size: 12px;
}

/* --- what follows the article text --- */

.veysel-post-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  margin-top: 48px;
  padding-top: 28px;
  border-top: 1px solid rgba(1, 35, 106, 0.14);
}
.veysel-post-share {
  display: flex;
  align-items: center;
  gap: 10px;
}
.veysel-post-share__label {
  font-size: 14px;
  opacity: 0.7;
  margin-right: 4px;
}
.veysel-post-share__btn {
  width: 40px;
  height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(1, 35, 106, 0.18);
  border-radius: 50%;
  background: transparent;
  color: var(--bs-clr-pr-1, #01236a);
  font-size: 15px;
  padding: 0;
  cursor: pointer;
  transition: background 0.25s ease, color 0.25s ease, border-color 0.25s ease;
}
.veysel-post-share__btn:hover,
.veysel-post-share__btn:focus-visible {
  background: var(--bs-clr-pr-1, #01236a);
  border-color: var(--bs-clr-pr-1, #01236a);
  color: #fff;
}
/* The copy button answers in place: a tick, then back to the link icon. */
.veysel-post-share__btn.is-copied {
  background: #0f766e;
  border-color: #0f766e;
  color: #fff;
}
.veysel-post-share__btn.is-copied i::before { content: "\f00c"; }

.veysel-post-back {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-weight: 600;
  color: var(--bs-clr-pr-1, #01236a);
}
.veysel-post-back:hover { opacity: 0.75; }

/* --- related articles --- */

.veysel-related { margin-top: clamp(56px, 7vw, 90px); }
.veysel-related__heading {
  margin: 0 0 28px;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--bs-clr-pr-1, #01236a);
}
.veysel-related__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 30px;
}
.veysel-related__frame {
  display: block;
  aspect-ratio: 16 / 10;
  border-radius: 12px;
  overflow: hidden;
  background: #eef1f6;
  margin-bottom: 14px;
}
.veysel-related__frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s cubic-bezier(0.19, 1, 0.22, 1);
}
.veysel-related__item:hover .veysel-related__frame img { transform: scale(1.04); }
.veysel-related__cat {
  margin: 0 0 6px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--bs-clr-pr-1, #01236a);
  opacity: 0.8;
}
.veysel-related__title { margin: 0 0 6px; font-size: 19px; line-height: 1.4; }
.veysel-related__title a { color: inherit; }
.veysel-related__title a:hover { color: var(--bs-clr-pr-1, #01236a); }
.veysel-related__date { margin: 0; font-size: 14px; opacity: 0.6; }

@media (max-width: 575px) {
  .veysel-post-foot { flex-direction: column; align-items: flex-start; }
  .bs-blog-page-2-item { grid-template-columns: 1fr; gap: 32px; }
}

/* ==========================================================================
   Focus areas
   ========================================================================== */

/*
  The card now carries the short description written for it in the panel, which
  until now only ever reached the detail page and the search-engine summary.
*/
.bs-services-3-card .card-subtitle {
  margin: -6px 0 16px;
  font-size: 14px;
  line-height: 1.55;
  opacity: 0.72;
}

/* A single link needs no space reserved for a share row beside it. */
.veysel-post-foot--single { justify-content: flex-start; }

/* Articles filed under this area. */
.veysel-topic-list { margin: 0; padding: 0; }
.veysel-topic-list li { border-top: 1px solid rgba(1, 35, 106, 0.12); }
.veysel-topic-list li:last-child { border-bottom: 1px solid rgba(1, 35, 106, 0.12); }
.veysel-topic-list a {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px 20px;
  padding: 18px 0;
  color: inherit;
  transition: color 0.25s ease, padding-left 0.25s ease;
}
.veysel-topic-list a:hover,
.veysel-topic-list a:focus-visible {
  color: var(--bs-clr-pr-1, #01236a);
  padding-left: 8px;
}
.veysel-topic-list__title { font-size: 18px; font-weight: 600; line-height: 1.4; }
.veysel-topic-list__date { font-size: 14px; opacity: 0.6; }

/* ==========================================================================
   Contact
   ========================================================================== */

/*
  Words on one side, photograph on the other. The channel list sits under the
  invitation rather than in a separate strip of boxes above it, so a page with
  two channels filled in reads as deliberate instead of unfinished.
*/
body .vb-site-main .bs-contact-6-wrap {
  align-items: center;
  gap: clamp(32px, 5vw, 72px);
}
body .vb-site-main .bs-contact-6-content .bs-form-1 { margin-bottom: 36px; }

.veysel-social-links {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 24px;
  margin: 0;
  padding: 0;
}
.veysel-social-links a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  color: inherit;
  font-size: 16px;
}
.veysel-social-links i { color: var(--bs-clr-pr-1, #01236a); }
.veysel-social-links a:hover,
.veysel-social-links a:focus-visible { color: var(--bs-clr-pr-1, #01236a); }

.veysel-contact-channels {
  margin: 0;
  padding: 28px 0 0;
  border-top: 1px solid rgba(1, 35, 106, 0.14);
  display: grid;
  gap: 14px;
}
.veysel-contact-channels__label {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--bs-clr-pr-1, #01236a);
  opacity: 0.65;
  margin-bottom: 2px;
}
.veysel-contact-channels li {
  display: flex;
  align-items: center;
  gap: 14px;
  font-size: 16px;
  line-height: 1.5;
  overflow-wrap: anywhere;
}
.veysel-contact-channels i {
  width: 36px;
  height: 36px;
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: rgba(1, 35, 106, 0.08);
  color: var(--bs-clr-pr-1, #01236a);
  font-size: 14px;
}
.veysel-contact-channels a {
  color: inherit;
  border-bottom: 1px solid rgba(1, 35, 106, 0.28);
  padding-bottom: 1px;
}
.veysel-contact-channels a:hover,
.veysel-contact-channels a:focus-visible {
  color: var(--bs-clr-pr-1, #01236a);
  border-bottom-color: currentColor;
}

@media (max-width: 991px) {
  body .vb-site-main .bs-contact-6-wrap { grid-template-columns: 1fr; }
}

/*
  The opening photographs are wide, and `cover` crops whatever does not fit. On a
  desktop the slide is wider than it is tall, so almost the whole frame survives;
  on a narrow screen the slide is taller than it is wide and the crop eats both
  sides, leaving only the middle. Anchoring the crop to the left keeps the part of
  the picture that is actually composed against the headline, which sits on the
  left and carries the dark side of the scrim.

  Both layers are pinned: the <img> is what paints, and the background behind it
  is the fallback before the image decodes.
*/
@media (max-width: 991px) {
  body .vb-site-main .bs-hero-1-lcp-img { object-position: left center; }
  body .vb-site-main .bs-hero-1-slide { background-position: left center; }
}

/*
  The scrim runs left to right, which suits a wide slide: the words sit on the
  left against the dark end and the photograph breathes on the right. A phone has
  no right-hand side — the headline spans the full width, so the darkest end of
  that gradient covered the entire picture.

  Here it runs top to bottom instead. The upper third stays light enough to read
  the photograph, and the shading gathers over the band the words actually
  occupy, which measures 40%–65% of the slide on a phone.
*/
@media (max-width: 991px) {
  body .bs-hero-1-slide-overlay {
    background: linear-gradient(180deg,
      rgba(3, 12, 32, 0.20) 0%,
      rgba(3, 12, 32, 0.24) 28%,
      rgba(3, 12, 32, 0.70) 44%,
      rgba(3, 12, 32, 0.74) 68%,
      rgba(3, 12, 32, 0.66) 100%);
  }
}

/*
  The outline button on the opening slide draws its label with a pseudo-element,
  and the theme colours that with the near-black heading colour. Over a
  photograph that is black on black: the button was there, outlined and
  clickable, with nothing readable inside it. Everything else in the hero is
  white, so the label is too. The hover state already fills the button with the
  brand navy and swaps in its own white label, so it is left alone.
*/
body .vb-site-main .bs-hero-1-slide-btns .bs-pr-btn-2 .text::before {
  color: var(--bs-clr-white-1, #fff);
}