/*
  A.T.G. PORTFOLYO - css/portfolio.css
  Portfolyo, proje detay sayfaları ve CV.
  Kullanan sayfalar: portfolyom, cv, anten-takip, atg-librarium, atolye-gelistirme, guc-dagitim, mp3-kontrol, rf-haberlesme, deprem-cadiri
  Bu dosyadaki bölümler: 8, 9
  Sıra (HTML <link> sırası bozulmamalı): base → [sayfa dosyası] → utilities → print
  Bölüm numaraları eski tek-dosya düzeninden (style.css) korunmuştur; tam harita için css/base.css başına bakın.
*/

/* ==========================================================================
   8. PORTFOLYO VE PROJE DETAY SAYFALARI
   ========================================================================== */
.portfolio-container { max-width: 1100px; margin: 0 auto; padding: 50px 20px; }
.portfolio-header { text-align: center; margin-bottom: 60px; }
.portfolio-header h1 { font-size: 40px; margin-bottom: 15px; letter-spacing: 1px; }
.portfolio-header h2 { font-size: 18px; color: var(--accent-color); margin-bottom: 25px; font-weight: 400; font-family: monospace; letter-spacing: 1.5px; }
.contact-links p { font-size: 15px; opacity: 0.7; }

.section-block { margin-bottom: 70px; }
.section-title { font-size: 26px; border-bottom: 2px solid var(--accent-color); padding-bottom: 8px; margin-bottom: 35px; display: inline-block; letter-spacing: 1px; }

.timeline-item { background-color: var(--card-bg); border: 1px solid var(--border-color); border-radius: 8px; padding: 30px; margin-bottom: 30px; box-shadow: var(--box-shadow); transition: transform 0.3s, border-color 0.3s; }
.timeline-item:hover { transform: translateY(-3px); border-color: var(--accent-color); }
.timeline-item h3 { color: var(--accent-color); margin-bottom: 20px; font-size: 22px; }
.timeline-item p, .text-content p { text-align: justify; }

.content-with-image { display: flex; gap: 40px; align-items: flex-start; }
.profile-img { width: 220px; height: auto; border-radius: 8px; border: 2px solid var(--border-color); box-shadow: var(--box-shadow); }   /* height:auto: <img width/height> öznitelikleri oranı bozmasın */
.text-content p { margin-bottom: 18px; font-size: 16px; opacity: 0.9; }

.project-images { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 15px; margin-top: 25px; }
.project-images img { width: 100%; height: 200px; object-fit: cover; border-radius: 6px; border: 1px solid var(--border-color); cursor: pointer; transition: transform 0.3s, box-shadow 0.3s; }
.project-images img:hover { transform: scale(1.02); box-shadow: 0 0 12px var(--accent-color); z-index: 2; }

/* ---- Canlı, hafif 3B kutular (portfolyom, cv ve 6 proje detay sayfası) ----
   Yalnızca "section-block--live" işaretli bölümlerdeki kutulara uygulanır (deprem-cadiri gibi kutusuz sayfalar etkilenmez;
   yeni bir sayfada kullanmak için bölüme bu sınıfı ve kutuların ilk çocuğu olarak <span class="live-led"> eklemek yeterlidir). İlke: yazıyı okumak ve resimlere bakmak asıl iş, bu yüzden her şey ölçülü: kutu hafif derinlik kazanır (katmanlı gölge,
   üst kenar ışığı, sol kenarda ince neon şerit), ekranın ortasına gelen kutu yumuşakça belirginleşir, fare üzerindeyken çok az eğilir ve kenarında
   imleci izleyen ince bir ışık dolaşır. Metnin yerini ve okunurluğunu bozan hareket yoktur. Davranış: js/script.js §15. */
.section-block--live .timeline-item {
    --tx: 0deg; --ty: 0deg; --tz: 0px; --px: 50%; --py: 0%;
    --rail: 36%;                                   /* sol kenar neon şeridinin yoğunluğu */
    --edge-hi: rgba(255, 255, 255, 0.05);          /* üst kenar ışığı */
    --sh-rest: 0 16px 24px -16px rgba(0, 0, 0, 0.6);
    --sh-live: 0 26px 34px -18px rgba(0, 0, 0, 0.62);
    position: relative;
    border-radius: 14px;
    background-image: linear-gradient(165deg, rgba(0, 230, 118, 0.035), transparent 38%);
    background-image: linear-gradient(165deg, color-mix(in srgb, var(--accent-color) 5%, transparent), transparent 38%);
    box-shadow: var(--sh-rest), inset 0 1px 0 var(--edge-hi), inset 3px 0 0 rgba(0, 230, 118, 0.3);
    box-shadow: var(--sh-rest), inset 0 1px 0 var(--edge-hi), inset 3px 0 0 color-mix(in srgb, var(--accent-color) var(--rail), transparent);
    transform: perspective(1700px) translateZ(var(--tz)) rotateX(var(--tx)) rotateY(var(--ty));
    transition: transform 0.45s cubic-bezier(0.2, 0.8, 0.2, 1), border-color 0.35s ease, box-shadow 0.45s ease;
}
body.light-mode .section-block--live .timeline-item {
    --edge-hi: rgba(255, 255, 255, 0.85);
    --sh-rest: 0 14px 22px -16px rgba(15, 23, 42, 0.26);
    --sh-live: 0 24px 32px -18px rgba(15, 23, 42, 0.3);
    --rail: 42%;
}
/* Ekranın ortasındaki kutu (okuma odağı): yalnızca neon şerit ve kenar yumuşakça belirginleşir; sürekli göze çarpmasın diye parlama yoktur */
.section-block--live .timeline-item.is-active {
    --rail: 58%; --tz: 4px;
    border-color: rgba(0, 230, 118, 0.3);
    border-color: color-mix(in srgb, var(--accent-color) 32%, var(--border-color));
    z-index: 1;
}
/* Fare üzerindeki kutu: öne yükselir, kenarı ve gölgesi belirginleşir */
.section-block--live .timeline-item:hover {
    --rail: 80%; --tz: 10px;
    border-color: rgba(0, 230, 118, 0.5);
    border-color: color-mix(in srgb, var(--accent-color) 55%, var(--border-color));
    box-shadow: var(--sh-live), inset 0 1px 0 var(--edge-hi), inset 3px 0 0 rgba(0, 230, 118, 0.7), 0 0 20px rgba(0, 230, 118, 0.08);
    box-shadow: var(--sh-live), inset 0 1px 0 var(--edge-hi), inset 3px 0 0 color-mix(in srgb, var(--accent-color) var(--rail), transparent), 0 0 20px color-mix(in srgb, var(--accent-color) 10%, transparent);
    z-index: 2;
}

/* Kenarda imleci izleyen ince ışık (yalnızca kenarlık: maske ile içi oyulur) */
.section-block--live .timeline-item::before {
    content: ''; position: absolute; inset: -1px; padding: 1px; border-radius: inherit;
    background: radial-gradient(300px circle at var(--px) var(--py), var(--accent-color), transparent 70%);
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    mask-composite: exclude;
    opacity: 0; transition: opacity 0.4s ease; pointer-events: none;
}
/* İçeride imleci izleyen çok soluk ışık (yazıların arkasında kalır, okunurluğu bozmaz) */
.section-block--live .timeline-item::after {
    content: ''; position: absolute; inset: 0; z-index: -1; border-radius: inherit;
    background: radial-gradient(420px circle at var(--px) var(--py), rgba(0, 230, 118, 0.07), transparent 70%);
    background: radial-gradient(420px circle at var(--px) var(--py), color-mix(in srgb, var(--accent-color) 9%, transparent), transparent 70%);
    opacity: 0; transition: opacity 0.4s ease; pointer-events: none;
}
.section-block--live .timeline-item:hover::before, .section-block--live .timeline-item:hover::after { opacity: 1; }
/* Etkileşimli PCB (iframe) içeren kutu: derinlik/eğim uygulanmaz. İçerideki canlı sayfa eğilip büyütülünce bulanıklaşırdı ve fare iframe'e
   girince kutu yarı eğik donup kalırdı. Neon şerit, kenar çizgisi, ışık ve durum ledi aynen çalışır (js/script.js §15 bu kutularda eğmez). */
.section-block--live .timeline-item:has(.embed-frame),
.section-block--live .timeline-item:has(.embed-frame):hover,
.section-block--live .timeline-item:has(.embed-frame).is-active { --tz: 0px; }
.section-block--live .timeline-item.is-active::before { opacity: 0.35; }
.section-block--live .timeline-item.is-active::after { opacity: 0.5; }
/* Köşede küçük durum ışığı: sönük durur, kutu öne çıkınca yanar (sürekli yanıp sönme yok, göz yormasın).
   Portfolyomda başlığın (article > h3) sözde öğesi, CV'de kutunun ilk çocuğu olan <span class="live-led"> kullanılır. */
.section-block--live article.timeline-item > h3::after,
.section-block--live .live-led {
    content: ''; position: absolute; top: 15px; right: 17px; width: 7px; height: 7px; border-radius: 50%;
    background: var(--accent-color); opacity: 0.28; box-shadow: 0 0 0 transparent;
    transition: opacity 0.4s ease, box-shadow 0.4s ease;
    pointer-events: none;
}
.section-block--live .timeline-item.is-active > h3::after,
.section-block--live .timeline-item.is-active > .live-led { opacity: 0.75; box-shadow: 0 0 5px var(--accent-color); }
.section-block--live .timeline-item:hover > h3::after,
.section-block--live .timeline-item:hover > .live-led { opacity: 1; box-shadow: 0 0 9px var(--accent-color); }

/* CV: beceri çubuklarının dolgusu çok hafif parlar (kutu öne çıkınca biraz daha) */
.section-block--live .skill-progress { box-shadow: 0 0 6px rgba(0, 230, 118, 0.25); box-shadow: 0 0 6px color-mix(in srgb, var(--accent-color) 30%, transparent); transition: box-shadow 0.45s ease; }
.section-block--live .timeline-item:hover .skill-progress,
.section-block--live .timeline-item.is-active .skill-progress { box-shadow: 0 0 9px rgba(0, 230, 118, 0.45); box-shadow: 0 0 9px color-mix(in srgb, var(--accent-color) 55%, transparent); }

/* Derece / sonuç cümlesi: yazının içinde kaybolmasın diye ince çizgili, çok hafif bir vurgu şeridi */
.section-block--live .timeline-item p.result-note {
    margin-top: 16px; padding: 9px 14px; border-radius: 8px;
    border-left: 3px solid var(--accent-color);
    background: rgba(0, 230, 118, 0.06);
    background: color-mix(in srgb, var(--accent-color) 7%, transparent);
}
/* Resimler: hafif derinlik; üzerine gelince çok az yükselir (lightbox davranışı aynı) */
.section-block--live .project-images img {
    border-radius: 8px;
    box-shadow: 0 10px 18px -12px rgba(0, 0, 0, 0.6);
    transition: transform 0.35s cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 0.35s ease;
}
body.light-mode .section-block--live .project-images img { box-shadow: 0 10px 18px -12px rgba(15, 23, 42, 0.3); }
.section-block--live .project-images img:hover { transform: translateY(-3px) scale(1.02); box-shadow: 0 14px 22px -12px rgba(0, 0, 0, 0.65), 0 0 12px var(--accent-color); }
body.light-mode .section-block--live .project-images img:hover { box-shadow: 0 14px 22px -12px rgba(15, 23, 42, 0.35), 0 0 10px var(--accent-color); }

/* Giriş: kutu görünür olunca aşağıdan hafifçe yükselerek belirir (bir kez). .js-reveal sınıfını JS ekler; JS çalışmazsa kutular hep görünür */
html.js-reveal .section-block--live .timeline-item:not(.is-in) { opacity: 0; }
.section-block--live .timeline-item.is-in { animation: timeline-in 0.7s cubic-bezier(0.2, 0.8, 0.2, 1) backwards; }
@keyframes timeline-in {
    from { opacity: 0; transform: perspective(1700px) translateY(26px) rotateX(5deg); }
}
@media (prefers-reduced-motion: reduce) {
    .section-block--live .timeline-item, .section-block--live .project-images img, .section-block--live .skill-progress { transition: none; animation: none; }
    .section-block--live .timeline-item.is-in { animation: none; }
}

@media (max-width: 768px) {
    .content-with-image { flex-direction: column; }
    .profile-img { width: 100%; max-width: 300px; margin: 0 auto; }
}

/* ==========================================================================
   9. CV SAYFASI
   ========================================================================== */
.cv-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; }
@media (max-width: 900px) { .cv-grid { grid-template-columns: 1fr; } }
.cert-link { color: var(--text-color); text-decoration: none; transition: color 0.3s ease, text-shadow 0.3s ease; cursor: pointer; display: inline-block; }
.cert-link:hover { color: var(--accent-color); text-shadow: 0 0 8px rgba(0, 230, 118, 0.4); }

.skill-box { margin-bottom: 25px; }
.skill-info { display: flex; justify-content: space-between; margin-bottom: 8px; font-weight: 600; font-size: 15px; }
.skill-bar { width: 100%; height: 10px; background-color: var(--border-color); border-radius: 10px; overflow: hidden; }
.skill-progress { height: 100%; background-color: var(--accent-color); border-radius: 10px; width: 0; transition: width 1.5s ease-in-out; }

.cv-list { list-style: none; padding-left: 15px; border-left: 2px solid var(--border-color); }
.cv-list li { position: relative; padding-left: 20px; margin-bottom: 20px; }
.cv-list li::before { content: ''; position: absolute; left: -21px; top: 5px; width: 10px; height: 10px; background-color: var(--accent-color); border-radius: 50%; box-shadow: 0 0 10px var(--accent-color); }

.download-btn { display: inline-block; padding: 12px 30px; margin-top: 20px; background-color: transparent; color: var(--text-color); border: 2px solid var(--accent-color); border-radius: 6px; text-decoration: none; font-weight: 600; font-size: 16px; transition: 0.3s; }
.download-btn:hover { background-color: var(--accent-color); color: var(--bg-color); box-shadow: 0 0 15px var(--accent-color); }
.cv-date { font-family: monospace; color: var(--accent-color); font-size: 14px; display: block; margin-bottom: 5px; }

/* Önizleme (embed) modu: portfolyo/proje sayfaları (ortak kurallar: base.css §15b) */
/* Önizlemede içerik ilk kalın başlıktan itibaren, üst boşluk olmadan görünsün */
.is-embedded .portfolio-container { padding-top: 0; }