/* ÖZEL BUTON (El çizimi oval efektli) */
.btn-custom-outline1 {
position: relative;
display: inline-flex;
align-items: center;
justify-content: center;
padding: 15px 40px;
text-decoration: none;
color: #1a1a1a;
font-weight: 700;
}.btn-custom-outline1 svg path{
stroke: var(--kolej-yellow);
}.btn-custom-outline1 span{
color: var(--kolej-yellow);
}.btn-custom-outline1 .button-stroke {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
pointer-events: none;
}.btn-custom-outline1:hover .button-stroke path {
stroke-dasharray: 500;
animation: drawLine 1s forwards;
}.btn-custom-outline2 {
position: relative;
display: inline-flex;
align-items: center;
justify-content: center;
padding: 15px 40px;
text-decoration: none;
color: #1a1a1a;
font-weight: 700;
}.btn-custom-outline2 span{
color: var(--kolej-red);
}.btn-custom-outline2 .button-stroke {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
pointer-events: none;
}.btn-custom-outline2:hover .button-stroke path {
stroke-dasharray: 500;
animation: drawLine 1s forwards;
}.home-hakkimizda3 {
padding: 100px 0;
overflow: hidden;
}/* GÖRSEL ALANI */
.about-image-wrapper {
position: relative;
padding-bottom: 80px;
}.main-img-box {
width: 85%;
position: relative;
z-index: 2;
border-radius: 20px;
overflow: hidden;
max-height: 300px;
}.sub-img-box {
width: 50%;
position: absolute;
bottom: -40px;
right: 5%;
z-index: 3;
border-radius: 20px;
max-height: 300px;
overflow: hidden;
border: solid white;
}/* DEKORATİF ŞEKİLLER */
.shape-c {
position: absolute;
bottom: -60px;
left: 20px;
width: 100px;
height: 100px;
border: 20px solid var(--kolej-yellow);
border-right-color: transparent;
border-radius: 50%;
transform: rotate(-45deg);
z-index: 1;
display: none;
}.shape-dot {
position: absolute;
bottom: 0;
left: 180px;
width: 40px;
height: 40px;
background-color: var(--kolej-red);
border-radius: 50%;
z-index: 1;
display: none;
}/* DÖNEN BADGE */
.about-badge {
position: absolute;
bottom: -130px;
left: 30%;
transform: translate(-50%, -50%);
z-index: 4;
display: none;
}.badge-circle {
width: 120px;
height: 120px;
position: relative;
display: flex;
align-items: center;
justify-content: center;
}.badge-inner {
width: 60px;
height: 60px;
background: var(--kolej-yellow);
border-radius: 50%;
position: absolute;
}.badge-circle svg {
width: 100%;
height: 100%;
animation: rotateAnim 10s linear infinite;
}.badge-circle text {
fill: #333;
font-weight: bold;
text-transform: uppercase;
}/* İÇERİK ALANI */
.about-content-box {
padding-left: 50px;
text-align: left;
}.sub-title {
color: var(--kolej-red);
font-weight: 700;
font-size: 18px;
margin-bottom: 10px;
margin-top: 0;
display: none;
}.main-title {
font-size: 45px;
font-weight: 800;
color: #1a1a1a;
line-height: 1.2;
margin-top: 0;
margin-bottom: 15px;
}.description {
font-size: 16px;
color: #666;
line-height: 1.8;
margin-bottom: 35px;
}/* ÖZEL BUTON (El çizimi oval efektli) */
.btn-custom-outline {
position: relative;
display: inline-flex;
align-items: center;
justify-content: center;
padding: 15px 40px;
text-decoration: none;
color: #1a1a1a;
font-weight: 700;
}.button-stroke {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
pointer-events: none;
width: 100%;
}.btn-custom-outline:hover .button-stroke path {
stroke-dasharray: 500;
animation: drawLine 1s forwards;
}/* ANİMASYONLAR */
@keyframes floatAnim {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(-20px); }
}@keyframes rotateAnim {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}@keyframes drawLine {
from { stroke-dashoffset: 500; }
to { stroke-dashoffset: 0; }
}/* MOBIL UYUM */
@media (max-width: 991px) {
.about-content-box { padding-left: 0; margin-top: 80px; text-align: center; }
.main-title { font-size: 32px; }
.about-image-wrapper { margin-bottom: 50px; display: none;}
.btn-wrap { display: flex; justify-content: center; }
}/**/
.school-departments {
padding: 100px 30px;
}.school-departments .section-title {
text-align: center;
margin-bottom: 50px;
}/* Grid Yapısı: Masaüstünde 5 Sütun */
.dept-grid-5 {
display: grid;
grid-template-columns: repeat(5, 1fr);
gap: 20px;
}.dept-grid-5 a{
text-decoration: none;
}.dept-card {
position: relative;
height: 300px;
border-radius: 25px;
overflow: hidden;
cursor: pointer;
transition: all 0.4s ease;
display: flex;
align-items: center;
justify-content: center;
text-align: center;
border: 1px solid rgba(255,255,255,0.1);
}/* Kart Arkaplan Renkleri */
.bg-pastel-blue { background-color: #e3f2fd; }
.bg-pastel-orange { background-color: #fff3e0; }
.bg-pastel-pink { background-color: #fce4ec; }
.bg-pastel-green { background-color: #e8f5e9; }
.bg-pastel-purple { background-color: #f3e5f5; }.front-content { padding: 20px; z-index: 1; transition: 0.4s; }.icon-box {
width: 80px;
height: 80px;
margin: 0 auto 20px;
background-color: #fff;
border-radius: 20px;
display: flex;
align-items: center;
justify-content: center;
padding: 20px;
box-shadow: 0 5px 15px rgba(0,0,0,0.05);
}.icon-box svg {
width: 40px;
overflow: inherit;
stroke: none;
fill: white;
}.dept-card h3 {
font-size: 19px;
font-weight: 600;
color: #0c1828;
line-height: 1.3;
}.dept-card p {
font-size: 12px;
font-weight: 700;
margin-top: 10px;
text-transform: uppercase;
}/* --- RENK ÖZELLEŞTİRMELERİ (İkon, Yazı ve Hover Overlay) --- *//* Mavi */
.bg-pastel-blue .icon-box { background: #2196f3; }
.bg-pastel-blue p { color: #2196f3; }
.bg-pastel-blue .hover-overlay { background-color: rgba(33, 150, 243, 0.9); }/* Turuncu */
.bg-pastel-orange .icon-box { background: #ff9800; }
.bg-pastel-orange p { color: #ff9800; }
.bg-pastel-orange .hover-overlay { background-color: rgba(255, 152, 0, 0.9); }/* Pembe */
.bg-pastel-pink .icon-box { background: #e91e63; }
.bg-pastel-pink p { color: #e91e63; }
.bg-pastel-pink .hover-overlay { background-color: rgba(233, 30, 99, 0.9); }/* Yeşil */
.bg-pastel-green .icon-box { background: #4caf50; }
.bg-pastel-green p { color: #4caf50; }
.bg-pastel-green .hover-overlay { background-color: rgba(76, 175, 80, 0.9); }/* Mor */
.bg-pastel-purple .icon-box { background: #9c27b0; }
.bg-pastel-purple p { color: #9c27b0; }
.bg-pastel-purple .hover-overlay { background-color: rgba(156, 39, 176, 0.9); }/* Hover Efektleri */
.back-hover {
position: absolute;
top: 0; left: 0;
width: 100%; height: 100%;
background-size: cover;
background-position: center;
opacity: 0;
transform: scale(1.1);
transition: 0.5s ease;
z-index: 2;
}.hover-overlay {
width: 100%; height: 100%;
display: flex; flex-direction: column;
align-items: center; justify-content: center;
color: #fff; padding: 20px;
}.hover-overlay svg {
width: 40px;
overflow: inherit;
stroke: none;
fill: white;
}.hover-overlay h3 { color: #fff; }.dept-card:hover { transform: translateY(-10px); }
.dept-card:hover .back-hover { opacity: 1; transform: scale(1); }
.dept-card:hover .front-content { opacity: 0; }/* Mobil Uyumluluk */
@media (max-width: 1200px) { .dept-grid-5 { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 768px) {
.dept-grid-5 {
grid-template-columns: repeat(2, 1fr) !important;
text-align: center;
justify-content: center;
}
.main-title { font-size: 28px; }
}/**/.courses-section {
background: #dc67440d;
padding: 100px 0;
}.courses-section .section-header {
text-align: center;
}/* Grid Yapısı */
.courses-section .course-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 30px;
}/* KART ANA STİL */
.courses-section .course-card {
background: #fff;
border-radius: 35px;
padding: 15px;
box-shadow: 0 15px 40px rgba(0,0,0,0.04);
position: relative;
cursor: pointer;
/* YUMUŞAK GEÇİŞİN SIRRI BURADA: Süreyi 0.5s yapıp akışkan bir eğri ekledik */
transition: all 0.5s cubic-bezier(0.25, 1, 0.5, 1);
display: flex;
flex-direction: column;
}/* Tüm alt öğelerin yumuşak geçişe dahil olması için */
.course-card *,
.course-card *:before,
.course-card *:after {
transition: all 0.5s cubic-bezier(0.25, 1, 0.5, 1);
}.course-img {
position: relative;
width: 100%;
height: 220px;
border-radius: 25px;
overflow: hidden;
margin-bottom: 25px;
}
.course-img img { width: 100%; height: 100%; object-fit: cover; }.badge {
position: absolute; top: 15px; left: 15px;
background: #2b3990; color: #fff;
padding: 8px 16px; border-radius: 10px; font-size: 11px; font-weight: 700;
}/* İçerik Yazıları */
.rating { display: flex; align-items: center; justify-content: flex-end; gap: 5px; margin-bottom: 12px; color: #ffb400; font-size: 12px; }
.course-title { text-align: right; font-size: 22px; font-weight: 800; color: #1a1a1a; margin-bottom: 15px; }
.about-label {
text-align: right;
font-size: 16px;
font-weight: 600;
color: #1a1a1a;
margin-bottom: 8px;
margin-top: 0;
min-height: 80px;
}
.course-desc { text-align: right; font-size: 12px; color: #777; line-height: 1.6; margin-bottom: 20px; }
.course-meta { display: flex; justify-content: flex-end; gap: 15px; font-size: 12px; font-weight: 700; color: var(--kolej-red); margin-bottom: 25px; }/* Fiyat ve Alt Kısım */
.course-footer {
display: flex;
justify-content: flex-end;
align-items: center;
border-top: 1px solid #f0f0f0;
padding-top: 20px;
min-height: 80px;
}.price-box { display: flex; align-items: center; gap: 12px; }
.old-price { text-decoration: line-through; color: var(--kolej-red); font-weight: 700; font-size: 15px; }
.current-price { font-size: 34px; font-weight: 800; color: #1a1a1a; }/* Add to Cart Butonu - Daha zarif bir fade-in */
.add-cart-btn {
background: var(--kolej-yellow);
color: #fff;
text-decoration: none;
padding: 12px 25px;
border-radius: 30px;
font-size: 13px;
font-weight: 700;
opacity: 1;
}/* ===========================================
PREMIUM HOVER EFEKTİ
=========================================== */.course-card:hover {
background-color: var(--kolej-red); /* Yumuşak kırmızıya geçiş */
transform: translateY(-12px);
box-shadow: 0 25px 50px rgba(255, 49, 21, 0.3);
}/* Tüm metinlerin beyaza dönmesi */
.course-card:hover .course-title,
.course-card:hover .about-label,
.course-card:hover .course-desc,
.course-card:hover .current-price,
.course-card:hover .course-meta {
color: #fff !important;
}/* İkonlar ve Yıldızların Beyaz Olması */
.course-card:hover .rating,
.course-card:hover .stars i,
.course-card:hover .course-meta i {
color: #fff !important;
}/* Eski fiyatın hafif şeffaf beyaz olması */
.course-card:hover .old-price {
color: rgba(255, 255, 255, 0.6);
}/* Çizginin rengini hafifletme */
.course-card:hover .course-footer {
border-top-color: rgba(255, 255, 255, 0.15);
}/* Butonun Süzülerek Gelmesi */
.course-card:hover .add-cart-btn {
opacity: 1;
visibility: visible;
transform: translateY(0);
}/* Mobil Uyumluluk */
@media (max-width: 1024px) { .course-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 768px) {
.course-grid { grid-template-columns: 1fr; }
.main-title { font-size: 32px; }
.course-card { max-width: 450px; margin: 0 auto; }
}/**/
/* --- CTA BANNER DEĞİŞKENLERİ --- */
:root {
--cta-main-bg: #9ce6bf;
--cta-bubble-1: #ffb400;
--cta-bubble-2: #ff6e40;
--cta-text-color: #1a1a1a;
--cta-accent-red: #ff3115;
}/* --- ANA KONTEYNER VE ARKAPLAN --- */
.cta-banner-section {
padding: 80px 0;
}.cta-banner-wrapper {
background-color: #fff3e0;
border-radius: 50px;
padding: 40px 50px 180px 50px;
position: relative;
overflow: hidden;
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
}.cta-banner-wrapper:before {
content: '';
position: absolute;
left: 0;
bottom: 0px;
width: 100%;
height: 200px;
background: url(../images/binalar.png);
background-size: cover;
z-index: 1;
}/* --- BALONCUKLAR VE HAREKETLERİ --- */
.banner-shape {
position: absolute;
border-radius: 50%;
z-index: 1;
opacity: 0.7;
filter: blur(2px);
}.shape-1 { top: -50px; left: -30px; width: 220px; height: 220px; background: var(--cta-bubble-1); animation: floatAnim 8s infinite ease-in-out; }
.shape-2 { top: 20px; right: 10%; width: 80px; height: 80px; background: var(--cta-bubble-2); animation: floatAnim 10s infinite ease-in-out reverse; }
.shape-3 { bottom: -60px; right: -20px; width: 180px; height: 180px; background: var(--cta-bubble-1); animation: floatAnim 7s infinite ease-in-out 1s; }
.shape-4 { bottom: 20px; left: 25%; width: 50px; height: 50px; background: var(--cta-bubble-2); animation: floatAnim 12s infinite ease-in-out; opacity: 0.4; }
.shape-5 { top: 40%; right: 30%; width: 40px; height: 40px; background: white; animation: floatAnim 9s infinite ease-in-out 2s; opacity: 0.3; }
.shape-6 { bottom: 10%; right: 40%; width: 100px; height: 100px; background: var(--cta-bubble-2); animation: floatAnim 11s infinite ease-in-out; opacity: 0.2; }/* --- FLEX DÜZENİ --- */
.banner-flex {
position: relative;
z-index: 5;
display: flex;
align-items: center;
justify-content: space-between;
gap: 30px;
}.cta-text-box {
flex: 2;
display: flex;
gap: 0px;
justify-content: space-between;
align-items: center;
}.cta-content {
text-align: center;
}.cta-main {
font-size: 35px;
font-weight: 500;
color: #092c8a;
margin: 0;
line-height: 1.1;
position: relative;
left: -20px;
}.cta-sub {
color: var(--cta-accent-red);
font-weight: 800;
font-size: 20px;
margin-bottom: 5px;
text-transform: uppercase;
letter-spacing: 1px;
}.cta-text-box .logo {
position: relative;
}.cta-arrow {
font-size: 70px;
color: #092c8a;
display: flex;
align-items: start;
justify-content: start;
animation: arrowMove 2s infinite ease-in-out;
}/* --- BUTON STİLİ --- */
.cta-premium-btn {
position: relative;
display: inline-flex;
align-items: center;
justify-content: center;
padding: 20px 50px;
font-size: 24px;
font-weight: 800;
color: var(--cta-text-color);
text-decoration: none;
z-index: 10;
transition: all 0.3s ease;
animation: btnPulse 3s infinite;
}.cta-premium-btn span {
position: relative;
z-index: 2;
color: #e3322c;
}.cta-scribble-svg {
position: absolute;
width: 130%;
height: 150%;
color: #092c8a;
transition: all 0.5s ease;
}.cta-premium-btn:hover {
transform: scale(1.1);
color: #092c8a;
}.cta-premium-btn:hover .cta-scribble-svg {
transform: rotate(3deg) scale(1.05);
}/* --- ANİMASYONLAR --- */
@keyframes floatAnim {
0%, 100% { transform: translate(0, 0) rotate(0deg); }
33% { transform: translate(15px, -25px) rotate(5deg); }
66% { transform: translate(-10px, 15px) rotate(-5deg); }
}@keyframes btnPulse {
0% { transform: scale(1); filter: drop-shadow(0 0 0px rgba(255,49,21,0)); }
50% { transform: scale(1.03); filter: drop-shadow(0 0 15px rgba(255,49,21,0.3)); }
100% { transform: scale(1); filter: drop-shadow(0 0 0px rgba(255,49,21,0)); }
}@keyframes arrowMove {
0%, 100% { transform: translateX(0); }
50% { transform: translateX(-15px); }
}/* --- MOBİL UYUMLULUK --- */
@media (max-width: 991px) {
.cta-banner-wrapper {
padding: 60px 25px;
}
.banner-flex {
flex-direction: column-reverse;
gap: 60px;
}
.cta-text-box {
flex-direction: column;
text-align: center;
gap: 10px;
}
.cta-content {
text-align: center;
}
.cta-arrow {
transform: rotate(-90deg);
font-size: 50px;
margin: 20px 0;
}
@keyframes arrowMove {
0%, 100% { transform: translateY(0) rotate(-90deg); }
50% { transform: translateY(15px) rotate(-90deg); }
}
.cta-main {
font-size: 36px;
left: 0;
}
.cta-premium-btn {
font-size: 20px;
}
}/**/.combined-full-section {
display: flex;
width: 100%;
min-height: 650px;
overflow: hidden;
}.half-side {
flex: 1;
display: flex;
align-items: center;
position: relative;
padding: 100px 0;
}.half-side .btn-custom-outline span{
color: white;
}/* Sol Taraf */
.faq-bg-side {
background-color: #00854012; /* Çok hafif gri, kartları öne çıkarır */
}/* Sağ Taraf */
.image-bg-side {
background-size: cover;
background-position: center;
color: #fff;
}.side-overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: var(--kolej-yellow);
z-index: 1;
opacity: 50%;
}.side-inner-content {
position: relative;
z-index: 5;
width: 80%; /* İçerik çok kenara yapışmasın diye */
margin: 0 auto;
}/* FAQ KARTLARI */
.faq-card {
background: #fff;
border-radius: 15px;
margin-bottom: 15px;
box-shadow: 0 10px 25px rgba(0,0,0,0.04);
transition: 0.3s;
}.faq-card-header {
padding: 25px 30px;
display: flex;
justify-content: space-between;
align-items: center;
cursor: pointer;
}.faq-card-header h3 {
margin: 0;
font-size: 19px;
font-weight: 700;
color: #1a1a1a;
}.faq-toggle-icon {
position: relative; width: 16px; height: 16px;
}
.faq-toggle-icon::before, .faq-toggle-icon::after {
content: ''; position: absolute; background: #1a1a1a; transition: 0.3s;
}
.faq-toggle-icon::before { width: 100%; height: 2px; top: 7px; left: 0; }
.faq-toggle-icon::after { width: 2px; height: 100%; left: 7px; top: 0; }.faq-card-body {
max-height: 0;
overflow: hidden;
transition: max-height 0.4s ease-out;
padding: 0 30px;
}.faq-card-body p {
color: #666;
line-height: 1.7;
padding-bottom: 25px;
margin: 0;
}/* ACTIVE DURUMU */
.faq-card.active .faq-card-header h3 { color: var(--kolej-yellow); }
.faq-card.active .faq-toggle-icon::after { transform: rotate(90deg); opacity: 0; }
.faq-card.active .faq-toggle-icon::before { background: var(--kolej-yellow); }
.faq-card.active .faq-card-body { max-height: 300px; }/* SAĞ TARAF YAZILAR */
.side-tag { color: white; font-weight: 400; font-size: 18px; display: block; margin-bottom: 0px; }
.side-title { font-size: 45px; font-weight: 600; margin-bottom: 25px; line-height: 1.1; margin-top: 10px;}
.side-desc { font-size: 17px; opacity: 0.9; line-height: 1.8; margin-bottom: 35px; }/* MOBİL UYUM */
@media (max-width: 991px) {
.combined-full-section { flex-direction: column-reverse; padding-top: 0 !important;}
.half-side { width: 100%; padding: 60px 0; }
.side-inner-content { width: 90%; text-align: center; }
.side-title { font-size: 32px; }
}/**//* --- BAĞIŞ BANNER ÖZEL DEĞİŞKENLERİ --- */
.donation-banner-section {
padding: 80px 0 0px 0;
}.donation-banner-wrapper {
background-color: #fff3e0; /* Bağış temasına uygun hafif yeşil tonu */
border-radius: 50px;
padding: 60px 50px 230px 50px;
position: relative;
overflow: hidden;
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.05);
}.donation-banner-wrapper:before{
content: '';
position: absolute;
left: 0;
bottom: 0;
width: 100%;
height: 200px;
background: url(../images/mezun.png);
background-size: cover;
}/* --- FLEX VE METİN DÜZENİ --- */
.banner-flex {
position: relative;
z-index: 5;
display: flex;
align-items: center;
justify-content: space-between;
gap: 40px;
}.donation-text-box {
flex: 2;
display: flex;
gap: 20px;
justify-content: flex-end;
align-items: flex-start;
}.donation-content {
text-align: left;
max-width: 100%;
padding: 0 80px 0 0;
}.donation-sub {
color: #2e7d32;
font-weight: 800;
font-size: 18px;
text-transform: uppercase;
display: block;
margin-bottom: 10px;
}.donation-main {
font-size: 42px;
font-weight: 600;
color: var(--kolej-red);
margin: 0 0 15px 0;
line-height: 1.2;
}.donation-desc {
margin: 0;
font-size: 15px;
color: #666;
line-height: 25px;
}.donation-arrow {
font-size: 60px;
color: var(--kolej-red);
margin-top: 10px;
animation: arrowMoveBagis 2s infinite ease-in-out;
}/* --- BUTON STİLİ --- */
.donation-premium-btn {
position: relative;
display: inline-flex;
align-items: center;
justify-content: center;
padding: 25px 60px;
font-size: 25px;
font-weight: 700;
color: #1a1a1a;
text-decoration: none;
z-index: 10;
transition: all 0.3s ease;
animation: btnPulseBagis 3s infinite;
}.donation-premium-btn span {
position: relative;
z-index: 2;
color: var(--kolej-yellow);
}.donation-scribble-svg {
position: absolute;
width: 120%;
height: 140%;
color: var(--kolej-red);
transition: all 0.5s ease;
}.donation-premium-btn:hover {
transform: scale(1.05);
}/* --- ANİMASYONLAR --- */
@keyframes arrowMoveBagis {
0%, 100% { transform: translateX(0); }
50% { transform: translateX(-15px); }
}@keyframes btnPulseBagis {
0% { transform: scale(1); }
50% { transform: scale(1.05); filter: drop-shadow(0 0 10px rgba(46, 125, 50, 0.2)); }
100% { transform: scale(1); }
}/* --- MOBİL UYUMLULUK --- */
@media (max-width: 991px) {
.donation-banner-wrapper {
padding: 50px 25px;
}
.banner-flex {
flex-direction: column-reverse;
text-align: center;
}
.donation-text-box {
flex-direction: column;
align-items: center;
}
.donation-content {
text-align: center;
}
.donation-arrow {
transform: rotate(-90deg);
margin: 0;
}
@keyframes arrowMoveBagis {
0%, 100% { transform: translateY(0) rotate(-90deg); }
50% { transform: translateY(15px) rotate(-90deg); }
}
.donation-main {
font-size: 32px;
}
}/* Harf Animasyonu İçin Gerekli Stiller */
.donation-main {
display: flex;
flex-wrap: wrap; /* Mobilde kelimelerin bölünmemesi için */
}.donation-main span {
opacity: 0;
display: inline-block;
transform: translateY(10px); /* Hafif aşağıdan gelme efekti */
transition: all 0.4s ease;
}.donation-main span.visible {
opacity: 1;
transform: translateY(0);
}/* Boşlukların kaybolmaması için */
.donation-main span.space {
width: 0.25em;
}/**//* DUYURU SLIDER ÖZEL ALANI */
.duyuru-side-slider {
position: relative;
overflow: hidden;
padding: 0 !important;
display: flex;
align-items: stretch;
}.duyuru-slider-container {
width: 100%;
position: relative;
min-height: 650px;
}.duyuru-item {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-size: cover;
background-position: center;
display: flex;
align-items: center;
padding: 0 10%;
opacity: 0;
visibility: hidden;
transition: opacity 0.8s ease-in-out, transform 1.2s ease-out;
transform: scale(1.1); /* Zoom-out başlangıcı */
z-index: 1;
}.duyuru-item.active {
opacity: 1;
visibility: visible;
transform: scale(1); /* Zoom-in etkisi */
z-index: 2;
}/* Karartma */
.duyuru-overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: #008540;
z-index: 1;
opacity: 50%;
}/* İçerik Animasyonları */
.duyuru-content-inner {
position: relative;
z-index: 5;
color: #fff;
max-width: 550px;
}.duyuru-label {
display: inline-block;
background: #008540;
color: #fff;
padding: 5px 15px;
font-size: 12px;
font-weight: 700;
border-radius: 50px;
margin-bottom: 0px;
transform: translateY(20px);
opacity: 0;
transition: 0.5s 0.3s;
}.duyuru-title {
font-size: 40px;
font-weight: 700;
margin-bottom: 20px;
line-height: 1.2;
transform: translateY(30px);
opacity: 0;
transition: 0.5s 0.4s;
}.duyuru-text {
font-size: 16px;
line-height: 1.6;
margin-bottom: 30px;
opacity: 0;
transform: translateY(40px);
transition: 0.5s 0.5s;
}.duyuru-item.active .duyuru-label,
.duyuru-item.active .duyuru-title,
.duyuru-item.active .duyuru-text {
transform: translateY(0);
opacity: 1;
}/* Navigasyon Noktaları */
.duyuru-nav-dots {
position: absolute;
bottom: 30px;
left: 10%;
z-index: 10;
display: flex;
gap: 12px;
}.duyuru-dot {
width: 40px;
height: 4px;
background: rgba(255,255,255,0.3);
cursor: pointer;
transition: 0.3s;
border-radius: 2px;
}.duyuru-dot.active {
background: var(--kolej-yellow);
width: 60px;
}/* MOBİL UYUM */
@media (max-width: 991px) {
.duyuru-slider-container { min-height: 450px; }
.duyuru-title { font-size: 28px; }
.duyuru-item { padding: 0 20px; text-align: center; justify-content: center; }
.duyuru-nav-dots { left: 50%; transform: translateX(-50%); }
.duyuru-overlay { background: rgba(0,0,0,0.6); }
}a.WhatsApp1 {
display: flex;
font-size: 18px;
background: #2EB843;
font-weight: 600;
width: 51px;
height: 51px;
position: fixed;
bottom: 20px;
left: 20px;
border-radius: 50%;
-webkit-transition: all .1s ease-out 0s;
-moz-transition: all .1s ease-out 0s;
-ms-transition: all .1s ease-out 0s;
-o-transition: all .1s ease-out 0s;
transition: all .1s ease-out 0s;
color: #fff;
align-items: center;
justify-content: center;
animation: whatsapp infinite 2s linear;
z-index: 9999
}a.WhatsApp1 svg {
width: 24px;
height: 24px;
fill: white;
}@keyframes whatsapp {
0% {
box-shadow: 0 0 0 0 #2EB843
}50% {
box-shadow: 0 0 0 10px #015dc700
}100% {
box-shadow: 0 0 0 0 #015dc700
}
}@media(max-width:1024px){
a.WhatsApp1 {
bottom: 60px
}}/**/.instagram{
padding: 80px 0 100px 0;
background: #00854012;
}.profile-header {
display: flex;
align-items: center;
padding: 0px 20px 20px 20px;
gap: 20px;
flex-wrap: wrap;
}.profile-pic-container { flex: 0 0 80px; }
.profile-pic {
width: 80px; height: 80px; border-radius: 50%; border: 1px solid #dbdbdb; padding: 2px;
object-fit: cover;
}.user-info { flex: 1; display: flex; flex-direction: column; min-width: 250px; }
.user-top { display: flex; align-items: center; gap: 15px; margin-bottom: 5px; flex-wrap: wrap; }
.full-name { font-size: 18px; font-weight: 600; margin: 0; }
.username { color: #8e8e8e; font-size: 14px; display: block; }.stats { display: flex; gap: 20px; margin-top: 10px; margin-left: auto;}
.stat-item { text-align: center; font-size: 14px; }
.stat-value { font-weight: bold; display: block; font-size: 16px; }
.stat-label { color: #8e8e8e; }.follow-btn {
background-color: #0095f6; color: white; border: none;
padding: 6px 20px; border-radius: 8px; font-weight: 600;
cursor: pointer; display: flex; align-items: center; gap: 8px; font-size: 14px;
}/* GÖNDERİ IZGARASI */
.posts-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; padding: 4px; }
.post-box { position: relative; aspect-ratio: 1/1; background-color: #efefef; cursor: pointer; border-radius: 50px; overflow: hidden;}
.post-box img { width: 100%; height: 100%; object-fit: cover; display: block; transition: 0.3s; }
.post-box:hover img { filter: brightness(0.8); }.sidecar-icon {
position: absolute; top: 10px; right: 10px; color: white;
font-size: 18px; filter: drop-shadow(0 0 2px rgba(0,0,0,0.5));
}/* Mobil Ayarlar */
@media (max-width: 600px) {
.profile-header { justify-content: center; text-align: center; }
.user-top { justify-content: center; }
.stats { justify-content: center; }
.stats-row { order: 3; width: 100%; border-top: 1px solid #efefef; padding-top: 10px; }
}/**//* Genel Bölüm Ayarları */
.products-gallery-section {
padding: 100px 0;
background: #dc67441a;
}/* Başlık ve Açıklama */
.header-area {
text-align: center;
max-width: 800px;
margin: 0 auto 50px;
}.tab-menu {
display: flex;
justify-content: center;
align-items: center;
flex-wrap: wrap;
gap: 15px;
margin-bottom: 50px;
}.tab-btn {
background: none;
border: none;
font-size: 16px;
font-weight: 500;
color: #888;
cursor: pointer;
transition: all 0.3s ease;
padding: 8px 20px;
border-radius: 50px;
font-family: "Kanit", sans-serif;
}.tab-btn.active {
color: #fff;
background-color: var(--kolej-red); /* Genel tasarımdaki kırmızı */
}.separator { color: #ddd; }/* Galeri Grid Sistemi - Grid yapısını korumak önemli */
.gallery-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 25px;
/* Elemanlar silindiğinde gridin zıplamasını engellemek için */
align-items: start;
}/* Ürün Kartı Konteynırı */
.gallery-item {
position: relative;
width: 100%; /* Genişliği %100 sabitle */
transition: transform 0.4s ease, opacity 0.4s ease;
transform: scale(1);
opacity: 1;
display: block;
}/* Resmin içinde olduğu kartı sabitleyin */
.product-card {
position: relative;
width: 100%;
aspect-ratio: 1 / 1; /* Kare formu zorla, böylece yüklenirken zıplama yapmaz */
overflow: hidden;
border-radius: 25px;
background: #f9f9f9;
}/* Filtreleme Efektleri - position:absolute silindi */
.gallery-item.hide {
transform: scale(0); /* Küçülerek yok olsun */
opacity: 0;
width: 0; /* Grid içindeki alanını daraltması için */
height: 0;
margin: 0;
padding: 0;
pointer-events: none;
overflow: hidden;
/* display: none; JS tarafından eklenecek */
}.gallery-item.show {
transform: scale(1);
opacity: 1;
display: block;
}.product-card {
position: relative;
aspect-ratio: 1/1;
overflow: hidden;
border-radius: 25px;
background: #f9f9f9;
}.product-card img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.6s ease;
}.gallery-item:hover .product-card img {
transform: scale(1.1);
}/* Filtreleme Efektleri */
.gallery-item.hide {
transform: scale(0.8);
opacity: 0;
visibility: hidden;
position: absolute; /* Alan kaplamaması için */
pointer-events: none;
}.gallery-item.show {
transform: scale(1);
opacity: 1;
visibility: visible;
position: relative;
pointer-events: auto;
}/* Mobil Uyumluluk */
@media (max-width: 991px) {
.gallery-grid { grid-template-columns: repeat(2, 1fr); }
}@media (max-width: 576px) {
.gallery-grid { grid-template-columns: 1fr; }
.tab-btn { font-size: 14px; padding: 6px 15px; }
}/**//* Bağış Yan Alan Özelleştirmesi */
.donation-side-container {
position: relative;
overflow: hidden;
display: flex;
align-items: center;
color: #fff;
}.donation-side-overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: linear-gradient(135deg, rgba(0, 133, 64, 0.9) 0%, rgba(0, 133, 64, 0.6) 100%);
z-index: 1;
}.donation-side-content {
position: relative;
z-index: 5;
max-width: 500px;
}/* Beyaz Buton Varyasyonu */
.white-btn span {
color: #fff !important;
}.white-btn:hover span {}/* Başlık Animasyonu Hazırlığı */
.donation-animate-title {
display: flex;
flex-wrap: wrap;
font-size: 38px;
font-weight: 600;
line-height: 1.1;
margin-bottom: 20px;
margin-top: 10px;
}.donation-animate-title span {
opacity: 0;
transform: translateY(15px);
display: inline-block;
transition: all 0.4s ease;
}.donation-animate-title span.visible {
opacity: 1;
transform: translateY(0);
}.donation-animate-title span.space {
width: 0.25em;
}/* Mobil Uyumluluk */
@media (max-width: 991px) {
.donation-side-container {
padding: 80px 0;
min-height: 400px;
}
.donation-side-content {
text-align: center;
margin: 0 auto;
}
}/**//* Instagram Ana Alan */
.instagram {
padding: 80px 0;
background: #0085400f;
}/* Slider Çerçevesi */
.insta-carousel-container {
position: relative;
padding: 0 50px;
margin-top: 30px;
}.insta-carousel-viewport {
overflow: hidden;
width: 100%;
}.insta-carousel-track {
display: flex;
gap: 15px;
transition: transform 0.6s cubic-bezier(0.23, 1, 0.32, 1);
}/* Kart Yapısı */
.insta-card-wrapper {
flex: 0 0 calc(25% - 12px); /* Masaüstü 4 adet */
min-width: calc(25% - 12px);
}.insta-post-box {
position: relative;
aspect-ratio: 1/1;
border-radius: 25px; /* Sizin tasarımdaki yuvarlak hatlar */
overflow: hidden;
cursor: pointer;
background: #eee;
}.insta-post-box img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.5s ease;
}.insta-post-box:hover img {
transform: scale(1.1);
}.insta-overlay-hover {
position: absolute;
top:0; left:0; width:100%; height:100%;
background: rgba(0,0,0,0.3);
display:flex; align-items:center; justify-content:center;
opacity:0; transition: 0.3s;
}.insta-post-box:hover .insta-overlay-hover {
opacity:1;
}.insta-overlay-hover i {
color: #fff;
font-size: 32px;
}.insta-multi-icon {
position: absolute;
top: 15px; right: 15px;
color: white; font-size: 18px;
filter: drop-shadow(0 2px 4px rgba(0,0,0,0.5));
}/* Oklar */
.insta-ctrl-btn {
position: absolute;
top: 50%;
transform: translateY(-50%);
width: 45px;
height: 45px;
background: #fff;
border: none;
border-radius: 50%;
box-shadow: 0 4px 15px rgba(0,0,0,0.1);
cursor: pointer;
z-index: 10;
transition: 0.3s;
}.insta-ctrl-btn:hover {
background: var(--kolej-red);
color: #fff;
}.insta-ctrl-btn.prev { left: 0; }
.insta-ctrl-btn.next { right: 0; }/* Mobil & Tablet */
@media (max-width: 1024px) {
.insta-card-wrapper {
flex: 0 0 calc(50% - 8px); /* Tablet 2 adet */
min-width: calc(50% - 8px);
}
}@media (max-width: 768px) {
.insta-carousel-container { padding: 0 40px; }
.insta-card-wrapper {
flex: 0 0 100%; /* Mobil 1 adet */
min-width: 100%;
}
.insta-ctrl-btn { width: 35px; height: 35px; }
}/* ============================================================
MOBİL OPTİMİZASYON VE ŞIKLAŞTIRMA (Responsive Touch-Up)
============================================================ */@media (max-width: 991px) {
/* Genel Boşluk Ayarları */
.home-hakkimizda3,
.school-departments,
.courses-section,
.cta-banner-section,
.combined-full-section,
.donation-banner-section,
.instagram,
.products-gallery-section {
padding: 60px 15px !important; /* Çok geniş paddingleri daralttık */
}/* Başlık Boyutlarını Standartlaştırma */
.main-title,
.side-title,
.donation-main,
.duyuru-title,
.cta-main {
font-size: 28px !important;
line-height: 1.2 !important;
text-align: center;
}/* 1. Hakkımızda Bölümü Görsel Düzenleme */
.main-img-box {
width: 100% !important;
max-height: 250px !important;
}
.sub-img-box {
width: 60% !important;
right: 0 !important;
bottom: -20px !important;
border-width: 5px !important;
}
.about-content-box {
padding-left: 0 !important;
margin-top: 0px !important;
}/* 2. Bölümler (Departments) Grid Düzenleme */
/* Mobilde 2'li yan yana olması daha şık durur */
.dept-grid-5 {
grid-template-columns: repeat(2, 1fr) !important;
gap: 15px !important;
}
.dept-card {
height: 240px !important;
}
.dept-card h3 {
font-size: 16px !important;
}/* 3. Kurslar (Courses) Kartları */
.course-grid {
grid-template-columns: 1fr !important;
gap: 25px !important;
}
.course-card {
max-width: 100% !important;
padding: 12px !important;
}
.course-img {
height: 200px !important;
}
/* Mobilde hover efektini (kırmızı arka plan) otomatik göstermek yerine
kartın her zaman okunaklı kalmasını sağladık */
.course-card:hover {
transform: translateY(-5px) !important;
}/* 4. CTA ve Bağış Bannerları */
.cta-banner-wrapper,
.donation-banner-wrapper {
padding: 40px 20px 160px 20px !important; /* Arka plan görseli için alt boşluk */
border-radius: 30px !important;
}
.banner-flex {
flex-direction: column !important;
text-align: center;
}
.cta-text-box, .donation-text-box {
flex-direction: column !important;
align-items: center !important;
padding: 0 !important;
}
.cta-content, .donation-content {
padding: 0 !important;
text-align: center !important;
}
.cta-arrow, .donation-arrow {
display: none; /* Mobilde ok karmaşa yaratabilir */
}
.cta-premium-btn, .donation-premium-btn {
padding: 15px 35px !important;
font-size: 18px !important;
}/* 5. FAQ ve Görsel Bölümü (Combined Section) */
.combined-full-section {
min-height: auto !important;
}
.half-side {
padding: 40px 0 !important;
}
.faq-card-header {
padding: 15px 20px !important;
}
.faq-card-header h3 {
font-size: 16px !important;
}/* 6. Instagram Profil Alanı */
.profile-header {
flex-direction: column !important;
gap: 15px !important;
}
.user-info {
text-align: center;
min-width: 100% !important;
}
.user-top {
justify-content: center !important;
}
.stats {
margin: 15px 0 !important;
justify-content: center !important;
width: 100%;
border-top: 1px solid #eee;
padding-top: 15px;
}/* 7. Galeri (Products) Filtre Menüsü */
.tab-menu {
gap: 8px !important;
}
.tab-btn {
font-size: 13px !important;
padding: 6px 12px !important;
}
.gallery-grid {
grid-template-columns: repeat(2, 1fr) !important;
gap: 10px !important;
}
.product-card {
border-radius: 15px !important;
}/* 8. Duyuru Slider */
.duyuru-slider-container {
min-height: 400px !important;
}
.duyuru-item {
padding: 0 20px !important;
}
.duyuru-title {
font-size: 24px !important;
}
.duyuru-text {
font-size: 14px !important;
}
}/* Küçük Ekranlar İçin Ekstra Rötuş (iPhone SE vs.) */
@media (max-width: 480px) {
.main-title { font-size: 24px !important; }
.dept-grid-5 { grid-template-columns: repeat(2, 1fr) !important;text-align: center; justify-content: center;}
.cta-premium-btn span, .donation-premium-btn span { font-size: 16px !important; }
.insta-card-wrapper { flex: 0 0 100% !important; }
}@media(max-width:1024px){
.cta-banner-section{
display: none;
}.combined-full-section{
padding-top: 0 !important;
}}