/* ============================================================
   Akademik LMS — Ana Stil Dosyası
   Renkler, animasyonlar ve bileşen stilleri burada tanımlanır.
   Tasarım değişikliklerinde sadece bu dosyayı düzenlemeniz yeterlidir.

   RENK PALETİ:
   --navy-dark   : #1e3a52   (ana koyu arka plan)
   --navy-mid    : #2d5476   (orta ton)
   --blue        : #699ec3   (vurgu mavi)
   --gold        : #ce9f51   (altın/amber vurgu)
   --red-dark    : #750d02   (bordo vurgu)
   ============================================================ */

    @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap');
    * { font-family: 'Inter', system-ui, sans-serif; }

    .hero-gradient {
      background: linear-gradient(100deg, #1e3a52 0%, #2d5476 30%, #3d6e9e 60%, #699ec3 100%);
    }

    .hero-orb {
      background: radial-gradient(circle, rgba(105,158,195,0.15) 0%, rgba(30,58,82,0.6) 70%);
      border: 2px solid rgba(105,158,195,0.3);
    }

    .hero-orb-inner {
      background: radial-gradient(circle, rgba(206,159,81,0.12) 0%, rgba(105,158,195,0.25) 60%, transparent 100%);
      border: 1.5px solid rgba(206,159,81,0.25);
    }

    /* ===== HERO GRADUATION CAP ANIMATIONS - IMPRESSIVE ===== */
    
    /* Outer ring - visible rotation with gradient border */
    .circle-ring {
      border: 2px solid transparent;
      background: 
        linear-gradient(#1e3a52, #1e3a52) padding-box,
        linear-gradient(135deg, rgba(105,158,195,0.6), rgba(206,159,81,0.5), rgba(105,158,195,0.6)) border-box;
      animation: spin-visible 25s linear infinite, ring-pulse 4s ease-in-out infinite;
    }

    @keyframes spin-visible {
      from { transform: rotate(0deg); }
      to { transform: rotate(360deg); }
    }

    @keyframes ring-pulse {
      0%, 100% {
        box-shadow: 0 0 15px rgba(105,158,195,0.3), inset 0 0 15px rgba(105,158,195,0.1);
      }
      50% {
        box-shadow: 0 0 35px rgba(206,159,81,0.5), inset 0 0 25px rgba(206,159,81,0.2);
      }
    }

    /* Middle ring - dramatic pulse with gradient glow */
    .hero-orb {
      animation: pulse-ring-dramatic 5s ease-in-out infinite;
      background: radial-gradient(circle, rgba(105,158,195,0.18) 0%, rgba(30,58,82,0.6) 70%);
      border: 2.5px solid rgba(105,158,195,0.4);
      box-shadow: 
        0 0 25px rgba(105,158,195,0.3),
        inset 0 0 35px rgba(105,158,195,0.15);
    }

    @keyframes pulse-ring-dramatic {
      0%, 100% {
        transform: scale(1);
        opacity: 1;
        border-color: rgba(105,158,195,0.4);
        box-shadow: 
          0 0 25px rgba(105,158,195,0.3),
          inset 0 0 35px rgba(105,158,195,0.15);
      }
      50% {
        transform: scale(1.03);
        opacity: 0.95;
        border-color: rgba(206,159,81,0.6);
        box-shadow: 
          0 0 45px rgba(206,159,81,0.5),
          inset 0 0 50px rgba(206,159,81,0.25);
      }
    }

    /* Inner circle - static without animations */
    .hero-orb-inner {
      background: radial-gradient(circle, rgba(206,159,81,0.15) 0%, rgba(105,158,195,0.28) 60%, transparent 100%);
      border: 2px solid rgba(206,159,81,0.35);
      box-shadow: 
        0 0 30px rgba(206,159,81,0.4),
        inset 0 0 40px rgba(206,159,81,0.2),
        0 8px 32px rgba(0,0,0,0.3);
    }

    /* Graduation icon - completely static */
    .graduation-icon {
      /* No animations - completely static */
    }

    /* Graduation cap core - static without animations or hover */
    .grad-cap-core {
      position: relative;
      box-shadow: 
        0 0 40px rgba(206,159,81,0.5),
        inset 0 0 30px rgba(255,255,255,0.15),
        0 10px 40px rgba(0,0,0,0.35);
      background: rgba(255,255,255,0.1);
    }

    .grad-cap-icon {
      filter: drop-shadow(0 0 25px rgba(206,159,81,0.8));
    }

    /* Circuit dots - enhanced animation */
    .circuit-dot {
      animation: dot-orbit 8s ease-in-out infinite;
      box-shadow: 0 0 15px currentColor;
    }

    .circuit-dot:nth-child(1) {
      animation-delay: 0s;
    }

    .circuit-dot:nth-child(2) {
      animation-delay: 2s;
    }

    .circuit-dot:nth-child(3) {
      animation-delay: 4s;
    }

    .circuit-dot:nth-child(4) {
      animation-delay: 6s;
    }

    @keyframes dot-orbit {
      0%, 100% {
        transform: translateY(0px) scale(1);
        opacity: 0.5;
        box-shadow: 0 0 15px currentColor;
      }
      50% {
        transform: translateY(-8px) scale(1.4);
        opacity: 1;
        box-shadow: 0 0 30px currentColor, 0 0 50px currentColor;
      }
    }

    .wave-divider {
      background: linear-gradient(to bottom, #2d5a7a 0%, #699ec3 50%);
      clip-path: ellipse(55% 100% at 50% 0%);
    }

    .nav-link:hover { color: #ce9f51; }

    .card-hover:hover {
      transform: translateY(-4px);
      box-shadow: 0 12px 32px rgba(105,158,195,0.2);
    }

    .btn-outline-white {
      border: 1.5px solid rgba(255,255,255,0.7);
      color: #fff;
      background: transparent;
      transition: all 0.2s;
    }
    .btn-outline-white:hover {
      background: rgba(255,255,255,0.12);
      border-color: #ce9f51;
      color: #ce9f51;
    }

    .section-ghost-title {
      font-size: clamp(40px, 8vw, 80px);
      font-weight: 800;
      color: transparent;
      -webkit-text-stroke: 1.5px rgba(105,158,195,0.18);
      letter-spacing: 0.1em;
      pointer-events: none;
      user-select: none;
    }

    .category-icon-bg {
      background: linear-gradient(135deg, #699ec3 0%, #4a7fa8 100%);
    }

    .feature-card:hover .feature-icon {
      background: #750d02;
      color: #fff;
    }

    /* ===== ACCORDION — MİNİMAL STİL ===== */
    .accordion-item {
      overflow: visible;
      border-radius: 10px;
      background: transparent;
      border: none;
      box-shadow: none;
      transition: background 0.35s ease, width 0.4s cubic-bezier(0.34,1.56,0.64,1);
      margin-bottom: 4px;
      width: 100%;
    }

    .accordion-item:hover {
      background: rgba(255,255,255,0.05);
    }

    .accordion-item:has(.accordion-button.active) {
      background: rgba(10,25,45,0.28);
      width: calc(100% + 350px);
    }

    .accordion-button {
      cursor: pointer;
      width: 100%;
      text-align: left;
      transition: all 0.28s ease;
      padding: 7px 16px;
      display: flex;
      align-items: center;
      gap: 10px;
    }

    .accordion-chevron {
      margin-left: auto;
    }

    /* ===== PULSE DOT TIMELINE ===== */
    @keyframes pulseRing {
      0%   { transform: scale(0.6); opacity: 0.9; }
      100% { transform: scale(1.5); opacity: 0; }
    }

    #heroAccordion {
      position: relative;
    }

    #heroAccordion::before {
      content: '';
      position: absolute;
      left: 31px;
      top: 18px;
      bottom: 18px;
      width: 1px;
      background: repeating-linear-gradient(
        to bottom,
        rgba(105,158,195,0.35) 0,
        rgba(105,158,195,0.35) 5px,
        transparent 5px,
        transparent 11px
      );
      pointer-events: none;
      z-index: 0;
    }

    .accordion-btn-icon {
      width: 32px;
      height: 32px;
      display: flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
      position: relative;
      z-index: 1;
    }

    .pulse-dot {
      width: 10px;
      height: 10px;
      border-radius: 50%;
      background: rgba(105,158,195,0.75);
      box-shadow: 0 0 6px rgba(105,158,195,0.5);
      position: relative;
      transition: background 0.35s ease, box-shadow 0.35s ease;
    }

    .pulse-dot::before,
    .pulse-dot::after {
      content: '';
      position: absolute;
      border-radius: 50%;
      border: 1.5px solid rgba(105,158,195,0.5);
      animation: pulseRing 2.6s ease-out infinite;
      top: 50%; left: 50%;
      transform-origin: center;
    }

    .pulse-dot::before {
      width: 20px; height: 20px;
      margin-top: -10px; margin-left: -10px;
      animation-delay: 0s;
    }

    .pulse-dot::after {
      width: 30px; height: 30px;
      margin-top: -15px; margin-left: -15px;
      animation-delay: 0.8s;
    }

    .accordion-button:hover .pulse-dot {
      background: rgba(206,159,81,0.8);
      box-shadow: 0 0 10px rgba(206,159,81,0.5);
    }

    .accordion-button:hover .pulse-dot::before,
    .accordion-button:hover .pulse-dot::after {
      border-color: rgba(206,159,81,0.45);
    }

    /* Aktif: büyük halkalar */
    .accordion-button.active .pulse-dot {
      width: 16px;
      height: 16px;
      background: rgba(206,159,81,0.95);
      box-shadow: 0 0 22px rgba(206,159,81,0.9), 0 0 8px rgba(206,159,81,1);
    }

    .accordion-button.active .pulse-dot::before {
      width: 38px; height: 38px;
      margin-top: -19px; margin-left: -19px;
      border-color: rgba(206,159,81,0.6);
      animation-duration: 1.6s;
    }

    .accordion-button.active .pulse-dot::after {
      width: 58px; height: 58px;
      margin-top: -29px; margin-left: -29px;
      border-color: rgba(206,159,81,0.3);
      animation-duration: 1.6s;
      animation-delay: 0.6s;
    }

    .accordion-chevron {
      transition: transform 0.3s ease, color 0.3s ease;
      color: rgba(255,255,255,0.3);
      flex-shrink: 0;
    }

    .accordion-button:hover .accordion-chevron {
      color: #ce9f51;
    }

    .accordion-button.active .accordion-chevron {
      transform: rotate(90deg);
      color: #ce9f51;
    }

    .accordion-button.active {
      background: rgba(206,159,81,0.06);
    }

    .accordion-content {
      max-height: 0;
      overflow: hidden;
      transition: max-height 0.4s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.3s ease;
      opacity: 0;
    }

    .accordion-content.active {
      max-height: 1400px;
      opacity: 1;
    }

    .accordion-content-inner {
      border-top: 1px solid rgba(206,159,81,0.2);
      padding: 14px 18px 24px 58px; /* 58px = 16px buton-padding + 32px ikon + 10px gap */
      background: rgba(0,0,0,0.1);
    }

    /* ===== LMS INTRO BLOCK ===== */
    .lms-intro-block { padding: 0; }
    .lms-intro-label {
      color: #ce9f51;
      font-size: 12px;
      font-weight: 600;
      margin-bottom: 8px;
    }
    .lms-intro-desc {
      color: rgba(255,255,255,0.78);
      font-size: 12px;
      line-height: 1.6;
      margin-bottom: 14px;
    }
    .lms-intro-actions { display: flex; gap: 10px; flex-wrap: wrap; }
    .lms-cta-btn {
      display: inline-block;
      background: #750d02;
      color: #fff;
      font-size: 11px;
      font-weight: 700;
      letter-spacing: 0.06em;
      padding: 6px 16px;
      border-radius: 6px;
      text-decoration: none;
      transition: background 0.2s;
    }
    .lms-cta-btn:hover { background: #9b1103; }

    /* ===== FEATURED (Hakkımda) ACCORDION ITEM ===== */
    .accordion-item--featured {
      border-left: 2px solid rgba(206,159,81,0.55);
      border-radius: 0 10px 10px 0;
      background: rgba(206,159,81,0.04);
      margin-bottom: 10px;
    }
    .accordion-item--featured:hover {
      background: rgba(206,159,81,0.09);
    }
    .accordion-item--featured:has(.accordion-button.active) {
      background: rgba(10,25,45,0.32);
      border-left-color: #ce9f51;
      width: calc(100% + 350px);
    }
    .accordion-item--featured .accordion-button {
      padding: 10px 16px;
    }
    .featured-title {
      display: flex;
      flex-direction: column;
      gap: 1px;
    }
    .featured-title-main {
      font-size: 14px;
      font-weight: 700;
      color: #fff;
      letter-spacing: 0.3px;
    }
    .featured-badge {
      display: inline-block;
      font-size: 9px;
      font-weight: 700;
      letter-spacing: 1.8px;
      text-transform: uppercase;
      color: #ce9f51;
      opacity: 0.85;
    }
    /* Profile card inside featured */
    .profile-card {
      display: flex;
      align-items: flex-start;
      gap: 12px;
    }
    .profile-avatar {
      width: 44px;
      height: 44px;
      border-radius: 50%;
      background: linear-gradient(135deg, #699ec3 0%, #1e3a52 100%);
      border: 2px solid rgba(206,159,81,0.5);
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 14px;
      font-weight: 800;
      color: #fff;
      flex-shrink: 0;
      letter-spacing: 1px;
    }
    .profile-info { flex: 1; }
    .profile-name {
      font-size: 14px;
      font-weight: 700;
      color: #ce9f51;
      line-height: 1.3;
      margin-bottom: 2px;
    }
    .profile-role {
      font-size: 11px;
      color: rgba(255,255,255,0.6);
      margin-bottom: 6px;
    }
    .profile-bio {
      font-size: 12px;
      color: rgba(255,255,255,0.78);
      line-height: 1.65;
    }
    .profile-bio p { margin-bottom: 6px; }
    .profile-bio p:last-child { margin-bottom: 0; }
    .profile-tags {
      display: flex;
      flex-wrap: wrap;
      gap: 4px;
      margin-top: 8px;
    }
    .profile-tag {
      font-size: 10px;
      padding: 2px 8px;
      border-radius: 20px;
      background: rgba(105,158,195,0.15);
      border: 1px solid rgba(105,158,195,0.25);
      color: rgba(255,255,255,0.7);
    }

    /* ===== STICKY NAV ===== */
    #mainNav {
      position: sticky;
      top: 0;
      z-index: 50;
      transition:
        height 0.35s cubic-bezier(0.4, 0, 0.2, 1),
        background 0.35s cubic-bezier(0.4, 0, 0.2, 1),
        box-shadow 0.35s cubic-bezier(0.4, 0, 0.2, 1),
        backdrop-filter 0.35s cubic-bezier(0.4, 0, 0.2, 1);
      will-change: height, box-shadow;
    }

    #mainNav.nav-scrolled {
      height: 60px !important;
      background: rgba(30, 58, 82, 0.92) !important;
      backdrop-filter: blur(14px);
      -webkit-backdrop-filter: blur(14px);
      box-shadow: 0 4px 28px rgba(0, 0, 0, 0.28), 0 1px 0 rgba(105,158,195,0.15);
    }

    #mainNav .nav-logo-sub {
      transition: opacity 0.25s ease, max-height 0.25s ease;
      max-height: 20px;
      overflow: hidden;
    }

    #mainNav.nav-scrolled .nav-logo-sub {
      opacity: 0;
      max-height: 0;
    }

    /* ===================================================================
       QR LOGO — DİJİTAL TEKNOLOJİ ANİMASYONLARI (DESKTOP)
       Scan line · Corner brackets · Digital pulse · Glitch · Materialize
    =================================================================== */

    /* ── Outer wrapper: QR finder-corner bracket context ── */
    .logo-qr-wrap {
      position: relative;
      display: inline-flex;
      flex-shrink: 0;
    }

    /* ── 4 QR corner brackets ── */
    .qr-c {
      position: absolute;
      width: 11px;
      height: 11px;
      pointer-events: none;
      z-index: 10;
    }
    .qr-c-tl {
      top: -5px; left: -5px;
      border-top:  2px solid rgba(100, 215, 255, 0.8);
      border-left: 2px solid rgba(100, 215, 255, 0.8);
      border-radius: 2px 0 0 0;
      animation: qr-corner-glow 4s ease-in-out 1.0s infinite backwards;
    }
    .qr-c-tr {
      top: -5px; right: -5px;
      border-top:   2px solid rgba(100, 215, 255, 0.8);
      border-right: 2px solid rgba(100, 215, 255, 0.8);
      border-radius: 0 2px 0 0;
      animation: qr-corner-glow 4s ease-in-out 1.3s infinite backwards;
    }
    .qr-c-bl {
      bottom: -5px; left: -5px;
      border-bottom: 2px solid rgba(100, 215, 255, 0.8);
      border-left:   2px solid rgba(100, 215, 255, 0.8);
      border-radius: 0 0 0 2px;
      animation: qr-corner-glow 4s ease-in-out 1.6s infinite backwards;
    }
    .qr-c-br {
      bottom: -5px; right: -5px;
      border-bottom: 2px solid rgba(100, 215, 255, 0.8);
      border-right:  2px solid rgba(100, 215, 255, 0.8);
      border-radius: 0 0 2px 0;
      animation: qr-corner-glow 4s ease-in-out 1.9s infinite backwards;
    }

    @keyframes qr-corner-glow {
      0%   { opacity: 0; transform: scale(0.3); }
      12%  { opacity: 0.9; transform: scale(1.15); }
      40%  { opacity: 0.55; transform: scale(1); }
      72%  { opacity: 0.88; }
      100% { opacity: 0.5; transform: scale(1); }
    }

    /* Hover: corners flip to amber/bordo */
    .logo-qr-wrap:hover .qr-c-tl,
    .logo-qr-wrap:hover .qr-c-tr,
    .logo-qr-wrap:hover .qr-c-bl,
    .logo-qr-wrap:hover .qr-c-br {
      border-color: rgba(255, 165, 75, 1) !important;
      opacity: 1 !important;
      animation: none;
      filter: drop-shadow(0 0 4px rgba(255, 145, 45, 0.75));
      transition: border-color 0.25s ease, opacity 0.25s ease;
    }

    /* ── Logo icon container ── */
    .logo-icon-container {
      position: relative;
      overflow: hidden;
      isolation: isolate; /* blend-mode etkisini sadece logo kutusunda tut */
      background-color: #699ec3; /* fallback: beyaz alanların karışacağı baz renk */
      /* Sayfa yüklenince: dijital materialize */
      animation: qr-materialize 1s cubic-bezier(0.23, 1, 0.32, 1) 0.25s backwards,
                 qr-digital-pulse 5s ease-in-out 1.6s infinite;
      transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1),
                  box-shadow 0.4s ease;
    }

    /* Koyu navy overlay — hover'da belirir (invert efekti için kontrast zemin) */
    .logo-icon-container::before {
      content: '';
      position: absolute;
      inset: 0;
      background: linear-gradient(135deg, #081422 0%, #0c1c30 50%, #091726 100%);
      opacity: 0;
      transition: opacity 0.35s cubic-bezier(0.4, 0, 0.2, 1);
      border-radius: inherit;
      z-index: 0;
    }
    .logo-qr-wrap:hover .logo-icon-container::before { opacity: 1; }

    /* Scan line — sürekli tepeden aşağı tarama */
    .logo-icon-container::after {
      content: '';
      position: absolute;
      left: -10%;
      top: -4px;
      width: 120%;
      height: 2px;
      background: linear-gradient(90deg,
        transparent 0%,
        rgba(100, 225, 255, 0.5) 15%,
        rgba(210, 248, 255, 1)   50%,
        rgba(100, 225, 255, 0.5) 85%,
        transparent 100%
      );
      box-shadow:
        0 0 6px rgba(100, 220, 255, 0.95),
        0 0 18px rgba(100, 220, 255, 0.45),
        0 1px 3px rgba(255, 255, 255, 0.55);
      animation: qr-scan-idle 3.8s ease-in-out 1.4s infinite;
      z-index: 3;
      pointer-events: none;
    }

    /* Hover: scan line sarıya döner, hızlanır */
    .logo-qr-wrap:hover .logo-icon-container::after {
      background: linear-gradient(90deg,
        transparent 0%,
        rgba(255, 165, 70, 0.65) 15%,
        rgba(255, 222, 165, 1)   50%,
        rgba(255, 165, 70, 0.65) 85%,
        transparent 100%
      );
      box-shadow:
        0 0 8px rgba(255, 165, 70, 1),
        0 0 24px rgba(255, 140, 45, 0.55),
        0 1px 3px rgba(255, 255, 255, 0.7);
      animation: qr-scan-hover 0.88s linear infinite;
    }

    /* İkon overlay'lerin üstünde */
    .logo-icon-container .logo-icon {
      position: absolute;
      inset: 0;
      z-index: 1;
    }

    /* ── Logo image (normal + hover versiyonları) ── */
    .logo-icon {
      display: block;
      width: 100%;
      height: 100%;
      object-fit: contain;
      padding: 4px;
      border-radius: 10px;
      mix-blend-mode: multiply; /* beyaz alanları arkaplanla birleştirerek gizler */
      transition: opacity 0.3s ease, transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), filter 0.3s ease;
      animation: qr-glitch 14s ease-in-out 4s infinite;
    }

    .logo-icon--normal {
      opacity: 0.98;
    }

    .logo-icon--hover {
      opacity: 0;
      pointer-events: none;
    }

    /* Hover: normal logo gizlenir, hover logo görünür; mevcut efektler korunur */
    .logo-qr-wrap:hover .logo-icon--normal,
    .logo-qr-wrap:active .logo-icon--normal {
      opacity: 0;
    }

    .logo-qr-wrap:hover .logo-icon--hover,
    .logo-qr-wrap:active .logo-icon--hover {
      opacity: 0.98;
    }

    .logo-qr-wrap:hover .logo-icon,
    .logo-qr-wrap:active .logo-icon {
      transform: scale(1.1);
      mix-blend-mode: screen;
      filter: invert(1) brightness(1.15) drop-shadow(0 0 7px rgba(100, 220, 255, 0.85));
      animation: none;
    }

    /* Container hover — siyan/elektrik glow (invert teması ile uyumlu) */
    .logo-qr-wrap:hover .logo-icon-container {
      transform: scale(1.08);
      box-shadow:
        0 0 30px rgba(100, 220, 255, 0.65),
        0 0 14px rgba(80, 200, 255, 0.4),
        inset 0 0 15px rgba(100, 220, 255, 0.22);
      animation: none;
    }

    /* ============================================================
       KEYFRAMES
    ============================================================ */

    /* Sayfa yüklenince: piksel materializasyonu */
    @keyframes qr-materialize {
      0%  {
        opacity: 0;
        transform: scale(0.6);
        filter: blur(6px) brightness(3.5);
        box-shadow: 0 0 50px rgba(100, 210, 255, 0.95);
      }
      28% {
        opacity: 0.55;
        filter: blur(2.5px) brightness(2);
        box-shadow: 0 0 28px rgba(100, 210, 255, 0.6);
      }
      60% {
        opacity: 0.88;
        transform: scale(1.07);
        filter: blur(0.4px) brightness(1.2);
        box-shadow: 0 0 16px rgba(100, 210, 255, 0.3);
      }
      80% {
        transform: scale(0.97);
        filter: none;
        box-shadow: none;
      }
      100% {
        opacity: 1;
        transform: scale(1);
        filter: none;
        box-shadow: none;
      }
    }

    /* Boşta dijital nefes animasyonu */
    @keyframes qr-digital-pulse {
      0%, 100% {
        box-shadow: 0 0 6px rgba(105,158,195,0.18),
                    inset 0 0 6px rgba(105,158,195,0.06);
      }
      22% {
        box-shadow: 0 0 22px rgba(100,218,255,0.55),
                    inset 0 0 16px rgba(100,218,255,0.2),
                    0 0 45px rgba(100,218,255,0.14);
      }
      50% {
        box-shadow: 0 0 10px rgba(105,158,195,0.25),
                    inset 0 0 8px rgba(105,158,195,0.09);
      }
      78% {
        box-shadow: 0 0 18px rgba(100,218,255,0.4),
                    inset 0 0 12px rgba(100,218,255,0.15);
      }
    }

    /* Scan — normal hız */
    @keyframes qr-scan-idle {
      0%   { top: -4px;               opacity: 0;    }
      7%   {                           opacity: 0.95; }
      83%  {                           opacity: 0.8;  }
      91%  { top: calc(100% + 4px);   opacity: 0;    }
      100% { top: calc(100% + 4px);   opacity: 0;    }
    }

    /* Scan — hover hızı */
    @keyframes qr-scan-hover {
      0%   { top: -4px;             opacity: 0.95; }
      8%   {                         opacity: 1;    }
      90%  { top: calc(100% + 4px); opacity: 0.9;  }
      100% { top: -4px;             opacity: 0.95; }
    }

    /* Çok hafif glitch — ~14 saniyede bir ateşlenir */
    @keyframes qr-glitch {
      0%,  82%, 100% { transform: translateX(0)   scaleX(1);    filter: none; }
      83%             { transform: translateX(-3px) scaleX(0.99); filter: hue-rotate(22deg)  brightness(1.18) saturate(1.5); }
      84%             { transform: translateX( 3px) scaleX(1.01); filter: hue-rotate(-14deg) brightness(0.91); }
      85%             { transform: translateX(-1px) scaleX(1);    filter: hue-rotate(8deg)   brightness(1.06); }
      86%             { transform: translateX(0)   scaleX(1);    filter: none; }
    }

    /* ── Logo text fade-in ── */
    .logo-text-primary {
      animation: logo-text-in 0.9s ease-out 0.55s backwards;
      transition: color 0.3s ease;
    }
    .logo-text-secondary {
      animation: logo-text-in 0.9s ease-out 0.78s backwards;
      transition: color 0.3s ease, opacity 0.3s ease;
    }
    @keyframes logo-text-in {
      0%   { opacity: 0; transform: translateX(-10px); }
      100% { opacity: 1; transform: translateX(0); }
    }

    .logo-wrapper:hover .logo-text-primary  { color: #ce9f51; }
    .logo-wrapper:hover .logo-text-secondary { color: #e0b366; opacity: 1; }

    /* Subtitle "Öğretim Üyesi" - sabit renk */
    .nav-subtitle-static { color: #7fa0b8 !important; }
    .logo-wrapper:hover .nav-subtitle-static { color: #7fa0b8 !important; }

    /* ===== HERO SLOGAN — EL YAZISI ===== */
    .hero-slogan {
      font-family: 'Dancing Script', cursive;
      font-size: clamp(1.4rem, 3vw, 2rem);
      color: rgba(255,255,255,0.88);
      line-height: 1.3;
      position: relative;
      display: inline-block;
      padding-bottom: 6px;
      letter-spacing: 0.01em;
      margin-top: -30px;
    }

    .hero-slogan::after {
      content: '';
      position: absolute;
      bottom: 0;
      left: 0;
      width: 70%;
      height: 1.5px;
      background: linear-gradient(to right, rgba(206,159,81,0.7), transparent);
      border-radius: 2px;
    }

    /* ===== RESPONSIVE: ACCORDION ===== */
    @media (max-width: 640px) {
      .hero-slogan {
        margin-top: -10px;
      }
    }

    @media (min-width: 641px) and (max-width: 900px) {
      .hero-slogan {
        margin-top: -20px;
      }
    }

    @media (max-width: 640px) {
      #heroAccordion {
        max-width: calc(100vw - 32px) !important;
      }

      .accordion-item:has(.accordion-button.active) {
        width: 100%;
      }
    }

    @media (min-width: 641px) and (max-width: 900px) {
      #heroAccordion {
        max-width: 300px !important;
      }

      .accordion-item:has(.accordion-button.active) {
        width: calc(100% + 200px);
      }
    }