:root { --brand-claret: #7A1631; /* bordo */ --brand-blue: #2A9DD8; /* mavi — kurumsal ana vurgu */ --brand-dark: #0b132b; --brand-light: #f5f7fb; --radius: 1.25rem; --radius-lg: 1.5rem; --brand-teal: #2ec4b6; --brand-sand: #f2e9e4; --elev-low: 0 10px 30px rgba(11, 19, 43, .08); --elev-high: 0 24px 60px rgba(11, 19, 43, .15); /* Tema tokenları (çoklu yarışma: data-theme ile override) */ --accent-primary: var(--brand-blue); --accent-soft-bg: rgba(42, 157, 216, .12); --accent-soft-border: rgba(42, 157, 216, .28); --surface: var(--brand-light); --surface-elevated: #ffffff; --border-subtle: rgba(11, 19, 43, .08); --text-muted-custom: #5c6578; --font-display: "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; } /* Örnek: vurguyu teal yapmak için */ [data-theme="teal-accent"] { --accent-primary: #1e9a8e; --accent-soft-bg: rgba(46, 196, 182, .14); --accent-soft-border: rgba(46, 196, 182, .35); } html { scroll-behavior: smooth; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } } html, body { font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; font-feature-settings: "tnum" 1; } h1, .h1, h2, .h2 { font-family: var(--font-display); letter-spacing: -0.02em; } .hero-title { font-size: clamp(1.65rem, 4.2vw, 3.15rem); line-height: 1.15; } /* Odak — kurumsal erişilebilirlik */ :focus { outline: none; } :focus-visible { outline: 2px solid var(--accent-primary); outline-offset: 2px; } .skip-link.visually-hidden-focusable { position: absolute; left: 0.5rem; top: 0.5rem; z-index: 10000; padding: 0.5rem 1rem; background: var(--surface-elevated); color: var(--brand-dark); font-weight: 600; border-radius: var(--radius); box-shadow: var(--elev-high); transform: translateY(-120%); transition: transform 0.2s ease; } .skip-link.visually-hidden-focusable:focus { transform: translateY(0); } /* Site genel loader */ .site-loader { position: fixed; inset: 0; background: #000; display: grid; place-items: center; z-index: 9999; transition: opacity .6s cubic-bezier(0.4, 0, 0.2, 1); } .site-loader.is-hidden { opacity: 0; pointer-events: none; } .site-loader-inner { display: flex; flex-direction: column; align-items: center; gap: 2rem; width: 100%; max-width: 200px; } .site-loader-logo { width: clamp(80px, 15vw, 110px); height: auto; filter: brightness(0) invert(1); animation: loader-pulse 2s ease-in-out infinite; } .site-loader-bar { width: 100%; height: 2px; background: rgba(255, 255, 255, 0.1); position: relative; overflow: hidden; border-radius: 2px; } .site-loader-bar::after { content: ""; position: absolute; top: 0; left: 0; width: 40%; height: 100%; background: linear-gradient(90deg, transparent, #fff, transparent); animation: loader-shimmer 1.5s infinite ease-in-out; } @keyframes loader-pulse { 0%, 100% { transform: scale(1); opacity: 0.8; } 50% { transform: scale(1.05); opacity: 1; } } @keyframes loader-shimmer { 0% { transform: translateX(-150%); } 100% { transform: translateX(250%); } } @media (prefers-reduced-motion: reduce) { .site-loader-logo, .site-loader-bar::after { animation: none; } .site-loader-logo { opacity: 1; } } .navbar { backdrop-filter: saturate(140%) blur(10px); background: rgba(14, 23, 44, .35); border-bottom: 1px solid rgba(255, 255, 255, .08); transition: background .25s ease, border-color .25s ease; } .navbar.scrolled { background: rgba(14, 23, 44, .9); border-bottom-color: rgba(255, 255, 255, .15); } .navbar-brand img { height: 80px; } /* Navbar link colors */ .navbar .nav-link { color: #ffffff !important; } .navbar .nav-link:hover { color: #ffffff !important; } .navbar .nav-link.active { color: #ffffff !important; } /* Navbar link underline animation */ .navbar .nav-link { position: relative; } .navbar .nav-link::after { content: ""; position:absolute; left: 50%; transform: translateX(-50%); bottom: 0.35rem; height: 1px; width: 0%; background: var(--accent-primary); border-radius: 1px; transition: width .25s ease; } .navbar .nav-link:hover::after, .navbar .nav-link:focus-visible::after, .navbar .nav-link.active::after { width: 50%; } .btn-brand { background: linear-gradient(135deg, var(--brand-claret), #9c2546); border: none; border-radius: var(--radius); color: #fff; box-shadow: var(--elev-low); } .btn-brand:hover { transform: translateY(-2px); background: #fff; color: #9c2546; } .btn-sonuclar { background: linear-gradient(135deg, #1a7a45, #0d5c33); border: none; border-radius: var(--radius); color: #fff; box-shadow: var(--elev-low); animation: sonuclar-pulse 1.35s ease-in-out infinite; will-change: opacity, box-shadow, filter; } .btn-sonuclar:hover, .btn-sonuclar:focus-visible { animation: none; transform: translateY(-2px); background: #fff; color: #0d5c33; } @keyframes sonuclar-pulse { 0%, 100% { opacity: 1; filter: brightness(1); box-shadow: 0 10px 32px rgba(13, 92, 51, 0.45); } 50% { opacity: 0.65; filter: brightness(1.18); box-shadow: 0 16px 44px rgba(46, 196, 113, 0.55); } } @media (prefers-reduced-motion: reduce) { .btn-sonuclar { animation: none; will-change: auto; } } .btn-ghost { border-radius: var(--radius); color: #fff; background: rgba(255,255,255,.06); backdrop-filter: saturate(120%); background-color: var(--accent-primary); } .btn-ghost:hover { transform: translateY(-2px); background: #fff; color: var(--accent-primary); } .text-gradient { background: linear-gradient(90deg, #5ec4ff, #b8e2ff); -webkit-background-clip: text; background-clip: text; color: transparent; } .hero .text-gradient { text-shadow: none; filter: drop-shadow(0 2px 12px rgba(0, 0, 0, 0.55)); } .hero { position: relative; min-height: min(88dvh, 920px); display: grid; place-items: center; color: #fff; background-color: #000; /* video yüklenene kadar siyah arka plan */ } @media (prefers-reduced-motion: reduce) { .hero .hero-video { display: none; } .hero .carousel-item { background: var(--brand-dark) url("../image/1.jpeg") center / cover no-repeat; } .hero.is-playing::after { opacity: 1; } } /* Arka plan videosu kullanıldığı için statik görsel kaldırıldı */ .hero::before { content: none; } .hero::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(11, 19, 43, .92), rgba(122, 22, 49, .88)); opacity: 0; /* başlangıçta gizle (maroon flaşı önle) */ transition: opacity .35s ease; } /* Video oynayınca overlay'i yumuşakça göster */ .hero.is-playing::after { opacity: 1; } .hero>.container { position: relative; z-index: 2; padding-top: 150px; } /* Videolu slider (carousel) stil */ .hero .carousel, .hero .carousel-inner, .hero .carousel-item { position: absolute; inset: 0; } .hero .carousel-item { transition: opacity .8s ease; } .hero-video { width: 100%; height: 100%; object-fit: cover; position:absolute; inset:0; width:100%; height:100%; object-fit:cover; filter: brightness(.85) contrast(1.02) saturate(.95); } .carousel-control-prev, .carousel-control-next { z-index: 3; } .pill { display: inline-flex; gap: .5rem; align-items: center; background: slategray; border: 1px solid rgba(255, 255, 255, .25); padding: .375rem .75rem; border-radius: 999px; font-size: .9rem; } .hero-sonuclar-hint { text-shadow: 0 1px 4px rgba(0, 0, 0, .65); opacity: .96; max-width: 36rem; } .section-light { background-color: var(--surface); background-image: linear-gradient(rgba(11, 19, 43, 0.028) 1px, transparent 1px), linear-gradient(90deg, rgba(11, 19, 43, 0.028) 1px, transparent 1px); background-size: 44px 44px; } .badge-soft { background: var(--accent-soft-bg); color: var(--accent-primary); border: 1px solid var(--accent-soft-border); border-radius: 999px; padding: .4rem .75rem; } .timeline { position: relative; margin-left: 1rem; } .timeline::before { content: ""; position: absolute; left: 10px; top: 0; bottom: 0; width: 2px; background: #e9edf5; } .timeline-item { position: relative; padding-left: 2.5rem; margin-bottom: 1.25rem; } .timeline-item::before { content: ""; position: absolute; left: 2px; top: 6px; width: 18px; height: 18px; border-radius: 50%; background: var(--accent-primary); box-shadow: 0 0 0 6px var(--accent-soft-bg); } .card-rounded { border: none; border-radius: var(--radius-lg); box-shadow: 0 10px 30px rgba(11, 19, 43, .06); overflow: hidden; } #oduller .card.card-rounded, #juri .card.card-rounded { background: rgba(255, 255, 255, 0.78); backdrop-filter: blur(14px) saturate(130%); -webkit-backdrop-filter: blur(14px) saturate(130%); border: 1px solid rgba(255, 255, 255, 0.65); box-shadow: 0 8px 32px rgba(11, 19, 43, 0.07), inset 0 1px 0 rgba(255, 255, 255, 0.9); } #oduller .card.card-rounded .text-muted { font-variant-numeric: tabular-nums; } .footer { position: relative; overflow: hidden; background: linear-gradient(180deg, #0e172c, #0b132b); color: #c8d3f5; } .footer::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(ellipse 85% 55% at 15% 0%, rgba(42, 157, 216, 0.14), transparent 55%), radial-gradient(ellipse 70% 50% at 92% 100%, rgba(122, 22, 49, 0.18), transparent 50%); } .footer .container { position: relative; z-index: 1; } .footer a { color: #e6f1ff; text-decoration: none; } .countdown .cell { min-width: 84px; border-radius: .75rem; background: #0e172c; color: #fff; padding: .75rem 1rem; text-align: center; } .countdown .value { font-size: 1.8rem; font-weight: 700; } .countdown .label { font-size: .8rem; opacity: .85; } .shadow-soft { box-shadow: 0 24px 60px -20px rgba(11, 19, 43, .25); } .form-check-input:checked { background-color: var(--accent-primary); border-color: var(--accent-primary); } .link-dark:hover { color: var(--brand-claret) !important } section { scroll-margin-top: 100px; /* Navbar yüksekliği + padding */ } section[id]:not(#hakkinda) { border-top: 1px solid var(--border-subtle); } /* Page animations */ @keyframes fadeInUp { from { opacity: 0; transform: translateY(30px); } to { opacity: 1; transform: translateY(0); } } @keyframes fadeInLeft { from { opacity: 0; transform: translateX(-30px); } to { opacity: 1; transform: translateX(0); } } @keyframes fadeInRight { from { opacity: 0; transform: translateX(30px); } to { opacity: 1; transform: translateX(0); } } @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } /* Animation classes */ .animate-on-scroll { opacity: 0; transform: translateY(30px); transition: all 0.6s ease-out; } .animate-on-scroll.animated { opacity: 1; transform: translateY(0); } @media (prefers-reduced-motion: reduce) { .animate-on-scroll { opacity: 1; transform: none; transition: none; } .hero .container > * { animation: none; } } .animate-fade-in { animation: fadeIn 0.8s ease-out; } .animate-fade-in-up { animation: fadeInUp 0.8s ease-out; } .animate-fade-in-left { animation: fadeInLeft 0.8s ease-out; } .animate-fade-in-right { animation: fadeInRight 0.8s ease-out; } /* Staggered animations */ .animate-delay-1 { animation-delay: 0.1s; } .animate-delay-2 { animation-delay: 0.2s; } .animate-delay-3 { animation-delay: 0.3s; } .animate-delay-4 { animation-delay: 0.4s; } .animate-delay-5 { animation-delay: 0.5s; } /* Jüri sekmeleri: mobilde yatay kaydırma */ .jury-tabs-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: thin; margin-bottom: 1.5rem; padding-bottom: 0.25rem; } .jury-tabs-scroll .nav { min-width: min-content; } .jury-tabs-scroll .nav-item { flex-shrink: 0; } .jury-tabs-scroll .nav-link { white-space: nowrap; } @media (max-width: 991.98px) { .hero > .container { padding-top: 110px; } } @media (max-width: 575.98px) { .hero > .container { padding-top: 96px; } } .navbar-nav .nav-link.active { color: var(--accent-primary) !important; font-weight: 600; } .navbar-nav .nav-link:hover { color: #b8dfff !important; } /* Hover effects for cards */ .card { transition: all 0.3s ease; } .card:hover { transform: translateY(-5px); box-shadow: 0 20px 40px rgba(11, 19, 43, 0.15) !important; } /* Button hover animations */ .btn { transition: all 0.3s ease; } .btn:hover { transform: translateY(-2px); } /* Hero section entrance animation */ .hero .container > * { animation: fadeInUp 1s ease-out; } .hero .container > *:nth-child(1) { animation-delay: 0.1s; } .hero .container > *:nth-child(2) { animation-delay: 0.2s; } .hero .container > *:nth-child(3) { animation-delay: 0.3s; } .hero .container > *:nth-child(4) { animation-delay: 0.4s; } /* Avatar placeholder styles */ .avatar-placeholder { width: 150px; height: 150px; border-radius: 50%; background: linear-gradient(135deg, #f8f9fa, #e9ecef); display: flex; align-items: center; justify-content: center; margin: 0 auto; border: 3px solid rgba(42, 157, 216, 0.1); transition: all 0.3s ease; } .avatar-placeholder:hover { transform: scale(1.05); border-color: rgba(42, 157, 216, 0.3); box-shadow: 0 8px 25px rgba(42, 157, 216, 0.15); } .avatar-placeholder i { transition: all 0.3s ease; font-size: 3.25rem; line-height: 1; } .avatar-placeholder:hover i { transform: scale(1.1); } /* Avatar image fits the circular container */ .avatar-placeholder .avatar-img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; display: block; filter: grayscale(70%); } /* Grileştirme olmaması istenen avatarlar için */ .avatar-placeholder .avatar-img.no-grayscale { filter: none; } /* Jüri: Danışman renkli, diğerleri siyah-beyaz */ #juri #pane-danisman .avatar-placeholder .avatar-img { filter: none !important; } #juri .tab-pane:not(#pane-danisman) .avatar-placeholder .avatar-img { filter: grayscale(100%) !important; } /* Pink color for female members */ .text-pink { color: #e91e63 !important; } /* Galeri grid */ .gallery-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; } @media (max-width: 992px) { .gallery-grid { grid-template-columns: repeat(3, 1fr); } } @media (max-width: 768px) { .gallery-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 480px) { .gallery-grid { grid-template-columns: 1fr; } } .gallery-item { position: relative; display: block; border-radius: var(--radius); overflow: hidden; box-shadow: 0 10px 30px rgba(11, 19, 43, .08); } .gallery-item img { width: 100%; height: 100%; object-fit: cover; transition: transform .35s ease; } .gallery-item .overlay { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; gap: .5rem; background: linear-gradient(180deg, rgba(11,19,43,.05), rgba(11,19,43,.58)); color: #fff; opacity: 0; transition: opacity .25s ease; font-weight: 600; backdrop-filter: blur(2px); } .gallery-item:hover img { transform: scale(1.06); } .gallery-item:hover .overlay { opacity: 1; } .gallery-item .overlay i { transition: transform .25s ease; } .gallery-item:hover .overlay i { transform: scale(1.08); } /* Jury tabs - modern pill buttons */ #juryTabs { gap: .5rem; } #juryTabs .nav-link { position: relative; border-radius: 999px; padding: .6rem 1.1rem; background: linear-gradient(180deg, rgba(255,255,255,.85), rgba(245,247,251,.95)); backdrop-filter: saturate(120%) blur(4px); border: 1px solid rgba(11, 19, 43, .08); color: #0b132b; box-shadow: 0 8px 24px rgba(11, 19, 43, .06); transition: transform .2s ease, box-shadow .2s ease, background .2s ease, color .2s ease, border-color .2s ease; } #juryTabs .nav-link:hover { transform: translateY(-2px); box-shadow: 0 16px 40px rgba(11, 19, 43, .12); border-color: rgba(11, 19, 43, .15); } #juryTabs .nav-link.active { color: #fff; background: linear-gradient(135deg, var(--accent-primary), #6ec3ff); border-color: transparent; box-shadow: 0 16px 48px rgba(11, 19, 43, 0.22); } #juryTabs .nav-link.active::after { content: ""; position: absolute; inset: -2px; border-radius: 999px; box-shadow: 0 0 0 2px rgba(255,255,255,.25) inset; pointer-events: none; } .tab-content > .tab-pane { animation: fadeIn .3s ease; } @media (max-width: 576px) { #juryTabs { flex-wrap: nowrap; overflow-x: auto; padding-bottom: .25rem; scrollbar-width: thin; } #juryTabs .nav-link { white-space: nowrap; } } /* Modern PDF action buttons */ .pdf-toggle-btn { background: linear-gradient(135deg, var(--brand-blue), #6ec3ff) !important; border: none !important; border-radius: var(--radius); color: #fff !important; box-shadow: var(--elev-low); padding: .6rem 1rem; /* override btn-sm to be a tad larger */ transition: transform .2s ease, box-shadow .2s ease, filter .2s ease; } .pdf-toggle-btn:hover { transform: translateY(-2px); box-shadow: var(--elev-high); filter: saturate(110%); } .pdf-toggle-btn:active { transform: translateY(0); } .pdf-toggle-btn:focus-visible { outline: none; box-shadow: 0 0 0 .25rem rgba(42, 157, 216, .35); } /* Projeler - etap çubuğu */ .stage-bar { display: flex; align-items: center; gap: 1rem; background: lightgrey; color: #000; padding: .6rem 1rem; border-radius: .5rem; box-shadow: var(--elev-low); } .stage-bar .stage-pill { background: #fff; color: #000; padding: .35rem .75rem; border-radius: .4rem; font-weight: 700; } .stage-bar .stage-title { font-weight: 700; } /* Projeler - blob rozetler */ .projects-grid .blob-wrap { position: relative; width: 180px; height: 140px; margin-inline: auto; filter: drop-shadow(0 10px 16px rgba(0,0,0,.18)); } .projects-grid .blob-wrap::before { content: ""; position: absolute; inset: 0; border-radius: 40% 60% 55% 45% / 45% 40% 60% 55%; transform: rotate(-8deg); } .projects-grid .blob-yellow::before { background: #2A9DD8; } .projects-grid .blob-teal::before { background: #9c2546; } .projects-grid .badge-circle { position: absolute; inset: 50% auto auto 50%; transform: translate(-50%, -50%); width: 110px; height: 110px; background: #fff; border-radius: 50%; display: grid; place-items: center; font-weight: 800; font-size: 2.25rem; color: #50555c; box-shadow: 0 8px 20px rgba(0,0,0,.15); cursor: pointer; /* sadece orta daire tıklanabilir görünsün */ pointer-events: auto; } .projects-grid .dot { position: absolute; width: 14px; height: 14px; border-radius: 50%; background: #fff; } .projects-grid .blob-teal .dot { background: #fff; } .projects-grid .dot-a { bottom: 8px; left: 18px; } .projects-grid .dot-b { top: 18px; right: 22px; } @media (max-width: 576px) { .projects-grid .blob-wrap { width: 150px; height: 120px; } .projects-grid .badge-circle { width: 96px; height: 96px; font-size: 1.9rem; } } /* Stage bar tabs */ .stage-bar .stage-tab { background: transparent; border: none; color: inherit; font-weight: 700; padding: .35rem .75rem; border-radius: .3rem; } .stage-bar .stage-tab:hover { background: rgba(255,255,255,.18); } .stage-bar .stage-tab.active { background: #000; color: #fff; } /* Stage panels */ .stage-panel { animation: fadeIn .25s ease; } .stage-panel[hidden] { display: none !important; } /* Proje kodu linki */ .project-code-link { color: inherit; text-decoration: none; border-bottom: 2px solid rgba(0,0,0,.2); padding-bottom: 2px; } .project-code-link:hover { color: var(--brand-blue); border-bottom-color: var(--brand-blue); } /* Tanıtım Videosu split alanı */ .video-split { background: linear-gradient(90deg, #2A9DD8 0 50%, transparent 50%); overflow: hidden; box-shadow: var(--elev-low); position: relative; } @media (max-width: 992px) { .video-split { background: #f4c10f; } } .video-thumb img { display:block; } .play-fab { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 74px; height: 74px; border-radius: 50%; background: #ffffff; color: #ff4d5a; display: grid; place-items: center; border: 4px solid rgba(255, 77, 90, .35); box-shadow: 0 12px 30px rgba(0,0,0,.18); z-index: 3; } .play-fab i { font-size: 2rem; line-height: 1; } .play-fab:hover { filter: brightness(1.05); } /* Video alanı animasyonları */ @keyframes pulseRing { 0% { box-shadow: 0 0 0 0 rgba(255, 77, 90, .45); } 70% { box-shadow: 0 0 0 18px rgba(255, 77, 90, 0); } 100% { box-shadow: 0 0 0 0 rgba(255, 77, 90, 0); } } @keyframes bob { 0%,100%{ transform: translate(-50%, -50%) translateY(0); } 50%{ transform: translate(-50%, -50%) translateY(-4px); } } @keyframes imgReveal { 0% { filter: grayscale(100%) contrast(.9) saturate(.8); transform: scale(1.04); } 100% { filter: grayscale(0%) contrast(1) saturate(1); transform: scale(1); } } @keyframes shine { 0% { background-position: -150% 0; } 100% { background-position: 150% 0; } } .video-thumb { position: relative; overflow: hidden; } .video-thumb img { animation: imgReveal .9s ease-out both; } .video-thumb::after{ content:""; position:absolute; inset:0; background: linear-gradient(120deg, transparent 30%, rgba(255,255,255,.4) 45%, transparent 60%); background-size: 250% 100%; animation: shine 2.2s ease-in-out 1.2s 2; pointer-events:none; } .play-fab { animation: pulseRing 1.8s ease-out infinite, bob 3.2s ease-in-out infinite; } /* Scroll ile giriş animasyonu */ .video-split .col-lg-6 { opacity: 0; transform: translateY(14px); transition: all .6s ease; } .video-split.revealed .col-lg-6 { opacity: 1; transform: none; } /* Video alanında metin rengi (sol sütun) */ #tanitim-video .video-split { color: #fff; } #tanitim-video .video-split h3 { color: #fff; } #tanitim-video .video-split .btn-link { color: #fff !important; } #tanitim-video .video-split .btn-link:hover { opacity: .9; } /* Belge Listesi Stilleri */ .document-list { display: flex; flex-direction: column; gap: 0; } .document-item { padding: 1.25rem; border-bottom: 1px solid rgba(0, 0, 0, 0.08); transition: all 0.3s ease; border-radius: 0.5rem; } .document-item:last-child { border-bottom: none; } .document-item:hover { background-color: rgba(42, 157, 216, 0.04); transform: translateX(4px); box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05); } .document-icon { width: 48px; height: 48px; display: flex; align-items: center; justify-content: center; background: linear-gradient(135deg, var(--brand-blue) 0%, var(--brand-claret) 100%); border-radius: 12px; color: white; font-size: 1.5rem; transition: transform 0.3s ease; } .document-item:hover .document-icon { transform: scale(1.1) rotate(5deg); } .document-item h6 { color: var(--brand-dark); font-size: 1rem; margin-bottom: 0.25rem; } .document-item .text-muted { font-size: 0.875rem; line-height: 1.5; } .document-item .btn { transition: all 0.3s ease; font-weight: 500; } .document-item:hover .btn-dark { transform: translateY(-2px); box-shadow: 0 4px 12px rgba(11, 19, 43, 0.2); } /* Responsive düzenlemeler */ @media (max-width: 991px) { .document-item { padding: 1rem; } .document-icon { width: 40px; height: 40px; font-size: 1.25rem; } .document-item h6 { font-size: 0.9rem; } } /* Kentsel Tasarım Sonuçları Popup (mobile-first bottom-sheet) */ .kt-popup { position: fixed; inset: 0; z-index: 2000; } .kt-popup__backdrop { position: absolute; inset: 0; background: rgba(11, 19, 43, 0.55); backdrop-filter: blur(2px); } .kt-popup__sheet { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: min(520px, calc(100% - 32px)); background: linear-gradient(180deg, rgba(255,255,255,.98), rgba(245,247,251,.98)); border: 1px solid rgba(11, 19, 43, .10); border-radius: 18px; box-shadow: 0 24px 70px rgba(11, 19, 43, .28); overflow: hidden; animation: ktSheetIn .22s ease-out; } .kt-popup__content { padding: 16px 16px 14px; } .kt-popup__eyebrow { display: inline-block; font-weight: 700; font-size: .75rem; letter-spacing: .04em; text-transform: uppercase; color: rgba(11, 19, 43, .65); background: rgba(42, 157, 216, .12); border: 1px solid rgba(42, 157, 216, .18); padding: 6px 10px; border-radius: 999px; margin-bottom: 10px; } .kt-popup__title { margin: 0 0 8px 0; font-weight: 800; font-size: 1.05rem; line-height: 1.25; color: #0b132b; } .kt-popup__desc { margin: 0 0 14px 0; color: rgba(11, 19, 43, .75); font-size: .95rem; line-height: 1.4; } .kt-popup__actions { display: grid; gap: 10px; } .kt-popup__close { position: absolute; top: 10px; right: 10px; width: 40px; height: 40px; border-radius: 12px; border: 1px solid rgba(11, 19, 43, .10); background: rgba(255,255,255,.92); color: rgba(11, 19, 43, .75); font-size: 24px; line-height: 1; display: grid; place-items: center; cursor: pointer; } .kt-popup__close:hover { background: rgba(255,255,255,1); color: rgba(11, 19, 43, .92); } @keyframes ktSheetIn { from { transform: translate(-50%, calc(-50% + 10px)); opacity: 0; } to { transform: translate(-50%, -50%); opacity: 1; } } @media (prefers-reduced-motion: reduce) { .kt-popup__sheet { animation: none; } }