/* ═══════════════════════════════════════════════════════════
   hamzacakmak.com
   Concept: home-screen grammar applied to a page.
   Colour comes only from the app icons; the page is monochrome.
   ═══════════════════════════════════════════════════════════ */

:root{
  --bg:      #f3f2ef;
  --surface: #ffffff;
  --ink:     #17171b;
  --muted:   #6e6e79;
  --line:    rgba(20,20,26,.12);
  --tint:    rgba(20,20,26,.045);
  --shadow:  0 10px 30px -14px rgba(15,15,20,.45);
  --sheet-shadow: 0 40px 90px -30px rgba(10,10,15,.5), 0 2px 10px rgba(10,10,15,.08);
  --page-w:  660px;
  --radius:  23%;
  --ui: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
}

@media (prefers-color-scheme: dark){
  :root{
    --bg:      #0a0a0c;
    --surface: #141417;
    --ink:     #f0efec;
    --muted:   #91919b;
    --line:    rgba(255,255,255,.13);
    --tint:    rgba(255,255,255,.055);
    --shadow:  0 12px 34px -16px rgba(0,0,0,.9);
    --sheet-shadow: 0 40px 90px -30px rgba(0,0,0,.85), 0 0 0 1px rgba(255,255,255,.07);
  }
}

*{box-sizing:border-box}

html{-webkit-text-size-adjust:100%}
body{overflow-x:hidden}

body{
  margin:0;
  font-family:var(--ui);
  font-size:16px;
  line-height:1.55;
  color:var(--ink);
  background:var(--bg);
  background-image:
    radial-gradient(120% 70% at 50% -12%, var(--tint), transparent 62%);
  background-attachment:fixed;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ─── status bar ─────────────────────────────────────────── */

.statusbar{
  position:sticky; top:0; z-index:30;
  display:flex; align-items:center; justify-content:space-between;
  gap:16px;
  padding:9px max(20px, calc((100% - var(--page-w)) / 2));
  padding-top:max(9px, env(safe-area-inset-top));
  font-family:var(--mono);
  font-size:12px;
  letter-spacing:.01em;
  color:var(--muted);
  background:color-mix(in srgb, var(--bg) 78%, transparent);
  backdrop-filter:saturate(150%) blur(14px);
  -webkit-backdrop-filter:saturate(150%) blur(14px);
  border-bottom:1px solid transparent;
  transition:border-color .25s ease;
}
.statusbar.is-scrolled{border-bottom-color:var(--line)}

.sb-time{font-variant-numeric:tabular-nums;font-weight:500;color:var(--ink)}
.sb-right{display:flex;align-items:center;gap:11px}
.sb-batt{width:24px;height:11.5px;color:var(--muted);flex:none}

.langswitch{
  display:inline-flex;
  border:1px solid var(--line);
  border-radius:999px;
  overflow:hidden;
  background:var(--tint);
}
.lang{
  appearance:none;border:0;background:transparent;cursor:pointer;
  font:inherit;font-size:11px;letter-spacing:.04em;
  color:var(--muted);
  padding:3px 9px 4px;
  transition:color .18s ease, background-color .18s ease;
}
.lang:hover{color:var(--ink)}
.lang.is-on{background:var(--ink);color:var(--bg)}

/* ─── page frame ─────────────────────────────────────────── */

.device{
  max-width:var(--page-w);
  margin:0 auto;
  padding:0 20px 64px;
}

/* ─── intro ──────────────────────────────────────────────── */

.intro{padding:clamp(46px,9vw,86px) 2px clamp(34px,6vw,54px)}

.intro h1{
  margin:0 0 12px;
  font-size:clamp(31px,6.4vw,48px);
  font-weight:600;
  letter-spacing:-.035em;
  line-height:1.05;
}
.role{
  margin:0 0 18px;
  max-width:34ch;
  font-size:clamp(16px,2.1vw,19px);
  line-height:1.45;
  letter-spacing:-.012em;
  color:var(--ink);
}
.stat{
  margin:0;
  display:flex;flex-wrap:wrap;align-items:center;gap:7px;
  font-family:var(--mono);
  font-size:11.5px;
  letter-spacing:.005em;
  color:var(--muted);
}
.stat i,.foot i{font-style:normal;opacity:.42}

/* ─── home screen pages ──────────────────────────────────── */

.pages{
  display:grid;
  grid-auto-flow:column;
  grid-auto-columns:100%;
  overflow-x:auto;
  overscroll-behavior-x:contain;
  scroll-snap-type:x mandatory;
  scrollbar-width:none;
}
.pages::-webkit-scrollbar{display:none}
.pages.is-dragging{scroll-snap-type:none;cursor:grabbing;user-select:none}

.page{scroll-snap-align:center;scroll-snap-stop:always;min-width:0}

.page-label{
  margin:0 0 20px;
  font-family:var(--mono);
  font-size:11px;
  font-weight:500;
  letter-spacing:.13em;
  text-transform:uppercase;
  color:var(--muted);
}

.grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:clamp(22px,3.4vw,34px) clamp(10px,2.4vw,24px);
  align-items:start;
}

.app{
  appearance:none;border:0;background:none;padding:0;cursor:pointer;
  display:flex;flex-direction:column;align-items:center;gap:9px;
  font:inherit;color:inherit;
  min-width:0;
}
.app img,.app .mono-icon{
  display:block;
  width:100%;height:auto;max-width:106px;
  aspect-ratio:1;
  border-radius:var(--radius);
  outline:1px solid var(--line);
  outline-offset:-1px;
  box-shadow:var(--shadow);
  transition:transform .28s cubic-bezier(.2,.8,.25,1), box-shadow .28s ease;
  will-change:transform;
}
.app-name{
  font-size:12.5px;
  font-weight:500;
  letter-spacing:-.008em;
  color:var(--muted);
  max-width:100%;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  transition:color .2s ease;
}
.app:hover img,.app:hover .mono-icon,
.app:focus-visible img,.app:focus-visible .mono-icon{
  transform:translateY(-4px) scale(1.035);
  box-shadow:0 18px 38px -16px rgba(15,15,20,.55);
}
.app:hover .app-name,.app:focus-visible .app-name{color:var(--ink)}
.app:active img,.app:active .mono-icon{transform:scale(.955);transition-duration:.09s}
.app:focus-visible{outline:none}
.app:focus-visible img,.app:focus-visible .mono-icon{outline:2px solid var(--ink);outline-offset:3px}

/* monogram tiles for the web page */
.mono-icon{
  position:relative;
  background:var(--surface);
  box-shadow:0 6px 18px -12px rgba(15,15,20,.5);
}
.mono-icon::after{
  content:attr(data-mono);
  position:absolute;inset:0;
  display:grid;place-items:center;
  font-family:var(--mono);
  font-weight:500;
  font-size:clamp(17px,4.4vw,29px);
  letter-spacing:-.03em;
  color:var(--ink);
  opacity:.72;
}

/* ─── page dots ──────────────────────────────────────────── */

.dots{
  display:flex;justify-content:center;gap:9px;
  padding:clamp(30px,5vw,44px) 0 clamp(30px,5vw,42px);
}
.dot{
  appearance:none;border:0;padding:0;cursor:pointer;
  width:7px;height:7px;border-radius:50%;
  background:var(--ink);opacity:.2;
  transition:opacity .22s ease, transform .22s ease;
}
.dot:hover{opacity:.45}
.dot.is-on{opacity:.85;transform:scale(1.15)}

/* ─── dock ───────────────────────────────────────────────── */

.dock{
  display:flex;justify-content:center;gap:clamp(20px,5vw,44px);
  width:fit-content;margin:0 auto;
  padding:14px clamp(20px,5vw,32px);
  border:1px solid var(--line);
  border-radius:26px;
  background:color-mix(in srgb, var(--surface) 70%, transparent);
  backdrop-filter:saturate(150%) blur(16px);
  -webkit-backdrop-filter:saturate(150%) blur(16px);
  box-shadow:var(--shadow);
}
.dock-btn{
  appearance:none;border:0;background:none;padding:0;cursor:pointer;
  display:flex;flex-direction:column;align-items:center;gap:6px;
  font:inherit;color:var(--muted);text-decoration:none;
  transition:color .2s ease, transform .2s cubic-bezier(.2,.8,.25,1);
}
.dock-btn svg{width:23px;height:23px}
.dock-name{font-size:11px;font-weight:500;letter-spacing:-.005em}
.dock-btn:hover,.dock-btn:focus-visible{color:var(--ink);transform:translateY(-2px)}
.dock-btn:focus-visible{outline:2px solid var(--ink);outline-offset:6px;border-radius:8px}

/* ─── footer ─────────────────────────────────────────────── */

.foot{
  display:flex;justify-content:center;flex-wrap:wrap;gap:8px;
  padding-top:clamp(44px,7vw,70px);
  font-family:var(--mono);
  font-size:11px;
  color:var(--muted);
  opacity:.8;
}

/* ═══ detail sheet ════════════════════════════════════════ */

#sheet{
  --sheet-pad:clamp(24px,4vw,34px);
  width:min(94vw,720px);
  max-height:min(88vh,900px);
  padding:0;
  border:0;
  border-radius:26px;
  background:var(--surface);
  color:var(--ink);
  box-shadow:var(--sheet-shadow);
  overflow:hidden;
}
#sheet::backdrop{
  background:rgba(12,12,16,.42);
  backdrop-filter:blur(7px);
  -webkit-backdrop-filter:blur(7px);
}
@media (prefers-color-scheme: dark){
  #sheet::backdrop{background:rgba(0,0,0,.62)}
}

#sheet[open]{animation:sheetIn .36s cubic-bezier(.2,.85,.25,1) both}
#sheet[open]::backdrop{animation:fadeIn .28s ease both}
#sheet.is-closing{animation:sheetOut .18s ease-in both}
#sheet.is-closing::backdrop{animation:fadeIn .18s ease-in reverse both}

@keyframes sheetIn{
  from{opacity:0;transform:scale(.82)}
  to{opacity:1;transform:scale(1)}
}
@keyframes sheetOut{
  from{opacity:1;transform:scale(1)}
  to{opacity:0;transform:scale(.94)}
}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}

.sheet-close{
  position:absolute;top:14px;right:14px;z-index:5;
  appearance:none;cursor:pointer;
  width:34px;height:34px;
  display:grid;place-items:center;
  border:1px solid var(--line);
  border-radius:50%;
  background:color-mix(in srgb, var(--surface) 76%, transparent);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  color:var(--muted);
  transition:color .18s ease, background-color .18s ease;
}
.sheet-close svg{width:17px;height:17px}
.sheet-close:hover{color:var(--ink);background:var(--tint)}

.sheet-scroll{
  max-height:min(88vh,900px);
  overflow-y:auto;
  overscroll-behavior:contain;
  padding:var(--sheet-pad);
  padding-bottom:calc(var(--sheet-pad) + 6px);
}

/* ─── detail content ─────────────────────────────────────── */

.dhead{
  display:grid;
  grid-template-columns:auto 1fr;
  gap:18px;
  align-items:start;
  padding-right:36px;
}
.dicon{
  width:84px;height:84px;
  border-radius:var(--radius);
  outline:1px solid var(--line);outline-offset:-1px;
  box-shadow:var(--shadow);
}
.dicon.mono-icon{aspect-ratio:auto}
.dicon.mono-icon::after{font-size:25px}
.dtitle{min-width:0}
.dtitle h2{
  margin:0 0 3px;
  font-size:clamp(21px,3.4vw,27px);
  font-weight:600;
  letter-spacing:-.028em;
  line-height:1.15;
}
.dtag{
  margin:0 0 10px;
  font-size:15px;
  letter-spacing:-.012em;
  color:var(--muted);
}
.dmeta{
  margin:0;
  display:flex;flex-wrap:wrap;gap:6px 14px;
  font-family:var(--mono);
  font-size:10.5px;
  letter-spacing:.045em;
  color:var(--muted);
}
.dmeta span{position:relative}
.dmeta span+span::before{
  content:"";position:absolute;left:-8px;top:50%;
  width:3px;height:3px;margin-top:-1.5px;border-radius:50%;
  background:currentColor;opacity:.4;
}

.dcta{grid-column:1 / -1;display:flex;flex-wrap:wrap;gap:9px}
.dcta:empty{display:none}
.store-btn{
  display:inline-flex;align-items:center;gap:7px;
  padding:8px 15px;
  border-radius:999px;
  border:1px solid var(--ink);
  background:var(--ink);
  color:var(--bg);
  font-size:13px;font-weight:500;letter-spacing:-.008em;
  text-decoration:none;
  transition:opacity .18s ease, transform .18s ease;
}
.store-btn:hover{opacity:.85;transform:translateY(-1px)}
.store-btn.is-ghost{
  background:transparent;color:var(--ink);border-color:var(--line);
}
.store-btn.is-ghost:hover{background:var(--tint)}
.store-btn svg{width:15px;height:15px;flex:none}
.store-btn.is-ghost svg{opacity:.75}
.store-btn.is-ghost:hover svg{opacity:1}

/* screenshot rail */
.shots{
  display:flex;gap:12px;
  margin:26px calc(-1 * var(--sheet-pad)) 0;
  padding:0 var(--sheet-pad) 10px;
  overflow-x:auto;
  overscroll-behavior-x:contain;
  scroll-snap-type:x proximity;
  scrollbar-width:thin;
  scrollbar-color:var(--line) transparent;
  cursor:grab;
}
.shots::-webkit-scrollbar{height:7px}
.shots::-webkit-scrollbar-track{background:transparent}
.shots::-webkit-scrollbar-thumb{background:var(--line);border-radius:99px}
.shots::-webkit-scrollbar-thumb:hover{background:var(--muted)}
.shots.is-dragging{cursor:grabbing;user-select:none;scroll-snap-type:none}
.shots:empty{display:none}
.shots img{
  flex:none;
  height:clamp(230px,36vh,320px);
  width:auto;
  border-radius:14px;
  border:1px solid var(--line);
  background:var(--tint);
  scroll-snap-align:start;
  user-select:none;
  -webkit-user-drag:none;
}

.dbody{margin-top:26px;max-width:62ch}
.dbody p{
  margin:0 0 14px;
  font-size:15.5px;
  line-height:1.62;
  letter-spacing:-.008em;
}
.dbody p:last-child{margin-bottom:0}
.dnote{
  font-size:13.5px !important;
  color:var(--muted);
  padding-left:14px;
  border-left:2px solid var(--line);
}

.dlist{list-style:none;margin:0 0 16px;padding:0;display:grid;gap:13px}
.dlist li{font-size:15px;line-height:1.55;letter-spacing:-.008em}
.dlist b{display:block;font-weight:600}
.dlist span{color:var(--muted)}

.chips{
  list-style:none;
  display:flex;flex-wrap:wrap;gap:7px;
  margin:26px 0 0;padding:24px 0 0;
  border-top:1px solid var(--line);
}
.chips li{
  font-family:var(--mono);
  font-size:11px;
  letter-spacing:.005em;
  color:var(--muted);
  padding:4px 10px 5px;
  border:1px solid var(--line);
  border-radius:999px;
}

/* ─── narrow screens ─────────────────────────────────────── */

@media (max-width:560px){
  .dhead{grid-template-columns:1fr;gap:14px;padding-right:30px}
  .dicon{width:70px;height:70px}
  #sheet{
    --sheet-pad:24px;
    position:fixed;
    inset:auto 0 0 0;
    width:100vw;max-width:100vw;
    max-height:92vh;
    margin:0;
    border-radius:22px 22px 0 0;
  }
  .sheet-scroll{max-height:92vh;padding-bottom:calc(34px + env(safe-area-inset-bottom))}
  #sheet[open]{animation:sheetUp .34s cubic-bezier(.2,.85,.25,1) both}
  #sheet.is-closing{animation:sheetDown .2s ease-in both}
  @keyframes sheetUp{from{opacity:.4;transform:translateY(60px)}to{opacity:1;transform:none}}
  @keyframes sheetDown{from{opacity:1;transform:none}to{opacity:0;transform:translateY(40px)}}
}

@media (max-width:380px){
  .grid{gap:20px 8px}
  .app-name{font-size:11.5px}
}

/* ─── reduced motion ─────────────────────────────────────── */

@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
    scroll-behavior:auto !important;
  }
  .app:hover img,.app:hover .mono-icon{transform:none}
}