/* HFY Portfolio — Hilmi Faruk Yilmaz */

body { margin:0; background:#06070F; }
a { color:#A9A2FF; text-decoration:none; }
a:hover { color:#C9C3FF; }
::selection { background:#5B4BE0; color:#fff; }

[data-m="traitrail"] { display: contents; }
[data-m="traitrail"] > [data-clone="1"] { display: none !important; }
@keyframes hfy-marquee2 { from { transform: translateX(0); } to { transform: translateX(-33.333%); } }
.hfy-dots { display: none; }
.hfy-burger, .hfy-menu, .hfy-traitgrid, .hfy-navbar { display: none; }
.hfy-zigzag { display: none; }
[data-m="scroll"] { display: none; }
.hfy-more { display: none; }
.hfy-clamp { -webkit-line-clamp: unset; }
@keyframes hfy-marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@keyframes hfy-shine { 0% { background-position: 0% 50%; } 100% { background-position: 200% 50%; } }

/* ---- image-slot placeholder (static, no design-tool runtime) ---- */
.hfy-imgslot {
  display: flex; align-items: center; justify-content: center;
  background: repeating-linear-gradient(135deg, rgba(255,255,255,0.035) 0 10px, rgba(255,255,255,0.015) 10px 20px);
  border: 1px dashed rgba(255,255,255,0.16);
  color: #6B7086; font-size: 12.5px; text-align: center; padding: 12px;
}

@media (max-width: 1280px) {
  [data-m="hide"] { display: none !important; }
  [data-m="hero"] { height: auto !important; min-height: 560px !important; padding-bottom: 40px !important; }
  [data-m="traits"] { position: static !important; margin-top: 28px; overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
  [data-m="traitrail"] { display: flex !important; gap: 44px; animation: hfy-marquee2 26s linear infinite; white-space: nowrap; width: max-content; }
  [data-m="traitrail"] > div { flex: none; white-space: nowrap; }
  [data-m="traitlabel"] { white-space: nowrap; }
  [data-m="traitrail"] > [data-clone="1"] { display: flex !important; }
  [data-m="hdr"] { padding: 0 32px !important; gap: 18px; }
  [data-m="nav"] { gap: 20px !important; font-size: 13px !important; }
  [data-m="herocopy"] { padding: 44px 32px 0 !important; }
  [data-m="traits"] { left: 32px !important; gap: 28px !important; }
  [data-m="sec"] { padding-left: 32px !important; padding-right: 32px !important; }
  [data-m="seckontakt"] { padding-left: 32px !important; padding-right: 32px !important; }
  [data-m="g2"] { grid-template-columns: 1fr 1fr !important; gap: 32px !important; }
  [data-m="g4a"], [data-m="g4t"] { grid-template-columns: 1fr 1fr !important; }
  [data-m="g2m"] { grid-template-columns: 1fr !important; gap: 22px !important; }
  [data-m="footer"] { padding-left: 32px !important; padding-right: 32px !important; gap: 20px; flex-wrap: wrap; }
  [data-m="footer"] > div:nth-child(2) { gap: 18px !important; flex-wrap: wrap; row-gap: 8px; }
}
@media (max-width: 1080px) {
  [data-m="g3"] { grid-template-columns: 1fr 1fr !important; }
}
@media (max-width: 900px) {
  body { background: #04050C; }
  [data-m="hide"] { display: none !important; }
  [data-m="hero"] { height: auto !important; min-height: 100svh !important; display: flex !important; flex-direction: column; padding-bottom: 18px !important; overflow: visible !important; }
  [data-m="heroimg"] { display: none !important; }
  [data-m="heroimgm"] { display: block !important; }
  [data-m="heroveil"] { background: linear-gradient(180deg, rgba(4,5,12,0.35) 0%, rgba(4,5,12,0.12) 26%, rgba(4,5,12,0.72) 62%, #04050C 90%) !important; }
  [data-m="herocopy"] { display: none !important; }
  [data-m="mherocopy"] { display: block !important; }
  [data-m="heroscrim"] { display: none !important; }
  [data-m="herocopy"] > div:first-child { font-size: 10px !important; }
  [data-m="herocopy"] a + a { display: none !important; }
  [data-m="scroll"] { display: flex !important; order: 99; padding: 18px 18px 0 !important; align-items: center; justify-content: flex-end; gap: 8px; padding: 14px 16px 0; font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: #8C92A8; }
  [data-m="hdr"] { padding: 0 14px !important; height: 54px !important; }
  [data-m="hdr"] > a:last-of-type { display: none !important; }
  [data-m="hdr"] { position: fixed !important; left: 0; right: 0; top: 0; z-index: 40; background: transparent !important; border-bottom: none !important; }
  [data-m="hdr"][data-stuck="1"] { background: rgba(6,7,15,0.72) !important; backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-bottom: 1px solid rgba(255,255,255,0.07) !important; }
  [id]:not([data-m="hero"]) { scroll-margin-top: 58px; }
  .hfy-menu { top: 0 !important; }
  .hfy-burger { background: transparent !important; border-color: rgba(255,255,255,0.35) !important; display: flex; flex-direction: column; justify-content: center; gap: 4px; width: 38px; height: 34px; padding: 0 9px; border-radius: 10px; border: 1px solid rgba(139,128,255,0.3); background: rgba(139,128,255,0.1); cursor: pointer; flex: none; }
  .hfy-burger span { display: block; height: 1.6px; background: #C3BBFF; border-radius: 2px; transition: transform .25s ease, opacity .2s ease; }
  .hfy-burger[data-open="1"] span:nth-child(1) { transform: translateY(5.6px) rotate(45deg); }
  .hfy-burger[data-open="1"] span:nth-child(2) { opacity: 0; }
  .hfy-burger[data-open="1"] span:nth-child(3) { transform: translateY(-5.6px) rotate(-45deg); }
  .hfy-menu { display: grid; position: fixed; left: 8px; right: 8px; top: 56px; z-index: 39; background: rgba(10,12,24,0.97); backdrop-filter: blur(18px); border: 1px solid rgba(139,128,255,0.22); border-radius: 18px; padding: 8px; gap: 2px; opacity: 0; pointer-events: none; transform: translateY(-8px); transition: opacity .22s ease, transform .22s ease; }
  .hfy-menu[data-open="1"] { opacity: 1; pointer-events: auto; transform: none; }
  .hfy-menu a { display: block; padding: 13px 14px; border-radius: 12px; font-size: 14.5px; font-weight: 500; color: #E8EAF2; text-decoration: none; }
  .hfy-menu a:last-child { background: linear-gradient(135deg,#6F62F0,#A594FB); color: #fff; margin-top: 4px; text-align: center; }
  [data-m="nav"] { display: none !important; }
  [data-m="herocopy"] { padding: 18px 18px 0 !important; max-width: none !important; }
  [data-m="herocopy"] [data-m="body"] { display: none !important; }
  [data-m="mskills"] { display: none !important; }
  [data-m="mskills"] [data-m="eyebrow"] { font-size: 9.5px !important; letter-spacing: 0.3em !important; color: #8C92A8 !important; }
  [data-m="mskills"] [data-m="h2"] { font-size: 27px !important; line-height: 1.28 !important; letter-spacing: -0.015em !important; color: #FFFFFF !important; }
  #ueber [data-m="h2"] { font-size: 27px !important; line-height: 1.28 !important; letter-spacing: -0.015em !important; color: #FFFFFF !important; }
  #ueber [data-m2="ueberlabel"] { display: none !important; }
  [data-m="mobileintro"] { display: block !important; }
  [data-m="name"] { font-size: 23px !important; }
  [data-m="h1"] { font-size: 27px !important; line-height: 1.15 !important; }
  [data-m="h2"] { font-size: 20px !important; }

  [data-m="traits"] { position: static !important; display: block !important; padding: 18px 0 0 !important; overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
  [data-m="traitrail"] { display: flex !important; gap: 8px; width: max-content; animation: hfy-marquee 22s linear infinite; }
  [data-m="traits"]:active [data-m="traitrail"] { animation-play-state: paused; }
  [data-m="traitrail"] > div { flex: 0 0 auto; background: rgba(139,128,255,0.07); border: 1px solid rgba(139,128,255,0.16); border-radius: 12px; padding: 9px 10px; gap: 8px !important; }
  [data-m="traits"] svg { width: 16px; height: 16px; flex: none; }
  [data-m="traitlabel"] { font-size: 11.5px !important; line-height: 1.3; }

  [data-m="sec"] { margin: 0 !important; border-radius: 0 !important; border: none !important; border-top: 1px solid rgba(255,255,255,0.06) !important; padding: 34px 18px 38px !important; }
  [data-m="mobileintro"] { display: block !important; margin: 0 !important; border-radius: 0 !important; border: none !important; border-top: none !important; background: #0A0C18 !important; padding: 34px 18px 38px !important; }
  #ueber { background: #0C0F22 !important; }
  #projekte { background: #090B16 !important; }
  #ansatz { background: #12112A !important; }
  #werdegang { background: #090B16 !important; }
  [data-m="seckontakt"] { padding: 0 !important; }
  [data-m="eyebrow"] { display: block; font-size: 10px !important; letter-spacing: 0.26em !important; color: #8B80FF !important; background: none; border: none; padding: 0; }
  [data-m="body"] { font-size: 13px !important; line-height: 1.6 !important; }

  [data-m="g2"], [data-m="g2k"] { grid-template-columns: minmax(0,1fr) !important; gap: 16px !important; }
  [data-m="g2"] > *, [data-m="g2k"] > *, [data-m="g2m"] > * { min-width: 0; }
  [data-m="g2m"] { grid-template-columns: repeat(2, minmax(0,1fr)) !important; gap: 9px !important; max-width: none !important; }
  [data-m="g2m"] > div { border-top: none !important; padding: 12px 11px 13px !important; background: linear-gradient(160deg, rgba(139,128,255,0.13), rgba(139,128,255,0.03)); border: 1px solid rgba(139,128,255,0.2); border-radius: 15px; }
  [data-m="kpiVal"] { font-size: 15px !important; color: #fff !important; }
  [data-m="kpiDesc"] { font-size: 11px !important; line-height: 1.5 !important; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; }
  [data-m="kpiLabel"] { color: #A79BFF !important; font-size: 9px !important; }
  [data-m="g2k"] { padding: 34px 18px 38px !important; }
  [data-m="aboutimg"] { min-height: 210px !important; flex: none !important; }
  [data-m="rowwrap"] { flex-direction: column; align-items: flex-start !important; gap: 10px; }

  [data-m="g3"], [data-m="g4a"] {
    display: flex !important; grid-template-columns: none !important;
    overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch;
    gap: 12px !important; margin: 0 -18px !important; padding: 2px 18px 4px !important; scrollbar-width: none;
  }
  [data-m="g3"]::-webkit-scrollbar, [data-m="g4a"]::-webkit-scrollbar { display: none; }
  [data-m="g3"] > div, [data-m="g4a"] > div { scroll-snap-align: center; flex: 0 0 auto; width: 78%; max-width: 310px; }
  [data-m="g4t"] { grid-template-columns: minmax(0,1fr) !important; gap: 0 !important; padding-left: 20px !important; }
  [data-m="g4t"]::before { content: ""; position: absolute; left: 5px; top: 8px; bottom: 8px; width: 1px; background: linear-gradient(180deg, rgba(139,128,255,0.55), rgba(139,128,255,0.08)); }
  [data-m="g4t"] > div { position: relative; padding-bottom: 20px; min-width: 0; }
  [data-m="g4t"] > div:last-child { padding-bottom: 0; }
  [data-m="g4t"] > div > div:first-child { position: absolute; left: -20px; top: 3px; width: 9px !important; height: 9px !important; box-shadow: 0 0 0 3px rgba(139,128,255,0.15) !important; }
  [data-m="g4t"] > div > div:nth-child(2) { display: none; }
  [data-m="g3"] > div[style*="display:none"] { display: none !important; }

  .hfy-dots { display: flex; gap: 5px; justify-content: center; padding-top: 12px; }
  .hfy-dots span { width: 5px; height: 5px; border-radius: 99px; background: rgba(255,255,255,0.18); transition: all .25s ease; }
  .hfy-dots span[data-on="1"] { width: 16px; background: #8B80FF; }

  [data-m="traitrail"] > [data-clone="1"] { display: flex !important; }
  .hfy-zigzag { display: block; height: 30px !important; background-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='30' viewBox='0 0 120 30'%3E%3Cpath d='M0,14 C15,28 25,0 40,14 C55,28 65,0 80,14 C95,28 105,0 120,14 L120,30 L0,30 Z' fill='%234F41C9'/%3E%3C/svg%3E"); background-repeat: repeat-x; background-size: 120px 30px; transform: translateY(8px); }
  .hfy-dots { display: flex; padding-top: 0; }
  .hfy-navbar { display: flex; align-items: center; justify-content: center; gap: 16px; padding-top: 16px; }
  .hfy-arrow { width: 38px; height: 38px; border-radius: 50%; border: 1px solid rgba(255,255,255,0.16); display: flex; align-items: center; justify-content: center; font-size: 15px; color: #DDE0EC; cursor: pointer; user-select: none; flex: none; }
  .hfy-more { display: block; }
  .hfy-sp { height: var(--hh) !important; }
  .hfy-clamp { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 4; overflow: hidden; }
  .hfy-clamp.hfy-open { -webkit-line-clamp: unset; }
  .hfy-more { font-size: 12px; font-weight: 500; color: #8B80FF; padding-top: 8px; cursor: pointer; user-select: none; }
  .hfy-rev { opacity: 0; transform: translateY(18px); transition: opacity .5s ease, transform .5s cubic-bezier(.2,.7,.3,1); }
  .hfy-rev[data-in="1"] { opacity: 1; transform: none; }

  [data-m="seckontakt"] > div { border: none !important; border-radius: 0 !important; }
  [data-m="kimg"] { width: 100% !important; height: 200px !important; bottom: auto !important; -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 55%, rgba(0,0,0,0) 100%) !important; mask-image: linear-gradient(180deg, #000 0%, #000 55%, rgba(0,0,0,0) 100%) !important; }
  [data-m="kimg"] img { filter: saturate(0.8) brightness(0.85) !important; object-position: center 40% !important; }
  [data-m="kveil"] { background: linear-gradient(180deg, rgba(13,15,30,0.15) 0%, rgba(13,15,30,0.55) 58%, #0D0F1E 92%) !important; }
  [data-m="g2k"] { padding-top: 172px !important; }
  [data-m="footer"] { flex-direction: column; gap: 14px; padding: 20px 14px 28px !important; text-align: center; }
  [data-m="footer"] > div { flex-wrap: wrap; justify-content: center; }
}
@media (max-width: 900px) {
  /* Eigenschaften als 2x2-Kacheln in "Über mich" */
  [data-m="traits"] { display: none !important; }
  .hfy-traitgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; padding-top: 18px; }
  .hfy-traitgrid > div { display: block !important; background: rgba(255,255,255,0.035) !important; border: 1px solid rgba(255,255,255,0.08) !important; border-radius: 16px !important; padding: 16px 14px 18px !important; }
  .hfy-iconbox { display: flex; align-items: center; justify-content: center; width: 24px; height: 24px; border: none; background: none; margin-bottom: 14px; }
  .hfy-iconbox svg { width: 22px !important; height: 22px !important; stroke: #A79BFF !important; }
  .hfy-traitgrid svg { width: 19px !important; height: 19px !important; }
  .hfy-traitgrid [data-m="traitlabel"] { display: block; font-size: 13px !important; font-weight: 600 !important; color: #EDEFF7 !important; }

  /* Mein Ansatz als nummerierter Zeitstrahl */
  [data-m="g4a"] { display: grid !important; grid-template-columns: minmax(0,1fr) !important; gap: 0 !important; margin: 0 !important; padding: 4px 0 0 46px !important; overflow: visible !important; position: relative; }
  [data-m="g4a"]::before { content: ""; position: absolute; left: 17px; top: 18px; bottom: 34px; width: 1px; background: linear-gradient(180deg, rgba(139,128,255,0.55), rgba(139,128,255,0.08)); }
  [data-m="g4a"] > div { width: auto !important; max-width: none !important; flex: none !important; background: transparent !important; border: none !important; border-radius: 0 !important; padding: 0 0 24px !important; position: relative; }
  [data-m="g4a"] > div:last-child { padding-bottom: 0 !important; }
  [data-m="g4a"] svg { display: none; }
  [data-m="g4a"] > div > div:last-child { display: none !important; }
  [data-m="g4a"] > div > div:first-child > div > div:first-child { position: absolute; left: -46px; top: -4px; width: 34px; height: 34px; border-radius: 50%; border: 1px solid rgba(139,128,255,0.4); background: rgba(139,128,255,0.12); color: #C3BBFF !important; font-size: 12px !important; font-weight: 600; display: flex; align-items: center; justify-content: center; }
  [data-m="g4a"] > div > div:first-child > div > div:last-child { font-size: 16px !important; }

  /* Kontaktdaten als Kacheln */
  [data-m="g2k"] > div:last-child { gap: 10px !important; padding-top: 4px !important; }
  [data-m="g2k"] > div:last-child > div { background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.08); border-radius: 14px; padding: 12px 14px; gap: 13px !important; }

  /* Vollbild-Menü */
  .hfy-menu { position: fixed; inset: 0; left: 0; right: 0; top: 0; border-radius: 0; border: none; padding: 18px 18px 30px; align-content: start; gap: 2px; background: rgba(7,8,18,0.98); transform: none; }
  .hfy-menu a { font-size: 17px; padding: 15px 14px; }
  .hfy-menuhead { display: flex; align-items: center; justify-content: space-between; padding: 4px 6px 18px; }
  .hfy-menuclose { font-size: 26px; line-height: 1; color: #C4C8D8; cursor: pointer; padding: 4px 8px; }
}
@media (max-width: 900px) {
  [data-m="sec"] a[href="#kontakt"], [data-m="g2k"] a[href^="mailto"] { display: flex !important; width: 100%; justify-content: center; border-radius: 999px !important; height: 48px !important; }
  [data-m="g2k"] > div:first-child > div[style*="display"] { display: block !important; }
  [data-m="morebtn"] { display: flex !important; width: 100%; justify-content: center; height: 48px !important; border-radius: 999px !important; background: linear-gradient(135deg,#6F62F0,#A594FB) !important; border: none !important; color: #fff !important; font-size: 14px !important; }
  [data-m="g4a"] > div:last-child > div:first-child > div > div:last-child { color: #A79BFF !important; }
}
@media (max-width: 560px) {
  [data-m="g3"] > div, [data-m="g4a"] > div { width: 84%; }
}