/* ==========================================================================
   CYBERZ — About Funexagon
   HTML : index.html → "ABOUT FUNEXAGON" bölümü
   CSS  : css/home/11-about.css
   Yerlesim: solda metin, sagda tam yukseklik koyu panelde parlayan logo.
   ========================================================================== */

.about{ border-top:1px solid var(--line); background:var(--bg-0); }
.about__grid{
    display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr);
    min-height:min(640px,90svh);
}

/* — sol: metin — */
.about__copy{
    display:flex; flex-direction:column; justify-content:center; gap:16px;
    padding:clamp(56px,7vw,104px) clamp(28px,5vw,72px) clamp(56px,7vw,104px) max(var(--gutter),calc((100vw - var(--shell)) / 2 + var(--gutter)));
}
.about__title{ display:flex; flex-direction:column; line-height:.9; margin:6px 0 4px; }
.about__ghost{
    font-size:clamp(1.3rem,2.6vw,2.2rem); font-weight:700;
    letter-spacing:.22em; text-transform:uppercase;
    color:transparent; -webkit-text-stroke:1px rgba(195,206,218,.35);
}
.about__name{
    font-size:clamp(2.1rem,4.9vw,4.3rem); font-weight:900;
    letter-spacing:.01em; text-transform:uppercase;
    white-space:nowrap;                      /* tek satir: sutun daraldikca font kuculur */
    color:var(--fg);
    text-shadow:0 0 18px rgba(0,212,200,.45), 0 0 46px rgba(0,212,200,.18);
}
.about__divider{
    display:flex; align-items:center; gap:14px; margin:6px 0 10px; max-width:none;
}
.about__divider i{ display:block; width:64px; height:1px; background:var(--line-2); }
.about__divider b{
    display:block; width:6px; height:6px; background:var(--amber);
    clip-path:polygon(50% 0,100% 50%,50% 100%,0 50%);
}
.about__divider .mono{ letter-spacing:.24em; text-transform:uppercase; }
.about__copy > p:not(.eyebrow):not(.about__divider):not(.about__note){ color:var(--fg-2); max-width:58ch; }
.about__copy b{ color:var(--fg); font-weight:600; }
.about__note{ color:var(--fg-3); margin-top:2px; }
.about__cta{ margin-top:14px; gap:20px; }
.about__ghostlink{
    display:inline-flex; align-items:center; min-height:48px;
    letter-spacing:.2em; text-transform:uppercase; color:var(--fg-3);
    border-bottom:1px solid transparent;
    transition:color var(--t) var(--ease), border-color var(--t) var(--ease);
}
.about__ghostlink:hover{ color:var(--energy); border-color:var(--energy); }

/* — sag: logo paneli — */
.about__visual{
    position:relative;
    display:flex; align-items:center; justify-content:center;
    padding:clamp(40px,6vw,80px);
    background:
        radial-gradient(55% 45% at 50% 50%,rgba(0,212,200,.10),transparent 70%),
        var(--bg-1);
    border-left:1px solid var(--line);
}
.about__visual img{
    width:min(72%,460px); height:auto;
    filter:drop-shadow(0 0 22px rgba(0,212,200,.45)) drop-shadow(0 0 60px rgba(0,212,200,.18));
}

@media (max-width:900px){
    .about__grid{ grid-template-columns:1fr; min-height:0; }
    .about__copy{ padding:clamp(48px,8vw,72px) var(--gutter); }
    .about__visual{ border-left:0; border-top:1px solid var(--line); min-height:320px; }
    .about__visual img{ width:min(60%,300px); }
}