/* Scroll Reveal — efektler.php kütüphanesi */

    /* ============================================================
       ✅ KÜTÜPHANE DOSYASI NOTU
       ------------------------------------------------------------
       - Bir efekti başka sayfaya taşımak için:
         1) Bu dosyada "FX-XX" arat
         2) CSS bloÄŸunu kopyala
         3) Gerekirse aynı FX'in JS bloğunu da kopyala (bu dosyada çoğu FX saf CSS)
         4) HTML'de: class="rvl fx-XX-...." ekle
    ============================================================ */

    
    

    /* Her Bloğun Temel Yapısı */
    .block {
      background: #fff; border-radius: 15px; padding: 25px; margin-bottom: 220px;
      display: flex; gap: 20px; box-shadow: 0 4px 15px rgba(0,0,0,0.10);
      align-items: center;
    }
    .block img {
      width: 360px; height: 400px; border-radius: 10px; background: #ddd;
      object-fit: cover; display: block;
    }
    .tech-info {
      background: #272822; color: #f8f8f2; padding: 15px; border-radius: 8px;
      font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
      font-size: 12px; flex: 1; line-height: 1.55;
    }
    .tech-info b { color: #66d9ef; } /* Parametre isimleri mavi */
    .tech-info i { color: #a6e22e; font-style: normal; } /* DeÄŸerler yeÅŸil */

    /* ============================================================
       ✅ SCROLL REVEAL MOTORU (1 KEZ EKLENİR)
       - Hatalar düzeltildi:
         * transition-property netleÅŸtirildi
         * filter reset "none" yapıldı (sadece blur değil, tüm filtreleri sıfırlar)
         * 3D flip titremesi için backface/preserve-3d eklendi
         * reduce-motion desteÄŸi eklendi
    ============================================================ */
    .rvl {
      opacity: 0;
      visibility: hidden;
      transform: translate(0,0); /* bazı tarayıcılar için başlangıç stabil */
      filter: none;
      backface-visibility: hidden;
      transform-style: preserve-3d;

      /* Varsayılan geçiş (efekt bazında override edilebilir) */
      transition-property: transform, opacity, filter, box-shadow, clip-path, -webkit-mask-position, mask-position, border-color;
      transition-duration: var(--rvl-dur, .8s);
      transition-timing-function: var(--rvl-ease, ease-out);
      transition-delay: var(--rvl-delay, 0s);
      will-change: transform, opacity, filter;
    }

    .rvl.active {
      opacity: 1;
      visibility: visible;
      transform: translate(0,0) scale(1) rotate(0) skew(0) rotateX(0) rotateY(0);
      filter: none;
    }

    /* Kullanıcı hassasiyeti: animasyon istemeyenler */
    @media (prefers-reduced-motion: reduce) {
      .rvl {
        transition: none !important;
        opacity: 1 !important;
        visibility: visible !important;
        transform: none !important;
        filter: none !important;
      }
      .fx-58-float.active { animation: none !important; }
      .fx-60-glitch.active { animation: none !important; }
    }

    /* ============================================================
       ✅ 60 EFEKT (FX-01 → FX-60)
       - Her satır yanında: numara + isim + ne yaptığı
       - Bazı efektlerde .active özel hali gerekir (clip-path, line, border, float, glitch)
    ============================================================ */

    /* --------------------------
       A) TEMEL REVEAL / HAREKET
    -------------------------- */

    /* ===================== FX-01 ===================== */
    .fx-1-fade { } /* 1. FADE: Sadece belirme (opacity motorla gelir) */

    /* ===================== FX-02 ===================== */
    .fx-2-slide-up { transform: translateY(60px); } /* 2. SLIDE UP: Aşağıdan yukarı */

    /* ===================== FX-03 ===================== */
    .fx-3-slide-down { transform: translateY(-60px); } /* 3. SLIDE DOWN: Yukarıdan aşağı */

    /* ===================== FX-04 ===================== */
    .fx-4-slide-left { transform: translateX(-100px); } /* 4. SLIDE LEFT: Soldan giriÅŸ */

    /* ===================== FX-05 ===================== */
    .fx-5-slide-right { transform: translateX(100px); } /* 5. SLIDE RIGHT: SaÄŸdan giriÅŸ */

    /* ===================== FX-06 ===================== */
    .fx-6-diag-left-top { transform: translate(-90px, -90px); } /* 6. DIAGONAL LT: Sol üstten çapraz */

    /* ===================== FX-07 ===================== */
    .fx-7-diag-left-bottom { transform: translate(-90px, 90px); } /* 7. DIAGONAL LB: Sol alttan çapraz */

    /* ===================== FX-08 ===================== */
    .fx-8-drop-in { transform: translateY(-140px); --rvl-ease: cubic-bezier(0.175, 0.885, 0.32, 1.275); } /* 8. DROP IN: Yukarıdan düşüş (spring) */

    /* ===================== FX-09 ===================== */
    .fx-9-soft-spring { transform: translateY(90px); --rvl-ease: cubic-bezier(0.175, 0.885, 0.32, 1.275); } /* 9. SOFT SPRING: YumuÅŸak yay */

    /* ===================== FX-10 ===================== */
    .fx-10-bounce-up { transform: translateY(110px); --rvl-ease: cubic-bezier(0.68, -0.55, 0.265, 1.55); } /* 10. BOUNCE UP: Sert zıplama */

    /* ===================== FX-11 ===================== */
    .fx-11-stagger-1 { transform: translateY(30px); --rvl-delay: .20s; } /* 11. STAGGER-1: 200ms gecikme */

    /* ===================== FX-12 ===================== */
    .fx-12-stagger-2 { transform: translateY(30px); --rvl-delay: .40s; } /* 12. STAGGER-2: 400ms gecikme */


    /* --------------------------
       B) ÖLÇEK / PREMIUM
    -------------------------- */

    /* ===================== FX-13 ===================== */
    .fx-13-zoom-in { transform: scale(.5); } /* 13. ZOOM IN: Küçükten büyür */

    /* ===================== FX-14 ===================== */
    .fx-14-zoom-out { transform: scale(1.5); } /* 14. ZOOM OUT: Büyükten küçülür */

    /* ===================== FX-15 ===================== */
    .fx-15-shrink-fade { transform: scale(1.12) translateY(20px); } /* 15. SHRINK FADE: Hafif küçülerek oturur */

    /* ===================== FX-16 ===================== */
    .fx-16-zoom-out-fade { transform: scale(1.22); } /* 16. ZOOM OUT + FADE: Premium yakınlaşma hissi */

    /* ===================== FX-17 ===================== */
    .fx-17-apple-style { transform: scale(.92) translateY(28px); --rvl-ease: cubic-bezier(0.4, 0, 0.2, 1); --rvl-dur: 1s; } /* 17. APPLE STYLE: Premium easing + scale */

    /* ===================== FX-18 ===================== */
    .fx-18-rotate-scale { transform: rotate(-180deg) scale(.55); --rvl-dur: 1s; } /* 18. ROTATE+SCALE: Dönerek oturur */

    /* ===================== FX-19 ===================== */
    .fx-19-wide-reveal { transform: scaleX(0); transform-origin: left; } /* 19. WIDE REVEAL: Soldan geniÅŸleyerek */

    /* ===================== FX-20 ===================== */
    .fx-20-vertical-reveal { transform: scaleY(0); transform-origin: top; } /* 20. VERTICAL REVEAL: Üstten açılır */


    /* --------------------------
       C) ROTATE / SPIRAL / HYBRID
    -------------------------- */

    /* ===================== FX-21 ===================== */
    .fx-21-rotate-left { transform: rotate(-45deg); } /* 21. ROTATE LEFT: Sola yatık başlar */

    /* ===================== FX-22 ===================== */
    .fx-22-rotate-right { transform: rotate(45deg); } /* 22. ROTATE RIGHT: Sağa yatık başlar */

    /* ===================== FX-23 ===================== */
    .fx-23-rotate-full { transform: rotate(-180deg) scale(.85); } /* 23. ROTATE FULL: Büyük dönüş */

    /* ===================== FX-24 ===================== */
    .fx-24-spiral { transform: rotate(180deg) scale(0); --rvl-dur: 1s; } /* 24. SPIRAL: Dön + büyü */

    /* ===================== FX-25 ===================== */
    .fx-25-slide-rotate { transform: translateY(90px) rotate(10deg); } /* 25. SLIDE+ROTATE: Kay + dön */

    /* ===================== FX-26 ===================== */
    .fx-26-wobble { transform: translateY(40px) rotate(-8deg); --rvl-dur: .9s; } /* 26. WOBBLE: Hafif titrek giriÅŸ */
    .fx-26-wobble.active { animation: fxWobble .7s ease-out both; } /* 26. WOBBLE: active ile kısa wobble */
    @keyframes fxWobble {
      0% { transform: translateY(0) rotate(0); }
      30% { transform: translateY(0) rotate(2deg); }
      55% { transform: translateY(0) rotate(-2deg); }
      75% { transform: translateY(0) rotate(1deg); }
      100% { transform: translateY(0) rotate(0); }
    }


    /* --------------------------
       D) 3D / FLIP / PERSPECTIVE
    -------------------------- */

    /* ===================== FX-27 ===================== */
    .fx-27-flip-x { transform: perspective(1000px) rotateX(90deg); } /* 27. FLIP X: Ãœstten katlanma */

    /* ===================== FX-28 ===================== */
    .fx-28-flip-y { transform: perspective(1000px) rotateY(90deg); } /* 28. FLIP Y: Yandan dönme */

    /* ===================== FX-29 ===================== */
    .fx-29-flip-down { transform: perspective(1000px) rotateX(-90deg); transform-origin: top; } /* 29. FLIP DOWN: Kapak gibi */

    /* ===================== FX-30 ===================== */
    .fx-30-flip-right-3d { transform: perspective(1000px) rotateY(-90deg); transform-origin: right; } /* 30. FLIP RIGHT 3D */

    /* ===================== FX-31 ===================== */
    .fx-31-door-open { transform: perspective(1000px) rotateY(-90deg); transform-origin: left; } /* 31. DOOR OPEN: Menteşeli açılış */

    /* ===================== FX-32 ===================== */
    .fx-32-perspective-deep { transform: perspective(1000px) translateZ(-400px); } /* 32. PERSPECTIVE DEEP: Arkadan gelir */

    /* ===================== FX-33 ===================== */
    .fx-33-3d-deep { transform: perspective(1000px) translateZ(-800px) rotateX(20deg); --rvl-dur: 1s; } /* 33. 3D DEEP: Daha agresif */

    /* ===================== FX-34 ===================== */
    .fx-34-tilt-in { transform: perspective(1000px) rotateX(-30deg) translateY(50px); } /* 34. TILT IN: 3D eÄŸimli giriÅŸ */

    /* ===================== FX-35 ===================== */
    .fx-35-3d-pop { transform: perspective(1000px) translateZ(180px) scale(.92); } /* 35. 3D POP: Önden gelir gibi */

    /* ===================== FX-36 ===================== */
    .fx-36-3d-card { transform: perspective(1000px) rotateY(18deg) translateX(-18px) scale(.94); } /* 36. 3D CARD: Kart eÄŸimi */


    /* --------------------------
       E) SKEW / DISTORT
    -------------------------- */

    /* ===================== FX-37 ===================== */
    .fx-37-skew-up { transform: skewY(6deg) translateY(45px); } /* 37. SKEW UP: Yamuk yükselme */

    /* ===================== FX-38 ===================== */
    .fx-38-skew-in { transform: skewX(-20deg) translateX(-55px); } /* 38. SKEW IN: Yamuk giriÅŸ */

    /* ===================== FX-39 ===================== */
    .fx-39-skew-basic { transform: skewY(10deg) translateY(55px); } /* 39. SKEW BASIC: Daha belirgin */

    /* ===================== FX-40 ===================== */
    .fx-40-skew-strong { transform: skewX(-28deg) translateX(-80px) scale(.95); } /* 40. SKEW STRONG: Güçlü yamuk */

    /* ===================== FX-41 ===================== */
    .fx-41-shear-snap { transform: skewX(18deg) translateY(35px); --rvl-ease: cubic-bezier(.2, .9, .2, 1); } /* 41. SHEAR SNAP: Hızlı düzleşme */


    /* --------------------------
       F) BLUR / FILTER / COLOR
    -------------------------- */

    /* ===================== FX-42 ===================== */
    .fx-42-blur { filter: blur(15px); } /* 42. BLUR: Bulanıktan nete */

    /* ===================== FX-43 ===================== */
    .fx-43-blur-to-clear { filter: blur(20px) brightness(.5); --rvl-dur: 1.1s; } /* 43. BLUR+DARK → CLEAR */

    /* ===================== FX-44 ===================== */
    .fx-44-gray-to-color { filter: grayscale(100%); } /* 44. GRAY → COLOR: Renk açılır */

    /* ===================== FX-45 ===================== */
    .fx-45-saturate-pop { filter: saturate(.2); --rvl-dur: 1s; } /* 45. SATURATE POP: Soluktan canlıya */

    /* ===================== FX-46 ===================== */
    .fx-46-contrast-lift { filter: contrast(.6); --rvl-dur: 1s; } /* 46. CONTRAST LIFT: Flat → güçlü */

    /* ===================== FX-47 ===================== */
    .fx-47-hue-shift { filter: hue-rotate(80deg); --rvl-dur: 1s; } /* 47. HUE SHIFT: Ton kaydırma (renk döner) */

    /* ===================== FX-48 ===================== */
    .fx-48-bright-rise { filter: brightness(.55); --rvl-dur: 1s; } /* 48. BRIGHT RISE: Karanlıktan normale */


    /* --------------------------
       G) CLIP / MASK REVEAL
    -------------------------- */
    
    /* 49–52: clip-path'i .block yerine img üzerinde uygula */
    .fx-49-clip-left img    { clip-path: inset(0% 100% 0% 0%); transition: clip-path 1s ease; }   /* 49. CLIP LEFT: Soldan aç */
    .fx-49-clip-left.active img { clip-path: inset(0% 0% 0% 0%); }                                  /* 49 active tam görünür */
    
    .fx-50-clip-top img     { clip-path: inset(100% 0% 0% 0%); transition: clip-path 1s ease; }   /* 50. CLIP TOP: Üstten aç */
    .fx-50-clip-top.active img  { clip-path: inset(0% 0% 0% 0%); }                                  /* 50 active tam görünür */
    
    .fx-51-clip-right img   { clip-path: inset(0% 0% 0% 100%); transition: clip-path 1s ease; }   /* 51. CLIP RIGHT: Sağdan aç */
    .fx-51-clip-right.active img { clip-path: inset(0% 0% 0% 0%); }                                 /* 51 active tam görünür */
    
    .fx-52-clip-bottom img  { clip-path: inset(0% 0% 100% 0%); transition: clip-path 1s ease; }   /* 52. CLIP BOTTOM: Alttan aç */
    .fx-52-clip-bottom.active img { clip-path: inset(0% 0% 0% 0%); }                                /* 52 active tam görünür */
    
    


    /* ===================== FX-53 ===================== */
    .fx-53-mask-slide {
      /* Safari için -webkit-mask kullanıyoruz */
      -webkit-mask-image: linear-gradient(90deg, #000 50%, transparent 50%);
      -webkit-mask-size: 200% 100%;
      -webkit-mask-position: 100% 0;

      mask-image: linear-gradient(90deg, #000 50%, transparent 50%);
      mask-size: 200% 100%;
      mask-position: 100% 0;

      --rvl-dur: 1s;
    } /* 53. MASK SLIDE: Maske kayarak açılır */
    .fx-53-mask-slide.active {
      -webkit-mask-position: 0 0;
      mask-position: 0 0;
    } /* 53. MASK SLIDE: active maske açılır */

    /* ===================== FX-54 ===================== */
    .fx-54-wipe-mask {
      -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 15%, #000 85%, transparent 100%);
      -webkit-mask-size: 250% 100%;
      -webkit-mask-position: 120% 0;

      mask-image: linear-gradient(90deg, transparent 0%, #000 15%, #000 85%, transparent 100%);
      mask-size: 250% 100%;
      mask-position: 120% 0;

      --rvl-dur: 1.1s;
      --rvl-ease: cubic-bezier(0.2, 0.9, 0.2, 1);
    } /* 54. WIPE MASK: Işık bandı gibi wipe */
    .fx-54-wipe-mask.active {
      -webkit-mask-position: 0 0;
      mask-position: 0 0;
    } /* 54. WIPE MASK: active */


    /* --------------------------
       H) SHADOW / BORDER / LINE
    -------------------------- */

    /* ===================== FX-55 ===================== */
    .fx-55-shadow-reveal { transform: translateY(18px); box-shadow: 0 0 0 rgba(0,0,0,0); } /* 55. SHADOW REVEAL: Gölge ile derinlik */
    .fx-55-shadow-reveal.active { box-shadow: 0 20px 50px rgba(0,0,0,0.18); } /* 55. SHADOW REVEAL: active gölge */

    /* ===================== FX-56 ===================== */
    .fx-56-border-draw { border: 2px solid transparent; } /* 56. BORDER DRAW: Kenarlık sonradan görünür */
    .fx-56-border-draw.active { border-color: rgba(59, 130, 246, 0.95); } /* 56. BORDER DRAW: active border */

    /* ===================== FX-57 ===================== */
    .fx-57-line-draw { position: relative; } /* 57. LINE DRAW: Alt çizgi çizilir */
    .fx-57-line-draw::after {
      content: "";
      position: absolute;
      left: 25px;
      right: 25px;
      bottom: 16px;
      height: 2px;
      background: rgba(59, 130, 246, 0.95);
      transform: scaleX(0);
      transform-origin: left;
      transition: transform 0.9s ease;
    } /* 57. LINE DRAW: başlangıç çizgi yok */
    .fx-57-line-draw.active::after { transform: scaleX(1); } /* 57. LINE DRAW: active çizgi */


    /* --------------------------
       I) FLOAT / PARALLAX / GLITCH
    -------------------------- */

    /* ===================== FX-58 ===================== */
    .fx-58-float { } /* 58. FLOAT: active olunca sürekli süzülme */
    .fx-58-float.active { animation: fxFloat 3s ease-in-out infinite; } /* 58. FLOAT: active animation */
    @keyframes fxFloat { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-14px); } }

    /* ===================== FX-59 ===================== */
    .fx-59-parallax-img { overflow: hidden; } /* 59. IMAGE PARALLAX: Kutu içinde resim farklı hareket eder */
    .fx-59-parallax-img img { transform: scale(1.25) translateY(40px); transition: transform 1.5s ease-out; } /* 59. IMAGE PARALLAX: başlangıç */
    .fx-59-parallax-img.active img { transform: scale(1) translateY(0); } /* 59. IMAGE PARALLAX: active */

    /* ===================== FX-60 ===================== */
    .fx-60-glitch { transform: translateX(30px); --rvl-dur: .25s; } /* 60. GLITCH: hızlı sarsıntı giriş */
    .fx-60-glitch.active { animation: fxGlitch .45s steps(2, end) 1; } /* 60. GLITCH: active kısa glitch */
    @keyframes fxGlitch {
      0%   { transform: translateX(0); }
      15%  { transform: translateX(-8px); }
      30%  { transform: translateX(10px); }
      45%  { transform: translateX(-6px); }
      60%  { transform: translateX(6px); }
      75%  { transform: translateX(-3px); }
      100% { transform: translateX(0); }
    }
    
    
    
    
    
    
    
    
    
    
    
    /* =====================================================================
       ✅ FX-61 / FX-62 — STICKY INNER PARALLAX (Card içi resim kaydırma)
       - Card: 400px (metin + resim)
       - Sol resim maskesi: 320px (istersen 400 de yaparsın)
       - Resim: daha uzun (ör: 320x900)
       - Scroll ederken: card sticky kalır, SADECE resim içeride akar
    ===================================================================== */
    /* Ortak parallax card (section) */
    .fx-61-parx,
    .fx-62-parx{
      --parx-card-h: 400px;            /* card yüksekliği */
      --parx-sticky-top: 110px;        /* sticky top (header varsa ayarla) */
      --parx-gap: 20px;
      --parx-left-w: 320px;            /* sol resim alanı genişliği */
      --parx-left-h: 320px;            /* sol resim mask yüksekliği (400 de yapabilirsin) */
    
      /* JS bunu hesaplayıp yazacak: resim ne kadar kayacak? */
      --parx-travel: 400px;
    
      /* Section yüksekliği = card + travel -> scroll mesafesi oluşturur */
      height: calc(var(--parx-card-h) + var(--parx-travel));
      margin: 120px 0;
      position: relative;
    }
    /* Sticky card kutusu (senin .block temasına uyumlu) */
    .fx-61-parx .parx-wrap,
    .fx-62-parx .parx-wrap{
      height: var(--parx-card-h);
      display: flex;
      gap: var(--parx-gap);
      align-items: center;
    
      background: #fff;
      border-radius: 15px;
      padding: 25px;
      box-shadow: 0 4px 15px rgba(0,0,0,0.10);
    
      position: sticky;
      top: var(--parx-sticky-top);
      overflow: hidden;
    }
    /* Sol görsel maskesi */
    .fx-61-parx .parx-left,
    .fx-62-parx .parx-left{
      width: var(--parx-left-w);
      height: var(--parx-left-h);
      border-radius: 10px;
      overflow: hidden;
      background: #ddd;
      flex: 0 0 var(--parx-left-w);
    }
    /* İçeride kayan görsel */
    .fx-61-parx .parx-img,
    .fx-62-parx .parx-img{
      width: 100%;
      height: auto;                 /* uzun resim lazım */
      display: block;
      transform: translateY(0);
      will-change: transform;
    }
    /* SaÄŸ metin */
    .fx-61-parx .parx-right,
    .fx-62-parx .parx-right{
      flex: 1;
    }
    /* Tech info senin temana uyum (istersen aynı bırak) */
    .fx-61-parx .tech-info,
    .fx-62-parx .tech-info{
      margin-top: 10px;
    }
    /* FX-62 daha “premium yavaş” his için küçük smoothing */
    .fx-62-parx .parx-img{
      transition: transform 0.12s linear; /* küçük smoothing */
    }
    /* Mobil: alt alta */
    @media (max-width: 820px){
      .fx-61-parx .parx-wrap,
      .fx-62-parx .parx-wrap{
        flex-direction: column;
        height: auto;               /* mobilde sticky yerine normal akış daha iyi */
        position: relative;
        top: auto;
      }
      .fx-61-parx,
      .fx-62-parx{
        height: auto;               /* mobilde section boyunu kilitleme */
      }
      .fx-61-parx .parx-left,
      .fx-62-parx .parx-left{
        width: 100%;
        max-width: 420px;
      }
    }

	
	/* ===================== fx-stagger-up-63 ===================== */
    .fx-stagger-up-63 { transform: translateY(50px); } 				/* Aşağıdan yukarı geliş */    
    .delay-1 { transition-delay: 0.1s; } 							/* 1. Resim 100ms sonra */
    .delay-2 { transition-delay: 0.2s; } 							/* 2. Resim 200ms sonra */
    .delay-3 { transition-delay: 0.3s; } 							/* 3. Resim 300ms sonra */
    
    /* ===================== fx-stagger-right-64 ===================== */
	/* --- YAN YANA RESİMLER İÇİN SOLDAN SAĞA SIRALI GELİŞ --- */
	.fx-stagger-right-64 { transform: translateX(-50px); }     /* Başlangıçta 50px solda bekle */
	.delay64-1 { transition-delay: 0.1s; }                     /* 1. Resim: 100ms gecikme */
	.delay64-2 { transition-delay: 0.2s; }                     /* 2. Resim: 200ms gecikme */
	.delay64-3 { transition-delay: 0.3s; }                     /* 3. Resim: 300ms gecikme */
	.delay64-4 { transition-delay: 0.4s; }                     /* 4. Resim: 300ms gecikme */
    
    
    
    
    /* =====================================================================
       ✅ AILL THEME PATCH (NON-DESTRUCTIVE)
       - Mevcut CSS'e dokunmadan: Dark/Light + Mobile uyum katmanı
       - Bu blok en altta kalmalı (override için)
    ===================================================================== */
    
    /* 1) Renk değişkenleri (Light varsayılan) */
    :root{
      --ui-bg: #f0f2f5;
      --ui-text: #0f172a;
      --ui-card: #ffffff;
      --ui-border: rgba(15, 23, 42, 0.10);
      --ui-shadow: 0 4px 15px rgba(0,0,0,0.10);
      --ui-muted: rgba(15, 23, 42, 0.65);
    
      --ui-code-bg: #272822;
      --ui-code-text: #f8f8f2;
      --ui-code-k: #66d9ef;
      --ui-code-v: #a6e22e;
    }
    
    /* 2) OS Dark Mode otomatik */
    @media (prefers-color-scheme: dark){
      :root{
        --ui-bg: #0b1220;
        --ui-text: #e6edf7;
        --ui-card: #0f1a2b;
        --ui-border: rgba(230, 237, 247, 0.10);
        --ui-shadow: 0 10px 30px rgba(0,0,0,0.45);
        --ui-muted: rgba(230, 237, 247, 0.70);
    
        --ui-code-bg: #0b1020;
        --ui-code-text: #e7eefb;
        --ui-code-k: #77d7ff;
        --ui-code-v: #9be86d;
      }
    }
    
    /* 3) Ä°stersen manuel theme (opsiyonel)
       <html class="theme-dark"> veya <html class="theme-light">
    */
    html.theme-dark{
      --ui-bg: #0b1220;
      --ui-text: #e6edf7;
      --ui-card: #0f1a2b;
      --ui-border: rgba(230, 237, 247, 0.10);
      --ui-shadow: 0 10px 30px rgba(0,0,0,0.45);
      --ui-muted: rgba(230, 237, 247, 0.70);
    
      --ui-code-bg: #0b1020;
      --ui-code-text: #e7eefb;
      --ui-code-k: #77d7ff;
      --ui-code-v: #9be86d;
    }
    html.theme-light{
      --ui-bg: #f0f2f5;
      --ui-text: #0f172a;
      --ui-card: #ffffff;
      --ui-border: rgba(15, 23, 42, 0.10);
      --ui-shadow: 0 4px 15px rgba(0,0,0,0.10);
      --ui-muted: rgba(15, 23, 42, 0.65);
    
      --ui-code-bg: #272822;
      --ui-code-text: #f8f8f2;
      --ui-code-k: #66d9ef;
      --ui-code-v: #a6e22e;
    }
    
    /* 4) Mevcut class'ları BOZMADAN renkleri variable'a bağla */
    
    
    .block{
      background: var(--ui-card) !important;
      box-shadow: var(--ui-shadow) !important;
      border: 1px solid var(--ui-border);
    }
    
    .tech-info{
      background: var(--ui-code-bg) !important;
      color: var(--ui-code-text) !important;
      border: 1px solid rgba(255,255,255,0.08);
    }
    
    .tech-info b{ color: var(--ui-code-k) !important; }
    .tech-info i{ color: var(--ui-code-v) !important; }
    
    /* Dark’ta resim çok parlaksa hafif dengele (istersen kapatırsın) */
    @media (prefers-color-scheme: dark){
      .block img{
        filter: saturate(0.95) contrast(1.02);
      }
    }
    
    /* =====================================================================
       ✅ MOBILE / RESPONSIVE PATCH
       - Masaüstü düzeni bozmadan sadece küçük ekranlarda alt alta
    ===================================================================== */
    
    /* Tablet ve altı: bloklar alt alta, resim full genişlik */
    @media (max-width: 920px){
      
    
      
    
      .block{
        flex-direction: column;
        align-items: stretch;
        gap: 14px;
        padding: 18px;
        margin-bottom: 140px;
      }
    
      .block img{
        width: 100% !important;
        height: auto !important;      /* taşmayı bitirir */
        max-height: 420px;            /* aşırı uzamasın */
        aspect-ratio: 16 / 10;        /* görüntü dengeli dursun */
      }
    
      .tech-info{
        font-size: 12px;
        overflow-wrap: anywhere;      /* uzun kelimeler taşmasın */
        word-break: break-word;
      }
    }
    
    /* Telefon: daha sıkı padding, daha küçük gölge */
    @media (max-width: 520px){
      
    
      .block{
        border-radius: 14px;
        padding: 14px;
        margin-bottom: 110px;
      }
    
      .block img{
        border-radius: 12px;
        max-height: 360px;
        aspect-ratio: 4 / 3;
      }
    
      .tech-info{
        font-size: 11.5px;
        line-height: 1.6;
        padding: 12px;
        border-radius: 12px;
      }
    
      /* Clip efektlerinde küçük ekranda daha pürüzsüz geçiş */
      .fx-49-clip-left img,
      .fx-50-clip-top img,
      .fx-51-clip-right img,
      .fx-52-clip-bottom img{
        transition-duration: .9s !important;
      }
    }
    
	
    /* =====================================================================
       ✅ PARALLAX BLOKLARI (FX-61/62 parx) — Responsive düzeltme
       - Senin mevcut parallax CSS'in üzerine minimum override
    ===================================================================== */    
    /* Büyük ekranda bile taşma olmasın */
    .fx-61-parx .parx-left,
    .fx-62-parx .parx-left{
      width: min(var(--parx-left-w), 42vw);
    }    
    /* Tablet/telefon: sticky yerine normal akış + full width görsel */
    @media (max-width: 920px){
      .fx-61-parx .parx-wrap,
      .fx-62-parx .parx-wrap{
        position: relative !important;
        top: auto !important;
      }
    
      .fx-61-parx .parx-left,
      .fx-62-parx .parx-left{
        width: 100% !important;
        max-width: none !important;
        height: auto !important;
      }
    
      .fx-61-parx .parx-img,
      .fx-62-parx .parx-img{
        width: 100%;
        height: auto;
        transform: none !important; /* mobilde JS parallax devre dışı gibi */
      }
    }
    
    /* =====================================================================
       ✅ KÜÇÜK BONUS: Seçim (highlight) rengi dark/light uyumlu
    ===================================================================== */
    ::selection{
      background: rgba(59,130,246,0.28);
    }