* { box-sizing: border-box; }
/* Fluid tipografi ve modern koyu yeşil tema */
:root {
	--hue: 146; /* temel yeşil hue */
	--accent: hsl(var(--hue) 55% 42%);
	--accent-accent: hsl(var(--hue) 65% 50%);
	--accent-hover: hsl(var(--hue) 60% 36%);
	--accent-glow: hsl(var(--hue) 75% 60% / .55);
	--bg-0: #08110c;
	--bg-1: #0d1812;
	--bg-2: #13231a;
	--bg-3: #1b3125;
	--border: #203b2c;
	--border-strong: #2d4f3b;
	--text-hi: #e8f9f1;
	--text-med: #a7c8b9;
	--text-dim: #6d877c;
	--radius: 10px;
	--focus-ring: 0 0 0 3px hsl(var(--hue) 70% 50% / .35);
	--shadow-soft: 0 2px 4px -2px #000, 0 4px 18px -6px hsl(var(--hue) 50% 25% / .35);
	--grad-accent: linear-gradient(135deg, hsl(var(--hue) 55% 40%), hsl(var(--hue) 65% 28%));
	--grad-bg: radial-gradient(circle at 25% 20%, hsl(var(--hue) 60% 10% / .35), transparent 60%), radial-gradient(circle at 90% 80%, hsl(var(--hue) 70% 12% / .25), transparent 55%), linear-gradient(#08110c,#0d1812 65%, #08110c);
	
	/* Mobile-first responsive font sizing */
	font-size: clamp(15px, 1.5vw + 0.5rem, 17px);
	
	/* Touch-friendly sizing */
	--touch-target: 44px;
	--spacing-xs: 0.25rem;
	--spacing-sm: 0.5rem;
	--spacing-md: 1rem;
	--spacing-lg: 1.5rem;
	--spacing-xl: 2rem;
}

body { 
	margin:0; 
	font-family: 'Inter', system-ui, Roboto, 'Segoe UI', Arial, sans-serif; 
	background:var(--bg-0); 
	color:var(--text-hi); 
	-webkit-font-smoothing:antialiased;
	line-height: 1.6;
	overflow-x: hidden;
}

.topbar { 
	display:flex; 
	justify-content:space-between; 
	align-items:center; 
	padding: var(--spacing-sm) var(--spacing-md); 
	border-bottom:1px solid var(--border); 
	background:linear-gradient(180deg,var(--bg-1),var(--bg-0)); 
	position:sticky; 
	top:0; 
	z-index:100; 
	backdrop-filter:saturate(1.2) blur(6px);
	min-height: var(--touch-target);
}

.logo { 
	font-weight:600; 
	font-size: clamp(1rem, 2.5vw, 1.2rem);
	white-space: nowrap;
}

.auth-bar { 
	display:flex; 
	gap: var(--spacing-sm); 
	align-items:center;
	flex-wrap: wrap;
}
.btn { 
	cursor:pointer; 
	border:1px solid var(--accent); 
	background:var(--grad-accent); 
	color:#fff; 
	padding: clamp(0.6rem, 1.2vw, 0.75rem) clamp(1rem, 2vw, 1.2rem); 
	font-size: clamp(0.8rem, 1.5vw, 0.9rem); 
	font-weight:500; 
	border-radius:var(--radius); 
	line-height:1.2; 
	letter-spacing:.3px; 
	position:relative; 
	transition:all .3s ease; 
	box-shadow:0 0 0 0 var(--accent-glow);
	min-height: var(--touch-target);
	min-width: var(--touch-target);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	white-space: nowrap;
}

.btn:hover, .btn:focus { 
	background:var(--accent-hover); 
	border-color:var(--accent-hover); 
	box-shadow:0 4px 14px -4px var(--accent-glow); 
	transform:translateY(-1px); 
}

.btn:active {
	transform:translateY(0);
	box-shadow:0 2px 8px -2px var(--accent-glow);
}

.btn:disabled { 
	opacity:.5; 
	cursor:not-allowed; 
	transform: none;
}

.btn-outline { 
	background:transparent; 
	color:var(--accent); 
}

.btn-outline:hover, .btn-outline:focus { 
	background:var(--bg-2); 
	border-color:var(--accent-hover); 
}

.btn-text { 
	border:none; 
	background:transparent; 
	color:var(--accent-accent);
	min-height: auto;
	min-width: auto;
	padding: var(--spacing-sm);
}

.btn-text:hover, .btn-text:focus { 
	text-decoration:underline; 
	background:rgba(255,255,255,0.05);
	border-radius: var(--spacing-xs);
}

.btn:focus-visible { 
	outline:none; 
	box-shadow:var(--focus-ring); 
}
.layout { 
	display:grid; 
	grid-template-columns: minmax(0,1fr); 
	max-width:1400px; 
	margin: var(--spacing-sm) auto var(--spacing-xl); 
	gap: var(--spacing-lg); 
	padding: 0 var(--spacing-md) var(--spacing-xl);
}

.panel { 
	background:linear-gradient(160deg,var(--bg-1),var(--bg-2)); 
	padding: var(--spacing-lg) var(--spacing-lg) var(--spacing-xl); 
	border:1px solid var(--border); 
	border-radius:calc(var(--radius) + 2px); 
	box-shadow:var(--shadow-soft); 
	position:relative; 
	overflow:hidden;
}

.panel:before { 
	content:""; 
	position:absolute; 
	inset:0; 
	background:radial-gradient(circle at 85% 15%, hsl(var(--hue) 60% 20% / .18), transparent 60%); 
	pointer-events:none; 
}

.panel h2, .gallery-section h2 { 
	margin-top:0; 
	font-size: clamp(0.8rem, 1.5vw, 0.9rem); 
	letter-spacing:.55px; 
	text-transform:uppercase; 
	font-weight:600; 
	color:var(--text-med); 
	margin-bottom: var(--spacing-md);
}
.file-picker { 
	position:relative; 
	display:block; 
	border:2px dashed var(--border); 
	padding: var(--spacing-lg) var(--spacing-md); 
	border-radius:var(--radius); 
	cursor:pointer; 
	background:var(--bg-2); 
	margin-bottom: var(--spacing-md); 
	color:var(--text-med); 
	font-size: clamp(0.8rem, 1.5vw, 0.9rem); 
	letter-spacing:.4px; 
	width:100%;
	min-height: calc(var(--touch-target) * 1.5);
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	transition: all 0.3s ease;
}

.file-picker:hover, .file-picker:focus-within { 
	border-color:var(--accent); 
	background:var(--bg-1); 
	box-shadow:var(--focus-ring);
}

.file-picker input { 
	position:absolute; 
	width:1px; 
	height:1px; 
	opacity:0; 
	overflow:hidden; 
	clip:rect(0,0,0,0); 
}

input[type="text"], .form-input { 
	width:100%; 
	padding: var(--spacing-md); 
	border:1px solid var(--border); 
	border-radius:var(--radius); 
	background:var(--bg-2); 
	color:var(--text-hi); 
	margin-bottom: var(--spacing-md); 
	font-size: clamp(0.85rem, 1.5vw, 0.95rem);
	line-height: 1.5;
	min-height: var(--touch-target);
	transition: all 0.3s ease;
}

input[type="text"]:focus, .form-input:focus { 
	outline:none; 
	border-color:var(--accent-accent); 
	box-shadow:var(--focus-ring); 
	background:var(--bg-1);
}

.form-input::placeholder, input[type="text"]::placeholder {
	color: var(--text-dim);
	opacity: 0.8;
}
.progress { width:100%; height:7px; background:var(--bg-3); border-radius:4px; overflow:hidden; margin-top:.7rem; box-shadow:inset 0 0 0 1px var(--border); }
.progress-bar { height:100%; width:0; background:linear-gradient(90deg,var(--accent), var(--accent-accent)); transition:width .15s linear; position:relative; }
.progress-bar:after { content:""; position:absolute; inset:0; background:linear-gradient(90deg,transparent,rgba(255,255,255,.18),transparent); mix-blend-mode:overlay; animation:shine 1.8s linear infinite; }
@keyframes shine { 0% { transform:translateX(-100%);} 100% { transform:translateX(100%);} }
.status { font-size:.68rem; margin-top:.45rem; min-height:1.1rem; color:var(--text-med); letter-spacing:.3px; }
.gallery-section { 
	display:flex; 
	flex-direction:column; 
	gap: var(--spacing-lg);
}

.gallery-grid { 
	display:grid; 
	gap: clamp(var(--spacing-md), 2vw, var(--spacing-lg)); 
	grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
}

/* Photo card responsive improvements */
.photo-card { 
	position:relative; 
	background:linear-gradient(180deg,var(--bg-2),var(--bg-1)); 
	border:1px solid var(--border); 
	border-radius:calc(var(--radius) - 2px); 
	overflow:hidden; 
	display:flex; 
	flex-direction:column; 
	box-shadow:0 1px 0 0 var(--border),0 2px 12px -4px rgba(0,0,0,.5); 
	transition:transform .35s ease, border-color .35s ease, box-shadow .35s ease; 
}

.photo-card:before { 
	content:""; 
	position:absolute; 
	inset:0; 
	background:radial-gradient(circle at 70% 10%, hsl(var(--hue) 65% 18% / .35), transparent 60%); 
	opacity:0; 
	transition:.4s; 
	z-index:1; 
}

.photo-card:hover { 
	transform:translateY(-3px); 
	border-color:var(--border-strong); 
	box-shadow:0 6px 24px -10px hsl(var(--hue) 70% 25% / .4); 
}

.photo-card:hover:before { 
	opacity:1; 
}

.photo-wrapper { 
	position:relative; 
	width:100%; 
	aspect-ratio: 1/1; 
	overflow:hidden; 
}

.photo-image { 
	width:100%; 
	height:100%; 
	object-fit:cover; 
	display:block; 
	background:#0a1510; 
	transition:transform .3s ease; 
}

.photo-card:hover .photo-image { 
	transform:scale(1.02); 
}

.delete-btn { 
	position:absolute; 
	top: var(--spacing-sm); 
	right: var(--spacing-sm); 
	background:rgba(25,25,25,.9); 
	border:1px solid rgba(255,255,255,.2); 
	border-radius: var(--spacing-xs); 
	width: calc(var(--touch-target) * 0.7); 
	height: calc(var(--touch-target) * 0.7); 
	font-size: clamp(12px, 1.5vw, 14px); 
	cursor:pointer; 
	display:flex; 
	align-items:center; 
	justify-content:center; 
	opacity:0; 
	transition:all .3s ease; 
	backdrop-filter:blur(8px); 
	color:rgba(255,255,255,.9);
	z-index:2;
}

.photo-wrapper:hover .delete-btn { 
	opacity:1; 
}

.delete-btn:hover, .delete-btn:focus { 
	background:hsl(0, 65%, 50%); 
	border-color:hsl(0, 65%, 55%); 
	color:white; 
	transform:scale(1.1);
	box-shadow: 0 4px 12px rgba(220, 38, 38, 0.4);
}

.photo-meta { 
	padding: var(--spacing-md); 
	display: flex; 
	flex-direction: column;
	gap: var(--spacing-xs);
	min-height: 3rem;
	justify-content: center;
}

.photo-title { 
	font-size: clamp(0.75rem, 1.5vw, 0.85rem); 
	font-weight: 500; 
	line-height: 1.3; 
	color: var(--text-hi); 
	letter-spacing: 0.25px;
	word-break: break-word;
	margin: 0;
	overflow: hidden;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	line-clamp: 2;
	-webkit-box-orient: vertical;
}

.photo-date { 
	font-size: clamp(0.65rem, 1.2vw, 0.75rem); 
	color: var(--text-dim); 
	letter-spacing: 0.3px;
	margin: 0;
}

.photo-size { 
	font-size: clamp(0.6rem, 1.2vw, 0.7rem); 
	color:var(--text-med); 
	letter-spacing:.3px; 
}
.gallery-actions { 
	display:flex; 
	justify-content:center; 
	margin-top: var(--spacing-lg);
	padding: 0 var(--spacing-md);
}

.loading { 
	font-size: clamp(0.7rem, 1.5vw, 0.8rem); 
	color:var(--text-dim); 
	letter-spacing:.5px; 
}

.footer { 
	text-align:center; 
	padding: var(--spacing-xl) 0 calc(var(--spacing-xl) * 1.5); 
	font-size: clamp(0.6rem, 1.2vw, 0.7rem); 
	color:var(--text-dim); 
	letter-spacing:.5px; 
}

.upload-progress {
	margin-top: var(--spacing-sm);
	padding: var(--spacing-sm) var(--spacing-md);
	background: var(--bg-2);
	border-radius: var(--radius);
	font-size: clamp(0.75rem, 1.5vw, 0.85rem);
	color: var(--accent);
	border: 1px solid var(--border);
}

.gallery-message {
	text-align: center;
	padding: var(--spacing-xl) var(--spacing-md);
	color: var(--text-med);
	font-style: italic;
	font-size: clamp(0.9rem, 2vw, 1.1rem);
}

.empty-state, .error-state {
	grid-column: 1 / -1;
	text-align: center;
	padding: var(--spacing-xl) var(--spacing-md);
	color: var(--text-dim);
	font-size: clamp(0.9rem, 2vw, 1.1rem);
}

/* Temporary message styles */
.temp-message {
	position: fixed;
	top: 20px;
  right: 20px;
  padding: 0.75rem 1rem;
  border-radius: var(--radius);
  font-size: 0.9rem;
  font-weight: 500;
  z-index: 1000;
  animation: slideIn 0.3s ease;
}

.temp-message-success {
  background: var(--accent);
  color: var(--bg-1);
}

.temp-message-error {
  background: #ff4444;
  color: white;
}

@keyframes slideIn {
  from {
    transform: translateX(100%);
    opacity: 0;
  }
  to {
    transform: translateX(0);
    opacity: 1;
  }
}

/* Desktop delete button improvements */
@media (min-width: 1024px) {
  .delete-btn {
    opacity: 0;
    transition: all 0.2s ease;
  }
  
  .photo-card:hover .delete-btn {
    opacity: 1;
  }
  
  .delete-btn:hover {
    transform: scale(1.1);
    background: rgba(255, 68, 68, 0.2);
  }
}

/* Mobile: always show delete button for better UX */
@media (max-width: 1023px) {
  .delete-btn {
    opacity: 0.8;
  }
}

/* Mobile-first Responsive Breakpoints */

/* Small mobile (360px+) */
@media (min-width: 360px) {
	.gallery-grid { 
		grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); 
	}
	
	.topbar {
		padding: var(--spacing-sm) var(--spacing-lg);
	}
}

/* Large mobile / Small tablet (480px+) */
@media (min-width: 480px) {
	.gallery-grid { 
		grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); 
	}
	
	.layout {
		padding: 0 var(--spacing-lg) var(--spacing-xl);
	}
	
	.panel {
		padding: var(--spacing-xl) var(--spacing-xl) calc(var(--spacing-xl) * 1.2);
	}
	
	.delete-btn {
		width: var(--touch-target);
		height: var(--touch-target);
		font-size: 14px;
	}
}

/* Tablet (768px+) */
@media (min-width: 768px) {
	.gallery-grid { 
		grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); 
	}
	
	.layout {
		gap: var(--spacing-xl);
		padding: 0 var(--spacing-xl) var(--spacing-xl);
	}
	
	.photo-card:hover {
		transform: translateY(-4px);
	}
	
	/* Show hover effects only on non-touch devices */
	.photo-wrapper:hover .delete-btn {
		opacity: 1;
	}
}

/* Desktop (1024px+) */
@media (min-width: 1024px) { 
	.layout { 
		grid-template-columns: 340px 1fr;
		max-width: 1400px;
	}
	
	#upload-panel { 
		position: sticky; 
		top: calc(var(--touch-target) + var(--spacing-md)); 
		height: fit-content; 
	}
	
	.gallery-grid { 
		grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); 
	}
	
	.photo-wrapper { 
		aspect-ratio: 4/3; 
	}
	
	.delete-btn {
		width: 32px;
		height: 32px;
		font-size: 13px;
	}
}

/* Large desktop (1280px+) */
@media (min-width: 1280px) {
	.gallery-grid { 
		grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); 
	}
	
	.layout {
		grid-template-columns: 360px 1fr;
	}
}

/* Extra large screens (1600px+) */
@media (min-width: 1600px) {
	.gallery-grid { 
		grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); 
	}
}

/* Touch device optimizations */
@media (pointer: coarse) {
	.delete-btn {
		opacity: 0.7;
		width: calc(var(--touch-target) * 0.8);
		height: calc(var(--touch-target) * 0.8);
	}
	
	.photo-card:hover {
		transform: none;
	}
	
	.btn {
		min-height: calc(var(--touch-target) + 4px);
		padding: var(--spacing-md) var(--spacing-lg);
	}
}

/* High DPI displays */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
	.photo-image {
		image-rendering: -webkit-optimize-contrast;
		image-rendering: crisp-edges;
	}
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
	.btn, .photo-card, .progress-bar, .delete-btn { 
		transition: none !important; 
		animation: none !important; 
	}
	
	.photo-card:hover .photo-image {
		transform: none;
	}
}

/* Custom scrollbar (WebKit) */
::-webkit-scrollbar { 
	width: 12px; 
}

::-webkit-scrollbar-track { 
	background: var(--bg-1); 
	border-radius: 6px;
}

::-webkit-scrollbar-thumb { 
	background: var(--bg-3); 
	border: 2px solid var(--bg-1); 
	border-radius: 6px;
	transition: background 0.3s ease;
}

::-webkit-scrollbar-thumb:hover { 
	background: var(--accent-hover); 
}

/* Firefox scrollbar */
* {
	scrollbar-width: thin;
	scrollbar-color: var(--bg-3) var(--bg-1);
}