/*
  A.T.G. PORTFOLYO - css/home.css
  Ana sayfa (index.html): ızgara, 3B vitrin kartları, slider, Mors giriş + Mors çözücü paneli, ziyaretçi sayacı.
  Kullanan sayfalar: index.html
  Bu dosyadaki bölümler: 4, 14, 14b, 16
  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.
*/

/* ==========================================================================
   4. ANA SAYFA: IZGARA VE KARTLAR
   ========================================================================== */
.grid-container { max-width: 1200px; margin: 40px auto; padding: 0 20px; }
.grid-section { display: grid; gap: 30px; }
.top-cards { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); margin-bottom: 60px; }

.card {
    background-color: var(--card-bg); border: 1px solid var(--border-color);
    border-radius: 12px; padding: 25px; width: 320px; text-decoration: none; color: var(--text-color);
    transition: transform 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
    display: flex; flex-direction: column; justify-content: flex-start;
}
.card:hover {
    transform: translateY(-5px); border-color: var(--accent-color);
    box-shadow: 0 0 15px rgba(0, 230, 118, 0.15);
}
.card h2 { color: var(--accent-color); font-size: 22px; margin-bottom: 15px; border-bottom: 1px solid var(--border-color); padding-bottom: 10px; }
.card p { font-size: 15px; line-height: 1.6; opacity: 0.85; margin: 0; text-align: justify; }

.vitrin-header { text-align: center; margin-bottom: 30px; }
.vitrin-header a {
    font-size: 22px; color: var(--accent-color); text-decoration: none; font-weight: 600;
    font-family: monospace; transition: 0.3s; display: inline-block;
    border: 1px solid var(--accent-color); padding: 10px 20px; border-radius: 8px;
}
.vitrin-header a:hover { text-shadow: 0 0 8px rgba(0, 230, 118, 0.4); background: rgba(0, 230, 118, 0.1); }

.bottom-cards { grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); }
.project-card { padding: 0; overflow: hidden; position: relative; border-radius: 10px; border: 1px solid var(--border-color); height: 220px; }
.project-card img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.4s ease; }
.project-card:hover img { transform: scale(1.08); }
.project-overlay { position: absolute; bottom: 0; left: 0; width: 100%; background: rgba(0, 0, 0, 0.85); padding: 15px; border-top: 1px solid var(--accent-color); transition: background 0.3s; }
.project-card:hover .project-overlay { background: rgba(0, 0, 0, 0.95); }
.project-overlay p { margin: 0; color: var(--accent-color); font-weight: bold; font-size: 14px; text-align: center; }

/* ==========================================================================
   14. ANA SAYFAYA ÖZEL: VİTRİN (3B KARTLAR + ÖNİZLEME) VE SLIDER
   ========================================================================== */
.hero-section { text-align: center; margin: 60px 0 50px 0; }
.hero-section h1 { font-size: 42px; margin-bottom: 10px; }
.hero-section h2 { font-size: 18px; color: var(--accent-color); font-family: monospace; letter-spacing: 1px; }

.boxes-container { display: flex; justify-content: center; gap: 30px; flex-wrap: wrap; max-width: 1100px; margin: 0 auto; padding: 0 20px; }

/* --- 3B VİTRİN KARTLARI (Portfolyom / CV / İletişim) ---
   Her kart kendi perspektifiyle eğik durur ve altında gerçek bir "kalınlık" plakası vardır.
   Üzerine gelince (ya da telefonda ekranın ortasına gelince: .is-active) öne döner, fareyi
   hafifçe izler ve gittiği sayfanın girişi saydam biçimde belirir (önizleme: js/script.js §12).
   Eğim açıları değişkenlerle verilir: --ry/--rx (duruş), --mx/--my (fare, JS yazar), --tz (öne çıkma). */
.boxes-container .card {
    --ry: -5deg; --rx: 3deg; --tz: 0px;
    --mx: 0deg;  --my: 0deg;
    --dx: 0; --dy: 0;
    --px: 50%; --py: 0%; --glow: 0;
    position: relative;
    transform-style: preserve-3d;
    transform: perspective(1100px) translateZ(var(--tz)) rotateX(calc(var(--rx) + var(--my))) rotateY(calc(var(--ry) + var(--mx)));
    box-shadow: var(--card-shadow-3d);
    /* İmleci izleyen çok hafif yeşil ışık (kartın zemini üzerinde, yazıların arkasında) */
    background-image: radial-gradient(320px circle at var(--px) var(--py), color-mix(in srgb, var(--accent-color) calc(var(--glow) * 14%), transparent), transparent 70%);
    /* Kart bırakılırken yaylanarak yerine oturur (hafif taşma) */
    transition: transform 0.7s cubic-bezier(0.22, 1.35, 0.36, 1), border-color 0.3s ease, box-shadow 0.45s ease, --glow 0.45s ease;
    will-change: transform;
}
/* Parıltının yumuşakça açılıp kapanabilmesi için --glow bir sayı olarak tanıtılır (desteklemeyen tarayıcıda anında geçer, bozulmaz) */
@property --glow { syntax: '<number>'; inherits: true; initial-value: 0; }
/* Kenarlıkta imleci izleyen ışık halkası (yalnızca kenarlık görünür: maske ile içi oyulur) */
.boxes-container .card::after {
    content: ''; position: absolute; inset: -1px; padding: 1px; border-radius: inherit;
    background: radial-gradient(240px 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.35s ease; pointer-events: none;
}
.boxes-container .card::before {
    content: ''; position: absolute; inset: -1px; border-radius: inherit;
    background: var(--border-color);
    transform: translateZ(-18px);
    pointer-events: none;
    transition: background 0.3s ease, opacity 0.3s ease;
}
.boxes-container .card h2,
.boxes-container .card p {
    transform: translateZ(40px);
    translate: calc(var(--dx) * -9px) calc(var(--dy) * -7px);   /* yazılar fareden hafifçe uzaklaşır: derinlik hissi */
    transition: opacity 0.4s ease, translate 0.25s ease-out;
}

.boxes-container .card:hover,
.boxes-container .card:focus-visible,
.boxes-container .card.is-active {
    --ry: 0deg; --rx: 0deg; --tz: 52px; --glow: 1;
    border-color: var(--accent-color);
    box-shadow: var(--card-shadow-3d), 0 0 22px rgba(0, 230, 118, 0.2);
    box-shadow: var(--card-shadow-3d), 0 0 22px color-mix(in srgb, var(--accent-color) 26%, transparent);
    /* Fare kartın üzerindeyken eğim fareyi çabuk izler (bırakınca yukarıdaki yaylı geçiş devreye girer) */
    transition: transform 0.28s cubic-bezier(0.2, 0.9, 0.3, 1.1), border-color 0.3s ease, box-shadow 0.45s ease, --glow 0.35s ease;
    z-index: 2;
}
.boxes-container .card:hover::after,
.boxes-container .card:focus-visible::after,
.boxes-container .card.is-active::after { opacity: 1; }
.boxes-container .card:active { --tz: 30px; }
/* Biri öne çıkınca diğer kartlar bir adım geri çekilir */
.boxes-container:has(.card:hover) .card:not(:hover):not(:focus-visible),
.boxes-container:has(.card:focus-visible) .card:not(:hover):not(:focus-visible),
.boxes-container:has(.card.is-active) .card:not(.is-active) { --tz: -16px; }
.boxes-container .card:hover::before,
.boxes-container .card:focus-visible::before,
.boxes-container .card.is-active::before { background: var(--accent-color); opacity: 0.5; }

/* Üç kart yan yana sığdığında: soldaki ve sağdaki kart ortadakine doğru eğilir, ortadaki öne çıkar */
@media (min-width: 1060px) {
    .boxes-container .card:nth-child(1) { --ry: 8deg;  --rx: 2deg; }
    .boxes-container .card:nth-child(2) { --ry: 0deg;  --rx: 2deg; --tz: 20px; }
    .boxes-container .card:nth-child(3) { --ry: -8deg; --rx: 2deg; }
    /* Üzerine gelince: öne çıkma mesafesi korunur, yana yatık duruş yarıya iner (kalanını fare eğimi verir) */
    .boxes-container .card:nth-child(n):hover,
    .boxes-container .card:nth-child(n):focus-visible,
    .boxes-container .card:nth-child(n).is-active { --tz: 52px; }
    .boxes-container .card:nth-child(1):hover, .boxes-container .card:nth-child(1):focus-visible, .boxes-container .card:nth-child(1).is-active { --ry: 4deg; }
    .boxes-container .card:nth-child(3):hover, .boxes-container .card:nth-child(3):focus-visible, .boxes-container .card:nth-child(3).is-active { --ry: -4deg; }
}

.boxes-container .card.preview-ready:hover .card-preview iframe,
.boxes-container .card.preview-ready:focus-visible .card-preview iframe,
.boxes-container .card.preview-ready.is-active .card-preview iframe { opacity: 0.55; }
.boxes-container .card.preview-ready:hover p,
.boxes-container .card.preview-ready:focus-visible p,
.boxes-container .card.preview-ready.is-active p { opacity: 0; }

@media (prefers-reduced-motion: reduce) {
    .boxes-container .card,
    .boxes-container .card::before,
    .boxes-container .card::after,
    .boxes-container .card h2,
    .boxes-container .card p { transition: none; }
}

.slider-section { max-width: 1100px; margin: 80px auto; padding: 0 20px; }

/* Ana sayfadaki 'Tüm Projeler' ve 'Blog' butonları: GitHub butonuyla (.github-btn) aynı tasarım.
   Normalde saydam + yeşil çerçeve; fare üstüne gelince dolu yeşil + neon parlama.
   Renkler tema değişkenlerinden gelir, açık/koyu tema kendiliğinden uyar. */
.slider-header { 
    display: flex; justify-content: flex-start; align-items: center; flex-wrap: wrap; gap: 12px;
    border-bottom: 1px solid var(--border-color, #333);
    padding-bottom: 15px; margin-bottom: 25px; width: 100%;
}
.all-projects-link { 
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 12px 30px;
    background-color: transparent;
    color: var(--text-color);
    border: 2px solid var(--accent-color);
    border-radius: 6px;
    text-decoration: none;
    font-size: 16px; 
    font-weight: 600; 
    transition: all 0.3s ease; 
}
.all-projects-link:hover { 
    background-color: var(--accent-color);
    color: var(--bg-color);
    box-shadow: 0 0 20px var(--accent-color);
}
/* Çizgi hizasında sağa yaslı buton (Blog) */
.all-projects-link--end { margin-left: auto; }

/* Buton içindeki SVG ikon: GitHub ikonu gibi düz, yazı rengini alır (hover'da rengi kendiliğinden değişir) */
.link-icon { width: 24px; height: 24px; flex: 0 0 auto; fill: currentColor; }

/* Telefon: 'Blog' üstte ortada, 'Tüm Projeler' tam genişlik ve ortalı yazı, hemen altında çizgiyle birlikte */
@media (max-width: 600px) {
    .slider-header { justify-content: center; gap: 14px; }
    .all-projects-link { padding: 11px 20px; font-size: 15px; }
    .all-projects-link:not(.all-projects-link--end) { width: 100%; justify-content: center; text-align: center; }
    .all-projects-link--end { margin-left: 0; min-width: 150px; justify-content: center; order: -1; }   /* küçük 'Blog' düğmesi üstte, geniş 'Tüm Projeler' alttaki çizgiye oturur */
}

.slider-wrapper { width: 100%; overflow: hidden; white-space: nowrap; position: relative; padding-bottom: 15px; }
.slider-track { display: inline-flex; gap: 20px; animation: scrollLeft 25s linear infinite; }
.slider-track:hover { animation-play-state: paused; }

.slide-item { 
    min-width: 280px; height: 220px; background-color: var(--card-bg, #1E1E1E); border: 1px solid var(--border-color, #333); 
    border-radius: 10px; position: relative; overflow: hidden; display: block; 
    text-decoration: none; transition: transform 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease; 
}
.slide-item img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; z-index: 1; transition: transform 0.4s ease; }
.slide-overlay {
    position: absolute; bottom: 0; left: 0; width: 100%; z-index: 2;
    background: var(--overlay-bg, rgba(0, 0, 0, 0.85)); padding: 15px;
    border-top: 1px solid var(--accent-color, #00E676);
    transition: background 0.3s ease;
}
.slide-overlay span { color: var(--accent-color, #00E676); font-weight: bold; font-size: 14px; display: block; text-align: center; margin: 0; white-space: normal; }

.slide-item:hover { transform: scale(1.02); border-color: var(--accent-color, #00E676); box-shadow: 0 0 15px rgba(0, 230, 118, 0.4); z-index: 10; }
.slide-item:hover img { transform: scale(1.08); }
.slide-item:hover .slide-overlay { background: var(--overlay-bg-hover, rgba(0, 0, 0, 0.95)); }

@keyframes scrollLeft { 0% { transform: translateX(0); } 100% { transform: translateX(calc(-50% - 10px)); } }

/* --- Gizli giriş: ana sayfanın en altındaki Mors kodu (easter egg) ---
   Mors alfabesinde "SÜRPRİZ" (js/script.js §16): telgraf gibi harf harf, noktalar parlar, çizgiler soldan uzayarak çıkar; kelime bitince yenilenir.
   Yerleşim gerçek Mors oranındadır: nokta = 1 birim (--m), çizgi = 3, harf içi boşluk = 1, harf arası boşluk = 3 (kelime toplam 73 birim).
   Sönük "iz" (::before) hep görünür; parlayan kısmı (b) JS oynatır. Altında "mors kodunu çöz" ipucu durur.
   Dikey boşluk sayesinde özel PCB imleci koda gelse bile alttaki yazı ve parıltı rahatça okunur. */
.secret-dots {
    display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 14px;
    width: max-content; max-width: 100%; margin: 10px auto 0; padding: 20px 18px 60px;
    text-decoration: none; -webkit-tap-highlight-color: transparent;
    --m: clamp(2.6px, calc((100vw - 64px) / 73), 6px);   /* bir Mors birimi: telefonda küçülür, kelime ekrana sığar */
    --trace: 0.18;                                        /* henüz gönderilmemiş sembollerin sönük iz parlaklığı */
}
body.light-mode .secret-dots { --trace: 0.26; }
.secret-morse {
    display: flex; justify-content: center; align-items: center; gap: calc(var(--m) * 3);
    transition: transform 0.35s ease;
}
.morse-char { display: flex; align-items: center; gap: var(--m); }
.morse-sym { position: relative; display: block; width: var(--m); height: var(--m); }
.morse-sym--dash { width: calc(var(--m) * 3); }
.morse-sym::before, .morse-sym b {
    content: ''; position: absolute; left: 0; top: 0; width: 100%; height: 100%;
    border-radius: var(--m); background: var(--accent-color);
}
.morse-sym::before { opacity: var(--trace); transition: opacity 0.35s ease; }
.morse-sym b {
    opacity: 0;                                          /* görünürlüğü JS (Web Animations) yönetir */
    box-shadow: 0 0 calc(var(--m) * 1.8) var(--accent-color);
    box-shadow: 0 0 calc(var(--m) * 1.8) color-mix(in srgb, var(--accent-color) 75%, transparent);
}
.secret-morse.is-static .morse-sym b { opacity: 0.86; } /* "hareketi azalt" açıkken tüm kod sabit görünür */
.secret-dots__hint {
    font-family: monospace; font-size: 11.5px; font-weight: 600; letter-spacing: 2.2px;
    color: var(--accent-color); opacity: 0.58;
    transition: opacity 0.35s ease, transform 0.35s ease, text-shadow 0.35s ease;
}
body.light-mode .secret-dots__hint { opacity: 0.72; }
.secret-dots:hover .secret-morse, .secret-dots:focus-visible .secret-morse { transform: scale(1.04); }
.secret-dots:hover .morse-sym::before, .secret-dots:focus-visible .morse-sym::before { opacity: calc(var(--trace) + 0.2); }
.secret-dots:hover .secret-dots__hint, .secret-dots:focus-visible .secret-dots__hint {
    opacity: 0.95; transform: translateY(1px);
    text-shadow: 0 0 10px color-mix(in srgb, var(--accent-color) 45%, transparent);
}
.secret-dots:focus-visible { outline: 1px dashed var(--accent-color); outline-offset: -6px; border-radius: 10px; }
@media (prefers-reduced-motion: reduce) {
    .secret-morse, .morse-sym::before, .secret-dots__hint { transition: none; }
}

/* ==========================================================================
   14b. MORS ÇÖZÜCÜ PANELİ (index.html #secret-decoder; mantık js/morse.js)
   ==========================================================================
   Gizli Mors girişine (.secret-dots) ilk dokunuşta açılır. Üstte kelimenin harf yuvaları (her yuvada o harfin Mors kodu), altında seçili
   yuvanın kodu + 4 harf seçeneği, en altta örnek kelimeler (yalnızca Mors kodu; dokununca büyüteçle açılır, 5 hak) ve kelimeyi doğrudan
   yazma alanı. Haklar bitip çözülecek yuva kalmazsa panel "failed" olur ve yeni kelimelerle baştan başlar. Çözülünce yuvalar sırayla
   yanar, iz çizgisi çekilir, "Kısa devreye bağlan" düğmesi belirir (halka atar) ve .secret-dots "kapı açık" görünümüne geçer (data-gate="open").
   Renkler yalnızca tema değişkenlerindendir (koyu/açık tema kendiliğinden); "hareketi azalt" açıkken animasyon yoktur.
   Hiçbir yerde blur/backdrop-filter yok (telefonda pahalı). Mors birimi --u: yuvalarda ve hedef kodda büyük, kelimelerde küçük. */
.decoder {
    --u: 3.4px;                                           /* 1 Mors birimi: nokta = 1, çizgi = 3 */
    --dc-bad: #FF5252;                                    /* parazit (yanlış) rengi */
    width: min(560px, calc(100% - 32px)); margin: 0 auto 72px; padding: 12px 14px 14px;
    scroll-margin-bottom: 84px;                           /* açılırken ekranın sağ altındaki sabit "yukarı çık" düğmesinin altında kalmasın */
    font-family: monospace; text-align: left; color: var(--text-color);
    background: var(--card-bg); border: 1px solid var(--border-color); border-left: 3px solid var(--accent-color); border-radius: 10px;
    box-shadow: var(--box-shadow);
    animation: decoder-in 0.35s ease both;
}
body.light-mode .decoder { --dc-bad: #D32F2F; }
.decoder[hidden], .decoder [hidden] { display: none; }
.secret-dots[aria-expanded="true"] { padding-bottom: 16px; }   /* panel açıkken ipucu yazısı ile panel arasındaki boşluk daralır */

.decoder__head { display: flex; align-items: center; gap: 8px; }
.decoder__led { flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--accent-color); box-shadow: 0 0 8px var(--accent-color); }
.decoder__title { flex: 1; min-width: 0; font-size: 11px; font-weight: 700; letter-spacing: 1.6px; color: var(--accent-color); }
.decoder__close {
    flex: none; width: 44px; height: 44px; margin: -8px -10px -8px 0;
    font: 24px/1 monospace; color: var(--text-color); opacity: 0.65;
    background: none; border: 0; border-radius: 8px; cursor: pointer; transition: opacity 0.2s ease;
}
.decoder__close:hover, .decoder__close:focus-visible { opacity: 1; }
.decoder__close:focus-visible { outline: 2px solid var(--accent-color); outline-offset: -2px; }

/* Mors kodunun nokta/çizgi çizimi (js/morse.js üretir): nokta = --u, çizgi = 3 x --u */
.decoder-glyph { display: inline-flex; align-items: center; gap: var(--u); height: calc(var(--u) * 1.4); }
.decoder-glyph i { display: block; flex: none; width: var(--u); height: var(--u); border-radius: var(--u); background: currentColor; }
.decoder-glyph i.is-dash { width: calc(var(--u) * 3); }

/* Harf yuvaları */
.decoder__slots { display: grid; grid-template-columns: repeat(var(--n, 7), minmax(0, 1fr)); gap: 5px; margin-top: 8px; }
.decoder__slot {
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 7px;
    min-height: 60px; padding: 9px 2px 7px; font: inherit; color: var(--accent-color); cursor: pointer;
    background: var(--card-bg); background: color-mix(in srgb, var(--accent-color) 5%, var(--card-bg));
    border: 1px solid var(--border-color); border-radius: 8px;
    transition: border-color 0.2s ease, background 0.2s ease, opacity 0.2s ease, box-shadow 0.2s ease;
    -webkit-tap-highlight-color: transparent;
}
.decoder__slot-ch { font-size: 18px; font-weight: 700; line-height: 1; color: var(--text-color); opacity: 0.4; }
.decoder__slot.is-wait { opacity: 0.55; }                       /* karşılığı henüz örnek kelimelerde yok */
.decoder__slot.is-sel { opacity: 1; border-color: var(--accent-color); box-shadow: inset 0 0 0 1px var(--accent-color), 0 0 14px color-mix(in srgb, var(--accent-color) 30%, transparent); }
.decoder__slot.is-known { opacity: 1; border-color: var(--accent-color); background: var(--card-bg); background: color-mix(in srgb, var(--accent-color) 14%, var(--card-bg)); }
.decoder__slot.is-known .decoder__slot-ch { color: var(--accent-color); opacity: 1; }
.decoder__slot:focus-visible { outline: 2px solid var(--accent-color); outline-offset: 2px; }
.decoder__slot.is-pop { animation: decoder-pop 0.5s ease; }

/* İz çizgisi: çözülünce soldan sağa çekilir, ucundaki led yanar (devre kapanır) */
.decoder__trace { position: relative; height: 2px; margin: 12px 5px 0; background: color-mix(in srgb, var(--accent-color) 22%, transparent); }
.decoder__trace::before {
    content: ''; position: absolute; inset: 0; background: var(--accent-color);
    transform: scaleX(0); transform-origin: left center; transition: transform 1s cubic-bezier(0.3, 0.7, 0.2, 1) 0.65s;
}
.decoder__trace::after {
    content: ''; position: absolute; right: -5px; top: -3px; width: 8px; height: 8px; border-radius: 50%;
    background: var(--accent-color); opacity: 0.25; transition: opacity 0.3s ease 1.55s, box-shadow 0.3s ease 1.55s;
}
.decoder[data-state="solved"] .decoder__trace::before { transform: scaleX(1); }
.decoder[data-state="solved"] .decoder__trace::after { opacity: 1; box-shadow: 0 0 12px var(--accent-color); }

.decoder__status { min-height: 2.9em; margin: 10px 0 0; font-size: 12px; line-height: 1.45; opacity: 0.85; }   /* iki satırlık yer ayrılır: yazı değişince panel zıplamaz */
.decoder[data-state="solved"] .decoder__status { text-align: center; font-weight: 700; letter-spacing: 1.2px; color: var(--accent-color); opacity: 1; animation: decoder-in 0.5s ease 1.2s both; }

/* Seçili yuvanın kodu (büyük) + harf seçenekleri */
.decoder__target {
    --u: 6px; display: flex; align-items: center; gap: 14px; margin-top: 8px; padding: 11px 12px; color: var(--accent-color);
    border: 1px dashed var(--accent-color); border-radius: 8px;
}
.decoder__target.is-wait { color: var(--text-color); border-color: var(--border-color); opacity: 0.8; }
.decoder__target-glyph { flex: none; }
.decoder__target-label { flex: 1; min-width: 0; font-size: 12px; line-height: 1.45; color: var(--text-color); }
.decoder__options { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin-top: 10px; }
.decoder__opt {
    min-height: 50px; font: 700 21px/1 monospace; color: var(--text-color); cursor: pointer;
    background: var(--bg-color); border: 1px solid var(--border-color); border-radius: 8px;
    transition: border-color 0.2s ease, color 0.2s ease, transform 0.15s ease; -webkit-tap-highlight-color: transparent;
}
.decoder__opt:hover:not(:disabled), .decoder__opt:focus-visible { border-color: var(--accent-color); color: var(--accent-color); }
.decoder__opt:focus-visible { outline: 2px solid var(--accent-color); outline-offset: 2px; }
.decoder__opt:active:not(:disabled) { transform: scale(0.96); }
.decoder__opt.is-wrong { color: var(--dc-bad); border-color: var(--dc-bad); opacity: 0.55; text-decoration: line-through; cursor: not-allowed; animation: decoder-shake 0.35s ease; }

/* Örnek kelimeler + büyüteç hakları. Her kart bir düğmedir: KAPALI kartta yalnızca Mors kodu görünür (harflerin yerinde soluk "?"),
   dokununca büyüteç kartın üstünden geçer, harfler ve anlam açılır ve 1 hak harcanır (js/morse.js). Alakasız kelime (VOLT gibi)
   görünüşte ötekilerden FARKSIZDIR; bilerek. */
.decoder__words-head { display: flex; align-items: center; gap: 8px; margin: 16px 0 6px; }
.decoder__label { flex: 1; min-width: 0; margin: 0; font-size: 10.5px; letter-spacing: 1.8px; opacity: 0.7; }
.decoder__rights-label { flex: none; font-size: 10px; letter-spacing: 1.6px; opacity: 0.6; }
.decoder__rights { flex: none; display: inline-flex; align-items: center; gap: 6px; color: var(--accent-color); }
.decoder-lens, .decoder-word__lens, .decoder-word__tap { fill: none; stroke: currentColor; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.decoder-lens { flex: none; width: 17px; height: 17px; transition: opacity 0.3s ease, transform 0.3s ease; }
.decoder-lens.is-used { opacity: 0.2; transform: scale(0.8); }

.decoder__words { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.decoder-word {
    position: relative; display: flex; flex-direction: column; align-items: center; gap: 4px; min-width: 0; padding: 9px 6px 6px; overflow: hidden;
    font: inherit; color: inherit; text-align: center; cursor: pointer;
    background: var(--card-bg); background: color-mix(in srgb, var(--bg-color) 45%, var(--card-bg));
    border: 1px solid var(--border-color); border-radius: 8px;
    transition: border-color 0.2s ease, opacity 0.25s ease, background 0.25s ease; -webkit-tap-highlight-color: transparent;
}
.decoder-word:hover:not(.is-open):not(.is-dim), .decoder-word:focus-visible { border-color: var(--accent-color); }
.decoder-word:focus-visible { outline: 2px solid var(--accent-color); outline-offset: 2px; }
.decoder-word.is-open { cursor: default; border-color: var(--accent-color); background: color-mix(in srgb, var(--accent-color) 9%, var(--card-bg)); }
.decoder-word.is-dim { opacity: 0.5; cursor: default; }                          /* hak bitti ya da sinyal kayboldu: kapalı kartlar artık açılamaz */
.decoder-word__letters { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 8px; min-width: 0; }
.decoder-ch { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.decoder-ch b { display: block; min-width: 0.6em; height: 17px; font-size: 17px; line-height: 17px; }
.decoder-ch b:empty::before { content: '?'; opacity: 0.22; }                      /* henüz bakılmadı */
.decoder-ch .decoder-glyph { --u: 2.8px; color: var(--accent-color); }
.decoder-glyph.is-hint { outline: 1px solid var(--accent-color); outline-offset: 3px; border-radius: 3px; filter: drop-shadow(0 0 4px var(--accent-color)); animation: decoder-hint 1.1s ease-in-out infinite; }
.decoder-word__gloss { display: block; min-height: 1.3em; max-width: 100%; font-size: 10.5px; line-height: 1.3; overflow-wrap: anywhere; opacity: 0.7; }   /* anlam satırının yeri hep ayrılır: açılınca kart zıplamaz */
.decoder-word__tap { position: absolute; top: 5px; right: 5px; width: 12px; height: 12px; color: var(--accent-color); opacity: 0.5; pointer-events: none; }
.decoder-word.is-open .decoder-word__tap, .decoder-word.is-dim .decoder-word__tap { display: none; }

/* Büyüteç geçişi: kapalıyken görünmez; .is-looking (js/morse.js ~1,5 sn tutar) iken kartın üstünden soldan sağa geçer, harfler sırayla netleşir */
.decoder-word__lens { position: absolute; top: 3px; left: -34px; width: 32px; height: 32px; color: var(--accent-color); opacity: 0; pointer-events: none; }
.decoder-word__lens circle { fill: rgba(128, 128, 128, 0.12); fill: color-mix(in srgb, var(--accent-color) 16%, transparent); }
.decoder-word.is-looking .decoder-word__lens { animation: decoder-lens 0.95s ease-in-out both; }
.decoder-word.is-looking .decoder-ch b { animation: decoder-focus 0.5s ease both; animation-delay: calc(var(--j, 0) * 90ms + 320ms); }
.decoder-word.is-looking .decoder-word__gloss { animation: decoder-fade 0.4s ease 0.85s both; }

/* Haklar bitti, çözülecek yuva kalmadı: "sinyal kayboldu"; düğmedeki dolum çubuğu yeni tahtaya geçişi gösterir (süre: js/morse.js CFG.retryMs → --retry) */
.decoder[data-state="failed"] .decoder__status { font-weight: 700; color: var(--dc-bad); opacity: 1; }
.decoder__retry {
    position: relative; display: flex; align-items: center; justify-content: center; overflow: hidden; width: 100%; min-height: 46px; margin-top: 10px; padding: 0 12px;
    font: 700 12px monospace; letter-spacing: 1.4px; color: var(--accent-color); background: transparent; border: 1px solid var(--accent-color); border-radius: 8px; cursor: pointer;
}
.decoder__retry::before { content: ''; position: absolute; inset: 0; background: var(--accent-color); opacity: 0.22; transform: scaleX(0); transform-origin: left center; animation: decoder-retry var(--retry, 4.2s) linear forwards; pointer-events: none; }
.decoder__retry:hover, .decoder__retry:focus-visible { box-shadow: 0 0 12px var(--accent-color); }
.decoder__retry:focus-visible { outline: 2px solid var(--text-color); outline-offset: 2px; }

/* Kelimeyi doğrudan yazma alanı */
.decoder__direct { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 16px; padding-top: 12px; border-top: 1px dashed var(--border-color); }
.decoder__direct-label { flex: 1 0 100%; font-size: 11px; opacity: 0.75; }
.decoder__input {
    flex: 1 1 140px; min-width: 0; height: 46px; padding: 0 12px; font: 16px monospace; letter-spacing: 2px;   /* 16px: iOS yazı alanına odaklanınca sayfayı yakınlaştırmasın */
    color: var(--text-color); background: var(--bg-color); border: 1px solid var(--border-color); border-radius: 8px;
}
.decoder__input:focus { outline: none; border-color: var(--accent-color); box-shadow: 0 0 0 1px var(--accent-color); }
.decoder__input.is-bad { border-color: var(--dc-bad); animation: decoder-shake 0.35s ease; }
.decoder__ok { flex: none; height: 46px; padding: 0 20px; font: 700 13px monospace; letter-spacing: 1.5px; color: var(--bg-color); background: var(--accent-color); border: 0; border-radius: 8px; cursor: pointer; transition: box-shadow 0.2s ease; }
.decoder__ok:hover, .decoder__ok:focus-visible { box-shadow: 0 0 12px var(--accent-color); }

/* Çözüldü: yuvalar sırayla yanar, düğme belirir ve halka atar (tıklama daveti) */
.decoder[data-state="solved"] .decoder__slot { animation: decoder-lit 0.6s ease both; animation-delay: calc(var(--i, 0) * 90ms); }
.decoder__win { display: flex; justify-content: center; padding: 14px 0 4px; }
.decoder__go {
    position: relative; display: inline-flex; align-items: center; justify-content: center; min-height: 50px; padding: 0 24px;
    font: 700 14px monospace; letter-spacing: 1px; text-decoration: none; color: var(--bg-color); background: var(--accent-color); border-radius: 10px;
    animation: decoder-in 0.5s ease 1.9s both;
}
.decoder__go::after { content: ''; position: absolute; inset: 0; border: 2px solid var(--accent-color); border-radius: 10px; opacity: 0; pointer-events: none; animation: decoder-ring 2s ease-out 2.4s infinite; }
.decoder__go:hover, .decoder__go:focus-visible { box-shadow: 0 0 16px var(--accent-color); }
.decoder__go:focus-visible { outline: 2px solid var(--text-color); outline-offset: 3px; }

/* Kapı açıkken (çözülmüş ya da kelime yazılmış) ana sayfadaki Mors girişi: kod daha belirgin, ipucu yazısı "kapı açık · dokun" ve sağa doğru kıpırdayan ok */
.secret-dots[data-gate="open"] { --trace: 0.5; }
body.light-mode .secret-dots[data-gate="open"] { --trace: 0.55; }
.secret-dots[data-gate="open"] .secret-dots__hint { opacity: 0.95; }
.secret-dots[data-gate="open"] .secret-dots__hint::after { content: ' ›'; display: inline-block; animation: decoder-nudge 1.6s ease-in-out infinite; }

@keyframes decoder-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes decoder-lens {
    0% { left: -34px; opacity: 0; transform: scale(0.9) rotate(-8deg); }
    12% { opacity: 1; }
    50% { transform: scale(1.18) rotate(4deg); }
    88% { opacity: 1; }
    100% { left: 100%; opacity: 0; transform: scale(0.9) rotate(-8deg); }
}
@keyframes decoder-focus { from { opacity: 0; filter: blur(3px); transform: scale(1.5); } to { opacity: 1; filter: none; transform: none; } }
@keyframes decoder-fade { from { opacity: 0; } to { opacity: 0.7; } }
@keyframes decoder-retry { to { transform: scaleX(1); } }
@keyframes decoder-pop { 40% { transform: translateY(-4px) scale(1.06); } }
@keyframes decoder-lit {
    0% { transform: none; }
    40% { transform: translateY(-5px); box-shadow: 0 0 18px var(--accent-color); }
    100% { transform: none; box-shadow: 0 0 9px color-mix(in srgb, var(--accent-color) 45%, transparent); }
}
@keyframes decoder-shake { 25% { transform: translateX(-4px); } 75% { transform: translateX(4px); } }
@keyframes decoder-hint { 50% { opacity: 0.35; } }
@keyframes decoder-ring { 0% { transform: scale(1); opacity: 0.7; } 100% { transform: scale(1.14, 1.5); opacity: 0; } }
@keyframes decoder-nudge { 50% { transform: translateX(4px); } }

@media (max-width: 420px) {
    .decoder { --u: 2.7px; padding: 10px 11px 12px; }
    .decoder-ch .decoder-glyph { --u: 2.4px; }
    .decoder__opt { min-height: 52px; }
    .decoder-word { padding: 9px 5px 6px; }                    /* en geniş kelime (5 harf, ör. MÜZİK / KABLO) 360 px'te de tek satıra sığsın */
    .decoder-word__letters { column-gap: 5px; }
}
@media (max-width: 340px) {
    .decoder { --u: 2.4px; }
    .decoder-ch .decoder-glyph { --u: 2.1px; }
    .decoder-ch b { font-size: 16px; }
    .decoder__words-head { gap: 6px; }                         /* "EXAMPLE WORDS" + "LOOKS" + 5 büyüteç tek satırda kalsın */
    .decoder__label { letter-spacing: 1.1px; }
    .decoder__rights-label { letter-spacing: 1px; }
    .decoder__rights { gap: 4px; }
    .decoder-lens { width: 15px; height: 15px; }
}
@media (prefers-reduced-motion: reduce) {
    .decoder, .decoder__slot.is-pop, .decoder__opt.is-wrong, .decoder__input.is-bad, .decoder-glyph.is-hint, .decoder__go,
    .decoder-word.is-looking .decoder-word__lens, .decoder-word.is-looking .decoder-ch b, .decoder-word.is-looking .decoder-word__gloss, .decoder__retry::before,
    .decoder[data-state="solved"] .decoder__slot, .decoder[data-state="solved"] .decoder__status,
    .secret-dots[data-gate="open"] .secret-dots__hint::after { animation: none; }
    .decoder__go::after { display: none; }
    .decoder__trace::before, .decoder__trace::after, .decoder__slot, .decoder__opt, .decoder__close, .decoder__ok, .decoder-word, .decoder-lens { transition: none; }
}

/* Yazdırma: ana sayfa vitrini */
@media print {
    .slider-section { display: none !important; }
    .card { width: 100%; }
    .boxes-container .card { transform: none !important; }
    .boxes-container .card::before, .boxes-container .card::after { display: none !important; }
    .boxes-container .card { background-image: none !important; }
    .boxes-container .card h2, .boxes-container .card p { translate: none; }
}

/* ==========================================================================
   16. ZİYARETÇİ SAYACI ROZETİ (index.html, sağ alt köşe)
   ========================================================================== */
.visitor-badge {
    position: fixed; bottom: 15px; right: 15px; z-index: 1000;
    display: flex; align-items: center; overflow: hidden; border-radius: 4px;
    font-family: sans-serif; font-size: 11px; font-weight: bold; cursor: default;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.5);
    opacity: 0.3; transition: opacity 0.3s ease;
}
.visitor-badge:hover { opacity: 1; }
/* Sayaç servisi yanıt vermezse js/script.js (setupVisitorCounter) rozeti bu sınıfla gizler */
.visitor-badge--off { display: none; }
.visitor-badge__label { background-color: #2a2a2a; color: #fff; padding: 5px 8px; border: 1px solid #444; border-right: none; letter-spacing: 0.5px; }
.visitor-badge__count { background-color: #00e676; color: #121212; padding: 5px 8px; border: 1px solid #00e676; }

/* Öne çıkan simülatörler (ana sayfa, kaydırıcının altı): blog simülatörlerine bağlantı çipleri */
/* Kutu: Portfolyom / CV kartlarındaki gibi 3B ve fareyi hafifçe izler (js/script.js setupSimBox; açılar --mx/--my, öne çıkma --tz).
   Altındaki boşluk, ana sayfanın en altındaki Mors kodunun rahat görünmesi içindir. */
.home-sim {
    --rx: 2deg; --ry: 0deg; --tz: 0px;
    --mx: 0deg; --my: 0deg;
    --dx: 0; --dy: 0;
    --px: 50%; --py: 0%; --glow: 0;
    position: relative;
    max-width: 960px; margin: 46px auto 64px; padding: 30px 28px 26px; text-align: center;
    background-color: var(--card-bg);
    background-image: radial-gradient(360px circle at var(--px) var(--py), color-mix(in srgb, var(--accent-color) calc(var(--glow) * 12%), transparent), transparent 70%);
    border: 1px solid var(--border-color); border-radius: 14px;
    box-shadow: var(--card-shadow-3d);
    transform-style: preserve-3d;
    transform: perspective(1400px) translateZ(var(--tz)) rotateX(calc(var(--rx) + var(--my))) rotateY(calc(var(--ry) + var(--mx)));
    transition: transform 0.7s cubic-bezier(0.22, 1.35, 0.36, 1), border-color 0.3s ease, box-shadow 0.45s ease, --glow 0.45s ease;
    will-change: transform;
}
.home-sim::before {   /* kutunun "kalınlık" plakası */
    content: ''; position: absolute; inset: -1px; border-radius: inherit;
    background: var(--border-color); transform: translateZ(-16px);
    pointer-events: none; transition: background 0.3s ease, opacity 0.3s ease;
}
.home-sim::after {    /* kenarlıkta imleci izleyen ışık halkası */
    content: ''; position: absolute; inset: -1px; padding: 1px; border-radius: inherit;
    background: radial-gradient(260px 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.35s ease; pointer-events: none;
}
.home-sim:hover, .home-sim:focus-within, .home-sim.is-active {
    --rx: 0deg; --tz: 22px; --glow: 1;
    border-color: var(--accent-color);
    box-shadow: var(--card-shadow-3d), 0 0 22px color-mix(in srgb, var(--accent-color) 22%, transparent);
    transition: transform 0.28s cubic-bezier(0.2, 0.9, 0.3, 1.1), border-color 0.3s ease, box-shadow 0.45s ease, --glow 0.35s ease;
}
.home-sim:hover::before, .home-sim:focus-within::before, .home-sim.is-active::before { background: var(--accent-color); opacity: 0.5; }
.home-sim:hover::after, .home-sim:focus-within::after, .home-sim.is-active::after { opacity: 1; }
.home-sim__title, .home-sim__lead, .home-sim__list, .home-sim__all {
    position: relative;
    transform: translateZ(26px);
    translate: calc(var(--dx) * -7px) calc(var(--dy) * -5px);   /* içerik fareden hafifçe uzaklaşır: derinlik hissi */
    transition: translate 0.25s ease-out;
}
.home-sim__all { display: inline-block; }
@media (max-width: 720px) {
    .home-sim { --rx: 0deg; margin: 36px 16px 48px; padding: 24px 16px 22px; }
    .home-sim:hover, .home-sim:focus-within, .home-sim.is-active { --tz: 0px; }
}
@media (prefers-reduced-motion: reduce) {
    .home-sim, .home-sim::before, .home-sim::after, .home-sim__title, .home-sim__lead, .home-sim__list, .home-sim__all { transition: none; }
}
@media print {
    .home-sim { transform: none !important; background-image: none; }
    .home-sim::before, .home-sim::after { display: none !important; }
    .home-sim__title, .home-sim__lead, .home-sim__list, .home-sim__all { transform: none; translate: none; }
}
.home-sim__title { font-size: clamp(20px, 2.6vw, 26px); margin-bottom: 8px; }
.home-sim__lead { max-width: 40em; margin: 0 auto 20px; opacity: 0.85; }
.home-sim__list { list-style: none; display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; max-width: 900px; margin: 0 auto 18px; }
.home-sim__list a { display: inline-block; padding: 8px 16px; border: 1px solid var(--border-color); border-radius: 999px; color: var(--text-color); text-decoration: none; font-size: 14.5px; transition: border-color 0.2s ease, color 0.2s ease; }
.home-sim__list a:hover { border-color: var(--accent-color); color: var(--accent-color); }
.home-sim__all { color: var(--accent-color); font-weight: 600; text-decoration: none; }
.home-sim__all:hover { text-decoration: underline; }