/* coinage diliyle: iOS Liquid Glass, gruplu inset liste, altta yüzen cam dock */
:root{
  --bg:#f2f2f7; --cell:#ffffff; --cell-hover:#f8f8fb; --label:#000; --label2:rgba(60,60,67,.6); --label3:rgba(60,60,67,.3);
  --sep:rgba(60,60,67,.14); --fill:rgba(118,118,128,.12); --fill2:rgba(120,120,128,.2);
  --accent:#1d1d1f; --on-accent:#fff; --green:#34c759; --green-ink:#248a3d; --green-tint:rgba(52,199,89,.15);
  --glass:rgba(255,255,255,.64); --glass-thumb:rgba(255,255,255,.9);
  --rim:inset 0 1px 0 rgba(255,255,255,.9),inset 0 -1px 0 rgba(255,255,255,.4),inset 0 0 0 .5px rgba(0,0,0,.06);
  --float:0 8px 40px rgba(0,0,0,.12),0 2px 6px rgba(0,0,0,.05);
  --font:"Inter Tight",-apple-system,BlinkMacSystemFont,"SF Pro Text","Segoe UI",system-ui,sans-serif;
  --ease:cubic-bezier(.32,.72,0,1); --spring:cubic-bezier(.34,1.3,.64,1);
  --dock-bottom:max(16px,calc(env(safe-area-inset-bottom,0px) - 10px));
}
:root[data-theme="dark"]{
  --bg:#000; --cell:#1c1c1e; --cell-hover:#232326; --label:#fff; --label2:rgba(235,235,245,.6); --label3:rgba(235,235,245,.3);
  --sep:rgba(84,84,88,.55); --fill:rgba(118,118,128,.24); --fill2:rgba(120,120,128,.36);
  --accent:#f2f2f4; --on-accent:#000; --green:#30d158; --green-ink:#30d158; --green-tint:rgba(48,209,88,.18);
  --glass:rgba(40,40,44,.6); --glass-thumb:rgba(120,120,128,.42);
  --rim:inset 0 1px 0 rgba(255,255,255,.16),inset 0 -1px 0 rgba(255,255,255,.05),inset 0 0 0 .5px rgba(255,255,255,.08);
  --float:0 8px 40px rgba(0,0,0,.5),0 2px 6px rgba(0,0,0,.3);
  color-scheme:dark;
}
*{box-sizing:border-box}
html{-webkit-font-smoothing:antialiased;scroll-padding-top:24px}
body{margin:0;background:var(--bg);color:var(--label);font:17px/1.29 var(--font);letter-spacing:-.008em;padding-inline:16px;padding-block:0 calc(130px + env(safe-area-inset-bottom,0px));transition:background-color .35s,color .35s}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer;letter-spacing:inherit}
:focus-visible{outline:3px solid color-mix(in srgb,var(--accent) 50%,transparent);outline-offset:2px;border-radius:14px}
i[class*="ph"]{display:block;line-height:1;flex:none}
.wrap{max-width:700px;margin:0 auto}
.glass{background:var(--glass);backdrop-filter:blur(24px) saturate(190%);-webkit-backdrop-filter:blur(24px) saturate(190%);box-shadow:var(--rim),var(--float)}

/* üst çubuk */
.topbar{display:flex;justify-content:space-between;align-items:center;padding-top:10px}
.brand{display:flex;align-items:center;gap:9px;height:44px;padding:0 4px;font-size:19px;font-weight:700;letter-spacing:-.01em}
.mark{width:28px;height:28px;border-radius:8px;display:grid;place-items:center;background:var(--label);color:var(--bg);font-size:12px;font-weight:700;letter-spacing:0;box-shadow:inset 0 1px 0 rgba(255,255,255,.18),0 1px 3px rgba(0,0,0,.15);transition:background-color .35s,color .35s}
.mark img{width:100%;height:100%;object-fit:contain;border-radius:inherit}

/* tema anahtarı */
.theme{position:relative;display:flex;align-items:center;width:84px;height:44px;border-radius:999px;padding:4px}
.theme .knob{position:absolute;top:4px;left:4px;width:36px;height:36px;border-radius:50%;background:var(--glass-thumb);box-shadow:var(--rim),0 2px 8px rgba(0,0,0,.14);transition:transform .45s var(--spring)}
.theme[aria-checked="true"] .knob{transform:translateX(40px)}
.theme .ti{position:relative;z-index:1;flex:1;display:grid;place-items:center;color:var(--label3);transition:color .3s}
.theme .ti i{font-size:18px}
.theme[aria-checked="false"] .ti.sun,.theme[aria-checked="true"] .ti.moon{color:var(--label)}
.theme:active .knob{transform:scale(.92)}
.theme[aria-checked="true"]:active .knob{transform:translateX(40px) scale(.92)}
::view-transition-old(root),::view-transition-new(root){animation-duration:.5s;animation-timing-function:ease}

/* kahraman alanı */
.hero{display:grid;justify-items:center;text-align:center;padding:40px 0 6px}
.avatar{width:96px;height:96px;border-radius:30px;display:grid;place-items:center;background:var(--label);color:var(--bg);font-size:34px;font-weight:700;letter-spacing:-.02em;box-shadow:inset 0 1px 0 rgba(255,255,255,.2),0 10px 30px rgba(0,0,0,.18);margin-bottom:18px;transition:background-color .35s,color .35s}
h1{font-size:34px;line-height:41px;font-weight:700;letter-spacing:-.012em;margin:0}
.sum{margin:4px 0 0;color:var(--label2);font-size:15px;letter-spacing:0}

/* gruplu liste */
.hdr{font-size:13px;line-height:18px;color:var(--label2);margin:30px 20px 8px;display:flex;justify-content:space-between;font-weight:500;letter-spacing:-.006em}
.ftr{font-size:13px;line-height:18px;color:var(--label2);margin:8px 20px 0;letter-spacing:-.006em}
.ftr.center{text-align:center;margin-top:28px}
.group{background:var(--cell);border-radius:26px;overflow:hidden;margin:0;padding:0;list-style:none;transition:background-color .35s}
.about{margin:0;padding:18px 18px 14px;font-size:16px;line-height:1.45}
.cell{display:flex;align-items:center;gap:12px;min-height:52px;padding:0 18px;position:relative;color:var(--label);transition:background-color .2s}
.cell::after{content:"";position:absolute;left:62px;right:18px;bottom:0;border-bottom:.5px solid var(--sep)}
.cell:last-child::after{display:none}
a.cell:hover{background:var(--cell-hover)}
a.cell:active{background:var(--fill)}
.cell .main{flex:1;min-width:0;padding:13px 0;display:grid;gap:2px}
.cell .sub{font-size:13px;color:var(--label2);letter-spacing:-.006em}
.trail{color:var(--label2);display:flex;align-items:center;gap:8px;flex:none;font-size:15px}
.chev{font-size:16px;color:var(--label3);transition:transform .35s var(--spring),color .2s}
a.cell:hover .chev{transform:translate(2px,-2px);color:var(--label2)}
.ico{width:32px;height:32px;border-radius:50%;background:var(--fill);color:var(--label);display:grid;place-items:center;flex:none}
.ico i{font-size:16px}
.ico.ok{background:var(--green-tint);color:var(--green-ink)}
.ico.ok i{font-size:9px}
.chip{display:inline-flex;align-items:center;height:22px;font-size:12px;font-weight:600;padding:0 9px;border-radius:999px;background:var(--fill);color:var(--label2);letter-spacing:-.003em;flex:none}
.chip.free{background:var(--green-tint);color:var(--green-ink)}
.chip.now{background:var(--accent);color:var(--on-accent)}

/* deneyim satırı */
.exp .main{padding:14px 0}
.nm{font-size:17px;font-weight:600;letter-spacing:-.01em}

/* markalar: logolar gelene kadar kelime işaretleri */
.brands{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.brandTile{height:84px;border-radius:22px;background:var(--cell);display:grid;place-items:center;font-size:15px;font-weight:600;color:var(--label2);letter-spacing:-.01em;transition:background-color .35s,color .25s,transform .35s var(--spring)}
.brandTile:hover{color:var(--label);transform:translateY(-2px)}
.brandTile img{max-width:62%;max-height:36px;object-fit:contain;filter:grayscale(1);opacity:.7}


/* bölüm girişi */
.sec.rise{opacity:0;transform:translateY(14px);transition:opacity .6s var(--ease),transform .6s var(--ease)}
.sec.rise.in{opacity:1;transform:none}

/* alttaki yüzen dock */
.dock{position:fixed;left:0;right:0;bottom:var(--dock-bottom);z-index:8;display:flex;justify-content:center;padding:0 16px;pointer-events:none}
.tabbar{position:relative;display:flex;gap:2px;padding:4px;border-radius:999px;pointer-events:auto;max-width:100%}
.thumb{position:absolute;top:4px;left:0;height:calc(100% - 8px);width:0;border-radius:999px;background:var(--glass-thumb);box-shadow:var(--rim),0 3px 10px rgba(0,0,0,.1);transition:transform .5s var(--spring),width .5s var(--spring);pointer-events:none;z-index:0}
.thumb.instant{transition:none}
.tab{position:relative;z-index:1;flex:1 1 0;min-width:0;width:88px;height:56px;border-radius:999px;display:grid;justify-items:center;align-content:center;gap:4px;padding:0 8px;color:var(--label2);transition:color .35s,transform .3s var(--spring)}
.tab i{font-size:22px}
.tab:active{transform:scale(.94)}
.tab[aria-current="true"]{color:var(--label)}
.tab[aria-current="true"] i::before{font-family:"Phosphor-Fill"!important}
.tab .t{font-size:11px;font-weight:600;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;letter-spacing:-.003em}

@media (max-width:600px){
  body{padding-inline:16px}
  .brands{grid-template-columns:repeat(2,1fr)}
  .tab{width:76px}
}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}.sec.rise{opacity:1;transform:none}}
.mark .cy{width:100%;height:100%}
.avatar .cy{width:100%;height:100%}
.skills{display:flex;flex-wrap:wrap;gap:6px;padding:0 18px 16px;border-bottom:.5px solid var(--sep)}
.skills .chip{height:26px;font-size:13px;padding:0 11px}
/* deneyim: unvan, şirket, tarih, konum, açıklama */
.exp{align-items:flex-start;gap:14px}
.exp::after{left:18px}
.exp .role{font-size:15px;color:var(--label)}
/* profil fotoğrafı: Cy işaretinin üstünü örter */
.avatar{position:relative;width:112px;height:112px;border-radius:34px;overflow:hidden}
.avatar img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
/* tarayıcı kaydırma çubuğu gizli; kaydırma çalışmaya devam eder */
html{scrollbar-width:none}
html::-webkit-scrollbar{display:none}
/* about text and "what I bring" list */
.about{border-bottom:.5px solid var(--sep)}
.about p{margin:0 0 12px}
.about p:last-child{margin-bottom:0}
.bring{list-style:none;margin:0 0 12px;padding:0;display:grid;gap:6px}
.bring li{position:relative;padding-left:22px;color:var(--label2);font-size:15px}
.bring li::before{content:"→";position:absolute;left:0;color:var(--label3)}
.exp .desc{margin-top:6px;font-size:14px;line-height:1.4;color:var(--label)}
/* apps list: app icon, name, one-line description */
.app{gap:14px}
.app::after{left:76px}
.appIcon{width:44px;height:44px;border-radius:12px;flex:none;box-shadow:0 1px 3px rgba(0,0,0,.15)}
.app .nm{font-size:17px}
@media (max-width:600px){.tab{width:auto;min-width:56px;flex:1 1 auto;padding:0 8px}}
@media (max-width:340px){.dock{padding:0 8px}.tab{min-width:0;padding:0 5px}}
/* markalar: "Show all" / "Show less" */
.brandTile[hidden]{display:none}
.moreBtn{display:block;margin:12px auto 0;height:36px;padding:0 16px;border-radius:999px;background:var(--fill);color:var(--label);font-size:14px;font-weight:600;transition:background-color .2s,transform .3s var(--spring)}
.moreBtn:hover{background:var(--fill2)}
.moreBtn:active{transform:scale(.95)}
.moreBtn[hidden]{display:none}