/* ==========================================================================
   EV Service Show — brand accent layer
   Loaded AFTER style.css. Reintroduces the logo yellow as a contrast-safe
   "pop" color on top of the navy-primary base palette.
   Brand: navy #232C66 / deep navy #1B2350 + yellow #FDB813
   ========================================================================== */

/* ---- Primary button: yellow fill + navy text, navy fill on hover ---------- */
.theme-btn {
  background: var(--accent-yellow);
  color: var(--color-dark);
  box-shadow: 0 8px 22px rgba(253, 184, 19, .35);
  font-weight: 600;
}
.theme-btn::before { background: var(--color-dark); }
.theme-btn:hover { color: #fff; }

/* Secondary button: white fill + navy text, navy fill on hover */
.theme-btn2 { background: var(--color-white); color: var(--color-dark); }
.theme-btn2::before { background: var(--color-dark); }
.theme-btn2:hover { color: #fff; }

/* On dark backgrounds, keep the secondary readable */
.ecosystem-area .theme-btn2,
.cta-area .theme-btn2 { color: var(--color-dark); }

/* ---- Navigation: yellow hover / active ------------------------------------ */
.navbar .nav-item .nav-link:hover,
.navbar .nav-item .nav-link.active,
.navbar .dropdown-item:hover {
  color: var(--accent-yellow);
}
.navbar .dropdown-item:hover { background: rgba(253, 184, 19, .08); }

/* ---- Section heading label + accent underline ----------------------------- */
.site-heading .site-subtitle,
.site-heading .sub-title,
.sub-title,
.subtitle {
  color: var(--accent-amber-text);
  font-weight: 600;
  letter-spacing: .5px;
}
.site-heading .site-title::after,
.title-underline::after {
  content: "";
  display: block;
  width: 64px;
  height: 4px;
  border-radius: 4px;
  background: var(--accent-yellow);
  margin: 18px auto 0;
}
.text-start .site-title::after,
.text-start.title-underline::after { margin-left: 0; margin-right: auto; }

/* ---- Yellow pill/badge (for hero + section labels in our markup) ----------- */
.brand-badge {
  display: inline-block;
  background: var(--accent-yellow);
  color: var(--color-dark);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: .6px;
  text-transform: uppercase;
  padding: 7px 16px;
  border-radius: 50px;
}
.brand-badge.badge-outline {
  background: transparent;
  border: 1px solid var(--accent-yellow);
  color: var(--accent-yellow);
}

/* ---- Hero: navy overlay + yellow highlight in title ----------------------- */
.hero-single .hero-content .hero-title span { color: var(--accent-yellow); }
.hero-date h1 { color: var(--accent-yellow); }
/* Roof message (çatı mesajı) must be high-contrast white on the navy hero */
.hero-single .hero-content .hero-sub-title { color: #fff; opacity: .95; }
.hero-single .hero-content p { color: #E7EAF6; }

/* ---- Icons / list markers / links ----------------------------------------- */
.footer-list a:hover,
.footer-contact a:hover { color: var(--accent-yellow); }
.footer-list i,
.fa-caret-right { color: var(--accent-yellow); }
.footer-social a:hover i,
.footer-list.social a:hover i { color: var(--accent-yellow); }

a { color: var(--theme-color); }
a:hover { color: var(--accent-yellow-dark); }

/* ---- Scroll-to-top -------------------------------------------------------- */
#scroll-top { background: var(--accent-yellow); }
#scroll-top i { color: var(--color-dark); }

/* ---- Feature / icon chips used in our pages ------------------------------- */
.brand-icon-box {
  background: #fff;
  border: 1px solid var(--border-info-color);
  border-radius: 14px;
  padding: 30px 26px;
  height: 100%;
  transition: var(--transition2);
}
.brand-icon-box:hover {
  border-color: var(--accent-yellow);
  box-shadow: 0 18px 40px rgba(27, 35, 80, .10);
  transform: translateY(-4px);
}
.brand-icon-box .icon {
  width: 58px;
  height: 58px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 12px;
  background: rgba(253, 184, 19, .15);
  color: var(--color-dark);
  font-size: 24px;
  margin-bottom: 18px;
}
.brand-icon-box h5 { color: var(--color-dark); margin-bottom: 10px; }

/* Numbered product-group chip */
.brand-num-box { position: relative; }
.brand-num-box .num {
  flex: 0 0 auto;
  width: 44px;
  height: 44px;
  border-radius: 10px;
  background: var(--accent-yellow);
  color: var(--color-dark);
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ---- Dark brand section helper -------------------------------------------- */
.brand-dark-section {
  background: linear-gradient(135deg, #1B2350 0%, #232C66 100%);
  color: #fff;
}
.brand-dark-section .site-title,
.brand-dark-section h1,
.brand-dark-section h2,
.brand-dark-section h3 { color: #fff; }

/* CTA band — EV Charge Show's original deep ecosystem colors */
.brand-cta-band {
  background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
  color: #fff;
}
.brand-cta-band h1,
.brand-cta-band h2,
.brand-cta-band h3,
.brand-cta-band h4 { color: #fff; }

/* ---- Footer copyright link: yellow for contrast on dark footer ------------ */
.copyright .copyright-text a { color: var(--accent-yellow); }
.copyright .copyright-text a:hover { color: var(--accent-yellow-dark); }

/* ---- Utility text colors -------------------------------------------------- */
.text-theme { color: var(--theme-color) !important; }
.text-accent { color: var(--accent-amber-text) !important; }
.bg-accent { background: var(--accent-yellow) !important; color: var(--color-dark) !important; }
.bg-navy { background: var(--theme-color) !important; color: #fff !important; }

/* ---- Logo: full-colour PNG, rendered as a white silhouette on dark --------- */
#navbar-logo { width: auto !important; height: 44px; transition: filter .3s ease; }
.logo-on-dark { filter: brightness(0) invert(1); }
/* keep a gap between the logo and the menu, and never wrap a nav label */
.navbar-brand { margin-right: 28px; }
.navbar .nav-item .nav-link { white-space: nowrap; }
/* The theme paints a white panel behind the navbar; our header is a navy
   gradient at the top and the sticky (.fixed-top) navbar supplies its own
   white background, so this legacy panel is redundant and only muddies the
   white logo silhouette over the hero. */
.navbar::before { display: none; }

/* ==========================================================================
   Inner-page hero banner (navy gradient) + shared page building blocks
   ========================================================================== */
.brand-page-hero {
  position: relative;
  background: linear-gradient(135deg, #151B3D 0%, #232C66 55%, #2E3A80 100%);
  color: #fff;
  padding: 190px 0 90px;
  overflow: hidden;
}
.brand-page-hero::after {
  content: "";
  position: absolute;
  right: -80px;
  top: -80px;
  width: 320px;
  height: 320px;
  background: radial-gradient(circle, rgba(253,184,19,.18) 0%, rgba(253,184,19,0) 70%);
  z-index: 0;
}
.brand-page-hero .container { position: relative; z-index: 1; }
.brand-page-hero .page-hero-badge {
  display: inline-block;
  background: var(--accent-yellow);
  color: var(--color-dark);
  font-weight: 700;
  font-size: 12px;
  letter-spacing: .7px;
  text-transform: uppercase;
  padding: 6px 15px;
  border-radius: 50px;
  margin-bottom: 16px;
}
.brand-page-hero h1 {
  color: #fff;
  font-size: 42px;
  font-weight: 700;
  margin-bottom: 14px;
}
.brand-page-hero .page-hero-lead {
  color: #E7EAF6;
  font-size: 18px;
  max-width: 760px;
  margin-bottom: 0;
}
.brand-page-hero .breadcrumb-menu {
  margin: 14px 0 0;
  padding: 0;
  list-style: none;
  font-size: 14px;
}
.brand-page-hero .breadcrumb-menu li { display: inline-block; color: #C9CEE6; }
.brand-page-hero .breadcrumb-menu li a { color: var(--accent-yellow); }
.brand-page-hero .breadcrumb-menu li + li::before {
  content: "\f101";
  font-family: 'Font Awesome 6 Pro';
  margin: 0 10px;
  color: #7F87B8;
}
/* Below the lg breakpoint the navbar collapses to a ~72px logo+hamburger bar. Because
   `main.main` is pulled up under the transparent navbar via margin-top:-144px, the inner-page
   hero needs extra top padding here so its badge/title clear the logo instead of colliding. */
@media (max-width: 991px) {
  .brand-page-hero { padding: 230px 0 60px; }
}
@media (max-width: 767px) {
  .brand-page-hero { padding: 225px 0 50px; }
  .brand-page-hero h1 { font-size: 30px; }
  .brand-page-hero .page-hero-lead { font-size: 16px; }
}

/* ---- Roof message strip (çatı mesajı — same words on every page) ---------- */
.brand-roof {
  background: rgba(253,184,19,.12);
  border-left: 4px solid var(--accent-yellow);
  border-radius: 8px;
  padding: 18px 24px;
}
.brand-roof p { margin: 0; font-weight: 600; color: var(--color-dark); }

/* ---- Simple bulleted feature list with yellow check markers --------------- */
.brand-check-list { list-style: none; padding: 0; margin: 0; }
.brand-check-list li {
  position: relative;
  padding-left: 30px;
  margin-bottom: 14px;
  line-height: 1.6;
}
.brand-check-list li::before {
  content: "\f00c";
  font-family: 'Font Awesome 6 Pro';
  font-weight: 900;
  position: absolute;
  left: 0;
  top: 2px;
  color: var(--accent-yellow);
}
.brand-dark-section .brand-check-list li { color: #D7DBEE; }

/* ---- Stat card ------------------------------------------------------------ */
.brand-stat {
  background: #fff;
  border: 1px solid var(--border-info-color);
  border-radius: 14px;
  padding: 28px 24px;
  height: 100%;
}
.brand-stat .stat-num { font-size: 30px; font-weight: 800; color: var(--theme-color); }
.brand-stat .stat-label { color: var(--color-dark); font-weight: 600; margin: 6px 0 4px; }

/* ---- Info / contact rows -------------------------------------------------- */
.brand-info-row { display: flex; gap: 14px; align-items: flex-start; margin-bottom: 16px; }
.brand-info-row .ic {
  flex: 0 0 auto;
  width: 46px; height: 46px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 10px;
  background: rgba(253,184,19,.15);
  color: var(--color-dark);
  font-size: 18px;
}

/* ---- Pricing / accordion helpers ------------------------------------------ */
.brand-price-card {
  background: #fff;
  border: 1px solid var(--border-info-color);
  border-radius: 16px;
  padding: 32px 28px;
  height: 100%;
  transition: var(--transition2);
}
.brand-price-card:hover { border-color: var(--accent-yellow); box-shadow: 0 18px 40px rgba(27,35,80,.10); transform: translateY(-4px); }
.brand-price-card.featured { border-color: var(--accent-yellow); box-shadow: 0 18px 40px rgba(27,35,80,.12); }
.brand-price-card .price { font-size: 30px; font-weight: 800; color: var(--theme-color); }
.brand-price-card .price small { font-size: 15px; font-weight: 500; color: var(--body-color); }

.brand-table { width: 100%; border-collapse: collapse; }
.brand-table th, .brand-table td { padding: 14px 16px; border: 1px solid var(--border-info-color); text-align: left; vertical-align: top; }
.brand-table thead th { background: var(--theme-color); color: #fff; font-weight: 600; }
.brand-table tbody tr:nth-child(even) { background: var(--theme-bg-light); }

/* ---- Form (static UI) ----------------------------------------------------- */
.brand-form { background: #fff; border: 1px solid var(--border-info-color); border-radius: 16px; padding: 34px; }
.brand-form label { font-weight: 600; color: var(--color-dark); margin-bottom: 6px; display: block; font-size: 14px; }
.brand-form .form-control,
.brand-form .form-select {
  border: 1px solid var(--border-info-color);
  border-radius: 10px;
  padding: 12px 14px;
  width: 100%;
  background: var(--theme-bg-light);
}
.brand-form .form-control:focus,
.brand-form .form-select:focus { border-color: var(--accent-yellow); box-shadow: 0 0 0 3px rgba(253,184,19,.15); outline: none; background: #fff; }

/* ---- Accordion (product groups etc.) -------------------------------------- */
.brand-accordion .acc-item { border: 1px solid var(--border-info-color); border-radius: 12px; margin-bottom: 14px; overflow: hidden; background: #fff; }
.brand-accordion .acc-head {
  display: flex; align-items: center; gap: 16px;
  width: 100%; text-align: left;
  padding: 20px 24px; background: #fff; border: 0; cursor: pointer;
  font-weight: 600; color: var(--color-dark); font-size: 17px;
}
.brand-accordion .acc-head .num {
  flex: 0 0 auto; width: 40px; height: 40px; border-radius: 10px;
  background: var(--accent-yellow); color: var(--color-dark);
  font-weight: 700; display: flex; align-items: center; justify-content: center;
}
.brand-accordion .acc-head .chev { margin-left: auto; color: var(--accent-yellow); transition: transform .3s; }
.brand-accordion .acc-item.open .acc-head .chev { transform: rotate(180deg); }
.brand-accordion .acc-body { padding: 0 24px 8px 80px; display: none; }
.brand-accordion .acc-item.open .acc-body { display: block; }
.brand-accordion .acc-body .intro { color: var(--color-dark); font-weight: 500; margin: 4px 0 14px; }

/* ---- Language switcher (TR | EN) ------------------------------------------ */
/* Sits in .nav-right over the transparent hero navbar, so it mirrors the nav
   links: light over the dark hero, dark once the navbar sticks (.fixed-top, white). */
.lang-switch { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; font-size: 14px; }
.lang-switch a { color: #fff; opacity: .7; text-decoration: none; transition: opacity .2s, color .2s; }
.lang-switch a:hover { opacity: 1; color: var(--accent-yellow); }
.lang-switch a.active { opacity: 1; color: var(--accent-yellow); }
.lang-switch span { color: rgba(255, 255, 255, .5); }
/* Sticky white navbar: switch to dark text for contrast. */
.navbar.fixed-top .lang-switch a { color: var(--color-dark); }
.navbar.fixed-top .lang-switch a:hover,
.navbar.fixed-top .lang-switch a.active { color: var(--theme-color); }
.navbar.fixed-top .lang-switch span { color: rgba(27, 35, 80, .35); }
/* Mobile collapse menu is always light, regardless of scroll/.fixed-top. */
@media all and (max-width: 991px) {
  .navbar-collapse .lang-switch a { color: var(--color-dark); }
  .navbar-collapse .lang-switch a:hover,
  .navbar-collapse .lang-switch a.active { color: var(--theme-color); }
  .navbar-collapse .lang-switch span { color: rgba(27, 35, 80, .35); }
}

/* ── Nav account (user) menu ───────────────────────────────────── */
.user-menu .fa-circle-user { font-size: 26px; line-height: 1; }
.user-menu.nav-link,
.user-menu .nav-link { display: inline-flex; align-items: center; }
.user-menu .dropdown-menu { min-width: 190px; }
.user-menu .dropdown-toggle::after { display: none; } /* hide bootstrap caret, icon is enough */

/* ── Profile ticket card ───────────────────────────────────────── */
.brand-ticket {
    display: flex;
    background: #fff;
    border-radius: 18px;
    overflow: hidden;
    box-shadow: 0 18px 45px rgba(35, 44, 102, .18);
    position: relative;
}
.brand-ticket .ticket-main {
    flex: 1;
    padding: 30px 32px;
    background: linear-gradient(135deg, #232C66 0%, #1B2350 100%);
    color: #fff;
}
.brand-ticket .ticket-main .tk-eyebrow {
    color: var(--accent-yellow, #FDB813);
    font-size: 12px;
    letter-spacing: 2px;
    text-transform: uppercase;
    font-weight: 700;
    margin-bottom: 6px;
}
.brand-ticket .ticket-main .tk-name { font-size: 26px; font-weight: 800; line-height: 1.15; }
.brand-ticket .ticket-main .tk-company { color: #c9cee6; font-size: 15px; margin-top: 2px; }
.brand-ticket .ticket-main .tk-meta { margin-top: 22px; display: grid; grid-template-columns: 1fr 1fr; gap: 14px 18px; }
.brand-ticket .ticket-main .tk-meta .lbl { display: block; font-size: 11px; letter-spacing: 1px; text-transform: uppercase; color: #9aa0c4; }
.brand-ticket .ticket-main .tk-meta .val { font-weight: 700; font-size: 15px; }
.brand-ticket .ticket-stub {
    width: 250px;
    padding: 28px 24px;
    background: #fff;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    border-left: 2px dashed #cfd6ec;
    position: relative;
}
/* perforation notches */
.brand-ticket .ticket-stub::before,
.brand-ticket .ticket-stub::after {
    content: "";
    position: absolute;
    left: -13px;
    width: 24px;
    height: 24px;
    background: var(--theme-bg-light, #F5F8FD);
    border-radius: 50%;
}
.brand-ticket .ticket-stub::before { top: -13px; }
.brand-ticket .ticket-stub::after { bottom: -13px; }
.brand-ticket .ticket-stub img { width: 100%; max-width: 190px; border-radius: 10px; }
.brand-ticket .ticket-stub .tk-scan { font-size: 12px; color: #6b7280; margin-top: 12px; }
.brand-ticket .ticket-stub .tk-no { font-size: 13px; color: var(--color-dark, #1B2350); font-weight: 700; margin-top: 4px; letter-spacing: 1px; }
@media (max-width: 767px) {
    .brand-ticket { flex-direction: column; }
    .brand-ticket .ticket-stub { width: 100%; border-left: none; border-top: 2px dashed #cfd6ec; }
    .brand-ticket .ticket-stub::before { left: -13px; top: -13px; }
    .brand-ticket .ticket-stub::after { left: auto; right: -13px; top: -13px; bottom: auto; }
}

/* ---- Supporter logo strip (Home / About / Supporters) --------------------- */
.supporter-logos {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 24px 48px;
}
.supporter-logos .supporter-logo {
    flex: 0 1 auto;
    display: flex;
    align-items: center;
    justify-content: center;
}
.supporter-logos .supporter-logo img {
    height: 70px;
    width: auto;
    max-width: 100%;
    object-fit: contain;
    filter: grayscale(100%);
    opacity: .85;
    transition: filter .25s ease, opacity .25s ease;
}
.supporter-logos .supporter-logo img:hover {
    filter: none;
    opacity: 1;
}
/* TOBFED artwork reads larger than the others — trim it ~18% to balance the row */
.supporter-logos .supporter-logo--tobfed img { height: 58px; }
@media (max-width: 575px) {
    .supporter-logos { gap: 22px 28px; }
    .supporter-logos .supporter-logo img { height: 52px; }
    .supporter-logos .supporter-logo--tobfed img { height: 43px; }
}

/* ---- Hero: TOBFED official-support logo, framed with a white caption ------- */
.hero-support-logo {
    display: flex;
    flex-direction: column;
    max-width: 240px;
    margin-left: auto;
}
.hero-support-logo .hero-support-label {
    color: #fff;
    font-size: 20px;
    font-weight: 600;
    letter-spacing: 1.4px;
    text-transform: uppercase;
    opacity: .85;
    text-align: center;
}
.hero-support-logo .hero-support-frame {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    padding: 30px 30px;
    border: 1px solid rgba(255, 255, 255, .28);
    border-radius: 18px;
    background: rgba(255, 255, 255, .04);
    backdrop-filter: blur(2px);
}
.hero-support-logo .hero-support-frame img {
    width: 100%;
    height: auto;
    /* PNG artwork forced to a solid white silhouette on the navy hero */
    filter: brightness(0) invert(1);
    opacity: .95;
}
@media (max-width: 991px) {
    .hero-support-logo {
        align-items: center;         /* centered under the hero copy on mobile */
        margin: 40px auto 0;
    }
}