:root{ --bg:#edf1f4; --card:#ffffff; --text:#231f20; --muted:#6e6e73; --line:rgba(0,0,0,.08); --blue:#0268a7; --shadow:0 4px 18px rgba(0,0,0,.08); --shadowHover:0 14px 32px rgba(0,0,0,.12); --radius:24px; --headerH:56px; --wrap:1300px; --danger:#d0232a; --warning:#ff8c42; --info:#0268a7; --success:#34c759; /* Logo renk paleti (public/img/palet.jpeg) — henüz kullanılmayan tamamlayıcı tonlar da referans için burada */ --brand-yellow:#fcd200; --brand-teal:#2e627a; } *{box-sizing:border-box} html{scroll-behavior:smooth} body{ margin:0; font-family:-apple-system,BlinkMacSystemFont,"SF Pro Text","Helvetica Neue",Arial,sans-serif; background:var(--bg); color:var(--text); overflow-x:hidden; padding-top:var(--headerH); } a{text-decoration:none;color:inherit} ::selection{background:rgba(2,104,167,.18)} /* Klavye ile gezinmede belirgin, marka mavisiyle uyumlu odak halkası (fare tıklamasında görünmez) */ a:focus-visible,button:focus-visible,[tabindex]:focus-visible{ outline:2px solid var(--blue);outline-offset:3px;border-radius:8px; } .container-wide{max-width:var(--wrap);margin:0 auto;padding:0 24px} .section-block{margin-bottom:56px} .section-block:first-of-type{margin-top:40px} /* ===================== HEADER ===================== */ header{ position:fixed;top:0;left:0;width:100%;height:var(--headerH); background:rgba(255,255,255,.82); backdrop-filter:saturate(180%) blur(20px); -webkit-backdrop-filter:saturate(180%) blur(20px); border-bottom:1px solid rgba(0,0,0,.06); z-index:9999; } .header-inner{ max-width:1200px;height:var(--headerH);margin:0 auto;padding:0 20px; display:flex;align-items:center;justify-content:space-between;gap:16px;position:relative; } .logo{display:flex;align-items:center;flex:0 0 auto} .logo img{height:43px;width:auto;display:block;transition:transform .25s ease} #siteHeader.header-scrolled{box-shadow:0 2px 14px rgba(0,0,0,.08)} #siteHeader.header-scrolled .logo img{transform:scale(.88)} nav{flex:1;display:flex;justify-content:center} nav ul{display:flex;list-style:none;gap:6px;align-items:center;justify-content:center;flex-wrap:nowrap;margin:0;padding:0} nav ul li{position:relative} nav ul li>a{ display:block;padding:14px 10px;font-size:13.5px;font-weight:400;color:var(--text); letter-spacing:-.01em;transition:opacity .2s ease;white-space:nowrap; } nav ul li>a:hover,nav ul li>a.is-active{opacity:.58} .header-icons{display:flex;align-items:center;gap:22px;flex:0 0 auto} .header-icons i{font-size:16px;color:var(--text);cursor:pointer;transition:opacity .2s ease} .header-icons i:hover{opacity:.58} .nav-toggle{ display:none;background:none;border:0;font-size:20px;color:var(--text);cursor:pointer; } .mobile-search-link{display:none} .mobile-submenu{display:none} /* ===================== DİL SEÇİCİ ===================== */ .lang-switcher{position:relative} .lang-switcher-btn{ display:flex;align-items:center;gap:5px;background:none;border:0;padding:0; font-size:12.5px;font-weight:600;color:var(--text);cursor:pointer;letter-spacing:.01em; transition:opacity .2s ease; } .lang-switcher-btn:hover{opacity:.58} .lang-switcher-btn i.bi-globe2{font-size:16px} .lang-switcher-caret{font-size:9px;margin-left:-1px} .lang-switcher-menu{ min-width:150px;border:0;border-radius:14px;box-shadow:0 14px 32px rgba(0,0,0,.16); padding:6px;margin-top:14px; } .lang-switcher-menu .dropdown-item{ font-size:13px;font-weight:500;padding:8px 12px;border-radius:9px;color:var(--text); display:flex;align-items:center;gap:6px; } .lang-switcher-menu .dropdown-item:hover,.lang-switcher-menu .dropdown-item:focus{background:#f2f2f4} .lang-switcher-menu .dropdown-item.active{background:#eef5ff;color:var(--blue);font-weight:700} .mega-menu{ position:fixed;left:0;top:var(--headerH);width:100vw; background:rgba(255,255,255,.94); backdrop-filter:saturate(180%) blur(34px); -webkit-backdrop-filter:saturate(180%) blur(34px); border-top:1px solid rgba(0,0,0,.05); opacity:0;visibility:hidden;pointer-events:none;transform:translateY(-8px); transition:opacity .24s cubic-bezier(.28,.11,.32,1),transform .24s cubic-bezier(.28,.11,.32,1),visibility .24s; padding:44px 0 50px;box-shadow:0 30px 60px rgba(0,0,0,.08); } /* Açma/kapama header.js'te (fare için kısa kapanma gecikmesi + menüler arası anında geçiş); klavye için focus-within */ nav ul li.is-mega-open .mega-menu,nav ul li:focus-within .mega-menu{ opacity:1;visibility:visible;pointer-events:auto;transform:translateY(0); } #mainNav.mega-switching .mega-menu{transition:none} /* Masaüstü: butonlar arasında boşluk yok (aralık padding ile) ve her buton header'ın tam yüksekliğini kaplar; fare butonlar arasında ya da butondan alt menüye inerken "ölü" bir boşluktan geçip menüyü kapatmaz. */ @media (min-width:992px){ #mainNav{align-self:stretch} #mainNavList{gap:0;height:100%;align-items:stretch} #mainNavList>li{display:flex} #mainNavList>li>a{display:flex;align-items:center;padding:0 13px} } /* Header açıkken sayfanın geri kalanına Apple tarzı buzlu cam/blur efekti */ .mega-backdrop{ position:fixed;top:var(--headerH);left:0;right:0;bottom:0; background:rgba(255,255,255,.5); backdrop-filter:blur(16px) saturate(120%);-webkit-backdrop-filter:blur(16px) saturate(120%); opacity:0;visibility:hidden;pointer-events:none; transition:opacity .3s ease,visibility .3s ease; z-index:9997; } body.mega-backdrop-active .mega-backdrop{opacity:1;visibility:visible} .mega-inner{max-width:1040px;margin:0 auto;padding:0 24px;align-items:flex-start} /* 3 kolonlu mega menü: kolon 1 büyük/kalın (mevcut davranış), kolon 2-3 daha küçük fontlu */ .mega-inner.mega-split{display:flex;justify-content:flex-start;gap:64px;flex-wrap:wrap} .mega-col{display:flex;flex-direction:column;gap:2px;min-width:180px;position:relative} .mega-col:nth-child(2)::before{ content:"";position:absolute;left:-32px;top:2px;bottom:2px;width:1px;background:rgba(0,0,0,.12); } .mega-col-label{ font-size:11px;font-weight:600;color:#86868b;text-transform:uppercase; letter-spacing:.02em;margin-bottom:10px;cursor:default; } .mega-col-primary{min-width:260px} .mega-col-primary a{ display:block;font-size:24px;font-weight:700;letter-spacing:-.6px;color:var(--text); padding:8px 0;transition:opacity .2s ease; } .mega-col-primary a:hover{opacity:.55} .mega-col-secondary a{ display:block;font-size:13px;font-weight:700;letter-spacing:-.01em;color:var(--text); line-height:1.9;padding:1px 0;transition:opacity .15s ease; } .mega-col-secondary a:hover{opacity:.58} /* ===================== SHARED CARD ===================== */ .panel-card{ background:var(--card);border-radius:var(--radius);box-shadow:var(--shadow); padding:28px;transition:box-shadow .3s ease;height:100%; } .panel-title{font-size:22px;font-weight:700;letter-spacing:-.6px;margin:0 0 18px} .panel-title-row{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:18px} .panel-title-row .panel-title{margin-bottom:0} .panel-link{font-size:12.5px;font-weight:600;color:var(--blue);white-space:nowrap} .panel-link:hover{opacity:.7} /* ===================== GÜNDEM: HABER VİTRİNİ + BAŞKAN KARTI ===================== */ .agenda-section{margin-top:48px} .agenda-grid{display:grid;grid-template-columns:minmax(0,1fr) 380px;gap:24px;align-items:stretch} .news-feature{position:relative;border-radius:28px;overflow:hidden;box-shadow:var(--shadow);height:500px;background:#16303d} .news-feature .carousel-inner,.news-feature .carousel-item{height:100%} .news-feature .carousel-item img{width:100%;height:100%;object-fit:cover;transform:scale(1.04);transition:transform 6s ease} .news-feature .carousel-item.active img{transform:scale(1)} .news-feature .carousel-item::after{ content:"";position:absolute;inset:0;pointer-events:none; background:linear-gradient(to top,rgba(8,16,22,.86) 0%,rgba(8,16,22,.45) 42%,rgba(8,16,22,0) 72%); } .news-feature-caption{position:absolute;left:44px;right:220px;bottom:46px;z-index:1;color:#fff} .news-feature-caption h2{ font-size:34px;font-weight:700;letter-spacing:-1px;line-height:1.12;margin:0 0 12px;text-shadow:0 2px 16px rgba(0,0,0,.25); display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden; } .news-feature-date{display:inline-block;font-size:12.5px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--brand-yellow);margin-bottom:10px} .news-feature-caption p{ font-size:16px;line-height:1.55;color:rgba(255,255,255,.84);margin:0 0 18px;max-width:620px; display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden; } .news-feature-more{ display:inline-flex;align-items:center;gap:8px;font-size:13.5px;font-weight:600;color:var(--text); background:#fff;padding:9px 18px;border-radius:980px;transition:transform .2s ease,background .2s ease; } .news-feature-more:hover{color:var(--text);background:var(--brand-yellow);transform:translateX(3px)} .news-feature-chip{ position:absolute;top:22px;left:24px;z-index:2;display:inline-flex;align-items:center;gap:7px; padding:7px 14px;border-radius:980px;font-size:12px;font-weight:700;letter-spacing:.02em;color:#fff; background:rgba(255,255,255,.16);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px); } .news-feature-chip i{color:var(--brand-yellow)} .news-feature-controls{position:absolute;right:28px;bottom:46px;z-index:2;display:flex;align-items:center;gap:10px} .news-feature-counter{font-size:13px;font-weight:600;color:rgba(255,255,255,.7);font-variant-numeric:tabular-nums;margin-right:6px} .news-feature-counter strong{color:#fff;font-size:22px;font-weight:700;letter-spacing:-.5px} .news-feature-nav{ width:44px;height:44px;border-radius:50%;border:0;display:flex;align-items:center;justify-content:center; color:#fff;font-size:17px;cursor:pointer;background:rgba(255,255,255,.16); backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);transition:background .2s ease,color .2s ease; } .news-feature-nav:hover{background:#fff;color:var(--text)} .news-feature-progress{position:absolute;left:0;right:0;bottom:0;height:4px;z-index:2;background:rgba(255,255,255,.14)} .news-feature-progress span{display:block;height:100%;width:0;background:var(--brand-yellow)} .news-feature-progress span.is-running{animation:newsProgress var(--news-interval,6000ms) linear forwards} @keyframes newsProgress{from{width:0}to{width:100%}} /* Başkan kartı: şeffaf arka planlı portre sağ altta, mesaj alıntısı solda */ .president-card{ position:relative;overflow:hidden;border-radius:28px;height:500px;display:flex;flex-direction:column; padding:30px 30px 28px;color:var(--text);box-shadow:var(--shadow); background: radial-gradient(120% 70% at 100% 100%,rgba(46,98,122,.22) 0%,rgba(46,98,122,0) 60%), linear-gradient(160deg,#ffffff 0%,#eef3f6 100%); transition:transform .3s ease,box-shadow .3s ease; } .president-card:hover{color:var(--text);transform:translateY(-4px);box-shadow:var(--shadowHover)} .president-card-label{ align-self:flex-start;display:inline-flex;align-items:center;gap:7px;font-size:11.5px;font-weight:700; letter-spacing:.06em;text-transform:uppercase;color:var(--brand-teal); background:rgba(46,98,122,.1);padding:6px 12px;border-radius:980px; } .president-card-quote{font-size:44px;line-height:1;color:#b3c2cb;margin:18px 0 4px} .president-card-excerpt{ position:relative;z-index:1;font-size:16px;line-height:1.6;font-weight:500;letter-spacing:-.1px;margin:0; display:-webkit-box;-webkit-line-clamp:5;-webkit-box-orient:vertical;overflow:hidden; } .president-card-sign{position:relative;z-index:1;margin-top:auto;padding-top:20px;max-width:52%} .president-card-name{font-size:19px;font-weight:700;letter-spacing:-.4px;line-height:1.2} .president-card-role{font-size:12.5px;color:var(--muted);margin:3px 0 14px} .president-card-link{display:inline-flex;align-items:center;gap:6px;font-size:13px;font-weight:600;color:var(--blue)} .president-card-link i{transition:transform .2s ease} .president-card:hover .president-card-link i{transform:translateX(4px)} .president-card-photo{ position:absolute;right:-28px;bottom:0;width:66%;aspect-ratio:1/1;pointer-events:none; object-fit:contain;object-position:bottom;filter:drop-shadow(0 18px 30px rgba(8,22,31,.18)); } .president-card-photo-fallback{ position:absolute;right:28px;bottom:28px;width:96px;height:96px;border-radius:50%; display:flex;align-items:center;justify-content:center;font-size:44px;color:#a5a5aa;background:#e5e5ea; } /* ===================== SPLIT ROWS (70/30, 60/40, 50/50) ===================== */ .split-row{display:flex;gap:24px;align-items:stretch} .col-70{flex:0 0 calc(70% - 12px);max-width:calc(70% - 12px)} .col-60{flex:0 0 calc(60% - 12px);max-width:calc(60% - 12px)} .col-40{flex:0 0 calc(40% - 12px);max-width:calc(40% - 12px)} .col-30{flex:0 0 calc(30% - 12px);max-width:calc(30% - 12px)} .col-50{flex:0 0 calc(50% - 12px);max-width:calc(50% - 12px)} .col-80{flex:0 0 calc(80% - 12px);max-width:calc(80% - 12px)} .col-20{flex:0 0 calc(20% - 12px);max-width:calc(20% - 12px)} /* ===================== SIZE NASIL YARDIMCI OLABİLİRİZ? (bento yönlendirme) ===================== */ .help-head{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;margin-bottom:24px} .help-eyebrow{ display:inline-flex;align-items:center;gap:10px;font-size:12px;font-weight:700;letter-spacing:.14em; text-transform:uppercase;color:var(--brand-teal);margin-bottom:10px; } .help-eyebrow::before{content:"";width:24px;height:2px;border-radius:2px;background:var(--brand-yellow)} .help-title{font-size:36px;font-weight:700;letter-spacing:-1.2px;line-height:1.1;margin:0 0 8px} .help-subtitle{font-size:15.5px;color:var(--muted);margin:0} .help-contact-link{ flex:0 0 auto;display:inline-flex;align-items:center;gap:12px;padding:10px 18px 10px 10px;border-radius:980px; background:var(--card);box-shadow:var(--shadow);transition:transform .25s ease,box-shadow .25s ease; } .help-contact-link:hover{color:inherit;transform:translateY(-2px);box-shadow:var(--shadowHover)} .help-contact-icon{ width:40px;height:40px;border-radius:50%;display:flex;align-items:center;justify-content:center; background:var(--brand-yellow);color:var(--text);font-size:17px; } .help-contact-link small{display:block;font-size:11.5px;color:var(--muted);line-height:1.2} .help-contact-link strong{display:block;font-size:14px;font-weight:700;letter-spacing:-.2px} .help-contact-link>i{font-size:15px;color:var(--blue);transition:transform .2s ease} .help-contact-link:hover>i{transform:translateX(3px)} .help-grid{display:grid;grid-template-columns:1.3fr 1fr 1fr;grid-auto-rows:176px;gap:16px} .help-card{ --hc:var(--blue);--hc-bg:rgba(2,104,167,.1); position:relative;overflow:hidden;isolation:isolate;display:flex;flex-direction:column; padding:22px 22px 20px;border-radius:24px;background:var(--card);box-shadow:var(--shadow);color:var(--text); transition:transform .35s cubic-bezier(.28,.11,.32,1),box-shadow .35s ease; } .help-card:nth-child(5n+2){--hc:var(--brand-teal);--hc-bg:rgba(46,98,122,.12)} .help-card:nth-child(5n+3){--hc:#9a7b00;--hc-bg:rgba(252,210,0,.22)} .help-card:nth-child(5n+4){--hc:var(--danger);--hc-bg:rgba(208,35,42,.1)} .help-card:nth-child(5n+5){--hc:#6c4bd8;--hc-bg:rgba(108,75,216,.1)} .help-card:hover{color:var(--text);transform:translateY(-5px);box-shadow:0 22px 44px rgba(8,22,31,.14)} /* Alt kenarda kartın renginde dolan çizgi */ .help-card::after{ content:"";position:absolute;left:0;bottom:0;height:4px;width:100%;background:var(--hc); transform:scaleX(0);transform-origin:left;transition:transform .45s cubic-bezier(.28,.11,.32,1); } .help-card:hover::after{transform:scaleX(1)} .help-card-icon{ width:48px;height:48px;border-radius:15px;display:flex;align-items:center;justify-content:center; font-size:21px;color:var(--hc);background:var(--hc-bg);margin-bottom:auto; transition:background .3s ease,color .3s ease,transform .35s cubic-bezier(.28,.11,.32,1); } .help-card:hover .help-card-icon{background:var(--hc);color:#fff;transform:rotate(-6deg) scale(1.05)} .help-card-watermark{ position:absolute;right:-18px;bottom:-26px;z-index:-1;font-size:128px;line-height:1;color:var(--hc);opacity:.06; transition:transform .6s cubic-bezier(.28,.11,.32,1),opacity .4s ease; } .help-card:hover .help-card-watermark{transform:rotate(-10deg) scale(1.12);opacity:.12} .help-card-arrow{ position:absolute;top:20px;right:20px;width:36px;height:36px;border-radius:50%; display:flex;align-items:center;justify-content:center;font-size:15px;color:var(--hc); border:1px solid var(--line);transition:background .3s ease,color .3s ease,border-color .3s ease,transform .3s ease; } .help-card:hover .help-card-arrow{background:var(--hc);border-color:var(--hc);color:#fff;transform:rotate(-45deg)} .help-card h3{font-size:17px;font-weight:700;letter-spacing:-.4px;line-height:1.25;margin:14px 0 4px;padding-right:8px} .help-card p{ font-size:13px;line-height:1.5;color:var(--muted);margin:0; display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden; } /* İlk kart: iki satır boyunca uzanan, koyu zeminli öne çıkan kart */ .help-card.is-featured{ grid-row:span 2;padding:30px;color:#fff; background: radial-gradient(90% 70% at 100% 0%,rgba(252,210,0,.22) 0%,rgba(252,210,0,0) 60%), linear-gradient(150deg,#1d4a5e 0%,#16303d 60%,#0f2230 100%); } .help-card.is-featured:hover{color:#fff} .help-card.is-featured::after{background:var(--brand-yellow)} .help-card.is-featured .help-card-icon{width:58px;height:58px;font-size:26px;border-radius:18px;color:var(--text);background:var(--brand-yellow)} .help-card.is-featured:hover .help-card-icon{background:#fff;color:var(--text)} .help-card.is-featured .help-card-watermark{font-size:240px;right:-40px;bottom:-50px;color:#fff;opacity:.07} .help-card.is-featured:hover .help-card-watermark{opacity:.11} .help-card.is-featured h3{font-size:28px;letter-spacing:-.9px;margin:0 0 10px;max-width:90%} .help-card.is-featured p{font-size:15px;color:rgba(255,255,255,.78);-webkit-line-clamp:3;max-width:88%} .help-card.is-featured .help-card-arrow{display:none} .help-card-cta{ align-self:flex-start;display:inline-flex;align-items:center;gap:8px;margin-top:20px;padding:10px 18px;border-radius:980px; font-size:13.5px;font-weight:600;color:var(--text);background:#fff;transition:background .25s ease,gap .25s ease; } .help-card.is-featured:hover .help-card-cta{background:var(--brand-yellow);gap:12px} .help-card.is-featured .help-card-body{margin-top:auto} /* 4 kartta son kart, 3 kartta son iki kart alt/üst satırı tam doldurur */ .help-card:nth-child(4):last-child{grid-column:span 2} .help-card:nth-child(2):nth-last-child(2),.help-card:nth-child(3):last-child{grid-column:span 2} /* Kaydırınca belirme: başlık önce, kartlar --i sırasına göre 90ms arayla */ .help-section.reveal-ready .help-head,.help-section.reveal-ready .help-card{opacity:0;transform:translateY(32px)} .help-section.reveal-ready .help-head{transition:opacity .6s ease,transform .7s cubic-bezier(.22,.61,.36,1)} .help-section.reveal-ready .help-card{ transition:opacity .6s ease,transform .7s cubic-bezier(.22,.61,.36,1); transition-delay:calc(var(--i,0) * 90ms); } .help-section.is-revealed .help-head,.help-section.is-revealed .help-card{opacity:1;transform:none} @media (max-width:991px){ .help-grid{grid-template-columns:1fr 1fr;grid-auto-rows:minmax(168px,auto)} .help-card.is-featured{grid-row:auto;grid-column:span 2;min-height:250px} .help-card:nth-child(4):last-child,.help-card:nth-child(2):nth-last-child(2),.help-card:nth-child(3):last-child{grid-column:auto} .help-card:nth-child(even):last-child{grid-column:span 2} } @media (max-width:767px){ .help-head{flex-direction:column;align-items:flex-start;gap:16px;margin-bottom:18px} .help-title{font-size:28px;letter-spacing:-.8px} .help-subtitle{font-size:14.5px} .help-grid{gap:12px;grid-auto-rows:minmax(150px,auto)} .help-card{padding:18px;border-radius:20px} .help-card-icon{width:42px;height:42px;font-size:18px;border-radius:13px} .help-card-arrow{top:16px;right:16px;width:30px;height:30px;font-size:13px} .help-card h3{font-size:15px} .help-card p{display:none} .help-card.is-featured{padding:24px;min-height:230px} .help-card.is-featured h3{font-size:23px} .help-card.is-featured p{display:-webkit-box;font-size:14px} .help-card-watermark{font-size:96px} } /* ===================== ANNOUNCEMENTS ===================== */ .announcements-panel{display:flex;flex-direction:column} .announcements-scroll{ overflow-y:auto;max-height:470px;padding-right:6px;margin-right:-6px; display:flex;flex-direction:column;gap:8px; } .announcements-scroll::-webkit-scrollbar{width:6px} .announcements-scroll::-webkit-scrollbar-thumb{background:rgba(0,0,0,.15);border-radius:980px} .announcements-scroll::-webkit-scrollbar-track{background:transparent} .announcements-scroll .skeleton-announcement{margin-bottom:0;height:62px;flex:0 0 auto} /* Ana sayfa duyuru satırı: tarih kutusu + tek satır başlık/özet + sağda ok; satırın tamamı tıklanır */ .ann-row{ position:relative;flex:0 0 auto;display:flex;align-items:center;gap:14px;padding:10px 12px 10px 16px;border-radius:14px; background:#f7f8fa;transition:background .2s ease,transform .2s ease; } .ann-row::before{ content:"";position:absolute;left:0;top:12px;bottom:12px;width:3px;border-radius:0 3px 3px 0;background:var(--info); } .ann-row.is-important::before{background:var(--danger)} .ann-row:hover{background:#eef5ff} .ann-row.is-important:hover{background:#fdf0f0} .ann-row-date{ flex:0 0 52px;height:44px;border-radius:11px;background:var(--card);box-shadow:0 1px 3px rgba(0,0,0,.06); display:flex;flex-direction:column;align-items:center;justify-content:center;line-height:1; } .ann-row-date strong{font-size:16px;font-weight:700;letter-spacing:-.4px;color:var(--text)} .ann-row-date small{font-size:9.5px;font-weight:600;color:var(--muted);text-transform:uppercase;letter-spacing:.02em;margin-top:3px;white-space:nowrap} .ann-row.is-important .ann-row-date strong{color:var(--danger)} .ann-row-thumb{flex:0 0 44px;width:44px;height:44px;border-radius:10px;overflow:hidden;background:#e5e5e7} .ann-row-thumb img{width:100%;height:100%;object-fit:cover;display:block} .ann-row-body{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px} .ann-row-title{ display:flex;align-items:center;gap:8px;font-size:14.5px;font-weight:700;letter-spacing:-.2px;color:var(--text); white-space:nowrap;overflow:hidden;text-overflow:ellipsis; } .ann-row-title .announcement-badge{flex:0 0 auto} .ann-row-text{font-size:13px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .ann-row-link{ flex:0 0 34px;width:34px;height:34px;border-radius:50%;display:flex;align-items:center;justify-content:center; font-size:15px;color:var(--blue);background:var(--card);transition:background .2s ease,color .2s ease,transform .2s ease; } .ann-row-link::after{content:"";position:absolute;inset:0;border-radius:14px} .ann-row:hover .ann-row-link{background:var(--blue);color:#fff;transform:translateX(2px)} .ann-row.is-important:hover .ann-row-link{background:var(--danger)} .ann-row-link:hover{opacity:1} @media (max-width:767px){ .announcements-panel{padding:22px 16px} .ann-row{gap:10px;padding:10px 10px 10px 14px} .ann-row-date{flex-basis:48px} .ann-row-title{ display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;white-space:normal; font-size:14px;line-height:1.3; } .ann-row-title .announcement-badge{margin-right:6px;vertical-align:1px} .ann-row-text{display:none} .ann-row-link{flex-basis:30px;width:30px;height:30px;font-size:13px} } .announcement-item{ display:flex;align-items:flex-start;gap:16px;padding:16px 16px 16px 18px;border-radius:16px; position:relative;transition:background .2s ease,box-shadow .2s ease,transform .2s ease; border-left:5px solid var(--info);background:#fafafa; } .announcement-item:hover{background:#eef5ff} .announcement-item.is-important{border-left-color:var(--danger)} .announcement-body{flex:1;min-width:0} .announcement-meta{display:flex;align-items:center;flex-wrap:wrap;gap:8px;margin-bottom:4px} .announcement-date{font-size:11px;color:var(--muted);font-weight:600;text-transform:uppercase;letter-spacing:.02em;margin-bottom:4px} .announcement-meta .announcement-date{margin-bottom:0} .announcement-badge{ display:inline-flex;align-items:center;font-size:10px;font-weight:700;text-transform:uppercase; letter-spacing:.04em;padding:2px 8px;border-radius:980px;background:rgba(208,35,42,.1);color:var(--danger); } .announcement-attachment{font-size:13px;color:var(--muted);line-height:1} .announcement-title{ font-size:15px;font-weight:700;letter-spacing:-.2px;margin-bottom:6px;line-height:1.35; display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden; } .announcement-text{ font-size:13.5px;color:#555;line-height:1.6;margin-bottom:8px; display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden; } .announcement-item.has-image .announcement-text{-webkit-line-clamp:2} .announcement-link{font-size:12.5px;color:var(--blue);font-weight:600} .announcement-link:hover{opacity:.7} /* Duyuru görseli (isteğe bağlı) — kartın solunda kare küçük görsel */ .announcement-thumb{ flex:0 0 96px;width:96px;height:96px;border-radius:12px;overflow:hidden; background:#e5e5e7;display:block; } .announcement-thumb img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .35s ease} .announcement-item:hover .announcement-thumb img{transform:scale(1.05)} /* ===================== BAŞKANLIK (kurumsal sayfa, prestijli koyu lacivert bant) ===================== */ /* Kurumsal sayfanın üstü (sayfa yolu + başlık + Başkanlık) tek bir lacivert alan */ .kurumsal-top{ position:relative;overflow:hidden;color:#fff;isolation:isolate; background: radial-gradient(60% 50% at 85% 30%,rgba(80,140,210,.28) 0%,rgba(80,140,210,0) 60%), radial-gradient(50% 50% at 0% 100%,rgba(46,98,122,.45) 0%,rgba(46,98,122,0) 60%), linear-gradient(160deg,#0a1b33 0%,#12325c 55%,#0d2443 100%); } /* Arkada büyük, çok soluk Oda logosu — kendi renkleriyle, tam haliyle */ .kurumsal-top::before{ content:"";position:absolute;right:-140px;top:120px;width:620px;height:620px;z-index:-1;pointer-events:none; background:url('/img/logo.svg') center/contain no-repeat;opacity:.07; } .kurumsal-top nav.breadcrumb-bar{border-bottom-color:rgba(255,255,255,.1)} .kurumsal-top .breadcrumb-bar .container-wide,.kurumsal-top .breadcrumb-bar a{color:rgba(255,255,255,.62)} .kurumsal-top .breadcrumb-bar a:hover{color:#fff} .kurumsal-top .breadcrumb-bar .breadcrumb-current{color:#fff} .kurumsal-top .page-hero{margin:0;padding:48px 0 8px} .kurumsal-top .page-hero h1{color:#fff} .kurumsal-top .page-hero p{color:rgba(255,255,255,.72)} .president-feature{position:relative;margin:0;padding:56px 0 96px;color:#fff} .president-feature-inner{display:grid;grid-template-columns:minmax(260px,400px) minmax(0,1fr);gap:80px;align-items:center} .president-feature-portrait{position:relative;margin:0;align-self:start} .president-feature-frame{ position:absolute;inset:0;transform:translate(22px,22px);border-radius:30px;z-index:-1; border:1.5px solid rgba(255,255,255,.22); } .president-feature-photo{ aspect-ratio:3/4;border-radius:30px;overflow:hidden;background:rgba(255,255,255,.06); box-shadow:0 40px 80px rgba(0,0,0,.45);display:flex;align-items:center;justify-content:center; } .president-feature-photo img{width:100%;height:100%;object-fit:cover;display:block} .president-feature-photo i{font-size:120px;color:rgba(255,255,255,.25)} .president-feature-plate{ position:absolute;left:24px;right:24px;bottom:-28px;padding:16px 20px;border-radius:18px; background:rgba(255,255,255,.96);color:var(--text);box-shadow:0 18px 40px rgba(0,0,0,.25); display:flex;flex-direction:column;gap:2px; } .president-feature-plate strong{font-size:18px;font-weight:700;letter-spacing:-.3px} .president-feature-plate span{font-size:12.5px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--brand-teal)} .president-feature-content{max-width:680px} .president-feature-eyebrow{ display:inline-flex;align-items:center;gap:10px;font-size:12px;font-weight:700;letter-spacing:.18em; text-transform:uppercase;color:#b3c2cb; } .president-feature-eyebrow::before{content:"";width:32px;height:1.5px;background:#b3c2cb} .president-feature-heading{font-size:44px;font-weight:700;letter-spacing:-1.4px;line-height:1.1;margin:14px 0 30px;color:#fff} .president-feature-lead{ position:relative;margin:0 0 28px;padding-left:0;border:0; font-family:'Playfair Display',Georgia,'Times New Roman',serif;font-style:italic;font-weight:400; font-size:26px;line-height:1.5;color:#fff; } .president-feature-lead::before{ content:"\201C";position:absolute;left:-6px;top:-62px;z-index:-1; font-family:'Playfair Display',Georgia,serif;font-style:normal;font-size:160px;line-height:1;color:rgba(179,194,203,.18); } .president-feature-message{font-size:16.5px;line-height:1.85;color:rgba(255,255,255,.8)} .president-feature-message p{margin:0 0 1em} .president-feature-message h2,.president-feature-message h3{color:#fff;font-weight:700;letter-spacing:-.4px;margin:1.4em 0 .5em} .president-feature-message h2{font-size:22px} .president-feature-message h3{font-size:19px} .president-feature-message strong{color:#fff} .president-feature-message a{color:#9cc8f0;text-decoration:underline;text-underline-offset:3px} .president-feature-message ul,.president-feature-message ol{padding-left:1.3em;margin:0 0 1em} .president-feature-message blockquote{margin:1.2em 0;padding:4px 0 4px 18px;border-left:2px solid rgba(179,194,203,.5);color:#fff;font-style:italic} .president-feature-message img{max-width:100%;height:auto;border-radius:14px;margin:1em 0} .president-feature-message .ql-align-center{text-align:center} .president-feature-message .ql-align-right{text-align:right} .president-feature-message .ql-align-justify{text-align:justify} .president-feature-sign{display:flex;flex-direction:column;gap:4px;margin-top:30px;padding-top:24px;border-top:1px solid rgba(255,255,255,.14)} .president-feature-signature{font-family:'Playfair Display',Georgia,serif;font-style:italic;font-weight:500;font-size:30px;line-height:1.2;color:#fff} .president-feature-sign-title{font-size:12.5px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:#b3c2cb} .president-feature-links{display:flex;flex-wrap:wrap;gap:10px;margin-top:30px} .president-feature-links a,.president-feature-links button{ display:inline-flex;align-items:center;gap:8px;padding:9px 18px;border-radius:980px;font-size:13.5px;font-weight:600;color:#fff;cursor:pointer; background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.18);transition:background .2s ease,border-color .2s ease; } .president-feature-links a:hover,.president-feature-links button:hover{color:#fff;background:rgba(255,255,255,.2);border-color:rgba(255,255,255,.32)} .president-feature-links [hidden]{display:none} /* Başkan Özgeçmişi / Faaliyetleri popup'ı: lacivert başlık, okunaklı zengin içerik gövdesi */ .president-popup .modal-content{border:0;border-radius:24px;overflow:hidden;box-shadow:0 40px 90px rgba(8,22,31,.35)} /* modal-lg (800px) yerine biraz daha geniş */ @media (min-width:992px){.president-popup .modal-dialog{max-width:960px}} .president-popup-head{ position:relative;display:flex;align-items:center;gap:16px;padding:24px 72px 24px 28px;color:#fff; background:linear-gradient(135deg,#0a1b33 0%,#12325c 60%,#0d2443 100%); } .president-popup-avatar{ flex:0 0 64px;width:64px;height:64px;border-radius:50%;overflow:hidden;display:flex;align-items:center;justify-content:center; background:rgba(255,255,255,.1);box-shadow:0 0 0 3px rgba(255,255,255,.2);font-size:28px;color:rgba(255,255,255,.5); } .president-popup-avatar img{width:100%;height:100%;object-fit:cover} .president-popup-title{margin:0;font-weight:700;font-size:24px;letter-spacing:-.6px;line-height:1.2} .president-popup-name{font-size:12.5px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:#b3c2cb} .president-popup-close{ position:absolute;top:20px;right:20px;width:40px;height:40px;border:0;border-radius:50%;cursor:pointer; display:flex;align-items:center;justify-content:center;color:#fff;font-size:16px;background:rgba(255,255,255,.12); transition:background .2s ease; } .president-popup-close:hover{background:rgba(255,255,255,.24)} .president-popup .president-popup-body{padding:30px 34px 34px;font-size:16px;line-height:1.8;color:#2c2a2b} .president-popup-body p{margin:0 0 1em} @media (max-width:575px){ .president-popup-head{padding:20px 64px 20px 20px;gap:12px} .president-popup-avatar{flex-basis:48px;width:48px;height:48px} .president-popup-title{font-size:21px} .president-popup .president-popup-body{padding:22px 20px 26px;font-size:15px} } .board-after-president{margin-top:56px} .board-after-president .board-under-president{margin-top:0} @media (max-width:991px){ .president-feature{padding:40px 0 72px} .president-feature-inner{grid-template-columns:1fr;gap:72px} .president-feature-portrait{width:min(340px,80%);justify-self:center} .president-feature-heading{font-size:36px} .kurumsal-top::before{width:420px;height:420px;right:-160px;top:160px} } @media (max-width:575px){ .president-feature{padding:32px 0 56px} .kurumsal-top .page-hero{padding-top:32px} .president-feature-frame{transform:translate(14px,14px);border-radius:24px} .president-feature-photo{border-radius:24px} .president-feature-plate{left:14px;right:14px;bottom:-24px;padding:12px 16px} .president-feature-heading{font-size:30px;margin-bottom:22px} .president-feature-lead{font-size:21px} .president-feature-lead::before{font-size:120px;top:-46px} .president-feature-message{font-size:15.5px} .president-feature-signature{font-size:26px} } /* ===================== CALENDAR ===================== */ /* Sabit yükseklik: ızgara her zaman 6 hafta çizilir, ay değişse de panel boyu sabit kalır */ .calendar-panel{padding:28px;height:500px;display:flex;flex-direction:column} .calendar-nav{display:flex;align-items:center;justify-content:space-between;margin-bottom:18px;flex:0 0 auto} .calendar-nav-center{display:flex;align-items:center;gap:10px} .calendar-title{font-size:20px;font-weight:700;letter-spacing:-.4px;margin:0} .calendar-today-btn{ border:0;background:rgba(2,104,167,.1);color:var(--blue);font-size:11.5px;font-weight:700; padding:4px 11px;border-radius:980px;cursor:pointer;transition:background .2s ease; } .calendar-today-btn:hover{background:rgba(2,104,167,.18)} .calendar-today-btn[hidden]{display:none} .calendar-nav-btn{ width:34px;height:34px;flex:0 0 auto;border-radius:50%;border:1px solid var(--line); background:#fff;display:flex;align-items:center;justify-content:center;cursor:pointer; font-size:14px;color:var(--text);transition:background .2s ease,border-color .2s ease,transform .15s ease; } .calendar-nav-btn:hover{background:#edf1f4;border-color:rgba(0,0,0,.16)} .calendar-nav-btn:active{transform:scale(.92)} .calendar-weekdays{display:grid;grid-template-columns:repeat(7,1fr);text-align:center;margin-bottom:8px;flex:0 0 auto} .calendar-weekdays span{font-size:11px;font-weight:600;color:var(--muted);text-transform:uppercase;letter-spacing:.02em} .calendar-weekdays span:nth-child(n+6){color:#a5a5aa} .calendar-grid{ display:grid;grid-template-columns:repeat(7,1fr);grid-template-rows:repeat(6,1fr);gap:4px; justify-items:center;align-items:center;user-select:none;flex:1;min-height:0; } .calendar-grid.slide-next{animation:calendarSlideNext .24s ease} .calendar-grid.slide-prev{animation:calendarSlidePrev .24s ease} @keyframes calendarSlideNext{from{opacity:0;transform:translateX(16px)}to{opacity:1;transform:none}} @keyframes calendarSlidePrev{from{opacity:0;transform:translateX(-16px)}to{opacity:1;transform:none}} .calendar-day{ width:100%;max-width:44px;aspect-ratio:1/1;border-radius:12px;border:0;padding:0;background:none; display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px; font:inherit;font-size:13.5px;color:var(--text);position:relative; transition:background .18s ease,transform .18s ease,color .18s ease,box-shadow .18s ease; } .calendar-day.is-weekend{color:#8e8e93} .calendar-day.is-outside{color:#c7c7cc} .calendar-day-num{line-height:1} .calendar-day-dots{display:flex;gap:3px;height:5px} .calendar-dot{display:inline-block;width:5px;height:5px;border-radius:50%;background:var(--info)} .calendar-dot.is-special{background:var(--danger)} /* Kaydı olan günler tıklanabilir: hafif zemin + nokta göstergesi */ .calendar-day.has-items{cursor:pointer;font-weight:700;color:var(--text);background:rgba(2,104,167,.07)} .calendar-day.has-items.is-special{background:rgba(208,35,42,.07)} .calendar-day.has-items:hover{background:rgba(2,104,167,.15);transform:translateY(-2px)} .calendar-day.has-items.is-special:hover{background:rgba(208,35,42,.14)} .calendar-day.is-today{background:var(--blue);color:#fff;font-weight:700;box-shadow:0 4px 12px rgba(2,104,167,.32)} .calendar-day.is-today.has-items:hover{background:var(--blue)} .calendar-day.is-today .calendar-dot{background:#fff} .calendar-day.is-today .calendar-dot.is-special{background:#ffc9cc} /* Gün üzerine gelince o günün kayıtlarını gösteren ipucu */ .calendar-day[data-tooltip]:hover::after, .calendar-day[data-tooltip]:focus-visible::after{ content:attr(data-tooltip);position:absolute;bottom:calc(100% + 8px);left:50%;transform:translateX(-50%); width:max-content;max-width:220px;white-space:pre-line;text-align:left; background:var(--text);color:#fff;font-size:11.5px;font-weight:500;line-height:1.45; padding:7px 10px;border-radius:9px;box-shadow:var(--shadowHover);z-index:20;pointer-events:none; } .calendar-legend{ display:flex;justify-content:center;flex-wrap:wrap;gap:6px 18px;flex:0 0 auto; margin-top:12px;padding-top:12px;border-top:1px solid var(--line);font-size:12px;color:var(--muted); } .calendar-legend>span{display:inline-flex;align-items:center;gap:6px} .calendar-legend .calendar-dot{width:7px;height:7px} .calendar-legend-today{display:inline-block;width:11px;height:11px;border-radius:4px;background:var(--blue)} /* ===================== BU AYKİ ETKİNLİKLER ===================== */ .calendar-events-panel{height:500px;display:flex;flex-direction:column} .calendar-events-panel .panel-title-row{flex:0 0 auto} .calendar-events-count{ min-width:26px;height:26px;padding:0 8px;border-radius:980px;background:rgba(2,104,167,.1);color:var(--blue); font-size:12.5px;font-weight:700;display:inline-flex;align-items:center;justify-content:center; } .calendar-events-count[hidden]{display:none} .calendar-events-list{display:flex;flex-direction:column;gap:10px;flex:1;min-height:0;overflow-y:auto;padding-right:4px;position:relative} .calendar-events-list::-webkit-scrollbar{width:6px} .calendar-events-list::-webkit-scrollbar-thumb{background:rgba(0,0,0,.15);border-radius:980px} .calendar-events-list::-webkit-scrollbar-track{background:transparent} .calendar-event-card{ display:flex;align-items:center;gap:14px;width:100%;text-align:left;font:inherit;color:inherit; padding:12px 14px;border:0;border-radius:16px;background:#fafafa;border-left:5px solid var(--info); cursor:pointer;transition:background .2s ease,opacity .2s ease;flex:0 0 auto; } .calendar-event-card:hover{background:#eef5ff} .calendar-event-card.is-special{border-left-color:var(--danger)} .calendar-event-card.is-special:hover{background:#fff1f1} .calendar-event-card.is-past{opacity:.55} .calendar-event-card.is-past:hover{opacity:.85} .calendar-event-card.is-today{background:#eef5ff;box-shadow:inset 0 0 0 1px rgba(2,104,167,.22)} .calendar-event-date{ flex:0 0 48px;height:52px;border-radius:12px;background:#fff;box-shadow:0 1px 4px rgba(0,0,0,.07); display:flex;flex-direction:column;align-items:center;justify-content:center; } .calendar-event-day{font-size:19px;font-weight:700;line-height:1;color:var(--text)} .calendar-event-weekday{font-size:10px;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.03em;margin-top:4px} .calendar-event-info{flex:1;min-width:0;display:block} .calendar-event-top{display:flex;align-items:flex-start;justify-content:space-between;gap:10px} .calendar-event-top strong{ font-size:14px;font-weight:700;min-width:0;line-height:1.35; display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden; } .calendar-event-top .calendar-event-chip{margin-top:1px} .calendar-event-chip{ flex:0 0 auto;font-size:10.5px;font-weight:700;padding:2px 9px;border-radius:980px; background:rgba(2,104,167,.1);color:var(--blue);white-space:nowrap; } .calendar-event-chip.is-today{background:var(--blue);color:#fff} .calendar-event-chip.is-past{background:#ececef;color:var(--muted)} .calendar-event-meta{display:flex;flex-wrap:wrap;gap:3px 14px;margin-top:5px;font-size:12px;color:var(--muted)} .calendar-event-meta i{margin-right:5px} .calendar-event-meta .calendar-event-special{color:var(--danger);font-weight:600} .calendar-events-empty{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;color:var(--muted);padding:24px} .calendar-events-empty i{font-size:34px;color:#c7c7cc;margin-bottom:10px} .calendar-events-empty p{font-size:13.5px;margin:0;max-width:260px} /* Etkinlik penceresi: aynı güne ait birden fazla kayıt alt alta listelenir */ .event-modal-date{color:var(--muted);font-size:13px;font-weight:600;margin-bottom:12px;text-transform:capitalize} .event-modal-items{display:flex;flex-direction:column;gap:12px} .event-modal-item{padding-left:14px;border-left:3px solid var(--info)} .event-modal-item.is-special{border-left-color:var(--danger)} .event-modal-item-title{font-size:15px;font-weight:700;margin:0 0 6px;color:var(--text)} .event-modal-badge{display:inline-flex;align-items:center;gap:5px;font-size:11px;font-weight:700;color:var(--danger);background:rgba(208,35,42,.1);padding:2px 9px;border-radius:980px;margin-bottom:8px} .event-modal-meta{display:flex;flex-wrap:wrap;gap:4px 16px;font-size:13px;font-weight:600;color:var(--blue);margin-bottom:6px} .event-modal-meta i{margin-right:5px} .event-modal-item p{margin:0} /* ===================== MODAL — Bootstrap kalıbını site tasarımıyla uyumlu hale getir ===================== */ /* Sabit header (z-index 9999) popup'ların üstünü örtmesin: popup alanı header'ın altından başlar; ortalama ve kaydırılabilir yükseklik bu alana göre hesaplanır (13" gibi alçak ekranlarda başlık header'ın altına girmez). */ .modal{top:var(--headerH);height:calc(100% - var(--headerH))} .modal-backdrop.show{opacity:1;background:rgba(29,29,31,.45);backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px)} .modal-content{ border:0;border-radius:var(--radius);box-shadow:0 30px 70px rgba(0,0,0,.3);overflow:hidden; } .modal-header{border-bottom:0;padding:26px 28px 12px} .modal-header .modal-title{font-size:19px;font-weight:700;letter-spacing:-.3px;color:var(--text)} .modal-header .btn-close{ background:#f2f2f4 url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='%23231f20' d='M.293.293a1 1 0 0 1 1.414 0L8 6.586 14.293.293a1 1 0 1 1 1.414 1.414L9.414 8l6.293 6.293a1 1 0 0 1-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 0 1-1.414-1.414L6.586 8 .293 1.707a1 1 0 0 1 0-1.414z'/%3e%3c/svg%3e") center/10px no-repeat; width:28px;height:28px;border-radius:50%;opacity:1; } .modal-header .btn-close:hover{background-color:#e5e5ea} .modal-body{padding:8px 28px 26px;font-size:14.5px;line-height:1.7;color:#444} .pdf-modal-dialog{max-width:880px} .pdf-modal-body{padding:0 28px 28px} .pdf-modal-body iframe{width:100%;height:75vh;border:0;border-radius:14px;background:#edf1f4} /* ===================== HIZLI BAĞLANTILAR SÜTUNU (hero yanı: üstte mini başkan kartı, altta 2x2 hızlı bağlantı) ===================== */ /* ===================== HIZLI İŞLEM ŞERİDİ (hero'nun alt kenarına biner) ===================== */ .quick-dock-section{position:relative;z-index:3;margin-top:-62px} .quick-dock{background:var(--card);border-radius:24px;padding:10px;box-shadow:0 20px 50px rgba(8,22,31,.14)} .quick-dock-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(0,1fr));grid-auto-flow:column} /* 4'ten fazla işlem: kartın alt ortasından su damlası gibi sarkan düğme; ek işlemler aşağı doğru açılır */ .quick-dock{position:relative} .quick-dock.has-more{margin-bottom:24px} /* 80px'lik bir daire; üst %70'i kartın içinde kalır (clip-path ile kesilir), yalnızca alttaki %30'luk dilim görünür */ .quick-dock-toggle{ --drop:80px;--drop-hidden:56px; position:absolute;left:50%;top:calc(100% - var(--drop-hidden));transform:translateX(-50%);z-index:2; display:flex;align-items:flex-end;justify-content:center;width:var(--drop);height:var(--drop);padding:0 0 1px;border:0; background:var(--card);border-radius:50%; clip-path:inset(var(--drop-hidden) -24px -24px -24px); box-shadow:0 8px 14px -6px rgba(8,22,31,.25); } .quick-dock-toggle-icon{ display:flex;align-items:center;justify-content:center;width:22px;height:22px;border-radius:50%;font-size:13px; color:#a1a1a6;background:var(--card);transition:transform .35s cubic-bezier(.28,.11,.32,1),color .2s ease; } .quick-dock-toggle:hover .quick-dock-toggle-icon{color:var(--muted);transform:translateY(2px)} .quick-dock.is-open .quick-dock-toggle-icon{transform:rotate(180deg)} .quick-dock.is-open .quick-dock-toggle:hover .quick-dock-toggle-icon{transform:rotate(180deg) translateY(2px)} .quick-dock-toggle .is-open-label,.quick-dock.is-open .quick-dock-toggle .is-closed-label{display:none} .quick-dock.is-open .quick-dock-toggle .is-open-label{display:inline} .quick-dock-extra{display:grid;grid-template-rows:0fr;transition:grid-template-rows .4s cubic-bezier(.28,.11,.32,1)} .quick-dock.is-open .quick-dock-extra{grid-template-rows:1fr} .quick-dock-extra-inner{overflow:hidden;min-height:0} .quick-dock-extra-grid{ display:grid;grid-template-columns:repeat(4,minmax(0,1fr));margin-top:8px;padding-top:8px;border-top:1px solid var(--line); opacity:0;transform:translateY(-6px);transition:opacity .3s ease,transform .3s ease; } .quick-dock.is-open .quick-dock-extra-grid{opacity:1;transform:none} .quick-dock-extra-grid .quick-dock-item:nth-child(4n+1)::before{display:none} .quick-dock-item{ --qa:var(--blue);--qa-bg:rgba(2,104,167,.1); position:relative;display:flex;align-items:center;gap:14px;padding:16px 18px;border-radius:18px;min-width:0; transition:background .25s ease; } .quick-dock-item:nth-child(4n+2){--qa:var(--brand-teal);--qa-bg:rgba(46,98,122,.12)} .quick-dock-item:nth-child(4n+3){--qa:#9a7b00;--qa-bg:rgba(252,210,0,.22)} .quick-dock-item:nth-child(4n+4){--qa:var(--danger);--qa-bg:rgba(208,35,42,.1)} .quick-dock-item+.quick-dock-item::before{ content:"";position:absolute;left:0;top:22%;bottom:22%;width:1px;background:var(--line);transition:opacity .25s ease; } .quick-dock-item:hover{background:var(--qa-bg)} .quick-dock-item:hover::before,.quick-dock-item:hover+.quick-dock-item::before{opacity:0} .quick-dock-icon{ flex:0 0 52px;width:52px;height:52px;border-radius:16px;display:flex;align-items:center;justify-content:center; font-size:22px;color:var(--qa);background:var(--qa-bg);transition:transform .3s cubic-bezier(.28,.11,.32,1),background .25s ease,color .25s ease; } .quick-dock-item:hover .quick-dock-icon{transform:scale(1.08) rotate(-4deg);background:var(--qa);color:#fff} .quick-dock-text{min-width:0;flex:1} .quick-dock-text h3{font-size:15px;font-weight:700;letter-spacing:-.3px;margin:0 0 2px;color:var(--text)} .quick-dock-text p{ font-size:12.5px;line-height:1.4;color:var(--muted);margin:0; display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden; } .quick-dock-arrow{font-size:16px;color:var(--qa);opacity:0;transform:translateX(-6px);transition:opacity .25s ease,transform .25s ease} .quick-dock-item:hover .quick-dock-arrow{opacity:1;transform:none} /* ===================== LISTINGS ===================== */ .listings-title{margin-bottom:20px} .listings-slider .carousel-inner{border-radius:32px;overflow:hidden;box-shadow:var(--shadow);background:#fff} .listing-slide{display:flex;height:360px} /* Slayt yüksekliği sabit: dikey/yatay görseller ve farklı metin uzunlukları ilanlar arasında geçerken kutuyu büyütüp küçültmesin. */ .listing-thumb{flex:0 0 280px;background:#e5e5e7;position:relative;overflow:hidden} .listing-thumb img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover} .listing-body{flex:1;min-width:0;padding:36px 40px;display:flex;flex-direction:column;justify-content:center} .listing-date{font-size:12px;color:var(--muted);font-weight:600;text-transform:uppercase;margin-bottom:10px} .listing-title{ font-size:26px;font-weight:700;letter-spacing:-.8px;margin-bottom:14px;line-height:1.25; display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden; } .listing-text{ font-size:15px;color:#555;line-height:1.7;margin-bottom:0;max-width:560px; display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden; } .listing-footer{display:flex;justify-content:flex-end;margin-top:24px} .listing-footer .btn{border-radius:980px;padding:10px 22px;font-size:14px} .listings-thumb-nav{ position:static;display:flex;justify-content:center;gap:10px; margin:0;padding:16px 0 0;list-style:none; } .listings-thumb-nav [data-bs-target]{ box-sizing:border-box;width:56px;height:40px;border-radius:10px; background-size:cover;background-position:center;background-color:#e5e5e7; opacity:.4;margin:0;padding:0;border:0;text-indent:0; transition:opacity .2s ease,box-shadow .2s ease;cursor:pointer; } .listings-thumb-nav [data-bs-target]:hover{opacity:.7} .listings-thumb-nav .active{opacity:1;box-shadow:0 0 0 2px var(--blue)} /* ===================== HABERLER (Instagram post oranlı galeri; masaüstünde yatay, mobilde dikey kaydırma) ===================== */ /* ===================== SOSYAL MEDYADA BİZ ===================== */ .social-head{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;margin-bottom:24px} .social-follow-btn{ flex:0 0 auto;display:inline-flex;align-items:center;gap:9px;padding:12px 20px;border-radius:980px; font-size:14px;font-weight:600;color:#fff; background:linear-gradient(45deg,#f09433 0%,#e6683c 25%,#dc2743 50%,#cc2366 75%,#bc1888 100%); box-shadow:0 10px 24px rgba(220,39,67,.25);transition:transform .2s ease,box-shadow .2s ease; } .social-follow-btn[hidden]{display:none} .social-follow-btn:hover{color:#fff;transform:translateY(-2px);box-shadow:0 14px 30px rgba(220,39,67,.32)} .social-follow-btn i{font-size:17px} /* Eşit boyutlu kare gönderi kartları (Instagram'ın kare önizleme görseli) */ .social-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px} .social-card{ position:relative;display:block;aspect-ratio:1/1;border-radius:22px;overflow:hidden;isolation:isolate; background:#e5e7ea;box-shadow:var(--shadow);transition:transform .35s cubic-bezier(.28,.11,.32,1),box-shadow .35s ease; } .social-card:hover{transform:translateY(-4px);box-shadow:0 22px 44px rgba(8,22,31,.18)} /* Görsel kırpılmadan saklanır; kare kartta tam merkezden, iki kenardan eşit kırpılır */ .social-card img{width:100%;height:100%;object-fit:cover;object-position:50% 50%;display:block;transition:transform .6s cubic-bezier(.28,.11,.32,1)} .social-card:hover img{transform:scale(1.06)} .social-card-placeholder{ width:100%;height:100%;display:flex;align-items:center;justify-content:center;font-size:48px;color:#fff; background:linear-gradient(45deg,#f09433 0%,#e6683c 25%,#dc2743 50%,#cc2366 75%,#bc1888 100%); } .social-card-badge{ position:absolute;top:14px;right:14px;width:36px;height:36px;border-radius:50%; display:flex;align-items:center;justify-content:center;font-size:16px;color:#fff; background:rgba(0,0,0,.35);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px); } .social-card-overlay{ position:absolute;left:0;right:0;bottom:0;display:flex;flex-direction:column;gap:4px;padding:56px 18px 16px;color:#fff; background:linear-gradient(to top,rgba(8,14,20,.85) 0%,rgba(8,14,20,.45) 55%,rgba(8,14,20,0) 100%); } .social-card-overlay small{font-size:11.5px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:rgba(255,255,255,.75)} .social-card-overlay strong{ font-size:15px;font-weight:700;line-height:1.3;letter-spacing:-.2px; display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden; } .social-card-cta{ display:inline-flex;align-items:center;gap:6px;font-size:12.5px;font-weight:600;color:var(--brand-yellow); max-height:0;opacity:0;overflow:hidden;transition:max-height .3s ease,opacity .3s ease,margin .3s ease; } .social-card:hover .social-card-cta,.social-card:focus-visible .social-card-cta{max-height:24px;opacity:1;margin-top:4px} @media (max-width:991px){ .social-grid{grid-template-columns:repeat(2,minmax(0,1fr))} } @media (max-width:575px){ .social-grid{gap:10px} .social-card{border-radius:16px} .social-card-badge{top:8px;right:8px;width:28px;height:28px;font-size:13px} .social-card-overlay{padding:36px 10px 10px} .social-card-overlay small{display:none} .social-card-overlay strong{font-size:12.5px} } /* ===================== FOOTER ===================== */ footer{background:#231f20;margin-top:80px} .footer-inner{max-width:var(--wrap);margin:0 auto;display:flex;flex-wrap:wrap;padding:64px 24px 36px;gap:12px} .footer-column{flex:1;min-width:180px;padding:20px;display:flex;flex-direction:column;gap:13px;color:#edf1f4;font-size:13.5px} .footer-col-title{font-size:11.5px;font-weight:700;text-transform:uppercase;letter-spacing:.07em;color:#9d9da2;margin:0} .footer-links{display:flex;flex-direction:column;gap:13px} .footer-column p{margin:0} .footer-column a{color:#edf1f4;transition:color .15s ease} .footer-column a:hover{color:#6fb8e8;text-decoration:none} .footer-social{display:flex;gap:18px} .footer-social a{font-size:21px;color:#edf1f4;transition:color .15s ease} .footer-social a:hover{color:#6fb8e8} /* Paydaşlarımız: footer'ın hemen üstünde açık zeminli, yavaşça kayan logo şeridi. Logolar gri tonlu ve soluk durur, üzerine gelince kendi renklerine döner; şeridin üzerindeyken kayma durur. */ .stakeholders{margin-top:80px;background:var(--card);border-top:1px solid var(--line)} .stakeholders+footer{margin-top:0} .stakeholders-inner{max-width:var(--wrap);margin:0 auto;padding:26px 24px;display:flex;align-items:center;gap:32px} .stakeholders-title{ flex:0 0 auto;margin:0;padding-right:32px;border-right:1px solid var(--line); font-size:12px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--muted); } .stakeholders-marquee{ flex:1;min-width:0;overflow:hidden; -webkit-mask-image:linear-gradient(to right,transparent 0,#000 8%,#000 92%,transparent 100%); mask-image:linear-gradient(to right,transparent 0,#000 8%,#000 92%,transparent 100%); } .stakeholders-track{display:flex;align-items:center;gap:56px;width:max-content;animation:stakeholdersScroll 45s linear infinite} .stakeholders-marquee:hover .stakeholders-track,.stakeholders-marquee:focus-within .stakeholders-track{animation-play-state:paused} @keyframes stakeholdersScroll{from{transform:translateX(0)}to{transform:translateX(calc(-50% - 28px))}} .stakeholder{flex:0 0 auto;display:flex;align-items:center;justify-content:center;height:52px} .stakeholder img{ display:block;max-height:44px;max-width:140px;width:auto;height:auto; filter:grayscale(1);opacity:.55;transition:filter .3s ease,opacity .3s ease,transform .3s ease; } .stakeholder:hover img,.stakeholder:focus-visible img{filter:none;opacity:1;transform:scale(1.06)} @media (max-width:767px){ .stakeholders{margin-top:56px} .stakeholders-inner{flex-direction:column;align-items:stretch;gap:14px;padding:20px 0} .stakeholders-title{padding:0 16px;border-right:0;text-align:center} .stakeholders-track{gap:36px;animation-duration:35s} .stakeholder img{max-height:36px;max-width:110px} } @media (prefers-reduced-motion:reduce){ .stakeholders-marquee{-webkit-mask-image:none;mask-image:none} .stakeholders-track{animation:none;width:auto;flex-wrap:wrap;justify-content:center;gap:24px 40px} .stakeholders-track [aria-hidden="true"]{display:none} } /* Footer alt şeridi: solda Oda logosu (büyük), sağda kurum logoları. Kurum logolarının yazıları koyu olduğu için beyaz zeminli kutuda durur. */ .footer-brandbar{ max-width:var(--wrap);margin:0 auto;padding:8px 24px 32px; display:flex;align-items:center;justify-content:space-between;gap:24px; } .footer-brandbar-logo{flex:0 0 auto;display:block;transition:opacity .2s ease} .footer-brandbar-logo:hover{opacity:.85} .footer-brandbar-logo img{display:block;height:104px;width:auto} .footer-partners{ flex:0 0 auto;display:flex;align-items:center;gap:28px;padding:12px 24px;border-radius:18px;background:#fff; } .footer-partner{display:flex;align-items:center;transition:transform .25s ease,opacity .25s ease} .footer-partner img{display:block;width:auto;height:44px} .footer-partner.is-tobb img{height:58px} a.footer-partner:hover{transform:translateY(-2px);opacity:.85} @media (max-width:575px){ .footer-brandbar{padding:4px 16px 24px;gap:14px} .footer-brandbar-logo img{height:76px} .footer-partners{gap:14px;padding:8px 14px;border-radius:14px} .footer-partner img{height:30px} .footer-partner.is-tobb img{height:42px} } .footer-bottom{ /* Sağdaki boşluk: sabit asistan butonu sayfa sonunda "Site Kullanım Şartları" bağlantısını örtmesin */ max-width:var(--wrap);margin:0 auto;padding:20px 104px 28px 24px; border-top:1px solid rgba(255,255,255,.08); display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px; font-size:12.5px;color:#9d9da2; } .footer-bottom a{color:#9d9da2;transition:color .15s ease} .footer-bottom a:hover{color:#6fb8e8} /* ===================== BREADCRUMB ===================== */ /* Header menüsü için yazılmış genel `nav{...}` kuralları sayfa içi