/* 3D-PTC site teması — program.php'den alınmıştır */
:root { 
            --blue: #2ea3e0; 
            --cyan: #36b8ef; 
            --orange: #ef7d1a; 
            --ink: #0c2238; 
        }

        * { 
            box-sizing: border-box; 
        }

        html { 
            background: radial-gradient(820px 480px at 5% -6%, rgba(240, 120, 20, 0.32), transparent 56%),
                        radial-gradient(700px 520px at 100% 12%, rgba(46, 163, 224, 0.18), transparent 60%),
                        linear-gradient(155deg, #07172a 0%, #0b2742 50%, #0e2f52 100%) fixed; 
        }

        body { 
            font-family: 'Roboto', Arial, sans-serif; 
            color: #3a4250; 
            margin: 0; 
            background: transparent;
            -webkit-user-select: none; 
            -moz-user-select: none; 
            -ms-user-select: none; 
            user-select: none;
            display: flex;
            flex-direction: column;
            min-height: 100vh;
        }

        #bg-canvas { 
            position: fixed; 
            inset: 0; 
            width: 100%; 
            height: 100%; 
            z-index: -1; 
            display: block; 
            pointer-events: none; 
        }

        img { 
            max-width: 100%; 
            pointer-events: none; 
        }

        #header { 
            position: fixed; 
            top: 0; 
            left: 0; 
            right: 0; 
            z-index: 1040; 
            background: transparent; 
            box-shadow: none; 
            transition: background 0.3s ease, box-shadow 0.3s ease; 
        }
        #header.scrolled { 
            background: linear-gradient(90deg, #0b1b2e 0%, #102740 55%, #16384f 100%); 
            box-shadow: 0 2px 14px rgba(0, 0, 0, 0.28); 
        }
        #header .bar { 
            display: flex; 
            align-items: center; 
            justify-content: space-between; 
            max-width: 1210px; 
            margin: 0 auto; 
            padding: 8px 18px; 
        }
        #header .logo img { 
            height: 48px; 
            display: block; 
            pointer-events: auto; 
        }
        #header .menu-wrapper { 
            display: flex; 
            align-items: center; 
            margin-left: auto; 
        }
        #header .menu { 
            list-style: none; 
            margin: 0; 
            padding: 0; 
            display: flex; 
            align-items: center; 
        }
        #header .menu > li { 
            position: relative; 
        }
        #header .menu > li > a { 
            display: block; 
            padding: 20px 12px; 
            font-size: 12px; 
            font-weight: 500; 
            letter-spacing: 1px; 
            text-transform: uppercase; 
            color: #fff; 
            text-decoration: none; 
            white-space: nowrap; 
            text-shadow: 0 1px 8px rgba(0, 0, 0, 0.45); 
            transition: 0.2s; 
        }
        #header .menu > li > a:hover { color: #56b3ec; }
        #header .menu > li.has > a:after { content: "\25BE"; font-size: 9px; margin-left: 6px; opacity: 0.85; }
        
        #header .menu > li.cta { display: flex; align-items: center; margin-left: 10px; }
        #header .menu > li.cta > a { background: var(--orange); color: #fff; padding: 10px 22px; border-radius: 30px; text-shadow: none; font-weight: 700; box-shadow: 0 6px 16px rgba(239, 125, 26, 0.45); transition: background 0.2s ease, transform 0.2s ease; }
        #header .menu > li.cta > a:after { content: none; }
        #header .menu > li.cta > a:hover { background: #d96b0c; color: #fff; transform: translateY(-1px); }
        
        #header .menu .submenu { 
            list-style: none; margin: 0; padding: 6px 0; position: absolute; top: 100%; left: 0; min-width: 235px; background: #fff; border-radius: 0 0 6px 6px; box-shadow: 0 12px 26px rgba(0, 0, 0, 0.18); opacity: 0; visibility: hidden; transform: translateY(8px); transition: 0.16s ease; z-index: 50; 
        }
        #header .menu > li:hover .submenu { opacity: 1; visibility: visible; transform: translateY(0); }
        #header .menu .submenu a { display: block; padding: 10px 18px; font-size: 13px; color: #3a4250; text-decoration: none; text-transform: none; letter-spacing: 0; white-space: nowrap; transition: 0.2s; }
        #header .menu .submenu a:hover { background: #f2f7fc; color: var(--blue); }

        .attr-nav { display: flex; align-items: center; margin-left: 20px; }
        .attr-nav ul { list-style: none; margin: 0; padding: 0; }
        .attr-nav li.side-menu a { color: #fff; font-size: 22px; transition: color 0.3s ease; display: block; padding: 10px; text-decoration: none; pointer-events: auto; }
        .attr-nav li.side-menu a:hover { color: var(--cyan); }

        #header .burger { display: none; border: 0; background: none; font-size: 22px; color: #fff; cursor: pointer; padding: 8px; }

        @media (max-width: 992px) {
            #header .burger { display: block; }
            .attr-nav { display: none; }
            #header .menu { position: absolute; top: 56px; left: 0; right: 0; flex-direction: column; align-items: stretch; background: #102740; max-height: calc(100vh - 56px); overflow: auto; display: none; }
            #header .menu.open { display: flex; }
            #header .menu > li > a { padding: 14px 18px; border-bottom: 1px solid rgba(255, 255, 255, 0.08); }
            #header .menu > li.has > a:after { float: right; }
            #header .menu .submenu { position: static; opacity: 1; visibility: visible; transform: none; box-shadow: none; border-radius: 0; background: #0b1b2e; padding: 0; display: none; }
            #header .menu > li.open .submenu { display: block; }
            #header .menu .submenu a { color: #cdd9e6; padding-left: 34px; }
            #header .menu > li.cta { margin: 12px 18px; }
            #header .menu > li.cta > a { text-align: center; }
        }

        .side-panel-overlay { position: fixed; inset: 0; background: rgba(7, 20, 40, 0.7); z-index: 2050; opacity: 0; visibility: hidden; transition: 0.3s ease; backdrop-filter: blur(4px); pointer-events: none; }
        .side-panel-overlay.active { opacity: 1; visibility: visible; pointer-events: auto; }
        .side-panel { position: fixed; top: 0; right: -350px; width: 320px; height: 100vh; background: rgba(11, 27, 46, 0.98); z-index: 2060; box-shadow: -5px 0 30px rgba(0, 0, 0, 0.5); transition: right 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275); overflow-y: auto; padding: 40px 30px; border-left: 1px solid rgba(54, 184, 239, 0.2); }
        .side-panel.open { right: 0; }
        .side-panel .close-side { position: absolute; top: 20px; right: 25px; color: #a8b8c8; font-size: 26px; text-decoration: none; transition: 0.2s; pointer-events: auto; }
        .side-panel .close-side:hover { color: var(--orange); transform: rotate(90deg); }
        .side-panel .widget { margin-top: 40px; }
        .side-panel .title { color: var(--cyan); font-size: 17px; font-weight: 700; margin-bottom: 20px; letter-spacing: 1px; text-transform: uppercase; border-bottom: 1px solid rgba(255, 255, 255, 0.1); padding-bottom: 10px; display: block; }
        .side-panel .link { list-style: none; padding: 0; margin: 0; }
        .side-panel .link li { margin-bottom: 14px; }
        .side-panel .link a { color: #cfdcea; text-decoration: none; font-size: 15px; transition: 0.2s; display: flex; align-items: center; gap: 10px; pointer-events: auto; }
        .side-panel .link a:before { content: "\f105"; font-family: 'FontAwesome'; font-size: 12px; color: var(--orange); opacity: 0; transition: 0.2s; transform: translateX(-10px); }
        .side-panel .link a:hover { color: var(--cyan); transform: translateX(5px); }
        .side-panel .link a:hover:before { opacity: 1; transform: translateX(0); }
        .side-panel .social-links { display: flex; gap: 12px; flex-wrap: wrap; }
        .side-panel .social-links a { color: #fff; background: rgba(255, 255, 255, 0.05); width: 40px; height: 40px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 16px; transition: 0.3s; text-decoration: none; border: 1px solid rgba(255, 255, 255, 0.1); pointer-events: auto; }
        .side-panel .social-links a:hover { background: var(--cyan); border-color: var(--cyan); color: #04263c; transform: translateY(-3px); }

        .spacer { height: 0; }

        .page-hero { position: relative; color: #fff; text-align: center; padding: 140px 16px 80px; background: linear-gradient(rgba(7, 20, 40, 0.85) 0%, rgba(11, 40, 75, 0.9) 100%); border-bottom: 1px solid rgba(255, 255, 255, 0.05); }
        .page-hero h1 { font-weight: 700; font-size: 42px; margin: 0 0 10px; letter-spacing: 1px; text-transform: uppercase; }
        .page-hero .breadcrumb-nav { font-size: 14px; opacity: 0.85; letter-spacing: 1px; text-transform: uppercase; font-weight: 500; }
        .page-hero .breadcrumb-nav a { color: var(--cyan); text-decoration: none; transition: 0.2s; pointer-events: auto; }
        .page-hero .breadcrumb-nav a:hover { color: #fff; }

        .program-section { padding: 80px 0; flex-grow: 1; pointer-events: auto; user-select: text; -webkit-user-select: text;}
        .container { max-width: 1240px; margin: 0 auto; padding: 0 18px; }

        .overview-box {
            background: rgba(255, 255, 255, 0.04);
            border: 1px solid rgba(255, 255, 255, 0.08);
            border-radius: 16px;
            padding: 40px;
            color: #cfdcea;
            line-height: 1.7;
            font-size: 15px;
            box-shadow: 0 15px 35px rgba(0,0,0,0.25);
            backdrop-filter: blur(8px);
            margin-bottom: 40px;
        }
        
        .ended-btn {
            background: var(--orange); 
            color: #fff; 
            padding: 14px 32px; 
            border-radius: 30px; 
            text-decoration: none; 
            font-weight: 700; 
            font-size: 16px; 
            box-shadow: 0 6px 16px rgba(239, 125, 26, 0.45); 
            transition: background 0.2s ease, transform 0.2s ease; 
            display: inline-block;
        }
        .ended-btn:hover {
            background: #d96b0c; 
            color: #fff; 
            transform: translateY(-2px);
            text-decoration: none;
        }

        footer { background: var(--ink); color: #cdd5e0; text-align: center; padding: 42px 0; font-size: 14px; border-top: 1px solid rgba(255, 255, 255, 0.05); margin-top: auto; }
        footer .social a { color: #cdd5e0; font-size: 20px; margin: 0 9px; text-decoration: none; pointer-events: auto; transition: 0.2s; }
        footer .social a:hover { color: var(--blue); }