/* ===========================
   Akhan Web - Özel Stil Dosyası
   =========================== */

/* Lightbox açıklama metni - global açık gri renk beyaz zeminde okunmuyordu */
.glightbox-clean .gslide-desc {
  color: #333;
}
.glightbox-clean .gslide-title {
  color: var(--accent-color, #22e7a1);
  font-weight: 600;
}

/* Sosyal medya butonları - kendi marka renkleriyle (header sidebar + footer) */
.social-links a.social-youtube,
.social-links a.social-facebook,
.social-links a.social-instagram,
.social-links a.social-x,
.social-links a.social-linkedin {
  color: #fff;
  transition: transform 0.3s ease, filter 0.3s ease;
}
.social-links a.social-youtube { background: #FF0000; }
.social-links a.social-facebook { background: #1877F2; }
.social-links a.social-instagram {
  background: linear-gradient(45deg, #f09433, #e6683c, #dc2743, #cc2366, #bc1888);
}
.social-links a.social-x { background: #000; }
.social-links a.social-linkedin { background: #0A66C2; }

.social-links a.social-youtube:hover,
.social-links a.social-facebook:hover,
.social-links a.social-instagram:hover,
.social-links a.social-x:hover,
.social-links a.social-linkedin:hover {
  color: #fff;
  filter: brightness(1.12);
  transform: translateY(-3px);
}

/* Yukarı kaydır butonu artık yüzen/sabit değil, footer'ın en altında sabit duruyor */
.scroll-top.scroll-top-footer {
  position: static;
  visibility: visible;
  opacity: 1;
  width: auto;
  height: auto;
  margin: 26px auto 0;
  padding: 10px 22px;
  border-radius: 30px;
  gap: 8px;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--contrast-color);
  transition: transform .2s ease, background .2s ease;
}
.scroll-top.scroll-top-footer:hover {
  transform: translateY(-3px);
  color: var(--contrast-color);
}
.scroll-top.scroll-top-footer i { font-size: 20px; }

/* Genel buton stilleri (hero dışında da kullanılabilsin: ilçe sayfaları, hizmetler, CTA şeritleri) */
.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  margin: 1.5rem 0;
}
.btn-primary,
.cta-strip .btn-primary {
  display: inline-block;
  padding: 14px 32px;
  background: var(--accent-color);
  color: var(--contrast-color);
  border-radius: 6px;
  font-weight: 500;
  text-decoration: none;
  transition: all 0.3s ease;
  border: 2px solid var(--accent-color);
}
.btn-primary:hover {
  background: color-mix(in srgb, var(--accent-color), black 10%);
  border-color: color-mix(in srgb, var(--accent-color), black 10%);
  color: var(--contrast-color);
  transform: translateY(-2px);
}
.btn-secondary {
  display: inline-block;
  padding: 14px 32px;
  background: transparent;
  color: var(--heading-color);
  border-radius: 6px;
  font-weight: 500;
  text-decoration: none;
  transition: all 0.3s ease;
  border: 2px solid color-mix(in srgb, var(--default-color), transparent 80%);
}
.btn-secondary:hover {
  background: transparent;
  color: var(--accent-color);
  border-color: var(--accent-color);
  transform: translateY(-2px);
}

/* Logo (gerçek marka logosu) */
.header .logo {
  flex-direction: column;
  gap: 4px;
}
.header .logo-mark-img {
  width: 52px;
  height: auto;
  margin-bottom: 6px;
}
.header .logo-sub {
  font-size: 12px;
  letter-spacing: .5px;
  color: color-mix(in srgb, var(--default-color), transparent 30%);
  margin: 0 0 10px 0;
  text-align: center;
}

/* Hero - dönen anahtar kelime */
.hero .typed-rotator {
  color: var(--accent-color);
}

/* Header köşe profil fotoğrafı - fotoğraf kırpılmadan tam görünür */
.header .profile-img img {
  width: auto;
  max-width: 100%;
  height: auto;
  max-height: 200px;
  object-fit: contain;
  margin: 20px auto 6px;
}
.header .profile-img { cursor: zoom-in; }

.about .profile-image-container a {
  display: block;
  cursor: zoom-in;
}

/* Hakkımda fotoğrafı (burakakhan.png) - sağdaki boşluğu doldurmak için tam genişlik, yatay çerçeve */
.about .profile-section .profile-image-container img {
  max-width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
}

/* Kod yazma animasyonu (typewriter) - profesyonel editör görünümü */
.code-window {
  background: #0d1220;
  border-radius: 14px;
  padding: 0;
  overflow: hidden;
  box-shadow: 0 25px 60px -18px rgba(0,0,0,.6), 0 0 0 1px color-mix(in srgb, var(--accent-color), transparent 85%);
  font-family: 'Fira Code', 'Consolas', 'Monaco', 'Courier New', monospace;
  max-width: 100%;
}
.code-window .code-dots {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 13px 16px;
  background: linear-gradient(180deg, #1e293b, #171f30);
  border-bottom: 1px solid rgba(255,255,255,.05);
}
.code-window .code-dots span {
  width: 11px;
  height: 11px;
  border-radius: 50%;
  display: inline-block;
}
.code-window .code-dots span:nth-child(1) { background: #ff5f56; }
.code-window .code-dots span:nth-child(2) { background: #ffbd2e; }
.code-window .code-dots span:nth-child(3) { background: #27c93f; }
.code-window .code-filename {
  margin-left: 10px;
  font-size: 12px;
  color: #8b94ad;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.code-window .code-filename i { color: var(--accent-color); font-size: 13px; }

.code-window .code-body-wrap {
  display: flex;
  min-height: 260px;
}
.code-window .code-gutter {
  padding: 22px 14px 24px 0;
  text-align: right;
  color: #3d4a63;
  font-size: 13.5px;
  line-height: 1.85;
  user-select: none;
  background: rgba(255,255,255,.015);
  min-width: 44px;
}
.code-window .code-body {
  padding: 22px 24px 24px 16px;
  font-size: 13.5px;
  line-height: 1.85;
  color: #e2e8f0;
  flex: 1;
  min-width: 0;
  overflow-x: auto;
}
.code-window .code-body .cw-row {
  display: block;
  min-height: 1.85em;
  white-space: pre;
}
.code-window .code-body .cw-clip {
  display: inline-block;
  overflow: hidden;
  white-space: pre;
  vertical-align: top;
  max-width: 100%;
}
.code-window .code-body .tok-kw  { color: #ff79c6; font-weight: 600; }
.code-window .code-body .tok-fn  { color: #74d4ff; }
.code-window .code-body .tok-cls { color: #c9a3ff; }
.code-window .code-body .tok-tag { color: #ff79c6; }
.code-window .code-body .tok-str { color: #9dff8f; }
.code-window .code-body .tok-num { color: #ffb86c; }
.code-window .code-body .tok-com { color: #5b6688; font-style: italic; }
.code-window .code-body .tok-dec { color: #74d4ff; }
.code-window .code-body .cursor {
  display: inline-block;
  width: 8px;
  height: 16px;
  background: var(--accent-color);
  margin-left: 2px;
  animation: blink-cursor 1s steps(1) infinite;
  vertical-align: middle;
  box-shadow: 0 0 8px color-mix(in srgb, var(--accent-color), transparent 30%);
}
@keyframes blink-cursor {
  50% { opacity: 0; }
}

@media (max-width: 576px) {
  .code-window .code-gutter { display: none; }
  .code-window .code-body-wrap { min-height: 220px; }
}

/* İlçeler grid (ilceler.php) */
.ilce-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: 20px;
}
.ilce-card {
  background: var(--surface-color);
  border-radius: 14px;
  padding: 22px 20px;
  display: flex;
  align-items: center;
  gap: 14px;
  text-decoration: none;
  transition: transform .25s ease, box-shadow .25s ease;
  border: 1px solid color-mix(in srgb, var(--default-color), transparent 92%);
}
.ilce-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 14px 30px -12px rgba(0,0,0,.35);
  border-color: var(--accent-color);
}
.ilce-card .ilce-icon {
  width: 46px;
  height: 46px;
  min-width: 46px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: color-mix(in srgb, var(--accent-color), transparent 85%);
  color: var(--accent-color);
  font-size: 20px;
}
.ilce-card .ilce-name {
  color: var(--heading-color);
  font-weight: 600;
  display: block;
  font-size: 16px;
}
.ilce-card .ilce-sub {
  color: color-mix(in srgb, var(--default-color), transparent 35%);
  font-size: 12.5px;
}

/* İlçe detay sayfası - ilçeye özel fotoğraf arka planlı hero */
.ilce-hero {
  position: relative;
  padding: 70px 0 50px;
  background-size: cover;
  background-position: center 68%;
  isolation: isolate;
}
.ilce-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(8,12,18,.72) 0%, rgba(8,12,18,.52) 45%, rgba(8,12,18,.80) 100%);
  z-index: -1;
}
.ilce-hero h1,
.ilce-hero .lead-text { color: #fff; text-shadow: 0 2px 12px rgba(0,0,0,.55); }
.ilce-detay-foto {
  width: 100%;
  max-height: 380px;
  object-fit: cover;
  margin: 8px 0 28px;
}
.ilce-hero .breadcrumb-trail { color: rgba(255,255,255,.65); }
.ilce-hero .breadcrumb-trail a { color: rgba(255,255,255,.85); }
.ilce-hero .breadcrumb-trail a:hover { color: var(--accent-color); }

.breadcrumb-trail {
  font-size: 13px;
  color: color-mix(in srgb, var(--default-color), transparent 40%);
  margin-bottom: 14px;
}
.breadcrumb-trail a { color: color-mix(in srgb, var(--default-color), transparent 15%); }
.breadcrumb-trail a:hover { color: var(--accent-color); }

.semt-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 18px 0;
}
.semt-tags span {
  background: color-mix(in srgb, var(--accent-color), transparent 88%);
  color: var(--accent-color);
  padding: 6px 14px;
  border-radius: 30px;
  font-size: 13px;
  font-weight: 500;
}

.nearby-ilceler {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.nearby-ilceler a {
  border: 1px solid color-mix(in srgb, var(--default-color), transparent 85%);
  padding: 8px 16px;
  border-radius: 30px;
  color: var(--default-color);
  text-decoration: none;
  font-size: 14px;
  transition: all .2s ease;
}
.nearby-ilceler a:hover {
  background: var(--accent-color);
  color: var(--contrast-color);
  border-color: var(--accent-color);
}

/* FAQ accordion - koyu tema uyumu (Bootstrap varsayılanı açık renkliydi) */
.faq-block {
  background: var(--surface-color);
  border-radius: 12px;
  padding: 6px 22px;
  margin-bottom: 14px;
  border: none;
  overflow: hidden;
}
.faq-block .accordion-button {
  background: transparent;
  color: var(--heading-color);
  font-weight: 500;
  box-shadow: none;
}
.faq-block .accordion-button:not(.collapsed) {
  background: transparent;
  color: var(--accent-color);
  box-shadow: none;
}
.faq-block .accordion-button::after {
  filter: invert(70%) sepia(60%) saturate(500%) hue-rotate(100deg);
}
.faq-block .accordion-body {
  color: color-mix(in srgb, var(--default-color), transparent 15%);
  padding-top: 0;
}

/* İlçe sayfaları - kart tabanlı zengin SSS (10 soru) */
.faq-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
  align-items: start;
}
@media (max-width: 900px) {
  .faq-grid { grid-template-columns: 1fr; }
}
.faq-card {
  background: var(--surface-color);
  border: 1px solid color-mix(in srgb, var(--default-color), transparent 92%);
  border-radius: 12px;
  overflow: hidden;
  transition: border-color .2s ease;
}
.faq-card:hover { border-color: color-mix(in srgb, var(--accent-color), transparent 60%); }
.faq-q {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 12px;
  background: transparent;
  border: none;
  padding: 16px 18px;
  text-align: left;
  cursor: pointer;
  color: var(--heading-color);
  font-weight: 600;
  font-size: 14.5px;
}
.faq-q-num {
  flex-shrink: 0;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--accent-color), transparent 82%);
  color: var(--accent-color);
  font-size: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.faq-q-text { flex: 1; }
.faq-caret { color: color-mix(in srgb, var(--default-color), transparent 40%); transition: transform .2s ease; flex-shrink: 0; }
.faq-q[aria-expanded="true"] .faq-caret,
.faq-q:not(.collapsed) .faq-caret { transform: rotate(180deg); color: var(--accent-color); }
.faq-a {
  padding: 0 18px 18px 56px;
  color: color-mix(in srgb, var(--default-color), transparent 15%);
  font-size: 14px;
  line-height: 1.7;
}

/* İlçe hero - Hızlı Cevap / NAP kutusu (AEO) */
.ilce-hizli-cevap {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 14px;
  background: var(--surface-color);
  border: 1px solid color-mix(in srgb, var(--accent-color), transparent 75%);
  border-radius: 14px;
  padding: 20px 22px;
  margin-top: 28px;
  max-width: 760px;
}
.ihc-item { display: flex; flex-direction: column; gap: 4px; }
.ihc-label {
  font-size: 12px;
  color: color-mix(in srgb, var(--default-color), transparent 35%);
  display: flex;
  align-items: center;
  gap: 6px;
}
.ihc-label i { color: var(--accent-color); }
.ihc-value { font-weight: 700; color: var(--heading-color); font-size: 14.5px; }

/* Footer ilçe linkleri */
.footer-contact-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 22px;
  margin: 14px 0 22px;
  font-size: 14px;
}
.footer-contact-row a, .footer-contact-row span {
  color: var(--default-color);
  text-decoration: none;
}
.footer-contact-row a:hover { color: var(--accent-color); }

.footer-ilceler {
  border-top: 1px solid color-mix(in srgb, var(--default-color), transparent 90%);
  border-bottom: 1px solid color-mix(in srgb, var(--default-color), transparent 90%);
  padding: 22px 0;
  margin: 24px 0;
}
.footer-ilceler-title {
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: color-mix(in srgb, var(--default-color), transparent 40%);
  margin-bottom: 12px;
}
.footer-ilceler-links {
  font-size: 13.5px;
  line-height: 2.2;
  color: color-mix(in srgb, var(--default-color), transparent 25%);
}
.footer-ilceler-links a {
  color: inherit;
  text-decoration: none;
}
.footer-ilceler-links a:hover { color: var(--accent-color); }

/* Nav dropdown - İlçeler için kaydırılabilir */
.navmenu .dropdown ul {
  max-height: 340px;
  overflow-y: auto;
}

/* ===========================
   Akıllı Asistan (Chatbot)
   =========================== */
.akbot-toggle {
  position: fixed;
  right: 22px;
  bottom: 22px;
  width: 74px;
  height: 74px;
  border-radius: 50%;
  border: none;
  cursor: pointer;
  background: #0a0f16;
  padding: 0;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 999;
  box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent-color), transparent 40%), 0 8px 24px -8px rgba(0,0,0,.5);
  animation: akbot-pulse 2.6s ease-in-out infinite;
  transition: transform .2s ease;
}
.akbot-toggle:hover { transform: scale(1.06); }
.akbot-toggle.akbot-active { transform: scale(0.94); }

.akbot-toggle-bob {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  animation: akbot-bob 3.2s ease-in-out infinite;
}
.akbot-toggle-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transform-origin: center;
  animation: akbot-spin 6s linear infinite;
}
.akbot-header-bot-imgwrap {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  overflow: hidden;
  flex-shrink: 0;
  display: block;
}
.akbot-header-bot-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.85);
  display: block;
}

@keyframes akbot-bob {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-7px); }
}
@keyframes akbot-spin {
  0%, 70% { transform: scale(1.85) rotate(0deg); }
  100% { transform: scale(1.85) rotate(360deg); }
}

@keyframes akbot-pulse {
  0%   { box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent-color), transparent 55%), 0 8px 24px -8px rgba(0,0,0,.5); }
  70%  { box-shadow: 0 0 0 14px color-mix(in srgb, var(--accent-color), transparent 100%), 0 8px 24px -8px rgba(0,0,0,.5); }
  100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent-color), transparent 100%), 0 8px 24px -8px rgba(0,0,0,.5); }
}

.akbot-tooltip {
  position: fixed;
  right: 92px;
  bottom: 34px;
  background: var(--surface-color);
  color: var(--heading-color);
  padding: 12px 18px;
  border-radius: 14px;
  border: 1px solid color-mix(in srgb, var(--accent-color), transparent 60%);
  font-size: 14px;
  font-weight: 500;
  max-width: 210px;
  box-shadow: 0 10px 30px -10px rgba(0,0,0,.5);
  z-index: 998;
  opacity: 0;
  transform: translateY(6px) scale(.96);
  pointer-events: none;
  transition: all .35s ease;
}
.akbot-tooltip::after {
  content: "";
  position: absolute;
  right: -6px;
  bottom: 18px;
  width: 12px;
  height: 12px;
  background: var(--surface-color);
  border-right: 1px solid color-mix(in srgb, var(--accent-color), transparent 60%);
  border-bottom: 1px solid color-mix(in srgb, var(--accent-color), transparent 60%);
  transform: rotate(-45deg);
}
.akbot-tooltip-show { opacity: 1; transform: translateY(0) scale(1); }

.akbot-panel {
  position: fixed;
  right: 22px;
  bottom: 96px;
  width: 360px;
  max-width: calc(100vw - 32px);
  height: 480px;
  max-height: calc(100vh - 140px);
  background: var(--background-color);
  border: 1px solid color-mix(in srgb, var(--accent-color), transparent 75%);
  border-radius: 18px;
  box-shadow: 0 24px 60px -16px rgba(0,0,0,.6);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  z-index: 1000;
  opacity: 0;
  transform: translateY(16px) scale(.97);
  pointer-events: none;
  transition: all .28s ease;
}
.akbot-panel.akbot-open { opacity: 1; transform: translateY(0) scale(1); pointer-events: auto; }

.akbot-header {
  background: var(--surface-color);
  padding: 14px 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid color-mix(in srgb, var(--default-color), transparent 90%);
}
.akbot-header-bot { display: flex; align-items: center; gap: 10px; color: var(--heading-color); }
.akbot-header-bot strong { display: block; font-size: 14px; }
.akbot-header-bot span { display: block; font-size: 11px; color: color-mix(in srgb, var(--default-color), transparent 35%); }
.akbot-header button {
  background: none; border: none; color: var(--default-color); font-size: 16px; cursor: pointer; opacity: .7;
}
.akbot-header button:hover { opacity: 1; color: var(--accent-color); }

.akbot-messages {
  flex: 1;
  overflow-y: auto;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.akbot-bubble {
  max-width: 84%;
  padding: 10px 14px;
  border-radius: 14px;
  font-size: 13.5px;
  line-height: 1.55;
  word-wrap: break-word;
}
.akbot-bubble a { color: inherit; text-decoration: underline; }
.akbot-bot {
  align-self: flex-start;
  background: var(--surface-color);
  color: var(--default-color);
  border-bottom-left-radius: 4px;
}
.akbot-user {
  align-self: flex-end;
  background: var(--accent-color);
  color: var(--contrast-color);
  border-bottom-right-radius: 4px;
}
.akbot-typing { display: flex; gap: 4px; align-items: center; padding: 14px; }
.akbot-typing span {
  width: 6px; height: 6px; border-radius: 50%; background: color-mix(in srgb, var(--default-color), transparent 30%);
  animation: akbot-blink 1.2s infinite ease-in-out;
}
.akbot-typing span:nth-child(2) { animation-delay: .2s; }
.akbot-typing span:nth-child(3) { animation-delay: .4s; }
@keyframes akbot-blink { 0%, 80%, 100% { opacity: .3; } 40% { opacity: 1; } }

.akbot-form {
  display: flex;
  gap: 8px;
  padding: 12px;
  border-top: 1px solid color-mix(in srgb, var(--default-color), transparent 90%);
}
.akbot-form input {
  flex: 1;
  background: var(--surface-color);
  border: 1px solid color-mix(in srgb, var(--default-color), transparent 85%);
  border-radius: 24px;
  padding: 10px 16px;
  color: var(--default-color);
  font-size: 13.5px;
  outline: none;
}
.akbot-form input:focus { border-color: var(--accent-color); }
.akbot-form button {
  width: 40px; height: 40px; border-radius: 50%; border: none;
  background: var(--accent-color); color: var(--contrast-color);
  display: flex; align-items: center; justify-content: center; cursor: pointer; flex-shrink: 0;
}

@media (max-width: 480px) {
  .akbot-panel { right: 16px; bottom: 88px; }
  .akbot-tooltip { right: 16px; bottom: 92px; }
  .akbot-toggle { right: 16px; bottom: 16px; }
}

/* ===========================
   Fiyatlandırma Sayfası
   =========================== */
.pricing-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 24px;
  align-items: stretch;
}
.price-card {
  background: var(--surface-color);
  border: 2px solid color-mix(in srgb, var(--tier-color, var(--accent-color)), transparent 70%);
  border-radius: 18px;
  padding: 30px 26px;
  position: relative;
  display: flex;
  flex-direction: column;
  transition: transform .25s ease, box-shadow .25s ease;
}
.price-card:hover { transform: translateY(-6px); box-shadow: 0 20px 45px -18px rgba(0,0,0,.5); }

.price-basic     { --tier-color: #3b82f6; }
.price-standart  { --tier-color: #22e7a1; }
.price-premium   { --tier-color: #a855f7; }
.price-business  { --tier-color: #f2b134; }

.price-featured { border-width: 2px; box-shadow: 0 0 0 1px color-mix(in srgb, var(--tier-color), transparent 40%); }
.price-badge-top {
  position: absolute;
  top: -15px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--tier-color, var(--accent-color));
  color: #06241a;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .2px;
  padding: 7px 18px;
  border-radius: 20px;
  white-space: nowrap;
  box-shadow: 0 6px 16px -4px color-mix(in srgb, var(--tier-color, var(--accent-color)), transparent 40%);
  display: flex;
  align-items: center;
  gap: 6px;
  z-index: 2;
}
.price-head { text-align: center; margin-bottom: 14px; }
.price-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  border-radius: 12px;
  background: color-mix(in srgb, var(--tier-color, var(--accent-color)), transparent 82%);
  color: var(--tier-color, var(--accent-color));
  font-weight: 800;
  font-size: 20px;
  margin-bottom: 10px;
}
.price-tier {
  display: block;
  color: var(--tier-color, var(--accent-color));
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 1px;
  margin-bottom: 4px;
}
.price-head h3 { margin: 0; font-size: 26px; color: var(--heading-color); }
.price-head p { margin: 2px 0 0; font-size: 13px; color: color-mix(in srgb, var(--default-color), transparent 35%); }

.price-gift-tag {
  text-align: center;
  background: color-mix(in srgb, var(--tier-color, var(--accent-color)), transparent 82%);
  color: var(--tier-color, var(--accent-color));
  font-weight: 700;
  font-size: 13px;
  padding: 8px;
  border-radius: 8px;
  margin-bottom: 20px;
}
.price-features {
  list-style: none;
  padding: 0;
  margin: 0 0 20px;
  flex: 1;
}
.price-features li {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: 13.5px;
  color: color-mix(in srgb, var(--default-color), transparent 15%);
  padding: 6px 0;
  border-bottom: 1px solid color-mix(in srgb, var(--default-color), transparent 93%);
}
.price-features li i { color: var(--tier-color, var(--accent-color)); margin-top: 2px; flex-shrink: 0; }

.price-gift-line {
  font-size: 12.5px;
  color: color-mix(in srgb, var(--default-color), transparent 25%);
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 6px;
}
.price-gift-line i { color: var(--tier-color, var(--accent-color)); }
.price-amount {
  font-size: 34px;
  font-weight: 800;
  color: var(--tier-color, var(--accent-color));
  margin-bottom: 18px;
}
.price-amount span { font-size: 16px; font-weight: 600; }
.price-cta {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: var(--tier-color, var(--accent-color));
  color: #06241a;
  font-weight: 700;
  padding: 13px;
  border-radius: 8px;
  text-decoration: none;
  transition: filter .2s ease;
}
.price-cta:hover { filter: brightness(1.1); color: #06241a; }

.pricing-info-block {
  text-align: center;
  padding: 30px 22px;
  height: 100%;
  background: var(--surface-color);
  border: 1px solid color-mix(in srgb, var(--default-color), transparent 92%);
  border-radius: 16px;
  transition: transform .25s ease, border-color .25s ease;
}
.pricing-info-block:hover { transform: translateY(-4px); border-color: color-mix(in srgb, var(--accent-color), transparent 60%); }
.pib-icon {
  width: 54px; height: 54px; border-radius: 50%;
  background: color-mix(in srgb, var(--accent-color), transparent 85%);
  color: var(--accent-color);
  display: flex; align-items: center; justify-content: center;
  font-size: 22px; margin: 0 auto 16px;
}
.pricing-info-block h4 { color: var(--heading-color); margin-bottom: 8px; }
.pricing-info-block p { font-size: 14px; margin: 0; color: color-mix(in srgb, var(--default-color), transparent 20%); }

.price-trust-strip {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 14px;
  margin-top: 40px;
  padding-top: 30px;
  border-top: 1px solid color-mix(in srgb, var(--default-color), transparent 90%);
}
.price-trust-strip div {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: color-mix(in srgb, var(--default-color), transparent 15%);
}
.price-trust-strip i { color: var(--accent-color); font-size: 17px; }

/* Süreç zaman çizelgesi rozetleri */
.process-step-number {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--accent-color);
  color: var(--contrast-color);
  font-weight: 700;
  font-size: 13px;
  margin-right: 8px;
}

/* Basit "önceki/sonraki" pil rozet - CRO amaçlı güven rozetleri */
.trust-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 18px;
}
.trust-badges span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: color-mix(in srgb, var(--accent-color), transparent 90%);
  color: var(--accent-color);
  padding: 7px 14px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 500;
  white-space: nowrap;
}

/* Masaüstünde 5 rozet de tek satırda yan yana dursun (gerçek masaüstü/sidebar kırılımı 1200px'de başlıyor) */
@media (min-width: 1200px) {
  .trust-badges {
    flex-wrap: nowrap;
    gap: 8px;
  }
  .trust-badges span {
    padding: 6px 10px;
    font-size: 12px;
  }
}

/* CTA şerit */
.cta-strip {
  background: linear-gradient(120deg, var(--surface-color), var(--background-color));
  border-radius: 18px;
  padding: 48px 40px;
  text-align: center;
  border: 1px solid color-mix(in srgb, var(--accent-color), transparent 80%);
  position: relative;
  overflow: hidden;
}
.cta-strip::before {
  content: "";
  position: absolute;
  right: -80px;
  bottom: -100px;
  width: 260px;
  height: 260px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--accent-color), transparent 88%);
  filter: blur(50px);
  pointer-events: none;
}
.cta-strip-icon {
  position: relative;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--accent-color), transparent 85%);
  color: var(--accent-color);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  margin: 0 auto 18px;
}
.cta-strip h3 { position: relative; color: var(--heading-color); margin-bottom: 10px; }
.cta-strip p {
  position: relative;
  color: color-mix(in srgb, var(--default-color), transparent 20%);
  margin: 0 auto 28px;
  max-width: 620px;
}
.cta-strip-actions {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: stretch;
  gap: 16px;
}
.cta-strip-actions .btn-primary,
.cta-strip-actions .btn-secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-width: 210px;
}
.cta-strip-meta {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px 24px;
  margin-top: 28px;
  padding-top: 24px;
  border-top: 1px solid color-mix(in srgb, var(--default-color), transparent 90%);
}
.cta-strip-meta span {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 12.5px;
  color: color-mix(in srgb, var(--default-color), transparent 30%);
}
.cta-strip-meta i { color: var(--accent-color); }
@media (max-width: 576px) {
  .cta-strip { padding: 36px 22px; }
  .cta-strip-actions { flex-direction: column; align-items: stretch; }
  .cta-strip-actions .btn-primary, .cta-strip-actions .btn-secondary { min-width: 0; }
}

@media (max-width: 768px) {
  .code-window { margin-top: 24px; }
}

/* ===========================
   Projelerimiz Sayfası
   =========================== */
/* Tema demosundaki masonry görünümü için 1./2./4. kart görselleri farklı yükseklikteydi
   (350px/280px) - bizim gerçek proje ekran görüntülerimiz sabit orana sahip olduğu için
   bu fark kartların sıra hizasını bozup birini yukarı birini aşağı kaydırıyordu. Tüm
   proje görsellerini aynı yüksekliğe sabitleyip fitRows düzeniyle hizalı sıralar sağlıyoruz. */
.portfolio .isotope-container .portfolio-item:nth-child(1) .portfolio-image img,
.portfolio .isotope-container .portfolio-item:nth-child(2) .portfolio-image img,
.portfolio .isotope-container .portfolio-item:nth-child(4) .portfolio-image img {
  height: 300px;
}
@media (max-width: 768px) {
  .portfolio .isotope-container .portfolio-item:nth-child(1) .portfolio-image img,
  .portfolio .isotope-container .portfolio-item:nth-child(2) .portfolio-image img,
  .portfolio .isotope-container .portfolio-item:nth-child(4) .portfolio-image img {
    height: 250px;
  }
}

/* ===========================
   Ana Sayfa Ek Bölümler (Neden Biz / Harita / Garanti)
   =========================== */
.why-table-wrap {
  overflow-x: auto;
  border-radius: 18px;
  border: 1px solid color-mix(in srgb, var(--default-color), transparent 90%);
}
.why-table {
  width: 100%;
  min-width: 640px;
  border-collapse: collapse;
  background: var(--surface-color);
}
.why-table th, .why-table td {
  padding: 16px 20px;
  text-align: left;
  border-bottom: 1px solid color-mix(in srgb, var(--default-color), transparent 92%);
  font-size: 14.5px;
}
.why-table thead th {
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: .4px;
  color: color-mix(in srgb, var(--default-color), transparent 35%);
  border-bottom-width: 2px;
}
.why-table .why-th-us {
  color: var(--accent-color);
  background: color-mix(in srgb, var(--accent-color), transparent 92%);
}
.why-table td.why-yes {
  color: var(--accent-color);
  font-weight: 600;
  background: color-mix(in srgb, var(--accent-color), transparent 95%);
}
.why-table td.why-warn { color: #ffb86c; }
.why-table td.why-no { color: color-mix(in srgb, var(--default-color), transparent 45%); }
.why-table tbody tr:last-child td { border-bottom: none; }
.why-table td i, .why-table th i { margin-right: 6px; }
@media (max-width: 576px) {
  .why-table th, .why-table td { padding: 13px 14px; font-size: 13px; }
}

.coverage-layout {
  display: grid;
  grid-template-columns: 1.1fr .9fr;
  gap: 28px;
  align-items: stretch;
}
.coverage-map-frame {
  border-radius: 18px;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--default-color), transparent 88%);
  min-height: 360px;
}
.coverage-map-frame iframe {
  width: 100%;
  height: 100%;
  min-height: 360px;
  border: 0;
  filter: grayscale(.25) contrast(1.05);
}
.coverage-chips {
  display: flex;
  flex-wrap: wrap;
  align-content: flex-start;
  gap: 10px;
  background: var(--surface-color);
  border: 1px solid color-mix(in srgb, var(--default-color), transparent 90%);
  border-radius: 18px;
  padding: 22px;
}
.coverage-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  border-radius: 20px;
  background: color-mix(in srgb, var(--accent-color), transparent 90%);
  color: var(--default-color);
  text-decoration: none;
  font-size: 13px;
  font-weight: 500;
  transition: all .2s ease;
}
.coverage-chip i { color: var(--accent-color); font-size: 12px; }
.coverage-chip:hover {
  background: var(--accent-color);
  color: var(--contrast-color);
  transform: translateY(-2px);
}
.coverage-chip:hover i { color: var(--contrast-color); }
@media (max-width: 991px) {
  .coverage-layout { grid-template-columns: 1fr; }
  .coverage-map-frame { min-height: 280px; }
  .coverage-map-frame iframe { min-height: 280px; }
}

.guarantee-card {
  display: flex;
  align-items: center;
  gap: 32px;
  background: linear-gradient(120deg, var(--surface-color), var(--background-color));
  border: 1px solid color-mix(in srgb, var(--accent-color), transparent 78%);
  border-radius: 20px;
  padding: 42px 44px;
}
.guarantee-icon {
  flex-shrink: 0;
  width: 84px;
  height: 84px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--accent-color), transparent 85%);
  color: var(--accent-color);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 34px;
}
.guarantee-content h2 { margin-bottom: 12px; color: var(--heading-color); }
.guarantee-content p {
  margin: 0 0 20px;
  color: color-mix(in srgb, var(--default-color), transparent 20%);
  max-width: 760px;
}
.guarantee-points { display: flex; flex-wrap: wrap; gap: 16px 26px; }
.guarantee-points span { display: flex; align-items: center; gap: 8px; font-size: 13.5px; font-weight: 500; }
.guarantee-points i { color: var(--accent-color); }
@media (max-width: 768px) {
  .guarantee-card { flex-direction: column; text-align: center; padding: 34px 26px; }
  .guarantee-points { justify-content: center; }
}

/* ===========================
   İlçe Sayfası Ek Bölümler
   =========================== */
.ilce-firsat-card {
  display: flex;
  align-items: flex-start;
  gap: 22px;
  background: var(--surface-color);
  border: 1px solid color-mix(in srgb, var(--accent-color), transparent 78%);
  border-radius: 18px;
  padding: 30px 32px;
}
.ilce-firsat-icon {
  flex-shrink: 0;
  width: 56px;
  height: 56px;
  border-radius: 14px;
  background: color-mix(in srgb, var(--accent-color), transparent 85%);
  color: var(--accent-color);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
}
.ilce-firsat-content h3 { margin: 0 0 10px; color: var(--heading-color); font-size: 20px; }
.ilce-firsat-content p { margin: 0; color: color-mix(in srgb, var(--default-color), transparent 15%); }
@media (max-width: 576px) {
  .ilce-firsat-card { flex-direction: column; padding: 24px; }
}

/* ===========================
   Hizmetler Sayfası
   =========================== */
.service-feature-list {
  list-style: none;
  margin: 18px 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.service-feature-list li {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  font-size: 13.5px;
  color: color-mix(in srgb, var(--default-color), transparent 15%);
}
.service-feature-list li i {
  color: var(--accent-color);
  margin-top: 2px;
  flex-shrink: 0;
}

/* Hizmet kartları (Neler Sunuyoruz?) - varsayılan görünmez sınır yerine her zaman görünen kart */
.service-details-page .services .service-item {
  background: var(--surface-color);
  border-color: color-mix(in srgb, var(--default-color), transparent 90%);
}
.service-details-page .services .service-item:hover {
  border-color: color-mix(in srgb, var(--accent-color), transparent 55%);
}

/* Paket kartları (Paketlerimiz) */
.package-grid { align-items: stretch; }
.package-card {
  position: relative;
  height: 100%;
  background: var(--surface-color);
  border: 2px solid color-mix(in srgb, var(--default-color), transparent 90%);
  border-radius: 18px;
  padding: 36px 32px;
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.package-card:hover { transform: translateY(-6px); box-shadow: 0 20px 45px -18px rgba(0,0,0,.5); }
.package-card.package-featured { border-color: color-mix(in srgb, var(--accent-color), transparent 45%); }
.package-badge-top {
  position: absolute;
  top: -15px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--accent-color);
  color: #06241a;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .2px;
  padding: 7px 18px;
  border-radius: 20px;
  white-space: nowrap;
  display: flex;
  align-items: center;
  gap: 6px;
  box-shadow: 0 6px 16px -4px color-mix(in srgb, var(--accent-color), transparent 40%);
  z-index: 2;
}
.package-icon {
  width: 62px;
  height: 62px;
  border-radius: 16px;
  background: color-mix(in srgb, var(--accent-color), transparent 85%);
  color: var(--accent-color);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 25px;
  margin-bottom: 20px;
}
.package-card h3 { color: var(--heading-color); margin: 0 0 4px; font-size: 22px; }
.package-audience {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .4px;
  text-transform: uppercase;
  color: var(--accent-color);
  margin: 0 0 16px;
}
.package-desc {
  font-size: 14.5px;
  line-height: 1.7;
  color: color-mix(in srgb, var(--default-color), transparent 20%);
  margin: 0;
}
@media (max-width: 768px) {
  .package-card { padding: 30px 24px; }
}

/* Mobil üst çubuk - header off-canvas'ken üstte boşluk kalmasın */
.mobile-topbar { display: none; }
@media (max-width: 1199px) {
  .mobile-topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 60px;
    background: var(--background-color);
    border-bottom: 1px solid color-mix(in srgb, var(--default-color), transparent 90%);
    padding: 0 68px 0 18px;
    z-index: 990;
  }
  .mobile-topbar-brand {
    color: var(--heading-color);
    font-weight: 600;
    font-size: 16px;
    display: flex;
    align-items: center;
    gap: 8px;
    text-decoration: none;
  }
  .mobile-topbar-brand i { color: var(--accent-color); font-size: 20px; }
  .mobile-topbar-brand img { height: 30px; width: auto; }
  body { padding-top: 60px; }
  .header { top: 0; }

  /* Masaüstü için tasarlanmış büyük hero boşluğunu mobilde daralt */
  .hero {
    padding: 18px 0 50px;
    min-height: auto;
  }
  .hero .container {
    padding: 10px 15px;
  }
}

/* Gerçek portföy görselleri - tıklanabilir site önizlemesi */
.portfolio-image {
  position: relative;
  display: block;
  overflow: hidden;
}
.portfolio-image .portfolio-visit {
  position: absolute;
  inset: 0;
  background: rgba(15, 23, 42, .78);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-weight: 600;
  font-size: 14px;
  opacity: 0;
  transition: opacity .25s ease;
}
.portfolio-image:hover .portfolio-visit { opacity: 1; }
.portfolio-image:hover img { transform: scale(1.05); }
.portfolio-image img { transition: transform .5s ease; }

.portfolio-meta { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.portfolio-domain {
  font-size: 12px;
  font-family: 'Consolas', 'Courier New', monospace;
  color: color-mix(in srgb, var(--default-color), transparent 40%);
}
.portfolio-title a { color: inherit; text-decoration: none; }
.portfolio-title a:hover { color: var(--accent-color); }

/* ===========================
   Browser Mockup (portfolio görselleri yerine)
   =========================== */
.browser-mockup {
  width: 100%;
  height: 100%;
  min-height: 300px;
  background: #0f172a;
  display: flex;
  flex-direction: column;
}
.browser-mockup .mb-bar {
  background: #1e293b;
  padding: 10px 14px;
  display: flex;
  align-items: center;
  gap: 6px;
}
.browser-mockup .mb-bar span {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  display: inline-block;
}
.browser-mockup .mb-bar span:nth-child(1) { background: #ef4444; }
.browser-mockup .mb-bar span:nth-child(2) { background: #eab308; }
.browser-mockup .mb-bar span:nth-child(3) { background: #22c55e; }
.browser-mockup .mb-bar .mb-url {
  margin-left: 10px;
  background: #0f172a;
  color: #64748b;
  font-size: 11px;
  padding: 3px 10px;
  border-radius: 6px;
  font-family: 'Courier New', monospace;
}
.browser-mockup .mb-body {
  flex: 1;
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  justify-content: center;
}
.browser-mockup .mb-line {
  height: 10px;
  border-radius: 4px;
  background: color-mix(in srgb, #e2e8f0, transparent 82%);
}
.browser-mockup .mb-line.w-80 { width: 80%; }
.browser-mockup .mb-line.w-60 { width: 60%; }
.browser-mockup .mb-line.w-40 { width: 40%; }
.browser-mockup .mb-hero {
  height: 60px;
  border-radius: 8px;
  background: linear-gradient(120deg, color-mix(in srgb, var(--accent-color), transparent 55%), color-mix(in srgb, var(--accent-color), transparent 85%));
  margin-bottom: 4px;
}
.browser-mockup .mb-btn {
  width: 120px;
  height: 30px;
  border-radius: 6px;
  background: var(--accent-color);
}

/* E-ticaret: ürün grid */
.browser-mockup .mb-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}
.browser-mockup .mb-grid .mb-card {
  background: color-mix(in srgb, #e2e8f0, transparent 92%);
  border-radius: 6px;
  padding: 10px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.browser-mockup .mb-grid .mb-card i {
  color: var(--accent-color);
  font-size: 20px;
}
.browser-mockup .mb-grid .mb-card .mb-line { height: 6px; }

/* Randevu: takvim grid */
.browser-mockup .mb-cal {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 6px;
}
.browser-mockup .mb-cal span {
  aspect-ratio: 1;
  border-radius: 4px;
  background: color-mix(in srgb, #e2e8f0, transparent 90%);
}
.browser-mockup .mb-cal span.mb-active {
  background: var(--accent-color);
}

/* Tanıtım: ortalanmış tek sayfa */
.browser-mockup .mb-center {
  align-items: center;
  text-align: center;
}
.browser-mockup .mb-center .mb-line { margin: 0 auto; }

/* ===========================
   Teknoloji logoları - sonsuz kayan şerit
   =========================== */
.tech-marquee {
  position: relative;
  width: 100%;
  overflow: hidden;
  padding: 28px 0;
  margin-bottom: 40px;
  background: color-mix(in srgb, var(--surface-color), transparent 25%);
  border-top: 1px solid color-mix(in srgb, var(--accent-color), transparent 88%);
  border-bottom: 1px solid color-mix(in srgb, var(--accent-color), transparent 88%);
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 8%, #000 92%, transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0, #000 8%, #000 92%, transparent 100%);
}
.tech-marquee-track {
  display: flex;
  align-items: center;
  width: max-content;
  gap: 72px;
  animation: tech-marquee-scroll 32s linear infinite;
  will-change: transform;
}
.tech-marquee:hover .tech-marquee-track,
.tech-marquee.is-modal-open .tech-marquee-track {
  animation-play-state: paused;
}
.tech-marquee-item {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 46px;
  /* Logoların çoğu (Next.js, Laravel, Python, Java, Schema.org) koyu/siyah
     yazı içeriyor - açık renk bir "kart" olmadan koyu temada okunmuyorlardı. */
  background: rgba(255, 255, 255, .95);
  border: none;
  padding: 10px 18px;
  border-radius: 10px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, .2);
}
button.tech-marquee-item {
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
button.tech-marquee-item:hover,
button.tech-marquee-item:focus-visible {
  background: #ffffff;
  box-shadow: 0 6px 18px rgba(0, 0, 0, .3);
  outline: none;
}
.tech-marquee-item img {
  height: 100%;
  width: auto;
  max-width: 160px;
  object-fit: contain;
  opacity: 1;
  transition: transform .35s ease, opacity .35s ease, filter .35s ease;
}
.tech-marquee-item:hover img {
  transform: translateY(-3px) scale(1.08);
  opacity: 1;
  filter: drop-shadow(0 6px 16px rgba(0, 0, 0, .35));
}

/* Masaüstünde logo slider'ı hero fotoğrafının hemen altına yaklaştır (mobilde section aralığı olduğu gibi kalır) */
@media (min-width: 1200px) {
  .hero.section { padding-top: 40px; padding-bottom: 24px; min-height: auto; }
  .hero .container { padding-top: 20px; padding-bottom: 20px; }
  #about.section { padding-top: 0; }
}

/* Teknoloji logosu detay modalı */
body.tech-modal-locked {
  overflow: hidden;
}
.tech-modal {
  position: fixed;
  inset: 0;
  z-index: 12000;
  display: flex;
  align-items: center;
  justify-content: center;
  visibility: hidden;
  opacity: 0;
  transition: opacity .25s ease, visibility 0s linear .25s;
}
.tech-modal.is-open {
  visibility: visible;
  opacity: 1;
  transition: opacity .25s ease;
}
.tech-modal-backdrop {
  position: absolute;
  inset: 0;
  background: color-mix(in srgb, #05070a, transparent 15%);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}
.tech-modal-dialog {
  position: relative;
  width: min(420px, 88vw);
  background: var(--surface-color);
  border: 1px solid color-mix(in srgb, var(--accent-color), transparent 80%);
  border-radius: 20px;
  padding: 48px 32px 36px;
  text-align: center;
  box-shadow: 0 30px 70px rgba(0, 0, 0, .45);
  transform: scale(.92) translateY(10px);
  transition: transform .3s cubic-bezier(.34, 1.56, .64, 1);
}
.tech-modal.is-open .tech-modal-dialog {
  transform: scale(1) translateY(0);
}
.tech-modal-close {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: none;
  background: color-mix(in srgb, var(--accent-color), transparent 85%);
  color: var(--accent-color);
  font-size: 15px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background .25s ease, transform .25s ease;
}
.tech-modal-close:hover {
  background: var(--accent-color);
  color: var(--background-color);
  transform: rotate(90deg);
}
.tech-modal-image {
  height: 90px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 22px;
}
.tech-modal-image img {
  max-height: 100%;
  max-width: 240px;
  width: auto;
  height: auto;
  object-fit: contain;
  filter: drop-shadow(0 8px 20px rgba(0, 0, 0, .35));
}
.tech-modal-dialog h3 {
  margin: 0 0 14px;
  font-size: 22px;
  font-weight: 700;
  color: color-mix(in srgb, var(--default-color), white 92%);
}
.tech-modal-dialog p {
  margin: 0;
  font-size: 15px;
  line-height: 1.7;
  color: color-mix(in srgb, var(--default-color), white 55%);
}
@media (max-width: 480px) {
  .tech-modal-dialog { padding: 40px 22px 28px; }
  .tech-modal-image { height: 70px; }
}
@keyframes tech-marquee-scroll {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}
@media (max-width: 768px) {
  .tech-marquee { padding: 24px 0; margin-bottom: 28px; }
  .tech-marquee-track { gap: 48px; animation-duration: 22s; }
  .tech-marquee-item { height: 44px; }
  .tech-marquee-item img { max-width: 140px; }
}
@media (prefers-reduced-motion: reduce) {
  .tech-marquee-track { animation: none; }
  .tech-marquee { overflow-x: auto; }
}