/* =========================
 *  Elif Koca · Premium Cinematic Portfolio
 *  - Modern Typography (Outfit)
 *  - Scroll & Hover Effects
 *  - Glassmorphism & Cinematic Lighting
 *  ========================= */

@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700;800&display=swap');

/* ---- Reset & base ---- */
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
    margin:0; min-height:100vh;
    font-family: 'Outfit', system-ui, -apple-system, sans-serif;
    text-rendering:optimizeLegibility;
    -webkit-font-smoothing:antialiased;
    -moz-osx-font-smoothing:grayscale;
}
img,svg,video{max-width:100%;height:auto;display:block}
a{color:inherit; transition: all 0.2s ease;}
button,input,textarea{font:inherit}
:focus-visible{outline:3px solid var(--ring);outline-offset:3px;border-radius:14px}
::selection{background:color-mix(in oklab,var(--accent) 30%, transparent);}

/* ---- Theme tokens ---- */
:root{
    --radius-xl: 28px;
    --radius-lg: 20px;
    --radius-md: 16px;
    --radius-sm: 12px;

    --shadow-sm: 0 10px 30px rgba(0,0,0,.08);
    --shadow-md: 0 30px 60px rgba(0,0,0,.15);
    --shadow-hover: 0 20px 40px rgba(0,0,0,.12);

    --ease: cubic-bezier(.2,.8,.2,1);
    --dur-1: 150ms;
    --dur-2: 300ms;
    --dur-3: 600ms;

    --container: 1160px;
    --gutter: clamp(16px, 3.8vw, 28px);
}

html[data-theme="dark"]{
    --bg0:#05070e;
    --bg1:#0a0e1a;
    --card:rgba(18, 25, 46, 0.6);
    --card2:rgba(20, 28, 54, 0.4);

    --text:#f0f4ff;
    --muted:#a3b1d6;
    --muted2:#6e7c9e;

    --border: rgba(255,255,255,.08);
    --border2: rgba(255,255,255,.18);

    --accent:#5b8def;
    --accent2:#b575ff; /* sinematik mor */
    --good:#2ec48c;
    --warn:#eab33a;

    --ring: color-mix(in oklab, var(--accent) 72%, #ffffff 12%);
    --glow: 0 0 0 1px rgba(91,141,239,.14), 0 20px 60px rgba(91,141,239,.15);
    --glass: rgba(255,255,255,.04);
}

html[data-theme="light"]{
    --bg0:#f4f6fb;
    --bg1:#ffffff;
    --card:rgba(255, 255, 255, 0.7);
    --card2:rgba(247, 249, 255, 0.6);

    --text:#0d1222;
    --muted:#4a587a;
    --muted2:#6b7999;

    --border: rgba(13, 18, 34, 0.08);
    --border2: rgba(13, 18, 34, 0.16);

    --accent:#3161f2;
    --accent2:#8c4cff;

    --good:#0ea86b;
    --warn:#d39b00;

    --ring: color-mix(in oklab, var(--accent) 70%, #0b1020 10%);
    --glow: 0 0 0 1px rgba(49,97,242,.12), 0 22px 60px rgba(49,97,242,.15);
    --glass: rgba(13, 18, 34, 0.04);
}

/* ---- Background Art (Cinematic Orbs & Grain) ---- */
body {
    background: var(--bg0);
    color: var(--text);
    overflow-x: hidden;
    position: relative;
}

.bg-orb {
    position: fixed;
    border-radius: 50%;
    filter: blur(100px);
    z-index: -2;
    opacity: 0.4;
    animation: floatOrb 25s infinite ease-in-out alternate;
    pointer-events: none;
}
.orb-1 { width: 50vw; height: 50vw; background: var(--accent2); top: -20%; left: -10%; }
.orb-2 { width: 40vw; height: 40vw; background: var(--accent); bottom: -10%; right: -10%; animation-delay: -5s; }
.orb-3 { width: 30vw; height: 30vw; background: var(--good); top: 30%; left: 40%; animation-delay: -10s; opacity: 0.2; }

@keyframes floatOrb {
    0% { transform: translate(0, 0) scale(1); }
    50% { transform: translate(5%, 10%) scale(1.1); }
    100% { transform: translate(-5%, -5%) scale(0.9); }
}

/* subtle film grain */
body::after{
    content:"";
    position:fixed; inset:-50%;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.04'/%3E%3C/svg%3E");
    pointer-events:none;
    z-index:-1;
    animation: grain 8s steps(10) infinite;
}
@keyframes grain{
    0%,100%{transform:translate(0,0)}
    20%{transform:translate(-5%, 5%)}
    40%{transform:translate(5%, -5%)}
    60%{transform:translate(2%, 5%)}
    80%{transform:translate(-5%, -2%)}
}

/* ---- Reveal Animations (Scroll Effects) ---- */
.reveal {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.8s var(--ease), transform 0.8s var(--ease);
}
.reveal.active {
    opacity: 1;
    transform: translateY(0);
}

/* ---- Layout ---- */
.container{max-width:var(--container);margin-inline:auto;padding-inline:var(--gutter)}
.stack{display:grid;gap:clamp(14px,2vw,18px)}
.grid{display:grid;gap:clamp(14px,2vw,18px)}
.grid.cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}
.grid.cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}
@media (max-width: 980px){ .grid.cols-3{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (max-width: 720px){ .grid.cols-2,.grid.cols-3{grid-template-columns:1fr} }

/* ---- Header ---- */
header{
    position:sticky;top:0;z-index:60;
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    background: color-mix(in oklab, var(--bg1) 60%, transparent);
    border-bottom:1px solid var(--border);
}
.nav{display:flex;align-items:center;justify-content:space-between;padding:12px 0;gap:12px}
.brand{display:flex;align-items:center;gap:12px;min-width:0;text-decoration:none}
.logo{
    width:42px;height:42px;border-radius:14px;
    background:
    radial-gradient(16px 16px at 30% 30%, rgba(255,255,255,.5), rgba(255,255,255,0) 70%),
    linear-gradient(135deg, var(--accent), var(--accent2));
    box-shadow: var(--glow);
    border:1px solid rgba(255,255,255,0.2);
    flex:0 0 auto;
}
.brand-text{display:flex;flex-direction:column;min-width:0}
.brand-text strong{font-size:15px; font-weight:700; letter-spacing:.2px;line-height:1.2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.brand-text span{font-size:12.5px;color:var(--muted2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

.navlinks{display:flex;gap:4px;align-items:center}
.navlinks a{
    font-size:14px; font-weight: 500; color:var(--muted);text-decoration:none;
    padding:8px 14px;border-radius:12px;
    transition: all var(--dur-2) var(--ease);
    position: relative;
}
.navlinks a::after {
    content: "";
    position: absolute; bottom: 2px; left: 50%;
    width: 0; height: 2px;
    background: var(--accent);
    border-radius: 2px;
    transition: all var(--dur-2) var(--ease);
    transform: translateX(-50%);
}
.navlinks a:hover{color:var(--text); background: var(--glass);}
.navlinks a:hover::after { width: 40%; }

.actions{display:flex;gap:10px;align-items:center}
.btn{
    position: relative;
    overflow: hidden;
    border:1px solid var(--border);
    background: color-mix(in oklab, var(--card) 80%, transparent);
    backdrop-filter: blur(8px);
    color:var(--text);
    padding:10px 16px;
    border-radius:14px;
    font-weight: 500;
    cursor:pointer;
    display:inline-flex;align-items:center;gap:8px;
    box-shadow: 0 4px 12px rgba(0,0,0,.05);
    transition: all var(--dur-2) var(--ease);
    user-select:none;
    text-decoration:none;
}
.btn:hover{transform: translateY(-2px); border-color:var(--border2); box-shadow: var(--shadow-hover);}
.btn:active{transform: translateY(0px)}
.btn.primary{
    border: 1px solid rgba(255,255,255,0.15);
    background: linear-gradient(135deg, var(--accent), var(--accent2));
    color: #fff;
    box-shadow: var(--glow);
}
/* Buton Parlama (Shine) Efekti */
.btn.primary::before {
    content: ""; position: absolute; top: 0; left: -100%;
    width: 50%; height: 100%;
    background: linear-gradient(to right, rgba(255,255,255,0) 0%, rgba(255,255,255,0.3) 50%, rgba(255,255,255,0) 100%);
    transform: skewX(-25deg);
    transition: none;
}
.btn.primary:hover::before {
    animation: shine 0.6s ease forwards;
}
@keyframes shine {
    100% { left: 200%; }
}

/* Mobile menu */
.hamburger{display:none}
@media (max-width: 860px){
    .navlinks{display:none}
    .hamburger{display:inline-flex}
    .drawer{position:fixed;inset:0;z-index:90;background: rgba(0,0,0,.6); backdrop-filter:blur(8px); display:none}
    .drawer[aria-hidden="false"]{display:block}
    .drawer-panel{
        position:absolute;right:0;top:0;height:100%;width:min(360px, 88vw);
        background: var(--bg1);
        border-left:1px solid var(--border);
        box-shadow: var(--shadow-md);
        padding:24px;
        display:flex;flex-direction:column;gap:12px;
        transform: translateX(100%);
        animation: slideIn var(--dur-3) var(--ease) forwards;
    }
    @keyframes slideIn{to{transform:translateX(0);}}
    .drawer-links{display:grid;gap:10px;margin-top:16px}
    .drawer-links a{
        text-decoration:none; font-weight: 500; font-size: 15px;
        padding:14px; border-radius:14px;
        background: var(--card); border:1px solid var(--border); color:var(--text);
    }
    .drawer-head{display:flex;align-items:center;justify-content:space-between}
}

/* ---- Hero ---- */
main{padding: clamp(24px, 5vw, 40px) 0 60px}
.hero{
    padding-top: clamp(12px, 3vw, 20px);
    display:grid;
    grid-template-columns: 1.3fr 0.7fr;
    gap: clamp(16px, 3vw, 24px);
    align-items:stretch;
}
@media (max-width: 980px){ .hero{grid-template-columns:1fr} }

.card{
    border:1px solid var(--border);
    background: var(--card);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-sm);
    overflow:hidden;
    transition: transform var(--dur-3) var(--ease), box-shadow var(--dur-3) var(--ease);
}
.card:hover {
    box-shadow: var(--shadow-md);
}
.card.pad{padding: clamp(24px, 3vw, 32px)}
.card.soft{
    background: linear-gradient(160deg, var(--card), var(--card2));
}

.hero-title{display:grid;gap:16px}
.kicker{
    display:inline-flex;align-items:center;gap:8px;
    font-size:13px; font-weight: 500; color:var(--text);
    letter-spacing:.2px;
    width:max-content;
    padding:8px 14px;border-radius:999px;
    border:1px solid var(--border);
    background: var(--glass);
}
.dot{
    width:8px;height:8px;border-radius:999px;
    background: linear-gradient(135deg, var(--accent), var(--accent2));
    box-shadow: 0 0 0 3px color-mix(in oklab, var(--accent) 18%, transparent);
}
h1{
    margin:0; font-weight: 700;
    font-size: clamp(34px, 4.5vw, 52px);
    line-height:1.1;
    letter-spacing:-1px;
}
.sub{
    margin:0;
    color:var(--muted);
    font-size: clamp(15px, 1.8vw, 17px);
    line-height:1.6;
    max-width: 65ch;
    font-weight: 400;
}

.chips{display:flex;flex-wrap:wrap;gap:10px;margin-top:10px}
.chip{
    border:1px solid var(--border);
    background: var(--glass);
    color:var(--text);
    padding:8px 14px;
    border-radius:999px;
    font-size:13px; font-weight: 500;
    display:inline-flex;gap:8px;align-items:center;
    transition: all var(--dur-2) var(--ease);
}
.chip:hover{transform: translateY(-2px); background: var(--border2); box-shadow: var(--shadow-hover);}
.chip svg{opacity:.8; color: var(--accent);}

.hero-cta{display:flex;flex-wrap:wrap;gap:14px;margin-top:16px}
.hero-cta .btn{padding:14px 20px; border-radius:16px; font-size: 15px;}
.note{margin-top: 14px;font-size: 13px;color: var(--muted2);line-height: 1.6}

/* Profile side */
.profile{position:relative;padding:0; display: flex; flex-direction: column;}
.profile .top{padding: clamp(24px, 3vw, 32px);display:grid;gap:16px; flex-grow: 1;}
.avatar{
    width:84px;height:84px;border-radius:24px;
    background:
    radial-gradient(20px 20px at 25% 25%, rgba(255,255,255,.6), rgba(255,255,255,0) 60%),
    linear-gradient(135deg, var(--accent), var(--accent2));
    border:1px solid rgba(255,255,255,0.2);
    box-shadow: var(--glow);
}
.profile h2{margin:0;font-size:20px; font-weight: 700;}
.meta{display:grid;gap:8px;color:var(--muted);font-size:14px;line-height:1.5}
.meta b{color:var(--text);font-weight:600}
.profile .stats{
    display:grid;grid-template-columns: repeat(3, minmax(0,1fr));
    gap:12px;padding: 0 clamp(24px, 3vw, 32px) clamp(24px, 3vw, 32px);
}
.stat{
    border:1px solid var(--border);
    background: var(--glass);
    border-radius: 18px;
    padding: 14px;
    display:grid;gap:4px;
    transition: transform 0.3s ease;
}
.stat:hover { transform: translateY(-3px); background: var(--border2); }
.stat strong{font-size:15px; font-weight: 700;}
.stat span{font-size:12px;color:var(--muted2); font-weight: 500;}
@media (max-width: 480px){ .profile .stats{grid-template-columns:1fr} }

/* ---- Sections ---- */
section{margin-top: clamp(24px, 4vw, 32px)}
.section-head{display:flex;align-items:flex-end;justify-content:space-between;gap:12px;margin-bottom:20px}
.section-head h3{margin:0;font-size: 22px; font-weight: 700; letter-spacing:-.5px}
.section-head p{margin:0;color:var(--muted2);font-size: 14px;line-height:1.5}

.list{display:grid;gap:14px}
.item{
    border:1px solid var(--border);
    background: var(--card2);
    border-radius: var(--radius-lg);
    padding: 18px 20px;
    display:grid;gap:10px;
    transition: all var(--dur-2) var(--ease);
}
.item:hover{
    transform: translateY(-3px) scale(1.01);
    border-color: var(--border2);
    box-shadow: var(--shadow-hover);
    background: var(--card);
}
.item .row{display:flex;flex-wrap:wrap;gap:8px;align-items:center;justify-content:space-between}
.item .title{display:flex;flex-wrap:wrap;gap:12px;align-items:center}
.badge{
    font-size:12px; font-weight: 600; color:var(--text);
    border:1px solid var(--border);
    background: var(--glass);
    padding: 6px 12px;border-radius: 999px;white-space:nowrap;
}
.where{font-weight:700; font-size: 16px;}
.when{color:var(--muted2);font-size:13px; font-weight: 500;}
.desc{margin:0;color:var(--muted);font-size:14.5px;line-height:1.6}

/* Skills */
.skills{display:flex;flex-wrap:wrap;gap:10px}
.pill{
    border:1px solid var(--border);
    background: var(--glass);
    border-radius:999px;
    padding: 10px 14px;
    font-size: 13.5px;
    font-weight: 500;
    color: var(--muted);
    transition: all var(--dur-2) var(--ease);
}
.pill:hover{transform: translateY(-2px); border-color: var(--accent); background: rgba(91,141,239,0.1); color: var(--text)}

/* Portfolio cards */
.proj{
    border:1px solid var(--border);
    background: var(--card);
    border-radius: var(--radius-xl);
    overflow:hidden;
    display:grid;
    min-height: 250px;
    transition: all 0.4s cubic-bezier(0.2, 0.8, 0.2, 1.2);
    position:relative;
    cursor:pointer;
}
.proj:hover{
    transform: translateY(-6px);
    border-color: var(--accent);
    box-shadow: 0 20px 40px rgba(0,0,0,0.2), 0 0 0 1px var(--accent);
}
.proj .cover{
    height: 140px;
    position: relative;
    overflow: hidden;
    border-bottom:1px solid var(--border);
}
.proj .cover::before {
    content: ""; position: absolute; inset: 0;
    background:
    radial-gradient(circle at 20% 30%, color-mix(in oklab, var(--accent) 30%, transparent) 0%, transparent 70%),
    radial-gradient(circle at 80% 80%, color-mix(in oklab, var(--accent2) 20%, transparent) 0%, transparent 70%),
    var(--card2);
    transition: transform 0.6s var(--ease);
}
.proj:hover .cover::before { transform: scale(1.1); }
.proj .body{padding: 16px; display:grid; gap:10px; position: relative; z-index: 2; background: var(--card);}
.proj .body strong{font-size:16px; font-weight: 700;}
.proj .body p{margin:0;color:var(--muted);font-size:14px;line-height:1.5}
.proj .tags{display:flex;flex-wrap:wrap;gap:8px}
.tag{
    font-size:12px; font-weight: 600; color:var(--text);
    border:1px solid var(--border);
    background: var(--glass);
    padding:6px 10px;border-radius:999px;
}
.proj .open{
    position:absolute;right:16px;top:16px;
    width:40px;height:40px;border-radius:50%;
    border:1px solid rgba(255,255,255,0.2);
    background: rgba(10, 14, 26, 0.6);
    backdrop-filter: blur(8px);
    color: #fff;
    display:grid;place-items:center;
    box-shadow: 0 8px 16px rgba(0,0,0,.2);
    transition: all var(--dur-2) var(--ease);
    z-index: 3;
}
.proj:hover .open { background: var(--accent); transform: scale(1.1); border-color: transparent;}

/* “Kardeşim” teknik omurga bölümü */
.backbone{
    border:1px solid color-mix(in oklab, var(--accent) 30%, var(--border));
    background: linear-gradient(135deg, var(--card), var(--card2));
    border-radius: var(--radius-xl);
    padding: clamp(24px, 3vw, 32px);
    box-shadow: var(--shadow-sm);
    position:relative;
    overflow:hidden;
}
.backbone::before {
    content: ""; position: absolute; inset: 0;
    background: radial-gradient(circle at top right, rgba(91,141,239,0.1), transparent 50%);
    pointer-events: none;
}
.backbone::after{
    content:"</>";
    position:absolute;
    right:-10px; bottom:-30px;
    font-size:140px;
    color: rgba(255,255,255,0.03);
    font-family: monospace;
    font-weight:900;
    pointer-events:none;
    transform: rotate(-10deg);
}
.accent-link {
    color: var(--accent); font-weight: 600; text-decoration: none;
    border-bottom: 2px solid transparent; transition: all 0.2s ease;
}
.accent-link:hover { border-bottom-color: var(--accent); }
.linkline{
    display:inline-flex;align-items:center;gap:8px;
    border-bottom:1px dashed color-mix(in oklab, var(--accent) 55%, transparent);
    text-decoration:none; padding-bottom:4px; font-weight: 500;
    color: color-mix(in oklab, var(--accent) 85%, var(--text));
    transition: all 0.2s ease;
}
.linkline:hover{
    color:var(--text);
    border-bottom-style: solid;
}

/* Contact */
.contact{display:grid;grid-template-columns: 1fr 1fr;gap: clamp(16px, 2vw, 24px)}
@media (max-width: 860px){ .contact{grid-template-columns:1fr} }

.field{display:grid;gap:8px}
label{font-size:13.5px; font-weight: 600; color:var(--muted2)}
input,textarea{
    width:100%;
    border:1px solid var(--border);
    background: var(--bg0);
    color:var(--text);
    padding: 14px 16px;
    border-radius: 16px;
    font-size: 15px;
    transition: all var(--dur-2) var(--ease);
}
textarea{min-height: 140px; resize: vertical}
input:focus,textarea:focus{
    outline:none;
    border-color: var(--accent);
    background: var(--bg1);
    box-shadow: 0 0 0 4px rgba(91,141,239,0.1);
}
.contact-actions{display:flex;gap:12px;flex-wrap:wrap;align-items:center;margin-top:14px}
.helper{color:var(--muted2);font-size:13px;line-height:1.6;margin:0}

/* Modal */
.modal{
    position:fixed; inset:0; z-index:120;
    background: rgba(0,0,0,.7); backdrop-filter: blur(8px);
    display:none;
    padding: clamp(16px, 3vw, 32px);
}
.modal[aria-hidden="false"]{display:grid;place-items:center; animation: fadeIn 0.3s ease forwards;}
@keyframes fadeIn { from{opacity:0;} to{opacity:1;} }

.modal-card{
    width:min(900px, 96vw);
    border-radius: var(--radius-xl);
    border:1px solid rgba(255,255,255,0.1);
    background: var(--bg1);
    box-shadow: var(--shadow-md), 0 0 0 1px rgba(255,255,255,0.05);
    overflow:hidden;
    transform: scale(0.95); opacity: 0;
    animation: modalPop 0.4s cubic-bezier(0.2, 0.8, 0.2, 1) forwards 0.1s;
}
@keyframes modalPop { to{transform:scale(1); opacity:1;} }

.modal-head{
    display:flex;align-items:center;justify-content:space-between;gap:10px;
    padding: 16px 20px;
    border-bottom:1px solid var(--border);
    background: var(--card);
}
.modal-head strong{font-size:16px; font-weight: 700;}
.modal-body{padding: 20px; display:grid; gap:16px}
.media{
    border:1px solid var(--border);
    border-radius: 20px;
    overflow:hidden;
    background: var(--bg0);
}
.media .ph{
    height: 380px;
    display:grid;place-items:center;
    color:var(--muted2);
    background:
    radial-gradient(circle at top right, rgba(91,141,239,0.1), transparent),
    var(--card2);
}
.modal-meta{
    display:flex;flex-wrap:wrap;gap:10px;
    align-items:center;justify-content:space-between;
}
.modal-meta .tags{display:flex;flex-wrap:wrap;gap:8px}

/* Footer */
footer{padding: 24px 0 40px;color:var(--muted2);font-size: 13.5px; font-weight: 500;}
.foot{
    display:flex;flex-wrap:wrap;gap:16px;align-items:center;justify-content:space-between;
    border-top: 1px solid var(--border);
    padding-top: 24px;
}
.foot a{text-decoration:none;border-bottom:2px solid transparent;}
.foot a:hover{color:var(--text);border-bottom-color: var(--accent);}

/* ---- Accessibility / Reduced Motion ---- */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.sep{height:1px;background:var(--border);margin: 16px 0}
.muted{color:var(--muted)}
.accent{background: linear-gradient(135deg, var(--accent), var(--accent2));-webkit-background-clip:text;background-clip:text;color:transparent}

@media (prefers-reduced-motion: reduce){
    html{scroll-behavior:auto}
    *,*::before,*::after{animation:none !important;transition:none !important}
    .reveal { opacity: 1 !important; transform: none !important; }
}

@media print{
    header,.drawer,.btn,.hamburger,.modal,.bg-orb{display:none !important}
    body{background:#fff;color:#000}
    .card,.item,.proj,.backbone{box-shadow:none !important}
    a{color:#000;text-decoration:underline}
}