/**
 * Technology Theme - OJS
 * Modern, Professional Academic & Computer Science Journal Theme
 * Primary Brand Color: #033692
 */

@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;1,400;1,600&family=JetBrains+Mono:wght@400;500;600&display=swap');

:root {
  --tech-font: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --tech-font-mono: 'JetBrains Mono', SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  --tech-primary: #033692;
  --tech-primary-hover: #022468;
  --tech-primary-light: #1a56c4;
  --tech-primary-rgb: 3, 54, 146;
  --tech-accent: #00b4d8;
  --tech-accent-rgb: 0, 180, 216;
  --tech-cyan: #06b6d4;
  --tech-navy-dark: #021330;
  --tech-navy-mid: #05204d;
  --tech-navy-surface: #0a2558;
  --tech-navy-card: #0e306e;
  --tech-gradient: linear-gradient(135deg, #033692 0%, #0c57c4 50%, #021e54 100%);
  --tech-gradient-dark: linear-gradient(135deg, #021029 0%, #032d78 50%, #021e54 100%);
  --tech-gradient-hero: linear-gradient(135deg, #020f26 0%, #032a70 45%, #053b9c 80%, #021e54 100%);
  --tech-gradient-card: linear-gradient(180deg, rgba(255, 255, 255, 0.08) 0%, rgba(255, 255, 255, 0.02) 100%);
  --tech-subtle: #edf3fc;
  --tech-subtle-blue: #e0ecff;
  --tech-bg: #f8fafc;
  --tech-surface: #ffffff;
  --tech-gray-50: #f8fafc;
  --tech-gray-100: #f1f5f9;
  --tech-gray-200: #e2e8f0;
  --tech-gray-300: #cbd5e1;
  --tech-gray-400: #94a3b8;
  --tech-gray-600: #475569;
  --tech-gray-700: #334155;
  --tech-gray-800: #1e293b;
  --tech-gray-900: #0f172a;
  --tech-shadow-2xs: 0 1px 2px 0 rgba(3, 54, 146, 0.04);
  --tech-shadow-sm: 0 2px 5px 0 rgba(3, 54, 146, 0.06);
  --tech-shadow: 0 6px 16px -2px rgba(3, 54, 146, 0.08), 0 2px 6px -1px rgba(0, 0, 0, 0.04);
  --tech-shadow-lg: 0 14px 30px -4px rgba(3, 54, 146, 0.12), 0 6px 12px -3px rgba(0, 0, 0, 0.06);
  --tech-shadow-xl: 0 22px 42px -6px rgba(3, 54, 146, 0.18), 0 12px 18px -4px rgba(0, 0, 0, 0.08);
  --tech-radius-sm: 0.45rem;
  --tech-radius: 0.75rem;
  --tech-radius-lg: 1rem;
  --tech-radius-xl: 1.5rem;
}

body { font-family: var(--tech-font); color: var(--tech-gray-800); background-color: var(--tech-bg); line-height: 1.65; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
::selection { background-color: var(--tech-primary); color: #ffffff; }
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: var(--tech-gray-100); }
::-webkit-scrollbar-thumb { background: var(--tech-gray-300); border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: var(--tech-primary); }

.container, .container-sm, .container-md, .container-lg, .container-xl, .container-xxl { width: 100%; padding-right: 1.25rem !important; padding-left: 1.25rem !important; margin-right: auto; margin-left: auto; }
@media (min-width: 1200px) { .container, .container-sm, .container-md, .container-lg, .container-xl, .container-xxl { max-width: 1180px !important; padding-right: 1.5rem !important; padding-left: 1.5rem !important; } }
@media (min-width: 1400px) { .container, .container-sm, .container-md, .container-lg, .container-xl, .container-xxl { max-width: 1300px !important; padding-right: 1.75rem !important; padding-left: 1.75rem !important; } }

/* TOP BAR */
.tech-top-bar { background: var(--tech-navy-dark); color: #a0aec0; font-size: 0.8125rem; padding: 0.45rem 0; border-bottom: 1px solid rgba(255,255,255,0.08); }
.tech-top-bar a { color: #cbd5e1; text-decoration: none; transition: all 0.2s ease; }
.tech-top-bar a:hover { color: #ffffff; }
.tech-top-bar .issn-badge { display: inline-flex; align-items: center; gap: 0.35rem; padding: 0.15rem 0.55rem; background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.12); border-radius: 0.35rem; color: #ffffff; font-size: 0.775rem; font-family: var(--tech-font-mono); transition: all 0.2s ease; }
.tech-top-bar a.issn-badge:hover { background: rgba(255,255,255,0.18); border-color: rgba(255,255,255,0.35); color: #ffffff; transform: translateY(-1px); }

/* NAVBAR */
.tech-navbar { background: rgba(255,255,255,0.98); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); box-shadow: 0 4px 18px rgba(3,54,146,0.1); padding: 0.75rem 0; border-bottom: 1px solid var(--tech-gray-200); transition: all 0.25s cubic-bezier(0.4,0,0.2,1); position: sticky !important; top: 0 !important; z-index: 1040 !important; }
.tech-brand { display: flex; align-items: center; gap: 0.85rem; text-decoration: none; color: var(--tech-gray-900); }
.tech-brand-logo { max-height: 52px; width: auto; object-fit: contain; transition: transform 0.25s ease; }
.tech-brand:hover .tech-brand-logo { transform: scale(1.03); }
.tech-brand-info { display: flex; flex-direction: column; justify-content: center; }
.tech-brand-initials { font-size: 1.75rem; font-weight: 900; color: var(--tech-primary); line-height: 1.05; letter-spacing: 0.04em; text-transform: uppercase; margin-bottom: 0.1rem; display: block; }
.tech-brand-title { font-size: 0.75rem; font-weight: 500; color: var(--tech-gray-600); line-height: 1.2; display: block; }
.tech-nav .nav-link { font-size: 0.875rem; font-weight: 700; color: var(--tech-gray-700); padding: 0.6rem 0.95rem !important; border-radius: var(--tech-radius-sm); text-transform: uppercase; letter-spacing: 0.035em; transition: all 0.2s ease; position: relative; }
.tech-nav .nav-link:hover, .tech-nav .nav-link:focus, .tech-nav .nav-item.active .nav-link { color: var(--tech-primary); background-color: var(--tech-subtle); }
.tech-nav .dropdown-menu { border: 1px solid var(--tech-gray-200); border-radius: var(--tech-radius); box-shadow: var(--tech-shadow-lg); padding: 0.6rem; min-width: 14rem; }
.tech-nav .dropdown-item { font-size: 0.875rem; font-weight: 600; color: var(--tech-gray-700); padding: 0.55rem 0.85rem; border-radius: 0.4rem; transition: all 0.15s ease; }
.tech-nav .dropdown-item:hover { background-color: var(--tech-subtle); color: var(--tech-primary); transform: translateX(3px); }
.btn-tech-search-nav { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 50%; background-color: var(--tech-subtle); color: var(--tech-primary); border: 1px solid rgba(var(--tech-primary-rgb),0.2); font-size: 0.95rem; text-decoration: none; transition: all 0.2s ease; }
.btn-tech-search-nav:hover { background-color: var(--tech-primary); color: #ffffff; border-color: var(--tech-primary); transform: translateY(-1px); }
.btn-tech-login-btn { background-color: var(--tech-subtle); color: var(--tech-primary); border: 1px solid rgba(var(--tech-primary-rgb),0.2); font-weight: 700; font-size: 0.8125rem; border-radius: 2rem; padding: 0.35rem 0.95rem; text-decoration: none; display: inline-flex; align-items: center; transition: all 0.2s ease; }
.btn-tech-login-btn:hover { background-color: var(--tech-primary); color: #ffffff; border-color: var(--tech-primary); }
.btn-tech-register-btn { background-color: #ffffff; color: var(--tech-gray-700); border: 1px solid var(--tech-gray-300); font-weight: 600; font-size: 0.8125rem; border-radius: 2rem; padding: 0.35rem 0.95rem; text-decoration: none; display: inline-flex; align-items: center; transition: all 0.2s ease; }
.btn-tech-register-btn:hover { background-color: var(--tech-gray-100); color: var(--tech-gray-900); border-color: var(--tech-gray-400); }
.btn-tech-outline { background-color: var(--tech-subtle); color: var(--tech-primary); border: 1px solid rgba(var(--tech-primary-rgb),0.25); font-weight: 700; font-size: 0.85rem; border-radius: 2rem; padding: 0.45rem 1.15rem; transition: all 0.2s ease; }
.btn-tech-outline:hover { background-color: var(--tech-primary); color: #ffffff; }
.btn-tech-primary { background: var(--tech-gradient); color: #ffffff; border: none; font-weight: 700; font-size: 0.85rem; border-radius: 2rem; padding: 0.45rem 1.25rem; box-shadow: 0 4px 12px rgba(var(--tech-primary-rgb),0.3); transition: all 0.2s ease; text-decoration: none; display: inline-flex; align-items: center; gap: 0.45rem; }
.btn-tech-primary:hover { filter: brightness(1.1); color: #ffffff; transform: translateY(-1px); box-shadow: 0 6px 16px rgba(var(--tech-primary-rgb),0.4); }

/* HERO */
.tech-hero { background: var(--tech-gradient-hero); position: relative; overflow: hidden; padding: 5.5rem 0 6rem; color: #ffffff; border-bottom: 1px solid rgba(255,255,255,0.1); }
.tech-hero::before { content: ''; position: absolute; inset: 0; background-image: linear-gradient(to right, rgba(255,255,255,0.05) 1px, transparent 1px), linear-gradient(to bottom, rgba(255,255,255,0.05) 1px, transparent 1px); background-size: 40px 40px; mask-image: radial-gradient(ellipse 80% 80% at 50% 50%, #000 70%, transparent 100%); -webkit-mask-image: radial-gradient(ellipse 80% 80% at 50% 50%, #000 70%, transparent 100%); pointer-events: none; }
.tech-hero-orb-1 { position: absolute; width: 550px; height: 550px; background: radial-gradient(circle, rgba(0,180,216,0.22) 0%, transparent 70%); top: -120px; right: -80px; border-radius: 50%; pointer-events: none; filter: blur(40px); }
.tech-hero-orb-2 { position: absolute; width: 450px; height: 450px; background: radial-gradient(circle, rgba(3,54,146,0.4) 0%, transparent 70%); bottom: -100px; left: -50px; border-radius: 50%; pointer-events: none; filter: blur(50px); }
.tech-hero-badge { background: rgba(255,255,255,0.12); backdrop-filter: blur(12px); border: 1px solid rgba(255,255,255,0.22); color: #ffffff; padding: 0.4rem 0.95rem; border-radius: 2rem; font-size: 0.8125rem; font-weight: 700; display: inline-flex; align-items: center; gap: 0.45rem; box-shadow: 0 2px 8px rgba(0,0,0,0.2); }
.tech-hero-title { font-size: 2.85rem; font-weight: 800; letter-spacing: -0.035em; line-height: 1.15; margin-bottom: 1.25rem; color: #ffffff; text-shadow: 0 2px 12px rgba(0,0,0,0.35); }
.tech-hero-desc { font-size: 1.1rem; line-height: 1.75; color: #e2e8f0; max-width: 660px; }
.btn-hero-cta-main { background: #ffffff; color: var(--tech-primary); font-weight: 800; padding: 0.85rem 2rem; border-radius: 2rem; border: none; box-shadow: 0 8px 24px rgba(0,0,0,0.3); transition: all 0.25s ease; text-decoration: none; display: inline-flex; align-items: center; gap: 0.6rem; font-size: 0.95rem; }
.btn-hero-cta-main:hover { color: var(--tech-navy-dark); transform: translateY(-3px); background: #f8fafc; }
.btn-hero-cta-outline { background: rgba(255,255,255,0.12); backdrop-filter: blur(10px); color: #ffffff; font-weight: 700; padding: 0.85rem 1.85rem; border-radius: 2rem; border: 1px solid rgba(255,255,255,0.35); transition: all 0.25s ease; text-decoration: none; display: inline-flex; align-items: center; gap: 0.6rem; font-size: 0.95rem; }
.btn-hero-cta-outline:hover { background: rgba(255,255,255,0.25); color: #ffffff; border-color: rgba(255,255,255,0.65); transform: translateY(-3px); }
.tech-showcase-card { background: rgba(255,255,255,0.96); border-radius: var(--tech-radius-xl); padding: 1.5rem; box-shadow: 0 25px 50px -12px rgba(2,19,48,0.5); backdrop-filter: blur(16px); color: var(--tech-gray-900); transition: all 0.35s ease; }
.tech-showcase-card:hover { transform: translateY(-8px); }
.tech-showcase-cover-wrapper { background: #ffffff; border-radius: var(--tech-radius); padding: 0.35rem; border: 1px solid var(--tech-gray-200); display: flex; align-items: center; justify-content: center; max-height: 290px; overflow: hidden; }
.tech-showcase-cover { border-radius: calc(var(--tech-radius) - 2px); max-height: 280px; max-width: 100%; object-fit: contain !important; display: block; margin: 0 auto; }

/* METRICS */
.tech-metrics-bar { margin-top: -2.85rem; position: relative; z-index: 15; margin-bottom: 2.5rem; }
.tech-metric-card { background: #ffffff; border-radius: var(--tech-radius); border: 2px solid var(--tech-primary) !important; padding: 1.15rem 1.25rem; box-shadow: 0 4px 14px rgba(3,54,146,0.08); display: flex; align-items: center; gap: 1rem; transition: all 0.25s cubic-bezier(0.16,1,0.3,1); }
.tech-metric-card:hover { transform: translateY(-3px); box-shadow: 0 8px 24px rgba(3,54,146,0.2); border-color: var(--tech-primary-hover) !important; }
.tech-metric-icon { width: 48px; height: 48px; border-radius: 0.75rem; background: var(--tech-subtle); color: var(--tech-primary); display: flex; align-items: center; justify-content: center; font-size: 1.4rem; flex-shrink: 0; }
.tech-metric-value { font-size: 1.6rem; font-weight: 800; color: var(--tech-gray-900); line-height: 1.1; }
.tech-metric-label { font-size: 0.685rem; font-weight: 700; color: var(--tech-gray-600); text-transform: uppercase; letter-spacing: 0.035em; line-height: 1.25; margin-top: 0.15rem; }

/* SECTION HEADINGS + CARDS */
.tech-col-title { font-size: 1.15rem; font-weight: 800; color: var(--tech-gray-900); text-transform: uppercase; letter-spacing: 0.04em; padding-bottom: 0.75rem; margin-bottom: 1.25rem; border-bottom: 2px solid var(--tech-gray-200); display: flex; align-items: center; gap: 0.55rem; position: relative; }
.tech-col-title::after { content: ''; position: absolute; bottom: -2px; left: 0; width: 45px; height: 2px; background: var(--tech-primary); }
.tech-col-title i { color: var(--tech-primary); font-size: 1.25rem; }
.tech-about-card { background: #ffffff; border: 2px solid var(--tech-primary) !important; border-top: 4px solid var(--tech-primary) !important; border-radius: var(--tech-radius-lg); padding: 1.75rem; margin-bottom: 1.75rem; box-shadow: 0 4px 20px rgba(var(--tech-primary-rgb),0.08) !important; }
.tech-about-card:hover { box-shadow: 0 8px 28px rgba(var(--tech-primary-rgb),0.14) !important; }
.tech-issue-header-card { background: #ffffff !important; border: 2px solid var(--tech-primary) !important; border-top: 4px solid var(--tech-primary) !important; border-radius: var(--tech-radius-lg) !important; box-shadow: 0 4px 20px rgba(var(--tech-primary-rgb),0.08) !important; margin-bottom: 1.5rem !important; }
.tech-article-card { background: #ffffff; border: 1.5px solid var(--tech-primary) !important; border-left: 4.5px solid var(--tech-primary) !important; border-radius: var(--tech-radius); padding: 1.35rem 1.4rem; margin-bottom: 1.25rem; box-shadow: 0 2px 10px rgba(var(--tech-primary-rgb),0.06); transition: all 0.25s cubic-bezier(0.16,1,0.3,1); }
.tech-article-card:hover { transform: translateY(-3px); box-shadow: 0 8px 24px rgba(var(--tech-primary-rgb),0.16); }
.tech-article-cover-col { flex: 0 0 auto; width: 130px; margin-right: 1.25rem !important; }
.tech-article-cover-link { width: 130px; height: 130px; border-radius: 6px; overflow: hidden; border: 1px solid var(--tech-primary) !important; border-left: 4px solid var(--tech-primary) !important; background: #ffffff !important; padding: 4px !important; box-shadow: 0 2px 8px rgba(var(--tech-primary-rgb),0.12); display: flex !important; align-items: center; justify-content: center; text-decoration: none; transition: all 0.25s cubic-bezier(0.16,1,0.3,1); box-sizing: border-box; }
.tech-article-cover-link:hover, .tech-article-card:hover .tech-article-cover-link { border-left-color: var(--tech-accent) !important; box-shadow: 0 6px 18px rgba(var(--tech-primary-rgb),0.22); transform: translateY(-2px); }
.tech-article-cover-img { width: 100%; height: 100%; object-fit: contain; background-color: #ffffff; border-radius: 3px; display: block; transition: transform 0.3s ease; }
.tech-article-card:hover .tech-article-cover-img { transform: scale(1.04); }
.tech-article-body-col { padding-left: 0.35rem; }
@media (max-width: 575.98px) { .tech-article-cover-col { width: 100%; margin-right: 0 !important; margin-bottom: 0.85rem; display: flex; justify-content: center; } .tech-article-cover-link { width: 135px; height: 135px; } .tech-article-body-col { padding-left: 0; } }
.tech-detail-cover-wrapper { width: 100%; max-width: 240px; aspect-ratio: 1/1; border-radius: var(--tech-radius); overflow: hidden; border: 1px solid var(--tech-gray-200); background: #ffffff; display: flex; align-items: center; justify-content: center; margin: 0 auto; }
.tech-detail-cover-img { width: 100%; height: 100%; object-fit: contain; background-color: #ffffff; }
.tech-article-category { font-size: 0.75rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; background: var(--tech-subtle); color: var(--tech-primary); border: 1px solid rgba(var(--tech-primary-rgb),0.2); padding: 0.25rem 0.65rem; border-radius: 0.4rem; display: inline-flex; align-items: center; gap: 0.35rem; }
.tech-article-title { font-size: 1.075rem; font-weight: 700; line-height: 1.45; margin: 0.5rem 0 0.4rem; color: var(--tech-gray-900); }
.tech-article-title a { color: var(--tech-gray-900); text-decoration: none; }
.tech-article-title a:hover { color: var(--tech-primary); }
.tech-article-authors { font-size: 0.85rem; color: var(--tech-gray-600); margin-bottom: 0.65rem; display: flex; align-items: center; gap: 0.4rem; }
.tech-article-meta { font-size: 0.785rem; color: var(--tech-gray-600); display: flex; flex-wrap: wrap; align-items: center; gap: 0.85rem; }
.tech-doi-pill { font-size: 0.775rem; font-family: var(--tech-font-mono); background: var(--tech-subtle); color: var(--tech-primary); border: 1px solid rgba(var(--tech-primary-rgb),0.2); border-radius: 0.4rem; padding: 0.25rem 0.55rem; text-decoration: none; display: inline-flex; align-items: center; gap: 0.35rem; transition: all 0.15s ease; }
.tech-doi-pill:hover { background: var(--tech-primary); color: #ffffff; }
.tech-article-galleys { display: flex !important; flex-wrap: wrap !important; align-items: center !important; gap: 8px !important; }
.btn-tech-pdf { background: var(--tech-gradient); color: #ffffff; border: none; font-size: 0.8rem; font-weight: 700; padding: 0.4rem 0.9rem; border-radius: 0.45rem; text-decoration: none; display: inline-flex; align-items: center; gap: 0.4rem; margin: 2px 0; box-shadow: 0 4px 12px -3px rgba(var(--tech-primary-rgb),0.4); transition: all 0.2s ease; }
.btn-tech-pdf:hover { filter: brightness(1.08); color: #ffffff; transform: translateY(-1px); }
.tech-about-specs-grid { row-gap: 0.5rem !important; }
.tech-about-spec-item { display: flex; align-items: center; gap: 0.65rem; padding: 0.5rem 0.7rem; background: #ffffff; border: 1px solid var(--tech-primary); border-left: 4px solid var(--tech-primary); border-radius: 4px; transition: all 0.18s cubic-bezier(0.16,1,0.3,1); box-shadow: 0 1px 2px rgba(var(--tech-primary-rgb),0.05); height: 100%; }
.tech-about-spec-item:hover { border-left-color: var(--tech-accent); background: var(--tech-subtle); transform: translateY(-1px); }
.tech-about-spec-icon { width: 32px; height: 32px; border-radius: 4px; background: rgba(var(--tech-primary-rgb),0.08); color: var(--tech-primary); display: flex; align-items: center; justify-content: center; font-size: 0.95rem; flex-shrink: 0; }
.tech-about-spec-item:hover .tech-about-spec-icon { background: var(--tech-primary); color: #ffffff; }
.tech-about-spec-label { display: block; font-size: 0.675rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.04em; color: #64748b; line-height: 1.1; }
.tech-about-spec-value { font-size: 0.8125rem; font-weight: 700; color: #0f172a; line-height: 1.25; word-break: break-word; }

/* SIDEBAR BLOCKS */
.tech-sidebar-wrapper, .tech-sidebar-blocks { display: flex; flex-direction: column; gap: 0.75rem; }
.tech-widget-card, .tech-sidebar-blocks .pkp_block { background: #ffffff; border: 2px solid var(--tech-primary) !important; border-radius: var(--tech-radius); box-shadow: 0 4px 16px rgba(var(--tech-primary-rgb),0.08); padding: 1.15rem 1.05rem; margin-bottom: 0 !important; overflow: hidden; transition: all 0.25s ease; }
.tech-widget-card:hover, .tech-sidebar-blocks .pkp_block:hover { box-shadow: 0 8px 24px rgba(var(--tech-primary-rgb),0.16); transform: translateY(-2px); }
.tech-widget-card .tech-col-title, .tech-sidebar-blocks .title:not(.pkp_screen_reader), .tech-sidebar-blocks .pkp_block_title, .tech-sidebar-blocks h2:not(.pkp_screen_reader), .tech-sidebar-blocks h3:not(.pkp_screen_reader) { font-size: 0.835rem; font-weight: 800; color: #ffffff !important; text-transform: uppercase; letter-spacing: 0.06em; background: var(--tech-gradient); margin: -1.15rem -1.05rem 0.95rem -1.05rem; padding: 0.7rem 1.05rem; border-radius: 0; display: flex; align-items: center; gap: 0.55rem; box-shadow: 0 2px 8px rgba(3,54,146,0.15); border-bottom: 2px solid rgba(255,255,255,0.18); }
.tech-widget-card .tech-col-title::after { display: none; }
.tech-widget-card .tech-col-title i, .tech-sidebar-blocks .title:not(.pkp_screen_reader) i, .tech-sidebar-blocks .pkp_block_title i, .tech-sidebar-blocks h2:not(.pkp_screen_reader) i, .tech-sidebar-blocks h3:not(.pkp_screen_reader) i { color: #fde047 !important; font-size: 0.95rem; }
.tech-sidebar-blocks .content { font-size: 0.8125rem; color: var(--tech-gray-700); line-height: 1.6; }
.tech-sidebar-blocks ul { list-style: none !important; padding-left: 0 !important; margin-bottom: 0 !important; display: flex !important; flex-direction: column !important; gap: 0.22rem !important; }
.tech-sidebar-blocks ul li { padding: 0 !important; margin: 0 !important; background: #ffffff !important; border: 1px solid var(--tech-primary) !important; border-left: 4px solid var(--tech-primary) !important; border-radius: 4px !important; transition: all 0.18s ease !important; box-shadow: 0 1px 3px rgba(var(--tech-primary-rgb),0.08) !important; overflow: hidden !important; }
.tech-sidebar-blocks ul li:hover { background: var(--tech-subtle) !important; transform: translateX(3px) !important; }
.tech-sidebar-blocks ul li a { display: flex !important; align-items: center !important; padding: 0.32rem 0.65rem !important; background: transparent !important; border: none !important; color: var(--tech-gray-900) !important; font-size: 0.8rem !important; font-weight: 700 !important; text-decoration: none !important; gap: 0.45rem !important; }
.tech-sidebar-blocks ul li a:hover { color: var(--tech-primary) !important; }
.tech-sidebar-blocks ul li a i, .tech-sidebar-blocks ul li a em { color: var(--tech-primary) !important; font-size: 0.85rem !important; width: 16px !important; text-align: center !important; flex-shrink: 0 !important; font-style: normal !important; }
.tech-sidebar-blocks img { max-width: 100%; height: auto; border-radius: 0.4rem; margin: 0.25rem 0; }

/* ARTICLE DETAILS */
.tech-article-detail-box { background: #ffffff; border-radius: var(--tech-radius-lg); border: 1px solid var(--tech-gray-200); padding: 2.25rem 2.5rem; box-shadow: 0 2px 12px rgba(0,0,0,0.04); margin-bottom: 2rem; }
@media (max-width: 767.98px) { .tech-article-detail-box { padding: 1.5rem 1.25rem; } }
.tech-detail-header-title { font-size: 1.95rem; font-weight: 800; line-height: 1.35; color: #0f172a; letter-spacing: -0.02em; margin-top: 0.5rem; margin-bottom: 1.25rem; }
@media (max-width: 767.98px) { .tech-detail-header-title { font-size: 1.45rem; } }
.tech-author-box { background: var(--tech-gray-50); border: 1px solid var(--tech-gray-200); border-radius: var(--tech-radius); padding: 1rem 1.15rem; transition: all 0.25s ease; height: 100%; }
.tech-author-box:hover { background: #ffffff; border-color: var(--tech-primary); box-shadow: 0 4px 12px rgba(var(--tech-primary-rgb),0.1); transform: translateY(-2px); }
.tech-author-avatar { width: 42px; height: 42px; border-radius: 50%; background: var(--tech-subtle); color: var(--tech-primary); display: flex; align-items: center; justify-content: center; font-size: 1.2rem; flex-shrink: 0; }
.tech-abstract-card { background: #f8fafc; border-left: 4px solid var(--tech-primary); border-radius: 0 var(--tech-radius) var(--tech-radius) 0; padding: 1.5rem 1.75rem; margin: 1.25rem 0; font-size: 0.975rem; line-height: 1.85; color: var(--tech-gray-800); text-align: justify; }
.tech-keyword-tag { background: var(--tech-subtle); color: var(--tech-primary); font-size: 0.8125rem; font-weight: 700; padding: 0.35rem 0.85rem; border-radius: 2rem; border: 1px solid rgba(var(--tech-primary-rgb),0.2); display: inline-flex; align-items: center; gap: 0.3rem; margin: 0.25rem 0.25rem 0.25rem 0; transition: all 0.2s ease; text-decoration: none; }
.tech-keyword-tag:hover { background: var(--tech-primary); color: #ffffff; transform: translateY(-1px); }
.tech-references-content { font-size: 0.875rem; line-height: 1.85; color: var(--tech-gray-800); word-break: break-word; background: var(--tech-gray-50); border: 1px solid var(--tech-gray-200); border-radius: var(--tech-radius); padding: 1.25rem 1.5rem; }
.tech-sidebar-sticky { display: flex; flex-direction: column; gap: 0.75rem; position: sticky; top: 84px; }
.tech-sidebar-sticky .item.citation, .item.citation { background: #ffffff; border: 2px solid var(--tech-primary) !important; border-top: 4px solid var(--tech-primary) !important; border-radius: var(--tech-radius); box-shadow: 0 4px 16px rgba(var(--tech-primary-rgb),0.08); padding: 1.15rem 1.05rem; margin-bottom: 0 !important; overflow: hidden; }
.item.citation .sub_item.citation_display h2.label, .item.citation h2.label { font-size: 0.835rem; font-weight: 800; color: #ffffff !important; text-transform: uppercase; letter-spacing: 0.06em; background: var(--tech-gradient); margin: -1.15rem -1.05rem 0.95rem -1.05rem; padding: 0.7rem 1.05rem; display: flex; align-items: center; gap: 0.55rem; box-shadow: 0 2px 8px rgba(3,54,146,0.15); }
.item.citation #citationOutput { background: var(--tech-gray-50); border: 1px solid var(--tech-gray-200); border-radius: var(--tech-radius-sm); padding: 0.75rem 0.85rem; font-size: 0.8rem; line-height: 1.6; color: var(--tech-gray-800); margin-bottom: 0.85rem; word-break: break-word; }
.item.citation .csl-left-margin { display: none !important; }
.item.citation .citation_formats { margin-top: 0.85rem; }
.item.citation .citation_formats_button { background: var(--tech-subtle); color: var(--tech-primary); border: 1px solid rgba(var(--tech-primary-rgb),0.25); font-weight: 700; font-size: 0.8rem; border-radius: var(--tech-radius-sm); padding: 0.45rem 0.85rem; width: 100%; text-align: left; display: flex; align-items: center; justify-content: space-between; cursor: pointer; transition: all 0.2s ease; }
.item.citation .citation_formats_button:hover { background: var(--tech-primary); color: #ffffff; }
.item.citation .citation_formats_button::after { content: '\F282'; font-family: 'bootstrap-icons'; }
.item.citation .citation_formats_button[aria-expanded="true"]::after { content: '\F286'; font-family: 'bootstrap-icons'; }
.item.citation .citation_formats_list { background: #ffffff; border: 1px solid var(--tech-gray-200); border-radius: var(--tech-radius-sm); padding: 0.5rem 0.75rem; margin-top: 0.5rem; max-height: 220px; overflow-y: auto; }
.item.citation .citation_formats_styles { list-style: none !important; padding: 0 !important; margin: 0 !important; display: flex; flex-direction: column; gap: 0.3rem; }
.item.citation .citation_formats_styles li a { display: block; padding: 0.35rem 0.6rem; border-radius: 0.35rem; background: var(--tech-gray-50); color: var(--tech-gray-800); text-decoration: none; font-size: 0.775rem; font-weight: 600; }
.item.citation .citation_formats_styles li a:hover { background: var(--tech-primary); color: #ffffff; }
.tech-social-btn { width: 38px; height: 38px; border-radius: 0.5rem; display: inline-flex; align-items: center; justify-content: center; color: #ffffff !important; text-decoration: none; font-size: 1.05rem; transition: transform 0.2s ease; }
.tech-social-btn:hover { transform: translateY(-2px); filter: brightness(1.1); }

/* INNER BANNER */
.tech-inner-banner { background: var(--tech-gradient); padding: 2.25rem 0 2.5rem; color: #ffffff; position: relative; border-bottom: 1px solid rgba(255,255,255,0.1); }
.tech-inner-banner::before { content: ''; position: absolute; inset: 0; background-image: linear-gradient(to right, rgba(255,255,255,0.05) 1px, transparent 1px), linear-gradient(to bottom, rgba(255,255,255,0.05) 1px, transparent 1px); background-size: 32px 32px; opacity: 0.45; pointer-events: none; }
.tech-inner-banner .container { position: relative; z-index: 1; }
.tech-breadcrumb { --bs-breadcrumb-divider-color: rgba(255,255,255,0.6); }
.tech-breadcrumb a { color: rgba(255,255,255,0.85); text-decoration: none; font-weight: 500; font-size: 0.875rem; }
.tech-breadcrumb a:hover { color: #ffffff; text-decoration: underline; }
.tech-breadcrumb .breadcrumb-item.active { color: rgba(255,255,255,0.7); }
.tech-breadcrumb .breadcrumb-item + .breadcrumb-item::before { color: rgba(255,255,255,0.5); }

/* FOOTER */
.tech-footer { background: linear-gradient(180deg, #020919 0%, #031533 50%, #010612 100%); color: #94a3b8; padding: 4.5rem 0 0; border-top: 1px solid rgba(0,180,216,0.25); position: relative; overflow: hidden; }
.tech-footer::before { content: ''; position: absolute; inset: 0; background-image: linear-gradient(to right, rgba(255,255,255,0.03) 1px, transparent 1px), linear-gradient(to bottom, rgba(255,255,255,0.03) 1px, transparent 1px); background-size: 36px 36px; pointer-events: none; opacity: 0.7; }
.tech-footer::after { content: ''; position: absolute; top: 0; left: 10%; right: 10%; height: 2px; background: linear-gradient(90deg, transparent, #00b4d8, #033692, transparent); box-shadow: 0 0 16px rgba(0,180,216,0.7); pointer-events: none; }
.tech-footer .container { position: relative; z-index: 1; }
.tech-footer-brand { display: inline-flex; align-items: center; gap: 0.85rem; text-decoration: none; transition: transform 0.2s ease; }
.tech-footer-brand:hover { transform: translateY(-2px); }
.tech-footer-brand-logo { max-height: 50px; width: auto; object-fit: contain; background: #ffffff; padding: 5px; border-radius: 8px; box-shadow: 0 4px 12px rgba(0,0,0,0.25); }
.tech-footer-brand-initials { font-size: 1.65rem; font-weight: 900; line-height: 1.1; letter-spacing: 0.04em; text-transform: uppercase; background: linear-gradient(135deg, #ffffff 0%, #7dd3fc 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; }
.tech-footer-brand-title { font-size: 0.775rem; color: #cbd5e1; line-height: 1.3; margin-top: 2px; }
.tech-footer-about { color: #94a3b8; font-size: 0.875rem; line-height: 1.7; margin-bottom: 1.25rem; }
.tech-footer-badge { background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.12); border-radius: 6px; padding: 0.35rem 0.65rem; font-size: 0.8rem; color: #cbd5e1; display: inline-flex; align-items: center; gap: 0.4rem; }
.tech-footer-badge i { color: var(--tech-accent); }
.tech-footer-badge strong { color: #fff; }
.tech-footer-title { color: #ffffff; font-size: 1.05rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 1.35rem; position: relative; padding-bottom: 0.65rem; display: flex; align-items: center; gap: 0.45rem; }
.tech-footer-title i { color: var(--tech-accent); }
.tech-footer-title::after { content: ''; position: absolute; bottom: 0; left: 0; width: 35px; height: 2.5px; border-radius: 2px; background: linear-gradient(90deg, var(--tech-accent), var(--tech-primary)); }
.tech-footer-links { list-style: none; padding-left: 0; margin-bottom: 0; display: flex; flex-direction: column; gap: 0.6rem; }
.tech-footer-links a { color: #94a3b8; text-decoration: none; font-size: 0.885rem; font-weight: 500; transition: all 0.22s ease; display: inline-flex; align-items: center; gap: 0.45rem; }
.tech-footer-links a:hover { color: #ffffff; transform: translateX(4px); }
.tech-footer-links a i { color: var(--tech-accent); font-size: 0.75rem; }
.tech-footer-contact-item { display: flex; align-items: flex-start; gap: 0.65rem; margin-bottom: 0.75rem; font-size: 0.85rem; color: #cbd5e1; line-height: 1.5; }
.tech-footer-contact-icon { width: 28px; height: 28px; border-radius: 6px; background: rgba(0,180,216,0.12); border: 1px solid rgba(0,180,216,0.25); color: var(--tech-accent); display: flex; align-items: center; justify-content: center; font-size: 0.85rem; flex-shrink: 0; margin-top: 1px; }
.tech-footer a.text-info { color: var(--tech-accent) !important; }
.tech-footer .tech-social-btn { width: 36px; height: 36px; border-radius: 8px; border: 1px solid rgba(255,255,255,0.15); box-shadow: 0 2px 6px rgba(0,0,0,0.25); }
.tech-footer-pkp-box { background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.08); border-radius: 8px; padding: 0.75rem 0.85rem; transition: all 0.22s ease; }
.tech-footer-pkp-box:hover { background: rgba(255,255,255,0.06); border-color: rgba(0,180,216,0.35); }
.tech-footer-bottom { padding: 1.5rem 0; margin-top: 3.5rem; border-top: 1px solid rgba(255,255,255,0.08); font-size: 0.85rem; color: #64748b; position: relative; z-index: 1; }
.tech-footer-bottom strong { color: #cbd5e1; }

/* FLOATING ACTIONS */
.tech-floating-actions { position: fixed; bottom: 24px; right: 24px; display: flex; flex-direction: column; align-items: flex-end; gap: 12px; z-index: 9990; pointer-events: none; }
.tech-floating-actions > * { pointer-events: auto; }
.tech-float-whatsapp { display: flex; align-items: center; gap: 8px; background: linear-gradient(135deg, #25d366 0%, #128c7e 100%); color: #ffffff !important; text-decoration: none !important; padding: 10px 16px 10px 14px; border-radius: 50px; box-shadow: 0 6px 20px rgba(37,211,102,0.4); border: 1.5px solid rgba(255,255,255,0.4); transition: all 0.28s ease; font-size: 0.875rem; font-weight: 700; }
.tech-float-whatsapp i { font-size: 1.35rem; animation: techWaPulse 2.5s infinite; }
.tech-float-whatsapp:hover { transform: translateY(-4px) scale(1.04); color: #ffffff !important; }
@keyframes techWaPulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.15) rotate(-6deg); } }
.tech-back-to-top { width: 44px; height: 44px; border-radius: 50%; background: var(--tech-gradient); color: #ffffff !important; display: flex; align-items: center; justify-content: center; box-shadow: 0 6px 18px rgba(3,54,146,0.35); border: 1.5px solid rgba(255,255,255,0.35); cursor: pointer; opacity: 0; visibility: hidden; transform: translateY(16px) scale(0.85); transition: all 0.28s ease; text-decoration: none !important; font-size: 1.2rem; }
.tech-back-to-top.is-visible { opacity: 1; visibility: visible; transform: translateY(0) scale(1); }
.tech-back-to-top:hover { transform: translateY(-4px) scale(1.08); color: #ffffff !important; }
@media (max-width: 575.98px) { .tech-floating-actions { bottom: 16px; right: 16px; } .tech-float-whatsapp { padding: 10px; border-radius: 50%; width: 44px; height: 44px; justify-content: center; } .tech-float-whatsapp .tech-float-label { display: none; } .tech-back-to-top { width: 40px; height: 40px; } }

/* OJS structure resets (full-width Bootstrap layout) */
.pkp_structure_page { max-width: none !important; margin: 0 !important; border-radius: 0 !important; box-shadow: none !important; overflow: visible !important; background: var(--tech-bg) !important; }
.pkp_structure_content { display: block !important; width: 100% !important; max-width: none !important; margin: 0 auto !important; padding: 0 !important; float: none !important; }
.pkp_structure_content.has_sidebar { width: 100% !important; float: none !important; }
.pkp_structure_main { width: auto !important; float: none !important; padding: 0 !important; background: transparent !important; box-shadow: none !important; border: none !important; }
.pkp_structure_main:before, .pkp_structure_main:after { display: none !important; content: none !important; }
body.pkp_page_article .pkp_structure_content.has_sidebar .pkp_structure_sidebar { display: none !important; }
html, body { overflow-x: hidden !important; max-width: 100vw; }
img, svg { max-width: 100%; height: auto; }

@media (max-width: 991.98px) {
  .tech-nav { background: #ffffff; border: 1px solid #e2e8f0; border-radius: 12px; padding: 1.15rem 1rem; box-shadow: 0 12px 30px rgba(0,0,0,0.08); margin-top: 0.75rem; }
  .tech-hero { padding: 2.75rem 0 2rem; }
  .tech-hero-title { font-size: clamp(1.5rem, 4.5vw, 2.25rem); line-height: 1.25; }
}
@media (max-width: 767.98px) {
  .tech-hero { padding: 2.25rem 0 1.5rem; text-align: center; }
  .tech-footer { padding: 2.75rem 0 0; }
  .tech-footer-bottom { margin-top: 2rem; text-align: center; }
}

/* --- Bridge: OJS load_menu markup -> tech navbar look --- */
.tech-nav .navbar-nav { display: flex; flex-wrap: wrap; align-items: center; gap: 0.1rem; margin: 0; padding: 0; list-style: none; }
.tech-nav .navbar-nav li { list-style: none; position: relative; }
.tech-nav .navbar-nav > li > a { display: block; font-size: 0.875rem; font-weight: 700; color: var(--tech-gray-700); padding: 0.6rem 0.95rem; border-radius: var(--tech-radius-sm); text-transform: uppercase; letter-spacing: 0.035em; text-decoration: none; transition: all 0.2s ease; }
.tech-nav .navbar-nav > li > a:hover, .tech-nav .navbar-nav > li.current > a { color: var(--tech-primary); background: var(--tech-subtle); }
.tech-nav .navbar-nav ul { position: absolute; top: 100%; left: 0; min-width: 14rem; background: #fff; border: 1px solid var(--tech-gray-200); border-radius: var(--tech-radius); box-shadow: var(--tech-shadow-lg); padding: 0.5rem; list-style: none; margin: 0; opacity: 0; visibility: hidden; transform: translateY(6px); transition: all 0.18s ease; z-index: 100; }
.tech-nav .navbar-nav li:hover > ul { opacity: 1; visibility: visible; transform: translateY(0); }
.tech-nav .navbar-nav ul a { display: block; padding: 0.5rem 0.75rem; font-size: 0.85rem; font-weight: 600; color: var(--tech-gray-700); text-decoration: none; border-radius: 0.4rem; text-transform: none; letter-spacing: 0; }
.tech-nav .navbar-nav ul a:hover { background: var(--tech-subtle); color: var(--tech-primary); }
.tech-nav .tech-user-menu > li > a { text-transform: none; background: var(--tech-subtle); color: var(--tech-primary) !important; border-radius: 2rem; padding: 0.35rem 0.95rem; }
@media (max-width: 991.98px){
  .tech-nav .navbar-nav { flex-direction: column; align-items: stretch; }
  .tech-nav .navbar-nav ul { position: static; opacity: 1; visibility: visible; transform: none; box-shadow: none; border: none; }
}
/* Wrap footer-rendered sidebar blocks so their card styling applies */
.pkp_structure_sidebar .pkp_block { background: #fff; }

/* Override journal's custom green (#87f8ab) .article_item boxes -> theme cards */
.styled_section { background-color: #fff !important; }
.section_title { color: var(--tech-gray-900) !important; border-bottom: 1px solid var(--tech-gray-200) !important; }
/* .article_item is the journal's <li> wrapper around .tech-article-card -> keep it bare (single box) */
.styled_section .cmp_article_list, .styled_section ul.cmp_article_list { list-style: none !important; padding: 0 !important; margin: 0 !important; }
.article_item { background: transparent !important; border: none !important; border-radius: 0 !important; box-shadow: none !important; padding: 0 !important; margin: 0 0 1.25rem 0 !important; overflow: visible !important; }
.article_item:hover { transform: none !important; box-shadow: none !important; }
.article_item .title { color: var(--tech-gray-900) !important; }
.article_item .title:hover { color: var(--tech-primary) !important; }
/* Custom stats table in issue TOC */
.cmp_article_list.articles table th, .sections .section table th { background: var(--tech-primary) !important; color: #fff !important; }
.cmp_article_list.articles table td, .sections .section table td { border-color: var(--tech-gray-200) !important; }

/* Retarget journal's custom brick-red (#a93317) block banners/menus -> theme blue */
.tech-sidebar-blocks [style*="a93317"], .pkp_structure_sidebar [style*="a93317"],
.tech-sidebar-blocks [style*="A93317"], .pkp_structure_sidebar [style*="A93317"] {
  background: var(--tech-gradient) !important;
  background-color: var(--tech-primary) !important;
  border-color: var(--tech-primary-hover) !important;
  border-radius: var(--tech-radius-sm) !important;
  color: #ffffff !important;
}
.tech-sidebar-blocks a[style*="a93317"]:hover, .pkp_structure_sidebar a[style*="a93317"]:hover { background: var(--tech-primary-hover) !important; color: #fff !important; }
.tech-sidebar-blocks .badan { text-align: center; }
.tech-sidebar-blocks .badan img { margin: 0.25rem auto; }

/* Prevent wide content (tables, Scopus widgets, long DOIs) from overflowing
   a Bootstrap column and covering the sidebar (flexbox min-width fix) */
.technova .row > [class*="col-"] { min-width: 0; }
.technova .pkp_structure_content .col-lg-9, .technova .pkp_structure_content .col-lg-3 { min-width: 0; }
.tech-sidebar-blocks, .tech-sidebar-blocks .pkp_block, .tech-sidebar-blocks .content { max-width: 100%; min-width: 0; }
.tech-sidebar-blocks .content { overflow-x: auto; }
.tech-sidebar-blocks table { max-width: 100%; width: 100%; font-size: 0.72rem; }
.tech-sidebar-blocks iframe, .tech-sidebar-blocks embed, .tech-sidebar-blocks img { max-width: 100% !important; height: auto; }
/* Authors Statistics table (custom) stays within the left column */
.col-lg-9 .sections table, .col-lg-9 .cmp_article_list table, .technova .page_issue table, .technova .page_index_journal table { max-width: 100% !important; width: 100% !important; table-layout: fixed; word-break: break-word; }
.technova .tech-article-card { max-width: 100%; overflow: hidden; }

/* Issue page: wrap the issue intro/description in a card box */
.technova .page_issue .obj_issue_toc > .heading,
.technova .page_issue .obj_issue_toc .heading:first-child {
  background: #fff;
  border: 1px solid var(--tech-gray-200);
  border-left: 4px solid var(--tech-primary);
  border-radius: var(--tech-radius-lg);
  padding: 1.5rem 1.75rem;
  box-shadow: var(--tech-shadow);
  margin-bottom: 1.5rem;
  max-width: 100%;
  overflow: hidden;
}
.technova .page_issue .obj_issue_toc .heading .description { color: var(--tech-gray-700); line-height: 1.8; }

/* Authors Statistics / styled_section as a clean card, kept inside the column */
.technova .styled_sections { width: 100% !important; max-width: 100% !important; margin-bottom: 1.5rem !important; }
.technova .styled_section {
  background: #fff !important;
  border: 1px solid var(--tech-gray-200) !important;
  border-left: 4px solid var(--tech-primary) !important;
  border-radius: var(--tech-radius-lg) !important;
  padding: 1.5rem !important;
  box-shadow: var(--tech-shadow) !important;
  max-width: 100% !important;
  overflow-x: auto !important;
  box-sizing: border-box !important;
}
.technova .styled_section > .section_title,
.technova .styled_section > h2:first-child { color: var(--tech-gray-900) !important; font-weight: 800; font-size: 1.05rem; margin: 0 0 1rem; padding-bottom: 0.5rem; border-bottom: 2px solid var(--tech-gray-200); }

/* Box the issue intro/description on ALL pages (homepage LATEST ARTICLES + issue) */
.technova .obj_issue_toc > .heading {
  background: #fff !important;
  border: 1px solid var(--tech-gray-200) !important;
  border-left: 4px solid var(--tech-primary) !important;
  border-radius: var(--tech-radius-lg) !important;
  padding: 1.5rem 1.75rem !important;
  box-shadow: var(--tech-shadow) !important;
  margin-bottom: 1.5rem !important;
  max-width: 100% !important;
  overflow: hidden !important;
}
.technova .obj_issue_toc > .heading .description { color: var(--tech-gray-700); line-height: 1.8; }

/* Box the Authors Statistics section (a .section that contains a table) — not article sections */
.technova .obj_issue_toc .sections > .section:has(table),
.technova .obj_issue_toc .styled_sections > .styled_section {
  background: #fff !important;
  border: 1px solid var(--tech-gray-200) !important;
  border-left: 4px solid var(--tech-primary) !important;
  border-radius: var(--tech-radius-lg) !important;
  padding: 1.5rem !important;
  box-shadow: var(--tech-shadow) !important;
  margin-bottom: 1.5rem !important;
  max-width: 100% !important;
  overflow-x: auto !important;
  box-sizing: border-box !important;
}
.technova .obj_issue_toc .sections > .section:has(table) > h2,
.technova .obj_issue_toc .styled_section > h2:first-child,
.technova .obj_issue_toc .styled_section > .section_title {
  font-size: 1.05rem; font-weight: 800; color: var(--tech-gray-900) !important;
  margin: 0 0 1rem; padding-bottom: 0.5rem; border-bottom: 2px solid var(--tech-gray-200);
}

/* Issue page: header card already shows the description -> hide the duplicate issue_toc heading box */
.technova .page_issue .obj_issue_toc > .heading { display: none !important; }

/* Sidebar menu items with custom #a93317 inline colour -> clean full solid buttons (no half-fill) */
.tech-sidebar-blocks ul li:has(> a[style*="a93317"]),
.tech-sidebar-blocks ul li:has(> a[style*="A93317"]),
.pkp_structure_sidebar ul li:has(> a[style*="a93317"]) {
  border: none !important; padding: 0 !important; background: transparent !important;
  box-shadow: none !important; margin: 0 0 0.4rem 0 !important; overflow: visible !important;
}
.tech-sidebar-blocks ul li:has(> a[style*="a93317"]):hover,
.pkp_structure_sidebar ul li:has(> a[style*="a93317"]):hover { transform: none !important; }
.tech-sidebar-blocks a[style*="a93317"], .tech-sidebar-blocks a[style*="A93317"],
.pkp_structure_sidebar a[style*="a93317"] {
  display: block !important; width: 100% !important; box-sizing: border-box !important;
  padding: 0.6rem 0.9rem !important; border: none !important; border-radius: var(--tech-radius-sm) !important;
  background: var(--tech-gradient) !important; background-color: var(--tech-primary) !important;
  color: #ffffff !important; font-weight: 700 !important; text-align: left !important; text-decoration: none !important;
  box-shadow: 0 2px 6px rgba(var(--tech-primary-rgb),0.25) !important;
}
.tech-sidebar-blocks a[style*="a93317"]:hover, .pkp_structure_sidebar a[style*="a93317"]:hover {
  filter: brightness(1.1) !important; color: #fff !important; transform: translateY(-1px) !important;
}
.tech-sidebar-blocks a[style*="a93317"] em, .tech-sidebar-blocks a[style*="a93317"] i { color: #fde047 !important; }

/* Hide OJS's default breadcrumb (we show it in the blue inner-banner instead) */
.technova .cmp_breadcrumbs, .technova .pkp_breadcrumbs, .technova nav.cmp_breadcrumbs { display: none !important; }
/* Breadcrumb bar styling (JOCSTEC style: white text on blue) */
.tech-inner-banner .breadcrumb { margin: 0; }
.tech-inner-banner .breadcrumb-item, .tech-inner-banner .breadcrumb-item a { color: rgba(255,255,255,0.9) !important; font-weight: 500; }
.tech-inner-banner .breadcrumb-item.active { color: #ffffff !important; }
.tech-inner-banner .breadcrumb-item + .breadcrumb-item::before { color: rgba(255,255,255,0.6) !important; content: "/"; }

/* Column alignment: all direct boxes in the main column share full width & left edge */
.technova .pkp_structure_content .col-lg-9 > *,
.technova .pkp_structure_content .col-lg-9 .obj_issue_toc > * { max-width: 100% !important; box-sizing: border-box; }
.technova .tech-issue-header-card, .technova .styled_section, .technova .tech-article-detail-box,
.technova .obj_issue_toc > .heading, .technova .obj_issue_toc .sections > .section:has(table) { width: 100% !important; margin-left: 0 !important; margin-right: 0 !important; }

/* Article page: authors stacked vertically with affiliation */
.tech-author-list { display: flex; flex-direction: column; gap: 0.5rem; }
.tech-author-row { display: block; line-height: 1.5; font-size: 0.95rem; color: var(--tech-gray-800); }
.tech-author-ico { color: var(--tech-primary); margin-right: 0.5rem; }
.tech-author-name { font-weight: 700; color: var(--tech-gray-900); }
.tech-author-aff { color: var(--tech-gray-600); font-size: 0.9rem; }

/* Issue/homepage article card: authors stacked with affiliation */
.tech-card-author-list { display: flex; flex-direction: column; gap: 0.2rem; }
.tech-card-author-row { display: block; font-size: 0.83rem; line-height: 1.45; color: var(--tech-gray-700); }
.tech-card-author-row .tech-author-ico { color: var(--tech-primary); margin-right: 0.35rem; }
.tech-card-author-row .tech-author-name { font-weight: 700; color: var(--tech-gray-900); }
.tech-card-author-row .tech-author-aff { color: var(--tech-gray-600); }

/* Article page: hide the duplicate (plugin) Downloads chart; keep only the boxed tech one */
.technova .obj_article_details .item.downloads_chart { display: none !important; }

/* Links: no underline anywhere (Bootstrap 5 underlines links by default) */
.technova a,
.technova a:hover,
.technova a:focus,
.technova .pkp_structure_content a,
.technova .tech-footer a,
.technova .tech-sidebar-blocks a,
.technova .breadcrumb a { text-decoration: none !important; }

/* Journal description contains a dark-designed hero banner (white text).
   Render the homepage About card as a DARK section so that content shows,
   without altering the journal's HTML. */
.technova-home .tech-about-card {
  background: var(--tech-gradient-hero) !important;
  border: 1px solid rgba(255,255,255,0.12) !important;
  box-shadow: var(--tech-shadow-lg) !important;
}
/* $jDesc wrapper: force readable light text on the dark card */
.technova-home .tech-about-card > .text-muted,
.technova-home .tech-about-card > .text-muted p,
.technova-home .tech-about-card > .text-muted li,
.technova-home .tech-about-card > .text-muted div,
.technova-home .tech-about-card > .text-muted span:not([style*="text-fill-color: transparent"]) { color: rgba(255,255,255,0.85) !important; }
.technova-home .tech-about-card > .text-muted strong { color: #ffffff !important; }
.technova-home .tech-about-card > .text-muted a { color: #7dd3fc !important; }
.technova-home .tech-about-card > .text-muted a:hover { color: #ffffff !important; }
/* Info table -> translucent panel on the dark card */
.technova-home .tech-about-card > .text-muted table.data { background: rgba(255,255,255,0.06) !important; border-radius: var(--tech-radius-sm); overflow: hidden; }
.technova-home .tech-about-card > .text-muted table.data td { background: transparent !important; border-color: rgba(255,255,255,0.10) !important; color: rgba(255,255,255,0.85) !important; padding: 8px 12px; }
.technova-home .tech-about-card > .text-muted table.data strong { color: #ffffff !important; }
.technova-home .tech-about-card > .text-muted img { max-width: 100%; height: auto; }

/* About / submissions / static base pages: center content in a card + tidy typography */
.technova .pkp_structure_main > .page:not(.container):not(.technova-home) {
  max-width: 1180px; margin: 1.5rem auto; padding: 2rem 2.5rem;
  background: #ffffff; border: 1px solid var(--tech-gray-200);
  border-radius: var(--tech-radius-lg); box-shadow: var(--tech-shadow); box-sizing: border-box;
}
@media (min-width: 1400px){ .technova .pkp_structure_main > .page:not(.container):not(.technova-home) { max-width: 1300px; } }
@media (max-width: 991px){ .technova .pkp_structure_main > .page:not(.container):not(.technova-home) { margin: 1rem; padding: 1.25rem 1.25rem; } }
.technova .pkp_structure_main > .page > h1 {
  font-size: 1.7rem; font-weight: 800; color: var(--tech-gray-900);
  margin: 0 0 1.25rem; padding-bottom: 0.65rem; border-bottom: 3px solid var(--tech-primary); display: inline-block;
}
.technova .pkp_structure_main > .page h2 { font-size: 1.2rem; font-weight: 700; color: var(--tech-gray-900); margin: 1.6rem 0 0.75rem; }
.technova .pkp_structure_main > .page h3 { font-size: 1.05rem; font-weight: 700; color: var(--tech-gray-800); margin: 1.2rem 0 0.6rem; }
.technova .pkp_structure_main > .page p { line-height: 1.8; color: var(--tech-gray-700); }
.technova .page_submissions .submission_checklist ul,
.technova .page_submissions .author_guidelines ul { padding-left: 1.25rem; }
.technova .page_submissions .submission_checklist li,
.technova .page_submissions .author_guidelines li { margin-bottom: 0.45rem; line-height: 1.6; }
.technova .page_submissions .section,
.technova .page_about .section { margin-bottom: 1.5rem; }
.technova .page_submissions table, .technova .page_about table { max-width: 100%; }

/* Base pages (about/submissions/fee/announcement/static) with a real sidebar -> 2 columns.
   Scoped with :has() so homepage/article/issue (sidebar suppressed) are unaffected. */
/* Match the Bootstrap .container + col-lg-9/col-lg-3 layout of issue/view (issue.tpl) */
.technova .pkp_structure_content:has(> .pkp_structure_sidebar) {
  display: flex !important; gap: 24px; align-items: flex-start;
  max-width: 1140px !important; margin: 0 auto !important; padding: 1.5rem 12px !important; box-sizing: border-box;
}
@media (min-width: 1400px){ .technova .pkp_structure_content:has(> .pkp_structure_sidebar) { max-width: 1320px !important; } }
.technova .pkp_structure_content:has(> .pkp_structure_sidebar) .pkp_structure_main { flex: 1 1 auto; min-width: 0; width: auto !important; }
.technova .pkp_structure_content:has(> .pkp_structure_sidebar) .pkp_structure_sidebar { flex: 0 0 25%; max-width: 25%; float: none !important; }
/* content card fills the main column (not centered/max-width) when a sidebar is present */
.technova .pkp_structure_content:has(> .pkp_structure_sidebar) .pkp_structure_main > .page:not(.container):not(.technova-home) { max-width: none !important; margin: 1.5rem 0 !important; }
@media (max-width: 991px){
  .technova .pkp_structure_content:has(> .pkp_structure_sidebar) { flex-wrap: wrap; }
  .technova .pkp_structure_content:has(> .pkp_structure_sidebar) .pkp_structure_sidebar { flex-basis: 100%; width: 100%; }
}

/* Make every static .page (About, Editorial Team, Submissions, Fee, Announcement...)
   look and sit exactly like the issue header card in the screenshot:
   full blue border, rounded, soft shadow, aligned to the top of the column. */
.technova .pkp_structure_main > .page:not(.container):not(.technova-home) {
  background: #ffffff !important;
  border: 2px solid var(--tech-primary) !important;
  border-top: 4px solid var(--tech-primary) !important;
  border-radius: var(--tech-radius-lg) !important;
  box-shadow: 0 4px 20px rgba(var(--tech-primary-rgb),0.08) !important;
  margin-top: 0 !important;            /* top-align with the sidebar's first card */
}
/* When a sidebar is present, sit flush at the top of the content column */
.technova .pkp_structure_content:has(> .pkp_structure_sidebar) .pkp_structure_main > .page:not(.container):not(.technova-home) {
  margin: 0 0 1.5rem 0 !important;
}
.technova .page_editorial_team .member, .technova .page_editorial_team li { line-height: 1.5; margin-bottom: 0.35rem; }
.technova .page_editorial_team h2, .technova .page_editorial_team h3 { color: var(--tech-primary) !important; }

/* ============================================================
   Editorial Team — member cards (paste HTML uses these classes)
   ============================================================ */
.tn-editorial { margin: 0; }
.tn-editorial .tn-group-title {
  font-size: 1.15rem; font-weight: 800; color: var(--tech-primary);
  margin: 1.9rem 0 1.1rem; padding-bottom: 0.5rem; border-bottom: 2px solid var(--tech-primary);
}
.tn-editorial .tn-group-title:first-child { margin-top: 0.25rem; }
.tn-member {
  display: flex; align-items: stretch; gap: 1.25rem;
  background: #fff; border: 1px solid var(--tech-gray-200); border-left: 4px solid var(--tech-primary);
  border-radius: 16px; padding: 1.25rem 1.4rem; margin-bottom: 1.1rem;
  box-shadow: 0 4px 18px rgba(var(--tech-primary-rgb),0.06);
  transition: box-shadow .25s ease, transform .25s ease;
}
.tn-member:hover { transform: translateY(-2px); box-shadow: 0 10px 26px rgba(var(--tech-primary-rgb),0.14); }
.tn-photo { flex: 0 0 auto; width: 96px; height: 96px; border-radius: 14px; overflow: hidden;
  border: 2px solid var(--tech-primary); background: #eef3fb; box-shadow: 0 3px 10px rgba(var(--tech-primary-rgb),.18); }
.tn-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.tn-avatar { flex: 0 0 auto; display: flex; align-items: center; justify-content: center;
  width: 96px; height: 96px; border-radius: 14px; color: #fff; font-weight: 800; font-size: 1.6rem;
  background: linear-gradient(135deg, var(--tech-primary), #10256b); box-shadow: 0 3px 10px rgba(var(--tech-primary-rgb),.25); }
.tn-info { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: .4rem; }
.tn-name-row { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem; }
.tn-name { font-size: 1.2rem; font-weight: 800; color: var(--tech-gray-900); line-height: 1.2; }
.tn-badge { display: inline-flex; align-items: center; gap: .35rem; font-size: .72rem; font-weight: 700;
  color: #fff; padding: .32rem .7rem; border-radius: 999px; letter-spacing: .02em; white-space: nowrap; }
.tn-badge i { font-size: .82rem; }
.tn-badge-chief { background: linear-gradient(135deg,#f0a500,#e07d00); box-shadow: 0 3px 8px rgba(224,125,0,.3); }
.tn-badge-role  { background: linear-gradient(135deg, var(--tech-primary), #10256b); box-shadow: 0 3px 8px rgba(var(--tech-primary-rgb),.3); }
.tn-affil { font-size: 1rem; font-weight: 600; color: var(--tech-gray-700); }
.tn-meta { font-size: .85rem; color: var(--tech-gray-600); line-height: 1.5; }
.tn-meta a { color: var(--tech-primary); font-weight: 600; text-decoration: none; }
.tn-tags { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: .15rem; }
.tn-tag { font-size: .8rem; font-weight: 600; color: var(--tech-gray-700); background: var(--tech-gray-100,#eef1f6);
  border: 1px solid var(--tech-gray-200); padding: .28rem .7rem; border-radius: 8px; }
.tn-country { display: inline-flex; align-items: center; gap: .45rem; align-self: flex-start;
  font-size: .9rem; font-weight: 700; color: var(--tech-primary);
  background: rgba(var(--tech-primary-rgb),.08); padding: .3rem .7rem; border-radius: 999px; }
.tn-flag { font-size: 1.05rem; line-height: 1; }
.tn-links { flex: 0 0 210px; display: flex; flex-direction: column; gap: .55rem; justify-content: center;
  padding-left: 1.25rem; border-left: 1px solid var(--tech-gray-200); }
.tn-link { display: flex; align-items: center; gap: .6rem; text-decoration: none !important;
  border: 1px solid var(--tech-gray-200); border-radius: 999px; padding: .3rem .55rem; background: #fff;
  color: var(--tech-gray-800); font-weight: 600; font-size: .9rem;
  transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease; }
.tn-link:hover { border-color: var(--tech-primary); box-shadow: 0 3px 10px rgba(var(--tech-primary-rgb),.12); transform: translateX(2px); }
.tn-ico { flex: 0 0 auto; width: 30px; height: 30px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  color: #fff; font-size: .82rem; font-weight: 800; }
.tn-ico-scholar { background: #1b7ba0; }
.tn-ico-orcid   { background: #a6ce39; }
.tn-ico-scopus  { background: var(--tech-primary); font-size: .72rem; }
.tn-ico-sinta   { background: #e8862a; }
.tn-ico-email   { background: #d0432b; }
.tn-ico-web     { background: var(--tech-primary); }
/* Country flag as an image (emoji flags don't render on Windows) */
.tn-flag-img { width: 24px; height: 18px; border-radius: 3px; object-fit: cover; box-shadow: 0 0 0 1px rgba(0,0,0,.08); display: inline-block; vertical-align: middle; }
/* Disabled / no-link buttons (rendered as a grey, non-clickable pill) */
.tn-link.tn-link-disabled { color: var(--tech-gray-400,#9aa3af); background: #f6f7f9; cursor: default; }
.tn-link.tn-link-disabled:hover { border-color: var(--tech-gray-200); box-shadow: none; transform: none; }
.tn-link.tn-link-disabled .tn-ico { background: #c3c9d4 !important; color: #fff; }
@media (max-width: 767.98px){
  .tn-member { flex-direction: column; }
  .tn-links { flex-basis: auto; border-left: none; border-top: 1px solid var(--tech-gray-200); padding-left: 0; padding-top: 1rem; }
}

/* ============================================================
   Extech-style footer (CTA banner + navy 4-column footer)
   ============================================================ */
.technova { --tn-navy: #101a4b; --tn-navy-2: #0b1440; --tn-blue: var(--tech-primary); }

/* CTA banner */
.tn-cta-wrap { margin-top: 4rem; }
.tn-cta { position: relative; display: flex; align-items: center; gap: 1.5rem; flex-wrap: wrap;
  background: linear-gradient(120deg, var(--tech-primary), #4a63ff);
  border-radius: 22px; padding: 1.6rem 2.4rem; margin-bottom: -3.2rem; z-index: 3;
  box-shadow: 0 18px 40px rgba(var(--tech-primary-rgb),.28); overflow: hidden; }
.tn-cta::after { content: ""; position: absolute; right: -40px; top: -60px; width: 320px; height: 320px;
  background: radial-gradient(circle at center, rgba(255,255,255,.18), transparent 60%); pointer-events: none; }
.tn-cta-media { flex: 0 0 auto; width: 132px; height: 108px; margin-top: -3.6rem; margin-bottom: -3.6rem;
  background: #fff; border-radius: 16px; display: flex; align-items: center; justify-content: center;
  box-shadow: 0 12px 28px rgba(0,0,0,.18); padding: 12px; }
.tn-cta-media img { max-width: 100%; max-height: 100%; object-fit: contain; }
.tn-cta-media i { font-size: 3rem; color: var(--tech-primary); }
.tn-cta-text { flex: 1 1 auto; min-width: 200px; color: #fff; }
.tn-cta-kicker { display: block; font-size: .95rem; font-weight: 600; opacity: .9; }
.tn-cta-title { font-size: 1.7rem; font-weight: 800; margin: .1rem 0 0; line-height: 1.15; color: #fff; }
.tn-cta-action { flex: 0 0 auto; }
.tn-cta-btn { display: inline-flex; align-items: center; gap: .55rem; background: #fff; color: var(--tech-primary) !important;
  font-weight: 800; font-size: .9rem; letter-spacing: .02em; text-transform: uppercase;
  padding: .85rem 1.6rem; border-radius: 999px; text-decoration: none !important; white-space: nowrap;
  box-shadow: 0 8px 20px rgba(0,0,0,.14); transition: transform .2s ease, box-shadow .2s ease; }
.tn-cta-btn:hover { transform: translateY(-2px); box-shadow: 0 12px 26px rgba(0,0,0,.22); }
.tn-cta-btn i { transition: transform .2s ease; }
.tn-cta-btn:hover i { transform: translateX(4px); }

/* Footer body */
.tn-foot { background: var(--tn-navy); color: #c7cbe6; padding: 6rem 0 0; }
.tn-foot a { color: #c7cbe6; text-decoration: none; }
.tn-foot-brand { display: inline-flex; align-items: center; gap: .7rem; margin-bottom: 1rem; }
.tn-foot-brand img { height: 44px; width: auto; }
.tn-foot-brand span { font-size: 1.5rem; font-weight: 800; color: #fff; }
.tn-foot-desc { font-size: .92rem; line-height: 1.7; color: #a6abd0; max-width: 340px; }
.tn-foot-social { display: flex; gap: .6rem; margin-top: 1.1rem; }
.tn-foot-social a { width: 40px; height: 40px; border: 1px solid rgba(255,255,255,.18); border-radius: 10px;
  display: flex; align-items: center; justify-content: center; color: #fff; font-size: 1rem; transition: all .2s ease; }
.tn-foot-social a:hover { background: var(--tech-primary); border-color: var(--tech-primary); transform: translateY(-2px); }
.tn-foot-title { color: #fff; font-size: 1.15rem; font-weight: 800; margin-bottom: 1.4rem; position: relative; padding-bottom: .6rem; }
.tn-foot-title::after { content: ""; position: absolute; left: 0; bottom: 0; width: 46px; height: 3px; background: var(--tech-primary); border-radius: 3px; }
.tn-foot-links { list-style: none; padding: 0; margin: 0; }
.tn-foot-links li { margin-bottom: .7rem; }
.tn-foot-links a { display: inline-flex; align-items: center; gap: .5rem; font-size: .93rem; transition: color .2s ease, transform .2s ease; }
.tn-foot-links a i { font-size: .8rem; color: var(--tech-primary); }
.tn-foot-links a:hover { color: #fff; transform: translateX(3px); }
/* Explore / posts */
.tn-foot-posts { display: flex; flex-direction: column; gap: 1rem; }
.tn-foot-post { display: flex; align-items: center; gap: .85rem; }
.tn-foot-post-thumb { flex: 0 0 auto; width: 56px; height: 56px; border-radius: 12px; display: flex; align-items: center; justify-content: center;
  background: rgba(var(--tech-primary-rgb),.22); color: #fff; font-size: 1.3rem; transition: background .2s ease; }
.tn-foot-post:hover .tn-foot-post-thumb { background: var(--tech-primary); }
.tn-foot-post-body { display: flex; flex-direction: column; min-width: 0; }
.tn-foot-post-meta { font-size: .78rem; color: #9aa0cc; display: inline-flex; align-items: center; gap: .35rem; }
.tn-foot-post-meta i { color: var(--tech-primary); }
.tn-foot-post-title { font-size: .98rem; font-weight: 700; color: #fff; }
.tn-foot-post:hover .tn-foot-post-title { color: var(--tech-primary); }
/* Contact */
.tn-foot-contact { list-style: none; padding: 0; margin: 0 0 1.2rem; }
.tn-foot-contact li { display: flex; align-items: center; gap: .65rem; margin-bottom: .8rem; font-size: .93rem; }
.tn-foot-contact li i { color: var(--tech-primary); font-size: 1rem; }
.tn-foot-contact a { color: #c7cbe6; }
.tn-foot-contact a:hover { color: #fff; }
.tn-foot-news-input { display: flex; align-items: center; justify-content: space-between; gap: .5rem;
  background: #fff; border-radius: 12px; padding: .35rem .35rem .35rem 1rem; text-decoration: none !important; }
.tn-foot-news-input > span:first-child { color: #6b7280; font-size: .9rem; font-weight: 600; }
.tn-foot-news-btn { flex: 0 0 auto; width: 42px; height: 42px; border-radius: 10px; background: var(--tech-primary);
  color: #fff; display: flex; align-items: center; justify-content: center; font-size: 1.05rem; transition: background .2s ease; }
.tn-foot-news-input:hover .tn-foot-news-btn { background: #4a63ff; }
.tn-foot-custom { margin-top: 2rem; padding-top: 1.5rem; border-top: 1px solid rgba(255,255,255,.12); color: #a6abd0; font-size: .88rem; }
/* Bottom bar */
.tn-foot-bottom { background: var(--tech-primary); margin-top: 4rem; padding: 1.1rem 0; }
.tn-foot-bottom-inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .75rem; color: #eaf0ff; font-size: .9rem; }
.tn-foot-bottom-inner strong { color: #fff; }
.tn-foot-bottom-links { display: flex; gap: 1.5rem; }
.tn-foot-bottom-links a { color: #eaf0ff; text-decoration: none; font-size: .9rem; }
.tn-foot-bottom-links a:hover { color: #fff; text-decoration: underline; }
@media (max-width: 767.98px){
  .tn-cta { padding: 1.4rem; margin-bottom: -2.4rem; }
  .tn-cta-media { margin: 0; width: 84px; height: 72px; }
  .tn-cta-title { font-size: 1.3rem; }
  .tn-foot { padding-top: 5rem; }
  .tn-foot-bottom-inner { justify-content: center; text-align: center; }
}

/* ============================================================
   Sotcox-style light footer (3 action cards + 3 columns)
   ============================================================ */
.tn-sf { background: #141c47; padding: 4rem 0 1.5rem; color: #b9bee0; }
.tn-sf a { text-decoration: none; }
/* Action cards */
.tn-sf-cards { margin-bottom: 3.5rem; }
.tn-sf-card { background: #fff; border-radius: 8px; padding: 2.2rem 2rem; height: 100%;
  box-shadow: 0 20px 45px rgba(16,26,75,.07); display: flex; flex-direction: column; }
.tn-sf-card-ico { font-size: 2.1rem; margin-bottom: 1.6rem; line-height: 1; }
.tn-sf-ico-blue { color: var(--tech-primary); }
.tn-sf-ico-amber { color: #f5a623; }
.tn-sf-kicker { font-size: .78rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; margin-bottom: .8rem; }
.tn-sf-kicker-blue { color: var(--tech-primary); }
.tn-sf-kicker-amber { color: #f5a623; }
.tn-sf-card-title { font-size: 1.4rem; font-weight: 800; color: var(--tech-gray-900); line-height: 1.3; margin: 0 0 auto; }
.tn-sf-btn { align-self: flex-start; margin-top: 1.8rem; background: var(--tech-primary); color: #fff !important;
  font-weight: 700; font-size: .82rem; letter-spacing: .06em; text-transform: uppercase;
  padding: .85rem 1.7rem; border-radius: 4px; transition: background .2s ease, transform .2s ease; }
.tn-sf-btn:hover { background: #10256b; transform: translateY(-2px); }
.tn-sf-phone { display: inline-flex; align-items: center; gap: .9rem; margin-top: 1.8rem; }
.tn-sf-phone-ico { width: 46px; height: 46px; border-radius: 50%; background: var(--tech-primary); color: #fff;
  display: flex; align-items: center; justify-content: center; font-size: 1.1rem; flex: 0 0 auto; }
.tn-sf-phone span:last-child { font-size: 1.35rem; font-weight: 800; color: var(--tech-gray-900); }
/* Footer columns */
.tn-sf-main { padding: 2.5rem 0 2rem; border-top: 1px solid rgba(255,255,255,.10); }
.tn-sf-brand { display: inline-flex; align-items: center; gap: .7rem; margin-bottom: 1.4rem; }
.tn-sf-brand img { height: 46px; width: auto; }
.tn-sf-brand span { font-size: 1.7rem; font-weight: 800; color: #fff; }
.tn-sf-contact { list-style: none; padding: 0; margin: 0 0 1.4rem; }
.tn-sf-contact li { display: flex; align-items: flex-start; gap: .6rem; margin-bottom: .75rem; font-size: .95rem; color: #a6abd0; }
.tn-sf-contact li i { color: var(--tech-primary); margin-top: .18rem; }
.tn-sf-contact a { color: #a6abd0; }
.tn-sf-contact a:hover { color: #fff; }
.tn-sf-social { display: flex; gap: 1.2rem; }
.tn-sf-social a { width: 38px; height: 38px; border: 1px solid rgba(255,255,255,.16); border-radius: 9px;
  display: flex; align-items: center; justify-content: center; color: #fff; font-size: 1rem; transition: all .2s ease; }
.tn-sf-social a:hover { background: var(--tech-primary); border-color: var(--tech-primary); transform: translateY(-2px); }
.tn-sf-col-title { font-size: 1.5rem; font-weight: 800; color: #fff; margin-bottom: 1.5rem; }
.tn-sf-links { list-style: none; padding: 0; margin: 0; }
.tn-sf-links li { display: flex; align-items: center; gap: .6rem; margin-bottom: .95rem; }
.tn-sf-links li::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--tech-primary); flex: 0 0 auto; }
.tn-sf-links a { color: #b9bee0; font-size: .98rem; transition: color .2s ease, padding-left .2s ease; }
.tn-sf-links a:hover { color: #fff; padding-left: 3px; }
.tn-sf-custom { color: #a6abd0; font-size: .9rem; padding-bottom: 1rem; }
/* Bottom bar */
.tn-sf-bottom { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .75rem;
  padding-top: 1.5rem; border-top: 1px solid rgba(255,255,255,.10); color: #a6abd0; font-size: .95rem; }
.tn-sf-bottom strong { color: #fff; }
.tn-sf-gotop { display: inline-flex; align-items: center; gap: .5rem; color: #c7cbe6; font-weight: 600; font-size: .95rem; }
.tn-sf-gotop:hover { color: var(--tech-primary); }
@media (max-width: 767.98px){
  .tn-sf-bottom { justify-content: center; text-align: center; }
  .tn-sf-card-title { font-size: 1.25rem; }
}

/* ============================================================
   Digitics-style light gradient footer
   ============================================================ */
.tn-df { background: linear-gradient(105deg, #cfe0ff 0%, #eef1fb 42%, #ece0fb 100%); padding: 3.5rem 0 1.5rem; color: var(--tech-gray-700); }
.tn-df a { text-decoration: none; }
/* Top bar */
.tn-df-top { display: flex; flex-wrap: wrap; align-items: center; gap: 2.5rem; padding-bottom: 2.2rem; margin-bottom: 2.4rem; border-bottom: 1px solid rgba(16,26,75,.12); }
.tn-df-brandcol { flex: 1 1 240px; }
.tn-df-brand { display: inline-flex; align-items: center; gap: .65rem; margin-bottom: 1rem; }
.tn-df-brand img { height: 46px; width: auto; }
.tn-df-brand span { font-size: 1.9rem; font-weight: 800; color: var(--tech-gray-900); }
.tn-df-social { display: flex; gap: 1.3rem; }
.tn-df-social a { color: var(--tech-gray-800); font-size: 1.05rem; transition: color .2s ease, transform .2s ease; }
.tn-df-social a:hover { color: var(--tech-primary); transform: translateY(-2px); }
.tn-df-top-item { flex: 0 1 auto; display: flex; align-items: center; gap: 1rem; padding-left: 2.5rem; border-left: 1px solid rgba(16,26,75,.12); }
.tn-df-top-ico { width: 56px; height: 56px; border-radius: 50%; flex: 0 0 auto; display: flex; align-items: center; justify-content: center;
  background: rgba(var(--tech-primary-rgb),.10); color: var(--tech-primary); font-size: 1.3rem; }
.tn-df-top-label { display: block; font-size: .92rem; color: var(--tech-gray-600); margin-bottom: .1rem; }
.tn-df-top-value { display: block; font-size: 1.25rem; font-weight: 800; color: var(--tech-gray-900); }
.tn-df-top-value:hover { color: var(--tech-primary); }
/* Columns */
.tn-df-cols { padding: 1rem 0 2.5rem; }
.tn-df-title { position: relative; font-size: 1.35rem; font-weight: 800; color: var(--tech-gray-900); margin-bottom: 1.6rem; padding-bottom: .7rem; }
.tn-df-title::after { content: ""; position: absolute; left: 0; bottom: 0; width: 55px; height: 3px; background: var(--tech-primary); border-radius: 3px; }
.tn-df-about { font-size: .96rem; line-height: 1.8; color: var(--tech-gray-600); margin-bottom: 1.6rem; }
.tn-df-contact-btn { display: inline-flex; align-items: center; gap: .5rem; border: 1.5px solid var(--tech-primary); color: var(--tech-primary) !important;
  font-weight: 700; padding: .7rem 1.5rem; border-radius: 999px; transition: all .2s ease; }
.tn-df-contact-btn:hover { background: var(--tech-primary); color: #fff !important; transform: translateY(-2px); }
.tn-df-links { list-style: none; padding: 0; margin: 0; }
.tn-df-links li { margin-bottom: 1rem; }
.tn-df-links > li > a { display: inline-flex; align-items: center; gap: .6rem; color: var(--tech-gray-700); font-size: .98rem; transition: color .2s ease, transform .2s ease; }
.tn-df-links > li > a > i { font-size: .82rem; color: var(--tech-primary); }
.tn-df-links > li > a:hover { color: var(--tech-primary); transform: translateX(3px); }
.tn-df-info li { display: flex; align-items: flex-start; gap: .6rem; font-size: .95rem; color: var(--tech-gray-600); }
.tn-df-info li i { color: var(--tech-primary); margin-top: .2rem; }
/* Newsletter */
.tn-df-news { display: flex; align-items: center; justify-content: space-between; gap: .5rem; margin-top: 1.4rem;
  background: #fff; border: 1px solid rgba(16,26,75,.10); border-radius: 8px; padding: .3rem .3rem .3rem 1rem; box-shadow: 0 6px 18px rgba(16,26,75,.06); }
.tn-df-news > span:first-child { color: #6b7280; font-size: .92rem; font-weight: 600; }
.tn-df-news-btn { flex: 0 0 auto; width: 44px; height: 40px; border-radius: 6px; background: var(--tech-primary); color: #fff;
  display: flex; align-items: center; justify-content: center; font-size: 1.05rem; transition: background .2s ease; }
.tn-df-news:hover .tn-df-news-btn { background: #10256b; }
.tn-df-agree { display: flex; align-items: center; gap: .55rem; margin-top: .9rem; font-size: .88rem; color: var(--tech-gray-600); }
.tn-df-check { width: 16px; height: 16px; border: 1.5px solid var(--tech-gray-400,#9aa3af); border-radius: 3px; flex: 0 0 auto; }
.tn-df-custom { color: var(--tech-gray-600); font-size: .9rem; padding-bottom: 1rem; }
/* Bottom */
.tn-df-bottom { text-align: center; padding-top: 1.6rem; border-top: 1px solid rgba(16,26,75,.12); color: var(--tech-gray-600); font-size: .95rem; }
.tn-df-bottom strong { color: var(--tech-gray-900); }
@media (max-width: 991.98px){
  .tn-df-top-item { padding-left: 0; border-left: none; }
  .tn-df-top { gap: 1.6rem; }
}

/* ============================================================
   Tekni-style dark blue gradient footer
   ============================================================ */
.tn-tk { position: relative; color: #b9c0e6;
  background: radial-gradient(900px 500px at 12% 25%, #2b34a3 0%, rgba(43,52,163,0) 55%),
              linear-gradient(115deg, #1a237e 0%, #131c5e 45%, #0b1244 100%); }
.tn-tk a { text-decoration: none; }
.tn-tk-cols { padding: 4.5rem 0 3.5rem; }
.tn-tk-brand { display: inline-flex; align-items: center; gap: .7rem; margin-bottom: 1.3rem; }
.tn-tk-brand img { height: 48px; width: auto; }
.tn-tk-brand span { font-size: 2rem; font-weight: 800; color: #fff; }
.tn-tk-desc { font-size: .96rem; line-height: 1.85; color: #aab1dd; max-width: 340px; margin-bottom: 1.6rem; }
.tn-tk-social { display: flex; gap: .8rem; }
.tn-tk-social a { width: 46px; height: 46px; border-radius: 50%; background: rgba(255,255,255,.07);
  display: flex; align-items: center; justify-content: center; color: #fff; font-size: 1.05rem; transition: all .25s ease; }
.tn-tk-social a:hover { background: var(--tech-primary); transform: translateY(-3px); box-shadow: 0 8px 18px rgba(var(--tech-primary-rgb),.4); }
.tn-tk-title { color: #fff; font-size: 1.5rem; font-weight: 800; margin-bottom: 1.6rem; }
.tn-tk-links { list-style: none; padding: 0; margin: 0; }
.tn-tk-links li { margin-bottom: 1rem; }
.tn-tk-links a { color: #aab1dd; font-size: 1rem; transition: color .2s ease, padding-left .2s ease; }
.tn-tk-links a:hover { color: #fff; padding-left: 4px; }
/* Get in touch */
.tn-tk-git { list-style: none; padding: 0; margin: 0; }
.tn-tk-git li { display: flex; align-items: flex-start; gap: 1rem; margin-bottom: 1.4rem; }
.tn-tk-git-ico { flex: 0 0 auto; width: 50px; height: 50px; border-radius: 50%; background: rgba(255,255,255,.06);
  display: flex; align-items: center; justify-content: center; font-size: 1.15rem; }
.tn-tk-git-ico i { background: linear-gradient(135deg, #ff9d3c, #f5416c); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; }
.tn-tk-git-txt { font-size: .97rem; line-height: 1.6; color: #c1c7ea; padding-top: .35rem; }
.tn-tk-git-txt a { color: #c1c7ea; }
.tn-tk-git-txt a:hover { color: #fff; }
.tn-tk-custom { color: #aab1dd; font-size: .9rem; padding-bottom: 1.5rem; }
/* Bottom bar */
.tn-tk-bottom { background: rgba(0,0,0,.22); padding: 1.15rem 0; border-top: 1px solid rgba(255,255,255,.08); }
.tn-tk-bottom-inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .75rem; color: #aab1dd; font-size: .93rem; }
.tn-tk-bottom-inner strong { color: #fff; font-weight: 700; }
.tn-tk-bottom-links { display: flex; gap: 1.8rem; }
.tn-tk-bottom-links a { color: #c1c7ea; font-size: .93rem; }
.tn-tk-bottom-links a:hover { color: #fff; }
@media (max-width: 767.98px){
  .tn-tk-cols { padding: 3.5rem 0 2.5rem; }
  .tn-tk-bottom-inner { justify-content: center; text-align: center; }
}

/* ============================================================
   Work-Process style archive (hero + numbered cards)
   ============================================================ */
.tn-wp-hero { position: relative; overflow: hidden; display: flex; flex-wrap: wrap; align-items: center; gap: 2rem;
  background: linear-gradient(105deg, #3b46e0 0%, #7b2ff7 44%, #1c2470 53%, #111845 100%);
  border-radius: 20px; padding: 2.8rem 3rem; margin-bottom: 2.5rem; box-shadow: 0 18px 45px rgba(59,70,224,.22); }
.tn-wp-hero::before { content: ""; position: absolute; top: -120px; left: -120px; width: 320px; height: 320px;
  border-radius: 50%; border: 60px solid rgba(255,255,255,.06); pointer-events: none; }
.tn-wp-hero-left { position: relative; flex: 1 1 340px; min-width: 260px; }
.tn-wp-hero-right { position: relative; flex: 1 1 340px; min-width: 260px; }
.tn-wp-badge { display: inline-block; border: 1px solid rgba(255,255,255,.4); color: #fff; font-weight: 700;
  font-size: .8rem; letter-spacing: .14em; text-transform: uppercase; padding: .5rem 1.1rem; border-radius: 8px; margin-bottom: 1.1rem; }
.tn-wp-title { color: #fff; font-size: 2.6rem; font-weight: 800; line-height: 1.1; margin: 0; }
.tn-wp-hero-right p { color: #eef1ff; font-size: 1.02rem; font-weight: 500; line-height: 1.8; margin: 0;
  text-shadow: 0 1px 6px rgba(0,0,0,.35); }
.tn-wp-hero-right strong { color: #fff; font-weight: 800; }
/* Cards */
.tn-wp-card { position: relative; background: #fff; border-radius: 14px; padding: 2.9rem 1.6rem 1.6rem;
  height: 100%; display: flex; flex-direction: column; box-shadow: 0 16px 40px rgba(16,26,75,.10);
  transition: transform .25s ease, box-shadow .25s ease; }
.tn-wp-card:hover { transform: translateY(-5px); box-shadow: 0 24px 50px rgba(59,70,224,.20); }
.tn-wp-num { position: absolute; top: 0; left: 1.6rem; width: 62px; height: 52px; border-radius: 0 0 16px 16px;
  background: linear-gradient(135deg, #3b46e0, #7b2ff7); color: #fff; font-weight: 800; font-size: 1.2rem;
  display: flex; align-items: center; justify-content: center; box-shadow: 0 8px 18px rgba(123,47,247,.30); }
.tn-wp-card-title { font-size: 1.2rem; font-weight: 800; line-height: 1.3; margin: 0 0 .5rem; }
.tn-wp-card-title a { color: var(--tech-gray-900); text-decoration: none; }
.tn-wp-card-title a:hover { color: var(--tech-primary); }
.tn-wp-card-meta { font-size: .82rem; font-weight: 600; color: var(--tech-primary); margin-bottom: .7rem; display: inline-flex; align-items: center; gap: .4rem; }
.tn-wp-card-desc { font-size: .92rem; line-height: 1.7; color: var(--tech-gray-600); margin: 0 0 1.4rem; }
.tn-wp-card-foot { margin-top: auto; display: flex; align-items: center; gap: .9rem; }
.tn-wp-card-date { display: inline-flex; align-items: center; gap: .4rem; font-size: .85rem; font-weight: 600; color: var(--tech-gray-700); }
.tn-wp-card-date i { color: var(--tech-primary); }
.tn-wp-card-ico { width: 66px; height: 66px; border-radius: 14px; display: flex; align-items: center; justify-content: center;
  overflow: hidden; background: rgba(var(--tech-primary-rgb),.08); text-decoration: none; transition: background .2s ease, transform .2s ease; }
.tn-wp-card-ico img { width: 100%; height: 100%; object-fit: cover; }
.tn-wp-card-ico i { font-size: 1.9rem; background: linear-gradient(135deg, #3b46e0, #7b2ff7);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; }
.tn-wp-card:hover .tn-wp-card-ico { transform: scale(1.05); }
@media (max-width: 767.98px){
  .tn-wp-hero { padding: 2rem 1.6rem; }
  .tn-wp-title { font-size: 2rem; }
}